Reskin payment improvements

css/reskin-2/paymentHistory.css

@@ -4,7 +4,7 @@ body {
   background-color: var(--tc-white);
 }
 
-.bigRed { 
+.bigRed {
   color: red;
 }
 
@@ -281,12 +281,46 @@ body {
 
 /* **************** View-All, View Pending **************** */
 
+.above-tabs {
+  width: 100%;
+}
+  .above-tabs .pay-me-btn {
+    padding-bottom: 24px;
+  }
+    .above-tabs .pay-me-btn input[type="button"] {
+      text-transform: uppercase;
+      padding: 8px 24px;
+      border: 0;
+      border-radius: 24px;
+      cursor: pointer;
+
+      font-family: Roboto;
+      font-weight: 700;
+      font-size: 14px;
+      line-height: 24px;
+      letter-spacing: 0.008em;
+
+      color: var(--tc-white);
+      background-color: var(--green);
+    }
+      .above-tabs .pay-me-btn input[type="button"]:disabled {
+        color: var(--grey-1);
+        background-color: var(--black-5);
+        cursor: default;
+      }
+    @media (max-width: /* --sm-max */ 959px) {
+      .above-tabs .pay-me-btn {
+        padding-bottom: 16px;
+      }
+    }
+
 #payments > br { display: none; }
 
 .form-container {
   display: flex;
   flex-direction: column;
-  padding-top: 24px;
+  /* padding-top: 24px; */
+  padding-top: 8px;
 }
   .form-container br {
     display: none;
@@ -391,7 +425,8 @@ body {
           text-decoration: none;
           display: inline-flex;
           align-items: center;
-          padding: 0 16px 8px;
+          /* padding: 0 16px 8px; */
+          padding: 16px;
         }
           .form-container .payment-table tbody tr.headerRow td a::after {
             content: url('/i/reskin-2/sortable.svg');
@@ -1081,6 +1116,59 @@ body {
     }
   }
 
+.mobile-select-all-checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background-color: var(--black-5);
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+  .mobile-select-all-checkbox .checkbox {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+  }
+    .mobile-select-all-checkbox .checkbox input[type="checkbox"] {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0;
+      cursor: pointer;
+    }
+      .mobile-select-all-checkbox .checkbox input[type="checkbox"] ~ .checkbox-label {
+      }
+        .mobile-select-all-checkbox .checkbox input[type="checkbox"] ~ .checkbox-label::before {
+          content: '';
+          display: block;
+          width: 20px;
+          height: 20px;
+          background-color: #fff;
+          border: 1.52px solid #7f7f7f;
+          border-radius: 3px;
+          box-sizing: border-box;
+        }
+        .mobile-select-all-checkbox .checkbox input[type="checkbox"] ~ .checkbox-label::after {
+          content: url('/i/reskin-2/checkbox.svg');
+          display: none;
+          box-sizing: border-box;
+        }
+        .mobile-select-all-checkbox .checkbox input[type="checkbox"]:checked ~ .checkbox-label::before {
+          display: none;
+        }
+        .mobile-select-all-checkbox .checkbox input[type="checkbox"]:checked ~ .checkbox-label::after {
+          display: block;
+        }
+  @media (min-width: /* --md-min */ 960px) {
+    .mobile-select-all-checkbox {
+      display: none;
+    }
+  }
+
 .mobile-payments-sort-button {
   display: inline-flex;
   align-items: center;

js/reskin/newTCScript.js

@@ -378,6 +378,19 @@ function updatePayMe() {
     }
 }
 
+/**
+ * Updates the text of Quick Pay Me button with total amount of owed payments.
+ */
+function updateQuickPayMe() {
+    var total = totalOwedPayments;
+    $('#quickPayMe').val('Pay Me: $' + total.toFixed(2));
+    if (total < MINIMUM_PAYMENT_ACCRUAL_AMOUNT) {
+        $('#quickPayMe').attr('disabled', 'disabled');
+    } else {
+        $('#quickPayMe').removeAttr('disabled');
+    }
+}
+
 /**
  * Calculates the total amount of payments selected by user.
  *
@@ -608,13 +621,22 @@ $(document).ready(function() {
 
 
     // payment page
-    $('.uncheckAll').click(function() {
-        $('.uncheckable').attr('checked', false);
-        updatePayMe();
-    });
+    // $('.uncheckAll').click(function() {
+    //     $('.uncheckable').attr('checked', false);
+    //     updatePayMe();
+    // });
 
     $('.checkAll').click(function () {
-        $('.checkable').attr('checked', true);
+        if (this.checked) {
+            $('.checkable').attr('checked', true);
+            var total = calcTotalPayment()
+            if (total > 25) {
+                $('.bigRed').prev().remove();
+                $('.bigRed').remove();
+            }
+        } else {
+            $('.uncheckable').attr('checked', false);
+        }
         updatePayMe();
     });
 
@@ -678,6 +700,66 @@ $(document).ready(function() {
         }
     });
 
+    $('#quickPayMe').click(function() {
+        var total = totalOwedPayments;
+        var confirmationMessage = PAY_ME_CONFIRMATION_TEMPLATE.replace('{0}', '$' + total.toFixed(2));
+
+        var isNativeDialog = $('#payment-confirm-modal-id').length === 0;
+
+        if (isNativeDialog) {
+            if (confirm(confirmationMessage)) {
+                var myForm = document.f;
+                myForm.method = 'POST';
+                myForm.module.value = 'PayMe';
+                myForm.submit();
+            }
+        } else {
+            var resultPromise = new Promise(function (resolve) {
+                $('#payment-confirm-modal-id .modal-body').text(confirmationMessage);
+                document.body.style.overflow = 'hidden';
+
+                function onCancel () {
+                    document.body.style.overflow = '';
+                    $('#payment-confirm-modal-id').removeClass('show');
+                    $('#payment-confirm-modal-id .close-btn').off('click');
+                    $('#payment-confirm-modal-id .button-secondary').off('click');
+                    $('#payment-confirm-modal-id .button-primary').off('click');
+                    resolve(false);
+                }
+                function onOk () {
+                    document.body.style.overflow = '';
+                    $('#payment-confirm-modal-id').removeClass('show');
+                    $('#payment-confirm-modal-id .close-btn').off('click');
+                    $('#payment-confirm-modal-id .button-secondary').off('click');
+                    $('#payment-confirm-modal-id .button-primary').off('click');
+                    resolve(true);
+                }
+
+                $('#payment-confirm-modal-id').addClass('show');
+                $('#payment-confirm-modal-id .close-btn').one('click', onCancel);
+                $('#payment-confirm-modal-id .button-secondary').one('click', onCancel);
+                $('#payment-confirm-modal-id .button-primary').one('click', onOk);
+            });
+
+            resultPromise.then(function (ok) {
+                if (ok) {
+                    var myForm = document.f;
+                    myForm.method = 'POST';
+                    myForm.module.value = 'PayMe';
+                    for (var i = 0; i < owedPayments.length; i++) {
+                        var paymentId = owedPayments[i]
+                        var input = document.createElement('input');
+                        input.type = 'hidden';
+                        input.value = paymentId;
+                        input.name = 'paymentId';
+                        myForm.appendChild(input);
+                    }
+                    myForm.submit();
+                }
+            })
+        }
+    });
+
     $('.getable').click(function () {
         var myForm = document.f;
         myForm.method = 'GET';
@@ -688,6 +770,8 @@ $(document).ready(function() {
 
     updatePayMe();
 
+    updateQuickPayMe();
+
     $('.buttonArea .register').click(function(){
         // the 'isAnonymous' is defined in the projectDetails.jsp file
         if(!isAnonymous) {