Added Pricing screen

.env

@@ -3,3 +3,4 @@ STRIPE_KEY=pk_test_51NzD5xFI67mXFum2XDMXiLu89SbCAMY5O0RnKjlU6XqyfboRVvFHI3f5OJHa
 STRIPE_SECRET=sk_test_51NzD5xFI67mXFum2Lzi2JtR8Th9zuA3CnoKKkAaOBiHmiHDQdGt7Pruj1Z89e4nF5eVNStL866twJLoVBUgfiaxZ00yqst8gkh
 
 WEBHOOK_URL=http://localhost:3001/api/stripe
+NEXT_PUBLIC_APP_URL=http://localhost:3001

package.json

@@ -15,6 +15,8 @@
     "@stripe/stripe-js": "^2.1.7",
     "axios": "^1.5.1",
     "clsx": "^2.0.0",
+    "currency-symbol-map": "^5.1.0",
+    "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "next": "13.5.4",
     "react": "^18",
@@ -24,6 +26,7 @@
     "sharp": "^0.32.6"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.202",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

src/app/ar/price/page.tsx

@@ -0,0 +1,5 @@
+import Price from "@/templates/Price";
+
+export default function Page() {
+  return <Price language="ar" />;
+}

src/app/price/page.tsx

@@ -0,0 +1,5 @@
+import Price from "@/templates/Price";
+
+export default function Page() {
+	return <Price language="en" />;
+}

src/templates/Price.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { capitalize } from "lodash";
+import getSymbolFromCurrency from "currency-symbol-map";
+import clsx from "clsx";
+import Navbar from "@/components/Navbar";
+import Link from "next/link";
+import Footer from "@/components/Footer";
+
+type DurationUnit = "weeks" | "days" | "months" | "years";
+
+interface Package {
+  id: string;
+  currency: string;
+  duration: number;
+  duration_unit: DurationUnit;
+  price: number;
+}
+
+export default function Page({ language }: { language: "en" | "ar" }) {
+  const [payments, setPayments] = React.useState<Package[]>([]);
+  const getData = async () => {
+    // Fetch data from external API
+    const response = await fetch(
+      `${process.env.NEXT_PUBLIC_APP_URL}/api/packages`,
+      {
+        method: "GET",
+      }
+    );
+
+    if (response.status === 200) {
+      const payments = await response.json();
+      // Pass data to the page via props
+      setPayments(payments);
+      return;
+    }
+  };
+
+  React.useEffect(() => {
+    getData();
+  }, []);
+  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 px-8 flex flex-col items-center text-center gap-4">
+        <h2 className="text-3xl font-bold">Available Packages</h2>
+        <div className="grid grid-cols-2 gap-8">
+          {payments.map((p) => (
+            <div
+              key={p.id}
+              className={clsx(
+                "p-4 bg-white rounded-xl flex flex-col gap-6 items-start"
+              )}
+            >
+              <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}{" "}
+                  {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">
+                <span className="text-2xl">
+                  {p.price}
+                  {getSymbolFromCurrency(p.currency)}
+                </span>
+              </div>
+              <div className="flex flex-col gap-1 items-start">
+                <span>This includes:</span>
+                <ul className="flex flex-col items-start text-sm">
+                  <li>- Train your abilities for the IELTS exam</li>
+                  <li>- Gain insights into your weaknesses and strengths</li>
+                  <li>- Allow yourself to correctly prepare for the exam</li>
+                </ul>
+              </div>
+            </div>
+          ))}
+        </div>
+        <Link
+          className="transition ease-in-out duration-300 text-white hover:bg-mti-purple-dark hover:border-mti-purple-dark border border-mti-purple-light bg-mti-purple-light px-8 py-2 rounded-xl mb-8"
+          href={`${process.env.NEXT_PUBLIC_APP_URL}/register`}
+        >
+          Join us
+        </Link>
+      </section>
+      <Footer language={language} />
+    </main>
+  );
+}

yarn.lock

@@ -216,6 +216,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/lodash@^4.14.202":
+  version "4.14.202"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8"
+  integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==
+
 "@types/node@^20":
   version "20.8.3"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.8.3.tgz#c4ae2bb1cfab2999ed441a95c122bbbe1567a66d"
@@ -682,6 +687,11 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+currency-symbol-map@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/currency-symbol-map/-/currency-symbol-map-5.1.0.tgz#59531fbe977ba95e8d358e90e3c9e9053efb75ad"
+  integrity sha512-LO/lzYRw134LMDVnLyAf1dHE5tyO6axEFkR3TXjQIOmMkAM9YL6QsiUwuXzZAmFnuDJcs4hayOgyIYtViXFrLw==
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -1769,6 +1779,11 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"