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

UI and feature update

Browse Source 
-- implemented client side QR code generation
-- separated wallet and payments history
This commit is contained in:
sairaj mote 2022-05-20 14:47:47 +05:30
parent ac75074ecd
commit dc10377cb0
7 changed files with 70 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/main.css
View File

@ -798,6 +798,10 @@ ul {
grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
}
.wallet-action,
.integrated-action-button {
color: inherit;
}
.wallet-action .icon:first-of-type,
.integrated-action-button .icon:first-of-type {
height: 2.5rem;
@ -843,7 +847,6 @@ ul {
}
#topup_wallet__qr_code {
padding: 2vw;
background-color: rgba(var(--text-color), 0.03);
border-radius: 0.5rem;
height: 12rem;
@ -1006,7 +1009,6 @@ ul {
}
#history .page__header {
min-height: 4rem;
margin-bottom: 0;
}
@ -1360,6 +1362,11 @@ ul {
margin-left: 0.3rem;
}
#transaction__amount {
font-size: 2.5rem;
font-weight: 700;
}
#transaction__remark,
#transaction__note {
line-height: 1.6;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

7
css/main.scss
View File

@ -747,6 +747,7 @@ ul {
}
.wallet-action,
.integrated-action-button {
color: inherit;
.icon:first-of-type {
height: 2.5rem;
width: 2.5rem;
@ -788,7 +789,6 @@ ul {
}
}
#topup_wallet__qr_code {
padding: 2vw;
background-color: rgba(var(--text-color), 0.03);
border-radius: 0.5rem;
height: 12rem;
@ -944,7 +944,6 @@ ul {
#history {
.page__header {
min-height: 4rem;
margin-bottom: 0;
}
}
@ -1274,6 +1273,10 @@ ul {
}
}
}
#transaction__amount {
font-size: 2.5rem;
font-weight: 700;
}
#transaction__remark,
#transaction__note {
line-height: 1.6;

68
index.html
View File

@ -216,6 +216,20 @@
<h1 class="h1" id="flo_balance"></h1>
</div>
</div>
<a class="integrated-action-button flex align-center user-element" href="#/wallet">
<svg class="icon" 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="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.25 2.52.77-1.28-3.52-2.09V8z" />
</svg>
See wallet top-up and withdraw history
<svg class="icon justify-self-end" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
</svg>
</a>
</div>
<div id="user" class="hide grid gap-2 user-element">
<div class="grid gap-0-5">
@ -295,15 +309,9 @@
</section>
</section>
<section id="history" class="inner-page hide grid gap-1-5">
<strip-select id="history_type_selector" class="justify-self-center">
<strip-option value="payment" selected>Payments</strip-option>
<strip-option value="wallet">Wallet</strip-option>
</strip-select>
<div class="page__header">
<div class="grid">
<h4>
<r-s sid="history_type">Payments</r-s>
</h4>
<h4>Payments</h4>
<h1>history</h1>
</div>
<button class="button button--small align-self-end" onclick="showPopup('payments_filters_popup')">
@ -319,25 +327,38 @@
<h5>Applied filters</h5>
<div id="history_applied_filters" class="flex gap-0-5"></div>
</div>
<div id="history_wrapper">
<div>
<ul id="payments_history" class="observe-empty-state"></ul>
<ul id="payments_history" class="observe-empty-state"></ul>
<div class=" empty-state gap-1 justify-center text-center">
<h4>No transactions</h4>
</div>
</section>
<section id="wallet" class="inner-page hide">
<div class="flex sticky top-0" style="background-color: rgba(var(--foreground-color),1);">
<a href="#/home" class="button icon-only margin-right-0-5">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
</svg>
</a>
</div>
<div class="page__header">
<div class="grid">
<h4>Wallet</h4>
<h1>transactions</h1>
</div>
</div>
<div id="wallet_history_wrapper" class="grid gap-1-5">
<div class="hide grid gap-1">
<h4>Pending transactions</h4>
<ul id="pending_wallet_transactions" class="grid gap-0-5"></ul>
</div>
<div class="grid gap-1">
<ul id="wallet_history" class="observe-empty-state grid gap-0-5"></ul>
<div class=" empty-state gap-1 justify-center text-center">
<h4>No transactions</h4>
</div>
</div>
<div id="wallet_history_wrapper" class="grid gap-1-5 hide">
<div class="hide grid gap-1">
<h4>Pending transactions</h4>
<ul id="pending_wallet_transactions" class="grid gap-0-5"></ul>
</div>
<div class="grid gap-1">
<ul id="wallet_history" class="observe-empty-state grid gap-0-5"></ul>
<div class=" empty-state gap-1 justify-center text-center">
<h4>No transactions</h4>
</div>
</div>
</div>
</div>
</section>
<section id="contacts" class="inner-page hide flex flex-direction-column">
@ -463,7 +484,7 @@
<h4 id="transaction__type"></h4>
</div>
<div class="grid gap-1">
<h1 id="transaction__amount"></h1>
<div id="transaction__amount"></div>
<div id="transaction__remark" class="hide"></div>
<div class="flex align-center" style="font-size: 0.8rem;">
<time id="transaction__time"></time>
@ -1138,6 +1159,7 @@
<script src="scripts/fn_ui.js"></script>
<script src="scripts/floTokenAPI.js"></script>
<script src="scripts/floExchangeAPI.js"></script>
<script src="scripts/qrcode.min.js"></script>
<script id="onLoadStartUp">
function onLoadStartUp() {
showPage('loading')

14
scripts/fn_ui.js
View File

@ -44,10 +44,8 @@ function continueWalletTopup() {
let amount = parseFloat(getRef('request_cashier_amount').value.trim());
getRef('topup_wallet__details').innerHTML = `Send <b>${formatAmount(amount)}</b> to UPI ID below`;
getRef('topup_wallet__upi_id').value = cashierUPI[cashier];
fetch(`https://upiqr.in/api/qr?name=cashier&vpa=${cashierUPI[cashier]}`).then(res => {
res.text().then(data => getRef('topup_wallet__qr_code').innerHTML = data)
.catch(err => console.error(err));
}).catch(err => console.error(err));
getRef('topup_wallet__qr_code').innerHTML = ''
getRef('topup_wallet__qr_code').append(new QRCode(`upi://pay?am=${amount}&pa=${cashierUPI[cashier]}`))
showChildElement('topup_wallet_process', 1)
getRef('topup_wallet__txid').focusIn();
}
@ -184,7 +182,7 @@ userUI.renderCashierRequests = function (requests, error = null) {
return console.error(error);
else if (typeof requests !== "object" || requests === null)
return;
if (pagesData.lastPage === 'history') {
if (pagesData.lastPage === 'wallet') {
for (let transactionID in requests) {
const { note, tag } = requests[transactionID];
let status = tag ? 'done' : (note ? 'failed' : "pending");
@ -831,12 +829,6 @@ function executeUserAction() {
userUI.requestMoneyFromUser(floID, amount, remark);
}
}
const [historyType, setHistoryType] = createState('Payments', 'history_type', (v) => {
showChildElement('history_wrapper', v === 'Payments' ? 0 : 1)
});
getRef('history_type_selector').addEventListener('change', e => {
setHistoryType(e.target.value === 'payment' ? 'Payments' : 'Wallet')
})
function toggleFilters() {
const animOptions = {

3
scripts/qrcode.min.js vendored
View File

File diff suppressed because one or more lines are too long

5
scripts/std_ui.js
View File

@ -372,6 +372,8 @@ async function showPage(targetPage, options = {}) {
break;
case 'history':
render.paymentsHistory()
break;
case 'wallet':
const walletTransactions = []
if (walletHistoryLoader)
walletHistoryLoader.clear()
@ -483,8 +485,11 @@ async function showPage(targetPage, options = {}) {
if (pageId !== 'history') {
if (paymentsHistoryLoader)
paymentsHistoryLoader.clear()
}
if (pageId !== 'wallet') {
if (walletHistoryLoader)
walletHistoryLoader.clear()
}
if (pageId !== 'contact') {
if (contactHistoryLoader)