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

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

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>