feat: show Stripe link only to logged in users (#560)

Should reduce premature purchases that cause email linking issues.

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>

src/lib/useIsLoggedIn.ts

@@ -0,0 +1,6 @@
+import { useCookies } from 'react-cookie';
+
+export const useIsLoggedIn = () => {
+  const [cookies] = useCookies(['token']);
+  return cookies.token;
+};

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>