@mychoice/mychoice-sdk-modules 2.2.32 → 2.2.34

package/dist/cjs/index.js

@@ -365,25 +365,23 @@ const BlockNextPageInfo$2 = () => {
 
 const BlockSubmit$2 = ({ className, label, buttonSize, isRecalc = false, onSubmitClick, }) => {
     const { quoteState: { isRequested, quoteConfirm } } = mychoiceSdkStore.useStoreFormCarQuote();
-    const { discountState: { isValid } } = mychoiceSdkStore.useStoreFormCarDiscount();
     const { appConfigState: { localIndex, insuranceType } } = mychoiceSdkStore.useStoreAppConfig();
     const navigate = reactRouterDom.useNavigate();
     const { postRequestQuote } = mychoiceSdkStore.CarQuoteDataHandler();
     const { carDiscountFormValidate } = mychoiceSdkStore.useValidationCarDiscount();
     const handleGetQuotesClick = () => {
         onSubmitClick?.();
-        if (!isValid) {
-            carDiscountFormValidate(false, () => postRequestQuote(isRecalc, quoteConfirm));
-        }
-        else if (isRecalc) {
-            postRequestQuote(isRecalc, quoteConfirm);
-        }
-        else if (!isRequested) {
-            postRequestQuote(false, quoteConfirm);
-        }
-        else {
-            navigate(`/${localIndex || mychoiceSdkComponents.defaultLocalIndex}/${insuranceType}/quotes`);
-        }
+        carDiscountFormValidate(false, () => {
+            if (isRecalc) {
+                postRequestQuote(isRecalc, quoteConfirm);
+            }
+            else if (!isRequested) {
+                postRequestQuote(false, quoteConfirm);
+            }
+            else {
+                navigate(`/${localIndex || mychoiceSdkComponents.defaultLocalIndex}/${insuranceType}/quotes`);
+            }
+        });
     };
     return (jsxRuntime.jsx(mychoiceSdkComponents.ButtonBase, { className: className, size: buttonSize, category: mychoiceSdkComponents.CategoryTypes.Filled, onClick: handleGetQuotesClick, color: mychoiceSdkComponents.ColorTypes.Primary, label: label }));
 };
@@ -1345,8 +1343,6 @@ const SectionDriverInfo = () => {
 
 // Max months between consecutive Ontario GDL licence classes (spec 1-2 e/f)
 const ON_MAX_MONTHS_BETWEEN_CLASSES = 60;
-const ON_MIN_MONTHS_G1_TO_G2 = 8;
-const ON_MIN_MONTHS_G1_TO_G = 20;
 const SectionDriverLicence = () => {
     const { appConfigState: { appType }, } = mychoiceSdkStore.useStoreAppConfig();
     const [driverEducation, setDriverEducation] = React.useState(false);
@@ -1377,7 +1373,7 @@ const SectionDriverLicence = () => {
     const policyEffectiveDate = policyStartYear && policyStartMonth && policyStartDay
         ? `${policyStartYear}-${policyStartMonth}-${policyStartDay}`
         : policyStart || today;
-    const { g, g1, g2, minLicenceAge } = configState.licenceConfig;
+    const { g, g1, g2, minLicenceAge, } = configState.licenceConfig;
     const licenceTypeOptions = [
         { value: g.name, name: g.title },
         { value: g1.name, name: g1.title },
@@ -1565,22 +1561,31 @@ const SectionDriverLicence = () => {
             && q1Month === birthMonth
             ? `${q1Year}-${birthMonth}-${birthDay}`
             : q1Date;
+        const q1IntervalDate = q1Date;
         const q1MonthsFromEffective = q1BirthdayDate
             ? mychoiceSdkComponents.getDifferenceInMonths(policyEffectiveDate, q1BirthdayDate)
             : Infinity;
-        // A G2 requires at least 8 months after G1; a G requires another 12 months.
-        const canHaveG2 = !!q1Date && q1MonthsFromEffective >= ON_MIN_MONTHS_G1_TO_G2;
-        const canHaveG = !!q1Date && q1MonthsFromEffective >= ON_MIN_MONTHS_G1_TO_G;
+        const q1IntervalMonthsFromEffective = q1IntervalDate
+            ? mychoiceSdkComponents.getDifferenceInMonths(policyEffectiveDate, q1IntervalDate)
+            : Infinity;
+        const q1HasStarted = !!q1IntervalDate && q1IntervalMonthsFromEffective >= 0;
+        const canHaveG2 = q1HasStarted;
+        const canHaveGAfterG2 = !!g2Date && mychoiceSdkComponents.getDifferenceInMonths(policyEffectiveDate, g2Date) >= 0;
+        const canHaveGWithoutG2 = q1HasStarted;
+        const canHaveG = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G2
+            ? q1HasStarted
+            : ((receivedG2 === true && canHaveGAfterG2)
+                || (receivedG2 === false && canHaveGWithoutG2));
         // ── path booleans ──
         const showG2Question = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G1 && canHaveG2;
         const showG2Date = showG2Question && receivedG2 === true;
-        // G question shows after G2 date entered (G1→G2 path) OR after No-G2 answer (G1→No G2 path)
+        // G question shows after G2 date entered (G1->G2 path) OR after No-G2 answer (G1->No G2 path)
         const showGQuestionAfterG1 = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G1
-            && canHaveG
-            && (receivedG2 === false || showG2Date);
+            && canHaveG;
         const showGQuestionAfterG2 = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G2 && canHaveG;
         const showGDateAfterG1 = showGQuestionAfterG1 && receivedG === true;
         const showGDateAfterG2 = showGQuestionAfterG2 && receivedG === true;
+        const isDirectGWithoutG2 = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G1 && receivedG2 === false;
         // G1 branch: ask once, based on the first licence date (< 5 years / 60 months).
         const showDtcG1Only = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G1
             && !!q1Date
@@ -1593,6 +1598,21 @@ const SectionDriverLicence = () => {
         const showDtcGFull = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G
             && !!q1Date
             && q1MonthsFromEffective < 36;
+        // G preceding date: G2 date if on G1->G2->G path, else Q1 date.
+        const gPrecedingDate = receivedG2 === true && g2Date ? g2Date : q1IntervalDate;
+        // ── Min dates (capped to the policy effective date so a future policy remains selectable) ──
+        const capMinDateToPolicy = (minDate) => (minDate && mychoiceSdkComponents.compareDates(minDate, policyEffectiveDate) > 0 ? policyEffectiveDate : minDate);
+        const g2MinRaw = q1IntervalDate;
+        const gMinRaw = (() => {
+            if (!gPrecedingDate)
+                return '';
+            if ((showGDateAfterG1 && showG2Date) || firstClass === mychoiceSdkComponents.DriverLicenceTypes.G2) {
+                return gPrecedingDate;
+            }
+            return gPrecedingDate;
+        })();
+        const g2MinDate = capMinDateToPolicy(g2MinRaw);
+        const gMinDate = capMinDateToPolicy(gMinRaw);
         // ── Validation error messages ──
         const q1MinDate = getG1MinDate();
         const q1ChronoError = driverState.inValidation
@@ -1602,24 +1622,19 @@ const SectionDriverLicence = () => {
             ? 'License dates cannot be in the future' : '';
         const q1Error = q1FutureError || q1ChronoError || getDateErrorMessage(['01', q1Month, q1Year], driverState.inValidation);
         const g2ChronoError = driverState.inValidation
-            ? validateLicenceDate(g2LicenceYear, g2LicenceMonth, q1BirthdayDate)
+            ? validateLicenceDate(g2LicenceYear, g2LicenceMonth, q1IntervalDate)
             : '';
-        const g260MonthError = validate60Months(q1BirthdayDate?.slice(0, 4), q1BirthdayDate?.slice(5, 7), g2LicenceYear, g2LicenceMonth);
+        const g260MonthError = validate60Months(q1IntervalDate?.slice(0, 4), q1IntervalDate?.slice(5, 7), g2LicenceYear, g2LicenceMonth);
         const g2FutureError = g2Date && mychoiceSdkComponents.compareDates(g2Date, policyEffectiveDate) > 0 ? 'License dates cannot be in the future' : '';
         const g2Error = g2FutureError || g260MonthError || g2ChronoError || getDateErrorMessage(['01', g2LicenceMonth, g2LicenceYear], driverState.inValidation);
-        // G preceding date: G2 date if on G1→G2→G path, else Q1 date
-        const gPrecedingDate = showGDateAfterG1 && showG2Date ? g2Date : q1BirthdayDate;
         const gChronoError = driverState.inValidation
             ? validateLicenceDate(gLicenceYear, gLicenceMonth, gPrecedingDate)
             : '';
-        const g60MonthError = validate60Months(gPrecedingDate?.slice(0, 4), gPrecedingDate?.slice(5, 7), gLicenceYear, gLicenceMonth);
+        const g60MonthError = isDirectGWithoutG2
+            ? ''
+            : validate60Months(gPrecedingDate?.slice(0, 4), gPrecedingDate?.slice(5, 7), gLicenceYear, gLicenceMonth);
         const gFutureError = gDate && mychoiceSdkComponents.compareDates(gDate, policyEffectiveDate) > 0 ? 'License dates cannot be in the future' : '';
         const gError = gFutureError || g60MonthError || gChronoError || getDateErrorMessage(['01', gLicenceMonth, gLicenceYear], driverState.inValidation);
-        // ── Min dates (capped to the policy effective date so a future policy remains selectable) ──
-        const g2MinRaw = q1BirthdayDate && mychoiceSdkComponents.compareDates(q1BirthdayDate, gTwoMin) > 0 ? q1BirthdayDate : gTwoMin;
-        const g2MinDate = mychoiceSdkComponents.compareDates(g2MinRaw, policyEffectiveDate) > 0 ? policyEffectiveDate : g2MinRaw;
-        const gMinRaw = gPrecedingDate && mychoiceSdkComponents.compareDates(gPrecedingDate, gMin) > 0 ? gPrecedingDate : gMin;
-        const gMinDate = mychoiceSdkComponents.compareDates(gMinRaw, policyEffectiveDate) > 0 ? policyEffectiveDate : gMinRaw;
         const getMonthPickerMinDate = (minDate) => {
             if (!minDate || mychoiceSdkComponents.getFormattedDate(minDate, 'dd') === '01')
                 return minDate;
@@ -1633,8 +1648,8 @@ const SectionDriverLicence = () => {
             const max60 = mychoiceSdkComponents.addMonthsToDate(refDate, ON_MAX_MONTHS_BETWEEN_CLASSES);
             return mychoiceSdkComponents.compareDates(policyEffectiveDate, max60) > 0 ? max60 : policyEffectiveDate;
         };
-        const g2MaxDate = getMax60Date(q1BirthdayDate);
-        const gMaxDate = getMax60Date(gPrecedingDate);
+        const g2MaxDate = getMax60Date(q1IntervalDate);
+        const gMaxDate = isDirectGWithoutG2 ? policyEffectiveDate : getMax60Date(gPrecedingDate);
         return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsxRuntime.jsx(DateSelectFormBox, { name: "firstLicenceDate", dateNames: ['firstLicenceYear', 'firstLicenceMonth'], onDateChange: handleLicenceDateChange(q1SlotType), defaultValue: getDefaultLicenceDate(q1SlotType), title: `When did ${driverName} first receive their drivers license in Canada?`, description: "Select the year and month in which you received your first license to drive an automobile in Canada. This would include a beginners, intermediate or full license.", errorMessage: q1Error, error: driverState.inValidation, minDate: q1MinDate, maxDate: policyEffectiveDate, disabled: !birthDate }), q1Date && (jsxRuntime.jsx(SelectFormBox, { options: isOnlyG ? ontarioOnlyGOptions : ontarioFirstClassOptions, name: "firstLicenceClass", onChange: handleLicenceTypeChange, defaultValue: getSelectedOption(isOnlyG ? ontarioOnlyGOptions : ontarioFirstClassOptions, firstClass), title: "What class of license was it?", placeholder: "Select from the list", description: "Drivers licensed in Ontario under the graduated licensing program would select G1 Beginner. If the driver was licensed outside Ontario or granted an exception for having driving experience from another jurisdiction then select the license class they first received. Select class G Full or equivalent if the driver was licensed in Ontario before 1994 or was licensed in another province. G equivalent classes in Canada are class 5.", autoSelectIfValueIsOutOfOptions: false })), firstClass === mychoiceSdkComponents.DriverLicenceTypes.G1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showDtcG1Only && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a gov't approved drivers education course within the past 3 years?` })), showG2Question && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleReceivedG2Change, name: "receivedG2", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, receivedG2), title: `Did ${driverName} receive a G2 license?` })), showG2Date && (jsxRuntime.jsx(DateSelectFormBox, { name: "g2LicenceDate", dateNames: ['g2LicenceYear', 'g2LicenceMonth'], onDateChange: handleLicenceDateChange(mychoiceSdkComponents.DriverLicenceTypes.G2), defaultValue: getDefaultLicenceDate(mychoiceSdkComponents.DriverLicenceTypes.G2), title: `When did ${driverName} receive this G2 license?`, errorMessage: g2Error, error: driverState.inValidation, minDate: g2PickerMinDate, maxDate: g2MaxDate })), showGQuestionAfterG1 && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleReceivedGChange, name: "receivedG", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, receivedG), title: `Did ${driverName} receive a G license?` })), showGDateAfterG1 && (jsxRuntime.jsx(DateSelectFormBox, { name: "gLicenceDate", dateNames: ['gLicenceYear', 'gLicenceMonth'], onDateChange: handleLicenceDateChange(mychoiceSdkComponents.DriverLicenceTypes.G), defaultValue: getDefaultLicenceDate(mychoiceSdkComponents.DriverLicenceTypes.G), title: `When did ${driverName} receive this G license?`, errorMessage: gError, error: driverState.inValidation, minDate: gPickerMinDate, maxDate: gMaxDate }))] })), firstClass === mychoiceSdkComponents.DriverLicenceTypes.G2 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showDtcG2Only && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a gov't approved drivers education course within the past 3 years?` })), showGQuestionAfterG2 && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleReceivedGChange, name: "receivedG", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, receivedG), title: `Did ${driverName} receive a G license?` })), showGDateAfterG2 && (jsxRuntime.jsx(DateSelectFormBox, { name: "gLicenceDate", dateNames: ['gLicenceYear', 'gLicenceMonth'], onDateChange: handleLicenceDateChange(mychoiceSdkComponents.DriverLicenceTypes.G), defaultValue: getDefaultLicenceDate(mychoiceSdkComponents.DriverLicenceTypes.G), title: `When did ${driverName} receive this G license?`, errorMessage: gError, error: driverState.inValidation, minDate: gPickerMinDate, maxDate: gMaxDate }))] })), firstClass === mychoiceSdkComponents.DriverLicenceTypes.G && !isOnlyG && showDtcGFull && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a gov't approved drivers education course within the past 3 years?` })), isOnlyG && showDtcGFull && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a gov't approved drivers education course within the past 3 years?` })), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handlePreviousLicenceChange, name: "previousLicence", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, previousLicence), title: `Has ${driverName} ever had a full license anywhere else in Canada or USA?`, description: "If you have driving experience outside Canada or the United States, it may lower your premium. Your insurer may require proof of insurance in these other locations or some proof of driving experience from the country you indicate (like a copy of a previous driver's licence)." })] }));
     }
     return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsxRuntime.jsx(InputFormBox, { name: "firstLicenceAge", title: getLicenceAgeTitle(), onChange: handleLicenceAgeChange, type: mychoiceSdkComponents.InputTypes.Number, defaultValue: firstLicenceAge, description: configState.toolTip.licenceAge, hintMessage: birthDate
@@ -1655,6 +1670,8 @@ const SectionDriverInsurancePolicy = () => {
     const { appConfigState: { appType }, } = mychoiceSdkStore.useStoreAppConfig();
     const mychoiceCls = mychoiceSdkComponents.isMyChoiceLike(appType) ? 'mychoice' : '';
     const isTheBig = appType === mychoiceSdkComponents.AppTypes.TheBig;
+    const { isOntarioProvince } = mychoiceSdkStore.useProvince();
+    const isOntarioFlow = isOntarioProvince && mychoiceSdkComponents.isMyChoiceLike(appType);
     const getPeriodOptions = (year, month) => {
         const options = [{ value: '', name: 'Date Period', disabled: true }];
         if (year && month) {
@@ -1733,6 +1750,10 @@ const SectionDriverInsurancePolicy = () => {
         if (listedYear && listedMonth && listed) {
             const listedDate = mychoiceSdkComponents.addDaysToDate(`${listedYear}-${listedMonth}-01`, birthDay ? +birthDay + 1 : 1);
             const setMessage = (licenceYear, licenceMonth) => {
+                if (!licenceYear || !licenceMonth) {
+                    setHintMessage('');
+                    return;
+                }
                 const licenceDate = mychoiceSdkComponents.addDaysToDate(`${licenceYear}-${licenceMonth}-01`, birthDay ? +birthDay + 1 : 1);
                 const yearsPeriod = mychoiceSdkComponents.getDifferenceInYears(listedDate, licenceDate);
                 if (yearsPeriod >= 5) {
@@ -1746,7 +1767,10 @@ you had insurance. If this is correct, please continue with the form.`);
             if (birthDate) {
                 const defaultMinDate = birthDate && firstLicenceAge ? mychoiceSdkComponents.addYearsToDate(birthDate, +firstLicenceAge) : '';
                 const isOnlyG = mychoiceSdkComponents.checkDateIsSpecial(defaultMinDate, configState.minDates.g.specialDate);
-                if (isOnlyG) {
+                if (isOntarioFlow) {
+                    setMessage(g1LicenceYear, g1LicenceMonth);
+                }
+                else if (isOnlyG) {
                     setMessage(gLicenceYear, gLicenceMonth);
                 }
                 else if (licenceType === mychoiceSdkComponents.DriverLicenceTypes.G1) {
@@ -1763,7 +1787,7 @@ you had insurance. If this is correct, please continue with the form.`);
         else {
             setHintMessage('');
         }
-    }, [listedYear, listedMonth, g1LicenceYear, g1LicenceMonth, firstLicenceAge, birthDate, gLicenceYear, gLicenceMonth]);
+    }, [listedYear, listedMonth, g1LicenceYear, g1LicenceMonth, firstLicenceAge, birthDate, gLicenceYear, gLicenceMonth, licenceType, isOntarioFlow]);
     const handleInsuredChange = ({ value }) => {
         dispatchDriverInsuranceState({
             type: mychoiceSdkStore.StoreFormCarDriverInsuranceActionTypes.FormCarDriverInsuredSelect,
@@ -2373,7 +2397,8 @@ const SectionDiscountInfo$1 = () => {
     const { validateEmail, errorMessage } = mychoiceSdkStore.useHandlerCarQuoterEmail();
     const { validatePhone, errorMessage: phoneErrorMessage } = mychoiceSdkStore.useHandlerCarQuoterPhone();
     const { multiplePoliciesDiscount, appInstallDiscount, caaMemberDiscount, quoterInfo, emailTo: { email, emailStatus }, } = discountState;
-    const { firstName, lastName, phone, phoneStatus, driverLicense = '', caslConsent } = quoterInfo;
+    const { firstName, lastName, phone, phoneStatus, driverLicense = '', caslConsent, } = quoterInfo;
+    const phoneIsIncomplete = (phone || '').replace(/\D/g, '').length !== 10;
     const handleMultiplePolicyChange = ({ value }) => {
         dispatchDiscountState({
             type: mychoiceSdkStore.StoreFormCarDiscountActionTypes.FormCarDiscountMultiplePoliciesSelect,
@@ -2432,10 +2457,10 @@ const SectionDiscountInfo$1 = () => {
         });
     };
     return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [isTheBig ? (jsxRuntime.jsx(LabelFormBox, { title: "You are seconds away from receiving your car insurance quotes,\n         please provide your email after completing the discount section so we\n         can send you your personalized free car insurance quotes!" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h2", { className: "section-title", children: "A little extra info for discounts and connecting you with our partners." }), jsxRuntime.jsx("span", { className: "info-title-message", children: "You are seconds away from receiving your car insurance quotes, please provide your email after completing the discount section so we can send you your personalized free car insurance quotes!" })] })), jsxRuntime.jsx(BlockVehLinks, {}), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleMultiplePolicyChange, name: "multiplePoliciesDiscount", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, multiplePoliciesDiscount), title: "You could receive a 10-15% discount for bundling insurance with multiple policies with the same insurance company. Does that interest you?", description: "Bundling your home and auto insurance can save you significantly on insurance premiums as a whole package. Do you want to learn more about the benefits of multiple policies for home, tenant, condo, or car insurance? All you have to do is select yes.." }), !isTheBig && !isAlbertaProvince && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleCaaMemberChange, name: "caaMemberDiscount", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, caaMemberDiscount), title: "Please indicate if you are a member of CAA, you could save up to an additional 20%." })), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleAppInstallChange, name: "appInstallDiscount", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, appInstallDiscount), title: "You could receive up to a 30% discount by using an app to track driving habits. Does that interest you?", description: "Get rewarded for safe driving with the click of a button. If you install the app, you may be eligible for a 30% discount on your insurance premiums. Typically, you receive 10% of the discount upfront and the balance after six months of good driving." }), isTheBig ? (jsxRuntime.jsxs("div", { className: "input-form-box-container", children: [jsxRuntime.jsx(LabelFormBox, { title: "Complete this form to see all your personalized\n              quotes on the next page, you will also be able to:" }), jsxRuntime.jsxs("ol", { className: "ordered-block", children: [jsxRuntime.jsx("li", { children: "See what rates insurance carriers are offering" }), jsxRuntime.jsx("li", { children: "Get in touch with us and secure your rate" }), jsxRuntime.jsx("li", { children: "Potentially save more by speaking with a broker" })] })] })) : (jsxRuntime.jsx("h2", { children: "Complete the form below to see which companies are offering your quotes." })), 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(InputFormBox, { name: "lastname", title: "Last Name", onChange: handleLastNameChange, defaultValue: lastName, placeholder: "Your Last Name", error: !lastName && discountState.inValidation, errorMessage: getErrorMessage(lastName, discountState.inValidation) }), isTheBig && (jsxRuntime.jsx(InputFormLicenceBox, { ...getDynamicLicenceBoxProps({ ...allProvinces }), name: "driverLicense", title: "Driver Licence Number (Optional)", onChange: handleDriverLicenseChange, defaultValue: driverLicense, description: "Enter your drivers licence number in to receive a more accurate, prequalified quote from our broker partners. This will enable you to provide less details over the phone if you choose to have a broker contact you. This is an optional input." })), jsxRuntime.jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(855) 325-8444", validationStatus: phoneStatus, error: phoneStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
-                    || (phoneStatus === mychoiceSdkComponents.ValidationStatusTypes.Initial && discountState.inValidation)
-                    || (!phone && discountState.inValidation), errorMessage: phoneStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
+                    || (phoneIsIncomplete && discountState.inValidation), errorMessage: phoneStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
                     ? phoneErrorMessage
-                    : getErrorMessage(phone, discountState.inValidation) || (discountState.inValidation ? 'Enter a valid phone number.' : '') }), jsxRuntime.jsx(InputFormEmailBox, { validationStatus: emailStatus, errorMessage: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
+                    : getErrorMessage(phone, discountState.inValidation)
+                        || (phoneIsIncomplete && discountState.inValidation ? 'Enter a valid phone number.' : '') }), jsxRuntime.jsx(InputFormEmailBox, { validationStatus: emailStatus, errorMessage: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
                     ? errorMessage
                     : getErrorMessage(email, discountState.inValidation), error: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined || (!email && discountState.inValidation), name: "email", title: "Please share your email address with us, we'll use it to send you a copy of your quotes.", description: "We will provide you with your insurance quotes immediately after this form completion. If you are not ready to apply today, don\u2019t worry as we will be emailing your quotes to you if you\u2019d like to complete at a later date with the help of one of our trusted broker partners.", onChange: handleEmailChange, defaultValue: email, placeholder: mychoiceSdkComponents.getPlaceholderEmail(appType) }), isTheBig && (jsxRuntime.jsx(mychoiceSdkComponents.CheckboxForm, { className: "casl-consent", name: "caslConsent", label: "Yes, I consent to receiving emails from the Billyard Insurance Group.\n                I understand that I can unsubscribe at any time", onChange: handleCaslConsentChange, defaultValue: caslConsent })), jsxRuntime.jsx(BlockSubmit$2, { className: isTheBig ? 'thebig-bold' : 'mychoice' }), jsxRuntime.jsx(BlockNextPageInfo$2, {})] }));
 };