@homefile/components-v2 1.2.2 → 1.4.0

package/src/assets/images/logos/index.ts

@@ -5,6 +5,17 @@ import Lowes from './lowes.png'
 import Walmart from './walmart.png'
 import Prime from './prime.png'
 import Sears from './sears.png'
+import Shine from './shine.png'
 import Terminix from './terminix.png'
 
-export { APHW, HomeDepot, Homefile, Lowes, Walmart, Prime, Sears, Terminix }
+export {
+  APHW,
+  HomeDepot,
+  Homefile,
+  Lowes,
+  Walmart,
+  Prime,
+  Sears,
+  Shine,
+  Terminix,
+}

package/src/assets/images/shine/index.ts

@@ -0,0 +1,15 @@
+import GutterCleaning from './gutter-cleaning.png'
+import HomeCleaning from './home-cleaning.png'
+import HolidayLights from './holiday-lights.png'
+import Pressure from './pressure.png'
+import RoofCleaning from './roof-cleaning.png'
+import WindowCleaning from './window.png'
+
+export {
+  GutterCleaning,
+  HomeCleaning,
+  HolidayLights,
+  Pressure,
+  RoofCleaning,
+  WindowCleaning,
+}

package/src/assets/locales/en/index.json

@@ -109,7 +109,8 @@
     "previous": "Previous",
     "save": "Save",
     "send": "Send",
-    "skip": "Skip for now"
+    "skip": "Skip for now",
+    "saveStep": "Save Step"
   },
   "createDocument": {
     "tabs": {
@@ -139,11 +140,20 @@
   },
   "contacts": {
     "addBtn": "Contact",
+    "addContact": "Add Contact",
+    "companyInfo": "Company Info",
+    "contactView": "View Contact",
+    "details": "Details",
+    "editContact": "Edit Contact",
     "error": "Email should be from a valid Homefile account",
+    "homeAddress": "Home Address",
+    "notes": "Notes",
     "shareContact": "Share Contact",
+    "permissions": "Permissions",
     "placeholders": {
       "email": "Enter Email"
     },
+    "rating": "Homeowner Rating",
     "title": "Contacts"
   },
   "daysOfWeek": {
@@ -601,6 +611,18 @@
     },
     "needImage": "Need image",
     "noResults": "No results found",
+    "shine": {
+      "heroTitle": "We do windows and so much more!",
+      "scheduleService": "Schedule a Service",
+      "services": {
+        "home": "Home Cleaning",
+        "lights": "Holiday Lights",
+        "gutter": "Gutter Cleaning",
+        "roof": "Roof Cleaning",
+        "pressure": "Pressure Washing",
+        "window": "Window Cleaning"
+      }
+    },
     "tabs": {
       "code": "Code",
       "content": "Content",

package/src/components/animations/CloudsAnimation.tsx

@@ -89,11 +89,12 @@ export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
       position="relative"
       bgGradient={colors.skyGradient}
       overflowX="hidden"
+      overflowY="scroll"
     >
       {children}
       <Image
         src={Cloud1}
-        position="absolute"
+        position="fixed"
         w="auto"
         h="80px"
         top="50px"
@@ -102,7 +103,7 @@ export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
       />
       <Image
         src={Cloud2}
-        position="absolute"
+        position="fixed"
         w="auto"
         h="120px"
         top="80px"
@@ -111,7 +112,7 @@ export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
       />
       <Image
         src={Cloud3}
-        position="absolute"
+        position="fixed"
         w="auto"
         h="160px"
         top="120px"
@@ -120,7 +121,7 @@ export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
       />
       <Image
         src={Cloud1}
-        position="absolute"
+        position="fixed"
         w="auto"
         h="100px"
         top="160px"
@@ -129,7 +130,7 @@ export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
       />
       <Image
         src={Cloud2}
-        position="absolute"
+        position="fixed"
         w="auto"
         h="112px"
         top="220px"
@@ -138,7 +139,7 @@ export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
       />
       <Image
         src={Cloud3}
-        position="absolute"
+        position="fixed"
         w="auto"
         h="160px"
         top="300px"
@@ -147,7 +148,7 @@ export const CloudsAnimation = ({ children }: PropsWithChildren<{}>) => {
       />
       <Image
         src={Airplane}
-        position="absolute"
+        position="fixed"
         w="auto"
         h="40px"
         top="85px"

package/src/components/contacts/ContactCard.tsx

@@ -12,41 +12,44 @@ export const ContactCard = ({
   contact,
   index,
   menuItems,
+  onClick,
   onShare,
 }: ContactCardI) => {
-  const {
-    address,
-    city,
-    state,
-    zip,
-    company,
-    email,
-    firstName,
-    lastName,
-    phone,
-  } = contact
+  const hasOnClick = typeof onClick === 'function'
   return (
-    <Container maxW={'none'}>
-      <Stack pb="base" px="base">
+    <Container
+      maxW="none"
+      textAlign="start"
+      onClick={() => onClick?.({ ...contact, index })}
+      transition="background-color 0.3s"
+      _hover={{
+        bg: hasOnClick ? 'lightGreen.1' : 'transparent',
+      }}
+      cursor={hasOnClick ? 'pointer' : 'default'}
+    >
+      <Stack pb="base" pt="1" px="base" spacing="base">
         <ContactCardHeader
           apiError={apiError}
           contact={contact}
           menuItems={menuItems}
           onShare={onShare}
         />
-        <Flex justify="space-between" align="stretch" gap="base">
-          <ContactCardInfo
-            {...{ company, email, firstName, lastName, phone, index }}
-          />
-          <Box
-            borderLeft={`1px solid ${colors.lightBlue[1]}`}
-            w="45%"
-            pl="base"
-          >
-            <ContactCardAddress {...{ company, address, city, state, zip }} />
-          </Box>
-        </Flex>
+        <CardBody {...{ contact, index }} />
       </Stack>
     </Container>
   )
 }
+
+const CardBody = ({
+  contact,
+  index,
+}: Pick<ContactCardI, 'contact' | 'index'>) => {
+  return (
+    <Flex justify="space-between" align="stretch" gap="base">
+      <ContactCardInfo {...{ ...contact, index }} />
+      <Box borderLeft={`1px solid ${colors.lightBlue[1]}`} w="45%" pl="base">
+        <ContactCardAddress {...contact} />
+      </Box>
+    </Flex>
+  )
+}

package/src/components/contacts/ContactCardHeader.tsx

@@ -1,22 +1,11 @@
 import { t } from 'i18next'
-import { Flex, IconButton, Image, Text, useDisclosure } from '@chakra-ui/react'
+import { Flex, Image, Text } from '@chakra-ui/react'
 import { Contacts } from '@/assets/images'
-import {
-  IconMenu,
-  MoreHorizontal,
-  ShareContactPopover,
-  ShareIcon,
-} from '@/components'
+import { ContactHeaderMenu } from '@/components'
 import { ContactCardHeaderI } from '@/interfaces'
 
-export const ContactCardHeader = ({
-  apiError,
-  contact,
-  menuItems,
-  onShare,
-}: ContactCardHeaderI) => {
-  const { category, title } = contact
-  const { isOpen, onOpen, onClose } = useDisclosure()
+export const ContactCardHeader = (props: ContactCardHeaderI) => {
+  const { category, title } = props.contact
   return (
     <Flex align="center" justify="space-between">
       <Flex align="center" gap="base">
@@ -35,29 +24,7 @@ export const ContactCardHeader = ({
           <Text fontSize="xs">{title.toUpperCase()}</Text>
         </Flex>
       </Flex>
-      <Flex align="center" position="relative" gap="base" py="base">
-        <IconButton
-          aria-label="share"
-          variant="menuIcon"
-          icon={<ShareIcon size={18} />}
-          onClick={onOpen}
-          w="fit-content"
-        />
-        <ShareContactPopover
-          apiError={apiError}
-          contact={contact}
-          isOpen={isOpen}
-          onClose={onClose}
-          onShare={onShare}
-        />
-
-        <IconMenu
-          icon={<MoreHorizontal size={32} />}
-          itemForm={contact}
-          menuItems={menuItems}
-          disabled={menuItems.length < 1}
-        />
-      </Flex>
+      <ContactHeaderMenu {...props} />
     </Flex>
   )
 }

package/src/components/contacts/ContactHeaderMenu.tsx

@@ -0,0 +1,42 @@
+import { Flex, IconButton, useDisclosure } from '@chakra-ui/react'
+import {
+  ShareIcon,
+  MoreHorizontal,
+  IconMenu,
+  ShareContactPopover,
+} from '@/components'
+import { ContactCardHeaderI } from '@/interfaces'
+
+export const ContactHeaderMenu = ({
+  apiError,
+  contact,
+  menuItems,
+  onShare,
+}: ContactCardHeaderI) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  return (
+    <Flex align="center" position="relative" gap="base">
+      <IconButton
+        aria-label="share"
+        variant="menuIcon"
+        icon={<ShareIcon size={18} />}
+        onClick={onOpen}
+        w="fit-content"
+      />
+      <ShareContactPopover
+        apiError={apiError}
+        contact={contact}
+        isOpen={isOpen}
+        onClose={onClose}
+        onShare={onShare}
+      />
+
+      <IconMenu
+        icon={<MoreHorizontal size={32} />}
+        itemForm={contact}
+        menuItems={menuItems}
+        disabled={menuItems.length < 1}
+      />
+    </Flex>
+  )
+}

package/src/components/contacts/ContactsContent.tsx

@@ -24,6 +24,7 @@ export const ContactsContent = ({
   children,
   handleAdd,
   disabled,
+  onClick,
   onShare,
 }: ContactsContentI) => {
   const { filteredContacts, handleChange, search } =
@@ -58,7 +59,7 @@ export const ContactsContent = ({
           />
         </Flex>
       </DrawerHeader>
-      <DrawerBody p="0">
+      <DrawerBody p="0" overflowX="hidden">
         <Stack spacing="2" p="base" bg="lightBlue.2" minHeight="full">
           {filteredContacts.map((contact, idx) => (
             <ContactCard
@@ -66,6 +67,7 @@ export const ContactsContent = ({
               key={contact._id}
               contact={contact}
               menuItems={menuItems}
+              onClick={onClick}
               onShare={onShare}
               index={idx}
             />

package/src/components/contacts/addEditPanel/AddEditContactPanel.tsx

@@ -0,0 +1,63 @@
+import { t } from 'i18next'
+import {
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  Flex,
+  Box,
+  Text,
+} from '@chakra-ui/react'
+import { BackCircleButton, PanelHeader, TabsHeader } from '@/components'
+import { Contacts } from '@/assets/images'
+import { AddEditContactPanelI } from '@/interfaces'
+import { dynamicFormProxy } from '@/proxies'
+import { useSnapshot } from 'valtio'
+
+export const AddEditContactPanel = ({
+  detailsComponent,
+  isEditing,
+  onBackClick,
+  permissionsComponent,
+}: AddEditContactPanelI) => {
+  const { fields } = useSnapshot(dynamicFormProxy)
+  const name = fields?.[0]?.children?.[0].children
+  const fullName = `${name?.[0].value} ${name?.[1].value}`
+  const tabs = [
+    {
+      label: t('contacts.details'),
+      component: detailsComponent,
+    },
+    {
+      label: t('contacts.permissions'),
+      component: permissionsComponent,
+    },
+  ]
+  return (
+    <DrawerContent bg="lightBlue.1">
+      <DrawerHeader p="0">
+        <PanelHeader
+          handleCloseButton={() => null}
+          icon={Contacts}
+          title={
+            isEditing ? t('contacts.editContact') : t('contacts.addContact')
+          }
+        />
+        <Flex align="center" gap="base" bg="lightBlue.2" p="base">
+          <BackCircleButton onClick={onBackClick} />
+          <Box
+            borderLeft="solid"
+            borderWidth="1px"
+            borderColor="lightBlue.6"
+            h="1.75rem"
+          />
+          <Text fontSize="lg" fontWeight="medium" isTruncated>
+            {fullName}
+          </Text>
+        </Flex>
+      </DrawerHeader>
+      <DrawerBody p="0" overflowX="hidden" position="relative">
+        <TabsHeader tabList={tabs} />
+      </DrawerBody>
+    </DrawerContent>
+  )
+}

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

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

package/src/components/contacts/index.ts

@@ -1,7 +1,10 @@
+export * from './addEditPanel'
 export * from './shareContactForms'
+export * from './viewPanel'
 export * from './ContactCard'
 export * from './ContactCardAddress'
 export * from './ContactCardHeader'
 export * from './ContactCardInfo'
+export * from './ContactHeaderMenu'
 export * from './ContactsContent'
 export * from './ShareContactPopover'

package/src/components/contacts/viewPanel/CompanyInfoCard.tsx

@@ -0,0 +1,58 @@
+import { t } from 'i18next'
+import { Box, Center, Flex, Stack, Text, Image } from '@chakra-ui/react'
+import { ViewContactPanelI } from '@/interfaces'
+import { getImageAltText } from '@/utils'
+import { Location } from '@/assets/images'
+import { CompanyRating } from './CompanyRating'
+
+export const CompanyInfoCard = ({
+  contact,
+}: Pick<ViewContactPanelI, 'contact'>) => {
+  if (!contact.companyInfo) return null
+  const { company, phone, url, address, city, state, zip, rating } =
+    contact.companyInfo
+  const alt = getImageAltText(Location)
+  return (
+    <Box position="relative">
+      <CompanyRating
+        contact={contact}
+        position="absolute"
+        top="0"
+        right="0"
+        zIndex="1"
+      />
+      <Stack spacing="base">
+        <Text textTransform="uppercase" fontSize="xs">
+          {t('contacts.companyInfo')}
+        </Text>
+        <Flex gap="base" minH="50px">
+          <Center h="78px" w="78px">
+            <Image src={Location} alt={alt} />
+          </Center>
+          <Stack spacing="6">
+            <Stack spacing="0.5">
+              <Text fontWeight="bold" fontSize="lg">
+                {company}
+              </Text>
+              <Box>
+                <Text fontSize="sm">{phone}</Text>
+                <Text variant="email" lineHeight="1" fontSize="sm">
+                  {url}
+                </Text>
+              </Box>
+            </Stack>
+            <Box>
+              <Text fontSize="xs" lineHeight="16px">
+                {address}
+              </Text>
+              <Text
+                fontSize="xs"
+                lineHeight="16px"
+              >{`${city}, ${state} ${zip}`}</Text>
+            </Box>
+          </Stack>
+        </Flex>
+      </Stack>
+    </Box>
+  )
+}

package/src/components/contacts/viewPanel/CompanyRating.tsx

@@ -0,0 +1,27 @@
+import { t } from 'i18next'
+import { StackProps, Flex, Stack, Text } from '@chakra-ui/react'
+import { Star } from '@/components'
+import { ViewContactPanelI } from '@/interfaces'
+import { colors } from '@/theme/colors'
+
+export const CompanyRating = ({
+  contact,
+  ...props
+}: Pick<ViewContactPanelI, 'contact'> & StackProps) => {
+  if (!contact.companyInfo?.rating) return null
+  const { rating, _id } = contact.companyInfo
+  return (
+    <Stack spacing="0" align="end" {...props}>
+      <Text textTransform="uppercase" fontSize="10px">
+        {t('contacts.rating')}
+      </Text>
+      <Flex align="center" gap="1">
+        {Array.from({ length: 5 }).map((_, index) => {
+          const starColor =
+            rating >= index ? colors.yellow['1'] : colors.gray['1']
+          return <Star key={`${_id}-${index}`} stroke={starColor} size={13} />
+        })}
+      </Flex>
+    </Stack>
+  )
+}

package/src/components/contacts/viewPanel/ContactAddressCard.tsx

@@ -0,0 +1,39 @@
+import { t } from 'i18next'
+import { Box, Center, Flex, Stack, Text, Image } from '@chakra-ui/react'
+import { ViewContactPanelI } from '@/interfaces'
+import { getImageAltText } from '@/utils'
+import { Location } from '@/assets/images'
+
+export const ContactAddressCard = ({
+  contact,
+}: Pick<ViewContactPanelI, 'contact'>) => {
+  if (!contact) return null
+  const { address, city, state, zip, lastName } = contact
+  const alt = getImageAltText(Location)
+  return (
+    <Stack spacing="base">
+      <Text textTransform="uppercase" fontSize="xs">
+        {t('contacts.homeAddress')}
+      </Text>
+      <Flex gap="base" minH="50px">
+        <Center h="78px" w="78px">
+          <Image src={Location} alt={alt} />
+        </Center>
+        <Stack spacing="base">
+          <Text fontWeight="bold" fontSize="lg">
+            {`${lastName}s Home`}
+          </Text>
+          <Box>
+            <Text fontSize="xs" lineHeight="16px">
+              {address}
+            </Text>
+            <Text
+              fontSize="xs"
+              lineHeight="16px"
+            >{`${city}, ${state} ${zip}`}</Text>
+          </Box>
+        </Stack>
+      </Flex>
+    </Stack>
+  )
+}

package/src/components/contacts/viewPanel/ContactNotes.tsx

@@ -0,0 +1,16 @@
+import { t } from 'i18next'
+import { Stack, Text } from '@chakra-ui/react'
+
+export const ContactNotes = ({ notes = '' }) => {
+  if (!notes) return null
+  return (
+    <Stack spacing="base">
+      <Text textTransform="uppercase" fontSize="xs">
+        {t('contacts.notes')}
+      </Text>
+      <Text fontSize="sm" fontFamily="secondary" lineHeight="16px">
+        {notes}
+      </Text>
+    </Stack>
+  )
+}

package/src/components/contacts/viewPanel/PersonalInfoCard.tsx

@@ -0,0 +1,41 @@
+import { Box, Center, Flex, Stack, Text } from '@chakra-ui/react'
+import { ContactCardInfoI } from '@/interfaces'
+import { randomColor } from '@/utils'
+
+export const PersonalInfoCard = ({
+  email,
+  firstName,
+  index,
+  lastName,
+  phone,
+  title,
+}: ContactCardInfoI) => {
+  const name = `${firstName} ${lastName}`.trim()
+  const initials = firstName.charAt(0) + lastName.charAt(0)
+  return (
+    <Flex gap="base" minH="50px" align="center">
+      <Center h="78px" w="78px" bg={randomColor(index)}>
+        <Text
+          fontSize="36px"
+          fontWeight="extrabold"
+          fontFamily="primary"
+          color="neutral.white"
+        >
+          {initials}
+        </Text>
+      </Center>
+      <Stack spacing="0.5">
+        <Text fontWeight="bold" fontSize="xl">
+          {name}
+        </Text>
+        <Box>
+          <Text fontSize="sm">{title}</Text>
+          <Text fontSize="sm">{phone}</Text>
+          <Text variant="email" lineHeight="1" fontSize="sm">
+            {email}
+          </Text>
+        </Box>
+      </Stack>
+    </Flex>
+  )
+}

package/src/components/contacts/viewPanel/RoleTag.tsx

@@ -0,0 +1,30 @@
+import { homeRoles } from '@/helpers'
+import { ViewContactPanelI } from '@/interfaces'
+import { Box, Text } from '@chakra-ui/react'
+
+export const RoleTag = ({ roleType }: Pick<ViewContactPanelI, 'roleType'>) => {
+  if (!roleType) return null
+  const { bg, name } = homeRoles[roleType]
+  return (
+    <Box
+      bg={bg}
+      px="base"
+      pt="2"
+      pb="6"
+      position="absolute"
+      top="0"
+      left="0"
+      right="0"
+      zIndex="-1"
+    >
+      <Text
+        color="neutral.white"
+        fontSize="sm"
+        fontWeight="bold"
+        textTransform="uppercase"
+      >
+        {name}
+      </Text>
+    </Box>
+  )
+}