feat: Add customize templates button to edit forms

2026-02-17 05:10:31 +00:00 · 2024-10-13 21:14:18 +02:00
parent 5b5ab9fe1e
commit 2c735d7edf
9 changed files with 176 additions and 42 deletions
--- a/packages/webapp/src/components/PageForm/PageForm.tsx
+++ b/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);

--- a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesSelectFields.tsx
+++ b/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)`
-  position: relative;
-  padding-right: 26px;
+export const BrandingThemeSelectButton = (props: ButtonProps) => {
+  return (
+    <Button
+      text={props?.text || 'Brand Theme'}
+      rightIcon={<Icon icon="arrow-drop-up-16" iconSize={20} />}
+      minimal
+      {...props}
+    />
+  );
+};

-  &::after {
-    content: '';
-    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>) => {
+export const convertBrandingTemplatesToOptions = (
+  brandingTemplates: Array<any>,
+) => {
  return brandingTemplates?.map(
-    (template) =>
-      ({ text: template.template_name, value: template.id } || []),
-  )
-}
+    (template) => ({ text: template.template_name, value: template.id } || []),
+  );
+};
--- a/packages/webapp/src/containers/Preferences/PaymentMethods/StripePaymentMethod.tsx
+++ b/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>
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.tsx
+++ b/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>
  );
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.tsx
+++ b/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>
  );
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
+++ b/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>
  );
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFloatingActions.tsx
+++ b/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>
  );
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.tsx
+++ b/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>
  );
--- a/packages/webapp/src/icons/More.tsx
+++ b/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={size - size / 8} cy={size / 2.00625} r={size / 8} />
-      <circle cx={size / 2} cy={size / 2.00625} r={size / 8} />
+      <circle cx="2" cy="8.03" r="2" />
+      <circle cx="14" cy="8.03" r="2" />
+      <circle cx="8" cy="8.03" r="2" />
    </g>
  </svg>
 );