From ce40d67ea2b099b82f6be405091d2b0565ae4d5b Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sat, 26 Oct 2024 18:39:36 +0200 Subject: [PATCH] feat: wip send invoice preview --- .../InvoiceCustomize/InvoicePaperTemplate.tsx | 15 +- .../InvoiceCustomize/PaperTemplate.tsx | 14 +- .../InvoiceSendMailDrawer.tsx | 8 +- .../InvoiceSendMailFields.tsx | 201 +++++++++++++----- .../InvoiceSendMailForm.tsx | 19 +- .../InvoiceSendMailHeader.tsx | 19 +- .../InvoicesLanding/InvoicesDataTable.tsx | 2 +- 7 files changed, 198 insertions(+), 80 deletions(-) diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx index ea2883658..4f072fc67 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx @@ -1,5 +1,9 @@ import { Classes, Text } from '@blueprintjs/core'; -import { PaperTemplate, PaperTemplateTotalBorder } from './PaperTemplate'; +import { + PaperTemplate, + PaperTemplateProps, + PaperTemplateTotalBorder, +} from './PaperTemplate'; import { Box, Group, Stack } from '@/components'; import { DefaultPdfTemplateTerms, @@ -23,7 +27,7 @@ interface PaperTax { amount: string; } -export interface InvoicePaperTemplateProps { +export interface InvoicePaperTemplateProps extends PaperTemplateProps { primaryColor?: string; secondaryColor?: string; @@ -177,9 +181,14 @@ export function InvoicePaperTemplate({ statementLabel = 'Statement', showStatement = true, statement = DefaultPdfTemplateStatement, + ...props }: InvoicePaperTemplateProps) { return ( - + diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx index 3e6465851..7948d6727 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx @@ -1,10 +1,10 @@ import React from 'react'; import clsx from 'classnames'; import { get, isFunction } from 'lodash'; -import { Box, Group, GroupProps } from '@/components'; +import { Box, BoxProps, Group, GroupProps } from '@/components'; import styles from './InvoicePaperTemplate.module.scss'; -export interface PaperTemplateProps { +export interface PaperTemplateProps extends BoxProps { primaryColor?: string; secondaryColor?: string; children?: React.ReactNode; @@ -14,13 +14,13 @@ export function PaperTemplate({ primaryColor, secondaryColor, children, + ...restProps }: PaperTemplateProps) { return ( -
+ - {children} -
+ ); } @@ -118,9 +118,9 @@ PaperTemplate.TotalLine = ({ ); }; -PaperTemplate.MutedText = () => { }; +PaperTemplate.MutedText = () => {}; -PaperTemplate.Text = () => { }; +PaperTemplate.Text = () => {}; PaperTemplate.AddressesGroup = (props: GroupProps) => { return ( diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailDrawer.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailDrawer.tsx index cd79ce7ea..908109714 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailDrawer.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailDrawer.tsx @@ -1,7 +1,13 @@ import * as R from 'ramda'; import { Drawer, DrawerSuspense } from '@/components'; -import { InvoiceSendMailContent } from './InvoiceSendMailContent'; import withDrawers from '@/containers/Drawer/withDrawers'; +import React from 'react'; + +const InvoiceSendMailContent = React.lazy(() => + import('./InvoiceSendMailContent').then((module) => ({ + default: module.InvoiceSendMailContent, + })), +); interface InvoiceSendMailDrawerProps { name: string; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx index 908890730..3f4021ea9 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailFields.tsx @@ -1,24 +1,21 @@ // @ts-nocheck +import { useState } from 'react'; import { Button, Intent, MenuItem } from '@blueprintjs/core'; import { useFormikContext } from 'formik'; +import { css } from '@emotion/css'; +import { x } from '@xstyled/emotion'; +import { unique, chain } from 'lodash'; import { FFormGroup, FInputGroup, FMultiSelect, + FTextArea, Group, Stack, } from '@/components'; import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; import { useDrawerActions } from '@/hooks/state'; - -const commonAddressSelect = { - placeholder: '', - labelAccessor: '', - valueAccessor: 'mail', - - tagAccessor: (item) => `<${item.label}> (${item.mail})`, - textAccessor: (item) => `<${item.label}> (${item.mail})`, -}; +import { SelectOptionProps } from '@blueprintjs-formik/select'; // Create new account renderer. const createNewItemRenderer = (query, active, handleClick) => { @@ -36,12 +33,47 @@ const createNewItemRenderer = (query, active, handleClick) => { const createNewItemFromQuery = (name) => ({ name }); export function InvoiceSendMailFields() { - const allowCreate = true; - // Maybe inject new item props to select component. - const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null; - const maybeCreateNewItemFromQuery = allowCreate - ? createNewItemFromQuery - : null; + const [showCCField, setShowCCField] = useState(false); + const [showBccField, setShowBccField] = useState(false); + + const { values, setFieldValue } = useFormikContext(); + + const items = chain([...values?.to, ...values?.cc, ...values?.bcc]) + .filter((email) => !!email?.trim()) + .uniq() + .map((email) => ({ + value: email, + text: email, + })) + .value(); + + const handleClickCcBtn = (event) => { + event.preventDefault(); + event.stopPropagation(); + + setShowCCField(true); + }; + + const handleClickBccBtn = (event) => { + event.preventDefault(); + event.stopPropagation(); + + setShowBccField(true); + }; + + const handleCreateToItemSelect = (value: SelectOptionProps) => { + const _value = [...values?.to, value?.name]; + setFieldValue('to', _value); + }; + + const handleCreateCcItemSelect = (value: SelectOptionProps) => { + const _value = [...values?.cc, value?.name]; + setFieldValue('cc', _value); + }; + const handleCreateBccItemSelect = (value: SelectOptionProps) => { + const _value = [...values?.bcc, value?.name]; + setFieldValue('bcc', _value); + }; return ( - - - + + + :not(:first-of-type) .bp4-input{ + border-top-color: transparent; + border-top-right-radius: 0; + border-top-left-radius: 0; + } + > :not(:last-of-type) .bp4-input { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + `}> - CC - BCC + + + CC + + + + BCC + ), }} - fill={true} - createNewItemRenderer={maybeCreateNewItemRenderer} - createNewItemFromQuery={maybeCreateNewItemFromQuery} - {...commonAddressSelect} - /> - - + {showCCField && ( + + )} + {showBccField && ( + + )} @@ -107,7 +194,15 @@ export function InvoiceSendMailFields() { - + diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailForm.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailForm.tsx index ca4cf35e6..83442d588 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailForm.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailForm.tsx @@ -3,11 +3,22 @@ import { Form, Formik, FormikHelpers } from 'formik'; import { css } from '@emotion/css'; const initialValues = { - subject: '', - message: '', - to: [], + subject: 'invoice INV-0002 for AED 0.00', + message: `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`, + to: ['a.bouhuolia@gmail.com'], cc: [], - bcc: [] + bcc: [], }; interface InvoiceSendMailFormValues { subject: string; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeader.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeader.tsx index 370e2d039..400347f7a 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeader.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceSendMailDrawer/InvoiceSendMailHeader.tsx @@ -1,20 +1,17 @@ -import { Button, Classes } from "@blueprintjs/core"; -import { Group, Icon } from "@/components"; -import { useDrawerContext } from "@/components/Drawer/DrawerProvider"; -import { useDrawerActions } from "@/hooks/state"; +import { Button, Classes } from '@blueprintjs/core'; +import { x } from '@xstyled/emotion'; +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(); @@ -25,7 +22,7 @@ export function InvoiceSendMailHeader({ return ( {label && ( -

+ {label} -

+ )} {closeButton && (