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

Got the programmatic opening of modals working on quote page, still need to handle the buttonQuestion issue

Browse source
This commit is contained in:
Leah Schumann 2023-01-27 16:15:35 -05:00
parent f31574e356
commit 3abb66cf8e
8 changed files with 62 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -53,6 +53,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
:lastValuePushedToGa="lastValuePushedToGa"
:setLastValuePushedToGa="setLastValuePushedToGa"
:suppressError="suppressError"
@openModal="openModal"
v-model="selectedValues" />
<!-- For nested questions -->
<transition name="fade" mode="out-in">
@ -214,6 +215,9 @@ export default {
setLastValuePushedToGa(lastValuePushedToGa) {
this.lastValuePushedToGa = lastValuePushedToGa;
},
openModal(modalName) {
this.$emit("openModal", modalName);
}
},
components: {
listButton,

4
src/fmg-components/content-group-modal/content-group-modal.vue
View file

@ -48,11 +48,11 @@ export default {
},
methods: {
openModal() {
this.$refs[this.ModalName()].openModal();
this.$refs[this.ModalName].openModal();
},
footerButtonClick() {
this.$refs[this.ModalName()].closeModal();
this.$refs[this.ModalName].closeModal();
},
},
components: {

18
src/layouts/quote/quote.vue
View file

@ -1,4 +1,3 @@
digital
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<div class="page-container-grouped-styles">
@ -22,6 +21,7 @@ digital
:availableLineItems="availableLineItems"
:isInsuranceSelected="isInsuranceSelected"
@vapsItemsSelected="vapsItemsSelectedAction"
@openModal="openModalAction"
validationRules="option-required"
isRequired />
@ -30,10 +30,10 @@ digital
justifyText="left"
typeStyle="caption"
class="mt-4" />
<modal cmsWidgetName="RainDefenseModal" />
<modal cmsWidgetName="FrontWiperModal" />
<modal cmsWidgetName="RearWiperModal" />
<modal cmsWidgetName="RecalModal" />
<contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
<contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
<contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />
<contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ -54,7 +54,8 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
import cashOrInsuranceQuestion from "./cash-or-insurance-question/cash-or-insurance-question";
import servicePackageQuestion from "./service-package-question/service-package-question";
import textBlock from "@/digital-components/text-block/text-block";
import modal from "@/digital-components/modal/modal";
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
//import modal from "@/digital-components/modal/modal";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import baseMixin from "@/mixins/base-mixin.js";
import vehicleQuestionsMixin from "../../mixins/vehicle-questions-mixin";
@ -134,6 +135,9 @@ export default {
};
},
methods: {
openModalAction(modalName) {
this.$refs[modalName].openModal();
},
arePagePrerequisitesValid() {
return (
store.getters.order.serviceLocation.zipCode &&
@ -202,7 +206,7 @@ export default {
textBlock,
cashOrInsuranceQuestion,
servicePackageQuestion,
modal,
contentGroupModal,
loadingModal,
},
};

4
src/layouts/quote/service-package-question/service-package-question.vue
View file

@ -1,10 +1,11 @@
<template>
<buttonQuestion
<buttonQuestion ref="buttonQuestion"
:answers="servicePackageAnswers"
:groupName="groupName"
buttonTypeString="servicePackageRadio"
:buttonTypeObject="servicePackageRadio"
v-model="selectedPackageName"
@openModal="openModal"
:validationRules="validationRules"
:isRequired="isRequired" />
</template>
@ -141,6 +142,7 @@ export default {
shouldDisplayTierTwoPackage() {
return this.frontWipersApplicableForTierTwo || this.rearWiperApplicableForTierTwo;
},
},
methods: {
processIfStatements,

12
src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
View file

@ -29,12 +29,19 @@
<span v-if="!doesCopyContainTextLink(copy)" v-html="copy"></span>
<span v-else>
<textLink
linkType="text"
:text="getRouterLinkDisplayTextFromCopy(copy)"
href="#!"
@click-event="$emit('openModal', getRouterLinkRouteFromCopy(copy))"
:data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)"
aria-label="Modal window" />
<!-- <textLink
linkType="text"
:text="getRouterLinkDisplayTextFromCopy(copy)"
href="#!"
data-bs-toggle="modal"
:data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)"
aria-label="Modal window" />
aria-label="Modal window" /> -->
</span>
</template>
</li>
@ -88,6 +95,9 @@ export default {
.split(/(?:<li(?:.*?)>)|(?:<\/li>)/g)
.filter((lineItem) => lineItem);
},
openModal(modalName) {
this.$emit("openModal", modalName);
}
},
};
</script>

11
src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
View file

@ -27,7 +27,7 @@
ref="addressQuestions"
v-model="mobileQuestionModel.addressQuestions"
captureApartmentNumberOrBusinessName="true" />
<vehicleProtectedQuestion v-model="mobileQuestionModel.selectedValue"/>
<vehicleProtectedQuestion v-model="mobileQuestionModel.selectedValue" />
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
</modal>
</template>
@ -49,7 +49,7 @@ import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { storeActions } from "@/constants/store-actions.js";
import baseMixin from "@/mixins/base-mixin.js";
import TextBlock from '../../../digital-components/text-block/text-block.vue';
import TextBlock from "../../../digital-components/text-block/text-block.vue";
// Define Validation Rules
defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
@ -105,9 +105,7 @@ export default {
input.focus();
});
},
saveMobileLocationData() {
},
saveMobileLocationData() {},
},
computed: {
getModalId() {
@ -127,7 +125,6 @@ export default {
this.$emit("update:modelValue", newValue);
},
},
},
mounted() {},
components: {
@ -135,7 +132,7 @@ export default {
modal,
addressQuestions,
vehicleProtectedQuestion,
textBlock
textBlock,
},
};
</script>

4
src/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question.vue
View file

@ -18,7 +18,7 @@ export default {
name: "vehicle-protected-question",
data() {
return {
answers: [ "Yes", "No" ],
answers: ["Yes", "No"],
};
},
props: {
@ -50,4 +50,4 @@ export default {
},
},
};
</script>
</script>

50
src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
View file

@ -22,31 +22,31 @@
:onModalOpenedCallback="onModalOpened"
:footerButtonText="footerButtonText"
@footer-button-event="setZip">
<textboxQuestion
ref="zipInputTextQuestion"
:cmsWidgetName="this.textboxQuestionWidgetName"
v-model="serviceZipCodeInput"
inputId="serviceZipCodeInput"
questionAlignment="center"
mask="#####"
isRequired
disableAutoFill
validationRules="zip-required|zip-format" />
<alert
ref="alertInvalidZip"
v-if="displayInvalidZipAlert"
class="my-4"
:cmsWidgetName="this.alertInvalidZipWidgetName"
alertClass="alert-danger"
v-bind:isDismissible="false" />
<alert
ref="alertNonServiceableZip"
v-if="displayNonServiceableZipAlert"
class="my-4"
:cmsWidgetName="this.alertNonServiceableZipWidgetName"
:manualHeadline="AlertNonServiceableZipHeader"
alertClass="alert-danger"
v-bind:isDismissible="false" />
<textboxQuestion
ref="zipInputTextQuestion"
:cmsWidgetName="this.textboxQuestionWidgetName"
v-model="serviceZipCodeInput"
inputId="serviceZipCodeInput"
questionAlignment="center"
mask="#####"
isRequired
disableAutoFill
validationRules="zip-required|zip-format" />
<alert
ref="alertInvalidZip"
v-if="displayInvalidZipAlert"
class="my-4"
:cmsWidgetName="this.alertInvalidZipWidgetName"
alertClass="alert-danger"
v-bind:isDismissible="false" />
<alert
ref="alertNonServiceableZip"
v-if="displayNonServiceableZipAlert"
class="my-4"
:cmsWidgetName="this.alertNonServiceableZipWidgetName"
:manualHeadline="AlertNonServiceableZipHeader"
alertClass="alert-danger"
v-bind:isDismissible="false" />
</modal>
</template>