Merge branch 'main' into thinkyachievements

components/forms/signupForm.tsx

@@ -16,11 +16,11 @@ export default function SignupForm({ recaptchaPublicKey }: SignupFormProps) {
  const [email, setEmail] = useState<string>('');
  const { mutateUser, setShouldAttemptAuth } = useContext(AppContext);
  const [password, setPassword] = useState<string>('');
- const router = useRouter();
- const [username, setUsername] = useState<string>('');
- const [recaptchaToken, setRecaptchaToken] = useState<string>('');
  const recaptchaRef = useRef<ReCAPTCHA>(null);
+ const [recaptchaToken, setRecaptchaToken] = useState<string>('');
+ const router = useRouter();
  const [showRecaptcha, setShowRecaptcha] = useState<boolean>(false);
+ const [username, setUsername] = useState<string>('');
 
  function onRecaptchaChange(value: string | null) {
  if (value) {

components/home/index.tsx

@@ -1,8 +1,6 @@
 import StatFilter from '@root/constants/statFilter';
 import TourPath from '@root/constants/tourPath';
 import getProfileSlug from '@root/helpers/getProfileSlug';
-import isFullAccount from '@root/helpers/isFullAccount';
-import isGuest from '@root/helpers/isGuest';
 import { ScreenSize } from '@root/hooks/useDeviceCheck';
 import classNames from 'classnames';
 import Image from 'next/image';
@@ -23,7 +21,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';
+import UpsellFullAccount from './upsellFullAccount';
 
 interface HomeProps {
  lastLevelPlayed?: EnrichedLevel;
@@ -152,7 +150,7 @@ export default function Home({
 
  return (<>
  {tour}
- <UpsellConvertOrConfirmTopBar user={user} />
+ <UpsellFullAccount 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'>

components/home/upsellFullAccount.tsx

@@ -0,0 +1,18 @@
+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 UpsellFullAccount({ 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'>
+ <Link className='font-bold text-blue-600 hover:underline' href='/settings'>
+ {isGuest(user) ? 'Convert to a regular account' : 'Confirm your email'}
+ </Link>
+ <span>
+ {' to unlock all basic features!'}
+ </span>
+ </div>
+ );
+}

components/modal/index.tsx

@@ -31,7 +31,7 @@ interface ModalProps {
  isOpen: boolean;
  onConfirm?: () => void;
  onSubmit?: () => void;
- title?: React.ReactNode;
+ title: React.ReactNode;
 }
 
 export default function Modal({
@@ -88,9 +88,9 @@ export default function Modal({
  }}
  >
  <Dialog.Panel className={classNames('py-3 px-4 my-8 text-left align-middle transition-all transform shadow-xl rounded-xl flex flex-col gap-4 border bg-1 border-color-3 overflow-hidden', getFontFromGameId(game.id))}>
- {title && <Dialog.Title as='div' className='flex gap-4 text-center'>
+ <Dialog.Title as='div' className='flex gap-4 text-center'>
  <span className='w-6' />
- <span className='grow text-xl truncate'>{title}</span>
+ <span className='grow text-xl font-bold truncate'>{title}</span>
  <button className='hover:opacity-100 opacity-50 closeBtn' onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
  e.preventDefault();
  closeModal();
@@ -99,7 +99,7 @@ export default function Modal({
  <path strokeLinecap='round' strokeLinejoin='round' d='M6 18L18 6M6 6l12 12' />
  </svg>
  </button>
- </Dialog.Title>}
+ </Dialog.Title>
  {children}
  <div className='flex justify-center gap-2 flex-wrap'>
  {onConfirm ?

components/modal/postGameModal.tsx

@@ -88,94 +88,59 @@ export default function PostGameModal({ chapter, closeModal, collection, dontSho
  );
  }
 
- const upsellDiv = <div className='text-center'>
- <Link href='/signup' className='underline font-bold'>Sign up</Link> (or use a <Link href='/play-as-guest' className='underline font-bold'>Guest Account</Link>) to save your progress and get access to more features.
- </div>;
-
- const guestConvertUpsell = (
- <div className='text-center text-sm'>
- <div className='flex flex-col gap-1'>
- <span className='text-2xl italic'>By the way...</span><span className='text-xs'>You are playing as a <span className='font-bold italic'>guest</span> and missing out on a ton of features. <Link href='/settings' className='hover:underline font-bold text-blue-300'>
- Convert to regular account
- </Link> (it&apos;s free and only takes a few seconds!)</span>
- </div>
- </div>
- );
-
  return (
  <Modal
  closeModal={closeModal}
  isOpen={isOpen}
-
+ title={
+ <div
+ className='fadeIn'
+ style={{
+ animationDelay: '0.2s',
+ }}
+ >
+ Congratulations!
+ </div>
+ }
  >
-
- <div className='flex flex-col gap-2 justify-center items-center'>
- <div className='flex flex-col'>
- <div className='text-center text-xl mt-3 font-bold moveUp'
- style={{
- animation: 'moveUp 0.7s ease-out 0s forwards',
- position: 'relative' // Allows the translateY to take effect properly
- // add animation delay of 1s
- // animationDelay: '0.5s',
- // add some awesome glowing text
-
- }}
- >
- Congratulations!
+ <div
+ className='flex flex-col gap-4 justify-center items-center fadeIn'
+ style={{
+ animationDelay: '0.6s',
+ }}
+ >
+ {!reqUser ?
+ <div className='text-center'>
+ <Link href='/signup' className='underline font-bold'>Sign up</Link> (or use a <Link href='/play-as-guest' className='underline font-bold'>Guest Account</Link>) to save your progress and get access to more features.
  </div>
- <div className='text-center text-wrap text-sm p-1 fadeIn'
- style={{
- // add animation delay of 1.5s
- animationDelay: '0.5s',
- }}
-
- >
- {reqUser && !isGuest(reqUser) &&
- <details>
- <summary onClick={(e: React.MouseEvent) => {
- // make this element invisible
- (e.target as HTMLElement).style.display = 'none';
- }} className='text-xs cursor-pointer italic py-1'>Share your thoughts on {level.name}</summary>
- <FormattedLevelReviews hideReviews={true} inModal={true} />
- </details>
-
- }
-
- </div>
- </div>
- <div className='fadeIn' style={{
- // add animation delay of 2s
- animationDelay: '1s',
- }}>
- {!reqUser ?
-
- upsellDiv
- :
- <>
-
- {lastLevelInCollection && collection &&
+ :
+ <>
+ {lastLevelInCollection && collection &&
  <div>
  {level.name} is the last level in <Link className='font-bold hover:underline' href={`/collection/${collection.slug}`}>{collection.name}</Link>.
  </div>
- }
- {nextActionCard()}
- </>
- }
- </div>
- <div className='fadeIn'
- style={{
- // add animation delay of 2s
- animationDelay: '1.5s',
- }}>
- {isGuest(reqUser) && guestConvertUpsell}
- </div>
- <div className='flex items-center gap-1 fadeIn'
- style={{
- // add animation delay of 3s
- animationDelay: '1.5s',
- }}
- >
+ }
+ {nextActionCard()}
+ {isGuest(reqUser) ?
+ <div className='text-center text-sm'>
+ <div className='flex flex-col gap-2'>
+ <span className='text-2xl italic font-semibold'>By the way...</span><span className='text-xs'>You are playing as a <span className='font-bold italic'>guest</span> and missing out on a ton of features. <Link href='/settings' className='hover:underline font-bold text-blue-300'>Convert to a regular account</Link> (it&apos;s free and only takes a few seconds!)</span>
+ </div>
+ </div>
+ :
+ <details>
+ <summary onClick={(e: React.MouseEvent) => {
+ // make this element invisible
+ (e.target as HTMLElement).style.display = 'none';
+ }} className='text-xs cursor-pointer italic py-1'>Share your thoughts on {level.name}</summary>
+ <FormattedLevelReviews hideReviews={true} inModal={true} />
+ </details>
+ }
+ </>
+ }
+ <div className='flex gap-2'>
  <input
+ id='dont-show-post-game-modal'
  type='checkbox'
  checked={dontShowPostGameModal}
  onChange={(e) => {
@@ -191,7 +156,7 @@ export default function PostGameModal({ chapter, closeModal, collection, dontSho
  }
  }}
  />
- <label className='text-xs'>Mute this popup for 24h</label>
+ <label className='text-xs' htmlFor='dont-show-post-game-modal'>Mute this popup for 24h</label>
  </div>
  </div>
  </Modal>

components/settings/settingsAccountGuest.tsx

@@ -5,8 +5,8 @@ import toast from 'react-hot-toast';
 export default function SettingsAccountGuest() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
- const [username, setUsername] = useState('');
  const router = useRouter();
+ const [username, setUsername] = useState('');
 
  async function fetchSignup() {
  toast.dismiss();

constants/role.ts

@@ -1,8 +1,8 @@
 enum Role {
  ADMIN = 'Admin',
  CURATOR = 'Curator',
- GUEST = 'Guest',
  FORMER_GUEST = 'FormerGuest',
+ GUEST = 'Guest',
  PRO = 'Pro',
 }
 

pages/[subdomain]/chapter1/index.tsx

@@ -1,4 +1,4 @@
-import UpsellConvertOrConfirmTopBar from '@root/components/home/upsellConvertOrConfirm';
+import UpsellFullAccount from '@root/components/home/upsellFullAccount';
 import { getGameIdFromReq } from '@root/helpers/getGameIdFromReq';
 import { GetServerSidePropsContext, NextApiRequest } from 'next';
 import Link from 'next/link';
@@ -30,7 +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} />
+ <UpsellFullAccount user={reqUser} />
  <FormattedCampaign
  enrichedCollections={enrichedCollections}
  levelHrefQuery={'chapter=1'}

pages/[subdomain]/chapter2/index.tsx

@@ -1,4 +1,4 @@
-import UpsellConvertOrConfirmTopBar from '@root/components/home/upsellConvertOrConfirm';
+import UpsellFullAccount from '@root/components/home/upsellFullAccount';
 import { getGameIdFromReq } from '@root/helpers/getGameIdFromReq';
 import { GetServerSidePropsContext, NextApiRequest } from 'next';
 import Link from 'next/link';
@@ -61,7 +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} />
+ <UpsellFullAccount user={reqUser} />
  <FormattedCampaign
  enrichedCollections={enrichedCollections}
  levelHrefQuery={'chapter=2'}

pages/[subdomain]/chapter3/index.tsx

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

pages/[subdomain]/level/[username]/[slugName].tsx

@@ -337,9 +337,7 @@ export default function LevelPage({ _collection, _level, reqUser }: LevelProps)
  ratingValue: Math.round(100 * level.calc_reviews_score_laplace),
  ratingCount: level.calc_reviews_count,
  }}
-
  datePublished={level.ts && new Date(level.ts * 1000).toISOString() || ''}
-
  />
  <LevelContext.Provider value={{
  inCampaign: !!chapter && level.userMoves !== level.leastMoves,

pages/[subdomain]/play-as-guest/index.tsx

@@ -20,11 +20,11 @@ export default function PlayAsGuest({ recaptchaPublicKey }: {recaptchaPublicKey?
  const { userConfig, mutateUser, setShouldAttemptAuth } = useContext(AppContext);
  const [name, setName] = useState<string>('');
  const recaptchaRef = useRef<ReCAPTCHA>(null);
- const recaptchaToken = useRef<string | null>(null);
+ const recaptchaToken = useRef('');
  const [registrationState, setRegistrationState] = useState('registering');
  const router = useRouter();
- const [temporaryPassword, setTemporaryPassword] = useState<string>('');
  const [showRecaptcha, setShowRecaptcha] = useState(false);
+ const [temporaryPassword, setTemporaryPassword] = useState<string>('');
 
  function onRecaptchaChange(value: string | null) {
  if (value) {
@@ -125,16 +125,16 @@ export default function PlayAsGuest({ recaptchaPublicKey }: {recaptchaPublicKey?
  <li>Your guest account may be deleted after 7 days of no activity</li>
  <li>By creating a guest account you agree to our <a className='underline' href='https://docs.google.com/document/d/e/2PACX-1vR4E-RcuIpXSrRtR3T3y9begevVF_yq7idcWWx1A-I9w_VRcHhPTkW1A7DeUx2pGOcyuKifEad3Qokn/pub' rel='noreferrer' target='_blank'>terms of service</a> and reviewed the <a className='underline' href='https://docs.google.com/document/d/e/2PACX-1vSNgV3NVKlsgSOEsnUltswQgE8atWe1WCLUY5fQUVjEdu_JZcVlRkZcpbTOewwe3oBNa4l7IJlOnUIB/pub' rel='noreferrer' target='_blank'>privacy policy</a></li>
  </ul>
- { recaptchaPublicKey && showRecaptcha ? (
+ {recaptchaPublicKey && showRecaptcha ?
  <ReCAPTCHA
  size='normal'
  onChange={onRecaptchaChange}
  ref={recaptchaRef}
  sitekey={recaptchaPublicKey ?? ''}
  />
- ) :
+   :
  <button className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline cursor-pointer' onClick={fetchSignup}>
- Play
+  Play
  </button>
  }
  <Link className='font-bold text-sm text-blue-500 hover:text-blue-400' href='/signup'>
@@ -143,16 +143,18 @@ export default function PlayAsGuest({ recaptchaPublicKey }: {recaptchaPublicKey?
  </div>;
 
  async function fetchSignup() {
- if (recaptchaPublicKey && !showRecaptcha) {
- setShowRecaptcha(true);
+ if (recaptchaPublicKey) {
+ if (!showRecaptcha) {
+ setShowRecaptcha(true);
 
- return;
- }
+  return;
+  }
 
- if (!recaptchaToken.current) {
- toast.error('Please complete the recaptcha');
+  if (!recaptchaToken.current) {
+  toast.error('Please complete the recaptcha');
 
- return;
+ return;
+ }
  }
 
  const tutorialCompletedAt = window.localStorage.getItem('tutorialCompletedAt') || '0';