feat: templates customize

2026-02-18 13:50:31 +00:00 · 2024-09-12 17:49:00 +02:00
parent 12226d469a
commit 411ac55986
17 changed files with 293 additions and 173 deletions
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx
@@ -5,14 +5,26 @@ import { CreditNoteCustomizeContentFields } from './CreditNoteCutomizeContentFie
 import { CreditNotePaperTemplate } from './CreditNotePaperTemplate';
 import { CreditNoteCustomizeValues } from './types';
 import { initialValues } from './constants';
+import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTemplateForm';
+import { useDrawerActions } from '@/hooks/state';
+import { useDrawerContext } from '@/components/Drawer/DrawerProvider';

 export function CreditNoteCustomizeContent() {
-  const handleFormSubmit = (values: CreditNoteCustomizeValues) => {};
+  const { payload, name } = useDrawerContext();
+  const { closeDrawer } = useDrawerActions();
+
+  const templateId = payload?.templateId || null;
+
+  const handleSuccess = () => {
+    closeDrawer(name);
+  };

  return (
-    <ElementCustomize<CreditNoteCustomizeValues>
-      initialValues={initialValues}
-      onSubmit={handleFormSubmit}
+    <BrandingTemplateForm<CreditNoteCustomizeValues>
+      resource={'CreditNote'}
+      templateId={templateId}
+      defaultValues={initialValues}
+      onSuccess={handleSuccess}
    >
      <ElementCustomize.PaperTemplate>
        <CreditNotePaperTemplateFormConnected />
@@ -29,7 +41,7 @@ export function CreditNoteCustomizeContent() {
      <ElementCustomize.FieldsTab id={'totals'} label={'Totals'}>
        asdfasdfdsaf #3
      </ElementCustomize.FieldsTab>
-    </ElementCustomize>
+    </BrandingTemplateForm>
  );
 }

--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawer.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawer.tsx
@@ -4,8 +4,8 @@ import * as R from 'ramda';
 import { Drawer, DrawerSuspense } from '@/components';
 import withDrawers from '@/containers/Drawer/withDrawers';

-const CreditNoteCustomizeContent = React.lazy(
-  () => import('./CreditNoteCustomizeContent'),
+const CreditNoteCustomizeDrawerBody = React.lazy(
+  () => import('./CreditNoteCustomizeDrawerBody'),
 );

 /**
@@ -16,12 +16,12 @@ function CreditNoteCustomizeDrawerRoot({
  name,
  // #withDrawer
  isOpen,
-  payload: {},
+  payload,
 }) {
  return (
-    <Drawer isOpen={isOpen} name={name} size={'100%'}>
+    <Drawer isOpen={isOpen} name={name} payload={payload} size={'100%'}>
      <DrawerSuspense>
-        <CreditNoteCustomizeContent />
+        <CreditNoteCustomizeDrawerBody />
      </DrawerSuspense>
    </Drawer>
  );
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawerBody.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawerBody.tsx
@@ -6,7 +6,7 @@ import { useDrawerContext } from '@/components/Drawer/DrawerProvider';

 export default function CreditNoteCustomizeDrawerBody() {
  const { payload } = useDrawerContext();
-  const templateId = payload.templateId;
+  const templateId = payload?.templateId || null;

  return (
    <Box className={Classes.DRAWER_BODY}>
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx
@@ -1,9 +1,19 @@
 // @ts-nocheck
 import { Classes } from '@blueprintjs/core';
-import { FFormGroup, FSwitch, Stack } from '@/components';
+import {
+  FFormGroup,
+  FieldRequiredHint,
+  FInputGroup,
+  FSwitch,
+  Stack,
+} from '@/components';
 import { FColorInput } from '@/components/Forms/FColorInput';
+import { Overlay } from '../../Invoices/InvoiceCustomize/Overlay';
+import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils';

 export function CreditNoteCustomizeGeneralField() {
+  const isTemplateNameFilled = useIsTemplateNamedFilled();
+
  return (
    <Stack style={{ padding: 20, flex: '1 1 auto' }}>
      <Stack spacing={0}>
@@ -14,45 +24,57 @@ export function CreditNoteCustomizeGeneralField() {
        </p>
      </Stack>

-      <Stack spacing={0}>
-        <FFormGroup
-          name={'primaryColor'}
-          label={'Primary Color'}
-          style={{ justifyContent: 'space-between' }}
-          inline
-          fastField
-        >
-          <FColorInput
+      <FFormGroup
+        name={'templateName'}
+        label={'Template Name'}
+        labelInfo={<FieldRequiredHint />}
+        fastField
+        style={{ marginBottom: 10 }}
+      >
+        <FInputGroup name={'templateName'} fastField />
+      </FFormGroup>
+
+      <Overlay visible={!isTemplateNameFilled}>
+        <Stack spacing={0}>
+          <FFormGroup
            name={'primaryColor'}
-            inputProps={{ style: { maxWidth: 120 } }}
+            label={'Primary Color'}
+            style={{ justifyContent: 'space-between' }}
+            inline
            fastField
-          />
-        </FFormGroup>
+          >
+            <FColorInput
+              name={'primaryColor'}
+              inputProps={{ style: { maxWidth: 120 } }}
+              fastField
+            />
+          </FFormGroup>

-        <FFormGroup
-          name={'secondaryColor'}
-          label={'Secondary Color'}
-          style={{ justifyContent: 'space-between' }}
-          inline
-          fastField
-        >
-          <FColorInput
+          <FFormGroup
            name={'secondaryColor'}
-            inputProps={{ style: { maxWidth: 120 } }}
+            label={'Secondary Color'}
+            style={{ justifyContent: 'space-between' }}
+            inline
            fastField
-          />
-        </FFormGroup>
+          >
+            <FColorInput
+              name={'secondaryColor'}
+              inputProps={{ style: { maxWidth: 120 } }}
+              fastField
+            />
+          </FFormGroup>

-        <FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
-          <FSwitch
-            name={'showCompanyLogo'}
-            label={'Display company logo in the paper'}
-            style={{ fontSize: 14 }}
-            large
-            fastField
-          />
-        </FFormGroup>
-      </Stack>
+          <FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
+            <FSwitch
+              name={'showCompanyLogo'}
+              label={'Display company logo in the paper'}
+              style={{ fontSize: 14 }}
+              large
+              fastField
+            />
+          </FFormGroup>
+        </Stack>
+      </Overlay>
    </Stack>
  );
 }
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts
@@ -1,4 +1,6 @@
 export const initialValues = {
+  templateName: '',
+
  // Colors
  primaryColor: '#2c3dd8',
  secondaryColor: '#2c3dd8',
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts
@@ -1,4 +1,6 @@
-export interface CreditNoteCustomizeValues {
+import { BrandingTemplateValues } from '@/containers/BrandingTemplates/types';
+
+export interface CreditNoteCustomizeValues extends BrandingTemplateValues {
  // Colors
  primaryColor?: string;
  secondaryColor?: string;
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawer.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawer.tsx
@@ -17,10 +17,10 @@ function EstimateCustomizeDrawerRoot({

  // #withDrawer
  isOpen,
-  payload: {},
+  payload,
 }) {
  return (
-    <Drawer isOpen={isOpen} name={name} size={'100%'}>
+    <Drawer isOpen={isOpen} name={name} payload={payload} size={'100%'}>
      <DrawerSuspense>
        <EstimateCustomizeDrawerBody />
      </DrawerSuspense>
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx
@@ -9,9 +9,12 @@ import {
  Stack,
 } from '@/components';
 import { FColorInput } from '@/components/Forms/FColorInput';
-// import styles from './InvoiceCustomizeFields.module.scss';
+import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils';
+import { Overlay } from '../../Invoices/InvoiceCustomize/Overlay';

 export function EstimateCustomizeGeneralField() {
+  const isTemplateNameFilled = useIsTemplateNamedFilled();
+
  return (
    <Stack style={{ padding: 20, flex: '1 1 auto' }}>
      <Stack spacing={0}>
@@ -32,45 +35,47 @@ export function EstimateCustomizeGeneralField() {
        <FInputGroup name={'templateName'} fastField />
      </FFormGroup>

-      <Stack spacing={0}>
-        <FFormGroup
-          name={'primaryColor'}
-          label={'Primary Color'}
-          style={{ justifyContent: 'space-between' }}
-          inline
-          fastField
-        >
-          <FColorInput
+      <Overlay visible={!isTemplateNameFilled}>
+        <Stack spacing={0}>
+          <FFormGroup
            name={'primaryColor'}
-            inputProps={{ style: { maxWidth: 120 } }}
+            label={'Primary Color'}
+            style={{ justifyContent: 'space-between' }}
+            inline
            fastField
-          />
-        </FFormGroup>
+          >
+            <FColorInput
+              name={'primaryColor'}
+              inputProps={{ style: { maxWidth: 120 } }}
+              fastField
+            />
+          </FFormGroup>

-        <FFormGroup
-          name={'secondaryColor'}
-          label={'Secondary Color'}
-          style={{ justifyContent: 'space-between' }}
-          inline
-          fastField
-        >
-          <FColorInput
+          <FFormGroup
            name={'secondaryColor'}
-            inputProps={{ style: { maxWidth: 120 } }}
+            label={'Secondary Color'}
+            style={{ justifyContent: 'space-between' }}
+            inline
            fastField
-          />
-        </FFormGroup>
+          >
+            <FColorInput
+              name={'secondaryColor'}
+              inputProps={{ style: { maxWidth: 120 } }}
+              fastField
+            />
+          </FFormGroup>

-        <FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
-          <FSwitch
-            name={'showCompanyLogo'}
-            label={'Display company logo in the paper'}
-            style={{ fontSize: 14 }}
-            large
-            fastField
-          />
-        </FFormGroup>
-      </Stack>
+          <FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
+            <FSwitch
+              name={'showCompanyLogo'}
+              label={'Display company logo in the paper'}
+              style={{ fontSize: 14 }}
+              large
+              fastField
+            />
+          </FFormGroup>
+        </Stack>
+      </Overlay>
    </Stack>
  );
 }
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx
@@ -11,7 +11,7 @@ import {
 import { FColorInput } from '@/components/Forms/FColorInput';
 import { CreditCardIcon } from '@/icons/CreditCardIcon';
 import { Overlay } from './Overlay';
-import { useIsTemplateNamedFilled } from './utils';
+import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils';

 export function InvoiceCustomizeGeneralField() {
  const isTemplateNameFilled = useIsTemplateNamedFilled();
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/utils.ts
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/utils.ts
@@ -28,12 +28,6 @@ export const transformToNewRequest = (
  };
 };

-export const useIsTemplateNamedFilled = () => {
-  const { values } = useFormikContext<InvoiceCustomizeValues>();
-
-  return values.templateName && values.templateName?.length >= 4;
-};
-
 export const useInvoiceCustomizeInitialValues = (): InvoiceCustomizeValues => {
  const { pdfTemplate } = useBrandingTemplateBoot();

--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx
@@ -1,10 +1,19 @@
 // @ts-nocheck
 import { Classes } from '@blueprintjs/core';
-import { FFormGroup, FSwitch, Stack } from '@/components';
+import {
+  FFormGroup,
+  FieldRequiredHint,
+  FInputGroup,
+  FSwitch,
+  Stack,
+} from '@/components';
 import { FColorInput } from '@/components/Forms/FColorInput';
-// import styles from './InvoiceCustomizeFields.module.scss';
+import { Overlay } from '../../Invoices/InvoiceCustomize/Overlay';
+import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils';

 export function PaymentReceivedCustomizeGeneralField() {
+  const isTemplateNameFilled = useIsTemplateNamedFilled();
+
  return (
    <Stack style={{ padding: 20, flex: '1 1 auto' }}>
      <Stack spacing={0}>
@@ -15,45 +24,57 @@ export function PaymentReceivedCustomizeGeneralField() {
        </p>
      </Stack>

-      <Stack spacing={0}>
-        <FFormGroup
-          name={'primaryColor'}
-          label={'Primary Color'}
-          style={{ justifyContent: 'space-between' }}
-          inline
-          fastField
-        >
-          <FColorInput
+      <FFormGroup
+        name={'templateName'}
+        label={'Template Name'}
+        labelInfo={<FieldRequiredHint />}
+        style={{ marginBottom: 10 }}
+        fastField
+      >
+        <FInputGroup name={'templateName'} fastField />
+      </FFormGroup>
+
+      <Overlay visible={!isTemplateNameFilled}>
+        <Stack spacing={0}>
+          <FFormGroup
            name={'primaryColor'}
-            inputProps={{ style: { maxWidth: 120 } }}
+            label={'Primary Color'}
+            style={{ justifyContent: 'space-between' }}
+            inline
            fastField
-          />
-        </FFormGroup>
+          >
+            <FColorInput
+              name={'primaryColor'}
+              inputProps={{ style: { maxWidth: 120 } }}
+              fastField
+            />
+          </FFormGroup>

-        <FFormGroup
-          name={'secondaryColor'}
-          label={'Secondary Color'}
-          style={{ justifyContent: 'space-between' }}
-          inline
-          fastField
-        >
-          <FColorInput
+          <FFormGroup
            name={'secondaryColor'}
-            inputProps={{ style: { maxWidth: 120 } }}
+            label={'Secondary Color'}
+            style={{ justifyContent: 'space-between' }}
+            inline
            fastField
-          />
-        </FFormGroup>
+          >
+            <FColorInput
+              name={'secondaryColor'}
+              inputProps={{ style: { maxWidth: 120 } }}
+              fastField
+            />
+          </FFormGroup>

-        <FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
-          <FSwitch
-            name={'showCompanyLogo'}
-            label={'Display company logo in the paper'}
-            style={{ fontSize: 14 }}
-            large
-            fastField
-          />
-        </FFormGroup>
-      </Stack>
+          <FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
+            <FSwitch
+              name={'showCompanyLogo'}
+              label={'Display company logo in the paper'}
+              style={{ fontSize: 14 }}
+              large
+              fastField
+            />
+          </FFormGroup>
+        </Stack>
+      </Overlay>
    </Stack>
  );
 }
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsGeneral.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsGeneral.tsx
@@ -1,9 +1,19 @@
 // @ts-nocheck
 import { Classes } from '@blueprintjs/core';
-import { FFormGroup, FSwitch, Stack } from '@/components';
+import {
+  FFormGroup,
+  FieldRequiredHint,
+  FInputGroup,
+  FSwitch,
+  Stack,
+} from '@/components';
 import { FColorInput } from '@/components/Forms/FColorInput';
+import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils';
+import { Overlay } from '../../Invoices/InvoiceCustomize/Overlay';

 export function ReceiptCustomizeGeneralField() {
+  const isTemplateNameFilled = useIsTemplateNamedFilled();
+
  return (
    <Stack style={{ padding: 20, flex: '1 1 auto' }}>
      <Stack spacing={0}>
@@ -14,45 +24,57 @@ export function ReceiptCustomizeGeneralField() {
        </p>
      </Stack>

-      <Stack spacing={0}>
-        <FFormGroup
-          name={'primaryColor'}
-          label={'Primary Color'}
-          style={{ justifyContent: 'space-between' }}
-          inline
-          fastField
-        >
-          <FColorInput
+      <FFormGroup
+        name={'templateName'}
+        label={'Template Name'}
+        labelInfo={<FieldRequiredHint />}
+        fastField
+        style={{ marginBottom: 10 }}
+      >
+        <FInputGroup name={'templateName'} fastField />
+      </FFormGroup>
+
+      <Overlay visible={!isTemplateNameFilled}>
+        <Stack spacing={0}>
+          <FFormGroup
            name={'primaryColor'}
-            inputProps={{ style: { maxWidth: 120 } }}
+            label={'Primary Color'}
+            style={{ justifyContent: 'space-between' }}
+            inline
            fastField
-          />
-        </FFormGroup>
+          >
+            <FColorInput
+              name={'primaryColor'}
+              inputProps={{ style: { maxWidth: 120 } }}
+              fastField
+            />
+          </FFormGroup>

-        <FFormGroup
-          name={'secondaryColor'}
-          label={'Secondary Color'}
-          style={{ justifyContent: 'space-between' }}
-          inline
-          fastField
-        >
-          <FColorInput
+          <FFormGroup
            name={'secondaryColor'}
-            inputProps={{ style: { maxWidth: 120 } }}
+            label={'Secondary Color'}
+            style={{ justifyContent: 'space-between' }}
+            inline
            fastField
-          />
-        </FFormGroup>
+          >
+            <FColorInput
+              name={'secondaryColor'}
+              inputProps={{ style: { maxWidth: 120 } }}
+              fastField
+            />
+          </FFormGroup>

-        <FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
-          <FSwitch
-            name={'showCompanyLogo'}
-            label={'Display company logo in the paper'}
-            style={{ fontSize: 14 }}
-            large
-            fastField
-          />
-        </FFormGroup>
-      </Stack>
+          <FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
+            <FSwitch
+              name={'showCompanyLogo'}
+              label={'Display company logo in the paper'}
+              style={{ fontSize: 14 }}
+              large
+              fastField
+            />
+          </FFormGroup>
+        </Stack>
+      </Overlay>
    </Stack>
  );
 }