feat: templates customize

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

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>
);
}