diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreviewContent.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreviewContent.tsx index 6f643141d..bee44902f 100644 --- a/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreviewContent.tsx +++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreviewContent.tsx @@ -7,13 +7,14 @@ export function ElementCustomizePreviewContent() { return ( {PaperTemplate} ); } + diff --git a/packages/webapp/src/containers/PaymentPortal/InvoicePaymentPagePreview.tsx b/packages/webapp/src/containers/PaymentPortal/InvoicePaymentPagePreview.tsx new file mode 100644 index 000000000..87532d998 --- /dev/null +++ b/packages/webapp/src/containers/PaymentPortal/InvoicePaymentPagePreview.tsx @@ -0,0 +1,23 @@ +import { InvoicePaymentPage, PaymentPageProps } from './PaymentPage'; + +interface InvoicePaymentPagePreviewProps extends Partial { } + +export function InvoicePaymentPagePreview( + props: InvoicePaymentPagePreviewProps, +) { + return ( + + ); +} diff --git a/packages/webapp/src/containers/PaymentPortal/PaymentPage.tsx b/packages/webapp/src/containers/PaymentPortal/PaymentPage.tsx new file mode 100644 index 000000000..b642898af --- /dev/null +++ b/packages/webapp/src/containers/PaymentPortal/PaymentPage.tsx @@ -0,0 +1,181 @@ +import { Text, Classes, Button, Intent, ButtonProps } from '@blueprintjs/core'; +import clsx from 'classnames'; +import { Box, Group, Stack } from '@/components'; +import styles from './PaymentPortal.module.scss'; + +export interface PaymentPageProps { + companyLogoUri: string; + organizationName: string; + customerName: string; + subtotal: string; + total: string; + dueDate: string; + viewInvoiceLabel?: string; + invoiceNumber: string; + totalLabel?: string; + subtotalLabel?: string; + customerAddress?: string; + downloadInvoiceBtnLabel?: string; + showPayButton?: boolean; + paidAmount: string; + paidAmountLabel?: string; + organizationAddress: string; + dueAmount: string; + dueAmountLabel?: string; + downloadInvoiceButtonProps?: Partial; + payInvoiceButtonProps?: Partial; + viewInvoiceButtonProps?: Partial; + invoiceNumberLabel?: string; + buyNote?: string; + copyrightText?: string; +} + +export function InvoicePaymentPage({ + companyLogoUri, + organizationName, + customerName, + subtotal, + total, + dueDate, + paidAmount, + paidAmountLabel = 'Paid Amount (-)', + invoiceNumber, + customerAddress, + totalLabel = 'Total', + subtotalLabel = 'Subtotal', + viewInvoiceLabel = 'View Invoice', + downloadInvoiceBtnLabel = 'Download Invoice', + showPayButton = true, + organizationAddress, + dueAmount, + dueAmountLabel = 'Due Amount', + downloadInvoiceButtonProps, + payInvoiceButtonProps, + viewInvoiceButtonProps, + invoiceNumberLabel = 'Invoice #', + 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.', + copyrightText = `© 2024 Bigcapital Technology, Inc.
All rights reserved.`, +}: PaymentPageProps) { + return ( + + + + + {companyLogoUri && ( + + )} + {organizationName} + + + +

+ {organizationName} Sent an Invoice for {total} +

+ + + Invoice due {dueDate}{' '} + + + + + + {customerName} + + {customerAddress && ( + + )} + + +

Invoice {invoiceNumber}

+ + + + {subtotalLabel} + {subtotal} + + + + {totalLabel} + {total} + + {/* + {sharableLinkMeta?.taxes?.map((tax, key) => ( + + {tax?.name} + {tax?.taxRateAmountFormatted} + + ))} */} + + {paidAmountLabel} + {paidAmount} + + + + Due Amount + {dueAmount} + + + + + + + + + + {showPayButton && ( + + )} + + + {buyNote && ( + + {buyNote} + + )} + + + + + + {copyrightText && ( + + )} + + + ); +} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx index a6960ccff..270d8025f 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx @@ -1,6 +1,7 @@ -import React from 'react'; +import React, { lazy, Suspense } from 'react'; import * as R from 'ramda'; import { useFormikContext } from 'formik'; +import { Spinner, Tab } from '@blueprintjs/core'; import { InvoicePaperTemplate, InvoicePaperTemplateProps, @@ -19,6 +20,19 @@ import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTem import { useElementCustomizeContext } from '@/containers/ElementCustomize/ElementCustomizeProvider'; import { initialValues } from './constants'; import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils'; +import { InvoiceCustomizeTabs } from './InvoiceCustomizeTabs'; + +const InvoicePaymentPagePreview = lazy(() => + import('@/containers/PaymentPortal/InvoicePaymentPagePreview').then( + (module) => ({ default: module.InvoicePaymentPagePreview }), + ), +); + +const InvoiceMailReceiptPreview = lazy(() => + import( + '@/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceiptPreview' + ).then((module) => ({ default: module.InvoiceMailReceiptPreview })), +); /** * Invoice branding template customize. @@ -56,7 +70,39 @@ function InvoiceCustomizeFormContent() { return ( - + + }> + + + } + /> + }> + + + } + /> + }> + + + } + /> + @@ -90,7 +136,6 @@ const withInvoicePreviewTemplateProps =

( ...brandingState, ...values, }; - return ; }; }; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx new file mode 100644 index 000000000..5e694d637 --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx @@ -0,0 +1,28 @@ +import { css } from '@emotion/css'; +import { Tabs, TabsProps } from '@blueprintjs/core'; + +interface InvoiceCustomizeTabsProps extends TabsProps { } + +export function InvoiceCustomizeTabs(props: InvoiceCustomizeTabsProps) { + return ( + + ); +} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceipt.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceipt.tsx new file mode 100644 index 000000000..2c1c91a51 --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceipt.tsx @@ -0,0 +1,137 @@ +import { Button, Intent } from '@blueprintjs/core'; +import { css } from '@emotion/css'; +import { x } from '@xstyled/emotion'; +import { Group, Stack, StackProps } from '@/components'; + +export interface InvoiceMailReceiptProps extends StackProps { + companyLogoUri?: string; + message: string; + companyName: string; + invoiceNumber: string; + dueDate: string; + items?: Array<{ label: string; total: string; quantity: string | number }>; + total: string; + dueAmount: string; + totalLabel?: string; + dueAmountLabel?: string; + viewInvoiceButtonLabel?: string; + viewInvoiceButtonOnClick?: () => void; + invoiceNumberLabel?: string; +} + +export function InvoiceMailReceipt({ + companyLogoUri, + message, + companyName, + total, + invoiceNumber, + dueDate, + dueAmount, + items, + viewInvoiceButtonLabel = 'View Invoice', + viewInvoiceButtonOnClick, + totalLabel = 'Total', + dueAmountLabel = 'Due Amount', + invoiceNumberLabel = 'Invoice #', + ...restProps +}: InvoiceMailReceiptProps) { + return ( + + + {companyLogoUri && ( + + )} + + + {companyName} + + + + {total} + + + + {invoiceNumberLabel} {invoiceNumber} + + + + Due {dueDate} + + + + + + {message} + + + + + + {items?.map((item, key) => ( + + {item.label} + + {item.quantity} x {item.total} + + + ))} + + + {totalLabel} + + {total} + + + + + {dueAmountLabel} + + {dueAmount} + + + + + ); +} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceiptPreview.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceiptPreview.tsx new file mode 100644 index 000000000..57758679e --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceiptPreview.tsx @@ -0,0 +1,38 @@ +import { + InvoiceMailReceipt, + InvoiceMailReceiptProps, +} from './InvoiceMailReceipt'; + +export interface InvoiceMailReceiptPreviewProps + extends Partial { } + +const receiptMessage = `Hi Ahmed, + +Here’s invoice INV-0002 for AED 0.00 + +The amount outstanding of AED $100,00 is due on 2 October 2024 + +View your bill online From your online you can print a PDF or pay your outstanding bills, + +If you have any questions, please let us know, + +Thanks, +Mohamed +`; + +export function InvoiceMailReceiptPreview( + props: InvoiceMailReceiptPreviewProps, +) { + const propsWithDefaults = { + message: receiptMessage, + companyName: 'Bigcapital Technology, Inc.', + total: '$1,000.00', + invoiceNumber: 'INV-0001', + dueDate: '2 Oct 2024', + dueAmount: '$1,000.00', + items: [{ label: 'Line Item #1', total: '$1000.00', quantity: 1 }], + companyLogoUri: ' ', + ...props, + }; + return ; +}