@mychoice/mychoice-sdk-modules 2.2.23 → 2.2.24
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 +376 -111
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/insurances/car/pages/vehicle/sections/SectionPolicyDate.d.ts +2 -0
- package/dist/esm/index.js +377 -112
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/insurances/car/pages/vehicle/sections/SectionPolicyDate.d.ts +2 -0
- package/package.json +4 -4
- package/dist/cjs/insurances/car/pages/quote/sections/VehicleOfferCoverage.d.ts +0 -3
- package/dist/cjs/insurances/car/pages/quote/sections/blocks/VehicleOfferCoverage.d.ts +0 -9
- package/dist/esm/insurances/car/pages/quote/sections/VehicleOfferCoverage.d.ts +0 -3
- package/dist/esm/insurances/car/pages/quote/sections/blocks/VehicleOfferCoverage.d.ts +0 -9
package/dist/esm/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
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,
|
|
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
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';
|
|
5
5
|
import { useNavigate, useLocation, BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
|
|
6
6
|
import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
|
|
@@ -199,9 +199,11 @@ const capitalize = (text) => text.charAt(0).toUpperCase() + text.slice(1);
|
|
|
199
199
|
const BlockVehLinks = () => {
|
|
200
200
|
const { vehicleState: { items: vehicles } } = useStoreFormCarVehicle();
|
|
201
201
|
const { driverState: { items: drivers } } = useStoreFormCarDriverBase();
|
|
202
|
-
const { discountState: { vehlinks }, dispatchDiscountState } = useStoreFormCarDiscount();
|
|
203
|
-
|
|
204
|
-
|
|
202
|
+
const { discountState: { vehlinks, occVehlinks }, dispatchDiscountState } = useStoreFormCarDiscount();
|
|
203
|
+
if (drivers.length <= 1) {
|
|
204
|
+
return null;
|
|
205
|
+
}
|
|
206
|
+
const handlePrimaryDriverChange = (vehicleIndex) => ({ value }) => {
|
|
205
207
|
dispatchDiscountState({
|
|
206
208
|
type: StoreFormCarDiscountActionTypes.FormCarDiscountVehlinkSelect,
|
|
207
209
|
payload: {
|
|
@@ -210,14 +212,41 @@ const BlockVehLinks = () => {
|
|
|
210
212
|
},
|
|
211
213
|
});
|
|
212
214
|
};
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
215
|
+
const handleOccDriverChange = (driverIndex) => ({ value }) => {
|
|
216
|
+
dispatchDiscountState({
|
|
217
|
+
type: StoreFormCarDiscountActionTypes.FormCarDiscountOccVehlinkSelect,
|
|
218
|
+
payload: {
|
|
219
|
+
driverIndex,
|
|
220
|
+
vehicleIndex: value,
|
|
221
|
+
},
|
|
222
|
+
});
|
|
223
|
+
};
|
|
224
|
+
// Drivers that are NOT assigned as primary for any vehicle
|
|
225
|
+
const primaryDriverIndices = vehlinks
|
|
226
|
+
.filter((l) => l.priority === DriverPriorityTypes.Prn)
|
|
227
|
+
.map((l) => l.driverIndex);
|
|
228
|
+
const unassignedDrivers = drivers
|
|
229
|
+
.map((driver, index) => ({ driver, index }))
|
|
230
|
+
.filter(({ index }) => !primaryDriverIndices.includes(index));
|
|
231
|
+
return (jsxs(Fragment, { children: [jsx(LabelFormBox, { title: "Since there are multiple drivers in this quote, please tell us who drives which vehicle the most. Please provide an answer that most accurately describes your situation." }), vehicles.map((vehicle, vehicleIndex) => {
|
|
232
|
+
const { year, make, model } = vehicle;
|
|
233
|
+
const selectedPrimary = vehlinks.find((l) => l.vehicleIndex === vehicleIndex && l.priority === DriverPriorityTypes.Prn);
|
|
234
|
+
const allDriverOptions = drivers
|
|
235
|
+
.map((driver, driverIndex) => ({ name: driver.firstName, value: driverIndex }));
|
|
236
|
+
const filteredOptions = allDriverOptions.filter(({ value }) => {
|
|
237
|
+
const assignedVehicle = vehlinks.find((l) => l.driverIndex === value && l.priority === DriverPriorityTypes.Prn);
|
|
238
|
+
return !assignedVehicle || assignedVehicle.vehicleIndex === vehicleIndex;
|
|
239
|
+
});
|
|
240
|
+
const availablePrimaryOptions = filteredOptions.length > 0 ? filteredOptions : allDriverOptions;
|
|
241
|
+
return (jsx(SelectFormBox, { title: `Who drives the ${year} ${make} ${model} the most?`, onChange: handlePrimaryDriverChange(vehicleIndex), options: availablePrimaryOptions, defaultValue: selectedPrimary?.driverIndex ?? 0, name: `vehlink-${vehicleIndex}` }, `vehlink-${vehicleIndex}`));
|
|
242
|
+
}), drivers.length > vehicles.length && unassignedDrivers.map(({ driver, index: driverIndex }) => {
|
|
243
|
+
const selectedVehicle = occVehlinks.find((l) => l.driverIndex === driverIndex);
|
|
244
|
+
const vehicleOptions = vehicles.map((vehicle, vehicleIndex) => ({
|
|
245
|
+
name: `${vehicle.year} ${vehicle.make} ${vehicle.model}`,
|
|
246
|
+
value: vehicleIndex,
|
|
247
|
+
}));
|
|
248
|
+
return (jsx(SelectFormBox, { title: `Which vehicle does ${driver.firstName} drive the most?`, onChange: handleOccDriverChange(driverIndex), options: vehicleOptions, defaultValue: selectedVehicle?.vehicleIndex ?? 0, name: `occ-vehlink-${driverIndex}` }, `occ-vehlink-${driverIndex}`));
|
|
249
|
+
})] }));
|
|
221
250
|
};
|
|
222
251
|
|
|
223
252
|
const BlockNextPageInfo$2 = () => {
|
|
@@ -783,9 +812,9 @@ const BlockCarConditionInfo = () => {
|
|
|
783
812
|
});
|
|
784
813
|
}
|
|
785
814
|
};
|
|
786
|
-
const { year, condition, leased, winterTires, parkingLocation, primaryUse, distanceDaily, distanceBusiness, distanceYearly, purchaseYear, purchaseMonth, purchaseDay, } = vehicleState.items[vehicleState.activeIndex];
|
|
815
|
+
const { year, condition, leased, winterTires, parkingLocation, primaryUse, distanceDaily, distanceBusiness, distanceYearly, businessUsePercent, purchaseYear, purchaseMonth, purchaseDay, } = vehicleState.items[vehicleState.activeIndex];
|
|
787
816
|
// eslint-disable-next-line max-len
|
|
788
|
-
const primaryUseHintMessage = primaryUse === 'business' ? 'Please choose "Business"
|
|
817
|
+
const primaryUseHintMessage = primaryUse === 'business' ? 'Please choose "Business" if your vehicle is used for any work purposes (sales representatives, realtors, consultants, etc.). If you only drive back and forth to work, please choose "Personal" and select your commute distance.' : '';
|
|
789
818
|
const defaultPurchaseDate = {
|
|
790
819
|
day: purchaseDay,
|
|
791
820
|
month: purchaseMonth,
|
|
@@ -846,33 +875,32 @@ const BlockCarConditionInfo = () => {
|
|
|
846
875
|
type: StoreFormCarVehicleActionTypes.FormCarDailyDistanceSelect,
|
|
847
876
|
payload: { distanceDaily: value },
|
|
848
877
|
});
|
|
878
|
+
const yearlyDefault = Number(value) === 0
|
|
879
|
+
? '5000'
|
|
880
|
+
: `${getRecommendedRange(value, primaryUse === VehiclePrimaryUseTypes.Business ? distanceBusiness : 1)}`;
|
|
849
881
|
dispatchVehicleState({
|
|
850
882
|
type: StoreFormCarVehicleActionTypes.FormCarYearlyDistanceSelect,
|
|
851
|
-
payload: { distanceYearly:
|
|
883
|
+
payload: { distanceYearly: yearlyDefault },
|
|
852
884
|
});
|
|
853
885
|
};
|
|
854
|
-
const
|
|
855
|
-
dispatchVehicleState({
|
|
856
|
-
type: StoreFormCarVehicleActionTypes.FormCarBusinessDistanceSelect,
|
|
857
|
-
payload: { distanceBusiness: value },
|
|
858
|
-
});
|
|
886
|
+
const handleCarYearlyDistanceChange = ({ value }) => {
|
|
859
887
|
dispatchVehicleState({
|
|
860
888
|
type: StoreFormCarVehicleActionTypes.FormCarYearlyDistanceSelect,
|
|
861
|
-
payload: { distanceYearly:
|
|
889
|
+
payload: { distanceYearly: value },
|
|
862
890
|
});
|
|
863
891
|
};
|
|
864
|
-
const
|
|
892
|
+
const handleBusinessUsePercentChange = ({ value }) => {
|
|
865
893
|
dispatchVehicleState({
|
|
866
|
-
type: StoreFormCarVehicleActionTypes.
|
|
867
|
-
payload: {
|
|
894
|
+
type: StoreFormCarVehicleActionTypes.FormCarBusinessUsePercentSelect,
|
|
895
|
+
payload: { businessUsePercent: value },
|
|
868
896
|
});
|
|
869
897
|
};
|
|
870
898
|
return (jsxs(Fragment, { children: [jsx(SwitchButtonBox, { items: carCondition, onChange: handleConditionChange, name: "condition", defaultValue: getSelectedOption(carCondition, condition), description: "Used cars are usually cheaper to insure than new ones because of the depreciation. The cost to replace this vehicle is typically less expensive and insurers will account for the condition of the car when giving you a rate.", title: "Was this car new or used when you bought it?" }), jsx(SwitchButtonBox, { items: carStatus, onChange: handleLeasedChange, name: "leased", defaultValue: getSelectedOption(carStatus, leased), description: "You can own or lease a car. Ownership means that you bought the vehicle or are currently financing it. Leasing is renting it under a long-term contract. In this case, the leasing company maintains ownership of the vehicle, which you will see clearly on your insurance policy.", title: "Is this car owned/financed or leased?" }), jsx(DateSelectFormBox, { name: "purchaseDate", dateNames: ['purchaseYear', 'purchaseMonth'], onDateChange: handlePurchaseDateChange, defaultValue: defaultPurchaseDate, title: "When did you buy this car?", description: "Car insurers in Ontario ask for your vehicle purchase date because it is a key factor that can affect its value, depreciation, and condition, which can impact the likelihood and cost of repairs or replacement. This information helps insurers assess the level of risk and calculate an appropriate premium.", errorMessage: getDateErrorMessage([
|
|
871
899
|
purchaseDay || '',
|
|
872
900
|
purchaseMonth || '',
|
|
873
901
|
purchaseYear || '',
|
|
874
|
-
], 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
|
|
875
|
-
${numberWithCommas(getRecommendedRange(distanceDaily, primaryUse === VehiclePrimaryUseTypes.Business ? distanceBusiness : 1))} for your yearly driven kilometers` : '', autoSelectIfValueIsOutOfOptions: false, error: !distanceYearly && vehicleState.inValidation, errorMessage: getErrorMessage(distanceYearly, 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 }))] }));
|
|
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
|
|
903
|
+
${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 }))] }));
|
|
876
904
|
};
|
|
877
905
|
|
|
878
906
|
const VehicleSectionMain = () => {
|
|
@@ -1201,96 +1229,174 @@ const SectionDriverInfo = () => {
|
|
|
1201
1229
|
return (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [mychoiceCls && jsx("h2", { className: "section-title", children: "Time for a micro autobiography \u2013 tell us about you." }), jsx(InputFormBox, { name: "firstName", title: "What is your legal first name?", onChange: handleFirstNameChange, defaultValue: firstName, description: "The name on a policy should match the one on your official driver\u2019s licence.", placeholder: "Driver First Name", error: !firstName && driverState.inValidation, errorMessage: getErrorMessage(firstName, driverState.inValidation) }), jsx(SelectFormBox, { options: maritalStatusOptions, name: "maritalStatus", onChange: handleMaritalStatusChange, defaultValue: getSelectedOption(maritalStatusOptions, maritalStatus), title: "What is your marital status?", placeholder: "Select from the list", description: "If you are married, it may have a positive effect on your car insurance premiums and coverage. In some provinces, the law now considers same-sex partners to have a common-law marriage, so you will need to check your local regulations. If you are divorced or widowed, select single.", autoSelectIfValueIsOutOfOptions: false, error: !maritalStatus && driverState.inValidation, errorMessage: getErrorMessage(maritalStatus, driverState.inValidation) }), jsx(DateSelectFormBox, { name: "dateOfBirth", dateNames: ['birthYear', 'birthMonth', 'birthDay'], onDateChange: handleDateOfBirthChange, defaultValue: defaultDateOfBirth, title: "When were you born?", description: "Insurers generally consider your age and driving experience when calculating a vehicle insurance quote. The safest drivers are often those who are over thirty, but each insurer will have their own parameters. The youngest and oldest drivers have the greatest liability reflected in their premiums due to inexperience or health complications, respectively.", errorMessage: getDateErrorMessage([birthDay || '', birthMonth || '', birthYear || ''], driverState.inValidation), error: driverState.inValidation, maxDate: subYearsFromDate('', configState.licenceConfig.minLicenceAge || 16), isDay: true }), jsx(SwitchButtonBox, { name: "occupation", items: occupationOptions, onChange: handleOccupationChange, defaultValue: getSelectedOption(occupationOptions, occupation), title: "Are you currently employed or unemployed?", description: "Your employment status reflects your driving frequency, and insurers consider this in your policy." }), jsx(SwitchButtonBox, { items: genderOptions, onChange: handleGenderChange, name: "gender", defaultValue: getSelectedOption(genderOptions, gender), title: "What is your gender?", description: "The gender on the policy should match your official driver\u2019s licence. Some insurers analyze a driver's sex when creating a policy. Men are typically considered higher risk than female drivers, but the statistics supporting this idea vary from province to province. On average, men and women pay roughly the same for insurance, though." }), driverState.activeIndex > 0 && (jsx(SelectFormBox, { options: applicantRelationshipOptions, name: "applicantRelationship", onChange: handleApplicantRelationshipChange, defaultValue: getSelectedOption(applicantRelationshipOptions, applicantRelationship), title: "Relationship to applicant", placeholder: "Select...", autoSelectIfValueIsOutOfOptions: false, error: !applicantRelationship && driverState.inValidation, errorMessage: getErrorMessage(applicantRelationship, driverState.inValidation) }))] }));
|
|
1202
1230
|
};
|
|
1203
1231
|
|
|
1232
|
+
// Max months between consecutive Ontario GDL licence classes (spec 1-2 e/f)
|
|
1233
|
+
const ON_MAX_MONTHS_BETWEEN_CLASSES = 60;
|
|
1204
1234
|
const SectionDriverLicence = () => {
|
|
1205
1235
|
const { appConfigState: { appType }, } = useStoreAppConfig();
|
|
1206
1236
|
const [driverEducation, setDriverEducation] = useState(false);
|
|
1207
1237
|
const { configState } = useStoreFormCarConfig();
|
|
1208
1238
|
const { driverState, dispatchDriverLicenceState } = useStoreFormCarDriverLicence();
|
|
1209
|
-
const { isAlbertaProvince } = useProvince();
|
|
1239
|
+
const { isAlbertaProvince, isOntarioProvince } = useProvince();
|
|
1210
1240
|
const mychoiceCls = isMyChoiceLike(appType) ? 'mychoice' : '';
|
|
1211
|
-
const
|
|
1241
|
+
const isTheBig = appType === AppTypes.TheBig;
|
|
1242
|
+
// Ontario flow applies only for MyChoice-like (WL/MC) quoters, not TheBig
|
|
1243
|
+
const useOntarioFlow = isOntarioProvince && !isTheBig;
|
|
1244
|
+
const { firstName, birthDay, birthMonth, birthYear, licenceInfo: { firstLicenceAge, licenceType, g1LicenceYear, g1LicenceMonth, gLicenceYear, gLicenceMonth, g2LicenceYear, g2LicenceMonth, passedDriverTraining, previousLicence, receivedG2, receivedG, }, minMaxDates, } = driverState.items[driverState.activeIndex];
|
|
1212
1245
|
const { gMax = getFormattedDate('', 'yyyy-MM-dd'), gMin = '1922-01-01', gOneMax = getFormattedDate('', 'yyyy-MM-dd'), gOneMin = '1922-01-01', gTwoMax = getFormattedDate('', 'yyyy-MM-dd'), gTwoMin = '1922-01-01', gBlock = false, gTwoBlock = false, gOneBlock = false, licenceAgeMax = 16, } = minMaxDates ?? {};
|
|
1213
1246
|
const maxLicenceAge = licenceAgeMax;
|
|
1214
1247
|
const driverNameDefault = `Driver ${driverState.activeIndex + 1}`;
|
|
1215
1248
|
const birthDate = birthYear && birthMonth && birthDay ? `${birthYear}-${birthMonth}-${birthDay}` : '';
|
|
1216
1249
|
const defaultMinDate = birthDate && firstLicenceAge ? addYearsToDate(birthDate, +firstLicenceAge) : '';
|
|
1217
|
-
const
|
|
1218
|
-
|
|
1250
|
+
const getOntarioQ1YearMonth = () => {
|
|
1251
|
+
if (licenceType === DriverLicenceTypes.G2)
|
|
1252
|
+
return { year: g2LicenceYear, month: g2LicenceMonth };
|
|
1253
|
+
if (licenceType === DriverLicenceTypes.G)
|
|
1254
|
+
return { year: gLicenceYear, month: gLicenceMonth };
|
|
1255
|
+
return { year: g1LicenceYear, month: g1LicenceMonth };
|
|
1256
|
+
};
|
|
1257
|
+
const { year: ontarioQ1Year, month: ontarioQ1Month } = getOntarioQ1YearMonth();
|
|
1258
|
+
const ontarioQ1Date = ontarioQ1Year && ontarioQ1Month ? `${ontarioQ1Year}-${ontarioQ1Month}-01` : '';
|
|
1259
|
+
const isOnlyG = useOntarioFlow
|
|
1260
|
+
? (!!ontarioQ1Date && checkDateIsSpecial(ontarioQ1Date, configState.minDates.g.specialDate))
|
|
1261
|
+
: checkDateIsSpecial(defaultMinDate, configState.minDates.g.specialDate);
|
|
1262
|
+
const driverName = firstName || driverNameDefault;
|
|
1263
|
+
const today = getFormattedDate('', 'yyyy-MM-dd');
|
|
1219
1264
|
const { g, g1, g2, minLicenceAge } = configState.licenceConfig;
|
|
1220
1265
|
const licenceTypeOptions = [
|
|
1221
1266
|
{ value: g.name, name: g.title },
|
|
1222
1267
|
{ value: g1.name, name: g1.title },
|
|
1223
1268
|
{ value: g2.name, name: g2.title },
|
|
1224
1269
|
];
|
|
1270
|
+
// Ontario class dropdown options
|
|
1271
|
+
const ontarioFirstClassOptions = [
|
|
1272
|
+
{ value: DriverLicenceTypes.G1, name: 'G1 Beginner' },
|
|
1273
|
+
{ value: DriverLicenceTypes.G2, name: 'G2 Intermediate' },
|
|
1274
|
+
{ value: DriverLicenceTypes.G, name: 'G Full or equivalent' },
|
|
1275
|
+
];
|
|
1276
|
+
// Ontario "before 1994" — only G available, shown as disabled single option
|
|
1277
|
+
const ontarioOnlyGOptions = [
|
|
1278
|
+
{ value: DriverLicenceTypes.G, name: 'G Full or equivalent' },
|
|
1279
|
+
];
|
|
1280
|
+
// Legacy non-Ontario education effect
|
|
1225
1281
|
useEffect(() => {
|
|
1226
|
-
if (!
|
|
1227
|
-
if (
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1282
|
+
if (!useOntarioFlow) {
|
|
1283
|
+
if (!gOneBlock && !gTwoBlock) {
|
|
1284
|
+
if (licenceType !== DriverLicenceTypes.G1) {
|
|
1285
|
+
const g2Date = addDayToDate(`${g2LicenceYear}-${g2LicenceMonth}`, birthDay ? +birthDay + 1 : 1);
|
|
1286
|
+
if (getDifferenceInYears('', g2Date) <= 3) {
|
|
1287
|
+
setDriverEducation(true);
|
|
1288
|
+
}
|
|
1289
|
+
else {
|
|
1290
|
+
setDriverEducation(false);
|
|
1291
|
+
}
|
|
1231
1292
|
}
|
|
1232
1293
|
else {
|
|
1233
1294
|
setDriverEducation(false);
|
|
1234
1295
|
}
|
|
1235
1296
|
}
|
|
1236
|
-
else {
|
|
1237
|
-
setDriverEducation(false);
|
|
1238
|
-
}
|
|
1239
1297
|
}
|
|
1240
|
-
}, [g2LicenceYear, g2LicenceMonth, licenceType]);
|
|
1298
|
+
}, [g2LicenceYear, g2LicenceMonth, licenceType, useOntarioFlow]);
|
|
1299
|
+
// If the user picks their birth month in their 16th year and birthDay > 1,
|
|
1300
|
+
// selecting that month would imply a date before their actual birthday (since dates are assumed
|
|
1301
|
+
// as the 1st). Auto-advance the Q1 month to birthMonth + 1.
|
|
1302
|
+
useEffect(() => {
|
|
1303
|
+
if (!useOntarioFlow || !birthDate || !ontarioQ1Year || !ontarioQ1Month)
|
|
1304
|
+
return;
|
|
1305
|
+
const birthDayNum = parseInt(birthDay || '1', 10);
|
|
1306
|
+
if (birthDayNum <= 1)
|
|
1307
|
+
return;
|
|
1308
|
+
const birthYearNum = parseInt(birthYear || '0', 10);
|
|
1309
|
+
if (parseInt(ontarioQ1Year, 10) !== birthYearNum + 16 || ontarioQ1Month !== birthMonth)
|
|
1310
|
+
return;
|
|
1311
|
+
const q1SlotForCorrection = licenceType || DriverLicenceTypes.G1;
|
|
1312
|
+
let correctedMonth = parseInt(birthMonth || '1', 10) + 1;
|
|
1313
|
+
let correctedYear = birthYearNum + 16;
|
|
1314
|
+
if (correctedMonth > 12) {
|
|
1315
|
+
correctedMonth = 1;
|
|
1316
|
+
correctedYear += 1;
|
|
1317
|
+
}
|
|
1318
|
+
dispatchDriverLicenceState({
|
|
1319
|
+
type: StoreFormCarDriverLicenceActionTypes.FormCarDriverLicenceMonthSelect,
|
|
1320
|
+
payload: { value: String(correctedMonth).padStart(2, '0'), config: configState, type: q1SlotForCorrection },
|
|
1321
|
+
});
|
|
1322
|
+
if (correctedYear !== birthYearNum + 16) {
|
|
1323
|
+
dispatchDriverLicenceState({
|
|
1324
|
+
type: StoreFormCarDriverLicenceActionTypes.FormCarDriverLicenceYearSelect,
|
|
1325
|
+
payload: { value: String(correctedYear), config: configState, type: q1SlotForCorrection },
|
|
1326
|
+
});
|
|
1327
|
+
}
|
|
1328
|
+
}, [ontarioQ1Year, ontarioQ1Month]);
|
|
1329
|
+
// ── helpers ────────────────────────────────────────────────
|
|
1241
1330
|
const getMinDate = (type) => {
|
|
1242
1331
|
switch (type) {
|
|
1243
|
-
case DriverLicenceTypes.G:
|
|
1244
|
-
|
|
1245
|
-
case DriverLicenceTypes.
|
|
1246
|
-
|
|
1247
|
-
case DriverLicenceTypes.G2:
|
|
1248
|
-
return gTwoMin;
|
|
1249
|
-
default:
|
|
1250
|
-
return '';
|
|
1332
|
+
case DriverLicenceTypes.G: return gMin;
|
|
1333
|
+
case DriverLicenceTypes.G1: return gOneMin;
|
|
1334
|
+
case DriverLicenceTypes.G2: return gTwoMin;
|
|
1335
|
+
default: return '';
|
|
1251
1336
|
}
|
|
1252
1337
|
};
|
|
1253
1338
|
const getMaxDate = (type) => {
|
|
1254
1339
|
switch (type) {
|
|
1255
|
-
case DriverLicenceTypes.G:
|
|
1256
|
-
|
|
1257
|
-
case DriverLicenceTypes.
|
|
1258
|
-
|
|
1259
|
-
case DriverLicenceTypes.G2:
|
|
1260
|
-
return gTwoMax;
|
|
1261
|
-
default:
|
|
1262
|
-
return '';
|
|
1340
|
+
case DriverLicenceTypes.G: return gMax;
|
|
1341
|
+
case DriverLicenceTypes.G1: return gOneMax;
|
|
1342
|
+
case DriverLicenceTypes.G2: return gTwoMax;
|
|
1343
|
+
default: return '';
|
|
1263
1344
|
}
|
|
1264
1345
|
};
|
|
1265
1346
|
const getLicenceYear = (type) => {
|
|
1266
1347
|
switch (type) {
|
|
1267
|
-
case DriverLicenceTypes.G:
|
|
1268
|
-
|
|
1269
|
-
case DriverLicenceTypes.
|
|
1270
|
-
|
|
1271
|
-
case DriverLicenceTypes.G2:
|
|
1272
|
-
return g2LicenceYear;
|
|
1273
|
-
default:
|
|
1274
|
-
return '';
|
|
1348
|
+
case DriverLicenceTypes.G: return gLicenceYear;
|
|
1349
|
+
case DriverLicenceTypes.G1: return g1LicenceYear;
|
|
1350
|
+
case DriverLicenceTypes.G2: return g2LicenceYear;
|
|
1351
|
+
default: return '';
|
|
1275
1352
|
}
|
|
1276
1353
|
};
|
|
1277
1354
|
const getLicenceMonth = (type) => {
|
|
1278
1355
|
switch (type) {
|
|
1279
|
-
case DriverLicenceTypes.G:
|
|
1280
|
-
|
|
1281
|
-
case DriverLicenceTypes.
|
|
1282
|
-
|
|
1283
|
-
case DriverLicenceTypes.G2:
|
|
1284
|
-
return g2LicenceMonth;
|
|
1285
|
-
default:
|
|
1286
|
-
return '';
|
|
1356
|
+
case DriverLicenceTypes.G: return gLicenceMonth;
|
|
1357
|
+
case DriverLicenceTypes.G1: return g1LicenceMonth;
|
|
1358
|
+
case DriverLicenceTypes.G2: return g2LicenceMonth;
|
|
1359
|
+
default: return '';
|
|
1287
1360
|
}
|
|
1288
1361
|
};
|
|
1289
1362
|
const getDefaultLicenceDate = (type) => ({
|
|
1290
1363
|
year: getLicenceYear(type),
|
|
1291
1364
|
month: getLicenceMonth(type),
|
|
1292
|
-
day:
|
|
1365
|
+
day: '01',
|
|
1293
1366
|
});
|
|
1367
|
+
// Build a YYYY-MM-01 string from stored year/month, returns '' if either missing
|
|
1368
|
+
const toDate = (year, month) => (year && month ? `${year}-${month}-01` : '');
|
|
1369
|
+
const validateLicenceDate = (year, month, minDate) => {
|
|
1370
|
+
const dateStr = toDate(year, month);
|
|
1371
|
+
if (!dateStr)
|
|
1372
|
+
return '';
|
|
1373
|
+
if (compareDates(dateStr, today) > 0)
|
|
1374
|
+
return 'License dates cannot be in the future';
|
|
1375
|
+
if (minDate && compareDates(dateStr, minDate) < 0) {
|
|
1376
|
+
return 'This license date must be equal or later than the prior license date. Please check your selection';
|
|
1377
|
+
}
|
|
1378
|
+
return '';
|
|
1379
|
+
};
|
|
1380
|
+
const validate60Months = (earlierYear, earlierMonth, laterYear, laterMonth) => {
|
|
1381
|
+
const earlier = toDate(earlierYear, earlierMonth);
|
|
1382
|
+
const later = toDate(laterYear, laterMonth);
|
|
1383
|
+
if (!earlier || !later)
|
|
1384
|
+
return '';
|
|
1385
|
+
const months = getDifferenceInMonths(later, earlier);
|
|
1386
|
+
if (months > ON_MAX_MONTHS_BETWEEN_CLASSES) {
|
|
1387
|
+
return "Ontario's graduated license program must be completed within 5 years. Please check your selection";
|
|
1388
|
+
}
|
|
1389
|
+
return '';
|
|
1390
|
+
};
|
|
1391
|
+
// In the Ontario flow, firstLicenceAge is never entered, so gOneMin is stale/empty.
|
|
1392
|
+
// Compute min from DOB + 16, capped to today so minDate never exceeds maxDate.
|
|
1393
|
+
const getG1MinDate = () => {
|
|
1394
|
+
if (useOntarioFlow && birthDate) {
|
|
1395
|
+
const computed = addYearsToDate(birthDate, 16);
|
|
1396
|
+
return compareDates(computed, today) > 0 ? today : computed;
|
|
1397
|
+
}
|
|
1398
|
+
return gOneMin;
|
|
1399
|
+
};
|
|
1294
1400
|
const handleLicenceAgeChange = ({ value }) => {
|
|
1295
1401
|
dispatchDriverLicenceState({
|
|
1296
1402
|
type: StoreFormCarDriverLicenceActionTypes.FormCarDriverLicenceAgeSelect,
|
|
@@ -1315,6 +1421,18 @@ const SectionDriverLicence = () => {
|
|
|
1315
1421
|
payload: { previousLicence: value },
|
|
1316
1422
|
});
|
|
1317
1423
|
};
|
|
1424
|
+
const handleReceivedG2Change = ({ value }) => {
|
|
1425
|
+
dispatchDriverLicenceState({
|
|
1426
|
+
type: StoreFormCarDriverLicenceActionTypes.FormCarDriverReceivedG2Select,
|
|
1427
|
+
payload: { receivedG2: value },
|
|
1428
|
+
});
|
|
1429
|
+
};
|
|
1430
|
+
const handleReceivedGChange = ({ value }) => {
|
|
1431
|
+
dispatchDriverLicenceState({
|
|
1432
|
+
type: StoreFormCarDriverLicenceActionTypes.FormCarDriverReceivedGSelect,
|
|
1433
|
+
payload: { receivedG: value },
|
|
1434
|
+
});
|
|
1435
|
+
};
|
|
1318
1436
|
const handleLicenceDateChange = (type) => (dateType) => ({ value }) => {
|
|
1319
1437
|
if (dateType === DateTypes.Month) {
|
|
1320
1438
|
dispatchDriverLicenceState({
|
|
@@ -1334,23 +1452,87 @@ const SectionDriverLicence = () => {
|
|
|
1334
1452
|
const licenceMinDate = getMinDate(currentType);
|
|
1335
1453
|
const licenceTypeTitle = configState.licenceConfig[currentType].title;
|
|
1336
1454
|
const formattedMinDate = `${getFormattedDate(licenceMinDate, 'MMMM yyyy')}`;
|
|
1337
|
-
const defaultHintMessage = `${formattedMinDate} would be your earliest ${licenceTypeTitle}
|
|
1338
|
-
licence date based on your first licenced age and date of birth`;
|
|
1455
|
+
const defaultHintMessage = `${formattedMinDate} would be your earliest ${licenceTypeTitle} licence date based on your first licenced age and date of birth`;
|
|
1339
1456
|
return currentType === DriverLicenceTypes.G2
|
|
1340
|
-
? `${defaultHintMessage}
|
|
1341
|
-
if you completed a driver education course`
|
|
1457
|
+
? `${defaultHintMessage} if you completed a driver education course`
|
|
1342
1458
|
: defaultHintMessage;
|
|
1343
1459
|
};
|
|
1344
1460
|
const getLicenceAgeTitle = () => {
|
|
1345
|
-
if (isAlbertaProvince && isTheBig)
|
|
1461
|
+
if (isAlbertaProvince && isTheBig)
|
|
1346
1462
|
return 'At what age was Class 5 GDL or Class 5 obtained?';
|
|
1347
|
-
}
|
|
1348
|
-
|
|
1349
|
-
|
|
1463
|
+
return `What age was ${driverName} when first licenced?`;
|
|
1464
|
+
};
|
|
1465
|
+
if (useOntarioFlow) {
|
|
1466
|
+
// When isOnlyG (before Apr 1994), treat as G Full regardless of what licenceType is in the store
|
|
1467
|
+
const firstClass = isOnlyG ? DriverLicenceTypes.G : licenceType;
|
|
1468
|
+
// Q1 date lives in whichever slot the store wrote to (always ${licenceType}LicenceYear/Month).
|
|
1469
|
+
const q1SlotType = licenceType || DriverLicenceTypes.G1;
|
|
1470
|
+
const q1Year = getLicenceYear(q1SlotType);
|
|
1471
|
+
const q1Month = getLicenceMonth(q1SlotType);
|
|
1472
|
+
const q1Date = toDate(q1Year, q1Month);
|
|
1473
|
+
// ── path booleans ──
|
|
1474
|
+
const showG2Date = firstClass === DriverLicenceTypes.G1 && receivedG2 === true;
|
|
1475
|
+
// G question shows after G2 date entered (G1→G2 path) OR after No-G2 answer (G1→No G2 path)
|
|
1476
|
+
const showGQuestionAfterG1 = firstClass === DriverLicenceTypes.G1
|
|
1477
|
+
&& (receivedG2 === false || showG2Date);
|
|
1478
|
+
const showGDateAfterG1 = showGQuestionAfterG1 && receivedG === true;
|
|
1479
|
+
const showGDateAfterG2 = firstClass === DriverLicenceTypes.G2 && receivedG === true;
|
|
1480
|
+
const g2Date = toDate(g2LicenceYear, g2LicenceMonth);
|
|
1481
|
+
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)
|
|
1489
|
+
const showDtcG2Only = firstClass === DriverLicenceTypes.G2
|
|
1490
|
+
&& !!q1Date
|
|
1491
|
+
&& getDifferenceInYears('', q1Date) <= 3;
|
|
1492
|
+
// Branch C G Full: within 3 years of Q1 (G date)
|
|
1493
|
+
const showDtcGFull = firstClass === DriverLicenceTypes.G
|
|
1494
|
+
&& !!q1Date
|
|
1495
|
+
&& getDifferenceInYears('', q1Date) <= 3;
|
|
1496
|
+
// ── Validation error messages ──
|
|
1497
|
+
const q1MinDate = getG1MinDate();
|
|
1498
|
+
const q1ChronoError = driverState.inValidation
|
|
1499
|
+
? validateLicenceDate(q1Year, q1Month, q1MinDate)
|
|
1500
|
+
: '';
|
|
1501
|
+
const q1FutureError = q1Date && compareDates(q1Date, today) > 0
|
|
1502
|
+
? 'License dates cannot be in the future' : '';
|
|
1503
|
+
const q1Error = q1FutureError || q1ChronoError || getDateErrorMessage(['01', q1Month, q1Year], driverState.inValidation);
|
|
1504
|
+
const g2ChronoError = driverState.inValidation
|
|
1505
|
+
? validateLicenceDate(g2LicenceYear, g2LicenceMonth, q1Date)
|
|
1506
|
+
: '';
|
|
1507
|
+
const g260MonthError = validate60Months(q1Year, q1Month, g2LicenceYear, g2LicenceMonth);
|
|
1508
|
+
const g2FutureError = g2Date && compareDates(g2Date, today) > 0 ? 'License dates cannot be in the future' : '';
|
|
1509
|
+
const g2Error = g2FutureError || g260MonthError || g2ChronoError || getDateErrorMessage(['01', g2LicenceMonth, g2LicenceYear], driverState.inValidation);
|
|
1510
|
+
// G preceding date: G2 date if on G1→G2→G path, else Q1 date
|
|
1511
|
+
const gPrecedingDate = showGDateAfterG1 && showG2Date ? g2Date : q1Date;
|
|
1512
|
+
const gChronoError = driverState.inValidation
|
|
1513
|
+
? validateLicenceDate(gLicenceYear, gLicenceMonth, gPrecedingDate)
|
|
1514
|
+
: '';
|
|
1515
|
+
const g60MonthError = validate60Months(q1Year, q1Month, gLicenceYear, gLicenceMonth);
|
|
1516
|
+
const gFutureError = gDate && compareDates(gDate, today) > 0 ? 'License dates cannot be in the future' : '';
|
|
1517
|
+
const gError = gFutureError || g60MonthError || gChronoError || getDateErrorMessage(['01', gLicenceMonth, gLicenceYear], driverState.inValidation);
|
|
1518
|
+
// ── Min dates (always capped to today so minDate never exceeds maxDate) ──
|
|
1519
|
+
const g2MinRaw = q1Date && compareDates(q1Date, gTwoMin) > 0 ? q1Date : gTwoMin;
|
|
1520
|
+
const g2MinDate = compareDates(g2MinRaw, today) > 0 ? today : g2MinRaw;
|
|
1521
|
+
const gMinRaw = gPrecedingDate && compareDates(gPrecedingDate, gMin) > 0 ? gPrecedingDate : gMin;
|
|
1522
|
+
const gMinDate = compareDates(gMinRaw, today) > 0 ? today : gMinRaw;
|
|
1523
|
+
const getMax60Date = (refDate) => {
|
|
1524
|
+
if (!refDate)
|
|
1525
|
+
return today;
|
|
1526
|
+
const max60 = addMonthsToDate(refDate, ON_MAX_MONTHS_BETWEEN_CLASSES);
|
|
1527
|
+
return compareDates(today, max60) > 0 ? max60 : today;
|
|
1528
|
+
};
|
|
1529
|
+
const g2MaxDate = getMax60Date(q1Date);
|
|
1530
|
+
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)." })] }));
|
|
1532
|
+
}
|
|
1350
1533
|
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
|
|
1351
|
-
? `${
|
|
1352
|
-
|
|
1353
|
-
: '', placeholder: "Select Licence Age", disabled: !birthDate, error: !firstLicenceAge && driverState.inValidation, errorMessage: getErrorMessage(firstLicenceAge, driverState.inValidation), minValue: minLicenceAge || 16, maxValue: maxLicenceAge }), jsx(SelectFormBox, { options: getLicenceTypeOptions(licenceTypeOptions, getDisabledLicenceTypes(gBlock, gTwoBlock, gOneBlock), true), name: "licenceType", onChange: handleLicenceTypeChange, defaultValue: getSelectedOption(licenceTypeOptions, licenceType), title: `Please choose the type of licence that ${firstName || driverNameDefault} currently holds`, placeholder: "Select from the list", disabled: !birthDate, description: configState.toolTip.licenceType, autoSelectIfValueIsOutOfOptions: false }), licenceType === DriverLicenceTypes.G && !isOnlyG && (jsx(DateSelectFormBox, { name: "g2LicenceDate", dateNames: ['g2LicenceYear', 'g2LicenceMonth'], onDateChange: handleLicenceDateChange(DriverLicenceTypes.G2), defaultValue: getDefaultLicenceDate(DriverLicenceTypes.G2), title: `${configState.licenceConfig.g2.title} licence date`, errorMessage: getDateErrorMessage(['01', g2LicenceMonth, g2LicenceYear], driverState.inValidation), hintMessage: getHintMessage(DriverLicenceTypes.G2), error: driverState.inValidation, minDate: getMinDate(DriverLicenceTypes.G2), maxDate: getMaxDate(DriverLicenceTypes.G2) })), licenceType && (jsx(DateSelectFormBox, { name: `${licenceType}LicenceDate`, dateNames: [`${licenceType}LicenceYear`, `${licenceType}LicenceMonth`], onDateChange: handleLicenceDateChange(), defaultValue: getDefaultLicenceDate(licenceType), title: `${configState.licenceConfig[licenceType].title} licence date`, errorMessage: getDateErrorMessage(['01', getLicenceMonth(licenceType), getLicenceYear(licenceType)], driverState.inValidation), hintMessage: getHintMessage(), error: driverState.inValidation, maxDate: getMaxDate(licenceType), minDate: getMinDate(licenceType) })), driverEducation && (jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(yesNoOptions, passedDriverTraining), title: `Has ${firstName || driverNameDefault} completed a driver education course within the last 3 years?` })), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handlePreviousLicenceChange, name: "previousLicence", defaultValue: getSelectedOption(yesNoOptions, previousLicence), title: `Has ${firstName || driverNameDefault} 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\u2019s licence)." })] }));
|
|
1534
|
+
? `${driverName} was licenced in ${Number(birthYear) + Number(firstLicenceAge)} - ${Number(birthYear) + Number(firstLicenceAge) + 1}`
|
|
1535
|
+
: '', placeholder: "Select Licence Age", disabled: !birthDate, error: !firstLicenceAge && driverState.inValidation, errorMessage: getErrorMessage(firstLicenceAge, driverState.inValidation), minValue: minLicenceAge || 16, maxValue: maxLicenceAge }), jsx(SelectFormBox, { options: getLicenceTypeOptions(licenceTypeOptions, getDisabledLicenceTypes(gBlock, gTwoBlock, gOneBlock), true), name: "licenceType", onChange: handleLicenceTypeChange, defaultValue: getSelectedOption(licenceTypeOptions, licenceType), title: `Please choose the type of licence that ${driverName} currently holds`, placeholder: "Select from the list", disabled: !birthDate, description: configState.toolTip.licenceType, autoSelectIfValueIsOutOfOptions: false }), licenceType === DriverLicenceTypes.G && !isOnlyG && (jsx(DateSelectFormBox, { name: "g2LicenceDate", dateNames: ['g2LicenceYear', 'g2LicenceMonth'], onDateChange: handleLicenceDateChange(DriverLicenceTypes.G2), defaultValue: getDefaultLicenceDate(DriverLicenceTypes.G2), title: `${configState.licenceConfig.g2.title} licence date`, errorMessage: getDateErrorMessage(['01', g2LicenceMonth, g2LicenceYear], driverState.inValidation), hintMessage: getHintMessage(DriverLicenceTypes.G2), error: driverState.inValidation, minDate: getMinDate(DriverLicenceTypes.G2), maxDate: getMaxDate(DriverLicenceTypes.G2) })), licenceType && (jsx(DateSelectFormBox, { name: `${licenceType}LicenceDate`, dateNames: [`${licenceType}LicenceYear`, `${licenceType}LicenceMonth`], onDateChange: handleLicenceDateChange(), defaultValue: getDefaultLicenceDate(licenceType), title: `${configState.licenceConfig[licenceType].title} licence date`, errorMessage: getDateErrorMessage(['01', getLicenceMonth(licenceType), getLicenceYear(licenceType)], driverState.inValidation), hintMessage: getHintMessage(), error: driverState.inValidation, maxDate: getMaxDate(licenceType), minDate: getMinDate(licenceType) })), driverEducation && (jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a driver education course within the last 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)." })] }));
|
|
1354
1536
|
};
|
|
1355
1537
|
|
|
1356
1538
|
const SectionDriverInsurancePolicy = () => {
|
|
@@ -1359,7 +1541,7 @@ const SectionDriverInsurancePolicy = () => {
|
|
|
1359
1541
|
const { driverState, dispatchDriverInsuranceState } = useStoreFormCarDriverInsurance();
|
|
1360
1542
|
const { discountState, dispatchDiscountState } = useStoreFormCarDiscount();
|
|
1361
1543
|
const { quoteState: { isRequested }, } = useStoreFormCarQuote();
|
|
1362
|
-
const { listed, listedMonth = '', listedYear = '', insured, insuredDate = '', firstName, birthYear, birthMonth, birthDay, licenceInfo: { firstLicenceAge, licenceType, gLicenceYear, gLicenceMonth, g1LicenceYear, g1LicenceMonth }, } = driverState.items[driverState.activeIndex];
|
|
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];
|
|
1363
1545
|
const { policyStartYear, policyStartMonth, policyStartDay } = discountState;
|
|
1364
1546
|
const driverNameDefault = `Driver ${driverState.activeIndex + 1}`;
|
|
1365
1547
|
const birthDate = birthYear && birthMonth && birthDay ? `${birthYear}-${birthMonth}-${birthDay}` : '';
|
|
@@ -1370,20 +1552,20 @@ const SectionDriverInsurancePolicy = () => {
|
|
|
1370
1552
|
const options = [{ value: '', name: 'Date Period', disabled: true }];
|
|
1371
1553
|
if (year && month) {
|
|
1372
1554
|
const todayDate = new Date();
|
|
1373
|
-
const
|
|
1374
|
-
const
|
|
1375
|
-
const yearsInPast = todayDate.getFullYear() - parseInt(year);
|
|
1376
|
-
|
|
1377
|
-
|
|
1555
|
+
const effectiveMonth = policyStartMonth || String(todayDate.getMonth() + 1).padStart(2, '0');
|
|
1556
|
+
const effectiveDay = policyStartDay || String(todayDate.getDate()).padStart(2, '0');
|
|
1557
|
+
const yearsInPast = Math.min(todayDate.getFullYear() - parseInt(year, 10), 10);
|
|
1558
|
+
options.push({
|
|
1559
|
+
value: subMonthsFromDate('', 6),
|
|
1560
|
+
name: 'Less than 1 year',
|
|
1561
|
+
});
|
|
1562
|
+
for (let i = 1; i <= yearsInPast; i += 1) {
|
|
1563
|
+
const pastDate = `${todayDate.getFullYear() - i}-${effectiveMonth}-${effectiveDay}`;
|
|
1378
1564
|
options.push({
|
|
1379
1565
|
value: pastDate,
|
|
1380
|
-
name: `${i} ${i === 1 ? 'Year' : 'Years'}`,
|
|
1566
|
+
name: i === 10 ? '10+ Years' : `${i} ${i === 1 ? 'Year' : 'Years'}`,
|
|
1381
1567
|
});
|
|
1382
1568
|
}
|
|
1383
|
-
options.push({
|
|
1384
|
-
value: `${todayDate.getFullYear() - 1}-${month}-${day}`,
|
|
1385
|
-
name: 'Less than 1 Year',
|
|
1386
|
-
});
|
|
1387
1569
|
}
|
|
1388
1570
|
return options;
|
|
1389
1571
|
};
|
|
@@ -1449,6 +1631,26 @@ you had insurance. If this is correct, please continue with the form.`);
|
|
|
1449
1631
|
payload: { insured: !value },
|
|
1450
1632
|
});
|
|
1451
1633
|
};
|
|
1634
|
+
const handleLastPolicyEndDateChange = (dateType) => ({ value }) => {
|
|
1635
|
+
if (dateType === DateTypes.Month) {
|
|
1636
|
+
dispatchDriverInsuranceState({
|
|
1637
|
+
type: StoreFormCarDriverInsuranceActionTypes.FormCarDriverLastPolicyEndMonthSelect,
|
|
1638
|
+
payload: { lastPolicyEndMonth: value },
|
|
1639
|
+
});
|
|
1640
|
+
}
|
|
1641
|
+
if (dateType === DateTypes.Year) {
|
|
1642
|
+
dispatchDriverInsuranceState({
|
|
1643
|
+
type: StoreFormCarDriverInsuranceActionTypes.FormCarDriverLastPolicyEndYearSelect,
|
|
1644
|
+
payload: { lastPolicyEndYear: value },
|
|
1645
|
+
});
|
|
1646
|
+
}
|
|
1647
|
+
};
|
|
1648
|
+
const handleLastPolicyCancelReasonChange = ({ value }) => {
|
|
1649
|
+
dispatchDriverInsuranceState({
|
|
1650
|
+
type: StoreFormCarDriverInsuranceActionTypes.FormCarDriverLastPolicyCancelReasonSelect,
|
|
1651
|
+
payload: { lastPolicyCancelReason: value },
|
|
1652
|
+
});
|
|
1653
|
+
};
|
|
1452
1654
|
const handleListedChange = ({ value }) => {
|
|
1453
1655
|
dispatchDriverInsuranceState({
|
|
1454
1656
|
type: StoreFormCarDriverInsuranceActionTypes.FormCarDriverListedSelect,
|
|
@@ -1495,20 +1697,26 @@ you had insurance. If this is correct, please continue with the form.`);
|
|
|
1495
1697
|
});
|
|
1496
1698
|
}
|
|
1497
1699
|
};
|
|
1498
|
-
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 year the
|
|
1700
|
+
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
|
|
1499
1701
|
? getDateErrorMessage(['01', listedMonth, listedYear], driverState.inValidation)
|
|
1500
|
-
: '', 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 })] })), !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 }))] }));
|
|
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 }))] }));
|
|
1501
1703
|
};
|
|
1502
1704
|
|
|
1503
1705
|
const SectionDriverCancellation = () => {
|
|
1504
1706
|
const { driverState, dispatchDriverCancellationState } = useStoreFormCarDriverCancellation();
|
|
1505
1707
|
const { dispatchDriverBaseState } = useStoreFormCarDriverBase();
|
|
1708
|
+
const { discountState } = useStoreFormCarDiscount();
|
|
1506
1709
|
const { insuranceCancellation, insuranceCancellationList = [] } = driverState.items[driverState.activeIndex];
|
|
1507
1710
|
const { appConfigState: { appType }, } = useStoreAppConfig();
|
|
1508
1711
|
const isTheBig = appType === AppTypes.TheBig;
|
|
1509
1712
|
const mychoiceCls = isMyChoiceLike(appType) ? 'mychoice' : '';
|
|
1510
|
-
const { firstName, birthYear, birthMonth, birthDay, licenceInfo: { firstLicenceAge }, } = driverState.items[driverState.activeIndex];
|
|
1713
|
+
const { firstName, birthYear, birthMonth, birthDay, listedYear, listedMonth, licenceInfo: { firstLicenceAge }, } = driverState.items[driverState.activeIndex];
|
|
1511
1714
|
const birthDate = birthYear && birthMonth && birthDay ? `${birthYear}-${birthMonth}-${birthDay}` : '';
|
|
1715
|
+
const policyStart = discountState.policyStart || getFormattedDate('', 'yyyy-MM-dd');
|
|
1716
|
+
const firstInsuredDate = listedYear && listedMonth ? `${listedYear}-${listedMonth}-01` : '';
|
|
1717
|
+
const rawYearsSinceFirstInsured = firstInsuredDate ? getDifferenceInYears(policyStart, firstInsuredDate) : 0;
|
|
1718
|
+
const cancellationYearCap = Math.min(rawYearsSinceFirstInsured, 10);
|
|
1719
|
+
const cancellationYearLabel = cancellationYearCap <= 1 ? 'past year' : `past ${cancellationYearCap} years`;
|
|
1512
1720
|
const handleIconClick = (index) => () => {
|
|
1513
1721
|
dispatchDriverCancellationState({
|
|
1514
1722
|
type: StoreFormCarDriverCancellationActionTypes.FormCarDriverInsuranceCancellationDelete,
|
|
@@ -1581,8 +1789,7 @@ const SectionDriverCancellation = () => {
|
|
|
1581
1789
|
});
|
|
1582
1790
|
}
|
|
1583
1791
|
};
|
|
1584
|
-
return (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsx("h2", { className: isTheBig ? 'thebig-bold' : '', children: "Insurance Cancellation" }), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleCancellationChange, name: "insuranceCancellation", defaultValue: getSelectedOption(yesNoOptions, insuranceCancellation), title: `Has ${firstName} had an insurance company cancellation or
|
|
1585
|
-
a time without insurance coverage, within the past 3 years?`, description: "If an insurance company cancels your policy, it will increase your future insurance premiums. The most common reasons for cancellations include missed payments, excessive claims, false declarations, or criminal actions, for example. If you cancel the insurance policy, it is not relevant." }), insuranceCancellation && (jsxs(Fragment, { children: [insuranceCancellationList?.map(({ cancellationReason, startYear, startMonth, endYear, endMonth }, index) => {
|
|
1792
|
+
return (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsx("h2", { className: isTheBig ? 'thebig-bold' : '', children: "Insurance Cancellation" }), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleCancellationChange, name: "insuranceCancellation", defaultValue: getSelectedOption(yesNoOptions, insuranceCancellation), title: `Has ${firstName} had an insurance company cancellation or a time without insurance coverage, within the ${cancellationYearLabel}?`, description: "If an insurance company cancels your policy, it will increase your future insurance premiums. The most common reasons for cancellations include missed payments, excessive claims, false declarations, or criminal actions, for example. If you cancel the insurance policy, it is not relevant." }), insuranceCancellation && (jsxs(Fragment, { children: [insuranceCancellationList?.map(({ cancellationReason, startYear, startMonth, endYear, endMonth }, index) => {
|
|
1586
1793
|
const defaultStartDate = {
|
|
1587
1794
|
year: startYear,
|
|
1588
1795
|
month: startMonth,
|
|
@@ -1594,7 +1801,7 @@ const SectionDriverCancellation = () => {
|
|
|
1594
1801
|
const now = getFormattedDate('', 'yyyy-MM-dd');
|
|
1595
1802
|
const days = birthDay ? +birthDay + 1 : 1;
|
|
1596
1803
|
const endDate = endYear && endMonth ? addDayToDate(`${endYear}-${endMonth}`, days) : now;
|
|
1597
|
-
const currentMinDate = getMinDateByYears(getMinDate(birthDate, firstLicenceAge),
|
|
1804
|
+
const currentMinDate = getMinDateByYears(getMinDate(birthDate, firstLicenceAge), cancellationYearCap + 1);
|
|
1598
1805
|
const currentEndDate = compareDates(endDate, currentMinDate) < 0 ? currentMinDate : endDate;
|
|
1599
1806
|
return (jsxs("div", { className: "list-block", children: [jsx("hr", {}), jsxs("div", { className: "list-item", children: [jsx(SelectFormBox, { options: insuranceCancellationReasonOptions, name: `cancellationReason-${index}`, onChange: handleReasonChange(index), defaultValue: cancellationReason, title: "Reason", placeholder: "Select from the list", isRemovable: insuranceCancellationList.length > 1, onIconClick: handleIconClick(index), autoSelectIfValueIsOutOfOptions: false, error: !cancellationReason && driverState.inValidation, errorMessage: getErrorMessage(cancellationReason, driverState.inValidation) }), jsx(DateSelectFormBox, { name: `startDate-${index}`, dateNames: [`startYear-${index}`, `startMonth-${index}`], onDateChange: handleStartDateChange(index), defaultValue: defaultStartDate, title: "Start date", errorMessage: getDateErrorMessage(['01', startMonth, startYear], driverState.inValidation), error: driverState.inValidation, minDate: currentMinDate, maxDate: currentEndDate }), jsx(DateSelectFormBox, { name: `endDate-${index}`, dateNames: [`endYear-${index}`, `endMonth-${index}`], onDateChange: handleEndDateChange(index), defaultValue: defaultEndDate, title: "End Date", errorMessage: getDateErrorMessage(['01', endMonth, endYear], driverState.inValidation), error: driverState.inValidation, minDate: startMonth && startYear ? addDayToDate(`${startYear}-${startMonth}`, days) : currentMinDate })] })] }, `insurance-cancellation-${index}`));
|
|
1600
1807
|
}), insuranceCancellationList?.length < 3 && (jsx(ButtonBase, { category: CategoryTypes.Filled, onClick: handleAddButtonClick, size: SizeTypes.Medium, color: ColorTypes.Primary, label: "Add another" }))] }))] }));
|
|
@@ -1604,10 +1811,15 @@ const BlockDriverSuspension = () => {
|
|
|
1604
1811
|
const { driverState, dispatchDriverSuspensionState } = useStoreFormCarDriverSuspension();
|
|
1605
1812
|
const { licenceSuspension, licenceSuspensionList = [] } = driverState.items[driverState.activeIndex];
|
|
1606
1813
|
const { dispatchDriverBaseState } = useStoreFormCarDriverBase();
|
|
1814
|
+
const { discountState } = useStoreFormCarDiscount();
|
|
1607
1815
|
const { appConfigState: { appType } } = useStoreAppConfig();
|
|
1608
1816
|
const isTheBig = appType === AppTypes.TheBig;
|
|
1609
1817
|
const { firstName, birthYear, birthMonth, birthDay, licenceInfo: { firstLicenceAge }, } = driverState.items[driverState.activeIndex];
|
|
1610
1818
|
const birthDate = birthYear && birthMonth && birthDay ? `${birthYear}-${birthMonth}-${birthDay}` : '';
|
|
1819
|
+
const earliestLicenceDate = birthDate && firstLicenceAge ? addYearsToDate(birthDate, +firstLicenceAge) : '';
|
|
1820
|
+
const policyStart = discountState.policyStart || getFormattedDate('', 'yyyy-MM-dd');
|
|
1821
|
+
const yearsElapsed = earliestLicenceDate ? Math.min(getDifferenceInYears(policyStart, earliestLicenceDate), 6) : 6;
|
|
1822
|
+
const suspensionYearLabel = yearsElapsed <= 1 ? 'past year' : `past ${yearsElapsed} years`;
|
|
1611
1823
|
const handleSuspensionChange = ({ value }) => {
|
|
1612
1824
|
dispatchDriverSuspensionState({
|
|
1613
1825
|
type: StoreFormCarDriverSuspensionActionTypes.FormCarDriverLicenceSuspensionSelect,
|
|
@@ -1680,7 +1892,7 @@ const BlockDriverSuspension = () => {
|
|
|
1680
1892
|
});
|
|
1681
1893
|
}
|
|
1682
1894
|
};
|
|
1683
|
-
return (jsxs("div", { className: "form-block-container", children: [jsx("h2", { className: isTheBig ? 'thebig-bold' : '', children: "Licence Suspensions" }), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleSuspensionChange, name: "licenceSuspension", defaultValue: getSelectedOption(yesNoOptions, licenceSuspension), title: `Has ${firstName} had a licence suspension within the
|
|
1895
|
+
return (jsxs("div", { className: "form-block-container", children: [jsx("h2", { className: isTheBig ? 'thebig-bold' : '', children: "Licence Suspensions" }), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleSuspensionChange, name: "licenceSuspension", defaultValue: getSelectedOption(yesNoOptions, licenceSuspension), title: `Has ${firstName} had a licence suspension within the ${suspensionYearLabel}?`, description: "There are two main types of licence suspensions: 1. Non-administrated suspension for cause: A driver's licence is suspended or cancelled because of traffic and criminal code driving offences or collecting too many demerit points. 2. Administrative suspension/cancellation/lapse: A driver's licence is suspended, cancelled, or allowed to lapse for reasons other than driving offences or demerit points such as a roadside licence suspension, medical conditions or failure to comply with court\u2011ordered obligations." }), licenceSuspension && (jsxs(Fragment, { children: [licenceSuspensionList?.map(({ suspensionReason, suspensionYear, suspensionMonth, reinstatementYear, reinstatementMonth, }, index) => {
|
|
1684
1896
|
const defaultSuspensionDate = {
|
|
1685
1897
|
year: suspensionYear,
|
|
1686
1898
|
month: suspensionMonth,
|
|
@@ -1692,7 +1904,7 @@ const BlockDriverSuspension = () => {
|
|
|
1692
1904
|
const now = getFormattedDate('', 'yyyy-MM-dd');
|
|
1693
1905
|
const days = birthDay ? (+birthDay + 1) : 1;
|
|
1694
1906
|
const endDate = reinstatementYear && reinstatementMonth ? addDayToDate(`${reinstatementYear}-${reinstatementMonth}`, days) : now;
|
|
1695
|
-
const currentMinDate = getMinDateByYears(getMinDate(birthDate, firstLicenceAge),
|
|
1907
|
+
const currentMinDate = getMinDateByYears(getMinDate(birthDate, firstLicenceAge), 6);
|
|
1696
1908
|
const currentEndDate = compareDates(endDate, currentMinDate) < 0 ? currentMinDate : endDate;
|
|
1697
1909
|
return (jsxs("div", { className: "list-block", children: [jsx("hr", {}), jsxs("div", { className: "list-item", children: [jsx(SelectFormBox, { options: licenceSuspensionsReasonOptions, name: `suspensionReason-${index}`, onChange: handleReasonChange(index), defaultValue: suspensionReason, title: "Reason for licence suspension", placeholder: "Select from the list", isRemovable: licenceSuspensionList.length > 1, onIconClick: handleIconClick(index), autoSelectIfValueIsOutOfOptions: false, error: !suspensionReason && driverState.inValidation, errorMessage: getErrorMessage(suspensionReason, driverState.inValidation) }), jsx(DateSelectFormBox, { name: `suspensionDate-${index}`, dateNames: [`suspensionYear-${index}`, `suspensionMonth-${index}`], onDateChange: handleSuspensionDateChange(index), defaultValue: defaultSuspensionDate, title: "Start date", errorMessage: getDateErrorMessage(['01', suspensionMonth, suspensionYear], driverState.inValidation), error: driverState.inValidation, minDate: currentMinDate, maxDate: currentEndDate }), jsx(DateSelectFormBox, { name: `reinstatementDate-${index}`, dateNames: [`reinstatementYear-${index}`, `reinstatementMonth-${index}`], onDateChange: handleReinstatementDateChange(index), defaultValue: defaultReinstatementDate, title: "End Date", errorMessage: getDateErrorMessage(['01', reinstatementMonth, reinstatementYear], driverState.inValidation), error: driverState.inValidation, minDate: suspensionYear && suspensionMonth
|
|
1698
1910
|
? addDayToDate(`${suspensionYear}-${suspensionMonth}`, days) : currentMinDate })] })] }, `suspension-${index}`));
|
|
@@ -1703,10 +1915,25 @@ const BlockDriverAccident = () => {
|
|
|
1703
1915
|
const { driverState, dispatchDriverAccidentState } = useStoreFormCarDriverAccident();
|
|
1704
1916
|
const { dispatchDriverBaseState } = useStoreFormCarDriverBase();
|
|
1705
1917
|
const { appConfigState: { appType } } = useStoreAppConfig();
|
|
1918
|
+
const { discountState } = useStoreFormCarDiscount();
|
|
1919
|
+
const { isAlbertaProvince, isNovaScotiaProvince, isNewfoundlandProvince, isOntarioProvince } = useProvince();
|
|
1706
1920
|
const isTheBig = appType === AppTypes.TheBig;
|
|
1921
|
+
const accidentYearCap = isTheBig || isAlbertaProvince || isNovaScotiaProvince || isNewfoundlandProvince ? 10 : 25;
|
|
1707
1922
|
const { accident, accidentList = [] } = driverState.items[driverState.activeIndex];
|
|
1708
|
-
const { firstName, birthYear, birthMonth, birthDay, licenceInfo: { firstLicenceAge }, } = driverState.items[driverState.activeIndex];
|
|
1923
|
+
const { firstName, birthYear, birthMonth, birthDay, licenceInfo: { firstLicenceAge, licenceType, g1LicenceYear, g1LicenceMonth, g2LicenceYear, g2LicenceMonth, gLicenceYear, gLicenceMonth, }, } = driverState.items[driverState.activeIndex];
|
|
1709
1924
|
const birthDate = birthYear && birthMonth && birthDay ? `${birthYear}-${birthMonth}-${birthDay}` : '';
|
|
1925
|
+
const getOntarioQ1Date = () => {
|
|
1926
|
+
if (licenceType === DriverLicenceTypes.G2)
|
|
1927
|
+
return g2LicenceYear && g2LicenceMonth ? `${g2LicenceYear}-${g2LicenceMonth}-01` : '';
|
|
1928
|
+
if (licenceType === DriverLicenceTypes.G)
|
|
1929
|
+
return gLicenceYear && gLicenceMonth ? `${gLicenceYear}-${gLicenceMonth}-01` : '';
|
|
1930
|
+
return g1LicenceYear && g1LicenceMonth ? `${g1LicenceYear}-${g1LicenceMonth}-01` : '';
|
|
1931
|
+
};
|
|
1932
|
+
const ontarioQ1Date = isOntarioProvince && isMyChoiceLike(appType) ? getOntarioQ1Date() : '';
|
|
1933
|
+
const earliestLicenceDate = ontarioQ1Date || (birthDate && firstLicenceAge ? addYearsToDate(birthDate, +firstLicenceAge) : '');
|
|
1934
|
+
const policyStart = discountState.policyStart || getFormattedDate('', 'yyyy-MM-dd');
|
|
1935
|
+
const yearsElapsed = earliestLicenceDate ? Math.min(getDifferenceInYears(policyStart, earliestLicenceDate), accidentYearCap) : accidentYearCap;
|
|
1936
|
+
const accidentYearLabel = yearsElapsed <= 1 ? 'past year' : `past ${yearsElapsed} years`;
|
|
1710
1937
|
const handleAccidentChange = ({ value }) => {
|
|
1711
1938
|
dispatchDriverAccidentState({
|
|
1712
1939
|
type: StoreFormCarDriverAccidentActionTypes.FormCarDriverAccidentSelect,
|
|
@@ -1750,13 +1977,13 @@ const BlockDriverAccident = () => {
|
|
|
1750
1977
|
});
|
|
1751
1978
|
}
|
|
1752
1979
|
};
|
|
1753
|
-
return (jsxs("div", { className: "form-block-container", children: [jsx("h2", { className: isTheBig ? 'thebig-bold' : '', children: "Accidents" }), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleAccidentChange, name: "accident", defaultValue: getSelectedOption(yesNoOptions, accident), title: `Has ${firstName}
|
|
1980
|
+
return (jsxs("div", { className: "form-block-container", children: [jsx("h2", { className: isTheBig ? 'thebig-bold' : '', children: "Accidents" }), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleAccidentChange, name: "accident", defaultValue: getSelectedOption(yesNoOptions, accident), title: `Has ${firstName} been at-fault for any accidents in the ${accidentYearLabel}?`, description: "An at-fault accident means you were responsible for the car accident according to provincially regulated Fault Determination Rules. Whether you did not obey traffic signals or hit the brakes too late, it can show up on your insurance record for up to 25 years. Insurers access at-fault information if one party reports it, so it is best to disclose previous incidents. A clean driving record mitigates additional hikes to your insurance premium." }), accident && (jsxs(Fragment, { children: [accidentList?.map(({ accidentYear, accidentMonth, }, index) => {
|
|
1754
1981
|
const defaultSuspensionDate = {
|
|
1755
1982
|
year: accidentYear,
|
|
1756
1983
|
month: accidentMonth,
|
|
1757
1984
|
day: '01',
|
|
1758
1985
|
};
|
|
1759
|
-
return (jsxs("div", { className: "list-block", children: [jsx("hr", {}), jsx(DateSelectFormBox, { name: `accidentDate-${index}`, dateNames: [`accidentYear-${index}`, `accidentMonth-${index}`], onDateChange: handleAccidentDateChange(index), isRemovable: accidentList.length > 1, onIconClick: handleIconClick(index), defaultValue: defaultSuspensionDate, title: "Accident date", errorMessage: getDateErrorMessage(['01', accidentMonth, accidentYear], driverState.inValidation), error: driverState.inValidation, minDate: getMinDate(birthDate, firstLicenceAge) })] }, `accident-${index}`));
|
|
1986
|
+
return (jsxs("div", { className: "list-block", children: [jsx("hr", {}), jsx(DateSelectFormBox, { name: `accidentDate-${index}`, dateNames: [`accidentYear-${index}`, `accidentMonth-${index}`], onDateChange: handleAccidentDateChange(index), isRemovable: accidentList.length > 1, onIconClick: handleIconClick(index), defaultValue: defaultSuspensionDate, title: "Accident date", errorMessage: getDateErrorMessage(['01', accidentMonth, accidentYear], driverState.inValidation), error: driverState.inValidation, minDate: getMinDateByYears(ontarioQ1Date || getMinDate(birthDate, firstLicenceAge), accidentYearCap) })] }, `accident-${index}`));
|
|
1760
1987
|
}), accidentList?.length < 3 && (jsx(ButtonBase, { category: CategoryTypes.Filled, onClick: handleAddButtonClick, size: SizeTypes.Medium, color: ColorTypes.Primary, label: "Add another" }))] }))] }));
|
|
1761
1988
|
};
|
|
1762
1989
|
|
|
@@ -1783,11 +2010,39 @@ const BlockDriverTicket = () => {
|
|
|
1783
2010
|
const isTheBig = appType === AppTypes.TheBig;
|
|
1784
2011
|
const { firstName, minMaxDates, } = driverState.items[driverState.activeIndex];
|
|
1785
2012
|
const { gOneMin } = minMaxDates;
|
|
2013
|
+
const getSpeedingOptions = () => {
|
|
2014
|
+
if (isNovaScotiaProvince) {
|
|
2015
|
+
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' },
|
|
2019
|
+
];
|
|
2020
|
+
}
|
|
2021
|
+
if (isAlbertaProvince || isNewfoundlandProvince) {
|
|
2022
|
+
return [
|
|
2023
|
+
{ value: 'SP', name: 'Speeding 1 to 50 kph over limit' },
|
|
2024
|
+
{ value: 'SP', name: 'Speeding 51 kph or more over limit' },
|
|
2025
|
+
];
|
|
2026
|
+
}
|
|
2027
|
+
return [
|
|
2028
|
+
{ value: 'SP', name: 'Speeding 1 to 49 kph over limit' },
|
|
2029
|
+
{ value: 'SP', name: 'Speeding 50 kph or more over limit' },
|
|
2030
|
+
];
|
|
2031
|
+
};
|
|
1786
2032
|
const getTrafficTicketsGroupOptions = () => {
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
|
|
1790
|
-
|
|
2033
|
+
const base = (isAlbertaProvince || isNewBrunswickProvince || isNovaScotiaProvince || isNewfoundlandProvince) && isTheBig
|
|
2034
|
+
? getTrafficTicketsGroupOptionsWithoutG1G2()
|
|
2035
|
+
: trafficTicketsGroupOptions;
|
|
2036
|
+
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
|
+
}));
|
|
1791
2046
|
};
|
|
1792
2047
|
const handleTicketChange = ({ value }) => {
|
|
1793
2048
|
dispatchDriverTicketState({
|
|
@@ -1821,6 +2076,15 @@ const BlockDriverTicket = () => {
|
|
|
1821
2076
|
},
|
|
1822
2077
|
});
|
|
1823
2078
|
};
|
|
2079
|
+
const handleSpeedChange = (index) => ({ value }) => {
|
|
2080
|
+
dispatchDriverTicketState({
|
|
2081
|
+
type: StoreFormCarDriverTicketActionTypes.FormCarDriverTrafficTicketSpeedSelect,
|
|
2082
|
+
payload: {
|
|
2083
|
+
speed: Number(value),
|
|
2084
|
+
index,
|
|
2085
|
+
},
|
|
2086
|
+
});
|
|
2087
|
+
};
|
|
1824
2088
|
const handleTicketDateChange = (index) => (dateType) => ({ value }) => {
|
|
1825
2089
|
if (dateType === DateTypes.Month) {
|
|
1826
2090
|
dispatchDriverTicketState({
|
|
@@ -1841,13 +2105,13 @@ const BlockDriverTicket = () => {
|
|
|
1841
2105
|
});
|
|
1842
2106
|
}
|
|
1843
2107
|
};
|
|
1844
|
-
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) => {
|
|
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) => {
|
|
1845
2109
|
const defaultTicketDate = {
|
|
1846
2110
|
year: ticketYear,
|
|
1847
2111
|
month: ticketMonth,
|
|
1848
2112
|
day: '01',
|
|
1849
2113
|
};
|
|
1850
|
-
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}`));
|
|
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}`));
|
|
1851
2115
|
}), ticketList?.length < 3 && (jsx(ButtonBase, { className: "list-item-add", category: CategoryTypes.Filled, onClick: handleAddButtonClick, size: SizeTypes.Medium, color: ColorTypes.Primary, label: "Add another" }))] }))] }));
|
|
1852
2116
|
};
|
|
1853
2117
|
|
|
@@ -1941,6 +2205,7 @@ const getDynamicLicenceBoxProps = ({ isAlbertaProvince, isOntarioProvince, isNew
|
|
|
1941
2205
|
const SectionDiscountInfo$1 = () => {
|
|
1942
2206
|
const { appConfigState: { appType }, } = useStoreAppConfig();
|
|
1943
2207
|
const allProvinces = useProvince();
|
|
2208
|
+
const { isAlbertaProvince } = allProvinces;
|
|
1944
2209
|
const isTheBig = appType === AppTypes.TheBig;
|
|
1945
2210
|
const mychoiceCls = isMyChoiceLike(appType) ? 'mychoice' : '';
|
|
1946
2211
|
const { discountState, dispatchDiscountState } = useStoreFormCarDiscount();
|
|
@@ -1998,7 +2263,7 @@ const SectionDiscountInfo$1 = () => {
|
|
|
1998
2263
|
payload: { caslConsent: value },
|
|
1999
2264
|
});
|
|
2000
2265
|
};
|
|
2001
|
-
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 && (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
|
|
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
|
|
2002
2267
|
? errorMessage
|
|
2003
2268
|
: 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, {})] }));
|
|
2004
2269
|
};
|