{if $invoiceInsertError}<span class="glm-notice glm-flash-updated">Notification Insert Error</span>{/if}
{if $invoiceAdded}<span class="glm-notice glm-flash-updated">Notification Added</span>{/if}
-<div id="billing-invoice-form">
+<div id="billing-invoice-form" style="max-width: 750px;">
<form id="create-invoice-form" action="{$thisUrl}?page={$thisPage}&glm_action=invoices" method="post">
{if $invoice_id}
<input type="hidden" name="option" value="update">
</div>
<div class="glm-row">
<div class="glm-columns glm-small-12 glm-large-2">
- <button id="newLineItemButton" class="glm-billing-add-line-item button tiny">Add Line Item</button>
- </div>
- <div class="glm-columns glm-small-12 glm-large-2">
- <button id="newCustomLineItemButton" class="glm-billing-add-line-item button tiny">Create New Line Item</button>
+ <a id="newLineItemButton" class="glm-billing-add-line-item">Add Line Item</a><br>
+ <a id="newCustomLineItemButton" class="glm-billing-add-line-item">Create New Line Item</a>
</div>
<div class="glm-columns glm-small-12 glm-large-10" id="invoice-line-items">
</div>
</div>
</form>
</div>
+{* New Account Form - Dialog *}
<div id="newAccountDialog" class="glm-dialog-box" title="New Account">
<p class="validateAccountTips" style="color:red">* required</p>
<form id="addAccountForm">
</td>
</tr>
<tr>
- <th>Billing Address 1</th>
+ <th class="glm-required">Billing First Name</th>
+ <td>
+ <input type="text" name="billing_fname" value="">
+ </td>
+ </tr>
+ <tr>
+ <th class="glm-required">Billing Last Name</th>
+ <td>
+ <input type="text" name="billing_lname" value="">
+ </td>
+ </tr>
+ <tr>
+ <th class="glm-required">Billing Address 1</th>
<td>
<input type="text" name="billing_addr1" value="">
</td>
</td>
</tr>
<tr>
- <th>Billing City</th>
+ <th class="glm-required">Billing City</th>
<td>
<input type="text" name="billing_city" value="">
</td>
</tr>
<tr>
- <th>Billing State</th>
+ <th class="glm-required">Billing State</th>
<td>
- <input type="text" name="billing_state" value="">
+ <select name="billing_state">
+ <option value=""></option>
+ {foreach $billingAccount.fieldData.billing_state.list as $s}
+ <option value="{$s.value}">
+ {$s.name}
+ </option>
+ {/foreach}
+ </select>
</td>
</tr>
<tr>
- <th>Billing Zip</th>
+ <th class="glm-required">Billing Zip</th>
<td>
<input type="text" name="billing_zip" value="">
</td>
<option value="">Select Invoice Type</option>
{$parent = 0}
{foreach $invoiceTypes as $inv}
- {if $inv.parent.value == 0}
- <optgroup label="{$inv.name}">
+ {if $inv.parent.value == 0 && $parent != 0 && $inv.amount != '0.00'}
+ <optgroup label="---"> </optgroup>
{/if}
- {if $inv.amount != '0.00'}
+ {$parent = $inv.parent.value}
+ {if $inv.parent.value == 0 && $inv.amount != '0.00'}
+ <option value="{$inv.id}" data-price="{$inv.amount}">{$inv.name}</option>
+ {else if ($inv.parent.value == 0 && $inv.amount == '0.00')}
+ <optgroup label="{$inv.name}"></optgroup>
+ {else if ($inv.parent.value != 0)}
<option value="{$inv.id}" data-price="{$inv.amount}">{$inv.name}</option>
- {/if}
- {if $inv.parent.value == 0}
- </optgroup>
{/if}
{/foreach}
</select>
</div>
{* Add new Invoice Type (Custom Line Item) Form *}
<div id="newCustomLineItemDialog" class="glm-dialog-box" title="Enter Custom Line Item">
- <p class="validateTips glm-required">* Required!</p>
+ <p class="validateCustomTips glm-required">* Required!</p>
<table>
<tr>
- <th class="glm-required">Line Item Name</th></th>
- <td><input name="name" /></td>
+ <th class="glm-required">Parent</th>
+ <td>
+ <select id="cf_parent_select" name="cf_parent" required>
+ <option value="0">No Parent</option>
+ {foreach $invoiceTypes as $inv}
+ {if $inv.parent.value == 0}
+ <option value="{$inv.id}">{$inv.name}</option>
+ {/if}
+ {/foreach}
+ </select>
+ </td>
+ </tr>
+ <tr>
+ <th class="glm-required">Line Item Name</th>
+ <td><input name="cf_name" /></td>
</tr>
<tr>
<th class="glm-required">Amount</th>
- <td><input name="name" /></td>
+ <td><input name="cf_amount" /></td>
</tr>
</table>
</div>
customLineItemDialog, // Dialog for the custom line item
form, // The add line_item form
newAccountForm, // New Account Form
- line_item_type = $( 'select[name="line_item_type"]' ), // Line item type in the add line_item form
- line_items = [], // Array holding line_items json objects
- allFields = $( [] ).add( line_item_type ), // Array holding the form fields - add line_item form
- ref_name = $( 'input[name="ref_name"' ),
- anniversary_date = $( 'input[name="anniversary_date"' ),
- renewal_date = $( 'input[name="renewal_date"' ),
- email = $( 'input[name="email"' ),
- billing_addr1 = $( 'input[name="billing_addr1"' ),
- billing_addr2 = $( 'input[name="billing_addr2"' ),
- billing_city = $( 'input[name="billing_city"' ),
- billing_state = $( 'input[name="billing_state"' ),
- billing_zip = $( 'input[name="billing_zip"' ),
- billing_phone = $( 'input[name="billing_phone"' ),
- lineTips = $('.validateTips'),
- accountTips = $('.validateAccountTips'),
- allAccountFields = $( [] ).add( ref_name ) .add( anniversary_date ) .add( renewal_date )
+ line_item_type = $( 'select[name="line_item_type"]' ), // Line item type in the add line_item form
+ line_items = [], // Array holding line_items json objects
+ allFields = $( [] ).add( line_item_type ), // Array holding the form fields - add line_item form
+ ref_name = $( 'input[name="ref_name"' ),
+ anniversary_date = $( 'input[name="anniversary_date"' ),
+ renewal_date = $( 'input[name="renewal_date"' ),
+ email = $( 'input[name="email"' ),
+ billing_fname = $( 'input[name="billing_fname"' ),
+ billing_lname = $( 'input[name="billing_lname"' ),
+ billing_addr1 = $( 'input[name="billing_addr1"' ),
+ billing_addr2 = $( 'input[name="billing_addr2"' ),
+ billing_city = $( 'input[name="billing_city"' ),
+ billing_state = $( 'select[name="billing_state"' ),
+ billing_zip = $( 'input[name="billing_zip"' ),
+ billing_phone = $( 'input[name="billing_phone"' ),
+ customFieldName = $( 'input[name="cf_name"]' ),
+ customFieldAmount = $( 'input[name="cf_amount"]' ),
+ customFieldParent = $( 'select[name="cf_parent"]' ),
+ lineTips = $( '.validateTips' ),
+ accountTips = $( '.validateAccountTips' ),
+ customTips = $( '.validateCustomTips' ),
+ allAccountFields = $( [] ).add( ref_name ) .add( anniversary_date ) .add( renewal_date )
.add( email ) .add( billing_addr1 ) .add( billing_addr2 ) .add( billing_city )
- .add( billing_state ) .add( billing_zip )
+ .add( billing_state ) .add( billing_zip ) .add( billing_fname ) .add( billing_lname )
.add( billing_phone ) , // Array holding the form fields - add line_item form
- invoiceTypeJSON = $.parseJSON( '{$invoiceTypeJSON}' ); // Json object with all of the invoices types
+ allCustomFields = $([]).add( customFieldName ).add( customFieldAmount ).add( customFieldParent ),
+ invoiceTypeJSON = $.parseJSON( '{$invoiceTypeJSON}' ); // Json object with all of the invoices types
// From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
{literal}
- var emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+ var emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+ var moneyRegex = /^[\d]+(\.\d{2})?$/;
{/literal}
/**
valid = valid && checkRequired( line_item_type, lineTips, 'Invoice Type is required!' );
if ( valid ) {
- console.log( 'line_item_type', line_item_type );
+ // console.log( 'line_item_type', line_item_type );
var selectedLineItem = invoiceTypeJSON[line_item_type.val()];
// If selectedLineItem is undefined then we must be adding new line item
if ( selectedLineItem == undefined ) {
} else {
// Check first to see if this line_item_type is already in line_items.
if ( !isLineItem( selectedLineItem ) ) {
- selectedLineItem.qty = parseInt(1);
- line_items.push( selectedLineItem );
- $( '#invoice-line-items' ). append( '<div class="glm-row" id="line-item-type-' + selectedLineItem.id + '">' +
- '<div class="glm-columns glm-small-1 line-item-delete dashicons dashicons-trash" data-id="' + selectedLineItem.id + '"></div>' +
- '<div class="glm-columns glm-small-6">' + selectedLineItem.name + '</div>' +
- '<div class="glm-columns glm-small-1">' +
- '<input type="number" min="1" data-id="' + selectedLineItem.id + '" name="line_item_qty[' + selectedLineItem.id + ']" value="1">' +
- '</div><div class="glm-columns glm-small-4">' +
- '<input type="hidden" name="line_items[]" value="' + selectedLineItem.id + '">' +
- '<input type="hidden" name="line_item_amount[' + selectedLineItem.id + ']" value="' + selectedLineItem.amount + '">' +
- '<input type="hidden" name="line_item_name[' + selectedLineItem.id + ']" value="' + selectedLineItem.name + '">' +
- '$' + selectedLineItem.amount + '</div>' +
- '</div>');
+ addLineItemToInvoice( selectedLineItem );
} else {
// Code here to add to quantity.
selectedLineItem.qty++;
return valid;
}
+ function addLineItemToInvoice( lineItem )
+ {
+ lineItem.qty = parseInt(1);
+ line_items.push( lineItem );
+ $( '#invoice-line-items' ). append( '<div class="glm-row" id="line-item-type-' + lineItem.id + '">' +
+ '<div class="glm-columns glm-small-1 line-item-delete dashicons dashicons-trash" data-id="' + lineItem.id + '"></div>' +
+ '<div class="glm-columns glm-small-6">' + lineItem.name + '</div>' +
+ '<div class="glm-columns glm-small-1">' +
+ '<input type="number" min="1" data-id="' + lineItem.id + '" name="line_item_qty[' + lineItem.id + ']" value="1">' +
+ '</div><div class="glm-columns glm-small-4">' +
+ '<input type="hidden" name="line_items[]" value="' + lineItem.id + '">' +
+ '<input type="hidden" name="line_item_amount[' + lineItem.id + ']" value="' + lineItem.amount + '">' +
+ '<input type="hidden" name="line_item_name[' + lineItem.id + ']" value="' + lineItem.name + '">' +
+ '$' + lineItem.amount + '</div>' +
+ '</div>');
+ }
+
// Add the price to the right of the new selection for add line item.
$('#line_item_type').change(function(){
if ( $(this).val() == 'new' ) {
valid = valid && checkRequired( ref_name, accountTips, 'Name is required!' );
valid = valid && checkRequired( anniversary_date, accountTips, 'Anniversary Date is required!' );
valid = valid && checkRequired( email, accountTips, 'Email is required!' );
- valid = valid && checkRegexp( email, emailRegex, 'Use valid email!' );
+ valid = valid && checkRegexp( email, emailRegex, 'Use valid email!', accountTips );
+ valid = valid && checkRequired( billing_addr1, accountTips, 'Billing Address 1 is required!' );
+ valid = valid && checkRequired( billing_city, accountTips, 'Billing City is required!' );
+ valid = valid && checkRequired( billing_state, accountTips, 'Billing State is required!' );
+ valid = valid && checkRequired( billing_zip, accountTips, 'Billing Zip is required!' );
if ( valid ) {
// console.log( newAccountForm.serialize() );
dataType: 'json'
}).done(function( msg ){
if ( msg.status === true ) {
+ // console.log( 'account: ', msg.account );
+ // TODO: check these function as they don't seem to work!
// Reload the account select
- updateBillingAccountList( msg.account.fieldData.id );
+ updateBillingAccountList( msg.account );
updateNonAccountMemberList();
// Close the dialog
newAccountDialog.dialog( 'close' );
} else {
- // console.log( 'return', msg );
+ console.log( 'return', msg );
}
});
}
/**
* Check field against regular expression.
*/
- function checkRegexp( fieldName, regexp, message ) {
+ function checkRegexp( fieldName, regexp, message, tips ) {
+ // console.log( 'fieldName: ', fieldName );
+ // console.log( 'regexp: ', regexp );
+ // console.log( 'message: ', message );
if ( !( regexp.test( fieldName.val() ) ) ) {
fieldName.addClass( 'ui-state-error' );
- updateTips( accountTips, message );
+ updateTips( tips, message );
return false;
} else {
return true;
* Ajax call to get the list of members with accounts.
* Updating the account list used for the autocomplete.
*/
- function updateBillingAccountList( selected_id = null )
+ function updateBillingAccountList( selectedAccount = null )
{
$.ajax({
dataType: 'json'
}).done(function(msg){
availableAccountMembers = [];
+ // console.log( msg );
for ( index in msg ) {
var obj = msg[index];
- availableAccountMembers.push( { label: obj.name, value: obj.name, id: obj.id } );
+ availableAccountMembers.push( {
+ label: obj.name,
+ value: obj.name,
+ id: obj.id,
+ anniversary: obj.ann
+ } );
}
+ // console.log( 'availableAccountMembers', availableAccountMembers );
// also need to update the source for the autocomplete
$('#glm_member_accounts').autocomplete(
'option',
{ source: availableAccountMembers }
);
+ // Here we change the value of the Billing Account field.
+ $('#glm_member_accounts').val( selectedAccount.ref_dest.name );
+ $('#glm_member_accounts_hidden').val( selectedAccount.id );
+ $('#invoice_due_date').val( selectedAccount.next_anniversary_date );
+ });
+ }
+
+ /**
+ * updateInvoiceTypeList
+ *
+ * Ajax call to fetch new invoiceType list and update the invoiceTypeJSON.
+ * Have to pass in the new id you want to add to the form.
+ * Since this sometimes finishes at a different time (async).
+ * Has to add the item to the form after this is pulled.
+ */
+ function updateInvoiceTypeList( lineItemId )
+ {
+ $.ajax({
+ url: '{$ajaxUrl}',
+ cache: false,
+ type: 'GET',
+ data: 'action=glm_members_admin_ajax&glm_action=invoiceTypes&option=list',
+ encode: true,
+ dataType: 'json'
+ }).done(function(data){
+ invoiceTypeJSON = data;
+ // console.log( 'invoiceTypeJSON', invoiceTypeJSON );
+ addLineItemToInvoice( invoiceTypeJSON[lineItemId] );
});
}
},
},
close: function(){
- // Todo: reset form
- // Todo: remove error state
- // Todo: updateTips
+ customFieldName.val('');
+ customFieldAmount.val('');
+ allCustomFields.removeClass( 'ui-state-error' );
+ updateTips( customTips, '* required!' );
},
});
+ /**
+ * Custom Line Item form callback.
+ *
+ * Save the custom line item using ajax.
+ */
+ function addCustomLineItem()
+ {
+ // Need to validate the form
+ var valid = true;
+
+ // Clear allCustomFields
+ allCustomFields.removeClass( 'ui-state-error' );
+
+ // Check fields for a value.
+ valid = valid && checkRequired( customFieldParent, customTips, 'Parent is required!' );
+ valid = valid && checkRequired( customFieldName, customTips, 'Name is required!' );
+ valid = valid && checkRequired( customFieldAmount, customTips, 'Amount is required!' );
+ valid = valid && checkRegexp( customFieldAmount, moneyRegex, 'Amount: Use numbers only!', customTips );
+
+ // console.log( 'customFieldName: ', customFieldName.val() );
+ // console.log( 'customFieldAmount: ', customFieldAmount.val() );
+ if ( valid ) {
+ // console.log('start ajax');
+ $.ajax({
+ url: '{$ajaxUrl}?action=glm_members_admin_ajax&glm_action=invoiceTypes&option=add',
+ cache: false,
+ type: 'POST',
+ data: {
+ name: customFieldName.val(),
+ amount: customFieldAmount.val(),
+ parent: customFieldParent.val()
+ },
+ encode: true,
+ dataType: 'json'
+ }).done(function( msg ){
+ if ( msg.status === true ) {
+ // console.log( 'msg from addCustomLineItem: ', msg );
+ updateInvoiceTypeList( msg.invoiceType.id );
+ // Close the dialog
+ customLineItemDialog.dialog( 'close' );
+ } else {
+ // console.log( 'return', msg );
+ }
+ });
+ }
+
+ return valid;
+ }
+
/**
* form
*
addLineItem();
});
- // Need to make sure something is added to the form.
- // Should not be making empty invoices.
+ /**
+ * Need to make sure something is added to the form.
+ * Should not be making empty invoices.
+ */
$('#create-invoice-form').submit(function(e){
// Check if there's a total amount.
// If it is empty then don't submit form.
if ( !$('#invoice-total-amount').val() || $('#invoice-total-amount').val() == '0.00' ) {
- alert( 'Empty invoice. Please add something!' );
+ alert( 'Empty invoice. Please add at least one line item!' );
return false;
} else {
return true;
return false;
});
+ /**
+ * Click event for the id of #newCustomLineItemButton
+ *
+ * Activates the dialog for adding custom line items.
+ */
+ $('#newCustomLineItemButton').click( function(){
+ $('#newCustomLineItemDialog').dialog( 'open' );
+ return false;
+ });
+
/**
* dialog for the New Account Form
*/
projects / WP-Plugins / glm-member-db-billing.git / commitdiff