From 8fc29cbdf8f878feff730993ad60d3ea3350a395 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 28 Jan 2025 13:55:45 -0500
Subject: [PATCH] WIP dontation block.

---
 .../donation-block/donation-block.spec.js     |   0
 .../donation-block/donation-block.vue         | 211 ++++++++++++++++++
 src/layouts/payment-method/payment-method.vue |   7 +-
 3 files changed, 217 insertions(+), 1 deletion(-)
 create mode 100644 src/fmg-components/donation-block/donation-block.spec.js
 create mode 100644 src/fmg-components/donation-block/donation-block.vue

diff --git a/src/fmg-components/donation-block/donation-block.spec.js b/src/fmg-components/donation-block/donation-block.spec.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/fmg-components/donation-block/donation-block.vue b/src/fmg-components/donation-block/donation-block.vue
new file mode 100644
index 000000000..f9e561ad6
--- /dev/null
+++ b/src/fmg-components/donation-block/donation-block.vue
@@ -0,0 +1,211 @@
+<template>
+    <div class="donation-block">
+            <div class="row">
+                <div class="col">
+                    <p class="headline text-center" v-html="DonationHeadline"></p>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-4">
+                    <img class="w-100 mt-1" :src="LogoImage">
+                </div>
+                <div class="col-8">
+                    <p class="small subheadline" v-html="DonationSubHeadline"></p>
+                    <p class="caption mb-0" v-html="DonationBodyText"></p>
+                    <p class="caption m-0" v-html="DonationBodySubText"></p>
+                    <textLink
+                        linkType="newWindowLink"
+                        text="Learn more"
+                        href="//www.safelite.com/about-safelite/safelite-autoglass-foundation/safelite-and-foster-love"
+                        target="_blank" />
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <div class="donation-slider my-4">
+                        <input name="amount" id="zero" type="radio" checked/>
+                        <label for="zero" class="label">None</label>
+                        <input name="amount" id="one" type="radio" />
+                        <label for="one" class="label">$1</label>
+                        <input name="amount" id="three" type="radio" />
+                        <label for="three" class="label" >$3</label>
+                        <input name="amount" id="five" type="radio" />
+                        <label for="five" class="label" >$5</label>
+                        <div class="indicator-bar" ></div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col">
+                    <p class="m-0 text-center caption" v-html="DonationFooterText"></p>
+                </div>
+            </div>
+        </div>
+</template>
+
+<script>
+import textLink from "@/ux-components/text-link/text-link";
+export default {
+    name: "donationBlock",
+    props: {
+        cmsWidgetName: String,
+    },
+    computed: {
+        DonationHeadline() {
+            return this.getCmsContent(this.cmsWidgetName, "HeaderText");
+        },
+        DonationSubHeadline() {
+            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
+        },
+        DonationBodyText() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText");
+        },
+        DonationBodySubText() {
+            return this.getCmsContent(this.cmsWidgetName, "BodyText2");
+        },
+        DonationFooterText() {
+            return this.getCmsContent(this.cmsWidgetName, "FooterText");
+        },
+        LogoImage() {
+            return this.getCmsContent("DonationWidget", "Image");
+        },
+    },
+    components: {
+        textLink,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.donation-block {
+    padding: 1rem;
+    border-radius: 1rem;
+    box-shadow: 0px 4px 24px -8px rgba(0,0,0,0.2);
+
+    p {
+        &.headline {
+            font-family: AvertaBold;
+            color: $red;
+            font-weight: 600;
+        }
+
+        &.subheadline {
+            font-family: AvertaBold;
+            font-weight: 600;
+        }
+    }
+
+    :deep(a) {
+        &.new-window-link {
+            color: $blue;
+            font-size: .75rem;
+        }
+    }
+    
+    .donation-slider {
+        position: relative;
+        width: 100%;
+        padding: 0;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        background: $blue-100;
+        border-radius: 3rem;
+        box-shadow: 0px 0px 0px 1px rgba(0, 112, 209, 1) inset;
+        font-size: .875rem;
+        .label {
+            display: inline-flex;
+            width: 25%;
+            height: 3rem;
+            padding: 0;
+            cursor: pointer;
+            transition: color 200ms ease-out;
+            align-items: center;
+            justify-content: center;
+            color: $blue;
+            z-index: 2;
+        }
+        .indicator-bar {
+            width: 25%;
+            height: 3rem;
+            position: absolute;
+            top: 0;
+            left: -2rem;
+            background: $blue;
+            border-radius: 3rem;
+            box-shadow: 0px 0px 0px 1px rgba(0,112,209,1) inset;
+            transition: transform 600ms cubic-bezier(.02,.94,.09,.97),
+                        background 300ms cubic-bezier(.17,.67,.14,1.03);
+            transform: translate3d(2rem,0,0);
+        }
+        .indicator-bar {
+            background: $blue;
+        }
+        input {
+            &#zero:checked {
+            ~ .indicator-bar {
+                transform: translateX(2rem);
+            }
+            }
+            &#one:checked {
+            ~ .indicator-bar {
+                transform: translateX(calc(100% + 2rem));
+            }
+            }
+            &#three:checked {
+            ~ .indicator-bar {
+                transform: translateX(calc(200% + 2rem));
+            }
+            }
+            &#five:checked {
+            ~ .indicator-bar {
+                transform: translateX(calc(300% + 2rem));
+            }
+            }
+        }
+        
+        input:checked {
+            + label {
+                color: #ffffff;
+            &:after {
+                content: "";
+                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;
+            }
+            }
+        }
+        input#zero + label:after {
+            display: none;
+        }
+        input[type="radio"] {
+            &:not(:checked),
+            &:checked {
+            position: absolute;
+            left: -999999px;
+            display: none;
+            }
+        }
+        @keyframes pulsate {
+            0% {
+                transform: scale(1);
+            }
+            50% {
+                transform: scale(7.5);
+            }
+            100% {
+                transform: scale(1);
+            }   
+        }
+    }
+
+}
+</style>
diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 38fa19611..14c318b60 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -37,7 +37,10 @@
                         :isItac="isItac"
                         :isNoComp="isNoComp"
                         :isExpandedOnLoad="false" />
-
+                    <div class="mt-3">
+                        <donationBlock
+                            cmsWidgetName="DonationWidget" />
+                    </div>
                     <hr />
 
                     <div>
@@ -156,6 +159,7 @@ import { mapTaxedLineItemsToStoreFormat } from "../../store";
 import { coverageStatus } from "@/constants/insurance";
 import { containsLineItemWithPartType } from "@/helpers/service-package-helper";
 import { containsRecalParts } from "@/helpers/recal-helper";
+import donationBlock from "@/fmg-components/donation-block/donation-block.vue";
 
 defineRule("payment-method-required", required(errorMessages.OPTION_REQUIRED));
 defineRule("recal-ack-required", required(errorMessages.RECAL_ACK_REQUIRED));
@@ -847,6 +851,7 @@ export default {
         textBlock,
         checkboxQuestion,
         contentGroupModal,
+        donationBlock,
     },
 };
 </script>