@mychoice/mychoice-sdk-modules 2.2.24 → 2.2.25

package/dist/cjs/index.js

@@ -58,8 +58,8 @@ InputFormBox.defaultProps = {
 };
 
 const InputFormPhoneBox = (props) => {
-    const { className, defaultValue, placeholder, disabled, error, name, title, onChange, errorMessage, hintMessage, } = props;
-    return (jsxRuntime.jsx(Container, { name: name, className: ` ${className} ${error ? 'error' : ''}`, title: title, errorMessage: errorMessage, hintMessage: hintMessage, children: jsxRuntime.jsx(mychoiceSdkComponents.InputFormPhone, { className: "input-form", name: name, type: mychoiceSdkComponents.InputTypes.Text, defaultValue: defaultValue, onChange: onChange, placeholder: placeholder, disabled: disabled, error: error }) }));
+    const { className, defaultValue, placeholder, disabled, error, name, title, onChange, errorMessage, hintMessage, validationStatus, } = props;
+    return (jsxRuntime.jsx(Container, { name: name, className: ` ${className} ${error ? 'error' : ''}`, title: title, errorMessage: errorMessage, hintMessage: hintMessage, children: jsxRuntime.jsx(mychoiceSdkComponents.InputFormPhone, { className: "input-form", name: name, type: mychoiceSdkComponents.InputTypes.Text, defaultValue: defaultValue, onChange: onChange, placeholder: placeholder, disabled: disabled, error: error, validationStatus: validationStatus }) }));
 };
 InputFormPhoneBox.defaultProps = {
     className: '',
@@ -709,14 +709,22 @@ const getRecommendedRange = (distanceDaily, distanceBusiness) => {
         kmEachDay = +distanceBusiness;
     }
     switch (true) {
+        case kmEachDay === 0:
+            return 5000;
         case kmEachDay === 1:
             return 8000;
-        case ((kmEachDay >= 2) && (kmEachDay <= 10)):
+        case ((kmEachDay >= 2) && (kmEachDay <= 5)):
             return 10000;
-        case ((kmEachDay >= 15) && (kmEachDay <= 20)):
+        case ((kmEachDay >= 6) && (kmEachDay <= 12)):
+            return 10000;
+        case ((kmEachDay >= 13) && (kmEachDay <= 20)):
             return 15000;
+        case ((kmEachDay >= 21) && (kmEachDay <= 29)):
+            return 20000;
         case ((kmEachDay >= 30) && (kmEachDay <= 40)):
             return 20000;
+        case ((kmEachDay >= 41) && (kmEachDay <= 49)):
+            return 30000;
         case ((kmEachDay >= 50) && (kmEachDay <= 80)):
             return 30000;
         case ((kmEachDay >= 90) && (kmEachDay <= 100)):
@@ -885,9 +893,7 @@ const BlockCarConditionInfo = () => {
             type: mychoiceSdkStore.StoreFormCarVehicleActionTypes.FormCarDailyDistanceSelect,
             payload: { distanceDaily: value },
         });
-        const yearlyDefault = Number(value) === 0
-            ? '5000'
-            : `${getRecommendedRange(value, primaryUse === mychoiceSdkComponents.VehiclePrimaryUseTypes.Business ? distanceBusiness : 1)}`;
+        const yearlyDefault = `${getRecommendedRange(value, primaryUse === mychoiceSdkComponents.VehiclePrimaryUseTypes.Business ? distanceBusiness : 1)}`;
         dispatchVehicleState({
             type: mychoiceSdkStore.StoreFormCarVehicleActionTypes.FormCarYearlyDistanceSelect,
             payload: { distanceYearly: yearlyDefault },
@@ -909,7 +915,7 @@ const BlockCarConditionInfo = () => {
                     purchaseDay || '',
                     purchaseMonth || '',
                     purchaseYear || '',
-                ], vehicleState.inValidation), error: vehicleState.inValidation, minDate: year ? `${Number(year) - 1}-01-01` : mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd'), maxDate: mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd') }), !(isAlbertaProvince && isTheBig) && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.carWinterTiresCheck, onChange: handleWinterTiresChange, name: "winterTires", defaultValue: getSelectedOption(mychoiceSdkComponents.carWinterTiresCheck, winterTires), description: "Snow. Ice. Freezing temperatures. Winter tires protect you from all these winter weather conditions, and more. It also protects your wallet. Investing in winter tires can save you $50 to $100 on your insurance.", title: "Does your car have winter tires?" })), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.carKeepPlace, name: "parkingLocation", onChange: handleCarParkingLocationChange, defaultValue: getSelectedOption(mychoiceSdkComponents.carKeepPlace, parkingLocation), title: "Where do you keep your car overnight?", placeholder: "Select from the list", description: "For many of us, the answer is \u201Cat home.\u201D If you park your car in various locations throughout the year, then select the most frequently parking spot. Be honest\u2014some insurers will use your overnight parking location to calculate a quote, which could affect your claims in the future.", autoSelectIfValueIsOutOfOptions: false, error: !parkingLocation && vehicleState.inValidation, errorMessage: getErrorMessage(parkingLocation, vehicleState.inValidation) }), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.carUsagePurpose, onChange: handleCarUsageChange, name: "primaryUse", defaultValue: getSelectedOption(mychoiceSdkComponents.carUsagePurpose, primaryUse) || mychoiceSdkComponents.carUsagePurpose[0].value, hintMessage: primaryUseHintMessage, description: "The way you use your vehicle is a primary factor that insurers use in your policy terms and fees, whether it be personal or business.\n                                    \u2022 Personal is driving from work or school to home.\n                                    \u2022 Business considers other uses like sales calls, pick-ups or deliveries, or other business errands.", title: "What do you use your car for?" }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.firstDriveDistanceList, name: "distanceDaily", onChange: handleCarDailyDistanceChange, defaultValue: getSelectedOption(mychoiceSdkComponents.firstDriveDistanceList, distanceDaily), title: "How far is your 1-way commute to work or school?", placeholder: "Select", description: "The distance you drive to work or school would be an example of your daily commute. It is one of the most important factors when determining coverage options since it exposes you to traffic each day. The shorter your commute, the less risk you carry of an accident.", autoSelectIfValueIsOutOfOptions: false, error: distanceDaily === undefined && vehicleState.inValidation, errorMessage: getErrorMessage(distanceDaily, vehicleState.inValidation) }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.yearlyDriveDistanceList, name: "distanceYearly", onChange: handleCarYearlyDistanceChange, defaultValue: getSelectedOption(mychoiceSdkComponents.yearlyDriveDistanceList, distanceYearly), title: "How many total kilometers are driven each year?", placeholder: "Select", hintMessage: distanceDaily ? `Based on your daily driven kilometers, we recommend
+                ], vehicleState.inValidation), error: vehicleState.inValidation, minDate: year ? `${Number(year) - 1}-01-01` : mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd'), maxDate: mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd') }), !(isAlbertaProvince && isTheBig) && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.carWinterTiresCheck, onChange: handleWinterTiresChange, name: "winterTires", defaultValue: getSelectedOption(mychoiceSdkComponents.carWinterTiresCheck, winterTires), description: "Snow. Ice. Freezing temperatures. Winter tires protect you from all these winter weather conditions, and more. It also protects your wallet. Investing in winter tires can save you $50 to $100 on your insurance.", title: "Does your car have winter tires?" })), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.carKeepPlace, name: "parkingLocation", onChange: handleCarParkingLocationChange, defaultValue: getSelectedOption(mychoiceSdkComponents.carKeepPlace, parkingLocation), title: "Where do you keep your car overnight?", placeholder: "Select from the list", description: "For many of us, the answer is \u201Cat home.\u201D If you park your car in various locations throughout the year, then select the most frequently parking spot. Be honest\u2014some insurers will use your overnight parking location to calculate a quote, which could affect your claims in the future.", autoSelectIfValueIsOutOfOptions: false, error: !parkingLocation && vehicleState.inValidation, errorMessage: getErrorMessage(parkingLocation, vehicleState.inValidation) }), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.carUsagePurpose, onChange: handleCarUsageChange, name: "primaryUse", defaultValue: getSelectedOption(mychoiceSdkComponents.carUsagePurpose, primaryUse) || mychoiceSdkComponents.carUsagePurpose[0].value, hintMessage: primaryUseHintMessage, description: "The way you use your vehicle is a primary factor that insurers use in your policy terms and fees, whether it be personal or business.\n                                    \u2022 Personal is driving from work or school to home.\n                                    \u2022 Business considers other uses like sales calls, pick-ups or deliveries, or other business errands.", title: "What do you use your car for?" }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.firstDriveDistanceList, name: "distanceDaily", onChange: handleCarDailyDistanceChange, defaultValue: getSelectedOption(mychoiceSdkComponents.firstDriveDistanceList, distanceDaily), title: "How far is your 1-way commute to work or school?", placeholder: "Select", description: "The distance you drive to work or school would be an example of your daily commute. It is one of the most important factors when determining coverage options since it exposes you to traffic each day. The shorter your commute, the less risk you carry of an accident.", autoSelectIfValueIsOutOfOptions: false, error: distanceDaily === undefined && vehicleState.inValidation, errorMessage: getErrorMessage(distanceDaily, vehicleState.inValidation) }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.yearlyDriveDistanceList, name: "distanceYearly", onChange: handleCarYearlyDistanceChange, defaultValue: getSelectedOption(mychoiceSdkComponents.yearlyDriveDistanceList, distanceYearly), title: "How many total kilometers are driven each year?", placeholder: "Select", hintMessage: distanceDaily !== undefined ? `Based on your daily driven kilometers, we recommend
                       ${mychoiceSdkComponents.numberWithCommas(getRecommendedRange(distanceDaily, primaryUse === mychoiceSdkComponents.VehiclePrimaryUseTypes.Business ? distanceBusiness : 1))} for your yearly driven kilometers` : '', autoSelectIfValueIsOutOfOptions: false, error: !distanceYearly && vehicleState.inValidation, errorMessage: getErrorMessage(distanceYearly, vehicleState.inValidation) }), primaryUse === 'business' && (jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.businessUsePercentOptions, name: "businessUsePercent", onChange: handleBusinessUsePercentChange, defaultValue: getSelectedOption(mychoiceSdkComponents.businessUsePercentOptions, businessUsePercent), title: "What percentage of your total kilometers are driven for business purposes?", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !businessUsePercent && vehicleState.inValidation, errorMessage: getErrorMessage(businessUsePercent, vehicleState.inValidation) })), showPolicyStartOnVehiclePage && (jsxRuntime.jsx(DateSelectFormBox, { name: "policyStart", dateNames: ['policyStartYear', 'policyStartMonth', 'policyStartDay'], onDateChange: handlePolicyStartDateChange, defaultValue: defaultPolicyStartDate, title: "What is the ideal start date for your new insurance policy?", description: "Select your preferred date for the beginning of your new insurance policy. For instance, you may set the start date for the day that your current insurance expires to ensure that you're continuously covered. Alternatively, select today's date for a quote or new policy.", minDate: mychoiceSdkComponents.addDaysToDate('', 1), maxDate: mychoiceSdkComponents.addDaysToDate('', 90), isDay: true }))] }));
 };
 
@@ -1489,20 +1495,19 @@ const SectionDriverLicence = () => {
         const showGDateAfterG2 = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G2 && receivedG === true;
         const g2Date = toDate(g2LicenceYear, g2LicenceMonth);
         const gDate = toDate(gLicenceYear, gLicenceMonth);
-        // G1 branch: DTC shows whenever G1 is selected and Q1 date is entered (no time gate per flowchart)
-        const showDtcG1Only = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G1 && !!q1Date;
-        const showDtcG1G2 = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G1
-            && showG2Date
-            && !!g2Date
-            && mychoiceSdkComponents.getDifferenceInYears('', g2Date) <= 3;
-        // Branch B: DTC shown as soon as class=G2 and Q1 is within 3 years (before G question)
+        // G1 branch: ask once, based on the first licence date. Show/hide uses 5-year gate; question text says "3 years".
+        const showDtcG1Only = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G1
+            && !!q1Date
+            && mychoiceSdkComponents.getDifferenceInYears('', q1Date) <= 5
+            && !showG2Date;
+        // Branch B: DTC shown as soon as class=G2 and Q1 is within 5 years (before G question)
         const showDtcG2Only = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G2
             && !!q1Date
-            && mychoiceSdkComponents.getDifferenceInYears('', q1Date) <= 3;
-        // Branch C G Full: within 3 years of Q1 (G date)
+            && mychoiceSdkComponents.getDifferenceInYears('', q1Date) <= 5;
+        // Branch C G Full: within 5 years of Q1 (G date)
         const showDtcGFull = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G
             && !!q1Date
-            && mychoiceSdkComponents.getDifferenceInYears('', q1Date) <= 3;
+            && mychoiceSdkComponents.getDifferenceInYears('', q1Date) <= 5;
         // ── Validation error messages ──
         const q1MinDate = getG1MinDate();
         const q1ChronoError = driverState.inValidation
@@ -1538,7 +1543,7 @@ const SectionDriverLicence = () => {
         };
         const g2MaxDate = getMax60Date(q1Date);
         const gMaxDate = getMax60Date(q1Date);
-        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: today, disabled: !birthDate }), q1Date && (jsxRuntime.jsx(SelectFormBox, { options: isOnlyG ? ontarioOnlyGOptions : ontarioFirstClassOptions, name: "firstLicenceClass", onChange: handleLicenceTypeChange, defaultValue: getSelectedOption(isOnlyG ? ontarioOnlyGOptions : ontarioFirstClassOptions, licenceType), title: "What class of license was it?", placeholder: "Select from the list", disabled: isOnlyG, 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 5 years?` })), 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: g2MinDate, maxDate: g2MaxDate })), showDtcG1G2 && (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?` })), 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: gMinDate, 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?` })), 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: gMinDate, 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(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: today, disabled: !birthDate }), q1Date && (jsxRuntime.jsx(SelectFormBox, { options: isOnlyG ? ontarioOnlyGOptions : ontarioFirstClassOptions, name: "firstLicenceClass", onChange: handleLicenceTypeChange, defaultValue: getSelectedOption(isOnlyG ? ontarioOnlyGOptions : ontarioFirstClassOptions, licenceType), title: "What class of license was it?", placeholder: "Select from the list", disabled: isOnlyG, 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?` })), 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: g2MinDate, 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: gMinDate, 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?` })), 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: gMinDate, 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
                     ? `${driverName} was licenced in ${Number(birthYear) + Number(firstLicenceAge)} - ${Number(birthYear) + Number(firstLicenceAge) + 1}`
@@ -1551,7 +1556,7 @@ const SectionDriverInsurancePolicy = () => {
     const { driverState, dispatchDriverInsuranceState } = mychoiceSdkStore.useStoreFormCarDriverInsurance();
     const { discountState, dispatchDiscountState } = mychoiceSdkStore.useStoreFormCarDiscount();
     const { quoteState: { isRequested }, } = mychoiceSdkStore.useStoreFormCarQuote();
-    const { listed, listedMonth = '', listedYear = '', insured, insuredDate = '', notCurrentlyInsured, lastPolicyEndYear = '', lastPolicyEndMonth = '', lastPolicyCancelReason = '', firstName, birthYear, birthMonth, birthDay, licenceInfo: { firstLicenceAge, licenceType, gLicenceYear, gLicenceMonth, g1LicenceYear, g1LicenceMonth }, } = driverState.items[driverState.activeIndex];
+    const { listed, listedMonth = '', listedYear = '', insured, insuredDate = '', lastPolicyEndYear = '', lastPolicyEndMonth = '', lastPolicyCancelReason = '', firstName, birthYear, birthMonth, birthDay, licenceInfo: { firstLicenceAge, licenceType, gLicenceYear, gLicenceMonth, g1LicenceYear, g1LicenceMonth, g2LicenceYear, g2LicenceMonth, }, } = driverState.items[driverState.activeIndex];
     const { policyStartYear, policyStartMonth, policyStartDay } = discountState;
     const driverNameDefault = `Driver ${driverState.activeIndex + 1}`;
     const birthDate = birthYear && birthMonth && birthDay ? `${birthYear}-${birthMonth}-${birthDay}` : '';
@@ -1589,17 +1594,49 @@ const SectionDriverInsurancePolicy = () => {
         month: policyStartMonth,
         day: policyStartDay,
     };
+    const prevListedRef = React.useRef({ year: listedYear, month: listedMonth });
+    const getFirstLicenceDateKey = () => {
+        if (licenceType === mychoiceSdkComponents.DriverLicenceTypes.G)
+            return `${gLicenceYear || ''}-${gLicenceMonth || ''}`;
+        if (licenceType === mychoiceSdkComponents.DriverLicenceTypes.G2)
+            return `${g2LicenceYear || ''}-${g2LicenceMonth || ''}`;
+        if (licenceType === mychoiceSdkComponents.DriverLicenceTypes.G1)
+            return `${g1LicenceYear || ''}-${g1LicenceMonth || ''}`;
+        return `${firstLicenceAge || ''}`;
+    };
+    const firstLicenceDateKey = getFirstLicenceDateKey();
+    const prevFirstLicenceRef = React.useRef(firstLicenceDateKey);
     React.useEffect(() => {
         if (listedYear && listedMonth && !isRequested) {
-            const options = getPeriodOptions(listedYear, listedMonth);
-            if (options.length > 1) {
-                dispatchDriverInsuranceState({
-                    type: mychoiceSdkStore.StoreFormCarDriverInsuranceActionTypes.FormCarDriverInsuredDateSelect,
-                    payload: { insuredDate: options[1].value },
-                });
+            const prev = prevListedRef.current;
+            const hasChanged = prev.year !== listedYear || prev.month !== listedMonth;
+            prevListedRef.current = { year: listedYear, month: listedMonth };
+            if (!insuredDate || hasChanged) {
+                const options = getPeriodOptions(listedYear, listedMonth);
+                if (options.length > 1) {
+                    dispatchDriverInsuranceState({
+                        type: mychoiceSdkStore.StoreFormCarDriverInsuranceActionTypes.FormCarDriverInsuredDateSelect,
+                        payload: { insuredDate: options[1].value },
+                    });
+                }
             }
         }
     }, [listedYear, listedMonth]);
+    React.useEffect(() => {
+        if (!listedYear || !listedMonth || isRequested)
+            return;
+        const hasChanged = prevFirstLicenceRef.current !== firstLicenceDateKey;
+        prevFirstLicenceRef.current = firstLicenceDateKey;
+        if (!hasChanged)
+            return;
+        const options = getPeriodOptions(listedYear, listedMonth);
+        if (options.length > 1) {
+            dispatchDriverInsuranceState({
+                type: mychoiceSdkStore.StoreFormCarDriverInsuranceActionTypes.FormCarDriverInsuredDateSelect,
+                payload: { insuredDate: options[1].value },
+            });
+        }
+    }, [firstLicenceDateKey]);
     React.useEffect(() => {
         if (listedYear && listedMonth && listed) {
             const listedDate = mychoiceSdkComponents.addDaysToDate(`${listedYear}-${listedMonth}-01`, birthDay ? +birthDay + 1 : 1);
@@ -1640,6 +1677,10 @@ you had insurance. If this is correct, please continue with the form.`);
             type: mychoiceSdkStore.StoreFormCarDriverInsuranceActionTypes.FormCarDriverInsuredSelect,
             payload: { insured: !value },
         });
+        dispatchDriverInsuranceState({
+            type: mychoiceSdkStore.StoreFormCarDriverInsuranceActionTypes.FormCarDriverNotCurrentlyInsuredSelect,
+            payload: { notCurrentlyInsured: value },
+        });
     };
     const handleLastPolicyEndDateChange = (dateType) => ({ value }) => {
         if (dateType === mychoiceSdkComponents.DateTypes.Month) {
@@ -1687,6 +1728,14 @@ you had insurance. If this is correct, please continue with the form.`);
             });
         }
     };
+    const firstInsuredMinDate = listedYear && listedMonth
+        ? mychoiceSdkComponents.addDaysToDate(`${listedYear}-${listedMonth}-01`, birthDay ? +birthDay + 1 : 1)
+        : mychoiceSdkComponents.getMinDate(birthDate, firstLicenceAge);
+    const twentyYearsAgo = mychoiceSdkComponents.getMinDateByYears(mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd'), 20);
+    let lastPolicyEndMinDate = twentyYearsAgo;
+    if (firstInsuredMinDate && mychoiceSdkComponents.compareDates(firstInsuredMinDate, twentyYearsAgo) > 0) {
+        lastPolicyEndMinDate = firstInsuredMinDate;
+    }
     const handlePolicyStartDateChange = (dateType) => ({ value }) => {
         if (dateType === mychoiceSdkComponents.DateTypes.Day) {
             dispatchDiscountState({
@@ -1709,7 +1758,7 @@ you had insurance. If this is correct, please continue with the form.`);
     };
     return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsxRuntime.jsxs("div", { className: "box-container", children: [jsxRuntime.jsx(DateSelectFormBox, { name: "listedYear", dateNames: ['listedYear', 'listedMonth'], onDateChange: handleListedDateChange, defaultValue: defaultListedDate, disabled: !listed, title: `When was ${firstName || driverNameDefault} first listed as a driver on a Canadian or US insurance policy?`, description: "The selection indicates what month and year the driver was first listed on a Canadian or US insurance policy. If you do not remember this date, it is acceptable to provide a best estimate for the purposes of the policy or quote.", errorMessage: listed
                             ? getDateErrorMessage(['01', listedMonth, listedYear], driverState.inValidation)
-                            : '', error: driverState.inValidation, hintMessage: hintMessage, minDate: mychoiceSdkComponents.getMinDate(birthDate, firstLicenceAge) }), jsxRuntime.jsx(mychoiceSdkComponents.CheckboxForm, { name: "listed", label: "Never listed on an insurance policy", onChange: handleListedChange, defaultValue: !listed })] }), listed && (jsxRuntime.jsxs("div", { className: "box-container", children: [jsxRuntime.jsx(SelectFormBox, { name: "insuredDate", onChange: handleInsuredPeriodChange, options: getPeriodOptions(listedYear, listedMonth), defaultValue: insuredDate, disabled: !insured, title: `How long has ${firstName || driverNameDefault} been with their current insurance provider?`, description: "It is common for insurers to provide loyalty rewards or discounts for valued customers. Loyalty is a positive trait in the industry, and most insurance companies will want to provide some incentive for continued customer relationships through tangible policy rewards.", errorMessage: insured ? getErrorMessage(insuredDate, driverState.inValidation) : '', error: !insuredDate && driverState.inValidation }), jsxRuntime.jsx(mychoiceSdkComponents.CheckboxForm, { name: "insured", label: "Not currently insured", onChange: handleInsuredChange, defaultValue: !insured })] })), listed && !insured && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DateSelectFormBox, { name: "lastPolicyEnd", dateNames: ['lastPolicyEndYear', 'lastPolicyEndMonth'], onDateChange: handleLastPolicyEndDateChange, defaultValue: { year: lastPolicyEndYear, month: lastPolicyEndMonth, day: '01' }, title: `When did ${firstName || driverNameDefault}'s most recent policy end?`, errorMessage: getDateErrorMessage(['01', lastPolicyEndMonth, lastPolicyEndYear], driverState.inValidation), error: driverState.inValidation, maxDate: mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd') }), lastPolicyEndYear && lastPolicyEndMonth && (jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.insuranceCancellationReasonOptions, name: "lastPolicyCancelReason", onChange: handleLastPolicyCancelReasonChange, defaultValue: lastPolicyCancelReason, title: "Why was this last insurance policy cancelled?", placeholder: "Select from the list", autoSelectIfValueIsOutOfOptions: false, error: !lastPolicyCancelReason && driverState.inValidation, errorMessage: getErrorMessage(lastPolicyCancelReason, driverState.inValidation) }))] })), !isTheBig && !mychoiceSdkComponents.isMyChoiceLike(appType) && (jsxRuntime.jsx(DateSelectFormBox, { name: "policyStart", dateNames: ['policyStartYear', 'policyStartMonth', 'policyStartDay'], onDateChange: handlePolicyStartDateChange, defaultValue: defaultPolicyStartDate, title: "What is the ideal start date for your new insurance policy?", description: "Select your preferred date for the beginning of your new insurance policy. For instance, you may set the start date for the day that your current insurance expires to ensure that you\u2019re continuously covered. Alternatively, select today's date for a quote or new policy.", errorMessage: getDateErrorMessage([policyStartDay || '', policyStartMonth || '', policyStartYear || ''], driverState.inValidation), error: driverState.inValidation, minDate: mychoiceSdkComponents.addDaysToDate('', 1), maxDate: mychoiceSdkComponents.addDaysToDate('', 60), isDay: true }))] }));
+                            : '', error: driverState.inValidation, hintMessage: hintMessage, minDate: mychoiceSdkComponents.getMinDate(birthDate, firstLicenceAge) }), jsxRuntime.jsx(mychoiceSdkComponents.CheckboxForm, { name: "listed", label: "Never listed on an insurance policy", onChange: handleListedChange, defaultValue: !listed })] }), listed && (jsxRuntime.jsxs("div", { className: "box-container", children: [jsxRuntime.jsx(SelectFormBox, { name: "insuredDate", onChange: handleInsuredPeriodChange, options: getPeriodOptions(listedYear, listedMonth), defaultValue: insuredDate, disabled: !insured, title: `How long has ${firstName || driverNameDefault} been with their current insurance provider?`, description: "It is common for insurers to provide loyalty rewards or discounts for valued customers. Loyalty is a positive trait in the industry, and most insurance companies will want to provide some incentive for continued customer relationships through tangible policy rewards.", errorMessage: insured ? getErrorMessage(insuredDate, driverState.inValidation) : '', error: !insuredDate && driverState.inValidation }), jsxRuntime.jsx(mychoiceSdkComponents.CheckboxForm, { name: "insured", label: "Not currently insured", onChange: handleInsuredChange, defaultValue: !insured })] })), listed && !insured && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DateSelectFormBox, { name: "lastPolicyEnd", dateNames: ['lastPolicyEndYear', 'lastPolicyEndMonth'], onDateChange: handleLastPolicyEndDateChange, defaultValue: { year: lastPolicyEndYear, month: lastPolicyEndMonth, day: '01' }, title: `When did ${firstName || driverNameDefault}'s most recent policy end?`, errorMessage: getDateErrorMessage(['01', lastPolicyEndMonth, lastPolicyEndYear], driverState.inValidation), error: driverState.inValidation, maxDate: mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd'), minDate: lastPolicyEndMinDate }), lastPolicyEndYear && lastPolicyEndMonth && (jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.insuranceCancellationReasonOptions, name: "lastPolicyCancelReason", onChange: handleLastPolicyCancelReasonChange, defaultValue: lastPolicyCancelReason, title: "Why was this last insurance policy cancelled?", placeholder: "Select from the list", autoSelectIfValueIsOutOfOptions: false, error: !lastPolicyCancelReason && driverState.inValidation, errorMessage: getErrorMessage(lastPolicyCancelReason, driverState.inValidation) }))] })), !isTheBig && !mychoiceSdkComponents.isMyChoiceLike(appType) && (jsxRuntime.jsx(DateSelectFormBox, { name: "policyStart", dateNames: ['policyStartYear', 'policyStartMonth', 'policyStartDay'], onDateChange: handlePolicyStartDateChange, defaultValue: defaultPolicyStartDate, title: "What is the ideal start date for your new insurance policy?", description: "Select your preferred date for the beginning of your new insurance policy. For instance, you may set the start date for the day that your current insurance expires to ensure that you\u2019re continuously covered. Alternatively, select today's date for a quote or new policy.", errorMessage: getDateErrorMessage([policyStartDay || '', policyStartMonth || '', policyStartYear || ''], driverState.inValidation), error: driverState.inValidation, minDate: mychoiceSdkComponents.addDaysToDate('', 1), maxDate: mychoiceSdkComponents.addDaysToDate('', 60), isDay: true }))] }));
 };
 
 const SectionDriverCancellation = () => {
@@ -1998,16 +2047,17 @@ const BlockDriverAccident = () => {
 };
 
 /**
- * Filter out G1/G2 options from "Serious" section for trafficTicketsGroupOptions
+ * Filter out G1/G2 options (ALC, RB) from the "Criminal" section for trafficTicketsGroupOptions
  */
 const getTrafficTicketsGroupOptionsWithoutG1G2 = () => {
     const excludeOptions = ['ALC', 'RB'];
-    const seriousOptions = mychoiceSdkComponents.trafficTicketsGroupOptions.find((entry) => entry.label === 'Serious');
-    const filteredSeriousOptions = seriousOptions.options.filter((option) => !excludeOptions.includes(option.value));
-    return mychoiceSdkComponents.trafficTicketsGroupOptions.map((option) => {
-        if (option.label === 'Serious')
-            return { ...option, options: filteredSeriousOptions };
-        return option;
+    return mychoiceSdkComponents.trafficTicketsGroupOptions.map((group) => {
+        if (group.label !== 'Criminal')
+            return group;
+        return {
+            ...group,
+            options: group.options.filter((option) => !excludeOptions.includes(option.value)),
+        };
     });
 };
 
@@ -2020,23 +2070,25 @@ const BlockDriverTicket = () => {
     const isTheBig = appType === mychoiceSdkComponents.AppTypes.TheBig;
     const { firstName, minMaxDates, } = driverState.items[driverState.activeIndex];
     const { gOneMin } = minMaxDates;
+    // Each speeding tier is tagged with the picklist section it belongs to.
+    // The tier itself determines the Fortus <Speed> and <Severity>, so no speed is asked of the user.
     const getSpeedingOptions = () => {
         if (isNovaScotiaProvince) {
             return [
-                { value: 'SP', name: 'Speeding 1 to 30 kph over limit' },
-                { value: 'SP', name: 'Speeding 31 to 50 kph over limit' },
-                { value: 'SP', name: 'Speeding 51 kph or more over limit' },
+                { value: 'SP_NS_MINOR', name: 'Speeding 1 to 30 kph over limit', section: 'Minor' },
+                { value: 'SP_NS_MAJOR', name: 'Speeding 31 to 50 kph over limit', section: 'Major' },
+                { value: 'SP_NS_CRIMINAL', name: 'Speeding 51 kph or more over limit', section: 'Criminal' },
             ];
         }
         if (isAlbertaProvince || isNewfoundlandProvince) {
             return [
-                { value: 'SP', name: 'Speeding 1 to 50 kph over limit' },
-                { value: 'SP', name: 'Speeding 51 kph or more over limit' },
+                { value: 'SP_MINOR', name: 'Speeding 1 to 50 kph over limit', section: 'Minor' },
+                { value: 'SP_51_CRIMINAL', name: 'Speeding 51 kph or more over limit', section: 'Criminal' },
             ];
         }
         return [
-            { value: 'SP', name: 'Speeding 1 to 49 kph over limit' },
-            { value: 'SP', name: 'Speeding 50 kph or more over limit' },
+            { value: 'SP_MINOR', name: 'Speeding 1 to 49 kph over limit', section: 'Minor' },
+            { value: 'SP_50_CRIMINAL', name: 'Speeding 50 kph or more over limit', section: 'Criminal' },
         ];
     };
     const getTrafficTicketsGroupOptions = () => {
@@ -2044,15 +2096,17 @@ const BlockDriverTicket = () => {
             ? getTrafficTicketsGroupOptionsWithoutG1G2()
             : mychoiceSdkComponents.trafficTicketsGroupOptions;
         const speedingOptions = getSpeedingOptions();
-        return base.map((group) => ({
-            ...group,
-            options: group.options.flatMap((opt) => {
-                if (opt.value === 'SP' && opt.name === 'Speeding') {
-                    return speedingOptions;
-                }
-                return [opt];
-            }),
-        }));
+        const toOption = ({ value, name }) => ({ value, name });
+        return base.map((group) => {
+            // Drop the generic "Speeding" entry; tiers are injected per section below.
+            const options = group.options.filter((opt) => !(opt.value === 'SP' && opt.name === 'Speeding'));
+            // Each tier appears in the Common section and in its matching severity section.
+            const tiersForGroup = speedingOptions.filter((tier) => group.label === 'Common' || group.label === tier.section);
+            return {
+                ...group,
+                options: [...options, ...tiersForGroup.map(toOption)],
+            };
+        });
     };
     const handleTicketChange = ({ value }) => {
         dispatchDriverTicketState({
@@ -2086,15 +2140,6 @@ const BlockDriverTicket = () => {
             },
         });
     };
-    const handleSpeedChange = (index) => ({ value }) => {
-        dispatchDriverTicketState({
-            type: mychoiceSdkStore.StoreFormCarDriverTicketActionTypes.FormCarDriverTrafficTicketSpeedSelect,
-            payload: {
-                speed: Number(value),
-                index,
-            },
-        });
-    };
     const handleTicketDateChange = (index) => (dateType) => ({ value }) => {
         if (dateType === mychoiceSdkComponents.DateTypes.Month) {
             dispatchDriverTicketState({
@@ -2115,13 +2160,13 @@ const BlockDriverTicket = () => {
             });
         }
     };
-    return (jsxRuntime.jsxs("div", { className: "form-block-container", children: [jsxRuntime.jsx("h2", { className: isTheBig ? 'thebig-bold' : '', children: "Traffic Tickets" }), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleTicketChange, name: "ticket", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, ticket), title: `Except for parking, has ${firstName} had any driving related tickets within the past 3 years?`, description: "Insurers want to make sure drivers are safe, which means minimizing driving infractions and encouraging good behaviour on the roads. Some of the most common liabilities include speeding, failure to stop, running a red light, reckless driving, and seatbelt negligence. It affects your insurance premium for up to three years and may void your policy." }), ticket && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [ticketList?.map(({ ticketReason, ticketYear, ticketMonth, speed, }, index) => {
+    return (jsxRuntime.jsxs("div", { className: "form-block-container", children: [jsxRuntime.jsx("h2", { className: isTheBig ? 'thebig-bold' : '', children: "Traffic Tickets" }), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleTicketChange, name: "ticket", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, ticket), title: `Except for parking, has ${firstName} had any driving related tickets within the past 3 years?`, description: "Insurers want to make sure drivers are safe, which means minimizing driving infractions and encouraging good behaviour on the roads. Some of the most common liabilities include speeding, failure to stop, running a red light, reckless driving, and seatbelt negligence. It affects your insurance premium for up to three years and may void your policy." }), ticket && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [ticketList?.map(({ ticketReason, ticketYear, ticketMonth, }, index) => {
                         const defaultTicketDate = {
                             year: ticketYear,
                             month: ticketMonth,
                             day: '01',
                         };
-                        return (jsxRuntime.jsxs("div", { className: "list-block", children: [jsxRuntime.jsx("hr", {}), jsxRuntime.jsxs("div", { className: "list-item", children: [jsxRuntime.jsx(SelectFormBox, { groupOptions: getTrafficTicketsGroupOptions(), name: `ticketReason-${index}`, onChange: handleReasonChange(index), defaultValue: ticketReason, title: "Reason for traffic ticket", placeholder: "Select from the list", isRemovable: ticketList.length > 1, onIconClick: handleIconClick(index), autoSelectIfValueIsOutOfOptions: false, error: !ticketReason && driverState.inValidation, errorMessage: getErrorMessage(ticketReason, driverState.inValidation) }), ticketReason === 'SP' && (jsxRuntime.jsx(InputFormBox, { name: `ticketSpeed-${index}`, onChange: handleSpeedChange(index), defaultValue: speed !== undefined ? speed : '', title: "How fast were you going (km/h)?", type: mychoiceSdkComponents.InputTypes.Number, error: !speed && driverState.inValidation, errorMessage: getErrorMessage(speed, driverState.inValidation) })), jsxRuntime.jsx(DateSelectFormBox, { name: `ticketDate-${index}`, dateNames: [`ticketYear-${index}`, `ticketMonth-${index}`], onDateChange: handleTicketDateChange(index), defaultValue: defaultTicketDate, title: "Ticket date", errorMessage: getDateErrorMessage(['01', ticketMonth, ticketYear], driverState.inValidation), error: driverState.inValidation, minDate: mychoiceSdkComponents.getMinDateByYears(gOneMin, 3) })] })] }, `ticket-${index}`));
+                        return (jsxRuntime.jsxs("div", { className: "list-block", children: [jsxRuntime.jsx("hr", {}), jsxRuntime.jsxs("div", { className: "list-item", children: [jsxRuntime.jsx(SelectFormBox, { groupOptions: getTrafficTicketsGroupOptions(), name: `ticketReason-${index}`, onChange: handleReasonChange(index), defaultValue: ticketReason, title: "Reason for traffic ticket", placeholder: "Select from the list", isRemovable: ticketList.length > 1, onIconClick: handleIconClick(index), autoSelectIfValueIsOutOfOptions: false, error: !ticketReason && driverState.inValidation, errorMessage: getErrorMessage(ticketReason, driverState.inValidation) }), jsxRuntime.jsx(DateSelectFormBox, { name: `ticketDate-${index}`, dateNames: [`ticketYear-${index}`, `ticketMonth-${index}`], onDateChange: handleTicketDateChange(index), defaultValue: defaultTicketDate, title: "Ticket date", errorMessage: getDateErrorMessage(['01', ticketMonth, ticketYear], driverState.inValidation), error: driverState.inValidation, minDate: mychoiceSdkComponents.getMinDateByYears(gOneMin, 3) })] })] }, `ticket-${index}`));
                     }), ticketList?.length < 3 && (jsxRuntime.jsx(mychoiceSdkComponents.ButtonBase, { className: "list-item-add", category: mychoiceSdkComponents.CategoryTypes.Filled, onClick: handleAddButtonClick, size: mychoiceSdkComponents.SizeTypes.Medium, color: mychoiceSdkComponents.ColorTypes.Primary, label: "Add another" }))] }))] }));
 };
 
@@ -2220,8 +2265,9 @@ const SectionDiscountInfo$1 = () => {
     const mychoiceCls = mychoiceSdkComponents.isMyChoiceLike(appType) ? 'mychoice' : '';
     const { discountState, dispatchDiscountState } = mychoiceSdkStore.useStoreFormCarDiscount();
     const { validateEmail, errorMessage } = mychoiceSdkStore.useHandlerCarQuoterEmail();
+    const { validatePhone, errorMessage: phoneErrorMessage } = mychoiceSdkStore.useHandlerCarQuoterPhone();
     const { multiplePoliciesDiscount, appInstallDiscount, caaMemberDiscount, quoterInfo, emailTo: { email, emailStatus }, } = discountState;
-    const { firstName, lastName, phone, driverLicense = '', caslConsent } = quoterInfo;
+    const { firstName, lastName, phone, phoneStatus, driverLicense = '', caslConsent } = quoterInfo;
     const handleMultiplePolicyChange = ({ value }) => {
         dispatchDiscountState({
             type: mychoiceSdkStore.StoreFormCarDiscountActionTypes.FormCarDiscountMultiplePoliciesSelect,
@@ -2259,10 +2305,16 @@ const SectionDiscountInfo$1 = () => {
         });
     };
     const handlePhoneNumberChange = ({ value }) => {
-        dispatchDiscountState({
-            type: mychoiceSdkStore.StoreFormCarDiscountActionTypes.FormCarDiscountQuoterPhoneSet,
-            payload: { phone: value },
-        });
+        const digits = value.replace(/\D/g, '');
+        if (digits.length === 10) {
+            validatePhone(value);
+        }
+        else {
+            dispatchDiscountState({
+                type: mychoiceSdkStore.StoreFormCarDiscountActionTypes.FormCarDiscountQuoterPhoneStatusSet,
+                payload: { phone: value, phoneStatus: mychoiceSdkComponents.ValidationStatusTypes.Initial },
+            });
+        }
     };
     const handleEmailChange = ({ value }) => {
         validateEmail(value);
@@ -2273,7 +2325,11 @@ const SectionDiscountInfo$1 = () => {
             payload: { caslConsent: value },
         });
     };
-    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", error: !phone && discountState.inValidation, errorMessage: getErrorMessage(phone, discountState.inValidation) }), jsxRuntime.jsx(InputFormEmailBox, { validationStatus: emailStatus, errorMessage: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
+    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
+                    ? phoneErrorMessage
+                    : getErrorMessage(phone, discountState.inValidation) || (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, {})] }));
 };
@@ -3458,8 +3514,9 @@ const SectionDiscountInfo = () => {
     const { discountState, dispatchDiscountState } = mychoiceSdkStore.useStoreFormHomeDiscount();
     // const { applicantState, dispatchApplicantInfoState } = useStoreFormHomeApplicantInfo();
     const { validateEmail, errorMessage } = mychoiceSdkStore.useHandlerHomeQuoterEmail();
+    const { validatePhone, errorMessage: phoneErrorMessage } = mychoiceSdkStore.useHandlerHomeQuoterPhone();
     const { multiplePoliciesDiscount, emailTo: { email, emailStatus }, quoterInfo = {}, } = discountState;
-    const { firstName = '', lastName = '', phone = '', caslConsent } = quoterInfo;
+    const { firstName = '', lastName = '', phone = '', phoneStatus, caslConsent } = quoterInfo;
     const handleMultiplePolicyChange = ({ value }) => {
         dispatchDiscountState({
             type: mychoiceSdkStore.StoreFormHomeDiscountActionTypes.FormHomeDiscountMultiplePoliciesSelect,
@@ -3479,10 +3536,16 @@ const SectionDiscountInfo = () => {
         });
     };
     const handlePhoneNumberChange = ({ value }) => {
-        dispatchDiscountState({
-            type: mychoiceSdkStore.StoreFormHomeDiscountActionTypes.FormHomeQuoterPhoneSet,
-            payload: { phone: value },
-        });
+        const digits = value.replace(/\D/g, '');
+        if (digits.length === 10) {
+            validatePhone(value);
+        }
+        else {
+            dispatchDiscountState({
+                type: mychoiceSdkStore.StoreFormHomeDiscountActionTypes.FormHomeQuoterPhoneStatusSet,
+                payload: { phone: value, phoneStatus: mychoiceSdkComponents.ValidationStatusTypes.Initial },
+            });
+        }
     };
     const handleEmailChange = ({ value }) => {
         validateEmail(value);
@@ -3495,7 +3558,11 @@ const SectionDiscountInfo = () => {
     };
     return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsxRuntime.jsx("h2", { className: "section-title", children: "A little extra info for discounts and connecting you with our partners." }), isTheBig ? (jsxRuntime.jsx(LabelFormBox, { title: `You are seconds away from receiving your ${insuranceType} insurance quotes, please provide your email after completing the discount section so we can send you your personalized free ${insuranceType} insurance quotes!` })) : (jsxRuntime.jsx("span", { className: "info-title-message", children: `You are seconds away from receiving your ${insuranceType} insurance quotes,
                please provide your email after completing the discount section so we
-                can send you your personalized free ${insuranceType} insurance quotes!` })), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleMultiplePolicyChange, name: "multiplePoliciesDiscount", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, multiplePoliciesDiscount), title: "You could potentially save up to 18% more. Would you consider consolidating multiple policies (like auto insurance) with the same provider?", description: "Most insurers offer discounts to consumers who purchase multiple policies. Select \u2018yes\u2019 if you\u2019d like to bundle your home and auto insurance policies." }), jsxRuntime.jsx(BlockDwellingInfo, {}), 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) }), jsxRuntime.jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(855) 325-8444", error: !phone && discountState.inValidation, errorMessage: getErrorMessage(phone, discountState.inValidation) }), jsxRuntime.jsx(InputFormEmailBox, { validationStatus: emailStatus, 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), errorMessage: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
+                can send you your personalized free ${insuranceType} insurance quotes!` })), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleMultiplePolicyChange, name: "multiplePoliciesDiscount", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, multiplePoliciesDiscount), title: "You could potentially save up to 18% more. Would you consider consolidating multiple policies (like auto insurance) with the same provider?", description: "Most insurers offer discounts to consumers who purchase multiple policies. Select \u2018yes\u2019 if you\u2019d like to bundle your home and auto insurance policies." }), jsxRuntime.jsx(BlockDwellingInfo, {}), 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) }), 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
+                    ? phoneErrorMessage
+                    : getErrorMessage(phone, discountState.inValidation) || (discountState.inValidation ? 'Enter a valid phone number.' : '') }), jsxRuntime.jsx(InputFormEmailBox, { validationStatus: emailStatus, 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), errorMessage: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
                     ? errorMessage
                     : getErrorMessage(email, discountState.inValidation), error: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined || (!email && discountState.inValidation) }), 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$1, { className: isTheBig ? 'thebig-bold' : 'mychoice' }), jsxRuntime.jsx(BlockNextPageInfo$1, {})] }));
 };
@@ -3817,8 +3884,9 @@ const SectionApplicant = () => {
     const isTheBig = appType === mychoiceSdkComponents.AppTypes.TheBig;
     const { applicantState, dispatchApplicantState } = mychoiceSdkStore.useStoreFormLifeApplicant();
     const { validateEmail, errorMessage } = mychoiceSdkStore.useHandlerLifeQuoterEmail();
+    const { validatePhone, errorMessage: phoneErrorMessage } = mychoiceSdkStore.useHandlerLifeQuoterPhone();
     const { birthYear, birthMonth, birthDay, gender, smoker, quoterInfo, emailTo: { email, emailStatus }, inValidation, } = applicantState;
-    const { firstName, lastName, phone } = quoterInfo || {};
+    const { firstName, lastName, phone, phoneStatus } = quoterInfo || {};
     const defaultDateOfBirth = {
         day: birthDay,
         month: birthMonth,
@@ -3869,10 +3937,16 @@ const SectionApplicant = () => {
         });
     };
     const handlePhoneNumberChange = ({ value }) => {
-        dispatchApplicantState({
-            type: mychoiceSdkStore.StoreFormLifeApplicantActionTypes.FormLifeQuoterPhoneSet,
-            payload: { phone: value },
-        });
+        const digits = value.replace(/\D/g, '');
+        if (digits.length === 10) {
+            validatePhone(value);
+        }
+        else {
+            dispatchApplicantState({
+                type: mychoiceSdkStore.StoreFormLifeApplicantActionTypes.FormLifeQuoterPhoneStatusSet,
+                payload: { phone: value, phoneStatus: mychoiceSdkComponents.ValidationStatusTypes.Initial },
+            });
+        }
     };
     const handleEmailChange = ({ value }) => {
         validateEmail(value);
@@ -3892,7 +3966,11 @@ const SectionApplicant = () => {
                             textAlign: 'center',
                             fontSize: '1.15rem',
                             marginTop: '10px',
-                        }, children: `Canadians have compared rates in the last 24 hours and saved ${savedPercentage}% on average` })] }), jsxRuntime.jsx("h2", { className: "section-title", style: { textAlign: 'center' }, children: `${lockEmoji} Complete the form below to see which companies are offering your quotes.` }), jsxRuntime.jsx("span", { className: "info-title-message", children: "You are seconds away from receiving your life insurance quotes, please provide your email after completing the final steps so we can send you your personalized free life insurance quotes!" }), jsxRuntime.jsx(DateSelectFormBox, { name: "dateOfBirth", dateNames: ['birthYear', 'birthMonth', 'birthDay'], onDateChange: handleDateOfBirthChange, defaultValue: defaultDateOfBirth, title: "Date of birth", error: inValidation, errorMessage: getDateErrorMessage([birthDay || '', birthMonth || '', birthYear || ''], inValidation), maxDate: mychoiceSdkComponents.subYearsFromDate('', 14), isDay: true }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.genderOptions, name: "gender", onChange: handleGenderChange, defaultValue: getSelectedOption(mychoiceSdkComponents.genderOptions, gender), title: "Gender", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !gender && inValidation, errorMessage: getErrorMessage(`${gender}`.toString(), inValidation) }), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.smokerOptions, onChange: handleSmokerChange, name: "smoker", defaultValue: getSelectedOption(mychoiceSdkComponents.smokerOptions, smoker), title: "Smoker" }), 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(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Your First Name", error: !firstName && inValidation, errorMessage: getErrorMessage(firstName, inValidation) }), jsxRuntime.jsx(InputFormBox, { name: "lastname", title: "Last Name", onChange: handleLastNameChange, defaultValue: lastName, placeholder: "Your Last Name", error: !lastName && inValidation, errorMessage: getErrorMessage(lastName, inValidation) }), jsxRuntime.jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(855) 325-8444", error: !phone && inValidation, errorMessage: getErrorMessage(phone, inValidation) }), jsxRuntime.jsx(InputFormEmailBox, { validationStatus: emailStatus, name: "email", title: "Please provide your email address so we can send you a copy of your quotes", onChange: handleEmailChange, defaultValue: email, placeholder: mychoiceSdkComponents.getPlaceholderEmail(appType), errorMessage: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
+                        }, children: `Canadians have compared rates in the last 24 hours and saved ${savedPercentage}% on average` })] }), jsxRuntime.jsx("h2", { className: "section-title", style: { textAlign: 'center' }, children: `${lockEmoji} Complete the form below to see which companies are offering your quotes.` }), jsxRuntime.jsx("span", { className: "info-title-message", children: "You are seconds away from receiving your life insurance quotes, please provide your email after completing the final steps so we can send you your personalized free life insurance quotes!" }), jsxRuntime.jsx(DateSelectFormBox, { name: "dateOfBirth", dateNames: ['birthYear', 'birthMonth', 'birthDay'], onDateChange: handleDateOfBirthChange, defaultValue: defaultDateOfBirth, title: "Date of birth", error: inValidation, errorMessage: getDateErrorMessage([birthDay || '', birthMonth || '', birthYear || ''], inValidation), maxDate: mychoiceSdkComponents.subYearsFromDate('', 14), isDay: true }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.genderOptions, name: "gender", onChange: handleGenderChange, defaultValue: getSelectedOption(mychoiceSdkComponents.genderOptions, gender), title: "Gender", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !gender && inValidation, errorMessage: getErrorMessage(`${gender}`.toString(), inValidation) }), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.smokerOptions, onChange: handleSmokerChange, name: "smoker", defaultValue: getSelectedOption(mychoiceSdkComponents.smokerOptions, smoker), title: "Smoker" }), 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(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Your First Name", error: !firstName && inValidation, errorMessage: getErrorMessage(firstName, inValidation) }), jsxRuntime.jsx(InputFormBox, { name: "lastname", title: "Last Name", onChange: handleLastNameChange, defaultValue: lastName, placeholder: "Your Last Name", error: !lastName && inValidation, errorMessage: getErrorMessage(lastName, inValidation) }), 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 && inValidation)
+                    || (!phone && inValidation), errorMessage: phoneStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
+                    ? phoneErrorMessage
+                    : getErrorMessage(phone, inValidation) || (inValidation ? 'Enter a valid phone number.' : '') }), jsxRuntime.jsx(InputFormEmailBox, { validationStatus: emailStatus, name: "email", title: "Please provide your email address so we can send you a copy of your quotes", onChange: handleEmailChange, defaultValue: email, placeholder: mychoiceSdkComponents.getPlaceholderEmail(appType), errorMessage: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
                     ? errorMessage
                     : getErrorMessage(email, inValidation), error: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined || (!email && inValidation) }), jsxRuntime.jsx(BlockSubmit, { className: isTheBig ? 'thebig-bold' : '' }), jsxRuntime.jsx(BlockNextPageInfo, {})] }));
 };