Merge pull request #1599 from Safelite/rlsmerge/2023.12.07-to-develop

Rlsmerge/2023.12.07 to develop

azure-pipelines.yml

@@ -217,6 +217,7 @@ stages:
                                             __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
                                             __VUE_APP_SAFELITE_HOP__: $(__VUE_APP_SAFELITE_HOP__)
                                             __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
+                                            __VUE_APP_MY_ACCOUNT__: $(__VUE_APP_MY_ACCOUNT__)
                                         indexDeployVariables:
                                             __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
                                             __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
@@ -275,6 +276,7 @@ stages:
                                             __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
                                             __VUE_APP_SAFELITE_HOP__: $(__VUE_APP_SAFELITE_HOP__)
                                             __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
+                                            __VUE_APP_MY_ACCOUNT__: $(__VUE_APP_MY_ACCOUNT__)
                                         indexDeployVariables:
                                             __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
                                             __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)

src/digital-components/modal/modal.vue

@@ -6,6 +6,7 @@
         :id="modalId"
         tabindex="-1"
         aria-labelledby="ModalComponentLabel"
+        @keypress.enter="onEnter"
         aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
@@ -81,6 +82,12 @@ export default {
                 this.resetButtonStyle();
             }
         },
+        async onEnter(e) {
+            e.preventDefault();
+            document.getElementById("modalbtn")?.focus();
+            this.$refs.modalButtonMain.clicked();
+            document.getElementById(this.modalId)?.focus();
+        },
         resetButtonStyle() {
             this.$refs.modalButtonMain.resetButtonStyle();
         },

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

@@ -11,7 +11,6 @@
             :headerText="modalHeaderText"
             :onModalClosedCallback="onModalClosed"
             :onModalOpenedCallback="focusOnPromoInput"
-            @keypress.enter="onEnter"
             :footerButtonText="modalFooterText"
             @footer-button-event="addPromoCode">
             <promoQuestion
@@ -163,10 +162,6 @@ export default {
         openModal() {
             this.modal.openModal();
         },
-        onEnter(e) {
-            e.preventDefault();
-            this.modal.validateAndEmit();
-        },
         closeModal() {
             this.modal.closeModal();
         },

src/layouts/payment/payment.vue

@@ -35,10 +35,6 @@
 
                     <hr class="mb-5" />
 
-                    <paymentSwitch
-                        cmsWidgetName="PaymentMethodWidget"
-                        :paymentType="paymentType"
-                        @switch-payment-event="switchPIAMethod" />
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         isForwardActionDisabled="true"
@@ -47,6 +43,8 @@
                         @back-clicked="backButtonAction" />
                 </div>
             </div>
+
+            <div v-if="shouldBlockInteraction" class="ui-block" @click="supressClick"></div>
         </div>
     </Form>
 
@@ -178,7 +176,6 @@ import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import cart from "@/fmg-components/cart/cart";
-import paymentSwitch from "./payment-switch/payment-switch.vue";
 
 import { storeActions } from "@/constants/store-actions";
 import store from "@/store";
@@ -231,6 +228,8 @@ export default {
             piaLineItems: "",
             lineItems: [],
             availableVaps: [],
+
+            shouldBlockInteraction: false,
         };
     },
     directives: {
@@ -398,9 +397,6 @@ export default {
             }
             return "";
         },
-        switchPaymentText() {
-            return this.getCmsContent("PaymentMethodWidget", "QuestionText");
-        },
         damageInfo() {
             return this.$store.getters.damage;
         },
@@ -561,10 +557,6 @@ export default {
             window.location = applicationConfig.PIA_CANCEL_URL;
             //this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
-        switchPIAMethod(payMethod) {
-            this.paymentType = payMethod;
-            this.submitHopForm();
-        },
         submitHopForm() {
             this.$nextTick(() => {
                 this.$refs.hopForm.submit();
@@ -598,19 +590,29 @@ export default {
             if (event.data.indexOf("afterpayClosed") > -1) {
                 this.backButtonAction();
             }
+            if (event.data.indexOf("creditCardSubmit") > -1) {
+                this.setUIBlock(true);
+            }
         },
         setIFrameListener() {
             window.addEventListener("message", (event) =>
                 this.handleIFrameContentWindwMessage(event)
             );
         },
+        setUIBlock(val) {
+            this.shouldBlockInteraction = val;
+        },
+        supressClick(event) {
+            if (this.shouldBlockInteraction) {
+                event.stopPropagation();
+            }
+        },
     },
     components: {
         funnelHeader,
         navbar,
         loadingModal,
         cart,
-        paymentSwitch,
     },
 };
 </script>
@@ -625,4 +627,13 @@ export default {
 #pageLoadingModal {
     background-color: red;
 }
+
+.ui-block {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+}
 </style>

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -19,7 +19,6 @@
         :onModalOpenedCallback="onModalOpened"
         :onModalClosedCallback="onModalClosed"
         :footerButtonText="modalFooterText"
-        @keypress.enter="onEnter"
         @footer-button-event="setZipCode">
         <serviceZipQuestion
             ref="serviceZipQuestion"
@@ -109,10 +108,6 @@ export default {
             const input = document.getElementById(this.serviceZipCodeTextInputId);
             input?.focus();
         },
-        focusOnModalButton() {
-            const modalButton = document.getElementById("modalbtn");
-            modalButton?.focus();
-        },
         copyModel(modelToCopy) {
             return {
                 state: modelToCopy.state,
@@ -122,12 +117,6 @@ export default {
         openModal() {
             this.modal.openModal();
         },
-        onEnter(e) {
-            e.preventDefault();
-            this.focusOnModalButton();
-            this.modal.validateAndEmit();
-            this.focusOnZipInput();
-        },
         closeModal() {
             this.modal.closeModal();
         },