Simplify plans buttons behavior

mockoon · Sep 20, 2024 · 7bf0b8b · 7bf0b8b
1 parent 3da5a3d
commit 7bf0b8b
Showing 1 changed file with 22 additions and 37 deletions.
diff --git a/components/plans.tsx b/components/plans.tsx
@@ -176,43 +176,18 @@ const PlansView: FunctionComponent<{
       <div>
         <button
           type='button'
-          className={`btn btn-primary btn-sm ${
-            currentUser.isLoading ||
-            (currentUser.data &&
-              currentUser.data?.plan !== Plans.FREE &&
-              currentUser.data?.plan !== plan)
-              ? 'invisible'
-              : ''
-          }`}
+          className='btn btn-primary btn-sm '
           onClick={() => {
             redirect(plan);
           }}
         >
-          {/* if not logged in or on a free plan -> buy btn */}
-          {((!currentUser.isLoading && !currentUser.data) ||
-            currentUser.data?.plan === Plans.FREE) &&
-            'Try for free'}
-          {/* 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;'}
+          Try for free
         </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>
-        )}
-      </>
+
+      <div className='mt-2 badge text-bg-success-subtle'>
+        {pricing[plan].trialDays} days free trial included
+      </div>
     </>
   );
   const tickBadge = (
@@ -365,9 +340,13 @@ const PlansView: FunctionComponent<{
                       </span>
                     </div>
 
-                    <div className='text-center mb-6'>
-                      {subscribeBtn(Plans.SOLO)}
-                    </div>
+                    {/* show only if not connected or not already subscribed */}
+                    {(!currentUser.data ||
+                      currentUser.data?.plan === 'FREE') && (
+                      <div className='text-center mb-6'>
+                        {subscribeBtn(Plans.SOLO)}
+                      </div>
+                    )}
 
                     <div className='d-flex'>
                       <div className='badge badge-rounded-circle text-bg-success-subtle mt-1 me-4'>
@@ -464,9 +443,15 @@ const PlansView: FunctionComponent<{
                         /{suffixes[planFrequency]}/seat
                       </span>
                     </div>
-                    <div className='text-center mb-6'>
-                      {subscribeBtn(Plans.TEAM)}
-                    </div>
+
+                    {/* show only if not connected or not already subscribed */}
+                    {(!currentUser.data ||
+                      currentUser.data?.plan === 'FREE') && (
+                      <div className='text-center mb-6'>
+                        {subscribeBtn(Plans.TEAM)}
+                      </div>
+                    )}
+
                     <div className='d-flex'>
                       <div className='badge badge-rounded-circle text-bg-success-subtle mt-1 me-4'>
                         <i className='icon-check'></i>