feat: wip invoice mail receipt preview

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;