@homefile/components-v2 2.59.2 → 2.60.0

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

@@ -7,13 +7,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { ControlledWizard, DynamicForm, FooterButtons, HomeAssistantTutorial, HomeAssistantWizardSteps, SearchRecords, WizardTextHeader, WizardSuccessHeader, NewHomeDetails, ConfirmHomeDetails, ConfirmPropertyBody, ConfirmPropertyFooter, WizardValueSummaryBody, WizardValueSummaryFooter, WizardBodyPadding, ConfirmPropertyRecords, } from '../../components';
-import { Box, Center, Flex } from '@chakra-ui/react';
+import { ControlledWizard, ConfirmHomeDetails, ConfirmPropertyBody, ConfirmPropertyFooter, SearchRecords, TextInput, WizardBodyPadding, WizardValueSummaryBody, WizardValueSummaryFooter, } from '../../components';
+import { Box, Center, Checkbox, Collapse, Flex, Stack, Text, useDisclosure, } from '@chakra-ui/react';
 import { action } from '@storybook/addon-actions';
-import { assessedValueMock, homeWizardForm, propertiesMock, purchasePriceMock, } from '../../mocks';
-import { formValues } from '../../helpers';
+import { Button } from '../../components/button/Button';
+import { assessedValueMock, propertiesMock, purchasePriceMock } from '../../mocks';
 import { useConfirmPropertyModel } from '../../hooks';
 export default {
     title: 'Components/Wizard/ControlledWizard',
@@ -25,80 +25,61 @@ export default {
 function fakeLookup() {
     return new Promise((r) => setTimeout(r, 1500));
 }
+/** Conversational (Typeform) step header — a step marker, a bold left-aligned
+ *  Homi prompt, and an optional supporting line. Composed from Text tokens. */
+const ConvHeader = ({ marker, title, subtitle, }) => (_jsxs(Stack, { spacing: "3", pt: "2", children: [_jsx(Text, { fontFamily: "primary", fontWeight: "semibold", fontSize: "sm", color: "blue.2", children: marker }), _jsx(Text, { fontFamily: "primary", fontWeight: "bold", fontSize: { base: '3xl', md: '4xl' }, lineHeight: "1.1", color: "gray.4", children: title }), subtitle && (_jsx(Text, { fontFamily: "secondary", fontSize: "lg", color: "gray.2", children: subtitle }))] }));
+/**
+ * Conversational New-Home setup flow, composed from existing components:
+ *   1 Address (+ trimmed consent)  → conversational TextInput + Checkbox/Collapse
+ *   2 Searching                    → SearchRecords
+ *   3 Confirm the record           → ConfirmPropertyBody
+ *   4 Reveal + name (editable)     → TextInput + WizardValueSummaryBody
+ *   5 Success / hand-off           → conversational, "Help me learn the basics →"
+ * Bold left headlines, white throughout, directional (Typeform) transition.
+ */
 export const ControlledWizardComponent = () => {
     const [step, setStep] = useState(0);
+    const [homeName, setHomeName] = useState('The Edmunds');
+    const [address, setAddress] = useState('1240 Edmunds Way, Austin TX 78732');
+    const [records, setRecords] = useState(true);
+    const { isOpen: dataOpen, onToggle: toggleData } = useDisclosure();
     const confirmModel = useConfirmPropertyModel({
         properties: propertiesMock,
-        handleAddress: (address) => {
-            action('Handle Address')(address);
-            setStep(step + 1);
-        },
+        handleAddress: () => { },
     });
-    const homeAssistantSteps = homeWizardForm.map((form, index) => ({
-        header: _jsx(HomeAssistantWizardSteps, { currentStep: index + 1 }),
-        body: () => (_jsx(Box, { pt: "4", children: _jsx(DynamicForm, { form: [form], showTitle: false, callback: action('DynamicForm') }) })),
-        footer: (_jsx(Flex, { w: "full", justify: "flex-end", children: _jsx(Box, { children: _jsx(FooterButtons, { button1: {
-                        buttonStyle: 'secondaryFooter',
-                        onClick: () => setStep(step - 1),
-                        label: 'Back',
-                    }, button2: {
-                        buttonStyle: 'tertiaryFooter',
-                        onClick: () => setStep(step + 1),
-                        isDisabled: step === homeWizardForm.length + 4,
-                        label: 'Next',
-                    } }) }) })),
-    }));
-    return (_jsx(ControlledWizard, { height: "710px", step: step, setStep: setStep, steps: [
+    return (_jsx(ControlledWizard, { height: "710px", transition: "directional", step: step, setStep: setStep, steps: [
+            // 1 — Address (+ trimmed consent). Name captured at the reveal.
             {
-                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: () => (_jsx(WizardBodyPadding, { children: _jsx(NewHomeDetails, { values: formValues }) })),
+                header: _jsx(Box, {}),
+                body: () => (_jsx(WizardBodyPadding, { children: _jsxs(Stack, { spacing: "7", align: "stretch", children: [_jsx(ConvHeader, { marker: "1 \u2192", title: "Hi John \u2014 let\u2019s set up your Homefile.", subtitle: "I\u2019ll handle the parts that usually blindside homeowners. First, what\u2019s your home address?" }), _jsx(TextInput, { variant: "conversational", id: "address", placeholder: "Start typing your address\u2026", value: address, handleChange: (e) => setAddress(e.target.value) }), _jsxs(Stack, { spacing: "2", children: [_jsx(Checkbox, { isChecked: records, onChange: (e) => setRecords(e.target.checked), children: _jsx(Text, { fontFamily: "secondary", children: "Let me pull public records for this home." }) }), _jsxs(Box, { pl: "6", children: [_jsxs(Text, { as: "button", type: "button", onClick: toggleData, fontFamily: "secondary", fontWeight: "semibold", fontSize: "sm", color: "blue.2", children: ["How I use this data ", dataOpen ? '⌃' : '⌄'] }), _jsx(Collapse, { in: dataOpen, children: _jsx(Text, { fontFamily: "secondary", fontSize: "sm", color: "gray.2", pt: "2", children: "Only to verify your property details, surface insights tied to taxes and value, and keep your home profile accurate \u2014 with no extra work from you." }) })] })] })] }) })),
                 footer: (_jsx(ConfirmHomeDetails, { handleCreateHomeClick: (values) => __awaiter(void 0, void 0, void 0, function* () {
                         setStep(1);
                         yield fakeLookup();
-                        setStep(3);
+                        setStep(2);
                         action('Create Home Click')(values);
                     }) })),
             },
+            // 2 — Searching public records
             {
-                header: (_jsx(WizardTextHeader, { bg: "lightViolet.1", title: `We can’t build your home’s care plan \n without your property records.`, subtitle: "Without them, we can\u2019t establish the baseline required to prioritize care accurately. Connecting public records lets Homefile do the heavy lifting and reduce what I need to ask you for later." })),
-                body: () => (_jsx(WizardBodyPadding, { children: _jsx(ConfirmPropertyRecords, { title: "How we use public property records?", subtitle: "We use it to verify your property details, surface insights tied to taxes and value, and personalize recommendations and keep your home profile accurate with no extra work for you.", options: [
-                            {
-                                id: 'add',
-                                label: 'Add public property records to your home.',
-                            },
-                            {
-                                id: 'skip',
-                                label: 'Skip for now',
-                            },
-                        ], onChange: (id) => {
-                            action('ConfirmPropertyRecords onChange')(id);
-                        } }) })),
-                footer: (_jsx(ConfirmPropertyFooter, { isWizard: true, onContinue: confirmModel.handleContinue, isLoading: false, label: "Continue" })),
+                header: _jsx(Box, {}),
+                body: () => (_jsx(WizardBodyPadding, { children: _jsxs(Stack, { spacing: "8", children: [_jsx(ConvHeader, { marker: "2 \u2192", title: "One moment \u2014 I\u2019m searching public records.", subtitle: "This is the part homeowners usually spend hours hunting down. I do it automatically." }), _jsx(SearchRecords, { isWizard: true })] }) })),
             },
+            // 3 — Confirm the matching record
             {
-                header: (_jsx(WizardTextHeader, { title: "One moment while we search public records\u2026" })),
-                body: () => _jsx(SearchRecords, { isWizard: true }),
+                header: _jsx(Box, {}),
+                body: () => (_jsx(WizardBodyPadding, { children: _jsxs(Stack, { spacing: "7", children: [_jsx(ConvHeader, { marker: "3 \u2192", title: "Which one is your home?", subtitle: "Picking the right record lets me lock your verified data, so you never have to enter it again." }), _jsx(ConfirmPropertyBody, { isWizard: true, properties: confirmModel.propertiesWithNoneOfTheAbove, currentProperty: confirmModel.currentProperty, onChange: confirmModel.setCurrentProperty, footerText: confirmModel.footerText })] }) })),
+                footer: (_jsx(ConfirmPropertyFooter, { isWizard: true, onContinue: () => setStep(3), isLoading: false, label: "Confirm" })),
             },
+            // 4 — Reveal + name the home (moved here, editable)
             {
-                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." })),
-                body: () => (_jsx(WizardBodyPadding, { children: _jsx(ConfirmPropertyBody, { isWizard: true, properties: confirmModel.propertiesWithNoneOfTheAbove, currentProperty: confirmModel.currentProperty, onChange: confirmModel.setCurrentProperty, footerText: confirmModel.footerText }) })),
-                footer: (_jsx(ConfirmPropertyFooter, { isWizard: true, onContinue: confirmModel.handleContinue, isLoading: false, label: "Confirm" })),
+                header: _jsx(Box, {}),
+                body: () => (_jsx(WizardBodyPadding, { children: _jsxs(Stack, { spacing: "7", children: [_jsx(ConvHeader, { marker: "4 \u2192", title: "Here\u2019s what I found on your home.", subtitle: "Public data can be incomplete or dated \u2014 you can fix anything inside your Homefile." }), _jsx(TextInput, { variant: "conversational", id: "homeName", placeholder: "Name this home", value: homeName, handleChange: (e) => setHomeName(e.target.value) }), _jsx(WizardValueSummaryBody, { title: "", address: "1240 Edmunds Way, Austin TX 78732", estimatedValue: 642000, purchasePrice: 540000, assessedValue: 598400, purchasePriceDetails: purchasePriceMock, assessedValueDetails: assessedValueMock })] }) })),
+                footer: (_jsx(WizardValueSummaryFooter, { onAccurate: () => setStep(4), onNotAccurate: () => setStep(4), onComplete: () => setStep(4), accuracyStatus: null })),
             },
+            // 5 — Success / hand-off (conversational)
             {
-                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." })),
-                body: (args) => (_jsx(WizardBodyPadding, { children: _jsx(WizardValueSummaryBody, { title: "The Edmunds", address: "113 South First Street, Austin TX 89853", estimatedValue: 894000, purchasePrice: 456432, assessedValue: 726678, purchasePriceDetails: purchasePriceMock, assessedValueDetails: assessedValueMock }) })),
-                footer: (_jsx(WizardValueSummaryFooter, { onAccurate: () => setStep(step + 1), onNotAccurate: () => setStep(step + 1), onComplete: () => setStep(step + 1), accuracyStatus: null })),
+                header: _jsx(Box, {}),
+                body: () => (_jsx(WizardBodyPadding, { children: _jsxs(Stack, { spacing: "6", align: "stretch", children: [_jsxs(Stack, { spacing: "3", pt: "2", children: [_jsx(Text, { fontFamily: "primary", fontWeight: "semibold", fontSize: "sm", color: "green.1", children: "\u2713 Success" }), _jsx(Text, { fontFamily: "primary", fontWeight: "bold", fontSize: { base: '3xl', md: '4xl' }, lineHeight: "1.1", color: "gray.4", children: "Your Homefile is active." }), _jsx(Text, { fontFamily: "secondary", fontSize: "lg", color: "gray.2", children: "Now help me learn a few basics about your home \u2014 that\u2019s how I start looking out for you." })] }), _jsx(Box, { border: "1px solid", borderColor: "lightBlue.3", borderRadius: "lg", p: "4", children: _jsxs(Flex, { gap: "4", align: "center", children: [_jsx(Center, { w: "96px", h: "72px", borderRadius: "md", bg: "lightBlue.2", flexShrink: 0, children: _jsx(Box, { w: "0", h: "0", borderLeft: "26px solid transparent", borderRight: "26px solid transparent", borderBottom: "26px solid", borderBottomColor: "#C69A6B" }) }), _jsxs(Box, { children: [_jsx(Text, { fontFamily: "secondary", fontSize: "xs", color: "gray.2", textTransform: "uppercase", letterSpacing: "wider", children: "Your home" }), _jsx(Text, { fontFamily: "primary", color: "gray.4", children: address })] })] }) }), _jsx(Text, { fontFamily: "secondary", fontSize: "lg", color: "gray.2", children: "The more I know, the sooner I can warn you before things fail, track your warranties, and tell you what to do next. Takes a minute." }), _jsx(Box, { children: _jsx(Button, { onClick: () => action('Help me learn the basics')(), children: "Help me learn the basics \u2192" }) }), _jsx(Text, { as: "button", type: "button", onClick: () => action('Skip for now')(), fontFamily: "secondary", fontWeight: "semibold", color: "blue.2", alignSelf: "flex-start", children: "Skip for now, go to my Homefile" })] }) })),
             },
-            {
-                header: (_jsx(WizardSuccessHeader, { title: "Your Homefile is live.", subtitle: "Now let\u2019s set up Homi so you never guess, never search, and never get blindsided again.", address: {
-                        city: 'Austin',
-                        state: 'Texas',
-                        street: 'Ronald Regan long name st here',
-                        number: '123',
-                        zip: '80123',
-                    }, name: "your home" })),
-                body: () => (_jsx(Center, { h: "full", children: _jsx(HomeAssistantTutorial, { onStart: () => setStep(step + 1) }) })),
-            },
-            ...homeAssistantSteps,
         ] }));
 };

package/dist/theme/index.d.ts

@@ -1,4 +1,7 @@
 import '@fontsource/assistant';
+import '@fontsource/assistant/700.css';
 import '@fontsource/poppins';
+import '@fontsource/poppins/500.css';
+import '@fontsource/poppins/600.css';
 declare const theme: Record<string, any>;
 export default theme;

package/dist/theme/index.js

@@ -1,5 +1,8 @@
 import '@fontsource/assistant';
+import '@fontsource/assistant/700.css';
 import '@fontsource/poppins';
+import '@fontsource/poppins/500.css';
+import '@fontsource/poppins/600.css';
 import { extendTheme } from '@chakra-ui/react';
 import { Button, Checkbox, Container, Drawer, Input, Progress, Select, Switch, Text, Tooltip, Textarea, } from './components';
 import { colors } from './colors';
@@ -90,10 +93,10 @@ const theme = extendTheme({
         },
     },
     fonts: {
-        primary: 'Poppins',
-        secondary: 'Assistant',
-        timesNewRoman: 'Times New Roman',
-        helvetica: 'Helvetica',
+        primary: 'Poppins, system-ui, sans-serif',
+        secondary: 'Assistant, system-ui, sans-serif',
+        timesNewRoman: '"Times New Roman", serif',
+        helvetica: 'Helvetica, Arial, sans-serif',
     },
     letterSpacings: {
         tighter: '-0.05em',

package/dist/utils/Formaters.utils.d.ts

@@ -29,6 +29,8 @@ export declare const formatISODate: (value: string) => string;
 export declare const toQuantity: (q: string | number | null | undefined) => number | "";
 export declare const formatCurrency: ({ country, currrency, value, }: FormatCurrencyI) => string;
 export declare const formatCurrencyWithoutDigits: ({ country, currrency, value, }: FormatCurrencyI) => string;
+export declare const toPhoneDigits: (value?: string | number) => string;
+export declare const formatPhone: (value?: string | number) => string;
 export declare const formatNumber: (value: string | number) => string | 0;
 export declare const formatRoundedNumber: (value: string | number) => string | 0;
 export declare const capitalize: (label: string) => string;

package/dist/utils/Formaters.utils.js

@@ -156,6 +156,20 @@ export const formatCurrencyWithoutDigits = ({ country = 'en-US', currrency = 'US
     });
     return formatter;
 };
+// Strip a phone value down to at most 10 digits — the canonical stored/
+// validated form (formatting is display-only).
+export const toPhoneDigits = (value) => String(value !== null && value !== void 0 ? value : '')
+    .replace(/\D/g, '')
+    .slice(0, 10);
+// Display a US phone number as `XXX.XXX.XXXX` (formats partial input as typed).
+export const formatPhone = (value) => {
+    const digits = toPhoneDigits(value);
+    if (digits.length <= 3)
+        return digits;
+    if (digits.length <= 6)
+        return `${digits.slice(0, 3)}.${digits.slice(3)}`;
+    return `${digits.slice(0, 3)}.${digits.slice(3, 6)}.${digits.slice(6)}`;
+};
 export const formatNumber = (value) => {
     if (value) {
         return new Intl.NumberFormat('en-US').format(Number(value));

package/dist/utils/Weather.utils.js

@@ -1,6 +1,6 @@
 import { parseISO, format } from 'date-fns';
 export function mapForecastToWidget(periods, location) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if (!periods.length)
         return {};
     // --- HEADER DATE ---
@@ -11,12 +11,19 @@ export function mapForecastToWidget(periods, location) {
     const night0 = (_c = (_b = periods.find((p) => !p.isDaytime &&
         format(parseISO(p.startTime), 'yyyy-MM-dd') ===
             format(parseISO(day0.startTime), 'yyyy-MM-dd'))) !== null && _b !== void 0 ? _b : periods.find((p) => !p.isDaytime)) !== null && _c !== void 0 ? _c : day0;
-    const currentTemp = day0.temperature;
-    const currentIcon = day0.icon;
+    // Current conditions must reflect the ACTUAL time of day, picked up on load:
+    // choose the period that contains "now" (the most recent period whose start is
+    // at/-before now) rather than always the first daytime period. So an evening
+    // load lands on the "Tonight" period → its temp + a night icon, not the day's
+    // high + a sun. High/Low stay day0/night0 (today's day/night).
+    const now = new Date();
+    const nowPeriod = (_d = periods.filter((p) => parseISO(p.startTime) <= now).slice(-1)[0]) !== null && _d !== void 0 ? _d : day0;
+    const currentTemp = nowPeriod.temperature;
+    const currentIcon = nowPeriod.icon;
     const highTemp = day0.temperature;
     const lowTemp = night0.temperature;
     // --- DETAILS ---
-    const precipitation = (_d = day0.probabilityOfPrecipitation.value) !== null && _d !== void 0 ? _d : 0;
+    const precipitation = (_e = day0.probabilityOfPrecipitation.value) !== null && _e !== void 0 ? _e : 0;
     const wind = `${day0.windDirection} ${day0.windSpeed}`;
     const humidity = undefined;
     // --- 5-DAY FORECAST ---

package/package.json

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