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

Added option to save and access UPI IDs

Browse Source
This commit is contained in:
sairaj mote 2022-04-21 19:53:11 +05:30
parent 5774a3db05
commit 2b171a619c
6 changed files with 132 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/main.css
View File

@ -1140,6 +1140,21 @@ ul {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
#saved_upi_ids_list {
display: grid;
gap: 0.5rem;
width: min(24rem, 100%);
}
.saved-upi {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.4rem 0.4rem 0.4rem 1rem;
border-radius: 0.5rem;
background-color: rgba(var(--foreground-color), 1);
}
@media screen and (max-width: 40rem) { @media screen and (max-width: 40rem) {
#main_navbar.hide-away { #main_navbar.hide-away {
bottom: 0; bottom: 0;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

14
css/main.scss
View File

@ -4,7 +4,6 @@
box-sizing: border-box; box-sizing: border-box;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
} }
:root { :root {
font-size: clamp(1rem, 1.2vmax, 1.2rem); font-size: clamp(1rem, 1.2vmax, 1.2rem);
} }
@ -1077,6 +1076,19 @@ ul {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
} }
#saved_upi_ids_list {
display: grid;
gap: 0.5rem;
width: min(24rem, 100%);
}
.saved-upi {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.4rem 0.4rem 0.4rem 1rem;
border-radius: 0.5rem;
background-color: rgba(var(--foreground-color), 1);
}
@media screen and (max-width: 40rem) { @media screen and (max-width: 40rem) {
#main_navbar { #main_navbar {
&.hide-away { &.hide-away {

41
index.html
View File

@ -789,12 +789,29 @@
transform="translate(-223.5 -209.52444)" fill="#cacaca" /> transform="translate(-223.5 -209.52444)" fill="#cacaca" />
</svg> </svg>
</div> </div>
<section class="grid gap-1"> <section class="grid gap-2">
<div class="grid"> <div class="grid gap-1">
<h5>My FLO ID</h5> <div class="grid">
<sm-copy id="logged_in_user_id" style="font-size: 0.9rem;"></sm-copy> <h5>My FLO ID</h5>
<sm-copy id="logged_in_user_id" style="font-size: 0.9rem;"></sm-copy>
</div>
<sm-button class="danger justify-self-start" onclick="signOut()">Sign out</sm-button>
</div>
<div class="grid gap-1">
<h4>My UPI IDs</h4>
<ul id="saved_upi_ids_list" class="observe-empty-state"></ul>
<div class="empty-state">
<p>Add your UPI IDs for easier access during transactions.</p>
</div>
<button class="button justify-self-start" onclick="showPopup('save_upi_popup')">
<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="M0 0h24v24H0V0z" fill="none" />
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
</svg>
Add UPI ID
</button>
</div> </div>
<sm-button class="danger justify-self-start" onclick="signOut()">Sign out</sm-button>
</section> </section>
<section class="admin-element grid gap-1"> <section class="admin-element grid gap-1">
<h4>Change UPI ID</h4> <h4>Change UPI ID</h4>
@ -1185,6 +1202,19 @@
</li> </li>
</template> </template>
<template id="saved_upi_template">
<li class="saved-upi">
<div class="saved-upi__id"></div>
<button class="delete-upi" title="Delete this UPI ID">
<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="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
</svg>
</button>
</li>
</template>
<script src="scripts/components.js"></script> <script src="scripts/components.js"></script>
<script src="scripts/std_ui.js"></script> <script src="scripts/std_ui.js"></script>
<script src="scripts/std_op.js"></script> <script src="scripts/std_op.js"></script>
@ -1219,6 +1249,7 @@
}).catch(error => console.error(error)) }).catch(error => console.error(error))
} else { } else {
userUI.renderSavedIds() userUI.renderSavedIds()
renderSavedUpiIds()
userUI.renderCashierRequests(User.cashierRequests); userUI.renderCashierRequests(User.cashierRequests);
userUI.renderMoneyRequests(User.moneyRequests); userUI.renderMoneyRequests(User.moneyRequests);
User.init().then(result => { User.init().then(result => {

137
scripts/fn_ui.js
View File

@ -21,7 +21,7 @@ async function organizeSyncedData(obsName) {
const dataToDecrypt = floCloudAPI.util.decodeMessage(fetchedData[0].message); const dataToDecrypt = floCloudAPI.util.decodeMessage(fetchedData[0].message);
const decryptedData = JSON.parse(Crypto.AES.decrypt(dataToDecrypt, myPrivKey)); const decryptedData = JSON.parse(Crypto.AES.decrypt(dataToDecrypt, myPrivKey));
for (let key in decryptedData) { for (let key in decryptedData) {
floGlobals[fetchedData][key] = decryptedData[key]; floGlobals[obsName][key] = decryptedData[key];
compactIDB.addData(obsName, decryptedData[key], key); compactIDB.addData(obsName, decryptedData[key], key);
} }
compactIDB.addData(obsName, fetchedData[0].time, 'lastSyncTime'); compactIDB.addData(obsName, fetchedData[0].time, 'lastSyncTime');
@ -64,13 +64,13 @@ function withdrawMoneyFromWallet() {
if (!cashier) if (!cashier)
return notify("No cashier online. Please try again in a while.", 'error'); return notify("No cashier online. Please try again in a while.", 'error');
let amount = parseFloat(getRef('send_cashier_amount').value.trim()); let amount = parseFloat(getRef('send_cashier_amount').value.trim());
// let upiID = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`); // let upiId = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`);
const upiID = getRef('select_upi_id').value; const upiId = getRef('select_upi_id').value;
if (!upiID) if (!upiId)
return notify("Please add an UPI ID to continue", 'error'); return notify("Please add an UPI ID to continue", 'error');
User.sendToken(cashier, amount, 'for token-to-cash').then(txid => { User.sendToken(cashier, amount, 'for token-to-cash').then(txid => {
console.warn(`Withdraw ${amount} from cashier ${cashier}`, txid); console.warn(`Withdraw ${amount} from cashier ${cashier}`, txid);
User.tokenToCash(cashier, amount, txid, upiID).then(result => { User.tokenToCash(cashier, amount, txid, upiId).then(result => {
console.log(result); console.log(result);
notify("Requested cashier. please wait!"); notify("Requested cashier. please wait!");
}).catch(error => console.error(error)) }).catch(error => console.error(error))
@ -80,90 +80,59 @@ function withdrawMoneyFromWallet() {
async function renderSavedUpiIds() { async function renderSavedUpiIds() {
const frag = document.createDocumentFragment(); const frag = document.createDocumentFragment();
await organizeSyncedData('savedUserData'); await organizeSyncedData('savedUserData');
console.log(floGlobals.savedUserData) for (const upiId in floGlobals.savedUserData.upiIds) {
frag.append(render.savedUpiId(upiId));
}
getRef('saved_upi_ids_list').append(frag);
} }
function saveUpiId() { function saveUpiId() {
const upiID = getRef('get_upi_id').value.trim(); const upiId = getRef('get_upi_id').value.trim();
if (upiID === '') if (upiId === '')
return notify("Please add an UPI ID to continue", 'error'); return notify("Please add an UPI ID to continue", 'error');
if (floGlobals.savedUserData.upiIds.hasOwnProperty(upiID)) if (floGlobals.savedUserData.upiIds.hasOwnProperty(upiId))
return notify('This UPI ID is already saved', 'error'); return notify('This UPI ID is already saved', 'error');
floGlobals.savedUserData.upiIds[upiID] = {} floGlobals.savedUserData.upiIds[upiId] = {}
syncUserData('savedUserData', floGlobals.savedUserData).then(() => { syncUserData('savedUserData', floGlobals.savedUserData).then(() => {
notify(`Saved ${upiID}`, 'success'); notify(`Saved ${upiId}`, 'success');
if (pagesData.lastPage === 'settings') {
getRef('saved_upi_ids_list').append(render.savedUpiId(upiId));
} else if (pagesData.lastPage === 'wallet') {
getRef('select_upi_id').append(
createElement('sm-option', {
textContent: upiId,
attributes: {
value: upiId,
}
})
)
getRef('select_upi_id').parentNode.classList.remove('hide')
}
hidePopup(); hidePopup();
}).catch(error => { }).catch(error => {
notify(error, 'error'); notify(error, 'error');
}) })
} }
// delegate(getRef('saved_ids_list'), 'click', '.saved-id', e => { delegate(getRef('saved_upi_ids_list'), 'click', '.saved-upi', e => {
// if (e.target.closest('.edit-saved')) { if (e.target.closest('.delete-upi')) {
// const target = e.target.closest('.saved-id'); const upiId = e.delegateTarget.dataset.upiId;
// getRef('edit_saved_id').setAttribute('value', target.dataset.floId); getConfirmation('Do you want delete this FLO ID?', {
// getRef('get_new_title').value = getFloIdTitle(target.dataset.floId); confirmText: 'Delete',
// showPopup('edit_saved_popup'); }).then(res => {
// } else if (e.target.closest('.copy-saved-id')) { if (res) {
// const target = e.target.closest('.saved-id'); const toDelete = getRef('saved_upi_ids_list').querySelector(`.saved-upi[data-upi-id="${upiId}"]`);
// navigator.clipboard.writeText(target.dataset.floId) if (toDelete)
// target.dispatchEvent( toDelete.remove();
// new CustomEvent('copy', { delete floGlobals.savedUserData.upiIds[upiId];
// bubbles: true, hidePopup();
// cancelable: true, syncUserData('savedUserData', floGlobals.savedUserData).then(() => {
// }) notify(`Deleted UPI ID`, 'success');
// ); }).catch(error => {
// } else { notify(error, 'error');
// const target = e.target.closest('.saved-id'); });
// window.location.hash = `#/contact?floId=${target.dataset.floId}`; }
// } });
// }); }
// function saveIdChanges() { });
// const floID = getRef('edit_saved_id').value;
// let title = getRef('get_new_title').value.trim();
// if (title == '')
// title = 'Unknown';
// floGlobals.savedIds[floID] = { title }
// syncUserData('savedIds', floGlobals.savedIds).then(() => {
// const potentialTarget = getRef('saved_ids_list').querySelector(`.saved-id[data-flo-id="${floID}"]`)
// if (potentialTarget) {
// potentialTarget.querySelector('.saved-id__title').textContent = title;
// potentialTarget.querySelector('.saved-id__initials').textContent = title.charAt(0).toUpperCase();
// // place the renamed card in alphabetically correct position
// const clone = potentialTarget.cloneNode(true);
// potentialTarget.remove();
// insertElementAlphabetically(title, clone)
// }
// hidePopup();
// }).catch(error => {
// notify(error, 'error');
// })
// }
// function deleteSavedId() {
// getConfirmation('Do you want delete this FLO ID?', {
// confirmText: 'Delete',
// }).then(res => {
// if (res) {
// const toDelete = getRef('saved_ids_list').querySelector(`.saved-id[data-flo-id="${getRef('edit_saved_id').value}"]`);
// if (toDelete)
// toDelete.remove();
// delete floGlobals.savedIds[getRef('edit_saved_id').value];
// hidePopup();
// syncUserData('savedIds', floGlobals.savedIds).then(() => {
// notify(`Deleted saved ID`, 'success');
// }).catch(error => {
// notify(error, 'error');
// });
// }
// });
// }
// const savedIdsObserver = new MutationObserver((mutationList) => {
// mutationList.forEach(mutation => {
// getRef('saved_ids_tip').textContent = mutation.target.children.length === 0 ? `Click 'Add FLO ID' to add a new FLO ID.` : `Tap on saved IDs to see transaction history.`
// })
// })
// savedIdsObserver.observe(getRef('saved_ids_list'), {
// childList: true,
// })
userUI.sendMoneyToUser = function (floID, amount, remark) { userUI.sendMoneyToUser = function (floID, amount, remark) {
getConfirmation('Confirm', { message: `Do you want to SEND ${amount} to ${floID}?` }).then(confirmation => { getConfirmation('Confirm', { message: `Do you want to SEND ${amount} to ${floID}?` }).then(confirmation => {
@ -447,6 +416,12 @@ const render = {
clone.querySelector('.transaction-message__amount').textContent = formatAmount(tokenAmount); clone.querySelector('.transaction-message__amount').textContent = formatAmount(tokenAmount);
clone.querySelector('.transaction-message__time').textContent = getFormattedTime(time * 1000); clone.querySelector('.transaction-message__time').textContent = getFormattedTime(time * 1000);
return clone; return clone;
},
savedUpiId(upiId) {
const clone = getRef('saved_upi_template').content.cloneNode(true).firstElementChild;
clone.dataset.upiId = upiId;
clone.querySelector('.saved-upi__id').textContent = upiId;
return clone;
} }
}; };
@ -588,8 +563,8 @@ function executeUserAction() {
} }
function changeUpi() { function changeUpi() {
const upiID = getRef('upi_id').value.trim(); const upiId = getRef('upi_id').value.trim();
Cashier.updateUPI(upiID).then(() => { Cashier.updateUPI(upiId).then(() => {
notify('UPI ID updated successfully', 'success'); notify('UPI ID updated successfully', 'success');
}).catch(err => { }).catch(err => {
notify(err, 'error'); notify(err, 'error');

22
scripts/std_ui.js
View File

@ -101,18 +101,18 @@ document.addEventListener('popupopened', async e => {
getRef('search_saved_ids_picker').focusIn() getRef('search_saved_ids_picker').focusIn()
break; break;
case 'withdraw_wallet_popup': case 'withdraw_wallet_popup':
// const savedUpiIds = ['7744023898@paytm', '7744023898@ybl']; let hasSavedIds = false
const savedUpiIds = []; for (const upiId in floGlobals.savedUserData.upiIds) {
if (savedUpiIds.length > 0) { frag.append(createElement('sm-option', {
textContent: upiId,
attributes: {
value: upiId,
}
}))
hasSavedIds = true
}
if (hasSavedIds) {
getRef('select_upi_id').parentNode.classList.remove('hide') getRef('select_upi_id').parentNode.classList.remove('hide')
savedUpiIds.forEach((id, index) => {
frag.append(createElement('sm-option', {
textContent: id,
attributes: {
value: id,
}
}))
})
getRef('select_upi_id').append(frag) getRef('select_upi_id').append(frag)
} }
break; break;