RanchiMall/flopay
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cashier UX improvements

Browse Source
This commit is contained in:
sairaj mote 2022-05-12 15:38:37 +05:30
parent ff2835f81a
commit 96b51414b0
3 changed files with 73 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@ -56,6 +56,17 @@
<sm-button variant="no-outline" class="submit-btn">OK</sm-button>
</div>
</sm-popup>
<sm-popup id="prompt_popup">
<h4 id="prompt_title"></h4>
<p id="prompt_message"></p>
<sm-form>
<sm-input id="prompt_input"></sm-input>
<div class="flex align-center">
<sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button>
<sm-button variant="no-outline" class="submit-btn" type="submit">OK</sm-button>
</div>
</sm-form>
</sm-popup>
<div id="secondary_pages" class="page hide">
<header class="flex align-center gap-1">
<div class="flex align-center flex-1">
@ -156,7 +167,7 @@
<section id="home" class="inner-page hide">
<div class="scrolling-wrapper">
<div class="grid" style="margin: 0 1.5rem;">
<h5>My FLO ID</h5>
<h5>Welcome</h5>
<sm-copy class="logged-in-user-id" style="font-size: 0.9rem;"></sm-copy>
</div>
<div id="wallet_section" class="grid gap-1">

56
scripts/fn_ui.js
View File

@ -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))
})
}

33
scripts/std_ui.js
View File

@ -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 = {}) {