CASH-132 WIP donation block.

src/fmg-components/donation-block/donation-block.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="donation-block" :class="[confirmationPage ? 'confirmation' : '']">
+    <div class="donation-block">
             <div class="row">
                 <div class="col">
                     <p class="headline text-center" v-html="DonationHeadline"></p>
@@ -12,20 +12,17 @@
                 <div>
                     <p class="small subheadline mb-2" 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"
+                        :href="DonationBodySubText"
                         target="_blank" />
                 </div>
             </div>
             <div class="row">
                 <div class="col">
                     <div class="donation-slider my-4">
-                        <input name="amount" id="zero" type="radio" checked/>
+                        <input name="amount" id="one" 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>
@@ -37,7 +34,7 @@
             </div>
             <div class="row">
                 <div class="col">
-                    <button v-if="confirmationPage" class="btn btn-secondary w-100 mb-2">Add donation to order</button>
+                    <button class="btn btn-secondary w-100 mb-2">Add donation to order</button>
                 </div>
             </div>
             <div class="row">
@@ -75,11 +72,6 @@ export default {
             return this.getCmsContent("DonationWidget", "Image");
         },
     },
-    data() {
-        return {
-            confirmationPage: false,
-        };
-    },
     components: {
         textLink,
     },
@@ -89,13 +81,8 @@ export default {
 <style lang="scss" scoped>
 .donation-block {
     padding: 1rem;
-    border-radius: 1rem;
+    background-color: $gray-100;
-    box-shadow: 0px 4px 24px -8px rgba(0,0,0,0.2);
+    border-radius: 0;
-    &.confirmation { // For use on confirmation page
-            background-color: $gray-100;
-            border-radius: 0;
-            box-shadow: none;
-        }
 
     p {
         &.headline {
@@ -135,7 +122,7 @@ export default {
         .label {
             position: relative;
             display: inline-flex;
-            width: 25%;
+            width: 33.3333%;
             height: 3rem;
             padding: 0;
             cursor: pointer;
@@ -146,7 +133,7 @@ export default {
             z-index: 2;
         }
         .indicator-bar {
-            width: 25%;
+            width: 33.3333%;
             height: 3rem;
             position: absolute;
             top: 0;
@@ -162,25 +149,20 @@ export default {
             background: $blue;
         }
         input {
-            &#zero:checked {
-            ~ .indicator-bar {
-                transform: translateX(2rem);
-            }
-            }
             &#one:checked {
-            ~ .indicator-bar {
+                ~ .indicator-bar {
-                transform: translateX(calc(100% + 2rem));
+                    transform: translateX(2rem);
-            }
+                }
             }
             &#three:checked {
-            ~ .indicator-bar {
+                ~ .indicator-bar {
-                transform: translateX(calc(200% + 2rem));
+                    transform: translateX(calc(100% + 2rem));
-            }
+                }
             }
             &#five:checked {
-            ~ .indicator-bar {
+                ~ .indicator-bar {
-                transform: translateX(calc(300% + 2rem));
+                    transform: translateX(calc(200% + 2rem));
-            }
+                }
             }
         }
         
@@ -203,9 +185,6 @@ export default {
             }
             }
         }
-        input#zero + label:after {
-            display: none;
-        }
         input[type="radio"] {
             &:not(:checked),
             &:checked {

src/layouts/confirmation/confirmation.vue

@@ -64,6 +64,11 @@
                                 :isItac="isItac"
                                 :isNoComp="isNoComp" />
 
+                                <div class="mt-3">
+                                <donationBlock
+                                    cmsWidgetName="DonationWidget" />
+                                </div>
+
                             <hr class="mb-5" />
 
                             <div class="emailtext" v-html="ConfirmationEmailText"></div>
@@ -108,6 +113,7 @@ 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";
+import donationBlock from "../../fmg-components/donation-block/donation-block.vue";
 
 export default {
     name: "confirmation",
@@ -460,6 +466,7 @@ export default {
         addToCalendar,
         cart,
         textBlock,
+        donationBlock
     },
 };
 </script>

src/layouts/payment-method/payment-method.vue

@@ -37,10 +37,7 @@
                         :isItac="isItac"
                         :isNoComp="isNoComp"
                         :isExpandedOnLoad="false" />
-                    <div class="mt-3">
+            
-                        <donationBlock
-                            cmsWidgetName="DonationWidget" />
-                    </div>
                     <hr />
 
                     <div>
@@ -159,7 +156,6 @@ 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));
@@ -851,7 +847,6 @@ export default {
         textBlock,
         checkboxQuestion,
         contentGroupModal,
-        donationBlock,
     },
 };
 </script>