@homefile/components-v2 2.39.22 → 2.39.24

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 (28) hide show
  1. package/dist/components/myHomes/steps/ConfirmHomeDetails.d.ts +2 -0
  2. package/dist/components/myHomes/steps/ConfirmHomeDetails.js +8 -0
  3. package/dist/components/myHomes/steps/ConfirmPropertyBody.d.ts +2 -0
  4. package/dist/components/myHomes/steps/ConfirmPropertyBody.js +6 -0
  5. package/dist/components/myHomes/steps/ConfirmPropertyFooter.d.ts +2 -0
  6. package/dist/components/myHomes/steps/ConfirmPropertyFooter.js +5 -0
  7. package/dist/components/myHomes/steps/NewHomeDetails.d.ts +1 -1
  8. package/dist/components/myHomes/steps/NewHomeDetails.js +4 -4
  9. package/dist/components/myHomes/steps/index.d.ts +3 -0
  10. package/dist/components/myHomes/steps/index.js +3 -0
  11. package/dist/components/wizard/ControlledWizard.d.ts +1 -1
  12. package/dist/components/wizard/ControlledWizard.js +45 -8
  13. package/dist/hooks/myHomes/index.d.ts +1 -0
  14. package/dist/hooks/myHomes/index.js +1 -0
  15. package/dist/hooks/myHomes/useAddHomeContent.d.ts +1 -1
  16. package/dist/hooks/myHomes/useAddHomeContent.js +1 -1
  17. package/dist/hooks/myHomes/useConfirmProperty.d.ts +13 -0
  18. package/dist/hooks/myHomes/useConfirmProperty.js +37 -0
  19. package/dist/index.d.ts +2 -2
  20. package/dist/index.js +2 -2
  21. package/dist/interfaces/myHomes/AddHomeContent.interface.d.ts +1 -1
  22. package/dist/interfaces/myHomes/ConfirmProperty.interface.d.ts +27 -0
  23. package/dist/interfaces/myHomes/ConfirmProperty.interface.js +1 -0
  24. package/dist/interfaces/myHomes/index.d.ts +1 -0
  25. package/dist/interfaces/myHomes/index.js +1 -0
  26. package/dist/interfaces/wizard/ControlledWizard.interface.d.ts +12 -11
  27. package/dist/stories/wizard/ControlledWizard.stories.js +14 -5
  28. package/package.json +1 -1
@@ -0,0 +1,2 @@
1
+ import { AddHomeContentI } from '../../../interfaces';
2
+ export declare const ConfirmHomeDetails: ({ isLoading, handleCreateHomeClick, }: Pick<AddHomeContentI, "isLoading" | "handleCreateHomeClick">) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,8 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { t } from 'i18next';
3
+ import { Button } from '@chakra-ui/react';
4
+ import { useAddHouseContent } from '../../../hooks';
5
+ export const ConfirmHomeDetails = ({ isLoading, handleCreateHomeClick, }) => {
6
+ const { handleSubmit } = useAddHouseContent(undefined, handleCreateHomeClick);
7
+ return (_jsx(Button, { onClick: handleSubmit, variant: "wizard", disabled: isLoading, children: t('buttons.confirm') }));
8
+ };
@@ -0,0 +1,2 @@
1
+ import { ConfirmPropertyBodyI } from '../../../interfaces';
2
+ export declare function ConfirmPropertyBody({ properties, currentProperty, onChange, footerText, }: ConfirmPropertyBodyI): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,6 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Box, Stack, Text } from '@chakra-ui/react';
3
+ import { PropertyCards } from '../../../components';
4
+ export function ConfirmPropertyBody({ properties, currentProperty, onChange, footerText, }) {
5
+ return (_jsx(Stack, { spacing: "4", align: "center", w: "full", children: _jsxs(Stack, { align: "center", w: "full", spacing: "base", children: [_jsx(PropertyCards, { properties: properties, currentProperty: currentProperty, onChange: onChange }), _jsx(Box, { px: "6", children: _jsx(Text, { variant: "home", textAlign: "center", children: footerText }) })] }) }));
6
+ }
@@ -0,0 +1,2 @@
1
+ import { ConfirmPropertyFooterI } from '../../../interfaces';
2
+ export declare function ConfirmPropertyFooter({ onContinue, isLoading, label, }: ConfirmPropertyFooterI): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Button } from '@chakra-ui/react';
3
+ export function ConfirmPropertyFooter({ onContinue, isLoading, label, }) {
4
+ return (_jsx(Button, { onClick: onContinue, isDisabled: !!isLoading, variant: "wizard", children: label }));
5
+ }
@@ -1,2 +1,2 @@
1
1
  import { AddHomeContentI } from '../../../interfaces';
2
- export declare const NewHomeDetails: ({ handleCreateHomeClick, values, isLoading, }: AddHomeContentI) => import("react/jsx-runtime").JSX.Element;
2
+ export declare const NewHomeDetails: ({ values, isLoading }: AddHomeContentI) => import("react/jsx-runtime").JSX.Element;
@@ -1,16 +1,16 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useSnapshot } from 'valtio';
3
3
  import { t } from 'i18next';
4
- import { Stack, Center, Flex, Button, Divider, } from '@chakra-ui/react';
4
+ import { Stack, Center, Divider } from '@chakra-ui/react';
5
5
  import { AddressStored, TextInput, IncludePublicRecords, WrapperWithShadow, } from '../../../components';
6
6
  import { firstHomeProxy } from '../../../proxies';
7
7
  import { useAddHouseContent } from '../../../hooks';
8
8
  import { BeatLoader } from 'react-spinners';
9
9
  import { up } from './MyHomeDetails';
10
- export const NewHomeDetails = ({ handleCreateHomeClick, values, isLoading, }) => {
11
- const { handleErrorMessage, handleNameChange, handleNameValidation, handleSelectRecords, handleSubmit, } = useAddHouseContent(values, handleCreateHomeClick);
10
+ export const NewHomeDetails = ({ values, isLoading }) => {
11
+ const { handleErrorMessage, handleNameChange, handleNameValidation, handleSelectRecords, } = useAddHouseContent(values);
12
12
  const { name, isNameValid, searchRecords } = useSnapshot(firstHomeProxy, {
13
13
  sync: true,
14
14
  });
15
- return (_jsxs(Stack, { spacing: "base", children: [isLoading && (_jsx(Center, { h: "4rem", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })), !isLoading && (_jsxs(Stack, { spacing: "base", children: [_jsx(TextInput, { errorMessage: handleErrorMessage(), hasError: !isNameValid, id: "homeName", placeholder: t('myHomes.form.homeName'), handleChange: handleNameChange, onBlurCapture: handleNameValidation, value: name }), _jsx(Divider, { borderStyle: "dashed", borderColor: "lightBlue.6" }), _jsx(AddressStored, {})] })), _jsx(WrapperWithShadow, { animation: up, fadeDelay: 0.2, isWizard: true, padding: "0", pb: "0", children: _jsx(Flex, { direction: "column", justify: "space-between", gap: "10", h: "full", children: _jsxs(Stack, { spacing: "4", children: [_jsx(IncludePublicRecords, { isChecked: searchRecords, onSelectRecords: handleSelectRecords }), _jsx(Button, { onClick: handleSubmit, disabled: isLoading, variant: "wizard", children: t('buttons.confirm') })] }) }) })] }));
15
+ return (_jsxs(Stack, { spacing: "base", children: [isLoading && (_jsx(Center, { h: "4rem", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })), !isLoading && (_jsxs(Stack, { spacing: "base", children: [_jsx(TextInput, { errorMessage: handleErrorMessage(), hasError: !isNameValid, id: "homeName", placeholder: t('myHomes.form.homeName'), handleChange: handleNameChange, onBlurCapture: handleNameValidation, value: name }), _jsx(Divider, { borderStyle: "dashed", borderColor: "lightBlue.6" }), _jsx(AddressStored, {})] })), _jsx(WrapperWithShadow, { animation: up, fadeDelay: 0.2, isWizard: true, padding: "0", pb: "0", children: _jsx(IncludePublicRecords, { isChecked: searchRecords, onSelectRecords: handleSelectRecords }) })] }));
16
16
  };
@@ -1,4 +1,7 @@
1
+ export * from './ConfirmHomeDetails';
1
2
  export * from './ConfirmProperty';
3
+ export * from './ConfirmPropertyBody';
4
+ export * from './ConfirmPropertyFooter';
2
5
  export * from './MyHomeDetails';
3
6
  export * from './MyHomesStepBody';
4
7
  export * from './SearchRecords';
@@ -1,4 +1,7 @@
1
+ export * from './ConfirmHomeDetails';
1
2
  export * from './ConfirmProperty';
3
+ export * from './ConfirmPropertyBody';
4
+ export * from './ConfirmPropertyFooter';
2
5
  export * from './MyHomeDetails';
3
6
  export * from './MyHomesStepBody';
4
7
  export * from './SearchRecords';
@@ -1,2 +1,2 @@
1
1
  import { ControlledWizardI } from '../../interfaces';
2
- export declare function ControlledWizard({ bodyWidth, step, setStep, steps, height, headerBlink, }: ControlledWizardI): import("react/jsx-runtime").JSX.Element;
2
+ export declare function ControlledWizard({ bodyWidth, step, setStep, steps, height, headerBlink, footerBlink, }: ControlledWizardI): import("react/jsx-runtime").JSX.Element;
@@ -2,19 +2,56 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Box, Flex, Stack } from '@chakra-ui/react';
3
3
  import { AnimatePresence, motion } from 'framer-motion';
4
4
  const MotionBox = motion.create(typeof Box);
5
- export function ControlledWizard({ bodyWidth = '80%', step, setStep, steps, height = '700px', headerBlink, }) {
5
+ export function ControlledWizard({ bodyWidth = '80%', step, setStep, steps, height = '700px', headerBlink, footerBlink, }) {
6
6
  const current = steps[step];
7
7
  const headerVariants = {
8
- initial: { opacity: 0, y: 8 },
8
+ initial: { opacity: 0, y: 8, filter: 'blur(6px)' },
9
9
  animate: headerBlink
10
- ? { opacity: [1, 0.55, 1], y: 0, transition: { duration: 0.28 } }
11
- : { opacity: 1, y: 0, transition: { duration: 0.28 } },
12
- exit: { opacity: 0, y: -8, transition: { duration: 0.18 } },
10
+ ? {
11
+ opacity: [1, 0.55, 1],
12
+ y: 0,
13
+ filter: 'blur(0px)',
14
+ transition: { duration: 0.28 },
15
+ }
16
+ : {
17
+ opacity: 1,
18
+ y: 0,
19
+ filter: 'blur(0px)',
20
+ transition: { duration: 0.24 },
21
+ },
22
+ exit: {
23
+ opacity: 0,
24
+ y: -8,
25
+ filter: 'blur(6px)',
26
+ transition: { duration: 0.18 },
27
+ },
13
28
  };
14
29
  const bodyVariants = {
15
30
  initial: { opacity: 0, y: 12, scale: 0.98 },
16
- animate: { opacity: 1, y: 0, scale: 1 },
17
- exit: { opacity: 0, y: -8, scale: 0.98 },
31
+ animate: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.22 } },
32
+ exit: { opacity: 0, y: -8, scale: 0.98, transition: { duration: 0.18 } },
18
33
  };
19
- return (_jsxs(Stack, { spacing: { base: '4', md: '8' }, shadow: "md", h: height, bg: "white", overflowY: "hidden", pb: { base: '8', md: '16' }, children: [_jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: headerVariants, initial: "initial", animate: "animate", exit: "exit", w: "full", children: current.header }, `h-${step}`) }), _jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: bodyVariants, initial: "initial", animate: "animate", exit: "exit", flex: "1", display: "flex", minH: "0", children: _jsx(Flex, { direction: "column", flex: "1", overflowY: "auto", minH: "0", align: "center", children: _jsx(Box, { w: bodyWidth, children: current.body({ setStep }) }) }) }, `b-${step}`) })] }));
34
+ const footerVariants = {
35
+ initial: { opacity: 0, y: 12, filter: 'blur(6px)' },
36
+ animate: footerBlink
37
+ ? {
38
+ opacity: [1, 0.6, 1],
39
+ y: 0,
40
+ filter: 'blur(0px)',
41
+ transition: { duration: 0.28 },
42
+ }
43
+ : {
44
+ opacity: 1,
45
+ y: 0,
46
+ filter: 'blur(0px)',
47
+ transition: { duration: 0.24 },
48
+ },
49
+ exit: {
50
+ opacity: 0,
51
+ y: 12,
52
+ filter: 'blur(6px)',
53
+ transition: { duration: 0.18 },
54
+ },
55
+ };
56
+ return (_jsxs(Stack, { shadow: "md", h: height, bg: "white", overflow: "hidden", spacing: "0", children: [_jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: headerVariants, initial: "initial", animate: "animate", exit: "exit", w: "full", flexShrink: 0, children: current.header }, `h-${step}`) }), _jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: bodyVariants, initial: "initial", animate: "animate", exit: "exit", flex: "1", display: "flex", minH: "0", children: _jsx(Flex, { direction: "column", flex: "auto", overflowY: "auto", minH: "0", align: "center", py: { base: '4', md: '8' }, children: _jsx(Box, { w: bodyWidth, children: current.body({ setStep }) }) }) }, `b-${step}`) }), current.footer && (_jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: footerVariants, initial: "initial", animate: "animate", exit: "exit", w: "full", flexShrink: 0, bg: "white", borderTopWidth: "1px", borderColor: "lightBlue.3", children: _jsx(Flex, { justify: "center", py: { base: '4', md: '5' }, children: _jsx(Box, { w: bodyWidth, children: current.footer }) }) }, `f-${step}`) }))] }));
20
57
  }
@@ -1,4 +1,5 @@
1
1
  export * from './useAddHomeContent';
2
+ export * from './useConfirmProperty';
2
3
  export * from './useEditHomeBody';
3
4
  export * from './useEditHomeDetails';
4
5
  export * from './useMyHomeCard';
@@ -1,4 +1,5 @@
1
1
  export * from './useAddHomeContent';
2
+ export * from './useConfirmProperty';
2
3
  export * from './useEditHomeBody';
3
4
  export * from './useEditHomeDetails';
4
5
  export * from './useMyHomeCard';
@@ -1,6 +1,6 @@
1
1
  import { ChangeEvent } from 'react';
2
2
  import { HandleInputType, HomeFormI } from '../../interfaces';
3
- export declare const useAddHouseContent: (values: HomeFormI | undefined, callback: (form: HomeFormI) => void) => {
3
+ export declare const useAddHouseContent: (values?: HomeFormI | undefined, callback?: (form: HomeFormI) => void) => {
4
4
  handleErrorMessage: () => string;
5
5
  handleLinkChange: HandleInputType;
6
6
  handleNameChange: HandleInputType;
@@ -53,7 +53,7 @@ export const useAddHouseContent = (values, callback) => {
53
53
  handleValidation('number');
54
54
  handleValidation('zip');
55
55
  if (!hasError && firstHome.isNameValid) {
56
- callback(Object.assign(Object.assign({}, fields), { externalLink: firstHome.externalLink, name: firstHome.name, isOwner: firstHome.isOwner, searchRecords: firstHome.searchRecords }));
56
+ callback === null || callback === void 0 ? void 0 : callback(Object.assign(Object.assign({}, fields), { externalLink: firstHome.externalLink, name: firstHome.name, isOwner: firstHome.isOwner, searchRecords: firstHome.searchRecords }));
57
57
  cleanStores();
58
58
  resetValidations();
59
59
  }
@@ -0,0 +1,13 @@
1
+ import { PropertyI } from '../../interfaces';
2
+ type UseConfirmPropertyModelArgs = {
3
+ properties?: PropertyI[];
4
+ handleAddress?: (id: string) => void;
5
+ };
6
+ export declare function useConfirmPropertyModel({ properties, handleAddress, }: UseConfirmPropertyModelArgs): {
7
+ currentProperty: string;
8
+ setCurrentProperty: import("react").Dispatch<import("react").SetStateAction<string>>;
9
+ footerText: string;
10
+ propertiesWithNoneOfTheAbove: PropertyI[];
11
+ handleContinue: () => void;
12
+ };
13
+ export {};
@@ -0,0 +1,37 @@
1
+ import { useCallback, useEffect, useMemo, useState } from 'react';
2
+ import { t } from 'i18next';
3
+ export function useConfirmPropertyModel({ properties = [], handleAddress, }) {
4
+ var _a, _b;
5
+ const [currentProperty, setCurrentProperty] = useState((_b = (_a = properties === null || properties === void 0 ? void 0 : properties[0]) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : 'none');
6
+ const footerText = useMemo(() => {
7
+ return (properties === null || properties === void 0 ? void 0 : properties.length) > 0
8
+ ? t('myHomes.properties.footer')
9
+ : t('myHomes.properties.notFound');
10
+ }, [properties === null || properties === void 0 ? void 0 : properties.length]);
11
+ const propertiesWithNoneOfTheAbove = useMemo(() => {
12
+ return [
13
+ ...properties,
14
+ {
15
+ id: 'none',
16
+ address: { address: t('myHomes.properties.none') },
17
+ },
18
+ ];
19
+ }, [properties]);
20
+ useEffect(() => {
21
+ // Keep selection stable when properties change
22
+ if ((properties === null || properties === void 0 ? void 0 : properties.length) > 0)
23
+ setCurrentProperty(properties[0].id);
24
+ else
25
+ setCurrentProperty('none');
26
+ }, [properties]);
27
+ const handleContinue = useCallback(() => {
28
+ handleAddress === null || handleAddress === void 0 ? void 0 : handleAddress(currentProperty);
29
+ }, [handleAddress, currentProperty]);
30
+ return {
31
+ currentProperty,
32
+ setCurrentProperty,
33
+ footerText,
34
+ propertiesWithNoneOfTheAbove,
35
+ handleContinue,
36
+ };
37
+ }
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPopup, AddPropertyRecords, Address, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackendAlert, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ConfirmProperty, 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, HomeAssistantTutorial, HomeAssistantWizardPanel, HomeAssistantWizardSteps, 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, MessageChatPanel, MessagePanel, MinimizedTiles, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewHomeDetails, NewPassword, NotBeChargedBanner, NotificationCard, Notifications, NotificationsPanel, NotificationsReminder, NpsScore, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentBanner, 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, SearchItemLoader, SearchRecords, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, VideoPlayer, VideoPlayerModal, ViewContactPanel, WeatherWidget, WellDone, WizardStepGoal, WizardSuccessHeader, WizardTextHeader, WizardValueSummary, YtdTile, } from './components';
2
- export { useCustomToast } from './hooks';
1
+ export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPopup, AddPropertyRecords, Address, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackendAlert, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ConfirmProperty, ConfirmPropertyBody, ConfirmPropertyFooter, 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, HomeAssistantTutorial, HomeAssistantWizardPanel, HomeAssistantWizardSteps, 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, MessageChatPanel, MessagePanel, MinimizedTiles, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewHomeDetails, NewPassword, NotBeChargedBanner, NotificationCard, Notifications, NotificationsPanel, NotificationsReminder, NpsScore, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentBanner, 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, SearchItemLoader, SearchRecords, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, VideoPlayer, VideoPlayerModal, ViewContactPanel, WeatherWidget, WellDone, WizardStepGoal, WizardSuccessHeader, WizardTextHeader, WizardValueSummary, YtdTile, } from './components';
2
+ export { useCustomToast, useConfirmPropertyModel } from './hooks';
3
3
  export { randomColor, mapApiObjectToFormFields, mapForecastToWidget, } from './utils';
4
4
  export { CookTop, Contacts, GuestBedroom, MagnifyingGlassReport, Message, Register, Receipts, Price, BlueFolderShared, Calendar, Create, Notes, WallDecor, } from './assets/images';
5
5
  export { homeAssistantWizardSteps } from './helpers';
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
- export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPopup, AddPropertyRecords, Address, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackendAlert, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ConfirmProperty, 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, HomeAssistantTutorial, HomeAssistantWizardPanel, HomeAssistantWizardSteps, 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, MessageChatPanel, MessagePanel, MinimizedTiles, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewHomeDetails, NewPassword, NotBeChargedBanner, NotificationCard, Notifications, NotificationsPanel, NotificationsReminder, NpsScore, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentBanner, 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, SearchItemLoader, SearchRecords, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, VideoPlayer, VideoPlayerModal, ViewContactPanel, WeatherWidget, WellDone, WizardStepGoal, WizardSuccessHeader, WizardTextHeader, WizardValueSummary, YtdTile, } from './components';
2
- export { useCustomToast } from './hooks';
1
+ export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPopup, AddPropertyRecords, Address, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackendAlert, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ConfirmProperty, ConfirmPropertyBody, ConfirmPropertyFooter, 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, HomeAssistantTutorial, HomeAssistantWizardPanel, HomeAssistantWizardSteps, 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, MessageChatPanel, MessagePanel, MinimizedTiles, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewHomeDetails, NewPassword, NotBeChargedBanner, NotificationCard, Notifications, NotificationsPanel, NotificationsReminder, NpsScore, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentBanner, 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, SearchItemLoader, SearchRecords, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, VideoPlayer, VideoPlayerModal, ViewContactPanel, WeatherWidget, WellDone, WizardStepGoal, WizardSuccessHeader, WizardTextHeader, WizardValueSummary, YtdTile, } from './components';
2
+ export { useCustomToast, useConfirmPropertyModel } from './hooks';
3
3
  export { randomColor, mapApiObjectToFormFields, mapForecastToWidget, } from './utils';
4
4
  export { CookTop, Contacts, GuestBedroom, MagnifyingGlassReport, Message, Register, Receipts, Price, BlueFolderShared, Calendar, Create, Notes, WallDecor, } from './assets/images';
5
5
  export { homeAssistantWizardSteps } from './helpers';
@@ -13,7 +13,7 @@ export interface HomeAddressDataI {
13
13
  }
14
14
  export interface AddHomeContentI {
15
15
  handleAddress?: (id: string) => void;
16
- handleCreateHomeClick: (form: HomeFormI) => void;
16
+ handleCreateHomeClick?: (form: HomeFormI) => void;
17
17
  handleSkipClick?: () => void;
18
18
  isFirstHome?: boolean;
19
19
  isLoading?: boolean;
@@ -0,0 +1,27 @@
1
+ export interface PropertyI {
2
+ id: string;
3
+ address: {
4
+ address: string;
5
+ };
6
+ }
7
+ export interface ConfirmPropertyBodyI {
8
+ properties: PropertyI[];
9
+ currentProperty: string;
10
+ isWizard?: boolean;
11
+ onChange: (id: string) => void;
12
+ footerText: string;
13
+ }
14
+ export interface ConfirmPropertyFooterI {
15
+ onContinue: () => void;
16
+ isLoading?: boolean;
17
+ isWizard?: boolean;
18
+ label?: string;
19
+ }
20
+ export interface ConfirmPropertyI {
21
+ isWizard?: boolean;
22
+ isLoading?: boolean;
23
+ properties: PropertyI[];
24
+ handleAddress: () => void;
25
+ title: string;
26
+ subtitle: string;
27
+ }
@@ -1,5 +1,6 @@
1
1
  export * from './edit';
2
2
  export * from './AddHomeContent.interface';
3
+ export * from './ConfirmProperty.interface';
3
4
  export * from './FirstHomeHeader.interface';
4
5
  export * from './Home.interface';
5
6
  export * from './HomeCard.interface';
@@ -1,5 +1,6 @@
1
1
  export * from './edit';
2
2
  export * from './AddHomeContent.interface';
3
+ export * from './ConfirmProperty.interface';
3
4
  export * from './FirstHomeHeader.interface';
4
5
  export * from './Home.interface';
5
6
  export * from './HomeCard.interface';
@@ -1,15 +1,16 @@
1
- import { ReactNode } from 'react';
2
- export type WizardStep = {
3
- header: ReactNode;
4
- body: (api: {
5
- setStep: (i: number) => void;
6
- }) => ReactNode;
7
- };
1
+ export interface ControlledWizardStepI {
2
+ header: React.ReactNode;
3
+ body: (args: {
4
+ setStep: (n: number) => void;
5
+ }) => React.ReactNode;
6
+ footer?: React.ReactNode;
7
+ }
8
8
  export interface ControlledWizardI {
9
+ bodyWidth?: string;
9
10
  step: number;
10
- setStep: (i: number) => void;
11
- steps: WizardStep[];
12
- height?: string | number;
13
- bodyWidth?: string | number;
11
+ setStep: (n: number) => void;
12
+ steps: ControlledWizardStepI[];
13
+ height?: string;
14
14
  headerBlink?: boolean;
15
+ footerBlink?: boolean;
15
16
  }
@@ -9,11 +9,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
9
9
  };
10
10
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
11
11
  import { useState } from 'react';
12
- import { ConfirmProperty, ControlledWizard, DynamicForm, FooterButtons, HomeAssistantTutorial, HomeAssistantWizardSteps, SearchRecords, WizardTextHeader, WizardSuccessHeader, WizardValueSummary, NewHomeDetails, } from '../../components';
12
+ import { ControlledWizard, DynamicForm, FooterButtons, HomeAssistantTutorial, HomeAssistantWizardSteps, SearchRecords, WizardTextHeader, WizardSuccessHeader, WizardValueSummary, NewHomeDetails, ConfirmHomeDetails, ConfirmPropertyBody, ConfirmPropertyFooter, } from '../../components';
13
13
  import { Box, Center, Stack } from '@chakra-ui/react';
14
14
  import { action } from '@storybook/addon-actions';
15
15
  import { assessedValueMock, homeWizardForm, propertiesMock, purchasePriceMock, } from '../../mocks';
16
16
  import { formValues } from '../../helpers';
17
+ import { useConfirmPropertyModel } from '../../hooks';
17
18
  export default {
18
19
  title: 'Components/Wizard/ControlledWizard',
19
20
  component: ControlledWizard,
@@ -26,6 +27,13 @@ function fakeLookup() {
26
27
  }
27
28
  export const ControlledWizardComponent = () => {
28
29
  const [step, setStep] = useState(0);
30
+ const confirmModel = useConfirmPropertyModel({
31
+ properties: propertiesMock,
32
+ handleAddress: (address) => {
33
+ action('Handle Address')(address);
34
+ setStep(step + 1);
35
+ },
36
+ });
29
37
  const homeAssistantSteps = homeWizardForm.map((form, index) => ({
30
38
  header: _jsx(HomeAssistantWizardSteps, { currentStep: index + 1 }),
31
39
  body: () => (_jsxs(Stack, { h: "full", spacing: "10", w: { base: 'full', md: '600px' }, justify: "space-around", m: "auto", children: [_jsx(DynamicForm, { form: [form], showTitle: false, callback: action('DynamicForm') }), _jsx(Box, { alignSelf: "flex-end", children: _jsx(FooterButtons, { button1: {
@@ -41,10 +49,12 @@ export const ControlledWizardComponent = () => {
41
49
  return (_jsx(ControlledWizard, { height: "700px", step: step, setStep: setStep, steps: [
42
50
  {
43
51
  header: (_jsx(WizardTextHeader, { title: "Welcome to Homefile John.", subtitle: "We\u2019re about to make owning your home dramatically easier. Answer a few quick questions and we\u2019ll handle everything that usually slips through the cracks." })),
44
- body: ({ setStep }) => (_jsx(NewHomeDetails, { values: formValues, handleCreateHomeClick: (values) => __awaiter(void 0, void 0, void 0, function* () {
52
+ body: () => _jsx(NewHomeDetails, { values: formValues }),
53
+ footer: (_jsx(ConfirmHomeDetails, { handleCreateHomeClick: (values) => __awaiter(void 0, void 0, void 0, function* () {
45
54
  setStep(1);
46
55
  yield fakeLookup();
47
56
  setStep(2);
57
+ action('Create Home Click')(values);
48
58
  }) })),
49
59
  },
50
60
  {
@@ -53,9 +63,8 @@ export const ControlledWizardComponent = () => {
53
63
  },
54
64
  {
55
65
  header: (_jsx(WizardTextHeader, { title: `This is the data we found \n in public records.`, subtitle: "Details may not represent the most up-to-date info about your home." })),
56
- body: () => (_jsx(ConfirmProperty, { isWizard: true, properties: propertiesMock, handleAddress: () => {
57
- setStep(3);
58
- } })),
66
+ body: () => (_jsx(ConfirmPropertyBody, { isWizard: true, properties: confirmModel.propertiesWithNoneOfTheAbove, currentProperty: confirmModel.currentProperty, onChange: confirmModel.setCurrentProperty, footerText: confirmModel.footerText })),
67
+ footer: (_jsx(ConfirmPropertyFooter, { isWizard: true, onContinue: confirmModel.handleContinue, isLoading: false, label: "Confirm" })),
59
68
  },
60
69
  {
61
70
  header: (_jsx(WizardTextHeader, { title: `This is the data we \n 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." })),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homefile/components-v2",
3
- "version": "2.39.22",
3
+ "version": "2.39.24",
4
4
  "author": "Homefile",
5
5
  "license": "UNLICENSED",
6
6
  "typings": "dist/index.d.ts",