feat: Add customize templates button to edit forms

packages/webapp/src/components/PageForm/PageForm.tsx

@@ -50,7 +50,7 @@ PageFormFooter.displayName = 'PageFormFooter';
 const footerActionsStyle = `
   width: 100%;
   background: #fff;
-  padding: 14px 18px;
+  padding: 14px 20px;
   border-top: 1px solid rgb(210, 221, 226);
   box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.05);
 

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

@@ -1,6 +1,6 @@
-import { Button } from '@blueprintjs/core';
+import { Button, ButtonProps } from '@blueprintjs/core';
 import styled from 'styled-components';
-import { FFormGroup } from '@/components';
+import { FFormGroup, Icon } from '@/components';
 
 export const BrandingThemeFormGroup = styled(FFormGroup)`
   margin-bottom: 0;
@@ -14,33 +14,21 @@ export const BrandingThemeFormGroup = styled(FFormGroup)`
   }
 `;
 
-export const BrandingThemeSelectButton = styled(Button)`
+export const BrandingThemeSelectButton = (props: ButtonProps) => {
-  position: relative;
+  return (
-  padding-right: 26px;
+    <Button
+      text={props?.text || 'Brand Theme'}
+      rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+      minimal
+      {...props}
+    />
+  );
+};
 
-  &::after {
+export const convertBrandingTemplatesToOptions = (
-    content: '';
+  brandingTemplates: Array<any>,
-    display: inline-block;
+) => {
-    width: 0;
-    height: 0;
-
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-    border-top: 5px solid #98a1ae;
-
-    position: absolute;
-    right: -2px;
-    top: 50%;
-    margin-top: -2px;
-    margin-right: 12px;
-    border-radius: 1px;
-  }
-`;
-
-
-export const convertBrandingTemplatesToOptions = (brandingTemplates: Array<any>) => {
   return brandingTemplates?.map(
-    (template) =>
+    (template) => ({ text: template.template_name, value: template.id } || []),
-      ({ text: template.template_name, value: template.id } || []),
+  );
-  )
+};
-}

packages/webapp/src/containers/Preferences/PaymentMethods/StripePaymentMethod.tsx

@@ -110,7 +110,7 @@ export function StripePaymentMethod() {
                 </Menu>
               }
             >
-              <Button small icon={<MoreIcon size={16} />} />
+              <Button small icon={<MoreIcon height={10} width={10} />} />
             </Popover>
           )}
         </Group>

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.tsx

@@ -26,12 +26,16 @@ import {
   BrandingThemeSelectButton,
 } from '@/containers/BrandingTemplates/BrandingTemplatesSelectFields';
 import { useCreditNoteFormBrandingTemplatesOptions } from './utils';
+import { MoreIcon } from '@/icons/More';
+import { useDrawerActions } from '@/hooks/state';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Credit note floating actions.
  */
 export default function CreditNoteFloatingActions() {
   const history = useHistory();
+  const { openDrawer } = useDrawerActions();
 
   // Formik context.
   const { resetForm, submitForm, isSubmitting } = useFormikContext();
@@ -84,6 +88,11 @@ export default function CreditNoteFloatingActions() {
     resetForm();
   };
 
+  // Handles the credit note customize button click.
+  const handleCustomizeBtnClick = () => {
+    openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'CreditNote' });
+  };
+
   const brandingTemplatesOptions = useCreditNoteFormBrandingTemplatesOptions();
 
   return (
@@ -202,7 +211,7 @@ export default function CreditNoteFloatingActions() {
         />
       </Group>
 
-      <Group>
+      <Group spacing={0}>
         {/* ----------- Branding Template Select ----------- */}
         <BrandingThemeFormGroup
           name={'pdf_template_id'}
@@ -221,6 +230,26 @@ export default function CreditNoteFloatingActions() {
             popoverProps={{ minimal: true }}
           />
         </BrandingThemeFormGroup>
+
+        {/* ----------- Setting Select ----------- */}
+        <Popover
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.TOP_RIGHT}
+          modifiers={{
+            offset: { offset: '0, 4' },
+          }}
+          content={
+            <Menu>
+              <MenuItem
+                text={'Customize Templates'}
+                onClick={handleCustomizeBtnClick}
+              />
+            </Menu>
+          }
+        >
+          <Button minimal icon={<MoreIcon height={'14px'} width={'14px'} />} />
+        </Popover>
       </Group>
     </PageForm.FooterActions>
   );

packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.tsx

@@ -15,17 +15,21 @@ import { useHistory } from 'react-router-dom';
 import { useFormikContext } from 'formik';
 import { useEstimateFormContext } from './EstimateFormProvider';
 import { useEstimateFormBrandingTemplatesOptions } from './utils';
+import { useDrawerActions } from '@/hooks/state';
 import {
   BrandingThemeFormGroup,
   BrandingThemeSelectButton,
 } from '@/containers/BrandingTemplates/BrandingTemplatesSelectFields';
 import { PageForm } from '@/components/PageForm';
+import { MoreIcon } from '@/icons/More';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Estimate floating actions bar.
  */
 export default function EstimateFloatingActions() {
   const history = useHistory();
+  const { openDrawer } = useDrawerActions();
   const { resetForm, submitForm, isSubmitting } = useFormikContext();
 
   // Estimate form context.
@@ -77,6 +81,11 @@ export default function EstimateFloatingActions() {
     resetForm();
   };
 
+  // Handles the invoice customize button click.
+  const handleCustomizeBtnClick = () => {
+    openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'SaleEstimate' });
+  };
+
   const brandingTemplatesOptions = useEstimateFormBrandingTemplatesOptions();
 
   return (
@@ -199,7 +208,7 @@ export default function EstimateFloatingActions() {
         />
       </Group>
 
-      <Group>
+      <Group spacing={0}>
         {/* ----------- Branding Template Select ----------- */}
         <BrandingThemeFormGroup
           name={'pdf_template_id'}
@@ -218,6 +227,26 @@ export default function EstimateFloatingActions() {
             popoverProps={{ minimal: true }}
           />
         </BrandingThemeFormGroup>
+
+        {/* ----------- More Select ----------- */}
+        <Popover
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.TOP_RIGHT}
+          modifiers={{
+            offset: { offset: '0, 4' },
+          }}
+          content={
+            <Menu>
+              <MenuItem
+                text={'Customize Templates'}
+                onClick={handleCustomizeBtnClick}
+              />
+            </Menu>
+          }
+        >
+          <Button minimal icon={<MoreIcon height={'14px'} width={'14px'} />} />
+        </Popover>
       </Group>
     </PageForm.FooterActions>
   );

packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx

@@ -15,17 +15,21 @@ import { useFormikContext } from 'formik';
 import { If, Icon, FormattedMessage as T, Group, FSelect } from '@/components';
 import { useInvoiceFormContext } from './InvoiceFormProvider';
 import { useInvoiceFormBrandingTemplatesOptions } from './utils';
+import { useDrawerActions } from '@/hooks/state';
 import {
   BrandingThemeFormGroup,
   BrandingThemeSelectButton,
 } from '@/containers/BrandingTemplates/BrandingTemplatesSelectFields';
 import { PageForm } from '@/components/PageForm';
+import { MoreIcon } from '@/icons/More';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Invoice floating actions bar.
  */
 export default function InvoiceFloatingActions() {
   const history = useHistory();
+  const { openDrawer } = useDrawerActions();
 
   // Formik context.
   const { resetForm, submitForm, isSubmitting } = useFormikContext();
@@ -79,6 +83,11 @@ export default function InvoiceFloatingActions() {
     resetForm();
   };
 
+  // Handles the invoice customize button click.
+  const handleCustomizeBtnClick = () => {
+    openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'SaleInvoice' });
+  };
+
   const brandingTemplatesOptions = useInvoiceFormBrandingTemplatesOptions();
 
   return (
@@ -200,7 +209,7 @@ export default function InvoiceFloatingActions() {
         />
       </Group>
 
-      <Group spacing={10}>
+      <Group spacing={0}>
         {/* ----------- Branding Template Select ----------- */}
         <BrandingThemeFormGroup
           name={'pdf_template_id'}
@@ -213,12 +222,31 @@ export default function InvoiceFloatingActions() {
             name={'pdf_template_id'}
             items={brandingTemplatesOptions}
             input={({ activeItem, text, label, value }) => (
-              <BrandingThemeSelectButton text={text || 'Brand Theme'} minimal />
+              <BrandingThemeSelectButton text={text || 'Brand Theme'} />
             )}
             filterable={false}
             popoverProps={{ minimal: true }}
           />
         </BrandingThemeFormGroup>
+
+        <Popover
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.TOP_RIGHT}
+          modifiers={{
+            offset: { offset: '0, 4' },
+          }}
+          content={
+            <Menu>
+              <MenuItem
+                text={'Customize Templates'}
+                onClick={handleCustomizeBtnClick}
+              />
+            </Menu>
+          }
+        >
+          <Button minimal icon={<MoreIcon height={'14px'} width={'14px'} />} />
+        </Popover>
       </Group>
     </PageForm.FooterActions>
   );

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFloatingActions.tsx

@@ -11,8 +11,9 @@ import {
   MenuItem,
 } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
-import { FSelect, Group, Icon, FormattedMessage as T } from '@/components';
 import { useFormikContext } from 'formik';
+import { FSelect, Group, Icon, FormattedMessage as T } from '@/components';
+import { useDrawerActions } from '@/hooks/state';
 import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
 import {
   BrandingThemeFormGroup,
@@ -20,6 +21,8 @@ import {
 } from '@/containers/BrandingTemplates/BrandingTemplatesSelectFields';
 import { usePaymentReceivedFormBrandingTemplatesOptions } from './utils';
 import { PageForm } from '@/components/PageForm';
+import { MoreIcon } from '@/icons/More';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Payment receive floating actions bar.
@@ -34,6 +37,8 @@ export default function PaymentReceiveFormFloatingActions() {
   // History context.
   const history = useHistory();
 
+  const { openDrawer } = useDrawerActions();
+
   // Handle submit button click.
   const handleSubmitBtnClick = (event) => {
     setSubmitPayload({ redirect: true });
@@ -57,6 +62,11 @@ export default function PaymentReceiveFormFloatingActions() {
     submitForm();
   };
 
+  // Handles the invoice customize button click.
+  const handleCustomizeBtnClick = () => {
+    openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'PaymentReceive' });
+  };
+
   const brandingTemplatesOpts =
     usePaymentReceivedFormBrandingTemplatesOptions();
 
@@ -115,7 +125,7 @@ export default function PaymentReceiveFormFloatingActions() {
         />
       </Group>
 
-      <Group>
+      <Group spacing={0}>
         {/* ----------- Branding Template Select ----------- */}
         <BrandingThemeFormGroup
           name={'pdf_template_id'}
@@ -134,6 +144,26 @@ export default function PaymentReceiveFormFloatingActions() {
             popoverProps={{ minimal: true }}
           />
         </BrandingThemeFormGroup>
+
+        {/* ----------- Setting Select ----------- */}
+        <Popover
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.TOP_RIGHT}
+          modifiers={{
+            offset: { offset: '0, 4' },
+          }}
+          content={
+            <Menu>
+              <MenuItem
+                text={'Customize Templates'}
+                onClick={handleCustomizeBtnClick}
+              />
+            </Menu>
+          }
+        >
+          <Button minimal icon={<MoreIcon height={'14px'} width={'14px'} />} />
+        </Popover>
       </Group>
     </PageForm.FooterActions>
   );

packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.tsx

@@ -16,11 +16,14 @@ import { useHistory } from 'react-router-dom';
 import { If, Icon } from '@/components';
 import { useReceiptFormContext } from './ReceiptFormProvider';
 import { useReceiptFormBrandingTemplatesOptions } from './utils';
+import { useDrawerActions } from '@/hooks/state';
 import {
   BrandingThemeFormGroup,
   BrandingThemeSelectButton,
 } from '@/containers/BrandingTemplates/BrandingTemplatesSelectFields';
 import { PageForm } from '@/components/PageForm';
+import { MoreIcon } from '@/icons/More';
+import { DRAWERS } from '@/constants/drawers';
 
 /**
  * Receipt floating actions bar.
@@ -29,6 +32,8 @@ export default function ReceiptFormFloatingActions() {
   // History context.
   const history = useHistory();
 
+  const { openDrawer } = useDrawerActions();
+
   // Formik context.
   const { resetForm, submitForm, isSubmitting } = useFormikContext();
 
@@ -80,6 +85,11 @@ export default function ReceiptFormFloatingActions() {
     resetForm();
   };
 
+  // Handles the invoice customize button click.
+  const handleCustomizeBtnClick = () => {
+    openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'SaleReceipt' });
+  };
+
   const brandingTemplatesOptions = useReceiptFormBrandingTemplatesOptions();
 
   return (
@@ -199,7 +209,7 @@ export default function ReceiptFormFloatingActions() {
         />
       </Group>
 
-      <Group spacing={20}>
+      <Group spacing={0}>
         {/* ----------- Branding Template Select ----------- */}
         <BrandingThemeFormGroup
           name={'pdf_template_id'}
@@ -218,6 +228,26 @@ export default function ReceiptFormFloatingActions() {
             popoverProps={{ minimal: true }}
           />
         </BrandingThemeFormGroup>
+
+        {/* ----------- Setting Select ----------- */}
+        <Popover
+          minimal={true}
+          interactionKind={PopoverInteractionKind.CLICK}
+          position={Position.TOP_RIGHT}
+          modifiers={{
+            offset: { offset: '0, 4' },
+          }}
+          content={
+            <Menu>
+              <MenuItem
+                text={'Customize Templates'}
+                onClick={handleCustomizeBtnClick}
+              />
+            </Menu>
+          }
+        >
+          <Button minimal icon={<MoreIcon height={'14px'} width={'14px'} />} />
+        </Popover>
       </Group>
     </PageForm.FooterActions>
   );

packages/webapp/src/icons/More.tsx

@@ -18,9 +18,9 @@ export const MoreIcon: React.FC<MoreIconProps> = ({ size = 16, ...props }) => (
     {...props}
   >
     <g id="more_3_">
-      <circle cx={size / 8} cy={size / 2.00625} r={size / 8} />
+      <circle cx="2" cy="8.03" r="2" />
-      <circle cx={size - size / 8} cy={size / 2.00625} r={size / 8} />
+      <circle cx="14" cy="8.03" r="2" />
-      <circle cx={size / 2} cy={size / 2.00625} r={size / 8} />
+      <circle cx="8" cy="8.03" r="2" />
     </g>
   </svg>
 );