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

Feature update

Browse Source 
-- added option to selected saved ID when sending/requesting money
-- added live cashier status to wallet page
This commit is contained in:
sairaj mote 2022-04-28 02:38:05 +05:30
parent 087e38ac38
commit b17d3ca5bc
7 changed files with 129 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/main.css
View File

@ -763,6 +763,17 @@ ul {
fill: var(--accent-color); fill: var(--accent-color);
} }
#cashier_status {
font-size: 0.9rem;
padding: 1rem 1.2rem;
border-radius: 1rem;
background-color: rgba(240, 230, 140, 0.8);
color: rgba(0, 0, 0, 0.8);
}
#cashier_status .icon {
fill: rgba(0, 0, 0, 0.8);
}
#saved_ids_list { #saved_ids_list {
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

10
css/main.scss
View File

@ -717,6 +717,16 @@ ul {
fill: var(--accent-color); fill: var(--accent-color);
} }
} }
#cashier_status {
font-size: 0.9rem;
padding: 1rem 1.2rem;
border-radius: 1rem;
background-color: rgb(240, 230, 140, 0.8);
color: rgba(0, 0, 0, 0.8);
.icon {
fill: rgba(0, 0, 0, 0.8);
}
}
#saved_ids_list { #saved_ids_list {
display: grid; display: grid;

46
index.html
View File

@ -43,6 +43,7 @@
lastVC: {} lastVC: {}
} }
</script> </script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6" defer></script>
</head> </head>
<body onload="onLoadStartUp()" class="hide"> <body onload="onLoadStartUp()" class="hide">
@ -349,6 +350,13 @@
<h5>Balance</h5> <h5>Balance</h5>
<h1 class="h1" id="rupee_balance"></h1> <h1 class="h1" id="rupee_balance"></h1>
</div> </div>
<div id="cashier_status" class="hide flex align-center">
<svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px"
viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
</svg>
<span>Cashier is currently offline. Please check back again after a while.</span>
</div>
<div class="flex"> <div class="flex">
<button class="wallet-action" onclick="showPopup('topup_wallet_popup')"> <button class="wallet-action" onclick="showPopup('topup_wallet_popup')">
<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"
@ -546,7 +554,10 @@
autofocus> autofocus>
</sm-input> </sm-input>
<sm-input id="flo_id_title_to_save" placeholder="Title" animate required></sm-input> <sm-input id="flo_id_title_to_save" placeholder="Title" animate required></sm-input>
<button class="button button--primary cta" onclick="saveId()" type="submit">Save</button> <div class="multi-state-button">
<button id="save_flo_id_button" class="button button--primary cta" onclick="saveFloId()"
type="submit">Save</button>
</div>
</sm-form> </sm-form>
</sm-popup> </sm-popup>
<sm-popup id="edit_saved_popup"> <sm-popup id="edit_saved_popup">
@ -599,6 +610,15 @@
<sm-form> <sm-form>
<sm-input id="token_transfer__receiver" placeholder="FLO ID" error-text="Invalid FLO ID" data-flo-id <sm-input id="token_transfer__receiver" placeholder="FLO ID" error-text="Invalid FLO ID" data-flo-id
animate required autofocus> animate required autofocus>
<button slot="right" class="icon-only" onclick="showPopup('saved_ids_popup')"
title="Select from saved IDs">
<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="M21 5v14h2V5h-2zm-4 14h2V5h-2v14zM14 5H2c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zM8 7.75c1.24 0 2.25 1.01 2.25 2.25S9.24 12.25 8 12.25 5.75 11.24 5.75 10 6.76 7.75 8 7.75zM12.5 17h-9v-.75c0-1.5 3-2.25 4.5-2.25s4.5.75 4.5 2.25V17z" />
</svg>
</button>
</sm-input> </sm-input>
<sm-input id="token_transfer__amount" type="number" placeholder="0" required min="1"> <sm-input id="token_transfer__amount" type="number" placeholder="0" required min="1">
<svg slot="icon" class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" <svg slot="icon" class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
@ -620,6 +640,28 @@
</sm-form> </sm-form>
</section> </section>
</sm-popup> </sm-popup>
<sm-popup id="saved_ids_popup">
<header slot="header" class="popup__header">
<div class="grid gap-1">
<button class="popup__header__close justify-self-start" onclick="hidePopup()">
<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="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
</svg>
</button>
<sm-input id="search_saved_ids_picker" placeholder="Search"></sm-input>
</div>
</header>
<section class="grid gap-1">
<ul id="saved_ids_picker_list" class="observe-empty-state grid gap-0-5 h-100" style="overflow-y: auto;">
</ul>
<div class="empty-state">
<h4>No saved FLO IDs</h4>
</div>
</section>
</sm-popup>
<sm-popup id="topup_wallet_popup"> <sm-popup id="topup_wallet_popup">
<header slot="header" class="popup__header"> <header slot="header" class="popup__header">
<button class="popup__header__close justify-self-start" onclick="hidePopup()"> <button class="popup__header__close justify-self-start" onclick="hidePopup()">
@ -661,7 +703,7 @@
<p id="topup_wallet__details"></p> <p id="topup_wallet__details"></p>
</div> </div>
<sm-copy id="topup_wallet__upi_id" style="font-weight: 700;"></sm-copy> <sm-copy id="topup_wallet__upi_id" style="font-weight: 700;"></sm-copy>
<p>After sending money, please enter the UPI transaction ID of completed transfer.</p> <p>After sending money, please enter the transaction ID of completed transaction.</p>
<sm-input id="topup_wallet__txid" minlength="12" maxlength="12" <sm-input id="topup_wallet__txid" minlength="12" maxlength="12"
error-text="Please enter UPI transaction ID of money you sent to continue." error-text="Please enter UPI transaction ID of money you sent to continue."
placeholder="UPI transaction ID" autofocus animate required></sm-input> placeholder="UPI transaction ID" autofocus animate required></sm-input>

7
scripts/fn_pay.js
View File

@ -31,6 +31,13 @@ User.init = function () {
for (let i in d) for (let i in d)
cashierStatus[i] = d[i]; cashierStatus[i] = d[i];
//Add any UI_fn if any //Add any UI_fn if any
if (User.findCashier()) {
getRef('cashier_status').classList.add('hide')
document.querySelectorAll('.wallet-action').forEach(elem => elem.disabled = false);
} else {
getRef('cashier_status').classList.remove('hide')
document.querySelectorAll('.wallet-action').forEach(elem => elem.disabled = true);
}
} }
})) }))
/* /*

56
scripts/fn_ui.js
View File

@ -514,7 +514,20 @@ const render = {
clone.dataset.upiId = upiId; clone.dataset.upiId = upiId;
clone.querySelector('.saved-upi__id').textContent = upiId; clone.querySelector('.saved-upi__id').textContent = upiId;
return clone; return clone;
} },
savedIdPickerCard(floID, { title }) {
return createElement('li', {
className: 'saved-id grid interact',
attributes: { 'tabindex': '0', 'data-flo-id': floID },
innerHTML: `
<div class="saved-id__initials">${title[0]}</div>
<div class="grid gap-0-5">
<h4 class="saved-id__title">${title}</h4>
<div class="saved-id__flo-id overflow-ellipsis">${floID}</div>
</div>
`
})
},
}; };
function buttonLoader(id, show) { function buttonLoader(id, show) {
@ -562,18 +575,21 @@ userUI.renderSavedIds = async function () {
}) })
getRef('saved_ids_list').append(frag); getRef('saved_ids_list').append(frag);
} }
async function saveId() { async function saveFloId() {
const floID = getRef('flo_id_to_save').value.trim(); const floID = getRef('flo_id_to_save').value.trim();
if (floGlobals.savedIds.hasOwnProperty(floID)) if (floGlobals.savedIds.hasOwnProperty(floID))
return notify('This FLO ID is already saved', 'error'); return notify('This FLO ID is already saved', 'error');
const title = getRef('flo_id_title_to_save').value.trim(); const title = getRef('flo_id_title_to_save').value.trim();
floGlobals.savedIds[floID] = { title } floGlobals.savedIds[floID] = { title }
buttonLoader('save_flo_id_button', true);
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(); hidePopup();
}).catch(error => { }).catch(error => {
notify(error, 'error'); notify(error, 'error');
}).finally(() => {
buttonLoader('save_flo_id_button', false);
}) })
} }
delegate(getRef('saved_ids_list'), 'click', '.saved-id', e => { delegate(getRef('saved_ids_list'), 'click', '.saved-id', e => {
@ -657,6 +673,40 @@ function insertElementAlphabetically(name, elementToInsert) {
} }
} }
getRef('search_saved_ids_picker').addEventListener('input', debounce(async e => {
const frag = document.createDocumentFragment()
const searchKey = e.target.value.trim();
let allSavedIds = getArrayOfSavedIds();
if (searchKey !== '') {
const fuse = new Fuse(allSavedIds, { keys: ['floID', 'details.title'] })
allSavedIds = fuse.search(searchKey).map(v => v.item)
}
allSavedIds.forEach(({ floID, details }) => {
frag.append(render.savedIdPickerCard(floID, details))
})
getRef('saved_ids_picker_list').innerHTML = '';
getRef('saved_ids_picker_list').append(frag);
if (searchKey !== '') {
const potentialTarget = getRef('saved_ids_picker_list').firstElementChild
if (potentialTarget) {
potentialTarget.classList.add('highlight')
}
}
}, 100))
getRef('search_saved_ids_picker').addEventListener('keydown', e => {
if (e.key === 'Enter') {
const potentialTarget = getRef('saved_ids_picker_list').firstElementChild
if (potentialTarget) {
potentialTarget.click()
}
}
})
delegate(getRef('saved_ids_picker_list'), 'click', '.saved-id', e => {
getRef('token_transfer__receiver').value = e.delegateTarget.dataset.floId
getRef('token_transfer__receiver').focusIn()
hidePopup()
})
let currentUserAction; let currentUserAction;
function showTokenTransfer(type) { function showTokenTransfer(type) {
getRef('tt_button').textContent = type; getRef('tt_button').textContent = type;
@ -669,8 +719,10 @@ function showTokenTransfer(type) {
if (pagesData.lastPage === 'contact') { if (pagesData.lastPage === 'contact') {
getRef('token_transfer__receiver').value = pagesData.params.floId; getRef('token_transfer__receiver').value = pagesData.params.floId;
getRef('token_transfer__receiver').readOnly = true; getRef('token_transfer__receiver').readOnly = true;
getRef('token_transfer__receiver').querySelector('button').classList.add('hide');
} else { } else {
getRef('token_transfer__receiver').readOnly = false; getRef('token_transfer__receiver').readOnly = false;
getRef('token_transfer__receiver').querySelector('button').classList.remove('hide');
} }
showPopup('token_transfer_popup'); showPopup('token_transfer_popup');
if (pagesData.lastPage === 'contact') { if (pagesData.lastPage === 'contact') {

5
scripts/std_ui.js
View File

@ -92,9 +92,8 @@ document.addEventListener('popupopened', async e => {
const frag = document.createDocumentFragment() const frag = document.createDocumentFragment()
switch (e.target.id) { switch (e.target.id) {
case 'saved_ids_popup': case 'saved_ids_popup':
const allSavedIds = await getArrayOfSavedIds() getArrayOfSavedIds().forEach(({ floID, details }) => {
allSavedIds.forEach(({ floID, name }) => { frag.append(render.savedIdPickerCard(floID, details))
frag.append(render.savedIdPickerCard(floID, name))
}) })
getRef('saved_ids_picker_list').innerHTML = '' getRef('saved_ids_picker_list').innerHTML = ''
getRef('saved_ids_picker_list').append(frag) getRef('saved_ids_picker_list').append(frag)