CASH-3105 - Add Recalibration acknowledgement modal

src/layouts/scheduling/scheduling.spec.js

@@ -28,6 +28,7 @@ jest.mock("@/store", () => ({
             damage: { isRepair: false },
             lineItems: { glassParts: [] },
             policy: { isItac: false, isNoComp: false },
+            isRecalAcknowledgedForScheduling: "",
         },
         lineItems: { supportingItems: [] },
         applicationUser: {
@@ -413,6 +414,56 @@ describe("scheduling.vue", () => {
         });
     });
 
+    describe("forwardButtonAction (recal acknowledgement)", () => {
+        test("opens recal modal and does not navigate when required", async () => {
+            store.getters.order.lineItems = {
+                glassParts: [
+                    {
+                        partType: "WINDSHIELD",
+                        requiresRecalibration: true,
+                        canSafeliteRecalibrate: false,
+                    },
+                ],
+            };
+            const { wrapper } = setupMocks();
+            wrapper.vm.$refs.navbar.removeLoader = jest.fn();
+            wrapper.vm.$refs.recalAckModal.openModal = jest.fn();
+            await wrapper.setData({ isRecalAcknowledgedForScheduling: "" });
+
+            await wrapper.vm.forwardButtonAction();
+
+            expect(wrapper.vm.$refs.recalAckModal.openModal).toHaveBeenCalled();
+            expect(wrapper.vm.$router.navigateWithSaving).not.toHaveBeenCalled();
+            wrapper.unmount();
+            store.getters.order.lineItems = { glassParts: [] };
+        });
+
+        test("navigates forward after recal acknowledgement is saved", async () => {
+            const { wrapper } = setupMocks();
+            await wrapper.setData({ isRecalAcknowledgedForScheduling: "Yes" });
+
+            await wrapper.vm.forwardButtonAction();
+
+            expect(store.dispatch).toHaveBeenCalledWith(
+                "saveIsRecalAcknowledgedForScheduling",
+                "Yes"
+            );
+            expect(wrapper.vm.$router.navigateWithSaving).toHaveBeenCalled();
+            wrapper.unmount();
+        });
+
+        test("onRecalAcknowledged sets acknowledgement and continues forward", async () => {
+            const { wrapper } = setupMocks();
+            wrapper.vm.forwardButtonAction = jest.fn();
+
+            wrapper.vm.onRecalAcknowledged("Yes");
+
+            expect(wrapper.vm.isRecalAcknowledgedForScheduling).toBe("Yes");
+            expect(wrapper.vm.forwardButtonAction).toHaveBeenCalled();
+            wrapper.unmount();
+        });
+    });
+
     describe("in-shop Maps link", () => {
         const address = {
             city: "Lewis Center",

src/layouts/scheduling/scheduling.vue

@@ -84,6 +84,12 @@
                 </div>
             </div>
         </div>
+        <recalAckModal
+            modalWidgetName="RecalAckModalWidget"
+            agreementWidgetName="RecalAgreementQuestionWidget"
+            groupName="recalAckGroup"
+            @recalAcknowledged="onRecalAcknowledged"
+            ref="recalAckModal" />
     </Form>
 </template>
 
@@ -98,15 +104,21 @@ import inshopSchedulingCard from "@/layouts/scheduling/inshop-scheduling-card/in
 import interceptOverlay from "@/ux-components/intercept-overlay/intercept-overlay";
 import waitlistQuestion from "@/layouts/scheduling/waitlist-question/waitlist-question";
 import schedulingZipSearch from "@/layouts/scheduling/scheduling-zip-search/scheduling-zip-search";
+import recalAckModal from "@/layouts/schedule/recal-ack-modal/recal-ack-modal.vue";
 import textLink from "@/ux-components/text-link/text-link";
 import store from "@/store";
 import { storeActions } from "@/constants/store-actions";
-import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants";
+import {
+    AppointmentTypeStrings,
+    PREMIUM_FEE_PART_TYPE,
+    RECAL_ACK_YES,
+} from "@/constants/schedule-constants";
 import { isDropOffRouteCode } from "@/layouts/schedule/helpers/schedule-helper";
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper";
+import { partTypeStrings } from "@/constants/part-type-strings";
 import {
     flushPagePrereqsLogs,
     hasServiceZipInfo,
@@ -394,6 +406,8 @@ export default {
             zipSearchCode: store.getters.order.serviceLocation.zipCode ?? "",
             datePickerKey: 0,
             billToAccountNumber: store.getters.order.payment?.billToAccountNumber ?? null,
+            isRecalAcknowledgedForScheduling:
+                store.getters.order.isRecalAcknowledgedForScheduling ?? "",
         };
     },
     methods: {
@@ -731,9 +745,20 @@ export default {
             );
         },
         async forwardButtonAction() {
+            if (this.shouldShowRecalAckModal()) {
+                this.$refs.navbar.removeLoader();
+                this.$refs.recalAckModal.openModal();
+                return;
+            }
+
             const selectedScheduling = this.selectedScheduling;
             const selectedDate = this.selectedDate;
 
+            await store.dispatch(
+                storeActions.SAVE_IS_RECAL_ACKNOWLEDGED_FOR_SCHEDULING,
+                this.isRecalAcknowledgedForScheduling
+            );
+
             const appointmentType = this.getInShopOrDropOffApptType(selectedScheduling);
             const selectedProvider = this.getSelectedProvider(appointmentType, selectedScheduling);
             const serviceLocation = store.getters.order.serviceLocation;
@@ -826,6 +851,23 @@ export default {
                 );
             }
         },
+        shouldShowRecalAckModal() {
+            if (this.isRecalAcknowledgedForScheduling === RECAL_ACK_YES) {
+                return false;
+            }
+
+            const glassParts = store.getters.order.lineItems?.glassParts ?? [];
+            return glassParts.some(
+                (part) =>
+                    part.partType === partTypeStrings.WINDSHIELD &&
+                    part.requiresRecalibration === true &&
+                    part.canSafeliteRecalibrate === false
+            );
+        },
+        onRecalAcknowledged(isAcknowledged) {
+            this.isRecalAcknowledgedForScheduling = isAcknowledged;
+            this.forwardButtonAction();
+        },
     },
     components: {
         funnelHeader,
@@ -838,6 +880,7 @@ export default {
         interceptOverlay,
         waitlistQuestion,
         schedulingZipSearch,
+        recalAckModal,
         textLink,
     },
 };