displau textLink with state and zip
This commit is contained in:
US\katie.kroell
parent
1681d0cce7
commit
72236e4ed3
2 changed files with 113 additions and 16 deletions
|
|
@ -4,7 +4,8 @@
|
|||
<siteHeader cmsWidgetName="SiteHeaderWidget" class="siteHeader"/>
|
||||
<siteSubHeader cmsWidgetName="SiteSubHeaderWidget" id="sub-header" />
|
||||
<div class="fade-on-route-transition position-relative px-5 choose-option">
|
||||
|
||||
<serviceZipModalQuestion
|
||||
v-model="serviceZipCodeQuestion"/>
|
||||
<buttonQuestion
|
||||
cmsWidgetName="ServiceTypeQuestionWidget"
|
||||
:questionText="questionText"
|
||||
|
|
@ -41,6 +42,7 @@ import { settleAllPromises } from "@/helpers/layout-helper";
|
|||
import { required } from "@/helpers/validation-rules";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import buttonQuestion from "@/digital-components/button-question/button-question";
|
||||
import { useMainStore } from "@/store";
|
||||
|
||||
// Import Component
|
||||
import baseFormMixin from "@/mixins/base-form-mixin";
|
||||
|
|
@ -48,41 +50,66 @@ import { Form, defineRule } from "vee-validate";
|
|||
import siteFooter from "@/iss-components/site-footer/site-footer.vue";
|
||||
import siteHeader from "@/iss-components/site-header/site-header.vue";
|
||||
import siteSubHeader from "@/iss-components/site-sub-header/site-sub-header.vue";
|
||||
import serviceZipModalQuestion from '@/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue';
|
||||
|
||||
// DEFINE VALIDATION RULES
|
||||
defineRule("selection-required", required(errorMessages.OPTION_REQUIRED));
|
||||
export default {
|
||||
name: "service-location",
|
||||
mixins: [baseFormMixin],
|
||||
components: {
|
||||
siteFooter,
|
||||
siteHeader,
|
||||
siteSubHeader,
|
||||
buttonQuestion,
|
||||
Form,
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
}, ];
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
});
|
||||
},
|
||||
setup() {
|
||||
const mainStore = useMainStore();
|
||||
return { mainStore };
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
serviceZip: this.mainStore.order.customer.address.zipCode,
|
||||
serviceZipState: this.mainStore.order.customer.address.state,
|
||||
isServiceZipServiceable: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
questionText() {
|
||||
return this.getCmsContent("ServiceTypeQuestionWidget", "QuestionText");
|
||||
},
|
||||
answersFromCms() {
|
||||
return this.getCmsContent("ServiceTypeQuestionWidget", "Answers");
|
||||
},
|
||||
},
|
||||
serviceZipCodeQuestion: {
|
||||
get: function() {
|
||||
return {
|
||||
serviceZip: this.serviceZip,
|
||||
serviceZipState: this.serviceZipState,
|
||||
};
|
||||
},
|
||||
set: function (newValue) {
|
||||
if (newValue.serviceZip !== this.serviceZip) {
|
||||
//this.resetMobileLocation();
|
||||
//this.selectedAppointmentType = null;
|
||||
//this.providerNumber = null;
|
||||
}
|
||||
this.serviceZip = newValue.serviceZip;
|
||||
this.serviceZipState = newValue.serviceZipState;
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisiteValid() {
|
||||
|
|
@ -97,6 +124,14 @@ export default {
|
|||
async forwardButtonAction() {},
|
||||
resetDependentState() {},
|
||||
},
|
||||
components: {
|
||||
siteFooter,
|
||||
siteHeader,
|
||||
siteSubHeader,
|
||||
buttonQuestion,
|
||||
Form,
|
||||
serviceZipModalQuestion,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<div class="text-center mt-1">
|
||||
<div class="update-zip-text-link">
|
||||
<textLink
|
||||
id="serviceZipTextLink"
|
||||
linkType="text"
|
||||
:text="serviceZipLinkText"
|
||||
href="#!"
|
||||
@click-event="openModal"
|
||||
aria-label="Modal window" />
|
||||
</div>
|
||||
</div>
|
||||
<contentGroupModal
|
||||
cmsWidgetName="ServiceZipModalWidget" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import contentGroupModal from "@/iss-components/content-group-modal/content-group-modal.vue";
|
||||
import textLink from "@/ux-components/text-link/text-link";
|
||||
|
||||
export default {
|
||||
name: "service-zip-modal-question",
|
||||
emits: ["update:modalValue"],
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
serviceZip: "",
|
||||
serviceZipState: "",
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
serviceZipLinkText() {
|
||||
if (this.modelValue.serviceZip && this.modelValue.serviceZip.length > 0) {
|
||||
return this.modelValue.serviceZipState + ", " + this.modelValue.serviceZip;
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
contentGroupModal,
|
||||
textLink
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
a#serviceZipTextLink {
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.update-zip-text-link::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 13px;
|
||||
height: 16px;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.49635 1.00142e-07C5.64734 -0.000153295 4.80722 0.175918 4.0274 0.517444C3.24757 0.858969 2.54443 1.35877 1.96099 1.98626C0.765713 3.27588 0.0999756 4.98141 0.0999756 6.75394C0.0999756 8.52646 0.765713 10.232 1.96099 11.5216L5.98324 15.777C6.04954 15.8475 6.12918 15.9036 6.21736 15.9419C6.30555 15.9802 6.40045 16 6.49635 16C6.59225 16 6.68716 15.9802 6.77534 15.9419C6.86353 15.9036 6.94317 15.8475 7.00946 15.777L11.0317 11.52C12.2391 10.2383 12.909 8.52914 12.8999 6.75394C12.9094 4.97818 12.2394 3.26832 11.0317 1.98626C10.4481 1.35899 9.74493 0.859347 8.96514 0.517839C8.18535 0.176331 7.34532 0.000130509 6.49635 1.00142e-07V1.00142e-07ZM6.49635 9.13131C6.02507 9.13131 5.56437 8.98913 5.17251 8.72275C4.78065 8.45637 4.47524 8.07776 4.29488 7.63479C4.11453 7.19181 4.06734 6.70438 4.15928 6.23412C4.25123 5.76387 4.47817 5.33191 4.81142 4.99287C5.14467 4.65384 5.56925 4.42295 6.03148 4.32941C6.49371 4.23587 6.97282 4.28388 7.40823 4.46736C7.84364 4.65085 8.21579 4.96157 8.47762 5.36023C8.73945 5.7589 8.87921 6.2276 8.87921 6.70707C8.87921 7.34974 8.62837 7.96611 8.18185 8.4207C7.73532 8.87528 7.12964 9.13088 6.49794 9.13131H6.49635Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
|
||||
background-size: contain;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in a new issue