From 1a588b3cb64f1b91360a50ef2604a149e7cc2e7f Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.err@outlook.com>
Date: Fri, 13 Oct 2023 20:46:15 +0100
Subject: [PATCH] Updated the success page

---
 src/app/join/page.tsx    |  7 ++++++-
 src/app/page.tsx         |  4 +++-
 src/app/success/page.tsx | 36 ++++++++++++++++++++++++++++++++----
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/app/join/page.tsx b/src/app/join/page.tsx
index af3ffe1..b91b76a 100644
--- a/src/app/join/page.tsx
+++ b/src/app/join/page.tsx
@@ -29,7 +29,9 @@ export default function Home() {
 			<script async src="https://js.stripe.com/v3/pricing-table.js" />
 			<main className="h-screen w-full bg-white text-mti-black flex flex-col">
 				<header className="w-full px-11 py-3 flex justify-between items-center">
-					<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
+					<Link href="/">
+						<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
+					</Link>
 					<div className="flex gap-8 items-center w-fit">
 						<Link href="/" className="border-b-2 border-b-mti-purple-light transition ease-in-out duration-300">
 							Home
@@ -63,6 +65,9 @@ export default function Home() {
 							Please select a page. Once the payment process is complete, you will receive a code via e-mail to register to the
 							application.
 						</span>
+						<span className="max-w-lg">
+							(Or have time added to your account, if already registered with the given e-mail during the payment process).
+						</span>
 						<span>
 							If you already have a code, please register{" "}
 							<Link
diff --git a/src/app/page.tsx b/src/app/page.tsx
index b573cd8..063001f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -20,7 +20,9 @@ export default function Home() {
 	return (
 		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
 			<header className="w-full px-11 py-3 flex justify-between items-center">
-				<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
+				<Link href="/">
+					<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
+				</Link>
 				<div className="flex gap-8 items-center w-fit">
 					<Link href="/" className="border-b-2 border-b-mti-purple-light transition ease-in-out duration-300">
 						Home
diff --git a/src/app/success/page.tsx b/src/app/success/page.tsx
index 884e3d5..c292196 100644
--- a/src/app/success/page.tsx
+++ b/src/app/success/page.tsx
@@ -4,6 +4,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import {
+	BsArrowRepeat,
 	BsBookFill,
 	BsCardChecklist,
 	BsClipboardFill,
@@ -22,7 +23,7 @@ import axios from "axios";
 
 export default function Home() {
 	const [isValid, setIsValid] = useState(true);
-	const [isLoading, setIsLoading] = useState(true);
+	const [isLoading, setIsLoading] = useState(false);
 
 	useEffect(() => {
 		(async () => {
@@ -43,7 +44,6 @@ export default function Home() {
 				return;
 			}
 
-			console.log("ERROR");
 			setIsValid(false);
 			setIsLoading(false);
 		})();
@@ -52,7 +52,9 @@ export default function Home() {
 	return (
 		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
 			<header className="w-full px-11 py-3 flex justify-between items-center">
-				<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
+				<Link href="/">
+					<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
+				</Link>
 				<div className="flex gap-8 items-center w-fit">
 					<Link href="/" className="border-b-2 border-b-mti-purple-light transition ease-in-out duration-300">
 						Home
@@ -79,7 +81,33 @@ export default function Home() {
 				</div>
 			</header>
 
-			<section className="w-full relative bg-white py-48 flex flex-col items-center text-center gap-4"></section>
+			<section className="w-full h-full relative bg-white py-32 flex flex-col items-center justify-center text-center gap-4">
+				{isLoading && (
+					<div className="flex items-center justify-center flex-col gap-8">
+						<BsArrowRepeat className="text-mti-purple-light animate-spin" size={48} />
+						<h2 className="text-xl font-bold">Loading...</h2>
+					</div>
+				)}
+				{!isLoading && (
+					<div className="flex items-center justify-center flex-col gap-8">
+						<div className="flex flex-col gap-1">
+							<h1 className="text-xl font-bold">Congratulations!</h1>
+							<span className="text-xl font-bold">You are now a member at EnCoach!</span>
+						</div>
+						<div className="flex flex-col gap-1">
+							<span>
+								You should receive an e-mail in your inbox (make sure to check your spam folder) with a code to register to the app
+							</span>
+							<span>Or, if already registered, more time should have been added to your account</span>
+						</div>
+						<Link href="https://encoach.com">
+							<button className="bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
+								Get ready to train for your IELTS exam!
+							</button>
+						</Link>
+					</div>
+				)}
+			</section>
 
 			<section className="w-full py-10 px-28 bg-mti-gray-seasalt grid grid-cols-4">
 				<div className="flex flex-col gap-4">