diff --git a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplateBoot.tsx b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplateBoot.tsx index 58253ae36..da653c4cf 100644 --- a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplateBoot.tsx +++ b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplateBoot.tsx @@ -1,19 +1,21 @@ import React, { createContext, useContext } from 'react'; +import { Spinner } from '@blueprintjs/core'; import { GetPdfTemplateBrandingStateResponse, GetPdfTemplateResponse, useGetPdfTemplate, useGetPdfTemplateBrandingState, } from '@/hooks/query/pdf-templates'; -import { Spinner } from '@blueprintjs/core'; interface PdfTemplateContextValue { templateId: number | string; - pdfTemplate: GetPdfTemplateResponse | undefined; + + // Pdf template. + pdfTemplate: GetPdfTemplateResponse; isPdfTemplateLoading: boolean; // Branding state. - brandingTemplateState: GetPdfTemplateBrandingStateResponse | undefined; + brandingTemplateState: GetPdfTemplateBrandingStateResponse; isBrandingTemplateLoading: boolean; } @@ -34,10 +36,18 @@ export const BrandingTemplateBoot = ({ useGetPdfTemplate(templateId, { enabled: !!templateId, }); - // Retreives the branding template state. + // Retrieves the branding template state. const { data: brandingTemplateState, isLoading: isBrandingTemplateLoading } = useGetPdfTemplateBrandingState(); + const isLoading = isPdfTemplateLoading || + isBrandingTemplateLoading || + !brandingTemplateState || + !pdfTemplate; + + if (isLoading) { + return ; + } const value = { templateId, pdfTemplate, @@ -47,11 +57,6 @@ export const BrandingTemplateBoot = ({ isBrandingTemplateLoading, }; - const isLoading = isPdfTemplateLoading || isBrandingTemplateLoading; - - if (isLoading) { - return ; - } return ( {children} diff --git a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplateForm.tsx b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplateForm.tsx index 1f3c77d7f..98102ab53 100644 --- a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplateForm.tsx +++ b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplateForm.tsx @@ -8,6 +8,7 @@ import { import { transformToEditRequest, transformToNewRequest, + useBrandingState, useBrandingTemplateFormInitialValues, } from './_utils'; import { AppToaster } from '@/components'; @@ -17,31 +18,42 @@ import { useEditPdfTemplate, } from '@/hooks/query/pdf-templates'; import { FormikHelpers } from 'formik'; -import { BrandingTemplateValues } from './types'; +import { BrandingTemplateValues, BrandingState } from './types'; import { useUploadAttachments } from '@/hooks/query/attachments'; import { excludePrivateProps } from '@/utils'; -interface BrandingTemplateFormProps extends ElementCustomizeProps { +interface BrandingTemplateFormProps< + T extends BrandingTemplateValues, + Y extends BrandingState +> extends ElementCustomizeProps { resource: string; templateId?: number; onSuccess?: () => void; onError?: () => void; + + /* The default values hold the initial values of the form and the values being sent to the server. */ defaultValues?: T; } -export function BrandingTemplateForm({ +export function BrandingTemplateForm< + T extends BrandingTemplateValues, + Y extends BrandingState, +>({ templateId, onSuccess, onError, defaultValues, resource, ...props -}: BrandingTemplateFormProps) { +}: BrandingTemplateFormProps) { + // Create/edit pdf template mutators. const { mutateAsync: createPdfTemplate } = useCreatePdfTemplate(); const { mutateAsync: editPdfTemplate } = useEditPdfTemplate(); const initialValues = useBrandingTemplateFormInitialValues(defaultValues); - const [isUploading, setIsLoading] = useState(false); + const brandingState = useBrandingState(); + + const [, setIsLoading] = useState(false); // Uploads the attachments. const { mutateAsync: uploadAttachments } = useUploadAttachments({ @@ -122,10 +134,11 @@ export function BrandingTemplateForm({ }; return ( - + initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleFormSubmit} + brandingState={brandingState || {}} {...props} /> ); diff --git a/packages/webapp/src/containers/BrandingTemplates/_utils.ts b/packages/webapp/src/containers/BrandingTemplates/_utils.ts index 2dfded317..23cc16ea5 100644 --- a/packages/webapp/src/containers/BrandingTemplates/_utils.ts +++ b/packages/webapp/src/containers/BrandingTemplates/_utils.ts @@ -6,7 +6,7 @@ import { } from '@/hooks/query/pdf-templates'; import { useBrandingTemplateBoot } from './BrandingTemplateBoot'; import { transformToForm } from '@/utils'; -import { BrandingTemplateValues } from './types'; +import { BrandingState, BrandingTemplateValues } from './types'; import { DRAWERS } from '@/constants/drawers'; const commonExcludedAttrs = ['templateName', 'companyLogoUri']; @@ -48,7 +48,7 @@ export const useBrandingTemplateFormInitialValues = < const brandingAttributes = { templateName: pdfTemplate?.templateName, - ...brandingTemplateState, + // ...brandingTemplateState, ...pdfTemplate?.attributes, }; return { @@ -57,6 +57,15 @@ export const useBrandingTemplateFormInitialValues = < }; }; +export const useBrandingState = (state?: Partial): BrandingState => { + const { brandingTemplateState } = useBrandingTemplateBoot(); + + return { + ...brandingTemplateState, + ...state + } +} + export const getCustomizeDrawerNameFromResource = (resource: string) => { const pairs = { SaleInvoice: DRAWERS.INVOICE_CUSTOMIZE, diff --git a/packages/webapp/src/containers/BrandingTemplates/types.ts b/packages/webapp/src/containers/BrandingTemplates/types.ts index b4c01223a..a246e7616 100644 --- a/packages/webapp/src/containers/BrandingTemplates/types.ts +++ b/packages/webapp/src/containers/BrandingTemplates/types.ts @@ -6,4 +6,18 @@ export interface BrandingTemplateValues { // Company logo companyLogoKey?: string; companyLogoUri?: string; +} + +export interface BrandingState extends ElementPreviewState { + companyName: string; + companyAddress: string; + + companyLogoKey: string; + companyLogoUri: string; + + primaryColor: string; +} + +export interface ElementPreviewState { + } \ No newline at end of file diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomize.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomize.tsx index 05dd960ee..82bb731db 100644 --- a/packages/webapp/src/containers/ElementCustomize/ElementCustomize.tsx +++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomize.tsx @@ -9,17 +9,21 @@ import { ElementCustomizeTabsControllerProvider } from './ElementCustomizeTabsCo import { ElementCustomizeFields } from './ElementCustomizeFields'; import { ElementCustomizePreview } from './ElementCustomizePreview'; import { extractChildren } from '@/utils/extract-children'; +import { ElementPreviewState } from '../BrandingTemplates/types'; -export interface ElementCustomizeProps extends ElementCustomizeFormProps { +export interface ElementCustomizeProps + extends ElementCustomizeFormProps { + brandingState?: Y; children?: React.ReactNode; } -export function ElementCustomize({ +export function ElementCustomize({ initialValues, validationSchema, + brandingState, onSubmit, children, -}: ElementCustomizeProps) { +}: ElementCustomizeProps) { const PaperTemplate = React.useMemo( () => extractChildren(children, ElementCustomize.PaperTemplate), [children], @@ -29,7 +33,7 @@ export function ElementCustomize({ [children], ); - const value = { PaperTemplate, CustomizeTabs }; + const value = { PaperTemplate, CustomizeTabs, brandingState }; return ( ( {} as ElementCustomizeValue, ); -export const ElementCustomizeProvider: React.FC<{ +interface ElementCustomizeProviderProps { value: ElementCustomizeValue; children: React.ReactNode; -}> = ({ value, children }) => { +} + +export const ElementCustomizeProvider = ({ value, children }: ElementCustomizeProviderProps) => { return ( {children} @@ -29,4 +33,4 @@ export const useElementCustomizeContext = (): ElementCustomizeValue => { ); } return context; -}; +}; \ No newline at end of file diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomizerForm.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomizerForm.tsx index 114e4f66e..ca72b2a53 100644 --- a/packages/webapp/src/containers/ElementCustomize/ElementCustomizerForm.tsx +++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizerForm.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Formik, Form, FormikHelpers } from 'formik'; -export interface ElementCustomizeFormProps { +export interface ElementCustomizeFormProps { initialValues?: T; validationSchema?: any; onSubmit?: (values: T, formikHelpers: FormikHelpers) => void; diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx index a5e437754..c7fb6a570 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx @@ -2,12 +2,13 @@ import { useFormikContext } from 'formik'; import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize'; import { CreditNoteCustomizeGeneralField } from './CreditNoteCustomizeGeneralFields'; import { CreditNoteCustomizeContentFields } from './CreditNoteCutomizeContentFields'; -import { CreditNotePaperTemplate } from './CreditNotePaperTemplate'; -import { CreditNoteCustomizeValues } from './types'; +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'; export function CreditNoteCustomizeContent() { const { payload, name } = useDrawerContext(); @@ -20,7 +21,7 @@ export function CreditNoteCustomizeContent() { }; return ( - + resource={'CreditNote'} templateId={templateId} defaultValues={initialValues} @@ -43,6 +44,9 @@ export function CreditNoteCustomizeContent() { function CreditNotePaperTemplateFormConnected() { const { values } = useFormikContext(); + const { brandingState } = useElementCustomizeContext(); - return ; + const mergedProps: CreditNotePaperTemplateProps = { ...brandingState, ...values }; + + return ; } diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts index 3a0185566..999bcdd07 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts @@ -13,7 +13,6 @@ export const initialValues = { // Address showCustomerAddress: true, showCompanyAddress: true, - companyAddress: '', billedToLabel: 'Billed To', // Entries diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts index b627dd2f9..89ac8bb91 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts @@ -1,4 +1,6 @@ -import { BrandingTemplateValues } from '@/containers/BrandingTemplates/types'; +import { BrandingState, BrandingTemplateValues } from '@/containers/BrandingTemplates/types'; + +export interface CreditNoteBrandingState extends BrandingState {} export interface CreditNoteCustomizeValues extends BrandingTemplateValues { // Colors diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx index 23a67e011..8a8144e36 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx @@ -2,12 +2,13 @@ import { useFormikContext } from 'formik'; import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize'; import { EstimateCustomizeGeneralField } from './EstimateCustomizeFieldsGeneral'; import { EstimateCustomizeContentFields } from './EstimateCustomizeFieldsContent'; -import { EstimatePaperTemplate } from './EstimatePaperTemplate'; -import { EstimateCustomizeValues } from './types'; +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'; export function EstimateCustomizeContent() { const { payload, name } = useDrawerContext(); @@ -19,7 +20,7 @@ export function EstimateCustomizeContent() { }; return ( - + templateId={templateId} defaultValues={initialValues} onSuccess={handleSuccess} @@ -40,8 +41,15 @@ export function EstimateCustomizeContent() { ); } +/** + * Injects the `EstimatePaperTemplate` component props from the form and branding states. + * @returns {JSX.Element} + */ function EstimatePaperTemplateFormConnected() { const { values } = useFormikContext(); + const { brandingState } = useElementCustomizeContext() - return ; + const mergedProps: EstimatePaperTemplateProps = { ...values, ...brandingState } + + return ; } diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts index d9023cb24..52d862e2c 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts @@ -20,15 +20,11 @@ export const initialValues = { showExpirationDate: true, expirationDateLabel: 'Expiration Date', - // Company name - companyName: 'Bigcapital Technology, Inc.', - // Customer address showCustomerAddress: true, // Company address showCompanyAddress: true, - companyAddress: '', billedToLabel: 'Billed To', // Entries diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/types.ts b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/types.ts index 8646f9ee6..876a0f64a 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/types.ts +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/types.ts @@ -1,4 +1,6 @@ -import { BrandingTemplateValues } from '@/containers/BrandingTemplates/types'; +import { BrandingState, BrandingTemplateValues } from '@/containers/BrandingTemplates/types'; + +export interface EstimateBrandingState extends BrandingState {} export interface EstimateCustomizeValues extends BrandingTemplateValues { // Colors @@ -20,9 +22,6 @@ export interface EstimateCustomizeValues extends BrandingTemplateValues { estimateDateLabel?: string; showEstimateDate?: boolean; - // Company name - companyName?: string; - // Addresses showBilledFromAddress?: boolean; showBillingToAddress?: boolean; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx index 988198b57..2b021b324 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx @@ -8,13 +8,17 @@ import { import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize'; import { InvoiceCustomizeGeneralField } from './InvoiceCustomizeGeneralFields'; import { InvoiceCustomizeContentFields } from './InvoiceCutomizeContentFields'; -import { InvoiceCustomizeValues } from './types'; +import { InvoiceCustomizeFormValues, InvoiceCustomizeState } from './types'; 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'; +/** + * Invoice branding template customize. + */ export function InvoiceCustomizeContent() { const { payload, name } = useDrawerContext(); const { closeDrawer } = useDrawerActions(); @@ -25,7 +29,7 @@ export function InvoiceCustomizeContent() { }; return ( - + templateId={templateId} defaultValues={initialValues} validationSchema={InvoiceCustomizeSchema} @@ -47,15 +51,23 @@ export function InvoiceCustomizeContent() { ); } -const withFormikProps =

( +/** + * Injects the `InvoicePaperTemplate` component props from the form and branding states. + * @param Component + * @returns {JSX.Element} + */ +const withInvoicePreviewTemplateProps =

( Component: React.ComponentType

, ) => { return (props: Omit) => { - const { values } = useFormikContext(); + const { values } = useFormikContext(); + const { brandingState, } = useElementCustomizeContext(); - return ; + const mergedProps: InvoicePaperTemplateProps = { ...brandingState, ...values } + + return ; }; }; export const InvoicePaperTemplateFormConnected = - R.compose(withFormikProps)(InvoicePaperTemplate); + 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 b08b5979e..6c42ff3a1 100644 --- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx +++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx @@ -2,12 +2,13 @@ import { useFormikContext } from 'formik'; import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize'; import { PaymentReceivedCustomizeGeneralField } from './PaymentReceivedCustomizeFieldsGeneral'; import { PaymentReceivedCustomizeContentFields } from './PaymentReceivedCustomizeFieldsContent'; -import { PaymentReceivedCustomizeValues } from './types'; -import { PaymentReceivedPaperTemplate } 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'; export function PaymentReceivedCustomizeContent() { const { payload, name } = useDrawerContext(); @@ -20,7 +21,7 @@ export function PaymentReceivedCustomizeContent() { }; return ( - + templateId={templateId} defaultValues={initialValues} onSuccess={handleSuccess} @@ -43,6 +44,9 @@ export function PaymentReceivedCustomizeContent() { function PaymentReceivedPaperTemplateFormConnected() { const { values } = useFormikContext(); + const { brandingState } = useElementCustomizeContext(); - return ; + const paperTemplateProps: PaymentReceivedPaperTemplateProps = { ...brandingState, ...values }; + + return ; } diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts index f4d2c1ea3..3cb815980 100644 --- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts +++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts @@ -18,9 +18,6 @@ export const initialValues = { showPaymentReceivedDate: true, paymentReceivedDateLabel: 'Date of Issue', - // Company name - companyName: 'Bigcapital Technology, Inc.', - // Customer address showCompanyAddress: true, companyAddress: '', diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/types.ts b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/types.ts index f26371cc6..20ff06cb2 100644 --- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/types.ts +++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/types.ts @@ -1,4 +1,6 @@ -import { BrandingTemplateValues } from '@/containers/BrandingTemplates/types'; +import { BrandingState, BrandingTemplateValues } from '@/containers/BrandingTemplates/types'; + +export interface PaymentReceivedPreviewState extends BrandingState {} export interface PaymentReceivedCustomizeValues extends BrandingTemplateValues { // Colors @@ -20,15 +22,11 @@ export interface PaymentReceivedCustomizeValues extends BrandingTemplateValues { showDueDate?: boolean; dueDateLabel?: string; - // # Company name - companyName?: string; - // # Customer address showCustomerAddress?: boolean; // # Company address showCompanyAddress?: boolean; - companyAddress?: string; billedToLabel?: string; // Entries diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx index 298e8f879..dd6ffc09c 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx @@ -2,12 +2,13 @@ import { useFormikContext } from 'formik'; import { ElementCustomize } from '@/containers/ElementCustomize/ElementCustomize'; import { ReceiptCustomizeGeneralField } from './ReceiptCustomizeFieldsGeneral'; import { ReceiptCustomizeFieldsContent } from './ReceiptCustomizeFieldsContent'; -import { ReceiptPaperTemplate } from './ReceiptPaperTemplate'; -import { ReceiptCustomizeValues } from './types'; +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'; export function ReceiptCustomizeContent() { const { payload, name } = useDrawerContext(); @@ -19,7 +20,7 @@ export function ReceiptCustomizeContent() { }; return ( - + resource={'SaleReceipt'} templateId={templateId} defaultValues={initialValues} @@ -42,6 +43,9 @@ export function ReceiptCustomizeContent() { function ReceiptPaperTemplateFormConnected() { const { values } = useFormikContext(); + const { brandingState } = useElementCustomizeContext(); - return ; + const mergedProps: ReceiptPaperTemplateProps = { ...brandingState, ...values, }; + + return ; } diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts index cee1327f1..c25da45a5 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts @@ -18,9 +18,6 @@ export const initialValues = { showReceiptDate: true, receiptDateLabel: 'Date of Issue', - // Company name - companyName: 'Bigcapital Technology, Inc.', - // Customer address showCustomerAddress: true, diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts index 1fe5f2bf0..31b72081d 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts @@ -1,4 +1,8 @@ -import { BrandingTemplateValues } from "@/containers/BrandingTemplates/types"; +import { BrandingState, BrandingTemplateValues } from "@/containers/BrandingTemplates/types"; + +export interface EstimateBrandingState extends BrandingState { + +} export interface ReceiptCustomizeValues extends BrandingTemplateValues { // Colors @@ -16,9 +20,6 @@ export interface ReceiptCustomizeValues extends BrandingTemplateValues { showReceiptDate?: boolean; receiptDateLabel?: string; - // Company name - companyName?: string; - // Addresses showBilledFromAddress?: boolean; showBilledToAddress?: boolean;