revamp payment totals

8 files changed, 81 insertions, 41 deletions

diff --git a/src/lib/handler.js b/src/lib/handler.js
new file mode 100644
index 00000000..05e484ec
--- /dev/null
+++ b/src/lib/handler.js
@@ -0,0 +1,14 @@
+import { goto } from "$app/navigation";
+import { applyAction } from "$app/forms";
+
+export default (submitting) =>
+  ({ formElement, formData, action, cancel }) => {
+    submitting = true;
+    return async ({ result }) => {
+      if (result.type === "redirect") {
+        goto(result.location);
+      } else {
+        await applyAction(result);
+      }
+    };
+  };
diff --git a/src/locales/en.json b/src/locales/en.json
index 2ce485ff..01d5ebfc 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -293,6 +293,9 @@
 		}
 	},
 	"payments": {
+    "income": "Income",
+    "subtotal": "Subtotal",
+    "expenditure": "Expenditure",
     "spent": "Already spent",
     "mint": "Mint",
     "ecash": "Ecash",
diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.server.js b/src/routes/(app)/[username]/payments/[...page]/+page.server.js
index 7a3bc179..de692a86 100644
--- a/src/routes/(app)/[username]/payments/[...page]/+page.server.js
+++ b/src/routes/(app)/[username]/payments/[...page]/+page.server.js
@@ -19,8 +19,8 @@ export async function load({ cookies, depends, params, request }) {
   let url = `/payments?start=${start * 1000}&limit=${limit}&offset=${offset}`;
   if (end) url += `&end=${end * 1000}`;
 
-  let { count, payments, totals } = await get(url, auth(cookies));
+  let { count, payments, incoming, outgoing } = await get(url, auth(cookies));
   let pages = new Array(Math.ceil(count / limit));
 
-  return { payments, page, pages, start, end, totals };
+  return { payments, page, pages, start, end, incoming, outgoing};
 }
diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
index 9f8dd5df..647907e3 100644
--- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
@@ -51,9 +51,11 @@
     : 0;
 
   let p,
-    totals,
+    incoming,
+    outgoing,
     pages = [];
-  $: data && ({ page: p, pages, start, end, totals, payments } = data);
+  $: data &&
+    ({ page: p, pages, start, end, incoming, outgoing, payments } = data);
 
   $: $page && ($newPayment = false);
   $: $newPayment && invalidate(`/users/${user.username}`);
@@ -165,8 +167,8 @@
     <div class="text-base">
       {#each payments as p}
         <a href={`/payment/${p.id}`}>
-          <div class="grid grid-cols-3 border-b h-24 hover:bg-gray-100 px-4">
-            <div class="whitespace-nowrap my-auto">
+          <div class="grid grid-cols-12 border-b h-24 hover:bg-gray-100 px-4">
+            <div class="whitespace-nowrap my-auto col-span-3">
               <div class="font-bold" class:text-red-800={p.amount < 0}>
                 {f(Math.abs(p.amount) * (p.rate / sats), p.currency)}
                 {#if p.tip}
@@ -181,7 +183,9 @@
               </div>
             </div>
 
-            <div class="flex my-auto">
+            <div
+              class="flex my-auto col-span-5 truncate text-ellipsis overflow-hidden mx-auto"
+            >
               {#if p.type === types.pot}
                 <a href={`/pot/${p.memo}`}>
                   <div class="text-secondary flex">
@@ -195,9 +199,9 @@
               {:else if p.with}
                 <div class="flex">
                   <div class="my-auto">
-                    <Avatar user={p.with} size={16} disabled={true} />
+                    <Avatar user={p.with} size={12} disabled={true} />
                   </div>
-                  <div class="my-auto ml-1 text-secondary break-all">
+                  <div class="my-auto ml-1 text-secondary">
                     {p.with.username}
                   </div>
                 </div>
@@ -234,12 +238,12 @@
               {/if}
             </div>
 
-            <div class="text-secondary text-right text-sm my-auto">
+            <div class="text-secondary text-right text-sm my-auto col-span-3">
               <div>
                 {format(new Date(p.created), "h:mm aaa")}
               </div>
               <div>
-                {format(new Date(p.created), "MMM d, yyyy")}
+                {format(new Date(p.created), "MMM d, yy")}
               </div>
             </div>
           </div>
@@ -249,29 +253,40 @@
       {/each}
     </div>
 
-    <div class="grid grid-cols-3 w-full text-center">
-      <span class="text-lg text-secondary">{$t("payments.total")}</span>
-      <span class="text-lg text-secondary">
-        {#if payments.some((p) => p.tip > 0)}
-          {$t("payments.tips")}
-        {/if}
-      </span>
-      <span></span>
-
-      {#each Object.keys(totals) as c}
-        {@const total = totals[c]["fiat"]}
-        {@const tips = totals[c]["fiatTips"]}
-        {@const pv = (totals[c]["sats"] * rates[c]) / sats}
-        {@const gain = (pv * 100) / total - 100}
-        <span class="text-lg"><b>{f(total, c)}</b></span>
-        <span class="text-lg">
-          
-        {#if payments.some((p) => p.tip > 0)}
-          <b>{f(tips, c)}</b>
-        {/if}
-      <span></span>
-        
+    <div class="grid grid-cols-3 w-full text-center text-lg">
+      {#each Object.keys(incoming) as c}
+        <span class="text-base text-secondary text-left"></span>
+        <!-- <span class="text-base text-secondary" -->
+        <!--   >{$t("payments.subtotal")}</span -->
+        <!-- > -->
+        <span class="text-base text-secondary">
+          {#if tipsIn || tipsOut}{$t("payments.tips")}{/if}
         </span>
+        <span class="text-base text-secondary"
+          >{$t("payments.total")}</span
+        >
+
+        {@const totalIn = incoming[c]?.fiat || 0}
+        {@const tipsIn = incoming[c]?.fiatTips || 0}
+        {@const subtotalIn = totalIn - tipsIn}
+
+        {@const totalOut = -outgoing[c]?.fiat || 0}
+        {@const tipsOut = outgoing[c]?.fiatTips || 0}
+        {@const subtotalOut = totalOut - tipsOut}
+
+        <span class="text-left text-base text-secondary"
+          >{$t("payments.income")}</span
+        >
+        <!-- <span><b>{subtotalIn ? f(subtotalIn, c) : "-"}</b></span> -->
+        <span><b>{tipsIn ? f(tipsIn, c) : "-"}</b></span>
+        <span><b>{totalIn ? f(totalIn, c) : "-"}</b></span>
+
+        <span class="text-left text-base text-secondary"
+          >{$t("payments.expenditure")}</span
+        >
+        <!-- <span><b>{subtotalOut ? f(subtotalOut, c) : "-"}</b></span> -->
+        <span><b>{tipsOut ? f(tipsOut, c) : "-"}</b></span>
+        <span><b>{totalOut ? f(totalOut, c) : "-"}</b></span>
       {/each}
     </div>
 
diff --git a/src/routes/(app)/send/ecash/+page.server.js b/src/routes/(app)/send/ecash/+page.server.js
index 422e5a30..ed002ace 100644
--- a/src/routes/(app)/send/ecash/+page.server.js
+++ b/src/routes/(app)/send/ecash/+page.server.js
@@ -1,15 +1,17 @@
-import { fail, redirect } from "@sveltejs/kit";
+import { error, redirect } from "@sveltejs/kit";
 import { auth, post, fd } from "$lib/utils";
+import { v4 } from "uuid";
 
 export const actions = {
   default: async ({ cookies, request }) => {
     let id;
-    try {
       let body = await fd(request);
+
+    try {
       ({ id } = await post("/mint", body, auth(cookies)));
     } catch (e) {
       console.log("problem creating ecash", e);
-      return fail(400, { message: e.message });
+      error(400, { message: e.message });
     }
 
     redirect(307, `/ecash/${id}`);
diff --git a/src/routes/(app)/send/ecash/+page.svelte b/src/routes/(app)/send/ecash/+page.svelte
index 869e9732..983e9a44 100644
--- a/src/routes/(app)/send/ecash/+page.svelte
+++ b/src/routes/(app)/send/ecash/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { enhance } from "$app/forms";
+  import { enhance, applyAction } from "$app/forms";
   import { t } from "$lib/translations";
   import Icon from "$comp/Icon.svelte";
   import Numpad from "$comp/Numpad.svelte";
@@ -7,6 +7,7 @@
   import { page } from "$app/stores";
   import { rate } from "$lib/store";
   import { fail, s } from "$lib/utils";
+  import handler from "$lib/handler";
 
   export let data;
 
@@ -37,7 +38,7 @@
     {$t("payments.createEcash")}
   </h1>
 
-  <form use:enhance method="POST" on:submit={() => (submitting = true)}>
+  <form use:enhance={handler(submitting)} method="POST">
     <Numpad bind:amount bind:fiat {currency} {submit} bind:rate={$rate} />
     <input type="hidden" name="amount" bind:value={amount} />
 
diff --git a/src/routes/(app)/send/invoice/[id]/+page.svelte b/src/routes/(app)/send/invoice/[id]/+page.svelte
index de08ac54..bc62b5f5 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/send/invoice/[id]/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+  import handler from "$lib/handler";
   import { onDestroy, onMount } from "svelte";
   import { t } from "$lib/translations";
   import { goto, invalidateAll } from "$app/navigation";
@@ -48,7 +49,6 @@
   };
 
   let submitting;
-  let submit = () => (submitting = true);
 
   let external = async () => {
     let { id } = await post(`/${recipient.username}/invoice`, {
@@ -168,7 +168,7 @@
     />
   {/if}
 
-  <form method="POST" use:enhance on:submit={submit}>
+  <form method="POST" use:enhance={handler(submitting)}>
     <input name="address" value={address} type="hidden" />
     <input name="amount" value={amount} type="hidden" />
     <input name="payreq" value={payreq} type="hidden" />
diff --git a/src/routes/(app)/voucher/[...token]/+page.server.js b/src/routes/(app)/voucher/[...token]/+page.server.js
index f9c99ad9..cb04224e 100644
--- a/src/routes/(app)/voucher/[...token]/+page.server.js
+++ b/src/routes/(app)/voucher/[...token]/+page.server.js
@@ -11,7 +11,8 @@ export async function load({ cookies, params, parent, request, url }) {
   if (!user) redirect(307, `/register?redirect=${url.pathname}`);
 
   let { token } = params;
-  if (token && !token.startsWith("cashu")) ({ token } = await get(`/cash/${token}`));
+  if (token && !token.startsWith("cashu"))
+    ({ token } = await get(`/cash/${token}`));
   await parse(token, url.host, cookies);
 
   if (token) error(409, "Token could not be redeemed. Was it already spent?");
@@ -21,6 +22,10 @@ export const actions = {
   default: async ({ cookies, request, url }) => {
     const form = await request.formData();
     let t = form.get("text");
+    if (t.startsWith("cashu")) {
+      let { id } = await post("/cash", { token: t }, auth);
+      redirect(307, `/ecash/${id}`);
+    }
     let msg = await parse(t, url.host, cookies);
     return fail(400, { error: msg || "default" });
   },