@mychoice/mychoice-sdk-modules 2.1.14 → 2.1.16

package/dist/cjs/index.js

@@ -248,9 +248,13 @@ HeaderMyChoiceMobile.defaultProps = {
     className: '',
 };
 
+const LoaderVid = () => (
+// eslint-disable-next-line jsx-a11y/media-has-caption
+jsxRuntime.jsx("video", { src: "https://mychoice.ca/wp-content/uploads/2023/05/Pig-Video.mp4", autoPlay: true, loop: true, muted: true, preload: "auto", style: { maxHeight: '400px' } }));
+
 const LoaderPrimary = () => {
     const { appLoaderState } = mychoiceSdkStore.useStoreAppLoader();
-    return (jsxRuntime.jsxs("div", { className: "loader-wrapper", children: [!!appLoaderState.description && jsxRuntime.jsx("h4", { children: appLoaderState.description }), jsxRuntime.jsx(mychoiceSdkComponents.IconLoaderPrimary, {})] }));
+    return (jsxRuntime.jsxs("div", { className: "loader-wrapper", children: [jsxRuntime.jsx(LoaderVid, {}), !!appLoaderState.description && jsxRuntime.jsx("h4", { children: appLoaderState.description })] }));
 };
 
 const ModalConfirm = () => {
@@ -561,12 +565,7 @@ const BlockCarConditionInfo = () => {
 const VehicleSectionMain = () => {
     const { appConfigState: { appType } } = mychoiceSdkStore.useStoreAppConfig();
     const mychoiceCls = appType === mychoiceSdkComponents.AppTypes.MyChoice ? 'mychoice' : '';
-    const carEmoji = '\u{1F697}';
-    return (jsxRuntime.jsxs("div", { className: `form-section top-section ${mychoiceCls}`, children: [mychoiceCls && (jsxRuntime.jsx("h2", { style: {
-                    whiteSpace: 'normal',
-                    marginTop: '20px',
-                    textAlign: 'center',
-                }, children: `${carEmoji} Give us the scoop on your four-wheeled friend.` })), jsxRuntime.jsx(BlockCarInfo, {}), jsxRuntime.jsx(BlockCarConditionInfo, {})] }));
+    return (jsxRuntime.jsxs("div", { className: `form-section top-section ${mychoiceCls}`, children: [mychoiceCls && jsxRuntime.jsx("h2", { className: "section-title", children: "Give us the scoop on your four-wheeled friend." }), jsxRuntime.jsx(BlockCarInfo, {}), jsxRuntime.jsx(BlockCarConditionInfo, {})] }));
 };
 
 const VehicleSectionCoverage = () => {
@@ -795,8 +794,7 @@ const SectionDriverInfo = () => {
             payload: { applicantRelationship: value },
         });
     };
-    const inspectEmoji = '\u{1F50D}';
-    return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [mychoiceCls && jsxRuntime.jsx("h2", { className: "section-title", children: `${inspectEmoji} Time for a micro autobiography – 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
+    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) }))] }));
 };
 
@@ -1651,10 +1649,9 @@ const SectionDiscountInfo$1 = () => {
             payload: { caslConsent: value },
         });
     };
-    const moneyEmoji = '\u{1F4B0}';
     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: `${moneyEmoji} 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.." }), !(allProvinces.isAlbertaProvince && 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(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.." }), !(allProvinces.isAlbertaProvince && 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", error: !phone && discountState.inValidation, errorMessage: getErrorMessage(phone, discountState.inValidation) }), jsxRuntime.jsx(InputFormEmailBox, { validationStatus: emailStatus, errorMessage: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
@@ -2062,7 +2059,7 @@ const SectionAddress = () => {
         return isFocused ? '#8ED6DC' : borderColor;
     };
     const placeholderText = 'Type in Your Street Address';
-    return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.homeOwnerTypeOptions, name: "ownerType", onChange: handleOwnerTypeChange, defaultValue: insuranceType, title: "Type of Insurance", placeholder: "Select Type of Insurance", error: !insuranceType && inValidation, errorMessage: getErrorMessage(insuranceType, inValidation) }), jsxRuntime.jsxs("div", { className: "input-form-box-container", children: [jsxRuntime.jsx(LabelFormBox, { name: "homeAddress", title: "Home Address", subTitle: "The address should contain Street Address (example: '123 Main St'), City, Province Code, Postal Code, Country", description: "For your convenience, suggestions for your address will be displayed as you start typing. Please select an option from the list to continue. If you can\u2019t find your address in the list, please click \u201CI can\u2019t find my address. Let me type it in.\u201D and you will be directed to a page which will let you enter your address manually." }), jsxRuntime.jsx(GooglePlacesAutocomplete__default["default"], { autocompletionRequest: {
+    return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsxRuntime.jsx("h2", { className: "section-title", children: " Where do you reside and thrive? " }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.homeOwnerTypeOptions, name: "ownerType", onChange: handleOwnerTypeChange, defaultValue: insuranceType, title: "Type of Insurance", placeholder: "Select Type of Insurance", error: !insuranceType && inValidation, errorMessage: getErrorMessage(insuranceType, inValidation) }), jsxRuntime.jsxs("div", { className: "input-form-box-container", children: [jsxRuntime.jsx(LabelFormBox, { name: "homeAddress", title: "Home Address", subTitle: "The address should contain Street Address (example: '123 Main St'), City, Province Code, Postal Code, Country", description: "For your convenience, suggestions for your address will be displayed as you start typing. Please select an option from the list to continue. If you can\u2019t find your address in the list, please click \u201CI can\u2019t find my address. Let me type it in.\u201D and you will be directed to a page which will let you enter your address manually." }), jsxRuntime.jsx(GooglePlacesAutocomplete__default["default"], { autocompletionRequest: {
                             componentRestrictions: { country: 'ca' },
                         }, apiKey: "AIzaSyCzQKD3HwxCezMrPsS4q_xFQ3g3TS4u1nY", selectProps: {
                             value: addressObject,
@@ -2197,7 +2194,7 @@ const SectionApplicantInfo = () => {
             });
         }
     };
-    return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsxRuntime.jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Applicant First Name", error: !firstName && applicantState.inValidation, errorMessage: getErrorMessage(firstName, applicantState.inValidation) }), jsxRuntime.jsx(DateSelectFormBox, { name: "dateOfBirth", dateNames: ['birthYear', 'birthMonth', 'birthDay'], onDateChange: handleDateOfBirthChange, defaultValue: defaultDateOfBirth, title: "Birthdate of the oldest applicant", description: "If there\u2019s more than one applicant, please use the date of birth of the eldest applicant.", error: applicantState.inValidation, errorMessage: getDateErrorMessage([birthDay || '', birthMonth || '', birthYear || ''], applicantState.inValidation), maxDate: mychoiceSdkComponents.subYearsFromDate('', 14), isDay: true }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.residentsOptions, name: "familiesCount", onChange: handleFamiliesCountChange, defaultValue: getSelectedOption(mychoiceSdkComponents.residentsOptions, familiesCount.toString()), title: "Who lives in this residence?", placeholder: "Select", description: "Let us know whether this address is being used for residential or commercial purposes.", autoSelectIfValueIsOutOfOptions: false, error: !familiesCount && applicantState.inValidation, errorMessage: getErrorMessage(familiesCount, applicantState.inValidation) }), familiesCount?.toString() === 'none' && (jsxRuntime.jsx("p", { className: "warning-message", children: "To obtain an accurate insurance quote, kindly reach out to a licensed representative at 1-855-331-6933 between Monday and Saturday, from 9:30 AM to 9:30 PM. Speaking with a representative is especially important for commercial properties, as it ensures that all relevant incidents are appropriately considered in your insurance quote." }))] }), jsxRuntime.jsx(DateSelectFormBox, { name: "occupiedDate", dateNames: ['occupiedYear'], datePlaceholders: ['Select'], onDateChange: handleOccupiedDateChange, defaultValue: defaultOccupiedDate, title: "In what year did you begin residing at this property?", hintMessage: occupiedHintMessage, errorMessage: getDateErrorMessage(['01', '01', occupiedYear || ''], applicantState.inValidation), error: applicantState.inValidation, minDate: birthDate, isMonth: false })] }));
+    return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsxRuntime.jsx("h2", { className: "section-title", children: " A bit about you and how long you have held fort." }), jsxRuntime.jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Applicant First Name", error: !firstName && applicantState.inValidation, errorMessage: getErrorMessage(firstName, applicantState.inValidation) }), jsxRuntime.jsx(DateSelectFormBox, { name: "dateOfBirth", dateNames: ['birthYear', 'birthMonth', 'birthDay'], onDateChange: handleDateOfBirthChange, defaultValue: defaultDateOfBirth, title: "Birthdate of the oldest applicant", description: "If there\u2019s more than one applicant, please use the date of birth of the eldest applicant.", error: applicantState.inValidation, errorMessage: getDateErrorMessage([birthDay || '', birthMonth || '', birthYear || ''], applicantState.inValidation), maxDate: mychoiceSdkComponents.subYearsFromDate('', 14), isDay: true }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.residentsOptions, name: "familiesCount", onChange: handleFamiliesCountChange, defaultValue: getSelectedOption(mychoiceSdkComponents.residentsOptions, familiesCount.toString()), title: "Who lives in this residence?", placeholder: "Select", description: "Please let us know whether this address is being used for residential or commercial purposes.", autoSelectIfValueIsOutOfOptions: false, error: !familiesCount && applicantState.inValidation, errorMessage: getErrorMessage(familiesCount, applicantState.inValidation) }), familiesCount?.toString() === 'none' && (jsxRuntime.jsx("p", { className: "warning-message", children: "To obtain an accurate insurance quote, kindly reach out to a licensed representative at 1-855-331-6933 between Monday and Saturday, from 9:30 AM to 9:30 PM. Speaking with a representative is especially important for commercial properties, as it ensures that all relevant incidents are appropriately considered in your insurance quote." }))] }), jsxRuntime.jsx(DateSelectFormBox, { name: "occupiedDate", dateNames: ['occupiedYear'], datePlaceholders: ['Select'], onDateChange: handleOccupiedDateChange, defaultValue: defaultOccupiedDate, title: "In what year did you begin residing at this property?", hintMessage: occupiedHintMessage, errorMessage: getDateErrorMessage(['01', '01', occupiedYear || ''], applicantState.inValidation), error: applicantState.inValidation, minDate: birthDate, isMonth: false })] }));
 };
 
 const SectionApplicantInsurancePolicy = () => {
@@ -2570,7 +2567,7 @@ const SectionDwelling = () => {
     //     payload: { replacementCost: value as string },
     //   });
     // };
-    return (jsxRuntime.jsxs("div", { className: "form-section top-section", children: [jsxRuntime.jsx(DateSelectFormBox, { name: "builtDate", dateNames: ['builtYear'], datePlaceholders: ['Select'], onDateChange: handleBuiltDateChange, defaultValue: builtDate, title: "What year was your property constructed?", errorMessage: getDateErrorMessage(['01', '01', builtYear || ''], dwellingState.inValidation), error: !builtYear && dwellingState.inValidation, isMonth: false }), jsxRuntime.jsx(SelectFormBox, { options: getBuildingStructureOptions(), name: "buildingStructure", onChange: handleBuildingStructureChange, defaultValue: getSelectedOption(getBuildingStructureOptions(), buildingStructure), title: "Describe the style of building", description: buildingStructureDescription, placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !buildingStructure && dwellingState.inValidation, errorMessage: getErrorMessage(buildingStructure, dwellingState.inValidation) }), isHomeOwner && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputFormBox, { name: "livingArea", title: "What is the total square footage of the living area in your property?", type: mychoiceSdkComponents.InputTypes.Number, onChange: handleLivingAreaChange, defaultValue: livingArea, placeholder: "Living area", error: !livingArea && dwellingState.inValidation, errorMessage: getErrorMessage(livingArea, dwellingState.inValidation) }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.exteriorFinishOptions, name: "exteriorFinish", onChange: handleExteriorFinishChange, defaultValue: getSelectedOption(mychoiceSdkComponents.exteriorFinishOptions, exteriorFinish), title: "What is the exterior material or finish of your property?", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.constructionTypeOptions, name: "constructionType", onChange: handleConstructionTypeChange, defaultValue: getSelectedOption(mychoiceSdkComponents.constructionTypeOptions, constructionType), title: "What is the construction classification/type of your property?", placeholder: "Select", description: "To provide an accurate insurance quote, insurance companies require knowledge of the construction type of your property. Typically, properties constructed with sturdy materials like brick have lower insurance costs due to their reduced combustibility. Although many properties built after 1970 feature brick, concrete, or stone exteriors, their underlying construction is often wood. Brick and masonry construction were more prevalent in houses built before 1970. High-rise buildings, on the other hand, are commonly constructed using fire-resistive materials. If you are unsure about the construction type of your property, please select 'Other'.", autoSelectIfValueIsOutOfOptions: false }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.garageTypeOptions, name: "garageType", onChange: handleGarageTypeChange, defaultValue: getSelectedOption(mychoiceSdkComponents.garageTypeOptions, garageType), title: "What type of garage is present on your property?", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.getNumericOptions(0, 100, '%'), name: "basementFinishPercent", onChange: handleBasementFinishPercentChange, defaultValue: getSelectedOption(mychoiceSdkComponents.getNumericOptions(0, 100, '%'), basementFinishPercent), title: "How much of the basement is finished?", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false }), jsxRuntime.jsx(InputFormBox, { name: "storeysCount", title: "How many levels does your property have?", type: mychoiceSdkComponents.InputTypes.Number, onChange: handleStoreysCountChange, defaultValue: storeysCount, placeholder: "Storeys count", minValue: 1, maxValue: 30 })] })), (isHomeOwner
+    return (jsxRuntime.jsxs("div", { className: "form-section top-section", children: [jsxRuntime.jsx("h2", { className: "section-title", style: { textAlign: 'center' }, children: "Tell us a bit about your place." }), jsxRuntime.jsx(DateSelectFormBox, { name: "builtDate", dateNames: ['builtYear'], datePlaceholders: ['Select'], onDateChange: handleBuiltDateChange, defaultValue: builtDate, title: "What year was your property constructed?", errorMessage: getDateErrorMessage(['01', '01', builtYear || ''], dwellingState.inValidation), error: !builtYear && dwellingState.inValidation, isMonth: false }), jsxRuntime.jsx(SelectFormBox, { options: getBuildingStructureOptions(), name: "buildingStructure", onChange: handleBuildingStructureChange, defaultValue: getSelectedOption(getBuildingStructureOptions(), buildingStructure), title: "Describe the style of building", description: buildingStructureDescription, placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !buildingStructure && dwellingState.inValidation, errorMessage: getErrorMessage(buildingStructure, dwellingState.inValidation) }), isHomeOwner && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputFormBox, { name: "livingArea", title: "What is the total square footage of the living area in your property?", type: mychoiceSdkComponents.InputTypes.Number, onChange: handleLivingAreaChange, defaultValue: livingArea, placeholder: "Living area", error: !livingArea && dwellingState.inValidation, errorMessage: getErrorMessage(livingArea, dwellingState.inValidation) }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.exteriorFinishOptions, name: "exteriorFinish", onChange: handleExteriorFinishChange, defaultValue: getSelectedOption(mychoiceSdkComponents.exteriorFinishOptions, exteriorFinish), title: "What is the exterior material or finish of your property?", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.constructionTypeOptions, name: "constructionType", onChange: handleConstructionTypeChange, defaultValue: getSelectedOption(mychoiceSdkComponents.constructionTypeOptions, constructionType), title: "What is the construction classification/type of your property?", placeholder: "Select", description: "To provide an accurate insurance quote, insurance companies require knowledge of the construction type of your property. Typically, properties constructed with sturdy materials like brick have lower insurance costs due to their reduced combustibility. Although many properties built after 1970 feature brick, concrete, or stone exteriors, their underlying construction is often wood. Brick and masonry construction were more prevalent in houses built before 1970. High-rise buildings, on the other hand, are commonly constructed using fire-resistive materials. If you are unsure about the construction type of your property, please select 'Other'.", autoSelectIfValueIsOutOfOptions: false }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.garageTypeOptions, name: "garageType", onChange: handleGarageTypeChange, defaultValue: getSelectedOption(mychoiceSdkComponents.garageTypeOptions, garageType), title: "What type of garage is present on your property?", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.getNumericOptions(0, 100, '%'), name: "basementFinishPercent", onChange: handleBasementFinishPercentChange, defaultValue: getSelectedOption(mychoiceSdkComponents.getNumericOptions(0, 100, '%'), basementFinishPercent), title: "How much of the basement is finished?", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false }), jsxRuntime.jsx(InputFormBox, { name: "storeysCount", title: "How many levels does your property have?", type: mychoiceSdkComponents.InputTypes.Number, onChange: handleStoreysCountChange, defaultValue: storeysCount, placeholder: "Storeys count", minValue: 1, maxValue: 30 })] })), (isHomeOwner
                 || (isCondoOwner && ['endrow', 'inrow'].includes(buildingStructure))
                 || (isTenant && ['detached', 'basement', 'endrow', 'inrow', 'duplex', 'triplex'].includes(buildingStructure)))
                 && (jsxRuntime.jsx(DateSelectFormBox, { name: "roofReplacedDate", dateNames: ['roofReplacedYear'], datePlaceholders: ['Select'], onDateChange: handleRoofReplaceDateChange, defaultValue: roofReplacedDate, title: "When was the last time your roof was replaced?", errorMessage: getDateErrorMessage(['01', '01', roofReplacedYear || ''], dwellingState.inValidation), error: dwellingState.inValidation, minDate: `${builtYear}-01-01`, isMonth: false })), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.fireHallDistanceOptions, name: "fireHallDistance", onChange: handleFireHallDistanceChange, defaultValue: getSelectedOption(mychoiceSdkComponents.fireHallDistanceOptions, fireHallDistance), title: "How far is the nearest fire hall approximately?", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !fireHallDistance && dwellingState.inValidation, errorMessage: getErrorMessage(fireHallDistance.toString(), dwellingState.inValidation) }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.fireHydrantDistanceOptions, name: "fireHydrantDistance", onChange: handleFireHydrantDistanceChange, defaultValue: getSelectedOption(mychoiceSdkComponents.fireHydrantDistanceOptions, fireHydrantDistance), title: "How far is the nearest fire hydrant approximately?", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !fireHydrantDistance && dwellingState.inValidation, errorMessage: getErrorMessage(fireHydrantDistance.toString(), dwellingState.inValidation) }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.primaryHeatingTypeOptions, name: `heatings-${0}`, onChange: handleHeatingTypeChange(0), defaultValue: getSelectedOption(mychoiceSdkComponents.primaryHeatingTypeOptions, heatings[0].type), title: "What is the primary heating system installed at your property?", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !heatings[0].type && dwellingState.inValidation, errorMessage: getErrorMessage(heatings[0].type, dwellingState.inValidation) }), isHomeOwner && (jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.auxHeatingTypeOptions, name: `heatings-${1}`, onChange: handleHeatingTypeChange(1), defaultValue: getSelectedOption(mychoiceSdkComponents.auxHeatingTypeOptions, heatings[1].type), title: "What is the secondary heating system installed at your property?", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !heatings[1].type && dwellingState.inValidation, errorMessage: getErrorMessage(heatings[1].type, dwellingState.inValidation) })), ((isHomeOwner && ['detached', 'semidetached', 'endrow', 'inrow'].includes(buildingStructure))
@@ -2719,7 +2716,7 @@ const SectionDiscountInfo = () => {
             payload: { caslConsent: value },
         });
     };
-    return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [isTheBig
+    return (jsxRuntime.jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsxRuntime.jsx("h2", { className: "section-title", children: "A little extra info for discounts and connecting you with our partners." }), isTheBig
                 ? (jsxRuntime.jsx(LabelFormBox, { title: `You are seconds away from receiving your ${insuranceType} insurance quotes, please provide your email after completing the discount section so we can send you your personalized free ${insuranceType} insurance quotes!` }))
                 : (jsxRuntime.jsx("span", { className: "info-title-message", children: `You are seconds away from receiving your ${insuranceType} insurance quotes,
                please provide your email after completing the discount section so we
@@ -2937,7 +2934,7 @@ const SectionCoverage = () => {
             payload: { coverage: value },
         });
     };
-    return (jsxRuntime.jsxs("div", { className: "form-section", children: [jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.lifeProvinceOptions, name: "province", onChange: handleProvinceChange, defaultValue: province, title: "Province", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !province && inValidation, errorMessage: getErrorMessage(type, inValidation) }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.lifeInsuranceTypeOptions, name: "type", onChange: handleLifeInsuranceTypeChange, defaultValue: type, title: "Type of Insurance", description: jsxRuntime.jsx(Description, {}), placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !type && inValidation, errorMessage: getErrorMessage(type, inValidation) }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.lifeCoverageOptions, name: "coverage", onChange: handleCoverageChange, defaultValue: coverage, title: "Required coverage", description: "The extent of coverage you need is determined by several factors,\n         including your expenditure patterns, anticipated future expenses, yearly earnings,\n          and so forth. Generally, individuals opt for a coverage amount that equals five\n           times their current annual income before taxes. On an average,\n           it is observed that Canadians choose a coverage amount of around $500,000.", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !coverage && inValidation, errorMessage: getErrorMessage(coverage, inValidation) })] }));
+    return (jsxRuntime.jsxs("div", { className: "form-section", children: [jsxRuntime.jsx("h2", { className: "section-title", style: { textAlign: 'center' }, children: "Let us meet your needs." }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.lifeProvinceOptions, name: "province", onChange: handleProvinceChange, defaultValue: province, title: "Province", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !province && inValidation, errorMessage: getErrorMessage(type, inValidation) }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.lifeInsuranceTypeOptions, name: "type", onChange: handleLifeInsuranceTypeChange, defaultValue: type, title: "Type of Insurance", description: jsxRuntime.jsx(Description, {}), placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !type && inValidation, errorMessage: getErrorMessage(type, inValidation) }), jsxRuntime.jsx(SelectFormBox, { options: mychoiceSdkComponents.lifeCoverageOptions, name: "coverage", onChange: handleCoverageChange, defaultValue: coverage, title: "Required coverage", description: "The extent of coverage you need is determined by several factors,\n         including your expenditure patterns, anticipated future expenses, yearly earnings,\n          and so forth. Generally, individuals opt for a coverage amount that equals five\n           times their current annual income before taxes. On an average,\n           it is observed that Canadians choose a coverage amount of around $500,000.", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !coverage && inValidation, errorMessage: getErrorMessage(coverage, inValidation) })] }));
 };
 
 const PageCoverage = () => {
@@ -3046,7 +3043,7 @@ const SectionApplicant = () => {
     const handleEmailChange = ({ value }) => {
         validateEmail(value);
     };
-    return (jsxRuntime.jsxs("div", { className: "form-section", children: [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
+    return (jsxRuntime.jsxs("div", { className: "form-section", children: [jsxRuntime.jsx("h2", { className: "section-title", style: { textAlign: 'center' }, children: "Just the basics about you." }), 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("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 && inValidation, errorMessage: getErrorMessage(firstName, inValidation) }), jsxRuntime.jsx(InputFormBox, { name: "lastname", title: "Last Name", onChange: handleLastNameChange, defaultValue: lastName, placeholder: "Your Last Name", error: !lastName && inValidation, errorMessage: getErrorMessage(lastName, inValidation) }), jsxRuntime.jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(855) 325-8444", error: !phone && inValidation, errorMessage: getErrorMessage(phone, inValidation) }), jsxRuntime.jsx(InputFormEmailBox, { validationStatus: emailStatus, name: "email", title: "Please provide your email address so we can send you a copy of your quotes", onChange: handleEmailChange, defaultValue: email, placeholder: "johnsmith@mychoice.ca", errorMessage: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined
                     ? errorMessage : getErrorMessage(email, inValidation), error: emailStatus === mychoiceSdkComponents.ValidationStatusTypes.Declined || (!email && inValidation) }), jsxRuntime.jsx(BlockSubmit, { className: isTheBig ? 'thebig-bold' : '' }), jsxRuntime.jsx(BlockNextPageInfo, {})] }));
@@ -4342,6 +4339,7 @@ exports.InputFormLicenceBox = InputFormLicenceBox;
 exports.InputFormPhoneBox = InputFormPhoneBox;
 exports.LabelFormBox = LabelFormBox;
 exports.LoaderPrimary = LoaderPrimary;
+exports.LoaderVid = LoaderVid;
 exports.ModalAddress = ModalAddress;
 exports.ModalConfirm = ModalConfirm;
 exports.ModalFinale = ModalFinale;