@homefile/components-v2 1.5.0 → 1.6.0

package/src/components/contacts/sharePanel/ShareContactsContent.tsx

@@ -0,0 +1,68 @@
+import { t } from 'i18next'
+import {
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  Stack,
+  DrawerFooter,
+} from '@chakra-ui/react'
+import { Contacts } from '@/assets/images'
+import {
+  FooterButtons,
+  FooterDrawer,
+  PanelHeader,
+  SelectedContacts,
+  ShareContactSection,
+} from '@/components'
+import { ShareContactsContentI } from '@/interfaces'
+import { useShareContactsContent } from '@/hooks'
+
+export const ShareContactsContent = ({
+  contacts,
+  onClose,
+  onShare,
+  ...props
+}: ShareContactsContentI) => {
+  const {
+    contactsSelected,
+    recipientsToSend,
+    handleAddRecipient,
+    handleDeleteSelectedContact,
+    handleShareContacts,
+  } = useShareContactsContent({ contacts, onShare })
+
+  const numberOfContacts = Number(contacts.length)
+
+  return (
+    <DrawerContent bg="lightBlue.1">
+      <DrawerHeader p="0">
+        <PanelHeader
+          handleCloseButton={onClose}
+          icon={Contacts}
+          title={`${t('contacts.shareContact')} (${numberOfContacts})`}
+        />
+      </DrawerHeader>
+      <DrawerBody p="0" overflowX="hidden" overflowY="scroll" bg="lightBlue.2">
+        <Stack pb="120px" spacing="0">
+          <SelectedContacts
+            contacts={contactsSelected}
+            onDeleteSelected={handleDeleteSelectedContact}
+          />
+          <ShareContactSection {...props} onShare={handleAddRecipient} />
+        </Stack>
+      </DrawerBody>
+      <DrawerFooter p="0">
+        <FooterDrawer isOpen>
+          <FooterButtons
+            button1={{
+              buttonStyle: 'primaryFooter',
+              label: t('buttons.send'),
+              isDisabled: Number(recipientsToSend.length) === 0,
+              onClick: handleShareContacts,
+            }}
+          />
+        </FooterDrawer>
+      </DrawerFooter>
+    </DrawerContent>
+  )
+}

package/src/components/contacts/sharePanel/index.ts

@@ -0,0 +1,2 @@
+export * from './SelectedContacts'
+export * from './ShareContactsContent'

package/src/components/homeAssistant/HomeAssistant.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { t } from 'i18next'
 import {
   HomeAssistantSteps,
   HomeAssistantTutorial,
@@ -14,7 +15,10 @@ export const HomeAssistant = ({
   const [startSetup, setStartSetup] = useState(false)
   const showAirplane = props.currentStep === 6 && (!showTutorial || startSetup)
   return (
-    <HomeAssistantWrapper showAirplane={showAirplane}>
+    <HomeAssistantWrapper
+      showAirplane={showAirplane}
+      title={t('homeAssistant.title')}
+    >
       {!startSetup && showTutorial && (
         <HomeAssistantTutorial
           onStart={() => setStartSetup(true)}

package/src/components/homeAssistant/HomeAssistantWrapper.tsx

@@ -22,8 +22,10 @@ import { colors } from '@/theme/colors'
 export const HomeAssistantWrapper = ({
   children,
   showAirplane,
+  title,
 }: PropsWithChildren<{
   showAirplane?: boolean
+  title: string
 }>) => {
   const treesAlt = getImageAltText(TreesCrop)
 
@@ -37,7 +39,7 @@ export const HomeAssistantWrapper = ({
           position="relative"
           overflowX="hidden"
         >
-          <ContainerHeader title={t('homeAssistant.title')} titleIcon={IA} />
+          <ContainerHeader title={title} titleIcon={IA} />
           <Center minH="477px">{children}</Center>
           <Image
             src={Cloud1}

package/src/components/homeAssistant/HomeMonitor.tsx

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

package/src/components/homeAssistant/HomeMonitorButton.tsx

@@ -0,0 +1,69 @@
+import { Box, Center, Image, Stack, Text } from '@chakra-ui/react'
+import { HomeMonitorButtonI } from '@/interfaces'
+import { getIconAltText } from '@/utils'
+
+export const HomeMonitorButton = ({
+  currentStep,
+  onStepClick,
+  status,
+  step,
+}: HomeMonitorButtonI) => {
+  const iconAltText = getIconAltText(step.icon)
+  const handleClick = () => {
+    console.log({ status })
+    if (status !== 'ok') onStepClick(currentStep)
+  }
+
+  return (
+    <Box>
+      <Stack
+        as="button"
+        spacing="2"
+        borderRadius="lg"
+        boxShadow="lg"
+        border="1px solid transparent"
+        w="90px"
+        align="center"
+        h="96px"
+        py="base"
+        bg="neutral.white"
+        {...setStyles(status)}
+        onClick={handleClick}
+      >
+        <Center h="60%">
+          <Image src={step.icon} alt={iconAltText} w="auto" h="28px" />
+        </Center>
+        <Center h="40%">
+          <Text
+            fontSize="xs"
+            textTransform="uppercase"
+            textAlign="center"
+            lineHeight="14px"
+          >
+            {step.title}
+          </Text>
+        </Center>
+      </Stack>
+    </Box>
+  )
+}
+
+const setStyles = (status: HomeMonitorButtonI['status']) => {
+  switch (status) {
+    case 'alert':
+      return {
+        cursor: 'pointer',
+        border: '1px solid',
+        borderColor: 'error.2',
+        transition: 'all 0.3s',
+        _hover: {
+          bg: 'lightGreen.7',
+        },
+      }
+    case 'ok':
+      return {
+        cursor: 'not-allowed',
+        filter: 'grayscale(1) opacity(0.6)',
+      }
+  }
+}

package/src/components/homeAssistant/HomeMonitorSteps.tsx

@@ -0,0 +1,29 @@
+import { Box, Flex } from '@chakra-ui/react'
+import { HomeMonitortStepsI } from '@/interfaces'
+import { HomeMonitorButton } from '@/components'
+import { homeAssistantSteps } from '@/helpers'
+
+export const HomeMonitorSteps = ({
+  onStepClick,
+  stepsWithAlerts,
+}: HomeMonitortStepsI) => {
+  return (
+    <Flex gap="base">
+      {homeAssistantSteps.map((step, index) => (
+        <Box key={step.title} flex="auto">
+          <HomeMonitorButton
+            currentStep={index + 1}
+            onStepClick={onStepClick}
+            status={getStatus(index + 1, stepsWithAlerts)}
+            step={step}
+          />
+        </Box>
+      ))}
+    </Flex>
+  )
+}
+
+const getStatus = (index: number, stepsWithAlerts: number[]) => {
+  const hasAlert = stepsWithAlerts.includes(index)
+  return hasAlert ? 'alert' : 'ok'
+}

package/src/components/homeAssistant/index.ts

@@ -1,3 +1,4 @@
+export * from './monitorAlerts'
 export * from './panel'
 export * from './HomeAssistant'
 export * from './HomeAssistantButton'
@@ -5,3 +6,6 @@ export * from './HomeAssistantStepper'
 export * from './HomeAssistantSteps'
 export * from './HomeAssistantTutorial'
 export * from './HomeAssistantWrapper'
+export * from './HomeMonitor'
+export * from './HomeMonitorButton'
+export * from './HomeMonitorSteps'

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

@@ -0,0 +1,30 @@
+import { t } from 'i18next'
+import { Flex, Center, Image, Text } from '@chakra-ui/react'
+import { Exclamation } from '@/assets/images'
+
+export const AlertHeader = () => {
+  return (
+    <Flex
+      justifyContent="space-between"
+      px="base"
+      py="1"
+      bg="error.2"
+      borderTopRadius="lg"
+      align="center"
+    >
+      <Flex align="center" gap="2">
+        <Center p="1" borderRadius="full" bg="pink.1" h="18px" w="18px">
+          <Image src={Exclamation} h="100%" w="auto" />
+        </Center>
+        <Text
+          color="white"
+          fontSize="sm"
+          fontWeight="medium"
+          textTransform="uppercase"
+        >
+          {t('homeAssistant.monitorAlerts.homeAction')}
+        </Text>
+      </Flex>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,25 @@
+import { BaseAlertCardI } from '@/interfaces'
+import { Center, Flex, Image, Stack, Text } from '@chakra-ui/react'
+
+export const AlertTemplate = ({
+  bg = 'error.1',
+  description,
+  icon,
+  title,
+}: Pick<BaseAlertCardI, 'bg' | 'description' | 'title' | 'icon'>) => {
+  return (
+    <Flex gap="base" px="base" pt="1" pb="4">
+      <Center minW="60px" h="60px" bg={bg} borderRadius="md">
+        <Image src={icon} maxH="36px" w="auto" />
+      </Center>
+      <Stack>
+        <Text fontWeight="semibold" fontSize="xl" lineHeight="1.2">
+          {title}
+        </Text>
+        <Text fontFamily="secondary" fontSize="sm" lineHeight="1.2">
+          {description}
+        </Text>
+      </Stack>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,16 @@
+import { Flex, Image, Text } from '@chakra-ui/react'
+import { BaseAlertCardI } from '@/interfaces'
+
+export const AlertTitle = ({
+  alertIcon,
+  alertTitle,
+}: Pick<BaseAlertCardI, 'alertIcon' | 'alertTitle'>) => {
+  return (
+    <Flex align="center" gap="1" p="base">
+      <Image src={alertIcon} h="20px" w="20px" />
+      <Text fontSize="xs" textTransform="uppercase">
+        {alertTitle}
+      </Text>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,60 @@
+import { PropsWithChildren } from 'react'
+import { t } from 'i18next'
+import { Box, Button, Collapse, Flex, useDisclosure } from '@chakra-ui/react'
+import { AlertHeader, AlertTemplate, AlertTitle, Overlay } from '@/components'
+import { BaseAlertCardI } from '@/interfaces'
+import { Warranty } from '@/assets/images'
+
+export const BaseAlertCard = ({
+  alertIcon = Warranty,
+  alertTitle = t('homeAssistant.monitorAlerts.protection'),
+  children,
+  ...props
+}: PropsWithChildren<BaseAlertCardI>) => {
+  const { isOpen, onToggle } = useDisclosure()
+  return (
+    <>
+      <Box
+        display="flex"
+        flexDir="column"
+        bg="neutral.white"
+        boxShadow="lg"
+        borderRadius="lg"
+        overflow="hidden"
+        maxW="420px"
+        position={isOpen ? 'absolute' : 'relative'}
+        top={isOpen ? '4' : 'auto'}
+        left={isOpen ? 'calc(50% - 218px)' : 'auto'}
+        zIndex="popover"
+      >
+        <AlertHeader />
+        <AlertTitle alertIcon={alertIcon} alertTitle={alertTitle} />
+        <AlertTemplate {...props} />
+        <Collapse in={isOpen} animateOpacity>
+          <Box p="base" bg="lightBlue.1">
+            {children}
+          </Box>
+        </Collapse>
+        <Flex py="base" bg="lightBlue.1" justify="flex-end">
+          <Button
+            variant="leftRounded"
+            w="fit-content"
+            px="8"
+            fontSize="sm"
+            fontWeight="medium"
+            onClick={onToggle}
+            bg={isOpen ? 'blue.8' : 'blue.2'}
+          >
+            {t(`homeAssistant.monitorAlerts.${isOpen ? 'collapse' : 'review'}`)}
+          </Button>
+        </Flex>
+      </Box>
+      <Overlay
+        bg="overlayWhite"
+        showOverlay={isOpen}
+        position="absolute"
+        zIndex="modal"
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react'
+import { t } from 'i18next'
+import {
+  BaseAlertCard,
+  ChangeAirFilter,
+  SmokeDetectorBattery,
+  SmokeDetectorExpired,
+} from '@/components'
+import { BaseAlertCardI, MonitorAlertsI, MonitorAlertsType } from '@/interfaces'
+import { Battery, Fire, GearTime, Wind, WindWhite } from '@/assets/images'
+
+export const MonitorAlerts = ({ alertId }: MonitorAlertsI) => {
+  const alertChildren: Record<MonitorAlertsType, ReactNode> = {
+    'smoke-detector-battery': <SmokeDetectorBattery />,
+    'smoke-detector-expired': <SmokeDetectorExpired />,
+    'change-air-filter': <ChangeAirFilter />,
+  }
+
+  const alerts: Record<MonitorAlertsType, BaseAlertCardI> = {
+    'change-air-filter': {
+      bg: 'lightBlue.8',
+      alertIcon: GearTime,
+      alertTitle: t('homeAssistant.monitorAlerts.maintenance'),
+      icon: WindWhite,
+      title: t('homeAssistant.alerts.airFilter.main.title'),
+      description: t('homeAssistant.alerts.airFilter.main.description'),
+    },
+    'smoke-detector-battery': {
+      icon: Battery,
+      title: t('homeAssistant.alerts.smokeDetectorBattery.main.title'),
+      description: t(
+        'homeAssistant.alerts.smokeDetectorBattery.main.description'
+      ),
+    },
+    'smoke-detector-expired': {
+      icon: Fire,
+      title: t('homeAssistant.alerts.smokeDetectorExpired.main.title'),
+      description: t(
+        'homeAssistant.alerts.smokeDetectorExpired.main.description'
+      ),
+    },
+  }
+
+  return (
+    <BaseAlertCard {...alerts[alertId]}>{alertChildren[alertId]}</BaseAlertCard>
+  )
+}

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

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

package/src/components/homeAssistant/monitorAlerts/alertDetails/ChangeAirFilter.tsx

@@ -0,0 +1,54 @@
+import { t } from 'i18next'
+import { Box, Flex, Stack, Text } from '@chakra-ui/react'
+import { CustomBadge } from '@/components/badge'
+import { CustomDivider } from '@/components'
+
+export const ChangeAirFilter = () => {
+  return (
+    <Stack spacing="base">
+      <Text fontSize="sm" fontFamily="secondary" lineHeight="1.2">
+        {t('homeAssistant.alerts.airFilter.description')}
+      </Text>
+      <CustomDivider />
+      <Text fontWeight="semibold">
+        {t('homeAssistant.alerts.airFilter.title')}
+      </Text>
+      <CustomDivider />
+      <FilterType
+        badgeText={t('homeAssistant.alerts.airFilter.bestBadge')}
+        title={t('homeAssistant.alerts.airFilter.best.title')}
+        description={t('homeAssistant.alerts.airFilter.best.description')}
+      />
+      <CustomDivider />
+      <FilterType
+        badgeText={t('homeAssistant.alerts.airFilter.betterBadge')}
+        title={t('homeAssistant.alerts.airFilter.better.title')}
+        description={t('homeAssistant.alerts.airFilter.better.description')}
+        bg="blue.11"
+      />
+    </Stack>
+  )
+}
+
+const FilterType = ({
+  badgeText = '',
+  title = '',
+  description = '',
+  bg = 'blue.10',
+}) => {
+  return (
+    <Flex gap="base">
+      <Box h="fit-content" minW="48px">
+        <CustomBadge label={badgeText} bg={bg} />
+      </Box>
+      <Stack spacing="1">
+        <Text fontSize="sm" fontWeight="semibold" lineHeight="1.2">
+          {title}
+        </Text>
+        <Text fontSize="sm" fontFamily="secondary" lineHeight="1.2">
+          {description}
+        </Text>
+      </Stack>
+    </Flex>
+  )
+}

package/src/components/homeAssistant/monitorAlerts/alertDetails/CustomDivider.tsx

@@ -0,0 +1,5 @@
+import { Divider } from '@chakra-ui/react'
+
+export const CustomDivider = () => {
+  return <Divider borderStyle="dashed" borderColor="gray.1" />
+}

package/src/components/homeAssistant/monitorAlerts/alertDetails/SmokeDetectorBattery.tsx

@@ -0,0 +1,54 @@
+import { t } from 'i18next'
+import { Box, Flex, Stack, Text } from '@chakra-ui/react'
+import { CustomBadge } from '@/components/badge'
+import { CustomDivider } from '@/components'
+
+export const SmokeDetectorBattery = () => {
+  return (
+    <Stack spacing="base">
+      <Text fontWeight="semibold">
+        {t('homeAssistant.alerts.smokeDetectorBattery.title')}
+      </Text>
+      <CustomDivider />
+      <BatteryType
+        badgeText={t('homeAssistant.alerts.smokeDetectorBattery.bestBadge')}
+        title={t('homeAssistant.alerts.smokeDetectorBattery.best.title')}
+        description={t(
+          'homeAssistant.alerts.smokeDetectorBattery.best.description'
+        )}
+      />
+      <CustomDivider />
+      <BatteryType
+        badgeText={t('homeAssistant.alerts.smokeDetectorBattery.betterBadge')}
+        title={t('homeAssistant.alerts.smokeDetectorBattery.better.title')}
+        description={t(
+          'homeAssistant.alerts.smokeDetectorBattery.better.description'
+        )}
+        bg="blue.11"
+      />
+    </Stack>
+  )
+}
+
+const BatteryType = ({
+  badgeText = '',
+  title = '',
+  description = '',
+  bg = 'blue.10',
+}) => {
+  return (
+    <Flex gap="base">
+      <Box h="fit-content" minW="48px">
+        <CustomBadge label={badgeText} bg={bg} />
+      </Box>
+      <Stack spacing="1">
+        <Text fontSize="sm" fontWeight="semibold" lineHeight="1.2">
+          {title}
+        </Text>
+        <Text fontSize="sm" fontFamily="secondary" lineHeight="1.2">
+          {description}
+        </Text>
+      </Stack>
+    </Flex>
+  )
+}

package/src/components/homeAssistant/monitorAlerts/alertDetails/SmokeDetectorExpired.tsx

@@ -0,0 +1,43 @@
+import { t } from 'i18next'
+import { Box, Flex, Image, Stack, Text } from '@chakra-ui/react'
+import { CustomDivider } from '@/components'
+import { SmokeDetectroExpiredImage } from '@/assets/images'
+
+export const SmokeDetectorExpired = () => {
+  return (
+    <Stack spacing="base">
+      <Text fontSize="sm" fontFamily="secondary" lineHeight="1.2">
+        {t('homeAssistant.alerts.smokeDetectorExpired.description')}
+      </Text>
+      <CustomDivider />
+      <Text fontWeight="semibold">
+        {t('homeAssistant.alerts.smokeDetectorExpired.title')}
+      </Text>
+      <Flex gap="base">
+        <Image src={SmokeDetectroExpiredImage} boxSize="84px" />
+        <Stack spacing="1">
+          <CheckItem
+            text={t('homeAssistant.alerts.smokeDetectorExpired.check1')}
+          />
+          <CheckItem
+            text={t('homeAssistant.alerts.smokeDetectorExpired.check2')}
+          />
+          <CheckItem
+            text={t('homeAssistant.alerts.smokeDetectorExpired.check3')}
+          />
+        </Stack>
+      </Flex>
+    </Stack>
+  )
+}
+
+const CheckItem = ({ text = '' }) => {
+  return (
+    <Flex align="center" gap="base">
+      <Box boxSize="6px" borderRadius="full" bg="gray.3" />
+      <Text fontSize="sm" fontFamily="secondary">
+        {text}
+      </Text>
+    </Flex>
+  )
+}

package/src/components/homeAssistant/monitorAlerts/alertDetails/index.ts

@@ -0,0 +1,4 @@
+export * from './ChangeAirFilter'
+export * from './CustomDivider'
+export * from './SmokeDetectorBattery'
+export * from './SmokeDetectorExpired'

package/src/components/homeAssistant/monitorAlerts/index.ts

@@ -0,0 +1,7 @@
+export * from './alertDetails'
+export * from './AlertHeader'
+export * from './AlertTemplate'
+export * from './AlertTitle'
+export * from './BaseAlertCard'
+export * from './MonitorAlerts'
+export * from './Notifications'

package/src/components/homeAssistant/panel/HomeAssistantPanel.tsx

@@ -35,7 +35,7 @@ export const HomeAssistantPanel = ({
 }: PropsWithChildren<HomeAssistantPanelI>) => {
   const { title } = homeAssistantSteps[currentStep - 1]
   const text = `${t('homeAssistant.details')} ${title.toLowerCase()}:`
-  const isAppliances = currentStep === 3
+  const isAppliances = currentStep === 4
   const { form, updatedFields } = useSimpleDynamicForm({
     fields: currentForm,
   })

package/src/components/homeBoard/HomeBoard.tsx

@@ -231,7 +231,8 @@ export const HomeBoard = () => {
             handleClick: () => null,
           },
         ]}
-        onShare={() => null}
+        onShareContacts={() => null}
+        onDeleteContacts={() => null}
       />
     ),
     PartnerCatalog: (

package/src/components/inputs/TextInput.tsx

@@ -11,6 +11,7 @@ export const TextInput = ({
   isDisabled,
   placeholder,
   value = '',
+  type = 'text',
   ...props
 }: InputI) => {
   const error = hasError && !isDisabled
@@ -23,8 +24,8 @@ export const TextInput = ({
           autoCorrect={autoCorrect}
           id={id}
           placeholder={placeholder}
-          type="text"
           value={value}
+          type={type}
           onChange={handleChange}
           isInvalid={error}
           isDisabled={isDisabled}