From 6fda9d71b53c421dacd8a3a23c7ea136a500fa08 Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Wed, 12 Apr 2023 14:29:35 -0400 Subject: [PATCH] WIP --- .../button-question/button-question.vue | 1 + .../shop-list-button/shop-list-button.vue | 11 +- .../shop-question/shop-question.vue | 128 ++++++++++++++---- src/store/index.js | 2 +- 4 files changed, 111 insertions(+), 31 deletions(-) diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue index 44a427275..c954f12d6 100644 --- a/src/digital-components/button-question/button-question.vue +++ b/src/digital-components/button-question/button-question.vue @@ -128,6 +128,7 @@ export default { valueToLogType: String, additionalButtonStyling: String, isSmallQuestionText: Boolean, + availability: String, }, beforeMount() { if (this.buttonTypeObject) { 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 898f167d9..898194951 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 @@ -6,11 +6,13 @@
- - {{ buttonLabel }} +
+ {{ buttonLabel }} {{ buttonLabelSubCopy }} - {{ buttonAuxillaryCopy }} - +
+ {{ buttonAuxillaryCopy }} +
+
+
@@ -36,6 +45,7 @@ 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 textLink from '@/ux-components/text-link/text-link'; defineRule("option-required", required(errorMessages.OPTION_REQUIRED)); @@ -46,6 +56,9 @@ export default { return { shops: [], shopListButton: shopListButton, + availability: "high", + answers: [], + shopIndex: 0, }; }, props: { @@ -58,6 +71,7 @@ export default { components: { alert, buttonQuestion, + textLink, }, computed: { questionText() { @@ -71,23 +85,12 @@ export default { this.$emit("update:modelValue", newValue); }, }, - answers() { - // Map API result data - const mappedData = this.shops.map((shop) => { - return { - Name: shop.providerNumber, - buttonLabel: shop.city, - buttonLabelSubCopy: `${shop.distance} mi`, - buttonBodyCopy: `${shop.streetAddress}, ${shop.city}, ${shop.state} ${shop.zipCode}`, - buttonAuxillaryCopy: `foo` - }; - }); - - return mappedData; - }, displayDropoffInformation() { return this.isDropoff; }, + showMoreShopsLinkText() { + return this.getCmsContent("ShowMoreShopsLinkWidget", "Text"); + }, }, methods: { loadInitialData() { @@ -97,6 +100,7 @@ export default { }, initializeComponent(initialData) { this.shops = initialData; + this.getNextShopsFromList(); }, async updateShopList() { const result = await this.dispatchStoreAction(storeActions.GET_PROVIDER_LOCATIONS, { @@ -104,6 +108,38 @@ export default { }); return result.data; }, + shopIterator(array, n){ + let l = array.length; + return () => { + var end = this.shopIndex + n; + var part = array.slice(this.shopIndex, end); + this.shopIndex = end < l ? end : this.shopIndex.length - 1; + return part; + }; + }, + getNextShopsFromList() { + const nextShop = this.shopIterator(this.shops, 3); + + // Map API result data + const mappedData = nextShop().map((shop) => { + return { + Name: shop.providerNumber, + buttonLabel: shop.city, + buttonLabelSubCopy: `${shop.distance} mi`, + buttonBodyCopy: `${shop.streetAddress}, ${shop.city}, ${shop.state} ${shop.zipCode}`, + buttonAuxillaryCopy: `foo`, + }; + }); + + if (this.answers.length === 0) { + this.answers = mappedData; + } else { + mappedData.forEach(shop => { + this.answers.push(shop); + }) + } + + } }, watch: { serviceZipCode: { @@ -124,30 +160,70 @@ export default { } .button-content { - .button-label-copy { + .row-one { display: flex; - font-weight: 500; - line-height: 1.5rem; align-items: center; margin-bottom: 0.25rem !important; + .button-label-copy { + flex-grow: 0; + line-height: 1.5rem; + font-weight: 500; + } + .button-label-sub-copy { - margin-bottom: 0rem !important; + flex-grow: 1; + line-height: 1.25rem !important; + font-weight: 400; + font-size: 0.75rem; color: #727676; padding-left: 0.25rem; - font-weight: 400; - line-height: 1.25rem; - font-size: 0.75rem; } - .button-auxillary-copy { - display: flex; - align-items: right; + .availability-indicator { + display: none; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 0.125rem 1.5rem; + gap: 0.25rem; + background: #E3F2EA; + border-radius: 4.5rem; + + .button-auxillary-copy { + justify-content: right; + line-height: 1.25rem !important; + font-weight: 400; + font-size: 0.75rem; + } + + .green { + color: #006A36; + background: #E3F2EA; + } + + .red { + color: #AC160B; + background: #E3F2EA; + } + + } + } - - } + + // .button-question-overflow { + // height: 60vh; //calc(100vh - 274px); + + // // .overflow-scroll { + // // // Height will be determined by overall height of content above list + // // height: calc(100% - 314px); + // // overflow-x: hidden !important; + // // -webkit-overflow-scrolling: touch; + // // } + // } + } .drop-off-alert { diff --git a/src/store/index.js b/src/store/index.js index ca9aa4741..2fafa9214 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -941,7 +941,7 @@ export const actions = { return globalMethods.callMockHttpClient({ method: endpoints.GetProviderLocations.method, //TODO: Remove Mocky Endpoints - endpoint: "https://run.mocky.io/v3/2a82baf7-c6e8-40ac-8e2e-9d91800c7f9b", + endpoint: "https://run.mocky.io/v3/062bfed7-29a7-4001-b5e8-6135ec10494f", }); },