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

CASH-816

Browse source 
CASH-816 progress so far
This commit is contained in:
Johnny shultz 2025-06-23 17:31:53 -04:00
parent 9bb71a6e58
commit f7bb4f3736
5 changed files with 670 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -107,14 +107,27 @@
@setMobileLocation="setMobileLocationQuestions"
@set-mobile-location-invalid="setMobileLocationInValid" />
<shopQuestion
<!-- <shopQuestion
ref="shopQuestion"
v-show="isShopQuestionDisplayed"
v-model="selectedProvider"
:selectedAppointmentType="selectedAppointmentType"
:shopProviderData="shopProviderData"
:isDisplayed="isShopQuestionDisplayed"
cmsWidgetName="ShopQuestionWidget" />
cmsWidgetName="YourSafeliteShopWidget" /> -->
<!-- <div>
</div> -->
<shopQuestionPopup
modalWidgetName="ShopQuestionPopupWidget"
:selectedAppointmentType="selectedAppointmentType"
:shopProviderData="shopProviderData"
@shop-selected="onShopSelected"
v-model="selectedProvider"
:isDisplayed="isShopQuestionDisplayed"
cmsWidgetName="YourSafeliteShopWidget" />
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
@ -137,6 +150,7 @@ import serviceZipModalQuestion from "@/layouts/service-location/service-zip-moda
import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
import shopQuestionPopup from "@/layouts/service-location/shop-question/shop-question-popup";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
@ -763,6 +777,13 @@ export default {
setMobileLocationInValid(isMobileLocationInValid) {
this.isMobileAddressValid = !isMobileLocationInValid;
},
onShopSelected(providerNumber) {
// Find the provider object from your shopProviderData
const selectedProvider = this.shopProviderData.shopProviders.find(
(p) => p.providerNumber === providerNumber
);
this.selectedProvider = selectedProvider;
},
},
watch: {
zipCode: {
@ -814,7 +835,8 @@ export default {
Form,
loadingModal,
contentGroupModal,
shopQuestion,
//shopQuestion,
shopQuestionPopup,
},
};
</script>

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

@ -49,6 +49,7 @@ 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,
@ -245,6 +246,7 @@ export default {
serviceZipQuestion,
modal,
alert,
// shopQuestion
},
};
</script>

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

@ -8,8 +8,8 @@
cornerStyle="rounded"
mask="#####"
:displayQuestionText="false"
isRequired
validationRules="zip-required|zip-format" />
:isRequired="isRequired"
:validationRules="computedValidationRules" />
</template>
<script>
@ -31,6 +31,10 @@ export default {
serviceZipCode: String,
},
cmsWidgetName: String,
isRequired: {
type: Boolean,
default: true,
},
},
computed: {
value: {
@ -41,6 +45,9 @@ export default {
this.$emit("update:modelValue", newValue);
},
},
computedValidationRules() {
return this.isRequired ? "zip-required|zip-format" : "zip-format";
},
},
components: {
textboxQuestion,

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

@ -0,0 +1,615 @@
<template>
<transition name="fade" mode="out-in">
<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" />
<buttonQuestion
ref="buttonQuestion"
buttonTypeString="shopListButton"
:buttonTypeObject="shopListButton"
class="radioQuestion"
:questionText="questionText"
:answers="answers"
groupName="chooseShop"
textPosition="text-start"
v-model="selectedProviderNumber"
isRequired
validationRules="option-required" />
<!-- <textLink
v-if="displaySeeMoreLocationsLink"
ref="showMoreShopsLink"
class="show-more-shops-link"
id="showMoreShopsId"
cmsWidgetName="ShowMoreShopsLinkWidget"
linkType="text"
:text="showMoreShopsLinkText"
href="#!"
@click-event="getNextShopsFromList(1)"
:aria-label="showMoreShopsLinkText" /> -->
<div class="modal-link">
<text-link
linkType="text"
:text="shopQuestionLinkText"
:shopProviderData="shopProviderData"
href="#!"
@click-event="openModal"></text-link>
</div>
</div>
</transition>
<modal
ref="shopQuestionModal"
:headerText="modalHeaderText"
:footerButtonText="modalFooterText"
@footer-button-event="onSaveShop">
<serviceZipQuestion
ref="serviceZipQuestion"
customInputId="serviceZipCode"
v-model="internalModel.zipCode"
v-on="{ 'textboxQuestionEvent.inputIdAssigned': onInputIdAssigned }"
cmsWidgetName="ServiceZipQuestionWidget"
:isRequired="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
ref="alertNoShops"
class="my-5"
cmsWidgetName="AlertNoShopsWidget"
v-if="displayNoShopsAlert"
alertClass="alert-warning" />
<alert
ref="alertMobileFeeFree"
class="my-5"
cmsWidgetName="AlertMobileFeeFreeWidget"
v-if="showMobileFreeAlert"
alertClass="alert-success" />
<buttonQuestion
ref="buttonQuestion"
buttonTypeString="shopListButton"
:buttonTypeObject="shopListButton"
class="radioQuestion"
:questionText="questionText"
:answers="answers"
groupName="chooseShop"
textPosition="text-start"
v-model="selectedProviderNumber"
isRequired
validationRules="option-required" />
<input
type="hidden"
name="selectedProviderNumber"
:value="selectedProviderNumber"
v-validate="'required'" />
<textLink
v-if="displaySeeMoreLocationsLink"
ref="showMoreShopsLink"
class="show-more-shops-link"
id="showMoreShopsId2"
cmsWidgetName="ShowMoreShopsLinkWidget"
linkType="text"
:text="showMoreShopsLinkText"
href="#!"
@click-event="getNextShopsFromList(3)"
:aria-label="showMoreShopsLinkText" />
</modal>
</template>
<script>
// Components
// 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 shopQuestion from "@/layouts/service-location/shop-question/shop-question.vue";
import modal from "@/digital-components/modal/modal";
import textLink from "@/ux-components/text-link/text-link.vue";
import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question.vue";
import buttonQuestion from "@/digital-components/button-question/button-question.vue";
import alert from "@/ux-components/alert/alert.vue";
import shopListButton from "./shop-list-button/shop-list-button";
//import input from "@/ux-components/input/input.vue";
// Supporting files
import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import baseMixin from "@/mixins/base-mixin.js";
import { nextTick } from "vue";
import { getAvailabilityRating } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
import { Provider } from "@/layouts/service-location/classes/provider";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
export default {
name: "shop-question",
mixins: [baseMixin],
data() {
return {
isShopQuestionDisplayed: true,
internalModel: this.copyModel(this.modelValue),
answers: [],
shopListButton: shopListButton,
shopIndex: 0,
displaySeeMoreLocationsLink: false,
};
},
props: {
// modelValue: {
// type: Object,
// default: () => null,
// },
selectedAppointmentType: String,
shopProviderData: Object,
modelValue: {
type: Object,
default: () => ({
state: "",
zipCode: "",
}),
},
// cmsWidgetName: String,
// validationRules: String,
isDisplayed: Boolean,
modelWidgetName: {
type: String,
required: true,
},
},
// computed: {
// questionText() {
// return this.getCmsContent(this.cmsWidgetName, "QuestionText");
// },
// shopProviders() {
// return this.shopProviderData?.shopProviders ?? [];
// },
// selectedValue: {
// get: function () {
// return this.modelValue;
// },
// set: function (newValue) {
// this.$emit("update:modelValue", newValue);
// },
// },
// selectedProviderNumber: {
// get: function () {
// return this.selectedValue?.providerNumber;
// },
// set: function (newValue) {
// // Button Question only supports Number, or String data types so we must get the full object to emit
// this.selectedValue = this.getSelectedProviderObject(newValue);
// },
// },
// displayDropoffInformation() {
// return this.selectedAppointmentType == "Dropoff";
// },
// showMoreShopsLinkText() {
// return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
// },
// additionalButtonData() {
// 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 {
// availabilityRatingCallback: getAvailabilityRating,
// startDate: formattedStartDate,
// endDate: formattedEndDate,
// shopAppointmentType: this.selectedAppointmentType,
// };
// },
// },
// methods: {
// async getNextShopsFromList(numberToGet = 3) {
// const logFirstShopsDisplayed = this.shopIndex == 0;
// const shopIterator = (array, n) => {
// const l = array.length;
// return () => {
// const end = this.shopIndex + n;
// const part = array.slice(this.shopIndex, end);
// this.shopIndex = end < l ? end : this.shopProviders.length;
// return part;
// };
// };
// const toTitleCase = (str) => {
// return str.replace(/\w\S*/g, function (txt) {
// return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
// });
// };
// const nextShop = shopIterator(this.shopProviders, numberToGet);
// // Map API result data
// const mappedData = nextShop().map((shopProvider) => {
// const streetAddress = toTitleCase(shopProvider.address.streetAddress);
// const city = toTitleCase(shopProvider.address.city);
// const state = shopProvider.address.state;
// const zipCode = shopProvider.address.zipCode;
// const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
// return {
// buttonLabel: city,
// buttonLabelSubCopy: `${distanceInMiles} mi`,
// buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
// additionalButtonData: this.additionalButtonData,
// value: shopProvider.providerNumber,
// };
// });
// var gaAction = this.GaActions.MORE_LOCATIONS_CLICKED;
// if (logFirstShopsDisplayed) {
// gaAction = this.GaActions.SHOPS_FIRST_DISPLAYED;
// }
// if (
// this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP ||
// this.selectedAppointmentType === AppointmentTypeStrings.DROP_OFF
// ) {
// var shops = mappedData.map((shop) => {
// if (shop.value.length > 5 && shop.value.startsWith("00")) {
// return shop.value.substring(1);
// } else {
// return shop.value;
// }
// });
// var joinedShops = shops.join(",");
// if (!joinedShops) {
// joinedShops = "no-shops";
// }
// this.pushEventToGA(this.GaCategories.SERVICE_LOCATION, gaAction, joinedShops, true);
// }
// if (this.answers.length === 0) {
// this.answers = mappedData;
// } else {
// mappedData.forEach((shop) => {
// this.answers.push(shop);
// });
// }
// await nextTick();
// if (this.shopIndex == this.shopProviders.length) {
// this.displaySeeMoreLocationsLink = false;
// } else {
// this.displaySeeMoreLocationsLink = true;
// }
// await nextTick();
// this.scrollToPageBottom();
// },
// resetAnswers() {
// this.answers = [];
// this.shopIndex = 0;
// },
// getSelectedProviderObject(providerNumber) {
// const provider =
// this.shopProviders?.find((provider) => provider.providerNumber == providerNumber) ??
// new Provider();
// return provider;
// },
// getSelectedProviderIndex(providers, selectedProviderNumber) {
// const index = providers.findIndex(
// (provider) => provider.providerNumber == selectedProviderNumber
// );
// return index;
// },
// async handleUpdate(selectedShopIndex = null) {
// this.resetAnswers();
// if (selectedShopIndex >= 3) {
// await this.getNextShopsFromList(selectedShopIndex + 1);
// } else {
// await this.getNextShopsFromList();
// await nextTick();
// }
// },
// },
computed: {
shopQuestionLinkText() {
return this.getCmsContent("ChangeMyLocationLinkWidget", "Text");
},
modalName() {
return this.modelWidgetName;
},
modalHeaderText() {
return this.getCmsContent("ShopQuestionWidget", "QuestionText");
},
modal() {
return this.$refs[this.modalWidgetName];
},
shopProviders() {
console.log("shopProviders", this.shopProviderData?.shopProviders);
return this.shopProviderData?.shopProviders ?? [];
},
modalFooterText() {
return "Save store location";
},
selectedValue: {
get: function () {
return this.modelValue;
},
set: function (newValue) {
this.$emit("update:modelValue", newValue);
},
},
selectedProviderNumber: {
get: function () {
return this.selectedValue?.providerNumber;
},
set: function (newValue) {
// Button Question only supports Number, or String data types so we must get the full object to emit
this.selectedValue = this.getSelectedProviderObject(newValue);
},
},
showMoreShopsLinkText() {
return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
},
},
methods: {
openModal(event) {
if (event) event.preventDefault();
if (
!this.shopProviderData ||
!this.shopProviderData.shopProviders ||
!this.shopProviderData.shopProviders.length
) {
// Optionally show a loading message or disable the link
return;
}
this.$refs.shopQuestionModal.openModal();
},
getSelectedProviderObject(providerNumber) {
const provider =
this.shopProviders?.find((provider) => provider.providerNumber == providerNumber) ??
new Provider();
return provider;
},
async getNextShopsFromList(numberToGet = 3) {
const logFirstShopsDisplayed = this.shopIndex == 0;
const shopIterator = (array, n) => {
const l = array.length;
return () => {
const end = this.shopIndex + n;
const part = array.slice(this.shopIndex, end);
this.shopIndex = end < l ? end : this.shopProviders.length;
return part;
};
};
const toTitleCase = (str) => {
return str.replace(/\w\S*/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
};
const nextShop = shopIterator(this.shopProviders, numberToGet);
// Map API result data
const mappedData = nextShop().map((shopProvider) => {
const streetAddress = toTitleCase(shopProvider.address.streetAddress);
const city = toTitleCase(shopProvider.address.city);
const state = shopProvider.address.state;
const zipCode = shopProvider.address.zipCode;
const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
return {
buttonLabel: city,
buttonLabelSubCopy: `${distanceInMiles} mi`,
buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
additionalButtonData: this.additionalButtonData,
value: shopProvider.providerNumber,
};
});
var gaAction = this.GaActions.MORE_LOCATIONS_CLICKED;
if (logFirstShopsDisplayed) {
gaAction = this.GaActions.SHOPS_FIRST_DISPLAYED;
}
if (
this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP ||
this.selectedAppointmentType === AppointmentTypeStrings.DROP_OFF
) {
var shops = mappedData.map((shop) => {
if (shop.value.length > 5 && shop.value.startsWith("00")) {
return shop.value.substring(1);
} else {
return shop.value;
}
});
var joinedShops = shops.join(",");
if (!joinedShops) {
joinedShops = "no-shops";
}
this.pushEventToGA(this.GaCategories.SERVICE_LOCATION, gaAction, joinedShops, true);
}
if (this.answers.length === 0) {
this.answers = mappedData;
} else {
mappedData.forEach((shop) => {
this.answers.push(shop);
});
}
console.log("this.answers" + this.answers);
await nextTick();
if (this.shopIndex == this.shopProviders.length) {
this.displaySeeMoreLocationsLink = false;
} else {
this.displaySeeMoreLocationsLink = true;
}
await nextTick();
this.scrollToPageBottom();
},
async handleUpdate(selectedShopIndex = null) {
this.resetAnswers();
if (selectedShopIndex >= 3) {
await this.getNextShopsFromList(selectedShopIndex + 1);
} else {
await this.getNextShopsFromList();
await nextTick();
}
},
copyModel(modelToCopy) {
return {
state: modelToCopy.state,
zipCode: modelToCopy.zipCode,
};
},
resetAnswers() {
this.answers = [];
this.shopIndex = 0;
},
onSaveShop() {
// Emit the selected provider number or object to the parent
this.$emit("shop-selected", this.selectedProviderNumber);
// Optionally close the modal here if not handled by the modal itself
this.$refs.shopQuestionModal.closeModal?.();
},
async updateShopsForZip(zipCode) {
if (!zipCode || !this.shopProviders.length) {
// fallback to default behavior
this.handleUpdate();
return;
}
// You need a helper to sort/filter shops by distance to zipCode
// Example: const sortedShops = getShopsByZip(zipCode, this.shopProviders);
// For now, let's assume you have such a helper:
// const sortedShops = getShopsByZip(zipCode, this.shopProviders); // implement or import this
// Map sortedShops to the format expected by buttonQuestion
//const mappedData = sortedShops.map(shopProvider => {
// ...mapping logic as in getNextShopsFromList
// (copy from your getNextShopsFromList method)
// });
// this.answers = mappedData;
}
},
watch: {
selectedAppointmentType: {
// Question: Does it matter if this fires when clicking Mobile? Ideally it should not, but it doesn't seem to effect anything
// What we DON'T want to do here is create a dependency by checking if the selectedAppointmentType is Mobile as that has
// nothing to do with this component. We could mitigate this by showing / hiding this component with v-if but that messes
// up the component initialization on page load.
async handler() {
this.handleUpdate();
},
},
shopProviders: {
async handler(newValue) {
const selectedShopIndex = this.getSelectedProviderIndex(
newValue,
this.selectedProviderNumber
);
this.handleUpdate(selectedShopIndex);
},
},
'internalModel.zipCode': {
handler(newZip) {
this.updateShopsForZip(newZip);
},
immediate: false
},
},
components: {
//shopQuestion,
modal,
textLink,
serviceZipQuestion,
buttonQuestion,
alert,
},
mounted() {
this.handleUpdate();
},
};
</script>
<style lang="scss">
.shop-question {
margin-top: 1rem;
text-align: center;
a {
@include responsive-font-size-md(0.875rem, 1rem);
}
.button-question {
.question-text {
margin-top: 0.5rem;
}
}
}
.drop-off-alert {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_13957_112512)'%3E%3Cpath d='M5.99865 0C4.81147 4.82643e-07 3.65095 0.352111 2.66392 1.01179C1.67688 1.67146 0.907678 2.60907 0.45361 3.70599C-0.000459241 4.80291 -0.11899 6.00986 0.113013 7.17415C0.345015 8.33845 0.917126 9.40778 1.75697 10.2469C2.59682 11.086 3.66666 11.6571 4.83117 11.8881C5.99567 12.119 7.20251 11.9994 8.29902 11.5443C9.39553 11.0893 10.3324 10.3192 10.9912 9.33159C11.65 8.34396 12.0011 7.18313 12 5.99594C11.9971 4.40566 11.3638 2.88142 10.2388 1.75742C9.11375 0.633431 7.58894 0.00143011 5.99865 0V0ZM5.99865 11.2478C4.96135 11.2473 3.94748 10.9392 3.08518 10.3627C2.22288 9.7861 1.55085 8.96685 1.15401 8.00846C0.75718 7.05006 0.653353 5.99554 0.855656 4.97815C1.05796 3.96077 1.55731 3.02618 2.29061 2.29251C3.0239 1.55884 3.95823 1.059 4.97551 0.856176C5.99279 0.653349 7.04737 0.756633 8.00597 1.15297C8.96457 1.54931 9.78416 2.22092 10.3612 3.08293C10.9382 3.94493 11.2467 4.95864 11.2478 5.99594C11.2478 7.38835 10.6949 8.72377 9.71053 9.70861C8.7262 10.6934 7.39106 11.2471 5.99865 11.2478V11.2478Z' fill='%2306577C'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.22736 8.84695C6.30613 8.76818 6.35038 8.66135 6.35038 8.54996V5.30996C6.35038 5.19857 6.30613 5.09174 6.22736 5.01298C6.1486 4.93421 6.04177 4.88996 5.93038 4.88996C5.81899 4.88996 5.71216 4.93421 5.63339 5.01298C5.55463 5.09174 5.51038 5.19857 5.51038 5.30996V8.54996C5.51038 8.66135 5.55463 8.76818 5.63339 8.84695C5.71216 8.92571 5.81899 8.96996 5.93038 8.96996C6.04177 8.96996 6.1486 8.92571 6.22736 8.84695ZM5.69704 3.97918C5.76611 4.02533 5.84731 4.04996 5.93038 4.04996C5.98558 4.05012 6.04026 4.03936 6.09129 4.01831C6.14232 3.99726 6.18868 3.96633 6.22771 3.9273C6.26675 3.88827 6.29768 3.8419 6.31873 3.79088C6.33978 3.73985 6.35053 3.68516 6.35038 3.62996C6.35038 3.54689 6.32574 3.46569 6.27959 3.39662C6.23344 3.32755 6.16785 3.27372 6.0911 3.24193C6.01436 3.21014 5.92991 3.20183 5.84844 3.21803C5.76697 3.23424 5.69213 3.27424 5.63339 3.33298C5.57465 3.39171 5.53465 3.46655 5.51845 3.54802C5.50224 3.6295 5.51056 3.71394 5.54235 3.79069C5.57414 3.86743 5.62797 3.93303 5.69704 3.97918Z' fill='%2306577C'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_13957_112512'%3E%3Crect width='12' height='12' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: 0.75rem;
background-position: 0.5rem 0.75rem;
border-radius: 0.5rem;
display: flex;
flex-direction: row;
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
gap: 0.25rem;
.alert-heading {
text-align: left;
font-size: 0.75rem;
line-height: 1.25rem;
}
}
.modal-link {
text-align: center;
}
</style>

24
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(3)"
:aria-label="showMoreShopsLinkText" />
@click-event="getNextShopsFromList(1)"
:aria-label="showMoreShopsLinkText" /> -->
</div>
</transition>
</template>
@ -41,6 +41,8 @@ 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";
@ -125,7 +127,7 @@ export default {
},
},
methods: {
async getNextShopsFromList(numberToGet = 3) {
async getNextShopsFromList(numberToGet = 1) {
const logFirstShopsDisplayed = this.shopIndex == 0;
const shopIterator = (array, n) => {
@ -234,6 +236,13 @@ 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: {
@ -258,8 +267,13 @@ export default {
components: {
alert,
buttonQuestion,
textLink,
//textLink,
//shopQuestionPopup,
//serviceZipModalQuestion,
},
// mounted(){
// console.log("shopProviderData" + this.shopProviderData);
// }
};
</script>