From 1140adfef43030e20fd63730ea8bde3f26d7b358 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 21 Feb 2024 21:37:55 -0800
Subject: invoice styles

---
 src/routes/(app)/[username]/(profile)/+page.svelte |  96 +++++++++-------
 .../(app)/[username]/invoice/[id]/+page.svelte     | 126 ++++++++++++++-------
 .../(app)/[username]/items/create/+page.server.js  |   3 -
 3 files changed, 144 insertions(+), 81 deletions(-)

(limited to 'src/routes/(app)')

diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 95dd41a4..2a0f94bb 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { invalidate } from "$app/navigation";
+  import { goto, invalidate } from "$app/navigation";
   import { btc, f, sat, post } from "$lib/utils";
   import { onMount } from "svelte";
   import Icon from "$comp/Icon.svelte";
@@ -11,14 +11,18 @@
   import { fade } from "svelte/transition";
   import { cubicIn } from "svelte/easing";
   import { flip } from "svelte/animate";
-  const flipDurationMs = 200;
-  const dropTargetStyle = {};
 
   export let data;
+
+  let flipDurationMs = 200;
+  let dropTargetStyle = {};
+
   let { subject, user, items, rates } = data;
+  $: ({ currency } = subject);
+  $: rate = rates[currency];
   $: refresh(data);
   let refresh = (d) => ({ items, subject, user, rates } = d);
-  $: dragDisabled = subject?.id !== user?.id
+  $: dragDisabled = subject?.id !== user?.id;
 
   let deleting;
   $: total = items.reduce((a, b) => a + b.price * b.quantity, 0);
@@ -26,9 +30,7 @@
     deleting = item;
   };
 
-  let consider = (e) => {
-    items = e.detail.items;
-  };
+  let consider = (e) => (items = e.detail.items);
 
   let finalize = async (e) => {
     items = e.detail.items;
@@ -37,6 +39,25 @@
       invalidate("app:items");
     }
   };
+
+  let checkout = async () => {
+    let invoice = {
+      type: "lightning",
+      amount: btc(total, rate),
+      currency,
+      items: items.filter((i) => i.quantity > 0),
+      rate,
+    };
+
+    let { id } = await post(`/${subject.username}/invoice`, {
+      invoice,
+      user: { username: subject.username },
+    });
+
+    goto(`/${subject.username}/invoice/${id}?options=true`, {
+      invalidateAll: true,
+    });
+  };
 </script>
 
 {#if deleting}
@@ -46,7 +67,7 @@
 <div class="space-y-5">
   {#if user?.id === subject.id}
     <div class="flex justify-center lg:justify-start">
-      <Balance {user} rate={rates[user.currency]} />
+      <Balance {user} {rate} />
     </div>
 
     {#if !user.balance}
@@ -62,6 +83,7 @@
     >
       <a href={`/send`} class="w-full">
         <button
+          type="button"
           class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-full bg-primary"
         >
           <div class="mx-auto flex">
@@ -103,12 +125,14 @@
 
   <div
     class="grid grid-cols-1 md:grid-cols-2 gap-4"
+    class:pb-20={total > 0}
     use:dndzone={{ items, flipDurationMs, dropTargetStyle, dragDisabled }}
     on:consider={consider}
     on:finalize={finalize}
   >
     {#each items as i (i.id)}
-      <div
+      <button
+        type="button"
         class="w-full text-center cursor-pointer hover:opacity-80"
         on:click={() => i.quantity++}
       >
@@ -132,7 +156,7 @@
           {/if}
           {#if user?.username === subject.username}
             <div class="flex gap-2 justify-center absolute top-2 right-2">
-              <div on:click|stopPropagation={() => {}}>
+              <button type="button" on:click|stopPropagation={() => {}}>
                 <a href={`/${user.username}/items/${i.id}`}>
                   <button
                     class="bg-black rounded-full w-12 h-12 bg-opacity-40 hover:bg-opacity-100"
@@ -140,7 +164,7 @@
                     <Icon icon="edit" style="w-8 mx-auto invert" />
                   </button>
                 </a>
-              </div>
+              </button>
               <button
                 class="bg-black rounded-full w-12 h-12 bg-opacity-40 hover:bg-opacity-100"
                 on:click|stopPropagation={() => del(i)}
@@ -156,20 +180,22 @@
               <div class="text-2xl break-words">{i.name}</div>
               <div class="flex gap-2">
                 <div class="font-semibold">
-                  {f(i.price, subject.currency)}
+                  {f(i.price, currency)}
                 </div>
                 <div class="text-secondary">
-                  {sat(btc(i.price, rates[subject.currency]))}
+                  {sat(btc(i.price, rate))}
                 </div>
               </div>
             </div>
             <div class="flex gap-1 ml-auto mb-auto justify-around tabular-nums">
               {#if i.quantity}
-              <div
-                on:click|stopPropagation={() => i.quantity > 0 && i.quantity--}
-              >
-                <Icon icon="minus" style="w-10 min-w-10" />
-              </div>
+                <button
+                  type="button"
+                  on:click|stopPropagation={() =>
+                    i.quantity > 0 && i.quantity--}
+                >
+                  <Icon icon="minus" style="w-10 min-w-10" />
+                </button>
               {/if}
               <div class="text-2xl my-auto text-center">
                 {#if i.quantity}{i.quantity}{:else}&mdash;{/if}
@@ -177,30 +203,24 @@
             </div>
           </div>
         </div>
-      </div>
+      </button>
     {/each}
   </div>
   {#if total > 0}
-    <div>
-      <a
-        href={`/send/${subject.username}/${total}/${subject.currency}`}
-        class="w-full"
+    <button
+      class="rounded-2xl py-5 px-6 font-bold hover:opacity-80 flex bg-black text-white fixed bottom-16 w-96 right-0"
+      on:click={checkout}
       >
-        <button
-          class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-full bg-black text-white"
-        >
-          <div class="mx-auto flex">
-            <div class="my-auto text-2xl">
-              {$t("user.dashboard.checkout")}
-              {f(total, subject.currency)}
-              <span class="text-base">
-                {sat(btc(total, rates[subject.currency]), subject.currency)}
-              </span>
-            </div>
-          </div>
-        </button>
-      </a>
-    </div>
+      <div class="mx-auto flex">
+        <div class="my-auto text-2xl">
+          {$t("user.dashboard.checkout")}
+          {f(total, currency)}
+          <span class="text-base">
+            {sat(btc(total, rate), currency)}
+          </span>
+        </div>
+      </div>
+    </button>
   {/if}
 </div>
 
diff --git a/src/routes/(app)/[username]/invoice/[id]/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
index cd67744f..3451cf58 100644
--- a/src/routes/(app)/[username]/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
@@ -2,6 +2,7 @@
   import { enhance } from "$app/forms";
   import { send } from "$lib/socket";
   import {
+    btc,
     post,
     back,
     copy,
@@ -15,7 +16,7 @@
   } from "$lib/utils";
   import { tick, onMount, onDestroy } from "svelte";
   import { browser } from "$app/environment";
-  import { last } from "$lib/store";
+  import { last, showQr } from "$lib/store";
   import Avatar from "$comp/Avatar.svelte";
   import Icon from "$comp/Icon.svelte";
   import Heart from "$comp/Heart.svelte";
@@ -26,6 +27,7 @@
   export let data;
 
   let ndef;
+  let showOptions;
 
   let reading = async ({ message, serialNumber }) => {
     let name = serialNumber.replace(/:/g, "-");
@@ -49,7 +51,6 @@
     user: { username, currency },
   } = invoice;
 
-  let showQr = true;
 
   let qr;
   let tipPercent = 0;
@@ -92,6 +93,7 @@
   let subbed;
 
   onMount(async () => {
+    $showQr = $showQr && 1
     if (browser) {
       last.subscribe((v) => {
         if (!v || subbed) return;
@@ -125,7 +127,7 @@
 </script>
 
 <div class="invoice container mx-auto max-w-xl px-4 space-y-2">
-  {#if showQr}
+  {#if $showQr === 1}
     <div>
       <a
         href={[types.bitcoin, types.liquid].includes(invoice.type)
@@ -142,6 +144,20 @@
     </div>
   {/if}
 
+  {#each invoice.items as i}
+    <div class="flex tabular-nums">
+      <div class="mr-auto"><span class="mr-2">{i.quantity}</span> {i.name}</div>
+      <div class="flex gap-2">
+        <div class="font-semibold">
+          {f(i.price * i.quantity, currency)}
+        </div>
+        <div class="text-secondary">
+          {sat(btc(i.price * i.quantity, rate))}
+        </div>
+      </div>
+    </div>
+  {/each}
+
   {#if amount > 0}
     <div class="text-center font-bold text-2xl">
       <div>
@@ -167,9 +183,55 @@
     </div>
   {/if}
 
-  <div class="flex justify-center text-secondary">
+
+  <button
+    type="button"
+    class="flex gap-2 text-center break-all text-lg rounded-2xl hover:opacity-80 p-4 w-full mx-auto justify-center border bg-black text-white text-xl"
+    on:click={() => copy(txt)}
+  >
+    <Icon icon="copy" style="w-8 my-auto invert" />
+    <div class="my-auto font-bold">
+      {txt.substr(0, 11)}..{txt.substr(-11)}
+    </div>
+  </button>
+
+  <div class="w-full flex justify-center gap-2 flex-wrap text-secondary">
+    <a href={link} class="w-full">
+      <button
+        class="w-full flex justify-center rounded-2xl border py-3 px-5 hover:opacity-80 text-lg"
+      >
+        <Icon icon="mobile" style="mr-1 w-8" />
+        <div class="my-auto">{$t("payments.openLink")}</div>
+      </button>
+    </a>
+
+    <button
+      class="w-full flex justify-center rounded-2xl border py-3 px-5 hover:opacity-80 text-lg"
+      on:click={() => ($showQr = $showQr ? false : 2)}
+    >
+      <Icon icon="qr" style="w-8 mr-1 invert my-auto" />
+      <div class="my-auto">
+        {$showQr ? $t("payments.hide") : $t("payments.show")}
+        {$t("payments.qr")}
+      </div></button
+    >
+
+    <!-- <button -->
+    <!--   class="w-full flex justify-center rounded-2xl border py-3 px-5 hover:opacity-80 text-lg" -->
+    <!--   on:click={() => (showOptions = !showOptions)} -->
+    <!-- > -->
+    <!--   <Icon icon="settings" style="w-8 mr-1 my-auto" /> -->
+    <!--   <div class="my-auto"> -->
+    <!--     {showOptions ? $t("payments.hide") : $t("payments.show")} -->
+    <!--     {$t("payments.options")} -->
+    <!--   </div></button -->
+    <!-- > -->
+  </div>
+
+
+  <div class="flex justify-around text-secondary">
     <button
-      class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 rounded-full"
+      class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 w-full justify-center"
       class:bg-primary={type === types.bitcoin}
       class:text-black={type === types.bitcoin}
       on:click={() => setType(types.bitcoin)}
@@ -179,7 +241,7 @@
     </button>
 
     <button
-      class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 rounded-full"
+      class="hover:bg-primary my-auto flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 w-full justify-center"
       class:bg-primary={type === types.liquid}
       class:text-black={type === types.liquid}
       on:click={() => setType(types.liquid)}
@@ -189,7 +251,7 @@
     </button>
 
     <button
-      class="hover:bg-primary flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 rounded-full"
+      class="hover:bg-primary flex gap-1 sm:gap-2 py-3 px-2 sm:px-5 w-full justify-center"
       class:bg-primary={type === types.lightning}
       class:text-black={type === types.lightning}
       on:click={() => setType(types.lightning)}
@@ -204,45 +266,29 @@
   {#if type === types.liquid}
     <div class="flex justify-center">
       <div class="my-auto text-xl text-center text-secondary">
-        {$t("payments.onlyLbtc")} <span class="text-teal-500 font-bold">L-BTC</span>,
+        {$t("payments.onlyLbtc")}
+        <span class="text-teal-500 font-bold">L-BTC</span>,
         {$t("payments.dontDeposit")}
       </div>
     </div>
   {/if}
 
-  <button
-    type="button"
-    class="flex gap-2 text-center break-all text-lg rounded-full hover:opacity-80 p-4 w-full mx-auto justify-center border text-black text-xl"
-    on:click={() => copy(txt)}
-  >
-    <Icon icon="copy" style="w-8 my-auto font-semibold" />
-    <div class="my-auto">
-      {txt.substr(0, 11)}..{txt.substr(-11)}
-    </div>
-  </button>
-
-
-  <div class="w-full flex justify-center gap-2 flex-wrap text-secondary">
-    <a href={link} class="w-full">
-      <button
-        class="w-full flex justify-center rounded-full border py-3 px-5 hover:opacity-80 text-lg"
+  {#if $showQr === 2}
+    <div>
+      <a
+        href={[types.bitcoin, types.liquid].includes(invoice.type)
+          ? invoice.text
+          : "lightning:" + invoice.text}
       >
-        <Icon icon="mobile" style="mr-1 w-6" />
-        <div>{$t("payments.openLink")}</div>
-      </button>
-    </a>
-
-    <button
-      class="w-full flex justify-center rounded-full border py-3 px-5 hover:opacity-80 text-lg"
-      on:click={() => (showQr = !showQr)}
-    >
-      <Icon icon="qr" style="mr-1 invert" />
-      <div>
-        {showQr ? $t("payments.hide") : $t("payments.show")}
-        {$t("payments.qr")}
-      </div></button
-    >
-  </div>
+        <img
+          {src}
+          class="mx-auto z-10 shadow-inner rounded-2xl"
+          bind:this={qr}
+          alt={txt}
+        />
+      </a>
+    </div>
+  {/if}
 </div>
 
 <style>
diff --git a/src/routes/(app)/[username]/items/create/+page.server.js b/src/routes/(app)/[username]/items/create/+page.server.js
index 6740f5f9..8cb48399 100644
--- a/src/routes/(app)/[username]/items/create/+page.server.js
+++ b/src/routes/(app)/[username]/items/create/+page.server.js
@@ -6,10 +6,7 @@ export const actions = {
     let form = await fd(request);
     try {
       await post("/items", form, auth(cookies));
-
-      console.log("YEAH");
     } catch (e) {
-      console.log("E", e)
       return fail(400, { message: e.message });
     }
 
-- 
cgit v1.2.3