Merge branch 'develop' into feature/CSR-785

src/constants/tint-mapper.js

@@ -32,6 +32,7 @@ const tintMap = {
         { name: "gray tint", src: "Glass-NoShade-GrayTint.svg" },
         { name: "green tint", src: "Glass-NoShade-GreenTint.svg" },
         { name: "gray tint privacy", src: "Glass-NoShade-GrayTint.svg" },
+        { name: "blue tint", src: "Glass-NoShade-BlueTint.svg" },
 
         // No shade or tint
         { name: "clear", src: "Glass-NoShade-NoTint.svg" },

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue

@@ -1,47 +1,51 @@
 <template>
-    <div class="text-center">
+    <transition name="fade" mode="out-in">
-        <label
+        <div class="mobile-location-questions">
-            for="mobileLocationLinkPromptId"
+            <div class="text-center">
-            :aria-label="mobileLocationLinkPromptText"
+                <label
-            class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
+                    for="mobileLocationLinkPromptId"
-            v-html="mobileLocationLinkPromptText"></label>
+                    :aria-label="mobileLocationLinkPromptText"
-        <div class="update-mobile-location-text-link">
+                    class="form-label fw-bold w-100 ps-4 pe-4 pt-4"
-            <textLink
+                    v-html="mobileLocationLinkPromptText"></label>
-                ref="mobileLocationLink"
+                <div class="update-mobile-location-text-link">
-                id="mobileLocationLinkPromptId"
+                    <textLink
-                linkType="text"
+                        ref="mobileLocationLink"
-                :text="mobileLocationLinkText"
+                        id="mobileLocationLinkPromptId"
-                href="#!"
+                        linkType="text"
-                @click-event="openModal"
+                        :text="mobileLocationLinkText"
-                aria-label="Modal window" />
+                        href="#!"
+                        @click-event="openModal"
+                        aria-label="Modal window" />
+                </div>
+                <textBlock
+                    :customText="mobileFeeText"
+                    cmsWidgetName="MobileFeeDisclaimerWidget"
+                    typeStyle="caption" />
+            </div>
+            <modal
+                :ref="modalName"
+                :headerText="modalHeaderText"
+                :footerButtonText="modalFooterText"
+                @footer-button-event="setMobileLocation">
+                <addressQuestions
+                    ref="addressQuestions"
+                    v-model="internalModel.addressQuestions"
+                    captureApartmentNumberOrBusinessName="true" />
+                <vehicleProtectedQuestion
+                    ref="vehicleProtectedQuestion"
+                    v-model="internalModel.isVehicleProtected"
+                    cmsWidgetName="VehicleProtectedQuestionWidget" />
+                <textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
+                <alert
+                    ref="alertInvalidZip"
+                    v-if="displayInvalidZipAlert"
+                    class="my-4"
+                    cmsWidgetName="AlertInvalidZipWidget"
+                    alertClass="alert-danger"
+                    v-bind:isDismissible="false" />
+            </modal>
         </div>
-        <textBlock
+    </transition>
-            :customText="mobileFeeText"
-            cmsWidgetName="MobileFeeDisclaimerWidget"
-            typeStyle="caption" />
-    </div>
-    <modal
-        :ref="modalName"
-        :headerText="modalHeaderText"
-        :footerButtonText="modalFooterText"
-        @footer-button-event="setMobileLocation">
-        <addressQuestions
-            ref="addressQuestions"
-            v-model="internalModel.addressQuestions"
-            captureApartmentNumberOrBusinessName="true" />
-        <vehicleProtectedQuestion
-            ref="vehicleProtectedQuestion"
-            v-model="internalModel.isVehicleProtected"
-            cmsWidgetName="VehicleProtectedQuestionWidget" />
-        <textBlock cmsWidgetName="WorkspaceRequirementsWidget" typeStyle="caption" />
-        <alert
-            ref="alertInvalidZip"
-            v-if="displayInvalidZipAlert"
-            class="my-4"
-            cmsWidgetName="AlertInvalidZipWidget"
-            alertClass="alert-danger"
-            v-bind:isDismissible="false" />
-    </modal>
 </template>
 
 <script>

src/layouts/service-location/service-location.spec.js

@@ -65,7 +65,6 @@ const mockMixin = {
             if (zip === "43235" || zip === "55555") {
                 return Promise.resolve({
                     containsMilitaryBase: false,
-                    isServiceable: true,
                     isValid: true,
                     state: "OH",
                     zipCodeCtu: "01820",
@@ -74,7 +73,6 @@ const mockMixin = {
 
             return Promise.resolve({
                 containsMilitaryBase: false,
-                isServiceable: false,
                 isValid: false,
                 state: null,
                 zipCodeCtu: null,
@@ -130,7 +128,6 @@ beforeEach(() => {
             serviceLocation: {
                 zipCode: "43235",
                 state: "OH",
-                isServiceable: true,
             },
         },
         payment: {
@@ -226,7 +223,6 @@ describe("service-location.vue", () => {
             const newServiceZipCodeQuestion = {
                 zipCode: "61606",
                 state: "IL",
-                isServiceable: true,
             };
 
             const serviceZipCodeComponent = wrapper.findComponent({
@@ -249,7 +245,6 @@ describe("service-location.vue", () => {
             const newServiceZipCodeQuestion = {
                 zipCode: "61606",
                 state: "IL",
-                isServiceable: true,
             };
 
             const mobileLocationQuestions = {
@@ -369,13 +364,11 @@ describe("service-location.vue", () => {
             wrapper.vm.serviceZipCodeQuestion = {
                 zipCode: "61606",
                 state: "IL",
-                isServiceable: true,
             };
 
             const newServiceZipCodeInfo = {
                 state: "OH",
                 zipCode: "43081",
-                isServiceable: true,
             };
 
             // Act

src/layouts/service-location/service-location.vue

@@ -48,7 +48,6 @@ export default {
             city: this.getServiceCityFromStore(),
             state: this.getServiceStateFromStore(),
             zipCode: this.getServiceZipCodeFromStore(),
-            isServiceable: false,
             isZipServiceableMobile: null,
             isZipServiceableInShop: null,
             mobileFeePart: null,
@@ -87,7 +86,6 @@ export default {
                 return {
                     state: this.state,
                     zipCode: this.zipCode,
-                    isServiceable: this.isServiceable,
                 };
             },
             set: function (newValue) {
@@ -97,7 +95,6 @@ export default {
 
                 this.state = newValue.state;
                 this.zipCode = newValue.zipCode;
-                this.isServiceable = newValue.isServiceable;
             },
         },
         mobileLocationQuestions: {
@@ -151,9 +148,6 @@ export default {
         getServiceZipCodeFromStore() {
             return store.getters.order.serviceLocation.zipCode;
         },
-        getIsServiceableFromStore() {
-            return store.getters.order.serviceLocation.isServiceable;
-        },
         resetMobileFeePart(serviceZipCode) {
             getPricedMobileFeePart(serviceZipCode).then((pricedMobileFeePart) => {
                 this.mobileFeePart = pricedMobileFeePart;

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js

@@ -45,7 +45,6 @@ const mockMixin = {
             if (zip === "43235") {
                 return {
                     containsMilitaryBase: false,
-                    isServiceable: true,
                     isValid: true,
                     state: "OH",
                     zipCodeCtu: "01820",
@@ -55,7 +54,6 @@ const mockMixin = {
             if (zip === "61606") {
                 return {
                     containsMilitaryBase: false,
-                    isServiceable: true,
                     isValid: true,
                     state: "IL",
                     zipCodeCtu: "01526",
@@ -64,7 +62,6 @@ const mockMixin = {
 
             return {
                 containsMilitaryBase: false,
-                isServiceable: false,
                 isValid: false,
                 state: null,
                 zipCodeCtu: null,
@@ -78,7 +75,6 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "",
             zipCode: "",
-            isServiceable: undefined,
         };
 
         // Arrange
@@ -101,7 +97,6 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "OH",
             zipCode: "43235",
-            isServiceable: true,
         };
 
         const wrapper = mount(serviceZipModalQuestion, {
@@ -123,7 +118,6 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
-            isServiceable: true,
         };
 
         const zip = "43235";
@@ -142,7 +136,7 @@ describe("service-zip-modal-question.vue", () => {
         wrapper.vm.internalModel.zipCode = zip;
         await wrapper.vm.setZipCode();
 
-        let expectedEmit = [[{ isServiceable: true, state: "OH", zipCode: "43235" }]];
+        let expectedEmit = [[{ state: "OH", zipCode: "43235" }]];
 
         // Assert
         expect(wrapper.emitted("update:modelValue")).toEqual(expectedEmit);
@@ -153,7 +147,6 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
-            isServiceable: true,
         };
 
         const zip = "";
@@ -181,7 +174,6 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
-            isServiceable: true,
         };
 
         const zip = "11111";
@@ -209,7 +201,6 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
-            isServiceable: true,
         };
 
         const zip = "";
@@ -238,7 +229,6 @@ describe("service-zip-modal-question.vue", () => {
         let serviceZipCodeQuestion = {
             state: "IL",
             zipCode: "61606",
-            isServiceable: true,
         };
 
         const zip = "123";

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -54,7 +54,6 @@ export default {
             default: () => ({
                 state: "",
                 zipCode: "",
-                isServiceable: null,
             }),
         },
         linkWidgetName: String,
@@ -104,7 +103,6 @@ export default {
             return {
                 state: modelToCopy.state,
                 zipCode: modelToCopy.zipCode,
-                isServiceable: modelToCopy.isServiceable,
             };
         },
 
@@ -145,7 +143,6 @@ export default {
                 this.focusOnZipInput();
             } else {
                 this.internalModel.state = zipCodeData.state;
-                this.internalModel.isServiceable = zipCodeData.isServiceable;
 
                 // Update the page level model
                 this.$emit("update:modelValue", this.internalModel);

src/styles/common-error-styles.scss

@@ -136,6 +136,18 @@ html {
             }
         }
     }
+    //Quote page radio button group
+    .package-main {
+        .package-wrapper {
+            .has-error {
+                input[type="radio"] {
+                    + .package-label {
+                        border: 1px solid $red;
+                    }
+                }
+            }
+        }
+    }
     //Restore to default style if alert box is present
     .alertError {
         .has-error {