From eceb7618057fb661a364e1e126731f4dbe0734a4 Mon Sep 17 00:00:00 2001
From: Dennis Kleber <dennis_kleber@mailbox.org>
Date: Fri, 29 Aug 2025 14:15:16 +0200
Subject: [PATCH 1/2] add page vor deprecated

---
 src/components/DonationForm.vue | 244 ++++++++++++++++----------------
 src/lang/de_DE.json             |   6 +-
 src/store/form.js               |   3 +
 3 files changed, 130 insertions(+), 123 deletions(-)

diff --git a/src/components/DonationForm.vue b/src/components/DonationForm.vue
index a241ef0..6359d09 100644
--- a/src/components/DonationForm.vue
+++ b/src/components/DonationForm.vue
@@ -1,138 +1,138 @@
 <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-if="deprecated">
+            <Headline :text="$t('error.deprecated.headline')" />
+            <vca-card v-html="$t('error.deprecated.text')"></vca-card>
+        </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';
+    export default {
+        name: 'DonationForm',
+        components: {
+            Slider,
+            StepOne,
+            StepTwo,
+            StepThree,
+            StepThanks,
+            PaymentFooter,
+            HeaderSteps,
+            Headline /*, ThanksFooter */,
         },
-        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',
+                deprecated: 'form/deprecated',
+            }),
+            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>
diff --git a/src/lang/de_DE.json b/src/lang/de_DE.json
index 8f3c113..8501da1 100644
--- a/src/lang/de_DE.json
+++ b/src/lang/de_DE.json
@@ -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",
diff --git a/src/store/form.js b/src/store/form.js
index 80edbf4..a9b9e57 100644
--- a/src/store/form.js
+++ b/src/store/form.js
@@ -44,6 +44,9 @@ const form = {
         },
         setting(state) {
             return state.setting
+        },
+        deprecated(state) {
+            return state.current.deprecated;
         }
     },
     mutations: {

From 9b8243a3431eea1fe167dcb81057e89a269631db Mon Sep 17 00:00:00 2001
From: Dennis Kleber <dennis_kleber@mailbox.org>
Date: Tue, 2 Sep 2025 10:23:50 +0200
Subject: [PATCH 2/2] add expired page

---
 src/components/DonationForm.vue      |  9 ++--
 src/components/steps/ExpiredPage.vue | 67 ++++++++++++++++++++++++++++
 src/lang/de_DE.json                  |  8 ++++
 src/store/form.js                    |  7 ++-
 4 files changed, 85 insertions(+), 6 deletions(-)
 create mode 100644 src/components/steps/ExpiredPage.vue

diff --git a/src/components/DonationForm.vue b/src/components/DonationForm.vue
index 6359d09..985f35b 100644
--- a/src/components/DonationForm.vue
+++ b/src/components/DonationForm.vue
@@ -1,9 +1,8 @@
 <template>
     <div>
         <vca-loading v-if="loadingFlow" />
-        <div v-if="deprecated">
-            <Headline :text="$t('error.deprecated.headline')" />
-            <vca-card v-html="$t('error.deprecated.text')"></vca-card>
+        <div v-else-if="expired">
+            <ExpiredPage />
         </div>
         <div v-else>
             <Headline :text="getText" />
@@ -41,6 +40,7 @@
     //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: {
@@ -52,6 +52,7 @@
             PaymentFooter,
             HeaderSteps,
             Headline /*, ThanksFooter */,
+            ExpiredPage,
         },
         props: {
             donation_form_id: {
@@ -111,7 +112,7 @@
                 product: 'form/product',
                 minAmount: 'form/minAmount',
                 loadingFlow: 'loadingFlow',
-                deprecated: 'form/deprecated',
+                expired: 'form/expired',
             }),
             getText() {
                 return this.step == 4 ? this.$t('headline.thanks') : this.$t('headline.donate');
diff --git a/src/components/steps/ExpiredPage.vue b/src/components/steps/ExpiredPage.vue
new file mode 100644
index 0000000..eac12d0
--- /dev/null
+++ b/src/components/steps/ExpiredPage.vue
@@ -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>
diff --git a/src/lang/de_DE.json b/src/lang/de_DE.json
index 8501da1..4db16c3 100644
--- a/src/lang/de_DE.json
+++ b/src/lang/de_DE.json
@@ -295,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."
+        }
     }
 }
diff --git a/src/store/form.js b/src/store/form.js
index a9b9e57..1f361a9 100644
--- a/src/store/form.js
+++ b/src/store/form.js
@@ -45,8 +45,11 @@ const form = {
         setting(state) {
             return state.setting
         },
-        deprecated(state) {
-            return state.current.deprecated;
+        expired(state) {
+            return state.current.expired;
+        },
+        expired_form(state) {
+            return state.current.expired_form
         }
     },
     mutations: {