Merge pull request #1269 from Safelite/feature/CSR-1370-tr

Feature/csr 1370 tr

src/layouts/review/review-sections/service-package-review/service-package-review.spec.js

@@ -77,11 +77,8 @@ const figmaScenarios = [
     {
         name: "05_01_CSR_Quote_Cash",
         params: {
-            availableVaps: [
+            wiperResponse: [testConstants.parts.frontWiperPart, testConstants.parts.rearWiperPart],
-                testConstants.parts.frontWiperPart,
+            rainDefenseResponse: testConstants.parts.rainDefensePart,
-                testConstants.parts.rearWiperPart,
-                testConstants.parts.rainDefensePart,
-            ],
             damage: {
                 isRepair: false,
                 glassToReplace: [testConstants.damages.frontWindshield],
@@ -142,11 +139,8 @@ const figmaScenarios = [
     {
         name: "05_01_CSR_Quote_Standard_Repair",
         params: {
-            availableVaps: [
+            wiperResponse: [testConstants.parts.frontWiperPart, testConstants.parts.rearWiperPart],
-                testConstants.parts.frontWiperPart,
+            rainDefenseResponse: testConstants.parts.rainDefensePart,
-                testConstants.parts.rearWiperPart,
-                testConstants.parts.rainDefensePart,
-            ],
             damage: {
                 isRepair: true,
                 glassToReplace: [],
@@ -206,11 +200,8 @@ const figmaScenarios = [
     {
         name: "05_01_CSR_Quote_Recal",
         params: {
-            availableVaps: [
+            wiperResponse: [testConstants.parts.frontWiperPart, testConstants.parts.rearWiperPart],
-                testConstants.parts.frontWiperPart,
+            rainDefenseResponse: testConstants.parts.rainDefensePart,
-                testConstants.parts.rearWiperPart,
-                testConstants.parts.rainDefensePart,
-            ],
             damage: {
                 isRepair: false,
                 glassToReplace: [testConstants.damages.frontWindshield],
@@ -271,11 +262,8 @@ const figmaScenarios = [
     {
         name: "05_01_CSR_Quote_RearGlass+NonWindshield",
         params: {
-            availableVaps: [
+            wiperResponse: [testConstants.parts.frontWiperPart, testConstants.parts.rearWiperPart],
-                testConstants.parts.frontWiperPart,
+            rainDefenseResponse: testConstants.parts.rainDefensePart,
-                testConstants.parts.rearWiperPart,
-                testConstants.parts.rainDefensePart,
-            ],
             damage: {
                 isRepair: false,
                 glassToReplace: [testConstants.damages.rearWindshield],
@@ -343,11 +331,8 @@ const figmaScenarios = [
     {
         name: "05_01_CSR_Quote_RearGlass+Windshield",
         params: {
-            availableVaps: [
+            wiperResponse: [testConstants.parts.frontWiperPart, testConstants.parts.rearWiperPart],
-                testConstants.parts.frontWiperPart,
+            rainDefenseResponse: testConstants.parts.rainDefensePart,
-                testConstants.parts.rearWiperPart,
-                testConstants.parts.rainDefensePart,
-            ],
             damage: {
                 isRepair: false,
                 glassToReplace: [
@@ -461,7 +446,8 @@ const figmaScenarios = [
     {
         name: "05_01_CSR_Quote_RearGlassNoFrontFit",
         params: {
-            availableVaps: [testConstants.parts.rearWiperPart, testConstants.parts.rainDefensePart],
+            wiperResponse: [testConstants.parts.rearWiperPart],
+            rainDefenseResponse: testConstants.parts.rainDefensePart,
             damage: {
                 isRepair: false,
                 glassToReplace: [testConstants.damages.rearWindshield],
@@ -518,11 +504,8 @@ const figmaScenarios = [
     {
         name: "05_01_CSR_Quote_Windshield+SideGlass",
         params: {
-            availableVaps: [
+            wiperResponse: [testConstants.parts.frontWiperPart, testConstants.parts.rearWiperPart],
-                testConstants.parts.frontWiperPart,
+            rainDefenseResponse: testConstants.parts.rainDefensePart,
-                testConstants.parts.rearWiperPart,
-                testConstants.parts.rainDefensePart,
-            ],
             damage: {
                 isRepair: false,
                 glassToReplace: [
@@ -586,11 +569,8 @@ const figmaScenarios = [
     {
         name: "05_01_CSR_Quote_SideGlass",
         params: {
-            availableVaps: [
+            wiperResponse: [testConstants.parts.frontWiperPart, testConstants.parts.rearWiperPart],
-                testConstants.parts.frontWiperPart,
+            rainDefenseResponse: testConstants.parts.rainDefensePart,
-                testConstants.parts.rearWiperPart,
-                testConstants.parts.rainDefensePart,
-            ],
             damage: {
                 isRepair: false,
                 glassToReplace: [testConstants.damages.sideGlass],
@@ -678,7 +658,8 @@ const figmaScenarios = [
     {
         name: "05_01_CSR_Quote_NoWiperFit",
         params: {
-            availableVaps: [testConstants.parts.rainDefensePart],
+            wiperResponse: [],
+            rainDefenseResponse: testConstants.parts.rainDefensePart,
             damage: {
                 isRepair: false,
                 glassToReplace: [testConstants.damages.frontWindshield],
@@ -821,6 +802,8 @@ describe("Service Package Review Block", () => {
                 propsData: props,
             });
 
+            initializeWithDefault(wrapper);
+
             // Act
             await wrapper.vm.$nextTick();
 
@@ -851,6 +834,8 @@ describe("Service Package Review Block", () => {
                 propsData: props,
             });
 
+            initializeWithDefault(wrapper);
+
             // Act
             await wrapper.vm.$nextTick();
 
@@ -874,6 +859,8 @@ describe("Service Package Review Block", () => {
             // Act
             await wrapper.vm.$nextTick();
 
+            initializeWithDefault(wrapper);
+
             // Assert
             const includesFrontWiperCopy = wrapper.vm.displayContent.includes(
                 testConstants.vapsCopy.frontWiperCopy
@@ -893,6 +880,8 @@ describe("Service Package Review Block", () => {
                 propsData: generateDefaultProps(),
             });
 
+            initializeWithDefault(wrapper);
+
             // Act
             await wrapper.vm.$nextTick();
 
@@ -908,7 +897,6 @@ describe("Service Package Review Block", () => {
                 it(`Should match figma scenario "${scenario.name}", iteration "${iteration.name}"`, async () => {
                     // Arrange
                     let props = generateDefaultProps();
-                    props.availableVaps = scenario.params.availableVaps;
                     props.damage = scenario.params.damage;
                     props.glassParts = scenario.params.glassParts;
                     props.lineItems.supportingItems = scenario.params.supportingItems;
@@ -918,6 +906,11 @@ describe("Service Package Review Block", () => {
                         propsData: props,
                     });
 
+                    wrapper.vm.initializeComponent({
+                        wipers: scenario.params.wiperResponse,
+                        rainDefense: scenario.params.rainDefenseResponse,
+                    });
+
                     // Act
                     await wrapper.vm.$nextTick();
 
@@ -932,12 +925,18 @@ describe("Service Package Review Block", () => {
     });
 });
 
+function initializeWithDefault(wrapper) {
+    wrapper.vm.initializeComponent({
+        wipers: [testConstants.parts.frontWiperPart],
+        rainDefense: testConstants.parts.rainDefensePart,
+    });
+}
+
 function generateDefaultProps() {
     return {
         servicePackageOptionsCmsName: testConstants.cmsPropValues.servicePackageOptionsCmsName,
         defaultPackageItemsCmsName: testConstants.cmsPropValues.defaultPackageItemsCmsName,
         vapsItemsCmsName: testConstants.cmsPropValues.vapsItemsCmsName,
-        availableVaps: [testConstants.parts.frontWiperPart, testConstants.parts.rainDefensePart],
         lineItems: {
             glassParts: [],
             supportingItems: [],

src/layouts/review/review-sections/service-package-review/service-package-review.vue

@@ -11,6 +11,9 @@ import {
     getHighestFullySatisfiedTier,
     containsLineItemWithPartType,
 } from "@/helpers/service-package-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import baseMixin from "@/mixins/base-mixin.js";
+import { storeActions } from "@/constants/store-actions";
 
 export default {
     name: "service-package-review",
@@ -18,14 +21,39 @@ export default {
         servicePackageOptionsCmsName: String,
         defaultPackageItemsCmsName: String,
         vapsItemsCmsName: String,
-        availableVaps: Array,
         lineItems: Object,
         damage: Object,
     },
     data() {
-        return {};
+        return {
+            availableVaps: [],
+        };
     },
     methods: {
+        loadInitialData() {
+            const wipersPromise = baseMixin.methods.dispatchStoreAction(storeActions.GET_WIPERS);
+            const rainDefensePromise = baseMixin.methods.dispatchStoreAction(
+                storeActions.GET_RAIN_DEFENSE
+            );
+
+            const promiseResultMap = [
+                {
+                    resultKey: "wipers",
+                    promise: wipersPromise,
+                },
+                {
+                    resultKey: "rainDefense",
+                    promise: rainDefensePromise,
+                },
+            ];
+
+            return settleAllPromises(promiseResultMap);
+        },
+        initializeComponent(apiResponses) {
+            const vapsFromApi = [...apiResponses.wipers, apiResponses.rainDefense];
+
+            this.availableVaps = vapsFromApi;
+        },
         editClicked() {
             this.$emit("edit-clicked");
         },

src/layouts/review/review.vue

@@ -55,11 +55,11 @@
                 <hr class="my-0" />
 
                 <servicePackageReview
+                    ref="servicePackageReview"
                     servicePackageOptionsCmsName="ServicePackageTitle"
                     defaultPackageItemsCmsName="DefaultPackageItemDescriptions"
                     vapsItemsCmsName="VapsItemDescriptions"
                     :damage="damageInfo"
-                    :availableVaps="availableVaps"
                     :lineItems="lineItems"
                     @edit-clicked="editServicePackage" />
             </div>
@@ -103,6 +103,8 @@ export default {
             storeActions.GET_RAIN_DEFENSE
         );
 
+        const servicePackageInitialDataPromise = servicePackageReview.methods.loadInitialData();
+
         // Settle promises and get results
         const promiseResultMap = [
             {
@@ -110,12 +112,8 @@ export default {
                 promise: cmsContentPromise,
             },
             {
-                resultKey: "wipers",
+                resultKey: "servicePackageData",
-                promise: wipersPromise,
+                promise: servicePackageInitialDataPromise,
-            },
-            {
-                resultKey: "rainDefense",
-                promise: rainDefensePromise,
             },
         ];
 
@@ -124,15 +122,11 @@ export default {
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
 
-            vm.availableWipers = resultMap.wipers;
+            vm.$refs.servicePackageReview.initializeComponent(resultMap.servicePackageData);
-            vm.availableRainDefense = [resultMap.rainDefense];
         });
     },
     data() {
-        return {
+        return {};
-            availableWipers: null,
-            availableRainDefense: null,
-        };
     },
     methods: {
         arePagePrerequisitesValid() {
@@ -175,9 +169,6 @@ export default {
         damageInfo() {
             return this.$store.getters.damage;
         },
-        availableVaps() {
-            return [...(this.availableWipers ?? []), ...(this.availableRainDefense ?? [])];
-        },
         lineItems() {
             return this.$store.getters.lineItems;
         },