QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 21:30:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: templates customize

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-09-12 17:49:00 +02:00
parent 12226d469a
commit 411ac55986
17 changed files with 293 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesActionsBar.tsx
View File

@@ -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 (
<DashboardActionsBar>
<NavbarGroup>
@@ -24,7 +34,7 @@ function BrandingTemplateActionsBarRoot({ openDrawer }) {
onClick={handleCreateBtnClick}
minimal
>
Create Invoice Branding
{label}
</Button>
</NavbarGroup>
</DashboardActionsBar>

2
packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesContent.tsx
View File

@@ -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 (

8
packages/webapp/src/containers/BrandingTemplates/BrandingTemplatesTable.tsx
View File

@@ -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 (

32
packages/webapp/src/containers/BrandingTemplates/_utils.ts
View File

@@ -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 = <T extends BrandingTemplateValues>(
values: T,
@@ -19,7 +21,7 @@ export const transformToEditRequest = <T extends BrandingTemplateValues>(
export const transformToNewRequest = <T extends BrandingTemplateValues>(
values: T,
resource: string
resource: string,
): CreatePdfTemplateValues => {
return {
resource,
@@ -28,12 +30,6 @@ export const transformToNewRequest = <T extends BrandingTemplateValues>(
};
};
export const useIsTemplateNamedFilled = () => {
const { values } = useFormikContext<BrandingTemplateValues>();
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';
}

8
packages/webapp/src/containers/BrandingTemplates/utils.ts Normal file
View File

@@ -0,0 +1,8 @@
import { useFormikContext } from 'formik';
import { BrandingTemplateValues } from './types';
export const useIsTemplateNamedFilled = () => {
const { values } = useFormikContext<BrandingTemplateValues>();
return values.templateName && values.templateName?.length >= 4;
};

22
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeContent.tsx
View File

@@ -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 (
<ElementCustomize<CreditNoteCustomizeValues>
initialValues={initialValues}
onSubmit={handleFormSubmit}
<BrandingTemplateForm<CreditNoteCustomizeValues>
resource={'CreditNote'}
templateId={templateId}
defaultValues={initialValues}
onSuccess={handleSuccess}
>
<ElementCustomize.PaperTemplate>
<CreditNotePaperTemplateFormConnected />
@@ -29,7 +41,7 @@ export function CreditNoteCustomizeContent() {
<ElementCustomize.FieldsTab id={'totals'} label={'Totals'}>
asdfasdfdsaf #3
</ElementCustomize.FieldsTab>
</ElementCustomize>
</BrandingTemplateForm>
);
}

10
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawer.tsx
View File

@@ -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 (
<Drawer isOpen={isOpen} name={name} size={'100%'}>
<Drawer isOpen={isOpen} name={name} payload={payload} size={'100%'}>
<DrawerSuspense>
<CreditNoteCustomizeContent />
<CreditNoteCustomizeDrawerBody />
</DrawerSuspense>
</Drawer>
);

2
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeDrawerBody.tsx
View File

@@ -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 (
<Box className={Classes.DRAWER_BODY}>

90
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/CreditNoteCustomizeGeneralFields.tsx
View File

@@ -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 (
<Stack style={{ padding: 20, flex: '1 1 auto' }}>
<Stack spacing={0}>
@@ -14,45 +24,57 @@ export function CreditNoteCustomizeGeneralField() {
</p>
</Stack>
<Stack spacing={0}>
<FFormGroup
name={'primaryColor'}
label={'Primary Color'}
style={{ justifyContent: 'space-between' }}
inline
fastField
>
<FColorInput
<FFormGroup
name={'templateName'}
label={'Template Name'}
labelInfo={<FieldRequiredHint />}
fastField
style={{ marginBottom: 10 }}
>
<FInputGroup name={'templateName'} fastField />
</FFormGroup>
<Overlay visible={!isTemplateNameFilled}>
<Stack spacing={0}>
<FFormGroup
name={'primaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
label={'Primary Color'}
style={{ justifyContent: 'space-between' }}
inline
fastField
/>
</FFormGroup>
>
<FColorInput
name={'primaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
fastField
/>
</FFormGroup>
<FFormGroup
name={'secondaryColor'}
label={'Secondary Color'}
style={{ justifyContent: 'space-between' }}
inline
fastField
>
<FColorInput
<FFormGroup
name={'secondaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
label={'Secondary Color'}
style={{ justifyContent: 'space-between' }}
inline
fastField
/>
</FFormGroup>
>
<FColorInput
name={'secondaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
fastField
/>
</FFormGroup>
<FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
<FSwitch
name={'showCompanyLogo'}
label={'Display company logo in the paper'}
style={{ fontSize: 14 }}
large
fastField
/>
</FFormGroup>
</Stack>
<FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
<FSwitch
name={'showCompanyLogo'}
label={'Display company logo in the paper'}
style={{ fontSize: 14 }}
large
fastField
/>
</FFormGroup>
</Stack>
</Overlay>
</Stack>
);
}

2
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/constants.ts
View File

@@ -1,4 +1,6 @@
export const initialValues = {
templateName: '',
// Colors
primaryColor: '#2c3dd8',
secondaryColor: '#2c3dd8',

4
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteCustomize/types.ts
View File

@@ -1,4 +1,6 @@
export interface CreditNoteCustomizeValues {
import { BrandingTemplateValues } from '@/containers/BrandingTemplates/types';
export interface CreditNoteCustomizeValues extends BrandingTemplateValues {
// Colors
primaryColor?: string;
secondaryColor?: string;

4
packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeDrawer.tsx
View File

@@ -17,10 +17,10 @@ function EstimateCustomizeDrawerRoot({
// #withDrawer
isOpen,
payload: {},
payload,
}) {
return (
<Drawer isOpen={isOpen} name={name} size={'100%'}>
<Drawer isOpen={isOpen} name={name} payload={payload} size={'100%'}>
<DrawerSuspense>
<EstimateCustomizeDrawerBody />
</DrawerSuspense>

73
packages/webapp/src/containers/Sales/Estimates/EstimateCustomize/EstimateCustomizeFieldsGeneral.tsx
View File

@@ -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 (
<Stack style={{ padding: 20, flex: '1 1 auto' }}>
<Stack spacing={0}>
@@ -32,45 +35,47 @@ export function EstimateCustomizeGeneralField() {
<FInputGroup name={'templateName'} fastField />
</FFormGroup>
<Stack spacing={0}>
<FFormGroup
name={'primaryColor'}
label={'Primary Color'}
style={{ justifyContent: 'space-between' }}
inline
fastField
>
<FColorInput
<Overlay visible={!isTemplateNameFilled}>
<Stack spacing={0}>
<FFormGroup
name={'primaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
label={'Primary Color'}
style={{ justifyContent: 'space-between' }}
inline
fastField
/>
</FFormGroup>
>
<FColorInput
name={'primaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
fastField
/>
</FFormGroup>
<FFormGroup
name={'secondaryColor'}
label={'Secondary Color'}
style={{ justifyContent: 'space-between' }}
inline
fastField
>
<FColorInput
<FFormGroup
name={'secondaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
label={'Secondary Color'}
style={{ justifyContent: 'space-between' }}
inline
fastField
/>
</FFormGroup>
>
<FColorInput
name={'secondaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
fastField
/>
</FFormGroup>
<FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
<FSwitch
name={'showCompanyLogo'}
label={'Display company logo in the paper'}
style={{ fontSize: 14 }}
large
fastField
/>
</FFormGroup>
</Stack>
<FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
<FSwitch
name={'showCompanyLogo'}
label={'Display company logo in the paper'}
style={{ fontSize: 14 }}
large
fastField
/>
</FFormGroup>
</Stack>
</Overlay>
</Stack>
);
}

2
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx
View File

@@ -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();

6
packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/utils.ts
View File

@@ -28,12 +28,6 @@ export const transformToNewRequest = (
};
};
export const useIsTemplateNamedFilled = () => {
const { values } = useFormikContext<InvoiceCustomizeValues>();
return values.templateName && values.templateName?.length >= 4;
};
export const useInvoiceCustomizeInitialValues = (): InvoiceCustomizeValues => {
const { pdfTemplate } = useBrandingTemplateBoot();

91
packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceivedCustomize/PaymentReceivedCustomizeFieldsGeneral.tsx
View File

@@ -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 (
<Stack style={{ padding: 20, flex: '1 1 auto' }}>
<Stack spacing={0}>
@@ -15,45 +24,57 @@ export function PaymentReceivedCustomizeGeneralField() {
</p>
</Stack>
<Stack spacing={0}>
<FFormGroup
name={'primaryColor'}
label={'Primary Color'}
style={{ justifyContent: 'space-between' }}
inline
fastField
>
<FColorInput
<FFormGroup
name={'templateName'}
label={'Template Name'}
labelInfo={<FieldRequiredHint />}
style={{ marginBottom: 10 }}
fastField
>
<FInputGroup name={'templateName'} fastField />
</FFormGroup>
<Overlay visible={!isTemplateNameFilled}>
<Stack spacing={0}>
<FFormGroup
name={'primaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
label={'Primary Color'}
style={{ justifyContent: 'space-between' }}
inline
fastField
/>
</FFormGroup>
>
<FColorInput
name={'primaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
fastField
/>
</FFormGroup>
<FFormGroup
name={'secondaryColor'}
label={'Secondary Color'}
style={{ justifyContent: 'space-between' }}
inline
fastField
>
<FColorInput
<FFormGroup
name={'secondaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
label={'Secondary Color'}
style={{ justifyContent: 'space-between' }}
inline
fastField
/>
</FFormGroup>
>
<FColorInput
name={'secondaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
fastField
/>
</FFormGroup>
<FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
<FSwitch
name={'showCompanyLogo'}
label={'Display company logo in the paper'}
style={{ fontSize: 14 }}
large
fastField
/>
</FFormGroup>
</Stack>
<FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
<FSwitch
name={'showCompanyLogo'}
label={'Display company logo in the paper'}
style={{ fontSize: 14 }}
large
fastField
/>
</FFormGroup>
</Stack>
</Overlay>
</Stack>
);
}

90
packages/webapp/src/containers/Sales/Receipts/ReceiptCustomize/ReceiptCustomizeFieldsGeneral.tsx
View File

@@ -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 (
<Stack style={{ padding: 20, flex: '1 1 auto' }}>
<Stack spacing={0}>
@@ -14,45 +24,57 @@ export function ReceiptCustomizeGeneralField() {
</p>
</Stack>
<Stack spacing={0}>
<FFormGroup
name={'primaryColor'}
label={'Primary Color'}
style={{ justifyContent: 'space-between' }}
inline
fastField
>
<FColorInput
<FFormGroup
name={'templateName'}
label={'Template Name'}
labelInfo={<FieldRequiredHint />}
fastField
style={{ marginBottom: 10 }}
>
<FInputGroup name={'templateName'} fastField />
</FFormGroup>
<Overlay visible={!isTemplateNameFilled}>
<Stack spacing={0}>
<FFormGroup
name={'primaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
label={'Primary Color'}
style={{ justifyContent: 'space-between' }}
inline
fastField
/>
</FFormGroup>
>
<FColorInput
name={'primaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
fastField
/>
</FFormGroup>
<FFormGroup
name={'secondaryColor'}
label={'Secondary Color'}
style={{ justifyContent: 'space-between' }}
inline
fastField
>
<FColorInput
<FFormGroup
name={'secondaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
label={'Secondary Color'}
style={{ justifyContent: 'space-between' }}
inline
fastField
/>
</FFormGroup>
>
<FColorInput
name={'secondaryColor'}
inputProps={{ style: { maxWidth: 120 } }}
fastField
/>
</FFormGroup>
<FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
<FSwitch
name={'showCompanyLogo'}
label={'Display company logo in the paper'}
style={{ fontSize: 14 }}
large
fastField
/>
</FFormGroup>
</Stack>
<FFormGroup name={'showCompanyLogo'} label={'Logo'} fastField>
<FSwitch
name={'showCompanyLogo'}
label={'Display company logo in the paper'}
style={{ fontSize: 14 }}
large
fastField
/>
</FFormGroup>
</Stack>
</Overlay>
</Stack>
);
}