SSR-1063 hop payment method constants

src/constants/payment-method-constants.js

@@ -1,3 +1,9 @@
+const hopPaymentMethods = Object.freeze({
+    CREDIT_CARD: 'cc',
+    PAYPAL: 'pp',
+    AFTERPAY: 'ap'
+});
+
 const paymentMethods = Object.freeze({
     NONE: null,
     PAY_AT_TIME_OF_SERVICE: 'PayAtTimeOfService',
@@ -6,4 +12,4 @@ const paymentMethods = Object.freeze({
     AFTERPAY: 'Afterpay'
 });
 
-export default paymentMethods;
+export { hopPaymentMethods, paymentMethods };

src/layouts/payment-method/payment-method.spec.js

@@ -5,7 +5,7 @@ import paymentMethod from '@/layouts/payment-method/payment-method.vue';
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
 import { useMainStore } from '@/store';
-import paymentMethods from '@/constants/payment-method-constants';
+import { paymentMethods } from '@/constants/payment-method-constants';
 
 function setupMocks() {
     const mountOptions = getMountOptions();

src/layouts/payment-method/payment-method.vue

@@ -52,7 +52,7 @@ import paymentMethodQuestion from '@/layouts/payment-method/payment-method-quest
 import settleAllPromises from '@/helpers/layout-helper';
 import { useMainStore } from '@/store';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
-import paymentMethods from '@/constants/payment-method-constants';
+import { paymentMethods } from '@/constants/payment-method-constants';
 import globalRules from '@/constants/global-rules';
 import { Form } from 'vee-validate';
 

src/layouts/payment-page/payment-page.spec.js

@@ -5,7 +5,7 @@ import payment from '@/layouts/payment-page/payment-page.vue';
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper';
 import { useMainStore } from '@/store';
-import paymentMethods from '@/constants/payment-method-constants'
+import { paymentMethods, hopPaymentMethods } from '@/constants/payment-method-constants.js';
 
 // Constants
 const parts = {
@@ -305,7 +305,7 @@ describe('payment-page.vue', () => {
 
     describe('payment type mapping', () => {
         describe('getPaymentType', () => {
-            test('Maps AFTERPAY -> ap', () => {
+            test('Maps AFTERPAY -> hopPaymentMethods.AFTERPAY', () => {
                 // Arrange
                 useMainStore().order.payment.payInAdvanceType = paymentMethods.AFTERPAY;
                 const wrapper = setupMocks({});
@@ -314,10 +314,10 @@ describe('payment-page.vue', () => {
                 const mapped = wrapper.vm.getPaymentType();
 
                 // Assert
-                expect(mapped).toBe('ap');
+                expect(mapped).toBe(hopPaymentMethods.AFTERPAY);
             });
 
-            test('Maps CREDIT_CARD -> cc', () => {
+            test('Maps CREDIT_CARD -> hopPaymentMethods.CREDIT_CARD', () => {
                 // Arrange
                 useMainStore().order.payment.payInAdvanceType = paymentMethods.CREDIT_CARD;
                 const wrapper = setupMocks({});
@@ -326,10 +326,10 @@ describe('payment-page.vue', () => {
                 const mapped = wrapper.vm.getPaymentType();
 
                 // Assert
-                expect(mapped).toBe('cc');
+                expect(mapped).toBe(hopPaymentMethods.CREDIT_CARD);
             });
 
-            test('Maps PAYPAL -> pp', () => {
+            test('Maps PAYPAL -> hopPaymentMethods.PAYPAL', () => {
                 // Arrange
                 useMainStore().order.payment.payInAdvanceType = paymentMethods.PAYPAL;
                 const wrapper = setupMocks({});
@@ -338,7 +338,7 @@ describe('payment-page.vue', () => {
                 const mapped = wrapper.vm.getPaymentType();
 
                 // Assert
-                expect(mapped).toBe('pp');
+                expect(mapped).toBe(hopPaymentMethods.PAYPAL);
             });
 
             test('Maps other values to self', () => {
@@ -362,7 +362,7 @@ describe('payment-page.vue', () => {
 
                 // Act
                 const preVal = wrapper.vm.isPaypal;
-                wrapper.vm.paymentType = 'pp';
+                wrapper.vm.paymentType = hopPaymentMethods.PAYPAL;
                 await wrapper.vm.$nextTick();
 
                 const postVal = wrapper.vm.isPaypal;

src/layouts/payment-page/payment-page.vue

@@ -23,7 +23,7 @@
                     <siteFooter
                     ref="siteFooter"
                     cmsWidgetName="SiteFooterWidget"
-                    :isForwardActionDisabled="true"
+                    isForwardActionDisabled="true"
                     isForwardButtonHidden="true"
                     @ForwardClicked="forwardButtonAction"
                     @backClicked="backButtonAction" />
@@ -170,11 +170,11 @@ import settleAllPromises from '@/helpers/layout-helper';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { useMainStore } from '@/store';
-import iframeResize from '../../../node_modules/iframe-resizer/js/iframeResizer.js';
+import iframeResize from '@/../node_modules/iframe-resizer/js/iframeResizer.js';
 import externalUrls from '@/router/router-constants/externalUrl-values.js';
 import widgetFields from '@/constants/cms-widget-fields.js';
-import paymentMethods from '@/constants/payment-method-constants';
+import { hopPaymentMethods, paymentMethods } from '@/constants/payment-method-constants.js';
-import { AppointmentTypeStrings } from '@/constants/schedule-constants';
+import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
 
 export default {
     name: 'payment-page',
@@ -282,7 +282,7 @@ export default {
             return '';
         },
         isPaypal() {
-            if (this.paymentType === 'pp') {
+            if (this.paymentType === hopPaymentMethods.PAYPAL) {
                 return true;
             }
             return false;
@@ -359,7 +359,6 @@ export default {
                     return items[1];
                 }
             }
-            //this.backButtonAction();
             return undefined;
         },
         getInvoiceNumber() {
@@ -367,42 +366,31 @@ export default {
             if (workOrderNumber) {
                 return workOrderNumber.replace('-', '');
             }
-            //this.backButtonAction();
             return undefined;
         },
         getAddress1() {
-            return useMainStore().order.serviceLocation.address
+            return useMainStore().order.serviceLocation.address ?? useMainStore().order.serviceLocation.provider.address.streetAddress;
-                ? useMainStore().order.serviceLocation.address
-                : useMainStore().order.serviceLocation.provider.address.streetAddress;
         },
         getAddress2() {
-            return useMainStore().order.serviceLocation.address2
+            return useMainStore().order.serviceLocation.address2;
-                ? useMainStore().order.serviceLocation.address2
-                : null;
         },
         getCity() {
-            return useMainStore().order.serviceLocation.city
+            return useMainStore().order.serviceLocation.city ?? useMainStore().order.serviceLocation.provider.address.city;
-                ? useMainStore().order.serviceLocation.city
-                : useMainStore().order.serviceLocation.provider.address.city;
         },
         getState() {
-            return useMainStore().order.serviceLocation.state
+            return useMainStore().order.serviceLocation.state ?? useMainStore().order.serviceLocation.provider.address.state;
-                ? useMainStore().order.serviceLocation.state
-                : useMainStore().order.serviceLocation.provider.address.state;
         },
         getZipCode() {
-            return useMainStore().order.serviceLocation.zipCode
+            return useMainStore().order.serviceLocation.zipCode ?? useMainStore().order.serviceLocation.provider.address.zipCode;
-                ? useMainStore().order.serviceLocation.zipCode
-                : useMainStore().order.serviceLocation.provider.address.zipCode;
         },
         getPaymentType() {
             switch (useMainStore().order.payment.payInAdvanceType) {
                 case paymentMethods.AFTERPAY:
-                    return 'ap';
+                    return hopPaymentMethods.AFTERPAY;
                 case paymentMethods.CREDIT_CARD:
-                    return 'cc';
+                    return hopPaymentMethods.CREDIT_CARD;
                 case paymentMethods.PAYPAL:
-                    return 'pp';
+                    return hopPaymentMethods.PAYPAL;
                 default:
                     return useMainStore().payment.payInAdvanceType;
             }
@@ -428,9 +416,9 @@ export default {
                 if (iframe) {
                     iframe.onload = () => {
                         if (iframe.contentWindow) {
-                            if (this.paymentType === 'cc') {
+                            if (this.paymentType === hopPaymentMethods.CREDIT_CARD) {
                                 iframe.contentWindow.postMessage('CreditCardChosen', '*');
-                            } else if (this.paymentType === 'ap') {
+                            } else if (this.paymentType === hopPaymentMethods.AFTERPAY) {
                                 iframe.contentWindow.postMessage('afterpay', '*');
                             }
                         }
@@ -466,8 +454,6 @@ export default {
         },
         forwardButtonAction() {
             this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route);
-        },
-        navigateForward() {
         }
     }
 };

src/router/index.js

@@ -129,6 +129,14 @@ router.beforeEach(async (to, from) => {
         showIssLoadingModal(true);
     }
 
+    const isInIframe = fromQueryPage === IssPageValues.PAYMENT_PAGE;
+    if (isInIframe) {
+        // need to set window.top.location.href directly when navigating out of an iframe
+        // especially when navigating with browser buttons
+        const newUrl = `${window.top.location.origin}${to.href}`;
+        window.top.location.href = newUrl;
+    }
+
     const store = useMainStore();
     // Prevent navigating backwards if we enter a bailout that we are not allowed to go back on
     if (store.isBailout && from.name === IssPageValues.BAILOUT_PAGE && to.name !== 'root' && to.name !== IssPageValues.CONTACT_CONFIRMATION

src/store/index.js

@@ -13,7 +13,7 @@ import damageLocationsSelected from '@/constants/damage-locations-selected';
 import coverageStatuses from '@/constants/coverage-statuses';
 import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from '@/constants/schedule-constants';
 import { convertDateStringToDate, getDateDifferenceInDays, militaryToTwelveHourTime } from '@/helpers/date-helper';
-import paymentMethods from '@/constants/payment-method-constants';
+import { paymentMethods } from '@/constants/payment-method-constants';
 
 const storeId = 'main';
 

src/store/store.spec.js

@@ -3,7 +3,7 @@ import { useMainStore } from '@/store/index.js';
 import globalMethods from '@/global-methods.js';
 import { getRandomString, getRandomGuid, getRandomInt, getRandomBoolean } from '@/helpers/data-generation.js';
 import coverageStatuses from '@/constants/coverage-statuses.js';
-import paymentMethods from '@/constants/payment-method-constants';
+import { paymentMethods } from '@/constants/payment-method-constants';
 import { endpoints } from '@/constants/endpoints';
 import { AppointmentTypeStrings } from '@/constants/schedule-constants';
 

vue.config.js

@@ -2,7 +2,7 @@
 process.env.VUE_APP_CONSUMER_CF_DISTRO = 'https://digitalapi.dev.safelite.io';
 process.env.VUE_APP_CURRENT_ENVIRONMENT = 'Localhost';
 process.env.VUE_APP_GOOGLE_PLACES_API_KEY = 'AIzaSyCuLhQcDdZTTb4JzpUFms1OCch2dk5lHF0';
-process.env.VUE_APP_SAFELITE_HOP = 'https://sv2-safelitehop-sys.safelite.com/fmgCheckoutEmbedded.aspx';
+process.env.VUE_APP_SAFELITE_HOP = 'https://iss-hop-sys.glassclaim.com/fmgCheckoutEmbedded.aspx';
 
 // GA & GTM
 // NOTE: Using the old ISS site GTM Cotnainer ID for now, will create a new one soon.