order confirmation
couldnt nav to formatting remove banner header updates
This commit is contained in:
Bill Richardson
parent
d82af3bdb1
commit
4ab5496f6c
2 changed files with 131 additions and 142 deletions
|
|
@ -13,7 +13,7 @@ import coverageStatuses from '@/constants/coverage-statuses';
|
|||
import coverageType from '@/constants/coverage-type';
|
||||
import { deepClone } from '@/helpers/object-helper';
|
||||
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());
|
||||
|
||||
|
|
@ -42,10 +42,6 @@ const headerStub = {
|
|||
render: () => {}
|
||||
};
|
||||
|
||||
const vehicleBannerStub = {
|
||||
render: () => {}
|
||||
};
|
||||
|
||||
const addToCalendarStub = {
|
||||
render: () => {}
|
||||
};
|
||||
|
|
@ -148,7 +144,6 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
|
|||
mountOptions.global.stubs = {
|
||||
siteFooter: footerStub,
|
||||
siteHeader: headerStub,
|
||||
vehicleBanner: vehicleBannerStub,
|
||||
addToCalendar: addToCalendarStub
|
||||
};
|
||||
|
||||
|
|
@ -181,7 +176,7 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
|
|||
describe('OrderConfirmation.vue', () => {
|
||||
afterEach(() => {
|
||||
jest.resetAllMocks();
|
||||
})
|
||||
});
|
||||
describe('Page pre-requisites', () => {
|
||||
test('If submitted order saved to store, page pre-reqs return true', async () => {
|
||||
// Arrange
|
||||
|
|
@ -204,7 +199,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
const mockStoreActions = () => {
|
||||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => sessionStorage);
|
||||
};
|
||||
wrapper = getMountedComponent({}, {}, mockStoreActions).wrapper;
|
||||
wrapper = getMountedComponent({}, {}, mockStoreActions).wrapper;
|
||||
});
|
||||
test('Should render Site Header', () => {
|
||||
// Act
|
||||
|
|
@ -213,13 +208,6 @@ describe('OrderConfirmation.vue', () => {
|
|||
// Assert
|
||||
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', () => {
|
||||
// Arrange
|
||||
const mockStoreActions = () => {
|
||||
|
|
@ -287,7 +275,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
});
|
||||
});
|
||||
describe('Computed properties', () => {
|
||||
describe('customValueMap', () =>{
|
||||
describe('customValueMap', () => {
|
||||
test.each([
|
||||
'inShopAppointment',
|
||||
'dropOffAppointment',
|
||||
|
|
@ -314,7 +302,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
});
|
||||
test('returns expected vehicle info', () => {
|
||||
// Arrange
|
||||
var order = deepClone(sessionStorage);
|
||||
const order = deepClone(sessionStorage);
|
||||
const year = 1998;
|
||||
const make = 'Toyota';
|
||||
const model = 'Cruse';
|
||||
|
|
@ -327,9 +315,9 @@ describe('OrderConfirmation.vue', () => {
|
|||
const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions);
|
||||
|
||||
// Act
|
||||
const actualYear = wrapper.vm.customValueMap['vehicleYear'];
|
||||
const actualMake = wrapper.vm.customValueMap['vehicleMake'];
|
||||
const actualModel = wrapper.vm.customValueMap['vehicleModel'];
|
||||
const actualYear = wrapper.vm.customValueMap.vehicleYear;
|
||||
const actualMake = wrapper.vm.customValueMap.vehicleMake;
|
||||
const actualModel = wrapper.vm.customValueMap.vehicleModel;
|
||||
|
||||
// Assert
|
||||
expect(actualYear).toBe(year);
|
||||
|
|
@ -338,7 +326,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
});
|
||||
test('returns expected customer email', () => {
|
||||
// Arrange
|
||||
var order = deepClone(sessionStorage);
|
||||
const order = deepClone(sessionStorage);
|
||||
const emailAddress = 'email@google.com';
|
||||
order.customer.emailAddress = emailAddress;
|
||||
const mockStoreActions = () => {
|
||||
|
|
@ -347,19 +335,15 @@ describe('OrderConfirmation.vue', () => {
|
|||
const { wrapper } = getMountedComponent(initialStore, {}, mockStoreActions);
|
||||
|
||||
// Act
|
||||
const actualEmail = wrapper.vm.customValueMap['email'];
|
||||
const actualEmail = wrapper.vm.customValueMap.email;
|
||||
|
||||
// Assert
|
||||
expect(actualEmail).toBe(emailAddress);
|
||||
});
|
||||
})
|
||||
});
|
||||
describe('confirmationEmailText', () => {
|
||||
const greaterId = ">";
|
||||
const lessId = "<";
|
||||
const mobileWording = "Mobile wording";
|
||||
const nonMobileWording = "Non mobile wording";
|
||||
const mobileWidget = "MobileWordingWidget";
|
||||
const dropOffAndInShopWidget = "DropOffAndInShopWordingWidget"
|
||||
const greaterId = '>';
|
||||
const lessId = '<';
|
||||
test.each([
|
||||
['test', 'test'],
|
||||
[`te${greaterId}st`, 'te>st'],
|
||||
|
|
@ -394,7 +378,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
['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) => {
|
||||
// Arrange
|
||||
var order = deepClone(sessionStorage);
|
||||
const order = deepClone(sessionStorage);
|
||||
order.schedule.startTime = startTime;
|
||||
order.schedule.endTime = endTime;
|
||||
order.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE;
|
||||
|
|
@ -416,7 +400,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
['01:00', '02:00']
|
||||
])('should return Drop off time in same format regardless of start/end time', (startTime, endTime) => {
|
||||
// Arrange
|
||||
var order = deepClone(sessionStorage);
|
||||
const order = deepClone(sessionStorage);
|
||||
order.schedule.startTime = startTime;
|
||||
order.schedule.endTime = endTime;
|
||||
order.serviceLocation.appointmentType = AppointmentTypeStrings.DROP_OFF;
|
||||
|
|
@ -440,7 +424,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
['at 12:00 PM', '12:00', '02:00']
|
||||
])('should return In Shop time in expected format "%p" when start time "%p"', (expected, startTime, endTime) => {
|
||||
// Arrange
|
||||
var order = deepClone(sessionStorage);
|
||||
const order = deepClone(sessionStorage);
|
||||
order.schedule.startTime = startTime;
|
||||
order.schedule.endTime = endTime;
|
||||
order.serviceLocation.appointmentType = AppointmentTypeStrings.IN_SHOP;
|
||||
|
|
@ -457,19 +441,19 @@ describe('OrderConfirmation.vue', () => {
|
|||
});
|
||||
});
|
||||
describe('appointmentLocation', () => {
|
||||
var order = deepClone(sessionStorage);
|
||||
const order = deepClone(sessionStorage);
|
||||
order.serviceLocation = {
|
||||
address: "123 Service Rd.",
|
||||
address2: "Box 4",
|
||||
city: "Columbus",
|
||||
state: "OH",
|
||||
zipCode: "12345",
|
||||
address: '123 Service Rd.',
|
||||
address2: 'Box 4',
|
||||
city: 'Columbus',
|
||||
state: 'OH',
|
||||
zipCode: '12345',
|
||||
provider: {
|
||||
address: {
|
||||
streetAddress: "304 provider Ln.",
|
||||
city: "pittsburg",
|
||||
state: "PA",
|
||||
zipCode: "16001"
|
||||
streetAddress: '304 provider Ln.',
|
||||
city: 'pittsburg',
|
||||
state: 'PA',
|
||||
zipCode: '16001'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -509,9 +493,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
// Assert
|
||||
expect(text).toBe(expectedShopLocation);
|
||||
});
|
||||
test.each(
|
||||
['turtle', undefined, null]
|
||||
)('unknown appointment type %p returns null', (type) => {
|
||||
test.each(['turtle', undefined, null])('unknown appointment type %p returns null', (type) => {
|
||||
// Arrange
|
||||
order.serviceLocation.appointmentType = type;
|
||||
const mockStoreActions = () => {
|
||||
|
|
@ -527,20 +509,20 @@ describe('OrderConfirmation.vue', () => {
|
|||
});
|
||||
});
|
||||
describe('serviceLocationFullAddress', () => {
|
||||
var order = deepClone(sessionStorage);
|
||||
const order = deepClone(sessionStorage);
|
||||
beforeEach(() => {
|
||||
order.serviceLocation = {
|
||||
address: "123 Service Rd.",
|
||||
address2: "Box 4",
|
||||
city: "Columbus",
|
||||
state: "OH",
|
||||
zipCode: "12345",
|
||||
address: '123 Service Rd.',
|
||||
address2: 'Box 4',
|
||||
city: 'Columbus',
|
||||
state: 'OH',
|
||||
zipCode: '12345',
|
||||
provider: {
|
||||
address: {
|
||||
streetAddress: "304 provider Ln.",
|
||||
city: "pittsburg",
|
||||
state: "PA",
|
||||
zipCode: "16001"
|
||||
streetAddress: '304 provider Ln.',
|
||||
city: 'pittsburg',
|
||||
state: 'PA',
|
||||
zipCode: '16001'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -550,7 +532,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
};
|
||||
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
|
||||
const text = wrapper.vm.serviceLocationFullAddress;
|
||||
|
|
@ -564,7 +546,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
};
|
||||
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
|
||||
const expected = ", Box 4,<br/> Columbus, OH 12345";
|
||||
const expected = ', Box 4,<br/> Columbus, OH 12345';
|
||||
|
||||
// Act
|
||||
const text = wrapper.vm.serviceLocationFullAddress;
|
||||
|
|
@ -578,7 +560,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
};
|
||||
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
|
||||
const expected = "123 Service Rd., <br/> Columbus, OH 12345";
|
||||
const expected = '123 Service Rd., <br/> Columbus, OH 12345';
|
||||
|
||||
// Act
|
||||
const text = wrapper.vm.serviceLocationFullAddress;
|
||||
|
|
@ -592,7 +574,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
};
|
||||
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
|
||||
const text = wrapper.vm.serviceLocationFullAddress;
|
||||
|
|
@ -606,7 +588,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
};
|
||||
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
|
||||
const text = wrapper.vm.serviceLocationFullAddress;
|
||||
|
|
@ -620,7 +602,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
};
|
||||
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
|
||||
const text = wrapper.vm.serviceLocationFullAddress;
|
||||
|
|
@ -638,7 +620,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
};
|
||||
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
|
||||
const expected = ", <br/> , ";
|
||||
const expected = ', <br/> , ';
|
||||
|
||||
// Act
|
||||
const text = wrapper.vm.serviceLocationFullAddress;
|
||||
|
|
@ -648,20 +630,20 @@ describe('OrderConfirmation.vue', () => {
|
|||
});
|
||||
});
|
||||
describe('providerFullAddress', () => {
|
||||
var order = deepClone(sessionStorage);
|
||||
const order = deepClone(sessionStorage);
|
||||
beforeEach(() => {
|
||||
order.serviceLocation = {
|
||||
address: "123 Service Rd.",
|
||||
address2: "Box 4",
|
||||
city: "Columbus",
|
||||
state: "OH",
|
||||
zipCode: "12345",
|
||||
address: '123 Service Rd.',
|
||||
address2: 'Box 4',
|
||||
city: 'Columbus',
|
||||
state: 'OH',
|
||||
zipCode: '12345',
|
||||
provider: {
|
||||
address: {
|
||||
streetAddress: "304 provider Ln.",
|
||||
city: "pittsburg",
|
||||
state: "PA",
|
||||
zipCode: "16001"
|
||||
streetAddress: '304 provider Ln.',
|
||||
city: 'pittsburg',
|
||||
state: 'PA',
|
||||
zipCode: '16001'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -671,7 +653,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
};
|
||||
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
|
||||
const expected = "304 Provider Ln.,<br/> Pittsburg, PA 16001";
|
||||
const expected = '304 Provider Ln.,<br/> Pittsburg, PA 16001';
|
||||
|
||||
// Act
|
||||
const text = wrapper.vm.providerFullAddress;
|
||||
|
|
@ -685,7 +667,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
};
|
||||
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
|
||||
const expected = "";
|
||||
const expected = '';
|
||||
|
||||
// Act
|
||||
const text = wrapper.vm.providerFullAddress;
|
||||
|
|
@ -699,7 +681,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
};
|
||||
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
|
||||
const expected = "304 Provider Ln.,<br/> , PA 16001";
|
||||
const expected = '304 Provider Ln.,<br/> , PA 16001';
|
||||
|
||||
// Act
|
||||
const text = wrapper.vm.providerFullAddress;
|
||||
|
|
@ -713,7 +695,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
};
|
||||
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
|
||||
const expected = "304 Provider Ln.,<br/> Pittsburg, 16001";
|
||||
const expected = '304 Provider Ln.,<br/> Pittsburg, 16001';
|
||||
|
||||
// Act
|
||||
const text = wrapper.vm.providerFullAddress;
|
||||
|
|
@ -727,7 +709,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
};
|
||||
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
|
||||
const expected = "304 Provider Ln.,<br/> Pittsburg, PA ";
|
||||
const expected = '304 Provider Ln.,<br/> Pittsburg, PA ';
|
||||
|
||||
// Act
|
||||
const text = wrapper.vm.providerFullAddress;
|
||||
|
|
@ -744,7 +726,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
};
|
||||
const { wrapper } = getMountedComponent({}, {}, mockStoreActions);
|
||||
const expected = "";
|
||||
const expected = '';
|
||||
|
||||
// Act
|
||||
const text = wrapper.vm.providerFullAddress;
|
||||
|
|
@ -754,10 +736,10 @@ describe('OrderConfirmation.vue', () => {
|
|||
});
|
||||
});
|
||||
describe('appointmentWordingText', () => {
|
||||
const mobileWording = "Mobile wording";
|
||||
const nonMobileWording = "Non mobile wording";
|
||||
const mobileWidget = "MobileWordingWidget";
|
||||
const dropOffAndInShopWidget = "DropOffAndInShopWordingWidget"
|
||||
const mobileWording = 'Mobile wording';
|
||||
const nonMobileWording = 'Non mobile wording';
|
||||
const mobileWidget = 'MobileWordingWidget';
|
||||
const dropOffAndInShopWidget = 'DropOffAndInShopWordingWidget';
|
||||
let mixin;
|
||||
beforeEach(() => {
|
||||
processIfStatements.mockImplementation((content) => content);
|
||||
|
|
@ -765,13 +747,13 @@ describe('OrderConfirmation.vue', () => {
|
|||
mixin = {
|
||||
methods: {
|
||||
getCmsContent: jest.fn().mockImplementation((widget, _) => {
|
||||
if (widget == mobileWidget){
|
||||
if (widget === mobileWidget) {
|
||||
return mobileWording;
|
||||
}
|
||||
if (widget == dropOffAndInShopWidget){
|
||||
if (widget === dropOffAndInShopWidget) {
|
||||
return nonMobileWording;
|
||||
}
|
||||
return "";
|
||||
return '';
|
||||
}),
|
||||
setCmsContent: jest.fn()
|
||||
}
|
||||
|
|
@ -784,15 +766,15 @@ describe('OrderConfirmation.vue', () => {
|
|||
[AppointmentTypeStrings.IN_SHOP, nonMobileWording],
|
||||
['unknown', null],
|
||||
[null, null],
|
||||
[undefined, null],
|
||||
[undefined, null]
|
||||
])('appointment type %p returns wording %p', (type, wording) => {
|
||||
// Arrange
|
||||
var order = deepClone(sessionStorage);
|
||||
const order = deepClone(sessionStorage);
|
||||
order.serviceLocation.appointmentType = type;
|
||||
const mockStoreActions = () => {
|
||||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
};
|
||||
|
||||
|
||||
const { wrapper } = getMountedComponent({}, {}, mockStoreActions, mixin);
|
||||
|
||||
// Act
|
||||
|
|
@ -803,10 +785,10 @@ describe('OrderConfirmation.vue', () => {
|
|||
});
|
||||
});
|
||||
describe('appointmentWordingText2', () => {
|
||||
const mobileWording = "Mobile wording";
|
||||
const nonMobileWording = "Non mobile wording";
|
||||
const mobileWidget = "MobileWordingWidget";
|
||||
const dropOffAndInShopWidget = "DropOffAndInShopWordingWidget"
|
||||
const mobileWording = 'Mobile wording';
|
||||
const nonMobileWording = 'Non mobile wording';
|
||||
const mobileWidget = 'MobileWordingWidget';
|
||||
const dropOffAndInShopWidget = 'DropOffAndInShopWordingWidget';
|
||||
let mixin;
|
||||
beforeEach(() => {
|
||||
processIfStatements.mockImplementation((content) => content);
|
||||
|
|
@ -814,13 +796,13 @@ describe('OrderConfirmation.vue', () => {
|
|||
mixin = {
|
||||
methods: {
|
||||
getCmsContent: jest.fn().mockImplementation((widget, _) => {
|
||||
if (widget == mobileWidget){
|
||||
if (widget === mobileWidget) {
|
||||
return mobileWording;
|
||||
}
|
||||
if (widget == dropOffAndInShopWidget){
|
||||
if (widget === dropOffAndInShopWidget) {
|
||||
return nonMobileWording;
|
||||
}
|
||||
return "";
|
||||
return '';
|
||||
}),
|
||||
setCmsContent: jest.fn()
|
||||
}
|
||||
|
|
@ -833,10 +815,10 @@ describe('OrderConfirmation.vue', () => {
|
|||
[AppointmentTypeStrings.IN_SHOP, nonMobileWording],
|
||||
['unknown', null],
|
||||
[null, null],
|
||||
[undefined, null],
|
||||
[undefined, null]
|
||||
])('appointment type %p returns wording "%p"', (type, wording) => {
|
||||
// Arrange
|
||||
var order = deepClone(sessionStorage);
|
||||
const order = deepClone(sessionStorage);
|
||||
order.serviceLocation.appointmentType = type;
|
||||
const mockStoreActions = () => {
|
||||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
|
|
@ -861,7 +843,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
[undefined, false]
|
||||
])('appointment type %p returns %p', (type, expected) => {
|
||||
// Arrange
|
||||
var order = deepClone(sessionStorage);
|
||||
const order = deepClone(sessionStorage);
|
||||
order.serviceLocation.appointmentType = type;
|
||||
const mockStoreActions = () => {
|
||||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
|
|
@ -886,7 +868,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
[undefined, false]
|
||||
])('appointment type %p returns %p', (type, expected) => {
|
||||
// Arrange
|
||||
var order = deepClone(sessionStorage);
|
||||
const order = deepClone(sessionStorage);
|
||||
order.serviceLocation.appointmentType = type;
|
||||
const mockStoreActions = () => {
|
||||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
|
|
@ -911,7 +893,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
[undefined, false]
|
||||
])('appointment type %p returns %p', (type, expected) => {
|
||||
// Arrange
|
||||
var order = deepClone(sessionStorage);
|
||||
const order = deepClone(sessionStorage);
|
||||
order.serviceLocation.appointmentType = type;
|
||||
const mockStoreActions = () => {
|
||||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
|
|
@ -957,7 +939,7 @@ describe('OrderConfirmation.vue', () => {
|
|||
['Wednesday, December 30', '2026-12-30']
|
||||
])('returns %p given %p', (expected, date) => {
|
||||
// Arrange
|
||||
var order = deepClone(sessionStorage);
|
||||
const order = deepClone(sessionStorage);
|
||||
const mockStoreActions = () => {
|
||||
useMainStore().getSubmittedOrder = jest.fn().mockImplementation(() => order);
|
||||
};
|
||||
|
|
@ -970,5 +952,5 @@ describe('OrderConfirmation.vue', () => {
|
|||
expect(result).toBe(expected);
|
||||
});
|
||||
});
|
||||
})
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -4,14 +4,12 @@
|
|||
v-slot="{ meta }"
|
||||
@submit="onSubmit"
|
||||
@invalidSubmit="onInvalidSubmit">
|
||||
<div class="container-fluid fade-on-route-transition">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 px-0 px-md-2">
|
||||
<siteHeader :cmsWidgetName="widgets.siteHeader" />
|
||||
</div>
|
||||
<div class="fade-on-route-transition">
|
||||
<div class="justify-content-center">
|
||||
<siteHeader :cmsWidgetName="widgets.siteHeader" />
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-xl-4">
|
||||
<div class="iss-heritage-container-width">
|
||||
<div class="order-confirmation-container iss-heritage-content-container-width">
|
||||
<div class="text-center text-color--black pt-5 pb-5 fs-5">
|
||||
<img :src="orderConfirmationImage" />
|
||||
<span
|
||||
|
|
@ -19,15 +17,11 @@
|
|||
v-html="orderConfirmationHeaderText"></span>
|
||||
</div>
|
||||
<div class="appointment-details">
|
||||
<div>
|
||||
<vehicleBanner
|
||||
:cmsWidgetName="widgets.vehicleBanner"
|
||||
:displayGenericVehicleImage="false">
|
||||
</vehicleBanner>
|
||||
</div>
|
||||
<div class="appointment-date-time text-center mt-4">
|
||||
<p>{{ formatDate(schedule.date) }}</p>
|
||||
<p class="mt-2">{{ appointmentTimeText }}</p>
|
||||
<p class="mt-2">
|
||||
{{ appointmentTimeText }}
|
||||
</p>
|
||||
</div>
|
||||
<addToCalendar
|
||||
mobileWidgetName="AddToCalendar_Mobile"
|
||||
|
|
@ -85,7 +79,6 @@
|
|||
<script>
|
||||
// Components
|
||||
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 addToCalendar from '@/layouts/order-confirmation/add-to-calendar/add-to-calendar.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
|
||||
Form,
|
||||
siteHeader,
|
||||
vehicleBanner,
|
||||
siteFooter,
|
||||
addToCalendar,
|
||||
cartDropdown
|
||||
|
|
@ -181,7 +173,7 @@ export default {
|
|||
dropOffAndInShop: 'DropOffAndInShopWordingWidget',
|
||||
siteFooter: 'SiteFooterWidget'
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
customValueMap() {
|
||||
|
|
@ -196,12 +188,13 @@ export default {
|
|||
email: this.customerEmail,
|
||||
CUSTOMER_PORTAL_URL: applicationConfig.CUSTOMER_PORTAL_URL,
|
||||
CUSTOMER_PORTAL_LOGIN_TOKEN: this.customerPortalLoginToken
|
||||
}
|
||||
};
|
||||
},
|
||||
confirmationEmailText() {
|
||||
var content = this.getCmsContentWithCustomValues(
|
||||
const content = this.getCmsContentWithCustomValues(
|
||||
this.widgets.emailConfirmation,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
|
||||
);
|
||||
return content
|
||||
?.replaceAll('<', '<')
|
||||
?.replaceAll('>', '>');
|
||||
|
|
@ -209,41 +202,47 @@ export default {
|
|||
orderConfirmationHeaderText() {
|
||||
return this.getCmsContent(
|
||||
this.widgets.orderConfirmation,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
|
||||
widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
|
||||
);
|
||||
},
|
||||
orderConfirmationImage() {
|
||||
return this.getCmsContent(
|
||||
this.widgets.orderConfirmation,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.IMAGE);
|
||||
widgetFields.CONTENT_GROUP_WIDGET.IMAGE
|
||||
);
|
||||
},
|
||||
mobileWordingText() {
|
||||
return this.getCmsContentWithCustomValues(
|
||||
this.widgets.mobile,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
|
||||
);
|
||||
},
|
||||
mobileWordingText2() {
|
||||
return this.getCmsContent(
|
||||
this.widgets.mobile,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2
|
||||
);
|
||||
},
|
||||
nonMobileWordingText() {
|
||||
return this.getCmsContentWithCustomValues(
|
||||
this.widgets.dropOffAndInShop,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
|
||||
);
|
||||
},
|
||||
nonMobileWordingText2() {
|
||||
return this.getCmsContentWithCustomValues(
|
||||
this.widgets.dropOffAndInShop,
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
|
||||
widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2
|
||||
);
|
||||
},
|
||||
appointmentTimeText() {
|
||||
const { startTime, endTime } = this.schedule;
|
||||
if (this.isDropOffAppointment){
|
||||
if (this.isDropOffAppointment) {
|
||||
return 'Drop off before 9:30 AM';
|
||||
}
|
||||
if (this.isInShopAppointment){
|
||||
if (this.isInShopAppointment) {
|
||||
const formattedStartTime = get12HourTimeFormat(startTime);
|
||||
return `at ${formattedStartTime}`
|
||||
return `at ${formattedStartTime}`;
|
||||
}
|
||||
if (this.isMobileAppointment) {
|
||||
const mobileStartTime = get12HourTimeMobileFormat(startTime);
|
||||
|
|
@ -253,38 +252,38 @@ export default {
|
|||
return null;
|
||||
},
|
||||
appointmentLocation() {
|
||||
if (this.isMobileAppointment){
|
||||
if (this.isMobileAppointment) {
|
||||
return this.serviceLocationFullAddress;
|
||||
}
|
||||
if (this.isDropOffAppointment || this.isInShopAppointment){
|
||||
if (this.isDropOffAppointment || this.isInShopAppointment) {
|
||||
return this.providerFullAddress;
|
||||
}
|
||||
return null
|
||||
return null;
|
||||
},
|
||||
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 ?? ''}`;
|
||||
},
|
||||
providerFullAddress() {
|
||||
var { streetAddress, city, state, zipCode } = this.providerAddress;
|
||||
const { streetAddress, city, state, zipCode } = this.providerAddress;
|
||||
return streetAddress
|
||||
? `${toTitleCase(streetAddress)},<br/> ${toTitleCase(city)}, ${state ?? ''} ${zipCode ?? ''}`
|
||||
: '';
|
||||
},
|
||||
appointmentWordingText() {
|
||||
if (this.isMobileAppointment){
|
||||
if (this.isMobileAppointment) {
|
||||
return this.mobileWordingText;
|
||||
}
|
||||
if (this.isInShopAppointment || this.isDropOffAppointment){
|
||||
if (this.isInShopAppointment || this.isDropOffAppointment) {
|
||||
return this.nonMobileWordingText;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
appointmentWordingText2() {
|
||||
if (this.isMobileAppointment){
|
||||
if (this.isMobileAppointment) {
|
||||
return this.mobileWordingText2;
|
||||
}
|
||||
if (this.isInShopAppointment || this.isDropOffAppointment){
|
||||
if (this.isInShopAppointment || this.isDropOffAppointment) {
|
||||
return this.nonMobileWordingText2;
|
||||
}
|
||||
return null;
|
||||
|
|
@ -293,7 +292,7 @@ export default {
|
|||
const mobileAppointmentTypes = [
|
||||
AppointmentTypeStrings.MOBILE,
|
||||
AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP
|
||||
]
|
||||
];
|
||||
return mobileAppointmentTypes.includes(this.appointmentType);
|
||||
},
|
||||
isInShopAppointment() {
|
||||
|
|
@ -402,7 +401,7 @@ export default {
|
|||
const processedIfStatements = processIfStatements(
|
||||
rawText,
|
||||
'custom',
|
||||
(v) => { return this.customValueMap[v] }
|
||||
(v) => this.customValueMap[v]
|
||||
);
|
||||
return getStringWithCustomValues(processedIfStatements, this.customValueMap);
|
||||
},
|
||||
|
|
@ -420,6 +419,14 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<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 {
|
||||
overflow: auto;
|
||||
|
|
|
|||
Loading…
Reference in a new issue