From 96b51414b067795473eee5998b9246313feaaacd Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Thu, 12 May 2022 15:38:37 +0530 Subject: [PATCH] Cashier UX improvements --- index.html | 13 ++++++++++- scripts/fn_ui.js | 56 ++++++++++++++++++++++++++--------------------- scripts/std_ui.js | 33 +++++++++++++++++++++++++--- 3 files changed, 73 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index d9a4009..8706b0e 100644 --- a/index.html +++ b/index.html @@ -56,6 +56,17 @@ OK + +

+

+ + +
+ Cancel + OK +
+ +
@@ -156,7 +167,7 @@
-
My FLO ID
+
Welcome
diff --git a/scripts/fn_ui.js b/scripts/fn_ui.js index 507ebf1..127f4a8 100644 --- a/scripts/fn_ui.js +++ b/scripts/fn_ui.js @@ -327,20 +327,23 @@ cashierUI.completeRequest = function (reqID) { function completeCashToTokenRequest(request) { const { message: { upi_txid, amount }, vectorClock, senderID } = request; 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(senderID, amount, 'for cash-to-token').then(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:', vectorClock); - alert("Completed request"); - }).catch(error => console.error(error)) - }).catch(error => console.error(error)) + getConfirmation('Confirm', { + message: `Check if you have received UPI transfer\ntxid: ${upi_txid}\namount: ${formatAmount(amount)}`, + confirmText: 'Confirm' + }).then(confirmed => { + if (confirmed) { + User.sendToken(senderID, amount, 'for cash-to-token').then(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:', vectorClock); + notify("Completed request", 'success'); + }).catch(error => console.error(error)) + }).catch(error => console.error(error)) + } + }) }).catch(error => { - console.error(error); - alert(error); + notify(error, 'error'); if (Array.isArray(error) && error[0] === true && typeof error[1] === 'string') Cashier.rejectRequest(request, error[1]).then(result => { console.log(result); @@ -350,22 +353,25 @@ function completeCashToTokenRequest(request) { } function completeTokenToCashRequest(request) { - Cashier.checkIfTokenTxIsValid(request.message.token_txid, request.senderID, request.message.amount).then(result => { - let upiTxID = prompt(`Token transfer is verified!\n Send ${request.message.amount} to ${request.message.upi_id} and Enter UPI txid`); - if (!upiTxID) - return alert("Cancelled"); - Cashier.finishRequest(request, upiTxID).then(result => { - console.log(result); - console.info('Completed token-to-cash request:', request.vectorClock); - alert("Completed request"); - }).catch(error => console.error(error)) + const { vectorClock, senderID, message: { token_txid, amount, upi_id } } = request + Cashier.checkIfTokenTxIsValid(token_txid, senderID, amount).then(result => { + getPromptInput('Process', `Token transfer is verified!\n Send ${formatAmount(amount)}\n to ${upi_id}\n Enter UPI transaction ID`, { + placeholder: 'UPI transaction ID', + }).then(upiTxID => { + if (!upiTxID || upiTxID.length < 10) + return notify("Invalid UPI txid", 'error'); + Cashier.finishRequest(request, upiTxID).then(result => { + console.log(result); + console.info('Completed token-to-cash request:', vectorClock); + notify("Completed request", 'success'); + }).catch(error => console.error(error)) + }) }).catch(error => { - console.error(error); - alert(error); + notify(error, 'error'); if (Array.isArray(error) && error[0] === true && typeof error[1] === 'string') Cashier.rejectRequest(request, error[1]).then(result => { console.log(result); - console.info('Rejected token-to-cash request:', request.vectorClock); + console.info('Rejected token-to-cash request:', vectorClock); }).catch(error => console.error(error)) }) } diff --git a/scripts/std_ui.js b/scripts/std_ui.js index 8b31c6c..8aaf01e 100644 --- a/scripts/std_ui.js +++ b/scripts/std_ui.js @@ -138,10 +138,10 @@ document.addEventListener('popupclosed', e => { // displays a popup for asking permission. Use this instead of JS confirm const getConfirmation = (title, options = {}) => { return new Promise(resolve => { - const { message, cancelText = 'Cancel', confirmText = 'OK' } = options + const { message = '', cancelText = 'Cancel', confirmText = 'OK' } = options showPopup('confirmation_popup', true) - getRef('confirm_title').textContent = title; - getRef('confirm_message').textContent = message; + getRef('confirm_title').innerText = title; + getRef('confirm_message').innerText = message; let cancelButton = getRef('confirmation_popup').children[2].children[0], submitButton = getRef('confirmation_popup').children[2].children[1] submitButton.textContent = confirmText @@ -156,6 +156,33 @@ const getConfirmation = (title, options = {}) => { } }) } +// displays a popup for asking user input. Use this instead of JS prompt +function getPromptInput(title, message = '', options = {}) { + let { placeholder = '', isPassword = false, cancelText = 'Cancel', confirmText = 'OK' } = options + showPopup('prompt_popup', true) + getRef('prompt_title').innerText = title; + getRef('prompt_message').innerText = message; + let buttons = getRef('prompt_popup').querySelectorAll("sm-button"); + if (isPassword) { + placeholder = 'Password' + getRef('prompt_input').setAttribute("type", "password") + } + getRef('prompt_input').setAttribute("placeholder", placeholder) + getRef('prompt_input').focusIn() + buttons[0].textContent = cancelText; + buttons[1].textContent = confirmText; + return new Promise((resolve, reject) => { + buttons[0].onclick = () => { + hidePopup() + return (null); + } + buttons[1].onclick = () => { + const value = getRef('prompt_input').value; + hidePopup() + resolve(value) + } + }) +} //Function for displaying toast notifications. pass in error for mode param if you want to show an error. function notify(message, mode, options = {}) {