From 4afe6dbd6d2e6894f2d12dfcb7cd7e6c983f7517 Mon Sep 17 00:00:00 2001
From: Tiago Vasconcelos <talvasconcelos@gmail.com>
Date: Tue, 18 Feb 2025 16:42:46 +0000
Subject: [PATCH] Change UI for Pay Invoice Dialog (#2979)

---
 lnbits/core/templates/core/wallet.html | 179 +++++++++++++++++++++----
 lnbits/static/js/wallet.js             |  18 ++-
 2 files changed, 173 insertions(+), 24 deletions(-)

diff --git a/lnbits/core/templates/core/wallet.html b/lnbits/core/templates/core/wallet.html
index d7e6c887..649e11fd 100644
--- a/lnbits/core/templates/core/wallet.html
+++ b/lnbits/core/templates/core/wallet.html
@@ -29,19 +29,20 @@
           } : ''"
         >
           <q-card-section style="height: 130px">
-            <div class="row">
+            <div class="row q-gutter-md">
               <div class="col-1" style="max-width: 30px">
                 <q-btn
                   v-if="g.fiatTracking"
                   @click="swapBalancePriority"
                   style="height: 50px"
                   class="q-mt-lg"
+                  color="primary"
                   flat
                   dense
                   icon="swap_vert"
                 ></q-btn>
               </div>
-              <div class="col-11">
+              <div class="col">
                 <div
                   class="column"
                   :class="{
@@ -693,27 +694,159 @@
       <q-dialog v-model="parse.show" @hide="closeParseDialog" position="top">
         <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
           <div v-if="parse.invoice">
-            <h6
-              v-if="'{{LNBITS_DENOMINATION}}' != 'sats'"
-              class="q-my-none"
-              v-text="parseFloat(String(parse.invoice.fsat).replaceAll(',', '')) / 100 + '{{LNBITS_DENOMINATION}}'"
-            ></h6>
-            <h6
-              v-else
-              class="q-my-none"
-              v-text="parse.invoice.fsat + '{{LNBITS_DENOMINATION}}'"
-            ></h6>
-            <q-separator class="q-my-sm"></q-separator>
-            <p class="text-wrap">
-              <strong v-text="$t('memo') + ': '"></strong>
-              <span v-text="parse.invoice.description"></span>
-              <br />
-              <strong v-text="$t('expire_date')"></strong>
-              <span v-text="parse.invoice.expireDate"></span>
-              <br />
-              <strong v-text="$t('hash')"></strong>
-              <span v-text="parse.invoice.hash"></span>
-            </p>
+            <div class="column content-center text-center q-mb-md">
+              <div v-if="!isFiatPriority">
+                <h4
+                  v-if="'{{LNBITS_DENOMINATION}}' != 'sats'"
+                  class="q-my-none text-bold"
+                >
+                  <span
+                    v-text="parseFloat(String(parse.invoice.fsat).replaceAll(',', '')) / 100"
+                  ></span>
+                  <span
+                    class="text-h5"
+                    v-text="'{{LNBITS_DENOMINATION}}'"
+                  ></span>
+                </h4>
+                <h4 v-else class="q-my-none text-bold">
+                  <span v-text="parse.invoice.fsat"></span>
+                  <span
+                    class="text-h5"
+                    v-text="'{{LNBITS_DENOMINATION}}'"
+                  ></span>
+                </h4>
+              </div>
+              <div v-else>
+                <h4
+                  class="q-my-none text-bold"
+                  v-text="parse.invoice.fiatAmount"
+                ></h4>
+              </div>
+              <div class="q-my-md absolute">
+                <q-btn
+                  v-if="g.fiatTracking"
+                  @click="swapBalancePriority"
+                  flat
+                  dense
+                  icon="swap_vert"
+                  color="primary"
+                ></q-btn>
+              </div>
+              <div v-if="!isFiatPriority">
+                <div class="text-h5 text-italic">
+                  <span
+                    v-text="parse.invoice.fiatAmount"
+                    style="opacity: 0.75"
+                  ></span>
+                </div>
+              </div>
+              <div v-else style="opacity: 0.75">
+                <h5
+                  v-if="'{{LNBITS_DENOMINATION}}' != 'sats'"
+                  class="q-my-none text-bold"
+                >
+                  <span
+                    v-text="parseFloat(String(parse.invoice.fsat).replaceAll(',', '')) / 100"
+                  ></span>
+                  <span
+                    class="text-h6"
+                    v-text="'{{LNBITS_DENOMINATION}}'"
+                  ></span>
+                </h5>
+                <h5 v-else class="q-my-none text-bold">
+                  <span v-text="parse.invoice.fsat"></span>
+                  <span
+                    class="text-h6"
+                    v-text="'{{LNBITS_DENOMINATION}}'"
+                  ></span>
+                </h5>
+              </div>
+            </div>
+            <q-separator></q-separator>
+            <h6 class="text-center" v-text="parse.invoice.description"></h6>
+            <q-list separator bordered dense class="q-mb-md">
+              <q-expansion-item expand-separator icon="info" label="Details">
+                <q-list separator>
+                  <q-item>
+                    <q-item-section>
+                      <q-item-label v-text="$t('created')"></q-item-label>
+                      <q-item-label
+                        caption
+                        v-text="parse.invoice.createdDate"
+                      ></q-item-label>
+                    </q-item-section>
+
+                    <q-item-section side top>
+                      <q-item-label
+                        caption
+                        v-text="parse.invoice.createdDateFrom"
+                      ></q-item-label>
+                    </q-item-section>
+                  </q-item>
+                  <q-item>
+                    <q-item-section>
+                      <q-item-label v-text="$t('expire_date')"></q-item-label>
+                      <q-item-label
+                        caption
+                        v-text="parse.invoice.expireDate"
+                      ></q-item-label>
+                    </q-item-section>
+                    <q-item-section side top>
+                      <q-item-label
+                        caption
+                        v-text="parse.invoice.expireDateFrom"
+                      ></q-item-label>
+                    </q-item-section>
+                  </q-item>
+                  <q-item>
+                    <q-item-section>
+                      <q-item-label v-text="$t('payment_hash')"></q-item-label>
+                      <q-item-label
+                        caption
+                        v-text="`${parse.invoice.hash.slice(0, 12)}...${parse.invoice.hash.slice(-12)}`"
+                      ></q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-item-label>
+                        <q-icon
+                          name="content_copy"
+                          @click="copyText(parse.invoice.hash)"
+                          size="1em"
+                          color="grey"
+                          class="cursor-pointer"
+                        />
+                      </q-item-label>
+                      <q-tooltip>
+                        <span v-text="parse.invoice.hash"></span>
+                      </q-tooltip>
+                    </q-item-section>
+                  </q-item>
+                  <q-item>
+                    <q-item-section>
+                      <q-item-label v-text="$t('Invoice')"></q-item-label>
+                      <q-item-label
+                        caption
+                        v-text="`${parse.invoice.bolt11.slice(0, 12)}...${parse.invoice.bolt11.slice(-12)}`"
+                      ></q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-item-label>
+                        <q-icon
+                          name="content_copy"
+                          @click="copyText(parse.invoice.bolt11)"
+                          size="1em"
+                          color="grey"
+                          class="cursor-pointer"
+                        />
+                      </q-item-label>
+                      <q-tooltip>
+                        <span v-text="parse.invoice.bolt11"></span>
+                      </q-tooltip>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-expansion-item>
+            </q-list>
             <div v-if="canPay" class="row q-mt-lg">
               <q-btn
                 unelevated
diff --git a/lnbits/static/js/wallet.js b/lnbits/static/js/wallet.js
index 62ab0fb8..023ac521 100644
--- a/lnbits/static/js/wallet.js
+++ b/lnbits/static/js/wallet.js
@@ -420,7 +420,8 @@ window.WalletPageLogic = {
       let cleanInvoice = {
         msat: invoice.human_readable_part.amount,
         sat: invoice.human_readable_part.amount / 1000,
-        fsat: LNbits.utils.formatSat(invoice.human_readable_part.amount / 1000)
+        fsat: LNbits.utils.formatSat(invoice.human_readable_part.amount / 1000),
+        bolt11: this.parse.data.request
       }
 
       _.each(invoice.data.tags, tag => {
@@ -433,15 +434,30 @@ window.WalletPageLogic = {
             const expireDate = new Date(
               (invoice.data.time_stamp + tag.value) * 1000
             )
+            const createdDate = new Date(invoice.data.time_stamp * 1000)
             cleanInvoice.expireDate = Quasar.date.formatDate(
               expireDate,
               'YYYY-MM-DDTHH:mm:ss.SSSZ'
             )
+            cleanInvoice.createdDate = Quasar.date.formatDate(
+              createdDate,
+              'YYYY-MM-DDTHH:mm:ss.SSSZ'
+            )
+            cleanInvoice.expireDateFrom = moment(expireDate).fromNow()
+            cleanInvoice.createdDateFrom = moment(createdDate).fromNow()
+
             cleanInvoice.expired = false // TODO
           }
         }
       })
 
+      if (this.g.wallet.currency) {
+        cleanInvoice.fiatAmount = LNbits.utils.formatCurrency(
+          ((cleanInvoice.sat / 1e8) * this.g.exchangeRate).toFixed(2),
+          this.g.wallet.currency
+        )
+      }
+
       this.parse.invoice = Object.freeze(cleanInvoice)
     },
     payInvoice() {