@homefile/components-v2 2.3.0 → 2.4.0

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

@@ -0,0 +1,112 @@
+import { t } from 'i18next'
+import {
+  Avatar,
+  Box,
+  Center,
+  chakra,
+  Container,
+  Divider,
+  Flex,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
+import { ChatBubble } from '@/assets/images'
+import { TextBadge } from '@/components'
+import { formatDateWithAt } from '@/utils'
+import { MessageCardI } from '@/interfaces'
+
+export const MessageCard = ({
+  message,
+  onClick,
+  variant = 'inbox',
+}: MessageCardI) => {
+  const { currentUser, from, subject, date, isNew, chatReplies, description } =
+    message
+  const formattedDate = formatDateWithAt({ date })
+  const showChatBubble = Number(chatReplies?.length) > 0
+  const isInbox = variant === 'inbox'
+  const isCurrentUser = currentUser?.userName === from
+  return (
+    <Flex gap="base">
+      {!isCurrentUser && !isInbox && (
+        <Avatar
+          size="sm"
+          name={from}
+          bg="blue.4"
+          fontWeight="bold"
+          color="neutral.white"
+        />
+      )}
+      <Container
+        as={isInbox ? 'button' : 'div'}
+        bg={isCurrentUser ? 'yellow.6' : 'neutral.white'}
+        transition="background-color 0.3s"
+        textAlign="left"
+        _hover={isInbox ? { bg: 'lightGreen.1' } : {}}
+        onClick={() => onClick?.(message)}
+      >
+        <Box>
+          {!isCurrentUser && (
+            <Flex
+              justify="space-between"
+              align="center"
+              py="1"
+              pr="base"
+              pl={isNew ? '' : 'base'}
+            >
+              <Flex
+                gap="base"
+                align="center"
+                position="relative"
+                left={isNew ? '-13px' : ''}
+              >
+                {isNew && isInbox && (
+                  <TextBadge
+                    text="New"
+                    showAnimation={false}
+                    bgColor="violet.1"
+                  />
+                )}
+                <Text variant="home" color="gray.1">
+                  {t('inbox.from')}
+                  <chakra.span color="gray.4">{from}</chakra.span>
+                </Text>
+              </Flex>
+              <Text variant="home" fontSize="xs">
+                {formattedDate}
+              </Text>
+            </Flex>
+          )}
+          {isInbox && <Divider />}
+          <Stack spacing="base" p="base">
+            <Flex align="center" justify="space-between">
+              <Text variant="home" fontWeight="bold">
+                {subject}
+              </Text>
+              {showChatBubble && isInbox && (
+                <Center
+                  backgroundImage={`url(${ChatBubble})`}
+                  backgroundRepeat="no-repeat"
+                  backgroundSize="contain"
+                  backgroundPosition="bottom"
+                  w="20px"
+                  h="24px"
+                >
+                  <Text fontSize="10px" color="blue.2" fontWeight="bold">
+                    {chatReplies?.length}
+                  </Text>
+                </Center>
+              )}
+            </Flex>
+            {isInbox && (
+              <Text variant="home" noOfLines={3} textOverflow="ellipsis">
+                {description}
+              </Text>
+            )}
+            {!isInbox && <Text variant="home">{description}</Text>}
+          </Stack>
+        </Box>
+      </Container>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,105 @@
+import { useState } from 'react'
+import { t } from 'i18next'
+import {
+  Box,
+  DrawerBody,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
+import QuillEditor from 'react-quill'
+import { Document2 } from '@/assets/images'
+import {
+  BackCircleButton,
+  FooterButtons,
+  MessageCard,
+  PanelHeader,
+  up,
+  WrapperWithShadow,
+} from '@/components'
+import { MessageChatPanelI } from '@/interfaces'
+
+import 'react-quill/dist/quill.snow.css'
+import '@/styles/quill.css'
+
+export const MessageChatPanel = ({
+  message,
+  onBack,
+  onClose,
+  onReply,
+}: MessageChatPanelI) => {
+  const [value, setValue] = useState('')
+  const onChange = (content: string) => {
+    setValue(content)
+  }
+  return (
+    <DrawerContent bg="lightBlue.1">
+      <DrawerHeader p="0">
+        <PanelHeader
+          handleCloseButton={onClose}
+          title={message?.from ?? ''}
+          icon={Document2}
+        />
+      </DrawerHeader>
+      <DrawerBody p="0">
+        <Box bg="lightBlue.2" py="2" px="base">
+          <BackCircleButton onClick={onBack} />
+        </Box>
+        <Stack spacing="base" p="base" pb="4">
+          {message?.chatReplies?.map((reply) => (
+            <MessageCard
+              key={reply._id}
+              message={{
+                ...reply,
+                currentUser: message.currentUser,
+              }}
+              variant="chat"
+            />
+          ))}
+        </Stack>
+      </DrawerBody>
+      <DrawerFooter p="0" maxH="400px">
+        <WrapperWithShadow animation={up} fadeDelay={0.2}>
+          <Stack spacing="base">
+            <Text>{t('inbox.createReply')}</Text>
+            <QuillEditor
+              theme="snow"
+              value={value}
+              modules={{ toolbar }}
+              onChange={onChange}
+              placeholder={t('inbox.enterContent')}
+            />
+            <FooterButtons
+              px="0"
+              button1={{
+                buttonStyle: 'secondaryFooter',
+                label: t('buttons.send'),
+                isDisabled: Number(value.length) === 0,
+                onClick: () =>
+                  onReply({
+                    id: message?._id ?? '',
+                    message: value,
+                  }),
+              }}
+            />
+          </Stack>
+        </WrapperWithShadow>
+      </DrawerFooter>
+    </DrawerContent>
+  )
+}
+
+const toolbar = [
+  ['bold', 'italic', 'underline', 'strike'],
+  ['blockquote', 'link', 'image'],
+  [{ list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+  [{ script: 'sub' }, { script: 'super' }],
+  [{ indent: '-1' }, { indent: '+1' }],
+  [{ header: [1, 2, 3, 4, 5, 6, false] }],
+
+  [{ color: [] }, { background: [] }],
+
+  ['clean'],
+]

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

@@ -0,0 +1,64 @@
+import { t } from 'i18next'
+import {
+  Box,
+  DrawerBody,
+  DrawerContent,
+  DrawerHeader,
+  Stack,
+} from '@chakra-ui/react'
+import { Inbox } from '@/assets/images'
+import {
+  BaseCounter,
+  MessageCard,
+  PanelHeader,
+  SelectInput,
+} from '@/components'
+import { MessagePanelI } from '@/interfaces'
+import { useMessagePanel } from '@/hooks'
+import { pluralize } from '@/utils'
+
+export const MessagePanel = ({ messages, onClick, onClose }: MessagePanelI) => {
+  const { currentSort, sortedMessages, handleSelectItem, items } =
+    useMessagePanel(messages)
+
+  const baseCounterText = `${t('counter.showing')} ${sortedMessages.length} ${t(
+    'counter.of'
+  )} ${messages.length} ${pluralize(
+    sortedMessages.length,
+    t('inbox.message').toLowerCase()
+  )} `
+  return (
+    <DrawerContent bg="lightBlue.1">
+      <DrawerHeader p="0">
+        <PanelHeader
+          handleCloseButton={onClose}
+          title={t('inbox.message')}
+          icon={Inbox}
+        />
+      </DrawerHeader>
+      <DrawerBody p="0">
+        <Stack spacing="base" pb="4">
+          <Box p="base" bg="lightBlue.2">
+            <SelectInput
+              handleClick={handleSelectItem}
+              initialValue={currentSort}
+              items={items}
+            />
+          </Box>
+          <Box px="base">
+            <BaseCounter text={baseCounterText} />
+          </Box>
+          <Stack spacing="1" pl="26px" pr="base">
+            {sortedMessages.map((message) => (
+              <MessageCard
+                key={message._id}
+                message={message}
+                onClick={onClick}
+              />
+            ))}
+          </Stack>
+        </Stack>
+      </DrawerBody>
+    </DrawerContent>
+  )
+}

package/src/components/inboxTile/panel/index.ts

@@ -0,0 +1,3 @@
+export * from './MessageCard'
+export * from './MessageChatPanel'
+export * from './MessagePanel'

package/src/components/myHomes/WrapperWithShadow.tsx

@@ -9,6 +9,7 @@ export const WrapperWithShadow = ({
 }: PropsWithChildren<WrapperWithShadowI>) => {
   return (
     <Stack
+      w="full"
       spacing="base"
       p="base"
       borderTopRadius="xl"

package/src/components/myHomes/steps/MyHomeDetails.tsx

@@ -34,7 +34,7 @@ const upAnimation = keyframes`
  to { transform: translateY(0); box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.07)}
 `
 
-const up = `${upAnimation} 200ms ease forwards`
+export const up = `${upAnimation} 200ms ease forwards`
 
 export const MyHomeDetails = ({
   handleCreateHomeClick,

package/src/components/notifications/NotificationCard.tsx

@@ -7,115 +7,11 @@ import { formatDateWithAt } from '@/utils'
 export const NotificationCard = ({
   _id,
   createdAt,
+  label,
   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',
@@ -140,7 +36,7 @@ export const NotificationCard = ({
             textTransform="uppercase"
             color={colors[status]}
           >
-            {actionLabels[type][status]}
+            {label}
           </Text>
           <Flex gap="1" align="center">
             <Text variant="date">{formatDateWithAt({ date: createdAt })}</Text>

package/src/components/onboarding/pages/SignIn.tsx

@@ -9,6 +9,7 @@ import {
   TextInput,
   ButtonLoader,
   BasePageWrapper,
+  CloudsAnimation,
 } from '@/components'
 import { isEmptyField } from '@/utils'
 import { SignInI } from '@/interfaces'

package/src/components/rooms/VideosCounter.tsx

@@ -1,9 +1,7 @@
 import { t } from 'i18next'
-import { Box, Flex, Text, chakra } from '@chakra-ui/react'
-import { BeatLoader } from 'react-spinners'
-import { colors } from '@/theme/colors'
 import { VideosCounterI } from '@/interfaces'
 import { pluralize } from '@/utils'
+import { BaseCounter } from '@/components'
 
 export const VideosCounter = ({ totalVideos, uploading }: VideosCounterI) => {
   const videos = pluralize(totalVideos, t('roomVideo.more'))
@@ -11,20 +9,6 @@ export const VideosCounter = ({ totalVideos, uploading }: VideosCounterI) => {
   const text = `${t('roomVideo.youCan')} ${totalVideos} ${videos}`
 
   return (
-    <Box w="100%">
-      <Flex justify="space-between" align="center">
-        {!uploading && <Text variant="home">{text}</Text>}
-        {uploading && (
-          <Text variant="home">
-            <chakra.span fontWeight="bold">
-              {t('folderSharing.uploading')}
-            </chakra.span>
-            <chakra.span ml="2">
-              <BeatLoader size="4px" color={colors.blue[6]} />
-            </chakra.span>
-          </Text>
-        )}
-      </Flex>
-    </Box>
+    <BaseCounter text={text} uploading={uploading} uploadingText={videos} />
   )
 }

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/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/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/inbox/index.ts

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