Add first WIP
This commit is contained in:
Chloe Herd
parent
862cd5a90b
commit
930ba9c3a0
5 changed files with 292 additions and 1 deletions
0
src/layouts/service-zip/service-zip.spec.js
Normal file
0
src/layouts/service-zip/service-zip.spec.js
Normal file
288
src/layouts/service-zip/service-zip.vue
Normal file
288
src/layouts/service-zip/service-zip.vue
Normal file
|
|
@ -0,0 +1,288 @@
|
|||
<template>
|
||||
<!-- TODO: UPDATE -->
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<loadingModal ref="loadingModal" />
|
||||
<div class="container-fluid page-container-grouped-styles">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-xl-4">
|
||||
<vehicleBanner cmsWidgetName="VehicleBannerWidget" />
|
||||
<funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
|
||||
<div>
|
||||
<textboxQuestion
|
||||
class="mb-4"
|
||||
cmsWidgetName="ServiceZipQuestionWidget"
|
||||
v-model="serviceZipCode"
|
||||
inputId="serviceZipCode"
|
||||
mask="#####"
|
||||
isRequired
|
||||
validationRules="zip-required|zip-format" />
|
||||
|
||||
<textboxQuestion
|
||||
class="mb-0"
|
||||
cmsWidgetName="EmailAddressQuestionWidget"
|
||||
v-model="emailAddress"
|
||||
inputId="emailAddress"
|
||||
:isRequired="!IsEmailOptional"
|
||||
disableAutoFill
|
||||
:validationRules="EmailValidationRules"
|
||||
:addOptionalText="IsEmailOptional" />
|
||||
<textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
|
||||
|
||||
<alert
|
||||
ref="alertInvalidZip"
|
||||
v-if="displayInvalidZipAlert"
|
||||
class="my-4"
|
||||
cmsWidgetName="AlertInvalidZipWidget"
|
||||
alertClass="alert-danger"
|
||||
v-bind:isDismissible="false" />
|
||||
|
||||
<alert
|
||||
class="my-4"
|
||||
:manualHeadline="AlertNonServiceableZipHeader"
|
||||
:manualCopy="AlertNonServiceableZipBody"
|
||||
v-model="customAlertData"
|
||||
v-if="displayNonServiceableZipAlert"
|
||||
alertClass="alert-danger" />
|
||||
|
||||
<navbar
|
||||
cmsWidgetName="FunnelFooterWidget"
|
||||
ref="navbar"
|
||||
:isForwardActionDisabled="!meta.valid"
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
||||
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
||||
import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
|
||||
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
||||
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 textBlock from "@/digital-components/text-block/text-block";
|
||||
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
||||
|
||||
//Supporting Files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { required, regex } from "@/helpers/validation-rules";
|
||||
import { errorMessages } from "@/constants/error-messages";
|
||||
import { Form, defineRule } from "vee-validate";
|
||||
import store from "@/store";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.js";
|
||||
import {
|
||||
skipVinLookup,
|
||||
skipVinLookupNotRepair,
|
||||
} from "@/helpers/heritage-integration/navigation-helper";
|
||||
import vinPagesMixin from "@/mixins/vin-pages-mixin";
|
||||
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
|
||||
import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import { queryStrings } from "@/constants/query-strings";
|
||||
|
||||
// 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));
|
||||
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
|
||||
defineRule(
|
||||
"email-address-format",
|
||||
regex(
|
||||
/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9-]+)\.([a-zA-Z]{2,})$/,
|
||||
errorMessages.EMAIL_ADDRESS_FORMAT
|
||||
)
|
||||
);
|
||||
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
|
||||
|
||||
export default {
|
||||
name: "service-zip",
|
||||
mixins: [vinPagesMixin],
|
||||
data() {
|
||||
return {
|
||||
serviceZipCode: this.getZipFromStore() ?? this.$route.query.zipcode,
|
||||
emailAddress: this.getEmailFromStore(),
|
||||
displayInvalidZipAlert: false,
|
||||
displayNonServiceableZipAlert: false,
|
||||
};
|
||||
},
|
||||
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
//Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
|
||||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
const lowerCaseParams = new URLSearchParams();
|
||||
for (const [name, value] of urlParams) {
|
||||
lowerCaseParams.append(name.toLowerCase(), value);
|
||||
}
|
||||
|
||||
const zip = lowerCaseParams.get(queryStrings.ZIP_CODE)
|
||||
? lowerCaseParams.get(queryStrings.ZIP_CODE)
|
||||
: store.getters.order.serviceLocation.zipCode;
|
||||
|
||||
//Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "cmsContent",
|
||||
promise: cmsContentPromise,
|
||||
},
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
next((vm) => {
|
||||
vm.setCmsContent(resultMap.cmsContent);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getZipFromStore() {
|
||||
return store.getters.order.serviceLocation.zipCode;
|
||||
},
|
||||
getEmailFromStore() {
|
||||
return store.getters.order.customer.emailAddress;
|
||||
},
|
||||
arePagePrerequisitesValid() {
|
||||
// TODO: REASSESS
|
||||
return store.getters.damage.isRepair || store.getters.damage.glassToReplace?.length > 0;
|
||||
},
|
||||
backButtonAction() {
|
||||
// route to move backwards
|
||||
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
|
||||
await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.emailAddress, false);
|
||||
await this.dispatchStoreAction(
|
||||
storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
|
||||
{
|
||||
zipCode: this.serviceZipCode,
|
||||
state: zipCodeData.state,
|
||||
zipCodeCtu: zipCodeData.zipCodeCtu,
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
if (!zipCodeData.isValid) {
|
||||
this.displayInvalidZipAlert = true;
|
||||
return this.$refs.navbar.removeLoader();
|
||||
}
|
||||
this.displayInvalidZipAlert = false;
|
||||
|
||||
if (!zipCodeData.isServiceable) {
|
||||
this.displayNonServiceableZipAlert = true;
|
||||
return this.$refs.navbar.removeLoader();
|
||||
}
|
||||
this.displayNonServiceableZipAlert = false;
|
||||
|
||||
const payment = this.$store.getters.payment;
|
||||
const policy = this.$store.getters.policy;
|
||||
|
||||
const vehicleChangedDuringPolicyLookupInHeritage =
|
||||
payment.isInsurance &&
|
||||
payment.insuranceCoverage.coverageStatus &&
|
||||
policy.policyNumber !== "";
|
||||
|
||||
if (vehicleChangedDuringPolicyLookupInHeritage) {
|
||||
navigateToHeritageFunnel({
|
||||
shouldSaveSession: true,
|
||||
pageNameToLog: "estimate",
|
||||
});
|
||||
} else if (this.$store.getters.order.referralNumber?.length === 6) {
|
||||
await this.navigateForwardWithSingleCarMatch();
|
||||
} else if (this.isRepair) {
|
||||
const supportingItemsPromise = await this.dispatchStoreActionWithLogging(
|
||||
storeActions.GET_SUPPORTING_ITEMS,
|
||||
null,
|
||||
"estimate"
|
||||
);
|
||||
|
||||
const promiseResultMap = [
|
||||
{
|
||||
resultKey: "supportingItems",
|
||||
promise: supportingItemsPromise,
|
||||
},
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
this.dispatchStoreAction(
|
||||
this.storeActions.SAVE_SUPPORTING_ITEMS,
|
||||
resultMap.supportingItems,
|
||||
false
|
||||
);
|
||||
|
||||
// call saveSession here - navigateWithSaving saves too late in the flow
|
||||
await saveSession({ pageNameToLog: "estimate" });
|
||||
return this.$router.navigateWithSaving(
|
||||
this.navigationScenarios.CLICKED_FORWARD_WITH_NO_QUESTIONS,
|
||||
this.$route
|
||||
);
|
||||
} else {
|
||||
// if we're skipping the vin-lookup but it's not a repair, we still need to get the parts
|
||||
await this.navigateForwardWithSingleCarMatch();
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
AlertNonServiceableZipHeader() {
|
||||
return this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll(
|
||||
"{custom:serviceZip}",
|
||||
this.serviceZipCode
|
||||
);
|
||||
},
|
||||
AlertNonServiceableZipBody() {
|
||||
return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
|
||||
},
|
||||
isRepair() {
|
||||
return store.getters.damage.isRepair;
|
||||
},
|
||||
alertInfo() {
|
||||
return this.skipVinNotRepair ? "AlertQuoteVinOptional" : "AlertQuoteReady";
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
serviceZipCode() {
|
||||
this.displayNonServiceableZipAlert = false;
|
||||
},
|
||||
},
|
||||
components: {
|
||||
funnelHeader,
|
||||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
navbar,
|
||||
buttonQuestion,
|
||||
Form,
|
||||
alert,
|
||||
textboxQuestion,
|
||||
textBlock,
|
||||
loadingModal,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.vinlookupquestion p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.vinlookupquestion strong {
|
||||
font-weight: 500;
|
||||
color: $black;
|
||||
}
|
||||
.vinlookupquestion p:nth-child(2) {
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -9,6 +9,7 @@ const fmgPageValues = {
|
|||
CAPABILITY_QUESTIONS: "capability-questions",
|
||||
LICENSE_PLATE_LOOKUP: "license-plate-lookup",
|
||||
ESTIMATE: "estimate",
|
||||
SERVICE_ZIP: "service-zip",
|
||||
ADDRESS_VEHICLES: "address-vehicles",
|
||||
QUOTE: "quote",
|
||||
INSURANCE_COMPANY: "insurance-company",
|
||||
|
|
|
|||
|
|
@ -21,11 +21,13 @@ const navigationScenarios = {
|
|||
CLICKED_FORWARD_WITH_REPLACE_AND_VERIFIED_INSURANCE:
|
||||
"CLICKED_FORWARD_WITH_REPLACE_AND_VERIFIED_INSURANCE",
|
||||
CLICKED_FORWARD_WITHOUT_VIN: "CLICKED_FORWARD_WITHOUT_VIN",
|
||||
CLICKED_FORWARD_WITH_SKIP_VIN: "CLICKED_FORWARD_WITH_SKIP_VIN",
|
||||
CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES: "CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES",
|
||||
SELECTED_VIN_WITH_MISMATCHED_GLASS: "SELECTED_VIN_WITH_MISMATCHED_GLASS",
|
||||
SELECTED_MANUAL_VIN: "SELECTED_MANUAL_VIN",
|
||||
SELECTED_LICENSE_PLATE: "SELECTED_LICENSE_PLATE",
|
||||
SELECTED_HOME_ADDRESS: "SELECTED_HOME_ADDRESS",
|
||||
SELECTED_NO_VIN: "SELECTED_NO_VIN",
|
||||
CLICKED_FORWARD_WITH_NO_QUESTIONS: "CLICKED_FORWARD_WITH_NO_QUESTIONS",
|
||||
CLICKED_VIN_RETRY: "CLICKED_VIN_RETRY",
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ const routingTable = function (store) {
|
|||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
|
||||
destinationFmgPageValue: fmgPageValues.ESTIMATE,
|
||||
destinationFmgPageValue: fmgPageValues.SERVICE_ZIP,
|
||||
},
|
||||
{
|
||||
scenario:
|
||||
|
|
|
|||
Loading…
Reference in a new issue