From a6f0750c668da61bbd863a9eccdbf65f8d9bd16d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=B5=D0=BD=D0=B8=D1=81=20=D0=9A=D0=B0=D1=82=D0=B0?=
 =?UTF-8?q?=D0=B5=D0=B2?= <itkataev@gmail.com>
Date: Mon, 4 Dec 2023 20:02:21 +0000
Subject: [PATCH] Clone

---
 src/components/App/index.tsx              |  4 +++-
 src/components/SubscriptionPage/index.tsx | 18 +++++++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/App/index.tsx b/src/components/App/index.tsx
index 9a1666a..4a51a86 100644
--- a/src/components/App/index.tsx
+++ b/src/components/App/index.tsx
@@ -190,7 +190,9 @@ function App(): JSX.Element {
           <Route
             path={routes.client.subscription()}
             element={<SubscriptionPage />}
-          />
+          >
+            <Route path=":subPlan" element={<SubscriptionPage />} />
+          </Route>
         </Route>
         <Route element={<PrivateOutlet />}>
           <Route element={<AuthorizedUserOutlet />}>
diff --git a/src/components/SubscriptionPage/index.tsx b/src/components/SubscriptionPage/index.tsx
index 2389b90..eb2495c 100644
--- a/src/components/SubscriptionPage/index.tsx
+++ b/src/components/SubscriptionPage/index.tsx
@@ -1,6 +1,6 @@
 import { useDispatch, useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { actions, selectors } from "@/store";
 import MainButton from "../MainButton";
 import Policy from "../Policy";
@@ -51,14 +51,22 @@ function SubscriptionPage(): JSX.Element {
   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 queryParameters = new URLSearchParams(window.location.search);
+  // const sub_plan = queryParameters.get("sub_plan") || "";
+  const { subPlan } = useParams();
 
   const activeSubPlanFromStore = useSelector(selectors.selectActiveSubPlan);
   let activeSubPlan;
 
-  if (sub_plan) {
-    const targetSubPlan = subPlans.find((subPlan) => subPlan.id === sub_plan);
+  if (subPlan) {
+    const targetSubPlan = subPlans.find(
+      (sub_plan) =>
+        String(
+          sub_plan.trial?.price_cents
+            ? Math.floor(sub_plan.trial?.price_cents / 100)
+            : sub_plan.id.replace(".", "")
+        ) === subPlan
+    );
     if (targetSubPlan) {
       activeSubPlan = targetSubPlan;
     }