feat: invoice pdf customize

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomize.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
+import * as R from 'ramda';
 import { Box } from '@/components';
 import { Classes } from '@blueprintjs/core';
-import { InvoicePaperTemplate } from './InvoicePaperTemplate';
+import { useFormikContext } from 'formik';
+import {
+  InvoicePaperTemplate,
+  InvoicePaperTemplateProps,
+} from './InvoicePaperTemplate';
 import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize';
 import { InvoiceCustomizeGeneralField } from './InvoiceCustomizeGeneralFields';
 import { InvoiceCustomizeContentFields } from './InvoiceCutomizeContentFields';
@@ -18,7 +23,7 @@ export default function InvoiceCustomizeContent() {
         onSubmit={handleFormSubmit}
       >
         <ElementCustomize.PaperTemplate>
-          <InvoicePaperTemplate />
+          <InvoicePaperTemplateFormConnected />
         </ElementCustomize.PaperTemplate>
 
         <ElementCustomize.FieldsTab id={'general'} label={'General'}>
@@ -36,3 +41,16 @@ export default function InvoiceCustomizeContent() {
     </Box>
   );
 }
+
+const withFormikProps = <P extends object>(
+  Component: React.ComponentType<P>,
+) => {
+  return (props: Omit<P, keyof InvoicePaperTemplateProps>) => {
+    const { values } = useFormikContext<InvoicePaperTemplateProps>();
+
+    return <Component {...(props as P)} {...values} />;
+  };
+};
+
+export const InvoicePaperTemplateFormConnected =
+  R.compose(withFormikProps)(InvoicePaperTemplate);

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx

@@ -1,10 +1,6 @@
-import clsx from 'classnames';
-import * as R from 'ramda';
-import { useFormikContext } from 'formik';
-import styles from './InvoicePaperTemplate.module.scss';
+import React from 'react';
 import { PaperTemplate } from './PaperTemplate';
 import { Group, Stack } from '@/components';
-import React from 'react';
 
 interface PapaerLine {
   item?: string;
@@ -19,7 +15,7 @@ interface PaperTax {
   amount: string;
 }
 
-interface PaperTemplateProps {
+export interface InvoicePaperTemplateProps {
   primaryColor?: string;
   secondaryColor?: string;
 
@@ -92,7 +88,7 @@ interface PaperTemplateProps {
   billedToAddress?: Array<string | React.ReactNode>;
 }
 
-function InvoicePaperTemplateRoot({
+export function InvoicePaperTemplate({
   primaryColor,
   secondaryColor,
 
@@ -183,7 +179,7 @@ function InvoicePaperTemplateRoot({
     '+1 762-339-5634',
     'ahmed@bigcapital.app',
   ],
-}: PaperTemplateProps) {
+}: InvoicePaperTemplateProps) {
   return (
     <PaperTemplate
       primaryColor={primaryColor}
@@ -290,17 +286,3 @@ function InvoicePaperTemplateRoot({
     </PaperTemplate>
   );
 }
-
-const withFormikProps = <P extends object>(
-  Component: React.ComponentType<P>,
-) => {
-  return (props: Omit<P, keyof PaperTemplateProps>) => {
-    const { values } = useFormikContext<PaperTemplateProps>();
-
-    return <Component {...(props as P)} {...values} />;
-  };
-};
-
-export const InvoicePaperTemplate = R.compose(withFormikProps)(
-  InvoicePaperTemplateRoot,
-);