feat: wip invoice mail receipt preview

packages/webapp/src/containers/ElementCustomize/ElementCustomizePreviewContent.tsx

@@ -1,20 +1,12 @@
-import { Box } from '@/components';
+import { Box, Stack } from '@/components';
 import { useElementCustomizeContext } from './ElementCustomizeProvider';
 
 export function ElementCustomizePreviewContent() {
   const { PaperTemplate } = useElementCustomizeContext();
 
   return (
-    <Box
-      style={{
-        // padding: '28px 24px 40px',
-        // backgroundColor: '#F5F5F5',
-        // overflow: 'auto',
-        // flex: '1',
-      }}
-    >
+    <Stack backgroundColor="#F5F5F5" overflow="auto" flex="1 1 0%" spacing={0}>
       {PaperTemplate}
-    </Box>
+    </Stack>
   );
 }
-

packages/webapp/src/containers/PaymentPortal/PaymentPage.tsx

@@ -1,8 +1,9 @@
 import { Text, Classes, Button, Intent, ButtonProps } from '@blueprintjs/core';
 import clsx from 'classnames';
+import { css } from '@emotion/css';
+import { lighten } from 'polished';
 import { Box, Group, Stack } from '@/components';
 import styles from './PaymentPortal.module.scss';
-import { css } from '@emotion/css';
 
 export interface PaymentPageProps {
   // # Company name
@@ -58,6 +59,8 @@ export interface PaymentPageProps {
 
   // # Copyright
   copyrightText?: string;
+
+  classNames?: Record<string, string>
 }
 
 export function InvoicePaymentPage({
@@ -67,7 +70,7 @@ export function InvoicePaymentPage({
   organizationAddress,
 
   // # Colors
-  primaryColor,
+  primaryColor = 'rgb(0, 82, 204)',
 
   // # Customer
   customerName,
@@ -114,9 +117,11 @@ export function InvoicePaymentPage({
 
   // # Copyright
   copyrightText = `© 2024 Bigcapital Technology, Inc. <br /> All rights reserved.`,
+
+  classNames,
 }: PaymentPageProps) {
   return (
-    <Box className={styles.root}>
+    <Box className={clsx(styles.root, classNames?.root)}>
       <Stack spacing={0} className={styles.body}>
         <Stack>
           <Group spacing={10}>
@@ -217,6 +222,11 @@ export function InvoicePaymentPage({
                 css`
                   &.bp4-intent-primary {
                     background-color: ${primaryColor};
+
+                    &:hover,
+                    &:focus {
+                      background-color: ${lighten(0.1, primaryColor)};
+                    }
                   }
                 `,
               )}

packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss

@@ -7,7 +7,7 @@
   border-radius: 10px;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
   width: 600px;
-  margin: 40px auto;
+  // margin: 40px auto;
   color: #222;
   background-color: #fff;
 }

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

@@ -4,6 +4,7 @@ import { InvoiceCustomizeFormValues } from './types';
 import { useElementCustomizeContext } from '@/containers/ElementCustomize/ElementCustomizeProvider';
 import { useFormikContext } from 'formik';
 import { InvoiceMailReceiptPreview } from './InvoiceMailReceiptPreview';
+import { Box } from '@/components';
 
 const withInvoiceMailReceiptPreviewConnected = <P extends Object>(
   Component: React.ComponentType<P>,
@@ -21,7 +22,11 @@ const withInvoiceMailReceiptPreviewConnected = <P extends Object>(
       primaryColor: mergedBrandingState?.primaryColor,
       // organizationAddress: mergedBrandingState,
     };
-    return <Component {...(props as P)} {...mergedProps} />;
+    return (
+      <Box px={4} py={8}>
+        <Component {...(props as P)} {...mergedProps} />
+      </Box>
+    );
   };
 };
 

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

@@ -1,11 +1,14 @@
 import * as R from 'ramda';
 import { useFormikContext } from 'formik';
+import { css } from '@emotion/css';
 import {
   InvoicePaymentPagePreview,
   InvoicePaymentPagePreviewProps,
 } from '@/containers/PaymentPortal/InvoicePaymentPagePreview';
 import { useElementCustomizeContext } from '@/containers/ElementCustomize/ElementCustomizeProvider';
 import { InvoiceCustomizeFormValues } from './types';
+import { Box } from '@/components';
+
 
 const withInvoicePaymentPreviewPageProps = <P extends Object>(
   Component: React.ComponentType<P>,
@@ -22,7 +25,19 @@ const withInvoicePaymentPreviewPageProps = <P extends Object>(
       companyLogoUri: mergedBrandingState?.companyLogoUri,
       primaryColor: mergedBrandingState?.primaryColor,
     };
-    return <Component {...(props as P)} {...mergedProps} />;
+    return (
+      <Box px={4} py={8}>
+        <Component
+          {...(props as P)}
+          {...mergedProps}
+          classNames={{
+            root: css`
+              margin: 0 auto;
+            `,
+          }}
+        />
+      </Box>
+    );
   };
 };
 

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

@@ -6,10 +6,11 @@ import {
 } from './InvoicePaperTemplate';
 import { useElementCustomizeContext } from '@/containers/ElementCustomize/ElementCustomizeProvider';
 import { InvoiceCustomizeFormValues } from './types';
+import { Box } from '@/components';
 
 /**
  * Injects the `InvoicePaperTemplate` component props from the form and branding states.
- * @param Component
+ * @param {React.ComponentType<P>} Component
  * @returns {JSX.Element}
  */
 const withInvoicePreviewTemplateProps = <P extends object>(
@@ -23,7 +24,11 @@ const withInvoicePreviewTemplateProps = <P extends object>(
       ...brandingState,
       ...values,
     };
-    return <Component {...(props as P)} {...mergedProps} />;
+    return (
+      <Box px={4} py={6}>
+        <Component {...(props as P)} {...mergedProps} />
+      </Box>
+    );
   };
 };
 

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

@@ -1,12 +1,17 @@
 import { css } from '@emotion/css';
 import { Tabs, TabsProps } from '@blueprintjs/core';
 
-interface InvoiceCustomizeTabsProps extends TabsProps { }
+interface InvoiceCustomizeTabsProps extends TabsProps {}
 
 export function InvoiceCustomizeTabs(props: InvoiceCustomizeTabsProps) {
   return (
     <Tabs
       className={css`
+        overflow: hidden;
+        flex: 1 1;
+        display: flex;
+        flex-direction: column;
+
         .bp4-tab-list {
           padding: 0 20px;
           background: #fff;
@@ -21,6 +26,10 @@ export function InvoiceCustomizeTabs(props: InvoiceCustomizeTabsProps) {
         .bp4-tab-indicator-wrapper .bp4-tab-indicator {
           height: 2px;
         }
+        .bp4-tab-panel{
+          margin: 0;
+          overflow: auto;
+        }
       `}
       {...props}
     />

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

@@ -1,6 +1,7 @@
 import { Button, Intent } from '@blueprintjs/core';
 import { css } from '@emotion/css';
 import { x } from '@xstyled/emotion';
+import { lighten } from 'polished';
 import { Group, Stack, StackProps } from '@/components';
 
 export interface InvoiceMailReceiptProps extends StackProps {
@@ -9,7 +10,7 @@ export interface InvoiceMailReceiptProps extends StackProps {
   companyLogoUri?: string;
 
   // # Colors
-  primaryColor?: string,
+  primaryColor?: string;
 
   // # Due date
   dueDate: string;
@@ -45,7 +46,7 @@ export function InvoiceMailReceipt({
   companyLogoUri,
 
   // # Colors
-  primaryColor,
+  primaryColor = 'rgb(0, 82, 204)',
 
   // Due date
   dueDate,
@@ -126,8 +127,13 @@ export function InvoiceMailReceipt({
           large
           intent={Intent.PRIMARY}
           className={css`
-            &.bp4-intent-primary{
+            &.bp4-intent-primary {
               background-color: ${primaryColor};
+
+              &:hover,
+              &:focus {
+                background-color: ${lighten(0.1, primaryColor)};
+              }
             }
             &.bp4-large {
               min-height: 38px;