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

2026-02-16 12:50:38 +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/BrandingTemplates/BrandingTemplateForm.tsx
+++ b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplateForm.tsx
@@ -51,8 +51,6 @@ export function BrandingTemplateForm<
  const { mutateAsync: editPdfTemplate } = useEditPdfTemplate();

  const initialValues = useBrandingTemplateFormInitialValues<T>(defaultValues);
-  const brandingState = useBrandingState();
-
  const [, setIsLoading] = useState<boolean>(false);

  // Uploads the attachments.
@@ -138,7 +136,6 @@ export function BrandingTemplateForm<
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={handleFormSubmit}
-      brandingState={brandingState || {}}
      {...props}
    />
  );
--- a/packages/webapp/src/containers/ElementCustomize/ElementCustomize.tsx
+++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomize.tsx
@@ -10,6 +10,8 @@ import { ElementCustomizeFields } from './ElementCustomizeFields';
 import { ElementCustomizePreview } from './ElementCustomizePreview';
 import { extractChildren } from '@/utils/extract-children';
 import { ElementPreviewState } from '../BrandingTemplates/types';
+import { TabProps } from '@blueprintjs/core';
+import { useBrandingState } from '../BrandingTemplates/_utils';

 export interface ElementCustomizeProps<T, Y>
  extends ElementCustomizeFormProps<T, Y> {
@@ -17,13 +19,13 @@ export interface ElementCustomizeProps<T, Y>
  children?: React.ReactNode;
 }

-export function ElementCustomize<T, Y extends ElementPreviewState>({
-  initialValues,
-  validationSchema,
-  brandingState,
-  onSubmit,
+export interface ElementCustomizeContentProps {
+  children?: React.ReactNode;
+}
+
+export function ElementCustomizeContent({
  children,
-}: ElementCustomizeProps<T, Y>) {
+}: ElementCustomizeContentProps) {
  const PaperTemplate = React.useMemo(
    () => extractChildren(children, ElementCustomize.PaperTemplate),
    [children],
@@ -32,23 +34,34 @@ export function ElementCustomize<T, Y extends ElementPreviewState>({
    () => extractChildren(children, ElementCustomize.FieldsTab),
    [children],
  );
-
+  const brandingState = useBrandingState();
  const value = { PaperTemplate, CustomizeTabs, brandingState };

+  return (
+    <ElementCustomizeTabsControllerProvider>
+      <ElementCustomizeProvider value={value}>
+        <Group spacing={0} align="stretch">
+          <ElementCustomizeFields />
+          <ElementCustomizePreview />
+        </Group>
+      </ElementCustomizeProvider>
+    </ElementCustomizeTabsControllerProvider>
+  );
+}
+
+export function ElementCustomize<T, Y extends ElementPreviewState>({
+  initialValues,
+  validationSchema,
+  onSubmit,
+  children,
+}: ElementCustomizeProps<T, Y>) {
  return (
    <ElementCustomizeForm
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={onSubmit}
    >
-      <ElementCustomizeTabsControllerProvider>
-        <ElementCustomizeProvider value={value}>
-          <Group spacing={0} align="stretch">
-            <ElementCustomizeFields />
-            <ElementCustomizePreview />
-          </Group>
-        </ElementCustomizeProvider>
-      </ElementCustomizeTabsControllerProvider>
+      {children}
    </ElementCustomizeForm>
  );
 }
@@ -63,16 +76,17 @@ ElementCustomize.PaperTemplate = ({
  return <>{children}</>;
 };

-export interface ElementCustomizeContentProps {
+export interface ElementCustomizeFieldsTabProps {
  id: string;
  label: string;
  children?: React.ReactNode;
+  tabProps?: Partial<TabProps>;
 }

 ElementCustomize.FieldsTab = ({
  id,
  label,
  children,
-}: ElementCustomizeContentProps) => {
+}: ElementCustomizeFieldsTabProps) => {
  return <>{children}</>;
 };
--- a/packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabs.tsx
+++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabs.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Stack } from '@/components';
-import { Tab, Tabs } from '@blueprintjs/core';
+import { Tab, TabProps, Tabs } from '@blueprintjs/core';
 import { ElementCustomizeHeader } from './ElementCustomizeHeader';
 import {
  ElementCustomizeTabsEnum,
@@ -11,7 +11,6 @@ import styles from './ElementCustomizeTabs.module.scss';

 export function ElementCustomizeTabs() {
  const { setCurrentTabId } = useElementCustomizeTabsController();
-
  const { CustomizeTabs } = useElementCustomizeContext();

  const tabItems = React.Children.map(CustomizeTabs, (node) => ({
@@ -32,9 +31,19 @@ export function ElementCustomizeTabs() {
          onChange={handleChange}
          className={styles.tabsList}
        >
-          {tabItems?.map(({ id, label }: { id: string; label: string }) => (
-            <Tab id={id} key={id} title={label} />
-          ))}
+          {tabItems?.map(
+            ({
+              id,
+              label,
+              tabProps,
+            }: {
+              id: string;
+              label: string;
+              tabProps?: TabProps;
+            }) => (
+              <Tab id={id} key={id} title={label} {...tabProps} />
+            ),
+          )}
        </Tabs>
      </Box>
    </Stack>
--- 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} />;
 }