From 411ac55986cfb633c1c4decd49e7ffe9259fd597 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Thu, 12 Sep 2024 17:49:00 +0200 Subject: [PATCH] feat: templates customize --- .../BrandingTemplatesActionsBar.tsx | 20 +++- .../BrandingTemplatesContent.tsx | 2 +- .../BrandingTemplatesTable.tsx | 8 +- .../containers/BrandingTemplates/_utils.ts | 32 +++++-- .../src/containers/BrandingTemplates/utils.ts | 8 ++ .../CreditNoteCustomizeContent.tsx | 22 ++++- .../CreditNoteCustomizeDrawer.tsx | 10 +- .../CreditNoteCustomizeDrawerBody.tsx | 2 +- .../CreditNoteCustomizeGeneralFields.tsx | 90 +++++++++++------- .../CreditNoteCustomize/constants.ts | 2 + .../CreditNotes/CreditNoteCustomize/types.ts | 4 +- .../EstimateCustomizeDrawer.tsx | 4 +- .../EstimateCustomizeFieldsGeneral.tsx | 73 ++++++++------- .../InvoiceCustomizeGeneralFields.tsx | 2 +- .../Sales/Invoices/InvoiceCustomize/utils.ts | 6 -- .../PaymentReceivedCustomizeFieldsGeneral.tsx | 91 ++++++++++++------- .../ReceiptCustomizeFieldsGeneral.tsx | 90 +++++++++++------- 17 files changed, 293 insertions(+), 173 deletions(-) create mode 100644 packages/webapp/src/containers/BrandingTemplates/utils.ts diff --git a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesActionsBar.tsx b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesActionsBar.tsx index 65aa94e3e..a7e5ccfbf 100644 --- a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesActionsBar.tsx +++ b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesActionsBar.tsx @@ -1,20 +1,30 @@ // @ts-nocheck -import React from 'react'; +import React, { useMemo } from 'react'; import { Button, NavbarGroup, Intent } from '@blueprintjs/core'; import { DashboardActionsBar, Icon } from '@/components'; -import { DRAWERS } from '@/constants/drawers'; - import withDrawerActions from '@/containers/Drawer/withDrawerActions'; +import { + getButtonLabelFromResource, + getCustomizeDrawerNameFromResource, +} from './_utils'; import { compose } from '@/utils'; +import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; /** * Account drawer action bar. */ function BrandingTemplateActionsBarRoot({ openDrawer }) { + const { + payload: { resource }, + } = useDrawerContext(); + // Handle new child button click. const handleCreateBtnClick = () => { - openDrawer(DRAWERS.INVOICE_CUSTOMIZE); + const drawerResource = getCustomizeDrawerNameFromResource(resource); + openDrawer(drawerResource); }; + const label = useMemo(() => getButtonLabelFromResource(resource), [resource]); + return ( @@ -24,7 +34,7 @@ function BrandingTemplateActionsBarRoot({ openDrawer }) { onClick={handleCreateBtnClick} minimal > - Create Invoice Branding + {label} diff --git a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesContent.tsx b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesContent.tsx index cd7fd3e37..8b6f139cf 100644 --- a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesContent.tsx +++ b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesContent.tsx @@ -5,8 +5,8 @@ import { BrandingTemplatesBoot } from './BrandingTemplatesBoot'; import { Box, Card, DrawerHeaderContent, Group } from '@/components'; import { DRAWERS } from '@/constants/drawers'; import { BrandingTemplatesTable } from './BrandingTemplatesTable'; -import withDrawerActions from '@/containers/Drawer/withDrawerActions'; import { BrandingTemplateActionsBar } from './BrandingTemplatesActionsBar'; +import withDrawerActions from '@/containers/Drawer/withDrawerActions'; export default function BrandingTemplateContent() { return ( diff --git a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesTable.tsx b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesTable.tsx index 6ae205212..01f358c65 100644 --- a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesTable.tsx +++ b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesTable.tsx @@ -5,10 +5,11 @@ import clsx from 'classnames'; import { DataTable, Group, TableSkeletonRows } from '@/components'; import { useBrandingTemplatesBoot } from './BrandingTemplatesBoot'; import { ActionsMenu } from './_components'; +import { DRAWERS } from '@/constants/drawers'; import withAlertActions from '@/containers/Alert/withAlertActions'; import withDrawerActions from '@/containers/Drawer/withDrawerActions'; -import { DRAWERS } from '@/constants/drawers'; import styles from './BrandTemplates.module.scss'; +import { getCustomizeDrawerNameFromResource } from './_utils'; interface BrandingTemplatesTableProps {} @@ -35,7 +36,10 @@ function BrandingTemplateTableRoot({ const templateId = cell.row.original.id; const resource = cell.row.original.resource; - openDrawer(DRAWERS.INVOICE_CUSTOMIZE, { templateId, resource }); + // Retrieves the customize drawer name from the given resource name. + const drawerName = getCustomizeDrawerNameFromResource(resource); + + openDrawer(drawerName, { templateId, resource }); }; return ( diff --git a/packages/webapp/src/containers/BrandingTemplates/_utils.ts b/packages/webapp/src/containers/BrandingTemplates/_utils.ts index 416fe7f88..50e5122a8 100644 --- a/packages/webapp/src/containers/BrandingTemplates/_utils.ts +++ b/packages/webapp/src/containers/BrandingTemplates/_utils.ts @@ -1,4 +1,5 @@ import { omit } from 'lodash'; +import * as R from 'ramda'; import { CreatePdfTemplateValues, EditPdfTemplateValues, @@ -7,6 +8,7 @@ import { useBrandingTemplateBoot } from './BrandingTemplateBoot'; import { transformToForm } from '@/utils'; import { BrandingTemplateValues } from './types'; import { useFormikContext } from 'formik'; +import { DRAWERS } from '@/constants/drawers'; export const transformToEditRequest = ( values: T, @@ -19,7 +21,7 @@ export const transformToEditRequest = ( export const transformToNewRequest = ( values: T, - resource: string + resource: string, ): CreatePdfTemplateValues => { return { resource, @@ -28,12 +30,6 @@ export const transformToNewRequest = ( }; }; -export const useIsTemplateNamedFilled = () => { - const { values } = useFormikContext(); - - return values.templateName && values.templateName?.length >= 4; -}; - export const useBrandingTemplateFormInitialValues = < T extends BrandingTemplateValues, >( @@ -50,3 +46,25 @@ export const useBrandingTemplateFormInitialValues = < ...(transformToForm(defaultPdfTemplate, initialValues) as T), }; }; + +export const getCustomizeDrawerNameFromResource = (resource: string) => { + const pairs = { + SaleInvoice: DRAWERS.INVOICE_CUSTOMIZE, + SaleEstimate: DRAWERS.ESTIMATE_CUSTOMIZE, + SaleReceipt: DRAWERS.RECEIPT_CUSTOMIZE, + CreditNote: DRAWERS.CREDIT_NOTE_CUSTOMIZE, + PaymentReceive: DRAWERS.PAYMENT_RECEIVED_CUSTOMIZE, + }; + return R.prop(resource, pairs) || DRAWERS.INVOICE_CUSTOMIZE; +}; + +export const getButtonLabelFromResource = (resource: string) => { + const pairs = { + SaleInvoice: 'Create Invoice Branding', + SaleEstimate: 'Create Estimate Branding', + SaleReceipt: 'Create Receipt Branding', + CreditNote: 'Create Credit Note Branding', + PaymentReceive: 'Create Payment Branding', + }; + return R.prop(resource, pairs) || 'Create Branding Template'; +} \ No newline at end of file diff --git a/packages/webapp/src/containers/BrandingTemplates/utils.ts b/packages/webapp/src/containers/BrandingTemplates/utils.ts new file mode 100644 index 000000000..788d36898 --- /dev/null +++ b/packages/webapp/src/containers/BrandingTemplates/utils.ts @@ -0,0 +1,8 @@ +import { useFormikContext } from 'formik'; +import { BrandingTemplateValues } from './types'; + +export const useIsTemplateNamedFilled = () => { + const { values } = useFormikContext(); + + return values.templateName && values.templateName?.length >= 4; +}; diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx index 31b02d8d3..8a9ca888d 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx @@ -5,14 +5,26 @@ import { CreditNoteCustomizeContentFields } from './CreditNoteCutomizeContentFie import { CreditNotePaperTemplate } from './CreditNotePaperTemplate'; import { CreditNoteCustomizeValues } from './types'; import { initialValues } from './constants'; +import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTemplateForm'; +import { useDrawerActions } from '@/hooks/state'; +import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; export function CreditNoteCustomizeContent() { - const handleFormSubmit = (values: CreditNoteCustomizeValues) => {}; + const { payload, name } = useDrawerContext(); + const { closeDrawer } = useDrawerActions(); + + const templateId = payload?.templateId || null; + + const handleSuccess = () => { + closeDrawer(name); + }; return ( - - initialValues={initialValues} - onSubmit={handleFormSubmit} + + resource={'CreditNote'} + templateId={templateId} + defaultValues={initialValues} + onSuccess={handleSuccess} > @@ -29,7 +41,7 @@ export function CreditNoteCustomizeContent() { asdfasdfdsaf #3 - + ); } diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawer.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawer.tsx index dc6ad6a19..42159714e 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawer.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawer.tsx @@ -4,8 +4,8 @@ import * as R from 'ramda'; import { Drawer, DrawerSuspense } from '@/components'; import withDrawers from '@/containers/Drawer/withDrawers'; -const CreditNoteCustomizeContent = React.lazy( - () => import('./CreditNoteCustomizeContent'), +const CreditNoteCustomizeDrawerBody = React.lazy( + () => import('./CreditNoteCustomizeDrawerBody'), ); /** @@ -16,12 +16,12 @@ function CreditNoteCustomizeDrawerRoot({ name, // #withDrawer isOpen, - payload: {}, + payload, }) { return ( - + - + ); diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawerBody.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawerBody.tsx index 3472833cb..c6fb97471 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawerBody.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawerBody.tsx @@ -6,7 +6,7 @@ import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; export default function CreditNoteCustomizeDrawerBody() { const { payload } = useDrawerContext(); - const templateId = payload.templateId; + const templateId = payload?.templateId || null; return ( diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx index 9c8b84c7c..9519b4bc5 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx @@ -1,9 +1,19 @@ // @ts-nocheck import { Classes } from '@blueprintjs/core'; -import { FFormGroup, FSwitch, Stack } from '@/components'; +import { + FFormGroup, + FieldRequiredHint, + FInputGroup, + FSwitch, + Stack, +} from '@/components'; import { FColorInput } from '@/components/Forms/FColorInput'; +import { Overlay } from '../../Invoices/InvoiceCustomize/Overlay'; +import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils'; export function CreditNoteCustomizeGeneralField() { + const isTemplateNameFilled = useIsTemplateNamedFilled(); + return ( @@ -14,45 +24,57 @@ export function CreditNoteCustomizeGeneralField() {

- - - } + fastField + style={{ marginBottom: 10 }} + > + + + + + + - + > + + - - - + > + + - - - - + + + + + ); } diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts index 20ecaf45f..987303fa6 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts @@ -1,4 +1,6 @@ export const initialValues = { + templateName: '', + // Colors primaryColor: '#2c3dd8', secondaryColor: '#2c3dd8', diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts index 1d8cfb5f7..5527a0e3c 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts @@ -1,4 +1,6 @@ -export interface CreditNoteCustomizeValues { +import { BrandingTemplateValues } from '@/containers/BrandingTemplates/types'; + +export interface CreditNoteCustomizeValues extends BrandingTemplateValues { // Colors primaryColor?: string; secondaryColor?: string; diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawer.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawer.tsx index 54b0ab3f7..35bd969ea 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawer.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawer.tsx @@ -17,10 +17,10 @@ function EstimateCustomizeDrawerRoot({ // #withDrawer isOpen, - payload: {}, + payload, }) { return ( - + diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx index 837f1be48..2a32b4412 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx @@ -9,9 +9,12 @@ import { Stack, } from '@/components'; import { FColorInput } from '@/components/Forms/FColorInput'; -// import styles from './InvoiceCustomizeFields.module.scss'; +import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils'; +import { Overlay } from '../../Invoices/InvoiceCustomize/Overlay'; export function EstimateCustomizeGeneralField() { + const isTemplateNameFilled = useIsTemplateNamedFilled(); + return ( @@ -32,45 +35,47 @@ export function EstimateCustomizeGeneralField() { - - - + + - + > + + - - - + > + + - - - - + + + + + ); } diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx index c9f6d1827..5ec48a7a1 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx @@ -11,7 +11,7 @@ import { import { FColorInput } from '@/components/Forms/FColorInput'; import { CreditCardIcon } from '@/icons/CreditCardIcon'; import { Overlay } from './Overlay'; -import { useIsTemplateNamedFilled } from './utils'; +import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils'; export function InvoiceCustomizeGeneralField() { const isTemplateNameFilled = useIsTemplateNamedFilled(); diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/utils.ts b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/utils.ts index 130986261..d9a1979da 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/utils.ts +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/utils.ts @@ -28,12 +28,6 @@ export const transformToNewRequest = ( }; }; -export const useIsTemplateNamedFilled = () => { - const { values } = useFormikContext(); - - return values.templateName && values.templateName?.length >= 4; -}; - export const useInvoiceCustomizeInitialValues = (): InvoiceCustomizeValues => { const { pdfTemplate } = useBrandingTemplateBoot(); diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx index 9dbfd5feb..ed3edaf22 100644 --- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx +++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx @@ -1,10 +1,19 @@ // @ts-nocheck import { Classes } from '@blueprintjs/core'; -import { FFormGroup, FSwitch, Stack } from '@/components'; +import { + FFormGroup, + FieldRequiredHint, + FInputGroup, + FSwitch, + Stack, +} from '@/components'; import { FColorInput } from '@/components/Forms/FColorInput'; -// import styles from './InvoiceCustomizeFields.module.scss'; +import { Overlay } from '../../Invoices/InvoiceCustomize/Overlay'; +import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils'; export function PaymentReceivedCustomizeGeneralField() { + const isTemplateNameFilled = useIsTemplateNamedFilled(); + return ( @@ -15,45 +24,57 @@ export function PaymentReceivedCustomizeGeneralField() {

- - - } + style={{ marginBottom: 10 }} + fastField + > + + + + + + - + > + + - - - + > + + - - - - + + + + + ); } diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsGeneral.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsGeneral.tsx index 93b76c78b..81e7121a6 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsGeneral.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsGeneral.tsx @@ -1,9 +1,19 @@ // @ts-nocheck import { Classes } from '@blueprintjs/core'; -import { FFormGroup, FSwitch, Stack } from '@/components'; +import { + FFormGroup, + FieldRequiredHint, + FInputGroup, + FSwitch, + Stack, +} from '@/components'; import { FColorInput } from '@/components/Forms/FColorInput'; +import { useIsTemplateNamedFilled } from '@/containers/BrandingTemplates/utils'; +import { Overlay } from '../../Invoices/InvoiceCustomize/Overlay'; export function ReceiptCustomizeGeneralField() { + const isTemplateNameFilled = useIsTemplateNamedFilled(); + return ( @@ -14,45 +24,57 @@ export function ReceiptCustomizeGeneralField() {

- - - } + fastField + style={{ marginBottom: 10 }} + > + + + + + + - + > + + - - - + > + + - - - - + + + + + ); }