Merge pull request #2117 from Safelite/CSR-2383-fix-cart-on-conf-page

Csr 2383 fix cart on conf page

src/fmg-components/cart/cart.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="cart">
-        <div class="px-0">
+        <div class="px-0" v-if="isCartReadyToLoad">
             <div
                 class="row vin-toggle flex align-items-center pt-4"
                 :class="[isExpanded ? 'expanded' : '']"
@@ -196,7 +196,7 @@ export default {
     },
     data() {
         return {
-            isExpanded: this.shouldHideRecalibration,
+            isExpanded: false,
             currencyFormatter: new Intl.NumberFormat("en-US", {
                 style: "currency",
                 currency: "USD",
@@ -210,6 +210,9 @@ export default {
         toggleIsExpanded() {
             this.isExpanded = !this.isExpanded;
         },
+        updateIsExpandedWithDefault() {
+            this.isExpanded = this.shouldHideRecalibration;
+        },
         getVapsPrice(packageName) {
             const vapsItems = this.getVapsCartItemsForSelectedPackage(packageName);
 
@@ -313,6 +316,11 @@ export default {
         },
     },
     computed: {
+        isCartReadyToLoad() {
+            var myReturn = this.shouldHideRecalibration !== null;
+            this.updateIsExpandedWithDefault();
+            return myReturn;
+        },
         lineItems: {
             get: function () {
                 return this.modelValue;

src/layouts/confirmation/confirmation.spec.js

@@ -559,140 +559,6 @@ describe("computed properties...", () => {
         // Assert
         expect(testValue).toEqual("Duration: Overnight");
     });
-
-    test("NoComp should return false for shouldHideRecalibration", () => {
-        //Arrange
-        const { wrapper } = setupMocks({});
-        wrapper.vm.submittedOrder = {
-            vehicle: {
-                imageUrl: "",
-            },
-            schedule: {
-                endTime: "10:00",
-                date: "2024-09-28",
-                jobMaxMinutes: 120,
-                jobMinMinutes: 60,
-                routeCode: "",
-            },
-            policy: {
-                isNoComp: true,
-            },
-            serviceLocation: store.getters.order.serviceLocation,
-        };
-        wrapper.vm.submittedOrder.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE;
-        // Act
-        const testValue = wrapper.vm.shouldHideRecalibration;
-
-        // Assert
-        expect(testValue).toEqual(false);
-    });
-    test("Itac should return false for shouldHideRecalibration", () => {
-        //Arrange
-        const { wrapper } = setupMocks({});
-        wrapper.vm.submittedOrder = {
-            vehicle: {
-                imageUrl: "",
-            },
-            schedule: {
-                endTime: "10:00",
-                date: "2024-09-28",
-                jobMaxMinutes: 120,
-                jobMinMinutes: 60,
-                routeCode: "",
-            },
-            policy: {
-                isItac: true,
-            },
-            serviceLocation: store.getters.order.serviceLocation,
-        };
-        wrapper.vm.submittedOrder.serviceLocation.appointmentType = AppointmentTypeStrings.MOBILE;
-        // Act
-        const testValue = wrapper.vm.shouldHideRecalibration;
-
-        // Assert
-        expect(testValue).toEqual(false);
-    });
-    test("Not Itac/NoComp with Recal should return true for shouldHideRecalibration", async () => {
-        //Arrange
-        const { wrapper } = setupMocks({});
-        const lineItems = {
-            glassParts: [
-                {
-                    partType: "RECALIBRATION",
-                },
-            ],
-        };
-
-        wrapper.vm.submittedOrder = {
-            vehicle: {
-                imageUrl: "",
-            },
-            schedule: {
-                endTime: "10:00",
-                date: "2024-09-28",
-                jobMaxMinutes: 120,
-                jobMinMinutes: 60,
-                routeCode: "",
-            },
-            policy: {
-                isItac: false,
-                isNoComp: false,
-            },
-            lineItems: {
-                glassParts: {
-                    partType: "Recalibration",
-                },
-            },
-            serviceLocation: store.getters.order.serviceLocation,
-        };
-
-        wrapper.setData({ lineItems: lineItems });
-        await wrapper.vm.$nextTick();
-
-        // Act
-        const testValue = wrapper.vm.shouldHideRecalibration;
-
-        // Assert
-        expect(testValue).toEqual(true);
-    });
-    test("Itac/NoComp with Recal should return false for shouldHideRecalibration", async () => {
-        //Arrange
-        const { wrapper } = setupMocks({});
-        const lineItems = {
-            glassParts: [
-                {
-                    partType: "RECALIBRATION",
-                },
-            ],
-        };
-
-        wrapper.vm.submittedOrder = {
-            vehicle: {
-                imageUrl: "",
-            },
-            schedule: {
-                endTime: "10:00",
-                date: "2024-09-28",
-                jobMaxMinutes: 120,
-                jobMinMinutes: 60,
-                routeCode: "",
-            },
-            policy: {
-                isItac: true,
-                isNoComp: false,
-            },
-            serviceLocation: store.getters.order.serviceLocation,
-        };
-
-        wrapper.setData({ lineItems: lineItems });
-        await wrapper.vm.$nextTick();
-
-        // Act
-        const testValue = wrapper.vm.shouldHideRecalibration;
-
-        // Assert
-        expect(testValue).toEqual(false);
-    });
 });
 
 function setupMocks({ customMountOptions }) {

src/layouts/confirmation/confirmation.vue

@@ -103,6 +103,7 @@ import { get12HourTimeFormat, get12HourTimeMobileFormat } from "@/helpers/date-h
 import { coverageStatus } from "@/constants/insurance";
 import { getDisplayTextForDurationLength } from "@/helpers/duration-length-helper";
 import { experimentSettings } from "@/constants/experiments";
+import experimentMixin from "@/mixins/experiment-mixin.js";
 import { partTypeStrings } from "@/constants/part-type-strings";
 import { containsLineItemWithPartType } from "@/helpers/service-package-helper";
 import { containsRecalParts } from "@/helpers/recal-helper.js";
@@ -151,12 +152,29 @@ export default {
         const availableVaps = [resultMap.rainDefense, ...resultMap.wipers];
         const lineItemsFromSubmittedOrder = deepClone(submittedOrder.lineItems);
 
+        const isNoComp = submittedOrder?.policy?.isNoComp;
+        const isItac = submittedOrder?.policy?.isItac;
+        const isRecalibrationOnOrder = containsRecalParts(lineItemsFromSubmittedOrder);
+        const hasRecalPriceRemoveExperiment =
+            experimentMixin.methods
+                .getSettingValue(experimentSettings.RECAL_PRICE_REMOVE)
+                ?.toLowerCase() === "true";
+
+        const shouldHideRecalibration = () => {
+            if (isNoComp || isItac) {
+                return false;
+            }
+
+            return hasRecalPriceRemoveExperiment && isRecalibrationOnOrder;
+        };
+
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
             vm.lineItems = lineItemsFromSubmittedOrder;
             vm.vaps = availableVaps;
             vm.submittedOrder = submittedOrder;
+            vm.shouldHideRecalibration = shouldHideRecalibration();
         });
     },
     data() {
@@ -164,22 +182,13 @@ export default {
             lineItems: [],
             vaps: [],
             submittedOrder: null,
+            shouldHideRecalibration: null,
         };
     },
     computed: {
         isRecalibrationOnOrder() {
             return containsRecalParts(this?.lineItems);
         },
-        shouldHideRecalibration() {
-            if (this.isNoComp || this.isItac) {
-                return false;
-            }
-
-            return (
-                this.getSettingValue(experimentSettings.RECAL_PRICE_REMOVE)?.toLowerCase() ===
-                    "true" && this.isRecalibrationOnOrder
-            );
-        },
         ShowCart() {
             if (this.isPia && this.submittedOrder?.settledTenderAmount == 0) {
                 // settleTenderAmount always shows 0 via localhost or dev.