@homefile/components-v2 2.22.1 → 2.23.0

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/forms/dynamicForm/DynamicForm.js

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

@@ -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/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/homeAssistant/HomeMonitorSteps.d.ts

@@ -1,2 +1,2 @@
 import { HomeMonitortStepsI } from '../../interfaces';
-export declare const HomeMonitorSteps: ({ alerts, menuItems, onStepClick, stepsWithAlerts, }: HomeMonitortStepsI) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeMonitorSteps: ({ alerts, menuItems, onStepClick, }: HomeMonitortStepsI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/HomeMonitorSteps.js

@@ -4,17 +4,16 @@ import { Box, Flex } from '@chakra-ui/react';
 import { HomeMonitorButton, IconMenu, MoreHorizontal } from '..';
 import { homeAssistantSteps } from '../../helpers';
 import { homeAssistantProxy } from '../../proxies';
-export const HomeMonitorSteps = ({ alerts = [], menuItems = [], onStepClick, stepsWithAlerts = [], }) => {
+export const HomeMonitorSteps = ({ alerts = [], menuItems = [], onStepClick, }) => {
     const { setSelectedId } = homeAssistantProxy;
     const isDisabled = menuItems.length === 0;
     const handleStepClick = (step) => onStepClick(step);
     return (_jsx(Flex, { gap: "base", justify: "center", children: homeAssistantSteps.map((step, index) => {
             var _a;
-            return (_jsx(Box, { position: "relative", flex: "1", children: _jsxs(Fragment, { children: [_jsx(HomeMonitorButton, { alertCount: (_a = alerts.find((alert) => alert.step === index + 1)) === null || _a === void 0 ? void 0 : _a.count, currentStep: index + 1, onStepClick: handleStepClick, status: getStatus(index + 1, stepsWithAlerts, alerts), step: step }), _jsx(Box, { position: "absolute", top: "-2px", right: "4px", zIndex: "1400", children: _jsx(IconMenu, { zIndex: "2", icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: index + 1, menuItems: menuItems, disabled: isDisabled, onClick: () => setSelectedId(`homeMonitorButton-${index + 1}`) }) })] }) }, step === null || step === void 0 ? void 0 : step.title));
+            return (_jsx(Box, { position: "relative", flex: "1", children: _jsxs(Fragment, { children: [_jsx(HomeMonitorButton, { alertCount: (_a = alerts.find((alert) => alert.step === index + 1)) === null || _a === void 0 ? void 0 : _a.count, currentStep: index + 1, onStepClick: handleStepClick, status: getStatus(index + 1, alerts), step: step }), _jsx(Box, { position: "absolute", top: "-2px", right: "4px", zIndex: "1400", children: _jsx(IconMenu, { zIndex: "2", icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: index + 1, menuItems: menuItems, disabled: isDisabled, onClick: () => setSelectedId(`homeMonitorButton-${index + 1}`) }) })] }) }, step === null || step === void 0 ? void 0 : step.title));
         }) }));
 };
-const getStatus = (index, stepsWithAlerts, alerts) => {
-    const hasAlert = (stepsWithAlerts === null || stepsWithAlerts === void 0 ? void 0 : stepsWithAlerts.includes(index)) ||
-        (alerts === null || alerts === void 0 ? void 0 : alerts.some((alert) => alert.step === index));
+const getStatus = (index, alerts) => {
+    const hasAlert = alerts === null || alerts === void 0 ? void 0 : alerts.some((alert) => alert.step === index);
     return hasAlert ? 'alert' : 'ok';
 };

package/dist/components/homeBoard/HomeBoard.js

@@ -57,7 +57,7 @@ export const HomeBoard = () => {
                                                                     label: 'Details',
                                                                     handleClick: handleHomeAssistantClick,
                                                                 },
-                                                            ], stepsWithAlerts: [], onStepClick: () => null })] }) }), _jsx(DynamicForm, { form: tileUIMock, menuItems: menuMock, socialLinks: socialLinksMock, showTitle: false, websiteUrl: "http://www.audreyscheckdesign.com" }), _jsxs(Stack, { spacing: "base", children: [_jsx(ReceiptAutofiler, { onClick: () => null, totalReceipts: 36, totalTitle: "Receipts Received", forwardTo: "reciepts@homefile.cloud", onFilter: () => null, children: _jsx(ReceiptsFiled, { incidentalItemsNumber: 0, incidentalSpent: 0, inventoryItemsNumber: 0, inventorySpent: 0, total: 0 }) }), _jsx(ValueMonitor, { menuItems: menuMock, balance: "+3%", totalValue: 323421, year: "2023", yearValue: 5684 })] }), _jsx(PropertyTaxes, { estimatedTaxValue: 1000, menuItems: menuMock, taxes: taxesMock, title: "Travis County Property Taxes" }), _jsx(ShortPartnerTile, { _id: "1", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(TrendingValue, { chartData: lineChartData, marketValue: 894000, menuItems: menuMock, mortgageBalance: 220532, purchasePrice: 220532, roi: "+234%" }), _jsx(ShortPartnerTile, { _id: "2", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(FolderSharing, { folders: FoldersDB, handleAddNewFolder: handleNewFolder, handleFolderClick: handleFolderClick, handleSelect: () => null, initialSelectItem: selectOptions[0], menuItems: menuMock, selectItems: selectOptions }), _jsx(AddToHomefile, { documentList: [], onItemClick: () => null }), _jsx(ShortPartnerTile, { _id: "3", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" })] })] })] })] }), _jsx(HomeBoardTour, { currentStep: currentStep, handleClose: handleClose, handleStep: handleStep, meetStepUrl: videoMock, isActive: activeTour })] }));
+                                                            ], onStepClick: () => null })] }) }), _jsx(DynamicForm, { form: tileUIMock, menuItems: menuMock, socialLinks: socialLinksMock, showTitle: false, websiteUrl: "http://www.audreyscheckdesign.com" }), _jsxs(Stack, { spacing: "base", children: [_jsx(ReceiptAutofiler, { onClick: () => null, totalReceipts: 36, totalTitle: "Receipts Received", forwardTo: "reciepts@homefile.cloud", onFilter: () => null, children: _jsx(ReceiptsFiled, { incidentalItemsNumber: 0, incidentalSpent: 0, inventoryItemsNumber: 0, inventorySpent: 0, total: 0 }) }), _jsx(ValueMonitor, { menuItems: menuMock, balance: "+3%", totalValue: 323421, year: "2023", yearValue: 5684 })] }), _jsx(PropertyTaxes, { estimatedTaxValue: 1000, menuItems: menuMock, taxes: taxesMock, title: "Travis County Property Taxes" }), _jsx(ShortPartnerTile, { _id: "1", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(TrendingValue, { chartData: lineChartData, marketValue: 894000, menuItems: menuMock, mortgageBalance: 220532, purchasePrice: 220532, roi: "+234%" }), _jsx(ShortPartnerTile, { _id: "2", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" }), _jsx(FolderSharing, { folders: FoldersDB, handleAddNewFolder: handleNewFolder, handleFolderClick: handleFolderClick, handleSelect: () => null, initialSelectItem: selectOptions[0], menuItems: menuMock, selectItems: selectOptions }), _jsx(AddToHomefile, { documentList: [], onItemClick: () => null }), _jsx(ShortPartnerTile, { _id: "3", buttonText: "Contact Audrey Scheck", description: "Full-service design firm focusing on residential remodels, furnishing, and styling.", onClick: () => null, socialLinks: socialLinksMock2, logo: "https://static.wixstatic.com/media/258105_8e04439070694f278e4787a310ea9f4b~mv2.png", partnerName: "Audrey Scheck", websiteUrl: "" })] })] })] })] }), _jsx(HomeBoardTour, { currentStep: currentStep, handleClose: handleClose, handleStep: handleStep, meetStepUrl: videoMock, isActive: activeTour })] }));
 };
 export const AppBarComponent = ({ setActiveTour = (value) => { }, onClick = (panel) => { }, }) => {
     const handleTour = () => {

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/index.d.ts

@@ -1,4 +1,4 @@
-export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BackendAlert, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WeatherWidget, WellDone, YtdTile, } from './components';
+export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BackendAlert, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WeatherWidget, WellDone, YtdTile, } from './components';
 export { useCustomToast } from './hooks';
 export { randomColor, mapApiObjectToFormFields, mapForecastToWidget, } from './utils';
 export { Contacts, MagnifyingGlassReport, Message, Register, Receipts, Price, BlueFolderShared, Calendar, Create, Notes, } from './assets/images';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BackendAlert, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WeatherWidget, WellDone, YtdTile, } from './components';
+export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BackendAlert, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WeatherWidget, WellDone, YtdTile, } from './components';
 export { useCustomToast } from './hooks';
 export { randomColor, mapApiObjectToFormFields, mapForecastToWidget, } from './utils';
 export { Contacts, MagnifyingGlassReport, Message, Register, Receipts, Price, BlueFolderShared, Calendar, Create, Notes, } from './assets/images';

package/dist/interfaces/homeAssistant/HomeMonitorSteps.interface.d.ts

@@ -6,7 +6,6 @@ interface AlertI {
 export interface HomeMonitortStepsI {
     alerts?: AlertI[];
     menuItems: MenuItemI[];
-    stepsWithAlerts?: number[];
     onStepClick: (step: number) => void;
 }
 export interface HomeMonitorButtonI {

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 }), _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.1",
+  "version": "2.23.0",
   "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/forms/dynamicForm/DynamicForm.tsx

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

@@ -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/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/homeAssistant/HomeMonitorSteps.tsx

@@ -9,7 +9,6 @@ export const HomeMonitorSteps = ({
   alerts = [],
   menuItems = [],
   onStepClick,
-  stepsWithAlerts = [],
 }: HomeMonitortStepsI) => {
   const { setSelectedId } = homeAssistantProxy
 
@@ -27,7 +26,7 @@ export const HomeMonitorSteps = ({
               }
               currentStep={index + 1}
               onStepClick={handleStepClick}
-              status={getStatus(index + 1, stepsWithAlerts, alerts)}
+              status={getStatus(index + 1, alerts)}
               step={step}
             />
             <Box position="absolute" top="-2px" right="4px" zIndex="1400">
@@ -47,13 +46,7 @@ export const HomeMonitorSteps = ({
   )
 }
 
-const getStatus = (
-  index: number,
-  stepsWithAlerts: number[],
-  alerts: HomeMonitortStepsI['alerts']
-) => {
-  const hasAlert =
-    stepsWithAlerts?.includes(index) ||
-    alerts?.some((alert) => alert.step === index)
+const getStatus = (index: number, alerts: HomeMonitortStepsI['alerts']) => {
+  const hasAlert = alerts?.some((alert) => alert.step === index)
   return hasAlert ? 'alert' : 'ok'
 }

package/src/components/homeBoard/HomeBoard.tsx

@@ -370,7 +370,6 @@ export const HomeBoard = () => {
                         handleClick: handleHomeAssistantClick,
                       },
                     ]}
-                    stepsWithAlerts={[]}
                     onStepClick={() => null}
                   />
                 </Stack>

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/index.ts

@@ -98,7 +98,6 @@ export {
   MediaDetailsStep,
   MessagePanel,
   MessageChatPanel,
-  MonitorAlerts,
   MonthlyCharge,
   MortgageInfo,
   MoveModal,

package/src/interfaces/homeAssistant/HomeMonitorSteps.interface.ts

@@ -8,7 +8,6 @@ interface AlertI {
 export interface HomeMonitortStepsI {
   alerts?: AlertI[]
   menuItems: MenuItemI[]
-  stepsWithAlerts?: number[]
   onStepClick: (step: number) => void
 }
 

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,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>
+    </>
+  )
+}

package/dist/stories/homeAssistant/monitorAlerts/BaseAlertCard.stories.d.ts

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

package/dist/stories/homeAssistant/monitorAlerts/BaseAlertCard.stories.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { BaseAlertCard, SmokeDetectorBattery } from '../../../components';
-import { Box } from '@chakra-ui/react';
-import { action } from '@storybook/addon-actions';
-import { Battery } from '../../../assets/images';
-export default {
-    title: 'Components/HomeAssistant/MonitorAlerts',
-    component: BaseAlertCard,
-    args: {
-        onClose: action('onClose'),
-        description: 'Checking your smoke detector batteries monthly ensures they function properly and keep your home safe from fire hazards.',
-        icon: Battery,
-        title: 'Check the batteries in your Smoke detectors.',
-        children: _jsx(SmokeDetectorBattery, {}),
-    },
-    decorators: [
-        (Story) => (_jsx(Box, { p: "base", w: ['full', '440px'], h: "477px", children: _jsx(Story, {}) })),
-    ],
-};
-export const BaseAlertCardComponent = (args) => {
-    return _jsx(BaseAlertCard, Object.assign({}, args));
-};

package/dist/stories/homeAssistant/monitorAlerts/MonitorAlerts.stories.d.ts

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

package/dist/stories/homeAssistant/monitorAlerts/MonitorAlerts.stories.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { MonitorAlerts } from '../../../components';
-export default {
-    title: 'Components/HomeAssistant/MonitorAlerts',
-    component: MonitorAlerts,
-    args: {
-        alertId: 'change-air-filter',
-    },
-};
-export const MonitorAlertsComponent = (args) => {
-    return _jsx(MonitorAlerts, Object.assign({}, args));
-};

package/src/stories/homeAssistant/monitorAlerts/BaseAlertCard.stories.tsx

@@ -1,30 +0,0 @@
-import { Meta } from '@storybook/react'
-import { BaseAlertCard, SmokeDetectorBattery } from '@/components'
-import { Box } from '@chakra-ui/react'
-import { BaseAlertCardI } from '@/interfaces'
-import { action } from '@storybook/addon-actions'
-import { Battery } from '@/assets/images'
-
-export default {
-  title: 'Components/HomeAssistant/MonitorAlerts',
-  component: BaseAlertCard,
-  args: {
-    onClose: action('onClose'),
-    description:
-      'Checking your smoke detector batteries monthly ensures they function properly and keep your home safe from fire hazards.',
-    icon: Battery,
-    title: 'Check the batteries in your Smoke detectors.',
-    children: <SmokeDetectorBattery />,
-  },
-  decorators: [
-    (Story: any) => (
-      <Box p="base" w={['full', '440px']} h="477px">
-        <Story />
-      </Box>
-    ),
-  ],
-} as Meta<BaseAlertCardI>
-
-export const BaseAlertCardComponent = (args: BaseAlertCardI) => {
-  return <BaseAlertCard {...args} />
-}

package/src/stories/homeAssistant/monitorAlerts/MonitorAlerts.stories.tsx

@@ -1,15 +0,0 @@
-import { Meta } from '@storybook/react'
-import { MonitorAlerts } from '@/components'
-import { MonitorAlertsI } from '@/interfaces'
-
-export default {
-  title: 'Components/HomeAssistant/MonitorAlerts',
-  component: MonitorAlerts,
-  args: {
-    alertId: 'change-air-filter',
-  },
-} as Meta<MonitorAlertsI>
-
-export const MonitorAlertsComponent = (args: MonitorAlertsI) => {
-  return <MonitorAlerts {...args} />
-}