CASH-2880 | Add intercept overlay to page

src/layouts/scheduling/scheduling.vue

@@ -1,5 +1,6 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
+        <interceptOverlay v-if="isLoadingDates" />
         <loadingModal notFullScreen ref="loadingModal" />
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
         <div class="container page-container-grouped-styles">
@@ -62,6 +63,7 @@ import datePicker from "@/layouts/scheduling/date-picker/date-picker";
 import mobileSchedulingCard from "@/layouts/scheduling/mobile-scheduling-card/mobile-scheduling-card";
 import inshopSchedulingCard from "@/layouts/scheduling/inshop-scheduling-card/inshop-scheduling-card";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import interceptOverlay from "@/ux-components/intercept-overlay/intercept-overlay";
 import store from "@/store";
 import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -377,6 +379,7 @@ export default {
         mobileSchedulingCard,
         inshopSchedulingCard,
         loadingModal,
+        interceptOverlay,
     },
 };
 </script>

src/ux-components/intercept-overlay/intercept-overlay.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="intercept-overlay" aria-hidden="true"></div>
+</template>
+
+<script>
+export default {
+    name: "intercept-overlay",
+};
+</script>
+
+<style lang="scss" scoped>
+.intercept-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    cursor: default;
+}
+</style>