feat: paper template customize

packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx

@@ -6,6 +6,7 @@ import { ReceiptCustomizeFieldsContent } from './ReceiptCustomizeFieldsContent';
 import { ReceiptPaperTemplate } from './ReceiptPaperTemplate';
 import { ReceiptCustomizeValues } from './types';
 import { initialValues } from './constants';
+import { useFormikContext } from 'formik';
 
 export default function ReceiptCustomizeContent() {
   const handleFormSubmit = (values: ReceiptCustomizeValues) => {};
@@ -17,7 +18,7 @@ export default function ReceiptCustomizeContent() {
         onSubmit={handleFormSubmit}
       >
         <ElementCustomize.PaperTemplate>
-          <ReceiptPaperTemplate />
+          <ReceiptPaperTemplateFormConnected />
         </ElementCustomize.PaperTemplate>
 
         <ElementCustomize.FieldsTab id={'general'} label={'General'}>
@@ -35,3 +36,9 @@ export default function ReceiptCustomizeContent() {
     </Box>
   );
 }
+
+function ReceiptPaperTemplateFormConnected() {
+  const { values } = useFormikContext<ReceiptCustomizeValues>();
+
+  return <ReceiptPaperTemplate {...values} />;
+}

packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsGeneral.tsx

@@ -2,7 +2,6 @@
 import { Classes } from '@blueprintjs/core';
 import { FFormGroup, FSwitch, Stack } from '@/components';
 import { FColorInput } from '@/components/Forms/FColorInput';
-// import styles from './InvoiceCustomizeFields.module.scss';
 
 export function ReceiptCustomizeGeneralField() {
   return (
@@ -19,7 +18,7 @@ export function ReceiptCustomizeGeneralField() {
         <FFormGroup
           name={'primaryColor'}
           label={'Primary Color'}
-          // className={styles.fieldGroup}
+          style={{ justifyContent: 'space-between' }}
           inline
           fastField
         >
@@ -33,7 +32,7 @@ export function ReceiptCustomizeGeneralField() {
         <FFormGroup
           name={'secondaryColor'}
           label={'Secondary Color'}
-          // className={styles.fieldGroup}
+          style={{ justifyContent: 'space-between' }}
           inline
           fastField
         >
@@ -48,7 +47,7 @@ export function ReceiptCustomizeGeneralField() {
           <FSwitch
             name={'showCompanyLogo'}
             label={'Display company logo in the paper'}
-            // className={styles.showCompanyLogoField}
+            style={{ fontSize: 14 }}
             large
             fastField
           />

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

@@ -10,13 +10,10 @@ export const initialValues = {
 
   // Top details.
   showReceiptNumber: true,
-  receiptNumberLabel: 'Invoice number',
+  receiptNumberLabel: 'Receipt number',
 
-  showDateIssue: true,
-  dateIssueLabel: 'Date of Issue',
-
-  showDueDate: true,
-  dueDateLabel: 'Due Date',
+  showReceiptDate: true,
+  receiptDateLabel: 'Date of Issue',
 
   // Company name
   companyName: 'Bigcapital Technology, Inc.',
@@ -36,24 +33,13 @@ export const initialValues = {
   showSubtotal: true,
   subtotalLabel: 'Subtotal',
 
-  showDiscount: true,
-  discountLabel: 'Discount',
-
-  showTaxes: true,
-
   showTotal: true,
   totalLabel: 'Total',
 
-  paymentMadeLabel: 'Payment Made',
-  showPaymentMade: true,
-
-  dueAmountLabel: 'Due Amount',
-  showDueAmount: true,
-
   // Footer paragraphs.
   termsConditionsLabel: 'Terms & Conditions',
   showTermsConditions: true,
 
-  statementLabel: 'Statement',
-  showStatement: true,
+  customerNoteLabel: 'Customer Note',
+  showCustomerNote: true,
 };

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

@@ -8,14 +8,11 @@ export interface ReceiptCustomizeValues {
   companyLogo?: string;
 
   // Top details.
-  showInvoiceNumber?: boolean;
-  invoiceNumberLabel?: string;
+  showReceiptNumber?: boolean;
+  receiptNumberLabel?: string;
 
-  showDateIssue?: boolean;
-  dateIssueLabel?: string;
-
-  showDueDate?: boolean;
-  dueDateLabel?: string;
+  showReceiptDate?: boolean;
+  receiptDateLabel?: string;
 
   // Company name
   companyName?: string;
@@ -35,24 +32,13 @@ export interface ReceiptCustomizeValues {
   showSubtotal?: boolean;
   subtotalLabel?: string;
 
-  showDiscount?: boolean;
-  discountLabel?: string;
-
-  showTaxes?: boolean;
-
   showTotal?: boolean;
   totalLabel?: string;
 
-  paymentMadeLabel?: string;
-  showPaymentMade?: boolean;
-
-  dueAmountLabel?: string;
-  showDueAmount?: boolean;
-
-  // Footer paragraphs.
+  // Statements
   termsConditionsLabel?: string;
   showTermsConditions?: boolean;
 
-  statementLabel?: string;
-  showStatement?: boolean;
+  customerNoteLabel?: string;
+  showCustomerNote?: boolean;
 }