From 5316a2d3c182fe099b37526e304b704dc3e5dbb8 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Thu, 30 Jan 2025 09:19:10 -0500
Subject: [PATCH] CASH-132 donation component updates.

Ready for tech review.
---
 .../donation-block/donation-block.vue         | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/fmg-components/donation-block/donation-block.vue b/src/fmg-components/donation-block/donation-block.vue
index 538ae664b..a3bca8fe3 100644
--- a/src/fmg-components/donation-block/donation-block.vue
+++ b/src/fmg-components/donation-block/donation-block.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="donation-block">
+    <div class="donation-block" :class="[confirmationPage ? 'confirmation' : '']">
             <div class="row">
                 <div class="col">
                     <p class="headline text-center" v-html="DonationHeadline"></p>
@@ -35,6 +35,11 @@
                     </div>
                 </div>
             </div>
+            <div class="row">
+                <div class="col">
+                    <button v-if="confirmationPage" class="btn btn-secondary w-100 mb-2">Add donation to order</button>
+                </div>
+            </div>
             <div class="row">
                 <div class="col">
                     <p class="m-0 text-center caption" v-html="DonationFooterText"></p>
@@ -70,6 +75,11 @@ export default {
             return this.getCmsContent("DonationWidget", "Image");
         },
     },
+    data() {
+        return {
+            confirmationPage: false,
+        };
+    },
     components: {
         textLink,
     },
@@ -81,6 +91,11 @@ export default {
     padding: 1rem;
     border-radius: 1rem;
     box-shadow: 0px 4px 24px -8px rgba(0,0,0,0.2);
+    &.confirmation { // For use on confirmation page
+            background-color: $gray-100;
+            border-radius: 0;
+            box-shadow: none;
+        }
 
     p {
         &.headline {
@@ -115,9 +130,10 @@ export default {
         justify-content: center;
         background: $blue-100;
         border-radius: 3rem;
-        box-shadow: 0px 0px 0px 1px rgba(0, 112, 209, 1) inset;
+        box-shadow: 0px 0px 4px 1px rgba(0, 112, 209, 1) inset;
         font-size: .875rem;
         .label {
+            position: relative;
             display: inline-flex;
             width: 25%;
             height: 3rem;
@@ -176,14 +192,14 @@ export default {
                 background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 870.67 816.32'%3E%3Cdefs%3E%3ClinearGradient id='linear-gradient' x1='662.76' y1='671.84' x2='260.67' y2='-24.61' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23600'/%3E%3Cstop offset='.38' stop-color='%23c00'/%3E%3Cstop offset='.62' stop-color='red'/%3E%3Cstop offset='.7' stop-color='%23fa0000'/%3E%3Cstop offset='.78' stop-color='%23e00'/%3E%3Cstop offset='.85' stop-color='%23d00'/%3E%3Cstop offset='1' stop-color='%238a0000'/%3E%3C/linearGradient%3E%3ClinearGradient id='linear-gradient1' x1='435.29' y1='486.21' x2='416.19' y2='-115.43' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff3e3e'/%3E%3Cstop offset='.99' stop-color='%23fff'/%3E%3C/linearGradient%3E%3ClinearGradient id='linear-gradient2' x1='52.9' y1='694.61' x2='45.74' y2='415.28' gradientTransform='rotate(1.6 9670.576 4535.536)' xlink:href='%23linear-gradient1'/%3E%3ClinearGradient id='linear-gradient3' x1='46.8' y1='694.77' x2='39.64' y2='415.44' gradientTransform='rotate(1.6 9670.576 4535.536)' xlink:href='%23linear-gradient1'/%3E%3ClinearGradient id='linear-gradient4' x1='25.7' y1='695.32' x2='18.53' y2='415.98' gradientTransform='rotate(1.6 9670.576 4535.536)' xlink:href='%23linear-gradient1'/%3E%3ClinearGradient id='linear-gradient5' x1='-12.6' y1='696.3' x2='-19.76' y2='416.96' gradientTransform='rotate(1.6 9670.576 4535.536)' xlink:href='%23linear-gradient1'/%3E%3Cstyle%3E .st5%7Bfill:%23ffd8d8%7D %3C/style%3E%3C/defs%3E%3Cpath d='M850.73 157.29c-15.89-38.68-40.56-73.38-72.89-100.06-60.58-50.01-144.81-71.78-220.55-46.27-29.85 10.06-56.86 26.94-79.49 48.79-17.18 16.58-31.14 35.81-42.69 56.47-16.92-29.82-38.81-56.16-66.99-76.98C336.25 15.7 297.46 2.91 258.1.42c-80.59-5.1-157.87 36.47-206.16 99.43C-8.99 179.3-11 287.46 18.6 379.62c35.58 110.77 112.11 205.92 195.99 284.42 31.77 29.73 65.5 57.35 100.52 83.15 34.93 25.74 70.73 49.34 110.8 66.16.28.18.56.33.84.49.01 0 .02.02.04.02.2.11.4.23.6.34 3.75 2.11 8.15 2.87 12.24 1.23 54.83-22.08 102.82-57.24 148.96-93.64 45.1-35.59 87.47-74.76 125.92-117.46 76.48-84.93 140.93-187.72 154.03-303.36 5.46-48.14.68-98.65-17.82-143.67Z' style='fill:%23840000'/%3E%3Cpath d='M435.11 799c19.29-7.72 34.73-15.43 54.02-27.01 169.78-108.04 385.86-320.26 362.7-540.2-23.15-223.8-320.26-308.68-416.72-77.17l.1-.09C338.75-76.98 41.64 7.91 18.49 231.71c-23.15 219.94 192.93 432.16 362.7 540.2 19.29 11.58 34.73 19.29 54.02 27.01l-.1.09Z' style='fill:url(%23linear-gradient)'/%3E%3Cpath d='M300.26 415.14c29.1-9.41 57.48-21.36 83.9-36.84 31.75-18.59 60.86-41.88 90.42-63.69 66.44-49.04 134.87-100.05 213.64-127.48 37.03-12.89 76.56-20.34 115.88-17.76 6.31.41 12.56 1.08 18.77 1.94-12.88-32.82-33.06-62.11-59.36-85.5-39-34.68-89.71-54.57-139.14-54.57-77.87 0-142.09 46.89-176.21 128.64l-12.97 31.08-12.96-31.08C388.1 78.06 323.86 31.14 245.96 31.14c-49.44 0-100.16 19.89-139.15 54.57-41.97 37.33-68.37 89.69-74.35 147.47-5.25 49.85 2.23 102.2 22.22 155.6 4.21 11.26 9.01 22.58 14.33 33.94 12.11 4.24 24.69 7.51 37.54 9.82 64.26 11.53 132 2.55 193.7-17.4Z' style='fill:url(%23linear-gradient1)'/%3E%3Cpath d='m111.01 121.67 9.89 6.48c9.83-19.06 23.38-36.68 39.91-51.57 16.54-14.89 36.06-27.07 57.51-35.46-44.04 12.93-82.87 42.12-107.32 80.55Z' style='fill:url(%23linear-gradient2)'/%3E%3Cpath d='m98.84 113.71 9.87 6.46c25.6-38.5 65.34-67.02 109.62-79.06-22.64 4.17-44.93 12.56-65.32 24.83a201.356 201.356 0 0 0-54.18 47.77Z' style='fill:url(%23linear-gradient3)'/%3E%3Cpath d='m150.02 407.87 42.63-1c-25.71-31.97-74.8-110.78-84.77-150.14-4.95-19.66-7.16-40.01-5.82-60.43 1.34-20.4 6.21-40.82 14.9-60l-10.94-6.39c-11.15 19.55-18.58 41.12-22.18 63.23-3.62 22.15-3.4 44.81-.06 66.95 3.35 22.17 9.76 43.81 18.36 64.51 8.59 20.7 35.57 64.51 47.89 83.25Z' style='fill:url(%23linear-gradient4)'/%3E%3Cpath d='m96.55 407.85 46.92 1.99c-12.2-19.36-39.45-61.26-47.81-82.59-8.39-21.33-14.49-43.59-17.48-66.33-2.96-22.73-2.72-45.95 1.44-68.49 4.14-22.53 12.15-44.36 23.87-63.96l-10.92-6.37C78.38 142.06 67.8 165 61.4 189.27c-6.45 24.29-8.67 49.78-7.32 75.03 1.36 25.25 6.21 50.23 13.58 74.25 7.37 24.07 17.26 47.22 28.89 69.31Z' style='fill:url(%23linear-gradient5)'/%3E%3Cpath class='st5' d='M599.93 49.87c26.73-4.07 54.64.43 79.43 12.61l5.43-12.03c-28.69-9.28-58.72-9.08-84.86-.58Z'/%3E%3Cpath class='st5' d='M599.93 49.87c26.73-4.07 54.64.43 79.43 12.61l5.43-12.03c-28.69-9.28-58.72-9.08-84.86-.58Z'/%3E%3Cpath class='st5' d='M678.1 65.29c-23.87-12.86-51.33-18.44-78.17-15.42 27.42 1.43 52.79 11.66 72.74 27.44l5.43-12.02Z'/%3E%3Cpath class='st5' d='M678.1 65.29c-23.87-12.86-51.33-18.44-78.17-15.42 27.42 1.43 52.79 11.66 72.74 27.44l5.43-12.02ZM803.48 169.34c-9.09-23.33-21.64-44.67-36.95-62.74-21.11-25.04-47.51-43.85-75.7-54.09l-6.28 12.66c24.11 12.94 44.95 32.73 60.31 56.55 9.58 14.74 17.05 30.99 22.29 48.05 12.08-1 24.21-1.18 36.32-.42Z'/%3E%3Cpath class='st5' d='M803.48 169.34c-9.09-23.33-21.64-44.67-36.95-62.74-21.11-25.04-47.51-43.85-75.7-54.09l-6.28 12.66c24.11 12.94 44.95 32.73 60.31 56.55 9.58 14.74 17.05 30.99 22.29 48.05 12.08-1 24.21-1.18 36.32-.42Z'/%3E%3Cpath class='st5' d='m683.1 68.09-6.28 12.65c19.1 16.29 33.07 37.32 41.37 59.59 4.39 11.73 7.21 23.76 8.61 35.73 10.7-2.41 21.52-4.29 32.41-5.51-4.45-15.92-10.93-31.25-19.38-45.35-14.02-23.49-33.57-43.54-56.74-57.11Z'/%3E%3Cpath class='st5' d='m683.1 68.09-6.28 12.65c19.1 16.29 33.07 37.32 41.37 59.59 4.39 11.73 7.21 23.76 8.61 35.73 10.7-2.41 21.52-4.29 32.41-5.51-4.45-15.92-10.93-31.25-19.38-45.35-14.02-23.49-33.57-43.54-56.74-57.11Z'/%3E%3C/svg%3E");
                 background-repeat: no-repeat;
                 font-size: 1rem;
-                color: $red;
                 animation: pulsate 1s;
-                animation-delay: 500ms;
                 width: 1rem;
                 height: 0.95rem;
-                position: relative;
-                top: 1px;
-                left: 2px;
+                position: absolute;
+                opacity: 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
             }
             }
         }
@@ -201,12 +217,11 @@ export default {
         @keyframes pulsate {
             0% {
                 transform: scale(1);
-            }
-            50% {
-                transform: scale(7.5);
+                opacity: 1;
             }
             100% {
-                transform: scale(1);
+                transform: scale(10);
+                opacity: 0;
             }   
         }
     }