Enhance demo flow (#18)

* add payment status info * reformat payment status info * refine UX * fix UI issue * enhance demo flow a bit * fix error
ibm-hyper-protect · Feb 27, 2024 · 564bdca · 564bdca
1 parent 4fcb323
commit 564bdca
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/app/images/alert.jpg b/app/images/alert.jpg
diff --git a/app/paynow.css b/app/paynow.css
@@ -66,3 +66,9 @@ input {
     font-weight: 500;
     text-align: center;
 }
+
+.paynow .payment-status {
+    font-size: 75%;
+    font-weight: 500;
+    text-align: center;
+}
diff --git a/app/paynow.js b/app/paynow.js
@@ -20,6 +20,8 @@ BACKEND_URL.pathname = '/api/v1/transactions'
 var BACKEND = BACKEND_URL.toString()
 console.log("BACKEND: " + BACKEND);
 
+var STATUS_SETTLED = "Settled"
+
 // Used to select random people photos
 function getRandomInt(min, max) {
   return Math.floor(Math.random() * (max - min + 1) + min);
@@ -38,7 +40,9 @@ $("#paynowButton").click(function () {
     location: $('#formCountry').val(),
     contribution: $('#paymentAmount').val(),
     creditCardNumber: $('#ccNum').val(),
-    creditCardCVV: $('#ccCVV').val()
+    creditCardCVV: $('#ccCVV').val(),
+    id: getRandomInt(1, 9),
+    status: STATUS_SETTLED
   };
 
   console.log("Sending : " + JSON.stringify(donateJSON));
@@ -101,12 +105,24 @@ function getDonations() {
       // console.log(donatorList.slice(0, (donatorList.length < 5 ? donatorList.length : 5)));
       var donator = "";
       $.each(donatorList, function (index, value) {
-
+        var status = value.status;
+        var amount = value.contribution;
+
         donator = donator + `<div class="paynow">
-                    <p class="name">` + value.name + `</p>
-                    <img src="images/person_` + getRandomInt(1, 9) + `.jpg" />
-                    <p class="payment-amount">` + value.contribution + `</p>
-                    </div>`;
+                    <p class="name">` + value.name + `</p>`;
+        if (status != STATUS_SETTLED) {
+          donator = donator + `<img src="images/alert.jpg" />`;
+        }
+        else {
+          donator = donator + `<img src="images/person_` + value.id + `.jpg" />`;
+        }
+        donator = donator + `<p class="payment-amount">` + amount + `</p>`;
+
+        if (status != STATUS_SETTLED) {
+          donator = donator + `<p class="payment-status">Payment status: ` + status + `</p>`;
+        }
+
+        donator = donator + `</div>`;
 
       });
       $("#paynow-results").html(donator);