@homefile/components-v2 2.20.0 → 2.21.0

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

@@ -151,6 +151,7 @@ import TreesCrop2 from './trees-crop2.png';
 import VideoIcon from './video-icon.svg';
 import VideoPlay from './video-play.svg';
 import VioletFolder from './violet-folder.svg';
+import Wallet from './wallet.svg';
 import Warning from './warning.svg';
 import Warranty from './warranty.svg';
 import WellDone from './well-done.png';
@@ -162,7 +163,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, 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 { 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, Wallet, 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

@@ -151,6 +151,7 @@ import TreesCrop2 from './trees-crop2.png';
 import VideoIcon from './video-icon.svg';
 import VideoPlay from './video-play.svg';
 import VioletFolder from './violet-folder.svg';
+import Wallet from './wallet.svg';
 import Warning from './warning.svg';
 import Warranty from './warranty.svg';
 import WellDone from './well-done.png';
@@ -162,7 +163,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, 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 { 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, Wallet, 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

@@ -151,6 +151,7 @@ import TreesCrop2 from './trees-crop2.png'
 import VideoIcon from './video-icon.svg'
 import VideoPlay from './video-play.svg'
 import VioletFolder from './violet-folder.svg'
+import Wallet from './wallet.svg'
 import Warning from './warning.svg'
 import Warranty from './warranty.svg'
 import WellDone from './well-done.png'
@@ -317,6 +318,7 @@ export {
   VideoIcon,
   VideoPlay,
   VioletFolder,
+  Wallet,
   Warning,
   Warranty,
   WellDone,

package/dist/assets/images/wallet.svg

@@ -0,0 +1,18 @@
+<svg id="Grupo_22869" data-name="Grupo 22869" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35.199" height="39.708" viewBox="0 0 35.199 39.708">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Retângulo_26646" data-name="Retângulo 26646" width="35.199" height="39.708" transform="translate(0 0)" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Grupo_22868" data-name="Grupo 22868" transform="translate(0 0)" clip-path="url(#clip-path)">
+    <path id="Caminho_18397" data-name="Caminho 18397" d="M0,39.93a2.882,2.882,0,0,0,2.882,2.878h.53V65.725h-.53A2.883,2.883,0,0,1,0,62.844Z" transform="translate(0 -26.017)" fill="#323954"/>
+    <path id="Caminho_18398" data-name="Caminho 18398" d="M76.372,66.9v8.474H67.431a4.237,4.237,0,1,1,0-8.474Zm-6.363,4.237a1.594,1.594,0,1,0-1.6,1.592,1.593,1.593,0,0,0,1.6-1.592" transform="translate(-41.172 -43.589)" fill="#e24c5d"/>
+    <path id="Caminho_18399" data-name="Caminho 18399" d="M75.2,74.49a1.592,1.592,0,1,1-1.592,1.592A1.593,1.593,0,0,1,75.2,74.49" transform="translate(-47.961 -48.535)" fill="#f6cf76"/>
+    <path id="Caminho_18400" data-name="Caminho 18400" d="M35.463,48.19h6.115v6.519H32.637a4.237,4.237,0,1,0,0,8.474h8.941v7.924H9.79V48.19H35.463Z" transform="translate(-6.379 -31.399)" fill="#40566b"/>
+    <path id="Caminho_18401" data-name="Caminho 18401" d="M2.881,31.65A2.883,2.883,0,0,0,0,34.532v0a2.882,2.882,0,0,0,2.882,2.878H7.8L9.39,34.532l1.585-2.882Z" transform="translate(0.001 -20.622)" fill="#e24c5d"/>
+    <path id="Caminho_18402" data-name="Caminho 18402" d="M86.644,31.65l-1.586,2.882L83.47,37.413h6.115V31.65Z" transform="translate(-54.386 -20.622)" fill="#e24c5d"/>
+    <path id="Caminho_18403" data-name="Caminho 18403" d="M33.024,3.388l-8.23,14.948h-2.4l1.589-2.882,1.585-2.882,5.617-10.2Z" transform="translate(-14.588 -1.544)" fill="#00c0b7"/>
+    <path id="Caminho_18404" data-name="Caminho 18404" d="M49.757,13.91l-1.589,2.882h-2.4l4.4-7.99-10.8-5.944L31.691,16.791h-2.4L37.52,1.843,38.534,0,53.022,7.976l-1.679,3.052Z" transform="translate(-19.084 0)" fill="#00a1aa"/>
+    <path id="Caminho_18405" data-name="Caminho 18405" d="M54.65,14.145l-4.4,7.99H36.179L43.852,8.2Z" transform="translate(-23.573 -5.343)" fill="#00c0b7"/>
+  </g>
+</svg>

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

@@ -1,10 +1,10 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Stack, Text } from '@chakra-ui/react';
-import { FilterSize, PurchaseProduct, SearchField, VideoDetail, } from '../../..';
+import { FilterSize, HireInfo, HireService, PurchaseProduct, 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) => {
+    return (_jsx(Stack, { spacing: "1", p: "base", children: fields === null || fields === void 0 ? void 0 : fields.map((field) => {
             const { id, type, value, icon } = field;
             const mappedIcon = icon && fieldIcons[icon];
             switch (type) {
@@ -18,6 +18,10 @@ export const AlertFields = ({ fields, callback }) => {
                     return _createElement(SearchField, Object.assign({}, field, { key: id, callback: callback }));
                 case 'purchase-product':
                     return _createElement(PurchaseProduct, Object.assign({}, field, { key: id, callback: callback }));
+                case 'hire-info':
+                    return _createElement(HireInfo, Object.assign({}, field, { key: id, icon: mappedIcon }));
+                case 'hire-service':
+                    return _createElement(HireService, Object.assign({}, field, { key: id, callback: callback }));
                 default:
                     return null;
             }

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

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

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Image, Text } from '@chakra-ui/react';
+export const HireInfo = ({ name, icon, value }) => {
+    return (_jsxs(Flex, { bg: "lightBlue.2", gap: "base", p: "base", mx: "-base", children: [_jsx(Image, { boxSize: "40px", src: icon, alt: name }), _jsx(Text, { children: value })] }));
+};

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

@@ -0,0 +1,2 @@
+import { FieldTypesI, ReportI } from '../../../../interfaces';
+export declare const HireService: ({ description, name, label, icon, comments, value, callback, children, ...rest }: ReportI & Pick<FieldTypesI, "callback">) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+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 { CustomBadge, Plus, Calendar } from '../../..';
+import { colors } from '../../../../theme/colors';
+import { Box, Container, Flex, IconButton, Image, Text, } from '@chakra-ui/react';
+export const HireService = (_a) => {
+    var { description, name, label, icon, comments, value, callback, children } = _a, rest = __rest(_a, ["description", "name", "label", "icon", "comments", "value", "callback", "children"]);
+    const ctaIcon = {
+        plus: _jsx(Plus, { stroke: colors.blue[3] }),
+        calendar: _jsx(Calendar, { stroke: colors.blue[3] }),
+    };
+    return (_jsxs(Container, { p: "base", position: "relative", boxShadow: "md", children: [_jsx(CustomBadge, { label: label, bg: "#77C100", position: "absolute", top: "2", left: "-1", zIndex: "3" }), _jsxs(Flex, { gap: "base", ml: "10", align: "center", children: [_jsx(Image, { src: icon, alt: name, objectFit: "contain", w: "70px", h: "70px" }), _jsxs(Flex, { align: "end", justify: "space-between", w: "100%", children: [_jsxs(Box, { children: [_jsx(Text, { fontWeight: "semibold", fontSize: "sm", noOfLines: 2, overflow: "hidden", textOverflow: "ellipsis", children: name }), _jsx(Text, { fontSize: "sm", fontFamily: "secondary", lineHeight: "1.2", children: description }), _jsx(Text, { fontSize: "sm", fontFamily: "secondary", lineHeight: "1.2", children: comments }), _jsx(Text, { fontSize: "sm", fontFamily: "secondary", color: "blue.2", lineHeight: "1.2", children: value })] }), _jsx(Flex, { gap: "2", children: children === null || children === void 0 ? void 0 : children.map((child) => {
+                                    const { id, icon, label = '' } = child;
+                                    return (_jsx(IconButton, { w: "2rem", h: "2rem", "aria-label": label, variant: "iconOutlined", icon: ctaIcon[icon] || _jsx(Plus, {}), onClick: () => callback === null || callback === void 0 ? void 0 : callback(Object.assign(Object.assign({}, child), { value: String(child.value) })) }, id));
+                                }) })] })] })] }));
+};

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

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CustomBadge, Plus } from '../../..';
 import { colors } from '../../../../theme/colors';
-import { AspectRatio, Container, Flex, IconButton, Image, Stack, Text, } from '@chakra-ui/react';
+import { Container, Flex, IconButton, Image, Stack, Text, } from '@chakra-ui/react';
 export const PurchaseProduct = (_a) => {
     var _b;
     var { name, label, icon, comments, value, callback } = _a, rest = __rest(_a, ["name", "label", "icon", "comments", "value", "callback"]);
@@ -22,5 +22,5 @@ export const PurchaseProduct = (_a) => {
         good: '#5C81C7',
     };
     const bg = bgs[(_b = label === null || label === void 0 ? void 0 : label.toLowerCase()) !== null && _b !== void 0 ? _b : 'best'];
-    return (_jsxs(Container, { p: "base", position: "relative", boxShadow: "md", children: [_jsx(CustomBadge, { label: label, bg: bg, position: "absolute", top: "2", left: "-1", zIndex: "3" }), _jsxs(Flex, { gap: "base", ml: "6", children: [_jsx(AspectRatio, { ratio: 1, minW: "70px", h: "auto", children: _jsx(Image, { src: icon, alt: name, objectFit: "cover", w: "100%", h: "100%" }) }), _jsxs(Stack, { spacing: "0", children: [_jsx(Text, { fontWeight: "semibold", fontSize: "sm", noOfLines: 2, overflow: "hidden", textOverflow: "ellipsis", children: name }), _jsxs(Flex, { alignSelf: "end", gap: "base", align: "center", children: [_jsxs(Stack, { spacing: "0", align: "end", children: [_jsx(Text, { fontSize: "xs", fontFamily: "secondary", color: "red", children: comments }), _jsx(Text, { fontSize: "sm", fontWeight: "bold", lineHeight: "1.2", children: value })] }), _jsx(IconButton, { w: "2rem", h: "2rem", "aria-label": "Add product", variant: "iconOutlined", icon: _jsx(Plus, { size: 20, stroke: colors.blue['3'] }), onClick: () => callback === null || callback === void 0 ? void 0 : callback(Object.assign({ name, icon, value: String(value) }, rest)) })] })] })] })] }));
+    return (_jsxs(Container, { p: "base", position: "relative", boxShadow: "md", children: [_jsx(CustomBadge, { label: label, bg: bg, position: "absolute", top: "2", left: "-1", zIndex: "3" }), _jsxs(Flex, { gap: "base", ml: "6", children: [_jsx(Image, { src: icon, alt: name, objectFit: "contain", w: "70px", h: "70px" }), _jsxs(Stack, { spacing: "0", children: [_jsx(Text, { fontWeight: "semibold", fontSize: "sm", noOfLines: 2, overflow: "hidden", textOverflow: "ellipsis", children: name }), _jsxs(Flex, { alignSelf: "end", gap: "base", align: "end", children: [_jsxs(Stack, { spacing: "0", align: "end", children: [_jsx(Text, { fontSize: "xs", fontFamily: "secondary", color: "red", children: comments }), _jsx(Text, { fontSize: "sm", fontWeight: "bold", lineHeight: "1.2", children: value })] }), _jsx(IconButton, { w: "2rem", h: "2rem", "aria-label": "Add product", variant: "iconOutlined", icon: _jsx(Plus, { size: 20, stroke: colors.blue['3'] }), onClick: () => callback === null || callback === void 0 ? void 0 : callback(Object.assign({ name, icon, value: String(value) }, rest)) })] })] })] })] }));
 };

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

@@ -2,6 +2,8 @@ export * from './AlertFields';
 export * from './ChangeAirFilter';
 export * from './CustomDivider';
 export * from './FilterSize';
+export * from './HireInfo';
+export * from './HireService';
 export * from './PurchaseProduct';
 export * from './SearchField';
 export * from './SmokeDetectorBattery';

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

@@ -2,6 +2,8 @@ export * from './AlertFields';
 export * from './ChangeAirFilter';
 export * from './CustomDivider';
 export * from './FilterSize';
+export * from './HireInfo';
+export * from './HireService';
 export * from './PurchaseProduct';
 export * from './SearchField';
 export * from './SmokeDetectorBattery';

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, FilterSize, } 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, Wallet, } from '../../assets/images';
 export const fieldIcons = {
     barcode: Barcode,
     billing: Billing,
@@ -46,6 +46,7 @@ export const fieldIcons = {
     target: Target,
     title: CircleFace,
     company: Company2,
+    wallet: Wallet,
     'sh-gutter': GutterCleaning,
     'sh-home': HomeCleaning,
     'sh-house': HouseWashing,

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WeatherWidget, WellDone, YtdTile, } from './components';
+export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BackendAlert, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WeatherWidget, WellDone, YtdTile, } from './components';
 export { useCustomToast } from './hooks';
 export { randomColor, mapApiObjectToFormFields, mapForecastToWidget, } from './utils';
 export { Contacts, MagnifyingGlassReport, Message, Register, Receipts, Price, BlueFolderShared, Calendar, Create, Notes, } from './assets/images';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WeatherWidget, WellDone, YtdTile, } from './components';
+export { ActivateAccount, ActiveSubscription, AddCardBanner, AddEditContactPanel, AddFolder, AddHomeContent, AddHomeItem, AddHomeItemHeader, AddMedia, AddPropertyRecords, Address, AddPopup, AddTile, AddToHomefile, AlertBanner, AphwTile, AppBar, AssignableReceipts, BackHeader, BackendAlert, BarDivider, CancelAccount, CatalogPopup, CloudsAnimation, ContactList, ContactsContent, ContainerHeader, CreateDocumentHeader, CreateHouseholdItemHeader, CreditCardContainer, CreditCardError, CustomerTile, DeleteBanner, Dialog, DisplayFiles, DisplayFilesDetail, DisplayOptions, DisplayReceipts, DocumentMenu, DocumentNameHeader, DocumentPreview, DynamicForm, EditAccountType, EditHomeBody, EditHomeFooter, EditHomeHeader, EditHomePanel, EmailPermissions, EmailValidation, Feedback, FileDetail, FilesUploader, FlowStep, FolderDetail, FolderDetailBody, FolderDetailContent, FolderDetailFooter, FolderDetailHeader, FolderInfo, FolderSharing, FolderTypeSelection, FooterButtons, FooterDrawer, GenericBackHeader, GroupCard, GroupsContainer, GroupsHeader, Header, HelpContent, HomeAssistant, HomeAssistantPanel, HomeBoardGrid, HomeBoardTour, HomeCard, HomeCardWithRecipent, HomeDetailsContent, HomefileMonitoring, HomeHeader, HomeMonitor, HomeMonitorSteps, HomeSharedWith, InboxForwardBanner, InboxTile, ItemFormPanel, ItemFormTabs, ItemNameHeader, ItemsReviewBanner, ItemSubTypeSelect, Launchpad, LaunchpadAutofilerBanner, LaunchpadReceiptAutofiler, LaunchpadReceiptPanel, LaunchpadTour, LeftPanel, Loading, MediaDetailsStep, MessagePanel, MessageChatPanel, MonitorAlerts, MonthlyCharge, MortgageInfo, MoveModal, MyHomes, MyProfileBody, MyProfileContent, MyProfileFooter, MyProfileHeader, MyProfilePanel, NewCreditCard, NewCreditCardHeader, NewPassword, NotBeChargedBanner, Notifications, NotificationsReminder, NotificationsPanel, NotificationCard, Overlay, PanelHeader, PartnerActiveSubscription, PartnerCatalogPanel, PartnerContent, PartnerCustomerCode, PartnerDetails, PartnerImages, PartnerPanel, PasswordInput, PaymentReceipts, PdfButton, PeopleConnected, ProfileDetailsTab, ProfilePaymentTab, ProjectList, PropertyRecords, PropertyTaxes, ReadOnlyDynamicForm, ReadOnlyImage, ReadOnlyToggle, ReceiptAutofiler, ReceiptBody, ReceiptContent, ReceiptDetails, ReceiptFilters, ReceiptFooter, ReceiptHeader, ReceiptInfos, ReceiptItem, ReceiptItems, ReceiptPDF, ReceiptsDisplayOptions, ReceiptsFiled, ReceiptsHeader, ReceiptsInfo, ReceiptsReceivedContent, RecipientForm, RecipientsToShare, RecipientTab, RecordsInputs, ResendResetPassword, ResetPassword, ReviewBanner, RightPanel, RolePermissionsTab, RoomHeader, RoomsBoardTour, RoomsMenu, RoomsMenuMobile, RoomStep, RoomVideo, SalesTax, SatisfactionTile, SectionHeader, SendCommunication, ShareContactsContent, SharedAccounts, SharedHomeContent, SharedHomeHeader, ShareHome, ShareHomeConnections, ShareHomeForm, ShineTile, ShortPartnerTile, SignIn, SignUp, SkeletonBox, StepHeader, StorageUsed, Subscription, SubscriptionCard, SubscriptionTable, Summary, TabsHeader, TextInput, ToBeDeletedBody, ToBeDeletedContent, ToBeDeletedFooter, ToBeDeletedHeader, TourButton, Trash, TrendingValue, TrialBanner, TutorialsButton, TwoFactor, TwoFactorSetting, UpdateList, UserDetails, ValueMonitor, ViewContactPanel, VideoPlayer, VideoPlayerModal, WeatherWidget, WellDone, YtdTile, } from './components';
 export { useCustomToast } from './hooks';
 export { randomColor, mapApiObjectToFormFields, mapForecastToWidget, } from './utils';
 export { Contacts, MagnifyingGlassReport, Message, Register, Receipts, Price, BlueFolderShared, Calendar, Create, Notes, } from './assets/images';

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

@@ -2,7 +2,7 @@ import { AIGridFieldI, AlertFieldType, AlertTabType, FolderFileI, MenuItemI, Par
 export type KindTypes = 'ai-image' | 'ai-grid' | 'checkbox' | 'checkbox-agreement' | 'checkbox-group' | 'currency' | 'date' | 'email' | 'file' | 'grid' | 'group' | 'hidden' | 'notes' | 'number' | 'radio' | 'rating' | 'select' | 'string' | 'switch' | 'telephone' | 'text' | 'textarea' | 'default' | 'video' | UIKindTypes | HomeItemTypes | AlertTabType | AlertFieldType;
 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 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' | 'wallet' | 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' | 'filter-size' | string;
 export type ValueTypes = string | string[] | number | boolean;
 export type OptionsTypes = string[] | number[] | null;

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' | 'search' | 'purchase-product';
+export type AlertFieldType = 'alert' | 'search' | 'purchase-product' | 'hire-info' | 'hire-service' | 'hire-service-cta';
 export interface BackendAlertI extends DynamicFormI {
     category: AlertCategory;
 }

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

@@ -979,7 +979,124 @@ export const alertFieldsMock = [
                 value: faker.image.urlPicsumPhotos(),
                 type: 'hire-out',
                 visible: true,
-                children: [],
+                children: [
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: '',
+                        label: '',
+                        description: '',
+                        icon: 'wallet',
+                        comments: '',
+                        value: 'Average cost for this service range from $100-125 in your area, including filter.',
+                        type: 'hire-info',
+                        visible: true,
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'Bobs Heating & Cooling',
+                        label: 'match',
+                        description: 'Jerry Marks',
+                        icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlUXEpc3FdoRVmQoYvmAttMwG2dzvBz49oGg&s',
+                        comments: '512-650-3030',
+                        value: 'JerryM@BobsHTC.com',
+                        type: 'hire-service',
+                        visible: true,
+                        children: [
+                            {
+                                id: faker.database.mongodbObjectId(),
+                                name: 'Bobs Heating & Cooling - add service',
+                                label: '',
+                                description: '',
+                                icon: 'plus',
+                                comments: '',
+                                value: '',
+                                type: 'hire-service-cta',
+                                visible: true,
+                            },
+                            {
+                                id: faker.database.mongodbObjectId(),
+                                name: 'Bobs Heating & Cooling - schedule service',
+                                label: '',
+                                description: '',
+                                icon: 'calendar',
+                                comments: '',
+                                value: '',
+                                type: 'hire-service-cta',
+                                visible: true,
+                            },
+                        ],
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'Sears Home Services',
+                        label: 'match',
+                        description: 'Mark Jones',
+                        icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJU3pPD1SFxFnAuaOkoHR36lcVNmoP39USqA&s',
+                        comments: '512-354-6584',
+                        value: 'MarkJones@searssvc.com',
+                        type: 'hire-service',
+                        visible: true,
+                        children: [
+                            {
+                                id: faker.database.mongodbObjectId(),
+                                name: 'Sears Home Services - add service',
+                                label: '',
+                                description: '',
+                                icon: 'plus',
+                                comments: '',
+                                value: '',
+                                type: 'hire-service-cta',
+                                visible: true,
+                            },
+                            {
+                                id: faker.database.mongodbObjectId(),
+                                name: 'Sears Home Services - schedule service',
+                                label: '',
+                                description: '',
+                                icon: 'calendar',
+                                comments: '',
+                                value: '',
+                                type: 'hire-service-cta',
+                                visible: true,
+                            },
+                        ],
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'Airco Mechanical',
+                        label: 'match',
+                        description: 'Chris Rodriquez',
+                        icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWZ_hk6-7mpzQG2ZSQTu0XV2FiMF4AYkT4Wg&s',
+                        comments: '512-888-5454',
+                        value: 'ChrisR@airco.com',
+                        type: 'hire-service',
+                        visible: true,
+                        children: [
+                            {
+                                id: faker.database.mongodbObjectId(),
+                                name: 'Airco Mechanical - add service',
+                                label: '',
+                                description: '',
+                                icon: 'plus',
+                                comments: '',
+                                value: '',
+                                type: 'hire-service-cta',
+                                visible: true,
+                            },
+                            {
+                                id: faker.database.mongodbObjectId(),
+                                name: 'Airco Mechanical - schedule service',
+                                label: '',
+                                description: '',
+                                icon: 'calendar',
+                                comments: '',
+                                value: '',
+                                type: 'hire-service-cta',
+                                visible: true,
+                            },
+                        ],
+                    },
+                ],
             },
         ],
     },

package/dist/stories/assets/Illustrations.stories.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Center, Grid, Image, Text } from '@chakra-ui/react';
-import { AlertDelete, AlertDeletePurple, Arrow, Balustrades, Barcode, Batery, Bathroom, Battery, Battery2, Bedding, Bedroom, Billing, BillingAddress, BlueFolder, BlueFolderShared, Book, Box as BoxIcon, Building, Calc, Calendar, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Cookware, Countertops, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Doors, Drop, DropCalendar, Electricity, Electronics, Entryway, EstValue, Equipment, Exclamation, Exterior, Face, Feedback, FileUploading, Finance, Fire, Flag, Flooring, FormSent, Foundation, Furniture, Garage, GearPencil, GearTime, GenericField, GlassWater, GoldenBars, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Hardware, Heart, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, LargeAppliances, Laundry, Light, Lighting, LivingRoom, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Mattress, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Notes, Office, Paint, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plants, Plate, Play, Plus, Pool, Pool2, PressureWasher, Porch, Price, Profile, ProgressReport, Proposal, Rating, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, Registry, RelationshipHome, ResendPassword, Rocket, Roof, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SmallAppliances, SolarPanel, Speaker, Sprinkler, Steps, Structure, Structures, Subscription, Supplies, Table, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Tile, Tools, Tools2, Trash, Utensils, VideoIcon, VideoPlay, VioletFolder, WallDecor, Warning, Warranty, Water, WellDone, WholeHome, Wind, Window, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, BookOpened, Company2, } from '../../assets/images';
+import { AlertDelete, AlertDeletePurple, Arrow, Balustrades, Barcode, Batery, Bathroom, Battery, Battery2, Bedding, Bedroom, Billing, BillingAddress, BlueFolder, BlueFolderShared, Book, Box as BoxIcon, Building, Calc, Calendar, Calendar2, Catalog, Check, CheckInCircle, CheckPen, Chemistry, CircleFace, Cleaning, Closet, Co2, Company, ComputerReport, Confirmation, Construction, Contacts, Contacts2, Contributor, Cookware, Countertops, CreditCard, Detector, Diamond, DiningRoom, DocIcon, Document, Document2, Doors, Drop, DropCalendar, Electricity, Electronics, Entryway, EstValue, Equipment, Exclamation, Exterior, Face, Feedback, FileUploading, Finance, Fire, Flag, Flooring, FormSent, Foundation, Furniture, Garage, GearPencil, GearTime, GenericField, GlassWater, GoldenBars, GreenFolder, Group, Groups, GuestBedroom, Hallway, HandPencil, Hardware, Heart, Heater, Help, HomeAddress, Homeowner, House, HouseHands, IA, ImageDefault, ImgIcon, Inbox, Insect, Kitchen, LargeAppliances, Laundry, Light, Lighting, LivingRoom, LogoSmall, MagnifyingGlassReport, Manager, MasterBedroom, Mattress, Member, Message, MobileDrop, Money, Mudroom, NeedHelp, Notes, Office, Paint, Painting, PartnerGeneric, Patio, PdfIcon, PersonMail, Plants, Plate, Play, Plus, Pool, Pool2, PressureWasher, Porch, Price, Profile, ProgressReport, Proposal, Rating, RealEstate, Receipt, ReceiptBg, ReceiptHouse, Receipts, Recipient, Records, Register, Registry, RelationshipHome, ResendPassword, Rocket, Roof, Roof2, Security, Send, ShareHome, ShareWith, SixtyEight, SMS, Social, SmallAppliances, SolarPanel, Speaker, Sprinkler, Steps, Structure, Structures, Subscription, Supplies, Table, Target, Temperature, Theatre, Thumbnail, ThumbnailSmall, ThumbUp, Tile, Tools, Tools2, Trash, Utensils, VideoIcon, VideoPlay, VioletFolder, WallDecor, Wallet, Warning, Warranty, Water, WellDone, WholeHome, Wind, Window, Wizard, WizardDetailed, WizardQuick, YellowFolder, YellowFolderUnshared, BookOpened, Company2, } from '../../assets/images';
 import { CookTop, Dishwasher, Dryer, Freezer, Fridge, Microwave, Oven, Range, Washer, } from '../../assets/images/appliances';
 export default {
     title: 'Assets/Illustrations',
 };
 export const Illustrations = () => {
-    return (_jsxs(Grid, { maxW: "600px", templateColumns: "repeat(auto-fill, minmax(75px, 1fr))", p: "base", gap: "8", children: [_jsx(IconWrapper, { icon: CookTop, name: "CookTop" }), _jsx(IconWrapper, { icon: Dishwasher, name: "Dishwasher" }), _jsx(IconWrapper, { icon: Dryer, name: "Dryer" }), _jsx(IconWrapper, { icon: Freezer, name: "Freezer" }), _jsx(IconWrapper, { icon: Fridge, name: "Fridge" }), _jsx(IconWrapper, { icon: Microwave, name: "Microwave" }), _jsx(IconWrapper, { icon: Oven, name: "Oven" }), _jsx(IconWrapper, { icon: Range, name: "Range" }), _jsx(IconWrapper, { icon: Washer, name: "Washer" }), _jsx(IconWrapper, { icon: Barcode, name: "Barcode" }), _jsx(IconWrapper, { icon: Book, name: "Book" }), _jsx(IconWrapper, { icon: Calendar, name: "Calendar" }), _jsx(IconWrapper, { icon: GoldenBars, name: "GoldenBars" }), _jsx(IconWrapper, { icon: Heart, name: "Heart" }), _jsx(IconWrapper, { icon: Notes, name: "Notes" }), _jsx(IconWrapper, { icon: Rating, name: "Rating" }), _jsx(IconWrapper, { icon: Registry, name: "Registry" }), _jsx(IconWrapper, { icon: Tools2, name: "Tools2" }), _jsx(IconWrapper, { icon: Balustrades, name: "Balustrades" }), _jsx(IconWrapper, { icon: Bedding, name: "Bedding" }), _jsx(IconWrapper, { icon: Cookware, name: "Cookware" }), _jsx(IconWrapper, { icon: Countertops, name: "Countertops" }), _jsx(IconWrapper, { icon: Doors, name: "Doors" }), _jsx(IconWrapper, { icon: Electronics, name: "Electronics" }), _jsx(IconWrapper, { icon: Equipment, name: "Equipment" }), _jsx(IconWrapper, { icon: Exterior, name: "Exterior" }), _jsx(IconWrapper, { icon: Fire, name: "Fire" }), _jsx(IconWrapper, { icon: Flooring, name: "Flooring" }), _jsx(IconWrapper, { icon: Furniture, name: "Furniture" }), _jsx(IconWrapper, { icon: Hardware, name: "Hardware" }), _jsx(IconWrapper, { icon: LargeAppliances, name: "LargeAppliances" }), _jsx(IconWrapper, { icon: Lighting, name: "Lighting" }), _jsx(IconWrapper, { icon: Mattress, name: "Mattress" }), _jsx(IconWrapper, { icon: Paint, name: "Paint" }), _jsx(IconWrapper, { icon: Plants, name: "Plants" }), _jsx(IconWrapper, { icon: Porch, name: "Porch" }), _jsx(IconWrapper, { icon: Roof, name: "Roof" }), _jsx(IconWrapper, { icon: SmallAppliances, name: "SmallAppliances" }), _jsx(IconWrapper, { icon: Steps, name: "Steps" }), _jsx(IconWrapper, { icon: Structures, name: "Structures" }), _jsx(IconWrapper, { icon: Supplies, name: "Supplies" }), _jsx(IconWrapper, { icon: Table, name: "Table" }), _jsx(IconWrapper, { icon: Temperature, name: "Temperature" }), _jsx(IconWrapper, { icon: Tile, name: "Tile" }), _jsx(IconWrapper, { icon: Tools, name: "Tools" }), _jsx(IconWrapper, { icon: Utensils, name: "Utensils" }), _jsx(IconWrapper, { icon: WallDecor, name: "WallDecor" }), _jsx(IconWrapper, { icon: Water, name: "Water" }), _jsx(IconWrapper, { icon: Window, name: "Window" }), _jsx(IconWrapper, { icon: AlertDelete, name: "AlertDelete" }), _jsx(IconWrapper, { icon: AlertDeletePurple, name: "AlertDeletePurple" }), _jsx(IconWrapper, { icon: Arrow, name: "Arrow" }), _jsx(IconWrapper, { icon: Batery, name: "Batery" }), _jsx(IconWrapper, { icon: Bathroom, name: "Bathroom" }), _jsx(IconWrapper, { icon: Battery, name: "Battery" }), _jsx(IconWrapper, { icon: Battery2, name: "Battery2" }), _jsx(IconWrapper, { icon: Bedroom, name: "Bedroom" }), _jsx(IconWrapper, { icon: Billing, name: "Billing" }), _jsx(IconWrapper, { icon: BillingAddress, name: "BillingAddress" }), _jsx(IconWrapper, { icon: BlueFolder, name: "BlueFolder" }), _jsx(IconWrapper, { icon: BlueFolderShared, name: "BlueFolderShared" }), _jsx(IconWrapper, { icon: BookOpened, name: "BookOpened" }), _jsx(IconWrapper, { icon: BoxIcon, name: "Box" }), _jsx(IconWrapper, { icon: Building, name: "Building" }), _jsx(IconWrapper, { icon: Calc, name: "Calc" }), _jsx(IconWrapper, { icon: Calendar2, name: "Calendar2" }), _jsx(IconWrapper, { icon: Catalog, name: "Catalog" }), _jsx(IconWrapper, { icon: Check, name: "Check" }), _jsx(IconWrapper, { icon: CheckInCircle, name: "CheckInCircle" }), _jsx(IconWrapper, { icon: CheckPen, name: "CheckPen" }), _jsx(IconWrapper, { icon: Chemistry, name: "Chemistry" }), _jsx(IconWrapper, { icon: CircleFace, name: "CircleFace" }), _jsx(IconWrapper, { icon: Cleaning, name: "Cleaning" }), _jsx(IconWrapper, { icon: Closet, name: "Closet" }), _jsx(IconWrapper, { icon: Co2, name: "Co2" }), _jsx(IconWrapper, { icon: Company, name: "Company" }), _jsx(IconWrapper, { icon: Company2, name: "Company2" }), _jsx(IconWrapper, { icon: ComputerReport, name: "ComputerReport" }), _jsx(IconWrapper, { icon: Confirmation, name: "Confirmation" }), _jsx(IconWrapper, { icon: Construction, name: "Construction" }), _jsx(IconWrapper, { icon: Contacts, name: "Contacts" }), _jsx(IconWrapper, { icon: Contacts2, name: "Contacts2" }), _jsx(IconWrapper, { icon: Contributor, name: "Contributor" }), _jsx(IconWrapper, { icon: CreditCard, name: "CreditCard" }), _jsx(IconWrapper, { icon: Detector, name: "Detector" }), _jsx(IconWrapper, { icon: Diamond, name: "Diamond" }), _jsx(IconWrapper, { icon: DiningRoom, name: "DiningRoom" }), _jsx(IconWrapper, { icon: DocIcon, name: "DocIcon" }), _jsx(IconWrapper, { icon: Document, name: "Document" }), _jsx(IconWrapper, { icon: Document2, name: "Document2" }), _jsx(IconWrapper, { icon: Drop, name: "Drop" }), _jsx(IconWrapper, { icon: DropCalendar, name: "DropCalendar" }), _jsx(IconWrapper, { icon: Electricity, name: "Electricity" }), _jsx(IconWrapper, { icon: Entryway, name: "Entryway" }), _jsx(IconWrapper, { icon: EstValue, name: "EstValue" }), _jsx(IconWrapper, { icon: Exclamation, name: "Exclamation" }), _jsx(IconWrapper, { icon: Face, name: "Face" }), _jsx(IconWrapper, { icon: Feedback, name: "Feedback" }), _jsx(IconWrapper, { icon: FileUploading, name: "FileUploading" }), _jsx(IconWrapper, { icon: Finance, name: "Finance" }), _jsx(IconWrapper, { icon: Flag, name: "Flag" }), _jsx(IconWrapper, { icon: FormSent, name: "FormSent" }), _jsx(IconWrapper, { icon: Foundation, name: "Foundation" }), _jsx(IconWrapper, { icon: Garage, name: "Garage" }), _jsx(IconWrapper, { icon: GearPencil, name: "GearPencil" }), _jsx(IconWrapper, { icon: GearTime, name: "GearTime" }), _jsx(IconWrapper, { icon: GenericField, name: "GenericField" }), _jsx(IconWrapper, { icon: GlassWater, name: "GlassWater" }), _jsx(IconWrapper, { icon: GreenFolder, name: "GreenFolder" }), _jsx(IconWrapper, { icon: Group, name: "Group" }), _jsx(IconWrapper, { icon: Groups, name: "Groups" }), _jsx(IconWrapper, { icon: GuestBedroom, name: "GuestBedroom" }), _jsx(IconWrapper, { icon: Hallway, name: "Hallway" }), _jsx(IconWrapper, { icon: HandPencil, name: "HandPencil" }), _jsx(IconWrapper, { icon: Heater, name: "Heater" }), _jsx(IconWrapper, { icon: Help, name: "Help" }), _jsx(IconWrapper, { icon: HomeAddress, name: "HomeAddress" }), _jsx(IconWrapper, { icon: Homeowner, name: "Homeowner" }), _jsx(IconWrapper, { icon: House, name: "House" }), _jsx(IconWrapper, { icon: HouseHands, name: "HouseHands" }), _jsx(IconWrapper, { icon: IA, name: "IA" }), _jsx(IconWrapper, { icon: ImageDefault, name: "ImageDefault" }), _jsx(IconWrapper, { icon: ImgIcon, name: "ImgIcon" }), _jsx(IconWrapper, { icon: Inbox, name: "Inbox" }), _jsx(IconWrapper, { icon: Insect, name: "Insect" }), _jsx(IconWrapper, { icon: Kitchen, name: "Kitchen" }), _jsx(IconWrapper, { icon: Laundry, name: "Laundry" }), _jsx(IconWrapper, { icon: Light, name: "Light" }), _jsx(IconWrapper, { icon: LivingRoom, name: "LivingRoom" }), _jsx(IconWrapper, { icon: LogoSmall, name: "LogoSmall" }), _jsx(IconWrapper, { icon: MagnifyingGlassReport, name: "MagnifyingGlassReport" }), _jsx(IconWrapper, { icon: Manager, name: "Manager" }), _jsx(IconWrapper, { icon: MasterBedroom, name: "MasterBedroom" }), _jsx(IconWrapper, { icon: Member, name: "Member" }), _jsx(IconWrapper, { icon: Message, name: "Message" }), _jsx(IconWrapper, { icon: MobileDrop, name: "MobileDrop" }), _jsx(IconWrapper, { icon: Money, name: "Money" }), _jsx(IconWrapper, { icon: Mudroom, name: "Mudroom" }), _jsx(IconWrapper, { icon: NeedHelp, name: "NeedHelp" }), _jsx(IconWrapper, { icon: Office, name: "Office" }), _jsx(IconWrapper, { icon: Painting, name: "Painting" }), _jsx(IconWrapper, { icon: PartnerGeneric, name: "PartnerGeneric" }), _jsx(IconWrapper, { icon: Patio, name: "Patio" }), _jsx(IconWrapper, { icon: PdfIcon, name: "PdfIcon" }), _jsx(IconWrapper, { icon: PersonMail, name: "PersonMail" }), _jsx(IconWrapper, { icon: Plate, name: "Plate" }), _jsx(IconWrapper, { icon: Play, name: "Play" }), _jsx(IconWrapper, { icon: Plus, name: "Plus" }), _jsx(IconWrapper, { icon: Pool, name: "Pool" }), _jsx(IconWrapper, { icon: Pool2, name: "Pool2" }), _jsx(IconWrapper, { icon: PressureWasher, name: "PressureWasher" }), _jsx(IconWrapper, { icon: Price, name: "Price" }), _jsx(IconWrapper, { icon: Profile, name: "Profile" }), _jsx(IconWrapper, { icon: ProgressReport, name: "ProgressReport" }), _jsx(IconWrapper, { icon: Proposal, name: "Proposal" }), _jsx(IconWrapper, { icon: RealEstate, name: "RealEstate" }), _jsx(IconWrapper, { icon: Receipt, name: "Receipt" }), _jsx(IconWrapper, { icon: ReceiptBg, name: "ReceiptBg" }), _jsx(IconWrapper, { icon: ReceiptHouse, name: "ReceiptHouse" }), _jsx(IconWrapper, { icon: Receipts, name: "Receipts" }), _jsx(IconWrapper, { icon: Recipient, name: "Recipient" }), _jsx(IconWrapper, { icon: Records, name: "Records" }), _jsx(IconWrapper, { icon: Register, name: "Register" }), _jsx(IconWrapper, { icon: RelationshipHome, name: "RelationshipHome" }), _jsx(IconWrapper, { icon: ResendPassword, name: "ResendPassword" }), _jsx(IconWrapper, { icon: Rocket, name: "Rocket" }), _jsx(IconWrapper, { icon: Roof2, name: "Roof2" }), _jsx(IconWrapper, { icon: Security, name: "Security" }), _jsx(IconWrapper, { icon: Send, name: "Send" }), _jsx(IconWrapper, { icon: ShareHome, name: "ShareHome" }), _jsx(IconWrapper, { icon: ShareWith, name: "ShareWith" }), _jsx(IconWrapper, { icon: SixtyEight, name: "SixtyEight" }), _jsx(IconWrapper, { icon: SMS, name: "SMS" }), _jsx(IconWrapper, { icon: Social, name: "Social" }), _jsx(IconWrapper, { icon: SolarPanel, name: "SolarPanel" }), _jsx(IconWrapper, { icon: Speaker, name: "Speaker" }), _jsx(IconWrapper, { icon: Sprinkler, name: "Sprinkler" }), _jsx(IconWrapper, { icon: Structure, name: "Structure" }), _jsx(IconWrapper, { icon: Subscription, name: "Subscription" }), _jsx(IconWrapper, { icon: Target, name: "Target" }), _jsx(IconWrapper, { icon: Theatre, name: "Theatre" }), _jsx(IconWrapper, { icon: Thumbnail, name: "Thumbnail" }), _jsx(IconWrapper, { icon: ThumbnailSmall, name: "ThumbnailSmall" }), _jsx(IconWrapper, { icon: ThumbUp, name: "ThumbUp" }), _jsx(IconWrapper, { icon: Trash, name: "Trash" }), _jsx(IconWrapper, { icon: VideoIcon, name: "VideoIcon" }), _jsx(IconWrapper, { icon: VideoPlay, name: "VideoPlay" }), _jsx(IconWrapper, { icon: VioletFolder, name: "VioletFolder" }), _jsx(IconWrapper, { icon: Warning, name: "Warning" }), _jsx(IconWrapper, { icon: Warranty, name: "Warranty" }), _jsx(IconWrapper, { icon: WellDone, name: "WellDone" }), _jsx(IconWrapper, { icon: WholeHome, name: "WholeHome" }), _jsx(IconWrapper, { icon: Wind, name: "Wind" }), _jsx(IconWrapper, { icon: Wizard, name: "Wizard" }), _jsx(IconWrapper, { icon: WizardDetailed, name: "WizardDetailed" }), _jsx(IconWrapper, { icon: WizardQuick, name: "WizardQuick" }), _jsx(IconWrapper, { icon: YellowFolder, name: "YellowFolder" }), _jsx(IconWrapper, { icon: YellowFolderUnshared, name: "YellowFolderUnshared" })] }));
+    return (_jsxs(Grid, { maxW: "600px", templateColumns: "repeat(auto-fill, minmax(75px, 1fr))", p: "base", gap: "8", children: [_jsx(IconWrapper, { icon: CookTop, name: "CookTop" }), _jsx(IconWrapper, { icon: Dishwasher, name: "Dishwasher" }), _jsx(IconWrapper, { icon: Dryer, name: "Dryer" }), _jsx(IconWrapper, { icon: Freezer, name: "Freezer" }), _jsx(IconWrapper, { icon: Fridge, name: "Fridge" }), _jsx(IconWrapper, { icon: Microwave, name: "Microwave" }), _jsx(IconWrapper, { icon: Oven, name: "Oven" }), _jsx(IconWrapper, { icon: Range, name: "Range" }), _jsx(IconWrapper, { icon: Washer, name: "Washer" }), _jsx(IconWrapper, { icon: Barcode, name: "Barcode" }), _jsx(IconWrapper, { icon: Book, name: "Book" }), _jsx(IconWrapper, { icon: Calendar, name: "Calendar" }), _jsx(IconWrapper, { icon: GoldenBars, name: "GoldenBars" }), _jsx(IconWrapper, { icon: Heart, name: "Heart" }), _jsx(IconWrapper, { icon: Notes, name: "Notes" }), _jsx(IconWrapper, { icon: Rating, name: "Rating" }), _jsx(IconWrapper, { icon: Registry, name: "Registry" }), _jsx(IconWrapper, { icon: Tools2, name: "Tools2" }), _jsx(IconWrapper, { icon: Balustrades, name: "Balustrades" }), _jsx(IconWrapper, { icon: Bedding, name: "Bedding" }), _jsx(IconWrapper, { icon: Cookware, name: "Cookware" }), _jsx(IconWrapper, { icon: Countertops, name: "Countertops" }), _jsx(IconWrapper, { icon: Doors, name: "Doors" }), _jsx(IconWrapper, { icon: Electronics, name: "Electronics" }), _jsx(IconWrapper, { icon: Equipment, name: "Equipment" }), _jsx(IconWrapper, { icon: Exterior, name: "Exterior" }), _jsx(IconWrapper, { icon: Fire, name: "Fire" }), _jsx(IconWrapper, { icon: Flooring, name: "Flooring" }), _jsx(IconWrapper, { icon: Furniture, name: "Furniture" }), _jsx(IconWrapper, { icon: Hardware, name: "Hardware" }), _jsx(IconWrapper, { icon: LargeAppliances, name: "LargeAppliances" }), _jsx(IconWrapper, { icon: Lighting, name: "Lighting" }), _jsx(IconWrapper, { icon: Mattress, name: "Mattress" }), _jsx(IconWrapper, { icon: Paint, name: "Paint" }), _jsx(IconWrapper, { icon: Plants, name: "Plants" }), _jsx(IconWrapper, { icon: Porch, name: "Porch" }), _jsx(IconWrapper, { icon: Roof, name: "Roof" }), _jsx(IconWrapper, { icon: SmallAppliances, name: "SmallAppliances" }), _jsx(IconWrapper, { icon: Steps, name: "Steps" }), _jsx(IconWrapper, { icon: Structures, name: "Structures" }), _jsx(IconWrapper, { icon: Supplies, name: "Supplies" }), _jsx(IconWrapper, { icon: Table, name: "Table" }), _jsx(IconWrapper, { icon: Temperature, name: "Temperature" }), _jsx(IconWrapper, { icon: Tile, name: "Tile" }), _jsx(IconWrapper, { icon: Tools, name: "Tools" }), _jsx(IconWrapper, { icon: Utensils, name: "Utensils" }), _jsx(IconWrapper, { icon: WallDecor, name: "WallDecor" }), _jsx(IconWrapper, { icon: Water, name: "Water" }), _jsx(IconWrapper, { icon: Window, name: "Window" }), _jsx(IconWrapper, { icon: AlertDelete, name: "AlertDelete" }), _jsx(IconWrapper, { icon: AlertDeletePurple, name: "AlertDeletePurple" }), _jsx(IconWrapper, { icon: Arrow, name: "Arrow" }), _jsx(IconWrapper, { icon: Batery, name: "Batery" }), _jsx(IconWrapper, { icon: Bathroom, name: "Bathroom" }), _jsx(IconWrapper, { icon: Battery, name: "Battery" }), _jsx(IconWrapper, { icon: Battery2, name: "Battery2" }), _jsx(IconWrapper, { icon: Bedroom, name: "Bedroom" }), _jsx(IconWrapper, { icon: Billing, name: "Billing" }), _jsx(IconWrapper, { icon: BillingAddress, name: "BillingAddress" }), _jsx(IconWrapper, { icon: BlueFolder, name: "BlueFolder" }), _jsx(IconWrapper, { icon: BlueFolderShared, name: "BlueFolderShared" }), _jsx(IconWrapper, { icon: BookOpened, name: "BookOpened" }), _jsx(IconWrapper, { icon: BoxIcon, name: "Box" }), _jsx(IconWrapper, { icon: Building, name: "Building" }), _jsx(IconWrapper, { icon: Calc, name: "Calc" }), _jsx(IconWrapper, { icon: Calendar2, name: "Calendar2" }), _jsx(IconWrapper, { icon: Catalog, name: "Catalog" }), _jsx(IconWrapper, { icon: Check, name: "Check" }), _jsx(IconWrapper, { icon: CheckInCircle, name: "CheckInCircle" }), _jsx(IconWrapper, { icon: CheckPen, name: "CheckPen" }), _jsx(IconWrapper, { icon: Chemistry, name: "Chemistry" }), _jsx(IconWrapper, { icon: CircleFace, name: "CircleFace" }), _jsx(IconWrapper, { icon: Cleaning, name: "Cleaning" }), _jsx(IconWrapper, { icon: Closet, name: "Closet" }), _jsx(IconWrapper, { icon: Co2, name: "Co2" }), _jsx(IconWrapper, { icon: Company, name: "Company" }), _jsx(IconWrapper, { icon: Company2, name: "Company2" }), _jsx(IconWrapper, { icon: ComputerReport, name: "ComputerReport" }), _jsx(IconWrapper, { icon: Confirmation, name: "Confirmation" }), _jsx(IconWrapper, { icon: Construction, name: "Construction" }), _jsx(IconWrapper, { icon: Contacts, name: "Contacts" }), _jsx(IconWrapper, { icon: Contacts2, name: "Contacts2" }), _jsx(IconWrapper, { icon: Contributor, name: "Contributor" }), _jsx(IconWrapper, { icon: CreditCard, name: "CreditCard" }), _jsx(IconWrapper, { icon: Detector, name: "Detector" }), _jsx(IconWrapper, { icon: Diamond, name: "Diamond" }), _jsx(IconWrapper, { icon: DiningRoom, name: "DiningRoom" }), _jsx(IconWrapper, { icon: DocIcon, name: "DocIcon" }), _jsx(IconWrapper, { icon: Document, name: "Document" }), _jsx(IconWrapper, { icon: Document2, name: "Document2" }), _jsx(IconWrapper, { icon: Drop, name: "Drop" }), _jsx(IconWrapper, { icon: DropCalendar, name: "DropCalendar" }), _jsx(IconWrapper, { icon: Electricity, name: "Electricity" }), _jsx(IconWrapper, { icon: Entryway, name: "Entryway" }), _jsx(IconWrapper, { icon: EstValue, name: "EstValue" }), _jsx(IconWrapper, { icon: Exclamation, name: "Exclamation" }), _jsx(IconWrapper, { icon: Face, name: "Face" }), _jsx(IconWrapper, { icon: Feedback, name: "Feedback" }), _jsx(IconWrapper, { icon: FileUploading, name: "FileUploading" }), _jsx(IconWrapper, { icon: Finance, name: "Finance" }), _jsx(IconWrapper, { icon: Flag, name: "Flag" }), _jsx(IconWrapper, { icon: FormSent, name: "FormSent" }), _jsx(IconWrapper, { icon: Foundation, name: "Foundation" }), _jsx(IconWrapper, { icon: Garage, name: "Garage" }), _jsx(IconWrapper, { icon: GearPencil, name: "GearPencil" }), _jsx(IconWrapper, { icon: GearTime, name: "GearTime" }), _jsx(IconWrapper, { icon: GenericField, name: "GenericField" }), _jsx(IconWrapper, { icon: GlassWater, name: "GlassWater" }), _jsx(IconWrapper, { icon: GreenFolder, name: "GreenFolder" }), _jsx(IconWrapper, { icon: Group, name: "Group" }), _jsx(IconWrapper, { icon: Groups, name: "Groups" }), _jsx(IconWrapper, { icon: GuestBedroom, name: "GuestBedroom" }), _jsx(IconWrapper, { icon: Hallway, name: "Hallway" }), _jsx(IconWrapper, { icon: HandPencil, name: "HandPencil" }), _jsx(IconWrapper, { icon: Heater, name: "Heater" }), _jsx(IconWrapper, { icon: Help, name: "Help" }), _jsx(IconWrapper, { icon: HomeAddress, name: "HomeAddress" }), _jsx(IconWrapper, { icon: Homeowner, name: "Homeowner" }), _jsx(IconWrapper, { icon: House, name: "House" }), _jsx(IconWrapper, { icon: HouseHands, name: "HouseHands" }), _jsx(IconWrapper, { icon: IA, name: "IA" }), _jsx(IconWrapper, { icon: ImageDefault, name: "ImageDefault" }), _jsx(IconWrapper, { icon: ImgIcon, name: "ImgIcon" }), _jsx(IconWrapper, { icon: Inbox, name: "Inbox" }), _jsx(IconWrapper, { icon: Insect, name: "Insect" }), _jsx(IconWrapper, { icon: Kitchen, name: "Kitchen" }), _jsx(IconWrapper, { icon: Laundry, name: "Laundry" }), _jsx(IconWrapper, { icon: Light, name: "Light" }), _jsx(IconWrapper, { icon: LivingRoom, name: "LivingRoom" }), _jsx(IconWrapper, { icon: LogoSmall, name: "LogoSmall" }), _jsx(IconWrapper, { icon: MagnifyingGlassReport, name: "MagnifyingGlassReport" }), _jsx(IconWrapper, { icon: Manager, name: "Manager" }), _jsx(IconWrapper, { icon: MasterBedroom, name: "MasterBedroom" }), _jsx(IconWrapper, { icon: Member, name: "Member" }), _jsx(IconWrapper, { icon: Message, name: "Message" }), _jsx(IconWrapper, { icon: MobileDrop, name: "MobileDrop" }), _jsx(IconWrapper, { icon: Money, name: "Money" }), _jsx(IconWrapper, { icon: Mudroom, name: "Mudroom" }), _jsx(IconWrapper, { icon: NeedHelp, name: "NeedHelp" }), _jsx(IconWrapper, { icon: Office, name: "Office" }), _jsx(IconWrapper, { icon: Painting, name: "Painting" }), _jsx(IconWrapper, { icon: PartnerGeneric, name: "PartnerGeneric" }), _jsx(IconWrapper, { icon: Patio, name: "Patio" }), _jsx(IconWrapper, { icon: PdfIcon, name: "PdfIcon" }), _jsx(IconWrapper, { icon: PersonMail, name: "PersonMail" }), _jsx(IconWrapper, { icon: Plate, name: "Plate" }), _jsx(IconWrapper, { icon: Play, name: "Play" }), _jsx(IconWrapper, { icon: Plus, name: "Plus" }), _jsx(IconWrapper, { icon: Pool, name: "Pool" }), _jsx(IconWrapper, { icon: Pool2, name: "Pool2" }), _jsx(IconWrapper, { icon: PressureWasher, name: "PressureWasher" }), _jsx(IconWrapper, { icon: Price, name: "Price" }), _jsx(IconWrapper, { icon: Profile, name: "Profile" }), _jsx(IconWrapper, { icon: ProgressReport, name: "ProgressReport" }), _jsx(IconWrapper, { icon: Proposal, name: "Proposal" }), _jsx(IconWrapper, { icon: RealEstate, name: "RealEstate" }), _jsx(IconWrapper, { icon: Receipt, name: "Receipt" }), _jsx(IconWrapper, { icon: ReceiptBg, name: "ReceiptBg" }), _jsx(IconWrapper, { icon: ReceiptHouse, name: "ReceiptHouse" }), _jsx(IconWrapper, { icon: Receipts, name: "Receipts" }), _jsx(IconWrapper, { icon: Recipient, name: "Recipient" }), _jsx(IconWrapper, { icon: Records, name: "Records" }), _jsx(IconWrapper, { icon: Register, name: "Register" }), _jsx(IconWrapper, { icon: RelationshipHome, name: "RelationshipHome" }), _jsx(IconWrapper, { icon: ResendPassword, name: "ResendPassword" }), _jsx(IconWrapper, { icon: Rocket, name: "Rocket" }), _jsx(IconWrapper, { icon: Roof2, name: "Roof2" }), _jsx(IconWrapper, { icon: Security, name: "Security" }), _jsx(IconWrapper, { icon: Send, name: "Send" }), _jsx(IconWrapper, { icon: ShareHome, name: "ShareHome" }), _jsx(IconWrapper, { icon: ShareWith, name: "ShareWith" }), _jsx(IconWrapper, { icon: SixtyEight, name: "SixtyEight" }), _jsx(IconWrapper, { icon: SMS, name: "SMS" }), _jsx(IconWrapper, { icon: Social, name: "Social" }), _jsx(IconWrapper, { icon: SolarPanel, name: "SolarPanel" }), _jsx(IconWrapper, { icon: Speaker, name: "Speaker" }), _jsx(IconWrapper, { icon: Sprinkler, name: "Sprinkler" }), _jsx(IconWrapper, { icon: Structure, name: "Structure" }), _jsx(IconWrapper, { icon: Subscription, name: "Subscription" }), _jsx(IconWrapper, { icon: Target, name: "Target" }), _jsx(IconWrapper, { icon: Theatre, name: "Theatre" }), _jsx(IconWrapper, { icon: Thumbnail, name: "Thumbnail" }), _jsx(IconWrapper, { icon: ThumbnailSmall, name: "ThumbnailSmall" }), _jsx(IconWrapper, { icon: ThumbUp, name: "ThumbUp" }), _jsx(IconWrapper, { icon: Trash, name: "Trash" }), _jsx(IconWrapper, { icon: VideoIcon, name: "VideoIcon" }), _jsx(IconWrapper, { icon: VideoPlay, name: "VideoPlay" }), _jsx(IconWrapper, { icon: VioletFolder, name: "VioletFolder" }), _jsx(IconWrapper, { icon: Wallet, name: "Wallet" }), _jsx(IconWrapper, { icon: Warning, name: "Warning" }), _jsx(IconWrapper, { icon: Warranty, name: "Warranty" }), _jsx(IconWrapper, { icon: WellDone, name: "WellDone" }), _jsx(IconWrapper, { icon: WholeHome, name: "WholeHome" }), _jsx(IconWrapper, { icon: Wind, name: "Wind" }), _jsx(IconWrapper, { icon: Wizard, name: "Wizard" }), _jsx(IconWrapper, { icon: WizardDetailed, name: "WizardDetailed" }), _jsx(IconWrapper, { icon: WizardQuick, name: "WizardQuick" }), _jsx(IconWrapper, { icon: YellowFolder, name: "YellowFolder" }), _jsx(IconWrapper, { icon: YellowFolderUnshared, name: "YellowFolderUnshared" })] }));
 };
 const IconWrapper = ({ icon, name }) => {
     return (_jsxs(Center, { flexDirection: "column", children: [_jsx(Image, { src: icon, boxSize: "30px", mb: "2" }), _jsx(Text, { variant: "home", children: name })] }));

package/package.json

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

package/src/assets/images/index.ts

@@ -151,6 +151,7 @@ import TreesCrop2 from './trees-crop2.png'
 import VideoIcon from './video-icon.svg'
 import VideoPlay from './video-play.svg'
 import VioletFolder from './violet-folder.svg'
+import Wallet from './wallet.svg'
 import Warning from './warning.svg'
 import Warranty from './warranty.svg'
 import WellDone from './well-done.png'
@@ -317,6 +318,7 @@ export {
   VideoIcon,
   VideoPlay,
   VioletFolder,
+  Wallet,
   Warning,
   Warranty,
   WellDone,

package/src/assets/images/wallet.svg

@@ -0,0 +1,18 @@
+<svg id="Grupo_22869" data-name="Grupo 22869" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35.199" height="39.708" viewBox="0 0 35.199 39.708">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Retângulo_26646" data-name="Retângulo 26646" width="35.199" height="39.708" transform="translate(0 0)" fill="none"/>
+    </clipPath>
+  </defs>
+  <g id="Grupo_22868" data-name="Grupo 22868" transform="translate(0 0)" clip-path="url(#clip-path)">
+    <path id="Caminho_18397" data-name="Caminho 18397" d="M0,39.93a2.882,2.882,0,0,0,2.882,2.878h.53V65.725h-.53A2.883,2.883,0,0,1,0,62.844Z" transform="translate(0 -26.017)" fill="#323954"/>
+    <path id="Caminho_18398" data-name="Caminho 18398" d="M76.372,66.9v8.474H67.431a4.237,4.237,0,1,1,0-8.474Zm-6.363,4.237a1.594,1.594,0,1,0-1.6,1.592,1.593,1.593,0,0,0,1.6-1.592" transform="translate(-41.172 -43.589)" fill="#e24c5d"/>
+    <path id="Caminho_18399" data-name="Caminho 18399" d="M75.2,74.49a1.592,1.592,0,1,1-1.592,1.592A1.593,1.593,0,0,1,75.2,74.49" transform="translate(-47.961 -48.535)" fill="#f6cf76"/>
+    <path id="Caminho_18400" data-name="Caminho 18400" d="M35.463,48.19h6.115v6.519H32.637a4.237,4.237,0,1,0,0,8.474h8.941v7.924H9.79V48.19H35.463Z" transform="translate(-6.379 -31.399)" fill="#40566b"/>
+    <path id="Caminho_18401" data-name="Caminho 18401" d="M2.881,31.65A2.883,2.883,0,0,0,0,34.532v0a2.882,2.882,0,0,0,2.882,2.878H7.8L9.39,34.532l1.585-2.882Z" transform="translate(0.001 -20.622)" fill="#e24c5d"/>
+    <path id="Caminho_18402" data-name="Caminho 18402" d="M86.644,31.65l-1.586,2.882L83.47,37.413h6.115V31.65Z" transform="translate(-54.386 -20.622)" fill="#e24c5d"/>
+    <path id="Caminho_18403" data-name="Caminho 18403" d="M33.024,3.388l-8.23,14.948h-2.4l1.589-2.882,1.585-2.882,5.617-10.2Z" transform="translate(-14.588 -1.544)" fill="#00c0b7"/>
+    <path id="Caminho_18404" data-name="Caminho 18404" d="M49.757,13.91l-1.589,2.882h-2.4l4.4-7.99-10.8-5.944L31.691,16.791h-2.4L37.52,1.843,38.534,0,53.022,7.976l-1.679,3.052Z" transform="translate(-19.084 0)" fill="#00a1aa"/>
+    <path id="Caminho_18405" data-name="Caminho 18405" d="M54.65,14.145l-4.4,7.99H36.179L43.852,8.2Z" transform="translate(-23.573 -5.343)" fill="#00c0b7"/>
+  </g>
+</svg>

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

@@ -1,7 +1,9 @@
 import { FieldTypesI, IconTypes } from '@/interfaces'
-import { Box, Stack, Text } from '@chakra-ui/react'
+import { Stack, Text } from '@chakra-ui/react'
 import {
   FilterSize,
+  HireInfo,
+  HireService,
   PurchaseProduct,
   SearchField,
   VideoDetail,
@@ -10,7 +12,7 @@ import { fieldIcons } from '@/helpers'
 
 export const AlertFields = ({ fields, callback }: FieldTypesI) => {
   return (
-    <Stack spacing="base" p="base">
+    <Stack spacing="1" p="base">
       {fields?.map((field) => {
         const { id, type, value, icon } = field
         const mappedIcon = icon && (fieldIcons[icon] as IconTypes)
@@ -35,6 +37,10 @@ export const AlertFields = ({ fields, callback }: FieldTypesI) => {
             return <SearchField {...field} key={id} callback={callback} />
           case 'purchase-product':
             return <PurchaseProduct {...field} key={id} callback={callback} />
+          case 'hire-info':
+            return <HireInfo {...field} key={id} icon={mappedIcon} />
+          case 'hire-service':
+            return <HireService {...field} key={id} callback={callback} />
           default:
             return null
         }

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

@@ -0,0 +1,11 @@
+import { ReportI } from '@/interfaces'
+import { Flex, Image, Text } from '@chakra-ui/react'
+
+export const HireInfo = ({ name, icon, value }: ReportI) => {
+  return (
+    <Flex bg="lightBlue.2" gap="base" p="base" mx="-base">
+      <Image boxSize="40px" src={icon} alt={name} />
+      <Text>{value}</Text>
+    </Flex>
+  )
+}

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

@@ -0,0 +1,92 @@
+import { CustomBadge, Plus, Calendar } from '@/components'
+import { FieldTypesI, ReportI } from '@/interfaces'
+import { colors } from '@/theme/colors'
+import {
+  AspectRatio,
+  Box,
+  Container,
+  Flex,
+  IconButton,
+  Image,
+  Text,
+} from '@chakra-ui/react'
+
+export const HireService = ({
+  description,
+  name,
+  label,
+  icon,
+  comments,
+  value,
+  callback,
+  children,
+  ...rest
+}: ReportI & Pick<FieldTypesI, 'callback'>) => {
+  const ctaIcon = {
+    plus: <Plus stroke={colors.blue[3]} />,
+    calendar: <Calendar stroke={colors.blue[3]} />,
+  }
+  return (
+    <Container p="base" position="relative" boxShadow="md">
+      <CustomBadge
+        label={label}
+        bg="#77C100"
+        position="absolute"
+        top="2"
+        left="-1"
+        zIndex="3"
+      />
+      <Flex gap="base" ml="10" align="center">
+        <Image src={icon} alt={name} objectFit="contain" w="70px" h="70px" />
+        <Flex align="end" justify="space-between" w="100%">
+          <Box>
+            <Text
+              fontWeight="semibold"
+              fontSize="sm"
+              noOfLines={2}
+              overflow="hidden"
+              textOverflow="ellipsis"
+            >
+              {name}
+            </Text>
+            <Text fontSize="sm" fontFamily="secondary" lineHeight="1.2">
+              {description}
+            </Text>
+            <Text fontSize="sm" fontFamily="secondary" lineHeight="1.2">
+              {comments}
+            </Text>
+            <Text
+              fontSize="sm"
+              fontFamily="secondary"
+              color="blue.2"
+              lineHeight="1.2"
+            >
+              {value}
+            </Text>
+          </Box>
+          <Flex gap="2">
+            {children?.map((child) => {
+              const { id, icon, label = '' } = child
+              return (
+                <IconButton
+                  key={id}
+                  w="2rem"
+                  h="2rem"
+                  aria-label={label}
+                  variant="iconOutlined"
+                  icon={ctaIcon[icon as keyof typeof ctaIcon] || <Plus />}
+                  onClick={() =>
+                    callback?.({
+                      ...child,
+                      value: String(child.value),
+                    })
+                  }
+                />
+              )
+            })}
+          </Flex>
+        </Flex>
+      </Flex>
+    </Container>
+  )
+}

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

@@ -37,10 +37,7 @@ export const PurchaseProduct = ({
         zIndex="3"
       />
       <Flex gap="base" ml="6">
-        <AspectRatio ratio={1} minW="70px" h="auto">
-          <Image src={icon} alt={name} objectFit="cover" w="100%" h="100%" />
-        </AspectRatio>
-
+        <Image src={icon} alt={name} objectFit="contain" w="70px" h="70px" />
         <Stack spacing="0">
           <Text
             fontWeight="semibold"
@@ -51,7 +48,7 @@ export const PurchaseProduct = ({
           >
             {name}
           </Text>
-          <Flex alignSelf="end" gap="base" align="center">
+          <Flex alignSelf="end" gap="base" align="end">
             <Stack spacing="0" align="end">
               <Text fontSize="xs" fontFamily="secondary" color="red">
                 {comments}

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

@@ -2,6 +2,8 @@ export * from './AlertFields'
 export * from './ChangeAirFilter'
 export * from './CustomDivider'
 export * from './FilterSize'
+export * from './HireInfo'
+export * from './HireService'
 export * from './PurchaseProduct'
 export * from './SearchField'
 export * from './SmokeDetectorBattery'

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

@@ -58,6 +58,7 @@ import {
   AAWeed,
   AApest,
   FilterSize,
+  Wallet,
 } from '@/assets/images'
 import { IconTypes } from '@/interfaces'
 
@@ -108,6 +109,7 @@ export const fieldIcons: Record<IconTypes, string> = {
   target: Target,
   title: CircleFace,
   company: Company2,
+  wallet: Wallet,
   'sh-gutter': GutterCleaning,
   'sh-home': HomeCleaning,
   'sh-house': HouseWashing,

package/src/index.ts

@@ -18,6 +18,7 @@ export {
   AppBar,
   AssignableReceipts,
   BackHeader,
+  BackendAlert,
   BarDivider,
   CancelAccount,
   CatalogPopup,

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

@@ -106,6 +106,7 @@ export type IconTypes =
   | 'target'
   | 'title'
   | 'company'
+  | 'wallet'
   | UIIconTypes
 
 export type UIIconTypes =

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

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

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

@@ -999,7 +999,125 @@ export const alertFieldsMock: ReportI[] = [
         value: faker.image.urlPicsumPhotos(),
         type: 'hire-out',
         visible: true,
-        children: [],
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            name: '',
+            label: '',
+            description: '',
+            icon: 'wallet',
+            comments: '',
+            value:
+              'Average cost for this service range from $100-125 in your area, including filter.',
+            type: 'hire-info',
+            visible: true,
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Bobs Heating & Cooling',
+            label: 'match',
+            description: 'Jerry Marks',
+            icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRlUXEpc3FdoRVmQoYvmAttMwG2dzvBz49oGg&s',
+            comments: '512-650-3030',
+            value: 'JerryM@BobsHTC.com',
+            type: 'hire-service',
+            visible: true,
+            children: [
+              {
+                id: faker.database.mongodbObjectId(),
+                name: 'Bobs Heating & Cooling - add service',
+                label: '',
+                description: '',
+                icon: 'plus',
+                comments: '',
+                value: '',
+                type: 'hire-service-cta',
+                visible: true,
+              },
+              {
+                id: faker.database.mongodbObjectId(),
+                name: 'Bobs Heating & Cooling - schedule service',
+                label: '',
+                description: '',
+                icon: 'calendar',
+                comments: '',
+                value: '',
+                type: 'hire-service-cta',
+                visible: true,
+              },
+            ],
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Sears Home Services',
+            label: 'match',
+            description: 'Mark Jones',
+            icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJU3pPD1SFxFnAuaOkoHR36lcVNmoP39USqA&s',
+            comments: '512-354-6584',
+            value: 'MarkJones@searssvc.com',
+            type: 'hire-service',
+            visible: true,
+            children: [
+              {
+                id: faker.database.mongodbObjectId(),
+                name: 'Sears Home Services - add service',
+                label: '',
+                description: '',
+                icon: 'plus',
+                comments: '',
+                value: '',
+                type: 'hire-service-cta',
+                visible: true,
+              },
+              {
+                id: faker.database.mongodbObjectId(),
+                name: 'Sears Home Services - schedule service',
+                label: '',
+                description: '',
+                icon: 'calendar',
+                comments: '',
+                value: '',
+                type: 'hire-service-cta',
+                visible: true,
+              },
+            ],
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Airco Mechanical',
+            label: 'match',
+            description: 'Chris Rodriquez',
+            icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWZ_hk6-7mpzQG2ZSQTu0XV2FiMF4AYkT4Wg&s',
+            comments: '512-888-5454',
+            value: 'ChrisR@airco.com',
+            type: 'hire-service',
+            visible: true,
+            children: [
+              {
+                id: faker.database.mongodbObjectId(),
+                name: 'Airco Mechanical - add service',
+                label: '',
+                description: '',
+                icon: 'plus',
+                comments: '',
+                value: '',
+                type: 'hire-service-cta',
+                visible: true,
+              },
+              {
+                id: faker.database.mongodbObjectId(),
+                name: 'Airco Mechanical - schedule service',
+                label: '',
+                description: '',
+                icon: 'calendar',
+                comments: '',
+                value: '',
+                type: 'hire-service-cta',
+                visible: true,
+              },
+            ],
+          },
+        ],
       },
     ],
   },

package/src/stories/assets/Illustrations.stories.tsx

@@ -176,6 +176,7 @@ import {
   VideoPlay,
   VioletFolder,
   WallDecor,
+  Wallet,
   Warning,
   Warranty,
   Water,
@@ -409,6 +410,7 @@ export const Illustrations = () => {
       <IconWrapper icon={VideoIcon} name="VideoIcon" />
       <IconWrapper icon={VideoPlay} name="VideoPlay" />
       <IconWrapper icon={VioletFolder} name="VioletFolder" />
+      <IconWrapper icon={Wallet} name="Wallet" />
       <IconWrapper icon={Warning} name="Warning" />
       <IconWrapper icon={Warranty} name="Warranty" />
       <IconWrapper icon={WellDone} name="WellDone" />