@mychoice/mychoice-sdk-modules 2.1.32 → 2.1.33

package/dist/cjs/index.js

@@ -167,9 +167,8 @@ const OfferSection = ({ offerCompany, brokerCompany, offerPrice, phoneNumber, is
         }
         postRequestQuoteOnliaUrl(true, redirectUrl);
     };
-    console.log(offerCompany, "offer c");
     return (jsxRuntime.jsxs("div", { className: `offer-section ${mychoiceCls}`, children: [jsxRuntime.jsx(mychoiceSdkComponents.OfferHeader, { className: isTheBig ? 'thebig-bold' : '', companyName: offerCompany?.name, isBestOffer: isBestOffer }), jsxRuntime.jsx(mychoiceSdkComponents.OfferPrice, { className: isTheBig ? 'thebig' : '', companyLogo: offerCompany?.logo, price: offerPrice }), !isTheBig && offsiteUrl
-                ? (jsxRuntime.jsxs("div", { className: "offer-phone", children: [jsxRuntime.jsx("h3", { children: "Click below to get this rate" }), jsxRuntime.jsx(mychoiceSdkComponents.ButtonBase, { className: `offer-phone-number ${mychoiceCls}`, label: "Buy Online", type: mychoiceSdkComponents.ButtonTypes.Button, category: mychoiceSdkComponents.CategoryTypes.Filled, color: mychoiceSdkComponents.ColorTypes.Primary, variant: mychoiceSdkComponents.ButtonVariantTypes.Rectangle, size: mychoiceSdkComponents.SizeTypes.Medium, onClick: handleCTAClick })] })) : (jsxRuntime.jsxs("div", { className: "offer-phone", children: [jsxRuntime.jsx("h3", { className: isTheBig ? 'thebig-bold' : '', children: "Call now to get this rate" }), jsxRuntime.jsx("a", { target: "_blank", rel: "noreferrer noopener", href: `tel:${phoneNumber?.number}`, children: jsxRuntime.jsx(mychoiceSdkComponents.ButtonBase, { className: `${isTheBig ? 'thebig-bold' : 'mychoice'} offer-phone-number`, label: phoneNumber?.title, type: mychoiceSdkComponents.ButtonTypes.Button, category: mychoiceSdkComponents.CategoryTypes.Filled, color: mychoiceSdkComponents.ColorTypes.Primary, variant: mychoiceSdkComponents.ButtonVariantTypes.Rectangle, size: mychoiceSdkComponents.SizeTypes.Medium }) })] })), jsxRuntime.jsxs("button", { className: "dropdown", onClick: handleDropdownClick, children: [jsxRuntime.jsx("span", { children: detailsIsOpen ? 'Less Info' : 'More Info' }), jsxRuntime.jsx(mychoiceSdkComponents.IconDropdownArrow, { color: "grey", className: detailsIsOpen ? 'rotated' : '' })] }), detailsIsOpen && (jsxRuntime.jsxs("div", { className: "offer-details", children: [jsxRuntime.jsx(mychoiceSdkComponents.OfferDetail, { className: isTheBig ? 'thebig-bold' : '', name: offerCompany?.name, logo: offerCompany?.logo, companyType: mychoiceSdkComponents.CompanyRoleTypes.Offering, description: offerCompany?.description }), jsxRuntime.jsx("hr", {}), (isTheBig || !offsiteUrl)
+                ? (jsxRuntime.jsxs("div", { className: "offer-phone", children: [jsxRuntime.jsx("h3", { children: "Click below to get this rate" }), jsxRuntime.jsx(mychoiceSdkComponents.ButtonBase, { className: `offer-phone-number ${mychoiceCls}`, label: "Buy Online", type: mychoiceSdkComponents.ButtonTypes.Button, category: mychoiceSdkComponents.CategoryTypes.Filled, color: mychoiceSdkComponents.ColorTypes.Primary, variant: mychoiceSdkComponents.ButtonVariantTypes.Rectangle, size: mychoiceSdkComponents.SizeTypes.Medium, onClick: handleCTAClick })] })) : (jsxRuntime.jsxs("div", { className: "offer-phone", children: [jsxRuntime.jsx("h3", { className: isTheBig ? 'thebig-bold' : '', children: "Call now to get this rate" }), jsxRuntime.jsx("a", { target: "_blank", rel: "noreferrer noopener", href: `tel:${phoneNumber?.number}`, children: jsxRuntime.jsx(mychoiceSdkComponents.ButtonBase, { className: `${isTheBig ? 'thebig-bold' : 'mychoice'} offer-phone-number`, label: phoneNumber?.title, type: mychoiceSdkComponents.ButtonTypes.Button, category: mychoiceSdkComponents.CategoryTypes.Filled, color: mychoiceSdkComponents.ColorTypes.Primary, variant: mychoiceSdkComponents.ButtonVariantTypes.Rectangle, size: mychoiceSdkComponents.SizeTypes.Medium }) })] })), jsxRuntime.jsxs("button", { className: "dropdown", onClick: handleDropdownClick, children: [jsxRuntime.jsx("span", { children: detailsIsOpen ? 'Less Info' : 'More Info' }), jsxRuntime.jsx(mychoiceSdkComponents.IconDropdownArrow, { color: "grey", className: detailsIsOpen ? 'rotated' : '' })] }), detailsIsOpen && (jsxRuntime.jsxs("div", { className: "offer-details", children: [jsxRuntime.jsx(mychoiceSdkComponents.OfferDetail, { className: isTheBig ? 'thebig-bold' : '', name: offerCompany?.name, companyType: mychoiceSdkComponents.CompanyRoleTypes.Offering, description: offerCompany?.description }), jsxRuntime.jsx("hr", {}), (isTheBig || !offsiteUrl)
                         && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(mychoiceSdkComponents.OfferDetail, { className: isTheBig ? 'thebig-bold' : '', logo: brokerCompany?.logo, name: brokerCompany?.title, companyType: mychoiceSdkComponents.CompanyRoleTypes.Broker, description: brokerCompany?.description }), jsxRuntime.jsx("hr", {})] })), jsxRuntime.jsx(mychoiceSdkComponents.OfferDetail, { className: isTheBig ? 'thebig-bold' : '', name: "Hours of Operation", children: jsxRuntime.jsx(mychoiceSdkComponents.OperationHoursInfo, { weekdayHours: weekdayHours, saturdayHours: saturdayHours, sundayHours: sundayHours }) })] }))] }));
 };
 OfferSection.defaultProps = {
@@ -3247,7 +3246,9 @@ const ModalQuoteRequest = ({ title, description, phoneNumber, }) => (jsxRuntime.
             && jsxRuntime.jsx("p", { children: description }), jsxRuntime.jsxs("div", { className: "modal-buttons", children: [jsxRuntime.jsx(mychoiceSdkComponents.ButtonBase, { type: mychoiceSdkComponents.ButtonTypes.Button, label: "OK", category: mychoiceSdkComponents.CategoryTypes.Filled, color: mychoiceSdkComponents.ColorTypes.Primary, variant: mychoiceSdkComponents.ButtonVariantTypes.Rectangle, size: mychoiceSdkComponents.SizeTypes.Large }), phoneNumber
                     && (jsxRuntime.jsx("a", { target: "_blank", rel: "noreferrer noopener", href: `tel:1${phoneNumber}`, className: "phoneNumber", children: "Call the Broker" }))] })] }));
 
-const PostalCodeDataBox = ({ title, postalCode, className }) => (jsxRuntime.jsxs("div", { className: `${className} postal-code-data-box`, children: [jsxRuntime.jsx("h2", { children: title }), postalCode && (jsxRuntime.jsxs("p", { children: ["Your postal code:", ' ', postalCode] }))] }));
+const PostalCodeDataBox = ({ title, postalCode, className, id }) => {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { id: id, className: `${className} postal-code-data-box`, children: [jsxRuntime.jsx("h2", { children: title }), postalCode && (jsxRuntime.jsxs("p", { children: ["Your postal code:", ' ', postalCode] }))] }) }));
+};
 PostalCodeDataBox.defaultProps = {
     title: '',
     postalCode: '',
@@ -3261,6 +3262,16 @@ const StepsBox = ({ formSteps, validationHooks, propertyIsCompleted, }) => {
     // const { dispatchAppModalState } = useStoreAppModal();
     // const [steps, setSteps] = useState(formSteps);
     // const [validations, setValidations] = useState(validationHooks);
+    const [showContent, setShowContent] = React.useState(false);
+    React.useEffect(() => {
+        const checkTime = () => {
+            const currentHour = new Date().getUTCHours() - 5; // EST is UTC-5
+            setShowContent(currentHour >= 9 && currentHour < 18);
+        };
+        checkTime(); // Initial check
+        const interval = setInterval(checkTime, 60000); // Check every minute
+        return () => clearInterval(interval); // Cleanup
+    }, []); // Run effect only once on component mount
     const { pathname } = reactRouterDom.useLocation();
     const currentPath = pathname.split('/');
     const activeStep = formSteps.find((step) => currentPath[currentPath.length - 1] === step.path?.substring(1));
@@ -3324,6 +3335,22 @@ const StepsBox = ({ formSteps, validationHooks, propertyIsCompleted, }) => {
             }
         }
     };
+    const [showQR, setShowQr] = React.useState(false);
+    const containerRef = React.useRef(null);
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setShowQr(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+    const handleHelpButton = () => {
+        setShowQr(!showQR);
+    };
     return (jsxRuntime.jsxs("ol", { className: appType === mychoiceSdkComponents.AppTypes.MyChoice ? 'mychoice-navigation-steps-container' : 'navigation-steps-container', children: [!isMobile ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: formSteps?.map((item, index) => {
                     let cls;
                     switch (true) {
@@ -3340,9 +3367,11 @@ const StepsBox = ({ formSteps, validationHooks, propertyIsCompleted, }) => {
                         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
                     }
                     return (jsxRuntime.jsx("div", { role: "presentation", className: appType === mychoiceSdkComponents.AppTypes.MyChoice ? navigationCls : 'navigation-step-container', onKeyDown: handleStepClick(item, index), onClick: handleStepClick(item, index), children: appType === mychoiceSdkComponents.AppTypes.MyChoice
-                            ? jsxRuntime.jsx(mychoiceSdkComponents.MychoiceStep, { className: cls, item: item, index: index }, `${index}-${item?.title}`)
+                            ? jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(mychoiceSdkComponents.MychoiceStep, { className: cls, item: item, index: index }, `${index}-${item?.title}`), jsxRuntime.jsx(mychoiceSdkComponents.ButtonBase, {})] })
                             : jsxRuntime.jsx(mychoiceSdkComponents.Step, { className: cls, item: item, index: index }, `${index}-${item?.title}`) }, `${index}-${item?.title}`));
-                }) })) : jsxRuntime.jsx(mychoiceSdkComponents.Step, { item: formSteps[activeIndex], index: activeIndex, itemsCount: formSteps.length, isMobile: true }), appType === mychoiceSdkComponents.AppTypes.MyChoice && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("hr", {}), jsxRuntime.jsxs("div", { className: "estimated-minutes", children: [jsxRuntime.jsx(mychoiceSdkComponents.IconClock, {}), jsxRuntime.jsxs("div", { children: ["Estimated", ' ', jsxRuntime.jsxs("span", { className: "time", children: [formSteps.length - activeIndex - 1, ' ', formSteps.length - activeIndex - 1 > 1 ? 'minutes' : 'minute'] }), ' ', "to complete"] })] })] }))] }));
+                }) })) : jsxRuntime.jsx(mychoiceSdkComponents.Step, { item: formSteps[activeIndex], index: activeIndex, itemsCount: formSteps.length, isMobile: true }), appType === mychoiceSdkComponents.AppTypes.MyChoice && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("hr", {}), jsxRuntime.jsxs("div", { className: "estimated-minutes", children: [jsxRuntime.jsx(mychoiceSdkComponents.IconClock, {}), jsxRuntime.jsxs("div", { children: ["Estimated", ' ', jsxRuntime.jsxs("span", { className: "time", children: [formSteps.length - activeIndex - 1, ' ', formSteps.length - activeIndex - 1 > 1 ? 'minutes' : 'minute'] }), ' ', "to complete"] })] }), showContent && appType === mychoiceSdkComponents.AppTypes.MyChoice && (jsxRuntime.jsxs("div", { style: { gap: "1em", display: "flex", flexDirection: "column", marginTop: "1em", alignItems: "center", justifyContent: "center", marginLeft: "2em" }, children: [jsxRuntime.jsx("p", { style: { fontWeight: "600" }, children: "Need help? Call us at" }), jsxRuntime.jsxs("div", { ref: containerRef, style: { position: "relative", width: '180px' }, children: [jsxRuntime.jsx(mychoiceSdkComponents.ButtonBase, { size: mychoiceSdkComponents.SizeTypes.Medium, className: "button-with-text button-circle-medium", category: mychoiceSdkComponents.CategoryTypes.Filled, color: mychoiceSdkComponents.ColorTypes.Secondary, variant: mychoiceSdkComponents.ButtonVariantTypes.Circle, onClick: handleHelpButton, children: jsxRuntime.jsx("span", { style: { padding: "0 1rem", fontWeight: "700" }, children: "1-888-453-4644" }) }), showQR && (jsxRuntime.jsx("img", { style: { position: 'absolute', top: '355%', left: '50%', transform: 'translate(-50%, -50%)', opacity: 0, transition: 'opacity 500ms ease-in-out' }, onLoad: (e) => {
+                                            e.currentTarget.style.opacity = '1';
+                                        }, src: "https://www.mychoice.ca/wp-content/themes/mychoice-theme/img/svg/qr-phone-with-text.svg", alt: "QR code scan to call" }))] })] }))] }))] }));
 };
 StepsBox.defaultProps = {
     partnerId: '',
@@ -3427,7 +3456,7 @@ ButtonsBox.defaultProps = {
     activeIndex: 0,
 };
 
-const NavigationTop = ({ title, postalCode, validationHooks, formSteps, clearForm, propertyIsCompleted, }) => {
+const NavigationTop = ({ title, postalCode, validationHooks, formSteps, clearForm, propertyIsCompleted, id, }) => {
     const { pathname } = reactRouterDom.useLocation();
     const { appConfigState: { appType, localIndex } } = mychoiceSdkStore.useStoreAppConfig();
     const isTheBig = appType === mychoiceSdkComponents.AppTypes.TheBig;
@@ -3455,8 +3484,8 @@ const NavigationTop = ({ title, postalCode, validationHooks, formSteps, clearFor
             return `rgba(${r}, ${g}, ${b}, ${alpha})`;
         }
     }
-    return (jsxRuntime.jsx("div", { className: localIndex !== mychoiceSdkComponents.defaultLocalIndex ? 'navigation-container-partner' : 'navigation-container', children: jsxRuntime.jsxs("div", { className: `content ${appType === mychoiceSdkComponents.AppTypes.MyChoice ? 'mychoice' : ''}`, children: [jsxRuntime.jsx(PostalCodeDataBox, { className: isTheBig ? 'thebig' : '', title: title, postalCode: postalCode }), appType === mychoiceSdkComponents.AppTypes.MyChoice
-                    ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isDesktop && (formSteps.length - activeIndex - 1) ? (jsxRuntime.jsxs("div", { className: "estimated-minutes", children: [jsxRuntime.jsx(mychoiceSdkComponents.IconClock, {}), jsxRuntime.jsxs("div", { children: [isMobile ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("span", { className: "time", children: [formSteps.length - activeIndex - 1, ' ', formSteps.length - activeIndex - 1 > 1 ? 'minutes' : 'minute'] }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { children: ["Estimated", ' ', jsxRuntime.jsxs("span", { className: "time", children: [formSteps.length - activeIndex - 1, ' ', formSteps.length - activeIndex - 1 > 1 ? 'minutes' : 'minute'] }), ' ', "to complete"] }) })), jsxRuntime.jsx("span", { children: `Step ${activeIndex + 1}/${formSteps.length - 1}` })] })] })) : jsxRuntime.jsx("span", {}) })) : (jsxRuntime.jsx(StepsBox, { formSteps: formSteps, validationHooks: validationHooks, propertyIsCompleted: propertyIsCompleted })), jsxRuntime.jsx(ButtonsBox, { formSteps: formSteps, validationHooks: validationHooks, clearForm: clearForm, propertyIsCompleted: propertyIsCompleted })] }) }));
+    return (jsxRuntime.jsx("div", { id: id, className: localIndex !== mychoiceSdkComponents.defaultLocalIndex ? 'navigation-container-partner' : 'navigation-container', children: jsxRuntime.jsxs("div", { className: `content ${appType === mychoiceSdkComponents.AppTypes.MyChoice ? 'mychoice' : ''}`, children: [jsxRuntime.jsx(PostalCodeDataBox, { className: isTheBig ? 'thebig' : '', title: title, postalCode: postalCode }), appType === mychoiceSdkComponents.AppTypes.MyChoice
+                    ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !isDesktop && (formSteps.length - activeIndex - 1) ? (jsxRuntime.jsxs("div", { className: "estimated-minutes", children: [jsxRuntime.jsx(mychoiceSdkComponents.IconClock, {}), jsxRuntime.jsxs("div", { children: [isMobile ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("span", { className: "time", children: [formSteps.length - activeIndex - 1, ' ', formSteps.length - activeIndex - 1 > 1 ? 'minutes' : 'minute'] }) }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { children: ["Estimated", ' ', jsxRuntime.jsxs("span", { className: "time", children: [formSteps.length - activeIndex - 1, ' ', formSteps.length - activeIndex - 1 > 1 ? 'minutes' : 'minute'] }), ' ', "to complete"] }) })), jsxRuntime.jsx("span", { children: `Step ${activeIndex + 1}/${formSteps.length - 1}` })] })] })) : jsxRuntime.jsx("span", {}) })) : (jsxRuntime.jsx(StepsBox, { formSteps: formSteps, validationHooks: validationHooks, propertyIsCompleted: propertyIsCompleted })), jsxRuntime.jsx(ButtonsBox, { formSteps: formSteps, validationHooks: validationHooks, clearForm: clearForm, propertyIsCompleted: propertyIsCompleted })] }) }));
 };
 NavigationTop.defaultProps = {
     isMobile: false,
@@ -3959,6 +3988,16 @@ const AppRouteWrapper = (props) => {
     const [steps, setSteps] = React.useState(formSteps[insuranceType]);
     const [validationHooks, setValidationHooks] = React.useState(formValidationHooks[insuranceType]);
     const [progressLength, setProgressLength] = React.useState('');
+    const [showContent, setShowContent] = React.useState(false);
+    React.useEffect(() => {
+        const checkTime = () => {
+            const currentHour = new Date().getUTCHours() - 5; // EST is UTC-5
+            setShowContent(currentHour >= 9 && currentHour < 18);
+        };
+        checkTime(); // Initial check
+        const interval = setInterval(checkTime, 60000); // Check every minute
+        return () => clearInterval(interval); // Cleanup
+    }, []); // Run effect only once on component mount
     React.useEffect(() => {
         let filteredSteps = formSteps[insuranceType];
         let filteredHooks = formValidationHooks[insuranceType];
@@ -4029,7 +4068,23 @@ const AppRouteWrapper = (props) => {
             }
         }
     }, [carPostal, homePostal, lifePostal, isReady]);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isReady && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(AppHeader, {}), jsxRuntime.jsx(AppModal, {}), insuranceType && (jsxRuntime.jsx(NavigationTop, { title: `${insuranceType.replace(/^./, insuranceType[0].toUpperCase())} Insurance Quote`, postalCode: postalCode, formSteps: steps, validationHooks: validationHooks, clearForm: clearFormData, propertyIsCompleted: isCompleted })), insuranceType && appType === mychoiceSdkComponents.AppTypes.MyChoice && (jsxRuntime.jsx("div", { className: localIndex !== mychoiceSdkComponents.defaultLocalIndex ? 'step-progress-bar-partner' : 'step-progress-bar', children: jsxRuntime.jsx("span", { style: { width: progressLength } }) })), jsxRuntime.jsx("div", { className: `${insuranceType ? 'form-page-content' : ''} ${insuranceType && appType === mychoiceSdkComponents.AppTypes.MyChoice ? 'mychoice' : ''}`, children: insuranceType && appType === mychoiceSdkComponents.AppTypes.MyChoice && isDesktop && progressLength ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "mychoice-content", children: [jsxRuntime.jsx(StepsBox, { className: "step-box", formSteps: steps, validationHooks: validationHooks, propertyIsCompleted: isCompleted }), children, jsxRuntime.jsx("div", { className: "empty-steps-container" })] }) })) : children }), isMychoice && !appLoaderState.isOpen && jsxRuntime.jsx(ProviderImageFooter, {})] })) }));
+    const isMobile = appDeviceType === mychoiceSdkComponents.DeviceTypes.Mobile;
+    const [showStickyBanner, setShowStickyBanner] = React.useState(false);
+    React.useEffect(() => {
+        const handleScroll = () => {
+            const postalCodeDataBox = document.getElementById('postalCodeData');
+            if (postalCodeDataBox) {
+                const postalCodeDataBoxRect = postalCodeDataBox.getBoundingClientRect();
+                const isScrolledPast = postalCodeDataBoxRect.bottom <= 0; // Change to <= if you want the banner to appear when the bottom of the box touches the top of the viewport
+                setShowStickyBanner(isScrolledPast);
+            }
+        };
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isReady && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(AppHeader, {}), jsxRuntime.jsx(AppModal, {}), insuranceType && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(NavigationTop, { title: `${insuranceType.replace(/^./, insuranceType[0].toUpperCase())} Insurance Quote`, postalCode: postalCode, formSteps: steps, validationHooks: validationHooks, clearForm: clearFormData, propertyIsCompleted: isCompleted, id: "postalCodeData" }) })), showStickyBanner && showContent && isMobile && appType === mychoiceSdkComponents.AppTypes.MyChoice && (jsxRuntime.jsxs("div", { id: "stickyBanner", style: { position: "sticky", top: 0, color: "#FFFFFF", backgroundColor: "#8ED6DC", width: "100%", height: "75px", zIndex: 5000, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }, children: [jsxRuntime.jsx("p", { style: { fontWeight: 700, fontSize: "22px" }, children: "Need Help? Give us a call at" }), jsxRuntime.jsx("a", { style: { marginTop: "5px" }, href: "tel:18884534644", children: "1-888-453-4644" })] })), insuranceType && appType === mychoiceSdkComponents.AppTypes.MyChoice && (jsxRuntime.jsx("div", { className: localIndex !== mychoiceSdkComponents.defaultLocalIndex ? 'step-progress-bar-partner' : 'step-progress-bar', children: jsxRuntime.jsx("span", { style: { width: progressLength } }) })), jsxRuntime.jsx("div", { className: `${insuranceType ? 'form-page-content' : ''} ${insuranceType && appType === mychoiceSdkComponents.AppTypes.MyChoice ? 'mychoice' : ''}`, children: insuranceType && appType === mychoiceSdkComponents.AppTypes.MyChoice && isDesktop && progressLength ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "mychoice-content", children: [jsxRuntime.jsx(StepsBox, { className: "step-box", formSteps: steps, validationHooks: validationHooks, propertyIsCompleted: isCompleted }), children, jsxRuntime.jsx("div", { className: "empty-steps-container" })] }) })) : children }), isMychoice && !appLoaderState.isOpen && jsxRuntime.jsx(ProviderImageFooter, {})] })) }));
 };
 const NestedRoutes = () => {
     const insuranceType = mychoiceSdkComponents.getInsuranceType();