From 2683e837a6b34f27742daaec77478549c8620d88 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Fri, 21 Feb 2025 12:44:25 -0500
Subject: [PATCH] CASH-132 add experiment.

---
 src/constants/experiments.js                 |  1 +
 src/experiment-components/donation-block.vue | 16 +++++++++++++---
 src/layouts/confirmation/confirmation.vue    |  8 +++++++-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/constants/experiments.js b/src/constants/experiments.js
index 696707827..8209cae9c 100644
--- a/src/constants/experiments.js
+++ b/src/constants/experiments.js
@@ -19,6 +19,7 @@ const experimentSettings = {
     INSURANCE_TAB_TO_DISPLAY_THRESHOLD_EXTERNAL: "NextGen_ExternalInsuranceTabDisplayThreshold",
     DISPLAY_MSR: "DisplayMSR",
     PRICING_BY_DAY: "DisplayPricingByDay",
+    FOSTER_LOVE: "DisplayFosterLove",
 };
 
 const experimentTriggers = {
diff --git a/src/experiment-components/donation-block.vue b/src/experiment-components/donation-block.vue
index 211cc3e28..10ebec7a5 100644
--- a/src/experiment-components/donation-block.vue
+++ b/src/experiment-components/donation-block.vue
@@ -20,7 +20,9 @@
                         target="_blank" />
                 </div>
             </div>
-            <div class="px-4" :class="[showDonationSuccess ? 'hide-donation-block' : 'show-donation-block']">
+            <div
+                class="px-4"
+                :class="[showDonationSuccess ? 'hide-donation-block' : 'show-donation-block']">
                 <div class="row">
                     <div class="col-12">
                         <div class="donation-slider my-4">
@@ -31,9 +33,17 @@
                                 :value="donationValues[0]"
                                 checked />
                             <label for="one" class="label">$1</label>
-                            <input name="amount" id="three" type="radio" :value="donationValues[1]" />
+                            <input
+                                name="amount"
+                                id="three"
+                                type="radio"
+                                :value="donationValues[1]" />
                             <label for="three" class="label">$3</label>
-                            <input name="amount" id="five" type="radio" :value="donationValues[2]" />
+                            <input
+                                name="amount"
+                                id="five"
+                                type="radio"
+                                :value="donationValues[2]" />
                             <label for="five" class="label">$5</label>
                             <div class="indicator-bar"></div>
                         </div>
diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue
index b839ae1ad..8221a933a 100644
--- a/src/layouts/confirmation/confirmation.vue
+++ b/src/layouts/confirmation/confirmation.vue
@@ -64,7 +64,7 @@
                                 :isItac="isItac"
                                 :isNoComp="isNoComp" />
 
-                            <div class="mt-3">
+                            <div class="mt-3" v-if="displayFosterLove">
                                 <donationBlock
                                     cmsWidgetName="DonationWidget"
                                     v-model="donationAmount"
@@ -245,6 +245,12 @@ export default {
         };
     },
     computed: {
+        displayFosterLove() {
+            return experimentMixin.methods.hasSettingEqualTo(
+                experimentSettings.FOSTER_LOVE,
+                "true"
+            );
+        },
         isRecalibrationOnOrder() {
             return containsRecalParts(this?.lineItems);
         },