jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP

Browse source
This commit is contained in:
Leah Schumann 2023-04-12 14:29:35 -04:00
parent 3d2179d884
commit 6fda9d71b5
4 changed files with 111 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/digital-components/button-question/button-question.vue
View file

@ -128,6 +128,7 @@ export default {
valueToLogType: String,
additionalButtonStyling: String,
isSmallQuestionText: Boolean,
availability: String,
},
beforeMount() {
if (this.buttonTypeObject) {

11
src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
View file

@ -6,11 +6,13 @@
<div
:aria-label="buttonLabel"
class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
<span class="m-0 button-label-copy" :class="textPosition">
{{ buttonLabel }}
<div class="row-one">
<span class="m-0 button-label-copy" :class="textPosition">{{ buttonLabel }}</span>
<span class="m-0 button-label-sub-copy" :class="textPosition">{{ buttonLabelSubCopy }}</span>
<span class="m-0 button-auxillary-copy text-end">{{ buttonAuxillaryCopy }}</span>
</span>
<div class="availability-indicator" :class="availability === 'high' ? 'green' : 'red'">
<span class="m-0 button-auxillary-copy" >{{ buttonAuxillaryCopy }}</span>
</div>
</div>
<span
v-if="buttonBodyCopy"
class="m-0 button-label-sub-copy small"
@ -44,6 +46,7 @@ export default {
data() {
return {
isLoaderDisplayed: false,
availability: "low",
};
},
methods: {

128
src/layouts/service-location/shop-question/shop-question.vue
View file

@ -19,6 +19,15 @@
textPosition="text-start"
v-model="selectedValue"
isRequired />
<textLink
ref="showMoreShopsLink"
id="showMoreShopsId"
cmsWidgetName="ShowMoreShopsLinkWidget"
linkType="text"
:text="showMoreShopsLinkText"
href="#!"
@click-event="getNextShopsFromList"
aria-label="Show more shops" />
</div>
</transition>
</template>
@ -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 {

2
src/store/index.js
View file

@ -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",
});
},