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

Feature/csr 1392
2023-10-10 11:38:58 -04:00 · 2023-10-10 11:38:58 -04:00 · 3141cadbb1
commit 3141cadbb1
parent 68803c6d12 b76256dbc1
10 changed files with 168 additions and 78 deletions
--- a/jest.config.js
+++ b/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
--- a/src/constants/store-actions.js
+++ b/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 };
--- a/src/constants/store-mutations.js
+++ b/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",
--- a/src/fmg-components/cart/cart.vue
+++ b/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);
        },
--- a/src/layouts/confirmation/confirmation.vue
+++ b/src/layouts/confirmation/confirmation.vue
@ -1,54 +1,57 @@
 <template>
-    <div class="page-container-grouped-styles position-relative">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-        <div>{{ workOrderNumber }}</div>
-        <div>
-            <div class="container-fluid pb-2">
-                <div class="row justify-content-md-center">
-                    <div class="col-md-6 col-xl-4">
-                        <div class="header-container">
-                            <img :src="ScheduleConfirmationImage" />
-                            <span v-html="ScheduleConfirmationText"></span>
-                        </div>
-                        <div class="main">
-                            <div>
-                                <vehicleBanner
-                                    cmsWidgetName="VehicleBannerWidget"
-                                    :displayGenericVehicleImage="false" />
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
+        <div class="page-container-grouped-styles position-relative">
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+            <div>
+                <div class="container-fluid pb-2">
+                    <div class="row justify-content-md-center">
+                        <div class="col-md-6 col-xl-4">
+                            <div class="header-container">
+                                <img :src="ScheduleConfirmationImage" />
+                                <span v-html="ScheduleConfirmationText"></span>
                            </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 class="main">
+                                <div>
+                                    <vehicleBanner
+                                        cmsWidgetName="VehicleBannerWidget"
+                                        :displayGenericVehicleImage="false" />
                                </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,
    },
--- a/src/layouts/payment-method/payment-method.vue
+++ b/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.$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
-            );
+            this.piaSetup("cc");
        },
        async paypal() {
-            //leaving site, clear any save session promises that we will not be able to resolve when we return
-            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
-            );
+            this.piaSetup("pp");
        },
        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
--- a/src/layouts/payment-pia-return/payment-pia-return.vue
+++ b/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>

--- a/src/layouts/payment/payment.vue
+++ b/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: Math.floor(Math.random() * 90000) + 10000,
-            invoiceNumber: Math.floor(Math.random() * 90000) + 10000,
-            totalAmount: "321.00", // TODO: get from cart?
-            displayAmount: "$321.00", // TODO: get from cart?
-            lineItems: "Labor|189.99|1||Repair supplies|7.99|1",
+            workOrderNumber: this.getWOrkOrderNumber(),
+            invoiceNumber: this.getInvoiceNumber(),
+            totalAmount: this.getAmountDue(),
+            displayAmount: this.getDisplayAmountDue(),
+            piaLineItems: this.getPiaLineItems(),
            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;
--- a/src/mixins/base-mixin.js
+++ b/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" });
--- a/src/store/index.js
+++ b/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