@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.
- package/dist/cjs/index.js +157 -79
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/insurances/car/pages/driver/helpers.d.ts +1 -1
- package/dist/cjs/shared/boxes/InputFormBox/InputFormPhoneBox.d.ts +2 -2
- package/dist/cjs/shared/boxes/InputFormBox/interface.d.ts +3 -0
- package/dist/esm/index.js +159 -81
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/insurances/car/pages/driver/helpers.d.ts +1 -1
- package/dist/esm/shared/boxes/InputFormBox/InputFormPhoneBox.d.ts +2 -2
- package/dist/esm/shared/boxes/InputFormBox/interface.d.ts +3 -0
- package/dist/index.d.ts +4 -1
- package/package.json +4 -4
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { SelectOptionGroupInterface } from '@mychoice/mychoice-sdk-components';
|
|
2
2
|
/**
|
|
3
|
-
* Filter out G1/G2 options from "
|
|
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 {
|
|
3
|
-
export declare const InputFormPhoneBox: SdkFC<
|
|
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,
|
|
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 <=
|
|
706
|
+
case ((kmEachDay >= 2) && (kmEachDay <= 5)):
|
|
705
707
|
return 10000;
|
|
706
|
-
case ((kmEachDay >=
|
|
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 =
|
|
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:
|
|
1483
|
-
const showDtcG1Only = firstClass === DriverLicenceTypes.G1
|
|
1484
|
-
|
|
1485
|
-
&&
|
|
1486
|
-
&&
|
|
1487
|
-
|
|
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) <=
|
|
1492
|
-
// Branch C G Full: within
|
|
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) <=
|
|
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
|
|
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 = '',
|
|
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
|
|
1585
|
-
|
|
1586
|
-
|
|
1587
|
-
|
|
1588
|
-
|
|
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 "
|
|
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
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
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: '
|
|
2017
|
-
{ value: '
|
|
2018
|
-
{ value: '
|
|
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: '
|
|
2024
|
-
{ value: '
|
|
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: '
|
|
2029
|
-
{ value: '
|
|
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
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
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,
|
|
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) }),
|
|
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
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
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",
|
|
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
|
-
|
|
3473
|
-
|
|
3474
|
-
|
|
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",
|
|
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
|
-
|
|
3863
|
-
|
|
3864
|
-
|
|
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",
|
|
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
|
};
|