WIP

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

@@ -121,7 +121,7 @@ export default {
         isOverflowScrollable: Boolean,
         isWide: Boolean,
         isCashOrInsurance: Boolean,
-        modelValue: [Array, Number, String],
+        modelValue: [Array, Number, String, Object],
         value: [Number, String],
         validationRules: String,
         suppressError: Boolean,

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

@@ -72,7 +72,7 @@
                         selectedAppointmentType === 'Inshop' ||
                         selectedAppointmentType === 'Dropoff'
                     "
-                    v-model="providerNumber"
+                    v-model="selectedProvider"
                     :serviceZipCode="zipCode"
                     :selectedAppointmentType="selectedAppointmentType"
                     cmsWidgetName="ShopQuestionWidget" />
@@ -147,8 +147,8 @@ export default {
             isRecalibrationServiceableInshop: null,
             isGlassServiceableMobile: null,
             isRecalibrationServiceableMobile: null,
-            selectedAppointmentType: "Dropoff",
+            selectedAppointmentType: null,
-            providerNumber: null,
+            selectedProvider: null,
             mobileFeePart: null,
             zipContainsMilitaryBase: false,
         };
@@ -215,7 +215,7 @@ export default {
                 if (newValue.zipCode !== this.zipCode) {
                     this.resetMobileLocation();
                     this.selectedAppointmentType = null;
-                    this.providerNumber = null;
+                    this.selectedProvider = null;
                 }
 
                 this.state = newValue.state;
@@ -250,7 +250,7 @@ export default {
                     if (!this.selectedAppointmentType == "Mobile") {
                         this.selectedAppointmentType = null;
                     }
-                    this.providerNumber = null;
+                    this.selectedProvider = null;
                 }
             },
         },

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

@@ -18,33 +18,39 @@ jest.mock("@/mixins/base-mixin", () => ({
 
 const mockGetProvidersStoreAction = storeActions.GET_PROVIDERS;
 const mockNewShopList = {
-    data: [
+    shopProviders: [
         {
-            city: "Far",
+            address: {
-            country: "United States",
+                city: "COLUMBUS",
-            distance: 100,
+                country: "US",
-            providerNumber: "129",
+                state: "OH",
-            state: "OH",
+                streetAddress: "1670 HARMON AVE",
-            streetAddress: "555 First Capital Ln",
+                zipCode: "43223",
-            zipCode: "45601",
+            },
+            distanceInMiles: 15.9727889297435,
+            providerNumber: "006747",
         },
         {
-            city: "Farther",
+            address: {
-            country: "United States",
+                city: "POWELL",
-            distance: 200,
+                country: "US",
-            providerNumber: "130",
+                state: "OH",
-            state: "OH",
+                streetAddress: "3938 POWELL RD",
-            streetAddress: "5486 N Grove Rd",
+                zipCode: "43065",
-            zipCode: "43215",
+            },
+            distanceInMiles: 16.2690495685233,
+            providerNumber: "003341",
         },
         {
-            city: "Farthest (Ever)",
+            address: {
-            country: "United States",
+                city: "Columbus",
-            distance: 380.5,
+                country: "US",
-            providerNumber: "131",
+                state: "OH",
-            state: "OH",
+                streetAddress: "4580 W Broad St",
-            streetAddress: "1670 Bongo Ave D",
+                zipCode: "43228",
-            zipCode: "43223",
+            },
+            distanceInMiles: 19.4618116611001,
+            providerNumber: "003342",
         },
     ],
 };
@@ -64,7 +70,7 @@ const shopQuestionInitialData = {
                 streetAddress: "4403 EXECUTIVE PKWY",
                 zipCode: "43081",
             },
-            distance: 5.16769294095201,
+            distanceInMiles: 5.16769294095201,
             providerNumber: "003335",
         },
         {
@@ -75,7 +81,7 @@ const shopQuestionInitialData = {
                 streetAddress: "760 DEARBORN PARK LN",
                 zipCode: "43085",
             },
-            distance: 10.5865432478478,
+            distanceInMiles: 10.5865432478478,
             providerNumber: "001820",
         },
         {
@@ -86,7 +92,7 @@ const shopQuestionInitialData = {
                 streetAddress: "5015 N HIGH ST",
                 zipCode: "43214",
             },
-            distance: 11.738869544543,
+            distanceInMiles: 11.738869544543,
             providerNumber: "003343",
         },
         {
@@ -97,7 +103,7 @@ const shopQuestionInitialData = {
                 streetAddress: "1670 HARMON AVE",
                 zipCode: "43223",
             },
-            distance: 15.9727889297435,
+            distanceInMiles: 15.9727889297435,
             providerNumber: "006747",
         },
         {
@@ -108,7 +114,7 @@ const shopQuestionInitialData = {
                 streetAddress: "3938 POWELL RD",
                 zipCode: "43065",
             },
-            distance: 16.2690495685233,
+            distanceInMiles: 16.2690495685233,
             providerNumber: "003341",
         },
         {
@@ -119,7 +125,7 @@ const shopQuestionInitialData = {
                 streetAddress: "4580 W Broad St",
                 zipCode: "43228",
             },
-            distance: 19.4618116611001,
+            distanceInMiles: 19.4618116611001,
             providerNumber: "003342",
         },
     ],
@@ -138,18 +144,30 @@ const mockMixin = {
 };
 
 describe("shop-question.vue", () => {
-    it("Should display first three shops when an appointment type has already been selected", async () => {
+    beforeEach(() => {
-        // Arrange/Act
         const container = document.createElement("div");
         container.scrollTo = jest.fn();
 
         container.classList.add("page-container-grouped-styles");
         document.body.appendChild(container);
+    });
 
+    it("Should display first three shops when an appointment type has already been selected", async () => {
+        // Arrange
         const { wrapper } = setupMocks({
             mixins: [mockMixin],
             props: {
-                modelValue: null,
+                modelValue: {
+                    address: {
+                        city: "POWELL",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "3938 POWELL RD",
+                        zipCode: "43065",
+                    },
+                    distanceInMiles: 16.2690495685233,
+                    providerNumber: "003341",
+                },
                 serviceZipCode: "43081",
                 selectedAppointmentType: null,
                 cmsWidgetName: cmsWidgetName,
@@ -158,8 +176,9 @@ describe("shop-question.vue", () => {
                 attachTo: document.body,
             },
         });
-
         wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+
+        // Act
         wrapper.vm.initializeComponent(shopQuestionInitialData);
 
         wrapper.setProps({
@@ -193,17 +212,21 @@ describe("shop-question.vue", () => {
     });
 
     it("Should display the 'Show more locations' link when there are more than three locations to chose from", async () => {
-        // Arrange/Act
+        // Arrange
-        const container = document.createElement("div");
-        container.scrollTo = jest.fn();
-
-        container.classList.add("page-container-grouped-styles");
-        document.body.appendChild(container);
-
         const { wrapper } = setupMocks({
             mixins: [mockMixin],
             props: {
-                modelValue: null,
+                modelValue: {
+                    address: {
+                        city: "POWELL",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "3938 POWELL RD",
+                        zipCode: "43065",
+                    },
+                    distanceInMiles: 16.2690495685233,
+                    providerNumber: "003341",
+                },
                 serviceZipCode: "43081",
                 selectedAppointmentType: "Dropoff",
                 cmsWidgetName: cmsWidgetName,
@@ -212,8 +235,9 @@ describe("shop-question.vue", () => {
                 attachTo: document.body,
             },
         });
-
         wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+
+        // Act
         wrapper.vm.initializeComponent(shopQuestionInitialData);
 
         await wrapper.vm.$nextTick();
@@ -224,16 +248,11 @@ describe("shop-question.vue", () => {
 
         // Assert
         expect(showMoreShopsLink.exists()).toBe(true);
+        expect(showMoreShopsLink.exists()).toBe(true);
     });
 
     it("Should not display the 'Show more locations' link when there are fewer than three locations to chose from", async () => {
-        // Arrange/Act
+        // Arrange
-        const container = document.createElement("div");
-        container.scrollTo = jest.fn();
-
-        container.classList.add("page-container-grouped-styles");
-        document.body.appendChild(container);
-
         const alsoShopQuestionInitialData = {
             shopProviders: [
                 {
@@ -244,7 +263,7 @@ describe("shop-question.vue", () => {
                         streetAddress: "4403 EXECUTIVE PKWY",
                         zipCode: "43081",
                     },
-                    distance: 5.16769294095201,
+                    distanceInMiles: 5.16769294095201,
                     providerNumber: "003335",
                 },
                 {
@@ -255,7 +274,7 @@ describe("shop-question.vue", () => {
                         streetAddress: "760 DEARBORN PARK LN",
                         zipCode: "43085",
                     },
-                    distance: 10.5865432478478,
+                    distanceInMiles: 10.5865432478478,
                     providerNumber: "001820",
                 },
                 {
@@ -266,7 +285,7 @@ describe("shop-question.vue", () => {
                         streetAddress: "5015 N HIGH ST",
                         zipCode: "43214",
                     },
-                    distance: 11.738869544543,
+                    distanceInMiles: 11.738869544543,
                     providerNumber: "003343",
                 },
             ],
@@ -275,7 +294,17 @@ describe("shop-question.vue", () => {
         const { wrapper } = setupMocks({
             mixins: [mockMixin],
             props: {
-                modelValue: null,
+                modelValue: {
+                    address: {
+                        city: "POWELL",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "3938 POWELL RD",
+                        zipCode: "43065",
+                    },
+                    distanceInMiles: 16.2690495685233,
+                    providerNumber: "003341",
+                },
                 serviceZipCode: "43081",
                 selectedAppointmentType: "Dropoff",
                 cmsWidgetName: cmsWidgetName,
@@ -284,27 +313,22 @@ describe("shop-question.vue", () => {
                 attachTo: document.body,
             },
         });
-
         wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+
+        // Act
         wrapper.vm.initializeComponent(alsoShopQuestionInitialData);
 
-        await wrapper.vm.$nextTick();
-        await wrapper.vm.$nextTick();
         await wrapper.vm.$nextTick();
 
         const showMoreShopsLink = wrapper.findComponent({ ref: "showMoreShopsLink" });
 
         // Assert
-        expect(showMoreShopsLink.exists()).toBe(false);
+        expect(showMoreShopsLink.exists()).toBe(true);
+        expect(showMoreShopsLink.isVisible()).toBe(false);
     });
 
-    it.only("Should display the next three shops when the 'Show more location' link is clicked", async () => {
+    it("Should display the next three shops when the 'Show more location' link is clicked", async () => {
-        const container = document.createElement("div");
+        // Arrange
-        container.scrollTo = jest.fn();
-
-        container.classList.add("page-container-grouped-styles");
-        document.body.appendChild(container);
-
         const displayedAnswers = [
             {
                 buttonBodyCopy: "4403 Executive Pkwy, Westerville, OH 43081",
@@ -326,11 +350,20 @@ describe("shop-question.vue", () => {
             },
         ];
 
-        // Arrange/Act
         const { wrapper } = setupMocks({
             mixins: [mockMixin],
             props: {
-                modelValue: null,
+                modelValue: {
+                    address: {
+                        city: "POWELL",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "3938 POWELL RD",
+                        zipCode: "43065",
+                    },
+                    distanceInMiles: 16.2690495685233,
+                    providerNumber: "003341",
+                },
                 serviceZipCode: "43081",
                 selectedAppointmentType: "Dropoff",
                 cmsWidgetName: cmsWidgetName,
@@ -339,8 +372,9 @@ describe("shop-question.vue", () => {
                 attachTo: document.body,
             },
         });
-
         wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+
+        // Act
         wrapper.vm.initializeComponent(shopQuestionInitialData);
 
         wrapper.vm.answers = displayedAnswers;
@@ -377,12 +411,6 @@ describe("shop-question.vue", () => {
                 buttonLabelSubCopy: "11.5 mi",
                 value: "003343",
             },
-            {
-                buttonBodyCopy: "5015 N High St, Columbus, OH 43214",
-                buttonLabel: "5015 N High St",
-                buttonLabelSubCopy: "11.5 mi",
-                value: "003343",
-            },
             {
                 buttonBodyCopy: "1670 Harmon Ave, Columbus, OH 43223",
                 buttonLabel: "1670 Harmon Ave",
@@ -395,21 +423,31 @@ describe("shop-question.vue", () => {
                 buttonLabelSubCopy: "16.5 mi",
                 value: "003341",
             },
+            {
+                buttonBodyCopy: "4580 W Broad St, Columbus, OH 43228",
+                buttonLabel: "4580 W Broad St",
+                buttonLabelSubCopy: "19.5 mi",
+                value: "003342",
+            },
         ]);
     });
 
     it("Should display the number of shops necessary to show a previously selected shop", async () => {
-        // Arrange/Act
+        // Arrange
-        const container = document.createElement("div");
-        container.scrollTo = jest.fn();
-
-        container.classList.add("page-container-grouped-styles");
-        document.body.appendChild(container);
-
         const { wrapper } = setupMocks({
             mixins: [mockMixin],
             props: {
-                modelValue: "127",
+                modelValue: {
+                    address: {
+                        city: "POWELL",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "3938 POWELL RD",
+                        zipCode: "43065",
+                    },
+                    distanceInMiles: 16.2690495685233,
+                    providerNumber: "003341",
+                },
                 serviceZipCode: "43081",
                 selectedAppointmentType: "Dropoff",
                 cmsWidgetName: cmsWidgetName,
@@ -418,8 +456,9 @@ describe("shop-question.vue", () => {
                 attachTo: document.body,
             },
         });
-
         wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+
+        // Act
         wrapper.vm.initializeComponent(shopQuestionInitialData);
 
         await wrapper.vm.$nextTick();
@@ -431,17 +470,21 @@ describe("shop-question.vue", () => {
     });
 
     it("Should reset the answers when the selected appointment type changes", async () => {
-        // Arrange/Act
+        // Arrange
-        const container = document.createElement("div");
-        container.scrollTo = jest.fn();
-
-        container.classList.add("page-container-grouped-styles");
-        document.body.appendChild(container);
-
         const { wrapper } = setupMocks({
             mixins: [mockMixin],
             props: {
-                modelValue: "127",
+                modelValue: {
+                    address: {
+                        city: "POWELL",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "3938 POWELL RD",
+                        zipCode: "43065",
+                    },
+                    distanceInMiles: 16.2690495685233,
+                    providerNumber: "003341",
+                },
                 serviceZipCode: "43081",
                 selectedAppointmentType: "Dropoff",
                 cmsWidgetName: cmsWidgetName,
@@ -450,8 +493,9 @@ describe("shop-question.vue", () => {
                 attachTo: document.body,
             },
         });
-
         wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+
+        // Act
         wrapper.vm.initializeComponent(shopQuestionInitialData);
 
         wrapper.setProps({
@@ -465,17 +509,21 @@ describe("shop-question.vue", () => {
     });
 
     it("Should reload the shops when the service zip code changes", async () => {
-        // Arrange/Act
+        // Arrange
-        const container = document.createElement("div");
-        container.scrollTo = jest.fn();
-
-        container.classList.add("page-container-grouped-styles");
-        document.body.appendChild(container);
-
         const { wrapper } = setupMocks({
             mixins: [mockMixin],
             props: {
-                modelValue: "127",
+                modelValue: {
+                    address: {
+                        city: "POWELL",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "3938 POWELL RD",
+                        zipCode: "43065",
+                    },
+                    distanceInMiles: 16.2690495685233,
+                    providerNumber: "003341",
+                },
                 serviceZipCode: "43081",
                 selectedAppointmentType: "Dropoff",
                 cmsWidgetName: cmsWidgetName,
@@ -486,36 +534,38 @@ describe("shop-question.vue", () => {
         });
 
         wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
-        wrapper.vm.shops = shopQuestionInitialData;
-
-        await wrapper.vm.$nextTick();
-
         wrapper.vm.$options.methods.loadInitialData = jest.fn().mockImplementation(() => {
             return new Promise((resolve) => {
                 resolve(mockNewShopList);
             });
         });
+
+        // Act
+        wrapper.vm.initializeComponent(shopQuestionInitialData);
+
         await wrapper.vm.$options.watch.serviceZipCode.handler.call(wrapper.vm, "43054");
 
-        await wrapper.vm.$nextTick();
-
         // Assert
-        expect(wrapper.vm.shops.length).toEqual(3);
+        expect(wrapper.vm.shopProviders.length).toEqual(3);
-        expect(wrapper.vm.shops).toEqual(mockNewShopList.data);
+        expect(wrapper.vm.shopProviders).toEqual(mockNewShopList.shopProviders);
     });
 
     it("Should clear the existing answers when the service zip code changes", async () => {
-        // Arrange/Act
+        // Arrange
-        const container = document.createElement("div");
-        container.scrollTo = jest.fn();
-
-        container.classList.add("page-container-grouped-styles");
-        document.body.appendChild(container);
-
         const { wrapper } = setupMocks({
             mixins: [mockMixin],
             props: {
-                modelValue: "127",
+                modelValue: {
+                    address: {
+                        city: "POWELL",
+                        country: "US",
+                        state: "OH",
+                        streetAddress: "3938 POWELL RD",
+                        zipCode: "43065",
+                    },
+                    distanceInMiles: 16.2690495685233,
+                    providerNumber: "003341",
+                },
                 serviceZipCode: "43081",
                 selectedAppointmentType: "Dropoff",
                 cmsWidgetName: cmsWidgetName,
@@ -526,6 +576,8 @@ describe("shop-question.vue", () => {
         });
 
         wrapper.vm.$refs.buttonQuestion.resetField = jest.fn();
+
+        //Act
         wrapper.vm.initializeComponent(shopQuestionInitialData);
 
         wrapper.setProps({

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

@@ -21,7 +21,7 @@
                 isRequired
                 validationRules="option-required" />
             <textLink
-                v-if="displaySeeMoreLocationsLink"
+                v-show="displaySeeMoreLocationsLink"
                 ref="showMoreShopsLink"
                 class="show-more-shops-link"
                 id="showMoreShopsId"
@@ -65,7 +65,10 @@ export default {
         };
     },
     props: {
-        modelValue: String,
+        modelValue: {
+            type: Object,
+            required: true,
+        },
         serviceZipCode: String,
         selectedAppointmentType: String,
         cmsWidgetName: String,
@@ -80,7 +83,10 @@ export default {
                 return this.modelValue;
             },
             set: function (newValue) {
-                this.$emit("update:modelValue", newValue);
+                const provider = this.shopProviders.find(
+                    (provider) => provider.providerNumber == newValue
+                );
+                this.$emit("update:modelValue", provider);
             },
         },
         displayDropoffInformation() {
@@ -94,7 +100,6 @@ export default {
         loadInitialData(serviceZipCode) {
             return baseMixin.methods.dispatchStoreAction(storeActions.GET_PROVIDERS, {
                 serviceZipCode: serviceZipCode,
-                radius: 100,
             });
         },
         initializeComponent(shopQuestionInitialData) {
@@ -125,11 +130,11 @@ export default {
                 const city = toTitleCase(shopProvider.address.city);
                 const state = shopProvider.address.state;
                 const zipCode = shopProvider.address.zipCode;
-                const distance = Math.round(shopProvider.distance * 2) / 2;
+                const distanceInMiles = Math.round(shopProvider.distanceInMiles * 2) / 2;
 
                 return {
                     buttonLabel: streetAddress,
-                    buttonLabelSubCopy: `${distance} mi`,
+                    buttonLabelSubCopy: `${distanceInMiles} mi`,
                     buttonBodyCopy: `${streetAddress}, ${city}, ${state} ${zipCode}`,
                     value: shopProvider.providerNumber,
                 };
@@ -163,7 +168,7 @@ export default {
         },
         async reloadShopData(serviceZipCode) {
             const result = await this.loadInitialData(serviceZipCode);
-            this.initializeComponent(result.data);
+            this.initializeComponent(result);
             this.resetShopList();
         },
     },
@@ -174,7 +179,7 @@ export default {
             },
         },
         selectedAppointmentType: {
-            async handler(newValue) {
+            async handler() {
                 // If the validation has been previously triggered, clear it before displaying the component
                 this.$refs.buttonQuestion.resetField();
 
@@ -190,7 +195,7 @@ export default {
             async handler(newValue) {
                 this.$refs.buttonQuestion.resetField();
                 const selectedShopIndex = newValue.findIndex(
-                    (provider) => provider.providerNumber == this.modelValue
+                    (provider) => provider.providerNumber == this.modelValue?.providerNumber
                 );
 
                 if (selectedShopIndex >= 3) {

src/store/index.js

@@ -980,12 +980,13 @@ export const actions = {
         });
     },
 
-    getProviders(context, { serviceZipCode, radius }) {
+    getProviders(context, { serviceZipCode }) {
         const damageType = context.getters.damage.isRepair ? "Repair" : "Replace";
+        const shopRadiusInMiles = 100;
 
         return globalMethods.callHttpClient({
             method: endpoints.GetProviders.method,
-            endpoint: `${endpoints.GetProviders.url}/${serviceZipCode}/${damageType}/${radius}`,
+            endpoint: `${endpoints.GetProviders.url}/${serviceZipCode}/${damageType}/${shopRadiusInMiles}`,
         });
     },