fix: Pdf branding templates request data

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/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,9 +18,6 @@ export const initialValues = {
   showPaymentReceivedDate: true,
   paymentReceivedDateLabel: 'Date of Issue',
 
-  // Company name
-  companyName: 'Bigcapital Technology, Inc.',
-
   // Customer address
   showCompanyAddress: true,
   companyAddress: '',

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,9 +18,6 @@ export const initialValues = {
   showReceiptDate: true,
   receiptDateLabel: 'Date of Issue',
 
-  // Company name
-  companyName: 'Bigcapital Technology, Inc.',
-
   // Customer address
   showCustomerAddress: true,
 

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;