UI update

css/main.css

@@ -916,7 +916,7 @@ ul {
 }
 
 #history_applied_filters_wrapper {
-  padding: 0.2rem 0 1rem 0;
+  padding: 0.2rem 0 0.5rem 0;
   background-color: rgba(var(--background-color), 1);
   z-index: 1;
   position: -webkit-sticky;

css/main.scss

@@ -864,7 +864,7 @@ ul {
   }
 }
 #history_applied_filters_wrapper {
-  padding: 0.2rem 0 1rem 0;
+  padding: 0.2rem 0 0.5rem 0;
   background-color: rgba(var(--background-color), 1);
   z-index: 1;
   position: sticky;

index.html

@@ -369,7 +369,7 @@
                     </svg>
                     <span>Cashier is currently offline. Please check back again after a while.</span>
                 </div>
-                <div class="flex">
+                <div class="flex user-element">
                     <button class="wallet-action" onclick="showPopup('topup_wallet_popup')">
                         <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
                             width="24px" fill="#000000">
@@ -399,7 +399,7 @@
                     </button>
                 </div>
             </div>
-            <div id="wallet_history_wrapper" class="grid gap-1-5">
+            <div id="wallet_history_wrapper" class="grid gap-1-5 user-element">
                 <div class="hide grid gap-1">
                     <h4>Pending transactions</h4>
                     <ul id="pending_wallet_transactions" class="grid gap-0-5"></ul>
@@ -1065,7 +1065,7 @@
                         showPage(window.location.hash, { firstLoad: true })
                     }).catch(error => console.error(error))
                 } else {
-                    userUI.renderSavedIds()
+                    render.savedIds()
                     userUI.renderCashierRequests(User.cashierRequests);
                     userUI.renderMoneyRequests(User.moneyRequests);
                     User.init().then(result => {

scripts/fn_pay.js

@@ -162,6 +162,10 @@ User.decideRequest = function (request, note) {
 const Cashier = {};
 
 Cashier.init = function () {
+    delegate(getRef('cashier_request_list'), 'click', '.process-cashier-request', e => {
+        const requestID = e.delegateTarget.closest('.cashier-request').id;
+        cashierUI.completeRequest(requestID)
+    })
     return new Promise((resolve, reject) => {
         let promises = [];
         //Requests from user to cashier(self) for token-cash exchange

scripts/fn_ui.js

@@ -321,15 +321,16 @@ cashierUI.completeRequest = function (reqID) {
 }
 
 function completeCashToTokenRequest(request) {
-    Cashier.checkIfUpiTxIsValid(request.message.upi_txid).then(_ => {
+    const { message: { upi_txid, amount }, vectorClock, senderID } = request;
-        let confirmation = confirm(`Check if you have received UPI transfer\ntxid:${request.message.upi_txid}\namount:${request.message.amount}`);
+    Cashier.checkIfUpiTxIsValid(upi_txid).then(_ => {
+        let confirmation = confirm(`Check if you have received UPI transfer\ntxid:${upi_txid}\namount:${amount}`);
         if (!confirmation)
             return alert("Cancelled");
-        User.sendToken(request.senderID, request.message.amount, 'for cash-to-token').then(txid => {
+        User.sendToken(senderID, amount, 'for cash-to-token').then(txid => {
-            console.warn(`${request.message.amount} cash-to-token for ${request.senderID}`, txid);
+            console.warn(`${amount} cash-to-token for ${senderID}`, txid);
             Cashier.finishRequest(request, txid).then(result => {
                 console.log(result);
-                console.info('Completed cash-to-token request:', request.vectorClock);
+                console.info('Completed cash-to-token request:', vectorClock);
                 alert("Completed request");
             }).catch(error => console.error(error))
         }).catch(error => console.error(error))
@@ -339,7 +340,7 @@ function completeCashToTokenRequest(request) {
         if (Array.isArray(error) && error[0] === true && typeof error[1] === 'string')
             Cashier.rejectRequest(request, error[1]).then(result => {
                 console.log(result);
-                console.info('Rejected cash-to-token request:', request.vectorClock);
+                console.info('Rejected cash-to-token request:', vectorClock);
             }).catch(error => console.error(error))
     })
 }
@@ -427,7 +428,7 @@ const render = {
         if (status)
             clone.querySelector('.cashier-request__status').textContent = status;
         else
-            clone.querySelector('.cashier-request__status').innerHTML = `<button class="button" onclick="cashierUI.completeRequest('${vectorClock}')">Process</button>`;
+            clone.querySelector('.cashier-request__status').innerHTML = `<button class="button process-cashier-request">Process</button>`;
         return clone;
     },
     walletRequestCard(details) {
@@ -530,6 +531,14 @@ const render = {
         }).catch(e => {
             console.error(e)
         })
+    },
+    async savedIds() {
+        const frag = document.createDocumentFragment();
+        await organizeSyncedData('savedIds');
+        getArrayOfSavedIds().forEach(({ floID, details }) => {
+            frag.append(render.savedId(floID, details));
+        })
+        getRef('saved_ids_list').append(frag);
     }
 };
 
@@ -570,14 +579,6 @@ function getArrayOfSavedIds() {
     }
     return arr.sort((a, b) => a.details.title.localeCompare(b.details.title));
 }
-userUI.renderSavedIds = async function () {
-    const frag = document.createDocumentFragment();
-    await organizeSyncedData('savedIds');
-    getArrayOfSavedIds().forEach(({ floID, details }) => {
-        frag.append(render.savedId(floID, details));
-    })
-    getRef('saved_ids_list').append(frag);
-}
 async function saveFloId() {
     const floID = getRef('flo_id_to_save').value.trim();
     if (floGlobals.savedIds.hasOwnProperty(floID))