Start working on front end form for new member
authorSteve Sutton <steve@gaslightmedia.com>
Thu, 12 Apr 2018 20:36:36 +0000 (16:36 -0400)
committerSteve Sutton <steve@gaslightmedia.com>
Thu, 12 Apr 2018 20:36:36 +0000 (16:36 -0400)
Adding new membership form for the front end.
Setting up valid action and a shortcode.

css/front.css [new file with mode: 0644]
models/front/billing/becomeMember.php [new file with mode: 0644]
setup/shortcodes.php
setup/validActions.php
views/front/billing/alreadyAMember.html [new file with mode: 0644]
views/front/billing/becomeMember.html [new file with mode: 0644]

diff --git a/css/front.css b/css/front.css
new file mode 100644 (file)
index 0000000..5c16336
--- /dev/null
@@ -0,0 +1,91 @@
+/* glm-billing-form */
+.glm-billing-form {
+    margin: 10px 0;
+    max-width: 400px;
+    padding: 20px 12px 10px 20px;
+    font-size: .813rem;
+}
+.glm-billing-field {
+    width: 100%;
+    padding: 0;
+    margin: 3px 0 0 0;
+}
+.glm-billing-label {
+    width: 100%;
+    font-weight; bold;
+    padding: 0;
+    margin: 7px 0 0 0;
+}
+.glm-billing-left-half {
+    width: 49%;
+    float: left;
+    margin: 3px 3px 0 0;
+}
+.glm-billing-right-half {
+    width: 49%;
+    float: left;
+    margin: 3px 0 0 3px;
+    clear: right;
+}
+.glm-billing-input {
+    padding: 3px 0;
+}
+.glm-billing-input label {
+    width: 100%;
+    display: block;
+}
+.glm-billing-input input[type=text],
+.glm-billing-input input[type=date],
+.glm-billing-input input[type=datetime],
+.glm-billing-input input[type=number],
+.glm-billing-input input[type=search],
+.glm-billing-input input[type=time],
+.glm-billing-input input[type=url],
+.glm-billing-input input[type=email],
+.glm-billing-input textarea,
+.glm-billing-input select{
+    height: 2rem;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    border:1px solid #BEBEBE;
+    padding: 4px;
+    margin:0px;
+    -webkit-transition: all 0.30s ease-in-out;
+    -moz-transition: all 0.30s ease-in-out;
+    -ms-transition: all 0.30s ease-in-out;
+    -o-transition: all 0.30s ease-in-out;
+    outline: none;
+    width: 100%;
+}
+.glm-billing-input input[type=text]:focus,
+.glm-billing-input input[type=date]:focus,
+.glm-billing-input input[type=datetime]:focus,
+.glm-billing-input input[type=number]:focus,
+.glm-billing-input input[type=search]:focus,
+.glm-billing-input input[type=time]:focus,
+.glm-billing-input input[type=url]:focus,
+.glm-billing-input input[type=email]:focus,
+.glm-billing-input textarea:focus,
+.glm-billing-input select:focus{
+    -moz-box-shadow: 0 0 8px #88D5E9;
+    -webkit-box-shadow: 0 0 8px #88D5E9;
+    box-shadow: 0 0 8px #88D5E9;
+    border: 1px solid #88D5E9;
+}
+.glm-billing-input table {
+    width: 100%;
+}
+.glm-billing-input .price {
+    width: 50px;
+    text-align: right;
+}
+.glm-billing-form fieldset legend {
+    font-size: 1rem;
+    font-weight: bold;
+    margin-top: 2rem;
+}
+
+.glm-billing-form input[type=submit] {
+    margin-top: 20px;
+}
diff --git a/models/front/billing/becomeMember.php b/models/front/billing/becomeMember.php
new file mode 100644 (file)
index 0000000..8d0e66d
--- /dev/null
@@ -0,0 +1,141 @@
+<?php
+/**
+ * Gaslight Media Members Database
+ * Admin Billing Dashboard
+ *
+ * PHP version 5.5
+ *
+ * @category glmWordPressPlugin
+ * @package  glmMembersDatabase
+ * @author   Chuck Scott <cscott@gaslightmedia.com>
+ * @license  http://www.gaslightmedia.com Gaslightmedia
+ * @release  index.php,v 1.0 2014/10/31 19:31:47 cscott Exp $
+ * @link     http://dev.gaslightmedia.com/
+ */
+define('GLM_MEMBERS_BILLING_MEMBER_MENU', true);
+require_once GLM_MEMBERS_BILLING_PLUGIN_CLASS_PATH.'/data/dataInvoices.php';
+require_once GLM_MEMBERS_BILLING_PLUGIN_CLASS_PATH.'/billingSupport.php';
+
+class GlmMembersFront_billing_becomeMember // extends GlmDataBilling
+{
+
+    /**
+     * WordPress Database Object
+     *
+     * @var $wpdb
+     * @access public
+     */
+    public $wpdb;
+    /**
+     * Plugin Configuration Data
+     *
+     * @var $config
+     * @access public
+     */
+    public $config;
+
+    /**
+     * Constructor
+     *
+     * This contructor performs the work for this model. This model returns
+     * an array containing the following.
+     *
+     * 'status'
+     *
+     * True if successfull and false if there was a fatal failure.
+     *
+     * 'view'
+     *
+     * A suggested view name that the contoller should use instead of the
+     * default view for this model or false to indicate that the default view
+     * should be used.
+     *
+     * 'data'
+     *
+     * Data that the model is returning for use in merging with the view to
+     * produce output.
+     *
+     * @wpdb object WordPress database object
+     *
+     * @return array Array containing status, suggested view, and any data
+     */
+    public function __construct ($wpdb, $config)
+    {
+
+        // Save WordPress Database object
+        $this->wpdb = $wpdb;
+
+        // Save plugin configuration object
+        $this->config = $config;
+
+        /*
+         * Run constructor for the Billing data class
+         *
+         * Note, the third parameter is a flag that indicates to the Contacts
+         * data class that it should flag a group of fields as 'view_only'.
+         */
+        // parent::__construct(false, false, true);
+
+    }
+
+    public function modelAction($actionData = false)
+    {
+        // Initialize Variables Here
+        $option             = '';
+        $view               = 'becomeMember';
+        $management         = false;
+        $messages           = array();
+        $paymentSuccess     = false;
+        $paymentError       = false;
+        $payable_types      = false;
+
+        // Check to see if a user is logged in
+        // If they are then they should not see the Become a member form at all.
+        if ( isset( $this->config['loggedInUser'] )
+            && isset( $this->config['loggedInUser']['contactUser'] )
+            && isset( $this->config['loggedInUser']['contactUser']['ref_dest'] )
+        ) {
+            $option = 'alreadyMember';
+        }
+
+        // Call in the support class
+        $BillingSupport = new GlmBillingSupport( $this->wpdb, $this->config );
+
+        if ( isset( $_REQUEST['option'] ) ) {
+            $option = $_REQUEST['option'];
+        }
+
+        switch ( $option ) {
+        case 'alreadyMember':
+            $view = 'alreadyAMember';
+            break;
+
+        default:
+            $payable_types = $BillingSupport->getAllPayableInvoiceTypes();
+            break;
+
+        }
+
+        // Compile template data
+        $templateData = array(
+            'option'           => $option,
+            'billing_settings' => $this->config['billing_settings'],
+            'management'       => $management,
+            'messages'         => $messages,
+            'paymentSuccess'   => $paymentSuccess,
+            'paymentError'     => $paymentError,
+            'payable_types'      => $payable_types,
+        );
+
+        // Return status, any suggested view, and any data to controller.
+        return array(
+            'status'        => true,
+            'modelRedirect' => false,
+            'view'          => 'front/billing/'.$view.'.html',
+            'data'          => $templateData
+        );
+
+    }
+
+
+}
index 5aa6d09..0cecf1d 100644 (file)
@@ -96,17 +96,35 @@ $glmMembersBillingShortcodes = array(
             'member_id' => false,
             'template'  => false,
         ),
-    )
+    ),
+    'glm-members-billing-become-member-form' => array(
+        'plugin'     => GLM_MEMBERS_BILLING_PLUGIN_SLUG,
+        'menu'       => 'billing',
+        'action'     => 'becomeMember',
+        'table'      => false,
+        'attributes' => array(
+            'member_id' => false,
+            'template'  => false,
+        ),
+    ),
 );
 
 $glmMembersBillingShortcodesDescription = '
 <tr><th>Shortcode</th><th>Attribute</th><th>Description</th></tr>
-     <tr>
-        <th>[glm-members-billing-renew-form]</th>
-        <td>&nbsp;</td>
-        <td width="50%">
-            Displays a Membership Renewal Form.
-        </td>
-    </tr>
+ <tr>
+    <th>[glm-members-billing-renew-form]</th>
+    <td>&nbsp;</td>
+    <td width="50%">
+        Displays a Membership Renewal Form.
+    </td>
+</tr>
+<tr><th>Shortcode</th><th>Attribute</th><th>Description</th></tr>
+ <tr>
+    <th>[glm-members-billing-become-member-form]</th>
+    <td>&nbsp;</td>
+    <td width="50%">
+        Displays a Become Member Form.
+    </td>
+</tr>
 ';
 
index d0b1626..7469196 100644 (file)
@@ -86,12 +86,12 @@ $glmMembersBillingAddOnValidActions = array(
         ),
         'member' => array(
             'billing' => GLM_MEMBERS_BILLING_PLUGIN_SLUG,
-            // 'index'   => GLM_MEMBERS_BILLING_PLUGIN_SLUG,
         ),
     ),
     'frontActions' => array(
         'billing' => array(
-            'renew' => GLM_MEMBERS_BILLING_PLUGIN_SLUG,
+            'renew'        => GLM_MEMBERS_BILLING_PLUGIN_SLUG,
+            'becomeMember' => GLM_MEMBERS_BILLING_PLUGIN_SLUG,
         ),
     )
 );
diff --git a/views/front/billing/alreadyAMember.html b/views/front/billing/alreadyAMember.html
new file mode 100644 (file)
index 0000000..a789c24
--- /dev/null
@@ -0,0 +1,3 @@
+<h2>Sorry!</h2>
+<p>We see you are already logged in as a member.</p>
+
diff --git a/views/front/billing/becomeMember.html b/views/front/billing/becomeMember.html
new file mode 100644 (file)
index 0000000..afa480c
--- /dev/null
@@ -0,0 +1,306 @@
+
+<h3>Membership Renewal</h3>
+<div id="billing-payment-form" class="glm-billing-form">
+
+    {if $paymentSuccess}<span class="glm-notice glm-flash-updated">Payment Completed</span>{/if}
+    {if $paymentError}<span class="glm-notice glm-flash-updated">Error With Payment</span>{/if}
+
+    {if $messages}
+        {foreach $messages as $message}
+            <div class="">{$message}</div>
+        {/foreach}
+    {/if}
+
+    <form action="{$thisUrl}" method="post">
+        <input type="hidden" name="option" value="renewMembership" />
+        <input type="hidden" id="total_renew_amount" name="total_renew_amount" value="" />
+
+
+        <div class="glm-billing-field">
+            <div class="glm-billing-label glm-required">
+                Membership Class
+            </div>
+            <div class="glm-billing-input">
+                {foreach $payable_types as $type}
+                    <label>
+                        <input required type="radio" name="member_renewing" data-amount="{$type.amount}" value="{$type.id}"
+                        {if $type@first}checked{/if}
+                        />
+                        {$type.name} {$type.amount}
+                    </label>
+                {/foreach}
+            </div>
+        </div>
+
+        <div class="glm-billing-field">
+            <div class="glm-billing-label">
+                Total Due
+            </div>
+            <div class="glm-billing-input">
+                <div id="renew_total">
+                </div>
+            </div>
+        </div>
+
+        <fieldset>
+        <legend>Membership Information</legend>
+
+        <div class="glm-billing-field glm-billing-left-half">
+            <div class="glm-billing-label glm-required">
+                First Name
+            </div>
+            <div class="glm-billing-input">
+                <input type="text" name="fname" value="" required />
+            </div>
+        </div>
+        <div class="glm-billing-field glm-billing-right-half">
+            <div class="glm-billing-label glm-required">
+                Last Name
+            </div>
+            <div class="glm-billing-input">
+                <input type="text" name="lname" value="" required />
+            </div>
+        </div>
+        <div class="glm-billing-field glm-billing-left-half">
+            <div class="glm-billing-label glm-required">
+                Email
+            </div>
+            <div class="glm-billing-input">
+                <input type="text" name="email" value="" required />
+            </div>
+        </div>
+        <div class="glm-billing-field glm-billing-right-half">
+            <div class="glm-billing-label glm-required">
+                Confirm Email
+            </div>
+            <div class="glm-billing-input">
+                <input type="text" name="email" value="" required />
+            </div>
+        </div>
+
+        <div class="glm-billing-field">
+            <div class="glm-billing-label glm-required">
+                Address
+            </div>
+            <div class="glm-billing-input">
+                <input type="text" name="billing_addr1" value="" required />
+            </div>
+        </div>
+        <div class="glm-billing-field glm-billing-left-half">
+            <div class="glm-billing-label glm-required">
+                City
+            </div>
+            <div class="glm-billing-input">
+                <input type="text" name="billing_city" value="" required />
+            </div>
+        </div>
+        <div class="glm-billing-field glm-billing-right-half">
+            <div class="glm-billing-label glm-required">
+                State / Province
+            </div>
+            <div class="glm-billing-input">
+                <select name="billing_state" required>
+                    <option value=""></option>
+                    {foreach $account.fieldData.billing_state.list as $s}
+                        <option value="{$s.value}"{if $account.fieldData.billing_state.value == $s.value} selected="selected"{/if}>
+                            {$s.name}
+                        </option>
+                    {/foreach}
+                </select>
+            </div>
+        </div>
+        <div class="glm-billing-field">
+            <div class="glm-billing-label glm-required">
+                Zip
+            </div>
+            <div class="glm-billing-input">
+                <input type="text" name="billing_zip" value="" required />
+            </div>
+        </div>
+        <div class="glm-billing-field">
+            <div class="glm-billing-label glm-required">
+                Email Address
+            </div>
+            <div class="glm-billing-input">
+                <input type="text" name="email" value="" required />
+            </div>
+        </div>
+
+        </fieldset>
+
+    <fieldset>
+        <legend>Payment Options</legend>
+
+        <div class="glm-billing-field">
+            <div class="glm-billing-label">
+                Select Payment Option
+            </div>
+            <div class="glm-billing-input">
+                <label> <input class="payment_option" type="radio" name="payment_option" value="pay_by_credit_card" checked> Pay by Credit Card </label>
+                <label> <input class="payment_option" type="radio" name="payment_option" value="pay_by_check"> Pay by Check </label>
+            </div>
+        </div>
+
+        <div class="glm-billing-field glm-billing-credit glm-billing-card">
+            <div class="glm-billing-label glm-required">
+                Name on Card
+            </div>
+            <div class="glm-billing-input">
+                <input
+                    class="ccard"
+                    type="text"
+                    name="cc_name"
+                    required
+                    {if isset($smarty.request.cc_name) && $smarty.request.cc_name}value="{$smarty.request.cc_name}"{/if} />
+            </div>
+        </div>
+
+        <div class="glm-billing-field glm-billing-left-half glm-billing-credit glm-billing-card">
+            <div class="glm-billing-label glm-required">
+                Card Type
+            </div>
+            <div class="glm-billing-input">
+                <select name="cc_type" class="ccard" required>
+                    <option value=""></option>
+                    {foreach $management.cc_accepts.names as $cardId => $cardName}
+                        <option value="{$cardId}"
+                        {if isset($smarty.request.cc_type) && $smarty.request.cc_type == $cardId} selected{/if}>{$cardName}</option>
+                    {/foreach}
+                </select>
+            </div>
+        </div>
+        <div class="glm-billing-field glm-billing-right-half glm-billing-credit glm-billing-card">
+            <div class="glm-billing-label glm-required">
+                Card Number
+            </div>
+            <div class="glm-billing-input">
+                <input
+                    class="ccard"
+                    type="text"
+                    placeholder="Numbers Only"
+                    name="cc_numb"
+                    required
+                    pattern="\d*"
+                    {if isset($smarty.request.cc_numb) && $smarty.request.cc_numb}value="{$smarty.request.cc_numb}"{/if} />
+            </div>
+        </div>
+        <div class="glm-billing-field glm-billing-left-half glm-billing-credit glm-billing-card">
+            <div class="glm-billing-label glm-required">
+                Card Expiration
+            </div>
+            <div class="glm-billing-input">
+                <input
+                    class="ccard"
+                    type="text"
+                    placeholder="MM/YY"
+                    name="cc_exp"
+                    required
+                    pattern="{literal}\d{2}/\d{2}{/literal}"
+                    {if isset($smarty.request.cc_exp) && $smarty.request.cc_exp}value="{$smarty.request.cc_exp}"{/if} />
+            </div>
+        </div>
+        <div class="glm-billing-field glm-billing-right-half glm-billing-credit glm-billing-card">
+            <div class="glm-billing-label glm-required">
+            C V V
+            </div>
+            <div class="glm-billing-input">
+                <input
+                    class="ccard"
+                    type="text"
+                    placeholder="3 or 4 digit security code on back of card"
+                    name="cc_cvv"
+                    required
+                    pattern="{literal}\d{3,4}{/literal}"
+                    {if isset($smarty.request.cc_cvv) && $smarty.request.cc_cvv}value="{$smarty.request.cc_cvv}"{/if} />
+            </div>
+        </div>
+
+        {if $billing_settings.proc_methods == 2}
+        <div class="glm-billing-field glm-billing-credit glm-billing-card">
+            <div clas="glm-billing-label">
+                You may also have us save your credit card details with our secure credit card processor to
+                simplify future payments. Doing so will replace any previous credit card details you saved.
+            </div>
+            <div class="glm-billing-input">
+                <label>
+                    <input type="checkbox" name="cc_save">
+                    <strong>Yes, please save my card detail for future use.</strong>
+                </label>
+            </div>
+        </div>
+        {/if}
+
+        </fieldset>
+
+        <input class="button button-primary" type="submit" value="Sign Up For Membership">
+
+    </form>
+</div>
+
+<script>
+jQuery(document).ready(function($){
+
+    $('.payment_option').change(function(){
+        var payment_option = $('.payment_option:checked').val();
+        console.log( 'payment_option: ', payment_option );
+        if ( payment_option == 'pay_by_check' ) {
+            $('.glm-billing-credit').hide();
+            $('.ccard').prop('disabled', true);
+        } else {
+            $('.glm-billing-credit').show();
+            $('.ccard').prop('disabled', false);
+        }
+    });
+    $('#billing-invoice-select').change(function(){
+        // Get the data-amount and set the amount being paid.
+        $('#billing-amount').val( $(this).find('option:selected').data( 'amount') );
+    });
+
+    // Create a USD formatter
+    var formatter = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        minimunFractionDigits: 2
+    });
+    function getPageTotal(){
+
+        // Calculate the total for this page.
+        // Get the member_renewing amount.
+        if ( $('input[name=member_renewing]:checked').length ) {
+            var member_renewing_amount = parseFloat( $('input[name=member_renewing]:checked').data('amount') );
+        } else {
+            var member_renewing_amount = parseFloat( $('input[name=member_renewing]').data('amount') );
+        }
+
+        // Get each employee and add their amounts.
+        $('input[name^=employees]').each(function(){
+            var isChecked = $(this).prop('checked');
+            if ( isChecked ) {
+                member_renewing_amount += parseFloat( $(this).data('amount') );
+            }
+        });
+
+        $('#renew_total').html( formatter.format( member_renewing_amount ) );
+        $('#total_renew_amount').val( member_renewing_amount );
+
+    }
+
+    getPageTotal();
+
+    // trigger total if changing Membership
+    $('input[name=member_renewing]').change(function(){
+        getPageTotal();
+    });
+
+    // trigger total if changing employees
+    $('input[name^=employees]').change(function(){
+        getPageTotal();
+    });
+
+    // Flash certain elements for a short time after display
+    $(".glm-flash-updated").fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500);
+
+});
+</script>
+
+