From 972594d1dd1ca567267c2a236657c67b774d2dd2 Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Wed, 17 Jul 2019 16:55:29 -0400
Subject: [PATCH] Update forms so abide submit is correctly working.

Testing things out on mobile phone also and making adjustments.
---
 models/admin/billing/invoiceTypes.php         |   4 +-
 views/admin/billing/accountReveals.html       |   8 +-
 views/admin/billing/accountSearchForm.html    |   2 +-
 views/admin/billing/createInvoice.html        |   2 +-
 views/admin/billing/editAccountAjax.html      |   5 +-
 views/admin/billing/editInvoiceType.html      | 333 ++++++++++--------
 views/admin/billing/editNotificationType.html |   2 +-
 .../billing/makePaymentAdjustmentAjax.html    |   2 +-
 views/admin/billing/makePaymentAjax.html      |   2 +-
 views/admin/billing/settings.html             |  20 +-
 views/admin/billing/statements.html           |   2 +-
 11 files changed, 219 insertions(+), 163 deletions(-)

diff --git a/models/admin/billing/invoiceTypes.php b/models/admin/billing/invoiceTypes.php
index 405ea4d..c2e00d0 100644
--- a/models/admin/billing/invoiceTypes.php
+++ b/models/admin/billing/invoiceTypes.php
@@ -139,7 +139,7 @@ class GlmMembersAdmin_billing_invoiceTypes extends GlmDataInvoiceTypes
                 $invoiceType = $this->insertEntry();
                 if ( $invoiceType['status'] ) {
                     $invoiceTypeUpdated = true;
-                    $invoiceType = $this->editEntry( $id );
+                    $invoiceType        = $this->editEntry( $id );
                 } else {
                     $invoiceTypeUpdateError = true;
                 }
@@ -156,7 +156,7 @@ class GlmMembersAdmin_billing_invoiceTypes extends GlmDataInvoiceTypes
                     $invoiceType = $this->updateEntry( $id );
                     if ( $invoiceType['status'] ) {
                         $invoiceTypeUpdated = true;
-                        $invoiceType = $this->editEntry( $id );
+                        $invoiceType        = $this->editEntry( $id );
                     } else {
                         $invoiceTypeUpdateError = true;
                     }
diff --git a/views/admin/billing/accountReveals.html b/views/admin/billing/accountReveals.html
index 265c461..f01b7f6 100644
--- a/views/admin/billing/accountReveals.html
+++ b/views/admin/billing/accountReveals.html
@@ -4,8 +4,14 @@
 <div id="glmBillingInfo" class="medium reveal" data-reveal data-close-on-click="false">
 </div>
 {* Reveal for Billing Info Success *}
-<div class="reveal" id="billingInfoSuccess" data-reveal>
+<div class="small reveal" id="billingInfoSuccess" data-reveal>
     <h2>Billing Info Updated!</h2>
+    <div class="callout success">
+        <p>Successfully saved your data!</p>
+        <button class="close-button show-for-small-only" data-close aria-label="Close" type="button">
+            <span aria-hidden="true">&times;</span>
+        </button>
+    </div>
     <button class="close-button" data-close aria-label="Close" type="button">
         <span aria-hidden="true">&times;</span>
     </button>
diff --git a/views/admin/billing/accountSearchForm.html b/views/admin/billing/accountSearchForm.html
index 9721511..4e50188 100644
--- a/views/admin/billing/accountSearchForm.html
+++ b/views/admin/billing/accountSearchForm.html
@@ -119,6 +119,6 @@ jQuery(document).ready(function($) {
                 </div>
             </div>
             <div class="billing-search-form-submit">
-                <input class="button primary" type="submit" value="Submit">
+                <button class="button primary" type="submit">Submit</button>
             </div>
     </fieldset>
diff --git a/views/admin/billing/createInvoice.html b/views/admin/billing/createInvoice.html
index ddb9966..02fa8d1 100644
--- a/views/admin/billing/createInvoice.html
+++ b/views/admin/billing/createInvoice.html
@@ -53,7 +53,7 @@
             </div>
         {/if}
 
-        <input class="button button-primary" type="submit" name="renewal_submit" id="renewal_submit" value="Create New Invoice" />
+        <input class="button button-primary" type="submit" name="renewal_submit" id="renewal_submit" value="Create New Invoice">
 
     </form>
     {/if}
diff --git a/views/admin/billing/editAccountAjax.html b/views/admin/billing/editAccountAjax.html
index 763c618..8dd2577 100644
--- a/views/admin/billing/editAccountAjax.html
+++ b/views/admin/billing/editAccountAjax.html
@@ -342,7 +342,7 @@
 
         {include file='ui/f6/errorCallout.html'}
 
-        <input class="button button-primary" type="submit" style="margin-top: 0;" value="{if $haveAccount}Save{else}Create{/if} Account">
+        <button class="button button-primary" type="submit" style="margin-top: 0;">{if $haveAccount}Save{else}Create{/if} Account</button>
 
         <button class="button glm-right" data-close aria-label="Cancel" type="button">
             <span>Cancel</span>
@@ -429,8 +429,7 @@ jQuery(document).ready(function($){
     var abide = new Foundation.Abide($('#billingInfoForm'));
     $(document)
     .on('invalid.zf.abide', function(ev,elem){
-        elem.focus().blur();
-        $('#billingInfoForm').foundation('addErrorClasses', elem);
+        elem.focus();
         return false;
     })
     // .on('forminvalid.zf.abide', function(ev,frm){
diff --git a/views/admin/billing/editInvoiceType.html b/views/admin/billing/editInvoiceType.html
index a1beb2a..0afdae7 100644
--- a/views/admin/billing/editInvoiceType.html
+++ b/views/admin/billing/editInvoiceType.html
@@ -1,6 +1,12 @@
 {include file='admin/billing/header.html'}
 
-<div class="callout grid-container">
+{* <div class="callout grid-container"> *}
+{$ui = [
+    'nowrap'          => false,
+    'backgroundColor' => '',
+    'sectionColor'    => ''
+]}
+{include file='ui/f6/grid-start.html'}
 
     {* Set $data to $invoiceType *}
     {* This is for using the UI elements *}
@@ -38,149 +44,186 @@
     ]}
     {include file="ui/f6/callout.html"}
 
-    <form action="{$thisUrl}?page={$thisPage}&glm_action==invoiceTypes" method="post" enctype="multipart/form-data" data-abide novalidate data-validate-on-blur="true">
-
-        {include file='ui/f6/errorCallout.html'}
-
-        <input type="hidden" name="glm_action" value="invoiceTypes">
-
-        {if isset($data.fieldData.id)}
-            <input type="hidden" name="option" value="update">
-            <input id="edit-id" type="hidden" name="id" value="{$data.fieldData.id}">
-        {else}
-            <input type="hidden" name="option" value="addNew">
-        {/if}
-
-        <div class="grid-x grid-margin-x">
-
-            <fieldset class="fieldset cell small-12 medium-6">
-                <legend>Invoice Type</legend>
-
-                <div class="grid-x grid-margin-x">
-
-                    {* Invoice Type Name *}
-                    {$ui = [
-                        'value'       => $data.fieldData.name,
-                        'field'       => 'name',
-                        'label'       => 'Invoice Type Name',
-                        'required'    => $data.fieldRequired.name,
-                        'errorText'   => 'Invoice Type Name is Required',
-                        'dataError'   => $data.fieldFail.name
-                    ]}
-                    {include file='ui/f6/text.html'}
-
-                    {* Parent *}
-                    {$ui = [
-                        'value'     => $data.fieldData.parent.value,
-                        'field'     => 'parent',
-                        'label'     => 'Parent',
-                        'list'      => $invoiceTypes,
-                        'l_label'   => 'name',
-                        'l_value'   => 'id',
-                        'l_blank'   => true,
-                        'required'  => $data.fieldRequired.parent,
-                        'errorText' => 'Parent is Required',
-                        'dataError' => $data.fieldFail.parent
-                    ]}
-                    {include file='ui/f6/select.html'}
-
-                    {* Member Type *}
-                    {$ui = [
-                        'value'     => $data.fieldData.member_type.value,
-                        'field'     => 'member_type',
-                        'label'     => 'Member Type',
-                        'list'      => $memberTypes,
-                        'l_label'   => 'name',
-                        'l_value'   => 'id',
-                        'l_blank'   => true,
-                        'required'  => $data.fieldRequired.member_type,
-                        'errorText' => 'Member Type is Required',
-                        'dataError' => $data.fieldFail.member_type
-                    ]}
-                    {include file='ui/f6/select.html'}
-
-                    {* Amount *}
-                    {$ui = [
-                        'value'       => $data.fieldData.amount,
-                        'field'       => 'amount',
-                        'label'       => 'Amount',
-                        'pattern'     => 'number',
-                        'required'    => $data.fieldRequired.amount,
-                        'errorText'   => 'Amount is Required',
-                        'dataError'   => $data.fieldFail.amount
-                    ]}
-                    {include file='ui/f6/text.html'}
-
-                    {* Dynamic Amount *}
-                    {$ui = [
-                        'value'     => $data.fieldData.dynamic_amount.value,
-                        'field'     => 'dynamic_amount',
-                        'label'     => 'Dynamic Amount',
-                        'required'  => $data.fieldRequired.dynamic_amount,
-                        'errortext' => 'Dynamic Amount is Required',
-                        'helpText'  => 'Ask for the amount on Invoice Form',
-                        'dataError' => $data.fieldFail.dynamic_amount
-                    ]}
-                    {include file='ui/f6/checkbox.html'}
-
-                    {* Recurring *}
-                    {$ui = [
-                        'value'     => $data.fieldData.recurring.value,
-                        'field'     => 'recurring',
-                        'label'     => 'Recurring',
-                        'required'  => $data.fieldRequired.recurring,
-                        'errortext' => 'Recurring is Required',
-                        'dataError' => $data.fieldFail.recurring
-                    ]}
-                    {include file='ui/f6/checkbox.html'}
-
-                    {* Recurrence *}
-                    {$ui = [
-                        'value'     => $data.fieldData.recurrence,
-                        'field'     => 'recurrence',
-                        'label'     => 'Recurrence',
-                        'list'      => $recurrenceTypes,
-                        'l_blank'   => true,
-                        'required'  => $data.fieldRequired.recurrence,
-                        'errorText' => 'Recurrence is Required',
-                        'dataError' => $data.fieldFail.recurrence
-                    ]}
-                    {include file='ui/f6/select.html'}
-
-
-                    {* Code *}
-                    {$ui = [
-                        'value'       => $data.fieldData.qcode,
-                        'field'       => 'qcode',
-                        'label'       => 'Code',
-                        'required'    => $data.fieldRequired.qcode,
-                        'errorText'   => 'Code is Required',
-                        'dataError'   => $data.fieldFail.qcode
-                    ]}
-                    {include file='ui/f6/text.html'}
-
-                    {* Category *}
-                    {$ui = [
-                        'value'       => $data.fieldData.category,
-                        'field'       => 'category',
-                        'label'       => 'Category',
-                        'required'    => $data.fieldRequired.category,
-                        'errorText'   => 'Category is Required',
-                        'dataError'   => $data.fieldFail.category
-                    ]}
-                    {include file='ui/f6/text.html'}
-
-                </div>
-
-            </fieldset>
-
-        </div>
-
-        <input class="button primary" type="submit" value="{if isset( $data.fieldData.id )}Update{else}Add{/if} Invoice Type">
-
-        {include file='ui/f6/errorCallout.html'}
-
-    </form>
-</div>
+    {* Form Start *}
+    {$ui = [
+        'id'     => 'billing-invoice-type-form',
+        'action' => "{$thisUrl}?page={$thisPage}&glm_action==invoiceTypes",
+        'method' => 'post',
+        'file'   => false
+    ]}
+    {include file="ui/f6/form-start.html"}
+
+    {* Callout Errors *}
+    {include file='ui/f6/errorCallout.html'}
+
+    <input type="hidden" name="glm_action" value="invoiceTypes">
+
+    {if isset($data.fieldData.id)}
+        <input type="hidden" name="option" value="update">
+        <input id="edit-id" type="hidden" name="id" value="{$data.fieldData.id}">
+    {else}
+        <input type="hidden" name="option" value="addNew">
+    {/if}
+
+    <div class="grid-x grid-margin-x">
+
+        <fieldset class="fieldset cell small-12 medium-6">
+            <legend>Invoice Type</legend>
+
+            <div class="grid-x grid-margin-x">
+
+                {* Invoice Type Name *}
+                {$ui = [
+                    'value'       => $data.fieldData.name,
+                    'field'       => 'name',
+                    'label'       => 'Invoice Type Name',
+                    'required'    => $data.fieldRequired.name,
+                    'errorText'   => 'Invoice Type Name is Required',
+                    'dataError'   => $data.fieldFail.name
+                ]}
+                {include file='ui/f6/text.html'}
+
+                {* Parent *}
+                {$ui = [
+                    'value'     => $data.fieldData.parent.value,
+                    'field'     => 'parent',
+                    'label'     => 'Parent',
+                    'list'      => $invoiceTypes,
+                    'l_label'   => 'name',
+                    'l_value'   => 'id',
+                    'l_blank'   => true,
+                    'required'  => $data.fieldRequired.parent,
+                    'errorText' => 'Parent is Required',
+                    'dataError' => $data.fieldFail.parent
+                ]}
+                {include file='ui/f6/select.html'}
+
+                {* Member Type *}
+                {$ui = [
+                    'value'     => $data.fieldData.member_type.value,
+                    'field'     => 'member_type',
+                    'label'     => 'Member Type',
+                    'list'      => $memberTypes,
+                    'l_label'   => 'name',
+                    'l_value'   => 'id',
+                    'l_blank'   => true,
+                    'required'  => $data.fieldRequired.member_type,
+                    'errorText' => 'Member Type is Required',
+                    'dataError' => $data.fieldFail.member_type
+                ]}
+                {include file='ui/f6/select.html'}
+
+                {* Amount *}
+                {$ui = [
+                    'value'       => $data.fieldData.amount,
+                    'field'       => 'amount',
+                    'label'       => 'Amount',
+                    'pattern'     => 'number',
+                    'required'    => $data.fieldRequired.amount,
+                    'errorText'   => 'Amount is Required',
+                    'dataError'   => $data.fieldFail.amount
+                ]}
+                {include file='ui/f6/text.html'}
+
+                {* Dynamic Amount *}
+                {$ui = [
+                    'value'     => $data.fieldData.dynamic_amount.value,
+                    'field'     => 'dynamic_amount',
+                    'label'     => 'Dynamic Amount',
+                    'required'  => $data.fieldRequired.dynamic_amount,
+                    'errortext' => 'Dynamic Amount is Required',
+                    'helpText'  => 'Ask for the amount on Invoice Form',
+                    'dataError' => $data.fieldFail.dynamic_amount
+                ]}
+                {include file='ui/f6/checkbox.html'}
+
+                {* Recurring *}
+                {$ui = [
+                    'value'     => $data.fieldData.recurring.value,
+                    'field'     => 'recurring',
+                    'label'     => 'Recurring',
+                    'required'  => $data.fieldRequired.recurring,
+                    'errortext' => 'Recurring is Required',
+                    'dataError' => $data.fieldFail.recurring
+                ]}
+                {include file='ui/f6/checkbox.html'}
+
+                {* Recurrence *}
+                {$ui = [
+                    'value'     => $data.fieldData.recurrence,
+                    'field'     => 'recurrence',
+                    'label'     => 'Recurrence',
+                    'list'      => $recurrenceTypes,
+                    'l_blank'   => true,
+                    'required'  => $data.fieldRequired.recurrence,
+                    'errorText' => 'Recurrence is Required',
+                    'dataError' => $data.fieldFail.recurrence
+                ]}
+                {include file='ui/f6/select.html'}
+
+
+                {* Code *}
+                {$ui = [
+                    'value'       => $data.fieldData.qcode,
+                    'field'       => 'qcode',
+                    'label'       => 'Code',
+                    'required'    => $data.fieldRequired.qcode,
+                    'errorText'   => 'Code is Required',
+                    'dataError'   => $data.fieldFail.qcode
+                ]}
+                {include file='ui/f6/text.html'}
+
+                {* Category *}
+                {$ui = [
+                    'value'       => $data.fieldData.category,
+                    'field'       => 'category',
+                    'label'       => 'Category',
+                    'required'    => $data.fieldRequired.category,
+                    'errorText'   => 'Category is Required',
+                    'dataError'   => $data.fieldFail.category
+                ]}
+                {include file='ui/f6/text.html'}
+
+            </div>
+
+        </fieldset>
+
+    </div>
+
+    <button class="button primary" type="submit">{if isset( $data.fieldData.id )}Update{else}Add{/if} Invoice Type</button>
+
+    {include file='ui/f6/errorCallout.html'}
+
+
+    {include file='ui/f6/form-end.html'}
+
+{include file='ui/f6/grid-end.html'}
+{* </div> *}
+
+<script>
+    jQuery(document).ready(function($){
+        // Abide event listeners
+        $(document)
+        // field element is invalid
+        .on('invalid.zf.abide', function( ev, elem ) {
+            elem.focus();
+        })
+        // form validation failed
+        .on('forminvalid.zf.abide', function( ev, frm ) {
+            ev.preventDefault();
+            console.log( 'Form is not valid' );
+        })
+        // form validation passed
+        .on('formvalid.zf.abide', function( ev, frm ) {
+            ev.preventDefault();
+            console.log( 'Form is valid' );
+        })
+        // to preven form from submitting upon successful validation
+        .on('submit', function( ev ) {
+            ev.preventDefault();
+            console.log( 'Submit for form intercepted' );
+        });
+    });
+</script>
 
 {include file='admin/billing/footer.html'}
diff --git a/views/admin/billing/editNotificationType.html b/views/admin/billing/editNotificationType.html
index e3e8c75..840971b 100644
--- a/views/admin/billing/editNotificationType.html
+++ b/views/admin/billing/editNotificationType.html
@@ -220,7 +220,7 @@
 
 
 
-                        <input class="button primary" type="submit" value="{if $notification_id}Update{else}Add{/if} Notification Type">
+                        <button class="button primary" type="submit">{if $notification_id}Update{else}Add{/if} Notification Type</button>
 
                     </fieldset>
 
diff --git a/views/admin/billing/makePaymentAdjustmentAjax.html b/views/admin/billing/makePaymentAdjustmentAjax.html
index 2c8e62d..b8e52cc 100644
--- a/views/admin/billing/makePaymentAdjustmentAjax.html
+++ b/views/admin/billing/makePaymentAdjustmentAjax.html
@@ -80,7 +80,7 @@
                 </div>
 
                 <div class="cell small-6">
-                    <input class="button button-primary" type="submit" style="margin-top: 0;" value="Make Payment">
+                    <button class="button button-primary" type="submit" style="margin-top: 0;">Make Payment</button>
                 </div>
 
                 <div class="cell small-6">
diff --git a/views/admin/billing/makePaymentAjax.html b/views/admin/billing/makePaymentAjax.html
index 8819000..fec4320 100644
--- a/views/admin/billing/makePaymentAjax.html
+++ b/views/admin/billing/makePaymentAjax.html
@@ -60,7 +60,7 @@
             {* Only if payments types are setup *}
             {include file='common/billing/paymentForm.html'}
 
-            <input class="button button-primary" type="submit" value="Make Payment" {if $billing_settings.proc_methods == 4} onclick="onGetCardNonce(event)"{/if}>
+            <button class="button button-primary" type="submit" {if $billing_settings.proc_methods == 4} onclick="onGetCardNonce(event)"{/if}>Make Payment</button>
 
             <button class="button glm-right" data-close aria-label="Cancel" type="button">
                 <span>Cancel</span>
diff --git a/views/admin/billing/settings.html b/views/admin/billing/settings.html
index 5b3d56b..eb28bdc 100644
--- a/views/admin/billing/settings.html
+++ b/views/admin/billing/settings.html
@@ -4,7 +4,13 @@
 {* Here we are setting $data so it can be used for the Foundation 6 UI Elements *}
 {$data = $billingSettings}
 
-<div class="callout grid-container">
+{* <div class="callout grid-container"> *}
+{$ui = [
+    'nowrap'          => false,
+    'backgroundColor' => '',
+    'sectionColor'    => ''
+]}
+{include file='ui/f6/grid-start.html'}
 
     <h3 class="subheader">Settings</h3>
 
@@ -27,7 +33,7 @@
         </div>
     {/if}
 
-    <form data-abide novalidate id="billing-setting-form" action="{$thisUrl}?page={$thisPage}" method="post" enctype="multipart/form-data">
+    <form id="billing-setting-form" action="{$thisUrl}?page={$thisPage}" method="post" enctype="multipart/form-data" data-abide novalidate>
         <input type="hidden" name="glm_action" value="settings">
         <input type="hidden" name="option" value="settings">
         <input type="hidden" name="option2" value="submit">
@@ -324,7 +330,7 @@
                 <div class="accordion-content" data-tab-content>
                     <div class="grid-x grid-margin-x">
                         <div class="cell small-12 large-6">
-                            <fieldset class*="fieldset cell small-12">
+                            <fieldset class="fieldset cell small-12">
                                 <legend>Advanced Settings</legend>
 
                                 {* Company Logo Width *}
@@ -503,7 +509,7 @@
 
         </ul>
 
-        <input class="button button-primary" type="submit" style="margin-top: 0;" value="Save">
+        <button class="button button-primary" type="submit" style="margin-top: 0;">Save</button>
 
         {include file='ui/f6/errorCallout.html'}
 
@@ -515,13 +521,15 @@
     <div class="tabs-panel" id="panel3">
         <p>Notifications</p>
     </div>
-</div>
+{* </div> *}
+{include file='ui/f6/grid-end.html'}
 
 <script>
     jQuery(document).ready(function($){
         $(document).foundation();
-
+        // Setup the Responsive Accordion Tabs
         var settings = new Foundation.ResponsiveAccordionTabs( $('#glm-settings-tabs') );
+
     });
 </script>
 {include file='admin/billing/footer.html'}
diff --git a/views/admin/billing/statements.html b/views/admin/billing/statements.html
index be82b77..12e62cd 100644
--- a/views/admin/billing/statements.html
+++ b/views/admin/billing/statements.html
@@ -98,7 +98,7 @@
 
 <div id="glm-admin-billing-wrapper">
 
-    <table class="{if !$adminAjaxPassthru}glm-admin-table wp-list-table striped{else}stack{/if}">
+    <table class="{if !$adminAjaxPassthru}glm-admin-table wp-list-table striped{else}table-scroll{/if}">
         <thead>
             <tr>
                 <th style="width:50px;">Invoice #</th>
-- 
2.17.1