CSR-1390

V3 submit, provisional booking, credit card payments

src/constants/application-config.js

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

src/constants/query-strings.js

@@ -1,3 +1,4 @@
+// Note: querystring-helper will change all keys to lowercase so make sure they are here as well
 const queryStrings = {
     FMG_PAGE: "fmgPage",
     START_TYPE: "start_type",
@@ -6,6 +7,18 @@ const queryStrings = {
     ERROR: "error",
     TOKEN: "token",
     PAYERID: "payerid",
+    SUBSCRIPTIONID: "subscriptionid",
+    REFERRAL_SEQ_NUM: "referralseqnum",
+    CARD_EXPIRATION_MONTH: "card_expirationmonth",
+    CARD_EXPIRATION_YEAR: "card_expirationyear",
+    CARD_TYPE: "sgcardtype",
+    BILL_TO_POSTAL_CODE: "billto_postalcode",
+    BILL_TO_FIRST_NAME: "billto_firstname",
+    BILL_TO_LAST_NAME: "billto_lastname",
+    REFERENCE_NUMBER: "req_reference_number",
+    AUTH_CODE: "auth_code",
+    TRANSACTION_ID: "transaction_id",
+    TRANS_REFERENCE_NUMBER: "auth_trans_ref_no",
 };
 
 export { queryStrings };

src/constants/store-actions.js

@@ -92,6 +92,7 @@ const storeActions = {
     SAVE_WORK_ORDER_FLAG: "saveWorkOrderFlag",
     SAVE_PIA_ERROR_CODE: "savePiaErrorCode",
     SAVE_PIA_WORK_ORDER: "savePiaWorkOrder",
+    SAVE_CCTOKEN: "saveCCToken",
 };
 
 export { storeActions };

src/constants/store-mutations.js

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

src/fmg-components/nav-bar/nav-bar.vue

@@ -16,7 +16,8 @@
                     @click-event="buttonClick"
                     data-bs-target="#footerModal"
                     data-test-id="nav-bar-main-button"
-                    data-bs-dismiss="modal" />
+                    data-bs-dismiss="modal"
+                    v-if="!isSubmitHidden" />
             </div>
             <div v-if="!isBackButtonHidden" class="col-auto link-col py-1 text-break">
                 <textLink
@@ -44,6 +45,7 @@ export default {
         isBackButtonHidden: { type: Boolean, default: false },
         cmsWidgetName: String,
         buttonSize: { type: Boolean, default: false },
+        isSubmitHidden: { type: Boolean, default: false },
     },
     components: {
         textLink,

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

@@ -33,10 +33,10 @@
 
                     <div>
                         <alert
-                            ref="paypalErrorAlert"
+                            ref="piaErrorAlert"
                             class="my-4"
-                            v-if="displayPaypalAlert"
+                            v-if="displayPiaAlert"
-                            cmsWidgetName="PaypalErrorAlertWidget"
+                            cmsWidgetName="PIAErrorAlertWidget"
                             alertClass="alert-danger"
                             v-bind:isDismissible="false" />
                     </div>
@@ -175,8 +175,8 @@ export default {
 
             lineItems: [],
             availableLineItems: [],
-            displayPaypalAlert: this.getPaypalAlert(),
             paymentMethodInternalModel: this.getPaymentMethodFromStore(),
+            displayPiaAlert: this.getPiaAlert(),
         };
     },
     methods: {
@@ -235,7 +235,7 @@ export default {
         openModal(modalName) {
             this.$refs[modalName].openModal();
         },
-        getPaypalAlert() {
+        getPiaAlert() {
             return store.getters.order.payment.piaErrorCode ? true : false;
         },
         getPaymentMethodFromStore() {
@@ -338,7 +338,6 @@ export default {
     },
     computed: {
         damageInfo() {
-            // console.log("this.$store.getters.damage ", this.$store.getters.damage)
             return this.$store.getters.damage;
         },
         noPiaDisclaimer() {

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

@@ -9,6 +9,7 @@ import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js"
 import { queryStrings } from "@/constants/query-strings";
 import { getQuerystringParameter } from "@/helpers/querystring-helper";
 import { storeActions } from "@/constants/store-actions";
+import store from "@/store";
 import baseMixin from "@/mixins/base-mixin.js";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { Form } from "vee-validate";
@@ -17,11 +18,16 @@ export default {
     name: "payment-pia-return",
     async mounted() {
         this.$refs.loadingModal.showModal();
+        // from paypal
         const piaError = getQuerystringParameter(queryStrings.ERROR);
         const token = getQuerystringParameter(queryStrings.TOKEN);
         const payerId = getQuerystringParameter(queryStrings.PAYERID);
 
+        // from credit card
+        const subscriptionID = getQuerystringParameter(queryStrings.SUBSCRIPTIONID);
+
         if (piaError) {
+            console.log("Error during payment: " + piaError);
             baseMixin.methods.dispatchStoreAction(
                 storeActions.SAVE_PIA_ERROR_CODE,
                 piaError,
@@ -30,32 +36,24 @@ export default {
             this.$router.navigateWithoutSaving(this.navigationScenarios.PIA_ERROR, this.$route);
         } else {
             if (token && payerId) {
-                baseMixin.methods.dispatchStoreAction(
+                await this.processPaypalResponse();
-                    storeActions.SAVE_PIA_ERROR_CODE,
-                    null,
-                    false
-                );
-                baseMixin.methods.dispatchStoreAction(
-                    storeActions.SAVE_WORK_ORDER_FLAG,
-                    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.loadingModal.isModalVisible = false;
-                this.$router.navigateWithoutSaving(
-                    this.navigationScenarios.PIA_SUCCESS,
-                    this.$route
-                );
             } else {
-                baseMixin.methods.dispatchStoreAction(
+                if (subscriptionID) {
-                    storeActions.SAVE_PIA_ERROR_CODE,
+                    await this.processCreditCardResponse(subscriptionID);
-                    piaError,
+                } else {
-                    false
+                    console.log(
-                );
+                        "Error during payment: " + token + " : " + payerId + " : " + subscriptionID
-                this.$router.navigateWithoutSaving(this.navigationScenarios.PIA_ERROR, this.$route);
+                    );
+                    baseMixin.methods.dispatchStoreAction(
+                        storeActions.SAVE_PIA_ERROR_CODE,
+                        piaError,
+                        false
+                    );
+                    this.$router.navigateWithoutSaving(
+                        this.navigationScenarios.PIA_ERROR,
+                        this.$route
+                    );
+                }
             }
         }
     },
@@ -63,6 +61,68 @@ export default {
         arePagePrerequisitesValid() {
             return true;
         },
+        async processPaypalResponse() {
+            baseMixin.methods.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false);
+            baseMixin.methods.dispatchStoreAction(storeActions.SAVE_WORK_ORDER_FLAG, true, false);
+
+            await this.saveAndSubmitWorkOrder();
+        },
+        async processCreditCardResponse(subscriptionID) {
+            baseMixin.methods.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false);
+            baseMixin.methods.dispatchStoreAction(storeActions.SAVE_WORK_ORDER_FLAG, true, false);
+
+            const referralSeqNum = getQuerystringParameter(queryStrings.REFERRAL_SEQ_NUM);
+            if (referralSeqNum != store.getters.order.referralSequenceNumber) {
+                console.log(
+                    "error: unknown ref:" +
+                        referralSeqNum +
+                        " " +
+                        store.getters.order.referralSequenceNumber
+                );
+                baseMixin.methods.dispatchStoreAction(
+                    storeActions.SAVE_PIA_ERROR_CODE,
+                    "unknown error",
+                    false
+                );
+                this.$router.navigateWithoutSaving(this.navigationScenarios.PIA_ERROR, this.$route);
+            } else {
+                const expMonth = getQuerystringParameter(queryStrings.CARD_EXPIRATION_MONTH);
+                const expYear = getQuerystringParameter(queryStrings.CARD_EXPIRATION_YEAR);
+                const cardType = getQuerystringParameter(queryStrings.CARD_TYPE);
+                const billToPostalCode = getQuerystringParameter(queryStrings.BILL_TO_POSTAL_CODE);
+                const billToFirstName = getQuerystringParameter(queryStrings.BILL_TO_FIRST_NAME);
+                const billToLastName = getQuerystringParameter(queryStrings.BILL_TO_LAST_NAME);
+                const referenceNumber = getQuerystringParameter(queryStrings.REFERENCE_NUMBER);
+                const authCode = getQuerystringParameter(queryStrings.AUTH_CODE);
+                const transactionId = getQuerystringParameter(queryStrings.TRANSACTION_ID);
+                const transReferenceNumber = getQuerystringParameter(
+                    queryStrings.TRANS_REFERENCE_NUMBER
+                );
+
+                var ccToken = {
+                    subscriptionId: subscriptionID,
+                    expMonth: expMonth,
+                    expYear: expYear,
+                    cardType: cardType,
+                    billToPostalCode: billToPostalCode,
+                    billToFirstName: billToFirstName,
+                    billToLastName: billToLastName,
+                    referenceNumber: referenceNumber,
+                    authCode: authCode,
+                    transactionId: transactionId,
+                    transReferenceNumber: transReferenceNumber,
+                };
+                baseMixin.methods.dispatchStoreAction(storeActions.SAVE_CCTOKEN, ccToken, false);
+                await this.saveAndSubmitWorkOrder();
+            }
+        },
+        async saveAndSubmitWorkOrder() {
+            // Final work order submit after returning from PIA.
+            await this.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
+            await submitWorkOrder({ pageNameToLog: "payment-pia-return" });
+            this.$refs.loadingModal.isModalVisible = false;
+            this.$router.navigateWithoutSaving(this.navigationScenarios.PIA_SUCCESS, this.$route);
+        },
         forwardButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.PIA_SUCCESS, this.$route);
         },

src/layouts/payment/payment.vue

@@ -1,31 +1,35 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal notFullScreen ref="loadingModal" />
-        <div class="page-container-grouped-styles">
+        <div class="container-fluid page-container-grouped-styles">
-            <funnelHeader cmsWidgetName="FunnelHeaderWidget" v-if="!isPaypal" />
+            <div class="row justify-content-center">
-            <funnelSubHeader
+                <div class="col-md-6">
-                class="mb-5"
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-                cmsWidgetName="FunnelSubHeaderWidget"
+                </div>
-                leftAlignHeader
-                v-if="!isPaypal" />
-            <hr class="mt-0" />
-            <div id="card-container">
-                <iframe
-                    ref="paymentFrame"
-                    class="hop-iframe payment-iframe"
-                    name="card-frame"
-                    id="card-frame"
-                    seamless
-                    scrolling="no">
-                </iframe>
             </div>
-            <div class="fade-on-route-transition sub-container make-tall">
+
-                <navbar
+            <div class="row justify-content-center">
-                    cmsWidgetName="FunnelFooterWidget"
+                <div class="col-md-6 col-xl-4">
-                    :isForwardActionDisabled="!meta.valid"
+                    <div id="card-container">
-                    :isBackButtonHidden="shouldHideBackButton"
+                        <iframe
-                    @back-clicked="backButtonAction"
+                            ref="paymentFrame"
-                    @ForwardClicked="forwardButtonAction" />
+                            class="hop-iframe payment-iframe"
+                            name="card-frame"
+                            id="card-frame"
+                            seamless
+                            scrolling="no">
+                        </iframe>
+                    </div>
+                    <div class="fade-on-route-transition sub-container make-tall">
+                        <navbar
+                            cmsWidgetName="FunnelFooterWidget"
+                            :isForwardActionDisabled="!meta.valid"
+                            :isBackButtonHidden="shouldHideBackButton"
+                            isSubmitHidden="true"
+                            @back-clicked="backButtonAction"
+                            @ForwardClicked="forwardButtonAction" />
+                    </div>
+                </div>
             </div>
         </div>
     </Form>
@@ -54,18 +58,9 @@
         <input type="hidden" name="styleSheetCode" :value="dynamicCSSUrl" />
         <input type="hidden" name="styleSheetCode2" :value="dynamicCSSUrl" />
 
-        <input
+        <input type="hidden" name="sgReceiptResponseURL" :value="piaResponseUrl" />
-            type="hidden"
+        <input type="hidden" name="sgDeclineResponseURL" :value="piaResponseUrl" />
-            name="sgReceiptResponseURL"
+        <input type="hidden" name="sgErrorResponseURL" :value="piaResponseUrl" />
-            value="https://fixmyglasstest.safelite.com/FixMyGlass/Payment/Success.aspx" />
-        <input
-            type="hidden"
-            name="sgDeclineResponseURL"
-            value="https://fixmyglasstest.safelite.com/FixMyGlass/Payment/Cancel.aspx" />
-        <input
-            type="hidden"
-            name="sgErrorResponseURL"
-            value="https://fixmyglasstest.safelite.com/FixMyGlass/Payment/Error.aspx" />
 
         <input type="hidden" name="sgheaderline1" :value="sgHeaderline1" />
         <input type="hidden" name="sgHeader1subtitle" value="" />
@@ -133,17 +128,11 @@
         <input type="hidden" name="sgWorkOrder" :value="workOrderNumber" />
         <input type="hidden" name="sgEmailAddress" :value="emailAddress" />
         <input type="hidden" name="paypalInvoiceNumber" :value="invoiceNumber" />
-        <input type="hidden" name="payPalSuccessUrl" :value="payPalSuccessUrl" />
+        <input type="hidden" name="paypalSuccessUrl" :value="piaResponseUrl" />
-        <input type="hidden" name="paypalCancelUrl" :value="payPalCancelUrl" />
+        <input type="hidden" name="paypalCancelUrl" :value="piaCancelUrl" />
 
-        <input
+        <input type="hidden" name="sgCCDeclineURL" :value="piaCancelUrl" />
-            type="hidden"
+        <input type="hidden" name="sgCCTimeoutURL" :value="piaCancelUrl" />
-            name="sgCCDeclineURL"
-            value="https://fixmyglasstest.safelite.com/FixMyGlass/Payment.aspx?error=ccDecline" />
-        <input
-            type="hidden"
-            name="sgCCTimeoutURL"
-            value="https://fixmyglasstest.safelite.com/FixMyGlass/Payment.aspx?error=ccTimeout" />
 
         <input type="hidden" name="sgTransactionType" value="authorization" />
         <input type="hidden" name="amount" :value="amountDue" />
@@ -171,7 +160,6 @@
 // Components
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
-import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 
 import { storeActions } from "@/constants/store-actions";
@@ -190,8 +178,8 @@ export default {
     data() {
         return {
             checkoutUrl: externalUrls.SAFELITE_HOP,
-            payPalSuccessUrl: applicationConfig.PAYPAL_SUCCESS_URL,
+            piaResponseUrl: applicationConfig.PIA_RESPONSE_URL,
-            payPalCancelUrl: applicationConfig.PAYPAL_CANCEL_URL,
+            piaCancelUrl: applicationConfig.PIA_CANCEL_URL,
             paymentType: this.getPaymentType(),
             authToken: "",
             authSignature: "",
@@ -257,7 +245,7 @@ export default {
 
             // 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);
+            this.backButtonAction();
         },
         getInvoiceNumber() {
             if (store.getters.order.workOrderNumber) {
@@ -266,7 +254,7 @@ export default {
 
             // 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);
+            this.backButtonAction();
         },
         getAddress1() {
             return store.getters.order.serviceLocation.address
@@ -367,7 +355,6 @@ export default {
     components: {
         funnelHeader,
         navbar,
-        funnelSubHeader,
         Form,
         loadingModal,
     },
@@ -375,13 +362,9 @@ export default {
 </script>
 
 <style lang="scss">
-.payment-iframe {
-    height: 100%;
-}
-
 .hop-iframe {
     position: relative;
-    min-height: 1300px;
+    min-height: 1350px;
     width: 100%;
     border: 0 none;
 }

src/store/index.js

@@ -99,6 +99,19 @@ const getDefaultState = () => {
                 piaType: null,
                 piaErrorCode: null,
                 inactivePromos: null,
+                ccToken: {
+                    subscriptionId: null,
+                    expMonth: null,
+                    expYear: null,
+                    cardType: null,
+                    billToPostalCode: null,
+                    billToFirstName: null,
+                    billToLastName: null,
+                    referenceNumber: null,
+                    authCode: null,
+                    transactionId: null,
+                    transReferenceNumber: null,
+                },
             },
             schedule: {
                 date: null,
@@ -244,6 +257,19 @@ export const mutations = {
     updateWorkOrderNumber(state, workOrderNumber) {
         state.order.workOrderNumber = workOrderNumber;
     },
+    updateCCToken(state, ccToken) {
+        state.order.payment.ccToken.subscriptionId = ccToken.subscriptionId;
+        state.order.payment.ccToken.expMonth = ccToken.expMonth;
+        state.order.payment.ccToken.expYear = ccToken.expYear;
+        state.order.payment.ccToken.cardType = ccToken.cardType;
+        state.order.payment.ccToken.billToPostalCode = ccToken.billToPostalCode;
+        state.order.payment.ccToken.billToFirstName = ccToken.billToFirstName;
+        state.order.payment.ccToken.billToLastName = ccToken.billToLastName;
+        state.order.payment.ccToken.referenceNumber = ccToken.referenceNumber;
+        state.order.payment.ccToken.authCode = ccToken.authCode;
+        state.order.payment.ccToken.transactionId = ccToken.transactionId;
+        state.order.payment.ccToken.transReferenceNumber = ccToken.transReferenceNumber;
+    },
     updateInsuranceVerifiedStatus(state, isVerified) {
         state.order.payment.insuranceCoverage.isVerified = isVerified;
     },
@@ -1618,6 +1644,19 @@ export const actions = {
                         isInsurance: order.payment.isInsurance,
                         parentAccountNumber: order.payment.parentAccountNumber,
                         inactivePromos: order.payment.inactivePromos,
+                        ccToken: {
+                            subscriptionId: order.payment.ccToken.subscriptionId,
+                            expMonth: order.payment.ccToken.expMonth,
+                            expYear: order.payment.ccToken.expYear,
+                            cardType: order.payment.ccToken.cardType,
+                            billToPostalCode: order.payment.ccToken.billToPostalCode,
+                            billToFirstName: order.payment.ccToken.billToFirstName,
+                            billToLastName: order.payment.ccToken.billToLastName,
+                            referenceNumber: order.payment.ccToken.referenceNumber,
+                            authCode: order.payment.ccToken.authCode,
+                            transactionId: order.payment.ccToken.transactionId,
+                            transReferenceNumber: order.payment.ccToken.transReferenceNumber,
+                        },
                     },
                     serviceLocation: {
                         streetAddress: order.serviceLocation.address,
@@ -1735,6 +1774,9 @@ export const actions = {
     savePiaWorkOrder(context, piaWorkOrder) {
         context.commit(storeMutations.UPDATE_PIA_WORK_ORDER, piaWorkOrder);
     },
+    saveCCToken(context, ccToken) {
+        context.commit(storeMutations.UPDATE_CCTOKEN, ccToken);
+    },
 
     // Business domain actions