@homefile/components-v2 2.18.0 → 2.19.0

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

@@ -53,6 +53,7 @@ import Exclamation from './exclamation.svg';
 import Face from './face.svg';
 import Feedback from './feedback.svg';
 import FileUploading from './file-uploading.svg';
+import FilterSize from './filter-size.png';
 import Finance from './finance.svg';
 import Fire from './fire.svg';
 import Flag from './flag.png';
@@ -161,7 +162,7 @@ import WizardDetailed from './wizard-detailed.svg';
 import WizardQuick from './wizard-quick.svg';
 import YellowFolder from './yellow-folder.svg';
 import YellowFolderUnshared from './yellow-folder-unshared.svg';
-export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, FilterSize, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
 export * from './alerts';
 export * from './animations';
 export * from './appliances';

package/dist/assets/images/index.js

@@ -53,6 +53,7 @@ import Exclamation from './exclamation.svg';
 import Face from './face.svg';
 import Feedback from './feedback.svg';
 import FileUploading from './file-uploading.svg';
+import FilterSize from './filter-size.png';
 import Finance from './finance.svg';
 import Fire from './fire.svg';
 import Flag from './flag.png';
@@ -161,7 +162,7 @@ import WizardDetailed from './wizard-detailed.svg';
 import WizardQuick from './wizard-quick.svg';
 import YellowFolder from './yellow-folder.svg';
 import YellowFolderUnshared from './yellow-folder-unshared.svg';
-export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
+export { AlertDelete, AlertDeletePurple, Arrow, Batery, Bathroom, Battery, Battery2, Bedroom, BgBlue, BgLogo, Billing, BillingAddress, BlueFolder, BlueFolderShared, BookOpened, Box, Building, Calc, Calendar2, Catalog, ChatBubble, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Clouds, Co2, Company, Company2, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Create, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Drop, DropCalendar, Electricity, Entryway, EstValue, Exclamation, Face, Feedback, FileUploading, FilterSize, Finance, Fire, Flag, FormSent, Foundation, Garage, GearPencil, GearTime, GenericField, GlassWater, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, Laundry, Light, LivingRoom, Loading, Location, LogoCompany, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Office, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plate, Play, Plus, Pool, Pool2, PressureWasher, Price, Profile, ProgressReport, Proposal, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, RelationshipHome, ResendPassword, Rocket, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SolarPanel, Speaker, Sprinkler, Structure, Subscription, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Trash, Trees, TreesCrop, TreesCrop2, VideoIcon, VideoPlay, VioletFolder, Warning, Warranty, WellDone, WholeHome, Wind, WindWhite, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, };
 export * from './alerts';
 export * from './animations';
 export * from './appliances';

package/dist/assets/images/index.ts

@@ -53,6 +53,7 @@ import Exclamation from './exclamation.svg'
 import Face from './face.svg'
 import Feedback from './feedback.svg'
 import FileUploading from './file-uploading.svg'
+import FilterSize from './filter-size.png'
 import Finance from './finance.svg'
 import Fire from './fire.svg'
 import Flag from './flag.png'
@@ -218,6 +219,7 @@ export {
   Face,
   Feedback,
   FileUploading,
+  FilterSize,
   Finance,
   Fire,
   Flag,

package/dist/components/homeAssistant/monitorAlerts/alertDetails/AlertFields.d.ts

@@ -1,2 +1,2 @@
 import { FieldTypesI } from '../../../../interfaces';
-export declare const AlertFields: ({ fields }: FieldTypesI) => import("react/jsx-runtime").JSX.Element;
+export declare const AlertFields: ({ fields, callback }: FieldTypesI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/monitorAlerts/alertDetails/AlertFields.js

@@ -1,15 +1,21 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Stack, Text } from '@chakra-ui/react';
-import { VideoDetail } from './VideoDetail';
-export const AlertFields = ({ fields }) => {
+import { FilterSize, SearchField, VideoDetail } from '../../..';
+import { fieldIcons } from '../../../../helpers';
+export const AlertFields = ({ fields, callback }) => {
     return (_jsx(Stack, { spacing: "base", p: "base", children: fields === null || fields === void 0 ? void 0 : fields.map((field) => {
-            const { id, type, value } = field;
+            const { id, type, value, icon } = field;
+            const mappedIcon = icon && fieldIcons[icon];
             switch (type) {
                 case 'text':
                     return (_jsx(Text, { fontSize: "sm", fontFamily: "secondary", lineHeight: "1.2", whiteSpace: "pre-line", children: String(value) }, id));
                 case 'video':
                     return _createElement(VideoDetail, Object.assign({}, field, { key: id }));
+                case 'filter-size':
+                    return _createElement(FilterSize, Object.assign({}, field, { key: id, icon: mappedIcon }));
+                case 'search':
+                    return _createElement(SearchField, Object.assign({}, field, { key: id, callback: callback }));
                 default:
                     return null;
             }

package/dist/components/homeAssistant/monitorAlerts/alertDetails/FilterSize.d.ts

@@ -0,0 +1,2 @@
+import { ReportI } from '../../../../interfaces';
+export declare const FilterSize: ({ name, icon, value }: ReportI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/monitorAlerts/alertDetails/FilterSize.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Image, Stack, Text } from '@chakra-ui/react';
+import { CustomDivider } from '../../..';
+export const FilterSize = ({ name, icon, value }) => {
+    return (_jsxs(Stack, { spacing: "base", children: [_jsx(CustomDivider, {}), _jsx(Text, { fontWeight: "semibold", children: name }), _jsxs(Flex, { gap: "base", children: [_jsx(Image, { boxSize: "86px", src: icon }), _jsx(Text, { fontSize: "sm", fontFamily: "secondary", lineHeight: "1.2", children: value })] }), _jsx(CustomDivider, {})] }));
+};

package/dist/components/homeAssistant/monitorAlerts/alertDetails/SearchField.d.ts

@@ -0,0 +1,2 @@
+import { FieldTypesI, ReportI } from '../../../../interfaces';
+export declare const SearchField: ({ callback, description, ...props }: ReportI & Pick<FieldTypesI, "callback">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/monitorAlerts/alertDetails/SearchField.js

@@ -0,0 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, Text } from '@chakra-ui/react';
+import { SearchInput } from '../../..';
+import { useState } from 'react';
+export const SearchField = (_a) => {
+    var { callback, description } = _a, props = __rest(_a, ["callback", "description"]);
+    const [search, setSearch] = useState('');
+    const handleSearch = (value) => {
+        callback === null || callback === void 0 ? void 0 : callback(Object.assign(Object.assign({}, props), { value }));
+    };
+    return (_jsxs(Stack, { spacing: "base", children: [_jsx(Text, { fontSize: "sm", fontFamily: "secondary", lineHeight: "1.2", children: description }), _jsx(SearchInput, { onChange: (e) => setSearch(e.target.value), value: search, maxW: "full", onBlur: () => handleSearch(search), onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        handleSearch(search);
+                    }
+                } })] }));
+};

package/dist/components/homeAssistant/monitorAlerts/alertDetails/index.d.ts

@@ -1,6 +1,8 @@
 export * from './AlertFields';
 export * from './ChangeAirFilter';
 export * from './CustomDivider';
+export * from './FilterSize';
+export * from './SearchField';
 export * from './SmokeDetectorBattery';
 export * from './SmokeDetectorExpired';
 export * from './VideoDetail';

package/dist/components/homeAssistant/monitorAlerts/alertDetails/index.js

@@ -1,6 +1,8 @@
 export * from './AlertFields';
 export * from './ChangeAirFilter';
 export * from './CustomDivider';
+export * from './FilterSize';
+export * from './SearchField';
 export * from './SmokeDetectorBattery';
 export * from './SmokeDetectorExpired';
 export * from './VideoDetail';

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

@@ -1,4 +1,4 @@
-import { Paint, Receipt, Barcode, GoldenBars, Heart, Rating, Notes, Book, ImgIcon, Registry, ShareWith, Calendar, Contacts, 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, Pressure, WindowCleaning, RoofCleaning, HolidayLights, GutterCleaning, HomeCleaning, HouseWashing, PressureWasher, BookOpened, Company2, AADisease, AADressing, AALawn, AAMowing, AAWeed, AApest } from '../../assets/images';
+import { Paint, Receipt, Barcode, GoldenBars, Heart, Rating, Notes, Book, ImgIcon, Registry, ShareWith, Calendar, Contacts, 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, Pressure, WindowCleaning, RoofCleaning, HolidayLights, GutterCleaning, HomeCleaning, HouseWashing, PressureWasher, BookOpened, Company2, AADisease, AADressing, AALawn, AAMowing, AAWeed, AApest, FilterSize, } from '../../assets/images';
 export const fieldIcons = {
     barcode: Barcode,
     billing: Billing,
@@ -58,5 +58,6 @@ export const fieldIcons = {
     'aa-disease': AADisease,
     'aa-weed': AAWeed,
     'aa-dressing': AADressing,
-    'aa-pest': AApest
+    'aa-pest': AApest,
+    'filter-size': FilterSize,
 };

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

@@ -3,7 +3,7 @@ export type KindTypes = 'ai-image' | 'ai-grid' | 'checkbox' | 'checkbox-agreemen
 export type UIKindTypes = 'tile-body' | 'tile-body-logo' | 'tile-body-header' | 'tile-body-section' | 'tile-body-section-grid' | 'tile-body-partner-image' | 'tile-body-description' | 'tile-form' | 'tile-body-action' | 'vertical-icon' | 'primary-cta' | 'secondary-cta';
 export type HomeItemTypes = 'appliances' | 'images' | 'guidelines' | 'item-related' | 'item-icon-btn';
 export type IconTypes = 'barcode' | 'battery' | 'billing' | 'book' | 'book-opened' | 'calc' | 'calendar' | 'check' | 'co2' | 'contact' | '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' | 'sh-house' | 'aa-mowing' | 'aa-fertilization' | 'aa-disease' | 'aa-weed' | 'aa-dressing' | 'aa-pest';
+export type UIIconTypes = 'sh-pressure' | 'sh-window' | 'sh-roof' | 'sh-lights' | 'sh-gutter' | 'sh-home' | 'sh-house' | 'aa-mowing' | 'aa-fertilization' | 'aa-disease' | 'aa-weed' | 'aa-dressing' | 'aa-pest' | 'filter-size';
 export type ValueTypes = string | string[] | number | boolean;
 export type OptionsTypes = string[] | number[] | null;
 export interface ReportI {

package/dist/interfaces/homeAssistant/BackendAlert.interface.d.ts

@@ -1,7 +1,7 @@
 import { DynamicFormI } from '..';
 export type AlertCategory = 'safeguard' | 'maintain' | 'budget' | 'improve';
 export type AlertTabType = 'details' | 'filter-size' | 'purchase' | 'hire-out';
-export type AlertFieldType = 'alert' | 'iconSection' | 'tabList' | 'list';
+export type AlertFieldType = 'alert' | 'search';
 export interface BackendAlertI extends DynamicFormI {
     category: AlertCategory;
 }

package/dist/interfaces/inputs/SearchInput.interface.d.ts

@@ -1,5 +1,5 @@
-import { ChakraProps } from "@chakra-ui/react";
-export interface SearchInputI extends ChakraProps {
+import { InputProps } from '@chakra-ui/react';
+export interface SearchInputI extends InputProps {
     maxW?: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     placeholder?: string;

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

@@ -852,7 +852,7 @@ export const alertFieldsMock = [
             {
                 id: faker.database.mongodbObjectId(),
                 name: 'Details',
-                label: 'Model or Serial',
+                label: '',
                 description: faker.lorem.sentence(),
                 comments: faker.lorem.sentence(),
                 value: '',
@@ -891,6 +891,39 @@ export const alertFieldsMock = [
                 value: faker.image.urlPicsumPhotos(),
                 type: 'filter-size',
                 visible: true,
+                children: [
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        label: '',
+                        description: '',
+                        comments: '',
+                        value: 'Home air filters are typically located in the HVAC system’s return air vent, furnace compartment, or air handler, usually near the blower unit or ductwork intake.',
+                        type: 'text',
+                        visible: true,
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'Check the filter:',
+                        label: '',
+                        description: '',
+                        comments: '',
+                        icon: 'filter-size',
+                        value: 'The size of the filter is usually printed on the side of the filter in inches. The size may be written as length x width x depth. For example, a filter that is 16 in long, 20 in wide, and 1 in deep would be written as 16 x 20 x 1. ',
+                        type: 'filter-size',
+                        visible: true,
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        label: '',
+                        description: 'or enter your air conditioning/furnace model number below.',
+                        comments: '',
+                        value: '',
+                        type: 'search',
+                        visible: true,
+                    },
+                ],
             },
         ],
     },

package/package.json

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

package/src/assets/images/index.ts

@@ -53,6 +53,7 @@ import Exclamation from './exclamation.svg'
 import Face from './face.svg'
 import Feedback from './feedback.svg'
 import FileUploading from './file-uploading.svg'
+import FilterSize from './filter-size.png'
 import Finance from './finance.svg'
 import Fire from './fire.svg'
 import Flag from './flag.png'
@@ -218,6 +219,7 @@ export {
   Face,
   Feedback,
   FileUploading,
+  FilterSize,
   Finance,
   Fire,
   Flag,

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

@@ -1,6 +1,6 @@
 import { Controller, useFormContext } from 'react-hook-form'
 import { Flex } from '@chakra-ui/react'
-import { FormIcon, TextInput } from '@/components'
+import { TextInput } from '@/components'
 import { TextFieldI } from '@/interfaces'
 
 export const TextField = ({

package/src/components/homeAssistant/monitorAlerts/alertDetails/AlertFields.tsx

@@ -1,12 +1,14 @@
-import { FieldTypesI } from '@/interfaces'
+import { FieldTypesI, IconTypes } from '@/interfaces'
 import { Box, Stack, Text } from '@chakra-ui/react'
-import { VideoDetail } from './VideoDetail'
+import { FilterSize, SearchField, VideoDetail } from '@/components'
+import { fieldIcons } from '@/helpers'
 
-export const AlertFields = ({ fields }: FieldTypesI) => {
+export const AlertFields = ({ fields, callback }: FieldTypesI) => {
   return (
     <Stack spacing="base" p="base">
       {fields?.map((field) => {
-        const { id, type, value } = field
+        const { id, type, value, icon } = field
+        const mappedIcon = icon && (fieldIcons[icon] as IconTypes)
         switch (type) {
           case 'text':
             return (
@@ -22,6 +24,10 @@ export const AlertFields = ({ fields }: FieldTypesI) => {
             )
           case 'video':
             return <VideoDetail {...field} key={id} />
+          case 'filter-size':
+            return <FilterSize {...field} key={id} icon={mappedIcon} />
+          case 'search':
+            return <SearchField {...field} key={id} callback={callback} />
           default:
             return null
         }

package/src/components/homeAssistant/monitorAlerts/alertDetails/FilterSize.tsx

@@ -0,0 +1,19 @@
+import { Flex, Image, Stack, Text } from '@chakra-ui/react'
+import { CustomDivider } from '@/components'
+import { ReportI } from '@/interfaces'
+
+export const FilterSize = ({ name, icon, value }: ReportI) => {
+  return (
+    <Stack spacing="base">
+      <CustomDivider />
+      <Text fontWeight="semibold">{name}</Text>
+      <Flex gap="base">
+        <Image boxSize="86px" src={icon} />
+        <Text fontSize="sm" fontFamily="secondary" lineHeight="1.2">
+          {value}
+        </Text>
+      </Flex>
+      <CustomDivider />
+    </Stack>
+  )
+}

package/src/components/homeAssistant/monitorAlerts/alertDetails/SearchField.tsx

@@ -0,0 +1,36 @@
+import { Stack, Text } from '@chakra-ui/react'
+import { SearchInput } from '@/components'
+import { FieldTypesI, ReportI } from '@/interfaces'
+import { useState } from 'react'
+
+export const SearchField = ({
+  callback,
+  description,
+  ...props
+}: ReportI & Pick<FieldTypesI, 'callback'>) => {
+  const [search, setSearch] = useState('')
+  const handleSearch = (value: string) => {
+    callback?.({
+      ...props,
+      value,
+    })
+  }
+  return (
+    <Stack spacing="base">
+      <Text fontSize="sm" fontFamily="secondary" lineHeight="1.2">
+        {description}
+      </Text>
+      <SearchInput
+        onChange={(e) => setSearch(e.target.value)}
+        value={search}
+        maxW="full"
+        onBlur={() => handleSearch(search)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            handleSearch(search)
+          }
+        }}
+      />
+    </Stack>
+  )
+}

package/src/components/homeAssistant/monitorAlerts/alertDetails/index.ts

@@ -1,6 +1,8 @@
 export * from './AlertFields'
 export * from './ChangeAirFilter'
 export * from './CustomDivider'
+export * from './FilterSize'
+export * from './SearchField'
 export * from './SmokeDetectorBattery'
 export * from './SmokeDetectorExpired'
 export * from './VideoDetail'

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

@@ -56,7 +56,8 @@ import {
   AALawn,
   AAMowing,
   AAWeed,
-  AApest
+  AApest,
+  FilterSize,
 } from '@/assets/images'
 import { IconTypes } from '@/interfaces'
 
@@ -119,5 +120,6 @@ export const fieldIcons: Record<IconTypes, string> = {
   'aa-disease': AADisease,
   'aa-weed': AAWeed,
   'aa-dressing': AADressing,
-  'aa-pest': AApest
+  'aa-pest': AApest,
+  'filter-size': FilterSize,
 }

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

@@ -122,6 +122,7 @@ export type UIIconTypes =
   | 'aa-weed'
   | 'aa-dressing'
   | 'aa-pest'
+  | 'filter-size'
 
 export type ValueTypes = string | string[] | number | boolean
 export type OptionsTypes = string[] | number[] | null

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

@@ -4,7 +4,7 @@ export type AlertCategory = 'safeguard' | 'maintain' | 'budget' | 'improve'
 
 export type AlertTabType = 'details' | 'filter-size' | 'purchase' | 'hire-out'
 
-export type AlertFieldType = 'alert' | 'iconSection' | 'tabList' | 'list'
+export type AlertFieldType = 'alert' | 'search'
 
 export interface BackendAlertI extends DynamicFormI {
   category: AlertCategory

package/src/interfaces/inputs/SearchInput.interface.ts

@@ -1,9 +1,9 @@
-import { ChakraProps } from "@chakra-ui/react"
+import { InputProps } from '@chakra-ui/react'
 
-export interface SearchInputI extends ChakraProps {
+export interface SearchInputI extends InputProps {
   maxW?: string
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
   placeholder?: string
   size?: string
   value: string
-}
+}

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

@@ -868,7 +868,7 @@ export const alertFieldsMock: ReportI[] = [
       {
         id: faker.database.mongodbObjectId(),
         name: 'Details',
-        label: 'Model or Serial',
+        label: '',
         description: faker.lorem.sentence(),
         comments: faker.lorem.sentence(),
         value: '',
@@ -908,6 +908,42 @@ export const alertFieldsMock: ReportI[] = [
         value: faker.image.urlPicsumPhotos(),
         type: 'filter-size',
         visible: true,
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            label: '',
+            description: '',
+            comments: '',
+            value:
+              'Home air filters are typically located in the HVAC system’s return air vent, furnace compartment, or air handler, usually near the blower unit or ductwork intake.',
+            type: 'text',
+            visible: true,
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Check the filter:',
+            label: '',
+            description: '',
+            comments: '',
+            icon: 'filter-size',
+            value:
+              'The size of the filter is usually printed on the side of the filter in inches. The size may be written as length x width x depth. For example, a filter that is 16 in long, 20 in wide, and 1 in deep would be written as 16 x 20 x 1. ',
+            type: 'filter-size',
+            visible: true,
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            label: '',
+            description:
+              'or enter your air conditioning/furnace model number below.',
+            comments: '',
+            value: '',
+            type: 'search',
+            visible: true,
+          },
+        ],
       },
     ],
   },