fix: remove referrals feature flag

also add a way to hide the plan page after Stripe checkout to fix an annoying signup flow issue - will need to update Stripe to fully take advantage of this

Author: travis

src/app/settings/page.tsx

@@ -10,7 +10,6 @@ import { GB, TB, filesize } from '@/lib'
 import DefaultLoader from '@/components/Loader'
 import { RefcodeLink, ReferralsList, RefcodeCreator } from '../referrals/page'
 import { useReferrals } from '@/lib/referrals/hooks'
-import { useSearchParams } from 'next/navigation'
 
 const Plans: Record<`did:${string}`, { name: string, limit: number }> = {
   'did:web:starter.web3.storage': { name: 'Starter', limit: 5 * GB },
@@ -75,43 +74,37 @@ export default function SettingsPage (): JSX.Element {
   // TODO: need to calculate these from the referral information that gets added during the TBD cronjob
   const credits = 0
   const points = 0
-  const params = useSearchParams()
-  const referralsEnabled = (params.get('referrals') === 'enabled')
   return (
     <>
       <SettingsNav />
       <H1>Settings</H1>
-      {referralsEnabled && (
-        <>
-          <H2>Rewards</H2>
-          <div className='flex flex-row space-x-2 justify-between max-w-4xl mb-4'>
-            <div className='border border-hot-red rounded-2xl bg-white p-5 flex-grow'>
-              <H3>Referred</H3>
-              <span className='text-4xl'>{referred}</span> / {MAX_REFERRALS}
-            </div>
-            <div className='border border-hot-red rounded-2xl bg-white p-5 flex-grow'>
-              <H3>USD Credits</H3>
-              <span className='text-4xl'>{credits}</span> / {MAX_CREDITS}
-            </div>
-            <div className='border border-hot-red rounded-2xl bg-white p-5 flex-grow'>
-              <H3>Racha Points</H3>
-              <span className='text-4xl'>{points}</span>
-            </div>
-          </div>
-          <div className='border border-hot-red rounded-2xl bg-white p-5 max-w-4xl mb-4'>
-            <ReferralsList />
-            {referralLink ? (
-              <RefcodeLink referralLink={referralLink} />
-            ) : (
-              <RefcodeCreator
-                accountEmail={accountEmail}
-                urlQueryEmail={urlQueryEmail}
-                createRefcode={createRefcode}
-                mutateRefcode={mutateRefcode}
-                setReferrerEmail={setReferrerEmail} />)}
-          </div>
-        </>
-      )}
+      <H2>Rewards</H2>
+      <div className='flex flex-row space-x-2 justify-between max-w-4xl mb-4'>
+        <div className='border border-hot-red rounded-2xl bg-white p-5 flex-grow'>
+          <H3>Referred</H3>
+          <span className='text-4xl'>{referred}</span> / {MAX_REFERRALS}
+        </div>
+        <div className='border border-hot-red rounded-2xl bg-white p-5 flex-grow'>
+          <H3>USD Credits</H3>
+          <span className='text-4xl'>{credits}</span> / {MAX_CREDITS}
+        </div>
+        <div className='border border-hot-red rounded-2xl bg-white p-5 flex-grow'>
+          <H3>Racha Points</H3>
+          <span className='text-4xl'>{points}</span>
+        </div>
+      </div>
+      <div className='border border-hot-red rounded-2xl bg-white p-5 max-w-4xl mb-4'>
+        <ReferralsList />
+        {referralLink ? (
+          <RefcodeLink referralLink={referralLink} />
+        ) : (
+          <RefcodeCreator
+            accountEmail={accountEmail}
+            urlQueryEmail={urlQueryEmail}
+            createRefcode={createRefcode}
+            mutateRefcode={mutateRefcode}
+            setReferrerEmail={setReferrerEmail} />)}
+      </div>
       <div className='border border-hot-red rounded-2xl bg-white p-5 max-w-4xl'>
         <H2>Plan</H2>
         <p className='font-epilogue mb-4'>

src/components/PlanGate.tsx

@@ -7,6 +7,7 @@ import { TopLevelLoader } from './Loader';
 import { Logo } from '@/brand';
 import { usePlan } from '@/hooks';
 import { useRecordRefcode, useReferredBy } from '@/lib/referrals/hooks';
+import { useSearchParams } from 'next/navigation';
 
 export function PlanGate ({ children }: { children: ReactNode }): ReactNode {
   const [{ accounts }] = useW3()
@@ -64,7 +65,8 @@ export function PlanGate ({ children }: { children: ReactNode }): ReactNode {
 }
 
 export function MaybePlanGate ({ children }: { children: ReactNode }): ReactNode {
-  if (process.env.NEXT_PUBLIC_DISABLE_PLAN_GATE == 'true') {
+  const params = useSearchParams()
+  if ((process.env.NEXT_PUBLIC_DISABLE_PLAN_GATE == 'true') || (params.get('checkout') === 'true')) {
     return children
   } else {
     return <PlanGate>{children}</PlanGate>