@homefile/components-v2 1.1.0 → 1.2.0

package/src/components/contacts/ShareContactPopover.tsx

@@ -0,0 +1,106 @@
+import { Fragment, ReactNode, useState } from 'react'
+import { t } from 'i18next'
+import { Text, Box, Flex, IconButton, Grid } from '@chakra-ui/react'
+import { HiddenField, Close, Overlay, ShareContactByEmail } from '@/components'
+import { Feedback, ShareWith, SMS, Social } from '@/assets/images'
+import { ShareContactPopoverI } from '@/interfaces'
+
+export const ShareContactPopover = ({
+  apiError,
+  contact,
+  isOpen,
+  onClose,
+  onShare,
+}: ShareContactPopoverI) => {
+  const [activeField, setActiveField] = useState('email')
+  if (!isOpen) return null
+
+  const forms: Record<string, ReactNode> = {
+    email: (
+      <ShareContactByEmail
+        apiError={apiError}
+        contact={contact}
+        onShare={onShare}
+      />
+    ),
+    sms: <Fragment />,
+    social: <Fragment />,
+    homefile: <Fragment />,
+  }
+
+  return (
+    <>
+      <Box
+        position="absolute"
+        top="0px"
+        right={['0px', '50px']}
+        bg="lightBlue.1"
+        zIndex="modal"
+        w="367px"
+        borderRadius="md"
+        boxShadow="xl"
+        overflow="hidden"
+      >
+        <Flex
+          justify="space-between"
+          align="center"
+          h="34px"
+          bg="neutral.white"
+          px="base"
+        >
+          <Text fontSize="sm">{t('contacts.shareContact')}</Text>
+          <IconButton
+            variant="menuIcon"
+            aria-label="Close"
+            icon={<Close />}
+            onClick={onClose}
+            w="fit-content"
+          />
+        </Flex>
+        <Box>
+          {forms[activeField]}
+          <Grid
+            templateColumns="repeat(auto-fill, minmax(70px, 1fr))"
+            gap="base"
+            p="base"
+          >
+            {fields.map(({ disabled, icon = 'email', id, name = '' }) => {
+              return (
+                <HiddenField
+                  key={id}
+                  disabled={disabled}
+                  id={id}
+                  name={name}
+                  icon={fieldIcons[icon]}
+                  onClick={() => setActiveField(id)}
+                  isActive={id === activeField}
+                />
+              )
+            })}
+          </Grid>
+        </Box>
+      </Box>
+      <Overlay
+        onClick={onClose}
+        bg="overlay"
+        showOverlay
+        position="fixed"
+        zIndex="4"
+      />
+    </>
+  )
+}
+
+const fields = [
+  { disabled: true, icon: 'homefile', id: 'homefile', name: 'Homefile' },
+  { disabled: true, icon: 'social', id: 'social', name: 'Social' },
+  { disabled: true, icon: 'sms', id: 'sms', name: 'SMS' },
+  { disabled: false, icon: 'email', id: 'email', name: 'Email' },
+]
+
+const fieldIcons: Record<string, string> = {
+  homefile: ShareWith,
+  social: Social,
+  sms: SMS,
+  email: Feedback,
+}

package/src/components/contacts/index.ts

@@ -1,5 +1,7 @@
+export * from './shareContactForms'
 export * from './ContactCard'
 export * from './ContactCardAddress'
 export * from './ContactCardHeader'
 export * from './ContactCardInfo'
-export * from './ContactsContent'
+export * from './ContactsContent'
+export * from './ShareContactPopover'

package/src/components/contacts/shareContactForms/ShareContactByEmail.tsx

@@ -0,0 +1,50 @@
+import { useState } from 'react'
+import { t } from 'i18next'
+import { Box, Button, Flex } from '@chakra-ui/react'
+import { TextInput } from '@/components'
+import { isValidEmail } from '@/utils'
+import { ShareContactByEmailI } from '@/interfaces'
+
+export const ShareContactByEmail = ({
+  apiError,
+  contact,
+  onShare,
+}: ShareContactByEmailI) => {
+  const [value, setValue] = useState('')
+  const [isDirty, setIsDirty] = useState(apiError ?? false)
+  const errorMessage = apiError
+    ? t('contacts.error')
+    : `${t('forms.email')} ${t('forms.required')}`
+  return (
+    <Box bg="lightBlue.2" p="base" w="100%">
+      <Flex gap="base">
+        <TextInput
+          errorMessage={errorMessage}
+          hasError={!isValidEmail(value) && isDirty}
+          id="shareContactByEmail"
+          handleChange={(e) => setValue(e.target.value)}
+          placeholder={t('contacts.placeholders.email')}
+          value={value}
+          onBlur={() => setIsDirty(true)}
+        />
+
+        <Button
+          variant="secondary"
+          maxW="fit-content"
+          maxH="input.md"
+          onClick={() => {
+            onShare({
+              contact,
+              emailTo: value,
+            })
+            setValue('')
+            setIsDirty(false)
+          }}
+          disabled={!isValidEmail(value)}
+        >
+          {t('buttons.send')}
+        </Button>
+      </Flex>
+    </Box>
+  )
+}

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

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

package/src/components/folderPanel/displayFiles/GridFile.tsx

@@ -25,6 +25,7 @@ export const GridFile = ({
     <WrapItem maxW="7rem" position="relative">
       <Box position="absolute" top="0" right="1" zIndex="docked">
         <IconMenuWithMove
+          disabled={menu.length < 1 ? true: false}
           icon={<MoreHorizontal size={28} />}
           itemForm={itemForm}
           menuItems={menu}

package/src/components/folderPanel/displayFiles/IconMenuWithMove.tsx

@@ -23,7 +23,7 @@ export const IconMenuWithMove = <T extends unknown>({
       {({ isOpen }) => (
         <>
           <Overlay
-            bg="#00000040"
+            bg="overlay"
             showOverlay={isOpen}
             position="fixed"
             zIndex="4"

package/src/components/folderPanel/displayFiles/ListFile.tsx

@@ -62,6 +62,7 @@ export const ListFile = ({
             {updatedAt as string}
           </Text>
           <IconMenuWithMove
+            disabled={menu.length < 1 ? true: false}
             icon={<MoreHorizontal size={28} />}
             itemForm={itemForm}
             menuItems={menu}

package/src/components/folderPanel/displayFiles/MoveModal.tsx

@@ -32,7 +32,7 @@ export const MoveModal = ({
 
   return (
     <Box w="inherit" h="inherit">
-      <Overlay bg="#00000040" showOverlay position="fixed" zIndex="modal" />
+      <Overlay bg="overlay" showOverlay position="fixed" zIndex="modal" />
       <Stack
         p="base"
         boxShadow="lg"

package/src/components/forms/dynamicForm/HiddenField.tsx

@@ -1,11 +1,19 @@
 import { Center, Image, Text } from '@chakra-ui/react'
 import { HiddenFieldI } from '@/interfaces'
 
-export const HiddenField = ({ icon, id, name, onClick }: HiddenFieldI) => {
+export const HiddenField = ({
+  disabled,
+  icon,
+  id,
+  isActive,
+  name,
+  onClick,
+}: HiddenFieldI) => {
   const handleClick = () => onClick(id)
   return (
     <Center
       as="button"
+      disabled={disabled}
       bg="neutral.white"
       borderRadius="md"
       w="auto"
@@ -16,10 +24,16 @@ export const HiddenField = ({ icon, id, name, onClick }: HiddenFieldI) => {
       gap="1"
       transition="all .2s ease-in-out"
       border="1px solid"
-      borderColor="transparent"
+      borderColor={isActive ? 'blue.1' : 'transparent'}
       _hover={{
         borderColor: 'blue.1',
       }}
+      _disabled={{
+        opacity: 0.5,
+        _hover: {
+          borderColor: 'transparent',
+        },
+      }}
       _active={{
         boxShadow: 'md',
       }}

package/src/components/homeBoard/HomeBoard.tsx

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

package/src/components/homeBoard/HomeCard.tsx

@@ -75,6 +75,7 @@ export const HomeCard = ({
             addImage={addImage}
             name={name}
             externalLink={externalLink}
+            edit={edit}
             {...props}
             {...address}
           />

package/src/components/homeSummary/DocumentMenu.tsx

@@ -27,7 +27,7 @@ export const DocumentMenu = ({
       {({ isOpen }) => (
         <>
           <Overlay
-            bg="#00000040"
+            bg="overlay"
             showOverlay={isOpen}
             zIndex="2"
             position="fixed"

package/src/components/icons/ShareIcon.tsx

@@ -0,0 +1,74 @@
+import { colors } from '@/theme/colors'
+
+export const ShareIcon = ({ stroke = colors.blue[3], size = 24 }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 19.5 21.5"
+    >
+      <g
+        id="Icon_feather-share-2"
+        data-name="Icon feather-share-2"
+        transform="translate(-3.75 -2.25)"
+      >
+        <path
+          id="Path_14156"
+          data-name="Path 14156"
+          d="M28.5,6a3,3,0,1,1-3-3,3,3,0,0,1,3,3Z"
+          transform="translate(-6 0)"
+          fill="none"
+          stroke={stroke}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+        <path
+          id="Path_14157"
+          data-name="Path 14157"
+          d="M10.5,16.5a3,3,0,1,1-3-3A3,3,0,0,1,10.5,16.5Z"
+          transform="translate(0 -3.5)"
+          fill="none"
+          stroke={stroke}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+        <path
+          id="Path_14158"
+          data-name="Path 14158"
+          d="M28.5,27a3,3,0,1,1-3-3A3,3,0,0,1,28.5,27Z"
+          transform="translate(-6 -7)"
+          fill="none"
+          stroke={stroke}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+        <path
+          id="Path_14159"
+          data-name="Path 14159"
+          d="M12.885,20.265l6.83,3.98"
+          transform="translate(-2.795 -5.755)"
+          fill="none"
+          stroke={stroke}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+        <path
+          id="Path_14160"
+          data-name="Path 14160"
+          d="M19.7,9.765l-6.82,3.98"
+          transform="translate(-2.795 -2.255)"
+          fill="none"
+          stroke={stroke}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="1.5"
+        />
+      </g>
+    </svg>
+  )
+}

package/src/components/icons/index.ts

@@ -26,6 +26,7 @@ export * from './MoreHorizontal'
 export * from './OpenVideo'
 export * from './Plus'
 export * from './SearchIcon'
+export * from './ShareIcon'
 export * from './Star'
 export * from './TikTok'
 export * from './Trash'

package/src/components/launchpad/IconMenu.tsx

@@ -21,7 +21,7 @@ export const IconMenu = <T extends unknown>({
       {({ isOpen }) => (
         <>
           <Overlay
-            bg="#00000040"
+            bg="overlay"
             showOverlay={isOpen}
             position="fixed"
             zIndex="4"

package/src/components/myHomes/MyHomeCard.tsx

@@ -63,14 +63,18 @@ export const MyHomeCard = ({
         )}
         {!isLoading && (
           <>
-            <EditFileUploader
-              handleInputChange={(event) => addImage({ event, _id })}
-              aria-label={t('ariaLabels.edit')}
-              position="absolute"
-              right="2"
-              top="1"
-              id={index === 0 ? 'homePicture' : ''}
-            />
+          {
+            accountType !== "Member" && (
+              <EditFileUploader
+                handleInputChange={(event) => addImage({ event, _id })}
+                aria-label={t('ariaLabels.edit')}
+                position="absolute"
+                right="2"
+                top="1"
+                id={index === 0 ? 'homePicture' : ''}
+              />
+            )
+          }
             <Image
               src={(image?.bucketName && imageUrl) || randomImages(0)}
               alt={`${name} ${t('images.altImage')}`}

package/src/components/myHomes/MyHomes.tsx

@@ -62,7 +62,7 @@ export const MyHomes = ({
                     id={index === 0 ? 'homeCard' : ''}
                   >
                     <ContainerHeader
-                      menuItems={cardMenuItems}
+                      menuItems={accountType === "Member" ? [] : cardMenuItems}
                       itemForm={{ _id, name }}
                       icon={<MoreHorizontal />}
                       isThin

package/src/components/myProfile/permissions/RolePermissionsTab.tsx

@@ -46,7 +46,7 @@ export const RolePermissionsTab = ({
           showBorder
         />
       </Box>
-      <Box>
+      <Box width={"100%"}>
         <PermissionsBanner role={selectedRole} />
         <Center bg="lightBlue.6" py="base">
           <Flex w="100%">

package/src/components/overlay/Overlay.tsx

@@ -4,6 +4,7 @@ import { OverlayI } from '@/interfaces'
 export const Overlay = ({
   bg = '#fdfdfdca',
   showOverlay = true,
+  onClick,
   ...props
 }: OverlayI) => {
   if (!showOverlay) return null
@@ -15,6 +16,7 @@ export const Overlay = ({
   const animation = showOverlay && `${fadeIn} 0.2s ease-in-out`
   return (
     <Box
+      onClick={onClick}
       bg={bg}
       top="0"
       left="0"

package/src/components/rooms/GroupCard.tsx

@@ -25,6 +25,7 @@ export const GroupCard = ({
   title,
   totalAmount,
   disabled,
+  itemsDisabled,
   ...props
 }: GroupCardI) => {
   const {
@@ -62,7 +63,7 @@ export const GroupCard = ({
           />
         </Flex>
         <Box pb="10" px="base">
-          {isItemsEmpty && <AddItemCard onClick={handleAddItem} />}
+          {isItemsEmpty && <AddItemCard disabled={itemsDisabled} onClick={handleAddItem} />}
 
           {!isItemsEmpty && (
             <Wrap spacing="base">
@@ -116,6 +117,7 @@ export const GroupCard = ({
                       onAddImage={handleImage}
                       onClickDelete={onClickDelete}
                       onClickDetails={onClickDetails}
+                      disabled={itemsDisabled}
                       {...props}
                       {...reportData}
                     />

package/src/components/rooms/ItemCard.tsx

@@ -23,6 +23,7 @@ export const ItemCard = ({
   room,
   report,
   type,
+  disabled,
   onSave,
   ...props
 }: ItemCardI) => {
@@ -73,6 +74,7 @@ export const ItemCard = ({
             { label: t('groups.menu.delete'), handleClick: onClickDelete },
           ]}
           onMove={() => handleMove(reportData)}
+          disabled={disabled}
         />
       </Box>
       <Stack

package/src/components/sendDocument/RecipientCard.tsx

@@ -46,6 +46,7 @@ export const RecipientCard = ({
               <IconMenu
                 icon={<MoreHorizontal size={32} />}
                 menuItems={menu}
+                disabled={menu.length < 1}
                 itemForm={{
                   _id: user.email,
                   name: user.firstName ?? '',

package/src/components/sharedHomePanel/ShareHomeContactList.tsx

@@ -82,7 +82,7 @@ export const ShareHomeContactList = ({
           <FooterButtons button1={button1} button2={button2} />
         </Box>
       </Container>
-      <Overlay bg="#00000040" showOverlay position="fixed" zIndex="4" />
+      <Overlay bg="overlay" showOverlay position="fixed" zIndex="4" />
     </>
   )
 }

package/src/helpers/homeAssistant/HomeAssistant.helper.tsx

@@ -1,4 +1,3 @@
-import { t } from 'i18next'
 import {
   Fire,
   House,
@@ -11,27 +10,27 @@ import { HomeAssistantStepI } from '@/interfaces'
 
 export const homeAssistantSteps: Array<HomeAssistantStepI> = [
   {
-    title: t('homeAssistant.steps.smoke'),
+    title: 'Smoke & CO2 detectors',
     icon: Fire,
   },
   {
-    title: t('homeAssistant.steps.heating'),
+    title: 'Heating & Cooling',
     icon: Temperature,
   },
   {
-    title: t('homeAssistant.steps.appliances'),
+    title: 'Appliances',
     icon: LargeAppliances,
   },
   {
-    title: t('homeAssistant.steps.structure'),
+    title: 'Structure',
     icon: House,
   },
   {
-    title: t('homeAssistant.steps.landscape'),
+    title: 'Landscape',
     icon: Water,
   },
   {
-    title: t('homeAssistant.steps.goals'),
+    title: 'Goals',
     icon: Target,
   },
 ]

package/src/helpers/myProfile/RolePermissions.helper.ts

@@ -8,39 +8,39 @@ export const rolePermissions: RolePermissionI[] = [
       view: ['member', 'contributor', 'manager'],
       add: ['manager'],
       edit: ['manager'],
-      delete: ['manager'],
-    },
-  },
-  {
-    id: 'financial-data',
-    label: 'Financial Data',
-    permissions: {
-      view: ['member', 'contributor', 'manager'],
-      add: ['contributor', 'manager'],
-      edit: ['manager'],
-      delete: ['manager'],
+      delete: [],
     },
   },
+  // {
+  //   id: 'financial-data',
+  //   label: 'Financial Data',
+  //   permissions: {
+  //     view: ['member', 'contributor', 'manager'],
+  //     add: ['contributor', 'manager'],
+  //     edit: ['manager'],
+  //     delete: ['manager'],
+  //   },
+  // },
   {
     id: 'partners',
     label: 'Partners',
     permissions: {
       view: ['member', 'contributor', 'manager'],
       add: ['contributor', 'manager'],
-      edit: ['manager'],
-      delete: ['manager'],
-    },
-  },
-  {
-    id: 'folders',
-    label: 'Folders',
-    permissions: {
-      view: ['member', 'contributor', 'manager'],
-      add: ['manager'],
-      edit: ['contributor', 'manager'],
+      edit: [],
       delete: ['manager'],
     },
   },
+  // {
+  //   id: 'folders',
+  //   label: 'Folders',
+  //   permissions: {
+  //     view: ['member', 'contributor', 'manager'],
+  //     add: ['manager'],
+  //     edit: ['contributor', 'manager'],
+  //     delete: ['manager'],
+  //   },
+  // },
   {
     id: 'home-items',
     label: 'Home items',
@@ -62,10 +62,10 @@ export const rolePermissions: RolePermissionI[] = [
     },
   },
   {
-    id: 'rooms-items',
-    label: 'Rooms items',
+    id: 'rooms-categories',
+    label: 'Room Categories',
     permissions: {
-      view: ['member', 'contributor', 'manager'],
+      view: [],
       add: ['contributor', 'manager'],
       edit: ['contributor', 'manager'],
       delete: ['contributor', 'manager'],

package/src/hooks/myProfile/useRolePermissionsTab.ts

@@ -11,6 +11,7 @@ export const useRolePermissionsTab = ({
   onSelect,
 }: RolePermissionsTabI) => {
   const actions: ActionsPermitted[] = ['view', 'add', 'edit', 'delete']
+
   const selectedActionsFromSelected = () => {
     const selectedActions: ActionsPermitted[] = []
     actions.forEach((action) => {
@@ -21,6 +22,7 @@ export const useRolePermissionsTab = ({
     })
     return selectedActions
   }
+
   const [callback, setCallback] = useState<RolePermissionObject>(selected)
   const [selectedRole, setSelectedRole] = useState<ReducedRoleType>('member')
   const [selectedActions, setSelectedActions] = useState<ActionsPermitted[]>(
@@ -92,6 +94,12 @@ export const useRolePermissionsTab = ({
   useEffect(() => {
     setSelectedActions(selectedActionsFromSelected)
   }, [selectedRole])
+
+  useEffect(() => {
+    setSelectedActions(selectedActionsFromSelected)
+    setCallback(selected)
+  }, [selected])
+  
   return {
     actions,
     callback,

package/src/interfaces/contacts/ContactCard.interface.ts

@@ -1,4 +1,4 @@
-import { MenuItemI } from "@/interfaces"
+import { MenuItemI, ShareContactPopoverI } from '@/interfaces'
 
 export interface InfoContactCardI {
   address: string
@@ -16,7 +16,9 @@ export interface InfoContactCardI {
 }
 
 export interface ContactCardI {
+  apiError?: boolean
   contact: InfoContactCardI
   index: number
   menuItems: MenuItemI[]
+  onShare: ShareContactPopoverI['onShare']
 }

package/src/interfaces/contacts/ContactCardHeader.interface.ts

@@ -1,6 +1,8 @@
-import { InfoContactCardI, MenuItemI } from "@/interfaces"
+import { InfoContactCardI, MenuItemI, ShareContactPopoverI } from '@/interfaces'
 
 export interface ContactCardHeaderI {
+  apiError?: boolean
   contact: InfoContactCardI
   menuItems: MenuItemI[]
-}
+  onShare: ShareContactPopoverI['onShare']
+}