From af5726c48ce853d3139e5edc597ce0629bb9c61d Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Sat, 5 Oct 2024 19:01:34 +0200
Subject: [PATCH] fix: Pdf templates layout

---
 .../src/components/Layout/Group/Group.tsx     |  4 ++
 .../src/components/Layout/Stack/Stack.tsx     |  4 ++
 .../CreditNotePaperTemplate.tsx               | 49 +++++++++-------
 .../EstimatePaperTemplate.tsx                 | 56 +++++++++++--------
 .../InvoicePaperTemplate.module.scss          | 26 ++-------
 .../InvoiceCustomize/InvoicePaperTemplate.tsx | 52 +++++++++--------
 .../InvoiceCustomize/PaperTemplate.tsx        | 40 ++++++-------
 .../PaymentReceivedPaperTemplate.tsx          | 49 +++++++++-------
 .../ReceiptCustomize/ReceiptPaperTemplate.tsx | 49 +++++++++-------
 9 files changed, 184 insertions(+), 145 deletions(-)

diff --git a/packages/webapp/src/components/Layout/Group/Group.tsx b/packages/webapp/src/components/Layout/Group/Group.tsx
index 3a7573d27..ee0174598 100644
--- a/packages/webapp/src/components/Layout/Group/Group.tsx
+++ b/packages/webapp/src/components/Layout/Group/Group.tsx
@@ -27,11 +27,14 @@ export interface GroupProps extends React.ComponentPropsWithoutRef<'div'> {
 
   /** Defines align-items css property */
   align?: React.CSSProperties['alignItems'];
+
+  flex?: React.CSSProperties['flex'];
 }
 
 const defaultProps: Partial<GroupProps> = {
   position: 'left',
   spacing: 20,
+  flex: 'none'
 };
 
 export function Group({ children, ...props }: GroupProps) {
@@ -48,6 +51,7 @@ const GroupStyled = styled(Box)`
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
+  flex: ${(props: GroupProps) => (props.flex)};
   align-items: ${(props: GroupProps) => (props.align || 'center')};
   flex-wrap: ${(props: GroupProps) => (props.noWrap ? 'nowrap' : 'wrap')};
   justify-content: ${(props: GroupProps) =>
diff --git a/packages/webapp/src/components/Layout/Stack/Stack.tsx b/packages/webapp/src/components/Layout/Stack/Stack.tsx
index d5960ac1f..3ca710402 100644
--- a/packages/webapp/src/components/Layout/Stack/Stack.tsx
+++ b/packages/webapp/src/components/Layout/Stack/Stack.tsx
@@ -11,12 +11,15 @@ export interface StackProps extends React.ComponentPropsWithoutRef<'div'> {
 
   /** justify-content CSS property */
   justify?: React.CSSProperties['justifyContent'];
+
+  flex?: React.CSSProperties['flex'];
 }
 
 const defaultProps: Partial<StackProps> = {
   spacing: 20,
   align: 'stretch',
   justify: 'top',
+  flex: 'none',
 };
 
 export function Stack(props: StackProps) {
@@ -33,4 +36,5 @@ const StackStyled = styled(Box)`
   align-items: ${(props: StackProps) => props.align};
   justify-content: justify;
   gap: ${(props: StackProps) => props.spacing}px;
+  flex: ${(props: StackProps) => props.flex};
 `;
diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx
index f19a1fd54..54d0eba59 100644
--- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNotePaperTemplate.tsx
@@ -1,4 +1,4 @@
-import { Box, Stack } from '@/components';
+import { Box, Group, Stack } from '@/components';
 import {
   PaperTemplate,
   PaperTemplateProps,
@@ -13,6 +13,13 @@ import {
 } from '@/constants/PdfTemplates';
 
 export interface CreditNotePaperTemplateProps extends PaperTemplateProps {
+  // # Company logo
+  showCompanyLogo?: boolean;
+  companyLogoUri?: string;
+
+  // # Company name
+  companyName?: string;
+
   // Address
   showCustomerAddress?: boolean;
   customerAddress?: string;
@@ -122,26 +129,30 @@ export function CreditNotePaperTemplate({
   creditNoteDateLabel = 'Credit Note Date',
 }: CreditNotePaperTemplateProps) {
   return (
-    <PaperTemplate
-      primaryColor={primaryColor}
-      secondaryColor={secondaryColor}
-      showCompanyLogo={showCompanyLogo}
-      companyLogoUri={companyLogoUri}
-      bigtitle={'Credit Note'}
-    >
+    <PaperTemplate primaryColor={primaryColor} secondaryColor={secondaryColor}>
       <Stack spacing={24}>
-        <PaperTemplate.TermsList>
-          {showCreditNoteNumber && (
-            <PaperTemplate.TermsItem label={creditNoteNumberLabel}>
-              {creditNoteNumebr}
-            </PaperTemplate.TermsItem>
+        <Group align={'start'} spacing={10}>
+          <Stack flex={1}>
+            <PaperTemplate.BigTitle title={'Credit Note'} />
+
+            <PaperTemplate.TermsList>
+              {showCreditNoteNumber && (
+                <PaperTemplate.TermsItem label={creditNoteNumberLabel}>
+                  {creditNoteNumebr}
+                </PaperTemplate.TermsItem>
+              )}
+              {showCreditNoteDate && (
+                <PaperTemplate.TermsItem label={creditNoteDateLabel}>
+                  {creditNoteDate}
+                </PaperTemplate.TermsItem>
+              )}
+            </PaperTemplate.TermsList>
+          </Stack>
+
+          {companyLogoUri && showCompanyLogo && (
+            <PaperTemplate.Logo logoUri={companyLogoUri} />
           )}
-          {showCreditNoteDate && (
-            <PaperTemplate.TermsItem label={creditNoteDateLabel}>
-              {creditNoteDate}
-            </PaperTemplate.TermsItem>
-          )}
-        </PaperTemplate.TermsList>
+        </Group>
 
         <PaperTemplate.AddressesGroup>
           {showCompanyAddress && (
diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx
index af1bb9d11..adfda72c3 100644
--- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimatePaperTemplate.tsx
@@ -1,4 +1,4 @@
-import { Box, Stack } from '@/components';
+import { Box, Group, Stack } from '@/components';
 import {
   PaperTemplate,
   PaperTemplateProps,
@@ -13,6 +13,10 @@ import {
 } from '@/constants/PdfTemplates';
 
 export interface EstimatePaperTemplateProps extends PaperTemplateProps {
+  // # Company
+  showCompanyLogo?: boolean;
+  companyLogoUri?: string;
+
   // # Estimate number
   estimateNumebr?: string;
   estimateNumberLabel?: string;
@@ -132,31 +136,35 @@ export function EstimatePaperTemplate({
   expirationDate = 'September 3, 2024',
 }: EstimatePaperTemplateProps) {
   return (
-    <PaperTemplate
-      primaryColor={primaryColor}
-      secondaryColor={secondaryColor}
-      showCompanyLogo={showCompanyLogo}
-      companyLogoUri={companyLogoUri}
-      bigtitle={'Estimate'}
-    >
+    <PaperTemplate primaryColor={primaryColor} secondaryColor={secondaryColor}>
       <Stack spacing={24}>
-        <PaperTemplate.TermsList>
-          {showEstimateNumber && (
-            <PaperTemplate.TermsItem label={estimateNumberLabel}>
-              {estimateNumebr}
-            </PaperTemplate.TermsItem>
+        <Group align={'start'} spacing={10}>
+          <Stack flex={1}>
+            <PaperTemplate.BigTitle title={'Estimate'} />
+
+            <PaperTemplate.TermsList>
+              {showEstimateNumber && (
+                <PaperTemplate.TermsItem label={estimateNumberLabel}>
+                  {estimateNumebr}
+                </PaperTemplate.TermsItem>
+              )}
+              {showEstimateDate && (
+                <PaperTemplate.TermsItem label={estimateDateLabel}>
+                  {estimateDate}
+                </PaperTemplate.TermsItem>
+              )}
+              {showExpirationDate && (
+                <PaperTemplate.TermsItem label={expirationDateLabel}>
+                  {expirationDate}
+                </PaperTemplate.TermsItem>
+              )}
+            </PaperTemplate.TermsList>
+          </Stack>
+
+          {companyLogoUri && showCompanyLogo && (
+            <PaperTemplate.Logo logoUri={companyLogoUri} />
           )}
-          {showEstimateDate && (
-            <PaperTemplate.TermsItem label={estimateDateLabel}>
-              {estimateDate}
-            </PaperTemplate.TermsItem>
-          )}
-          {showExpirationDate && (
-            <PaperTemplate.TermsItem label={expirationDateLabel}>
-              {expirationDate}
-            </PaperTemplate.TermsItem>
-          )}
-        </PaperTemplate.TermsList>
+        </Group>
 
         <PaperTemplate.AddressesGroup>
           {showCompanyAddress && (
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.module.scss b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.module.scss
index 8603e6fb7..65f292f7d 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.module.scss
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.module.scss
@@ -11,16 +11,13 @@
   width: 794px;
   height: 1123px;
 }
-
 .bigTitle{
   font-size: 60px;
   margin: 0;
   line-height: 1;
-  margin-bottom: 25px;
   font-weight: 500;
   color: #333;
 }
-
 .details {
   display: flex;
   flex-direction: column;
@@ -35,13 +32,11 @@
   min-width: 120px;
   color: #333;
 }
-
 .addressRoot{
   > div{
     flex: 1;
   }
 }
-
 .table {
   width: 100%;
   border-collapse: collapse;
@@ -66,10 +61,6 @@
   }
 
   tbody{
-
-    tr {
-
-    }
     td{
       border-bottom: 1px solid #F6F6F6;
       padding: 12px 10px;
@@ -80,7 +71,6 @@
       &:last-of-type{
         padding-right: 0;
       }
-
       &.rate,
       &.total{
         text-align: right;
@@ -88,7 +78,6 @@
     }
   }
 }
-
 .totals{
   display: flex;
   flex-direction: column;
@@ -112,25 +101,22 @@
 .totalBottomGrayBordered {
   border-bottom: 1px solid #DADADA;
 }
-
 .logoWrap{
-  height: 120px;
-  width: 120px;
-  position: absolute;
-  right: 26px;
-  top: 26px;
-  border-radius: 5px;
   overflow: hidden;
 
   img{
     max-width: 100%;
   }
 }
-
+.logoImg {
+  height: auto;
+  width: auto;
+  max-width: 400px;
+  max-height: 160px;
+}
 .footer{
 
 }
-
 .paragraph{
   margin-bottom: 20px;  
 }
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx
index 19b80a64b..3e646f0a9 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { PaperTemplate, PaperTemplateTotalBorder } from './PaperTemplate';
-import { Box, Stack } from '@/components';
+import { Box, Group, Stack } from '@/components';
 import {
   DefaultPdfTemplateTerms,
   DefaultPdfTemplateItemDescription,
@@ -178,31 +178,35 @@ export function InvoicePaperTemplate({
   statement = DefaultPdfTemplateStatement,
 }: InvoicePaperTemplateProps) {
   return (
-    <PaperTemplate
-      primaryColor={primaryColor}
-      secondaryColor={secondaryColor}
-      showCompanyLogo={showCompanyLogo}
-      companyLogoUri={companyLogoUri}
-      bigtitle={'Invoice'}
-    >
+    <PaperTemplate primaryColor={primaryColor} secondaryColor={secondaryColor}>
       <Stack spacing={24}>
-        <PaperTemplate.TermsList>
-          {showInvoiceNumber && (
-            <PaperTemplate.TermsItem label={invoiceNumberLabel}>
-              {invoiceNumber}
-            </PaperTemplate.TermsItem>
+        <Group align="start" spacing={10}>
+          <Stack flex={1}>
+            <PaperTemplate.BigTitle title={'Invoice'} />
+
+            <PaperTemplate.TermsList>
+              {showInvoiceNumber && (
+                <PaperTemplate.TermsItem label={invoiceNumberLabel}>
+                  {invoiceNumber}
+                </PaperTemplate.TermsItem>
+              )}
+              {showDateIssue && (
+                <PaperTemplate.TermsItem label={dateIssueLabel}>
+                  {dateIssue}
+                </PaperTemplate.TermsItem>
+              )}
+              {showDueDate && (
+                <PaperTemplate.TermsItem label={dueDateLabel}>
+                  {dueDate}
+                </PaperTemplate.TermsItem>
+              )}
+            </PaperTemplate.TermsList>
+          </Stack>
+
+          {companyLogoUri && showCompanyLogo && (
+            <PaperTemplate.Logo logoUri={companyLogoUri} />
           )}
-          {showDateIssue && (
-            <PaperTemplate.TermsItem label={dateIssueLabel}>
-              {dateIssue}
-            </PaperTemplate.TermsItem>
-          )}
-          {showDueDate && (
-            <PaperTemplate.TermsItem label={dueDateLabel}>
-              {dueDate}
-            </PaperTemplate.TermsItem>
-          )}
-        </PaperTemplate.TermsList>
+        </Group>
 
         <PaperTemplate.AddressesGroup>
           {showCompanyAddress && (
diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx
index 07ae55d22..0488d496f 100644
--- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx
@@ -7,38 +7,18 @@ import styles from './InvoicePaperTemplate.module.scss';
 export interface PaperTemplateProps {
   primaryColor?: string;
   secondaryColor?: string;
-
-  showCompanyLogo?: boolean;
-  companyLogoUri?: string;
-  companyName?: string;
-
-  bigtitle?: string;
-
   children?: React.ReactNode;
 }
 
 export function PaperTemplate({
   primaryColor,
   secondaryColor,
-  showCompanyLogo,
-  companyLogoUri,
-  bigtitle = 'Invoice',
   children,
 }: PaperTemplateProps) {
   return (
     <div className={styles.root}>
       <style>{`:root { --invoice-primary-color: ${primaryColor}; --invoice-secondary-color: ${secondaryColor}; }`}</style>
 
-      <div>
-        <h1 className={styles.bigTitle}>{bigtitle}</h1>
-
-        {showCompanyLogo && companyLogoUri && (
-          <div className={styles.logoWrap}>
-            <img alt="" src={companyLogoUri} />
-          </div>
-        )}
-      </div>
-
       {children}
     </div>
   );
@@ -53,6 +33,26 @@ interface PaperTemplateTableProps {
   data: Array<Record<string, any>>;
 }
 
+interface PaperTemplateBigTitleProps {
+  title: string;
+}
+
+PaperTemplate.BigTitle = ({ title }: PaperTemplateBigTitleProps) => {
+  return <h1 className={styles.bigTitle}>{title}</h1>;
+};
+
+interface PaperTemplateLogoProps {
+  logoUri: string;
+}
+
+PaperTemplate.Logo = ({ logoUri }: PaperTemplateLogoProps) => {
+  return (
+    <div className={styles.logoWrap}>
+      <img className={styles.logoImg} alt="" src={logoUri} />
+    </div>
+  );
+};
+
 PaperTemplate.Table = ({ columns, data }: PaperTemplateTableProps) => {
   return (
     <table className={styles.table}>
diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx
index 3ef62ed7f..e0030150c 100644
--- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedPaperTemplate.tsx
@@ -1,4 +1,4 @@
-import { Box, Stack } from '@/components';
+import { Box, Group, Stack } from '@/components';
 import {
   PaperTemplate,
   PaperTemplateProps,
@@ -10,6 +10,13 @@ import {
 } from '@/constants/PdfTemplates';
 
 export interface PaymentReceivedPaperTemplateProps extends PaperTemplateProps {
+  // # Company logo
+  showCompanyLogo?: boolean;
+  companyLogoUri?: string;
+
+  // # Company name
+  companyName?: string;
+
   // Customer address
   showCustomerAddress?: boolean;
   customerAddress?: string;
@@ -93,27 +100,31 @@ export function PaymentReceivedPaperTemplate({
   paymentReceivedDateLabel = 'Payment Date',
 }: PaymentReceivedPaperTemplateProps) {
   return (
-    <PaperTemplate
-      primaryColor={primaryColor}
-      secondaryColor={secondaryColor}
-      showCompanyLogo={showCompanyLogo}
-      companyLogoUri={companyLogoUri}
-      bigtitle={'Payment'}
-    >
+    <PaperTemplate primaryColor={primaryColor} secondaryColor={secondaryColor}>
       <Stack spacing={24}>
-        <PaperTemplate.TermsList>
-          {showPaymentReceivedNumber && (
-            <PaperTemplate.TermsItem label={paymentReceivedNumberLabel}>
-              {paymentReceivedNumebr}
-            </PaperTemplate.TermsItem>
-          )}
+        <Group align={'start'} spacing={10}>
+          <Stack flex={1}>
+            <PaperTemplate.BigTitle title={'Payment'} />
 
-          {showPaymentReceivedDate && (
-            <PaperTemplate.TermsItem label={paymentReceivedDateLabel}>
-              {paymentReceivedDate}
-            </PaperTemplate.TermsItem>
+            <PaperTemplate.TermsList>
+              {showPaymentReceivedNumber && (
+                <PaperTemplate.TermsItem label={paymentReceivedNumberLabel}>
+                  {paymentReceivedNumebr}
+                </PaperTemplate.TermsItem>
+              )}
+
+              {showPaymentReceivedDate && (
+                <PaperTemplate.TermsItem label={paymentReceivedDateLabel}>
+                  {paymentReceivedDate}
+                </PaperTemplate.TermsItem>
+              )}
+            </PaperTemplate.TermsList>
+          </Stack>
+
+          {companyLogoUri && showCompanyLogo && (
+            <PaperTemplate.Logo logoUri={companyLogoUri} />
           )}
-        </PaperTemplate.TermsList>
+        </Group>
 
         <PaperTemplate.AddressesGroup>
           {showCompanyAddress && (
diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx
index 30bb31c1e..9dd66180c 100644
--- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx
+++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptPaperTemplate.tsx
@@ -1,4 +1,4 @@
-import { Box, Stack } from '@/components';
+import { Box, Group, Stack } from '@/components';
 import {
   PaperTemplate,
   PaperTemplateProps,
@@ -13,6 +13,13 @@ import {
 } from '@/constants/PdfTemplates';
 
 export interface ReceiptPaperTemplateProps extends PaperTemplateProps {
+  // # Company logo
+  showCompanyLogo?: boolean;
+  companyLogoUri?: string;
+
+  // # Company name
+  companyName?: string;
+
   // Addresses
   showCustomerAddress?: boolean;
   customerAddress?: string;
@@ -117,26 +124,30 @@ export function ReceiptPaperTemplate({
   receiptDateLabel = 'Receipt Date',
 }: ReceiptPaperTemplateProps) {
   return (
-    <PaperTemplate
-      primaryColor={primaryColor}
-      secondaryColor={secondaryColor}
-      showCompanyLogo={showCompanyLogo}
-      companyLogoUri={companyLogoUri}
-      bigtitle={'Receipt'}
-    >
+    <PaperTemplate primaryColor={primaryColor} secondaryColor={secondaryColor}>
       <Stack spacing={24}>
-        <PaperTemplate.TermsList>
-          {showReceiptNumber && (
-            <PaperTemplate.TermsItem label={receiptNumberLabel}>
-              {receiptNumebr}
-            </PaperTemplate.TermsItem>
+        <Group align={'start'} spacing={10}>
+          <Stack flex={1}>
+            <PaperTemplate.BigTitle title={'Receipt'} />
+
+            <PaperTemplate.TermsList>
+              {showReceiptNumber && (
+                <PaperTemplate.TermsItem label={receiptNumberLabel}>
+                  {receiptNumebr}
+                </PaperTemplate.TermsItem>
+              )}
+              {showReceiptDate && (
+                <PaperTemplate.TermsItem label={receiptDateLabel}>
+                  {receiptDate}
+                </PaperTemplate.TermsItem>
+              )}
+            </PaperTemplate.TermsList>
+          </Stack>
+
+          {companyLogoUri && showCompanyLogo && (
+            <PaperTemplate.Logo logoUri={companyLogoUri} />
           )}
-          {showReceiptDate && (
-            <PaperTemplate.TermsItem label={receiptDateLabel}>
-              {receiptDate}
-            </PaperTemplate.TermsItem>
-          )}
-        </PaperTemplate.TermsList>
+        </Group>
 
         <PaperTemplate.AddressesGroup>
           {showCompanyAddress && (