@homefile/components-v2 2.31.1 → 2.33.0

package/src/helpers/forms/dynamicForm.helper.ts

@@ -74,7 +74,12 @@ import {
   MRHand,
   MRMakeReady,
   MRRental,
-  Cleaning
+  Cleaning,
+  GearTime,
+  YellowFolder,
+  Warranty,
+  Flower,
+  MagnifyingGlassPerson,
 } from '@/assets/images'
 import { IconTypes } from '@/interfaces'
 
@@ -123,12 +128,17 @@ export const fieldIcons: Record<IconTypes, string> = {
   pool: Pool2,
   roof: Roof2,
   umbrella: Closet,
+  warranty: Warranty,
   water: GlassWater,
   house: Structure,
   target: Target,
   title: CircleFace,
   company: Company2,
   wallet: Wallet,
+  gear: GearTime,
+  folder: YellowFolder,
+  flower: Flower,
+  'search-person': MagnifyingGlassPerson,
   'sh-gutter': GutterCleaning,
   'sh-home': HomeCleaning,
   'sh-house': HouseWashing,
@@ -155,5 +165,5 @@ export const fieldIcons: Record<IconTypes, string> = {
   'mr-hand': MRHand,
   'mr-make-ready': MRMakeReady,
   'mr-rental': MRRental,
-  'cleaning': Cleaning
+  cleaning: Cleaning,
 }

package/src/helpers/homeAssistant/HomeAssistant.helper.tsx

@@ -1,8 +1,10 @@
 import {
   Fire,
+  Fridge,
   GearTime,
   House,
   LargeAppliances,
+  Patio,
   Target,
   Temperature,
   Water,
@@ -37,6 +39,29 @@ export const homeAssistantSteps: Array<HomeAssistantStepI> = [
   },
 ]
 
+export const homeAssistantWizardSteps: Array<HomeAssistantStepI> = [
+  {
+    title: 'Objectives',
+    icon: Target,
+  },
+  {
+    title: 'Smoke & CO2 detectors',
+    icon: Fire,
+  },
+  {
+    title: 'Appliances',
+    icon: Fridge,
+  },
+  {
+    title: 'Heating & Cooling',
+    icon: Temperature,
+  },
+  {
+    title: 'Landscape',
+    icon: Patio,
+  },
+]
+
 interface CategoryConfigI {
   label: string
   icon: string

package/src/interfaces/forms/dynamicForm/DynamicForm.interface.ts

@@ -38,6 +38,7 @@ export type KindTypes =
   | HomeItemTypes
   | AlertTabType
   | AlertFieldType
+  | WizardTypes
 
 export type UIKindTypes =
   | 'tile-body'
@@ -61,56 +62,61 @@ export type HomeItemTypes =
   | 'item-icon-btn'
 
 export type IconTypes =
+  | '68'
   | 'barcode'
   | 'battery'
   | 'billing'
-  | 'book'
   | 'book-opened'
+  | 'book'
   | 'calc'
+  | 'calendar-drop'
   | 'calendar'
+  | 'calendar2'
   | 'check'
   | 'co2'
+  | 'company'
   | 'contact'
   | 'date'
   | 'default'
   | 'detector'
+  | 'drop'
   | 'electricity'
   | 'fire'
+  | 'flower'
+  | 'folder'
+  | 'foundation'
+  | 'gear'
   | 'goldbars'
   | 'heart'
+  | 'heater'
+  | 'house'
   | 'image'
   | 'life-preserver'
+  | 'light'
+  | 'mobile-drop'
   | 'notes'
   | 'palette'
-  | 'plant'
   | 'people'
+  | 'plant'
+  | 'plate'
+  | 'pool'
+  | 'pressure-washer'
   | 'price'
   | 'rating'
   | 'receipt'
   | 'registry'
-  | 'sprinkler'
-  | 'tools'
-  | 'wind'
-  | '68'
-  | 'calendar2'
-  | 'water'
-  | 'calendar-drop'
-  | 'umbrella'
-  | 'heater'
   | 'roof'
-  | 'foundation'
+  | 'search-person'
   | 'solar-panel'
-  | 'pool'
-  | 'drop'
-  | 'mobile-drop'
-  | 'light'
-  | 'plate'
-  | 'pressure-washer'
-  | 'house'
+  | 'sprinkler'
   | 'target'
   | 'title'
-  | 'company'
+  | 'tools'
+  | 'umbrella'
   | 'wallet'
+  | 'warranty'
+  | 'water'
+  | 'wind'
   | UIIconTypes
 
 export type UIIconTypes =
@@ -136,6 +142,12 @@ export type UIIconTypes =
   | 'filter-size'
   | string
 
+export type WizardTypes =
+  | 'home-wizard'
+  | 'home-wizard-header'
+  | 'home-wizard-initial-setup'
+  | 'home-wizard-step-options'
+
 export type ValueTypes = string | string[] | number | boolean
 export type OptionsTypes = string[] | number[] | null
 

package/src/interfaces/forms/dynamicForm/fields/UIFields.interface.ts

@@ -19,7 +19,7 @@ export interface VerticalIconI {
 
 export interface TileCtaCallbackI {
   id: string
-  value: string
+  value: unknown
   name?: string
   link?: string
   icon?: string

package/src/interfaces/homeAssistant/HomeAssistantButton.interface.ts

@@ -4,8 +4,8 @@ export interface HomeAssistantStepI {
 }
 
 export interface HomeAssistantButtonI {
-  currentStep: number
-  onStepClick: (step: number) => void
+  currentStep?: number
+  onStepClick?: (step: number) => void
   status: 'completed' | 'active' | 'pending'
   step: HomeAssistantStepI
 }

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

@@ -1309,3 +1309,82 @@ 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,
+  },
+]

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

@@ -63,6 +63,7 @@ import {
   Finance,
   Fire,
   Flag,
+  Flower,
   Flooring,
   FormSent,
   Foundation,
@@ -100,6 +101,7 @@ import {
   LivingRoom,
   LogoSmall,
   MagnifyingGlassReport,
+  MagnifyingGlassPerson,
   Manager,
   MasterBedroom,
   Mattress,
@@ -323,6 +325,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 +356,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,16 +1,20 @@
+import { useState } from 'react'
 import { Meta } from '@storybook/react'
 import {
   ConfirmProperty,
   ControlledWizard,
+  DynamicForm,
+  FooterButtons,
   HomeAssistantTutorial,
+  HomeAssistantWizardSteps,
   MyHomeDetails,
   SearchRecords,
   WizardTextHeader,
 } from '@/components'
-import { Box, Center } from '@chakra-ui/react'
-import { useState } from 'react'
+import { Box, Center, Stack } from '@chakra-ui/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'
 
@@ -32,11 +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="700px"
       step={step}
       setStep={setStep}
       steps={[
+        ...homeAssistantSteps,
         {
           header: (
             <WizardTextHeader
@@ -98,7 +136,7 @@ export const ControlledWizardComponent = () => {
           ),
           body: () => (
             <Center w="full" h="full">
-              <HomeAssistantTutorial onStart={() => {}} maxWidth="500px" />
+              <HomeAssistantTutorial onStart={() => setStep(4)} />
             </Center>
           ),
         },

package/src/utils/Styles.utils.ts

@@ -15,3 +15,9 @@ export const getColorBasedOnPercentage = ({
   const isPositive = percentage?.includes('+')
   return isPositive ? colorPositive : colorNegative
 }
+
+export const getStatus = (index: number, currentStep: number) => {
+  if (index === currentStep) return 'active'
+  if (index < currentStep) return 'completed'
+  return 'pending'
+}