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

CASH-2563

Browse source
This commit is contained in:
Chris Redelinghuys 2026-05-06 09:21:08 -04:00
parent eb517878d1
commit b55451ec9d
9 changed files with 312 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/constants/bailout-codes.js Normal file
View file

@ -0,0 +1,5 @@
const bailoutCodes = {
PARTS_NOT_FOUND: "PartsNotFound",
};
export { bailoutCodes };

17
src/helpers/heritage-integration/order-helper.js
View file

@ -57,13 +57,15 @@ export async function saveSession({
shouldAwaitSaveSessionQueue = false,
submitAfterSave = false,
createUnscheduledStatusWorkOrderForPIA = false,
bailoutCode = null,
}) {
// Add next save session to end of queue
const saveSessionPromise = flushSaveSessionQueue().then(() => {
return saveSessionHelper(
pageNameToLog,
submitAfterSave,
createUnscheduledStatusWorkOrderForPIA
createUnscheduledStatusWorkOrderForPIA,
bailoutCode
);
});
@ -106,6 +108,15 @@ export async function saveQuote({ pageNameToLog }) {
return;
}
export async function submitBailout({ pageNameToLog, bailoutCode }) {
await saveSession({
pageNameToLog: pageNameToLog,
shouldAwaitSaveSessionQueue: true,
submitAfterSave: false,
bailoutCode: bailoutCode,
});
}
// PRIVATE FUNCTIONS //
/*
@ -147,13 +158,15 @@ async function loadSession(
async function saveSessionHelper(
pageNameToLog,
submitAfterSave = false,
createUnscheduledStatusWorkOrderForPIA = false
createUnscheduledStatusWorkOrderForPIA = false,
bailoutCode = null
) {
const savedSessionInfo = await baseMixin.methods.dispatchStoreActionWithLogging(
storeActions.SAVE_SESSION,
{
submitAfterSave: submitAfterSave,
createUnscheduledStatusWorkOrderForPIA: createUnscheduledStatusWorkOrderForPIA,
bailoutCode: bailoutCode,
},
pageNameToLog
);

91
src/layouts/bailout-success/bailout-success.vue Normal file
View file

@ -0,0 +1,91 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container ymm-return">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader
class="mb-5"
cmsWidgetName="FunnelSubHeaderWidget"
:alignLeft="true" />
<buttonMain
id="btn-vehicle-not-listed"
:isPrimary="true"
:buttonText="ReturnToHomeButtonText"
class="mb-3"
@click-event="forwardButtonAction" />
</div>
</div>
</div>
</Form>
</template>
<script>
import Form from "vee-validate";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import buttonMain from "@/ux-components/button-main/button-main";
import store from "@/store";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
name: "bailout-success",
mixins: [],
data() {
return {};
},
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.name);
// Settle API calls in parallel before handling results.
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
// Hydrate page with results
next(async (vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
async forwardButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_BACK_TO_HOMEPAGE,
"bailout-success"
);
},
arePagePrerequisitesValid() {
return (
store.getters.order.customer.firstName &&
store.getters.order.customer.lastName &&
store.getters.order.customer.emailAddress &&
store.getters.order.customer.phoneNumber
);
},
},
computed: {
ReturnToHomeButtonText() {
return this.getCmsContent("ReturnToHomeButtonText", "Text");
},
},
components: {
Form,
funnelHeader,
funnelSubHeader,
buttonMain,
},
};
</script>

177
src/layouts/bailout/bailout.vue
View file

@ -1,21 +1,63 @@
<template>
<Form>
<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 mt-4">
<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
<div class="container ymm-return">
<div class="row">
<div class="col-12 col-md-10 col-lg-8 col-xl-7">
<funnelSubHeader
class="mb-5"
:cmsWidgetName="getSubHeaderWidget"
:alignLeft="true" />
<textboxQuestion
isRequired
class="mb-4"
cmsWidgetName="FirstNameQuestionWidget"
v-model="firstName"
ref="firstName"
customInputId="firstName"
validationRules="first-name-required" />
<textboxQuestion
isRequired
class="mb-4"
cmsWidgetName="LastNameQuestionWidget"
v-model="lastName"
ref="lastName"
customInputId="lastName"
validationRules="last-name-required" />
<textboxQuestion
isRequired
class="mb-4"
cmsWidgetName="EmailQuestionWidget"
v-model="emailAddress"
inputId="email"
validationRules="email-address-required|email-address-format" />
<phoneNumberQuestion
isRequired
class="mb-4"
cmsWidgetName="PhoneNumberQuestionWidget"
v-model="phoneNumber"
validationRules="phone-number-required" />
<checkboxQuestion
class="mb-5"
cmsWidgetName="TextMeQuestionWidget"
v-model="isSmsOptIn" />
<navbar
cmsWidgetName="FunnelFooterWidget"
isForwardActionDisabled="true"
isSubmitHidden="true"
@back-clicked="backButtonAction" />
ref="navbar"
:isForwardActionDisabled="!meta.valid"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
<textBlock
class="mb-5"
cmsWidgetName="DisclaimerCopyWidget"
typeStyle="caption" />
</div>
</div>
</div>
@ -23,23 +65,56 @@
</template>
<script>
// Components
import { Form, defineRule } from "vee-validate";
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import phoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question";
import textBlock from "@/digital-components/text-block/text-block";
import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
import { routeData } from "@/router/constants/routes";
import { bailoutCodes } from "@/constants/bailout-codes";
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import store from "@/store";
import { errorMessages } from "@/constants/error-messages";
import { required, regex } from "@/helpers/validation-rules";
// DEFINE VALIDATION RULES
defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
defineRule("phone-number-required", required(errorMessages.PHONE_REQUIRED));
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
defineRule(
"email-address-format",
regex(
/^([a-zA-Z0-9_.+]+)@([a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*\.)+([a-zA-Z]{2,})$/,
errorMessages.EMAIL_ADDRESS_FORMAT
)
);
export default {
name: "bailout",
mixins: [],
data() {
return {
bailoutCode: this.getBailoutCodeFromStore(),
firstName: this.getFirstNameFromStore(),
lastName: this.getLastNameFromStore(),
emailAddress: this.getEmailAddressFromStore(),
phoneNumber: this.getPhoneNumberFromStore(),
isSmsOptIn: this.getIsSmsOptInFromStore(),
};
},
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.name);
// Settle promises and get results
// Settle API calls in parallel before handling results.
const promiseResultMap = [
{
resultKey: "cmsContent",
@ -49,25 +124,79 @@ export default {
const resultMap = await settleAllPromises(promiseResultMap);
// Call the "next" function to complete the transition to this page.
next((vm) => {
// Hydrate page with results
next(async (vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
},
methods: {
getBailoutCodeFromStore() {
return bailoutCodes.PARTS_NOT_FOUND;
},
getFirstNameFromStore() {
return store.getters.order.customer.firstName;
},
getLastNameFromStore() {
return store.getters.order.customer.lastName;
},
getEmailAddressFromStore() {
return store.getters.order.customer.emailAddress;
},
getPhoneNumberFromStore() {
return store.getters.order.customer.phoneNumber;
},
getIsSmsOptInFromStore() {
return store.getters.order.customer.isSmsOptIn;
},
async backButtonAction() {
this.$router.go(-1);
},
async forwardButtonAction() {
await this.dispatchStoreAction(
this.storeActions.SAVE_CUSTOMER_DETAILS,
{
firstName: this.firstName,
lastName: this.lastName,
emailAddress: this.emailAddress,
phoneNumber: this.phoneNumber,
isSmsOptIn: this.isSmsOptIn,
},
false
).then(() => {
this.$router.navigateWithPageData(
this.navigationScenarios.CLICKED_FORWARD,
this.pageName,
{
bailoutCode: this.bailoutCode,
}
);
});
},
arePagePrerequisitesValid() {
return true;
},
backButtonAction() {
this.$router.go(-1);
},
computed: {
getSubHeaderWidget() {
if (this.bailoutCode === bailoutCodes.PARTS_NOT_FOUND) {
return "PartsNotFoundSubHeaderWidget";
} else {
return "FunnelSubHeaderWidget";
}
},
},
components: {
Form,
funnelHeader,
navbar,
funnelSubHeader,
loadingModal,
navbar,
textBlock,
phoneNumberQuestion,
checkboxQuestion,
textboxQuestion,
},
};
</script>

5
src/router/constants/navigation-scenarios.js
View file

@ -13,6 +13,11 @@ const navigationScenarios = {
CLICKED_FORWARD_WITH_CASH: "CLICKED_FORWARD_WITH_CASH",
CLICKED_FORWARD_WITH_INSURANCE: "CLICKED_FORWARD_WITH_INSURANCE",
// Bailout
BAILOUT: "BAILOUT",
BAILOUT_SUCCESS: "BAILOUT_SUCCESS",
CLICKED_BACK_TO_HOMEPAGE: "CLICKED_BACK_TO_HOMEPAGE",
// TODO: use virtual page?
// Vin selection
CLICKED_BACK_WITH_VIN: "CLICKED_BACK_WITH_VIN",

8
src/router/constants/routes.js
View file

@ -171,6 +171,14 @@ export const routeData = {
path: "/virtual/restart",
virtual: true,
},
BAILOUT: {
name: "bailout",
path: "/bailout",
},
BAILOUT_SUCCESS: {
name: "bailout-success",
path: "/bailout-success",
},
};
export const FUNNEL_START_PAGE = routeData.VEHICLE;

18
src/router/constants/routing-table.js
View file

@ -802,6 +802,24 @@ const routingTable = function () {
},
],
},
{
pageName: routeData.BAILOUT.name,
maps: [
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationPageData: routeData.BAILOUT_SUCCESS,
},
],
},
{
pageName: routeData.BAILOUT_SUCCESS.name,
maps: [
{
scenario: navigationScenarios.CLICKED_BACK_TO_HOMEPAGE,
destinationPageData: routeData.VEHICLE,
},
],
},
];
};

20
src/router/methods/navigate.js
View file

@ -7,7 +7,13 @@ import store from "@/store";
import { handleSoftError } from "@/router/methods/error";
async function navigate(scenario, currentPageName, withSaving = false, forceTopLevelNav = false) {
async function navigate(
scenario,
currentPageName,
withSaving = false,
forceTopLevelNav = false,
bailoutCode = null
) {
// Check to see if calling page is same as current page.
// If not, cancel navigation before it begins.
const callingRoute = currentPageName;
@ -39,7 +45,7 @@ async function navigate(scenario, currentPageName, withSaving = false, forceTopL
store.getters?.applicationUser?.savedSessionId ||
store.getters?.order?.customer?.emailAddress
) {
await saveSession({ pageNameToLog: nextPage.name });
await saveSession({ pageNameToLog: nextPage.name, bailoutCode: bailoutCode });
}
}
@ -70,9 +76,13 @@ export async function navigateWithSaving(scenario, currentPageName) {
export async function navigateWithPageData(scenario, currentPageName, pageData = {}) {
const nextPage = getDestination(currentPageName, scenario);
await savePageData(nextPage.name, pageData);
return await navigate(scenario, currentPageName, true);
if (pageData && pageData.bailoutCode) {
await savePageData(currentPageName, pageData);
return await navigate(scenario, currentPageName, true, false, pageData.bailoutCode);
} else {
await savePageData(nextPage.name, pageData);
return await navigate(scenario, currentPageName, true);
}
}
export async function navigateAndForceTopLevelNavigation(

2
src/router/methods/routes.js
View file

@ -51,6 +51,8 @@ export const routes = [
createRoute(routeData.RECALIBRATION_INFO),
createRoute(routeData.COVERAGE_STATEMENT),
createRoute(routeData.VERIFY_DETAILS),
createRoute(routeData.BAILOUT),
createRoute(routeData.BAILOUT_SUCCESS),
// Virtual pages (resolve to a non-virtual page.)
createVirtualRoute(routeData.LANDING, landingBeforeEnter),
createVirtualRoute(routeData.HERITAGE, heritageBeforeEnter),