pay now button

4 files changed, 32 insertions, 50 deletions

diff --git a/src/locales/en.json b/src/locales/en.json
index 944af419..30a36a70 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -156,7 +156,7 @@
 	},
 	"user": {
 		"install": "Install app",
-		"moreDetails": "Links and details",
+		"moreDetails": "Profile details",
 		"noMessages": "You have not sent or received any messages yet",
 		"profilePage": "Profile page",
 		"nostrPubkey": "Nostr pubkey",
@@ -181,6 +181,7 @@
 		"this": "This",
 		"lightningAddress": "Lightning address",
 		"dashboard": {
+      "payNow": "Pay now",
 			"checkout": "Checkout",
 			"go": "Go",
 			"dashboard": "Dashboard",
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 89f6bd96..83c46c27 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -117,12 +117,9 @@
         <div class="mt-1">
           {$t("user.moreDetails")}
         </div>
-        <Icon
-          icon="chevron-left"
-          style={`w-6 mr-2 my-auto ${
-            showDetails ? "-rotate-90" : "rotate-180"
-          }`}
-        />
+        <div class:-rotate-90={showDetails} class:rotate-180={!showDetails} class="my-auto">
+          <Icon icon="chevron-left" style="w-6 mr-2" />
+        </div>
       </button>
     </div>
 
@@ -220,25 +217,6 @@
         </a>
       {/if}
 
-      {#if !subject.anon && subject.username !== user?.username && !subject.hidepay}
-        <a
-          href={user
-            ? `/pay/${subject.username}`
-            : `/${subject.username}/receive`}
-          class="contents"
-          id="payButton"
-        >
-          <button
-            class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-60 grow"
-          >
-            <div class="mx-auto flex">
-              <Icon icon="send" style="w-8 mr-2" />
-              <div class="mt-1">{$t("user.pay")}</div>
-            </div>
-          </button>
-        </a>
-      {/if}
-
       {#if user?.admin && user.username !== subject.username}
         <form class="w-full flex" on:submit|preventDefault={reset}>
           <input placeholder="Password reset" bind:value={password} />
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 5878d252..1f7c5417 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -161,16 +161,20 @@
         >
           <div class="mx-auto flex gap-2">
             <Icon icon="save" style="w-8 mx-auto invert" />
-            <div class="my-auto text-xl whitespace-nowrap">{$t("user.install")}</div>
+            <div class="my-auto text-xl whitespace-nowrap">
+              {$t("user.install")}
+            </div>
           </div>
         </button>
       {/if}
     </div>
   {/if}
 
+  {#if items.length}
+    <h2 class="text-2xl font-bold">Select items</h2>
+  {/if}
   <div
-    class="grid sm:grid-cols-2 gap-4"
-    class:pb-20={total > 0}
+    class="grid sm:grid-cols-2 gap-4 pb-20"
     use:dndzone={{ items, flipDurationMs, dropTargetStyle, dragDisabled }}
     on:consider={handleConsider}
     on:finalize={handleFinalize}
@@ -275,9 +279,10 @@
       </button>
     {/each}
   </div>
+  <div class="fixed inset-x-0 mx-autoflex" class:bottom-16={items.length} class:static={!items.length}>
   {#if total > 0}
     <button
-      class="rounded-2xl py-5 px-6 font-bold hover:opacity-80 flex bg-black text-white fixed bottom-16 right-4"
+      class="rounded-2xl py-5 px-6 font-bold hover:bg-neutral-700 flex bg-black text-white mx-auto"
       on:click={checkout}
     >
       <div class="mx-auto flex">
@@ -290,7 +295,19 @@
         </div>
       </div>
     </button>
+  {:else}
+    <a href={`/pay/${subject.username}`} class="contents">
+      <button
+        class="rounded-2xl py-5 px-6 font-bold hover:bg-neutral-700 flex bg-black text-white mx-auto"
+      >
+        <div class="mx-auto flex gap-2">
+            <Icon icon="send" style="w-8 invert" />
+            <div class="my-auto text-2xl">{$t("user.dashboard.payNow")}</div>
+        </div>
+      </button>
+    </a>
   {/if}
+  </div>
 </div>
 
 <style>
@@ -305,4 +322,8 @@
     opacity: 0.5;
     margin: 0;
   }
+
+  .bottom-half {
+    @apply bottom-1/2
+  }
 </style>
diff --git a/src/routes/(app)/[username]/invoice/[id]/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
index d2a54425..c1f55fd0 100644
--- a/src/routes/(app)/[username]/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
@@ -87,7 +87,6 @@
   let subbed;
 
   onMount(async () => {
-    $showQr = $showQr && 1;
     if (browser) {
       last.subscribe((v) => {
         if (!v || subbed) return;
@@ -121,7 +120,7 @@
 </script>
 
 <div class="invoice container mx-auto max-w-xl px-4 space-y-2">
-  {#if $showQr === 1}
+  {#if $showQr}
     <div>
       <a
         href={[types.bitcoin, types.liquid].includes(invoice.type)
@@ -203,7 +202,7 @@
 
     <button
       class="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80"
-      on:click={() => ($showQr = $showQr ? false : 2)}
+      on:click={() => ($showQr = !$showQr)}
     >
       <Icon icon="qr" style="w-8 mr-1 invert my-auto" />
       <div class="my-auto">
@@ -267,23 +266,6 @@
       </div>
     </div>
   {/if}
-
-  {#if $showQr === 2}
-    <div>
-      <a
-        href={[types.bitcoin, types.liquid].includes(invoice.type)
-          ? invoice.text
-          : "lightning:" + invoice.text}
-      >
-        <img
-          {src}
-          class="mx-auto z-10 shadow-inner rounded-2xl"
-          bind:this={qr}
-          alt={txt}
-        />
-      </a>
-    </div>
-  {/if}
 </div>
 
 <style>