From 39bcbfb03537d25186b582e50ac2e0da6c26203b Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Thu, 30 Mar 2023 12:33:16 +0300
Subject: [PATCH] feat: show total in fiat

---
 .../direct-messages/direct-messages.html      |  4 ++-
 static/components/order-list/order-list.html  | 36 ++++++++++++++++---
 static/components/order-list/order-list.js    | 30 ++++++++++++++--
 static/js/utils.js                            | 10 ++++++
 4 files changed, 72 insertions(+), 8 deletions(-)

diff --git a/static/components/direct-messages/direct-messages.html b/static/components/direct-messages/direct-messages.html
index 5f74b37..ab7eee1 100644
--- a/static/components/direct-messages/direct-messages.html
+++ b/static/components/direct-messages/direct-messages.html
@@ -6,7 +6,9 @@
           <h6 class="text-subtitle1 q-my-none">Messages</h6>
         </div>
         <div class="col-4">
-          <q-badge v-if="unreadMessages" color="green"><span v-text="unreadMessages"></span>&nbsp; new</q-badge>
+          <q-badge v-if="unreadMessages" color="green"
+            ><span v-text="unreadMessages"></span>&nbsp; new</q-badge
+          >
         </div>
         <div class="col-6">
           <q-btn
diff --git a/static/components/order-list/order-list.html b/static/components/order-list/order-list.html
index 231ceec..594b3d7 100644
--- a/static/components/order-list/order-list.html
+++ b/static/components/order-list/order-list.html
@@ -67,8 +67,14 @@
               {{toShortId(props.row.id)}}
               <q-badge v-if="props.row.isNew" color="orange">new</q-badge></q-td
             >
-            <q-td key="total" :props="props"> {{props.row.total}} </q-td>
-            <!-- todo: currency per order -->
+            <q-td key="total" :props="props">
+              {{satBtc(props.row.total)}}
+            </q-td>
+            <q-td key="fiat" :props="props">
+              <span v-if="props.row.extra.currency !== 'sat'">
+                {{orderTotal(props.row)}} {{props.row.extra.currency}}
+              </span>
+            </q-td>
 
             <q-td key="paid" :props="props">
               <q-checkbox
@@ -108,7 +114,9 @@
                   <div class="row items-center no-wrap q-mb-md">
                     <div class="col-1">Quantity</div>
                     <div class="col-1"></div>
-                    <div class="col-10">Name</div>
+                    <div class="col-4">Name</div>
+                    <div class="col-2">Price</div>
+                    <div class="col-4"></div>
                   </div>
                 </div>
                 <div class="col-1"></div>
@@ -122,13 +130,31 @@
                   >
                     <div class="col-1">{{item.quantity}}</div>
                     <div class="col-1">x</div>
-                    <div class="col-10">
-                      {{productOverview(props.row, item.product_id)}}
+                    <div class="col-4">
+                      {{productName(props.row, item.product_id)}}
                     </div>
+                    <div class="col-2">
+                      {{productPrice(props.row, item.product_id)}}
+                    </div>
+                    <div class="col-4"></div>
                   </div>
                 </div>
                 <div class="col-1"></div>
               </div>
+              <div v-if="props.row.extra.currency !== 'sat'" class="row items-center no-wrap q-mb-md q-mt-md">
+                <div class="col-3 q-pr-lg">Exchange Rate:</div>
+                <div class="col-6 col-sm-8 q-pr-lg">
+                  <q-input
+                    filled
+                    dense
+                    readonly
+                    disabled
+                    :value="formatFiat(props.row.extra.btc_price, props.row.extra.currency)"
+                    type="text"
+                  ></q-input>
+                </div>
+                <div class="col-3 col-sm-1"></div>
+              </div>
               <div class="row items-center no-wrap q-mb-md q-mt-md">
                 <div class="col-3 q-pr-lg">Order ID:</div>
                 <div class="col-6 col-sm-8 q-pr-lg">
diff --git a/static/components/order-list/order-list.js b/static/components/order-list/order-list.js
index cc77029..fe64ec5 100644
--- a/static/components/order-list/order-list.js
+++ b/static/components/order-list/order-list.js
@@ -67,6 +67,12 @@ async function orderList(path) {
               label: 'Total',
               field: 'total'
             },
+            {
+              name: 'fiat',
+              align: 'left',
+              label: 'Fiat',
+              field: 'fiat'
+            },
             {
               name: 'paid',
               align: 'left',
@@ -108,13 +114,33 @@ async function orderList(path) {
           'YYYY-MM-DD HH:mm'
         )
       },
-      productOverview: function (order, productId) {
+      satBtc(val, showUnit = true) {
+        return satOrBtc(val, showUnit, true)
+      },
+      formatFiat(value, currency) {
+        return Math.trunc(value) + ' ' + currency
+      },
+      productName: function (order, productId) {
         product = order.extra.products.find(p => p.id === productId)
         if (product) {
-          return `${product.name} (${product.price} ${order.extra.currency})`
+          return product.name
         }
         return ''
       },
+      productPrice: function (order, productId) {
+        product = order.extra.products.find(p => p.id === productId)
+        if (product) {
+          return `${product.price} ${order.extra.currency}`
+        }
+        return ''
+      },
+      orderTotal: function (order) {
+        return order.items.reduce((t, item) => {
+          console.log('### t, o', t, item)
+          product = order.extra.products.find(p => p.id === item.product_id)
+          return t + item.quantity * product.price
+        }, 0)
+      },
       getOrders: async function () {
         try {
           const ordersPath = this.stallId
diff --git a/static/js/utils.js b/static/js/utils.js
index 86c4d00..49a585a 100644
--- a/static/js/utils.js
+++ b/static/js/utils.js
@@ -48,6 +48,16 @@ function isJson(str) {
   }
 }
 
+function satOrBtc(val, showUnit = true, showSats = false) {
+  const value = showSats
+    ? LNbits.utils.formatSat(val)
+    : val == 0
+    ? 0.0
+    : (val / 100000000).toFixed(8)
+  if (!showUnit) return value
+  return showSats ? value + ' sat' : value + ' BTC'
+}
+
 function timeFromNow(time) {
   // Get timestamps
   let unixTime = new Date(time).getTime()