diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue index f30f9b7d..feaa430d 100644 --- a/src/digital-components/date-picker/date-picker.vue +++ b/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; diff --git a/src/iss-components/site-sub-header/site-sub-header.vue b/src/iss-components/site-sub-header/site-sub-header.vue index 2c998fb3..a26ea95f 100644 --- a/src/iss-components/site-sub-header/site-sub-header.vue +++ b/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', diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 02e00a05..0b079174 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -445,3 +445,12 @@ export default { } }; + + diff --git a/src/store/index.js b/src/store/index.js index 28363b8e..60699f03 100644 --- a/src/store/index.js +++ b/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() { diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss index 8ec17642..a67e7c76 100644 --- a/src/styles/ux-variables.scss +++ b/src/styles/ux-variables.scss @@ -157,13 +157,20 @@ $spacer: 1rem; $spacers: ( 0: 0, 1: $spacer * 0.25, - /* 8px */ 2: $spacer * 0.5, - /* 12px */ 3: $spacer * 0.75, - /* 16px */ 4: $spacer * 1, - /* 24px */ 5: $spacer * 1.5, - /* 32px */ 6: $spacer * 2, - /* 40px */ 7: $spacer * 2.5, - /* 48px */ 8: $spacer * 3, + /* 8px */ + 2: $spacer * 0.5, + /* 12px */ + 3: $spacer * 0.75, + /* 16px */ + 4: $spacer * 1, + /* 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; \ No newline at end of file diff --git a/src/ux-components/alert/alert.vue b/src/ux-components/alert/alert.vue index 143a421a..4837a939 100644 --- a/src/ux-components/alert/alert.vue +++ b/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, diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index db0b57c5..f222696b 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/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; - width: 6.5rem; + height: 2rem; + 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; diff --git a/src/ux-components/loader/loader.vue b/src/ux-components/loader/loader.vue index be644850..f11f7b80 100644 --- a/src/ux-components/loader/loader.vue +++ b/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;