feat: paper template customize

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Box } from '@/components';
+import { useFormikContext } from 'formik';
 import { Classes } from '@blueprintjs/core';
+import { Box } from '@/components';
 import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize';
 import { PaymentReceivedCustomizeGeneralField } from './PaymentReceivedCustomizeFieldsGeneral';
 import { PaymentReceivedCustomizeContentFields } from './PaymentReceivedCustomizeFieldsContent';
@@ -18,7 +19,7 @@ export default function PaymentReceivedCustomizeContent() {
         onSubmit={handleFormSubmit}
       >
         <ElementCustomize.PaperTemplate>
-          <PaymentReceivedPaperTemplate />
+          <PaymentReceivedPaperTemplateFormConnected />
         </ElementCustomize.PaperTemplate>
 
         <ElementCustomize.FieldsTab id={'general'} label={'General'}>
@@ -36,3 +37,9 @@ export default function PaymentReceivedCustomizeContent() {
     </Box>
   );
 }
+
+function PaymentReceivedPaperTemplateFormConnected() {
+  const { values } = useFormikContext<PaymentReceivedCustomizeValues>();
+
+  return <PaymentReceivedPaperTemplate {...values} />;
+}

packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx

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