@@ -1979,156 +2109,6 @@ class SpinnerLoader extends HTMLElement {
}
window.customElements.define('sm-spinner', SpinnerLoader);
-//Color Grid
-const colorGrid = document.createElement('template');
-colorGrid.innerHTML = `
-
-
`;
-
-customElements.define('color-grid',
- class extends HTMLElement {
- constructor() {
- super()
- this.attachShadow({
- mode: 'open'
- }).append(colorGrid.content.cloneNode(true))
-
- this.colorArray = []
- this.container = this.shadowRoot.querySelector('.color-tile-container')
- this.handleChange = this.handleChange.bind(this)
- this.setCheckMark = this.setCheckMark.bind(this)
- }
-
- set colors(arr) {
- this.colorArray = arr
- this.renderTiles()
- }
-
- set selectedColor(color) {
- if (this.colorArray.includes(color) && this.container.querySelector(`[data-color="${color}"]`)) {
- const selectedTile = this.container.querySelector(`[data-color="${color}"]`)
- if (selectedTile) {
- selectedTile.querySelector('input').checked = true
- this.setCheckMark(selectedTile)
- }
- }
- }
-
- randString(length) {
- let result = '';
- let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-
- for (let i = 0; i < length; i++)
- result += characters.charAt(Math.floor(Math.random() * characters.length));
- return result;
- }
-
- renderTiles() {
- this.container.innerHTML = ''
- const frag = document.createDocumentFragment()
- const groupName = this.randString(6)
- this.colorArray.forEach(color => {
- const label = document.createElement('label')
- label.classList.add('color-tile')
- label.setAttribute('data-color', color)
- if (color.includes('--'))
- label.setAttribute('style', `background-color: var(${color})`)
- else
- label.setAttribute('style', `background-color: ${color}`)
- label.innerHTML = `
-
- `
- frag.append(label)
- })
- this.container.append(frag)
- }
- setCheckMark(target) {
- target.parentNode.querySelectorAll('.checkmark').forEach(checkmark => checkmark.remove())
- const checkMark = document.createElement('div')
- checkMark.classList.add('checkmark')
- checkMark.innerHTML = `
-
- `
- target.append(checkMark)
- }
-
- handleChange(e) {
- const clickedTile = e.target.closest('.color-tile')
- this.setCheckMark(clickedTile)
- const clickedTileColor = clickedTile.dataset.color
- const tileSelected = new CustomEvent('colorselected', {
- bubbles: true,
- composed: true,
- detail: {
- value: clickedTileColor,
- }
- })
- this.dispatchEvent(tileSelected)
- }
-
- connectedCallback() {
- this.container.addEventListener('change', this.handleChange)
- }
-
- disconnectedCallback() {
- this.container.removeEventListener('change', this.handleChange)
- }
- })
const stripSelect = document.createElement('template');
stripSelect.innerHTML = `
-
-`;
-customElements.define('sm-textarea',
- class extends HTMLElement {
- constructor() {
- super()
- this.attachShadow({
- mode: 'open'
- }).append(smTextarea.content.cloneNode(true))
-
- this.textarea = this.shadowRoot.querySelector('textarea')
- this.textareaBox = this.shadowRoot.querySelector('.textarea')
- this.placeholder = this.shadowRoot.querySelector('.placeholder')
- this.reflectedAttributes = ['disabled', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
-
- this.reset = this.reset.bind(this)
- this.focusIn = this.focusIn.bind(this)
- this.fireEvent = this.fireEvent.bind(this)
- this.checkInput = this.checkInput.bind(this)
- }
- static get observedAttributes() {
- return ['disabled', 'value', 'placeholder', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
- }
- get value() {
- return this.textarea.value
- }
- set value(val) {
- this.setAttribute('value', val)
- this.fireEvent()
- }
- get disabled() {
- return this.hasAttribute('disabled')
- }
- set disabled(val) {
- if (val) {
- this.setAttribute('disabled', '')
- } else {
- this.removeAttribute('disabled')
- }
- }
- get isValid() {
- return this.textarea.checkValidity()
- }
- reset() {
- this.setAttribute('value', '')
- }
- focusIn() {
- this.textarea.focus()
- }
- fireEvent() {
- let event = new Event('input', {
- bubbles: true,
- cancelable: true,
- composed: true
- });
- this.dispatchEvent(event);
- }
- checkInput() {
- if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '')
- return;
- if (this.textarea.value !== '') {
- if (this.hasAttribute('animate'))
- this.textareaBox.classList.add('animate-placeholder')
- else
- this.placeholder.classList.add('hide')
-
- } else {
- if (this.hasAttribute('animate'))
- this.textareaBox.classList.remove('animate-placeholder')
- else
- this.placeholder.classList.remove('hide')
- }
- }
- connectedCallback() {
- this.textarea.addEventListener('input', e => {
- this.textareaBox.dataset.value = this.textarea.value
- this.checkInput()
- })
- }
- attributeChangedCallback(name, oldValue, newValue) {
- if (this.reflectedAttributes.includes(name)) {
- if (this.hasAttribute(name)) {
- this.textarea.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '')
- }
- else {
- this.textContent.removeAttribute(name)
- }
- }
- else if (name === 'placeholder') {
- this.placeholder.textContent = this.getAttribute('placeholder')
- }
- else if (name === 'value') {
- this.textarea.value = newValue;
- this.textareaBox.dataset.value = newValue
- this.checkInput()
- }
- }
- })
-
-const smTabHeader = document.createElement('template')
-smTabHeader.innerHTML = `
-
-
- `;
+customElements.define('sm-select', class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
- }).append(smTabHeader.content.cloneNode(true))
+ }).append(smSelect.content.cloneNode(true))
- this.prevTab
- this.allTabs
- this.activeTab
+ this.focusIn = this.focusIn.bind(this)
+ this.reset = this.reset.bind(this)
+ this.open = this.open.bind(this)
+ this.collapse = this.collapse.bind(this)
+ this.toggle = this.toggle.bind(this)
+ this.handleOptionsNavigation = this.handleOptionsNavigation.bind(this)
+ this.handleOptionSelection = this.handleOptionSelection.bind(this)
+ this.handleKeydown = this.handleKeydown.bind(this)
+ this.handleClickOutside = this.handleClickOutside.bind(this)
- this.indicator = this.shadowRoot.querySelector('.indicator');
- this.tabSlot = this.shadowRoot.querySelector('slot');
- this.tabHeader = this.shadowRoot.querySelector('.tab-header');
-
- this.changeTab = this.changeTab.bind(this)
- this.handleClick = this.handleClick.bind(this)
- this.handlePanelChange = this.handlePanelChange.bind(this)
- this.moveIndiactor = this.moveIndiactor.bind(this)
- }
-
- fireEvent(index) {
- this.dispatchEvent(
- new CustomEvent(`switchedtab${this.target}`, {
- bubbles: true,
- detail: {
- index: parseInt(index)
- }
- })
- )
- }
-
- moveIndiactor(tabDimensions) {
- this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
- }
-
-
- changeTab(target) {
- if (target === this.prevTab || !target.closest('sm-tab'))
- return
- if (this.prevTab)
- this.prevTab.classList.remove('active')
- target.classList.add('active')
-
- this.tabHeader.scrollTo({
- behavior: 'smooth',
- left: target.getBoundingClientRect().left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft
- })
- this.moveIndiactor(target.getBoundingClientRect())
- this.prevTab = target;
- this.activeTab = target;
- }
- handleClick(e) {
- if (e.target.closest('sm-tab')) {
- this.changeTab(e.target)
- this.fireEvent(e.target.dataset.index)
- }
- }
-
- handlePanelChange(e) {
- this.changeTab(this.allTabs[e.detail.index])
- }
-
- connectedCallback() {
- if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return;
- this.target = this.getAttribute('target')
-
- this.tabSlot.addEventListener('slotchange', () => {
- this.allTabs = this.tabSlot.assignedElements();
- this.allTabs.forEach((tab, index) => {
- tab.dataset.index = index
- })
- })
-
- this.addEventListener('click', this.handleClick)
- document.addEventListener(`switchedpanel${this.target}`, this.handlePanelChange)
-
- let resizeObserver = new ResizeObserver(entries => {
- entries.forEach((entry) => {
- if (this.prevTab) {
- let tabDimensions = this.activeTab.getBoundingClientRect();
- this.moveIndiactor(tabDimensions)
- }
- })
- })
- resizeObserver.observe(this)
- let observer = new IntersectionObserver((entries) => {
- entries.forEach((entry) => {
- if (entry.isIntersecting) {
- this.indicator.style.transition = 'none'
- if (this.activeTab) {
- let tabDimensions = this.activeTab.getBoundingClientRect();
- this.moveIndiactor(tabDimensions)
- } else {
- this.allTabs[0].classList.add('active')
- let tabDimensions = this.allTabs[0].getBoundingClientRect();
- this.moveIndiactor(tabDimensions)
- this.fireEvent(0)
- this.prevTab = this.tabSlot.assignedElements()[0];
- this.activeTab = this.prevTab;
- }
- }
- })
- }, {
- threshold: 1.0
- })
- observer.observe(this)
- }
- disconnectedCallback() {
- this.removeEventListener('click', this.handleClick)
- document.removeEventListener(`switchedpanel${this.target}`, this.handlePanelChange)
- }
-})
-
-// tab
-const smTab = document.createElement('template')
-smTab.innerHTML = `
-
-
-
-
-`;
+ ]
+ this.slideUp = [{
+ transform: `translateY(0)`,
+ opacity: 1
+ },
+ {
+ transform: `translateY(-0.5rem)`,
+ opacity: 0
+ }
+ ]
+ this.animationOptions = {
+ duration: 300,
+ fill: "forwards",
+ easing: 'ease'
+ }
-customElements.define('sm-tab', class extends HTMLElement {
- constructor() {
- super()
- this.shadow = this.attachShadow({
- mode: 'open'
- }).append(smTab.content.cloneNode(true))
+ this.optionList = this.shadowRoot.querySelector('.options')
+ this.chevron = this.shadowRoot.querySelector('.toggle')
+ this.selection = this.shadowRoot.querySelector('.selection')
+ this.selectedOptionText = this.shadowRoot.querySelector('.selected-option-text')
+ }
+ static get observedAttributes() {
+ return ['disabled', 'label']
+ }
+ get value() {
+ return this.getAttribute('value')
+ }
+ set value(val) {
+ const selectedOption = this.availableOptions.find(option => option.getAttribute('value') === val)
+ if (selectedOption) {
+ this.setAttribute('value', val)
+ this.selectedOptionText.textContent = `${this.label}${selectedOption.textContent}`;
+ if (this.previousOption) {
+ this.previousOption.classList.remove('check-selected')
+ }
+ selectedOption.classList.add('check-selected')
+ this.previousOption = selectedOption
+ } else {
+ console.warn(`There is no option with ${val} as value`)
+ }
+ }
+
+ reset(fire = true) {
+ if (this.availableOptions[0] && this.previousOption !== this.availableOptions[0]) {
+ const firstElement = this.availableOptions[0];
+ if (this.previousOption) {
+ this.previousOption.classList.remove('check-selected')
+ }
+ firstElement.classList.add('check-selected')
+ this.value = firstElement.getAttribute('value')
+ this.selectedOptionText.textContent = `${this.label}${firstElement.textContent}`
+ this.previousOption = firstElement;
+ if (fire) {
+ this.fireEvent()
+ }
+ }
+ }
+
+ focusIn() {
+ this.selection.focus()
+ }
+
+ open() {
+ this.optionList.classList.remove('hide')
+ this.optionList.animate(this.slideDown, this.animationOptions)
+ this.chevron.classList.add('rotate')
+ this.isOpen = true
+ }
+ collapse() {
+ this.chevron.classList.remove('rotate')
+ this.optionList.animate(this.slideUp, this.animationOptions)
+ .onfinish = () => {
+ this.optionList.classList.add('hide')
+ this.isOpen = false
+ }
+ }
+ toggle() {
+ if (!this.isOpen && !this.hasAttribute('disabled')) {
+ this.open()
+ } else {
+ this.collapse()
+ }
+ }
+
+ fireEvent() {
+ this.dispatchEvent(new CustomEvent('change', {
+ bubbles: true,
+ composed: true,
+ detail: {
+ value: this.value
+ }
+ }))
+ }
+
+ handleOptionsNavigation(e) {
+ if (e.key === 'ArrowUp') {
+ e.preventDefault()
+ if (document.activeElement.previousElementSibling) {
+ document.activeElement.previousElementSibling.focus()
+ } else {
+ this.availableOptions[this.availableOptions.length - 1].focus()
+ }
+ }
+ else if (e.key === 'ArrowDown') {
+ e.preventDefault()
+ if (document.activeElement.nextElementSibling) {
+ document.activeElement.nextElementSibling.focus()
+ } else {
+ this.availableOptions[0].focus()
+ }
+ }
+ }
+ handleOptionSelection(e) {
+ if (this.previousOption !== document.activeElement) {
+ this.value = document.activeElement.getAttribute('value')
+ this.fireEvent()
+ }
+ }
+ handleClick(e) {
+ if (e.target === this) {
+ this.toggle()
+ }
+ else {
+ this.handleOptionSelection()
+ this.collapse()
+ }
+ }
+ handleKeydown(e) {
+ if (e.target === this) {
+ if (this.isOpen && e.key === 'ArrowDown') {
+ e.preventDefault()
+ this.availableOptions[0].focus()
+ this.handleOptionSelection(e)
+ }
+ else if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ this.toggle()
+ }
+ }
+ else {
+ this.handleOptionsNavigation(e)
+ this.handleOptionSelection(e)
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault()
+ this.collapse()
+ }
+ }
+ }
+ handleClickOutside(e) {
+ if (this.isOpen && !this.contains(e.target)) {
+ this.collapse()
+ }
+ }
+ connectedCallback() {
+ this.setAttribute('role', 'listbox')
+ if (!this.hasAttribute('disabled')) {
+ this.selection.setAttribute('tabindex', '0')
+ }
+ let slot = this.shadowRoot.querySelector('slot')
+ slot.addEventListener('slotchange', e => {
+ this.availableOptions = slot.assignedElements()
+ this.reset(false)
+ });
+ this.addEventListener('click', this.handleClick)
+ this.addEventListener('keydown', this.handleKeydown)
+ document.addEventListener('mousedown', this.handleClickOutside)
+ }
+ disconnectedCallback() {
+ this.removeEventListener('click', this.toggle)
+ this.removeEventListener('keydown', this.handleKeydown)
+ document.removeEventListener('mousedown', this.handleClickOutside)
+ }
+ attributeChangedCallback(name) {
+ if (name === "disabled") {
+ if (this.hasAttribute('disabled')) {
+ this.selection.removeAttribute('tabindex')
+ } else {
+ this.selection.setAttribute('tabindex', '0')
+ }
+ } else if (name === 'label') {
+ this.label = this.hasAttribute('label') ? `${this.getAttribute('label')} ` : ''
+ }
}
})
-// tab-panels
-
-const smTabPanels = document.createElement('template')
-smTabPanels.innerHTML = `
-
-
- Nothing to see here.
-
-`;
-
-customElements.define('tab-panels', class extends HTMLElement {
+
`;
+customElements.define('sm-option', class extends HTMLElement {
constructor() {
super()
this.attachShadow({
mode: 'open'
- }).append(smTabPanels.content.cloneNode(true))
+ }).append(smOption.content.cloneNode(true))
+ }
- this.isTransitioning = false
-
- this.panelContainer = this.shadowRoot.querySelector('.panel-container');
- this.handleTabChange = this.handleTabChange.bind(this)
- }
- handleTabChange(e) {
- this.isTransitioning = true
- this.panelContainer.scrollTo({
- left: this.allPanels[e.detail.index].getBoundingClientRect().left - this.panelContainer.getBoundingClientRect().left + this.panelContainer.scrollLeft,
- behavior: 'smooth'
- })
- setTimeout(() => {
- this.isTransitioning = false
- }, 300);
- }
- fireEvent(index) {
- this.dispatchEvent(
- new CustomEvent(`switchedpanel${this.id}`, {
- bubbles: true,
- detail: {
- index: parseInt(index)
- }
- })
- )
- }
connectedCallback() {
- const slot = this.shadowRoot.querySelector('slot');
- slot.addEventListener('slotchange', (e) => {
- this.allPanels = e.target.assignedElements()
- this.allPanels.forEach((panel, index) => {
- panel.dataset.index = index
- intersectionObserver.observe(panel)
- })
- })
- document.addEventListener(`switchedtab${this.id}`, this.handleTabChange)
-
- const intersectionObserver = new IntersectionObserver(entries => {
-
- entries.forEach(entry => {
- if (!this.isTransitioning && entry.isIntersecting) {
- this.fireEvent(entry.target.dataset.index)
- }
- })
- }, {
- threshold: 0.6
- })
- }
- disconnectedCallback() {
- intersectionObserver.disconnect()
- document.removeEventListener(`switchedtab${this.id}`, this.handleTabChange)
+ this.setAttribute('role', 'option')
+ this.setAttribute('tabindex', '0')
}
})
\ No newline at end of file
diff --git a/scripts/fn_pay.js b/scripts/fn_pay.js
index c9f7c9c..b549053 100644
--- a/scripts/fn_pay.js
+++ b/scripts/fn_pay.js
@@ -39,6 +39,7 @@ User.init = function () {
}));
*/
promises.push(User.getCashierUPI());
+ promises.push(organizeSyncedData('savedUserData'));
Promise.all(promises)
.then(result => resolve(result))
.catch(error => reject(error))
@@ -85,8 +86,10 @@ User.findCashier = function () {
online.push(c);
if (!online.length)
return null;
- else
- return online[floCrypto.randInt(0, online.length)];
+ else {
+ const random = floCrypto.randInt(0, online.length - 1)
+ return online[random];
+ }
}
User.cashToToken = function (cashier, amount, upiTxID) {
@@ -166,6 +169,7 @@ Cashier.init = function () {
callback: UI_RENDER_FN
}));
*/
+ promises.push(User.getCashierUPI());
Promise.all(promises)
.then(result => resolve(result))
.catch(error => reject(error))
diff --git a/scripts/fn_ui.js b/scripts/fn_ui.js
index 4c75926..3d98ead 100644
--- a/scripts/fn_ui.js
+++ b/scripts/fn_ui.js
@@ -1,43 +1,157 @@
-/*jshint esversion: 6 */
-const userUI = {};
+/*jshint esversion: 8 */
+/**
+ * @yaireo/relative-time - javascript function to transform timestamp or date to local relative-time
+ *
+ * @version v1.0.0
+ * @homepage https://github.com/yairEO/relative-time
+ */
-userUI.requestTokenFromCashier = function () {
+!function (e, t) { var o = o || {}; "function" == typeof o && o.amd ? o([], t) : "object" == typeof exports && "object" == typeof module ? module.exports = t() : "object" == typeof exports ? exports.RelativeTime = t() : e.RelativeTime = t() }(this, (function () { const e = { year: 31536e6, month: 2628e6, day: 864e5, hour: 36e5, minute: 6e4, second: 1e3 }, t = "en", o = { numeric: "auto" }; function n(e) { e = { locale: (e = e || {}).locale || t, options: { ...o, ...e.options } }, this.rtf = new Intl.RelativeTimeFormat(e.locale, e.options) } return n.prototype = { from(t, o) { const n = t - (o || new Date); for (let t in e) if (Math.abs(n) > e[t] || "second" == t) return this.rtf.format(Math.round(n / e[t]), t) } }, n }));
+
+const relativeTime = new RelativeTime({ style: 'narrow' });
+
+function syncUserData(obsName, data) {
+ const dataToSend = Crypto.AES.encrypt(JSON.stringify(data), myPrivKey);
+ return floCloudAPI.sendApplicationData(dataToSend, obsName, { receiverID: myFloID });
+}
+async function organizeSyncedData(obsName) {
+ const fetchedData = await floCloudAPI.requestApplicationData(obsName, { mostRecent: true, senderIDs: [myFloID], receiverID: myFloID });
+ if (fetchedData.length && await compactIDB.readData(obsName, 'lastSyncTime') !== fetchedData[0].time) {
+ await compactIDB.clearData(obsName);
+ const dataToDecrypt = floCloudAPI.util.decodeMessage(fetchedData[0].message);
+ const decryptedData = JSON.parse(Crypto.AES.decrypt(dataToDecrypt, myPrivKey));
+ for (let key in decryptedData) {
+ floGlobals[obsName][key] = decryptedData[key];
+ compactIDB.addData(obsName, decryptedData[key], key);
+ }
+ compactIDB.addData(obsName, fetchedData[0].time, 'lastSyncTime');
+ return true;
+ } else {
+ const idbData = await compactIDB.readAllData(obsName);
+ for (const key in idbData) {
+ if (key !== 'lastSyncTime')
+ floGlobals[obsName][key] = idbData[key];
+ }
+ return true;
+ }
+}
+
+const userUI = {};
+function continueWalletTopup() {
let cashier = User.findCashier();
if (!cashier)
- return alert("No cashier online");
+ return notify("No cashier online. Please try again in a while.", 'error');
let amount = parseFloat(getRef('request_cashier_amount').value.trim());
- if (!amount)
- return alert("Enter amount");
- //get UPI txid from user
- let upiTxID = prompt(`Send Rs. ${amount} to ${cashierUPI[cashier]} and enter UPI txid`);
- if (!upiTxID)
- return alert("Cancelled");
+ getRef('topup_wallet__details').innerHTML = `Send
${formatAmount(amount)} to UPI ID below`;
+ getRef('topup_wallet__upi_id').value = cashierUPI[cashier];
+ showProcessStage('topup_wallet_process', 1)
+ getRef('topup_wallet__txid').focusIn();
+}
+function depositMoneyToWallet() {
+ let cashier = User.findCashier();
+ if (!cashier)
+ return notify("No cashier online. Please try again in a while.", 'error');
+ let amount = parseFloat(getRef('request_cashier_amount').value.trim());
+ let upiTxID = getRef('topup_wallet__txid').value.trim();
+ if (upiTxID === '')
+ return notify("Please enter UPI transaction ID", 'error');
+ buttonLoader('topup_wallet_button', true);
User.cashToToken(cashier, amount, upiTxID).then(result => {
console.log(result);
- alert("Requested cashier. please wait!");
- }).catch(error => console.error(error))
+ showProcessStage('topup_wallet_process', 2);
+ }).catch(error => {
+ console.error(error)
+ getRef('topup_failed_reason').textContent = error;
+ showProcessStage('topup_wallet_process', 3);
+ })
}
-userUI.withdrawCashFromCashier = function () {
+function withdrawMoneyFromWallet() {
let cashier = User.findCashier();
if (!cashier)
- return alert("No cashier online");
- let amount = parseFloat(getRef('request_cashier_amount').value.trim());
- if (!amount)
- return alert("Enter amount");
- //get confirmation from user
- let upiID = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`);
- if (!upiID)
- return alert("Cancelled");
+ return notify("No cashier online. Please try again in a while.", 'error');
+ let amount = parseFloat(getRef('send_cashier_amount').value.trim());
+ const upiId = getRef('select_upi_id').value;
+ if (!upiId)
+ return notify("Please add an UPI ID to continue", 'error');
+ buttonLoader('withdraw_rupee_button', true);
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 => {
+ showProcessStage('withdraw_wallet_process', 1);
console.log(result);
- alert("Requested cashier. please wait!");
- }).catch(error => console.error(error))
- }).catch(error => console.error(error))
+ }).catch(error => {
+ getRef('withdrawal_failed_reason').textContent = error;
+ showProcessStage('withdraw_wallet_process', 2);
+ console.error(error)
+ }).finally(() => {
+ buttonLoader('withdraw_rupee_button', false);
+ });
+ }).catch(error => {
+ getRef('withdrawal_failed_reason').textContent = error;
+ showProcessStage('withdraw_wallet_process', 2);
+ buttonLoader('withdraw_rupee_button', false);
+ console.error(error)
+ })
}
+async function renderSavedUpiIds() {
+ const frag = document.createDocumentFragment();
+ for (const upiId in floGlobals.savedUserData.upiIds) {
+ frag.append(render.savedUpiId(upiId));
+ }
+ getRef('saved_upi_ids_list').innerHTML = '';
+ getRef('saved_upi_ids_list').append(frag);
+}
+function saveUpiId() {
+ 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))
+ return notify('This UPI ID is already saved', 'error');
+ floGlobals.savedUserData.upiIds[upiId] = {}
+ syncUserData('savedUserData', floGlobals.savedUserData).then(() => {
+ 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_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 UPI 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 => {
if (confirmation) {
@@ -67,36 +181,115 @@ userUI.renderCashierRequests = function (requests, error = null) {
return console.error(error);
else if (typeof requests !== "object" || requests === null)
return;
- const frag = document.createDocumentFragment()
- for (let r in requests) {
- let oldCard = document.getElementById(r);
- if (oldCard) oldCard.remove();
- frag.append(render.walletRequestCard(requests[r]))
+ if (pagesData.lastPage === 'wallet') {
+ for (let transactionID in requests) {
+ const { note, tag } = requests[transactionID];
+ let status = tag ? 'done' : (note ? 'failed' : "pending");
+ getRef('wallet_history_wrapper').querySelectorAll(`[data-vc="${transactionID}"]`).forEach(card => card.remove());
+ getRef(status !== 'pending' ? 'wallet_history' : 'pending_wallet_transactions').prepend(render.walletRequestCard(requests[transactionID]))
+ }
}
- getRef('user-cashier-requests').append(frag)
-}
+};
+
+const pendingTransactionsObserver = new MutationObserver((mutations) => {
+ mutations.forEach(mutation => {
+ if (mutation.type === 'childList') {
+ if (mutation.target.children.length)
+ mutation.target.parentNode.classList.remove('hide')
+ else
+ mutation.target.parentNode.classList.add('hide')
+
+ }
+ })
+});
userUI.renderMoneyRequests = function (requests, error = null) {
if (error)
return console.error(error);
else if (typeof requests !== "object" || requests === null)
return;
- const frag = document.createDocumentFragment()
- for (let r in requests) {
- let oldCard = document.getElementById(r);
- if (oldCard) oldCard.remove();
- frag.append(render.paymentRequestCard(requests[r]))
+ if (pagesData.lastPage === 'requests') {
+ for (let r in requests) {
+ getRef('requests_history_wrapper').querySelectorAll(`[data-vc="${r}"]`).forEach(card => card.remove());
+ if (requests[r].note) {
+ getRef('payment_request_history').prepend(render.paymentRequestCard(requests[r]));
+ } else {
+ getRef('pending_payment_requests').prepend(render.paymentRequestCard(requests[r]));
+ }
+ }
}
- getRef('user-money-requests').append(frag)
-}
+ if (floGlobals.loaded) {
+ for (let r in requests) {
+ if (!requests[r].note) {
+ notify(`You have received payment request from ${getFloIdTitle(requests[r].senderID)}`, '', {
+ pinned: true,
+ action: {
+ label: 'View',
+ callback: () => {
+ window.location.hash = `#/requests`
+ }
+ }
+ });
+ }
+ }
+ }
+ let totalRequests = 0;
+ for (const request in User.moneyRequests) {
+ if (!User.moneyRequests[request].note) totalRequests++;
+ }
+ const animOptions = {
+ duration: 200,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+ }
+ if (totalRequests) {
+ if (!getRef('requests_page_button').querySelector('.badge')) {
+ const badge = createElement('span', {
+ className: 'badge',
+ textContent: totalRequests
+ })
+ getRef('requests_page_button').append(badge)
+ badge.animate([
+ {
+ transform: 'scale(0) translateY(0.5rem)'
+ },
+ {
+ transform: 'scale(1) translateY(0)'
+ },
+ ], animOptions)
+ } else {
+ const badge = getRef('requests_page_button').querySelector('.badge');
+ badge.textContent = totalRequests;
+ badge.animate([
+ { transform: 'scale(1)' },
+ { transform: `scale(1.5)` },
+ { transform: 'scale(1)' }
+ ], animOptions)
+ }
+ } else {
+ if (getRef('requests_page_button').querySelector('.badge')) {
+ const badge = getRef('requests_page_button').querySelector('.badge')
+ badge.animate([
+ {
+ transform: 'scale(1) translateY(0)'
+ },
+ {
+ transform: 'scale(0) translateY(0.5rem)'
+ },
+ ], animOptions).onfinish = () => {
+ badge.remove()
+ }
+ }
+ }
+};
userUI.payRequest = function (reqID) {
- let request = User.moneyRequests[reqID];
- getConfirmation('Pay?', { message: `Do you want to pay ${request.message.amount} to ${request.senderID}?` }).then(confirmation => {
+ 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))
@@ -107,7 +300,7 @@ userUI.payRequest = function (reqID) {
userUI.declineRequest = function (reqID) {
let request = User.moneyRequests[reqID];
- getConfirmation('Decline payment?').then(confirmation => {
+ getConfirmation('Decline payment?', { confirmText: 'Decline' }).then(confirmation => {
if (confirmation) {
User.decideRequest(request, "DECLINED").then(result => {
console.log(result);
@@ -117,6 +310,15 @@ userUI.declineRequest = function (reqID) {
})
}
+delegate(getRef('pending_payment_requests'), 'click', '.pay-requested', e => {
+ const vectorClock = e.target.closest('.payment-request').dataset.vc;
+ userUI.payRequest(vectorClock);
+})
+delegate(getRef('pending_payment_requests'), 'click', '.decline-payment', e => {
+ const vectorClock = e.target.closest('.payment-request').dataset.vc;
+ userUI.declineRequest(vectorClock);
+})
+
//Cashier
const cashierUI = {};
@@ -129,9 +331,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) {
@@ -187,123 +389,337 @@ function completeTokenToCashRequest(request) {
})
}
-function renderAllTokenTransactions() {
- tokenAPI.getAllTxs(myFloID).then(result => {
- getRef('token_transactions').innerHTML = ''
- const frag = document.createDocumentFragment();
- for (let txid in result.transactions) {
- frag.append(render.transactionCard(txid, tokenAPI.util.parseTxData(result.transactions[txid])))
- }
- getRef('token_transactions').append(frag)
- }).catch(error => console.error(error))
+function getFloIdTitle(floID) {
+ return floGlobals.savedIds[floID] ? floGlobals.savedIds[floID].title : floID;
+}
+
+function formatAmount(amount) {
+ return amount.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
+}
+
+function getStatusIcon(status) {
+ switch (status) {
+ case 'PENDING':
+ return '
';
+ case 'COMPLETED':
+ return '
';
+ case 'REJECTED':
+ return '
';
+ default:
+ break;
+ }
}
const render = {
- transactionCard(txid, transactionDetails) {
- const { time, sender, receiver, tokenAmount } = transactionDetails
+ savedId(floID, 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) {
+ const { txid, time, sender, receiver, tokenAmount } = transactionDetails;
const clone = getRef('transaction_template').content.cloneNode(true).firstElementChild;
- clone.dataset.txid = txid
- clone.querySelector('.transaction__time').textContent = getFormattedTime(time * 1000)
- clone.querySelector('.transaction__amount').textContent = tokenAmount
+ clone.dataset.txid = txid;
+ clone.querySelector('.transaction__time').textContent = getFormattedTime(time * 1000);
+ clone.querySelector('.transaction__amount').textContent = formatAmount(tokenAmount);
if (sender === myFloID) {
- clone.querySelector('.transaction__amount').classList.add('sent')
- clone.querySelector('.transaction__receiver').textContent = `Sent to ${receiver || 'Myself'}`
- clone.querySelector('.transaction__icon').innerHTML = `
`
+ clone.classList.add('sent');
+ clone.querySelector('.transaction__receiver').textContent = `Sent to ${getFloIdTitle(receiver) || 'Myself'}`;
+ clone.querySelector('.transaction__icon').innerHTML = `
`;
} else if (receiver === myFloID) {
- clone.querySelector('.transaction__amount').classList.add('received')
- clone.querySelector('.transaction__receiver').textContent = `Received from ${sender}`
- clone.querySelector('.transaction__icon').innerHTML = `
`
+ clone.classList.add('received');
+ clone.querySelector('.transaction__receiver').textContent = `Received from ${getFloIdTitle(sender)}`;
+ clone.querySelector('.transaction__icon').innerHTML = `
`;
} else { //This should not happen unless API returns transaction that does not involve myFloID
row.insertCell().textContent = tx.sender;
row.insertCell().textContent = tx.receiver;
}
- return clone
+ return clone;
},
cashierRequestCard(details) {
const { time, senderID, message: { mode }, note, tag, vectorClock } = details;
const clone = getRef('cashier_request_template').content.cloneNode(true).firstElementChild;
- clone.id = vectorClock
+ clone.id = vectorClock;
const status = tag || note; //status tag for completed, note for rejected
- clone.querySelector('.cashier-request__requestor').textContent = senderID
- clone.querySelector('.cashier-request__time').textContent = getFormattedTime(time)
- clone.querySelector('.cashier-request__mode').textContent = mode
+ clone.querySelector('.cashier-request__requestor').textContent = senderID;
+ clone.querySelector('.cashier-request__time').textContent = getFormattedTime(time);
+ clone.querySelector('.cashier-request__mode').textContent = mode;
if (status)
- clone.querySelector('.cashier-request__status').textContent = status
+ clone.querySelector('.cashier-request__status').textContent = status;
else
- clone.querySelector('.cashier-request__status').innerHTML = `
`
- return clone
+ clone.querySelector('.cashier-request__status').innerHTML = `
`;
+ return clone;
},
walletRequestCard(details) {
- const { time, receiverID, message: { mode }, note, tag, vectorClock } = details;
- const clone = getRef('wallet_request_template').content.cloneNode(true).firstElementChild;
- clone.id = vectorClock
- clone.querySelector('.wallet-request__requestor').textContent = receiverID
- clone.querySelector('.wallet-request__time').textContent = getFormattedTime(time)
- clone.querySelector('.wallet-request__mode').textContent = mode === 'cash-to-token' ? 'Deposit' : 'Withdraw'
- let status = tag ? (tag + ":" + note) : (note || "PENDING");
- clone.querySelector('.wallet-request__status').textContent = status
- return clone
+ 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' ? '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 = mode === 'cash-to-token' ?
+ `
`
+ :
+ `
`;
+ 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') {
+ icon = `
`
+ clone.querySelector('.wallet-request__status').innerHTML = `Failed ${icon}`;
+ }
+ return clone;
},
paymentRequestCard(details) {
const { time, senderID, message: { amount, remark }, note, vectorClock } = details;
- const clone = getRef('payment_request_template').content.cloneNode(true).firstElementChild;
- clone.id = vectorClock
- clone.querySelector('.payment-request__requestor').textContent = 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 =
- `
-
`;
-
- return clone
+ 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' });
+ const status = note ? note.split(':')[0] : 'PENDING';
+ if (note) {
+ clone.firstElementChild.href = `#/transaction?transactionId=${vectorClock}&type=request`;
+ let icon
+ if (status === 'PAID')
+ icon = `
`
+ else
+ icon = `
`
+ clone.querySelector('.payment-request__status').innerHTML = `${status.toLowerCase()} ${icon}`;
+ }
+ return clone;
},
+ transactionMessage(details) {
+ const { tokenAmount, time, sender, receiver } = tokenAPI.util.parseTxData(details)
+ let messageType = sender === receiver ? 'self' : sender === myFloID ? 'sent' : 'received';
+ const clone = getRef('transaction_message_template').content.cloneNode(true).firstElementChild;
+ clone.classList.add(messageType);
+ 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;
+ }
+};
+
+function buttonLoader(id, show) {
+ getRef(id).disabled = show;
+ const animOptions = {
+ duration: 200,
+ fill: 'forwards',
+ easing: 'ease'
+ }
+ if (show) {
+ getRef(id).animate([
+ {
+ clipPath: 'circle(100%)',
+ },
+ {
+ clipPath: 'circle(0)',
+ },
+ ], animOptions).onfinish = e => {
+ e.target.commitStyles()
+ e.target.cancel()
+ }
+ getRef(id).parentNode.append(createElement('sm-spinner'))
+ } else {
+ getRef(id).style = ''
+ const potentialTarget = getRef(id).parentNode.querySelector('sm-spinner')
+ if (potentialTarget) potentialTarget.remove();
+ }
}
-let currentUserAction
+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 () {
+ const frag = document.createDocumentFragment();
+ await organizeSyncedData('savedIds');
+ 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();
+ if (floGlobals.savedIds.hasOwnProperty(floID))
+ return notify('This FLO ID is already saved', 'error');
+ const title = getRef('flo_id_title_to_save').value.trim();
+ floGlobals.savedIds[floID] = { title }
+ syncUserData('savedIds', floGlobals.savedIds).then(() => {
+ insertElementAlphabetically(title, render.savedId(floID, { title }))
+ notify(`Saved ${floID}`, 'success');
+ 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,
+})
+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)
+ }
+}
+
+let currentUserAction;
function showTokenTransfer(type) {
getRef('tt_button').textContent = type;
- currentUserAction = type
+ currentUserAction = type;
if (type === 'send') {
getRef('token_transfer__title').textContent = 'Send money to FLO ID';
} else {
getRef('token_transfer__title').textContent = 'Request money from FLO ID';
}
- showPopup('token_transfer_popup')
+ if (pagesData.lastPage === 'contact') {
+ getRef('token_transfer__receiver').value = pagesData.params.floId;
+ getRef('token_transfer__receiver').readOnly = true;
+ } else {
+ getRef('token_transfer__receiver').readOnly = false;
+ }
+ showPopup('token_transfer_popup');
+ if (pagesData.lastPage === 'contact') {
+ getRef('token_transfer__amount').focusIn();
+ }
}
function executeUserAction() {
- const floID = getRef('tt_flo_id').value.trim(),
- amount = parseFloat(getRef('tt_amount').value),
+ const floID = getRef('token_transfer__receiver').value.trim(),
+ amount = parseFloat(getRef('token_transfer__amount').value),
remark = getRef('tt_remark').value.trim();
if (currentUserAction === 'send') {
- userUI.sendMoneyToUser(floID, amount, remark)
+ userUI.sendMoneyToUser(floID, amount, remark);
} else {
- userUI.requestMoneyFromUser(floID, amount, remark)
+ userUI.requestMoneyFromUser(floID, amount, remark);
}
}
function changeUpi() {
- const upiID = getRef('upi_id').value.trim()
- Cashier.updateUPI(upiID).then(() => {
- notify('UPI ID updated successfully', 'success')
+ const upiId = getRef('upi_id').value.trim();
+ Cashier.updateUPI(upiId).then(() => {
+ notify('UPI ID updated successfully', 'success');
}).catch(err => {
- notify(err, 'error')
- })
+ notify(err, 'error');
+ });
}
+function getSignedIn() {
+ return new Promise((resolve, reject) => {
+ if (window.location.hash.includes('sign_in') || window.location.hash.includes('sign_up')) {
+ showPage(window.location.hash);
+ } else {
+ location.hash = `#/sign_in`;
+ }
+ getRef('sign_in_button').onclick = () => {
+ resolve(getRef('private_key_field').value.trim());
+ getRef('private_key_field').value = '';
+ showPage('loading');
+ };
+ getRef('sign_up_button').onclick = () => {
+ resolve(getRef('generated_private_key').value.trim());
+ getRef('generated_private_key').value = '';
+ showPage('loading');
+ };
+ });
function signOut() {
getConfirmation('Sign out?', 'You are about to sign out of the app, continue?', 'Stay', 'Leave')
.then(async (res) => {
if (res) {
- await floDapps.clearCredentials()
- location.reload()
+ await floDapps.clearCredentials();
+ location.reload();
}
- })
+ });
}
\ No newline at end of file
diff --git a/scripts/std_op.js b/scripts/std_op.js
index cb3a93a..d7bd747 100644
--- a/scripts/std_op.js
+++ b/scripts/std_op.js
@@ -7496,7 +7496,7 @@
return reject("Invalid amount");
this.getBalance(senderID, token).then(bal => {
if (amount > bal)
- return reject("Insufficiant token balance");
+ return reject(`Insufficiant ${token} balance`);
floBlockchainAPI.writeData(senderID, `send ${amount} ${token}# ${message}`, privKey, receiverID)
.then(txid => resolve(txid))
.catch(error => reject(error))
diff --git a/scripts/std_ui.js b/scripts/std_ui.js
index 1985074..ea1df52 100644
--- a/scripts/std_ui.js
+++ b/scripts/std_ui.js
@@ -1,7 +1,11 @@
-/*jshint esversion: 6 */
+/*jshint esversion: 9 */
// Global variables
const domRefs = {};
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)
@@ -85,9 +89,9 @@ function hidePopup() {
}
document.addEventListener('popupopened', async e => {
+ const frag = document.createDocumentFragment()
switch (e.target.id) {
case 'saved_ids_popup':
- const frag = document.createDocumentFragment()
const allSavedIds = await getArrayOfSavedIds()
allSavedIds.forEach(({ floID, name }) => {
frag.append(render.savedIdPickerCard(floID, name))
@@ -96,7 +100,22 @@ document.addEventListener('popupopened', async e => {
getRef('saved_ids_picker_list').append(frag)
getRef('search_saved_ids_picker').focusIn()
break;
- case 'get_private_key_popup':
+ case 'withdraw_wallet_popup':
+ 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')
+ getRef('select_upi_id').append(frag)
+ }
+ showProcessStage('withdraw_wallet_process', 0)
break;
}
})
@@ -107,14 +126,12 @@ document.addEventListener('popupclosed', e => {
getRef('saved_ids_picker_list').innerHTML = ''
getRef('search_saved_ids_picker').value = ''
break;
- case 'get_private_key_popup':
- getRef('get_private_key').classList.remove('hide')
- getRef('transaction_result').classList.add('hide')
- getRef('confirm_transaction_button').classList.remove('hide')
- getRef('confirm_transaction_button').nextElementSibling.classList.add('hide')
+ case 'topup_wallet_popup':
+ showProcessStage('topup_wallet_process', 0)
break;
- case 'retrieve_flo_id_popup':
- getRef('recovered_flo_id_wrapper').classList.add('hide')
+ case 'withdraw_wallet_popup':
+ getRef('select_upi_id').parentNode.classList.add('hide')
+ getRef('select_upi_id').innerHTML = ''
break;
}
})
@@ -143,7 +160,6 @@ const getConfirmation = (title, options = {}) => {
//Function for displaying toast notifications. pass in error for mode param if you want to show an error.
function notify(message, mode, options = {}) {
- const { pinned = false, sound = false } = options
let icon
switch (mode) {
case 'success':
@@ -153,7 +169,7 @@ function notify(message, mode, options = {}) {
icon = `
`
break;
}
- getRef("notification_drawer").push(message, { pinned, icon });
+ getRef("notification_drawer").push(message, { icon, ...options });
if (mode === 'error') {
console.error(message)
}
@@ -186,7 +202,7 @@ function getFormattedTime(time, format) {
return `${month} ${date}, ${year}`;
break;
default:
- return `${month} ${date} ${year}, ${finalHours}`;
+ return `${month} ${date}, ${year} at ${finalHours}`;
}
} catch (e) {
console.error(e);
@@ -253,17 +269,21 @@ function createRipple(event, target) {
}
const pagesData = {
- params: {}
+ params: {},
+ openedPages: new Set(),
}
-let tempData
async function showPage(targetPage, options = {}) {
- const { firstLoad, hashChange, isPreview } = options
+ const { firstLoad, hashChange } = options
let pageId
let params = {}
let searchParams
if (targetPage === '') {
- pageId = 'home'
+ if (typeof myFloID === "undefined") {
+ pageId = 'sign_in'
+ } else {
+ pageId = 'home'
+ }
} else {
if (targetPage.includes('/')) {
if (targetPage.includes('?')) {
@@ -281,115 +301,308 @@ async function showPage(targetPage, options = {}) {
pageId = targetPage
}
}
+ if (typeof myFloID === "undefined" && !(['sign_up', 'sign_in', 'loading', 'landing'].includes(pageId))) return
+ else if (typeof myFloID !== "undefined" && (['sign_up', 'sign_in', 'loading', 'landing'].includes(pageId))) {
+ history.replaceState(null, null, '#/home');
+ pageId = 'home'
+ }
if (searchParams) {
const urlSearchParams = new URLSearchParams('?' + searchParams);
params = Object.fromEntries(urlSearchParams.entries());
}
+ switch (pageId) {
+ case 'sign_in':
+ setTimeout(() => {
+ getRef('private_key_field').focusIn()
+ }, 0);
+ targetPage = 'sign_in'
+ break;
+ case 'sign_up':
+ const { floID, privKey } = floCrypto.generateNewID()
+ getRef('generated_flo_id').value = floID
+ getRef('generated_private_key').value = privKey
+ targetPage = 'sign_up'
+ break;
+ case 'contact':
+ getRef('contact__title').textContent = getFloIdTitle(params.floId)
+ getRef('contact__transactions').innerHTML = '
'
+ Promise.all([
+ tokenAPI.fetch_api(`api/v1.0/getTokenTransactions?token=rupee&senderFloAddress=${myFloID}&destFloAddress=${params.floId}`),
+ tokenAPI.fetch_api(`api/v1.0/getTokenTransactions?token=rupee&senderFloAddress=${params.floId}&destFloAddress=${myFloID}`)])
+ .then(([sentTransactions, receivedTransactions]) => {
+ const allTransactions = Object.values({ ...sentTransactions.transactions, ...receivedTransactions.transactions }).sort((a, b) => b.transactionDetails.time - a.transactionDetails.time)
+ if (contactHistoryLoader) {
+ contactHistoryLoader.update(allTransactions)
+ } else {
+ contactHistoryLoader = new LazyLoader('#contact__transactions', allTransactions, render.transactionMessage, { bottomFirst: true });
+ }
+ contactHistoryLoader.init()
+ }).catch(err => {
+ console.error(err)
+ })
+ break;
+ case 'history':
+ const paymentTransactions = []
+ if (paymentsHistoryLoader)
+ paymentsHistoryLoader.clear()
+ getRef('payments_history').innerHTML = '
';
+ tokenAPI.getAllTxs(myFloID).then(({ transactions }) => {
+ for (const transactionId in transactions) {
+ paymentTransactions.push({
+ ...tokenAPI.util.parseTxData(transactions[transactionId]),
+ txid: transactionId
+ })
+ }
+ if (paymentsHistoryLoader) {
+ paymentsHistoryLoader.update(paymentTransactions);
+ } else {
+ paymentsHistoryLoader = new LazyLoader('#payments_history', paymentTransactions, render.transactionCard);
+ }
+ paymentsHistoryLoader.init();
+ }).catch(e => {
+ console.error(e)
+ })
+ break;
+ case 'requests':
+ 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])
+ }
+ }
+ if (paymentRequestsLoader) {
+ paymentRequestsLoader.update(paymentRequests)
+ } else {
+ paymentRequestsLoader = new LazyLoader('#payment_request_history', paymentRequests, render.paymentRequestCard);
+ pendingTransactionsObserver.observe(getRef('pending_payment_requests'), { childList: true });
+ }
+ if (arePaymentsPending) {
+ getRef('pending_payment_requests').innerHTML = ''
+ getRef('pending_payment_requests').append(pendingPaymentRequests)
+ }
+ paymentRequestsLoader.init()
+ break;
+ case 'wallet':
+ const walletTransactions = []
+ if (walletHistoryLoader)
+ walletHistoryLoader.clear()
+ const pendingWalletTransactions = document.createDocumentFragment()
+
+ let areTransactionsPending = false
+ for (const transactionId in User.cashierRequests) {
+ if (!User.cashierRequests[transactionId].note) {
+ areTransactionsPending = true
+ pendingWalletTransactions.prepend(render.walletRequestCard(User.cashierRequests[transactionId]))
+ } else {
+ walletTransactions.unshift(User.cashierRequests[transactionId])
+ }
+ }
+ if (walletHistoryLoader) {
+ walletHistoryLoader.update(walletTransactions)
+ } else {
+ walletHistoryLoader = new LazyLoader('#wallet_history', walletTransactions, render.walletRequestCard);
+ pendingTransactionsObserver.observe(getRef('pending_wallet_transactions'), { childList: true });
+ }
+ if (areTransactionsPending) {
+ getRef('pending_wallet_transactions').innerHTML = ''
+ getRef('pending_wallet_transactions').append(pendingWalletTransactions)
+ }
+ walletHistoryLoader.init()
+ break;
+ case 'transaction':
+ let transactionDetails
+ let status
+ 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')
+ }
+ } 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 = `
${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')
+
+ } 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 }, time } = transactionDetails
+ getRef('transaction__time').textContent = getFormattedTime(time)
+ getRef('transaction__amount').textContent = formatAmount(amount)
+ getRef('transaction__status').textContent = status
+ break;
+ case 'settings':
+ renderSavedUpiIds()
+ break;
+ default:
+ break;
+ }
+ if (pageId !== 'history') {
+ if (paymentsHistoryLoader)
+ paymentsHistoryLoader.clear()
+ }
+ if (pageId !== 'contact') {
+ if (contactHistoryLoader)
+ contactHistoryLoader.clear()
+ }
+ if (pageId !== 'wallet') {
+ if (walletHistoryLoader)
+ walletHistoryLoader.clear()
+ }
+ if (pageId !== 'settings') {
+ getRef('saved_upi_ids_list').innerHTML = '';
+ }
+
if (pagesData.lastPage !== pageId) {
+ const animOptions = {
+ duration: 100,
+ fill: 'forwards',
+ easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+ }
+ let previousActiveElement = getRef('main_navbar').querySelector('.nav-item--active')
+ const currentActiveElement = document.querySelector(`.nav-item[href="#/${pageId}"]`)
+ if (currentActiveElement) {
+ if (getRef('main_navbar').classList.contains('hide')) {
+ getRef('main_card').classList.remove('nav-hidden')
+ getRef('main_navbar').classList.remove('hide-away')
+ getRef('main_navbar').classList.remove('hide')
+ getRef('main_navbar').animate([
+ {
+ transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
+ opacity: 0,
+ },
+ {
+ transform: `none`,
+ opacity: 1,
+ },
+ ], { ...animOptions, easing: 'ease-in' })
+ }
+ const previousActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(previousActiveElement)
+ const currentActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(currentActiveElement)
+ const isOnTop = previousActiveElementIndex < currentActiveElementIndex
+ const currentIndicator = createElement('div', { className: 'nav-item__indicator' });
+ let previousIndicator = getRef('main_navbar').querySelector('.nav-item__indicator')
+ if (!previousIndicator) {
+ previousIndicator = currentIndicator.cloneNode(true)
+ previousActiveElement = currentActiveElement
+ previousActiveElement.append(previousIndicator)
+ } else if (currentActiveElementIndex !== previousActiveElementIndex) {
+ const indicatorDimensions = previousIndicator.getBoundingClientRect()
+ const currentActiveElementDimensions = currentActiveElement.getBoundingClientRect()
+ let moveBy
+ if (isMobileView) {
+ moveBy = ((currentActiveElementDimensions.width - indicatorDimensions.width) / 2) + indicatorDimensions.width
+ } else {
+ moveBy = ((currentActiveElementDimensions.height - indicatorDimensions.height) / 2) + indicatorDimensions.height
+ }
+ indicatorObserver.observe(previousIndicator)
+ previousIndicator.animate([
+ {
+ transform: 'none',
+ opacity: 1,
+ },
+ {
+ transform: `translate${isMobileView ? 'X' : 'Y'}(${isOnTop ? `${moveBy}px` : `-${moveBy}px`})`,
+ opacity: 0,
+ },
+ ], { ...animOptions, easing: 'ease-in' }).onfinish = () => {
+ previousIndicator.remove()
+ }
+ tempData = {
+ currentActiveElement,
+ currentIndicator,
+ isOnTop,
+ animOptions,
+ moveBy
+ }
+ }
+ previousActiveElement.classList.remove('nav-item--active');
+ currentActiveElement.classList.add('nav-item--active')
+ } else {
+ if (!getRef('main_navbar').classList.contains('hide')) {
+ getRef('main_card').classList.add('nav-hidden')
+ getRef('main_navbar').classList.add('hide-away')
+ getRef('main_navbar').animate([
+ {
+ transform: `none`,
+ opacity: 1,
+ },
+ {
+ transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
+ opacity: 0,
+ },
+ ], {
+ duration: 200,
+ fill: 'forwards',
+ easing: 'ease'
+ }).onfinish = () => {
+ getRef('main_navbar').classList.add('hide')
+ }
+ }
+ }
+ document.querySelectorAll('.page').forEach(page => page.classList.add('hide'))
+ getRef(pageId).closest('.page').classList.remove('hide')
+ document.querySelectorAll('.inner-page').forEach(page => page.classList.add('hide'))
+ getRef(pageId).classList.remove('hide')
+ getRef('main_card').style.overflowY = "hidden";
+ getRef(pageId).animate([
+ {
+ opacity: 0,
+ transform: 'translateY(1rem)'
+ },
+ {
+ opacity: 1,
+ transform: 'translateY(0)'
+ },
+ ],
+ {
+ duration: 300,
+ easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
+ }).onfinish = () => {
+ getRef('main_card').style.overflowY = "";
+ }
pagesData.lastPage = pageId
}
if (params)
pagesData.params = params
- switch (pageId) {
- case 'transactions':
- break;
- default:
+ pagesData.openedPages.add(pageId)
- }
- const animOptions = {
- duration: 100,
- fill: 'forwards',
- }
- let previousActiveElement = getRef('main_navbar').querySelector('.nav-item--active')
- const currentActiveElement = document.querySelector(`.nav-item[href="#/${pageId}"]`)
- if (currentActiveElement) {
- if (getRef('main_navbar').classList.contains('hide')) {
- getRef('main_navbar').classList.remove('hide-away')
- getRef('main_navbar').classList.remove('hide')
- getRef('main_navbar').animate([
- {
- transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
- opacity: 0,
- },
- {
- transform: `none`,
- opacity: 1,
- },
- ], {
- duration: 100,
- fill: 'forwards',
- easing: 'ease'
- })
- }
- getRef('main_header').classList.remove('hide')
- const previousActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(previousActiveElement)
- const currentActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(currentActiveElement)
- const isOnTop = previousActiveElementIndex < currentActiveElementIndex
- const currentIndicator = createElement('div', { className: 'nav-item__indicator' });
- let previousIndicator = getRef('main_navbar').querySelector('.nav-item__indicator')
- if (!previousIndicator) {
- previousIndicator = currentIndicator.cloneNode(true)
- previousActiveElement = currentActiveElement
- previousActiveElement.append(previousIndicator)
- } else if (currentActiveElementIndex !== previousActiveElementIndex) {
- const indicatorDimensions = previousIndicator.getBoundingClientRect()
- const currentActiveElementDimensions = currentActiveElement.getBoundingClientRect()
- let moveBy
- if (isMobileView) {
- moveBy = ((currentActiveElementDimensions.width - indicatorDimensions.width) / 2) + indicatorDimensions.width
- } else {
- moveBy = ((currentActiveElementDimensions.height - indicatorDimensions.height) / 2) + indicatorDimensions.height
- }
- indicatorObserver.observe(previousIndicator)
- previousIndicator.animate([
- {
- transform: 'none',
- opacity: 1,
- },
- {
- transform: `translate${isMobileView ? 'X' : 'Y'}(${isOnTop ? `${moveBy}px` : `-${moveBy}px`})`,
- opacity: 0,
- },
- ], { ...animOptions, easing: 'ease-in' }).onfinish = () => {
- previousIndicator.remove()
- }
- tempData = {
- currentActiveElement,
- currentIndicator,
- isOnTop,
- animOptions,
- moveBy
- }
- }
- previousActiveElement.classList.remove('nav-item--active');
- currentActiveElement.classList.add('nav-item--active')
- } else {
- if (!getRef('main_navbar').classList.contains('hide')) {
- getRef('main_navbar').classList.add('hide-away')
- getRef('main_navbar').animate([
- {
- transform: `none`,
- opacity: 1,
- },
- {
- transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
- opacity: 0,
- },
- ], {
- duration: 200,
- fill: 'forwards',
- easing: 'ease'
- }).onfinish = () => {
- getRef('main_navbar').classList.add('hide')
- }
- getRef('main_header').classList.add('hide')
- }
- }
- document.querySelectorAll('.page').forEach(page => page.classList.add('hide'))
- getRef(pageId).classList.remove('hide')
- getRef(pageId).animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, fill: 'forwards', easing: 'ease' })
}
-
const indicatorObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (!entry.isIntersecting) {
@@ -414,7 +627,7 @@ const indicatorObserver = new IntersectionObserver(entries => {
// class based lazy loading
class LazyLoader {
constructor(container, elementsToRender, renderFn, options = {}) {
- const { batchSize = 10, freshRender } = options
+ const { batchSize = 10, freshRender, bottomFirst = false } = options
this.elementsToRender = elementsToRender
this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
@@ -423,6 +636,7 @@ class LazyLoader {
this.batchSize = batchSize
this.freshRender = freshRender
+ this.bottomFirst = bottomFirst
this.lazyContainer = document.querySelector(container)
@@ -446,7 +660,10 @@ class LazyLoader {
mutationList.forEach(mutation => {
if (mutation.type === 'childList') {
if (mutation.addedNodes.length) {
- this.intersectionObserver.observe(this.lazyContainer.lastElementChild)
+ if (this.bottomFirst)
+ this.intersectionObserver.observe(this.lazyContainer.firstElementChild)
+ else
+ this.intersectionObserver.observe(this.lazyContainer.lastElementChild)
}
}
})
@@ -458,7 +675,6 @@ class LazyLoader {
}
update(elementsToRender) {
this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
- this.render()
}
render(options = {}) {
let { lazyLoad = false } = options
@@ -472,10 +688,21 @@ class LazyLoader {
this.updateStartIndex = 0
this.updateEndIndex = this.arrayOfElements.length > this.batchSize ? this.batchSize : this.arrayOfElements.length
}
- for (let index = this.updateStartIndex; index < this.updateEndIndex; index++) {
- frag.append(this.renderFn(this.arrayOfElements[index]))
+ if (this.bottomFirst) {
+ for (let index = this.updateStartIndex; index < this.updateEndIndex; index++) {
+ frag.prepend(this.renderFn(this.arrayOfElements[index]))
+ }
+ this.lazyContainer.prepend(frag)
+ } else {
+ for (let index = this.updateStartIndex; index < this.updateEndIndex; index++) {
+ frag.append(this.renderFn(this.arrayOfElements[index]))
+ }
+ this.lazyContainer.append(frag)
}
- this.lazyContainer.append(frag)
+ if (!lazyLoad && this.bottomFirst)
+ this.lazyContainer.scrollTo({
+ top: this.lazyContainer.scrollHeight,
+ })
// Callback to be called if elements are updated or rendered for first time
if (!lazyLoad && this.freshRender)
this.freshRender()
@@ -504,4 +731,13 @@ function handleMobileChange(e) {
isMobileView = e.matches
}
mobileQuery.addEventListener('change', handleMobileChange)
-handleMobileChange(mobileQuery)
\ No newline at end of file
+handleMobileChange(mobileQuery)
+
+function showProcessStage(id, index) {
+ [...getRef(id).children].forEach((child, i) => {
+ if (i === index)
+ child.classList.remove('hide')
+ else
+ child.classList.add('hide')
+ })
+}
\ No newline at end of file