Clone

src/components/SubscriptionPage/index.tsx

@@ -8,10 +8,10 @@ import PaymentTable, { Currency, Locale } from "../PaymentTable";
 import CallToAction from "../CallToAction";
 import routes from "@/routes";
 import styles from "./styles.module.css";
-import Header from "../Header";
+// import Header from "../Header";
-import SpecialWelcomeOffer from "../SpecialWelcomeOffer";
+// import SpecialWelcomeOffer from "../SpecialWelcomeOffer";
-import { useState } from "react";
+import { useEffect, useState } from "react";
-import { ITrial } from "@/api/resources/SubscriptionPlans";
+import { ISubscriptionPlan, ITrial } from "@/api/resources/SubscriptionPlans";
 import { ApiError, extractErrorMessage, useApi } from "@/api";
 import { useAuth } from "@/auth";
 import { getClientLocale, getClientTimezone } from "@/locales";
@@ -36,7 +36,7 @@ function SubscriptionPage(): JSX.Element {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const dispatch = useDispatch();
-  const [isOpenModal, setIsOpenModal] = useState(false);
+  // const [isOpenModal, setIsOpenModal] = useState(false);
   const [email, setEmail] = useState("");
   const [emailError, setEmailError] = useState<null | string>(
     "Email is invalid"
@@ -48,8 +48,24 @@ function SubscriptionPage(): JSX.Element {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [apiError, setApiError] = useState<ApiError | null>(null);
   const [error, setError] = useState<boolean>(false);
-  const activeSubPlan = useSelector(selectors.selectActiveSubPlan);
+  const [subPlans, setSubPlans] = useState<ISubscriptionPlan[]>([]);
   const birthday = useSelector(selectors.selectBirthday);
+
+  const queryParameters = new URLSearchParams(window.location.search);
+  const sub_plan = queryParameters.get("sub_plan") || "";
+
+  const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan);
+  let activeSubPlan;
+
+  if (sub_plan) {
+    const targetSubPlan = subPlans.find((subPlan) => subPlan.id === sub_plan);
+    if (targetSubPlan) {
+      activeSubPlan = targetSubPlan;
+    }
+  } else {
+    activeSubPlan = activeSubPlanFromStore;
+  }
+
   const paymentItems = [
     {
       title: activeSubPlan?.name || "Per 7-Day Trial For",
@@ -106,7 +122,7 @@ function SubscriptionPage(): JSX.Element {
     console.log("sdvdvsdv");
     // navigate(routes.client.paymentMethod())
   };
-  const handleCross = () => setIsOpenModal(true);
+  // const handleCross = () => setIsOpenModal(true);
   const policyLink = (
     <a href="https://aura.wit.life/" target="_blank" rel="noopener noreferrer">
       {t("subscription_policy")}
@@ -141,10 +157,33 @@ function SubscriptionPage(): JSX.Element {
     setName(name);
   };
 
+  useEffect(() => {
+    (async () => {
+      const { sub_plans } = await api.getSubscriptionPlans({ locale });
+      const plans = sub_plans
+        .filter(
+          (plan: ISubscriptionPlan) => plan.provider === "stripe" && plan.trial
+        )
+        .sort((a, b) => {
+          if (!a.trial || !b.trial) {
+            return 0;
+          }
+          if (a.trial.price_cents < b.trial.price_cents) {
+            return -1;
+          }
+          if (a.trial.price_cents > b.trial.price_cents) {
+            return 1;
+          }
+          return 0;
+        });
+      setSubPlans(plans);
+    })();
+  }, [api]);
+
   return (
     <>
-      <SpecialWelcomeOffer open={isOpenModal} onClose={handleClick} />
+      {/* <SpecialWelcomeOffer open={isOpenModal} onClose={handleClick} /> */}
-      <Header classCross={styles.cross} clickCross={handleCross} />
+      {/* <Header classCross={styles.cross} clickCross={handleCross} /> */}
       {/* <UserHeader email={email} /> */}
       <section className={`${styles.page} page`}>
         <CallToAction />