From: Christopher Burger <burgerc@freeside.biz>
Date: Wed, 18 Jul 2018 14:50:35 +0000 (-0400)
Subject: RT# 34134 - updated UI experience
X-Git-Url: http://git.freeside.biz/gitweb/?p=freeside.git;a=commitdiff_plain;h=85aeb9ff889959bb3f6c91e318ef856833efd504

RT# 34134 - updated UI experience
---

diff --git a/httemplate/elements/tr-amount_fee.html b/httemplate/elements/tr-amount_fee.html
index 1c78d7ec1..a84fef6ec 100644
--- a/httemplate/elements/tr-amount_fee.html
+++ b/httemplate/elements/tr-amount_fee.html
@@ -1,6 +1,6 @@
-  <TR ID="payment_amount_row" <% $opt{'row_style'} %>>
+  <TR ID="payment_amount_row">
     <TH ALIGN="right"><% mt('Payment amount') |h %></TH>
-    <TD COLSPAN=7>
+    <TD>
       <TABLE><TR><TD BGCOLOR="#ffffff">
         <% $money_char %><INPUT NAME     = "amount"
                                 ID       = "amount"
@@ -8,7 +8,7 @@
                                 VALUE    = "<% $amount %>"
                                 SIZE     = 8
                                 STYLE    = "text-align:right;"
-%                               if ( $fee || $surcharge ) {
+%                               if ( $fee || $surcharge_percentage || $surcharge_flatfee ) {
                                   onChange   = "amount_changed(this)"
                                   onKeyDown  = "amount_changed(this)"
                                   onKeyUp    = "amount_changed(this)"
@@ -28,7 +28,7 @@
            <FONT SIZE="+1"><% length($amount) ? $money_char. sprintf('%.2f', ($fee_display eq 'add') ? $amount + $fee : $amount - $fee ) : '' %> <% $fee_display eq 'add' ? 'TOTAL' : 'AVAILABLE' %></FONT>
   
 %        }
-%        if ( $surcharge ) {
+%        if ( $surcharge_percentage || $surcharge_flatfee ) {
            <INPUT TYPE="hidden" NAME="surcharge_percentage" ID="surcharge_percentage" VALUE="<% $surcharge_percentage %>">
            <INPUT TYPE="hidden" NAME="surcharge_flatfee" ID="surcharge_flatfee" VALUE="<% $surcharge_flatfee %>">
       </TD><TD ID="ajax_surcharge_cell" BGCOLOR="#dddddd" STYLE="border:1px solid blue">
@@ -38,7 +38,7 @@
     </TD>
   </TR>
 
-% if ($fee || $surcharge) {
+% if ($fee || $surcharge_percentage || $surcharge_flatfee ) {
 
     <SCRIPT TYPE="text/javascript">
 
@@ -56,7 +56,7 @@
         total_cell.innerHTML = '<FONT SIZE="+1">' + total + ' <% $fee_display eq 'add' ? 'TOTAL' : 'AVAILABLE' %></FONT>';
 % }
 
-% if ( $surcharge ) {
+% if ( $surcharge_percentage || $surcharge_flatfee ) {
         var surcharge_cell = document.getElementById('ajax_surcharge_cell');
         var surcharge = ((what.value - <% $surcharge_flatfee %>) * <% $surcharge_percentage %>) + <% $surcharge_flatfee %>;
         surcharge_cell.innerHTML = '<FONT SIZE="+1">A credit card surcharge of ' + surcharge.toFixed(2) + ' is included in this payment</FONT>';
@@ -102,7 +102,10 @@ if ( $opt{'process-pkgpart'}
 }
 
 my $amount = $opt{'amount'};
-if ( $amount > 0 ) {
+if ( $amount ) {
+  # probably should not happen, but will prevent surcharge being applied to negative due amounts
+  unless ($amount > 0) { $amount = 0; }
+
   $amount += $fee
     if $fee && $fee_display eq 'subtract';
 
@@ -111,7 +114,7 @@ if ( $amount > 0 ) {
   $surcharge_percentage = $opt{'surcharge_percentage'}/100 if $opt{'surcharge_percentage'} > 0;
   $surcharge_flatfee = $opt{'surcharge_flatfee'} if $opt{'surcharge_flatfee'} > 0;
   $surcharge = $amount * $surcharge_percentage if $surcharge_percentage > 0;
-  $surcharge += $surcharge_flatfee if $surcharge_flatfee > 0;
+  $surcharge += $surcharge_flatfee if ( $surcharge_flatfee > 0 && $amount > 0 );
 
   $amount += $surcharge;
 
diff --git a/httemplate/elements/tr-select-invoice.html b/httemplate/elements/tr-select-invoice.html
index 3728d348d..434042c9b 100644
--- a/httemplate/elements/tr-select-invoice.html
+++ b/httemplate/elements/tr-select-invoice.html
@@ -5,7 +5,11 @@ Example:
   include( '/elements/tr-select-invoice.html',
 
     #opt - most get used in /elements/tr-amount-fee
-    'custnum'              => 4,     # customer number,
+    'cust_main'            => $cust_main,     # cust_main,
+    'status'               => 'open' # type of invoices to show.  Possible values are:
+                                     # open - shows only open invoices
+                                     # void - shows only voided invoices
+                                     # all  - shows all invoices, this is default if no status is set.
     'prefix'               => 'pre', # prefix to fields and row ID's
   )
 
@@ -13,14 +17,14 @@ Example:
 
   <TR ID="invoice_row" STYLE="display:none;">
     <TH ALIGN="right"><% mt('Open invoices') |h %></TH>
-    <TD COLSPAN=7>
+    <TD>
      <SELECT
   	  ID       = "<% $opt{prefix} %>invoice"
   	  NAME     = "<% $opt{prefix} %>invoice"
   	  onChange = "<% $opt{prefix} %>invoice_select_changed(this)"
 	>
   		<OPTION VALUE="select">Select an invoice to pay</OPTION>
-%         foreach my $record (@records) {
+%         foreach my $record (@invoices) {
 %            my $read_date = time2str("%b %o, %Y", $record->_date);
             <OPTION VALUE="<% $record->charged %>"><% $record->invnum %> (<% $read_date %>) - <% $record->charged %></OPTION>	
 %         }
@@ -32,12 +36,11 @@ Example:
 <%init>
 
 my %opt = @_;
+my $status = $opt{'status'} ? $opt{'status'} : 'all';
 
-my @records = qsearch( {
-    'select'    => '*',
-    'table'     => 'cust_bill',
-    'hashref'   => { 'custnum' => $opt{custnum} },
-    'order_by'  => 'ORDER BY _date',
-});
+my @invoices;
+if ($status eq "all") { @invoices = $opt{'cust_main'}->cust_bill; }
+elsif ($status eq "open") { @invoices = $opt{'cust_main'}->open_cust_bill; }
+elsif ($status eq "void") { @invoices = $opt{'cust_main'}->cust_bill_void; }
 
 </%init>
diff --git a/httemplate/elements/tr-select-payment_options.html b/httemplate/elements/tr-select-payment_options.html
index a59963a91..35e6def94 100644
--- a/httemplate/elements/tr-select-payment_options.html
+++ b/httemplate/elements/tr-select-payment_options.html
@@ -5,9 +5,9 @@ Example:
   include( '/elements/tr-select-payment_options.html',
 
     #opt - most get used in /elements/tr-amount-fee
-    'custnum'              => 4,     # customer number needed for selecting invoices
+    'cust_main'            => $cust_main,     # custmain needed for selecting invoices
     'prefix'               => 'pre', # prefix to fields and row ID's
-    'amount'               => 1,     # payment amount
+    'amount'               => 1,     # payment amount optional, if no amount will grab balance due from cust_main
     'process-pkgpart'      => scalar($conf->config('manual_process-pkgpart', $cust_main->agentnum)),
     'process-display'      => scalar($conf->config('manual_process-display')),
     'process-skip_first'   => $conf->exists('manual_process-skip_first'),
@@ -26,39 +26,57 @@ Example:
 
 </%doc>
 
-  <TR STYLE="display:block">
-    <TH ALIGN="right"><% mt('Payment options') |h %></TH>
-    <TD COLSPAN=7>
+  <TR ID="payment_option_row">
+    <TH ALIGN="right"><% mt('What would you like to pay') |h %></TH>
+    <TD>
      <SELECT
   	  ID       = "<% $opt{prefix} %>payment_option"
   	  NAME     = "<% $opt{prefix} %>payment_option"
   	  onChange = "<% $opt{prefix} %>payment_option_changed(this)"
   	  <% $opt{disabled} %>
-	>
-  		<OPTION VALUE="select">Select payment option</OPTION>
-  		<OPTION VALUE="<% $opt{amount} %>">Pay full balance</OPTION>
-  		<OPTION VALUE="invoice">Pay specific invoice</OPTION>
+	   >
+      <OPTION VALUE="select">Select the amount you would like to pay</OPTION>
+      <% ($amount > 0) ? '<OPTION VALUE="'.$amount.'">Pay full balance</OPTION>' : '' %>
+      <% (@open_invoices) ? '<OPTION VALUE="invoice">Pay specific invoice</OPTION>' : '' %>
       <OPTION VALUE="specific">Pay specific amount</OPTION>
-	</SELECT>	
+	   </SELECT>
     </TD>
   </TR>
 
   <& /elements/tr-select-invoice.html,
-       'custnum' => $opt{custnum},
-       'prefix'  => $opt{prefix},
+       'cust_main' => $cust_main,
+       'status'    => 'open',
+       'prefix'    => $opt{prefix},
   &>
 
   <& /elements/tr-amount_fee.html,
-       'row_style'  => 'STYLE="display:none;"',
+       'amount'     => $amount,
+       'custnum'    => $custnum,
        %opt
   &>
 
   <SCRIPT TYPE="text/javascript">
 
+      $('#payment_option_row').<% $payment_option_row %>();
+      $('#payment_amount_row').<% $payment_amount_row %>();
+
+      if($('#payment_amount_row').is(':visible')) {
+        var surcharge;
+        var amount = document.getElementById('amount').value;
+
+        if ((document.getElementById('surcharge_percentage') || document.getElementById('surcharge_flatfee')) && amount > 0) {
+          surcharge = (+amount * +document.getElementById('surcharge_percentage').value) + +document.getElementById('surcharge_flatfee').value;
+        }
+        else { surcharge = 0; }
+        if (document.getElementById('ajax_surcharge_cell')) {
+          document.getElementById('ajax_surcharge_cell').innerHTML = '<FONT SIZE="+1">A credit card surcharge of <% $money_char %>' + surcharge.toFixed(2) + ' is included in this payment</FONT>';
+        }
+      }
+
       function <% $opt{prefix} %>payment_option_changed(what) {
 
         var surcharge;
-        if (document.getElementById('surcharge_percentage') || document.getElementById('surcharge_percentage')) {
+        if (document.getElementById('surcharge_percentage') || document.getElementById('surcharge_flatfee')) {
           surcharge = (+what.value * +document.getElementById('surcharge_percentage').value) + +document.getElementById('surcharge_flatfee').value;
         }
         else { surcharge = 0; }
@@ -66,32 +84,43 @@ Example:
         document.getElementById('amount').disabled = true;
 
         if ( what.value == 'select' ) {
-        	document.getElementById('payment_amount_row').style.display = 'none';
-        	document.getElementById('invoice_row').style.display = 'none';
-          document.getElementById('<% $opt{prefix} %>invoice').value = 'select';
-        	document.getElementById('amount').value = '';
+          $('#payment_amount_row').hide();
+          $('#invoice_row').hide();
+          $("#<% $opt{prefix} %>invoice").val('select');
+          $('#amount').val('');
         }
         else if ( what.value == 'invoice' ) {
-        	document.getElementById('payment_amount_row').style.display = 'none';
-        	document.getElementById('invoice_row').style.display = 'block';
-        	document.getElementById('amount').value = '';
+          $('#payment_amount_row').hide();
+          $('#invoice_row').show();
+          $('#apply_box_row').hide();
+          $('#apply_box').val('yes');
+          $("#<% $opt{prefix} %>payment_option option[value='select']").remove();
+          var selectExists = ($("#<% $opt{prefix} %>invoice option[value='select']").length > 0);
+          if(!selectExists) {
+            $("#<% $opt{prefix} %>invoice").prepend("<option value='select'>Select an invoice to pay</option>");
+            $("#<% $opt{prefix} %>invoice").val($('option:first', "#<% $opt{prefix} %>invoice").val());
+          }
+          $('#amount').val('');
         }
         else if ( what.value == 'specific' ) {
-          document.getElementById('payment_amount_row').style.display = 'block';
-          document.getElementById('invoice_row').style.display = 'none';
-          document.getElementById('<% $opt{prefix} %>invoice').value = 'select';
-          document.getElementById('amount').value = '0.00';
+          $('#payment_amount_row').show();
+          $('#invoice_row').hide();
+          $('#apply_box_row').show();
+          $("#<% $opt{prefix} %>payment_option option[value='select']").remove();
+          $('#amount').val('0.00');
           document.getElementById('amount').disabled = false;
           if (document.getElementById('ajax_surcharge_cell')) {
             document.getElementById('ajax_surcharge_cell').innerHTML = '<FONT SIZE="+1">A credit card surcharge of <% $money_char %>0.00 is included in this payment</FONT>';
           }
         }
         else {
-        	document.getElementById('payment_amount_row').style.display = 'block';
-        	document.getElementById('invoice_row').style.display = 'none';
-          document.getElementById('<% $opt{prefix} %>invoice').value = 'select';
-          document.getElementById('amount').value = amount.toFixed(2);
-          document.getElementById('amount').disabled = false;
+          $('#payment_amount_row').show();
+          $('#invoice_row').hide();
+          $('#apply_box_row').hide();
+          $('#apply_box').val('yes');
+          $("#<% $opt{prefix} %>payment_option option[value='select']").remove();
+          $('#amount').val(amount.toFixed(2));
+          document.getElementById('amount').disabled = true;
           if (document.getElementById('ajax_surcharge_cell')) {
             document.getElementById('ajax_surcharge_cell').innerHTML = '<FONT SIZE="+1">A credit card surcharge of <% $money_char %>' + surcharge.toFixed(2) + ' is included in this payment</FONT>';
           }
@@ -102,21 +131,21 @@ Example:
       function <% $opt{prefix} %>invoice_select_changed(what) {
 
         var surcharge;
-        if (document.getElementById('surcharge_percentage') || document.getElementById('surcharge_percentage')) {
+        if (document.getElementById('surcharge_percentage') || document.getElementById('surcharge_flatfee')) {
           surcharge = (+what.value * +document.getElementById('surcharge_percentage').value) + +document.getElementById('surcharge_flatfee').value;
         }
         else { surcharge = 0; }
         var amount = +what.value + +surcharge;
 
         if ( what.value == 'select' ) {
-          alert("we have select");
-        	document.getElementById('payment_amount_row').style.display = 'none';
-        	document.getElementById('amount').value = '';
+          $('#payment_amount_row').hide();
+          $('#amount').val('');
         }
         else {
-        	document.getElementById('payment_amount_row').style.display = 'block';
-          document.getElementById('amount').value = amount.toFixed(2);
-          document.getElementById('amount').disabled = false;
+          $('#payment_amount_row').show();
+          $("#<% $opt{prefix} %>invoice option[value='select']").remove();
+          $('#amount').val(amount.toFixed(2));
+          document.getElementById('amount').disabled = true;
           if (document.getElementById('ajax_surcharge_cell')) {
             document.getElementById('ajax_surcharge_cell').innerHTML = '<FONT SIZE="+1">A credit card surcharge of <% $money_char %>' + surcharge.toFixed(2) + ' is included in this payment</FONT>';
           }
@@ -130,6 +159,20 @@ Example:
 
 my %opt = @_;
 
+my $cust_main = $opt{'cust_main'};
+my $amount = $opt{'amount'} ? $opt{'amount'} : $cust_main->balance;
+my $custnum = $cust_main->custnum;
+
+my @open_invoices = $cust_main->open_cust_bill;
+
+my $payment_option_row = "show";
+my $payment_amount_row = "hide";
+
+unless ($amount > 0 && @open_invoices) {
+  $payment_option_row = "hide";
+  $payment_amount_row = "show";
+}
+
 my $conf = new FS::Conf;
 my $money_char = $conf->config('money_char') || '$';
 
diff --git a/httemplate/misc/payment.cgi b/httemplate/misc/payment.cgi
index 80cb15d79..77f5acd6a 100644
--- a/httemplate/misc/payment.cgi
+++ b/httemplate/misc/payment.cgi
@@ -13,8 +13,7 @@
 <TABLE class="fsinnerbox">
 
   <& /elements/tr-select-payment_options.html,
-       'custnum'            => $cust_main->custnum,
-       'amount'             => $balance,
+       'cust_main'          => $cust_main,
        'process-pkgpart'    => 
           scalar($conf->config('manual_process-pkgpart', $cust_main->agentnum)),
        'process-display'    => scalar($conf->config('manual_process-display')),
@@ -102,6 +101,11 @@ function change_batch_checkbox () {
        $('#cust_payby').slideUp();
     }
   }
+
+  function enableAmountField() {
+    document.getElementById('amount').disabled = false;
+  }
+
 </SCRIPT>
 
 % #can't quite handle CARD/CHEK on the same page yet, but very close
@@ -144,9 +148,49 @@ function change_batch_checkbox () {
 </DIV>
 
 <BR>
-<INPUT TYPE="submit" NAME="process" VALUE="<% mt('Process payment') |h %>">
+<INPUT TYPE="submit" NAME="process" ID="process" VALUE="<% mt('Process payment') |h %>" disabled="disabled" onclick="enableAmountField()">
 </FORM>
 
+<SCRIPT TYPE="text/javascript">
+
+$(document).ready(function (){
+    validate();
+    $('<% $validate_select_fields %>').change(validate);
+    $('<% $validate_input_fields %>').keyup(validate);
+});
+
+function validate(){
+    if (
+      $('#amount').val() > 0 && (
+        ( $('#custpaybynum').val() > 0 ) ||
+% if ($payby eq "CHEK") {
+        ( $('input[name=payinfo1]').val().length > 0 &&
+          $('input[name=payinfo2]').val().length > 0 &&
+          $('input[name=payname]').val().length > 0  &&
+          $('select[name=paytype]').val().length > 0
+        )
+% }
+% elsif ($payby eq "CARD") {
+        ( $('input[name=payinfo]').val().length > 0 &&
+          $('input[name=paycvv]').val().length > 0 &&
+          $('input[name=payname]').val().length > 0 &&
+          $('#city').val().length > 0 &&
+          $('#city').val().length > 0 &&
+          $('#state').val().length > 0 &&
+          $('#country').val().length > 0
+        )
+% }
+      )
+     ) {
+        $("#process").prop("disabled", false);
+    }
+    else {
+        $("#process").prop("disabled", true);
+    }
+}
+
+</SCRIPT>
+
 <& /elements/footer-cust_main.html &>
 <%once>
 
@@ -174,6 +218,17 @@ $cgi->param('payby') =~ /^(CARD|CHEK)$/
   or die "unknown payby ". $cgi->param('payby');
 my $payby = $1;
 
+my $validate_select_fields = "#payment_option, #invoice, #custpaybynum, ";
+my $validate_input_fields  = "#amount, input[name=payname], ";
+if ($payby eq "CHEK") {
+  $validate_input_fields  .= "input[name=payinfo1], input[name=payinfo2]";
+  $validate_select_fields .= "select[name=paytype] ";
+}
+elsif ($payby eq "CARD") {
+  $validate_input_fields  .= "input[name=payinfo], input[name=paycvv], input[name=address1], #city, #zip";
+  $validate_select_fields .= "#state, #country ";
+}
+
 $cgi->param('custnum') =~ /^(\d+)$/
   or die "illegal custnum ". $cgi->param('custnum');
 my $custnum = $1;