@homefile/components-v2 1.2.2 → 1.4.0

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

@@ -0,0 +1,26 @@
+import { Contacts } from '@/assets/images'
+import { ContactHeaderMenu } from '@/components'
+import { partnerCategoriesIcons } from '@/helpers'
+import { ContactCardHeaderI } from '@/interfaces'
+import { Flex, Image, Text, Stack } from '@chakra-ui/react'
+
+export const ViewContactHeader = (props: ContactCardHeaderI) => {
+  const { category } = props.contact
+  const icon =
+    partnerCategoriesIcons[
+      category.toLowerCase() as keyof typeof partnerCategoriesIcons
+    ] ?? Contacts
+  return (
+    <Flex align="center" justify="space-between">
+      <Flex align="center" gap="2">
+        <Image src={icon} boxSize="22px" />
+        <Stack spacing="-1">
+          <Text fontSize="xs" noOfLines={1} textTransform="uppercase">
+            {category}
+          </Text>
+        </Stack>
+      </Flex>
+      <ContactHeaderMenu {...props} />
+    </Flex>
+  )
+}

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

@@ -0,0 +1,70 @@
+import { t } from 'i18next'
+import {
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  Stack,
+  Container,
+  Divider,
+} from '@chakra-ui/react'
+import { Contacts } from '@/assets/images'
+import {
+  CompanyInfoCard,
+  ContactAddressCard,
+  ContactNotes,
+  PanelHeader,
+  RoleTag,
+  PersonalInfoCard,
+  ViewContactHeader,
+} from '@/components'
+import { ViewContactPanelI } from '@/interfaces'
+
+export const ViewContactPanel = ({
+  contact,
+  menuItems,
+  handleClose,
+  onShare,
+  roleType,
+}: ViewContactPanelI) => {
+  const isHomeowner = roleType === 'homeowner'
+  return (
+    <DrawerContent bg="lightBlue.1">
+      <DrawerHeader p="0">
+        <PanelHeader
+          handleCloseButton={handleClose}
+          icon={Contacts}
+          title={t('contacts.contactView')}
+        />
+      </DrawerHeader>
+      <DrawerBody p="0" overflowX="hidden" position="relative">
+        <RoleTag roleType={roleType} />
+        <Stack px="base" spacing="base">
+          <Container mt="36px" p="base" borderRadius="lg">
+            <Stack spacing="base">
+              <ViewContactHeader
+                contact={contact}
+                menuItems={menuItems}
+                onShare={onShare}
+              />
+              <PersonalInfoCard {...{ ...contact, index: 0 }} />
+              {isHomeowner && (
+                <>
+                  <Divider borderStyle="dashed" borderColor="lightBlue.6" />
+                  <ContactAddressCard contact={contact} />
+                </>
+              )}
+              {!isHomeowner && (
+                <>
+                  <Divider borderStyle="dashed" borderColor="lightBlue.6" />
+                  <CompanyInfoCard contact={contact} />
+                  <Divider borderStyle="dashed" borderColor="lightBlue.6" />
+                  <ContactNotes notes={contact.notes} />
+                </>
+              )}
+            </Stack>
+          </Container>
+        </Stack>
+      </DrawerBody>
+    </DrawerContent>
+  )
+}

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

@@ -0,0 +1,8 @@
+export * from './CompanyInfoCard'
+export * from './CompanyRating'
+export * from './ContactAddressCard'
+export * from './ContactNotes'
+export * from './PersonalInfoCard'
+export * from './RoleTag'
+export * from './ViewContactHeader'
+export * from './ViewContactPanel'

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

@@ -23,6 +23,7 @@ import { fieldIcons } from '@/helpers'
 export const DynamicForm = ({
   form: fields,
   onUpload,
+  showTitle = true,
   uploadingFieldId,
 }: DynamicFormI) => {
   const {
@@ -37,13 +38,16 @@ export const DynamicForm = ({
 
   return (
     <Stack bg="lightBlue.1" spacing="0" h="full">
-      <Text fontFamily="secondary" px="base" pt="4" pb="2">
-        {t('forms.itemDetails')}
-      </Text>
+      {showTitle && (
+        <Text fontFamily="secondary" px="base" pt="4" pb="2">
+          {t('forms.itemDetails')}
+        </Text>
+      )}
       <FormProvider {...form}>
         <>
           {visibleFields?.map((field) => {
             const {
+              canBeHidden,
               children,
               description,
               icon,
@@ -52,7 +56,6 @@ export const DynamicForm = ({
               options,
               type,
               value,
-              visible,
             } = field
 
             const baseProps = {
@@ -65,7 +68,7 @@ export const DynamicForm = ({
               key: id,
               id,
               onRemove: handleRemove,
-              isAlwaysVisible: visible,
+              canBeHidden,
             }
             switch (type) {
               case 'date':
@@ -153,7 +156,7 @@ export const DynamicForm = ({
                     id={id}
                     fields={children}
                     onRemove={handleRemove}
-                    visible={visible}
+                    canBeHidden={canBeHidden}
                   />
                 )
               default:

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

@@ -0,0 +1,57 @@
+import { Stack } from '@chakra-ui/react'
+import { SimpleDynamicFormI, IconTypes } from '@/interfaces'
+import {
+  TextField,
+  SelectField,
+  SwitchField,
+  NumberField,
+  FieldDivider,
+} from '@/components'
+import { fieldIcons } from '@/helpers'
+
+export const SimpleDynamicForm = ({ fields }: SimpleDynamicFormI) => {
+  return (
+    <Stack bg="neutral.white" spacing="0" h="full" boxShadow="md">
+      {fields?.map((field) => {
+        const { description, icon, id, name, options, type, value } = field
+
+        const baseProps = {
+          description,
+          id,
+          value,
+          icon: icon ? (fieldIcons[icon] as IconTypes) : undefined,
+          placeholder: name ?? description,
+        }
+        switch (type) {
+          case 'number':
+            return (
+              <FieldDivider key={id}>
+                <NumberField {...baseProps} />
+              </FieldDivider>
+            )
+          case 'text':
+          case 'string':
+            return (
+              <FieldDivider key={id}>
+                <TextField {...baseProps} />
+              </FieldDivider>
+            )
+          case 'select':
+            return (
+              <FieldDivider key={id}>
+                <SelectField {...baseProps} options={options} />
+              </FieldDivider>
+            )
+          case 'switch':
+            return (
+              <FieldDivider key={id}>
+                <SwitchField {...baseProps} />
+              </FieldDivider>
+            )
+          default:
+            return null
+        }
+      })}
+    </Stack>
+  )
+}

package/src/components/forms/dynamicForm/fields/FieldWithDelete.tsx

@@ -6,10 +6,9 @@ import { FieldWithDeleteI } from '@/interfaces'
 export const FieldWithDelete = ({
   children,
   id,
-  isAlwaysVisible,
+  canBeHidden = true,
   onRemove = () => {},
 }: PropsWithChildren<FieldWithDeleteI>) => {
-  const isUndefined = isAlwaysVisible === undefined
   return (
     <Flex
       align="center"
@@ -18,7 +17,7 @@ export const FieldWithDelete = ({
       p="base"
     >
       {children}
-      {!isUndefined && (
+      {canBeHidden && (
         <IconButton
           aria-label="Remove field"
           variant="unstyled"

package/src/components/forms/dynamicForm/fields/GroupField.tsx

@@ -3,9 +3,14 @@ import { GroupFieldI } from '@/interfaces'
 import { FieldWithDelete } from '@/components'
 import { SingleFields } from './SingleFields'
 
-export const GroupField = ({ id, fields, onRemove, visible }: GroupFieldI) => {
+export const GroupField = ({
+  id,
+  fields,
+  onRemove,
+  canBeHidden,
+}: GroupFieldI) => {
   return (
-    <FieldWithDelete id={id} onRemove={onRemove} isAlwaysVisible={visible}>
+    <FieldWithDelete id={id} onRemove={onRemove} canBeHidden={canBeHidden}>
       <Stack spacing="base" flex="1">
         <SingleFields fields={fields} />
       </Stack>

package/src/components/forms/dynamicForm/index.ts

@@ -1,5 +1,5 @@
 export * from './fields'
 export * from './DynamicForm'
-export * from './DynamicFormSimple'
+export * from './SimpleDynamicForm'
 export * from './HiddenField'
 export * from './HiddenFieldSection'

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

@@ -16,8 +16,11 @@ import {
 } from '@/assets/images'
 import { useState } from 'react'
 
-export const ApplianceSteps = ({ onClick }: ApplianceStepsI) => {
-  const [appliances, setAppliances] = useState<string[]>([])
+export const ApplianceSteps = ({
+  addedAppliances = [],
+  onClick,
+}: ApplianceStepsI) => {
+  const [appliances, setAppliances] = useState<string[]>(addedAppliances)
   const handleClick = (id: string) => {
     if (appliances.includes(id)) {
       const newAppliances = appliances.filter((appliance) => appliance !== id)

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

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react'
+import { FormProvider } from 'react-hook-form'
 import { t } from 'i18next'
 import {
   DrawerContent,
@@ -11,13 +12,14 @@ import {
 import { IA } from '@/assets/images'
 import {
   ApplianceSteps,
-  DynamicFormSimple,
+  SimpleDynamicForm,
   FooterButtons,
   HomeAssistantPanelStep,
   PanelHeader,
 } from '@/components'
 import { HomeAssistantPanelI } from '@/interfaces'
 import { homeAssistantSteps } from '@/helpers'
+import { useSimpleDynamicForm } from '@/hooks'
 
 export const HomeAssistantPanel = ({
   children,
@@ -27,10 +29,17 @@ export const HomeAssistantPanel = ({
   onBack,
   onClose,
   onNext,
+  onSave,
+  backDisabled,
+  nextDisabled,
 }: PropsWithChildren<HomeAssistantPanelI>) => {
   const { title } = homeAssistantSteps[currentStep - 1]
   const text = `${t('homeAssistant.details')} ${title.toLowerCase()}:`
   const isAppliances = currentStep === 3
+  const { form, updatedFields } = useSimpleDynamicForm({
+    fields: currentForm,
+  })
+
   return (
     <DrawerContent bg="lightBlue.1">
       <DrawerHeader p="0">
@@ -48,7 +57,9 @@ export const HomeAssistantPanel = ({
           <Text fontFamily="secondary" fontSize="sm">
             {text}
           </Text>
-          <DynamicFormSimple form={currentForm} />
+          <FormProvider {...form}>
+            <SimpleDynamicForm fields={currentForm} />
+          </FormProvider>
         </Stack>
       </DrawerBody>
       <DrawerFooter px="0" py="6" bg="neutral.white">
@@ -57,16 +68,18 @@ export const HomeAssistantPanel = ({
             buttonStyle: 'secondaryFooter',
             label: t('buttons.back'),
             onClick: onBack,
+            isDisabled: backDisabled,
           }}
           button2={{
             buttonStyle: 'primaryFooter',
-            label: t('buttons.next'),
-            onClick: onNext,
+            label: t('buttons.saveStep'),
+            onClick: () => onSave(updatedFields),
           }}
           button3={{
-            buttonStyle: 'secondaryFooter',
-            label: t('buttons.cancel'),
-            onClick: onClose,
+            buttonStyle: 'primaryFooter',
+            label: t('buttons.next'),
+            onClick: onNext,
+            isDisabled: nextDisabled,
           }}
         />
       </DrawerFooter>

package/src/components/homeBoard/HomeBoard.tsx

@@ -263,6 +263,9 @@ export const HomeBoard = () => {
         onBack={handleHomeAssistantBack}
         onApplianceClick={() => null}
         onClose={onRightClose}
+        onSave={() => {}}
+        backDisabled={false}
+        nextDisabled={false}
       />
     ),
   }

package/src/components/homeBoard/HomeCardWithRecipent.tsx

@@ -29,6 +29,7 @@ export const HomeCardWithRecipent = ({
   recipients,
   records = {},
   disabled,
+  propertyDisabled
 }: HomeCardWithRecipentI) => {
   const {
     isRightOpen,
@@ -60,6 +61,19 @@ export const HomeCardWithRecipent = ({
     },
   ]
 
+  const noPropertyTabs = [
+    {
+      label: t('homeBoard.tabs.tab2'),
+      component: (
+        <HomeCardRecipients
+          recipients={recipients}
+          menu={menu}
+          onEditClick={handleEditAccountType}
+        />
+      ),
+    }
+  ]
+
   return (
     <Container variant="launchpad">
       <HomeCard
@@ -77,7 +91,7 @@ export const HomeCardWithRecipent = ({
         edit={!disabled}
       />
 
-      <TabsHeader tabList={tabs} />
+      <TabsHeader tabList={propertyDisabled ? noPropertyTabs : tabs} />
 
       <RightPanel isOpen={isRightOpen} onClose={onRightClose} size={panelSize}>
         <EditAccountType

package/src/components/onboarding/pages/ActivateAccount.tsx

@@ -1,6 +1,11 @@
 import { t } from 'i18next'
 import { Box, Container, Text, Center, Button } from '@chakra-ui/react'
-import { Logo, WelcomeHeader, ButtonLoader } from '@/components'
+import {
+  Logo,
+  WelcomeHeader,
+  ButtonLoader,
+  BasePageWrapper,
+} from '@/components'
 import { ActivateAccountI } from '@/interfaces'
 import { useWindowDimensions } from '@/hooks'
 
@@ -14,7 +19,7 @@ export const ActivateAccount = ({
   } = useWindowDimensions()
 
   return (
-    <Box w="container.full" zIndex="2" position="relative">
+    <BasePageWrapper>
       <Container size="validation" boxShadow="lg">
         <Container variant="secondary">
           <Logo />
@@ -47,6 +52,6 @@ export const ActivateAccount = ({
           </Center>
         </Container>
       </Container>
-    </Box>
+    </BasePageWrapper>
   )
 }

package/src/components/onboarding/pages/BasePageWrapper.tsx

@@ -0,0 +1,10 @@
+import { Box } from '@chakra-ui/react'
+import { PropsWithChildren } from 'react'
+
+export const BasePageWrapper = ({ children }: PropsWithChildren) => {
+  return (
+    <Box w="container.full" zIndex="2" position="relative" mt="onboarding.top">
+      {children}
+    </Box>
+  )
+}

package/src/components/onboarding/pages/EmailValidation.tsx

@@ -8,7 +8,7 @@ import {
   Center,
   Button,
 } from '@chakra-ui/react'
-import { Logo, ButtonLoader } from '@/components'
+import { Logo, ButtonLoader, BasePageWrapper } from '@/components'
 import { EmailValidationI } from '@/interfaces'
 import { Confirmation } from '@/assets/images'
 
@@ -18,7 +18,7 @@ export const EmailValidation = ({
   handleResendBt,
 }: EmailValidationI) => {
   return (
-    <Box w="container.full" zIndex="2" position="relative">
+    <BasePageWrapper>
       <Container size="validation" boxShadow="lg">
         <Container variant="secondary">
           <Logo />
@@ -64,6 +64,6 @@ export const EmailValidation = ({
           </Button>
         </Center>
       </Container>
-    </Box>
+    </BasePageWrapper>
   )
 }

package/src/components/onboarding/pages/NewPassword.tsx

@@ -1,6 +1,12 @@
 import { t } from 'i18next'
 import { Box, Button, Text, Container, Stack, chakra } from '@chakra-ui/react'
-import { Logo, Footer, ButtonLoader, PasswordInput } from '@/components'
+import {
+  Logo,
+  Footer,
+  ButtonLoader,
+  PasswordInput,
+  BasePageWrapper,
+} from '@/components'
 import { isValidPassword, passwordMatch } from '@/utils'
 import { useNewPassword } from '@/hooks'
 import { NewPasswordI } from '@/interfaces'
@@ -13,7 +19,7 @@ export const NewPassword = ({
   const { inputs, handleInputChange, handleSubmit, isValidated } =
     useNewPassword(handleReset)
   return (
-    <Box w="container.full" zIndex="2" position="relative">
+    <BasePageWrapper>
       <Container size="onboarding" boxShadow="lg">
         <Logo />
         <Container variant="ghost" mt={4} mb={6}>
@@ -82,6 +88,6 @@ export const NewPassword = ({
         </Box>
       </Container>
       <Footer />
-    </Box>
+    </BasePageWrapper>
   )
 }

package/src/components/onboarding/pages/ResendResetPassword.tsx

@@ -8,7 +8,7 @@ import {
   Center,
   Button,
 } from '@chakra-ui/react'
-import { ButtonLoader, Logo } from '@/components'
+import { BasePageWrapper, ButtonLoader, Logo } from '@/components'
 import { EmailValidationI } from '@/interfaces'
 import { ResendPassword } from '@/assets/images'
 
@@ -18,7 +18,7 @@ export const ResendResetPassword = ({
   handleResendBt,
 }: EmailValidationI) => {
   return (
-    <Box w="container.full" zIndex="2" position="relative">
+    <BasePageWrapper>
       <Container size="validation" boxShadow="lg">
         <Container variant="secondary">
           <Logo />
@@ -65,6 +65,6 @@ export const ResendResetPassword = ({
           </Button>
         </Center>
       </Container>
-    </Box>
+    </BasePageWrapper>
   )
 }

package/src/components/onboarding/pages/ResetPassword.tsx

@@ -7,6 +7,7 @@ import {
   CardFooter,
   TextInput,
   ButtonLoader,
+  BasePageWrapper,
 } from '@/components'
 import { isEmptyField, isValidEmail } from '@/utils'
 import { ResetPasswordI } from '@/interfaces'
@@ -25,7 +26,7 @@ export const ResetPassword = ({
     ? t('forms.errorEmailNotActivated')
     : t('forms.errorEmail')
   return (
-    <Box w="container.full" zIndex="2" position="relative">
+    <BasePageWrapper>
       <Container size="onboarding" boxShadow="lg">
         <Logo />
         <PageTitle title={t('reset.title')} />
@@ -72,6 +73,6 @@ export const ResetPassword = ({
         />
       </Container>
       <Footer />
-    </Box>
+    </BasePageWrapper>
   )
 }

package/src/components/onboarding/pages/SignIn.tsx

@@ -8,6 +8,7 @@ import {
   PasswordInput,
   TextInput,
   ButtonLoader,
+  BasePageWrapper,
 } from '@/components'
 import { isEmptyField } from '@/utils'
 import { SignInI } from '@/interfaces'
@@ -25,14 +26,13 @@ export const SignIn = ({
     useSignIn(values)
 
   return (
-    <Box w="container.full" mt="onboarding.top" zIndex="2" position="relative">
+    <BasePageWrapper>
       <Container size="onboarding" boxShadow="lg">
         <Logo />
         <PageTitle title={t('signin.title')} />
         <Box px={['container.sm', 'container.md', 'container.lg']} mb={6}>
           <Stack spacing={8}>
             <Stack spacing="base" as="form">
- 
               <TextInput
                 autoCapitalize="none"
                 autoCorrect="off"
@@ -71,7 +71,6 @@ export const SignIn = ({
                   handleInputChange(event)
                 }}
               />
-      
             </Stack>
             <Stack spacing={4}>
               <Button
@@ -104,6 +103,6 @@ export const SignIn = ({
         />
       </Container>
       <Footer />
-    </Box>
+    </BasePageWrapper>
   )
 }

package/src/components/onboarding/pages/SignUp.tsx

@@ -8,6 +8,7 @@ import {
   PasswordInput,
   TextInput,
   ButtonLoader,
+  BasePageWrapper,
 } from '@/components'
 import { SignUpI } from '@/interfaces'
 import {
@@ -45,7 +46,7 @@ export const SignUp = ({
   })
 
   return (
-    <Box w="container.full" mt="onboarding.top" zIndex="2" position="relative">
+    <BasePageWrapper>
       <Container size="onboarding" boxShadow="lg">
         <Logo />
         <PageTitle title={t('signup.title')} />
@@ -58,7 +59,7 @@ export const SignUp = ({
               placeholder={t('forms.firstName')}
               value={inputs.firstName}
               handleChange={handleInputChange}
-              autoComplete='given-name'
+              autoComplete="given-name"
             />
             <TextInput
               errorMessage={t('forms.lastName') + ' ' + t('forms.required')}
@@ -67,7 +68,7 @@ export const SignUp = ({
               placeholder={t('forms.lastName')}
               value={inputs.lastName}
               handleChange={handleInputChange}
-              autoComplete='family-name'
+              autoComplete="family-name"
             />
             <TextInput
               autoCapitalize="none"
@@ -81,7 +82,7 @@ export const SignUp = ({
               placeholder={t('forms.email')}
               value={inputs.email}
               handleChange={handleInputChange}
-              autoComplete='email'
+              autoComplete="email"
             />
             {showPromoCode && (
               <TextInput
@@ -91,7 +92,7 @@ export const SignUp = ({
                 placeholder={t('forms.promoCode')}
                 value={inputs.promoCode ?? ''}
                 handleChange={handleInputChange}
-                autoComplete='off'
+                autoComplete="off"
               />
             )}
             <Text textAlign="center" variant="caption">
@@ -108,7 +109,7 @@ export const SignUp = ({
               placeholder={t('forms.password')}
               value={inputs.password ?? ''}
               handleChange={(event) => handleInputChange(event)}
-              autoComplete='new-password' 
+              autoComplete="new-password"
             />
             <PasswordInput
               errorMessage={passwordErrorMessage(inputs.confirmPassword)}
@@ -121,7 +122,7 @@ export const SignUp = ({
               placeholder={t('forms.passwordConfirm')}
               value={inputs.confirmPassword ?? ''}
               handleChange={(event) => handleInputChange(event)}
-              autoComplete='new-password'
+              autoComplete="new-password"
             />
             <Center
               px={['container.sm', 'container.md', 'container.lg']}
@@ -150,6 +151,6 @@ export const SignUp = ({
         />
       </Container>
       <Footer />
-    </Box>
+    </BasePageWrapper>
   )
 }