fix: subscription route,pricing usecaseshandle, UI updates

Author: amitjimiwal

.env.example

@@ -0,0 +1,4 @@
+VITE_APP_BACKEND_BASE_URL=""
+VITE_APP_FRONTEND_BASE_URL=""
+VITE_APP_ENV=development | production
+VITE_WS_URL=""

src/components/Pricing.tsx

@@ -1,24 +1,28 @@
 import handleCheckout from "@/api/payment/handleCheckout";
 import { Button } from "@/components/ui/button";
+import { useAuthStatus } from "@/hooks/useAuthStatus";
 import { useSubscription } from "@/hooks/useSubscription";
-import { SVGProps, useEffect, useRef } from "react";
+import { SVGProps, useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { useLocation, useNavigate } from "react-router-dom";
 
 export default function Pricing() {
   const {isProUser}=useSubscription();
-  const sessionUrl=useRef<string>("");
+  const {status}=useAuthStatus();
+  const [sessionUrl,setSessionUrl]=useState<string>("");
   const { search } = useLocation();
   const params = new URLSearchParams(search);
   const navigate = useNavigate();
   useEffect(() => {
-    handleCheckout().then((redirect_url) => {
-      console.log(redirect_url);
-      sessionUrl.current = redirect_url;
-    }).catch(() => {
-      toast.error("Error in Generating you session Url");
-    });
-  }, []);
+    if(status){
+      handleCheckout().then((redirect_url) => {
+        console.log(redirect_url);
+        setSessionUrl(redirect_url);
+      }).catch(() => {
+        toast.error("Error in Generating you session Url");
+      });
+    }
+  }, [status]);
   if (params.get("success") == "true") {
     toast.success("Payment SuccessFul");
     setTimeout(() => {
@@ -71,10 +75,14 @@ export default function Pricing() {
           <Button
             className="w-full bg-gradient-to-r from-pink-500 to-purple-500"
             onClick={() => {
-              window.location.href=sessionUrl.current;
+              if(!status){
+                navigate("/login");
+              }else{
+                window.location.href=sessionUrl;
+              }
             }}
           >
-            {isProUser ? "Manage Subscription" : "Subscribe Now"}
+            { (status && isProUser) ? "Manage Subscription" : "Subscribe Now"}
           </Button>
         </div>
       </div>

src/components/Typing/Control.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import DashboardIcon from "./DashboardIcon";
 
 const Control = () => {
   return (
@@ -7,16 +8,17 @@ const Control = () => {
         <img src="/logo.png" alt="Typesight Logo" className="h-10 w-10" />
         TypeSight
       </h1>
-      <div className="flex justify-end gap-5">
-        {/* <select className="px-3 rounded-xl bg-white text-black">
+      <DashboardIcon />
+      {/* <div className="flex justify-end gap-5">
+        <select className="px-3 rounded-xl bg-white text-black">
           <option>30s</option>
           <option>60s</option>
-        </select> */}
-        {/* <select className="px-3 rounded-xl bg-white text-black">
+        </select>
+        <select className="px-3 rounded-xl bg-white text-black">
           <option>words</option>
           <option>sentences</option>
-        </select> */}
-      </div>
+        </select>
+      </div> */}
     </nav>
   );
 };

src/components/Typing/DashboardIcon.tsx

@@ -0,0 +1,29 @@
+import { useAuthStatus } from "@/hooks/useAuthStatus";
+import { SVGProps } from "react";
+import { useNavigate } from "react-router-dom";
+
+const DashboardIcon = () => {
+  const navigate = useNavigate();
+  const { status, user } = useAuthStatus();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="48"
+      height="48"
+      id="dashboard"
+      onClick={() => {
+          if(!status){
+              navigate("/login");
+          }else{
+                 navigate(`/dashboard/${user?.id}`);
+          }
+      }}
+      className="cursor-pointer bg-white text-lg"
+    >
+      <path fill="none" d="M0 0h48v48H0z"></path>
+      <path d="M6 26h16V6H6v20zm0 16h16V30H6v12zm20 0h16V22H26v20zm0-36v12h16V6H26z"></path>
+    </svg>
+  );
+};
+
+export default DashboardIcon;

src/components/Typing/Typing.tsx

@@ -4,10 +4,10 @@ import sentence from '@/lib/data/sentences.json';
 export default function shuffleWords(preference: string) {
      switch (preference) {
           case 'words':
-               return _.shuffle(word).slice(0, 50);
+               return _.shuffle(word).slice(0, 70);
           case 'sentences':
-               return _.shuffle(sentence).slice(0, 50);
+               return _.shuffle(sentence).slice(0, 70);
           default:
-               return _.shuffle(word).slice(0, 50);
+               return _.shuffle(word).slice(0, 70);
      }
 }

src/components/Typing/TypingFooter.tsx

@@ -45,6 +45,12 @@ export default function Component() {
         <div className="flex flex-col flex-1">
           <header className="h-16 px-4 border-b shrink-0 md:px-6 flex items-center">
             <div className="flex items-center justify-end w-full gap-4 md:ml-auto md:gap-2 lg:gap-4">
+            <Link
+                  className="text-gray-600 hover:text-gray-900 dark:text-gray-200"
+                  to="/test"
+                >
+                  Test
+                </Link>
               {!isProUser && (
                 <Link
                   className="text-gray-600 hover:text-gray-900 dark:text-gray-200"

src/lib/helpers/shufflewords.ts

@@ -24,7 +24,7 @@ const initialState: SubscriptionState = {
 };
 export const getSubscriptionInfo = createAsyncThunk("mySubscription", async (_, { rejectWithValue }) => {
      try {
-          const data = await axiosClient.get(`/mysubscription`);
+          const data = await axiosClient.get(`/pro/mysubscription`);
           return data;
      } catch (error) {
           const err = error as AxiosError;
@@ -54,5 +54,4 @@ const resultSlice = createSlice({
           });
      },
 })
-
 export default resultSlice.reducer;