Merge pull request #697 from bigcapitalhq/fix-pdf-branding-templates-request-data

fix: Pdf branding templates request data

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 <Spinner size={20} />;
+  }
   const value = {
     templateId,
     pdfTemplate,
@@ -47,11 +57,6 @@ export const BrandingTemplateBoot = ({
     isBrandingTemplateLoading,
   };
 
-  const isLoading = isPdfTemplateLoading || isBrandingTemplateLoading;
-
-  if (isLoading) {
-    return <Spinner size={20} />;
-  }
   return (
     <PdfTemplateContext.Provider value={value}>
       {children}

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<T> extends ElementCustomizeProps<T> {
+interface BrandingTemplateFormProps<
+  T extends BrandingTemplateValues,
+  Y extends BrandingState
+> extends ElementCustomizeProps<T, Y> {
   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<T extends BrandingTemplateValues>({
+export function BrandingTemplateForm<
+  T extends BrandingTemplateValues,
+  Y extends BrandingState,
+>({
   templateId,
   onSuccess,
   onError,
   defaultValues,
   resource,
   ...props
-}: BrandingTemplateFormProps<T>) {
+}: BrandingTemplateFormProps<T, Y>) {
+  // Create/edit pdf template mutators.
   const { mutateAsync: createPdfTemplate } = useCreatePdfTemplate();
   const { mutateAsync: editPdfTemplate } = useEditPdfTemplate();
 
   const initialValues = useBrandingTemplateFormInitialValues<T>(defaultValues);
-  const [isUploading, setIsLoading] = useState<boolean>(false);
+  const brandingState = useBrandingState();
+
+  const [, setIsLoading] = useState<boolean>(false);
 
   // Uploads the attachments.
   const { mutateAsync: uploadAttachments } = useUploadAttachments({
@@ -122,10 +134,11 @@ export function BrandingTemplateForm<T extends BrandingTemplateValues>({
   };
 
   return (
-    <ElementCustomize<T>
+    <ElementCustomize<T, Y>
       initialValues={initialValues}
       validationSchema={validationSchema}
       onSubmit={handleFormSubmit}
+      brandingState={brandingState || {}}
       {...props}
     />
   );

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'];
@@ -44,11 +44,10 @@ export const useBrandingTemplateFormInitialValues = <
 >(
   initialValues = {},
 ) => {
-  const { pdfTemplate, brandingTemplateState } = useBrandingTemplateBoot();
+  const { pdfTemplate } = useBrandingTemplateBoot();
 
   const brandingAttributes = {
     templateName: pdfTemplate?.templateName,
-    ...brandingTemplateState,
     ...pdfTemplate?.attributes,
   };
   return {
@@ -57,6 +56,15 @@ export const useBrandingTemplateFormInitialValues = <
   };
 };
 
+export const useBrandingState = (state?: Partial<BrandingState>): BrandingState => {
+  const { brandingTemplateState } = useBrandingTemplateBoot();
+
+  return {
+    ...brandingTemplateState,
+    ...state
+  }
+}
+
 export const getCustomizeDrawerNameFromResource = (resource: string) => {
   const pairs = {
     SaleInvoice: DRAWERS.INVOICE_CUSTOMIZE,

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 {
+
 }

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<T> extends ElementCustomizeFormProps<T> {
+export interface ElementCustomizeProps<T, Y>
+  extends ElementCustomizeFormProps<T, Y> {
+  brandingState?: Y;
   children?: React.ReactNode;
 }
 
-export function ElementCustomize<T>({
+export function ElementCustomize<T, Y extends ElementPreviewState>({
   initialValues,
   validationSchema,
+  brandingState,
   onSubmit,
   children,
-}: ElementCustomizeProps<T>) {
+}: ElementCustomizeProps<T, Y>) {
   const PaperTemplate = React.useMemo(
     () => extractChildren(children, ElementCustomize.PaperTemplate),
     [children],
@@ -29,7 +33,7 @@ export function ElementCustomize<T>({
     [children],
   );
 
-  const value = { PaperTemplate, CustomizeTabs };
+  const value = { PaperTemplate, CustomizeTabs, brandingState };
 
   return (
     <ElementCustomizeForm

packages/webapp/src/containers/ElementCustomize/ElementCustomizeProvider.tsx

@@ -1,18 +1,22 @@
 import React, { createContext, useContext } from 'react';
+import { ElementPreviewState } from '../BrandingTemplates/types';
 
 interface ElementCustomizeValue {
   PaperTemplate?: React.ReactNode;
   CustomizeTabs: React.ReactNode;
+  brandingState?: ElementPreviewState;
 }
 
 const ElementCustomizeContext = createContext<ElementCustomizeValue>(
   {} as ElementCustomizeValue,
 );
 
-export const ElementCustomizeProvider: React.FC<{
+interface ElementCustomizeProviderProps {
   value: ElementCustomizeValue;
   children: React.ReactNode;
-}> = ({ value, children }) => {
+}
+
+export const ElementCustomizeProvider = ({ value, children }: ElementCustomizeProviderProps) => {
   return (
     <ElementCustomizeContext.Provider value={{ ...value }}>
       {children}
@@ -29,4 +33,4 @@ export const useElementCustomizeContext = (): ElementCustomizeValue => {
     );
   }
   return context;
-};
+};

packages/webapp/src/containers/ElementCustomize/ElementCustomizerForm.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { Formik, Form, FormikHelpers } from 'formik';
 
-export interface ElementCustomizeFormProps<T> {
+export interface ElementCustomizeFormProps<T, Y> {
   initialValues?: T;
   validationSchema?: any;
   onSubmit?: (values: T, formikHelpers: FormikHelpers<T>) => void;

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 (
-    <BrandingTemplateForm<CreditNoteCustomizeValues>
+    <BrandingTemplateForm<CreditNoteCustomizeValues, CreditNoteBrandingState>
       resource={'CreditNote'}
       templateId={templateId}
       defaultValues={initialValues}
@@ -43,6 +44,9 @@ export function CreditNoteCustomizeContent() {
 
 function CreditNotePaperTemplateFormConnected() {
   const { values } = useFormikContext<CreditNoteCustomizeValues>();
+  const { brandingState } = useElementCustomizeContext();
 
-  return <CreditNotePaperTemplate {...values} />;
+  const mergedProps: CreditNotePaperTemplateProps = { ...brandingState, ...values };
+
+  return <CreditNotePaperTemplate {...mergedProps} />;
 }

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

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

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 (
-    <BrandingTemplateForm<EstimateCustomizeValues>
+    <BrandingTemplateForm<EstimateCustomizeValues, EstimateBrandingState>
       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<EstimateCustomizeValues>();
+  const { brandingState } = useElementCustomizeContext()
 
-  return <EstimatePaperTemplate {...values} />;
+  const mergedProps: EstimatePaperTemplateProps = { ...values, ...brandingState }
+
+  return <EstimatePaperTemplate {...mergedProps} />;
 }

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

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;

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 (
-    <BrandingTemplateForm<InvoiceCustomizeValues>
+    <BrandingTemplateForm<InvoiceCustomizeFormValues, InvoiceCustomizeState>
       templateId={templateId}
       defaultValues={initialValues}
       validationSchema={InvoiceCustomizeSchema}
@@ -47,15 +51,23 @@ export function InvoiceCustomizeContent() {
   );
 }
 
-const withFormikProps = <P extends object>(
+/**
+ * Injects the `InvoicePaperTemplate` component props from the form and branding states.
+ * @param Component 
+ * @returns {JSX.Element}
+ */
+const withInvoicePreviewTemplateProps = <P extends object>(
   Component: React.ComponentType<P>,
 ) => {
   return (props: Omit<P, keyof InvoicePaperTemplateProps>) => {
-    const { values } = useFormikContext<InvoicePaperTemplateProps>();
+    const { values } = useFormikContext<InvoiceCustomizeFormValues>();
+    const { brandingState, } = useElementCustomizeContext();
 
-    return <Component {...(props as P)} {...values} />;
+    const mergedProps: InvoicePaperTemplateProps = { ...brandingState, ...values }
+
+    return <Component {...(props as P)} {...mergedProps} />;
   };
 };
 
 export const InvoicePaperTemplateFormConnected =
-  R.compose(withFormikProps)(InvoicePaperTemplate);
+  R.compose(withInvoicePreviewTemplateProps)(InvoicePaperTemplate);

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/constants.ts

@@ -16,19 +16,17 @@ export const initialValues = {
   showInvoiceNumber: true,
   invoiceNumberLabel: 'Invoice number',
 
+  // Issue date
   showDateIssue: true,
   dateIssueLabel: 'Date of Issue',
 
+  // Due date.
   showDueDate: true,
   dueDateLabel: 'Due Date',
 
-  // Company name
-  companyName: 'Bigcapital Technology, Inc.',
-
   // Addresses
   showCustomerAddress: true,
   showCompanyAddress: true,
-  companyAddress: '',
   billedToLabel: 'Billed To',
 
   // Entries
@@ -41,6 +39,7 @@ export const initialValues = {
   showSubtotal: true,
   subtotalLabel: 'Subtotal',
 
+  // Discount
   showDiscount: true,
   discountLabel: 'Discount',
 
@@ -52,6 +51,7 @@ export const initialValues = {
   paymentMadeLabel: 'Payment Made',
   showPaymentMade: true,
 
+  // Due amount
   dueAmountLabel: 'Due Amount',
   showDueAmount: true,
 
@@ -59,6 +59,7 @@ export const initialValues = {
   termsConditionsLabel: 'Terms & Conditions',
   showTermsConditions: true,
 
+  // Statement
   statementLabel: 'Statement',
   showStatement: true,
 };

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/types.ts

@@ -1,6 +1,8 @@
-import { BrandingTemplateValues } from "@/containers/BrandingTemplates/types";
+import { BrandingState, BrandingTemplateValues } from '@/containers/BrandingTemplates/types';
 
-export interface InvoiceCustomizeValues extends BrandingTemplateValues {
+export interface InvoiceCustomizeState extends BrandingState {}
+
+export interface InvoiceCustomizeFormValues extends BrandingTemplateValues {
   // Colors
   primaryColor?: string;
   secondaryColor?: string;
@@ -14,15 +16,14 @@ export interface InvoiceCustomizeValues extends BrandingTemplateValues {
   showInvoiceNumber?: boolean;
   invoiceNumberLabel?: string;
 
+  // Date issue
   showDateIssue?: boolean;
   dateIssueLabel?: string;
 
+  // Due date
   showDueDate?: boolean;
   dueDateLabel?: string;
 
-  // Company name
-  companyName?: string;
-
   // Addresses
   showBilledFromAddress?: boolean;
   showBillingToAddress?: boolean;
@@ -38,6 +39,7 @@ export interface InvoiceCustomizeValues extends BrandingTemplateValues {
   showSubtotal?: boolean;
   subtotalLabel?: string;
 
+  // Discount
   showDiscount?: boolean;
   discountLabel?: string;
 

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/utils.ts

@@ -1,6 +1,5 @@
 import { omit } from 'lodash';
-import { useFormikContext } from 'formik';
-import { InvoiceCustomizeValues } from './types';
+import { InvoiceCustomizeFormValues } from './types';
 import {
   CreatePdfTemplateValues,
   EditPdfTemplateValues,
@@ -10,7 +9,7 @@ import { initialValues } from './constants';
 import { useBrandingTemplateBoot } from '@/containers/BrandingTemplates/BrandingTemplateBoot';
 
 export const transformToEditRequest = (
-  values: InvoiceCustomizeValues,
+  values: InvoiceCustomizeFormValues,
 ): EditPdfTemplateValues => {
   return {
     templateName: values.templateName,
@@ -19,7 +18,7 @@ export const transformToEditRequest = (
 };
 
 export const transformToNewRequest = (
-  values: InvoiceCustomizeValues,
+  values: InvoiceCustomizeFormValues,
 ): CreatePdfTemplateValues => {
   return {
     resource: 'SaleInvoice',
@@ -28,7 +27,7 @@ export const transformToNewRequest = (
   };
 };
 
-export const useInvoiceCustomizeInitialValues = (): InvoiceCustomizeValues => {
+export const useInvoiceCustomizeInitialValues = (): InvoiceCustomizeFormValues => {
   const { pdfTemplate } = useBrandingTemplateBoot();
 
   const defaultPdfTemplate = {
@@ -40,6 +39,6 @@ export const useInvoiceCustomizeInitialValues = (): InvoiceCustomizeValues => {
     ...(transformToForm(
       defaultPdfTemplate,
       initialValues,
-    ) as InvoiceCustomizeValues),
+    ) as InvoiceCustomizeFormValues),
   };
 };

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 (
-    <BrandingTemplateForm<PaymentReceivedCustomizeValues>
+    <BrandingTemplateForm<PaymentReceivedCustomizeValues, PaymentReceivedPreviewState>
       templateId={templateId}
       defaultValues={initialValues}
       onSuccess={handleSuccess}
@@ -43,6 +44,9 @@ export function PaymentReceivedCustomizeContent() {
 
 function PaymentReceivedPaperTemplateFormConnected() {
   const { values } = useFormikContext<PaymentReceivedCustomizeValues>();
+  const { brandingState } = useElementCustomizeContext();
 
-  return <PaymentReceivedPaperTemplate {...values} />;
+  const paperTemplateProps: PaymentReceivedPaperTemplateProps = { ...brandingState, ...values };
+
+  return <PaymentReceivedPaperTemplate {...paperTemplateProps} />;
 }

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts

@@ -18,12 +18,8 @@ export const initialValues = {
   showPaymentReceivedDate: true,
   paymentReceivedDateLabel: 'Date of Issue',
 
-  // Company name
-  companyName: 'Bigcapital Technology, Inc.',
-
   // Customer address
   showCompanyAddress: true,
-  companyAddress: '',
 
   // Company address
   showCustomerAddress: true,

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

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 (
-    <BrandingTemplateForm<ReceiptCustomizeValues>
+    <BrandingTemplateForm<ReceiptCustomizeValues, EstimateBrandingState>
       resource={'SaleReceipt'}
       templateId={templateId}
       defaultValues={initialValues}
@@ -42,6 +43,9 @@ export function ReceiptCustomizeContent() {
 
 function ReceiptPaperTemplateFormConnected() {
   const { values } = useFormikContext<ReceiptCustomizeValues>();
+  const { brandingState } = useElementCustomizeContext();
 
-  return <ReceiptPaperTemplate {...values} />;
+  const mergedProps: ReceiptPaperTemplateProps = { ...brandingState, ...values, };
+
+  return <ReceiptPaperTemplate {...mergedProps} />;
 }

packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts

@@ -18,14 +18,10 @@ export const initialValues = {
   showReceiptDate: true,
   receiptDateLabel: 'Date of Issue',
 
-  // Company name
-  companyName: 'Bigcapital Technology, Inc.',
-
   // Customer address
   showCustomerAddress: true,
 
   // Company address
-  companyAddress: '',
   showCompanyAddress: true,
   billedToLabel: 'Billed To',
 

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;