@homefile/components-v2 2.26.7 → 2.27.0

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

@@ -456,6 +456,8 @@
     "addDetail": "Add more detail",
     "addDetailsManually": "You can enter item detail manually",
     "itemsFound": "We’ve found {{ count }} items with that serial number.",
+    "moreInfo": "We need a bit more information to find your item.",
+    "moreDetails": "To find your specific item, we need a few more details.",
     "noneAbove": "None of the above, add more detail",
     "noItemsFound": "We didn’t find your item, but don’t worry!",
     "pleaseSelect": "Please select your item from the list below. This also double confirms your selection.",

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

@@ -1,2 +1,2 @@
 import { SimpleDynamicFormI } from '../../../interfaces';
-export declare const SimpleDynamicForm: ({ fields }: SimpleDynamicFormI) => import("react/jsx-runtime").JSX.Element;
+export declare const SimpleDynamicForm: ({ dividerStyle, fields, showIcon, height, boxShadow, }: SimpleDynamicFormI) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Stack } from '@chakra-ui/react';
 import { TextField, SelectField, SwitchField, NumberField, FieldDivider, } from '../..';
 import { fieldIcons } from '../../../helpers';
-export const SimpleDynamicForm = ({ fields }) => {
-    return (_jsx(Stack, { bg: "neutral.white", spacing: "0", h: "full", boxShadow: "md", children: fields === null || fields === void 0 ? void 0 : fields.map((field) => {
+export const SimpleDynamicForm = ({ dividerStyle, fields, showIcon = false, height = 'full', boxShadow = 'md', }) => {
+    return (_jsx(Stack, { bg: "neutral.white", spacing: "0", h: height, boxShadow: boxShadow, children: fields === null || fields === void 0 ? void 0 : fields.map((field) => {
             const { description, icon, id, name, options, type, value } = field;
             const baseProps = {
                 description,
@@ -14,14 +14,14 @@ export const SimpleDynamicForm = ({ fields }) => {
             };
             switch (type) {
                 case 'number':
-                    return (_jsx(FieldDivider, { children: _jsx(NumberField, Object.assign({}, baseProps)) }, id));
+                    return (_jsx(FieldDivider, { style: dividerStyle, children: _jsx(NumberField, Object.assign({}, baseProps)) }, id));
                 case 'text':
                 case 'string':
-                    return (_jsx(FieldDivider, { children: _jsx(TextField, Object.assign({}, baseProps)) }, id));
+                    return (_jsx(FieldDivider, { style: dividerStyle, children: _jsx(TextField, Object.assign({}, baseProps, { showIcon: showIcon })) }, id));
                 case 'select':
-                    return (_jsx(FieldDivider, { children: _jsx(SelectField, Object.assign({}, baseProps, { options: options })) }, id));
+                    return (_jsx(FieldDivider, { style: dividerStyle, children: _jsx(SelectField, Object.assign({}, baseProps, { options: options })) }, id));
                 case 'switch':
-                    return (_jsx(FieldDivider, { children: _jsx(SwitchField, Object.assign({}, baseProps)) }, id));
+                    return (_jsx(FieldDivider, { style: dividerStyle, children: _jsx(SwitchField, Object.assign({}, baseProps)) }, id));
                 default:
                     return null;
             }

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

@@ -1,2 +1,4 @@
 import { PropsWithChildren } from 'react';
-export declare const FieldDivider: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element;
+export declare const FieldDivider: ({ children, style, }: PropsWithChildren<{
+    style?: string;
+}>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Flex } from '@chakra-ui/react';
-export const FieldDivider = ({ children }) => {
-    return (_jsx(Flex, { align: "center", borderBottom: "1px solid", borderColor: "lightBlue.6", p: "base", children: children }));
+export const FieldDivider = ({ children, style = 'solid', }) => {
+    return (_jsx(Flex, { align: "center", borderBottom: "1px", borderStyle: style, borderColor: "lightBlue.6", p: "base", children: children }));
 };

package/dist/components/homeItems/HomeItemList.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Container, Stack, Text, useRadioGroup } from '@chakra-ui/react';
-import { RadioCard, BaseCounter } from '..';
-import { ProductRadioCardContent } from './ProductRadioCardContent';
+import { Container, Stack, useRadioGroup } from '@chakra-ui/react';
+import { RadioCard, BaseCounter, ProductRadioCardContent, HomeItemListHeader, } from '..';
 export const HomeItemList = ({ items, onChange }) => {
     const hasItems = items.length > 0;
     const firstItemId = items[0].id;
@@ -18,11 +17,11 @@ export const HomeItemList = ({ items, onChange }) => {
             name: hasItems ? t('homeItems.noneAbove') : t('homeItems.addDetail'),
         },
     ];
-    return (_jsxs(Container, { h: "full", children: [_jsxs(Stack, { align: "center", spacing: "base", px: "20", py: "8", children: [_jsx(Text, { fontSize: "24px", lineHeight: "28px", textAlign: "center", children: hasItems
-                            ? t('homeItems.itemsFound', { count: items.length })
-                            : t('homeItems.noItemsFound') }), _jsx(Text, { fontFamily: "secondary", fontSize: "16px", lineHeight: "20px", textAlign: "center", children: hasItems
-                            ? t('homeItems.pleaseSelect')
-                            : t('homeItems.addDetailsManually') })] }), _jsxs(Stack, { bg: "lightViolet.1", p: "base", spacing: "base", h: "full", children: [_jsx(BaseCounter, { text: t('homeItems.showing', {
+    return (_jsxs(Container, { h: "full", children: [_jsx(HomeItemListHeader, { title: hasItems
+                    ? t('homeItems.itemsFound', { count: items.length })
+                    : t('homeItems.noItemsFound'), subtitle: hasItems
+                    ? t('homeItems.pleaseSelect')
+                    : t('homeItems.addDetailsManually') }), _jsxs(Stack, { bg: "lightViolet.1", p: "base", spacing: "base", h: "full", boxShadow: "xl", children: [_jsx(BaseCounter, { text: t('homeItems.showing', {
                             count: items.length,
                             total: items.length,
                         }) }), itemsWithNone.map((item) => {

package/dist/components/homeItems/HomeItemListHeader.d.ts

@@ -0,0 +1,2 @@
+import { HomeItemListHeaderI } from '../../interfaces';
+export declare const HomeItemListHeader: ({ title, subtitle, px, }: HomeItemListHeaderI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeItems/HomeItemListHeader.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, Text } from '@chakra-ui/react';
+export const HomeItemListHeader = ({ title, subtitle, px = '20', }) => (_jsxs(Stack, { align: "center", spacing: "base", px: px, py: "8", boxShadow: "xl", children: [_jsx(Text, { fontSize: "24px", lineHeight: "28px", textAlign: "center", children: title }), _jsx(Text, { fontFamily: "secondary", fontSize: "16px", lineHeight: "20px", textAlign: "center", children: subtitle })] }));

package/dist/components/homeItems/HomeItemManualInfo.d.ts

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

package/dist/components/homeItems/HomeItemManualInfo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Container, Divider } from '@chakra-ui/react';
+import { HomeItemListHeader, SimpleDynamicForm } from '..';
+export const HomeItemManualInfo = ({ fields }) => {
+    return (_jsxs(Container, { children: [_jsx(HomeItemListHeader, { title: t('homeItems.moreInfo'), subtitle: t('homeItems.moreDetails'), px: "12" }), _jsx(Divider, { borderStyle: "dashed" }), _jsx(SimpleDynamicForm, { fields: fields, dividerStyle: "dashed", showIcon: true, height: "fit-content", boxShadow: "none" })] }));
+};

package/dist/components/homeItems/index.d.ts

@@ -1,2 +1,5 @@
 export * from './HomeItemList';
+export * from './HomeItemListHeader';
+export * from './HomeItemManualInfo';
+export * from './ProductRadioCardContent';
 export * from './ViewingHomeItemPanel';

package/dist/components/homeItems/index.js

@@ -1,2 +1,5 @@
 export * from './HomeItemList';
+export * from './HomeItemListHeader';
+export * from './HomeItemManualInfo';
+export * from './ProductRadioCardContent';
 export * from './ViewingHomeItemPanel';

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, 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, 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, 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, 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, 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, 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, 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, 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/forms/dynamicForm/SimpleDynamicForm.interface.d.ts

@@ -1,4 +1,8 @@
 import { ReportI } from '../..';
 export interface SimpleDynamicFormI {
+    boxShadow?: string;
+    dividerStyle?: string;
+    height?: string;
     fields: ReportI[];
+    showIcon?: boolean;
 }

package/dist/interfaces/homeItems/HomeItemListHeader.interface.d.ts

@@ -0,0 +1,5 @@
+export interface HomeItemListHeaderI {
+    title: string;
+    subtitle: string;
+    px?: string;
+}

package/dist/interfaces/homeItems/HomeItemListHeader.interface.js

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

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

@@ -1,3 +1,4 @@
 export * from './ViewingHomeItemPanel.interface';
+export * from './HomeItemListHeader.interface';
 export * from './ProductRadioCardContent.interface';
 export * from './HomeItemList.interface';

package/dist/interfaces/homeItems/index.js

@@ -1,3 +1,4 @@
 export * from './ViewingHomeItemPanel.interface';
+export * from './HomeItemListHeader.interface';
 export * from './ProductRadioCardContent.interface';
 export * from './HomeItemList.interface';

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

@@ -8,3 +8,4 @@ export declare const alertFieldsMock: ReportI[];
 export declare const alertFieldsMock2: ReportI[];
 export declare const alertFieldsMock3: ReportI[];
 export declare const receiptFieldsMock: ReportI[];
+export declare const homeItemDetails: ReportI[];

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

@@ -1259,3 +1259,25 @@ export const receiptFieldsMock = [
         icon: 'notes',
     },
 ];
+export const homeItemDetails = [
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Brand and or Manufacturer',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: '',
+        type: 'text',
+        visible: true,
+        icon: 'company',
+    },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: 'Serial Number',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: '',
+        type: 'text',
+        visible: true,
+        icon: 'barcode',
+    },
+];

package/dist/stories/homeItems/HomeItemManualInfo.stories.d.ts

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

package/dist/stories/homeItems/HomeItemManualInfo.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormProvider, useForm } from 'react-hook-form';
+import { action } from '@storybook/addon-actions';
+import { DrawerContent } from '@chakra-ui/react';
+import { RightPanel, HomeItemManualInfo } from '../../components';
+import { homeItemDetails } from '../../mocks';
+export default {
+    title: 'Components/HomeItems',
+    component: HomeItemManualInfo,
+    args: {
+        fields: homeItemDetails,
+    },
+    decorators: [
+        (Story) => (_jsx(RightPanel, { isOpen: true, onClose: action('onClose'), children: _jsx(DrawerContent, { bg: "lightBlue.1", p: "base", children: _jsx(Story, {}) }) })),
+    ],
+};
+export const HomeItemManualInfoComponent = (args) => {
+    const form = useForm();
+    return (_jsx(FormProvider, Object.assign({}, form, { children: _jsx(HomeItemManualInfo, Object.assign({}, args)) })));
+};

package/package.json

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

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

@@ -456,6 +456,8 @@
     "addDetail": "Add more detail",
     "addDetailsManually": "You can enter item detail manually",
     "itemsFound": "We’ve found {{ count }} items with that serial number.",
+    "moreInfo": "We need a bit more information to find your item.",
+    "moreDetails": "To find your specific item, we need a few more details.",
     "noneAbove": "None of the above, add more detail",
     "noItemsFound": "We didn’t find your item, but don’t worry!",
     "pleaseSelect": "Please select your item from the list below. This also double confirms your selection.",

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

@@ -9,9 +9,15 @@ import {
 } from '@/components'
 import { fieldIcons } from '@/helpers'
 
-export const SimpleDynamicForm = ({ fields }: SimpleDynamicFormI) => {
+export const SimpleDynamicForm = ({
+  dividerStyle,
+  fields,
+  showIcon = false,
+  height = 'full',
+  boxShadow = 'md',
+}: SimpleDynamicFormI) => {
   return (
-    <Stack bg="neutral.white" spacing="0" h="full" boxShadow="md">
+    <Stack bg="neutral.white" spacing="0" h={height} boxShadow={boxShadow}>
       {fields?.map((field) => {
         const { description, icon, id, name, options, type, value } = field
 
@@ -25,26 +31,26 @@ export const SimpleDynamicForm = ({ fields }: SimpleDynamicFormI) => {
         switch (type) {
           case 'number':
             return (
-              <FieldDivider key={id}>
+              <FieldDivider key={id} style={dividerStyle}>
                 <NumberField {...baseProps} />
               </FieldDivider>
             )
           case 'text':
           case 'string':
             return (
-              <FieldDivider key={id}>
-                <TextField {...baseProps} />
+              <FieldDivider key={id} style={dividerStyle}>
+                <TextField {...baseProps} showIcon={showIcon} />
               </FieldDivider>
             )
           case 'select':
             return (
-              <FieldDivider key={id}>
+              <FieldDivider key={id} style={dividerStyle}>
                 <SelectField {...baseProps} options={options} />
               </FieldDivider>
             )
           case 'switch':
             return (
-              <FieldDivider key={id}>
+              <FieldDivider key={id} style={dividerStyle}>
                 <SwitchField {...baseProps} />
               </FieldDivider>
             )

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

@@ -1,11 +1,15 @@
 import { PropsWithChildren } from 'react'
 import { Flex } from '@chakra-ui/react'
 
-export const FieldDivider = ({ children }: PropsWithChildren<{}>) => {
+export const FieldDivider = ({
+  children,
+  style = 'solid',
+}: PropsWithChildren<{ style?: string }>) => {
   return (
     <Flex
       align="center"
-      borderBottom="1px solid"
+      borderBottom="1px"
+      borderStyle={style}
       borderColor="lightBlue.6"
       p="base"
     >

package/src/components/homeItems/HomeItemList.tsx

@@ -1,7 +1,11 @@
 import { t } from 'i18next'
-import { Container, Stack, Text, useRadioGroup } from '@chakra-ui/react'
-import { RadioCard, BaseCounter } from '@/components'
-import { ProductRadioCardContent } from './ProductRadioCardContent'
+import { Container, Stack, useRadioGroup } from '@chakra-ui/react'
+import {
+  RadioCard,
+  BaseCounter,
+  ProductRadioCardContent,
+  HomeItemListHeader,
+} from '@/components'
 import { HomeItemListI } from '@/interfaces'
 
 export const HomeItemList = ({ items, onChange }: HomeItemListI) => {
@@ -23,24 +27,19 @@ export const HomeItemList = ({ items, onChange }: HomeItemListI) => {
 
   return (
     <Container h="full">
-      <Stack align="center" spacing="base" px="20" py="8">
-        <Text fontSize="24px" lineHeight="28px" textAlign="center">
-          {hasItems
+      <HomeItemListHeader
+        title={
+          hasItems
             ? t('homeItems.itemsFound', { count: items.length })
-            : t('homeItems.noItemsFound')}
-        </Text>
-        <Text
-          fontFamily="secondary"
-          fontSize="16px"
-          lineHeight="20px"
-          textAlign="center"
-        >
-          {hasItems
+            : t('homeItems.noItemsFound')
+        }
+        subtitle={
+          hasItems
             ? t('homeItems.pleaseSelect')
-            : t('homeItems.addDetailsManually')}
-        </Text>
-      </Stack>
-      <Stack bg="lightViolet.1" p="base" spacing="base" h="full">
+            : t('homeItems.addDetailsManually')
+        }
+      />
+      <Stack bg="lightViolet.1" p="base" spacing="base" h="full" boxShadow="xl">
         <BaseCounter
           text={t('homeItems.showing', {
             count: items.length,

package/src/components/homeItems/HomeItemListHeader.tsx

@@ -0,0 +1,22 @@
+import { Stack, Text } from '@chakra-ui/react'
+import { HomeItemListHeaderI } from '@/interfaces'
+
+export const HomeItemListHeader = ({
+  title,
+  subtitle,
+  px = '20',
+}: HomeItemListHeaderI) => (
+  <Stack align="center" spacing="base" px={px} py="8" boxShadow="xl">
+    <Text fontSize="24px" lineHeight="28px" textAlign="center">
+      {title}
+    </Text>
+    <Text
+      fontFamily="secondary"
+      fontSize="16px"
+      lineHeight="20px"
+      textAlign="center"
+    >
+      {subtitle}
+    </Text>
+  </Stack>
+)

package/src/components/homeItems/HomeItemManualInfo.tsx

@@ -0,0 +1,24 @@
+import { t } from 'i18next'
+import { Container, Divider } from '@chakra-ui/react'
+import { HomeItemListHeader, SimpleDynamicForm } from '@/components'
+import { SimpleDynamicFormI } from '@/interfaces'
+
+export const HomeItemManualInfo = ({ fields }: SimpleDynamicFormI) => {
+  return (
+    <Container>
+      <HomeItemListHeader
+        title={t('homeItems.moreInfo')}
+        subtitle={t('homeItems.moreDetails')}
+        px="12"
+      />
+      <Divider borderStyle="dashed" />
+      <SimpleDynamicForm
+        fields={fields}
+        dividerStyle="dashed"
+        showIcon
+        height="fit-content"
+        boxShadow="none"
+      />
+    </Container>
+  )
+}

package/src/components/homeItems/index.ts

@@ -1,2 +1,5 @@
 export * from './HomeItemList'
+export * from './HomeItemListHeader'
+export * from './HomeItemManualInfo'
+export * from './ProductRadioCardContent'
 export * from './ViewingHomeItemPanel'

package/src/index.ts

@@ -78,6 +78,8 @@ export {
   HomeDetailsContent,
   HomefileMonitoring,
   HomeHeader,
+  HomeItemList,
+  HomeItemManualInfo,
   HomeMonitor,
   HomeMonitorPanel,
   HomeMonitorSteps,

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

@@ -1,5 +1,9 @@
 import { ReportI } from '@/interfaces'
 
 export interface SimpleDynamicFormI {
+  boxShadow?: string
+  dividerStyle?: string
+  height?: string
   fields: ReportI[]
+  showIcon?: boolean
 }

package/src/interfaces/homeItems/HomeItemListHeader.interface.ts

@@ -0,0 +1,5 @@
+export interface HomeItemListHeaderI {
+  title: string
+  subtitle: string
+  px?: string
+}

package/src/interfaces/homeItems/index.ts

@@ -1,3 +1,4 @@
 export * from './ViewingHomeItemPanel.interface'
+export * from './HomeItemListHeader.interface'
 export * from './ProductRadioCardContent.interface'
 export * from './HomeItemList.interface'

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

@@ -1286,3 +1286,26 @@ export const receiptFieldsMock: ReportI[] = [
     icon: 'notes',
   },
 ]
+
+export const homeItemDetails: ReportI[] = [
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Brand and or Manufacturer',
+    description: faker.lorem.sentence(),
+    comments: faker.lorem.sentence(),
+    value: '',
+    type: 'text',
+    visible: true,
+    icon: 'company',
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Serial Number',
+    description: faker.lorem.sentence(),
+    comments: faker.lorem.sentence(),
+    value: '',
+    type: 'text',
+    visible: true,
+    icon: 'barcode',
+  },
+]

package/src/stories/homeItems/HomeItemManualInfo.stories.tsx

@@ -0,0 +1,33 @@
+import { FormProvider, useForm } from 'react-hook-form'
+import { Meta } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import { DrawerContent } from '@chakra-ui/react'
+import { RightPanel, HomeItemManualInfo } from '@/components'
+import { SimpleDynamicFormI } from '@/interfaces'
+import { homeItemDetails } from '@/mocks'
+
+export default {
+  title: 'Components/HomeItems',
+  component: HomeItemManualInfo,
+  args: {
+    fields: homeItemDetails,
+  },
+  decorators: [
+    (Story) => (
+      <RightPanel isOpen onClose={action('onClose')}>
+        <DrawerContent bg="lightBlue.1" p="base">
+          <Story />
+        </DrawerContent>
+      </RightPanel>
+    ),
+  ],
+} as Meta<SimpleDynamicFormI>
+
+export const HomeItemManualInfoComponent = (args: SimpleDynamicFormI) => {
+  const form = useForm()
+  return (
+    <FormProvider {...form}>
+      <HomeItemManualInfo {...args} />
+    </FormProvider>
+  )
+}