@homefile/components-v2 2.14.30 → 2.14.32

package/dist/components/appBar/TourButton.js

@@ -2,6 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
 import { Box, Flex, Image } from '@chakra-ui/react';
 import { Flag } from '../../assets/images';
+import { useComponentStyles } from '../../hooks';
+import { homeAssistantProxy } from '../../proxies';
 export const TourButton = ({ label, onClick }) => {
-    return (_jsx(Box, { "data-testid": "tour-button", as: "button", boxShadow: "none", borderRadius: "full", bg: "lightGreen.5", fontFamily: "secondary", transition: "all 0.2s ease-in-out", _hover: { bg: 'lightGreen.4' }, onClick: onClick, flexShrink: 0, overflow: "hidden", children: _jsxs(Flex, { align: "center", pr: "base", py: "1", children: [_jsx(Image, { src: Flag, w: "40px", h: "auto", alt: "tour", position: "relative", bottom: "-4px" }), label !== null && label !== void 0 ? label : t('help.buttonTour')] }) }));
+    const { setHighlight } = homeAssistantProxy;
+    useComponentStyles({});
+    return (_jsx(Box, { "data-testid": "tour-button", as: "button", boxShadow: "none", borderRadius: "full", bg: "lightGreen.5", fontFamily: "secondary", transition: "all 0.2s ease-in-out", _hover: { bg: 'lightGreen.4' }, onClick: () => {
+            setHighlight(true);
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }, flexShrink: 0, overflow: "hidden", children: _jsxs(Flex, { align: "center", pr: "base", py: "1", children: [_jsx(Image, { src: Flag, w: "40px", h: "auto", alt: "tour", position: "relative", bottom: "-4px" }), label !== null && label !== void 0 ? label : t('help.buttonTour')] }) }));
 };

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { fieldIcons } from '../../../../helpers';
-import { VerticalIcon, TileBodySectionGrid } from '../../..';
+import { VerticalIcon, TileBodySectionGrid, TileBodyDescription, TileBodyPartnerImage } from '../../..';
 export const TileBodyFields = ({ fields }) => {
     return (_jsx(_Fragment, { children: fields === null || fields === void 0 ? void 0 : fields.map(({ children, id, name, type, value, icon }) => {
             const baseProps = {
@@ -13,6 +13,10 @@ export const TileBodyFields = ({ fields }) => {
             switch (type) {
                 case 'tile-body-section-grid':
                     return _jsx(TileBodySectionGrid, { fields: children }, id);
+                case 'tile-body-description':
+                    return _jsx(TileBodyDescription, { description: String(baseProps.value) });
+                case 'tile-body-partner-image':
+                    return _jsx(TileBodyPartnerImage, { imageUrl: String(baseProps.value), partnerName: name });
                 case 'vertical-icon':
                     return (_jsx(VerticalIcon, { icon: baseProps.icon, value: String(baseProps.value) }, id));
                 default:

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyDescription.d.ts

@@ -0,0 +1,3 @@
+export declare const TileBodyDescription: ({ description }: {
+    description: string;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from '@chakra-ui/react';
+export const TileBodyDescription = ({ description }) => {
+    return (_jsx(Box, { px: "base", py: "4", pb: "0", bg: "lightBlue.1", children: _jsx(Text, { fontSize: "sm", fontWeight: "light", lineHeight: "18px", textAlign: "center", children: description }) }));
+};

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

@@ -0,0 +1,16 @@
+import { Box, Text } from '@chakra-ui/react'
+
+export const TileBodyDescription = ({description}: {description: string}) => {
+    return (
+        <Box px="base" py="4" pb="0" bg="lightBlue.1">
+            <Text
+                fontSize="sm"
+                fontWeight="light"
+                lineHeight="18px"
+                textAlign="center"
+            >
+                {description}
+            </Text>
+        </Box>
+    )
+}

package/dist/components/forms/dynamicForm/fields/uiFields/TileBodyPartnerImage.d.ts

@@ -0,0 +1,2 @@
+import { PartnerImageI } from '../../../../../interfaces';
+export declare const TileBodyPartnerImage: ({ imageUrl, partnerName }: PartnerImageI) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@chakra-ui/react';
+import { PartnerImage } from '../../../..';
+export const TileBodyPartnerImage = ({ imageUrl, partnerName }) => {
+    return (_jsx(Box, { h: "240px", children: _jsx(PartnerImage, { imageUrl: imageUrl, partnerName: partnerName }) }));
+};

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

@@ -0,0 +1,11 @@
+import { Box, Flex, Stack, Text } from '@chakra-ui/react'
+import { PartnerImage } from '@/components'
+import { PartnerImageI } from '@/interfaces'
+
+export const TileBodyPartnerImage = ({ imageUrl, partnerName }: PartnerImageI) => {
+    return (
+        <Box h="240px">
+            <PartnerImage imageUrl={imageUrl} partnerName={partnerName} />
+        </Box>
+    )
+}

package/dist/components/forms/dynamicForm/fields/uiFields/index.d.ts

@@ -4,4 +4,6 @@ export * from './TileBodyHeader';
 export * from './TileBodyLogo';
 export * from './TileBodySectionGrid';
 export * from './TileCta';
+export * from './TileBodyDescription';
+export * from './TileBodyPartnerImage';
 export * from './VerticalIcon';

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

@@ -4,4 +4,6 @@ export * from './TileBodyHeader';
 export * from './TileBodyLogo';
 export * from './TileBodySectionGrid';
 export * from './TileCta';
+export * from './TileBodyDescription';
+export * from './TileBodyPartnerImage';
 export * from './VerticalIcon';

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

@@ -4,4 +4,6 @@ export * from './TileBodyHeader'
 export * from './TileBodyLogo'
 export * from './TileBodySectionGrid'
 export * from './TileCta'
-export * from './VerticalIcon'
+export * from './TileBodyDescription'
+export * from './TileBodyPartnerImage'
+export * from './VerticalIcon'

package/dist/components/homeAssistant/HomeAssistantSteps.js

@@ -2,21 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Center, SimpleGrid, Stack } from '@chakra-ui/react';
 import { HomeAssistantButton, HomeAssistantStepper } from '..';
 import { homeAssistantSteps } from '../../helpers';
-import { useComponentStyles } from '../../hooks';
+import { homeAssistantProxy } from '../../proxies';
 export const HomeAssistantSteps = ({ currentStep, onStepClick, currentPanel, }) => {
-    const stepId = `homeAssistantButton-${currentPanel}`;
-    const componentIds = currentPanel
-        ? [
-            'homeAssistantButton-1',
-            'homeAssistantButton-2',
-            'homeAssistantButton-3',
-            'homeAssistantButton-4',
-            'homeAssistantButton-5',
-            'homeAssistantButton-6',
-        ]
-        : [];
-    useComponentStyles({ ids: componentIds, selectedId: stepId, zIndex: '2' });
-    return (_jsxs(Stack, { spacing: "8", w: "fit-content", position: "relative", top: ['-10px', '-30px'], children: [_jsx(HomeAssistantStepper, { currentStep: currentStep, totalSteps: 6 }), _jsx(SimpleGrid, { columns: [2, 3], spacing: "base", children: homeAssistantSteps.map((step, index) => (_jsx(Center, { w: "100%", children: _jsx(HomeAssistantButton, { currentStep: index + 1, onStepClick: onStepClick, status: getStatus(index + 1, currentStep), step: step }) }, step.title))) })] }));
+    const { setSelectedId } = homeAssistantProxy;
+    return (_jsxs(Stack, { spacing: "8", w: "fit-content", position: "relative", top: ['-10px', '-30px'], children: [_jsx(HomeAssistantStepper, { currentStep: currentStep, totalSteps: 6 }), _jsx(SimpleGrid, { columns: [2, 3], spacing: "base", children: homeAssistantSteps.map((step, index) => (_jsx(Center, { w: "100%", children: _jsx(HomeAssistantButton, { currentStep: index + 1, onStepClick: (step) => {
+                            onStepClick(step);
+                            setSelectedId(`homeAssistantButton-${index + 1}`);
+                        }, status: getStatus(index + 1, currentStep), step: step }) }, step.title))) })] }));
 };
 const getStatus = (index, currentStep) => {
     if (index === currentStep)

package/dist/components/homeAssistant/HomeMonitorSteps.js

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

package/dist/components/homeAssistant/panel/HomeAssistantPanel.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
 import { HomeAssistantPanelI } from '../../../interfaces';
-export declare const HomeAssistantPanel: ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading }: PropsWithChildren<HomeAssistantPanelI>) => import("react/jsx-runtime").JSX.Element;
+export declare const HomeAssistantPanel: ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading, }: PropsWithChildren<HomeAssistantPanelI>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homeAssistant/panel/HomeAssistantPanel.js

@@ -4,17 +4,20 @@ import { FormProvider } from 'react-hook-form';
 import { t } from 'i18next';
 import { DrawerHeader, DrawerBody, Stack, Text, DrawerFooter, } from '@chakra-ui/react';
 import { IA } from '../../../assets/images';
-import { ApplianceSteps, SimpleDynamicForm, FooterButtons, HomeAssistantPanelStep, PanelHeader, Loading } from '../..';
+import { ApplianceSteps, SimpleDynamicForm, FooterButtons, HomeAssistantPanelStep, PanelHeader, Loading, } from '../..';
 import { homeAssistantSteps } from '../../../helpers';
 import { useSimpleDynamicForm } from '../../../hooks';
-export const HomeAssistantPanel = ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading }) => {
+import { homeAssistantProxy } from '../../../proxies';
+export const HomeAssistantPanel = ({ children, currentForm, currentStep, onApplianceClick, onBack, onClose, onNext, onSave, backDisabled, nextDisabled, hasCompleted, isLoading, }) => {
     var _a, _b;
     const [addedAppliances, updateAddedAppliances] = useState([]);
-    const title = (_b = (_a = homeAssistantSteps === null || homeAssistantSteps === void 0 ? void 0 : homeAssistantSteps[currentStep - 1]) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : "";
+    const title = (_b = (_a = homeAssistantSteps === null || homeAssistantSteps === void 0 ? void 0 : homeAssistantSteps[currentStep - 1]) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : '';
     const text = `${t('homeAssistant.details')} ${title.toLowerCase()}:`;
     const isAppliances = currentStep === 4;
+    const { setHighlight } = homeAssistantProxy;
     useEffect(() => {
         var _a;
+        setHighlight(true);
         if (isAppliances) {
             const targetAppliances = (_a = currentForm.find((field) => {
                 var _a;
@@ -23,25 +26,36 @@ export const HomeAssistantPanel = ({ children, currentForm, currentStep, onAppli
             })) === null || _a === void 0 ? void 0 : _a.value;
             updateAddedAppliances(targetAppliances);
         }
+        return () => {
+            setHighlight(false);
+        };
     }, [currentForm, isAppliances]);
     const { form, updatedFields } = useSimpleDynamicForm({
         fields: currentForm,
     });
+    const handleClose = () => {
+        onClose();
+        setHighlight(false);
+    };
     if (isLoading)
         return _jsx(Loading, {});
-    return (_jsxs(_Fragment, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, title: t('homeAssistant.title'), icon: IA }) }), _jsxs(DrawerBody, { p: "0", children: [_jsx(HomeAssistantPanelStep, { currentStep: currentStep }), children, isAppliances && (_jsx(ApplianceSteps, { onClick: onApplianceClick, addedAppliances: addedAppliances })), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: text }), _jsx(FormProvider, Object.assign({}, form, { children: _jsx(SimpleDynamicForm, { fields: currentForm }) }))] })] }), _jsx(DrawerFooter, { px: "0", py: "6", bg: "neutral.white", children: _jsx(FooterButtons, { button1: {
+    return (_jsxs(_Fragment, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: handleClose, title: t('homeAssistant.title'), icon: IA }) }), _jsxs(DrawerBody, { p: "0", children: [_jsx(HomeAssistantPanelStep, { currentStep: currentStep }), children, isAppliances && (_jsx(ApplianceSteps, { onClick: onApplianceClick, addedAppliances: addedAppliances })), _jsxs(Stack, { spacing: "base", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: text }), _jsx(FormProvider, Object.assign({}, form, { children: _jsx(SimpleDynamicForm, { fields: currentForm }) }))] })] }), _jsx(DrawerFooter, { px: "0", py: "6", bg: "neutral.white", children: _jsx(FooterButtons, { button1: {
                         buttonStyle: 'secondaryFooter',
                         label: t('buttons.back'),
                         onClick: onBack,
                         isDisabled: backDisabled,
                     }, button2: {
                         buttonStyle: 'primaryFooter',
-                        label: !hasCompleted && currentStep === 6 ? t('buttons.finish') : t('buttons.saveStep'),
+                        label: !hasCompleted && currentStep === 6
+                            ? t('buttons.finish')
+                            : t('buttons.saveStep'),
                         onClick: () => onSave(updatedFields),
-                    }, button3: (!hasCompleted && currentStep === 6) ? undefined : {
-                        buttonStyle: 'primaryFooter',
-                        label: t('buttons.next'),
-                        onClick: onNext,
-                        isDisabled: nextDisabled,
-                    } }) })] }));
+                    }, button3: !hasCompleted && currentStep === 6
+                        ? undefined
+                        : {
+                            buttonStyle: 'primaryFooter',
+                            label: t('buttons.next'),
+                            onClick: onNext,
+                            isDisabled: nextDisabled,
+                        } }) })] }));
 };

package/dist/components/homeBoard/HomeBoard.js

@@ -48,7 +48,7 @@ export const HomeBoard = () => {
             ], onShareContacts: () => null, onDeleteContacts: () => null, handleLoadMore: () => null, showLoadMore: false, loadMoreDisabled: false })),
         PartnerCatalog: (_jsx(PartnerCatalogPanel, { onClose: onRightClose, onPartnerAdd: () => null, partners: partnerCatalogMock })),
         AddHouseholdItem: (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: handleClose, icon: Painting, title: "Add Household Item" }) }), _jsx(DrawerBody, { children: _jsx(DynamicForm, { form: formFieldsMock }) })] })),
-        HomeAssistant: (_jsx(HomeAssistantPanel, { currentStep: homeAssistantCurrentStep, currentForm: currentHomeAssistantForm, onNext: handleHomeAssistantFormChange, onBack: handleHomeAssistantBack, onApplianceClick: () => null, onClose: onRightClose, onSave: () => { }, backDisabled: false, nextDisabled: false, hasCompleted: true, isLoading: false })),
+        HomeAssistant: (_jsx(DrawerContent, { children: _jsx(HomeAssistantPanel, { currentStep: homeAssistantCurrentStep, currentForm: currentHomeAssistantForm, onNext: handleHomeAssistantFormChange, onBack: handleHomeAssistantBack, onApplianceClick: () => null, onClose: onRightClose, onSave: () => { }, backDisabled: false, nextDisabled: false, hasCompleted: true, isLoading: false }) })),
         Notifications: (_jsx(NotificationsPanel, { notifications: notificationsMock, onClose: onRightClose, onDismiss: () => null })),
     };
     const panelSize = currentComponent === 'PartnerCatalog' ? 'lg' : 'md';

package/dist/components/tour/BubbleArrow.js

@@ -8,5 +8,5 @@ export const BubbleArrow = ({ arrowBottom = undefined, arrowLeft = undefined, ar
     const { posX: posXLeft, posY: posYLeft, rotation: rotationLeft, } = ArrowLocationMap[arrowLeft !== null && arrowLeft !== void 0 ? arrowLeft : 'left'];
     const { posX: posXRight, posY: posYRight, rotation: rotationRight, } = ArrowLocationMap[arrowRight !== null && arrowRight !== void 0 ? arrowRight : 'right'];
     const { posX: posXTop, posY: posYTop, rotation: rotationTop, } = ArrowLocationMap[arrowTop !== null && arrowTop !== void 0 ? arrowTop : 'top'];
-    return (_jsxs(_Fragment, { children: [arrowBottom && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXBottom, top: posYBottom, transform: `rotate(${rotationBottom}deg)` })), arrowLeft && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXLeft, top: posYLeft, transform: `rotate(${rotationLeft}deg)` })), arrowRight && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXRight, top: posYRight, transform: `rotate(${rotationRight}deg)` })), arrowTop && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXTop, top: posYTop, transform: `rotate(${rotationTop}deg)` }))] }));
+    return (_jsxs(_Fragment, { children: [arrowBottom && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXBottom, top: posYBottom, transform: `rotate(${rotationBottom}deg)`, filter: "brightness(1.6) saturate(200%)" })), arrowLeft && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXLeft, top: posYLeft, transform: `rotate(${rotationLeft}deg)`, filter: "brightness(1.6) saturate(200%)" })), arrowRight && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXRight, top: posYRight, transform: `rotate(${rotationRight}deg)`, filter: "brightness(1.6) saturate(200%)" })), arrowTop && (_jsx(Image, { src: Arrow, alt: t('tour.arrowAlt'), w: arrowSize, position: "absolute", left: posXTop, top: posYTop, transform: `rotate(${rotationTop}deg)`, filter: "brightness(1.6) saturate(200%)" }))] }));
 };

package/dist/components/tour/HomeBoardTour.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { t } from 'i18next';
 import { Bubble, BubbleText, MeetStep } from '..';
-import { useComponentCoordinates, useComponentStyles, useWindowDimensions, } from '../../hooks';
+import { useComponentCoordinates, useWindowDimensions } from '../../hooks';
 import { appBarHeight, arrowSize, distanceFromEdgeArrowToBorder, firstBubbleHeight, firstBubbleWidth, getDistanceFromArrow, getMiddleAnchorPosition, getXPosition, getYPosition, } from '../../utils';
+import { homeAssistantProxy } from '../../proxies';
 export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px', handleClose, handleStep, meetStepUrl, isActive = false, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
     const [counter, setCounter] = useState(0);
@@ -22,12 +23,19 @@ export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px'
         'addCatalog',
     ];
     const { coordinates } = useComponentCoordinates(componentIds);
-    useComponentStyles({ ids: componentIds, selectedId: currentStep });
+    const { setSelectedId, setHighlight } = homeAssistantProxy;
+    useEffect(() => {
+        setSelectedId(currentStep);
+    }, [currentStep]);
     const { windowDimensions: { width, height }, } = useWindowDimensions();
     const parsedBubbleWidth = Number(bubbleWidth.replace('px', ''));
     const panelBubbleArrowSize = 500 + parsedBubbleWidth + arrowSize;
     const halfBubbleWidth = parsedBubbleWidth / 2;
     const bubbleArrowWidth = parsedBubbleWidth + arrowSize + 10;
+    const handleCloseAndHighlight = () => {
+        handleClose();
+        setHighlight(false);
+    };
     const steps = {
         homeboard: {
             arrowBottom: 'bottom',
@@ -38,7 +46,7 @@ export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px'
             topRef: getMiddleAnchorPosition(height, firstBubbleHeight),
             hideFooter: true,
             hideHeader: true,
-            component: (_jsx(MeetStep, { description: t('tour.steps.meet.homeboardDescription'), nextButtonLabel: t('tour.steps.meet.homeboardLabel'), onClick: () => setCounter(counter + 1), onSkip: handleClose, title: t('tour.steps.meet.homeboardTitle'), tutorialUrl: meetStepUrl })),
+            component: (_jsx(MeetStep, { description: t('tour.steps.meet.homeboardDescription'), nextButtonLabel: t('tour.steps.meet.homeboardLabel'), onClick: () => setCounter(counter + 1), onSkip: handleCloseAndHighlight, title: t('tour.steps.meet.homeboardTitle'), tutorialUrl: meetStepUrl })),
         },
         // Reference component id -> HomeBoard/HomeCard
         editHomeIcon: {
@@ -154,5 +162,5 @@ export const HomeBoardTour = ({ currentStep = 'homeboard', bubbleWidth = '300px'
     };
     if (!isActive)
         return null;
-    return (_jsx(Bubble, { counter: counter, handleClose: handleClose, handleStep: handleStep, setCounter: setCounter, steps: steps }));
+    return (_jsx(Bubble, { counter: counter, handleClose: handleCloseAndHighlight, handleStep: handleStep, setCounter: setCounter, steps: steps }));
 };

package/dist/components/tour/LaunchpadTour.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { t } from 'i18next';
 import { Bubble, BubbleText, HelpIconStep, MeetStep } from '..';
-import { useComponentCoordinates, useComponentStyles, useWindowDimensions, } from '../../hooks';
+import { useComponentCoordinates, useWindowDimensions } from '../../hooks';
 import { appBarHeight, getDistanceFromArrow, getMiddleAnchorPosition, getXPosition, getYPosition, firstBubbleHeight, firstBubbleWidth, } from '../../utils';
+import { homeAssistantProxy } from '../../proxies';
 export const LaunchpadTour = ({ currentStep = 'launchpad', handleStep, handleClose, meetStepUrl, isActive = false, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
     const [counter, setCounter] = useState(0);
@@ -20,9 +21,16 @@ export const LaunchpadTour = ({ currentStep = 'launchpad', handleStep, handleClo
         'forwardReceipts',
     ];
     const { coordinates } = useComponentCoordinates(componentIds);
-    useComponentStyles({ ids: componentIds, selectedId: currentStep });
+    const { setSelectedId, setHighlight } = homeAssistantProxy;
+    useEffect(() => {
+        setSelectedId(currentStep);
+    }, [currentStep]);
     const { windowDimensions: { width, height }, } = useWindowDimensions();
     const cardSize = 220;
+    const handleCloseAndHighlight = () => {
+        handleClose();
+        setHighlight(false);
+    };
     const steps = {
         launchpad: {
             arrowBottom: 'bottom',
@@ -33,7 +41,7 @@ export const LaunchpadTour = ({ currentStep = 'launchpad', handleStep, handleClo
             topRef: getMiddleAnchorPosition(height, firstBubbleHeight),
             hideFooter: true,
             hideHeader: true,
-            component: (_jsx(MeetStep, { description: t('tour.steps.meet.launchpadDescription'), nextButtonLabel: t('tour.steps.meet.launchpadLabel'), onClick: () => setCounter(counter + 1), onSkip: handleClose, title: t('tour.steps.meet.launchpadTitle'), tutorialUrl: meetStepUrl })),
+            component: (_jsx(MeetStep, { description: t('tour.steps.meet.launchpadDescription'), nextButtonLabel: t('tour.steps.meet.launchpadLabel'), onClick: () => setCounter(counter + 1), onSkip: handleCloseAndHighlight, title: t('tour.steps.meet.launchpadTitle'), tutorialUrl: meetStepUrl })),
         },
         // Reference component id -> myHomes/headers/MyHomesHeader
         addHomeButton: {
@@ -103,12 +111,12 @@ export const LaunchpadTour = ({ currentStep = 'launchpad', handleStep, handleClo
             leftRef: ((_s = coordinates.feedback) === null || _s === void 0 ? void 0 : _s.x) - 225,
             topRef: ((_t = coordinates.feedback) === null || _t === void 0 ? void 0 : _t.y) + appBarHeight,
             component: (_jsx(HelpIconStep, { handleClose: () => {
-                    handleClose();
+                    handleCloseAndHighlight();
                     setCounter(0);
                 } })),
         },
     };
     if (!isActive)
         return null;
-    return (_jsx(Bubble, { counter: counter, handleClose: handleClose, handleStep: handleStep, setCounter: setCounter, steps: steps }));
+    return (_jsx(Bubble, { counter: counter, handleClose: handleCloseAndHighlight, handleStep: handleStep, setCounter: setCounter, steps: steps }));
 };

package/dist/components/tour/RoomsBoardTour.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { t } from 'i18next';
 import { Bubble, BubbleText, MeetStep } from '..';
-import { useComponentCoordinates, useComponentStyles, useWindowDimensions, } from '../../hooks';
+import { useComponentCoordinates, useWindowDimensions } from '../../hooks';
 import { getMiddleAnchorPosition, firstBubbleWidth, firstBubbleHeight, } from '../../utils';
+import { homeAssistantProxy } from '../../proxies';
 export const RoomsBoardTour = ({ currentStep = 'addRooms', handleClose, handleStep, meetStepUrl, isActive = false, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const [counter, setCounter] = useState(0);
@@ -16,7 +17,10 @@ export const RoomsBoardTour = ({ currentStep = 'addRooms', handleClose, handleSt
         'addingItems',
     ];
     const { coordinates } = useComponentCoordinates(componentIds);
-    useComponentStyles({ ids: componentIds, selectedId: currentStep });
+    const { setSelectedId } = homeAssistantProxy;
+    useEffect(() => {
+        setSelectedId(currentStep);
+    }, [currentStep]);
     const { windowDimensions: { width, height }, } = useWindowDimensions();
     const steps = {
         addRooms: {

package/dist/helpers/tour/Highlights.helper.d.ts

@@ -0,0 +1 @@
+export declare const highlightIds: string[];

package/dist/helpers/tour/Highlights.helper.js

@@ -0,0 +1,42 @@
+export const highlightIds = Array.from(new Set([
+    'customizeRoomName',
+    'trackRoomValue',
+    'organizeByGroup',
+    'trackGroupValue',
+    'addItemToGroup',
+    'addingItems',
+    'addHomeButton',
+    'assignReceipts',
+    'homeCard',
+    'feedback',
+    'trackStorage',
+    'role',
+    'homePicture',
+    'removeHome',
+    'viewHome',
+    'forwardReceipts',
+    'backToLaunchpad',
+    'editHomeIcon',
+    'addFolders',
+    'folder',
+    'shareWithOthers',
+    'viewContacts',
+    'feedback',
+    'storageUsed',
+    'profile',
+    'forwardReceipts',
+    'viewReceipts',
+    'addCatalog',
+    'homeAssistantButton-1',
+    'homeAssistantButton-2',
+    'homeAssistantButton-3',
+    'homeAssistantButton-4',
+    'homeAssistantButton-5',
+    'homeAssistantButton-6',
+    'homeMonitorButton-1',
+    'homeMonitorButton-2',
+    'homeMonitorButton-3',
+    'homeMonitorButton-4',
+    'homeMonitorButton-5',
+    'homeMonitorButton-6',
+]));

package/dist/helpers/tour/index.d.ts

@@ -1 +1,2 @@
 export * from './ArrowLocations.helper';
+export * from './Highlights.helper';

package/dist/helpers/tour/index.js

@@ -1 +1,2 @@
 export * from './ArrowLocations.helper';
+export * from './Highlights.helper';

package/dist/hooks/forms/useSimpleDynamicForm.js

@@ -17,7 +17,7 @@ export const useSimpleDynamicForm = ({ fields }) => {
         const parsedValue = isCurrency ? parseCurrenyValue(value) : value;
         return Object.assign(Object.assign({}, field), { value: parsedValue, children: (_a = field === null || field === void 0 ? void 0 : field.children) === null || _a === void 0 ? void 0 : _a.map((child) => handleUpdateFields(child, fieldValues)) });
     };
-    const updatedFields = fields.map((field) => {
+    const updatedFields = fields === null || fields === void 0 ? void 0 : fields.map((field) => {
         return handleUpdateFields(field, fieldValues);
     });
     const handleSetDefaultValues = (fields) => {

package/dist/hooks/homeBoard/useHomeBoard.js

@@ -66,6 +66,7 @@ export const useHomeBoard = () => {
         isPanelStep ? onRightOpen() : onRightClose();
     };
     const handleClose = () => {
+        setShowOverlay(true);
         setActiveTour(false);
     };
     const [form, setForm] = useState({

package/dist/hooks/useComponentStyles.d.ts

@@ -1,7 +1,6 @@
 interface UseComponentStyles {
-    ids: string[];
-    selectedId: string;
+    ids?: string[];
     zIndex?: string;
 }
-export declare const useComponentStyles: ({ ids, selectedId, zIndex, }: UseComponentStyles) => void;
+export declare const useComponentStyles: ({ ids, zIndex, }: UseComponentStyles) => void;
 export {};

package/dist/hooks/useComponentStyles.js

@@ -1,5 +1,9 @@
-export const useComponentStyles = ({ ids, selectedId, zIndex = 'auto', }) => {
-    if ((ids === null || ids === void 0 ? void 0 : ids.length) === 0)
+import { highlightIds } from '../helpers/tour';
+import { homeAssistantProxy } from '../proxies';
+import { useSnapshot } from 'valtio';
+export const useComponentStyles = ({ ids = highlightIds, zIndex = '2', }) => {
+    const { highlight, selectedId } = useSnapshot(homeAssistantProxy);
+    if ((ids === null || ids === void 0 ? void 0 : ids.length) === 0 || !selectedId)
         return;
     ids.forEach((id) => {
         const component = document.getElementById(id);
@@ -8,7 +12,7 @@ export const useComponentStyles = ({ ids, selectedId, zIndex = 'auto', }) => {
         }
     });
     const currentComponent = document.getElementById(selectedId);
-    if (currentComponent) {
+    if (currentComponent && highlight) {
         currentComponent.style.zIndex = '1400';
     }
 };

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

@@ -1,6 +1,6 @@
 import { AIGridFieldI, FolderFileI, MenuItemI, PartnerFooterI, TileCtaI } from '../..';
 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' | UIKindTypes | HomeItemTypes;
-export type UIKindTypes = 'tile-body' | 'tile-body-logo' | 'tile-body-header' | 'tile-body-section' | 'tile-body-section-grid' | 'tile-form' | 'tile-body-action' | 'vertical-icon' | 'primary-cta' | 'secondary-cta';
+export type 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';

package/dist/mocks/partner/dynamicTileForm.mock.d.ts

@@ -0,0 +1,2 @@
+import { ReportI } from "../../interfaces";
+export declare const dynamicTileFormMock: ReportI[];

package/dist/mocks/partner/dynamicTileForm.mock.js

@@ -0,0 +1,65 @@
+export const dynamicTileFormMock = [
+    {
+        "id": "stile1p",
+        "name": "",
+        "description": "",
+        "comments": "",
+        "value": "",
+        "type": "tile-body",
+        "visible": true,
+        "children": [
+            {
+                "id": "stilec01",
+                "name": "Shine",
+                "description": "",
+                "comments": "",
+                "value": "https://storage.googleapis.com/homefile-images/shine_logo_updated.png",
+                "type": "tile-body-logo"
+            },
+            {
+                "id": "stilec01test",
+                "name": "Partner Name Here",
+                "description": "",
+                "comments": "",
+                "value": "https://storage.googleapis.com/homefile-images/audreybackgroundimage-update.jpg",
+                "type": "tile-body-partner-image"
+            },
+            {
+                "id": "stilec02test",
+                "name": "Shine",
+                "description": "",
+                "comments": "",
+                "value": "Test description will go here. Test.",
+                "type": "tile-body-description"
+            },
+            {
+                "id": "stile2p",
+                "name": "",
+                "description": "",
+                "comments": "",
+                "value": "",
+                "type": "tile-body-action",
+                "children": [
+                    {
+                        "id": "stilecta1",
+                        "name": "drawer-link",
+                        "description": "",
+                        "comments": "",
+                        "value": "Schedule Service",
+                        "type": "primary-cta",
+                        "link": "stiledf01"
+                    },
+                    {
+                        "id": "stilecta2",
+                        "name": "drawer-link",
+                        "description": "",
+                        "comments": "",
+                        "value": "Request Support",
+                        "type": "secondary-cta",
+                        "link": "stiledf02"
+                    }
+                ]
+            }
+        ]
+    }
+];

package/dist/mocks/partner/index.d.ts

@@ -4,3 +4,4 @@ export * from './details.mock';
 export * from './partnerCatalog.mock';
 export * from './partnerOptions.mock';
 export * from './socialLinks.mock';
+export * from './dynamicTileForm.mock';

package/dist/mocks/partner/index.js

@@ -4,3 +4,4 @@ export * from './details.mock';
 export * from './partnerCatalog.mock';
 export * from './partnerOptions.mock';
 export * from './socialLinks.mock';
+export * from './dynamicTileForm.mock';

package/dist/proxies/homes/homeAssistant.proxy.d.ts

@@ -0,0 +1,8 @@
+interface HomeAssistantProxyI {
+    highlight: boolean;
+    selectedId: string;
+    setHighlight: (highlight: boolean) => void;
+    setSelectedId: (selectedId: string) => void;
+}
+export declare const homeAssistantProxy: HomeAssistantProxyI;
+export {};