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

Merge remote-tracking branch 'origin/feature/CSR-1088' into feature/CSR-1012

Browse source
This commit is contained in:
Matt Caimi 2023-02-03 16:11:09 -05:00
commit a7946c0849
12 changed files with 196 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
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"
@buttonEvent="handleButtonEvent"
v-model="selectedValues" />
<!-- For nested questions -->
<transition name="fade" mode="out-in">
@ -214,6 +215,10 @@ export default {
setLastValuePushedToGa(lastValuePushedToGa) {
this.lastValuePushedToGa = lastValuePushedToGa;
},
handleButtonEvent(event) {
const eventName = event.eventName;
this.$emit(`buttonEvent.${eventName}`, event.args);
},
},
components: {
listButton,

23
src/digital-components/modal/modal.vue
View file

@ -9,15 +9,18 @@
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<div class="modal-header mb-2 mt-2">
<label v-if="headerText" class="modal-title d-flex justify-content-center pb-0 w-100">
{{ headerText }}
</label>
<button
ref="closeButton"
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"></button>
aria-label="Close"></button>
</div>
<div class="modal-body ps-5 pe-5 pt-5 pb-4">
<div class="modal-body ps-5 pe-5 pb-4 pt-0">
<slot></slot>
</div>
<div class="modal-footer px-5 py-4">
@ -27,7 +30,7 @@
ref="buttonMain"
suppressLoader
:buttonText="footerButtonText"
@click="$emit('footerButtonEvent')" />
@click-event="$emit('footer-button-event')" />
</div>
</div>
</div>
@ -42,6 +45,7 @@ export default {
name: "modal",
props: {
modalId: String,
headerText: String,
footerButtonText: String,
onModalOpenedCallback: {
type: Function,
@ -82,10 +86,19 @@ export default {
color: $black;
}
.modal-header {
border-bottom: none;
border-bottom: none;
.btn-close {
position: absolute;
right: 1rem;
top: 1rem;
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6874 1.82179L9.50889 8L15.6874 14.1782C16.1042 14.595 16.1042 15.2707 15.6874 15.6875C15.4843 15.8907 15.2146 16 14.9328 16C14.6514 16 14.3818 15.8906 14.1787 15.6875L8.00017 9.50934L1.82171 15.6875C1.6182 15.8907 1.34876 16 1.06708 16C0.785733 16 0.516056 15.8906 0.312965 15.6875C-0.10429 15.2706 -0.10429 14.5952 0.312797 14.1784L6.03276 8.45867L6.49146 8L0.312945 1.82177C-0.10429 1.40483 -0.10429 0.729418 0.312797 0.31262C0.728936 -0.104145 1.40489 -0.104051 1.82185 0.31262L7.54152 6.03202L8.00017 6.49065L14.1786 0.312472C14.5955 -0.104107 15.2707 -0.104201 15.6874 0.312452C16.1042 0.729289 16.1042 1.40496 15.6874 1.82179Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
opacity: 1;
};
.modal-title {
font-weight: 500;
color: rgb(0, 0, 0);
}
}
&.modal-component {

6
src/digital-components/textbox-question/textbox-question.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
<label
<label v-if="displayQuestionText"
:for="inputId"
:aria-label="questionText"
class="form-label"
@ -53,6 +53,10 @@ export default {
type: String,
default: "",
},
displayQuestionText: {
type: Boolean,
default: true
},
modelValue: String,
inputId: String,
isDisabled: Boolean,

28
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: {
@ -60,3 +60,27 @@ export default {
},
};
</script>
<style lang="scss">
.modal {
&.modal-component {
.modal-dialog {
.modal-content {
.modal-body {
.modal-sub-body {
color: $gray-600;
}
ul {
margin-bottom: 0;
}
p {
&:last-child {
margin-bottom: 0;
}
}
}
}
}
}
}
</style>

11
src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
View file

@ -1,6 +1,6 @@
<template>
<div role="application">
<div class="row mt-2 mb-4">
<div class="address-questions" role="application">
<div class="row mb-4">
<div class="col">
<textboxQuestion
id="streetAddressField"
@ -83,6 +83,7 @@
alertClass="alert-warning"
v-bind:isDismissible="false" />
</div>
</template>
<script>
@ -431,6 +432,11 @@ export default {
</script>
<style lang="scss">
.address-questions {
margin-top: 0.5rem;
}
#streetAddressField {
position: relative;
@ -439,4 +445,5 @@ export default {
left: 0 !important;
}
}
</style>

13
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"
v-on="{ 'buttonEvent.openModal': openModalAction }"
validationRules="option-required"
isRequired />
@ -30,10 +30,10 @@ digital
justifyText="left"
typeStyle="caption"
class="mt-4" />
<contentGroupModal cmsWidgetName="RainDefenseModal" />
<contentGroupModal cmsWidgetName="FrontWiperModal" />
<contentGroupModal cmsWidgetName="RearWiperModal" />
<contentGroupModal 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"
@ -134,6 +134,9 @@ export default {
};
},
methods: {
openModalAction(modalName) {
this.$refs[modalName].openModal();
},
arePagePrerequisitesValid() {
return (
store.getters.order.serviceLocation.zipCode &&

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

@ -1,5 +1,6 @@
<template>
<buttonQuestion
ref="buttonQuestion"
:answers="servicePackageAnswers"
:groupName="groupName"
buttonTypeString="servicePackageRadio"

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

@ -32,9 +32,21 @@
linkType="text"
:text="getRouterLinkDisplayTextFromCopy(copy)"
href="#!"
data-bs-toggle="modal"
@click-event="
$emit('buttonEvent', {
eventName: 'openModal',
args: 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" /> -->
</span>
</template>
</li>

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

@ -1,34 +1,39 @@
<template>
<div class="text-center">
<label
:for="displayModalLink"
:aria-label="questionText"
for="mobileLocationLinkPromptId"
:aria-label="mobileLocationLinkPromptText"
class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
:class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']"
v-html="questionText"></label>
v-html="mobileLocationLinkPromptText"></label>
<div class="update-mobile-location-text-link">
<textLink
id="displayModalLink"
id="mobileLocationLinkPromptId"
linkType="text"
:text="this.mobileLocationDisplayText"
:text="this.mobileLocationLinkText"
href="#!"
@click-event="openModal"
:data-bs-target="getModalId"
aria-label="Modal window" />
</div>
<textBlock cmsWidgetName="MobileFeeDisclaimerWidget" typeStyle="caption" />
</div>
<modal
ref="mobileServiceModal"
ref="mobileLocationModal"
:headerText="modalHeaderText"
:modalId="this.modalWidgetName"
:onModalOpenedCallback="onModalOpened"
:footerButtonText="mobileLocationDisplayText"
:footerButtonText="modalFooterText"
@footer-button-event="saveMobileLocationData">
<addressQuestions
ref="addressQuestions"
v-model="mobileQuestionModel.addressQuestions"
v-model="mobileLocationQuestionModel.addressQuestions"
captureApartmentNumberOrBusinessName="true" />
<vehicleProtectedQuestion v-model="mobileQuestionModel.selectedValue" />
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
<vehicleProtectedQuestion
ref="vehicleProtectedQuestion"
v-model="mobileLocationQuestionModel.isVehicleProtected"
cmsWidgetName="VehicleProtectedQuestionWidget" />
<textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
</modal>
</template>
@ -36,33 +41,36 @@
// Components
import textLink from "@/ux-components/text-link/text-link";
import modal from "@/digital-components/modal/modal";
import buttonQuestion from "@/digital-components/button-question/button-question";
import alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import addressQuestions from "@/layouts/address-lookup/customer-questions/address-questions/address-questions";
import vehicleProtectedQuestion from "@/layouts/service-location/mobile-location-modal-questions/vehicle-protected-question/vehicle-protected-question";
import textBlock from "@/digital-components/text-block/text-block";
// Supporting Files
import { defineRule } from "vee-validate";
import { defineRule, useForm } from "vee-validate";
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";
// Define Validation Rules
defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
export default {
name: "mobile-location-modal-questions",
emits: ["update:modelValue"], // The component emits an event
data() {
return {
isVehicleProtectedAnswers: [],
answers: [],
};
},
setup() {
const modalForm = useForm();
return {
modalForm,
}
},
props: {
modelValue: {
type: Object,
@ -81,43 +89,28 @@ export default {
},
cmsWidgetName: String,
modalWidgetName: String,
textboxQuestionWidgetName: String,
mobileFeeDisclaimerWidgetName: String,
workspaceRequirementsWidgetName: String,
alertNonServiceableZipWidgetName: String,
alertInvalidZipWidgetName: String,
},
methods: {
loadInitialData() {
return baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {});
},
initializeComponent(initialData) {
this.isVehicleProtectedAnswers = initialData;
},
openModal() {
this.$refs.mobileServiceModal.openModal();
},
closeModal() {
this.$refs.mobileServiceModal.closeModal();
},
focusOnZipInput() {
this.$nextTick(() => {
console.log(this.$refs);
const input = this.$refs.streetAddressField;
input.focus();
});
},
saveMobileLocationData() {},
},
computed: {
mobileLocationLinkPromptText() {
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
},
mobileLocationLinkText() {
return this.getCmsContent(this.cmsWidgetName, "BodyText");
},
getModalId() {
return "#" + this.modalWidgetName;
},
questionText() {
return this.getCmsContent(this.cmsWidgetName, "HeaderText");
modalHeaderText() {
return this.getCmsContent(this.modalWidgetName, "HeaderText");
},
mobileLocationDisplayText() {
return this.getCmsContent(this.cmsWidgetName, "FooterText");
modalFooterText() {
return this.getCmsContent(this.modalWidgetName, "FooterText");
},
mobileQuestionModel: {
mobileLocationQuestionModel: {
get: function () {
return this.modelValue;
},
@ -126,6 +119,30 @@ export default {
},
},
},
methods: {
loadInitialData() {
return baseMixin.methods.dispatchStoreAction(storeActions.GET_VEHICLE_YEARS, {});
},
initializeComponent(initialData) {
this.answers = initialData;
},
openModal() {
this.$refs.mobileLocationModal.openModal();
},
closeModal() {
this.$refs.mobileLocationModal.closeModal();
},
async saveMobileLocationData() {
const componentValidation = await this.modalForm.validate();
if (componentValidation.valid) {
this.closeModal();
} else {
this.$refs.mobileLocationModal.resetButtonStyle();
}
},
},
mounted() {},
components: {
textLink,
@ -148,4 +165,9 @@ export default {
vertical-align: middle;
margin-right: 0.5em;
}
.address-questions {
margin-top: 0em;
}
</style>

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

@ -6,21 +6,26 @@
groupName="isVehicleProtected"
textPosition="text-center"
v-model="selectedValue"
validationRules="option-required"
isRequired />
</template>
<script>
import buttonQuestion from "@/digital-components/button-question/button-question";
// Supporting files
import { storeActions } from "@/constants/store-actions.js";
import baseMixin from "@/mixins/base-mixin.js";
import { defineRule } from "vee-validate";
import { required } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
export default {
name: "vehicle-protected-question",
data() {
return {
answers: ["Yes", "No"],
};
},
props: {
modelValue: String,
cmsWidgetName: String,
@ -40,6 +45,9 @@ export default {
this.$emit("update:modelValue", newValue);
},
},
answers() {
return this.getCmsContent(this.cmsWidgetName, "Answers");
},
},
methods: {
loadInitialData() {
@ -51,3 +59,16 @@ export default {
},
};
</script>
<style lang="scss">
.question-text {
margin-top: 1.5rem;
margin-bottom: 1rem;
font-size: 1rem;
line-height: 1.625rem;
& > span {
text-align: left;
}
}
</style>

13
src/layouts/service-location/service-location.vue
View file

@ -10,10 +10,11 @@ fmg
alertNonServiceableZipWidgetName="AlertNonServiceableZipWidget"
alertInvalidZipWidgetName="AlertInvalidZipWidget" />
<mobileLocationModalQuestions
v-model="mobileLocationQuestion"
cmsWidgetName="MobileLocationModalWidget"
modalWidgetName="LocationModalWidget"
textboxQuestionWidgetName="MobileLocationQuestionWidget" />
v-model="mobileLocationQuestions"
cmsWidgetName="MobileLocationLinkWidget"
modalWidgetName="MobileLocationModalWidget"
mobileFeeDisclaimerWidgetName="MobileFeeDisclaimerWidget"
workspaceRequirementsWidgetName="WorkspaceRequirementsWidget" />
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ -35,12 +36,14 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
import { Form } from "vee-validate";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { validator } from "vee-validate"
import { provide } from 'vue';
export default {
name: "service-location",
data() {
return {
mobileLocationQuestion: {
mobileLocationQuestions: {
addressQuestions: {
streetAddress: "",
apartmentNumberOrBusinessName: "",

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

@ -21,6 +21,7 @@
:modalId="modalName"
:onModalOpenedCallback="onModalOpened"
:footerButtonText="footerButtonText"
:headerText="textboxQuestionPrompt"
@footer-button-event="setZip">
<textboxQuestion
ref="zipInputTextQuestion"
@ -29,6 +30,7 @@
inputId="serviceZipCodeInput"
questionAlignment="center"
mask="#####"
:displayQuestionText="false"
isRequired
disableAutoFill
validationRules="zip-required|zip-format" />
@ -58,7 +60,7 @@ import alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
//Supporting Files
import { defineRule } from "vee-validate";
import { defineRule, useForm } from "vee-validate";
import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
@ -142,6 +144,9 @@ export default {
},
},
computed: {
textboxQuestionPrompt() {
return this.getCmsContent(this.textboxQuestionWidgetName, "QuestionText");
},
modalName() {
return this.cmsWidgetName;
},
@ -152,7 +157,9 @@ export default {
if (this.serviceZip && this.serviceZip != 0) {
return this.serviceZipState + ", " + this.serviceZip;
}
return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
return (
this.getCmsContent(this.cmsWidgetName, "SubheaderText") || "Enter your service ZIP"
);
},
footerButtonText() {
return this.getCmsContent(this.cmsWidgetName, "FooterText");
@ -196,4 +203,5 @@ export default {
vertical-align: middle;
margin-right: 0.5em;
}
</style>