120 lines
3.1 KiB
Vue
120 lines
3.1 KiB
Vue
<template>
|
|
<div id="shop-location">
|
|
<textBlock :customText="questionText" typeStyle="button-question" />
|
|
<div>
|
|
<div>
|
|
<label v-for="addressItem in addressDetails" :key="addressItem">
|
|
{{ addressItem }}
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label>{{ selectedShop.distance }}</label>
|
|
</div>
|
|
</div>
|
|
|
|
<shopQuestionPopup
|
|
v-if="isShopQuestionDisplayed"
|
|
:selectedProviderNumberFromParent="selectedProviderNumberFromParent"
|
|
:shopProviderDataFromParent="shopProviderDataFromParent"
|
|
:zipCodeFromParent="zipCodeFromParent"
|
|
@shop-selected="onShopSelected"
|
|
@updated-serviceability="setServiceabilityDetails"
|
|
cmsWidgetName="YourSafeliteShopWidget" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import textBlock from "@/digital-components/text-block/text-block";
|
|
import shopQuestionPopup from "@/layouts/service-location/shop-question/shop-question-popup";
|
|
|
|
export default {
|
|
name: "shopLocation",
|
|
props: {
|
|
selectedShop: {
|
|
type: Object,
|
|
default: () => ({
|
|
city: null,
|
|
distance: null,
|
|
address1: null,
|
|
address2: null,
|
|
}),
|
|
},
|
|
isShopQuestionDisplayed: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
selectedProviderNumberFromParent: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
shopProviderDataFromParent: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
zipCodeFromParent: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
},
|
|
computed: {
|
|
questionText() {
|
|
return this.getCmsContent("YourSafeliteShopWidget", "QuestionText");
|
|
},
|
|
addressDetails() {
|
|
const { distance, ...addressDetails } = this.selectedShop;
|
|
return addressDetails;
|
|
},
|
|
},
|
|
components: {
|
|
textBlock,
|
|
shopQuestionPopup,
|
|
},
|
|
methods: {
|
|
onShopSelected(shopQuestionPopUpData) {
|
|
this.$emit("shop-selected", shopQuestionPopUpData);
|
|
},
|
|
setServiceabilityDetails(serviceabilityDetails) {
|
|
this.$emit("updated-serviceability", serviceabilityDetails);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#shop-location {
|
|
& > div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
& > div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
label {
|
|
font-size: 0.875rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
& > div.shop-question {
|
|
width: 172px;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
#shop-location {
|
|
& > div.shop-question {
|
|
width: fit-content;
|
|
background-color: $blue;
|
|
border-radius: $border-radius-pill;
|
|
padding: 0.75rem 3rem;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: $white;
|
|
font-weight: $font-weight-600;
|
|
line-height: 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|