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

UX improvement

Browse Source 
-- conditionally rendering top-up steps based on QR code state
This commit is contained in:
sairaj mote 2022-06-06 19:58:46 +05:30
parent 0077223bb3
commit 46056f9a39
5 changed files with 42 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/main.css
View File

@ -915,8 +915,9 @@ ol li::before {
#topup_wallet__qr_code {
background-color: rgba(var(--text-color), 0.03);
border-radius: 0.5rem;
height: 12rem;
height: 10rem;
justify-self: flex-start;
width: 10rem;
}
#topup_wallet__qr_code svg {
width: 100%;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

3
css/main.scss
View File

@ -851,8 +851,9 @@ ol {
#topup_wallet__qr_code {
background-color: rgba(var(--text-color), 0.03);
border-radius: 0.5rem;
height: 12rem;
height: 10rem;
justify-self: flex-start;
width: 10rem;
svg {
width: 100%;
height: 100%;

44
index.html
View File

@ -820,7 +820,7 @@
</sm-form>
<sm-form id="confirm_topup_form" class="hide">
<h4>Transfer money</h4>
<ol type="1">
<ol id="topup_steps" type="1">
<li>
<p>
Open your<strong> preferred UPI app </strong>
@ -834,10 +834,10 @@
</p>
<sm-copy id="topup_wallet__upi_id" style="font-weight: 700;"></sm-copy>
</div>
<details>
<details id="topup_wallet__qr_wrapper">
<summary class="interact">
<b style="font-size: 0.9rem;">Or get QR code to scan</b>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px"
<svg class="icon down-arrow" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
@ -845,32 +845,11 @@
</summary>
<div class="grid gap-0-5">
<div id="topup_wallet__qr_code"></div>
<p>
<strong>
*If you are paying by scanning the QR code, amount and remark/message will
be
added automatically.</strong>
</p>
<strong> *All the required details for payment will be auto-filled.</strong>
</div>
</details>
</div>
</li>
<li>
<p id="topup_wallet__details"></p>
</li>
<li>
<div class="grid gap-0-5">
<p>
Enter <strong>code</strong> below in the <strong> message/remark </strong> field
</p>
<sm-copy id="topup_wallet__code" style="font-weight: 700;"></sm-copy>
<p>
<strong>*This is very important step. If you skip or enter wrong code, transaction can't
be
verified.</strong>
</p>
</div>
</li>
<li>
<p>
After sending money, press <b>Confirm</b>.
@ -1254,6 +1233,21 @@
</button>
</li>
</template>
<template id="conditional_steps_template">
<li class="conditional">
<p>Enter <b class="amount"></b> as amount</p>
</li>
<li class="conditional">
<div class="grid gap-0-5">
<p>
Enter <strong>code</strong> below in the <strong> message/remark </strong> field
</p>
<sm-copy class="tx-code" style="font-weight: 700; "></sm-copy>
<strong class="warning">*This is very important step. If you skip or enter wrong code, transaction can't
be verified.</strong>
</div>
</li>
</template>
<script src="//unpkg.com/uhtml"></script>
<script src="scripts/components.js"></script>
<script src="scripts/std_ui.js"></script>

24
scripts/fn_ui.js
View File

@ -45,18 +45,17 @@ function continueWalletTopup() {
if (!cashier)
return notify("No cashier online. Please try again in a while.", 'error');
// const upiId = getRef('select_topup_upi_id').value;
const txCode = randomString(6);
getRef('topup_wallet__code').value = txCode;
floGlobals.txCode = randomString(6);
// if (!upiId)
// return notify("Please add the UPI ID which you'll use to send the money", 'error');
let amount = parseFloat(getRef('request_cashier_amount').value.trim());
renderElem(getRef('topup_wallet__details'), html`Enter <b>${formatAmount(amount)}</b> as amount`);
getRef('topup_wallet__upi_id').value = cashierUPI[cashier];
getRef('topup_wallet__qr_code').innerHTML = ''
getRef('topup_wallet__qr_code').append(new QRCode({
msg: `upi://pay?pn=FLOPay&pa=${cashierUPI[cashier]}&am=${amount}&tn=${txCode}`,
msg: `upi://pay?pn=FLOPay&pa=${cashierUPI[cashier]}&am=${amount}&tn=${floGlobals.txCode}`,
ecl: 'H'
}))
render.conditionalSteps()
showChildElement('topup_wallet_process', 1)
// getRef('topup_wallet__txid').focusIn();
}
@ -66,12 +65,12 @@ function depositMoneyToWallet() {
return notify("No cashier online. Please try again in a while.", 'error');
let amount = parseFloat(getRef('request_cashier_amount').value.trim());
// let upiTxID = getRef('topup_wallet__txid').value.trim();
const txCode = getRef('topup_wallet__code').value;
// const txCode = getRef('topup_wallet__code').value;
// const upiId = getRef('select_topup_upi_id').value;
// if (upiTxID === '')
// return notify("Please enter UPI transaction ID", 'error');
buttonLoader('topup_wallet_button', true);
User.cashToToken(cashier, amount, txCode/* , upiId */).then(result => {
User.cashToToken(cashier, amount, floGlobals.txCode/* , upiId */).then(result => {
console.log(result);
showChildElement('topup_wallet_process', 2);
refreshBalance()
@ -84,6 +83,8 @@ function depositMoneyToWallet() {
});
}
getRef('topup_wallet__qr_wrapper').addEventListener('toggle', e => render.conditionalSteps())
function withdrawMoneyFromWallet() {
let cashier = User.findCashier();
if (!cashier)
@ -701,6 +702,17 @@ const render = {
frag.append(render.savedId(floID, details));
})
getRef('saved_ids_list').append(frag);
},
conditionalSteps() {
if (getRef('topup_wallet__qr_wrapper').open) {
getRef('topup_steps').querySelectorAll('.conditional').forEach(e => e.remove());
} else {
const amount = parseFloat(getRef('request_cashier_amount').value.trim());
const conditionalSteps = getRef('conditional_steps_template').content.cloneNode(true);
conditionalSteps.querySelector('.amount').textContent = formatAmount(amount);
conditionalSteps.querySelector('.tx-code').setAttribute('value',floGlobals.txCode);
getRef('topup_steps').children[1].after(conditionalSteps)
}
}
};