@homefile/components-v2 2.2.4 → 2.3.0

package/src/components/notifications/NotificationCard.tsx

@@ -0,0 +1,162 @@
+import { t } from 'i18next'
+import { Container, Flex, IconButton, Stack, Text } from '@chakra-ui/react'
+import { NotificationCardI, NotificationsPanelI } from '@/interfaces'
+import { Close } from '@/components'
+import { formatDateWithAt } from '@/utils'
+
+export const NotificationCard = ({
+  _id,
+  createdAt,
+  message,
+  onDismiss,
+  status,
+  type,
+}: NotificationCardI & Pick<NotificationsPanelI, 'onDismiss'>) => {
+  const actionLabels: Record<
+    NotificationCardI['type'],
+    Record<NotificationCardI['status'], string>
+  > = {
+    contact: {
+      added: `${t('notifications.types.contact')} ${t(
+        'notifications.status.added'
+      )}`,
+      removed: `${t('notifications.types.contact')} ${t(
+        'notifications.status.removed'
+      )}`,
+      shared: `${t('notifications.status.shared')} ${t(
+        'notifications.types.contact'
+      )}`,
+      updated: `${t('notifications.types.contact')} ${t(
+        'notifications.status.updated'
+      )}`,
+    },
+    file: {
+      added: `${t('notifications.types.file')} ${t(
+        'notifications.status.added'
+      )}`,
+      removed: `${t('notifications.types.file')} ${t(
+        'notifications.status.removed'
+      )}`,
+      shared: `${t('notifications.status.shared')} ${t(
+        'notifications.types.file'
+      )}`,
+      updated: `${t('notifications.types.file')} ${t(
+        'notifications.status.updated'
+      )}`,
+    },
+    folder: {
+      added: `${t('notifications.types.folder')} ${t(
+        'notifications.status.added'
+      )}`,
+      removed: `${t('notifications.types.folder')} ${t(
+        'notifications.status.removed'
+      )}`,
+      shared: `${t('notifications.status.shared')} ${t(
+        'notifications.types.folder'
+      )}`,
+      updated: `${t('notifications.types.folder')} ${t(
+        'notifications.status.updated'
+      )}`,
+    },
+    payment: {
+      added: `${t('notifications.types.payment')} ${t(
+        'notifications.status.added'
+      )}`,
+      removed: `${t('notifications.types.payment')} ${t(
+        'notifications.status.removed'
+      )}`,
+      shared: `${t('notifications.status.shared')} ${t(
+        'notifications.types.payment'
+      )}`,
+      updated: `${t('notifications.types.payment')} ${t(
+        'notifications.status.updated'
+      )}`,
+    },
+    receipt: {
+      added: `${t('notifications.types.receipt')} ${t(
+        'notifications.status.added'
+      )}`,
+      removed: `${t('notifications.types.receipt')} ${t(
+        'notifications.status.removed'
+      )}`,
+      shared: `${t('notifications.status.shared')} ${t(
+        'notifications.types.receipt'
+      )}`,
+      updated: `${t('notifications.types.receipt')} ${t(
+        'notifications.status.updated'
+      )}`,
+    },
+    tile: {
+      added: `${t('notifications.types.tile')} ${t(
+        'notifications.status.added'
+      )}`,
+      removed: `${t('notifications.types.tile')} ${t(
+        'notifications.status.removed'
+      )}`,
+      shared: `${t('notifications.status.shared')} ${t(
+        'notifications.types.tile'
+      )}`,
+      updated: `${t('notifications.types.tile')} ${t(
+        'notifications.status.updated'
+      )}`,
+    },
+    user: {
+      added: `${t('notifications.types.user')} ${t(
+        'notifications.status.added'
+      )}`,
+      removed: `${t('notifications.types.user')} ${t(
+        'notifications.status.removed'
+      )}`,
+      shared: `${t('notifications.status.shared')} ${t(
+        'notifications.types.user'
+      )}`,
+      updated: `${t('notifications.types.user')} ${t(
+        'notifications.status.updated'
+      )}`,
+    },
+  }
+
+  const bgColors: Record<NotificationCardI['status'], string> = {
+    added: 'lightGreen.3',
+    removed: 'error.1',
+    shared: 'yellow.6',
+    updated: 'lightBlue.10',
+  }
+
+  const colors: Record<NotificationCardI['status'], string> = {
+    added: 'green.8',
+    removed: 'error.2',
+    shared: 'yellow.1',
+    updated: 'lightBlue.9',
+  }
+
+  return (
+    <Container p="2" bg={bgColors[status]}>
+      <Stack spacing="3">
+        <Flex justify="space-between" align="center">
+          <Text
+            fontSize="10px"
+            fontWeight="semibold"
+            textTransform="uppercase"
+            color={colors[status]}
+          >
+            {actionLabels[type][status]}
+          </Text>
+          <Flex gap="1" align="center">
+            <Text variant="date">{formatDateWithAt({ date: createdAt })}</Text>
+            <IconButton
+              variant="ghost"
+              aria-label="close"
+              maxW="fit-content"
+              onClick={() => onDismiss(_id)}
+              icon={<Close size={11} />}
+            />
+          </Flex>
+        </Flex>
+        <Text fontSize="sm" fontFamily="secondary">
+          {message}
+        </Text>
+      </Stack>
+    </Container>
+  )
+}

package/src/components/notifications/NotificationsPanel.tsx

@@ -0,0 +1,52 @@
+import { t } from 'i18next'
+import {
+  DrawerBody,
+  DrawerContent,
+  DrawerHeader,
+  Stack,
+} from '@chakra-ui/react'
+import { PanelHeader, NotificationCard, SelectInput } from '@/components'
+import { Speaker } from '@/assets/images'
+import { NotificationsPanelI } from '@/interfaces'
+import { useNotificationsPanel } from '@/hooks'
+
+export const NotificationsPanel = ({
+  notifications = [],
+  onClose,
+  onDismiss,
+}: NotificationsPanelI) => {
+  const count = notifications.length
+  const { currentSort, items, handleSelectItem, sortedNotifications } =
+    useNotificationsPanel({
+      notifications,
+    })
+  return (
+    <DrawerContent bg="lightBlue.1">
+      <DrawerHeader p="0">
+        <PanelHeader
+          handleCloseButton={onClose}
+          title={`${t('notifications.title')} ${count && `(${count})`}`}
+          icon={Speaker}
+        />
+      </DrawerHeader>
+      <DrawerBody p="base">
+        <Stack spacing="base">
+          <SelectInput
+            handleClick={handleSelectItem}
+            initialValue={currentSort}
+            items={items}
+          />
+          <Stack spacing="1">
+            {sortedNotifications.map((notification) => (
+              <NotificationCard
+                {...notification}
+                key={notification._id}
+                onDismiss={onDismiss}
+              />
+            ))}
+          </Stack>
+        </Stack>
+      </DrawerBody>
+    </DrawerContent>
+  )
+}

package/src/components/notifications/index.ts

@@ -0,0 +1,2 @@
+export * from './NotificationCard'
+export * from './NotificationsPanel'

package/src/components/partner/adminTiles/index.ts

@@ -1,4 +1,3 @@
 export * from './customersTile'
-export * from './inboxTile'
 export * from './satisfactionTile'
 export * from './ytdTile'

package/src/components/tour/Bubble.tsx

@@ -29,6 +29,8 @@ export const Bubble = ({
         position={position}
         top={handlePosition(steps[currentStep].topRef)}
         left={handlePosition(steps[currentStep].leftRef)}
+        bottom={handlePosition(steps[currentStep].bottomRef)}
+        right={handlePosition(steps[currentStep].rightRef)}
         zIndex="popover"
         boxShadow="lg"
         borderRadius="md"

package/src/components/tour/HomeBoardTour.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { t, use } from 'i18next'
+import { t } from 'i18next'
 import { Bubble, BubbleText, MeetStep } from '@/components'
 import { StepI, TourI } from '@/interfaces'
 import {
@@ -55,7 +55,7 @@ export const HomeBoardTour = ({
   const parsedBubbleWidth = Number(bubbleWidth.replace('px', ''))
   const panelBubbleArrowSize = 500 + parsedBubbleWidth + arrowSize
   const halfBubbleWidth = parsedBubbleWidth / 2
-  const bubbleArrowWidth = parsedBubbleWidth + arrowSize + 30
+  const bubbleArrowWidth = parsedBubbleWidth + arrowSize + 10
 
   const steps: StepI = {
     homeboard: {
@@ -110,12 +110,9 @@ export const HomeBoardTour = ({
     },
     // Reference component id -> FolderSharing/FolderSharing
     addFolders: {
-      arrowRight: 'right-top',
+      arrowRight: 'right-bottom',
       leftRef: coordinates.addFolders?.x - bubbleArrowWidth,
-      topRef: getYPosition(
-        coordinates.addFolders?.y,
-        distanceFromEdgeArrowToBorder
-      ),
+      bottomRef: 3,
       component: (
         <BubbleText
           title={t('tour.steps.addFolders.title')}

package/src/components/valueMonitor/ValueCard.tsx

@@ -41,19 +41,23 @@ export const ValueCard = ({
           )}
         </Flex>
       </Flex>
-      <Flex
-        gap="base"
-        align="center"
-        p="base"
-        borderTop="1px dashed"
-        borderColor="lightBlue.6"
-      >
-        <Text fontSize="sm" color="gray.4" textTransform="uppercase">
-          {`${t('valueMonitor.label')} ${year}`}
-        </Text>
-        <Progress flex="1" size="md" value={percentage || 0} height="13px" />
-        <Text fontSize="sm">{formattedYearValue}.</Text>
-      </Flex>
+      {
+        year && (
+          <Flex
+            gap="base"
+            align="center"
+            p="base"
+            borderTop="1px dashed"
+            borderColor="lightBlue.6"
+          >
+            <Text fontSize="sm" color="gray.4" textTransform="uppercase">
+              {`${t('valueMonitor.label')} ${year}`}
+            </Text>
+            <Progress flex="1" size="md" value={percentage || 0} height="13px" />
+            <Text fontSize="sm">{formattedYearValue}.</Text>
+          </Flex>
+        )
+      }
     </Box>
   )
 }

package/src/hooks/display/useMediaPreview.ts

@@ -7,7 +7,6 @@ interface MediaPreviewHookI {
 }
 
 export const useMediaPreview = ({ images }: MediaPreviewHookI) => {
-  const [dbImages, setDbImages] = useState<ImagesI[]>([])
   const [totalFiles, setTotalFiles] = useState<ImagesI[]>([])
   const [index, setIndex] = useState(0)
   const storageUrl = import.meta.env.VITE_STORAGE_URL
@@ -50,10 +49,9 @@ export const useMediaPreview = ({ images }: MediaPreviewHookI) => {
     }
   }
 
-  useMemo(() => {
-    setDbImages(handleMapMedia({ files: images, isLocal: false }))
-    setTotalFiles([...dbImages])
-  }, [images.length])
+  useEffect(() => {
+    setTotalFiles([...images])
+  }, [JSON.stringify(images.map((image) => image._id))])
 
   return {
     handleDescription,

package/src/hooks/folderPanel/useFilesUploader.ts

@@ -1,19 +1,22 @@
-import { FolderFileI } from '@/interfaces'
+import { FolderFileI, ValueTypes } from '@/interfaces'
 import { handleMapFile } from '@/utils'
-import { t } from 'i18next'
+import { t, use } from 'i18next'
 import { useEffect, useState } from 'react'
 import { useDropzone } from 'react-dropzone'
 
 interface FilesUploaderHookI {
   onUpload: (files: FolderFileI[]) => void
   uploading: boolean
+  displayImages?: string[]
 }
 
 export const useFilesUploader = ({
   onUpload,
   uploading,
+  displayImages = [],
 }: FilesUploaderHookI) => {
   const [isUploading, setIsUploading] = useState(false)
+  const [thumbnails, setThumbnails] = useState(displayImages)
 
   const [acceptedFiles, setAcceptedFiles] = useState<FolderFileI[]>([])
 
@@ -60,5 +63,15 @@ export const useFilesUploader = ({
     !uploading && setAcceptedFiles([])
   }, [uploading])
 
-  return { acceptedFiles, errorMessage, getRootProps, getInputProps }
+  useEffect(() => {
+    setThumbnails(displayImages)
+  }, [JSON.stringify(displayImages)])
+
+  return {
+    acceptedFiles,
+    errorMessage,
+    getRootProps,
+    getInputProps,
+    thumbnails,
+  }
 }

package/src/hooks/homeBoard/useHomeBoard.ts

@@ -51,6 +51,11 @@ export const useHomeBoard = () => {
     onRightOpen()
   }
 
+  const handleAppBarClick = (current: string) => {
+    setCurrentComponent(current)
+    onRightOpen()
+  }
+
   const componentsByStep: Record<string, string> = {
     nameFolder: 'AddFolder',
     addFiles: 'FolderDetail',
@@ -128,6 +133,7 @@ export const useHomeBoard = () => {
     activeTour,
     currentComponent,
     form,
+    handleAppBarClick,
     handleClose,
     handleEditHomeClick,
     handleFolderClick,

package/src/hooks/index.ts

@@ -13,6 +13,7 @@ export * from './inputs'
 export * from './launchpad'
 export * from './myHomes'
 export * from './myProfile'
+export * from './notifications'
 export * from './onboarding'
 export * from './partner'
 export * from './propertyTiles'

package/src/hooks/notifications/index.ts

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

package/src/hooks/notifications/useNotificationsPanel.ts

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react'
+import { t } from 'i18next'
+import { NotificationsPanelI, SelectItemI } from '@/interfaces'
+
+export const useNotificationsPanel = ({
+  notifications,
+}: Pick<NotificationsPanelI, 'notifications'>) => {
+  const [sortedNotifications, setSortedNotifications] = useState(notifications)
+  const [currentSort, setCurrentSort] = useState<string>(t('forms.sortBy'))
+
+  useEffect(() => {
+    setSortedNotifications(notifications)
+  }, [JSON.stringify(notifications)])
+
+  const handleSelectItem = (item: string | SelectItemI<string>) => {
+    if (typeof item !== 'string') return
+    setCurrentSort(item)
+
+    if (item === t('forms.sortBy')) {
+      return setSortedNotifications(notifications)
+    }
+
+    setSortedNotifications(
+      notifications.filter(
+        (notification) =>
+          notification.type === item.toLowerCase() ||
+          notification.status === item.toLowerCase()
+      )
+    )
+  }
+
+  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'),
+    t('notifications.status.updated'),
+  ] as string[]
+
+  return { currentSort, items, handleSelectItem, sortedNotifications }
+}

package/src/index.ts

@@ -76,6 +76,7 @@ export {
   HomeMonitor,
   HomeMonitorSteps,
   HomeSharedWith,
+  InboxForwardBanner,
   InboxTile,
   ItemNameHeader,
   ItemsReviewBanner,
@@ -99,6 +100,9 @@ export {
   NewPassword,
   NotBeChargedBanner,
   Notifications,
+  NotificationsReminder,
+  NotificationsPanel,
+  NotificationCard,
   Overlay,
   PanelHeader,
   PartnerActiveSubscription,

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

@@ -1,8 +1,13 @@
-import { UserProfileI } from "@/interfaces"
-import { ReactNode } from "react"
+import { UserProfileI } from '@/interfaces'
+import { ReactNode } from 'react'
 
 export interface AppBarI {
   children: ReactNode
   onLogoClick: () => void
   user: UserProfileI
 }
+
+export interface AppBarIconI {
+  onClick: () => void
+  total: number
+}

package/src/interfaces/appBar/index.ts

@@ -1,7 +1,6 @@
 export * from './AppBar.interface'
 export * from './HomefileLogo.interface'
-export * from './PeopleConnected.interface'
 export * from './StorageUsed.interface'
 export * from './TourButton.interface'
 export * from './TutorialsButton.interface'
-export * from './UserProfile.interface'
+export * from './UserProfile.interface'

package/src/interfaces/badge/NumberBadge.interface.ts

@@ -1,6 +1,6 @@
-export interface NumberBadgeI {
-  color?: string
-  bg?: string
+import { CenterProps } from '@chakra-ui/react'
+
+export interface NumberBadgeI extends CenterProps {
   px?: string
   py?: string
   total: string | number

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

@@ -21,6 +21,7 @@ type KindTypes =
   | 'textarea'
   | 'default'
   | UIKindTypes
+  | HomeItemTypes
 
 type UIKindTypes =
   | 'tile-body'
@@ -34,6 +35,8 @@ type UIKindTypes =
   | 'primary-cta'
   | 'secondary-cta'
 
+type HomeItemTypes = 'appliances' | 'images'
+
 export type IconTypes =
   | 'barcode'
   | 'battery'
@@ -111,8 +114,10 @@ export interface ReportI {
 
 export interface DynamicFormI extends Partial<PartnerFooterI> {
   callback?: TileCtaI['callback']
+  displayImages?: string[]
   form: ReportI[]
   menuItems?: MenuItemI[]
+  onRemoveImage?: (file: string) => void
   onUpload?: (filesByFieldId: Record<string, FolderFileI[]>) => void
   showTitle?: boolean
   title?: string
@@ -123,3 +128,7 @@ export interface DynamicFormProxyI {
   fields: ReportI[]
   setFields(fields: ReportI[]): void
 }
+
+export interface ReadOnlyDynamicFormI extends Pick<DynamicFormI, 'form'> {
+  onEdit?: (id: string) => void
+}

package/src/interfaces/forms/dynamicForm/fields/FileField.interface.ts

@@ -1,6 +1,8 @@
 import { FolderFileI, ReportI } from '@/interfaces'
 
 export interface FileFieldI extends Pick<ReportI, 'description' | 'icon'> {
+  onRemove?: (file: string) => void
   onUpload: (files: FolderFileI[]) => void
   uploading?: boolean
+  displayImages?: string[]
 }

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

@@ -0,0 +1,5 @@
+import { ReportI } from '@/interfaces'
+
+export interface ReadOnlyAppliancesI extends ReportI {
+  onEdit: (id: string) => void
+}

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

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

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

@@ -2,3 +2,4 @@ export * from './ReadOnlyDate.interface'
 export * from './ReadOnlyGrid.interface'
 export * from './ReadOnlyInput.interface'
 export * from './ReadOnlyToggle.interface'
+export * from './homeItem'

package/src/interfaces/headers/TabsHeader.interface.ts

@@ -1,13 +1,14 @@
 import { ReactNode } from 'react'
 
 interface Tab {
-  label: string;
-  component: ReactNode | null;
+  label: string
+  component: ReactNode | null
 }
 export interface TabsHeaderI {
   defaultIndex?: number
-  onChange?: (index: number) => void;
+  onChange?: (index: number) => void
   rightButton?: ReactNode
+  rightTabList?: Tab[]
   tabIndex?: number
   tabList: Tab[]
 }

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

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

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

@@ -0,0 +1,7 @@
+import { ReportI } from '@/interfaces'
+
+export interface ViewingHomeItemPanelI {
+  form: ReportI[]
+  onClose: () => void
+  onEdit: (id: string) => void
+}

package/src/interfaces/homeItems/index.ts

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

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

@@ -0,0 +1,11 @@
+export interface BoxI {
+  image: string
+  name: string
+  newMessages?: number
+  totalMessages: number
+}
+
+export interface InboxCardI {
+  box: BoxI
+  onClick?: (box: string) => void
+}

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

@@ -0,0 +1,9 @@
+import { BoxI, MenuItemI } from '@/interfaces'
+import { ReactNode } from 'react'
+
+export interface InboxTileI {
+  banner?: ReactNode
+  boxes: BoxI[]
+  menuItems?: MenuItemI[]
+  onClick?: (box: string) => void
+}

package/src/interfaces/index.ts

@@ -15,12 +15,15 @@ export * from './headers'
 export * from './help'
 export * from './homeAssistant'
 export * from './homeBoard'
+export * from './homeItems'
 export * from './homeSummary'
 export * from './icons'
+export * from './inboxTile'
 export * from './inputs'
 export * from './launchpad'
 export * from './myHomes'
 export * from './myProfile'
+export * from './notifications'
 export * from './onboarding'
 export * from './overlay'
 export * from './pages'

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

@@ -0,0 +1,24 @@
+type NotificationType =
+  | 'file'
+  | 'folder'
+  | 'contact'
+  | 'receipt'
+  | 'user'
+  | 'tile'
+  | 'payment'
+type NotificationStatus = 'added' | 'removed' | 'updated' | 'shared'
+
+export interface NotificationCardI {
+  active: boolean
+  createdAt: Date
+  _id: string
+  message: string
+  status: NotificationStatus
+  type: NotificationType
+}
+
+export interface NotificationsPanelI {
+  notifications: NotificationCardI[]
+  onClose: () => void
+  onDismiss: (id: string) => void
+}