Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit 9bd079e

Browse files
dedywahyudidedywahyudi
authored
Merge pull request #3 from topcoder-platform/reskin-payment
Reskin payment improvements
2 parents 037e7b9 + c5fa2f9 commit 9bd079e

File tree

2 files changed

+180
-8
lines changed

2 files changed

+180
-8
lines changed

‎css/reskin-2/paymentHistory.css

Lines changed: 91 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ body {
44
background-color: var(--tc-white);
55
}
66

7-
.bigRed {
7+
.bigRed {
88
color: red;
99
}
1010

@@ -281,12 +281,46 @@ body {
281281

282282
/* **************** View-All, View Pending **************** */
283283

284+
.above-tabs {
285+
width: 100%;
286+
}
287+
.above-tabs .pay-me-btn {
288+
padding-bottom: 24px;
289+
}
290+
.above-tabs .pay-me-btn input[type="button"] {
291+
text-transform: uppercase;
292+
padding: 8px 24px;
293+
border: 0;
294+
border-radius: 24px;
295+
cursor: pointer;
296+
297+
font-family: Roboto;
298+
font-weight: 700;
299+
font-size: 14px;
300+
line-height: 24px;
301+
letter-spacing: 0.008em;
302+
303+
color: var(--tc-white);
304+
background-color: var(--green);
305+
}
306+
.above-tabs .pay-me-btn input[type="button"]:disabled {
307+
color: var(--grey-1);
308+
background-color: var(--black-5);
309+
cursor: default;
310+
}
311+
@media (max-width: /* --sm-max */ 959px) {
312+
.above-tabs .pay-me-btn {
313+
padding-bottom: 16px;
314+
}
315+
}
316+
284317
#payments > br { display: none; }
285318

286319
.form-container {
287320
display: flex;
288321
flex-direction: column;
289-
padding-top: 24px;
322+
/* padding-top: 24px; */
323+
padding-top: 8px;
290324
}
291325
.form-container br {
292326
display: none;
@@ -391,7 +425,8 @@ body {
391425
text-decoration: none;
392426
display: inline-flex;
393427
align-items: center;
394-
padding: 0 16px 8px;
428+
/* padding: 0 16px 8px; */
429+
padding: 16px;
395430
}
396431
.form-container .payment-table tbody tr.headerRow td a::after {
397432
content: url('/i/reskin-2/sortable.svg');
@@ -1081,6 +1116,59 @@ body {
10811116
}
10821117
}
10831118

1119+
.mobile-select-all-checkbox {
1120+
display: inline-flex;
1121+
align-items: center;
1122+
justify-content: center;
1123+
width: 40px;
1124+
height: 40px;
1125+
background-color: var(--black-5);
1126+
border-radius: 4px;
1127+
box-sizing: border-box;
1128+
}
1129+
.mobile-select-all-checkbox .checkbox {
1130+
position: relative;
1131+
display: inline-flex;
1132+
align-items: center;
1133+
}
1134+
.mobile-select-all-checkbox .checkbox input[type="checkbox"] {
1135+
position: absolute;
1136+
top: 0;
1137+
left: 0;
1138+
width: 100%;
1139+
height: 100%;
1140+
opacity: 0;
1141+
cursor: pointer;
1142+
}
1143+
.mobile-select-all-checkbox .checkbox input[type="checkbox"] ~ .checkbox-label {
1144+
}
1145+
.mobile-select-all-checkbox .checkbox input[type="checkbox"] ~ .checkbox-label::before {
1146+
content: '';
1147+
display: block;
1148+
width: 20px;
1149+
height: 20px;
1150+
background-color: #fff;
1151+
border: 1.52px solid #7f7f7f;
1152+
border-radius: 3px;
1153+
box-sizing: border-box;
1154+
}
1155+
.mobile-select-all-checkbox .checkbox input[type="checkbox"] ~ .checkbox-label::after {
1156+
content: url('/i/reskin-2/checkbox.svg');
1157+
display: none;
1158+
box-sizing: border-box;
1159+
}
1160+
.mobile-select-all-checkbox .checkbox input[type="checkbox"]:checked ~ .checkbox-label::before {
1161+
display: none;
1162+
}
1163+
.mobile-select-all-checkbox .checkbox input[type="checkbox"]:checked ~ .checkbox-label::after {
1164+
display: block;
1165+
}
1166+
@media (min-width: /* --md-min */ 960px) {
1167+
.mobile-select-all-checkbox {
1168+
display: none;
1169+
}
1170+
}
1171+
10841172
.mobile-payments-sort-button {
10851173
display: inline-flex;
10861174
align-items: center;

‎js/reskin/newTCScript.js

Lines changed: 89 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -378,6 +378,19 @@ function updatePayMe() {
378378
}
379379
}
380380

381+
/**
382+
* Updates the text of Quick Pay Me button with total amount of owed payments.
383+
*/
384+
function updateQuickPayMe() {
385+
var total = totalOwedPayments;
386+
$('#quickPayMe').val('Pay Me: $' + total.toFixed(2));
387+
if (total < MINIMUM_PAYMENT_ACCRUAL_AMOUNT) {
388+
$('#quickPayMe').attr('disabled', 'disabled');
389+
} else {
390+
$('#quickPayMe').removeAttr('disabled');
391+
}
392+
}
393+
381394
/**
382395
* Calculates the total amount of payments selected by user.
383396
*
@@ -608,13 +621,22 @@ $(document).ready(function() {
608621

609622

610623
// payment page
611-
$('.uncheckAll').click(function() {
612-
$('.uncheckable').attr('checked', false);
613-
updatePayMe();
614-
});
624+
// $('.uncheckAll').click(function() {
625+
// $('.uncheckable').attr('checked', false);
626+
// updatePayMe();
627+
// });
615628

616629
$('.checkAll').click(function () {
617-
$('.checkable').attr('checked', true);
630+
if (this.checked) {
631+
$('.checkable').attr('checked', true);
632+
var total = calcTotalPayment()
633+
if (total > 25) {
634+
$('.bigRed').prev().remove();
635+
$('.bigRed').remove();
636+
}
637+
} else {
638+
$('.uncheckable').attr('checked', false);
639+
}
618640
updatePayMe();
619641
});
620642

@@ -678,6 +700,66 @@ $(document).ready(function() {
678700
}
679701
});
680702

703+
$('#quickPayMe').click(function() {
704+
var total = totalOwedPayments;
705+
var confirmationMessage = PAY_ME_CONFIRMATION_TEMPLATE.replace('{0}', '$' + total.toFixed(2));
706+
707+
var isNativeDialog = $('#payment-confirm-modal-id').length === 0;
708+
709+
if (isNativeDialog) {
710+
if (confirm(confirmationMessage)) {
711+
var myForm = document.f;
712+
myForm.method = 'POST';
713+
myForm.module.value = 'PayMe';
714+
myForm.submit();
715+
}
716+
} else {
717+
var resultPromise = new Promise(function (resolve) {
718+
$('#payment-confirm-modal-id .modal-body').text(confirmationMessage);
719+
document.body.style.overflow = 'hidden';
720+
721+
function onCancel () {
722+
document.body.style.overflow = '';
723+
$('#payment-confirm-modal-id').removeClass('show');
724+
$('#payment-confirm-modal-id .close-btn').off('click');
725+
$('#payment-confirm-modal-id .button-secondary').off('click');
726+
$('#payment-confirm-modal-id .button-primary').off('click');
727+
resolve(false);
728+
}
729+
function onOk () {
730+
document.body.style.overflow = '';
731+
$('#payment-confirm-modal-id').removeClass('show');
732+
$('#payment-confirm-modal-id .close-btn').off('click');
733+
$('#payment-confirm-modal-id .button-secondary').off('click');
734+
$('#payment-confirm-modal-id .button-primary').off('click');
735+
resolve(true);
736+
}
737+
738+
$('#payment-confirm-modal-id').addClass('show');
739+
$('#payment-confirm-modal-id .close-btn').one('click', onCancel);
740+
$('#payment-confirm-modal-id .button-secondary').one('click', onCancel);
741+
$('#payment-confirm-modal-id .button-primary').one('click', onOk);
742+
});
743+
744+
resultPromise.then(function (ok) {
745+
if (ok) {
746+
var myForm = document.f;
747+
myForm.method = 'POST';
748+
myForm.module.value = 'PayMe';
749+
for (var i = 0; i < owedPayments.length; i++) {
750+
var paymentId = owedPayments[i]
751+
var input = document.createElement('input');
752+
input.type = 'hidden';
753+
input.value = paymentId;
754+
input.name = 'paymentId';
755+
myForm.appendChild(input);
756+
}
757+
myForm.submit();
758+
}
759+
})
760+
}
761+
});
762+
681763
$('.getable').click(function () {
682764
var myForm = document.f;
683765
myForm.method = 'GET';
@@ -688,6 +770,8 @@ $(document).ready(function() {
688770

689771
updatePayMe();
690772

773+
updateQuickPayMe();
774+
691775
$('.buttonArea .register').click(function(){
692776
// the 'isAnonymous' is defined in the projectDetails.jsp file
693777
if(!isAnonymous) {

0 commit comments

Comments
 (0)