@mychoice/mychoice-sdk-modules 2.2.24 → 2.2.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,5 +1,5 @@
1
1
  import { SelectOptionGroupInterface } from '@mychoice/mychoice-sdk-components';
2
2
  /**
3
- * Filter out G1/G2 options from "Serious" section for trafficTicketsGroupOptions
3
+ * Filter out G1/G2 options (ALC, RB) from the "Criminal" section for trafficTicketsGroupOptions
4
4
  */
5
5
  export declare const getTrafficTicketsGroupOptionsWithoutG1G2: () => SelectOptionGroupInterface[];
@@ -1,3 +1,3 @@
1
1
  import { SdkFC } from '@mychoice/mychoice-sdk-components';
2
- import { InputFormBoxProps } from './interface';
3
- export declare const InputFormPhoneBox: SdkFC<InputFormBoxProps>;
2
+ import { InputFormPhoneBoxProps } from './interface';
3
+ export declare const InputFormPhoneBox: SdkFC<InputFormPhoneBoxProps>;
@@ -13,3 +13,6 @@ export type InputFormBoxProps = DefaultInputProps & {
13
13
  export type InputFormEmailBoxProps = InputFormBoxProps & {
14
14
  validationStatus?: ValidationStatusTypes;
15
15
  };
16
+ export type InputFormPhoneBoxProps = InputFormBoxProps & {
17
+ validationStatus?: ValidationStatusTypes;
18
+ };
package/dist/esm/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
2
  import { ErrorBoundary } from 'react-error-boundary';
3
- import { AppTypes, isMyChoiceLike, TitleForm, TooltipForm, IconDelete, ColorVariablesTypes, InputTypes, InputForm, InputFormPhone, InputFormEmail, InputFormLicence, SelectForm, getFormattedDate, DateTypes, getDateOptions, ButtonForm, defaultBrokerPhone, DriverPriorityTypes, SizeTypes, ButtonBase, CategoryTypes, ColorTypes, defaultLocalIndex, liabilityOptions, accidentBenefitsOptionalOptions, coverageOptions, lossOfUseOptions, liabilityForDamageOptions, limitedWaiverOfDepreciationOptions, OfferDetail, CompanyRoleTypes, OperationHoursInfo, OfferHeader, OfferPrice, ButtonTypes, ButtonVariantTypes, IconDropdownArrow, InsuranceTypes, HeaderNavGroup, ButtonMenu, DeviceTypes, IconLoaderPrimary, getInsuranceType, RequestStatusTypes, formatPostalCode, IconLoaderSecondary, postalCodeFormat, useEffectOnce, carCondition, carStatus, carWinterTiresCheck, carKeepPlace, carUsagePurpose, firstDriveDistanceList, yearlyDriveDistanceList, numberWithCommas, VehiclePrimaryUseTypes, businessUsePercentOptions, addDaysToDate, comprehensiveCoverage, collisionCoverage, maritalStatusOptions, subYearsFromDate, occupationOptions, genderOptions, applicantRelationshipOptions, addYearsToDate, checkDateIsSpecial, DriverLicenceTypes, getDifferenceInYears, compareDates, yesNoOptions, getLicenceTypeOptions, getDisabledLicenceTypes, getDifferenceInMonths, addMonthsToDate, getMinDate, CheckboxForm, insuranceCancellationReasonOptions, subMonthsFromDate, getMinDateByYears, DriverListTypes, licenceSuspensionsReasonOptions, trafficTicketsGroupOptions, ValidationStatusTypes, getPlaceholderEmail, QuoteEdit, homeOwnerTypeOptions, tenantBuildingStructureOptions, condoBuildingStructureOptions, homeBuildingStructureOptions, residentsOptions, insuredYearsOptions, getInsuranceYearsOptions, ApplicantListTypes, claimTypeOptions, exteriorFinishOptions, constructionTypeOptions, garageTypeOptions, getNumericOptions, fireHallDistanceOptions, fireHydrantDistanceOptions, primaryHeatingTypeOptions, auxHeatingTypeOptions, InfoMessage, ppOptions, homeCoverageOptions, homeLiabilityOptions, lifeInsuranceTypeOptions, lifeInsuranceOntarioTypeOptions, lifeCoverageOptions, smokerOptions, MychoiceStep, Step, IconClock, ButtonArrow, DirectionTypes, ButtonTabArrow, ButtonTab, ButtonTabMobile, NavigationCar, NavigationPerson, NavigationDiscount, NavigationQuotes, NavigationAddress, NavigationProperty, ModalTypes } from '@mychoice/mychoice-sdk-components';
4
- import { useStoreAppConfig, useStoreFormCarVehicle, useStoreFormCarDriverBase, useStoreFormCarDiscount, StoreFormCarDiscountActionTypes, useStoreFormCarQuote, CarQuoteDataHandler, useValidationCarDiscount, StoreFormCarVehicleActionTypes, useStoreFormHomeDiscount, useStorePartner, useStoreDeviceType, useStoreAppLoader, useStoreAppModal, StoreConfigAppModalActionTypes, useHandlerPostal, useHandlerCarMake, useHandlerCarModel, useProvince, useAbReform, useValidationVehicle, useAutofillCarForm, StoreFormCarDriverBaseActionTypes, useStoreFormCarConfig, useStoreFormCarDriverInfo, StoreFormCarDriverInfoActionTypes, useStoreFormCarDriverLicence, addDayToDate, StoreFormCarDriverLicenceActionTypes, useStoreFormCarDriverInsurance, StoreFormCarDriverInsuranceActionTypes, useStoreFormCarDriverCancellation, StoreFormCarDriverCancellationActionTypes, useStoreFormCarDriverSuspension, StoreFormCarDriverSuspensionActionTypes, useStoreFormCarDriverAccident, StoreFormCarDriverAccidentActionTypes, useStoreFormCarDriverTicket, StoreFormCarDriverTicketActionTypes, useValidationDriver, useHandlerCarQuoterEmail, useStoreFormHomeDwelling, useStoreFormHomePostal, useStoreFormHomeApplicantBase, StoreFormHomePostalActionTypes, StoreFormHomeDwellingActionTypes, StoreConfigAppConfigActionTypes, StoreFormHomeApplicantBaseActionTypes, useValidationAddress, useStoreFormHomeApplicantInfo, StoreFormHomeDiscountActionTypes, StoreFormHomeApplicantInfoActionTypes, useStoreFormHomeApplicantInsurance, StoreFormHomeApplicantInsuranceActionTypes, useStoreFormHomeApplicantCancellation, StoreFormHomeApplicantCancellationActionTypes, useStoreFormHomeApplicantClaim, StoreFormHomeApplicantClaimActionTypes, useValidationApplicant, useValidationDwelling, useStoreFormHomeQuote, HomeQuoteDataHandler, useValidationHomeDiscount, useHandlerHomeQuoterEmail, useStoreFormLifeCoverage, StoreFormLifeCoverageActionTypes, useValidationCoverage, useAutofillLifeForm, useStoreFormLifeQuote, useStoreFormLifeApplicant, LifeQuoteDataHandler, useValidationLifeApplicant, useHandlerLifeQuoterEmail, StoreFormLifeApplicantActionTypes, useStoreFormCarPostal, useStoreFormLifePostal, ClearFormDataHandler, useStoreAppDevice, useStoreClient, useHandlerAuth, useHandlerPartner, StoreConfigAppLoaderActionTypes, StoreFormCarConfigActionTypes, StoreFormCarPostalActionTypes, StoreFormCarQuoteActionTypes, StoreFormHomeQuoteActionTypes, StoreFormLifePostalActionTypes, StoreFormLifeQuoteActionTypes, StoreClientActionTypes, StoreConfigAppDeviceActionTypes, StoreProvider, initHttpResponse } from '@mychoice/mychoice-sdk-store';
3
+ import { AppTypes, isMyChoiceLike, TitleForm, TooltipForm, IconDelete, ColorVariablesTypes, InputTypes, InputForm, InputFormPhone, InputFormEmail, InputFormLicence, SelectForm, getFormattedDate, DateTypes, getDateOptions, ButtonForm, defaultBrokerPhone, DriverPriorityTypes, SizeTypes, ButtonBase, CategoryTypes, ColorTypes, defaultLocalIndex, liabilityOptions, accidentBenefitsOptionalOptions, coverageOptions, lossOfUseOptions, liabilityForDamageOptions, limitedWaiverOfDepreciationOptions, OfferDetail, CompanyRoleTypes, OperationHoursInfo, OfferHeader, OfferPrice, ButtonTypes, ButtonVariantTypes, IconDropdownArrow, InsuranceTypes, HeaderNavGroup, ButtonMenu, DeviceTypes, IconLoaderPrimary, getInsuranceType, RequestStatusTypes, formatPostalCode, IconLoaderSecondary, postalCodeFormat, useEffectOnce, carCondition, carStatus, carWinterTiresCheck, carKeepPlace, carUsagePurpose, firstDriveDistanceList, yearlyDriveDistanceList, numberWithCommas, VehiclePrimaryUseTypes, businessUsePercentOptions, addDaysToDate, comprehensiveCoverage, collisionCoverage, maritalStatusOptions, subYearsFromDate, occupationOptions, genderOptions, applicantRelationshipOptions, addYearsToDate, checkDateIsSpecial, DriverLicenceTypes, getDifferenceInYears, compareDates, yesNoOptions, getLicenceTypeOptions, getDisabledLicenceTypes, getDifferenceInMonths, addMonthsToDate, getMinDate, getMinDateByYears, CheckboxForm, insuranceCancellationReasonOptions, subMonthsFromDate, DriverListTypes, licenceSuspensionsReasonOptions, trafficTicketsGroupOptions, ValidationStatusTypes, getPlaceholderEmail, QuoteEdit, homeOwnerTypeOptions, tenantBuildingStructureOptions, condoBuildingStructureOptions, homeBuildingStructureOptions, residentsOptions, insuredYearsOptions, getInsuranceYearsOptions, ApplicantListTypes, claimTypeOptions, exteriorFinishOptions, constructionTypeOptions, garageTypeOptions, getNumericOptions, fireHallDistanceOptions, fireHydrantDistanceOptions, primaryHeatingTypeOptions, auxHeatingTypeOptions, InfoMessage, ppOptions, homeCoverageOptions, homeLiabilityOptions, lifeInsuranceTypeOptions, lifeInsuranceOntarioTypeOptions, lifeCoverageOptions, smokerOptions, MychoiceStep, Step, IconClock, ButtonArrow, DirectionTypes, ButtonTabArrow, ButtonTab, ButtonTabMobile, NavigationCar, NavigationPerson, NavigationDiscount, NavigationQuotes, NavigationAddress, NavigationProperty, ModalTypes } from '@mychoice/mychoice-sdk-components';
4
+ import { useStoreAppConfig, useStoreFormCarVehicle, useStoreFormCarDriverBase, useStoreFormCarDiscount, StoreFormCarDiscountActionTypes, useStoreFormCarQuote, CarQuoteDataHandler, useValidationCarDiscount, StoreFormCarVehicleActionTypes, useStoreFormHomeDiscount, useStorePartner, useStoreDeviceType, useStoreAppLoader, useStoreAppModal, StoreConfigAppModalActionTypes, useHandlerPostal, useHandlerCarMake, useHandlerCarModel, useProvince, useAbReform, useValidationVehicle, useAutofillCarForm, StoreFormCarDriverBaseActionTypes, useStoreFormCarConfig, useStoreFormCarDriverInfo, StoreFormCarDriverInfoActionTypes, useStoreFormCarDriverLicence, addDayToDate, StoreFormCarDriverLicenceActionTypes, useStoreFormCarDriverInsurance, StoreFormCarDriverInsuranceActionTypes, useStoreFormCarDriverCancellation, StoreFormCarDriverCancellationActionTypes, useStoreFormCarDriverSuspension, StoreFormCarDriverSuspensionActionTypes, useStoreFormCarDriverAccident, StoreFormCarDriverAccidentActionTypes, useStoreFormCarDriverTicket, StoreFormCarDriverTicketActionTypes, useValidationDriver, useHandlerCarQuoterEmail, useHandlerCarQuoterPhone, useStoreFormHomeDwelling, useStoreFormHomePostal, useStoreFormHomeApplicantBase, StoreFormHomePostalActionTypes, StoreFormHomeDwellingActionTypes, StoreConfigAppConfigActionTypes, StoreFormHomeApplicantBaseActionTypes, useValidationAddress, useStoreFormHomeApplicantInfo, StoreFormHomeDiscountActionTypes, StoreFormHomeApplicantInfoActionTypes, useStoreFormHomeApplicantInsurance, StoreFormHomeApplicantInsuranceActionTypes, useStoreFormHomeApplicantCancellation, StoreFormHomeApplicantCancellationActionTypes, useStoreFormHomeApplicantClaim, StoreFormHomeApplicantClaimActionTypes, useValidationApplicant, useValidationDwelling, useStoreFormHomeQuote, HomeQuoteDataHandler, useValidationHomeDiscount, useHandlerHomeQuoterEmail, useHandlerHomeQuoterPhone, useStoreFormLifeCoverage, StoreFormLifeCoverageActionTypes, useValidationCoverage, useAutofillLifeForm, useStoreFormLifeQuote, useStoreFormLifeApplicant, LifeQuoteDataHandler, useValidationLifeApplicant, useHandlerLifeQuoterEmail, useHandlerLifeQuoterPhone, StoreFormLifeApplicantActionTypes, useStoreFormCarPostal, useStoreFormLifePostal, ClearFormDataHandler, useStoreAppDevice, useStoreClient, useHandlerAuth, useHandlerPartner, StoreConfigAppLoaderActionTypes, StoreFormCarConfigActionTypes, StoreFormCarPostalActionTypes, StoreFormCarQuoteActionTypes, StoreFormHomeQuoteActionTypes, StoreFormLifePostalActionTypes, StoreFormLifeQuoteActionTypes, StoreClientActionTypes, StoreConfigAppDeviceActionTypes, StoreProvider, initHttpResponse } from '@mychoice/mychoice-sdk-store';
5
5
  import { useNavigate, useLocation, BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
6
6
  import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
7
7
  import { random } from 'lodash';
@@ -48,8 +48,8 @@ InputFormBox.defaultProps = {
48
48
  };
49
49
 
50
50
  const InputFormPhoneBox = (props) => {
51
- const { className, defaultValue, placeholder, disabled, error, name, title, onChange, errorMessage, hintMessage, } = props;
52
- return (jsx(Container, { name: name, className: ` ${className} ${error ? 'error' : ''}`, title: title, errorMessage: errorMessage, hintMessage: hintMessage, children: jsx(InputFormPhone, { className: "input-form", name: name, type: InputTypes.Text, defaultValue: defaultValue, onChange: onChange, placeholder: placeholder, disabled: disabled, error: error }) }));
51
+ const { className, defaultValue, placeholder, disabled, error, name, title, onChange, errorMessage, hintMessage, validationStatus, } = props;
52
+ return (jsx(Container, { name: name, className: ` ${className} ${error ? 'error' : ''}`, title: title, errorMessage: errorMessage, hintMessage: hintMessage, children: jsx(InputFormPhone, { className: "input-form", name: name, type: InputTypes.Text, defaultValue: defaultValue, onChange: onChange, placeholder: placeholder, disabled: disabled, error: error, validationStatus: validationStatus }) }));
53
53
  };
54
54
  InputFormPhoneBox.defaultProps = {
55
55
  className: '',
@@ -699,14 +699,22 @@ const getRecommendedRange = (distanceDaily, distanceBusiness) => {
699
699
  kmEachDay = +distanceBusiness;
700
700
  }
701
701
  switch (true) {
702
+ case kmEachDay === 0:
703
+ return 5000;
702
704
  case kmEachDay === 1:
703
705
  return 8000;
704
- case ((kmEachDay >= 2) && (kmEachDay <= 10)):
706
+ case ((kmEachDay >= 2) && (kmEachDay <= 5)):
705
707
  return 10000;
706
- case ((kmEachDay >= 15) && (kmEachDay <= 20)):
708
+ case ((kmEachDay >= 6) && (kmEachDay <= 12)):
709
+ return 10000;
710
+ case ((kmEachDay >= 13) && (kmEachDay <= 20)):
707
711
  return 15000;
712
+ case ((kmEachDay >= 21) && (kmEachDay <= 29)):
713
+ return 20000;
708
714
  case ((kmEachDay >= 30) && (kmEachDay <= 40)):
709
715
  return 20000;
716
+ case ((kmEachDay >= 41) && (kmEachDay <= 49)):
717
+ return 30000;
710
718
  case ((kmEachDay >= 50) && (kmEachDay <= 80)):
711
719
  return 30000;
712
720
  case ((kmEachDay >= 90) && (kmEachDay <= 100)):
@@ -875,9 +883,7 @@ const BlockCarConditionInfo = () => {
875
883
  type: StoreFormCarVehicleActionTypes.FormCarDailyDistanceSelect,
876
884
  payload: { distanceDaily: value },
877
885
  });
878
- const yearlyDefault = Number(value) === 0
879
- ? '5000'
880
- : `${getRecommendedRange(value, primaryUse === VehiclePrimaryUseTypes.Business ? distanceBusiness : 1)}`;
886
+ const yearlyDefault = `${getRecommendedRange(value, primaryUse === VehiclePrimaryUseTypes.Business ? distanceBusiness : 1)}`;
881
887
  dispatchVehicleState({
882
888
  type: StoreFormCarVehicleActionTypes.FormCarYearlyDistanceSelect,
883
889
  payload: { distanceYearly: yearlyDefault },
@@ -899,7 +905,7 @@ const BlockCarConditionInfo = () => {
899
905
  purchaseDay || '',
900
906
  purchaseMonth || '',
901
907
  purchaseYear || '',
902
- ], vehicleState.inValidation), error: vehicleState.inValidation, minDate: year ? `${Number(year) - 1}-01-01` : getFormattedDate('', 'yyyy-MM-dd'), maxDate: getFormattedDate('', 'yyyy-MM-dd') }), !(isAlbertaProvince && isTheBig) && (jsx(SwitchButtonBox, { items: carWinterTiresCheck, onChange: handleWinterTiresChange, name: "winterTires", defaultValue: getSelectedOption(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?" })), jsx(SelectFormBox, { options: carKeepPlace, name: "parkingLocation", onChange: handleCarParkingLocationChange, defaultValue: getSelectedOption(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) }), jsx(SwitchButtonBox, { items: carUsagePurpose, onChange: handleCarUsageChange, name: "primaryUse", defaultValue: getSelectedOption(carUsagePurpose, primaryUse) || 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?" }), jsx(SelectFormBox, { options: firstDriveDistanceList, name: "distanceDaily", onChange: handleCarDailyDistanceChange, defaultValue: getSelectedOption(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) }), jsx(SelectFormBox, { options: yearlyDriveDistanceList, name: "distanceYearly", onChange: handleCarYearlyDistanceChange, defaultValue: getSelectedOption(yearlyDriveDistanceList, distanceYearly), title: "How many total kilometers are driven each year?", placeholder: "Select", hintMessage: distanceDaily ? `Based on your daily driven kilometers, we recommend
908
+ ], vehicleState.inValidation), error: vehicleState.inValidation, minDate: year ? `${Number(year) - 1}-01-01` : getFormattedDate('', 'yyyy-MM-dd'), maxDate: getFormattedDate('', 'yyyy-MM-dd') }), !(isAlbertaProvince && isTheBig) && (jsx(SwitchButtonBox, { items: carWinterTiresCheck, onChange: handleWinterTiresChange, name: "winterTires", defaultValue: getSelectedOption(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?" })), jsx(SelectFormBox, { options: carKeepPlace, name: "parkingLocation", onChange: handleCarParkingLocationChange, defaultValue: getSelectedOption(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) }), jsx(SwitchButtonBox, { items: carUsagePurpose, onChange: handleCarUsageChange, name: "primaryUse", defaultValue: getSelectedOption(carUsagePurpose, primaryUse) || 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?" }), jsx(SelectFormBox, { options: firstDriveDistanceList, name: "distanceDaily", onChange: handleCarDailyDistanceChange, defaultValue: getSelectedOption(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) }), jsx(SelectFormBox, { options: yearlyDriveDistanceList, name: "distanceYearly", onChange: handleCarYearlyDistanceChange, defaultValue: getSelectedOption(yearlyDriveDistanceList, distanceYearly), title: "How many total kilometers are driven each year?", placeholder: "Select", hintMessage: distanceDaily !== undefined ? `Based on your daily driven kilometers, we recommend
903
909
  ${numberWithCommas(getRecommendedRange(distanceDaily, primaryUse === VehiclePrimaryUseTypes.Business ? distanceBusiness : 1))} for your yearly driven kilometers` : '', autoSelectIfValueIsOutOfOptions: false, error: !distanceYearly && vehicleState.inValidation, errorMessage: getErrorMessage(distanceYearly, vehicleState.inValidation) }), primaryUse === 'business' && (jsx(SelectFormBox, { options: businessUsePercentOptions, name: "businessUsePercent", onChange: handleBusinessUsePercentChange, defaultValue: getSelectedOption(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 && (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: addDaysToDate('', 1), maxDate: addDaysToDate('', 90), isDay: true }))] }));
904
910
  };
905
911
 
@@ -1479,20 +1485,19 @@ const SectionDriverLicence = () => {
1479
1485
  const showGDateAfterG2 = firstClass === DriverLicenceTypes.G2 && receivedG === true;
1480
1486
  const g2Date = toDate(g2LicenceYear, g2LicenceMonth);
1481
1487
  const gDate = toDate(gLicenceYear, gLicenceMonth);
1482
- // G1 branch: DTC shows whenever G1 is selected and Q1 date is entered (no time gate per flowchart)
1483
- const showDtcG1Only = firstClass === DriverLicenceTypes.G1 && !!q1Date;
1484
- const showDtcG1G2 = firstClass === DriverLicenceTypes.G1
1485
- && showG2Date
1486
- && !!g2Date
1487
- && getDifferenceInYears('', g2Date) <= 3;
1488
- // Branch B: DTC shown as soon as class=G2 and Q1 is within 3 years (before G question)
1488
+ // G1 branch: ask once, based on the first licence date. Show/hide uses 5-year gate; question text says "3 years".
1489
+ const showDtcG1Only = firstClass === DriverLicenceTypes.G1
1490
+ && !!q1Date
1491
+ && getDifferenceInYears('', q1Date) <= 5
1492
+ && !showG2Date;
1493
+ // Branch B: DTC shown as soon as class=G2 and Q1 is within 5 years (before G question)
1489
1494
  const showDtcG2Only = firstClass === DriverLicenceTypes.G2
1490
1495
  && !!q1Date
1491
- && getDifferenceInYears('', q1Date) <= 3;
1492
- // Branch C G Full: within 3 years of Q1 (G date)
1496
+ && getDifferenceInYears('', q1Date) <= 5;
1497
+ // Branch C G Full: within 5 years of Q1 (G date)
1493
1498
  const showDtcGFull = firstClass === DriverLicenceTypes.G
1494
1499
  && !!q1Date
1495
- && getDifferenceInYears('', q1Date) <= 3;
1500
+ && getDifferenceInYears('', q1Date) <= 5;
1496
1501
  // ── Validation error messages ──
1497
1502
  const q1MinDate = getG1MinDate();
1498
1503
  const q1ChronoError = driverState.inValidation
@@ -1528,7 +1533,7 @@ const SectionDriverLicence = () => {
1528
1533
  };
1529
1534
  const g2MaxDate = getMax60Date(q1Date);
1530
1535
  const gMaxDate = getMax60Date(q1Date);
1531
- return (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [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 && (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 === DriverLicenceTypes.G1 && (jsxs(Fragment, { children: [showDtcG1Only && (jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a gov't approved drivers education course within the past 5 years?` })), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleReceivedG2Change, name: "receivedG2", defaultValue: getSelectedOption(yesNoOptions, receivedG2), title: `Did ${driverName} receive a G2 license?` }), showG2Date && (jsx(DateSelectFormBox, { name: "g2LicenceDate", dateNames: ['g2LicenceYear', 'g2LicenceMonth'], onDateChange: handleLicenceDateChange(DriverLicenceTypes.G2), defaultValue: getDefaultLicenceDate(DriverLicenceTypes.G2), title: `When did ${driverName} receive this G2 license?`, errorMessage: g2Error, error: driverState.inValidation, minDate: g2MinDate, maxDate: g2MaxDate })), showDtcG1G2 && (jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a gov't approved drivers education course within the past 3 years?` })), showGQuestionAfterG1 && (jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleReceivedGChange, name: "receivedG", defaultValue: getSelectedOption(yesNoOptions, receivedG), title: `Did ${driverName} receive a G license?` })), showGDateAfterG1 && (jsx(DateSelectFormBox, { name: "gLicenceDate", dateNames: ['gLicenceYear', 'gLicenceMonth'], onDateChange: handleLicenceDateChange(DriverLicenceTypes.G), defaultValue: getDefaultLicenceDate(DriverLicenceTypes.G), title: `When did ${driverName} receive this G license?`, errorMessage: gError, error: driverState.inValidation, minDate: gMinDate, maxDate: gMaxDate }))] })), firstClass === DriverLicenceTypes.G2 && (jsxs(Fragment, { children: [showDtcG2Only && (jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a gov't approved drivers education course within the past 3 years?` })), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleReceivedGChange, name: "receivedG", defaultValue: getSelectedOption(yesNoOptions, receivedG), title: `Did ${driverName} receive a G license?` }), showGDateAfterG2 && (jsx(DateSelectFormBox, { name: "gLicenceDate", dateNames: ['gLicenceYear', 'gLicenceMonth'], onDateChange: handleLicenceDateChange(DriverLicenceTypes.G), defaultValue: getDefaultLicenceDate(DriverLicenceTypes.G), title: `When did ${driverName} receive this G license?`, errorMessage: gError, error: driverState.inValidation, minDate: gMinDate, maxDate: gMaxDate }))] })), firstClass === DriverLicenceTypes.G && !isOnlyG && showDtcGFull && (jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a gov't approved drivers education course within the past 3 years?` })), isOnlyG && showDtcGFull && (jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a gov't approved drivers education course within the past 3 years?` })), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handlePreviousLicenceChange, name: "previousLicence", defaultValue: getSelectedOption(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)." })] }));
1536
+ return (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [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 && (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 === DriverLicenceTypes.G1 && (jsxs(Fragment, { children: [showDtcG1Only && (jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a gov't approved drivers education course within the past 3 years?` })), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleReceivedG2Change, name: "receivedG2", defaultValue: getSelectedOption(yesNoOptions, receivedG2), title: `Did ${driverName} receive a G2 license?` }), showG2Date && (jsx(DateSelectFormBox, { name: "g2LicenceDate", dateNames: ['g2LicenceYear', 'g2LicenceMonth'], onDateChange: handleLicenceDateChange(DriverLicenceTypes.G2), defaultValue: getDefaultLicenceDate(DriverLicenceTypes.G2), title: `When did ${driverName} receive this G2 license?`, errorMessage: g2Error, error: driverState.inValidation, minDate: g2MinDate, maxDate: g2MaxDate })), showGQuestionAfterG1 && (jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleReceivedGChange, name: "receivedG", defaultValue: getSelectedOption(yesNoOptions, receivedG), title: `Did ${driverName} receive a G license?` })), showGDateAfterG1 && (jsx(DateSelectFormBox, { name: "gLicenceDate", dateNames: ['gLicenceYear', 'gLicenceMonth'], onDateChange: handleLicenceDateChange(DriverLicenceTypes.G), defaultValue: getDefaultLicenceDate(DriverLicenceTypes.G), title: `When did ${driverName} receive this G license?`, errorMessage: gError, error: driverState.inValidation, minDate: gMinDate, maxDate: gMaxDate }))] })), firstClass === DriverLicenceTypes.G2 && (jsxs(Fragment, { children: [showDtcG2Only && (jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a gov't approved drivers education course within the past 3 years?` })), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleReceivedGChange, name: "receivedG", defaultValue: getSelectedOption(yesNoOptions, receivedG), title: `Did ${driverName} receive a G license?` }), showGDateAfterG2 && (jsx(DateSelectFormBox, { name: "gLicenceDate", dateNames: ['gLicenceYear', 'gLicenceMonth'], onDateChange: handleLicenceDateChange(DriverLicenceTypes.G), defaultValue: getDefaultLicenceDate(DriverLicenceTypes.G), title: `When did ${driverName} receive this G license?`, errorMessage: gError, error: driverState.inValidation, minDate: gMinDate, maxDate: gMaxDate }))] })), firstClass === DriverLicenceTypes.G && !isOnlyG && showDtcGFull && (jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a gov't approved drivers education course within the past 3 years?` })), isOnlyG && showDtcGFull && (jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a gov't approved drivers education course within the past 3 years?` })), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handlePreviousLicenceChange, name: "previousLicence", defaultValue: getSelectedOption(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)." })] }));
1532
1537
  }
1533
1538
  return (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsx(InputFormBox, { name: "firstLicenceAge", title: getLicenceAgeTitle(), onChange: handleLicenceAgeChange, type: InputTypes.Number, defaultValue: firstLicenceAge, description: configState.toolTip.licenceAge, hintMessage: birthDate
1534
1539
  ? `${driverName} was licenced in ${Number(birthYear) + Number(firstLicenceAge)} - ${Number(birthYear) + Number(firstLicenceAge) + 1}`
@@ -1541,7 +1546,7 @@ const SectionDriverInsurancePolicy = () => {
1541
1546
  const { driverState, dispatchDriverInsuranceState } = useStoreFormCarDriverInsurance();
1542
1547
  const { discountState, dispatchDiscountState } = useStoreFormCarDiscount();
1543
1548
  const { quoteState: { isRequested }, } = useStoreFormCarQuote();
1544
- 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];
1549
+ 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];
1545
1550
  const { policyStartYear, policyStartMonth, policyStartDay } = discountState;
1546
1551
  const driverNameDefault = `Driver ${driverState.activeIndex + 1}`;
1547
1552
  const birthDate = birthYear && birthMonth && birthDay ? `${birthYear}-${birthMonth}-${birthDay}` : '';
@@ -1579,17 +1584,49 @@ const SectionDriverInsurancePolicy = () => {
1579
1584
  month: policyStartMonth,
1580
1585
  day: policyStartDay,
1581
1586
  };
1587
+ const prevListedRef = useRef({ year: listedYear, month: listedMonth });
1588
+ const getFirstLicenceDateKey = () => {
1589
+ if (licenceType === DriverLicenceTypes.G)
1590
+ return `${gLicenceYear || ''}-${gLicenceMonth || ''}`;
1591
+ if (licenceType === DriverLicenceTypes.G2)
1592
+ return `${g2LicenceYear || ''}-${g2LicenceMonth || ''}`;
1593
+ if (licenceType === DriverLicenceTypes.G1)
1594
+ return `${g1LicenceYear || ''}-${g1LicenceMonth || ''}`;
1595
+ return `${firstLicenceAge || ''}`;
1596
+ };
1597
+ const firstLicenceDateKey = getFirstLicenceDateKey();
1598
+ const prevFirstLicenceRef = useRef(firstLicenceDateKey);
1582
1599
  useEffect(() => {
1583
1600
  if (listedYear && listedMonth && !isRequested) {
1584
- const options = getPeriodOptions(listedYear, listedMonth);
1585
- if (options.length > 1) {
1586
- dispatchDriverInsuranceState({
1587
- type: StoreFormCarDriverInsuranceActionTypes.FormCarDriverInsuredDateSelect,
1588
- payload: { insuredDate: options[1].value },
1589
- });
1601
+ const prev = prevListedRef.current;
1602
+ const hasChanged = prev.year !== listedYear || prev.month !== listedMonth;
1603
+ prevListedRef.current = { year: listedYear, month: listedMonth };
1604
+ if (!insuredDate || hasChanged) {
1605
+ const options = getPeriodOptions(listedYear, listedMonth);
1606
+ if (options.length > 1) {
1607
+ dispatchDriverInsuranceState({
1608
+ type: StoreFormCarDriverInsuranceActionTypes.FormCarDriverInsuredDateSelect,
1609
+ payload: { insuredDate: options[1].value },
1610
+ });
1611
+ }
1590
1612
  }
1591
1613
  }
1592
1614
  }, [listedYear, listedMonth]);
1615
+ useEffect(() => {
1616
+ if (!listedYear || !listedMonth || isRequested)
1617
+ return;
1618
+ const hasChanged = prevFirstLicenceRef.current !== firstLicenceDateKey;
1619
+ prevFirstLicenceRef.current = firstLicenceDateKey;
1620
+ if (!hasChanged)
1621
+ return;
1622
+ const options = getPeriodOptions(listedYear, listedMonth);
1623
+ if (options.length > 1) {
1624
+ dispatchDriverInsuranceState({
1625
+ type: StoreFormCarDriverInsuranceActionTypes.FormCarDriverInsuredDateSelect,
1626
+ payload: { insuredDate: options[1].value },
1627
+ });
1628
+ }
1629
+ }, [firstLicenceDateKey]);
1593
1630
  useEffect(() => {
1594
1631
  if (listedYear && listedMonth && listed) {
1595
1632
  const listedDate = addDaysToDate(`${listedYear}-${listedMonth}-01`, birthDay ? +birthDay + 1 : 1);
@@ -1630,6 +1667,10 @@ you had insurance. If this is correct, please continue with the form.`);
1630
1667
  type: StoreFormCarDriverInsuranceActionTypes.FormCarDriverInsuredSelect,
1631
1668
  payload: { insured: !value },
1632
1669
  });
1670
+ dispatchDriverInsuranceState({
1671
+ type: StoreFormCarDriverInsuranceActionTypes.FormCarDriverNotCurrentlyInsuredSelect,
1672
+ payload: { notCurrentlyInsured: value },
1673
+ });
1633
1674
  };
1634
1675
  const handleLastPolicyEndDateChange = (dateType) => ({ value }) => {
1635
1676
  if (dateType === DateTypes.Month) {
@@ -1677,6 +1718,14 @@ you had insurance. If this is correct, please continue with the form.`);
1677
1718
  });
1678
1719
  }
1679
1720
  };
1721
+ const firstInsuredMinDate = listedYear && listedMonth
1722
+ ? addDaysToDate(`${listedYear}-${listedMonth}-01`, birthDay ? +birthDay + 1 : 1)
1723
+ : getMinDate(birthDate, firstLicenceAge);
1724
+ const twentyYearsAgo = getMinDateByYears(getFormattedDate('', 'yyyy-MM-dd'), 20);
1725
+ let lastPolicyEndMinDate = twentyYearsAgo;
1726
+ if (firstInsuredMinDate && compareDates(firstInsuredMinDate, twentyYearsAgo) > 0) {
1727
+ lastPolicyEndMinDate = firstInsuredMinDate;
1728
+ }
1680
1729
  const handlePolicyStartDateChange = (dateType) => ({ value }) => {
1681
1730
  if (dateType === DateTypes.Day) {
1682
1731
  dispatchDiscountState({
@@ -1699,7 +1748,7 @@ you had insurance. If this is correct, please continue with the form.`);
1699
1748
  };
1700
1749
  return (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsxs("div", { className: "box-container", children: [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
1701
1750
  ? getDateErrorMessage(['01', listedMonth, listedYear], driverState.inValidation)
1702
- : '', error: driverState.inValidation, hintMessage: hintMessage, minDate: getMinDate(birthDate, firstLicenceAge) }), jsx(CheckboxForm, { name: "listed", label: "Never listed on an insurance policy", onChange: handleListedChange, defaultValue: !listed })] }), listed && (jsxs("div", { className: "box-container", children: [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 }), jsx(CheckboxForm, { name: "insured", label: "Not currently insured", onChange: handleInsuredChange, defaultValue: !insured })] })), listed && !insured && (jsxs(Fragment, { children: [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: getFormattedDate('', 'yyyy-MM-dd') }), lastPolicyEndYear && lastPolicyEndMonth && (jsx(SelectFormBox, { options: 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 && !isMyChoiceLike(appType) && (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: addDaysToDate('', 1), maxDate: addDaysToDate('', 60), isDay: true }))] }));
1751
+ : '', error: driverState.inValidation, hintMessage: hintMessage, minDate: getMinDate(birthDate, firstLicenceAge) }), jsx(CheckboxForm, { name: "listed", label: "Never listed on an insurance policy", onChange: handleListedChange, defaultValue: !listed })] }), listed && (jsxs("div", { className: "box-container", children: [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 }), jsx(CheckboxForm, { name: "insured", label: "Not currently insured", onChange: handleInsuredChange, defaultValue: !insured })] })), listed && !insured && (jsxs(Fragment, { children: [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: getFormattedDate('', 'yyyy-MM-dd'), minDate: lastPolicyEndMinDate }), lastPolicyEndYear && lastPolicyEndMonth && (jsx(SelectFormBox, { options: 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 && !isMyChoiceLike(appType) && (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: addDaysToDate('', 1), maxDate: addDaysToDate('', 60), isDay: true }))] }));
1703
1752
  };
1704
1753
 
1705
1754
  const SectionDriverCancellation = () => {
@@ -1988,16 +2037,17 @@ const BlockDriverAccident = () => {
1988
2037
  };
1989
2038
 
1990
2039
  /**
1991
- * Filter out G1/G2 options from "Serious" section for trafficTicketsGroupOptions
2040
+ * Filter out G1/G2 options (ALC, RB) from the "Criminal" section for trafficTicketsGroupOptions
1992
2041
  */
1993
2042
  const getTrafficTicketsGroupOptionsWithoutG1G2 = () => {
1994
2043
  const excludeOptions = ['ALC', 'RB'];
1995
- const seriousOptions = trafficTicketsGroupOptions.find((entry) => entry.label === 'Serious');
1996
- const filteredSeriousOptions = seriousOptions.options.filter((option) => !excludeOptions.includes(option.value));
1997
- return trafficTicketsGroupOptions.map((option) => {
1998
- if (option.label === 'Serious')
1999
- return { ...option, options: filteredSeriousOptions };
2000
- return option;
2044
+ return trafficTicketsGroupOptions.map((group) => {
2045
+ if (group.label !== 'Criminal')
2046
+ return group;
2047
+ return {
2048
+ ...group,
2049
+ options: group.options.filter((option) => !excludeOptions.includes(option.value)),
2050
+ };
2001
2051
  });
2002
2052
  };
2003
2053
 
@@ -2010,23 +2060,25 @@ const BlockDriverTicket = () => {
2010
2060
  const isTheBig = appType === AppTypes.TheBig;
2011
2061
  const { firstName, minMaxDates, } = driverState.items[driverState.activeIndex];
2012
2062
  const { gOneMin } = minMaxDates;
2063
+ // Each speeding tier is tagged with the picklist section it belongs to.
2064
+ // The tier itself determines the Fortus <Speed> and <Severity>, so no speed is asked of the user.
2013
2065
  const getSpeedingOptions = () => {
2014
2066
  if (isNovaScotiaProvince) {
2015
2067
  return [
2016
- { value: 'SP', name: 'Speeding 1 to 30 kph over limit' },
2017
- { value: 'SP', name: 'Speeding 31 to 50 kph over limit' },
2018
- { value: 'SP', name: 'Speeding 51 kph or more over limit' },
2068
+ { value: 'SP_NS_MINOR', name: 'Speeding 1 to 30 kph over limit', section: 'Minor' },
2069
+ { value: 'SP_NS_MAJOR', name: 'Speeding 31 to 50 kph over limit', section: 'Major' },
2070
+ { value: 'SP_NS_CRIMINAL', name: 'Speeding 51 kph or more over limit', section: 'Criminal' },
2019
2071
  ];
2020
2072
  }
2021
2073
  if (isAlbertaProvince || isNewfoundlandProvince) {
2022
2074
  return [
2023
- { value: 'SP', name: 'Speeding 1 to 50 kph over limit' },
2024
- { value: 'SP', name: 'Speeding 51 kph or more over limit' },
2075
+ { value: 'SP_MINOR', name: 'Speeding 1 to 50 kph over limit', section: 'Minor' },
2076
+ { value: 'SP_51_CRIMINAL', name: 'Speeding 51 kph or more over limit', section: 'Criminal' },
2025
2077
  ];
2026
2078
  }
2027
2079
  return [
2028
- { value: 'SP', name: 'Speeding 1 to 49 kph over limit' },
2029
- { value: 'SP', name: 'Speeding 50 kph or more over limit' },
2080
+ { value: 'SP_MINOR', name: 'Speeding 1 to 49 kph over limit', section: 'Minor' },
2081
+ { value: 'SP_50_CRIMINAL', name: 'Speeding 50 kph or more over limit', section: 'Criminal' },
2030
2082
  ];
2031
2083
  };
2032
2084
  const getTrafficTicketsGroupOptions = () => {
@@ -2034,15 +2086,17 @@ const BlockDriverTicket = () => {
2034
2086
  ? getTrafficTicketsGroupOptionsWithoutG1G2()
2035
2087
  : trafficTicketsGroupOptions;
2036
2088
  const speedingOptions = getSpeedingOptions();
2037
- return base.map((group) => ({
2038
- ...group,
2039
- options: group.options.flatMap((opt) => {
2040
- if (opt.value === 'SP' && opt.name === 'Speeding') {
2041
- return speedingOptions;
2042
- }
2043
- return [opt];
2044
- }),
2045
- }));
2089
+ const toOption = ({ value, name }) => ({ value, name });
2090
+ return base.map((group) => {
2091
+ // Drop the generic "Speeding" entry; tiers are injected per section below.
2092
+ const options = group.options.filter((opt) => !(opt.value === 'SP' && opt.name === 'Speeding'));
2093
+ // Each tier appears in the Common section and in its matching severity section.
2094
+ const tiersForGroup = speedingOptions.filter((tier) => group.label === 'Common' || group.label === tier.section);
2095
+ return {
2096
+ ...group,
2097
+ options: [...options, ...tiersForGroup.map(toOption)],
2098
+ };
2099
+ });
2046
2100
  };
2047
2101
  const handleTicketChange = ({ value }) => {
2048
2102
  dispatchDriverTicketState({
@@ -2076,15 +2130,6 @@ const BlockDriverTicket = () => {
2076
2130
  },
2077
2131
  });
2078
2132
  };
2079
- const handleSpeedChange = (index) => ({ value }) => {
2080
- dispatchDriverTicketState({
2081
- type: StoreFormCarDriverTicketActionTypes.FormCarDriverTrafficTicketSpeedSelect,
2082
- payload: {
2083
- speed: Number(value),
2084
- index,
2085
- },
2086
- });
2087
- };
2088
2133
  const handleTicketDateChange = (index) => (dateType) => ({ value }) => {
2089
2134
  if (dateType === DateTypes.Month) {
2090
2135
  dispatchDriverTicketState({
@@ -2105,13 +2150,13 @@ const BlockDriverTicket = () => {
2105
2150
  });
2106
2151
  }
2107
2152
  };
2108
- return (jsxs("div", { className: "form-block-container", children: [jsx("h2", { className: isTheBig ? 'thebig-bold' : '', children: "Traffic Tickets" }), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleTicketChange, name: "ticket", defaultValue: getSelectedOption(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 && (jsxs(Fragment, { children: [ticketList?.map(({ ticketReason, ticketYear, ticketMonth, speed, }, index) => {
2153
+ return (jsxs("div", { className: "form-block-container", children: [jsx("h2", { className: isTheBig ? 'thebig-bold' : '', children: "Traffic Tickets" }), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleTicketChange, name: "ticket", defaultValue: getSelectedOption(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 && (jsxs(Fragment, { children: [ticketList?.map(({ ticketReason, ticketYear, ticketMonth, }, index) => {
2109
2154
  const defaultTicketDate = {
2110
2155
  year: ticketYear,
2111
2156
  month: ticketMonth,
2112
2157
  day: '01',
2113
2158
  };
2114
- return (jsxs("div", { className: "list-block", children: [jsx("hr", {}), jsxs("div", { className: "list-item", children: [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' && (jsx(InputFormBox, { name: `ticketSpeed-${index}`, onChange: handleSpeedChange(index), defaultValue: speed !== undefined ? speed : '', title: "How fast were you going (km/h)?", type: InputTypes.Number, error: !speed && driverState.inValidation, errorMessage: getErrorMessage(speed, driverState.inValidation) })), 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: getMinDateByYears(gOneMin, 3) })] })] }, `ticket-${index}`));
2159
+ return (jsxs("div", { className: "list-block", children: [jsx("hr", {}), jsxs("div", { className: "list-item", children: [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) }), 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: getMinDateByYears(gOneMin, 3) })] })] }, `ticket-${index}`));
2115
2160
  }), ticketList?.length < 3 && (jsx(ButtonBase, { className: "list-item-add", category: CategoryTypes.Filled, onClick: handleAddButtonClick, size: SizeTypes.Medium, color: ColorTypes.Primary, label: "Add another" }))] }))] }));
2116
2161
  };
2117
2162
 
@@ -2210,8 +2255,9 @@ const SectionDiscountInfo$1 = () => {
2210
2255
  const mychoiceCls = isMyChoiceLike(appType) ? 'mychoice' : '';
2211
2256
  const { discountState, dispatchDiscountState } = useStoreFormCarDiscount();
2212
2257
  const { validateEmail, errorMessage } = useHandlerCarQuoterEmail();
2258
+ const { validatePhone, errorMessage: phoneErrorMessage } = useHandlerCarQuoterPhone();
2213
2259
  const { multiplePoliciesDiscount, appInstallDiscount, caaMemberDiscount, quoterInfo, emailTo: { email, emailStatus }, } = discountState;
2214
- const { firstName, lastName, phone, driverLicense = '', caslConsent } = quoterInfo;
2260
+ const { firstName, lastName, phone, phoneStatus, driverLicense = '', caslConsent } = quoterInfo;
2215
2261
  const handleMultiplePolicyChange = ({ value }) => {
2216
2262
  dispatchDiscountState({
2217
2263
  type: StoreFormCarDiscountActionTypes.FormCarDiscountMultiplePoliciesSelect,
@@ -2249,10 +2295,16 @@ const SectionDiscountInfo$1 = () => {
2249
2295
  });
2250
2296
  };
2251
2297
  const handlePhoneNumberChange = ({ value }) => {
2252
- dispatchDiscountState({
2253
- type: StoreFormCarDiscountActionTypes.FormCarDiscountQuoterPhoneSet,
2254
- payload: { phone: value },
2255
- });
2298
+ const digits = value.replace(/\D/g, '');
2299
+ if (digits.length === 10) {
2300
+ validatePhone(value);
2301
+ }
2302
+ else {
2303
+ dispatchDiscountState({
2304
+ type: StoreFormCarDiscountActionTypes.FormCarDiscountQuoterPhoneStatusSet,
2305
+ payload: { phone: value, phoneStatus: ValidationStatusTypes.Initial },
2306
+ });
2307
+ }
2256
2308
  };
2257
2309
  const handleEmailChange = ({ value }) => {
2258
2310
  validateEmail(value);
@@ -2263,7 +2315,11 @@ const SectionDiscountInfo$1 = () => {
2263
2315
  payload: { caslConsent: value },
2264
2316
  });
2265
2317
  };
2266
- return (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [isTheBig ? (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!" })) : (jsxs(Fragment, { children: [jsx("h2", { className: "section-title", children: "A little extra info for discounts and connecting you with our partners." }), 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!" })] })), jsx(BlockVehLinks, {}), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleMultiplePolicyChange, name: "multiplePoliciesDiscount", defaultValue: getSelectedOption(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 && (jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleCaaMemberChange, name: "caaMemberDiscount", defaultValue: getSelectedOption(yesNoOptions, caaMemberDiscount), title: "Please indicate if you are a member of CAA, you could save up to an additional 20%." })), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleAppInstallChange, name: "appInstallDiscount", defaultValue: getSelectedOption(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 ? (jsxs("div", { className: "input-form-box-container", children: [jsx(LabelFormBox, { title: "Complete this form to see all your personalized\n quotes on the next page, you will also be able to:" }), jsxs("ol", { className: "ordered-block", children: [jsx("li", { children: "See what rates insurance carriers are offering" }), jsx("li", { children: "Get in touch with us and secure your rate" }), jsx("li", { children: "Potentially save more by speaking with a broker" })] })] })) : (jsx("h2", { children: "Complete the form below to see which companies are offering your quotes." })), jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Your First Name", error: !firstName && discountState.inValidation, errorMessage: getErrorMessage(firstName, discountState.inValidation) }), 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 && (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." })), jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(855) 325-8444", error: !phone && discountState.inValidation, errorMessage: getErrorMessage(phone, discountState.inValidation) }), jsx(InputFormEmailBox, { validationStatus: emailStatus, errorMessage: emailStatus === ValidationStatusTypes.Declined
2318
+ return (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [isTheBig ? (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!" })) : (jsxs(Fragment, { children: [jsx("h2", { className: "section-title", children: "A little extra info for discounts and connecting you with our partners." }), 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!" })] })), jsx(BlockVehLinks, {}), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleMultiplePolicyChange, name: "multiplePoliciesDiscount", defaultValue: getSelectedOption(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 && (jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleCaaMemberChange, name: "caaMemberDiscount", defaultValue: getSelectedOption(yesNoOptions, caaMemberDiscount), title: "Please indicate if you are a member of CAA, you could save up to an additional 20%." })), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleAppInstallChange, name: "appInstallDiscount", defaultValue: getSelectedOption(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 ? (jsxs("div", { className: "input-form-box-container", children: [jsx(LabelFormBox, { title: "Complete this form to see all your personalized\n quotes on the next page, you will also be able to:" }), jsxs("ol", { className: "ordered-block", children: [jsx("li", { children: "See what rates insurance carriers are offering" }), jsx("li", { children: "Get in touch with us and secure your rate" }), jsx("li", { children: "Potentially save more by speaking with a broker" })] })] })) : (jsx("h2", { children: "Complete the form below to see which companies are offering your quotes." })), jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Your First Name", error: !firstName && discountState.inValidation, errorMessage: getErrorMessage(firstName, discountState.inValidation) }), 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 && (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." })), jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(855) 325-8444", validationStatus: phoneStatus, error: phoneStatus === ValidationStatusTypes.Declined
2319
+ || (phoneStatus === ValidationStatusTypes.Initial && discountState.inValidation)
2320
+ || (!phone && discountState.inValidation), errorMessage: phoneStatus === ValidationStatusTypes.Declined
2321
+ ? phoneErrorMessage
2322
+ : getErrorMessage(phone, discountState.inValidation) || (discountState.inValidation ? 'Enter a valid phone number.' : '') }), jsx(InputFormEmailBox, { validationStatus: emailStatus, errorMessage: emailStatus === ValidationStatusTypes.Declined
2267
2323
  ? errorMessage
2268
2324
  : getErrorMessage(email, discountState.inValidation), error: emailStatus === 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: getPlaceholderEmail(appType) }), isTheBig && (jsx(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 })), jsx(BlockSubmit$2, { className: isTheBig ? 'thebig-bold' : 'mychoice' }), jsx(BlockNextPageInfo$2, {})] }));
2269
2325
  };
@@ -3448,8 +3504,9 @@ const SectionDiscountInfo = () => {
3448
3504
  const { discountState, dispatchDiscountState } = useStoreFormHomeDiscount();
3449
3505
  // const { applicantState, dispatchApplicantInfoState } = useStoreFormHomeApplicantInfo();
3450
3506
  const { validateEmail, errorMessage } = useHandlerHomeQuoterEmail();
3507
+ const { validatePhone, errorMessage: phoneErrorMessage } = useHandlerHomeQuoterPhone();
3451
3508
  const { multiplePoliciesDiscount, emailTo: { email, emailStatus }, quoterInfo = {}, } = discountState;
3452
- const { firstName = '', lastName = '', phone = '', caslConsent } = quoterInfo;
3509
+ const { firstName = '', lastName = '', phone = '', phoneStatus, caslConsent } = quoterInfo;
3453
3510
  const handleMultiplePolicyChange = ({ value }) => {
3454
3511
  dispatchDiscountState({
3455
3512
  type: StoreFormHomeDiscountActionTypes.FormHomeDiscountMultiplePoliciesSelect,
@@ -3469,10 +3526,16 @@ const SectionDiscountInfo = () => {
3469
3526
  });
3470
3527
  };
3471
3528
  const handlePhoneNumberChange = ({ value }) => {
3472
- dispatchDiscountState({
3473
- type: StoreFormHomeDiscountActionTypes.FormHomeQuoterPhoneSet,
3474
- payload: { phone: value },
3475
- });
3529
+ const digits = value.replace(/\D/g, '');
3530
+ if (digits.length === 10) {
3531
+ validatePhone(value);
3532
+ }
3533
+ else {
3534
+ dispatchDiscountState({
3535
+ type: StoreFormHomeDiscountActionTypes.FormHomeQuoterPhoneStatusSet,
3536
+ payload: { phone: value, phoneStatus: ValidationStatusTypes.Initial },
3537
+ });
3538
+ }
3476
3539
  };
3477
3540
  const handleEmailChange = ({ value }) => {
3478
3541
  validateEmail(value);
@@ -3485,7 +3548,11 @@ const SectionDiscountInfo = () => {
3485
3548
  };
3486
3549
  return (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsx("h2", { className: "section-title", children: "A little extra info for discounts and connecting you with our partners." }), isTheBig ? (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!` })) : (jsx("span", { className: "info-title-message", children: `You are seconds away from receiving your ${insuranceType} insurance quotes,
3487
3550
  please provide your email after completing the discount section so we
3488
- can send you your personalized free ${insuranceType} insurance quotes!` })), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleMultiplePolicyChange, name: "multiplePoliciesDiscount", defaultValue: getSelectedOption(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." }), jsx(BlockDwellingInfo, {}), jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Your First Name", error: !firstName && discountState.inValidation, errorMessage: getErrorMessage(firstName, discountState.inValidation) }), jsx(InputFormBox, { name: "lastName", title: "Last Name", onChange: handleLastNameChange, defaultValue: lastName, placeholder: "Your Last Name", error: !lastName && discountState.inValidation, errorMessage: getErrorMessage(lastName, discountState.inValidation) }), jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(855) 325-8444", error: !phone && discountState.inValidation, errorMessage: getErrorMessage(phone, discountState.inValidation) }), 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: getPlaceholderEmail(appType), errorMessage: emailStatus === ValidationStatusTypes.Declined
3551
+ can send you your personalized free ${insuranceType} insurance quotes!` })), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleMultiplePolicyChange, name: "multiplePoliciesDiscount", defaultValue: getSelectedOption(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." }), jsx(BlockDwellingInfo, {}), jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Your First Name", error: !firstName && discountState.inValidation, errorMessage: getErrorMessage(firstName, discountState.inValidation) }), jsx(InputFormBox, { name: "lastName", title: "Last Name", onChange: handleLastNameChange, defaultValue: lastName, placeholder: "Your Last Name", error: !lastName && discountState.inValidation, errorMessage: getErrorMessage(lastName, discountState.inValidation) }), jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(855) 325-8444", validationStatus: phoneStatus, error: phoneStatus === ValidationStatusTypes.Declined
3552
+ || (phoneStatus === ValidationStatusTypes.Initial && discountState.inValidation)
3553
+ || (!phone && discountState.inValidation), errorMessage: phoneStatus === ValidationStatusTypes.Declined
3554
+ ? phoneErrorMessage
3555
+ : getErrorMessage(phone, discountState.inValidation) || (discountState.inValidation ? 'Enter a valid phone number.' : '') }), 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: getPlaceholderEmail(appType), errorMessage: emailStatus === ValidationStatusTypes.Declined
3489
3556
  ? errorMessage
3490
3557
  : getErrorMessage(email, discountState.inValidation), error: emailStatus === ValidationStatusTypes.Declined || (!email && discountState.inValidation) }), isTheBig && (jsx(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 })), jsx(BlockSubmit$1, { className: isTheBig ? 'thebig-bold' : 'mychoice' }), jsx(BlockNextPageInfo$1, {})] }));
3491
3558
  };
@@ -3807,8 +3874,9 @@ const SectionApplicant = () => {
3807
3874
  const isTheBig = appType === AppTypes.TheBig;
3808
3875
  const { applicantState, dispatchApplicantState } = useStoreFormLifeApplicant();
3809
3876
  const { validateEmail, errorMessage } = useHandlerLifeQuoterEmail();
3877
+ const { validatePhone, errorMessage: phoneErrorMessage } = useHandlerLifeQuoterPhone();
3810
3878
  const { birthYear, birthMonth, birthDay, gender, smoker, quoterInfo, emailTo: { email, emailStatus }, inValidation, } = applicantState;
3811
- const { firstName, lastName, phone } = quoterInfo || {};
3879
+ const { firstName, lastName, phone, phoneStatus } = quoterInfo || {};
3812
3880
  const defaultDateOfBirth = {
3813
3881
  day: birthDay,
3814
3882
  month: birthMonth,
@@ -3859,10 +3927,16 @@ const SectionApplicant = () => {
3859
3927
  });
3860
3928
  };
3861
3929
  const handlePhoneNumberChange = ({ value }) => {
3862
- dispatchApplicantState({
3863
- type: StoreFormLifeApplicantActionTypes.FormLifeQuoterPhoneSet,
3864
- payload: { phone: value },
3865
- });
3930
+ const digits = value.replace(/\D/g, '');
3931
+ if (digits.length === 10) {
3932
+ validatePhone(value);
3933
+ }
3934
+ else {
3935
+ dispatchApplicantState({
3936
+ type: StoreFormLifeApplicantActionTypes.FormLifeQuoterPhoneStatusSet,
3937
+ payload: { phone: value, phoneStatus: ValidationStatusTypes.Initial },
3938
+ });
3939
+ }
3866
3940
  };
3867
3941
  const handleEmailChange = ({ value }) => {
3868
3942
  validateEmail(value);
@@ -3882,7 +3956,11 @@ const SectionApplicant = () => {
3882
3956
  textAlign: 'center',
3883
3957
  fontSize: '1.15rem',
3884
3958
  marginTop: '10px',
3885
- }, children: `Canadians have compared rates in the last 24 hours and saved ${savedPercentage}% on average` })] }), jsx("h2", { className: "section-title", style: { textAlign: 'center' }, children: `${lockEmoji} Complete the form below to see which companies are offering your quotes.` }), 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!" }), 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: subYearsFromDate('', 14), isDay: true }), jsx(SelectFormBox, { options: genderOptions, name: "gender", onChange: handleGenderChange, defaultValue: getSelectedOption(genderOptions, gender), title: "Gender", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !gender && inValidation, errorMessage: getErrorMessage(`${gender}`.toString(), inValidation) }), jsx(SwitchButtonBox, { items: smokerOptions, onChange: handleSmokerChange, name: "smoker", defaultValue: getSelectedOption(smokerOptions, smoker), title: "Smoker" }), isTheBig && (jsxs("div", { className: "input-form-box-container", children: [jsx(LabelFormBox, { title: "Complete this form to see all your personalized\n quotes on the next page, you will also be able to:" }), jsxs("ol", { className: "ordered-block", children: [jsx("li", { children: "See what rates insurance carriers are offering" }), jsx("li", { children: "Get in touch with us and secure your rate" }), jsx("li", { children: "Potentially save more by speaking with a broker" })] })] })), jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Your First Name", error: !firstName && inValidation, errorMessage: getErrorMessage(firstName, inValidation) }), jsx(InputFormBox, { name: "lastname", title: "Last Name", onChange: handleLastNameChange, defaultValue: lastName, placeholder: "Your Last Name", error: !lastName && inValidation, errorMessage: getErrorMessage(lastName, inValidation) }), jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(855) 325-8444", error: !phone && inValidation, errorMessage: getErrorMessage(phone, inValidation) }), 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: getPlaceholderEmail(appType), errorMessage: emailStatus === ValidationStatusTypes.Declined
3959
+ }, children: `Canadians have compared rates in the last 24 hours and saved ${savedPercentage}% on average` })] }), jsx("h2", { className: "section-title", style: { textAlign: 'center' }, children: `${lockEmoji} Complete the form below to see which companies are offering your quotes.` }), 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!" }), 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: subYearsFromDate('', 14), isDay: true }), jsx(SelectFormBox, { options: genderOptions, name: "gender", onChange: handleGenderChange, defaultValue: getSelectedOption(genderOptions, gender), title: "Gender", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !gender && inValidation, errorMessage: getErrorMessage(`${gender}`.toString(), inValidation) }), jsx(SwitchButtonBox, { items: smokerOptions, onChange: handleSmokerChange, name: "smoker", defaultValue: getSelectedOption(smokerOptions, smoker), title: "Smoker" }), isTheBig && (jsxs("div", { className: "input-form-box-container", children: [jsx(LabelFormBox, { title: "Complete this form to see all your personalized\n quotes on the next page, you will also be able to:" }), jsxs("ol", { className: "ordered-block", children: [jsx("li", { children: "See what rates insurance carriers are offering" }), jsx("li", { children: "Get in touch with us and secure your rate" }), jsx("li", { children: "Potentially save more by speaking with a broker" })] })] })), jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Your First Name", error: !firstName && inValidation, errorMessage: getErrorMessage(firstName, inValidation) }), jsx(InputFormBox, { name: "lastname", title: "Last Name", onChange: handleLastNameChange, defaultValue: lastName, placeholder: "Your Last Name", error: !lastName && inValidation, errorMessage: getErrorMessage(lastName, inValidation) }), jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(855) 325-8444", validationStatus: phoneStatus, error: phoneStatus === ValidationStatusTypes.Declined
3960
+ || (phoneStatus === ValidationStatusTypes.Initial && inValidation)
3961
+ || (!phone && inValidation), errorMessage: phoneStatus === ValidationStatusTypes.Declined
3962
+ ? phoneErrorMessage
3963
+ : getErrorMessage(phone, inValidation) || (inValidation ? 'Enter a valid phone number.' : '') }), 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: getPlaceholderEmail(appType), errorMessage: emailStatus === ValidationStatusTypes.Declined
3886
3964
  ? errorMessage
3887
3965
  : getErrorMessage(email, inValidation), error: emailStatus === ValidationStatusTypes.Declined || (!email && inValidation) }), jsx(BlockSubmit, { className: isTheBig ? 'thebig-bold' : '' }), jsx(BlockNextPageInfo, {})] }));
3888
3966
  };