CSR-1129: create schedule page, put date picker on it

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)"],

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 };

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,6 +371,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.date-picker {
     .calendar-grid-container {
         margin: 0 auto;
         max-width: 414px;
@@ -575,6 +576,10 @@ export default {
             }
         }
     }
+    .btn-link {
+        font-weight: 500;
+        text-underline-offset: 4px;
+    }
     .past {
         .calendar-grid-container {
             .month-year {
@@ -631,4 +636,6 @@ export default {
             }
         }
     }
+}
+
 </style>

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";
 

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 };

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 };

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,
+                },
             ],
         },
     ];