@mychoice/mychoice-sdk-modules 2.2.6 → 2.2.9

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { ErrorBoundary } from 'react-error-boundary';
 import { AppTypes, isMyChoiceLike, TitleForm, TooltipForm, IconDelete, ColorVariablesTypes, InputTypes, InputForm, InputFormPhone, InputFormEmail, InputFormLicence, SelectForm, getFormattedDate, DateTypes, getDateOptions, ButtonForm, defaultBrokerPhone, DriverPriorityTypes, SizeTypes, ButtonBase, CategoryTypes, ColorTypes, defaultLocalIndex, liabilityOptions, coverageOptions, lossOfUseOptions, liabilityForDamageOptions, limitedWaiverOfDepreciationOptions, OfferDetail, CompanyRoleTypes, OperationHoursInfo, OfferHeader, OfferPrice, ButtonTypes, ButtonVariantTypes, IconDropdownArrow, InsuranceTypes, HeaderNavGroup, ButtonMenu, DeviceTypes, IconLoaderPrimary, getInsuranceType, RequestStatusTypes, formatPostalCode, IconLoaderSecondary, postalCodeFormat, useEffectOnce, carCondition, carStatus, carWinterTiresCheck, carKeepPlace, carUsagePurpose, firstDriveDistanceList, dailyDriveBusinessDistanceList, yearlyDriveDistanceList, numberWithCommas, VehiclePrimaryUseTypes, comprehensiveCoverage, collisionCoverage, maritalStatusOptions, subYearsFromDate, occupationOptions, genderOptions, applicantRelationshipOptions, addYearsToDate, checkDateIsSpecial, DriverLicenceTypes, getDifferenceInYears, getLicenceTypeOptions, getDisabledLicenceTypes, yesNoOptions, addDaysToDate, getMinDate, CheckboxForm, getMinDateByYears, compareDates, insuranceCancellationReasonOptions, DriverListTypes, licenceSuspensionsReasonOptions, trafficTicketsGroupOptions, ValidationStatusTypes, getPlaceholderEmail, QuoteEdit, homeOwnerTypeOptions, tenantBuildingStructureOptions, condoBuildingStructureOptions, homeBuildingStructureOptions, residentsOptions, insuredYearsOptions, getInsuranceYearsOptions, ApplicantListTypes, claimTypeOptions, exteriorFinishOptions, constructionTypeOptions, garageTypeOptions, getNumericOptions, fireHallDistanceOptions, fireHydrantDistanceOptions, primaryHeatingTypeOptions, auxHeatingTypeOptions, InfoMessage, ppOptions, homeCoverageOptions, homeLiabilityOptions, lifeInsuranceTypeOptions, lifeInsuranceOntarioTypeOptions, lifeCoverageOptions, smokerOptions, MychoiceStep, Step, IconClock, ButtonArrow, DirectionTypes, ButtonTabArrow, ButtonTab, ButtonTabMobile, NavigationCar, NavigationPerson, NavigationDiscount, NavigationQuotes, NavigationAddress, NavigationProperty, ModalTypes } from '@mychoice/mychoice-sdk-components';
-import { useStoreAppConfig, useStoreFormCarVehicle, useStoreFormCarDriverBase, useStoreFormCarDiscount, StoreFormCarDiscountActionTypes, useStoreFormCarQuote, CarQuoteDataHandler, useValidationCarDiscount, StoreFormCarVehicleActionTypes, useStorePartner, useStoreDeviceType, useStoreAppLoader, useStoreAppModal, StoreConfigAppModalActionTypes, useHandlerPostal, useHandlerCarMake, useHandlerCarModel, useProvince, useValidationVehicle, StoreFormCarDriverBaseActionTypes, useStoreFormCarConfig, useStoreFormCarDriverInfo, StoreFormCarDriverInfoActionTypes, useStoreFormCarDriverLicence, addDayToDate, StoreFormCarDriverLicenceActionTypes, useStoreFormCarDriverInsurance, StoreFormCarDriverInsuranceActionTypes, useStoreFormCarDriverCancellation, StoreFormCarDriverCancellationActionTypes, useStoreFormCarDriverSuspension, StoreFormCarDriverSuspensionActionTypes, useStoreFormCarDriverAccident, StoreFormCarDriverAccidentActionTypes, useStoreFormCarDriverTicket, StoreFormCarDriverTicketActionTypes, useValidationDriver, useHandlerCarQuoterEmail, useStoreFormHomeDwelling, useStoreFormHomePostal, useStoreFormHomeApplicantBase, StoreFormHomePostalActionTypes, StoreFormHomeDwellingActionTypes, StoreConfigAppConfigActionTypes, StoreFormHomeApplicantBaseActionTypes, useValidationAddress, useStoreFormHomeApplicantInfo, useStoreFormHomeDiscount, StoreFormHomeDiscountActionTypes, StoreFormHomeApplicantInfoActionTypes, useStoreFormHomeApplicantInsurance, StoreFormHomeApplicantInsuranceActionTypes, useStoreFormHomeApplicantCancellation, StoreFormHomeApplicantCancellationActionTypes, useStoreFormHomeApplicantClaim, StoreFormHomeApplicantClaimActionTypes, useValidationApplicant, useValidationDwelling, useStoreFormHomeQuote, HomeQuoteDataHandler, useValidationHomeDiscount, useHandlerHomeQuoterEmail, useStoreFormLifeCoverage, StoreFormLifeCoverageActionTypes, useValidationCoverage, useStoreFormLifeQuote, useStoreFormLifeApplicant, LifeQuoteDataHandler, useValidationLifeApplicant, useHandlerLifeQuoterEmail, StoreFormLifeApplicantActionTypes, useStoreFormCarPostal, useStoreFormLifePostal, ClearFormDataHandler, useStoreAppDevice, useStoreClient, useHandlerAuth, useHandlerPartner, StoreConfigAppLoaderActionTypes, StoreFormCarConfigActionTypes, StoreFormCarPostalActionTypes, StoreFormCarQuoteActionTypes, StoreFormHomeQuoteActionTypes, StoreFormLifePostalActionTypes, StoreFormLifeQuoteActionTypes, StoreClientActionTypes, StoreConfigAppDeviceActionTypes, StoreProvider, initHttpResponse } from '@mychoice/mychoice-sdk-store';
+import { useStoreAppConfig, useStoreFormCarVehicle, useStoreFormCarDriverBase, useStoreFormCarDiscount, StoreFormCarDiscountActionTypes, useStoreFormCarQuote, CarQuoteDataHandler, useValidationCarDiscount, StoreFormCarVehicleActionTypes, useStoreFormHomeDiscount, useStorePartner, useStoreDeviceType, useStoreAppLoader, useStoreAppModal, StoreConfigAppModalActionTypes, useHandlerPostal, useHandlerCarMake, useHandlerCarModel, useProvince, useValidationVehicle, StoreFormCarDriverBaseActionTypes, useStoreFormCarConfig, useStoreFormCarDriverInfo, StoreFormCarDriverInfoActionTypes, useStoreFormCarDriverLicence, addDayToDate, StoreFormCarDriverLicenceActionTypes, useStoreFormCarDriverInsurance, StoreFormCarDriverInsuranceActionTypes, useStoreFormCarDriverCancellation, StoreFormCarDriverCancellationActionTypes, useStoreFormCarDriverSuspension, StoreFormCarDriverSuspensionActionTypes, useStoreFormCarDriverAccident, StoreFormCarDriverAccidentActionTypes, useStoreFormCarDriverTicket, StoreFormCarDriverTicketActionTypes, useValidationDriver, useHandlerCarQuoterEmail, useStoreFormHomeDwelling, useStoreFormHomePostal, useStoreFormHomeApplicantBase, StoreFormHomePostalActionTypes, StoreFormHomeDwellingActionTypes, StoreConfigAppConfigActionTypes, StoreFormHomeApplicantBaseActionTypes, useValidationAddress, useStoreFormHomeApplicantInfo, StoreFormHomeDiscountActionTypes, StoreFormHomeApplicantInfoActionTypes, useStoreFormHomeApplicantInsurance, StoreFormHomeApplicantInsuranceActionTypes, useStoreFormHomeApplicantCancellation, StoreFormHomeApplicantCancellationActionTypes, useStoreFormHomeApplicantClaim, StoreFormHomeApplicantClaimActionTypes, useValidationApplicant, useValidationDwelling, useStoreFormHomeQuote, HomeQuoteDataHandler, useValidationHomeDiscount, useHandlerHomeQuoterEmail, useStoreFormLifeCoverage, StoreFormLifeCoverageActionTypes, useValidationCoverage, useStoreFormLifeQuote, useStoreFormLifeApplicant, LifeQuoteDataHandler, useValidationLifeApplicant, useHandlerLifeQuoterEmail, StoreFormLifeApplicantActionTypes, useStoreFormCarPostal, useStoreFormLifePostal, ClearFormDataHandler, useStoreAppDevice, useStoreClient, useHandlerAuth, useHandlerPartner, StoreConfigAppLoaderActionTypes, StoreFormCarConfigActionTypes, StoreFormCarPostalActionTypes, StoreFormCarQuoteActionTypes, StoreFormHomeQuoteActionTypes, StoreFormLifePostalActionTypes, StoreFormLifeQuoteActionTypes, StoreClientActionTypes, StoreConfigAppDeviceActionTypes, StoreProvider, initHttpResponse } from '@mychoice/mychoice-sdk-store';
 import { useNavigate, useLocation, BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
 import { random } from 'lodash';
@@ -378,12 +378,33 @@ const VehicleOfferCoverages = ({ coverages, nonStandardCoverages, }) => {
 };
 
 const OfferSection = ({ offerCompany, brokerCompany, offerPrice, phoneNumber, isBestOffer, isFirstOffer = true, operationHours = {}, redirectUrl, fulfillmentUrl, coverages, nonStandardCoverages, brokerIntegration, }) => {
-    const { appConfigState: { appType }, } = useStoreAppConfig();
+    const { appConfigState: { appType, insuranceType }, } = useStoreAppConfig();
+    // Get discount states for broker phone
+    const { discountState: carDiscountState } = useStoreFormCarDiscount();
+    const { discountState: homeDiscountState } = useStoreFormHomeDiscount();
     const { postRequestQuoteOnliaUrl } = CarQuoteDataHandler();
     const isTheBig = appType === AppTypes.TheBig;
     const isMyChoice = isMyChoiceLike(appType);
     const isBeginInsurance = appType === AppTypes.BeginInsurance;
     const mychoiceCls = isMyChoiceLike(appType) ? 'mychoice' : '';
+    // Get broker phone from discount state
+    const getBrokerPhoneFromState = () => {
+        if (!isTheBig)
+            return undefined;
+        let discountState;
+        if (insuranceType === 'car') {
+            discountState = carDiscountState;
+        }
+        else if (insuranceType === 'home') {
+            discountState = homeDiscountState;
+        }
+        else if (insuranceType === 'life') {
+            discountState = carDiscountState;
+        }
+        return discountState?.quoterInfo?.brokerInfo?.phone;
+    };
+    const brokerPhoneFromState = getBrokerPhoneFromState();
+    const effectivePhoneNumber = brokerPhoneFromState ? formatPhoneObject(brokerPhoneFromState) : phoneNumber;
     const { weekdayHours, saturdayHours, sundayHours } = operationHours;
     const [detailsIsOpen, setDetailsIsOpenIsOpen] = useState(isBestOffer ?? false);
     const handleDropdownClick = () => {
@@ -400,6 +421,7 @@ const OfferSection = ({ offerCompany, brokerCompany, offerPrice, phoneNumber, is
         postRequestQuoteOnliaUrl(true, redirectUrl);
     };
     const isHubIntegration = brokerIntegration?.type === 'hub';
+    const isDCWIntegration = brokerIntegration?.type === 'dcw';
     return (jsxs("div", { className: `offer-section ${mychoiceCls}`, children: [shouldShowBrokerInfo && isMyChoice && (isTheBig || !offsiteUrl) && (jsxs(Fragment, { children: [jsx(OfferDetail, { className: isTheBig ? 'thebig-bold' : '', logo: brokerCompany?.logo, name: brokerCompany?.title, companyType: CompanyRoleTypes.Broker, description: brokerCompany?.description, isBestOffer: isBestOffer, isMyChoice: isMyChoice }), jsx("hr", { style: {
                             margin: '0',
                             padding: '0',
@@ -412,7 +434,7 @@ const OfferSection = ({ offerCompany, brokerCompany, offerPrice, phoneNumber, is
                             width: '100%',
                             height: '1px',
                             backgroundColor: '$color-background-header-primary',
-                        } })] })), !isHubIntegration && (jsx(OfferHeader, { className: isTheBig ? 'thebig-bold' : '', companyName: offerCompany?.name, isBestOffer: isBestOffer, isMyChoice: isMyChoice })), !isHubIntegration && (jsx(OfferPrice, { className: isTheBig ? 'thebig' : '', companyLogo: offerCompany?.logo, price: offerPrice })), isHubIntegration && (jsx("div", { className: "offer-phone hub-integration", children: jsx("div", { className: "hub-message-container", children: jsxs("p", { className: "hub-description", children: [jsx("span", { children: brokerIntegration?.data?.label }), jsx("br", {}), brokerIntegration?.data?.description] }) }) })), brokerIntegration?.type === 'youset' && brokerIntegration?.data?.url && (jsxs("div", { className: "offer-phone", children: [jsx("h3", { children: brokerIntegration?.data?.description || 'Click below to view your YouSet offer' }), jsx(ButtonBase, { className: `offer-phone-number ${mychoiceCls}`, label: brokerIntegration?.data?.label || 'View Offer', type: ButtonTypes.Button, category: CategoryTypes.Filled, color: ColorTypes.Primary, variant: ButtonVariantTypes.Rectangle, size: SizeTypes.Medium, onClick: () => window.open(brokerIntegration.data.url, '_blank') })] })), !brokerIntegration && !isTheBig && offsiteUrl && (jsxs("div", { className: "offer-phone", children: [jsx("h3", { children: "Click below to get this rate" }), jsx(ButtonBase, { className: `offer-phone-number ${mychoiceCls}`, label: "Buy Online", type: ButtonTypes.Button, category: CategoryTypes.Filled, color: ColorTypes.Primary, variant: ButtonVariantTypes.Rectangle, size: SizeTypes.Medium, onClick: handleCTAClick })] })), !brokerIntegration && (isTheBig || !offsiteUrl) && (jsxs("div", { className: "offer-phone", children: [jsx("h3", { className: isTheBig ? 'thebig-bold' : '', children: "Call now to get this rate" }), jsx("a", { target: "_blank", rel: "noreferrer noopener", href: `tel:${phoneNumber?.number}`, children: jsx(ButtonBase, { className: `${isTheBig ? 'thebig-bold' : 'mychoice'} offer-phone-number`, label: phoneNumber?.title, type: ButtonTypes.Button, category: CategoryTypes.Filled, color: ColorTypes.Primary, variant: ButtonVariantTypes.Rectangle, size: SizeTypes.Medium }) })] })), jsxs("button", { className: "dropdown", onClick: handleDropdownClick, children: [jsx("span", { children: detailsIsOpen ? 'Less Info' : 'More Info' }), jsx(IconDropdownArrow, { color: "grey", className: detailsIsOpen ? 'rotated' : '' })] }), detailsIsOpen && (jsxs("div", { className: "offer-details", children: [!isHubIntegration && (jsxs(Fragment, { children: [jsx(OfferDetail, { className: isTheBig ? 'thebig-bold' : '', name: offerCompany?.name, companyType: CompanyRoleTypes.Offering, description: offerCompany?.description, isBestOffer: !isMyChoice ? isBestOffer : false, isMyChoice: isMyChoice }), !isMyChoice && jsx("hr", {})] })), !isMyChoice && (isTheBig || !offsiteUrl) && (jsxs(Fragment, { children: [jsx(OfferDetail, { className: isTheBig ? 'thebig-bold' : '', logo: brokerCompany?.logo, name: brokerCompany?.title, companyType: CompanyRoleTypes.Broker, description: brokerCompany?.description, isMyChoice: isMyChoice }), jsx("hr", {})] })), !isMyChoice && (jsx(OfferDetail, { className: isTheBig ? 'thebig-bold' : '', name: "Hours of Operation", isMyChoice: isMyChoice, children: jsx(OperationHoursInfo, { weekdayHours: weekdayHours, saturdayHours: saturdayHours, sundayHours: sundayHours }) })), isMyChoice && coverages && (jsxs(Fragment, { children: [jsx("hr", {}), jsx(VehicleOfferCoverages, { coverages: coverages, nonStandardCoverages: nonStandardCoverages })] }))] }))] }));
+                        } })] })), !isHubIntegration && !isDCWIntegration && (jsx(OfferHeader, { className: isTheBig ? 'thebig-bold' : '', companyName: offerCompany?.name, isBestOffer: isBestOffer, isMyChoice: isMyChoice })), !isHubIntegration && !isDCWIntegration && (jsx(OfferPrice, { className: isTheBig ? 'thebig' : '', companyLogo: offerCompany?.logo, price: offerPrice })), (isHubIntegration || isDCWIntegration) && (jsx("div", { className: "offer-phone noprice-integration", children: jsx("div", { className: "noprice-message-container", children: jsxs("p", { className: "noprice-description", children: [jsx("span", { children: brokerIntegration?.data?.label }), jsx("br", {}), brokerIntegration?.data?.description] }) }) })), brokerIntegration?.type === 'youset' && brokerIntegration?.data?.url && (jsxs("div", { className: "offer-phone", children: [jsx("h3", { children: brokerIntegration?.data?.description || 'Click below to view your YouSet offer' }), jsx(ButtonBase, { className: `offer-phone-number ${mychoiceCls}`, label: brokerIntegration?.data?.label || 'View Offer', type: ButtonTypes.Button, category: CategoryTypes.Filled, color: ColorTypes.Primary, variant: ButtonVariantTypes.Rectangle, size: SizeTypes.Medium, onClick: () => window.open(brokerIntegration.data.url, '_blank') })] })), !brokerIntegration && !isTheBig && offsiteUrl && (jsxs("div", { className: "offer-phone", children: [jsx("h3", { children: "Click below to get this rate" }), jsx(ButtonBase, { className: `offer-phone-number ${mychoiceCls}`, label: "Buy Online", type: ButtonTypes.Button, category: CategoryTypes.Filled, color: ColorTypes.Primary, variant: ButtonVariantTypes.Rectangle, size: SizeTypes.Medium, onClick: handleCTAClick })] })), !brokerIntegration && (isTheBig || !offsiteUrl) && (jsxs("div", { className: "offer-phone", children: [jsx("h3", { className: isTheBig ? 'thebig-bold' : '', children: "Call now to get this rate" }), jsx("a", { target: "_blank", rel: "noreferrer noopener", href: `tel:${effectivePhoneNumber?.number}`, children: jsx(ButtonBase, { className: `${isTheBig ? 'thebig-bold' : 'mychoice'} offer-phone-number`, label: effectivePhoneNumber?.title, type: ButtonTypes.Button, category: CategoryTypes.Filled, color: ColorTypes.Primary, variant: ButtonVariantTypes.Rectangle, size: SizeTypes.Medium }) })] })), jsxs("button", { className: "dropdown", onClick: handleDropdownClick, children: [jsx("span", { children: detailsIsOpen ? 'Less Info' : 'More Info' }), jsx(IconDropdownArrow, { color: "grey", className: detailsIsOpen ? 'rotated' : '' })] }), detailsIsOpen && (jsxs("div", { className: "offer-details", children: [!isHubIntegration && (jsxs(Fragment, { children: [jsx(OfferDetail, { className: isTheBig ? 'thebig-bold' : '', name: offerCompany?.name, companyType: CompanyRoleTypes.Offering, description: offerCompany?.description, isBestOffer: !isMyChoice ? isBestOffer : false, isMyChoice: isMyChoice }), !isMyChoice && jsx("hr", {})] })), !isMyChoice && (isTheBig || !offsiteUrl) && (jsxs(Fragment, { children: [jsx(OfferDetail, { className: isTheBig ? 'thebig-bold' : '', logo: brokerCompany?.logo, name: brokerCompany?.title, companyType: CompanyRoleTypes.Broker, description: brokerCompany?.description, isMyChoice: isMyChoice }), jsx("hr", {})] })), !isMyChoice && (jsx(OfferDetail, { className: isTheBig ? 'thebig-bold' : '', name: "Hours of Operation", isMyChoice: isMyChoice, children: jsx(OperationHoursInfo, { weekdayHours: weekdayHours, saturdayHours: saturdayHours, sundayHours: sundayHours }) })), isMyChoice && coverages && (jsxs(Fragment, { children: [jsx("hr", {}), jsx(VehicleOfferCoverages, { coverages: coverages, nonStandardCoverages: nonStandardCoverages })] }))] }))] }));
 };
 OfferSection.defaultProps = {
     offerPrice: { monthly: 0, yearly: 0 },