feat: pdf template customize

packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx

@@ -1,5 +1,3 @@
-import { Box } from '@/components';
-import { Classes } from '@blueprintjs/core';
 import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize';
 import { ReceiptCustomizeGeneralField } from './ReceiptCustomizeFieldsGeneral';
 import { ReceiptCustomizeFieldsContent } from './ReceiptCustomizeFieldsContent';
@@ -7,33 +5,43 @@ import { ReceiptPaperTemplate } from './ReceiptPaperTemplate';
 import { ReceiptCustomizeValues } from './types';
 import { initialValues } from './constants';
 import { useFormikContext } from 'formik';
+import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTemplateForm';
+import { useDrawerActions } from '@/hooks/state';
+import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 
-export default function ReceiptCustomizeContent() {
-  const handleFormSubmit = (values: ReceiptCustomizeValues) => {};
+export function ReceiptCustomizeContent() {
+  const { payload, name } = useDrawerContext();
+  const { closeDrawer } = useDrawerActions();
+
+  const templateId = payload?.templateId || null;
+
+  const handleFormSuccess = () => {
+    closeDrawer(name);
+  };
 
   return (
-    <Box className={Classes.DRAWER_BODY}>
-      <ElementCustomize<ReceiptCustomizeValues>
-        initialValues={initialValues}
-        onSubmit={handleFormSubmit}
-      >
-        <ElementCustomize.PaperTemplate>
-          <ReceiptPaperTemplateFormConnected />
-        </ElementCustomize.PaperTemplate>
+    <BrandingTemplateForm<ReceiptCustomizeValues>
+      templateId={templateId}
+      initialValues={initialValues}
+      onSuccess={handleFormSuccess}
+      resource={'SaleReceipt'}
+    >
+      <ElementCustomize.PaperTemplate>
+        <ReceiptPaperTemplateFormConnected />
+      </ElementCustomize.PaperTemplate>
 
-        <ElementCustomize.FieldsTab id={'general'} label={'General'}>
-          <ReceiptCustomizeGeneralField />
-        </ElementCustomize.FieldsTab>
+      <ElementCustomize.FieldsTab id={'general'} label={'General'}>
+        <ReceiptCustomizeGeneralField />
+      </ElementCustomize.FieldsTab>
 
-        <ElementCustomize.FieldsTab id={'content'} label={'Content'}>
-          <ReceiptCustomizeFieldsContent />
-        </ElementCustomize.FieldsTab>
+      <ElementCustomize.FieldsTab id={'content'} label={'Content'}>
+        <ReceiptCustomizeFieldsContent />
+      </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/Receipts/ReceiptCustomize/ReceiptCustomizeDrawer.tsx

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

packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeDrawerBody.tsx

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

packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts

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

packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts

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

packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx

@@ -115,7 +115,7 @@ function ReceiptActionsBar({
   };
   // Handle customize button click.
   const handleCustomizeBtnClick = () => {
-    openDrawer(DRAWERS.RECEIPT_CUSTOMIZE);
+    openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'SaleReceipt' });
   };
 
   return (
@@ -198,7 +198,7 @@ function ReceiptActionsBar({
             <Menu>
               <MenuItem
                 onClick={handleCustomizeBtnClick}
-                text={'Customize Receipt'}
+                text={'Customize Template'}
               />
             </Menu>
           }