Merge pull request #488 from Safelite/feature/richardson/SSR-687.2

Styling Updates via schedule

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

@@ -734,7 +734,11 @@ export default {
     }
     .loader {
         height: 2rem;
-        width: calc(100% - 1.5rem);
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        transform: unset;
+        right: unset;
 
         &::after {
             width: 1.5rem;

src/iss-components/site-sub-header/site-sub-header.vue

@@ -36,7 +36,7 @@ import {
     getRouterLinkHtmlStringFromCopy
 } from '@/helpers/cms-content-helper';
 
-import stripRteStyle from '@/helpers/text-helper';
+import { stripRteStyle } from '@/helpers/text-helper';
 
 export default {
     name: 'site-sub-header',

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -445,3 +445,12 @@ export default {
     }
 };
 </script>
+
+<style lang="scss">
+.replace-options-question {
+    .two-list-card-width {
+        width: 100%;
+        flex: 0 auto;
+    }
+}
+</style>

src/store/index.js

@@ -11,6 +11,7 @@ import applicationConfig from '@/constants/application-config';
 import issPageValues from '@/router/router-constants/issPage-values';
 import damageLocationsSelected from '@/constants/damage-locations-selected';
 import coverageStatuses from '@/constants/coverage-statuses';
+import { deepEqual } from '@/helpers/object-helper';
 import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from '@/constants/schedule-constants';
 import getDateDifferenceInDays from '@/helpers/date-helper';
 
@@ -1259,6 +1260,11 @@ export const useMainStore = defineStore({
             this.order.vehicle.registration.firstName = null;
             this.order.vehicle.registration.lastName = null;
         },
+        resetServiceLocationAndDependencies(context) {
+            this.resetServiceLocationAppointmentType();
+            this.resetServiceLocationProvider();
+            this.resetSchedule();
+        },
         resetServiceLocationAppointmentType() {
             this.order.serviceLocation.appointmentType = null;
         },
@@ -1510,6 +1516,8 @@ export const useMainStore = defineStore({
                 || !sortedPreviousResultsArray?.every((x, i) => x.result === sortedPartQuestionAnswersArray[i].result);
 
             if (havePartQuestionAnswersChanged) {
+                this.resetServiceLocationAndDependencies();
+
                 this.updateGlassParts(null);
                 this.updateMoldingQuestionAnswers(null);
                 this.updateCapabilityQuestionAnswers(null);
@@ -1531,6 +1539,8 @@ export const useMainStore = defineStore({
                 || !sortedPreviousResultsArray?.every((x, i) => x.result === sortedMoldingQuestionAnswersArray[i].result);
 
             if (haveMoldingQuestionAnswersChanged) {
+                this.resetServiceLocationAndDependencies();
+
                 this.updateGlassParts(null);
                 this.updateSupportingItems(null);
                 this.updateCapabilityQuestionAnswers(null);
@@ -1548,6 +1558,8 @@ export const useMainStore = defineStore({
                 || !sortedPreviousResultsArray?.every((x, i) => x.result === sortedCapabilityQuestionAnswersArray[i].result);
 
             if (haveCapabilityQuestionAnswersChanged) {
+                this.resetServiceLocationAndDependencies();
+
                 this.updateGlassParts(null);
                 this.updateSupportingItems(null);
             }
@@ -1556,10 +1568,16 @@ export const useMainStore = defineStore({
             this.updateCapabilityQuestionAnswers(capabilityQuestionAnswersArray);
         },
         saveGlassParts(glassParts) {
+            if (!deepEqual(glassParts, this.order.lineItems.glassParts)) {
+                this.resetServiceLocationAndDependencies();
+            }
             this.order.lineItems.glassParts = glassParts;
         },
         saveSupportingItems(supportingItems) {
-            // TODO: RESET_SERVICE_LOCATION_STATE_AND_DEPENDENCIES
+            if (!deepEqual(supportingItems, this.order.lineItems.supportingItems)) {
+                this.resetServiceLocationAndDependencies();
+            }
+
             this.order.lineItems.supportingItems = supportingItems;
         },
         saveSupportingItemsSuppressingStateResetting(supportingItems) {
@@ -1930,6 +1948,8 @@ export const useMainStore = defineStore({
             this.resetGlassPartsState();
             this.resetSupportingItemsState();
             this.resetVapsState();
+
+            this.resetServiceLocationAndDependencies();
         },
 
         resetPageFields() {

src/styles/ux-variables.scss

@@ -157,13 +157,20 @@ $spacer: 1rem;
 $spacers: (
     0: 0,
     1: $spacer * 0.25,
-    /* 8px */ 2: $spacer * 0.5,
+    /* 8px */
-    /* 12px */ 3: $spacer * 0.75,
+    2: $spacer * 0.5,
-    /* 16px */ 4: $spacer * 1,
+    /* 12px */
-    /* 24px */ 5: $spacer * 1.5,
+    3: $spacer * 0.75,
-    /* 32px */ 6: $spacer * 2,
+    /* 16px */
-    /* 40px */ 7: $spacer * 2.5,
+    4: $spacer * 1,
-    /* 48px */ 8: $spacer * 3,
+    /* 24px */
+    5: $spacer * 1.5,
+    /* 32px */
+    6: $spacer * 2,
+    /* 40px */
+    7: $spacer * 2.5,
+    /* 48px */
+    8: $spacer * 3,
 );
 
 //Grid breakpoints
@@ -190,3 +197,6 @@ $alert-color-scale: 40%;
 // This affects all [Bootstrap] modals
 $modal-fade-transform: translate(0, 100%);
 $modal-backdrop-opacity: 0;
+
+//Disable default !important behavior
+$enable-important-utilities: false;

src/ux-components/alert/alert.vue

@@ -76,6 +76,7 @@ import textBlock from '@/digital-components/text-block/text-block.vue';
 import textLink from '@/ux-components/text-link/text-link.vue';
 
 export default {
+    // eslint-disable-next-line vue/multi-word-component-names
     name: 'alert',
     components: {
         textBlock,

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

@@ -93,8 +93,8 @@ export default {
     img {
         // svg's should be constructed on the same canvas size/viewbox to ensure
         // they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
-        height: auto;
+        height: 2rem;
-        width: 6.5rem;
+        width: auto;
         margin-bottom: 2.2rem;
         max-width: 100%;
     }
@@ -105,8 +105,9 @@ export default {
 
         + .list-card-content {
             outline: none;
-            display: block;
+            display: flex;
             position: relative;
+            justify-content: flex-start;
 
             p {
                 color: $gray-600;

src/ux-components/loader/loader.vue

@@ -28,7 +28,7 @@ export default {
   display: flex;
 
   //Open an overlay to prevent page interaction
-  &:before {
+  &:before:not(.date-picker-hidden) {
       content: "";
       position: fixed;
       top: 0;