feat: templates customize

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

@@ -1,20 +1,30 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Button, NavbarGroup, Intent } from '@blueprintjs/core';
 import { DashboardActionsBar, Icon } from '@/components';
-import { DRAWERS } from '@/constants/drawers';
-
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import {
+  getButtonLabelFromResource,
+  getCustomizeDrawerNameFromResource,
+} from './_utils';
 import { compose } from '@/utils';
+import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 
 /**
  * Account drawer action bar.
  */
 function BrandingTemplateActionsBarRoot({ openDrawer }) {
+  const {
+    payload: { resource },
+  } = useDrawerContext();
+
   // Handle new child button click.
   const handleCreateBtnClick = () => {
-    openDrawer(DRAWERS.INVOICE_CUSTOMIZE);
+    const drawerResource = getCustomizeDrawerNameFromResource(resource);
+    openDrawer(drawerResource);
   };
+  const label = useMemo(() => getButtonLabelFromResource(resource), [resource]);
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -24,7 +34,7 @@ function BrandingTemplateActionsBarRoot({ openDrawer }) {
           onClick={handleCreateBtnClick}
           minimal
         >
-          Create Invoice Branding
+          {label}
         </Button>
       </NavbarGroup>
     </DashboardActionsBar>

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

@@ -5,8 +5,8 @@ import { BrandingTemplatesBoot } from './BrandingTemplatesBoot';
 import { Box, Card, DrawerHeaderContent, Group } from '@/components';
 import { DRAWERS } from '@/constants/drawers';
 import { BrandingTemplatesTable } from './BrandingTemplatesTable';
-import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { BrandingTemplateActionsBar } from './BrandingTemplatesActionsBar';
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 
 export default function BrandingTemplateContent() {
   return (

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

@@ -5,10 +5,11 @@ import clsx from 'classnames';
 import { DataTable, Group, TableSkeletonRows } from '@/components';
 import { useBrandingTemplatesBoot } from './BrandingTemplatesBoot';
 import { ActionsMenu } from './_components';
+import { DRAWERS } from '@/constants/drawers';
 import withAlertActions from '@/containers/Alert/withAlertActions';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
-import { DRAWERS } from '@/constants/drawers';
 import styles from './BrandTemplates.module.scss';
+import { getCustomizeDrawerNameFromResource } from './_utils';
 
 interface BrandingTemplatesTableProps {}
 
@@ -35,7 +36,10 @@ function BrandingTemplateTableRoot({
     const templateId = cell.row.original.id;
     const resource = cell.row.original.resource;
 
-    openDrawer(DRAWERS.INVOICE_CUSTOMIZE, { templateId, resource });
+    // Retrieves the customize drawer name from the given resource name.
+    const drawerName = getCustomizeDrawerNameFromResource(resource);
+
+    openDrawer(drawerName, { templateId, resource });
   };
 
   return (

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

@@ -1,4 +1,5 @@
 import { omit } from 'lodash';
+import * as R from 'ramda';
 import {
   CreatePdfTemplateValues,
   EditPdfTemplateValues,
@@ -7,6 +8,7 @@ import { useBrandingTemplateBoot } from './BrandingTemplateBoot';
 import { transformToForm } from '@/utils';
 import { BrandingTemplateValues } from './types';
 import { useFormikContext } from 'formik';
+import { DRAWERS } from '@/constants/drawers';
 
 export const transformToEditRequest = <T extends BrandingTemplateValues>(
   values: T,
@@ -19,7 +21,7 @@ export const transformToEditRequest = <T extends BrandingTemplateValues>(
 
 export const transformToNewRequest = <T extends BrandingTemplateValues>(
   values: T,
-  resource: string
+  resource: string,
 ): CreatePdfTemplateValues => {
   return {
     resource,
@@ -28,12 +30,6 @@ export const transformToNewRequest = <T extends BrandingTemplateValues>(
   };
 };
 
-export const useIsTemplateNamedFilled = () => {
-  const { values } = useFormikContext<BrandingTemplateValues>();
-
-  return values.templateName && values.templateName?.length >= 4;
-};
-
 export const useBrandingTemplateFormInitialValues = <
   T extends BrandingTemplateValues,
 >(
@@ -50,3 +46,25 @@ export const useBrandingTemplateFormInitialValues = <
     ...(transformToForm(defaultPdfTemplate, initialValues) as T),
   };
 };
+
+export const getCustomizeDrawerNameFromResource = (resource: string) => {
+  const pairs = {
+    SaleInvoice: DRAWERS.INVOICE_CUSTOMIZE,
+    SaleEstimate: DRAWERS.ESTIMATE_CUSTOMIZE,
+    SaleReceipt: DRAWERS.RECEIPT_CUSTOMIZE,
+    CreditNote: DRAWERS.CREDIT_NOTE_CUSTOMIZE,
+    PaymentReceive: DRAWERS.PAYMENT_RECEIVED_CUSTOMIZE,
+  };
+  return R.prop(resource, pairs) || DRAWERS.INVOICE_CUSTOMIZE;
+};
+
+export const getButtonLabelFromResource = (resource: string) => {
+  const pairs = {
+    SaleInvoice: 'Create Invoice Branding',
+    SaleEstimate: 'Create Estimate Branding',
+    SaleReceipt: 'Create Receipt Branding',
+    CreditNote: 'Create Credit Note Branding',
+    PaymentReceive: 'Create Payment Branding',
+  };
+  return R.prop(resource, pairs) || 'Create Branding Template'; 
+}

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

@@ -0,0 +1,8 @@
+import { useFormikContext } from 'formik';
+import { BrandingTemplateValues } from './types';
+
+export const useIsTemplateNamedFilled = () => {
+  const { values } = useFormikContext<BrandingTemplateValues>();
+
+  return values.templateName && values.templateName?.length >= 4;
+};