302 lines
9.5 KiB
Vue
302 lines
9.5 KiB
Vue
<template>
|
|
<div class="donation-block">
|
|
<form ref="donationForm" id="donation-form" @submit.prevent>
|
|
<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 px-4">
|
|
<div>
|
|
<img class="w-100 mt-1 me-4" :src="LogoImage" />
|
|
</div>
|
|
<div>
|
|
<p class="small subheadline mb-2" v-html="DonationSubHeadline"></p>
|
|
<span class="caption mb-0" v-html="DonationBodyText"></span>
|
|
|
|
<textLink
|
|
linkType="newWindowLink"
|
|
text="Learn more"
|
|
:href="DonationBodySubText"
|
|
target="_blank" />
|
|
</div>
|
|
</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">
|
|
<buttonMain
|
|
ref="buttonMain"
|
|
:buttonText="DonationAddButtonCopy"
|
|
loaderColor="blue"
|
|
class="w-100 mb-2 custom-secondary"
|
|
@click-event="handleDonationAction" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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 px-4">
|
|
<div class="col">
|
|
<alert
|
|
v-if="showDonationError"
|
|
cmsWidgetName="DonationErrorWidget"
|
|
alertClass="alert-danger" />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p class="mt-2 mb-4 mx-0 text-center caption" v-html="DonationFooterText"></p>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import textLink from "@/ux-components/text-link/text-link";
|
|
import alert from "@/ux-components/alert/alert";
|
|
import buttonMain from "@/ux-components/button-main/button-main";
|
|
export default {
|
|
name: "donationBlock",
|
|
props: {
|
|
cmsWidgetName: String,
|
|
modelValue: String,
|
|
showDonationSuccess: Boolean,
|
|
showDonationError: Boolean,
|
|
donationValues: Array,
|
|
},
|
|
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");
|
|
},
|
|
DonationAddButtonCopy() {
|
|
return this.getCmsContent("DonationAddButtonWidget", "Text");
|
|
},
|
|
DonationThanksAlertWidget() {
|
|
return this.getCmsContent("DonationThanksAlertWidget", "Text");
|
|
},
|
|
DonationFooterText() {
|
|
return this.getCmsContent(this.cmsWidgetName, "FooterText");
|
|
},
|
|
LogoImage() {
|
|
return this.getCmsContent("DonationWidget", "Image");
|
|
},
|
|
selectedValue: {
|
|
get: function () {
|
|
return this.modelValue?.toString();
|
|
},
|
|
set: function (newValue) {
|
|
this.$emit("update:modelValue", newValue);
|
|
this.$emit("DonationAddedEvent");
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
handleDonationAction() {
|
|
const selectedAmount = this.$refs.donationForm.elements.amount?.value;
|
|
if (selectedAmount) {
|
|
this.selectedValue = selectedAmount;
|
|
}
|
|
},
|
|
removeLoader() {
|
|
this.$refs.buttonMain.removeLoader();
|
|
},
|
|
},
|
|
components: {
|
|
textLink,
|
|
alert,
|
|
buttonMain,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.donation-block {
|
|
padding: 1rem 0 0 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;
|
|
color: $red;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&.subheadline {
|
|
font-family: AvertaBold;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
:deep(a) {
|
|
&.new-window-link {
|
|
color: $blue;
|
|
font-size: 0.75rem;
|
|
}
|
|
}
|
|
|
|
img {
|
|
width: 5rem;
|
|
}
|
|
|
|
.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 4px 1px rgba(0, 112, 209, 1) inset;
|
|
font-size: 0.875rem;
|
|
.label {
|
|
position: relative;
|
|
display: inline-flex;
|
|
width: 33.3333%;
|
|
height: 3rem;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
transition: color 200ms ease-out;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: $blue;
|
|
z-index: 1;
|
|
}
|
|
.indicator-bar {
|
|
width: 33.3333%;
|
|
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 750ms cubic-bezier(0.02, 0.94, 0.09, 0.97);
|
|
transform: translate3d(2rem, 0, 0);
|
|
}
|
|
.indicator-bar {
|
|
background: $blue;
|
|
}
|
|
input {
|
|
&#one:checked {
|
|
~ .indicator-bar {
|
|
transform: translateX(2rem);
|
|
}
|
|
}
|
|
&#three:checked {
|
|
~ .indicator-bar {
|
|
transform: translateX(calc(100% + 2rem));
|
|
}
|
|
}
|
|
&#five:checked {
|
|
~ .indicator-bar {
|
|
transform: translateX(calc(200% + 2rem));
|
|
}
|
|
}
|
|
}
|
|
|
|
input:checked {
|
|
+ label {
|
|
color: $white;
|
|
}
|
|
}
|
|
input[type="radio"] {
|
|
&:not(:checked),
|
|
&:checked {
|
|
position: absolute;
|
|
left: -999999px;
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
.alert {
|
|
border: 1px solid $red;
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.btn-success {
|
|
background: $green-100;
|
|
border: 1px solid $green-400;
|
|
border-radius: 0.5rem;
|
|
height: 3rem;
|
|
padding: 0.5rem;
|
|
font-weight: 600;
|
|
&:before {
|
|
content: "";
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 17 16'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%230C7E47' d='M8.5 0a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm3.7 6.171-4.449 4.45a.559.559 0 0 1-.8 0l-2.16-2.16a.563.563 0 0 1 .792-.8l1.76 1.76 4.066-4.042a.563.563 0 1 1 .792.8v-.008Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M.5 0h16v16H.5z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
|
|
width: 1rem;
|
|
height: 0.95rem;
|
|
position: relative;
|
|
left: -0.25rem;
|
|
}
|
|
}
|
|
.custom-secondary {
|
|
&:hover {
|
|
color: $blue;
|
|
background: transparent;
|
|
border: 1px solid $blue;
|
|
}
|
|
}
|
|
}
|
|
</style>
|