diff --git a/packages/webapp/src/components/DrawersContainer.tsx b/packages/webapp/src/components/DrawersContainer.tsx index 89c1a13e5..448f6e676 100644 --- a/packages/webapp/src/components/DrawersContainer.tsx +++ b/packages/webapp/src/components/DrawersContainer.tsx @@ -31,6 +31,7 @@ import { PaymentReceivedCustomizeDrawer } from '@/containers/Sales/PaymentsRecei import { BrandingTemplatesDrawer } from '@/containers/BrandingTemplates/BrandingTemplatesDrawer'; import { DRAWERS } from '@/constants/drawers'; +import { InvoiceSendMailDrawer } from '@/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailDrawer'; /** * Drawers container of the dashboard. @@ -79,6 +80,7 @@ export default function DrawersContainer() { name={DRAWERS.PAYMENT_RECEIVED_CUSTOMIZE} /> + ); } diff --git a/packages/webapp/src/constants/drawers.ts b/packages/webapp/src/constants/drawers.ts index 4c97ef783..cd1d064d4 100644 --- a/packages/webapp/src/constants/drawers.ts +++ b/packages/webapp/src/constants/drawers.ts @@ -33,5 +33,6 @@ export enum DRAWERS { PAYMENT_RECEIVED_CUSTOMIZE = 'PAYMENT_RECEIVED_CUSTOMIZE', BRANDING_TEMPLATES = 'BRANDING_TEMPLATES', PAYMENT_INVOICE_PREVIEW = 'PAYMENT_INVOICE_PREVIEW', - STRIPE_PAYMENT_INTEGRATION_EDIT = 'STRIPE_PAYMENT_INTEGRATION_EDIT' + STRIPE_PAYMENT_INTEGRATION_EDIT = 'STRIPE_PAYMENT_INTEGRATION_EDIT', + INVOICE_SEND_MAIL = 'INVOICE_SEND_MAIL' } diff --git a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesDrawer.tsx b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesDrawer.tsx index b4b9679ca..685e7cadb 100644 --- a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesDrawer.tsx +++ b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesDrawer.tsx @@ -23,8 +23,6 @@ function BrandingTemplatesDrawerRoot({ isOpen={isOpen} name={name} payload={payload} - size={'600px'} - style={{ borderLeftColor: '#cbcbcb' }} > diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceiptPreview.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceiptPreview.tsx index 57758679e..fa72e64a8 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceiptPreview.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceMailReceiptPreview.tsx @@ -4,7 +4,7 @@ import { } from './InvoiceMailReceipt'; export interface InvoiceMailReceiptPreviewProps - extends Partial { } + extends Partial {} const receiptMessage = `Hi Ahmed, @@ -30,7 +30,7 @@ export function InvoiceMailReceiptPreview( invoiceNumber: 'INV-0001', dueDate: '2 Oct 2024', dueAmount: '$1,000.00', - items: [{ label: 'Line Item #1', total: '$1000.00', quantity: 1 }], + items: [{ label: 'Web development', total: '$1000.00', quantity: 1 }], companyLogoUri: ' ', ...props, }; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailContent.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailContent.tsx new file mode 100644 index 000000000..c1cc3d7a6 --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailContent.tsx @@ -0,0 +1,26 @@ +import { Group, Stack } from '@/components'; +import { Classes } from '@blueprintjs/core'; +import { InvoiceSendMailBoot } from './InvoiceSendMailContentBoot'; +import { InvoiceSendMailForm } from './InvoiceSendMailForm'; +import { InvoiceSendMailHeader } from './InvoiceSendMailHeader'; +import { InvoiceSendMailPreview } from './InvoiceSendMailPreview'; +import { InvoiceSendMailFields } from './InvoiceSendMailFields'; + +export function InvoiceSendMailContent() { + return ( + + + + + + + + + + + + + + + ); +} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailContentBoot.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailContentBoot.tsx new file mode 100644 index 000000000..cb129282f --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailContentBoot.tsx @@ -0,0 +1,32 @@ +import React, { createContext, useContext } from 'react'; +import { Spinner } from '@blueprintjs/core'; + +interface InvoiceSendMailBootValues {} +interface InvoiceSendMailBootProps { + children: React.ReactNode; +} + +const InvoiceSendMailContentBootContext = + createContext({} as InvoiceSendMailBootValues); + +export const InvoiceSendMailBoot = ({ children }: InvoiceSendMailBootProps) => { + const isLoading = false; + + if (isLoading) { + return ; + } + const value = {}; + + return ( + + {children} + + ); +}; +InvoiceSendMailBoot.displayName = 'InvoiceSendMailBoot'; + +export const useInvoiceSendMailBoot = () => { + return useContext( + InvoiceSendMailContentBootContext, + ); +}; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailDrawer.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailDrawer.tsx new file mode 100644 index 000000000..cd79ce7ea --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailDrawer.tsx @@ -0,0 +1,30 @@ +import * as R from 'ramda'; +import { Drawer, DrawerSuspense } from '@/components'; +import { InvoiceSendMailContent } from './InvoiceSendMailContent'; +import withDrawers from '@/containers/Drawer/withDrawers'; + +interface InvoiceSendMailDrawerProps { + name: string; + isOpen?: boolean; + payload?: any; +} + +function InvoiceSendMailDrawerRoot({ + name, + + // #withDrawer + isOpen, + payload, +}: InvoiceSendMailDrawerProps) { + return ( + + + + + + ); +} + +export const InvoiceSendMailDrawer = R.compose(withDrawers())( + InvoiceSendMailDrawerRoot, +); diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx new file mode 100644 index 000000000..460b948aa --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx @@ -0,0 +1,61 @@ +import { Button, Intent } from "@blueprintjs/core"; +import { useFormikContext } from "formik"; +import { FFormGroup, FInputGroup, Group, Stack } from "@/components"; +import { useDrawerContext } from "@/components/Drawer/DrawerProvider"; +import { useDrawerActions } from "@/hooks/state"; + +export function InvoiceSendMailFields() { + return ( + + + + + + + + + + + + + + ); +} + +function InvoiceSendMailFooter() { + const { isSubmitting } = useFormikContext(); + const { name } = useDrawerContext(); + const { closeDrawer } = useDrawerActions(); + + const handleClose = () => { + closeDrawer(name); + }; + + return ( + + + + + + + + ); +} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailForm.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailForm.tsx new file mode 100644 index 000000000..196807aaf --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailForm.tsx @@ -0,0 +1,54 @@ +import * as Yup from 'yup'; +import { Form, Formik, FormikHelpers } from 'formik'; +import { css } from '@emotion/css'; + +const initialValues = { + subject: '', + message: '', + to: '', + cc: '', +}; +interface InvoiceSendMailFormValues { + subject: string; + message: string; + to: string; + cc: string; +} + +const InvoiceSendMailFormSchema = Yup.object().shape({ + subject: Yup.string().required('Subject is required'), + message: Yup.string().required('Message is required'), + to: Yup.string().email('Invalid email').required('To address is required'), + cc: Yup.string().email('Invalid email'), +}); + +interface InvoiceSendMailFormProps { + children: React.ReactNode; +} + +export function InvoiceSendMailForm({ children }: InvoiceSendMailFormProps) { + // + const handleSubmit = ( + values: InvoiceSendMailFormValues, + { setSubmitting }: FormikHelpers, + ) => {}; + + return ( + +
+ {children} +
+ + ); +} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeader.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeader.tsx new file mode 100644 index 000000000..370e2d039 --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeader.tsx @@ -0,0 +1,52 @@ +import { Button, Classes } from "@blueprintjs/core"; +import { Group, Icon } from "@/components"; +import { useDrawerContext } from "@/components/Drawer/DrawerProvider"; +import { useDrawerActions } from "@/hooks/state"; + +interface ElementCustomizeHeaderProps { + label?: string; + children?: React.ReactNode; + closeButton?: boolean; + onClose?: () => void; +} + +export function InvoiceSendMailHeader({ + label, + closeButton = true, + onClose, + children, +}: ElementCustomizeHeaderProps) { + const { name } = useDrawerContext(); + const { closeDrawer } = useDrawerActions(); + + const handleClose = () => { + closeDrawer(name); + }; + return ( + + {label && ( +

+ {label} +

+ )} + {closeButton && ( +