Contact form UI

web/src/components/ContactModal.js

@@ -1,30 +1,124 @@
-import React from 'react';
+import React from 'react'
 
 export default class ContactModal extends React.Component {
-  onContactCloseClick () {
-
-  }
-
   onContactCloseClick (e) {
+    e.preventDefault()
+
     this.props.dispatch({
       type: 'CLOSE_CONTACT'
-    });
-
-    e.preventDefault();
+    })
   }
 
+  onSubmit (e) {
+    e.preventDefault()
+    const {name, email} = this.props.contact;
+
+    if (!name || !email) {
+      this.props.dispatch({
+        type: 'INVALID_CONTACT'
+      })
+    } else {
+      this.props.dispatch({
+        type: 'SUBMIT_CONTACT'
+      })
+    }
+  }
+
+  onFieldChange (field, e) {
+    this.props.dispatch({
+      type: 'UPDATE_CONTACT_INFO',
+      action: {
+        field,
+        value: e.target.value
+      }
+    })
+  }
+
+  onAlertToggle (e) {
+    const alert = this.props.contact.alert
+    this.props.dispatch({
+      type: 'UPDATE_CONTACT_INFO',
+      action: {
+        field: 'alert',
+        value: !alert
+      }
+    })
+  }
+
+  render () {
+    const {
+      message,
+      email,
+      phone,
+      name,
+      alert: doAlert,
+      nameInvalid,
+      emailInvalid
+    } = this.props.contact
+
+    const nameValidationClass = nameInvalid ? 'validation-failed' : ''
+    const emailValidationClass = emailInvalid ? 'validation-failed' : ''
 
-  render() {
     return (
-      <div className="modal">
-
+      <div className="modal contact-form">
         <div>
-          <a href="#close" title="Zatvori" className="close" onClick={this.onContactCloseClick.bind(this)}>
-            <i className="fa fa-times" aria-hidden="true"></i>
+          <a
+            href="#close"
+            title="Zatvori"
+            className="close"
+            onClick={this.onContactCloseClick.bind(this)}
+          >
+            <i className="fa fa-times" aria-hidden="true" />
           </a>
-          <h3>Kontaktirajte prodavca</h3>
+          <form onSubmit={this.onSubmit.bind(this)}>
+            <h3>Kontaktirajte prodavca</h3>
+            <div className="contact-form-name">
+              <input
+                value={name}
+                className={nameValidationClass}
+                onChange={this.onFieldChange.bind(this, 'name')}
+                placeholder="Ime i prezime"
+                type="text"
+              />
+            </div>
+            <div className="contact-form-email-phone">
+              <input
+                value={email}
+                className={emailValidationClass}
+                onChange={this.onFieldChange.bind(this, 'email')}
+                placeholder="Email adresa"
+                type="text"
+              />
+              <input
+                value={phone}
+                onChange={this.onFieldChange.bind(this, 'phone')}
+                placeholder="Telefon (opcionalno)"
+                type="text"
+              />
+            </div>
+            <div className="contact-form-message">
+              <textarea
+                onChange={this.onFieldChange.bind(this, 'message')}
+                value={message}
+                rows="14"
+              />
+            </div>
+            <div className="contact-form-alert noselect">
+              <input
+                type="checkbox"
+                onChange={this.onAlertToggle.bind(this)}
+                checked={doAlert}
+              />
+              <span onClick={this.onAlertToggle.bind(this)}>
+                Obavjesti me ukoliko se slična nekretnine pojavi
+              </span>
+            </div>
+            <div className="contact-form-footer">
+              <button>Pošalji poruku</button>
+            </div>
+          </form>
         </div>
       </div>
-    );
+    )
   }
 }

web/src/components/ListingDetails.js

@@ -116,7 +116,9 @@ export default class ListingDetails extends React.Component {
           <div className="ld-footer" />
         </div>
 
-        {contactFormOpen ? <ContactModal dispatch={this.props.dispatch} /> : null}
+        {contactFormOpen ? <ContactModal
+          contact={this.props.contact}
+          dispatch={this.props.dispatch} /> : null}
       </div>
     )
   }

web/src/components/Main.js

@@ -20,6 +20,13 @@ class Main extends React.Component {
       filters: {
         rooms: {},
         category: {}
+      },
+      contact: {
+        message: '',
+        name: '',
+        email: '',
+        phone: '',
+        valid: true
       }
     }
 
@@ -516,6 +523,7 @@ class Main extends React.Component {
       children.push(
         <ListingDetails
           contactFormOpen={this.state.contactFormOpen}
+          contact={this.state.contact}
           listing={listing}
           imageIndex={this.state.imageIndex}
           dispatch={this.dispatch.bind(this)}