@homefile/components-v2 1.2.2 → 1.4.0

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

@@ -1,6 +1,12 @@
 import { t } from 'i18next'
 import { Box, Button, Text, Container, Stack, Center } from '@chakra-ui/react'
-import { Logo, Footer, ButtonLoader, TextInput } from '@/components'
+import {
+  Logo,
+  Footer,
+  ButtonLoader,
+  TextInput,
+  BasePageWrapper,
+} from '@/components'
 import { isEmptyField } from '@/utils'
 import { TwoFactorI } from '@/interfaces'
 import { useTwoFactor } from '@/hooks'
@@ -15,7 +21,7 @@ export const TwoFactor = ({
     useTwoFactor(handleReset)
 
   return (
-    <Box w="container.full" zIndex="2" position="relative">
+    <BasePageWrapper>
       <Container size="onboarding" boxShadow="lg">
         <Logo />
         <Stack my="6">
@@ -58,6 +64,6 @@ export const TwoFactor = ({
         </Box>
       </Container>
       <Footer />
-    </Box>
+    </BasePageWrapper>
   )
 }

package/src/components/onboarding/pages/index.ts

@@ -1,9 +1,10 @@
-export * from "./ActivateAccount"
-export * from "./EmailValidation"
-export * from "./ResetPassword"
-export * from "./SignIn"
-export * from "./SignUp"
-export * from "./Welcome"
-export * from "./NewPassword"
-export * from "./ResendResetPassword"
-export * from "./TwoFactor"
+export * from './ActivateAccount'
+export * from './BasePageWrapper'
+export * from './EmailValidation'
+export * from './ResetPassword'
+export * from './SignIn'
+export * from './SignUp'
+export * from './Welcome'
+export * from './NewPassword'
+export * from './ResendResetPassword'
+export * from './TwoFactor'

package/src/components/partner/customPartnerTiles/ShineTile.tsx

@@ -0,0 +1,148 @@
+import { t } from 'i18next'
+import {
+  AspectRatio,
+  Box,
+  Button,
+  Image,
+  SimpleGrid,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
+import { PartnerFooter, PartnerHeader, PartnerTileWrapper } from '@/components'
+import { ShortPartnerTileI, SocialLinkI } from '@/interfaces'
+import {
+  GutterCleaning,
+  HolidayLights,
+  HomeCleaning,
+  Pressure,
+  RoofCleaning,
+  Shine,
+  WindowCleaning,
+} from '@/assets/images'
+import { ReactNode } from 'react'
+
+export const ShineTile = ({
+  menuItems,
+}: Pick<ShortPartnerTileI, 'menuItems'>) => {
+  const cardsArray = ['pressure', 'window', 'roof', 'lights', 'gutter', 'home']
+  return (
+    <PartnerTileWrapper>
+      <PartnerHeader logo={Shine} partnerName="Shine" menuItems={menuItems} />
+      <Box>
+        <Stack
+          spacing="6"
+          bg="neutral.white"
+          px="base"
+          py="6"
+          borderTop="1px solid"
+          borderColor="lightBlue.6"
+        >
+          <Text fontWeight="bold" textAlign="center">
+            {t('partner.shine.heroTitle')}
+          </Text>
+          <SimpleGrid columns={3} spacing="base">
+            {cardsArray.map((card) => (
+              <ServiceCard key={card} service={card} />
+            ))}
+          </SimpleGrid>
+        </Stack>
+
+        <Stack spacing="base" p="base">
+          <Button
+            onClick={() => openNewTab(links.scheduleService)}
+            variant="tertiary"
+            w="full"
+            h="44px"
+          >
+            {t('partner.shine.scheduleService')}
+          </Button>
+        </Stack>
+        <PartnerFooter
+          socialLinks={socialLinks}
+          websiteUrl="https://shine-windowcleaning.com/"
+        />
+      </Box>
+    </PartnerTileWrapper>
+  )
+}
+
+const ServiceCard = ({ service = '' }) => {
+  const card = cards[service]
+  return (
+    <Box
+      bg="neutral.white"
+      borderRadius="md"
+      border="1px solid"
+      borderColor="lightBlue.6"
+      display="flex"
+      flexDirection="column"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Box h="46px" display="flex" alignItems="center">
+        {card.image}
+      </Box>
+      <Box pb="2">
+        <Text
+          fontWeight="semibold"
+          textAlign="center"
+          fontSize="13px"
+          lineHeight="14px"
+        >
+          {t(card.title)}
+        </Text>
+      </Box>
+    </Box>
+  )
+}
+
+const openNewTab = (url: string) => {
+  window.open(url, '_blank')
+}
+
+const socialLinks: SocialLinkI[] = [
+  {
+    name: 'linkedin',
+    link: 'https://www.linkedin.com/company/shine-window-care-and-holiday-lighting/',
+  },
+  {
+    name: 'facebook',
+    link: 'https://www.facebook.com/ShineFranchise',
+  },
+]
+
+const links = {
+  scheduleService: 'https://shine-windowcleaning.com/',
+  website: 'https://shine-windowcleaning.com/',
+}
+
+const cards: Record<string, { title: string; image: ReactNode }> = {
+  pressure: {
+    title: 'partner.shine.services.pressure',
+    image: <Image src={Pressure} alt="pressure" w="46px" h="auto" />,
+  },
+  window: {
+    title: 'partner.shine.services.window',
+    image: (
+      <Image src={WindowCleaning} alt="window-cleaning" w="46px" h="46px" />
+    ),
+  },
+  roof: {
+    title: 'partner.shine.services.roof',
+    image: <Image src={RoofCleaning} alt="roof-cleaning" w="42px" h="42px" />,
+  },
+  lights: {
+    title: 'partner.shine.services.lights',
+    image: <Image src={HolidayLights} alt="holiday-lights" w="auto" h="56px" />,
+  },
+  gutter: {
+    title: 'partner.shine.services.gutter',
+    image: (
+      <Image src={GutterCleaning} alt="gutter-cleaning" w="auto" h="40px" />
+    ),
+  },
+  home: {
+    title: 'partner.shine.services.home',
+    image: <Image src={HomeCleaning} alt="home-cleaning" w="auto" h="34px" />,
+  },
+}

package/src/components/partner/customPartnerTiles/index.ts

@@ -1 +1,2 @@
 export * from './AphwTile'
+export * from './ShineTile'

package/src/helpers/HomeRoles.helper.ts

@@ -15,29 +15,35 @@ export const homeRoleTypes: RoleType[] = [
   'homeowner',
 ]
 
-export const homeRoles: { [key: string]: { [key: string]: string } } = {
+export const homeRoles: Record<string, Record<string, string>> = {
   guest: {
     bg: 'teal.4',
     width: '3.5rem',
+    name: 'Guest',
   },
   member: {
     bg: 'teal.4',
     width: '3.5rem',
+    name: 'Member',
   },
   partner: {
     bg: '#2F7F9B',
     width: '4.5rem',
+    name: 'Partner',
   },
   contributor: {
     bg: '#2F7F9B',
     width: '6rem',
+    name: 'Contributor',
   },
   manager: {
     bg: '#1A72D9',
     width: '5rem',
+    name: 'Manager',
   },
   homeowner: {
     bg: '#535C51',
     width: '6rem',
+    name: 'Homeowner',
   },
 }

package/src/helpers/forms/dynamicForm.helper.ts

@@ -39,6 +39,8 @@ import {
   GlassWater,
   Roof2,
   Target,
+  CircleFace,
+  Company,
 } from '@/assets/images'
 import { IconTypes } from '@/interfaces'
 
@@ -84,4 +86,6 @@ export const fieldIcons: Record<IconTypes, string> = {
   water: GlassWater,
   house: Structure,
   target: Target,
+  title: CircleFace,
+  company: Company,
 }

package/src/hooks/forms/index.ts

@@ -1,2 +1,3 @@
 export * from './useAddressStored'
 export * from './useDynamicForm'
+export * from './useSimpleDynamicForm'

package/src/hooks/forms/useSimpleDynamicForm.ts

@@ -0,0 +1,58 @@
+import { useEffect } from 'react'
+import { FieldValues, useForm } from 'react-hook-form'
+import { FolderFileI, ReportI } from '@/interfaces'
+
+interface UseDynamicFormI {
+  fields: ReportI[]
+  onUpload?: (filesByFieldId: Record<string, FolderFileI[]>) => void
+}
+
+export const useSimpleDynamicForm = ({ fields }: UseDynamicFormI) => {
+  const form = useForm()
+
+  const { watch, setValue } = form
+
+  const fieldValues = watch()
+
+  const parseCurrenyValue = (value: string | number): number => {
+    if (typeof value === 'number') return value
+    const justNumbers = value?.replace(/[^0-9.]/g, '')
+    return parseFloat(justNumbers)
+  }
+
+  const handleUpdateFields = (
+    field: ReportI,
+    fieldValues: FieldValues
+  ): ReportI => {
+    const value = fieldValues[field.id]
+    const isCurrency = field.type === 'currency'
+    const parsedValue = isCurrency ? parseCurrenyValue(value) : value
+
+    return {
+      ...field,
+      value: parsedValue,
+      children: field?.children?.map((child) =>
+        handleUpdateFields(child, fieldValues)
+      ),
+    }
+  }
+  const updatedFields = fields.map((field) => {
+    return handleUpdateFields(field, fieldValues)
+  })
+
+  const handleSetDefaultValues = (fields: ReportI[]) => {
+    fields.forEach((field) => {
+      setValue(field.id, field.value)
+      handleSetDefaultValues(field.children || [])
+    })
+  }
+
+  useEffect(() => {
+    handleSetDefaultValues(fields)
+  }, [JSON.stringify(fields)])
+
+  return {
+    form,
+    updatedFields,
+  }
+}

package/src/index.ts

@@ -2,6 +2,7 @@ export {
   ActivateAccount,
   ActiveSubscription,
   AddCardBanner,
+  AddEditContactPanel,
   AddFolder,
   AddHomeContent,
   AddHomeItem,
@@ -155,6 +156,7 @@ export {
   ShareHome,
   ShareHomeConnections,
   ShareHomeForm,
+  ShineTile,
   ShortPartnerTile,
   SignIn,
   SignUp,
@@ -180,6 +182,7 @@ export {
   UpdateList,
   UserDetails,
   ValueMonitor,
+  ViewContactPanel,
   VideoPlayer,
   VideoPlayerModal,
   WellDone,

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react'
+import { ReportI } from '@/interfaces'
+
+export interface AddEditContactPanelI {
+  detailsComponent: ReactNode
+  isEditing?: boolean
+  onBackClick: () => void
+  permissionsComponent: ReactNode
+}
+
+export interface ContactFormProxyI {
+  fields: ReportI[]
+  setFields(fields: ReportI[]): void
+}

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

@@ -1,10 +1,27 @@
-import { MenuItemI, ShareContactPopoverI } from '@/interfaces'
+import {
+  MenuItemI,
+  ShareContactPopoverI,
+  ContactAndIndexForm,
+} from '@/interfaces'
+
+export interface ContactCompanyInfoI {
+  address: string
+  city: string
+  company: string
+  url: string
+  _id: string
+  phone: string
+  state: string
+  zip: string
+  rating?: number
+}
 
 export interface InfoContactCardI {
   address: string
   category: string
   city: string
   company: string
+  companyInfo?: ContactCompanyInfoI
   email: string
   firstName: string
   _id: string
@@ -13,6 +30,7 @@ export interface InfoContactCardI {
   state: string
   title: string
   zip: string
+  notes?: string
 }
 
 export interface ContactCardI {
@@ -20,5 +38,6 @@ export interface ContactCardI {
   contact: InfoContactCardI
   index: number
   menuItems: MenuItemI[]
+  onClick?: (contact: ContactAndIndexForm) => void
   onShare: ShareContactPopoverI['onShare']
 }

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

@@ -1,8 +1,9 @@
 export interface ContactCardInfoI {
-  company: string
+  company?: string
   email: string
   firstName: string
   index: number
   lastName: string
   phone: string
-}
+  title?: string
+}

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

@@ -1,6 +1,8 @@
 import { InfoContactCardI, MenuItemI, ShareContactPopoverI } from '@/interfaces'
 import { ReactNode } from 'react'
 
+export type ContactAndIndexForm = InfoContactCardI & { index: number }
+
 export interface ContactsContentI {
   apiError?: boolean
   contacts: InfoContactCardI[]
@@ -9,5 +11,6 @@ export interface ContactsContentI {
   menuItems: MenuItemI[]
   children?: ReactNode
   disabled?: boolean
+  onClick?: (contact: ContactAndIndexForm) => void
   onShare: ShareContactPopoverI['onShare']
 }

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

@@ -0,0 +1,10 @@
+import { RoleType } from '@/helpers'
+import { InfoContactCardI, MenuItemI, ShareContactPopoverI } from '@/interfaces'
+
+export interface ViewContactPanelI {
+  contact: InfoContactCardI
+  handleClose: () => void
+  menuItems: MenuItemI[]
+  onShare: ShareContactPopoverI['onShare']
+  roleType: RoleType
+}

package/src/interfaces/contacts/index.ts

@@ -1,3 +1,4 @@
+export * from './AddEditContactPanel.interface'
 export * from './ContactCard.interface'
 export * from './ContactCardAddress.interface'
 export * from './ContactCardHeader.interface'
@@ -5,3 +6,4 @@ export * from './ContactCardInfo.interface'
 export * from './ContactsContent.interface'
 export * from './ShareContactByEmail.interface'
 export * from './ShareContactPopover.interface'
+export * from './ViewContactPanel.interface'

package/src/interfaces/forms/dynamicForm/DynamicForm.interface.ts

@@ -61,26 +61,30 @@ export type IconTypes =
   | 'plate'
   | 'house'
   | 'target'
+  | 'title'
+  | 'company'
 
 export type ValueTypes = string | string[] | number | boolean
 export type OptionsTypes = string[] | number[] | null
 
 export interface ReportI {
+  canBeHidden?: boolean
+  children?: ReportI[]
+  comments?: string
+  description?: string
+  icon?: IconTypes
   id: string
   name?: string
-  description?: string
-  comments?: string
-  value: ValueTypes
+  options?: OptionsTypes
   type: KindTypes
+  value: ValueTypes
   visible?: boolean
-  options?: OptionsTypes
-  children?: ReportI[]
-  icon?: IconTypes
 }
 
 export interface DynamicFormI {
   form: ReportI[]
   onUpload?: (filesByFieldId: Record<string, FolderFileI[]>) => void
+  showTitle?: boolean
   uploadingFieldId?: string
 }
 

package/src/interfaces/forms/dynamicForm/SimpleDynamicForm.interface.ts

@@ -0,0 +1,5 @@
+import { ReportI } from '@/interfaces'
+
+export interface SimpleDynamicFormI {
+  fields: ReportI[]
+}

package/src/interfaces/forms/dynamicForm/fields/FieldWithDelete.interface.ts

@@ -1,5 +1,5 @@
 export interface FieldWithDeleteI {
   id: string
   onRemove?: (id: string) => void
-  isAlwaysVisible?: boolean
+  canBeHidden?: boolean
 }

package/src/interfaces/forms/dynamicForm/fields/GroupField.interface.ts

@@ -2,7 +2,7 @@ import { DynamicFormI } from '@/interfaces'
 
 export interface GroupFieldI {
   id: string
+  canBeHidden?: boolean
   fields?: DynamicFormI['form']
   onRemove: (id: string) => void
-  visible?: boolean
 }

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

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

package/src/interfaces/homeAssistant/ApplianceSteps.interface.ts

@@ -1,5 +1,16 @@
-import { ApplianceStepI } from '@/interfaces'
-
 export interface ApplianceStepsI {
+  addedAppliances?: AppliancesType[]
   onClick: (selectedSteps: string[]) => void
 }
+
+type AppliancesType =
+  | 'fridge'
+  | 'freezer'
+  | 'washer'
+  | 'dryer'
+  | 'dish-washer'
+  | 'cook-top'
+  | 'oven'
+  | 'range'
+  | 'hood'
+  | 'microwave'

package/src/interfaces/homeAssistant/HomeAssistantPanel.interface.ts

@@ -1,4 +1,4 @@
-import { DynamicFormI } from '@/interfaces'
+import { DynamicFormI, ReportI } from '@/interfaces'
 
 export interface HomeAssistantPanelI {
   currentForm: DynamicFormI['form']
@@ -7,4 +7,7 @@ export interface HomeAssistantPanelI {
   onBack: () => void
   onClose: () => void
   onNext: () => void
+  onSave: (form: ReportI[]) => void
+  backDisabled: boolean
+  nextDisabled: boolean
 }

package/src/interfaces/homeBoard/HomeCardWithRecipent.interface.ts

@@ -36,4 +36,5 @@ export interface HomeCardWithRecipentI {
   recipients?: AssociatedAccountI[]
   records?: HomeCardRecordsI
   disabled?: boolean
+  propertyDisabled?: boolean
 }

package/src/mocks/contacts/contacts.mock.ts

@@ -9,12 +9,24 @@ export const ContactsMock: InfoContactCardI[] = [
     lastName: faker.person.lastName(),
     email: faker.internet.email(),
     phone: faker.phone.number(),
-    company: 'Company 1',
-    address: '1134 South First Avenue',
-    zip: '78732',
-    city: 'Austin',
-    state: 'TX',
+    company: faker.company.name(),
+    address: faker.location.streetAddress(),
+    zip: faker.location.zipCode(),
+    city: faker.location.city(),
+    state: faker.location.state(),
     _id: faker.database.mongodbObjectId(),
+    notes: faker.lorem.paragraphs(),
+    companyInfo: {
+      address: faker.location.streetAddress(),
+      city: faker.location.city(),
+      company: faker.company.name(),
+      url: faker.internet.url(),
+      _id: faker.database.mongodbObjectId(),
+      phone: faker.phone.number(),
+      state: faker.location.state(),
+      zip: faker.location.zipCode(),
+      rating: faker.number.int({ min: 1, max: 5 }),
+    },
   },
   {
     title: 'Pumpler',