added cashier UPI ID in settings page

css/main.css

@@ -103,23 +103,21 @@ button:not(:disabled) {
 .button {
   background-color: rgba(var(--text-color), 0.06);
 }
-
+.button--primary, .button--danger {
-.button--primary,
-.button--danger {
   color: rgba(var(--background-color), 1);
 }
-.button--primary .icon,
+.button--primary .icon, .button--danger .icon {
-.button--danger .icon {
   fill: rgba(var(--background-color), 1);
 }
-
 .button--primary {
   background-color: var(--accent-color);
 }
-
 .button--danger {
   background-color: var(--danger-color);
 }
+.button--small {
+  padding: 0.4rem 0.6rem;
+}
 
 .cta {
   text-transform: uppercase;
@@ -569,8 +567,19 @@ ul {
   font-weight: 500;
   color: rgba(var(--text-color), 0.8);
 }
-#sign_up .warning {
+
-  margin-top: 2rem;
+#flo_id_warning {
+  padding-bottom: 1.5rem;
+  border-bottom: thin solid rgba(var(--text-color), 0.3);
+}
+#flo_id_warning .icon {
+  height: 4rem;
+  width: 4rem;
+  padding: 1rem;
+  background-color: #ffc107;
+  border-radius: 3rem;
+  fill: rgba(0, 0, 0, 0.8);
+  margin-bottom: 1.5rem;
 }
 
 #main_header {

css/main.scss

@@ -95,19 +95,22 @@ button {
 }
 .button {
   background-color: rgba(var(--text-color), 0.06);
-}
+  &--primary,
-.button--primary,
+  &--danger {
-.button--danger {
+    color: rgba(var(--background-color), 1);
-  color: rgba(var(--background-color), 1);
+    .icon {
-  .icon {
+      fill: rgba(var(--background-color), 1);
-    fill: rgba(var(--background-color), 1);
+    }
+  }
+  &--primary {
+    background-color: var(--accent-color);
+  }
+  &--danger {
+    background-color: var(--danger-color);
+  }
+  &--small {
+    padding: 0.4rem 0.6rem;
   }
-}
-.button--primary {
-  background-color: var(--accent-color);
-}
-.button--danger {
-  background-color: var(--danger-color);
 }
 .cta {
   text-transform: uppercase;
@@ -527,8 +530,18 @@ ul {
     font-weight: 500;
     color: rgba(var(--text-color), 0.8);
   }
-  .warning {
+}
-    margin-top: 2rem;
+#flo_id_warning {
+  padding-bottom: 1.5rem;
+  border-bottom: thin solid rgba(var(--text-color), 0.3);
+  .icon {
+    height: 4rem;
+    width: 4rem;
+    padding: 1rem;
+    background-color: #ffc107;
+    border-radius: 3rem;
+    fill: rgba(0, 0, 0, 0.8);
+    margin-bottom: 1.5rem;
   }
 }
 #main_header {

index.html

@@ -112,8 +112,16 @@
         </article>
         <article id="sign_up" class="inner-page page-layout hide">
             <section class="grid">
-                <h1 class="h2">FLO credentials</h1>
+                <div id="flo_id_warning" class="grid justify-center gap-0-5">
-                <p>Get your FLO credentials to use RanchiMall Pay and all RanchiMall FLO apps. </p>
+                    <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="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
+                    </svg>
+                    <h3>Keep your keys safe!</h3>
+                    <strong>Don't share with anyone. Once lost private key can't be
+                        recovered.</strong>
+                </div>
                 <div class="grid gap-1-5 card">
                     <div class="grid gap-0-5">
                         <h5>FLO ID</h5>
@@ -125,10 +133,8 @@
                     </div>
                 </div>
                 <sm-button id="sign_up_button" variant="primary">Sign in with these credentials</sm-button>
-                <strong class="warning">
+                <p style="margin-top: 2rem;">You can use these FLO credentials with RanchiMall Pay other RanchiMall apps
-                    Keep your private key secure and don't share with anyone.
+                    too. </p>
-                    Once lost there is no way to recover private key.
-                </strong>
             </section>
         </article>
         <div id="loading" class="inner-page flex align-center justify-center">
@@ -797,7 +803,7 @@
                     </div>
                     <sm-button class="danger justify-self-start" onclick="signOut()">Sign out</sm-button>
                 </div>
-                <div class="grid gap-1">
+                <div class="grid gap-1 user-element">
                     <h4>My UPI IDs</h4>
                     <ul id="saved_upi_ids_list" class="observe-empty-state"></ul>
                     <div class="empty-state">
@@ -812,16 +818,15 @@
                         Add UPI ID
                     </button>
                 </div>
-            </section>
+                <div class="admin-element grid gap-1">
-            <section class="admin-element grid gap-1">
+                    <div class="grid gap-0-5">
-                <h4>Change UPI ID</h4>
+                        <h5>My UPI ID</h5>
-                <sm-form style="width: min(100%,24rem);">
+                        <sm-copy id="my_upi_id"></sm-copy>
-                    <sm-input id="upi_id" placeholder="UPI ID" pattern="[a-zA-Z0-9_]{3,}@[a-zA-Z]{3,}"
+                    </div>
-                        error-text="Invalid UPI ID" animate required></sm-input>
+                    <button class="button button--small justify-self-start"
-                    <button class="button button--primary cta justify-self-start" type="submit" onclick="changeUpi()">
+                        onclick="showPopup('change_cashier_upi_popup')">Change
-                        Change
+                        UPI</button>
-                    </button>
+                </div>
-                </sm-form>
             </section>
         </section>
         <nav id="main_navbar" class="hide">
@@ -1094,16 +1099,16 @@
                     <p>
                         <b>Select UPI ID to receive money</b>
                     </p>
-                    <sm-select id="select_upi_id"></sm-select>
+                    <sm-select id="select_upi_id" style="z-index: 2;"></sm-select>
+                    <button class="button button--small justify-self-start" onclick="showPopup('save_upi_popup')">
+                        <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="M0 0h24v24H0V0z" fill="none" />
+                            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+                        </svg>
+                        Add UPI ID
+                    </button>
                 </div>
-                <button class="button" onclick="showPopup('save_upi_popup')">
-                    <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="M0 0h24v24H0V0z" fill="none" />
-                        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-                    </svg>
-                    Add UPI ID
-                </button>
                 <div class="multi-state-button">
                     <button id="withdraw_rupee_button" class="button button--primary cta"
                         onclick="withdrawMoneyFromWallet()" type="submit">Transfer</button>
@@ -1148,6 +1153,26 @@
             <button class="button button--primary cta" onclick="saveUpiId()" type="submit">Save</button>
         </sm-form>
     </sm-popup>
+    <sm-popup id="change_cashier_upi_popup">
+        <header slot="header" class="popup__header">
+            <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>
+            <h4>Change UPI ID</h4>
+        </header>
+        <sm-form>
+            <sm-input id="upi_id" placeholder="UPI ID" pattern="[a-zA-Z0-9_]{3,}@[a-zA-Z]{3,}"
+                error-text="Invalid UPI ID" autofocus animate required></sm-input>
+            <button class="button button--primary cta justify-self-start" type="submit" onclick="changeUpi()">
+                Change
+            </button>
+        </sm-form>
+    </sm-popup>
 
     <!-- templates -->
     <template id="saved_id_template">
@@ -1289,6 +1314,8 @@
                         console.log(result);
                         document.querySelectorAll('.admin-element').forEach(elem => elem.classList.remove('hide'))
                         document.querySelectorAll('.user-element').forEach(elem => elem.classList.add('hide'))
+                        if (cashierUPI[myFloID])
+                            getRef('my_upi_id').value = cashierUPI[myFloID];
                         showPage(window.location.hash, { firstLoad: true })
                     }).catch(error => console.error(error))
                 } else {

scripts/components.js

@@ -2555,7 +2555,7 @@ smSelect.innerHTML = `
             flex-direction: column;
     min-width: var(--min-width);
     max-height: var(--max-height, auto);
-    background: rgba(var(--background-color,(255,255,255)), 1);
+    background: rgba(var(--foreground-color,(255,255,255)), 1);
     border: solid 1px rgba(var(--text-color,(17,17,17)), 0.2);
     border-radius: var(--border-radius, 0.5rem);
     z-index: 1;

scripts/fn_pay.js

@@ -169,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))