Added option to save and access UPI IDs
This commit is contained in:
sairaj mote
parent
5774a3db05
commit
2b171a619c
15
css/main.css
15
css/main.css
@ -1140,6 +1140,21 @@ ul {
|
||||
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) {
|
||||
#main_navbar.hide-away {
|
||||
bottom: 0;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -4,7 +4,6 @@
|
||||
box-sizing: border-box;
|
||||
font-family: "Roboto", sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-size: clamp(1rem, 1.2vmax, 1.2rem);
|
||||
}
|
||||
@ -1077,6 +1076,19 @@ ul {
|
||||
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) {
|
||||
#main_navbar {
|
||||
&.hide-away {
|
||||
|
||||
41
index.html
41
index.html
@ -789,12 +789,29 @@
|
||||
transform="translate(-223.5 -209.52444)" fill="#cacaca" />
|
||||
</svg>
|
||||
</div>
|
||||
<section class="grid gap-1">
|
||||
<div class="grid">
|
||||
<h5>My FLO ID</h5>
|
||||
<sm-copy id="logged_in_user_id" style="font-size: 0.9rem;"></sm-copy>
|
||||
<section class="grid gap-2">
|
||||
<div class="grid gap-1">
|
||||
<div class="grid">
|
||||
<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>
|
||||
<sm-button class="danger justify-self-start" onclick="signOut()">Sign out</sm-button>
|
||||
</section>
|
||||
<section class="admin-element grid gap-1">
|
||||
<h4>Change UPI ID</h4>
|
||||
@ -1185,6 +1202,19 @@
|
||||
</li>
|
||||
</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/std_ui.js"></script>
|
||||
<script src="scripts/std_op.js"></script>
|
||||
@ -1219,6 +1249,7 @@
|
||||
}).catch(error => console.error(error))
|
||||
} else {
|
||||
userUI.renderSavedIds()
|
||||
renderSavedUpiIds()
|
||||
userUI.renderCashierRequests(User.cashierRequests);
|
||||
userUI.renderMoneyRequests(User.moneyRequests);
|
||||
User.init().then(result => {
|
||||
|
||||
137
scripts/fn_ui.js
137
scripts/fn_ui.js
@ -21,7 +21,7 @@ async function organizeSyncedData(obsName) {
|
||||
const dataToDecrypt = floCloudAPI.util.decodeMessage(fetchedData[0].message);
|
||||
const decryptedData = JSON.parse(Crypto.AES.decrypt(dataToDecrypt, myPrivKey));
|
||||
for (let key in decryptedData) {
|
||||
floGlobals[fetchedData][key] = decryptedData[key];
|
||||
floGlobals[obsName][key] = decryptedData[key];
|
||||
compactIDB.addData(obsName, decryptedData[key], key);
|
||||
}
|
||||
compactIDB.addData(obsName, fetchedData[0].time, 'lastSyncTime');
|
||||
@ -64,13 +64,13 @@ function withdrawMoneyFromWallet() {
|
||||
if (!cashier)
|
||||
return notify("No cashier online. Please try again in a while.", 'error');
|
||||
let amount = parseFloat(getRef('send_cashier_amount').value.trim());
|
||||
// let upiID = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`);
|
||||
const upiID = getRef('select_upi_id').value;
|
||||
if (!upiID)
|
||||
// let upiId = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`);
|
||||
const upiId = getRef('select_upi_id').value;
|
||||
if (!upiId)
|
||||
return notify("Please add an UPI ID to continue", 'error');
|
||||
User.sendToken(cashier, amount, 'for token-to-cash').then(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);
|
||||
notify("Requested cashier. please wait!");
|
||||
}).catch(error => console.error(error))
|
||||
@ -80,90 +80,59 @@ function withdrawMoneyFromWallet() {
|
||||
async function renderSavedUpiIds() {
|
||||
const frag = document.createDocumentFragment();
|
||||
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() {
|
||||
const upiID = getRef('get_upi_id').value.trim();
|
||||
if (upiID === '')
|
||||
const upiId = getRef('get_upi_id').value.trim();
|
||||
if (upiId === '')
|
||||
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');
|
||||
floGlobals.savedUserData.upiIds[upiID] = {}
|
||||
floGlobals.savedUserData.upiIds[upiId] = {}
|
||||
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();
|
||||
}).catch(error => {
|
||||
notify(error, 'error');
|
||||
})
|
||||
}
|
||||
// delegate(getRef('saved_ids_list'), 'click', '.saved-id', e => {
|
||||
// if (e.target.closest('.edit-saved')) {
|
||||
// const target = e.target.closest('.saved-id');
|
||||
// getRef('edit_saved_id').setAttribute('value', target.dataset.floId);
|
||||
// getRef('get_new_title').value = getFloIdTitle(target.dataset.floId);
|
||||
// showPopup('edit_saved_popup');
|
||||
// } else if (e.target.closest('.copy-saved-id')) {
|
||||
// const target = e.target.closest('.saved-id');
|
||||
// navigator.clipboard.writeText(target.dataset.floId)
|
||||
// target.dispatchEvent(
|
||||
// new CustomEvent('copy', {
|
||||
// bubbles: true,
|
||||
// cancelable: true,
|
||||
// })
|
||||
// );
|
||||
// } else {
|
||||
// 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,
|
||||
// })
|
||||
delegate(getRef('saved_upi_ids_list'), 'click', '.saved-upi', e => {
|
||||
if (e.target.closest('.delete-upi')) {
|
||||
const upiId = e.delegateTarget.dataset.upiId;
|
||||
getConfirmation('Do you want delete this FLO ID?', {
|
||||
confirmText: 'Delete',
|
||||
}).then(res => {
|
||||
if (res) {
|
||||
const toDelete = getRef('saved_upi_ids_list').querySelector(`.saved-upi[data-upi-id="${upiId}"]`);
|
||||
if (toDelete)
|
||||
toDelete.remove();
|
||||
delete floGlobals.savedUserData.upiIds[upiId];
|
||||
hidePopup();
|
||||
syncUserData('savedUserData', floGlobals.savedUserData).then(() => {
|
||||
notify(`Deleted UPI ID`, 'success');
|
||||
}).catch(error => {
|
||||
notify(error, 'error');
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
userUI.sendMoneyToUser = function (floID, amount, remark) {
|
||||
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__time').textContent = getFormattedTime(time * 1000);
|
||||
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() {
|
||||
const upiID = getRef('upi_id').value.trim();
|
||||
Cashier.updateUPI(upiID).then(() => {
|
||||
const upiId = getRef('upi_id').value.trim();
|
||||
Cashier.updateUPI(upiId).then(() => {
|
||||
notify('UPI ID updated successfully', 'success');
|
||||
}).catch(err => {
|
||||
notify(err, 'error');
|
||||
|
||||
@ -101,18 +101,18 @@ document.addEventListener('popupopened', async e => {
|
||||
getRef('search_saved_ids_picker').focusIn()
|
||||
break;
|
||||
case 'withdraw_wallet_popup':
|
||||
// const savedUpiIds = ['7744023898@paytm', '7744023898@ybl'];
|
||||
const savedUpiIds = [];
|
||||
if (savedUpiIds.length > 0) {
|
||||
let hasSavedIds = false
|
||||
for (const upiId in floGlobals.savedUserData.upiIds) {
|
||||
frag.append(createElement('sm-option', {
|
||||
textContent: upiId,
|
||||
attributes: {
|
||||
value: upiId,
|
||||
}
|
||||
}))
|
||||
hasSavedIds = true
|
||||
}
|
||||
if (hasSavedIds) {
|
||||
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)
|
||||
}
|
||||
break;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user