+
-
+ cmsWidgetName="YourSafeliteShopWidget" />
@@ -126,6 +149,10 @@ import alert from "@/ux-components/alert/alert";
import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
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 buttonQuestion from "@/digital-components/button-question/button-question.vue";
+import shopListButton from "@/layouts/service-location/shop-question/shop-list-button/shop-list-button";
+import { getAvailabilityRating } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
@@ -212,6 +239,7 @@ export default {
shopProviderData: null,
navigatingForward: false,
isMobileAddressValid: true,
+ shopListButton: shopListButton,
};
},
async beforeRouteEnter(to, from, next) {
@@ -421,6 +449,57 @@ export default {
isForwardActionDisabled() {
return this.displayNoShopsAlert || !this.isMobileAddressValid;
},
+ 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,
+ };
+ },
+ selectedShopAnswer() {
+ const toTitleCase = (str) => {
+ if (!str) return "";
+ return str.replace(/\w\S*/g, function (txt) {
+ return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+ });
+ };
+
+ if (this.selectedProvider && this.selectedProvider.address) {
+ const provider = this.shopProviderData?.shopProviders?.find(
+ (p) => p.providerNumber === this.selectedProvider?.providerNumber
+ );
+ const streetAddress = toTitleCase(this.selectedProvider.address.streetAddress);
+ const city = toTitleCase(this.selectedProvider.address.city);
+ const state = this.selectedProvider.address.state;
+ const zipCode = this.selectedProvider.address.zipCode;
+ const distanceInMiles = provider ? Math.round(provider.distanceInMiles * 2) / 2 : 0;
+
+ return [
+ {
+ buttonLabel: `${city}`,
+ buttonLabelSubCopy: `${distanceInMiles} mi`,
+ buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
+ additionalButtonData: this.additionalButtonData,
+ value: this.selectedProvider.providerNumber,
+ },
+ ];
+ }
+ return [];
+ },
+ questionText() {
+ return this.getCmsContent("YourSafeliteShopWidget", "QuestionText");
+ },
+ appointmentTypeStrings() {
+ return AppointmentTypeStrings;
+ },
},
methods: {
arePagePrerequisitesValid() {
@@ -669,8 +748,6 @@ export default {
this.selectedProvider.address.zipCode = null;
this.selectedProvider.address.zipCodeCtu = null;
} else {
- // if we have a provider.zipCodeCtu that's different than the servicelocation.zipCodeCtu then they
- // may have selected a shop in a different ctu. change the servicelocation zip/ctu if different
if (this.zipCodeCtu != this.selectedProvider.address.zipCodeCtu) {
ctu = this.selectedProvider.address.zipCodeCtu;
}
@@ -756,6 +833,60 @@ export default {
startTime: "08:00",
};
},
+ onShopSelected(providerObject) {
+ const current = this.shopProviderData?.shopProviders?.find(
+ (p) => p.providerNumber === this.selectedProvider?.providerNumber
+ );
+ if (current) {
+ this.selectedProvider = current;
+ }
+
+ let provider = this.shopProviderData?.shopProviders?.find(
+ (p) => p.providerNumber === providerObject?.providerNumber
+ );
+ if (!provider && this.shopProviderData?.shopProviders?.length > 0) {
+ provider = this.shopProviderData.shopProviders[0];
+ }
+ this.selectedProvider = provider;
+ if (provider && provider.address) {
+ this.zipCode = provider.address.zipCode;
+ this.state = provider.address.state;
+ }
+ if (
+ !this.selectedProvider ||
+ !this.shopProviderData?.shopProviders?.some(
+ (p) => p.providerNumber === this.selectedProvider?.providerNumber
+ )
+ ) {
+ this.selectedProvider = this.shopProviderData?.shopProviders?.[0];
+ }
+ if (providerObject && providerObject.address) {
+ this.zipCode = providerObject.address.zipCode;
+ this.state = providerObject.address.state;
+ }
+ },
+ setZipcodeCtu(zipcodeCtu) {
+ this.zipCodeCtu = zipcodeCtu;
+ },
+ onShopModelUpdated(newModel) {
+ if (newModel.zipCode) {
+ this.zipCode = newModel.zipCode;
+ }
+ if (newModel.zipCodeCtu) {
+ this.zipCodeCtu = newModel.zipCodeCtu;
+ }
+ if (newModel.state) {
+ this.state = newModel.state;
+ }
+ if (this.shopProviderData && newModel.selectedProviderNumber) {
+ const provider = this.shopProviderData.shopProviders.find(
+ (p) => p.providerNumber === newModel.selectedProviderNumber
+ );
+ if (provider) {
+ this.selectedProvider = provider;
+ }
+ }
+ },
},
watch: {
zipCode: {
@@ -768,7 +899,7 @@ export default {
this.shopProviderData.mobileProviderNumber
);
} else {
- this.selectedProvider = new Provider();
+ this.isMobileAddressValid = true;
}
});
}
@@ -781,7 +912,7 @@ export default {
this.shopProviderData.mobileProviderNumber
);
} else {
- this.selectedProvider = new Provider();
+ this.selectedProvider = this.shopProviderData.shopProviders[0];
}
},
},
@@ -796,7 +927,8 @@ export default {
Form,
loadingModal,
contentGroupModal,
- shopQuestion,
+ shopQuestionPopup,
+ buttonQuestion,
textBlock,
},
};
@@ -822,4 +954,8 @@ export default {
color: $black;
}
}
+.shop-question-button .list-button-content {
+ background: $blue-100 !important;
+ box-shadow: 0 0 0 1px $primary !important;
+}
diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question.vue
index 9841c5b16..8fe355923 100644
--- a/src/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question.vue
+++ b/src/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question.vue
@@ -7,9 +7,11 @@
questionAlignment="center"
cornerStyle="rounded"
mask="#####"
+ :includeSearchIcon="includeSearchIcon"
+ @search-icon-click="$emit('search-icon-click')"
:displayQuestionText="false"
- isRequired
- validationRules="zip-required|zip-format" />
+ :isRequired="isRequired"
+ :validationRules="computedValidationRules" />
+
+