npm - @homefile/components-v2 - Versions diffs - 2.34.3 → 2.36.0 - Mend

@homefile/components-v2 2.34.3 → 2.36.0

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

Files changed (49) hide show

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

@@ -100,6 +100,7 @@
     "title": "One moment, we’re building your homefile."
   },
   "buttons": {
+    "accurate": "Accurate",
     "back": "Back",
     "cancel": "Cancel",
     "confirm": "Confirm",
@@ -111,6 +112,7 @@
     "edit": "Edit",
     "forward": "Forward",
     "next": "Next",
+    "notAccurate": "Not Accurate",
     "previous": "Previous",
     "save": "Save",
     "send": "Send",
@@ -1293,5 +1295,11 @@
     "description": "Est Value of Property Added to Homefile",
     "label": "Value added in",
     "title": "Value Monitor"
+  },
+  "wizardValueSummary": {
+    "assessedValue": "[Year] Assessed Value",
+    "estimatedValue": "Estimated Value",
+    "info": "You can edit this record within your Homefile. Your information remains private and is never shared or sold.",
+    "purchasePrice": "Purchase Price"
   }
 }

package/dist/components/forms/dynamicForm/fields/HomeInitialSetup.d.ts CHANGED Viewed

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

package/dist/components/forms/dynamicForm/fields/HomeInitialSetup.js CHANGED Viewed

@@ -1,15 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Stack } from '@chakra-ui/react';
 import { WizardTextBody, WizardInitialOptions, WizardStepOptions, } from '@/components';
-export const HomeInitialSetup = ({ fields, callback }) => {
-    return (_jsx(Stack, { bg: "neutral.white", spacing: "10", children: fields === null || fields === void 0 ? void 0 : fields.map(({ children = [], id, label = '', type, value, description }) => {
+export const HomeInitialSetup = ({ fields, callback, style }) => {
+    const isWizard = style === 'wizard';
+    return (_jsx(Stack, { bg: "neutral.white", spacing: { base: '6', md: isWizard ? '10' : '0' }, children: fields === null || fields === void 0 ? void 0 : fields.map(({ children = [], id, label = '', type, value, description }) => {
             switch (type) {
                 case 'home-wizard-header':
-                    return (_jsx(WizardTextBody, { title: label, subtitle: description }, id));
+                    return (_jsx(WizardTextBody, { title: label, subtitle: description, style: style }, id));
                 case 'home-wizard-initial-setup':
-                    return (_jsx(WizardInitialOptions, { form: children, title: String(value), callback: callback }, id));
+                    return (_jsx(WizardInitialOptions, { form: children, title: String(value), callback: callback, style: style }, id));
                 case 'home-wizard-step-options':
-                    return (_jsx(WizardStepOptions, { form: children, title: String(value), callback: callback }, id));
+                    return (_jsx(WizardStepOptions, { form: children, title: String(value), callback: callback, style: style }, id));
                 default:
                     return null;
             }

package/dist/components/homeAssistant/panel/HomeAssistantPanel.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 import { PropsWithChildren } from 'react';
 import { HomeAssistantPanelI } from '@/interfaces';
 export declare const HomeAssistantPanel: ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading, }: PropsWithChildren<HomeAssistantPanelI>) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeAssistantWizardPanel: ({ currentForm, currentStep, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading, }: PropsWithChildren<HomeAssistantPanelI>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/panel/HomeAssistantPanel.js CHANGED Viewed

@@ -4,11 +4,11 @@ import { FormProvider } from 'react-hook-form';
 import { t } from 'i18next';
 import { DrawerHeader, DrawerBody, Stack, Text, DrawerFooter, } from '@chakra-ui/react';
 import { IA } from '@/assets/images';
-import { ApplianceSteps, SimpleDynamicForm, FooterButtons, HomeAssistantPanelStep, PanelHeader, Loading, } from '@/components';
+import { ApplianceSteps, SimpleDynamicForm, FooterButtons, HomeAssistantPanelStep, PanelHeader, Loading, HomeAssistantWizardSteps, DynamicForm, } from '@/components';
 import { homeAssistantSteps } from '@/helpers';
 import { useSimpleDynamicForm } from '@/hooks';
 import { homeAssistantProxy } from '@/proxies';
-export const HomeAssistantPanel = ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading, }) => {
+export const HomeAssistantPanel = ({ children, currentForm, currentStep, onApplianceClick = () => { }, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading, }) => {
     var _a, _b;
     const [addedAppliances, updateAddedAppliances] = useState([]);
     const title = (_b = (_a = homeAssistantSteps === null || homeAssistantSteps === void 0 ? void 0 : homeAssistantSteps[currentStep - 1]) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '';
@@ -49,7 +49,7 @@ export const HomeAssistantPanel = ({ children, currentForm, currentStep, onAppli
                         label: !hasCompleted && currentStep === 6
                             ? t('buttons.finish')
                             : t('buttons.saveStep'),
-                        onClick: () => onSave(updatedFields),
+                        onClick: () => onSave === null || onSave === void 0 ? void 0 : onSave(updatedFields),
                     }, button3: !hasCompleted && currentStep === 6
                         ? undefined
                         : {
@@ -59,3 +59,28 @@ export const HomeAssistantPanel = ({ children, currentForm, currentStep, onAppli
                             isDisabled: nextDisabled,
                         } }) })] }));
 };
+export const HomeAssistantWizardPanel = ({ currentForm, currentStep, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading, }) => {
+    if (isLoading)
+        return _jsx(Loading, {});
+    return (_jsxs(_Fragment, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, title: t('homeAssistant.title'), icon: IA }) }), _jsxs(DrawerBody, { p: "0", children: [_jsx(HomeAssistantWizardSteps, { currentStep: currentStep }), _jsx(DynamicForm, { form: currentForm, showTitle: false, style: "panel" })] }), _jsx(DrawerFooter, { px: "0", py: "6", bg: "neutral.white", children: _jsx(FooterButtons, { button1: currentStep === 1
+                        ? undefined
+                        : {
+                            buttonStyle: 'secondaryFooter',
+                            label: t('buttons.back'),
+                            onClick: onBack,
+                            isDisabled: backDisabled,
+                        }, button2: {
+                        buttonStyle: 'primaryFooter',
+                        label: !hasCompleted && currentStep === 5
+                            ? t('buttons.finish')
+                            : t('buttons.saveStep'),
+                        onClick: () => onSave === null || onSave === void 0 ? void 0 : onSave(),
+                    }, button3: !hasCompleted && currentStep === 5
+                        ? undefined
+                        : {
+                            buttonStyle: 'primaryFooter',
+                            label: t('buttons.next'),
+                            onClick: onNext,
+                            isDisabled: nextDisabled,
+                        } }) })] }));
+};

package/dist/components/inputs/RadioCard.js CHANGED Viewed

@@ -10,7 +10,7 @@ export const RadioCard = (props) => {
                     borderLeft: '6px solid',
                     borderLeftColor: 'blue.6',
                     boxShadow: 'md',
-                }, px: 5, py: 3, children: _jsxs(Flex, { align: "center", gap: "base", minH: "40px", children: [_jsx(Box, Object.assign({}, checkbox, { height: "18px", width: "18px", rounded: isSafari() ? 'sm' : 'full', border: "1px", borderColor: "lightBlue.5", _checked: {
+                }, px: 5, py: 3, children: _jsxs(Flex, { align: "center", gap: "base", minH: "40px", children: [_jsx(Box, Object.assign({}, checkbox, { height: "18px", width: "18px", rounded: isSafari() ? 'sm' : 'full', border: "1px", borderColor: "lightBlue.5", flexShrink: 0, _checked: {
                                 bg: 'blue.2',
                                 outline: '2px solid white',
                                 outlineOffset: '-3px',

package/dist/components/wizard/WizardInitialOptions.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 import { DynamicFormI } from '@/interfaces';
-export declare const WizardInitialOptions: ({ form, title, callback, }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;
+export declare const WizardInitialOptions: ({ form, title, callback, style, }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/wizard/WizardInitialOptions.js CHANGED Viewed

@@ -3,15 +3,16 @@ import { Container, SimpleGrid, Stack, Text, Image, Flex, } from '@chakra-ui/rea
 import { Controller, useFormContext } from 'react-hook-form';
 import { CheckInCircle } from '@/assets/images';
 import { fieldIcons, setOptionButtonStyles } from '@/helpers';
-export const WizardInitialOptions = ({ form, title, callback, }) => {
+export const WizardInitialOptions = ({ form, title, callback, style = 'wizard', }) => {
     const { control } = useFormContext();
-    return (_jsxs(Stack, { spacing: "base", bg: "lightBlue.1", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: title }), _jsx(SimpleGrid, { columns: 2, spacing: "base", children: form.map((field) => {
+    const isWizard = style === 'wizard';
+    return (_jsxs(Stack, { spacing: "base", bg: "lightBlue.1", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: title }), _jsx(SimpleGrid, { columns: { base: 1, md: isWizard ? 2 : 1 }, spacing: { base: 1, md: isWizard ? 'base' : 1 }, children: form.map((field) => {
                     const { id, value, label, icon, description } = field;
                     return (_jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
                             const iconSrc = icon
                                 ? fieldIcons[icon]
                                 : undefined;
-                            return (_jsxs(Container, { position: "relative", children: [value && (_jsx(Image, { src: CheckInCircle, alt: "check", w: "22px", h: "auto", position: "absolute", top: "-4px", left: "-2px", boxShadow: "lg", borderRadius: "full" })), _jsxs(Stack, Object.assign({ as: "button", p: "base", onClick: () => {
+                            return (_jsxs(Container, { position: "relative", children: [value && (_jsx(Image, { src: CheckInCircle, alt: "check", w: "22px", h: "auto", position: "absolute", top: "-4px", left: "-2px", boxShadow: "lg", borderRadius: "full" })), _jsxs(Stack, Object.assign({ as: "button", p: "base", w: "full", onClick: () => {
                                             onChange(!value);
                                             callback === null || callback === void 0 ? void 0 : callback(Object.assign(Object.assign({}, field), { value: !value }));
                                         } }, setOptionButtonStyles(value), { children: [_jsxs(Flex, { gap: "2", w: "full", align: "center", children: [_jsx(Image, { src: iconSrc, alt: "icon", h: "16px", w: "auto" }), label && (_jsx(Text, { fontWeight: "bold", fontSize: "xs", textTransform: "capitalize", fontFamily: "secondary", children: label }))] }), _jsx(Text, { fontFamily: "secondary", textAlign: "left", children: description })] }))] }));

package/dist/components/wizard/WizardStepOptions.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 import { DynamicFormI } from '@/interfaces';
-export declare const WizardStepOptions: ({ form, title, callback }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;
+export declare const WizardStepOptions: ({ form, title, callback, style, }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/wizard/WizardStepOptions.js CHANGED Viewed

@@ -3,9 +3,10 @@ import { Container, SimpleGrid, Stack, Text, Image, Center, } from '@chakra-ui/r
 import { Controller, useFormContext } from 'react-hook-form';
 import { CheckInCircle } from '@/assets/images';
 import { fieldIcons, setOptionButtonStyles } from '@/helpers';
-export const WizardStepOptions = ({ form, title, callback }) => {
+export const WizardStepOptions = ({ form, title, callback, style = 'wizard', }) => {
     const { control } = useFormContext();
-    return (_jsxs(Stack, { spacing: "base", bg: "lightBlue.1", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: title }), _jsx(SimpleGrid, { columns: 6, spacing: "base", gridAutoRows: "1fr", alignItems: "stretch", children: form.map((field) => {
+    const isWizard = style === 'wizard';
+    return (_jsxs(Stack, { spacing: "base", bg: "lightBlue.1", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: title }), _jsx(SimpleGrid, { columns: { base: 3, md: isWizard ? 6 : 5 }, spacing: "base", gridAutoRows: "1fr", alignItems: "stretch", children: form.map((field) => {
                     const { id, value, label, icon } = field;
                     return (_jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
                             const iconSrc = icon

package/dist/components/wizard/WizardTextBody.d.ts CHANGED Viewed

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

package/dist/components/wizard/WizardTextBody.js CHANGED Viewed

@@ -1,5 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Center, Stack, Text } from '@chakra-ui/react';
-export const WizardTextBody = ({ title, subtitle }) => {
-    return (_jsx(Center, { w: "full", minH: "100px", children: _jsxs(Stack, { spacing: "4", w: "80%", children: [_jsx(Text, { fontSize: { base: 'xl', md: '2xl' }, lineHeight: { base: 'shorter', md: 'base' }, textAlign: "center", children: title }), subtitle && (_jsx(Text, { fontFamily: "secondary", textAlign: "center", children: subtitle }))] }) }));
+import { Box, Center, Stack, Text } from '@chakra-ui/react';
+export const WizardTextBody = ({ title, subtitle, style, }) => {
+    const isWizard = style === 'wizard';
+    if (isWizard) {
+        return (_jsx(Center, { w: "full", minH: { md: '100px' }, children: _jsxs(Stack, { spacing: "4", w: { base: 'full', md: '80%' }, children: [_jsx(Text, { fontSize: { base: 'xl', md: '2xl' }, lineHeight: { base: 'shorter', md: 'base' }, textAlign: { base: 'left', md: 'center' }, children: title }), subtitle && (_jsx(Text, { fontFamily: "secondary", textAlign: { base: 'left', md: 'center' }, children: subtitle }))] }) }));
+    }
+    return (_jsx(Box, { p: "base", children: _jsxs(Stack, { spacing: "4", w: "full", children: [_jsx(Text, { fontSize: "2xl", lineHeight: "base", textAlign: "left", children: title }), subtitle && (_jsx(Text, { fontFamily: "secondary", textAlign: "left", children: subtitle }))] }) }));
 };

package/dist/components/wizard/WizardValueSummary.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { WizardValueSummaryProps } from '@/interfaces';
2	+ export declare const WizardValueSummary: ({ title, subtitle, address, estimatedValue, purchasePrice, assessedValue, purchasePriceDetails, assessedValueDetails, onAccurate, onNotAccurate, }: WizardValueSummaryProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/wizard/WizardValueSummary.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Stack, Text, Flex, Divider, Button } from '@chakra-ui/react';
+import { TrendingValueCard, RecordsSession } from '@/components';
+export const WizardValueSummary = ({ title, subtitle, address, estimatedValue, purchasePrice, assessedValue, purchasePriceDetails, assessedValueDetails, onAccurate, onNotAccurate, }) => {
+    const estimatedValueFormatted = `$${estimatedValue.toLocaleString('en-US')}.`;
+    return (_jsxs(Stack, { w: { base: 'full', md: '70%' }, m: "auto", spacing: "6", children: [_jsxs(Stack, { spacing: "1", align: "center", children: [_jsx(Text, { fontSize: "2xl", textTransform: "capitalize", children: title }), _jsx(Text, { fontFamily: "secondary", children: address }), subtitle && _jsx(Text, { fontFamily: "secondary", children: subtitle })] }), _jsxs(Stack, { bg: "lightGreen.3", spacing: "base", pt: "base", pb: "6", align: "center", children: [_jsx(Text, { fontSize: "xs", textTransform: "uppercase", children: t('wizardValueSummary.estimatedValue') }), _jsx(Text, { fontSize: "3xl", children: estimatedValueFormatted })] }), _jsxs(Flex, { gap: "base", direction: { base: 'column', md: 'row' }, children: [_jsxs(Stack, { flex: "1", spacing: "6", children: [_jsx(TrendingValueCard, { bg: "lightBlue.1", label: t('wizardValueSummary.purchasePrice'), value: purchasePrice }), _jsx(RecordsSession, { details: purchasePriceDetails, showLine: false, gap: "1", textAlign: "right", p: "0" })] }), _jsxs(Stack, { flex: "1", spacing: "6", children: [_jsx(TrendingValueCard, { bg: "lightBlue.1", label: t('wizardValueSummary.assessedValue'), value: assessedValue }), _jsx(RecordsSession, { details: assessedValueDetails, showLine: false, gap: "1", textAlign: "right", p: "0" })] })] }), _jsx(Divider, { borderStyle: "dotted", borderColor: "lightBlue.11" }), _jsxs(Flex, { gap: "base", children: [_jsx(Button, { onClick: onNotAccurate, children: t('buttons.notAccurate') }), _jsx(Button, { onClick: onAccurate, children: t('buttons.accurate') })] }), _jsx(Text, { fontFamily: "secondary", fontSize: "sm", textAlign: "center", color: "gray.2", lineHeight: "shorter", children: t('wizardValueSummary.info') })] }));
+};

package/dist/components/wizard/index.d.ts CHANGED Viewed

@@ -4,3 +4,4 @@ export * from './WizardStepOptions';
 export * from './WizardSuccessHeader';
 export * from './WizardTextHeader';
 export * from './WizardTextBody';
+export * from './WizardValueSummary';

package/dist/components/wizard/index.js CHANGED Viewed

@@ -4,3 +4,4 @@ export * from './WizardStepOptions';
 export * from './WizardSuccessHeader';
 export * from './WizardTextHeader';
 export * from './WizardTextBody';
+export * from './WizardValueSummary';

package/dist/index.d.ts CHANGED Viewed

@@ -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, ControlledWizard, 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, WizardTextHeader, } 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, ControlledWizard, 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, HomeAssistantWizardPanel, 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, WizardTextHeader, WizardValueSummary, } 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 CHANGED Viewed

@@ -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, ControlledWizard, 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, WizardTextHeader, } 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, ControlledWizard, 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, HomeAssistantWizardPanel, 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, WizardTextHeader, WizardValueSummary, } 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/DynamicForm.interface.d.ts CHANGED Viewed

@@ -36,6 +36,7 @@ export interface DynamicFormI extends Partial<PartnerFooterI> {
     singleFileUpload?: boolean;
     title?: string;
     uploadingFieldId?: string;
+    style?: 'wizard' | 'panel';
 }
 export interface DynamicFormProxyI {
     fields: ReportI[];

package/dist/interfaces/forms/dynamicForm/fields/GroupField.interface.d.ts CHANGED Viewed

@@ -11,4 +11,5 @@ export interface FieldTypesI {
     fields?: DynamicFormI['form'];
     menuItems?: MenuItemI[];
     showIcon?: boolean;
+    style?: DynamicFormI['style'];
 }

package/dist/interfaces/homeAssistant/HomeAssistantPanel.interface.d.ts CHANGED Viewed

@@ -2,11 +2,11 @@ import { DynamicFormI, ReportI } from '@/interfaces';
 export interface HomeAssistantPanelI {
     currentForm: DynamicFormI['form'];
     currentStep: number;
-    onApplianceClick: (selected: string[]) => void;
+    onApplianceClick?: (selected: string[]) => void;
     onBack: () => void;
     onClose: () => void;
     onNext: () => void;
-    onSave: (form: ReportI[]) => void;
+    onSave?: (form?: ReportI[]) => void;
     backDisabled: boolean;
     nextDisabled: boolean;
     hasCompleted: boolean;

package/dist/interfaces/wizard/WizardTextHeader.interface.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 export interface WizardTextHeaderI {
     title: string;
     subtitle?: string;
+    style?: 'wizard' | 'panel';
 }

package/dist/interfaces/wizard/WizardValueSummary.interface.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+export interface WizardValueSummaryProps {
+    title: string;
+    subtitle?: string;
+    address: string;
+    estimatedValue: number;
+    purchasePrice: number;
+    assessedValue: number;
+    purchasePriceDetails: Record<string, string | undefined>;
+    assessedValueDetails: Record<string, string | undefined>;
+    onAccurate: () => void;
+    onNotAccurate: () => void;
+}

package/dist/interfaces/wizard/WizardValueSummary.interface.js ADDED Viewed

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

package/dist/interfaces/wizard/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 export * from './ControlledWizard.interface';
 export * from './WizardTextHeader.interface';
 export * from './WizardSuccessHeader.interface';
+export * from './WizardValueSummary.interface';

package/dist/interfaces/wizard/index.js CHANGED Viewed

@@ -1,3 +1,4 @@
 export * from './ControlledWizard.interface';
 export * from './WizardTextHeader.interface';
 export * from './WizardSuccessHeader.interface';
+export * from './WizardValueSummary.interface';

package/dist/stories/homeAssistant/panel/HomeAssistantPanel.stories.d.ts CHANGED Viewed

@@ -3,3 +3,4 @@ import { HomeAssistantPanelI } from '@/interfaces';
 declare const _default: Meta;
 export default _default;
 export declare const HomeAssistantPanelComponent: (args: HomeAssistantPanelI) => import("react/jsx-runtime").JSX.Element;
+export declare const NewHomeAssistantPanelComponent: (args: HomeAssistantPanelI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/homeAssistant/panel/HomeAssistantPanel.stories.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DrawerContent } from '@chakra-ui/react';
 import { action } from '@storybook/addon-actions';
-import { HomeAssistantPanel, RightPanel } from '@/components';
-import { homeAssitantStep1FormMock, homeAssitantStep2FormMock, homeAssitantStep3FormMock, homeAssitantStep4FormMock, homeAssitantStep5FormMock, homeAssitantStep6FormMock, } from '@/mocks';
+import { HomeAssistantPanel, HomeAssistantWizardPanel, RightPanel, } from '@/components';
+import { homeAssitantStep1FormMock, homeAssitantStep2FormMock, homeAssitantStep3FormMock, homeAssitantStep4FormMock, homeAssitantStep5FormMock, homeAssitantStep6FormMock, homeWizardForm, } from '@/mocks';
 import { useState } from 'react';
 export default {
     title: 'Components/HomeAssistant',
@@ -39,3 +39,18 @@ export const HomeAssistantPanelComponent = (args) => {
     const currentForm = forms[currentStep];
     return (_jsx(DrawerContent, { bg: "lightBlue.1", children: _jsx(HomeAssistantPanel, Object.assign({}, args, { currentStep: currentStep, currentForm: currentForm, onNext: handleFormChange, onBack: handleBack, onSave: action('onSave'), isLoading: false })) }));
 };
+export const NewHomeAssistantPanelComponent = (args) => {
+    const [currentStep, setCurrentStep] = useState(0);
+    const handleFormChange = () => setCurrentStep((prev) => {
+        if (prev === 5)
+            return 1;
+        return prev + 1;
+    });
+    const handleBack = () => setCurrentStep((prev) => {
+        if (prev === 0)
+            return 5;
+        return prev - 1;
+    });
+    const currentForm = homeWizardForm[currentStep];
+    return (_jsx(DrawerContent, { bg: "lightBlue.1", children: _jsx(HomeAssistantWizardPanel, Object.assign({}, args, { currentStep: currentStep + 1, currentForm: [currentForm], onNext: handleFormChange, onBack: handleBack, onSave: action('onSave'), isLoading: false })) }));
+};

package/dist/stories/wizard/ControlledWizard.stories.js CHANGED Viewed

@@ -9,12 +9,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { ConfirmProperty, ControlledWizard, DynamicForm, FooterButtons, HomeAssistantTutorial, HomeAssistantWizardSteps, MyHomeDetails, SearchRecords, WizardTextHeader, } from '@/components';
+import { ConfirmProperty, ControlledWizard, DynamicForm, FooterButtons, HomeAssistantTutorial, HomeAssistantWizardSteps, MyHomeDetails, SearchRecords, WizardTextHeader, WizardSuccessHeader, WizardValueSummary, } from '@/components';
 import { Box, Center, Stack } from '@chakra-ui/react';
 import { action } from '@storybook/addon-actions';
 import { formValues } from '@/helpers';
-import { homeWizardForm, propertiesMock } from '@/mocks';
-import { WizardSuccessHeader } from '@/components/wizard/WizardSuccessHeader';
+import { assessedValueMock, homeWizardForm, propertiesMock, purchasePriceMock, } from '@/mocks';
 export default {
     title: 'Components/Wizard/ControlledWizard',
     component: ControlledWizard,
@@ -40,7 +39,6 @@ export const ControlledWizardComponent = () => {
                         } }) })] })),
     }));
     return (_jsx(ControlledWizard, { minHeight: "700px", step: step, setStep: setStep, steps: [
-            ...homeAssistantSteps,
             {
                 header: (_jsx(WizardTextHeader, { title: "Hi John, let\u2019s get your Homefile set up.", subtitle: "Complete this quick setup and we\u2019ll handle the rest." })),
                 body: ({ setStep }) => (_jsx(MyHomeDetails, { isWizard: true, userFirstName: "Adam", values: formValues, properties: propertiesMock, handleCreateHomeClick: (values) => __awaiter(void 0, void 0, void 0, function* () {
@@ -59,6 +57,10 @@ export const ControlledWizardComponent = () => {
                         setStep(3);
                     } })),
             },
+            {
+                header: (_jsx(WizardTextHeader, { title: "This is the data we found in public records.", subtitle: "The details linked to your address come from public data sources and may not \nrepresent the most up-to-date information about your home." })),
+                body: ({ setStep }) => (_jsx(WizardValueSummary, { title: "The Edmunds", address: "113 South First Street, Austin TX 89853", estimatedValue: 894000, purchasePrice: 456432, assessedValue: 726678, purchasePriceDetails: purchasePriceMock, assessedValueDetails: assessedValueMock, onAccurate: () => setStep(step + 1), onNotAccurate: () => setStep(step + 1) })),
+            },
             {
                 header: (_jsx(WizardSuccessHeader, { title: "Your homefile has been created.", subtitle: "Your Homefile is created. You will be able to edit and update your home details once setup is complete.", address: {
                         city: 'Austin',
@@ -67,7 +69,8 @@ export const ControlledWizardComponent = () => {
                         number: '123',
                         zip: '80123',
                     }, name: "your home" })),
-                body: () => (_jsx(Center, { w: "full", h: "full", children: _jsx(HomeAssistantTutorial, { onStart: () => setStep(4) }) })),
+                body: () => (_jsx(Center, { w: "full", h: "full", children: _jsx(HomeAssistantTutorial, { onStart: () => setStep(step + 1) }) })),
             },
+            ...homeAssistantSteps,
         ] }));
 };

package/package.json CHANGED Viewed

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

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

@@ -100,6 +100,7 @@
     "title": "One moment, we’re building your homefile."
   },
   "buttons": {
+    "accurate": "Accurate",
     "back": "Back",
     "cancel": "Cancel",
     "confirm": "Confirm",
@@ -111,6 +112,7 @@
     "edit": "Edit",
     "forward": "Forward",
     "next": "Next",
+    "notAccurate": "Not Accurate",
     "previous": "Previous",
     "save": "Save",
     "send": "Send",
@@ -1293,5 +1295,11 @@
     "description": "Est Value of Property Added to Homefile",
     "label": "Value added in",
     "title": "Value Monitor"
+  },
+  "wizardValueSummary": {
+    "assessedValue": "[Year] Assessed Value",
+    "estimatedValue": "Estimated Value",
+    "info": "You can edit this record within your Homefile. Your information remains private and is never shared or sold.",
+    "purchasePrice": "Purchase Price"
   }
 }

package/src/components/forms/dynamicForm/fields/HomeInitialSetup.tsx CHANGED Viewed

@@ -6,15 +6,24 @@ import {
   WizardStepOptions,
 } from '@/components'
-export const HomeInitialSetup = ({ fields, callback }: FieldTypesI) => {
+export const HomeInitialSetup = ({ fields, callback, style }: FieldTypesI) => {
+  const isWizard = style === 'wizard'
   return (
-    <Stack bg="neutral.white" spacing="10">
+    <Stack
+      bg="neutral.white"
+      spacing={{ base: '6', md: isWizard ? '10' : '0' }}
+    >
       {fields?.map(
         ({ children = [], id, label = '', type, value, description }) => {
           switch (type) {
             case 'home-wizard-header':
               return (
-                <WizardTextBody key={id} title={label} subtitle={description} />
+                <WizardTextBody
+                  key={id}
+                  title={label}
+                  subtitle={description}
+                  style={style}
+                />
               )
             case 'home-wizard-initial-setup':
               return (
@@ -23,6 +32,7 @@ export const HomeInitialSetup = ({ fields, callback }: FieldTypesI) => {
                   form={children}
                   title={String(value)}
                   callback={callback}
+                  style={style}
                 />
               )
             case 'home-wizard-step-options':
@@ -32,6 +42,7 @@ export const HomeInitialSetup = ({ fields, callback }: FieldTypesI) => {
                   form={children}
                   title={String(value)}
                   callback={callback}
+                  style={style}
                 />
               )

package/src/components/homeAssistant/panel/HomeAssistantPanel.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useState, useEffect, use } from 'react'
+import { PropsWithChildren, useState, useEffect } from 'react'
 import { FormProvider } from 'react-hook-form'
 import { t } from 'i18next'
 import {
@@ -16,6 +16,8 @@ import {
   HomeAssistantPanelStep,
   PanelHeader,
   Loading,
+  HomeAssistantWizardSteps,
+  DynamicForm,
 } from '@/components'
 import { AppliancesType, HomeAssistantPanelI } from '@/interfaces'
 import { homeAssistantSteps } from '@/helpers'
@@ -26,7 +28,7 @@ export const HomeAssistantPanel = ({
   children,
   currentForm,
   currentStep,
-  onApplianceClick,
+  onApplianceClick = () => {},
   onBack,
   onClose,
   onNext,
@@ -112,7 +114,7 @@ export const HomeAssistantPanel = ({
               !hasCompleted && currentStep === 6
                 ? t('buttons.finish')
                 : t('buttons.saveStep'),
-            onClick: () => onSave(updatedFields),
+            onClick: () => onSave?.(updatedFields),
           }}
           button3={
             !hasCompleted && currentStep === 6
@@ -129,3 +131,66 @@ export const HomeAssistantPanel = ({
     </>
   )
 }
+export const HomeAssistantWizardPanel = ({
+  currentForm,
+  currentStep,
+  onBack,
+  onClose,
+  onNext,
+  onSave,
+  backDisabled,
+  nextDisabled,
+  hasCompleted,
+  isLoading,
+}: PropsWithChildren<HomeAssistantPanelI>) => {
+  if (isLoading) return <Loading />
+  return (
+    <>
+      <DrawerHeader p="0">
+        <PanelHeader
+          handleCloseButton={onClose}
+          title={t('homeAssistant.title')}
+          icon={IA}
+        />
+      </DrawerHeader>
+      <DrawerBody p="0">
+        <HomeAssistantWizardSteps currentStep={currentStep} />
+        <DynamicForm form={currentForm} showTitle={false} style="panel" />
+      </DrawerBody>
+      <DrawerFooter px="0" py="6" bg="neutral.white">
+        <FooterButtons
+          button1={
+            currentStep === 1
+              ? undefined
+              : {
+                  buttonStyle: 'secondaryFooter',
+                  label: t('buttons.back'),
+                  onClick: onBack,
+                  isDisabled: backDisabled,
+                }
+          }
+          button2={{
+            buttonStyle: 'primaryFooter',
+            label:
+              !hasCompleted && currentStep === 5
+                ? t('buttons.finish')
+                : t('buttons.saveStep'),
+            onClick: () => onSave?.(),
+          }}
+          button3={
+            !hasCompleted && currentStep === 5
+              ? undefined
+              : {
+                  buttonStyle: 'primaryFooter',
+                  label: t('buttons.next'),
+                  onClick: onNext,
+                  isDisabled: nextDisabled,
+                }
+          }
+        />
+      </DrawerFooter>
+    </>
+  )
+}

package/src/components/homeAssistant/wizard/HomeAssistantWizardButton.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { border, Box, Center, Image, Stack, Text } from '@chakra-ui/react'
+import { Box, Center, Image, Stack, Text } from '@chakra-ui/react'
 import { CheckInCircle } from '@/assets/images'
 import { HomeAssistantButtonI } from '@/interfaces'
 import { getIconAltText } from '@/utils'

package/src/components/inputs/RadioCard.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import {  PropsWithChildren } from 'react'
+import { PropsWithChildren } from 'react'
 import { Box, Flex, useRadio, UseRadioProps } from '@chakra-ui/react'
 import { isSafari } from '@/utils'
@@ -33,6 +33,7 @@ export const RadioCard = (props: PropsWithChildren<UseRadioProps>) => {
             rounded={isSafari() ? 'sm' : 'full'}
             border="1px"
             borderColor="lightBlue.5"
+            flexShrink={0}
             _checked={{
               bg: 'blue.2',
               outline: '2px solid white',

package/src/components/wizard/WizardInitialOptions.tsx CHANGED Viewed

@@ -15,14 +15,19 @@ export const WizardInitialOptions = ({
   form,
   title,
   callback,
+  style = 'wizard',
 }: DynamicFormI) => {
   const { control } = useFormContext()
+  const isWizard = style === 'wizard'
   return (
     <Stack spacing="base" bg="lightBlue.1" p="base">
       <Text fontFamily="secondary" fontSize="sm">
         {title}
       </Text>
-      <SimpleGrid columns={2} spacing="base">
+      <SimpleGrid
+        columns={{ base: 1, md: isWizard ? 2 : 1 }}
+        spacing={{ base: 1, md: isWizard ? 'base' : 1 }}
+      >
         {form.map((field) => {
           const { id, value, label, icon, description } = field
           return (
@@ -54,6 +59,7 @@ export const WizardInitialOptions = ({
                     <Stack
                       as="button"
                       p="base"
+                      w="full"
                       onClick={() => {
                         onChange(!value)
                         callback?.({ ...field, value: !value })

package/src/components/wizard/WizardStepOptions.tsx CHANGED Viewed

@@ -12,15 +12,21 @@ import { Controller, useFormContext } from 'react-hook-form'
 import { CheckInCircle } from '@/assets/images'
 import { fieldIcons, setOptionButtonStyles } from '@/helpers'
-export const WizardStepOptions = ({ form, title, callback }: DynamicFormI) => {
+export const WizardStepOptions = ({
+  form,
+  title,
+  callback,
+  style = 'wizard',
+}: DynamicFormI) => {
   const { control } = useFormContext()
+  const isWizard = style === 'wizard'
   return (
     <Stack spacing="base" bg="lightBlue.1" p="base">
       <Text fontFamily="secondary" fontSize="sm">
         {title}
       </Text>
       <SimpleGrid
-        columns={6}
+        columns={{ base: 3, md: isWizard ? 6 : 5 }}
         spacing="base"
         gridAutoRows="1fr"
         alignItems="stretch"

package/src/components/wizard/WizardTextBody.tsx CHANGED Viewed

@@ -1,23 +1,48 @@
-import { Center, Stack, Text } from '@chakra-ui/react'
+import { Box, Center, Stack, Text } from '@chakra-ui/react'
 import { WizardTextHeaderI } from '@/interfaces'
-export const WizardTextBody = ({ title, subtitle }: WizardTextHeaderI) => {
+export const WizardTextBody = ({
+  title,
+  subtitle,
+  style,
+}: WizardTextHeaderI) => {
+  const isWizard = style === 'wizard'
+  if (isWizard) {
+    return (
+      <Center w="full" minH={{ md: '100px' }}>
+        <Stack spacing="4" w={{ base: 'full', md: '80%' }}>
+          <Text
+            fontSize={{ base: 'xl', md: '2xl' }}
+            lineHeight={{ base: 'shorter', md: 'base' }}
+            textAlign={{ base: 'left', md: 'center' }}
+          >
+            {title}
+          </Text>
+          {subtitle && (
+            <Text
+              fontFamily="secondary"
+              textAlign={{ base: 'left', md: 'center' }}
+            >
+              {subtitle}
+            </Text>
+          )}
+        </Stack>
+      </Center>
+    )
+  }
   return (
-    <Center w="full" minH="100px">
-      <Stack spacing="4" w="80%">
-        <Text
-          fontSize={{ base: 'xl', md: '2xl' }}
-          lineHeight={{ base: 'shorter', md: 'base' }}
-          textAlign="center"
-        >
+    <Box p="base">
+      <Stack spacing="4" w="full">
+        <Text fontSize="2xl" lineHeight="base" textAlign="left">
           {title}
         </Text>
         {subtitle && (
-          <Text fontFamily="secondary" textAlign="center">
+          <Text fontFamily="secondary" textAlign="left">
             {subtitle}
           </Text>
         )}
       </Stack>
-    </Center>
+    </Box>
   )
 }

package/src/components/wizard/WizardValueSummary.tsx ADDED Viewed

@@ -0,0 +1,80 @@
+import { t } from 'i18next'
+import { Stack, Text, Flex, Divider, Button } from '@chakra-ui/react'
+import { TrendingValueCard, RecordsSession } from '@/components'
+import { WizardValueSummaryProps } from '@/interfaces'
+export const WizardValueSummary = ({
+  title,
+  subtitle,
+  address,
+  estimatedValue,
+  purchasePrice,
+  assessedValue,
+  purchasePriceDetails,
+  assessedValueDetails,
+  onAccurate,
+  onNotAccurate,
+}: WizardValueSummaryProps) => {
+  const estimatedValueFormatted = `$${estimatedValue.toLocaleString('en-US')}.`
+  return (
+    <Stack w={{ base: 'full', md: '70%' }} m="auto" spacing="6">
+      <Stack spacing="1" align="center">
+        <Text fontSize="2xl" textTransform="capitalize">
+          {title}
+        </Text>
+        <Text fontFamily="secondary">{address}</Text>
+        {subtitle && <Text fontFamily="secondary">{subtitle}</Text>}
+      </Stack>
+      <Stack bg="lightGreen.3" spacing="base" pt="base" pb="6" align="center">
+        <Text fontSize="xs" textTransform="uppercase">
+          {t('wizardValueSummary.estimatedValue')}
+        </Text>
+        <Text fontSize="3xl">{estimatedValueFormatted}</Text>
+      </Stack>
+      <Flex gap="base" direction={{ base: 'column', md: 'row' }}>
+        <Stack flex="1" spacing="6">
+          <TrendingValueCard
+            bg="lightBlue.1"
+            label={t('wizardValueSummary.purchasePrice')}
+            value={purchasePrice}
+          />
+          <RecordsSession
+            details={purchasePriceDetails}
+            showLine={false}
+            gap="1"
+            textAlign="right"
+            p="0"
+          />
+        </Stack>
+        <Stack flex="1" spacing="6">
+          <TrendingValueCard
+            bg="lightBlue.1"
+            label={t('wizardValueSummary.assessedValue')}
+            value={assessedValue}
+          />
+          <RecordsSession
+            details={assessedValueDetails}
+            showLine={false}
+            gap="1"
+            textAlign="right"
+            p="0"
+          />
+        </Stack>
+      </Flex>
+      <Divider borderStyle="dotted" borderColor="lightBlue.11" />
+      <Flex gap="base">
+        <Button onClick={onNotAccurate}>{t('buttons.notAccurate')}</Button>
+        <Button onClick={onAccurate}>{t('buttons.accurate')}</Button>
+      </Flex>
+      <Text
+        fontFamily="secondary"
+        fontSize="sm"
+        textAlign="center"
+        color="gray.2"
+        lineHeight="shorter"
+      >
+        {t('wizardValueSummary.info')}
+      </Text>
+    </Stack>
+  )
+}

package/src/components/wizard/index.ts CHANGED Viewed

@@ -4,3 +4,4 @@ export * from './WizardStepOptions'
 export * from './WizardSuccessHeader'
 export * from './WizardTextHeader'
 export * from './WizardTextBody'
+export * from './WizardValueSummary'

package/src/index.ts CHANGED Viewed

@@ -72,6 +72,7 @@ export {
   HelpContent,
   HomeAssistant,
   HomeAssistantPanel,
+  HomeAssistantWizardPanel,
   HomeBoardGrid,
   HomeBoardTour,
   HomeCard,
@@ -219,6 +220,7 @@ export {
   WellDone,
   YtdTile,
   WizardTextHeader,
+  WizardValueSummary,
 } from './components'
 export { useCustomToast } from './hooks'

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

@@ -210,6 +210,7 @@ export interface DynamicFormI extends Partial<PartnerFooterI> {
   singleFileUpload?: boolean
   title?: string
   uploadingFieldId?: string
+  style?: 'wizard' | 'panel'
 }
 export interface DynamicFormProxyI {

package/src/interfaces/forms/dynamicForm/fields/GroupField.interface.ts CHANGED Viewed

@@ -13,4 +13,5 @@ export interface FieldTypesI {
   fields?: DynamicFormI['form']
   menuItems?: MenuItemI[]
   showIcon?: boolean
+  style?: DynamicFormI['style']
 }

package/src/interfaces/homeAssistant/HomeAssistantPanel.interface.ts CHANGED Viewed

@@ -3,11 +3,11 @@ import { DynamicFormI, ReportI } from '@/interfaces'
 export interface HomeAssistantPanelI {
   currentForm: DynamicFormI['form']
   currentStep: number
-  onApplianceClick: (selected: string[]) => void
+  onApplianceClick?: (selected: string[]) => void
   onBack: () => void
   onClose: () => void
   onNext: () => void
-  onSave: (form: ReportI[]) => void
+  onSave?: (form?: ReportI[]) => void
   backDisabled: boolean
   nextDisabled: boolean
   hasCompleted: boolean

package/src/interfaces/wizard/WizardTextHeader.interface.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 export interface WizardTextHeaderI {
   title: string
   subtitle?: string
+  style?: 'wizard' | 'panel'
 }

package/src/interfaces/wizard/WizardValueSummary.interface.ts ADDED Viewed

@@ -0,0 +1,12 @@
+export interface WizardValueSummaryProps {
+  title: string
+  subtitle?: string
+  address: string
+  estimatedValue: number
+  purchasePrice: number
+  assessedValue: number
+  purchasePriceDetails: Record<string, string | undefined>
+  assessedValueDetails: Record<string, string | undefined>
+  onAccurate: () => void
+  onNotAccurate: () => void
+}

package/src/interfaces/wizard/index.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 export * from './ControlledWizard.interface'
 export * from './WizardTextHeader.interface'
 export * from './WizardSuccessHeader.interface'
+export * from './WizardValueSummary.interface'

package/src/stories/homeAssistant/panel/HomeAssistantPanel.stories.tsx CHANGED Viewed

@@ -1,7 +1,11 @@
 import { Meta } from '@storybook/react'
 import { DrawerContent } from '@chakra-ui/react'
 import { action } from '@storybook/addon-actions'
-import { HomeAssistantPanel, RightPanel } from '@/components'
+import {
+  HomeAssistantPanel,
+  HomeAssistantWizardPanel,
+  RightPanel,
+} from '@/components'
 import { HomeAssistantPanelI, ReportI } from '@/interfaces'
 import {
   homeAssitantStep1FormMock,
@@ -10,6 +14,7 @@ import {
   homeAssitantStep4FormMock,
   homeAssitantStep5FormMock,
   homeAssitantStep6FormMock,
+  homeWizardForm,
 } from '@/mocks'
 import { useState } from 'react'
@@ -67,3 +72,33 @@ export const HomeAssistantPanelComponent = (args: HomeAssistantPanelI) => {
     </DrawerContent>
   )
 }
+export const NewHomeAssistantPanelComponent = (args: HomeAssistantPanelI) => {
+  const [currentStep, setCurrentStep] = useState<number>(0)
+  const handleFormChange = () =>
+    setCurrentStep((prev) => {
+      if (prev === 5) return 1
+      return prev + 1
+    })
+  const handleBack = () =>
+    setCurrentStep((prev) => {
+      if (prev === 0) return 5
+      return prev - 1
+    })
+  const currentForm = homeWizardForm[currentStep]
+  return (
+    <DrawerContent bg="lightBlue.1">
+      <HomeAssistantWizardPanel
+        {...args}
+        currentStep={currentStep + 1}
+        currentForm={[currentForm]}
+        onNext={handleFormChange}
+        onBack={handleBack}
+        onSave={action('onSave')}
+        isLoading={false}
+      />
+    </DrawerContent>
+  )
+}

package/src/stories/wizard/ControlledWizard.stories.tsx CHANGED Viewed

@@ -10,13 +10,19 @@ import {
   MyHomeDetails,
   SearchRecords,
   WizardTextHeader,
+  WizardSuccessHeader,
+  WizardValueSummary,
 } from '@/components'
 import { Box, Center, Stack } from '@chakra-ui/react'
 import { action } from '@storybook/addon-actions'
 import { formValues } from '@/helpers'
-import { homeWizardForm, propertiesMock } from '@/mocks'
+import {
+  assessedValueMock,
+  homeWizardForm,
+  propertiesMock,
+  purchasePriceMock,
+} from '@/mocks'
 import { ControlledWizardI, HomeFormI } from '@/interfaces'
-import { WizardSuccessHeader } from '@/components/wizard/WizardSuccessHeader'
 export default {
   title: 'Components/Wizard/ControlledWizard',
@@ -74,7 +80,6 @@ export const ControlledWizardComponent = () => {
       step={step}
       setStep={setStep}
       steps={[
-        ...homeAssistantSteps,
         {
           header: (
             <WizardTextHeader
@@ -119,6 +124,28 @@ export const ControlledWizardComponent = () => {
             />
           ),
         },
+        {
+          header: (
+            <WizardTextHeader
+              title="This is the data we found in public records."
+              subtitle="The details linked to your address come from public data sources and may not
+represent the most up-to-date information about your home."
+            />
+          ),
+          body: ({ setStep }) => (
+            <WizardValueSummary
+              title="The Edmunds"
+              address="113 South First Street, Austin TX 89853"
+              estimatedValue={894000}
+              purchasePrice={456432}
+              assessedValue={726678}
+              purchasePriceDetails={purchasePriceMock}
+              assessedValueDetails={assessedValueMock}
+              onAccurate={() => setStep(step + 1)}
+              onNotAccurate={() => setStep(step + 1)}
+            />
+          ),
+        },
         {
           header: (
             <WizardSuccessHeader
@@ -136,10 +163,12 @@ export const ControlledWizardComponent = () => {
           ),
           body: () => (
             <Center w="full" h="full">
-              <HomeAssistantTutorial onStart={() => setStep(4)} />
+              <HomeAssistantTutorial onStart={() => setStep(step + 1)} />
             </Center>
           ),
         },
+        ...homeAssistantSteps,
       ]}
     />
   )