feat: wip invoice customize

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

@@ -0,0 +1,32 @@
+import { SVGProps } from 'react';
+
+
+interface CreditCardIconProps extends SVGProps<SVGSVGElement> {
+}
+
+
+export function CreditCardIcon(props: CreditCardIconProps) {
+  return (
+    <svg
+      version="1.1"
+      id="Layer_1"
+      xmlns="http://www.w3.org/2000/svg"
+      x="0px"
+      y="0px"
+      viewBox="0 0 16 16"
+      enable-background="new 0 0 16 16"
+      {...props}
+    >
+      <g id="credit_card_2_">
+        <g>
+          <path
+            d="M14.99,2.95h-14c-0.55,0-1,0.45-1,1v1h16v-1C15.99,3.4,15.54,2.95,14.99,2.95z M-0.01,12.95c0,0.55,0.45,1,1,1h14
+			c0.55,0,1-0.45,1-1v-6h-16C-0.01,6.95-0.01,12.95-0.01,12.95z M5.49,10.95h5c0.28,0,0.5,0.22,0.5,0.5s-0.22,0.5-0.5,0.5h-5
+			c-0.28,0-0.5-0.22-0.5-0.5S5.22,10.95,5.49,10.95z M2.49,10.95h1c0.28,0,0.5,0.22,0.5,0.5s-0.22,0.5-0.5,0.5h-1
+			c-0.28,0-0.5-0.22-0.5-0.5S2.22,10.95,2.49,10.95z"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeFields.module.scss

@@ -1,10 +1,10 @@
 .root {
-  flex: 1;
   background: #fff;
 }
 
 .mainFields{
-  flex: 1;
+  width: 400px;
+  height: 100vh;
 }
 .fieldGroup {
 

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

@@ -3,7 +3,6 @@ import * as R from 'ramda';
 import { Box, Group, Stack } from '@/components';
 import { InvoiceCustomizeHeader } from './InvoiceCustomizeHeader';
 import { InvoiceCustomizeTabs } from './InvoiceCustomizeTabs';
-import styles from './InvoiceCustomizeFields.module.scss';
 import { InvoiceCustomizeGeneralField } from './InvoiceCustomizeGeneralFields';
 import { useInvoiceCustomizeTabsController } from './InvoiceCustomizeTabsController';
 import { Button, Intent } from '@blueprintjs/core';
@@ -11,6 +10,7 @@ import withDrawerActions from '@/containers/Drawer/withDrawerActions';
 import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
 import { useFormikContext } from 'formik';
 import { InvoiceCustomizeContentFields } from './InvoiceCutomizeContentFields';
+import styles from './InvoiceCustomizeFields.module.scss';
 
 export function InvoiceCustomizeFields() {
   return (
@@ -27,7 +27,7 @@ export function InvoiceCustomizeFieldsMain() {
     <Stack spacing={0} className={styles.mainFields}>
       <InvoiceCustomizeHeader label={'Customize'} />
 
-      <Stack spacing={0} style={{ flex: '1 1 auto' }}>
+      <Stack spacing={0} style={{ flex: '1 1 auto', overflow: 'auto' }}>
         {currentTabId === 'general' && <InvoiceCustomizeGeneralField />}
         {currentTabId === 'content' && <InvoiceCustomizeContentFields />}
 

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

@@ -1,8 +1,9 @@
 // @ts-nocheck
-import { FFormGroup, FSwitch, Stack } from '@/components';
+import { Box, FFormGroup, FSwitch, Group, Stack } from '@/components';
 import { FColorInput } from './FColorField';
 import styles from './InvoiceCustomizeFields.module.scss';
-import { Classes } from '@blueprintjs/core';
+import { Classes, Text } from '@blueprintjs/core';
+import { CreditCardIcon } from './CreditCardIcon';
 
 export function InvoiceCustomizeGeneralField() {
   return (
@@ -49,6 +50,29 @@ export function InvoiceCustomizeGeneralField() {
           />
         </FFormGroup>
       </Stack>
+
+      <InvoiceCustomizePaymentManage />
     </Stack>
   );
 }
+
+function InvoiceCustomizePaymentManage() {
+  return (
+    <Group
+      style={{
+        backgroundColor: '#FBFBFB',
+        border: '1px solid #E1E1E1',
+        padding: 10,
+        borderRadius: 5,
+      }}
+      position={'apart'}
+    >
+      <Group spacing={10}>
+        <CreditCardIcon fill={'#7D8897'} height={16} width={16} />
+        <Text>Accept payment methods</Text>
+      </Group>
+
+      <a href={'#'}>Manage</a>
+    </Group>
+  );
+}

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

@@ -13,7 +13,7 @@ function InvoiceCustomizePreviewRoot({ closeDrawer }) {
     closeDrawer(name);
   };
   return (
-    <Stack spacing={0} style={{ borderLeft: '1px solid #D9D9D9', height: '100vh' }}>
+    <Stack spacing={0} style={{ borderLeft: '1px solid #D9D9D9', height: '100vh', flex: '1 1' }}>
       <InvoiceCustomizeHeader
         label={'Preview'}
         closeButton

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

@@ -3,7 +3,14 @@ import { PaperTemplate } from './PaperTemplate';
 
 export function InvoiceCustomizePreviewContent() {
   return (
-    <Box style={{ padding: 24, backgroundColor: '#F5F5F5', overflow: 'auto' }}>
+    <Box
+      style={{
+        padding: '28px 24px 40px',
+        backgroundColor: '#F5F5F5',
+        overflow: 'auto',
+        flex: '1'
+      }}
+    >
       <PaperTemplate />
     </Box>
   );

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.module.scss

@@ -2,7 +2,7 @@
 .root {
   flex: 1;
   min-width: 165px;
-  max-width: 185px;
+  max-width: 165px;
 }
 
 .content{

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

@@ -1,11 +1,11 @@
 import { Box, Stack } from '@/components';
 import { Tab, Tabs } from '@blueprintjs/core';
 import { InvoiceCustomizeHeader } from './InvoiceCustomizeHeader';
-import styles from './InvoiceCustomizeTabs.module.scss';
 import {
   InvoiceCustomizeTabsEnum,
   useInvoiceCustomizeTabsController,
 } from './InvoiceCustomizeTabsController';
+import styles from './InvoiceCustomizeTabs.module.scss';
 
 export function InvoiceCustomizeTabs() {
   const { setCurrentTabId } = useInvoiceCustomizeTabsController();

packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.module.scss

@@ -6,6 +6,9 @@
   box-shadow: inset 0 4px 0px 0 #002762, 0 10px 15px rgba(0, 0, 0, 0.05);
   padding: 22px 30px;
   position: relative;
+  margin: 0 auto;
+  width: 794px;
+  height: 1123px;
 }
 
 .bigTitle{