manifold/web/components/onboarding/welcome.tsx

import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid'
import clsx from 'clsx'
import { useState } from 'react'
import { useUser } from 'web/hooks/use-user'
import { updateUser } from 'web/lib/firebase/users'
import { Col } from '../layout/col'
import { Modal } from '../layout/modal'
import { Row } from '../layout/row'
import { Title } from '../title'

export default function Welcome() {
  const user = useUser()
  const [open, setOpen] = useState(true)
  const [page, setPage] = useState(0)
  const TOTAL_PAGES = 4

  function increasePage() {
    if (page < TOTAL_PAGES - 1) {
      setPage(page + 1)
    }
  }

  function decreasePage() {
    if (page > 0) {
      setPage(page - 1)
    }
  }

  async function setUserHasSeenWelcome() {
    if (user) {
      await updateUser(user.id, { ['shouldShowWelcome']: false })
    }
  }

  if (!user || !user.shouldShowWelcome) {
    return <></>
  } else
    return (
      <Modal
        open={open}
        setOpen={(newOpen) => {
          setUserHasSeenWelcome()
          setOpen(newOpen)
        }}
      >
        <Col className="h-[32rem] place-content-between rounded-md bg-white px-8 py-6 text-sm font-light md:h-[40rem] md:text-lg">
          {page === 0 && <Page0 />}
          {page === 1 && <Page1 />}
          {page === 2 && <Page2 />}
          {page === 3 && <Page3 />}
          <Col>
            <Row className="place-content-between">
              <ChevronLeftIcon
                className={clsx(
                  'h-10 w-10 text-gray-400 hover:text-gray-500',
                  page === 0 ? 'disabled invisible' : ''
                )}
                onClick={decreasePage}
              />
              <PageIndicator page={page} totalpages={TOTAL_PAGES} />
              <ChevronRightIcon
                className={clsx(
                  'h-10 w-10 text-indigo-500 hover:text-indigo-600',
                  page === TOTAL_PAGES - 1 ? 'disabled invisible' : ''
                )}
                onClick={increasePage}
              />
            </Row>
            <u
              className="self-center text-xs text-gray-500"
              onClick={() => {
                setOpen(false)
                setUserHasSeenWelcome()
              }}
            >
              I got the gist, exit welcome
            </u>
          </Col>
        </Col>
      </Modal>
    )
}

function PageIndicator(props: { page: number; totalpages: number }) {
  const { page, totalpages } = props
  return (
    <Row>
      {[...Array(totalpages)].map((e, i) => (
        <div
          className={clsx(
            'mx-1.5 my-auto h-1.5 w-1.5 rounded-full',
            i === page ? 'bg-indigo-500' : 'bg-gray-300'
          )}
        />
      ))}
    </Row>
  )
}

function Page0() {
  return (
    <>
      <img
        className="h-2/3 w-2/3 place-self-center object-contain"
        src="/welcome/manipurple.png"
      />
      <Title className="text-center" text="Welcome to Manifold Markets!" />
      <p>
        Manifold Markets is a place where anyone can ask a question about the
        future.
      </p>
      <div className="mt-4">For example,</div>
      <div className="mt-2 font-normal text-indigo-700">
        “Will Michelle Obama be the next president of the United States?”
      </div>
    </>
  )
}

function Page1() {
  return (
    <>
      <p>
        Your question becomes a prediction market that people can bet{' '}
        <span className="font-normal text-indigo-700">mana (M$)</span> on.
      </p>
      <div className="mt-8 font-semibold">The core idea</div>
      <div className="mt-2">
        If people have to put their mana where their mouth is, you’ll get a
        pretty accurate answer!
      </div>
      <video loop autoPlay className="my-4 h-full w-full">
        <source src="/welcome/mana-example.mp4" type="video/mp4" />
        Your browser does not support video
      </video>
    </>
  )
}

function Page2() {
  return (
    <>
      <p>
        <span className="mt-4 font-normal text-indigo-700">Mana (M$)</span> is
        the play money you bet with. You can also turn it into a real donation
        to charity, at a 100:1 ratio.
      </p>
      <div className="mt-8 font-semibold">Example</div>
      <p className="mt-2">
        When you donate <span className="font-semibold">M$1000</span> to
        Givewell, Manifold sends them{' '}
        <span className="font-semibold">$10 USD</span>.
      </p>
      <video loop autoPlay className="my-4 h-full w-full">
        <source src="/welcome/charity.mp4" type="video/mp4" />
        Your browser does not support video
      </video>
    </>
  )
}

function Page3() {
  return (
    <>
      <img className="mx-auto object-contain" src="/welcome/treasure.png" />
      <Title className="mx-auto" text="Let's start predicting!" />
      <p className="mb-8">
        As a thank you for signing up, we’ve sent you{' '}
        <span className="font-normal text-indigo-700">M$1000 Mana</span>{' '}
      </p>
    </>
  )
}