Squash - Add Contact Form plugin (#21)

* add and configure contact form plugin

* remove react app

* remove unwanted autoloads

* configure tinyMCE form

* add classes for building form markup

* update fields data structure to allow passing a name and type

* add support for radio buttons

* add email handling to contact form class

* update README

* add utility function for swapping array entries by key

* updates to fields

* fix some small array key not set bugs and remove a var dump

boilerplates/torque-plugin/README.md

@@ -19,7 +19,7 @@
 
 4.  Rename all files in this directory: {torque-plugin}-etc-class.php => {<torque_plugin_slug>}-etc-class.php
 
-5.  Add '<torque_child_theme_slug>' to cli/lib/workspaces.sh
+5.  Add '<torque_plugin_name>' to cli/lib/workspaces.sh
 
 6.  Open new terminal, and in **project** root, run:
 

cli/lib/workspaces.sh

@@ -17,4 +17,5 @@ declare -a workspaces=(
   "torque-us-states"
   "torque-residences"
   "torque-services"
+  "torque-contact-form"
 )

plugins/torque-contact-form/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": ["react", "env"],
+  "plugins": [
+    "transform-runtime"
+  ]
+}

plugins/torque-contact-form/README.md

@@ -0,0 +1,23 @@
+# Torque Contact Form
+
+Adds a shortcode for displaying a contact form on pages. The child theme will decide the form fields for now.
+
+## Filters
+
+<!-- prettier-ignore-start -->
+
+*Filter* | *Function* | *Value Type*
+--- | --- | ---
+`'torque_contact_form_fields_filter'` | Allows the child theme control over the form fields, giving the ability to add new ones or hide defaults | Array
+
+<!-- prettier-ignore-end -->
+
+# Changelog
+
+## [1.0.0] 09/26/2018
+
+### Added
+
+- Plugin config
+- All form classes - email, field factory, template and root class
+- Shortcode with tinyMCE

plugins/torque-contact-form/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "torque-contact-form",
+  "version": "1.0.0",
+  "author": "Torque",
+  "license": "ISC",
+  "scripts": {
+    "start": "webpack --mode=development --watch",
+    "build": "webpack --mode=production"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "autoprefixer": "^9.0.2",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "copy-webpack-plugin": "^4.5.2",
+    "css-loader": "^1.0.0",
+    "extract-text-webpack-plugin": "^4.0.0-alpha.0",
+    "file-loader": "^1.1.11",
+    "node-sass": "^4.9.2",
+    "postcss-loader": "^2.1.6",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.21.0",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.16.3",
+    "webpack-cli": "^3.1.0"
+  }
+}

plugins/torque-contact-form/src/autoload.php

@@ -0,0 +1,29 @@
+<?php
+
+require( Torque_Contact_Form_PATH . '/shortcode/torque-contact-form-shortcode-class.php' );
+
+/**
+ * Autoload all other classes
+ */
+class Torque_Contact_Form_Autoloader {
+
+	/**
+	 * empty contructor on purpose.
+	 */
+	function __construct() {}
+
+	/**
+	 * load the classes based on class names passed in array
+	 *
+	 * @param  array $classes the class names to load
+	 * @return void           does not return anything. instantiates the classese only
+	 */
+	public static function autoload( $classes ) {
+
+		foreach ($classes as $class_name) {
+			new $class_name();
+		}
+	}
+}
+
+?>

plugins/torque-contact-form/src/form/form-contact-email.php

@@ -0,0 +1,53 @@
+<?php
+
+class Torque_Contact_Form_Email {
+
+  private $recipient = '';
+
+  private $fields = array();
+
+  public function __construct($recipient, $fields) {
+    $this->recipient = $recipient;
+    $this->fields = $fields;
+  }
+
+  public function send() {
+    // allow html content
+    add_filter( 'wp_mail_content_type', array($this, 'set_html_content_type'));
+
+    $message = $this->create_message();
+    $subject = 'New Message';
+    $headers = array('Content-Type: text/html; charset=UTF-8');
+
+    // send mail
+    wp_mail( $this->recipient, $subject, $message, $headers );
+
+    // remove html filter to avoid conflicts
+    remove_filter( 'wp_mail_content_type', array($this, 'set_html_content_type'));
+  }
+
+  /**
+   * We need this as a separate function so we can remove the filter too
+   */
+  public function set_html_content_type() {
+    return 'text/html';
+  }
+
+  private function create_message() {
+    ob_start();
+    ?>
+
+    <h1>New Message</h1>
+
+    <?php
+    foreach ($this->fields as $id => $options) {
+    ?>
+      <p><?php echo $options['name']; ?>: <?php echo $_POST[$id]; ?></p>
+    <?php
+    }
+
+    return ob_get_clean();
+  }
+}
+
+?>

plugins/torque-contact-form/src/form/form-contact-field.php

@@ -0,0 +1,124 @@
+<?php
+
+class Torque_Contact_Form_Field_Factory {
+
+  public static $supported_field_types = array(
+    'text',
+    'textarea',
+    'email',
+    'tel',
+    'radio'
+  );
+
+  public static function create_new( $id, $options ) {
+    $type = $options['type'] ?? false;
+
+    if ( ! $type ) {
+      return;
+    }
+
+    switch( $type ) {
+
+      case 'text':
+        return self::create_text_field($id, $options);
+
+      case 'textarea':
+        return self::create_textarea_field($id, $options);
+
+      case 'email':
+        return self::create_email_field($id, $options);
+
+      case 'tel':
+        return self::create_tel_field($id, $options);
+
+      case 'radio':
+        return self::create_radio_field($id, $options);
+    }
+  }
+
+  private static function create_text_field($id, $options) {
+    ob_start();
+    ?>
+    <input type="text" name="<?php echo $id; ?>" id="<?php echo $id; ?>" placeholder="<?php echo $options['name']; ?>"/>
+    <?php
+
+    $content = ob_get_clean();
+
+    return self::wrap_field($id, $options, $content);
+  }
+
+  private static function create_textarea_field($id, $options) {
+    ob_start();
+    ?>
+    <textarea name="<?php echo $id; ?>" id="<?php echo $id; ?>" placeholder="<?php echo $options['name']; ?>"></textarea>
+    <?php
+
+    $content = ob_get_clean();
+
+    return self::wrap_field($id, $options, $content);
+  }
+
+  private static function create_email_field($id, $options) {
+    ob_start();
+    ?>
+    <input type="email" name="<?php echo $id; ?>" id="<?php echo $id; ?>" placeholder="<?php echo $options['name']; ?>"/>
+    <?php
+
+    $content = ob_get_clean();
+
+    return self::wrap_field($id, $options, $content);
+  }
+
+  private static function create_tel_field($id, $options) {
+    ob_start();
+    ?>
+    <input type="tel" name="<?php echo $id; ?>" id="<?php echo $id; ?>" placeholder="<?php echo $options['name']; ?>"/>
+    <?php
+
+    $content = ob_get_clean();
+
+    return self::wrap_field($id, $options, $content);
+  }
+
+  private static function create_radio_field($id, $options) {
+    ob_start();
+    ?>
+    <fieldset id="<?php echo $id; ?>">
+    <?php
+      if ($options['options']) {
+        foreach ($options['options'] as $value => $label) {
+          ?>
+          <div class="radio-wrapper">
+            <input type="radio" id="<?php echo $value; ?>" name="<?php echo $id; ?>" value="<?php echo $value; ?>" <?php checked( $value, $_POST[$id] ?? '' ); ?>>
+            <label for="<?php echo $value; ?>"><?php echo $label; ?></label>
+          </div>
+          <?php
+        }
+      }
+    ?>
+    </fieldset>
+    <?php
+
+    $content = ob_get_clean();
+
+    return self::wrap_field($id, $options, $content);
+  }
+
+  private static function wrap_field($id, $options, $content) {
+    ob_start();
+
+    $name = $options['name'] ?? '';
+
+    ?>
+
+    <div id="<?php echo $id; ?>" class="input-wrapper">
+      <label for="<?php echo $id; ?>"><?php echo $name; ?></label>
+      <?php echo $content; ?>
+    </div>
+
+    <?php
+    return ob_get_clean();
+  }
+}
+
+?>

plugins/torque-contact-form/src/form/form-contact-template.php

@@ -0,0 +1,95 @@
+<?php
+
+require_once( Torque_Contact_Form_PATH . '/form/form-contact.php' );
+require_once( Torque_Contact_Form_PATH . '/form/form-contact-field.php' );
+
+class Torque_Contact_Form_Form_Template {
+
+  private $fields = array();
+
+  private $message;
+
+  public function __construct( $fields, $message = NULL) {
+    $this->fields = $fields;
+
+    if ( $message ) {
+      $this->message = $message;
+    }
+  }
+
+  public function create_markup() {
+    ob_start();
+    ?>
+
+    <div id="contact-form" class="torque-form">
+
+      <?php $this->the_message(); ?>
+
+      <form method="post" action="#contact-form" >
+
+        <?php $this->the_nonce(); ?>
+
+        <?php
+        // this hidden input is important for us to know
+        // if the form has been submitted yet
+        // so we can check that all fields are filled
+        ?>
+        <input type="hidden" name="<?php echo Torque_Contact_Form_Form::$HIDDEN_FIELD_NAME; ?>" />
+
+        <?php $this->the_fields(); ?>
+
+        <button type="submit">Send</button>
+
+      </form>
+
+    </div>
+
+    <?php
+    return ob_get_clean();
+  }
+
+  private function the_message() {
+    echo $this->get_the_message();
+  }
+
+  private function get_the_message() {
+    ob_start();
+
+    if (isset($this->message) && $this->message) {
+
+      $success_class = ! $this->message['success'] ? 'error' : '';
+
+      ?>
+
+      <div class="form-message <?php echo $success_class; ?>">
+        <?php echo $this->message['message']; ?>
+      </div>
+
+      <?php
+    }
+
+    return ob_get_clean();
+  }
+
+  private function the_nonce() {
+    echo $this->get_the_nonce();
+  }
+
+  private function get_the_nonce() {
+    return wp_nonce_field( Torque_Contact_Form_Form::$NONCE_NAME );
+  }
+
+  private function the_fields() {
+
+    foreach ($this->fields as $id => $options) {
+
+      if ( $options['type'] && in_array( $options['type'], Torque_Contact_Form_Field_Factory::$supported_field_types ) ) {
+
+        echo Torque_Contact_Form_Field_Factory::create_new($id, $options);
+
+      }
+    }
+  }
+}
+
+?>