Add thankyou page

assets/js/Stepper.vue

@@ -1,7 +1,7 @@
 <template>
-    <form action="#" method="POST" @submit.prevent="submit" class="px-3">
-        <carousel :per-page="1" :navigate-to="innerStep" :pagination-enabled="false" class="flex gap-8 shadow-xl my-10 border-2 border-primary rounded-xl overflow-auto max-w-[1260px] py-16 px-8 mx-auto">
-            <slide>
+    <form action="#" method="POST" @submit.prevent="submit" class="px-3 transition-all duration-300 mx-auto w-[960px]">
+        <carousel :per-page="1" :mouse-drag="false" :navigate-to="innerStep" :pagination-enabled="false" class="flex gap-8 shadow-xl my-10 border-2 border-primary rounded-xl overflow-auto max-w-[1260px] mx-auto">
+            <slide class="py-16 px-8">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 1</div>
                 <heading>Welche <span class="text-primary">Immobilie</span><br />möchten Sie verkaufen?</heading>
                 <radio-grid v-model="value.category_id" class="mt-8" :options="categories"></radio-grid>
@@ -9,134 +9,171 @@
             </slide>
 
             <!-- ********************************* Haus ********************************** -->
-            <slide v-if="value.category_id == 'Haus'">
+            <slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                 <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Hauses?</heading>
                 <radio-grid v-model="value.plot_area" class="mt-8" :options="plotAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
             </slide>
-            <slide v-if="value.category_id == 'Haus'">
+            <slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
                 <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> des Hauses?</heading>
                 <radio-grid v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
             </slide>
-            <slide v-if="value.category_id == 'Haus'">
+            <slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                 <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Haus?</heading>
                 <radio-grid v-model="value.number_of_floors" class="mt-8" :options="numbersOfRooms"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
             </slide>
-            <slide v-if="value.category_id == 'Haus'">
+            <slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
                 <heading>Wann wurde das<br />Haus <span class="text-primary">erbaut?</span></heading>
-                <veeno :pipsy="pipsy" :tooltips="tooltips" :step="5" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
+                <veeno :pipsy="pipsy" :tooltips="tooltips" :step="1" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
                 <pagination v-model="innerStep" class="mt-24"></pagination>
             </slide>
-            <slide v-if="value.category_id == 'Haus'">
+            <slide class="py-16 px-8" v-if="value.category_id == 'Haus'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
                 <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Hauses?</heading>
                 <radio-grid v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
-                <pagination v-model="innerStep" :nextable="value.condition !== null"></pagination>
+                <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
             </slide>
 
             <!-- ********************************* Gewerbe ********************************** -->
-            <slide v-if="value.category_id == 'Gewerbe'">
+            <slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                 <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Gewerbes?</heading>
                 <radio-grid v-model="value.plot_area" class="mt-8" :options="plotAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
             </slide>
-            <slide v-if="value.category_id == 'Gewerbe'">
+            <slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
                 <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> des Gewerbes?</heading>
                 <radio-grid v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
             </slide>
-            <slide v-if="value.category_id == 'Gewerbe'">
+            <slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                 <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Gewerbe?</heading>
                 <radio-grid v-model="value.number_of_floors" class="mt-8" :options="numbersOfRooms"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
             </slide>
-            <slide v-if="value.category_id == 'Gewerbe'">
+            <slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
                 <heading>Wann wurde das<br />Gewerbe <span class="text-primary">erbaut?</span></heading>
-                <veeno :pipsy="pipsy" :tooltips="tooltips" :step="5" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
+                <veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
                 <pagination v-model="innerStep" class="mt-24"></pagination>
             </slide>
-            <slide v-if="value.category_id == 'Gewerbe'">
+            <slide class="py-16 px-8" v-if="value.category_id == 'Gewerbe'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
                 <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Gewerbes?</heading>
                 <radio-grid v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
-                <pagination v-model="innerStep" :nextable="value.condition !== null"></pagination>
+                <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
             </slide>
 
             <!-- ******************************** Wohnung ******************************** -->
-            <slide v-if="value.category_id == 'Wohnung'">
+            <slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                 <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> der Wohnung?</heading>
                 <radio-grid v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
             </slide>
-            <slide v-if="value.category_id == 'Wohnung'">
+            <slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
                 <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat die Wohnung?</heading>
                 <radio-grid v-model="value.number_of_floors" class="mt-8" :options="numbersOfRooms"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
             </slide>
-            <slide v-if="value.category_id == 'Wohnung'">
+            <slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                 <heading>Wann wurde die<br />Wohnung <span class="text-primary">erbaut?</span></heading>
-                <veeno :pipsy="pipsy" :tooltips="tooltips" :step="5" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
+                <veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
                 <pagination v-model="innerStep" class="mt-24"></pagination>
             </slide>
-            <slide v-if="value.category_id == 'Wohnung'">
+            <slide class="py-16 px-8" v-if="value.category_id == 'Wohnung'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
                 <heading>Wie ist der<br /><span class="text-primary">Zustand</span> der Wohnung?</heading>
                 <radio-grid v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
-                <pagination v-model="innerStep" :nextable="value.condition !== null"></pagination>
+                <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
             </slide>
 
             <!-- ******************************** Grundstueck ******************************** -->
-            <slide v-if="value.category_id == 'Grundstück'">
+            <slide class="py-16 px-8" v-if="value.category_id == 'Grundstück'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
                 <heading>Wie ist die <span class="text-primary">Fläche</span><br />des Grundstücks?</heading>
                 <radio-grid v-model="value.plot_area" class="mt-8" :options="plotAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
             </slide>
-            <slide v-if="value.category_id == 'Grundstück'">
+            <slide class="py-16 px-8" v-if="value.category_id == 'Grundstück'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
                 <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> des Grundstücks?</heading>
                 <radio-grid v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
                 <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
             </slide>
-            <slide v-if="value.category_id == 'Grundstück'">
+            <slide class="py-16 px-8" v-if="value.category_id == 'Grundstück'">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                 <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Grundstücks?</heading>
                 <radio-grid v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
-                <pagination v-model="innerStep" :nextable="value.condition !== null"></pagination>
+                <pagination v-model="innerStep" class="mt-5" :nextable="value.condition !== null"></pagination>
             </slide>
 
-            <slide class="w-full flex-none ">
-                <heading>Bitte geben Sie die Daten des Objekts ein</heading>
-                <div class="grid grid-cols-2 gap-6">
-                    <input type="text" v-model="value.object_address" name="object_address" placeholder="Straße & Hausnr" />
-                    <input type="text" v-model="value.object_zip" name="object_zip" placeholder="PLZ" />
-                    <input type="text" v-model="value.object_location" name="object_location" placeholder="Ort" />
+            <slide class="py-16 px-8">
+                <heading>Bitte geben Sie Ihre Daten ein</heading>
+                <div class="grid grid-cols-2 gap-4">
+                    <v-text v-model="value.object_address" name="object_address" label="Straße & Hausnr des Objekts" />
+                    <v-text v-model="value.object_zip" name="object_zip" label="PLZ des Objekts" />
+                    <v-text v-model="value.object_location" name="object_location" label="Ort des Objekts" />
+                    <v-text v-model="value.firstname" name="firstname" label="Ihr Vorname" />
+                    <v-text v-model="value.lastname" name="lastname" label="Ihr Nachname" />
+                    <v-text v-model="value.email" name="email" label="Ihre E-Mail-Adresse" />
+                    <v-text v-model="value.phone" name="phone" label="Ihre Telefonnummer" />
                 </div>
-                <pagination v-model="innerStep" class="mt-12" :nextable="value.object_address.length > 0 && value.object_zip.length > 0 && value.object_location.length > 0"></pagination>
+                <pagination
+                    v-model="innerStep"
+                    class="mt-6"
+                    :nextable="
+                        value.object_address.length > 0 &&
+                            value.object_zip.length > 0 &&
+                            value.object_location.length > 0 &&
+                            value.firstname.length !== 0 &&
+                            value.lastname.length !== 0 &&
+                            value.email.length !== 0 &&
+                            value.phone.length !== 0
+                    "
+                    submit
+                ></pagination>
             </slide>
 
-            <slide class="w-full flex-none ">
-                <heading>Bitte geben Sie Ihre Daten ein</heading>
-                <div class="grid grid-cols-2 gap-6">
-                    <input type="text" v-model="value.firstname" name="firstname" placeholder="Vorname" />
-                    <input type="text" v-model="value.lastname" name="lastname" placeholder="Nachname" />
-                    <input type="text" v-model="value.email" name="email" placeholder="E-Mail-Adresse" />
-                    <input type="text" v-model="value.phone" name="phone" placeholder="Telefonnummer" />
+            <slide>
+                <div class="w-full h-full bg-white shadow-2xl ring-1 ring-gray-900/5 rounded-xl grid grid-cols-1 sm:grid-cols-[1fr_250px] grid-rows-[10rem_1fr] gap-6 overflow-hidden bg-gradient-to-bl from-white via-white to-black/10">
+                    <div class="bg-green-200 w-40 h-40 flex justify-center items-center [clip-path:circle(70%_at_30%_30%)]">
+                        <svg class="w-24 h-24 text-green-400 relative -left-3 -top-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
+                        </svg>
+                    </div>
+                    <div class="isolate self-center justify-self-end row-span-2 sm:pt-8 sm:pb-8 relative -right-3">
+                        <div class="absolute right-0 top-0 h-full flex items-center justify-end">
+                            <div class="bg-green-200 w-96 h-96 flex [clip-path:circle(50%_at_110%_50%)] sm:[clip-path:circle(50%_at_80%_50%)]"></div>
+                        </div>
+                        <div class="overflow-hidden rounded-l-lg rotate-2 shadow relative z-10 -left-2">
+                            <img class="w-64 h-32 object-cover" src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/haus-2.jpg" />
+                        </div>
+                        <div class="overflow-hidden rounded-l-lg -rotate-2 shadow relative left-2">
+                            <img class="w-64 h-32 object-cover" src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/haus-1.jpg" />
+                        </div>
+                    </div>
+                    <div class="self-end flex-grow pb-8 pl-8 pr-8 sm:pr-0">
+                        <div class="font-bold text-xl md:text-3xl">Vielen Dank für Ihre Anfrage</div>
+                        <div class="text-sm mt-4 md:text-lg">In Kürze erhalten Sie eine Bestätigung per E-Mail.<br />Ein Mitarbeiter wird sich zeitnah bei Ihnen melden.</div>
+                        <div class="flex justify-between mt-3 items-end">
+                            <span class="text-sm font-semibold text-neutral-700">Viele Grüße<br />Deine Immobilienbewertung</span>
+                            <div class="flex-none ml-3">
+                                <img src="https://deine-immobilienbewertung.de/wp-content/uploads/2022/05/logo-slider.png" />
+                            </div>
+                        </div>
+                    </div>
                 </div>
-                <v-btn href="#" class="mt-4" :disabled="value.firstname.length == 0 || value.lastname.length == 0 || value.email.length == 0 || value.phone.length == 0" type="submit">Absenden</v-btn>
             </slide>
         </carousel>
     </form>
@@ -149,22 +186,26 @@ import veeno from 'veeno';
 import wNumb from 'wnumb';
 import 'nouislider/distribute/nouislider.min.css';
 import axios from 'axios';
+import dayjs from 'dayjs';
 
 export default {
     data: function() {
         return {
+            finished: true,
             tooltips: [wNumb({decimals: 0})],
             pipsy: {
-                mode: 'range',
-                density: 3,
-                filter: () => 1,
+                mode: 'steps',
+                density: 1,
+                filter: function(value) {
+                    return value % 50 === 0 ? 1 : 0;
+                },
                 format: wNumb({
                     decimals: 0
                 })
             },
-            range: {min: 1600, max: 2020},
+            range: {min: [1800, 1], max: [dayjs().year(), 1]},
             value: {
-                category_id: null,
+                category_id: 'Haus',
                 living_area: null,
                 plot_area: null,
                 construction_year: null,
@@ -178,7 +219,7 @@ export default {
                 phone: '',
                 email: ''
             },
-            innerStep: 0,
+            innerStep: 7,
             categories: [
                 {key: 'Haus', label: 'Haus', icon: 'category-house'},
                 {key: 'Grundstück', label: 'Grundstück', icon: 'category-plot'},
@@ -254,8 +295,11 @@ export default {
         back() {
             this.innerStep--;
         },
-        submit() {
-            axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', this.value);
+        async submit() {
+            await axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', this.value);
+
+            this.innerStep++;
+            this.finished = true;
         }
     },
     components: {

assets/js/app.js

@@ -5,6 +5,7 @@ import Stepper from './Stepper.vue';
 import RadioGrid from './components/RadioGrid.vue';
 import Pagination from './components/Pagination.vue';
 import VBtn from './components/VBtn.vue';
+import VText from './components/VText.vue';
 import svg from './svg.mixin.js';
 
 Vue.mixin(svg);
@@ -12,6 +13,7 @@ Vue.component('radio-grid', RadioGrid);
 Vue.component('stepper', Stepper);
 Vue.component('v-btn', VBtn);
 Vue.component('pagination', Pagination);
+Vue.component('v-text', VText);
 const app = new Vue();
 app.$mount(document.getElementById('stepper-main'));
 

assets/js/components/Pagination.vue

@@ -4,7 +4,8 @@
             <v-btn href="#" v-show="prev" @click.prevent="$emit('input', value - 1)" :disabled="!prevable">Zurück</v-btn>
         </div>
         <div>
-            <v-btn href="#" v-show="next" @click.prevent="$emit('input', value + 1)" :disabled="!nextable">Weiter</v-btn>
+            <v-btn href="#" v-show="next && !submit" @click.prevent="$emit('input', value + 1)" :disabled="!nextable">Weiter</v-btn>
+            <v-btn href="#" class="mt-4" type="submit" :disabled="!nextable" v-show="next && submit">Absenden</v-btn>
         </div>
     </div>
 </template>
@@ -12,6 +13,10 @@
 <script>
 export default {
     props: {
+        submit: {
+            type: Boolean,
+            default: false
+        },
         next: {
             type: Boolean,
             default: true

assets/js/components/RadioGrid.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="flex space-x-4 justify-center">
+    <div class="flex space-x-4 flex-wrap justify-center">
         <label :key="index" v-for="(item, index) in options" class="w-40">
             <input class="invisible absolute left-0 top-0 peer" :checked="value === item.key" @click="$emit('input', item.key)" :value="item.key" type="radio" name="category" />
             <span
-                class="flex cursor-pointer flex-col rounded-lg items-center justify-center border border-b-[10px] border-transparent border-solid peer-checked:border-b-primary peer-checked:border-gray-200 peer-checked:shadow-xl h-40 transition-all duration-200"
+                class="flex cursor-pointer flex-col rounded-lg items-center justify-center border border-b-[10px] border-transparent border-solid peer-checked:border-b-primary peer-checked:border-gray-200 peer-checked:shadow-xl h-40 transition-all duration-200 items-end"
             >
                 <img :src="`/wp-content/plugins/stepper/resources/img/icons/${item.icon}.svg`" class="w-16 h-16 flex-none" />
                 <span class="mt-4 font-semibold text-gray-700 text-sm" v-text="item.label"></span>

assets/js/components/VText.vue

@@ -0,0 +1,31 @@
+<template>
+    <label class="w-full border border-solid focus-within:border-primary rounded-lg relative flex">
+        <input :name="name" :id="id" placeholder=" " v-model="inner" class="bg-white rounded-lg border-0 focus:shadow-none focus:outline-none text-gray-600 text-left placeholder-white peer py-3 px-3 w-full h-auto" />
+        <span
+            class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-sm peer-placeholder-shown:bottom-0 peer-placeholder-shown:-top-0 peer-placeholder-shown:text-base peer-focus:-top-3 peer-focus:bottom-auto peer-focus:text-sm"
+            >{{ label }} <span class="text-red-800 ml-1">*</span></span
+        >
+    </label>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {},
+        label: {},
+        id: {},
+        name: {}
+    },
+
+    computed: {
+        inner: {
+            get() {
+                return this.value;
+            },
+            set(v) {
+                this.$emit('input', v);
+            }
+        }
+    }
+};
+</script>

package-lock.json

@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "axios": "^0.21.4",
+        "dayjs": "^1.11.2",
         "laravel-mix": "^6.0.7",
         "postcss-import": "^14.0.2",
         "postcss-nested": "^4.0",
@@ -3709,6 +3710,11 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz",
+      "integrity": "sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw=="
+    },
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
@@ -12706,6 +12712,11 @@
         "css-tree": "^1.1.2"
       }
     },
+    "dayjs": {
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz",
+      "integrity": "sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw=="
+    },
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",

package.json

@@ -17,6 +17,7 @@
   "license": "ISC",
   "dependencies": {
     "axios": "^0.21.4",
+    "dayjs": "^1.11.2",
     "laravel-mix": "^6.0.7",
     "postcss-import": "^14.0.2",
     "postcss-nested": "^4.0",