@mychoice/mychoice-sdk-modules 2.1.13 → 2.1.15

package/dist/cjs/index.js

@@ -416,7 +416,7 @@ const BlockCarInfo = () => {
     const { vehicleState, dispatchVehicleState } = mychoiceSdkStore.useStoreFormCarVehicle();
     const { year: currentYear, make: currentMake, model: currentModel, } = vehicleState.items[vehicleState.activeIndex];
     const yearIsValid = !currentYear || Number(currentYear) > 1998;
-    const yearMessage = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["Please contact a licenced representative at Hargerty for classic car insurance:", ' ', jsxRuntime.jsx("a", { href: "tel:18335431540", children: "1-833-543-1540" })] }));
+    const yearMessage = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["Please contact a licenced representative at Hagerty for classic car insurance:", ' ', jsxRuntime.jsx("a", { href: "tel:18335431540", children: "1-833-543-1540" })] }));
     const handleVehicleYearChange = ({ value }) => {
         if (value) {
             dispatchVehicleState({
@@ -2055,7 +2055,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,
@@ -2190,7 +2190,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: "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 = () => {
@@ -2712,7 +2712,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
@@ -2930,7 +2930,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 = () => {
@@ -3039,7 +3039,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, {})] }));
@@ -3988,7 +3988,7 @@ const AppRouteWrapper = (props) => {
             }
         }
     }, [carPostal, homePostal, lifePostal, isReady]);
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isReady && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(AppHeader, {}), jsxRuntime.jsx(AppModal, {}), insuranceType && (jsxRuntime.jsx(NavigationTop, { title: `${insuranceType.replace(/^./, insuranceType[0].toUpperCase())} Insurance Quote`, postalCode: postalCode, formSteps: steps, validationHooks: validationHooks, clearForm: clearFormData, propertyIsCompleted: isCompleted })), insuranceType && appType === mychoiceSdkComponents.AppTypes.MyChoice && (jsxRuntime.jsx("div", { className: "step-progress-bar", children: jsxRuntime.jsx("span", { style: { width: progressLength } }) })), jsxRuntime.jsx("div", { className: `${insuranceType ? 'form-page-content' : ''} ${insuranceType && appType === mychoiceSdkComponents.AppTypes.MyChoice ? 'mychoice' : ''}`, children: insuranceType && appType === mychoiceSdkComponents.AppTypes.MyChoice && isDesktop && progressLength ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "mychoice-content", children: [jsxRuntime.jsx(StepsBox, { className: "step-box", formSteps: steps, validationHooks: validationHooks, propertyIsCompleted: isCompleted }), children, jsxRuntime.jsx("div", { className: "empty-steps-container" })] }) })) : children }), isMychoice && !appLoaderState.isOpen && insuranceType === mychoiceSdkComponents.InsuranceTypes.Car && jsxRuntime.jsx(ProviderImageFooter, {})] })) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isReady && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(AppHeader, {}), jsxRuntime.jsx(AppModal, {}), insuranceType && (jsxRuntime.jsx(NavigationTop, { title: `${insuranceType.replace(/^./, insuranceType[0].toUpperCase())} Insurance Quote`, postalCode: postalCode, formSteps: steps, validationHooks: validationHooks, clearForm: clearFormData, propertyIsCompleted: isCompleted })), insuranceType && appType === mychoiceSdkComponents.AppTypes.MyChoice && (jsxRuntime.jsx("div", { className: "step-progress-bar", children: jsxRuntime.jsx("span", { style: { width: progressLength } }) })), jsxRuntime.jsx("div", { className: `${insuranceType ? 'form-page-content' : ''} ${insuranceType && appType === mychoiceSdkComponents.AppTypes.MyChoice ? 'mychoice' : ''}`, children: insuranceType && appType === mychoiceSdkComponents.AppTypes.MyChoice && isDesktop && progressLength ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "mychoice-content", children: [jsxRuntime.jsx(StepsBox, { className: "step-box", formSteps: steps, validationHooks: validationHooks, propertyIsCompleted: isCompleted }), children, jsxRuntime.jsx("div", { className: "empty-steps-container" })] }) })) : children }), isMychoice && !appLoaderState.isOpen && jsxRuntime.jsx(ProviderImageFooter, {})] })) }));
 };
 const NestedRoutes = () => {
     const insuranceType = mychoiceSdkComponents.getInsuranceType();