Merge pull request #1391 from Safelite/feature/CSR-1392

Feature/csr 1392

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/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/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">
@@ -84,6 +84,7 @@ export default {
             //availableVaps: [], TO DO Do we need this?
             packageWithVAPS: false,
             // packageLevel: "",
+            amountDue: this.getAmountDue(),
         };
     },
     methods: {
@@ -121,6 +122,9 @@ export default {
 
             return price;
         },
+        getAmountDue() {
+            return baseMixin.methods.getAmountDue(this.storeLineItems);
+        },
         removeItem(item) {
             this.$emit("cart-remove", item);
         },

src/layouts/confirmation/confirmation.vue

@@ -1,54 +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.ScheduleDateFormatted }}</p>
+                                <div>
-                                <p>{{ this.ScheduleTimeFormatted }}</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 class="appoinmenttext" v-html="this.AppointmentWordingText"></div>
+                            <div class="emailtext" v-html="this.ConfirmationEmailText"></div>
+                            <navbar
+                                cmsWidgetName="FunnelFooterWidget"
+                                ref="navbar"
+                                isBackButtonHidden="true"
+                                @ForwardClicked="forwardButtonAction"
+                                :buttonSize="true" />
                         </div>
-                        <div class="emailtext" v-html="this.ConfirmationEmailText"></div>
-                        <navbar
-                            cmsWidgetName="FunnelFooterWidget"
-                            ref="navbar"
-                            isBackButtonHidden="true"
-                            @ForwardClicked="forwardButtonAction"
-                            :buttonSize="true" />
                     </div>
                 </div>
             </div>
         </div>
-    </div>
+    </Form>
 </template>
 <script>
 // Components
@@ -60,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 {
@@ -236,6 +240,7 @@ export default {
     },
     components: {
         funnelHeader,
+        Form,
         navbar,
         vehicleBanner,
     },

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

@@ -231,32 +231,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" />
 
@@ -186,6 +186,7 @@ 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";
@@ -213,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(),
@@ -249,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
@@ -289,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/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/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