Add mail

assets/css/app.css

@@ -11,95 +11,110 @@ body {
 }
 
 .stepper {
-    font-family: sans-serif;
-    background: var(--bg-color);
-    & > div {
-        h2 {
-            font-size: 2.3rem;
-            color: var(--secondary);
-            text-align: center;
-        }
-        .radio-grid {
-            display: grid;
-            grid-gap: 2rem;
-            grid-template-columns: repeat(3, 1fr);
-            margin-top: 1rem;
-            label {
-                height: 20rem;
-                position: relative;
-                input {
-                    visibility: hidden;
-                    z-index: -99;
-                    position: absolute;
-                }
-                input + span {
-                    border: 1px var(--primary) solid;
-                    border-radius: 2rem;
-                    overflow: hidden;
-                    cursor: pointer;
-                    background: white;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                    span:first-child {
-                        display: flex;
-                        flex: 1 0 0;
-                        justify-content: center;
-                        align-items: center;
+    form {
+        font-family: sans-serif;
+        background: var(--bg-color);
+        & > div {
+            h2 {
+                font-size: 2.3rem;
+                color: var(--secondary);
+                text-align: center;
+            }
+            .radio-grid {
+                display: grid;
+                grid-gap: 2rem;
+                grid-template-columns: repeat(3, 1fr);
+                margin-top: 1rem;
+                label {
+                    height: 20rem;
+                    position: relative;
+                    input {
+                        visibility: hidden;
+                        z-index: -99;
+                        position: absolute;
                     }
-                    span:nth-child(2) {
-                        flex: 0 0 4rem;
-                        background: var(--gray);
+                    input + span {
+                        border: 1px var(--primary) solid;
+                        border-radius: 2rem;
+                        overflow: hidden;
+                        cursor: pointer;
+                        background: white;
                         display: flex;
-                        width: 100%;
-                        justify-content: center;
+                        flex-direction: column;
                         align-items: center;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        width: 100%;
+                        height: 100%;
+                        span:first-child {
+                            display: flex;
+                            flex: 1 0 0;
+                            justify-content: center;
+                            align-items: center;
+                        }
+                        span:nth-child(2) {
+                            flex: 0 0 4rem;
+                            background: var(--gray);
+                            display: flex;
+                            width: 100%;
+                            justify-content: center;
+                            align-items: center;
+                        }
+                    }
+                    input:checked + span {
+                        border-color: var(--secondary);
+                    }
+                    svg {
+                        color: var(--secondary);
+                        fill: currentColor;
+                        width: 8rem;
+                        height: 8rem;
                     }
                 }
-                input:checked + span {
-                    border-color: var(--secondary);
-                }
-                svg {
-                    color: var(--secondary);
-                    fill: currentColor;
-                    width: 8rem;
-                    height: 8rem;
-                }
-            }
-        }
-        .form-container {
-            background: var(--container);
-            border-radius: 2rem;
-            padding: 3rem;
-            display: grid;
-            grid-gap: 1rem;
-            .separator {
-                background: white;
-                height: 5px;
             }
-            .form-grid {
+            .form-container {
+                background: var(--container);
+                border-radius: 2rem;
+                padding: 3rem;
                 display: grid;
-                grid-gap: 0.5rem;
-                grid-template-columns: 2fr 3fr 30px;
-                align-items: center;
-                input[type="text"] {
-                    font-weight: bold;
-                    border: var(--primary) 1px solid;
-                    text-align: right;
-                }
-                .unit {
-                    text-align: right;
+                grid-gap: 1rem;
+                .separator {
+                    background: white;
+                    height: 5px;
                 }
-                .comment {
-                    grid-column: 1 / -1;
-                    font-size: 1.5rem;
+                .form-grid {
+                    display: grid;
+                    grid-gap: 0.5rem;
+                    grid-template-columns: 2fr 3fr 30px;
+                    align-items: center;
+                    input[type="text"] {
+                        font-weight: bold;
+                        border: var(--primary) 1px solid;
+                        text-align: right;
+                    }
+                    .unit {
+                        text-align: right;
+                    }
+                    .comment {
+                        grid-column: 1 / -1;
+                        font-size: 1.5rem;
+                    }
                 }
             }
         }
+
+        .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}}' }">
+<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 class="step"><div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div></div>
+
+        <button type="submit">Absenden</button>
         
-    </div>
-</form>
+    </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>