jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CASH-816

Browse source 
CASH-816 fixed all of adams comments + got additionalButtonDataFunctional, and hopefully fixed unit tests
This commit is contained in:
Johnny shultz 2025-06-30 22:52:55 -04:00
parent adfb325fae
commit 1b12017f63
5 changed files with 56 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/digital-components/textbox-question/textbox-question.vue
View file

@ -265,10 +265,6 @@ export default {
.input-wrapper {
position: relative;
&.has-search-icon {
.form-control {
border-radius: 48px;
padding-left: 1.5rem;
}
button[type="submit"] {
position: absolute;
top: 50%;
@ -277,11 +273,10 @@ export default {
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7817 14.7328L11.8252 10.7762C12.8833 9.45005 13.3936 7.76911 13.2513 6.07849C13.1091 4.38788 12.325 2.81587 11.0601 1.6852C9.79515 0.554524 8.14538 -0.0490261 6.44946 -0.00154744C4.75353 0.0459312 3.14012 0.740836 1.94045 1.94051C0.740775 3.14018 0.0458701 4.75359 -0.00160848 6.44952C-0.0490871 8.14545 0.554463 9.79521 1.68514 11.0601C2.81581 12.325 4.38782 13.1091 6.07843 13.2514C7.76905 13.3937 9.44999 12.8834 10.7762 11.8252L14.7349 15.7839C14.8044 15.8527 14.8869 15.907 14.9774 15.9439C15.068 15.9808 15.165 15.9995 15.2628 15.9989C15.3606 15.9983 15.4573 15.9784 15.5475 15.9405C15.6376 15.9025 15.7194 15.8471 15.7881 15.7776C15.8568 15.708 15.9112 15.6256 15.9481 15.535C15.985 15.4444 16.0036 15.3474 16.0031 15.2496C16.0025 15.1518 15.9826 15.0551 15.9446 14.965C15.9067 14.8748 15.8513 14.7931 15.7817 14.7243V14.7328ZM6.63737 11.7913C5.61803 11.7913 4.62157 11.4891 3.77402 10.9228C2.92646 10.3564 2.26587 9.5515 1.87578 8.60975C1.4857 7.668 1.38363 6.63172 1.5825 5.63196C1.78136 4.6322 2.27222 3.71386 2.99301 2.99307C3.7138 2.27229 4.63214 1.78142 5.6319 1.58256C6.63166 1.38369 7.66793 1.48576 8.60969 1.87585C9.55144 2.26593 10.3564 2.92652 10.9227 3.77408C11.489 4.62163 11.7913 5.61809 11.7913 6.63743C11.7896 8.00382 11.2461 9.31376 10.2799 10.2799C9.3137 11.2461 8.00376 11.7897 6.63737 11.7913Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: center;
//background-color: transparent;
background-color: transparent;
width: 2.75rem;
height: 100%;
border: none;
border-radius: 0 48px 48px 0;
display: flex;
&:hover {
cursor: default;
@ -358,7 +353,6 @@ export default {
&:hover {
box-shadow: 0 0 0 4px transparent;
border: 1px solid $gray-500;
//border-radius: 48px;
}
}
&:hover {
@ -370,14 +364,4 @@ export default {
display: none;
}
}
.search-icon-button {
background-color: #e5f1fa;
}
.search-icon-button:hover,
.search-icon-button:focus {
border: 1px solid $gray-500;
box-shadow: 0 0 0 4px $blue-300;
background-color: #e5f1fa; // keep the background on hover
outline: none;
}
</style>

12
src/layouts/service-location/service-location.vue
View file

@ -23,7 +23,6 @@
@updated-serviceability="setServiceabilityDetails"
@updated-contains-military-base="setContainsMilitaryBase"
@updated-bill-to-account-number="setBillToAccountNumber"
@updated-zipcode-ctu="setZipcodeCtu"
linkWidgetName="ServiceZipLinkWidget"
modalWidgetName="ServiceZipModalWidget" />
@ -91,7 +90,7 @@
<div class="row justify-content-center">
<div class="col-md-6 col-xl-4">
<button-question
v-if="selectedAppointmentType === 'Inshop'"
v-if="selectedAppointmentType == appointmentTypeStrings.IN_SHOP"
class="shop-question-button"
ref="buttonQuestion"
:answers="selectedShopAnswer"
@ -124,7 +123,7 @@
@updated-serviceability="setServiceabilityDetails"
@shop-selected="onShopSelected"
@update:modelValue="onShopModelUpdated"
@updated-zipcode-ctu="onZipCodeCtuUpdated"
@updated-zipcode-ctu="setZipcodeCtu"
@update-shop-provider-data="shopProviderData = $event"
:zipCode="zipCode"
:isDisplayed="isShopQuestionDisplayed"
@ -488,7 +487,7 @@ export default {
buttonLabel: `${city}`,
buttonLabelSubCopy: `${distanceInMiles} mi`,
buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
//additionalButtonData: this.additionalButtonData,
additionalButtonData: this.additionalButtonData,
value: this.selectedProvider.providerNumber,
},
];
@ -498,6 +497,9 @@ export default {
questionText() {
return this.getCmsContent("YourSafeliteShopWidget", "QuestionText");
},
appointmentTypeStrings() {
return AppointmentTypeStrings;
},
},
methods: {
arePagePrerequisitesValid() {
@ -953,7 +955,7 @@ export default {
}
}
.shop-question-button .list-button-content {
background: #e4f1f7 !important;
background: $blue-100 !important;
box-shadow: 0 0 0 1px $primary !important;
}
</style>

2
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
View file

@ -49,7 +49,6 @@ import textLink from "@/ux-components/text-link/text-link";
import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question";
import modal from "@/digital-components/modal/modal";
import alert from "@/ux-components/alert/alert";
import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
import {
getPricedMobileFeePart,
@ -246,7 +245,6 @@ export default {
serviceZipQuestion,
modal,
alert,
// shopQuestion
},
};
</script>

51
src/layouts/service-location/shop-question/shop-question-popup.vue
View file

@ -29,6 +29,7 @@
<div class="zip-search-input">
<serviceZipQuestion
ref="serviceZipQuestion"
class="shop-question-zipcode"
customInputId="serviceZipCode"
v-model="internalModel.zipCode"
v-on="{ 'textboxQuestionEvent.inputIdAssigned': onInputIdAssigned }"
@ -295,6 +296,13 @@ export default {
const zipCode = shopProvider.address.zipCode;
const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
// const startDate = new Date();
// const endDate = new Date();
// endDate.setDate(startDate.getDate() + 6);
// const formattedStartDate = startDate.toISOString().split("T")[0];
// const formattedEndDate = endDate.toISOString().split("T")[0];
return {
buttonLabel: city,
buttonLabelSubCopy: `${distanceInMiles} mi`,
@ -370,14 +378,14 @@ export default {
onModalOpened() {
this.shopIndex = 3;
this.internalModel = this.copyModel(this.modelValue);
this.internalModel.zipCode = this.zipCode; // Always use the parent's current zip
this.localShopProviderData = this.shopProviderData; // Always use the parent's current shop data
this.internalModel.zipCode = this.zipCode;
this.localShopProviderData = this.shopProviderData;
this.answers = [];
this.updateShopsForZip(this.internalModel.zipCode);
this.focusOnZipInput();
this.selectedProviderNumber = this.preSelectedProviderNumber;
if (this.internalModel.zipCode && this.shopProviders.length > 0) {
this.updateShopsForZip(this.internalModel.zipCode); // or directly call updateShopsForZip(this.internalModel.zipCode)
this.updateShopsForZip(this.internalModel.zipCode);
} else {
this.internalModel.zipCode = this.zipCode;
this.updateShopsForZip(this.internalModel.zipCode);
@ -405,9 +413,6 @@ export default {
if (!selectedProvider && this.shopProviders.length > 0) {
selectedProvider = this.shopProviders[0];
}
// if (!this.displayNoShopsAlert) {
// this.$emit("shop-selected", selectedProvider);
// }
},
resetsOnZipInput() {
this.resetAlerts();
@ -447,6 +452,11 @@ export default {
}
},
async updateShopsForZip(zipCode) {
if (!this.selectedAppointmentType) {
this.answers = [];
this.isLoadingShops = false;
return;
}
this.lastSearchedZip = zipCode;
if (!zipCode) {
this.isLoadingShops = false;
@ -474,11 +484,23 @@ export default {
const zipCode = shopProvider.address.zipCode;
const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
const startDate = new Date();
const endDate = new Date();
endDate.setDate(startDate.getDate() + 6);
const formattedStartDate = startDate.toISOString().split("T")[0];
const formattedEndDate = endDate.toISOString().split("T")[0];
return {
buttonLabel: city,
buttonLabelSubCopy: `${distanceInMiles} mi`,
buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
additionalButtonData: this.additionalButtonData,
additionalButtonData: {
availabilityRatingCallback: getAvailabilityRating,
startDate: formattedStartDate,
endDate: formattedEndDate,
shopAppointmentType: this.selectedAppointmentType,
},
value: shopProvider.providerNumber,
};
});
@ -706,4 +728,19 @@ export default {
margin-left: auto;
margin-right: auto;
}
.shop-question-zipcode .search-icon-button {
background-color: #e5f1fa !important;
border-radius: 0 48px 48px 0;
}
.shop-question-zipcode .search-icon-button:hover,
.shop-question-zipcode .search-icon-button:focus {
border: 1px solid $gray-500;
box-shadow: 0 0 0 4px $blue-300;
background-color: #e5f1fa;
outline: none;
}
.shop-question-zipcode .input-wrapper.has-search-icon .form-control {
border-radius: 48px;
padding-left: 1.5rem;
}
</style>

22
src/layouts/service-location/shop-question/shop-question.vue
View file

@ -20,7 +20,7 @@
v-model="selectedProviderNumber"
isRequired
validationRules="option-required" />
<!-- <textLink
<textLink
v-if="displaySeeMoreLocationsLink"
ref="showMoreShopsLink"
class="show-more-shops-link"
@ -29,8 +29,8 @@
linkType="text"
:text="showMoreShopsLinkText"
href="#!"
@click-event="getNextShopsFromList(1)"
:aria-label="showMoreShopsLinkText" /> -->
@click-event="getNextShopsFromList(3)"
:aria-label="showMoreShopsLinkText" />
</div>
</transition>
</template>
@ -41,8 +41,6 @@ import alert from "@/ux-components/alert/alert";
import buttonQuestion from "@/digital-components/button-question/button-question";
import shopListButton from "./shop-list-button/shop-list-button";
import textLink from "@/ux-components/text-link/text-link";
//import shopQuestionPopup from "@/layouts/service-location/shop-question/shop-question-popup";
//import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
// Supporting files
import { defineRule } from "vee-validate";
@ -236,13 +234,6 @@ export default {
await nextTick();
}
},
onShopSelectedFromPopup(providerNumber) {
// Option 1: Update local state and emit up
this.$emit("shop-selected", providerNumber);
// Option 2: If you want to update local state only, do:
// this.pendingSelectedProvider = providerNumber;
},
},
watch: {
selectedAppointmentType: {
@ -267,13 +258,8 @@ export default {
components: {
alert,
buttonQuestion,
//textLink,
//shopQuestionPopup,
//serviceZipModalQuestion,
textLink,
},
// mounted(){
// console.log("shopProviderData" + this.shopProviderData);
// }
};
</script>