Add mail

assets/css/app.css

@@ -11,6 +11,7 @@ body {
 }
 
 .stepper {
+    form {
         font-family: sans-serif;
         background: var(--bg-color);
         & > div {
@@ -102,4 +103,18 @@ body {
                 }
             }
         }
+
+        .step {
+            height: 5px;
+            position: relative;
+            div {
+                position: absolute;
+                transition: width 0.5s;
+                top: 0;
+                left: 0;
+                height: 100%;
+                background: var(--primary);
+            }
+        }
+    }
 }

assets/js/app.js

@@ -1,7 +1,8 @@
+import axios from 'axios';
 import 'alpinejs';
 import wNumb from 'wnumb';
 
-var units = {
+var units = window.units = {
     currency: wNumb({
         mark: ',',
         thousand: '.',
@@ -13,7 +14,7 @@ var units = {
         mark: ',',
         thousand: '',
         prefix: '',
-        suffix: ' %',
+        suffix: '',
         decimals: 2
     })
 };
@@ -26,7 +27,7 @@ window.stepper = {
         makler: 0.0357
     },
     units: units,
-    step: 2,
+    step: 0,
     greetings: [ 
         { value: 'frau', label: 'Frau' },
         { value: 'herr', label: 'Herr' },
@@ -40,7 +41,7 @@ window.stepper = {
         { value: 'dr', label: 'Dr' },
     ],
     value: {
-        kind: 'kauf',
+        kind: null,
         kauf: {
             kaufpreis: 300000,
             modernisierung: 0,
@@ -82,5 +83,11 @@ window.stepper = {
     /* Methods */
     svg(icon) {
         return `<svg><use xlink:href="${this.sprite}#${icon}"></use></svg>`;
+    },
+
+    submit() {
+        axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', {
+            ...this.value
+        });
     }
 };

package.json

@@ -17,6 +17,7 @@
   "license": "ISC",
   "dependencies": {
     "alpinejs": "^2.7.3",
+    "axios": "^0.21.0",
     "cross-env": "^7.0.2",
     "laravel-mix": "^5.0.7",
     "postcss-nested": "^4.0",

src/Stepper.php

@@ -26,6 +26,7 @@ class Stepper {
     
     public function init() {
         add_action('wp_enqueue_scripts', [ $this, 'enqueue' ]);
+        add_action('wp_ajax_nopriv_stepper_submit', [ $this, 'onSubmit' ]);
         add_shortcode('stepper', [ $this, 'handle' ]);
     }
 
@@ -50,4 +51,13 @@ class Stepper {
             @change="'.$prop.' = units.'.$modifier.'.from($event.target.value)"';
     }
 
+    public function onSubmit() {
+        json_decode(file_get_contents('php://input'));
+        wp_mail('info@jonas-ruettgers.de', 'Neue Finanzierungs-Anfrage', $this->twig->render('mail.twig.htm', json_decode(file_get_contents('php://input'), true)), [
+            'From' => 'philipp@aweos.de'
+        ]);
+
+        die();    
+    }
+
 }

views/mail.twig.htm

@@ -0,0 +1,21 @@
+Eine neue Anfrage ist eingetroffen.
+
+Name: {{firstname}} {{lastname}}
+Adresse: {{zip}} {{location}}
+Tel: {{phone}}
+Mail: {{email}}
+
+Anfrage für: {{kind}}
+
+{% if kind == 'kauf' %}
+* Kaufpreis: {{kauf.kaufpreis}} €
+* Modernisierung: {{kauf.modernisierung}} €
+* Baukosten: {{kauf.baukosten}} €
+* Eigenkapital: {{kauf.eigenkapital}} €
+{% endif %}
+{% if kind == 'bau' %}
+* Grundstückspreis: {{bau.grundstueckspreis}} €
+* Bezahlt: {{bau.bezahlt}} €
+* Baukosten: {{bau.baukosten}} €
+* Eigenkapital: {{bau.eigenkapital}} €
+{% endif %}

views/stepper.twig.htm

@@ -1,5 +1,5 @@
-<form>
 <div class="stepper" x-data="{ ...stepper, sprite: '{{sprite|raw}}' }">
+    <form @submit.prevent="submit">
         <div x-show="step == 0">
             <h2>Was möchten Sie finanzieren</h2>
             <div class="radio-grid">
@@ -31,7 +31,7 @@
 
         {% include 'daten.twig.htm' %}
 
-        <div x-show="step == 1 && kind == 'anschluss'">
+        <div x-show="step == 1 && value.kind == 'anschluss'">
             <h2 class="gradient">Das Vorhaben in Zahlen</h2>
 
             <div class="form-container">
@@ -57,12 +57,15 @@
                 <div>
                     <div>Darlehensbetrag</div>
                     <div x-text="units.currency.to(value.anschluss.objektwert + value.anschluss.umschuldung + value.anschluss.zuskap)"></div>
-                    <span class="comment">Darlehensbeträge werden auf volle 1.000 Euro gerundet.</span>
                 </div>
                 <div class="separator gray"></div>
                 <button type="button" value="Werte übernehmen und weiter zum letzten Schritt"></button>
             </div>
         </div>
 
-    </div>
+        <div class="step"><div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div></div>
+
+        <button type="submit">Absenden</button>
+        
     </form>
+</div>

views/vorhaben.twig.htm

@@ -42,8 +42,15 @@
         </div>
         <div class="separator"></div>
         <div class="form-grid">
-            <label>Makler <span class="result-label" x-text="units.percent.to(parts.makler * 100)"></span></label>
-            <input type="text" :value="units.currency.to(value.{{kind}}.{{main.value}} * parts.makler)">
+            <label>
+                Makler
+                <input type="text" class="result-label" 
+                    :value="units.percent.to(parts.makler * 100)"
+                    @focus="$event.target.value = units.percent.to(parts.makler * 100)"
+                    @change="parts.makler = units.percent.from($event.target.value) / 100"
+                >
+            </label>
+            <input type="text" :value="units.currency.to(value.{{kind}}.{{main.value}} * parts.makler)" disabled>
             <span class="unit">€</span>
             <span class="comment">Die vorgeschlagene Maklercourtage gentspricht der regional üblichen Höhe. Sie können diese jedoch bei Bedarf verändern oder auch komplett entfallen lassen.</span>
         </div>
@@ -57,7 +64,6 @@
         <div>
             <div><span>=</span>Darlehensbetrag</div>
             <div x-text="units.currency.to(value.{{kind}}.{{main.value}} * (1+parts.notar+parts.grundsteuer+parts.makler) + value.{{kind}}.{{second.value}} - value.{{kind}}.eigenkapital)"></div>
-            <span class="comment">Darlehensbeträge werden auf volle 1.000 Euro gerundet.</span>
         </div>
         <div class="separator gray"></div>
         <button @click="step++" type="button">Werte übernehmen und weiter zum letzten Schritt</button>