Merge branch 'develop' into feature/CSR-1384-modals-for-add-vaps

azure-pipelines.yml

@@ -97,9 +97,7 @@ stages:
                                             __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
                                             __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
                                             __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
-                                            __VUE_APP_SAFELITE_HOP___: $(__VUE_APP_SAFELITE_HOP__)
+                                            __VUE_APP_SAFELITE_HOP__: $(__VUE_APP_SAFELITE_HOP__)
-                                            __VUE_APP_PAYPAL_SUCCESS_URL__: $(__VUE_APP_PAYPAL_SUCCESS_URL__)
-                                            __VUE_APP_PAYPAL_CANCEL_URL__: $(__VUE_APP_PAYPAL_CANCEL_URL__)
                                             __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
                                             __VUE_APP_MY_ACCOUNT__: $(__VUE_APP_MY_ACCOUNT__)
                                         indexDeployVariables:
@@ -158,9 +156,7 @@ stages:
                                             __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
                                             __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
                                             __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
-                                            __VUE_APP_SAFELITE_HOP___: $(__VUE_APP_SAFELITE_HOP__)
+                                            __VUE_APP_SAFELITE_HOP__: $(__VUE_APP_SAFELITE_HOP__)
-                                            __VUE_APP_PAYPAL_SUCCESS_URL__: $(__VUE_APP_PAYPAL_SUCCESS_URL__)
-                                            __VUE_APP_PAYPAL_CANCEL_URL__: $(__VUE_APP_PAYPAL_CANCEL_URL__)
                                             __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
                                             __VUE_APP_MY_ACCOUNT__: $(__VUE_APP_MY_ACCOUNT__)
                                         indexDeployVariables:
@@ -219,9 +215,7 @@ stages:
                                             __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
                                             __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
                                             __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
-                                            __VUE_APP_SAFELITE_HOP___: $(__VUE_APP_SAFELITE_HOP__)
+                                            __VUE_APP_SAFELITE_HOP__: $(__VUE_APP_SAFELITE_HOP__)
-                                            __VUE_APP_PAYPAL_SUCCESS_URL__: $(__VUE_APP_PAYPAL_SUCCESS_URL__)
-                                            __VUE_APP_PAYPAL_CANCEL_URL__: $(__VUE_APP_PAYPAL_CANCEL_URL__)
                                             __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
                                         indexDeployVariables:
                                             __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
@@ -279,9 +273,7 @@ stages:
                                             __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
                                             __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
                                             __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
-                                            __VUE_APP_SAFELITE_HOP___: $(__VUE_APP_SAFELITE_HOP__)
+                                            __VUE_APP_SAFELITE_HOP__: $(__VUE_APP_SAFELITE_HOP__)
-                                            __VUE_APP_PAYPAL_SUCCESS_URL__: $(__VUE_APP_PAYPAL_SUCCESS_URL__)
-                                            __VUE_APP_PAYPAL_CANCEL_URL__: $(__VUE_APP_PAYPAL_CANCEL_URL__)
                                             __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
                                         indexDeployVariables:
                                             __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)

jest.config.js

@@ -27,7 +27,7 @@ module.exports = {
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      statements: 78,
+      statements: 77,
     },
   },
   // Uncomment this to avoid the massive amount of warnings we are getting for onSubmit and onInvalidSubmit

src/constants/application-config.js

@@ -11,6 +11,16 @@ const applicationConfig = {
     SITE_ENTRY_TRIGGER_VALUE: "FixMyGlass",
     CASH_PARENT_ACCOUNT_NUMBER: 167132,
     MY_ACCOUNT: process.env.VUE_APP_MY_ACCOUNT,
+    PAYPAL_SUCCESS_URL:
+        location.protocol +
+        "//" +
+        location.host +
+        "/fmg/?fmgPage=payment-pia-return&src=concept-funnel",
+    PAYPAL_CANCEL_URL:
+        location.protocol +
+        "//" +
+        location.host +
+        "/fmg/?fmgPage=payment-method&src=concept-funnel",
 };
 
 export { applicationConfig };

src/constants/store-actions.js

@@ -87,6 +87,7 @@ const storeActions = {
     SAVE_SERVICE_LOCATION_TECH_NOTES: "saveServiceLocationTechNotes",
     SAVE_WORK_ORDER_FLAG: "saveWorkOrderFlag",
     SAVE_PIA_ERROR_CODE: "savePiaErrorCode",
+    SAVE_PIA_WORK_ORDER: "savePiaWorkOrder",
 };
 
 export { storeActions };

src/constants/store-mutations.js

@@ -1,6 +1,7 @@
 const storeMutations = {
     UPDATE_WORK_ORDER_FLAG: "updateWorkOrderFlag",
     UPDATE_PIA_ERROR_CODE: "updatePiaErrorCode",
+    UPDATE_PIA_WORK_ORDER: "updatePiaWorkOrder",
 
     // VEHICLE MUTATIONS
     UPDATE_YEAR: "updateYear",

src/digital-components/button-question/button-question.vue

@@ -223,6 +223,10 @@ export default {
                 classes = "package-wrapper";
             }
 
+            if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {
+                classes += " two-list-card-width";
+            }
+
             return classes;
         },
         buttonsInfo() {
@@ -304,18 +308,9 @@ export default {
 </script>
 
 <style lang="scss">
-.vehicle-damage {
+.two-list-card-width {
-    .button-question {
+    width: 33.33333333%;
-        @include media-breakpoint-up(md) {
+    flex: 0 0 auto;
-            .col-12 {
-                width: 66.66666667%;
-            }
-            .col {
-                width: 33.3333333%;
-                flex: 0 0 auto;
-            }
-        }
-    }
 }
 .button-question-overflow {
     height: calc(100vh - 274px);

src/digital-components/date-picker/date-picker.vue

@@ -58,7 +58,7 @@
                 loaderColor="blue"
                 loaderPosition="center" />
             <div class="row form-test-error" id="date-of-month-error">
-                <ErrorMessage name="date-of-month" class="small mt-1"></ErrorMessage>
+                <ErrorMessage :name="customComponentId" class="small mt-1"></ErrorMessage>
             </div>
             <button
                 v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton"

src/fmg-components/cart/cart.vue

@@ -7,7 +7,7 @@
                 @click="toggleClass()">
                 <div class="col d-flex justify-content-between">
                     <span class="label">Amount Due</span
-                    ><span class="label amount-due">$321.00</span>
+                    ><span class="label amount-due">${{ amountDue }}</span>
                 </div>
             </div>
             <div class="price-table">
@@ -76,6 +76,7 @@ export default {
         return {
             isActive: false,
             packageWithVAPS: false,
+            amountDue: this.getAmountDue(),
         };
     },
     methods: {
@@ -108,6 +109,9 @@ export default {
 
             return price;
         },
+        getAmountDue() {
+            return baseMixin.methods.getAmountDue(this.storeLineItems);
+        },
         removeItem(item) {
             this.$emit("cart-remove", item);
         },

src/fmg-components/funnel-header/menu-modal/menu-modal.vue

@@ -102,7 +102,7 @@ export default {
         },
         show() {
             this.isActive = true;
-            this.scrollToPageTop();
+            window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
         },
         hide() {
             var self = this;

src/fmg-components/layouts/questions-page-layout/questions-page-layout.vue

@@ -26,7 +26,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <div v-for="(questionsDatum, i) in questionsData" :key="questionsDatum.key">
                         <questionChain
                             ref="questionChain"

src/layouts/confirmation/confirmation.vue

@@ -1,56 +1,57 @@
 <template>
-    <div class="page-container-grouped-styles position-relative">
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+        <div class="page-container-grouped-styles position-relative">
-        <div>{{ workOrderNumber }}</div>
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-        <div>
+            <div>
-            <div class="container-fluid pb-2">
+                <div class="container-fluid pb-2">
-                <div class="row justify-content-md-center">
+                    <div class="row justify-content-md-center">
-                    <div class="col-md-6 col-xl-4">
+                        <div class="col-md-6 col-xl-4">
-                        <div class="header-container">
+                            <div class="header-container">
-                            <img :src="ScheduleConfirmationImage" />
+                                <img :src="ScheduleConfirmationImage" />
-                            <span v-html="ScheduleConfirmationText"></span>
+                                <span v-html="ScheduleConfirmationText"></span>
-                        </div>
-                        <div class="main">
-                            <div>
-                                <vehicleBanner
-                                    cmsWidgetName="VehicleBannerWidget"
-                                    :displayGenericVehicleImage="false" />
                             </div>
-                            <div class="scheduleText">
+                            <div class="main">
-                                <p>{{ this.getScheduleDate() }}</p>
+                                <div>
-                                <p>{{ this.getScheduleTime() }}</p>
+                                    <vehicleBanner
-                            </div>
+                                        cmsWidgetName="VehicleBannerWidget"
-
+                                        :displayGenericVehicleImage="false" />
-                            <div class="calendar-section">
-                                <div class="add-to-calendar">
-                                    <button>
-                                        <span class="add-to-calendar-span">
-                                            <img
-                                                src="~@/assets/img/icons/add-to-calendar.svg"
-                                                class="add-to-calendar-img" />
-                                            <span class="add-to-calendar-text"
-                                                >Add to calendar</span
-                                            ></span
-                                        >
-                                    </button>
                                 </div>
+                                <div class="scheduleText">
+                                    <p>{{ this.ScheduleDateFormatted }}</p>
+                                    <p>{{ this.ScheduleTimeFormatted }}</p>
+                                </div>
+
+                                <div class="calendar-section">
+                                    <div class="add-to-calendar">
+                                        <button>
+                                            <span class="add-to-calendar-span">
+                                                <img
+                                                    src="~@/assets/img/icons/add-to-calendar.svg"
+                                                    class="add-to-calendar-img" />
+                                                <span class="add-to-calendar-text"
+                                                    >Add to calendar</span
+                                                ></span
+                                            >
+                                        </button>
+                                    </div>
+                                </div>
+                                <div
+                                    class="appoinmenttext"
+                                    v-html="this.AppointmentWordingText"></div>
                             </div>
-                            <div
+                            <div class="emailtext" v-html="this.ConfirmationEmailText"></div>
-                                class="appoinmenttext"
+                            <navbar
-                                v-html="this.getAppointmentWordingText()"></div>
+                                cmsWidgetName="FunnelFooterWidget"
+                                ref="navbar"
+                                isBackButtonHidden="true"
+                                @ForwardClicked="forwardButtonAction"
+                                :buttonSize="true" />
                         </div>
-                        <div class="emailtext" v-html="this.getConfirmationEmailText()"></div>
-                        <navbar
-                            cmsWidgetName="FunnelFooterWidget"
-                            ref="navbar"
-                            isBackButtonHidden="true"
-                            @ForwardClicked="forwardButtonAction"
-                            :buttonSize="true" />
                     </div>
                 </div>
             </div>
         </div>
-    </div>
+    </Form>
 </template>
 <script>
 // Components
@@ -62,6 +63,7 @@ import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { applicationConfig } from "@/constants/application-config.js";
+import { Form } from "vee-validate";
 import store from "@/store";
 
 import {
@@ -98,7 +100,10 @@ export default {
             return this.getCmsContent("ScheduleConfirmationWidget", "Image");
         },
         ConfirmationEmailText() {
-            return this.getCmsContent("ConfirmationEmailWidget", "BodyText");
+            return this.getCmsContent("ConfirmationEmailWidget", "BodyText")
+                .replaceAll("{custom:MY_ACCOUNT_URL}", applicationConfig.MY_ACCOUNT)
+                .replaceAll("&lt;", "<")
+                .replaceAll("&gt;", ">");
         },
         ScheduleDate() {
             return store.getters.order.schedule.date;
@@ -148,17 +153,50 @@ export default {
         ProviderZipCode() {
             return store.getters.order.serviceLocation.provider.address.zipCode;
         },
-        Year() {
+        AppointmentWordingText() {
-            return store.getters.order.vehicle.year;
+            if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
+                return this.MobileWordingText.replaceAll(
+                    "{custom:ADDRESS}",
+                    this.ServiceLocationFullAddress
+                );
+            } else if (this.AppointmentType == AppointmentTypeStrings.DROP_OFF) {
+                return this.DropOffWordingText.replaceAll(
+                    "{custom:ADDRESS}",
+                    this.ProviderFullAddress
+                );
+            } else {
+                return this.InShopWordingText.replaceAll(
+                    "{custom:ADDRESS}",
+                    this.ProviderFullAddress
+                );
+            }
         },
-        Make() {
+        ServiceLocationFullAddress() {
-            return store.getters.order.vehicle.make;
+            return `${this.ServiceLocationAddress2 ? this.ServiceLocationAddress2 + "," : ""} ${
+                this.ServiceLocationAddress
+            },<br/> ${this.ServiceLocationCity}, ${this.ServiceLocationState} ${
+                this.ServiceLocationZipCode
+            }`;
         },
-        Model() {
+        ProviderFullAddress() {
-            return store.getters.order.vehicle.model;
+            return `${this.ProviderAddress},<br/> ${this.ProviderCity}, ${this.ProviderState} ${this.ProviderZipCode}`;
         },
-        Email() {
+        ScheduleDateFormatted() {
-            return store.getters.order.customer.emailAddress;
+            const scheduleDate = new Date(this.ScheduleDate);
+            return `${getFullDayName(scheduleDate)}, ${getFullMonthName(
+                scheduleDate
+            )} ${scheduleDate.getDate()}`;
+        },
+        ScheduleTimeFormatted() {
+            if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
+                return `Between ${get12HourTimeMobileFormat(
+                    this.ScheduleStartTime
+                )} - ${get12HourTimeMobileFormat(this.ScheduleEndTime)}`;
+            } else if (this.AppointmentType == AppointmentTypeStrings.DROP_OFF) {
+                return `Drop off before 9:30 AM`;
+            } else {
+                return `at ${get12HourTimeFormat(this.ScheduleStartTime)}`;
+            }
         },
     },
     data() {
@@ -192,57 +230,17 @@ export default {
 
             // Schedule
             const schedule = store.getters.order.schedule;
-            const scheduleReqs = !!(schedule.date && schedule.startTime); //removing schedule.endTime  for testing
+            const scheduleReqs = !!(schedule.date && schedule.startTime && schedule.endTime);
 
             return serviceLocationReqs && scheduleReqs;
         },
         forwardButtonAction() {
             window.location.assign("//www.safelite.com/");
         },
-        getScheduleDate() {
-            const scheduleDate = new Date(this.ScheduleDate);
-            return `${getFullDayName(scheduleDate)}, ${getFullMonthName(
-                scheduleDate
-            )} ${scheduleDate.getDate()}`;
-        },
-        getScheduleTime() {
-            if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
-                return `Between ${get12HourTimeMobileFormat(
-                    this.ScheduleStartTime
-                )} - ${get12HourTimeMobileFormat(this.ScheduleEndTime)}`;
-            } else if (this.AppointmentType == AppointmentTypeStrings.DROP_OFF) {
-                return `Drop off before 9:30 AM`;
-            } else {
-                return `at ${get12HourTimeFormat(this.ScheduleStartTime)}`;
-            }
-        },
-
-        getAppointmentWordingText() {
-            const ymm = `${this.Year} ${this.Make} ${this.Model}`;
-            if (this.AppointmentType == AppointmentTypeStrings.MOBILE) {
-                const address = `${
-                    this.ServiceLocationAddress2 ? this.ServiceLocationAddress2 + "," : ""
-                } ${this.ServiceLocationAddress},<br/> ${this.ServiceLocationCity}, ${
-                    this.ServiceLocationState
-                } ${this.ServiceLocationZipCode}`;
-                return this.MobileWordingText.replace("#ADDRESS", address).replace("#YMM", ymm);
-            } else if (this.AppointmentType == AppointmentTypeStrings.DROP_OFF) {
-                const address = `${this.ProviderAddress},<br/> ${this.ProviderCity}, ${this.ProviderState} ${this.ProviderZipCode}`;
-                return this.DropOffWordingText.replace("#ADDRESS", address).replace("#YMM", ymm);
-            } else {
-                const address = `${this.ProviderAddress},<br/> ${this.ProviderCity}, ${this.ProviderState} ${this.ProviderZipCode}`;
-                return this.InShopWordingText.replace("#ADDRESS", address).replace("#YMM", ymm);
-            }
-        },
-        getConfirmationEmailText() {
-            return this.ConfirmationEmailText.replace("#EMAIL", this.Email)
-                .replace("#MY_ACCOUNT_URL", applicationConfig.MY_ACCOUNT)
-                .replace(/&lt;/g, "<")
-                .replace(/&gt;/g, ">");
-        },
     },
     components: {
         funnelHeader,
+        Form,
         navbar,
         vehicleBanner,
     },

src/layouts/customer-details/customer-details.vue

@@ -7,7 +7,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="my-5" />
                     <textboxQuestion
                         class="mb-4"

src/layouts/estimate/estimate.vue

@@ -8,7 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
                     <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
                     <div v-if="!skipVin">

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

@@ -8,7 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
@@ -110,6 +110,7 @@ import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { Form } from "vee-validate";
+import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 
 export default {
     name: "paymentMethod",
@@ -202,7 +203,56 @@ export default {
     },
     methods: {
         arePagePrerequisitesValid() {
-            return true;
+            // Line Items
+            const packageReqs = !!store.getters.order.lineItems.supportingItems;
+
+            // Service Location
+            const serviceLocation = store.getters.order.serviceLocation;
+            const mobileReqs = !!(
+                serviceLocation.address &&
+                serviceLocation.city &&
+                serviceLocation.state &&
+                serviceLocation.zipCode
+            );
+
+            const providerLocation = serviceLocation.provider.address;
+            const dropOffInshopReqs = !!(
+                providerLocation.streetAddress &&
+                providerLocation.city &&
+                providerLocation.state &&
+                providerLocation.zipCode
+            );
+
+            const isMobile = serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE;
+
+            const serviceLocationReqs =
+                (isMobile && mobileReqs) || (!isMobile && dropOffInshopReqs);
+
+            // Insurance
+            const isInsuranceSet = store.getters.order.payment.isInsurance !== null;
+
+            // Schedule
+            const schedule = store.getters.order.schedule;
+            const scheduleReqs = !!(
+                schedule.date &&
+                schedule.startTime &&
+                (!isMobile || schedule.endTime) &&
+                schedule.jobMaxMinutes &&
+                schedule.jobMinMinutes
+            );
+
+            // Customer
+            const customer = store.getters.order.customer;
+            const customerReqs = !!(
+                customer.firstName &&
+                customer.lastName &&
+                customer.phoneNumber &&
+                customer.emailAddress
+            );
+
+            return (
+                packageReqs && serviceLocationReqs && isInsuranceSet && scheduleReqs && customerReqs
+            );
         },
         openModalAction(modalName) {
             this.$refs[modalName].openModal();
@@ -243,32 +293,29 @@ export default {
             );
         },
         async ccdPayment() {
-            //leaving site, clear any save session promises that we will not be able to resolve when we return
+            this.piaSetup("cc");
-            this.$refs.loadingModal.showModal();
-            this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false);
-            await this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
-            await this.dispatchStoreAction(storeActions.SAVE_PAY_NOW_TYPE, "cc", false);
-            this.$router.navigateWithoutSaving(
-                this.navigationScenarios.CLICKED_PAY_NOW,
-                this.$route
-            );
         },
         async paypal() {
-            //leaving site, clear any save session promises that we will not be able to resolve when we return
+            this.piaSetup("pp");
-            this.$refs.loadingModal.showModal();
-            this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false);
-            await this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
-            await this.dispatchStoreAction(storeActions.SAVE_PAY_NOW_TYPE, "pp", false);
-            this.$router.navigateWithoutSaving(
-                this.navigationScenarios.CLICKED_PAY_NOW,
-                this.$route
-            );
         },
         async afterpay() {
+            this.piaSetup("ap");
+        },
+        async piaSetup(payNowType) {
             this.$refs.loadingModal.showModal();
-            this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false);
+
+            //leaving site, clear any save session promises that we will not be able to resolve when we return
             await this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
-            await this.dispatchStoreAction(storeActions.SAVE_PAY_NOW_TYPE, "ap", false);
+            await this.dispatchStoreAction(storeActions.SAVE_PAY_NOW_TYPE, payNowType, false);
+
+            // make sure pia error codes are reset, and get a pia work order in delete status
+            this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false);
+            this.dispatchStoreAction(storeActions.SAVE_PIA_WORK_ORDER, true);
+
+            if (!store.getters.order.workOrderNumber) {
+                await submitWorkOrder({ pageNameToLog: "payment-method" });
+            }
+
             this.$router.navigateWithoutSaving(
                 this.navigationScenarios.CLICKED_PAY_NOW,
                 this.$route

src/layouts/payment-pia-return/payment-pia-return.vue

@@ -1,5 +1,7 @@
 <template>
-    <div class="confirm" ref="confirm" @click="forwardButtonAction"></div>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
+        <loadingModal notFullScreen ref="loadingModal" />
+    </Form>
 </template>
 
 <script>
@@ -8,17 +10,20 @@ import { queryStrings } from "@/constants/query-strings";
 import { getQuerystringParameter } from "@/helpers/querystring-helper";
 import { storeActions } from "@/constants/store-actions";
 import baseMixin from "@/mixins/base-mixin.js";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import { Form } from "vee-validate";
 
 export default {
     name: "payment-pia-return",
     async mounted() {
+        this.$refs.loadingModal.showModal();
         const piaError = getQuerystringParameter(queryStrings.ERROR);
         const token = getQuerystringParameter(queryStrings.TOKEN);
         const payerId = getQuerystringParameter(queryStrings.PAYERID);
 
         if (piaError) {
             baseMixin.methods.dispatchStoreAction(
-                storeActions.SAVE_PAYPAL_ERROR_CODE,
+                storeActions.SAVE_PIA_ERROR_CODE,
                 piaError,
                 false
             );
@@ -26,7 +31,7 @@ export default {
         } else {
             if (token && payerId) {
                 baseMixin.methods.dispatchStoreAction(
-                    storeActions.SAVE_PAYPAL_ERROR_CODE,
+                    storeActions.SAVE_PIA_ERROR_CODE,
                     null,
                     false
                 );
@@ -35,11 +40,18 @@ export default {
                     true,
                     false
                 );
+
+                // Final work order submit after returning from PIA.
+                await this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
                 await submitWorkOrder({ pageNameToLog: "payment-pia-return" });
-                this.$refs.confirm.click();
+                this.$refs.loadingModal.isModalVisible = false;
+                this.$router.navigateWithoutSaving(
+                    this.navigationScenarios.PIA_SUCCESS,
+                    this.$route
+                );
             } else {
                 baseMixin.methods.dispatchStoreAction(
-                    storeActions.SAVE_PAYPAL_ERROR_CODE,
+                    storeActions.SAVE_PIA_ERROR_CODE,
                     piaError,
                     false
                 );
@@ -55,7 +67,10 @@ export default {
             this.$router.navigateWithoutSaving(this.navigationScenarios.PIA_SUCCESS, this.$route);
         },
     },
-    components: {},
+    components: {
+        loadingModal,
+        Form,
+    },
 };
 </script>
 

src/layouts/payment/payment.vue

@@ -98,7 +98,7 @@
 
         <input type="hidden" name="sgtotalamount" :value="displayAmount" />
         <input type="hidden" name="totalAmountDecimal" :value="totalAmount" />
-        <input type="hidden" name="lineItems" :value="lineItems" />
+        <input type="hidden" name="lineItems" :value="piaLineItems" />
 
         <input type="hidden" name="sgdiscountstrikethruamount" value="" />
 
@@ -152,7 +152,7 @@
             value="https://fixmyglasstest.safelite.com/FixMyGlass/Payment.aspx?error=ccTimeout" />
 
         <input type="hidden" name="sgTransactionType" value="authorization" />
-        <input type="hidden" name="amount" :value="totalAmount" />
+        <input type="hidden" name="amount" :value="amountDue" />
         <input type="hidden" name="ctu" :value="ctu" />
         <input type="hidden" name="orderNumber" :value="workOrderNumber" />
 
@@ -185,6 +185,8 @@ import store from "@/store";
 import { externalUrls } from "@/router/router-constants/externalUrl-values";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
+import { applicationConfig } from "@/constants/application-config";
+import baseMixin from "@/mixins/base-mixin.js";
 
 // Validation
 import { Form } from "vee-validate";
@@ -194,8 +196,8 @@ export default {
     data() {
         return {
             checkoutUrl: externalUrls.SAFELITE_HOP,
-            payPalSuccessUrl: externalUrls.PAYPAL_SUCCESS_URL,
+            payPalSuccessUrl: applicationConfig.PAYPAL_SUCCESS_URL,
-            payPalCancelUrl: externalUrls.PAYPAL_CANCEL_URL,
+            payPalCancelUrl: applicationConfig.PAYPAL_CANCEL_URL,
             paymentType: this.getPaymentType(),
             authToken: "",
             authSignature: "",
@@ -212,12 +214,11 @@ export default {
             phoneNumber: store.getters.order.customer.phoneNumber,
             ctu: store.getters.order.serviceLocation.zipCodeCtu,
             referralCorrelationId: store.getters.order.referralCorrelationId,
-            // TODO: replace these
+            workOrderNumber: this.getWOrkOrderNumber(),
-            workOrderNumber: Math.floor(Math.random() * 90000) + 10000,
+            invoiceNumber: this.getInvoiceNumber(),
-            invoiceNumber: Math.floor(Math.random() * 90000) + 10000,
+            totalAmount: this.getAmountDue(),
-            totalAmount: "321.00", // TODO: get from cart?
+            displayAmount: this.getDisplayAmountDue(),
-            displayAmount: "$321.00", // TODO: get from cart?
+            piaLineItems: this.getPiaLineItems(),
-            lineItems: "Labor|189.99|1||Repair supplies|7.99|1",
             sgHeaderline1: this.getHeaderLine1(),
             sgHeaderline2: this.getHeaderLine2(),
             paypalPayment: this.isPaypal(),
@@ -248,6 +249,25 @@ export default {
             // TODO
             return true;
         },
+        getWOrkOrderNumber() {
+            if (store.getters.order.workOrderNumber) {
+                var items = store.getters.order.workOrderNumber.split("-");
+                return items[1];
+            }
+
+            // no work order, set pia error and return
+            this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, "NO WORK ORDER", false);
+            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        getInvoiceNumber() {
+            if (store.getters.order.workOrderNumber) {
+                return store.getters.order.workOrderNumber.replace("-", "");
+            }
+
+            // no work order, set pia error and return
+            this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, "NO WORK ORDER", false);
+            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
         getAddress1() {
             return store.getters.order.serviceLocation.address
                 ? store.getters.order.serviceLocation.address
@@ -288,6 +308,27 @@ export default {
             }
             return "";
         },
+        getPiaLineItems() {
+            const itemsClone = { ...store.getters.order.lineItems };
+            delete itemsClone.serverData;
+
+            var itemsForPia = "";
+            for (var propertyName in itemsClone) {
+                for (var item in itemsClone[propertyName]) {
+                    var amount =
+                        +itemsClone[propertyName][item].laborAmount +
+                        +itemsClone[propertyName][item].sellingPrice;
+                    itemsForPia += itemsClone[propertyName][item].partType + "|" + amount + "|1|";
+                }
+            }
+            return itemsForPia;
+        },
+        getAmountDue() {
+            return baseMixin.methods.getAmountDue(store.getters.order.lineItems);
+        },
+        getDisplayAmountDue() {
+            return baseMixin.methods.getDisplayAmountDue(store.getters.order.lineItems);
+        },
         isPaypal() {
             if (this.getPaymentType() == "pp") {
                 return true;

src/layouts/quote/quote.vue

@@ -8,7 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />

src/layouts/review/review.vue

@@ -8,7 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
@@ -177,8 +177,7 @@ export default {
             // damageReqs handles checking for damage, even though it is also required for this section.
             const packageReqs = !!(
                 (damage.isRepair || lineItems.glassParts) &&
-                lineItems.supportingItems &&
+                lineItems.supportingItems
-                lineItems.vaps
             );
 
             // Service Location
@@ -208,7 +207,7 @@ export default {
             const scheduleReqs = !!(
                 schedule.date &&
                 schedule.startTime &&
-                schedule.endTime &&
+                (!isMobile || schedule.endTime) &&
                 schedule.jobMaxMinutes &&
                 schedule.jobMinMinutes
             );

src/layouts/schedule/schedule.vue

@@ -8,7 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
                     <template v-if="ChangeShopLink.length">
                         <textBlock

src/layouts/service-location/service-location.vue

@@ -8,7 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6">
+                <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
 
                     <serviceZipModalQuestion
@@ -60,7 +60,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center appointment-type">
-                <div class="col-md-6 col-xxl-4">
+                <div class="col-md-6">
                     <appointmentTypeQuestion
                         v-model="selectedAppointmentType"
                         v-show="isAppointmentTypeDisplayed"
@@ -74,7 +74,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <mobileLocationModalQuestions
                         customComponentId="mobileLocationQuestions"
                         v-if="selectedAppointmentType === 'Mobile'"
@@ -532,6 +532,20 @@ export default {
 </script>
 
 <style lang="scss">
+.appointment-type-question {
+    .button-question {
+        .col {
+            padding: 0 0.5rem;
+            @include media-breakpoint-up(md) {
+                padding: 0 0.75rem;
+            }
+            @include media-breakpoint-up(xl) {
+                width: 33.3333333%;
+                flex: 0 0 auto;
+            }
+        }
+    }
+}
 .question-text {
     & > span {
         text-align: center;

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -24,13 +24,16 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-8 col-xl-6 col-xxl-4">
+                <div class="col-md-6">
                     <damageLocationQuestion
                         ref="damageLocation"
                         cmsWidgetName="DamageLocationQuestion"
                         v-model="selectedDamageLocations"
                         groupName="DamageLocationQuestion" />
-
+                </div>
+            </div>
+            <div class="row justify-content-md-center">
+                <div class="col-md-6 col-xl-4">
                     <windshieldOptions
                         class="windshield-options"
                         ref="windshieldOptions"
@@ -547,14 +550,10 @@ export default {
 </script>
 
 <style lang="scss">
-.vehicle-damage {
+.replace-options-question {
-    .windshield-options {
+    .two-list-card-width {
-        @include media-breakpoint-up(md) {
+        width: 100%;
-            .col {
+        flex: 0 auto;
-                flex: 0 0 auto;
-                width: 33.33333333%;
-            }
-        }
     }
 }
 </style>

src/layouts/vehicle-parts/vehicle-parts.vue

@@ -31,7 +31,7 @@
                     </div>
                 </div>
                 <div class="row justify-content-md-center">
-                    <div class="col-md-6 col-xl-4 col-xxl-3">
+                    <div class="col-md-6 col-xl-4">
                         <div v-for="(item, i) in PartsOrQuestions" :key="i">
                             <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
                             <hr v-if="i > 0" />

src/layouts/vehicle/vehicle.vue

@@ -7,7 +7,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="siteSubHeader" />
                     <vehicleQuestion
                         ref="vehicleYearQuestion"

src/layouts/vin-lookup/vin-lookup.vue

@@ -8,7 +8,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center">
-                <div class="col-md-6 col-xl-4 col-xxl-3">
+                <div class="col-md-6 col-xl-4">
                     <vehicleBanner
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />

src/mixins/base-mixin.js

@@ -115,6 +115,25 @@ export default {
         getTotalLineItemPrice(lineItem) {
             return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
         },
+        getDisplayAmountDue(lineItems) {
+            return this.getAmountDue(lineItems).toLocaleString("en-US", {
+                style: "currency",
+                currency: "USD",
+            });
+        },
+        getAmountDue(lineItems) {
+            // TODO: verify tax is included in lineitems
+            // Price everything in lineitems except the server data string
+            var amountDue = 0;
+            const itemsClone = { ...lineItems };
+            delete itemsClone.serverData;
+            for (var propertyName in itemsClone) {
+                amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(
+                    itemsClone[propertyName]
+                );
+            }
+            return amountDue;
+        },
         scrollToPageTop() {
             const container = document.getElementsByClassName("page-container-grouped-styles")[0];
             container.scrollTo({ top: 0, left: 0, behavior: "smooth" });

src/router/router-constants/externalUrl-values.js

@@ -1,8 +1,6 @@
 const externalUrls = {
     HERITAGE_FUNNEL: process.env.VUE_APP_HERITAGE_FUNNEL,
     SAFELITE_HOP: process.env.VUE_APP_SAFELITE_HOP,
-    PAYPAL_SUCCESS_URL: process.env.VUE_APP_PAYPAL_SUCCESS_URL,
-    PAYPAL_CANCEL_URL: process.env.VUE_APP_PAYPAL_CANCEL_URL,
 };
 
 export { externalUrls };

src/store/index.js

@@ -109,6 +109,7 @@ const getDefaultState = () => {
             referralCorrelationId: null,
             eon: null,
             workOrderNumber: null,
+            createDeleteStatusWorkOrderForPia: false,
         },
         applicationUser: {
             eventBus: [],
@@ -223,6 +224,9 @@ export const mutations = {
     updatePiaErrorCode(state, piaErrorCode) {
         state.order.payment.piaErrorCode = piaErrorCode;
     },
+    updatePiaWorkOrder(state, piaWorkOrder) {
+        state.order.createDeleteStatusWorkOrderForPia = piaWorkOrder;
+    },
     updateWorkOrderNumber(state, workOrderNumber) {
         state.order.workOrderNumber = workOrderNumber;
     },
@@ -1618,6 +1622,7 @@ export const actions = {
                     referralNumber: order.referralNumber?.toString(),
                     referralSequenceNumber: order.referralSequenceNumber,
                     eon: order.eon,
+                    createDeleteStatusWorkOrderForPia: order.createDeleteStatusWorkOrderForPia,
                 },
             },
             logApiCall: true,
@@ -1694,6 +1699,9 @@ export const actions = {
     savePiaErrorCode(context, piaErrorCode) {
         context.commit(storeMutations.UPDATE_PIA_ERROR_CODE, piaErrorCode);
     },
+    savePiaWorkOrder(context, piaWorkOrder) {
+        context.commit(storeMutations.UPDATE_PIA_WORK_ORDER, piaWorkOrder);
+    },
 
     // Business domain actions
 

src/styles/common-styles.scss

@@ -5,6 +5,7 @@ body {
     background-color: #fff;
     color: #4d5151;
     .container-fluid {
+        padding: 0 1.5rem;
         .prevent-squish {
             overflow-x: unset;
         }
@@ -40,9 +41,11 @@ body {
         overflow: hidden;
     }
 }
-//Disable scroll of main container when modal is open
 .modal-open {
-    .page-container-grouped-styles {
+    .container-fluid {
-        overflow: hidden;
+        &.page-container-grouped-styles {
+            overflow: hidden;
+            height: auto;
+        }
     }
 }

vue.config.js

@@ -6,8 +6,6 @@ process.env.VUE_APP_MY_ACCOUNT = "https://myaccountdev.safelite.com/";
 
 //process.env.VUE_APP_SAFELITE_HOP = "http://localhost:60966/fmgCheckoutEmbedded.aspx";
 process.env.VUE_APP_SAFELITE_HOP = "https://sv2-safelitehop-sys.safelite.com/fmgCheckoutEmbedded.aspx";
-process.env.VUE_APP_PAYPAL_SUCCESS_URL = "http://localhost:8080/fmg/?fmgPage=payment-pia-return&src=concept-funnel";
-process.env.VUE_APP_PAYPAL_CANCEL_URL = "http://localhost:8080/fmg/?fmgPage=payment-method&src=concept-funnel";
 
 // GA & GTM
 process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY =

vue.release.config.js

@@ -5,8 +5,6 @@ process.env.VUE_APP_CURRENT_ENVIRONMENT = "__VUE_APP_CURRENT_ENVIRONMENT__";
 process.env.VUE_APP_MY_ACCOUNT = "__VUE_APP_MY_ACCOUNT__";
 
 process.env.VUE_APP_SAFELITE_HOP = "__VUE_APP_SAFELITE_HOP__";
-process.env.VUE_APP_PAYPAL_SUCCESS_URL = "__VUE_APP_PAYPAL_SUCCESS_URL__";
-process.env.VUE_APP_PAYPAL_CANCEL_URL = "__VUE_APP_PAYPAL_CANCEL_URL__";
 
 // GA & GTM
 process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY = "__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__";