- 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 +670,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 +971,15 @@
composition += `
Cashier processed the request on ${formatedTime(time)}
+
Rupee Transaction ID
+
+
${floTxId}
+
+
`;
}
else {
@@ -982,6 +1031,84 @@
composition += `
Cashier processed the request on ${formatedTime(time)}
+
Rupee Transaction ID
+
+
${floTxId}
+
+
+
`;
+ }
+ else {
+ composition += `
+
+
Cashier hasn't processed the request
+ `;
+ }
+ 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}
+
+
+
+ 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}px; transform: translateX(${e.target.getBoundingClientRect().left - e.target.parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}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}px; transform: translateX(${tabDimensions.left - activeElement[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
+ }
+ else {
+ let tabDimensions = this.tabSlot.assignedElements()[0].getBoundingClientRect();
+ this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
+ }
+ 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)
+ }
+ }
+ })