feat: some edits

src/components/App/index.tsx

@@ -240,10 +240,7 @@ function App(): JSX.Element {
           path={routes.client.emailConfirm()}
           element={<EmailConfirmPage />}
         />
-        <Route
+        <Route path={routes.client.onboarding()} element={<OnboardingPage />} />
-          path={routes.client.onboarding()}
-          element={<OnboardingPage />}
-        />
         <Route
           path={routes.client.trialChoice()}
           element={<TrialChoicePage />}
@@ -251,7 +248,9 @@ function App(): JSX.Element {
         <Route
           path={routes.client.trialPayment()}
           element={<TrialPaymentPage />}
-        />
+        >
+          <Route path=":subPlan" element={<TrialPaymentPage />} />
+        </Route>
         {/* Test Routes End */}
 
         <Route

src/components/PlacePicker/styles.module.css

@@ -10,4 +10,5 @@
   border-radius: 25px;
   padding: 10px 15px;
   line-height: 24px;
+  font-size: 16px;
 }

src/components/pages/TrialChoice/index.tsx

@@ -79,7 +79,7 @@ function TrialChoicePage() {
           classNameItemActive={styles["price-item-active"]}
           click={handlePriceItem}
         />
-        <p className={styles["auxiliary-text"]} style={{ maxWidth: "272px" }}>
+        <p className={styles["auxiliary-text"]} style={{ maxWidth: "75%" }}>
           This option will help us support those who need to select the lowest
           trial prices!
         </p>

src/components/pages/TrialPayment/components/PaymentTable/index.tsx

@@ -41,10 +41,10 @@ function PaymentTable({ subPlan, buttonClick }: IPaymentTableProps) {
       <GuardPayments />
       <p className={styles.policy}>
         You are enrolling in 2 weeks subscription. By continuing you agree that
-        if you don't cancel prior to the end of the 7-day trial for the $5 you
+        if you don't cancel prior to the end of the 3-day trial for the $
-        will automatically be charged $29 every 2 weeks until you cancel in
+        {getPriceFromTrial(subPlan?.trial)} you will automatically be charged
-        settings. Learn more about cancellation and refund policy in{" "}
+        $19 every 2 weeks until you cancel in settings. Learn more about
-        <a href="#">Subscription policy</a>
+        cancellation and refund policy in <a href="#">Subscription policy</a>
       </p>
     </>
   );

src/components/pages/TrialPayment/components/PersonalInformation/index.tsx

@@ -18,7 +18,7 @@ function PersonalInformation({
     <div className={styles["personal-information"]}>
       <div className={styles["image-container"]}>
         <img
-          src={`/questionnaire/zodiacs/${gender}/${zodiacSign.toLowerCase()}.webp`}
+          src={`/questionnaire/zodiacs/${gender}/${zodiacSign?.toLowerCase()}.webp`}
           alt={`${gender} ${zodiacSign}`}
         />
       </div>

src/components/pages/TrialPayment/components/YourReading/index.tsx

@@ -16,7 +16,7 @@ function YourReading({ gender, zodiacSign, buttonClick }: IYourReadingProps) {
       </Title>
       <div className={styles["image-container"]}>
         <img
-          src={`/questionnaire/zodiacs/${gender}/${zodiacSign.toLowerCase()}.webp`}
+          src={`/questionnaire/zodiacs/${gender}/${zodiacSign?.toLowerCase()}.webp`}
           alt={`${gender} ${zodiacSign}`}
         />
       </div>

src/components/pages/TrialPayment/components/YourReading/styles.module.css

@@ -111,6 +111,7 @@
     rgba(251, 251, 255, 0.14) 75%,
     rgba(251, 251, 255, 0.196) 89.58%
   );
+  -webkit-backdrop-filter: blur(1.5px);
   backdrop-filter: blur(1.5px);
   border-radius: 20px;
   height: 100%;

src/components/pages/TrialPayment/index.tsx

@@ -6,25 +6,79 @@ import Goal from "./components/Goal";
 import PaymentTable from "./components/PaymentTable";
 import { useSelector } from "react-redux";
 import { selectors } from "@/store";
-import { Navigate, useNavigate } from "react-router-dom";
+import { Navigate, useNavigate, useParams } from "react-router-dom";
 import routes from "@/routes";
 import { getZodiacSignByDate } from "@/services/zodiac-sign";
 import YourReading from "./components/YourReading";
 import Reviews from "./components/Reviews";
 import YouGet from "./components/YouGet";
 import OftenAsk from "./components/OftenAsk";
+import { ISubscriptionPlan } from "@/api/resources/SubscriptionPlans";
+import { useEffect, useState } from "react";
+import { useApi } from "@/api";
+import { getClientLocale } from "@/locales";
+import { Locale } from "@/components/PaymentTable";
+
+const locale = getClientLocale() as Locale;
 
 function TrialPaymentPage() {
+  const api = useApi();
   const navigate = useNavigate();
-  const subPlan = useSelector(selectors.selectActiveSubPlan);
   const birthdate = useSelector(selectors.selectBirthdate);
   const zodiacSign = getZodiacSignByDate(birthdate);
   const { gender, birthPlace } = useSelector(selectors.selectQuestionnaire);
+  const [subPlans, setSubPlans] = useState<ISubscriptionPlan[]>([]);
+  const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan);
+  const [activeSubPlan, setActiveSubPlan] = useState<ISubscriptionPlan | null>(
+    activeSubPlanFromStore
+  );
+  const { subPlan } = useParams();
 
-  if (!subPlan) {
+  useEffect(() => {
+    (async () => {
+      const { sub_plans } = await api.getSubscriptionPlans({ locale });
+      const plans = sub_plans
+        .filter((plan: ISubscriptionPlan) => plan.provider === "stripe")
+        .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]);
+
+  useEffect(() => {
+    if (subPlan) {
+      const targetSubPlan = subPlans.find(
+        (sub_plan) =>
+          String(
+            sub_plan?.trial?.price_cents
+              ? Math.floor((sub_plan?.trial?.price_cents + 1) / 100)
+              : sub_plan.id.replace(".", "")
+          ) === subPlan
+      );
+      if (targetSubPlan) {
+        setActiveSubPlan(targetSubPlan);
+      }
+    }
+  }, [subPlan, subPlans]);
+
+  if (!activeSubPlan) {
     return <Navigate to={routes.client.trialChoice()} />;
   }
 
+  if (!birthdate || !gender || !birthPlace) {
+    return <Navigate to={routes.client.gender()} />;
+  }
+
   const handleNext = () => {
     navigate(routes.client.paymentStripe());
   };
@@ -42,7 +96,7 @@ function TrialPaymentPage() {
         Your Personalized Clarity & Love Reading is ready!
       </Title>
       <Goal />
-      <PaymentTable subPlan={subPlan} buttonClick={handleNext} />
+      <PaymentTable subPlan={activeSubPlan} buttonClick={handleNext} />
       <YourReading
         gender={gender}
         zodiacSign={zodiacSign}
@@ -51,7 +105,7 @@ function TrialPaymentPage() {
       <Reviews />
       <YouGet />
       <OftenAsk />
-      <PaymentTable subPlan={subPlan} buttonClick={handleNext} />
+      <PaymentTable subPlan={activeSubPlan} buttonClick={handleNext} />
     </section>
   );
 }