Merge branch 'dev' into fix/contact-form-status-message

hngprojects · Aug 16, 2024 · 95637e4 · 95637e4
2 parents 46879d1 + ebec565
commit 95637e4
Show file tree

Hide file tree

Showing 6 changed files with 413 additions and 108 deletions.
diff --git a/src/app/(landing-routes)/(home)/payment/success/CheckSuccess.tsx b/src/app/(landing-routes)/(home)/payment/success/CheckSuccess.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import axios from "axios";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+
+import { getApiUrl } from "~/actions/getApiUrl";
+
+function CheckSuccess() {
+  const [loading, setLoading] = useState(true);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const searchParameters = useSearchParams();
+  const sessionId = searchParameters.get("session_id");
+
+  useEffect(() => {
+    const checkPaymentStatus = async () => {
+      try {
+        const apiUrl = await getApiUrl();
+        const response = await axios.get(
+          `${apiUrl}/api/v1/payment/stripe/status?session_id=${sessionId}`,
+          {
+            headers: {
+              "ngrok-skip-browser-warning": "true",
+            },
+          },
+        );
+
+        if (response.data.status === "SUCCESS") {
+          setIsSuccess(true);
+        }
+      } catch {
+        throw new Error("An error occured");
+      } finally {
+        setLoading(false);
+      }
+    };
+    checkPaymentStatus();
+  }, [sessionId]);
+
+  return (
+    <>
+      <div className="container mx-auto px-4">
+        <div className="flex justify-center py-20">
+          {loading && <div className="spinner-border animate-spin" />}
+          {!loading && (
+            <div className="flex max-w-max flex-col items-center">
+              {isSuccess ? (
+                <svg
+                  className="mb-2 h-16 w-16 text-green-600"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M5 13l4 4L19 7"
+                  ></path>
+                </svg>
+              ) : (
+                <svg
+                  className="mb-2 h-16 w-16 text-red-600"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth="2"
+                    d="M6 18L18 6M6 6l12 12"
+                  ></path>
+                </svg>
+              )}
+              <h3 className="mb-2 text-center text-2xl font-semibold">
+                {isSuccess ? "Payment done" : "Payment failed"}
+              </h3>
+              <p className="mb-10 text-lg">
+                {isSuccess
+                  ? "The transaction was successful"
+                  : "The transaction failed"}
+              </p>
+              <Link href="/">
+                <a className="rounded-full bg-orange-500 px-10 py-3 text-white hover:bg-orange-400 active:bg-orange-400">
+                  Explore App
+                </a>
+              </Link>
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default CheckSuccess;
diff --git a/src/app/(landing-routes)/(home)/payment/success/page.tsx b/src/app/(landing-routes)/(home)/payment/success/page.tsx
@@ -0,0 +1,13 @@
+import { Suspense } from "react";
+
+import CheckSuccess from "./CheckSuccess";
+
+function CheckSuccessPage() {
+  return (
+    <Suspense>
+      <CheckSuccess />
+    </Suspense>
+  );
+}
+
+export default CheckSuccessPage;
diff --git a/src/app/(landing-routes)/(home)/pricing/page.tsx b/src/app/(landing-routes)/(home)/pricing/page.tsx
@@ -2,6 +2,7 @@
 
 import axios from "axios";
 import { getCookie } from "cookies-next";
+import { useSession } from "next-auth/react";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
@@ -18,6 +19,9 @@ interface BillingPlan {
   id: string;
   name: string;
   price: string;
+  description: string;
+  features: string[];
+  duration: string;
 }
 
 const getAnnualPrice = (monthlyPrice: string) => {
@@ -27,6 +31,7 @@ const getAnnualPrice = (monthlyPrice: string) => {
 };
 
 export default function Pricing() {
+  const { data: session } = useSession();
   const [toggle, setToggle] = useState(1);
   const [plans, setPlans] = useState<BillingPlan[]>([]);
   const [loading, setLoading] = useState(true);
@@ -38,9 +43,12 @@ export default function Pricing() {
     const fetchPlans = async () => {
       try {
         const apiUrl = await getApiUrl();
-        const response = await axios.get(`${apiUrl}/api/v1/billing-plans`, {
+        const access_token = session?.access_token;
+        const response = await axios.get(`${apiUrl}/api/v1/payment/plans`, {
           headers: {
+            Authorization: `Bearer ${access_token}`,
             ...(locale ? { "Accept-Language": locale } : {}),
+            "ngrok-skip-browser-warning": "true",
           },
         });
         setPlans(response.data.data);
@@ -52,9 +60,7 @@ export default function Pricing() {
     };
 
     fetchPlans();
-  }, [locale]);
-
-  //
+  }, [session, locale]);
 
   return (
     <>
@@ -143,88 +149,44 @@ export default function Pricing() {
                     className="mb-[46px] text-[14px]"
                     data-testid={`${plan.name.toLowerCase()}-description`}
                   >
-                    {t("essentials")}
+                    {plan.description}
                   </p>
-
-                  <div
-                    className="text-md mb-3 flex items-center gap-3"
-                    data-testid={`${plan.name.toLowerCase()}-feature-1`}
-                  >
-                    <Image
-                      src="/images/checkmark.svg"
-                      alt=""
-                      height={20}
-                      width={20}
-                    />
-                    {t("features.feature1")}
-                  </div>
-                  <div
-                    className="text-md mb-3 flex items-center gap-3"
-                    data-testid={`${plan.name.toLowerCase()}-feature-2`}
-                  >
-                    <Image
-                      src="/images/checkmark.svg"
-                      alt=""
-                      height={20}
-                      width={20}
-                    />
-                    {t("features.feature2")}
-                  </div>
-                  <div
-                    className="text-md mb-3 flex items-center gap-3"
-                    data-testid={`${plan.name.toLowerCase()}-feature-3`}
-                  >
-                    <Image
-                      src="/images/checkmark.svg"
-                      alt=""
-                      height={20}
-                      width={20}
-                    />
-                    {t("features.feature3")}
-                  </div>
-                  <div
-                    className="text-md mb-3 flex items-center gap-3"
-                    data-testid={`${plan.name.toLowerCase()}-feature-4`}
-                  >
-                    <Image
-                      src="/images/checkmark.svg"
-                      alt=""
-                      height={20}
-                      width={20}
-                    />
-                    {t("features.feature4")}
-                  </div>
-                  <div
-                    className="text-md mb-3 flex items-center gap-3"
-                    data-testid={`${plan.name.toLowerCase()}-feature-5`}
-                  >
-                    <Image
-                      src="/images/checkmark.svg"
-                      alt=""
-                      height={20}
-                      width={20}
-                    />
-                    {t("features.feature5")}
-                  </div>
-                  <div
-                    className="text-md mb-3 flex items-center gap-3"
-                    data-testid={`${plan.name.toLowerCase()}-feature-6`}
-                  >
-                    <Image
-                      src="/images/checkmark.svg"
-                      alt=""
-                      height={20}
-                      width={20}
-                    />
-                    {t("features.feature6")}
-                  </div>
-                  <Button
-                    size="lg"
-                    className="mt-[51px] w-full bg-primary text-background hover:bg-destructive"
-                    data-testid={`${plan.name.toLowerCase()}-button`}
+                  {plan.features.map((feature, index) => {
+                    return (
+                      <div
+                        key={index}
+                        className="text-md mb-3 flex items-center gap-3"
+                        data-testid={`${plan.name.toLowerCase()}-feature-${index + 1}`}
+                      >
+                        <Image
+                          src="/images/checkmark.svg"
+                          alt="check icon"
+                          height={20}
+                          width={20}
+                        />
+                        {feature}
+                      </div>
+                    );
+                  })}
+
+                  <Link
+                    href={{
+                      pathname: "/pricing/upgrade-plan",
+                      query: {
+                        planName: plan.name,
+                        price: plan.price,
+                        interval: plan.duration,
+                      },
+                    }}
                   >
-                    {t("features.continue")}
-                  </Button>
+                    <Button
+                      size="lg"
+                      className="mt-[51px] w-full bg-primary text-background hover:bg-destructive"
+                      data-testid={`${plan.name.toLowerCase()}-button`}
+                    >
+                      {t("features.continue")}
+                    </Button>
+                  </Link>
                 </div>
               ))}
             </div>

diff --git a/src/app/(landing-routes)/(home)/pricing/upgrade-plan/page.tsx b/src/app/(landing-routes)/(home)/pricing/upgrade-plan/page.tsx
@@ -0,0 +1,13 @@
+import { Suspense } from "react";
+
+import Upgrade from "./upgrade";
+
+function UpgradePage() {
+  return (
+    <Suspense>
+      <Upgrade />
+    </Suspense>
+  );
+}
+
+export default UpgradePage;