@homefile/components-v2 2.31.1 → 2.32.0

package/dist/components/homeAssistant/HomeAssistantButton.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Center, Image, Stack, Text } from '@chakra-ui/react';
 import { CheckInCircle } from '../../assets/images';
 import { getIconAltText } from '../../utils';
-export const HomeAssistantButton = ({ currentStep, onStepClick, status, step, }) => {
+export const HomeAssistantButton = ({ currentStep = 1, onStepClick, status, step, }) => {
     const iconAltText = getIconAltText(step.icon);
     const isCompleted = status === 'completed';
     const isPending = status === 'pending';
     const handleClick = () => {
         if (!isPending)
-            onStepClick(currentStep);
+            onStepClick === null || onStepClick === void 0 ? void 0 : onStepClick(currentStep);
     };
     const buttonId = `homeAssistantButton-${currentStep}`;
     return (_jsxs(Box, { position: "relative", id: buttonId, zIndex: "2", children: [isCompleted && (_jsx(Image, { src: CheckInCircle || null, alt: "check", w: "22px", h: "auto", position: "absolute", top: "-4px", left: "-2px", boxShadow: "lg", borderRadius: "full" })), _jsxs(Stack, Object.assign({ as: "button", spacing: "2", borderRadius: "lg", boxShadow: "lg", border: "1px solid transparent", w: "116px", align: "center", h: "106px", py: "base", onClick: handleClick }, setStyles(status), { children: [_jsx(Center, { h: "60%", children: (step === null || step === void 0 ? void 0 : step.icon) && (_jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "38px" })) }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "sm", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] }))] }));

package/dist/components/homeAssistant/HomeAssistantSteps.js

@@ -3,6 +3,7 @@ import { Center, SimpleGrid, Stack } from '@chakra-ui/react';
 import { HomeAssistantButton, HomeAssistantStepper } from '..';
 import { homeAssistantSteps } from '../../helpers';
 import { homeAssistantProxy } from '../../proxies';
+import { getStatus } from '../../utils';
 export const HomeAssistantSteps = ({ currentStep, onStepClick, currentPanel, }) => {
     const { setSelectedId } = homeAssistantProxy;
     return (_jsxs(Stack, { spacing: "8", w: "fit-content", position: "relative", top: ['-10px', '-30px'], children: [_jsx(HomeAssistantStepper, { currentStep: currentStep, totalSteps: 6 }), _jsx(SimpleGrid, { columns: [2, 3], spacing: "base", children: homeAssistantSteps.map((step, index) => (_jsx(Center, { w: "100%", children: _jsx(HomeAssistantButton, { currentStep: index + 1, onStepClick: (step) => {
@@ -10,10 +11,3 @@ export const HomeAssistantSteps = ({ currentStep, onStepClick, currentPanel, })
                             setSelectedId(`homeAssistantButton-${index + 1}`);
                         }, status: getStatus(index + 1, currentStep), step: step }) }, step.title))) })] }));
 };
-const getStatus = (index, currentStep) => {
-    if (index === currentStep)
-        return 'active';
-    if (index < currentStep)
-        return 'completed';
-    return 'pending';
-};

package/dist/components/homeAssistant/index.d.ts

@@ -1,5 +1,6 @@
 export * from './monitorAlerts';
 export * from './panel';
+export * from './wizard';
 export * from './HomeAssistant';
 export * from './HomeAssistantButton';
 export * from './HomeAssistantStepper';

package/dist/components/homeAssistant/index.js

@@ -1,5 +1,6 @@
 export * from './monitorAlerts';
 export * from './panel';
+export * from './wizard';
 export * from './HomeAssistant';
 export * from './HomeAssistantButton';
 export * from './HomeAssistantStepper';

package/dist/components/homeAssistant/wizard/HomeAssistantWizardButton.d.ts

@@ -0,0 +1,2 @@
+import { HomeAssistantButtonI } from '../../../interfaces';
+export declare const HomeAssistantWizardButton: ({ status, step, }: HomeAssistantButtonI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/wizard/HomeAssistantWizardButton.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Center, Image, Stack, Text } from '@chakra-ui/react';
+import { CheckInCircle } from '../../../assets/images';
+import { getIconAltText } from '../../../utils';
+export const HomeAssistantWizardButton = ({ status, step, }) => {
+    const iconAltText = getIconAltText(step.icon);
+    const isCompleted = status === 'completed';
+    const isActive = status === 'active';
+    return (_jsxs(Stack, { position: "relative", spacing: "4", children: [isCompleted && (_jsx(Image, { src: CheckInCircle || null, alt: "check", w: "22px", h: "auto", position: "absolute", top: "-6px", left: "-8px", boxShadow: "lg", borderRadius: "full" })), _jsxs(Stack, Object.assign({ spacing: "0", borderRadius: "md", boxShadow: "lg", border: "1px solid transparent", pt: "2", align: "center", w: "70px", h: "63px", cursor: "default" }, setStyles(status), { children: [(step === null || step === void 0 ? void 0 : step.icon) && (_jsx(Box, { boxSize: "24px", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "full", h: "full", objectFit: "contain" }) })), _jsx(Center, { h: "50%", children: _jsx(Text, { fontSize: "8px", textTransform: "uppercase", textAlign: "center", lineHeight: "1", children: step.title }) })] })), _jsx(Box, { h: "6px", bg: isActive ? 'blue.8' : 'transparent' })] }));
+};
+const setStyles = (status) => {
+    switch (status) {
+        case 'completed':
+            return {
+                bg: 'neutral.white',
+                borderColor: 'green.1',
+            };
+        case 'active':
+            return {
+                bg: 'neutral.white',
+                borderColor: 'blue.8',
+            };
+        case 'pending':
+            return {
+                bg: 'neutral.white',
+                filter: 'grayscale(1) opacity(0.2)',
+            };
+    }
+};

package/dist/components/homeAssistant/wizard/HomeAssistantWizardSteps.d.ts

@@ -0,0 +1,2 @@
+import { HomeAssistantStepsI } from '../../../interfaces';
+export declare const HomeAssistantWizardSteps: ({ currentStep, }: HomeAssistantStepsI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/wizard/HomeAssistantWizardSteps.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Center, Flex } from '@chakra-ui/react';
+import { HomeAssistantWizardButton } from '../..';
+import { homeAssistantWizardSteps } from '../../../helpers';
+import { getStatus } from '../../../utils';
+export const HomeAssistantWizardSteps = ({ currentStep, }) => {
+    return (_jsx(Center, { w: "full", bg: "lightGreen.1", pt: { base: '4', md: '8' }, children: _jsx(Flex, { gap: "base", overflow: { base: 'scroll', md: 'visible' }, p: { base: '4', md: '0' }, children: homeAssistantWizardSteps.map((step, index) => (_jsx(Center, { w: "100%", children: _jsx(HomeAssistantWizardButton, { status: getStatus(index + 1, currentStep), step: step }) }, step.title))) }) }));
+};

package/dist/components/homeAssistant/wizard/index.d.ts

@@ -0,0 +1,2 @@
+export * from './HomeAssistantWizardButton';
+export * from './HomeAssistantWizardSteps';

package/dist/components/homeAssistant/wizard/index.js

@@ -0,0 +1,2 @@
+export * from './HomeAssistantWizardButton';
+export * from './HomeAssistantWizardSteps';

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

@@ -0,0 +1,2 @@
+import { WizardTextHeaderI } from '../../interfaces';
+export declare const WizardTextBody: ({ title, subtitle }: WizardTextHeaderI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/wizard/WizardTextBody.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Center, Stack, Text } from '@chakra-ui/react';
+export const WizardTextBody = ({ title, subtitle }) => {
+    return (_jsx(Center, { w: "full", minH: "100px", children: _jsxs(Stack, { spacing: "4", w: "80%", children: [_jsx(Text, { fontSize: { base: 'xl', md: '2xl' }, lineHeight: { base: 'shorter', md: 'base' }, textAlign: "center", children: title }), subtitle && (_jsx(Text, { fontFamily: "secondary", textAlign: "center", children: subtitle }))] }) }));
+};

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

@@ -1,2 +1,3 @@
 export * from './ControlledWizard';
 export * from './WizardTextHeader';
+export * from './WizardTextBody';

package/dist/components/wizard/index.js

@@ -1,2 +1,3 @@
 export * from './ControlledWizard';
 export * from './WizardTextHeader';
+export * from './WizardTextBody';

package/dist/helpers/homeAssistant/HomeAssistant.helper.d.ts

@@ -1,6 +1,7 @@
 import { HomeAssistantStepI } from '../../interfaces';
 import { AlertCategory } from '../../interfaces/homeAssistant/BackendAlert.interface';
 export declare const homeAssistantSteps: Array<HomeAssistantStepI>;
+export declare const homeAssistantWizardSteps: Array<HomeAssistantStepI>;
 interface CategoryConfigI {
     label: string;
     icon: string;

package/dist/helpers/homeAssistant/HomeAssistant.helper.js

@@ -1,4 +1,4 @@
-import { Fire, GearTime, House, LargeAppliances, Target, Temperature, Water, } from '../../assets/images';
+import { Fire, Fridge, GearTime, House, LargeAppliances, Patio, Target, Temperature, Water, } from '../../assets/images';
 export const homeAssistantSteps = [
     {
         title: 'Goals',
@@ -25,6 +25,28 @@ export const homeAssistantSteps = [
         icon: Water,
     },
 ];
+export const homeAssistantWizardSteps = [
+    {
+        title: 'Objectives',
+        icon: Target,
+    },
+    {
+        title: 'Smoke & CO2 detectors',
+        icon: Fire,
+    },
+    {
+        title: 'Appliances',
+        icon: Fridge,
+    },
+    {
+        title: 'Heating & Cooling',
+        icon: Temperature,
+    },
+    {
+        title: 'Landscape',
+        icon: Patio,
+    },
+];
 export const CATEGORY_CONFIG = {
     safeguard: {
         label: 'Protection Monitor',

package/dist/interfaces/homeAssistant/HomeAssistantButton.interface.d.ts

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

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

@@ -7,9 +7,9 @@ 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 { ConfirmProperty, ControlledWizard, HomeAssistantTutorial, MyHomeDetails, SearchRecords, WizardTextHeader, } from '../../components';
-import { Box, Center } from '@chakra-ui/react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ConfirmProperty, ControlledWizard, FooterButtons, HomeAssistantTutorial, HomeAssistantWizardSteps, MyHomeDetails, SearchRecords, WizardTextBody, WizardTextHeader, } from '../../components';
+import { Box, Center, Stack } from '@chakra-ui/react';
 import { useState } from 'react';
 import { formValues } from '../../helpers';
 import { propertiesMock } from '../../mocks';
@@ -26,7 +26,19 @@ function fakeLookup() {
 }
 export const ControlledWizardComponent = () => {
     const [step, setStep] = useState(0);
-    return (_jsx(ControlledWizard, { step: step, setStep: setStep, steps: [
+    return (_jsx(ControlledWizard, { minHeight: "300px", step: step, setStep: setStep, steps: [
+            {
+                header: (_jsx(HomeAssistantWizardSteps, { currentStep: 2, onStepClick: () => { } })),
+                body: () => (_jsxs(Stack, { h: "500px", spacing: "10", w: { base: 'full', md: '600px' }, justify: "space-around", m: "auto", children: [_jsx(WizardTextBody, { title: "1. Tell Homi about your goals.", subtitle: "These choices help Homi build a personalized Homeboard that tracks your home\u2019s performance, savings, and priorities." }), _jsx(Box, { flex: "1", bg: "gray.1" }), _jsx(Box, { alignSelf: "flex-end", children: _jsx(FooterButtons, { button1: {
+                                    buttonStyle: 'secondaryFooter',
+                                    onClick: () => setStep(1),
+                                    label: 'Back',
+                                }, button2: {
+                                    buttonStyle: 'tertiaryFooter',
+                                    onClick: () => setStep(1),
+                                    label: 'Save selection',
+                                } }) })] })),
+            },
             {
                 header: (_jsx(WizardTextHeader, { title: "Hi John, let\u2019s get your Homefile set up.", subtitle: "Complete this quick setup and we\u2019ll handle the rest." })),
                 body: ({ setStep }) => (_jsx(MyHomeDetails, { isWizard: true, userFirstName: "Adam", values: formValues, properties: propertiesMock, handleCreateHomeClick: (values) => __awaiter(void 0, void 0, void 0, function* () {
@@ -53,7 +65,7 @@ export const ControlledWizardComponent = () => {
                         number: '123',
                         zip: '80123',
                     }, name: "your home" })),
-                body: () => (_jsx(Center, { w: "full", h: "full", children: _jsx(HomeAssistantTutorial, { onStart: () => { }, maxWidth: "500px" }) })),
+                body: () => (_jsx(Center, { w: "full", h: "full", children: _jsx(HomeAssistantTutorial, { onStart: () => setStep(4), maxWidth: "500px" }) })),
             },
         ] }));
 };

package/dist/utils/Styles.utils.d.ts

@@ -5,4 +5,5 @@ interface getColorBasedOnPercentageI {
     percentage?: string;
 }
 export declare const getColorBasedOnPercentage: ({ colorDefault, colorNegative, colorPositive, percentage, }: getColorBasedOnPercentageI) => string;
+export declare const getStatus: (index: number, currentStep: number) => "active" | "completed" | "pending";
 export {};

package/dist/utils/Styles.utils.js

@@ -4,3 +4,10 @@ export const getColorBasedOnPercentage = ({ colorDefault = 'lightBlue.2', colorN
     const isPositive = percentage === null || percentage === void 0 ? void 0 : percentage.includes('+');
     return isPositive ? colorPositive : colorNegative;
 };
+export const getStatus = (index, currentStep) => {
+    if (index === currentStep)
+        return 'active';
+    if (index < currentStep)
+        return 'completed';
+    return 'pending';
+};

package/package.json

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

package/src/components/homeAssistant/HomeAssistantButton.tsx

@@ -4,7 +4,7 @@ import { HomeAssistantButtonI } from '@/interfaces'
 import { getIconAltText } from '@/utils'
 
 export const HomeAssistantButton = ({
-  currentStep,
+  currentStep = 1,
   onStepClick,
   status,
   step,
@@ -13,7 +13,7 @@ export const HomeAssistantButton = ({
   const isCompleted = status === 'completed'
   const isPending = status === 'pending'
   const handleClick = () => {
-    if (!isPending) onStepClick(currentStep)
+    if (!isPending) onStepClick?.(currentStep)
   }
   const buttonId = `homeAssistantButton-${currentStep}`
   return (

package/src/components/homeAssistant/HomeAssistantSteps.tsx

@@ -3,6 +3,7 @@ import { HomeAssistantStepsI } from '@/interfaces'
 import { HomeAssistantButton, HomeAssistantStepper } from '@/components'
 import { homeAssistantSteps } from '@/helpers'
 import { homeAssistantProxy } from '@/proxies'
+import { getStatus } from '@/utils'
 
 export const HomeAssistantSteps = ({
   currentStep,
@@ -37,9 +38,3 @@ export const HomeAssistantSteps = ({
     </Stack>
   )
 }
-
-const getStatus = (index: number, currentStep: number) => {
-  if (index === currentStep) return 'active'
-  if (index < currentStep) return 'completed'
-  return 'pending'
-}

package/src/components/homeAssistant/index.ts

@@ -1,5 +1,6 @@
 export * from './monitorAlerts'
 export * from './panel'
+export * from './wizard'
 export * from './HomeAssistant'
 export * from './HomeAssistantButton'
 export * from './HomeAssistantStepper'

package/src/components/homeAssistant/wizard/HomeAssistantWizardButton.tsx

@@ -0,0 +1,87 @@
+import { border, Box, Center, Image, Stack, Text } from '@chakra-ui/react'
+import { CheckInCircle } from '@/assets/images'
+import { HomeAssistantButtonI } from '@/interfaces'
+import { getIconAltText } from '@/utils'
+
+export const HomeAssistantWizardButton = ({
+  status,
+  step,
+}: HomeAssistantButtonI) => {
+  const iconAltText = getIconAltText(step.icon)
+  const isCompleted = status === 'completed'
+  const isActive = status === 'active'
+
+  return (
+    <Stack position="relative" spacing="4">
+      {isCompleted && (
+        <Image
+          src={CheckInCircle || null}
+          alt="check"
+          w="22px"
+          h="auto"
+          position="absolute"
+          top="-6px"
+          left="-8px"
+          boxShadow="lg"
+          borderRadius="full"
+        />
+      )}
+
+      <Stack
+        spacing="0"
+        borderRadius="md"
+        boxShadow="lg"
+        border="1px solid transparent"
+        pt="2"
+        align="center"
+        w="70px"
+        h="63px"
+        cursor="default"
+        {...setStyles(status)}
+      >
+        {step?.icon && (
+          <Box boxSize="24px">
+            <Image
+              src={step.icon}
+              alt={iconAltText}
+              w="full"
+              h="full"
+              objectFit="contain"
+            />
+          </Box>
+        )}
+        <Center h="50%">
+          <Text
+            fontSize="8px"
+            textTransform="uppercase"
+            textAlign="center"
+            lineHeight="1"
+          >
+            {step.title}
+          </Text>
+        </Center>
+      </Stack>
+      <Box h="6px" bg={isActive ? 'blue.8' : 'transparent'} />
+    </Stack>
+  )
+}
+
+const setStyles = (status: HomeAssistantButtonI['status']) => {
+  switch (status) {
+    case 'completed':
+      return {
+        bg: 'neutral.white',
+        borderColor: 'green.1',
+      }
+    case 'active':
+      return {
+        bg: 'neutral.white',
+        borderColor: 'blue.8',
+      }
+    case 'pending':
+      return {
+        bg: 'neutral.white',
+        filter: 'grayscale(1) opacity(0.2)',
+      }
+  }
+}

package/src/components/homeAssistant/wizard/HomeAssistantWizardSteps.tsx

@@ -0,0 +1,28 @@
+import { Center, Flex } from '@chakra-ui/react'
+import { HomeAssistantStepsI } from '@/interfaces'
+import { HomeAssistantWizardButton } from '@/components'
+import { homeAssistantWizardSteps } from '@/helpers'
+import { getStatus } from '@/utils'
+
+export const HomeAssistantWizardSteps = ({
+  currentStep,
+}: HomeAssistantStepsI) => {
+  return (
+    <Center w="full" bg="lightGreen.1" pt={{ base: '4', md: '8' }}>
+      <Flex
+        gap="base"
+        overflow={{ base: 'scroll', md: 'visible' }}
+        p={{ base: '4', md: '0' }}
+      >
+        {homeAssistantWizardSteps.map((step, index) => (
+          <Center key={step.title} w="100%">
+            <HomeAssistantWizardButton
+              status={getStatus(index + 1, currentStep)}
+              step={step}
+            />
+          </Center>
+        ))}
+      </Flex>
+    </Center>
+  )
+}

package/src/components/homeAssistant/wizard/index.ts

@@ -0,0 +1,2 @@
+export * from './HomeAssistantWizardButton'
+export * from './HomeAssistantWizardSteps'

package/src/components/wizard/WizardTextBody.tsx

@@ -0,0 +1,23 @@
+import { Center, Stack, Text } from '@chakra-ui/react'
+import { WizardTextHeaderI } from '@/interfaces'
+
+export const WizardTextBody = ({ title, subtitle }: WizardTextHeaderI) => {
+  return (
+    <Center w="full" minH="100px">
+      <Stack spacing="4" w="80%">
+        <Text
+          fontSize={{ base: 'xl', md: '2xl' }}
+          lineHeight={{ base: 'shorter', md: 'base' }}
+          textAlign="center"
+        >
+          {title}
+        </Text>
+        {subtitle && (
+          <Text fontFamily="secondary" textAlign="center">
+            {subtitle}
+          </Text>
+        )}
+      </Stack>
+    </Center>
+  )
+}

package/src/components/wizard/index.ts

@@ -1,2 +1,3 @@
 export * from './ControlledWizard'
 export * from './WizardTextHeader'
+export * from './WizardTextBody'

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/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/stories/wizard/ControlledWizard.stories.tsx

@@ -2,12 +2,15 @@ import { Meta } from '@storybook/react'
 import {
   ConfirmProperty,
   ControlledWizard,
+  FooterButtons,
   HomeAssistantTutorial,
+  HomeAssistantWizardSteps,
   MyHomeDetails,
   SearchRecords,
+  WizardTextBody,
   WizardTextHeader,
 } from '@/components'
-import { Box, Center } from '@chakra-ui/react'
+import { Box, Center, Stack } from '@chakra-ui/react'
 import { useState } from 'react'
 import { formValues } from '@/helpers'
 import { propertiesMock } from '@/mocks'
@@ -34,9 +37,44 @@ export const ControlledWizardComponent = () => {
   const [step, setStep] = useState(0)
   return (
     <ControlledWizard
+      minHeight="300px"
       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>
+          ),
+        },
         {
           header: (
             <WizardTextHeader
@@ -98,7 +136,10 @@ export const ControlledWizardComponent = () => {
           ),
           body: () => (
             <Center w="full" h="full">
-              <HomeAssistantTutorial onStart={() => {}} maxWidth="500px" />
+              <HomeAssistantTutorial
+                onStart={() => setStep(4)}
+                maxWidth="500px"
+              />
             </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'
+}