@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.
- package/dist/components/myHomes/steps/ConfirmHomeDetails.d.ts +2 -0
- package/dist/components/myHomes/steps/ConfirmHomeDetails.js +8 -0
- package/dist/components/myHomes/steps/ConfirmPropertyBody.d.ts +2 -0
- package/dist/components/myHomes/steps/ConfirmPropertyBody.js +6 -0
- package/dist/components/myHomes/steps/ConfirmPropertyFooter.d.ts +2 -0
- package/dist/components/myHomes/steps/ConfirmPropertyFooter.js +5 -0
- package/dist/components/myHomes/steps/NewHomeDetails.d.ts +1 -1
- package/dist/components/myHomes/steps/NewHomeDetails.js +4 -4
- package/dist/components/myHomes/steps/index.d.ts +3 -0
- package/dist/components/myHomes/steps/index.js +3 -0
- package/dist/components/wizard/ControlledWizard.d.ts +1 -1
- package/dist/components/wizard/ControlledWizard.js +45 -8
- package/dist/hooks/myHomes/index.d.ts +1 -0
- package/dist/hooks/myHomes/index.js +1 -0
- package/dist/hooks/myHomes/useAddHomeContent.d.ts +1 -1
- package/dist/hooks/myHomes/useAddHomeContent.js +1 -1
- package/dist/hooks/myHomes/useConfirmProperty.d.ts +13 -0
- package/dist/hooks/myHomes/useConfirmProperty.js +37 -0
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/dist/interfaces/myHomes/AddHomeContent.interface.d.ts +1 -1
- package/dist/interfaces/myHomes/ConfirmProperty.interface.d.ts +27 -0
- package/dist/interfaces/myHomes/ConfirmProperty.interface.js +1 -0
- package/dist/interfaces/myHomes/index.d.ts +1 -0
- package/dist/interfaces/myHomes/index.js +1 -0
- package/dist/interfaces/wizard/ControlledWizard.interface.d.ts +12 -11
- package/dist/stories/wizard/ControlledWizard.stories.js +14 -5
- package/package.json +1 -1
|
@@ -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,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,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: ({
|
|
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,
|
|
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 = ({
|
|
11
|
-
const { handleErrorMessage, handleNameChange, handleNameValidation, handleSelectRecords,
|
|
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(
|
|
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,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
|
-
? {
|
|
11
|
-
|
|
12
|
-
|
|
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
|
-
|
|
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,6 +1,6 @@
|
|
|
1
1
|
import { ChangeEvent } from 'react';
|
|
2
2
|
import { HandleInputType, HomeFormI } from '../../interfaces';
|
|
3
|
-
export declare const useAddHouseContent: (values
|
|
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
|
|
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
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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: (
|
|
11
|
-
steps:
|
|
12
|
-
height?: string
|
|
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 {
|
|
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: (
|
|
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(
|
|
57
|
-
|
|
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." })),
|