- What do we offer?
+ What DO WE OFFER?
Your Rupee balance is digital footprint of actual cash.
Deposit, Withdraw or Pay Rupee digitally
using a FLO Blockchain address.
@@ -670,42 +685,48 @@
*If your request isn't completed in 12hrs, use REPORT to get
assistance from our helpline.
-
-
You haven't deposited rupee yet.
-
-
-
You haven't withdrawn rupee yet.
-
-
-
No messages from cashier.
-
+
+ Deposits
+
+ You haven't deposited rupee yet.
+
+ Withdrawals
+
+ You haven't withdrawn rupee yet.
+
+ Pay through cashier
+
+ You haven't paid through cashier yet.
+
+ System Notifications
+
+ No messages from cashier.
+
+
Select Cashier
-
-
-
No withdraw complaints.
-
-
-
No pay through cashier complaints.
-
+
+ Deposit
+
+ No deposit complaints.
+
+ Withdraw
+
+ No withdraw complaints.
+
+ Pay through cashier
+
+ No pay through cashier complaints.
+
+
`;
return card;
},
+ payCashierActivity(vectorClock, receiver, upiTxid, amount) {
+ let card = document.createElement('div'),
+ time = parseInt(vectorClock.split('_')[0])
+ card.classList.add('request')
+ let timeFrag = time.toString().split(' ');
+ setAttributes(card, { 'data-vector-clock': vectorClock, 'data-type': 'pay_thru_cashier' })
+ card.innerHTML = ` ${formatedTime(time)}
+ UPI Transanction ID
+
+
${upiTxid}
+
+
Sent to
+
+
${receiver}
+
+
Amount
+ ₹${amount}
+
+
+
`;
+ return card;
+ },
paymentRequest(time, senderAddress, amount, id) {
let card = document.createElement('div')
card.classList.add('request')
@@ -931,6 +986,15 @@
composition += `
Cashier processed the request on ${formatedTime(time)}
+
Rupee Transaction ID
+
+
${floTxId}
+
+
`;
}
else {
@@ -982,6 +1046,15 @@
composition += `
Cashier processed the request on ${formatedTime(time)}
+
Rupee Transaction ID
+
+
${floTxId}
+
+
`;
}
else {
@@ -1002,6 +1075,97 @@
card.innerHTML = composition;
return card;
},
+ payCashierComplaint(userData, cashierData, udc) {
+ let card = document.createElement('div'),
+ { amount, customMsg, sender, receiver, vectorClock } = userData,
+ composition = ``;
+ card.classList.add('request', 'complaint')
+ setAttributes(card, { 'data-type': 'withdraw', 'data-udc': JSON.stringify(udc) })
+ composition = `
+
+
Sender
+
+
${sender}
+
+
+
Receiver
+
+
${receiver}
+
+
`
+ if (customMsg && customMsg !== '')
+ composition += `
Issue description
+
${customMsg}
`
+ composition += `
Paid
+
₹${amount}
+
Paid on
+
${formatedTime(vectorClock.split('_')[0])}
+
+
+
Cashier processed the request on ${formatedTime(time)}
+
Rupee Transaction ID
+
+
${floTxId}
+
+
+
+
Cashier hasn't processed the request
+ `;
+ }
+ composition += `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+ return card;
+ }
}
//Checks for internet connection status
@@ -1049,6 +1213,8 @@
if (popup === 'main_loader') {
loader.classList.add('animate-loader')
document.querySelector('main').classList.add('hide-completely')
+ document.querySelector('#main_header').classList.add('hide-completely')
+ document.querySelector('#navbar').classList.add('hide-completely')
}
return thisPopup;
}
@@ -1065,10 +1231,16 @@
clearAllInputs(thisPopup)
zIndex--;
thisPopup.parentNode.setAttribute('style', `z-index: ${zIndex}`)
+ if (thisPopup.querySelector('.action')) {
+ btnLoading(thisPopup.querySelector('.action'), 'stop')
+ thisPopup.querySelector("button[type='submit']").disabled = true;
+ }
}, 400)
if (popup === 'main_loader' || popup === 'sign_in_popup') {
loader.classList.remove('animate-loader')
document.querySelector('main').classList.remove('hide-completely')
+ document.querySelector('#navbar').classList.remove('hide-completely')
+ document.querySelector('#main_header').classList.remove('hide-completely')
}
if (popup === 'prompt') {
if (thisPopup.querySelector('input').value == '')
@@ -1085,6 +1257,20 @@
}
})
+ function btnLoading(btn, option) {
+ if (typeof btn === 'string')
+ btn = document.getElementById(btn);
+ if (option === 'start') {
+ btn.children[0].classList.add('clip')
+ btn.children[1].classList.add('animate-loader')
+ }
+ else {
+ btn.children[0].classList.remove('clip')
+ btn.children[1].classList.remove('animate-loader')
+ }
+ }
+
+
function setAttributes(el, attrs) {
for (var key in attrs) {
el.setAttribute(key, attrs[key]);
@@ -1354,15 +1540,8 @@
}
}
})
- document.getElementById('activity_type').addEventListener('change', function (e) {
- showActivities(this.value)
- })
- document.getElementById('complaint_type').addEventListener('change', function (e) {
- showComplaints(this.value)
- })
document.getElementById('select_cashier').addEventListener('change', async function (e) {
- await Promise.all([load_deposit_complaints(this.value), load_withdraw_complaints(this.value)])
- //load_pay_thru_cashier_complaints(this.value)
+ await Promise.all([load_deposit_complaints(this.value), load_withdraw_complaints(this.value), load_pay_thru_cashier_complaints(this.value)])
})
document.getElementById('helpline_page').addEventListener('click', async e => {
@@ -1379,38 +1558,6 @@
})
- let allActivities = document.querySelectorAll('.activity-container')
- function showActivities(activity) {
- allActivities.forEach(act => {
- act.classList.add('hide-completely')
- })
- if (activity === 'deposits') {
- document.getElementById('deposit_activity_container').classList.remove('hide-completely')
- }
- if (activity === 'withdraws') {
- document.getElementById('withdraw_activity_container').classList.remove('hide-completely')
- }
- if (activity === 'cashierMsg') {
- document.getElementById('cashier_message_container').classList.remove('hide-completely')
- }
- }
-
- let allComplaints = document.querySelectorAll('.complaints-container')
- function showComplaints(complaint) {
- allComplaints.forEach(comp => {
- comp.classList.add('hide-completely')
- })
- if (complaint === 'deposits') {
- document.getElementById('deposit_complaints_container').classList.remove('hide-completely')
- }
- if (complaint === 'withdraws') {
- document.getElementById('withdraw_complaints_container').classList.remove('hide-completely')
- }
- if (complaint === 'payCashier') {
- document.getElementById('pay_cashier_complaints_container').classList.remove('hide-completely')
- }
- }
-
let allPages = document.querySelectorAll('.page'),
allTabs = document.querySelectorAll('.navbar-item');
function showPage(btn, page) {
@@ -1445,6 +1592,8 @@
async function signOut() {
if (await confirmation('Do you want to sign out?')) {
document.querySelector('main').classList.add('hide-completely')
+ document.querySelector('#navbar').classList.add('hide-completely')
+ document.querySelector('#main_header').classList.add('hide-completely')
floDapps.clearCredentials()
compactIDB.deleteDB().then((message) => {
delete token_app.master_configurations;
@@ -1650,6 +1799,293 @@
}
}
})
+ // tab-header
+
+ const smTabs = document.createElement('template')
+ smTabs.innerHTML = `
+
+
+
+ Nothing to see here
+
+`;
+
+ customElements.define('sm-tabs', class extends HTMLElement {
+ constructor() {
+ super()
+ this.attachShadow({ mode: 'open' }).append(smTabs.content.cloneNode(true))
+ this.indicator = this.shadowRoot.querySelector('.indicator');
+ this.tabSlot = this.shadowRoot.querySelector('slot[name="tab"]');
+ this.panelSlot = this.shadowRoot.querySelector('slot[name="panel"]');
+ this.tabHeader = this.shadowRoot.querySelector('.tab-header');
+ }
+ connectedCallback() {
+
+ //animations
+ let flyInLeft = [
+ {
+ opacity: 0,
+ transform: 'translateX(-1rem)'
+ },
+ {
+ opacity: 1,
+ transform: 'none'
+ }
+ ];
+ let flyInRight = [
+ {
+ opacity: 0,
+ transform: 'translateX(1rem)'
+ },
+ {
+ opacity: 1,
+ transform: 'none'
+ }
+ ]
+ let flyOutLeft = [
+ {
+ opacity: 1,
+ transform: 'none'
+ },
+ {
+ opacity: 0,
+ transform: 'translateX(-1rem)'
+ }
+ ]
+ let flyOutRight = [
+ {
+ opacity: 1,
+ transform: 'none'
+ },
+ {
+ opacity: 0,
+ transform: 'translateX(1rem)'
+ }
+ ]
+ let animationOptions = {
+ duration: 300,
+ fill: 'forwards',
+ easing: 'ease'
+ }
+ this.prevTab
+ this.shadowRoot.querySelector('slot[name="panel"]').addEventListener('slotchange', () => {
+ this.shadowRoot.querySelector('slot[name="panel"]').assignedElements().forEach((panel, index) => {
+ panel.classList.add('hide-completely')
+ })
+ })
+ this.shadowRoot.querySelector('slot[name="tab"]').addEventListener('slotchange', () => {
+ this.shadowRoot.querySelector('slot[name="tab"]').assignedElements().forEach((panel, index) => {
+ panel.setAttribute('rank', index + 1)
+ })
+ })
+ this.addEventListener('switchTab', e => {
+ if (e.target === this.prevTab)
+ return
+ if (this.prevTab)
+ this.prevTab.classList.remove('active')
+ e.target.classList.add('active')
+
+ if (this.prevTab) {
+ let targetBody = e.target.nextElementSibling,
+ currentBody = this.prevTab.nextElementSibling;
+
+ if (this.prevTab.getAttribute('rank') < e.target.getAttribute('rank')) {
+ if (currentBody && !targetBody)
+ currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
+ currentBody.classList.add('hide-completely')
+ }
+ else if (targetBody && !currentBody) {
+ targetBody.classList.remove('hide-completely')
+ targetBody.animate(flyInRight, animationOptions)
+ }
+ else if (currentBody && targetBody) {
+ currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
+ currentBody.classList.add('hide-completely')
+ targetBody.classList.remove('hide-completely')
+ targetBody.animate(flyInRight, animationOptions)
+ }
+ }
+ } else {
+ if (currentBody && !targetBody)
+ currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
+ currentBody.classList.add('hide-completely')
+ }
+ else if (targetBody && !currentBody) {
+ targetBody.classList.remove('hide-completely')
+ targetBody.animate(flyInLeft, animationOptions)
+ }
+ else if (currentBody && targetBody) {
+ currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
+ currentBody.classList.add('hide-completely')
+ targetBody.classList.remove('hide-completely')
+ targetBody.animate(flyInLeft, animationOptions)
+ }
+ }
+ }
+ } else {
+ e.target.nextElementSibling.classList.remove('hide-completely')
+ }
+ e.target.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
+ this.indicator.setAttribute('style', `width: ${e.target.getBoundingClientRect().width / 2}px; transform: translateX(${e.target.getBoundingClientRect().left - e.target.parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft + e.target.getBoundingClientRect().width / 4}px)`)
+ this.prevTab = e.target;
+ })
+ let observer = new IntersectionObserver((entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ let activeElement = this.tabSlot.assignedElements().filter(element => {
+ if (element.classList.contains('active'))
+ return true
+ })
+ if (activeElement.length) {
+ let tabDimensions = activeElement[0].getBoundingClientRect();
+ this.indicator.setAttribute('style', `width: ${tabDimensions.width / 2}px; transform: translateX(${tabDimensions.left - activeElement[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft + tabDimensions.width / 4}px)`)
+ }
+ else {
+ this.tabSlot.assignedElements()[0].classList.add('active')
+ let tabDimensions = this.tabSlot.assignedElements()[0].getBoundingClientRect();
+ this.indicator.setAttribute('style', `width: ${tabDimensions.width / 2}px; transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft + tabDimensions.width / 4}px)`)
+ this.prevTab = this.tabSlot.assignedElements()[0];
+ }
+ setTimeout(() => {
+ this.indicator.classList.add('transition')
+ }, 100);
+ }
+ })
+ },
+ { threshold: 1.0 })
+ observer.observe(this.tabHeader)
+ }
+ })
+
+
+ // tab
+ const smTab = document.createElement('template')
+ smTab.innerHTML = `
+
+
+
+
+`;
+
+ customElements.define('sm-tab', class extends HTMLElement {
+ constructor() {
+ super()
+ this.shadow = this.attachShadow({ mode: 'open' }).append(smTab.content.cloneNode(true))
+ }
+ connectedCallback() {
+ let switchTab = new CustomEvent('switchTab', {
+ bubbles: true,
+ composed: true,
+ })
+ this.addEventListener('click', () => {
+ this.dispatchEvent(switchTab)
+ })
+ if (this.hasAttribute('active')) {
+ setTimeout(() => {
+ this.dispatchEvent(switchTab)
+ }, 0)
+ }
+ }
+ })