Fix cloud buy button not showing when logged out

mockoon · Jul 18, 2024 · d9f68bb · d9f68bb
1 parent 2d8a2da
commit d9f68bb
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 25 deletions.
diff --git a/components/plans.tsx b/components/plans.tsx
@@ -100,31 +100,46 @@ const PlansView: FunctionComponent<{
 
   const subscribeBtn = (plan: Plans) => (
     <>
-      <button
-        type='button'
-        className={`btn btn-primary btn-sm ${
-          currentUser.data?.plan !== 'FREE' && currentUser.data?.plan !== plan
-            ? 'invisible'
-            : ''
-        }`}
-        onClick={() => {
-          redirect(plan);
-        }}
-      >
-        {currentUser.data?.plan === Plans.FREE && 'Buy now'}
-
-        {currentUser.data?.plan !== Plans.FREE &&
-          currentUser.data?.plan === plan &&
-          'Current plan'}
-        {currentUser.data?.plan !== Plans.FREE &&
-          currentUser.data?.plan !== plan &&
-          '&nbsp;'}
-      </button>
-      {currentUser.data?.plan === 'FREE' && (
-        <div className='fs-6 text-muted mt-1'>
-          {pricing[plan].trialDays} days free trial included
-        </div>
-      )}
+      <div>
+        <button
+          type='button'
+          className={`btn btn-primary btn-sm ${
+            currentUser.isLoading ||
+            (currentUser.data &&
+              currentUser.data?.plan !== Plans.FREE &&
+              currentUser.data?.plan !== plan)
+              ? 'invisible'
+              : ''
+          }`}
+          onClick={() => {
+            redirect(plan);
+          }}
+        >
+          {/* if not logged in or on a free plan -> buy now */}
+          {((!currentUser.isLoading && !currentUser.data) ||
+            currentUser.data?.plan === Plans.FREE) &&
+            'Buy now'}
+          {/* if logged in and on a paid plan -> current plan*/}
+          {!currentUser.isLoading &&
+            currentUser.data &&
+            currentUser.data?.plan !== Plans.FREE &&
+            currentUser.data?.plan === plan &&
+            'Current plan'}
+          {/* if logged in and on a paid plan, hide, for other plans*/}
+          {currentUser.data &&
+            currentUser.data?.plan !== Plans.FREE &&
+            currentUser.data?.plan !== plan &&
+            '&nbsp;'}
+        </button>
+      </div>
+      <>
+        {/* Hide trial if already subscribed */}
+        {(!currentUser.data || currentUser.data?.plan === 'FREE') && (
+          <div className='mt-2 badge text-bg-success-subtle'>
+            {pricing[plan].trialDays} days free trial included
+          </div>
+        )}
+      </>
     </>
   );
   const tickBadge = (

diff --git a/utils/auth.tsx b/utils/auth.tsx
@@ -1,3 +1,4 @@
+import { useQueryClient } from '@tanstack/react-query';
 import {
   EmailAuthProvider,
   GoogleAuthProvider,
@@ -14,6 +15,7 @@ import {
 import { useEffect, useState } from 'react';
 
 const useAuth = () => {
+  const queryClient = useQueryClient();
   // user is set when user is authenticated but email is not necessarily verified
   const [user, setUser] = useState<User>(null);
   // is auth set when user is authenticated and email is verified
@@ -25,6 +27,7 @@ const useAuth = () => {
 
   const logout = async () => {
     await auth.signOut();
+    queryClient.invalidateQueries({ queryKey: ['currentUser'] });
   };
 
   const getIdToken = async (force = false) => {