Merge branch 'develop' of https://github.com/Safelite/DigitalConsumer.ISS into feature/digital/SSR-791

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

@@ -267,6 +267,11 @@ export default {
             this.$options.components[this.buttonTypeString] = this.buttonTypeObject;
         }
     },
+    beforeUnmount() {
+        this.resetField({
+            value: ''
+        });
+    },
     methods: {
         formatString(str) {
             return String(str).replaceAll(' ', '-');

src/digital-components/dropdown-question/dropdown-question.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         class="dropdown-question"
-        :class="(errors && errors.length) || hasError ? 'has-error' : ''">
+        :class="(meta.touched && errors && errors.length) || hasError ? 'has-error' : ''">
         <label
             :for="inputId"
             :aria-label="questionText"
@@ -31,7 +31,7 @@
             </option>
         </select>
         <div
-            v-show="errorMessage && !isDisabled"
+            v-show="meta.touched && errorMessage && !isDisabled"
             class="row mt-1 form-test-error">
             <span role="alert">{{ errorMessage }}</span>
         </div>
@@ -82,6 +82,7 @@ export default {
         const { errorMessage,
             handleBlur,
             handleChange,
+            setTouched,
             meta, errors,
             setErrors } = useField(props.inputId, props.validationRules, fieldOptions);
 
@@ -91,6 +92,7 @@ export default {
             handleChange,
             meta,
             errors,
+            setTouched,
             setErrors
         };
     },
@@ -130,7 +132,7 @@ export default {
     watch: {
         isDisabled(newValue, oldValue) {
             if (newValue !== oldValue) {
-                this.setErrors([]);
+                this.setTouched(false, null);
             }
         },
         selectedOption(newValue) {

src/digital-components/modal/modal.vue

@@ -34,6 +34,7 @@
                         loaderColor="white"
                         :buttonText="footerButtonText"
                         :class="(isButtonDisabled || isFooterButtonDisabled) && 'form-test-invalid'"
+                        :isDisabled="(isButtonDisabled || isFooterButtonDisabled)"
                         @clickEvent="validateAndEmit" />
                 </div>
             </div>

src/layouts/policy-endorsements/policy-endorsements.vue

@@ -183,7 +183,7 @@ export default {
 <style lang="scss" scoped>
 
 :deep .subheader-primary {
-    margin-bottom: map-get($spacers, 3);
+    margin-bottom: map-get($spacers, 2);
 }
 
 :deep .subheader-secondary {

src/layouts/policy-vehicles/policy-vehicles.spec.js

@@ -140,13 +140,62 @@ describe('policy-vehicles.vue', () => {
 
         test(
             // eslint-disable-next-line max-len
-            'Selected VIN matches vehicle listed in system and policy vehicle has endorsements => update vehicle and navigate forward with CLICKED_FORWARD_WITH_ENDORSEMENTS scenario.',
+            'Selected VIN matches vehicle listed in system and policy vehicle has Educator endorsement => update vehicle and navigate forward with CLICKED_FORWARD_WITH_ENDORSEMENTS scenario.',
             async () => {
             // Arrange
                 const { wrapper } = setupMocks({});
 
                 const vin = getRandomString(17, 17);
-                const endorsements = [getRandomString(10, 20)];
+                const endorsements = ['Educator'];
+                await wrapper.setData({
+                    selectedVehicleVin: vin,
+                    policyVehicles: [
+                        {
+                            vin,
+                            endorsements
+                        }
+                    ]
+                });
+
+                const year = getRandomInt(1998, 2023);
+                const lookupVehicleResponse = {
+                    data: {
+                        year
+                    }
+                };
+                const store = useMainStore();
+                store.lookupVehicleByVin.mockReturnValue(Promise.resolve(lookupVehicleResponse));
+
+                const expectedInput = {
+                    year,
+                    vin,
+                    noCoverage: true,
+                    deductible: 0,
+                    repairWaived: false,
+                    endorsements
+                };
+
+                // Act
+                await wrapper.vm.forwardButtonAction();
+
+                // Assert
+                expect(store.updateVehicle).toHaveBeenCalledWith(expectedInput);
+                expect(wrapper.vm.$router.navigate).toHaveBeenCalledWith(
+                    navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
+                    undefined
+                );
+            }
+        );
+
+        test(
+            // eslint-disable-next-line max-len
+            'Selected VIN matches vehicle listed in system and policy vehicle has Parking Guard endorsement => update vehicle and navigate forward with CLICKED_FORWARD_WITH_ENDORSEMENTS scenario.',
+            async () => {
+            // Arrange
+                const { wrapper } = setupMocks({});
+
+                const vin = getRandomString(17, 17);
+                const endorsements = ['Parking Guard'];
                 await wrapper.setData({
                     selectedVehicleVin: vin,
                     policyVehicles: [

src/layouts/policy-vehicles/policy-vehicles.vue

@@ -231,7 +231,9 @@ export default {
                             {},
                             {}
                         );
-                } else if (this.endorsementsForSelectedVehicle?.length > 0) {
+                } else if (this.endorsementsForSelectedVehicle?.length > 0
+                    && (this.endorsementsForSelectedVehicle?.includes(endorsementOptions.PARKING_GUARD)
+                    || this.endorsementsForSelectedVehicle?.includes(endorsementOptions.EDUCATOR))) {
                     this.$router.navigate(
                         this.navigationScenarios.CLICKED_FORWARD_WITH_ENDORSEMENTS,
                         this.$route

src/layouts/service-packages/service-packages.vue

@@ -162,7 +162,6 @@ export default {
                 && (store.order.damage.isRepair
                     || (store.order.lineItems?.glassParts != null
                         && store.order.lineItems.glassParts.length > 0))
-                        && store.order.referralNumber?.length !== 6
             );
         },
         vapsItemsSelectedAction(vapsItemsSelected) {

src/layouts/tpa-search/__snapshots__/tpa-search.spec.js.snap

@@ -9,6 +9,20 @@ Object {
   "initialLoading": false,
   "mapZipCode": "12663",
   "providers": Array [],
+  "radiusFilterPairs": Array [
+    Object {
+      "filter": "25 miles",
+      "radius": 25,
+    },
+    Object {
+      "filter": "50 miles",
+      "radius": 50,
+    },
+    Object {
+      "filter": "100 miles",
+      "radius": 100,
+    },
+  ],
   "reloadProviders": false,
   "rules": Object {
     "filter": "option-required",

src/layouts/tpa-search/tpa-search.spec.js

@@ -1264,6 +1264,7 @@ describe('TPA search page', () => {
             // Assert
             expect(wrapper.vm.filter).toBe(expectedFilter);
             expect(wrapper.vm.providers).toEqual(providers);
+            expect(useMainStore().getTpaProviders).toBeCalledTimes(1);
         });
         test('when providers exist at 50 mile radius but not 25, filter is set to "50 miles" and providers set to expected', async () => {
             // Arrange
@@ -1289,6 +1290,7 @@ describe('TPA search page', () => {
             // Assert
             expect(wrapper.vm.filter).toBe(expectedFilter);
             expect(wrapper.vm.providers).toEqual(providers);
+            expect(useMainStore().getTpaProviders).toBeCalledTimes(2);
         });
         test(
             'when providers exist at 100 mile radius but not 50 or 25, filter is set to "100 miles" and providers set to expected',
@@ -1316,6 +1318,7 @@ describe('TPA search page', () => {
                 // Assert
                 expect(wrapper.vm.filter).toBe(expectedFilter);
                 expect(wrapper.vm.providers).toEqual(providers);
+                expect(useMainStore().getTpaProviders).toBeCalledTimes(3);
             }
         );
         test(
@@ -1342,6 +1345,7 @@ describe('TPA search page', () => {
                 // Assert
                 expect(wrapper.vm.filter).toBe(expectedFilter);
                 expect(wrapper.vm.providers).toEqual([]);
+                expect(useMainStore().getTpaProviders).toBeCalledTimes(3);
             }
         );
     });

src/layouts/tpa-search/tpa-search.vue

@@ -199,7 +199,21 @@ export default {
                 filter: globalRules.OPTION_REQUIRED, // TODO do we even need this?
                 provider: globalRules.OPTION_REQUIRED
             },
-            shopListButton: shallowRef(shopListButton)
+            shopListButton: shallowRef(shopListButton),
+            radiusFilterPairs: [
+                {
+                    radius: 25,
+                    filter: '25 miles'
+                },
+                {
+                    radius: 50,
+                    filter: '50 miles'
+                },
+                {
+                    radius: 100,
+                    filter: '100 miles'
+                }
+            ]
         };
     },
     computed: {
@@ -233,16 +247,8 @@ export default {
             );
         },
         radiusInMiles() {
-            switch (this.filter) {
+            const pair = this.radiusFilterPairs.find((p) => p.filter === this.filter);
-                case '25 miles':
+            return pair?.radius ?? 0;
-                    return 25;
-                case '50 miles':
-                    return 50;
-                case '100 miles':
-                    return 100;
-                default:
-                    return 0;
-            }
         },
         noNetworkShopsAlertHeaderText() {
             return this.getCmsContent(
@@ -310,25 +316,24 @@ export default {
             },
             async setInitialFilterAndProviders() {
                 this.initialLoading = true;
-                const radiusOptions = [25, 50, 100];
                 const { zipCode } = useMainStore().order.customer.address;
 
-                const tpaProvidersRadius25 = useMainStore().getTpaProviders(zipCode, radiusOptions[0]);
+                let pairIndex = 0;
-                const tpaProvidersRadius50 = useMainStore().getTpaProviders(zipCode, radiusOptions[1]);
+                let providers = [];
-                const tpaProvidersRadius100 = useMainStore().getTpaProviders(zipCode, radiusOptions[2]);
+                let filter = '';
+                while (providers.length === 0 && pairIndex < this.radiusFilterPairs.length) {
+                    const pair = this.radiusFilterPairs[pairIndex];
+                    const { radius } = pair;
+                    filter = pair.filter;
+                    // eslint-disable-next-line no-await-in-loop
+                    const result = await useMainStore().getTpaProviders(zipCode, radius);
+                    providers = result?.data?.shopProviders ?? [];
 
-                let radius = '25 miles';
+                    pairIndex += 1;
-                let providers = await tpaProvidersRadius25;
-                if ((providers?.data?.shopProviders ?? []).length === 0) {
-                    radius = '50 miles';
-                    providers = await tpaProvidersRadius50;
-                    if ((providers?.data?.shopProviders ?? []).length === 0) {
-                        radius = '100 miles';
-                        providers = await tpaProvidersRadius100;
-                    }
                 }
-                this.filter = radius;
+
-                this.providers = providers?.data?.shopProviders ?? [];
+                this.filter = filter;
+                this.providers = providers;
             },
             async getProviderButtonData() {
                 const getTpaProvidersResult = await useMainStore().getTpaProviders(this.zipCode, this.radiusInMiles);

src/layouts/vin-lookup/vin-lookup.vue

@@ -15,7 +15,7 @@
                                     <vehicleBanner
                                         class="mt-2 mb-4"
                                         cmsWidgetName="VehicleBannerWidget"
-                                        :displayGenericVehicleImage="carIdIsValid" />
+                                        :displayGenericVehicleImage="!carIdIsValid" />
                                     <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
                                     <vinLookupAlerts
                                         class="mt-5"