-
+
-
part.partType.toLowerCase()) ?? [];
- let glassList = getGlassList(glassPieces);
+ let glassList = '';
let workType = '';
if (this.isRepair) {
+ glassList = 'windshield';
workType = 'repair';
} else {
+ glassList = getGlassList(glassPieces);
workType = 'replacement';
if (this.hasRecalibrationPart) {
if (glassList === 'windshield') {
@@ -622,7 +624,7 @@ export default {
}
.cart-container {
- padding: 0 .9375rem;
+ padding: 0 .9375rem 2.1875rem;
}
.header {
diff --git a/src/layouts/payment-method/payment-method.spec.js b/src/layouts/payment-method/payment-method.spec.js
index 7773a132..edee79f9 100644
--- a/src/layouts/payment-method/payment-method.spec.js
+++ b/src/layouts/payment-method/payment-method.spec.js
@@ -45,7 +45,8 @@ function setupMocks({ customMountOptions = {}, queryString }, mainInitialState =
}
return 'false';
- })
+ }),
+ savePageDataToStore: jest.fn()
}
};
const cmsMixin = {
@@ -84,33 +85,10 @@ describe('payment-method.vue', () => {
const wrapper = setupMocks({}, store);
// Act
- const paymethod = wrapper.vm.getPaymentMethodFromStore();
+ wrapper.vm.initializeComponent();
// Assert
- expect(paymethod).toBe(payLaterMethod);
- });
- test('getting payment method when method is pay in advance', async () => {
- // Arrange
- const payInAdvanceMethod = paymentMethods.CREDIT_CARD;
- const store = {
- order: {
- payment: {
- paymentMethod: payInAdvanceMethod
- },
- insuranceCoverage: {
- coverageStatus: coverageStatuses.VERIFIED,
- coverageType: coverageType.Deductible
- },
- currentDeductible: 1000
- }
- };
- const wrapper = setupMocks({}, store);
-
- // Act
- const paymethod = wrapper.vm.getPaymentMethodFromStore();
-
- // Assert
- expect(paymethod).toBe(payInAdvanceMethod);
+ expect(wrapper.vm.paymentMethod).toBe(payLaterMethod);
});
test('getting PAY_AT_TIME_OF_SERVICE when deductible is 0', async () => {
// Arrange
@@ -124,16 +102,18 @@ describe('payment-method.vue', () => {
coverageStatus: coverageStatuses.VERIFIED,
coverageType: coverageType.Deductible
},
- currentDeductible: 0
+ currentDeductible: {
+ replace: 0
+ }
}
};
const wrapper = setupMocks({}, store);
// Act
- const paymethod = wrapper.vm.getPaymentMethodFromStore();
+ wrapper.vm.initializeComponent();
// Assert
- expect(paymethod).toBe(payInAdvanceMethod);
+ expect(wrapper.vm.paymentMethod).toBe(payInAdvanceMethod);
});
test('getting PAY_AT_TIME_OF_SERVICE when Unverified', async () => {
// Arrange
@@ -147,16 +127,18 @@ describe('payment-method.vue', () => {
coverageStatus: coverageStatuses.PENDING,
coverageType: coverageType.Deductible
},
- currentDeductible: 1000
+ currentDeductible: {
+ replace: 1000
+ }
}
};
const wrapper = setupMocks({}, store);
// Act
- const paymethod = wrapper.vm.getPaymentMethodFromStore();
+ wrapper.vm.initializeComponent();
// Assert
- expect(paymethod).toBe(payInAdvanceMethod);
+ expect(wrapper.vm.paymentMethod).toBe(payInAdvanceMethod);
});
test('getting PAY_AT_TIME_OF_SERVICE when PIA Experiment disabled', async () => {
// Arrange
@@ -180,16 +162,18 @@ describe('payment-method.vue', () => {
coverageStatus: coverageStatuses.VERIFIED,
coverageType: coverageType.Deductible
},
- currentDeductible: 1000
+ currentDeductible: {
+ replace: 1000
+ }
}
};
const wrapper = setupMocks({}, store, mixin);
// Act
- const paymethod = wrapper.vm.getPaymentMethodFromStore();
+ wrapper.vm.initializeComponent();
// Assert
- expect(paymethod).toBe(payInAdvanceMethod);
+ expect(wrapper.vm.paymentMethod).toBe(payInAdvanceMethod);
});
});
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index fee96d3a..0c3d0c7d 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -178,6 +178,7 @@ export default {
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
+ const pageData = useMainStore().pageData(to.query.issPage);
const promiseResultMap = [
{
@@ -192,7 +193,7 @@ export default {
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
- vm.initializeComponent();
+ vm.initializeComponent(pageData);
vm.updateFooterButtonText(vm.customCallToActionButtonCopy);
});
},
@@ -238,8 +239,23 @@ export default {
return !isEnabled || useMainStore().isUnverified || (useMainStore().isDeductible && isDeductibleTotalEqualToZero);
},
+ isAdyenEnabled() {
+ const adyenEnabled = this.getSettingValue(experimentSettings.ISS_ENABLE_ADYEN_V1);
+ return adyenEnabled === 'true';
+ },
paymentMethodWidgetName() {
- return supportsApplePay() ? this.widget.paymentMethodApplePay : this.widget.paymentMethod;
+ let showApplePay = false;
+ if (this.isAdyenEnabled) {
+ // Apple Pay is Available in Adyen if the protocol is HTTPS
+ if (window.location.protocol === 'https:') {
+ showApplePay = true;
+ }
+ }
+ else {
+ showApplePay = supportsApplePay();
+ }
+
+ return showApplePay ? this.widget.paymentMethodApplePay : this.widget.paymentMethod;
},
showCartTotal() {
return this.mainStore.isVerified && (this.mainStore.isITAC || this.mainStore.isNoComp
@@ -382,26 +398,21 @@ export default {
&& customerReqs
&& contactInfoReqs);
},
- initializeComponent() {
- const paymentMethodFromStore = this.getPaymentMethodFromStore();
- // SMS Opt In defaults to 'no', but we don't actually want to use it if the user hasn't saved data form this page yet
- if (paymentMethodFromStore) {
- this.smsOptIn = this.getSMSOptInFromStore();
+ initializeComponent(pageData) {
+ if (pageData) {
+ this.smsOptIn = pageData.smsOptIn;
}
this.smsPhoneNumber = this.getSMSPhoneFromStore();
- },
- getPaymentMethodFromStore() {
if (this.isPayInAdvanceDisabled) {
- return paymentMethods.PAY_AT_TIME_OF_SERVICE;
+ this.paymentMethod = paymentMethods.PAY_AT_TIME_OF_SERVICE;
}
-
- return useMainStore().order.payment.paymentMethod;
},
updateFooterButtonText(newValue) {
this.$refs.siteFooter.updateButtonText(newValue);
},
async forwardButtonAction() {
this.mainStore.savePaymentMethodChoice(this.paymentMethod);
+ this.savePageDataToStore(issPageValues.PAYMENT_METHOD, { smsOptIn: this.smsOptIn });
if (!this.hideSMSOptIn) {
const requestTextUpdates = this.smsOptIn === 'Yes';
this.mainStore.updateContactInfo({ requestTextUpdates });
@@ -422,8 +433,12 @@ export default {
bailoutOnError: true
});
+ const scenario = this.isAdyenEnabled
+ ? this.navigationScenarios.CLICKED_PAY_NOW_ADYEN
+ : this.navigationScenarios.CLICKED_PAY_NOW;
+
this.$router.navigate(
- this.navigationScenarios.CLICKED_PAY_NOW,
+ scenario,
this.$route,
{},
{ [routerParams.SKIP_SAVE_SESSION]: true }
@@ -439,17 +454,17 @@ export default {
this.$route
);
},
- getSMSOptInFromStore() {
- return this.mainStore.contactInfo.requestTextUpdates ? 'Yes' : 'No';
- },
getSMSPhoneFromStore() {
return this.mainStore.contactInfo.alternativePhone ?? this.mainStore.contactInfo.servicePhone;
},
handleEditClicked(section) {
switch (section) {
case 'location':
+ const scenario = this.mainStore.isMobileAppointment
+ ? this.navigationScenarios.EDIT_SERVICE_LOCATION_MOBILE
+ : this.navigationScenarios.EDIT_SERVICE_LOCATION_INSHOP;
this.$router.navigateWithSpinner(
- this.navigationScenarios.EDIT_SERVICE_LOCATION,
+ scenario,
this.$route
);
break;
diff --git a/src/layouts/payment-page-adyen/payment-page-adyen.vue b/src/layouts/payment-page-adyen/payment-page-adyen.vue
new file mode 100644
index 00000000..91462f51
--- /dev/null
+++ b/src/layouts/payment-page-adyen/payment-page-adyen.vue
@@ -0,0 +1,623 @@
+
+
+
+
+
diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue
index 4b1140d5..d116b502 100644
--- a/src/layouts/payment-page/payment-page.vue
+++ b/src/layouts/payment-page/payment-page.vue
@@ -4,26 +4,29 @@
+
@@ -60,12 +65,13 @@
import ButtonMain from '@/ux-components/button-main/button-main.vue';
import { Modal } from 'bootstrap';
import { useForm } from 'vee-validate';
-import { modalPositions } from '@/constants/component-variants';
+import textLink from '@/ux-components/text-link/text-link.vue';
export default {
name: 'modal',
components: {
- ButtonMain
+ ButtonMain,
+ textLink
},
props: {
modalId: String,
@@ -82,13 +88,25 @@ export default {
type: String,
default: 'success'
},
- modalPosition: {
- type: String,
- default: modalPositions.edge
- },
allowInvalidSubmit: {
type: Boolean,
default: false
+ },
+ displayFooterButton: {
+ type: Boolean,
+ default: true
+ },
+ displayCloseButton: {
+ type: Boolean,
+ default: true
+ },
+ displayCloseLink: {
+ type: Boolean,
+ default: false
+ },
+ closeLinkText: {
+ type: String,
+ default: 'Close window'
}
},
emits: ['footer-button-event', 'isModalOpened'],
@@ -105,8 +123,7 @@ export default {
modalId,
meta,
validate,
- resetForm,
- modalPositions
+ resetForm
};
},
computed: {
@@ -159,8 +176,12 @@ export default {
@import "@/styles/ux-variables-svg-strings.scss";
.modal {
- top: auto;
+ position: fixed;
+ top: 0;
+ right: 0;
bottom: 0;
+ left: 0;
+ padding-right: 1rem;
h5,
strong,
.subheader-text {
@@ -178,10 +199,11 @@ export default {
}
.modal-title {
- font-weight: 500;
+ font-weight: 400;
font-size: 1.25rem;
line-height: 2rem;
color: $black;
+ padding-left: 1.5rem;
}
}
.modal-footer {
@@ -190,7 +212,7 @@ export default {
bottom: 0;
z-index: 5;
border-radius: 0;
- background-color: $gray-100;
+ justify-content: center;
> .navigation-link {
color: $black;
@@ -205,10 +227,19 @@ export default {
&.modal-component {
.modal-dialog {
display: flex;
- max-width: 47.9375rem;
+ width: 37.5rem;
+ max-width: unset;
+ min-height: auto;
+ .modal-content {
+ box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
+ border: 1px solid;
+ border-radius: 5px;
+ overflow: auto;
+ }
.modal-content {
- margin: 1.5rem auto 0 auto;
+ margin: 0 auto;
.modal-body {
+ padding: 0 1.5rem 0 1.5rem;
.col {
max-width: 100%;
}
@@ -217,6 +248,11 @@ export default {
}
ul {
margin-bottom: 0;
+ padding-left: 20px;
+ }
+ li {
+ margin-bottom: 0.5rem;
+ line-height: 22px;
}
p {
&:last-child {
@@ -233,51 +269,26 @@ export default {
}
}
}
- &.modal-dialog-edge {
- min-height: 100%;
- margin: 0 auto;
- align-items: flex-end;
- @include media-breakpoint-up(md) {
- align-items: inherit;
- width: 23.5rem;
- position: absolute;
- top: 0;
- right: 0;
- transform: translate(100%);
- }
- .modal-content {
- box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
- border-radius: 1.5rem 1.5rem 0 0;
- @include media-breakpoint-up(md) {
- box-shadow: none;
- border-radius: 0;
- margin: 0 auto;
- }
- }
- }
- &.modal-dialog-centered {
- .modal-content {
- box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
- border-radius: 1.5rem;
- overflow: auto;
- }
- .modal-header {
- justify-content: center;
- }
- }
- }
- &.show .modal-dialog {
- &.modal-dialog-edge {
- @include media-breakpoint-up(md) {
- transform: translateY(0);
- }
- }
}
.modal-footer {
border-top: none;
+ padding: .625rem 1.5rem 1.5rem 1.5rem;
button {
margin: 0;
+ background-color: $white;
+ color: $blue;
+ border-color: $blue;
+ font-weight: 400;
+ &:hover {
+ background-color: $heritage-blue-secondary;
+ color: $white;
+ border-color: $heritage-blue-secondary;
+ }
+ &:active,
+ &:focus {
+ box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $heritage-blue-secondary;
+ }
}
}
}
@@ -286,6 +297,15 @@ export default {
transition: opacity 0.25s linear;
}
}
+ @include media-breakpoint-down(md) {
+ &.modal-component {
+ .modal-dialog {
+ width: auto;
+ max-width: unset;
+ margin: .625rem;
+ }
+ }
+ }
}
body {
.modal-backdrop {
diff --git a/src/helpers/adyen-helper.js b/src/helpers/adyen-helper.js
new file mode 100644
index 00000000..d1b5b571
--- /dev/null
+++ b/src/helpers/adyen-helper.js
@@ -0,0 +1,164 @@
+import { AdyenCheckout } from "@adyen/adyen-web/auto";
+import { useMainStore } from "@/store";
+import globalMethods from "@/global-methods";
+import endpoints from "@/constants/endpoints";
+import { AppointmentTypeStrings } from "@/constants/schedule-constants";
+import { paymentMethods } from "@/constants/payment-method-constants";
+import applicationConfig from "@/constants/application-config";
+
+export async function getSessionInfo(sessionId, encryptedSessionResult) {
+ const order = useMainStore().order;
+ const location = getLocationInfo(order);
+ const workOrder = getWorkOrderLastSixDigits(order);
+ const system = getSourceSystem();
+
+ const request = {
+ sessionId: sessionId,
+ sessionResult: encryptedSessionResult,
+ zipCodeCtu: location.zipCodeCtu,
+ workOrderNumber: workOrder,
+ sourceSystem: system,
+ };
+
+ const response = await globalMethods.callHttpClient({
+ method: endpoints.GetAdyenSessionResult.method,
+ endpoint: endpoints.GetAdyenSessionResult.url,
+ payload: request,
+ logApiCall: true
+ });
+
+ return response?.data;
+}
+
+export async function createAdyenCheckout({
+ session: { id, sessionData },
+ handlers: { onPaymentCompleted, onPaymentFailed, onError },
+ options: { showPayButton = true, amount },
+}) {
+ const config = {
+ session: {
+ id: id,
+ sessionData: sessionData,
+ },
+ clientKey: applicationConfig.ADYEN_CLIENT_KEY,
+ environment: applicationConfig.ADYEN_ENVIRONMENT,
+ locale: "en_US",
+ countryCode: "US",
+ showPayButton: showPayButton,
+ translations: {
+ en_US: {
+ "creditCard.securityCode.label": "CVV/CVC",
+ },
+ },
+ onPaymentCompleted: onPaymentCompleted,
+ onPaymentFailed: onPaymentFailed,
+ onError: onError,
+ };
+
+ if (amount !== undefined && amount !== null) {
+ config.amount = {
+ value: amount,
+ currency: "USD",
+ };
+ }
+
+ return await AdyenCheckout(config);
+}
+
+export function mapAdyenToIssPaymentMethod(adyenMethod) {
+ const paymentMethodMap = {
+ ["scheme"]: paymentMethods.CREDIT_CARD,
+ ["afterpaytouch_US"]: paymentMethods.AFTERPAY,
+ ["paypal"]: paymentMethods.PAYPAL,
+ ["applepay"]: paymentMethods.APPLEPAY,
+ };
+
+ const match = paymentMethodMap[adyenMethod];
+
+ return match ?? paymentMethods.CREDIT_CARD;
+}
+
+export function mapIssToAdyenPaymentMethod(issMethod) {
+ const paymentMethodMap = {
+ [paymentMethods.CREDIT_CARD]: "scheme",
+ [paymentMethods.AFTERPAY]: "afterpaytouch_US",
+ [paymentMethods.PAYPAL]: "paypal",
+ [paymentMethods.APPLEPAY]: "applepay",
+ [paymentMethods.PayNow]: null,
+ [paymentMethods.PAY_AT_TIME_OF_SERVICE]: null,
+ };
+
+ const match = paymentMethodMap[issMethod];
+
+ return match;
+}
+
+export function generateCcToken(adyenSessionInfo) {
+ const zipCode = useMainStore().order.customer.address.zipCode
+ ?? useMainStore().order.serviceLocation.zipCode
+ ?? useMainStore().order.serviceLocation.provider.address.zipCode
+
+ const ccToken = {
+ subscriptionId: adyenSessionInfo?.storedToken,
+ expMonth: adyenSessionInfo?.cardExpiryMonth,
+ expYear: adyenSessionInfo?.cardExpiryYear,
+ cardType: adyenSessionInfo?.cardType,
+ billToPostalCode: zipCode,
+ billToFirstName: useMainStore().contactInfo.firstName,
+ billToLastName: useMainStore().contactInfo.lastName,
+ referenceNumber: adyenSessionInfo?.workOrderNumber,
+ authCode: adyenSessionInfo?.authCode,
+ transactionId: adyenSessionInfo?.transactionReference,
+ transReferenceNumber: adyenSessionInfo?.transactionReference,
+ lastFour: adyenSessionInfo?.last4DigitsOfCard,
+ };
+
+ return ccToken;
+}
+
+function getLocationInfo(order) {
+ const serviceLocation = order.serviceLocation;
+ const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE ||
+ serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
+ if (isMobile) {
+ return {
+ address: serviceLocation.address,
+ address2: serviceLocation.address2,
+ city: serviceLocation.city,
+ state: serviceLocation.state,
+ zipCode: serviceLocation.zipCode,
+ zipCodeCtu: serviceLocation.zipCodeCtu,
+ };
+ } else {
+ const providerInfo = serviceLocation.provider.address;
+ return {
+ address: providerInfo.streetAddress,
+ address2: "",
+ city: providerInfo.city,
+ state: providerInfo.state,
+ zipCode: providerInfo.zipCode,
+ zipCodeCtu: providerInfo.zipCodeCtu,
+ };
+ }
+}
+
+function getWorkOrderLastSixDigits(order) {
+ const workOrderNumber = order.workOrderNumber ?? "";
+ const tokens = workOrderNumber.split("-");
+ const lastSegment = tokens[tokens.length - 1] ?? "";
+ const numDigits = lastSegment.length;
+ const numZeroes = 6 - numDigits;
+
+ let result = "";
+ for (let i = 0; i < numZeroes; i++) {
+ result += "0";
+ }
+
+ result += lastSegment;
+
+ return result;
+}
+
+function getSourceSystem() {
+ return "ISS-NextGen";
+}
diff --git a/src/helpers/bailout-helper.js b/src/helpers/bailout-helper.js
index b0d364c5..2ae8440f 100644
--- a/src/helpers/bailout-helper.js
+++ b/src/helpers/bailout-helper.js
@@ -12,6 +12,8 @@ function canBailoutNavigateBack() {
case BailoutCode.VehicleNotFound:
case BailoutCode.RequestCallback:
case BailoutCode.TPANotEnabled:
+ case BailoutCode.CoverageCancelledByUser:
+ case BailoutCode.HeavyTruckVehicle:
return true;
default:
diff --git a/src/helpers/browser-helper.js b/src/helpers/browser-helper.js
index 64c3a390..5ce440e6 100644
--- a/src/helpers/browser-helper.js
+++ b/src/helpers/browser-helper.js
@@ -1,3 +1,21 @@
export function supportsApplePay() {
- return !!(window.ApplePaySession && window.ApplePaySession.canMakePayments());
+ var iOSversion = getiOSversion();
+ var isMacOS = navigator.platform.indexOf("Mac") !== -1;
+ if (isMacOS || (iOSversion && iOSversion[0] >= 17)) {
+ if (window.ApplePaySession && window.ApplePaySession.canMakePayments()) {
+ return true;
+ }
+ }
+ return false;
+}
+function getiOSversion() {
+ if (/iP(hone|od|ad)/.test(navigator.platform)) {
+ // supports iOS 2.0 and later:
+ var v = navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/);
+ if (!v) {
+ return null;
+ }
+ return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
+ }
+ return null;
}
\ No newline at end of file
diff --git a/src/helpers/cookie-helper.js b/src/helpers/cookie-helper.js
index 9f199611..d2143424 100644
--- a/src/helpers/cookie-helper.js
+++ b/src/helpers/cookie-helper.js
@@ -165,7 +165,7 @@ export function getDeviceIdValue() {
Gets value of skey cookie, returns 0 if not found.
*/
export function getSessionKeyValue() {
- const cookieValue = getCookieValueByName(cookieNames.SESSION_KEY);
+ const cookieValue = getCookieValueByName(cookieNames.ISS_SESSION_KEY);
if (cookieValue) {
return cookieValue;
@@ -281,7 +281,7 @@ export function setSessionIdIfUnset(value) {
}
export function setSessionKeyIfUnset(value) {
- if (!isCookieSet(cookieNames.ISS_SESSION_KEY)) {
+ if (getSessionKeyValue() === 0) {
setCookieProperties(
{
[cookieNames.ISS_SESSION_KEY]: value
diff --git a/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap b/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap
index 8aa5504e..265928bc 100644
--- a/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap
+++ b/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap
@@ -20,6 +20,7 @@ Object {
"salesTax": "SalesTaxWidget",
"servicePackage": "ServicePackageTitle",
"subtotal": "SubtotalWidget",
+ "total": "TotalWidget",
"vapsItemDescriptions": "VapsItemDescriptions",
"warrantyText": "WarrantyCartItemTextWidget",
},
diff --git a/src/iss-components/cart-dropdown/cart-dropdown.spec.js b/src/iss-components/cart-dropdown/cart-dropdown.spec.js
index b1ca9cdd..16692604 100644
--- a/src/iss-components/cart-dropdown/cart-dropdown.spec.js
+++ b/src/iss-components/cart-dropdown/cart-dropdown.spec.js
@@ -12,6 +12,7 @@ import { getHighestFullySatisfiedTier, getPackageContents } from '@/helpers/serv
import { getPriceOfLineItems } from '@/helpers/price-calculator.js';
import coverageStatuses from '@/constants/coverage-statuses';
import coverageType from '@/constants/coverage-type';
+import * as cartHelper from '@/helpers/cart-helper';
const VERIFYING_COVERAGE = 'Verifying coverage';
@@ -341,21 +342,76 @@ describe('cart-dropdown component', () => {
});
describe('computed', () => {
describe('amountDue', () => {
- test('returns 0 when showAsPaid is true', () => {
+ test('returns total when showAsPaid is false', () => {
// Arrange
+ const expectedAmount = 123.45;
const propsData = {
- showAsPaid: true
+ showAsPaid: false
};
const { wrapper } = getMountedComponent({}, {}, propsData);
+ const totalSpy = jest.spyOn(cartHelper, 'getCartTotal').mockReturnValue(expectedAmount);
// Act
const result = wrapper.vm.amountDue;
+ // Assert
+ expect(result).toBe(expectedAmount);
+ });
+ test('returns total minus amount paid when showAsPaid is true', () => {
+ // Arrange
+ const total = 123.45;
+ const amountPaid = 23.45;
+ const expectedAmount = total - amountPaid;
+ const propsData = {
+ showAsPaid: true
+ };
+ const storeData = {
+ order: {
+ settledTenderAmount: amountPaid
+ }
+ };
+ const { wrapper } = getMountedComponent(storeData, {}, propsData);
+ const totalSpy = jest.spyOn(cartHelper, 'getCartTotal').mockReturnValue(total);
+
+ // Act
+ const result = wrapper.vm.amountDue;
+
+ // Assert
+ expect(result).toBe(expectedAmount);
+ });
+ });
+ describe('amountPaid', () => {
+ test('returns 0 when showAsPaid is false', () => {
+ // Arrange
+ const propsData = {
+ showAsPaid: false
+ };
+ const { wrapper } = getMountedComponent({}, {}, propsData);
+
+ // Act
+ const result = wrapper.vm.amountPaid;
+
// Assert
expect(result).toBe(0);
});
- test('returns sum of subTotal and salesTax when showAsPaid is false', () => {
- // TODO when subTotal and salesTax are finished
+ test('returns settled tender amount when showAsPaid is true', () => {
+ // Arrange
+ const expectedAmount = 123.45;
+ const propsData = {
+ showAsPaid: true
+ };
+ const storeData = {
+ order: {
+ settledTenderAmount: expectedAmount
+ }
+ };
+ const { wrapper } = getMountedComponent(storeData, {}, propsData);
+
+ // Act
+ const result = wrapper.vm.amountPaid;
+
+ // Assert
+ expect(result).toBe(expectedAmount);
});
});
describe('availableLineItems', () => {
diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue
index 6d48a69a..0d661c09 100644
--- a/src/iss-components/cart-dropdown/cart-dropdown.vue
+++ b/src/iss-components/cart-dropdown/cart-dropdown.vue
@@ -1,6 +1,6 @@
{{ salesTaxLabel }}
{{ formatAmountInDollars(salesTax) }}
-
+
+
+
+
+ {{ totalLabel }}
+ {{ getDisplayed(total) }}
+
+
+
{{ amountPaidLabel }}
- {{ getDisplayed(amountPaid) }}
+ {{ getDisplayed(amountPaid) }}
vap?.partType !== partType) ?? [];
useMainStore().updateVaps(newVaps);
+ useMainStore().updateServicePackage(null);
},
getCmsContentForVapsType(vapsPartType) {
const vapsItemDescriptions = this.getCmsContent(
@@ -414,6 +431,10 @@ export default {
a:hover {
color: $heritage-blue-secondary;
}
+
+ #amount-paid-label {
+ font-weight: 600;
+ }
}
.cart-footer {
diff --git a/src/iss-components/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap b/src/iss-components/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap
index effbe1a8..c73e8e9e 100644
--- a/src/iss-components/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap
+++ b/src/iss-components/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap
@@ -8,10 +8,6 @@ Object {
"firstName": "Frederick",
"isModalOpened": false,
"lastName": "Taylor",
- "modalPositions": Object {
- "center": "center",
- "edge": "edge",
- },
"phoneNumber": "606-009-2943",
"rules": Object {
"emailAddress": "email-required|email-address-format",
diff --git a/src/iss-components/contact-details-drawer/contact-details-drawer.vue b/src/iss-components/contact-details-drawer/contact-details-drawer.vue
index 660ae1c3..0c977bf9 100644
--- a/src/iss-components/contact-details-drawer/contact-details-drawer.vue
+++ b/src/iss-components/contact-details-drawer/contact-details-drawer.vue
@@ -1,15 +1,16 @@
- {{ nameSectionLabel }}
+
diff --git a/src/iss-components/content-group-modal/content-group-modal.vue b/src/iss-components/content-group-modal/content-group-modal.vue
index df4e8f45..5a95478e 100644
--- a/src/iss-components/content-group-modal/content-group-modal.vue
+++ b/src/iss-components/content-group-modal/content-group-modal.vue
@@ -6,14 +6,15 @@
@footerButtonEvent="footerButtonClick">
![]()
+
@@ -58,7 +63,7 @@ export default {
},
modalSubHeaderText() {
return this.getCmsContent('ContinueReferralModalWidget', 'SubheaderText')
- .replaceAll('{custom:mmFound}', this.getMakeModelString);
+ .replaceAll('{custom:mmFound}', this.getMakeModelString.toUpperCase());
}
},
methods: {
@@ -82,5 +87,64 @@ export default {
diff --git a/src/iss-components/google-map/google-map.vue b/src/iss-components/google-map/google-map.vue
index cf07efe7..273c382c 100644
--- a/src/iss-components/google-map/google-map.vue
+++ b/src/iss-components/google-map/google-map.vue
@@ -29,7 +29,10 @@ export default {
}
},
async beforeMount() {
- await this.createMapWithMarkersForAddresses(this.markers);
+ await this.createMapWithMarkersForAddresses(this.markers)
+ .catch(() => {
+ console.error('Error creating map with markers: if handled jest fails to run tests');
+ });
},
methods: {
async getMap(center) {
diff --git a/src/iss-components/loading-modal/loading-modal.vue b/src/iss-components/loading-modal/loading-modal.vue
index e8303824..602ea77b 100644
--- a/src/iss-components/loading-modal/loading-modal.vue
+++ b/src/iss-components/loading-modal/loading-modal.vue
@@ -124,13 +124,7 @@ export default {
justify-content: flex-start;
align-items: center;
flex-direction: column;
- @include media-breakpoint-up(xs) {
- padding-top: 5rem;
- }
-
- @include media-breakpoint-up(md) {
- padding-top: 7rem;
- }
+ padding: 2rem;
.modal-loader-content-container {
min-width: 15rem; // 240px
diff --git a/src/iss-components/recal-modal/recal-modal.vue b/src/iss-components/recal-modal/recal-modal.vue
new file mode 100644
index 00000000..2564c9cf
--- /dev/null
+++ b/src/iss-components/recal-modal/recal-modal.vue
@@ -0,0 +1,101 @@
+
+
{{ nameSectionLabel }}
diff --git a/src/iss-components/continue-modal/continue-modal.vue b/src/iss-components/continue-modal/continue-modal.vue index 1627e509..def01d34 100644 --- a/src/iss-components/continue-modal/continue-modal.vue +++ b/src/iss-components/continue-modal/continue-modal.vue @@ -8,18 +8,23 @@ :headerText="modalHeaderText" :footerButtonText="modalFooterText" buttonVariant="primary" + :displayCloseButton="false" @isModalOpened="setModalStatus" @footerButtonEvent="startNewReferral"> -
+
{{ modalSubHeaderText }}
+
+ or +
+ or +
+
+
+ ![]()
+
+
+
+
+
+
+
+
diff --git a/src/iss-components/site-footer/site-footer.vue b/src/iss-components/site-footer/site-footer.vue
index a694015e..cd2fc531 100644
--- a/src/iss-components/site-footer/site-footer.vue
+++ b/src/iss-components/site-footer/site-footer.vue
@@ -21,9 +21,9 @@
'form-test-invalid': (disableForwardAction || isForwardActionDisabled),
'hide-button': isForwardButtonHidden
}"
- :aria-disabled="disableForwardAction || isForwardActionDisabled"
- :isDisabled="disableForwardAction || isForwardActionDisabled"
+ :isDisabled="disableForwardAction || isForwardActionDisabled || isForwardButtonHidden"
data-test-id="site-footer-main-button"
+ buttonType="submit"
@clickEvent="buttonClick" />
{
// Assert
expect(wrapper.vm.navigateForwardWithSingleCarMatch).toHaveBeenCalledTimes(1);
});
-
- test('selected vehicle is a non-serviceable big truck, display no service alert', async () => {
- // Arrange
- const mockRegistrationAddress = {
- streetAddress: '1234 Main St',
- city: 'Columbus',
- state: 'OH',
- zipCode: '43215'
- };
-
- const { wrapper } = setupMocks({
- vinVehicles: [
- {
- vehicle: {
- carId: 'BIGTRUCKCARID',
- isBigTruck: true,
- canSafeliteService: false
- }
- }
- ]
- });
-
- useMainStore().order.vehicle.carId = 'BIGTRUCKCARID';
-
- await wrapper.setData({
- customerQuestions: {
- addressQuestions: mockRegistrationAddress
- }
- });
-
- // Act
- await wrapper.vm.forwardButtonAction();
-
- // Assert
- expect(wrapper.findComponent({ ref: 'alertNoService' }).isVisible()).toBe(true);
- });
- test('selected vehicle is a serviceable big truck, do not display no service alert', async () => {
- // Arrange
- const mockRegistrationAddress = {
- streetAddress: '1234 Main St',
- city: 'Columbus',
- state: 'OH',
- zipCode: '43215'
- };
-
- const { wrapper } = setupMocks({
- vinVehicles: [
- {
- vehicle: {
- carId: 'BIGTRUCKCARID2',
- isBigTruck: true,
- canSafeliteService: true
- }
- }
- ]
- });
-
- useMainStore().order.vehicle.carId = 'BIGTRUCKCARID2';
-
- await wrapper.setData({
- customerQuestions: {
- addressQuestions: mockRegistrationAddress
- }
- });
-
- // Act
- await wrapper.vm.$nextTick();
-
- // Assert
- expect(wrapper.findComponent({ ref: 'alertNoService' }).exists()).toBe(false);
- });
});
});
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index cf6e6e4c..92569c91 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -55,14 +55,6 @@
alertClass="alert-danger"
:isCollapsible="true"
:isDismissible="false" />
- {
const { wrapper } = setupMocks({});
const lookupVinResponse = {
data: {
- carId: '456'
+ carId: '456',
+ canSafeliteService: true
}
};
@@ -247,94 +248,4 @@ describe('address-vehicles.vue', () => {
// Assert
expect(arePagePrerequisitesValid).toBe(true);
});
-
- test('selected vehicle is a non-serviceable big truck, display no service alert', async () => {
- // Arrange
- const { wrapper } = setupMocks({});
- useMainStore().order.vehicle.carId = 'BIGTRUCKCARID';
- useMainStore().applicationUser = {
- pageData: {
- 'address-vehicles':
- [
- {
- vehicle: {
- carId: 'BIGTRUCKCARID',
- make: 'Isuzu',
- model: 'Reach',
- style: 'Step Van',
- year: 2016,
- isBigTruck: true,
- canSafeliteService: false
- },
- vin: 'BIGTRUCKVIN'
- }
- ]
- }
- };
-
- await wrapper.setData({
- selectedVehicleVin: 'BIGTRUCKVIN',
- previouslyEnteredCarId: 'BIGTRUCKCARID'
- });
-
- wrapper.vm.selectedVehicle = {
- vin: 'BIGTRUCKVIN',
- vehicle: {
- carId: 'BIGTRUCKCARID',
- isBigTruck: true,
- canSafeliteService: false
- }
- };
-
- // Act
- await wrapper.vm.$nextTick();
-
- // Assert
- expect(wrapper.findComponent({ ref: 'AlertNoService' }).isVisible()).toBe(true);
- });
-
- test('selected vehicle is a serviceable big truck, do not display no service alert', async () => {
- // Arrange
- const { wrapper } = setupMocks({});
- useMainStore().order.vehicle.carId = 'BIGTRUCKCARID2';
- useMainStore().applicationUser = {
- pageData: {
- 'address-vehicles':
- [
- {
- vehicle: {
- carId: 'BIGTRUCKCARID2',
- make: 'Mack',
- model: 'Terrapro',
- style: 'Cabover',
- year: 2024,
- isBigTruck: true,
- canSafeliteService: true
- },
- vin: 'BIGTRUCKVIN2'
- }
- ]
- }
- };
-
- await wrapper.setData({
- selectedVehicleVin: 'BIGTRUCKVIN2',
- previouslyEnteredCarId: 'BIGTRUCKCARID2'
- });
-
- wrapper.vm.selectedVehicle = {
- vin: 'BIGTRUCKVIN2',
- vehicle: {
- carId: 'BIGTRUCKCARID2',
- isBigTruck: true,
- canSafeliteService: true
- }
- };
-
- // Act
- await wrapper.vm.$nextTick();
-
- // Assert
- expect(wrapper.findComponent({ ref: 'AlertNoService' }).exists()).toBe(false);
- });
});
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 412072cc..a04d1216 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -13,13 +13,6 @@
{
+ /** @ignore */
+ function interceptedCallbackFunction(e) {
+ callbackFunction(e.detail);
+ }
+ // selectedPlace = "Woogly";
+ element.addEventListener(eventName, interceptedCallbackFunction);
+ }),
+ removeListener: jest.fn(),
+ clearInstanceListeners: jest.fn()
+ },
+ places: {
+ Autocomplete: jest.fn().mockImplementation((el) => el),
+ AutocompleteService: jest.fn().mockImplementation(() => {
+ return {
+ getPlacePredictions: (request, callback) => {
+ // Throwing an error here guarantees that the function that calls it finishes
+ throw new Error();
+ }
+ };
+ }),
+ PlacesService: jest.fn().mockImplementation(() => {}),
+ AutocompleteSessionToken: jest.fn().mockImplementation(() => {})
+ }
+ }
+ };
+
+ if (props) mountOptions.propsData = props;
+
+ const wrapper = shallowMount(contactDetails, mountOptions);
+
+ return { wrapper };
+}
+
describe('contactDetails.vue', () => {
describe('Rendering', () => {
test('Should render site header', () => {
// Arrange
- const wrapper = shallowMount(contactDetails, getMountOptions());
+ const { wrapper } = setupMocks({});
// Act
const siteHeader = wrapper.findComponent({ ref: 'siteHeader' });
@@ -24,7 +82,7 @@ describe('contactDetails.vue', () => {
});
test('Should render sub title', () => {
// Arrange
- const wrapper = shallowMount(contactDetails, getMountOptions());
+ const { wrapper } = setupMocks({});
// Act
const siteSubHeader = wrapper.findComponent({ ref: 'siteSubHeader' });
@@ -34,7 +92,7 @@ describe('contactDetails.vue', () => {
});
test('Should render appointment information alert', () => {
// Arrange
- const wrapper = shallowMount(contactDetails, getMountOptions());
+ const { wrapper } = setupMocks({});
// Act
const appointmentInformationAlert = wrapper.findComponent({ ref: 'appointmentInformationAlert' });
@@ -44,8 +102,6 @@ describe('contactDetails.vue', () => {
});
test('Should render same as policy address question subcomponent if service zip is same as customer zip', async () => {
// Arrange
- const mountOptions = getMountOptions();
-
const customerStreetAddress = getRandomString(10, 50);
const customerStreetAddress2 = getRandomString(0, 50);
const customerCity = getRandomString(4, 20);
@@ -55,7 +111,7 @@ describe('contactDetails.vue', () => {
const serviceCity = getRandomString(4, 20);
const serviceState = getRandomString(2, 2);
const zipCode = getRandomInt(10000, 99999).toString();
- const mainInitialState = {
+ const storeData = {
order: {
customer: {
address: {
@@ -75,12 +131,7 @@ describe('contactDetails.vue', () => {
}
}
};
- mountOptions.global.plugins = [createTestingPinia({
- initialState: {
- main: mainInitialState
- }
- })];
- const wrapper = shallowMount(contactDetails, mountOptions);
+ const { wrapper } = setupMocks({ storeData });
await wrapper.vm.$nextTick();
@@ -92,8 +143,6 @@ describe('contactDetails.vue', () => {
});
test('Should not render same as policy address question subcomponent if service zip is different from customer zip', () => {
// Arrange
- const mountOptions = getMountOptions();
-
const firstName = getRandomString(4, 15);
const lastName = getRandomString(4, 15);
const emailAddress = getRandomString(10, 20);
@@ -101,7 +150,7 @@ describe('contactDetails.vue', () => {
const testZipCode = getRandomInt(10000, 99999);
const customerZipCode = testZipCode.toString();
const serviceZipCode = (testZipCode + 1).toString();
- const mainInitialState = {
+ const storeData = {
order: {
customer: {
firstName,
@@ -119,12 +168,7 @@ describe('contactDetails.vue', () => {
}
}
};
- mountOptions.global.plugins = [createTestingPinia({
- initialState: {
- main: mainInitialState
- }
- })];
- const wrapper = shallowMount(contactDetails, mountOptions);
+ const { wrapper } = setupMocks({ storeData });
// Act
const sameAsPolicyAddressQuestion = wrapper.findComponent({ ref: 'sameAsPolicyAddressQuestion' });
@@ -134,7 +178,7 @@ describe('contactDetails.vue', () => {
});
test('Should render address question subcomponent', () => {
// Arrange
- const wrapper = shallowMount(contactDetails, getMountOptions());
+ const { wrapper } = setupMocks({});
// Act
const addressQuestion = wrapper.findComponent({ ref: 'addressQuestion' });
@@ -144,7 +188,7 @@ describe('contactDetails.vue', () => {
});
test('Should render apartment question subcomponent', () => {
// Arrange
- const wrapper = shallowMount(contactDetails, getMountOptions());
+ const { wrapper } = setupMocks({});
// Act
const address2Question = wrapper.findComponent({ ref: 'address2Question' });
@@ -154,7 +198,7 @@ describe('contactDetails.vue', () => {
});
test('Should render city question subcomponent', () => {
// Arrange
- const wrapper = shallowMount(contactDetails, getMountOptions());
+ const { wrapper } = setupMocks({});
// Act
const cityQuestion = wrapper.findComponent({ ref: 'cityQuestion' });
@@ -164,7 +208,7 @@ describe('contactDetails.vue', () => {
});
test('Should render state question subcomponent', () => {
// Arrange
- const wrapper = shallowMount(contactDetails, getMountOptions());
+ const { wrapper } = setupMocks({});
// Act
const stateQuestion = wrapper.findComponent({ ref: 'stateQuestion' });
@@ -174,7 +218,7 @@ describe('contactDetails.vue', () => {
});
test('Should render zip code question subcomponent', () => {
// Arrange
- const wrapper = shallowMount(contactDetails, getMountOptions());
+ const { wrapper } = setupMocks({});
// Act
const zipCodeQuestion = wrapper.findComponent({ ref: 'zipCodeQuestion' });
@@ -184,7 +228,7 @@ describe('contactDetails.vue', () => {
});
test('Should render change zip code alert', () => {
// Arrange
- const wrapper = shallowMount(contactDetails, getMountOptions());
+ const { wrapper } = setupMocks({});
// Act
const changeZipCodeAlert = wrapper.findComponent({ ref: 'changeZipCodeAlert' });
@@ -194,7 +238,7 @@ describe('contactDetails.vue', () => {
});
test('Should render vehicle protected question subcomponent', () => {
// Arrange
- const wrapper = shallowMount(contactDetails, getMountOptions());
+ const { wrapper } = setupMocks({});
// Act
const vehicleProtectedQuestion = wrapper.findComponent({ ref: 'vehicleProtectedQuestion' });
@@ -204,7 +248,7 @@ describe('contactDetails.vue', () => {
});
test('Should render technician notes textarea question subcomponent', () => {
// Arrange
- const wrapper = shallowMount(contactDetails, getMountOptions());
+ const { wrapper } = setupMocks({});
// Act
const notesQuestion = wrapper.findComponent({ ref: 'notesQuestion' });
@@ -214,7 +258,7 @@ describe('contactDetails.vue', () => {
});
test('Should render clearance text subcomponent', () => {
// Arrange
- const wrapper = shallowMount(contactDetails, getMountOptions());
+ const { wrapper } = setupMocks({});
// Act
const clearanceText = wrapper.findComponent({ ref: 'clearanceText' });
@@ -224,7 +268,7 @@ describe('contactDetails.vue', () => {
});
test('Should render site footer', () => {
// Arrange
- const wrapper = shallowMount(contactDetails, getMountOptions());
+ const { wrapper } = setupMocks({});
// Act
const footer = wrapper.findComponent({ ref: 'siteFooter' });
@@ -234,8 +278,6 @@ describe('contactDetails.vue', () => {
});
test('Mocked store yields expected data', () => {
// Arrange
- const mountOptions = getMountOptions();
-
const address = getRandomString(10, 50);
const address2 = getRandomString(0, 50);
const city = getRandomString(4, 20);
@@ -243,7 +285,7 @@ describe('contactDetails.vue', () => {
const zipCode = getRandomInt(10000, 99999).toString();
const notesForTechnician = getRandomString(1, 100);
const isVehicleProtected = getRandomBoolean();
- const mainInitialState = {
+ const storeData = {
order: {
serviceLocation: {
address,
@@ -258,13 +300,8 @@ describe('contactDetails.vue', () => {
}
}
};
- mountOptions.global.plugins = [createTestingPinia({
- initialState: {
- main: mainInitialState
- }
- })];
- const wrapper = shallowMount(contactDetails, mountOptions);
+ const { wrapper } = setupMocks({ storeData });
// Assert
expect(wrapper.vm.address).toBe(address);
@@ -280,11 +317,7 @@ describe('contactDetails.vue', () => {
describe('Navigation', () => {
test('Back button clicked triggers navigation', () => {
// Arrange
- const wrapper = shallowMount(contactDetails, getMountOptions({
- router: {
- navigateWithSpinner: jest.fn()
- }
- }));
+ const { wrapper } = setupMocks({});
wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
// Act
@@ -295,42 +328,45 @@ describe('contactDetails.vue', () => {
expect(wrapper.vm.$router.navigateWithSpinner)
.toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined);
});
- test('Forward button clicked triggers appropriate navigation', () => {
+ test('Forward button clicked triggers appropriate navigation', async () => {
// Arrange
- const mountOptions = getMountOptions({
- router: {
- navigate: jest.fn()
- },
- navigationScenarios
- });
- const mainInitialState = {
+ const storeData = {
order: {
serviceLocation: { IsSafeliteProvider: true }
}
};
- mountOptions.global.plugins = [createTestingPinia({
- initialState: {
- main: mainInitialState
- }
- })];
- const wrapper = shallowMount(contactDetails, mountOptions);
+ const { wrapper } = setupMocks({ storeData });
// Act
- wrapper.vm.forwardButtonAction();
+ await wrapper.vm.forwardButtonAction();
// Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
expect(wrapper.vm.$router.navigate)
.toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD, undefined);
});
- test('Forward button click updates service location info', () => {
+ test('Forward button click updates service location info', async () => {
// Arrange
- const mountOptions = getMountOptions({
- router: {
- navigate: jest.fn()
+ const provider = {
+ address: {
+ city: getRandomString(4, 20),
+ state: getRandomString(2, 2),
+ streetAddress: getRandomString(10, 50),
+ zipCode: getRandomInt(10000, 99999).toString(),
+ zipCodeCtu: getRandomInt(10000, 99999).toString()
+ },
+ companyName: getRandomString(5, 15),
+ phoneNumber: getRandomInt(1000000000, 9999999999).toString(),
+ providerNumber: getRandomInt(100000, 999999).toString()
+ }
+ const storeData = {
+ order: {
+ serviceLocation: {
+ provider
+ }
}
- });
- const wrapper = shallowMount(contactDetails, mountOptions);
+ };
+ const { wrapper } = setupMocks({ storeData });
const address = getRandomString(10, 50);
const address2 = getRandomString(0, 50);
const city = getRandomString(4, 20);
@@ -347,32 +383,28 @@ describe('contactDetails.vue', () => {
});
// Act
- wrapper.vm.forwardButtonAction();
+ await wrapper.vm.forwardButtonAction();
// Assert
expect(useMainStore().updateServiceLocation).toHaveBeenCalledWith({
address,
address2,
city,
- isVehicleProtected
+ isVehicleProtected,
+ provider
});
});
- test('Forward button click updates notes for technician', () => {
+ test('Forward button click updates notes for technician', async () => {
// Arrange
- const mountOptions = getMountOptions({
- router: {
- navigate: jest.fn()
- }
- });
- const wrapper = shallowMount(contactDetails, mountOptions);
+ const { wrapper } = setupMocks({});
const notesForTechnician = getRandomString(1, 100);
wrapper.setData({
notesForTechnician
});
// Act
- wrapper.vm.forwardButtonAction();
+ await wrapper.vm.forwardButtonAction();
// Assert
expect(useMainStore().updateContactInfo).toHaveBeenCalledWith({
diff --git a/src/layouts/contact-details/contact-details.vue b/src/layouts/contact-details/contact-details.vue
index 5a84b8f3..b73d3fc4 100644
--- a/src/layouts/contact-details/contact-details.vue
+++ b/src/layouts/contact-details/contact-details.vue
@@ -133,6 +133,7 @@ import errorMessages from '@/constants/error-messages';
import { required } from '@/helpers/validation-rules';
import widgetFields from '@/constants/cms-widget-fields';
import states from '@/constants/states';
+import applicationConfig from '@/constants/application-config';
// DEFINE VALIDATION RULES
defineRule('street-address-required', required(errorMessages.SERVICE_ADDRESS_REQUIRED));
@@ -157,8 +158,9 @@ export default {
async beforeRouteEnter(to, from, next) {
const cmsContent = await fetchCmsContentForPage(to.query.issPage);
- next((vm) => {
+ next(async (vm) => {
vm.setCmsContent(cmsContent);
+ await vm.setupAddressLookup();
});
},
data() {
@@ -239,17 +241,22 @@ export default {
/**
* @summary Steps to perform when forward button clicked.
*/
- forwardButtonAction() {
+ async forwardButtonAction() {
const contactInfo = {
notesForTechnician: this.notesForTechnician
};
useMainStore().updateContactInfo(contactInfo);
+ const provider = useMainStore().serviceLocation.provider;
+
+ await this.geocodeAddress();
+
useMainStore().updateServiceLocation({
address: this.address,
address2: this.address2,
city: this.city,
- isVehicleProtected: this.isVehicleProtected || 'false'
+ isVehicleProtected: this.isVehicleProtected || 'false',
+ provider
});
this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
@@ -264,7 +271,100 @@ export default {
this.address = '';
this.address2 = '';
this.city = '';
- }
+ },
+ async setupAddressLookup() {
+ const apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
+
+ await this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&callback=Function.prototype`)
+ .catch(() => {
+ // Failed to fetch script
+ window.console.warn('Unable to load Google Places API script');
+ });
+ },
+ geocodeAddress() {
+ const autoCompletePromise = new Promise((resolve, reject) => {
+ try {
+ // Get Autocomplete Service
+ const acService = new window.google.maps.places.AutocompleteService();
+ // Get Places Service, needs pseudo element (or a map)
+ const placeService = new window.google.maps.places.PlacesService(document.createElement('div'));
+ // Create Autocomplete Session token, multiple requests one pricing hit
+ const acSessionToken = new window.google.maps.places.AutocompleteSessionToken();
+
+ const addressValue = `${this.address}, ${this.city}, ${this.state} ${this.zipCode}`;
+ acService.getPlacePredictions(
+ {
+ input: addressValue,
+ type: ['geocode'],
+ componentRestrictions: { country: ['us'] },
+ sessionToken: acSessionToken
+ },
+ (predictions) => {
+ if (predictions && predictions.length > 0) {
+ const firstPrediction = predictions[0];
+ if (firstPrediction.place_id) {
+ placeService.getDetails(
+ {
+ placeId: firstPrediction.place_id,
+ fields: ['address_components'],
+ sessionToken: acSessionToken
+ },
+ (details) => {
+ this.fillInAddress(details);
+ resolve();
+ }
+ );
+ } else {
+ resolve();
+ }
+ } else {
+ resolve();
+ }
+ }
+ );
+ } catch (error) {
+ window.console.warn('Error initializing Google Places API services', error);
+ resolve();
+ }
+ });
+
+ return autoCompletePromise;
+ },
+ async fillInAddress(googlePlace) {
+ let processedStreetAddress = false;
+ let processedRoute = false;
+ for (const component of googlePlace.address_components) {
+ const componentType = component.types[0];
+
+ switch (componentType) {
+ case 'street_number': {
+ if (processedRoute) {
+ this.address = `${component.long_name} ${this.address}`;
+ } else {
+ this.address = component.long_name;
+ }
+
+ processedStreetAddress = true;
+ break;
+ }
+ case 'route': {
+ if (processedStreetAddress) {
+ this.address += ` ${component.short_name}`;
+ } else {
+ this.address = component.short_name;
+ }
+
+ processedRoute = true;
+ break;
+ }
+ case 'locality': {
+ this.city = component.long_name;
+ break;
+ }
+ default:
+ }
+ }
+ },
}
};
diff --git a/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap b/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap
index 40af428e..52bab2ae 100644
--- a/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap
+++ b/src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap
@@ -3,6 +3,7 @@
exports[`coverageStatement.vue returns the initial data 1`] = `
Object {
"CANCEL_CLAIM_REF_NAME": "CancelClaimModal",
+ "OEM_ENDORSEMENT_REF_NAME": "OEMModal",
"RECAL_MODAL_REF_NAME": "RecalModal",
"baseServiceLineItems": Array [],
"isPageLoading": true,
diff --git a/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue b/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue
index fb208e76..5aa96972 100644
--- a/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue
+++ b/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue
@@ -6,18 +6,25 @@
+ :displayFooterButton="false">
+
@@ -26,12 +33,14 @@
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 832d9219..4cc38651 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -10,7 +10,7 @@
cmsWidgetName="SiteHeaderWidget" />
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
index d02a06a0..0ca7e719 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
@@ -151,68 +151,6 @@ describe('license-plate-lookup.vue', () => {
// Assert
expect(wrapper.findComponent({ ref: 'alertVinNotFound' }).isVisible()).toBe(true);
});
- test('non-serviceable big truck found, display NoServiceAlert', async () => {
- // Arrange
- const mockRegistrationLicensePlate = {
- licensePlate: 'BIGTRUCKTEST'
- };
-
- const { wrapper } = setupMocks({
- lookupVinByPlateResponse: {
- vin: 'BIGTRUCKVIN',
- vehicle: {
- carId: 'BIGTRUCKTESTCARID',
- isBigTruck: true,
- canSafeliteService: false
- }
- }
- });
-
- useMainStore().order.vehicle.carId = 'BIGTRUCKTESTCARID';
-
- await wrapper.setData({
- licensePlate: mockRegistrationLicensePlate
- });
-
- wrapper.vm.navigateForward = jest.fn();
-
- // Act
- await wrapper.vm.forwardButtonAction();
-
- // Assert
- expect(wrapper.findComponent({ ref: 'alertNoService' }).isVisible()).toBe(true);
- });
- test('serviceable big truck found, do not display NoServiceAlert', async () => {
- // Arrange
- const mockRegistrationLicensePlate = {
- licensePlate: 'BIGTRUCKTEST2'
- };
-
- const { wrapper } = setupMocks({
- lookupVinByPlateResponse: {
- vin: 'BIGTRUCKVIN2',
- vehicle: {
- carId: 'BIGTRUCKTESTCARID2',
- isBigTruck: true,
- canSafeliteService: true
- }
- }
- });
-
- useMainStore().order.vehicle.carId = 'BIGTRUCKTESTCARID2';
-
- await wrapper.setData({
- licensePlate: mockRegistrationLicensePlate
- });
-
- wrapper.vm.navigateForward = jest.fn();
-
- // Act
- await wrapper.vm.forwardButtonAction();
-
- // Assert
- expect(wrapper.findComponent({ ref: 'alertNoService' }).exists()).toBe(false);
- });
});
describe('navigation', () => {
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index ac6bb727..32203b5c 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -59,13 +59,6 @@
:manualCopy="AlertMatchedTwoIdenticalYMMVehicleBody"
alertClass="alert-warning"
:isDismissible="false" />
-
-
- ![]()
+ class="recal-modal-image"
+ :src="recalModalContent.image" />
+ class="recal-modal-body"
+ v-html="recalModalContent.bodyText">
+
+ {
const text = '12345';
const wrapper = shallowMount(serviceZipQuestion, {
props: {
- modelValue: text
+ parentZipCode: text
},
attachTo: document.body
});
@@ -32,9 +32,9 @@ describe('service-zip-question.vue', () => {
// Act
wrapper.vm.internalZipcode = '55555';
- wrapper.vm.updateModelValue();
+ wrapper.vm.emitZipCodeUpdate();
// Assert
- expect(wrapper.emitted('update:modelValue')).toEqual([['55555']]);
+ expect(wrapper.emitted('service-zip-code-updated')).toEqual([['55555']]);
});
});
diff --git a/src/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue b/src/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue
index 4f401049..5bea6fe0 100644
--- a/src/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue
+++ b/src/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue
@@ -10,7 +10,7 @@
isRequired
:hasError="hasError"
:validationRules="`zip-required|${cmsWidgetName}-zip-format`"
- @clickEvent="updateModelValue"
+ @clickEvent="emitZipCodeUpdate"
@fieldHasError="handleFieldError" />
@@ -32,7 +32,7 @@ export default {
},
// TODO: Correct prop def.
props: {
- modelValue: String,
+ parentZipCode: String,
cmsWidgetName: String,
serviceZipFormatErrorMessage: {
type: String,
@@ -43,14 +43,14 @@ export default {
default: false
}
},
- emits: ['update:modelValue', 'field-has-error'],
+ emits: ['service-zip-code-updated', 'field-has-error'],
data() {
return {
- internalZipcode: this.modelValue
+ internalZipcode: this.parentZipCode
};
},
watch: {
- modelValue(newValue) {
+ parentZipCode(newValue) {
if (newValue !== this.internalZipcode) {
this.internalZipcode = newValue;
}
@@ -63,8 +63,8 @@ export default {
handleFieldError(hasError) {
this.$emit('field-has-error', hasError);
},
- updateModelValue() {
- this.$emit('update:modelValue', this.internalZipcode);
+ emitZipCodeUpdate() {
+ this.$emit('service-zip-code-updated', this.internalZipcode);
}
}
};
diff --git a/src/layouts/schedule-page/service-location/shop-address/shop-address.vue b/src/layouts/schedule-page/service-location/shop-address/shop-address.vue
index 98563ad1..a68ddb1e 100644
--- a/src/layouts/schedule-page/service-location/shop-address/shop-address.vue
+++ b/src/layouts/schedule-page/service-location/shop-address/shop-address.vue
@@ -43,7 +43,8 @@
:headerText="modalHeaderText"
:onModalOpenedCallback="onModalOpened"
:footerButtonText="modalFooterText"
- :modalPosition="modalPositions.center"
+ :closeLinkText="modalCloseText"
+ :displayCloseLink="true"
:allowInvalidSubmit="true"
@footerButtonEvent="updateSelectedProvider">
@@ -110,12 +113,12 @@ import { toTitleCase } from '@/helpers/text-helper.js';
import { markRaw } from 'vue';
import { useMainStore } from '@/store';
import widgetFields from '@/constants/cms-widget-fields';
-import { dropdownVariants, modalPositions } from '@/constants/component-variants';
+import { dropdownVariants } from '@/constants/component-variants';
import errorMessages from '@/constants/error-messages';
import { defineRule } from 'vee-validate';
import { required } from '@/helpers/validation-rules';
-defineRule('option-required', required(errorMessages.PROVIDER_REQUIRED));
+defineRule('provider-required', required(errorMessages.PROVIDER_REQUIRED));
const SERVICE_ZIP_QUESTION_REF_NAME = 'serviceZipCodeQuestion';
@@ -154,7 +157,6 @@ export default {
shopListButton: markRaw(shopListButton),
searchRadiusInMiles: '25',
nearbyShops: [],
- modalPositions,
dropdownVariants,
renderServiceZip: true,
errorMessage: '',
@@ -181,6 +183,9 @@ export default {
modalFooterText() {
return this.getCmsContent(this.modalWidgetName, widgetFields.CONTENT_GROUP_WIDGET.FOOTER_TEXT);
},
+ modalCloseText() {
+ return this.getCmsContent(this.modalWidgetName, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
+ },
modalName() {
return this.modalWidgetName;
},
@@ -243,7 +248,7 @@ export default {
showIssLoadingModal(false);
}
},
- methods: {
+ methods: {
async updateShops(autoExpand = false) {
this.errorMessage = '';
let result = await this.getNearbyShops(this.searchRadiusInMiles);
@@ -333,6 +338,11 @@ export default {
this.errorMessage = '';
}
},
+ async handleServiceZipCodeChanged(serviceZipCodeFromQuestion) {
+ if (serviceZipCodeFromQuestion !== this.internalZipcode) {
+ this.internalZipcode = serviceZipCodeFromQuestion;
+ }
+ },
forceServiceZipRerender() {
this.renderServiceZip = false;
this.$nextTick(() => {
@@ -405,5 +415,33 @@ export default {
margin-bottom: 1.25rem;
}
}
+ :deep(.modal-dialog) {
+ .modal-content {
+ hr {
+ margin: 1.375rem 0;
+ }
+ .modal-footer {
+ display: flex;
+ flex-direction: row-reverse;
+ justify-content: space-between;
+ align-items: flex-start;
+
+ button {
+ background-color: $green;
+ color: $white;
+ font-weight: 600;
+ width: 10.75rem;
+
+ &:hover {
+ background-color: darken($green, 10%);
+ }
+ }
+
+ a {
+ margin: .5rem 0 0;
+ }
+ }
+ }
+ }
}
diff --git a/src/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue b/src/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue
index e292f37a..fd0b880e 100644
--- a/src/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue
+++ b/src/layouts/schedule-page/time-slot-modal-question/time-slot-modal-question.vue
@@ -426,7 +426,7 @@ export default {
`+${formatAmountInDollars(getPriceOfLineItem(this.premiumAppointmentFee))}`;
return {
- // Unique value is required for each and the premium appoinment shares an id
+ // Unique value is required for each and the premium appointment shares an id
value: this.addPremiumFlagToInput(timeSlotData.id),
buttonLabel: this.premiumAppointmentButtonText,
buttonLabelSubCopy: formattedPrice,
diff --git a/src/layouts/service-packages/service-package-question/service-package-question.vue b/src/layouts/service-packages/service-package-question/service-package-question.vue
index 8c62c893..73e29932 100644
--- a/src/layouts/service-packages/service-package-question/service-package-question.vue
+++ b/src/layouts/service-packages/service-package-question/service-package-question.vue
@@ -22,6 +22,7 @@ import servicePackageRadio from '@/layouts/service-packages/service-package-ques
import partTypeStrings from '@/constants/part-type-strings';
import { useMainStore } from '@/store';
import { getPriceOfLineItem } from '@/helpers/price-calculator';
+import { shallowRef } from 'vue';
const glassLocations = damageLocationsSelected;
@@ -31,8 +32,6 @@ const packageNames = {
TIER_THREE: 'TierThree'
};
-const store = useMainStore();
-
export default {
name: 'service-package-question',
components: {
@@ -48,10 +47,14 @@ export default {
default: () => []
}
},
- emits: ['vapsItemsSelected'],
+ setup() {
+ const mainStore = useMainStore();
+ return { mainStore };
+ },
+ emits: ['vapsItemsSelected', 'packageSelected'],
data() {
return {
- servicePackageRadio,
+ servicePackageRadio: shallowRef(servicePackageRadio),
selectedPackageName: '',
questionText: 'Select an option:'
};
@@ -97,7 +100,7 @@ export default {
return modifiedAnswers;
},
isRecalibrationOnOrder() {
- return this.lineItemsContainsPartType(partTypeStrings.RECALIBRATION);
+ return this.mainStore.hasRecalibrationPart;
},
frontWipersApplicableForTierTwo() {
const frontWipersAreAvailable = this.lineItemsContainsPartType(partTypeStrings.FRONT_WIPER);
@@ -147,7 +150,11 @@ export default {
selectedPackageName(newValue) {
const VapsProductsInSelectedPackage = this.getVapsLineItemsForSelectedPackage(newValue);
this.$emit('vapsItemsSelected', VapsProductsInSelectedPackage);
- }
+ this.$emit('packageSelected', newValue);
+ },
+ availableLineItems() {
+ this.preselectPackage();
+ },
},
methods: {
processIfStatements,
@@ -262,8 +269,19 @@ export default {
},
glassToReplaceContainsGlassLocation(glassLocation) {
const glassLocationMatches =
- store.order.damage.glassToReplace?.filter((glassToReplace) => glassToReplace.glassLocation === glassLocation) ?? [];
+ this.mainStore.order.damage.glassToReplace?.filter((glassToReplace) => glassToReplace.glassLocation === glassLocation) ?? [];
return !!glassLocationMatches.length;
+ },
+ preselectPackage() {
+ const savedPackage = this.mainStore.order.servicePackage;
+
+ if (savedPackage && this.servicePackageAnswers.some((answer) => answer.value === savedPackage)) {
+ this.selectedPackageName = savedPackage;
+ return;
+ }
+ else {
+ this.selectedPackageName = '';
+ }
}
}
};
@@ -278,6 +296,7 @@ export default {
@include media-breakpoint-up(md) {
:deep(.package-main) {
+ justify-content: center;
padding: 0 1.5rem 0 1.5rem;
.package-wrapper:nth-child(2) {
margin-left: 0.5rem;
diff --git a/src/layouts/service-packages/service-packages.vue b/src/layouts/service-packages/service-packages.vue
index 403f327e..52d48db9 100644
--- a/src/layouts/service-packages/service-packages.vue
+++ b/src/layouts/service-packages/service-packages.vue
@@ -10,11 +10,13 @@
+
+
+ :value="zipCode" />
{
if (vm.$refs.cart) {
- const cartItems = vm.$refs.cart.allCartItems;
+ const cartItems = vm.$refs.cart.cartItems;
vm.getPayInAdvanceLineItems(cartItems);
}
@@ -493,7 +534,10 @@ export default {
totalAmount: this.getAmountDue(),
displayAmount: this.getDisplayAmountDue(),
payInAdvanceLineItems: '',
- shouldBlockInteraction: false
+ shouldBlockInteraction: false,
+ afterpayModalOpen: false,
+ iframeLoaded: false,
+ iframeResizerLoaded: false
};
},
computed: {
@@ -531,6 +575,21 @@ export default {
}
return '';
},
+ cartTitle() {
+ return this.getCmsContent('OrderSummaryTextWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT);
+ },
+ switchPaymentText() {
+ return this.getCmsContent('SwitchPaymentTextWidget', widgetFields.TEXT_BLOCK_WIDGET.TEXT);
+ },
+ submitPaymentText() {
+ return this.getCmsContent('SiteFooterWidget', widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT);
+ },
+ afterpayButtonText() {
+ return this.getCmsContent('AfterpayButtonWidget', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
+ },
+ afterpayLogo() {
+ return this.getCmsContent('AfterpayButtonWidget', widgetFields.CONTENT_GROUP_WIDGET.IMAGE);
+ },
isPaypal() {
return this.paymentType === paymentMethods.PAYPAL;
},
@@ -540,6 +599,9 @@ export default {
isAfterPay() {
return this.paymentType === paymentMethods.AFTERPAY;
},
+ isPayNow() {
+ return this.paymentType === paymentMethods.PayNow;
+ },
displayPayInAdvanceCreditCardAlert() {
return this.displayPayInAdvanceAlert(paymentMethods.CREDIT_CARD);
},
@@ -651,7 +713,8 @@ export default {
},
getZipCode() {
return (
- useMainStore().order.serviceLocation.zipCode
+ useMainStore().order.customer.address.zipCode
+ ?? useMainStore().order.serviceLocation.zipCode
?? useMainStore().order.serviceLocation.provider.address.zipCode
);
},
@@ -703,25 +766,38 @@ export default {
if (iframe) {
iframe.onload = () => {
if (iframe.contentWindow) {
- iframe.contentWindow.postMessage('hybrid', '*');
+ if (supportsApplePay()) {
+ iframe.contentWindow.postMessage("hybrid-with-applepay", "*");
+ } else {
+ iframe.contentWindow.postMessage('hybrid', '*');
+ }
if (this.isAfterPay) {
+ this.afterpayModalOpen = true;
iframe.contentWindow.postMessage('afterpay', '*');
} else {
iframe.contentWindow.postMessage('CreditCardChosen', '*');
}
+ this.iframeLoaded = true;
}
};
}
});
},
handleIFrameContentWindowMessage(event) {
+ const iframe = this.$refs.paymentFrame;
if (typeof event.data !== 'string') {
return;
}
if (event.data.includes('afterpayClosed')) {
- this.backButtonAction();
+ this.allowIFrameResize(iframe);
+ if (this.isAfterPay) {
+ this.backButtonAction();
+ } else {
+ iframe.contentWindow.postMessage('CreditCardChosen', '*');
+ this.afterpayModalOpen = false;
+ }
}
if (useMainStore().order.payment.paymentMethod !== paymentMethods.PayNow) {
@@ -738,7 +814,6 @@ export default {
useMainStore().savePaymentMethodChoice(paymentMethods.AFTERPAY);
}
if (event.data.includes('applepayOpened')) {
- this.showIssLoadingModal(true);
useMainStore().savePaymentMethodChoice(paymentMethods.APPLEPAY);
}
if (event.data.includes('showLoaderForPaypal')) {
@@ -762,7 +837,10 @@ export default {
this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT] === payMethod
);
},
- paymentFailedPayLater() {
+ async paymentFailedPayLater() {
+ this.showIssLoadingModal(true);
+ this.mainStore.savePaymentMethodChoice(paymentMethods.PAY_AT_TIME_OF_SERVICE);
+ await submitWorkOrder({ submitType: submitType.SAFELITE });
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
this.$route
@@ -778,17 +856,108 @@ export default {
this.$route
);
},
+ submitPaymentAction() {
+ const iframe = this.$refs.paymentFrame;
+ if (iframe && iframe.contentWindow && this.iframeLoaded) {
+ iframe.contentWindow.postMessage('submitPayment', '*');
+ }
+ },
+ switchToAfterPay() {
+ const iframe = this.$refs.paymentFrame;
+ if (iframe && iframe.contentWindow && this.iframeLoaded) {
+ this.afterpayModalOpen = true;
+ this.lockIFrameSize(iframe);
+ iframe.contentWindow.postMessage('afterpay-switch', '*');
+ }
+ },
+ lockIFrameSize(iframe) {
+ if (iframe && iframe.iFrameResizer) {
+ iframe.iFrameResizer.removeListeners();
+ }
+ },
+ allowIFrameResize(iframe) {
+ if (iframe) {
+ iframeResize({ checkOrigin: false }, iframe);
+ }
+ },
showIssLoadingModal
}
};
diff --git a/src/layouts/schedule-page/schedule-page.vue b/src/layouts/schedule-page/schedule-page.vue
index b9cb3ba3..b4a68eb0 100644
--- a/src/layouts/schedule-page/schedule-page.vue
+++ b/src/layouts/schedule-page/schedule-page.vue
@@ -20,6 +20,7 @@
:schedulingInshopAvailabilityRating="inShopAvailabilityRating"
@appointmentTypeChanged="appointmentTypeChangedFromServiceLocation"
@cityUpdated="cityUpdatedFromServiceLocation"
+ @clearMobileData="clearMobileDataFromServiceLocation"
@inShopZipUpdated="inShopZipUpdatedFromServiceLocation"
@mobileZipUpdated="mobileZipUpdatedFromServiceLocation"
@providerChanged="providerChangedFromServiceLocation" />
@@ -89,9 +90,8 @@ import {
import settleAllPromises from '@/helpers/layout-helper';
import showIssLoadingModal from '@/helpers/loading-modal-helper.js';
import {
- getProviderData,
- getZipCodeData,
- onProviderChanged
+ getPricedMobileFeePart,
+ getZipCodeData
} from '@/helpers/service-location-helper';
import { Form } from 'vee-validate';
import BaseFormMixin from '@/mixins/base-form-mixin.js';
@@ -225,11 +225,24 @@ export default {
async beforeRouteEnter(to, from, next) {
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
- const { isMobileAppointment, storeServiceLocation, storeSelectedProvider, serviceZipCode } = getProviderData();
- const zipCodeData = getZipCodeData(serviceZipCode);
- const serviceabilityDetailsPromise = useMainStore().getServiceabilityDetails(serviceZipCode);
- const providersPromise = useMainStore().getSafeliteProviders(serviceZipCode, 150);
+ let storeServiceLocation = useMainStore().order.serviceLocation;
+ let storeSelectedProvider = storeServiceLocation?.provider;
+ const storeSelectedSchedule = useMainStore().order.schedule;
+ if (storeSelectedProvider?.providerNumber && !storeSelectedSchedule?.routeCode) {
+ useMainStore().resetServiceLocationProvider();
+ storeServiceLocation = useMainStore().order.serviceLocation;
+ storeSelectedProvider = storeServiceLocation?.provider;
+ }
+ const storeSelectedAppointmentType = storeServiceLocation?.appointmentType;
+ const isMobileAppointment = storeSelectedAppointmentType === AppointmentTypeStrings.MOBILE
+ || storeSelectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
+ const serviceZipCode = storeServiceLocation?.zipCode || useMainStore().order.customer.address.zipCode;
+ const zipCodeData = getZipCodeData(serviceZipCode);
+ const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode);
+ const serviceabilityDetailsPromise = useMainStore().getServiceabilityDetails(serviceZipCode);
+ const getGlassFeesPromise = useMainStore().getGlassFees();
+ const providersPromise = useMainStore().getSafeliteProviders(serviceZipCode, 150);
const premiumFeePromise = useMainStore().getMobilePremiumFee();
const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
if (result.data) {
@@ -244,6 +257,14 @@ export default {
resultKey: 'cmsContent',
promise: cmsContentPromise
},
+ {
+ resultKey: 'mobileFeePart',
+ promise: mobileFeePartPromise
+ },
+ {
+ resultKey: 'glassFees',
+ promise: getGlassFeesPromise
+ },
{
resultKey: 'serviceabilityDetails',
promise: serviceabilityDetailsPromise
@@ -256,10 +277,6 @@ export default {
resultKey: 'providers',
promise: providersPromise
},
- {
- resultKey: 'providerChanged',
- promise: onProviderChanged()
- },
{
resultKey: 'premiumFeeWithPrice',
promise: premiumFeeWithPricePromise
@@ -268,7 +285,7 @@ export default {
// use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap);
- const providersUnderOneHundredMiles = resultMap.providers?.shopProviders?.filter((provider) => provider.distanceMiles <= 100);
+ const providersUnderOneHundredMiles = resultMap.providers?.shopProviders?.filter((provider) => provider.distanceInMiles <= 100);
const serviceLocationData = {
defaultMobileZipCode: isMobileAppointment
? storeServiceLocation?.zipCode
@@ -285,9 +302,9 @@ export default {
useMainStore().updateIsSafeliteProvider(true);
next(async (vm) => {
const foundProviderInFullList = resultMap.providers?.shopProviders
- .find((provider) => provider.providerNumber === storeSelectedProvider?.providerNumber) || resultMap.providers?.shopProviders[0];
+ .find((provider) => provider.providerNumber === storeSelectedProvider?.providerNumber) || null;
const foundProviderInHundredMiles = providersUnderOneHundredMiles
- .find((provider) => provider.providerNumber === storeSelectedProvider?.providerNumber) || providersUnderOneHundredMiles[0];
+ .find((provider) => provider.providerNumber === storeSelectedProvider?.providerNumber) || null;
if (!foundProviderInHundredMiles && !foundProviderInFullList) {
if (storeSelectedProvider?.providerNumber && resultMap.providers?.shopProviders) {
@@ -296,11 +313,12 @@ export default {
} else if (!foundProviderInHundredMiles && foundProviderInFullList) {
serviceLocationData.providers?.shopProviders.push(foundProviderInFullList);
}
+
const initialServiceLocationObj = {
mobileProviderNumber: isMobileAppointment
? storeSelectedProvider?.providerNumber
: null,
- provider: isMobileAppointment ? null : foundProviderInFullList,
+ provider: isMobileAppointment ? null : foundProviderInFullList || resultMap.providers?.shopProviders[0] || null,
zipCode: useMainStore().order.serviceLocation.zipCode || useMainStore().order.customer.address.zipCode,
zipCodeCtu: resultMap.zipCodeData?.zipCodeCtu
};
@@ -319,8 +337,10 @@ export default {
return {
inShopAvailabilityRating: 'high',
inShopDatesData: [],
+ isDatePickerRefreshing: false,
isMobileView: false,
mobileDatesData: [],
+ mobileFeePart: null,
mobilePremiumAppointmentFee: null,
mobileProviderNumber: null,
selectableDatesData: [],
@@ -341,14 +361,18 @@ export default {
return false;
}
+ const validMobileAppointmentType = ((this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
+ || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP)
+ && serviceLocationToUse.mobileProviderNumber);
+ const validInShopAppointmentType = ((this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP
+ || this.selectedAppointmentType === AppointmentTypeStrings.DROP_OFF)
+ && (this.selectedProvider?.providerNumber || serviceLocationToUse.provider?.providerNumber));
+
const serviceLocationPreReqs = serviceLocationToUse.zipCode !== null
&& serviceLocationToUse.zipCodeCtu !== null
&& serviceLocationToUse.appointmentType !== null
- && (((this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
- || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP)
- && serviceLocationToUse.mobileProviderNumber)
- || ((this.selectedAppointmentType === AppointmentTypeStrings.IN_SHOP || this.selectedAppointmentType === AppointmentTypeStrings.DROP_OFF)
- && (this.selectedProvider?.providerNumber || serviceLocationToUse.provider?.providerNumber)));
+ && (validMobileAppointmentType || validInShopAppointmentType)
+ && !this.isDatePickerRefreshing;
const damageInfo = useMainStore().order.damage.isRepair
|| (useMainStore().order.lineItems?.glassParts != null && useMainStore().order.lineItems.glassParts.length > 0);
@@ -453,6 +477,14 @@ export default {
cityUpdatedFromServiceLocation(newCity) {
this.selectedServiceLocationCity = newCity;
},
+ clearMobileDataFromServiceLocation() {
+ if (this.selectedServiceLocation) {
+ this.selectedServiceLocation.mobileProviderNumber = null;
+ }
+ this.mobileDatesData = [];
+ this.mobileProviderNumber = null;
+ this.selectedMobileZipCode = null;
+ },
dateSelectedFromPicker(date) {
this.selectedDate = date;
this.showDatePickerError = false;
@@ -531,7 +563,6 @@ export default {
daysFromStart: endDateObject.daysFromStart || null
}))
.catch(() => {
- console.warn('Error fetching initial available dates...');
return {
todayDate: todayDateString,
initialViewStartDate,
@@ -647,9 +678,7 @@ export default {
}
},
mobileZipUpdatedFromServiceLocation(mobileZipServiceLocation) {
- if (mobileZipServiceLocation
- && (this.mobileProviderNumber !== mobileZipServiceLocation.mobileProviderNumber
- || !this.hasNeededServiceLocationData)) {
+ if (mobileZipServiceLocation) {
this.mobileProviderNumber = mobileZipServiceLocation.mobileProviderNumber;
this.selectedMobileZipCode = mobileZipServiceLocation.zipCode;
this.selectedServiceLocation = mobileZipServiceLocation;
@@ -661,22 +690,27 @@ export default {
},
async providerChangedFromServiceLocation(newProvider) {
this.selectedProvider = newProvider?.provider;
- if (newProvider?.provider) {
- this.mainStore.updateServiceLocation(newProvider);
+ if (newProvider?.refreshDatePicker && newProvider.provider) {
+ this.mainStore.updateServiceLocationProvider(newProvider.provider);
+
showIssLoadingModal(true);
- await onProviderChanged();
- if (newProvider.refreshDatePicker) {
- await this.refreshDatePicker();
- } else {
- showIssLoadingModal(false);
- }
+ await this.mainStore.getBillToInfo(newProvider.provider?.providerNumber)
+ .then(() => {
+ this.refreshDatePicker();
+ })
+ .catch(() => {
+ console.warn('Error fetching bill to info...');
+ showIssLoadingModal(false);
+ });
}
},
async refreshDatePicker() {
this.resetLocalFlags();
+ this.isDatePickerRefreshing = true;
await this.getDatePickerInitialData().then((data) => {
this.selectableDatesData = data.initialShopTimeSlotsResponse;
this.$refs.datePicker.initializeComponent(data);
+ this.isDatePickerRefreshing = false;
showIssLoadingModal(false);
});
},
@@ -700,7 +734,7 @@ export default {
appointmentTypeToUse = AppointmentTypeStrings.DROP_OFF;
}
- this.mainStore.updateAppointmentType(appointmentTypeToUse);
+ await this.$refs.serviceLocation.forwardButtonAction(appointmentTypeToUse);
this.mainStore.saveSchedule(this.selectedTimeSlotInfo.timeSlot);
this.$router.navigate(
this.navigationScenarios.CLICKED_FORWARD,
diff --git a/src/layouts/schedule-page/service-location/service-location.spec.js b/src/layouts/schedule-page/service-location/service-location.spec.js
index 7b1b4294..cda30da8 100644
--- a/src/layouts/schedule-page/service-location/service-location.spec.js
+++ b/src/layouts/schedule-page/service-location/service-location.spec.js
@@ -124,7 +124,7 @@ const mountOptions = {
alert: true,
textBlock: true,
appointmentTypeQuestion: true,
- contentGroupModal: true,
+ recalModal: true,
siteFooter: true,
siteHeader: true,
siteSubHeader: true,
@@ -203,7 +203,7 @@ describe('service-location.vue', () => {
const newMobileServiceZipCode = '45433';
// Act
- mobileServiceZipCodeQuestion.vm.$emit('update:modelValue', newMobileServiceZipCode);
+ mobileServiceZipCodeQuestion.vm.$emit('service-zip-code-updated', newMobileServiceZipCode);
await wrapper.vm.$nextTick();
// Assert
diff --git a/src/layouts/schedule-page/service-location/service-location.vue b/src/layouts/schedule-page/service-location/service-location.vue
index 5b43a165..227c20bb 100644
--- a/src/layouts/schedule-page/service-location/service-location.vue
+++ b/src/layouts/schedule-page/service-location/service-location.vue
@@ -1,11 +1,5 @@
-
@@ -139,10 +139,10 @@ import alert from '@/ux-components/alert/alert.vue';
import textBlock from '@/digital-components/text-block/text-block.vue';
import appointmentTypeQuestion from '@/layouts/schedule-page/service-location/appointment-type-question/appointment-type-question.vue';
import baseFormMixin from '@/mixins/base-form-mixin';
-import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
import shopAddress from '@/layouts/schedule-page/service-location/shop-address/shop-address.vue';
import serviceZipQuestion from '@/layouts/schedule-page/service-location/service-zip-question/service-zip-question.vue';
import widgetFields from '@/constants/cms-widget-fields';
+import recalModal from '@/iss-components/recal-modal/recal-modal.vue';
const RECAL_MODAL_REF_NAME = 'RecalModal';
@@ -152,12 +152,12 @@ export default {
alert,
textBlock,
appointmentTypeQuestion,
- contentGroupModal,
shopAddress,
- serviceZipQuestion
+ serviceZipQuestion,
+ recalModal
},
mixins: [baseFormMixin],
- emits: ['appointment-type-changed', 'city-updated', 'in-shop-zip-updated', 'mobile-zip-updated', 'provider-changed'],
+ emits: ['appointment-type-changed', 'city-updated', 'clear-mobile-data', 'in-shop-zip-updated', 'mobile-zip-updated', 'provider-changed'],
props: {
schedulingInshopAvailabilityRating: {
type: String,
@@ -182,6 +182,7 @@ export default {
isRecalibrationServiceableMobile: null,
selectedAppointmentType: this.getSelectedAppointmentType(),
selectedProvider: this.getSelectedProvider(),
+ mobileFeePart: null,
mobileProviderNumber: null,
zipContainsMilitaryBase: false,
zipCodeCtu: null,
@@ -236,7 +237,8 @@ export default {
);
},
isMobile() {
- return this.selectedAppointmentType === AppointmentTypeStrings.MOBILE;
+ return this.selectedAppointmentType === AppointmentTypeStrings.MOBILE
+ || this.selectedAppointmentType === AppointmentTypeStrings.MOBILE_NOT_ITAC_AND_NOT_NOCOMP;
},
isServiceableInshop() {
if (this.isRecalibrationServiceableInshop !== null) {
@@ -298,16 +300,7 @@ export default {
},
async mobileZipCode(newZip, oldZip) {
if (newZip !== '' && newZip !== oldZip && !this.initializingData) {
- showIssLoadingModal(true);
- await this.updateMobileZip();
- const updateMobileZipServiceLocationObj = {
- mobileProviderNumber: this.mobileProviderNumber,
- provider: null,
- refreshDatePicker: true,
- zipCode: this.zipCode,
- zipCodeCtu: this.zipCodeCtu
- };
- this.$emit('mobile-zip-updated', updateMobileZipServiceLocationObj);
+ await this.processMobileZipCodeChange();
}
},
schedulingInshopAvailabilityRating(newRating) {
@@ -339,27 +332,16 @@ export default {
}
},
selectedProvider(newProvider, oldProvider) {
- if (newProvider?.providerNumber !== oldProvider?.providerNumber) {
+ if (newProvider?.providerNumber !== oldProvider?.providerNumber || this.availabilityRating === null) {
const appointmentIsInshop = this.isInshop;
const returnedProvider = {
- refreshDatePicker: appointmentIsInshop && oldProvider?.providerNumber !== null,
- state: this.state,
- zipCode: this.zipCode,
- zipCodeCtu: this.zipCodeCtu,
- appointmentType: this.selectedAppointmentType,
- provider: !this.isMobile ? newProvider : {
- providerNumber: this.mobileProviderNumber,
- address: {
- streetAddress: null,
- city: null,
- state: null,
- zipCode: null,
- zipCodeCtu: null
- }
- }
+ provider: newProvider,
+ refreshDatePicker: appointmentIsInshop && oldProvider?.providerNumber !== null
};
- this.$emit('provider-changed', returnedProvider);
+ if (newProvider?.providerNumber !== oldProvider?.providerNumber) {
+ this.$emit('provider-changed', returnedProvider);
+ }
}
}
},
@@ -369,6 +351,34 @@ export default {
await this.setData(initialData);
this.initializingData = false;
},
+ async forwardButtonAction(appointmentType) {
+ let provider = this.selectedProvider;
+ this.mainStore.updateMobileFee(null);
+ if (this.isMobile) {
+ if (this.mainStore.isNoComp || this.mainStore.isITAC) {
+ this.mainStore.updateMobileFee(this.mobileFeePart);
+ }
+
+ provider = {
+ providerNumber: this.mobileProviderNumber,
+ address: {
+ streetAddress: null,
+ city: null,
+ state: null,
+ zipCode: null,
+ zipCodeCtu: null
+ }
+ };
+ }
+
+ this.mainStore.updateServiceLocation({
+ state: this.state,
+ zipCode: this.zipCode,
+ zipCodeCtu: this.zipCodeCtu,
+ appointmentType: appointmentType || this.selectedAppointmentType,
+ provider
+ });
+ },
openModalAction(modalName) {
this.$refs[modalName].openModal();
},
@@ -427,6 +437,32 @@ export default {
this.$emit('in-shop-zip-updated', inShopZipServiceLocationObj);
});
},
+ async handleServiceZipCodeChanged(serviceZipCodeFromQuestion) {
+ if (serviceZipCodeFromQuestion !== this.mobileZipCode) {
+ // Can probs just make this one call but have to think about initialization flow and not wanting to trigger extra calls on load
+ this.mobileZipCode = serviceZipCodeFromQuestion;
+ } else {
+ await this.processMobileZipCodeChange();
+ }
+ },
+ async processMobileZipCodeChange() {
+ showIssLoadingModal(true);
+ await this.updateMobileZip();
+
+ if (!this.mobileZipError) {
+ const updateMobileZipServiceLocationObj = {
+ mobileProviderNumber: this.mobileProviderNumber,
+ provider: null,
+ refreshDatePicker: true,
+ zipCode: this.zipCode,
+ zipCodeCtu: this.zipCodeCtu
+ };
+ this.$emit('mobile-zip-updated', updateMobileZipServiceLocationObj);
+ } else {
+ this.$emit('clear-mobile-data');
+ showIssLoadingModal(false);
+ }
+ },
setCtuForMobile(val) {
this.zipCodeCtu = val;
},
@@ -446,6 +482,10 @@ export default {
this.setServiceabilityDetails(initialData.serviceabilityDetails);
}
+ if (initialData.mobileFeePart) {
+ this.mobileFeePart = initialData.mobileFeePart;
+ }
+
if (initialData.providers) {
this.setMobileProviderNumber(initialData.providers.mobileProviderNumber);
let foundMatch = false;
@@ -462,12 +502,22 @@ export default {
this.selectedProvider = null;
}
}
+
+ if (initialData.glassFees) {
+ useMainStore().getCombinedQuote(initialData.glassFees)
+ .then((combinedQuote) => {
+ this.setGlassFeeItems(combinedQuote);
+ });
+ }
},
setContainsMilitaryBase(val) {
if (this.zipContainsMilitaryBase !== val) {
this.zipContainsMilitaryBase = val;
}
},
+ setGlassFeeItems(newGlassFeeItems) {
+ this.mainStore.updateGlassFees(newGlassFeeItems);
+ },
setMobileProviderNumber(providerNumber) {
this.mobileProviderNumber = providerNumber;
},
@@ -569,7 +619,23 @@ $page-side-padding: 1.5rem;
}
}
div.alert {
- margin-top: 0.625rem;
+ margin-top: 1.25rem;
+
+ &.widget-name-AlertLowAvailabilityInshopWidget {
+ @include media-breakpoint-up(xs) {
+ :deep(.alert-headline-text-container) {
+ padding-left: 0.5rem;
+ padding-right: 0.375rem;
+ letter-spacing: 0.45px;
+ }
+ }
+ @include media-breakpoint-up(xl) {
+ :deep(.alert-headline-text-container) {
+ padding: 0rem 0.625rem;
+ }
+ }
+
+ }
button.looka-likea-link {
background: none;
diff --git a/src/layouts/schedule-page/service-location/service-zip-modal-question/service-zip-modal-question.spec.js b/src/layouts/schedule-page/service-location/service-zip-modal-question/service-zip-modal-question.spec.js
index 66efbc1c..cd875b42 100644
--- a/src/layouts/schedule-page/service-location/service-zip-modal-question/service-zip-modal-question.spec.js
+++ b/src/layouts/schedule-page/service-location/service-zip-modal-question/service-zip-modal-question.spec.js
@@ -1,9 +1,25 @@
import { mount } from '@vue/test-utils';
import crypto from 'crypto';
import serviceZipModalQuestion from '@/layouts/schedule-page/service-location/service-zip-modal-question/service-zip-modal-question.vue';
+import { getMountOptions } from '@/helpers/unit-test-helper';
+import { createTestingPinia } from '@pinia/testing';
+import { useMainStore } from '@/store';
+import settleAllPromises from '@/helpers/layout-helper';
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import baseMixin from '@/mixins/base-mixin';
global.crypto = crypto;
+jest.mock('@/helpers/layout-helper.js', () => jest.fn());
+
+// Mock fetchCmsContentForPage
+jest.mock('@/helpers/cms-content-helper', () => ({
+ fetchCmsContentForPage: jest.fn()
+}));
+jest.mock('@/global-methods', () => ({
+ callHttpClient: jest.fn()
+}));
+
jest.mock('@/digital-components/textbox-question/textbox-question', () => ({
getCmsContent: jest.fn((widgetName, cmsFieldName) => widgetName[cmsFieldName])
}));
@@ -71,20 +87,48 @@ const mockModalCmsContent = {
FooterText: 'Sample modal footer text here.'
};
-const mockMixin = {
- methods: {
- getCmsContent: jest.fn((widgetName, cmsFieldName) => {
- if (widgetName === linkWidgetName) {
- return mockLinkCmsContent[cmsFieldName];
- }
+function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRunAfterInitializingStore = () => {}, queryString = {}) {
+ const mountOptions = getMountOptions({
+ router: {
+ navigate: jest.fn()
+ },
+ route: { query: { issPage: 'page-name', ...queryString }, params: {} }
+ });
- if (widgetName === modalWidgetName) {
- return mockModalCmsContent[cmsFieldName];
- }
- return null;
- })
- }
-};
+ const testingPinia = createTestingPinia({
+ initialState: {
+ main: mainInitialState
+ }
+ });
+ useMainStore(testingPinia);
+ methodToRunAfterInitializingStore();
+ useMainStore().getServiceabilityDetails = jest.fn().mockReturnValue(mockGetServiceabilityDetails);
+
+ mountOptions.global.plugins = [testingPinia];
+ mountOptions.props = initialData
+
+ const apiResponses = { cmsContent: {} };
+
+ settleAllPromises.mockImplementation(() => apiResponses);
+ fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+
+ const wrapper = mount(serviceZipModalQuestion, mountOptions);
+ wrapper.vm.getCmsContent = jest.fn((widgetName, cmsFieldName) => {
+ if (widgetName === linkWidgetName) {
+ return mockLinkCmsContent[cmsFieldName];
+ }
+
+ if (widgetName === modalWidgetName) {
+ return mockModalCmsContent[cmsFieldName];
+ }
+ return null;
+ });
+ wrapper.vm.setCmsContent = jest.fn();
+ wrapper.vm.$router.navigateWithSpinner = jest.fn();
+ wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
+
+ return { wrapper };
+}
describe('service-zip-modal-question.vue', () => {
it('Initial state on load with existing location info', async () => {
@@ -94,15 +138,13 @@ describe('service-zip-modal-question.vue', () => {
zipCode: '43235'
};
- const wrapper = mount(serviceZipModalQuestion, {
- mixins: [mockMixin],
- props: {
+ const { wrapper } = getMountedComponent({},
+ {
modelValue: serviceZipCodeQuestion,
linkWidgetName,
modalWidgetName
- },
- attachTo: document.body
- });
+ }
+ );
// Assert
expect(wrapper.html()).not.toEqual(expect.stringContaining(mockLinkCmsContent.BodyText));
@@ -117,15 +159,13 @@ describe('service-zip-modal-question.vue', () => {
const zip = '43235';
- const wrapper = mount(serviceZipModalQuestion, {
- mixins: [mockMixin],
- props: {
+ const { wrapper } = getMountedComponent({},
+ {
modelValue: serviceZipCodeQuestion,
mobileFeePart: {},
modalWidgetName
- },
- attachTo: document.body
- });
+ }
+ );
// Act
wrapper.vm.internalModel.zipCode = zip;
@@ -147,14 +187,12 @@ describe('service-zip-modal-question.vue', () => {
const zip = '';
- const wrapper = mount(serviceZipModalQuestion, {
- mixins: [mockMixin],
- props: {
+ const { wrapper } = getMountedComponent({},
+ {
modelValue: serviceZipCodeQuestion,
modalWidgetName
- },
- attachTo: document.body
- });
+ }
+ );
// Act
wrapper.vm.internalModel.zipCode = zip;
@@ -173,14 +211,12 @@ describe('service-zip-modal-question.vue', () => {
const zip = '11111';
- const wrapper = mount(serviceZipModalQuestion, {
- mixins: [mockMixin],
- props: {
+ const { wrapper } = getMountedComponent({},
+ {
modelValue: serviceZipCodeQuestion,
modalWidgetName
- },
- attachTo: document.body
- });
+ }
+ );
// Act
wrapper.vm.internalModel.zipCode = zip;
@@ -199,14 +235,12 @@ describe('service-zip-modal-question.vue', () => {
const zip = '';
- const wrapper = mount(serviceZipModalQuestion, {
- mixins: [mockMixin],
- props: {
+ const { wrapper } = getMountedComponent({},
+ {
modelValue: serviceZipCodeQuestion,
modalWidgetName
- },
- attachTo: document.body
- });
+ }
+ );
// Act
wrapper.vm.internalModel.zipCode = zip;
@@ -226,14 +260,12 @@ describe('service-zip-modal-question.vue', () => {
const zip = '123';
- const wrapper = mount(serviceZipModalQuestion, {
- mixins: [mockMixin],
- props: {
+ const { wrapper } = getMountedComponent({},
+ {
modelValue: serviceZipCodeQuestion,
modalWidgetName
- },
- attachTo: document.body
- });
+ }
+ );
// Act
wrapper.vm.internalModel.zipCode = zip;
diff --git a/src/layouts/schedule-page/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/schedule-page/service-location/service-zip-modal-question/service-zip-modal-question.vue
index 5227af29..4214d1e0 100644
--- a/src/layouts/schedule-page/service-location/service-zip-modal-question/service-zip-modal-question.vue
+++ b/src/layouts/schedule-page/service-location/service-zip-modal-question/service-zip-modal-question.vue
@@ -15,7 +15,6 @@
:onModalOpenedCallback="onModalOpened"
:onModalClosedCallback="onModalClosed"
:footerButtonText="modalFooterText"
- :modalPosition="'center'"
@footerButtonEvent="setZipCode">
+
-
-
-
-
+
+ -
+
+
-
+
+
+ {{ cartTitle }}
+
+
+
+
{{ switchPaymentText }}
+
+
- {{ appointmentQuestionText }}
+ {{ errorMessage }}
+
-
+
-{{ recalModalContent.subHeaderText }}
-
+ {{ recalModalContent.subHeaderText }}
+
@@ -122,7 +121,6 @@ import {
import { submitWorkOrder } from '@/helpers/order-helper.js';
import bailoutMessage from '@/constants/bailoutMessage';
import submitType from '@/constants/submit-type';
-import { modalPositions } from '@/constants/component-variants';
const VERIFYING_COVERAGE = 'Verifying coverage';
@@ -159,8 +157,7 @@ export default {
alertRecalWarning: 'AlertRecalWarningWidget',
editShopLinkText: 'EditShopLinkTextWidget',
contactDetails: 'ContactDetailsSectionWidget'
- },
- modalPositions
+ }
};
},
computed: {
@@ -345,7 +342,7 @@ export default {
}
};
-