feat: wip send invoice preview

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

@@ -1,5 +1,9 @@
 import { Classes, Text } from '@blueprintjs/core';
-import { PaperTemplate, PaperTemplateTotalBorder } from './PaperTemplate';
+import {
+  PaperTemplate,
+  PaperTemplateProps,
+  PaperTemplateTotalBorder,
+} from './PaperTemplate';
 import { Box, Group, Stack } from '@/components';
 import {
   DefaultPdfTemplateTerms,
@@ -23,7 +27,7 @@ interface PaperTax {
   amount: string;
 }
 
-export interface InvoicePaperTemplateProps {
+export interface InvoicePaperTemplateProps extends PaperTemplateProps {
   primaryColor?: string;
   secondaryColor?: string;
 
@@ -177,9 +181,14 @@ export function InvoicePaperTemplate({
   statementLabel = 'Statement',
   showStatement = true,
   statement = DefaultPdfTemplateStatement,
+  ...props
 }: InvoicePaperTemplateProps) {
   return (
-    <PaperTemplate primaryColor={primaryColor} secondaryColor={secondaryColor}>
+    <PaperTemplate
+      primaryColor={primaryColor}
+      secondaryColor={secondaryColor}
+      {...props}
+    >
       <Stack spacing={24}>
         <Group align="start" spacing={10}>
           <Stack flex={1}>

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import clsx from 'classnames';
 import { get, isFunction } from 'lodash';
-import { Box, Group, GroupProps } from '@/components';
+import { Box, BoxProps, Group, GroupProps } from '@/components';
 import styles from './InvoicePaperTemplate.module.scss';
 
-export interface PaperTemplateProps {
+export interface PaperTemplateProps extends BoxProps {
   primaryColor?: string;
   secondaryColor?: string;
   children?: React.ReactNode;
@@ -14,13 +14,13 @@ export function PaperTemplate({
   primaryColor,
   secondaryColor,
   children,
+  ...restProps
 }: PaperTemplateProps) {
   return (
-    <div className={styles.root}>
+    <Box {...restProps} className={clsx(styles.root, restProps?.className)}>
       <style>{`:root { --invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor}; }`}</style>
-
       {children}
-    </div>
+    </Box>
   );
 }
 
@@ -118,9 +118,9 @@ PaperTemplate.TotalLine = ({
   );
 };
 
-PaperTemplate.MutedText = () => { };
+PaperTemplate.MutedText = () => {};
 
-PaperTemplate.Text = () => { };
+PaperTemplate.Text = () => {};
 
 PaperTemplate.AddressesGroup = (props: GroupProps) => {
   return (