@homefile/components-v2 2.39.22 → 2.39.23

package/dist/components/myHomes/steps/ConfirmHomeDetails.d.ts

@@ -0,0 +1,2 @@
+import { AddHomeContentI } from '../../../interfaces';
+export declare const ConfirmHomeDetails: ({ isLoading, handleCreateHomeClick, }: Pick<AddHomeContentI, "isLoading" | "handleCreateHomeClick">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myHomes/steps/ConfirmHomeDetails.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { t } from 'i18next';
+import { Button } from '@chakra-ui/react';
+import { useAddHouseContent } from '../../../hooks';
+export const ConfirmHomeDetails = ({ isLoading, handleCreateHomeClick, }) => {
+    const { handleSubmit } = useAddHouseContent(undefined, handleCreateHomeClick);
+    return (_jsx(Button, { onClick: handleSubmit, variant: "wizard", disabled: isLoading, children: t('buttons.confirm') }));
+};

package/dist/components/myHomes/steps/NewHomeDetails.d.ts

@@ -1,2 +1,2 @@
 import { AddHomeContentI } from '../../../interfaces';
-export declare const NewHomeDetails: ({ handleCreateHomeClick, values, isLoading, }: AddHomeContentI) => import("react/jsx-runtime").JSX.Element;
+export declare const NewHomeDetails: ({ values, isLoading }: AddHomeContentI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myHomes/steps/NewHomeDetails.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSnapshot } from 'valtio';
 import { t } from 'i18next';
-import { Stack, Center, Flex, Button, Divider, } from '@chakra-ui/react';
+import { Stack, Center, Divider } from '@chakra-ui/react';
 import { AddressStored, TextInput, IncludePublicRecords, WrapperWithShadow, } from '../../../components';
 import { firstHomeProxy } from '../../../proxies';
 import { useAddHouseContent } from '../../../hooks';
 import { BeatLoader } from 'react-spinners';
 import { up } from './MyHomeDetails';
-export const NewHomeDetails = ({ handleCreateHomeClick, values, isLoading, }) => {
-    const { handleErrorMessage, handleNameChange, handleNameValidation, handleSelectRecords, handleSubmit, } = useAddHouseContent(values, handleCreateHomeClick);
+export const NewHomeDetails = ({ values, isLoading }) => {
+    const { handleErrorMessage, handleNameChange, handleNameValidation, handleSelectRecords, } = useAddHouseContent(values);
     const { name, isNameValid, searchRecords } = useSnapshot(firstHomeProxy, {
         sync: true,
     });
-    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') })] }) }) })] }));
+    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 }) })] }));
 };

package/dist/components/myHomes/steps/index.d.ts

@@ -1,3 +1,4 @@
+export * from './ConfirmHomeDetails';
 export * from './ConfirmProperty';
 export * from './MyHomeDetails';
 export * from './MyHomesStepBody';

package/dist/components/myHomes/steps/index.js

@@ -1,3 +1,4 @@
+export * from './ConfirmHomeDetails';
 export * from './ConfirmProperty';
 export * from './MyHomeDetails';
 export * from './MyHomesStepBody';

package/dist/components/wizard/ControlledWizard.d.ts

@@ -1,2 +1,2 @@
 import { ControlledWizardI } from '../../interfaces';
-export declare function ControlledWizard({ bodyWidth, step, setStep, steps, height, headerBlink, }: ControlledWizardI): import("react/jsx-runtime").JSX.Element;
+export declare function ControlledWizard({ bodyWidth, step, setStep, steps, height, headerBlink, footerBlink, }: ControlledWizardI): import("react/jsx-runtime").JSX.Element;

package/dist/components/wizard/ControlledWizard.js

@@ -2,19 +2,56 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, Stack } from '@chakra-ui/react';
 import { AnimatePresence, motion } from 'framer-motion';
 const MotionBox = motion.create(typeof Box);
-export function ControlledWizard({ bodyWidth = '80%', step, setStep, steps, height = '700px', headerBlink, }) {
+export function ControlledWizard({ bodyWidth = '80%', step, setStep, steps, height = '700px', headerBlink, footerBlink, }) {
     const current = steps[step];
     const headerVariants = {
-        initial: { opacity: 0, y: 8 },
+        initial: { opacity: 0, y: 8, filter: 'blur(6px)' },
         animate: headerBlink
-            ? { opacity: [1, 0.55, 1], y: 0, transition: { duration: 0.28 } }
-            : { opacity: 1, y: 0, transition: { duration: 0.28 } },
-        exit: { opacity: 0, y: -8, transition: { duration: 0.18 } },
+            ? {
+                opacity: [1, 0.55, 1],
+                y: 0,
+                filter: 'blur(0px)',
+                transition: { duration: 0.28 },
+            }
+            : {
+                opacity: 1,
+                y: 0,
+                filter: 'blur(0px)',
+                transition: { duration: 0.24 },
+            },
+        exit: {
+            opacity: 0,
+            y: -8,
+            filter: 'blur(6px)',
+            transition: { duration: 0.18 },
+        },
     };
     const bodyVariants = {
         initial: { opacity: 0, y: 12, scale: 0.98 },
-        animate: { opacity: 1, y: 0, scale: 1 },
-        exit: { opacity: 0, y: -8, scale: 0.98 },
+        animate: { opacity: 1, y: 0, scale: 1, transition: { duration: 0.22 } },
+        exit: { opacity: 0, y: -8, scale: 0.98, transition: { duration: 0.18 } },
     };
-    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}`) })] }));
+    const footerVariants = {
+        initial: { opacity: 0, y: 12, filter: 'blur(6px)' },
+        animate: footerBlink
+            ? {
+                opacity: [1, 0.6, 1],
+                y: 0,
+                filter: 'blur(0px)',
+                transition: { duration: 0.28 },
+            }
+            : {
+                opacity: 1,
+                y: 0,
+                filter: 'blur(0px)',
+                transition: { duration: 0.24 },
+            },
+        exit: {
+            opacity: 0,
+            y: 12,
+            filter: 'blur(6px)',
+            transition: { duration: 0.18 },
+        },
+    };
+    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}`) }))] }));
 }

package/dist/hooks/myHomes/useAddHomeContent.d.ts

@@ -1,6 +1,6 @@
 import { ChangeEvent } from 'react';
 import { HandleInputType, HomeFormI } from '../../interfaces';
-export declare const useAddHouseContent: (values: HomeFormI | undefined, callback: (form: HomeFormI) => void) => {
+export declare const useAddHouseContent: (values?: HomeFormI | undefined, callback?: (form: HomeFormI) => void) => {
     handleErrorMessage: () => string;
     handleLinkChange: HandleInputType;
     handleNameChange: HandleInputType;

package/dist/hooks/myHomes/useAddHomeContent.js

@@ -53,7 +53,7 @@ export const useAddHouseContent = (values, callback) => {
         handleValidation('number');
         handleValidation('zip');
         if (!hasError && firstHome.isNameValid) {
-            callback(Object.assign(Object.assign({}, fields), { externalLink: firstHome.externalLink, name: firstHome.name, isOwner: firstHome.isOwner, searchRecords: firstHome.searchRecords }));
+            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 }));
             cleanStores();
             resetValidations();
         }

package/dist/interfaces/myHomes/AddHomeContent.interface.d.ts

@@ -13,7 +13,7 @@ export interface HomeAddressDataI {
 }
 export interface AddHomeContentI {
     handleAddress?: (id: string) => void;
-    handleCreateHomeClick: (form: HomeFormI) => void;
+    handleCreateHomeClick?: (form: HomeFormI) => void;
     handleSkipClick?: () => void;
     isFirstHome?: boolean;
     isLoading?: boolean;

package/dist/interfaces/wizard/ControlledWizard.interface.d.ts

@@ -1,15 +1,16 @@
-import { ReactNode } from 'react';
-export type WizardStep = {
-    header: ReactNode;
-    body: (api: {
-        setStep: (i: number) => void;
-    }) => ReactNode;
-};
+export interface ControlledWizardStepI {
+    header: React.ReactNode;
+    body: (args: {
+        setStep: (n: number) => void;
+    }) => React.ReactNode;
+    footer?: React.ReactNode;
+}
 export interface ControlledWizardI {
+    bodyWidth?: string;
     step: number;
-    setStep: (i: number) => void;
-    steps: WizardStep[];
-    height?: string | number;
-    bodyWidth?: string | number;
+    setStep: (n: number) => void;
+    steps: ControlledWizardStepI[];
+    height?: string;
     headerBlink?: boolean;
+    footerBlink?: boolean;
 }

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

@@ -9,7 +9,7 @@ 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, SearchRecords, WizardTextHeader, WizardSuccessHeader, WizardValueSummary, NewHomeDetails, } from '../../components';
+import { ConfirmProperty, ControlledWizard, DynamicForm, FooterButtons, HomeAssistantTutorial, HomeAssistantWizardSteps, SearchRecords, WizardTextHeader, WizardSuccessHeader, WizardValueSummary, NewHomeDetails, ConfirmHomeDetails, } from '../../components';
 import { Box, Center, Stack } from '@chakra-ui/react';
 import { action } from '@storybook/addon-actions';
 import { assessedValueMock, homeWizardForm, propertiesMock, purchasePriceMock, } from '../../mocks';
@@ -41,10 +41,12 @@ export const ControlledWizardComponent = () => {
     return (_jsx(ControlledWizard, { height: "700px", step: step, setStep: setStep, steps: [
             {
                 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." })),
-                body: ({ setStep }) => (_jsx(NewHomeDetails, { values: formValues, handleCreateHomeClick: (values) => __awaiter(void 0, void 0, void 0, function* () {
+                body: ({ setStep }) => _jsx(NewHomeDetails, { values: formValues }),
+                footer: (_jsx(ConfirmHomeDetails, { handleCreateHomeClick: (values) => __awaiter(void 0, void 0, void 0, function* () {
                         setStep(1);
                         yield fakeLookup();
                         setStep(2);
+                        action('Create Home Click')(values);
                     }) })),
             },
             {

package/package.json

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