added internationalization to pages [WIP]

pages/subscribe.tsx

@@ -1,12 +1,18 @@
 import { signOut, useSession } from "next-auth/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useRouter } from "next/router";
 import CenteredForm from "@/layouts/CenteredForm";
 import { Plan } from "@/types/global";
 import AccentSubmitButton from "@/components/ui/Button";
+import getServerSideProps from "@/lib/client/getServerSideProps";
+import { Trans, useTranslation } from "next-i18next";
+import useAccountStore from "@/store/account";
+
+const stripeEnabled = process.env.NEXT_PUBLIC_STRIPE === "true";
 
 export default function Subscribe() {
+  const { t } = useTranslation();
   const [submitLoader, setSubmitLoader] = useState(false);
   const session = useSession();
 
@@ -14,10 +20,21 @@ export default function Subscribe() {
 
   const router = useRouter();
 
+  const { account } = useAccountStore();
+
+  useEffect(() => {
+    const hasInactiveSubscription =
+      account.id && !account.subscription?.active && stripeEnabled;
+
+    if (session.status === "authenticated" && !hasInactiveSubscription) {
+      router.push("/dashboard");
+    }
+  }, [session.status]);
+
   async function submit() {
     setSubmitLoader(true);
 
-    const redirectionToast = toast.loading("Redirecting to Stripe...");
+    const redirectionToast = toast.loading(t("redirecting_to_stripe"));
 
     const res = await fetch("/api/v1/payment?plan=" + plan);
     const data = await res.json();
@@ -33,18 +50,24 @@ export default function Subscribe() {
     >
       <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
         <p className="sm:text-3xl text-2xl text-center font-extralight">
-          Subscribe to Linkwarden!
+          {t("subscribe_title")}
         </p>
 
         <div className="divider my-0"></div>
 
         <div>
           <p>
-            You will be redirected to Stripe, feel free to reach out to us at{" "}
-            <a className="font-semibold" href="mailto:support@linkwarden.app">
-              support@linkwarden.app
-            </a>{" "}
-            in case of any issue.
+            <Trans
+              i18nKey="subscribe_desc"
+              components={[
+                <a
+                  className="font-semibold"
+                  href="mailto:support@linkwarden.app"
+                >
+                  support@linkwarden.app
+                </a>,
+              ]}
+            />
           </p>
         </div>
 
@@ -57,7 +80,7 @@ export default function Subscribe() {
                 : "hover:opacity-80"
             }`}
           >
-            <p>Monthly</p>
+            <p>{t("monthly")}</p>
           </button>
 
           <button
@@ -68,10 +91,12 @@ export default function Subscribe() {
                 : "hover:opacity-80"
             }`}
           >
-            <p>Yearly</p>
+            <p>{t("yearly")}</p>
           </button>
           <div className="absolute -top-3 -right-4 px-1 bg-red-600 text-sm text-white rounded-md rotate-[22deg]">
-            25% Off
+            {t("discount_percent", {
+              percent: 25,
+            })}
           </div>
         </div>
 
@@ -81,18 +106,25 @@ export default function Subscribe() {
             <span className="text-base text-neutral">/mo</span>
           </p>
           <p className="font-semibold">
-            Billed {plan === Plan.monthly ? "Monthly" : "Yearly"}
+            {plan === Plan.monthly ? t("billed_monthly") : t("billed_yearly")}
           </p>
           <fieldset className="w-full flex-col flex justify-evenly px-4 pb-4 pt-1 rounded-md border border-neutral-content">
             <legend className="w-fit font-extralight px-2 border border-neutral-content rounded-md text-xl">
-              Total
+              {t("total")}
             </legend>
 
             <p className="text-sm">
-              {process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS}-day free trial, then $
-              {plan === Plan.monthly ? "4 per month" : "36 annually"}
+              {plan === Plan.monthly
+                ? t("total_monthly_desc", {
+                    count: Number(process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS),
+                    monthlyPrice: "4",
+                  })
+                : t("total_annual_desc", {
+                    count: Number(process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS),
+                    annualPrice: "36",
+                  })}
             </p>
-            <p className="text-sm">+ VAT if applicable</p>
+            <p className="text-sm">{t("plus_tax")}</p>
           </fieldset>
         </div>
 
@@ -103,16 +135,18 @@ export default function Subscribe() {
           onClick={submit}
           loading={submitLoader}
         >
-          Complete Subscription!
+          {t("complete_subscription")}
         </AccentSubmitButton>
 
         <div
           onClick={() => signOut()}
           className="w-fit mx-auto cursor-pointer text-neutral font-semibold "
         >
-          Sign Out
+          {t("sign_out")}
         </div>
       </div>
     </CenteredForm>
   );
 }
+
+export { getServerSideProps };