feat: Uploading company logo

packages/webapp/src/containers/BrandingTemplates/BrandingTemplateForm.tsx

@@ -19,6 +19,7 @@ import {
 import { FormikHelpers } from 'formik';
 import { BrandingTemplateValues } from './types';
 import { useUploadAttachments } from '@/hooks/query/attachments';
+import { excludePrivateProps } from '@/utils';
 
 interface BrandingTemplateFormProps<T> extends ElementCustomizeProps<T> {
   resource: string;
@@ -41,7 +42,7 @@ export function BrandingTemplateForm<T extends BrandingTemplateValues>({
 
   const initialValues = useBrandingTemplateFormInitialValues<T>(defaultValues);
   const [isUploading, setIsLoading] = useState<boolean>(false);
-  
+
   // Uploads the attachments.
   const { mutateAsync: uploadAttachments } = useUploadAttachments({
     onSuccess: () => {
@@ -53,38 +54,53 @@ export function BrandingTemplateForm<T extends BrandingTemplateValues>({
   //  - Push the updated data.
   const handleFormSubmit = async (
     values: T,
-    { setSubmitting }: FormikHelpers<T>,
+    { setSubmitting, setFieldValue }: FormikHelpers<T>,
   ) => {
+    const _values = { ...values };
+
+    // Handle create/edit request success.
     const handleSuccess = (message: string) => {
       AppToaster.show({ intent: Intent.SUCCESS, message });
       setSubmitting(false);
       onSuccess && onSuccess();
     };
+    // Handle create/edit request error.
     const handleError = (message: string) => {
       AppToaster.show({ intent: Intent.DANGER, message });
       setSubmitting(false);
       onError && onError();
     };
-
-    if (values.companyLogoFile) {
-      isUploading(true);
+    // Start upload the company logo file if it is presented.
+    if (values._companyLogoFile) {
+      setIsLoading(true);
       const formData = new FormData();
       const key = Date.now().toString();
 
-      formData.append('file', values.companyLogoFile);
+      formData.append('file', values._companyLogoFile);
       formData.append('internalKey', key);
 
       try {
-        await uploadAttachments(formData);
+        const uploadedAttachmentRes = await uploadAttachments(formData);
         setIsLoading(false);
+
+        // Adds the attachment key to the values after finishing upload.
+        _values['companyLogoKey'] = uploadedAttachmentRes?.key;
       } catch {
         handleError('An error occurred while uploading company logo.');
         setIsLoading(false);
         return;
       }
     }
+    // Exclude all the private props that starts with _.
+    const excludedPrivateValues = excludePrivateProps(_values);
+
+    // Transform the the form values to request based on the mode (new or edit mode).
+    const reqValues = templateId
+      ? transformToEditRequest(excludedPrivateValues, initialValues)
+      : transformToNewRequest(excludedPrivateValues, initialValues, resource);
+
+    // Template id is presented means edit mode.
     if (templateId) {
-      const reqValues = transformToEditRequest(values);
       setSubmitting(true);
 
       try {
@@ -94,7 +110,6 @@ export function BrandingTemplateForm<T extends BrandingTemplateValues>({
         handleError('An error occurred while updating the PDF template.');
       }
     } else {
-      const reqValues = transformToNewRequest(values, resource);
       setSubmitting(true);
 
       try {
@@ -119,3 +134,8 @@ export function BrandingTemplateForm<T extends BrandingTemplateValues>({
 export const validationSchema = Yup.object().shape({
   templateName: Yup.string().required('Template Name is required'),
 });
+
+
+// Initial values - companyLogoKey, companyLogoUri
+// Form - _companyLogoFile, companyLogoKey, companyLogoUri
+// Request - companyLogoKey

packages/webapp/src/containers/BrandingTemplates/_utils.ts

@@ -7,26 +7,35 @@ import {
 import { useBrandingTemplateBoot } from './BrandingTemplateBoot';
 import { transformToForm } from '@/utils';
 import { BrandingTemplateValues } from './types';
-import { useFormikContext } from 'formik';
 import { DRAWERS } from '@/constants/drawers';
 
+const commonExcludedAttrs = ['templateName', 'companyLogoUri'];
+
 export const transformToEditRequest = <T extends BrandingTemplateValues>(
   values: T,
+  defaultValues: T,
 ): EditPdfTemplateValues => {
   return {
     templateName: values.templateName,
-    attributes: omit(values, ['templateName']),
+    attributes: transformToForm(
+      omit(values, commonExcludedAttrs),
+      defaultValues,
+    ),
   };
 };
 
 export const transformToNewRequest = <T extends BrandingTemplateValues>(
   values: T,
+  defaultValues: T,
   resource: string,
 ): CreatePdfTemplateValues => {
   return {
     resource,
     templateName: values.templateName,
-    attributes: omit(values, ['templateName']),
+    attributes: transformToForm(
+      omit(values, commonExcludedAttrs),
+      defaultValues,
+    ),
   };
 };
 
@@ -66,5 +75,5 @@ export const getButtonLabelFromResource = (resource: string) => {
     CreditNote: 'Create Credit Note Branding',
     PaymentReceive: 'Create Payment Branding',
   };
-  return R.prop(resource, pairs) || 'Create Branding Template'; 
-}
+  return R.prop(resource, pairs) || 'Create Branding Template';
+};

packages/webapp/src/containers/BrandingTemplates/types.ts

@@ -2,4 +2,7 @@
 
 export interface BrandingTemplateValues {
   templateName: string;
+
+  companyLogoKey?: string;
+  companyLogoUri?: string;
 }