upsell top bar for email confirm and account convert

sspenst · May 12, 2024 · 7a2e699 · 7a2e699
1 parent 7cd066c
commit 7a2e699
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 10 deletions.
diff --git a/components/home/index.tsx b/components/home/index.tsx
@@ -23,6 +23,7 @@ import LoadingCard from '../cards/loadingCard';
 import FormattedReview from '../level/reviews/formattedReview';
 import LoadingSpinner from '../page/loadingSpinner';
 import MultiSelectUser from '../page/multiSelectUser';
+import UpsellConvertOrConfirmTopBar from './upsellConvertOrConfirm';
 
 interface HomeProps {
   lastLevelPlayed?: EnrichedLevel;
@@ -151,15 +152,7 @@ export default function Home({
 
   return (<>
     {tour}
-    {user && !isFullAccount(user) &&
-      <div className='bg-yellow-200 w-full text-black text-center text-sm p-2 shadow-lg'>
-        {`${isGuest(user) ? 'Convert to a regular account' : 'Confirm your email'} in your `}
-        <Link className='font-semibold text-blue-600 hover:underline' href='/settings'>
-          Account Settings
-        </Link>
-        {' to unlock all basic features!'}
-      </div>
-    }
+    <UpsellConvertOrConfirmTopBar user={user} />
     <div className='flex justify-center m-6 text-center'>
       <div className='flex flex-col items-center gap-8 w-full max-w-screen-2xl'>
         <div className='flex flex-wrap justify-center gap-8 items-center max-w-full'>

diff --git a/components/home/upsellConvertOrConfirm.tsx b/components/home/upsellConvertOrConfirm.tsx
@@ -0,0 +1,16 @@
+import isFullAccount from '@root/helpers/isFullAccount';
+import isGuest from '@root/helpers/isGuest';
+import User from '@root/models/db/user';
+import Link from 'next/link';
+import React from 'react';
+
+export default function UpsellConvertOrConfirmTopBar({ user }: {user: User | null}) {
+  return user && !isFullAccount(user) && ( <div className='bg-yellow-200 w-full text-black text-center text-sm p-2 shadow-lg'>
+    {`${isGuest(user) ? 'Convert to a regular account' : 'Confirm your email'} in your `}
+    <Link className='font-semibold text-blue-600 hover:underline' href='/settings'>
+        Account Settings
+    </Link>
+    {' to unlock all basic features!'}
+  </div>
+  );
+}
diff --git a/pages/[subdomain]/chapter1/index.tsx b/pages/[subdomain]/chapter1/index.tsx
@@ -1,3 +1,4 @@
+import UpsellConvertOrConfirmTopBar from '@root/components/home/upsellConvertOrConfirm';
 import { getGameIdFromReq } from '@root/helpers/getGameIdFromReq';
 import { GetServerSidePropsContext, NextApiRequest } from 'next';
 import Link from 'next/link';
@@ -29,6 +30,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 export default function Chapter1Page({ enrichedCollections, reqUser, solvedLevels, totalLevels }: CampaignProps) {
   return (
     <Page folders={[new LinkInfo('Play', '/play')]} title={'Chapter 1'}>
+      <UpsellConvertOrConfirmTopBar user={reqUser} />
       <FormattedCampaign
         enrichedCollections={enrichedCollections}
         levelHrefQuery={'chapter=1'}

diff --git a/pages/[subdomain]/chapter2/index.tsx b/pages/[subdomain]/chapter2/index.tsx
@@ -1,3 +1,4 @@
+import UpsellConvertOrConfirmTopBar from '@root/components/home/upsellConvertOrConfirm';
 import { getGameIdFromReq } from '@root/helpers/getGameIdFromReq';
 import { GetServerSidePropsContext, NextApiRequest } from 'next';
 import Link from 'next/link';
@@ -60,6 +61,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 export default function Chapter2Page({ enrichedCollections, reqUser, solvedLevels, totalLevels }: CampaignProps) {
   return (
     <Page folders={[new LinkInfo('Play', '/play')]} title={'Chapter 2'}>
+      <UpsellConvertOrConfirmTopBar user={reqUser} />
       <FormattedCampaign
         enrichedCollections={enrichedCollections}
         levelHrefQuery={'chapter=2'}

diff --git a/pages/[subdomain]/chapter3/index.tsx b/pages/[subdomain]/chapter3/index.tsx
@@ -1,3 +1,4 @@
+import UpsellConvertOrConfirmTopBar from '@root/components/home/upsellConvertOrConfirm';
 import { AppContext } from '@root/contexts/appContext';
 import { getGameIdFromReq } from '@root/helpers/getGameIdFromReq';
 import { GetServerSidePropsContext, NextApiRequest } from 'next';
@@ -85,11 +86,12 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 }
 
 /* istanbul ignore next */
-export default function Chapter3Page({ enrichedCollections, solvedLevels, totalLevels }: CampaignProps) {
+export default function Chapter3Page({ reqUser, enrichedCollections, solvedLevels, totalLevels }: CampaignProps) {
   const { game } = useContext(AppContext);
 
   return (
     <Page folders={[new LinkInfo('Play', '/play')]} title={'Chapter 3'}>
+      <UpsellConvertOrConfirmTopBar user={reqUser} />
       <FormattedCampaign
         enrichedCollections={enrichedCollections}
         hideUnlockRequirements={true}

diff --git a/pages/[subdomain]/play/index.tsx b/pages/[subdomain]/play/index.tsx
@@ -1,3 +1,4 @@
+import UpsellConvertOrConfirmTopBar from '@root/components/home/upsellConvertOrConfirm';
 import { AppContext } from '@root/contexts/appContext';
 import { getGameFromId, getGameIdFromReq } from '@root/helpers/getGameIdFromReq';
 import { GetServerSidePropsContext, NextApiRequest } from 'next';
@@ -40,6 +41,7 @@ export default function PlayPage({ reqUser }: PlayPageProps) {
 
   return (
     <Page title={'Play'}>
+      <UpsellConvertOrConfirmTopBar user={reqUser} />
       <div className='flex flex-col items-center gap-8 p-4'>
         <div className='font-bold text-3xl text-center' id='title'>
           {game.displayName} Official Campaign