@homefile/components-v2 2.2.1 → 2.2.3

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

@@ -4,4 +4,5 @@ export interface HomeAssistantStepsI {
     showTutorial?: boolean;
     currentPanel?: number;
     tutorialUrl?: string;
+    onStart?: () => void;
 }

package/dist/interfaces/partner/PartnerHeader.interface.d.ts

@@ -1,5 +1,6 @@
-import { MenuItemI } from "..";
+import { MenuItemI } from '..';
 export interface PartnerHeaderI {
+    borderColor?: string;
     logo: string;
     menuItems?: MenuItemI[];
     partnerName: string;

package/dist/mocks/forms/dynamicForm.mock.js

@@ -1,6 +1,72 @@
 import { Shine } from '../../assets/images';
 import { faker } from '@faker-js/faker';
 export const formFieldsMock = [
+    {
+        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,
+            },
+        ],
+    },
     {
         id: faker.database.mongodbObjectId(),
         name: 'Serial #',
@@ -189,72 +255,6 @@ export const formFieldsMock = [
         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 = [
     {
@@ -491,6 +491,15 @@ export const tileUIMock = [
                         type: 'vertical-icon',
                         icon: 'sh-gutter',
                     },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: '',
+                        comments: '',
+                        value: 'House Washing',
+                        type: 'vertical-icon',
+                        icon: 'sh-house',
+                    },
                 ],
             },
             {

package/package.json

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

package/src/assets/images/shine/index.ts

@@ -1,5 +1,6 @@
 import GutterCleaning from './gutter-cleaning.png'
 import HomeCleaning from './home-cleaning.png'
+import HouseWashing from './house-washing.png'
 import HolidayLights from './holiday-lights.png'
 import Pressure from './pressure.png'
 import RoofCleaning from './roof-cleaning.png'
@@ -8,6 +9,7 @@ import WindowCleaning from './window.png'
 export {
   GutterCleaning,
   HomeCleaning,
+  HouseWashing,
   HolidayLights,
   Pressure,
   RoofCleaning,

package/src/assets/locales/en/index.json

@@ -112,7 +112,8 @@
     "send": "Send",
     "share": "Share",
     "skip": "Skip for now",
-    "saveStep": "Save Step"
+    "saveStep": "Save Step",
+    "finish": "Finish"
   },
   "createDocument": {
     "tabs": {
@@ -400,7 +401,7 @@
     },
     "details": "Provide details about your home’s",
     "homeMonitor": "Homie",
-    "homeMonitoring": "Homie is monitoring your home.",
+    "homeMonitoring": "Homie is learning about your home.",
     "monitorAlerts": {
       "collapse": "Collapse Alert",
       "homeAction": "Home Action",

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

@@ -1,6 +1,6 @@
 import { FormProvider } from 'react-hook-form'
 import { t } from 'i18next'
-import { Stack, Text } from '@chakra-ui/react'
+import { Box, Stack, Text } from '@chakra-ui/react'
 import { DynamicFormI, IconTypes } from '@/interfaces'
 import {
   HiddenFieldSection,
@@ -43,11 +43,19 @@ export const DynamicForm = ({
   } = useDynamicForm({ fields, onUpload })
 
   return (
-    <Stack bg="lightBlue.1" spacing="0" h="full">
+    <Stack bg="lightBlue.1" spacing="0" h="full" overflowX="hidden">
       {showTitle && (
-        <Text fontFamily="secondary" px="base" pt="4" pb="2">
-          {title ? title : t('forms.itemDetails')}
-        </Text>
+        <Box
+          px="base"
+          pt="4"
+          pb="2"
+          borderBottom="1px dashed"
+          borderColor="lightBlue.6"
+        >
+          <Text fontFamily="secondary">
+            {title ? title : t('forms.itemDetails')}
+          </Text>
+        </Box>
       )}
       <FormProvider {...form}>
         <>
@@ -167,13 +175,15 @@ export const DynamicForm = ({
                 )
               case 'checkbox-group':
                 return (
-                  <CheckboxGroupField
-                    key={id}
-                    id={id}
-                    children={children}
-                    value={value}
-                    icon={baseProps.icon}
-                  />
+                  <FieldWithDelete {...fieldWithDeleteBaseProps}>
+                    <CheckboxGroupField
+                      key={id}
+                      id={id}
+                      children={children}
+                      description={description}
+                      icon={baseProps.icon}
+                    />
+                  </FieldWithDelete>
                 )
               case 'tile-body':
                 return (

package/src/components/forms/dynamicForm/fields/CheckboxGroupField.tsx

@@ -14,8 +14,8 @@ export const CheckboxGroupField = ({
   children,
   icon,
   id,
-  value,
-}: Pick<ReportI, 'children' | 'icon' | 'id' | 'value'>) => {
+  description,
+}: Pick<ReportI, 'children' | 'icon' | 'id' | 'description'>) => {
   const { control } = useFormContext()
   const defaultValues = children
     ?.map((child) => {
@@ -26,13 +26,21 @@ export const CheckboxGroupField = ({
     .filter((value) => value) as string[]
 
   return (
-    <Box>
-      <Box p="base" borderBottom="1px dashed" borderColor="lightBlue.6">
+    <Box flex="auto" position="relative">
+      <Box pb="base">
         <Text fontFamily="secondary" fontSize="sm">
-          {value}
+          {description}
         </Text>
       </Box>
-      <Flex p="base" gap="base">
+      <Box
+        position="absolute"
+        borderBottom="1px dashed"
+        borderColor="lightBlue.6"
+        h="1px"
+        left="-13px"
+        right="-52px"
+      />
+      <Flex py="base" gap="base">
         <FormIcon icon={icon} />
         <Controller
           control={control}

package/src/components/forms/dynamicForm/fields/TileBodyFields.tsx

@@ -0,0 +1,34 @@
+import { fieldIcons } from '@/helpers'
+import { FieldTypesI } from '@/interfaces'
+import { VerticalIcon, TileBodySectionGrid } from '@/components'
+
+export const TileBodyFields = ({ fields }: FieldTypesI) => {
+  return (
+    <>
+      {fields?.map(({ children, id, name, type, value, icon }) => {
+        const baseProps = {
+          key: id,
+          id,
+          icon: icon ? fieldIcons[icon] : undefined,
+          placeholder: name,
+          value,
+        }
+        switch (type) {
+          case 'tile-body-section-grid':
+            return <TileBodySectionGrid key={id} fields={children} />
+          case 'vertical-icon':
+            return (
+              <VerticalIcon
+                key={id}
+                icon={baseProps.icon}
+                value={String(baseProps.value)}
+              />
+            )
+
+          default:
+            return null
+        }
+      })}
+    </>
+  )
+}

package/src/components/forms/dynamicForm/fields/TileFooterFields.tsx

@@ -0,0 +1,49 @@
+import { fieldIcons } from '@/helpers'
+import { FieldTypesI } from '@/interfaces'
+import { TileBodyAction, TileCta } from '@/components'
+
+export const TileFooterFields = ({ callback, fields }: FieldTypesI) => {
+  return (
+    <>
+      {fields?.map(
+        ({ children, description, id, name, type, value, icon, link }) => {
+          const baseProps = {
+            key: id,
+            id,
+            icon: icon ? fieldIcons[icon] : undefined,
+            placeholder: name,
+            value,
+          }
+          switch (type) {
+            case 'tile-body-action':
+              return (
+                <TileBodyAction
+                  key={id}
+                  fields={children}
+                  callback={callback}
+                />
+              )
+            case 'primary-cta':
+            case 'secondary-cta':
+              return (
+                <TileCta
+                  key={id}
+                  callback={callback}
+                  description={description}
+                  icon={icon}
+                  id={id}
+                  name={name}
+                  type={type}
+                  link={link}
+                  value={String(baseProps.value)}
+                />
+              )
+
+            default:
+              return null
+          }
+        }
+      )}
+    </>
+  )
+}

package/src/components/forms/dynamicForm/fields/TileHeaderFields.tsx

@@ -0,0 +1,40 @@
+import { fieldIcons } from '@/helpers'
+import { FieldTypesI } from '@/interfaces'
+import { TileBodyHeader, TileBodyLogo } from '@/components'
+
+export const TileHeaderFields = ({ fields, menuItems }: FieldTypesI) => {
+  return (
+    <>
+      {fields?.map(({ id, name, type, value, icon }) => {
+        const baseProps = {
+          key: id,
+          id,
+          icon: icon ? fieldIcons[icon] : undefined,
+          placeholder: name,
+          value,
+        }
+        switch (type) {
+          case 'tile-body-header':
+            return (
+              <TileBodyHeader
+                key={baseProps.key}
+                value={String(baseProps.value)}
+              />
+            )
+          case 'tile-body-logo':
+            return (
+              <TileBodyLogo
+                key={baseProps.key}
+                name={name}
+                value={String(baseProps.value)}
+                menuItems={menuItems}
+              />
+            )
+
+          default:
+            return null
+        }
+      })}
+    </>
+  )
+}

package/src/components/forms/dynamicForm/fields/index.ts

@@ -14,4 +14,7 @@ export * from './SelectField'
 export * from './SingleFields'
 export * from './TextAreaField'
 export * from './TextField'
+export * from './TileBodyFields'
+export * from './TileFooterFields'
+export * from './TileHeaderFields'
 export * from './uiFields'

package/src/components/forms/dynamicForm/fields/uiFields/TileBody.tsx

@@ -1,6 +1,12 @@
 import { Box, Stack } from '@chakra-ui/react'
 import { TileBodyI } from '@/interfaces'
-import { PartnerFooter, SingleFields } from '@/components'
+import {
+  PartnerFooter,
+  SingleFields,
+  TileBodyFields,
+  TileFooterFields,
+  TileHeaderFields,
+} from '@/components'
 
 export const TileBody = ({
   callback,
@@ -10,14 +16,22 @@ export const TileBody = ({
   ...props
 }: TileBodyI) => {
   return (
-    <Box display="flex" flexDir="column" bg="neutral.white" boxShadow="lg">
-      <Stack spacing="0" flex="1">
-        <SingleFields
-          callback={callback}
-          fields={fields}
-          menuItems={menuItems}
-        />
-        <PartnerFooter {...props} websiteUrl={websiteUrl} />
+    <Box
+      display="flex"
+      flexGrow={1}
+      flexDir="column"
+      bg="neutral.white"
+      boxShadow="lg"
+    >
+      <Stack spacing="0" flex="1" justify="space-between">
+        <Box>
+          <TileHeaderFields fields={fields} menuItems={menuItems} />
+        </Box>
+        <TileBodyFields fields={fields} />
+        <Stack spacing="0" bg="lightBlue.1" pt="base">
+          <TileFooterFields callback={callback} fields={fields} />
+          <PartnerFooter {...props} websiteUrl={websiteUrl} />
+        </Stack>
       </Stack>
     </Box>
   )

package/src/components/forms/dynamicForm/fields/uiFields/TileBodyLogo.tsx

@@ -6,5 +6,12 @@ export const TileBodyLogo = ({
   name = '',
   value,
 }: TileBodyLogoI) => {
-  return <PartnerHeader logo={value} partnerName={name} menuItems={menuItems} />
+  return (
+    <PartnerHeader
+      borderColor="lightBlue.6"
+      logo={value}
+      partnerName={name}
+      menuItems={menuItems}
+    />
+  )
 }

package/src/components/forms/dynamicForm/fields/uiFields/TileBodySectionGrid.tsx

@@ -1,4 +1,4 @@
-import { SimpleGrid } from '@chakra-ui/react'
+import { Center, SimpleGrid } from '@chakra-ui/react'
 import { SingleFields } from '@/components'
 import { TileBodyI } from '@/interfaces'
 

package/src/components/forms/dynamicForm/fields/uiFields/TileCta.tsx

@@ -8,6 +8,7 @@ export const TileCta = ({ callback, ...props }: TileCtaI) => {
       onClick={() => callback?.({ ...props })}
       variant={type === 'primary-cta' ? 'tertiaryFooter' : 'secondaryFooter'}
       fontSize="sm"
+      maxW="full"
     >
       {value}
     </Button>

package/src/components/forms/dynamicForm/fields/uiFields/VerticalIcon.tsx

@@ -1,4 +1,4 @@
-import { Box, Image, Text } from '@chakra-ui/react'
+import { Box, Center, Image, Text } from '@chakra-ui/react'
 import { VerticalIconI } from '@/interfaces'
 
 export const VerticalIcon = ({ icon, value }: VerticalIconI) => {
@@ -12,20 +12,22 @@ export const VerticalIcon = ({ icon, value }: VerticalIconI) => {
       flexDirection="column"
       alignItems="center"
       justifyContent="center"
+      minH="110px"
     >
       <Box h="46px" display="flex" alignItems="center">
         <Image src={icon} alt={value} w="auto" h="80%" />
       </Box>
-      <Box pb="2">
+      <Center pb="2">
         <Text
           fontWeight="semibold"
           textAlign="center"
           fontSize="13px"
           lineHeight="14px"
+          w="70%"
         >
           {value}
         </Text>
-      </Box>
+      </Center>
     </Box>
   )
 }

package/src/components/homeAssistant/HomeAssistant.tsx

@@ -10,6 +10,7 @@ import { HomeAssistantStepsI } from '@/interfaces'
 export const HomeAssistant = ({
   showTutorial = false,
   tutorialUrl = '',
+  onStart,
   ...props
 }: HomeAssistantStepsI) => {
   const [startSetup, setStartSetup] = useState(false)
@@ -21,7 +22,7 @@ export const HomeAssistant = ({
     >
       {!startSetup && showTutorial && (
         <HomeAssistantTutorial
-          onStart={() => setStartSetup(true)}
+          onStart={onStart ? onStart : () => setStartSetup(true)}
           videoUrl={tutorialUrl}
         />
       )}

package/src/components/homeAssistant/HomeAssistantButton.tsx

@@ -17,7 +17,7 @@ export const HomeAssistantButton = ({
   }
   const buttonId = `homeAssistantButton-${currentStep}`
   return (
-    <Box position="relative" id={buttonId}>
+    <Box position="relative" id={buttonId} zIndex="2">
       {isCompleted && (
         <Image
           src={CheckInCircle}

package/src/components/homeAssistant/HomeMonitorButton.tsx

@@ -12,7 +12,7 @@ export const HomeMonitorButton = ({
   const iconAltText = getIconAltText(step.icon)
 
   return (
-    <Box position="relative" id={buttonId}>
+    <Box position="relative" id={buttonId} zIndex="2">
       <Box
         position="relative"
         bg="neutral.white"
@@ -36,10 +36,10 @@ export const HomeMonitorButton = ({
           as="button"
           spacing="2"
           border="1px solid transparent"
-          w="90px"
           align="center"
           h="96px"
-          py="base"
+          w="100%"
+          p="base"
           {...setStyles(status)}
           onClick={() => onStepClick(currentStep)}
         >

package/src/components/homeAssistant/HomeMonitorSteps.tsx

@@ -3,7 +3,7 @@ import { HomeMonitortStepsI } from '@/interfaces'
 import { HomeMonitorButton, IconMenu, MoreHorizontal } from '@/components'
 import { homeAssistantSteps } from '@/helpers'
 import { useComponentStyles } from '@/hooks'
-import { useState } from 'react'
+import { Fragment, useState } from 'react'
 
 export const HomeMonitorSteps = ({
   menuItems = [],
@@ -24,10 +24,10 @@ export const HomeMonitorSteps = ({
   useComponentStyles({ ids, selectedId, zIndex: '2' })
   const handleStepClick = (step: number) => onStepClick(step)
   return (
-    <Flex gap="base">
+    <Flex gap="base" justify="center">
       {homeAssistantSteps.map((step, index) => (
-        <Box key={step?.title} position="relative">
-          <Box flex="auto">
+        <Box key={step?.title} position="relative" flex="1">
+          <Fragment>
             <HomeMonitorButton
               currentStep={index + 1}
               onStepClick={handleStepClick}
@@ -44,7 +44,7 @@ export const HomeMonitorSteps = ({
                 onClick={() => setSelectedId(`homeMonitorButton-${index + 1}`)}
               />
             </Box>
-          </Box>
+          </Fragment>
         </Box>
       ))}
     </Flex>

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

@@ -32,6 +32,7 @@ export const HomeAssistantPanel = ({
   onSave,
   backDisabled,
   nextDisabled,
+  hasCompleted
 }: PropsWithChildren<HomeAssistantPanelI>) => {
   const [addedAppliances, updateAddedAppliances] = useState<AppliancesType[]>([])
   const { title } = homeAssistantSteps[currentStep - 1]
@@ -90,10 +91,10 @@ export const HomeAssistantPanel = ({
           }}
           button2={{
             buttonStyle: 'primaryFooter',
-            label: t('buttons.saveStep'),
+            label: !hasCompleted && currentStep === 6 ? t('buttons.finish') : t('buttons.saveStep'),
             onClick: () => onSave(updatedFields),
           }}
-          button3={{
+          button3={(!hasCompleted && currentStep === 6) ? undefined : {
             buttonStyle: 'primaryFooter',
             label: t('buttons.next'),
             onClick: onNext,