@homefile/components-v2 2.28.1 → 2.29.0

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

@@ -478,6 +478,12 @@
       "unopened": "Unopened"
     }
   },
+  "homieAddItems": {
+    "addItem": "Upload a picture of your refrigerator label",
+    "addReceipt": "Add a picture of a purchase receipt.",
+    "subTitle": "Give them a try.",
+    "title": "Homie does the work for you."
+  },
   "householdItems": {
     "headers": {
       "itemName": "An item name",

package/dist/components/homeAssistant/monitorAlerts/HomieAddItems.d.ts

@@ -0,0 +1,2 @@
+import { HomieAddItemsI } from '../../../interfaces';
+export declare const HomieAddItems: ({ onAddReceipt, onAddItem }: HomieAddItemsI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/monitorAlerts/HomieAddItems.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Box, Stack, Text, Image, Flex } from '@chakra-ui/react';
+import { Fridge, Register } from '../../../assets/images';
+import { colors } from '../../../theme/colors';
+import { Plus } from '../..';
+export const HomieAddItems = ({ onAddReceipt, onAddItem }) => {
+    return (_jsxs(Stack, { spacing: "base", flex: "1", zIndex: "2", pr: "6", children: [_jsx(Text, { fontSize: "26px", lineHeight: "36px", textAlign: "center", children: t('homieAddItems.title') }), _jsx(Box, { bg: "lightBlue.5", borderRadius: "full", py: "2", children: _jsx(Text, { fontWeight: "medium", textAlign: "center", children: t('homieAddItems.subTitle') }) }), _jsx(AddButton, { icon: Register, text: t('homieAddItems.addReceipt'), onClick: onAddReceipt }), _jsx(AddButton, { icon: Fridge, text: t('homieAddItems.addItem'), onClick: onAddItem })] }));
+};
+const AddButton = ({ icon, text, onClick }) => {
+    return (_jsx(Box, { as: "button", p: "base", bg: "neutral.white", boxShadow: "md", transition: "background 0.2s", _hover: {
+            bg: 'lightGreen.7',
+        }, onClick: onClick, minH: "80px", children: _jsxs(Flex, { align: "center", gap: "base", children: [_jsxs(Flex, { children: [_jsx(Plus, { size: 18, stroke: colors.blue[3] }), _jsx(Image, { boxSize: "32px", src: icon })] }), _jsx(Text, { textAlign: "left", lineHeight: "22px", children: text })] }) }));
+};

package/dist/components/homeAssistant/monitorAlerts/index.d.ts

@@ -8,5 +8,6 @@ export * from './BackendAlertCard';
 export * from './WeatherWidget';
 export * from './HomefileMonitoring';
 export * from './HomeMonitorPanel';
+export * from './HomieAddItems';
 export * from './MonitorAlerts';
 export * from './Notifications';

package/dist/components/homeAssistant/monitorAlerts/index.js

@@ -8,5 +8,6 @@ export * from './BackendAlertCard';
 export * from './WeatherWidget';
 export * from './HomefileMonitoring';
 export * from './HomeMonitorPanel';
+export * from './HomieAddItems';
 export * from './MonitorAlerts';
 export * from './Notifications';

package/dist/components/homeBoard/HomeBoard.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box, DrawerBody, DrawerContent, DrawerHeader, Flex, Stack, } from '@chakra-ui/react';
-import { HomeHeader, HomeCardWithRecipent, AddFolder, EditAccountType, FolderSharing, RightPanel, HomeBoardTour, RoomsMenu, ContactsContent, AppBar, BarDivider, ContactList, PeopleConnected, StorageUsed, TourButton, Trash, TutorialsButton, FolderTypeSelection, DisplayFiles, DisplayOptions, FilesUploader, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, SharedAccounts, ReceiptAutofiler, HomeBoardGrid, ShortPartnerTile, ValueMonitor, TrendingValue, ReceiptsFiled, PropertyTaxes, PartnerCatalogPanel, DynamicForm, PanelHeader, EditHomePanel, HomeCard, EditHomeFooter, HomeAssistant, HomeAssistantPanel, HomeMonitor, HomefileMonitoring, HomeMonitorSteps, NotificationsReminder, NotificationsPanel, AddToHomefile, WeatherWidget, MinimizedTiles, } from '..';
+import { HomeHeader, HomeCardWithRecipent, AddFolder, EditAccountType, FolderSharing, RightPanel, HomeBoardTour, RoomsMenu, ContactsContent, AppBar, BarDivider, ContactList, PeopleConnected, StorageUsed, TourButton, Trash, TutorialsButton, FolderTypeSelection, DisplayFiles, DisplayOptions, FilesUploader, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, SharedAccounts, ReceiptAutofiler, HomeBoardGrid, ShortPartnerTile, ValueMonitor, TrendingValue, ReceiptsFiled, PropertyTaxes, PartnerCatalogPanel, DynamicForm, PanelHeader, EditHomePanel, HomeCard, EditHomeFooter, HomeAssistant, HomeAssistantPanel, HomeMonitor, HomeMonitorSteps, NotificationsReminder, NotificationsPanel, AddToHomefile, WeatherWidget, MinimizedTiles, HomieAddItems, } from '..';
 import { HomeCards, recipientsDb, FoldersDB, selectOptions, RoomsList, RoomsToAdd, } from '../../helpers';
 import { ContactsMock, DisplayFilesMock, formFieldsMock, homeBoardRecorsMock, lineChartData, menuMock, partnerCatalogMock, sharedAccountsMock, socialLinksMock2, taxesMock, userMock, videoMock, homeAssitantStep1FormMock, homeAssitantStep2FormMock, homeAssitantStep3FormMock, homeAssitantStep4FormMock, homeAssitantStep5FormMock, homeAssitantStep6FormMock, tileUIMock, socialLinksMock, notificationsMock, weatherDataMock, documentListMock, minimizedTilesMock, } from '../../mocks';
 import { useHomeBoard, useWindowDimensions } from '../../hooks';
@@ -53,7 +53,7 @@ export const HomeBoard = () => {
         Notifications: (_jsx(NotificationsPanel, { notifications: notificationsMock, onClose: onRightClose, onDismiss: () => null })),
     };
     const panelSize = currentComponent === 'PartnerCatalog' ? 'lg' : 'md';
-    return (_jsxs(Box, { overflowX: "hidden", children: [_jsx(RightPanel, { overlay: showOverlay, isOpen: isRightOpen, onClose: onRightClose, size: panelSize, children: rightPanelComponents[currentComponent] }), _jsxs(Flex, { w: "full", minH: "100dvh", children: [_jsx(RoomsMenu, { activeRoom: "homeboard", onAddRoom: (id) => __awaiter(void 0, void 0, void 0, function* () { return console.log(id); }), onClick: () => null, onHomeClick: () => null, rooms: RoomsList, roomsToAdd: RoomsToAdd }), _jsxs(Box, { w: "full", children: [_jsx(AppBarComponent, { setActiveTour: setActiveTour, onClick: handleAppBarClick }), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsx(HomeHeader, { buttonLabel: "Partner catalog", onBack: () => null, homeName: homeName, onAdd: () => null }), _jsxs(HomeBoardGrid, { children: [_jsx(HomeCardWithRecipent, { address: HomeCards[0].address, handleEdit: handleEditHomeClick, handleDeleteAccountType: (email) => email, handleSubmitAccountType: (form) => form, _id: HomeCards[0]._id, image: HomeCards[0].image, loading: false, name: HomeCards[0].name, menu: menuMock, addImage: () => null, recipients: recipientsDb, records: homeBoardRecorsMock }), _jsx(HomeAssistant, { currentPanel: homeAssistantCurrentStep, currentStep: 6, onStepClick: handleHomeAssistantClick }), _jsx(MinimizedTiles, { tiles: minimizedTilesMock, menu: menuMock, onMaximize: (id) => console.log(id) }), _jsx(PropertyTaxes, { estimatedTaxValue: 1000, menuItems: menuMock, taxes: taxesMock, title: "Travis County Property Taxes" }), _jsx(HomeMonitor, { children: _jsxs(Stack, { spacing: "base", w: "full", p: "base", h: "full", justify: "space-between", children: [_jsxs(Flex, { gap: "base", children: [_jsx(HomefileMonitoring, {}), _jsx(WeatherWidget, Object.assign({}, mapForecastToWidget(weatherDataMock, 'TX, Houston')))] }), _jsx(HomeMonitorSteps, { menuItems: [
+    return (_jsxs(Box, { overflowX: "hidden", children: [_jsx(RightPanel, { overlay: showOverlay, isOpen: isRightOpen, onClose: onRightClose, size: panelSize, children: rightPanelComponents[currentComponent] }), _jsxs(Flex, { w: "full", minH: "100dvh", children: [_jsx(RoomsMenu, { activeRoom: "homeboard", onAddRoom: (id) => __awaiter(void 0, void 0, void 0, function* () { return console.log(id); }), onClick: () => null, onHomeClick: () => null, rooms: RoomsList, roomsToAdd: RoomsToAdd }), _jsxs(Box, { w: "full", children: [_jsx(AppBarComponent, { setActiveTour: setActiveTour, onClick: handleAppBarClick }), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsx(HomeHeader, { buttonLabel: "Partner catalog", onBack: () => null, homeName: homeName, onAdd: () => null }), _jsxs(HomeBoardGrid, { children: [_jsx(HomeCardWithRecipent, { address: HomeCards[0].address, handleEdit: handleEditHomeClick, handleDeleteAccountType: (email) => email, handleSubmitAccountType: (form) => form, _id: HomeCards[0]._id, image: HomeCards[0].image, loading: false, name: HomeCards[0].name, menu: menuMock, addImage: () => null, recipients: recipientsDb, records: homeBoardRecorsMock }), _jsx(HomeAssistant, { currentPanel: homeAssistantCurrentStep, currentStep: 6, onStepClick: handleHomeAssistantClick }), _jsx(MinimizedTiles, { tiles: minimizedTilesMock, menu: menuMock, onMaximize: (id) => console.log(id) }), _jsx(PropertyTaxes, { estimatedTaxValue: 1000, menuItems: menuMock, taxes: taxesMock, title: "Travis County Property Taxes" }), _jsx(HomeMonitor, { children: _jsxs(Stack, { spacing: "base", w: "full", p: "base", h: "full", justify: "space-between", children: [_jsxs(Flex, { gap: "base", children: [_jsx(HomieAddItems, { onAddReceipt: () => console.log('Add receipt clicked'), onAddItem: () => console.log('Add item clicked') }), _jsx(WeatherWidget, Object.assign({}, mapForecastToWidget(weatherDataMock, 'TX, Houston')))] }), _jsx(HomeMonitorSteps, { menuItems: [
                                                                 {
                                                                     label: 'Details',
                                                                     handleClick: handleHomeAssistantClick,

package/dist/components/tile/MinimizedTile.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Stack, Image, Text } from '@chakra-ui/react';
 import { MoreHorizontal, IconMenu, NewBadge } from '..';
 export const MinimizedTile = ({ _id, menu, title, icon, isNew, onMaximize, }) => {
-    return (_jsxs(Box, { bg: "neutral.white", boxShadow: "md", boxSize: "100px", position: "relative", transition: "background 0.2s", _hover: {
+    return (_jsxs(Stack, { bg: "neutral.white", boxShadow: "md", flex: "1", h: "full", justify: "center", position: "relative", transition: "background 0.2s", _hover: {
             bg: 'lightGreen.7',
-        }, children: [isNew && (_jsx(Box, { position: "absolute", top: "-5px", left: "-2px", children: _jsx(NewBadge, { bg: "violet.1", color: "neutral.white" }) })), _jsx(Box, { textAlign: "right", w: "full", pr: "2", children: _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: _id, menuItems: menu, disabled: menu.length === 0 }) }), _jsxs(Stack, { px: "base", align: "center", cursor: "pointer", pos: "relative", children: [_jsx(Box, { onClick: () => onMaximize(_id), pos: "absolute", top: "0", right: "0", bottom: "0", left: "0" }), icon && (_jsx(Image, { src: icon, alt: "not-found", boxSize: "34px", objectFit: "contain" })), title && (_jsx(Text, { textAlign: "center", noOfLines: 1, textOverflow: "ellipsis", fontSize: "xs", children: title }))] })] }));
+        }, children: [isNew && (_jsx(Box, { position: "absolute", top: "-5px", left: "-2px", children: _jsx(NewBadge, { bg: "violet.1", color: "neutral.white" }) })), _jsx(Box, { position: "absolute", top: "2px", right: "5px", children: _jsx(IconMenu, { icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: _id, menuItems: menu, disabled: menu.length === 0 }) }), _jsxs(Stack, { px: "base", align: "center", cursor: "pointer", pos: "relative", justify: "center", children: [_jsx(Box, { onClick: () => onMaximize(_id), pos: "absolute", top: "0", right: "0", bottom: "0", left: "0" }), icon && (_jsx(Image, { src: icon, alt: "not-found", boxSize: "50%", objectFit: "contain" })), title && (_jsx(Text, { textAlign: "center", noOfLines: 1, textOverflow: "ellipsis", fontSize: "xs", children: title }))] })] }));
 };

package/dist/components/tile/MinimizedTiles.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-import { Center, SimpleGrid } from '@chakra-ui/react';
+import { Box, SimpleGrid } from '@chakra-ui/react';
 import { MinimizedTile } from './MinimizedTile';
 import { Billing, Calendar, EstValue, GuestBedroom, IA, Inbox, Lighting, Warranty, YellowFolder, } from '../../assets/images';
 export const MinimizedTiles = ({ tiles, menu, onMaximize, }) => {
     const onlyMinimizedTiles = tiles.filter((tile) => !tile.isMaximized);
-    return (_jsx(Center, { h: "full", children: _jsx(SimpleGrid, { columns: 3, spacing: "base", children: onlyMinimizedTiles.map((tile) => (_createElement(MinimizedTile, Object.assign({}, tile, { key: tile._id, menu: menu, icon: IconById[tile._id], onMaximize: onMaximize })))) }) }));
+    return (_jsx(Box, { h: "full", children: _jsx(SimpleGrid, { columns: 3, spacing: "base", h: "full", gridAutoRows: "1fr", alignItems: "stretch", children: onlyMinimizedTiles.map((tile) => (_createElement(MinimizedTile, Object.assign({}, tile, { key: tile._id, menu: menu, icon: IconById[tile._id], onMaximize: onMaximize })))) }) }));
 };
 const IconById = {
     folders: YellowFolder,

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, EditItemName, 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, HomeItemList, HomeItemManualInfo, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MinimizedTiles, 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, SearchItemLoader, 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, EditItemName, 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, HomeItemList, HomeItemManualInfo, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, HomieAddItems, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MinimizedTiles, 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, SearchItemLoader, 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, EditItemName, 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, HomeItemList, HomeItemManualInfo, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MinimizedTiles, 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, SearchItemLoader, 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, EditItemName, 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, HomeItemList, HomeItemManualInfo, HomeMonitor, HomeMonitorPanel, HomeMonitorSteps, HomeSharedWith, HomieAddItems, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MinimizedTiles, 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, SearchItemLoader, 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/HomieAddItems.interface.d.ts

@@ -0,0 +1,9 @@
+export interface HomieAddItemsI {
+    onAddReceipt: () => void;
+    onAddItem: () => void;
+}
+export interface AddButtonI {
+    icon: string;
+    text: string;
+    onClick: () => void;
+}

package/dist/interfaces/homeAssistant/HomieAddItems.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/interfaces/homeAssistant/index.d.ts

@@ -10,5 +10,6 @@ export * from './HomeAssistantSteps.interface';
 export * from './HomeAssistantTutorial.interface';
 export * from './HomeMonitorPanel.interface';
 export * from './HomeMonitorSteps.interface';
+export * from './HomieAddItems.interface';
 export * from './MonitorAlerts.interface';
 export * from './WeatherWidget.interface';

package/dist/interfaces/homeAssistant/index.js

@@ -10,5 +10,6 @@ export * from './HomeAssistantSteps.interface';
 export * from './HomeAssistantTutorial.interface';
 export * from './HomeMonitorPanel.interface';
 export * from './HomeMonitorSteps.interface';
+export * from './HomieAddItems.interface';
 export * from './MonitorAlerts.interface';
 export * from './WeatherWidget.interface';

package/dist/stories/homeAssistant/HomeMonitor.stories.d.ts

@@ -2,3 +2,4 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta;
 export default _default;
 export declare const HomeMonitorComponent: () => import("react/jsx-runtime").JSX.Element;
+export declare const HomeMonitorWithAddItems: () => import("react/jsx-runtime").JSX.Element;

package/dist/stories/homeAssistant/HomeMonitor.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { HomefileMonitoring, HomeMonitor, HomeMonitorSteps, WeatherWidget, } from '../../components';
+import { HomefileMonitoring, HomeMonitor, HomeMonitorSteps, HomieAddItems, WeatherWidget, } from '../../components';
 import { Box, Flex, Stack } from '@chakra-ui/react';
 import { action } from '@storybook/addon-actions';
 import { menuMock, weatherDataMock } from '../../mocks';
@@ -8,7 +8,7 @@ export default {
     title: 'Components/HomeAssistant',
     component: HomeMonitor,
     decorators: [
-        (Story) => (_jsx(Box, { p: "base", w: ['full', '800px'], h: "fit-content", children: _jsx(Story, {}) })),
+        (Story) => (_jsx(Box, { p: "base", w: ['full', '800px'], children: _jsx(Story, {}) })),
     ],
 };
 export const HomeMonitorComponent = () => {
@@ -23,3 +23,10 @@ export const HomeMonitorComponent = () => {
     const alertsCount = alerts.reduce((acc, alert) => acc + alert.count, 0);
     return (_jsx(HomeMonitor, { children: _jsxs(Stack, { spacing: "base", children: [_jsxs(Flex, { gap: "base", children: [_jsx(HomefileMonitoring, { alertCount: alertsCount }), _jsx(WeatherWidget, Object.assign({}, weatherData))] }), _jsx(HomeMonitorSteps, { menuItems: menuMock, alerts: alerts, onStepClick: handleAlertClick })] }) }));
 };
+export const HomeMonitorWithAddItems = () => {
+    const handleAlertClick = (step) => {
+        action('onStepClick')(step);
+    };
+    const weatherData = mapForecastToWidget(weatherDataMock, 'TX, Houston');
+    return (_jsx(HomeMonitor, { children: _jsxs(Stack, { spacing: "base", children: [_jsxs(Flex, { gap: "base", children: [_jsx(HomieAddItems, { onAddReceipt: action('Add receipt clicked'), onAddItem: action('Add item clicked') }), _jsx(WeatherWidget, Object.assign({}, weatherData))] }), _jsx(HomeMonitorSteps, { menuItems: menuMock, alerts: [], onStepClick: handleAlertClick })] }) }));
+};

package/dist/stories/tiles/MinimizedTiles.stories.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from '@storybook/addon-actions';
 import { MinimizedTiles } from '../../components';
 import { menuMock, minimizedTilesMock } from '../../mocks';
+import { Box } from '@chakra-ui/react';
 export default {
     title: 'Components/Tiles',
     component: MinimizedTiles,
@@ -10,6 +11,9 @@ export default {
         menu: menuMock,
         onMaximize: action('onMaximize'),
     },
+    decorators: [
+        (Story) => (_jsx(Box, { w: "400px", children: _jsx(Story, {}) })),
+    ],
 };
 export const MinimizedTilesComponent = (args) => {
     return _jsx(MinimizedTiles, Object.assign({}, args));

package/package.json

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

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

@@ -478,6 +478,12 @@
       "unopened": "Unopened"
     }
   },
+  "homieAddItems": {
+    "addItem": "Upload a picture of your refrigerator label",
+    "addReceipt": "Add a picture of a purchase receipt.",
+    "subTitle": "Give them a try.",
+    "title": "Homie does the work for you."
+  },
   "householdItems": {
     "headers": {
       "itemName": "An item name",

package/src/components/homeAssistant/monitorAlerts/HomieAddItems.tsx

@@ -0,0 +1,58 @@
+import { t } from 'i18next'
+import { Box, Stack, Text, Image, Flex } from '@chakra-ui/react'
+import { Fridge, Register } from '@/assets/images'
+import { colors } from '@/theme/colors'
+import { Plus } from '@/components'
+import { AddButtonI, HomieAddItemsI } from '@/interfaces'
+
+export const HomieAddItems = ({ onAddReceipt, onAddItem }: HomieAddItemsI) => {
+  return (
+    <Stack spacing="base" flex="1" zIndex="2" pr="6">
+      <Text fontSize="26px" lineHeight="36px" textAlign="center">
+        {t('homieAddItems.title')}
+      </Text>
+      <Box bg="lightBlue.5" borderRadius="full" py="2">
+        <Text fontWeight="medium" textAlign="center">
+          {t('homieAddItems.subTitle')}
+        </Text>
+      </Box>
+      <AddButton
+        icon={Register}
+        text={t('homieAddItems.addReceipt')}
+        onClick={onAddReceipt}
+      />
+      <AddButton
+        icon={Fridge}
+        text={t('homieAddItems.addItem')}
+        onClick={onAddItem}
+      />
+    </Stack>
+  )
+}
+
+const AddButton = ({ icon, text, onClick }: AddButtonI) => {
+  return (
+    <Box
+      as="button"
+      p="base"
+      bg="neutral.white"
+      boxShadow="md"
+      transition="background 0.2s"
+      _hover={{
+        bg: 'lightGreen.7',
+      }}
+      onClick={onClick}
+      minH="80px"
+    >
+      <Flex align="center" gap="base">
+        <Flex>
+          <Plus size={18} stroke={colors.blue[3]} />
+          <Image boxSize="32px" src={icon} />
+        </Flex>
+        <Text textAlign="left" lineHeight="22px">
+          {text}
+        </Text>
+      </Flex>
+    </Box>
+  )
+}

package/src/components/homeAssistant/monitorAlerts/index.ts

@@ -8,5 +8,6 @@ export * from './BackendAlertCard'
 export * from './WeatherWidget'
 export * from './HomefileMonitoring'
 export * from './HomeMonitorPanel'
+export * from './HomieAddItems'
 export * from './MonitorAlerts'
 export * from './Notifications'

package/src/components/homeBoard/HomeBoard.tsx

@@ -60,6 +60,7 @@ import {
   AddToHomefile,
   WeatherWidget,
   MinimizedTiles,
+  HomieAddItems,
 } from '@/components'
 import {
   HomeCards,
@@ -377,7 +378,10 @@ export const HomeBoard = () => {
                   justify="space-between"
                 >
                   <Flex gap="base">
-                    <HomefileMonitoring />
+                    <HomieAddItems
+                      onAddReceipt={() => console.log('Add receipt clicked')}
+                      onAddItem={() => console.log('Add item clicked')}
+                    />
                     <WeatherWidget
                       {...mapForecastToWidget(weatherDataMock, 'TX, Houston')}
                     />

package/src/components/tile/MinimizedTile.tsx

@@ -11,10 +11,12 @@ export const MinimizedTile = ({
   onMaximize,
 }: MinimizedTileI) => {
   return (
-    <Box
+    <Stack
       bg="neutral.white"
       boxShadow="md"
-      boxSize="100px"
+      flex="1"
+      h="full"
+      justify="center"
       position="relative"
       transition="background 0.2s"
       _hover={{
@@ -26,7 +28,7 @@ export const MinimizedTile = ({
           <NewBadge bg="violet.1" color="neutral.white" />
         </Box>
       )}
-      <Box textAlign="right" w="full" pr="2">
+      <Box position="absolute" top="2px" right="5px">
         <IconMenu
           icon={<MoreHorizontal size={26} />}
           itemForm={_id}
@@ -34,7 +36,13 @@ export const MinimizedTile = ({
           disabled={menu.length === 0}
         />
       </Box>
-      <Stack px="base" align="center" cursor="pointer" pos="relative">
+      <Stack
+        px="base"
+        align="center"
+        cursor="pointer"
+        pos="relative"
+        justify="center"
+      >
         <Box
           onClick={() => onMaximize(_id)}
           pos="absolute"
@@ -44,12 +52,7 @@ export const MinimizedTile = ({
           left="0"
         />
         {icon && (
-          <Image
-            src={icon}
-            alt="not-found"
-            boxSize="34px"
-            objectFit="contain"
-          />
+          <Image src={icon} alt="not-found" boxSize="50%" objectFit="contain" />
         )}
         {title && (
           <Text
@@ -62,6 +65,6 @@ export const MinimizedTile = ({
           </Text>
         )}
       </Stack>
-    </Box>
+    </Stack>
   )
 }

package/src/components/tile/MinimizedTiles.tsx

@@ -1,4 +1,4 @@
-import { Box, Center, SimpleGrid } from '@chakra-ui/react'
+import { Box, SimpleGrid } from '@chakra-ui/react'
 import { MinimizedTile } from './MinimizedTile'
 import {
   Billing,
@@ -20,8 +20,14 @@ export const MinimizedTiles = ({
 }: MinimizedTilesI) => {
   const onlyMinimizedTiles = tiles.filter((tile) => !tile.isMaximized)
   return (
-    <Center h="full">
-      <SimpleGrid columns={3} spacing="base">
+    <Box h="full">
+      <SimpleGrid
+        columns={3}
+        spacing="base"
+        h="full"
+        gridAutoRows="1fr"
+        alignItems="stretch"
+      >
         {onlyMinimizedTiles.map((tile) => (
           <MinimizedTile
             {...tile}
@@ -32,7 +38,7 @@ export const MinimizedTiles = ({
           />
         ))}
       </SimpleGrid>
-    </Center>
+    </Box>
   )
 }
 

package/src/index.ts

@@ -84,6 +84,7 @@ export {
   HomeMonitorPanel,
   HomeMonitorSteps,
   HomeSharedWith,
+  HomieAddItems,
   InboxForwardBanner,
   InboxTile,
   ItemFormPanel,

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

@@ -0,0 +1,10 @@
+export interface HomieAddItemsI {
+  onAddReceipt: () => void
+  onAddItem: () => void
+}
+
+export interface AddButtonI {
+  icon: string
+  text: string
+  onClick: () => void
+}

package/src/interfaces/homeAssistant/index.ts

@@ -10,5 +10,6 @@ export * from './HomeAssistantSteps.interface'
 export * from './HomeAssistantTutorial.interface'
 export * from './HomeMonitorPanel.interface'
 export * from './HomeMonitorSteps.interface'
+export * from './HomieAddItems.interface'
 export * from './MonitorAlerts.interface'
 export * from './WeatherWidget.interface'

package/src/stories/homeAssistant/HomeMonitor.stories.tsx

@@ -3,6 +3,7 @@ import {
   HomefileMonitoring,
   HomeMonitor,
   HomeMonitorSteps,
+  HomieAddItems,
   WeatherWidget,
 } from '@/components'
 import { Box, Flex, Stack } from '@chakra-ui/react'
@@ -15,7 +16,7 @@ export default {
   component: HomeMonitor,
   decorators: [
     (Story: any) => (
-      <Box p="base" w={['full', '800px']} h="fit-content">
+      <Box p="base" w={['full', '800px']}>
         <Story />
       </Box>
     ),
@@ -48,3 +49,29 @@ export const HomeMonitorComponent = () => {
     </HomeMonitor>
   )
 }
+
+export const HomeMonitorWithAddItems = () => {
+  const handleAlertClick = (step: number) => {
+    action('onStepClick')(step)
+  }
+  const weatherData = mapForecastToWidget(weatherDataMock, 'TX, Houston')
+
+  return (
+    <HomeMonitor>
+      <Stack spacing="base">
+        <Flex gap="base">
+          <HomieAddItems
+            onAddReceipt={action('Add receipt clicked')}
+            onAddItem={action('Add item clicked')}
+          />
+          <WeatherWidget {...weatherData} />
+        </Flex>
+        <HomeMonitorSteps
+          menuItems={menuMock}
+          alerts={[]}
+          onStepClick={handleAlertClick}
+        />
+      </Stack>
+    </HomeMonitor>
+  )
+}

package/src/stories/tiles/MinimizedTiles.stories.tsx

@@ -3,6 +3,7 @@ import { action } from '@storybook/addon-actions'
 import { MinimizedTiles } from '@/components'
 import { menuMock, minimizedTilesMock } from '@/mocks'
 import { MinimizedTilesI } from '@/interfaces'
+import { Box } from '@chakra-ui/react'
 
 export default {
   title: 'Components/Tiles',
@@ -12,6 +13,13 @@ export default {
     menu: menuMock,
     onMaximize: action('onMaximize'),
   },
+  decorators: [
+    (Story) => (
+      <Box w="400px">
+        <Story />
+      </Box>
+    ),
+  ],
 } as Meta<MinimizedTilesI>
 
 export const MinimizedTilesComponent = (args: MinimizedTilesI) => {