From 391cb7af3e23f2a27bd422d64029b6c70f8045bc Mon Sep 17 00:00:00 2001
From: tree <tree@hidden.cz>
Date: Sat, 9 Apr 2022 10:17:34 +0200
Subject: [PATCH] Update

---
 src/lib/Event.svelte        |   2 +-
 src/lib/api.js              |  10 +-
 src/lib/stores.js           |   1 +
 src/routes/__layout.svelte  |   5 +
 src/routes/vstupenky.svelte | 285 ++++++++++++++++++++----------------
 5 files changed, 172 insertions(+), 131 deletions(-)

diff --git a/src/lib/Event.svelte b/src/lib/Event.svelte
index 7b4792e..904f518 100644
--- a/src/lib/Event.svelte
+++ b/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
     })
   }
diff --git a/src/lib/api.js b/src/lib/api.js
index 4803a61..2c645fd 100644
--- a/src/lib/api.js
+++ b/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()
diff --git a/src/lib/stores.js b/src/lib/stores.js
index 8b30f78..5088bcc 100644
--- a/src/lib/stores.js
+++ b/src/lib/stores.js
@@ -16,4 +16,5 @@ export const orderTicketForm = writable({
 export const userData = writable({
   favoriteEvents: [],
   hpTrack: 'top',
+  orders: [],
 });
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index d60dfe6..0d812da 100644
--- a/src/routes/__layout.svelte
+++ b/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>
diff --git a/src/routes/vstupenky.svelte b/src/routes/vstupenky.svelte
index 769b788..14c9b01 100644
--- a/src/routes/vstupenky.svelte
+++ b/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';
 
@@ -14,9 +14,18 @@
   if (parsed.__v === $orderTicketForm.__v) {
     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,143 +180,158 @@
     <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="mb-4">
-        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 })
-      </div>
-      <div class="md:flex gap-3">
-        <div class="md:w-1/2 p-2">
-          <div class="font-bold uppercase">✅ &nbsp;Vstupenka obsahuje:</div>
-          <div class="mt-4">
-            <div class="mb-2">• přístup na všechny přednášky, workshopy a další události v rámci konference (do naplnění kapacity sálu)</div>
-            <div class="mb-2">• platnost oba dva konferenční dny (sobota + neděle)</div>
-            <div class="mb-2">• přístup na <span class="font-bold">UTXO.Party</span> během sobotního večera/noci</div>
-            <div>• skvělou možnost networkingu v rámci lokální kryptokomunity</div>
-          </div>
+    <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 })
         </div>
-        <div class="md:w-1/2 p-2 md:mt-0 mt-3">
-          <div class="font-bold uppercase">❌ &nbsp;Vstupenka NEobsahuje:</div>
-          <div class="mt-4">
-            <div class="mb-2">• jídlo nebo pití - teplé i studené občerstvení bude možné zakoupit na místě, platba kartou nebo Lightning Network (LN)</div>
-            <div>• v případě menších přednášejících sálů negarantujeme místo pro každého</div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="p-5 bg-blue-web-light rounded-md mt-6 text-blue-web shadow-md">
-      <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>
-        <div class="mt-2"><input type="text" class="border border-blue-web rounded-md p-2 w-full lg:w-1/2 text-blue-web" bind:value={$orderTicketForm.email} /></div>
-      </div>
-      <div class="mt-6">
-        <div class="uppercase text-sm font-bold">Počet vstupenek</div>
-        <div class="mt-2 flex gap-3">
-          <select name="count" class="border border-blue-web rounded-md p-2 text-blue-web bg-white" bind:value={$orderTicketForm.count}>
-            {#each count as i}
-              <option value={i}>{i}</option>
-            {/each}
-          </select>
-          <div class="my-auto">
-            × <span class="font-bold">{$apiStatus.wave.price} Kč</span> (cena vstupenky)
-          </div>
-        </div>
-        </div>
-      <div class="mt-6">
-        <div class="uppercase text-sm font-bold">Vstupenky a příplatky</div>
-        <div class="mt-2 text-sm">Informace, které budou vytištěné na Vaší konferenční jmenovku. Tyto údaje jsou nepovinné a je možné je změnit později.</div>
-      </div>
-      <div class="mt-2">
-        {#each ticketFormCountArray($orderTicketForm.count) as i}
-          <div class="p-4 bg-utxo-gradient text-white rounded-md mb-6 shadow-md">
-            <div class="">
-              <div class="uppercase font-bold">Vstupenka #{i+1}</div>
-              <div class="md:flex gap-2">
-                <div class="mt-2 flex-1">
-                  <div class="uppercase text-sm">Jméno (Přezdívka)</div>
-                  <div class="mt-2"><input type="text" maxlength="25" class="border border-blue-web rounded-md p-2 w-full text-blue-web" bind:value={$orderTicketForm.tickets[i].name} placeholder="{faker.name.findName()}" /></div>
-                </div>
-                <div class="mt-2 flex-1">
-                  <div class="uppercase text-sm">Organizace (Firma)</div>
-                  <div class="mt-2"><input type="text" maxlength="25" class="border border-blue-web rounded-md p-2 w-full text-blue-web" bind:value={$orderTicketForm.tickets[i].org} placeholder="{faker.company.companyName()}" /></div>
-                </div>
-                <div class="mt-2">
-                  <div class="uppercase text-sm">Twitter účet</div>
-                  <div class="mt-2"><input type="text" maxlength="25" class="border border-blue-web rounded-md p-2 w-full text-blue-web" bind:value={$orderTicketForm.tickets[i].twitter} placeholder="@{faker.internet.userName()}" /></div>
-                </div>
-              </div>
-              <div class="uppercase text-sm font-bold mt-3">Volitelné příplatky</div>
-              <div class="mt-1">
-                {#each $apiStatus.config.extras as ex}
-                  <div><label class="cursor-pointer"><input type="checkbox" class="mr-0.5 cursor-pointer" bind:checked={$orderTicketForm.tickets[i].extras[ex.id]} /> <span class="font-semibold">{ex.name} ({ex.price} Kč)</span></label> - <span class="text-sm">{ex.desc}</span></div>
-                {/each}
-              </div>
+        <div class="md:flex gap-3">
+          <div class="md:w-1/2 p-2">
+            <div class="font-bold uppercase">✅ &nbsp;Vstupenka obsahuje:</div>
+            <div class="mt-4">
+              <div class="mb-2">• přístup na všechny přednášky, workshopy a další události v rámci konference (do naplnění kapacity sálu)</div>
+              <div class="mb-2">• platnost oba dva konferenční dny (sobota + neděle)</div>
+              <div class="mb-2">• přístup na <span class="font-bold">UTXO.Party</span> během sobotního večera/noci</div>
+              <div>• skvělou možnost networkingu v rámci lokální kryptokomunity</div>
             </div>
           </div>
-        {/each}
-      </div>
-      <div class="mt-6">
-        <div class="uppercase text-sm font-bold">Dýško pro organizátory</div>
-        <div class="mt-2 flex flex-wrap gap-2">
-          {#each $apiStatus.config.tipPercentages as tp}
-            <button class="block py-1.5 px-4 min-w-16 {$orderTicketForm.tipPercent === tp[0] && $orderTicketForm.tipCustom < 1  ? (tp[0] === 0 ? 'bg-gray-400' : 'bg-blue-web' )+' rounded-full text-white shadow-lg' : 'border border-solid border-blue-web rounded-full'}" on:click={changeTip(tp[0])}>{tp[1] || tp[0] + '%'}</button>
-          {/each}
-          <div class="px-2 py-1 {$orderTicketForm.tipCustom > 0 ? 'px-5 border border-blue-web rounded-full bg-blue-web text-white' : ''}">Jiná částka: <input class="border border border-blue-web rounded-md px-2 py-1 text-blue-web w-16" bind:value={$orderTicketForm.tipCustom} /> Kč</div>
-        </div>
-      </div>
-      <div class="mt-8">
-        <div class="uppercase text-sm font-bold">Platební metoda</div>
-        <div class="mt-2">
-          {#each $apiStatus.config.paymentMethods as pm}
-            <div class="mb-2">
-              <label class="cursor-pointer"><input checked={$orderTicketForm.paymentMethod === pm.id} name="paymentMethod" value="{pm.id}" type="radio" on:change={selectPaymentMethod} class="cursor-pointer" /> {pm.name}</label>
+          <div class="md:w-1/2 p-2 md:mt-0 mt-3">
+            <div class="font-bold uppercase">❌ &nbsp;Vstupenka NEobsahuje:</div>
+            <div class="mt-4">
+              <div class="mb-2">• jídlo nebo pití - teplé i studené občerstvení bude možné zakoupit na místě, platba kartou nebo Lightning Network (LN)</div>
+              <div>• v případě menších přednášejících sálů negarantujeme místo pro každého</div>
             </div>
-          {/each}
+          </div>
         </div>
       </div>
-      <div class="mt-6 py-3 px-4 bg-white rounded-md shadow-md text-sm">
-        <div class="uppercase text-sm font-bold">Shrnutí objednávky</div>
-        <div class="mt-1.5">
-          <table cellpadding="5" class="table-auto">
-            <tr>
-              <td>{$orderTicketForm.count}× UTXO.22 vstupenka ({$apiStatus.wave.price} Kč)</td>
-              <td>{ticketPrice} Kč</td>
-            </tr>
-            {#if extrasStats.sum > 0}
-              {#each extrasStats.arr as es}
-                <tr>
-                  <td>{es.count}× {$apiStatus.config.extras.find(e => e.id === es.id).shortname} ({es.price} Kč)</td>
-                  <td>{es.sum} Kč</td>
-                </tr>
+      <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>
+          <div class="mt-2"><input type="text" class="border border-blue-web rounded-md p-2 w-full lg:w-1/2 text-blue-web" bind:value={$orderTicketForm.email} /></div>
+        </div>
+        <div class="mt-6">
+          <div class="uppercase text-sm font-bold">Počet vstupenek</div>
+          <div class="mt-2 flex gap-3">
+            <select name="count" class="border border-blue-web rounded-md p-2 text-blue-web bg-white" bind:value={$orderTicketForm.count}>
+              {#each count as i}
+                <option value={i}>{i}</option>
               {/each}
-            {/if}
-            {#if tip > 0}
-              <tr>
-                <td>dýško pro organizátory ({$orderTicketForm.tipPercent > 0 ? $orderTicketForm.tipPercent + '%' : $orderTicketForm.tipCustom + ' Kč'})</td>
-                <td>{tip} Kč</td>
-              </tr>
-            {/if}
-            <tr>
-              <th align="right">Celkem:</th>
-              <th class="font-bold">{totalPrice} Kč<th>
-            </tr>
-          </table>
+            </select>
+            <div class="my-auto">
+              × <span class="font-bold">{$apiStatus.wave.price} Kč</span> (cena vstupenky)
+            </div>
+          </div>
+          </div>
+        <div class="mt-6">
+          <div class="uppercase text-sm font-bold">Vstupenky a příplatky</div>
+          <div class="mt-2 text-sm">Informace, které budou vytištěné na Vaší konferenční jmenovku. Tyto údaje jsou nepovinné a je možné je změnit později.</div>
+        </div>
+        <div class="mt-2">
+          {#each ticketFormCountArray($orderTicketForm.count) as i}
+            <div class="p-4 bg-utxo-gradient text-white rounded-md mb-6 shadow-md">
+              <div class="">
+                <div class="uppercase font-bold">Vstupenka #{i+1}</div>
+                <div class="md:flex gap-2">
+                  <div class="mt-2 flex-1">
+                    <div class="uppercase text-sm">Jméno (Přezdívka)</div>
+                    <div class="mt-2"><input type="text" maxlength="25" class="border border-blue-web rounded-md p-2 w-full text-blue-web" bind:value={$orderTicketForm.tickets[i].name} placeholder="{faker.name.findName()}" /></div>
+                  </div>
+                  <div class="mt-2 flex-1">
+                    <div class="uppercase text-sm">Organizace (Firma)</div>
+                    <div class="mt-2"><input type="text" maxlength="25" class="border border-blue-web rounded-md p-2 w-full text-blue-web" bind:value={$orderTicketForm.tickets[i].org} placeholder="{faker.company.companyName()}" /></div>
+                  </div>
+                  <div class="mt-2">
+                    <div class="uppercase text-sm">Twitter účet</div>
+                    <div class="mt-2"><input type="text" maxlength="25" class="border border-blue-web rounded-md p-2 w-full text-blue-web" bind:value={$orderTicketForm.tickets[i].twitter} placeholder="@{faker.internet.userName()}" /></div>
+                  </div>
+                </div>
+                <div class="uppercase text-sm font-bold mt-3">Volitelné příplatky</div>
+                <div class="mt-1">
+                  {#each $apiStatus.config.extras as ex}
+                    <div><label class="cursor-pointer"><input type="checkbox" class="mr-0.5 cursor-pointer" bind:checked={$orderTicketForm.tickets[i].extras[ex.id]} /> <span class="font-semibold">{ex.name} ({ex.price} Kč)</span></label> - <span class="text-sm">{ex.desc}</span></div>
+                  {/each}
+                </div>
+              </div>
+            </div>
+          {/each}
+        </div>
+        <div class="mt-6">
+          <div class="uppercase text-sm font-bold">Dýško pro organizátory</div>
+          <div class="mt-2 flex flex-wrap gap-2">
+            {#each $apiStatus.config.tipPercentages as tp}
+              <button class="block py-1.5 px-4 min-w-16 {$orderTicketForm.tipPercent === tp[0] && $orderTicketForm.tipCustom < 1  ? (tp[0] === 0 ? 'bg-gray-400' : 'bg-blue-web' )+' rounded-full text-white shadow-lg' : 'border border-solid border-blue-web rounded-full'}" on:click={changeTip(tp[0])}>{tp[1] || tp[0] + '%'}</button>
+            {/each}
+            <div class="px-2 py-1 {$orderTicketForm.tipCustom > 0 ? 'px-5 border border-blue-web rounded-full bg-blue-web text-white' : ''}">Jiná částka: <input class="border border border-blue-web rounded-md px-2 py-1 text-blue-web w-16" bind:value={$orderTicketForm.tipCustom} /> Kč</div>
+          </div>
+        </div>
+        <div class="mt-8">
+          <div class="uppercase text-sm font-bold">Platební metoda</div>
+          <div class="mt-2">
+            {#each $apiStatus.config.paymentMethods as pm}
+              <div class="mb-2">
+                <label class="cursor-pointer"><input checked={$orderTicketForm.paymentMethod === pm.id} name="paymentMethod" value="{pm.id}" type="radio" on:change={selectPaymentMethod} class="cursor-pointer" /> {pm.name}</label>
+              </div>
+            {/each}
+          </div>
+        </div>
+        <div class="mt-6 py-3 px-4 bg-white rounded-md shadow-md text-sm">
+          <div class="uppercase text-sm font-bold">Shrnutí objednávky</div>
+          <div class="mt-1.5">
+            <table cellpadding="5" class="table-auto">
+              <tr>
+                <td>{$orderTicketForm.count}× UTXO.22 vstupenka ({$apiStatus.wave.price} Kč)</td>
+                <td>{ticketPrice} Kč</td>
+              </tr>
+              {#if extrasStats.sum > 0}
+                {#each extrasStats.arr as es}
+                  <tr>
+                    <td>{es.count}× {$apiStatus.config.extras.find(e => e.id === es.id).shortname} ({es.price} Kč)</td>
+                    <td>{es.sum} Kč</td>
+                  </tr>
+                {/each}
+              {/if}
+              {#if tip > 0}
+                <tr>
+                  <td>dýško pro organizátory ({$orderTicketForm.tipPercent > 0 ? $orderTicketForm.tipPercent + '%' : $orderTicketForm.tipCustom + ' Kč'})</td>
+                  <td>{tip} Kč</td>
+                </tr>
+              {/if}
+              <tr>
+                <th align="right">Celkem:</th>
+                <th class="font-bold">{totalPrice} Kč<th>
+              </tr>
+            </table>
+          </div>
+          <div class="mt-1.5">Platební metoda: <span class="font-bold">{#if $orderTicketForm.paymentMethod === 'btcpay'}Bitcoin{:else}Platební karta{/if}</span></div>
+        </div>
+        <div class="mt-6">
+          <button class="hover:bg-utxo-gradient bg-[#E16A61] text-white font-semibold rounded-full shadow-md" on:click={submitOrderHandler}><div class="py-2 px-4">Odeslat objednávku - zaplatit {totalPrice} Kč {#if $orderTicketForm.paymentMethod === 'btcpay'}bitcoinem{:else}platební kartou{/if}</div></button>
+          {#if orderError}
+            <div class="py-2 px-3 mt-4 text-red-600 bg-red-200 rounded-xl shadow-md">Chyba: {orderError.title}</div>
+          {/if}
         </div>
-        <div class="mt-1.5">Platební metoda: <span class="font-bold">{#if $orderTicketForm.paymentMethod === 'btcpay'}Bitcoin{:else}Platební karta{/if}</span></div>
-      </div>
-      <div class="mt-6">
-        <button class="hover:bg-utxo-gradient bg-[#E16A61] text-white font-semibold rounded-full shadow-md" on:click={submitOrderHandler}><div class="py-2 px-4">Odeslat objednávku - zaplatit {totalPrice} Kč {#if $orderTicketForm.paymentMethod === 'btcpay'}bitcoinem{:else}platební kartou{/if}</div></button>
-        {#if orderError}
-          <div class="py-2 px-3 mt-4 text-red-600 bg-red-200 rounded-xl shadow-md">Chyba: {orderError.title}</div>
-        {/if}
       </div>
     </div>
     {/if}