feature and UI updates
-- added transaction details page
This commit is contained in:
sairaj mote
parent
5e51d8d5e5
commit
e48281072d
64
css/main.css
64
css/main.css
@ -578,7 +578,6 @@ ul {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
@ -608,7 +607,7 @@ ul {
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0.3rem;
|
||||
color: var(--text-color);
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
.nav-item .icon {
|
||||
@ -734,16 +733,14 @@ ul {
|
||||
#saved_ids_list {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.saved-id {
|
||||
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);
|
||||
padding: 0.8rem 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
@ -787,6 +784,7 @@ ul {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
}
|
||||
.saved-id__flo-id {
|
||||
font-size: 0.8rem;
|
||||
@ -805,7 +803,10 @@ ul {
|
||||
height: 100%;
|
||||
}
|
||||
#contact > * {
|
||||
padding: 1rem;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
#contact > :first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#contact__transactions {
|
||||
@ -846,10 +847,6 @@ ul {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
#transaction {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#wallet_history_wrapper {
|
||||
margin-top: 1.5rem;
|
||||
padding-bottom: 3rem;
|
||||
@ -1017,7 +1014,7 @@ ul {
|
||||
align-items: center;
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.cashier-request:not(:last-of-type),
|
||||
.payment-request:not(:last-of-type) {
|
||||
@ -1038,6 +1035,9 @@ ul {
|
||||
grid-template-columns: 1fr auto;
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
.payment-request__requestor {
|
||||
font-weight: 500;
|
||||
}
|
||||
.payment-request__amount {
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
@ -1046,8 +1046,7 @@ ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.payment-request__status .icon {
|
||||
height: 1rem;
|
||||
@ -1074,6 +1073,15 @@ ul {
|
||||
border-radius: 0.5rem;
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
.wallet-request:not(.rejected, .pending).withdrawn .wallet-request__amount::before {
|
||||
content: "- ";
|
||||
}
|
||||
.wallet-request:not(.rejected, .pending).added .wallet-request__amount {
|
||||
color: var(--green);
|
||||
}
|
||||
.wallet-request:not(.rejected, .pending).added .wallet-request__amount::before {
|
||||
content: "+ ";
|
||||
}
|
||||
.wallet-request .icon.pending {
|
||||
fill: var(--yellow);
|
||||
}
|
||||
@ -1094,22 +1102,40 @@ ul {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
.wallet-request__details {
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
}
|
||||
.wallet-request__details, .wallet-request__amount {
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
.wallet-request__time {
|
||||
.wallet-request__amount {
|
||||
font-weight: 700;
|
||||
}
|
||||
.wallet-request__time, .wallet-request__status {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.wallet-request__status {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
text-transform: capitalize;
|
||||
text-align: right;
|
||||
}
|
||||
.wallet-request__status .icon {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
|
||||
#transaction__remark,
|
||||
#transaction__note {
|
||||
line-height: 1.6;
|
||||
justify-self: flex-start;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
#transaction__note .icon {
|
||||
fill: var(--danger-color);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40rem) {
|
||||
#main_navbar.hide-away {
|
||||
bottom: 0;
|
||||
@ -1142,6 +1168,7 @@ ul {
|
||||
position: relative;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 1rem 3rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
#main_card:not(.nav-hidden) {
|
||||
@ -1186,6 +1213,7 @@ ul {
|
||||
}
|
||||
|
||||
#saved_ids_list {
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -536,7 +536,6 @@ ul {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
@ -565,7 +564,7 @@ ul {
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0.3rem;
|
||||
color: var(--text-color);
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
.icon {
|
||||
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
@ -686,15 +685,13 @@ ul {
|
||||
#saved_ids_list {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.saved-id {
|
||||
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);
|
||||
padding: 0.8rem 0;
|
||||
user-select: none;
|
||||
&.highlight {
|
||||
box-shadow: 0 0 0.1rem 0.1rem var(--accent-color) inset;
|
||||
@ -734,6 +731,7 @@ ul {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
}
|
||||
&__flo-id {
|
||||
font-size: 0.8rem;
|
||||
@ -751,7 +749,10 @@ ul {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
& > * {
|
||||
padding: 1rem;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
& > :first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
#contact__transactions {
|
||||
@ -792,10 +793,6 @@ ul {
|
||||
}
|
||||
}
|
||||
|
||||
#transaction {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#wallet_history_wrapper {
|
||||
margin-top: 1.5rem;
|
||||
padding-bottom: 3rem;
|
||||
@ -945,7 +942,7 @@ ul {
|
||||
align-items: center;
|
||||
padding: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
@ -961,6 +958,9 @@ ul {
|
||||
gap: 0.5rem 1rem;
|
||||
grid-template-columns: 1fr auto;
|
||||
color: rgba(var(--text-color), 1);
|
||||
&__requestor {
|
||||
font-weight: 500;
|
||||
}
|
||||
&__amount {
|
||||
font-weight: 700;
|
||||
text-align: right;
|
||||
@ -969,8 +969,7 @@ ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: capitalize;
|
||||
.icon {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
@ -996,6 +995,23 @@ ul {
|
||||
padding: 0.5rem 0;
|
||||
border-radius: 0.5rem;
|
||||
grid-template-columns: auto 1fr;
|
||||
&:not(.rejected, .pending) {
|
||||
&.withdrawn {
|
||||
.wallet-request__amount {
|
||||
&::before {
|
||||
content: "- ";
|
||||
}
|
||||
}
|
||||
}
|
||||
&.added {
|
||||
.wallet-request__amount {
|
||||
color: var(--green);
|
||||
&::before {
|
||||
content: "+ ";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon.pending {
|
||||
fill: var(--yellow);
|
||||
}
|
||||
@ -1016,22 +1032,47 @@ ul {
|
||||
}
|
||||
}
|
||||
&__details {
|
||||
font-weight: 700;
|
||||
font-weight: 500;
|
||||
}
|
||||
&__details,
|
||||
&__amount {
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
&__time {
|
||||
&__amount {
|
||||
font-weight: 700;
|
||||
}
|
||||
&__time,
|
||||
&__status {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
&__status {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
text-transform: capitalize;
|
||||
text-align: right;
|
||||
.icon {
|
||||
margin-left: 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
#transaction {
|
||||
// justify-content: center;
|
||||
// text-align: center;
|
||||
// justify-items: center;
|
||||
}
|
||||
#transaction__remark,
|
||||
#transaction__note {
|
||||
line-height: 1.6;
|
||||
justify-self: flex-start;
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.8rem;
|
||||
}
|
||||
#transaction__note {
|
||||
.icon {
|
||||
fill: var(--danger-color);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 40rem) {
|
||||
#main_navbar {
|
||||
&.hide-away {
|
||||
@ -1069,6 +1110,8 @@ ul {
|
||||
position: relative;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
|
||||
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05),
|
||||
0 1rem 3rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
@ -1105,6 +1148,7 @@ ul {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
#saved_ids_list {
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
53
index.html
53
index.html
@ -651,7 +651,7 @@
|
||||
</svg>
|
||||
Top-up wallet
|
||||
</button>
|
||||
<button class="wallet-action" onclick="walletAction('deposit')">
|
||||
<button class="wallet-action" onclick="walletAction('withdraw')">
|
||||
<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">
|
||||
<g>
|
||||
@ -685,8 +685,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div id="transaction" class="inner-page hide">
|
||||
<div class="grid gap-0-5 justify-start">
|
||||
<div id="transaction" class="inner-page hide grid gap-2">
|
||||
<div class="grid gap-1 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">
|
||||
@ -696,12 +696,17 @@
|
||||
</button>
|
||||
<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 class="grid gap-1">
|
||||
<h1 id="transaction__amount"></h1>
|
||||
<div id="transaction__remark" class="hide"></div>
|
||||
<div class="flex align-center" style="font-size: 0.8rem;">
|
||||
<time id="transaction__time"></time>
|
||||
<div class="bullet-point"></div>
|
||||
<span id="transaction__status"></span>
|
||||
</div>
|
||||
</div>
|
||||
<a id="transaction__link" target="_blank" rel="noopener noreferrer">See transaction on blockchain</a>
|
||||
<div id="transaction__note" class="hide flex align-center"></div>
|
||||
</div>
|
||||
<section id="settings" class="inner-page hide">
|
||||
<div class="page__header">
|
||||
@ -868,7 +873,6 @@
|
||||
</g>
|
||||
</svg>
|
||||
<span class="nav-item__title">Settings</span>
|
||||
</button>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -976,12 +980,28 @@
|
||||
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>
|
||||
<h4 id="wallet_popup__title"></h4>
|
||||
</header>
|
||||
<sm-form>
|
||||
<sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount" animate>
|
||||
<div class="grid gap-0-5">
|
||||
<h4 id="wallet_popup__title"></h4>
|
||||
<p id="request_description"></p>
|
||||
</div>
|
||||
<sm-input id="request_cashier_amount" type="number" min="1" error-text="Amount should al least be ₹1"
|
||||
name="amount" placeholder="Amount" autofocus animate required>
|
||||
<svg class="icon" slot="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">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M13.66,7C13.1,5.82,11.9,5,10.5,5L6,5V3h12v2l-3.26,0c0.48,0.58,0.84,1.26,1.05,2L18,7v2l-2.02,0c-0.25,2.8-2.61,5-5.48,5 H9.77l6.73,7h-2.77L7,14v-2h3.5c1.76,0,3.22-1.3,3.46-3L6,9V7L13.66,7z" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</sm-input>
|
||||
<button id="wallet_popup__cta" class="button button--primary cta" type="submit">Save</button>
|
||||
<button id="wallet_popup__cta" class="button button--primary cta" type="submit">Continue</button>
|
||||
</sm-form>
|
||||
</sm-popup>
|
||||
|
||||
@ -1033,7 +1053,10 @@
|
||||
<li>
|
||||
<a href="" class="wallet-request interact">
|
||||
<div class="wallet-request__icon"></div>
|
||||
<div class="wallet-request__details"></div>
|
||||
<div class="flex align-center space-between">
|
||||
<div class="wallet-request__details"></div>
|
||||
<div class="wallet-request__amount"></div>
|
||||
</div>
|
||||
<div class="flex align-center space-between">
|
||||
<time class="wallet-request__time"></time>
|
||||
<div class="wallet-request__status flex align-center"></div>
|
||||
@ -1044,7 +1067,7 @@
|
||||
<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>
|
||||
<h4 class="payment-request__requestor breakable"></h4>
|
||||
<div class="payment-request__remark"></div>
|
||||
</div>
|
||||
<div class="payment-request__amount"></div>
|
||||
@ -1061,7 +1084,7 @@
|
||||
<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>
|
||||
<h4 class="payment-request__requestor breakable"></h4>
|
||||
<div class="payment-request__remark"></div>
|
||||
</div>
|
||||
<div class="payment-request__amount"></div>
|
||||
|
||||
@ -86,6 +86,7 @@ User.findCashier = function () {
|
||||
if (!online.length)
|
||||
return null;
|
||||
else {
|
||||
console.log(online);
|
||||
const random = floCrypto.randInt(0, online.length - 1)
|
||||
return online[random];
|
||||
}
|
||||
|
||||
@ -11,36 +11,45 @@
|
||||
const relativeTime = new RelativeTime({ style: 'narrow' });
|
||||
const userUI = {};
|
||||
|
||||
let walletActionType = null;
|
||||
getRef('wallet_popup__cta').addEventListener('click', function () {
|
||||
let cashier = User.findCashier();
|
||||
let amount = parseFloat(getRef('request_cashier_amount').value.trim());
|
||||
if (walletAction === 'deposit') {
|
||||
if (walletActionType === 'deposit') {
|
||||
//get UPI txid from user
|
||||
let upiTxID = prompt(`Send Rs. ${amount} to ${cashierUPI[cashier]} and enter UPI txid`);
|
||||
if (!upiTxID)
|
||||
return alert("Cancelled");
|
||||
return;
|
||||
User.cashToToken(cashier, amount, upiTxID).then(result => {
|
||||
console.log(result);
|
||||
alert("Requested cashier. please wait!");
|
||||
notify("Requested cashier. please wait!");
|
||||
}).catch(error => console.error(error))
|
||||
} else {
|
||||
//get confirmation from user
|
||||
let upiID = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`);
|
||||
if (!upiID)
|
||||
return alert("Cancelled");
|
||||
return;
|
||||
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 => {
|
||||
console.log(result);
|
||||
alert("Requested cashier. please wait!");
|
||||
notify("Requested cashier. please wait!");
|
||||
}).catch(error => console.error(error))
|
||||
}).catch(error => console.error(error))
|
||||
}
|
||||
})
|
||||
function walletAction(type) {
|
||||
walletActionType = type;
|
||||
let cashier = User.findCashier();
|
||||
if (!cashier)
|
||||
return notify("No cashier online. Please try again in a while.", 'error');
|
||||
if (type === 'deposit') {
|
||||
getRef('wallet_popup__title').textContent = 'Top-up wallet';
|
||||
getRef('request_description').textContent = 'Add money to your wallet';
|
||||
} else {
|
||||
getRef('wallet_popup__title').textContent = 'Transfer to bank';
|
||||
getRef('request_description').textContent = 'Money will be sent to your bank account linked to given UPI ID';
|
||||
}
|
||||
showPopup('wallet_popup')
|
||||
}
|
||||
|
||||
@ -278,16 +287,18 @@ const render = {
|
||||
walletRequestCard(details) {
|
||||
const { time, message: { mode, amount }, note, tag, vectorClock } = details;
|
||||
const clone = getRef('wallet_request_template').content.cloneNode(true).firstElementChild.firstElementChild;
|
||||
const type = mode === 'cash-to-token' ? 'Deposit' : 'Withdraw';
|
||||
const type = mode === 'cash-to-token' ? 'Wallet top-up' : 'Transfer to bank';
|
||||
let status = tag ? tag : (note ? 'REJECTED' : "PENDING");
|
||||
clone.classList.add(status.toLowerCase());
|
||||
clone.classList.add(mode === 'cash-to-token' ? 'added' : 'withdrawn');
|
||||
clone.dataset.vc = vectorClock;
|
||||
clone.href = `#/transaction?transactionId=${vectorClock}&type=wallet`;
|
||||
clone.querySelector('.wallet-request__icon').innerHTML = type === 'Deposit' ?
|
||||
clone.querySelector('.wallet-request__icon').innerHTML = mode === 'cash-to-token' ?
|
||||
`<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>`
|
||||
:
|
||||
`<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"><g><rect fill="none" height="24" width="24" /></g><g><g><rect height="7" width="3" x="4" y="10" /><rect height="7" width="3" x="10.5" y="10" /><rect height="3" width="20" x="2" y="19" /><rect height="7" width="3" x="17" y="10" /><polygon points="12,1 2,6 2,8 22,8 22,6" /></g></g></svg>`;
|
||||
clone.querySelector('.wallet-request__details').textContent = `${type} ${formatAmount(amount)}`;
|
||||
clone.querySelector('.wallet-request__details').textContent = type;
|
||||
clone.querySelector('.wallet-request__amount').textContent = formatAmount(amount);
|
||||
clone.querySelector('.wallet-request__time').textContent = getFormattedTime(time);
|
||||
let icon = '';
|
||||
if (status === 'REJECTED') {
|
||||
@ -301,9 +312,9 @@ const render = {
|
||||
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__remark').textContent = remark;
|
||||
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;
|
||||
const status = note ? note.split(':')[0] : 'PENDING';
|
||||
if (note) {
|
||||
clone.firstElementChild.href = `#/transaction?transactionId=${vectorClock}&type=request`;
|
||||
@ -312,7 +323,7 @@ const render = {
|
||||
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}`;
|
||||
clone.querySelector('.payment-request__status').innerHTML = `${status.toLowerCase()} ${icon}`;
|
||||
}
|
||||
return clone;
|
||||
},
|
||||
@ -379,7 +390,7 @@ async function saveId() {
|
||||
const title = getRef('flo_id_title_to_save').value.trim();
|
||||
floGlobals.savedIds[floID] = { title }
|
||||
syncSavedIds().then(() => {
|
||||
insertElementAlphabetically(title, render.savedIdCard(floID, { title }))
|
||||
insertElementAlphabetically(title, render.savedId(floID, { title }))
|
||||
notify(`Saved ${floID}`, 'success');
|
||||
hidePopup();
|
||||
}).catch(error => {
|
||||
|
||||
@ -411,22 +411,50 @@ async function showPage(targetPage, options = {}) {
|
||||
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';
|
||||
getRef('transaction__link').classList.add('hide')
|
||||
getRef('transaction__remark').classList.add('hide')
|
||||
getRef('transaction__note').classList.add('hide')
|
||||
if (params.type === 'request') {
|
||||
transactionDetails = User.moneyRequests[params.transactionId]
|
||||
const { message: { remark }, note, tag } = transactionDetails
|
||||
status = note ? note.split(':')[0] : 'PENDING';
|
||||
getRef('transaction__type').textContent = 'Payment request'
|
||||
if (status === 'PAID') {
|
||||
getRef('transaction__link').href = `https://flosight.duckdns.org/tx/${note.split(':')[1].trim()}`
|
||||
getRef('transaction__link').classList.remove('hide')
|
||||
}
|
||||
if (remark !== '') {
|
||||
getRef('transaction__remark').textContent = remark
|
||||
getRef('transaction__remark').classList.remove('hide')
|
||||
}
|
||||
console.log(status)
|
||||
} else if (params.type === 'wallet') {
|
||||
transactionDetails = User.cashierRequests[params.transactionId]
|
||||
const { message: { amount, mode, upi_id, upi_txid }, note, tag } = transactionDetails
|
||||
status = tag ? tag : (note ? 'REJECTED' : "PENDING");
|
||||
getRef('transaction__type').textContent = mode === 'cash-to-token' ? 'Wallet top-up' : 'Transfer to bank';
|
||||
if (status === 'COMPLETED') {
|
||||
getRef('transaction__link').href = `https://flosight.duckdns.org/tx/${note}`
|
||||
getRef('transaction__link').classList.remove('hide')
|
||||
} else if (status === 'REJECTED') {
|
||||
getRef('transaction__note').innerHTML = `<svg class="icon failed" 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><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg> ${note.split(':')[1]}`
|
||||
getRef('transaction__note').classList.remove('hide')
|
||||
}
|
||||
if (mode === 'cash-to-token') {
|
||||
getRef('transaction__note').textContent = `UPI transaction ID: ${upi_txid}`
|
||||
getRef('transaction__note').classList.remove('hide')
|
||||
|
||||
break;
|
||||
} else {
|
||||
if (status === 'PENDING') {
|
||||
getRef('transaction__note').textContent = `Pending transfer of ${formatAmount(amount)} to bank account linked to ${upi_id}`
|
||||
} else if (status === 'COMPLETED') {
|
||||
getRef('transaction__note').textContent = `Transfer of ${formatAmount(amount)} to bank account linked to ${upi_id} completed`
|
||||
}
|
||||
getRef('transaction__note').classList.remove('hide')
|
||||
}
|
||||
}
|
||||
const { message: { amount, remark }, note, senderID, receiverID, time } = transactionDetails
|
||||
console.log(transactionDetails)
|
||||
console.table(transactionDetails)
|
||||
getRef('transaction__time').textContent = getFormattedTime(time)
|
||||
getRef('transaction__amount').textContent = formatAmount(amount)
|
||||
getRef('transaction__status').textContent = status
|
||||
@ -533,7 +561,7 @@ async function showPage(targetPage, options = {}) {
|
||||
}).onfinish = () => {
|
||||
getRef('main_navbar').classList.add('hide')
|
||||
}
|
||||
getRef('main_header').classList.add('hide')
|
||||
// getRef('main_header').classList.add('hide')
|
||||
}
|
||||
}
|
||||
document.querySelectorAll('.page').forEach(page => page.classList.add('hide'))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user