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

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} />;
 }