From 5411633670d040449acc1eb2add3f7af673f94db Mon Sep 17 00:00:00 2001
From: secondl1ght <85003930+secondl1ght@users.noreply.github.com>
Date: Tue, 13 Sep 2022 22:38:27 -0600
Subject: add success animation to payment screen

---
 src/routes/invoice/[id]/+page.svelte | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

(limited to 'src/routes')

diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
index aba892e6..352ac719 100644
--- a/src/routes/invoice/[id]/+page.svelte
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { LottiePlayer } from '@lottiefiles/svelte-lottie-player';
 	import { get, post, reverseFormat } from '$lib/utils';
 	import { browser } from '$app/environment';
 	import { invoices, user } from '$lib/store';
@@ -324,7 +325,18 @@
 	</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" />
+		{#if typeof window !== 'undefined'}
+			<div class="w-full mx-auto max-w-xl">
+				<LottiePlayer
+					src="/lottie/success.json"
+					autoplay={true}
+					loop={true}
+					controls={false}
+					renderer="svg"
+					background="transparent"
+				/>
+			</div>
+		{/if}
 		<h1 class="text-3xl md:text-4xl font-bold mb-6">{$t('invoice.paymentSuccessful')}</h1>
 		<h2 class="text-2xl md:text-3xl font-semibold">
 			{totalAmountFormatted}
-- 
cgit v1.2.3