Merge pull request #701 from bigcapitalhq/fix-disable-tabs-customize

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

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

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>({
+export interface ElementCustomizeContentProps {
-  initialValues,
+  children?: React.ReactNode;
-  validationSchema,
+}
-  brandingState,
+
-  onSubmit,
+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>
+      {children}
-        <ElementCustomizeProvider value={value}>
-          <Group spacing={0} align="stretch">
-            <ElementCustomizeFields />
-            <ElementCustomizePreview />
-          </Group>
-        </ElementCustomizeProvider>
-      </ElementCustomizeTabsControllerProvider>
     </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 }) => (
+          {tabItems?.map(
-            <Tab id={id} key={id} title={label} />
+            ({
-          ))}
+              id,
+              label,
+              tabProps,
+            }: {
+              id: string;
+              label: string;
+              tabProps?: TabProps;
+            }) => (
+              <Tab id={id} key={id} title={label} {...tabProps} />
+            ),
+          )}
         </Tabs>
       </Box>
     </Stack>

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

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

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 =
+export const InvoicePaperTemplateFormConnected = R.compose(
-  R.compose(withInvoicePreviewTemplateProps)(InvoicePaperTemplate);
+  withInvoicePreviewTemplateProps,
+)(InvoicePaperTemplate);

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 {
-import { PaymentReceivedPaperTemplate, PaymentReceivedPaperTemplateProps } from './PaymentReceivedPaperTemplate';
+  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} />;
 }

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