improvement(reskin-payment): view all, view pending

Author: dedywahyudi

css/reskin-2/common.css

@@ -29,11 +29,96 @@
   --green: #137d60;
   --blue-1: #eaf6fd;
   --blue-2: #bae1f9;
-
+  --blue-3: #2c95d7;
+  --grey-1: #767676;
   --divider: #e9e9e9;
 
   --header-height: 80px;
   --footer-height: 51px;
   --header-height-mobile: 60px;
   --footer-height-mobile: 75px;
+
+  --payment-status-owed: #f46500;
+  --payment-status-paid: #0ab88a;
+  --payment-status-cancelled: #ef476f;
+}
+
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+  .modal.show {
+    display: block;
+  }
+.modal-dialog {
+  position: relative;
+  max-width: calc(100% - 16px);
+  margin-left: auto;
+  margin-right: auto;
+}
+.modal-content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
+
+  padding: 32px;
+}
+.modal-header {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0 24px 0;
+  border-bottom: 2px solid var(--black-10);
+}
+  .modal-title {
+    font-family: Barlow;
+    font-weight: 600;
+    font-size: 22px;
+    line-height: 26px;
+  }
+.modal-body {
+  position: relative;
+  flex: 1 1 auto;
+  padding: 24px 0;
+}
+.modal-footer {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 24px 0 0 0;
+  gap: 16px;
+  border-top: 2px solid var(--black-10);
 }
+  @media (max-width: /* --xs-max */ 599px) {
+    .modal-content {
+      padding: 24px 16px;
+    }
+    .modal-header {
+      padding: 0 0 16px 0;
+    }
+      .modal-title {
+        font-size: 18px;
+        line-height: 20px;
+      }
+    .modal-body {
+      padding: 16px 0;
+    }
+    .modal-footer {
+      padding: 16px 0 0 0;
+      gap: 10px;
+    }
+  }

css/reskin-2/paymentHistory.css

@@ -365,9 +365,11 @@ function adjustAndShow(modal) {
 function updatePayMe() {
     var total = calcTotalPayment();
     if (total >= 0) {
-        $('#payMe').val('Pay Me: $' + total.toFixed(2));
+        // $('#payMe').val('Pay Me: $' + total.toFixed(2));
+        $('#payMeValue').text('$' + total.toFixed(2));
     } else {
-        $('#payMe').val('Pay Me: -$' + Math.abs(total.toFixed(2)));
+        // $('#payMe').val('Pay Me: -$' + Math.abs(total.toFixed(2)));
+        $('#payMeValue').text('-$' + Math.abs(total.toFixed(2)));
     }
     if (total < MINIMUM_PAYMENT_ACCRUAL_AMOUNT || !isUserPaymentMethodValid()) {
         $('#payMe').attr('disabled', 'disabled');
@@ -627,11 +629,51 @@ $(document).ready(function() {
             var total = calcTotalPayment();
             var confirmationMessage = PAY_ME_CONFIRMATION_TEMPLATE.replace('{0}', '$' + total.toFixed(2));
 
-            if (confirm(confirmationMessage)) {
-                var myForm = document.f;
-                myForm.method = 'POST';
-                myForm.module.value = 'PayMe';
-                myForm.submit();
+            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';
+                        myForm.submit();
+                    }
+                })
             }
         }
     });