From 9c8f96f3e9e4202fb5a3fcfff2c2ed0dd574a41e Mon Sep 17 00:00:00 2001
From: Mateusz Kadlubowski <xeho91@pm.me>
Date: Thu, 10 Jul 2025 17:15:37 +0200
Subject: [PATCH] Allow optional image

---
 .../config/locales/en.json                    | 15 +++---
 .../config/locales/pl.json                    | 15 +++---
 .../TemplateFooterPage/TemplateFooterPage.tsx | 47 +++++++++++------
 .../TemplateForm/TemplateForm.tsx             | 52 +++++++++++++------
 .../TemplatePreview/composeTemplate.ts        | 32 ++++++++----
 .../scenes/TemplateFooterPage/types.ts        |  1 +
 6 files changed, 105 insertions(+), 57 deletions(-)

diff --git a/web/src/footer-templates-app/config/locales/en.json b/web/src/footer-templates-app/config/locales/en.json
index 0246392..606c215 100644
--- a/web/src/footer-templates-app/config/locales/en.json
+++ b/web/src/footer-templates-app/config/locales/en.json
@@ -8,6 +8,7 @@
   "fields": {
     "email": "Email",
     "fullName": "Full name",
+    "imageEnable": "I want to add image.",
     "jobPosition": "Job position",
     "phoneNumber": "Phone number",
     "phoneNumberEnable": "I want to add phone number."
@@ -17,13 +18,6 @@
     "instruction": "Instruction"
   },
   "scenes": {
-    "TemplateFooter": {
-      "copyFooterButton": "Copy footer template",
-      "downloadButton": "Download avatar",
-      "mainTitle": "Footer Template",
-      "form": "Form",
-      "previewTitle": "Preview"
-    },
     "InstructionPage": {
       "instruction": {
         "1": "1. Go to Gmail settings",
@@ -33,6 +27,13 @@
         "5": "5. Paste copied footer into Gmail settings and set signature defaults",
         "6": "6. Remember to save changes at the bottom of settings"
       }
+    },
+    "TemplateFooter": {
+      "copyFooterButton": "Copy footer template",
+      "downloadButton": "Download avatar",
+      "form": "Form",
+      "mainTitle": "Footer Template",
+      "previewTitle": "Preview"
     }
   },
   "uploadButton": "Upload file",
diff --git a/web/src/footer-templates-app/config/locales/pl.json b/web/src/footer-templates-app/config/locales/pl.json
index 5423d67..5603e83 100644
--- a/web/src/footer-templates-app/config/locales/pl.json
+++ b/web/src/footer-templates-app/config/locales/pl.json
@@ -8,6 +8,7 @@
   "fields": {
     "email": "Email",
     "fullName": "Imię i nazwisko",
+    "imageEnable": "Chcę dodać zdjęcie",
     "jobPosition": "Stanowisko",
     "phoneNumber": "Numer telefonu",
     "phoneNumberEnable": "Chcę dodać numer telefonu"
@@ -17,13 +18,6 @@
     "instruction": "Instrukcja"
   },
   "scenes": {
-    "TemplateFooter": {
-      "copyFooterButton": "Skopiuj do schowka",
-      "downloadButton": "Pobierz awatar",
-      "mainTitle": "Footer Template",
-      "form": "Formularz",
-      "previewTitle": "Podgląd"
-    },
     "InstructionPage": {
       "instruction": {
         "1": "1. Przejdź do ustawień Gmail",
@@ -33,6 +27,13 @@
         "5": "5. Wklej skopiowaną stopkę do ustawień Gmail i zmień ustawienia domyślne",
         "6": "6. Pamiętaj o zapisie zmian na dole strony ustawień"
       }
+    },
+    "TemplateFooter": {
+      "copyFooterButton": "Skopiuj do schowka",
+      "downloadButton": "Pobierz awatar",
+      "form": "Formularz",
+      "mainTitle": "Footer Template",
+      "previewTitle": "Podgląd"
     }
   },
   "uploadButton": "Prześlij plik",
diff --git a/web/src/footer-templates-app/scenes/TemplateFooterPage/TemplateFooterPage.tsx b/web/src/footer-templates-app/scenes/TemplateFooterPage/TemplateFooterPage.tsx
index 89ec784..8c8bae4 100644
--- a/web/src/footer-templates-app/scenes/TemplateFooterPage/TemplateFooterPage.tsx
+++ b/web/src/footer-templates-app/scenes/TemplateFooterPage/TemplateFooterPage.tsx
@@ -20,6 +20,7 @@ const initialValues: TemplateFormValues = {
   email: "",
   isPhoneEnabled: false,
   phoneNumber: "",
+  isImageEnabled: false,
   uploadedImageUrl: null,
   previewImage: {
     cropped: "",
@@ -47,13 +48,23 @@ export const TemplateFooterPage: FunctionComponent = () => {
       is: true,
       then: yup.string().required(t("validation.required"))
     }),
-    previewImage: yup.object({
-      file: yup
-        .mixed()
-        .nullable()
-        .test("filePresent", t("validation.required"), (file: File | null) => {
-          return file && file.name ? true : false;
-        })
+    isImageEnabled: yup.boolean(),
+    previewImage: yup.object().when("isImageEnabled", {
+      is: true,
+      then: yup.object({
+        file: yup
+          .mixed()
+          .test(
+            "filePresent",
+            t("validation.required"),
+            (file: File | null) => {
+              return file && file.name ? true : false;
+            }
+          )
+      }),
+      otherwise: yup.object({
+        file: yup.mixed().nullable()
+      })
     })
   });
 
@@ -68,19 +79,21 @@ export const TemplateFooterPage: FunctionComponent = () => {
         setSubmitting(true);
 
         try {
-          const { data } = await lambda.uploadImage(
-            values.previewImage.cropped
-          );
+          if (values.isImageEnabled) {
+            const { data } = await lambda.uploadImage(
+              values.previewImage.cropped
+            );
 
-          if (!data) {
-            return;
-          }
+            if (!data) {
+              return;
+            }
 
-          await new Promise<void>((resolve) =>
-            setTimeout(() => resolve(), 4000)
-          );
+            await new Promise<void>((resolve) =>
+              setTimeout(() => resolve(), 4000)
+            );
 
-          await setFieldValue("uploadedImageUrl", data.imageUrl);
+            await setFieldValue("uploadedImageUrl", data.imageUrl);
+          }
           copyToClipboard();
         } catch (error) {
           // eslint-disable-next-line no-console
diff --git a/web/src/footer-templates-app/scenes/TemplateFooterPage/TemplateForm/TemplateForm.tsx b/web/src/footer-templates-app/scenes/TemplateFooterPage/TemplateForm/TemplateForm.tsx
index 65ec105..2222f41 100644
--- a/web/src/footer-templates-app/scenes/TemplateFooterPage/TemplateForm/TemplateForm.tsx
+++ b/web/src/footer-templates-app/scenes/TemplateFooterPage/TemplateForm/TemplateForm.tsx
@@ -75,27 +75,45 @@ export const TemplateForm: FunctionComponent<TemplateFormProps> = ({
         </Grid>
       )}
       <Grid item xs={12}>
-        <UploadFileButton
-          name="previewImage.file"
-          errorText={(errors.previewImage && errors.previewImage.file) || ""}
-          onChange={handleUploadFile(formikProps)}
+        <FormControlLabel
+          control={
+            <Checkbox
+              name="isImageEnabled"
+              value={values.isImageEnabled}
+              onChange={handleChange}
+            />
+          }
+          label={t("fields.imageEnable")}
         />
       </Grid>
-      <Grid item xs={12}>
-        {formikProps.values.previewImage.url && (
-          <>
-            <ImageCropper
-              url={formikProps.values.previewImage.url}
-              setCroppedImage={(croppedImage: string) =>
-                formikProps.setFieldValue("previewImage", {
-                  ...formikProps.values.previewImage,
-                  cropped: croppedImage
-                })
+      {values.isImageEnabled && (
+        <>
+          <Grid item xs={12}>
+            <UploadFileButton
+              name="previewImage.file"
+              errorText={
+                (errors.previewImage && errors.previewImage.file) || ""
               }
+              onChange={handleUploadFile(formikProps)}
             />
-          </>
-        )}
-      </Grid>
+          </Grid>
+          <Grid item xs={12}>
+            {formikProps.values.previewImage.url && (
+              <>
+                <ImageCropper
+                  url={formikProps.values.previewImage.url}
+                  setCroppedImage={(croppedImage: string) =>
+                    formikProps.setFieldValue("previewImage", {
+                      ...formikProps.values.previewImage,
+                      cropped: croppedImage
+                    })
+                  }
+                />
+              </>
+            )}
+          </Grid>
+        </>
+      )}
     </>
   );
 };
diff --git a/web/src/footer-templates-app/scenes/TemplateFooterPage/TemplatePreview/composeTemplate.ts b/web/src/footer-templates-app/scenes/TemplateFooterPage/TemplatePreview/composeTemplate.ts
index 100843c..c9bbcd3 100644
--- a/web/src/footer-templates-app/scenes/TemplateFooterPage/TemplatePreview/composeTemplate.ts
+++ b/web/src/footer-templates-app/scenes/TemplateFooterPage/TemplatePreview/composeTemplate.ts
@@ -13,7 +13,8 @@ export const composeTemplate = (options: ComposeTemplate) => {
   const jobPosition = options.jobPosition || "Software Engineer";
   const phoneNumber = options.phoneNumber || "+48 777 777 777";
   const isPhoneEnabled = options.isPhoneEnabled;
-  const imageUrl = uploadedImageUrl || cropped || "/portrait-placeholder.png";
+  const isImageEnabled = options.isImageEnabled;
+  const imageUrl = uploadedImageUrl || cropped;
 
   return `<!DOCTYPE html>
     <html lang="en">
@@ -25,14 +26,8 @@ export const composeTemplate = (options: ComposeTemplate) => {
 
     <table cellpadding="0" cellspacing="0" border="0" style="font-family: 'Lato', 'Roboto', Helvetica, Tahoma, sans-serif;">
         <tr>
-            <td style="padding-right: 30px; width: 130px;">
-              <img
-              src="${imageUrl}"
-              alt="${fullName}"
-              style="height: auto;
-              margin-top: 5px;
-              width: 130px;">
-            </td>
+            <!-- Image -->
+            ${createImageSection(isImageEnabled, imageUrl, fullName)}
             <td>
                 <!-- Person -->
                 <div style="color: #ff5252; font-size: 20px; font-stretch: normal; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: normal;">${fullName}</div>
@@ -92,6 +87,25 @@ export const composeTemplate = (options: ComposeTemplate) => {
     </html>`;
 };
 
+const createImageSection = (
+  isImageEnabled: boolean,
+  imageUrl: string | null,
+  fullName: string
+) => {
+  if (!isImageEnabled) {
+    return "";
+  }
+
+  const finalImageUrl = imageUrl || "/portrait-placeholder.png";
+
+  return `<td style="padding-right: 30px; width: 130px;">
+      <img
+        src="${finalImageUrl}"
+        alt="${fullName}"
+        style="height: auto; margin-top: 5px; width: 130px;">
+    </td>`;
+};
+
 const createPhoneSection = (isPhoneEnabled: boolean, phoneNumber: string) => {
   if (!isPhoneEnabled) {
     return "";
diff --git a/web/src/footer-templates-app/scenes/TemplateFooterPage/types.ts b/web/src/footer-templates-app/scenes/TemplateFooterPage/types.ts
index 3cf0d10..10d8b58 100644
--- a/web/src/footer-templates-app/scenes/TemplateFooterPage/types.ts
+++ b/web/src/footer-templates-app/scenes/TemplateFooterPage/types.ts
@@ -4,6 +4,7 @@ export interface TemplateFormValues {
   email: string;
   isPhoneEnabled: boolean;
   phoneNumber: string;
+  isImageEnabled: boolean;
   uploadedImageUrl: string | null;
   previewImage: {
     url: string;