@mychoice/mychoice-sdk-modules 2.1.14 → 2.1.15

package/dist/esm/index.js

@@ -551,12 +551,7 @@ const BlockCarConditionInfo = () => {
 const VehicleSectionMain = () => {
     const { appConfigState: { appType } } = useStoreAppConfig();
     const mychoiceCls = appType === AppTypes.MyChoice ? 'mychoice' : '';
-    const carEmoji = '\u{1F697}';
-    return (jsxs("div", { className: `form-section top-section ${mychoiceCls}`, children: [mychoiceCls && (jsx("h2", { style: {
-                    whiteSpace: 'normal',
-                    marginTop: '20px',
-                    textAlign: 'center',
-                }, children: `${carEmoji} Give us the scoop on your four-wheeled friend.` })), jsx(BlockCarInfo, {}), jsx(BlockCarConditionInfo, {})] }));
+    return (jsxs("div", { className: `form-section top-section ${mychoiceCls}`, children: [mychoiceCls && jsx("h2", { className: "section-title", children: "Give us the scoop on your four-wheeled friend." }), jsx(BlockCarInfo, {}), jsx(BlockCarConditionInfo, {})] }));
 };
 
 const VehicleSectionCoverage = () => {
@@ -785,8 +780,7 @@ const SectionDriverInfo = () => {
             payload: { applicantRelationship: value },
         });
     };
-    const inspectEmoji = '\u{1F50D}';
-    return (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [mychoiceCls && jsx("h2", { className: "section-title", children: `${inspectEmoji} Time for a micro autobiography – tell us about you.` }), jsx(InputFormBox, { name: "firstName", title: "What is your legal first name?", onChange: handleFirstNameChange, defaultValue: firstName, description: "The name on a policy should match the one on your official driver\u2019s licence.", placeholder: "Driver First Name", error: !firstName && driverState.inValidation, errorMessage: getErrorMessage(firstName, driverState.inValidation) }), jsx(SelectFormBox, { options: maritalStatusOptions, name: "maritalStatus", onChange: handleMaritalStatusChange, defaultValue: getSelectedOption(maritalStatusOptions, maritalStatus), title: "What is your marital status?", placeholder: "Select from the list", description: "If you are married, it may have a positive effect on your car insurance premiums and coverage. In some provinces, the law now considers same-sex partners to have a common-law marriage, so you will need to check your local regulations. If you are divorced or widowed, select single.", autoSelectIfValueIsOutOfOptions: false, error: !maritalStatus && driverState.inValidation, errorMessage: getErrorMessage(maritalStatus, driverState.inValidation) }), jsx(DateSelectFormBox, { name: "dateOfBirth", dateNames: ['birthYear', 'birthMonth', 'birthDay'], onDateChange: handleDateOfBirthChange, defaultValue: defaultDateOfBirth, title: "When were you born?", description: "Insurers generally consider your age and driving experience when calculating a vehicle insurance quote. The safest drivers are often those who are over thirty, but each insurer will have their own parameters. The youngest and oldest drivers have the greatest liability reflected in their premiums due to inexperience or health complications, respectively.", errorMessage: getDateErrorMessage([birthDay || '', birthMonth || '', birthYear || ''], driverState.inValidation), error: driverState.inValidation, maxDate: subYearsFromDate('', configState.licenceConfig.minLicenceAge || 16), isDay: true }), jsx(SwitchButtonBox, { name: "occupation", items: occupationOptions, onChange: handleOccupationChange, defaultValue: getSelectedOption(occupationOptions, occupation), title: "Are you currently employed or unemployed?", description: "Your employment status reflects your driving frequency, and insurers consider this in your policy." }), jsx(SwitchButtonBox, { items: genderOptions, onChange: handleGenderChange, name: "gender", defaultValue: getSelectedOption(genderOptions, gender), title: "What is your gender?", description: "The gender on the policy should match your official driver\u2019s licence. Some insurers analyze a driver's sex when creating a policy. Men are typically considered higher risk than female drivers, but the statistics supporting this idea vary from province to province. On average, men and women pay roughly the same for insurance, though." }), driverState.activeIndex > 0
+    return (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [mychoiceCls && jsx("h2", { className: "section-title", children: "Time for a micro autobiography \u2013 tell us about you." }), jsx(InputFormBox, { name: "firstName", title: "What is your legal first name?", onChange: handleFirstNameChange, defaultValue: firstName, description: "The name on a policy should match the one on your official driver\u2019s licence.", placeholder: "Driver First Name", error: !firstName && driverState.inValidation, errorMessage: getErrorMessage(firstName, driverState.inValidation) }), jsx(SelectFormBox, { options: maritalStatusOptions, name: "maritalStatus", onChange: handleMaritalStatusChange, defaultValue: getSelectedOption(maritalStatusOptions, maritalStatus), title: "What is your marital status?", placeholder: "Select from the list", description: "If you are married, it may have a positive effect on your car insurance premiums and coverage. In some provinces, the law now considers same-sex partners to have a common-law marriage, so you will need to check your local regulations. If you are divorced or widowed, select single.", autoSelectIfValueIsOutOfOptions: false, error: !maritalStatus && driverState.inValidation, errorMessage: getErrorMessage(maritalStatus, driverState.inValidation) }), jsx(DateSelectFormBox, { name: "dateOfBirth", dateNames: ['birthYear', 'birthMonth', 'birthDay'], onDateChange: handleDateOfBirthChange, defaultValue: defaultDateOfBirth, title: "When were you born?", description: "Insurers generally consider your age and driving experience when calculating a vehicle insurance quote. The safest drivers are often those who are over thirty, but each insurer will have their own parameters. The youngest and oldest drivers have the greatest liability reflected in their premiums due to inexperience or health complications, respectively.", errorMessage: getDateErrorMessage([birthDay || '', birthMonth || '', birthYear || ''], driverState.inValidation), error: driverState.inValidation, maxDate: subYearsFromDate('', configState.licenceConfig.minLicenceAge || 16), isDay: true }), jsx(SwitchButtonBox, { name: "occupation", items: occupationOptions, onChange: handleOccupationChange, defaultValue: getSelectedOption(occupationOptions, occupation), title: "Are you currently employed or unemployed?", description: "Your employment status reflects your driving frequency, and insurers consider this in your policy." }), jsx(SwitchButtonBox, { items: genderOptions, onChange: handleGenderChange, name: "gender", defaultValue: getSelectedOption(genderOptions, gender), title: "What is your gender?", description: "The gender on the policy should match your official driver\u2019s licence. Some insurers analyze a driver's sex when creating a policy. Men are typically considered higher risk than female drivers, but the statistics supporting this idea vary from province to province. On average, men and women pay roughly the same for insurance, though." }), driverState.activeIndex > 0
                 && (jsx(SelectFormBox, { options: applicantRelationshipOptions, name: "applicantRelationship", onChange: handleApplicantRelationshipChange, defaultValue: getSelectedOption(applicantRelationshipOptions, applicantRelationship), title: "Relationship to applicant", placeholder: "Select...", autoSelectIfValueIsOutOfOptions: false, error: !applicantRelationship && driverState.inValidation, errorMessage: getErrorMessage(applicantRelationship, driverState.inValidation) }))] }));
 };
 
@@ -1641,10 +1635,9 @@ const SectionDiscountInfo$1 = () => {
             payload: { caslConsent: value },
         });
     };
-    const moneyEmoji = '\u{1F4B0}';
     return (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [isTheBig
                 ? (jsx(LabelFormBox, { title: "You are seconds away from receiving your car insurance quotes,\n         please provide your email after completing the discount section so we\n         can send you your personalized free car insurance quotes!" }))
-                : (jsxs(Fragment, { children: [jsx("h2", { className: "section-title", children: `${moneyEmoji} A little extra info for discounts and connecting you with our partners.` }), jsx("span", { className: "info-title-message", children: "You are seconds away from receiving your car insurance quotes, please provide your email after completing the discount section so we can send you your personalized free car insurance quotes!" })] })), jsx(BlockVehLinks, {}), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleMultiplePolicyChange, name: "multiplePoliciesDiscount", defaultValue: getSelectedOption(yesNoOptions, multiplePoliciesDiscount), title: "You could receive a 10-15% discount for bundling insurance with multiple policies with the same insurance company. Does that interest you?", description: "Bundling your home and auto insurance can save you significantly on insurance premiums as a whole package. Do you want to learn more about the benefits of multiple policies for home, tenant, condo, or car insurance? All you have to do is select yes.." }), !(allProvinces.isAlbertaProvince && isTheBig) && (jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleCaaMemberChange, name: "caaMemberDiscount", defaultValue: getSelectedOption(yesNoOptions, caaMemberDiscount), title: "Please indicate if you are a member of CAA, you could save up to an additional 20%." })), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleAppInstallChange, name: "appInstallDiscount", defaultValue: getSelectedOption(yesNoOptions, appInstallDiscount), title: "You could receive up to a 30% discount by using an app to track driving habits. Does that interest you?", description: "Get rewarded for safe driving with the click of a button. If you install the app, you may be eligible for a 30% discount on your insurance premiums. Typically, you receive 10% of the discount upfront and the balance after six months of good driving." }), isTheBig
+                : (jsxs(Fragment, { children: [jsx("h2", { className: "section-title", children: "A little extra info for discounts and connecting you with our partners." }), jsx("span", { className: "info-title-message", children: "You are seconds away from receiving your car insurance quotes, please provide your email after completing the discount section so we can send you your personalized free car insurance quotes!" })] })), jsx(BlockVehLinks, {}), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleMultiplePolicyChange, name: "multiplePoliciesDiscount", defaultValue: getSelectedOption(yesNoOptions, multiplePoliciesDiscount), title: "You could receive a 10-15% discount for bundling insurance with multiple policies with the same insurance company. Does that interest you?", description: "Bundling your home and auto insurance can save you significantly on insurance premiums as a whole package. Do you want to learn more about the benefits of multiple policies for home, tenant, condo, or car insurance? All you have to do is select yes.." }), !(allProvinces.isAlbertaProvince && isTheBig) && (jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleCaaMemberChange, name: "caaMemberDiscount", defaultValue: getSelectedOption(yesNoOptions, caaMemberDiscount), title: "Please indicate if you are a member of CAA, you could save up to an additional 20%." })), jsx(SwitchButtonBox, { items: yesNoOptions, onChange: handleAppInstallChange, name: "appInstallDiscount", defaultValue: getSelectedOption(yesNoOptions, appInstallDiscount), title: "You could receive up to a 30% discount by using an app to track driving habits. Does that interest you?", description: "Get rewarded for safe driving with the click of a button. If you install the app, you may be eligible for a 30% discount on your insurance premiums. Typically, you receive 10% of the discount upfront and the balance after six months of good driving." }), isTheBig
                 ? (jsxs("div", { className: "input-form-box-container", children: [jsx(LabelFormBox, { title: "Complete this form to see all your personalized\n              quotes on the next page, you will also be able to:" }), jsxs("ol", { className: "ordered-block", children: [jsx("li", { children: "See what rates insurance carriers are offering" }), jsx("li", { children: "Get in touch with us and secure your rate" }), jsx("li", { children: "Potentially save more by speaking with a broker" })] })] }))
                 : jsx("h2", { children: "Complete the form below to see which companies are offering your quotes." }), jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Your First Name", error: !firstName && discountState.inValidation, errorMessage: getErrorMessage(firstName, discountState.inValidation) }), jsx(InputFormBox, { name: "lastname", title: "Last Name", onChange: handleLastNameChange, defaultValue: lastName, placeholder: "Your Last Name", error: !lastName && discountState.inValidation, errorMessage: getErrorMessage(lastName, discountState.inValidation) }), isTheBig
                 && (jsx(InputFormLicenceBox, { ...getDynamicLicenceBoxProps({ ...allProvinces }), name: "driverLicense", title: "Driver Licence Number (Optional)", onChange: handleDriverLicenseChange, defaultValue: driverLicense, description: "Enter your drivers licence number in to receive a more accurate, prequalified quote from our broker partners. This will enable you to provide less details over the phone if you choose to have a broker contact you. This is an optional input." })), jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(855) 325-8444", error: !phone && discountState.inValidation, errorMessage: getErrorMessage(phone, discountState.inValidation) }), jsx(InputFormEmailBox, { validationStatus: emailStatus, errorMessage: emailStatus === ValidationStatusTypes.Declined
@@ -2052,7 +2045,7 @@ const SectionAddress = () => {
         return isFocused ? '#8ED6DC' : borderColor;
     };
     const placeholderText = 'Type in Your Street Address';
-    return (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsx(SelectFormBox, { options: homeOwnerTypeOptions, name: "ownerType", onChange: handleOwnerTypeChange, defaultValue: insuranceType, title: "Type of Insurance", placeholder: "Select Type of Insurance", error: !insuranceType && inValidation, errorMessage: getErrorMessage(insuranceType, inValidation) }), jsxs("div", { className: "input-form-box-container", children: [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." }), jsx(GooglePlacesAutocomplete, { autocompletionRequest: {
+    return (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsx("h2", { className: "section-title", children: " Where do you reside and thrive? " }), jsx(SelectFormBox, { options: homeOwnerTypeOptions, name: "ownerType", onChange: handleOwnerTypeChange, defaultValue: insuranceType, title: "Type of Insurance", placeholder: "Select Type of Insurance", error: !insuranceType && inValidation, errorMessage: getErrorMessage(insuranceType, inValidation) }), jsxs("div", { className: "input-form-box-container", children: [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." }), jsx(GooglePlacesAutocomplete, { autocompletionRequest: {
                             componentRestrictions: { country: 'ca' },
                         }, apiKey: "AIzaSyCzQKD3HwxCezMrPsS4q_xFQ3g3TS4u1nY", selectProps: {
                             value: addressObject,
@@ -2187,7 +2180,7 @@ const SectionApplicantInfo = () => {
             });
         }
     };
-    return (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Applicant First Name", error: !firstName && applicantState.inValidation, errorMessage: getErrorMessage(firstName, applicantState.inValidation) }), 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: subYearsFromDate('', 14), isDay: true }), jsxs("div", { children: [jsx(SelectFormBox, { options: residentsOptions, name: "familiesCount", onChange: handleFamiliesCountChange, defaultValue: getSelectedOption(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' && (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." }))] }), 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 (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsx("h2", { className: "section-title", children: " A bit about you and how long you have held fort." }), jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Applicant First Name", error: !firstName && applicantState.inValidation, errorMessage: getErrorMessage(firstName, applicantState.inValidation) }), 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: subYearsFromDate('', 14), isDay: true }), jsxs("div", { children: [jsx(SelectFormBox, { options: residentsOptions, name: "familiesCount", onChange: handleFamiliesCountChange, defaultValue: getSelectedOption(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' && (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." }))] }), 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 = () => {
@@ -2709,7 +2702,7 @@ const SectionDiscountInfo = () => {
             payload: { caslConsent: value },
         });
     };
-    return (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [isTheBig
+    return (jsxs("div", { className: `form-section ${mychoiceCls}`, children: [jsx("h2", { className: "section-title", children: "A little extra info for discounts and connecting you with our partners." }), isTheBig
                 ? (jsx(LabelFormBox, { title: `You are seconds away from receiving your ${insuranceType} insurance quotes, please provide your email after completing the discount section so we can send you your personalized free ${insuranceType} insurance quotes!` }))
                 : (jsx("span", { className: "info-title-message", children: `You are seconds away from receiving your ${insuranceType} insurance quotes,
                please provide your email after completing the discount section so we
@@ -2927,7 +2920,7 @@ const SectionCoverage = () => {
             payload: { coverage: value },
         });
     };
-    return (jsxs("div", { className: "form-section", children: [jsx(SelectFormBox, { options: lifeProvinceOptions, name: "province", onChange: handleProvinceChange, defaultValue: province, title: "Province", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !province && inValidation, errorMessage: getErrorMessage(type, inValidation) }), jsx(SelectFormBox, { options: lifeInsuranceTypeOptions, name: "type", onChange: handleLifeInsuranceTypeChange, defaultValue: type, title: "Type of Insurance", description: jsx(Description, {}), placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !type && inValidation, errorMessage: getErrorMessage(type, inValidation) }), jsx(SelectFormBox, { options: 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 (jsxs("div", { className: "form-section", children: [jsx("h2", { className: "section-title", style: { textAlign: 'center' }, children: "Let us meet your needs." }), jsx(SelectFormBox, { options: lifeProvinceOptions, name: "province", onChange: handleProvinceChange, defaultValue: province, title: "Province", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !province && inValidation, errorMessage: getErrorMessage(type, inValidation) }), jsx(SelectFormBox, { options: lifeInsuranceTypeOptions, name: "type", onChange: handleLifeInsuranceTypeChange, defaultValue: type, title: "Type of Insurance", description: jsx(Description, {}), placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !type && inValidation, errorMessage: getErrorMessage(type, inValidation) }), jsx(SelectFormBox, { options: 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 = () => {
@@ -3036,7 +3029,7 @@ const SectionApplicant = () => {
     const handleEmailChange = ({ value }) => {
         validateEmail(value);
     };
-    return (jsxs("div", { className: "form-section", children: [jsx(DateSelectFormBox, { name: "dateOfBirth", dateNames: ['birthYear', 'birthMonth', 'birthDay'], onDateChange: handleDateOfBirthChange, defaultValue: defaultDateOfBirth, title: "Date of birth", error: inValidation, errorMessage: getDateErrorMessage([birthDay || '', birthMonth || '', birthYear || ''], inValidation), maxDate: subYearsFromDate('', 14), isDay: true }), jsx(SelectFormBox, { options: genderOptions, name: "gender", onChange: handleGenderChange, defaultValue: getSelectedOption(genderOptions, gender), title: "Gender", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !gender && inValidation, errorMessage: getErrorMessage(`${gender}`.toString(), inValidation) }), jsx(SwitchButtonBox, { items: smokerOptions, onChange: handleSmokerChange, name: "smoker", defaultValue: getSelectedOption(smokerOptions, smoker), title: "Smoker" }), isTheBig
+    return (jsxs("div", { className: "form-section", children: [jsx("h2", { className: "section-title", style: { textAlign: 'center' }, children: "Just the basics about you." }), jsx(DateSelectFormBox, { name: "dateOfBirth", dateNames: ['birthYear', 'birthMonth', 'birthDay'], onDateChange: handleDateOfBirthChange, defaultValue: defaultDateOfBirth, title: "Date of birth", error: inValidation, errorMessage: getDateErrorMessage([birthDay || '', birthMonth || '', birthYear || ''], inValidation), maxDate: subYearsFromDate('', 14), isDay: true }), jsx(SelectFormBox, { options: genderOptions, name: "gender", onChange: handleGenderChange, defaultValue: getSelectedOption(genderOptions, gender), title: "Gender", placeholder: "Select", autoSelectIfValueIsOutOfOptions: false, error: !gender && inValidation, errorMessage: getErrorMessage(`${gender}`.toString(), inValidation) }), jsx(SwitchButtonBox, { items: smokerOptions, onChange: handleSmokerChange, name: "smoker", defaultValue: getSelectedOption(smokerOptions, smoker), title: "Smoker" }), isTheBig
                 ? (jsxs("div", { className: "input-form-box-container", children: [jsx(LabelFormBox, { title: "Complete this form to see all your personalized\n              quotes on the next page, you will also be able to:" }), jsxs("ol", { className: "ordered-block", children: [jsx("li", { children: "See what rates insurance carriers are offering" }), jsx("li", { children: "Get in touch with us and secure your rate" }), jsx("li", { children: "Potentially save more by speaking with a broker" })] })] }))
                 : jsx("h2", { children: "Complete the form below to see which companies are offering your quotes." }), jsx(InputFormBox, { name: "firstName", title: "First Name", onChange: handleFirstNameChange, defaultValue: firstName, placeholder: "Your First Name", error: !firstName && inValidation, errorMessage: getErrorMessage(firstName, inValidation) }), jsx(InputFormBox, { name: "lastname", title: "Last Name", onChange: handleLastNameChange, defaultValue: lastName, placeholder: "Your Last Name", error: !lastName && inValidation, errorMessage: getErrorMessage(lastName, inValidation) }), jsx(InputFormPhoneBox, { name: "phone", onChange: handlePhoneNumberChange, defaultValue: phone, title: "Phone Number", placeholder: "(855) 325-8444", error: !phone && inValidation, errorMessage: getErrorMessage(phone, inValidation) }), jsx(InputFormEmailBox, { validationStatus: emailStatus, name: "email", title: "Please provide your email address so we can send you a copy of your quotes", onChange: handleEmailChange, defaultValue: email, placeholder: "johnsmith@mychoice.ca", errorMessage: emailStatus === ValidationStatusTypes.Declined
                     ? errorMessage : getErrorMessage(email, inValidation), error: emailStatus === ValidationStatusTypes.Declined || (!email && inValidation) }), jsx(BlockSubmit, { className: isTheBig ? 'thebig-bold' : '' }), jsx(BlockNextPageInfo, {})] }));