feat: wip send invoice receipt preview

This commit is contained in:
Ahmed Bouhuolia
2024-10-30 14:22:54 +02:00
parent 5fddd080fd
commit 470bfd32f7
5 changed files with 38 additions and 27 deletions

View File

@@ -17,7 +17,7 @@ import {
} from '@/components';
import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
import { useDrawerActions } from '@/hooks/state';
import { useInvoiceMailItems } from './_hooks';
import { useInvoiceMailItems, useSendInvoiceFormatArgsOptions } from './_hooks';
// Create new account renderer.
const createNewItemRenderer = (query, active, handleClick) => {
@@ -65,6 +65,7 @@ export function InvoiceSendMailFields() {
const { values, setFieldValue } = useFormikContext();
const items = useInvoiceMailItems();
const argsOptions = useSendInvoiceFormatArgsOptions();
const handleClickCcBtn = (event) => {
event.preventDefault();
@@ -124,7 +125,7 @@ export function InvoiceSendMailFields() {
if (!textarea) return;
const { selectionStart, selectionEnd, value: text } = textarea;
const insertText = item.value;
const insertText = `{${item.value}}`;
const message =
text.substring(0, selectionStart) +
insertText +
@@ -224,7 +225,7 @@ export function InvoiceSendMailFields() {
<FSelect
selectedItem={'customerName'}
name={'item'}
items={[{ value: 'CustomerName', text: 'Customer Name' }]}
items={argsOptions}
onItemChange={handleTextareaChange}
popoverProps={{
fill: false,
@@ -238,7 +239,7 @@ export function InvoiceSendMailFields() {
<Icon icon={'caret-down-16'} color={'#8F99A8'} />
}
>
{text}
Insert Variable
</Button>
)}
fill={false}

View File

@@ -1,8 +1,9 @@
import { useFormikContext } from 'formik';
import { camelCase, chain, defaultTo, mapKeys, upperFirst } from 'lodash';
import { useMemo } from 'react';
import { SelectOptionProps } from '@blueprintjs-formik/select';
import { chain, defaultTo, mapKeys, snakeCase, startCase } from 'lodash';
import { InvoiceSendMailFormValues } from './_types';
import { useInvoiceSendMailBoot } from './InvoiceSendMailContentBoot';
import { useMemo } from 'react';
export const useInvoiceMailItems = () => {
const { values } = useFormikContext<InvoiceSendMailFormValues>();
@@ -19,24 +20,33 @@ export const useInvoiceMailItems = () => {
.value();
};
export const useSendInvoiceMailFormatArgs = () => {
export const useSendInvoiceMailFormatArgs = (): Record<string, string> => {
const { invoiceMailOptions } = useInvoiceSendMailBoot();
return useMemo(() => {
return mapKeys(invoiceMailOptions?.formatArgs, (_, key) =>
upperFirst(camelCase(key)),
startCase(snakeCase(key).replace('_', ' ')),
);
}, [invoiceMailOptions]);
};
export const useSendInvoiceMailSubject = () => {
export const useSendInvoiceMailSubject = (): string => {
const { values } = useFormikContext<InvoiceSendMailFormValues>();
const formatArgs = useSendInvoiceMailFormatArgs();
return formatSmsMessage(values?.subject, formatArgs);
};
export const useSendInvoiceMailMessage = () => {
export const useSendInvoiceFormatArgsOptions = (): Array<SelectOptionProps> => {
const formatArgs = useSendInvoiceMailFormatArgs();
return Object.keys(formatArgs).map((key) => ({
value: key,
text: key,
}));
};
export const useSendInvoiceMailMessage = (): string => {
const { values } = useFormikContext<InvoiceSendMailFormValues>();
const formatArgs = useSendInvoiceMailFormatArgs();