Merge pull request #1416 from Safelite/feature/csr-1465

Feature/csr 1465 + 1464 + 1389 tech review/demo

src/constants/payment-method-constants.js

@@ -5,9 +5,3 @@ export const paymentMethods = {
     PAYPAL: "Paypal",
     AFTERPAY: "Afterpay",
 };
-
-export const paymentTimes = {
-    NONE: null,
-    ADVANCE: "Advance",
-    LATER: "Later",
-};

src/constants/store-actions.js

@@ -80,7 +80,7 @@ const storeActions = {
     SAVE_MOLDING_QUESTION_ANSWERS: "saveMoldingQuestionAnswers",
     SAVE_CAPABILITY_QUESTION_ANSWERS: "saveCapabilityQuestionAnswers",
     SAVE_PAYMENT_TYPE: "savePaymentType",
-    SAVE_PAY_NOW_TYPE: "savePayNowType",
+    SAVE_PAYMENT_METHOD_CHOICE: "savePaymentMethodChoice",
     SAVE_PARENT_ACCOUNT_NUMBER: "saveParentAccountNumber",
     SAVE_SUPPORTING_ITEMS: "saveSupportingItems",
     SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING:

src/constants/store-mutations.js

@@ -50,7 +50,8 @@ const storeMutations = {
     UPDATE_IS_INSURANCE: "updateIsInsurance",
     UPDATE_SAVED_SESSION_ID: "updateSavedSessionId",
     UPDATE_CRM_CUSTOMER_ID: "updateCrmCustomerId",
-    UPDATE_PAY_NOW_TYPE: "updatePayNowType",
+    UPDATE_IS_PIA: "updateIsPia",
+    UPDATE_PIA_TYPE: "updatePiaType",
     WORK_ORDER_NUMBER: "updateWorkOrderNumber",
 
     // EVENT BUS MUTATIONS
@@ -68,6 +69,7 @@ const storeMutations = {
     RESET_SERVICE_LOCATION_PROVIDER: "resetServiceLocationProvider",
     RESET_SERVICE_LOCATION_MOBILE_ADDRESS: "resetServiceLocationMobileAddress",
     RESET_SCHEDULE: "resetSchedule",
+    RESET_PAYMENT_METHOD_CHOICE: "resetPaymentMethodChoice",
 
     // OTHER MUTATIONS
     UPDATE_PAGE_DATA: "updatePageData",

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

@@ -8,6 +8,7 @@
             :questionText="paymentMethodQuestionText"
             :answers="paymentMethodAnswerData"
             isRequired
+            :validationRules="validationRules"
             v-model="selectedMethod"
             textPosition="text-start" />
     </div>
@@ -27,6 +28,7 @@ export default {
     },
     props: {
         modelValue: String,
+        validationRules: String,
     },
     methods: {
         getAnswersNullSafe(widgetName) {

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

@@ -13,7 +13,16 @@
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
 
-                    <funnelSubHeader class="mb-5" cmsWidgetName="FunnelSubHeaderWidget" />
+                    <funnelSubHeader
+                        class="mb-5"
+                        cmsWidgetName="FunnelSubHeaderWidget"
+                        leftAlignHeader />
+
+                    <p v-if="isPiaDisabled" class="fw-normal no-pia-disclaimer">
+                        <span>{{ noPiaDisclaimer }}</span>
+                    </p>
+
+                    <hr />
 
                     <cart
                         :damage="damageInfo"
@@ -41,7 +50,8 @@
                     <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
                     <paymentMethodQuestion
                         v-if="!isPiaDisabled"
-                        v-model="paymentMethodInternalModel" />
+                        v-model="paymentMethodInternalModel"
+                        validationRules="option-required" />
 
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
@@ -78,8 +88,13 @@ import { paymentMethods } from "@/constants/payment-method-constants";
 import { experimentSettings } from "@/constants/experiments";
 
 import { Form } from "vee-validate";
+import { defineRule } from "vee-validate";
+import { required } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 
+defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
+
 export default {
     name: "paymentMethod",
     async beforeRouteEnter(to, from, next) {
@@ -162,7 +177,7 @@ export default {
             lineItems: [],
             availableLineItems: [],
             displayPaypalAlert: this.getPaypalAlert(),
-            paymentMethodInternalModel: null,
+            paymentMethodInternalModel: this.getPaymentMethodFromStore(),
         };
     },
     methods: {
@@ -224,6 +239,19 @@ export default {
         getPaypalAlert() {
             return store.getters.order.payment.piaErrorCode ? true : false;
         },
+        getPaymentMethodFromStore() {
+            const isPia = store.getters.order.payment.isPia;
+
+            if (isPia === null || isPia === undefined) {
+                return null;
+            }
+
+            if (isPia) {
+                return store.getters.order.payment.piaType;
+            } else {
+                return paymentMethods.LATER;
+            }
+        },
         vapsItemsSelectedAction(vapsItemsSelected) {
             this.cartItems = vapsItemsSelected;
         },
@@ -261,6 +289,11 @@ export default {
                 default:
                     this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false);
                     this.dispatchStoreAction(this.storeActions.SAVE_WORK_ORDER_FLAG, true, false);
+                    this.dispatchStoreAction(
+                        storeActions.SAVE_PAYMENT_METHOD_CHOICE,
+                        this.paymentMethod,
+                        false
+                    );
                     await submitWorkOrder({ pageNameToLog: "payment-method" });
                     this.$router.navigateWithoutSaving(
                         this.navigationScenarios.CLICKED_FORWARD,
@@ -282,7 +315,11 @@ export default {
 
             // since we're leaving the site for pia, 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, payNowType, false);
+            await this.dispatchStoreAction(
+                storeActions.SAVE_PAYMENT_METHOD_CHOICE,
+                this.paymentMethod,
+                false
+            );
 
             // make sure pia error codes are reset
             this.dispatchStoreAction(storeActions.SAVE_PIA_ERROR_CODE, null, false);
@@ -305,6 +342,9 @@ export default {
             // console.log("this.$store.getters.damage ", this.$store.getters.damage)
             return this.$store.getters.damage;
         },
+        noPiaDisclaimer() {
+            return this.getCmsContent("NoPiaDisclaimerWidget", "Text");
+        },
         customCtaCopy() {
             switch (this.paymentMethod) {
                 case paymentMethods.CREDIT_CARD:
@@ -353,3 +393,10 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+.no-pia-disclaimer {
+    color: $gray-550;
+    margin: 0;
+}
+</style>

src/layouts/payment/payment.vue

@@ -294,7 +294,7 @@ export default {
                 : store.getters.order.serviceLocation.provider.address.zipCode;
         },
         getPaymentType() {
-            return store.getters.order.payment.payNowType;
+            return store.getters.order.payment.piaType;
         },
         getHeaderLine1() {
             if (!this.isPaypal()) {

src/store/index.js

@@ -22,6 +22,7 @@ import {
     militaryToTwelveHourTime,
     getDisplayTextForDurationLength,
 } from "@/layouts/schedule/helpers/schedule-helper";
+import { paymentMethods } from "@/constants/payment-method-constants";
 
 import { getDateDifferenceInDays } from "@/helpers/date-helper";
 // Export State
@@ -94,7 +95,8 @@ const getDefaultState = () => {
                     coverageStatus: null,
                 },
                 parentAccountNumber: 0,
-                payNowType: "cc",
+                isPia: null,
+                piaType: null,
                 piaErrorCode: null,
                 inactivePromos: null,
             },
@@ -227,8 +229,11 @@ export const mutations = {
     updateIsInsurance(state, isInsurance) {
         state.order.payment.isInsurance = isInsurance;
     },
-    updatePayNowType(state, payNowType) {
+    updateIsPia(state, isPia) {
-        state.order.payment.payNowType = payNowType;
+        state.order.payment.isPia = isPia;
+    },
+    updatePiaType(state, piaType) {
+        state.order.payment.piaType = piaType;
     },
     updatePiaErrorCode(state, piaErrorCode) {
         state.order.payment.piaErrorCode = piaErrorCode;
@@ -418,6 +423,10 @@ export const mutations = {
         state.order.serviceLocation.state = null;
         state.order.serviceLocation.isVehicleProtected = null;
     },
+    resetPaymentMethodChoice(state) {
+        state.order.payment.isPia = null;
+        state.order.payment.piaType = null;
+    },
     // Misc Mutations
     updateStateWithOrderInformation(state, sessionInformation) {
         state.order.referralNumber = sessionInformation.order.referralNumber;
@@ -888,6 +897,7 @@ export const actions = {
         context.commit(storeMutations.RESET_SERVICE_LOCATION_PROVIDER);
 
         context.commit(storeMutations.RESET_SCHEDULE);
+        context.commit(storeMutations.RESET_PAYMENT_METHOD_CHOICE);
     },
 
     resetState(context) {
@@ -2012,10 +2022,16 @@ export const actions = {
 
     savePaymentType(context, isInsurance) {
         context.commit(storeMutations.UPDATE_IS_INSURANCE, isInsurance);
+
+        context.commit(storeMutations.RESET_PAYMENT_METHOD_CHOICE);
     },
 
-    savePayNowType(context, payNowType) {
+    savePaymentMethodChoice(context, paymentMethod) {
-        context.commit(storeMutations.UPDATE_PAY_NOW_TYPE, payNowType);
+        const isPia = paymentMethod !== paymentMethods.LATER;
+
+        context.commit(storeMutations.UPDATE_IS_PIA, isPia);
+
+        context.commit(storeMutations.UPDATE_PIA_TYPE, isPia ? paymentMethod : null);
     },
 
     saveParentAccountNumber(context, parentAccountNumber) {
@@ -2285,6 +2301,7 @@ export const actions = {
                     context.state.order.serviceLocation.appointmentType
             ) {
                 context.commit(storeMutations.RESET_SCHEDULE);
+                context.commit(storeMutations.RESET_PAYMENT_METHOD_CHOICE);
             }
         }