From 863c7693fa202e3a91f5315d2dec0eb4d1651ff4 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Thu, 10 Oct 2024 16:41:21 +0200 Subject: [PATCH] fix: Disable tabs of the pdf customization if the first field not filled up --- .../BrandingTemplateForm.tsx | 3 -- .../ElementCustomize/ElementCustomize.tsx | 48 ++++++++++++------- .../ElementCustomize/ElementCustomizeTabs.tsx | 19 ++++++-- .../CreditNoteCustomizeContent.tsx | 34 +++++++++++-- .../EstimateCustomizeContent.tsx | 36 +++++++++++--- .../InvoiceCustomizeContent.tsx | 45 +++++++++++++---- .../PaymentReceivedCustomizeContent.tsx | 44 ++++++++++++++--- .../ReceiptCustomizeContent.tsx | 34 +++++++++++-- 8 files changed, 206 insertions(+), 57 deletions(-) diff --git a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplateForm.tsx b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplateForm.tsx index 98102ab53..6aa72daa9 100644 --- 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(defaultValues); - const brandingState = useBrandingState(); - const [, setIsLoading] = useState(false); // Uploads the attachments. @@ -138,7 +136,6 @@ export function BrandingTemplateForm< initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleFormSubmit} - brandingState={brandingState || {}} {...props} /> ); diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomize.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomize.tsx index 82bb731db..0c9a19c7e 100644 --- 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 extends ElementCustomizeFormProps { @@ -17,13 +19,13 @@ export interface ElementCustomizeProps children?: React.ReactNode; } -export function ElementCustomize({ - initialValues, - validationSchema, - brandingState, - onSubmit, +export interface ElementCustomizeContentProps { + children?: React.ReactNode; +} + +export function ElementCustomizeContent({ children, -}: ElementCustomizeProps) { +}: ElementCustomizeContentProps) { const PaperTemplate = React.useMemo( () => extractChildren(children, ElementCustomize.PaperTemplate), [children], @@ -32,23 +34,34 @@ export function ElementCustomize({ () => extractChildren(children, ElementCustomize.FieldsTab), [children], ); - + const brandingState = useBrandingState(); const value = { PaperTemplate, CustomizeTabs, brandingState }; + return ( + + + + + + + + + ); +} + +export function ElementCustomize({ + initialValues, + validationSchema, + onSubmit, + children, +}: ElementCustomizeProps) { return ( - - - - - - - - + {children} ); } @@ -63,16 +76,17 @@ ElementCustomize.PaperTemplate = ({ return <>{children}; }; -export interface ElementCustomizeContentProps { +export interface ElementCustomizeFieldsTabProps { id: string; label: string; children?: React.ReactNode; + tabProps?: Partial; } ElementCustomize.FieldsTab = ({ id, label, children, -}: ElementCustomizeContentProps) => { +}: ElementCustomizeFieldsTabProps) => { return <>{children}; }; diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabs.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabs.tsx index 9ab3ae39f..bbd4643fb 100644 --- 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 }) => ( - - ))} + {tabItems?.map( + ({ + id, + label, + tabProps, + }: { + id: string; + label: string; + tabProps?: TabProps; + }) => ( + + ), + )} diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx index c7fb6a570..08efc0897 100644 --- 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} > + + + ); +} + +function CreditNoteCustomizeFormContent() { + const isTemplateNameFilled = useIsTemplateNamedFilled(); + + return ( + @@ -35,10 +52,14 @@ export function CreditNoteCustomizeContent() { - + - + ); } @@ -46,7 +67,10 @@ function CreditNotePaperTemplateFormConnected() { const { values } = useFormikContext(); const { brandingState } = useElementCustomizeContext(); - const mergedProps: CreditNotePaperTemplateProps = { ...brandingState, ...values }; + const mergedProps: CreditNotePaperTemplateProps = { + ...brandingState, + ...values, + }; return ; } diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx index edea835e7..4a3424417 100644 --- 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'} > + + + ); +} + +function EstimateCustomizeFormContent() { + const isTemplateNameFilled = useIsTemplateNamedFilled(); + + return ( + @@ -34,10 +51,14 @@ export function EstimateCustomizeContent() { - + - + ); } @@ -47,9 +68,12 @@ export function EstimateCustomizeContent() { */ function EstimatePaperTemplateFormConnected() { const { values } = useFormikContext(); - const { brandingState } = useElementCustomizeContext() + const { brandingState } = useElementCustomizeContext(); - const mergedProps: EstimatePaperTemplateProps = { ...brandingState, ...values, } + const mergedProps: EstimatePaperTemplateProps = { + ...brandingState, + ...values, + }; return ; } diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx index 17b452265..a6960ccff 100644 --- 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'} > + + + ); +} + +/** + * Invoice branding template customize preview and fields. + * @returns {JSX.Element} + */ +function InvoiceCustomizeFormContent() { + const isTemplateNameFilled = useIsTemplateNamedFilled(); + + return ( + @@ -44,16 +63,20 @@ export function InvoiceCustomizeContent() { - + - + ); } /** * Injects the `InvoicePaperTemplate` component props from the form and branding states. - * @param Component + * @param Component * @returns {JSX.Element} */ const withInvoicePreviewTemplateProps =

( @@ -61,13 +84,17 @@ const withInvoicePreviewTemplateProps =

( ) => { return (props: Omit) => { const { values } = useFormikContext(); - const { brandingState, } = useElementCustomizeContext(); + const { brandingState } = useElementCustomizeContext(); - const mergedProps: InvoicePaperTemplateProps = { ...brandingState, ...values }; + const mergedProps: InvoicePaperTemplateProps = { + ...brandingState, + ...values, + }; return ; }; }; -export const InvoicePaperTemplateFormConnected = - R.compose(withInvoicePreviewTemplateProps)(InvoicePaperTemplate); +export const InvoicePaperTemplateFormConnected = R.compose( + withInvoicePreviewTemplateProps, +)(InvoicePaperTemplate); diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx index 6c42ff3a1..10eea4c87 100644 --- 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 ( - + templateId={templateId} defaultValues={initialValues} onSuccess={handleSuccess} resource={'PaymentReceive'} > + + + ); +} + +function PaymentReceivedCustomizeFormContent() { + const isTemplateNameFilled = useIsTemplateNamedFilled(); + + return ( + @@ -35,10 +58,14 @@ export function PaymentReceivedCustomizeContent() { - + - + ); } @@ -46,7 +73,10 @@ function PaymentReceivedPaperTemplateFormConnected() { const { values } = useFormikContext(); const { brandingState } = useElementCustomizeContext(); - const paperTemplateProps: PaymentReceivedPaperTemplateProps = { ...brandingState, ...values }; + const paperTemplateProps: PaymentReceivedPaperTemplateProps = { + ...brandingState, + ...values, + }; return ; } diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx index dd6ffc09c..baf816735 100644 --- 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} > + + + ); +} + +function ReceiptCustomizeFormContent() { + const isTemplateNameFilled = useIsTemplateNamedFilled(); + + return ( + @@ -34,10 +51,14 @@ export function ReceiptCustomizeContent() { - + - + ); } @@ -45,7 +66,10 @@ function ReceiptPaperTemplateFormConnected() { const { values } = useFormikContext(); const { brandingState } = useElementCustomizeContext(); - const mergedProps: ReceiptPaperTemplateProps = { ...brandingState, ...values, }; + const mergedProps: ReceiptPaperTemplateProps = { + ...brandingState, + ...values, + }; return ; }