handle card paymenttickets

6 files changed, 104 insertions, 176 deletions

diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
index cfff251e..84b03593 100644
--- a/src/routes/invoice/[id]/+page.svelte
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -55,7 +55,6 @@
 	$: invoiceAmountFiatFormatted = f(amountFiat, currency);
 </script>
 
-{$invoices[id]?.memo}
 <div class:full-shadow={showMobileTip}>
 	<button
 		class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80"
diff --git a/src/routes/launch/purchase/+page.server.js b/src/routes/launch/purchase/+page.server.js
index 3317b420..8568c0e7 100644
--- a/src/routes/launch/purchase/+page.server.js
+++ b/src/routes/launch/purchase/+page.server.js
@@ -4,45 +4,21 @@ import { redirect } from '@sveltejs/kit';
 import { env } from '$env/dynamic/private';
 import { invalidateAll } from '$app/navigation';
 import { browser } from '$app/environment';
+import { createTicket } from '$lib/ticket';
 
 export const load = async ({ parent }) => {
 	let tickets = await get('/tickets');
 	let { user } = await parent();
 	let hasTicket = !!user?.accounts.find((a) => tickets.includes(a.asset));
-  if (hasTicket) throw redirect(307, '/launch/ticket');
+	if (hasTicket) throw redirect(307, '/launch/ticket');
 	return { tickets };
 };
 
 export const actions = {
 	internal: async ({ cookies, request }) => {
 		let form = await request.formData();
-		let username = form.get('username');
-
-		let { address } = await post(
-			'/invoice',
-			{ invoice: { network: 'liquid' }, user: { username } },
-			auth(cookies)
-		);
-
-		let { ticket } = await get('/ticket');
-
-		let { asset } = await post(
-			'/assets',
-			{
-				address,
-				name: `Launch Party Ticket ${ticket}`,
-				ticker: 'LPT',
-				precision: 0,
-				asset_amount: '1',
-				token_amount: 0,
-				domain: 'coinos.io',
-				filename: tickets[ticket]
-			},
-			{ authorization: `Bearer ${env.LAUNCH}` }
-		);
-
-		await post('/send', { amount: 25000, username: 'launch' }, auth(cookies));
-		await post('/ticket', { asset }, { authorization: `Bearer ${env.LAUNCH}` });
+		await createTicket(cookies, form.get('username'));
+		await post('/send', { amount: 22000, username: 'launch' }, auth(cookies));
 
 		throw redirect(307, `/launch/thanks/${asset}`);
 	},
@@ -53,7 +29,7 @@ export const actions = {
 		let rates = await get('/rates');
 
 		let invoice = {
-			amount: 25000,
+			amount: 22000,
 			memo: 'launch',
 			network: 'lightning',
 			prompt: false,
@@ -66,19 +42,4 @@ export const actions = {
 
 		throw redirect(307, `/invoice/${uuid}`);
 	},
-	bitcoin: () => console.log('YYEAH')
 };
-
-export async function POST({ request }) {
-	let { address, amount, confirmed } = await request.json();
-	if (!confirmed) return;
-
-	if (request.headers.get('x-webhook') !== env.WEBHOOK) {
-		throw new Error('access denied');
-	}
-
-	let username = invoices[address];
-	amount = Math.round(amount / 2100);
-
-	await post('/send', { username, asset, amount }, { authorization: `Bearer ${token}` });
-}
diff --git a/src/routes/launch/purchase/+page.svelte b/src/routes/launch/purchase/+page.svelte
index d78b95d2..3273752a 100644
--- a/src/routes/launch/purchase/+page.svelte
+++ b/src/routes/launch/purchase/+page.svelte
@@ -7,7 +7,7 @@
 
 	export let data;
 
-	let amount = 25000;
+	let amount = 22000;
 	let {
 		currency,
 		account: { balance },
@@ -21,7 +21,7 @@
 <div class="mx-auto h-screen flex items-center justify-center px-4">
 	<div class="font-normal text-gray-800 mx-auto mb-8 space-y-8">
 		<h1 class="mb-4 text-4xl font-bold leading-none tracking-tight text-gray-800 text-center">
-			Confirm Purchase
+			Purchase Ticket
 		</h1>
 
 		<img
@@ -43,35 +43,25 @@
 				</div>
 			</form>
 		{:else}
-			<h1 class="mb-4 text-4xl font-bold leading-none tracking-tight text-gray-800 text-center">
+			<h1 class="mb-4 text-xl font-bold leading-none tracking-tight text-gray-800 text-center">
 				Payment Options
 			</h1>
 
-			<form action="?/lightning" method="POST">
-				<input type="hidden" name="currency" value={currency} />
-				<input type="hidden" name="username" value={username} />
-				<button
-					class="bg-black text-white border rounded-full px-8 py-4 font-bold hover:opacity-80 mx-auto text-2xl"
-				>
-					Lightning
-				</button>
-			</form>
-
-			<form action="?/bitcoin" method="POST">
-				<button
-					class="bg-black text-white border rounded-full px-8 py-4 font-bold hover:opacity-80 mx-auto text-2xl"
-				>
-					Bitcoin
-				</button>
-			</form>
+			<div class="flex justify-center gap-4">
+				<form action="?/lightning" method="POST">
+					<input type="hidden" name="currency" value={currency} />
+					<input type="hidden" name="username" value={username} />
+					<button class="border rounded-full px-8 py-4 font-bold hover:opacity-80 mx-auto text-2xl">
+						Lightning
+					</button>
+				</form>
 
-			<a href={`purchase/card`}>
-				<button
-					class="bg-black text-white border rounded-full px-8 py-4 font-bold hover:opacity-80 mx-auto text-2xl"
-				>
-					Credit Card
-				</button>
-			</a>
+				<a href={`purchase/card`}>
+					<button class="border rounded-full px-8 py-4 font-bold hover:opacity-80 mx-auto text-2xl">
+						Credit Card
+					</button>
+				</a>
+			</div>
 		{/if}
 	</div>
 </div>
diff --git a/src/routes/launch/purchase/card/+page.server.js b/src/routes/launch/purchase/card/+page.server.js
index eaa8d5f3..34a2a8e1 100644
--- a/src/routes/launch/purchase/card/+page.server.js
+++ b/src/routes/launch/purchase/card/+page.server.js
@@ -1,16 +1,19 @@
 import { env } from '$env/dynamic/private';
+import { error, redirect } from '@sveltejs/kit';
+import { post, auth } from '$lib/utils';
+import { createTicket } from "$lib/ticket";
 
 let stripe = 'https://api.stripe.com/v1';
 
 export const actions = {
-	default: async ({ request }) => {
+	default: async ({ cookies, request }) => {
 		let form = await request.formData();
 
 		let headers = new Headers();
 		headers.set('Authorization', 'Basic ' + new Buffer(env.STRIPE + ':').toString('base64'));
 
 		let body = new URLSearchParams({
-			'card[number]': form.get('number'),
+			'card[number]': form.get('number').replace(/\s+/g, ''),
 			'card[exp_month]': form.get('expiry').slice(0, 2),
 			'card[exp_year]': form.get('expiry').slice(-2),
 			'card[cvc]': form.get('cvc')
@@ -29,8 +32,13 @@ export const actions = {
 			description: 'launch ticket'
 		});
 
-		let r = await fetch(`${stripe}/charges`, { body, headers, method }).then((r) => r.json());
+		let { status } = await fetch(`${stripe}/charges`, { body, headers, method }).then((r) =>
+			r.json()
+		);
+
+		if (status !== 'succeeded') throw error(500, { message: 'Card payment failed' });
+		let asset  = await createTicket(cookies, form.get('username'));
 
-		console.log(r);
+		throw redirect(307, `/launch/thanks/${asset}`);
 	}
 };
diff --git a/src/routes/launch/purchase/card/+page.svelte b/src/routes/launch/purchase/card/+page.svelte
index 79240078..2ab5fb86 100644
--- a/src/routes/launch/purchase/card/+page.svelte
+++ b/src/routes/launch/purchase/card/+page.svelte
@@ -1,109 +1,80 @@
 <script>
+	import { enhance } from '$app/forms';
+	import { Lock, Card, Calendar, Spinner } from '$comp';
+
+	export let data;
+
+	let { username } = data.user;
+	let loading;
 </script>
 
-<form method="POST" class="flex flex-wrap gap-3 w-full p-5">
-	<label class="relative w-full flex flex-col">
-		<span class="font-bold mb-3">Card number</span>
-		<input
-			class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
-			type="text"
-			name="number"
-			placeholder="0000 0000 0000"
-			value="4242424242424242"
-		/>
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			class="absolute bottom-0 left-0 -mb-0.5 transform translate-x-1/2 -translate-y-1/2 text-black peer-placeholder-shown:text-gray-300 h-6 w-6"
-			fill="none"
-			viewBox="0 0 24 24"
-			stroke="currentColor"
-		>
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
+<div class="container max-w-lg px-4 mx-auto space-y-5">
+	<form
+		method="POST"
+		class="flex flex-wrap gap-5 w-full p-5 mt-20"
+		use:enhance={() => {
+			loading = true;
+			return ({ update }) => update() && (loading = false);
+		}}
+	>
+		<input type="hidden" name="username" value={username} />
+		<label class="relative w-full flex flex-col">
+			<span class="font-bold mb-3">Card number</span>
+			<input
+				class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
+				type="text"
+				name="number"
+				placeholder="0000 0000 0000"
+				value="4242424242424242"
 			/>
-		</svg>
-	</label>
+			<Card />
+		</label>
 
-	<label class="relative flex-1 flex flex-col">
-		<span class="font-bold mb-3">Expire date</span>
-		<input
-			class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
-			type="text"
-			name="expiry"
-			placeholder="MM/YY"
-			value="0123"
-		/>
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			class="absolute bottom-0 left-0 -mb-0.5 transform translate-x-1/2 -translate-y-1/2 text-black peer-placeholder-shown:text-gray-300 h-6 w-6"
-			fill="none"
-			viewBox="0 0 24 24"
-			stroke="currentColor"
-		>
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+		<label class="relative flex-1 flex flex-col">
+			<span class="font-bold mb-3">Expire date</span>
+			<input
+				class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
+				type="text"
+				name="expiry"
+				placeholder="MM/YY"
+				value="0123"
 			/>
-		</svg>
-	</label>
+			<Calendar />
+		</label>
 
-	<label class="relative flex-1 flex flex-col">
-		<span class="font-bold flex items-center gap-3 mb-3">
-			CVC/CVV
-			<span class="relative group">
-				<span
-					class="hidden group-hover:flex justify-center items-center px-2 py-1 text-xs absolute -right-2 transform translate-x-full -translate-y-1/2 w-max top-1/2 bg-black text-white"
-				>
-					3-digit number on the back of your card</span
-				>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					class="h-4 w-4"
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke="currentColor"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-					/>
-				</svg>
+		<label class="relative flex-1 flex flex-col">
+			<span class="font-bold flex items-center gap-3 mb-3">
+				CVC/CVV
+				<span class="relative group">
+					<span
+						class="hidden group-hover:flex justify-center items-center px-2 py-1 text-xs absolute -right-2 transform translate-x-full -translate-y-1/2 w-max top-1/2 bg-black text-white"
+					>
+						3-digit number on the back of your card</span
+					>
+				</span>
 			</span>
-		</span>
-		<input
-			class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
-			type="text"
-			name="cvc"
-			placeholder="&bull;&bull;&bull;"
-			value="123"
-		/>
-		<svg
-			xmlns="http://www.w3.org/2000/svg"
-			class="absolute bottom-0 left-0 -mb-0.5 transform translate-x-1/2 -translate-y-1/2 text-black peer-placeholder-shown:text-gray-300 h-6 w-6"
-			fill="none"
-			viewBox="0 0 24 24"
-			stroke="currentColor"
-		>
-			<path
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				stroke-width="2"
-				d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+			<input
+				class="rounded-md peer pl-12 pr-2 py-2 border-2 border-gray-200 placeholder-gray-300"
+				type="text"
+				name="cvc"
+				placeholder="&bull;&bull;&bull;"
+				value="123"
 			/>
-		</svg>
-	</label>
+			<Lock />
+		</label>
 
-	<div class="w-full flex">
-		<button
-			class="bg-black text-white border rounded-full px-8 py-4 font-bold hover:opacity-80 mx-auto text-2xl"
-			type="submit">Submit</button
-		>
-	</div>
-</form>
+		<div class="w-full flex mt-8">
+			<button
+				class="bg-black text-white border rounded-full px-8 py-4 font-bold hover:opacity-80 mx-auto text-xl"
+				type="submit"
+				disabled={loading}
+			>
+				{#if loading}
+					<Spinner />
+				{:else}
+					Submit
+				{/if}
+			</button>
+		</div>
+	</form>
+</div>
diff --git a/src/routes/launch/ticket/+page.server.js b/src/routes/launch/ticket/+page.server.js
index 59ea966e..054a88be 100644
--- a/src/routes/launch/ticket/+page.server.js
+++ b/src/routes/launch/ticket/+page.server.js
@@ -4,6 +4,5 @@ export const load = async ({ cookies, parent }) => {
 	let { user } = await parent();
 	let tickets = await get('/tickets');
   let ticket = tickets.findIndex((t) => user.accounts.find((a) => a.asset === t));
-  console.log("TICK", ticket)
 	return { ticket };
 };