diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index 2df23f7b..5c380612 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -329,7 +329,7 @@ export default { } .question-text { - margin-bottom: .625rem; + margin-bottom: 1rem; font-size: 1rem; line-height: 1.625rem; diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue index 97f18ee6..a7fa9cad 100644 --- a/src/digital-components/modal/modal.vue +++ b/src/digital-components/modal/modal.vue @@ -17,11 +17,11 @@ role="dialog" aria-modal="true"> - + :isDisplayed="isInshop" + :selectAppointmentType="selectedAppointmentType" + modalWidgetName="ChangeLocationModalWidget" + cmsWidgetName="ShopAddressWidget" /> { @@ -155,7 +141,6 @@ defineRule('mobile-location-required', (value) => { }); defineRule('selection-required', required(errorMessages.OPTION_REQUIRED)); -const SHOP_QUESTION_REF_NAME = 'shopQuestion'; const RECAL_MODAL_REF_NAME = 'RecalModal'; const SITE_FOOTER_REF_NAME = 'siteFooter'; @@ -172,7 +157,7 @@ export default { // eslint-disable-next-line vue/no-reserved-component-names Form, serviceZipModalQuestion, - shopQuestion + shopAddress }, mixins: [baseFormMixin], async beforeRouteEnter(to, from, next) { @@ -182,8 +167,8 @@ export default { const zipCodeData = getZipCodeData(serviceZipCode); const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode); const serviceabilityDetailsPromise = getServiceabilityDetails(serviceZipCode); - const shopQuestionInitialDataPromise = shopQuestion.methods.loadInitialData(serviceZipCode); const getGlassFeesPromise = useMainStore().getGlassFees(); + const providersPromise = useMainStore().getProviders(serviceZipCode); // Settle promises and get results const promiseResultMap = [ @@ -203,13 +188,13 @@ export default { resultKey: 'serviceabilityDetails', promise: serviceabilityDetailsPromise }, - { - resultKey: 'shopQuestionInitialData', - promise: shopQuestionInitialDataPromise - }, { resultKey: 'zipCodeData', promise: zipCodeData + }, + { + resultKey: 'providers', + promise: providersPromise } ]; @@ -221,10 +206,9 @@ export default { resultMap.zipCodeData, resultMap.serviceabilityDetails, resultMap.mobileFeePart, - resultMap.shopQuestionInitialData?.mobileProviderNumber, - resultMap.glassFees + resultMap.glassFees, + resultMap.providers ); - vm.$refs[SHOP_QUESTION_REF_NAME].initializeComponent(resultMap.shopQuestionInitialData); }); }, setup() { @@ -249,7 +233,6 @@ export default { mobileProviderNumber: null, zipContainsMilitaryBase: false, zipCodeCtu: null, - SHOP_QUESTION_REF_NAME, RECAL_MODAL_REF_NAME, SITE_FOOTER_REF_NAME }; @@ -264,27 +247,6 @@ export default { answersFromCms() { return this.getCmsContent('ServiceTypeQuestionWidget', 'Answers'); }, - serviceZipCodeQuestion: { - get() { - return { - state: this.state, - zipCode: this.zipCode - }; - }, - set(newValue) { - if (newValue.zipCode !== this.zipCode) { - this.resetMobileLocation(); - this.selectedAppointmentType = null; - this.selectedProvider = null; - } - - this.state = newValue.state; - this.zipCode = newValue.zipCode; - - // eslint-disable-next-line vue/valid-next-tick - this.$nextTick(); - } - }, mobileLocationQuestions: { get() { return { @@ -307,12 +269,7 @@ export default { this.isVehicleProtected = newValue.isVehicleProtected; if (newValue.zipCode !== this.zipCode) { - if ( - !( - this.selectedAppointmentType === AppointmentTypeStrings.MOBILE - || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP - ) - ) { + if (!this.isMobile) { this.selectedAppointmentType = null; } this.selectedProvider = null; @@ -338,7 +295,7 @@ export default { return this.isGlassServiceableInshop; }, - isShopQuestionDisplayed() { + isInshop() { return ( this.selectedAppointmentType === 'Inshop' || this.selectedAppointmentType === 'Dropoff' @@ -347,7 +304,7 @@ export default { isAppointmentTypeDisplayed() { return this.zipCode && !this.displayNoShopsAlert; }, - isMobileLocationDisplayed() { + isMobile() { return ( this.selectedAppointmentType === AppointmentTypeStrings.MOBILE @@ -401,9 +358,6 @@ export default { useMainStore().order.serviceLocation.zipCode !== null ); }, - async reloadShopData(zipCode) { - await this.$refs[SHOP_QUESTION_REF_NAME].reloadShopData(zipCode); - }, async forwardButtonAction() { let provider = this.selectedProvider; this.mainStore.updateMobileFee(null); @@ -482,8 +436,8 @@ export default { zipCodeData, serviceabilityDetails, mobileFeePart, - mobileProviderNumber, - glassFees + glassFees, + providers ) { if (zipCodeData) { this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase; @@ -498,8 +452,11 @@ export default { this.mobileFeePart = mobileFeePart; } - if (mobileProviderNumber) { - this.setMobileProviderNumber(mobileProviderNumber); + if (providers) { + this.setMobileProviderNumber(providers.mobileProviderNumber); + if(providers.shopProviders.length > 0) { + this.selectedProvider = providers.shopProviders[0]; + } } if (glassFees) { diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue index a537526a..4dee9661 100644 --- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue +++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue @@ -34,7 +34,7 @@ + + diff --git a/src/store/index.js b/src/store/index.js index 14106bf2..ef1b7f52 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1011,14 +1011,13 @@ export const useMainStore = defineStore({ }); }, - getProviders(serviceZipCode) { + getProviders(serviceZipCode, shopRadiusInMiles = 100) { const { carId, isBigTruck } = this.order.vehicle; const damageType = this.damage.isRepair ? 'Repair' : 'Replace'; const { parentAccountNumber } = this.order; const partsWithRecal = getTopLevelGlassPartsWithRecal(this.order.lineItems.glassParts); const windshieldPartWithRecal = partsWithRecal?.length > 0 ? partsWithRecal[0] : null; const safeliteOnly = true; - const shopRadiusInMiles = 100; let url = `${endpoints.GetProviders.url}/${serviceZipCode}/${damageType}/${shopRadiusInMiles}/${parentAccountNumber}/${safeliteOnly}/${carId}`; if (windshieldPartWithRecal) { diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss index 47914dbd..56bd5bad 100644 --- a/src/styles/ux-variables.scss +++ b/src/styles/ux-variables.scss @@ -145,7 +145,7 @@ $font-weight-lighter: lighter; $font-weight-light: 300; $font-weight-normal: 400; $font-weight-bold: 500; -$font-weight-bolder: bolder; +$font-weight-bolder: 600; //Border Radius diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue index 2c22bc70..24a46018 100644 --- a/src/ux-components/list-button/list-button.vue +++ b/src/ux-components/list-button/list-button.vue @@ -85,7 +85,7 @@ export default { color: $black; font-weight: 500; background: #e7f1f6; - border-color: #0070d1; + border-color: $heritage-blue-primary; } &:checked + .list-button-content p, &:checked + .list-button-content span { diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue index 31f989c9..7b65c45e 100644 --- a/src/ux-components/text-link/text-link.vue +++ b/src/ux-components/text-link/text-link.vue @@ -62,7 +62,7 @@ export default {