@homefile/components-v2 2.2.0 → 2.2.2

package/dist/assets/images/shine/index.d.ts

@@ -1,7 +1,8 @@
 import GutterCleaning from './gutter-cleaning.png';
 import HomeCleaning from './home-cleaning.png';
+import HouseWashing from './house-washing.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, };
+export { GutterCleaning, HomeCleaning, HouseWashing, HolidayLights, Pressure, RoofCleaning, WindowCleaning, };

package/dist/assets/images/shine/index.js

@@ -1,7 +1,8 @@
 import GutterCleaning from './gutter-cleaning.png';
 import HomeCleaning from './home-cleaning.png';
+import HouseWashing from './house-washing.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, };
+export { GutterCleaning, HomeCleaning, HouseWashing, HolidayLights, Pressure, RoofCleaning, WindowCleaning, };

package/dist/assets/images/shine/index.ts

@@ -1,5 +1,6 @@
 import GutterCleaning from './gutter-cleaning.png'
 import HomeCleaning from './home-cleaning.png'
+import HouseWashing from './house-washing.png'
 import HolidayLights from './holiday-lights.png'
 import Pressure from './pressure.png'
 import RoofCleaning from './roof-cleaning.png'
@@ -8,6 +9,7 @@ import WindowCleaning from './window.png'
 export {
   GutterCleaning,
   HomeCleaning,
+  HouseWashing,
   HolidayLights,
   Pressure,
   RoofCleaning,

package/dist/components/folderSharing/FolderSharing.js

@@ -17,6 +17,6 @@ export const FolderSharing = ({ currentSort, folders = [], handleAddNewFolder, h
                             return (_jsx(WrapItem, { w: "6.5rem", role: "group", children: _jsx(Box, { as: "button", position: "relative", pb: "base", pt: "6", w: "100%", onClick: () => handleFolderClick(folder), children: _jsxs(Flex, { direction: "column", gap: "base", align: "center", px: "base", children: [_jsx(Image, { src: folderIcon || GreenFolder, w: "3.7rem", h: "auto", alt: t('folderSharing.altIcon'), transition: "all 0.2s ease-in-out", _groupHover: {
                                                     boxShadow: 'lg',
                                                     transform: 'scale(1.05)',
-                                                } }), _jsx(Text, { noOfLines: 2, lineHeight: "1.1", fontSize: "sm", textOverflow: "ellipsis", children: name })] }) }) }, _id));
+                                                } }), _jsx(Text, { noOfLines: 2, fontSize: "sm", lineHeight: "17px", textOverflow: "ellipsis", children: name })] }) }) }, _id));
                         }) })] }) }) }));
 };

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

@@ -1,2 +1,2 @@
 import { DynamicFormI } from '../../../interfaces';
-export declare const DynamicForm: ({ callback, form: fields, menuItems, onUpload, showTitle, uploadingFieldId, ...props }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;
+export declare const DynamicForm: ({ callback, form: fields, menuItems, onUpload, showTitle, title, uploadingFieldId, ...props }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;

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

@@ -9,6 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormProvider } from 'react-hook-form';
 import { t } from 'i18next';
@@ -17,9 +18,9 @@ import { HiddenFieldSection, GroupField, TextField, TextAreaField, SelectField,
 import { useDynamicForm } from '../../../hooks';
 import { fieldIcons } from '../../../helpers';
 export const DynamicForm = (_a) => {
-    var { callback, form: fields, menuItems, onUpload, showTitle = true, uploadingFieldId } = _a, props = __rest(_a, ["callback", "form", "menuItems", "onUpload", "showTitle", "uploadingFieldId"]);
+    var { callback, form: fields, menuItems, onUpload, showTitle = true, title, uploadingFieldId } = _a, props = __rest(_a, ["callback", "form", "menuItems", "onUpload", "showTitle", "title", "uploadingFieldId"]);
     const { form, visibleFields, hiddenFields, handleAddAll, handleAdd, handleFilesUpload, handleRemove, } = useDynamicForm({ fields, onUpload });
-    return (_jsxs(Stack, { bg: "lightBlue.1", spacing: "0", h: "full", children: [showTitle && (_jsx(Text, { fontFamily: "secondary", px: "base", pt: "4", pb: "2", children: t('forms.itemDetails') })), _jsx(FormProvider, Object.assign({}, form, { children: _jsx(_Fragment, { children: visibleFields === null || visibleFields === void 0 ? void 0 : visibleFields.map((field) => {
+    return (_jsxs(Stack, { bg: "lightBlue.1", spacing: "0", h: "full", children: [showTitle && (_jsx(Text, { fontFamily: "secondary", px: "base", pt: "4", pb: "2", children: title ? title : t('forms.itemDetails') })), _jsx(FormProvider, Object.assign({}, form, { children: _jsx(_Fragment, { children: visibleFields === null || visibleFields === void 0 ? void 0 : visibleFields.map((field) => {
                         const { canBeHidden, children, description, icon, id, name, options, type, value, } = field;
                         const baseProps = {
                             id,
@@ -62,9 +63,9 @@ export const DynamicForm = (_a) => {
                             case 'group':
                                 return (_jsx(GroupField, { id: id, fields: children, onRemove: handleRemove, canBeHidden: canBeHidden }, id));
                             case 'checkbox-group':
-                                return (_jsx(CheckboxGroupField, { id: id, children: children, value: value, icon: baseProps.icon }, id));
+                                return (_jsx(CheckboxGroupField, { id: id, children: children, value: value, description: description, icon: baseProps.icon }, id));
                             case 'tile-body':
-                                return (_jsx(TileBody, Object.assign({ callback: callback, fields: children, menuItems: menuItems }, props), id));
+                                return (_createElement(TileBody, Object.assign({}, props, { key: id, callback: callback, fields: children, menuItems: menuItems })));
                             default:
                                 return null;
                         }

package/dist/components/forms/dynamicForm/fields/CheckboxGroupField.d.ts

@@ -1,2 +1,2 @@
 import { ReportI } from '../../../../interfaces';
-export declare const CheckboxGroupField: ({ children, icon, id, value, }: Pick<ReportI, "children" | "icon" | "id" | "value">) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxGroupField: ({ children, icon, id, value, description }: Pick<ReportI, "children" | "icon" | "id" | "value" | "description">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/fields/CheckboxGroupField.js

@@ -2,17 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Checkbox, CheckboxGroup, Flex, SimpleGrid, Text, } from '@chakra-ui/react';
 import { FormIcon } from '../../..';
 import { Controller, useFormContext } from 'react-hook-form';
-export const CheckboxGroupField = ({ children, icon, id, value, }) => {
+export const CheckboxGroupField = ({ children, icon, id, value, description }) => {
     const { control } = useFormContext();
     const defaultValues = children === null || children === void 0 ? void 0 : children.map((child) => {
         if (child.value) {
-            return child.id;
+            return child.name;
         }
     }).filter((value) => value);
-    return (_jsxs(Box, { children: [_jsx(Box, { p: "base", borderBottom: "1px dashed", borderColor: "lightBlue.6", children: _jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: value }) }), _jsxs(Flex, { p: "base", gap: "base", children: [_jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: defaultValues, render: ({ field: { onChange } }) => {
+    return (_jsxs(Box, { children: [_jsx(Box, { p: "base", borderBottom: "1px dashed", borderColor: "lightBlue.6", children: _jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: description }) }), _jsxs(Flex, { p: "base", gap: "base", children: [_jsx(FormIcon, { icon: icon }), _jsx(Controller, { control: control, name: id, defaultValue: defaultValues, render: ({ field: { onChange } }) => {
                             return (_jsx(CheckboxGroup, { defaultValue: defaultValues, onChange: onChange, children: _jsx(SimpleGrid, { columns: 2, spacing: "base", w: "full", children: children === null || children === void 0 ? void 0 : children.map((child) => {
                                         const { id, name, value } = child;
-                                        return (_jsx(Checkbox, { value: String(id), isChecked: Boolean(value), children: _jsx(Text, { fontSize: "sm", children: name }) }, id));
+                                        return (_jsx(Checkbox, { value: String(name), isChecked: Boolean(value), children: _jsx(Text, { fontSize: "sm", children: name }) }, id));
                                     }) }) }));
                         } })] })] }));
 };

package/dist/components/forms/dynamicForm/fields/SingleFields.js

@@ -45,9 +45,8 @@ export const SingleFields = ({ callback, fields, menuItems }) => {
                 case 'tile-body-action':
                     return (_jsx(TileBodyAction, { fields: children, callback: callback }, id));
                 case 'primary-cta':
-                    return (_jsx(TileCta, { callback: callback, description: description, icon: icon, id: id, name: name, type: type, link: link, value: String(baseProps.value) }, id));
                 case 'secondary-cta':
-                    return (_jsx(TileCta, { callback: callback, description: description, icon: icon, id: id, name: name, type: type, value: String(baseProps.value) }, id));
+                    return (_jsx(TileCta, { callback: callback, description: description, icon: icon, id: id, name: name, type: type, link: link, value: String(baseProps.value) }, id));
                 default:
                     return null;
             }

package/dist/components/forms/dynamicForm/fields/uiFields/TileBody.js

@@ -14,5 +14,5 @@ import { Box, Stack } from '@chakra-ui/react';
 import { PartnerFooter, SingleFields } from '../../../..';
 export const TileBody = (_a) => {
     var { callback, fields, websiteUrl = '', menuItems } = _a, props = __rest(_a, ["callback", "fields", "websiteUrl", "menuItems"]);
-    return (_jsx(Box, { display: "flex", flexDir: "column", bg: "neutral.white", boxShadow: "lg", children: _jsxs(Stack, { spacing: "0", flex: "1", children: [_jsx(SingleFields, { callback: callback, fields: fields, menuItems: menuItems }), _jsx(PartnerFooter, Object.assign({}, props, { websiteUrl: websiteUrl }))] }) }));
+    return (_jsx(Box, { display: "flex", flexGrow: 1, flexDir: "column", bg: "#f6f8f9", boxShadow: "lg", children: _jsxs(Stack, { spacing: "0", flex: "1", children: [_jsx(SingleFields, { callback: callback, fields: fields, menuItems: menuItems }), _jsx(PartnerFooter, Object.assign({}, props, { websiteUrl: websiteUrl }))] }) }));
 };

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

@@ -10,7 +10,7 @@ export const TileBody = ({
   ...props
 }: TileBodyI) => {
   return (
-    <Box display="flex" flexDir="column" bg="neutral.white" boxShadow="lg">
+    <Box display="flex" flexGrow={1} flexDir="column" bg="#f6f8f9" boxShadow="lg">
       <Stack spacing="0" flex="1">
         <SingleFields
           callback={callback}

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyAction.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Flex } from '@chakra-ui/react';
 import { SingleFields } from '../../../..';
 export const TileBodyAction = ({ callback, fields }) => {
-    return (_jsx(Flex, { p: "base", align: "center", gap: "base", children: _jsx(SingleFields, { fields: fields, callback: callback }) }));
+    return (_jsx(Flex, { p: "base", align: "center", gap: "base", background: "#f6f8f9", children: _jsx(SingleFields, { fields: fields, callback: callback }) }));
 };

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

@@ -4,7 +4,7 @@ import { TileBodyI } from '@/interfaces'
 
 export const TileBodyAction = ({ callback, fields }: TileBodyI) => {
   return (
-    <Flex p="base" align="center" gap="base">
+    <Flex p="base" align="center" gap="base" background={"#f6f8f9"}>
       <SingleFields fields={fields} callback={callback} />
     </Flex>
   )

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyHeader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from '@chakra-ui/react';
 export const TileBodyHeader = ({ value = '' }) => {
-    return (_jsx(Box, { p: "base", children: _jsx(Text, { fontWeight: "semibold", children: value }) }));
+    return (_jsx(Box, { borderTop: "1px solid #dbdbdb", p: "base", background: "#ffffff", children: _jsx(Text, { fontWeight: "semibold", children: value }) }));
 };

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

@@ -2,7 +2,7 @@ import { Box, Text } from '@chakra-ui/react'
 
 export const TileBodyHeader = ({ value = '' }) => {
   return (
-    <Box p="base">
+    <Box borderTop={"1px solid #dbdbdb"} p="base" background={"#ffffff"}>
       <Text fontWeight="semibold">{value}</Text>
     </Box>
   )

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodySectionGrid.js

@@ -2,5 +2,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { SimpleGrid } from '@chakra-ui/react';
 import { SingleFields } from '../../../..';
 export const TileBodySectionGrid = ({ fields }) => {
-    return (_jsx(SimpleGrid, { columns: 3, spacing: "base", p: "base", children: _jsx(SingleFields, { fields: fields }) }));
+    return (_jsx(SimpleGrid, { columns: 3, spacing: "base", p: "base", background: "#ffffff", children: _jsx(SingleFields, { fields: fields }) }));
 };

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

@@ -4,7 +4,7 @@ import { TileBodyI } from '@/interfaces'
 
 export const TileBodySectionGrid = ({ fields }: TileBodyI) => {
   return (
-    <SimpleGrid columns={3} spacing="base" p="base">
+    <SimpleGrid columns={3} spacing="base" p="base" background={"#ffffff"}>
       <SingleFields fields={fields} />
     </SimpleGrid>
   )

package/dist/components/homeAssistant/HomeAssistantButton.js

@@ -11,7 +11,7 @@ export const HomeAssistantButton = ({ currentStep, onStepClick, status, step, })
             onStepClick(currentStep);
     };
     const buttonId = `homeAssistantButton-${currentStep}`;
-    return (_jsxs(Box, { position: "relative", id: buttonId, children: [isCompleted && (_jsx(Image, { src: CheckInCircle, alt: "check", w: "22px", h: "auto", position: "absolute", top: "-4px", left: "-2px", boxShadow: "lg", borderRadius: "full" })), _jsxs(Stack, Object.assign({ as: "button", spacing: "2", borderRadius: "lg", boxShadow: "lg", border: "1px solid transparent", w: "116px", align: "center", h: "106px", py: "base", onClick: handleClick }, setStyles(status), { children: [_jsx(Center, { h: "60%", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "38px" }) }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "sm", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] }))] }));
+    return (_jsxs(Box, { position: "relative", id: buttonId, zIndex: "2", children: [isCompleted && (_jsx(Image, { src: CheckInCircle, alt: "check", w: "22px", h: "auto", position: "absolute", top: "-4px", left: "-2px", boxShadow: "lg", borderRadius: "full" })), _jsxs(Stack, Object.assign({ as: "button", spacing: "2", borderRadius: "lg", boxShadow: "lg", border: "1px solid transparent", w: "116px", align: "center", h: "106px", py: "base", onClick: handleClick }, setStyles(status), { children: [_jsx(Center, { h: "60%", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "38px" }) }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "sm", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] }))] }));
 };
 const setStyles = (status) => {
     switch (status) {

package/dist/components/homeAssistant/HomeMonitorButton.js

@@ -4,7 +4,7 @@ import { getIconAltText } from '../../utils';
 export const HomeMonitorButton = ({ currentStep, onStepClick, status = 'ok', step, }) => {
     const buttonId = `homeMonitorButton-${currentStep}`;
     const iconAltText = getIconAltText(step.icon);
-    return (_jsx(Box, { position: "relative", id: buttonId, children: _jsxs(Box, { position: "relative", bg: "neutral.white", borderRadius: "lg", boxShadow: "lg", zIndex: "2", children: [_jsx(Box, { bg: status === 'alert' ? 'error.2' : 'green.1', boxSize: "10px", borderRadius: "full", position: "absolute", top: "6px", left: "6px", zIndex: "8" }), _jsxs(Stack, Object.assign({ position: "relative", zIndex: "2", as: "button", spacing: "2", border: "1px solid transparent", w: "90px", align: "center", h: "96px", py: "base" }, setStyles(status), { onClick: () => onStepClick(currentStep), children: [_jsx(Center, { h: "60%", marginTop: "2", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "28px" }) }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] }))] }) }));
+    return (_jsx(Box, { position: "relative", id: buttonId, zIndex: "2", children: _jsxs(Box, { position: "relative", bg: "neutral.white", borderRadius: "lg", boxShadow: "lg", zIndex: "2", children: [_jsx(Box, { bg: status === 'alert' ? 'error.2' : 'green.1', boxSize: "10px", borderRadius: "full", position: "absolute", top: "6px", left: "6px", zIndex: "8" }), _jsxs(Stack, Object.assign({ position: "relative", zIndex: "2", as: "button", spacing: "2", border: "1px solid transparent", align: "center", h: "96px", w: "100%", p: "base" }, setStyles(status), { onClick: () => onStepClick(currentStep), children: [_jsx(Center, { h: "60%", marginTop: "2", children: _jsx(Image, { src: step.icon, alt: iconAltText, w: "auto", h: "28px" }) }), _jsx(Center, { h: "40%", children: _jsx(Text, { fontSize: "xs", textTransform: "uppercase", textAlign: "center", lineHeight: "14px", children: step.title }) })] }))] }) }));
 };
 const setStyles = (status) => {
     switch (status) {

package/dist/components/homeAssistant/HomeMonitorSteps.js

@@ -3,7 +3,7 @@ import { Box, Flex } from '@chakra-ui/react';
 import { HomeMonitorButton, IconMenu, MoreHorizontal } from '..';
 import { homeAssistantSteps } from '../../helpers';
 import { useComponentStyles } from '../../hooks';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 export const HomeMonitorSteps = ({ menuItems = [], onStepClick, stepsWithAlerts, }) => {
     const ids = [
         'homeMonitorButton-1',
@@ -17,7 +17,7 @@ export const HomeMonitorSteps = ({ menuItems = [], onStepClick, stepsWithAlerts,
     const isDisabled = menuItems.length === 0;
     useComponentStyles({ ids, selectedId, zIndex: '2' });
     const handleStepClick = (step) => onStepClick(step);
-    return (_jsx(Flex, { gap: "base", children: homeAssistantSteps.map((step, index) => (_jsx(Box, { position: "relative", children: _jsxs(Box, { flex: "auto", children: [_jsx(HomeMonitorButton, { currentStep: index + 1, onStepClick: handleStepClick, status: getStatus(index + 1, stepsWithAlerts), step: step }), _jsx(Box, { position: "absolute", top: "-2px", right: "4px", zIndex: "1400", children: _jsx(IconMenu, { zIndex: "2", icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: index + 1, menuItems: menuItems, disabled: isDisabled, onClick: () => setSelectedId(`homeMonitorButton-${index + 1}`) }) })] }) }, step === null || step === void 0 ? void 0 : step.title))) }));
+    return (_jsx(Flex, { gap: "base", justify: "center", children: homeAssistantSteps.map((step, index) => (_jsx(Box, { position: "relative", flex: "1", children: _jsxs(Fragment, { children: [_jsx(HomeMonitorButton, { currentStep: index + 1, onStepClick: handleStepClick, status: getStatus(index + 1, stepsWithAlerts), step: step }), _jsx(Box, { position: "absolute", top: "-2px", right: "4px", zIndex: "1400", children: _jsx(IconMenu, { zIndex: "2", icon: _jsx(MoreHorizontal, { size: 26 }), itemForm: index + 1, menuItems: menuItems, disabled: isDisabled, onClick: () => setSelectedId(`homeMonitorButton-${index + 1}`) }) })] }) }, step === null || step === void 0 ? void 0 : step.title))) }));
 };
 const getStatus = (index, stepsWithAlerts) => {
     const hasAlert = stepsWithAlerts.includes(index);

package/dist/components/homeBoard/HomeBoard.js

@@ -51,7 +51,7 @@ export const HomeBoard = () => {
         HomeAssistant: (_jsx(HomeAssistantPanel, { currentStep: homeAssistantCurrentStep, currentForm: currentHomeAssistantForm, onNext: handleHomeAssistantFormChange, onBack: handleHomeAssistantBack, onApplianceClick: () => null, onClose: onRightClose, onSave: () => { }, backDisabled: false, nextDisabled: false })),
     };
     const panelSize = currentComponent === 'PartnerCatalog' ? 'lg' : 'md';
-    return (_jsxs(Box, { overflowX: "hidden", children: [_jsx(RightPanel, { overlay: showOverlay, isOpen: isRightOpen, onClose: onRightClose, size: panelSize, children: rightPanelComponents[currentComponent] }), _jsxs(Flex, { w: "full", minH: "100dvh", children: [_jsx(RoomsMenu, { activeRoom: "homeboard", handleAddRoom: (id) => __awaiter(void 0, void 0, void 0, function* () { return console.log(id); }), handleClick: () => null, handleHomeClick: () => null, rooms: RoomsList, roomsToAdd: RoomsToAdd }), _jsxs(Box, { w: "full", children: [_jsx(AppBarComponent, { setActiveTour: setActiveTour }), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsx(HomeHeader, { buttonLabel: "Partner catalog", onBack: () => null, homeName: homeName, onAdd: () => null }), _jsxs(HomeBoardGrid, { children: [_jsx(HomeCardWithRecipent, { address: HomeCards[0].address, handleEdit: handleEditHomeClick, handleDeleteAccountType: (email) => email, handleSubmitAccountType: (form) => form, _id: HomeCards[0]._id, image: HomeCards[0].image, loading: false, name: HomeCards[0].name, menu: menuMock, addImage: () => null, recipients: recipientsDb, records: homeBoardRecorsMock }), _jsx(HomeAssistant, { currentPanel: homeAssistantCurrentStep, currentStep: 6, onStepClick: handleHomeAssistantClick }), _jsx(PropertyTaxes, { estimatedTaxValue: 1000, menuItems: menuMock, taxes: taxesMock, title: "Travis County Property Taxes" }), _jsx(HomeMonitor, { children: _jsxs(Stack, { spacing: "base", children: [_jsxs(Flex, { gap: "base", children: [_jsx(HomefileMonitoring, {}), _jsx(Notifications, { date: "10-10-24", local: "TX - Houston" })] }), _jsx(HomeMonitorSteps, { menuItems: [
+    return (_jsxs(Box, { overflowX: "hidden", children: [_jsx(RightPanel, { overlay: showOverlay, isOpen: isRightOpen, onClose: onRightClose, size: panelSize, children: rightPanelComponents[currentComponent] }), _jsxs(Flex, { w: "full", minH: "100dvh", children: [_jsx(RoomsMenu, { activeRoom: "homeboard", handleAddRoom: (id) => __awaiter(void 0, void 0, void 0, function* () { return console.log(id); }), handleClick: () => null, handleHomeClick: () => null, rooms: RoomsList, roomsToAdd: RoomsToAdd }), _jsxs(Box, { w: "full", children: [_jsx(AppBarComponent, { setActiveTour: setActiveTour }), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsx(HomeHeader, { buttonLabel: "Partner catalog", onBack: () => null, homeName: homeName, onAdd: () => null }), _jsxs(HomeBoardGrid, { children: [_jsx(HomeCardWithRecipent, { address: HomeCards[0].address, handleEdit: handleEditHomeClick, handleDeleteAccountType: (email) => email, handleSubmitAccountType: (form) => form, _id: HomeCards[0]._id, image: HomeCards[0].image, loading: false, name: HomeCards[0].name, menu: menuMock, addImage: () => null, recipients: recipientsDb, records: homeBoardRecorsMock }), _jsx(HomeAssistant, { currentPanel: homeAssistantCurrentStep, currentStep: 6, onStepClick: handleHomeAssistantClick }), _jsx(PropertyTaxes, { estimatedTaxValue: 1000, menuItems: menuMock, taxes: taxesMock, title: "Travis County Property Taxes" }), _jsx(HomeMonitor, { children: _jsxs(Stack, { spacing: "base", w: "full", px: "base", children: [_jsxs(Flex, { gap: "base", children: [_jsx(HomefileMonitoring, {}), _jsx(Notifications, { date: "10-10-24", local: "TX - Houston" })] }), _jsx(HomeMonitorSteps, { menuItems: [
                                                                 {
                                                                     label: 'Details',
                                                                     handleClick: handleHomeAssistantClick,

package/dist/components/launchpad/IconMenu.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { MenuButton, IconButton, Menu, MenuItem, MenuList, } from '@chakra-ui/react';
+import { MenuButton, IconButton, Menu, MenuItem, MenuList, Box, } from '@chakra-ui/react';
 import { Overlay } from '..';
-export const IconMenu = ({ disabled = false, icon, itemForm, menuItems, onClick, variant = 'menuIcon', width = 'fit-content', zIndex, }) => {
-    return (_jsx(Menu, { isLazy: true, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "overlay", showOverlay: isOpen, position: "fixed", zIndex: zIndex }), _jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: icon, variant: variant, w: width, disabled: disabled, marginTop: "0 !important", onClick: onClick }), _jsx(MenuList, { zIndex: "5", children: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ handleClick, label }) => (_jsx(MenuItem, { onClick: () => handleClick(itemForm), _hover: {
-                            bg: 'lightGreen.1',
-                        }, _focus: {
-                            bg: 'lightGreen.1',
-                        }, children: label }, label))) })] })) }));
+export const IconMenu = ({ disabled = false, icon, itemForm, menuItems, onClick, variant = 'menuIcon', width = 'fit-content', zIndex = '999', }) => {
+    return (_jsx(Box, { zIndex: zIndex, children: _jsx(Menu, { isLazy: true, children: ({ isOpen }) => (_jsxs(_Fragment, { children: [_jsx(Overlay, { bg: "overlay", showOverlay: isOpen, position: "fixed" }), _jsx(MenuButton, { as: IconButton, "aria-label": "Options", icon: icon, variant: variant, w: width, disabled: disabled, marginTop: "0 !important", onClick: onClick }), _jsx(MenuList, { zIndex: "5", children: menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ handleClick, label }) => (_jsx(MenuItem, { onClick: () => handleClick(itemForm), _hover: {
+                                bg: 'lightGreen.1',
+                            }, _focus: {
+                                bg: 'lightGreen.1',
+                            }, children: label }, label))) })] })) }) }));
 };

package/dist/components/partner/PartnerFooter.js

@@ -10,5 +10,5 @@ export const PartnerFooter = ({ socialLinks = [], websiteUrl, urlText, }) => {
             return;
         window.open(url, '_blank');
     };
-    return (_jsxs(Flex, { align: "center", justify: "space-between", p: "base", children: [_jsx(Link, { href: websiteUrl, isExternal: true, children: _jsx(Text, { fontSize: "xs", color: "blue.3", children: urlText !== null && urlText !== void 0 ? urlText : cleanedWebsiteUrl }) }), hasSocialLinks && (_jsx(Flex, { align: "center", gap: "1", children: socialLinks === null || socialLinks === void 0 ? void 0 : socialLinks.map(({ name, link }) => (_jsx(IconButton, { variant: "unstyled", w: "fit-content", "aria-label": "Instagram", icon: SocialIcons({ size: 20, name }), onClick: () => handleSocialClick(link) }, name))) }))] }));
+    return (_jsxs(Flex, { background: "#f6f8f9", align: "center", justify: "space-between", p: "base", children: [_jsx(Link, { href: websiteUrl, isExternal: true, children: _jsx(Text, { fontSize: "xs", color: "blue.3", children: urlText !== null && urlText !== void 0 ? urlText : cleanedWebsiteUrl }) }), hasSocialLinks && (_jsx(Flex, { align: "center", gap: "1", children: socialLinks === null || socialLinks === void 0 ? void 0 : socialLinks.map(({ name, link }) => (_jsx(IconButton, { variant: "unstyled", w: "fit-content", "aria-label": "Instagram", icon: SocialIcons({ size: 20, name }), onClick: () => handleSocialClick(link) }, name))) }))] }));
 };

package/dist/helpers/forms/dynamicForm.helper.js

@@ -1,4 +1,4 @@
-import { Paint, Receipt, Barcode, GoldenBars, Heart, Rating, Notes, Book, ImgIcon, Registry, ShareWith, Calendar, Tools2, Billing, Calc, CheckPen, GenericField, Price, Battery2, Co2, Detector, Electricity, Sprinkler, SixtyEight, DropCalendar, MobileDrop, SolarPanel, Calendar2, Drop, Wind, Foundation, Heater, Light, Plate, Pool2, Closet, Structure, GlassWater, Roof2, Target, CircleFace, Company, Pressure, WindowCleaning, RoofCleaning, HolidayLights, GutterCleaning, HomeCleaning, PressureWasher, } from '../../assets/images';
+import { Paint, Receipt, Barcode, GoldenBars, Heart, Rating, Notes, Book, ImgIcon, Registry, ShareWith, Calendar, Tools2, Billing, Calc, CheckPen, GenericField, Price, Battery2, Co2, Detector, Electricity, Sprinkler, SixtyEight, DropCalendar, MobileDrop, SolarPanel, Calendar2, Drop, Wind, Foundation, Heater, Light, Plate, Pool2, Closet, Structure, GlassWater, Roof2, Target, CircleFace, Company, Pressure, WindowCleaning, RoofCleaning, HolidayLights, GutterCleaning, HomeCleaning, HouseWashing, PressureWasher, } from '../../assets/images';
 export const fieldIcons = {
     barcode: Barcode,
     billing: Billing,
@@ -46,6 +46,7 @@ export const fieldIcons = {
     company: Company,
     'sh-gutter': GutterCleaning,
     'sh-home': HomeCleaning,
+    'sh-house': HouseWashing,
     'sh-lights': HolidayLights,
     'sh-pressure': Pressure,
     'sh-roof': RoofCleaning,

package/dist/helpers/homeBoard/FolderSharing.helper.js

@@ -27,7 +27,7 @@ export const testFolders = [
     {
         _id: faker.database.mongodbObjectId(),
         home: '6317993b4a8e6e909bcced0a',
-        name: 'Test',
+        name: 'Mortgage',
         public: false,
         icon: 'project',
         createdAt: '2023-01-13T20:35:02.538Z',
@@ -147,7 +147,8 @@ export const fileDB = [
         createdAt: '2022-06-15T21:17:33.246Z',
         updatedAt: '2022-06-15T21:17:33.246Z',
         __v: 0,
-        files: [{
+        files: [
+            {
                 _id: '62aa4c6db225dd3957d09b24',
                 fileName: 'test-plans.jpeg-37f8c3',
                 extension: 'mov',
@@ -159,7 +160,8 @@ export const fileDB = [
                 createdAt: '2022-06-15T21:17:33.166Z',
                 updatedAt: '2022-06-15T21:17:33.166Z',
                 __v: 0,
-            }],
+            },
+        ],
         room: {
             _id: '63176dfa5d8cee7e11f6f962',
             name: 'Master Bedroom',
@@ -185,7 +187,8 @@ export const fileDB = [
         createdAt: '2022-06-15T21:17:33.246Z',
         updatedAt: '2022-06-15T21:17:33.246Z',
         __v: 0,
-        files: [{
+        files: [
+            {
                 _id: '62aa4c6db225dd3957d09b24',
                 fileName: 'test-plans.jpeg-37f8c3',
                 extension: 'jpeg',
@@ -197,7 +200,8 @@ export const fileDB = [
                 createdAt: '2022-06-15T21:17:33.166Z',
                 updatedAt: '2022-06-15T21:17:33.166Z',
                 __v: 0,
-            }],
+            },
+        ],
         room: {
             _id: '63176dfa5d8cee7e11f6f962',
             name: 'Master Bedroom',

package/dist/interfaces/forms/dynamicForm/DynamicForm.interface.d.ts

@@ -2,7 +2,7 @@ import { FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '../..';
 type KindTypes = 'checkbox' | 'checkbox-group' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'hidden' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | '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' | 'battery' | 'billing' | 'book' | 'calc' | 'calendar' | 'check' | 'co2' | 'date' | 'default' | 'detector' | 'electricity' | 'goldbars' | 'heart' | 'image' | 'notes' | 'palette' | 'people' | 'price' | 'rating' | 'receipt' | 'registry' | 'sprinkler' | 'tools' | 'wind' | '68' | 'calendar2' | 'water' | 'calendar-drop' | 'umbrella' | 'heater' | 'roof' | 'foundation' | 'solar-panel' | 'pool' | 'drop' | 'mobile-drop' | 'light' | 'plate' | 'pressure-washer' | 'house' | 'target' | 'title' | 'company' | UIIconTypes;
-export type UIIconTypes = 'sh-pressure' | 'sh-window' | 'sh-roof' | 'sh-lights' | 'sh-gutter' | 'sh-home';
+export type UIIconTypes = 'sh-pressure' | 'sh-window' | 'sh-roof' | 'sh-lights' | 'sh-gutter' | 'sh-home' | 'sh-house';
 export type ValueTypes = string | string[] | number | boolean;
 export type OptionsTypes = string[] | number[] | null;
 export interface ReportI {
@@ -25,6 +25,7 @@ export interface DynamicFormI extends Partial<PartnerFooterI> {
     menuItems?: MenuItemI[];
     onUpload?: (filesByFieldId: Record<string, FolderFileI[]>) => void;
     showTitle?: boolean;
+    title?: string;
     uploadingFieldId?: string;
 }
 export interface DynamicFormProxyI {

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

@@ -491,6 +491,15 @@ export const tileUIMock = [
                         type: 'vertical-icon',
                         icon: 'sh-gutter',
                     },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        description: '',
+                        comments: '',
+                        value: 'House Washing',
+                        type: 'vertical-icon',
+                        icon: 'sh-house',
+                    },
                 ],
             },
             {
@@ -517,7 +526,7 @@ export const tileUIMock = [
                         comments: '',
                         value: 'Request Support',
                         type: 'secondary-cta',
-                        link: 'open-drawer',
+                        link: 'www.shine.com',
                     },
                 ],
             },

package/package.json

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

package/src/assets/images/shine/index.ts

@@ -1,5 +1,6 @@
 import GutterCleaning from './gutter-cleaning.png'
 import HomeCleaning from './home-cleaning.png'
+import HouseWashing from './house-washing.png'
 import HolidayLights from './holiday-lights.png'
 import Pressure from './pressure.png'
 import RoofCleaning from './roof-cleaning.png'
@@ -8,6 +9,7 @@ import WindowCleaning from './window.png'
 export {
   GutterCleaning,
   HomeCleaning,
+  HouseWashing,
   HolidayLights,
   Pressure,
   RoofCleaning,

package/src/components/folderSharing/FolderSharing.tsx

@@ -106,8 +106,8 @@ export const FolderSharing = ({
                       />
                       <Text
                         noOfLines={2}
-                        lineHeight="1.1"
                         fontSize="sm"
+                        lineHeight="17px"
                         textOverflow="ellipsis"
                       >
                         {name}

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

@@ -28,6 +28,7 @@ export const DynamicForm = ({
   menuItems,
   onUpload,
   showTitle = true,
+  title,
   uploadingFieldId,
   ...props
 }: DynamicFormI) => {
@@ -45,7 +46,7 @@ export const DynamicForm = ({
     <Stack bg="lightBlue.1" spacing="0" h="full">
       {showTitle && (
         <Text fontFamily="secondary" px="base" pt="4" pb="2">
-          {t('forms.itemDetails')}
+          {title ? title : t('forms.itemDetails')}
         </Text>
       )}
       <FormProvider {...form}>
@@ -171,17 +172,18 @@ export const DynamicForm = ({
                     id={id}
                     children={children}
                     value={value}
+                    description={description}
                     icon={baseProps.icon}
                   />
                 )
               case 'tile-body':
                 return (
                   <TileBody
+                    {...props}
                     key={id}
                     callback={callback}
                     fields={children}
                     menuItems={menuItems}
-                    {...props}
                   />
                 )
               default:

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

@@ -15,12 +15,13 @@ export const CheckboxGroupField = ({
   icon,
   id,
   value,
-}: Pick<ReportI, 'children' | 'icon' | 'id' | 'value'>) => {
+  description
+}: Pick<ReportI, 'children' | 'icon' | 'id' | 'value' | 'description'>) => {
   const { control } = useFormContext()
   const defaultValues = children
     ?.map((child) => {
       if (child.value) {
-        return child.id
+        return child.name
       }
     })
     .filter((value) => value) as string[]
@@ -29,7 +30,7 @@ export const CheckboxGroupField = ({
     <Box>
       <Box p="base" borderBottom="1px dashed" borderColor="lightBlue.6">
         <Text fontFamily="secondary" fontSize="sm">
-          {value}
+          {description}
         </Text>
       </Box>
       <Flex p="base" gap="base">
@@ -47,7 +48,7 @@ export const CheckboxGroupField = ({
                     return (
                       <Checkbox
                         key={id}
-                        value={String(id)}
+                        value={String(name)}
                         isChecked={Boolean(value)}
                       >
                         <Text fontSize="sm">{name}</Text>

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

@@ -100,19 +100,6 @@ export const SingleFields = ({ callback, fields, menuItems }: FieldTypesI) => {
                 />
               )
             case 'primary-cta':
-              return (
-                <TileCta
-                  key={id}
-                  callback={callback}
-                  description={description}
-                  icon={icon}
-                  id={id}
-                  name={name}
-                  type={type}
-                  link={link}
-                  value={String(baseProps.value)}
-                />
-              )
             case 'secondary-cta':
               return (
                 <TileCta
@@ -123,6 +110,7 @@ export const SingleFields = ({ callback, fields, menuItems }: FieldTypesI) => {
                   id={id}
                   name={name}
                   type={type}
+                  link={link}
                   value={String(baseProps.value)}
                 />
               )

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

@@ -10,7 +10,7 @@ export const TileBody = ({
   ...props
 }: TileBodyI) => {
   return (
-    <Box display="flex" flexDir="column" bg="neutral.white" boxShadow="lg">
+    <Box display="flex" flexGrow={1} flexDir="column" bg="#f6f8f9" boxShadow="lg">
       <Stack spacing="0" flex="1">
         <SingleFields
           callback={callback}

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

@@ -4,7 +4,7 @@ import { TileBodyI } from '@/interfaces'
 
 export const TileBodyAction = ({ callback, fields }: TileBodyI) => {
   return (
-    <Flex p="base" align="center" gap="base">
+    <Flex p="base" align="center" gap="base" background={"#f6f8f9"}>
       <SingleFields fields={fields} callback={callback} />
     </Flex>
   )

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

@@ -2,7 +2,7 @@ import { Box, Text } from '@chakra-ui/react'
 
 export const TileBodyHeader = ({ value = '' }) => {
   return (
-    <Box p="base">
+    <Box borderTop={"1px solid #dbdbdb"} p="base" background={"#ffffff"}>
       <Text fontWeight="semibold">{value}</Text>
     </Box>
   )

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

@@ -4,7 +4,7 @@ import { TileBodyI } from '@/interfaces'
 
 export const TileBodySectionGrid = ({ fields }: TileBodyI) => {
   return (
-    <SimpleGrid columns={3} spacing="base" p="base">
+    <SimpleGrid columns={3} spacing="base" p="base" background={"#ffffff"}>
       <SingleFields fields={fields} />
     </SimpleGrid>
   )

package/src/components/homeAssistant/HomeAssistantButton.tsx

@@ -17,7 +17,7 @@ export const HomeAssistantButton = ({
   }
   const buttonId = `homeAssistantButton-${currentStep}`
   return (
-    <Box position="relative" id={buttonId}>
+    <Box position="relative" id={buttonId} zIndex="2">
       {isCompleted && (
         <Image
           src={CheckInCircle}

package/src/components/homeAssistant/HomeMonitorButton.tsx

@@ -12,7 +12,7 @@ export const HomeMonitorButton = ({
   const iconAltText = getIconAltText(step.icon)
 
   return (
-    <Box position="relative" id={buttonId}>
+    <Box position="relative" id={buttonId} zIndex="2">
       <Box
         position="relative"
         bg="neutral.white"
@@ -36,10 +36,10 @@ export const HomeMonitorButton = ({
           as="button"
           spacing="2"
           border="1px solid transparent"
-          w="90px"
           align="center"
           h="96px"
-          py="base"
+          w="100%"
+          p="base"
           {...setStyles(status)}
           onClick={() => onStepClick(currentStep)}
         >

package/src/components/homeAssistant/HomeMonitorSteps.tsx

@@ -3,7 +3,7 @@ import { HomeMonitortStepsI } from '@/interfaces'
 import { HomeMonitorButton, IconMenu, MoreHorizontal } from '@/components'
 import { homeAssistantSteps } from '@/helpers'
 import { useComponentStyles } from '@/hooks'
-import { useState } from 'react'
+import { Fragment, useState } from 'react'
 
 export const HomeMonitorSteps = ({
   menuItems = [],
@@ -24,10 +24,10 @@ export const HomeMonitorSteps = ({
   useComponentStyles({ ids, selectedId, zIndex: '2' })
   const handleStepClick = (step: number) => onStepClick(step)
   return (
-    <Flex gap="base">
+    <Flex gap="base" justify="center">
       {homeAssistantSteps.map((step, index) => (
-        <Box key={step?.title} position="relative">
-          <Box flex="auto">
+        <Box key={step?.title} position="relative" flex="1">
+          <Fragment>
             <HomeMonitorButton
               currentStep={index + 1}
               onStepClick={handleStepClick}
@@ -44,7 +44,7 @@ export const HomeMonitorSteps = ({
                 onClick={() => setSelectedId(`homeMonitorButton-${index + 1}`)}
               />
             </Box>
-          </Box>
+          </Fragment>
         </Box>
       ))}
     </Flex>

package/src/components/homeBoard/HomeBoard.tsx

@@ -334,7 +334,7 @@ export const HomeBoard = () => {
                 title="Travis County Property Taxes"
               />
               <HomeMonitor>
-                <Stack spacing="base">
+                <Stack spacing="base" w="full" px="base">
                   <Flex gap="base">
                     <HomefileMonitoring />
                     <Notifications date="10-10-24" local="TX - Houston" />

package/src/components/launchpad/IconMenu.tsx

@@ -4,6 +4,7 @@ import {
   Menu,
   MenuItem,
   MenuList,
+  Box,
 } from '@chakra-ui/react'
 import { IconMenuI } from '@/interfaces'
 import { Overlay } from '@/components'
@@ -16,46 +17,43 @@ export const IconMenu = <T extends unknown>({
   onClick,
   variant = 'menuIcon',
   width = 'fit-content',
-  zIndex,
+  zIndex = '999',
 }: IconMenuI<T>) => {
   return (
-    <Menu isLazy>
-      {({ isOpen }) => (
-        <>
-          <Overlay
-            bg="overlay"
-            showOverlay={isOpen}
-            position="fixed"
-            zIndex={zIndex}
-          />
-          <MenuButton
-            as={IconButton}
-            aria-label="Options"
-            icon={icon}
-            variant={variant}
-            w={width}
-            disabled={disabled}
-            marginTop="0 !important"
-            onClick={onClick}
-          />
-          <MenuList zIndex="5">
-            {menuItems?.map(({ handleClick, label }) => (
-              <MenuItem
-                key={label}
-                onClick={() => handleClick(itemForm)}
-                _hover={{
-                  bg: 'lightGreen.1',
-                }}
-                _focus={{
-                  bg: 'lightGreen.1',
-                }}
-              >
-                {label}
-              </MenuItem>
-            ))}
-          </MenuList>
-        </>
-      )}
-    </Menu>
+    <Box zIndex={zIndex}>
+      <Menu isLazy>
+        {({ isOpen }) => (
+          <>
+            <Overlay bg="overlay" showOverlay={isOpen} position="fixed" />
+            <MenuButton
+              as={IconButton}
+              aria-label="Options"
+              icon={icon}
+              variant={variant}
+              w={width}
+              disabled={disabled}
+              marginTop="0 !important"
+              onClick={onClick}
+            />
+            <MenuList zIndex="5">
+              {menuItems?.map(({ handleClick, label }) => (
+                <MenuItem
+                  key={label}
+                  onClick={() => handleClick(itemForm)}
+                  _hover={{
+                    bg: 'lightGreen.1',
+                  }}
+                  _focus={{
+                    bg: 'lightGreen.1',
+                  }}
+                >
+                  {label}
+                </MenuItem>
+              ))}
+            </MenuList>
+          </>
+        )}
+      </Menu>
+    </Box>
   )
 }

package/src/components/partner/PartnerFooter.tsx

@@ -18,7 +18,7 @@ export const PartnerFooter = ({
   }
 
   return (
-    <Flex align="center" justify="space-between" p="base">
+    <Flex background={"#f6f8f9"} align="center" justify="space-between" p="base">
       <Link href={websiteUrl} isExternal>
         <Text fontSize="xs" color="blue.3">
           {urlText ?? cleanedWebsiteUrl}

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

@@ -47,6 +47,7 @@ import {
   HolidayLights,
   GutterCleaning,
   HomeCleaning,
+  HouseWashing,
   PressureWasher,
 } from '@/assets/images'
 import { IconTypes } from '@/interfaces'
@@ -98,6 +99,7 @@ export const fieldIcons: Record<IconTypes, string> = {
   company: Company,
   'sh-gutter': GutterCleaning,
   'sh-home': HomeCleaning,
+  'sh-house': HouseWashing,
   'sh-lights': HolidayLights,
   'sh-pressure': Pressure,
   'sh-roof': RoofCleaning,

package/src/helpers/homeBoard/FolderSharing.helper.ts

@@ -30,7 +30,7 @@ export const testFolders: FolderI[] = [
   {
     _id: faker.database.mongodbObjectId(),
     home: '6317993b4a8e6e909bcced0a',
-    name: 'Test',
+    name: 'Mortgage',
     public: false,
     icon: 'project',
     createdAt: '2023-01-13T20:35:02.538Z',
@@ -153,19 +153,21 @@ export const fileDB: ReportsI[] = [
     createdAt: '2022-06-15T21:17:33.246Z',
     updatedAt: '2022-06-15T21:17:33.246Z',
     __v: 0,
-    files: [{
-      _id: '62aa4c6db225dd3957d09b24',
-      fileName: 'test-plans.jpeg-37f8c3',
-      extension: 'mov',
-      originalName: 'test-plans.jpeg',
-      bucketName: 'homefile-images',
-      description: '',
-      collectionName: 'homes',
-      docId: '62a20af1cc6d1000ef17c7d0',
-      createdAt: '2022-06-15T21:17:33.166Z',
-      updatedAt: '2022-06-15T21:17:33.166Z',
-      __v: 0,
-    }],
+    files: [
+      {
+        _id: '62aa4c6db225dd3957d09b24',
+        fileName: 'test-plans.jpeg-37f8c3',
+        extension: 'mov',
+        originalName: 'test-plans.jpeg',
+        bucketName: 'homefile-images',
+        description: '',
+        collectionName: 'homes',
+        docId: '62a20af1cc6d1000ef17c7d0',
+        createdAt: '2022-06-15T21:17:33.166Z',
+        updatedAt: '2022-06-15T21:17:33.166Z',
+        __v: 0,
+      },
+    ],
     room: {
       _id: '63176dfa5d8cee7e11f6f962',
       name: 'Master Bedroom',
@@ -191,19 +193,21 @@ export const fileDB: ReportsI[] = [
     createdAt: '2022-06-15T21:17:33.246Z',
     updatedAt: '2022-06-15T21:17:33.246Z',
     __v: 0,
-    files: [{
-      _id: '62aa4c6db225dd3957d09b24',
-      fileName: 'test-plans.jpeg-37f8c3',
-      extension: 'jpeg',
-      originalName: 'test-plans.jpeg',
-      bucketName: 'homefile-images',
-      description: '',
-      collectionName: 'homes',
-      docId: '62a20af1cc6d1000ef17c7d0',
-      createdAt: '2022-06-15T21:17:33.166Z',
-      updatedAt: '2022-06-15T21:17:33.166Z',
-      __v: 0,
-    }],
+    files: [
+      {
+        _id: '62aa4c6db225dd3957d09b24',
+        fileName: 'test-plans.jpeg-37f8c3',
+        extension: 'jpeg',
+        originalName: 'test-plans.jpeg',
+        bucketName: 'homefile-images',
+        description: '',
+        collectionName: 'homes',
+        docId: '62a20af1cc6d1000ef17c7d0',
+        createdAt: '2022-06-15T21:17:33.166Z',
+        updatedAt: '2022-06-15T21:17:33.166Z',
+        __v: 0,
+      },
+    ],
     room: {
       _id: '63176dfa5d8cee7e11f6f962',
       name: 'Master Bedroom',

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

@@ -88,6 +88,7 @@ export type UIIconTypes =
   | 'sh-lights'
   | 'sh-gutter'
   | 'sh-home'
+  | 'sh-house'
 
 export type ValueTypes = string | string[] | number | boolean
 export type OptionsTypes = string[] | number[] | null
@@ -113,6 +114,7 @@ export interface DynamicFormI extends Partial<PartnerFooterI> {
   menuItems?: MenuItemI[]
   onUpload?: (filesByFieldId: Record<string, FolderFileI[]>) => void
   showTitle?: boolean
+  title?: string
   uploadingFieldId?: string
 }
 

package/src/mocks/forms/dynamicForm.mock.ts

@@ -496,6 +496,15 @@ export const tileUIMock: ReportI[] = [
             type: 'vertical-icon',
             icon: 'sh-gutter',
           },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            description: '',
+            comments: '',
+            value: 'House Washing',
+            type: 'vertical-icon',
+            icon: 'sh-house',
+          },
         ],
       },
 
@@ -523,7 +532,7 @@ export const tileUIMock: ReportI[] = [
             comments: '',
             value: 'Request Support',
             type: 'secondary-cta',
-            link: 'open-drawer',
+            link: 'www.shine.com',
           },
         ],
       },