QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 05:10:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: style tweaks in the public payment page

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-09-19 11:28:40 +02:00
parent 2ebb4595a8
commit 809973730f
5 changed files with 98 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/webapp/src/containers/PaymentPortal/PaymentPortal.module.scss
View File

@@ -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;
}

120
packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx
View File

@@ -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>

4
packages/webapp/src/containers/PaymentPortal/PaymentPortalBoot.tsx
View File

@@ -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}>

12
packages/webapp/src/containers/PaymentPortal/PaymentPortalPage.tsx
View File

@@ -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>
);
}