start on cc payments

diff --git a/Open-ILS/web/css/skin/default/opac/semiauto.css b/Open-ILS/web/css/skin/default/opac/semiauto.css
index 81d8632..e4e9eb7 100644 (file)
--- a/Open-ILS/web/css/skin/default/opac/semiauto.css
+++ b/Open-ILS/web/css/skin/default/opac/semiauto.css
@@ -131,7 +131,7 @@
 .opac-auto-145 { position: relative; top: -3px; left: 3px; }
 .opac-auto-146 { position: relative; top: -3px; left: -5px; }
 .opac-auto-147 { position: relative; top: -5px; }
-#learn_more { position: relative; top: 5px; }
+.pos-rel-top-5 { position: relative; top: 5px; }
 .opac-auto-149 { position: relative; top: 5px; left: 25px; }
 #util_print_btn { position: relative; top: 5px; left: 30px; }
 .opac-auto-151 { position: relative; top: 75px; }

diff --git a/Open-ILS/web/css/skin/default/opac/style.css b/Open-ILS/web/css/skin/default/opac/style.css
index edae0eb..c0a9004 100644 (file)
--- a/Open-ILS/web/css/skin/default/opac/style.css
+++ b/Open-ILS/web/css/skin/default/opac/style.css
@@ -987,7 +987,7 @@ a.dash-link:hover { text-decoration: underline !important; }
 .hold-editor-controls { text-align: center; padding-top: 1em !important; }
 .hold-editor-controls a { padding-left: 2em; }
 
-#rdetail_cn_browse_div { text-align: center; }
+.text-right { text-align: right; }
 .rdetail-author-div { padding-bottom: 10px; }
 
 .invisible { visibility: hidden; }

diff --git a/Open-ILS/web/templates/default/opac/myopac/main.tt2 b/Open-ILS/web/templates/default/opac/myopac/main.tt2
index 1c707c8..b187f0d 100644 (file)
--- a/Open-ILS/web/templates/default/opac/myopac/main.tt2
+++ b/Open-ILS/web/templates/default/opac/myopac/main.tt2
@@ -4,7 +4,7 @@
     myopac_page = "main";
     myopac_main_page = "main";
 %]
-
+<form action="[% ctx.opac_root %]/myopac/main_pay" method="POST">
     [% IF ctx.fines.circulation.size > 0 %]
     <div id='myopac_circ_trans_div'>
         <table width='100%' class='data_grid'>
@@ -21,13 +21,11 @@
                     <td>[% l("Due Date") %]</td>
                     <td>[% l("Date Returned") %]</td>
                     <td>[% l("Balance Owed") %]</td>
-                    <!-- TODO: hidden until pay-fines is implemented
                     <td nowrap="nowrap" style="white-space:nowrap;">
-                        <input id="pay_fines_box1" checked="checked"
+                        <!-- XXX TODO select all js --><input id="pay_fines_box1" checked="checked"
                             type="checkbox" title="[% l('Click to (un)select all fines') %]" />
                         <label for="pay_fines_box1">[% l('Pay Fines') %]</label>
                     </td>
-                    -->
                 </tr>
             </thead>
             <tbody id='myopac_circ_trans_tbody'>
@@ -78,11 +76,9 @@
                             [% money(f.xact.balance_owed) %]
                         </strong>
                     </td>
-                    <!-- TODO: hidden until pay-fines is implemented
                     <td>
                         <input type="checkbox" name="selector" title="[% l('Pay this fine') %]" />
                     </td>
-                    -->
                 </tr>
                 [% END %]
             </tbody>
@@ -111,7 +107,6 @@
                     <td width='16%'>[% l("Total Amount Paid") %]</td>
                     <td width='16%'>[% l("Balance Owed") %]</td>
                     <td width='16%'>[% l("Billing Type") %]</td>
-                    <!-- TODO: hidden until pay-fines is implemented
                     <td width='4%' align="center" nowrap="nowrap"
                         style="white-space:nowrap;">
                         <input id="pay_fines_box2" checked="checked"
@@ -119,7 +114,6 @@
                             title="[% l('Click to (un)select all fines') %]" />
                         <label for="pay_fines_box2">[% l("Pay Fines") %]</label>
                     </td>
-                    -->
                 </tr>
             </thead>
             <tbody id='myopac_trans_tbody'>
@@ -146,166 +140,22 @@
                         </strong>
                     </td>
                     <td>[% f.xact.last_billing_type %]</td>
-                    <!-- TODO: hidden until pay-fines is implemented
                     <td>
                         <input type="checkbox" name='selector' title='[% l("Pay this fine") %]'/>
                     </td>
-                    -->
                 </tr>
                 [% END %]
             </tbody>
         </table>
     </div>
     [% END %]
-
-<!-- TODO: move payment form to its own page -->
-
-<div id="pay_fines_now" class="hide_me">
-    <table id='oils-selfck-cc-payment-table'>
-        <tbody>
-            <tr>
-                <td><div style="width:129px;"></div></td>
-                <td><div style="width:195px;"></div></td>
-                <td><div style="width:324px;"></div></td>
-            </tr>
-            <tr>
-                <td colspan='2'><strong>Billing Information</strong></td>
-                <td rowspan='13' valign='top'>
-                    Selected fines you are paying for:
-                    <table cellpadding="0" cellspacing="5" border="0">
-                        <thead>
-                            <tr>
-                                <td>
-                                    <strong>Name</strong>
-                                </td>
-                                <td>
-                                    <strong>Amount</strong>
-                                </td>
-                            </tr>
-                        </thead>
-                        <tbody id="selectedFines">
-                        </tbody>
-                    </table>
-                    <br />
-                    <div id='oils-selfck-cc-payment-summary'>
-                        Total amount to pay:
-                        <strong>$<span></span></strong>
-                    </div>
-                    <br />
-                    Click <strong>Cancel</strong> to go back and (un)select
-                    other fines.
-                </td>
-            </tr>
-            <tr>
-                <td>First Name</td>
-                <td><input jsId='oilsSelfckCCFName' /></td>
-            </tr>
-            <tr>
-                <td>Last Name</td>
-                <td><input jsId='oilsSelfckCCLName' /></td>
-            </tr>
-            <tr>
-                <td>Street Address</td>
-                <td><input jsId='oilsSelfckCCStreet' /></td>
-            </tr>
-            <tr>
-                <td>City</td>
-                <td><input jsId='oilsSelfckCCCity' /></td>
-            </tr>
-            <tr>
-                <td>State or Province</td>
-                <td><input jsId='oilsSelfckCCState' /></td>
-            </tr>
-            <tr>
-                <td>ZIP or Postal Code</td>
-                <td><input jsId='oilsSelfckCCZip' /></td>
-            </tr>
-            <tr>
-              <td colspan='2'><strong>Credit Card Information</strong></td>
-            </tr>
-            <!-- Technically not needed since card type is derived from the CC number
-            <tr>
-                <td>Type of Card</td>
-                <td>
-                    <select jsId='oilsSelfckCCType' required='true'>
-                        <option value='VISA'>VISA</option>
-                        <option value='MasterCard'>MasterCard</option>
-                        <option value='American Express'>American Express</option>
-                    </select>
-                </td>
-            </tr>
-            -->
-            <tr>
-                <td>Credit Card #</td>
-                <td><input jsId='oilsSelfckCCNumber' /></td>
-            </tr>
-            <tr>
-                <td>
-                    <div style="position:absolute;">
-                        <div style="position:relative;left:80px;">
-                            <a href="#"><img
-                                src="[% ctx.media_prefix %]/images/question-mark.png" /></a>
-                        </div>
-                    </div>
-                    Security Code
-                </td>
-                <td>
-                    <input jsId='oilsSelfckCCCVV' />
-                </td>
-            </tr>
-            <tr>
-                <td>Exipration Month</td>
-                <td>
-                    <select jsId='oilsSelfckCCMonth'>
-                        <option value='01' selected='selected'>January</option>
-                        <option value='02'>February</option>
-                        <option value='03'>March</option>
-                        <option value='04'>April</option>
-                        <option value='05'>May</option>
-                        <option value='06'>June</option>
-                        <option value='07'>July</option>
-                        <option value='08'>August</option>
-                        <option value='09'>September</option>
-                        <option value='10'>October</option>
-                        <option value='11'>November</option>
-                        <option value='12'>December</option>
-                    </select>
-                </td>
-            </tr>
-            <tr>
-                <td>Expiration Year</td>
-                <td>
-                  <select jsId='oilsSelfckCCYear'>
-                    <option value='2011'>2011</option>
-                    <option value='2012'>2012</option>
-                    <option value='2013'>2013</option>
-                    <option value='2014'>2014</option>
-                    <option value='2015'>2015</option>
-                    <option value='2016'>2016</option>
-                    <option value='2017'>2017</option>
-                    <option value='2018'>2018</option>
-                    <option value='2019'>2019</option>
-                  </select>
-                </td>
-            </tr>
-            <tr class="hide_me">
-                <td>Edit Billing Address</td>
-                <td>
-                    <input jsId='oilsSelfckEditDetails'/>
-                </td>
-            </tr>
-            <tr>
-                <td colspan='2' align="center">
-                    <button jsId='oilsSelfckCCSubmit'>
-                        Submit Payment
-                    </button>
-                    <button>
-                        Cancel
-                    </button>
-                </td>
-            </tr>
-            [% INCLUDE "default/opac/myopac/main_refund_policy.tt2" %]
-        </tbody>
-    </table>
-</div>
+    <div class="text-right pad-top-ten">
+        <input type="image"
+            alt="[% l('Pay selected fines') %]"
+            title="[% l('Pay selected fines') %]"
+            onmouseover="this.src='[% ctx.media_prefix %]/images/pay-fines-btn-hover.png';"
+            onmouseout="this.src='[% ctx.media_prefix %]/images/pay-fines-btn.png';"
+            src="[% ctx.media_prefix %]/images/pay-fines-btn.png" />
+    </div>
+</form>
 [% END %]

diff --git a/Open-ILS/web/templates/default/opac/myopac/main_pay.tt2 b/Open-ILS/web/templates/default/opac/myopac/main_pay.tt2
new file mode 100644 (file)
index 0000000..ff9b512
--- /dev/null
+++ b/Open-ILS/web/templates/default/opac/myopac/main_pay.tt2
@@ -0,0 +1,158 @@
+[%  PROCESS "default/opac/parts/header.tt2";
+    PROCESS "default/opac/parts/misc_util.tt2";
+    WRAPPER "default/opac/parts/myopac/main_base.tt2";
+    myopac_page = "main";
+    myopac_main_page = "pay";
+
+    # XXX When we get no parameters, we're in "pay everything" mode.
+    # When we get paramters, they refer to the fines that we'll be paying
+%]
+<div id="pay_fines_now">
+    <table id='oils-selfck-cc-payment-table'>
+        <tbody>
+            <tr>
+                <td><div style="width:129px;"></div></td>
+                <td><div style="width:195px;"></div></td>
+                <td><div style="width:324px;"></div></td>
+            </tr>
+            <tr>
+                <td colspan='2'><strong>Billing Information</strong></td>
+                <td rowspan='13' valign='top'>
+                    Selected fines you are paying for:
+                    <table cellpadding="0" cellspacing="5" border="0">
+                        <thead>
+                            <tr>
+                                <td>
+                                    <strong>Name</strong>
+                                </td>
+                                <td>
+                                    <strong>Amount</strong>
+                                </td>
+                            </tr>
+                        </thead>
+                        <tbody id="selectedFines">
+                        </tbody>
+                    </table>
+                    <br />
+                    <div id='oils-selfck-cc-payment-summary'>
+                        Total amount to pay:
+                        <strong>$<span></span></strong>
+                    </div>
+                    <br />
+                    Click <strong>Cancel</strong> to go back and (un)select
+                    other fines.
+                </td>
+            </tr>
+            <tr>
+                <td>First Name</td>
+                <td><input jsId='oilsSelfckCCFName' /></td>
+            </tr>
+            <tr>
+                <td>Last Name</td>
+                <td><input jsId='oilsSelfckCCLName' /></td>
+            </tr>
+            <tr>
+                <td>Street Address</td>
+                <td><input jsId='oilsSelfckCCStreet' /></td>
+            </tr>
+            <tr>
+                <td>City</td>
+                <td><input jsId='oilsSelfckCCCity' /></td>
+            </tr>
+            <tr>
+                <td>State or Province</td>
+                <td><input jsId='oilsSelfckCCState' /></td>
+            </tr>
+            <tr>
+                <td>ZIP or Postal Code</td>
+                <td><input jsId='oilsSelfckCCZip' /></td>
+            </tr>
+            <tr>
+              <td colspan='2'><strong>Credit Card Information</strong></td>
+            </tr>
+            <!-- Technically not needed since card type is derived from the CC number
+            <tr>
+                <td>Type of Card</td>
+                <td>
+                    <select jsId='oilsSelfckCCType' required='true'>
+                        <option value='VISA'>VISA</option>
+                        <option value='MasterCard'>MasterCard</option>
+                        <option value='American Express'>American Express</option>
+                    </select>
+                </td>
+            </tr>
+            -->
+            <tr>
+                <td>Credit Card #</td>
+                <td><input jsId='oilsSelfckCCNumber' /></td>
+            </tr>
+            <tr>
+                <td>
+                    <div style="position:absolute;">
+                        <div style="position:relative;left:80px;">
+                            <a href="#"><img
+                                src="[% ctx.media_prefix %]/images/question-mark.png" /></a>
+                        </div>
+                    </div>
+                    Security Code
+                </td>
+                <td>
+                    <input jsId='oilsSelfckCCCVV' />
+                </td>
+            </tr>
+            <tr>
+                <td>Exipration Month</td>
+                <td>
+                    <select jsId='oilsSelfckCCMonth'>
+                        <option value='01' selected='selected'>January</option>
+                        <option value='02'>February</option>
+                        <option value='03'>March</option>
+                        <option value='04'>April</option>
+                        <option value='05'>May</option>
+                        <option value='06'>June</option>
+                        <option value='07'>July</option>
+                        <option value='08'>August</option>
+                        <option value='09'>September</option>
+                        <option value='10'>October</option>
+                        <option value='11'>November</option>
+                        <option value='12'>December</option>
+                    </select>
+                </td>
+            </tr>
+            <tr>
+                <td>Expiration Year</td>
+                <td>
+                  <select jsId='oilsSelfckCCYear'>
+                    <option value='2011'>2011</option>
+                    <option value='2012'>2012</option>
+                    <option value='2013'>2013</option>
+                    <option value='2014'>2014</option>
+                    <option value='2015'>2015</option>
+                    <option value='2016'>2016</option>
+                    <option value='2017'>2017</option>
+                    <option value='2018'>2018</option>
+                    <option value='2019'>2019</option>
+                  </select>
+                </td>
+            </tr>
+            <tr class="hide_me">
+                <td>Edit Billing Address</td>
+                <td>
+                    <input jsId='oilsSelfckEditDetails'/>
+                </td>
+            </tr>
+            <tr>
+                <td colspan='2' align="center">
+                    <button jsId='oilsSelfckCCSubmit'>
+                        Submit Payment
+                    </button>
+                    <button>
+                        Cancel
+                    </button>
+                </td>
+            </tr>
+            [% INCLUDE "default/opac/myopac/main_refund_policy.tt2" %]
+        </tbody>
+    </table>
+</div>
+[% END %]

diff --git a/Open-ILS/web/templates/default/opac/parts/myopac/main_base.tt2 b/Open-ILS/web/templates/default/opac/parts/myopac/main_base.tt2
index 0676ee9..da0a088 100644 (file)
--- a/Open-ILS/web/templates/default/opac/parts/myopac/main_base.tt2
+++ b/Open-ILS/web/templates/default/opac/parts/myopac/main_base.tt2
@@ -36,13 +36,12 @@
             [% money(ctx.user_stats.fines.balance_owed) %]
         </span><br />
 
-        [%# TODO %]
-        <a class="hide_me" href="#" id="pay_fines_btn1"><img
-            alt="[% l('Pay Fines') %]"
+        <form action="[% ctx.opac_root %]/myopac/main_pay" method="POST"><input
+            type="image" title="[% l('Pay Fines') %]" alt="[% l('Pay Fines') %]"
             onmouseover="this.src='[% ctx.media_prefix %]/images/pay-fines-btn-hover.png';"
             onmouseout="this.src='[% ctx.media_prefix %]/images/pay-fines-btn.png';"
             src="[% ctx.media_prefix %]/images/pay-fines-btn.png"
-            style="position:relative;top:5px;" /></a>
+            class="pos-rel-top-5" /></form>
     </div>
 
     <div style="width:662px;">