From b174574f4a4cbb99f22487c6f0a95c2a420a16d1 Mon Sep 17 00:00:00 2001 From: Bill Richardson Date: Tue, 24 Oct 2023 16:33:43 -0400 Subject: [PATCH] Availability indicator update Warning updates --- .../button-question/button-question.vue | 2 + .../shop-list-button/shop-list-button.vue | 53 +++++++++++++++---- .../shop-question/shop-question.vue | 4 +- src/mixins/input-button-wrapper-mixin.js | 1 + src/styles/ux-variables-svg-strings.scss | 2 + 5 files changed, 49 insertions(+), 13 deletions(-) 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 }} +
+
+ {{ badgeText }} + +
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: { } };