Merge pull request #15 from ranchimall/ui-work

Feature update
2022-04-28 02:38:30 +05:30 · 2022-04-28 02:38:30 +05:30 · 16370f00aa
commit 16370f00aa
parent d20c757492 b17d3ca5bc
7 changed files with 129 additions and 8 deletions
--- a/css/main.css
+++ b/css/main.css
@ -762,6 +762,17 @@ ul {
  fill: var(--accent-color);
 }

+#cashier_status {
+  font-size: 0.9rem;
+  padding: 1rem 1.2rem;
+  border-radius: 1rem;
+  background-color: rgba(240, 230, 140, 0.8);
+  color: rgba(0, 0, 0, 0.8);
+}
+#cashier_status .icon {
+  fill: rgba(0, 0, 0, 0.8);
+}
+
 #saved_ids_list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
--- a/css/main.min.css
+++ b/css/main.min.css
--- a/css/main.scss
+++ b/css/main.scss
@ -717,6 +717,16 @@ ul {
    fill: var(--accent-color);
  }
 }
+#cashier_status {
+  font-size: 0.9rem;
+  padding: 1rem 1.2rem;
+  border-radius: 1rem;
+  background-color: rgb(240, 230, 140, 0.8);
+  color: rgba(0, 0, 0, 0.8);
+  .icon {
+    fill: rgba(0, 0, 0, 0.8);
+  }
+}

 #saved_ids_list {
  display: grid;
--- a/index.html
+++ b/index.html
@ -43,6 +43,7 @@
            lastVC: {}
        }
    </script>
+    <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6" defer></script>
 </head>

 <body onload="onLoadStartUp()" class="hide">
@ -349,6 +350,13 @@
                    <h5>Balance</h5>
                    <h1 class="h1" id="rupee_balance"></h1>
                </div>
+                <div id="cashier_status" class="hide flex align-center">
+                    <svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg" height="24px"
+                        viewBox="0 0 24 24" width="24px" fill="#000000">
+                        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
+                    </svg>
+                    <span>Cashier is currently offline. Please check back again after a while.</span>
+                </div>
                <div class="flex">
                    <button class="wallet-action" onclick="showPopup('topup_wallet_popup')">
                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
@ -546,7 +554,10 @@
                autofocus>
            </sm-input>
            <sm-input id="flo_id_title_to_save" placeholder="Title" animate required></sm-input>
-            <button class="button button--primary cta" onclick="saveId()" type="submit">Save</button>
+            <div class="multi-state-button">
+                <button id="save_flo_id_button" class="button button--primary cta" onclick="saveFloId()"
+                    type="submit">Save</button>
+            </div>
        </sm-form>
    </sm-popup>
    <sm-popup id="edit_saved_popup">
@ -599,6 +610,15 @@
            <sm-form>
                <sm-input id="token_transfer__receiver" placeholder="FLO ID" error-text="Invalid FLO ID" data-flo-id
                    animate required autofocus>
+                    <button slot="right" class="icon-only" onclick="showPopup('saved_ids_popup')"
+                        title="Select from saved IDs">
+                        <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 5v14h2V5h-2zm-4 14h2V5h-2v14zM14 5H2c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zM8 7.75c1.24 0 2.25 1.01 2.25 2.25S9.24 12.25 8 12.25 5.75 11.24 5.75 10 6.76 7.75 8 7.75zM12.5 17h-9v-.75c0-1.5 3-2.25 4.5-2.25s4.5.75 4.5 2.25V17z" />
+                        </svg>
+                    </button>
                </sm-input>
                <sm-input id="token_transfer__amount" type="number" placeholder="0" required min="1">
                    <svg slot="icon" class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
@ -620,6 +640,28 @@
            </sm-form>
        </section>
    </sm-popup>
+    <sm-popup id="saved_ids_popup">
+        <header slot="header" class="popup__header">
+            <div class="grid gap-1">
+                <button class="popup__header__close justify-self-start" onclick="hidePopup()">
+                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
+                        fill="#000000">
+                        <path d="M0 0h24v24H0V0z" fill="none" />
+                        <path
+                            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>
+                <sm-input id="search_saved_ids_picker" placeholder="Search"></sm-input>
+            </div>
+        </header>
+        <section class="grid gap-1">
+            <ul id="saved_ids_picker_list" class="observe-empty-state grid gap-0-5 h-100" style="overflow-y: auto;">
+            </ul>
+            <div class="empty-state">
+                <h4>No saved FLO IDs</h4>
+            </div>
+        </section>
+    </sm-popup>
    <sm-popup id="topup_wallet_popup">
        <header slot="header" class="popup__header">
            <button class="popup__header__close justify-self-start" onclick="hidePopup()">
@ -661,7 +703,7 @@
                    <p id="topup_wallet__details"></p>
                </div>
                <sm-copy id="topup_wallet__upi_id" style="font-weight: 700;"></sm-copy>
-                <p>After sending money, please enter the UPI transaction ID of completed transfer.</p>
+                <p>After sending money, please enter the transaction ID of completed transaction.</p>
                <sm-input id="topup_wallet__txid" minlength="12" maxlength="12"
                    error-text="Please enter UPI transaction ID of money you sent to continue."
                    placeholder="UPI transaction ID" autofocus animate required></sm-input>
--- a/scripts/fn_pay.js
+++ b/scripts/fn_pay.js
@ -31,6 +31,13 @@ User.init = function () {
                for (let i in d)
                    cashierStatus[i] = d[i];
                //Add any UI_fn if any
+                if (User.findCashier()) {
+                    getRef('cashier_status').classList.add('hide')
+                    document.querySelectorAll('.wallet-action').forEach(elem => elem.disabled = false);
+                } else {
+                    getRef('cashier_status').classList.remove('hide')
+                    document.querySelectorAll('.wallet-action').forEach(elem => elem.disabled = true);
+                }
            }
        }))
        /*
--- a/scripts/fn_ui.js
+++ b/scripts/fn_ui.js
@ -514,7 +514,20 @@ const render = {
        clone.dataset.upiId = upiId;
        clone.querySelector('.saved-upi__id').textContent = upiId;
        return clone;
-    }
+    },
+    savedIdPickerCard(floID, { title }) {
+        return createElement('li', {
+            className: 'saved-id grid interact',
+            attributes: { 'tabindex': '0', 'data-flo-id': floID },
+            innerHTML: `
+                            <div class="saved-id__initials">${title[0]}</div>
+                            <div class="grid gap-0-5">
+                                <h4 class="saved-id__title">${title}</h4>
+                                <div class="saved-id__flo-id overflow-ellipsis">${floID}</div>
+                            </div>
+                            `
+        })
+    },
 };

 function buttonLoader(id, show) {
@ -562,18 +575,21 @@ userUI.renderSavedIds = async function () {
    })
    getRef('saved_ids_list').append(frag);
 }
-async function saveId() {
+async function saveFloId() {
    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 }
+    buttonLoader('save_flo_id_button', true);
    syncUserData('savedIds', floGlobals.savedIds).then(() => {
        insertElementAlphabetically(title, render.savedId(floID, { title }))
        notify(`Saved ${floID}`, 'success');
        hidePopup();
    }).catch(error => {
        notify(error, 'error');
+    }).finally(() => {
+        buttonLoader('save_flo_id_button', false);
    })
 }
 delegate(getRef('saved_ids_list'), 'click', '.saved-id', e => {
@ -657,6 +673,40 @@ function insertElementAlphabetically(name, elementToInsert) {
    }
 }

+getRef('search_saved_ids_picker').addEventListener('input', debounce(async e => {
+    const frag = document.createDocumentFragment()
+    const searchKey = e.target.value.trim();
+    let allSavedIds = getArrayOfSavedIds();
+    if (searchKey !== '') {
+        const fuse = new Fuse(allSavedIds, { keys: ['floID', 'details.title'] })
+        allSavedIds = fuse.search(searchKey).map(v => v.item)
+    }
+    allSavedIds.forEach(({ floID, details }) => {
+        frag.append(render.savedIdPickerCard(floID, details))
+    })
+    getRef('saved_ids_picker_list').innerHTML = '';
+    getRef('saved_ids_picker_list').append(frag);
+    if (searchKey !== '') {
+        const potentialTarget = getRef('saved_ids_picker_list').firstElementChild
+        if (potentialTarget) {
+            potentialTarget.classList.add('highlight')
+        }
+    }
+}, 100))
+getRef('search_saved_ids_picker').addEventListener('keydown', e => {
+    if (e.key === 'Enter') {
+        const potentialTarget = getRef('saved_ids_picker_list').firstElementChild
+        if (potentialTarget) {
+            potentialTarget.click()
+        }
+    }
+})
+delegate(getRef('saved_ids_picker_list'), 'click', '.saved-id', e => {
+    getRef('token_transfer__receiver').value = e.delegateTarget.dataset.floId
+    getRef('token_transfer__receiver').focusIn()
+    hidePopup()
+})
+
 let currentUserAction;
 function showTokenTransfer(type) {
    getRef('tt_button').textContent = type;
@ -669,8 +719,10 @@ function showTokenTransfer(type) {
    if (pagesData.lastPage === 'contact') {
        getRef('token_transfer__receiver').value = pagesData.params.floId;
        getRef('token_transfer__receiver').readOnly = true;
+        getRef('token_transfer__receiver').querySelector('button').classList.add('hide');
    } else {
        getRef('token_transfer__receiver').readOnly = false;
+        getRef('token_transfer__receiver').querySelector('button').classList.remove('hide');
    }
    showPopup('token_transfer_popup');
    if (pagesData.lastPage === 'contact') {
--- a/scripts/std_ui.js
+++ b/scripts/std_ui.js
@ -92,9 +92,8 @@ document.addEventListener('popupopened', async e => {
    const frag = document.createDocumentFragment()
    switch (e.target.id) {
        case 'saved_ids_popup':
-            const allSavedIds = await getArrayOfSavedIds()
-            allSavedIds.forEach(({ floID, name }) => {
-                frag.append(render.savedIdPickerCard(floID, name))
+            getArrayOfSavedIds().forEach(({ floID, details }) => {
+                frag.append(render.savedIdPickerCard(floID, details))
            })
            getRef('saved_ids_picker_list').innerHTML = ''
            getRef('saved_ids_picker_list').append(frag)