@homefile/components-v2 2.22.2 → 2.23.1

package/dist/assets/locales/en/index.json

@@ -108,6 +108,7 @@
     "close": "Close",
     "done": "Done",
     "delete": "Delete",
+    "edit": "Edit",
     "forward": "Forward",
     "next": "Next",
     "previous": "Previous",

package/dist/components/dragDrop/DragDropArea.d.ts

@@ -1,2 +1,2 @@
 import { DragDropAreaI } from '../../interfaces';
-export declare const DragDropArea: ({ align, direction, errorMessage, getInputProps, getRootProps, height, message, message2, variant, }: DragDropAreaI) => import("react/jsx-runtime").JSX.Element;
+export declare const DragDropArea: ({ align, direction, errorMessage, getInputProps, getRootProps, height, message, message2, variant, multiple, }: DragDropAreaI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/dragDrop/DragDropArea.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Container, Flex, Stack, Text } from '@chakra-ui/react';
 import { Upload } from '..';
-export const DragDropArea = ({ align = 'center', direction = 'row', errorMessage, getInputProps, getRootProps, height = '4rem', message = t('dragDrop.message'), message2 = t('dragDrop.message2'), variant = 'dragDropDashed', }) => {
+export const DragDropArea = ({ align = 'center', direction = 'row', errorMessage, getInputProps, getRootProps, height = '4rem', message = t('dragDrop.message'), message2 = t('dragDrop.message2'), variant = 'dragDropDashed', multiple = false, }) => {
     const hasError = !!errorMessage;
-    return (_jsxs(Stack, { spacing: "1", children: [_jsxs(Container, Object.assign({ variant: variant, minW: "full", h: height }, getRootProps(), { children: [_jsx("input", Object.assign({}, getInputProps())), _jsx(Flex, { h: height, align: align, justify: "center", p: "base", children: _jsxs(Flex, { align: "center", direction: direction, gap: "2", children: [_jsx(Upload, {}), _jsxs(Flex, { align: "center", gap: "1", children: [message && _jsx(Text, { variant: "dragDrop", children: message }), message2 && _jsx(Text, { variant: "dragDropLink", children: message2 })] })] }) })] })), hasError && _jsx(Text, { variant: "error", children: errorMessage })] }));
+    return (_jsxs(Stack, { spacing: "1", children: [_jsxs(Container, Object.assign({ variant: variant, minW: "full", h: height }, getRootProps(), { children: [_jsx("input", Object.assign({}, getInputProps({ multiple }))), _jsx(Flex, { h: height, align: align, justify: "center", p: "base", children: _jsxs(Flex, { align: "center", direction: direction, gap: "2", children: [_jsx(Upload, {}), _jsxs(Flex, { align: "center", gap: "1", children: [message && _jsx(Text, { variant: "dragDrop", children: message }), message2 && _jsx(Text, { variant: "dragDropLink", children: message2 })] })] }) })] })), hasError && _jsx(Text, { variant: "error", children: errorMessage })] }));
 };

package/dist/components/forms/dynamicForm/DynamicForm.d.ts

@@ -1,2 +1,2 @@
 import { DynamicFormI } from '../../../interfaces';
-export declare const DynamicForm: ({ callback, displayImages, form: fields, menuItems, onAISend, onRemoveImage, onUpload, searching, showTitle, title, uploadingFieldId, ...props }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;
+export declare const DynamicForm: ({ callback, displayImages, form: fields, menuItems, onAISend, onRemoveImage, onUpload, searching, showTitle, singleFileUpload, title, uploadingFieldId, ...props }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/DynamicForm.js

@@ -18,13 +18,13 @@ import { HiddenFieldSection, GroupField, TextField, TextAreaField, SelectField,
 import { useDynamicForm } from '../../../hooks';
 import { fieldIcons } from '../../../helpers';
 export const DynamicForm = (_a) => {
-    var { callback, displayImages, form: fields, menuItems, onAISend, onRemoveImage, onUpload, searching = false, showTitle = true, title, uploadingFieldId } = _a, props = __rest(_a, ["callback", "displayImages", "form", "menuItems", "onAISend", "onRemoveImage", "onUpload", "searching", "showTitle", "title", "uploadingFieldId"]);
+    var { callback, displayImages, form: fields, menuItems, onAISend, onRemoveImage, onUpload, searching = false, showTitle = true, singleFileUpload, title, uploadingFieldId } = _a, props = __rest(_a, ["callback", "displayImages", "form", "menuItems", "onAISend", "onRemoveImage", "onUpload", "searching", "showTitle", "singleFileUpload", "title", "uploadingFieldId"]);
     const { form, visibleFields, hiddenFields, handleAddAll, handleAdd, handleFilesUpload, handleRemove, } = useDynamicForm({ fields, onUpload });
     if (searching) {
         return _jsx(SearchItemLoader, {});
     }
     return (_jsxs(Stack, { bg: "lightBlue.1", spacing: "0", h: "full", overflowX: "hidden", children: [showTitle && (_jsx(Box, { px: "base", pt: "4", pb: "2", borderBottom: "1px dashed", borderColor: "lightBlue.6", children: _jsx(Text, { fontFamily: "secondary", children: title !== null && title !== void 0 ? title : t('forms.itemDetails') }) })), _jsx(FormProvider, Object.assign({}, form, { children: _jsx(_Fragment, { children: visibleFields === null || visibleFields === void 0 ? void 0 : visibleFields.map((field) => {
-                        const { canBeHidden, children, description, icon, id, name, label, options, type, value, } = field;
+                        const { comments, canBeHidden, children, description, icon, id, name, label, options, type, value, } = field;
                         const baseProps = {
                             id,
                             value,
@@ -76,14 +76,14 @@ export const DynamicForm = (_a) => {
                                     _jsx(SwitchField, Object.assign({}, baseProps, { description: description }))));
                             case 'file':
                                 return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
-                                    _jsx(FileField, { icon: baseProps.icon, description: description, onRemove: onRemoveImage, onUpload: (files) => handleFilesUpload({ id, files }), uploading: uploadingFieldId === id, displayImages: displayImages })));
+                                    _jsx(FileField, Object.assign({}, baseProps, { description: description, onRemove: onRemoveImage, onUpload: (files) => handleFilesUpload({ id, files }), uploading: uploadingFieldId === id, displayImages: displayImages, singleFileUpload: singleFileUpload, value: value }))));
                             case 'group':
                                 return (_jsx(GroupField, { id: id, fields: children, onRemove: handleRemove, canBeHidden: canBeHidden }, id));
                             case 'checkbox-group':
                                 return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
                                     _jsx(CheckboxGroupField, { id: id, description: description, icon: baseProps.icon, children: children }, id)));
                             case 'checkbox-agreement':
-                                return (_jsx(CheckboxAgreement, { id: id, name: name, value: value, description: description }, id));
+                                return (_jsx(CheckboxAgreement, { id: id, name: name, value: value, description: description, comments: comments }, id));
                             case 'tile-body':
                                 return (_createElement(TileBody, Object.assign({}, props, { key: id, callback: callback, fields: children, menuItems: menuItems })));
                             default:

package/dist/components/forms/dynamicForm/SearchItemLoader.d.ts

@@ -1 +1,3 @@
-export declare const SearchItemLoader: () => import("react/jsx-runtime").JSX.Element;
+export declare const SearchItemLoader: ({ message }: {
+    message?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/SearchItemLoader.js

@@ -3,6 +3,6 @@ import { t } from 'i18next';
 import { Box, Text, Stack } from '@chakra-ui/react';
 import { PuffLoader } from 'react-spinners';
 import { colors } from '../../../theme/colors';
-export const SearchItemLoader = () => {
-    return (_jsxs(Stack, { spacing: "base", align: "center", mt: "50px", children: [_jsx(PuffLoader, { color: colors.blue[1], size: 50 }), _jsx(Box, { w: "40%", children: _jsx(Text, { fontSize: "sm", textAlign: "center", children: t('dynamicForm.searching') }) })] }));
+export const SearchItemLoader = ({ message = t('dynamicForm.searching') }) => {
+    return (_jsxs(Stack, { spacing: "base", align: "center", mt: "50px", children: [_jsx(PuffLoader, { color: colors.blue[1], size: 50 }), _jsx(Box, { w: "40%", children: _jsx(Text, { fontSize: "sm", textAlign: "center", whiteSpace: "preserve-breaks", children: message }) })] }));
 };

package/dist/components/forms/dynamicForm/fields/CheckboxAgreement.d.ts

@@ -1,2 +1,2 @@
 import { ReportI } from '../../../../interfaces';
-export declare const CheckboxAgreement: ({ description, id, name, value, }: Pick<ReportI, "name" | "id" | "description" | "value">) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxAgreement: ({ comments, description, id, name, value, }: Pick<ReportI, "name" | "id" | "description" | "value" | "comments">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/fields/CheckboxAgreement.js

@@ -2,9 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { ChevronRight } from '../../../icons';
 import { Accordion, AccordionItem, AccordionButton, Flex, Box, AccordionPanel, Checkbox, Text, } from '@chakra-ui/react';
 import { Controller, useFormContext } from 'react-hook-form';
-export const CheckboxAgreement = ({ description, id, name, value, }) => {
+export const CheckboxAgreement = ({ comments, description, id, name, value, }) => {
     const { control } = useFormContext();
-    return (_jsx(Accordion, { flex: "1", allowToggle: true, defaultIndex: [0], children: _jsx(AccordionItem, { border: "none", bg: "lightViolet.1", children: ({ isExpanded }) => (_jsxs(_Fragment, { children: [_jsxs(Flex, { p: "base", justify: "space-between", children: [_jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { onChange, value } }) => {
+    const collapsed = comments === 'collapsed';
+    return (_jsx(Accordion, { flex: "1", allowToggle: true, defaultIndex: collapsed ? [1] : [0], children: _jsx(AccordionItem, { border: "none", bg: "lightViolet.1", children: ({ isExpanded }) => (_jsxs(_Fragment, { children: [_jsxs(Flex, { p: "base", justify: "space-between", children: [_jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { onChange, value } }) => {
                                     return (_jsx(Checkbox, { value: String(name), isChecked: Boolean(value), onChange: onChange, children: _jsx(Text, { fontFamily: "secondary", fontWeight: "semibold", fontSize: "sm", color: "violet.1", children: name }) }, id));
                                 } }), _jsx(AccordionButton, { w: "fit-content", p: "0", _hover: {
                                     bg: 'transparent',

package/dist/components/forms/dynamicForm/fields/FileField.d.ts

@@ -1,2 +1,2 @@
 import { FileFieldI } from '../../../../interfaces';
-export declare const FileField: ({ description, icon, onRemove, onUpload, uploading, displayImages, }: FileFieldI) => import("react/jsx-runtime").JSX.Element;
+export declare const FileField: ({ description, icon, onRemove, onUpload, uploading, displayImages, singleFileUpload, }: FileFieldI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/fields/FileField.js

@@ -3,13 +3,13 @@ import { AspectRatio, Box, Flex, Grid, IconButton, Image, Stack, Text, } from '@
 import { Close, DragDropArea } from '../../..';
 import { useFilesUploader } from '../../../../hooks';
 import { colors } from '../../../../theme/colors';
-export const FileField = ({ description, icon, onRemove, onUpload, uploading = false, displayImages = [], }) => {
+export const FileField = ({ description, icon, onRemove, onUpload, uploading = false, displayImages = [], singleFileUpload = false, }) => {
     const { errorMessage, getInputProps, getRootProps, thumbnails } = useFilesUploader({
         onUpload,
         uploading,
         displayImages,
     });
     const isStringArray = Array.isArray(thumbnails) && typeof thumbnails[0] === 'string';
-    return (_jsxs(Flex, { gap: "base", align: "center", flex: "auto", children: [icon && _jsx(Image, { h: "auto", w: "icon.md", src: icon, marginTop: "2" }), _jsxs(Stack, { spacing: "base", flex: "auto", children: [description && _jsx(Text, { fontFamily: "secondary", children: description }), _jsx(DragDropArea, { errorMessage: errorMessage, getInputProps: getInputProps, getRootProps: getRootProps, height: "85px" }), _jsx(Grid, { gridTemplateColumns: `repeat(auto-fill, minmax(22px, 1fr))`, gap: "base", children: isStringArray &&
+    return (_jsxs(Flex, { gap: "base", align: "center", flex: "auto", children: [icon && _jsx(Image, { h: "auto", w: "icon.md", src: icon, marginTop: "2" }), _jsxs(Stack, { spacing: "base", flex: "auto", children: [description && _jsx(Text, { fontFamily: "secondary", children: description }), _jsx(DragDropArea, { errorMessage: errorMessage, getInputProps: getInputProps, getRootProps: getRootProps, height: "85px", multiple: !singleFileUpload }), _jsx(Grid, { gridTemplateColumns: `repeat(auto-fill, minmax(22px, 1fr))`, gap: "base", children: isStringArray &&
                             thumbnails.map((file, index) => (_jsxs(Box, { position: "relative", children: [_jsx(IconButton, { variant: "ghost", "aria-label": "close", maxW: "fit-content", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(file), icon: _jsx(Close, { size: 11, stroke: colors.error['2'] }), disabled: uploading, position: "absolute", bg: "neutral.white", p: "0.5", borderRadius: "full", top: "-2", right: "-2", zIndex: "1" }), _jsx(AspectRatio, { maxW: "100%", ratio: 1, children: _jsx(Image, { src: file, objectFit: "cover", alt: `file-${index}` }) })] }, file))) })] })] }));
 };

package/dist/components/headers/TabsHeader.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, Tab, TabList, TabPanel, TabPanels, Tabs, } from '@chakra-ui/react';
 export const TabsHeader = ({ onChange, tabList, tabIndex, defaultIndex, rightButton, rightTabList, }) => {
-    return (_jsxs(Tabs, { zIndex: "base", variant: "unstyled", onChange: onChange, index: tabIndex, defaultIndex: defaultIndex, h: "100%", children: [_jsx(Box, { bg: "lightBlue.2", children: _jsxs(Flex, { justify: "space-between", children: [_jsx(TabList, { bg: "neutral.white", w: "full", children: tabList === null || tabList === void 0 ? void 0 : tabList.map(({ label }) => (_jsx(CustomTab, { label: label }, label))) }), _jsxs(Flex, { children: [_jsx(TabList, { bg: "neutral.white", w: "full", children: rightTabList === null || rightTabList === void 0 ? void 0 : rightTabList.map(({ label }) => (_jsx(CustomTab, { label: label }, label))) }), rightButton] })] }) }), _jsx(TabPanels, { h: "100%", children: tabList === null || tabList === void 0 ? void 0 : tabList.map(({ label, component }) => (_jsx(TabPanel, { p: "0", h: "100%", children: component }, label))) })] }));
+    return (_jsxs(Tabs, { zIndex: "base", variant: "unstyled", onChange: onChange, index: tabIndex, defaultIndex: defaultIndex, h: "100%", children: [_jsx(Box, { bg: "lightBlue.2", children: _jsxs(Flex, { justify: "space-between", children: [_jsx(TabList, { bg: "neutral.white", w: "full", children: tabList === null || tabList === void 0 ? void 0 : tabList.map(({ label }) => (_jsx(CustomTab, { label: label }, label))) }), _jsxs(Flex, { flexShrink: 0, children: [_jsx(TabList, { bg: "neutral.white", w: "full", children: rightTabList === null || rightTabList === void 0 ? void 0 : rightTabList.map(({ label }) => (_jsx(CustomTab, { label: label }, label))) }), rightButton] })] }) }), _jsx(TabPanels, { h: "100%", children: tabList === null || tabList === void 0 ? void 0 : tabList.map(({ label, component }) => (_jsx(TabPanel, { p: "0", h: "100%", children: component }, label))) })] }));
 };
 const CustomTab = ({ label = '' }) => {
     return (_jsx(Tab, { minW: "1rem", px: "base", py: "0", lineHeight: "10", textTransform: "uppercase", fontWeight: "medium", fontSize: "sm", fontFamily: "primary", color: "blue.3", borderBottom: "3px solid transparent", _hover: { cursor: 'pointer' }, _focus: { outline: 'none' }, _selected: {

package/dist/components/receipts/receipt/ReceiptDetails.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Divider, Flex, Image } from '@chakra-ui/react';
-import { ReceiptBg } from '../../../assets/images';
 import { formatDate } from '../../../utils';
 import { DetailsColumn } from '../..';
 import { receiptOrigins } from '../../../helpers';
@@ -45,5 +44,5 @@ export const ReceiptDetails = ({ cashier = '', itemQuantity, paymentMethod, purc
             value: paymentMethod,
         },
     ];
-    return (_jsxs(Box, { boxShadow: "md", minW: "108px", bg: "lightBlue.2", borderBottom: "1px solid", borderColor: "lightBlue.2", children: [_jsx(Box, { bgImg: ReceiptBg, bgRepeat: "repeat-x", w: "100%", h: "10px" }), _jsx(Box, { bg: "neutral.white", px: "2", p: "base", children: _jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Image, { src: storeImage, w: "75px", h: "75px", fit: "cover" }), _jsxs(Flex, { align: "center", gap: "2", flex: "auto", children: [_jsx(DetailsColumn, { details: leftColumn }), _jsx(Divider, { orientation: "vertical", bg: "lightBlue.2", h: "63px", mr: "6" }), _jsx(DetailsColumn, { align: "right", details: rightColumn })] })] }) })] }));
+    return (_jsxs(Box, { boxShadow: "md", minW: "108px", bg: "lightBlue.2", borderBottom: "1px solid", borderColor: "lightBlue.2", children: [_jsx(Box, { w: "100%", h: "10px", bg: "lightBlue.2", overflow: "hidden", position: "relative", children: _jsxs("svg", { width: "100%", height: "8", viewBox: "0 0 100 10", preserveAspectRatio: "none", style: { display: 'block', position: 'absolute', bottom: 0, left: 0 }, children: [_jsx("defs", { children: _jsx("pattern", { id: "triangle", width: "4", height: "10", patternUnits: "userSpaceOnUse", children: _jsx("polygon", { points: "0,10 2,0 4,10", fill: "white" }) }) }), _jsx("rect", { width: "100%", height: "10", fill: "url(#triangle)" })] }) }), _jsx(Box, { bg: "neutral.white", px: "2", p: "base", children: _jsxs(Flex, { align: "center", gap: "base", children: [_jsx(Image, { src: storeImage, w: "75px", h: "75px", fit: "cover" }), _jsxs(Flex, { align: "center", gap: "2", flex: "auto", children: [_jsx(DetailsColumn, { details: leftColumn }), _jsx(Divider, { orientation: "vertical", bg: "lightBlue.2", h: "63px", mr: "6" }), _jsx(DetailsColumn, { align: "right", details: rightColumn })] })] }) })] }));
 };

package/dist/interfaces/dragDrop/DragDropArea.interface.d.ts

@@ -9,5 +9,6 @@ export interface DragDropAreaI {
     height?: number | string;
     message?: string;
     message2?: string;
+    multiple?: boolean;
     variant?: 'dragDrop' | 'dragDropDashed';
 }

package/dist/interfaces/forms/dynamicForm/DynamicForm.interface.d.ts

@@ -31,6 +31,7 @@ export interface DynamicFormI extends Partial<PartnerFooterI> {
     onUpload?: (filesByFieldId: Record<string, FolderFileI[] | File[]>) => void;
     searching?: boolean;
     showTitle?: boolean;
+    singleFileUpload?: boolean;
     title?: string;
     uploadingFieldId?: string;
 }

package/dist/interfaces/forms/dynamicForm/fields/FileField.interface.d.ts

@@ -4,6 +4,7 @@ export interface FileFieldI extends Pick<ReportI, 'description' | 'icon'> {
     onUpload?: (files: FolderFileI[]) => void;
     uploading?: boolean;
     displayImages?: string[];
+    singleFileUpload?: boolean;
     value?: string;
 }
 export interface SingleImageI extends Omit<FileFieldI, 'onUpload'> {

package/dist/mocks/forms/dynamicForm.mock.d.ts

@@ -7,3 +7,4 @@ export declare const unknownFormMock: Record<string, any>;
 export declare const alertFieldsMock: ReportI[];
 export declare const alertFieldsMock2: ReportI[];
 export declare const alertFieldsMock3: ReportI[];
+export declare const receiptFieldsMock: ReportI[];

package/dist/mocks/forms/dynamicForm.mock.js

@@ -1123,3 +1123,98 @@ export const alertFieldsMock3 = [
         type: 'alert',
     },
 ];
+export const receiptFieldsMock = [
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Select to have Homefile use AI & digitize receipt. ',
+        label: 'Find & add information',
+        comments: 'collapsed',
+        description: 'Homefile has an extensive data base of products, but we will also search the web for the most relevant information around products. This includes details like warranty Information, manuals, price, energy info, product ratings, etc. If the item is not in our database, it will populate as soon as we add the info.',
+        value: true,
+        type: 'checkbox-agreement',
+        visible: true,
+    },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Images',
+        description: 'Add picture',
+        comments: '',
+        value: '',
+        type: 'file',
+        canBeHidden: false,
+    },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Receipt',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: '',
+        type: 'group',
+        visible: false,
+        icon: 'receipt',
+        children: [
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Receipt',
+                label: 'Receipt',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: faker.lorem.sentence(),
+                type: 'text',
+                visible: true,
+                icon: 'receipt',
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'SKU',
+                label: 'SKU',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: faker.lorem.sentence(),
+                type: 'text',
+                visible: true,
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Grid 2',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: '',
+                type: 'grid',
+                children: [
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'Purchase Date',
+                        label: 'Purchase Date',
+                        description: faker.lorem.sentence(),
+                        comments: faker.lorem.sentence(),
+                        value: '',
+                        type: 'date',
+                        visible: true,
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '$ Amount Paid',
+                        label: '$ Amount Paid',
+                        description: faker.lorem.sentence(),
+                        comments: faker.lorem.sentence(),
+                        value: faker.finance.amount({ min: 10, max: 100 }),
+                        type: 'currency',
+                        visible: true,
+                    },
+                ],
+                visible: true,
+            },
+        ],
+    },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Notes',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: faker.lorem.text(),
+        type: 'textarea',
+        visible: false,
+        icon: 'notes',
+    },
+];

package/dist/stories/receipts/receipt/AddReceiptPanel.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ReceiptContentI } from '../../../interfaces';
+declare const _default: Meta<ReceiptContentI>;
+export default _default;
+export declare const AddReceiptPanel: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/receipts/receipt/AddReceiptPanel.stories.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
+import { RightPanel, ReceiptContent, ReceiptItems, ReceiptDetails, TabsHeader, PdfButton, PanelHeader, DynamicForm, EditItemName, ReceiptBody, SearchItemLoader, FooterButtons, FooterDrawer, } from '../../../components';
+import { receiptList } from '../../../helpers';
+import { Register } from '../../../assets/images';
+import { receiptFieldsMock } from '../../../mocks';
+import { useState } from 'react';
+import { Box, DrawerFooter } from '@chakra-ui/react';
+import { t } from 'i18next';
+export default {
+    title: 'Components/Receipts/Receipt',
+    component: ReceiptContent,
+};
+export const AddReceiptPanel = () => {
+    const [currentStep, setCurrentStep] = useState('1');
+    const handleSave = () => {
+        setCurrentStep('2');
+        setTimeout(() => {
+            setCurrentStep('3');
+        }, 2000);
+    };
+    const steps = {
+        '1': _jsx(StepOne, { onSave: handleSave }),
+        '2': (_jsx(SearchItemLoader, { message: "Digitizing receipt\n    One moment please\u2026" })),
+        '3': _jsx(StepThree, {}),
+    };
+    return (_jsx(RightPanel, { isOpen: true, onClose: action('onClose'), children: _jsxs(ReceiptContent, { children: [_jsx(PanelHeader, { handleCloseButton: action('onClose'), title: "Add Receipt", icon: Register }), steps[currentStep]] }) }));
+};
+function StepOne({ onSave }) {
+    const [value, setValue] = useState('');
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { p: "base", bg: "lightBlue.2", children: _jsx(EditItemName, { isRequired: false, placeholder: "Add receipt name", onChange: (e) => setValue(e.target.value), onSave: onSave, showSaveButton: !!value, value: value }) }), _jsx(DynamicForm, { form: receiptFieldsMock, showTitle: false, singleFileUpload: true }), _jsx(Box, { h: "120px" }), _jsx(DrawerFooter, { children: _jsx(FooterDrawer, { isOpen: true, variant: "footerSquare", children: _jsx(FooterButtons, { button1: {
+                            buttonStyle: 'primaryFooter',
+                            label: t('buttons.save'),
+                            onClick: onSave,
+                        } }) }) })] }));
+}
+function StepThree() {
+    return (_jsxs(_Fragment, { children: [_jsxs(ReceiptBody, { children: [_jsx(ReceiptDetails, { _id: "1", cashier: "Rochelle", itemQuantity: 4, paymentMethod: "Debit", purchaseDate: new Date(), tax: "3.17", store: "8418", storePhone: "512.258.7914", total: "41.65" }), _jsx(TabsHeader, { rightButton: _jsx(PdfButton, { onClick: action('Pdf click') }), tabList: [
+                            {
+                                label: 'Items',
+                                component: (_jsx(ReceiptItems, { isSelectDisabled: true, receipts: receiptList, leftOptions: ['Project', 'Room', 'Folder'], rightOptions: ['Kitchen', 'Landscape', 'Bedroom'], receiptOptions: ['unassigned', 'inventory', 'incidentals'], onItemSelectedChange: action('onItemSelectedChange'), onLeftSelectChange: action('onLeftSelectChange'), onReceiptSelectedChange: action('onReceiptSelectedChange'), onRightSelectChange: action('onRightSelectChange') })),
+                            },
+                            {
+                                label: 'Notes',
+                                component: null,
+                            },
+                        ] })] }), _jsx(DrawerFooter, { children: _jsx(FooterDrawer, { isOpen: true, variant: "footerSquare", children: _jsx(FooterButtons, { button1: {
+                            buttonStyle: 'secondaryFooter',
+                            label: t('buttons.edit'),
+                            onClick: action('onEdit'),
+                        }, button2: {
+                            buttonStyle: 'primaryFooter',
+                            label: t('buttons.confirm'),
+                            onClick: action('onConfirm'),
+                        } }) }) })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.22.2",
+  "version": "2.23.1",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/assets/locales/en/index.json

@@ -108,6 +108,7 @@
     "close": "Close",
     "done": "Done",
     "delete": "Delete",
+    "edit": "Edit",
     "forward": "Forward",
     "next": "Next",
     "previous": "Previous",

package/src/components/dragDrop/DragDropArea.tsx

@@ -13,12 +13,13 @@ export const DragDropArea = ({
   message = t('dragDrop.message'),
   message2 = t('dragDrop.message2'),
   variant = 'dragDropDashed',
+  multiple = false,
 }: DragDropAreaI) => {
   const hasError = !!errorMessage
   return (
     <Stack spacing="1">
       <Container variant={variant} minW="full" h={height} {...getRootProps()}>
-        <input {...getInputProps()} />
+        <input {...getInputProps({ multiple })} />
         <Flex h={height} align={align} justify="center" p="base">
           <Flex align="center" direction={direction} gap="2">
             <Upload />

package/src/components/forms/dynamicForm/DynamicForm.tsx

@@ -35,6 +35,7 @@ export const DynamicForm = ({
   onUpload,
   searching = false,
   showTitle = true,
+  singleFileUpload,
   title,
   uploadingFieldId,
   ...props
@@ -48,7 +49,7 @@ export const DynamicForm = ({
     handleFilesUpload,
     handleRemove,
   } = useDynamicForm({ fields, onUpload })
-  
+
   if (searching) {
     return <SearchItemLoader />
   }
@@ -70,6 +71,7 @@ export const DynamicForm = ({
         <>
           {visibleFields?.map((field) => {
             const {
+              comments,
               canBeHidden,
               children,
               description,
@@ -182,12 +184,14 @@ export const DynamicForm = ({
                 return (
                   <FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>
                     <FileField
-                      icon={baseProps.icon}
+                      {...baseProps}
                       description={description}
                       onRemove={onRemoveImage}
                       onUpload={(files) => handleFilesUpload({ id, files })}
                       uploading={uploadingFieldId === id}
                       displayImages={displayImages}
+                      singleFileUpload={singleFileUpload}
+                      value={value as string | undefined}
                     />
                   </FieldWithDelete>
                 )
@@ -222,6 +226,7 @@ export const DynamicForm = ({
                     name={name}
                     value={value}
                     description={description}
+                    comments={comments}
                   />
                 )
               case 'tile-body':

package/src/components/forms/dynamicForm/SearchItemLoader.tsx

@@ -3,13 +3,13 @@ import { Box, Text, Stack } from '@chakra-ui/react'
 import { PuffLoader } from 'react-spinners'
 import { colors } from '@/theme/colors'
 
-export const SearchItemLoader = () => {
+export const SearchItemLoader = ({ message = t('dynamicForm.searching') }) => {
   return (
     <Stack spacing="base" align="center" mt="50px">
       <PuffLoader color={colors.blue[1]} size={50} />
       <Box w="40%">
-        <Text fontSize="sm" textAlign="center">
-          {t('dynamicForm.searching')}
+        <Text fontSize="sm" textAlign="center" whiteSpace="preserve-breaks">
+          {message}
         </Text>
       </Box>
     </Stack>

package/src/components/forms/dynamicForm/fields/CheckboxAgreement.tsx

@@ -13,14 +13,16 @@ import {
 import { Controller, useFormContext } from 'react-hook-form'
 
 export const CheckboxAgreement = ({
+  comments,
   description,
   id,
   name,
   value,
-}: Pick<ReportI, 'name' | 'id' | 'description' | 'value'>) => {
+}: Pick<ReportI, 'name' | 'id' | 'description' | 'value' | 'comments'>) => {
   const { control } = useFormContext()
+  const collapsed = comments === 'collapsed'
   return (
-    <Accordion flex="1" allowToggle defaultIndex={[0]}>
+    <Accordion flex="1" allowToggle defaultIndex={collapsed ? [1] : [0]}>
       <AccordionItem border="none" bg="lightViolet.1">
         {({ isExpanded }) => (
           <>

package/src/components/forms/dynamicForm/fields/FileField.tsx

@@ -21,6 +21,7 @@ export const FileField = ({
   onUpload,
   uploading = false,
   displayImages = [],
+  singleFileUpload = false,
 }: FileFieldI) => {
   const { errorMessage, getInputProps, getRootProps, thumbnails } =
     useFilesUploader({
@@ -41,6 +42,7 @@ export const FileField = ({
           getInputProps={getInputProps}
           getRootProps={getRootProps}
           height="85px"
+          multiple={!singleFileUpload}
         />
         <Grid
           gridTemplateColumns={`repeat(auto-fill, minmax(22px, 1fr))`}

package/src/components/headers/TabsHeader.tsx

@@ -33,7 +33,7 @@ export const TabsHeader = ({
               <CustomTab key={label} label={label} />
             ))}
           </TabList>
-          <Flex>
+          <Flex flexShrink={0}>
             <TabList bg="neutral.white" w="full">
               {rightTabList?.map(({ label }) => (
                 <CustomTab key={label} label={label} />

package/src/components/receipts/receipt/ReceiptDetails.tsx

@@ -65,18 +65,39 @@ export const ReceiptDetails = ({
       borderBottom="1px solid"
       borderColor="lightBlue.2"
     >
-      <Box bgImg={ReceiptBg} bgRepeat="repeat-x" w="100%" h="10px" />
+      <Box
+        w="100%"
+        h="10px"
+        bg="lightBlue.2"
+        overflow="hidden"
+        position="relative"
+      >
+        <svg
+          width="100%"
+          height="8"
+          viewBox="0 0 100 10"
+          preserveAspectRatio="none"
+          style={{ display: 'block', position: 'absolute', bottom: 0, left: 0 }}
+        >
+          <defs>
+            <pattern
+              id="triangle"
+              width="4"
+              height="10"
+              patternUnits="userSpaceOnUse"
+            >
+              <polygon points="0,10 2,0 4,10" fill="white" />
+            </pattern>
+          </defs>
+          <rect width="100%" height="10" fill="url(#triangle)" />
+        </svg>
+      </Box>
       <Box bg="neutral.white" px="2" p="base">
         <Flex align="center" gap="base">
           <Image src={storeImage} w="75px" h="75px" fit="cover" />
           <Flex align="center" gap="2" flex="auto">
             <DetailsColumn details={leftColumn} />
-            <Divider
-              orientation="vertical"
-              bg="lightBlue.2"
-              h="63px"
-              mr="6"
-            />
+            <Divider orientation="vertical" bg="lightBlue.2" h="63px" mr="6" />
             <DetailsColumn align="right" details={rightColumn} />
           </Flex>
         </Flex>

package/src/interfaces/dragDrop/DragDropArea.interface.ts

@@ -10,5 +10,6 @@ export interface DragDropAreaI {
   height?: number | string
   message?: string
   message2?: string
+  multiple?: boolean
   variant?: 'dragDrop' | 'dragDropDashed'
 }

package/src/interfaces/forms/dynamicForm/DynamicForm.interface.ts

@@ -155,6 +155,7 @@ export interface DynamicFormI extends Partial<PartnerFooterI> {
   onUpload?: (filesByFieldId: Record<string, FolderFileI[] | File[]>) => void
   searching?: boolean
   showTitle?: boolean
+  singleFileUpload?: boolean
   title?: string
   uploadingFieldId?: string
 }

package/src/interfaces/forms/dynamicForm/fields/FileField.interface.ts

@@ -5,6 +5,7 @@ export interface FileFieldI extends Pick<ReportI, 'description' | 'icon'> {
   onUpload?: (files: FolderFileI[]) => void
   uploading?: boolean
   displayImages?: string[]
+  singleFileUpload?: boolean
   value?: string
 }
 

package/src/mocks/forms/dynamicForm.mock.ts

@@ -1148,3 +1148,100 @@ export const alertFieldsMock3: ReportI[] = [
     type: 'alert',
   },
 ]
+
+export const receiptFieldsMock: ReportI[] = [
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Select to have Homefile use AI & digitize receipt. ',
+    label: 'Find & add information',
+    comments: 'collapsed',
+    description:
+      'Homefile has an extensive data base of products, but we will also search the web for the most relevant information around products. This includes details like warranty Information, manuals, price, energy info, product ratings, etc. If the item is not in our database, it will populate as soon as we add the info.',
+    value: true,
+    type: 'checkbox-agreement',
+    visible: true,
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Images',
+    description: 'Add picture',
+    comments: '',
+    value: '',
+    type: 'file',
+    canBeHidden: false,
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Receipt',
+    description: faker.lorem.sentence(),
+    comments: faker.lorem.sentence(),
+    value: '',
+    type: 'group',
+    visible: false,
+    icon: 'receipt',
+    children: [
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Receipt',
+        label: 'Receipt',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: faker.lorem.sentence(),
+        type: 'text',
+        visible: true,
+        icon: 'receipt',
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'SKU',
+        label: 'SKU',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: faker.lorem.sentence(),
+        type: 'text',
+        visible: true,
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Grid 2',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: '',
+        type: 'grid',
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Purchase Date',
+            label: 'Purchase Date',
+            description: faker.lorem.sentence(),
+            comments: faker.lorem.sentence(),
+            value: '',
+            type: 'date',
+            visible: true,
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '$ Amount Paid',
+            label: '$ Amount Paid',
+            description: faker.lorem.sentence(),
+            comments: faker.lorem.sentence(),
+            value: faker.finance.amount({ min: 10, max: 100 }),
+            type: 'currency',
+            visible: true,
+          },
+        ],
+        visible: true,
+      },
+    ],
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Notes',
+    description: faker.lorem.sentence(),
+    comments: faker.lorem.sentence(),
+    value: faker.lorem.text(),
+    type: 'textarea',
+    visible: false,
+    icon: 'notes',
+  },
+]

package/src/stories/receipts/receipt/AddReceiptPanel.stories.tsx

@@ -0,0 +1,160 @@
+import { Meta } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import {
+  RightPanel,
+  ReceiptContent,
+  ReceiptItems,
+  ReceiptDetails,
+  TabsHeader,
+  PdfButton,
+  PanelHeader,
+  DynamicForm,
+  EditItemName,
+  ReceiptBody,
+  SearchItemLoader,
+  FooterButtons,
+  FooterDrawer,
+} from '@/components'
+import { receiptList } from '@/helpers'
+import { Register } from '@/assets/images'
+import { ReceiptContentI } from '@/interfaces'
+import { receiptFieldsMock } from '@/mocks'
+import { ReactNode, useState } from 'react'
+import { Box, DrawerBody, DrawerContent, DrawerFooter } from '@chakra-ui/react'
+import { t } from 'i18next'
+
+export default {
+  title: 'Components/Receipts/Receipt',
+  component: ReceiptContent,
+} as Meta<ReceiptContentI>
+
+export const AddReceiptPanel = () => {
+  const [currentStep, setCurrentStep] = useState('1')
+  const handleSave = () => {
+    setCurrentStep('2')
+    setTimeout(() => {
+      setCurrentStep('3')
+    }, 2000)
+  }
+  const steps: Record<string, ReactNode> = {
+    '1': <StepOne onSave={handleSave} />,
+    '2': (
+      <SearchItemLoader
+        message="Digitizing receipt
+    One moment please…"
+      />
+    ),
+    '3': <StepThree />,
+  }
+  return (
+    <RightPanel isOpen onClose={action('onClose')}>
+      <ReceiptContent>
+        <PanelHeader
+          handleCloseButton={action('onClose')}
+          title="Add Receipt"
+          icon={Register}
+        />
+
+        {steps[currentStep]}
+      </ReceiptContent>
+    </RightPanel>
+  )
+}
+
+function StepOne({ onSave }: { onSave: () => void }) {
+  const [value, setValue] = useState('')
+  return (
+    <>
+      <Box p="base" bg="lightBlue.2">
+        <EditItemName
+          isRequired={false}
+          placeholder="Add receipt name"
+          onChange={(e) => setValue(e.target.value)}
+          onSave={onSave}
+          showSaveButton={!!value}
+          value={value}
+        />
+      </Box>
+
+      <DynamicForm
+        form={receiptFieldsMock}
+        showTitle={false}
+        singleFileUpload
+      />
+      <Box h="120px" />
+      <DrawerFooter>
+        <FooterDrawer isOpen variant="footerSquare">
+          <FooterButtons
+            button1={{
+              buttonStyle: 'primaryFooter',
+              label: t('buttons.save'),
+              onClick: onSave,
+            }}
+          />
+        </FooterDrawer>
+      </DrawerFooter>
+    </>
+  )
+}
+
+function StepThree() {
+  return (
+    <>
+      <ReceiptBody>
+        <ReceiptDetails
+          _id="1"
+          cashier="Rochelle"
+          itemQuantity={4}
+          paymentMethod="Debit"
+          purchaseDate={new Date()}
+          tax="3.17"
+          store="8418"
+          storePhone="512.258.7914"
+          total="41.65"
+        />
+
+        <TabsHeader
+          rightButton={<PdfButton onClick={action('Pdf click')} />}
+          tabList={[
+            {
+              label: 'Items',
+              component: (
+                <ReceiptItems
+                  isSelectDisabled={true}
+                  receipts={receiptList}
+                  leftOptions={['Project', 'Room', 'Folder']}
+                  rightOptions={['Kitchen', 'Landscape', 'Bedroom']}
+                  receiptOptions={['unassigned', 'inventory', 'incidentals']}
+                  onItemSelectedChange={action('onItemSelectedChange')}
+                  onLeftSelectChange={action('onLeftSelectChange')}
+                  onReceiptSelectedChange={action('onReceiptSelectedChange')}
+                  onRightSelectChange={action('onRightSelectChange')}
+                />
+              ),
+            },
+            {
+              label: 'Notes',
+              component: null,
+            },
+          ]}
+        />
+      </ReceiptBody>
+      <DrawerFooter>
+        <FooterDrawer isOpen variant="footerSquare">
+          <FooterButtons
+            button1={{
+              buttonStyle: 'secondaryFooter',
+              label: t('buttons.edit'),
+              onClick: action('onEdit'),
+            }}
+            button2={{
+              buttonStyle: 'primaryFooter',
+              label: t('buttons.confirm'),
+              onClick: action('onConfirm'),
+            }}
+          />
+        </FooterDrawer>
+      </DrawerFooter>
+    </>
+  )
+}