diff --git a/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js b/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js index f998b3188..3768f1095 100644 --- a/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js +++ b/src/layouts/service-location/helpers/service-location-helper/service-location-helper.js @@ -44,7 +44,12 @@ export async function getServiceabilityDetails(serviceZipCode, lineItems) { return Promise.resolve(serviceabilityDetails); } -export async function getAvailabilityRating(startDate, endDate, shopAppointmentType, providerNumber) { +export async function getAvailabilityRating( + startDate, + endDate, + shopAppointmentType, + providerNumber +) { // For a given shop provider number and date range, get the appointment time slots available const shopTimeSlots = await baseMixin.methods.dispatchStoreAction( storeActions.GET_SHOP_TIME_SLOTS, 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 32573651f..8c235a8a3 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 @@ -17,7 +17,7 @@
-
+
{{ availabilityRating == "Good" ? "Appts available" : "Appts low" }} @@ -54,15 +54,16 @@ export default { }, beforeMount() { this.displayLoader(); - console.log(this.value) const startDate = this.additionalButtonData.startDate; const endDate = this.additionalButtonData.endDate; const shopAppointmentType = this.additionalButtonData.shopAppointmentType; - this.additionalButtonData.availabilityRatingCallback(startDate, endDate, shopAppointmentType, this.value).then((data) => { - this.availabilityRating = data; - this.isLoaderDisplayed = false; - }); + this.additionalButtonData + .availabilityRatingCallback(startDate, endDate, shopAppointmentType, this.value) + .then((data) => { + this.availabilityRating = data; + this.isLoaderDisplayed = false; + }); }, data() { return { @@ -129,10 +130,6 @@ export default { &:checked + .list-button-content span { font-weight: 500; } - // &:checked + .list-button-content span:nth-child(2) { - // font-weight: 400; - // color: $gray-600; - // } } } .list-button-content { @@ -173,12 +170,20 @@ export default { .availability-badge { display: inline; - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A"); width: 13px; height: 12px; background-position: center; background-repeat: no-repeat; margin: 0 0.25rem 0 0; + + &.green { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A"); + } + + &.red { + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23AC160B'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23AC160B'/%3E%3C/svg%3E%0A"); + } + } .button-auxillary-copy { diff --git a/src/layouts/service-location/shop-question/shop-question.vue b/src/layouts/service-location/shop-question/shop-question.vue index 5da8598a4..4f6222b0f 100644 --- a/src/layouts/service-location/shop-question/shop-question.vue +++ b/src/layouts/service-location/shop-question/shop-question.vue @@ -107,12 +107,12 @@ export default { }, additionalButtonData() { const startDate = new Date(); - const endDate = new Date() + const endDate = new Date(); endDate.setDate(startDate.getDate() + 7); const formattedStartDate = startDate.toISOString().split("T")[0]; const formattedEndDate = endDate.toISOString().split("T")[0]; - + return { availabilityRatingCallback: getAvailabilityRating, startDate: formattedStartDate, @@ -277,14 +277,17 @@ export default { 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 !important; + gap: 0.25rem; + .alert-heading { text-align: left; font-size: 0.75rem; line-height: 1.25rem; } - p { - padding-left: 0.5rem; - margin-bottom: 0; - } + } diff --git a/src/store/index.js b/src/store/index.js index 87047fb43..270203f89 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1183,8 +1183,6 @@ export const actions = { }, }; - console.log(payload) - return globalMethods.callHttpClient({ method: endpoints.GetShopTimeSlots.method, endpoint: endpoints.GetShopTimeSlots.url,