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>