fix: Disable tabs of the pdf customization if the first field not filled up

2026-02-17 13:20:31 +00:00 · 2024-10-10 16:41:21 +02:00
parent cf78255220
commit 863c7693fa
8 changed files with 206 additions and 57 deletions
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx
@@ -1,14 +1,21 @@
 import { useFormikContext } from 'formik';
-import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize';
+import {
+  ElementCustomize,
+  ElementCustomizeContent,
+} from '../../../ElementCustomize/ElementCustomize';
 import { CreditNoteCustomizeGeneralField } from './CreditNoteCustomizeGeneralFields';
 import { CreditNoteCustomizeContentFields } from './CreditNoteCutomizeContentFields';
-import { CreditNotePaperTemplate, CreditNotePaperTemplateProps } from './CreditNotePaperTemplate';
+import {
+  CreditNotePaperTemplate,
+  CreditNotePaperTemplateProps,
+} from './CreditNotePaperTemplate';
 import { CreditNoteBrandingState, CreditNoteCustomizeValues } from './types';
 import { initialValues } from './constants';
 import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTemplateForm';
 import { useDrawerActions } from '@/hooks/state';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { useElementCustomizeContext } from '@/containers/ElementCustomize/ElementCustomizeProvider';
+import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils';

 export function CreditNoteCustomizeContent() {
  const { payload, name } = useDrawerContext();
@@ -27,6 +34,16 @@ export function CreditNoteCustomizeContent() {
      defaultValues={initialValues}
      onSuccess={handleSuccess}
    >
+      <CreditNoteCustomizeFormContent />
+    </BrandingTemplateForm>
+  );
+}
+
+function CreditNoteCustomizeFormContent() {
+  const isTemplateNameFilled = useIsTemplateNamedFilled();
+
+  return (
+    <ElementCustomizeContent>
      <ElementCustomize.PaperTemplate>
        <CreditNotePaperTemplateFormConnected />
      </ElementCustomize.PaperTemplate>
@@ -35,10 +52,14 @@ export function CreditNoteCustomizeContent() {
        <CreditNoteCustomizeGeneralField />
      </ElementCustomize.FieldsTab>

-      <ElementCustomize.FieldsTab id={'content'} label={'Content'}>
+      <ElementCustomize.FieldsTab
+        id={'content'}
+        label={'Content'}
+        tabProps={{ disabled: !isTemplateNameFilled }}
+      >
        <CreditNoteCustomizeContentFields />
      </ElementCustomize.FieldsTab>
-    </BrandingTemplateForm>
+    </ElementCustomizeContent>
  );
 }

@@ -46,7 +67,10 @@ function CreditNotePaperTemplateFormConnected() {
  const { values } = useFormikContext<CreditNoteCustomizeValues>();
  const { brandingState } = useElementCustomizeContext();

-  const mergedProps: CreditNotePaperTemplateProps = { ...brandingState, ...values };
+  const mergedProps: CreditNotePaperTemplateProps = {
+    ...brandingState,
+    ...values,
+  };

  return <CreditNotePaperTemplate {...mergedProps} />;
 }
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx
@@ -1,14 +1,21 @@
 import { useFormikContext } from 'formik';
-import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize';
+import {
+  ElementCustomize,
+  ElementCustomizeContent,
+} from '../../../ElementCustomize/ElementCustomize';
 import { EstimateCustomizeGeneralField } from './EstimateCustomizeFieldsGeneral';
 import { EstimateCustomizeContentFields } from './EstimateCustomizeFieldsContent';
-import { EstimatePaperTemplate, EstimatePaperTemplateProps } from './EstimatePaperTemplate';
+import {
+  EstimatePaperTemplate,
+  EstimatePaperTemplateProps,
+} from './EstimatePaperTemplate';
 import { EstimateBrandingState, EstimateCustomizeValues } from './types';
 import { initialValues } from './constants';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { useDrawerActions } from '@/hooks/state';
 import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTemplateForm';
 import { useElementCustomizeContext } from '@/containers/ElementCustomize/ElementCustomizeProvider';
+import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils';

 export function EstimateCustomizeContent() {
  const { payload, name } = useDrawerContext();
@@ -26,6 +33,16 @@ export function EstimateCustomizeContent() {
      onSuccess={handleSuccess}
      resource={'SaleEstimate'}
    >
+      <EstimateCustomizeFormContent />
+    </BrandingTemplateForm>
+  );
+}
+
+function EstimateCustomizeFormContent() {
+  const isTemplateNameFilled = useIsTemplateNamedFilled();
+
+  return (
+    <ElementCustomizeContent>
      <ElementCustomize.PaperTemplate>
        <EstimatePaperTemplateFormConnected />
      </ElementCustomize.PaperTemplate>
@@ -34,10 +51,14 @@ export function EstimateCustomizeContent() {
        <EstimateCustomizeGeneralField />
      </ElementCustomize.FieldsTab>

-      <ElementCustomize.FieldsTab id={'content'} label={'Content'}>
+      <ElementCustomize.FieldsTab
+        id={'content'}
+        label={'Content'}
+        tabProps={{ disabled: !isTemplateNameFilled }}
+      >
        <EstimateCustomizeContentFields />
      </ElementCustomize.FieldsTab>
-    </BrandingTemplateForm>
+    </ElementCustomizeContent>
  );
 }

@@ -47,9 +68,12 @@ export function EstimateCustomizeContent() {
 */
 function EstimatePaperTemplateFormConnected() {
  const { values } = useFormikContext<EstimateCustomizeValues>();
-  const { brandingState } = useElementCustomizeContext()
+  const { brandingState } = useElementCustomizeContext();

-  const mergedProps: EstimatePaperTemplateProps = { ...brandingState, ...values, }
+  const mergedProps: EstimatePaperTemplateProps = {
+    ...brandingState,
+    ...values,
+  };

  return <EstimatePaperTemplate {...mergedProps} />;
 }
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx
@@ -5,7 +5,10 @@ import {
  InvoicePaperTemplate,
  InvoicePaperTemplateProps,
 } from './InvoicePaperTemplate';
-import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize';
+import {
+  ElementCustomize,
+  ElementCustomizeContent,
+} from '../../../ElementCustomize/ElementCustomize';
 import { InvoiceCustomizeGeneralField } from './InvoiceCustomizeGeneralFields';
 import { InvoiceCustomizeContentFields } from './InvoiceCutomizeContentFields';
 import { InvoiceCustomizeFormValues, InvoiceCustomizeState } from './types';
@@ -13,11 +16,13 @@ import { InvoiceCustomizeSchema } from './InvoiceCustomizeForm.schema';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { useDrawerActions } from '@/hooks/state';
 import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTemplateForm';
-import { initialValues } from './constants';
 import { useElementCustomizeContext } from '@/containers/ElementCustomize/ElementCustomizeProvider';
+import { initialValues } from './constants';
+import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils';

 /**
 * Invoice branding template customize.
+ * @return {JSX.Element}
 */
 export function InvoiceCustomizeContent() {
  const { payload, name } = useDrawerContext();
@@ -36,6 +41,20 @@ export function InvoiceCustomizeContent() {
      onSuccess={handleSuccess}
      resource={'SaleInvoice'}
    >
+      <InvoiceCustomizeFormContent />
+    </BrandingTemplateForm>
+  );
+}
+
+/**
+ * Invoice branding template customize preview and fields.
+ * @returns {JSX.Element}
+ */
+function InvoiceCustomizeFormContent() {
+  const isTemplateNameFilled = useIsTemplateNamedFilled();
+
+  return (
+    <ElementCustomizeContent>
      <ElementCustomize.PaperTemplate>
        <InvoicePaperTemplateFormConnected />
      </ElementCustomize.PaperTemplate>
@@ -44,16 +63,20 @@ export function InvoiceCustomizeContent() {
        <InvoiceCustomizeGeneralField />
      </ElementCustomize.FieldsTab>

-      <ElementCustomize.FieldsTab id={'content'} label={'Content'}>
+      <ElementCustomize.FieldsTab
+        id={'content'}
+        label={'Content'}
+        tabProps={{ disabled: !isTemplateNameFilled }}
+      >
        <InvoiceCustomizeContentFields />
      </ElementCustomize.FieldsTab>
-    </BrandingTemplateForm>
+    </ElementCustomizeContent>
  );
 }

 /**
 * Injects the `InvoicePaperTemplate` component props from the form and branding states.
- * @param Component 
+ * @param Component
 * @returns {JSX.Element}
 */
 const withInvoicePreviewTemplateProps = <P extends object>(
@@ -61,13 +84,17 @@ const withInvoicePreviewTemplateProps = <P extends object>(
 ) => {
  return (props: Omit<P, keyof InvoicePaperTemplateProps>) => {
    const { values } = useFormikContext<InvoiceCustomizeFormValues>();
-    const { brandingState, } = useElementCustomizeContext();
+    const { brandingState } = useElementCustomizeContext();

-    const mergedProps: InvoicePaperTemplateProps = { ...brandingState, ...values };
+    const mergedProps: InvoicePaperTemplateProps = {
+      ...brandingState,
+      ...values,
+    };

    return <Component {...(props as P)} {...mergedProps} />;
  };
 };

-export const InvoicePaperTemplateFormConnected =
-  R.compose(withInvoicePreviewTemplateProps)(InvoicePaperTemplate);
+export const InvoicePaperTemplateFormConnected = R.compose(
+  withInvoicePreviewTemplateProps,
+)(InvoicePaperTemplate);
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx
@@ -1,14 +1,24 @@
 import { useFormikContext } from 'formik';
-import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize';
+import {
+  ElementCustomize,
+  ElementCustomizeContent,
+} from '../../../ElementCustomize/ElementCustomize';
 import { PaymentReceivedCustomizeGeneralField } from './PaymentReceivedCustomizeFieldsGeneral';
 import { PaymentReceivedCustomizeContentFields } from './PaymentReceivedCustomizeFieldsContent';
-import { PaymentReceivedCustomizeValues, PaymentReceivedPreviewState } from './types';
-import { PaymentReceivedPaperTemplate, PaymentReceivedPaperTemplateProps } from './PaymentReceivedPaperTemplate';
+import {
+  PaymentReceivedCustomizeValues,
+  PaymentReceivedPreviewState,
+} from './types';
+import {
+  PaymentReceivedPaperTemplate,
+  PaymentReceivedPaperTemplateProps,
+} from './PaymentReceivedPaperTemplate';
 import { initialValues } from './constants';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { useDrawerActions } from '@/hooks/state';
 import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTemplateForm';
 import { useElementCustomizeContext } from '@/containers/ElementCustomize/ElementCustomizeProvider';
+import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils';

 export function PaymentReceivedCustomizeContent() {
  const { payload, name } = useDrawerContext();
@@ -21,12 +31,25 @@ export function PaymentReceivedCustomizeContent() {
  };

  return (
-    <BrandingTemplateForm<PaymentReceivedCustomizeValues, PaymentReceivedPreviewState>
+    <BrandingTemplateForm<
+      PaymentReceivedCustomizeValues,
+      PaymentReceivedPreviewState
+    >
      templateId={templateId}
      defaultValues={initialValues}
      onSuccess={handleSuccess}
      resource={'PaymentReceive'}
    >
+      <PaymentReceivedCustomizeFormContent />
+    </BrandingTemplateForm>
+  );
+}
+
+function PaymentReceivedCustomizeFormContent() {
+  const isTemplateNameFilled = useIsTemplateNamedFilled();
+
+  return (
+    <ElementCustomizeContent>
      <ElementCustomize.PaperTemplate>
        <PaymentReceivedPaperTemplateFormConnected />
      </ElementCustomize.PaperTemplate>
@@ -35,10 +58,14 @@ export function PaymentReceivedCustomizeContent() {
        <PaymentReceivedCustomizeGeneralField />
      </ElementCustomize.FieldsTab>

-      <ElementCustomize.FieldsTab id={'content'} label={'Content'}>
+      <ElementCustomize.FieldsTab
+        id={'content'}
+        label={'Content'}
+        tabProps={{ disabled: !isTemplateNameFilled }}
+      >
        <PaymentReceivedCustomizeContentFields />
      </ElementCustomize.FieldsTab>
-    </BrandingTemplateForm>
+    </ElementCustomizeContent>
  );
 }

@@ -46,7 +73,10 @@ function PaymentReceivedPaperTemplateFormConnected() {
  const { values } = useFormikContext<PaymentReceivedCustomizeValues>();
  const { brandingState } = useElementCustomizeContext();

-  const paperTemplateProps: PaymentReceivedPaperTemplateProps = { ...brandingState, ...values };
+  const paperTemplateProps: PaymentReceivedPaperTemplateProps = {
+    ...brandingState,
+    ...values,
+  };

  return <PaymentReceivedPaperTemplate {...paperTemplateProps} />;
 }
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx
@@ -1,14 +1,21 @@
 import { useFormikContext } from 'formik';
-import { ElementCustomize } from '@/containers/ElementCustomize/ElementCustomize';
+import {
+  ElementCustomize,
+  ElementCustomizeContent,
+} from '@/containers/ElementCustomize/ElementCustomize';
 import { ReceiptCustomizeGeneralField } from './ReceiptCustomizeFieldsGeneral';
 import { ReceiptCustomizeFieldsContent } from './ReceiptCustomizeFieldsContent';
-import { ReceiptPaperTemplate, ReceiptPaperTemplateProps } from './ReceiptPaperTemplate';
+import {
+  ReceiptPaperTemplate,
+  ReceiptPaperTemplateProps,
+} from './ReceiptPaperTemplate';
 import { EstimateBrandingState, ReceiptCustomizeValues } from './types';
 import { initialValues } from './constants';
 import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTemplateForm';
 import { useDrawerActions } from '@/hooks/state';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { useElementCustomizeContext } from '@/containers/ElementCustomize/ElementCustomizeProvider';
+import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils';

 export function ReceiptCustomizeContent() {
  const { payload, name } = useDrawerContext();
@@ -26,6 +33,16 @@ export function ReceiptCustomizeContent() {
      defaultValues={initialValues}
      onSuccess={handleFormSuccess}
    >
+      <ReceiptCustomizeFormContent />
+    </BrandingTemplateForm>
+  );
+}
+
+function ReceiptCustomizeFormContent() {
+  const isTemplateNameFilled = useIsTemplateNamedFilled();
+
+  return (
+    <ElementCustomizeContent>
      <ElementCustomize.PaperTemplate>
        <ReceiptPaperTemplateFormConnected />
      </ElementCustomize.PaperTemplate>
@@ -34,10 +51,14 @@ export function ReceiptCustomizeContent() {
        <ReceiptCustomizeGeneralField />
      </ElementCustomize.FieldsTab>

-      <ElementCustomize.FieldsTab id={'content'} label={'Content'}>
+      <ElementCustomize.FieldsTab
+        id={'content'}
+        label={'Content'}
+        tabProps={{ disabled: !isTemplateNameFilled }}
+      >
        <ReceiptCustomizeFieldsContent />
      </ElementCustomize.FieldsTab>
-    </BrandingTemplateForm>
+    </ElementCustomizeContent>
  );
 }

@@ -45,7 +66,10 @@ function ReceiptPaperTemplateFormConnected() {
  const { values } = useFormikContext<ReceiptCustomizeValues>();
  const { brandingState } = useElementCustomizeContext();

-  const mergedProps: ReceiptPaperTemplateProps = { ...brandingState, ...values, };
+  const mergedProps: ReceiptPaperTemplateProps = {
+    ...brandingState,
+    ...values,
+  };

  return <ReceiptPaperTemplate {...mergedProps} />;
 }