@mychoice/mychoice-sdk-modules 2.0.1 → 2.1.0

package/dist/cjs/index.js

@@ -7,6 +7,7 @@ var mychoiceSdkComponents = require('@mychoice/mychoice-sdk-components');
 var mychoiceSdkStore = require('@mychoice/mychoice-sdk-store');
 var reactRouterDom = require('react-router-dom');
 var React = require('react');
+var lodash = require('lodash');
 var GooglePlacesAutocomplete = require('react-google-places-autocomplete');
 var reactSelect = require('react-select');
 var reactHelmet = require('react-helmet');
@@ -1760,6 +1761,62 @@ const SectionQuoteRecalc$1 = () => {
     return (jsxRuntime.jsxs("div", { className: "form-container", children: [jsxRuntime.jsx(TabVehicle, { readOnly: true }), jsxRuntime.jsxs("div", { className: `form-section edit-recalc-container ${mychoiceCls}`, children: [jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.coverageOptions, name: "comprehensive-coverage", onChange: handleComprehensiveChange, defaultValue: getSelectedOption(mychoiceSdkComponents.coverageOptions, comprehensive.coverage ? comprehensive.deductible : 0), title: "Comprehensive coverage", description: "This deductible is the amount of money that you will pay out of your own pocket if your vehicle is  damaged in events not covered by collision coverage. This includes events such as falling or flying objects, vandalism, and theft. Your insurance company covers the cost of repair minus the deductible chosen.", placeholder: "Select from the list", autoSelectIfValueIsOutOfOptions: false }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.coverageOptions, name: "collision-coverage", onChange: handleCollisionChange, defaultValue: getSelectedOption(mychoiceSdkComponents.coverageOptions, collision.coverage ? collision.deductible : 0), title: "Collision coverage", description: "This deductible is the specific dollar amount you will pay out of your own pocket if your vehicle is damaged in an accident. Your insurance company covers the remaining amount.", placeholder: "Select from the list", autoSelectIfValueIsOutOfOptions: false }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.liabilityOptions, name: "liability-limit", onChange: handleLiabilityChange, defaultValue: getSelectedOption(mychoiceSdkComponents.liabilityOptions, liability.coverage ? liability.limit : 1000000), title: "Third Party Liability", description: "This protects you from lawsuits resulting from accidents causing bodily injury or death to others or property damage.", placeholder: "Select from the list", autoSelectIfValueIsOutOfOptions: false }), jsxRuntime.jsx(BlockSubmit$2, { className: `${isTheBig ? 'thebig-bold' : 'mychoice'} recalculate`, label: "Recalculate Quote", buttonSize: mychoiceSdkComponents.SizeTypes.Medium, isRecalc: true }), isTheBig && jsxRuntime.jsx(BlockEndorsements, {})] })] }));
 };
 
+const BlockConfirmImages = () => (jsxRuntime.jsxs("div", { className: "image-section", children: [jsxRuntime.jsx("div", { className: "providers-title", children: "We compare rates from Canada's top providers, including:" }), jsxRuntime.jsxs("div", { className: "providers-carousel", children: [jsxRuntime.jsx("img", { width: "175", height: "70", src: "https://www.mychoice.ca/wp-content/uploads/2023/02/logo-3.png", alt: "S.G.I. Canada" }), jsxRuntime.jsx("img", { width: "175", height: "70", src: "https://www.mychoice.ca/wp-content/uploads/2023/02/logo-5.png", alt: "Onlia Insurance" }), jsxRuntime.jsx("img", { width: "175", height: "70", src: "https://www.mychoice.ca/wp-content/uploads/2023/02/logo-4.png", alt: "Economical insurance" }), jsxRuntime.jsx("img", { width: "175", height: "70", src: "https://www.mychoice.ca/wp-content/uploads/2023/02/logo-1.png", alt: "CAA" }), jsxRuntime.jsx("img", { width: "175", height: "70", src: "https://www.mychoice.ca/wp-content/uploads/2023/06/Coachman-logo-2.png", alt: "Coachman" })] })] }));
+
+const lockEmoji = '\u{1F512}';
+const savedPercentage = lodash.random(25, 30);
+const SectionConfirm = () => {
+    const { discountState, dispatchDiscountState } = mychoiceSdkStore.useStoreFormCarDiscount();
+    const { postPerformLeadsAction } = mychoiceSdkStore.CarQuoteDataHandler();
+    const { quoteState } = mychoiceSdkStore.useStoreFormCarQuote();
+    const { appDeviceType } = mychoiceSdkStore.useStoreDeviceType();
+    const { quoterInfo } = discountState;
+    const { items: quotes } = quoteState;
+    const { firstName, lastName, phone } = quoterInfo;
+    const bestQuote = quotes.length ? quotes[0] : null;
+    const [comparedCountMax] = React.useState(lodash.random(1021, 1502));
+    const [comparedCountMin, setComparedCountMin] = React.useState(1000);
+    React.useEffect(() => {
+        if (comparedCountMin < comparedCountMax) {
+            const intervalId = setInterval(() => {
+                setComparedCountMin((prev) => prev + 1);
+            }, 2.5);
+            return () => {
+                clearInterval(intervalId);
+            };
+        }
+        return () => { };
+    }, [comparedCountMax, comparedCountMin]);
+    const handleFirstNameChange = ({ value }) => {
+        dispatchDiscountState({
+            type: mychoiceSdkStore.StoreFormCarDiscountActionTypes.FormCarDiscountQuoterFirstNameSet,
+            payload: { firstName: value },
+        });
+    };
+    const handleLastNameChange = ({ value }) => {
+        dispatchDiscountState({
+            type: mychoiceSdkStore.StoreFormCarDiscountActionTypes.FormCarDiscountQuoterLastNameSet,
+            payload: { lastName: value },
+        });
+    };
+    const handlePhoneNumberChange = ({ value }) => {
+        dispatchDiscountState({
+            type: mychoiceSdkStore.StoreFormCarDiscountActionTypes.FormCarDiscountQuoterPhoneSet,
+            payload: { phone: value },
+        });
+    };
+    const handleSubmit = async () => {
+        await postPerformLeadsAction?.();
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+        });
+    };
+    if (!bestQuote)
+        return null;
+    return (jsxRuntime.jsxs("div", { style: { zIndex: '1' }, children: [jsxRuntime.jsxs("div", { className: "shadow-box mb", children: [jsxRuntime.jsx("div", { className: "large-title", children: "10+ Quotes Found" }), jsxRuntime.jsx("p", { children: "Complete the last step to reveal which insurance companies are offering these rates." })] }), jsxRuntime.jsxs("div", { className: "shadow-box", children: [jsxRuntime.jsx("div", { className: "highlighted-heading", children: "Best Offer" }), jsxRuntime.jsx("h1", { children: `$${bestQuote.priceMonthly} / month` }), jsxRuntime.jsx("div", { className: "highlighted-heading", children: jsxRuntime.jsx("span", { children: `$${bestQuote.priceYearly} / year` }) })] }), jsxRuntime.jsxs("div", { className: "statistics-wrapper", children: [jsxRuntime.jsx("div", { className: "counter", id: "output", children: comparedCountMin }), jsxRuntime.jsx("div", { className: "divider" }), jsxRuntime.jsx("div", { style: { textAlign: 'center', fontSize: '1.15rem', marginTop: '10px' }, children: `Canadians have compared rates in the last 24 hours and saved ${savedPercentage}% on average` })] }), jsxRuntime.jsx("div", { style: { marginBottom: '2rem' }, children: jsxRuntime.jsx("div", { className: "all-quotes-form", children: jsxRuntime.jsx("h2", { style: { whiteSpace: 'normal', marginTop: '20px', textAlign: 'center' }, children: `${lockEmoji} Complete the form below to see which companies are offering your quotes.` }) }) }), jsxRuntime.jsx("div", { style: { marginBottom: '1rem' }, children: jsxRuntime.jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Your First Name", error: !firstName && discountState.inValidation, errorMessage: getErrorMessage(firstName, discountState.inValidation) }) }), jsxRuntime.jsx("div", { style: { marginBottom: '1rem' }, children: jsxRuntime.jsx(InputFormBox, { name: "lastname", title: "Last Name", onChange: handleLastNameChange, defaultValue: lastName, placeholder: "Your Last Name", error: !lastName && discountState.inValidation, errorMessage: getErrorMessage(lastName, discountState.inValidation) }) }), jsxRuntime.jsx("div", { style: { marginBottom: '1rem' }, children: jsxRuntime.jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(111) 111-1111", error: !phone && discountState.inValidation, errorMessage: getErrorMessage(phone, discountState.inValidation) }) }), jsxRuntime.jsx("div", { className: "submit-wrapper", children: jsxRuntime.jsx(mychoiceSdkComponents.ButtonBase, { className: "mychoice", size: mychoiceSdkComponents.SizeTypes.Large, category: mychoiceSdkComponents.CategoryTypes.Filled, onClick: handleSubmit, color: mychoiceSdkComponents.ColorTypes.Primary, label: "Get Your Quote" }) }), jsxRuntime.jsxs("div", { className: "extra-info", children: [jsxRuntime.jsx("h5", { children: "On the next page, you will also be able to:" }), jsxRuntime.jsx("div", { className: "next-page-points", children: jsxRuntime.jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [jsxRuntime.jsxs("div", { className: "bullet-container", children: [jsxRuntime.jsx("div", { className: "bullet-point", children: "1" }), jsxRuntime.jsx("div", { children: "See what rates insurance carriers are offering" })] }), jsxRuntime.jsxs("div", { className: "bullet-container", children: [jsxRuntime.jsx("div", { className: "bullet-point", children: "2" }), jsxRuntime.jsx("div", { children: "Get in touch with a broker and secure your rate" })] }), jsxRuntime.jsxs("div", { className: "bullet-container", children: [jsxRuntime.jsx("div", { className: "bullet-point", children: "3" }), jsxRuntime.jsx("div", { children: "Potentially save more by speaking with a broker" })] })] }) }), jsxRuntime.jsx("div", { className: "privacy-policy", children: jsxRuntime.jsxs("p", { children: ["Once you submit this form, you are agreeing to have your insurance quote sent to you via email and My Choice will provide your contact information to one of our trusted broker partners, who will contact you after your quote is complete to further assist you in securing your best rate. For more details, see our", jsxRuntime.jsx("a", { href: "https://www.mychoice.ca/privacy-policy/", children: " Privacy Policy" }), "."] }) })] }), appDeviceType === mychoiceSdkComponents.DeviceTypes.Mobile && jsxRuntime.jsx(BlockConfirmImages, {})] }));
+};
+
 const SplashScreen$2 = () => {
     const { discountState } = mychoiceSdkStore.useStoreFormCarDiscount();
     const phoneObject = formatPhoneObject(discountState.quoterInfo.brokerInfo?.phone) || {};
@@ -1769,6 +1826,7 @@ const SplashScreen$2 = () => {
 };
 
 const PageCarQuote = () => {
+    const { appConfigState: { appType } } = mychoiceSdkStore.useStoreAppConfig();
     const { vehicleFormValidate, vehicleFormIsValid } = mychoiceSdkStore.useValidationVehicle();
     const { driverFormValidate, driverFormIsValid } = mychoiceSdkStore.useValidationDriver();
     const { carDiscountFormValidate, carDiscountFormIsValid } = mychoiceSdkStore.useValidationCarDiscount();
@@ -1776,7 +1834,10 @@ const PageCarQuote = () => {
     const { postRequestQuote } = mychoiceSdkStore.CarQuoteDataHandler();
     const { appLoaderState } = mychoiceSdkStore.useStoreAppLoader();
     const { appDeviceType } = mychoiceSdkStore.useStoreDeviceType();
-    const { items } = quoteState;
+    const { items, quoteConfirm } = quoteState;
+    const isTheBig = appType === mychoiceSdkComponents.AppTypes.TheBig;
+    const hasConfirmStep = items?.length && !isTheBig && items[0]?.confirmQuote && quoteConfirm;
+    const quoteItems = hasConfirmStep ? items?.slice(0, 3) : items;
     mychoiceSdkComponents.useEffectOnce(() => {
         if (!vehicleFormIsValid) {
             vehicleFormValidate();
@@ -1795,27 +1856,25 @@ const PageCarQuote = () => {
             behavior: 'smooth',
         });
     });
-    return (jsxRuntime.jsx("div", { className: "quote-page-content", children: !appLoaderState.isOpen
-            && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "form-section-container", children: [appDeviceType === mychoiceSdkComponents.DeviceTypes.Mobile && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !!items?.length && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !quoteState.showCallMessage
-                                        ? (jsxRuntime.jsx("div", { className: "offer-container", children: jsxRuntime.jsx(OfferSection, { isBestOffer: true, offerCompany: items[0]?.company, brokerCompany: items[0]?.brokerProfile, offerPrice: {
-                                                    monthly: items[0]?.priceMonthly,
-                                                    yearly: items[0]?.priceYearly,
-                                                }, operationHours: {
-                                                    saturdayHours: items[0]?.brokerProfile.hoursSaturday,
-                                                    sundayHours: items[0]?.brokerProfile.hoursSunday,
-                                                    weekdayHours: items[0]?.brokerProfile.hoursWorkdays,
-                                                }, phoneNumber: formatPhoneObject(items[0]?.brokerProfile.phone), redirectUrl: items[0]?.brokerProfile.redirectUrl || '' }) }))
-                                        : jsxRuntime.jsx(SplashScreen$2, {}) })) })), jsxRuntime.jsx(SectionQuoteEdit$2, {}), jsxRuntime.jsx(SectionQuoteRecalc$1, {})] }), appDeviceType !== mychoiceSdkComponents.DeviceTypes.Mobile && quoteState.showCallMessage
-                        && jsxRuntime.jsx(SplashScreen$2, {}), !quoteState.showCallMessage
-                        && (jsxRuntime.jsx("div", { className: "offer-container", children: !!items?.length
-                                && items.map(({ company, brokerProfile, priceMonthly, priceYearly, }, index) => (jsxRuntime.jsx("div", { children: (appDeviceType !== mychoiceSdkComponents.DeviceTypes.Mobile || (appDeviceType === mychoiceSdkComponents.DeviceTypes.Mobile && index !== 0)) && (jsxRuntime.jsx(OfferSection, { isBestOffer: index === 0, offerCompany: company, brokerCompany: brokerProfile, offerPrice: {
+    return (jsxRuntime.jsx("div", { className: "quote-page-content", children: !appLoaderState.isOpen && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "form-section-container", children: [appDeviceType === mychoiceSdkComponents.DeviceTypes.Mobile && !hasConfirmStep && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !!items?.length && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: !quoteState.showCallMessage
+                                    ? (jsxRuntime.jsx("div", { className: "offer-container", children: jsxRuntime.jsx(OfferSection, { isBestOffer: true, offerCompany: items[0]?.company, brokerCompany: items[0]?.brokerProfile, offerPrice: {
+                                                monthly: items[0]?.priceMonthly,
+                                                yearly: items[0]?.priceYearly,
+                                            }, operationHours: {
+                                                saturdayHours: items[0]?.brokerProfile.hoursSaturday,
+                                                sundayHours: items[0]?.brokerProfile.hoursSunday,
+                                                weekdayHours: items[0]?.brokerProfile.hoursWorkdays,
+                                            }, phoneNumber: formatPhoneObject(items[0]?.brokerProfile.phone), redirectUrl: items[0]?.brokerProfile.redirectUrl || '' }) }))
+                                    : jsxRuntime.jsx(SplashScreen$2, {}) })) })), (!hasConfirmStep || appDeviceType !== mychoiceSdkComponents.DeviceTypes.Mobile) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SectionQuoteEdit$2, {}), jsxRuntime.jsx(SectionQuoteRecalc$1, {})] }))] }), appDeviceType !== mychoiceSdkComponents.DeviceTypes.Mobile && quoteState.showCallMessage
+                    && jsxRuntime.jsx(SplashScreen$2, {}), !quoteState.showCallMessage && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { style: { position: 'relative', width: '100%' }, children: [hasConfirmStep && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "offer-container", children: jsxRuntime.jsx(SectionConfirm, {}) }), appDeviceType === mychoiceSdkComponents.DeviceTypes.Mobile
+                                        && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SectionQuoteEdit$2, {}), jsxRuntime.jsx(SectionQuoteRecalc$1, {})] }))] })), jsxRuntime.jsx("div", { className: `offer-container ${hasConfirmStep ? 'blur' : ''}`, children: !!items?.length && quoteItems.map(({ company, brokerProfile, priceMonthly, priceYearly, }, index) => (jsxRuntime.jsx("div", { children: (appDeviceType !== mychoiceSdkComponents.DeviceTypes.Mobile || (appDeviceType === mychoiceSdkComponents.DeviceTypes.Mobile && index !== 0)) && (jsxRuntime.jsx(OfferSection, { isBestOffer: index === 0, offerCompany: company, brokerCompany: brokerProfile, offerPrice: {
                                             monthly: priceMonthly,
                                             yearly: priceYearly,
                                         }, operationHours: {
                                             saturdayHours: brokerProfile.hoursSaturday,
                                             sundayHours: brokerProfile.hoursSunday,
                                             weekdayHours: brokerProfile.hoursWorkdays,
-                                        }, phoneNumber: formatPhoneObject(brokerProfile.phone), redirectUrl: brokerProfile.redirectUrl || '' })) }, index))) }))] })) }));
+                                        }, phoneNumber: formatPhoneObject(brokerProfile.phone), redirectUrl: brokerProfile.redirectUrl || '' })) }, index))) })] }) })), appDeviceType !== mychoiceSdkComponents.DeviceTypes.Mobile && hasConfirmStep && jsxRuntime.jsx(BlockConfirmImages, {})] })) }));
 };
 
 const IndicatorsContainer = () => jsxRuntime.jsx(jsxRuntime.Fragment, {});