feat: pdf template customize

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomize.tsx

@@ -0,0 +1,18 @@
+import { Box } from '@/components';
+import { Classes } from '@blueprintjs/core';
+import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+import { PaymentReceivedCustomizeContent } from './PaymentReceivedCustomizeContent';
+import { BrandingTemplateBoot } from '@/containers/BrandingTemplates/BrandingTemplateBoot';
+
+export default function PaymentReceivedCustomize() {
+  const { payload } = useDrawerContext();
+  const templateId = payload.templateId;
+
+  return (
+    <Box className={Classes.DRAWER_BODY}>
+      <BrandingTemplateBoot templateId={templateId}>
+        <PaymentReceivedCustomizeContent />
+      </BrandingTemplateBoot>
+    </Box>
+  );
+}

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx

@@ -1,40 +1,47 @@
-import React from 'react';
 import { useFormikContext } from 'formik';
-import { Classes } from '@blueprintjs/core';
-import { Box } from '@/components';
 import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize';
 import { PaymentReceivedCustomizeGeneralField } from './PaymentReceivedCustomizeFieldsGeneral';
 import { PaymentReceivedCustomizeContentFields } from './PaymentReceivedCustomizeFieldsContent';
 import { PaymentReceivedCustomizeValues } from './types';
 import { PaymentReceivedPaperTemplate } from './PaymentReceivedPaperTemplate';
 import { initialValues } from './constants';
+import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+import { useDrawerActions } from '@/hooks/state';
+import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTemplateForm';
 
-export default function PaymentReceivedCustomizeContent() {
-  const handleFormSubmit = (values: PaymentReceivedCustomizeValues) => {};
+export function PaymentReceivedCustomizeContent() {
+  const { payload, name } = useDrawerContext();
+  const { closeDrawer } = useDrawerActions();
+
+  const templateId = payload?.templateId || null;
+
+  const handleSuccess = () => {
+    closeDrawer(name);
+  };
 
   return (
-    <Box className={Classes.DRAWER_BODY}>
-      <ElementCustomize<PaymentReceivedCustomizeValues>
-        initialValues={initialValues}
-        onSubmit={handleFormSubmit}
-      >
-        <ElementCustomize.PaperTemplate>
-          <PaymentReceivedPaperTemplateFormConnected />
-        </ElementCustomize.PaperTemplate>
+    <BrandingTemplateForm<PaymentReceivedCustomizeValues>
+      templateId={templateId}
+      defaultValues={initialValues}
+      onSuccess={handleSuccess}
+      resource={'PaymentReceive'}
+    >
+      <ElementCustomize.PaperTemplate>
+        <PaymentReceivedPaperTemplateFormConnected />
+      </ElementCustomize.PaperTemplate>
 
-        <ElementCustomize.FieldsTab id={'general'} label={'General'}>
-          <PaymentReceivedCustomizeGeneralField />
-        </ElementCustomize.FieldsTab>
+      <ElementCustomize.FieldsTab id={'general'} label={'General'}>
+        <PaymentReceivedCustomizeGeneralField />
+      </ElementCustomize.FieldsTab>
 
-        <ElementCustomize.FieldsTab id={'content'} label={'Content'}>
-          <PaymentReceivedCustomizeContentFields />
-        </ElementCustomize.FieldsTab>
+      <ElementCustomize.FieldsTab id={'content'} label={'Content'}>
+        <PaymentReceivedCustomizeContentFields />
+      </ElementCustomize.FieldsTab>
 
-        <ElementCustomize.FieldsTab id={'totals'} label={'Totals'}>
-          asdfasdfdsaf #3
-        </ElementCustomize.FieldsTab>
-      </ElementCustomize>
-    </Box>
+      <ElementCustomize.FieldsTab id={'totals'} label={'Totals'}>
+        asdfasdfdsaf #3
+      </ElementCustomize.FieldsTab>
+    </BrandingTemplateForm>
   );
 }
 

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeDrawer.tsx

@@ -4,8 +4,8 @@ import * as R from 'ramda';
 import { Drawer, DrawerSuspense } from '@/components';
 import withDrawers from '@/containers/Drawer/withDrawers';
 
-const PaymentReceivedCustomizeContent = React.lazy(
-  () => import('./PaymentReceivedCustomizeContent'),
+const PaymentReceivedCustomize = React.lazy(
+  () => import('./PaymentReceivedCustomize'),
 );
 
 /**
@@ -16,12 +16,12 @@ function PaymentReceivedCustomizeDrawerRoot({
   name,
   // #withDrawer
   isOpen,
-  payload: {},
+  payload
 }) {
   return (
-    <Drawer isOpen={isOpen} name={name} size={'100%'}>
+    <Drawer isOpen={isOpen} name={name} size={'100%'} payload={payload}>
       <DrawerSuspense>
-        <PaymentReceivedCustomizeContent />
+        <PaymentReceivedCustomize />
       </DrawerSuspense>
     </Drawer>
   );

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts

@@ -1,4 +1,6 @@
 export const initialValues = {
+  templateName: '',
+  
   // Colors
   primaryColor: '#2c3dd8',
   secondaryColor: '#2c3dd8',

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/types.ts

@@ -1,4 +1,6 @@
-export interface PaymentReceivedCustomizeValues {
+import { BrandingTemplateValues } from '@/containers/BrandingTemplates/types';
+
+export interface PaymentReceivedCustomizeValues extends BrandingTemplateValues {
   // Colors
   primaryColor?: string;
   secondaryColor?: string;

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsLanding/PaymentsReceivedActionsBar.tsx

@@ -113,7 +113,7 @@ function PaymentsReceivedActionsBar({
   };
   // Handle the customize button click.
   const handleCustomizeBtnClick = () => {
-    openDrawer(DRAWERS.PAYMENT_RECEIVED_CUSTOMIZE);
+    openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'PaymentReceive' });
   };
 
   return (
@@ -195,7 +195,7 @@ function PaymentsReceivedActionsBar({
             <Menu>
               <MenuItem
                 onClick={handleCustomizeBtnClick}
-                text={'Customize Invoice'}
+                text={'Customize Templates'}
               />
             </Menu>
           }