From 91da7f8c45902988266314d3b1661e0b1b82581a Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Wed, 19 Feb 2025 18:35:00 -0500
Subject: [PATCH] CASH-132 donation block updates.

---
 .../donation-block/donation-block.vue         | 78 ++++++++++++-------
 src/layouts/confirmation/confirmation.vue     |  2 -
 2 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/src/fmg-components/donation-block/donation-block.vue b/src/fmg-components/donation-block/donation-block.vue
index 2d57a9a29..211cc3e28 100644
--- a/src/fmg-components/donation-block/donation-block.vue
+++ b/src/fmg-components/donation-block/donation-block.vue
@@ -1,12 +1,12 @@
 <template>
     <div class="donation-block">
         <form ref="donationForm" id="donation-form" @submit.prevent="handleDonationAction">
-            <div class="row">
-                <div class="col">
+            <div class="row g-0">
+                <div class="col-12">
                     <p class="headline text-center" v-html="DonationHeadline"></p>
                 </div>
             </div>
-            <div class="row-align d-flex">
+            <div class="row-align d-flex px-4">
                 <div>
                     <img class="w-100 mt-1 me-4" :src="LogoImage" />
                 </div>
@@ -20,40 +20,42 @@
                         target="_blank" />
                 </div>
             </div>
-            <div class="row">
-                <div class="col">
-                    <div class="donation-slider my-4">
-                        <input
-                            name="amount"
-                            id="one"
-                            type="radio"
-                            :value="donationValues[0]"
-                            checked />
-                        <label for="one" class="label">$1</label>
-                        <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]" />
-                        <label for="five" class="label">$5</label>
-                        <div class="indicator-bar"></div>
+            <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">
+                            <input
+                                name="amount"
+                                id="one"
+                                type="radio"
+                                :value="donationValues[0]"
+                                checked />
+                            <label for="one" class="label">$1</label>
+                            <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]" />
+                            <label for="five" class="label">$5</label>
+                            <div class="indicator-bar"></div>
+                        </div>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-12">
+                        <button
+                            class="btn btn-secondary w-100 mb-2"
+                            v-html="DonationAddButtonWidget"></button>
                     </div>
                 </div>
             </div>
-            <div class="row">
-                <div class="col">
-                    <button
-                        class="btn btn-secondary w-100 mb-2"
-                        v-html="DonationAddButtonWidget"></button>
-                </div>
-            </div>
-            <div class="row">
-                <div class="col">
+            <div class="row px-4">
+                <div class="col-12">
                     <div
                         v-if="showDonationSuccess"
                         class="d-flex justify-content-center align-items-center btn-success w-100 mb-2"
                         v-html="DonationThanksAlertWidget"></div>
                 </div>
             </div>
-            <div class="row">
+            <div class="row px-4">
                 <div class="col">
                     <alert
                         v-if="showDonationError"
@@ -62,7 +64,7 @@
                 </div>
             </div>
             <div class="row">
-                <div class="col">
+                <div class="col-12">
                     <p class="my-4 mx-0 text-center caption" v-html="DonationFooterText"></p>
                 </div>
             </div>
@@ -134,10 +136,26 @@ export default {
 
 <style lang="scss" scoped>
 .donation-block {
-    padding: 1rem;
+    padding: 1rem 0;
     background-color: $gray-100;
     border-radius: 0;
 
+    .hide-donation-block {
+        max-height: 0;
+        overflow: hidden;
+        margin-top: 1rem;
+        opacity: 0;
+        transition: all 250ms ease-in;
+    }
+
+    .show-donation-block {
+        max-height: 136px;
+        overflow: hidden;
+        margin-top: 0;
+        opacity: 1;
+        transition: all 250ms ease-in;
+    }
+
     p {
         &.headline {
             font-family: AvertaBold;
diff --git a/src/layouts/confirmation/confirmation.vue b/src/layouts/confirmation/confirmation.vue
index fb6c1d5f0..402e97831 100644
--- a/src/layouts/confirmation/confirmation.vue
+++ b/src/layouts/confirmation/confirmation.vue
@@ -73,8 +73,6 @@
                                     :showDonationError="showDonationError" />
                             </div>
 
-                            <h3>donationAmount: {{ donationAmount }}</h3>
-
                             <!-- <button type="button" @click="addDonation(3)">
                                 Add Donation of $3
                             </button> -->