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" :lastValuePushedToGa="lastValuePushedToGa"
:setLastValuePushedToGa="setLastValuePushedToGa" :setLastValuePushedToGa="setLastValuePushedToGa"
:suppressError="suppressError" :suppressError="suppressError"
@openModal="openModal"
v-model="selectedValues" /> v-model="selectedValues" />
<!-- For nested questions --> <!-- For nested questions -->
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
@ -214,6 +215,9 @@ export default {
setLastValuePushedToGa(lastValuePushedToGa) { setLastValuePushedToGa(lastValuePushedToGa) {
this.lastValuePushedToGa = lastValuePushedToGa; this.lastValuePushedToGa = lastValuePushedToGa;
}, },
openModal(modalName) {
this.$emit("openModal", modalName);
}
}, },
components: { components: {
listButton, listButton,

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

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

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

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

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

@ -1,10 +1,11 @@
<template> <template>
<buttonQuestion <buttonQuestion ref="buttonQuestion"
:answers="servicePackageAnswers" :answers="servicePackageAnswers"
:groupName="groupName" :groupName="groupName"
buttonTypeString="servicePackageRadio" buttonTypeString="servicePackageRadio"
:buttonTypeObject="servicePackageRadio" :buttonTypeObject="servicePackageRadio"
v-model="selectedPackageName" v-model="selectedPackageName"
@openModal="openModal"
:validationRules="validationRules" :validationRules="validationRules"
:isRequired="isRequired" /> :isRequired="isRequired" />
</template> </template>
@ -141,6 +142,7 @@ export default {
shouldDisplayTierTwoPackage() { shouldDisplayTierTwoPackage() {
return this.frontWipersApplicableForTierTwo || this.rearWiperApplicableForTierTwo; return this.frontWipersApplicableForTierTwo || this.rearWiperApplicableForTierTwo;
}, },
}, },
methods: { methods: {
processIfStatements, 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-if="!doesCopyContainTextLink(copy)" v-html="copy"></span>
<span v-else> <span v-else>
<textLink <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" linkType="text"
:text="getRouterLinkDisplayTextFromCopy(copy)" :text="getRouterLinkDisplayTextFromCopy(copy)"
href="#!" href="#!"
data-bs-toggle="modal" data-bs-toggle="modal"
:data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)" :data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)"
aria-label="Modal window" /> aria-label="Modal window" /> -->
</span> </span>
</template> </template>
</li> </li>
@ -88,6 +95,9 @@ export default {
.split(/(?:<li(?:.*?)>)|(?:<\/li>)/g) .split(/(?:<li(?:.*?)>)|(?:<\/li>)/g)
.filter((lineItem) => lineItem); .filter((lineItem) => lineItem);
}, },
openModal(modalName) {
this.$emit("openModal", modalName);
}
}, },
}; };
</script> </script>

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

@ -27,7 +27,7 @@
ref="addressQuestions" ref="addressQuestions"
v-model="mobileQuestionModel.addressQuestions" v-model="mobileQuestionModel.addressQuestions"
captureApartmentNumberOrBusinessName="true" /> captureApartmentNumberOrBusinessName="true" />
<vehicleProtectedQuestion v-model="mobileQuestionModel.selectedValue"/> <vehicleProtectedQuestion v-model="mobileQuestionModel.selectedValue" />
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" /> <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
</modal> </modal>
</template> </template>
@ -49,7 +49,7 @@ import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages"; import { errorMessages } from "@/constants/error-messages";
import { storeActions } from "@/constants/store-actions.js"; import { storeActions } from "@/constants/store-actions.js";
import baseMixin from "@/mixins/base-mixin.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 // Define Validation Rules
defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED)); defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
@ -105,9 +105,7 @@ export default {
input.focus(); input.focus();
}); });
}, },
saveMobileLocationData() { saveMobileLocationData() {},
},
}, },
computed: { computed: {
getModalId() { getModalId() {
@ -127,7 +125,6 @@ export default {
this.$emit("update:modelValue", newValue); this.$emit("update:modelValue", newValue);
}, },
}, },
}, },
mounted() {}, mounted() {},
components: { components: {
@ -135,7 +132,7 @@ export default {
modal, modal,
addressQuestions, addressQuestions,
vehicleProtectedQuestion, vehicleProtectedQuestion,
textBlock textBlock,
}, },
}; };
</script> </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", name: "vehicle-protected-question",
data() { data() {
return { return {
answers: [ "Yes", "No" ], answers: ["Yes", "No"],
}; };
}, },
props: { 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" :onModalOpenedCallback="onModalOpened"
:footerButtonText="footerButtonText" :footerButtonText="footerButtonText"
@footer-button-event="setZip"> @footer-button-event="setZip">
<textboxQuestion <textboxQuestion
ref="zipInputTextQuestion" ref="zipInputTextQuestion"
:cmsWidgetName="this.textboxQuestionWidgetName" :cmsWidgetName="this.textboxQuestionWidgetName"
v-model="serviceZipCodeInput" v-model="serviceZipCodeInput"
inputId="serviceZipCodeInput" inputId="serviceZipCodeInput"
questionAlignment="center" questionAlignment="center"
mask="#####" mask="#####"
isRequired isRequired
disableAutoFill disableAutoFill
validationRules="zip-required|zip-format" /> validationRules="zip-required|zip-format" />
<alert <alert
ref="alertInvalidZip" ref="alertInvalidZip"
v-if="displayInvalidZipAlert" v-if="displayInvalidZipAlert"
class="my-4" class="my-4"
:cmsWidgetName="this.alertInvalidZipWidgetName" :cmsWidgetName="this.alertInvalidZipWidgetName"
alertClass="alert-danger" alertClass="alert-danger"
v-bind:isDismissible="false" /> v-bind:isDismissible="false" />
<alert <alert
ref="alertNonServiceableZip" ref="alertNonServiceableZip"
v-if="displayNonServiceableZipAlert" v-if="displayNonServiceableZipAlert"
class="my-4" class="my-4"
:cmsWidgetName="this.alertNonServiceableZipWidgetName" :cmsWidgetName="this.alertNonServiceableZipWidgetName"
:manualHeadline="AlertNonServiceableZipHeader" :manualHeadline="AlertNonServiceableZipHeader"
alertClass="alert-danger" alertClass="alert-danger"
v-bind:isDismissible="false" /> v-bind:isDismissible="false" />
</modal> </modal>
</template> </template>