Update

src/lib/Event.svelte

@@ -35,7 +35,7 @@
         fe.push(t)
         output = Object.assign($userData, { favoriteEvents: fe })
       }
-      localStorage.setItem('userData', JSON.stringify(output))
+      //localStorage.setItem('userData', JSON.stringify(output))
       return output
     })
   }

src/lib/api.js

@@ -23,7 +23,11 @@ class API {
     return this.bundle
   }
 
-  async apiCall (path, opts={ method: 'get' }) {
+  async apiCall (path, opts={ method: 'get' }, body = null) {
+    if (body) {
+      opts.headers = { 'Content-Type': 'application/json', }
+      opts.body = JSON.stringify(body)
+    }
     const resp = await fetch(`https://api.utxo.cz/${path}`, opts)
     return resp.json()
   }
@@ -31,9 +35,7 @@ class API {
   async submitOrder (data) {
     const resp = await fetch('https://api.utxo.cz/submitOrder', {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: { 'Content-Type': 'application/json', },
       body: JSON.stringify(data),
     })
     return resp.json()

src/lib/stores.js

@@ -16,4 +16,5 @@ export const orderTicketForm = writable({
 export const userData = writable({
   favoriteEvents: [],
   hpTrack: 'top',
+  orders: [],
 });

src/routes/__layout.svelte

@@ -16,6 +16,11 @@
     if (userDataLS) {
       userData.set(JSON.parse(userDataLS))
     }
+
+    userData.subscribe(ud => {
+      localStorage.setItem('userData', JSON.stringify(ud))
+    })
+
   })
 
 </script>

src/routes/vstupenky.svelte

@@ -5,7 +5,7 @@
 <script>
   import { onMount } from 'svelte';
   import { faker } from '@faker-js/faker';
-  import { orderTicketForm, apiStatus } from '$lib/stores';
+  import { orderTicketForm, apiStatus, userData } from '$lib/stores';
   //import btcPay from 'https://btcpay.utxo.cz/modal/btcpay.js';
   import api from '$lib/api.js';
 
@@ -15,8 +15,17 @@
     orderTicketForm.set(parsed)
   }
 
+  let orders = []
+ 
   onMount(async () => {
     apiStatus.set(await api.apiCall('status'))
+
+    // load orders
+    if ($userData.orders && $userData.orders.length > 0) {
+
+      const resp = await api.apiCall('orders', { method: 'POST' }, { orders: $userData.orders })
+      orders = resp.orders
+    }
   })
 
   faker.locale = 'cz';
@@ -76,11 +85,20 @@
       $: orderError = processOrderError(resp.error)
       return null;
     }
-    if (!resp.ok || !resp.payment.checkoutUrl) {
+    if (!resp.ok || !resp.payment.url) {
       return null
     }
 
-    window.location.replace(resp.payment.checkoutUrl)
+    // add order to user data
+    userData.update(ud => {
+      if (!ud.orders) {
+        ud.orders = []
+      }
+      ud.orders.push(resp.orderId)
+      return ud
+    })
+
+    window.location.replace(resp.payment.url)
   }
 
   let tickets = 0
@@ -162,14 +180,28 @@
     <h1 class="uppercase text-2xl font-bold">Vaše vstupenky</h1>
     <div class="mt-4">Nemáte žádnou vstupenku</div>
   </div>
+  {#if orders.length > 0}
+    <div class="mt-10">
+      <h1 class="uppercase text-2xl font-bold">Vaše objednávky</h1>
+      <div class="mt-4">
+        {#each orders as order}
+          <div class="px-3 py-2 border rounded-lg">
+            {order.id} - {order.status}
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
   {#if $apiStatus}
   <div class="mt-10 mb-10">
     <h1 class="uppercase text-2xl font-bold">Nákup vstupenek</h1>
     {#if !$apiStatus.wave}
       <div class="mt-4">V současné době nelze zakoupit vstupenky.</div>
     {:else}
-    <div class="border rounded-md p-4 shadow-md mt-4">
+    <div class="p-3 bg-blue-web-light rounded-md mt-6 text-blue-web shadow-md">
+      <div class="sm:m-2 border rounded-md p-4 shadow bg-white mb-6">
         <div class="mb-4">
+          Název akce: <span class="font-bold">UTXO.22</span><br/>
           Datum konání: <span class="font-bold">4. - 5. červen 2022</span> (sobota - neděle)<br/>
           Místo: <span class="font-bold">Gabriel Loci</span>, Praha 5<br/><br/>
           Aktuální cena vstupenky: <span class="font-bold">{$apiStatus.wave.price} Kč</span> / osobu ({ $apiStatus.wave.name })
@@ -193,7 +225,7 @@
           </div>
         </div>
       </div>
-    <div class="p-5 bg-blue-web-light rounded-md mt-6 text-blue-web shadow-md">
+      <div class="p-2">
         <div>
           <div class="uppercase text-sm font-bold">Email</div>
           <div class="mt-2 text-sm">Kontaktní email, na který budou zaslány vstupenky.</div>
@@ -301,6 +333,7 @@
           {/if}
         </div>
       </div>
+    </div>
     {/if}
   </div>
   <!--pre>{JSON.stringify($orderTicketForm, null, 2)}</pre>