diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index f4a3597c..9c14649a 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -48,6 +48,7 @@
:isWide="isWide"
:validationRules="validationRules"
:textPosition="textPosition"
+ :additionalButtonData="additionalButtonData"
:additionalButtonStyling="additionalButtonStyling"
:lastValuePushedToGa="lastValuePushedToGa"
:setLastValuePushedToGa="setLastValuePushedToGa"
@@ -129,6 +130,7 @@ export default {
suppressError: Boolean,
useTextForValue: Boolean,
valueToLogType: String,
+ additionalButtonData: Object,
additionalButtonStyling: String,
isSmallQuestionText: Boolean,
isSmallQuestionLabelText: Boolean
diff --git a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
index c34d67c9..49fd2e64 100644
--- a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
+++ b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
@@ -20,6 +20,22 @@
:class="textPosition">{{
buttonLabelSubCopy
}}
+
import baseInputButton from '@/digital-components/base-input-button/base-input-button.vue';
import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
+import loader from '@/ux-components/loader/loader.vue';
export default {
name: 'shop-list-button',
components: {
- baseInputButton
+ baseInputButton,
+ loader
},
mixins: [inputButtonWrapperMixin],
data() {
@@ -53,32 +71,45 @@ export default {
};
},
computed: {
+ displayAvailabilityIndicators() {
+ return true;
+ },
isLoaderDisplayed() {
return this.availabilityRating == null;
},
availabilityRatingClass() {
- if (this.availabilityRating == null) {
- return 'gray';
+ if (this.availabilityRating != null) {
+ return this.availabilityRating === 'high' ? 'green' : 'orange';
}
- return this.availabilityRating === 'high' ? 'green' : 'orange';
+ return 'gray';
},
badgeText() {
if (this.availabilityRating != null) {
return this.availabilityRating === 'high' ? 'Appts available' : 'Appts low';
}
-
return '';
}
},
- methods: {
- displayLoader() {
- this.isLoaderDisplayed = true;
+ beforeMount() {
+ if (this.displayAvailabilityIndicators) {
+ const { startDate } = this.additionalButtonData;
+ const { endDate } = this.additionalButtonData;
+ const { shopAppointmentType } = this.additionalButtonData;
+
+ this.additionalButtonData
+ .availabilityRatingCallback(startDate, endDate, shopAppointmentType, this.value)
+ .then((data) => {
+ this.availabilityRating = data;
+ });
}
- }
+ },
+ methods: { }
};