@mychoice/mychoice-sdk-modules 2.2.23 → 2.2.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +486 -143
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/insurances/car/pages/driver/helpers.d.ts +1 -1
- package/dist/cjs/insurances/car/pages/vehicle/sections/SectionPolicyDate.d.ts +2 -0
- package/dist/cjs/shared/boxes/InputFormBox/InputFormPhoneBox.d.ts +2 -2
- package/dist/cjs/shared/boxes/InputFormBox/interface.d.ts +3 -0
- package/dist/esm/index.js +488 -145
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/insurances/car/pages/driver/helpers.d.ts +1 -1
- package/dist/esm/insurances/car/pages/vehicle/sections/SectionPolicyDate.d.ts +2 -0
- package/dist/esm/shared/boxes/InputFormBox/InputFormPhoneBox.d.ts +2 -2
- package/dist/esm/shared/boxes/InputFormBox/interface.d.ts +3 -0
- package/dist/index.d.ts +4 -1
- package/package.json +4 -4
- 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/cjs/index.js
CHANGED
|
@@ -58,8 +58,8 @@ InputFormBox.defaultProps = {
|
|
|
58
58
|
};
|
|
59
59
|
|
|
60
60
|
const InputFormPhoneBox = (props) => {
|
|
61
|
-
const { className, defaultValue, placeholder, disabled, error, name, title, onChange, errorMessage, hintMessage, } = props;
|
|
62
|
-
return (jsxRuntime.jsx(Container, { name: name, className: ` ${className} ${error ? 'error' : ''}`, title: title, errorMessage: errorMessage, hintMessage: hintMessage, children: jsxRuntime.jsx(mychoiceSdkComponents.InputFormPhone, { className: "input-form", name: name, type: mychoiceSdkComponents.InputTypes.Text, defaultValue: defaultValue, onChange: onChange, placeholder: placeholder, disabled: disabled, error: error }) }));
|
|
61
|
+
const { className, defaultValue, placeholder, disabled, error, name, title, onChange, errorMessage, hintMessage, validationStatus, } = props;
|
|
62
|
+
return (jsxRuntime.jsx(Container, { name: name, className: ` ${className} ${error ? 'error' : ''}`, title: title, errorMessage: errorMessage, hintMessage: hintMessage, children: jsxRuntime.jsx(mychoiceSdkComponents.InputFormPhone, { className: "input-form", name: name, type: mychoiceSdkComponents.InputTypes.Text, defaultValue: defaultValue, onChange: onChange, placeholder: placeholder, disabled: disabled, error: error, validationStatus: validationStatus }) }));
|
|
63
63
|
};
|
|
64
64
|
InputFormPhoneBox.defaultProps = {
|
|
65
65
|
className: '',
|
|
@@ -209,9 +209,11 @@ const capitalize = (text) => text.charAt(0).toUpperCase() + text.slice(1);
|
|
|
209
209
|
const BlockVehLinks = () => {
|
|
210
210
|
const { vehicleState: { items: vehicles } } = mychoiceSdkStore.useStoreFormCarVehicle();
|
|
211
211
|
const { driverState: { items: drivers } } = mychoiceSdkStore.useStoreFormCarDriverBase();
|
|
212
|
-
const { discountState: { vehlinks }, dispatchDiscountState } = mychoiceSdkStore.useStoreFormCarDiscount();
|
|
213
|
-
|
|
214
|
-
|
|
212
|
+
const { discountState: { vehlinks, occVehlinks }, dispatchDiscountState } = mychoiceSdkStore.useStoreFormCarDiscount();
|
|
213
|
+
if (drivers.length <= 1) {
|
|
214
|
+
return null;
|
|
215
|
+
}
|
|
216
|
+
const handlePrimaryDriverChange = (vehicleIndex) => ({ value }) => {
|
|
215
217
|
dispatchDiscountState({
|
|
216
218
|
type: mychoiceSdkStore.StoreFormCarDiscountActionTypes.FormCarDiscountVehlinkSelect,
|
|
217
219
|
payload: {
|
|
@@ -220,14 +222,41 @@ const BlockVehLinks = () => {
|
|
|
220
222
|
},
|
|
221
223
|
});
|
|
222
224
|
};
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
225
|
+
const handleOccDriverChange = (driverIndex) => ({ value }) => {
|
|
226
|
+
dispatchDiscountState({
|
|
227
|
+
type: mychoiceSdkStore.StoreFormCarDiscountActionTypes.FormCarDiscountOccVehlinkSelect,
|
|
228
|
+
payload: {
|
|
229
|
+
driverIndex,
|
|
230
|
+
vehicleIndex: value,
|
|
231
|
+
},
|
|
232
|
+
});
|
|
233
|
+
};
|
|
234
|
+
// Drivers that are NOT assigned as primary for any vehicle
|
|
235
|
+
const primaryDriverIndices = vehlinks
|
|
236
|
+
.filter((l) => l.priority === mychoiceSdkComponents.DriverPriorityTypes.Prn)
|
|
237
|
+
.map((l) => l.driverIndex);
|
|
238
|
+
const unassignedDrivers = drivers
|
|
239
|
+
.map((driver, index) => ({ driver, index }))
|
|
240
|
+
.filter(({ index }) => !primaryDriverIndices.includes(index));
|
|
241
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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) => {
|
|
242
|
+
const { year, make, model } = vehicle;
|
|
243
|
+
const selectedPrimary = vehlinks.find((l) => l.vehicleIndex === vehicleIndex && l.priority === mychoiceSdkComponents.DriverPriorityTypes.Prn);
|
|
244
|
+
const allDriverOptions = drivers
|
|
245
|
+
.map((driver, driverIndex) => ({ name: driver.firstName, value: driverIndex }));
|
|
246
|
+
const filteredOptions = allDriverOptions.filter(({ value }) => {
|
|
247
|
+
const assignedVehicle = vehlinks.find((l) => l.driverIndex === value && l.priority === mychoiceSdkComponents.DriverPriorityTypes.Prn);
|
|
248
|
+
return !assignedVehicle || assignedVehicle.vehicleIndex === vehicleIndex;
|
|
249
|
+
});
|
|
250
|
+
const availablePrimaryOptions = filteredOptions.length > 0 ? filteredOptions : allDriverOptions;
|
|
251
|
+
return (jsxRuntime.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}`));
|
|
252
|
+
}), drivers.length > vehicles.length && unassignedDrivers.map(({ driver, index: driverIndex }) => {
|
|
253
|
+
const selectedVehicle = occVehlinks.find((l) => l.driverIndex === driverIndex);
|
|
254
|
+
const vehicleOptions = vehicles.map((vehicle, vehicleIndex) => ({
|
|
255
|
+
name: `${vehicle.year} ${vehicle.make} ${vehicle.model}`,
|
|
256
|
+
value: vehicleIndex,
|
|
257
|
+
}));
|
|
258
|
+
return (jsxRuntime.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}`));
|
|
259
|
+
})] }));
|
|
231
260
|
};
|
|
232
261
|
|
|
233
262
|
const BlockNextPageInfo$2 = () => {
|
|
@@ -680,14 +709,22 @@ const getRecommendedRange = (distanceDaily, distanceBusiness) => {
|
|
|
680
709
|
kmEachDay = +distanceBusiness;
|
|
681
710
|
}
|
|
682
711
|
switch (true) {
|
|
712
|
+
case kmEachDay === 0:
|
|
713
|
+
return 5000;
|
|
683
714
|
case kmEachDay === 1:
|
|
684
715
|
return 8000;
|
|
685
|
-
case ((kmEachDay >= 2) && (kmEachDay <=
|
|
716
|
+
case ((kmEachDay >= 2) && (kmEachDay <= 5)):
|
|
686
717
|
return 10000;
|
|
687
|
-
case ((kmEachDay >=
|
|
718
|
+
case ((kmEachDay >= 6) && (kmEachDay <= 12)):
|
|
719
|
+
return 10000;
|
|
720
|
+
case ((kmEachDay >= 13) && (kmEachDay <= 20)):
|
|
688
721
|
return 15000;
|
|
722
|
+
case ((kmEachDay >= 21) && (kmEachDay <= 29)):
|
|
723
|
+
return 20000;
|
|
689
724
|
case ((kmEachDay >= 30) && (kmEachDay <= 40)):
|
|
690
725
|
return 20000;
|
|
726
|
+
case ((kmEachDay >= 41) && (kmEachDay <= 49)):
|
|
727
|
+
return 30000;
|
|
691
728
|
case ((kmEachDay >= 50) && (kmEachDay <= 80)):
|
|
692
729
|
return 30000;
|
|
693
730
|
case ((kmEachDay >= 90) && (kmEachDay <= 100)):
|
|
@@ -793,9 +830,9 @@ const BlockCarConditionInfo = () => {
|
|
|
793
830
|
});
|
|
794
831
|
}
|
|
795
832
|
};
|
|
796
|
-
const { year, condition, leased, winterTires, parkingLocation, primaryUse, distanceDaily, distanceBusiness, distanceYearly, purchaseYear, purchaseMonth, purchaseDay, } = vehicleState.items[vehicleState.activeIndex];
|
|
833
|
+
const { year, condition, leased, winterTires, parkingLocation, primaryUse, distanceDaily, distanceBusiness, distanceYearly, businessUsePercent, purchaseYear, purchaseMonth, purchaseDay, } = vehicleState.items[vehicleState.activeIndex];
|
|
797
834
|
// eslint-disable-next-line max-len
|
|
798
|
-
const primaryUseHintMessage = primaryUse === 'business' ? 'Please choose "Business"
|
|
835
|
+
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.' : '';
|
|
799
836
|
const defaultPurchaseDate = {
|
|
800
837
|
day: purchaseDay,
|
|
801
838
|
month: purchaseMonth,
|
|
@@ -856,33 +893,30 @@ const BlockCarConditionInfo = () => {
|
|
|
856
893
|
type: mychoiceSdkStore.StoreFormCarVehicleActionTypes.FormCarDailyDistanceSelect,
|
|
857
894
|
payload: { distanceDaily: value },
|
|
858
895
|
});
|
|
896
|
+
const yearlyDefault = `${getRecommendedRange(value, primaryUse === mychoiceSdkComponents.VehiclePrimaryUseTypes.Business ? distanceBusiness : 1)}`;
|
|
859
897
|
dispatchVehicleState({
|
|
860
898
|
type: mychoiceSdkStore.StoreFormCarVehicleActionTypes.FormCarYearlyDistanceSelect,
|
|
861
|
-
payload: { distanceYearly:
|
|
899
|
+
payload: { distanceYearly: yearlyDefault },
|
|
862
900
|
});
|
|
863
901
|
};
|
|
864
|
-
const
|
|
865
|
-
dispatchVehicleState({
|
|
866
|
-
type: mychoiceSdkStore.StoreFormCarVehicleActionTypes.FormCarBusinessDistanceSelect,
|
|
867
|
-
payload: { distanceBusiness: value },
|
|
868
|
-
});
|
|
902
|
+
const handleCarYearlyDistanceChange = ({ value }) => {
|
|
869
903
|
dispatchVehicleState({
|
|
870
904
|
type: mychoiceSdkStore.StoreFormCarVehicleActionTypes.FormCarYearlyDistanceSelect,
|
|
871
|
-
payload: { distanceYearly:
|
|
905
|
+
payload: { distanceYearly: value },
|
|
872
906
|
});
|
|
873
907
|
};
|
|
874
|
-
const
|
|
908
|
+
const handleBusinessUsePercentChange = ({ value }) => {
|
|
875
909
|
dispatchVehicleState({
|
|
876
|
-
type: mychoiceSdkStore.StoreFormCarVehicleActionTypes.
|
|
877
|
-
payload: {
|
|
910
|
+
type: mychoiceSdkStore.StoreFormCarVehicleActionTypes.FormCarBusinessUsePercentSelect,
|
|
911
|
+
payload: { businessUsePercent: value },
|
|
878
912
|
});
|
|
879
913
|
};
|
|
880
914
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.carCondition, onChange: handleConditionChange, name: "condition", defaultValue: getSelectedOption(mychoiceSdkComponents.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?" }), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.carStatus, onChange: handleLeasedChange, name: "leased", defaultValue: getSelectedOption(mychoiceSdkComponents.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?" }), jsxRuntime.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([
|
|
881
915
|
purchaseDay || '',
|
|
882
916
|
purchaseMonth || '',
|
|
883
917
|
purchaseYear || '',
|
|
884
|
-
], vehicleState.inValidation), error: vehicleState.inValidation, minDate: year ? `${Number(year) - 1}-01-01` : mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd'), maxDate: mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd') }), !(isAlbertaProvince && isTheBig) && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.carWinterTiresCheck, onChange: handleWinterTiresChange, name: "winterTires", defaultValue: getSelectedOption(mychoiceSdkComponents.carWinterTiresCheck, winterTires), description: "Snow. Ice. Freezing temperatures. Winter tires protect you from all these winter weather conditions, and more. It also protects your wallet. Investing in winter tires can save you $50 to $100 on your insurance.", title: "Does your car have winter tires?" })), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.carKeepPlace, name: "parkingLocation", onChange: handleCarParkingLocationChange, defaultValue: getSelectedOption(mychoiceSdkComponents.carKeepPlace, parkingLocation), title: "Where do you keep your car overnight?", placeholder: "Select from the list", description: "For many of us, the answer is \u201Cat home.\u201D If you park your car in various locations throughout the year, then select the most frequently parking spot. Be honest\u2014some insurers will use your overnight parking location to calculate a quote, which could affect your claims in the future.", autoSelectIfValueIsOutOfOptions: false, error: !parkingLocation && vehicleState.inValidation, errorMessage: getErrorMessage(parkingLocation, vehicleState.inValidation) }), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.carUsagePurpose, onChange: handleCarUsageChange, name: "primaryUse", defaultValue: getSelectedOption(mychoiceSdkComponents.carUsagePurpose, primaryUse) || mychoiceSdkComponents.carUsagePurpose[0].value, hintMessage: primaryUseHintMessage, description: "The way you use your vehicle is a primary factor that insurers use in your policy terms and fees, whether it be personal or business.\n \u2022 Personal is driving from work or school to home.\n \u2022 Business considers other uses like sales calls, pick-ups or deliveries, or other business errands.", title: "What do you
|
|
885
|
-
${mychoiceSdkComponents.numberWithCommas(getRecommendedRange(distanceDaily, primaryUse === mychoiceSdkComponents.VehiclePrimaryUseTypes.Business ? distanceBusiness : 1))} for your yearly driven kilometers` : '', autoSelectIfValueIsOutOfOptions: false, error: !distanceYearly && vehicleState.inValidation, errorMessage: getErrorMessage(distanceYearly, vehicleState.inValidation) }), showPolicyStartOnVehiclePage && (jsxRuntime.jsx(DateSelectFormBox, { name: "policyStart", dateNames: ['policyStartYear', 'policyStartMonth', 'policyStartDay'], onDateChange: handlePolicyStartDateChange, defaultValue: defaultPolicyStartDate, title: "What is the ideal start date for your new insurance policy?", description: "Select your preferred date for the beginning of your new insurance policy. For instance, you may set the start date for the day that your current insurance expires to ensure that you're continuously covered. Alternatively, select today's date for a quote or new policy.", minDate: mychoiceSdkComponents.addDaysToDate('', 1), maxDate: mychoiceSdkComponents.addDaysToDate('', 90), isDay: true }))] }));
|
|
918
|
+
], vehicleState.inValidation), error: vehicleState.inValidation, minDate: year ? `${Number(year) - 1}-01-01` : mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd'), maxDate: mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd') }), !(isAlbertaProvince && isTheBig) && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.carWinterTiresCheck, onChange: handleWinterTiresChange, name: "winterTires", defaultValue: getSelectedOption(mychoiceSdkComponents.carWinterTiresCheck, winterTires), description: "Snow. Ice. Freezing temperatures. Winter tires protect you from all these winter weather conditions, and more. It also protects your wallet. Investing in winter tires can save you $50 to $100 on your insurance.", title: "Does your car have winter tires?" })), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.carKeepPlace, name: "parkingLocation", onChange: handleCarParkingLocationChange, defaultValue: getSelectedOption(mychoiceSdkComponents.carKeepPlace, parkingLocation), title: "Where do you keep your car overnight?", placeholder: "Select from the list", description: "For many of us, the answer is \u201Cat home.\u201D If you park your car in various locations throughout the year, then select the most frequently parking spot. Be honest\u2014some insurers will use your overnight parking location to calculate a quote, which could affect your claims in the future.", autoSelectIfValueIsOutOfOptions: false, error: !parkingLocation && vehicleState.inValidation, errorMessage: getErrorMessage(parkingLocation, vehicleState.inValidation) }), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.carUsagePurpose, onChange: handleCarUsageChange, name: "primaryUse", defaultValue: getSelectedOption(mychoiceSdkComponents.carUsagePurpose, primaryUse) || mychoiceSdkComponents.carUsagePurpose[0].value, hintMessage: primaryUseHintMessage, description: "The way you use your vehicle is a primary factor that insurers use in your policy terms and fees, whether it be personal or business.\n \u2022 Personal is driving from work or school to home.\n \u2022 Business considers other uses like sales calls, pick-ups or deliveries, or other business errands.", title: "What do you use your car for?" }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.firstDriveDistanceList, name: "distanceDaily", onChange: handleCarDailyDistanceChange, defaultValue: getSelectedOption(mychoiceSdkComponents.firstDriveDistanceList, distanceDaily), title: "How far is your 1-way commute to work or school?", placeholder: "Select", description: "The distance you drive to work or school would be an example of your daily commute. It is one of the most important factors when determining coverage options since it exposes you to traffic each day. The shorter your commute, the less risk you carry of an accident.", autoSelectIfValueIsOutOfOptions: false, error: distanceDaily === undefined && vehicleState.inValidation, errorMessage: getErrorMessage(distanceDaily, vehicleState.inValidation) }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.yearlyDriveDistanceList, name: "distanceYearly", onChange: handleCarYearlyDistanceChange, defaultValue: getSelectedOption(mychoiceSdkComponents.yearlyDriveDistanceList, distanceYearly), title: "How many total kilometers are driven each year?", placeholder: "Select", hintMessage: distanceDaily !== undefined ? `Based on your daily driven kilometers, we recommend
|
|
919
|
+
${mychoiceSdkComponents.numberWithCommas(getRecommendedRange(distanceDaily, primaryUse === mychoiceSdkComponents.VehiclePrimaryUseTypes.Business ? distanceBusiness : 1))} for your yearly driven kilometers` : '', autoSelectIfValueIsOutOfOptions: false, error: !distanceYearly && vehicleState.inValidation, errorMessage: getErrorMessage(distanceYearly, vehicleState.inValidation) }), primaryUse === 'business' && (jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.businessUsePercentOptions, name: "businessUsePercent", onChange: handleBusinessUsePercentChange, defaultValue: getSelectedOption(mychoiceSdkComponents.businessUsePercentOptions, businessUsePercent), title: "What percentage of your total kilometers are driven for business purposes?", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !businessUsePercent && vehicleState.inValidation, errorMessage: getErrorMessage(businessUsePercent, vehicleState.inValidation) })), showPolicyStartOnVehiclePage && (jsxRuntime.jsx(DateSelectFormBox, { name: "policyStart", dateNames: ['policyStartYear', 'policyStartMonth', 'policyStartDay'], onDateChange: handlePolicyStartDateChange, defaultValue: defaultPolicyStartDate, title: "What is the ideal start date for your new insurance policy?", description: "Select your preferred date for the beginning of your new insurance policy. For instance, you may set the start date for the day that your current insurance expires to ensure that you're continuously covered. Alternatively, select today's date for a quote or new policy.", minDate: mychoiceSdkComponents.addDaysToDate('', 1), maxDate: mychoiceSdkComponents.addDaysToDate('', 90), isDay: true }))] }));
|
|
886
920
|
};
|
|
887
921
|
|
|
888
922
|
const VehicleSectionMain = () => {
|
|
@@ -1211,96 +1245,174 @@ const SectionDriverInfo = () => {
|
|
|
1211
1245
|
return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [mychoiceCls && jsxRuntime.jsx("h2", { className: "section-title", children: "Time for a micro autobiography \u2013 tell us about you." }), jsxRuntime.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) }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.maritalStatusOptions, name: "maritalStatus", onChange: handleMaritalStatusChange, defaultValue: getSelectedOption(mychoiceSdkComponents.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) }), jsxRuntime.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: mychoiceSdkComponents.subYearsFromDate('', configState.licenceConfig.minLicenceAge || 16), isDay: true }), jsxRuntime.jsx(SwitchButtonBox, { name: "occupation", items: mychoiceSdkComponents.occupationOptions, onChange: handleOccupationChange, defaultValue: getSelectedOption(mychoiceSdkComponents.occupationOptions, occupation), title: "Are you currently employed or unemployed?", description: "Your employment status reflects your driving frequency, and insurers consider this in your policy." }), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.genderOptions, onChange: handleGenderChange, name: "gender", defaultValue: getSelectedOption(mychoiceSdkComponents.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 && (jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.applicantRelationshipOptions, name: "applicantRelationship", onChange: handleApplicantRelationshipChange, defaultValue: getSelectedOption(mychoiceSdkComponents.applicantRelationshipOptions, applicantRelationship), title: "Relationship to applicant", placeholder: "Select...", autoSelectIfValueIsOutOfOptions: false, error: !applicantRelationship && driverState.inValidation, errorMessage: getErrorMessage(applicantRelationship, driverState.inValidation) }))] }));
|
|
1212
1246
|
};
|
|
1213
1247
|
|
|
1248
|
+
// Max months between consecutive Ontario GDL licence classes (spec 1-2 e/f)
|
|
1249
|
+
const ON_MAX_MONTHS_BETWEEN_CLASSES = 60;
|
|
1214
1250
|
const SectionDriverLicence = () => {
|
|
1215
1251
|
const { appConfigState: { appType }, } = mychoiceSdkStore.useStoreAppConfig();
|
|
1216
1252
|
const [driverEducation, setDriverEducation] = React.useState(false);
|
|
1217
1253
|
const { configState } = mychoiceSdkStore.useStoreFormCarConfig();
|
|
1218
1254
|
const { driverState, dispatchDriverLicenceState } = mychoiceSdkStore.useStoreFormCarDriverLicence();
|
|
1219
|
-
const { isAlbertaProvince } = mychoiceSdkStore.useProvince();
|
|
1255
|
+
const { isAlbertaProvince, isOntarioProvince } = mychoiceSdkStore.useProvince();
|
|
1220
1256
|
const mychoiceCls = mychoiceSdkComponents.isMyChoiceLike(appType) ? 'mychoice' : '';
|
|
1221
|
-
const
|
|
1257
|
+
const isTheBig = appType === mychoiceSdkComponents.AppTypes.TheBig;
|
|
1258
|
+
// Ontario flow applies only for MyChoice-like (WL/MC) quoters, not TheBig
|
|
1259
|
+
const useOntarioFlow = isOntarioProvince && !isTheBig;
|
|
1260
|
+
const { firstName, birthDay, birthMonth, birthYear, licenceInfo: { firstLicenceAge, licenceType, g1LicenceYear, g1LicenceMonth, gLicenceYear, gLicenceMonth, g2LicenceYear, g2LicenceMonth, passedDriverTraining, previousLicence, receivedG2, receivedG, }, minMaxDates, } = driverState.items[driverState.activeIndex];
|
|
1222
1261
|
const { gMax = mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd'), gMin = '1922-01-01', gOneMax = mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd'), gOneMin = '1922-01-01', gTwoMax = mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd'), gTwoMin = '1922-01-01', gBlock = false, gTwoBlock = false, gOneBlock = false, licenceAgeMax = 16, } = minMaxDates ?? {};
|
|
1223
1262
|
const maxLicenceAge = licenceAgeMax;
|
|
1224
1263
|
const driverNameDefault = `Driver ${driverState.activeIndex + 1}`;
|
|
1225
1264
|
const birthDate = birthYear && birthMonth && birthDay ? `${birthYear}-${birthMonth}-${birthDay}` : '';
|
|
1226
1265
|
const defaultMinDate = birthDate && firstLicenceAge ? mychoiceSdkComponents.addYearsToDate(birthDate, +firstLicenceAge) : '';
|
|
1227
|
-
const
|
|
1228
|
-
|
|
1266
|
+
const getOntarioQ1YearMonth = () => {
|
|
1267
|
+
if (licenceType === mychoiceSdkComponents.DriverLicenceTypes.G2)
|
|
1268
|
+
return { year: g2LicenceYear, month: g2LicenceMonth };
|
|
1269
|
+
if (licenceType === mychoiceSdkComponents.DriverLicenceTypes.G)
|
|
1270
|
+
return { year: gLicenceYear, month: gLicenceMonth };
|
|
1271
|
+
return { year: g1LicenceYear, month: g1LicenceMonth };
|
|
1272
|
+
};
|
|
1273
|
+
const { year: ontarioQ1Year, month: ontarioQ1Month } = getOntarioQ1YearMonth();
|
|
1274
|
+
const ontarioQ1Date = ontarioQ1Year && ontarioQ1Month ? `${ontarioQ1Year}-${ontarioQ1Month}-01` : '';
|
|
1275
|
+
const isOnlyG = useOntarioFlow
|
|
1276
|
+
? (!!ontarioQ1Date && mychoiceSdkComponents.checkDateIsSpecial(ontarioQ1Date, configState.minDates.g.specialDate))
|
|
1277
|
+
: mychoiceSdkComponents.checkDateIsSpecial(defaultMinDate, configState.minDates.g.specialDate);
|
|
1278
|
+
const driverName = firstName || driverNameDefault;
|
|
1279
|
+
const today = mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd');
|
|
1229
1280
|
const { g, g1, g2, minLicenceAge } = configState.licenceConfig;
|
|
1230
1281
|
const licenceTypeOptions = [
|
|
1231
1282
|
{ value: g.name, name: g.title },
|
|
1232
1283
|
{ value: g1.name, name: g1.title },
|
|
1233
1284
|
{ value: g2.name, name: g2.title },
|
|
1234
1285
|
];
|
|
1286
|
+
// Ontario class dropdown options
|
|
1287
|
+
const ontarioFirstClassOptions = [
|
|
1288
|
+
{ value: mychoiceSdkComponents.DriverLicenceTypes.G1, name: 'G1 Beginner' },
|
|
1289
|
+
{ value: mychoiceSdkComponents.DriverLicenceTypes.G2, name: 'G2 Intermediate' },
|
|
1290
|
+
{ value: mychoiceSdkComponents.DriverLicenceTypes.G, name: 'G Full or equivalent' },
|
|
1291
|
+
];
|
|
1292
|
+
// Ontario "before 1994" — only G available, shown as disabled single option
|
|
1293
|
+
const ontarioOnlyGOptions = [
|
|
1294
|
+
{ value: mychoiceSdkComponents.DriverLicenceTypes.G, name: 'G Full or equivalent' },
|
|
1295
|
+
];
|
|
1296
|
+
// Legacy non-Ontario education effect
|
|
1235
1297
|
React.useEffect(() => {
|
|
1236
|
-
if (!
|
|
1237
|
-
if (
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1298
|
+
if (!useOntarioFlow) {
|
|
1299
|
+
if (!gOneBlock && !gTwoBlock) {
|
|
1300
|
+
if (licenceType !== mychoiceSdkComponents.DriverLicenceTypes.G1) {
|
|
1301
|
+
const g2Date = mychoiceSdkStore.addDayToDate(`${g2LicenceYear}-${g2LicenceMonth}`, birthDay ? +birthDay + 1 : 1);
|
|
1302
|
+
if (mychoiceSdkComponents.getDifferenceInYears('', g2Date) <= 3) {
|
|
1303
|
+
setDriverEducation(true);
|
|
1304
|
+
}
|
|
1305
|
+
else {
|
|
1306
|
+
setDriverEducation(false);
|
|
1307
|
+
}
|
|
1241
1308
|
}
|
|
1242
1309
|
else {
|
|
1243
1310
|
setDriverEducation(false);
|
|
1244
1311
|
}
|
|
1245
1312
|
}
|
|
1246
|
-
else {
|
|
1247
|
-
setDriverEducation(false);
|
|
1248
|
-
}
|
|
1249
1313
|
}
|
|
1250
|
-
}, [g2LicenceYear, g2LicenceMonth, licenceType]);
|
|
1314
|
+
}, [g2LicenceYear, g2LicenceMonth, licenceType, useOntarioFlow]);
|
|
1315
|
+
// If the user picks their birth month in their 16th year and birthDay > 1,
|
|
1316
|
+
// selecting that month would imply a date before their actual birthday (since dates are assumed
|
|
1317
|
+
// as the 1st). Auto-advance the Q1 month to birthMonth + 1.
|
|
1318
|
+
React.useEffect(() => {
|
|
1319
|
+
if (!useOntarioFlow || !birthDate || !ontarioQ1Year || !ontarioQ1Month)
|
|
1320
|
+
return;
|
|
1321
|
+
const birthDayNum = parseInt(birthDay || '1', 10);
|
|
1322
|
+
if (birthDayNum <= 1)
|
|
1323
|
+
return;
|
|
1324
|
+
const birthYearNum = parseInt(birthYear || '0', 10);
|
|
1325
|
+
if (parseInt(ontarioQ1Year, 10) !== birthYearNum + 16 || ontarioQ1Month !== birthMonth)
|
|
1326
|
+
return;
|
|
1327
|
+
const q1SlotForCorrection = licenceType || mychoiceSdkComponents.DriverLicenceTypes.G1;
|
|
1328
|
+
let correctedMonth = parseInt(birthMonth || '1', 10) + 1;
|
|
1329
|
+
let correctedYear = birthYearNum + 16;
|
|
1330
|
+
if (correctedMonth > 12) {
|
|
1331
|
+
correctedMonth = 1;
|
|
1332
|
+
correctedYear += 1;
|
|
1333
|
+
}
|
|
1334
|
+
dispatchDriverLicenceState({
|
|
1335
|
+
type: mychoiceSdkStore.StoreFormCarDriverLicenceActionTypes.FormCarDriverLicenceMonthSelect,
|
|
1336
|
+
payload: { value: String(correctedMonth).padStart(2, '0'), config: configState, type: q1SlotForCorrection },
|
|
1337
|
+
});
|
|
1338
|
+
if (correctedYear !== birthYearNum + 16) {
|
|
1339
|
+
dispatchDriverLicenceState({
|
|
1340
|
+
type: mychoiceSdkStore.StoreFormCarDriverLicenceActionTypes.FormCarDriverLicenceYearSelect,
|
|
1341
|
+
payload: { value: String(correctedYear), config: configState, type: q1SlotForCorrection },
|
|
1342
|
+
});
|
|
1343
|
+
}
|
|
1344
|
+
}, [ontarioQ1Year, ontarioQ1Month]);
|
|
1345
|
+
// ── helpers ────────────────────────────────────────────────
|
|
1251
1346
|
const getMinDate = (type) => {
|
|
1252
1347
|
switch (type) {
|
|
1253
|
-
case mychoiceSdkComponents.DriverLicenceTypes.G:
|
|
1254
|
-
|
|
1255
|
-
case mychoiceSdkComponents.DriverLicenceTypes.
|
|
1256
|
-
|
|
1257
|
-
case mychoiceSdkComponents.DriverLicenceTypes.G2:
|
|
1258
|
-
return gTwoMin;
|
|
1259
|
-
default:
|
|
1260
|
-
return '';
|
|
1348
|
+
case mychoiceSdkComponents.DriverLicenceTypes.G: return gMin;
|
|
1349
|
+
case mychoiceSdkComponents.DriverLicenceTypes.G1: return gOneMin;
|
|
1350
|
+
case mychoiceSdkComponents.DriverLicenceTypes.G2: return gTwoMin;
|
|
1351
|
+
default: return '';
|
|
1261
1352
|
}
|
|
1262
1353
|
};
|
|
1263
1354
|
const getMaxDate = (type) => {
|
|
1264
1355
|
switch (type) {
|
|
1265
|
-
case mychoiceSdkComponents.DriverLicenceTypes.G:
|
|
1266
|
-
|
|
1267
|
-
case mychoiceSdkComponents.DriverLicenceTypes.
|
|
1268
|
-
|
|
1269
|
-
case mychoiceSdkComponents.DriverLicenceTypes.G2:
|
|
1270
|
-
return gTwoMax;
|
|
1271
|
-
default:
|
|
1272
|
-
return '';
|
|
1356
|
+
case mychoiceSdkComponents.DriverLicenceTypes.G: return gMax;
|
|
1357
|
+
case mychoiceSdkComponents.DriverLicenceTypes.G1: return gOneMax;
|
|
1358
|
+
case mychoiceSdkComponents.DriverLicenceTypes.G2: return gTwoMax;
|
|
1359
|
+
default: return '';
|
|
1273
1360
|
}
|
|
1274
1361
|
};
|
|
1275
1362
|
const getLicenceYear = (type) => {
|
|
1276
1363
|
switch (type) {
|
|
1277
|
-
case mychoiceSdkComponents.DriverLicenceTypes.G:
|
|
1278
|
-
|
|
1279
|
-
case mychoiceSdkComponents.DriverLicenceTypes.
|
|
1280
|
-
|
|
1281
|
-
case mychoiceSdkComponents.DriverLicenceTypes.G2:
|
|
1282
|
-
return g2LicenceYear;
|
|
1283
|
-
default:
|
|
1284
|
-
return '';
|
|
1364
|
+
case mychoiceSdkComponents.DriverLicenceTypes.G: return gLicenceYear;
|
|
1365
|
+
case mychoiceSdkComponents.DriverLicenceTypes.G1: return g1LicenceYear;
|
|
1366
|
+
case mychoiceSdkComponents.DriverLicenceTypes.G2: return g2LicenceYear;
|
|
1367
|
+
default: return '';
|
|
1285
1368
|
}
|
|
1286
1369
|
};
|
|
1287
1370
|
const getLicenceMonth = (type) => {
|
|
1288
1371
|
switch (type) {
|
|
1289
|
-
case mychoiceSdkComponents.DriverLicenceTypes.G:
|
|
1290
|
-
|
|
1291
|
-
case mychoiceSdkComponents.DriverLicenceTypes.
|
|
1292
|
-
|
|
1293
|
-
case mychoiceSdkComponents.DriverLicenceTypes.G2:
|
|
1294
|
-
return g2LicenceMonth;
|
|
1295
|
-
default:
|
|
1296
|
-
return '';
|
|
1372
|
+
case mychoiceSdkComponents.DriverLicenceTypes.G: return gLicenceMonth;
|
|
1373
|
+
case mychoiceSdkComponents.DriverLicenceTypes.G1: return g1LicenceMonth;
|
|
1374
|
+
case mychoiceSdkComponents.DriverLicenceTypes.G2: return g2LicenceMonth;
|
|
1375
|
+
default: return '';
|
|
1297
1376
|
}
|
|
1298
1377
|
};
|
|
1299
1378
|
const getDefaultLicenceDate = (type) => ({
|
|
1300
1379
|
year: getLicenceYear(type),
|
|
1301
1380
|
month: getLicenceMonth(type),
|
|
1302
|
-
day:
|
|
1381
|
+
day: '01',
|
|
1303
1382
|
});
|
|
1383
|
+
// Build a YYYY-MM-01 string from stored year/month, returns '' if either missing
|
|
1384
|
+
const toDate = (year, month) => (year && month ? `${year}-${month}-01` : '');
|
|
1385
|
+
const validateLicenceDate = (year, month, minDate) => {
|
|
1386
|
+
const dateStr = toDate(year, month);
|
|
1387
|
+
if (!dateStr)
|
|
1388
|
+
return '';
|
|
1389
|
+
if (mychoiceSdkComponents.compareDates(dateStr, today) > 0)
|
|
1390
|
+
return 'License dates cannot be in the future';
|
|
1391
|
+
if (minDate && mychoiceSdkComponents.compareDates(dateStr, minDate) < 0) {
|
|
1392
|
+
return 'This license date must be equal or later than the prior license date. Please check your selection';
|
|
1393
|
+
}
|
|
1394
|
+
return '';
|
|
1395
|
+
};
|
|
1396
|
+
const validate60Months = (earlierYear, earlierMonth, laterYear, laterMonth) => {
|
|
1397
|
+
const earlier = toDate(earlierYear, earlierMonth);
|
|
1398
|
+
const later = toDate(laterYear, laterMonth);
|
|
1399
|
+
if (!earlier || !later)
|
|
1400
|
+
return '';
|
|
1401
|
+
const months = mychoiceSdkComponents.getDifferenceInMonths(later, earlier);
|
|
1402
|
+
if (months > ON_MAX_MONTHS_BETWEEN_CLASSES) {
|
|
1403
|
+
return "Ontario's graduated license program must be completed within 5 years. Please check your selection";
|
|
1404
|
+
}
|
|
1405
|
+
return '';
|
|
1406
|
+
};
|
|
1407
|
+
// In the Ontario flow, firstLicenceAge is never entered, so gOneMin is stale/empty.
|
|
1408
|
+
// Compute min from DOB + 16, capped to today so minDate never exceeds maxDate.
|
|
1409
|
+
const getG1MinDate = () => {
|
|
1410
|
+
if (useOntarioFlow && birthDate) {
|
|
1411
|
+
const computed = mychoiceSdkComponents.addYearsToDate(birthDate, 16);
|
|
1412
|
+
return mychoiceSdkComponents.compareDates(computed, today) > 0 ? today : computed;
|
|
1413
|
+
}
|
|
1414
|
+
return gOneMin;
|
|
1415
|
+
};
|
|
1304
1416
|
const handleLicenceAgeChange = ({ value }) => {
|
|
1305
1417
|
dispatchDriverLicenceState({
|
|
1306
1418
|
type: mychoiceSdkStore.StoreFormCarDriverLicenceActionTypes.FormCarDriverLicenceAgeSelect,
|
|
@@ -1325,6 +1437,18 @@ const SectionDriverLicence = () => {
|
|
|
1325
1437
|
payload: { previousLicence: value },
|
|
1326
1438
|
});
|
|
1327
1439
|
};
|
|
1440
|
+
const handleReceivedG2Change = ({ value }) => {
|
|
1441
|
+
dispatchDriverLicenceState({
|
|
1442
|
+
type: mychoiceSdkStore.StoreFormCarDriverLicenceActionTypes.FormCarDriverReceivedG2Select,
|
|
1443
|
+
payload: { receivedG2: value },
|
|
1444
|
+
});
|
|
1445
|
+
};
|
|
1446
|
+
const handleReceivedGChange = ({ value }) => {
|
|
1447
|
+
dispatchDriverLicenceState({
|
|
1448
|
+
type: mychoiceSdkStore.StoreFormCarDriverLicenceActionTypes.FormCarDriverReceivedGSelect,
|
|
1449
|
+
payload: { receivedG: value },
|
|
1450
|
+
});
|
|
1451
|
+
};
|
|
1328
1452
|
const handleLicenceDateChange = (type) => (dateType) => ({ value }) => {
|
|
1329
1453
|
if (dateType === mychoiceSdkComponents.DateTypes.Month) {
|
|
1330
1454
|
dispatchDriverLicenceState({
|
|
@@ -1344,23 +1468,86 @@ const SectionDriverLicence = () => {
|
|
|
1344
1468
|
const licenceMinDate = getMinDate(currentType);
|
|
1345
1469
|
const licenceTypeTitle = configState.licenceConfig[currentType].title;
|
|
1346
1470
|
const formattedMinDate = `${mychoiceSdkComponents.getFormattedDate(licenceMinDate, 'MMMM yyyy')}`;
|
|
1347
|
-
const defaultHintMessage = `${formattedMinDate} would be your earliest ${licenceTypeTitle}
|
|
1348
|
-
licence date based on your first licenced age and date of birth`;
|
|
1471
|
+
const defaultHintMessage = `${formattedMinDate} would be your earliest ${licenceTypeTitle} licence date based on your first licenced age and date of birth`;
|
|
1349
1472
|
return currentType === mychoiceSdkComponents.DriverLicenceTypes.G2
|
|
1350
|
-
? `${defaultHintMessage}
|
|
1351
|
-
if you completed a driver education course`
|
|
1473
|
+
? `${defaultHintMessage} if you completed a driver education course`
|
|
1352
1474
|
: defaultHintMessage;
|
|
1353
1475
|
};
|
|
1354
1476
|
const getLicenceAgeTitle = () => {
|
|
1355
|
-
if (isAlbertaProvince && isTheBig)
|
|
1477
|
+
if (isAlbertaProvince && isTheBig)
|
|
1356
1478
|
return 'At what age was Class 5 GDL or Class 5 obtained?';
|
|
1357
|
-
}
|
|
1358
|
-
|
|
1359
|
-
|
|
1479
|
+
return `What age was ${driverName} when first licenced?`;
|
|
1480
|
+
};
|
|
1481
|
+
if (useOntarioFlow) {
|
|
1482
|
+
// When isOnlyG (before Apr 1994), treat as G Full regardless of what licenceType is in the store
|
|
1483
|
+
const firstClass = isOnlyG ? mychoiceSdkComponents.DriverLicenceTypes.G : licenceType;
|
|
1484
|
+
// Q1 date lives in whichever slot the store wrote to (always ${licenceType}LicenceYear/Month).
|
|
1485
|
+
const q1SlotType = licenceType || mychoiceSdkComponents.DriverLicenceTypes.G1;
|
|
1486
|
+
const q1Year = getLicenceYear(q1SlotType);
|
|
1487
|
+
const q1Month = getLicenceMonth(q1SlotType);
|
|
1488
|
+
const q1Date = toDate(q1Year, q1Month);
|
|
1489
|
+
// ── path booleans ──
|
|
1490
|
+
const showG2Date = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G1 && receivedG2 === true;
|
|
1491
|
+
// G question shows after G2 date entered (G1→G2 path) OR after No-G2 answer (G1→No G2 path)
|
|
1492
|
+
const showGQuestionAfterG1 = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G1
|
|
1493
|
+
&& (receivedG2 === false || showG2Date);
|
|
1494
|
+
const showGDateAfterG1 = showGQuestionAfterG1 && receivedG === true;
|
|
1495
|
+
const showGDateAfterG2 = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G2 && receivedG === true;
|
|
1496
|
+
const g2Date = toDate(g2LicenceYear, g2LicenceMonth);
|
|
1497
|
+
const gDate = toDate(gLicenceYear, gLicenceMonth);
|
|
1498
|
+
// G1 branch: ask once, based on the first licence date. Show/hide uses 5-year gate; question text says "3 years".
|
|
1499
|
+
const showDtcG1Only = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G1
|
|
1500
|
+
&& !!q1Date
|
|
1501
|
+
&& mychoiceSdkComponents.getDifferenceInYears('', q1Date) <= 5
|
|
1502
|
+
&& !showG2Date;
|
|
1503
|
+
// Branch B: DTC shown as soon as class=G2 and Q1 is within 5 years (before G question)
|
|
1504
|
+
const showDtcG2Only = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G2
|
|
1505
|
+
&& !!q1Date
|
|
1506
|
+
&& mychoiceSdkComponents.getDifferenceInYears('', q1Date) <= 5;
|
|
1507
|
+
// Branch C G Full: within 5 years of Q1 (G date)
|
|
1508
|
+
const showDtcGFull = firstClass === mychoiceSdkComponents.DriverLicenceTypes.G
|
|
1509
|
+
&& !!q1Date
|
|
1510
|
+
&& mychoiceSdkComponents.getDifferenceInYears('', q1Date) <= 5;
|
|
1511
|
+
// ── Validation error messages ──
|
|
1512
|
+
const q1MinDate = getG1MinDate();
|
|
1513
|
+
const q1ChronoError = driverState.inValidation
|
|
1514
|
+
? validateLicenceDate(q1Year, q1Month, q1MinDate)
|
|
1515
|
+
: '';
|
|
1516
|
+
const q1FutureError = q1Date && mychoiceSdkComponents.compareDates(q1Date, today) > 0
|
|
1517
|
+
? 'License dates cannot be in the future' : '';
|
|
1518
|
+
const q1Error = q1FutureError || q1ChronoError || getDateErrorMessage(['01', q1Month, q1Year], driverState.inValidation);
|
|
1519
|
+
const g2ChronoError = driverState.inValidation
|
|
1520
|
+
? validateLicenceDate(g2LicenceYear, g2LicenceMonth, q1Date)
|
|
1521
|
+
: '';
|
|
1522
|
+
const g260MonthError = validate60Months(q1Year, q1Month, g2LicenceYear, g2LicenceMonth);
|
|
1523
|
+
const g2FutureError = g2Date && mychoiceSdkComponents.compareDates(g2Date, today) > 0 ? 'License dates cannot be in the future' : '';
|
|
1524
|
+
const g2Error = g2FutureError || g260MonthError || g2ChronoError || getDateErrorMessage(['01', g2LicenceMonth, g2LicenceYear], driverState.inValidation);
|
|
1525
|
+
// G preceding date: G2 date if on G1→G2→G path, else Q1 date
|
|
1526
|
+
const gPrecedingDate = showGDateAfterG1 && showG2Date ? g2Date : q1Date;
|
|
1527
|
+
const gChronoError = driverState.inValidation
|
|
1528
|
+
? validateLicenceDate(gLicenceYear, gLicenceMonth, gPrecedingDate)
|
|
1529
|
+
: '';
|
|
1530
|
+
const g60MonthError = validate60Months(q1Year, q1Month, gLicenceYear, gLicenceMonth);
|
|
1531
|
+
const gFutureError = gDate && mychoiceSdkComponents.compareDates(gDate, today) > 0 ? 'License dates cannot be in the future' : '';
|
|
1532
|
+
const gError = gFutureError || g60MonthError || gChronoError || getDateErrorMessage(['01', gLicenceMonth, gLicenceYear], driverState.inValidation);
|
|
1533
|
+
// ── Min dates (always capped to today so minDate never exceeds maxDate) ──
|
|
1534
|
+
const g2MinRaw = q1Date && mychoiceSdkComponents.compareDates(q1Date, gTwoMin) > 0 ? q1Date : gTwoMin;
|
|
1535
|
+
const g2MinDate = mychoiceSdkComponents.compareDates(g2MinRaw, today) > 0 ? today : g2MinRaw;
|
|
1536
|
+
const gMinRaw = gPrecedingDate && mychoiceSdkComponents.compareDates(gPrecedingDate, gMin) > 0 ? gPrecedingDate : gMin;
|
|
1537
|
+
const gMinDate = mychoiceSdkComponents.compareDates(gMinRaw, today) > 0 ? today : gMinRaw;
|
|
1538
|
+
const getMax60Date = (refDate) => {
|
|
1539
|
+
if (!refDate)
|
|
1540
|
+
return today;
|
|
1541
|
+
const max60 = mychoiceSdkComponents.addMonthsToDate(refDate, ON_MAX_MONTHS_BETWEEN_CLASSES);
|
|
1542
|
+
return mychoiceSdkComponents.compareDates(today, max60) > 0 ? max60 : today;
|
|
1543
|
+
};
|
|
1544
|
+
const g2MaxDate = getMax60Date(q1Date);
|
|
1545
|
+
const gMaxDate = getMax60Date(q1Date);
|
|
1546
|
+
return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsxRuntime.jsx(DateSelectFormBox, { name: "firstLicenceDate", dateNames: ['firstLicenceYear', 'firstLicenceMonth'], onDateChange: handleLicenceDateChange(q1SlotType), defaultValue: getDefaultLicenceDate(q1SlotType), title: `When did ${driverName} first receive their drivers license in Canada?`, description: "Select the year and month in which you received your first license to drive an automobile in Canada. This would include a beginners, intermediate or full license.", errorMessage: q1Error, error: driverState.inValidation, minDate: q1MinDate, maxDate: today, disabled: !birthDate }), q1Date && (jsxRuntime.jsx(SelectFormBox, { options: isOnlyG ? ontarioOnlyGOptions : ontarioFirstClassOptions, name: "firstLicenceClass", onChange: handleLicenceTypeChange, defaultValue: getSelectedOption(isOnlyG ? ontarioOnlyGOptions : ontarioFirstClassOptions, licenceType), title: "What class of license was it?", placeholder: "Select from the list", disabled: isOnlyG, description: "Drivers licensed in Ontario under the graduated licensing program would select G1 Beginner. If the driver was licensed outside Ontario or granted an exception for having driving experience from another jurisdiction then select the license class they first received. Select class G Full or equivalent if the driver was licensed in Ontario before 1994 or was licensed in another province. G equivalent classes in Canada are class 5.", autoSelectIfValueIsOutOfOptions: false })), firstClass === mychoiceSdkComponents.DriverLicenceTypes.G1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showDtcG1Only && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a gov't approved drivers education course within the past 3 years?` })), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleReceivedG2Change, name: "receivedG2", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, receivedG2), title: `Did ${driverName} receive a G2 license?` }), showG2Date && (jsxRuntime.jsx(DateSelectFormBox, { name: "g2LicenceDate", dateNames: ['g2LicenceYear', 'g2LicenceMonth'], onDateChange: handleLicenceDateChange(mychoiceSdkComponents.DriverLicenceTypes.G2), defaultValue: getDefaultLicenceDate(mychoiceSdkComponents.DriverLicenceTypes.G2), title: `When did ${driverName} receive this G2 license?`, errorMessage: g2Error, error: driverState.inValidation, minDate: g2MinDate, maxDate: g2MaxDate })), showGQuestionAfterG1 && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleReceivedGChange, name: "receivedG", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, receivedG), title: `Did ${driverName} receive a G license?` })), showGDateAfterG1 && (jsxRuntime.jsx(DateSelectFormBox, { name: "gLicenceDate", dateNames: ['gLicenceYear', 'gLicenceMonth'], onDateChange: handleLicenceDateChange(mychoiceSdkComponents.DriverLicenceTypes.G), defaultValue: getDefaultLicenceDate(mychoiceSdkComponents.DriverLicenceTypes.G), title: `When did ${driverName} receive this G license?`, errorMessage: gError, error: driverState.inValidation, minDate: gMinDate, maxDate: gMaxDate }))] })), firstClass === mychoiceSdkComponents.DriverLicenceTypes.G2 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [showDtcG2Only && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a gov't approved drivers education course within the past 3 years?` })), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleReceivedGChange, name: "receivedG", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, receivedG), title: `Did ${driverName} receive a G license?` }), showGDateAfterG2 && (jsxRuntime.jsx(DateSelectFormBox, { name: "gLicenceDate", dateNames: ['gLicenceYear', 'gLicenceMonth'], onDateChange: handleLicenceDateChange(mychoiceSdkComponents.DriverLicenceTypes.G), defaultValue: getDefaultLicenceDate(mychoiceSdkComponents.DriverLicenceTypes.G), title: `When did ${driverName} receive this G license?`, errorMessage: gError, error: driverState.inValidation, minDate: gMinDate, maxDate: gMaxDate }))] })), firstClass === mychoiceSdkComponents.DriverLicenceTypes.G && !isOnlyG && showDtcGFull && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a gov't approved drivers education course within the past 3 years?` })), isOnlyG && showDtcGFull && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a gov't approved drivers education course within the past 3 years?` })), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handlePreviousLicenceChange, name: "previousLicence", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, previousLicence), title: `Has ${driverName} ever had a full license anywhere else in Canada or USA?`, description: "If you have driving experience outside Canada or the United States, it may lower your premium. Your insurer may require proof of insurance in these other locations or some proof of driving experience from the country you indicate (like a copy of a previous driver's licence)." })] }));
|
|
1547
|
+
}
|
|
1360
1548
|
return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsxRuntime.jsx(InputFormBox, { name: "firstLicenceAge", title: getLicenceAgeTitle(), onChange: handleLicenceAgeChange, type: mychoiceSdkComponents.InputTypes.Number, defaultValue: firstLicenceAge, description: configState.toolTip.licenceAge, hintMessage: birthDate
|
|
1361
|
-
? `${
|
|
1362
|
-
|
|
1363
|
-
: '', placeholder: "Select Licence Age", disabled: !birthDate, error: !firstLicenceAge && driverState.inValidation, errorMessage: getErrorMessage(firstLicenceAge, driverState.inValidation), minValue: minLicenceAge || 16, maxValue: maxLicenceAge }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.getLicenceTypeOptions(licenceTypeOptions, mychoiceSdkComponents.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 === mychoiceSdkComponents.DriverLicenceTypes.G && !isOnlyG && (jsxRuntime.jsx(DateSelectFormBox, { name: "g2LicenceDate", dateNames: ['g2LicenceYear', 'g2LicenceMonth'], onDateChange: handleLicenceDateChange(mychoiceSdkComponents.DriverLicenceTypes.G2), defaultValue: getDefaultLicenceDate(mychoiceSdkComponents.DriverLicenceTypes.G2), title: `${configState.licenceConfig.g2.title} licence date`, errorMessage: getDateErrorMessage(['01', g2LicenceMonth, g2LicenceYear], driverState.inValidation), hintMessage: getHintMessage(mychoiceSdkComponents.DriverLicenceTypes.G2), error: driverState.inValidation, minDate: getMinDate(mychoiceSdkComponents.DriverLicenceTypes.G2), maxDate: getMaxDate(mychoiceSdkComponents.DriverLicenceTypes.G2) })), licenceType && (jsxRuntime.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 && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, passedDriverTraining), title: `Has ${firstName || driverNameDefault} completed a driver education course within the last 3 years?` })), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handlePreviousLicenceChange, name: "previousLicence", defaultValue: getSelectedOption(mychoiceSdkComponents.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)." })] }));
|
|
1549
|
+
? `${driverName} was licenced in ${Number(birthYear) + Number(firstLicenceAge)} - ${Number(birthYear) + Number(firstLicenceAge) + 1}`
|
|
1550
|
+
: '', placeholder: "Select Licence Age", disabled: !birthDate, error: !firstLicenceAge && driverState.inValidation, errorMessage: getErrorMessage(firstLicenceAge, driverState.inValidation), minValue: minLicenceAge || 16, maxValue: maxLicenceAge }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.getLicenceTypeOptions(licenceTypeOptions, mychoiceSdkComponents.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 === mychoiceSdkComponents.DriverLicenceTypes.G && !isOnlyG && (jsxRuntime.jsx(DateSelectFormBox, { name: "g2LicenceDate", dateNames: ['g2LicenceYear', 'g2LicenceMonth'], onDateChange: handleLicenceDateChange(mychoiceSdkComponents.DriverLicenceTypes.G2), defaultValue: getDefaultLicenceDate(mychoiceSdkComponents.DriverLicenceTypes.G2), title: `${configState.licenceConfig.g2.title} licence date`, errorMessage: getDateErrorMessage(['01', g2LicenceMonth, g2LicenceYear], driverState.inValidation), hintMessage: getHintMessage(mychoiceSdkComponents.DriverLicenceTypes.G2), error: driverState.inValidation, minDate: getMinDate(mychoiceSdkComponents.DriverLicenceTypes.G2), maxDate: getMaxDate(mychoiceSdkComponents.DriverLicenceTypes.G2) })), licenceType && (jsxRuntime.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 && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleTrainingChange, name: "passedDriverTraining", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, passedDriverTraining), title: `Has ${driverName} completed a driver education course within the last 3 years?` })), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handlePreviousLicenceChange, name: "previousLicence", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, previousLicence), title: `Has ${driverName} ever had a full license anywhere else in Canada or USA?`, description: "If you have driving experience outside Canada or the United States, it may lower your premium. Your insurer may require proof of insurance in these other locations or some proof of driving experience from the country you indicate (like a copy of a previous driver's licence)." })] }));
|
|
1364
1551
|
};
|
|
1365
1552
|
|
|
1366
1553
|
const SectionDriverInsurancePolicy = () => {
|
|
@@ -1369,7 +1556,7 @@ const SectionDriverInsurancePolicy = () => {
|
|
|
1369
1556
|
const { driverState, dispatchDriverInsuranceState } = mychoiceSdkStore.useStoreFormCarDriverInsurance();
|
|
1370
1557
|
const { discountState, dispatchDiscountState } = mychoiceSdkStore.useStoreFormCarDiscount();
|
|
1371
1558
|
const { quoteState: { isRequested }, } = mychoiceSdkStore.useStoreFormCarQuote();
|
|
1372
|
-
const { listed, listedMonth = '', listedYear = '', insured, insuredDate = '', firstName, birthYear, birthMonth, birthDay, licenceInfo: { firstLicenceAge, licenceType, gLicenceYear, gLicenceMonth, g1LicenceYear, g1LicenceMonth }, } = driverState.items[driverState.activeIndex];
|
|
1559
|
+
const { listed, listedMonth = '', listedYear = '', insured, insuredDate = '', lastPolicyEndYear = '', lastPolicyEndMonth = '', lastPolicyCancelReason = '', firstName, birthYear, birthMonth, birthDay, licenceInfo: { firstLicenceAge, licenceType, gLicenceYear, gLicenceMonth, g1LicenceYear, g1LicenceMonth, g2LicenceYear, g2LicenceMonth, }, } = driverState.items[driverState.activeIndex];
|
|
1373
1560
|
const { policyStartYear, policyStartMonth, policyStartDay } = discountState;
|
|
1374
1561
|
const driverNameDefault = `Driver ${driverState.activeIndex + 1}`;
|
|
1375
1562
|
const birthDate = birthYear && birthMonth && birthDay ? `${birthYear}-${birthMonth}-${birthDay}` : '';
|
|
@@ -1380,20 +1567,20 @@ const SectionDriverInsurancePolicy = () => {
|
|
|
1380
1567
|
const options = [{ value: '', name: 'Date Period', disabled: true }];
|
|
1381
1568
|
if (year && month) {
|
|
1382
1569
|
const todayDate = new Date();
|
|
1383
|
-
const
|
|
1384
|
-
const
|
|
1385
|
-
const yearsInPast = todayDate.getFullYear() - parseInt(year);
|
|
1386
|
-
|
|
1387
|
-
|
|
1570
|
+
const effectiveMonth = policyStartMonth || String(todayDate.getMonth() + 1).padStart(2, '0');
|
|
1571
|
+
const effectiveDay = policyStartDay || String(todayDate.getDate()).padStart(2, '0');
|
|
1572
|
+
const yearsInPast = Math.min(todayDate.getFullYear() - parseInt(year, 10), 10);
|
|
1573
|
+
options.push({
|
|
1574
|
+
value: mychoiceSdkComponents.subMonthsFromDate('', 6),
|
|
1575
|
+
name: 'Less than 1 year',
|
|
1576
|
+
});
|
|
1577
|
+
for (let i = 1; i <= yearsInPast; i += 1) {
|
|
1578
|
+
const pastDate = `${todayDate.getFullYear() - i}-${effectiveMonth}-${effectiveDay}`;
|
|
1388
1579
|
options.push({
|
|
1389
1580
|
value: pastDate,
|
|
1390
|
-
name: `${i} ${i === 1 ? 'Year' : 'Years'}`,
|
|
1581
|
+
name: i === 10 ? '10+ Years' : `${i} ${i === 1 ? 'Year' : 'Years'}`,
|
|
1391
1582
|
});
|
|
1392
1583
|
}
|
|
1393
|
-
options.push({
|
|
1394
|
-
value: `${todayDate.getFullYear() - 1}-${month}-${day}`,
|
|
1395
|
-
name: 'Less than 1 Year',
|
|
1396
|
-
});
|
|
1397
1584
|
}
|
|
1398
1585
|
return options;
|
|
1399
1586
|
};
|
|
@@ -1407,17 +1594,49 @@ const SectionDriverInsurancePolicy = () => {
|
|
|
1407
1594
|
month: policyStartMonth,
|
|
1408
1595
|
day: policyStartDay,
|
|
1409
1596
|
};
|
|
1597
|
+
const prevListedRef = React.useRef({ year: listedYear, month: listedMonth });
|
|
1598
|
+
const getFirstLicenceDateKey = () => {
|
|
1599
|
+
if (licenceType === mychoiceSdkComponents.DriverLicenceTypes.G)
|
|
1600
|
+
return `${gLicenceYear || ''}-${gLicenceMonth || ''}`;
|
|
1601
|
+
if (licenceType === mychoiceSdkComponents.DriverLicenceTypes.G2)
|
|
1602
|
+
return `${g2LicenceYear || ''}-${g2LicenceMonth || ''}`;
|
|
1603
|
+
if (licenceType === mychoiceSdkComponents.DriverLicenceTypes.G1)
|
|
1604
|
+
return `${g1LicenceYear || ''}-${g1LicenceMonth || ''}`;
|
|
1605
|
+
return `${firstLicenceAge || ''}`;
|
|
1606
|
+
};
|
|
1607
|
+
const firstLicenceDateKey = getFirstLicenceDateKey();
|
|
1608
|
+
const prevFirstLicenceRef = React.useRef(firstLicenceDateKey);
|
|
1410
1609
|
React.useEffect(() => {
|
|
1411
1610
|
if (listedYear && listedMonth && !isRequested) {
|
|
1412
|
-
const
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1611
|
+
const prev = prevListedRef.current;
|
|
1612
|
+
const hasChanged = prev.year !== listedYear || prev.month !== listedMonth;
|
|
1613
|
+
prevListedRef.current = { year: listedYear, month: listedMonth };
|
|
1614
|
+
if (!insuredDate || hasChanged) {
|
|
1615
|
+
const options = getPeriodOptions(listedYear, listedMonth);
|
|
1616
|
+
if (options.length > 1) {
|
|
1617
|
+
dispatchDriverInsuranceState({
|
|
1618
|
+
type: mychoiceSdkStore.StoreFormCarDriverInsuranceActionTypes.FormCarDriverInsuredDateSelect,
|
|
1619
|
+
payload: { insuredDate: options[1].value },
|
|
1620
|
+
});
|
|
1621
|
+
}
|
|
1418
1622
|
}
|
|
1419
1623
|
}
|
|
1420
1624
|
}, [listedYear, listedMonth]);
|
|
1625
|
+
React.useEffect(() => {
|
|
1626
|
+
if (!listedYear || !listedMonth || isRequested)
|
|
1627
|
+
return;
|
|
1628
|
+
const hasChanged = prevFirstLicenceRef.current !== firstLicenceDateKey;
|
|
1629
|
+
prevFirstLicenceRef.current = firstLicenceDateKey;
|
|
1630
|
+
if (!hasChanged)
|
|
1631
|
+
return;
|
|
1632
|
+
const options = getPeriodOptions(listedYear, listedMonth);
|
|
1633
|
+
if (options.length > 1) {
|
|
1634
|
+
dispatchDriverInsuranceState({
|
|
1635
|
+
type: mychoiceSdkStore.StoreFormCarDriverInsuranceActionTypes.FormCarDriverInsuredDateSelect,
|
|
1636
|
+
payload: { insuredDate: options[1].value },
|
|
1637
|
+
});
|
|
1638
|
+
}
|
|
1639
|
+
}, [firstLicenceDateKey]);
|
|
1421
1640
|
React.useEffect(() => {
|
|
1422
1641
|
if (listedYear && listedMonth && listed) {
|
|
1423
1642
|
const listedDate = mychoiceSdkComponents.addDaysToDate(`${listedYear}-${listedMonth}-01`, birthDay ? +birthDay + 1 : 1);
|
|
@@ -1458,6 +1677,30 @@ you had insurance. If this is correct, please continue with the form.`);
|
|
|
1458
1677
|
type: mychoiceSdkStore.StoreFormCarDriverInsuranceActionTypes.FormCarDriverInsuredSelect,
|
|
1459
1678
|
payload: { insured: !value },
|
|
1460
1679
|
});
|
|
1680
|
+
dispatchDriverInsuranceState({
|
|
1681
|
+
type: mychoiceSdkStore.StoreFormCarDriverInsuranceActionTypes.FormCarDriverNotCurrentlyInsuredSelect,
|
|
1682
|
+
payload: { notCurrentlyInsured: value },
|
|
1683
|
+
});
|
|
1684
|
+
};
|
|
1685
|
+
const handleLastPolicyEndDateChange = (dateType) => ({ value }) => {
|
|
1686
|
+
if (dateType === mychoiceSdkComponents.DateTypes.Month) {
|
|
1687
|
+
dispatchDriverInsuranceState({
|
|
1688
|
+
type: mychoiceSdkStore.StoreFormCarDriverInsuranceActionTypes.FormCarDriverLastPolicyEndMonthSelect,
|
|
1689
|
+
payload: { lastPolicyEndMonth: value },
|
|
1690
|
+
});
|
|
1691
|
+
}
|
|
1692
|
+
if (dateType === mychoiceSdkComponents.DateTypes.Year) {
|
|
1693
|
+
dispatchDriverInsuranceState({
|
|
1694
|
+
type: mychoiceSdkStore.StoreFormCarDriverInsuranceActionTypes.FormCarDriverLastPolicyEndYearSelect,
|
|
1695
|
+
payload: { lastPolicyEndYear: value },
|
|
1696
|
+
});
|
|
1697
|
+
}
|
|
1698
|
+
};
|
|
1699
|
+
const handleLastPolicyCancelReasonChange = ({ value }) => {
|
|
1700
|
+
dispatchDriverInsuranceState({
|
|
1701
|
+
type: mychoiceSdkStore.StoreFormCarDriverInsuranceActionTypes.FormCarDriverLastPolicyCancelReasonSelect,
|
|
1702
|
+
payload: { lastPolicyCancelReason: value },
|
|
1703
|
+
});
|
|
1461
1704
|
};
|
|
1462
1705
|
const handleListedChange = ({ value }) => {
|
|
1463
1706
|
dispatchDriverInsuranceState({
|
|
@@ -1485,6 +1728,14 @@ you had insurance. If this is correct, please continue with the form.`);
|
|
|
1485
1728
|
});
|
|
1486
1729
|
}
|
|
1487
1730
|
};
|
|
1731
|
+
const firstInsuredMinDate = listedYear && listedMonth
|
|
1732
|
+
? mychoiceSdkComponents.addDaysToDate(`${listedYear}-${listedMonth}-01`, birthDay ? +birthDay + 1 : 1)
|
|
1733
|
+
: mychoiceSdkComponents.getMinDate(birthDate, firstLicenceAge);
|
|
1734
|
+
const twentyYearsAgo = mychoiceSdkComponents.getMinDateByYears(mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd'), 20);
|
|
1735
|
+
let lastPolicyEndMinDate = twentyYearsAgo;
|
|
1736
|
+
if (firstInsuredMinDate && mychoiceSdkComponents.compareDates(firstInsuredMinDate, twentyYearsAgo) > 0) {
|
|
1737
|
+
lastPolicyEndMinDate = firstInsuredMinDate;
|
|
1738
|
+
}
|
|
1488
1739
|
const handlePolicyStartDateChange = (dateType) => ({ value }) => {
|
|
1489
1740
|
if (dateType === mychoiceSdkComponents.DateTypes.Day) {
|
|
1490
1741
|
dispatchDiscountState({
|
|
@@ -1505,20 +1756,26 @@ you had insurance. If this is correct, please continue with the form.`);
|
|
|
1505
1756
|
});
|
|
1506
1757
|
}
|
|
1507
1758
|
};
|
|
1508
|
-
return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsxRuntime.jsxs("div", { className: "box-container", children: [jsxRuntime.jsx(DateSelectFormBox, { name: "listedYear", dateNames: ['listedYear', 'listedMonth'], onDateChange: handleListedDateChange, defaultValue: defaultListedDate, disabled: !listed, title: `When was ${firstName || driverNameDefault} first listed as a driver on a Canadian or US insurance policy?`, description: "The selection indicates what year the
|
|
1759
|
+
return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsxRuntime.jsxs("div", { className: "box-container", children: [jsxRuntime.jsx(DateSelectFormBox, { name: "listedYear", dateNames: ['listedYear', 'listedMonth'], onDateChange: handleListedDateChange, defaultValue: defaultListedDate, disabled: !listed, title: `When was ${firstName || driverNameDefault} first listed as a driver on a Canadian or US insurance policy?`, description: "The selection indicates what month and year the driver was first listed on a Canadian or US insurance policy. If you do not remember this date, it is acceptable to provide a best estimate for the purposes of the policy or quote.", errorMessage: listed
|
|
1509
1760
|
? getDateErrorMessage(['01', listedMonth, listedYear], driverState.inValidation)
|
|
1510
|
-
: '', error: driverState.inValidation, hintMessage: hintMessage, minDate: mychoiceSdkComponents.getMinDate(birthDate, firstLicenceAge) }), jsxRuntime.jsx(mychoiceSdkComponents.CheckboxForm, { name: "listed", label: "Never listed on an insurance policy", onChange: handleListedChange, defaultValue: !listed })] }), listed && (jsxRuntime.jsxs("div", { className: "box-container", children: [jsxRuntime.jsx(SelectFormBox, { name: "insuredDate", onChange: handleInsuredPeriodChange, options: getPeriodOptions(listedYear, listedMonth), defaultValue: insuredDate, disabled: !insured, title: `How long has ${firstName || driverNameDefault} been with their current insurance provider?`, description: "It is common for insurers to provide loyalty rewards or discounts for valued customers. Loyalty is a positive trait in the industry, and most insurance companies will want to provide some incentive for continued customer relationships through tangible policy rewards.", errorMessage: insured ? getErrorMessage(insuredDate, driverState.inValidation) : '', error: !insuredDate && driverState.inValidation }), jsxRuntime.jsx(mychoiceSdkComponents.CheckboxForm, { name: "insured", label: "Not currently insured", onChange: handleInsuredChange, defaultValue: !insured })] })), !isTheBig && !mychoiceSdkComponents.isMyChoiceLike(appType) && (jsxRuntime.jsx(DateSelectFormBox, { name: "policyStart", dateNames: ['policyStartYear', 'policyStartMonth', 'policyStartDay'], onDateChange: handlePolicyStartDateChange, defaultValue: defaultPolicyStartDate, title: "What is the ideal start date for your new insurance policy?", description: "Select your preferred date for the beginning of your new insurance policy. For instance, you may set the start date for the day that your current insurance expires to ensure that you\u2019re continuously covered. Alternatively, select today's date for a quote or new policy.", errorMessage: getDateErrorMessage([policyStartDay || '', policyStartMonth || '', policyStartYear || ''], driverState.inValidation), error: driverState.inValidation, minDate: mychoiceSdkComponents.addDaysToDate('', 1), maxDate: mychoiceSdkComponents.addDaysToDate('', 60), isDay: true }))] }));
|
|
1761
|
+
: '', error: driverState.inValidation, hintMessage: hintMessage, minDate: mychoiceSdkComponents.getMinDate(birthDate, firstLicenceAge) }), jsxRuntime.jsx(mychoiceSdkComponents.CheckboxForm, { name: "listed", label: "Never listed on an insurance policy", onChange: handleListedChange, defaultValue: !listed })] }), listed && (jsxRuntime.jsxs("div", { className: "box-container", children: [jsxRuntime.jsx(SelectFormBox, { name: "insuredDate", onChange: handleInsuredPeriodChange, options: getPeriodOptions(listedYear, listedMonth), defaultValue: insuredDate, disabled: !insured, title: `How long has ${firstName || driverNameDefault} been with their current insurance provider?`, description: "It is common for insurers to provide loyalty rewards or discounts for valued customers. Loyalty is a positive trait in the industry, and most insurance companies will want to provide some incentive for continued customer relationships through tangible policy rewards.", errorMessage: insured ? getErrorMessage(insuredDate, driverState.inValidation) : '', error: !insuredDate && driverState.inValidation }), jsxRuntime.jsx(mychoiceSdkComponents.CheckboxForm, { name: "insured", label: "Not currently insured", onChange: handleInsuredChange, defaultValue: !insured })] })), listed && !insured && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DateSelectFormBox, { name: "lastPolicyEnd", dateNames: ['lastPolicyEndYear', 'lastPolicyEndMonth'], onDateChange: handleLastPolicyEndDateChange, defaultValue: { year: lastPolicyEndYear, month: lastPolicyEndMonth, day: '01' }, title: `When did ${firstName || driverNameDefault}'s most recent policy end?`, errorMessage: getDateErrorMessage(['01', lastPolicyEndMonth, lastPolicyEndYear], driverState.inValidation), error: driverState.inValidation, maxDate: mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd'), minDate: lastPolicyEndMinDate }), lastPolicyEndYear && lastPolicyEndMonth && (jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.insuranceCancellationReasonOptions, name: "lastPolicyCancelReason", onChange: handleLastPolicyCancelReasonChange, defaultValue: lastPolicyCancelReason, title: "Why was this last insurance policy cancelled?", placeholder: "Select from the list", autoSelectIfValueIsOutOfOptions: false, error: !lastPolicyCancelReason && driverState.inValidation, errorMessage: getErrorMessage(lastPolicyCancelReason, driverState.inValidation) }))] })), !isTheBig && !mychoiceSdkComponents.isMyChoiceLike(appType) && (jsxRuntime.jsx(DateSelectFormBox, { name: "policyStart", dateNames: ['policyStartYear', 'policyStartMonth', 'policyStartDay'], onDateChange: handlePolicyStartDateChange, defaultValue: defaultPolicyStartDate, title: "What is the ideal start date for your new insurance policy?", description: "Select your preferred date for the beginning of your new insurance policy. For instance, you may set the start date for the day that your current insurance expires to ensure that you\u2019re continuously covered. Alternatively, select today's date for a quote or new policy.", errorMessage: getDateErrorMessage([policyStartDay || '', policyStartMonth || '', policyStartYear || ''], driverState.inValidation), error: driverState.inValidation, minDate: mychoiceSdkComponents.addDaysToDate('', 1), maxDate: mychoiceSdkComponents.addDaysToDate('', 60), isDay: true }))] }));
|
|
1511
1762
|
};
|
|
1512
1763
|
|
|
1513
1764
|
const SectionDriverCancellation = () => {
|
|
1514
1765
|
const { driverState, dispatchDriverCancellationState } = mychoiceSdkStore.useStoreFormCarDriverCancellation();
|
|
1515
1766
|
const { dispatchDriverBaseState } = mychoiceSdkStore.useStoreFormCarDriverBase();
|
|
1767
|
+
const { discountState } = mychoiceSdkStore.useStoreFormCarDiscount();
|
|
1516
1768
|
const { insuranceCancellation, insuranceCancellationList = [] } = driverState.items[driverState.activeIndex];
|
|
1517
1769
|
const { appConfigState: { appType }, } = mychoiceSdkStore.useStoreAppConfig();
|
|
1518
1770
|
const isTheBig = appType === mychoiceSdkComponents.AppTypes.TheBig;
|
|
1519
1771
|
const mychoiceCls = mychoiceSdkComponents.isMyChoiceLike(appType) ? 'mychoice' : '';
|
|
1520
|
-
const { firstName, birthYear, birthMonth, birthDay, licenceInfo: { firstLicenceAge }, } = driverState.items[driverState.activeIndex];
|
|
1772
|
+
const { firstName, birthYear, birthMonth, birthDay, listedYear, listedMonth, licenceInfo: { firstLicenceAge }, } = driverState.items[driverState.activeIndex];
|
|
1521
1773
|
const birthDate = birthYear && birthMonth && birthDay ? `${birthYear}-${birthMonth}-${birthDay}` : '';
|
|
1774
|
+
const policyStart = discountState.policyStart || mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd');
|
|
1775
|
+
const firstInsuredDate = listedYear && listedMonth ? `${listedYear}-${listedMonth}-01` : '';
|
|
1776
|
+
const rawYearsSinceFirstInsured = firstInsuredDate ? mychoiceSdkComponents.getDifferenceInYears(policyStart, firstInsuredDate) : 0;
|
|
1777
|
+
const cancellationYearCap = Math.min(rawYearsSinceFirstInsured, 10);
|
|
1778
|
+
const cancellationYearLabel = cancellationYearCap <= 1 ? 'past year' : `past ${cancellationYearCap} years`;
|
|
1522
1779
|
const handleIconClick = (index) => () => {
|
|
1523
1780
|
dispatchDriverCancellationState({
|
|
1524
1781
|
type: mychoiceSdkStore.StoreFormCarDriverCancellationActionTypes.FormCarDriverInsuranceCancellationDelete,
|
|
@@ -1591,8 +1848,7 @@ const SectionDriverCancellation = () => {
|
|
|
1591
1848
|
});
|
|
1592
1849
|
}
|
|
1593
1850
|
};
|
|
1594
|
-
return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsxRuntime.jsx("h2", { className: isTheBig ? 'thebig-bold' : '', children: "Insurance Cancellation" }), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleCancellationChange, name: "insuranceCancellation", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, insuranceCancellation), title: `Has ${firstName} had an insurance company cancellation or
|
|
1595
|
-
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 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [insuranceCancellationList?.map(({ cancellationReason, startYear, startMonth, endYear, endMonth }, index) => {
|
|
1851
|
+
return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsxRuntime.jsx("h2", { className: isTheBig ? 'thebig-bold' : '', children: "Insurance Cancellation" }), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleCancellationChange, name: "insuranceCancellation", defaultValue: getSelectedOption(mychoiceSdkComponents.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 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [insuranceCancellationList?.map(({ cancellationReason, startYear, startMonth, endYear, endMonth }, index) => {
|
|
1596
1852
|
const defaultStartDate = {
|
|
1597
1853
|
year: startYear,
|
|
1598
1854
|
month: startMonth,
|
|
@@ -1604,7 +1860,7 @@ const SectionDriverCancellation = () => {
|
|
|
1604
1860
|
const now = mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd');
|
|
1605
1861
|
const days = birthDay ? +birthDay + 1 : 1;
|
|
1606
1862
|
const endDate = endYear && endMonth ? mychoiceSdkStore.addDayToDate(`${endYear}-${endMonth}`, days) : now;
|
|
1607
|
-
const currentMinDate = mychoiceSdkComponents.getMinDateByYears(mychoiceSdkComponents.getMinDate(birthDate, firstLicenceAge),
|
|
1863
|
+
const currentMinDate = mychoiceSdkComponents.getMinDateByYears(mychoiceSdkComponents.getMinDate(birthDate, firstLicenceAge), cancellationYearCap + 1);
|
|
1608
1864
|
const currentEndDate = mychoiceSdkComponents.compareDates(endDate, currentMinDate) < 0 ? currentMinDate : endDate;
|
|
1609
1865
|
return (jsxRuntime.jsxs("div", { className: "list-block", children: [jsxRuntime.jsx("hr", {}), jsxRuntime.jsxs("div", { className: "list-item", children: [jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.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) }), jsxRuntime.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 }), jsxRuntime.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 ? mychoiceSdkStore.addDayToDate(`${startYear}-${startMonth}`, days) : currentMinDate })] })] }, `insurance-cancellation-${index}`));
|
|
1610
1866
|
}), insuranceCancellationList?.length < 3 && (jsxRuntime.jsx(mychoiceSdkComponents.ButtonBase, { category: mychoiceSdkComponents.CategoryTypes.Filled, onClick: handleAddButtonClick, size: mychoiceSdkComponents.SizeTypes.Medium, color: mychoiceSdkComponents.ColorTypes.Primary, label: "Add another" }))] }))] }));
|
|
@@ -1614,10 +1870,15 @@ const BlockDriverSuspension = () => {
|
|
|
1614
1870
|
const { driverState, dispatchDriverSuspensionState } = mychoiceSdkStore.useStoreFormCarDriverSuspension();
|
|
1615
1871
|
const { licenceSuspension, licenceSuspensionList = [] } = driverState.items[driverState.activeIndex];
|
|
1616
1872
|
const { dispatchDriverBaseState } = mychoiceSdkStore.useStoreFormCarDriverBase();
|
|
1873
|
+
const { discountState } = mychoiceSdkStore.useStoreFormCarDiscount();
|
|
1617
1874
|
const { appConfigState: { appType } } = mychoiceSdkStore.useStoreAppConfig();
|
|
1618
1875
|
const isTheBig = appType === mychoiceSdkComponents.AppTypes.TheBig;
|
|
1619
1876
|
const { firstName, birthYear, birthMonth, birthDay, licenceInfo: { firstLicenceAge }, } = driverState.items[driverState.activeIndex];
|
|
1620
1877
|
const birthDate = birthYear && birthMonth && birthDay ? `${birthYear}-${birthMonth}-${birthDay}` : '';
|
|
1878
|
+
const earliestLicenceDate = birthDate && firstLicenceAge ? mychoiceSdkComponents.addYearsToDate(birthDate, +firstLicenceAge) : '';
|
|
1879
|
+
const policyStart = discountState.policyStart || mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd');
|
|
1880
|
+
const yearsElapsed = earliestLicenceDate ? Math.min(mychoiceSdkComponents.getDifferenceInYears(policyStart, earliestLicenceDate), 6) : 6;
|
|
1881
|
+
const suspensionYearLabel = yearsElapsed <= 1 ? 'past year' : `past ${yearsElapsed} years`;
|
|
1621
1882
|
const handleSuspensionChange = ({ value }) => {
|
|
1622
1883
|
dispatchDriverSuspensionState({
|
|
1623
1884
|
type: mychoiceSdkStore.StoreFormCarDriverSuspensionActionTypes.FormCarDriverLicenceSuspensionSelect,
|
|
@@ -1690,7 +1951,7 @@ const BlockDriverSuspension = () => {
|
|
|
1690
1951
|
});
|
|
1691
1952
|
}
|
|
1692
1953
|
};
|
|
1693
|
-
return (jsxRuntime.jsxs("div", { className: "form-block-container", children: [jsxRuntime.jsx("h2", { className: isTheBig ? 'thebig-bold' : '', children: "Licence Suspensions" }), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleSuspensionChange, name: "licenceSuspension", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, licenceSuspension), title: `Has ${firstName} had a licence suspension within the
|
|
1954
|
+
return (jsxRuntime.jsxs("div", { className: "form-block-container", children: [jsxRuntime.jsx("h2", { className: isTheBig ? 'thebig-bold' : '', children: "Licence Suspensions" }), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleSuspensionChange, name: "licenceSuspension", defaultValue: getSelectedOption(mychoiceSdkComponents.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 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [licenceSuspensionList?.map(({ suspensionReason, suspensionYear, suspensionMonth, reinstatementYear, reinstatementMonth, }, index) => {
|
|
1694
1955
|
const defaultSuspensionDate = {
|
|
1695
1956
|
year: suspensionYear,
|
|
1696
1957
|
month: suspensionMonth,
|
|
@@ -1702,7 +1963,7 @@ const BlockDriverSuspension = () => {
|
|
|
1702
1963
|
const now = mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd');
|
|
1703
1964
|
const days = birthDay ? (+birthDay + 1) : 1;
|
|
1704
1965
|
const endDate = reinstatementYear && reinstatementMonth ? mychoiceSdkStore.addDayToDate(`${reinstatementYear}-${reinstatementMonth}`, days) : now;
|
|
1705
|
-
const currentMinDate = mychoiceSdkComponents.getMinDateByYears(mychoiceSdkComponents.getMinDate(birthDate, firstLicenceAge),
|
|
1966
|
+
const currentMinDate = mychoiceSdkComponents.getMinDateByYears(mychoiceSdkComponents.getMinDate(birthDate, firstLicenceAge), 6);
|
|
1706
1967
|
const currentEndDate = mychoiceSdkComponents.compareDates(endDate, currentMinDate) < 0 ? currentMinDate : endDate;
|
|
1707
1968
|
return (jsxRuntime.jsxs("div", { className: "list-block", children: [jsxRuntime.jsx("hr", {}), jsxRuntime.jsxs("div", { className: "list-item", children: [jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.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) }), jsxRuntime.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 }), jsxRuntime.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
|
|
1708
1969
|
? mychoiceSdkStore.addDayToDate(`${suspensionYear}-${suspensionMonth}`, days) : currentMinDate })] })] }, `suspension-${index}`));
|
|
@@ -1713,10 +1974,25 @@ const BlockDriverAccident = () => {
|
|
|
1713
1974
|
const { driverState, dispatchDriverAccidentState } = mychoiceSdkStore.useStoreFormCarDriverAccident();
|
|
1714
1975
|
const { dispatchDriverBaseState } = mychoiceSdkStore.useStoreFormCarDriverBase();
|
|
1715
1976
|
const { appConfigState: { appType } } = mychoiceSdkStore.useStoreAppConfig();
|
|
1977
|
+
const { discountState } = mychoiceSdkStore.useStoreFormCarDiscount();
|
|
1978
|
+
const { isAlbertaProvince, isNovaScotiaProvince, isNewfoundlandProvince, isOntarioProvince } = mychoiceSdkStore.useProvince();
|
|
1716
1979
|
const isTheBig = appType === mychoiceSdkComponents.AppTypes.TheBig;
|
|
1980
|
+
const accidentYearCap = isTheBig || isAlbertaProvince || isNovaScotiaProvince || isNewfoundlandProvince ? 10 : 25;
|
|
1717
1981
|
const { accident, accidentList = [] } = driverState.items[driverState.activeIndex];
|
|
1718
|
-
const { firstName, birthYear, birthMonth, birthDay, licenceInfo: { firstLicenceAge }, } = driverState.items[driverState.activeIndex];
|
|
1982
|
+
const { firstName, birthYear, birthMonth, birthDay, licenceInfo: { firstLicenceAge, licenceType, g1LicenceYear, g1LicenceMonth, g2LicenceYear, g2LicenceMonth, gLicenceYear, gLicenceMonth, }, } = driverState.items[driverState.activeIndex];
|
|
1719
1983
|
const birthDate = birthYear && birthMonth && birthDay ? `${birthYear}-${birthMonth}-${birthDay}` : '';
|
|
1984
|
+
const getOntarioQ1Date = () => {
|
|
1985
|
+
if (licenceType === mychoiceSdkComponents.DriverLicenceTypes.G2)
|
|
1986
|
+
return g2LicenceYear && g2LicenceMonth ? `${g2LicenceYear}-${g2LicenceMonth}-01` : '';
|
|
1987
|
+
if (licenceType === mychoiceSdkComponents.DriverLicenceTypes.G)
|
|
1988
|
+
return gLicenceYear && gLicenceMonth ? `${gLicenceYear}-${gLicenceMonth}-01` : '';
|
|
1989
|
+
return g1LicenceYear && g1LicenceMonth ? `${g1LicenceYear}-${g1LicenceMonth}-01` : '';
|
|
1990
|
+
};
|
|
1991
|
+
const ontarioQ1Date = isOntarioProvince && mychoiceSdkComponents.isMyChoiceLike(appType) ? getOntarioQ1Date() : '';
|
|
1992
|
+
const earliestLicenceDate = ontarioQ1Date || (birthDate && firstLicenceAge ? mychoiceSdkComponents.addYearsToDate(birthDate, +firstLicenceAge) : '');
|
|
1993
|
+
const policyStart = discountState.policyStart || mychoiceSdkComponents.getFormattedDate('', 'yyyy-MM-dd');
|
|
1994
|
+
const yearsElapsed = earliestLicenceDate ? Math.min(mychoiceSdkComponents.getDifferenceInYears(policyStart, earliestLicenceDate), accidentYearCap) : accidentYearCap;
|
|
1995
|
+
const accidentYearLabel = yearsElapsed <= 1 ? 'past year' : `past ${yearsElapsed} years`;
|
|
1720
1996
|
const handleAccidentChange = ({ value }) => {
|
|
1721
1997
|
dispatchDriverAccidentState({
|
|
1722
1998
|
type: mychoiceSdkStore.StoreFormCarDriverAccidentActionTypes.FormCarDriverAccidentSelect,
|
|
@@ -1760,27 +2036,28 @@ const BlockDriverAccident = () => {
|
|
|
1760
2036
|
});
|
|
1761
2037
|
}
|
|
1762
2038
|
};
|
|
1763
|
-
return (jsxRuntime.jsxs("div", { className: "form-block-container", children: [jsxRuntime.jsx("h2", { className: isTheBig ? 'thebig-bold' : '', children: "Accidents" }), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleAccidentChange, name: "accident", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, accident), title: `Has ${firstName}
|
|
2039
|
+
return (jsxRuntime.jsxs("div", { className: "form-block-container", children: [jsxRuntime.jsx("h2", { className: isTheBig ? 'thebig-bold' : '', children: "Accidents" }), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleAccidentChange, name: "accident", defaultValue: getSelectedOption(mychoiceSdkComponents.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 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [accidentList?.map(({ accidentYear, accidentMonth, }, index) => {
|
|
1764
2040
|
const defaultSuspensionDate = {
|
|
1765
2041
|
year: accidentYear,
|
|
1766
2042
|
month: accidentMonth,
|
|
1767
2043
|
day: '01',
|
|
1768
2044
|
};
|
|
1769
|
-
return (jsxRuntime.jsxs("div", { className: "list-block", children: [jsxRuntime.jsx("hr", {}), jsxRuntime.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: mychoiceSdkComponents.getMinDate(birthDate, firstLicenceAge) })] }, `accident-${index}`));
|
|
2045
|
+
return (jsxRuntime.jsxs("div", { className: "list-block", children: [jsxRuntime.jsx("hr", {}), jsxRuntime.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: mychoiceSdkComponents.getMinDateByYears(ontarioQ1Date || mychoiceSdkComponents.getMinDate(birthDate, firstLicenceAge), accidentYearCap) })] }, `accident-${index}`));
|
|
1770
2046
|
}), accidentList?.length < 3 && (jsxRuntime.jsx(mychoiceSdkComponents.ButtonBase, { category: mychoiceSdkComponents.CategoryTypes.Filled, onClick: handleAddButtonClick, size: mychoiceSdkComponents.SizeTypes.Medium, color: mychoiceSdkComponents.ColorTypes.Primary, label: "Add another" }))] }))] }));
|
|
1771
2047
|
};
|
|
1772
2048
|
|
|
1773
2049
|
/**
|
|
1774
|
-
* Filter out G1/G2 options from "
|
|
2050
|
+
* Filter out G1/G2 options (ALC, RB) from the "Criminal" section for trafficTicketsGroupOptions
|
|
1775
2051
|
*/
|
|
1776
2052
|
const getTrafficTicketsGroupOptionsWithoutG1G2 = () => {
|
|
1777
2053
|
const excludeOptions = ['ALC', 'RB'];
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1783
|
-
|
|
2054
|
+
return mychoiceSdkComponents.trafficTicketsGroupOptions.map((group) => {
|
|
2055
|
+
if (group.label !== 'Criminal')
|
|
2056
|
+
return group;
|
|
2057
|
+
return {
|
|
2058
|
+
...group,
|
|
2059
|
+
options: group.options.filter((option) => !excludeOptions.includes(option.value)),
|
|
2060
|
+
};
|
|
1784
2061
|
});
|
|
1785
2062
|
};
|
|
1786
2063
|
|
|
@@ -1793,11 +2070,43 @@ const BlockDriverTicket = () => {
|
|
|
1793
2070
|
const isTheBig = appType === mychoiceSdkComponents.AppTypes.TheBig;
|
|
1794
2071
|
const { firstName, minMaxDates, } = driverState.items[driverState.activeIndex];
|
|
1795
2072
|
const { gOneMin } = minMaxDates;
|
|
2073
|
+
// Each speeding tier is tagged with the picklist section it belongs to.
|
|
2074
|
+
// The tier itself determines the Fortus <Speed> and <Severity>, so no speed is asked of the user.
|
|
2075
|
+
const getSpeedingOptions = () => {
|
|
2076
|
+
if (isNovaScotiaProvince) {
|
|
2077
|
+
return [
|
|
2078
|
+
{ value: 'SP_NS_MINOR', name: 'Speeding 1 to 30 kph over limit', section: 'Minor' },
|
|
2079
|
+
{ value: 'SP_NS_MAJOR', name: 'Speeding 31 to 50 kph over limit', section: 'Major' },
|
|
2080
|
+
{ value: 'SP_NS_CRIMINAL', name: 'Speeding 51 kph or more over limit', section: 'Criminal' },
|
|
2081
|
+
];
|
|
2082
|
+
}
|
|
2083
|
+
if (isAlbertaProvince || isNewfoundlandProvince) {
|
|
2084
|
+
return [
|
|
2085
|
+
{ value: 'SP_MINOR', name: 'Speeding 1 to 50 kph over limit', section: 'Minor' },
|
|
2086
|
+
{ value: 'SP_51_CRIMINAL', name: 'Speeding 51 kph or more over limit', section: 'Criminal' },
|
|
2087
|
+
];
|
|
2088
|
+
}
|
|
2089
|
+
return [
|
|
2090
|
+
{ value: 'SP_MINOR', name: 'Speeding 1 to 49 kph over limit', section: 'Minor' },
|
|
2091
|
+
{ value: 'SP_50_CRIMINAL', name: 'Speeding 50 kph or more over limit', section: 'Criminal' },
|
|
2092
|
+
];
|
|
2093
|
+
};
|
|
1796
2094
|
const getTrafficTicketsGroupOptions = () => {
|
|
1797
|
-
|
|
1798
|
-
|
|
1799
|
-
|
|
1800
|
-
|
|
2095
|
+
const base = (isAlbertaProvince || isNewBrunswickProvince || isNovaScotiaProvince || isNewfoundlandProvince) && isTheBig
|
|
2096
|
+
? getTrafficTicketsGroupOptionsWithoutG1G2()
|
|
2097
|
+
: mychoiceSdkComponents.trafficTicketsGroupOptions;
|
|
2098
|
+
const speedingOptions = getSpeedingOptions();
|
|
2099
|
+
const toOption = ({ value, name }) => ({ value, name });
|
|
2100
|
+
return base.map((group) => {
|
|
2101
|
+
// Drop the generic "Speeding" entry; tiers are injected per section below.
|
|
2102
|
+
const options = group.options.filter((opt) => !(opt.value === 'SP' && opt.name === 'Speeding'));
|
|
2103
|
+
// Each tier appears in the Common section and in its matching severity section.
|
|
2104
|
+
const tiersForGroup = speedingOptions.filter((tier) => group.label === 'Common' || group.label === tier.section);
|
|
2105
|
+
return {
|
|
2106
|
+
...group,
|
|
2107
|
+
options: [...options, ...tiersForGroup.map(toOption)],
|
|
2108
|
+
};
|
|
2109
|
+
});
|
|
1801
2110
|
};
|
|
1802
2111
|
const handleTicketChange = ({ value }) => {
|
|
1803
2112
|
dispatchDriverTicketState({
|
|
@@ -1951,12 +2260,14 @@ const getDynamicLicenceBoxProps = ({ isAlbertaProvince, isOntarioProvince, isNew
|
|
|
1951
2260
|
const SectionDiscountInfo$1 = () => {
|
|
1952
2261
|
const { appConfigState: { appType }, } = mychoiceSdkStore.useStoreAppConfig();
|
|
1953
2262
|
const allProvinces = mychoiceSdkStore.useProvince();
|
|
2263
|
+
const { isAlbertaProvince } = allProvinces;
|
|
1954
2264
|
const isTheBig = appType === mychoiceSdkComponents.AppTypes.TheBig;
|
|
1955
2265
|
const mychoiceCls = mychoiceSdkComponents.isMyChoiceLike(appType) ? 'mychoice' : '';
|
|
1956
2266
|
const { discountState, dispatchDiscountState } = mychoiceSdkStore.useStoreFormCarDiscount();
|
|
1957
2267
|
const { validateEmail, errorMessage } = mychoiceSdkStore.useHandlerCarQuoterEmail();
|
|
2268
|
+
const { validatePhone, errorMessage: phoneErrorMessage } = mychoiceSdkStore.useHandlerCarQuoterPhone();
|
|
1958
2269
|
const { multiplePoliciesDiscount, appInstallDiscount, caaMemberDiscount, quoterInfo, emailTo: { email, emailStatus }, } = discountState;
|
|
1959
|
-
const { firstName, lastName, phone, driverLicense = '', caslConsent } = quoterInfo;
|
|
2270
|
+
const { firstName, lastName, phone, phoneStatus, driverLicense = '', caslConsent } = quoterInfo;
|
|
1960
2271
|
const handleMultiplePolicyChange = ({ value }) => {
|
|
1961
2272
|
dispatchDiscountState({
|
|
1962
2273
|
type: mychoiceSdkStore.StoreFormCarDiscountActionTypes.FormCarDiscountMultiplePoliciesSelect,
|
|
@@ -1994,10 +2305,16 @@ const SectionDiscountInfo$1 = () => {
|
|
|
1994
2305
|
});
|
|
1995
2306
|
};
|
|
1996
2307
|
const handlePhoneNumberChange = ({ value }) => {
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
}
|
|
2308
|
+
const digits = value.replace(/\D/g, '');
|
|
2309
|
+
if (digits.length === 10) {
|
|
2310
|
+
validatePhone(value);
|
|
2311
|
+
}
|
|
2312
|
+
else {
|
|
2313
|
+
dispatchDiscountState({
|
|
2314
|
+
type: mychoiceSdkStore.StoreFormCarDiscountActionTypes.FormCarDiscountQuoterPhoneStatusSet,
|
|
2315
|
+
payload: { phone: value, phoneStatus: mychoiceSdkComponents.ValidationStatusTypes.Initial },
|
|
2316
|
+
});
|
|
2317
|
+
}
|
|
2001
2318
|
};
|
|
2002
2319
|
const handleEmailChange = ({ value }) => {
|
|
2003
2320
|
validateEmail(value);
|
|
@@ -2008,7 +2325,11 @@ const SectionDiscountInfo$1 = () => {
|
|
|
2008
2325
|
payload: { caslConsent: value },
|
|
2009
2326
|
});
|
|
2010
2327
|
};
|
|
2011
|
-
return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [isTheBig ? (jsxRuntime.jsx(LabelFormBox, { title: "You are seconds away from receiving your car insurance quotes,\n please provide your email after completing the discount section so we\n can send you your personalized free car insurance quotes!" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h2", { className: "section-title", children: "A little extra info for discounts and connecting you with our partners." }), jsxRuntime.jsx("span", { className: "info-title-message", children: "You are seconds away from receiving your car insurance quotes, please provide your email after completing the discount section so we can send you your personalized free car insurance quotes!" })] })), jsxRuntime.jsx(BlockVehLinks, {}), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleMultiplePolicyChange, name: "multiplePoliciesDiscount", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, multiplePoliciesDiscount), title: "You could receive a 10-15% discount for bundling insurance with multiple policies with the same insurance company. Does that interest you?", description: "Bundling your home and auto insurance can save you significantly on insurance premiums as a whole package. Do you want to learn more about the benefits of multiple policies for home, tenant, condo, or car insurance? All you have to do is select yes.." }), !isTheBig && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleCaaMemberChange, name: "caaMemberDiscount", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, caaMemberDiscount), title: "Please indicate if you are a member of CAA, you could save up to an additional 20%." })), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleAppInstallChange, name: "appInstallDiscount", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, appInstallDiscount), title: "You could receive up to a 30% discount by using an app to track driving habits. Does that interest you?", description: "Get rewarded for safe driving with the click of a button. If you install the app, you may be eligible for a 30% discount on your insurance premiums. Typically, you receive 10% of the discount upfront and the balance after six months of good driving." }), isTheBig ? (jsxRuntime.jsxs("div", { className: "input-form-box-container", children: [jsxRuntime.jsx(LabelFormBox, { title: "Complete this form to see all your personalized\n quotes on the next page, you will also be able to:" }), jsxRuntime.jsxs("ol", { className: "ordered-block", children: [jsxRuntime.jsx("li", { children: "See what rates insurance carriers are offering" }), jsxRuntime.jsx("li", { children: "Get in touch with us and secure your rate" }), jsxRuntime.jsx("li", { children: "Potentially save more by speaking with a broker" })] })] })) : (jsxRuntime.jsx("h2", { children: "Complete the form below to see which companies are offering your quotes." })), jsxRuntime.jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Your First Name", error: !firstName && discountState.inValidation, errorMessage: getErrorMessage(firstName, discountState.inValidation) }), jsxRuntime.jsx(InputFormBox, { name: "lastname", title: "Last Name", onChange: handleLastNameChange, defaultValue: lastName, placeholder: "Your Last Name", error: !lastName && discountState.inValidation, errorMessage: getErrorMessage(lastName, discountState.inValidation) }), isTheBig && (jsxRuntime.jsx(InputFormLicenceBox, { ...getDynamicLicenceBoxProps({ ...allProvinces }), name: "driverLicense", title: "Driver Licence Number (Optional)", onChange: handleDriverLicenseChange, defaultValue: driverLicense, description: "Enter your drivers licence number in to receive a more accurate, prequalified quote from our broker partners. This will enable you to provide less details over the phone if you choose to have a broker contact you. This is an optional input." })), jsxRuntime.jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(855) 325-8444",
|
|
2328
|
+
return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [isTheBig ? (jsxRuntime.jsx(LabelFormBox, { title: "You are seconds away from receiving your car insurance quotes,\n please provide your email after completing the discount section so we\n can send you your personalized free car insurance quotes!" })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h2", { className: "section-title", children: "A little extra info for discounts and connecting you with our partners." }), jsxRuntime.jsx("span", { className: "info-title-message", children: "You are seconds away from receiving your car insurance quotes, please provide your email after completing the discount section so we can send you your personalized free car insurance quotes!" })] })), jsxRuntime.jsx(BlockVehLinks, {}), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleMultiplePolicyChange, name: "multiplePoliciesDiscount", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, multiplePoliciesDiscount), title: "You could receive a 10-15% discount for bundling insurance with multiple policies with the same insurance company. Does that interest you?", description: "Bundling your home and auto insurance can save you significantly on insurance premiums as a whole package. Do you want to learn more about the benefits of multiple policies for home, tenant, condo, or car insurance? All you have to do is select yes.." }), !isTheBig && !isAlbertaProvince && (jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleCaaMemberChange, name: "caaMemberDiscount", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, caaMemberDiscount), title: "Please indicate if you are a member of CAA, you could save up to an additional 20%." })), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleAppInstallChange, name: "appInstallDiscount", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, appInstallDiscount), title: "You could receive up to a 30% discount by using an app to track driving habits. Does that interest you?", description: "Get rewarded for safe driving with the click of a button. If you install the app, you may be eligible for a 30% discount on your insurance premiums. Typically, you receive 10% of the discount upfront and the balance after six months of good driving." }), isTheBig ? (jsxRuntime.jsxs("div", { className: "input-form-box-container", children: [jsxRuntime.jsx(LabelFormBox, { title: "Complete this form to see all your personalized\n quotes on the next page, you will also be able to:" }), jsxRuntime.jsxs("ol", { className: "ordered-block", children: [jsxRuntime.jsx("li", { children: "See what rates insurance carriers are offering" }), jsxRuntime.jsx("li", { children: "Get in touch with us and secure your rate" }), jsxRuntime.jsx("li", { children: "Potentially save more by speaking with a broker" })] })] })) : (jsxRuntime.jsx("h2", { children: "Complete the form below to see which companies are offering your quotes." })), jsxRuntime.jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Your First Name", error: !firstName && discountState.inValidation, errorMessage: getErrorMessage(firstName, discountState.inValidation) }), jsxRuntime.jsx(InputFormBox, { name: "lastname", title: "Last Name", onChange: handleLastNameChange, defaultValue: lastName, placeholder: "Your Last Name", error: !lastName && discountState.inValidation, errorMessage: getErrorMessage(lastName, discountState.inValidation) }), isTheBig && (jsxRuntime.jsx(InputFormLicenceBox, { ...getDynamicLicenceBoxProps({ ...allProvinces }), name: "driverLicense", title: "Driver Licence Number (Optional)", onChange: handleDriverLicenseChange, defaultValue: driverLicense, description: "Enter your drivers licence number in to receive a more accurate, prequalified quote from our broker partners. This will enable you to provide less details over the phone if you choose to have a broker contact you. This is an optional input." })), jsxRuntime.jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(855) 325-8444", validationStatus: phoneStatus, error: phoneStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
|
|
2329
|
+
|| (phoneStatus === mychoiceSdkComponents.ValidationStatusTypes.Initial && discountState.inValidation)
|
|
2330
|
+
|| (!phone && discountState.inValidation), errorMessage: phoneStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
|
|
2331
|
+
? phoneErrorMessage
|
|
2332
|
+
: getErrorMessage(phone, discountState.inValidation) || (discountState.inValidation ? 'Enter a valid phone number.' : '') }), jsxRuntime.jsx(InputFormEmailBox, { validationStatus: emailStatus, errorMessage: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
|
|
2012
2333
|
? errorMessage
|
|
2013
2334
|
: getErrorMessage(email, discountState.inValidation), error: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined || (!email && discountState.inValidation), name: "email", title: "Please share your email address with us, we'll use it to send you a copy of your quotes.", description: "We will provide you with your insurance quotes immediately after this form completion. If you are not ready to apply today, don\u2019t worry as we will be emailing your quotes to you if you\u2019d like to complete at a later date with the help of one of our trusted broker partners.", onChange: handleEmailChange, defaultValue: email, placeholder: mychoiceSdkComponents.getPlaceholderEmail(appType) }), isTheBig && (jsxRuntime.jsx(mychoiceSdkComponents.CheckboxForm, { className: "casl-consent", name: "caslConsent", label: "Yes, I consent to receiving emails from the Billyard Insurance Group.\n I understand that I can unsubscribe at any time", onChange: handleCaslConsentChange, defaultValue: caslConsent })), jsxRuntime.jsx(BlockSubmit$2, { className: isTheBig ? 'thebig-bold' : 'mychoice' }), jsxRuntime.jsx(BlockNextPageInfo$2, {})] }));
|
|
2014
2335
|
};
|
|
@@ -3193,8 +3514,9 @@ const SectionDiscountInfo = () => {
|
|
|
3193
3514
|
const { discountState, dispatchDiscountState } = mychoiceSdkStore.useStoreFormHomeDiscount();
|
|
3194
3515
|
// const { applicantState, dispatchApplicantInfoState } = useStoreFormHomeApplicantInfo();
|
|
3195
3516
|
const { validateEmail, errorMessage } = mychoiceSdkStore.useHandlerHomeQuoterEmail();
|
|
3517
|
+
const { validatePhone, errorMessage: phoneErrorMessage } = mychoiceSdkStore.useHandlerHomeQuoterPhone();
|
|
3196
3518
|
const { multiplePoliciesDiscount, emailTo: { email, emailStatus }, quoterInfo = {}, } = discountState;
|
|
3197
|
-
const { firstName = '', lastName = '', phone = '', caslConsent } = quoterInfo;
|
|
3519
|
+
const { firstName = '', lastName = '', phone = '', phoneStatus, caslConsent } = quoterInfo;
|
|
3198
3520
|
const handleMultiplePolicyChange = ({ value }) => {
|
|
3199
3521
|
dispatchDiscountState({
|
|
3200
3522
|
type: mychoiceSdkStore.StoreFormHomeDiscountActionTypes.FormHomeDiscountMultiplePoliciesSelect,
|
|
@@ -3214,10 +3536,16 @@ const SectionDiscountInfo = () => {
|
|
|
3214
3536
|
});
|
|
3215
3537
|
};
|
|
3216
3538
|
const handlePhoneNumberChange = ({ value }) => {
|
|
3217
|
-
|
|
3218
|
-
|
|
3219
|
-
|
|
3220
|
-
}
|
|
3539
|
+
const digits = value.replace(/\D/g, '');
|
|
3540
|
+
if (digits.length === 10) {
|
|
3541
|
+
validatePhone(value);
|
|
3542
|
+
}
|
|
3543
|
+
else {
|
|
3544
|
+
dispatchDiscountState({
|
|
3545
|
+
type: mychoiceSdkStore.StoreFormHomeDiscountActionTypes.FormHomeQuoterPhoneStatusSet,
|
|
3546
|
+
payload: { phone: value, phoneStatus: mychoiceSdkComponents.ValidationStatusTypes.Initial },
|
|
3547
|
+
});
|
|
3548
|
+
}
|
|
3221
3549
|
};
|
|
3222
3550
|
const handleEmailChange = ({ value }) => {
|
|
3223
3551
|
validateEmail(value);
|
|
@@ -3230,7 +3558,11 @@ const SectionDiscountInfo = () => {
|
|
|
3230
3558
|
};
|
|
3231
3559
|
return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsxRuntime.jsx("h2", { className: "section-title", children: "A little extra info for discounts and connecting you with our partners." }), isTheBig ? (jsxRuntime.jsx(LabelFormBox, { title: `You are seconds away from receiving your ${insuranceType} insurance quotes, please provide your email after completing the discount section so we can send you your personalized free ${insuranceType} insurance quotes!` })) : (jsxRuntime.jsx("span", { className: "info-title-message", children: `You are seconds away from receiving your ${insuranceType} insurance quotes,
|
|
3232
3560
|
please provide your email after completing the discount section so we
|
|
3233
|
-
can send you your personalized free ${insuranceType} insurance quotes!` })), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleMultiplePolicyChange, name: "multiplePoliciesDiscount", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, multiplePoliciesDiscount), title: "You could potentially save up to 18% more. Would you consider consolidating multiple policies (like auto insurance) with the same provider?", description: "Most insurers offer discounts to consumers who purchase multiple policies. Select \u2018yes\u2019 if you\u2019d like to bundle your home and auto insurance policies." }), jsxRuntime.jsx(BlockDwellingInfo, {}), jsxRuntime.jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Your First Name", error: !firstName && discountState.inValidation, errorMessage: getErrorMessage(firstName, discountState.inValidation) }), jsxRuntime.jsx(InputFormBox, { name: "lastName", title: "Last Name", onChange: handleLastNameChange, defaultValue: lastName, placeholder: "Your Last Name", error: !lastName && discountState.inValidation, errorMessage: getErrorMessage(lastName, discountState.inValidation) }), jsxRuntime.jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(855) 325-8444",
|
|
3561
|
+
can send you your personalized free ${insuranceType} insurance quotes!` })), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.yesNoOptions, onChange: handleMultiplePolicyChange, name: "multiplePoliciesDiscount", defaultValue: getSelectedOption(mychoiceSdkComponents.yesNoOptions, multiplePoliciesDiscount), title: "You could potentially save up to 18% more. Would you consider consolidating multiple policies (like auto insurance) with the same provider?", description: "Most insurers offer discounts to consumers who purchase multiple policies. Select \u2018yes\u2019 if you\u2019d like to bundle your home and auto insurance policies." }), jsxRuntime.jsx(BlockDwellingInfo, {}), jsxRuntime.jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Your First Name", error: !firstName && discountState.inValidation, errorMessage: getErrorMessage(firstName, discountState.inValidation) }), jsxRuntime.jsx(InputFormBox, { name: "lastName", title: "Last Name", onChange: handleLastNameChange, defaultValue: lastName, placeholder: "Your Last Name", error: !lastName && discountState.inValidation, errorMessage: getErrorMessage(lastName, discountState.inValidation) }), jsxRuntime.jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(855) 325-8444", validationStatus: phoneStatus, error: phoneStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
|
|
3562
|
+
|| (phoneStatus === mychoiceSdkComponents.ValidationStatusTypes.Initial && discountState.inValidation)
|
|
3563
|
+
|| (!phone && discountState.inValidation), errorMessage: phoneStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
|
|
3564
|
+
? phoneErrorMessage
|
|
3565
|
+
: getErrorMessage(phone, discountState.inValidation) || (discountState.inValidation ? 'Enter a valid phone number.' : '') }), jsxRuntime.jsx(InputFormEmailBox, { validationStatus: emailStatus, name: "email", title: "Please share your email address with us, we'll use it to send you a copy of your quotes.", description: "We will provide you with your insurance quotes immediately after this form completion. If you are not ready to apply today, don\u2019t worry as we will be emailing your quotes to you if you\u2019d like to complete at a later date with the help of one of our trusted broker partners.", onChange: handleEmailChange, defaultValue: email, placeholder: mychoiceSdkComponents.getPlaceholderEmail(appType), errorMessage: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
|
|
3234
3566
|
? errorMessage
|
|
3235
3567
|
: getErrorMessage(email, discountState.inValidation), error: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined || (!email && discountState.inValidation) }), isTheBig && (jsxRuntime.jsx(mychoiceSdkComponents.CheckboxForm, { className: "casl-consent", name: "caslConsent", label: "Yes, I consent to receiving emails from the Billyard Insurance Group.\n I understand that I can unsubscribe at any time", onChange: handleCaslConsentChange, defaultValue: caslConsent })), jsxRuntime.jsx(BlockSubmit$1, { className: isTheBig ? 'thebig-bold' : 'mychoice' }), jsxRuntime.jsx(BlockNextPageInfo$1, {})] }));
|
|
3236
3568
|
};
|
|
@@ -3552,8 +3884,9 @@ const SectionApplicant = () => {
|
|
|
3552
3884
|
const isTheBig = appType === mychoiceSdkComponents.AppTypes.TheBig;
|
|
3553
3885
|
const { applicantState, dispatchApplicantState } = mychoiceSdkStore.useStoreFormLifeApplicant();
|
|
3554
3886
|
const { validateEmail, errorMessage } = mychoiceSdkStore.useHandlerLifeQuoterEmail();
|
|
3887
|
+
const { validatePhone, errorMessage: phoneErrorMessage } = mychoiceSdkStore.useHandlerLifeQuoterPhone();
|
|
3555
3888
|
const { birthYear, birthMonth, birthDay, gender, smoker, quoterInfo, emailTo: { email, emailStatus }, inValidation, } = applicantState;
|
|
3556
|
-
const { firstName, lastName, phone } = quoterInfo || {};
|
|
3889
|
+
const { firstName, lastName, phone, phoneStatus } = quoterInfo || {};
|
|
3557
3890
|
const defaultDateOfBirth = {
|
|
3558
3891
|
day: birthDay,
|
|
3559
3892
|
month: birthMonth,
|
|
@@ -3604,10 +3937,16 @@ const SectionApplicant = () => {
|
|
|
3604
3937
|
});
|
|
3605
3938
|
};
|
|
3606
3939
|
const handlePhoneNumberChange = ({ value }) => {
|
|
3607
|
-
|
|
3608
|
-
|
|
3609
|
-
|
|
3610
|
-
}
|
|
3940
|
+
const digits = value.replace(/\D/g, '');
|
|
3941
|
+
if (digits.length === 10) {
|
|
3942
|
+
validatePhone(value);
|
|
3943
|
+
}
|
|
3944
|
+
else {
|
|
3945
|
+
dispatchApplicantState({
|
|
3946
|
+
type: mychoiceSdkStore.StoreFormLifeApplicantActionTypes.FormLifeQuoterPhoneStatusSet,
|
|
3947
|
+
payload: { phone: value, phoneStatus: mychoiceSdkComponents.ValidationStatusTypes.Initial },
|
|
3948
|
+
});
|
|
3949
|
+
}
|
|
3611
3950
|
};
|
|
3612
3951
|
const handleEmailChange = ({ value }) => {
|
|
3613
3952
|
validateEmail(value);
|
|
@@ -3627,7 +3966,11 @@ const SectionApplicant = () => {
|
|
|
3627
3966
|
textAlign: 'center',
|
|
3628
3967
|
fontSize: '1.15rem',
|
|
3629
3968
|
marginTop: '10px',
|
|
3630
|
-
}, children: `Canadians have compared rates in the last 24 hours and saved ${savedPercentage}% on average` })] }), jsxRuntime.jsx("h2", { className: "section-title", style: { textAlign: 'center' }, children: `${lockEmoji} Complete the form below to see which companies are offering your quotes.` }), jsxRuntime.jsx("span", { className: "info-title-message", children: "You are seconds away from receiving your life insurance quotes, please provide your email after completing the final steps so we can send you your personalized free life insurance quotes!" }), jsxRuntime.jsx(DateSelectFormBox, { name: "dateOfBirth", dateNames: ['birthYear', 'birthMonth', 'birthDay'], onDateChange: handleDateOfBirthChange, defaultValue: defaultDateOfBirth, title: "Date of birth", error: inValidation, errorMessage: getDateErrorMessage([birthDay || '', birthMonth || '', birthYear || ''], inValidation), maxDate: mychoiceSdkComponents.subYearsFromDate('', 14), isDay: true }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.genderOptions, name: "gender", onChange: handleGenderChange, defaultValue: getSelectedOption(mychoiceSdkComponents.genderOptions, gender), title: "Gender", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !gender && inValidation, errorMessage: getErrorMessage(`${gender}`.toString(), inValidation) }), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.smokerOptions, onChange: handleSmokerChange, name: "smoker", defaultValue: getSelectedOption(mychoiceSdkComponents.smokerOptions, smoker), title: "Smoker" }), isTheBig && (jsxRuntime.jsxs("div", { className: "input-form-box-container", children: [jsxRuntime.jsx(LabelFormBox, { title: "Complete this form to see all your personalized\n quotes on the next page, you will also be able to:" }), jsxRuntime.jsxs("ol", { className: "ordered-block", children: [jsxRuntime.jsx("li", { children: "See what rates insurance carriers are offering" }), jsxRuntime.jsx("li", { children: "Get in touch with us and secure your rate" }), jsxRuntime.jsx("li", { children: "Potentially save more by speaking with a broker" })] })] })), jsxRuntime.jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Your First Name", error: !firstName && inValidation, errorMessage: getErrorMessage(firstName, inValidation) }), jsxRuntime.jsx(InputFormBox, { name: "lastname", title: "Last Name", onChange: handleLastNameChange, defaultValue: lastName, placeholder: "Your Last Name", error: !lastName && inValidation, errorMessage: getErrorMessage(lastName, inValidation) }), jsxRuntime.jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(855) 325-8444",
|
|
3969
|
+
}, children: `Canadians have compared rates in the last 24 hours and saved ${savedPercentage}% on average` })] }), jsxRuntime.jsx("h2", { className: "section-title", style: { textAlign: 'center' }, children: `${lockEmoji} Complete the form below to see which companies are offering your quotes.` }), jsxRuntime.jsx("span", { className: "info-title-message", children: "You are seconds away from receiving your life insurance quotes, please provide your email after completing the final steps so we can send you your personalized free life insurance quotes!" }), jsxRuntime.jsx(DateSelectFormBox, { name: "dateOfBirth", dateNames: ['birthYear', 'birthMonth', 'birthDay'], onDateChange: handleDateOfBirthChange, defaultValue: defaultDateOfBirth, title: "Date of birth", error: inValidation, errorMessage: getDateErrorMessage([birthDay || '', birthMonth || '', birthYear || ''], inValidation), maxDate: mychoiceSdkComponents.subYearsFromDate('', 14), isDay: true }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.genderOptions, name: "gender", onChange: handleGenderChange, defaultValue: getSelectedOption(mychoiceSdkComponents.genderOptions, gender), title: "Gender", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !gender && inValidation, errorMessage: getErrorMessage(`${gender}`.toString(), inValidation) }), jsxRuntime.jsx(SwitchButtonBox, { items: mychoiceSdkComponents.smokerOptions, onChange: handleSmokerChange, name: "smoker", defaultValue: getSelectedOption(mychoiceSdkComponents.smokerOptions, smoker), title: "Smoker" }), isTheBig && (jsxRuntime.jsxs("div", { className: "input-form-box-container", children: [jsxRuntime.jsx(LabelFormBox, { title: "Complete this form to see all your personalized\n quotes on the next page, you will also be able to:" }), jsxRuntime.jsxs("ol", { className: "ordered-block", children: [jsxRuntime.jsx("li", { children: "See what rates insurance carriers are offering" }), jsxRuntime.jsx("li", { children: "Get in touch with us and secure your rate" }), jsxRuntime.jsx("li", { children: "Potentially save more by speaking with a broker" })] })] })), jsxRuntime.jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Your First Name", error: !firstName && inValidation, errorMessage: getErrorMessage(firstName, inValidation) }), jsxRuntime.jsx(InputFormBox, { name: "lastname", title: "Last Name", onChange: handleLastNameChange, defaultValue: lastName, placeholder: "Your Last Name", error: !lastName && inValidation, errorMessage: getErrorMessage(lastName, inValidation) }), jsxRuntime.jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(855) 325-8444", validationStatus: phoneStatus, error: phoneStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
|
|
3970
|
+
|| (phoneStatus === mychoiceSdkComponents.ValidationStatusTypes.Initial && inValidation)
|
|
3971
|
+
|| (!phone && inValidation), errorMessage: phoneStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
|
|
3972
|
+
? phoneErrorMessage
|
|
3973
|
+
: getErrorMessage(phone, inValidation) || (inValidation ? 'Enter a valid phone number.' : '') }), jsxRuntime.jsx(InputFormEmailBox, { validationStatus: emailStatus, name: "email", title: "Please provide your email address so we can send you a copy of your quotes", onChange: handleEmailChange, defaultValue: email, placeholder: mychoiceSdkComponents.getPlaceholderEmail(appType), errorMessage: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
|
|
3631
3974
|
? errorMessage
|
|
3632
3975
|
: getErrorMessage(email, inValidation), error: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined || (!email && inValidation) }), jsxRuntime.jsx(BlockSubmit, { className: isTheBig ? 'thebig-bold' : '' }), jsxRuntime.jsx(BlockNextPageInfo, {})] }));
|
|
3633
3976
|
};
|