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

bug fixes

Browse Source
This commit is contained in:
sairaj mote 2022-06-03 19:34:57 +05:30
parent 1e8995076d
commit 09bc1d22ad
6 changed files with 116 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/main.css
View File

@ -730,7 +730,8 @@ ol li::before {
border-radius: 1rem 1rem 0 0; border-radius: 1rem 1rem 0 0;
z-index: 1; z-index: 1;
} }
.nav-item .badge {
.badge {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -740,7 +741,7 @@ ol li::before {
right: 0; right: 0;
font-size: 0.8rem; font-size: 0.8rem;
padding: 0.3rem; padding: 0.3rem;
background: var(--accent-color); background: var(--danger-color);
color: rgba(var(--background-color), 1); color: rgba(var(--background-color), 1);
aspect-ratio: 1/1; aspect-ratio: 1/1;
font-weight: 700; font-weight: 700;
@ -858,6 +859,7 @@ ol li::before {
.wallet-action, .wallet-action,
.integrated-action-button { .integrated-action-button {
position: relative;
color: inherit; color: inherit;
font-weight: 500; font-weight: 500;
} }
@ -870,6 +872,11 @@ ol li::before {
background-color: var(--accent-color); background-color: var(--accent-color);
border-radius: 2rem; border-radius: 2rem;
} }
.wallet-action .badge,
.integrated-action-button .badge {
left: 0;
right: auto;
}
.wallet-action { .wallet-action {
flex-direction: column; flex-direction: column;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

39
css/main.scss
View File

@ -680,23 +680,23 @@ ol {
border-radius: 1rem 1rem 0 0; border-radius: 1rem 1rem 0 0;
z-index: 1; z-index: 1;
} }
.badge { }
display: flex; .badge {
align-items: center; display: flex;
justify-content: center; align-items: center;
content: attr(data-notifications); justify-content: center;
position: absolute; content: attr(data-notifications);
top: 0; position: absolute;
right: 0; top: 0;
font-size: 0.8rem; right: 0;
padding: 0.3rem; font-size: 0.8rem;
background: var(--accent-color); padding: 0.3rem;
color: rgba(var(--background-color), 1); background: var(--danger-color);
aspect-ratio: 1/1; color: rgba(var(--background-color), 1);
font-weight: 700; aspect-ratio: 1/1;
border-radius: 0.3rem; font-weight: 700;
margin: 0.3rem; border-radius: 0.3rem;
} margin: 0.3rem;
} }
.inner-page { .inner-page {
padding: 0 1.5rem; padding: 0 1.5rem;
@ -801,6 +801,7 @@ ol {
} }
.wallet-action, .wallet-action,
.integrated-action-button { .integrated-action-button {
position: relative;
color: inherit; color: inherit;
font-weight: 500; font-weight: 500;
.icon:first-of-type { .icon:first-of-type {
@ -811,6 +812,10 @@ ol {
background-color: var(--accent-color); background-color: var(--accent-color);
border-radius: 2rem; border-radius: 2rem;
} }
.badge {
left: 0;
right: auto;
}
} }
.wallet-action { .wallet-action {
flex-direction: column; flex-direction: column;

5
index.html
View File

@ -193,7 +193,8 @@
<h1 class="h1" id="flo_balance"></h1> <h1 class="h1" id="flo_balance"></h1>
</div> </div>
</div> </div>
<a class="integrated-action-button flex align-center user-element" href="#/wallet"> <a id="wallet_history_button" 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" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000"> fill="#000000">
<path d="M0 0h24v24H0V0z" fill="none" /> <path d="M0 0h24v24H0V0z" fill="none" />
@ -229,7 +230,7 @@
</svg> </svg>
Request Request
</button> </button>
<button class="wallet-action cashier-option" onclick="openPopup('topup_wallet_popup')"> <button class="wallet-action cashier-option" onclick="openPopup('topup_wallet_popup', true)">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000"> width="24px" fill="#000000">
<path d="M0 0h24v24H0z" fill="none" /> <path d="M0 0h24v24H0z" fill="none" />

130
scripts/fn_ui.js
View File

@ -161,7 +161,7 @@ function saveUpiId() {
getRef('select_withdraw_upi_id').append(render.savedUpiIdOption(upiId)); getRef('select_withdraw_upi_id').append(render.savedUpiIdOption(upiId));
getRef('select_withdraw_upi_id').parentNode.classList.remove('hide') getRef('select_withdraw_upi_id').parentNode.classList.remove('hide')
} }
hidePopup(); closePopup();
}).catch(error => { }).catch(error => {
notify(error, 'error'); notify(error, 'error');
}) })
@ -177,7 +177,7 @@ delegate(getRef('saved_upi_ids_list'), 'click', '.saved-upi', e => {
if (toDelete) if (toDelete)
toDelete.remove(); toDelete.remove();
delete floGlobals.savedUserData.upiIds[upiId]; delete floGlobals.savedUserData.upiIds[upiId];
hidePopup(); closePopup();
syncUserData('savedUserData', floGlobals.savedUserData).then(() => { syncUserData('savedUserData', floGlobals.savedUserData).then(() => {
notify(`Deleted UPI ID`, 'success'); notify(`Deleted UPI ID`, 'success');
}).catch(error => { }).catch(error => {
@ -193,13 +193,22 @@ userUI.renderCashierRequests = function (requests, error = null) {
return console.error(error); return console.error(error);
else if (typeof requests !== "object" || requests === null) else if (typeof requests !== "object" || requests === null)
return; return;
let processedRequests = 0;
if (pagesData.lastPage === 'wallet') { if (pagesData.lastPage === 'wallet') {
for (let transactionID in requests) { for (let transactionID in requests) {
const { note, tag } = requests[transactionID]; const { note, tag } = requests[transactionID];
let status = tag ? 'done' : (note ? 'failed' : "pending"); let status = tag ? 'done' : (note ? 'failed' : "pending");
getRef('wallet_history_wrapper').querySelectorAll(`[data-vc="${transactionID}"]`).forEach(card => card.remove()); getRef('wallet_history_wrapper').querySelectorAll(`[data-vc="${transactionID}"]`).forEach(card => card.remove());
getRef(status !== 'pending' ? 'wallet_history' : 'pending_wallet_transactions').prepend(render.walletRequestCard(requests[transactionID])) getRef(status !== 'pending' ? 'wallet_history' : 'pending_wallet_transactions').prepend(render.walletRequestCard(requests[transactionID]))
if (status === 'done' || status === 'failed') {
processedRequests++;
}
} }
} else {
if(processedRequests === 0)
removeNotificationBadge('wallet_history_button');
else
addNotificationBadge('wallet_history_button', processedRequests)
} }
}; };
@ -249,51 +258,64 @@ userUI.renderMoneyRequests = function (requests, error = null) {
for (const request in User.moneyRequests) { for (const request in User.moneyRequests) {
if (!User.moneyRequests[request].note) totalRequests++; if (!User.moneyRequests[request].note) totalRequests++;
} }
if (totalRequests) {
addNotificationBadge('requests_page_button',totalRequests)
} else {
removeNotificationBadge('requests_page_button')
}
};
function addNotificationBadge(elem, text) {
const animOptions = { const animOptions = {
duration: 200, duration: 200,
fill: 'forwards', fill: 'forwards',
easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)' easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
} }
if (totalRequests) { if (!getRef(elem).querySelector('.badge')) {
if (!getRef('requests_page_button').querySelector('.badge')) { const badge = createElement('span', {
const badge = createElement('span', { className: 'badge',
className: 'badge', textContent: text
textContent: totalRequests })
}) getRef(elem).append(badge)
getRef('requests_page_button').append(badge) badge.animate([
badge.animate([ {
{ transform: 'scale(0) translateY(0.5rem)'
transform: 'scale(0) translateY(0.5rem)' },
}, {
{ transform: 'scale(1) translateY(0)'
transform: 'scale(1) translateY(0)' },
}, ], animOptions)
], animOptions)
} else {
const badge = getRef('requests_page_button').querySelector('.badge');
badge.textContent = totalRequests;
badge.animate([
{ transform: 'scale(1)' },
{ transform: `scale(1.5)` },
{ transform: 'scale(1)' }
], animOptions)
}
} else { } else {
if (getRef('requests_page_button').querySelector('.badge')) { const badge = getRef(elem).querySelector('.badge');
const badge = getRef('requests_page_button').querySelector('.badge') badge.textContent = text;
badge.animate([ badge.animate([
{ { transform: 'scale(1)' },
transform: 'scale(1) translateY(0)' { transform: `scale(1.5)` },
}, { transform: 'scale(1)' }
{ ], animOptions)
transform: 'scale(0) translateY(0.5rem)' }
}, }
], animOptions).onfinish = () => {
badge.remove() function removeNotificationBadge(elem) {
} const animOptions = {
duration: 200,
fill: 'forwards',
easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
}
if (getRef(elem).querySelector('.badge')) {
const badge = getRef(elem).querySelector('.badge')
badge.animate([
{
transform: 'scale(1) translateY(0)'
},
{
transform: 'scale(0) translateY(0.5rem)'
},
], animOptions).onfinish = () => {
badge.remove()
} }
} }
}; }
userUI.payRequest = function (reqID) { userUI.payRequest = function (reqID) {
let { message: { amount, remark }, senderID } = User.moneyRequests[reqID]; let { message: { amount, remark }, senderID } = User.moneyRequests[reqID];
@ -360,13 +382,13 @@ function completeCashToTokenRequest(request) {
const { message: { upi_txid, amount, upiID, txCode }, vectorClock } = request; const { message: { upi_txid, amount, upiID, txCode }, vectorClock } = request;
getRef('top_up_amount').textContent = formatAmount(amount); getRef('top_up_amount').textContent = formatAmount(amount);
getRef('top_up__code').value = txCode; getRef('top_up__code').value = txCode;
showPopup('confirm_topup_popup'); openPopup('confirm_topup_popup');
// Cashier.checkIfUpiTxIsValid(upi_txid).then(_ => { // Cashier.checkIfUpiTxIsValid(upi_txid).then(_ => {
// getRef('top_up_amount').textContent = formatAmount(amount); // getRef('top_up_amount').textContent = formatAmount(amount);
// // getRef('top_up_txid').value = upi_txid; // // getRef('top_up_txid').value = upi_txid;
// // getRef('top_up_upi_id').value = upiID; // // getRef('top_up_upi_id').value = upiID;
// getRef('top_up__code').value = txCode; // getRef('top_up__code').value = txCode;
// showPopup('confirm_topup_popup'); // openPopup('confirm_topup_popup');
// }).catch(error => { // }).catch(error => {
// notify(Array.isArray(error) ? error[1]: error, 'error'); // notify(Array.isArray(error) ? error[1]: error, 'error');
// if (Array.isArray(error) && error[0] === true && typeof error[1] === 'string') // if (Array.isArray(error) && error[0] === true && typeof error[1] === 'string')
@ -394,7 +416,7 @@ function confirmTopUp(button) {
console.log(result); console.log(result);
console.info('Completed cash-to-token request:', vectorClock); console.info('Completed cash-to-token request:', vectorClock);
notify("Completed request", 'success'); notify("Completed request", 'success');
hidePopup() closePopup()
}).catch(error => console.error(error)) }).catch(error => console.error(error))
.finally(() => buttonLoader(button, false)); .finally(() => buttonLoader(button, false));
}).catch(error => { }).catch(error => {
@ -428,7 +450,7 @@ function declineTopUp() {
console.log(result); console.log(result);
console.info('Rejected cash-to-token request:', vectorClock); console.info('Rejected cash-to-token request:', vectorClock);
notify('Rejected top-up request', 'success'); notify('Rejected top-up request', 'success');
hidePopup() closePopup()
}).catch(error => console.error(error)).finally(() => buttonLoader('decline_button', false)); }).catch(error => console.error(error)).finally(() => buttonLoader('decline_button', false));
} }
@ -737,7 +759,7 @@ async function saveFloId() {
syncUserData('savedIds', floGlobals.savedIds).then(() => { syncUserData('savedIds', floGlobals.savedIds).then(() => {
insertElementAlphabetically(title, render.savedId(floID, { title })) insertElementAlphabetically(title, render.savedId(floID, { title }))
notify(`Saved ${floID}`, 'success'); notify(`Saved ${floID}`, 'success');
hidePopup(); closePopup();
}).catch(error => { }).catch(error => {
notify(error, 'error'); notify(error, 'error');
}).finally(() => { }).finally(() => {
@ -749,7 +771,7 @@ delegate(getRef('saved_ids_list'), 'click', '.saved-id', e => {
const target = e.target.closest('.saved-id'); const target = e.target.closest('.saved-id');
getRef('edit_saved_id').setAttribute('value', target.dataset.floId); getRef('edit_saved_id').setAttribute('value', target.dataset.floId);
getRef('get_new_title').value = getFloIdTitle(target.dataset.floId); getRef('get_new_title').value = getFloIdTitle(target.dataset.floId);
showPopup('edit_saved_popup'); openPopup('edit_saved_popup');
} else if (e.target.closest('.copy-saved-id')) { } else if (e.target.closest('.copy-saved-id')) {
const target = e.target.closest('.saved-id'); const target = e.target.closest('.saved-id');
navigator.clipboard.writeText(target.dataset.floId) navigator.clipboard.writeText(target.dataset.floId)
@ -780,7 +802,7 @@ function saveIdChanges() {
potentialTarget.remove(); potentialTarget.remove();
insertElementAlphabetically(title, clone) insertElementAlphabetically(title, clone)
} }
hidePopup(); closePopup();
}).catch(error => { }).catch(error => {
notify(error, 'error'); notify(error, 'error');
}) })
@ -794,7 +816,7 @@ function deleteSavedId() {
if (toDelete) if (toDelete)
toDelete.remove(); toDelete.remove();
delete floGlobals.savedIds[getRef('edit_saved_id').value]; delete floGlobals.savedIds[getRef('edit_saved_id').value];
hidePopup(); closePopup();
syncUserData('savedIds', floGlobals.savedIds).then(() => { syncUserData('savedIds', floGlobals.savedIds).then(() => {
notify(`Deleted saved ID`, 'success'); notify(`Deleted saved ID`, 'success');
}).catch(error => { }).catch(error => {
@ -856,7 +878,7 @@ getRef('search_saved_ids_picker').addEventListener('keydown', e => {
delegate(getRef('saved_ids_picker_list'), 'click', '.saved-id', e => { delegate(getRef('saved_ids_picker_list'), 'click', '.saved-id', e => {
getRef('token_transfer__receiver').value = e.delegateTarget.dataset.floId getRef('token_transfer__receiver').value = e.delegateTarget.dataset.floId
getRef('token_transfer__receiver').focusIn() getRef('token_transfer__receiver').focusIn()
hidePopup() closePopup()
}) })
let currentUserAction; let currentUserAction;
@ -876,7 +898,7 @@ function showTokenTransfer(type) {
getRef('token_transfer__receiver').readOnly = false; getRef('token_transfer__receiver').readOnly = false;
getRef('token_transfer__receiver').querySelector('button').classList.remove('hide'); getRef('token_transfer__receiver').querySelector('button').classList.remove('hide');
} }
showPopup('token_transfer_popup'); openPopup('token_transfer_popup');
if (pagesData.lastPage === 'contact') { if (pagesData.lastPage === 'contact') {
getRef('token_transfer__amount').focusIn(); getRef('token_transfer__amount').focusIn();
} }
@ -890,7 +912,7 @@ userUI.sendMoneyToUser = function (floID, amount, remark) {
User.sendToken(floID, amount, "|" + remark).then(txid => { User.sendToken(floID, amount, "|" + remark).then(txid => {
console.warn(`Sent ${amount} to ${floID}`, txid); console.warn(`Sent ${amount} to ${floID}`, txid);
notify(`Sent ${amount} to ${getFloIdTitle(floID)}. It may take a few mins to reflect in their wallet`, 'success'); notify(`Sent ${amount} to ${getFloIdTitle(floID)}. It may take a few mins to reflect in their wallet`, 'success');
hidePopup() closePopup()
}).catch(error => notify(error, 'error')) }).catch(error => notify(error, 'error'))
.finally(() => { .finally(() => {
buttonLoader('token_transfer__button', false); buttonLoader('token_transfer__button', false);
@ -906,7 +928,7 @@ userUI.requestMoneyFromUser = function (floID, amount, remark) {
User.requestToken(floID, amount, remark).then(result => { User.requestToken(floID, amount, remark).then(result => {
console.log(`Requested ${amount} from ${floID}`, result); console.log(`Requested ${amount} from ${floID}`, result);
notify(`Requested ${amount} from ${getFloIdTitle(floID)}`, 'success'); notify(`Requested ${amount} from ${getFloIdTitle(floID)}`, 'success');
hidePopup() closePopup()
}).catch(error => notify(error, 'error')) }).catch(error => notify(error, 'error'))
.finally(() => { .finally(() => {
buttonLoader('token_transfer__button', false); buttonLoader('token_transfer__button', false);
@ -993,12 +1015,12 @@ function applyPaymentsFilters() {
} }
toggleFilters() toggleFilters()
render.paymentsHistory() render.paymentsHistory()
hidePopup() closePopup()
} }
function resetPaymentsFilters() { function resetPaymentsFilters() {
getRef('payments_type_filter').querySelector('input[value="all"]').checked = true; getRef('payments_type_filter').querySelector('input[value="all"]').checked = true;
render.paymentsHistory() render.paymentsHistory()
hidePopup() closePopup()
toggleFilters() toggleFilters()
} }
@ -1017,7 +1039,7 @@ function changeUpi() {
getRef('my_upi_id').value = upiId; getRef('my_upi_id').value = upiId;
getRef('change_upi_button').textContent = 'Change UPI ID'; getRef('change_upi_button').textContent = 'Change UPI ID';
notify('UPI ID updated successfully', 'success'); notify('UPI ID updated successfully', 'success');
hidePopup() closePopup()
}).catch(err => { }).catch(err => {
notify(err, 'error'); notify(err, 'error');
}); });

16
scripts/std_ui.js
View File

@ -88,15 +88,9 @@ function closePopup() {
return; return;
popupStack.peek().popup.hide() popupStack.peek().popup.hide()
} }
function popupState(show = false, id) {
if (show) {
openPopup(id);
} else {
closePopup();
}
}
document.addEventListener('popupopened', async e => { document.addEventListener('popupopened', async e => {
getRef('main_card').setAttribute('inert', '')
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
switch (e.target.id) { switch (e.target.id) {
case 'saved_ids_popup': case 'saved_ids_popup':
@ -116,8 +110,6 @@ document.addEventListener('popupopened', async e => {
} }
if (hasSavedIds) { if (hasSavedIds) {
const clone = frag.cloneNode(true) const clone = frag.cloneNode(true)
// getRef('select_topup_upi_id').append(frag)
// getRef('select_topup_upi_id').parentNode.classList.remove('hide')
getRef('select_withdraw_upi_id').append(clone) getRef('select_withdraw_upi_id').append(clone)
getRef('select_withdraw_upi_id').parentNode.classList.remove('hide') getRef('select_withdraw_upi_id').parentNode.classList.remove('hide')
} }
@ -132,8 +124,6 @@ document.addEventListener('popupclosed', e => {
getRef('search_saved_ids_picker').value = '' getRef('search_saved_ids_picker').value = ''
break; break;
case 'topup_wallet_popup': case 'topup_wallet_popup':
// getRef('select_topup_upi_id').parentNode.classList.add('hide')
// getRef('select_topup_upi_id').innerHTML = ''
showChildElement('topup_wallet_process', 0) showChildElement('topup_wallet_process', 0)
break; break;
case 'withdraw_wallet_popup': case 'withdraw_wallet_popup':
@ -148,6 +138,9 @@ document.addEventListener('popupclosed', e => {
showChildElement('confirm_topup_wrapper', 0); showChildElement('confirm_topup_wrapper', 0);
break; break;
} }
if (popupStack.items.length === 0) {
getRef('main_card').removeAttribute('inert')
}
}) })
// displays a popup for asking permission. Use this instead of JS confirm // displays a popup for asking permission. Use this instead of JS confirm
@ -415,6 +408,7 @@ async function showPage(targetPage, options = {}) {
getRef('pending_wallet_transactions').append(pendingWalletTransactions) getRef('pending_wallet_transactions').append(pendingWalletTransactions)
} }
walletHistoryLoader.init() walletHistoryLoader.init()
removeNotificationBadge('wallet_history_button')
break; break;
case 'requests': case 'requests':
const paymentRequests = []; const paymentRequests = [];