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

order confirmation

Browse source 
couldnt nav to
formatting
remove banner
header updates
This commit is contained in:
Bill Richardson 2025-12-03 14:29:52 -05:00
parent d82af3bdb1
commit 4ab5496f6c
2 changed files with 131 additions and 142 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

180
src/layouts/order-confirmation/order-confirmation.spec.js
View file

@ -13,7 +13,7 @@ import coverageStatuses from '@/constants/coverage-statuses';
import coverageType from '@/constants/coverage-type'; import coverageType from '@/constants/coverage-type';
import { deepClone } from '@/helpers/object-helper'; import { deepClone } from '@/helpers/object-helper';
import { AppointmentTypeStrings } from '@/constants/schedule-constants'; import { AppointmentTypeStrings } from '@/constants/schedule-constants';
import { paymentMethods } from "@/constants/payment-method-constants"; import { paymentMethods } from '@/constants/payment-method-constants';
jest.mock('@/helpers/layout-helper.js', () => jest.fn()); jest.mock('@/helpers/layout-helper.js', () => jest.fn());
@ -42,10 +42,6 @@ const headerStub = {
render: () => {} render: () => {}
}; };
const vehicleBannerStub = {
render: () => {}
};
const addToCalendarStub = { const addToCalendarStub = {
render: () => {} render: () => {}
}; };
@ -148,7 +144,6 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
mountOptions.global.stubs = { mountOptions.global.stubs = {
siteFooter: footerStub, siteFooter: footerStub,
siteHeader: headerStub, siteHeader: headerStub,
vehicleBanner: vehicleBannerStub,
addToCalendar: addToCalendarStub addToCalendar: addToCalendarStub
}; };
@ -181,7 +176,7 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
describe('OrderConfirmation.vue', () => { describe('OrderConfirmation.vue', () => {
afterEach(() => { afterEach(() => {
jest.resetAllMocks(); jest.resetAllMocks();
}) });
describe('Page pre-requisites', () => { describe('Page pre-requisites', () => {
test('If submitted order saved to store, page pre-reqs return true', async () => { test('If submitted order saved to store, page pre-reqs return true', async () => {
// Arrange // Arrange
@ -213,13 +208,6 @@ describe('OrderConfirmation.vue', () => {
// Assert // Assert
expect(siteHeader.exists()).toBe(true); expect(siteHeader.exists()).toBe(true);
}); });
test('Should render Vehicle Banner', () => {
// Act
const vehicleBanner = wrapper.findComponent(vehicleBannerStub);
// Assert
expect(vehicleBanner.exists()).toBe(true);
});
test('If Advanced flow, should display Site Footer', () => { test('If Advanced flow, should display Site Footer', () => {
// Arrange // Arrange
const mockStoreActions = () => { const mockStoreActions = () => {
@ -314,7 +302,7 @@ describe('OrderConfirmation.vue', () => {
}); });
test('returns expected vehicle info', () => { test('returns expected vehicle info', () => {
// Arrange // Arrange
var order = deepClone(sessionStorage); const order = deepClone(sessionStorage);
const year = 1998; const year = 1998;
const make = 'Toyota'; const make = 'Toyota';
const model = 'Cruse'; const model = 'Cruse';
@ -327,9 +315,9 @@ describe('OrderConfirmation.vue', () => {
const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions); const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions);
// Act // Act
const actualYear = wrapper.vm.customValueMap['vehicleYear']; const actualYear = wrapper.vm.customValueMap.vehicleYear;
const actualMake = wrapper.vm.customValueMap['vehicleMake']; const actualMake = wrapper.vm.customValueMap.vehicleMake;
const actualModel = wrapper.vm.customValueMap['vehicleModel']; const actualModel = wrapper.vm.customValueMap.vehicleModel;
// Assert // Assert
expect(actualYear).toBe(year); expect(actualYear).toBe(year);
@ -338,7 +326,7 @@ describe('OrderConfirmation.vue', () => {
}); });
test('returns expected customer email', () => { test('returns expected customer email', () => {
// Arrange // Arrange
var order = deepClone(sessionStorage); const order = deepClone(sessionStorage);
const emailAddress = 'email@google.com'; const emailAddress = 'email@google.com';
order.customer.emailAddress = emailAddress; order.customer.emailAddress = emailAddress;
const mockStoreActions = () => { const mockStoreActions = () => {
@ -347,19 +335,15 @@ describe('OrderConfirmation.vue', () => {
const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions); const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions);
// Act // Act
const actualEmail = wrapper.vm.customValueMap['email']; const actualEmail = wrapper.vm.customValueMap.email;
// Assert // Assert
expect(actualEmail).toBe(emailAddress); expect(actualEmail).toBe(emailAddress);
}); });
}) });
describe('confirmationEmailText', () => { describe('confirmationEmailText', () => {
const greaterId = ">"; const greaterId = '>';
const lessId = "<"; const lessId = '<';
const mobileWording = "Mobile wording";
const nonMobileWording = "Non mobile wording";
const mobileWidget = "MobileWordingWidget";
const dropOffAndInShopWidget = "DropOffAndInShopWordingWidget"
test.each([ test.each([
['test', 'test'], ['test', 'test'],
[`te${greaterId}st`, 'te>st'], [`te${greaterId}st`, 'te>st'],
@ -394,7 +378,7 @@ describe('OrderConfirmation.vue', () => {
['Between 11 PM - 12 AM', '23:00', '00:00'] ['Between 11 PM - 12 AM', '23:00', '00:00']
])('should return Mobile time in expected format "%p" when start time "%p" and end time "%p"', (expected, startTime, endTime) => { ])('should return Mobile time in expected format "%p" when start time "%p" and end time "%p"', (expected, startTime, endTime) => {
// Arrange // Arrange
var order = deepClone(sessionStorage); const order = deepClone(sessionStorage);
order.schedule.startTime = startTime; order.schedule.startTime = startTime;
order.schedule.endTime = endTime; order.schedule.endTime = endTime;
order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE; order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE;
@ -416,7 +400,7 @@ describe('OrderConfirmation.vue', () => {
['01:00', '02:00'] ['01:00', '02:00']
])('should return Drop off time in same format regardless of start/end time', (startTime, endTime) => { ])('should return Drop off time in same format regardless of start/end time', (startTime, endTime) => {
// Arrange // Arrange
var order = deepClone(sessionStorage); const order = deepClone(sessionStorage);
order.schedule.startTime = startTime; order.schedule.startTime = startTime;
order.schedule.endTime = endTime; order.schedule.endTime = endTime;
order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF; order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
@ -440,7 +424,7 @@ describe('OrderConfirmation.vue', () => {
['at 12:00 PM', '12:00', '02:00'] ['at 12:00 PM', '12:00', '02:00']
])('should return In Shop time in expected format "%p" when start time "%p"', (expected, startTime, endTime) => { ])('should return In Shop time in expected format "%p" when start time "%p"', (expected, startTime, endTime) => {
// Arrange // Arrange
var order = deepClone(sessionStorage); const order = deepClone(sessionStorage);
order.schedule.startTime = startTime; order.schedule.startTime = startTime;
order.schedule.endTime = endTime; order.schedule.endTime = endTime;
order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP; order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP;
@ -457,19 +441,19 @@ describe('OrderConfirmation.vue', () => {
}); });
}); });
describe('appointmentLocation', () => { describe('appointmentLocation', () => {
var order = deepClone(sessionStorage); const order = deepClone(sessionStorage);
order.serviceLocation = { order.serviceLocation = {
address: "123 Service Rd.", address: '123 Service Rd.',
address2: "Box 4", address2: 'Box 4',
city: "Columbus", city: 'Columbus',
state: "OH", state: 'OH',
zipCode: "12345", zipCode: '12345',
provider: { provider: {
address: { address: {
streetAddress: "304 provider Ln.", streetAddress: '304 provider Ln.',
city: "pittsburg", city: 'pittsburg',
state: "PA", state: 'PA',
zipCode: "16001" zipCode: '16001'
} }
} }
}; };
@ -509,9 +493,7 @@ describe('OrderConfirmation.vue', () => {
// Assert // Assert
expect(text).toBe(expectedShopLocation); expect(text).toBe(expectedShopLocation);
}); });
test.each( test.each(['turtle', undefined, null])('unknown appointment type %p returns null', (type) => {
['turtle', undefined, null]
)('unknown appointment type %p returns null', (type) => {
// Arrange // Arrange
order.serviceLocation.appointmentType = type; order.serviceLocation.appointmentType = type;
const mockStoreActions = () => { const mockStoreActions = () => {
@ -527,20 +509,20 @@ describe('OrderConfirmation.vue', () => {
}); });
}); });
describe('serviceLocationFullAddress', () => { describe('serviceLocationFullAddress', () => {
var order = deepClone(sessionStorage); const order = deepClone(sessionStorage);
beforeEach(() => { beforeEach(() => {
order.serviceLocation = { order.serviceLocation = {
address: "123 Service Rd.", address: '123 Service Rd.',
address2: "Box 4", address2: 'Box 4',
city: "Columbus", city: 'Columbus',
state: "OH", state: 'OH',
zipCode: "12345", zipCode: '12345',
provider: { provider: {
address: { address: {
streetAddress: "304 provider Ln.", streetAddress: '304 provider Ln.',
city: "pittsburg", city: 'pittsburg',
state: "PA", state: 'PA',
zipCode: "16001" zipCode: '16001'
} }
} }
}; };
@ -550,7 +532,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
}; };
const { wrapper } = getMountedComponent({}, {}, mockStoreActions); const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "123 Service Rd., Box 4,<br/> Columbus, OH 12345"; const expected = '123 Service Rd., Box 4,<br/> Columbus, OH 12345';
// Act // Act
const text = wrapper.vm.serviceLocationFullAddress; const text = wrapper.vm.serviceLocationFullAddress;
@ -564,7 +546,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
}; };
const { wrapper } = getMountedComponent({}, {}, mockStoreActions); const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = ", Box 4,<br/> Columbus, OH 12345"; const expected = ', Box 4,<br/> Columbus, OH 12345';
// Act // Act
const text = wrapper.vm.serviceLocationFullAddress; const text = wrapper.vm.serviceLocationFullAddress;
@ -578,7 +560,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
}; };
const { wrapper } = getMountedComponent({}, {}, mockStoreActions); const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "123 Service Rd., <br/> Columbus, OH 12345"; const expected = '123 Service Rd., <br/> Columbus, OH 12345';
// Act // Act
const text = wrapper.vm.serviceLocationFullAddress; const text = wrapper.vm.serviceLocationFullAddress;
@ -592,7 +574,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
}; };
const { wrapper } = getMountedComponent({}, {}, mockStoreActions); const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "123 Service Rd., Box 4,<br/> , OH 12345"; const expected = '123 Service Rd., Box 4,<br/> , OH 12345';
// Act // Act
const text = wrapper.vm.serviceLocationFullAddress; const text = wrapper.vm.serviceLocationFullAddress;
@ -606,7 +588,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
}; };
const { wrapper } = getMountedComponent({}, {}, mockStoreActions); const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "123 Service Rd., Box 4,<br/> Columbus, 12345"; const expected = '123 Service Rd., Box 4,<br/> Columbus, 12345';
// Act // Act
const text = wrapper.vm.serviceLocationFullAddress; const text = wrapper.vm.serviceLocationFullAddress;
@ -620,7 +602,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
}; };
const { wrapper } = getMountedComponent({}, {}, mockStoreActions); const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "123 Service Rd., Box 4,<br/> Columbus, OH "; const expected = '123 Service Rd., Box 4,<br/> Columbus, OH ';
// Act // Act
const text = wrapper.vm.serviceLocationFullAddress; const text = wrapper.vm.serviceLocationFullAddress;
@ -638,7 +620,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
}; };
const { wrapper } = getMountedComponent({}, {}, mockStoreActions); const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = ", <br/> , "; const expected = ', <br/> , ';
// Act // Act
const text = wrapper.vm.serviceLocationFullAddress; const text = wrapper.vm.serviceLocationFullAddress;
@ -648,20 +630,20 @@ describe('OrderConfirmation.vue', () => {
}); });
}); });
describe('providerFullAddress', () => { describe('providerFullAddress', () => {
var order = deepClone(sessionStorage); const order = deepClone(sessionStorage);
beforeEach(() => { beforeEach(() => {
order.serviceLocation = { order.serviceLocation = {
address: "123 Service Rd.", address: '123 Service Rd.',
address2: "Box 4", address2: 'Box 4',
city: "Columbus", city: 'Columbus',
state: "OH", state: 'OH',
zipCode: "12345", zipCode: '12345',
provider: { provider: {
address: { address: {
streetAddress: "304 provider Ln.", streetAddress: '304 provider Ln.',
city: "pittsburg", city: 'pittsburg',
state: "PA", state: 'PA',
zipCode: "16001" zipCode: '16001'
} }
} }
}; };
@ -671,7 +653,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
}; };
const { wrapper } = getMountedComponent({}, {}, mockStoreActions); const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "304 Provider Ln.,<br/> Pittsburg, PA 16001"; const expected = '304 Provider Ln.,<br/> Pittsburg, PA 16001';
// Act // Act
const text = wrapper.vm.providerFullAddress; const text = wrapper.vm.providerFullAddress;
@ -685,7 +667,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
}; };
const { wrapper } = getMountedComponent({}, {}, mockStoreActions); const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = ""; const expected = '';
// Act // Act
const text = wrapper.vm.providerFullAddress; const text = wrapper.vm.providerFullAddress;
@ -699,7 +681,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
}; };
const { wrapper } = getMountedComponent({}, {}, mockStoreActions); const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "304 Provider Ln.,<br/> , PA 16001"; const expected = '304 Provider Ln.,<br/> , PA 16001';
// Act // Act
const text = wrapper.vm.providerFullAddress; const text = wrapper.vm.providerFullAddress;
@ -713,7 +695,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
}; };
const { wrapper } = getMountedComponent({}, {}, mockStoreActions); const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "304 Provider Ln.,<br/> Pittsburg, 16001"; const expected = '304 Provider Ln.,<br/> Pittsburg, 16001';
// Act // Act
const text = wrapper.vm.providerFullAddress; const text = wrapper.vm.providerFullAddress;
@ -727,7 +709,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
}; };
const { wrapper } = getMountedComponent({}, {}, mockStoreActions); const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = "304 Provider Ln.,<br/> Pittsburg, PA "; const expected = '304 Provider Ln.,<br/> Pittsburg, PA ';
// Act // Act
const text = wrapper.vm.providerFullAddress; const text = wrapper.vm.providerFullAddress;
@ -744,7 +726,7 @@ describe('OrderConfirmation.vue', () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
}; };
const { wrapper } = getMountedComponent({}, {}, mockStoreActions); const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
const expected = ""; const expected = '';
// Act // Act
const text = wrapper.vm.providerFullAddress; const text = wrapper.vm.providerFullAddress;
@ -754,10 +736,10 @@ describe('OrderConfirmation.vue', () => {
}); });
}); });
describe('appointmentWordingText', () => { describe('appointmentWordingText', () => {
const mobileWording = "Mobile wording"; const mobileWording = 'Mobile wording';
const nonMobileWording = "Non mobile wording"; const nonMobileWording = 'Non mobile wording';
const mobileWidget = "MobileWordingWidget"; const mobileWidget = 'MobileWordingWidget';
const dropOffAndInShopWidget = "DropOffAndInShopWordingWidget" const dropOffAndInShopWidget = 'DropOffAndInShopWordingWidget';
let mixin; let mixin;
beforeEach(() => { beforeEach(() => {
processIfStatements.mockImplementation((content) => content); processIfStatements.mockImplementation((content) => content);
@ -765,13 +747,13 @@ describe('OrderConfirmation.vue', () => {
mixin = { mixin = {
methods: { methods: {
getCmsContent: jest.fn().mockImplementation((widget, _) => { getCmsContent: jest.fn().mockImplementation((widget, _) => {
if (widget == mobileWidget){ if (widget === mobileWidget) {
return mobileWording; return mobileWording;
} }
if (widget == dropOffAndInShopWidget){ if (widget === dropOffAndInShopWidget) {
return nonMobileWording; return nonMobileWording;
} }
return ""; return '';
}), }),
setCmsContent: jest.fn() setCmsContent: jest.fn()
} }
@ -784,10 +766,10 @@ describe('OrderConfirmation.vue', () => {
[AppointmentTypeStrings.IN_SHOP, nonMobileWording], [AppointmentTypeStrings.IN_SHOP, nonMobileWording],
['unknown', null], ['unknown', null],
[null, null], [null, null],
[undefined, null], [undefined, null]
])('appointment type %p returns wording %p', (type, wording) => { ])('appointment type %p returns wording %p', (type, wording) => {
// Arrange // Arrange
var order = deepClone(sessionStorage); const order = deepClone(sessionStorage);
order.serviceLocation.appointmentType = type; order.serviceLocation.appointmentType = type;
const mockStoreActions = () => { const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
@ -803,10 +785,10 @@ describe('OrderConfirmation.vue', () => {
}); });
}); });
describe('appointmentWordingText2', () => { describe('appointmentWordingText2', () => {
const mobileWording = "Mobile wording"; const mobileWording = 'Mobile wording';
const nonMobileWording = "Non mobile wording"; const nonMobileWording = 'Non mobile wording';
const mobileWidget = "MobileWordingWidget"; const mobileWidget = 'MobileWordingWidget';
const dropOffAndInShopWidget = "DropOffAndInShopWordingWidget" const dropOffAndInShopWidget = 'DropOffAndInShopWordingWidget';
let mixin; let mixin;
beforeEach(() => { beforeEach(() => {
processIfStatements.mockImplementation((content) => content); processIfStatements.mockImplementation((content) => content);
@ -814,13 +796,13 @@ describe('OrderConfirmation.vue', () => {
mixin = { mixin = {
methods: { methods: {
getCmsContent: jest.fn().mockImplementation((widget, _) => { getCmsContent: jest.fn().mockImplementation((widget, _) => {
if (widget == mobileWidget){ if (widget === mobileWidget) {
return mobileWording; return mobileWording;
} }
if (widget == dropOffAndInShopWidget){ if (widget === dropOffAndInShopWidget) {
return nonMobileWording; return nonMobileWording;
} }
return ""; return '';
}), }),
setCmsContent: jest.fn() setCmsContent: jest.fn()
} }
@ -833,10 +815,10 @@ describe('OrderConfirmation.vue', () => {
[AppointmentTypeStrings.IN_SHOP, nonMobileWording], [AppointmentTypeStrings.IN_SHOP, nonMobileWording],
['unknown', null], ['unknown', null],
[null, null], [null, null],
[undefined, null], [undefined, null]
])('appointment type %p returns wording "%p"', (type, wording) => { ])('appointment type %p returns wording "%p"', (type, wording) => {
// Arrange // Arrange
var order = deepClone(sessionStorage); const order = deepClone(sessionStorage);
order.serviceLocation.appointmentType = type; order.serviceLocation.appointmentType = type;
const mockStoreActions = () => { const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
@ -861,7 +843,7 @@ describe('OrderConfirmation.vue', () => {
[undefined, false] [undefined, false]
])('appointment type %p returns %p', (type, expected) => { ])('appointment type %p returns %p', (type, expected) => {
// Arrange // Arrange
var order = deepClone(sessionStorage); const order = deepClone(sessionStorage);
order.serviceLocation.appointmentType = type; order.serviceLocation.appointmentType = type;
const mockStoreActions = () => { const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
@ -886,7 +868,7 @@ describe('OrderConfirmation.vue', () => {
[undefined, false] [undefined, false]
])('appointment type %p returns %p', (type, expected) => { ])('appointment type %p returns %p', (type, expected) => {
// Arrange // Arrange
var order = deepClone(sessionStorage); const order = deepClone(sessionStorage);
order.serviceLocation.appointmentType = type; order.serviceLocation.appointmentType = type;
const mockStoreActions = () => { const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
@ -911,7 +893,7 @@ describe('OrderConfirmation.vue', () => {
[undefined, false] [undefined, false]
])('appointment type %p returns %p', (type, expected) => { ])('appointment type %p returns %p', (type, expected) => {
// Arrange // Arrange
var order = deepClone(sessionStorage); const order = deepClone(sessionStorage);
order.serviceLocation.appointmentType = type; order.serviceLocation.appointmentType = type;
const mockStoreActions = () => { const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
@ -957,7 +939,7 @@ describe('OrderConfirmation.vue', () => {
['Wednesday, December 30', '2026-12-30'] ['Wednesday, December 30', '2026-12-30']
])('returns %p given %p', (expected, date) => { ])('returns %p given %p', (expected, date) => {
// Arrange // Arrange
var order = deepClone(sessionStorage); const order = deepClone(sessionStorage);
const mockStoreActions = () => { const mockStoreActions = () => {
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order); useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
}; };
@ -970,5 +952,5 @@ describe('OrderConfirmation.vue', () => {
expect(result).toBe(expected); expect(result).toBe(expected);
}); });
}); });
}) });
}); });

69
src/layouts/order-confirmation/order-confirmation.vue
View file

@ -4,14 +4,12 @@
v-slot="{ meta }" v-slot="{ meta }"
@submit="onSubmit" @submit="onSubmit"
@invalidSubmit="onInvalidSubmit"> @invalidSubmit="onInvalidSubmit">
<div class="container-fluid fade-on-route-transition"> <div class="fade-on-route-transition">
<div class="row justify-content-center"> <div class="justify-content-center">
<div class="col-md-6 px-0 px-md-2">
<siteHeader :cmsWidgetName="widgets.siteHeader" /> <siteHeader :cmsWidgetName="widgets.siteHeader" />
</div> </div>
</div> <div class="iss-heritage-container-width">
<div class="row justify-content-center"> <div class="order-confirmation-container iss-heritage-content-container-width">
<div class="col-md-6 col-xl-4">
<div class="text-center text-color--black pt-5 pb-5 fs-5"> <div class="text-center text-color--black pt-5 pb-5 fs-5">
<img :src="orderConfirmationImage" /> <img :src="orderConfirmationImage" />
<span <span
@ -19,15 +17,11 @@
v-html="orderConfirmationHeaderText"></span> v-html="orderConfirmationHeaderText"></span>
</div> </div>
<div class="appointment-details"> <div class="appointment-details">
<div>
<vehicleBanner
:cmsWidgetName="widgets.vehicleBanner"
:displayGenericVehicleImage="false">
</vehicleBanner>
</div>
<div class="appointment-date-time text-center mt-4"> <div class="appointment-date-time text-center mt-4">
<p>{{ formatDate(schedule.date) }}</p> <p>{{ formatDate(schedule.date) }}</p>
<p class="mt-2">{{ appointmentTimeText }}</p> <p class="mt-2">
{{ appointmentTimeText }}
</p>
</div> </div>
<addToCalendar <addToCalendar
mobileWidgetName="AddToCalendar_Mobile" mobileWidgetName="AddToCalendar_Mobile"
@ -85,7 +79,6 @@
<script> <script>
// Components // Components
import siteHeader from '@/iss-components/site-header/site-header.vue'; import siteHeader from '@/iss-components/site-header/site-header.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue'; import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import addToCalendar from '@/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue'; import addToCalendar from '@/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue';
import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue'; import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue';
@ -117,7 +110,6 @@ export default {
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names
Form, Form,
siteHeader, siteHeader,
vehicleBanner,
siteFooter, siteFooter,
addToCalendar, addToCalendar,
cartDropdown cartDropdown
@ -181,7 +173,7 @@ export default {
dropOffAndInShop: 'DropOffAndInShopWordingWidget', dropOffAndInShop: 'DropOffAndInShopWordingWidget',
siteFooter: 'SiteFooterWidget' siteFooter: 'SiteFooterWidget'
} }
} };
}, },
computed: { computed: {
customValueMap() { customValueMap() {
@ -196,12 +188,13 @@ export default {
email: this.customerEmail, email: this.customerEmail,
CUSTOMER_PORTAL_URL: applicationConfig.CUSTOMER_PORTAL_URL, CUSTOMER_PORTAL_URL: applicationConfig.CUSTOMER_PORTAL_URL,
CUSTOMER_PORTAL_LOGIN_TOKEN: this.customerPortalLoginToken CUSTOMER_PORTAL_LOGIN_TOKEN: this.customerPortalLoginToken
} };
}, },
confirmationEmailText() { confirmationEmailText() {
var content = this.getCmsContentWithCustomValues( const content = this.getCmsContentWithCustomValues(
this.widgets.emailConfirmation, this.widgets.emailConfirmation,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT); widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
);
return content return content
?.replaceAll('&lt;', '<') ?.replaceAll('&lt;', '<')
?.replaceAll('&gt;', '>'); ?.replaceAll('&gt;', '>');
@ -209,32 +202,38 @@ export default {
orderConfirmationHeaderText() { orderConfirmationHeaderText() {
return this.getCmsContent( return this.getCmsContent(
this.widgets.orderConfirmation, this.widgets.orderConfirmation,
widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT); widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
);
}, },
orderConfirmationImage() { orderConfirmationImage() {
return this.getCmsContent( return this.getCmsContent(
this.widgets.orderConfirmation, this.widgets.orderConfirmation,
widgetFields.CONTENT_GROUP_WIDGET.IMAGE); widgetFields.CONTENT_GROUP_WIDGET.IMAGE
);
}, },
mobileWordingText() { mobileWordingText() {
return this.getCmsContentWithCustomValues( return this.getCmsContentWithCustomValues(
this.widgets.mobile, this.widgets.mobile,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT); widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
);
}, },
mobileWordingText2() { mobileWordingText2() {
return this.getCmsContent( return this.getCmsContent(
this.widgets.mobile, this.widgets.mobile,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2); widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2
);
}, },
nonMobileWordingText() { nonMobileWordingText() {
return this.getCmsContentWithCustomValues( return this.getCmsContentWithCustomValues(
this.widgets.dropOffAndInShop, this.widgets.dropOffAndInShop,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT); widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
);
}, },
nonMobileWordingText2() { nonMobileWordingText2() {
return this.getCmsContentWithCustomValues( return this.getCmsContentWithCustomValues(
this.widgets.dropOffAndInShop, this.widgets.dropOffAndInShop,
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2); widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2
);
}, },
appointmentTimeText() { appointmentTimeText() {
const { startTime, endTime } = this.schedule; const { startTime, endTime } = this.schedule;
@ -243,7 +242,7 @@ export default {
} }
if (this.isInShopAppointment) { if (this.isInShopAppointment) {
const formattedStartTime = get12HourTimeFormat(startTime); const formattedStartTime = get12HourTimeFormat(startTime);
return `at ${formattedStartTime}` return `at ${formattedStartTime}`;
} }
if (this.isMobileAppointment) { if (this.isMobileAppointment) {
const mobileStartTime = get12HourTimeMobileFormat(startTime); const mobileStartTime = get12HourTimeMobileFormat(startTime);
@ -259,14 +258,14 @@ export default {
if (this.isDropOffAppointment || this.isInShopAppointment) { if (this.isDropOffAppointment || this.isInShopAppointment) {
return this.providerFullAddress; return this.providerFullAddress;
} }
return null return null;
}, },
serviceLocationFullAddress() { serviceLocationFullAddress() {
var { address, address2, city, state, zipCode } = this.serviceLocation; const { address, address2, city, state, zipCode } = this.serviceLocation;
return `${address ?? ''}, ${address2 ? `${address2},` : ''}<br/> ${city ?? ''}, ${state ?? ''} ${zipCode ?? ''}`; return `${address ?? ''}, ${address2 ? `${address2},` : ''}<br/> ${city ?? ''}, ${state ?? ''} ${zipCode ?? ''}`;
}, },
providerFullAddress() { providerFullAddress() {
var { streetAddress, city, state, zipCode } = this.providerAddress; const { streetAddress, city, state, zipCode } = this.providerAddress;
return streetAddress return streetAddress
? `${toTitleCase(streetAddress)},<br/> ${toTitleCase(city)}, ${state ?? ''} ${zipCode ?? ''}` ? `${toTitleCase(streetAddress)},<br/> ${toTitleCase(city)}, ${state ?? ''} ${zipCode ?? ''}`
: ''; : '';
@ -293,7 +292,7 @@ export default {
const mobileAppointmentTypes = [ const mobileAppointmentTypes = [
AppointmentTypeStrings.MOBILE, AppointmentTypeStrings.MOBILE,
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
] ];
return mobileAppointmentTypes.includes(this.appointmentType); return mobileAppointmentTypes.includes(this.appointmentType);
}, },
isInShopAppointment() { isInShopAppointment() {
@ -402,7 +401,7 @@ export default {
const processedIfStatements = processIfStatements( const processedIfStatements = processIfStatements(
rawText, rawText,
'custom', 'custom',
(v) => { return this.customValueMap[v] } (v) => this.customValueMap[v]
); );
return getStringWithCustomValues(processedIfStatements, this.customValueMap); return getStringWithCustomValues(processedIfStatements, this.customValueMap);
}, },
@ -420,6 +419,14 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.iss-heritage-container-width {
.order-confirmation-container {
position: relative;
min-height: 1px;
padding-left: .9375rem;
padding-right: .9375rem;
}
}
.page-container-grouped-styles { .page-container-grouped-styles {
overflow: auto; overflow: auto;