From 809973730f3a6dd22dfa71da97ac219a202f665d Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Thu, 19 Sep 2024 11:28:40 +0200
Subject: [PATCH] feat: style tweaks in the public payment page

---
 .../services/Sales/JournalPosterService.ts    |   2 +-
 .../PaymentPortal/PaymentPortal.module.scss   |  32 +++--
 .../PaymentPortal/PaymentPortal.tsx           | 120 +++++++++---------
 .../PaymentPortal/PaymentPortalBoot.tsx       |   4 +
 .../PaymentPortal/PaymentPortalPage.tsx       |  12 +-
 5 files changed, 98 insertions(+), 72 deletions(-)

diff --git a/packages/server/src/services/Sales/JournalPosterService.ts b/packages/server/src/services/Sales/JournalPosterService.ts
index 9b4c9d104..c688ced2a 100644
--- a/packages/server/src/services/Sales/JournalPosterService.ts
+++ b/packages/server/src/services/Sales/JournalPosterService.ts
@@ -1,8 +1,8 @@
+import { Knex } from 'knex';
 import { Service, Inject } from 'typedi';
 import JournalPoster from '@/services/Accounting/JournalPoster';
 import TenancyService from '@/services/Tenancy/TenancyService';
 import JournalCommands from '@/services/Accounting/JournalCommands';
-import Knex from 'knex';
 
 @Service()
 export default class JournalPosterService {
diff --git a/packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss b/packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss
index 6baf62ae9..677a0f485 100644
--- a/packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss
+++ b/packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss
@@ -3,23 +3,31 @@
   height: 50px;
   width :50px;
   border-radius: 50px;
-  background-color: #fff;
-  background: #dfdfdf;
+  background-color: #dfdfdf;
+  background-image: url('https://pbs.twimg.com/profile_images/1381635804397703182/x5chIdsO_400x400.png');
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  border: 1px solid #e8e8e8;
+}
+
+.rootBodyPage {
+  background: #181a30;
 }
 
 .root {
-  border-radius: 8px;
+  border-radius: 10px;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
   width: 600px;
   margin: 40px auto;
-  color: #000;
+  color: #222;
   background-color: #fff;
 }
 
 .bigTitle{
   margin: 0;
   font-weight: 500;
-  color: #111;
+  color: #222;
   font-size: 26px;
 }
 
@@ -28,16 +36,17 @@
 }
 
 .invoiceNumber {
-  font-size: 18px;
+  font-size: 16px;
   color: #333;
+  font-weight: 600;
 }
 
 .body {
-  padding: 30px;
+  padding: 30px 26px;
 }
 
 .footer{
-  padding: 20px 30px;
+  padding: 20px 26px;
   background-color: #FAFAFA;
   border-top: 1px solid #DCE0E5;
   border-radius: 0 0 8px 8px;
@@ -50,7 +59,7 @@
   font-weight: 600;
 }
 .totals {
-
+  color: #000;
 }
 
 .totalItem {
@@ -64,6 +73,10 @@
   }
 }
 
+.footerButtons{
+  margin-top: 20px;
+}
+
 .footerButton{
   height: 40px;
   line-height: 40px;
@@ -84,5 +97,6 @@
 }
 
 .buyNote{
+  margin-top: 16px;
   font-size: 12px;
 }
\ No newline at end of file
diff --git a/packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx b/packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx
index 650bb8136..aca789007 100644
--- a/packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx
+++ b/packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx
@@ -9,71 +9,75 @@ export function PaymentPortal() {
 
   return (
     <Box className={styles.root}>
-      <Stack className={styles.body}>
-        <Group spacing={8}>
-          <Box className={styles.companyLogoWrap}></Box>
-          <Text>{sharableLinkMeta?.companyName}</Text>
-        </Group>
-
-        <Stack spacing={6}>
-          <h1 className={styles.bigTitle}>
-            {sharableLinkMeta?.companyName} Sent an Invoice for{' '}
-            {sharableLinkMeta?.totalFormatted}
-          </h1>
-          <Text className={clsx(Classes.TEXT_MUTED, styles.invoiceDueDate)}>
-            Invoice due {sharableLinkMeta?.dueDateFormatted}
-          </Text>
-        </Stack>
-
-        <Stack spacing={2}>
-          <Box className={styles.customerName}>{sharableLinkMeta?.customerName}</Box>
-          <Box>Bigcapital Technology, Inc.</Box>
-          <Box>131 Continental Dr Suite 305 Newark,</Box>
-          <Box>Delaware 19713</Box>
-          <Box>United States</Box>
-          <Box>ahmed@bigcapital.app</Box>
-        </Stack>
-
-        <h2 className={styles.invoiceNumber}>
-          Invoice {sharableLinkMeta?.invoiceNo}
-        </h2>
-
-        <Stack spacing={0} className={styles.totals}>
-          <Group
-            position={'apart'}
-            className={clsx(styles.totalItem, styles.borderBottomGray)}
-          >
-            <Text>Sub Total</Text>
-            <Text>{sharableLinkMeta?.subtotalFormatted}</Text>
+      <Stack spacing={0} className={styles.body}>
+        <Stack>
+          <Group spacing={10}>
+            <Box className={styles.companyLogoWrap}></Box>
+            <Text>{sharableLinkMeta?.companyName}</Text>
           </Group>
 
-          <Group position={'apart'} className={styles.totalItem}>
-            <Text>Total</Text>
-            <Text style={{ fontWeight: 600 }}>
+          <Stack spacing={6}>
+            <h1 className={styles.bigTitle}>
+              {sharableLinkMeta?.companyName} Sent an Invoice for{' '}
               {sharableLinkMeta?.totalFormatted}
+            </h1>
+            <Text className={clsx(Classes.TEXT_MUTED, styles.invoiceDueDate)}>
+              Invoice due {sharableLinkMeta?.dueDateFormatted}
             </Text>
-          </Group>
+          </Stack>
 
-          <Group
-            position={'apart'}
-            className={clsx(styles.totalItem, styles.borderBottomDark)}
-          >
-            <Text>Paid Amount (-)</Text>
-            <Text>{sharableLinkMeta?.paymentAmountFormatted}</Text>
-          </Group>
+          <Stack spacing={2}>
+            <Box className={styles.customerName}>
+              {sharableLinkMeta?.customerName}
+            </Box>
+            <Box>Bigcapital Technology, Inc.</Box>
+            <Box>131 Continental Dr Suite 305 Newark,</Box>
+            <Box>Delaware 19713</Box>
+            <Box>United States</Box>
+            <Box>ahmed@bigcapital.app</Box>
+          </Stack>
 
-          <Group
-            position={'apart'}
-            className={clsx(styles.totalItem, styles.borderBottomDark)}
-          >
-            <Text>Due Amount</Text>
-            <Text style={{ fontWeight: 600 }}>
-              {sharableLinkMeta?.dueAmountFormatted}
-            </Text>
-          </Group>
+          <h2 className={styles.invoiceNumber}>
+            Invoice {sharableLinkMeta?.invoiceNo}
+          </h2>
+
+          <Stack spacing={0} className={styles.totals}>
+            <Group
+              position={'apart'}
+              className={clsx(styles.totalItem, styles.borderBottomGray)}
+            >
+              <Text>Sub Total</Text>
+              <Text>{sharableLinkMeta?.subtotalFormatted}</Text>
+            </Group>
+
+            <Group position={'apart'} className={styles.totalItem}>
+              <Text>Total</Text>
+              <Text style={{ fontWeight: 600 }}>
+                {sharableLinkMeta?.totalFormatted}
+              </Text>
+            </Group>
+
+            <Group
+              position={'apart'}
+              className={clsx(styles.totalItem, styles.borderBottomGray)}
+            >
+              <Text>Paid Amount (-)</Text>
+              <Text>{sharableLinkMeta?.paymentAmountFormatted}</Text>
+            </Group>
+
+            <Group
+              position={'apart'}
+              className={clsx(styles.totalItem, styles.borderBottomDark)}
+            >
+              <Text>Due Amount</Text>
+              <Text style={{ fontWeight: 600 }}>
+                {sharableLinkMeta?.dueAmountFormatted}
+              </Text>
+            </Group>
+          </Stack>
         </Stack>
 
-        <Stack spacing={8}>
+        <Stack spacing={8} className={styles.footerButtons}>
           <Button
             minimal
             className={clsx(styles.footerButton, styles.downloadInvoiceButton)}
@@ -100,7 +104,7 @@ export function PaymentPortal() {
         </Text>
       </Stack>
 
-      <Stack className={styles.footer}>
+      <Stack spacing={18} className={styles.footer}>
         <Stack spacing={0}>
           <Box>
             <strong>Bigcapital Technology, Inc.</strong>
diff --git a/packages/webapp/src/containers/PaymentPortal/PaymentPortalBoot.tsx b/packages/webapp/src/containers/PaymentPortal/PaymentPortalBoot.tsx
index 360abcc18..aa7c446a3 100644
--- a/packages/webapp/src/containers/PaymentPortal/PaymentPortalBoot.tsx
+++ b/packages/webapp/src/containers/PaymentPortal/PaymentPortalBoot.tsx
@@ -3,6 +3,7 @@ import {
   GetSharableLinkMetaResponse,
   useGetSharableLinkMeta,
 } from '@/hooks/query/payment-link';
+import { Spinner } from '@blueprintjs/core';
 
 interface PaymentPortalContextType {
   sharableLinkMeta: GetSharableLinkMetaResponse | undefined;
@@ -29,6 +30,9 @@ export const PaymentPortalBoot: React.FC<PaymentPortalBootProps> = ({
     sharableLinkMeta,
     isSharableLinkMetaLoading,
   };
+  if (isSharableLinkMetaLoading) {
+    return <Spinner size={20} />;
+  }
 
   return (
     <PaymentPortalContext.Provider value={value}>
diff --git a/packages/webapp/src/containers/PaymentPortal/PaymentPortalPage.tsx b/packages/webapp/src/containers/PaymentPortal/PaymentPortalPage.tsx
index b671d7137..c76826c84 100644
--- a/packages/webapp/src/containers/PaymentPortal/PaymentPortalPage.tsx
+++ b/packages/webapp/src/containers/PaymentPortal/PaymentPortalPage.tsx
@@ -1,13 +1,17 @@
 import { useParams } from 'react-router-dom';
 import { PaymentPortal } from './PaymentPortal';
 import { PaymentPortalBoot } from './PaymentPortalBoot';
+import BodyClassName from 'react-body-classname';
+import styles from './PaymentPortal.module.scss';
 
 export default function PaymentPortalPage() {
-  const { linkId } = useParams<{ linkId: string}>();
+  const { linkId } = useParams<{ linkId: string }>();
 
   return (
-    <PaymentPortalBoot linkId={linkId}>
-      <PaymentPortal />
-    </PaymentPortalBoot>
+    <BodyClassName className={styles.rootBodyPage}>
+      <PaymentPortalBoot linkId={linkId}>
+        <PaymentPortal />
+      </PaymentPortalBoot>
+    </BodyClassName>
   );
 }