Merged in bug-fixing-12-Feb-24 (pull request #6)

Bug fixing 12 Feb 24

Approved-by: Tiago Ribeiro

src/app/join/page.tsx

@@ -1,28 +0,0 @@
-/* eslint-disable @next/next/no-img-element */
-import Link from "next/link";
-import {BsInstagram, BsTwitter} from "react-icons/bs";
-import {BiLogoFacebook} from "react-icons/bi";
-import Navbar from "@/components/Navbar";
-import PricingTable from "@/components/PricingTable";
-import Footer from "@/components/Footer";
-
-export default function Home() {
-	return (
-		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
-			<Navbar currentPage="/join" language="en" />
-
-			<section className="w-full relative bg-white py-20 lg:py-48 px-8 flex flex-col items-center text-center gap-4">
-				<h2 className="text-3xl font-bold">Available Packages</h2>
-				<div className="flex flex-col gap-1">
-					<span className="max-w-lg">
-						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).</span>
-					<PricingTable />
-				</div>
-			</section>
-
-			<Footer language="en" />
-		</main>
-	);
-}

src/app/layout.tsx

@@ -26,9 +26,6 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
 					httpEquiv="Content-Security-Policy-Report-Only"
 					content="default-src 'self' *.stripe.com *.encoach.com staging.encoach.com localhost"
 				/>
-
-				<script async src="https://js.stripe.com/v3/pricing-table.js" />
-
 				<link rel="preconnect" href="https://fonts.googleapis.com" />
 				<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
 				<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap" rel="stylesheet" />

src/components/Navbar.tsx

@@ -130,11 +130,7 @@ export default function Navbar({currentPage, language}: {currentPage: string; la
 										))}
 										<Link
 											href="https://platform.encoach.com/register"
-											className={clsx(
+											className="w-fit transition duration-300 ease-in-out">
-												"w-fit transition duration-300 ease-in-out",
-												currentPage === "/join" &&
-													"text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
-											)}>
 											{translation.join[language]}
 										</Link>
 										<Link href="https://platform.encoach.com" className={clsx("w-fit transition duration-300 ease-in-out")}>

src/components/PricingTable.tsx

@@ -1,23 +0,0 @@
-"use client";
-
-import {Elements} from "@stripe/react-stripe-js";
-import {loadStripe} from "@stripe/stripe-js";
-
-const stripePromise = loadStripe(process.env.STRIPE_KEY || "");
-
-export default function PricingTable() {
-	return (
-		<Elements stripe={stripePromise}>
-			<stripe-pricing-table id="pricing" pricing-table-id={process.env.STRIPE_PRICING_TABLE} publishable-key={process.env.STRIPE_KEY} />
-		</Elements>
-	);
-}
-
-// If using TypeScript, add the following snippet to your file as well.
-declare global {
-	namespace JSX {
-		interface IntrinsicElements {
-			"stripe-pricing-table": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
-		}
-	}
-}

src/templates/Home.tsx

@@ -79,7 +79,7 @@ export default function Home({language}: Props) {
 							<Title>{translation.learn_ai.title[language]}</Title>
 							<p className="max-w-lg text-base">{translation.learn_ai.description[language]}</p>
 						</div>
-						<Link href="/join">
+						<Link href="/price">
 							<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">
 								{translation.learn_more[language]}
 							</button>

src/templates/Price.tsx

@@ -21,6 +21,28 @@ interface Package {
 }
 
 export default function Page({language}: {language: "en" | "ar"}) {
+	const getDurationUnit = (duration: number, durationUnitSingular: string, durationUnitPlural: string) => {
+		if(duration >= 2 && duration <= 10) {
+			return durationUnitPlural;
+		}
+
+		return durationUnitSingular;
+	}
+	const durationAndDurationUnitParser = (duration: number, duration_unit: DurationUnit) => {
+		if(language === 'ar') {
+			switch (duration_unit) {
+				case "days":
+					return `${duration} ${getDurationUnit(duration, translation.days.singular[language], translation.days.plural[language])}`;
+				case "weeks":
+					return `${duration} ${getDurationUnit(duration, translation.weeks.singular[language], translation.weeks.plural[language])}`;
+				case "months":
+					return `${duration} ${getDurationUnit(duration, translation.months.singular[language], translation.months.plural[language])}`;
+			}
+		}
+
+		return capitalize(duration === 1 ? duration_unit.slice(0, duration_unit.length - 1) : duration_unit);
+	}
+
 	const [payments, setPayments] = React.useState<Package[]>([]);
 	const getData = async () => {
 		// Fetch data from external API
@@ -50,8 +72,7 @@ export default function Page({language}: {language: "en" | "ar"}) {
 							<div className="flex flex-col items-start mb-2">
 								<Image src="/logo_title.png" alt="EnCoach's Logo" width={32} height={32} />
 								<span className="font-semibold text-xl">
-									EnCoach - {p.duration}{" "}
+									{translation.encoach[language]} - {durationAndDurationUnitParser(p.duration, p.duration_unit)}
-									{capitalize(p.duration === 1 ? p.duration_unit.slice(0, p.duration_unit.length - 1) : p.duration_unit)}
 								</span>
 							</div>
 							<div className="flex flex-col gap-2 items-start w-full">

src/translation/home.json

@@ -57,10 +57,6 @@
     "description": {
       "en": "Our algorithms provide speedy results and evaluate the test, providing a brief feedback on areas that are strong and the areas where improvement is needed. So there is no need to pay a hefty amount to a tutor and spend hours upon hours to review your performance. With EnCoach, you receive the evaluation within seconds.",
       "ar": "خوارزمياتنا توفر نتائج وتقييم سريع للاختبار، وتقدم ملاحظات موجزًة على الجوانب التي تتميز بها والجوانب التي تحتاج إلى تحسين. لذا ليس هناك حاجة لدفع مبلغ ضخم لمدرس وقضاء ساعات وساعات في مراجعة أدائك. مع إنكوتش، ستتلقى التقييم في غضون ثوانٍ."
-    },
-    "join": {
-      "en": "Join",
-      "ar": "انضم"
     }
   },
   "learn_more": {

src/translation/navbar.json

@@ -28,7 +28,7 @@
     "ar": "منصة انكوتش"
   },
   "join": {
-    "en": "Join",
+    "en": "Sign up",
     "ar": "انضم إلينا"
   }
 }

src/translation/price.json

@@ -1,6 +1,6 @@
 {
   "joinus": {
-    "en": "Join us",
+    "en": "Sign up",
     "ar": "انضم إلينا"
   },
   "title": {
@@ -22,5 +22,39 @@
   "packageIncludesC": {
     "en": "Allow yourself to correctly prepare for the exam",
     "ar": "امنح نفسك الفرصة للتحضير بشكل صحيح للإختبار"
+  },
+  "days": {
+    "singular": {
+      "en": "Day",
+      "ar": "يوم"
+    },
+    "plural": {
+      "en": "Days",
+      "ar": "أيام"
+    }
+  },
+  "weeks": {
+    "singular": {
+      "en": "Week",
+      "ar": "أسبوع"
+    },
+    "plural": {
+      "en": "Weeks",
+      "ar": "أسابيع"
+    }
+  },
+  "months": {
+    "singular": {
+      "en": "Month",
+      "ar": "شهر"
+    },
+    "plural": {
+      "en": "Months",
+      "ar": "شهور"
+    }
+  },
+  "encoach": {
+    "en": "EnCoach",
+    "ar": "إنكوتش"
   }
 }