@homefile/components-v2 2.19.0 → 2.20.0

package/dist/components/badge/CustomBadge.d.ts

@@ -1,5 +1,4 @@
-export declare const CustomBadge: ({ bg, color, label, }: {
-    bg?: string | undefined;
-    color?: string | undefined;
-    label?: string | undefined;
+import { CenterProps } from '@chakra-ui/react';
+export declare const CustomBadge: ({ bg, color, label, ...props }: CenterProps & {
+    label?: string;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/badge/CustomBadge.js

@@ -1,5 +1,17 @@
+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 } from "react/jsx-runtime";
 import { Center } from '@chakra-ui/react';
-export const CustomBadge = ({ bg = 'neutral.white', color = 'neutral.white', label = '', }) => {
-    return (_jsx(Center, { bg: bg, fontSize: "xxs", color: color, fontWeight: "bold", py: "1", px: "2", rounded: "md", textTransform: "uppercase", children: label }));
+export const CustomBadge = (_a) => {
+    var { bg = 'neutral.white', color = 'neutral.white', label = '' } = _a, props = __rest(_a, ["bg", "color", "label"]);
+    return (_jsx(Center, Object.assign({ bg: bg, fontSize: "xxs", color: color, fontWeight: "bold", py: "1", px: "2", rounded: "md", textTransform: "uppercase" }, props, { children: label })));
 };

package/dist/components/homeAssistant/monitorAlerts/BackendAlert.d.ts

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

package/dist/components/homeAssistant/monitorAlerts/BackendAlert.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertFields, BackendAlertCard, TabsHeader } from '../..';
 import { getCategoryStyles } from '../../../utils/Alerts.utils';
 import { Divider } from '@chakra-ui/react';
-export const BackendAlert = ({ category, form }) => {
+export const BackendAlert = ({ category, form, callback }) => {
     var _a, _b, _c, _d, _e;
     const { headerBg, alertIcon, alertIconBg, alertTitle } = getCategoryStyles(category);
     const alert = form === null || form === void 0 ? void 0 : form.find((item) => item.type === 'alert');
@@ -10,7 +10,7 @@ export const BackendAlert = ({ category, form }) => {
         var _a;
         return ({
             label: tab.name,
-            component: _jsx(AlertFields, { fields: (_a = tab.children) !== null && _a !== void 0 ? _a : [] }),
+            component: (_jsx(AlertFields, { fields: (_a = tab.children) !== null && _a !== void 0 ? _a : [], callback: callback })),
         });
     })) !== null && _b !== void 0 ? _b : [];
     return (_jsxs(BackendAlertCard, { alertBg: headerBg, alertIcon: alertIcon, alertTitle: alertTitle, bg: alertIconBg, icon: (_c = alert === null || alert === void 0 ? void 0 : alert.icon) !== null && _c !== void 0 ? _c : '', title: (_d = alert === null || alert === void 0 ? void 0 : alert.label) !== null && _d !== void 0 ? _d : '', description: (_e = alert === null || alert === void 0 ? void 0 : alert.description) !== null && _e !== void 0 ? _e : '', children: [_jsx(Divider, {}), _jsx(TabsHeader, { tabList: tabs })] }));

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

@@ -1,7 +1,7 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Stack, Text } from '@chakra-ui/react';
-import { FilterSize, SearchField, VideoDetail } from '../../..';
+import { FilterSize, 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) => {
@@ -16,6 +16,8 @@ export const AlertFields = ({ fields, callback }) => {
                     return _createElement(FilterSize, Object.assign({}, field, { key: id, icon: mappedIcon }));
                 case 'search':
                     return _createElement(SearchField, Object.assign({}, field, { key: id, callback: callback }));
+                case 'purchase-product':
+                    return _createElement(PurchaseProduct, Object.assign({}, field, { key: id, callback: callback }));
                 default:
                     return null;
             }

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

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

package/dist/components/homeAssistant/monitorAlerts/alertDetails/PurchaseProduct.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 } from '../../..';
+import { colors } from '../../../../theme/colors';
+import { AspectRatio, 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"]);
+    const bgs = {
+        best: '#232669',
+        better: '#424CBF',
+        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)) })] })] })] })] }));
+};

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AspectRatio, Box, Container, Flex, Text } from '@chakra-ui/react';
 export const VideoDetail = ({ name, label, link, description }) => {
-    return (_jsx(Container, { p: "base", children: _jsxs(Flex, { gap: "base", children: [_jsx(AspectRatio, { w: "140px", ratio: 16 / 9, children: _jsx("iframe", { title: name, src: link, allowFullScreen: true }) }), _jsxs(Box, { children: [_jsx(Text, { fontWeight: "semibold", children: name }), _jsx(Text, { fontSize: "sm", fontFamily: "secondary", children: `${label} | ${description}` })] })] }) }));
+    return (_jsx(Container, { p: "base", boxShadow: "md", children: _jsxs(Flex, { gap: "base", children: [_jsx(AspectRatio, { w: "140px", ratio: 16 / 9, children: _jsx("iframe", { title: name, src: link, allowFullScreen: true }) }), _jsxs(Box, { children: [_jsx(Text, { fontWeight: "semibold", children: name }), _jsx(Text, { fontSize: "sm", fontFamily: "secondary", children: `${label} | ${description}` })] })] }) }));
 };

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

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

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

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

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

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

@@ -925,6 +925,62 @@ export const alertFieldsMock = [
                     },
                 ],
             },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Purchase',
+                label: '',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: '',
+                type: 'purchase',
+                visible: true,
+                children: [
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'Filtrete™ Allergen Defense Furnace AC Air Filter 1000 MPR',
+                        label: 'best',
+                        description: '',
+                        icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT50sebT9p-twQB-DdM2tlRo12In8F09QCsmg&s',
+                        comments: 'Save 20% off Retail',
+                        value: '$22.99',
+                        type: 'purchase-product',
+                        visible: true,
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'Filtrete™ Smart Allergen Bacteria & Virus Furnace AC Air Filter MPR 1500',
+                        label: 'better',
+                        description: '',
+                        icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbFpjG3kybZDb6psqPIlQSoXgp9OjOR672kg&s',
+                        comments: 'Save 28% off Retail',
+                        value: '$16.99',
+                        type: 'purchase-product',
+                        visible: true,
+                    },
+                    {
+                        id: faker.database.mongodbObjectId(),
+                        name: 'Filtrete™ 700 MPR Dust Pollen and Pet Dander Electrostatic Air Filter',
+                        label: 'good',
+                        description: '',
+                        icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7j1KYfPZqPnFmTgyx7b9pp78N6RForQfZFQ&s',
+                        comments: 'Save 24% off Retail',
+                        value: '$10.99',
+                        type: 'purchase-product',
+                        visible: true,
+                    },
+                ],
+            },
+            {
+                id: faker.database.mongodbObjectId(),
+                name: 'Hire out',
+                label: '',
+                description: faker.lorem.sentence(),
+                comments: faker.lorem.sentence(),
+                value: faker.image.urlPicsumPhotos(),
+                type: 'hire-out',
+                visible: true,
+                children: [],
+            },
         ],
     },
 ];

package/dist/stories/homeAssistant/monitorAlerts/BackendAlert.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
 import { BackendAlert } from '../../../components';
 import { alertFieldsMock } from '../../../mocks';
 export default {
@@ -7,6 +8,7 @@ export default {
     args: {
         category: 'budget',
         form: alertFieldsMock,
+        callback: action('onClick'),
     },
 };
 export const BackendAlertComponent = (args) => {

package/package.json

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

package/src/components/badge/CustomBadge.tsx

@@ -1,10 +1,11 @@
-import { Center } from '@chakra-ui/react'
+import { Center, CenterProps } from '@chakra-ui/react'
 
 export const CustomBadge = ({
   bg = 'neutral.white',
   color = 'neutral.white',
   label = '',
-}) => {
+  ...props
+}: CenterProps & { label?: string }) => {
   return (
     <Center
       bg={bg}
@@ -15,6 +16,7 @@ export const CustomBadge = ({
       px="2"
       rounded="md"
       textTransform="uppercase"
+      {...props}
     >
       {label}
     </Center>

package/src/components/homeAssistant/monitorAlerts/BackendAlert.tsx

@@ -3,7 +3,7 @@ import { BackendAlertI, TabI } from '@/interfaces'
 import { getCategoryStyles } from '@/utils/Alerts.utils'
 import { Divider } from '@chakra-ui/react'
 
-export const BackendAlert = ({ category, form }: BackendAlertI) => {
+export const BackendAlert = ({ category, form, callback }: BackendAlertI) => {
   const { headerBg, alertIcon, alertIconBg, alertTitle } =
     getCategoryStyles(category)
   const alert = form?.find((item) => item.type === 'alert')
@@ -13,7 +13,9 @@ export const BackendAlert = ({ category, form }: BackendAlertI) => {
       (tab) =>
         ({
           label: tab.name,
-          component: <AlertFields fields={tab.children ?? []} />,
+          component: (
+            <AlertFields fields={tab.children ?? []} callback={callback} />
+          ),
         } as TabI)
     ) ?? []
 

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

@@ -1,6 +1,11 @@
 import { FieldTypesI, IconTypes } from '@/interfaces'
 import { Box, Stack, Text } from '@chakra-ui/react'
-import { FilterSize, SearchField, VideoDetail } from '@/components'
+import {
+  FilterSize,
+  PurchaseProduct,
+  SearchField,
+  VideoDetail,
+} from '@/components'
 import { fieldIcons } from '@/helpers'
 
 export const AlertFields = ({ fields, callback }: FieldTypesI) => {
@@ -28,6 +33,8 @@ export const AlertFields = ({ fields, callback }: FieldTypesI) => {
             return <FilterSize {...field} key={id} icon={mappedIcon} />
           case 'search':
             return <SearchField {...field} key={id} callback={callback} />
+          case 'purchase-product':
+            return <PurchaseProduct {...field} key={id} callback={callback} />
           default:
             return null
         }

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

@@ -0,0 +1,78 @@
+import { CustomBadge, Plus } from '@/components'
+import { FieldTypesI, ReportI } from '@/interfaces'
+import { colors } from '@/theme/colors'
+import {
+  AspectRatio,
+  Container,
+  Flex,
+  IconButton,
+  Image,
+  Stack,
+  Text,
+} from '@chakra-ui/react'
+
+export const PurchaseProduct = ({
+  name,
+  label,
+  icon,
+  comments,
+  value,
+  callback,
+  ...rest
+}: ReportI & Pick<FieldTypesI, 'callback'>) => {
+  const bgs = {
+    best: '#232669',
+    better: '#424CBF',
+    good: '#5C81C7',
+  }
+  const bg = bgs[(label?.toLowerCase() as keyof typeof bgs) ?? 'best']
+  return (
+    <Container p="base" position="relative" boxShadow="md">
+      <CustomBadge
+        label={label}
+        bg={bg}
+        position="absolute"
+        top="2"
+        left="-1"
+        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>
+
+        <Stack spacing="0">
+          <Text
+            fontWeight="semibold"
+            fontSize="sm"
+            noOfLines={2}
+            overflow="hidden"
+            textOverflow="ellipsis"
+          >
+            {name}
+          </Text>
+          <Flex alignSelf="end" gap="base" align="center">
+            <Stack spacing="0" align="end">
+              <Text fontSize="xs" fontFamily="secondary" color="red">
+                {comments}
+              </Text>
+              <Text fontSize="sm" fontWeight="bold" lineHeight="1.2">
+                {value}
+              </Text>
+            </Stack>
+            <IconButton
+              w="2rem"
+              h="2rem"
+              aria-label="Add product"
+              variant="iconOutlined"
+              icon={<Plus size={20} stroke={colors.blue['3']} />}
+              onClick={() =>
+                callback?.({ name, icon, value: String(value), ...rest })
+              }
+            />
+          </Flex>
+        </Stack>
+      </Flex>
+    </Container>
+  )
+}

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

@@ -3,7 +3,7 @@ import { AspectRatio, Box, Container, Flex, Text } from '@chakra-ui/react'
 
 export const VideoDetail = ({ name, label, link, description }: ReportI) => {
   return (
-    <Container p="base">
+    <Container p="base" boxShadow="md">
       <Flex gap="base">
         <AspectRatio w="140px" ratio={16 / 9}>
           <iframe title={name} src={link} allowFullScreen />

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

@@ -2,6 +2,7 @@ export * from './AlertFields'
 export * from './ChangeAirFilter'
 export * from './CustomDivider'
 export * from './FilterSize'
+export * from './PurchaseProduct'
 export * from './SearchField'
 export * from './SmokeDetectorBattery'
 export * from './SmokeDetectorExpired'

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

@@ -123,6 +123,7 @@ export type UIIconTypes =
   | 'aa-dressing'
   | 'aa-pest'
   | 'filter-size'
+  | string
 
 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' | 'search'
+export type AlertFieldType = 'alert' | 'search' | 'purchase-product'
 
 export interface BackendAlertI extends DynamicFormI {
   category: AlertCategory

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

@@ -945,6 +945,62 @@ export const alertFieldsMock: ReportI[] = [
           },
         ],
       },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Purchase',
+        label: '',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: '',
+        type: 'purchase',
+        visible: true,
+        children: [
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Filtrete™ Allergen Defense Furnace AC Air Filter 1000 MPR',
+            label: 'best',
+            description: '',
+            icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT50sebT9p-twQB-DdM2tlRo12In8F09QCsmg&s',
+            comments: 'Save 20% off Retail',
+            value: '$22.99',
+            type: 'purchase-product',
+            visible: true,
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Filtrete™ Smart Allergen Bacteria & Virus Furnace AC Air Filter MPR 1500',
+            label: 'better',
+            description: '',
+            icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbFpjG3kybZDb6psqPIlQSoXgp9OjOR672kg&s',
+            comments: 'Save 28% off Retail',
+            value: '$16.99',
+            type: 'purchase-product',
+            visible: true,
+          },
+          {
+            id: faker.database.mongodbObjectId(),
+            name: 'Filtrete™ 700 MPR Dust Pollen and Pet Dander Electrostatic Air Filter',
+            label: 'good',
+            description: '',
+            icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7j1KYfPZqPnFmTgyx7b9pp78N6RForQfZFQ&s',
+            comments: 'Save 24% off Retail',
+            value: '$10.99',
+            type: 'purchase-product',
+            visible: true,
+          },
+        ],
+      },
+      {
+        id: faker.database.mongodbObjectId(),
+        name: 'Hire out',
+        label: '',
+        description: faker.lorem.sentence(),
+        comments: faker.lorem.sentence(),
+        value: faker.image.urlPicsumPhotos(),
+        type: 'hire-out',
+        visible: true,
+        children: [],
+      },
     ],
   },
 ]

package/src/stories/homeAssistant/monitorAlerts/BackendAlert.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
 import { BackendAlert } from '@/components'
 import { BackendAlertI } from '@/interfaces'
 import { alertFieldsMock } from '@/mocks'
@@ -9,6 +10,7 @@ export default {
   args: {
     category: 'budget',
     form: alertFieldsMock,
+    callback: action('onClick'),
   },
 } as Meta<BackendAlertI>