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

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);