From f18032d92ef7a7c9c65d105998f8e70c3dc11eac Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 30 Mar 2023 16:37:56 -0400
Subject: [PATCH 1/9] Initial iteration - added modals and some of the logic.

---
 .../service-location/service-location.vue     | 26 +++++++++++++++++++
 src/store/index.js                            |  4 +--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 69b4f4926..6c8ef58d1 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -25,6 +25,18 @@
                 cmsWidgetName="AlertMobileOnlyWidget"
                 v-if="displayServiceableMobileOnly"
                 alertClass="alert-warning" />
+            <alert
+                ref="alertRecalNoMobile"
+                class="my-4"
+                cmsWidgetName="AlertRecalNoMobileWidget"
+                v-if="displayRecalibrationWarning"
+                alertClass="alert-warning" />
+            <alert
+                ref="alertInshopOnly"
+                class="my-4"
+                cmsWidgetName="AlertInshopOnlyWidget"
+                v-if="displayServiceableInshopOnly"
+                alertClass="alert-warning" />
             <alert
                 ref="alertNoShops"
                 class="my-4"
@@ -56,6 +68,7 @@
                 validationRules="mobile-location-required"
                 hideInput
                 centerErrorMessage />
+            <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
             <funnel-footer
                 cmsWidgetName="FunnelFooterWidget"
                 ref="funnelFooter"
@@ -78,6 +91,7 @@ import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-heade
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { Form, defineRule } from "vee-validate";
 import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
 
 // Supporting files
 import baseMixin from "@/mixins/base-mixin.js";
@@ -217,6 +231,17 @@ export default {
                 return this.isGlassServiceableInshop;
             }
         },
+        displayRecalibrationWarning() {
+            //TODO: Check lineItems for static or dual recalibration.
+            return false;
+        },
+        displayServiceableInshopOnly() {
+            return (
+                !this.displayRecalibrationWarning &&
+                this.isServiceableInshop &&
+                !this.isServiceableMobile
+            );
+        },
         displayServiceableMobileOnly() {
             return this.isServiceableMobile && !this.isServiceableInshop;
         },
@@ -298,6 +323,7 @@ export default {
         Form,
         loadingModal,
         textboxQuestion,
+        contentGroupModal,
     },
 };
 </script>
diff --git a/src/store/index.js b/src/store/index.js
index 2dbc7b2cc..abcf231f0 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -931,8 +931,8 @@ export const actions = {
         return globalMethods.callMockHttpClient({
             method: endpoints.GetServiceabilityDetails.method,
             //TODO: Remove Mocky Endpoints
-            endpoint: "https://run.mocky.io/v3/59e1a644-cf16-4f08-8069-1ab2a1e38f79", // NoShopsAvailable
-            //endpoint: "https://run.mocky.io/v3/4fe1fb89-dd56-4e4a-9af2-96bd1ab77847", // ForcedInshop
+            //endpoint: "https://run.mocky.io/v3/59e1a644-cf16-4f08-8069-1ab2a1e38f79", // NoShopsAvailable
+            endpoint: "https://run.mocky.io/v3/4fe1fb89-dd56-4e4a-9af2-96bd1ab77847", // ForcedInshop
             //endpoint: "https://run.mocky.io/v3/e2eaa097-6ea5-4906-af53-901edaa94939", // ForcedMobile
             //endpoint: "https://run.mocky.io/v3/1811a1fe-12a7-48f3-939e-d10a9b77dd25", // All Options
         });

From 8daa078c299967c324a0dac4fc2abfd1185b600a Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Tue, 4 Apr 2023 15:11:38 -0400
Subject: [PATCH 2/9] Add text link rendering to alert + hook into opening
 modal.

---
 .../service-location/service-location.vue     |  6 ++++-
 src/ux-components/alert/alert.vue             | 23 ++++++++++++++++---
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 6c8ef58d1..846a1731e 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -30,6 +30,7 @@
                 class="my-4"
                 cmsWidgetName="AlertRecalNoMobileWidget"
                 v-if="displayRecalibrationWarning"
+                @text-link-clicked="openModalAction"
                 alertClass="alert-warning" />
             <alert
                 ref="alertInshopOnly"
@@ -233,7 +234,7 @@ export default {
         },
         displayRecalibrationWarning() {
             //TODO: Check lineItems for static or dual recalibration.
-            return false;
+            return true;
         },
         displayServiceableInshopOnly() {
             return (
@@ -311,6 +312,9 @@ export default {
         forwardButtonAction() {
             navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
         },
+        openModalAction(modalName) {
+            this.$refs[modalName].openModal();
+        },
     },
     components: {
         alert,
diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue
index cecbad90c..62c4b4d99 100644
--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@@ -11,12 +11,11 @@
         <template v-for="paragraph in splitAlertCopyForParagraphTag" :key="paragraph">
             <p
                 class="m-0 text-body small"
-                v-if="!doesCopyContainRouterLink(paragraph)"
+                v-if="!doesCopyContainRouterLink(paragraph) && !doesCopyContainTextLink(paragraph)"
                 v-html="paragraph"></p>
             <p class="m-0 text-body small" v-else>
                 <template v-for="copy in splitCopyOnCMSPlaceHolder(paragraph)" :key="copy">
-                    <span v-if="!doesCopyContainRouterLink(copy)" v-html="copy"></span>
-                    <span v-else>
+                    <span v-if="doesCopyContainRouterLink(copy)">
                         <router-link
                             :to="{
                                 query: { [pageQueryString]: `${getRouterLinkRouteFromCopy(copy)}` },
@@ -25,6 +24,18 @@
                             >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
                         >
                     </span>
+                    <span v-else-if="doesCopyContainTextLink(copy)">
+                        <textLink
+                            linkType="text"
+                            :text="getRouterLinkDisplayTextFromCopy(copy)"
+                            href="#!"
+                            @click-event="
+                                $emit('textLinkClicked', getRouterLinkRouteFromCopy(copy))
+                            "
+                            :data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)"
+                            aria-label="Modal window" />
+                    </span>
+                    <span v-else v-html="copy"></span>
                 </template>
             </p>
         </template>
@@ -40,11 +51,13 @@
 <script>
 import {
     doesCopyContainRouterLink,
+    doesCopyContainTextLink,
     splitCopyOnCMSPlaceHolder,
     getRouterLinkRouteFromCopy,
     getRouterLinkDisplayTextFromCopy,
     splitCMSCopyOnParagraphTag,
 } from "@/helpers/cms-content-helper";
+import textLink from "@/ux-components/text-link/text-link";
 import { applicationConfig } from "@/constants/application-config";
 
 export default {
@@ -96,6 +109,7 @@ export default {
     methods: {
         doesCopyContainRouterLink,
         splitCopyOnCMSPlaceHolder,
+        doesCopyContainTextLink,
         getRouterLinkRouteFromCopy,
         getRouterLinkDisplayTextFromCopy,
         ensureAlertIsInViewPort() {
@@ -120,6 +134,9 @@ export default {
     mounted() {
         this.ensureAlertIsInViewPort();
     },
+    components: {
+        textLink,
+    },
 };
 </script>
 

From f87a64380bd85d3ca58ecbb849dcaa6e7d3b720c Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Tue, 4 Apr 2023 16:38:49 -0400
Subject: [PATCH 3/9] Add recalibration-checking logic.

---
 src/layouts/service-location/service-location.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 846a1731e..577120c85 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -232,9 +232,13 @@ export default {
                 return this.isGlassServiceableInshop;
             }
         },
+        isDualOrStaticRecalibration() {
+            const supportingItems = store.getters.lineItems.supportingItems;
+            
+            return supportingItems.some((item) => item.partNumber === "RECAL STATIC" || item.partNumber === "RECAL DUAL");
+        },
         displayRecalibrationWarning() {
-            //TODO: Check lineItems for static or dual recalibration.
-            return true;
+            return this.isDualOrStaticRecalibration;
         },
         displayServiceableInshopOnly() {
             return (

From 572831254d60ee1e3a0bb7c245971f1fade06409 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Wed, 5 Apr 2023 08:57:01 -0400
Subject: [PATCH 4/9] Formatting

---
 src/layouts/service-location/service-location.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 577120c85..800f7ee52 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -234,8 +234,10 @@ export default {
         },
         isDualOrStaticRecalibration() {
             const supportingItems = store.getters.lineItems.supportingItems;
-            
-            return supportingItems.some((item) => item.partNumber === "RECAL STATIC" || item.partNumber === "RECAL DUAL");
+
+            return supportingItems.some(
+                (item) => item.partNumber === "RECAL STATIC" || item.partNumber === "RECAL DUAL"
+            );
         },
         displayRecalibrationWarning() {
             return this.isDualOrStaticRecalibration;

From fb0280fa1820e25a3c651a4f4e09dda54036073a Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 5 Apr 2023 10:56:34 -0400
Subject: [PATCH 5/9] CSR-1129: create schedule page, put date picker on it

---
 jest.config.js                                |   3 +-
 src/constants/error-messages.js               |   1 +
 .../date-picker/date-picker.vue               | 473 +++++++++---------
 src/router/index.js                           |   1 -
 src/router/router-constants/fmgPage-values.js |   1 +
 .../router-constants/navigation-scenarios.js  |   3 +
 src/router/router-constants/routing-table.js  |  13 +
 7 files changed, 260 insertions(+), 235 deletions(-)

diff --git a/jest.config.js b/jest.config.js
index ceeb6f781..3186939df 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -15,9 +15,10 @@ module.exports = {
     "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
     "!src/layouts/reveal/**/*.vue",
     "!src/ux-components/text-link/**/*.vue",
-    "!src/common-components/date-picker/**/*.vue", // Temp until unit tests completed
+    "!src/common-components/date-picker/**/*.vue", // git statuTemp until unit tests completed
     "!src/layouts/vin-lookup/**/*.vue", //Temporary for Quote page testing
     "!src/common-components/funnel-header/menu-modal/**/*.vue",
+    "!src/layouts/schedule/*.vue", // Temp test exclusion while in development
     // END
   ], // ! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
diff --git a/src/constants/error-messages.js b/src/constants/error-messages.js
index 3c3f776c1..810929d20 100644
--- a/src/constants/error-messages.js
+++ b/src/constants/error-messages.js
@@ -26,6 +26,7 @@ const errorMessages = {
     OPTION_REQUIRED: "Please select an option",
     VEHICLE_REQUIRED: "Please select a vehicle",
     MOBILE_LOCATION_REQUIRED: "Please enter your service address",
+    DATE_REQUIRED: "Please select a date",
 };
 
 export { errorMessages };
diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index e3b5ff5d1..813708b66 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="date-picker" :class="calendarViewDirection">
+    <div class="date-picker text-center" :class="calendarViewDirection">
         <fieldset v-if="months">
             <legend class="sr-only">Date Picker</legend>
             <div
@@ -51,7 +51,7 @@
         <button
             v-if="calendarViewDirection === 'future'"
             type="button"
-            class="btn-link"
+            class="btn btn-link"
             @click="goForward">
             View more dates
         </button>
@@ -371,92 +371,106 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.calendar-grid-container {
-    margin: 0 auto;
-    max-width: 414px;
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    justify-content: center;
-    align-items: center;
-    padding: 4px;
-
-    .grid-item {
-        text-align: center;
-        margin: 10%;
-
-        &.first-day-,
-        &.first-day-0 {
-            grid-column-start: 1;
-        }
-        &.first-day-1 {
-            grid-column-start: 2;
-        }
-        &.first-day-2 {
-            grid-column-start: 3;
-        }
-        &.first-day-3 {
-            grid-column-start: 4;
-        }
-        &.first-day-4 {
-            grid-column-start: 5;
-        }
-        &.first-day-5 {
-            grid-column-start: 6;
-        }
-        &.first-day-6 {
-            grid-column-start: 7;
-        }
-    }
-
-    .month-year {
-        grid-area: 1 / 1 / 2 / 5;
-        text-transform: uppercase;
-        font-weight: 300;
-        letter-spacing: 0.75px;
-    }
-    .legend {
-        grid-area: 1 / 5 / 2 / 8;
-        .legend-circle {
-            border-radius: 50%;
-            width: 16px;
-            height: 16px;
-            background-color: $blue-100;
-            border: 1px solid $blue;
-        }
-    }
-    .nav-back,
-    .nav-forward {
-        display: none;
-    }
-
-    .radio-wrapper {
-        position: relative;
-        display: flex;
+.date-picker {
+    .calendar-grid-container {
+        margin: 0 auto;
+        max-width: 414px;
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
         justify-content: center;
         align-items: center;
-        outline: none;
+        padding: 4px;
 
-        input[type="radio"] {
-            position: absolute; //override bootstrap
-            height: 0;
-            opacity: 0;
+        .grid-item {
+            text-align: center;
+            margin: 10%;
 
-            &:focus-visible + label {
-                box-shadow: 0 0 0 2.5px $blue;
+            &.first-day-,
+            &.first-day-0 {
+                grid-column-start: 1;
             }
+            &.first-day-1 {
+                grid-column-start: 2;
+            }
+            &.first-day-2 {
+                grid-column-start: 3;
+            }
+            &.first-day-3 {
+                grid-column-start: 4;
+            }
+            &.first-day-4 {
+                grid-column-start: 5;
+            }
+            &.first-day-5 {
+                grid-column-start: 6;
+            }
+            &.first-day-6 {
+                grid-column-start: 7;
+            }
+        }
 
-            &:focus + label,
-            &:checked:focus + label {
-                box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
-                background-color: $blue;
-                color: $white;
-                &.past-day {
-                    box-shadow: none;
-                    background-color: transparent;
-                    color: $gray-500;
-                    font-weight: normal;
+        .month-year {
+            grid-area: 1 / 1 / 2 / 5;
+            text-transform: uppercase;
+            font-weight: 300;
+            letter-spacing: 0.75px;
+        }
+        .legend {
+            grid-area: 1 / 5 / 2 / 8;
+            .legend-circle {
+                border-radius: 50%;
+                width: 16px;
+                height: 16px;
+                background-color: $blue-100;
+                border: 1px solid $blue;
+            }
+        }
+        .nav-back,
+        .nav-forward {
+            display: none;
+        }
+
+        .radio-wrapper {
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            outline: none;
+
+            input[type="radio"] {
+                position: absolute; //override bootstrap
+                height: 0;
+                opacity: 0;
+
+                &:focus-visible + label {
+                    box-shadow: 0 0 0 2.5px $blue;
                 }
-                &.current-day {
+
+                &:focus + label,
+                &:checked:focus + label {
+                    box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
+                    background-color: $blue;
+                    color: $white;
+                    &.past-day {
+                        box-shadow: none;
+                        background-color: transparent;
+                        color: $gray-500;
+                        font-weight: normal;
+                    }
+                    &.current-day {
+                        &:after {
+                            background-color: $white;
+                        }
+                        .first-day {
+                            color: $white;
+                        }
+                    }
+                }
+
+                &:checked + label {
+                    color: $white;
+                    background: $blue;
+                    box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue;
                     &:after {
                         background-color: $white;
                     }
@@ -466,169 +480,162 @@ export default {
                 }
             }
 
-            &:checked + label {
-                color: $white;
-                background: $blue;
-                box-shadow: 0 0 0 3px $white, 0 0 0 5.5px $blue;
-                &:after {
-                    background-color: $white;
-                }
-                .first-day {
-                    color: $white;
-                }
-            }
-        }
-
-        .first-day {
-            position: absolute;
-            font-size: 9px;
-            font-weight: 500;
-            color: $gray-600;
-            top: 0;
-            z-index: 1;
-        }
-
-        label {
-            position: relative;
-            cursor: pointer;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 40px;
-            height: 40px;
-            min-width: 40px;
-            border-radius: 50%;
-
-            span {
-                &.small {
-                    font-size: 0.75rem;
-                    color: $gray-550;
-                }
+            .first-day {
+                position: absolute;
+                font-size: 9px;
+                font-weight: 500;
+                color: $gray-600;
+                top: 0;
+                z-index: 1;
             }
 
-            &:hover,
-            &:checked {
-                @include media-breakpoint-up(sm) {
-                    box-shadow: 0 0 0 4px transparent;
-                    background-color: $blue;
-                    color: $white;
-                    &:after {
-                        background-color: $white;
-                    }
-                }
-                cursor: pointer;
-                &.current-day {
-                    + .first-day {
-                        color: $white;
-                    }
-                }
-                .first-day {
-                    color: $white;
-                }
-            }
-            + p {
-                display: none;
-            }
-        }
-
-        &.selectable-day {
             label {
-                color: $blue;
-                background-color: $blue-100;
-                border: 1px solid $blue;
-            }
-        }
-        &.past-day,
-        &.future-day,
-        &.unavailable-day {
-            label {
-                color: $gray-500;
-                background-color: transparent;
-                border: 1px solid transparent;
-                pointer-events: none;
-            }
-        }
-        &.current-day {
-            label {
-                &:after {
-                    content: "";
-                    width: 0.25rem;
-                    height: 0.25rem;
-                    border-radius: 50%;
-                    background-color: $blue;
-                    position: absolute;
-                    top: 28px;
-                }
-                .first-day {
-                    color: $blue;
-                }
-            }
-        }
-    }
-
-    &.initial-view {
-        &.month-hidden {
-            display: none;
-        }
-        .day-hidden {
-            display: none;
-        }
-    }
-}
-.past {
-    .calendar-grid-container {
-        .month-year {
-            grid-area: 1 / 1 / 2 / 6;
-        }
-        .nav-forward {
-            grid-area: 1 / 7 / 2 / 8;
-            display: flex;
-            justify-content: flex-end;
-            button {
-                &:after {
-                    content: "";
-                    position: absolute;
-                    width: 7px;
-                    height: 12px;
-                    background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66831 5.99879C6.66955 6.17554 6.60074 6.34558 6.47695 6.47168L1.15501 11.8017C1.02812 11.9287 0.85603 12 0.676587 12C0.497145 12 0.325053 11.9287 0.198168 11.8017C0.0712831 11.6748 7.268e-09 11.5026 8.07183e-09 11.3231C8.87567e-09 11.1436 0.0712831 10.9714 0.198168 10.8445L5.05126 5.99879L0.198168 1.14736C0.0725521 1.02042 0.00248585 0.848755 0.00338306 0.670131C0.00428028 0.491506 0.0760674 0.320554 0.202952 0.194881C0.329837 0.0692091 0.501426 -0.000888818 0.679971 9.54485e-06C0.858515 0.000906955 1.02939 0.0727263 1.15501 0.199668L6.47312 5.52399C6.59843 5.65017 6.66862 5.82092 6.66831 5.99879Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
-                }
-            }
-        }
-        .nav-back {
-            grid-area: 1 / 6 / 2 / 7;
-            display: flex;
-            justify-content: flex-end;
-            button {
-                &:after {
-                    content: "";
-                    position: absolute;
-                    width: 7px;
-                    height: 12px;
-                    background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.331685 6.00121C0.330445 5.82446 0.399256 5.65442 0.523053 5.52832L5.84499 0.198256C5.97188 0.0713149 6.14397 -8.63821e-08 6.32341 -6.72174e-08C6.50285 -4.80527e-08 6.67495 0.071315 6.80183 0.198256C6.92872 0.325198 7 0.497368 7 0.67689C7 0.856412 6.92872 1.02858 6.80183 1.15552L1.94874 6.00121L6.80183 10.8526C6.92745 10.9796 6.99751 11.1512 6.99662 11.3299C6.99572 11.5085 6.92393 11.6794 6.79705 11.8051C6.67016 11.9308 6.49857 12.0009 6.32003 12C6.14148 11.9991 5.97061 11.9273 5.84499 11.8003L0.526881 6.47601C0.401568 6.34983 0.331375 6.17908 0.331685 6.00121Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
-                }
-            }
-        }
-        .nav-back,
-        .nav-forward {
-            button {
                 position: relative;
-                border-radius: 50%;
-                width: 28px;
-                height: 28px;
-                background-color: $blue-100;
-                border: 1px solid $blue;
+                cursor: pointer;
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                &:focus,
-                &:focus-visible {
-                    border: 2.5px solid $blue;
-                    box-shadow: none;
+                width: 40px;
+                height: 40px;
+                min-width: 40px;
+                border-radius: 50%;
+
+                span {
+                    &.small {
+                        font-size: 0.75rem;
+                        color: $gray-550;
+                    }
+                }
+
+                &:hover,
+                &:checked {
+                    @include media-breakpoint-up(sm) {
+                        box-shadow: 0 0 0 4px transparent;
+                        background-color: $blue;
+                        color: $white;
+                        &:after {
+                            background-color: $white;
+                        }
+                    }
+                    cursor: pointer;
+                    &.current-day {
+                        + .first-day {
+                            color: $white;
+                        }
+                    }
+                    .first-day {
+                        color: $white;
+                    }
+                }
+                + p {
+                    display: none;
+                }
+            }
+
+            &.selectable-day {
+                label {
+                    color: $blue;
                     background-color: $blue-100;
-                    color: $white;
+                    border: 1px solid $blue;
+                }
+            }
+            &.past-day,
+            &.future-day,
+            &.unavailable-day {
+                label {
+                    color: $gray-500;
+                    background-color: transparent;
+                    border: 1px solid transparent;
+                    pointer-events: none;
+                }
+            }
+            &.current-day {
+                label {
+                    &:after {
+                        content: "";
+                        width: 0.25rem;
+                        height: 0.25rem;
+                        border-radius: 50%;
+                        background-color: $blue;
+                        position: absolute;
+                        top: 28px;
+                    }
+                    .first-day {
+                        color: $blue;
+                    }
+                }
+            }
+        }
+
+        &.initial-view {
+            &.month-hidden {
+                display: none;
+            }
+            .day-hidden {
+                display: none;
+            }
+        }
+    }
+    .btn-link {
+        font-weight: 500;
+        text-underline-offset: 4px;
+    }
+    .past {
+        .calendar-grid-container {
+            .month-year {
+                grid-area: 1 / 1 / 2 / 6;
+            }
+            .nav-forward {
+                grid-area: 1 / 7 / 2 / 8;
+                display: flex;
+                justify-content: flex-end;
+                button {
+                    &:after {
+                        content: "";
+                        position: absolute;
+                        width: 7px;
+                        height: 12px;
+                        background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66831 5.99879C6.66955 6.17554 6.60074 6.34558 6.47695 6.47168L1.15501 11.8017C1.02812 11.9287 0.85603 12 0.676587 12C0.497145 12 0.325053 11.9287 0.198168 11.8017C0.0712831 11.6748 7.268e-09 11.5026 8.07183e-09 11.3231C8.87567e-09 11.1436 0.0712831 10.9714 0.198168 10.8445L5.05126 5.99879L0.198168 1.14736C0.0725521 1.02042 0.00248585 0.848755 0.00338306 0.670131C0.00428028 0.491506 0.0760674 0.320554 0.202952 0.194881C0.329837 0.0692091 0.501426 -0.000888818 0.679971 9.54485e-06C0.858515 0.000906955 1.02939 0.0727263 1.15501 0.199668L6.47312 5.52399C6.59843 5.65017 6.66862 5.82092 6.66831 5.99879Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
+                    }
+                }
+            }
+            .nav-back {
+                grid-area: 1 / 6 / 2 / 7;
+                display: flex;
+                justify-content: flex-end;
+                button {
+                    &:after {
+                        content: "";
+                        position: absolute;
+                        width: 7px;
+                        height: 12px;
+                        background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.331685 6.00121C0.330445 5.82446 0.399256 5.65442 0.523053 5.52832L5.84499 0.198256C5.97188 0.0713149 6.14397 -8.63821e-08 6.32341 -6.72174e-08C6.50285 -4.80527e-08 6.67495 0.071315 6.80183 0.198256C6.92872 0.325198 7 0.497368 7 0.67689C7 0.856412 6.92872 1.02858 6.80183 1.15552L1.94874 6.00121L6.80183 10.8526C6.92745 10.9796 6.99751 11.1512 6.99662 11.3299C6.99572 11.5085 6.92393 11.6794 6.79705 11.8051C6.67016 11.9308 6.49857 12.0009 6.32003 12C6.14148 11.9991 5.97061 11.9273 5.84499 11.8003L0.526881 6.47601C0.401568 6.34983 0.331375 6.17908 0.331685 6.00121Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
+                    }
+                }
+            }
+            .nav-back,
+            .nav-forward {
+                button {
+                    position: relative;
+                    border-radius: 50%;
+                    width: 28px;
+                    height: 28px;
+                    background-color: $blue-100;
+                    border: 1px solid $blue;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    &:focus,
+                    &:focus-visible {
+                        border: 2.5px solid $blue;
+                        box-shadow: none;
+                        background-color: $blue-100;
+                        color: $white;
+                    }
                 }
             }
         }
     }
 }
+
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index ffd5122e6..7f0a20b80 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -29,7 +29,6 @@ import { experimentTriggers } from "../constants/experiments";
 import { applicationConfig } from "../constants/application-config";
 
 // Components
-import quote from "@/layouts/quote/quote.vue";
 import datePicker from "@/digital-components/date-picker/date-picker.vue";
 import demoDatePicker from "@/layouts/demo-date-picker/demo-date-picker.vue";
 
diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js
index c83b4e4bb..283c68ef1 100644
--- a/src/router/router-constants/fmgPage-values.js
+++ b/src/router/router-constants/fmgPage-values.js
@@ -16,6 +16,7 @@ const fmgPageValues = {
     QUOTE: "quote",
     SERVICE_LOCATION: "service-location",
     HERITAGE: "heritage",
+    SCHEDULE: "schedule",
 };
 
 export { fmgPageValues };
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index b302320ba..88b5c92a8 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -45,6 +45,9 @@ const navigationScenarios = {
     CLICKED_BACK_WITH_CAPABILITY_QUESTIONS: "CLICKED_BACK_WITH_CAPABILITY_QUESTIONS",
     CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS: "CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS",
     CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS: "CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS",
+
+    // Scheduling
+    SELECTED_LOCATION: "SELECTED_LOCATION",
 };
 
 export { navigationScenarios };
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 7d780df1a..32c6e4ba5 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -420,6 +420,19 @@ const routingTable = function (store) {
                     scenario: navigationScenarios.CLICKED_BACK,
                     destinationFmgPageValue: fmgPageValues.QUOTE,
                 },
+                {
+                    scenario: navigationScenarios.SELECTED_LOCATION,
+                    destinationFmgPageValue: fmgPageValues.SCHEDULE,
+                },
+            ],
+        },
+        {
+            fmgPageValue: fmgPageValues.SCHEDULE,
+            maps: [
+                {
+                    scenario: navigationScenarios.CLICKED_BACK,
+                    destinationFmgPageValue: fmgPageValues.SERVICE_LOCATION,
+                },
             ],
         },
     ];

From faf9d1e4200b74c9cbd11ed87ac607bf44a662b4 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 5 Apr 2023 11:49:09 -0400
Subject: [PATCH 6/9] CSR-1129: formatting changes

---
 .../date-picker/date-picker.vue               |   1 -
 src/layouts/schedule/schedule.vue             | 136 ++++++++++++++++++
 .../service-location/service-location.vue     |   5 +-
 3 files changed, 140 insertions(+), 2 deletions(-)
 create mode 100644 src/layouts/schedule/schedule.vue

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 813708b66..008fae9fa 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -637,5 +637,4 @@ export default {
         }
     }
 }
-
 </style>
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
new file mode 100644
index 000000000..02361128c
--- /dev/null
+++ b/src/layouts/schedule/schedule.vue
@@ -0,0 +1,136 @@
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <div class="page-container-grouped-styles">
+            <loadingModal ref="loadingModal" />
+            <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+            <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-5" />
+            <div class="text-center mt-1 mb-3" v-if="ChangeShopLink.length">
+                <span v-for="copy in ChangeShopLink" :key="copy">
+                    <span v-if="doesCopyContainRouterLink(copy)" class="text-body">
+                        <router-link
+                            :to="{
+                                query: { fmgPage: `${getRouterLinkRouteFromCopy(copy)}` },
+                                name: 'root',
+                            }"
+                            >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
+                        >
+                    </span>
+                    <span v-else class="m-0 text-body" v-html="copy"></span>
+                </span>
+            </div>
+            <date-picker
+                selectableDates="custom"
+                v-model="selectedDate"
+                :customSelectableDatesCallback="getAvailableDates" />
+            <funnel-footer
+                cmsWidgetName="FunnelFooterWidget"
+                ref="funnelFooter"
+                :isForwardActionDisabled="!meta.valid"
+                @back-clicked="backButtonAction"
+                @ForwardClicked="forwardButtonAction" />
+        </div>
+    </Form>
+</template>
+
+<script>
+// Components
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import { Form, defineRule } from "vee-validate";
+import datePicker from "@/digital-components/date-picker/date-picker";
+
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import {
+    doesCopyContainRouterLink,
+    splitCopyOnCMSPlaceHolder,
+    getRouterLinkRouteFromCopy,
+    getRouterLinkDisplayTextFromCopy,
+} from "@/helpers/cms-content-helper";
+import { errorMessages } from "@/constants/error-messages";
+import { required } from "@/helpers/validation-rules";
+
+defineRule("date-required", required(errorMessages.DATE_REQUIRED));
+
+export default {
+    name: "schedule",
+    data() {
+        return {
+            selectedDate: null,
+            mockSelectableDatesData: [
+                { year: 2023, month: 4, date: 13 },
+                { year: 2023, month: 4, date: 14 },
+                { year: 2023, month: 4, date: 26 },
+                { year: 2023, month: 5, date: 4 },
+                { year: 2023, month: 5, date: 5 },
+                { year: 2023, month: 5, date: 14 },
+                { year: 2023, month: 5, date: 21 },
+                { year: 2023, month: 5, date: 23 },
+                { year: 2023, month: 5, date: 25 },
+                { year: 2023, month: 6, date: 11 },
+            ],
+        };
+    },
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    computed: {
+        ChangeShopLinkText() {
+            return this.getCmsContent("ChangeShopLink", "Text");
+        },
+        ChangeShopLink() {
+            // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
+            return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
+        },
+    },
+    methods: {
+        doesCopyContainRouterLink,
+        splitCopyOnCMSPlaceHolder,
+        getRouterLinkRouteFromCopy,
+        getRouterLinkDisplayTextFromCopy,
+        arePagePrerequisitesValid() {
+            return true;
+            // NEED TODO - WHAT ARE PAGE REQ'S FOR THIS PAGE?
+        },
+        getAvailableDates(startDate, endDate) {
+            return this.mockSelectableDatesData;
+        },
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        forwardButtonAction() {
+            navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
+        },
+    },
+    components: {
+        funnelHeader,
+        funnelFooter,
+        funnelSubHeader,
+        Form,
+        loadingModal,
+        datePicker,
+    },
+};
+</script>
+
+<style lang="scss"></style>
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 69b4f4926..119632a2d 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -284,7 +284,10 @@ export default {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
         forwardButtonAction() {
-            navigateToHeritageFunnel({ loadingModal: this.$refs.loadingModal });
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.SELECTED_LOCATION,
+                this.$route
+            );
         },
     },
     components: {

From 93c5763b26f0cf8ef51a0743aead563c04597a96 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Wed, 5 Apr 2023 11:50:34 -0400
Subject: [PATCH 7/9] CSR-1129: comment fix

---
 jest.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/jest.config.js b/jest.config.js
index 3186939df..f6178df61 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -15,7 +15,7 @@ module.exports = {
     "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
     "!src/layouts/reveal/**/*.vue",
     "!src/ux-components/text-link/**/*.vue",
-    "!src/common-components/date-picker/**/*.vue", // git statuTemp until unit tests completed
+    "!src/common-components/date-picker/**/*.vue", // Temp until unit tests completed
     "!src/layouts/vin-lookup/**/*.vue", //Temporary for Quote page testing
     "!src/common-components/funnel-header/menu-modal/**/*.vue",
     "!src/layouts/schedule/*.vue", // Temp test exclusion while in development

From 031453f4275e5dafe829507a64110c4fc8a6afa7 Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 6 Apr 2023 10:55:32 -0400
Subject: [PATCH 8/9] Added new tests.

---
 .../service-location/service-location.spec.js | 362 ++++++++++++++++++
 1 file changed, 362 insertions(+)

diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js
index b0a06b16f..1062a6f34 100644
--- a/src/layouts/service-location/service-location.spec.js
+++ b/src/layouts/service-location/service-location.spec.js
@@ -8,6 +8,7 @@ import { getMountOptions } from "@/helpers/unit-test-helper";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin";
 import { getServiceabilityDetails } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
+import { TRUE } from "sass";
 
 // Define Mocks
 jest.mock("@/helpers/cms-content-helper", () => ({
@@ -733,6 +734,87 @@ describe("service-location.vue", () => {
                 expect(wrapper.vm.isServiceableInshop).toEqual(false);
                 expect(wrapper.vm.displayNoShopsAlert).toEqual(false);
             });
+
+            test("displayServiceableInshopOnly should be true if inshop is true and mobile is false", async () => {
+                // Arrange
+                getServiceabilityDetails.mockImplementation(() =>
+                    Promise.resolve({
+                        isGlassServiceableInshop: true,
+                        isRecalibrationServiceableInshop: true,
+                        isGlassServiceableMobile: false,
+                        isRecalibrationServiceableMobile: false,
+                    })
+                );
+
+                const { wrapper } = setupMocks({});
+
+                // Act
+                await serviceLocation.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { fmgPage: "serviceLocation" } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                // Assert
+                expect(wrapper.vm.isServiceableMobile).toEqual(false);
+                expect(wrapper.vm.isServiceableInshop).toEqual(true);
+                expect(wrapper.vm.displayServiceableInshopOnly).toEqual(true);
+            });
+
+            test("displayServiceableInshopOnly should be false if inshop is false", async () => {
+                // Arrange
+                getServiceabilityDetails.mockImplementation(() =>
+                    Promise.resolve({
+                        isGlassServiceableInshop: false,
+                        isRecalibrationServiceableInshop: false,
+                        isGlassServiceableMobile: false,
+                        isRecalibrationServiceableMobile: false,
+                    })
+                );
+
+                const { wrapper } = setupMocks({});
+
+                // Act
+                await serviceLocation.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { fmgPage: "serviceLocation" } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                // Assert
+                expect(wrapper.vm.isServiceableMobile).toEqual(false);
+                expect(wrapper.vm.isServiceableInshop).toEqual(false);
+                expect(wrapper.vm.displayServiceableInshopOnly).toEqual(false);
+            });
+
+            test("displayServiceableInshopOnly should be false if mobile is true", async () => {
+                // Arrange
+                getServiceabilityDetails.mockImplementation(() =>
+                    Promise.resolve({
+                        isGlassServiceableInshop: true,
+                        isRecalibrationServiceableInshop: true,
+                        isGlassServiceableMobile: true,
+                        isRecalibrationServiceableMobile: true,
+                    })
+                );
+
+                const { wrapper } = setupMocks({});
+
+                // Act
+                await serviceLocation.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { fmgPage: "serviceLocation" } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                // Assert
+                expect(wrapper.vm.isServiceableMobile).toEqual(true);
+                expect(wrapper.vm.isServiceableInshop).toEqual(true);
+                expect(wrapper.vm.displayServiceableInshopOnly).toEqual(false);
+            });
         });
 
         describe("should be based only on glass serviceability if recalibration is not defined.", () => {
@@ -870,6 +952,142 @@ describe("service-location.vue", () => {
             });
         });
 
+        describe("should check for dual or static recalibration", () => {
+            test("isDualOrStaticRecalibration should be true if dual recalibration is present", async () => {
+                // Arrange
+                store.getters = {
+                    lineItems: {
+                        supportingItems: [
+                            {
+                                description: null,
+                                kitPrice: 0,
+                                laborAmount: 0,
+                                partNumber: "SUPPLIES-REPAIR",
+                                partType: "REPAIR FEE",
+                                sellingPrice: 7.99,
+                            },
+                            {
+                                description: null,
+                                kitPrice: 0,
+                                laborAmount: 0,
+                                partNumber: "RECAL DUAL",
+                                partType: "RECALIBRATION",
+                                sellingPrice: 0,
+                            },
+                        ],
+                    },
+                    order: {
+                        serviceLocation: {
+                            zipCode: "43235",
+                            state: "OH",
+                        },
+                    },
+                    damage: {
+                        isRepair: false,
+                    },
+                    payment: {
+                        isInsurance: false,
+                    },
+                    vehicle: {
+                        registration: {
+                            address: "5555 Sulgrave Dr",
+                            city: "New Albany",
+                            state: "OH",
+                            zipCode: "43054",
+                        },
+                    },
+                };
+
+                const { wrapper } = setupMocks({});
+
+                // Act
+                await serviceLocation.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { fmgPage: "serviceLocation" } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                // Assert
+                expect(wrapper.vm.isDualOrStaticRecalibration).toBe(true);
+            });
+
+            test("isDualOrStaticRecalibration should be true if static recalibration is present", async () => {
+                // Arrange
+                store.getters = {
+                    lineItems: {
+                        supportingItems: [
+                            {
+                                description: null,
+                                kitPrice: 0,
+                                laborAmount: 0,
+                                partNumber: "SUPPLIES-REPAIR",
+                                partType: "REPAIR FEE",
+                                sellingPrice: 7.99,
+                            },
+                            {
+                                description: null,
+                                kitPrice: 0,
+                                laborAmount: 0,
+                                partNumber: "RECAL STATIC",
+                                partType: "RECALIBRATION",
+                                sellingPrice: 0,
+                            },
+                        ],
+                    },
+                    order: {
+                        serviceLocation: {
+                            zipCode: "43235",
+                            state: "OH",
+                        },
+                    },
+                    damage: {
+                        isRepair: false,
+                    },
+                    payment: {
+                        isInsurance: false,
+                    },
+                    vehicle: {
+                        registration: {
+                            address: "5555 Sulgrave Dr",
+                            city: "New Albany",
+                            state: "OH",
+                            zipCode: "43054",
+                        },
+                    },
+                };
+
+                const { wrapper } = setupMocks({});
+
+                // Act
+                await serviceLocation.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { fmgPage: "serviceLocation" } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                // Assert
+                expect(wrapper.vm.isDualOrStaticRecalibration).toBe(true);
+            });
+
+            test("isDualOrStaticRecalibration should be false if neither are present.", async () => {
+                // Arrange
+                const { wrapper } = setupMocks({});
+
+                // Act
+                await serviceLocation.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { fmgPage: "serviceLocation" } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                // Assert
+                expect(wrapper.vm.isDualOrStaticRecalibration).toBe(false);
+            });
+        });
+
         describe("should properly display alerts.", () => {
             test("Should show mobile-only error if only mobile is available.", async () => {
                 // Arrange
@@ -978,6 +1196,150 @@ describe("service-location.vue", () => {
                 // Assert
                 expect(alertComponent.exists()).toBe(false);
             });
+
+            test("Should show inshop-only error if only inshop is available", async () => {
+                // Arrange
+                getServiceabilityDetails.mockImplementation(() =>
+                    Promise.resolve({
+                        isGlassServiceableInshop: true,
+                        isRecalibrationServiceableInshop: true,
+                        isGlassServiceableMobile: false,
+                        isRecalibrationServiceableMobile: false,
+                    })
+                );
+
+                const { wrapper } = setupMocks({});
+
+                // Act
+                await serviceLocation.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { fmgPage: "serviceLocation" } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                const alertComponent = wrapper.findComponent({ ref: "alertInshopOnly" });
+
+                // Assert
+                expect(alertComponent.exists()).toBe(true);
+            });
+
+            test("Should not show inshop-only error if not inshop-only", async () => {
+                // Arrange
+                getServiceabilityDetails.mockImplementation(() =>
+                    Promise.resolve({
+                        isGlassServiceableInshop: false,
+                        isRecalibrationServiceableInshop: false,
+                        isGlassServiceableMobile: false,
+                        isRecalibrationServiceableMobile: false,
+                    })
+                );
+
+                const { wrapper } = setupMocks({});
+
+                // Act
+                await serviceLocation.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { fmgPage: "serviceLocation" } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                const alertComponent = wrapper.findComponent({ ref: "alertInshopOnly" });
+
+                // Assert
+                expect(alertComponent.exists()).toBe(false);
+            });
+
+            test("Should not show inshop-only error if dual or static recalibration, but should show that error instead.", async () => {
+                // Arrange
+                store.getters = {
+                    lineItems: {
+                        supportingItems: [
+                            {
+                                description: null,
+                                kitPrice: 0,
+                                laborAmount: 0,
+                                partNumber: "SUPPLIES-REPAIR",
+                                partType: "REPAIR FEE",
+                                sellingPrice: 7.99,
+                            },
+                            {
+                                description: null,
+                                kitPrice: 0,
+                                laborAmount: 0,
+                                partNumber: "RECAL STATIC",
+                                partType: "RECALIBRATION",
+                                sellingPrice: 0,
+                            },
+                        ],
+                    },
+                    order: {
+                        serviceLocation: {
+                            zipCode: "43235",
+                            state: "OH",
+                        },
+                    },
+                    damage: {
+                        isRepair: false,
+                    },
+                    payment: {
+                        isInsurance: false,
+                    },
+                    vehicle: {
+                        registration: {
+                            address: "5555 Sulgrave Dr",
+                            city: "New Albany",
+                            state: "OH",
+                            zipCode: "43054",
+                        },
+                    },
+                };
+
+                getServiceabilityDetails.mockImplementation(() =>
+                    Promise.resolve({
+                        isGlassServiceableInshop: false,
+                        isRecalibrationServiceableInshop: false,
+                        isGlassServiceableMobile: false,
+                        isRecalibrationServiceableMobile: false,
+                    })
+                );
+
+                const { wrapper } = setupMocks({});
+
+                // Act
+                await serviceLocation.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { fmgPage: "serviceLocation" } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                const alertInshopComponent = wrapper.findComponent({ ref: "alertInshopOnly" });
+                const alertRecalComponent = wrapper.findComponent({ ref: "alertRecalNoMobile" });
+
+                // Assert
+                expect(alertInshopComponent.exists()).toBe(false);
+                expect(alertRecalComponent.exists()).toBe(true);
+            });
+
+            test("Should not show dual/static recalibration error if not those recalibration types", async () => {
+                // Arrange
+                const { wrapper } = setupMocks({});
+
+                // Act
+                await serviceLocation.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { fmgPage: "serviceLocation" } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                const alertComponent = wrapper.findComponent({ ref: "alertRecalNoMobile" });
+
+                // Assert
+                expect(alertComponent.exists()).toBe(false);
+            });
         });
     });
 });

From bb14d11a15b0560d7230a8da27ed0c3eff05790e Mon Sep 17 00:00:00 2001
From: Chloe Herd <chloe.herd@safelite.com>
Date: Thu, 6 Apr 2023 13:38:52 -0400
Subject: [PATCH 9/9] Remove accidentally auto-added import.

---
 src/layouts/service-location/service-location.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js
index 5f5ae90b4..3589596df 100644
--- a/src/layouts/service-location/service-location.spec.js
+++ b/src/layouts/service-location/service-location.spec.js
@@ -8,7 +8,6 @@ import { getMountOptions } from "@/helpers/unit-test-helper";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin";
 import { getServiceabilityDetails } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
-import { TRUE } from "sass";
 
 // Define Mocks
 jest.mock("@/helpers/cms-content-helper", () => ({