@homefile/components-v2 2.32.0 → 2.34.0

package/src/mocks/forms/dynamicForm.mock.ts

@@ -1309,3 +1309,367 @@ export const homeItemDetails: ReportI[] = [
     icon: 'barcode',
   },
 ]
+
+export const homeWizardForm: ReportI[] = [
+  {
+    type: 'home-wizard',
+    id: 'home-wizard-1',
+    children: [
+      {
+        type: 'home-wizard-header',
+        id: 'home-wizard-header-1',
+        label: '1. Tell Homi about your goals.',
+        description:
+          'These choices help Homi build a personalized Homeboard that tracks your home’s performance, savings, and priorities.',
+        value: '',
+      },
+      {
+        type: 'home-wizard-initial-setup',
+        id: 'home-wizard-initial-setup-1',
+        value: 'What do you want Homie to help you with?',
+        children: [
+          {
+            id: 'maintenance',
+            type: 'text',
+            label: 'Maintenance',
+            value: false,
+            description:
+              'Stay ahead of maintenance and upkeep to avoid costly repairs.',
+            icon: 'gear',
+          },
+          {
+            id: 'documentation',
+            type: 'text',
+            label: 'documentation',
+            value: false,
+            description:
+              'Keep receipts, warranties, and records organized and accessible.',
+            icon: 'folder',
+          },
+          {
+            id: 'finance',
+            type: 'text',
+            label: 'Finance',
+            value: false,
+            description:
+              'Monitor spending, uncover savings, and plan smarter budgets.',
+            icon: 'check',
+          },
+          {
+            id: 'service-pros',
+            type: 'text',
+            label: 'Service Pros',
+            value: false,
+            description:
+              'Find trusted pros with upfront pricing and verified quality.',
+            icon: 'search-person',
+          },
+          {
+            id: 'improvements',
+            type: 'text',
+            label: 'Improvements',
+            value: false,
+            description:
+              'Track upgrades, costs, and ROI to grow your home’s worth.',
+            icon: 'flower',
+          },
+          {
+            id: 'insurance',
+            type: 'text',
+            label: 'Insurance',
+            value: false,
+            description:
+              'Verify insurance and warranties so nothing important slips through.',
+            icon: 'warranty',
+          },
+        ],
+      },
+    ],
+    value: true,
+  },
+  {
+    type: 'home-wizard',
+    id: 'home-wizard-2',
+    children: [
+      {
+        type: 'home-wizard-header',
+        id: 'home-wizard-header-2',
+        label: '2. Tell Homi about your fire safety.',
+        description:
+          'Homi tracks your safety devices, reminds you to test or replace them, and helps you keep your home protected year-round.',
+        value: '',
+      },
+      {
+        type: 'home-wizard-step-options',
+        id: 'home-wizard-step-options-1',
+        value: 'Select what fire protection you have in your home?',
+        children: [
+          {
+            id: 'smoke-detectors',
+            type: 'text',
+            label: 'WIRED SMOKE DET',
+            value: false,
+            icon: 'wired-smoke-detector',
+          },
+          {
+            id: 'battery-smoke-detectors',
+            type: 'text',
+            label: 'BATTERY SMOKE DET',
+            value: false,
+            icon: 'battery-smoke-detector',
+          },
+          {
+            id: 'co2-detectors',
+            type: 'text',
+            label: 'CO2 DETECTORS',
+            value: false,
+            icon: 'co2-detector',
+          },
+          {
+            id: 'sprinkler-system',
+            type: 'text',
+            label: 'SPRINKLER SYSTEM',
+            value: false,
+            icon: 'sprinkler-system',
+          },
+          {
+            id: 'fire-extinguisher',
+            type: 'text',
+            label: 'FIRE EXTINGUISHER',
+            value: false,
+            icon: 'fire-extinguisher',
+          },
+
+          {
+            id: 'other-not-listed',
+            type: 'text',
+            label: 'OTHER/NOT LISTED',
+            value: false,
+            icon: 'other',
+          },
+        ],
+      },
+    ],
+    value: true,
+  },
+  {
+    type: 'home-wizard',
+    id: 'home-wizard-3',
+    children: [
+      {
+        type: 'home-wizard-header',
+        id: 'home-wizard-header-3',
+        label: '3. Tell Homi about your appliances.',
+        description:
+          'Homi monitors warranties, service schedules, and replacement timing to help you extend lifespan and avoid costly breakdowns.',
+        value: '',
+      },
+      {
+        type: 'home-wizard-step-options',
+        id: 'home-wizard-step-options-1',
+        value: 'Select the appliances you have in your home.',
+        children: [
+          {
+            id: 'oven',
+            type: 'text',
+            label: 'OVEN',
+            value: false,
+            icon: 'oven',
+          },
+          {
+            id: 'fridge',
+            type: 'text',
+            label: 'FRIDGE',
+            value: false,
+            icon: 'fridge',
+          },
+          {
+            id: 'freezer',
+            type: 'text',
+            label: 'FREEZER',
+            value: false,
+            icon: 'freezer',
+          },
+          {
+            id: 'washer',
+            type: 'text',
+            label: 'WASHER',
+            value: false,
+            icon: 'washer',
+          },
+          {
+            id: 'dryer',
+            type: 'text',
+            label: 'DRYER',
+            value: false,
+            icon: 'dryer',
+          },
+          {
+            id: 'dish-washer',
+            type: 'text',
+            label: 'DISH WASHER',
+            value: false,
+            icon: 'dish-washer',
+          },
+          {
+            id: 'range',
+            type: 'text',
+            label: 'RANGE',
+            value: false,
+            icon: 'range',
+          },
+          {
+            id: 'hood',
+            type: 'text',
+            label: 'HOOD',
+            value: false,
+            icon: 'hood',
+          },
+          {
+            id: 'microwave',
+            type: 'text',
+            label: 'MICROWAVE',
+            value: false,
+            icon: 'microwave',
+          },
+          {
+            id: 'cook-top',
+            type: 'text',
+            label: 'COOK TOP',
+            value: false,
+            icon: 'cook-top',
+          },
+          {
+            id: 'tankless-waterhtr',
+            type: 'text',
+            label: 'TANKLESS WATERHTR',
+            value: false,
+            icon: 'tankless-water',
+          },
+          {
+            id: 'tank-waterhtr',
+            type: 'text',
+            label: 'TANK WATERHTR',
+            value: false,
+            icon: 'tank-water',
+          },
+        ],
+      },
+    ],
+    value: true,
+  },
+  {
+    type: 'home-wizard',
+    id: 'home-wizard-4',
+    children: [
+      {
+        type: 'home-wizard-header',
+        id: 'home-wizard-header-4',
+        label: '4. Tell Homi about your climate control.',
+        description:
+          'Homi manages filter changes, tune-ups, and efficiency tips to keep your system running smoothly and lower energy costs.',
+        value: '',
+      },
+      {
+        type: 'home-wizard-step-options',
+        id: 'home-wizard-step-options-1',
+        value: 'What heating and cooling devices in your home:',
+        children: [
+          {
+            id: 'hvac-furnace',
+            type: 'text',
+            label: 'HVAC/ FURNACE',
+            value: false,
+            icon: 'furnace',
+          },
+          {
+            id: 'heat-pump',
+            type: 'text',
+            label: 'HEAT PUMP',
+            value: false,
+            icon: 'heat-pump',
+          },
+          {
+            id: 'in-wall',
+            type: 'text',
+            label: 'IN-WALL',
+            value: false,
+            icon: 'in-wall',
+          },
+          {
+            id: 'other-not-listed',
+            type: 'text',
+            label: 'OTHER/NOT LISTED',
+            value: false,
+            icon: 'other',
+          },
+        ],
+      },
+    ],
+    value: true,
+  },
+  {
+    type: 'home-wizard',
+    id: 'home-wizard-5',
+    children: [
+      {
+        type: 'home-wizard-header',
+        id: 'home-wizard-header-5',
+        label: '5. Tell Homi about your landscape.',
+        description:
+          'Homi tracks outdoor systems, plans seasonal care, and helps protect your home’s curb appeal and investment.',
+        value: '',
+      },
+      {
+        type: 'home-wizard-step-options',
+        id: 'home-wizard-step-options-1',
+        value: 'Select the types of structure elements of your home:',
+        children: [
+          {
+            id: 'pool',
+            type: 'text',
+            label: 'POOL',
+            value: false,
+            icon: 'pool',
+          },
+          {
+            id: 'jacuzzi',
+            type: 'text',
+            label: 'JACUZZI',
+            value: false,
+            icon: 'jacuzzi',
+          },
+          {
+            id: 'sprinkler-system',
+            type: 'text',
+            label: 'SPRINKLER SYSTEM',
+            value: false,
+            icon: 'sprinkler-system2',
+          },
+          {
+            id: 'landscape-lights',
+            type: 'text',
+            label: 'LANDSCAPE LIGHTS',
+            value: false,
+            icon: 'landscape-lights',
+          },
+          {
+            id: 'outdoor-kitchen',
+            type: 'text',
+            label: 'OUTDOOR KITCHEN',
+            value: false,
+            icon: 'cook-top',
+          },
+          {
+            id: 'other-not-listed',
+            type: 'text',
+            label: 'OTHER/NOT LISTED',
+            value: false,
+            icon: 'other',
+          },
+        ],
+      },
+    ],
+    value: true,
+  },
+]

package/src/stories/assets/Illustrations.stories.tsx

@@ -63,6 +63,7 @@ import {
   Finance,
   Fire,
   Flag,
+  Flower,
   Flooring,
   FormSent,
   Foundation,
@@ -92,6 +93,7 @@ import {
   ImgIcon,
   Inbox,
   Insect,
+  Jacuzzi,
   Kitchen,
   LargeAppliances,
   Laundry,
@@ -100,6 +102,7 @@ import {
   LivingRoom,
   LogoSmall,
   MagnifyingGlassReport,
+  MagnifyingGlassPerson,
   Manager,
   MasterBedroom,
   Mattress,
@@ -203,8 +206,24 @@ import {
   Oven,
   Range,
   Washer,
+  tankWater,
+  tanklessWater,
 } from '@/assets/images/appliances'
 
+import {
+  BatterySmokeDetector,
+  Co2Detector,
+  FireExtinguisher,
+  Furnace,
+  HeatPump,
+  InWall,
+  LandscapeLights,
+  Other,
+  SprinklerSystem,
+  SprinklerSystem2,
+  WiredSmokeDetector,
+} from '@/assets/images/home-assistant'
+
 export default {
   title: 'Assets/Illustrations',
 } as Meta
@@ -227,6 +246,22 @@ export const Illustrations = () => {
       <IconWrapper icon={Oven} name="Oven" />
       <IconWrapper icon={Range} name="Range" />
       <IconWrapper icon={Washer} name="Washer" />
+      <IconWrapper icon={tankWater} name="TankWater" />
+      <IconWrapper icon={tanklessWater} name="TanklessWater" />
+
+      {/* All from @/assets/images/home-assistant */}
+      <IconWrapper icon={BatterySmokeDetector} name="BatterySmokeDetector" />
+      <IconWrapper icon={Co2Detector} name="Co2Detector" />
+      <IconWrapper icon={FireExtinguisher} name="FireExtinguisher" />
+      <IconWrapper icon={Furnace} name="Furnace" />
+      <IconWrapper icon={HeatPump} name="HeatPump" />
+      <IconWrapper icon={InWall} name="InWall" />
+      <IconWrapper icon={Jacuzzi} name="Jacuzzi" />
+      <IconWrapper icon={LandscapeLights} name="LandscapeLights" />
+      <IconWrapper icon={Other} name="Other" />
+      <IconWrapper icon={SprinklerSystem} name="SprinklerSystem" />
+      <IconWrapper icon={SprinklerSystem2} name="SprinklerSystem2" />
+      <IconWrapper icon={WiredSmokeDetector} name="WiredSmokeDetector" />
       {/* All from @/assets/images/form */}
       <IconWrapper icon={Barcode} name="Barcode" />
       <IconWrapper icon={Book} name="Book" />
@@ -323,6 +358,7 @@ export const Illustrations = () => {
       <IconWrapper icon={FileUploading} name="FileUploading" />
       <IconWrapper icon={Finance} name="Finance" />
       <IconWrapper icon={Flag} name="Flag" />
+      <IconWrapper icon={Flower} name="Flower" />
       <IconWrapper icon={FormSent} name="FormSent" />
       <IconWrapper icon={Foundation} name="Foundation" />
       <IconWrapper icon={Garage} name="Garage" />
@@ -353,6 +389,7 @@ export const Illustrations = () => {
       <IconWrapper icon={LivingRoom} name="LivingRoom" />
       <IconWrapper icon={LogoSmall} name="LogoSmall" />
       <IconWrapper icon={MagnifyingGlassReport} name="MagnifyingGlassReport" />
+      <IconWrapper icon={MagnifyingGlassPerson} name="MagnifyingGlassPerson" />
       <IconWrapper icon={Manager} name="Manager" />
       <IconWrapper icon={MasterBedroom} name="MasterBedroom" />
       <IconWrapper icon={Member} name="Member" />

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

@@ -1,19 +1,20 @@
+import { useState } from 'react'
 import { Meta } from '@storybook/react'
 import {
   ConfirmProperty,
   ControlledWizard,
+  DynamicForm,
   FooterButtons,
   HomeAssistantTutorial,
   HomeAssistantWizardSteps,
   MyHomeDetails,
   SearchRecords,
-  WizardTextBody,
   WizardTextHeader,
 } from '@/components'
 import { Box, Center, Stack } from '@chakra-ui/react'
-import { useState } from 'react'
+import { action } from '@storybook/addon-actions'
 import { formValues } from '@/helpers'
-import { propertiesMock } from '@/mocks'
+import { homeWizardForm, propertiesMock } from '@/mocks'
 import { ControlledWizardI, HomeFormI } from '@/interfaces'
 import { WizardSuccessHeader } from '@/components/wizard/WizardSuccessHeader'
 
@@ -35,46 +36,45 @@ function fakeLookup() {
 
 export const ControlledWizardComponent = () => {
   const [step, setStep] = useState(0)
+  const homeAssistantSteps = homeWizardForm.map((form, index) => ({
+    header: <HomeAssistantWizardSteps currentStep={index + 1} />,
+    body: () => (
+      <Stack
+        h="full"
+        spacing="10"
+        w={{ base: 'full', md: '600px' }}
+        justify="space-around"
+        m="auto"
+      >
+        <DynamicForm
+          form={[form]}
+          showTitle={false}
+          callback={action('DynamicForm')}
+        />
+        <Box alignSelf="flex-end">
+          <FooterButtons
+            button1={{
+              buttonStyle: 'secondaryFooter',
+              onClick: () => setStep(step - 1),
+              label: 'Back',
+            }}
+            button2={{
+              buttonStyle: 'tertiaryFooter',
+              onClick: () => setStep(step + 1),
+              label: 'Save selection',
+            }}
+          />
+        </Box>
+      </Stack>
+    ),
+  }))
   return (
     <ControlledWizard
-      minHeight="300px"
+      minHeight="700px"
       step={step}
       setStep={setStep}
       steps={[
-        {
-          header: (
-            <HomeAssistantWizardSteps currentStep={2} onStepClick={() => {}} />
-          ),
-          body: () => (
-            <Stack
-              h="500px"
-              spacing="10"
-              w={{ base: 'full', md: '600px' }}
-              justify="space-around"
-              m="auto"
-            >
-              <WizardTextBody
-                title="1. Tell Homi about your goals."
-                subtitle="These choices help Homi build a personalized Homeboard that tracks your home’s performance, savings, and priorities."
-              />
-              <Box flex="1" bg="gray.1" />
-              <Box alignSelf="flex-end">
-                <FooterButtons
-                  button1={{
-                    buttonStyle: 'secondaryFooter',
-                    onClick: () => setStep(1),
-                    label: 'Back',
-                  }}
-                  button2={{
-                    buttonStyle: 'tertiaryFooter',
-                    onClick: () => setStep(1),
-                    label: 'Save selection',
-                  }}
-                />
-              </Box>
-            </Stack>
-          ),
-        },
+        ...homeAssistantSteps,
         {
           header: (
             <WizardTextHeader
@@ -136,10 +136,7 @@ export const ControlledWizardComponent = () => {
           ),
           body: () => (
             <Center w="full" h="full">
-              <HomeAssistantTutorial
-                onStart={() => setStep(4)}
-                maxWidth="500px"
-              />
+              <HomeAssistantTutorial onStart={() => setStep(4)} />
             </Center>
           ),
         },