From 12226d469af9f618b038c6fddf34a8a1bc02c465 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Thu, 12 Sep 2024 16:50:44 +0200 Subject: [PATCH] feat: pdf template customize --- .../PdfTemplates/PdfTemplatesController.ts | 20 ++++- .../services/PdfTemplate/CreatePdfTemplate.ts | 2 +- .../PdfTemplate/PdfTemplateApplication.ts | 2 + .../src/components/DrawersContainer.tsx | 2 +- .../containers/AlertsContainer/registered.tsx | 2 +- .../BrandTemplates.module.scss | 0 .../BrandingTemplateBoot.tsx | 0 .../BrandingTemplateForm.tsx | 87 +++++++++++++++++++ .../BrandingTemplatesActionsBar.tsx | 0 .../BrandingTemplatesBoot.tsx | 6 +- .../BrandingTemplatesContent.tsx | 0 .../BrandingTemplatesDrawer.tsx | 3 +- .../BrandingTemplatesTable.tsx | 0 .../BrandingTemplates/_components.tsx | 0 .../containers/BrandingTemplates/_utils.ts | 52 +++++++++++ .../alerts/BrandingTemplatesAlerts.ts | 0 .../alerts/DeleteBrandingTemplateAlert.tsx | 0 .../src/containers/BrandingTemplates/types.ts | 5 ++ .../CreditNoteCustomizeContent.tsx | 42 ++++----- .../CreditNoteCustomizeDrawerBody.tsx | 18 ++++ .../CreditNotesActionsBar.tsx | 4 +- .../EstimateCustomizeContent.tsx | 57 +++++++----- .../EstimateCustomizeDrawer.tsx | 6 +- .../EstimateCustomizeDrawerBody.tsx | 18 ++++ .../EstimateCustomizeFieldsGeneral.tsx | 21 ++++- .../Estimates/EstimateCustomize/constants.ts | 2 + .../Estimates/EstimateCustomize/types.ts | 4 +- .../EstimatesLanding/EstimatesActionsBar.tsx | 4 +- .../InvoiceCustomize/InvoiceCustomize.tsx | 2 +- .../InvoiceCustomizeContent.tsx | 65 +++----------- .../Sales/Invoices/InvoiceCustomize/types.ts | 4 +- .../Sales/Invoices/InvoiceCustomize/utils.ts | 2 +- .../InvoicesLanding/InvoicesActionsBar.tsx | 4 +- .../PaymentReceivedCustomize.tsx | 18 ++++ .../PaymentReceivedCustomizeContent.tsx | 55 +++++++----- .../PaymentReceivedCustomizeDrawer.tsx | 10 +-- .../PaymentReceivedCustomize/constants.ts | 2 + .../PaymentReceivedCustomize/types.ts | 4 +- .../PaymentsReceivedActionsBar.tsx | 4 +- .../ReceiptCustomizeContent.tsx | 54 +++++++----- .../ReceiptCustomizeDrawer.tsx | 10 +-- .../ReceiptCustomizeDrawerBody.tsx | 18 ++++ .../Receipts/ReceiptCustomize/constants.ts | 2 + .../Sales/Receipts/ReceiptCustomize/types.ts | 4 +- .../ReceiptsLanding/ReceiptActionsBar.tsx | 4 +- .../webapp/src/hooks/query/pdf-templates.ts | 8 +- 46 files changed, 436 insertions(+), 191 deletions(-) rename packages/webapp/src/containers/{Sales/Invoices => }/BrandingTemplates/BrandTemplates.module.scss (100%) rename packages/webapp/src/containers/{Sales/Invoices => }/BrandingTemplates/BrandingTemplateBoot.tsx (100%) create mode 100644 packages/webapp/src/containers/BrandingTemplates/BrandingTemplateForm.tsx rename packages/webapp/src/containers/{Sales/Invoices => }/BrandingTemplates/BrandingTemplatesActionsBar.tsx (100%) rename packages/webapp/src/containers/{Sales/Invoices => }/BrandingTemplates/BrandingTemplatesBoot.tsx (82%) rename packages/webapp/src/containers/{Sales/Invoices => }/BrandingTemplates/BrandingTemplatesContent.tsx (100%) rename packages/webapp/src/containers/{Sales/Invoices => }/BrandingTemplates/BrandingTemplatesDrawer.tsx (95%) rename packages/webapp/src/containers/{Sales/Invoices => }/BrandingTemplates/BrandingTemplatesTable.tsx (100%) rename packages/webapp/src/containers/{Sales/Invoices => }/BrandingTemplates/_components.tsx (100%) create mode 100644 packages/webapp/src/containers/BrandingTemplates/_utils.ts rename packages/webapp/src/containers/{Sales/Invoices => }/BrandingTemplates/alerts/BrandingTemplatesAlerts.ts (100%) rename packages/webapp/src/containers/{Sales/Invoices => }/BrandingTemplates/alerts/DeleteBrandingTemplateAlert.tsx (100%) create mode 100644 packages/webapp/src/containers/BrandingTemplates/types.ts create mode 100644 packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawerBody.tsx create mode 100644 packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawerBody.tsx create mode 100644 packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomize.tsx create mode 100644 packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeDrawerBody.tsx diff --git a/packages/server/src/api/controllers/PdfTemplates/PdfTemplatesController.ts b/packages/server/src/api/controllers/PdfTemplates/PdfTemplatesController.ts index 172070a80..63a854e22 100644 --- a/packages/server/src/api/controllers/PdfTemplates/PdfTemplatesController.ts +++ b/packages/server/src/api/controllers/PdfTemplates/PdfTemplatesController.ts @@ -32,7 +32,12 @@ export class PdfTemplatesController extends BaseController { this.validationResult, this.editPdfTemplate.bind(this) ); - router.get('/', this.getPdfTemplates.bind(this)); + router.get( + '/', + [query('resource').optional()], + this.validationResult, + this.getPdfTemplates.bind(this) + ); router.get( '/:template_id', [param('template_id').exists().isInt().toInt()], @@ -41,7 +46,11 @@ export class PdfTemplatesController extends BaseController { ); router.post( '/', - [check('template_name').exists(), check('attributes').exists()], + [ + check('template_name').exists(), + check('resource').exists(), + check('attributes').exists(), + ], this.validationResult, this.createPdfInvoiceTemplate.bind(this) ); @@ -54,12 +63,13 @@ export class PdfTemplatesController extends BaseController { next: NextFunction ) { const { tenantId } = req; - const { templateName, attributes } = this.matchedBodyData(req); + const { templateName, resource, attributes } = this.matchedBodyData(req); try { const result = await this.pdfTemplateApplication.createPdfTemplate( tenantId, templateName, + resource, attributes ); return res.status(201).send(result); @@ -117,10 +127,12 @@ export class PdfTemplatesController extends BaseController { async getPdfTemplates(req: Request, res: Response, next: NextFunction) { const { tenantId } = req; + const query = this.matchedQueryData(req); try { const templates = await this.pdfTemplateApplication.getPdfTemplates( - tenantId + tenantId, + query ); return res.status(200).send(templates); } catch (error) { diff --git a/packages/server/src/services/PdfTemplate/CreatePdfTemplate.ts b/packages/server/src/services/PdfTemplate/CreatePdfTemplate.ts index feab657c6..02efc83f2 100644 --- a/packages/server/src/services/PdfTemplate/CreatePdfTemplate.ts +++ b/packages/server/src/services/PdfTemplate/CreatePdfTemplate.ts @@ -24,10 +24,10 @@ export class CreatePdfTemplate { public createPdfTemplate( tenantId: number, templateName: string, + resource: string, invoiceTemplateDTO: ICreateInvoicePdfTemplateDTO ) { const { PdfTemplate } = this.tennacy.models(tenantId); - const resource = 'SaleInvoice'; const attributes = invoiceTemplateDTO; return this.uow.withTransaction(tenantId, async (trx) => { diff --git a/packages/server/src/services/PdfTemplate/PdfTemplateApplication.ts b/packages/server/src/services/PdfTemplate/PdfTemplateApplication.ts index 9f06006d7..2007f9a52 100644 --- a/packages/server/src/services/PdfTemplate/PdfTemplateApplication.ts +++ b/packages/server/src/services/PdfTemplate/PdfTemplateApplication.ts @@ -26,11 +26,13 @@ export class PdfTemplateApplication { public async createPdfTemplate( tenantId: number, templateName: string, + resource: string, invoiceTemplateDTO: ICreateInvoicePdfTemplateDTO ) { return this.createPdfTemplateService.createPdfTemplate( tenantId, templateName, + resource, invoiceTemplateDTO ); } diff --git a/packages/webapp/src/components/DrawersContainer.tsx b/packages/webapp/src/components/DrawersContainer.tsx index fdcaac652..89c1a13e5 100644 --- a/packages/webapp/src/components/DrawersContainer.tsx +++ b/packages/webapp/src/components/DrawersContainer.tsx @@ -28,7 +28,7 @@ import { EstimateCustomizeDrawer } from '@/containers/Sales/Estimates/EstimateCu import { ReceiptCustomizeDrawer } from '@/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeDrawer'; import { CreditNoteCustomizeDrawer } from '@/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawer'; import { PaymentReceivedCustomizeDrawer } from '@/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeDrawer'; -import { BrandingTemplatesDrawer } from '@/containers/Sales/Invoices/BrandingTemplates/BrandingTemplatesDrawer'; +import { BrandingTemplatesDrawer } from '@/containers/BrandingTemplates/BrandingTemplatesDrawer'; import { DRAWERS } from '@/constants/drawers'; diff --git a/packages/webapp/src/containers/AlertsContainer/registered.tsx b/packages/webapp/src/containers/AlertsContainer/registered.tsx index 5094b8783..a4180e25b 100644 --- a/packages/webapp/src/containers/AlertsContainer/registered.tsx +++ b/packages/webapp/src/containers/AlertsContainer/registered.tsx @@ -29,7 +29,7 @@ import { CashflowAlerts } from '../CashFlow/CashflowAlerts'; import { BankRulesAlerts } from '../Banking/Rules/RulesList/BankRulesAlerts'; import { SubscriptionAlerts } from '../Subscriptions/alerts/alerts'; import { BankAccountAlerts } from '@/containers/CashFlow/AccountTransactions/alerts'; -import { BrandingTemplatesAlerts } from '../Sales/Invoices/BrandingTemplates/alerts/BrandingTemplatesAlerts'; +import { BrandingTemplatesAlerts } from '../BrandingTemplates/alerts/BrandingTemplatesAlerts'; export default [ ...AccountsAlerts, diff --git a/packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/BrandTemplates.module.scss b/packages/webapp/src/containers/BrandingTemplates/BrandTemplates.module.scss similarity index 100% rename from packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/BrandTemplates.module.scss rename to packages/webapp/src/containers/BrandingTemplates/BrandTemplates.module.scss diff --git a/packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/BrandingTemplateBoot.tsx b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplateBoot.tsx similarity index 100% rename from packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/BrandingTemplateBoot.tsx rename to packages/webapp/src/containers/BrandingTemplates/BrandingTemplateBoot.tsx diff --git a/packages/webapp/src/containers/BrandingTemplates/BrandingTemplateForm.tsx b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplateForm.tsx new file mode 100644 index 000000000..7c9920cd8 --- /dev/null +++ b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplateForm.tsx @@ -0,0 +1,87 @@ +import * as Yup from 'yup'; +import { + ElementCustomize, + ElementCustomizeProps, +} from '../ElementCustomize/ElementCustomize'; +import { + transformToEditRequest, + transformToNewRequest, + useBrandingTemplateFormInitialValues, +} from './_utils'; +import { AppToaster } from '@/components'; +import { Intent } from '@blueprintjs/core'; +import { + useCreatePdfTemplate, + useEditPdfTemplate, +} from '@/hooks/query/pdf-templates'; +import { FormikHelpers } from 'formik'; +import { BrandingTemplateValues } from './types'; + +interface BrandingTemplateFormProps extends ElementCustomizeProps { + resource: string; + templateId?: number; + onSuccess?: () => void; + onError?: () => void; + defaultValues?: T; +} + +export function BrandingTemplateForm({ + templateId, + onSuccess, + onError, + defaultValues, + resource, + ...props +}: BrandingTemplateFormProps) { + const { mutateAsync: createPdfTemplate } = useCreatePdfTemplate(); + const { mutateAsync: editPdfTemplate } = useEditPdfTemplate(); + + const initialValues = useBrandingTemplateFormInitialValues(defaultValues); + + const handleFormSubmit = (values: T, { setSubmitting }: FormikHelpers) => { + const handleSuccess = (message: string) => { + AppToaster.show({ intent: Intent.SUCCESS, message }); + setSubmitting(false); + onSuccess && onSuccess(); + }; + const handleError = (message: string) => { + AppToaster.show({ intent: Intent.DANGER, message }); + setSubmitting(false); + onError && onError(); + }; + if (templateId) { + const reqValues = transformToEditRequest(values); + setSubmitting(true); + + // Edit existing template + editPdfTemplate({ templateId, values: reqValues }) + .then(() => handleSuccess('PDF template updated successfully!')) + .catch(() => + handleError('An error occurred while updating the PDF template.'), + ); + } else { + const reqValues = transformToNewRequest(values, resource); + setSubmitting(true); + + // Create new template + createPdfTemplate(reqValues) + .then(() => handleSuccess('PDF template created successfully!')) + .catch(() => + handleError('An error occurred while creating the PDF template.'), + ); + } + }; + + return ( + + initialValues={initialValues} + validationSchema={validationSchema} + onSubmit={handleFormSubmit} + {...props} + /> + ); +} + +export const validationSchema = Yup.object().shape({ + templateName: Yup.string().required('Template Name is required'), +}); diff --git a/packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/BrandingTemplatesActionsBar.tsx b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesActionsBar.tsx similarity index 100% rename from packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/BrandingTemplatesActionsBar.tsx rename to packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesActionsBar.tsx diff --git a/packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/BrandingTemplatesBoot.tsx b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesBoot.tsx similarity index 82% rename from packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/BrandingTemplatesBoot.tsx rename to packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesBoot.tsx index 3a1470253..ee0229f9b 100644 --- a/packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/BrandingTemplatesBoot.tsx +++ b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesBoot.tsx @@ -1,5 +1,6 @@ import React, { createContext } from 'react'; import { useGetPdfTemplates } from '@/hooks/query/pdf-templates'; +import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; interface BrandingTemplatesBootValues { pdfTemplates: any; @@ -15,8 +16,11 @@ interface BrandingTemplatesBootProps { } function BrandingTemplatesBoot({ ...props }: BrandingTemplatesBootProps) { + const { payload } = useDrawerContext(); + const resource = payload?.resource || null; + const { data: pdfTemplates, isLoading: isPdfTemplatesLoading } = - useGetPdfTemplates(); + useGetPdfTemplates({ resource }); const provider = { pdfTemplates, diff --git a/packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/BrandingTemplatesContent.tsx b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesContent.tsx similarity index 100% rename from packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/BrandingTemplatesContent.tsx rename to packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesContent.tsx diff --git a/packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/BrandingTemplatesDrawer.tsx b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesDrawer.tsx similarity index 95% rename from packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/BrandingTemplatesDrawer.tsx rename to packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesDrawer.tsx index afc51c22c..b4b9679ca 100644 --- a/packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/BrandingTemplatesDrawer.tsx +++ b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesDrawer.tsx @@ -16,12 +16,13 @@ function BrandingTemplatesDrawerRoot({ name, // #withDrawer isOpen, - payload: {}, + payload, }) { return ( diff --git a/packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/BrandingTemplatesTable.tsx b/packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesTable.tsx similarity index 100% rename from packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/BrandingTemplatesTable.tsx rename to packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesTable.tsx diff --git a/packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/_components.tsx b/packages/webapp/src/containers/BrandingTemplates/_components.tsx similarity index 100% rename from packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/_components.tsx rename to packages/webapp/src/containers/BrandingTemplates/_components.tsx diff --git a/packages/webapp/src/containers/BrandingTemplates/_utils.ts b/packages/webapp/src/containers/BrandingTemplates/_utils.ts new file mode 100644 index 000000000..416fe7f88 --- /dev/null +++ b/packages/webapp/src/containers/BrandingTemplates/_utils.ts @@ -0,0 +1,52 @@ +import { omit } from 'lodash'; +import { + CreatePdfTemplateValues, + EditPdfTemplateValues, +} from '@/hooks/query/pdf-templates'; +import { useBrandingTemplateBoot } from './BrandingTemplateBoot'; +import { transformToForm } from '@/utils'; +import { BrandingTemplateValues } from './types'; +import { useFormikContext } from 'formik'; + +export const transformToEditRequest = ( + values: T, +): EditPdfTemplateValues => { + return { + templateName: values.templateName, + attributes: omit(values, ['templateName']), + }; +}; + +export const transformToNewRequest = ( + values: T, + resource: string +): CreatePdfTemplateValues => { + return { + resource, + templateName: values.templateName, + attributes: omit(values, ['templateName']), + }; +}; + +export const useIsTemplateNamedFilled = () => { + const { values } = useFormikContext(); + + return values.templateName && values.templateName?.length >= 4; +}; + +export const useBrandingTemplateFormInitialValues = < + T extends BrandingTemplateValues, +>( + initialValues = {}, +) => { + const { pdfTemplate } = useBrandingTemplateBoot(); + + const defaultPdfTemplate = { + templateName: pdfTemplate?.templateName, + ...pdfTemplate?.attributes, + }; + return { + ...initialValues, + ...(transformToForm(defaultPdfTemplate, initialValues) as T), + }; +}; diff --git a/packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/alerts/BrandingTemplatesAlerts.ts b/packages/webapp/src/containers/BrandingTemplates/alerts/BrandingTemplatesAlerts.ts similarity index 100% rename from packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/alerts/BrandingTemplatesAlerts.ts rename to packages/webapp/src/containers/BrandingTemplates/alerts/BrandingTemplatesAlerts.ts diff --git a/packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/alerts/DeleteBrandingTemplateAlert.tsx b/packages/webapp/src/containers/BrandingTemplates/alerts/DeleteBrandingTemplateAlert.tsx similarity index 100% rename from packages/webapp/src/containers/Sales/Invoices/BrandingTemplates/alerts/DeleteBrandingTemplateAlert.tsx rename to packages/webapp/src/containers/BrandingTemplates/alerts/DeleteBrandingTemplateAlert.tsx diff --git a/packages/webapp/src/containers/BrandingTemplates/types.ts b/packages/webapp/src/containers/BrandingTemplates/types.ts new file mode 100644 index 000000000..a74109c46 --- /dev/null +++ b/packages/webapp/src/containers/BrandingTemplates/types.ts @@ -0,0 +1,5 @@ + + +export interface BrandingTemplateValues { + templateName: string; +} \ No newline at end of file diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx index 4ff664f89..31b02d8d3 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx @@ -1,39 +1,35 @@ -import { Box } from '@/components'; -import { Classes } from '@blueprintjs/core'; +import { useFormikContext } from 'formik'; import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize'; import { CreditNoteCustomizeGeneralField } from './CreditNoteCustomizeGeneralFields'; import { CreditNoteCustomizeContentFields } from './CreditNoteCutomizeContentFields'; import { CreditNotePaperTemplate } from './CreditNotePaperTemplate'; import { CreditNoteCustomizeValues } from './types'; import { initialValues } from './constants'; -import { useFormikContext } from 'formik'; -export default function CreditNoteCustomizeContent() { +export function CreditNoteCustomizeContent() { const handleFormSubmit = (values: CreditNoteCustomizeValues) => {}; return ( - - - initialValues={initialValues} - onSubmit={handleFormSubmit} - > - - - + + initialValues={initialValues} + onSubmit={handleFormSubmit} + > + + + - - - + + + - - - + + + - - asdfasdfdsaf #3 - - - + + asdfasdfdsaf #3 + + ); } diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawerBody.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawerBody.tsx new file mode 100644 index 000000000..3472833cb --- /dev/null +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawerBody.tsx @@ -0,0 +1,18 @@ +import { Box } from '@/components'; +import { CreditNoteCustomizeContent } from './CreditNoteCustomizeContent'; +import { Classes } from '@blueprintjs/core'; +import { BrandingTemplateBoot } from '@/containers/BrandingTemplates/BrandingTemplateBoot'; +import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; + +export default function CreditNoteCustomizeDrawerBody() { + const { payload } = useDrawerContext(); + const templateId = payload.templateId; + + return ( + + + + + + ); +} diff --git a/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.tsx b/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.tsx index 963ae005d..3def3a944 100644 --- a/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.tsx +++ b/packages/webapp/src/containers/Sales/CreditNotes/CreditNotesLanding/CreditNotesActionsBar.tsx @@ -101,7 +101,7 @@ function CreditNotesActionsBar({ }; // Handle the customize button click. const handleCustomizeBtnClick = () => { - openDrawer(DRAWERS.CREDIT_NOTE_CUSTOMIZE); + openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'CreditNote' }); } return ( @@ -174,7 +174,7 @@ function CreditNotesActionsBar({ } diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx index 15250b8e7..82f05c618 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeContent.tsx @@ -1,40 +1,49 @@ -import React from 'react'; -import { Box } from '@/components'; import { Classes } from '@blueprintjs/core'; +import { useFormikContext } from 'formik'; +import { Box } from '@/components'; import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize'; import { EstimateCustomizeGeneralField } from './EstimateCustomizeFieldsGeneral'; import { EstimateCustomizeContentFields } from './EstimateCustomizeFieldsContent'; import { EstimatePaperTemplate } from './EstimatePaperTemplate'; import { EstimateCustomizeValues } from './types'; import { initialValues } from './constants'; -import { useFormikContext } from 'formik'; +import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; +import { useDrawerActions } from '@/hooks/state'; +import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTemplateForm'; -export default function EstimateCustomizeContent() { - const handleFormSubmit = (values: EstimateCustomizeValues) => {}; +export function EstimateCustomizeContent() { + const { payload, name } = useDrawerContext(); + const { closeDrawer } = useDrawerActions(); + + const templateId = payload?.templateId || null; + + const handleSuccess = () => { + closeDrawer(name); + }; return ( - - - initialValues={initialValues} - onSubmit={handleFormSubmit} - > - - - + + templateId={templateId} + defaultValues={initialValues} + onSuccess={handleSuccess} + resource={'SaleEstimate'} + > + + + - - - + + + - - - + + + - - asdfasdfdsaf #3 - - - + + asdfasdfdsaf #3 + + ); } diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawer.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawer.tsx index 6a6042ba8..54b0ab3f7 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawer.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawer.tsx @@ -4,8 +4,8 @@ import * as R from 'ramda'; import { Drawer, DrawerSuspense } from '@/components'; import withDrawers from '@/containers/Drawer/withDrawers'; -const EstimateCustomizeContent = React.lazy( - () => import('./EstimateCustomizeContent'), +const EstimateCustomizeDrawerBody = React.lazy( + () => import('./EstimateCustomizeDrawerBody'), ); /** @@ -22,7 +22,7 @@ function EstimateCustomizeDrawerRoot({ return ( - + ); diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawerBody.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawerBody.tsx new file mode 100644 index 000000000..49ada83a3 --- /dev/null +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawerBody.tsx @@ -0,0 +1,18 @@ +import { Box } from '@/components'; +import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; +import { BrandingTemplateBoot } from '@/containers/BrandingTemplates/BrandingTemplateBoot'; +import { Classes } from '@blueprintjs/core'; +import { EstimateCustomizeContent } from './EstimateCustomizeContent'; + +export default function EstimateCustomizeDrawerBody() { + const { payload } = useDrawerContext(); + const templateId = payload?.templateId || null; + + return ( + + + + + + ); +} diff --git a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx index b1fcc0d81..837f1be48 100644 --- a/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx +++ b/packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx @@ -1,6 +1,13 @@ // @ts-nocheck import { Classes, Text } from '@blueprintjs/core'; -import { FFormGroup, FSwitch, Group, Stack } from '@/components'; +import { + FFormGroup, + FInputGroup, + FSwitch, + FieldRequiredHint, + Group, + Stack, +} from '@/components'; import { FColorInput } from '@/components/Forms/FColorInput'; // import styles from './InvoiceCustomizeFields.module.scss'; @@ -10,11 +17,21 @@ export function EstimateCustomizeGeneralField() {

General Branding

- Set your invoice details to be automatically applied every time
you + Set your invoice details to be automatically applied every timeyou create a new invoice.

+ } + fastField + style={{ marginBottom: 10 }} + > + + + { - openDrawer(DRAWERS.ESTIMATE_CUSTOMIZE); + openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'SaleEstimate' }); }; return ( @@ -192,7 +192,7 @@ function EstimateActionsBar({ } diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomize.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomize.tsx index 9ce80d618..c45e98c19 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomize.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomize.tsx @@ -1,8 +1,8 @@ // @ts-nocheck import { Classes } from '@blueprintjs/core'; import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; -import { BrandingTemplateBoot } from '../BrandingTemplates/BrandingTemplateBoot'; import { InvoiceCustomizeContent } from './InvoiceCustomizeContent'; +import { BrandingTemplateBoot } from '@/containers/BrandingTemplates/BrandingTemplateBoot'; import { Box } from '@/components'; export default function InvoiceCustomize() { diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx index ec4b4e056..e6bc0dbd6 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx @@ -1,8 +1,6 @@ import React from 'react'; import * as R from 'ramda'; -import { AppToaster } from '@/components'; -import { Intent } from '@blueprintjs/core'; -import { FormikHelpers, useFormikContext } from 'formik'; +import { useFormikContext } from 'formik'; import { InvoicePaperTemplate, InvoicePaperTemplateProps, @@ -11,70 +9,29 @@ import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize'; import { InvoiceCustomizeGeneralField } from './InvoiceCustomizeGeneralFields'; import { InvoiceCustomizeContentFields } from './InvoiceCutomizeContentFields'; import { InvoiceCustomizeValues } from './types'; -import { - useCreatePdfTemplate, - useEditPdfTemplate, -} from '@/hooks/query/pdf-templates'; -import { - transformToEditRequest, - transformToNewRequest, - useInvoiceCustomizeInitialValues, -} from './utils'; import { InvoiceCustomizeSchema } from './InvoiceCustomizeForm.schema'; import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; import { useDrawerActions } from '@/hooks/state'; +import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTemplateForm'; +import { initialValues } from './constants'; export function InvoiceCustomizeContent() { - const { mutateAsync: createPdfTemplate } = useCreatePdfTemplate(); - const { mutateAsync: editPdfTemplate } = useEditPdfTemplate(); - const { payload, name } = useDrawerContext(); const { closeDrawer } = useDrawerActions(); const templateId = payload?.templateId || null; - const handleFormSubmit = ( - values: InvoiceCustomizeValues, - { setSubmitting }: FormikHelpers, - ) => { - const handleSuccess = (message: string) => { - AppToaster.show({ intent: Intent.SUCCESS, message }); - setSubmitting(false); - closeDrawer(name); - }; - const handleError = (message: string) => { - AppToaster.show({ intent: Intent.DANGER, message }); - setSubmitting(false); - }; - if (templateId) { - const reqValues = transformToEditRequest(values); - setSubmitting(true); - - // Edit existing template - editPdfTemplate({ templateId, values: reqValues }) - .then(() => handleSuccess('PDF template updated successfully!')) - .catch(() => - handleError('An error occurred while updating the PDF template.'), - ); - } else { - const reqValues = transformToNewRequest(values); - setSubmitting(true); - - // Create new template - createPdfTemplate(reqValues) - .then(() => handleSuccess('PDF template created successfully!')) - .catch(() => - handleError('An error occurred while creating the PDF template.'), - ); - } + const handleSuccess = () => { + closeDrawer(name); }; - const initialValues = useInvoiceCustomizeInitialValues(); return ( - - initialValues={initialValues} + + templateId={templateId} + defaultValues={initialValues} validationSchema={InvoiceCustomizeSchema} - onSubmit={handleFormSubmit} + onSuccess={handleSuccess} + resource={'SaleInvoice'} > @@ -91,7 +48,7 @@ export function InvoiceCustomizeContent() { asdfasdfdsaf #3 - + ); } diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/types.ts b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/types.ts index 3e972b020..f7ed6ea5e 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/types.ts +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/types.ts @@ -1,6 +1,6 @@ -export interface InvoiceCustomizeValues { - templateName: string; +import { BrandingTemplateValues } from "@/containers/BrandingTemplates/types"; +export interface InvoiceCustomizeValues extends BrandingTemplateValues { // Colors primaryColor?: string; secondaryColor?: string; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/utils.ts b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/utils.ts index f3fcd8385..130986261 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/utils.ts +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/utils.ts @@ -5,9 +5,9 @@ import { CreatePdfTemplateValues, EditPdfTemplateValues, } from '@/hooks/query/pdf-templates'; -import { useBrandingTemplateBoot } from '../BrandingTemplates/BrandingTemplateBoot'; import { transformToForm } from '@/utils'; import { initialValues } from './constants'; +import { useBrandingTemplateBoot } from '@/containers/BrandingTemplates/BrandingTemplateBoot'; export const transformToEditRequest = ( values: InvoiceCustomizeValues, diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.tsx index bf8fe5bba..205c64694 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoicesLanding/InvoicesActionsBar.tsx @@ -109,7 +109,7 @@ function InvoiceActionsBar({ // Handles the invoice customize button click. const handleCustomizeBtnClick = () => { - openDrawer(DRAWERS.BRANDING_TEMPLATES); + openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'SaleInvoice' }); }; return ( @@ -190,7 +190,7 @@ function InvoiceActionsBar({ } diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomize.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomize.tsx new file mode 100644 index 000000000..a2db6c48e --- /dev/null +++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomize.tsx @@ -0,0 +1,18 @@ +import { Box } from '@/components'; +import { Classes } from '@blueprintjs/core'; +import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; +import { PaymentReceivedCustomizeContent } from './PaymentReceivedCustomizeContent'; +import { BrandingTemplateBoot } from '@/containers/BrandingTemplates/BrandingTemplateBoot'; + +export default function PaymentReceivedCustomize() { + const { payload } = useDrawerContext(); + const templateId = payload.templateId; + + return ( + + + + + + ); +} diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx index 67a28fb31..b84bbb168 100644 --- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx +++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeContent.tsx @@ -1,40 +1,47 @@ -import React from 'react'; import { useFormikContext } from 'formik'; -import { Classes } from '@blueprintjs/core'; -import { Box } from '@/components'; import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize'; import { PaymentReceivedCustomizeGeneralField } from './PaymentReceivedCustomizeFieldsGeneral'; import { PaymentReceivedCustomizeContentFields } from './PaymentReceivedCustomizeFieldsContent'; import { PaymentReceivedCustomizeValues } from './types'; import { PaymentReceivedPaperTemplate } from './PaymentReceivedPaperTemplate'; import { initialValues } from './constants'; +import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; +import { useDrawerActions } from '@/hooks/state'; +import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTemplateForm'; -export default function PaymentReceivedCustomizeContent() { - const handleFormSubmit = (values: PaymentReceivedCustomizeValues) => {}; +export function PaymentReceivedCustomizeContent() { + const { payload, name } = useDrawerContext(); + const { closeDrawer } = useDrawerActions(); + + const templateId = payload?.templateId || null; + + const handleSuccess = () => { + closeDrawer(name); + }; return ( - - - initialValues={initialValues} - onSubmit={handleFormSubmit} - > - - - + + templateId={templateId} + defaultValues={initialValues} + onSuccess={handleSuccess} + resource={'PaymentReceive'} + > + + + - - - + + + - - - + + + - - asdfasdfdsaf #3 - - - + + asdfasdfdsaf #3 + + ); } diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeDrawer.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeDrawer.tsx index 78ba99dba..ccf830905 100644 --- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeDrawer.tsx +++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeDrawer.tsx @@ -4,8 +4,8 @@ import * as R from 'ramda'; import { Drawer, DrawerSuspense } from '@/components'; import withDrawers from '@/containers/Drawer/withDrawers'; -const PaymentReceivedCustomizeContent = React.lazy( - () => import('./PaymentReceivedCustomizeContent'), +const PaymentReceivedCustomize = React.lazy( + () => import('./PaymentReceivedCustomize'), ); /** @@ -16,12 +16,12 @@ function PaymentReceivedCustomizeDrawerRoot({ name, // #withDrawer isOpen, - payload: {}, + payload }) { return ( - + - + ); diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts index da939b914..4b735653a 100644 --- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts +++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/constants.ts @@ -1,4 +1,6 @@ export const initialValues = { + templateName: '', + // Colors primaryColor: '#2c3dd8', secondaryColor: '#2c3dd8', diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/types.ts b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/types.ts index 9e5f89170..1da7073b8 100644 --- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/types.ts +++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/types.ts @@ -1,4 +1,6 @@ -export interface PaymentReceivedCustomizeValues { +import { BrandingTemplateValues } from '@/containers/BrandingTemplates/types'; + +export interface PaymentReceivedCustomizeValues extends BrandingTemplateValues { // Colors primaryColor?: string; secondaryColor?: string; diff --git a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsLanding/PaymentsReceivedActionsBar.tsx b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsLanding/PaymentsReceivedActionsBar.tsx index eca4dc208..412dc094e 100644 --- a/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsLanding/PaymentsReceivedActionsBar.tsx +++ b/packages/webapp/src/containers/Sales/PaymentsReceived/PaymentsLanding/PaymentsReceivedActionsBar.tsx @@ -113,7 +113,7 @@ function PaymentsReceivedActionsBar({ }; // Handle the customize button click. const handleCustomizeBtnClick = () => { - openDrawer(DRAWERS.PAYMENT_RECEIVED_CUSTOMIZE); + openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'PaymentReceive' }); }; return ( @@ -195,7 +195,7 @@ function PaymentsReceivedActionsBar({ } diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx index 3b4246101..cc68a1759 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeContent.tsx @@ -1,5 +1,3 @@ -import { Box } from '@/components'; -import { Classes } from '@blueprintjs/core'; import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize'; import { ReceiptCustomizeGeneralField } from './ReceiptCustomizeFieldsGeneral'; import { ReceiptCustomizeFieldsContent } from './ReceiptCustomizeFieldsContent'; @@ -7,33 +5,43 @@ import { ReceiptPaperTemplate } from './ReceiptPaperTemplate'; import { ReceiptCustomizeValues } from './types'; import { initialValues } from './constants'; import { useFormikContext } from 'formik'; +import { BrandingTemplateForm } from '@/containers/BrandingTemplates/BrandingTemplateForm'; +import { useDrawerActions } from '@/hooks/state'; +import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; -export default function ReceiptCustomizeContent() { - const handleFormSubmit = (values: ReceiptCustomizeValues) => {}; +export function ReceiptCustomizeContent() { + const { payload, name } = useDrawerContext(); + const { closeDrawer } = useDrawerActions(); + + const templateId = payload?.templateId || null; + + const handleFormSuccess = () => { + closeDrawer(name); + }; return ( - - - initialValues={initialValues} - onSubmit={handleFormSubmit} - > - - - + + templateId={templateId} + initialValues={initialValues} + onSuccess={handleFormSuccess} + resource={'SaleReceipt'} + > + + + - - - + + + - - - + + + - - asdfasdfdsaf #3 - - - + + asdfasdfdsaf #3 + + ); } diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeDrawer.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeDrawer.tsx index 48dbdaebc..7c54cf61d 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeDrawer.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeDrawer.tsx @@ -4,8 +4,8 @@ import * as R from 'ramda'; import { Drawer, DrawerSuspense } from '@/components'; import withDrawers from '@/containers/Drawer/withDrawers'; -const ReceiptCustomizeContent = React.lazy( - () => import('./ReceiptCustomizeContent'), +const ReceiptCustomizeDrawerBody = React.lazy( + () => import('./ReceiptCustomizeDrawerBody'), ); /** @@ -16,12 +16,12 @@ function ReceiptCustomizeDrawerRoot({ name, // #withDrawer isOpen, - payload: {}, + payload, }) { return ( - + - + ); diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeDrawerBody.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeDrawerBody.tsx new file mode 100644 index 000000000..8b48a57b7 --- /dev/null +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeDrawerBody.tsx @@ -0,0 +1,18 @@ +import { Box } from '@/components'; +import { Classes } from '@blueprintjs/core'; +import { ReceiptCustomizeContent } from './ReceiptCustomizeContent'; +import { BrandingTemplateBoot } from '@/containers/BrandingTemplates/BrandingTemplateBoot'; +import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; + +export default function ReceiptCustomizeDrawerBody() { + const { payload } = useDrawerContext(); + const templateId = payload.templateId; + + return ( + + + + + + ); +} diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts index b80b50162..241020ce2 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/constants.ts @@ -1,4 +1,6 @@ export const initialValues = { + templateName: '', + // Colors primaryColor: '#2c3dd8', secondaryColor: '#2c3dd8', diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts index f411639ea..8b9ccc54c 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/types.ts @@ -1,4 +1,6 @@ -export interface ReceiptCustomizeValues { +import { BrandingTemplateValues } from "@/containers/BrandingTemplates/types"; + +export interface ReceiptCustomizeValues extends BrandingTemplateValues { // Colors primaryColor?: string; secondaryColor?: string; diff --git a/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx b/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx index a8f95d77e..d45554459 100644 --- a/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx +++ b/packages/webapp/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptActionsBar.tsx @@ -115,7 +115,7 @@ function ReceiptActionsBar({ }; // Handle customize button click. const handleCustomizeBtnClick = () => { - openDrawer(DRAWERS.RECEIPT_CUSTOMIZE); + openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'SaleReceipt' }); }; return ( @@ -198,7 +198,7 @@ function ReceiptActionsBar({ } diff --git a/packages/webapp/src/hooks/query/pdf-templates.ts b/packages/webapp/src/hooks/query/pdf-templates.ts index 0e03aa81b..eee064585 100644 --- a/packages/webapp/src/hooks/query/pdf-templates.ts +++ b/packages/webapp/src/hooks/query/pdf-templates.ts @@ -153,12 +153,16 @@ export const useGetPdfTemplate = ( // Hook for getting multiple PDF templates export const useGetPdfTemplates = ( + query?: { resource: string }, options?: UseQueryOptions, ): UseQueryResult => { const apiRequest = useApiRequest(); return useQuery( - PdfTemplatesQueryKey, - () => apiRequest.get('/pdf-templates').then((res) => res.data), + [PdfTemplatesQueryKey, query], + () => + apiRequest + .get('/pdf-templates', { params: query }) + .then((res) => res.data), options, ); };