@homefile/components-v2 2.2.4 → 2.3.0

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

@@ -0,0 +1,74 @@
+import { Text, Flex, Stack, IconButton, Box } from '@chakra-ui/react'
+import {
+  ReadOnlyHomeItemRating,
+  Edit,
+  ReadOnlyHomeItemImages,
+  ReadOnlyHomeItemText,
+} from '@/components'
+import { ReadOnlyAppliancesI } from '@/interfaces'
+import { colors } from '@/theme/colors'
+
+export const ReadOnlyAppliances = ({
+  description,
+  id,
+  name,
+  children,
+  onEdit,
+  value,
+}: ReadOnlyAppliancesI) => {
+  const rating = children?.find(({ type }) => type === 'rating')
+  const images = children?.find(({ type }) => type === 'images')
+  return (
+    <Stack spacing="base" p="base">
+      <Flex justify="space-between">
+        <Text fontSize="xs" textTransform="uppercase">
+          {name}
+        </Text>
+        <IconButton
+          aria-label="Edit appliance"
+          variant="ghost"
+          w="fit-content"
+          icon={<Edit size={18} stroke={colors.blue[3]} />}
+          onClick={() => onEdit(id)}
+        />
+      </Flex>
+      <Flex gap="base">
+        <ReadOnlyHomeItemImages {...images} />
+        <Stack spacing="4" flex="1">
+          <ReadOnlyHomeItemRating {...rating} />
+          <Stack spacing="base">
+            <Text fontSize="22px" fontWeight="semibold">
+              {value}
+            </Text>
+            <Text fontFamily="secondary" fontSize="sm">
+              {description}
+            </Text>
+          </Stack>
+          <Box
+            flex="1"
+            borderBottom="1px dashed"
+            borderColor="lightBlue.6"
+            h="1px"
+          />
+          <Box>
+            {children?.map(({ id, name, value, type }) => {
+              const baseProps = {
+                key: `${id}-${name}-${value}-${type}`,
+                id,
+                value,
+                type,
+                name,
+              }
+              switch (type) {
+                case 'text':
+                  return <ReadOnlyHomeItemText {...baseProps} />
+                default:
+                  return null
+              }
+            })}
+          </Box>
+        </Stack>
+      </Flex>
+    </Stack>
+  )
+}

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

@@ -0,0 +1,28 @@
+import { ReportI } from '@/interfaces'
+import { Box, Image, SimpleGrid, Stack } from '@chakra-ui/react'
+import { useState } from 'react'
+
+export const ReadOnlyHomeItemImages = (props: Partial<ReportI>) => {
+  const images = props.value as string[]
+  const [mainImage, setMainImage] = useState(images?.[0])
+
+  if (!images) return null
+
+  return (
+    <Stack spacing="base">
+      <Image src={mainImage} alt="home item" boxSize="174px" />
+      <SimpleGrid columns={4} spacing="base">
+        {images?.map((image) => (
+          <Box
+            as="button"
+            backgroundImage={image}
+            backgroundSize="cover"
+            backgroundPosition="center"
+            boxSize="34px"
+            onClick={() => setMainImage(image)}
+          />
+        ))}
+      </SimpleGrid>
+    </Stack>
+  )
+}

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

@@ -0,0 +1,22 @@
+import { t } from 'i18next'
+import { Box, Flex, Text } from '@chakra-ui/react'
+import { Star } from '@/components'
+import { ReportI } from '@/interfaces'
+import { colors } from '@/theme/colors'
+
+export const ReadOnlyHomeItemRating = ({ id, value }: Partial<ReportI>) => {
+  if (!value) return null
+  const count = Number(value) - 1
+  return (
+    <Box>
+      <Text fontSize="10px">{t('dynamicForm.myRating')}</Text>
+      <Flex gap="1">
+        {Array.from({ length: 5 }).map((_, index) => {
+          const starColor: string =
+            count >= index ? colors.yellow['1'] : colors.gray['1']
+          return <Star size={13} key={`${id}-${index}`} stroke={starColor} />
+        })}
+      </Flex>
+    </Box>
+  )
+}

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

@@ -0,0 +1,22 @@
+import { Box, Flex, Text } from '@chakra-ui/react'
+import { ReportI } from '@/interfaces'
+
+export const ReadOnlyHomeItemText = ({ name, value }: Partial<ReportI>) => {
+  if (!name) return null
+  return (
+    <Flex gap="base">
+      <Box w="20%">
+        <CustomText>{`${name}:`}</CustomText>
+      </Box>
+      <CustomText>{String(value)}</CustomText>
+    </Flex>
+  )
+}
+
+const CustomText = ({ children = '' }) => {
+  return (
+    <Text fontSize="sm" fontFamily="secondary">
+      {children}
+    </Text>
+  )
+}

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

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

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

@@ -1,3 +1,4 @@
+export * from './homeItem'
 export * from './ReadOnlyDate'
 export * from './ReadOnlyImage'
 export * from './ReadOnlyGrid'

package/src/components/headers/TabsHeader.tsx

@@ -15,6 +15,7 @@ export const TabsHeader = ({
   tabIndex,
   defaultIndex,
   rightButton,
+  rightTabList,
 }: TabsHeaderI) => {
   return (
     <Tabs
@@ -29,31 +30,17 @@ export const TabsHeader = ({
         <Flex justify="space-between">
           <TabList bg="neutral.white" w="full">
             {tabList?.map(({ label }) => (
-              <Tab
-                key={label}
-                minW="1rem"
-                px="base"
-                py="0"
-                lineHeight="10"
-                textTransform="uppercase"
-                fontWeight="medium"
-                fontSize="sm"
-                fontFamily="primary"
-                color="blue.3"
-                borderBottom="3px solid transparent"
-                _hover={{ cursor: 'pointer' }}
-                _focus={{ outline: 'none' }}
-                _selected={{
-                  color: 'blue.8',
-                  fontWeight: 'bold',
-                  borderColor: 'blue.8',
-                }}
-              >
-                {label}
-              </Tab>
+              <CustomTab key={label} label={label} />
             ))}
           </TabList>
-          {rightButton}
+          <Flex>
+            <TabList bg="neutral.white" w="full">
+              {rightTabList?.map(({ label }) => (
+                <CustomTab key={label} label={label} />
+              ))}
+            </TabList>
+            {rightButton}
+          </Flex>
         </Flex>
       </Box>
       <TabPanels h="100%">
@@ -66,3 +53,29 @@ export const TabsHeader = ({
     </Tabs>
   )
 }
+
+const CustomTab = ({ label = '' }) => {
+  return (
+    <Tab
+      minW="1rem"
+      px="base"
+      py="0"
+      lineHeight="10"
+      textTransform="uppercase"
+      fontWeight="medium"
+      fontSize="sm"
+      fontFamily="primary"
+      color="blue.3"
+      borderBottom="3px solid transparent"
+      _hover={{ cursor: 'pointer' }}
+      _focus={{ outline: 'none' }}
+      _selected={{
+        color: 'blue.8',
+        fontWeight: 'bold',
+        borderColor: 'blue.8',
+      }}
+    >
+      {label}
+    </Tab>
+  )
+}

package/src/components/homeAssistant/HomeAssistant.tsx

@@ -6,11 +6,13 @@ import {
   HomeAssistantWrapper,
 } from '@/components'
 import { HomeAssistantStepsI } from '@/interfaces'
+import { Center } from '@chakra-ui/react'
 
 export const HomeAssistant = ({
   showTutorial = false,
   tutorialUrl = '',
   onStart,
+  zIndex,
   ...props
 }: HomeAssistantStepsI) => {
   const [startSetup, setStartSetup] = useState(false)
@@ -19,14 +21,17 @@ export const HomeAssistant = ({
     <HomeAssistantWrapper
       showAirplane={showAirplane}
       title={t('homeAssistant.title')}
+      zIndex={zIndex}
     >
-      {!startSetup && showTutorial && (
-        <HomeAssistantTutorial
-          onStart={onStart ? onStart : () => setStartSetup(true)}
-          videoUrl={tutorialUrl}
-        />
-      )}
-      {(startSetup || !showTutorial) && <HomeAssistantSteps {...props} />}
+      <Center minH="477px">
+        {!startSetup && showTutorial && (
+          <HomeAssistantTutorial
+            onStart={onStart ?? (() => setStartSetup(true))}
+            videoUrl={tutorialUrl}
+          />
+        )}
+        {(startSetup || !showTutorial) && <HomeAssistantSteps {...props} />}
+      </Center>
     </HomeAssistantWrapper>
   )
 }

package/src/components/homeAssistant/HomeAssistantWrapper.tsx

@@ -23,24 +23,26 @@ export const HomeAssistantWrapper = ({
   children,
   showAirplane,
   title,
+  zIndex
 }: PropsWithChildren<{
   showAirplane?: boolean
   title: string
+  zIndex?: string
 }>) => {
   const treesAlt = getImageAltText(TreesCrop)
 
   return (
-    <GridItem colSpan={[1, 2]}>
+    <GridItem colSpan={[1, 2]} zIndex={zIndex}>
       <TileTooltip label="homeAssistant">
         <Box
           bgGradient={colors.skyGradient}
           boxShadow="base"
           h="full"
           position="relative"
-          overflowX="hidden"
+          overflow="hidden"
         >
           <ContainerHeader title={title} titleIcon={IA} />
-          <Center minH="477px">{children}</Center>
+          <>{children}</>
           <Image
             src={Cloud1}
             position="absolute"

package/src/components/homeAssistant/HomeMonitor.tsx

@@ -2,9 +2,9 @@ import { PropsWithChildren } from 'react'
 import { t } from 'i18next'
 import { HomeAssistantWrapper } from '@/components'
 
-export const HomeMonitor = ({ children }: PropsWithChildren<{}>) => {
+export const HomeMonitor = ({ children, zIndex}: PropsWithChildren<{zIndex?: string}>) => {
   return (
-    <HomeAssistantWrapper showAirplane title={t('homeAssistant.homeMonitor')}>
+    <HomeAssistantWrapper zIndex={zIndex} showAirplane title={t('homeAssistant.homeMonitor')}>
       {children}
     </HomeAssistantWrapper>
   )

package/src/components/homeAssistant/monitorAlerts/Notifications.tsx

@@ -1,16 +1,16 @@
-import { Stack, Flex, Center, Text } from '@chakra-ui/react'
 import { t } from 'i18next'
+import { Stack, Flex, Center, Text } from '@chakra-ui/react'
 
 export const Notifications = ({ date = '', local = '' }) => {
   return (
-    <Stack spacing="base" minH="full" zIndex="2">
+    <Stack spacing="base" zIndex="2">
       <Flex justify="space-between">
         <CustomText>{date}</CustomText>
         <CustomText>{local}</CustomText>
       </Flex>
       <Center
         w="188px"
-        h="243px"
+        h="300px"
         border="1px dashed"
         borderColor="blue.1"
         borderRadius="sm"

package/src/components/homeBoard/HomeBoard.tsx

@@ -55,6 +55,8 @@ import {
   HomefileMonitoring,
   Notifications,
   HomeMonitorSteps,
+  NotificationsReminder,
+  NotificationsPanel,
 } from '@/components'
 import {
   HomeCards,
@@ -86,6 +88,7 @@ import {
   homeAssitantStep6FormMock,
   tileUIMock,
   socialLinksMock,
+  notificationsMock,
 } from '@/mocks'
 import { useHomeBoard, useWindowDimensions } from '@/hooks'
 import { Painting } from '@/assets/images'
@@ -107,6 +110,7 @@ export const HomeBoard = () => {
     activeTour,
     currentComponent,
     form,
+    handleAppBarClick,
     handleClose,
     handleEditHomeClick,
     handleFolderClick,
@@ -276,6 +280,13 @@ export const HomeBoard = () => {
         hasCompleted={true}
       />
     ),
+    Notifications: (
+      <NotificationsPanel
+        notifications={notificationsMock}
+        onClose={onRightClose}
+        onDismiss={() => null}
+      />
+    ),
   }
 
   const panelSize = currentComponent === 'PartnerCatalog' ? 'lg' : 'md'
@@ -301,7 +312,10 @@ export const HomeBoard = () => {
           roomsToAdd={RoomsToAdd}
         />
         <Box w="full">
-          <AppBarComponent setActiveTour={setActiveTour} />
+          <AppBarComponent
+            setActiveTour={setActiveTour}
+            onClick={handleAppBarClick}
+          />
           <Stack spacing="base" p="base">
             <HomeHeader
               buttonLabel="Partner catalog"
@@ -324,7 +338,6 @@ export const HomeBoard = () => {
                 recipients={recipientsDb}
                 records={homeBoardRecorsMock}
               />
-
               <HomeAssistant
                 currentPanel={homeAssistantCurrentStep}
                 currentStep={6}
@@ -386,6 +399,12 @@ export const HomeBoard = () => {
                   yearValue={5684}
                 />
               </Stack>
+              <PropertyTaxes
+                estimatedTaxValue={1000}
+                menuItems={menuMock}
+                taxes={taxesMock}
+                title="Travis County Property Taxes"
+              />
 
               <ShortPartnerTile
                 _id="1"
@@ -458,7 +477,10 @@ export const HomeBoard = () => {
   )
 }
 
-export const AppBarComponent = ({ setActiveTour = (value: boolean) => {} }) => {
+export const AppBarComponent = ({
+  setActiveTour = (value: boolean) => {},
+  onClick = (panel: string) => {},
+}) => {
   const handleTour = () => {
     setActiveTour(true)
   }
@@ -474,6 +496,11 @@ export const AppBarComponent = ({ setActiveTour = (value: boolean) => {} }) => {
           <BarDivider />
         </>
       )}
+      <NotificationsReminder
+        onClick={() => onClick('Notifications')}
+        total={2}
+      />
+      <BarDivider />
       <PeopleConnected onClick={() => null} total={12} />
       <BarDivider />
       <ContactList onClick={() => null} total={2} />

package/src/components/homeItems/ViewingHomeItemPanel.tsx

@@ -0,0 +1,44 @@
+import { t } from 'i18next'
+import { Box, Divider, DrawerContent, DrawerHeader } from '@chakra-ui/react'
+import { PanelHeader, ReadOnlyDynamicForm, TabsHeader } from '@/components'
+import { Painting } from '@/assets/images'
+import { ViewingHomeItemPanelI } from '@/interfaces'
+
+export const ViewingHomeItemPanel = ({
+  form,
+  onClose,
+  onEdit,
+}: ViewingHomeItemPanelI) => {
+  const tabs = [
+    {
+      label: t('contacts.details'),
+      component: <div />,
+    },
+    {
+      label: t('contacts.permissions'),
+      component: <div />,
+    },
+  ]
+  const rightTabs = [
+    {
+      label: 'History',
+      component: <div />,
+    },
+  ]
+  return (
+    <DrawerContent bg="lightBlue.1">
+      <DrawerHeader p="0">
+        <PanelHeader
+          handleCloseButton={onClose}
+          title={t('homeItems.title')}
+          icon={Painting}
+        />
+        <Divider />
+        <Box pt="1" bg="neutral.white">
+          <TabsHeader tabList={tabs} rightTabList={rightTabs} />
+        </Box>
+      </DrawerHeader>
+      <ReadOnlyDynamicForm form={form} onEdit={onEdit} />
+    </DrawerContent>
+  )
+}

package/src/components/homeItems/index.ts

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

package/src/components/inboxTile/InboxCard.tsx

@@ -0,0 +1,38 @@
+import { t } from 'i18next'
+import { AspectRatio, Flex, Image, Text } from '@chakra-ui/react'
+import { TextBadge } from '@/components'
+import { InboxCardI } from '@/interfaces'
+
+export const InboxCard = ({ box, onClick }: InboxCardI) => {
+  const { image, name, newMessages = 0, totalMessages } = box
+  const hasNewMessages = newMessages > 0
+  const message = `${newMessages} ${t('badges.new')}`
+  return (
+    <Flex
+      as="button"
+      align="center"
+      justify="space-between"
+      px="base"
+      py="6"
+      bg="neutral.white"
+      transition="background-color 0.2s"
+      _hover={{ bg: 'lightGreen.1' }}
+      onClick={() => onClick?.(name)}
+    >
+      <Flex align="center" gap="base">
+        <AspectRatio ratio={1} w="34px" h="auto">
+          <Image src={image} alt={name} />
+        </AspectRatio>
+        <Text>{name}</Text>
+      </Flex>
+      <Flex align="center" gap="6">
+        {hasNewMessages && (
+          <TextBadge text={message} showAnimation={false} bgColor="violet.1" />
+        )}
+        <Text fontSize="30px" fontWeight="medium" color="blue.2">
+          {totalMessages}
+        </Text>
+      </Flex>
+    </Flex>
+  )
+}

package/src/components/inboxTile/InboxForwardBanner.tsx

@@ -0,0 +1,26 @@
+import { t } from 'i18next'
+import { AspectRatio, Flex, Text, Image } from '@chakra-ui/react'
+import { IA } from '@/assets/images'
+
+export const InboxForwardBanner = () => {
+  return (
+    <Flex p="base" gap="base" align="center" bg="lightBlue.2">
+      <AspectRatio ratio={1} minW="35px" h="auto">
+        <Image src={IA} alt="IA" />
+      </AspectRatio>
+
+      <Text variant="home" lineHeight="1">
+        {t('inbox.forwardTo')}
+        <Text
+          variant="home"
+          lineHeight="1"
+          color="neutral.black"
+          fontWeight="bold"
+          display="inline"
+        >
+          homefileit@homefile.com.
+        </Text>
+      </Text>
+    </Flex>
+  )
+}

package/src/components/inboxTile/InboxTile.tsx

@@ -0,0 +1,36 @@
+import { t } from 'i18next'
+import { Container, Stack } from '@chakra-ui/react'
+import {
+  ContainerHeader,
+  InboxCard,
+  MoreHorizontal,
+  TileTooltip,
+} from '@/components'
+import { Inbox } from '@/assets/images'
+import { InboxTileI } from '@/interfaces'
+
+export const InboxTile = ({
+  banner,
+  boxes,
+  menuItems,
+  onClick,
+}: InboxTileI) => {
+  return (
+    <TileTooltip label="inbox">
+      <Container variant="launchpad" h="full" position="relative" m="0">
+        <Stack spacing="2px">
+          <ContainerHeader
+            menuItems={menuItems}
+            title={t('partner.tiles.inbox') ?? ''}
+            icon={<MoreHorizontal size={38} />}
+            titleIcon={Inbox}
+          />
+          {banner}
+          {boxes.map((box) => (
+            <InboxCard key={box.name} box={box} onClick={onClick} />
+          ))}
+        </Stack>
+      </Container>
+    </TileTooltip>
+  )
+}

package/src/components/{partner/adminTiles/inboxTile → inboxTile}/index.ts

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

package/src/components/index.ts

@@ -16,13 +16,16 @@ 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 './loaders'
 export * from './myHomes'
 export * from './myProfile'
+export * from './notifications'
 export * from './onboarding'
 export * from './overlay/Overlay'
 export * from './partner'