npm - @homefile/components-v2 - Versions diffs - 2.22.2 → 2.23.0 - Mend

@homefile/components-v2 2.22.2 → 2.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

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

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

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

@@ -24,7 +24,7 @@ export const DynamicForm = (_a) => {
         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,
@@ -83,7 +83,7 @@ export const DynamicForm = (_a) => {
                                 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/headers/TabsHeader.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/mocks/forms/dynamicForm.mock.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 }), _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 CHANGED Viewed

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

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

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

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

@@ -48,7 +48,7 @@ export const DynamicForm = ({
     handleFilesUpload,
     handleRemove,
   } = useDynamicForm({ fields, onUpload })
   if (searching) {
     return <SearchItemLoader />
   }
@@ -70,6 +70,7 @@ export const DynamicForm = ({
         <>
           {visibleFields?.map((field) => {
             const {
+              comments,
               canBeHidden,
               children,
               description,
@@ -222,6 +223,7 @@ export const DynamicForm = ({
                     name={name}
                     value={value}
                     description={description}
+                    comments={comments}
                   />
                 )
               case 'tile-body':

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

@@ -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 CHANGED Viewed

@@ -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/headers/TabsHeader.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/mocks/forms/dynamicForm.mock.ts CHANGED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,156 @@
+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} />
+      <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>
+    </>
+  )
+}