From e6bad277711dd33d938f78f9efc0b98deec8dee3 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Sat, 7 Sep 2024 21:39:05 +0200 Subject: [PATCH] feat: wip invoice customizer --- packages/webapp/package.json | 1 + .../src/components/DrawersContainer.tsx | 2 + packages/webapp/src/constants/drawers.ts | 6 +- .../InvoiceCustomize/ColorField.module.scss | 14 ++ .../Invoices/InvoiceCustomize/ColorField.tsx | 30 ++++ .../Invoices/InvoiceCustomize/FColorField.tsx | 9 ++ .../InvoiceCustomizeContent.tsx | 21 +++ .../InvoiceCustomizeDrawer.tsx | 37 +++++ .../InvoiceCustomizeFields.module.scss | 7 + .../InvoiceCustomizeFields.tsx | 26 ++++ .../InvoiceCustomizeGeneralFields.tsx | 16 +++ .../InvoiceCustomizeHeader.module.scss | 18 +++ .../InvoiceCustomizeHeader.tsx | 36 +++++ .../InvoiceCustomizePreview.tsx | 12 ++ .../InvoiceCustomizePreviewContent.tsx | 10 ++ .../InvoiceCustomizeTabs.module.scss | 14 ++ .../InvoiceCustomize/InvoiceCustomizeTabs.tsx | 29 ++++ .../InvoiceCustomizeTabsController.tsx | 46 ++++++ .../InvoiceCustomizerForm.tsx | 27 ++++ .../PaperTemplate.module.scss | 105 ++++++++++++++ .../InvoiceCustomize/PaperTemplate.tsx | 135 ++++++++++++++++++ .../InvoicesLanding/InvoicesActionsBar.tsx | 35 +++++ pnpm-lock.yaml | 13 ++ 23 files changed, 648 insertions(+), 1 deletion(-) create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/ColorField.module.scss create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/ColorField.tsx create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/FColorField.tsx create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeDrawer.tsx create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeFields.module.scss create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeFields.tsx create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeHeader.module.scss create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeHeader.tsx create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePreview.tsx create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizePreviewContent.tsx create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.module.scss create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabs.tsx create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeTabsController.tsx create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizerForm.tsx create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.module.scss create mode 100644 packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/PaperTemplate.tsx diff --git a/packages/webapp/package.json b/packages/webapp/package.json index 38c1a8c0c..1fcd405e1 100644 --- a/packages/webapp/package.json +++ b/packages/webapp/package.json @@ -77,6 +77,7 @@ "react": "^18.2.0", "react-app-polyfill": "^1.0.6", "react-body-classname": "^1.3.1", + "react-colorful": "^5.6.1", "react-content-loader": "^6.0.1", "react-dev-utils": "^11.0.4", "react-dom": "^18.2.0", diff --git a/packages/webapp/src/components/DrawersContainer.tsx b/packages/webapp/src/components/DrawersContainer.tsx index 6165fda85..43b594ff3 100644 --- a/packages/webapp/src/components/DrawersContainer.tsx +++ b/packages/webapp/src/components/DrawersContainer.tsx @@ -25,6 +25,7 @@ import CategorizeTransactionDrawer from '@/containers/CashFlow/CategorizeTransac import ChangeSubscriptionPlanDrawer from '@/containers/Subscriptions/drawers/ChangeSubscriptionPlanDrawer/ChangeSubscriptionPlanDrawer'; import { DRAWERS } from '@/constants/drawers'; +import { InvoiceCustomizeDrawer } from '@/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeDrawer'; /** * Drawers container of the dashboard. @@ -65,6 +66,7 @@ export default function DrawersContainer() { + ); } diff --git a/packages/webapp/src/constants/drawers.ts b/packages/webapp/src/constants/drawers.ts index 5a3a96cd3..82a4c7967 100644 --- a/packages/webapp/src/constants/drawers.ts +++ b/packages/webapp/src/constants/drawers.ts @@ -24,5 +24,9 @@ export enum DRAWERS { WAREHOUSE_TRANSFER_DETAILS = 'warehouse-transfer-detail-drawer', TAX_RATE_DETAILS = 'tax-rate-detail-drawer', CATEGORIZE_TRANSACTION = 'categorize-transaction', - CHANGE_SUBSCARIPTION_PLAN = 'change-subscription-plan' + CHANGE_SUBSCARIPTION_PLAN = 'change-subscription-plan', + INVOICE_CUSTOMIZE = 'INVOICE_CUSTOMIZE', + ESTIMATE_CUSTOMIZE = 'ESTIMATE_CUSTOMIZE', + PAYMENT_RECEIPT_CUSTOMIZE = 'PAYMENT_RECEIPT_CUSTOMIZE', + RECEIPT_CUSTOMIZE = 'RECEIPT_CUSTOMIZE', } diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/ColorField.module.scss b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/ColorField.module.scss new file mode 100644 index 000000000..a018fb5c9 --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/ColorField.module.scss @@ -0,0 +1,14 @@ + +.field{ + height: 28px; + line-height: 28px; + border-radius: 5px; +} + +.colorPicker{ + background-color: rgb(103, 114, 229); + border-radius: 3px; + height: 14px; + width: 14px; + cursor: pointer; +} \ No newline at end of file diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/ColorField.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/ColorField.tsx new file mode 100644 index 000000000..3f18db7e1 --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/ColorField.tsx @@ -0,0 +1,30 @@ +import { + InputGroup, + Popover, + PopoverInteractionKind, + Position, +} from '@blueprintjs/core'; +import { useState } from 'react'; +import { HexColorPicker } from 'react-colorful'; +import styles from './ColorField.module.scss'; + +export function ColorField() { + const [color, setColor] = useState('#aabbcc'); + + return ( + } + position={Position.BOTTOM} + interactionKind={PopoverInteractionKind.CLICK} + modifiers={{ + offset: { offset: '0, 4' }, + }} + minimal + > + } + className={styles.field} + /> + + ); +} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/FColorField.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/FColorField.tsx new file mode 100644 index 000000000..fc2008a77 --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/FColorField.tsx @@ -0,0 +1,9 @@ +import { ColorField } from './ColorField'; + +interface FColorFieldProps { + name: string; +} + +export function FColorField({ name }: FColorFieldProps) { + return ; +} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx new file mode 100644 index 000000000..00f1933b2 --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeContent.tsx @@ -0,0 +1,21 @@ +import { Box, Group } from '@/components'; +import { InvoiceCustomizePreview } from './InvoiceCustomizePreview'; +import { InvoiceCustomizeFields } from './InvoiceCustomizeFields'; +import { InvoiceCustomizeForm } from './InvoiceCustomizerForm'; +import { Classes } from '@blueprintjs/core'; +import { InvoiceCustomizeTabsControllerProvider } from './InvoiceCustomizeTabsController'; + +export default function InvoiceCustomizeContent() { + return ( + + + + + + + + + + + ); +} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeDrawer.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeDrawer.tsx new file mode 100644 index 000000000..e4e8dbe2c --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeDrawer.tsx @@ -0,0 +1,37 @@ +// @ts-nocheck +import React from 'react'; +import * as R from 'ramda'; + +import { Drawer, DrawerSuspense } from '@/components'; +import withDrawers from '@/containers/Drawer/withDrawers'; + +const InvoiceCustomizeContent = React.lazy( + () => import('./InvoiceCustomizeContent'), +); + +/** + * Refund credit note detail. + * @returns + */ +function InvoiceCustomizeDrawerRoot({ + name, + // #withDrawer + isOpen, + payload: {}, +}) { + return ( + + + + + + ); +} + +export const InvoiceCustomizeDrawer = R.compose(withDrawers())( + InvoiceCustomizeDrawerRoot, +); diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeFields.module.scss b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeFields.module.scss new file mode 100644 index 000000000..4159c65a9 --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeFields.module.scss @@ -0,0 +1,7 @@ +.root { + flex: 1; +} + +.mainFields{ + flex: 1; +} \ No newline at end of file diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeFields.tsx new file mode 100644 index 000000000..a50011509 --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeFields.tsx @@ -0,0 +1,26 @@ +import { Box, Group } from '@/components'; +import { InvoiceCustomizeHeader } from './InvoiceCustomizeHeader'; +import { InvoiceCustomizeTabs } from './InvoiceCustomizeTabs'; +import styles from './InvoiceCustomizeFields.module.scss'; +import { InvoiceCustomizeGeneralField } from './InvoiceCustomizeGeneralFields'; +import { useInvoiceCustomizeTabsController } from './InvoiceCustomizeTabsController'; + +export function InvoiceCustomizeFields() { + return ( + + + + + ); +} + +export function InvoiceCustomizeFieldsMain() { + const { currentTabId } = useInvoiceCustomizeTabsController(); + return ( + + + + {currentTabId === 'general' && } + + ); +} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx new file mode 100644 index 000000000..2870741ad --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeGeneralFields.tsx @@ -0,0 +1,16 @@ +import { Box, FFormGroup } from '@/components'; +import { FColorField } from './FColorField'; + +export function InvoiceCustomizeGeneralField() { + return ( + + + + + + + + + + ); +} diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeHeader.module.scss b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeHeader.module.scss new file mode 100644 index 000000000..28d3fa50d --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeHeader.module.scss @@ -0,0 +1,18 @@ + +.root { + align-items: center; + border-radius: 0; + box-shadow: 0 1px 0 rgba(17, 20, 24, .15); + display: flex; + flex: 0 0 auto; + min-height: 40px; + padding: 5px 5px 5px 20px; + position: relative; + background-color: #fff; +} + +.title{ + margin: 0; + font-size: 19px; + font-weight: 500; +} \ No newline at end of file diff --git a/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeHeader.tsx b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeHeader.tsx new file mode 100644 index 000000000..6e6fd1816 --- /dev/null +++ b/packages/webapp/src/containers/Sales/Invoices/InvoiceCustomize/InvoiceCustomizeHeader.tsx @@ -0,0 +1,36 @@ +import { Group, Icon } from '@/components'; +import styles from './InvoiceCustomizeHeader.module.scss'; +import { Button, Classes } from '@blueprintjs/core'; + +interface InvoiceCustomizeHeaderProps { + label?: string; + children?: React.ReactNode; + closeButton?: boolean; + onClose?: () => void; +} + +export function InvoiceCustomizeHeader({ + label, + closeButton, + onClose, + children, +}: InvoiceCustomizeHeaderProps) { + const handleClose = () => { + onClose && onClose(); + }; + return ( + + {label &&

{label}

} + {closeButton && ( +