aboutsummaryrefslogtreecommitdiffstats
path: root/src/routes/(app)/invoice
diff options
context:
space:
mode:
authorAdam Soltys <[email protected]>2023-02-02 23:26:34 -0800
committerAdam Soltys <[email protected]>2023-02-02 23:26:34 -0800
commit01333bb3f33da6b2c51e910c0fe74637a8c8e24e (patch)
treeaf238aebeab67adb0cf8f4cf9037b42270809b44 /src/routes/(app)/invoice
parent43d893ff0195f14cd1fcb8acec17b7ca20ff6c28 (diff)
downloadcoinos-ui-01333bb3f33da6b2c51e910c0fe74637a8c8e24e.tar.gz
coinos-ui-01333bb3f33da6b2c51e910c0fe74637a8c8e24e.zip
move invoices, combine profile and dashboard
Diffstat (limited to 'src/routes/(app)/invoice')
-rw-r--r--src/routes/(app)/invoice/+server.js5
-rw-r--r--src/routes/(app)/invoice/[hash]/+layout.server.js19
-rw-r--r--src/routes/(app)/invoice/[hash]/+layout.svelte1
-rw-r--r--src/routes/(app)/invoice/[hash]/+page.server.js5
-rw-r--r--src/routes/(app)/invoice/[hash]/+page.svelte156
-rw-r--r--src/routes/(app)/invoice/[hash]/paid/+page.svelte62
-rw-r--r--src/routes/(app)/invoice/[hash]/tip/+page.server.js11
-rw-r--r--src/routes/(app)/invoice/[hash]/tip/+page.svelte252
-rw-r--r--src/routes/(app)/invoice/sent/+page.svelte10
9 files changed, 0 insertions, 521 deletions
diff --git a/src/routes/(app)/invoice/+server.js b/src/routes/(app)/invoice/+server.js
deleted file mode 100644
index 1321739e..00000000
--- a/src/routes/(app)/invoice/+server.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { auth, post } from '$lib/utils';
-import { json } from '@sveltejs/kit';
-
-export let POST = async ({ cookies: c, request: r }) =>
- json(await post('/invoice', await r.json(), auth(c)));
diff --git a/src/routes/(app)/invoice/[hash]/+layout.server.js b/src/routes/(app)/invoice/[hash]/+layout.server.js
deleted file mode 100644
index d38f945f..00000000
--- a/src/routes/(app)/invoice/[hash]/+layout.server.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import Qr from 'qrcode-base64';
-import { get } from '$lib/utils';
-import { redirect } from '@sveltejs/kit';
-
-export async function load({ depends, params, url }) {
- depends('app:invoice');
-
- let { hash } = params;
- let invoice = await get(`/invoice/${hash}`);
- let { amount, received } = invoice;
- amount = parseInt(amount);
-
- let paid = (!amount && received) || (amount > 0 && received >= amount);
- if (paid && !url.pathname.endsWith('paid')) throw redirect(307, `/invoice/${hash}/paid`);
-
- let sm = Qr.drawImg(invoice.text, { size: 300 });
-
- return { hash, invoice, sm, lg: sm };
-}
diff --git a/src/routes/(app)/invoice/[hash]/+layout.svelte b/src/routes/(app)/invoice/[hash]/+layout.svelte
deleted file mode 100644
index 4fa864ce..00000000
--- a/src/routes/(app)/invoice/[hash]/+layout.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<slot />
diff --git a/src/routes/(app)/invoice/[hash]/+page.server.js b/src/routes/(app)/invoice/[hash]/+page.server.js
deleted file mode 100644
index 1068f273..00000000
--- a/src/routes/(app)/invoice/[hash]/+page.server.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import invoice from '$lib/invoice';
-
-export const actions = {
- default: invoice
-};
diff --git a/src/routes/(app)/invoice/[hash]/+page.svelte b/src/routes/(app)/invoice/[hash]/+page.svelte
deleted file mode 100644
index a2f05cc9..00000000
--- a/src/routes/(app)/invoice/[hash]/+page.svelte
+++ /dev/null
@@ -1,156 +0,0 @@
-<script>
- import { send } from '$lib/socket';
- import { back, copy, f, get, sat, reverseFormat, s, sats } from '$lib/utils';
- import { tick, onMount, onDestroy } from 'svelte';
- import { browser } from '$app/environment';
- import { last } from '$lib/store';
- import { Avatar, Icon, Heart, Image } from '$comp';
- import { t } from '$lib/translations';
- import screenfull from 'screenfull';
-
- export let data;
-
- $: refresh(data);
- let { invoice, id, user, sm, lg } = data;
- let {
- address,
- amount,
- type,
- rate,
- received,
- prompt,
- text,
- tip,
- user: { username, currency }
- } = invoice;
-
- let showQr = !amount;
-
- let src = sm;
-
- let qr;
- let tipPercent = 0;
-
- let refresh = (data) => {
- ({ invoice, id } = data);
- ({
- address,
- amount,
- type,
- rate,
- received,
- prompt,
- text,
- tip,
- user: { username, currency }
- } = invoice);
-
- tipPercent = (tip / amount) * 100;
- };
-
- $: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
- $: tipAmount = ((tip * rate) / sats).toFixed(2);
-
- let subbed;
- onMount(() => {
- browser &&
- last.subscribe((v) => {
- if (!v || subbed) return;
- subbed = true;
- send('subscribe', invoice);
- });
- });
-
- $: link = address ? text : `lightning:${text}`;
-
- let full;
- let toggle = () => {
- screenfull.toggle(qr);
- full = !full;
- if (full) src = lg;
- else src = sm;
- };
-</script>
-
-<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
- <Icon icon="arrow-left" style="w-10" />
-</button>
-
-<div class="container mx-auto max-w-lg px-4 space-y-2 sm:space-y-5">
- <div>
- <div class="flex w-full">
- <div class="mx-auto">
- <a href="/{username}" class="text-black font-semibold hover:opacity-80 mx-auto">
- <div class="flex my-auto">
- <Avatar user={invoice.user} size={20} />
- <div class="my-auto text-lg">{username}</div>
- </div>
- </a>
- </div>
- </div>
- </div>
-
- <div class="w-full">
- <img
- {src}
- class:p-4={full}
- class="w-[300px] mx-auto"
- bind:this={qr}
- on:click={toggle}
- on:keydown={toggle}
- alt={address || text}
- />
- </div>
-
- {#if address}
- <div class="text-secondary text-center">{address}</div>
- {/if}
-
- <div class="flex gap-2 justify-center">
- <button
- class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80"
- on:click={() => copy(address ? address : text)}
- ><Icon icon="copy" style="mr-1" />
- <div>Copy</div></button
- >
-
- {#if user && user.username !== username}
- <a href={`/send/${invoice.id}`}>
- <button class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80">
- <Icon icon="send" style="mr-1" />
- <div class="my-auto">Pay</div>
- </button>
- </a>
- {/if}
- </div>
-
- <div class="space-y-2 w-80 mx-auto">
- {#if invoice.tip}
- <div class="flex justify-between">
- {$t('invoice.invoice')}
- <span>
- {f(amountFiat, currency)}
- <span class="text-secondary">{`${sat(amount)}`}</span>
- </span>
- </div>
-
- <div class="flex justify-between">
- {$t('invoice.tip')}
- <span
- >{f(tipAmount, currency)}
- <span class="text-secondary">{`${sat(tip)}`}</span>
- </span>
- </div>
- {/if}
-
- {#if amount > 0}
- <div class="flex flex-wrap justify-between font-bold text-2xl !my-5">
- <span class="mr-1">{$t('invoice.total')}</span>
- <span
- >{f(amountFiat + parseFloat(tipAmount), currency)}
- <span class="text-secondary font-normal">{`${sat(tip + amount)}`}</span></span
- >
- </div>
- {/if}
- </div>
-</div>
diff --git a/src/routes/(app)/invoice/[hash]/paid/+page.svelte b/src/routes/(app)/invoice/[hash]/paid/+page.svelte
deleted file mode 100644
index 2ccbc971..00000000
--- a/src/routes/(app)/invoice/[hash]/paid/+page.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script>
- import { scale } from 'svelte/transition';
- import { Icon } from '$comp';
- import { toast } from '@zerodevx/svelte-toast';
- import { browser } from '$app/environment';
- import { t } from '$lib/translations';
- import { f, s, sat, sats } from '$lib/utils';
- import { goto } from '$app/navigation';
-
- export let data;
- let amount, currency, rate, received, pending, tip, user, id;
- $: data && ({ amount, currency, rate, received, pending, tip, user, id } = data.invoice);
-
- toast.pop(0);
-
- $: amountFiat = parseFloat((((received - tip) * rate) / sats).toFixed(2));
- $: pendingFiat = parseFloat((((pending - tip) * rate) / sats).toFixed(2));
- $: tipFiat = parseFloat(((tip * rate) / sats).toFixed(2));
-</script>
-
-<div class="container px-4 text-center mx-auto">
- <div class="flex w-full py-20 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}>
- <Icon icon="check" style="mx-auto" />
- </div>
- {#if received}
- <h1 class="text-3xl md:text-4xl font-bold mb-6">{$t('invoice.paymentSuccessful')}</h1>
- <h2 class="text-2xl md:text-3xl font-semibold">
- {f(amountFiat, currency)}
- {#if tip}
- + {f(tipFiat, currency)}
- {/if}
- </h2>
- <h3 class="text-secondary md:text-lg mb-6 mt-1">
- {sat(received - tip)}
- {#if tip}
- +{sat(tip)}
- {/if}
- </h3>
- {/if}
-
- {#if pending}
- <h1 class="text-3xl md:text-4xl font-bold mb-6">Payment detected</h1>
- <h2 class="text-2xl md:text-3xl font-semibold">
- {f(pendingFiat, currency)}
- {#if tip}
- + {f(tipFiat, currency)}
- {/if}
- </h2>
- <h3 class="text-secondary md:text-lg mb-6 mt-1">
- {sat(pending - tip)}
- {#if tip}
- +{sat(tip)}
- {/if}
- </h3>
- {/if}
-</div>
-
-<a href={`/${user.username}/receive`}>
- <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
-</a>
-
-<div class="fixed bottom-10 w-full text-center">{$t('payments.tapAnywhere')}</div>
diff --git a/src/routes/(app)/invoice/[hash]/tip/+page.server.js b/src/routes/(app)/invoice/[hash]/tip/+page.server.js
deleted file mode 100644
index c78e5020..00000000
--- a/src/routes/(app)/invoice/[hash]/tip/+page.server.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import invoice from '$lib/invoice';
-import { redirect } from '@sveltejs/kit';
-
-export async function load({ parent }) {
- let { invoice } = await parent();
- if (!invoice.amount) throw redirect(307, `/invoice/${invoice.id}`);
-}
-
-export const actions = {
- default: invoice
-};
diff --git a/src/routes/(app)/invoice/[hash]/tip/+page.svelte b/src/routes/(app)/invoice/[hash]/tip/+page.svelte
deleted file mode 100644
index ea0ab903..00000000
--- a/src/routes/(app)/invoice/[hash]/tip/+page.svelte
+++ /dev/null
@@ -1,252 +0,0 @@
-<script>
- import { onMount } from 'svelte';
- import { browser } from '$app/environment';
- import { invoice as inv, request } from '$lib/store';
- import { back, copy, focus, f, sat, get, reverseFormat, s, sats } from '$lib/utils';
- import { Icon } from '$comp';
- import { goto } from '$app/navigation';
- import { t } from '$lib/translations';
- import { enhance } from '$app/forms';
- import { tick } from 'svelte';
-
- const tipAmounts = ['No', '10%', '15%', '20%'];
- let showCustomAmount;
-
- let customInput;
- let customTipAmount;
-
- let apply = async () => {
- if (customTipAmount > 0) {
- tipPercent = (customTipAmount / amountFiat) * 100;
- showCustomAmount = false;
- }
- };
-
- let active = (amount) =>
- !customTipAmount && Math.round(tipPercent) === parseInt(amount.slice(0, 2));
-
- const handleCustomTipAmount = (e) => {
- tipPercent = 0;
- customTipAmount = e.target.value;
- };
-
- let timeout;
- const handleSlide = (e) => {
- customTipAmount = '';
- if (customInput) {
- customInput.value = '';
- }
- tipPercent = e.target.value;
-
- clearTimeout(timeout);
- timeout = setTimeout(update, 800);
- };
-
- let submitting;
- const handleTipButtonClick = async (amount) => {
- submitting = true;
- if (amount === 'No') {
- tipPercent = 0;
- } else {
- tipPercent = parseInt(amount.slice(0, 2));
- }
-
- await tick();
- submit.click();
- };
-
- let submit;
- let update = async () => {
- await tick();
- //submit.click();
- };
-
- export let data;
- $: refresh(data);
- let { invoice, id, user } = data;
- let {
- amount,
- type,
- rate,
- received,
- prompt,
- text,
- tip,
- user: { username, currency }
- } = invoice;
-
- let qr;
- let tipPercent = 0;
-
- let fullscreen;
-
- let refresh = (data) => {
- $inv = null;
-
- ({ invoice, id } = data);
- ({
- amount,
- type,
- rate,
- received,
- prompt,
- text,
- tip,
- user: { username, currency }
- } = invoice);
-
- tipPercent = (tip / amount) * 100;
- };
-
- $: tip = Math.round((amount / 100) * tipPercent);
-
- $: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
-
- $: tipAmount = ((tip * rate) / sats).toFixed(2);
-
- $: invoiceAmountFiatFormatted = f(amountFiat, currency);
-
- onMount(() => ($request = undefined));
-</script>
-
-<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
- <Icon icon="arrow-left" style="w-10" />
-</button>
-
-<div class="container px-4 max-w-lg text-center mx-auto">
- <form method="POST" use:enhance class:invisible={submitting}>
- <input type="hidden" name="amount" value={amount} />
- <input type="hidden" name="tip" value={tip} />
- <input type="hidden" name="username" value={username} />
- <input type="hidden" name="rate" value={rate} />
- <input type="hidden" name="prompt" value="false" />
- <input type="hidden" name="type" value={type} />
- <input type="hidden" name="request_id" value={invoice.request?.id} />
-
- <h1 class="text-4xl font-semibold my-8">{$t('invoice.addTipq')}</h1>
- {#if !showCustomAmount}
- <div class="my-2 text-xl">{Math.round(tipPercent)}%</div>
-
- <input
- id="slider"
- type="range"
- min="0"
- max="100"
- value={tipPercent}
- class="px-0 py-0 my-5"
- style="--bgPercent: {tipPercent}%;"
- on:input={handleSlide}
- />
-
- <div class="flex mb-8 text-lg">
- <div>
- <span class="mr-1">
- {f(amountFiat, currency)}
- <span class="font-semibold">+{f(tipAmount, currency)}</span>
- </span>
- </div>
-
- <div class="ml-auto text-lg">
- {sat(amount)}
- <span class="font-semibold">+{sat(tip)}</span>
- </div>
- </div>
-
- {#if tip}
- <div>
- <button type="button" on:click={() => submit.click()}>Next</button>
- <button type="button" on:click={() => (tipPercent = 0)}>Reset</button>
- </div>
- {:else}
- {#each tipAmounts as amount}
- <button
- type="button"
- class:active={active(amount, tipPercent)}
- on:click={() => handleTipButtonClick(amount)}>{amount}</button
- >
- {/each}
- {/if}
-
- <div>
- <button type="button" on:click={() => (showCustomAmount = true)}>Custom</button>
- </div>
- {/if}
-
- <button type="submit" bind:this={submit} />
- </form>
-
- {#if showCustomAmount}
- <form on:submit|preventDefault={apply}>
- <div class="relative">
- <span
- class="absolute top-[18px] left-5 font-semibold {!customTipAmount
- ? 'opacity-50'
- : 'opacity-100'}">$</span
- >
- <input
- bind:this={customInput}
- type="number"
- step="0.01"
- on:input={(e) => handleCustomTipAmount(e)}
- class="pl-10"
- placeholder="Custom amount"
- use:focus
- />
- <button
- type="submit"
- class="w-full mt-2 bg-black text-white font-semibold py-3 px-7 rounded-2xl {!customTipAmount
- ? 'opacity-50'
- : 'opacity-100 hover:opacity-80'}"
- disabled={!customTipAmount}>Apply</button
- >
- </div>
- </form>
- {/if}
-</div>
-
-<style>
- #slider {
- -webkit-appearance: none;
- width: 100%;
- height: 6px;
- border-radius: 5px;
- background: linear-gradient(
- to right,
- black 0%,
- black var(--bgPercent),
- #f5f7fa var(--bgPercent),
- #f5f7fa 100%
- );
- outline: none;
- }
-
- #slider:active {
- background-color: black;
- }
-
- #slider::-webkit-slider-thumb {
- -webkit-appearance: none;
- appearance: none;
- width: 30px;
- height: 30px;
- border-radius: 50%;
- background: black;
- cursor: pointer;
- }
-
- #slider::-moz-range-thumb {
- width: 30px;
- height: 30px;
- border-radius: 50%;
- background: black;
- cursor: pointer;
- }
-
- .active {
- @apply !bg-black !text-white;
- }
-
- .container button[type='button'] {
- @apply w-full mt-2 bg-primary text-black hover:bg-black hover:text-white font-semibold py-5 px-7 rounded-2xl;
- }
-</style>
diff --git a/src/routes/(app)/invoice/sent/+page.svelte b/src/routes/(app)/invoice/sent/+page.svelte
deleted file mode 100644
index ae71eb2e..00000000
--- a/src/routes/(app)/invoice/sent/+page.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
- import { Avatar, Icon } from '$comp';
- import { request } from '$lib/store';
-</script>
-
-Invoice sent to
-<div class="flex">
- <Avatar user={$request.requester} size={12} />
- <h1 class="my-auto"><b>{$request.requester.username}</b> is ready to pay</h1>
-</div>