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

Merge pull request #11 from ranchimall/ui-work

Browse Source 
adding transaction details page
This commit is contained in:
sairaj mote 2022-04-17 21:15:56 +05:30 committed by GitHub
commit 0f829d5e62
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 306 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
css/main.css
View File

@ -247,27 +247,6 @@ ul {
grid-column: 1/-1;
}
.h1 {
font-size: 1.5rem;
}
.h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.2rem;
line-height: 1.3;
}
.h4 {
font-size: 0.9rem;
}
.h5 {
font-size: 0.75rem;
}
.uppercase {
text-transform: uppercase;
}
@ -346,7 +325,7 @@ h3 {
}
.justify-start {
justify-content: start;
justify-items: start;
}
.justify-center {
@ -630,7 +609,7 @@ h3 {
padding: 0.5rem 0.3rem;
color: var(--text-color);
font-size: 0.7rem;
border-radius: 0.7rem;
border-radius: 0.3rem;
}
.nav-item .icon {
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
@ -699,13 +678,15 @@ h3 {
position: relative;
}
#user {
#user,
#cashier {
position: relative;
gap: 2rem;
height: 100%;
padding: 0 1.5rem;
overflow-y: auto;
padding-bottom: 5rem;
align-content: flex-start;
}
#quick_actions_container {
@ -732,10 +713,10 @@ h3 {
}
#rupee_balance span:first-of-type {
font-size: 1.5rem;
font-size: 2rem;
}
#rupee_balance span:last-of-type {
font-size: 0.8rem;
font-size: 1rem;
}
.wallet-action {
@ -761,19 +742,20 @@ h3 {
grid-template-columns: auto 1fr;
gap: 0 0.8rem;
border-radius: 0.3rem;
padding: 0.5rem 0;
background-color: rgba(var(--text-color), 0.03);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
align-items: center;
}
.saved-id.highlight {
box-shadow: 0 0 0.1rem 0.1rem var(--accent-color) inset;
}
.saved-id .edit-saved {
grid-area: 1/1/3/2;
padding: 0.3rem;
position: relative;
justify-self: center;
}
.saved-id .edit-saved .icon {
position: absolute;
@ -801,8 +783,13 @@ h3 {
border-radius: 2rem;
}
.saved-id__title {
font-size: 0.9rem;
font-weight: 500;
align-self: flex-end;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.saved-id__flo-id {
font-size: 0.8rem;
}
.card {
@ -827,7 +814,7 @@ h3 {
overflow-y: auto;
flex: 1;
padding: 0 max(1rem, 8vw);
align-items: flex-start;
align-content: flex-start;
}
.transaction-message {
@ -859,6 +846,10 @@ h3 {
font-size: 0.8rem;
}
#transaction {
padding: 1.5rem;
}
#wallet_history_wrapper {
margin-top: 1.5rem;
padding-bottom: 3rem;
@ -904,9 +895,7 @@ h3 {
border-radius: 2rem;
}
.transaction__receiver {
font-size: 0.9rem;
font-weight: 500;
color: rgba(var(--text-color), 0.8);
}
.transaction__time {
font-size: 0.8rem;
@ -1028,7 +1017,7 @@ h3 {
align-items: center;
padding: 0.8rem;
border-radius: 0.3rem;
background-color: rgba(var(--text-color), 0.06);
background-color: rgba(var(--text-color), 0.03);
}
.cashier-request:not(:last-of-type),
.payment-request:not(:last-of-type) {
@ -1039,14 +1028,44 @@ h3 {
font-size: 0.8rem;
}
#payment_request_history {
padding-bottom: 3rem;
}
.payment-request {
display: grid;
gap: 0.5rem 1rem;
grid-template-columns: 1fr auto;
color: rgba(var(--text-color), 1);
}
.payment-request__amount {
font-weight: 700;
text-align: right;
}
.payment-request__status {
display: flex;
align-items: center;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.05em;
}
.payment-request__status .icon {
height: 1rem;
width: 1rem;
margin-left: 0.3rem;
}
.payment-request .icon.paid {
fill: var(--green);
}
.payment-request .icon.declined {
fill: var(--danger-color);
}
.payment-request .button {
background-color: transparent;
padding: 0.6rem 0.8rem;
color: var(--accent-color);
background-color: rgba(var(--foreground-color), 1);
}
.wallet-request {
display: grid;
@ -1121,7 +1140,7 @@ h3 {
height: calc(100vh - 3rem);
width: calc(100vw - 3rem);
position: relative;
border-radius: 1rem;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 1rem 3rem rgba(0, 0, 0, 0.2);
}
@ -1166,13 +1185,8 @@ h3 {
padding: 1.5rem;
}
#user {
gap: 1rem;
align-items: flex-start;
}
#saved_ids_list {
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
}
@media screen and (min-width: 56rem) {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

94
css/main.scss
View File

@ -219,27 +219,6 @@ ul {
.full-bleed {
grid-column: 1/-1;
}
.h1 {
font-size: 1.5rem;
}
.h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.2rem;
line-height: 1.3;
}
.h4 {
font-size: 0.9rem;
}
.h5 {
font-size: 0.75rem;
}
.uppercase {
text-transform: uppercase;
}
@ -312,7 +291,7 @@ h3 {
}
.justify-start {
justify-content: start;
justify-items: start;
}
.justify-center {
@ -587,7 +566,7 @@ h3 {
padding: 0.5rem 0.3rem;
color: var(--text-color);
font-size: 0.7rem;
border-radius: 0.7rem;
border-radius: 0.3rem;
.icon {
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@ -653,13 +632,15 @@ h3 {
padding: 0;
position: relative;
}
#user {
#user,
#cashier {
position: relative;
gap: 2rem;
height: 100%;
padding: 0 1.5rem;
overflow-y: auto;
padding-bottom: 5rem;
align-content: flex-start;
}
#quick_actions_container {
display: grid;
@ -684,10 +665,10 @@ h3 {
}
#rupee_balance {
span:first-of-type {
font-size: 1.5rem;
font-size: 2rem;
}
span:last-of-type {
font-size: 0.8rem;
font-size: 1rem;
}
}
.wallet-action {
@ -712,15 +693,16 @@ h3 {
grid-template-columns: auto 1fr;
gap: 0 0.8rem;
border-radius: 0.3rem;
padding: 0.5rem 0;
background-color: rgba(var(--text-color), 0.03);
user-select: none;
align-items: center;
&.highlight {
box-shadow: 0 0 0.1rem 0.1rem var(--accent-color) inset;
}
.edit-saved {
grid-area: 1/1/3/2;
padding: 0.3rem;
position: relative;
justify-self: center;
.icon {
position: absolute;
height: 1.2rem;
@ -748,8 +730,13 @@ h3 {
border-radius: 2rem;
}
&__title {
font-size: 0.9rem;
font-weight: 500;
align-self: flex-end;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&__flo-id {
font-size: 0.8rem;
}
}
@ -773,7 +760,7 @@ h3 {
overflow-y: auto;
flex: 1;
padding: 0 max(1rem, 8vw);
align-items: flex-start;
align-content: flex-start;
}
.transaction-message {
background-color: rgba(var(--text-color), 0.06);
@ -805,6 +792,10 @@ h3 {
}
}
#transaction {
padding: 1.5rem;
}
#wallet_history_wrapper {
margin-top: 1.5rem;
padding-bottom: 3rem;
@ -851,9 +842,7 @@ h3 {
border-radius: 2rem;
}
&__receiver {
font-size: 0.9rem;
font-weight: 500;
color: rgba(var(--text-color), 0.8);
}
&__time {
font-size: 0.8rem;
@ -956,7 +945,7 @@ h3 {
align-items: center;
padding: 0.8rem;
border-radius: 0.3rem;
background-color: rgba(var(--text-color), 0.06);
background-color: rgba(var(--text-color), 0.03);
&:not(:last-of-type) {
margin-bottom: 0.5rem;
}
@ -964,13 +953,42 @@ h3 {
font-size: 0.8rem;
}
}
#payment_request_history {
padding-bottom: 3rem;
}
.payment-request {
display: grid;
gap: 0.5rem 1rem;
grid-template-columns: 1fr auto;
color: rgba(var(--text-color), 1);
&__amount {
font-weight: 700;
text-align: right;
}
&__status {
display: flex;
align-items: center;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.05em;
.icon {
height: 1rem;
width: 1rem;
margin-left: 0.3rem;
}
}
.icon.paid {
fill: var(--green);
}
.icon.declined {
fill: var(--danger-color);
}
.button {
background-color: transparent;
padding: 0.6rem 0.8rem;
color: var(--accent-color);
background-color: rgba(var(--foreground-color), 1);
}
}
.wallet-request {
display: grid;
@ -1049,7 +1067,7 @@ h3 {
grid-template-areas: "nav header" "nav .";
}
position: relative;
border-radius: 1rem;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05),
0 1rem 3rem rgba(0, 0, 0, 0.2);
@ -1086,12 +1104,8 @@ h3 {
.card {
padding: 1.5rem;
}
#user {
gap: 1rem;
align-items: flex-start;
}
#saved_ids_list {
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
}
@media screen and (min-width: 56rem) {

68
index.html
View File

@ -548,9 +548,18 @@
<circle cx="497.22047" cy="216.17011" r="6.46689" fill="#f2f2f2" />
</svg>
</div>
<ul id="user-money-requests" class="observe-empty-state"></ul>
<div class=" empty-state gap-1 justify-center text-center">
<h4>No requests</h4>
<div id="requests_history_wrapper" class="grid gap-1-5">
<div class="hide grid gap-1">
<h4>Pending requests</h4>
<ul id="pending_payment_requests" class="grid gap-0-5"></ul>
</div>
<div class="grid gap-1">
<h4>History</h4>
<ul id="payment_request_history" class="observe-empty-state grid gap-0-5"></ul>
<div class=" empty-state gap-1 justify-center text-center">
<h4>No requests</h4>
</div>
</div>
</div>
</section>
<section id="wallet" class="inner-page hide">
@ -627,7 +636,7 @@
transform="translate(-229.66231 -151.4124)" fill="#3f3d56" />
</svg>
</div>
<div class="grid">
<div class="grid gap-1" style="width: min(24rem, 100%);">
<div class="grid gap-0-5">
<h5>Balance</h5>
<h1 class="h1" id="rupee_balance"></h1>
@ -677,7 +686,7 @@
</div>
</section>
<div id="transaction" class="inner-page hide">
<div class="flex align-center">
<div class="grid gap-0-5 justify-start">
<button class="button icon-only margin-right-0-5" onclick="history.back()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000">
@ -685,7 +694,13 @@
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
</svg>
</button>
<h4 id="contact__title"></h4>
<h4 id="transaction__type"></h4>
</div>
<h1 id="transaction__amount"></h1>
<div class="flex align-center">
<time id="transaction__time"></time>
<div class="bullet-point"></div>
<span id="transaction__status"></span>
</div>
</div>
<section id="settings" class="inner-page hide">
@ -816,7 +831,7 @@
<span class="nav-item__title">History</span>
</a>
</li>
<li>
<li class="user-element hide">
<a href="#/requests" class="nav-item interact" title='View payment requests'>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
@ -900,7 +915,7 @@
<sm-copy id="edit_saved_id"></sm-copy>
</div>
<sm-form>
<sm-input id="newAddrLabel" placeholder="Name" autofocus animate required></sm-input>
<sm-input id="get_new_title" placeholder="Name" autofocus animate required></sm-input>
<div class="flex align-center space-between">
<button class="button icon-only" title="Delete this FLO ID?" onclick="deleteSaved()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
@ -973,7 +988,7 @@
<!-- templates -->
<template id="saved_id_template">
<li class="saved-id grid interact" tabindex="0">
<button class="interact edit-saved" title="Edit saved ID">
<button class="interact edit-saved icon-only" title="Edit name">
<div class="saved-id__initials"></div>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000">
@ -983,6 +998,17 @@
</svg>
</button>
<h4 class="saved-id__title"></h4>
<div class="grid align-center" style="grid-template-columns: 1fr auto;">
<div class="saved-id__flo-id overflow-ellipsis"></div>
<button class="copy-saved-id icon-only margin-left-0-5" title="Copy FLO 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="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
</svg>
</button>
</div>
</li>
</template>
<template id="transaction_template">
@ -1015,8 +1041,8 @@
</a>
</li>
</template>
<template id="payment_request_template">
<li class="payment-request">
<template id="pending_payment_request_template">
<li class="payment-request payment-request--pending">
<div class="grid gap-0-5 flex-1">
<div class="payment-request__requestor breakable"></div>
<div class="payment-request__remark"></div>
@ -1024,10 +1050,28 @@
<div class="payment-request__amount"></div>
<div class="flex space-between full-bleed align-center">
<time class="payment-request__time"></time>
<div class="payment-request__actions"></div>
<div class="payment-request__actions">
<button class="button decline-payment">Decline</button>
<button class="button pay-requested">Pay</button>
</div>
</div>
</li>
</template>
<template id="processed_payment_request_template">
<li>
<a href="" class="payment-request payment-request--processed interact">
<div class="grid gap-0-5 flex-1">
<div class="payment-request__requestor breakable"></div>
<div class="payment-request__remark"></div>
</div>
<div class="payment-request__amount"></div>
<div class="flex space-between full-bleed align-center">
<time class="payment-request__time"></time>
<div class="payment-request__status"></div>
</div>
</a>
</li>
</template>
<template id="transaction_message_template">
<li class="transaction-message grid">
<h3 class="transaction-message__amount"></h3>

116
scripts/fn_ui.js
View File

@ -97,7 +97,7 @@ userUI.renderMoneyRequests = function (requests, error = null) {
return;
if (pagesData.lastPage === 'requests') {
for (let r in requests) {
let oldCard = getRef('user-money-requests').querySelector(`[data-vc-${r}]`);
let oldCard = getRef('payment_request_history').querySelector(`[data-vc-${r}]`);
if (oldCard)
oldCard.replaceWith(render.paymentRequestCard(requests[r]));
}
@ -105,12 +105,12 @@ userUI.renderMoneyRequests = function (requests, error = null) {
};
userUI.payRequest = function (reqID) {
let request = User.moneyRequests[reqID];
let { message: { amount, remark }, senderID } = User.moneyRequests[reqID];
getConfirmation('Pay?', { message: `Do you want to pay ${request.message.amount} to ${request.senderID}?`, confirmText: 'Pay' }).then(confirmation => {
if (confirmation) {
User.sendToken(request.senderID, request.message.amount, "|" + request.message.remark).then(txid => {
console.warn(`Sent ${request.message.amount} to ${request.senderID}`, txid);
notify(`Sent ${request.message.amount} to ${request.senderID}. It may take a few mins to reflect in their wallet`, 'success');
User.sendToken(senderID, amount, "|" + remark).then(txid => {
console.warn(`Sent ${amount} to ${senderID}`, txid);
notify(`Sent ${formatAmount(amount)} to ${getFloIdTitle(senderID)}. It may take a few mins to reflect in their wallet`, 'success');
User.decideRequest(request, 'PAID: ' + txid)
.then(result => console.log(result))
.catch(error => console.error(error))
@ -131,11 +131,11 @@ userUI.declineRequest = function (reqID) {
})
}
delegate(getRef('user-money-requests'), 'click', '.pay-requested', e => {
delegate(getRef('pending_payment_requests'), 'click', '.pay-requested', e => {
const vectorClock = e.target.closest('.payment-request').dataset.vc;
userUI.payRequest(vectorClock);
})
delegate(getRef('user-money-requests'), 'click', '.decline-payment', e => {
delegate(getRef('pending_payment_requests'), 'click', '.decline-payment', e => {
const vectorClock = e.target.closest('.payment-request').dataset.vc;
userUI.declineRequest(vectorClock);
})
@ -152,9 +152,9 @@ cashierUI.renderRequests = function (requests, error = null) {
for (let r in requests) {
const oldCard = document.getElementById(r);
if (oldCard) oldCard.remove();
frag.append(render.cashierRequestCard(requests[r]));
frag.prepend(render.cashierRequestCard(requests[r]));
}
getRef('cashier_request_list').append(frag)
getRef('cashier_request_list').prepend(frag)
}
cashierUI.completeRequest = function (reqID) {
@ -233,11 +233,12 @@ function getStatusIcon(status) {
const render = {
savedId(floID, details) {
const { title } = details.hasOwnProperty('title') ? details : { title: details };
const { title } = details;
const clone = getRef('saved_id_template').content.cloneNode(true).firstElementChild;
clone.dataset.floId = floID;
clone.querySelector('.saved-id__initials').textContent = title.charAt(0);
clone.querySelector('.saved-id__title').textContent = title;
clone.querySelector('.saved-id__flo-id').textContent = floID;
return clone;
},
transactionCard(transactionDetails) {
@ -281,7 +282,7 @@ const render = {
let status = tag ? tag : (note ? 'REJECTED' : "PENDING");
clone.classList.add(status.toLowerCase());
clone.dataset.vc = vectorClock;
clone.href = `#/transaction?transactionId=${vectorClock}`;
clone.href = `#/transaction?transactionId=${vectorClock}&type=wallet`;
clone.querySelector('.wallet-request__icon').innerHTML = type === 'Deposit' ?
`<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 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" /></svg>`
:
@ -297,21 +298,22 @@ const render = {
},
paymentRequestCard(details) {
const { time, senderID, message: { amount, remark }, note, vectorClock } = details;
const clone = getRef('payment_request_template').content.cloneNode(true).firstElementChild;
const clone = getRef(`${note ? 'processed' : 'pending'}_payment_request_template`).content.cloneNode(true).firstElementChild;
clone.dataset.vc = vectorClock;
clone.querySelector('.payment-request__requestor').textContent = getFloIdTitle(senderID);
clone.querySelector('.payment-request__time').textContent = getFormattedTime(time);
clone.querySelector('.payment-request__amount').textContent = amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' });
clone.querySelector('.payment-request__remark').textContent = remark;
let status = note;
if (status)
clone.querySelector('.payment-request__actions').textContent = note;
else
clone.querySelector('.payment-request__actions').innerHTML =
`<button class="button pay-requested">Pay</button>
<button class="button decline-payment">Decline</button>`;
const status = note ? note.split(':')[0] : 'PENDING';
if (note) {
clone.firstElementChild.href = `#/transaction?transactionId=${vectorClock}&type=request`;
let icon
if (status === 'PAID')
icon = `<svg class="icon paid" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/></g><g><path d="M23,12l-2.44-2.79l0.34-3.69l-3.61-0.82L15.4,1.5L12,2.96L8.6,1.5L6.71,4.69L3.1,5.5L3.44,9.2L1,12l2.44,2.79l-0.34,3.7 l3.61,0.82L8.6,22.5l3.4-1.47l3.4,1.46l1.89-3.19l3.61-0.82l-0.34-3.69L23,12z M10.09,16.72l-3.8-3.81l1.48-1.48l2.32,2.33 l5.85-5.87l1.48,1.48L10.09,16.72z"/></g></svg>`
else
icon = `<svg class="icon declined" 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="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z"/></svg>`
clone.querySelector('.payment-request__status').innerHTML = `${status} ${icon}`;
}
return clone;
},
transactionMessage(details) {
@ -336,6 +338,17 @@ function showTokenTransfer(type) {
}
showPopup('token_transfer_popup');
}
function getArrayOfSavedIds() {
const arr = []
for (const key in floGlobals.savedIds) {
arr.push({
floID: key,
details: floGlobals.savedIds[key]
})
}
return arr.sort((a, b) => a.details.title.localeCompare(b.details.title))
}
userUI.renderSavedIds = async function () {
floGlobals.savedIds = {}
const frag = document.createDocumentFragment()
@ -356,17 +369,17 @@ userUI.renderSavedIds = async function () {
floGlobals.savedIds[key] = idsToRender[key];
}
}
for (const key in floGlobals.savedIds) {
frag.append(render.savedId(key, floGlobals.savedIds[key]));
}
getArrayOfSavedIds().forEach(({ floID, details }) => {
frag.append(render.savedId(floID, details));
})
getRef('saved_ids_list').append(frag);
}
async function saveId() {
const floID = getRef('flo_id_to_save').value.trim();
const title = getRef('flo_id_title_to_save').value.trim();
floGlobals.savedIds[floID] = { title }
getRef('saved_ids_list').append(render.savedId(floID, { title }));
syncSavedIds().then(() => {
insertElementAlphabetically(title, render.savedIdCard(floID, { title }))
notify(`Saved ${floID}`, 'success');
hidePopup();
}).catch(error => {
@ -381,13 +394,43 @@ 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('newAddrLabel').value = getFloIdTitle(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 saveChanges() {
const floID = getRef('edit_saved_id').value;
let title = getRef('get_new_title').value.trim();
if (title == '')
title = 'Unknown';
floGlobals.savedIds[floID] = { title }
syncSavedIds().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 deleteSaved() {
getConfirmation('Do you want delete this FLO ID?', {
confirmText: 'Delete',
@ -406,6 +449,27 @@ function deleteSaved() {
}
});
}
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,
})
function insertElementAlphabetically(name, elementToInsert) {
const elementInserted = [...getRef('saved_ids_list').children].some(child => {
const floID = child.dataset.floId;
if (floGlobals.savedIds[floID].title.localeCompare(name) > 0) {
child.before(elementToInsert)
return true
}
})
if (!elementInserted) {
getRef('saved_ids_list').append(elementToInsert)
}
}
function executeUserAction() {
const floID = getRef('tt_flo_id').value.trim(),

55
scripts/std_ui.js
View File

@ -5,6 +5,7 @@ const currentYear = new Date().getFullYear();
let paymentsHistoryLoader = null;
let walletHistoryLoader = null;
let contactHistoryLoader = null;
let paymentRequestsLoader = null;
//Checks for internet connection status
if (!navigator.onLine)
@ -350,12 +351,33 @@ async function showPage(targetPage, options = {}) {
})
break;
case 'requests':
const frag = document.createDocumentFragment();
for (let transactionID in User.moneyRequests) {
frag.prepend(render.paymentRequestCard(User.moneyRequests[transactionID]));
const paymentRequests = []
if (paymentRequestsLoader)
paymentRequestsLoader.clear()
const pendingPaymentRequests = document.createDocumentFragment()
let arePaymentsPending = false
for (const transactionId in User.moneyRequests) {
if (!User.moneyRequests[transactionId].note) {
arePaymentsPending = true
pendingPaymentRequests.prepend(render.paymentRequestCard(User.moneyRequests[transactionId]))
} else {
paymentRequests.unshift(User.moneyRequests[transactionId])
}
}
getRef('user-money-requests').innerHTML = '';
getRef('user-money-requests').prepend(frag);
if (arePaymentsPending) {
getRef('pending_payment_requests').innerHTML = ''
getRef('pending_payment_requests').append(pendingPaymentRequests)
getRef('pending_payment_requests').parentNode.classList.remove('hide')
} else {
getRef('pending_payment_requests').parentNode.classList.add('hide')
}
if (paymentRequestsLoader) {
paymentRequestsLoader.update(paymentRequests)
} else {
paymentRequestsLoader = new LazyLoader('#payment_request_history', paymentRequests, render.paymentRequestCard);
}
paymentRequestsLoader.init()
break;
case 'wallet':
const walletTransactions = []
@ -386,6 +408,29 @@ async function showPage(targetPage, options = {}) {
}
walletHistoryLoader.init()
break;
case 'transaction':
let transactionDetails
let status
switch (params.type) {
case 'request':
transactionDetails = User.moneyRequests[params.transactionId]
status = transactionDetails.note ? transactionDetails.note.split(':')[0] : 'PENDING';
getRef('transaction__type').textContent = 'Payment request'
break;
case 'wallet':
transactionDetails = User.cashierRequests[params.transactionId]
const { message: { mode }, note, tag } = transactionDetails
status = tag ? tag : (note ? 'REJECTED' : "PENDING");
getRef('transaction__type').textContent = mode === 'cash-to-token' ? 'Deposit' : 'Withdraw';
break;
}
const { message: { amount, remark }, note, senderID, receiverID, time } = transactionDetails
console.log(transactionDetails)
getRef('transaction__time').textContent = getFormattedTime(time)
getRef('transaction__amount').textContent = formatAmount(amount)
getRef('transaction__status').textContent = status
break;
default:
break;
}