@homefile/components-v2 2.1.0 → 2.2.0

package/src/components/homeAssistant/HomeAssistantWrapper.tsx

@@ -48,7 +48,6 @@ export const HomeAssistantWrapper = ({
             h="80px"
             top="80px"
             animation={`${moveRightToLeftWithFade} 400s linear infinite`}
-            zIndex="1"
           />
           <Image
             src={Cloud2}
@@ -57,7 +56,6 @@ export const HomeAssistantWrapper = ({
             h="112px"
             top="150px"
             animation={`${moveRightToLeft} 200s linear infinite`}
-            zIndex="1"
           />
           <Image
             src={Cloud3}
@@ -66,7 +64,6 @@ export const HomeAssistantWrapper = ({
             h="160px"
             top="200px"
             animation={`${moveRightToLeft} 130s linear infinite`}
-            zIndex="1"
           />
           {showAirplane && (
             <Image
@@ -76,7 +73,6 @@ export const HomeAssistantWrapper = ({
               h="40px"
               top="85px"
               animation={`${moveLeftToRightAirplane} 500s cubic-bezier(1, 1, 1, 500) infinite`}
-              zIndex="1"
             />
           )}
           <Image
@@ -87,7 +83,6 @@ export const HomeAssistantWrapper = ({
             right="2"
             w="auto"
             h="70px"
-            zIndex="1"
           />
         </Box>
       </TileTooltip>

package/src/components/homeAssistant/HomeMonitorButton.tsx

@@ -1,24 +1,18 @@
 import { Box, Center, Image, Stack, Text } from '@chakra-ui/react'
 import { HomeMonitorButtonI } from '@/interfaces'
 import { getIconAltText } from '@/utils'
-import { IconMenu, MoreHorizontal } from '@/components'
 
 export const HomeMonitorButton = ({
   currentStep,
-  menuItems,
   onStepClick,
   status = 'ok',
   step,
 }: HomeMonitorButtonI) => {
+  const buttonId = `homeMonitorButton-${currentStep}`
   const iconAltText = getIconAltText(step.icon)
-  const handleClick = () => {
-    if (status !== 'ok') onStepClick(currentStep)
-  }
-
-  const isDisabled = Number(menuItems.length) === 0
 
   return (
-    <Box position="relative">
+    <Box position="relative" id={buttonId}>
       <Box
         position="relative"
         bg="neutral.white"
@@ -47,7 +41,7 @@ export const HomeMonitorButton = ({
           h="96px"
           py="base"
           {...setStyles(status)}
-          onClick={handleClick}
+          onClick={() => onStepClick(currentStep)}
         >
           <Center h="60%" marginTop="2">
             <Image src={step.icon} alt={iconAltText} w="auto" h="28px" />
@@ -64,14 +58,6 @@ export const HomeMonitorButton = ({
           </Center>
         </Stack>
       </Box>
-      <Box position="absolute" top="-2px" right="4px" zIndex="4">
-        <IconMenu
-          icon={<MoreHorizontal size={26} />}
-          itemForm={currentStep}
-          menuItems={menuItems}
-          disabled={isDisabled}
-        />
-      </Box>
     </Box>
   )
 }

package/src/components/homeAssistant/HomeMonitorSteps.tsx

@@ -1,24 +1,50 @@
 import { Box, Flex } from '@chakra-ui/react'
 import { HomeMonitortStepsI } from '@/interfaces'
-import { HomeMonitorButton } from '@/components'
+import { HomeMonitorButton, IconMenu, MoreHorizontal } from '@/components'
 import { homeAssistantSteps } from '@/helpers'
+import { useComponentStyles } from '@/hooks'
+import { useState } from 'react'
 
 export const HomeMonitorSteps = ({
-  menuItems,
+  menuItems = [],
   onStepClick,
   stepsWithAlerts,
 }: HomeMonitortStepsI) => {
+  const ids = [
+    'homeMonitorButton-1',
+    'homeMonitorButton-2',
+    'homeMonitorButton-3',
+    'homeMonitorButton-4',
+    'homeMonitorButton-5',
+    'homeMonitorButton-6',
+  ]
+  const [selectedId, setSelectedId] = useState<string>('')
+  const isDisabled = menuItems.length === 0
+
+  useComponentStyles({ ids, selectedId, zIndex: '2' })
+  const handleStepClick = (step: number) => onStepClick(step)
   return (
     <Flex gap="base">
       {homeAssistantSteps.map((step, index) => (
-        <Box key={step.title} flex="auto">
-          <HomeMonitorButton
-            currentStep={index + 1}
-            menuItems={menuItems}
-            onStepClick={onStepClick}
-            status={getStatus(index + 1, stepsWithAlerts)}
-            step={step}
-          />
+        <Box key={step?.title} position="relative">
+          <Box flex="auto">
+            <HomeMonitorButton
+              currentStep={index + 1}
+              onStepClick={handleStepClick}
+              status={getStatus(index + 1, stepsWithAlerts)}
+              step={step}
+            />
+            <Box position="absolute" top="-2px" right="4px" zIndex="1400">
+              <IconMenu
+                zIndex="2"
+                icon={<MoreHorizontal size={26} />}
+                itemForm={index + 1}
+                menuItems={menuItems}
+                disabled={isDisabled}
+                onClick={() => setSelectedId(`homeMonitorButton-${index + 1}`)}
+              />
+            </Box>
+          </Box>
         </Box>
       ))}
     </Flex>

package/src/components/homeAssistant/monitorAlerts/HomefileMonitoring.tsx

@@ -7,7 +7,7 @@ export const HomefileMonitoring = () => {
     <Box p="base" borderRadius="lg" bg="#C5E9F4" h="66px" zIndex="2" flex="1">
       <Flex align="center">
         <Box boxSize="47px">
-          <HomieAnimation />
+          <HomieAnimation animation="homie-v3" />
         </Box>
         <Text>{t('homeAssistant.homeMonitoring')}</Text>
       </Flex>

package/src/components/homeAssistant/panel/ApplianceSteps.tsx

@@ -14,13 +14,18 @@ import {
   Microwave,
   Range,
 } from '@/assets/images'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 
 export const ApplianceSteps = ({
   addedAppliances = [],
   onClick,
 }: ApplianceStepsI) => {
   const [appliances, setAppliances] = useState<string[]>(addedAppliances)
+  
+  useEffect(() => {
+    setAppliances(addedAppliances)
+  }, [addedAppliances])
+
   const handleClick = (id: string) => {
     if (appliances.includes(id)) {
       const newAppliances = appliances.filter((appliance) => appliance !== id)
@@ -31,6 +36,7 @@ export const ApplianceSteps = ({
     setAppliances([...appliances, id])
     onClick([...appliances, id])
   }
+
   return (
     <Stack spacing="base" bg="lightBlue.2" p="base">
       <Text fontFamily="secondary" fontSize="sm">

package/src/components/homeAssistant/panel/HomeAssistantPanel.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren, useState, useEffect } from 'react'
 import { FormProvider } from 'react-hook-form'
 import { t } from 'i18next'
 import {
@@ -17,7 +17,7 @@ import {
   HomeAssistantPanelStep,
   PanelHeader,
 } from '@/components'
-import { HomeAssistantPanelI } from '@/interfaces'
+import { AppliancesType, HomeAssistantPanelI } from '@/interfaces'
 import { homeAssistantSteps } from '@/helpers'
 import { useSimpleDynamicForm } from '@/hooks'
 
@@ -33,9 +33,22 @@ export const HomeAssistantPanel = ({
   backDisabled,
   nextDisabled,
 }: PropsWithChildren<HomeAssistantPanelI>) => {
+  const [addedAppliances, updateAddedAppliances] = useState<AppliancesType[]>([])
   const { title } = homeAssistantSteps[currentStep - 1]
   const text = `${t('homeAssistant.details')} ${title.toLowerCase()}:`
   const isAppliances = currentStep === 4
+
+  useEffect(() => {
+    if (isAppliances) {
+      const targetAppliances = currentForm.find(
+        (field) =>
+          field.name?.toLocaleLowerCase() === 'appliances list' &&
+          field.type === 'hidden'
+      )?.value as AppliancesType[]
+      updateAddedAppliances(targetAppliances)
+    }
+  }, [currentForm, isAppliances])
+
   const { form, updatedFields } = useSimpleDynamicForm({
     fields: currentForm,
   })
@@ -52,7 +65,12 @@ export const HomeAssistantPanel = ({
       <DrawerBody p="0">
         <HomeAssistantPanelStep currentStep={currentStep} />
         {children}
-        {isAppliances && <ApplianceSteps onClick={onApplianceClick} />}
+        {isAppliances && (
+          <ApplianceSteps
+            onClick={onApplianceClick}
+            addedAppliances={addedAppliances}
+          />
+        )}
         <Stack spacing="base" p="base">
           <Text fontFamily="secondary" fontSize="sm">
             {text}

package/src/components/homeBoard/HomeBoard.tsx

@@ -51,6 +51,10 @@ import {
   EditHomeFooter,
   HomeAssistant,
   HomeAssistantPanel,
+  HomeMonitor,
+  HomefileMonitoring,
+  Notifications,
+  HomeMonitorSteps,
 } from '@/components'
 import {
   HomeCards,
@@ -329,6 +333,25 @@ export const HomeBoard = () => {
                 taxes={taxesMock}
                 title="Travis County Property Taxes"
               />
+              <HomeMonitor>
+                <Stack spacing="base">
+                  <Flex gap="base">
+                    <HomefileMonitoring />
+                    <Notifications date="10-10-24" local="TX - Houston" />
+                  </Flex>
+                  <HomeMonitorSteps
+                    menuItems={[
+                      {
+                        label: 'Details',
+                        handleClick: handleHomeAssistantClick,
+                      },
+                    ]}
+                    stepsWithAlerts={[]}
+                    onStepClick={() => null}
+                  />
+                </Stack>
+              </HomeMonitor>
+
               <Stack spacing="base">
                 <ReceiptAutofiler
                   onClick={() => null}

package/src/components/inputs/SelectButton.tsx

@@ -64,7 +64,9 @@ export const SelectButton = ({
     >
       <Flex align="center" gap="4" justify="space-between">
         <Text {...textVariants[variant]}>{selectedValue}</Text>
-        <ChevronDown {...iconVariants[variant]} />
+        <Flex flexShrink={0}>
+          <ChevronDown {...iconVariants[variant]} />
+        </Flex>
       </Flex>
     </MenuButton>
   )

package/src/components/launchpad/IconMenu.tsx

@@ -13,8 +13,10 @@ export const IconMenu = <T extends unknown>({
   icon,
   itemForm,
   menuItems,
+  onClick,
   variant = 'menuIcon',
   width = 'fit-content',
+  zIndex,
 }: IconMenuI<T>) => {
   return (
     <Menu isLazy>
@@ -24,7 +26,7 @@ export const IconMenu = <T extends unknown>({
             bg="overlay"
             showOverlay={isOpen}
             position="fixed"
-            zIndex="4"
+            zIndex={zIndex}
           />
           <MenuButton
             as={IconButton}
@@ -34,6 +36,7 @@ export const IconMenu = <T extends unknown>({
             w={width}
             disabled={disabled}
             marginTop="0 !important"
+            onClick={onClick}
           />
           <MenuList zIndex="5">
             {menuItems?.map(({ handleClick, label }) => (

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

@@ -47,6 +47,7 @@ import {
   HolidayLights,
   GutterCleaning,
   HomeCleaning,
+  PressureWasher,
 } from '@/assets/images'
 import { IconTypes } from '@/interfaces'
 
@@ -86,6 +87,7 @@ export const fieldIcons: Record<IconTypes, string> = {
   heater: Heater,
   light: Light,
   plate: Plate,
+  'pressure-washer': PressureWasher,
   pool: Pool2,
   roof: Roof2,
   umbrella: Closet,

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

@@ -2,12 +2,14 @@ import { FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '@/interfaces'
 
 type KindTypes =
   | 'checkbox'
+  | 'checkbox-group'
   | 'currency'
   | 'date'
   | 'email'
   | 'file'
   | 'grid'
   | 'group'
+  | 'hidden'
   | 'number'
   | 'radio'
   | 'rating'
@@ -72,6 +74,7 @@ export type IconTypes =
   | 'mobile-drop'
   | 'light'
   | 'plate'
+  | 'pressure-washer'
   | 'house'
   | 'target'
   | 'title'

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

@@ -1,4 +1,4 @@
-import { DynamicFormI, MenuItemI, PartnerFooterI } from '@/interfaces'
+import { DynamicFormI, MenuItemI, PartnerFooterI, ReportI } from '@/interfaces'
 
 export interface TileBodyLogoI {
   menuItems?: MenuItemI[]
@@ -17,8 +17,23 @@ export interface VerticalIconI {
   value: string
 }
 
-export interface TileCtaI {
-  callback?: (value: string) => void
+interface TileCtaCallbackI {
+  id: string
+  value: string
+  name?: string
+  link?: string
+  icon?: string
+  description?: string
+  canBeHidden?: boolean
+  visible?: boolean
+}
+
+export interface TileCtaI
+  extends Pick<
+    ReportI,
+    'id' | 'name' | 'link' | 'icon' | 'description' | 'canBeHidden' | 'visible'
+  > {
+  callback?: (form: TileCtaCallbackI) => void
   type: 'primary-cta' | 'secondary-cta'
   value: string
 }

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

@@ -3,7 +3,7 @@ export interface ApplianceStepsI {
   onClick: (selectedSteps: string[]) => void
 }
 
-type AppliancesType =
+export type AppliancesType =
   | 'fridge'
   | 'freezer'
   | 'washer'

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

@@ -8,7 +8,6 @@ export interface HomeMonitortStepsI {
 
 export interface HomeMonitorButtonI {
   currentStep: number
-  menuItems: HomeMonitortStepsI['menuItems']
   onStepClick: HomeMonitortStepsI['onStepClick']
   status: 'alert' | 'ok'
   step: HomeAssistantStepI

package/src/interfaces/launchpad/IconMenu.interface.ts

@@ -8,6 +8,8 @@ export interface IconMenuI<T> {
   icon?: JSX.Element
   itemForm?: T
   menuItems?: MenuItemI[]
+  onClick?: () => void
   variant?: string
   width?: string
+  zIndex?: string
 }

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

@@ -13,6 +13,7 @@ export const formFieldsMock: ReportI[] = [
     visible: false,
     icon: 'barcode',
   },
+
   {
     id: faker.database.mongodbObjectId(),
     name: 'Receipt',
@@ -191,6 +192,72 @@ export const formFieldsMock: ReportI[] = [
     visible: false,
     icon: 'book',
   },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Services',
+    description: faker.lorem.sentence(),
+    comments: faker.lorem.sentence(),
+    value: 'Select the services you are requesting support for?',
+    type: 'checkbox-group',
+    visible: true,
+    icon: 'pressure-washer',
+    children: [
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Pressure Washing',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: true,
+        type: 'checkbox',
+        visible: true,
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Window Cleaning',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: false,
+        type: 'checkbox',
+        visible: true,
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Roof Cleaning',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: false,
+        type: 'checkbox',
+        visible: true,
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Holiday Lights',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: true,
+        type: 'checkbox',
+        visible: true,
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Gutter Cleaning',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: true,
+        type: 'checkbox',
+        visible: true,
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Exterior Cleaning',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: true,
+        type: 'checkbox',
+        visible: false,
+      },
+    ],
+  },
 ]
 
 export const contactFieldsMock: ReportI[] = [

package/src/mocks/homeAssistant/homeAssistantForms.ts

@@ -164,6 +164,12 @@ export const homeAssitantStep3FormMock: ReportI[] = [
 ]
 
 export const homeAssitantStep4FormMock: ReportI[] = [
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Appliances List',
+    value: ['fridge', 'dish-washer', 'hood', 'oven'],
+    type: 'hidden',
+  },
   {
     id: faker.database.mongodbObjectId(),
     name: 'Heater',

package/src/stories/animations/HomieAnimation.stories.tsx

@@ -15,3 +15,4 @@ export default {
 } as Meta
 
 export const Homie = () => <HomieAnimation />
+export const HomieLarge = () => <HomieAnimation animation="homie-v3" />

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

@@ -121,6 +121,7 @@ import {
   Plus,
   Pool,
   Pool2,
+  PressureWasher,
   Porch,
   Price,
   Profile,
@@ -360,6 +361,7 @@ export const Illustrations = () => {
       <IconWrapper icon={Plus} name="Plus" />
       <IconWrapper icon={Pool} name="Pool" />
       <IconWrapper icon={Pool2} name="Pool2" />
+      <IconWrapper icon={PressureWasher} name="PressureWasher" />
       <IconWrapper icon={Price} name="Price" />
       <IconWrapper icon={Profile} name="Profile" />
       <IconWrapper icon={ProgressReport} name="ProgressReport" />

package/src/stories/forms/dynamicForm/DynamicForm.stories.tsx

@@ -9,8 +9,6 @@ export default {
   title: 'Components/Forms/DynamicForm',
   component: DynamicForm,
   args: {
-    callback: action('callback'),
-    onUpload: action('onUpload'),
     menuItems: menuMock,
     socialLinks: socialLinksMock,
     websiteUrl: 'http://www.audreyscheckdesign.com',
@@ -28,7 +26,12 @@ export const DynamicFormComponent = (args: DynamicFormI) => {
 export const DynamicUIFormComponent = (args: DynamicFormI) => {
   return (
     <Box m="base" w={['full', '320px']}>
-      <DynamicForm {...args} form={tileUIMock} showTitle={false} />
+      <DynamicForm
+        {...args}
+        form={tileUIMock}
+        showTitle={false}
+        callback={action('callback')}
+      />
     </Box>
   )
 }