feat: paper template customize

packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx

@@ -7,6 +7,7 @@ import { EstimateCustomizeContentFields } from './EstimateCustomizeFieldsContent
 import { EstimatePaperTemplate } from './EstimatePaperTemplate';
 import { EstimateCustomizeValues } from './types';
 import { initialValues } from './constants';
+import { useFormikContext } from 'formik';
 
 export default function EstimateCustomizeContent() {
   const handleFormSubmit = (values: EstimateCustomizeValues) => {};
@@ -18,7 +19,7 @@ export default function EstimateCustomizeContent() {
         onSubmit={handleFormSubmit}
       >
         <ElementCustomize.PaperTemplate>
-          <EstimatePaperTemplate />
+          <EstimatePaperTemplateFormConnected />
         </ElementCustomize.PaperTemplate>
 
         <ElementCustomize.FieldsTab id={'general'} label={'General'}>
@@ -36,3 +37,9 @@ export default function EstimateCustomizeContent() {
     </Box>
   );
 }
+
+function EstimatePaperTemplateFormConnected() {
+  const { values } = useFormikContext<EstimateCustomizeValues>();
+
+  return <EstimatePaperTemplate {...values} />;
+}

packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx

@@ -19,7 +19,7 @@ export function EstimateCustomizeGeneralField() {
         <FFormGroup
           name={'primaryColor'}
           label={'Primary Color'}
-          // className={styles.fieldGroup}
+          style={{ justifyContent: 'space-between' }}
           inline
           fastField
         >
@@ -33,7 +33,7 @@ export function EstimateCustomizeGeneralField() {
         <FFormGroup
           name={'secondaryColor'}
           label={'Secondary Color'}
-          // className={styles.fieldGroup}
+          style={{ justifyContent: 'space-between' }}
           inline
           fastField
         >
@@ -48,7 +48,7 @@ export function EstimateCustomizeGeneralField() {
           <FSwitch
             name={'showCompanyLogo'}
             label={'Display company logo in the paper'}
-            // className={styles.showCompanyLogoField}
+            style={{ fontSize: 14 }}
             large
             fastField
           />

packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx

@@ -1,10 +1,32 @@
 import { Group, Stack } from '@/components';
-import { PaperTemplate, PaperTemplateProps } from '../../Invoices/InvoiceCustomize/PaperTemplate';
+import {
+  PaperTemplate,
+  PaperTemplateProps,
+} from '../../Invoices/InvoiceCustomize/PaperTemplate';
 
 export interface EstimatePaperTemplateProps extends PaperTemplateProps {
+  estimateNumebr?: string;
+  estimateNumberLabel?: string;
+  showEstimateNumber?: boolean;
+
+  expirationDate?: string;
+  showExpirationDate?: boolean;
+  expirationDateLabel?: string;
+
+  estimateDateLabel?: string;
+  showEstimateDate?: boolean;
+  estimateDate?: string;
+
+  companyName?: string;
+
+  // Address
+  showBilledToAddress?: boolean;
   billedToAddress?: Array<string>;
+
+  showBilledFromAddress?: boolean;
   billedFromAddress?: Array<string>;
 
+  // Totals
   total?: string;
   showTotal?: boolean;
   totalLabel?: string;
@@ -13,6 +35,7 @@ export interface EstimatePaperTemplateProps extends PaperTemplateProps {
   showSubtotal?: boolean;
   subtotalLabel?: string;
 
+  // Statements
   showCustomerNote?: boolean;
   customerNote?: string;
   customerNoteLabel?: string;
@@ -28,18 +51,6 @@ export interface EstimatePaperTemplateProps extends PaperTemplateProps {
     quantity: string;
     total: string;
   }>;
-
-  expirationDate?: string;
-  showExpirationDate?: boolean;
-  expirationDateLabel?: string;
-
-  estimateDateLabel?: string;
-  showEstimateDate?: boolean;
-  estimateDate?: string;
-
-  estimateNumebr?: string;
-  estimateNumberLabel?: string;
-  showEstimateNumber?: boolean;
 }
 
 export function EstimatePaperTemplate({

packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/constants.ts

@@ -1,4 +1,3 @@
-
 export const initialValues = {
   // Colors
   primaryColor: '#2c3dd8',
@@ -13,8 +12,8 @@ export const initialValues = {
   showEstimateNumber: true,
   estimateNumberLabel: 'Estimate number',
 
-  showDateIssue: true,
-  dateIssueLabel: 'Date of Issue',
+  estimateDateLabel: 'Date of Issue',
+  showEstimateDate: true,
 
   showExpirationDate: true,
   expirationDateLabel: 'Expiration Date',
@@ -37,24 +36,17 @@ export const initialValues = {
   showSubtotal: true,
   subtotalLabel: 'Subtotal',
 
-  showDiscount: true,
-  discountLabel: 'Discount',
-
-  showTaxes: true,
-
   showTotal: true,
   totalLabel: 'Total',
 
-  // Footer paragraphs.
-  termsConditionsLabel: 'Terms & Conditions',
+  // Statements
+  showCustomerNote: true,
+  customerNoteLabel: 'Customer Note',
+
   showTermsConditions: true,
-
-  statementLabel: 'Statement',
-  showStatement: true,
+  termsConditionsLabel: 'Terms & Conditions',
 };
 
-
-
 export const fieldsGroups = [
   {
     label: 'Header',
@@ -65,8 +57,8 @@ export const fieldsGroups = [
         label: 'Estimate No.',
       },
       {
-        labelKey: 'dateIssueLabel',
-        enableKey: 'showDateIssue',
+        labelKey: 'estimateDateLabel',
+        enableKey: 'showEstimateDate',
         label: 'Issue Date',
       },
       {
@@ -93,12 +85,6 @@ export const fieldsGroups = [
         enableKey: 'showSubtotal',
         label: 'Subtotal',
       },
-      {
-        labelKey: 'discountLabel',
-        enableKey: 'showDiscount',
-        label: 'Discount',
-      },
-      { enableKey: 'showTaxes', label: 'Taxes' },
       { labelKey: 'totalLabel', enableKey: 'showTotal', label: 'Total' },
     ],
   },
@@ -111,8 +97,8 @@ export const fieldsGroups = [
         label: 'Terms & Conditions',
       },
       {
-        labelKey: 'statementLabel',
-        enableKey: 'showStatement',
+        labelKey: 'customerNoteLabel',
+        enableKey: 'showCustomerNote',
         label: 'Statement',
         labelPlaceholder: 'Statement',
       },

packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/types.ts

@@ -8,14 +8,14 @@ export interface EstimateCustomizeValues {
   companyLogo?: string;
 
   // Top details.
-  showInvoiceNumber?: boolean;
-  invoiceNumberLabel?: string;
+  estimateNumberLabel?: string;
+  showEstimateNumber?: boolean;
 
-  showDateIssue?: boolean;
-  dateIssueLabel?: string;
+  showExpirationDate?: boolean;
+  expirationDateLabel?: string;
 
-  showDueDate?: boolean;
-  dueDateLabel?: string;
+  estimateDateLabel?: string;
+  showEstimateDate?: boolean;
 
   // Company name
   companyName?: string;
@@ -35,24 +35,13 @@ export interface EstimateCustomizeValues {
   showSubtotal?: boolean;
   subtotalLabel?: string;
 
-  showDiscount?: boolean;
-  discountLabel?: string;
-
-  showTaxes?: boolean;
-
   showTotal?: boolean;
   totalLabel?: string;
 
-  paymentMadeLabel?: string;
-  showPaymentMade?: boolean;
+  // Statements
+  showCustomerNote?: boolean;
+  customerNoteLabel?: string;
 
-  dueAmountLabel?: string;
-  showDueAmount?: boolean;
-
-  // Footer paragraphs.
-  termsConditionsLabel?: string;
   showTermsConditions?: boolean;
-
-  statementLabel?: string;
-  showStatement?: boolean;
+  termsConditionsLabel?: string;
 }