mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-11 10:20:30 +00:00
feat: wip public payment page
This commit is contained in:
Ahmed Bouhuolia
@@ -32,7 +32,9 @@ const RegisterVerify = lazy(
|
||||
const OneClickDemoPage = lazy(
|
||||
() => import('@/containers/OneClickDemo/OneClickDemoPage'),
|
||||
);
|
||||
|
||||
const PaymentPortalPage = lazy(
|
||||
() => import('@/containers/PaymentPortal/PaymentPortalPage'),
|
||||
);
|
||||
/**
|
||||
* App inner.
|
||||
*/
|
||||
@@ -57,6 +59,7 @@ function AppInsider({ history }) {
|
||||
children={<EmailConfirmation />}
|
||||
/>
|
||||
<Route path={'/auth'} children={<AuthenticationPage />} />
|
||||
<Route path={'/payment'} children={<PaymentPortalPage />} />
|
||||
<Route path={'/'} children={<DashboardPrivatePages />} />
|
||||
</Switch>
|
||||
</Router>
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
|
||||
.companyLogoWrap {
|
||||
height: 50px;
|
||||
width :50px;
|
||||
border-radius: 50px;
|
||||
background-color: #fff;
|
||||
background: #dfdfdf;
|
||||
}
|
||||
|
||||
.root {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
|
||||
width: 600px;
|
||||
margin: 40px auto;
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.bigTitle{
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
color: #111;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
.invoiceDueDate{
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.invoiceNumber {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.body {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.footer{
|
||||
padding: 20px 30px;
|
||||
background-color: #FAFAFA;
|
||||
border-top: 1px solid #DCE0E5;
|
||||
border-radius: 0 0 8px 8px;
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.customerName{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.totals {
|
||||
|
||||
}
|
||||
|
||||
.totalItem {
|
||||
padding: 6px 0;
|
||||
|
||||
&.borderBottomGray {
|
||||
border-bottom: 1px solid #DADADA;
|
||||
}
|
||||
&.borderBottomDark{
|
||||
border-bottom: 1px solid #000;
|
||||
}
|
||||
}
|
||||
|
||||
.footerButton{
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.downloadInvoiceButton:global(.bp4-button.bp4-minimal){
|
||||
box-shadow: 0 0 0 1px #DCE0E5;
|
||||
}
|
||||
.viewInvoiceButton:global(.bp4-button:not([class*=bp4-intent-]):not(.bp4-minimal)){
|
||||
background-color: #EDEFF2;
|
||||
}
|
||||
.buyButton{
|
||||
|
||||
}
|
||||
|
||||
.footerText{
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.buyNote{
|
||||
font-size: 12px;
|
||||
}
|
||||
112
packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx
Normal file
112
packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
import { Text, Classes, Button, Intent } from '@blueprintjs/core';
|
||||
import clsx from 'classnames';
|
||||
import { Box, Group, Stack } from '@/components';
|
||||
import styles from './PaymentPortal.module.scss';
|
||||
|
||||
export function PaymentPortal() {
|
||||
return (
|
||||
<Box className={styles.root}>
|
||||
<Stack className={styles.body}>
|
||||
<Group spacing={8}>
|
||||
<Box className={styles.companyLogoWrap}></Box>
|
||||
<Text>Bigcapital Technology, Inc.</Text>
|
||||
</Group>
|
||||
|
||||
<Stack spacing={6}>
|
||||
<h1 className={styles.bigTitle}>
|
||||
Bigcapital Technology, Inc. Sent an Invoice for $1000.00
|
||||
</h1>
|
||||
<Text className={clsx(Classes.TEXT_MUTED, styles.invoiceDueDate)}>
|
||||
Invoice due September 13, 2024
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Stack spacing={2}>
|
||||
<Box className={styles.customerName}>Ahmed Bouhuolia</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 INV-000001</h2>
|
||||
|
||||
<Stack spacing={0} className={styles.totals}>
|
||||
<Group
|
||||
position={'apart'}
|
||||
className={clsx(styles.totalItem, styles.borderBottomGray)}
|
||||
>
|
||||
<Text>Sub Total</Text>
|
||||
<Text>11.00</Text>
|
||||
</Group>
|
||||
|
||||
<Group position={'apart'} className={styles.totalItem}>
|
||||
<Text>Total</Text>
|
||||
<Text style={{ fontWeight: 600 }}>11.00</Text>
|
||||
</Group>
|
||||
|
||||
<Group
|
||||
position={'apart'}
|
||||
className={clsx(styles.totalItem, styles.borderBottomDark)}
|
||||
>
|
||||
<Text>Paid Amount (-)</Text>
|
||||
<Text>11.00</Text>
|
||||
</Group>
|
||||
|
||||
<Group
|
||||
position={'apart'}
|
||||
className={clsx(styles.totalItem, styles.borderBottomDark)}
|
||||
>
|
||||
<Text>Due Amount</Text>
|
||||
<Text style={{ fontWeight: 600 }}>11.00</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
|
||||
<Stack spacing={8}>
|
||||
<Button
|
||||
minimal
|
||||
className={clsx(styles.footerButton, styles.downloadInvoiceButton)}
|
||||
>
|
||||
Download Invoice
|
||||
</Button>
|
||||
<Button
|
||||
className={clsx(styles.footerButton, styles.viewInvoiceButton)}
|
||||
>
|
||||
View Invoice
|
||||
</Button>
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
className={clsx(styles.footerButton, styles.buyButton)}
|
||||
>
|
||||
Pay $10,000.00
|
||||
</Button>
|
||||
</Stack>
|
||||
|
||||
<Text className={clsx(Classes.TEXT_MUTED, styles.buyNote)}>
|
||||
By confirming your payment, you allow Bigcapital Technology, Inc. to
|
||||
charge you for this payment and save your payment information in
|
||||
accordance with their terms.
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Stack className={styles.footer}>
|
||||
<Stack spacing={0}>
|
||||
<Box>
|
||||
<strong>Bigcapital Technology, Inc.</strong>
|
||||
</Box>
|
||||
<Box>131 Continental Dr Suite 305 Newark,</Box>
|
||||
<Box>Delaware 19713</Box>
|
||||
<Box>United States</Box>
|
||||
<Box>ahmed@bigcapital.app</Box>
|
||||
</Stack>
|
||||
|
||||
<Stack spacing={0} className={styles.footerText}>
|
||||
© 2024 Bigcapital Technology, Inc.
|
||||
<br />
|
||||
All rights reserved.
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import React, { createContext, useContext, ReactNode } from 'react';
|
||||
|
||||
interface PaymentPortalContextType {
|
||||
// Define the context type here
|
||||
paymentAmount: number;
|
||||
setPaymentAmount: (amount: number) => void;
|
||||
}
|
||||
|
||||
const PaymentPortalContext = createContext<PaymentPortalContextType>(
|
||||
{} as PaymentPortalContextType,
|
||||
);
|
||||
|
||||
export const PaymentPortalBoot: React.FC<{ children: ReactNode }> = ({
|
||||
children,
|
||||
}) => {
|
||||
const [paymentAmount, setPaymentAmount] = React.useState<number>(0);
|
||||
|
||||
return (
|
||||
<PaymentPortalContext.Provider value={{ paymentAmount, setPaymentAmount }}>
|
||||
{children}
|
||||
</PaymentPortalContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const usePaymentPortalBoot = (): PaymentPortalContextType => {
|
||||
const context = useContext(PaymentPortalContext);
|
||||
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
'usePaymentPortal must be used within a PaymentPortalProvider',
|
||||
);
|
||||
}
|
||||
return context;
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
import { PaymentPortal } from './PaymentPortal';
|
||||
|
||||
export default function PaymentPortalPage() {
|
||||
return <PaymentPortal />;
|
||||
}
|
||||
Reference in New Issue
Block a user