From c2cc17d19d7d09db390c540624e2b46ef1ca9d51 Mon Sep 17 00:00:00 2001
From: Alexander Alemayhu <alexander@alemayhu.com>
Date: Sun, 7 Jul 2024 08:47:58 +0200
Subject: [PATCH] feat: show Stripe link only to logged in users (#560)

Should reduce premature purchases that cause email linking issues.
---
 src/components/NavigationBar/NavigationBar.tsx | 8 ++++----
 src/lib/useIsLoggedIn.ts                       | 6 ++++++
 src/pages/PricingPage/PricingPage.tsx          | 6 +++++-
 3 files changed, 15 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/useIsLoggedIn.ts

diff --git a/src/components/NavigationBar/NavigationBar.tsx b/src/components/NavigationBar/NavigationBar.tsx
index 5fc93b3..a4b3147 100644
--- a/src/components/NavigationBar/NavigationBar.tsx
+++ b/src/components/NavigationBar/NavigationBar.tsx
@@ -1,17 +1,17 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { useState } from 'react';
-import { useCookies } from 'react-cookie';
 
 import { Navbar } from './styled';
 import { RightSide } from './components/RightSide';
 import useNavbarEnd from './helpers/useNavbarEnd';
 import { get2ankiApi } from '../../lib/backend/get2ankiApi';
+import { useIsLoggedIn } from '../../lib/useIsLoggedIn';
 
 function NavigationBar() {
-  const [cookies] = useCookies(['token']);
   const [active, setActive] = useState(false);
   const path = window.location.pathname;
   const loggedInNavbar = useNavbarEnd(path, get2ankiApi());
+  const isLoggedIn = useIsLoggedIn();
 
   return (
     <Navbar
@@ -44,8 +44,8 @@ function NavigationBar() {
         id="navbar"
         className={`is-flex-grow-0	navbar-menu ${active ? 'is-active' : ''}`}
       >
-        {cookies.token && loggedInNavbar}
-        {!cookies.token && <RightSide path={path} />}
+        {isLoggedIn && loggedInNavbar}
+        {!isLoggedIn && <RightSide path={path} />}
       </div>
 
     </Navbar>
diff --git a/src/lib/useIsLoggedIn.ts b/src/lib/useIsLoggedIn.ts
new file mode 100644
index 0000000..a45f6af
--- /dev/null
+++ b/src/lib/useIsLoggedIn.ts
@@ -0,0 +1,6 @@
+import { useCookies } from 'react-cookie';
+
+export const useIsLoggedIn = () => {
+  const [cookies] = useCookies(['token']);
+  return cookies.token;
+};
diff --git a/src/pages/PricingPage/PricingPage.tsx b/src/pages/PricingPage/PricingPage.tsx
index 0126792..c86c3e9 100644
--- a/src/pages/PricingPage/PricingPage.tsx
+++ b/src/pages/PricingPage/PricingPage.tsx
@@ -3,8 +3,12 @@ import { getVisibleText } from '../../lib/text/getVisibleText';
 import { getSubscribeLink } from './getSubscribeLink';
 import { PricingCard } from './components/PricingCard';
 import TopMessage from '../../components/TopMessage/TopMessage';
+import { useIsLoggedIn } from '../../lib/useIsLoggedIn';
 
 export default function PricingPage() {
+  const isLoggedIn = useIsLoggedIn();
+  const subcribeLink = isLoggedIn ? getSubscribeLink() : '/login';
+
   return (
     <PageContainer>
       <div className="container content">
@@ -29,7 +33,7 @@ export default function PricingPage() {
               </div>
               <div className="column is-4">
                 <PricingCard price="$2" title="Subscriber Plan" benefits={['Unlimited Flashcards (9GB++)']}
-                             link={getSubscribeLink()} linkText="Subscribe" />
+                             link={subcribeLink} linkText="Subscribe" />
               </div>
             </div>
           </div>