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

Merge branch 'develop' into feature/CSR-1382-loose-ends

Browse source
This commit is contained in:
Leah Schumann 2023-11-02 14:55:42 -04:00
commit 50cd865af4
9 changed files with 302 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/constants/store-actions.js
View file

@ -91,6 +91,9 @@ const storeActions = {
SAVE_SERVICE_LOCATION_TECH_NOTES: "saveServiceLocationTechNotes",
SAVE_CCTOKEN: "saveCCToken",
SAVE_PAYPAL_TOKEN: "savePaypalToken",
CREATE_SUBMITTED_ORDER: "createSubmittedOrder",
RESET_SUBMITTED_ORDER: "resetSubmittedOrder",
};
export { storeActions };

77
src/layouts/confirmation/confirmation.spec.js
View file

@ -19,6 +19,53 @@ beforeEach(() => {
jest.restoreAllMocks();
jest.clearAllMocks();
store.getters = {
submittedOrder: {
schedule: {
date: "2023-01-01",
startTime: "09:00",
endTime: "10:00",
routeCode: "000",
},
lineItems: {
glassParts: [
{
partNumber: "ABC123",
},
],
supportingItems: [],
},
serviceLocation: {
address: "test",
address2: "123",
city: "test",
state: "AZ",
appointmentType: "Inshop",
zipCode: "12345",
zipCodeCtu: "01234",
provider: {
providerNumber: "123",
address: {
streetAddress: "test1",
city: "test",
state: "AZ",
zipCode: "12345",
zipCodeCtu: "01234",
},
},
},
damage: {
isRepair: false,
},
referralNumber: "1234567",
vehicle: {
year: "2004",
make: "Ford",
model: "F Series F250",
},
customer: {
emailAddress: "test@test.com",
},
},
order: {
schedule: {
date: "2023-01-01",
@ -127,9 +174,10 @@ describe("computed properties...", () => {
});
test("ScheduleTimeFormatted should return mobile time in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE;
store.getters.order.schedule.startTime = "09:00";
store.getters.order.schedule.endTime = "11:00";
store.getters.submittedOrder.serviceLocation.appointmentType =
AppointmentTypeStrings.MOBILE;
store.getters.submittedOrder.schedule.startTime = "09:00";
store.getters.submittedOrder.schedule.endTime = "11:00";
const { wrapper } = setupMocks({});
// Act
@ -140,9 +188,10 @@ describe("computed properties...", () => {
});
test("ScheduleTimeFormatted should return DROP_OFF time in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
store.getters.order.schedule.startTime = "09:00";
store.getters.order.schedule.endTime = "11:00";
store.getters.submittedOrder.serviceLocation.appointmentType =
AppointmentTypeStrings.DROP_OFF;
store.getters.submittedOrder.schedule.startTime = "09:00";
store.getters.submittedOrder.schedule.endTime = "11:00";
const { wrapper } = setupMocks({});
// Act
@ -153,9 +202,10 @@ describe("computed properties...", () => {
});
test("ScheduleTimeFormatted should return Inshop time in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP;
store.getters.order.schedule.startTime = "09:00";
store.getters.order.schedule.endTime = "11:00";
store.getters.submittedOrder.serviceLocation.appointmentType =
AppointmentTypeStrings.IN_SHOP;
store.getters.submittedOrder.schedule.startTime = "09:00";
store.getters.submittedOrder.schedule.endTime = "11:00";
const { wrapper } = setupMocks({});
// Act
@ -166,7 +216,8 @@ describe("computed properties...", () => {
});
test("AppointmentWordingText should return mobile text in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE;
store.getters.submittedOrder.serviceLocation.appointmentType =
AppointmentTypeStrings.MOBILE;
const { wrapper } = setupMocks({});
// Act
@ -177,7 +228,8 @@ describe("computed properties...", () => {
});
test("AppointmentWordingText should return DROP_OFF text in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
store.getters.submittedOrder.serviceLocation.appointmentType =
AppointmentTypeStrings.DROP_OFF;
const { wrapper } = setupMocks({});
@ -189,7 +241,8 @@ describe("computed properties...", () => {
});
test("AppointmentWordingText should return IN_SHOP text in expected format.", () => {
//Arrange
store.getters.order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP;
store.getters.submittedOrder.serviceLocation.appointmentType =
AppointmentTypeStrings.IN_SHOP;
const { wrapper } = setupMocks({});

36
src/layouts/confirmation/confirmation.vue
View file

@ -57,6 +57,8 @@ import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import addToCalendar from "@/layouts/confirmation/add-to-calendar/add-to-calendar";
//Supporting files
import baseMixin from "@/mixins/base-mixin.js";
import { storeActions } from "@/constants/store-actions";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
import { settleAllPromises } from "@/helpers/layout-helper";
@ -70,6 +72,8 @@ import { get12HourTimeFormat, get12HourTimeMobileFormat } from "@/helpers/date-h
export default {
name: "confirmation",
async beforeRouteEnter(to, from, next) {
await baseMixin.methods.dispatchStoreAction(storeActions.CREATE_SUBMITTED_ORDER);
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
@ -95,7 +99,7 @@ export default {
return this.getCmsContent("ScheduleConfirmationWidget", "Image");
},
CustomerPortalLoginToken() {
return store.getters.order.customerPortalLoginToken;
return store.getters.submittedOrder.customerPortalLoginToken;
},
ConfirmationEmailText() {
return this.getCmsContent("ConfirmationEmailWidget", "BodyText")
@ -105,16 +109,16 @@ export default {
?.replaceAll(">", ">");
},
ScheduleDate() {
return store.getters.order.schedule.date;
return store.getters.submittedOrder.schedule.date;
},
AppointmentType() {
return store.getters.order.serviceLocation.appointmentType;
return store.getters.submittedOrder.serviceLocation.appointmentType;
},
ScheduleStartTime() {
return store.getters.order.schedule.startTime;
return store.getters.submittedOrder.schedule.startTime;
},
ScheduleEndTime() {
return store.getters.order.schedule.endTime;
return store.getters.submittedOrder.schedule.endTime;
},
InShopWordingText() {
return this.getCmsContent("InShopWordingWidget", "BodyText");
@ -126,31 +130,31 @@ export default {
return this.getCmsContent("DropOffWordingWidget", "BodyText");
},
ServiceLocationAddress() {
return store.getters.order.serviceLocation.address;
return store.getters.submittedOrder.serviceLocation.address;
},
ServiceLocationAddress2() {
return store.getters.order.serviceLocation.address2;
return store.getters.submittedOrder.serviceLocation.address2;
},
ServiceLocationCity() {
return store.getters.order.serviceLocation.city;
return store.getters.submittedOrder.serviceLocation.city;
},
ServiceLocationState() {
return store.getters.order.serviceLocation.state;
return store.getters.submittedOrder.serviceLocation.state;
},
ServiceLocationZipCode() {
return store.getters.order.serviceLocation.zipCode;
return store.getters.submittedOrder.serviceLocation.zipCode;
},
ProviderAddress() {
return store.getters.order.serviceLocation.provider.address.streetAddress;
return store.getters.submittedOrder.serviceLocation.provider.address.streetAddress;
},
ProviderCity() {
return store.getters.order.serviceLocation.provider.address.city;
return store.getters.submittedOrder.serviceLocation.provider.address.city;
},
ProviderState() {
return store.getters.order.serviceLocation.provider.address.state;
return store.getters.submittedOrder.serviceLocation.provider.address.state;
},
ProviderZipCode() {
return store.getters.order.serviceLocation.provider.address.zipCode;
return store.getters.submittedOrder.serviceLocation.provider.address.zipCode;
},
AppointmentWordingText() {
if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
@ -204,6 +208,10 @@ export default {
},
methods: {
arePagePrerequisitesValid() {
if (store.getters.hasSubmittedOrder) {
return true;
}
// Service Location
const serviceLocation = store.getters.order.serviceLocation;
const mobileReqs = !!(

73
src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.vue Normal file
View file

@ -0,0 +1,73 @@
<template>
<button
type="button"
class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
@click="handleClick">
<!-- <span class="m-0">{{ buttonLabelText }}</span> -->
<span v-for="token in tokens" :key="token">
<span v-if="isInlineImageToken(token)">
<img
v-if="hasImage"
class="ms-2"
:src="buttonImage"
:alt="getInlineAltText(token)" />
<span v-else> {{ getInlineAltText(token) }}</span>
</span>
<span v-else>
{{ token }}
</span>
</span>
</button>
</template>
<script>
import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
const INLINE_IMAGE_TOKEN = "custom:inlineImage";
export default {
name: "payment-switch-button",
props: {
buttonText: String,
buttonImage: String,
buttonImageId: String,
},
methods: {
handleClick(clickValue) {
this.pushEventToGA(
this.$route.query[this.queryStrings.FMG_PAGE],
this.GaActions.CLICKED,
this.buttonText,
true
);
this.$emit("click-event", clickValue);
},
isInlineImageToken(token) {
return token.includes(INLINE_IMAGE_TOKEN);
},
getInlineAltText(token) {
let innerTokens = token.split(",");
return innerTokens[1] ?? "";
},
},
computed: {
tokens() {
return splitCopyOnCMSPlaceHolder(this.buttonText ?? "");
},
hasImage() {
return !!this.buttonImage;
},
buttonLabelText() {
return this.tokens[0];
},
},
};
</script>
<style lang="scss" scoped>
.btn {
border: 1px solid $gray-600;
border-radius: 8px;
}
</style>

99
src/layouts/payment/payment-switch/payment-switch.vue Normal file
View file

@ -0,0 +1,99 @@
<template>
<div class="switch-payment-header pb-3">{{ switchPaymentHeaderText }}</div>
<div class="switch-payment-button">
<paymentSwitchButton
v-if="paymentType !== paymentTypes.cc"
:buttonText="paymentMethodsInfo[paymentTypes.cc]?.buttonText"
:buttonImage="paymentMethodsInfo[paymentTypes.cc]?.answerImageUrl"
:buttonImageId="paymentMethodsInfo[paymentTypes.cc]?.imageId"
@click-event="switchPaymentClick(paymentTypes.cc)" />
</div>
<div class="switch-button-separator py-3" v-if="paymentType !== paymentTypes.cc">or</div>
<div class="switch-payment-button">
<paymentSwitchButton
v-if="paymentType !== paymentTypes.pp"
:buttonText="paymentMethodsInfo[paymentTypes.pp]?.buttonText"
:buttonImage="paymentMethodsInfo[paymentTypes.pp]?.answerImageUrl"
:buttonImageId="paymentMethodsInfo[paymentTypes.pp]?.imageId"
@click-event="switchPaymentClick(paymentTypes.pp)" />
</div>
<div class="switch-button-separator py-3" v-if="paymentType === paymentTypes.cc">or</div>
<div class="switch-payment-button">
<paymentSwitchButton
v-if="paymentType !== paymentTypes.ap"
:buttonText="paymentMethodsInfo[paymentTypes.ap]?.buttonText"
:buttonImage="paymentMethodsInfo[paymentTypes.ap]?.answerImageUrl"
:buttonImageId="paymentMethodsInfo[paymentTypes.ap]?.imageId"
@click-event="switchPaymentClick(paymentTypes.ap)" />
</div>
</template>
<script>
import paymentSwitchButton from "./payment-switch-button/payment-switch-button";
export default {
name: "paymentSwitch",
data() {
return {
paymentTypes: {
cc: "cc",
pp: "pp",
ap: "ap",
},
};
},
props: {
cmsWidgetName: String,
paymentType: String,
},
computed: {
switchPaymentHeaderText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
paymentMethodAnswerData() {
const rawData = this.getCmsContent(this.cmsWidgetName, "Answers");
if (!rawData) {
return [];
} else {
return rawData;
}
},
paymentMethodsInfo() {
return this.paymentMethodAnswerData.reduce((accumulator, paymentMethod) => {
accumulator[paymentMethod.Name] = {
buttonText: paymentMethod.Text,
answerImageUrl: paymentMethod.AnswerImageUrl,
imageId: paymentMethod.ImageId,
};
return accumulator;
}, {});
},
},
methods: {
switchPaymentClick(paymentType) {
this.$emit("switch-payment-event", paymentType);
},
},
components: {
paymentSwitchButton,
},
};
</script>
<style lang="scss">
.switch-payment-header {
font-weight: 500;
color: $black;
}
.switch-button-separator {
text-align: center;
color: $black;
}
.switch-payment-button button {
width: 100%;
color: $black;
}
</style>

40
src/layouts/payment/payment.vue
View file

@ -21,39 +21,10 @@
scrolling="no">
</iframe>
</div>
<div>{{ switchPaymentText }}</div>
<div>
<button
v-if="paymentType !== 'cc'"
ref="switchToCCButton"
type="button"
@mousedown="switchPIAMethod('cc')"
aria-label="Switch to Credit Card">
Switch to Credit Card
</button>
</div>
<div v-if="paymentType !== 'cc'">or</div>
<div>
<button
v-if="paymentType !== 'pp'"
ref="switchToPPButton"
type="button"
@mousedown="switchPIAMethod('pp')"
aria-label="Switch to PayPal">
Switch to PayPal
</button>
</div>
<div v-if="paymentType === 'cc'">or</div>
<div>
<button
v-if="paymentType !== 'ap'"
ref="switchToAPButton"
type="button"
@mousedown="switchPIAMethod('ap')"
aria-label="Switch to Afterpay">
Switch to Afterpay
</button>
</div>
<paymentSwitch
cmsWidgetName="PaymentMethodWidget"
:paymentType="paymentType"
@switch-payment-event="switchPIAMethod" />
<navbar
cmsWidgetName="FunnelFooterWidget"
isForwardActionDisabled="true"
@ -193,6 +164,8 @@ import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
import navbar from "@/fmg-components/nav-bar/nav-bar";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import paymentSwitch from "./payment-switch/payment-switch.vue";
import { storeActions } from "@/constants/store-actions";
import store from "@/store";
import { externalUrls } from "@/router/router-constants/externalUrl-values";
@ -493,6 +466,7 @@ export default {
funnelHeader,
navbar,
loadingModal,
paymentSwitch,
},
};
</script>

1
src/layouts/vehicle/vehicle.vue
View file

@ -334,6 +334,7 @@ export default {
},
async forwardButtonAction() {
await this.dispatchStoreAction(storeActions.RESET_SUBMITTED_ORDER);
this.dispatchStoreAction(
storeActions.SAVE_VEHICLE,
{

11
src/router/index.js
View file

@ -55,8 +55,17 @@ const routes = [
await GoToFunnelStartOn404(next);
}
// Intercept all navigation if a submitted order exists in storage
if (store.getters.hasSubmittedOrder) {
if (to.query.fmgPage !== "vehicle") {
to.query.fmgPage = "confirmation";
}
}
// On entering the funnel "fresh", read cookie information, decide what to do next. payment pages used to return from safelitehop so exclude here
if (from.redirectedFrom === undefined && !to.query.fmgPage.startsWith("payment")) {
else if (
from.redirectedFrom === undefined &&
!to.query.fmgPage.startsWith("payment")
) {
// clear the saveSessionPromise - if it exists in the vuex store but a new instance was created
// the saveSessionPromise will no longer point to a valid promise
baseMixin.methods.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);

22
src/store/index.js
View file

@ -691,6 +691,8 @@ export const getters = {
.filter((x) => !!x.isActive)
.map((x) => x.settings)
.reduce((r, c) => Object.assign(r, c), {}) ?? {},
submittedOrder: (state) => JSON.parse(window.sessionStorage.getItem("submittedOrder")),
hasSubmittedOrder: (state) => window.sessionStorage.getItem("submittedOrder") !== null,
};
function getNonFalseValuesOfPropertyInArrayOfObjects(array, propertyName) {
@ -2441,6 +2443,26 @@ export const actions = {
return false;
},
createSubmittedOrder(context) {
if (context.getters.hasSubmittedOrder) {
return;
}
// create a submitted order object from vuex.
const submittedOrder = context.state.order;
// set to local storage
window.sessionStorage.setItem("submittedOrder", JSON.stringify(submittedOrder));
// clear vuex
context.commit(storeMutations.RESET_STATE);
},
resetSubmittedOrder(context) {
// clear from local storage
window.sessionStorage.removeItem("submittedOrder");
},
};
export default createStore({