@homefile/components-v2 2.3.1 → 2.5.0

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/homeAssistant/HomeAssistantWrapper.tsx

@@ -1,45 +1,59 @@
-import { PropsWithChildren } from 'react'
-import { t } from 'i18next'
-import { Box, Center, GridItem, Image } from '@chakra-ui/react'
+import { PropsWithChildren, useEffect, useState } from 'react'
+import { Box, GridItem, Image } from '@chakra-ui/react'
 import {
   ContainerHeader,
   TileTooltip,
   moveRightToLeftWithFade,
   moveRightToLeft,
   moveLeftToRightAirplane,
+  WeatherTrees,
 } from '@/components'
+import { Airplane, Cloud1, Cloud2, Cloud3, IA } from '@/assets/images'
 import {
-  Airplane,
-  Cloud1,
-  Cloud2,
-  Cloud3,
-  IA,
-  TreesCrop,
-} from '@/assets/images'
-import { getImageAltText } from '@/utils'
+  getTimeOfDay,
+  getTimeOfDaySeason,
+  TimeOfDay,
+  TimeOfDaySeason,
+} from '@/utils'
 import { colors } from '@/theme/colors'
 
 export const HomeAssistantWrapper = ({
   children,
   showAirplane,
   title,
-  zIndex
+  zIndex,
 }: PropsWithChildren<{
   showAirplane?: boolean
   title: string
   zIndex?: string
 }>) => {
-  const treesAlt = getImageAltText(TreesCrop)
+  const [timeOfDay, setTimeOfDay] = useState<TimeOfDay>(getTimeOfDay())
+  const timeOfDaySeason = getTimeOfDaySeason()
+  const gradients: Record<TimeOfDay, string> = {
+    day: colors.dayGradient,
+    evening: colors.eveningGradient,
+    morning: colors.morningGradient,
+    night: colors.nightGradient,
+  }
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimeOfDay(getTimeOfDay())
+    }, 60000)
+
+    return () => clearInterval(interval)
+  }, [])
 
   return (
     <GridItem colSpan={[1, 2]} zIndex={zIndex}>
       <TileTooltip label="homeAssistant">
         <Box
-          bgGradient={colors.skyGradient}
+          bgGradient={gradients[timeOfDay]}
           boxShadow="base"
           h="full"
           position="relative"
           overflow="hidden"
+          transition="background 1s ease-in-out"
         >
           <ContainerHeader title={title} titleIcon={IA} />
           <>{children}</>
@@ -77,14 +91,13 @@ export const HomeAssistantWrapper = ({
               animation={`${moveLeftToRightAirplane} 500s cubic-bezier(1, 1, 1, 500) infinite`}
             />
           )}
-          <Image
-            src={TreesCrop}
-            alt={treesAlt}
+          <WeatherTrees
+            timeOfDaySeason={timeOfDaySeason}
             position="absolute"
             bottom="0"
             right="2"
             w="auto"
-            h="70px"
+            h="100px"
           />
         </Box>
       </TileTooltip>

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/InboxForwardBanner.tsx

@@ -1,5 +1,5 @@
 import { t } from 'i18next'
-import { AspectRatio, Flex, Text, Image } from '@chakra-ui/react'
+import { AspectRatio, Flex, Text, Image, chakra } from '@chakra-ui/react'
 import { IA } from '@/assets/images'
 
 export const InboxForwardBanner = () => {
@@ -11,15 +11,16 @@ export const InboxForwardBanner = () => {
 
       <Text variant="home" lineHeight="1">
         {t('inbox.forwardTo')}
-        <Text
-          variant="home"
+        <chakra.span
+          fontFamily="secondary"
+          fontSize="sm"
           lineHeight="1"
           color="neutral.black"
           fontWeight="bold"
           display="inline"
         >
           homefileit@homefile.com.
-        </Text>
+        </chakra.span>
       </Text>
     </Flex>
   )

package/src/components/inboxTile/index.ts

@@ -1,3 +1,4 @@
+export * from './panel'
 export * from './InboxCard'
 export * from './InboxForwardBanner'
 export * from './InboxTile'

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} />
   )
 }