@homefile/components-v2 2.2.1 → 2.2.3

package/src/components/homeBoard/HomeBoard.tsx

@@ -84,6 +84,8 @@ import {
   homeAssitantStep4FormMock,
   homeAssitantStep5FormMock,
   homeAssitantStep6FormMock,
+  tileUIMock,
+  socialLinksMock,
 } from '@/mocks'
 import { useHomeBoard, useWindowDimensions } from '@/hooks'
 import { Painting } from '@/assets/images'
@@ -271,6 +273,7 @@ export const HomeBoard = () => {
         onSave={() => {}}
         backDisabled={false}
         nextDisabled={false}
+        hasCompleted={true}
       />
     ),
   }
@@ -334,7 +337,7 @@ export const HomeBoard = () => {
                 title="Travis County Property Taxes"
               />
               <HomeMonitor>
-                <Stack spacing="base">
+                <Stack spacing="base" w="full" px="base">
                   <Flex gap="base">
                     <HomefileMonitoring />
                     <Notifications date="10-10-24" local="TX - Houston" />
@@ -351,6 +354,13 @@ export const HomeBoard = () => {
                   />
                 </Stack>
               </HomeMonitor>
+              <DynamicForm
+                form={tileUIMock}
+                menuItems={menuMock}
+                socialLinks={socialLinksMock}
+                showTitle={false}
+                websiteUrl="http://www.audreyscheckdesign.com"
+              />
 
               <Stack spacing="base">
                 <ReceiptAutofiler

package/src/components/launchpad/IconMenu.tsx

@@ -4,6 +4,7 @@ import {
   Menu,
   MenuItem,
   MenuList,
+  Box,
 } from '@chakra-ui/react'
 import { IconMenuI } from '@/interfaces'
 import { Overlay } from '@/components'
@@ -16,46 +17,43 @@ export const IconMenu = <T extends unknown>({
   onClick,
   variant = 'menuIcon',
   width = 'fit-content',
-  zIndex,
+  zIndex = '999',
 }: IconMenuI<T>) => {
   return (
-    <Menu isLazy>
-      {({ isOpen }) => (
-        <>
-          <Overlay
-            bg="overlay"
-            showOverlay={isOpen}
-            position="fixed"
-            zIndex={zIndex}
-          />
-          <MenuButton
-            as={IconButton}
-            aria-label="Options"
-            icon={icon}
-            variant={variant}
-            w={width}
-            disabled={disabled}
-            marginTop="0 !important"
-            onClick={onClick}
-          />
-          <MenuList zIndex="5">
-            {menuItems?.map(({ handleClick, label }) => (
-              <MenuItem
-                key={label}
-                onClick={() => handleClick(itemForm)}
-                _hover={{
-                  bg: 'lightGreen.1',
-                }}
-                _focus={{
-                  bg: 'lightGreen.1',
-                }}
-              >
-                {label}
-              </MenuItem>
-            ))}
-          </MenuList>
-        </>
-      )}
-    </Menu>
+    <Box zIndex={zIndex}>
+      <Menu isLazy>
+        {({ isOpen }) => (
+          <>
+            <Overlay bg="overlay" showOverlay={isOpen} position="fixed" />
+            <MenuButton
+              as={IconButton}
+              aria-label="Options"
+              icon={icon}
+              variant={variant}
+              w={width}
+              disabled={disabled}
+              marginTop="0 !important"
+              onClick={onClick}
+            />
+            <MenuList zIndex="5">
+              {menuItems?.map(({ handleClick, label }) => (
+                <MenuItem
+                  key={label}
+                  onClick={() => handleClick(itemForm)}
+                  _hover={{
+                    bg: 'lightGreen.1',
+                  }}
+                  _focus={{
+                    bg: 'lightGreen.1',
+                  }}
+                >
+                  {label}
+                </MenuItem>
+              ))}
+            </MenuList>
+          </>
+        )}
+      </Menu>
+    </Box>
   )
 }

package/src/components/partner/PartnerHeader.tsx

@@ -3,13 +3,21 @@ import { MoreHorizontal, IconMenu, HeaderPartnerLogo } from '@/components'
 import { PartnerHeaderI } from '@/interfaces'
 
 export const PartnerHeader = ({
+  borderColor = 'transparent',
   logo,
   menuItems = [],
   partnerName,
 }: PartnerHeaderI) => {
   const isDisabled = menuItems.length === 0
   return (
-    <Flex justify="space-between" align="center" p="base" bg="white">
+    <Flex
+      justify="space-between"
+      align="center"
+      p="base"
+      bg="neutral.white"
+      borderBottom="1px solid"
+      borderColor={borderColor}
+    >
       <HeaderPartnerLogo alt={`${partnerName} logo`} logo={logo} />
       <IconMenu
         icon={<MoreHorizontal size={38} />}

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

@@ -11,6 +11,7 @@ import {
   Registry,
   ShareWith,
   Calendar,
+  Contacts,
   Tools2,
   Billing,
   Calc,
@@ -47,6 +48,7 @@ import {
   HolidayLights,
   GutterCleaning,
   HomeCleaning,
+  HouseWashing,
   PressureWasher,
 } from '@/assets/images'
 import { IconTypes } from '@/interfaces'
@@ -57,6 +59,7 @@ export const fieldIcons: Record<IconTypes, string> = {
   book: Book,
   calc: Calc,
   check: CheckPen,
+  contact: Contacts,
   date: Calendar,
   default: GenericField,
   goldbars: GoldenBars,
@@ -98,6 +101,7 @@ export const fieldIcons: Record<IconTypes, string> = {
   company: Company,
   'sh-gutter': GutterCleaning,
   'sh-home': HomeCleaning,
+  'sh-house': HouseWashing,
   'sh-lights': HolidayLights,
   'sh-pressure': Pressure,
   'sh-roof': RoofCleaning,

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

@@ -43,6 +43,7 @@ export type IconTypes =
   | 'calendar'
   | 'check'
   | 'co2'
+  | 'contact'
   | 'date'
   | 'default'
   | 'detector'
@@ -88,6 +89,7 @@ export type UIIconTypes =
   | 'sh-lights'
   | 'sh-gutter'
   | 'sh-home'
+  | 'sh-house'
 
 export type ValueTypes = string | string[] | number | boolean
 export type OptionsTypes = string[] | number[] | null

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

@@ -10,4 +10,5 @@ export interface HomeAssistantPanelI {
   onSave: (form: ReportI[]) => void
   backDisabled: boolean
   nextDisabled: boolean
+  hasCompleted: boolean
 }

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

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

package/src/interfaces/partner/PartnerHeader.interface.ts

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

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

@@ -3,6 +3,72 @@ import { ReportI } from '@/interfaces'
 import { faker } from '@faker-js/faker'
 
 export const formFieldsMock: ReportI[] = [
+  {
+    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 #',
@@ -192,72 +258,6 @@ 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[] = [
@@ -496,6 +496,15 @@ export const tileUIMock: ReportI[] = [
             type: 'vertical-icon',
             icon: 'sh-gutter',
           },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            description: '',
+            comments: '',
+            value: 'House Washing',
+            type: 'vertical-icon',
+            icon: 'sh-house',
+          },
         ],
       },