@homefile/components-v2 1.3.0 → 1.4.1

package/dist/stories/homeAssistant/panel/HomeAssistantPanel.stories.js

@@ -36,5 +36,5 @@ export const HomeAssistantPanelComponent = (args) => {
         return prev - 1;
     });
     const currentForm = forms[currentStep];
-    return (_jsx(HomeAssistantPanel, Object.assign({}, args, { currentStep: currentStep, currentForm: currentForm, onNext: handleFormChange, onBack: handleBack })));
+    return (_jsx(HomeAssistantPanel, Object.assign({}, args, { currentStep: currentStep, currentForm: currentForm, onNext: handleFormChange, onBack: handleBack, onSave: action('onSave') })));
 };

package/dist/stories/partner/customPartnerTiles/ShineTile.stories.d.ts

@@ -0,0 +1,5 @@
+import { ShortPartnerTileI } from '../../../interfaces';
+import { Meta } from '@storybook/react';
+declare const _default: Meta;
+export default _default;
+export declare const ShineTileComponent: (args: ShortPartnerTileI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/partner/customPartnerTiles/ShineTile.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ShineTile } from '../../../components';
+import { menuMock } from '../../../mocks';
+import { Box } from '@chakra-ui/react';
+export default {
+    title: 'Components/Partner',
+    component: ShineTile,
+    args: {
+        menuItems: menuMock,
+    },
+    argTypes: {
+        menuItems: {
+            control: { disable: true },
+        },
+    },
+};
+export const ShineTileComponent = (args) => {
+    return (_jsx(Box, { maxW: "326px", children: _jsx(ShineTile, Object.assign({}, args)) }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/assets/images/circle-face.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27.292" height="27.295" viewBox="0 0 27.292 27.295">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_22561" data-name="Rectangle 22561" width="27.292" height="27.295" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_18754" data-name="Group 18754" clip-path="url(#clip-path)">
+    <path id="Path_14078" data-name="Path 14078" d="M35.441,22.423a6.682,6.682,0,0,1-6.651,6.154,6.713,6.713,0,0,1-1.73-.235,6.672,6.672,0,0,1,6.648-6.151c.186,0,.365.013.545.026a6.945,6.945,0,0,1,1.187.207" transform="translate(-20.064 -16.452)" fill="#40566b"/>
+    <path id="Path_14079" data-name="Path 14079" d="M57.189,25.353a6.625,6.625,0,0,0,.59-2.263,6.674,6.674,0,0,1,4.928,6.126,6.674,6.674,0,0,1-5.518-3.863" transform="translate(-42.401 -17.12)" fill="#323954"/>
+    <path id="Path_14080" data-name="Path 14080" d="M34.776,31.84A6.674,6.674,0,0,0,40.295,35.7c0,.106.015.209.015.315V38.49a6.675,6.675,0,0,1-13.35,0V36.019c0-.176.013-.349.026-.522a6.632,6.632,0,0,0,7.791-3.656" transform="translate(-19.989 -23.607)" fill="#daf1f3"/>
+    <path id="Path_14081" data-name="Path 14081" d="M26.045,83.189l.771,2.873A13.633,13.633,0,0,1,13,81.845l2.242-1.955a10.653,10.653,0,0,0,10.8,3.3" transform="translate(-9.639 -59.233)" fill="#e24c5d"/>
+    <path id="Path_14082" data-name="Path 14082" d="M61.877,3.486,59.891,5.7A10.626,10.626,0,0,0,52.77,2.974V0a13.589,13.589,0,0,1,9.107,3.486" transform="translate(-39.125)" fill="#f6cf76"/>
+    <path id="Path_14083" data-name="Path 14083" d="M86.837,23.642a13.574,13.574,0,0,1-.641,4.135L83.3,27.063a10.679,10.679,0,0,0-2.991-11.369L82.3,13.48a13.616,13.616,0,0,1,4.541,10.162" transform="translate(-59.545 -9.994)" fill="#e24c5d"/>
+    <path id="Path_14084" data-name="Path 14084" d="M7.183,68.746,4.941,70.7A13.61,13.61,0,0,1,2.13,65.576l2.891-.716a10.633,10.633,0,0,0,2.161,3.886" transform="translate(-1.579 -48.089)" fill="#f6cf76"/>
+    <path id="Path_14085" data-name="Path 14085" d="M73.776,66.642A13.668,13.668,0,0,1,64.3,75.689l-.771-2.873a10.694,10.694,0,0,0,7.351-6.888Z" transform="translate(-47.104 -48.881)" fill="#00c0b7"/>
+    <path id="Path_14086" data-name="Path 14086" d="M4,4.008a13.6,13.6,0,0,1,9.648-4V2.984a10.672,10.672,0,0,0-10.2,13.8L.551,17.5A13.65,13.65,0,0,1,4,4.008" transform="translate(0 -0.007)" fill="#00c0b7"/>
+    <path id="Path_14087" data-name="Path 14087" d="M48.382,68.16a2.9,2.9,0,0,1-1.5-.418l.4-.665a2.112,2.112,0,0,0,2.693-.424l.584.51a2.9,2.9,0,0,1-2.182,1" transform="translate(-34.763 -49.419)" fill="#40566b"/>
+    <path id="Path_14088" data-name="Path 14088" d="M41.266,52.4a.776.776,0,1,1-.776-.776.776.776,0,0,1,.776.776" transform="translate(-29.446 -38.272)" fill="#40566b"/>
+    <path id="Path_14089" data-name="Path 14089" d="M59.766,52.4a.776.776,0,1,1-.776-.776.776.776,0,0,1,.776.776" transform="translate(-43.162 -38.272)" fill="#40566b"/>
+  </g>
+</svg>

package/src/assets/images/company.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27.2" height="21.5" viewBox="0 0 27.2 21.5">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_18088" data-name="Rectangle 18088" width="27.2" height="21.5" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Group_16616" data-name="Group 16616" transform="translate(-1127.558 -2313.81)">
+    <rect id="Rectangle_18076" data-name="Rectangle 18076" width="7.966" height="7.071" transform="translate(1144.598 2324.792)" fill="#00c0b7"/>
+    <rect id="Rectangle_18077" data-name="Rectangle 18077" width="7.966" height="3.146" transform="translate(1144.598 2331.864)" fill="#f6cf76"/>
+    <path id="Path_11902" data-name="Path 11902" d="M33.78,44.66v2.047H10.97V44.66Z" transform="translate(1118.783 2278.086)" fill="#40566b"/>
+    <path id="Path_11903" data-name="Path 11903" d="M33.78,29.95v2.943H10.97V29.95H33.78Z" transform="translate(1118.783 2289.852)" fill="#f6cf76"/>
+    <path id="Path_11904" data-name="Path 11904" d="M35.8,0V3.81H48.674V0Z" transform="translate(1098.921 2313.81)" fill="#e24c5d"/>
+    <path id="Path_11905" data-name="Path 11905" d="M71.41,61.961v3.146H67.97V54.889H71.41Z" transform="translate(1073.188 2269.903)" fill="#00a1aa"/>
+    <path id="Path_11906" data-name="Path 11906" d="M54.219,54.889V65.106H50.78V54.889Z" transform="translate(1086.939 2269.903)" fill="#00a1aa"/>
+    <rect id="Rectangle_18078" data-name="Rectangle 18078" width="7.965" height="3.146" transform="translate(1129.753 2331.864)" fill="#f6cf76"/>
+    <rect id="Rectangle_18079" data-name="Rectangle 18079" width="7.965" height="7.071" transform="translate(1129.753 2324.792)" fill="#00c0b7"/>
+    <rect id="Rectangle_18080" data-name="Rectangle 18080" width="0.4" height="10.217" transform="translate(1140.958 2324.792)" fill="#40566b"/>
+    <rect id="Rectangle_18081" data-name="Rectangle 18081" width="0.6" height="2.183" transform="translate(1137.056 2317.619)" fill="#40566b"/>
+    <rect id="Rectangle_18082" data-name="Rectangle 18082" width="0.6" height="2.183" transform="translate(1144.66 2317.619)" fill="#40566b"/>
+    <rect id="Rectangle_18083" data-name="Rectangle 18083" width="2.286" height="0.4" transform="translate(1146.845 2328.267) rotate(-45)" fill="#fff"/>
+    <rect id="Rectangle_18084" data-name="Rectangle 18084" width="4.741" height="0.4" transform="translate(1147.044 2330.002) rotate(-45)" fill="#fff"/>
+    <rect id="Rectangle_18085" data-name="Rectangle 18085" width="2.288" height="0.4" transform="translate(1132.034 2328.266) rotate(-44.939)" fill="#fff"/>
+    <rect id="Rectangle_18086" data-name="Rectangle 18086" width="4.74" height="0.4" transform="translate(1132.235 2330.001) rotate(-45)" fill="#fff"/>
+    <rect id="Rectangle_18087" data-name="Rectangle 18087" width="27.2" height="0.6" transform="translate(1127.558 2334.709)" fill="#40566b"/>
+    <g id="Group_16615" data-name="Group 16615" transform="translate(1127.558 2313.81)">
+      <g id="Group_16614" data-name="Group 16614" clip-path="url(#clip-path)">
+        <path id="Path_11907" data-name="Path 11907" d="M44.83,5.842c.008.179.2.255.395.255.174,0,.375-.042.375-.246,0-.224-.241-.241-.428-.258-.356-.028-.714-.151-.714-.557,0-.434.356-.616.745-.616.367,0,.748.154.748.593h-.392c-.023-.159-.188-.227-.356-.227s-.333.089-.333.241c0,.173.171.215.375.235.415.039.77.129.77.588s-.4.608-.787.61-.8-.19-.8-.619Z" transform="translate(-35.54 -3.536)" fill="#fff"/>
+        <path id="Path_11908" data-name="Path 11908" d="M58.048,6.59V5.762H57.3V6.59h-.417V4.631H57.3v.747h.75V4.631h.42V6.59Z" transform="translate(-45.5 -3.704)" fill="#fff"/>
+        <path id="Path_11909" data-name="Path 11909" d="M70.329,6.5a.958.958,0,0,1-1-1.01,1,1,0,1,1,2,0A.963.963,0,0,1,70.329,6.5m.006-.381a.57.57,0,0,0,.582-.63.582.582,0,1,0-1.162,0,.564.564,0,0,0,.579.63" transform="translate(-55.459 -3.581)" fill="#fff"/>
+        <path id="Path_11910" data-name="Path 11910" d="M83.842,6.57V4.611c.28,0,.557,0,.837,0a.676.676,0,0,1,.7.714.667.667,0,0,1-.7.692h-.417V6.57Zm.837-.913a.315.315,0,0,0,.3-.344.309.309,0,0,0-.3-.336h-.426v.68Z" transform="translate(-67.066 -3.687)" fill="#fff"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/assets/images/index.ts

@@ -20,10 +20,12 @@ import Check from './check.svg'
 import CheckInCircle from './check-in-circle.svg'
 import CheckPen from './check-pen.svg'
 import Chemistry from './chemistry.svg'
+import CircleFace from './circle-face.svg'
 import Cleaning from './cleaning.svg'
 import Closet from './closet.svg'
 import Clouds from './clouds.png'
 import Co2 from './co2.svg'
+import Company from './company.svg'
 import ComputerReport from './computer-report.svg'
 import Confirmation from './confirmation.svg'
 import Construction from './construction.svg'
@@ -76,6 +78,7 @@ import Laundry from './laundry.svg'
 import Light from './light.svg'
 import LivingRoom from './living-room.svg'
 import Loading from './loading.svg'
+import Location from './location.jpg'
 import LogoCompany from './logo-company.svg'
 import LogoSmall from './logo-small.svg'
 import MagnifyingGlassReport from './magnifying-glass-report.svg'
@@ -172,10 +175,12 @@ export {
   CheckInCircle,
   CheckPen,
   Chemistry,
+  CircleFace,
   Cleaning,
   Closet,
   Clouds,
   Co2,
+  Company,
   ComputerReport,
   Confirmation,
   Construction,
@@ -228,6 +233,7 @@ export {
   Light,
   LivingRoom,
   Loading,
+  Location,
   LogoCompany,
   LogoSmall,
   MagnifyingGlassReport,
@@ -308,3 +314,4 @@ export * from './form'
 export * from './logos'
 export * from './groups'
 export * from './placeholders'
+export * from './shine'

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