feat: paper template customize

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx

@@ -1,13 +1,12 @@
-import React from 'react';
 import { Box } from '@/components';
 import { Classes } from '@blueprintjs/core';
-// import { InvoicePaperTemplate } from './InvoicePaperTemplate';
 import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize';
 import { CreditNoteCustomizeGeneralField } from './CreditNoteCustomizeGeneralFields';
 import { CreditNoteCustomizeContentFields } from './CreditNoteCutomizeContentFields';
 import { CreditNotePaperTemplate } from './CreditNotePaperTemplate';
 import { CreditNoteCustomizeValues } from './types';
 import { initialValues } from './constants';
+import { useFormikContext } from 'formik';
 
 export default function CreditNoteCustomizeContent() {
   const handleFormSubmit = (values: CreditNoteCustomizeValues) => {};
@@ -19,7 +18,7 @@ export default function CreditNoteCustomizeContent() {
         onSubmit={handleFormSubmit}
       >
         <ElementCustomize.PaperTemplate>
-          <CreditNotePaperTemplate />
+          <CreditNotePaperTemplateFormConnected />
         </ElementCustomize.PaperTemplate>
 
         <ElementCustomize.FieldsTab id={'general'} label={'General'}>
@@ -37,3 +36,9 @@ export default function CreditNoteCustomizeContent() {
     </Box>
   );
 }
+
+function CreditNotePaperTemplateFormConnected() {
+  const { values } = useFormikContext<CreditNoteCustomizeValues>();
+
+  return <CreditNotePaperTemplate {...values} />;
+}

packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx

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