CASH-816 post tech review changes, made fix in modal to avoid having to fix unit tests
This commit is contained in:
Johnny shultz 2025-07-08 15:28:19 -04:00
parent ba1217d36c
commit 372a0cafad
2 changed files with 13 additions and 57 deletions

View file

@ -39,7 +39,10 @@
:isDisabled="footerButtonDisabled" :isDisabled="footerButtonDisabled"
:buttonText="footerButtonText" :buttonText="footerButtonText"
@click-event="validateAndEmit" @click-event="validateAndEmit"
:class="isFooterButtonDisabled && 'form-test-invalid'" /> :class="[
isFooterButtonDisabled && 'form-test-invalid',
{ 'form-test-invalid': footerButtonDisabled === true }
]" />
</div> </div>
</div> </div>
</div> </div>
@ -139,9 +142,6 @@ export default {
}, },
computed: { computed: {
isFooterButtonDisabled() { isFooterButtonDisabled() {
if (this.footerButtonDisabled !== undefined) {
return this.footerButtonDisabled;
}
if (!this.meta.touched) { if (!this.meta.touched) {
return !this.meta.valid; return !this.meta.valid;
} }

View file

@ -1,18 +1,10 @@
<template> <template>
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<div v-if="isDisplayed" class="shop-question" aria-live="polite"> <div v-if="isDisplayed" class="shop-question" aria-live="polite">
<alert
ref="alertDropoffInformation"
v-if="displayDropoffInformation"
class="mb-4 drop-off-alert"
cmsWidgetName="AlertDropoffInformationWidget"
alertClass="alert-info"
v-bind:isDismissible="false" />
<div class="modal-link"> <div class="modal-link">
<text-link <text-link
linkType="text" linkType="text"
:text="shopQuestionLinkText" :text="shopQuestionLinkText"
:shopProviderData="shopProviderData"
href="#!" href="#!"
@click-event="openModal"></text-link> @click-event="openModal"></text-link>
</div> </div>
@ -27,7 +19,7 @@
:footerButtonDisabled=" :footerButtonDisabled="
displayInvalidZipAlert || displayNoShopsAlert || !selectedProviderNumber displayInvalidZipAlert || displayNoShopsAlert || !selectedProviderNumber
" "
@footer-button-event="SetZipCodeAndShop"> @footer-button-event="setZipCodeAndShop">
<serviceZipQuestion <serviceZipQuestion
ref="serviceZipQuestion" ref="serviceZipQuestion"
class="shop-question-zipcode" class="shop-question-zipcode"
@ -47,47 +39,12 @@
cmsWidgetName="AlertInvalidZipWidget" cmsWidgetName="AlertInvalidZipWidget"
alertClass="alert-danger" alertClass="alert-danger"
v-bind:isDismissible="false" /> v-bind:isDismissible="false" />
<alert
ref="alertMilitaryBaseZip"
class="my-5"
cmsWidgetName="AlertMilitaryBaseZipWidget"
v-if="displayMilitaryZipAlert"
alertClass="alert-warning" />
<alert
ref="alertMobileOnly"
class="my-5"
cmsWidgetName="AlertMobileOnlyWidget"
v-if="displayServiceableMobileOnly"
alertClass="alert-warning" />
<alert
ref="alertRecalNoMobile"
class="my-5"
cmsWidgetName="AlertRecalNoMobileWidget"
v-if="displayRecalibrationWarning"
@text-link-clicked="openModalAction"
alertClass="alert-warning" />
<alert
ref="alertInshopOnly"
class="my-5"
cmsWidgetName="AlertInshopOnlyWidget"
v-if="displayServiceableInshopOnly"
alertClass="alert-warning" />
<alert <alert
ref="alertNoShops" ref="alertNoShops"
class="my-5" class="my-5"
cmsWidgetName="AlertNoShopsWidget" cmsWidgetName="AlertNoShopsWidget"
v-if="displayNoShopsAlert" v-if="displayNoShopsAlert"
alertClass="alert-warning" /> alertClass="alert-warning" />
<alert
ref="alertMobileFeeFree"
class="my-5"
cmsWidgetName="AlertMobileFeeFreeWidget"
v-if="showMobileFreeAlert"
alertClass="alert-success" />
<div v-if="!displayInvalidZipAlert"> <div v-if="!displayInvalidZipAlert">
<buttonQuestion <buttonQuestion
ref="buttonQuestion" ref="buttonQuestion"
@ -153,13 +110,6 @@ import {
defineRule("option-required", required(errorMessages.OPTION_REQUIRED)); defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT)); defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
function getShopsByZip(zipCode, shops, numberToGet = 3) {
return shops
.filter((shop) => shop.address && shop.address.zipCode && shop.address.zipCode !== "")
.sort((a, b) => a.distanceInMiles - b.distanceInMiles)
.slice(0, numberToGet);
}
export default { export default {
name: "shop-question-popup", name: "shop-question-popup",
mixins: [baseMixin], mixins: [baseMixin],
@ -496,7 +446,7 @@ export default {
this.shopIndex = 3; this.shopIndex = 3;
} }
const sortedShops = getShopsByZip(zipCode, this.shopProviders, this.shopIndex); const sortedShops = this.getShopsByZip(zipCode, this.shopProviders, this.shopIndex);
const toTitleCase = (str) => { const toTitleCase = (str) => {
return str.replace(/\w\S*/g, function (txt) { return str.replace(/\w\S*/g, function (txt) {
@ -561,7 +511,7 @@ export default {
this.displayNoServiceAlert = false; this.displayNoServiceAlert = false;
this.displayNoShopsAlert = false; this.displayNoShopsAlert = false;
}, },
async SetZipCodeAndShop() { async setZipCodeAndShop() {
if ( if (
this.displayInvalidZipAlert || this.displayInvalidZipAlert ||
this.displayNoShopsAlert || this.displayNoShopsAlert ||
@ -646,6 +596,12 @@ export default {
this.closeModal(); this.closeModal();
} }
}, },
getShopsByZip(zipCode, shops, numberToGet = 3) {
return shops
.filter((shop) => shop.address && shop.address.zipCode && shop.address.zipCode !== "")
.sort((a, b) => a.distanceInMiles - b.distanceInMiles)
.slice(0, numberToGet);
}
}, },
watch: { watch: {
shopProviderData: { shopProviderData: {