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

Merge pull request #1664 from Safelite/feature/csr-1900

Browse source 
Feature/csr 1900
This commit is contained in:
chloeherdsafelite 2023-12-28 10:08:45 -05:00 committed by GitHub
commit cde92eb932
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 203 additions and 784 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/layouts/payment-method/payment-method.vue
View file

@ -21,6 +21,10 @@
<hr class="my-0" />
<reviewDropdown ref="reviewDropdown" />
<hr class="my-0" />
<cart
:damage="damageInfo"
:availableVaps="availableVaps"
@ -79,6 +83,7 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
import paymentMethodQuestion from "@/layouts/payment-method/payment-method-question/payment-method-question";
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
import cart from "@/fmg-components/cart/cart";
import reviewDropdown from "@/layouts/payment-method/review-dropdown/review-dropdown";
import promoModalQuestion from "@/layouts/payment-method/promo-modal-question/promo-modal-question";
import addVapsModalButtons from "./add-vaps-modal-buttons/add-vaps-modal-buttons";
import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
@ -152,6 +157,8 @@ export default {
"payment-method"
);
const reviewDropdownPromise = reviewDropdown.methods.loadInitialData();
const promiseResultMap = [
{
resultKey: "cmsContent",
@ -165,6 +172,10 @@ export default {
resultKey: "rainDefense",
promise: rainDefensePromise,
},
{
resultKey: "reviewDropdownData",
promise: reviewDropdownPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
@ -269,6 +280,8 @@ export default {
);
vm.updateFooterButtonText(vm.customCtaCopy);
vm.$refs.reviewDropdown.initializeComponent(resultMap.reviewDropdownData);
if (revalidatePromoResponse) {
const revalidateAlerts = buildToastMessagesFromRevalidateOrValidatePromoResponse(
revalidatePromoResponse,
@ -594,6 +607,7 @@ export default {
addVapsModalButtons,
paymentMethodQuestion,
promoModalQuestion,
reviewDropdown,
},
};
</script>

2
src/layouts/review/review-block/review-block.spec.js → src/layouts/payment-method/review-dropdown/review-block/review-block.spec.js
View file

@ -1,7 +1,7 @@
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import store from "@/store";
import reviewBlock from "@/layouts/review/review-block/review-block";
import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: () => Promise.resolve("content"),

24
src/layouts/review/review-block/review-block.vue → src/layouts/payment-method/review-dropdown/review-block/review-block.vue
View file

@ -6,17 +6,6 @@
:customText="customHeaderText"
typeStyle="body small bold dark"
marginTopSizeOverride="0" />
<textLink
linkType="textSmall"
text="Edit"
class="ml-auto"
useLoadingModal
@click-event="linkClicked"
href="javascript:void(0)">
<template v-slot:after-text v-if="editScreenReaderTextCmsWidgetName">
<span class="sr-only"> {{ screenReaderOnlyText }} </span>
</template>
</textLink>
</div>
<div
class="small review-block-content"
@ -38,24 +27,13 @@ export default {
customHeaderText: String,
// Specifically an array of strings.
content: Array,
editScreenReaderTextCmsWidgetName: String,
},
data() {
return {};
},
computed: {
screenReaderOnlyText() {
return this.getCmsContent(this.editScreenReaderTextCmsWidgetName, "Text");
},
},
methods: {
linkClicked() {
this.$emit("edit-clicked");
},
},
methods: {},
components: {
textBlock,
textLink,
},
};
</script>

174
src/layouts/payment-method/review-dropdown/review-dropdown.vue Normal file
View file

@ -0,0 +1,174 @@
<template>
<div>
<div
class="row review-toggle flex align-items-center pt-4"
:class="[isExpanded ? 'expanded' : '']"
@click="toggleIsExpanded">
<a
aria-label="expand appointment details"
href="javascript:void(0)"
class="col d-flex justify-content-between py-0">
<span class="label">Appointment details</span>
</a>
</div>
<div class="review-table px-4">
<vehicleReview cmsWidgetName="VehicleReviewWidget" :vehicle="vehicleInfo" />
<hr class="my-0" />
<damageReview
cmsWidgetName="DamageReviewWidget"
damageLocationsWidgetName="DamageLocationsWidget"
:damage="damageInfo" />
<hr class="my-0" />
<servicePackageReview
ref="servicePackageReview"
servicePackageOptionsCmsName="ServicePackageTitle"
defaultPackageItemsCmsName="DefaultPackageItemDescriptions"
vapsItemsCmsName="VapsItemDescriptions"
:damage="damageInfo"
:lineItems="lineItems" />
<hr class="my-0" />
<serviceLocationReview
cmsWidgetName="ServiceLocationTitleWidget"
:serviceLocation="serviceLocationInfo" />
<hr class="my-0" />
<scheduleReview cmsWidgetName="ScheduleWidget" :appointmentType="appointmentType" />
<hr class="my-0" />
<customerReview cmsWidgetName="CustomerReviewWidget" :customer="customerInfo" />
</div>
</div>
</template>
<script>
import textBlock from "@/digital-components/text-block/text-block";
import customerReview from "@/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review";
import damageReview from "@/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review";
import scheduleReview from "@/layouts/payment-method/review-dropdown/review-sections/schedule-review/schedule-review";
import serviceLocationReview from "@/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review";
import servicePackageReview from "@/layouts/payment-method/review-dropdown/review-sections/service-package-review/service-package-review";
import vehicleReview from "@/layouts/payment-method/review-dropdown/review-sections/vehicle-review/vehicle-review";
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
name: "review-dropdown",
props: {},
data() {
return {
isExpanded: false,
};
},
methods: {
async loadInitialData() {
const servicePackageInitialDataPromise = servicePackageReview.methods.loadInitialData();
const promiseResultMap = [
{
resultKey: "servicePackageData",
promise: servicePackageInitialDataPromise,
},
];
return settleAllPromises(promiseResultMap);
},
initializeComponent(apiResponses) {
this.$refs.servicePackageReview.initializeComponent(apiResponses.servicePackageData);
},
toggleIsExpanded() {
this.isExpanded = !this.isExpanded;
},
},
computed: {
vehicleInfo() {
return this.$store.getters.vehicle;
},
damageInfo() {
return this.$store.getters.damage;
},
lineItems() {
return this.$store.getters.lineItems;
},
serviceLocationInfo() {
return this.$store.getters.order.serviceLocation;
},
appointmentType() {
return this.$store.getters.order.serviceLocation.appointmentType;
},
customerInfo() {
return this.$store.getters.order.customer;
},
},
components: {
customerReview,
damageReview,
scheduleReview,
serviceLocationReview,
servicePackageReview,
vehicleReview,
},
};
</script>
<style lang="scss" scoped>
.dark-header {
color: $black;
line-height: 1.6;
}
.review-table {
max-height: 0;
transition: all 350ms ease-in;
overflow: hidden;
visibility: hidden;
}
.review-toggle {
margin-bottom: 1rem;
&.expanded {
margin-bottom: 0;
}
&:after {
content: "";
transition: all 0.5s ease;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right center;
width: 16px;
height: 9px;
display: inline-flex;
position: relative;
right: 0.75rem;
margin: 0.5rem 0 0.5rem 1rem;
cursor: pointer;
}
&.expanded:after {
transform: rotate(180deg);
}
&.expanded + .review-table {
max-height: 800px;
transition: all 150ms ease-in;
overflow: hidden;
visibility: visible;
}
a {
text-decoration: none;
}
.label {
color: $black;
font-weight: 500;
line-height: 1.625;
}
}
</style>

2
src/layouts/review/review-sections/customer-review/customer-review.spec.js → src/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review.spec.js
View file

@ -1,7 +1,7 @@
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import customerReview from "@/layouts/review/review-sections/customer-review/customer-review";
import customerReview from "@/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review";
const testConstants = {
cms: {

8
src/layouts/review/review-sections/customer-review/customer-review.vue → src/layouts/payment-method/review-dropdown/review-sections/customer-review/customer-review.vue
View file

@ -1,13 +1,9 @@
<template>
<reviewBlock
editScreenReaderTextCmsWidgetName="EditContactDetailsScreenReader"
:customHeaderText="header"
:content="displayContent"
@edit-clicked="editClicked" />
<reviewBlock :customHeaderText="header" :content="displayContent" @edit-clicked="editClicked" />
</template>
<script>
import reviewBlock from "@/layouts/review/review-block/review-block";
import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
export default {
name: "customer-review",

2
src/layouts/review/review-sections/damage-review/damage-review.spec.js → src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.spec.js
View file

@ -1,7 +1,7 @@
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import damageReview from "@/layouts/review/review-sections/damage-review/damage-review";
import damageReview from "@/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review";
import { damageLocationsSelected as glassConstants } from "@/constants/damage-locations-selected";
const testConstants = {

3
src/layouts/review/review-sections/damage-review/damage-review.vue → src/layouts/payment-method/review-dropdown/review-sections/damage-review/damage-review.vue
View file

@ -1,13 +1,12 @@
<template>
<reviewBlock
editScreenReaderTextCmsWidgetName="EditDamageScreenReader"
:headerCmsWidgetName="cmsWidgetName"
:content="displayContent"
@edit-clicked="editClicked" />
</template>
<script>
import reviewBlock from "@/layouts/review/review-block/review-block";
import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
import { damageLocationsSelected } from "@/constants/damage-locations-selected.js";
export default {

3
src/layouts/review/review-sections/schedule-review/schedule-review.vue → src/layouts/payment-method/review-dropdown/review-sections/schedule-review/schedule-review.vue
View file

@ -1,13 +1,12 @@
<template>
<reviewBlock
editScreenReaderTextCmsWidgetName="EditAppointmentScreenReader"
:customHeaderText="headerText"
:content="displayContent"
@edit-clicked="editClicked" />
</template>
<script>
import reviewBlock from "@/layouts/review/review-block/review-block";
import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
export default {
name: "schedule-review",

2
src/layouts/review/review-sections/service-location-review/service-location-review.spec.js → src/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.spec.js
View file

@ -1,6 +1,6 @@
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import serviceLocationReview from "@/layouts/review/review-sections/service-location-review/service-location-review";
import serviceLocationReview from "@/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";

3
src/layouts/review/review-sections/service-location-review/service-location-review.vue → src/layouts/payment-method/review-dropdown/review-sections/service-location-review/service-location-review.vue
View file

@ -1,13 +1,12 @@
<template>
<reviewBlock
editScreenReaderTextCmsWidgetName="EditLocationScreenReader"
:headerCmsWidgetName="cmsWidgetName"
:content="displayContent"
@edit-clicked="editClicked" />
</template>
<script>
import reviewBlock from "@/layouts/review/review-block/review-block";
import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
export default {

2
src/layouts/review/review-sections/service-package-review/service-package-review.spec.js → src/layouts/payment-method/review-dropdown/review-sections/service-package-review/service-package-review.spec.js
View file

@ -1,6 +1,6 @@
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import servicePackageReview from "@/layouts/review/review-sections/service-package-review/service-package-review";
import servicePackageReview from "@/layouts/payment-method/review-dropdown/review-sections/service-package-review/service-package-review";
import { packageNames } from "@/constants/package-names";
import { partTypeStrings } from "@/constants/part-type-strings";

3
src/layouts/review/review-sections/service-package-review/service-package-review.vue → src/layouts/payment-method/review-dropdown/review-sections/service-package-review/service-package-review.vue
View file

@ -1,13 +1,12 @@
<template>
<reviewBlock
editScreenReaderTextCmsWidgetName="EditServiceTypeScreenReader"
:headerCmsWidgetName="packageNameWidget"
:content="displayContent"
@edit-clicked="editClicked" />
</template>
<script>
import reviewBlock from "@/layouts/review/review-block/review-block";
import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
import {
getHighestFullySatisfiedTier,
containsLineItemWithPartType,

2
src/layouts/review/review-sections/vehicle-review/vehicle-review.spec.js → src/layouts/payment-method/review-dropdown/review-sections/vehicle-review/vehicle-review.spec.js
View file

@ -1,7 +1,7 @@
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import store from "@/store";
import vehicleReview from "@/layouts/review/review-sections/vehicle-review/vehicle-review";
import vehicleReview from "@/layouts/payment-method/review-dropdown/review-sections/vehicle-review/vehicle-review";
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: () => Promise.resolve("content"),

3
src/layouts/review/review-sections/vehicle-review/vehicle-review.vue → src/layouts/payment-method/review-dropdown/review-sections/vehicle-review/vehicle-review.vue
View file

@ -1,13 +1,12 @@
<template>
<reviewBlock
editScreenReaderTextCmsWidgetName="EditVehicleScreenReader"
:headerCmsWidgetName="cmsWidgetName"
:content="displayContent"
@edit-clicked="editClicked" />
</template>
<script>
import reviewBlock from "@/layouts/review/review-block/review-block";
import reviewBlock from "@/layouts/payment-method/review-dropdown/review-block/review-block";
export default {
name: "vehicle-review",

362
src/layouts/review/review.spec.js
View file

@ -1,362 +0,0 @@
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import store from "@/store";
import review from "@/layouts/review/review";
const testConstants = {};
jest.mock("@/store", () => ({
commit: jest.fn(),
dispatch: jest.fn(),
}));
describe("Review Page", () => {
beforeEach(() => {
store.getters = {
order: {
vehicle: {
year: "2020",
make: "Acura",
model: "MDX",
style: "4 door sedan",
},
damage: {
isRepair: false,
numberOfChips: 2,
glassToReplace: ["dummy location value"],
},
lineItems: {
glassParts: ["dummy part value"],
supportingItems: ["dummy supporting item"],
vaps: ["dummy vap"],
},
serviceLocation: {
address: "address 1",
address2: "address 2",
city: "city",
state: "state",
zipCode: "zip code",
appointmentType: "Mobile",
provider: {
providerNumber: 1,
address: {
streetAddress: "provider address 1",
city: "provider city",
state: "provider state",
zipCode: "provider zip code",
},
},
},
schedule: {
date: "date",
startTime: "start",
endTime: "end",
jobMinMinutes: "30",
jobMaxMinutes: "45",
},
customer: {
firstName: "first name",
lastName: "last name",
emailAddress: "builddigitaltest@safelite.com",
phoneNumber: "555-555-5555",
isSmsOptIn: true,
},
},
};
});
describe("arePagePrerequisitesValid", () => {
test("Returns true for baseline valid state", () => {
// Arrange
const { wrapper } = setupMocks({});
// Act
const isValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(isValid).toBe(true);
});
test("Returns false for empty state", () => {
// Arrange
store.getters.order = {
vehicle: {
year: null,
make: null,
model: null,
style: null,
carId: null,
category: null,
vin: null,
imageUrl: null,
imageVifNumber: null,
imageColor: null,
registration: {
licensePlate: null,
},
},
serviceLocation: {
address: null,
address2: null,
city: null,
state: null,
zipCode: null,
zipCodeCtu: null,
appointmentType: null,
isVehicleProtected: null,
provider: {
providerNumber: null,
address: {
streetAddress: null,
city: null,
state: null,
zipCode: null,
zipCodeCtu: null,
},
},
techNotes: null,
},
customer: {
firstName: null,
lastName: null,
emailAddress: null,
phoneNumber: null,
isSmsOptIn: null,
},
damage: {
isRepair: null,
numberOfChips: null,
glassToReplace: null,
partQuestionAnswers: null,
moldingQuestionAnswers: null,
capabilityQuestionAnswers: null,
},
lineItems: {
glassParts: null,
supportingItems: null,
vaps: null,
serverData: null,
},
payment: {
isInsurance: null,
insuranceCoverage: {
isVerified: null,
coverageStatus: null,
},
parentAccountNumber: 0,
},
schedule: {
date: null,
startTime: null,
endTime: null,
routeCode: null,
jobMaxMinutes: null,
jobMinMinutes: null,
},
referralNumber: null,
referralSequenceNumber: null,
referralDate: null,
referralCorrelationId: null,
eon: null,
};
const { wrapper } = setupMocks({});
// Act
const isValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(isValid).toBe(false);
});
describe("Damage requirements", () => {
test("Accepts null glassToReplace when is repair", () => {
// Arrange
store.getters.order.damage.isRepair = true;
store.getters.order.damage.glassToReplace = null;
store.getters.order.damage.numberOfChips = 1;
const { wrapper } = setupMocks({});
// Act
const isValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(isValid).toBe(true);
});
test("Rejects 0 chips when repair", () => {
// Arrange
store.getters.order.damage.isRepair = true;
store.getters.order.damage.numberOfChips = 0;
const { wrapper } = setupMocks({});
// Act
const isValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(isValid).toBe(false);
});
test("Rejects null chips when repair", () => {
// Arrange
store.getters.order.damage.isRepair = true;
store.getters.order.damage.numberOfChips = null;
const { wrapper } = setupMocks({});
// Act
const isValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(isValid).toBe(false);
});
test("Accepts null chips when not repair", () => {
// Arrange
store.getters.order.damage.isRepair = false;
store.getters.order.damage.numberOfChips = null;
const { wrapper } = setupMocks({});
// Act
const isValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(isValid).toBe(true);
});
test("Rejects empty glassToReplace when not repair", () => {
// Arrange
store.getters.order.damage.isRepair = false;
store.getters.order.damage.glassToReplace = null;
const { wrapper } = setupMocks({});
// Act
const isValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(isValid).toBe(false);
});
test("Rejects null glassToReplace when not repair", () => {
// Arrange
store.getters.order.damage.isRepair = false;
store.getters.order.damage.glassToReplace = [];
const { wrapper } = setupMocks({});
// Act
const isValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(isValid).toBe(false);
});
});
describe("Package requirements", () => {
test("Accepts null glassParts when is repair", () => {
// Arrange
store.getters.order.damage.isRepair = true;
store.getters.order.lineItems.glassParts = null;
const { wrapper } = setupMocks({});
// Act
const isValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(isValid).toBe(true);
});
test("Rejects null glassParts when not repair", () => {
// Arrange
store.getters.order.damage.isRepair = false;
store.getters.order.lineItems.glassParts = null;
const { wrapper } = setupMocks({});
// Act
const isValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(isValid).toBe(false);
});
});
describe("Service Location requirements", () => {
test("Accepts null provider address when mobile appointment", () => {
// Arrange
store.getters.order.serviceLocation.appointmentType = "Mobile";
store.getters.order.serviceLocation.provider.address = {};
const { wrapper } = setupMocks({});
// Act
const isValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(isValid).toBe(true);
});
test("Reject null provider address when non-mobile appointment", () => {
// Arrange
store.getters.order.serviceLocation.appointmentType = "Inshop";
store.getters.order.serviceLocation.provider.address = {};
const { wrapper } = setupMocks({});
// Act
const isValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(isValid).toBe(false);
});
test("Accepts null service location address when non-mobile appointment", () => {
// Arrange
store.getters.order.serviceLocation.appointmentType = "Inshop";
store.getters.order.serviceLocation.address = null;
store.getters.order.serviceLocation.address2 = null;
store.getters.order.serviceLocation.zipCode = null;
store.getters.order.serviceLocation.city = null;
store.getters.order.serviceLocation.state = null;
const { wrapper } = setupMocks({});
// Act
const isValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(isValid).toBe(true);
});
test("Rejects null service location address when mobile appointment", () => {
// Arrange
store.getters.order.serviceLocation.appointmentType = "Mobile";
store.getters.order.serviceLocation.address = null;
store.getters.order.serviceLocation.address2 = null;
store.getters.order.serviceLocation.zipCode = null;
store.getters.order.serviceLocation.city = null;
store.getters.order.serviceLocation.state = null;
const { wrapper } = setupMocks({});
// Act
const isValid = wrapper.vm.arePagePrerequisitesValid();
// Assert
expect(isValid).toBe(false);
});
});
});
});
function setupMocks(customMountOptions) {
customMountOptions.store = store;
const mountOptions = getMountOptions(customMountOptions);
const mockMixin = {
methods: {
getCmsContent: jest.fn((widgetName, cmsFieldName) => {
return `${widgetName} ${cmsFieldName}`;
}),
},
};
mountOptions.global.mixins = [mockMixin];
const wrapper = shallowMount(review, mountOptions);
wrapper.vm.setCmsContent = jest.fn();
return { wrapper };
}

330
src/layouts/review/review.vue
View file

@ -1,330 +0,0 @@
<template>
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
<!-- When customer-details is added: v-slot="{ meta }" -->
<div class="container-fluid">
<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"
:displayGenericVehicleImage="false" />
<textBlock
:customText="subHeaderTitle"
typeStyle="h5"
justifyText="center"
margin="mt-1"
class="dark-header" />
<textBlock
:customText="subHeaderBody"
typeStyle="body"
justifyText="left"
margin="mt-0 mb-2" />
<buttonMain
ref="buttonMain"
isPrimary
:buttonText="forwardButtonText"
loaderColor="white"
class="mb-2 w-100"
@click-event="forwardButtonAction" />
<div>
<hr />
</div>
<textBlock
customText="Appointment Details"
typeStyle="label bold"
justifyText="justify-text-left"
margin="mt-0"
class="dark-header" />
<div class="px-4">
<vehicleReview
cmsWidgetName="VehicleReviewWidget"
:vehicle="vehicleInfo"
@edit-clicked="editVehicle" />
<hr class="my-0" />
<damageReview
cmsWidgetName="DamageReviewWidget"
damageLocationsWidgetName="DamageLocationsWidget"
:damage="damageInfo"
@edit-clicked="editDamage" />
<hr class="my-0" />
<servicePackageReview
ref="servicePackageReview"
servicePackageOptionsCmsName="ServicePackageTitle"
defaultPackageItemsCmsName="DefaultPackageItemDescriptions"
vapsItemsCmsName="VapsItemDescriptions"
:damage="damageInfo"
:lineItems="lineItems"
@edit-clicked="editServicePackage" />
<hr class="my-0" />
<serviceLocationReview
cmsWidgetName="ServiceLocationTitleWidget"
:serviceLocation="serviceLocationInfo"
@edit-clicked="editServiceLocation" />
<hr class="my-0" />
<scheduleReview
cmsWidgetName="ScheduleWidget"
:appointmentType="appointmentType"
@edit-clicked="editSchedule" />
<hr class="my-0" />
<customerReview
cmsWidgetName="CustomerReviewWidget"
:customer="customerInfo"
@edit-clicked="editCustomerDetails" />
</div>
<div>
<hr class="my-0" />
</div>
<navbar
cmsWidgetName="FunnelFooterWidget"
@back-clicked="backButtonAction"
@ForwardClicked="forwardButtonAction" />
</div>
</div>
</div>
</Form>
</template>
<script>
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 buttonMain from "@/ux-components/button-main/button-main";
import textBlock from "@/digital-components/text-block/text-block";
import vehicleReview from "@/layouts/review/review-sections/vehicle-review/vehicle-review";
import damageReview from "@/layouts/review/review-sections/damage-review/damage-review";
import servicePackageReview from "@/layouts/review/review-sections/service-package-review/service-package-review";
import serviceLocationReview from "@/layouts/review/review-sections/service-location-review/service-location-review";
import scheduleReview from "@/layouts/review/review-sections/schedule-review/schedule-review";
import customerReview from "@/layouts/review/review-sections/customer-review/customer-review";
import { AppointmentTypeStrings } from "@/constants/schedule-constants";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import store from "@/store";
// Validation
import { Form } from "vee-validate";
export default {
name: "review",
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
const servicePackageInitialDataPromise = servicePackageReview.methods.loadInitialData();
// Settle promises and get results
const promiseResultMap = [
{
resultKey: "cmsContent",
promise: cmsContentPromise,
},
{
resultKey: "servicePackageData",
promise: servicePackageInitialDataPromise,
},
];
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.$refs.servicePackageReview.initializeComponent(resultMap.servicePackageData);
});
},
data() {
return {};
},
methods: {
arePagePrerequisitesValid() {
// Vehicle
const vehicle = store.getters.order.vehicle;
const vehicleReqs = !!(vehicle.year && vehicle.make && vehicle.model && vehicle.style);
// Damage
const damage = store.getters.order.damage;
const damageReqs = !!(
(damage.isRepair && damage.numberOfChips) ||
(!damage.isRepair && damage.glassToReplace?.length)
);
// Service Package
const lineItems = store.getters.order.lineItems;
// damageReqs handles checking for damage, even though it is also required for this section.
const packageReqs = !!(
(damage.isRepair || lineItems.glassParts) &&
lineItems.supportingItems
);
// Service Location
const serviceLocation = store.getters.order.serviceLocation;
const mobileReqs = !!(
serviceLocation.address &&
serviceLocation.city &&
serviceLocation.state &&
serviceLocation.zipCode
);
const providerLocation = serviceLocation.provider.address;
const dropOffInshopReqs = !!(
providerLocation.streetAddress &&
providerLocation.city &&
providerLocation.state &&
providerLocation.zipCode
);
const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;
const serviceLocationReqs =
(isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
// Schedule
const schedule = store.getters.order.schedule;
const scheduleReqs = !!(
schedule.date &&
schedule.startTime &&
schedule.endTime &&
schedule.jobMaxMinutes &&
schedule.jobMinMinutes
);
// Customer
const customer = store.getters.order.customer;
const customerReqs = !!(
customer.firstName &&
customer.lastName &&
customer.phoneNumber &&
customer.emailAddress
);
return (
vehicleReqs &&
damageReqs &&
packageReqs &&
serviceLocationReqs &&
scheduleReqs &&
customerReqs
);
},
backButtonAction() {
this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
},
forwardButtonAction() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
);
},
editVehicle() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_VEHICLE_EDIT,
this.$route
);
},
editDamage() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_DAMAGE_EDIT,
this.$route
);
},
editServicePackage() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_SERVICE_PACKAGE_EDIT,
this.$route
);
},
editServiceLocation() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_SERVICE_LOCATION_EDIT,
this.$route
);
},
editSchedule() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_SCHEDULE_EDIT,
this.$route
);
},
editCustomerDetails() {
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_CUSTOMER_EDIT,
this.$route
);
},
},
computed: {
subHeaderTitle() {
return this.getCmsContent("FunnelSubHeaderWidget", "HeaderText");
},
subHeaderBody() {
return this.getCmsContent("FunnelSubHeaderWidget", "BodyText");
},
forwardButtonText() {
return this.getCmsContent("FunnelFooterWidget", "ForwardButtonText");
},
vehicleInfo() {
return this.$store.getters.vehicle;
},
damageInfo() {
return this.$store.getters.damage;
},
lineItems() {
return this.$store.getters.lineItems;
},
serviceLocationInfo() {
return this.$store.getters.order.serviceLocation;
},
appointmentType() {
return this.$store.getters.order.serviceLocation.appointmentType;
},
customerInfo() {
return this.$store.getters.order.customer;
},
},
components: {
funnelHeader,
navbar,
vehicleBanner,
buttonMain,
textBlock,
vehicleReview,
damageReview,
servicePackageReview,
serviceLocationReview,
scheduleReview,
customerReview,
Form,
},
};
</script>
<style lang="scss" scoped>
.dark-header {
color: $black;
line-height: 1.6;
}
</style>

1
src/router/router-constants/fmgPage-values.js
View file

@ -15,7 +15,6 @@ const fmgPageValues = {
HERITAGE: "heritage",
SCHEDULE: "schedule",
CUSTOMER_DETAILS: "customer-details",
REVIEW: "review",
PAYMENT_METHOD: "payment-method",
PAYMENT: "payment",
PAYMENT_PIA_RETURN: "payment-pia-return",

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

@ -44,14 +44,6 @@ const navigationScenarios = {
// Schedule
CLICKED_CHANGE_LOCATION: "CLICKED_CHANGE_LOCATION",
// Review
CLICKED_VEHICLE_EDIT: "CLICKED_VEHICLE_EDIT",
CLICKED_DAMAGE_EDIT: "CLICKED_DAMAGE_EDIT",
CLICKED_SERVICE_PACKAGE_EDIT: "CLICKED_SERVICE_PACKAGE_EDIT",
CLICKED_SERVICE_LOCATION_EDIT: "CLICKED_SERVICE_LOCATION_EDIT",
CLICKED_SCHEDULE_EDIT: "CLICKED_SCHEDULE_EDIT",
CLICKED_CUSTOMER_EDIT: "CLICKED_CUSTOMER_EDIT",
// Payment
CLICKED_PAY_NOW: "CLICKED_PAY_NOW",
PIA_ERROR: "PIA_ERROR",

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

@ -428,43 +428,6 @@ const routingTable = function (store) {
scenario: navigationScenarios.CLICKED_BACK,
destinationFmgPageValue: fmgPageValues.SCHEDULE,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationFmgPageValue: fmgPageValues.REVIEW,
},
],
},
{
fmgPageValue: fmgPageValues.REVIEW,
maps: [
{
scenario: navigationScenarios.CLICKED_VEHICLE_EDIT,
destinationFmgPageValue: fmgPageValues.VEHICLE,
},
{
scenario: navigationScenarios.CLICKED_DAMAGE_EDIT,
destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
},
{
scenario: navigationScenarios.CLICKED_SERVICE_PACKAGE_EDIT,
destinationFmgPageValue: fmgPageValues.QUOTE,
},
{
scenario: navigationScenarios.CLICKED_BACK,
destinationFmgPageValue: fmgPageValues.CUSTOMER_DETAILS,
},
{
scenario: navigationScenarios.CLICKED_SERVICE_LOCATION_EDIT,
destinationFmgPageValue: fmgPageValues.SERVICE_LOCATION,
},
{
scenario: navigationScenarios.CLICKED_SCHEDULE_EDIT,
destinationFmgPageValue: fmgPageValues.SCHEDULE,
},
{
scenario: navigationScenarios.CLICKED_CUSTOMER_EDIT,
destinationFmgPageValue: fmgPageValues.CUSTOMER_DETAILS,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,
destinationFmgPageValue: fmgPageValues.PAYMENT_METHOD,
@ -476,7 +439,7 @@ const routingTable = function (store) {
maps: [
{
scenario: navigationScenarios.CLICKED_BACK,
destinationFmgPageValue: fmgPageValues.REVIEW,
destinationFmgPageValue: fmgPageValues.CUSTOMER_DETAILS,
},
{
scenario: navigationScenarios.CLICKED_FORWARD,