Skip to content

add page vor deprecated #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 2, 2025
Merged

add page vor deprecated #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eceb761
add page vor deprecated
deinelieblings Aug 29, 2025
9b8243a
add expired page
deinelieblings Sep 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
245 changes: 123 additions & 122 deletions src/components/DonationForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,138 +1,139 @@
<template>
<div>
<vca-loading v-if="loadingFlow" />
<Headline :text="getText" />
<Slider v-if="step === 4" />
<HeaderSteps :currentStep="step" :steps="steps" />
<div class="vca-card vca-border" id="topElement">
<StepOne v-if="step === 1" @submit="navigate(), step++" />
<StepTwo
v-if="step === 2"
@submit="navigate(), step++"
@back="navigate(), step--"
/>
<StepThree
v-if="step === 3"
ref="stepthree"
:product="product"
@back="navigate(), step--"
@success="success"
/>
<StepThanks v-if="step === 4" />
<div v-else-if="expired">
<ExpiredPage />
</div>
<div v-else>
<Headline :text="getText" />
<Slider v-if="step === 4" />
<HeaderSteps :currentStep="step" :steps="steps" />
<div class="vca-card vca-border" id="topElement">
<StepOne v-if="step === 1" @submit="navigate(), step++" />
<StepTwo
v-if="step === 2"
@submit="navigate(), step++"
@back="navigate(), step--" />
<StepThree
v-if="step === 3"
ref="stepthree"
:product="product"
@back="navigate(), step--"
@success="success" />
<StepThanks v-if="step === 4" />
</div>
<PaymentFooter v-if="step < 4" />
<!--ThanksFooter /-->
</div>
<PaymentFooter v-if="step < 4" />
<!--ThanksFooter /-->
</div>
</template>
<script>
//import axios from 'axios'
import StepOne from "@/components/steps/StepOne";
import StepTwo from "@/components/steps/StepTwo";
import StepThree from "@/components/steps/StepThree";
import StepThanks from "@/components/steps/StepThanks";
//import ThanksFooter from '@/components/utils/ThanksFooter'
import Slider from "@/components/steps/four/Slider";
import PaymentFooter from "@/components/layout/Footer";
import HeaderSteps from "@/components/layout/HeaderSteps";
//import LanguageSelection from "@/components/utils/LanguageSelection"
import Headline from "@/components/layout/Headline";
import { mapGetters } from "vuex";
export default {
name: "DonationForm",
components: {
Slider,
StepOne,
StepTwo,
StepThree,
StepThanks,
PaymentFooter,
HeaderSteps,
Headline /*, ThanksFooter */,
},
props: {
donation_form_id: {
type: String,
default: "",
},
setting: {
type: String,
default: "",
//import axios from 'axios'
import StepOne from '@/components/steps/StepOne';
import StepThanks from '@/components/steps/StepThanks';
import StepThree from '@/components/steps/StepThree';
import StepTwo from '@/components/steps/StepTwo';
//import ThanksFooter from '@/components/utils/ThanksFooter'
import PaymentFooter from '@/components/layout/Footer';
import HeaderSteps from '@/components/layout/HeaderSteps';
import Slider from '@/components/steps/four/Slider';
//import LanguageSelection from "@/components/utils/LanguageSelection"
import Headline from '@/components/layout/Headline';
import { mapGetters } from 'vuex';
import ExpiredPage from './steps/ExpiredPage.vue';
export default {
name: 'DonationForm',
components: {
Slider,
StepOne,
StepTwo,
StepThree,
StepThanks,
PaymentFooter,
HeaderSteps,
Headline /*, ThanksFooter */,
ExpiredPage,
},
amount: {
type: String,
default: "",
props: {
donation_form_id: {
type: String,
default: '',
},
setting: {
type: String,
default: '',
},
amount: {
type: String,
default: '',
},
interval: {
type: String,
default: '',
},
},
interval: {
type: String,
default: "",
data() {
return {
step: 1,
steps: [
{ id: 1, label: this.$t('header.amount') },
{ id: 2, label: this.$t('header.contact') },
{ id: 3, label: this.$t('header.payment') },
{ id: 4, label: this.$t('header.thanks') },
],
};
},
},
data() {
return {
step: 1,
steps: [
{ id: 1, label: this.$t("header.amount") },
{ id: 2, label: this.$t("header.contact") },
{ id: 3, label: this.$t("header.payment") },
{ id: 4, label: this.$t("header.thanks") },
],
};
},
created() {
this.$store
.dispatch({
type: "init",
data: { form_id: this.donation_form_id, setting: this.setting },
})
.then(() => {
let next = 0;
if (this.amount && this.amount >= this.minAmount) {
this.$store.commit("payment/money", {
amount: this.amount,
});
next++;
}
if (
this.interval &&
["monthly", "yearly"].includes(this.interval)
) {
this.$store.commit("payment/interval", this.interval);
next++;
}
if (next == 2) {
this.step = 2;
}
})
.catch((error) => console.log(error));
},
computed: {
...mapGetters({
product: "form/product",
minAmount: "form/minAmount",
loadingFlow: "loadingFlow",
}),
getText() {
return this.step == 4
? this.$t("headline.thanks")
: this.$t("headline.donate");
created() {
this.$store
.dispatch({
type: 'init',
data: { form_id: this.donation_form_id, setting: this.setting },
})
.then(() => {
let next = 0;
if (this.amount && this.amount >= this.minAmount) {
this.$store.commit('payment/money', {
amount: this.amount,
});
next++;
}
if (this.interval && ['monthly', 'yearly'].includes(this.interval)) {
this.$store.commit('payment/interval', this.interval);
next++;
}
if (next == 2) {
this.step = 2;
}
})
.catch((error) => console.log(error));
},
},
methods: {
navigate() {
var top = document.getElementById("topElement").offsetTop;
window.scrollTo(0, top);
window.top.postMessage("navigate", "*");
computed: {
...mapGetters({
product: 'form/product',
minAmount: 'form/minAmount',
loadingFlow: 'loadingFlow',
expired: 'form/expired',
}),
getText() {
return this.step == 4 ? this.$t('headline.thanks') : this.$t('headline.donate');
},
},
success() {
this.$emit("success");
//this.$refs.stepthree.commit()
this.step = 4;
methods: {
navigate() {
var top = document.getElementById('topElement').offsetTop;
window.scrollTo(0, top);
window.top.postMessage('navigate', '*');
},
success() {
this.$emit('success');
//this.$refs.stepthree.commit()
this.step = 4;
},
},
},
};
};
</script>
<style lang="scss">
.arr-btn-box {
width: max-content;
}
.arr-btn-box {
width: max-content;
}
</style>
67 changes: 67 additions & 0 deletions src/components/steps/ExpiredPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
<template>
<vca-card>
<div class="text-center">
<h2 class="text-center">
{{ headline }}
</h2>
<br />
<p class="text-center" style="font-weight: bold">{{ description }}</p>
<br />
<a
class="text-center vca-button-small"
style="width: auto; display: inline-flex"
:href="fallbackUrl">
{{ fallbackLabel }}</a
>

<br />
<br />
<p class="text-center">
{{ $t('error_page.expired.contact') }}
<a style="font-weight: bold" href="mailto:kontakt@vivaconagua.org"
>kontakt@vivaconagua.org</a
>.
</p>
</div>
</vca-card>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
name: 'ExpiredPage',
computed: {
...mapGetters({
expired: 'form/expired',
expired_form: 'form/expired_form',
}),
description() {
if (this.expired_form.description != '') {
return this.expired_form.description;
} else {
return this.$t('error_page.expired.description');
}
},
headline() {
if (this.expired_form.headline != '') {
return this.expired_form.headline;
} else {
return this.$t('error_page.expired.headline');
}
},
fallbackUrl() {
if (this.expired_form.fallback_url != '') {
return this.expired_form.fallback_url;
} else {
return 'https://www.vivaconagua.org/spende/';
}
},
fallbackLabel() {
if (this.expired_form.fallback_label != '') {
return this.expired_form.fallback_label;
} else {
return this.$t('error_page.expired.fallback_url');
}
},
},
};
</script>
14 changes: 13 additions & 1 deletion src/lang/de_DE.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,11 @@
}
},
"error": {
"payment": "Oh je, da ist leider ein Fehler passiert. Das tut uns leid. Wende dich bitte an kontakt@vivaconagua.org und gib diese Payment ID mit an"
"payment": "Oh je, da ist leider ein Fehler passiert. Das tut uns leid. Wende dich bitte an kontakt@vivaconagua.org und gib diese Payment ID mit an",
"deprecated": {
"headline": "Uuuups, das Formular wird nicht mehr verwendet.",
"text": "Bitte melde dich bei kontakt@vivaconagua.org"
}
},
"headline": {
"donate": "Jetzt Fördermitglied werden",
Expand Down Expand Up @@ -291,5 +295,13 @@
"language": "Sprache",
"contact": "Kontakt"
}
},
"error_page": {
"expired": {
"headline": "Das Formular ist abgelaufen",
"fallback_url": "zum neuen Formular",
"contact": "Bei Fragen oder Problemen melde dich gerne bei ",
"description": "Mit dem Button geht es zum neuen Formular."
}
}
}
6 changes: 6 additions & 0 deletions src/store/form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,12 @@ const form = {
},
setting(state) {
return state.setting
},
expired(state) {
return state.current.expired;
},
expired_form(state) {
return state.current.expired_form
}
},
mutations: {
Expand Down