aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorAdam Soltys <[email protected]>2022-08-02 12:42:28 -0700
committerAdam Soltys <[email protected]>2022-08-02 12:42:28 -0700
commite195d2fe45e4e006df0404929ffef4f739caa8c7 (patch)
treee7841f8302d8a4719597cb2d8f5ef68e312b1835 /src
parent1b7bdfb4797c9c6d5aeab0149c5fed352df9080a (diff)
downloadcoinos-ui-e195d2fe45e4e006df0404929ffef4f739caa8c7.tar.gz
coinos-ui-e195d2fe45e4e006df0404929ffef4f739caa8c7.zip
remove user check from invoice page
Diffstat (limited to 'src')
-rw-r--r--src/routes/invoice/[id].svelte304
1 files changed, 148 insertions, 156 deletions
diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
index 126a474e..2e3d257c 100644
--- a/src/routes/invoice/[id].svelte
+++ b/src/routes/invoice/[id].svelte
@@ -129,185 +129,177 @@
};
</script>
-{#if $user}
- {#if $invoices[id]?.status !== 'paid'}
- <div class:full-shadow={showMobileTip}>
- <button
- class="ml-5 md:ml-20 mt-5 md:mt-10"
- class:invisible={!$user}
- on:click={handleBackButton}
- >
- <Icon icon="arrow-left" style="w-10" />
- </button>
+{#if $invoices[id]?.status !== 'paid'}
+ <div class:full-shadow={showMobileTip}>
+ <button
+ class="ml-5 md:ml-20 mt-5 md:mt-10"
+ class:invisible={!$user}
+ on:click={handleBackButton}
+ >
+ <Icon icon="arrow-left" style="w-10" />
+ </button>
- <div class="flex justify-center items-center mb-20 md:mt-[20px] px-3">
+ <div class="flex justify-center items-center mb-20 md:mt-[20px] px-3">
+ <div
+ class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
+ >
+ <!-- tipping section -->
<div
- class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
+ class="w-[100%] md:w-auto absolute {showMobileTip
+ ? 'bottom-0'
+ : '-top-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
>
- <!-- tipping section -->
- <div
- class="w-[100%] md:w-auto absolute {showMobileTip
- ? 'bottom-0'
- : '-top-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 left-0 md:static text-center space-y-5"
- >
- <h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
+ <h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
- <div>
- <span class="font-semibold mr-1">{tipAmountFormatted}</span><span
- class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
- >
- <span class="block text-secondary text-sm">{tipPercent}%</span>
- </div>
+ <div>
+ <span class="font-semibold mr-1">{tipAmountFormatted}</span><span
+ class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
+ >
+ <span class="block text-secondary text-sm">{tipPercent}%</span>
+ </div>
- <input
- id="slider"
- type="range"
- min="0"
- max="100"
- value={tipPercent}
- class="px-2"
- on:input={(e) => {
- customTipAmount = '';
- customInput.value = '';
- tipPercent = e.target.value;
- }}
- />
+ <input
+ id="slider"
+ type="range"
+ min="0"
+ max="100"
+ value={tipPercent}
+ class="px-2"
+ on:input={(e) => {
+ customTipAmount = '';
+ customInput.value = '';
+ tipPercent = e.target.value;
+ }}
+ />
- <div>
- {#each tipAmounts as amount}
- <button
- class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {customTipAmount
- ? ''
- : tipPercent === amount.slice(0, 2) ||
- ((tipPercent === 0 || tipPercent === '0') && amount === 'None')
- ? '!bg-black text-white'
- : ''}"
- on:click={() => handleTipButtonClick(amount)}>{amount}</button
- >
- {/each}
+ <div>
+ {#each tipAmounts as amount}
+ <button
+ class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {customTipAmount
+ ? ''
+ : tipPercent === amount.slice(0, 2) ||
+ ((tipPercent === 0 || tipPercent === '0') && amount === 'None')
+ ? '!bg-black text-white'
+ : ''}"
+ on:click={() => handleTipButtonClick(amount)}>{amount}</button
+ >
+ {/each}
- <div class="relative">
- <span
- class="absolute top-[20px] left-5 font-semibold {!customTipAmount
- ? 'opacity-50'
- : 'opacity-100'}">$</span
- >
- <input
- bind:this={customInput}
- type="number"
- min="0"
- on:input={(e) => handleCustomTipAmount(e)}
- class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
- placeholder="Other"
- />
- <button
- class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
- ? !customTipAmount && !tipAmount
- ? 'opacity-50'
- : 'opacity-100'
- : !customTipAmount
+ <div class="relative">
+ <span
+ class="absolute top-[20px] left-5 font-semibold {!customTipAmount
+ ? 'opacity-50'
+ : 'opacity-100'}">$</span
+ >
+ <input
+ bind:this={customInput}
+ type="number"
+ min="0"
+ on:input={(e) => handleCustomTipAmount(e)}
+ class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
+ placeholder="Other"
+ />
+ <button
+ class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
+ ? !customTipAmount && !tipAmount
? 'opacity-50'
- : 'opacity-100'}"
- disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
- on:click={() => (showMobileTip = false)}>Done</button
- >
- </div>
+ : 'opacity-100'
+ : !customTipAmount
+ ? 'opacity-50'
+ : 'opacity-100'}"
+ disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
+ on:click={() => (showMobileTip = false)}>Done</button
+ >
</div>
</div>
+ </div>
- <div
- class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
- id="section-divider"
- />
+ <div
+ class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+ id="section-divider"
+ />
- <!-- invoice section -->
- <div class="text-center space-y-5">
- <button
- class="block md:hidden bg-black {showMobileTip
- ? 'text-white/50'
- : 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
- on:click={() => (showMobileTip = true)}
- disabled={showMobileTip}
+ <!-- invoice section -->
+ <div class="text-center space-y-5">
+ <button
+ class="block md:hidden bg-black {showMobileTip
+ ? 'text-white/50'
+ : 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
+ on:click={() => (showMobileTip = true)}
+ disabled={showMobileTip}
+ >
+ <svg
+ width="24"
+ height="24"
+ class="mr-1"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
>
- <svg
- width="24"
- height="24"
- class="mr-1"
- viewBox="0 0 24 24"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
- stroke="currentColor"
- stroke-width="2"
- stroke-linecap="round"
- stroke-linejoin="round"
- />
- </svg> Add a tip
- </button>
+ <path
+ d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
+ stroke="currentColor"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg> Add a tip
+ </button>
- <span class="text-secondary block"
- >Scan to pay <a href="/{username}" class="text-black font-semibold">{username}</a
- ></span
- >
+ <span class="text-secondary block"
+ >Scan to pay <a href="/{username}" class="text-black font-semibold">{username}</a></span
+ >
- <div
- bind:this={qr}
- on:click={() => copy(text)}
- class="border {showMobileTip
- ? 'border-gray-400'
- : 'border-lightgrey'} px-5 md:px-0 w-[292px] h-[302px] md:w-[300px] md:h-[300px] rounded-3xl block md:flex justify-center items-center cursor-pointer"
- />
+ <div
+ bind:this={qr}
+ on:click={() => copy(text)}
+ class="border {showMobileTip
+ ? 'border-gray-400'
+ : 'border-lightgrey'} px-5 md:px-0 w-[292px] h-[302px] md:w-[300px] md:h-[300px] rounded-3xl block md:flex justify-center items-center cursor-pointer"
+ />
- <div class="px-5 space-y-3">
- <div class="flex justify-between">
- <span class="font-semibold text-sm">Invoice</span>
- <span class="font-semibold text-sm"
- >{invoiceAmountFiatFormatted}
- <span class="text-secondary font-normal">{`(${amountFormatted} SATS)`}</span
- ></span
- >
- </div>
+ <div class="px-5 space-y-3">
+ <div class="flex justify-between">
+ <span class="font-semibold text-sm">Invoice</span>
+ <span class="font-semibold text-sm"
+ >{invoiceAmountFiatFormatted}
+ <span class="text-secondary font-normal">{`(${amountFormatted} SATS)`}</span></span
+ >
+ </div>
- <div class="flex justify-between">
- <span class="font-semibold text-sm">Tip</span>
- <span class="font-semibold text-sm"
- >{tipAmountFormatted}
- <span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
- >
- </div>
+ <div class="flex justify-between">
+ <span class="font-semibold text-sm">Tip</span>
+ <span class="font-semibold text-sm"
+ >{tipAmountFormatted}
+ <span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
+ >
+ </div>
- <div class="flex justify-between">
- <span class="font-bold">Total</span>
- <span class="font-bold"
- >{totalAmountFormatted}
- <span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span
- ></span
- >
- </div>
+ <div class="flex justify-between">
+ <span class="font-bold">Total</span>
+ <span class="font-bold"
+ >{totalAmountFormatted}
+ <span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span
+ >
</div>
</div>
</div>
</div>
</div>
- {:else}
- <div class="text-center mt-20 md:mt-0">
- <Image image="success" style="w-full md:w-3/4 xl:w-1/2 mx-auto max-w-3xl" />
- <h1 class="text-3xl md:text-4xl font-bold mb-6">Payment Successful!</h1>
- <h2 class="text-2xl md:text-3xl font-semibold">
- {totalAmountFormatted}
- {$preferredCurrency}
- </h2>
- <h3 class="text-secondary md:text-lg mb-6 mt-1">({totalAmountSats} SATS)</h3>
- <button
- class="bg-black text-white rounded-2xl w-20 py-3 font-bold"
- on:click={handleDoneClick}
- >
- Done
- </button>
- </div>
- {/if}
+ </div>
+{:else}
+ <div class="text-center mt-20 md:mt-0">
+ <Image image="success" style="w-full md:w-3/4 xl:w-1/2 mx-auto max-w-3xl" />
+ <h1 class="text-3xl md:text-4xl font-bold mb-6">Payment Successful!</h1>
+ <h2 class="text-2xl md:text-3xl font-semibold">
+ {totalAmountFormatted}
+ {$preferredCurrency}
+ </h2>
+ <h3 class="text-secondary md:text-lg mb-6 mt-1">({totalAmountSats} SATS)</h3>
+ <button class="bg-black text-white rounded-2xl w-20 py-3 font-bold" on:click={handleDoneClick}>
+ Done
+ </button>
+ </div>
{/if}
<style>