From d57229175858bd526bfbb9d0dc75c375caaaa3cb Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.err@outlook.com>
Date: Thu, 1 Feb 2024 16:59:38 +0000
Subject: [PATCH] Removed the ENV variable use

---
 src/templates/Price.tsx | 146 ++++++++++++++++++----------------------
 1 file changed, 64 insertions(+), 82 deletions(-)

diff --git a/src/templates/Price.tsx b/src/templates/Price.tsx
index 4ecff66..4529e07 100644
--- a/src/templates/Price.tsx
+++ b/src/templates/Price.tsx
@@ -2,7 +2,7 @@
 
 import React from "react";
 import Image from "next/image";
-import { capitalize } from "lodash";
+import {capitalize} from "lodash";
 import getSymbolFromCurrency from "currency-symbol-map";
 import clsx from "clsx";
 import Navbar from "@/components/Navbar";
@@ -13,90 +13,72 @@ import translation from "@/translation/price.json";
 type DurationUnit = "weeks" | "days" | "months" | "years";
 
 interface Package {
-  id: string;
-  currency: string;
-  duration: number;
-  duration_unit: DurationUnit;
-  price: number;
+	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",
-      }
-    );
+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(`https://platform.encoach.com/api/packages`, {
+			method: "GET",
+		});
 
-    if (response.status === 200) {
-      const payments = await response.json();
-      // Pass data to the page via props
-      setPayments(payments);
-      return;
-    }
-  };
+		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" />
+	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">{translation.title[language]}</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>{translation.packageIncludes[language]}</span>
-                <ul className="flex flex-col items-start text-sm">
-                  <li>- {translation.packageIncludesA[language]}</li>
-                  <li>- {translation.packageIncludesB[language]}</li>
-                  <li>- {translation.packageIncludesC[language]}</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`}
-        >
-          {translation.joinus[language]}
-        </Link>
-      </section>
-      <Footer language={language} />
-    </main>
-  );
+			<section className="w-full relative bg-white px-8 flex flex-col items-center text-center gap-4">
+				<h2 className="text-3xl font-bold">{translation.title[language]}</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>{translation.packageIncludes[language]}</span>
+								<ul className="flex flex-col items-start text-sm">
+									<li>- {translation.packageIncludesA[language]}</li>
+									<li>- {translation.packageIncludesB[language]}</li>
+									<li>- {translation.packageIncludesC[language]}</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`}>
+					{translation.joinus[language]}
+				</Link>
+			</section>
+			<Footer language={language} />
+		</main>
+	);
 }