CSR-762 GA Cleanup

src/App.vue

@@ -1,6 +1,5 @@
 <template>
     <router-view v-slot="{ Component }">
-        lastFocusedInputGroupName: {{ lastFocusedInputGroupName }}
         <transition
             :duration="{ enter: 200, leave: 200 }"
             name="route-fade"
@@ -25,7 +24,6 @@ export default {
     methods: {
         handleChildFocus(e) {
             const targetType = e.target.type;
-            // console.log(targetType)
             if (targetType !== "radio" && targetType !== "checkbox") {
                 this.handleInputFocus({
                     groupName: null,
@@ -33,10 +31,6 @@ export default {
             }
         },
         handleInputFocus(e) {
-            // console.log("app handleInputFocus: ", {
-            //     lastFocusedInputGroupName: this.lastFocusedInputGroupName,
-            //     groupName: e.groupName,
-            // })
             if (
                 e &&
                 this.lastFocusedInputGroupName !== e.groupName &&
@@ -46,9 +40,6 @@ export default {
             }
         },
         handleInputBlur(e) {
-            // console.log("app handleInputBlur: ", {
-            //     groupName: e.groupName,
-            // })
             if (e) {
                 this.lastFocusedInputGroupName = e.groupName;
                 this.onFocusCallback = e.onFocusCallback;

src/common-components/base-input-button/base-input-button.vue

@@ -5,8 +5,6 @@
         @focusin="handleFocus"
         @focusout="handleBlur"
         @mousedown.left="handleEventAction('click', $event)">
-        lastValuePushedToGa: {{ lastValuePushedToGa }}<br />
-
         <input
             :type="inputType"
             :id="buttonId"
@@ -25,10 +23,9 @@
 </template>
 
 <script>
+import { functionTypeParam } from "@babel/types";
 import { useField } from "vee-validate";
 import { toRef } from "vue";
-import { queryStrings } from "@/constants/query-strings";
-import eventBus from "@/helpers/event-bus/event-bus.js";
 
 export default {
     name: "base-input-button",
@@ -64,23 +61,11 @@ export default {
         },
         isRequired: Boolean,
         lastValuePushedToGa: [String, Number],
-        setLastValuePushedToGa: Function
+        setLastValuePushedToGa: functionTypeParam
-        // wasThisValueJustPushedToGa: {
-        //     type: [String, Number],
-        //     required: true,
-        // },
-        // fullName: {
-        //     type: String,
-        //     default: "",
-        //     required: true,
-        // },
     },
     data() {
         return {
             valueToEmit: null,
-            // lastValuePushedToGa: null,
-            // wasPushedToGa: false
-            // wasThisValueJustPushedToGa: false,
         };
     },
     mounted() {
@@ -90,32 +75,21 @@ export default {
     },
     methods: {
         handleEventAction(eventType, e) {
-            // console.log("Handling: ", eventType)
-
             if (this.isMultiSelect) {
                 switch (eventType) {
                     case this.eventTypes.ENTER:
                     case this.eventTypes.CHANGE:
                         this.handleClick(e);
-                        // this.dispatchStoreAction(
+                        this.pushClickEventToGA(this.eventTypes.CLICK);
-                        //     gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
-                        //     this.groupName,
-                        //     false
-                        // );
-
-                        // even if it's pushing from here, it needs to keep track
-                        // of lastFocusedInputGroupName and such
-                        this.pushClickEventToGA("test");
                         break;
                 }
             } else {
                 switch (eventType) {
-                    case this.eventTypes.CLICK: // TODO KO pushClickEventToGa?
+                    case this.eventTypes.CLICK:
                     case this.eventTypes.ENTER:
                     case this.eventTypes.SPACE:
                         this.handleClick(e);
-                        this.pushClickEventToGA("test");
+                        this.pushClickEventToGA(this.eventTypes.CLICK);
-                        // this.pushClickEventToGAIfReady();
                         break;
                     case this.eventTypes.CHANGE:
                         this.selectOnKeypress
@@ -123,15 +97,7 @@ export default {
                             : this.handleSelectionChange(e);
                         break;
                 }
-
-                // if (eventType === this.eventTypes.CLICK) {
-                //     console.log("PUSH FROM RADIO CLICK");
-                //     this.pushClickEventToGA("test");
-                // }
             }
-
-            // this.wasThisValueJustPushedToGa = false;
-            // this.pushClickEventToGA(eventType);
         },
         handleSelectionChange(e) {
             if (
@@ -150,182 +116,42 @@ export default {
                 this.valueToEmit = this.value;
             }
 
-            // this.dispatchStoreAction(
-            //     gaStoreActions.UPDATE_CURRENTLY_SELECTED_VALUES,
-            //     {
-            //         groupName: this.groupName,
-            //         value: this.value,
-            //     },
-            // );
-
             this.handleChange(this.valueToEmit);
         },
         handleClick(e) {
             this.handleSelectionChange(e);
-
-            // TODO KO NOTES
-            // if you click on a radio button > go to another button > go back to original > tab out
-            // shouldn't do anything, but it does because wasThisValueJustPushedToGa gets set to false?
-            // console.log("---inputButtonClicked: ", {
-            //     value: this.value,
-            //     // wasThisValueJustPushedToGa: this.wasThisValueJustPushedToGa
-            // });
-            // const lastValuePushedToGa = this.wasThisValueJustPushedToGa ? this.value : null;
-            // this.wasThisValueJustPushedToGa = false;
-
             this.$emit("inputButtonClicked", this.valueToEmit);
         },
-        onFocusCallbackForRoot() {
+        // onFocusCallbackForRoot() {
-            // console.log("onFocusCallbackForRoot: ", {
+        //     this.pushClickEventToGA();
-            //     isValueSelectedOnClick: this.isValueSelectedOnClick,
+        // },
-            //     isChecked: this.isChecked,
+        handleFocus() {
-            //     value: this.value,
-            //     lastValuePushedToGa: this.lastValuePushedToGa,
-            // });
-            // if (
-            //     !this.isValueSelectedOnClick &&
-            //     this.isChecked &&
-            //     this.lastValuePushedToGa != this.value
-            // ) {
-            //     console.log("PUSH FROM ROOT CALLBACK");
-            //     this.pushClickEventToGA();
-            // }
-
-            this.pushClickEventToGA();
-        },
-        handleFocus(e) {
-            // console.log("FOCUS: ", this.groupName);
-            // console.log("FOCUS :", {
-            //     groupName: this.groupName,
-            //     value: this.value,
-            // });
             this.$root.handleInputFocus({
                 groupName: this.groupName,
             });
         },
-        handleBlur(e) {
+        handleBlur() {
-            // console.log("BLUR: ", this.groupName);
-            // console.log("BLUR :", {
-            //     groupName: this.groupName,
-            //     value: this.value
-            // })
             this.$root.handleInputBlur({
                 groupName: this.groupName,
-                onFocusCallback: this.onFocusCallbackForRoot,
+                onFocusCallback: this.pushClickEventToGA,
             });
         },
-
-        // TODO KO NOTES
-        // base-input-button has the value to push to GA and the click vs focus events
-        // but button-question would have to keep track of the button group's last held value
-        // is there a way to make each individual button hold the group's last held value
-        // WITHOUT listening to an event on each component that uses the button?
-
         pushClickEventToGA(source) {
-            if (source == "test") {
+            if (source === this.eventTypes.CLICK) {
-                // this.wasThisValueJustPushedToGa = true;
-                // this.$emit("update:lastValuePushedToGa", this.value)
                 console.log("------------------PUSHING 1: ", this.value);
-                // this.$emit("gaClickEventPushed", this.value)
                 this.setLastValuePushedToGa(this.value)
-
-                // this.wasPushedToGa = true
             } else {
-                // console.log("PCETGA: ", {
-                //     lastValuePushedToGa: this.lastValuePushedToGa,
-                //     isChecked: this.isChecked,
-                //     value: this.value,
-                //     // wasThisValueJustPushedToGa: this.wasThisValueJustPushedToGa
-                // });
                 if (
                     !this.isValueSelectedOnClick &&
                     this.isChecked &&
-                    // !this.wasThisValueJustPushedToGa &&
                     this.lastValuePushedToGa != this.value
                 ) {
-                    // this.$emit("update:lastValuePushedToGa", this.value)
-                    // this.wasPushedToGa = true
-                    // this.wasThisValueJustPushedToGa = true;
                     console.log("------------------PUSHING 2: ", this.value);
-                    // this.$emit("gaClickEventPushed", this.value)
                     this.setLastValuePushedToGa(this.value)
                 }
             }
-
-            // this.pushEventToGA(
-            //     this.$route.query[queryStrings.FMG_PAGE],
-            //     this.GaActions.CLICKED,
-            //     this.value?.toString(),
-            //     true,
-            //     this.valueToLogType
-            // );
         },
 
-        // handleBlur() {
-        //     // this.dispatchStoreAction(
-        //     //     gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
-        //     //     this.groupName,
-        //     //     false
-        //     // );
-        //     // this.dispatchStoreAction(
-        //     //     gaStoreActions.UPDATE_WAS_LAST_FOCUSED_INPUT_MULTISELECT,
-        //     //     this.isMultiSelect,
-        //     //     false
-        //     // );
-        // },
-        // handleKeyboardNavigation(key) {
-        //     this.pushClickEventToGAIfReady(key);
-        // },
-        // pushClickEventToGAIfReady(event) {
-        //     const gaClickInformation = this.$store.getters.gaClickInformation;
-        //     const firedGaClickEventValues =
-        //         gaClickInformation.firedGaClickEventValues;
-        //     const currentlySelectedValues =
-        //         gaClickInformation.currentlySelectedValues;
-        //     const lastFocusedInputGroup =
-        //         gaClickInformation.lastFocusedInputGroup;
-        //     const wasLastFocusedInputMultiselect =
-        //         gaClickInformation.wasLastFocusedInputMultiselect;
-
-        //     const keyCode = event?.code;
-        //     // Keyboard navigation
-        //     if (keyCode) {
-        //         if (
-        //             !wasLastFocusedInputMultiselect &&
-        //             currentlySelectedValues[lastFocusedInputGroup] &&
-        //             firedGaClickEventValues[lastFocusedInputGroup] !=
-        //                 currentlySelectedValues[lastFocusedInputGroup]
-        //         ) {
-        //             if (keyCode === "Tab") {
-        //                 this.pushClickEventToGA(
-        //                     currentlySelectedValues[lastFocusedInputGroup]
-        //                 );
-        //             } else if (keyCode?.includes("Arrow")) {
-        //                 if (lastFocusedInputGroup != this.groupName) {
-        //                     this.pushClickEventToGA(
-        //                         currentlySelectedValues[lastFocusedInputGroup]
-        //                     );
-        //                 }
-        //             }
-        //         }
-        //     } else {
-        //         // Radio click
-        //         // this.dispatchStoreAction(
-        //         //     gaStoreActions.UPDATE_LAST_FOCUSED_INPUT_GROUP,
-        //         //     this.groupName,
-        //         //     false
-        //         // );
-
-        //         if (
-        //             firedGaClickEventValues[this.groupName] !=
-        //             currentlySelectedValues[this.groupName]
-        //         ) {
-        //             this.pushClickEventToGA(
-        //                 currentlySelectedValues[this.groupName]
-        //             );
-        //         }
-        //     }
-        // },
     },
     computed: {
         isChecked() {
@@ -356,14 +182,6 @@ export default {
                 CLICK: "click",
             };
         },
-        // lastValuePushedToGaTest: {
-        //     get: () => {
-        //         return this.lastValuePushedToGa;
-        //     },
-        //     set: () => {
-        //         this.$emit("valuePushedToGa", this.value);
-        //     },
-        // },
     },
     setup(props) {
         const inputType = props.isMultiSelect ? "checkbox" : "radio";

src/common-components/button-question/button-question.vue

@@ -84,8 +84,6 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
 import listCard from "@/ux-components/list-card/list-card";
 import radio from "@/ux-components/radio/radio";
 import { ErrorMessage } from "vee-validate";
-import { queryStrings } from "@/constants/query-strings";
-import eventBus from "../../helpers/event-bus/event-bus";
 
 export default {
     name: "buttonQuestion",
@@ -129,9 +127,7 @@ export default {
     data() {
         return {
             selectedValues: "",
-            // lastFocusedInputGroup: "",
             lastValuePushedToGa: null,
-            // mostRecentlySelectedValue: null,
         };
     },
     computed: {
@@ -203,9 +199,6 @@ export default {
                 })
             );
         },
-        // isValueSelectedOnClick() {
-        //     return this.isMultiSelect || this.selectingInitiatesLoad;
-        // },
     },
     methods: {
         formatString(str) {
@@ -231,122 +224,13 @@ export default {
         },
         handleAnswerChange(selectedAnswers) {
             this.selectedValues = selectedAnswers;
-            // if (lastValuePushedToGa) {
-            //     this.lastValuePushedToGa = lastValuePushedToGa;
-            //     // console.log("BQ lastValuePushedToGa: ", lastValuePushedToGa);
-            // }
-
-            // if (this.isValueSelectedOnClick) {
-            //     this.pushClickEventToGA();
-            // }
 
             this.$emit("buttonQuestionChange", selectedAnswers);
             this.$emit("update:modelValue", selectedAnswers);
         },
-        /////////////////////////////
         setLastValuePushedToGa(lastValuePushedToGa) {
             this.lastValuePushedToGa = lastValuePushedToGa;
         },
-        // onFocusCallbackForRoot() {
-        //     console.log("onFocusCallbackForRoot: ", {
-        //         isValueSelectedOnClick: this.isValueSelectedOnClick,
-        //         isChecked: this.isChecked,
-        //         value: this.value,
-        //         lastValuePushedToGa: this.lastValuePushedToGa,
-        //     });
-        //     if (
-        //         !this.isValueSelectedOnClick &&
-        //         // this.isChecked &&
-        //         this.lastValuePushedToGa != this.mostRecentlySelectedValue
-        //     ) {
-        //         console.log("PUSH FROM ROOT CALLBACK");
-        //         this.pushClickEventToGA();
-        //     }
-        // },
-        // handleFocus(e) {
-        //     // console.log("FOCUS :", {
-        //     //     groupName: this.groupName,
-        //     //     value: this.value,
-        //     // });
-        //     this.$root.handleInputFocus({
-        //         groupName: this.groupName,
-        //     });
-        // },
-        // handleBlur(e) {
-        //     // console.log("BLUR :", {
-        //     //     groupName: this.groupName,
-        //     //     value: this.value
-        //     // })
-        //     this.$root.handleInputBlur({
-        //         groupName: this.groupName,
-        //         onFocusCallback: this.onFocusCallbackForRoot,
-        //     });
-        // },
-        // pushClickEventToGA() {
-        //     // const lastFocusedInputGroup =
-        //     //     this.$store.getters.gaClickInformation.lastFocusedInputGroup;
-        //     // this.dispatchStoreAction(
-        //     //     gaStoreActions.UPDATE_FIRED_GA_CLICK_EVENT_VALUES,
-        //     //     {
-        //     //         groupName: lastFocusedInputGroup,
-        //     //         value: value ?? this.value,
-        //     //     },
-        //     // );
-
-        //     this.lastValuePushedToGa = this.mostRecentlySelectedValue;
-        //     console.log("BIB");
-        //     this.pushEventToGA(
-        //         this.$route.query[queryStrings.FMG_PAGE],
-        //         this.GaActions.CLICKED,
-        //         this.mostRecentlySelectedValue?.toString(),
-        //         true,
-        //         this.valueToLogType
-        //     );
-        // },
-        //////////////////////////////////
-        // pushClickEventToGA() {
-        //     // const valueToPushToGa =
-        //     //     value?.toString() ?? this.selectedValues?.toString();
-
-        //     // console.log("pushing")
-        //     const event = eventBus.readAndPopEventFromBus("GA", "click");
-        //     const valueToPushToGa = event?.label;
-        //     console.log({
-        //         valueToPushToGa,
-        //         lastPushedGaEventValue: this.lastPushedGaEventValue,
-        //     });onFocusCallbackForRoot() {
-        //     console.log("Diff: ", this.isValueSelectedOnClick)
-        //     if (!this.isValueSelectedOnClick) {
-        //         this.pushClickEventToGA();
-        //     }
-        // },
-        // handleFocus(e) {
-        //     this.$root.handleInputFocus({
-        //         groupName: this.groupName,
-        //     });
-        // },
-        // handleBlur(e) {
-        //     this.$root.handleInputBlur({
-        //         groupName: this.groupName,
-        //         onFocusCallback: this.onFocusCallbackForRoot,
-        //     });
-        // },
-        //     if (
-        //         (event &&
-        //             valueToPushToGa !== this.lastPushedGaEventValue) ||
-        //         this.isValueSelectedOnClick
-        //     ) {
-        //         this.lastPushedGaEventValue = valueToPushToGa;
-        //         this.pushEventToGA(
-        //             event.category,
-        //             event.action,
-        //             valueToPushToGa,
-        //             event.pushToLogType,
-        //             event.valueToLogType
-        //         );
-        //     }
-        // },
-        //
     },
     components: {
         listButton,

src/common-components/date-picker/date-picker-spec.js

@@ -0,0 +1 @@
+test.todo("some test to be written in the future");

src/common-components/date-picker/date-picker.vue

@@ -0,0 +1,459 @@
+<template>
+  <div id="app">
+    <fieldset>
+      <legend class="d-flex justify-content-center">Date Picker</legend>
+      <div class="grid-container">
+        <!-- Do the days of the weeek need to be read? -->
+        <div class="grid-item"><span class="sr-only">Sunday</span>S</div>
+        <div class="grid-item"><span class="sr-only">Monday</span>M</div>
+        <div class="grid-item"><span class="sr-only">Tuesday</span>T</div>
+        <div class="grid-item"><span class="sr-only">Wednesday</span>W</div>
+        <div class="grid-item"><span class="sr-only">Thursday</span>T</div>
+        <div class="grid-item"><span class="sr-only">Friday</span>F</div>
+        <div class="grid-item"><span class="sr-only">Saturday</span>S</div>
+        <div class="grid-item radio-wrapper past-day">
+          <input type="radio" name="day-of-month" id="thirtypast" />
+          <label for="thirtypast"><span>30</span></label>
+        </div>
+        <div class="grid-item radio-wrapper past-day">
+          <input type="radio" name="day-of-month" id="thirtyonepast" />
+          <label for="thirtyonepast"><span>31</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day first-of-month">
+          <div v-if="isFirstDayOfMonth" class="current-month">OCT</div>
+          <input type="radio" name="day-of-month" id="one" />
+          <label for="one"><span class="sr-only">{{dayOfWeek}} {{pastMonth}} {{dayOfMonth}}</span><span>1</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="two" />
+          <label for="two"><span>2</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="three" />
+          <label for="three"><span>3</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day" :class="[isCurrentDay ? 'current-day' : '']">
+          <div v-if="isCurrentDayDot" class="current-day-dot"></div>
+          <input type="radio" name="day-of-month" id="four" />
+          <label for="four"><span>4</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="five" />
+          <label for="five"><span>5</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="six" />
+          <label for="six"><span>6</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="seven" />
+          <label for="seven"><span>7</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="eight" />
+          <label for="eight"><span>8</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="nine" />
+          <label for="nine"><span>9</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="ten" />
+          <label for="ten"><span>10</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="eleven" />
+          <label for="eleven"><span>11</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="twelve" />
+          <label for="twelve"><span>12</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="thirteen" />
+          <label for="thirteen"><span>13</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="fourteen" />
+          <label for="fourteen"><span>17</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="fifteen" />
+          <label for="fifteen"><span>15</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="sixteen" />
+          <label for="sixteen"><span>16</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="seventeen" />
+          <label for="seventeen"><span>17</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="eighteen" />
+          <label for="eighteen"><span>18</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="nineteen" />
+          <label for="nineteen"><span>19</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="twenty" />
+          <label for="twenty"><span>20</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="twentyone" />
+          <label for="twentyone"><span>21</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="twentytwo" />
+          <label for="twentytwo"><span>22</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="twentythree" />
+          <label for="twentythree"><span>23</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="twentyfour" />
+          <label for="twentyfour"><span>24</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="twentyfive" />
+          <label for="twentyfive"><span>25</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="twentysix" />
+          <label for="twentysix"><span>26</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="twentyseven" />
+          <label for="twentyseven"><span>27</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="twentyeight" />
+          <label for="twentyeight"><span>28</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="twentynine" />
+          <label for="twentynine"><span>29</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="thirty" />
+          <label for="thirty"><span>30</span></label>
+        </div>
+        <div class="grid-item radio-wrapper highlighted-day">
+          <input type="radio" name="day-of-month" id="thirtyone" />
+          <label for="thirtyone"><span>31</span></label>
+        </div>
+        <div class="grid-item radio-wrapper future-day">
+          <input type="radio" name="day-of-month" id="onefuture" />
+          <label for="onefuture"><span>1</span></label>
+        </div>
+        <div class="grid-item radio-wrapper future-day">
+          <input type="radio" name="day-of-month" id="twofuture" />
+          <label for="twofuture"><span>2</span></label>
+        </div>
+      </div>
+    </fieldset>
+  </div>
+  <form class="w-100 d-flex justify-content-center mt-5">
+    <input type="date">
+  </form>
+</template>
+
+<script>
+export default {
+  name: "datePicker",
+  data() {
+    return {
+      dayOfWeek: "Tuesday",
+      dayOfMonth: "1st",
+      pastMonth: "October",
+      isFirstDayOfMonth: true,
+      isCurrentDay: true,
+      isCurrentDayDot: true,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.container {
+  //max-width: 341px;
+  label {
+    display: initial; //Override Bootstrap default
+  }
+  #availableDates label:nth-child(14n):after {
+    content: "\a";
+    white-space: pre;
+  }
+}
+
+.grid-container {
+  margin: 0 auto;
+  max-width: 341px;
+  display: grid;
+  grid-gap: 4px;
+  grid-template-columns: auto auto auto auto auto auto auto;
+  justify-content: center;
+  align-items: center;
+
+  .grid-item {
+    text-align: center;
+    padding: 4px;
+  }
+
+  .radio-wrapper {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    width: 46px;
+    height: 46px;
+
+    .current-day-dot {
+      position: absolute;
+
+    }
+
+    &.first-of-month {
+      .current-month {
+        position: absolute;
+        font-size: 9px;
+        top: 4px;
+        color: #1574a1;
+      }
+    }
+
+    &.highlighted-day {
+
+      input[type="radio"] {
+        position: absolute;
+        // opacity: 0;
+        height: 0.1px;
+        width: 0.1px;
+
+        + label {
+          position: relative;
+          cursor: pointer;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          color: #1574a1;
+
+          span {
+            z-index: 2;
+          }
+
+          &::before {
+            content: "";
+            position: absolute;
+            border-radius: 50%;
+            border: 1px solid #1574a1;
+            background-color: #e4f1f7;
+            color: #1574a1;
+            width: 40px;
+            height: 40px;
+            z-index: -1;
+          }
+
+          &::after {
+            content: "";
+            position: absolute;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+          }
+        }
+
+        &:checked {
+          + label::after {
+            background: #1574a1;
+            box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
+            color: #fff;
+          }
+          + label span {
+            color: #fff;
+          }
+        }
+
+        &:focus {
+          + label::before {
+            background-color: #1574a1;
+          }
+          + label span {
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    &.past-day {
+
+      input[type="radio"] {
+        position: absolute;
+        opacity: 0;
+        height: 0.1px;
+        width: 0.1px;
+
+        + label {
+          position: relative;
+          cursor: pointer;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          color: #8E9292;
+
+          span {
+            z-index: 2;
+          }
+
+          &::before {
+            content: "";
+            position: absolute;
+            border-radius: 50%;
+            border: 1px solid transparent;
+            background-color: transparent;
+            color: #1574a1;
+            width: 40px;
+            height: 40px;
+            z-index: -1;
+          }
+
+          &::after {
+            content: "";
+            position: absolute;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+          }
+        }
+
+        &:checked {
+          + label::after {
+            background: #1574a1;
+            box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
+            color: #fff;
+          }
+          + label span {
+            color: #fff;
+          }
+        }
+
+        &:focus {
+          + label::before {
+            background-color: transparent;
+          }
+          + label span {
+            color: #1574a1;
+          }
+        }
+
+        &:active {
+          + label::before {
+            background-color: #1574a1;
+          }
+          + label span {
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    &.future-day {
+
+      input[type="radio"] {
+        position: absolute;
+        opacity: 0;
+        height: 0.1px;
+        width: 0.1px;
+
+        + label {
+          position: relative;
+          cursor: pointer;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          color: #4D5151;
+
+          span {
+            z-index: 2;
+          }
+
+          &::before {
+            content: "";
+            position: absolute;
+            border-radius: 50%;
+            border: 1px solid transparent;
+            background-color: transparent;
+            color: #1574a1;
+            width: 40px;
+            height: 40px;
+            z-index: -1;
+          }
+
+          &::after {
+            content: "";
+            position: absolute;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+          }
+        }
+      }
+    }
+
+    &.current-day {
+
+      input[type="radio"] {
+        position: absolute;
+        // opacity: 0;
+        height: 0.1px;
+        width: 0.1px;
+
+        &:after {
+          content: "\A";
+          width:4px;
+          height:4px;
+          border-radius:50%;
+          background: #1574a1;
+          position: absolute;
+          top: 8px;
+          left: -1px;
+          z-index: 1;
+        }
+
+        &:checked {
+          + label::after {
+            background: #1574a1;
+            box-shadow: 0 0 0 3px #fff, 0 0 0 5.5px #1574a1;
+            color: #fff;
+          }
+          + label span {
+            color: #fff;
+          }
+          &:after {
+            background: #fff;
+          }
+        }
+      }
+      span {
+        position: relative;
+        top: -.25rem;
+      }
+    }
+  }
+
+}
+
+</style>

src/constants/endpoints.js

@@ -67,12 +67,12 @@ const endpoints = {
     url: "/parts/api/v1/parts/part-from-capability-answer",
     method: "POST"
   },
-  SaveOrder: {
+  SaveSession: {
-    url: "/order/api/v1/order/save",
+    url: "/order/api/v1/order/save-session",
     method: "POST",
   },
-  LoadOrder: {
+  LoadSession: {
-    url: "/order/api/v1/order/load",
+    url: "/order/api/v1/order/load-session",
     method: "POST",
   },
   ValidateZip: {

src/constants/store-actions.js

@@ -25,9 +25,9 @@ const storeActions = {
   GET_PART_FROM_CAPABILITY_QUESTION_ANSWER:
     "getPartFromCapabilityQuestionAnswer",
   GET_MOLDING_QUESTIONS: "getMoldingQuestions",
-  SAVE_ORDER: "saveOrder",
+  SAVE_SESSION: "saveSession",
-  LOAD_ORDER: "loadOrder",
+  LOAD_SESSION: "loadSession",
-  UPDATE_STORE_WITH_SAVE_ORDER_RESPONSE: "updateStoreWithSaveOrderResponse",
+  UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE: "updateStoreWithSaveSessionResponse",
   VALIDATE_ZIP: "validateZip",
   LOG_EXPERIMENT_EXPOSURE: "logExperimentExposure",
   LOG_PAGE_VIEW: "logPageView",
@@ -36,7 +36,7 @@ const storeActions = {
   GET_EXPERIMENTS_BY_USER: "GetExperimentsByUser",
   RUN_EXPERIMENTS_FOR_TRIGGER: "runExperimentsForTrigger",
   CLEAR_VIN: "clearVin",
-  RESET_SAVE_ORDER_PROMISE: "resetSaveOrderPromise",
+  RESET_SAVE_SESSION_PROMISE: "resetSaveSessionPromise",
 
   // DEPENDENCY MUTATIONS
   RESET_VEHICLE_STATE_AND_DEPENDENCIES: "resetVehicleAndDependencies",

src/constants/store-mutations.js

@@ -55,12 +55,12 @@ const storeMutations = {
   RESET_REGISTRATION_STATE: "resetRegistrationState",
   RESET_GLASS_PARTS_STATE: "resetGlassPartsState",
   RESET_STATE: "resetState",
-  RESET_SAVE_ORDER_PROMISE: "resetSaveOrderPromise",
+  RESET_SAVE_SESSION_PROMISE: "resetSaveSessionPromise",
 
   // OTHER MUTATIONS
   UPDATE_PAGE_DATA: "updatePageData",
   UPDATE_STATE_WITH_ORDER_INFORMATION: "updateStateWithOrderInformation",
-  UPDATE_SAVE_ORDER_PROMISE: "updateSaveOrderPromise",
+  UPDATE_SAVE_SESSION_PROMISE: "updateSaveSessionPromise",
   UPDATE_LAST_PAGE_VISITED: "updateLastPageVisited",
 
   // EXPERIMENT MUTATIONS

src/helpers/heritage-integration/navigation-helper.js

@@ -1,7 +1,7 @@
 import { queryStrings } from "@/constants/query-strings";
 import { externalUrls } from "@/router/router-constants/externalUrl-values";
 import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
-import { saveOrder } from "@/helpers/heritage-integration/order-helper.js";
+import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
 import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
 import store from "@/store";
 import router from "@/router";
@@ -39,10 +39,10 @@ export async function getPageToRouteExistingOrderTo(toRoute = {}, existingHerita
     Used to navigate to the heritage funnel with the correct query string and url.
 */
 
-export async function navigateToHeritageFunnel(shouldSaveOrder = true) {
+export async function navigateToHeritageFunnel(shouldSaveSession = true) {
     // Create the order (or save existing order) when navigating to Heritage Funnel.
-    if (shouldSaveOrder) {
+    if (shouldSaveSession) {
-        await saveOrder();
+        await saveSession();
     }
 
     router.navigateToExternalUrl(

src/helpers/heritage-integration/navigation-helper.spec.js

@@ -295,7 +295,7 @@ describe("getPageToRouteExistingOrderTo", () => {
 });
 
 describe("navigateToHeritageFunnel", () => {
-    test("should save order", async () => {
+    test("should save session", async () => {
         // Arrange
         const mockReferralNumber = "2";
         const mockCorrelationId = "55";
@@ -308,26 +308,26 @@ describe("navigateToHeritageFunnel", () => {
 
         const mockData = {
             actionList: [{
-                actionName: storeActions.SAVE_ORDER,
+                actionName: storeActions.SAVE_SESSION,
                 data: mockOrderInfo,
             }]
         }
 
         setupMocksForJsFiles(mockData);
-        const saveOrderFunction = jest.spyOn(orderHelper, "saveOrder");
+        const saveSessionFunction = jest.spyOn(orderHelper, "saveSession");
         router.navigateToExternalUrl = jest.fn();
 
         // Act
         await navigateToHeritageFunnel();
 
         // Assert
-        expect(saveOrderFunction).toHaveBeenCalled();
+        expect(saveSessionFunction).toHaveBeenCalled();
 
         // Should save before we navigate to heritage by default
-        const saveOrderFunctionCallOrder = saveOrderFunction.mock.invocationCallOrder[0];
+        const saveSessionFunctionCallOrder = saveSessionFunction.mock.invocationCallOrder[0];
         const routerNavigateFunctionCallOrder = router.navigateToExternalUrl.mock.invocationCallOrder[0];
-        expect(saveOrderFunctionCallOrder).toBeLessThan(routerNavigateFunctionCallOrder);
+        expect(saveSessionFunctionCallOrder).toBeLessThan(routerNavigateFunctionCallOrder);
-        saveOrderFunction.mockRestore();
+        saveSessionFunction.mockRestore();
     });
 
     test("should go to heritage funnel", async () => {
@@ -343,7 +343,7 @@ describe("navigateToHeritageFunnel", () => {
 
         const mockData = {
             actionList: [{
-                actionName: storeActions.SAVE_ORDER,
+                actionName: storeActions.SAVE_SESSION,
                 data: mockOrderInfo,
             }]
         }
@@ -366,7 +366,7 @@ describe("navigateToHeritageFunnel", () => {
         );
     });
 
-    test("should not save order, but should still navigate", async () => {
+    test("should not save session, but should still navigate", async () => {
         // Arrange
         const mockReferralNumber = "2";
         const mockCorrelationId = "55";
@@ -376,22 +376,22 @@ describe("navigateToHeritageFunnel", () => {
 
         const mockData = {
             actionList: [{
-                actionName: storeActions.SAVE_ORDER,
+                actionName: storeActions.SAVE_SESSION,
                 data: mockOrderInfo,
             }]
         }
 
         setupMocksForJsFiles(mockData);
-        const saveOrderFunction = jest.spyOn(orderHelper, "saveOrder");
+        const saveSessionFunction = jest.spyOn(orderHelper, "saveSession");
         router.navigateToExternalUrl = jest.fn();
 
         // Act
         await navigateToHeritageFunnel(false);
 
         // Assert
-        expect(saveOrderFunction).not.toHaveBeenCalled();
+        expect(saveSessionFunction).not.toHaveBeenCalled();
         expect(router.navigateToExternalUrl).toHaveBeenCalled();
-        saveOrderFunction.mockRestore();
+        saveSessionFunction.mockRestore();
     });
 });
 

src/helpers/heritage-integration/order-helper.js

@@ -10,7 +10,7 @@ import { storeMutations } from "@/constants/store-mutations";
     it will reset the state and go back to the start of the funnel.
 
 */
-export async function loadOrderIfPresent() {
+export async function loadSessionIfPresent() {
     const funnelCookie = getFunnelCookie();
     
     // Do nothing if there is no cookie, correlation id, or referral number.
@@ -26,7 +26,7 @@ export async function loadOrderIfPresent() {
     }
 
     // Load referral if there is a cookie, and it doesn't indicate it needs a state reset.
-    return (await loadOrder(funnelCookie.ReferralNumber, funnelCookie.ReferralDate, funnelCookie.ReferralCorrelationId, funnelCookie.ReferralParentAccountNumber)).data;
+    return (await loadSession(funnelCookie.ReferralNumber, funnelCookie.ReferralDate, funnelCookie.ReferralCorrelationId, funnelCookie.ReferralParentAccountNumber)).data;
 }
 
 /*
@@ -34,34 +34,34 @@ export async function loadOrderIfPresent() {
     This will also set Referral information in the store after saving, and then
     update the cookie.
 */
-export async function saveOrder() {
+export async function saveSession() {
-    var saveOrderPromise;
+    var saveSessionPromise;
-    if (store.getters.applicationUser.saveOrderPromise) {
+    if (store.getters.applicationUser.saveSessionPromise) {
-        // queue newest request after current saveOrderPromise resolves 
+        // queue newest request after current saveSessionPromise resolves 
-        saveOrderPromise = store.getters.applicationUser.saveOrderPromise.then(() => {
+        saveSessionPromise = store.getters.applicationUser.saveSessionPromise.then(() => {
-            // get a new saveOrderPromise
+            // get a new saveSessionPromise
-            return saveOrderHelper();
+            return saveSessionHelper();
         });
     } else {
-        // create an initial saveOrderPromise
+        // create an initial saveSessionPromise
-        saveOrderPromise = saveOrderHelper();
+        saveSessionPromise = saveSessionHelper();
     }
-    store.commit(storeMutations.UPDATE_SAVE_ORDER_PROMISE, saveOrderPromise);
+    store.commit(storeMutations.UPDATE_SAVE_SESSION_PROMISE, saveSessionPromise);
     // await here to allow for a caller to await and make the function synchronous
-    await saveOrderPromise;
+    await saveSessionPromise;
 }
 
 
 // PRIVATE FUNCTIONS //
 
 /*
-    Calls API to load order given the referral number, referralDate, and referralCorrelationId
+    Calls API to load session given the referral number, referralDate, and referralCorrelationId
     and returns the response.
 */
-async function loadOrder(referralNumber, referralDate, referralCorrelationId, accountNumber) {
+async function loadSession(referralNumber, referralDate, referralCorrelationId, accountNumber) {
-    // await the saveOrderPromise in the store to make sure we're loading up to date information
+    // await the saveSessionPromise in the store to make sure we're loading up to date information
-    await store.getters.applicationUser.saveOrderPromise;
+    await store.getters.applicationUser.saveSessionPromise;
-    const response = await baseMixin.methods.dispatchStoreAction(storeActions.LOAD_ORDER,
+    const response = await baseMixin.methods.dispatchStoreAction(storeActions.LOAD_SESSION,
         {
             referralNumber: referralNumber.toString(),
             referralDate: referralDate,
@@ -73,18 +73,18 @@ async function loadOrder(referralNumber, referralDate, referralCorrelationId, ac
 }
 
 /*
-    Encapsulates asynchronous Save Order logic inside a promise to allow for Save Order queuing 
+    Encapsulates asynchronous Save Session logic inside a promise to allow for Save Session queuing 
 */
-async function saveOrderHelper() {
+async function saveSessionHelper() {
-    const savedOrderInfo = await baseMixin.methods.dispatchStoreAction(storeActions.SAVE_ORDER);
+    const savedSessionInfo = await baseMixin.methods.dispatchStoreAction(storeActions.SAVE_SESSION);
-    // Update the store with information received from the saveOrder response
+    // Update the store with information received from the saveSession response
-    await baseMixin.methods.dispatchStoreAction(storeActions.UPDATE_STORE_WITH_SAVE_ORDER_RESPONSE, {
+    await baseMixin.methods.dispatchStoreAction(storeActions.UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE, {
-        referralNumber: savedOrderInfo.data.referralNumber.toString(),
+        referralNumber: savedSessionInfo.data.referralNumber.toString(),
-        referralCorrelationId: savedOrderInfo.data.referralCorrelationId,
+        referralCorrelationId: savedSessionInfo.data.referralCorrelationId,
-        referralDate: savedOrderInfo.data.referralDate,
+        referralDate: savedSessionInfo.data.referralDate,
-        accountNumber: savedOrderInfo.data.accountNumber.toString(),
+        accountNumber: savedSessionInfo.data.accountNumber.toString(),
-        savedSessionId: savedOrderInfo.data.savedSessionId,
+        savedSessionId: savedSessionInfo.data.savedSessionId,
-        crmCustomerId: savedOrderInfo.data.crmCustomerId.toString(),
+        crmCustomerId: savedSessionInfo.data.crmCustomerId.toString(),
     }, false);
 
     // Update the cookie with the referral information when saved.

src/helpers/heritage-integration/order-helper.spec.js

@@ -1,11 +1,11 @@
 import * as cookieHelper from "@/helpers/heritage-integration/cookie-helper";
-import { loadOrderIfPresent, saveOrder } from "@/helpers/heritage-integration/order-helper";
+import { loadSessionIfPresent, saveSession } from "@/helpers/heritage-integration/order-helper";
 import { cookieNames } from "@/constants/cookie-names";
 import { setupMocksForJsFiles, removeAllTestCookies, getMockOrderInfo, setupCookies } from "@/helpers/unit-test-helper.js";
 import { storeActions } from "@/constants/store-actions";
 import router from "@/router";
 
-describe("loadOrderIfPresent", () => {
+describe("loadSessionIfPresent", () => {
 
     afterEach(() => {
         removeAllTestCookies();
@@ -25,7 +25,7 @@ describe("loadOrderIfPresent", () => {
         document.cookie = `${cookieNames.FUNNEL_SESSION_INFO}=${JSON.stringify(testCookieValue)}; path=/; ${cookieHelper.getCookieDomainValue()}`;
 
         // Act
-        loadOrderIfPresent();
+        loadSessionIfPresent();
 
         // Assert
         expect(cookieHelper.deleteFunnelCookie).toHaveBeenCalled();
@@ -49,7 +49,7 @@ describe("loadOrderIfPresent", () => {
         var mocks = setupMocksForJsFiles(mockData);
 
         // Act
-        loadOrderIfPresent();
+        loadSessionIfPresent();
 
         // Assert
         expect(cookieHelper.getFunnelCookie).toHaveBeenCalled();
@@ -69,21 +69,21 @@ describe("loadOrderIfPresent", () => {
         var mocks = setupMocksForJsFiles(mockData);
 
         // Act
-        loadOrderIfPresent();
+        loadSessionIfPresent();
 
         // Assert
         expect(cookieHelper.getFunnelCookie).toHaveBeenCalled();
         expect(mocks.baseMixin.methods.dispatchStoreAction).not.toHaveBeenCalledWith(storeActions.RESET_STATE);
     });
 
-    test("Funnel cookie valid, should call loadOrder", async () => {
+    test("Funnel cookie valid, should call loadSession", async () => {
         // Arrange
         cookieHelper.getFunnelCookie = jest.spyOn(cookieHelper, "getFunnelCookie")
             .mockReturnValueOnce({ ShouldResetState: false, ReferralNumber: 123456,  ReferralCorrelationId: "yyy-yyy-yyyy", ReferralDate: new Date()});
 
         const mockData = {
             actionList: [{
-                actionName: storeActions.LOAD_ORDER,
+                actionName: storeActions.LOAD_SESSION,
                 data: { ReferralNumber: 123456, vehicle: { year: 2010 } }
             }],
         }
@@ -91,22 +91,22 @@ describe("loadOrderIfPresent", () => {
         var mocks = setupMocksForJsFiles(mockData);
 
         // Act
-        const result = await loadOrderIfPresent();
+        const result = await loadSessionIfPresent();
 
         // Assert
         expect(cookieHelper.getFunnelCookie).toHaveBeenCalled();
-        expect(mocks.baseMixin.methods.dispatchStoreAction).not.toHaveBeenCalledWith(storeActions.LOAD_ORDER);
+        expect(mocks.baseMixin.methods.dispatchStoreAction).not.toHaveBeenCalledWith(storeActions.LOAD_SESSION);
         expect(result.ReferralNumber).toBe(123456);
         expect(result.vehicle.year).toBe(2010);
     });
 });
 
-describe("saveOrder", () => {
+describe("saveSession", () => {
     afterEach(() => {
         removeAllTestCookies();
     });
 
-    test("saveOrder => should set state order values", async () => {
+    test("saveSession => should set state order values", async () => {
         // Arrange
         const mockReferralNumber = "2";
         const mockCorrelationId = "55";
@@ -120,11 +120,11 @@ describe("saveOrder", () => {
         const mockData = {
             actionList: [
                 {
-                    actionName: storeActions.SAVE_ORDER,
+                    actionName: storeActions.SAVE_SESSION,
                     data: mockOrderInfo,
                 },
                 {
-                    actionName: storeActions.UPDATE_STORE_WITH_SAVE_ORDER_RESPONSE
+                    actionName: storeActions.UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE
                 }
             ]
         }
@@ -132,11 +132,11 @@ describe("saveOrder", () => {
         const mocks = setupMocksForJsFiles(mockData);
 
         // Act
-        await saveOrder();
+        await saveSession();
 
         // Assert
-        expect(mocks.baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(storeActions.SAVE_ORDER);
+        expect(mocks.baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(storeActions.SAVE_SESSION);
-        expect(mocks.baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(storeActions.UPDATE_STORE_WITH_SAVE_ORDER_RESPONSE, {
+        expect(mocks.baseMixin.methods.dispatchStoreAction).toHaveBeenCalledWith(storeActions.UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE, {
             referralNumber: mockReferralNumber,
             referralDate: mockReferralDate,
             referralCorrelationId: mockCorrelationId,
@@ -146,7 +146,7 @@ describe("saveOrder", () => {
         }, false);
     });
 
-    test("saveOrder => should update DidHeritageFunnelUpdateLast cookie value to false", async () => {
+    test("saveSession => should update DidHeritageFunnelUpdateLast cookie value to false", async () => {
         // Arrange
         const mockReferralNumber = 1566818;
         const mockReferralDate = "2022-03-15T10:56:24.597";
@@ -159,7 +159,7 @@ describe("saveOrder", () => {
 
         const mockData = {
             actionList: [{
-                actionName: storeActions.SAVE_ORDER,
+                actionName: storeActions.SAVE_SESSION,
                 data: mockOrderInfo,
             }],
             router: router
@@ -178,7 +178,7 @@ describe("saveOrder", () => {
         setupCookies({ funnelCookieValue: JSON.stringify(testCookieValue) });
 
         // Act
-        await saveOrder();
+        await saveSession();
 
         // Assert
         expect(cookieHelper.getFunnelCookie().DidHeritageFunnelUpdateLast).toEqual(false);

src/mixins/input-button-wrapper-mixin.js

@@ -20,7 +20,6 @@ export default {
             type: Boolean,
             default: true,
         },
-        // pushClickEventToGA: Function,
         lastValuePushedToGa: [String, Number],
         setLastValuePushedToGa: Function
     },
@@ -30,22 +29,7 @@ export default {
                 this.preHandleAnswerChange(e);
             }
 
-            // console.log("IBWM: ", e)
             this.$emit("change", e);
-            // if (e.lastValuePushedToGa) {
-            //     console.log("sup")
-            //     this.$emit("update:lastValuePushedToGa", e.lastValuePushedToGa);
-            // }
         },
     },
-    // computed: {
-    //     selectedValueHandler: {
-    //         get: () => {
-    //             return this.modelValue;
-    //         },
-    //         set: function(newValue) {
-    //             this.$emit("update:modelValue", newValue);
-    //         }
-    //     },
-    // },
 };

src/mixins/vin-pages-mixin.js

@@ -1,14 +1,14 @@
 import { storeActions } from "@/constants/store-actions.js";
 import store from "@/store";
 import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
-import { saveOrder } from "@/helpers/heritage-integration/order-helper.js";
+import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
 
 export default {
     methods: {
         async navigateForwardWithSingleCarMatch() {
             // If we have not already saved a session, we need to save one now before the lengthy call to getPartsOrQuestions
             if (!store.getters.applicationUser.savedSessionId) {
-                saveOrder();
+                saveSession();
             }
             
             const result = await this.dispatchStoreAction(storeActions.GET_PARTS_OR_QUESTIONS);

src/mixins/vin-pages-mixin.spec.js

@@ -10,7 +10,7 @@ jest.mock("@/helpers/heritage-integration/navigation-helper", () => ({
 }));
 
 jest.mock("@/helpers/heritage-integration/order-helper.js", () => ({
-    saveOrder: jest.fn()
+    saveSession: jest.fn()
 }));
 
 describe("vin-pages-mixin", () => {

src/router/index.js

@@ -11,7 +11,7 @@ import { getDeviceIdValue } from "@/helpers/heritage-integration/cookie-helper";
 // Heritage integration
 import { isSavedSessionStillActive } from "@/helpers/heritage-integration/session-helper";
 import { updateOrCreateFunnelCookie, getFunnelCookie, updateSessionIdCookie } from "@/helpers/heritage-integration/cookie-helper";
-import { loadOrderIfPresent, saveOrder } from "@/helpers/heritage-integration/order-helper";
+import { loadSessionIfPresent, saveSession } from "@/helpers/heritage-integration/order-helper";
 import { getPageToRouteExistingOrderTo, navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 
 import baseMixin from "@/mixins/base-mixin";
@@ -23,6 +23,7 @@ import { applicationConfig } from "../constants/application-config";
 
 // Components
 import quote from "@/layouts/quote/quote.vue";
+import datePicker from "@/common-components/date-picker/date-picker.vue";
 
 const routes = [
   {
@@ -30,6 +31,11 @@ const routes = [
     name: "quote",
     component: quote,
   },
+  {
+    path: "/date-picker", // This is a temporary route for testing.
+    name: "date-picker",
+    component: datePicker,
+  },
   {
     path: "/",
     name: "root",
@@ -56,11 +62,11 @@ const routes = [
 
         // On entering the funnel "fresh", read cookie information, decide what to do next.
         if (from.redirectedFrom === undefined) {
-          // clear the saveOrderPromise - if it exists in the vuex store but a new instance was created
+          // clear the saveSessionPromise - if it exists in the vuex store but a new instance was created
-          //   the saveOrderPromise will no longer point to a valid promise
+          //   the saveSessionPromise will no longer point to a valid promise
-          baseMixin.methods.dispatchStoreAction(storeActions.RESET_SAVE_ORDER_PROMISE);
+          baseMixin.methods.dispatchStoreAction(storeActions.RESET_SAVE_SESSION_PROMISE);
-          const loadOrderResponse = await loadOrderIfPresent();
+          const loadSessionResponse = await loadSessionIfPresent();
-          const pageToRedirectTo = await getPageToRouteExistingOrderTo(to, loadOrderResponse);
+          const pageToRedirectTo = await getPageToRouteExistingOrderTo(to, loadSessionResponse);
 
           // If getPageToRouteExistingOrderTo determines that the return user needs to
           // go back to heritage funnel, send them there and stop our current navigation.
@@ -143,7 +149,7 @@ router.afterEach((to, from) => {
   // If saving on navigation is requested, check for saved SessionId or EmailAddress to determine if saving is appropriate
   if (eval(to.params.isSavingNavigation)) {
     if (store.getters.applicationUser.savedSessionId || store.getters.order.customer?.emailAddress) {
-      saveOrder();
+      saveSession();
     }
   }
 

src/store/index.js

@@ -71,7 +71,7 @@ const getDefaultState = () => {
       eventBus: [],
       pageData: {},
       savedSessionTimeout: getDateForSavedSessionTimeout(),
-      saveOrderPromise: null,
+      saveSessionPromise: null,
       savedSessionId: null,
       crmCustomerId: null,
       lastPageVisited: null,
@@ -231,8 +231,8 @@ export const mutations = {
   },
 
   // applicationUser MUTATIONS
-  updateSaveOrderPromise(state, saveOrderPromise) {
+  updateSaveSessionPromise(state, saveSessionPromise) {
-    state.applicationUser.saveOrderPromise = saveOrderPromise;
+    state.applicationUser.saveSessionPromise = saveSessionPromise;
   },
   updateSavedSessionId(state, savedSessionId) {
     state.applicationUser.savedSessionId = savedSessionId;
@@ -300,8 +300,8 @@ export const mutations = {
   resetState(state) {
     Object.assign(state, getDefaultState());
   },
-  resetSaveOrderPromise(state) {
+  resetSaveSessionPromise(state) {
-    state.applicationUser.saveOrderPromise = null;
+    state.applicationUser.saveSessionPromise = null;
   },
   // Misc Mutations
   updateStateWithOrderInformation(state, orderInformation) {
@@ -606,8 +606,8 @@ export const actions = {
   resetState(context) {
     context.commit(storeMutations.RESET_STATE);
   },
-  resetSaveOrderPromise(context) {
+  resetSaveSessionPromise(context) {
-    context.commit(storeMutations.RESET_SAVE_ORDER_PROMISE);
+    context.commit(storeMutations.RESET_SAVE_SESSION_PROMISE);
   },
 
   // Content API Actions
@@ -660,18 +660,7 @@ export const actions = {
   },
 
   // Misc Actions
-  updateStoreWithSaveOrderResponse(
+  updateStoreWithSaveSessionResponse(context, { referralNumber, referralDate, referralCorrelationId, eon, accountNumber, savedSessionId, crmCustomerId }) {
-    context,
-    {
-      referralNumber,
-      referralDate,
-      referralCorrelationId,
-      eon,
-      accountNumber,
-      savedSessionId,
-      crmCustomerId,
-    }
-  ) {
     context.commit(storeMutations.UPDATE_REFERRAL_NUMBER, referralNumber);
     context.commit(storeMutations.UPDATE_REFERRAL_DATE, referralDate);
     context.commit(
@@ -908,8 +897,8 @@ export const actions = {
     });
   },
 
-  // Order API Actions
+  // Session API Actions
-  saveOrder(context) {
+  saveSession(context) {
     const vehicle = context.getters.vehicle;
     const damage = context.getters.damage;
     const order = context.state.order;
@@ -917,8 +906,8 @@ export const actions = {
     const lineItems = context.state.order.lineItems;
 
     return globalMethods.callHttpClient({
-      method: endpoints.SaveOrder.method,
+      method: endpoints.SaveSession.method,
-      endpoint: endpoints.SaveOrder.url,
+      endpoint: endpoints.SaveSession.url,
       payload: {
         vehicle: {
           carId: vehicle.carId,
@@ -965,35 +954,24 @@ export const actions = {
       },
     });
   },
-  loadOrder(
+  loadSession(context, { referralNumber, referralDate, referralCorrelationId, accountNumber }) {
-    context,
+    return globalMethods.callHttpClient({
-    { referralNumber, referralDate, referralCorrelationId, accountNumber }
+      method: endpoints.LoadSession.method,
-  ) {
+      endpoint: endpoints.LoadSession.url,
-    return globalMethods
+      payload: {
-      .callHttpClient({
+        referralNumber: referralNumber?.toString(),
-        method: endpoints.LoadOrder.method,
+        referralDate: referralDate,
-        endpoint: endpoints.LoadOrder.url,
+        referralCorrelationId: referralCorrelationId,
-        payload: {
+        accountNumber: accountNumber?.toString()
-          referralNumber: referralNumber?.toString(),
+      },
-          referralDate: referralDate,
+    }).then((response) => {
-          referralCorrelationId: referralCorrelationId,
+      // clear the state if the existing EON does not equal what is returned from loadSession
-          accountNumber: accountNumber?.toString(),
+      if (context.state.order.eon && context.state.order.eon != response.data.eon) {
-        },
+        context.commit(storeMutations.RESET_STATE);
-      })
+      }
-      .then((response) => {
+      context.commit(storeMutations.UPDATE_STATE_WITH_ORDER_INFORMATION, response.data);
-        // clear the state if the existing EON does not equal what is returned from loadOrder
+      return response;
-        if (
+    });
-          context.state.order.eon &&
-          context.state.order.eon != response.data.eon
-        ) {
-          context.commit(storeMutations.RESET_STATE);
-        }
-        context.commit(
-          storeMutations.UPDATE_STATE_WITH_ORDER_INFORMATION,
-          response.data
-        );
-        return response;
-      });
   },
 
   // Business domain actions

src/store/store.spec.js

@@ -595,7 +595,7 @@ describe("Actions", () => {
     expect(response.data).toEqual({ imageUrl: "https://test.com" });
   });
 
-  it("saveOrder action, returns order information", async () => {
+  it("saveSession action, returns order information", async () => {
     // Arrange
     const context = state;
 
@@ -623,14 +623,14 @@ describe("Actions", () => {
     });
 
     // Act
-    const response = await actions.saveOrder(context);
+    const response = await actions.saveSession(context);
 
     // Assert
     expect(response.data).toEqual({ referralNumber: 123 });
   });
 
 
-  it("loadOrder action, returns order information, calls mutation", async () => {
+  it("loadSession action, returns order information, calls mutation", async () => {
     // Arrange
     const context = state;
 
@@ -643,14 +643,14 @@ describe("Actions", () => {
     context.commit = commit;
 
     // Act
-    const response = await actions.loadOrder(context, { referralNumber: "123", referralDate: new Date().toUTCString(), referralCorrelationId: "xxx-xxx-xxx" });
+    const response = await actions.loadSession(context, { referralNumber: "123", referralDate: new Date().toUTCString(), referralCorrelationId: "xxx-xxx-xxx" });
 
     // Assert
     expect(response.data).toEqual({ referralNumber: 123 });
     expect(commit).toBeCalledWith(storeMutations.UPDATE_STATE_WITH_ORDER_INFORMATION, { "referralNumber": 123 });
   });
 
-  it("loadOrder: state doesn't have EON => do not reset state", async () => {
+  it("loadSession: state doesn't have EON => do not reset state", async () => {
     // Arrange
     const context = state;
 
@@ -665,14 +665,14 @@ describe("Actions", () => {
     }
 
     // Act
-    const response = await actions.loadOrder(context, { referralNumber: "123", referralDate: new Date().toUTCString(), referralCorrelationId: "xxx-xxx-xxx" });
+    const response = await actions.loadSession(context, { referralNumber: "123", referralDate: new Date().toUTCString(), referralCorrelationId: "xxx-xxx-xxx" });
 
     // Assert
     expect(response.data.eon).toEqual("123");
     expect(context.commit).not.toBeCalledWith(storeMutations.RESET_STATE);
   });
 
-  it("loadOrder eon doesn't match eon in state => reset state", async () => {
+  it("loadSession eon doesn't match eon in state => reset state", async () => {
     // Arrange
     const context = state;
 
@@ -688,14 +688,14 @@ describe("Actions", () => {
     }
 
     // Act
-    const response = await actions.loadOrder(context, { referralNumber: "123", referralDate: new Date().toUTCString(), referralCorrelationId: "xxx-xxx-xxx" });
+    const response = await actions.loadSession(context, { referralNumber: "123", referralDate: new Date().toUTCString(), referralCorrelationId: "xxx-xxx-xxx" });
 
     // Assert
     expect(response.data.eon).toEqual("123");
     expect(context.commit).toBeCalledWith(storeMutations.RESET_STATE);
   });
 
-  it("updateStoreWithSaveOrderResponse, should call commit six times", () => {
+  it("updateStoreWithSaveSessionResponse, should call commit six times", () => {
     // Arrange
     const context = state;
     const commit = jest.fn();
@@ -703,7 +703,7 @@ describe("Actions", () => {
     context.commit = commit;
 
     // Act
-    actions.updateStoreWithSaveOrderResponse(context,
+    actions.updateStoreWithSaveSessionResponse(context,
       {
         referralNumber: "123",
         referralDate: new Date().toUTCString(),

src/ux-components/list-button/list-button.vue

@@ -48,7 +48,6 @@ export default {
     },
     methods: {
         displayLoader() {
-            console.log(this.selectingInitiatesLoad)
             this.isLoaderDisplayed = true;
         },
         preHandleAnswerChange() {

vue.config.js

@@ -1,5 +1,5 @@
 process.env.VUE_APP_CONSUMER_CF_DISTRO =
-  "https://digitalapi.dev.sagaws.net";
+  "https://digitalapi.dev.safelite.io";
 process.env.VUE_APP_HERITAGE_FUNNEL =
   "http://localhost:38000/default.aspx";
 process.env.VUE_APP_GOOGLE_PLACES_API_KEY =