feat: pdf template customize

packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx

@@ -1,40 +1,49 @@
-import React from 'react';
-import { Box } from '@/components';
 import { Classes } from '@blueprintjs/core';
+import { useFormikContext } from 'formik';
+import { Box } from '@/components';
 import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize';
 import { EstimateCustomizeGeneralField } from './EstimateCustomizeFieldsGeneral';
 import { EstimateCustomizeContentFields } from './EstimateCustomizeFieldsContent';
 import { EstimatePaperTemplate } from './EstimatePaperTemplate';
 import { EstimateCustomizeValues } from './types';
 import { initialValues } from './constants';
-import { useFormikContext } from 'formik';
+import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+import { useDrawerActions } from '@/hooks/state';
+import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTemplateForm';
 
-export default function EstimateCustomizeContent() {
-  const handleFormSubmit = (values: EstimateCustomizeValues) => {};
+export function EstimateCustomizeContent() {
+  const { payload, name } = useDrawerContext();
+  const { closeDrawer } = useDrawerActions();
+
+  const templateId = payload?.templateId || null;
+
+  const handleSuccess = () => {
+    closeDrawer(name);
+  };
 
   return (
-    <Box className={Classes.DRAWER_BODY}>
-      <ElementCustomize<EstimateCustomizeValues>
-        initialValues={initialValues}
-        onSubmit={handleFormSubmit}
-      >
-        <ElementCustomize.PaperTemplate>
-          <EstimatePaperTemplateFormConnected />
-        </ElementCustomize.PaperTemplate>
+    <BrandingTemplateForm<EstimateCustomizeValues>
+      templateId={templateId}
+      defaultValues={initialValues}
+      onSuccess={handleSuccess}
+      resource={'SaleEstimate'}
+    >
+      <ElementCustomize.PaperTemplate>
+        <EstimatePaperTemplateFormConnected />
+      </ElementCustomize.PaperTemplate>
 
-        <ElementCustomize.FieldsTab id={'general'} label={'General'}>
-          <EstimateCustomizeGeneralField />
-        </ElementCustomize.FieldsTab>
+      <ElementCustomize.FieldsTab id={'general'} label={'General'}>
+        <EstimateCustomizeGeneralField />
+      </ElementCustomize.FieldsTab>
 
-        <ElementCustomize.FieldsTab id={'content'} label={'Content'}>
-          <EstimateCustomizeContentFields />
-        </ElementCustomize.FieldsTab>
+      <ElementCustomize.FieldsTab id={'content'} label={'Content'}>
+        <EstimateCustomizeContentFields />
+      </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/Estimates/EstimateCustomize/EstimateCustomizeDrawer.tsx

@@ -4,8 +4,8 @@ import * as R from 'ramda';
 import { Drawer, DrawerSuspense } from '@/components';
 import withDrawers from '@/containers/Drawer/withDrawers';
 
-const EstimateCustomizeContent = React.lazy(
-  () => import('./EstimateCustomizeContent'),
+const EstimateCustomizeDrawerBody = React.lazy(
+  () => import('./EstimateCustomizeDrawerBody'),
 );
 
 /**
@@ -22,7 +22,7 @@ function EstimateCustomizeDrawerRoot({
   return (
     <Drawer isOpen={isOpen} name={name} size={'100%'}>
       <DrawerSuspense>
-        <EstimateCustomizeContent />
+        <EstimateCustomizeDrawerBody />
       </DrawerSuspense>
     </Drawer>
   );

packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawerBody.tsx

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

packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx

@@ -1,6 +1,13 @@
 // @ts-nocheck
 import { Classes, Text } from '@blueprintjs/core';
-import { FFormGroup, FSwitch, Group, Stack } from '@/components';
+import {
+  FFormGroup,
+  FInputGroup,
+  FSwitch,
+  FieldRequiredHint,
+  Group,
+  Stack,
+} from '@/components';
 import { FColorInput } from '@/components/Forms/FColorInput';
 // import styles from './InvoiceCustomizeFields.module.scss';
 
@@ -10,11 +17,21 @@ export function EstimateCustomizeGeneralField() {
       <Stack spacing={0}>
         <h2 style={{ fontSize: 16, marginBottom: 10 }}>General Branding</h2>
         <p className={Classes.TEXT_MUTED}>
-          Set your invoice details to be automatically applied every time
you
+          Set your invoice details to be automatically applied every timeyou
           create a new invoice.
         </p>
       </Stack>
 
+      <FFormGroup
+        name={'templateName'}
+        label={'Template Name'}
+        labelInfo={<FieldRequiredHint />}
+        fastField
+        style={{ marginBottom: 10 }}
+      >
+        <FInputGroup name={'templateName'} fastField />
+      </FFormGroup>
+
       <Stack spacing={0}>
         <FFormGroup
           name={'primaryColor'}

packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts

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

packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/types.ts

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

packages/webapp/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.tsx

@@ -108,7 +108,7 @@ function EstimateActionsBar({
   };
   // Handle customize button clicl.
   const handleCustomizeBtnClick = () => {
-    openDrawer(DRAWERS.ESTIMATE_CUSTOMIZE);
+    openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'SaleEstimate' });
   };
 
   return (
@@ -192,7 +192,7 @@ function EstimateActionsBar({
             <Menu>
               <MenuItem
                 onClick={handleCustomizeBtnClick}
-                text={'Customize Estimate'}
+                text={'Customize Templates'}
               />
             </Menu>
           }