@homefile/components-v2 2.0.0 → 2.1.0

package/dist/mocks/forms/dynamicForm.mock.js

@@ -1,3 +1,4 @@
+import { Shine } from '../../assets/images';
 import { faker } from '@faker-js/faker';
 export const formFieldsMock = [
     {
@@ -344,3 +345,161 @@ export const contactFieldsMock = [
         icon: 'image',
     },
 ];
+export const tileUIMock = [
+    {
+        id: faker.database.mongodbObjectId(),
+        name: faker.lorem.word(),
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: '',
+        type: 'tile-body',
+        visible: true,
+        options: [],
+        children: [
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Shine',
+                description: '',
+                comments: '',
+                value: Shine,
+                type: 'tile-body-logo',
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: '',
+                description: '',
+                comments: '',
+                value: 'We do windows and so much more!',
+                type: 'tile-body-header',
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: '',
+                description: '',
+                comments: '',
+                value: '',
+                type: 'tile-body-section-grid',
+                children: [
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: '',
+                        comments: '',
+                        value: 'Pressure Washing',
+                        type: 'vertical-icon',
+                        icon: 'sh-pressure',
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: '',
+                        comments: '',
+                        value: 'Widow Cleaning',
+                        type: 'vertical-icon',
+                        icon: 'sh-window',
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: '',
+                        comments: '',
+                        value: 'Roof Cleaning',
+                        type: 'vertical-icon',
+                        icon: 'sh-roof',
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: '',
+                        comments: '',
+                        value: 'Holiday Lights',
+                        type: 'vertical-icon',
+                        icon: 'sh-lights',
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: '',
+                        comments: '',
+                        value: 'Gutter Cleaning',
+                        type: 'vertical-icon',
+                        icon: 'sh-gutter',
+                    },
+                ],
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: '',
+                description: '',
+                comments: '',
+                value: '',
+                type: 'tile-body-action',
+                children: [
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: '',
+                        comments: '',
+                        value: 'Schedule Service',
+                        type: 'primary-cta',
+                        link: 'www.shine.com',
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: '',
+                        comments: '',
+                        value: 'Request Support',
+                        type: 'secondary-cta',
+                        link: 'open-drawer',
+                    },
+                ],
+            },
+        ],
+    },
+    {
+        id: faker.database.mongodbObjectId(),
+        name: '',
+        description: '',
+        comments: '',
+        value: '',
+        type: 'tile-form',
+        visible: true,
+        children: [
+            {
+                id: faker.database.mongodbObjectId(),
+                name: '',
+                description: 'We are here to resolve any issues you may be having with our products and services. Please send us a brief description of the issue you are having and we will respond within 24 hours.',
+                comments: '',
+                value: '',
+                type: 'textarea',
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: '',
+                description: '',
+                comments: '',
+                value: '',
+                type: 'grid',
+                children: [
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: 'Contact Phone',
+                        comments: '',
+                        value: '',
+                        type: 'telephone',
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: 'Contact Email',
+                        comments: '',
+                        value: '',
+                        type: 'email',
+                    },
+                ],
+            },
+        ],
+    },
+];

package/dist/stories/forms/dynamicForm/DynamicForm.stories.d.ts

@@ -3,3 +3,4 @@ import { DynamicFormI } from '../../../interfaces';
 declare const _default: Meta;
 export default _default;
 export declare const DynamicFormComponent: (args: DynamicFormI) => import("react/jsx-runtime").JSX.Element;
+export declare const DynamicUIFormComponent: (args: DynamicFormI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/forms/dynamicForm/DynamicForm.stories.js

@@ -2,15 +2,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from '@storybook/addon-actions';
 import { Box } from '@chakra-ui/react';
 import { DynamicForm } from '../../../components';
-import { formFieldsMock } from '../../../mocks';
+import { formFieldsMock, menuMock, socialLinksMock, tileUIMock } from '../../../mocks';
 export default {
     title: 'Components/Forms/DynamicForm',
     component: DynamicForm,
     args: {
-        form: formFieldsMock,
+        callback: action('callback'),
         onUpload: action('onUpload'),
+        menuItems: menuMock,
+        socialLinks: socialLinksMock,
+        websiteUrl: 'http://www.audreyscheckdesign.com',
     },
 };
 export const DynamicFormComponent = (args) => {
-    return (_jsx(Box, { p: "base", bg: "neutral.white", w: ['full', '500px'], children: _jsx(DynamicForm, Object.assign({}, args)) }));
+    return (_jsx(Box, { p: "base", bg: "neutral.white", w: ['full', '500px'], children: _jsx(DynamicForm, Object.assign({}, args, { form: formFieldsMock })) }));
+};
+export const DynamicUIFormComponent = (args) => {
+    return (_jsx(Box, { m: "base", w: ['full', '320px'], children: _jsx(DynamicForm, Object.assign({}, args, { form: tileUIMock, showTitle: false })) }));
 };

package/package.json

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

package/src/components/customToast/CustomToast.tsx

@@ -16,17 +16,18 @@ export const CustomToast = ({
   }
   return (
     <Box
+      paddingTop={0}
+      paddingBottom={0}
       bg={bgColors[status]}
       borderRadius="lg"
       boxShadow="lg"
       position="relative"
-      py="base"
     >
-      <Flex gap="base" p="base" align="center">
+      <Flex gap="base" p="base" align="center" position="relative" left="-26px">
         <StatusIllustration status={status} />
         <Box>
           <Text
-            fontSize="25px"
+            fontSize="22px"
             fontWeight="medium"
             color="neutral.white"
             lineHeight="1.1"

package/src/components/customToast/StatusIllustration.tsx

@@ -14,18 +14,18 @@ export const StatusIllustration = ({
       src: Check,
       alt: t('ariaLabels.success'),
       bg: '#28B5A8',
-      height: '26px',
+      height: '21px',
     },
     error: {
       src: Exclamation,
       alt: t('ariaLabels.error'),
       bg: '#991365',
-      height: '33px',
+      height: '28px',
     },
   }
   const { alt, bg, height, src } = props[status]
   return (
-    <Center borderRadius="full" bg={bg} boxShadow="xl" w="60px" h="60px">
+    <Center borderRadius="full" bg={bg} boxShadow="xl" w="43px" h="43px">
       <Image src={src} alt={alt} h={height} w="auto" />
     </Center>
   )

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

@@ -16,15 +16,19 @@ import {
   DateField,
   NumberField,
   CurrencyField,
+  TileBody,
 } from '@/components'
 import { useDynamicForm } from '@/hooks'
 import { fieldIcons } from '@/helpers'
 
 export const DynamicForm = ({
+  callback,
   form: fields,
+  menuItems,
   onUpload,
   showTitle = true,
   uploadingFieldId,
+  ...props
 }: DynamicFormI) => {
   const {
     form,
@@ -159,6 +163,16 @@ export const DynamicForm = ({
                     canBeHidden={canBeHidden}
                   />
                 )
+              case 'tile-body':
+                return (
+                  <TileBody
+                    key={id}
+                    callback={callback}
+                    fields={children}
+                    menuItems={menuItems}
+                    {...props}
+                  />
+                )
               default:
                 return null
             }

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

@@ -1,5 +1,5 @@
 import { fieldIcons } from '@/helpers'
-import { DynamicFormI } from '@/interfaces'
+import { FieldTypesI } from '@/interfaces'
 import {
   GridField,
   RatingField,
@@ -10,13 +10,15 @@ import {
   NumberField,
   DateField,
   CurrencyField,
+  TileBodyHeader,
+  TileBodyLogo,
+  VerticalIcon,
+  TileBodySectionGrid,
+  TileBodyAction,
+  TileCta,
 } from '@/components'
 
-export interface FieldTypesI {
-  fields?: DynamicFormI['form']
-}
-
-export const SingleFields = ({ fields }: FieldTypesI) => {
+export const SingleFields = ({ callback, fields, menuItems }: FieldTypesI) => {
   return (
     <>
       {fields?.map(
@@ -61,6 +63,60 @@ export const SingleFields = ({ fields }: FieldTypesI) => {
               return <TextField {...baseProps} type="tel" />
             case 'textarea':
               return <TextAreaField {...baseProps} />
+
+            case 'tile-body-section-grid':
+              return <TileBodySectionGrid key={id} fields={children} />
+            case 'tile-body-header':
+              return (
+                <TileBodyHeader
+                  key={baseProps.key}
+                  value={String(baseProps.value)}
+                />
+              )
+            case 'tile-body-logo':
+              return (
+                <TileBodyLogo
+                  key={baseProps.key}
+                  name={name}
+                  value={String(baseProps.value)}
+                  menuItems={menuItems}
+                />
+              )
+            case 'vertical-icon':
+              return (
+                <VerticalIcon
+                  key={id}
+                  icon={baseProps.icon}
+                  value={String(baseProps.value)}
+                />
+              )
+            case 'tile-body-action':
+              return (
+                <TileBodyAction
+                  key={id}
+                  fields={children}
+                  callback={callback}
+                />
+              )
+            case 'primary-cta':
+              return (
+                <TileCta
+                  key={id}
+                  type={type}
+                  value={String(baseProps.value)}
+                  callback={callback}
+                />
+              )
+            case 'secondary-cta':
+              return (
+                <TileCta
+                  key={id}
+                  type={type}
+                  value={String(baseProps.value)}
+                  callback={callback}
+                />
+              )
+
             default:
               return null
           }

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

@@ -13,3 +13,4 @@ export * from './SelectField'
 export * from './SingleFields'
 export * from './TextAreaField'
 export * from './TextField'
+export * from './uiFields'

package/src/components/forms/dynamicForm/fields/uiFields/TileBody.tsx

@@ -0,0 +1,24 @@
+import { Box, Stack } from '@chakra-ui/react'
+import { TileBodyI } from '@/interfaces'
+import { PartnerFooter, SingleFields } from '@/components'
+
+export const TileBody = ({
+  callback,
+  fields,
+  websiteUrl = '',
+  menuItems,
+  ...props
+}: TileBodyI) => {
+  return (
+    <Box display="flex" flexDir="column" bg="neutral.white" boxShadow="lg">
+      <Stack spacing="0" flex="1">
+        <SingleFields
+          callback={callback}
+          fields={fields}
+          menuItems={menuItems}
+        />
+        <PartnerFooter {...props} websiteUrl={websiteUrl} />
+      </Stack>
+    </Box>
+  )
+}

package/src/components/forms/dynamicForm/fields/uiFields/TileBodyAction.tsx

@@ -0,0 +1,11 @@
+import { Flex } from '@chakra-ui/react'
+import { SingleFields } from '@/components'
+import { TileBodyI } from '@/interfaces'
+
+export const TileBodyAction = ({ fields }: TileBodyI) => {
+  return (
+    <Flex p="base" align="center" gap="base">
+      <SingleFields fields={fields} />
+    </Flex>
+  )
+}

package/src/components/forms/dynamicForm/fields/uiFields/TileBodyHeader.tsx

@@ -0,0 +1,9 @@
+import { Box, Text } from '@chakra-ui/react'
+
+export const TileBodyHeader = ({ value = '' }) => {
+  return (
+    <Box p="base">
+      <Text fontWeight="semibold">{value}</Text>
+    </Box>
+  )
+}

package/src/components/forms/dynamicForm/fields/uiFields/TileBodyLogo.tsx

@@ -0,0 +1,10 @@
+import { PartnerHeader } from '@/components'
+import { TileBodyLogoI } from '@/interfaces'
+
+export const TileBodyLogo = ({
+  menuItems,
+  name = '',
+  value,
+}: TileBodyLogoI) => {
+  return <PartnerHeader logo={value} partnerName={name} menuItems={menuItems} />
+}

package/src/components/forms/dynamicForm/fields/uiFields/TileBodySectionGrid.tsx

@@ -0,0 +1,11 @@
+import { SimpleGrid } from '@chakra-ui/react'
+import { SingleFields } from '@/components'
+import { TileBodyI } from '@/interfaces'
+
+export const TileBodySectionGrid = ({ fields }: TileBodyI) => {
+  return (
+    <SimpleGrid columns={3} spacing="base" p="base">
+      <SingleFields fields={fields} />
+    </SimpleGrid>
+  )
+}

package/src/components/forms/dynamicForm/fields/uiFields/TileCta.tsx

@@ -0,0 +1,14 @@
+import { Button } from '@chakra-ui/react'
+import { TileCtaI } from '@/interfaces'
+
+export const TileCta = ({ callback, type, value }: TileCtaI) => {
+  return (
+    <Button
+      onClick={() => callback?.(value)}
+      variant={type === 'primary-cta' ? 'tertiaryFooter' : 'secondaryFooter'}
+      fontSize="sm"
+    >
+      {value}
+    </Button>
+  )
+}

package/src/components/forms/dynamicForm/fields/uiFields/VerticalIcon.tsx

@@ -0,0 +1,31 @@
+import { Box, Image, Text } from '@chakra-ui/react'
+import { VerticalIconI } from '@/interfaces'
+
+export const VerticalIcon = ({ icon, value }: VerticalIconI) => {
+  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">
+        <Image src={icon} alt={value} w="auto" h="80%" />
+      </Box>
+      <Box pb="2">
+        <Text
+          fontWeight="semibold"
+          textAlign="center"
+          fontSize="13px"
+          lineHeight="14px"
+        >
+          {value}
+        </Text>
+      </Box>
+    </Box>
+  )
+}

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

@@ -0,0 +1,7 @@
+export * from './TileBody'
+export * from './TileBodyAction'
+export * from './TileBodyHeader'
+export * from './TileBodyLogo'
+export * from './TileBodySectionGrid'
+export * from './TileCta'
+export * from './VerticalIcon'

package/src/components/sendDocument/RecipientContent.tsx

@@ -1,6 +1,7 @@
 import { Flex, Avatar, Stack, Box, Text } from '@chakra-ui/react'
 import { RecipientContentI } from '@/interfaces'
 import { randomColor } from '@/utils'
+import MoonLoader from 'react-spinners/MoonLoader'
 
 export const RecipientContent = ({
   bgColor,
@@ -10,15 +11,22 @@ export const RecipientContent = ({
   phone = '',
   email = '',
 }: RecipientContentI) => {
+  const isPending = firstName === 'Account' && lastName === 'Pending'
   return (
     <Flex gap="2" align={firstName ? 'start' : 'center'}>
-      <Avatar
-        size="sm"
-        bg={bgColor ?? randomColor(index)}
-        fontWeight="bold"
-        color="neutral.white"
-        name={firstName ? `${firstName} ${lastName}` : ''}
-      />
+      {isPending && (
+        <MoonLoader color="#2d2d2d" size={20} speedMultiplier={0.5} />
+      )}
+      {!isPending && (
+        <Avatar
+          size="sm"
+          bg={bgColor ?? randomColor(index)}
+          fontWeight="bold"
+          color="neutral.white"
+          name={firstName ? `${firstName} ${lastName}` : ''}
+        />
+      )}
+
       <Stack w="full" spacing="-2" minH="3rem" justify="space-between">
         <Box>
           {firstName && (

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

@@ -41,6 +41,12 @@ import {
   Target,
   CircleFace,
   Company,
+  Pressure,
+  WindowCleaning,
+  RoofCleaning,
+  HolidayLights,
+  GutterCleaning,
+  HomeCleaning,
 } from '@/assets/images'
 import { IconTypes } from '@/interfaces'
 
@@ -88,4 +94,10 @@ export const fieldIcons: Record<IconTypes, string> = {
   target: Target,
   title: CircleFace,
   company: Company,
+  'sh-gutter': GutterCleaning,
+  'sh-home': HomeCleaning,
+  'sh-lights': HolidayLights,
+  'sh-pressure': Pressure,
+  'sh-roof': RoofCleaning,
+  'sh-window': WindowCleaning,
 }

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

@@ -1,4 +1,4 @@
-import { FolderFileI } from '@/interfaces'
+import { FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '@/interfaces'
 
 type KindTypes =
   | 'checkbox'
@@ -18,6 +18,19 @@ type KindTypes =
   | 'text'
   | 'textarea'
   | 'default'
+  | UIKindTypes
+
+type UIKindTypes =
+  | 'tile-body'
+  | 'tile-body-logo'
+  | 'tile-body-header'
+  | 'tile-body-section'
+  | 'tile-body-section-grid'
+  | 'tile-form'
+  | 'tile-body-action'
+  | 'vertical-icon'
+  | 'primary-cta'
+  | 'secondary-cta'
 
 export type IconTypes =
   | 'barcode'
@@ -63,6 +76,15 @@ export type IconTypes =
   | 'target'
   | 'title'
   | 'company'
+  | UIIconTypes
+
+export type UIIconTypes =
+  | 'sh-pressure'
+  | 'sh-window'
+  | 'sh-roof'
+  | 'sh-lights'
+  | 'sh-gutter'
+  | 'sh-home'
 
 export type ValueTypes = string | string[] | number | boolean
 export type OptionsTypes = string[] | number[] | null
@@ -74,6 +96,7 @@ export interface ReportI {
   description?: string
   icon?: IconTypes
   id: string
+  link?: string
   name?: string
   options?: OptionsTypes
   type: KindTypes
@@ -81,8 +104,10 @@ export interface ReportI {
   visible?: boolean
 }
 
-export interface DynamicFormI {
+export interface DynamicFormI extends Partial<PartnerFooterI> {
+  callback?: TileCtaI['callback']
   form: ReportI[]
+  menuItems?: MenuItemI[]
   onUpload?: (filesByFieldId: Record<string, FolderFileI[]>) => void
   showTitle?: boolean
   uploadingFieldId?: string

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

@@ -1,4 +1,4 @@
-import { DynamicFormI } from '@/interfaces'
+import { DynamicFormI, MenuItemI, TileCtaI } from '@/interfaces'
 
 export interface GroupFieldI {
   id: string
@@ -6,3 +6,9 @@ export interface GroupFieldI {
   fields?: DynamicFormI['form']
   onRemove: (id: string) => void
 }
+
+export interface FieldTypesI {
+  callback?: TileCtaI['callback']
+  fields?: DynamicFormI['form']
+  menuItems?: MenuItemI[]
+}

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

@@ -0,0 +1,24 @@
+import { DynamicFormI, MenuItemI, PartnerFooterI } from '@/interfaces'
+
+export interface TileBodyLogoI {
+  menuItems?: MenuItemI[]
+  name?: string
+  value: string
+}
+
+export interface TileBodyI extends Partial<PartnerFooterI> {
+  callback?: TileCtaI['callback']
+  fields?: DynamicFormI['form']
+  menuItems?: MenuItemI[]
+}
+
+export interface VerticalIconI {
+  icon?: string
+  value: string
+}
+
+export interface TileCtaI {
+  callback?: (value: string) => void
+  type: 'primary-cta' | 'secondary-cta'
+  value: string
+}