CSR-2383 fix cart expand on confirmation 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.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.