@homefile/components-v2 2.3.1 → 2.5.0

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

@@ -50,6 +50,7 @@ import {
   HomeCleaning,
   HouseWashing,
   PressureWasher,
+  BookOpened,
 } 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,

package/src/hooks/inbox/index.ts

@@ -0,0 +1 @@
+export * from './useMessagePanel'

package/src/hooks/inbox/useMessagePanel.ts

@@ -0,0 +1,23 @@
+import { t } from 'i18next'
+import { useState } 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'))
+
+  const handleSelectItem = (item: string | SelectItemI<string>) => {
+    if (typeof item !== 'string') return
+    setCurrentSort(item)
+
+    if (item === t('forms.sortBy')) {
+      return setSortedMessages(messages)
+    }
+
+    setSortedMessages(messages.filter((message) => message.isNew))
+  }
+
+  const items = [t('forms.sortBy'), t('forms.new')] as string[]
+
+  return { currentSort, sortedMessages, handleSelectItem, items }
+}

package/src/hooks/index.ts

@@ -9,6 +9,7 @@ export * from './folderPanel'
 export * from './forms'
 export * from './help'
 export * from './homeBoard'
+export * from './inbox'
 export * from './inputs'
 export * from './launchpad'
 export * from './myHomes'

package/src/hooks/notifications/useNotificationsPanel.ts

@@ -31,11 +31,6 @@ export const useNotificationsPanel = ({
 
   const items = [
     t('forms.sortBy'),
-    t('notifications.types.contact'),
-    t('notifications.types.file'),
-    t('notifications.types.folder'),
-    t('notifications.types.payment'),
-    t('notifications.types.receipt'),
     t('notifications.status.added'),
     t('notifications.status.removed'),
     t('notifications.status.shared'),

package/src/index.ts

@@ -87,6 +87,8 @@ export {
   LaunchpadTour,
   LeftPanel,
   MediaDetailsStep,
+  MessagePanel,
+  MessageChatPanel,
   MonitorAlerts,
   MonthlyCharge,
   MortgageInfo,

package/src/interfaces/appBar/UserProfile.interface.ts

@@ -1,9 +1,9 @@
-import { MenuItemI } from "@/interfaces"
+import { MenuItemI } from '@/interfaces'
 
 export interface UserProfileI {
   avatarUrl: string
   firstName: string
   userName: string
-  menuItems: MenuItemI[]
+  menuItems?: MenuItemI[]
   bg: string
 }

package/src/interfaces/footers/FooterButtons.interface.ts

@@ -1,4 +1,4 @@
-type  ButtonStyleProps = 'primaryFooter' | 'secondaryFooter' | 'tertiaryFooter'
+type ButtonStyleProps = 'primaryFooter' | 'secondaryFooter' | 'tertiaryFooter'
 
 export interface FooterButtonI {
   buttonStyle: ButtonStyleProps | string
@@ -13,4 +13,5 @@ export interface FooterButtonsI {
   button1?: FooterButtonI
   button2?: FooterButtonI | null
   button3?: FooterButtonI
+  px?: string
 }

package/src/interfaces/forms/BaseCounter.interface.ts

@@ -0,0 +1,5 @@
+export interface BaseCounterI {
+  text: string
+  uploading?: boolean
+  uploadingText?: string
+}

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

@@ -10,6 +10,7 @@ type KindTypes =
   | 'grid'
   | 'group'
   | 'hidden'
+  | 'notes'
   | 'number'
   | 'radio'
   | 'rating'
@@ -35,13 +36,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 +138,5 @@ export interface DynamicFormProxyI {
 
 export interface ReadOnlyDynamicFormI extends Pick<DynamicFormI, 'form'> {
   onEdit?: (id: string) => void
+  onClick?: (id: string) => void
 }

package/src/interfaces/forms/index.ts

@@ -1,6 +1,7 @@
 export * from './dynamicForm'
 export * from './readOnly'
 export * from './Address.interface'
+export * from './BaseCounter.interface'
 export * from './Collapsible.interface'
 export * from './EditItemName.interface'
 export * from './Input.interface'

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

@@ -0,0 +1,18 @@
+import { UserProfileI } from '@/interfaces'
+
+export interface InboxMessageI {
+  _id: string
+  currentUser?: Partial<UserProfileI>
+  chatReplies?: InboxMessageI[]
+  description?: string
+  date: Date
+  from: string
+  isNew?: boolean
+  subject?: string
+}
+
+export interface MessageCardI {
+  message: InboxMessageI
+  onClick?: (message: InboxMessageI) => void
+  variant?: 'inbox' | 'chat'
+}

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

@@ -0,0 +1,13 @@
+import { InboxMessageI } from '@/interfaces'
+
+interface InboxMessageReplyI {
+  id: string
+  message: string
+}
+
+export interface MessageChatPanelI {
+  message?: InboxMessageI
+  onReply: (props: InboxMessageReplyI) => void
+  onClose: () => void
+  onBack: () => void
+}

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

@@ -0,0 +1,7 @@
+import { InboxMessageI } from '@/interfaces'
+
+export interface MessagePanelI {
+  messages: InboxMessageI[]
+  onClick: (message: InboxMessageI) => void
+  onClose: () => void
+}

package/src/interfaces/inboxTile/index.ts

@@ -1,2 +1,5 @@
 export * from './InboxCard.interface'
 export * from './InboxTile.interface'
+export * from './MessageCard.interface'
+export * from './MessageChatPanel.interface'
+export * from './MessagePanel.interface'

package/src/interfaces/notifications/NotificationsPanel.interface.ts

@@ -1,20 +1,14 @@
-type NotificationType =
-  | 'file'
-  | 'folder'
-  | 'contact'
-  | 'receipt'
-  | 'user'
-  | 'tile'
-  | 'payment'
+type NotificationType = 'simple'
 type NotificationStatus = 'added' | 'removed' | 'updated' | 'shared'
 
 export interface NotificationCardI {
   active: boolean
   createdAt: Date
   _id: string
+  label: string
   message: string
   status: NotificationStatus
-  type: NotificationType
+  type?: NotificationType
 }
 
 export interface NotificationsPanelI {

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

@@ -646,4 +646,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/index.ts

@@ -0,0 +1 @@
+export * from './messages'

package/src/mocks/inbox/messages.ts

@@ -0,0 +1,139 @@
+import { InboxMessageI } from '@/interfaces'
+import { faker } from '@faker-js/faker'
+
+const currentUserName = faker.internet.userName()
+
+export const messagesMock: InboxMessageI[] = [
+  {
+    _id: faker.database.mongodbObjectId(),
+    chatReplies: [
+      {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [],
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: faker.person.fullName(),
+        isNew: false,
+        subject: faker.lorem.words(),
+      },
+      {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [
+          {
+            _id: faker.database.mongodbObjectId(),
+            chatReplies: [],
+            description: faker.lorem.paragraphs(),
+            date: faker.date.recent(),
+            from: faker.person.fullName(),
+            isNew: false,
+            subject: faker.lorem.words(),
+          },
+        ],
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: currentUserName,
+        isNew: false,
+        subject: faker.lorem.words(),
+      },
+    ],
+    currentUser: {
+      userName: currentUserName,
+    },
+    date: faker.date.recent(),
+    from: faker.person.fullName(),
+    isNew: true,
+    subject: faker.lorem.words(),
+  },
+  {
+    _id: faker.database.mongodbObjectId(),
+    chatReplies: [
+      {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [],
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: faker.person.fullName(),
+        isNew: false,
+        subject: faker.lorem.words(),
+      },
+      {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [],
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: currentUserName,
+        isNew: false,
+        subject: faker.lorem.words(),
+      },
+      {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [],
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: faker.person.fullName(),
+        isNew: false,
+        subject: faker.lorem.words(),
+      },
+    ],
+    currentUser: {
+      userName: currentUserName,
+    },
+    description: faker.lorem.paragraphs(),
+    date: faker.date.recent(),
+    from: faker.person.fullName(),
+    isNew: false,
+  },
+  {
+    _id: faker.database.mongodbObjectId(),
+    chatReplies: [
+      {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [],
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: faker.person.fullName(),
+        isNew: false,
+        subject: faker.lorem.words(),
+      },
+    ],
+    currentUser: {
+      userName: currentUserName,
+    },
+    description: faker.lorem.paragraphs(),
+    date: faker.date.recent(),
+    from: faker.person.fullName(),
+    isNew: true,
+    subject: faker.lorem.words(),
+  },
+  {
+    _id: faker.database.mongodbObjectId(),
+    chatReplies: [
+      {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [],
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: currentUserName,
+        isNew: false,
+        subject: faker.lorem.words(),
+      },
+      {
+        _id: faker.database.mongodbObjectId(),
+        chatReplies: [],
+        description: faker.lorem.paragraphs(),
+        date: faker.date.recent(),
+        from: faker.person.fullName(),
+        isNew: false,
+        subject: faker.lorem.words(),
+      },
+    ],
+    currentUser: {
+      userName: currentUserName,
+    },
+    description: faker.lorem.paragraphs(),
+    date: faker.date.recent(),
+    from: faker.person.fullName(),
+    isNew: false,
+    subject: faker.lorem.words(),
+  },
+]

package/src/mocks/index.ts

@@ -3,6 +3,7 @@ export * from './contacts'
 export * from './folderPanel'
 export * from './forms'
 export * from './homeAssistant'
+export * from './inbox'
 export * from './myHomes'
 export * from './myProfile'
 export * from './notifications'

package/src/mocks/notifications/notifications.mock.ts

@@ -8,7 +8,7 @@ export const notificationsMock: NotificationCardI[] = [
     createdAt: new Date(),
     message: faker.lorem.sentence(),
     status: 'added',
-    type: 'contact',
+    label: 'contact added',
   },
   {
     active: true,
@@ -16,7 +16,7 @@ export const notificationsMock: NotificationCardI[] = [
     createdAt: new Date(),
     message: faker.lorem.sentence(),
     status: 'removed',
-    type: 'file',
+    label: 'file removed',
   },
   {
     active: true,
@@ -24,7 +24,7 @@ export const notificationsMock: NotificationCardI[] = [
     createdAt: new Date(),
     message: faker.lorem.sentence(),
     status: 'shared',
-    type: 'folder',
+    label: 'folder shared',
   },
   {
     active: true,
@@ -32,6 +32,6 @@ export const notificationsMock: NotificationCardI[] = [
     createdAt: new Date(),
     message: faker.lorem.sentence(),
     status: 'updated',
-    type: 'payment',
+    label: 'updated payment',
   },
 ]

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

@@ -46,6 +46,7 @@ import {
   DiningRoom,
   DocIcon,
   Document,
+  Document2,
   Doors,
   Drop,
   DropCalendar,
@@ -186,6 +187,7 @@ import {
   WizardQuick,
   YellowFolder,
   YellowFolderUnshared,
+  BookOpened,
 } from '@/assets/images'
 
 import {
@@ -278,6 +280,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" />
@@ -304,6 +307,7 @@ export const Illustrations = () => {
       <IconWrapper icon={DiningRoom} name="DiningRoom" />
       <IconWrapper icon={DocIcon} name="DocIcon" />
       <IconWrapper icon={Document} name="Document" />
+      <IconWrapper icon={Document2} name="Document2" />
       <IconWrapper icon={Drop} name="Drop" />
       <IconWrapper icon={DropCalendar} name="DropCalendar" />
       <IconWrapper icon={Electricity} name="Electricity" />

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

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

package/src/stories/inboxTile/MessagePanel.stories.tsx

@@ -0,0 +1,47 @@
+import { Meta } from '@storybook/react'
+import { MessageChatPanel, MessagePanel, RightPanel } from '@/components'
+import { action } from '@storybook/addon-actions'
+import { InboxMessageI, MessagePanelI } from '@/interfaces'
+import { messagesMock } from '@/mocks'
+import { Fragment, useState } from 'react'
+
+export default {
+  title: 'Components/Inbox',
+  component: MessagePanel,
+  args: {
+    messages: messagesMock,
+  },
+  decorators: [
+    (Story) => (
+      <RightPanel isOpen onClose={action('onClose')}>
+        <Story />
+      </RightPanel>
+    ),
+  ],
+} as Meta<MessagePanelI>
+
+export const MessagePanelComponent = (args: MessagePanelI) => {
+  const [showMessageChat, setShowMessageChat] = useState(false)
+  const [selectedMessage, setSelectedMessage] =
+    useState<InboxMessageI | undefined>(undefined)
+  const handleMessageChatToggle = () => setShowMessageChat(!showMessageChat)
+  return (
+    <Fragment>
+      <MessagePanel
+        {...args}
+        onClick={(message) => {
+          setSelectedMessage(message)
+          handleMessageChatToggle()
+        }}
+      />
+      <RightPanel isOpen={showMessageChat} onClose={handleMessageChatToggle}>
+        <MessageChatPanel
+          message={selectedMessage}
+          onReply={action('onReply')}
+          onClose={action('onCloseChatPanel')}
+          onBack={handleMessageChatToggle}
+        />
+      </RightPanel>
+    </Fragment>
+  )
+}

package/src/theme/colors.ts

@@ -115,7 +115,10 @@ export const colors = {
     1: '#f5ddf4',
     2: '#F544DA',
   },
-  skyGradient: 'linear(to-b, #cff1fc, #F9FEFF)',
+  dayGradient: 'linear(to-b, #cff1fc, #F9FEFF)',
+  morningGradient: 'linear(to-b, #d2abf1, #f7dcac)',
+  eveningGradient: 'linear(to-b, #bcc5f2, #ee91f3)',
+  nightGradient: 'linear(to-b, #7a7bcf, #a4b0d7)',
   overlay: '#00000040',
   overlayWhite: '#FFFFFF80',
 }

package/src/utils/Animations.utils.ts

@@ -0,0 +1,39 @@
+export type TimeOfDay = 'morning' | 'day' | 'evening' | 'night'
+export type Season = 'spring' | 'summer' | 'fall' | 'winter'
+export type TimeOfDaySeason = `${TimeOfDay}-${Season}`
+
+export const getTimeOfDay = (): TimeOfDay => {
+  const currentHour = new Date().getHours()
+
+  switch (true) {
+    case currentHour >= 6 && currentHour < 12:
+      return 'morning'
+    case currentHour >= 12 && currentHour < 18:
+      return 'day'
+    case currentHour >= 18 && currentHour < 21:
+      return 'evening'
+    default:
+      return 'night'
+  }
+}
+
+export const getSeason = (): Season => {
+  const currentMonth = new Date().getMonth()
+
+  switch (true) {
+    case currentMonth >= 2 && currentMonth < 5:
+      return 'spring'
+    case currentMonth >= 5 && currentMonth < 8:
+      return 'summer'
+    case currentMonth >= 8 && currentMonth < 11:
+      return 'fall'
+    default:
+      return 'winter'
+  }
+}
+
+export const getTimeOfDaySeason = (): TimeOfDaySeason => {
+  const timeOfDay = getTimeOfDay()
+  const season = getSeason()
+  return `${timeOfDay}-${season}` as TimeOfDaySeason
+}

package/src/utils/Avatars.utils.ts

@@ -34,9 +34,9 @@ const colors = [
   '#37323E',
 ]
 
-export const randomColor = (index: number) => {
+export const randomColor = (index = Math.floor(Math.random() * 30)) => {
   if (index >= colors.length) {
     return colors[index % colors.length]
   }
   return colors[index]
-}
+}

package/src/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './AddMedia.utils'
+export * from './Animations.utils'
 export * from './Avatars.utils'
 export * from './BrowserDetectors.utils'
 export * from './BubblesTour.utils'