Merge pull request #606 from Safelite/rlsmerge/2022.06.23-to-develop

Rlsmerge/2022.06.23 to develop
2022-07-14 13:01:51 -04:00 · 2022-07-14 13:01:51 -04:00 · d683061eeb
commit d683061eeb
parent 41237f1309 b0d2cb3a19
14 changed files with 51 additions and 64 deletions
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@ -35,7 +35,6 @@
              data-test="button"
              :validationRules="validationRules"
              :class="[suppressError ? 'alertError' : '']"
-              :clearOnUnmount="clearOnUnmount"
            />
            <!-- For nested questions --> 
            <transition name="fade" mode="out-in">
@ -90,11 +89,7 @@ export default {
    modelValue: [Array, String],
    validationRules: String,
    suppressError: Boolean,
-    useTextForValue: Boolean,
-    clearOnUnmount: {
-      type: Boolean,
-      default: true
-    },
+    useTextForValue: Boolean
  },
  computed: {
    formattedGroupName() {
@ -177,7 +172,6 @@ export default {
          this.selectedValues = val.value;
        }
      }
-
      this.$emit("isCheckedChanged", val);
    },
  },
--- a/src/common-components/funnel-header/funnel-header.vue
+++ b/src/common-components/funnel-header/funnel-header.vue
@ -7,11 +7,12 @@
    <menuModal/>
  </div>
  <alert
-    class="position-absolute rounded-0 w-100 border-0 shadow-sm"
    v-if="displayGlobalAlert"
-    :alertClass="globalAlertMessage.type"
+    class="position-absolute rounded-0 w-100 border-0 shadow-sm"
+    cmsWidgetName="GlobalAlert"
    :manualHeadline="globalAlertMessage.messageHeadline"
    :manualCopy="globalAlertMessage.messageCopy"
+    :alertClass="globalAlertMessage.type"
    v-bind:isDismissible="globalAlertMessage.isDismissible"
  />
 </template>
--- a/src/common-components/question-chain/question-chain.vue
+++ b/src/common-components/question-chain/question-chain.vue
@ -11,7 +11,6 @@
                v-model="selectedValue"
                isRequired
                :validationRules="validationRules"
-                :clearOnUnmount=false
            />
        </transition>
    </div>
--- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
@ -56,13 +56,15 @@
 			</div>
 		</div>
 	</transition>		
-	<alert ref="alertVerificationWarning" v-if="displayVerificationWarning"
+	<alert ref="alertVerificationWarning" 
+		v-if="displayVerificationWarning"
 		class="mb-4"
 		cmsWidgetName="AlertVerificationWarningWidget"
 		alertClass="alert-warning"
 		v-bind:isDismissible="false"
 	/>
-	<alert ref="alertNoMatchWarning" v-if="displayNoMatchWarning"
+	<alert ref="alertNoMatchWarning" 
+		v-if="displayNoMatchWarning"
 		class="mb-4"
 		cmsWidgetName="AlertNoMatchWarningWidget"
 		alertClass="alert-warning"
--- a/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
+++ b/src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue
@ -9,13 +9,13 @@
    isRequired
    :validation-rules="validationRules"
  />
-  <alert 
-    ref="differentVehicleAlert"
+  <alert ref="differentVehicleAlert"
    v-if="isCarIdDifferent"
    class="my-3"
-    alertClass="alert-warning"
+    cmsWidgetName="FoundWindshield"
    :manualHeadline="differentVehicleAlertHeader"
    :manualCopy="differentVehicleAlertBody"
+    alertClass="alert-warning"
    v-bind:isDismissible="false"
  />
 </template>
--- a/src/layouts/estimate/estimate.vue
+++ b/src/layouts/estimate/estimate.vue
@ -11,11 +11,10 @@
      <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
      <div class="fade-on-route-transition sub-container make-tall">
        <alert
-        class="vinLookupMethodHeading"
-        v-model="customAlertData"
-        alertClass=""
-        cmsWidgetName="AlertVinLookupQuestion"
-      />
+          class="vinLookupMethodHeading"
+          cmsWidgetName="AlertVinLookupQuestion"
+          alertClass=""
+        />
        <buttonQuestion
          cmsWidgetName="VinLookupMethod"
          :answers="answersFromCms"
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@ -257,7 +257,7 @@ describe("vehicle-damage.vue", () => {
  });

  describe("alert", () => {
-    test("when displayVehicleChangeAlert router params is true, the alert: 'vehicleChangeAlert' should be visible", () => {
+    test("when displayVehicleChangeAlert router params is true, the alert: 'vehicleChangeAlert' should be rendered", () => {
      // Arrange & Act
      const { wrapper } = setupMocks({
        mountOptionsMockData: {
@ -269,10 +269,10 @@ describe("vehicle-damage.vue", () => {
        }
      });
      // Assert
-      expect(wrapper.findComponent({ ref: 'vehicleChangeAlert' }).isVisible()).toBe(true);
+      expect(wrapper.findComponent({ ref: 'vehicleChangeAlert' }).exists()).toBe(true);
    });

-    test("when displayVehicleChangeAlert router params is false, the alert: 'vehicleChangeAlert' should not be visible", () => {
+    test("when displayVehicleChangeAlert router params is false, the alert: 'vehicleChangeAlert' should not be rendered", () => {
      // Arrange & Act
      const { wrapper } = setupMocks({
        mountOptionsMockData: {
@ -284,10 +284,10 @@ describe("vehicle-damage.vue", () => {
        }
      });
      // Assert
-      expect(wrapper.findComponent({ ref: 'vehicleChangeAlert' }).isVisible()).toBe(false);
+      expect(wrapper.findComponent({ ref: 'vehicleChangeAlert' }).exists()).toBe(false);
    });

-    test("when displayVehicleChangeAlert router params is undefined, the alert: 'vehicleChangeAlert' should not be visible", () => {
+    test("when displayVehicleChangeAlert router params is undefined, the alert: 'vehicleChangeAlert' should not be rendered", () => {
      // Arrange & Act
      const { wrapper } = setupMocks({
        mountOptionsMockData: {
@ -299,7 +299,7 @@ describe("vehicle-damage.vue", () => {
        }
      });
      // Assert
-      expect(wrapper.findComponent({ ref: 'vehicleChangeAlert' }).isVisible()).toBe(false);
+      expect(wrapper.findComponent({ ref: 'vehicleChangeAlert' }).exists()).toBe(false);
    })
  });

--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@ -10,11 +10,10 @@
        <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
        <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
        <div class="fade-on-route-transition sub-container make-tall">
-          <alert
-            ref="vehicleChangeAlert"
+          <alert ref="vehicleChangeAlert"
+            v-if="shouldDisplayVehicleChangeAlert"
            class="mt-5 mb-0"
            cmsWidgetName="VehicleChangeAlert"
-            v-show="shouldDisplayVehicleChangeAlert"
            alertClass="alert-warning"
            :isDismissible="false"
          />
@ -32,9 +31,9 @@
            :selectedDamageLocations="selectedDamageLocations"
          />
          <alert
+            v-if="hasRepairReplaceConflict"
            class="my-5"
            cmsWidgetName="HasReplacementConflict"
-            v-show="hasRepairReplaceConflict"
            alertClass="alert-danger"
            :isDismissible="false"
          />
--- a/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
+++ b/src/layouts/vehicle-damage/windshield-options/windshield-options.vue
@ -8,9 +8,9 @@
            :validationRules="windshieldDamageTypeQuestionValidationRules"
        />
        <alert
+            v-if="showNoReplacementAvailableError"
            class="my-3"
            cmsWidgetName="NoReplacementAvailableError"
-            v-if="showNoReplacementAvailableError"
            alertClass="alert-danger"
            :isDismissible="false"
          />
@ -30,9 +30,9 @@
            isRequired
        />
        <alert
+            v-if="hasSplitSingleConflict"
            class="mt-5"
            cmsWidgetName="SplitSingleConflict"
-            v-if="hasSplitSingleConflict"
            alertClass="alert-danger"
            :isDismissible="false"
          />
--- a/src/mixins/base-mixin.js
+++ b/src/mixins/base-mixin.js
@ -69,7 +69,10 @@ export default {
    },
    dynamicStrings(){
      return dynamicStrings;
-    }
+    },
+    cssClassNameForCmsWidget(){
+      return "widget-name-" + this.cmsWidgetName;
+    },
  },
 };

--- a/src/ux-components/alert/alert.vue
+++ b/src/ux-components/alert/alert.vue
@ -2,7 +2,7 @@
  <div
    class="alert fade show text-center mb-0 py-2 px-4"
    role="alert"
-    :class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
+    :class="[isDismissible ? 'alert-dismissible' : '', this.alertClass, this.cssClassNameForCmsWidget]"
  >
    <p class="m-0 fw-bold alert-heading">{{ alertHeadline }}</p>
    <template v-for="paragraph in splitAlertCopyForParagraphTag" :key="paragraph">
@ -54,7 +54,15 @@ export default {
    alert-info (blue)
    */
    alertClass: String,
-    cmsWidgetName: String,
+    cmsWidgetName: {
+      type: String,
+      default(rawProps) {
+        if (!rawProps.cmsWidgetName) {
+          console.log('Error: Missing a CMS Widget Name (required field)');
+        }
+        return 'widgetUndefined';
+      },
+    },
    manualHeadline: String,
    manualCopy: String,
    shouldScrollToOnMount: {
@ -64,10 +72,10 @@ export default {
  },
  computed: {
    alertHeadline(){
-      return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'HeadlineText') : this.manualHeadline;
+      return this.manualHeadline ? this.manualHeadline : this.getCmsContent(this.cmsWidgetName, 'HeadlineText');
    },
    alertCopy(){
-      return this.cmsWidgetName ? this.getCmsContent(this.cmsWidgetName, 'BodyText') : this.manualCopy;
+      return this.manualCopy ? this.manualCopy : this.getCmsContent(this.cmsWidgetName, 'BodyText');
    },
    splitAlertCopyForParagraphTag(){
      return splitCMSCopyOnParagraphTag(this.alertCopy);
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@ -78,10 +78,6 @@ export default {
    validationRules: String,
    selectedValues: [Array, String],
    hasError: Boolean,
-    clearOnUnmount: {
-      type: Boolean,
-      default: true
-    }
  },
  data() {
    return {
@ -96,11 +92,9 @@ export default {
        : this.selectedValues[0];
    }
  },
-  unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync
-    if (this.clearOnUnmount) {
-      this.checkValue = false;
-      this.handleCheckChange();
-    }
+  unmounted() { // needed to clear this button's selectedValues if it is removed
+    this.checkValue = false;
+    this.handleCheckChange();
  },
  methods: {
    displayLoader() {
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@ -77,10 +77,6 @@ export default {
    validationRules: String,
    selectedValues: [Array, String],
    hasError: Boolean,
-    clearOnUnmount: {
-      type: Boolean,
-      default: true
-    }
  },
  data() {
    return {
@ -95,11 +91,9 @@ export default {
        : this.selectedValues[0];
    }
  },
-  unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync
-    if (this.clearOnUnmount) {
-      this.checkValue = false;
-      this.handleCheckChange();
-    }
+  unmounted() { // needed to clear this button's selectedValues if it is removed
+    this.checkValue = false;
+    this.handleCheckChange();
  },
  methods: {
    displayLoader() {
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@ -89,10 +89,6 @@ export default {
    selectedValues: [Array, String],
    modelValue: Object,
    hasError: Boolean,
-    clearOnUnmount: {
-      type: Boolean,
-      default: true
-    }
  },
  data() {
    return {
@ -114,11 +110,9 @@ export default {
      this.checkValue = this.selectedValues == this.value || this.modelValue == this.value;
    }
  },
-  unmounted() { // needed to clear this button's selectedValues if it is removed to keep validation in sync
-    if (this.clearOnUnmount) {
-      this.checkValue = false;
-      this.handleCheckChange();
-    }
+  unmounted() { // needed to clear this button's selectedValues if it is removed
+    this.checkValue = false;
+    this.handleCheckChange();
  },
  computed: {
    getLabelClasses() {