@homefile/components-v2 2.2.2 → 2.2.4

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 = [
     {

package/package.json

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

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,14 +175,15 @@ export const DynamicForm = ({
                 )
               case 'checkbox-group':
                 return (
-                  <CheckboxGroupField
-                    key={id}
-                    id={id}
-                    children={children}
-                    value={value}
-                    description={description}
-                    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,9 +14,8 @@ export const CheckboxGroupField = ({
   children,
   icon,
   id,
-  value,
-  description
-}: Pick<ReportI, 'children' | 'icon' | 'id' | 'value' | 'description'>) => {
+  description,
+}: Pick<ReportI, 'children' | 'icon' | 'id' | 'description'>) => {
   const { control } = useFormContext()
   const defaultValues = children
     ?.map((child) => {
@@ -27,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">
           {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" flexGrow={1} flexDir="column" bg="#f6f8f9" 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/TileBodyAction.tsx

@@ -4,7 +4,7 @@ import { TileBodyI } from '@/interfaces'
 
 export const TileBodyAction = ({ callback, fields }: TileBodyI) => {
   return (
-    <Flex p="base" align="center" gap="base" background={"#f6f8f9"}>
+    <Flex p="base" align="center" gap="base">
       <SingleFields fields={fields} callback={callback} />
     </Flex>
   )

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

@@ -2,7 +2,7 @@ import { Box, Text } from '@chakra-ui/react'
 
 export const TileBodyHeader = ({ value = '' }) => {
   return (
-    <Box borderTop={"1px solid #dbdbdb"} p="base" background={"#ffffff"}>
+    <Box p="base">
       <Text fontWeight="semibold">{value}</Text>
     </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,10 +1,10 @@
-import { SimpleGrid } from '@chakra-ui/react'
+import { Center, SimpleGrid } from '@chakra-ui/react'
 import { SingleFields } from '@/components'
 import { TileBodyI } from '@/interfaces'
 
 export const TileBodySectionGrid = ({ fields }: TileBodyI) => {
   return (
-    <SimpleGrid columns={3} spacing="base" p="base" background={"#ffffff"}>
+    <SimpleGrid columns={3} spacing="base" p="base">
       <SingleFields fields={fields} />
     </SimpleGrid>
   )

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/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,

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}
       />
     ),
   }
@@ -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/partner/PartnerFooter.tsx

@@ -18,7 +18,7 @@ export const PartnerFooter = ({
   }
 
   return (
-    <Flex background={"#f6f8f9"} align="center" justify="space-between" p="base">
+    <Flex align="center" justify="space-between" p="base">
       <Link href={websiteUrl} isExternal>
         <Text fontSize="xs" color="blue.3">
           {urlText ?? cleanedWebsiteUrl}

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,
@@ -58,6 +59,7 @@ export const fieldIcons: Record<IconTypes, string> = {
   book: Book,
   calc: Calc,
   check: CheckPen,
+  contact: Contacts,
   date: Calendar,
   default: GenericField,
   goldbars: GoldenBars,

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

@@ -43,6 +43,7 @@ export type IconTypes =
   | 'calendar'
   | 'check'
   | 'co2'
+  | 'contact'
   | 'date'
   | 'default'
   | 'detector'

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

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