From 43746ec449900915ef098887334241cf59d8081f Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Tue, 10 Sep 2024 20:39:47 -0700
Subject: move routes

---
 src/components/Account.svelte       |  9 +++----
 src/components/AppHeader.svelte     | 25 ++++++++----------
 src/components/Invoice.svelte       |  2 +-
 src/components/Items.svelte         | 51 ++++++++++++++++++++++++++++++++-----
 src/components/LandingHeader.svelte |  6 ++---
 src/components/LocationsMap.svelte  | 12 +++++++--
 src/components/Request.svelte       |  2 +-
 7 files changed, 73 insertions(+), 34 deletions(-)

(limited to 'src/components')

diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index a9b3d6ba..eb1b0bac 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -5,10 +5,10 @@
 
   export let user, rate, account;
   let { seed, balance, id } = account;
-  $: type = seed ? "Savings":"Cash";
+  $: type = seed ? "Savings" : "Cash";
 </script>
 
-<a href={`/${user.username}/${id}/payments`.replace(/undefined\//, "")}>
+<a href={`/payments`} class="block">
   <div class="border rounded-xl shadow p-4 space-y-5">
     <div class="flex justify-center lg:justify-start">
       <Balance {balance} {user} {rate} />
@@ -30,10 +30,7 @@
         </button>
       </a>
 
-      <a
-        href={`/${user.username}/${id}/receive`.replace(/undefined\//, "")}
-        class="contents"
-      >
+      <a href={`/invoice`} class="contents">
         <button
           class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-primary grow"
         >
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 3b0303a8..b777e0b5 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -7,11 +7,7 @@
   import { loading, t } from "$lib/translations";
   import { page } from "$app/stores";
 
-  export let data;
-
-  let { subject, user } = data;
-  $: update(data);
-  let update = (data) => ({ subject, user } = data);
+  export let user, subject;
 
   let menuButtons;
   $: if (user)
@@ -19,14 +15,14 @@
       {
         key: "nav.settings",
         icon: "settings",
-        href: `/${user.username}/settings`,
+        href: `/settings`,
       },
       { key: "nav.support", icon: "support", href: `/support` },
-      { key: "nav.map", icon: "map", href: `/${user.username}/map` },
+      { key: "nav.map", icon: "map", href: `/map` },
       {
         key: "nav.messages",
         icon: "message",
-        href: `/${user.username}/messages`,
+        href: `/messages`,
       },
       { key: "nav.merch", icon: "shop", href: `https://coinosmerch.com` },
       { key: "nav.signOut", icon: "logout", href: `/logout` },
@@ -60,19 +56,19 @@
             ><Icon icon="home" style="mx-auto w-6 sm:w-8" />
           </button>
         </a>
-        <a href={`/${user.username}/receive`}>
+        <a href={`/invoice`}>
           <button
             class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page
-              .url.pathname === `/${user.username}/receive`
+              .url.pathname.includes('invoice')
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
             ><Icon icon="receive" style="mx-auto w-6 sm:w-8" />
           </button>
         </a>
-        <a href={`/${user.username}/payments`}>
+        <a href={`/payments`}>
           <button
             class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page
-              .url.pathname === `/${user.username}/payments`
+              .url.pathname === `/payments`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'} relative"
             ><Icon icon="clock" style="mx-auto w-6 sm:w-8" />
@@ -102,9 +98,8 @@
         <div class="relative">
           <OutClick on:outclick={() => (showMenu = false)}>
             <button
-              class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page
-                .url.pathname === `/${user.username}` ||
-              $page.url.pathname === `/${user.username}/settings` ||
+              class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {
+              $page.url.pathname === `/settings` ||
               $page.url.pathname === `/support`
                 ? 'opacity-100'
                 : `opacity-70 hover:opacity-80 ${
diff --git a/src/components/Invoice.svelte b/src/components/Invoice.svelte
index ba436649..563a2fee 100644
--- a/src/components/Invoice.svelte
+++ b/src/components/Invoice.svelte
@@ -27,7 +27,7 @@
         </div>
       </div>
       <div class="mx-auto my-auto flex gap-2">
-        <a href={`/${invoice.user.username}/invoice/${$invoice.id}/tip`}>
+        <a href={`/invoice/${$invoice.id}/tip`}>
           <button
             class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-32"
           >
diff --git a/src/components/Items.svelte b/src/components/Items.svelte
index f449215c..f991e114 100644
--- a/src/components/Items.svelte
+++ b/src/components/Items.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { t } from "$lib/translations";
   import { btc, f, sat, post } from "$lib/utils";
   import { browser } from "$app/environment";
   import { goto, invalidate } from "$app/navigation";
@@ -14,7 +15,7 @@
   import DeleteItem from "$comp/DeleteItem.svelte";
   import Icon from "$comp/Icon.svelte";
 
-  export let subject, user, items, total, rate, currency;
+  export let subject, user, items, rate, currency;
 
   let flipDurationMs = 200;
   let dropTargetStyle = {};
@@ -27,6 +28,8 @@
     deleting = item;
   };
 
+  $: total = items.reduce((a, b) => a + b.price * b.quantity, 0);
+
   function handleConsider(e) {
     const {
       items: newItems,
@@ -77,15 +80,15 @@
       rate,
     };
 
-    let { id } = await post(`/${subject.username}/invoice`, {
+    let { id } = await post(`/invoice`, {
       invoice,
       user: { username: subject.username },
     });
 
     if (invoice.memoPrompt) {
-      return goto(`/${subject.username}/invoice/${id}/memo`);
+      return goto(`/invoice/${id}/memo`);
     }
-    goto(`/${subject.username}/invoice/${id}`);
+    goto(`/invoice/${id}`);
   };
 
   let reset = () =>
@@ -135,7 +138,7 @@
         {#if user?.username === subject.username}
           <div class="flex gap-2 justify-center absolute top-2 right-2">
             <button type="button" on:click|stopPropagation={() => {}}>
-              <a href={`/${user.username}/items/${i.id}`}>
+              <a href={`/items/${i.id}`}>
                 <button
                   class="bg-black rounded-full w-12 h-12 bg-opacity-40 hover:bg-opacity-100"
                 >
@@ -157,7 +160,7 @@
               on:touchstart={startDrag}
               on:keydown={handleKeyDown}
             >
-              <a href={`/${user.username}/items/${i.id}`}>
+              <a href={`/items/${i.id}`}>
                 <button
                   class="bg-black rounded-full w-12 h-12 bg-opacity-40 hover:bg-opacity-100"
                 >
@@ -207,3 +210,39 @@
     </button>
   {/each}
 </div>
+
+<div
+  class="fixed inset-x-0 mx-auto flex bottom-16"
+  class:static={!items.length}
+>
+  {#if total > 0}
+    <button
+      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">
+        <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>
+
+<style>
+  .custom-shadow-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    visibility: visible;
+    background: #333;
+    opacity: 0.5;
+    margin: 0;
+  }
+</style>
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index d1094a1d..92de7bcd 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -19,10 +19,10 @@
 </script>
 
 <header
-  class="w-full lg:w-5/6 py-5 mx-auto fixed md:sticky z-10 top-0 bg-white/90"
+  class="w-full md:w-5/6 py-5 mx-auto fixed md:sticky z-10 top-0 bg-white/90"
   bind:this={header}
 >
-  <nav class="block xl:flex flex-wrap justify-between items-center">
+  <nav class="block md:flex justify-between items-center">
     <div
       class="flex justify-start md:justify-center items-center md:space-x-10"
     >
@@ -34,7 +34,7 @@
 
     <!-- desktop nav -->
     <div
-      class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold"
+      class="hidden space-x-10 md:flex justify-center items-center font-bold"
     >
       {#if $page.url.pathname === "/"}
         <button class="hover:opacity-80" on:click={() => scroll(howItWorks)}
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index 79ea4bf3..bd51b125 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -3,7 +3,7 @@
   import { browser } from "$app/environment";
   import Icon from "$comp/Icon.svelte";
   import Popup from "$comp/Popup.svelte";
-  import { shuffleArray } from "$lib/utils";
+  import { back, shuffleArray } from "$lib/utils";
 
   import "maplibre-gl/dist/maplibre-gl.css";
 
@@ -220,8 +220,16 @@
     class="mx-auto h-full w-full z-0"
     bind:this={mapContainer}
   />
+    <div class="absolute flex top-2 left-2 gap-2">
+      <button
+        class="rounded-full border-2 border-black bg-white w-10 h-10"
+        on:click={back}
+      >
+          <Icon icon="arrow-left" style="w-4 m-auto" />
+      </button>
+    </div>
   <div class="relative">
-    <div class="flex absolute flex top-2 right-2 gap-2">
+    <div class="absolute flex top-2 right-2 gap-2">
       <button
         class="rounded-full border-2 border-black bg-white w-10 h-10"
         on:click={toggle}
diff --git a/src/components/Request.svelte b/src/components/Request.svelte
index c085f9e2..297b7438 100644
--- a/src/components/Request.svelte
+++ b/src/components/Request.svelte
@@ -26,7 +26,7 @@
         </div>
       </div>
       <div class="mx-auto my-auto flex gap-2">
-        <a href={`/${user.username}/receive/${$request.id}`}>
+        <a href={`/receive/${$request.id}`}>
           <button
             class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-32"
           >
-- 
cgit v1.2.3