diff --git a/css/reskin-2/paymentHistory.css b/css/reskin-2/paymentHistory.css index 09e9de1ac..761a0b460 100644 --- a/css/reskin-2/paymentHistory.css +++ b/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; diff --git a/js/reskin/newTCScript.js b/js/reskin/newTCScript.js index 6af95d013..7b7167412 100644 --- a/js/reskin/newTCScript.js +++ b/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) {