From f644ed670874dc1ee731112b86ad5ef34c60b3fe Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Mon, 9 Sep 2024 21:07:22 +0200 Subject: [PATCH] feat: element customize component --- .../Forms/ColorInput.module.scss} | 0 .../Forms/ColorInput.tsx} | 8 +- .../Forms/FColorInput.tsx} | 38 +++--- .../ElementCustomize.module.scss | 24 ++++ .../ElementCustomize/ElementCustomize.tsx | 74 +++++++++++ .../ElementCustomizeFields.tsx} | 38 +++--- .../ElementCustomizeHeader.module.scss} | 0 .../ElementCustomizeHeader.tsx} | 10 +- .../ElementCustomizePreview.tsx} | 19 +-- .../ElementCustomizePreviewContent.tsx} | 6 +- .../ElementCustomizeProvider.tsx | 32 +++++ .../ElementCustomizeTabs.module.scss} | 0 .../ElementCustomizeTabs.tsx} | 24 ++-- .../ElementCustomizeTabsController.tsx | 46 +++++++ .../ElementCustomizerForm.tsx} | 6 +- .../InvoiceCustomize/InvoiceCustomize.tsx | 125 ++++++++---------- .../InvoiceCustomizeContent.tsx | 65 --------- .../InvoiceCustomizeDrawer.tsx | 6 +- .../InvoiceCustomizeGeneralFields.tsx | 8 +- .../InvoiceCustomizeProvider.tsx | 32 ----- .../InvoiceCustomizeTabsController.tsx | 46 ------- .../InvoiceCutomizeContentFields.tsx | 2 +- ....scss => InvoicePaperTemplate.module.scss} | 0 .../InvoiceCustomize/InvoicePaperTemplate.tsx | 2 +- .../CreditCardIcon.tsx | 0 25 files changed, 319 insertions(+), 292 deletions(-) rename packages/webapp/src/{containers/Sales/Invoices/InvoiceCustomize/ColorField.module.scss => components/Forms/ColorInput.module.scss} (100%) rename packages/webapp/src/{containers/Sales/Invoices/InvoiceCustomize/ColorField.tsx => components/Forms/ColorInput.tsx} (93%) rename packages/webapp/src/{containers/Sales/Invoices/InvoiceCustomize/FColorField.tsx => components/Forms/FColorInput.tsx} (52%) create mode 100644 packages/webapp/src/containers/ElementCustomize/ElementCustomize.module.scss create mode 100644 packages/webapp/src/containers/ElementCustomize/ElementCustomize.tsx rename packages/webapp/src/containers/{Sales/Invoices/InvoiceCustomize/InvoiceCustomizeFields.tsx => ElementCustomize/ElementCustomizeFields.tsx} (60%) rename packages/webapp/src/containers/{Sales/Invoices/InvoiceCustomize/InvoiceCustomizeHeader.module.scss => ElementCustomize/ElementCustomizeHeader.module.scss} (100%) rename packages/webapp/src/containers/{Sales/Invoices/InvoiceCustomize/InvoiceCustomizeHeader.tsx => ElementCustomize/ElementCustomizeHeader.tsx} (80%) rename packages/webapp/src/containers/{Sales/Invoices/InvoiceCustomize/InvoiceCustomizePreview.tsx => ElementCustomize/ElementCustomizePreview.tsx} (51%) rename packages/webapp/src/containers/{Sales/Invoices/InvoiceCustomize/InvoiceCustomizePreviewContent.tsx => ElementCustomize/ElementCustomizePreviewContent.tsx} (59%) create mode 100644 packages/webapp/src/containers/ElementCustomize/ElementCustomizeProvider.tsx rename packages/webapp/src/containers/{Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.module.scss => ElementCustomize/ElementCustomizeTabs.module.scss} (100%) rename packages/webapp/src/containers/{Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx => ElementCustomize/ElementCustomizeTabs.tsx} (56%) create mode 100644 packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabsController.tsx rename packages/webapp/src/containers/{Sales/Invoices/InvoiceCustomize/InvoiceCustomizerForm.tsx => ElementCustomize/ElementCustomizerForm.tsx} (81%) delete mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx delete mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeProvider.tsx delete mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabsController.tsx rename packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/{PaperTemplate.module.scss => InvoicePaperTemplate.module.scss} (100%) rename packages/webapp/src/{containers/Sales/Invoices/InvoiceCustomize => icons}/CreditCardIcon.tsx (100%) diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/ColorField.module.scss b/packages/webapp/src/components/Forms/ColorInput.module.scss similarity index 100% rename from packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/ColorField.module.scss rename to packages/webapp/src/components/Forms/ColorInput.module.scss diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/ColorField.tsx b/packages/webapp/src/components/Forms/ColorInput.tsx similarity index 93% rename from packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/ColorField.tsx rename to packages/webapp/src/components/Forms/ColorInput.tsx index 719fc714c..e986e0892 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/ColorField.tsx +++ b/packages/webapp/src/components/Forms/ColorInput.tsx @@ -11,9 +11,9 @@ import { import { HexColorPicker } from 'react-colorful'; import { useUncontrolled } from '@/hooks/useUncontrolled'; import { Box, BoxProps } from '@/components'; -import styles from './ColorField.module.scss'; +import styles from './ColorInput.module.scss'; -export interface ColorFieldProps { +export interface ColorInputProps { value?: string; initialValue?: string; onChange?: (value: string) => void; @@ -23,7 +23,7 @@ export interface ColorFieldProps { pickerWrapProps?: Partial; } -export function ColorField({ +export function ColorInput({ value, initialValue, onChange, @@ -31,7 +31,7 @@ export function ColorField({ inputProps, pickerWrapProps, pickerProps, -}: ColorFieldProps) { +}: ColorInputProps) { const [_value, handleChange] = useUncontrolled({ value, initialValue, diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/FColorField.tsx b/packages/webapp/src/components/Forms/FColorInput.tsx similarity index 52% rename from packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/FColorField.tsx rename to packages/webapp/src/components/Forms/FColorInput.tsx index 35840f7cb..0622f129b 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/FColorField.tsx +++ b/packages/webapp/src/components/Forms/FColorInput.tsx @@ -2,27 +2,27 @@ import React from 'react'; import { getIn, FieldConfig, FieldProps } from 'formik'; import { Intent } from '@blueprintjs/core'; import { Field } from '@blueprintjs-formik/core'; -import { ColorField, ColorFieldProps } from './ColorField'; +import { ColorInput, ColorInputProps } from './ColorInput'; -interface ColorFieldInputGroupProps +interface ColorInputInputGroupProps extends Omit, - ColorFieldProps {} + ColorInputProps {} -export interface ColorFieldToInputProps +export interface ColorInputToInputProps extends Omit, - ColorFieldProps {} + ColorInputProps {} /** - * Transforms field props to input group props for ColorField. - * @param {ColorFieldToInputProps} - * @returns {ColorFieldProps} + * Transforms field props to input group props for ColorInput. + * @param {ColorInputToInputProps} + * @returns {ColorInputProps} */ -function fieldToColorFieldInputGroup({ +function fieldToColorInputInputGroup({ field: { onBlur: onFieldBlur, onChange: onFieldChange, value, ...field }, form: { touched, errors, setFieldValue }, onChange, ...props -}: ColorFieldToInputProps): ColorFieldProps { +}: ColorInputToInputProps): ColorInputProps { const fieldError = getIn(errors, field.name); const showError = getIn(touched, field.name) && !!fieldError; @@ -42,23 +42,23 @@ function fieldToColorFieldInputGroup({ } /** - * Transforms field props to input group props for ColorField. - * @param {ColorFieldToInputProps} props - + * Transforms field props to input group props for ColorInput. + * @param {ColorInputToInputProps} props - * @returns {JSX.Element} */ -function ColorFieldToInputGroup({ +function ColorInputToInputGroup({ ...props -}: ColorFieldToInputProps): JSX.Element { - return ; +}: ColorInputToInputProps): JSX.Element { + return ; } /** - * Input group Blueprint component binded with Formik for ColorField. - * @param {ColorFieldInputGroupProps} + * Input group Blueprint component binded with Formik for ColorInput. + * @param {ColorInputInputGroupProps} * @returns {JSX.Element} */ export function FColorInput({ ...props -}: ColorFieldInputGroupProps): JSX.Element { - return ; +}: ColorInputInputGroupProps): JSX.Element { + return ; } diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomize.module.scss b/packages/webapp/src/containers/ElementCustomize/ElementCustomize.module.scss new file mode 100644 index 000000000..8fd643511 --- /dev/null +++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomize.module.scss @@ -0,0 +1,24 @@ +.root { + background: #fff; +} + +.mainFields{ + width: 400px; + height: 100vh; +} +.fieldGroup { + + :global .bp4-form-content{ + margin-left: auto; + } +} + +.footerActions{ + padding: 10px 16px; + border-top: 1px solid #d9d9d9; + flex-flow: row-reverse; +} + +.showCompanyLogoField:global(.bp4-large){ + font-size: 14px; +} \ No newline at end of file diff --git a/packages/webapp/src/containers/ElementCustomize/ElementCustomize.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomize.tsx new file mode 100644 index 000000000..2ba5e0998 --- /dev/null +++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomize.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { Box, Group } from '@/components'; +import { ElementCustomizeProvider } from './ElementCustomizeProvider'; +import { + ElementCustomizeForm, + ElementCustomizeFormProps, +} from './ElementCustomizerForm'; +import { ElementCustomizeTabsControllerProvider } from './ElementCustomizeTabsController'; +import { ElementCustomizeFields } from './ElementCustomizeFields'; +import { ElementCustomizePreview } from './ElementCustomizePreview'; +import { extractChildren } from '@/utils/extract-children'; + +export interface ElementCustomizeProps extends ElementCustomizeFormProps { + children?: React.ReactNode; +} + +export function ElementCustomize({ + initialValues, + validationSchema, + onSubmit, + children, +}: ElementCustomizeProps) { + const PaperTemplate = React.useMemo( + () => extractChildren(children, ElementCustomize.PaperTemplate), + [children], + ); + const CustomizeTabs = React.useMemo( + () => extractChildren(children, ElementCustomize.FieldsTab), + [children], + ); + + const value = { PaperTemplate, CustomizeTabs }; + + return ( + + + + + + + + + + + ); +} + +export interface ElementCustomizePaperTemplateProps { + children?: React.ReactNode; +} + +ElementCustomize.PaperTemplate = ({ + children, +}: ElementCustomizePaperTemplateProps) => { + return {children}; +}; + +export interface ElementCustomizeContentProps { + id: string; + label: string; + children?: React.ReactNode; +} + +ElementCustomize.FieldsTab = ({ + id, + label, + children, +}: ElementCustomizeContentProps) => { + return {children}; +}; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeFields.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeFields.tsx similarity index 60% rename from packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeFields.tsx rename to packages/webapp/src/containers/ElementCustomize/ElementCustomizeFields.tsx index 98fd8d396..b55132c74 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeFields.tsx +++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeFields.tsx @@ -2,28 +2,28 @@ import React from 'react'; import * as R from 'ramda'; import { Button, Intent } from '@blueprintjs/core'; -import { Group, Stack } from '@/components'; -import { InvoiceCustomizeHeader } from './InvoiceCustomizeHeader'; -import { InvoiceCustomizeTabs } from './InvoiceCustomizeTabs'; -import { useInvoiceCustomizeTabsController } from './InvoiceCustomizeTabsController'; -import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; import { useFormikContext } from 'formik'; -import { useInvoiceCustomizeContext } from './InvoiceCustomizeProvider'; -import styles from './InvoiceCustomizeFields.module.scss'; +import { Group, Stack } from '@/components'; +import { ElementCustomizeHeader } from './ElementCustomizeHeader'; +import { ElementCustomizeTabs } from './ElementCustomizeTabs'; +import { useElementCustomizeTabsController } from './ElementCustomizeTabsController'; +import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; +import { useElementCustomizeContext } from './ElementCustomizeProvider'; import withDrawerActions from '@/containers/Drawer/withDrawerActions'; +import styles from './ElementCustomize.module.scss'; -export function InvoiceCustomizeFields() { +export function ElementCustomizeFields() { return ( - - - + + + ); } -export function InvoiceCustomizeFieldsMain() { - const { currentTabId } = useInvoiceCustomizeTabsController(); - const { CustomizeTabs } = useInvoiceCustomizeContext(); +export function ElementCustomizeFieldsMain() { + const { currentTabId } = useElementCustomizeTabsController(); + const { CustomizeTabs } = useElementCustomizeContext(); const CustomizeTabPanel = React.useMemo( () => @@ -35,17 +35,17 @@ export function InvoiceCustomizeFieldsMain() { return ( - + {CustomizeTabPanel} - + ); } -function InvoiceCustomizeFooterActionsRoot({ closeDrawer }) { +function ElementCustomizeFooterActionsRoot({ closeDrawer }) { const { name } = useDrawerContext(); const { submitForm } = useFormikContext(); @@ -70,6 +70,6 @@ function InvoiceCustomizeFooterActionsRoot({ closeDrawer }) { ); } -const InvoiceCustomizeFooterActions = R.compose(withDrawerActions)( - InvoiceCustomizeFooterActionsRoot, +const ElementCustomizeFooterActions = R.compose(withDrawerActions)( + ElementCustomizeFooterActionsRoot, ); diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeHeader.module.scss b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.module.scss similarity index 100% rename from packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeHeader.module.scss rename to packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.module.scss diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeHeader.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.tsx similarity index 80% rename from packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeHeader.tsx rename to packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.tsx index 0dc6e209c..1800ca78f 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeHeader.tsx +++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeHeader.tsx @@ -1,20 +1,20 @@ -import { Group, Icon } from '@/components'; import { Button, Classes } from '@blueprintjs/core'; -import styles from './InvoiceCustomizeHeader.module.scss'; +import { Group, Icon } from '@/components'; +import styles from './ElementCustomizeHeader.module.scss'; -interface InvoiceCustomizeHeaderProps { +interface ElementCustomizeHeaderProps { label?: string; children?: React.ReactNode; closeButton?: boolean; onClose?: () => void; } -export function InvoiceCustomizeHeader({ +export function ElementCustomizeHeader({ label, closeButton, onClose, children, -}: InvoiceCustomizeHeaderProps) { +}: ElementCustomizeHeaderProps) { const handleClose = () => { onClose && onClose(); }; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePreview.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreview.tsx similarity index 51% rename from packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePreview.tsx rename to packages/webapp/src/containers/ElementCustomize/ElementCustomizePreview.tsx index 6b74bf581..975d820b0 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePreview.tsx +++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreview.tsx @@ -1,29 +1,32 @@ // @ts-nocheck import * as R from 'ramda'; import { Stack } from '@/components'; -import { InvoiceCustomizeHeader } from './InvoiceCustomizeHeader'; -import { InvoiceCustomizePreviewContent } from './InvoiceCustomizePreviewContent'; +import { ElementCustomizeHeader } from './ElementCustomizeHeader'; +import { ElementCustomizePreviewContent } from './ElementCustomizePreviewContent'; import { useDrawerContext } from '@/components/Drawer/DrawerProvider'; import withDrawerActions from '@/containers/Drawer/withDrawerActions'; -function InvoiceCustomizePreviewRoot({ closeDrawer }) { +function ElementCustomizePreviewRoot({ closeDrawer }) { const { name } = useDrawerContext(); const handleCloseBtnClick = () => { closeDrawer(name); }; return ( - - + - + ); } -export const InvoiceCustomizePreview = R.compose(withDrawerActions)( - InvoiceCustomizePreviewRoot, +export const ElementCustomizePreview = R.compose(withDrawerActions)( + ElementCustomizePreviewRoot, ); diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePreviewContent.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreviewContent.tsx similarity index 59% rename from packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePreviewContent.tsx rename to packages/webapp/src/containers/ElementCustomize/ElementCustomizePreviewContent.tsx index f78f2d4e5..6f643141d 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePreviewContent.tsx +++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizePreviewContent.tsx @@ -1,8 +1,8 @@ import { Box } from '@/components'; -import { useInvoiceCustomizeContext } from './InvoiceCustomizeProvider'; +import { useElementCustomizeContext } from './ElementCustomizeProvider'; -export function InvoiceCustomizePreviewContent() { - const { PaperTemplate } = useInvoiceCustomizeContext(); +export function ElementCustomizePreviewContent() { + const { PaperTemplate } = useElementCustomizeContext(); return ( ( + {} as ElementCustomizeValue, +); + +export const ElementCustomizeProvider: React.FC<{ + value: ElementCustomizeValue; + children: React.ReactNode; +}> = ({ value, children }) => { + return ( + + {children} + + ); +}; + +export const useElementCustomizeContext = (): ElementCustomizeValue => { + const context = useContext(ElementCustomizeContext); + + if (!context) { + throw new Error( + 'useElementCustomize must be used within an ElementCustomizeProvider', + ); + } + return context; +}; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.module.scss b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabs.module.scss similarity index 100% rename from packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.module.scss rename to packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabs.module.scss diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabs.tsx similarity index 56% rename from packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx rename to packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabs.tsx index 425312d48..9ab3ae39f 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx +++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizeTabs.tsx @@ -1,28 +1,28 @@ +import React from 'react'; import { Box, Stack } from '@/components'; import { Tab, Tabs } from '@blueprintjs/core'; -import { InvoiceCustomizeHeader } from './InvoiceCustomizeHeader'; +import { ElementCustomizeHeader } from './ElementCustomizeHeader'; import { - InvoiceCustomizeTabsEnum, - useInvoiceCustomizeTabsController, -} from './InvoiceCustomizeTabsController'; -import styles from './InvoiceCustomizeTabs.module.scss'; -import { useInvoiceCustomizeContext } from './InvoiceCustomizeProvider'; -import React from 'react'; + ElementCustomizeTabsEnum, + useElementCustomizeTabsController, +} from './ElementCustomizeTabsController'; +import { useElementCustomizeContext } from './ElementCustomizeProvider'; +import styles from './ElementCustomizeTabs.module.scss'; -export function InvoiceCustomizeTabs() { - const { setCurrentTabId } = useInvoiceCustomizeTabsController(); +export function ElementCustomizeTabs() { + const { setCurrentTabId } = useElementCustomizeTabsController(); - const { CustomizeTabs } = useInvoiceCustomizeContext(); + const { CustomizeTabs } = useElementCustomizeContext(); const tabItems = React.Children.map(CustomizeTabs, (node) => ({ ...(React.isValidElement(node) ? node.props : {}), })); - const handleChange = (value: InvoiceCustomizeTabsEnum) => { + const handleChange = (value: ElementCustomizeTabsEnum) => { setCurrentTabId(value); }; return ( - + + >; +} + +const ElementCustomizeTabsController = createContext( + {} as ElementCustomizeTabsControllerValue, +); + +export const useElementCustomizeTabsController = () => { + return useContext(ElementCustomizeTabsController); +}; + +interface ElementCustomizeTabsControllerProps { + children: React.ReactNode; +} + +export const ElementCustomizeTabsControllerProvider = ({ + children, +}: ElementCustomizeTabsControllerProps) => { + const [currentTabId, setCurrentTabId] = + useState(DEFAULT_TAB_ID); + + const value = { + currentTabId, + setCurrentTabId, + }; + + return ( + + {children} + + ); +}; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizerForm.tsx b/packages/webapp/src/containers/ElementCustomize/ElementCustomizerForm.tsx similarity index 81% rename from packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizerForm.tsx rename to packages/webapp/src/containers/ElementCustomize/ElementCustomizerForm.tsx index a245b5a5d..114e4f66e 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizerForm.tsx +++ b/packages/webapp/src/containers/ElementCustomize/ElementCustomizerForm.tsx @@ -2,19 +2,19 @@ import React from 'react'; import { Formik, Form, FormikHelpers } from 'formik'; -export interface InvoiceCustomizeFormProps { +export interface ElementCustomizeFormProps { initialValues?: T; validationSchema?: any; onSubmit?: (values: T, formikHelpers: FormikHelpers) => void; children?: React.ReactNode; } -export function InvoiceCustomizeForm({ +export function ElementCustomizeForm({ initialValues, validationSchema, onSubmit, children, -}: InvoiceCustomizeFormProps) { +}: ElementCustomizeFormProps) { return ( initialValues={{ ...initialValues }} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomize.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomize.tsx index d88336974..d84fb170b 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomize.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomize.tsx @@ -1,74 +1,65 @@ import React from 'react'; -import { Box, Group } from '@/components'; -import { InvoiceCustomizeProvider } from './InvoiceCustomizeProvider'; -import { - InvoiceCustomizeForm, - InvoiceCustomizeFormProps, -} from './InvoiceCustomizerForm'; -import { InvoiceCustomizeTabsControllerProvider } from './InvoiceCustomizeTabsController'; -import { InvoiceCustomizeFields } from './InvoiceCustomizeFields'; -import { InvoiceCustomizePreview } from './InvoiceCustomizePreview'; -import { extractChildren } from '@/utils/extract-children'; +import { Box } from '@/components'; +import { Classes } from '@blueprintjs/core'; +import { InvoicePaperTemplate } from './InvoicePaperTemplate'; +import { ElementCustomize } from '../../../ElementCustomize/ElementCustomize'; +import { InvoiceCustomizeGeneralField } from './InvoiceCustomizeGeneralFields'; +import { InvoiceCustomizeContentFields } from './InvoiceCutomizeContentFields'; -export interface InvoiceCustomizeProps extends InvoiceCustomizeFormProps { - children?: React.ReactNode; +interface InvoiceCustomizeValues { + invoiceNumber?: string; + invoiceNumberLabel?: string; + + dateIssue?: string; + dateIssueLabel?: string; + + dueDate?: string; + dueDateLabel?: string; + + companyName?: string; + + bigtitle?: string; + + itemRateLabel?: string; + itemQuantityLabel?: string; + itemTotalLabel?: string; + + // Totals + showDueAmount?: boolean; + showDiscount?: boolean; + showPaymentMade?: boolean; + showTaxes?: boolean; + showSubtotal?: boolean; + showTotal?: boolean; + showBalanceDue?: boolean; + + paymentMadeLabel?: string; + discountLabel?: string; + subtotalLabel?: string; + totalLabel?: string; + balanceDueLabel?: string; } -export function InvoiceCustomize({ - initialValues, - validationSchema, - onSubmit, - children, -}: InvoiceCustomizeProps) { - const PaperTemplate = React.useMemo( - () => extractChildren(children, InvoiceCustomize.PaperTemplate), - [children], - ); - const CustomizeTabs = React.useMemo( - () => extractChildren(children, InvoiceCustomize.FieldsTab), - [children], - ); - - const value = { PaperTemplate, CustomizeTabs }; - +export default function InvoiceCustomizeContent() { return ( - - - - - - - - - - + + > + + + + + + + + + + + + + + asdfasdfdsaf #3 + + + ); } - -export interface InvoiceCustomizePaperTemplateProps { - children?: React.ReactNode; -} - -InvoiceCustomize.PaperTemplate = ({ - children, -}: InvoiceCustomizePaperTemplateProps) => { - return {children}; -}; - -export interface InvoiceCustomizeContentProps { - id: string; - label: string; - children?: React.ReactNode; -} - -InvoiceCustomize.FieldsTab = ({ - id, - label, - children, -}: InvoiceCustomizeContentProps) => { - return {children}; -}; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx deleted file mode 100644 index e17963eb9..000000000 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react'; -import { Box } from '@/components'; -import { Classes } from '@blueprintjs/core'; -import { InvoicePaperTemplate } from './InvoicePaperTemplate'; -import { InvoiceCustomize } from './InvoiceCustomize'; -import { InvoiceCustomizeGeneralField } from './InvoiceCustomizeGeneralFields'; -import { InvoiceCustomizeContentFields } from './InvoiceCutomizeContentFields'; - -interface InvoiceCustomizeValues { - invoiceNumber?: string; - invoiceNumberLabel?: string; - - dateIssue?: string; - dateIssueLabel?: string; - - dueDate?: string; - dueDateLabel?: string; - - companyName?: string; - - bigtitle?: string; - - itemRateLabel?: string; - itemQuantityLabel?: string; - itemTotalLabel?: string; - - // Totals - showDueAmount?: boolean; - showDiscount?: boolean; - showPaymentMade?: boolean; - showTaxes?: boolean; - showSubtotal?: boolean; - showTotal?: boolean; - showBalanceDue?: boolean; - - paymentMadeLabel?: string; - discountLabel?: string; - subtotalLabel?: string; - totalLabel?: string; - balanceDueLabel?: string; -} - -export default function InvoiceCustomizeContent() { - return ( - - > - - - - - - - - - - - - - - asdfasdfdsaf #3 - - - - ); -} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeDrawer.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeDrawer.tsx index 3a9956143..167022bec 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeDrawer.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeDrawer.tsx @@ -4,8 +4,8 @@ import * as R from 'ramda'; import { Drawer, DrawerSuspense } from '@/components'; import withDrawers from '@/containers/Drawer/withDrawers'; -const InvoiceCustomizeContent = React.lazy( - () => import('./InvoiceCustomizeContent'), +const InvoiceCustomize = React.lazy( + () => import('./InvoiceCustomize'), ); /** @@ -21,7 +21,7 @@ function InvoiceCustomizeDrawerRoot({ return ( - + ); diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx index bfe44e947..2636deb1e 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx @@ -1,9 +1,9 @@ // @ts-nocheck -import { Box, FFormGroup, FSwitch, Group, Stack } from '@/components'; -import { FColorInput } from './FColorField'; -import styles from './InvoiceCustomizeFields.module.scss'; import { Classes, Text } from '@blueprintjs/core'; -import { CreditCardIcon } from './CreditCardIcon'; +import { FFormGroup, FSwitch, Group, Stack } from '@/components'; +import { FColorInput } from '@/components/Forms/FColorInput'; +import { CreditCardIcon } from '@/icons/CreditCardIcon'; +import styles from './InvoiceCustomizeFields.module.scss'; export function InvoiceCustomizeGeneralField() { return ( diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeProvider.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeProvider.tsx deleted file mode 100644 index 3049a9994..000000000 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeProvider.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { createContext, useContext } from 'react'; - -interface InvoiceCustomizeValue { - PaperTemplate?: React.ReactNode; - CustomizeTabs: React.ReactNode; -} - -const InvoiceCustomizeContext = createContext( - {} as InvoiceCustomizeValue, -); - -export const InvoiceCustomizeProvider: React.FC<{ - value: InvoiceCustomizeValue; - children: React.ReactNode; -}> = ({ value, children }) => { - return ( - - {children} - - ); -}; - -export const useInvoiceCustomizeContext = (): InvoiceCustomizeValue => { - const context = useContext(InvoiceCustomizeContext); - - if (!context) { - throw new Error( - 'useInvoiceCustomize must be used within an InvoiceCustomizeProvider', - ); - } - return context; -}; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabsController.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabsController.tsx deleted file mode 100644 index d58fa2a1a..000000000 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabsController.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React, { createContext, useContext, useState } from 'react'; - -export enum InvoiceCustomizeTabsEnum { - General = 'general', - Items = 'items', - Totals = 'totals' -} - -const DEFAULT_TAB_ID = InvoiceCustomizeTabsEnum.General; - -interface InvoiceCustomizeTabsControllerValue { - currentTabId: InvoiceCustomizeTabsEnum; - setCurrentTabId: React.Dispatch< - React.SetStateAction - >; -} - -const InvoiceCustomizeTabsController = createContext( - {} as InvoiceCustomizeTabsControllerValue, -); - -export const useInvoiceCustomizeTabsController = () => { - return useContext(InvoiceCustomizeTabsController); -}; - -interface InvoiceCustomizeTabsControllerProps { - children: React.ReactNode; -} - -export const InvoiceCustomizeTabsControllerProvider = ({ - children, -}: InvoiceCustomizeTabsControllerProps) => { - const [currentTabId, setCurrentTabId] = - useState(DEFAULT_TAB_ID); - - const value = { - currentTabId, - setCurrentTabId, - }; - - return ( - - {children} - - ); -}; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCutomizeContentFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCutomizeContentFields.tsx index ba58df5a3..29ca74c3e 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCutomizeContentFields.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCutomizeContentFields.tsx @@ -1,5 +1,5 @@ -import { FInputGroup, FSwitch, Group, Stack } from '@/components'; import { Classes } from '@blueprintjs/core'; +import { FInputGroup, FSwitch, Group, Stack } from '@/components'; const items = [ { key: 'dueAmount', label: 'Due Amount' }, diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.module.scss b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.module.scss similarity index 100% rename from packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.module.scss rename to packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.module.scss diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx index 49333844c..84c213627 100644 --- a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoicePaperTemplate.tsx @@ -1,5 +1,5 @@ import clsx from 'classnames'; -import styles from './PaperTemplate.module.scss'; +import styles from './InvoicePaperTemplate.module.scss'; interface PaperTemplateProps { invoiceNumber?: string; diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/CreditCardIcon.tsx b/packages/webapp/src/icons/CreditCardIcon.tsx similarity index 100% rename from packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/CreditCardIcon.tsx rename to packages/webapp/src/icons/CreditCardIcon.tsx