From aa2cb98c347122ca883cfe428edf3919f59fc3d5 Mon Sep 17 00:00:00 2001
From: Christopher Burger <burgerc@freeside.biz>
Date: Wed, 18 Jul 2018 10:50:35 -0400
Subject: RT# 34134 - updated UI experience

---
 httemplate/elements/tr-amount_fee.html             |  19 ++--
 httemplate/elements/tr-select-invoice.html         |  21 ++--
 httemplate/elements/tr-select-payment_options.html | 117 ++++++++++++++-------
 3 files changed, 103 insertions(+), 54 deletions(-)

(limited to 'httemplate/elements')

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') || '$';
 
-- 
cgit v1.2.1