@homefile/components-v2 2.4.0 → 2.6.0

package/src/components/forms/readOnly/fields/ReadOnlyNotes.tsx

@@ -0,0 +1,16 @@
+import { Stack, Text } from '@chakra-ui/react'
+import { ReportI } from '@/interfaces'
+
+export const ReadOnlyNotes = ({
+  name,
+  value,
+}: Pick<ReportI, 'name' | 'value'>) => {
+  return (
+    <Stack p="base" spacing="base">
+      <Text fontSize="xs" textTransform="uppercase">
+        {name}
+      </Text>
+      <Text fontFamily="secondary">{value}</Text>
+    </Stack>
+  )
+}

package/src/components/forms/readOnly/fields/homeItem/ReadOnlyAppliances.tsx

@@ -19,7 +19,7 @@ export const ReadOnlyAppliances = ({
   const rating = children?.find(({ type }) => type === 'rating')
   const images = children?.find(({ type }) => type === 'images')
   return (
-    <Stack spacing="base" p="base">
+    <Stack spacing="base" p="base" bg="neutral.white" mt="2px">
       <Flex justify="space-between">
         <Text fontSize="xs" textTransform="uppercase">
           {name}

package/src/components/forms/readOnly/fields/homeItem/ReadOnlyGuidelines.tsx

@@ -0,0 +1,33 @@
+import { Text, Stack, Grid } from '@chakra-ui/react'
+import { HiddenField } from '@/components'
+import { ReadOnlyGuidelinesI } from '@/interfaces'
+import { fieldIcons } from '@/helpers'
+
+export const ReadOnlyGuidelines = ({
+  name,
+  children,
+  onClick,
+}: ReadOnlyGuidelinesI) => {
+  return (
+    <Stack spacing="base">
+      <Text fontSize="xs" textTransform="uppercase">
+        {name}
+      </Text>
+      <Grid templateColumns="repeat(2, minmax(80px, 1fr))" gap="base">
+        {children?.map((child) => {
+          const { id, icon, value } = child
+          const btnIcon = icon ? fieldIcons[icon] : ''
+          return (
+            <HiddenField
+              key={id}
+              id={id}
+              icon={btnIcon}
+              name={value as string}
+              onClick={() => onClick?.(id)}
+            />
+          )
+        })}
+      </Grid>
+    </Stack>
+  )
+}

package/src/components/forms/readOnly/fields/homeItem/ReadOnlyHomeItemImages.tsx

@@ -14,6 +14,7 @@ export const ReadOnlyHomeItemImages = (props: Partial<ReportI>) => {
       <SimpleGrid columns={4} spacing="base">
         {images?.map((image) => (
           <Box
+            key={image}
             as="button"
             backgroundImage={image}
             backgroundSize="cover"

package/src/components/forms/readOnly/fields/homeItem/ReadOnlyItemRelated.tsx

@@ -0,0 +1,40 @@
+import { Text, Stack, Grid, Box } from '@chakra-ui/react'
+import { HiddenField } from '@/components'
+import { ReadOnlyGuidelinesI } from '@/interfaces'
+import { fieldIcons } from '@/helpers'
+
+export const ReadOnlyItemRelated = ({
+  name,
+  children,
+  onClick,
+}: ReadOnlyGuidelinesI) => {
+  return (
+    <Box
+      borderLeft="1px solid"
+      borderColor="lightBlue.6"
+      pl="4"
+      marginInlineStart="auto"
+    >
+      <Stack spacing="base">
+        <Text fontSize="xs" textTransform="uppercase">
+          {name}
+        </Text>
+        <Grid templateColumns="repeat(2, minmax(80px, 1fr))" gap="base">
+          {children?.map((child) => {
+            const { id, icon, value } = child
+            const btnIcon = icon ? fieldIcons[icon] : ''
+            return (
+              <HiddenField
+                key={id}
+                id={id}
+                icon={btnIcon}
+                name={value as string}
+                onClick={() => onClick?.(id)}
+              />
+            )
+          })}
+        </Grid>
+      </Stack>
+    </Box>
+  )
+}

package/src/components/forms/readOnly/fields/homeItem/index.ts

@@ -1,4 +1,6 @@
 export * from './ReadOnlyAppliances'
+export * from './ReadOnlyGuidelines'
 export * from './ReadOnlyHomeItemImages'
 export * from './ReadOnlyHomeItemRating'
 export * from './ReadOnlyHomeItemText'
+export * from './ReadOnlyItemRelated'

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

@@ -4,6 +4,7 @@ export * from './ReadOnlyImage'
 export * from './ReadOnlyGrid'
 export * from './ReadOnlyGroup'
 export * from './ReadOnlyInput'
+export * from './ReadOnlyNotes'
 export * from './ReadOnlyRating'
 export * from './ReadOnlyTextArea'
 export * from './ReadOnlyWrapper'

package/src/components/homeItems/ViewingHomeItemPanel.tsx

@@ -6,6 +6,7 @@ import { ViewingHomeItemPanelI } from '@/interfaces'
 
 export const ViewingHomeItemPanel = ({
   form,
+  onClick,
   onClose,
   onEdit,
 }: ViewingHomeItemPanelI) => {
@@ -38,7 +39,7 @@ export const ViewingHomeItemPanel = ({
           <TabsHeader tabList={tabs} rightTabList={rightTabs} />
         </Box>
       </DrawerHeader>
-      <ReadOnlyDynamicForm form={form} onEdit={onEdit} />
+      <ReadOnlyDynamicForm form={form} onClick={onClick} onEdit={onEdit} />
     </DrawerContent>
   )
 }

package/src/components/inboxTile/panel/MessageCard.tsx

@@ -20,8 +20,15 @@ export const MessageCard = ({
   onClick,
   variant = 'inbox',
 }: MessageCardI) => {
-  const { currentUser, from, subject, date, isNew, chatReplies, description } =
-    message
+  const {
+    currentUser,
+    from,
+    subject,
+    date,
+    isNew,
+    chatReplies,
+    description = '',
+  } = message
   const formattedDate = formatDateWithAt({ date })
   const showChatBubble = Number(chatReplies?.length) > 0
   const isInbox = variant === 'inbox'
@@ -99,11 +106,23 @@ export const MessageCard = ({
               )}
             </Flex>
             {isInbox && (
-              <Text variant="home" noOfLines={3} textOverflow="ellipsis">
-                {description}
-              </Text>
+              <Text
+                variant="home"
+                noOfLines={3}
+                textOverflow="ellipsis"
+                dangerouslySetInnerHTML={{
+                  __html: description,
+                }}
+              />
+            )}
+            {!isInbox && (
+              <Text
+                variant="home"
+                dangerouslySetInnerHTML={{
+                  __html: description,
+                }}
+              />
             )}
-            {!isInbox && <Text variant="home">{description}</Text>}
           </Stack>
         </Box>
       </Container>

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

@@ -41,7 +41,6 @@ import {
   Roof2,
   Target,
   CircleFace,
-  Company,
   Pressure,
   WindowCleaning,
   RoofCleaning,
@@ -50,6 +49,8 @@ import {
   HomeCleaning,
   HouseWashing,
   PressureWasher,
+  BookOpened,
+  Company2,
 } from '@/assets/images'
 import { IconTypes } from '@/interfaces'
 
@@ -57,6 +58,7 @@ export const fieldIcons: Record<IconTypes, string> = {
   barcode: Barcode,
   billing: Billing,
   book: Book,
+  'book-opened': BookOpened,
   calc: Calc,
   check: CheckPen,
   contact: Contacts,
@@ -98,7 +100,7 @@ export const fieldIcons: Record<IconTypes, string> = {
   house: Structure,
   target: Target,
   title: CircleFace,
-  company: Company,
+  company: Company2,
   'sh-gutter': GutterCleaning,
   'sh-home': HomeCleaning,
   'sh-house': HouseWashing,

package/src/hooks/inbox/useMessagePanel.ts

@@ -1,11 +1,15 @@
 import { t } from 'i18next'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { InboxMessageI, SelectItemI } from '@/interfaces'
 
 export const useMessagePanel = (messages: InboxMessageI[]) => {
   const [sortedMessages, setSortedMessages] = useState(messages)
   const [currentSort, setCurrentSort] = useState<string>(t('forms.sortBy'))
 
+  useEffect(() => {
+    setSortedMessages(messages)
+  }, [messages])
+
   const handleSelectItem = (item: string | SelectItemI<string>) => {
     if (typeof item !== 'string') return
     setCurrentSort(item)

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

@@ -2,6 +2,7 @@ import { FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '@/interfaces'
 
 type KindTypes =
   | 'checkbox'
+  | 'checkbox-agreement'
   | 'checkbox-group'
   | 'currency'
   | 'date'
@@ -10,6 +11,7 @@ type KindTypes =
   | 'grid'
   | 'group'
   | 'hidden'
+  | 'notes'
   | 'number'
   | 'radio'
   | 'rating'
@@ -35,13 +37,19 @@ type UIKindTypes =
   | 'primary-cta'
   | 'secondary-cta'
 
-type HomeItemTypes = 'appliances' | 'images'
+type HomeItemTypes =
+  | 'appliances'
+  | 'images'
+  | 'guidelines'
+  | 'item-related'
+  | 'item-icon-btn'
 
 export type IconTypes =
   | 'barcode'
   | 'battery'
   | 'billing'
   | 'book'
+  | 'book-opened'
   | 'calc'
   | 'calendar'
   | 'check'
@@ -131,4 +139,5 @@ export interface DynamicFormProxyI {
 
 export interface ReadOnlyDynamicFormI extends Pick<DynamicFormI, 'form'> {
   onEdit?: (id: string) => void
+  onClick?: (id: string) => void
 }

package/src/interfaces/forms/readOnly/ReadOnlyGrid.interface.ts

@@ -3,4 +3,6 @@ import { FlexProps } from '@chakra-ui/react'
 
 export interface ReadOnlyGridI
   extends Pick<ReportI, 'children'>,
-    Omit<FlexProps, 'children'> {}
+    Omit<FlexProps, 'children' | 'onClick'> {
+  onClick?: (id: string) => void
+}

package/src/interfaces/forms/readOnly/homeItem/ReadOnlyGuidelines.interface.ts

@@ -0,0 +1,6 @@
+import { ReportI } from '@/interfaces'
+
+export interface ReadOnlyGuidelinesI
+  extends Pick<ReportI, 'children' | 'name'> {
+  onClick?: (id: string) => void
+}

package/src/interfaces/forms/readOnly/homeItem/index.ts

@@ -1 +1,2 @@
 export * from './ReadOnlyAppliances.interface'
+export * from './ReadOnlyGuidelines.interface'

package/src/interfaces/homeItems/ViewingHomeItemPanel.interface.ts

@@ -4,4 +4,5 @@ export interface ViewingHomeItemPanelI {
   form: ReportI[]
   onClose: () => void
   onEdit: (id: string) => void
+  onClick?: (id: string) => void
 }

package/src/interfaces/inboxTile/MessageCard.interface.ts

@@ -4,11 +4,11 @@ export interface InboxMessageI {
   _id: string
   currentUser?: Partial<UserProfileI>
   chatReplies?: InboxMessageI[]
-  description: string
+  description?: string
   date: Date
   from: string
   isNew?: boolean
-  subject: string
+  subject?: string
 }
 
 export interface MessageCardI {

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

@@ -3,6 +3,35 @@ import { ReportI } from '@/interfaces'
 import { faker } from '@faker-js/faker'
 
 export const formFieldsMock: ReportI[] = [
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Select to have Homefile find & add information on your item.',
+    description:
+      'Homefile has an extensive data base of products, but we will also search the web for the most relevant information around products. This includes details like warranty Information, manuals, price, energy info, product ratings, etc. If the item is not in our database, it will populate as soon as we add the info.',
+    value: false,
+    type: 'checkbox-agreement',
+    visible: true,
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Serial #',
+    description: faker.lorem.sentence(),
+    comments: faker.lorem.sentence(),
+    value: '',
+    type: 'text',
+    visible: true,
+    icon: 'barcode',
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Brand',
+    description: faker.lorem.sentence(),
+    comments: faker.lorem.sentence(),
+    value: '',
+    type: 'text',
+    visible: true,
+    icon: 'company',
+  },
   {
     id: faker.database.mongodbObjectId(),
     name: 'Services',
@@ -69,17 +98,6 @@ export const formFieldsMock: ReportI[] = [
       },
     ],
   },
-  {
-    id: faker.database.mongodbObjectId(),
-    name: 'Serial #',
-    description: faker.lorem.sentence(),
-    comments: faker.lorem.sentence(),
-    value: '',
-    type: 'default',
-    visible: false,
-    icon: 'barcode',
-  },
-
   {
     id: faker.database.mongodbObjectId(),
     name: 'Receipt',
@@ -646,4 +664,64 @@ export const viewingHomeItemMock: ReportI[] = [
       },
     ],
   },
+  {
+    id: faker.database.mongodbObjectId(),
+    value: '',
+    type: 'grid',
+    visible: true,
+    children: [
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Care & Guidelines',
+        value: '',
+        type: 'guidelines',
+        visible: true,
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            icon: 'umbrella',
+            value: 'warranty',
+            type: 'item-icon-btn',
+            visible: true,
+            link: 'www.kitchenaid.com',
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            icon: 'book-opened',
+            value: 'manual',
+            type: 'item-icon-btn',
+            visible: true,
+            link: 'www.kitchenaid.com',
+          },
+        ],
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Related',
+        value: '',
+        type: 'item-related',
+        visible: true,
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            icon: 'drop',
+            value: 'filter',
+            type: 'item-icon-btn',
+            visible: true,
+            link: 'www.kitchenaid.com',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: faker.database.mongodbObjectId(),
+    name: 'Notes',
+    description: '',
+    comments: faker.lorem.sentence(),
+    value: faker.lorem.paragraphs(),
+    type: 'notes',
+    visible: true,
+    options: [],
+  },
 ]

package/src/mocks/inbox/messages.ts

@@ -29,7 +29,7 @@ export const messagesMock: InboxMessageI[] = [
             subject: faker.lorem.words(),
           },
         ],
-        description: faker.lorem.paragraphs(),
+        description: `<p>${faker.lorem.paragraphs()}</p>`,
         date: faker.date.recent(),
         from: currentUserName,
         isNew: false,
@@ -39,8 +39,8 @@ export const messagesMock: InboxMessageI[] = [
     currentUser: {
       userName: currentUserName,
     },
-    description: faker.lorem.paragraphs(),
     date: faker.date.recent(),
+    description: `<span>${faker.lorem.paragraphs()}</span>`,
     from: faker.person.fullName(),
     isNew: true,
     subject: faker.lorem.words(),
@@ -83,7 +83,6 @@ export const messagesMock: InboxMessageI[] = [
     date: faker.date.recent(),
     from: faker.person.fullName(),
     isNew: false,
-    subject: faker.lorem.words(),
   },
   {
     _id: faker.database.mongodbObjectId(),

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

@@ -187,6 +187,8 @@ import {
   WizardQuick,
   YellowFolder,
   YellowFolderUnshared,
+  BookOpened,
+  Company2,
 } from '@/assets/images'
 
 import {
@@ -279,6 +281,7 @@ export const Illustrations = () => {
       <IconWrapper icon={BillingAddress} name="BillingAddress" />
       <IconWrapper icon={BlueFolder} name="BlueFolder" />
       <IconWrapper icon={BlueFolderShared} name="BlueFolderShared" />
+      <IconWrapper icon={BookOpened} name="BookOpened" />
       <IconWrapper icon={BoxIcon} name="Box" />
       <IconWrapper icon={Building} name="Building" />
       <IconWrapper icon={Calc} name="Calc" />
@@ -293,6 +296,7 @@ export const Illustrations = () => {
       <IconWrapper icon={Closet} name="Closet" />
       <IconWrapper icon={Co2} name="Co2" />
       <IconWrapper icon={Company} name="Company" />
+      <IconWrapper icon={Company2} name="Company2" />
       <IconWrapper icon={ComputerReport} name="ComputerReport" />
       <IconWrapper icon={Confirmation} name="Confirmation" />
       <IconWrapper icon={Construction} name="Construction" />

package/src/stories/homeItems/ViewingHomeItem.stories.tsx

@@ -10,6 +10,7 @@ export default {
   args: {
     form: viewingHomeItemMock,
     onEdit: action('onEdit'),
+    onClick: action('onClick'),
   },
   decorators: [
     (Story) => (