diff --git a/web/components/home/new-user-goals.tsx b/web/components/home/new-user-goals.tsx new file mode 100644 index 0000000000..187118b404 --- /dev/null +++ b/web/components/home/new-user-goals.tsx @@ -0,0 +1,177 @@ +import { sumBy, uniqBy } from 'lodash' +import clsx from 'clsx' +import { GoGoal } from 'react-icons/go' +import Link from 'next/link' + +import { useLeagueInfo } from 'web/hooks/use-leagues' +import { formatMoney } from 'common/util/format' +import { ProgressBar } from 'web/components/progress-bar' +import { useRemainingNewUserSignupBonuses } from 'web/hooks/use-request-new-user-signup-bonus' +import { useBets } from 'web/hooks/use-bets-supabase' +import { + DAYS_TO_USE_FREE_QUESTIONS, + User, + freeQuestionRemaining, +} from 'common/user' +import { Col } from '../layout/col' +import { Row } from '../layout/row' +import { useSubscription } from 'web/lib/supabase/realtime/use-subscription' +import { Bet } from 'common/bet' +import { ReactNode } from 'react' +import { InfoTooltip } from '../widgets/info-tooltip' +import { CreateQuestionButton } from '../buttons/create-question-button' +import { simpleFromNow } from 'web/lib/util/shortenedFromNow' +import { DAY_MS } from 'common/util/time' +import { Button } from '../buttons/button' + +export const NewUserGoals = (props: { user: User }) => { + const { user } = props + const remainingViewBonuses = useRemainingNewUserSignupBonuses() + + const bets = useBets({ userId: user.id, limit: 100, order: 'desc' }) + const { rows } = useSubscription('contract_bets', { + k: 'user_id', + v: user.id, + }) + const liveBets = rows?.map((r) => r.data as Bet) + const combinedBets = uniqBy( + [...(bets ?? []), ...(liveBets ?? [])], + (b) => b.id + ) + const amountBet = sumBy(combinedBets, (b) => (b.amount > 0 ? b.amount : 0)) + + const leagueInfo = useLeagueInfo(user.id) + if (remainingViewBonuses === undefined) { + return null + } + if (remainingViewBonuses > 0) { + return ( + + ) + } + + if (bets === undefined) { + return null + } + + const goalAmountBet = 250 + if (amountBet < goalAmountBet) { + return ( + + ) + } + + if (leagueInfo === undefined) { + return null + } + + const manaEarned = leagueInfo?.mana_earned ?? 0 + const manaEarnedGoal = 100 + + if (manaEarned < manaEarnedGoal) { + return ( + + mana earned{' '} + + + } + > + + + + + ) + } + + const remaining = freeQuestionRemaining( + user?.freeQuestionsCreated, + user?.createdTime + ) + const questionsCreated = user.freeQuestionsCreated ?? 0 + const questionsCreatedGoal = 3 + if (questionsCreated < questionsCreatedGoal) { + return ( + questions created} + > + + 🎉 You've got {remaining} free questions! + + Expires in{' '} + {simpleFromNow( + user.createdTime + DAY_MS * DAYS_TO_USE_FREE_QUESTIONS + )} + + + + + ) + } + return null +} + +const ProgressDisplay = (props: { + label: string + value: number + goal: number + description: ReactNode + format?: (value: number) => string + children?: ReactNode + className?: string +}) => { + const { + label, + value, + goal, + description, + format = (x: number) => x.toString(), + children, + className, + } = props + return ( + + +
+ + {format(value)} of {format(goal)} + {' '} + {description} +
+ + + {label} + +
+ + {children} + + ) +} diff --git a/web/pages/home/index.tsx b/web/pages/home/index.tsx index 095ea75023..0bc5f0cd3b 100644 --- a/web/pages/home/index.tsx +++ b/web/pages/home/index.tsx @@ -42,6 +42,7 @@ import { usePersistentInMemoryState } from 'web/hooks/use-persistent-in-memory-s import { User } from 'common/user' import { YourTopicsSection } from 'web/components/topics/your-topics' import { useABTest } from 'web/hooks/use-ab-test' +import { NewUserGoals } from 'web/components/home/new-user-goals' export async function getStaticProps() { try { @@ -134,30 +135,40 @@ export function HomeContent(props: { `tabs-home` ) + const hasAgedOutOfNewUserGoals = + (user?.createdTime ?? 0) + DAY_MS * DAYS_TO_USE_FREE_QUESTIONS < Date.now() + const newUserGoalsVariant = useABTest('new user goals', [ + 'enabled', + 'disabled', + ]) + const newUserGoalsEnabled = + !hasAgedOutOfNewUserGoals && newUserGoalsVariant === 'enabled' + return ( - {user && freeQuestionsEnabled && remaining > 0 && ( - - - - 🎉 You've got{' '} - {remaining} free questions! - - - (Expires in{' '} - {simpleFromNow( - user.createdTime + DAY_MS * DAYS_TO_USE_FREE_QUESTIONS - )} - .) - - - - - )} + {user && + !newUserGoalsEnabled && + freeQuestionsEnabled && + remaining > 0 && ( + + + 🎉 You've got {remaining} free questions! + + Expires in{' '} + {simpleFromNow( + user.createdTime + DAY_MS * DAYS_TO_USE_FREE_QUESTIONS + )} + + + + + )} + + {user && newUserGoalsEnabled && }