\n ![\"Robot\"](\"/img/mars.svg\")
\n
\n {title ? (\n \n {title}
\n ) : (\n{text}
}\n\n
\n \n {overlay}\n
\n );\n}\n","import {\n Localized,\n withLocalization,\n WithLocalizationProps,\n} from '@fluent/react';\nimport * as React from 'react';\nimport { useRef, useState } from 'react';\nimport { connect } from 'react-redux';\nimport { useAccount, useAction } from '../../../../hooks/store-hooks';\nimport API from '../../../../services/api';\nimport { trackDashboard, trackVoiceAvatar } from '../../../../services/tracker';\nimport { Locale } from '../../../../stores/locale';\nimport StateTree from '../../../../stores/tree';\nimport { User } from '../../../../stores/user';\nimport URLS from '../../../../urls';\nimport { LocaleLink, LocalizedGetAttribute } from '../../../locale-helpers';\n\nimport {\n BookmarkIcon,\n CheckIcon,\n CrossIcon,\n EyeIcon,\n EyeOffIcon,\n InfoIcon,\n MicIcon,\n OldPlayIcon,\n PlayIcon,\n PlayOutlineIcon,\n} from '../../../ui/icons';\nimport { Avatar, Toggle } from '../../../ui/ui';\nimport StatsCard from './stats-card';\nimport { isProduction } from '../../../../utility';\nimport { Suspense, lazy } from 'react';\nconst Lottie = lazy(() => import('react-lottie'));\nconst animationData = require('../../../layout/data.json');\n\nimport './leaderboard.css';\n\nconst FETCH_SIZE = 5;\n\nfunction formatNumber(n: number) {\n return n > 1000 ? Math.floor(n / 1000) + 'k' : n;\n}\n\ninterface PropsFromState {\n api: API;\n globalLocale: Locale.State;\n}\n\ninterface Props extends PropsFromState {\n ref: { current: any };\n locale: string;\n type: 'clip' | 'vote';\n}\n\nconst FetchRow = (props: React.HTMLProps\n
\n \n {challenge ? (\n \n \n \n )}\n {iconButtons}\n
\n {title}
\n ) : (\n\n
\n \n {Object.keys(tabs).map(label => {\n return challenge ? (\n setSelectedTab(label)}>\n {label}\n \n ) : (\n \n setSelectedTab(label)}\n />\n \n );\n })}\n
\n {challenge ? (\n English Only\n ) : (\n \n {tabs[selectedTab]({ locale: locale == ALL_LOCALES ? null : locale })}\n
\n \n
\n )\n);\n\ninterface State {\n rows: { position: number; [key: string]: any }[];\n isAtEnd: boolean;\n playingClipIndex: number;\n}\n\nclass UnconnectedLeaderboard extends React.Component\n {value == null ? getString('not-available-abbreviation') : value}\n
\n \n {value == null\n ? getString('not-available-abbreviation')\n : Math.round(value)}\n
\n {'%'}
\n \n {row.position < 9 && '0'}\n {row.position + 1}\n
\n\n {!isProduction() ? (\n row.avatarClipUrl === null ? (\n \n
\n ) : (\n \n this.setState({ playingClipIndex: null })}\n onError={() => this.setState({ playingClipIndex: null })}\n />\n \n this.playAvatarClip(\n row.avatarClipUrl,\n row.position,\n row.you\n )\n }\n onMouseLeave={() =>\n this.playAvatarClip(\n row.avatarClipUrl,\n row.position,\n row.you\n )\n }\n onClick={() =>\n this.playAvatarClip(\n row.avatarClipUrl,\n row.position,\n row.you\n )\n }>\n
\n )\n ) : (\n \n
\n \n \n
\n )}\n\n \n {row.username || '???'}\n {row.you && (\n <>\n {' ('}\n \n \n \n )\n \n )}\n
\n {playingClipIndex === row.position && (\n \n
\n )}\n \n
\n {' '}\n \n {this.props.type == 'clip' ? (\n
\n ,\n nextPosition &&\n nextPosition - 1 > row.position &&\n nextPosition - FETCH_SIZE > row.position ? (\n \n
\n);\n\nconst Percentage = () => %
;\n\nexport default function LeaderboardCard({\n currentLocale,\n}: {\n currentLocale?: string;\n}) {\n const account = useAccount();\n const saveAccount = useAction(User.actions.saveAccount);\n\n const [showInfo, setShowInfo] = useState(false);\n const [showOverlay, setShowOverlay] = useState(false);\n\n const leaderboardRef = useRef(null);\n\n return (\n \n
\n )}\n - \n {[\n { Icon: MicIcon, label: 'speak-goal-text' },\n { Icon: PlayOutlineIcon, label: 'listen-goal-text' },\n ].map(({ Icon, label }) => (\n
- \n \n{' '}\n
\n \n \n \n \n ))}\n
\n \n
\n \n setShowOverlay(false)}>\n \n {label => {\n saveAccount({ visible: event.target.checked });\n }}\n />\n \n \n \n
\n )\n }\n tabs={{\n 'recorded-clips': ({ locale }) => (\n {label}
}\n \n\n
\n {numerator}
\n \n {percentage ? ' % ' : ' / '}\n {denominator}\n
\n \n );\n}\n\nconst Circle = ({\n radius,\n strokeW,\n center,\n ...rest\n}: React.SVGProps\n \n \n \n
\n\n \n {hasCustomGoalForThis ? (\n ∞
\n ) : (\n personalGoal\n )) || '?'\n }\n />\n )}\n \n {customGoal && hasCustomGoalForThis ? (\n \n \n ) : (\n !customGoal && (\n \n \n )\n )}\n
\n \n \n \n \n
\n \n
\n\n \n
\n \n {isSpeak ? (\n
\n \n \n \n \n \n \n trackDashboard(isSpeak ? 'speak-cta' : 'listen-cta', globalLocale)\n }\n />\n \n
\n \n );\n}\n","import * as React from 'react';\nimport Props from '../props';\nimport ContributionActivity from './contribution-activity';\nimport LeaderboardCard from './leaderboard-card';\nimport ProgressCard from './progress-card';\nimport StatsCard from './stats-card';\n\nimport './stats.css';\n\nconst StatsPage = ({ allGoals, dashboardLocale }: Props) =>\n allGoals ? (\n \n
\n ) : null;\n\nexport default StatsPage;\n","import { Localized, withLocalization } from '@fluent/react';\nimport * as React from 'react';\nimport { useState } from 'react';\nimport { CustomGoal, CustomGoalParams } from 'common';\nimport { UserClient } from 'common';\nimport URLS from '../../../../urls';\nimport { useAccount, useIsSubscribed } from '../../../../hooks/store-hooks';\nimport { useRouter } from '../../../../hooks/use-router';\nimport { getManageSubscriptionURL } from '../../../../utility';\nimport {\n contributableLocales,\n LocaleLink,\n useLocale,\n} from '../../../locale-helpers';\nimport ShareModal from '../../../share-modal/share-modal';\nimport {\n ArrowLeft,\n CheckIcon,\n CrossIcon,\n PenIcon,\n SettingsIcon,\n ShareIcon,\n} from '../../../ui/icons';\nimport { Button, LabeledSelect, LinkButton } from '../../../ui/ui';\nimport { CircleProgress, Fraction } from '../ui';\nimport { useEffect } from 'react';\n\nconst Buttons = ({ children, ...props }: React.HTMLProps\n {['speak', 'listen'].map(type => {\n const [current, goals] = allGoals.globalGoals[\n type == 'speak' ? 'clips' : 'votes'\n ];\n return (\n !g.date) || { goal: Infinity }).goal\n : null\n }\n />\n );\n })}\n
\n\n \n ({\n ...o,\n [from]: ({ locale }: { locale: string }) => (\n
\n \n {children}\n \n
\n);\n\nconst ArrowButton = (props: React.HTMLProps\n
\n);\n\ninterface CustomGoalStepProps {\n dashboardLocale: string;\n\n completedFields: React.ReactNode;\n currentFields: React.ReactNode;\n\n closeButtonProps: React.HTMLProps\n
\n {Object.keys(current).map(key => {\n const value = (current as any)[key];\n return (\n Custom Goals
\n \n\n \n {key[0].toUpperCase() + key.slice(1)}\n \n
\n );\n })}\n \n
\n\n \n {days_interval == 7 ? 'Of weekly goal' : 'Of daily goal'}\n
\n \n \n \n \n \n \n \n
\n\n \n \n
\n\n {!dashboardLocale && (\n \n \n \n setLocale(event.target.value)}>\n \n {contributableLocales.map(l => (\n \n \n \n ))}\n \n \n
\n )}\n\n \n \n \n \n {currentFields}\n
\n \n \n
\n \n ),\n\n ({\n closeButtonProps,\n completedFields,\n currentFields,\n nextButtonProps,\n state,\n }) => (\n <>\n \n \n \n \n \n \n \n \n
\n \n {completedFields}\n \n \n \n {currentFields}\n
\n \n {completedFields}\n \n \n \n {currentFields}\n
\n \n {completedFields}\n {account.basket_token ? (\n isSubscribed !== null && (\n <>\n \n \n \n \n \n \n \n )}\n \n \n \n \n \n \n \n
\n );\n },\n\n withLocalization(({ getString, nextButtonProps, state }: any) => {\n const [showShareModal, setShowShareModal] = useState(false);\n const isWeekly = state.daysInterval == 7;\n return (\n \n {showShareModal && (\n {\n setShowShareModal(false);\n const { onClick } = nextButtonProps as any;\n if (onClick) {\n onClick();\n }\n }}\n />\n )}\n \n \n \n setShowShareModal(true)}>\n \n \n \n \n
\n );\n }),\n] as React.ComponentType\n \n
\n \n
\n
\n {stepIndex > 0 &&\n stepIndex < 5 &&\n [...(Array(4) as any).keys()].map(i => {\n const n = i + 1;\n const isCompleted =\n state[STATE_KEYS[n]] != null && touchedStepIndex >= n;\n const isActive = n == stepIndex;\n return (\n \n \n setStepIndex(n)}\n disabled={n > 1 && state[STATE_KEYS[n - 1]] == null}>\n {n}\n \n
\n {n < 4 && (\n <>\n \n {completedStates.map(stateKey => {\n if (!states[stateKey]) return null;\n const [labelId, value] = states[stateKey].find(\n ([, value]: any) => value == state[stateKey]\n );\n return (\n \n \n \n \n \n setStepIndex(STATE_KEYS.findIndex(k => k == stateKey))\n }>\n \n );\n })}\n
\n );\n}\n\nfunction CurrentFields({\n setState,\n state,\n states,\n stepIndex,\n}: {\n setState: (state: CustomGoalParams) => void;\n state: CustomGoalParams;\n states: any;\n stepIndex: number;\n}) {\n const currentStateKey = STATE_KEYS[stepIndex];\n return (\n \n {(states[currentStateKey] || []).map(([labelId, value]: any) =>\n value == null ? null : (\n \n setState({\n ...state,\n [currentStateKey]: value,\n // reset following states\n ...STATE_KEYS.slice(stepIndex + 1).reduce(\n (obj: any, key: string) => {\n obj[key] = null;\n return obj;\n },\n {}\n ),\n })\n }>\n {currentStateKey == 'amount' ? (\n <>\n \n \n \n \n \n \n \n ) : (\n \n \n \n )}\n \n )\n )}\n
\n );\n}\n\nexport default function CustomGoal({\n dashboardLocale,\n}: {\n dashboardLocale: string;\n}) {\n const { history, location } = useRouter();\n const api = useAPI();\n const account = useAccount();\n const { custom_goals, email } = account || {};\n const customGoal = custom_goals?.find(g => g.locale == dashboardLocale);\n const refreshUser = useAction(User.actions.refresh);\n const saveAccount = useAction(User.actions.saveAccount);\n\n const hasStartParam = location.search.includes('start');\n const [stepIndex, setStepIndex] = useState(\n !customGoal && hasStartParam ? STEPS.EDIT_START : STEPS.INTRO\n );\n if (hasStartParam) {\n history.replace(location.pathname);\n }\n\n const [touchedStepIndex, setTouchedStepIndex] = useState(STEPS.INTRO);\n const [subscribed, setSubscribed] = useState(false);\n const initialState = customGoal\n ? {\n daysInterval: customGoal.days_interval,\n amount: customGoal.amount,\n type:\n Object.keys(customGoal.current).length == 1\n ? Object.keys(customGoal.current)[0]\n : 'both',\n }\n : {\n daysInterval: null,\n amount: null,\n type: null,\n };\n const [state, setState] = useState\n {showOverwriteModal && (\n setShowOverwriteModal(false),\n Yes: () => {\n setShowOverwriteModal(false);\n handleNext(true);\n },\n }}\n onRequestClose={() => setShowOverwriteModal(false)}>\n \n \n \n
\n\n \n \n \n )}\n {showAbortEditModal && (\n setShowAbortEditModal(false),\n Yes: () => {\n setShowAbortEditModal(false);\n setState(initialState);\n setTouchedStepIndex(STEPS.INTRO);\n setStepIndex(STEPS.INTRO);\n },\n }}\n onRequestClose={() => setShowAbortEditModal(false)}>\n \n \n \n
\n\n \n \n \n )}\n {\n setTouchedStepIndex(Math.max(touchedStepIndex, i));\n setStepIndex(i);\n }}\n {...{ state, stepIndex, touchedStepIndex }}\n />\n {showViewGoal ? (\n handleNext()}\n customGoal={customGoal}\n />\n ) : (\n {\n setShowAbortEditModal(true);\n },\n style: customGoal ? {} : { visibility: 'hidden' },\n }}\n completedFields={\n
\n );\n}\n","import * as React from 'react';\nimport { Localized } from '@fluent/react';\nimport { GlobalGoal } from 'common';\n\nimport './goal-row.css';\n\nconst Wave = () => (\n \n);\n\nconst GoalBox = ({\n date,\n goal,\n isNext,\n type,\n}: GlobalGoal & { isNext: boolean; type: string }) => (\n \n
\n
\n {(date || isNext) &&
\n\n \n \n {date && (\n
\n);\n\nexport default function GoalRow({\n goalInfo: [type, [current, goals]],\n}: {\n goalInfo: [string, [number, GlobalGoal[]]];\n}) {\n return (\n {goal}
\n \n
\n {new Date(date).toLocaleDateString(undefined, {\n year: 'numeric',\n month: 'short',\n day: 'numeric',\n })}\n
\n )}\n \n \n \n \n
\n );\n}\n","import * as React from 'react';\nimport Props from '../props';\nimport CustomGoal from './custom-goal';\nimport GoalRow from './goal-row';\n\nimport './goals.css';\n\nconst GoalsPage = ({ allGoals, dashboardLocale }: Props) => (\n \n {goals.map((goal, i) => (\n
\n \n
\n);\n\nexport default GoalsPage;\n","import * as React from 'react';\nimport { useEffect } from 'react';\nimport { useAccount, useAction, useAPI } from '../../../../hooks/store-hooks';\nimport { User } from '../../../../stores/user';\nimport URLS from '../../../../urls';\nimport { MicIcon, PlayOutlineIcon } from '../../../ui/icons';\nimport { LinkButton } from '../../../ui/ui';\nimport Props from '../props';\n\nimport './awards.css';\n\nconst NoAwardsPage = ({ dashboardLocale }: { dashboardLocale: string }) => (\n \n {allGoals &&\n Object.entries(allGoals.globalGoals).map((goalInfo, i) => (\n
\n \n })
\n \n Get started with goals\n \n
\n);\n\nconst INTERVAL_LABELS: { [key: number]: string } = {\n 1: 'Daily',\n 7: 'Weekly',\n};\n\nconst Wave = () => (\n \n);\n\nconst AwardBox = ({ award }: any) => (\n \n Earn your first award, create a goal
\nWhen you complete a personal goal, your awards will show up here.
\n})
\n \n {INTERVAL_LABELS[award.days_interval] || award.days_interval}\n
\n \n {award.amount} Clips
\n \n {award.type[0].toUpperCase() + award.type.slice(1)}\n
\n \n {({ speak:
\n \n {buckets.map((bucket: any[], i: number) =>\n bucket ? (\n \n \n ) : null\n )}\n
\n );\n}\n","import * as React from 'react';\nimport { Avatar } from '../../../ui/ui';\nimport { ChallengeTeamToken } from 'common';\nimport { challengeLogos } from './constants';\n\nexport default ({ team }: { team: ChallengeTeamToken }) => {\n const logo = challengeLogos[team];\n if (!logo) return null;\n const { url, background, border } = logo;\n return (\n {INTERVAL_LABELS[i] || i}
\n- \n {bucket.map((award, i) => (\n
\n
\n );\n}\n","import * as React from 'react';\nimport WeeklyChallengeBoard from './weekly-challenge-board';\nimport { WeeklyChallenge } from 'common';\nimport { useAccount, useNotifications } from '../../../../hooks/store-hooks';\nimport NotificationPill from '../../../notification-pill/notification-pill';\nimport { FINAL_CHALLENGE_WEEK, weeklyChallengeCopy } from './constants';\nimport { ChevronDown } from '../../../ui/icons';\nimport './weekly-challenge.css';\n\nexport default function WeeklyChallenge({\n weekly,\n}: {\n weekly?: WeeklyChallenge;\n}) {\n let currentWeek = weekly.week;\n let pastWeek: Array\n
\n {!isDisabled && (\n {weeklyChallengeCopy[week].title}
\nWeek {week + 1}
\n \n
\n )}\n \n
\n \n
\n Individual
\n\n
\n \n \n Speak\n \n \n
\n \n \n \n Listen\n \n \n
\n \n
\n \n
\n Team
\n\n
\n \n {/* TODO: Change .team-text and .team-invite classNames. */}\n
\n \n {weeklyChallengeCopy[week].subtitle}\n
\n \n\n {weeklyChallengeCopy[week].explanation}\n
\n\n
\n \n of {team.invite_total} invites\n
\n\n
\n );\n}\n","// Largely copied from `leaderboard-card.tsx`.\n// TODO: Refactor to reduce duplication with the LeaderboardCard component.\nimport * as React from 'react';\nimport API from '../../../../services/api';\nimport { User } from '../../../../stores/user';\nimport StateTree from '../../../../stores/tree';\nimport { Avatar } from '../../../ui/ui';\nimport TeamAvatar from './team-avatar';\nimport { CheckIcon } from '../../../ui/icons';\nimport { connect } from 'react-redux';\nimport { challengeTeams } from 'common';\n\nconst PointsIcon = ({ className }: { className: string }) => (\n \n);\nconst FetchRow = (props: React.HTMLProps\n
\n Weekly Challenge
\n\n Week\n {weeklyChallengeCopy.map((_, index) => (\n \n {index + 1}\n \n ))}\n
\n \n {notifications\n .map(\n notification =>\n notification.kind == 'pill' &&\n notification.type === 'achievement' && (\n
\n \n
\n \n
\n {currentWeek < FINAL_CHALLENGE_WEEK && (\n Current challenge
\n {weekly && (\n\n Show All Challenges
\n
\n )}\n Next challenge
\n {weekly && (\n\n
\n {`${\n currentWeek ? 'Past' : 'Future'\n } challenge${currentWeek === FINAL_CHALLENGE_WEEK ? 's' : ''}`}
\n {currentWeek === 0\n ? weekly && (\n\n
\n \n {row.position + 1 < 10 && '0'}\n {row.position + 1}\n
\n \n
\n \n {row.name || '???'}\n
\n \n {row.w1_points && week > 0 ? (\n <>\n
\n \n {row.w2_points && week > 1 ? (\n <>\n
\n \n {row.w3_points && (week > 2 || challengeComplete) ? (\n <>\n
\n {row.w3_points || 'N/A'}
\n \n ) : (\n \n
\n \n {row.position + 1 < 10 && '0'}\n {row.position + 1}\n
\n \n
\n \n {row.name || '???'}\n
\n \n
\n \n
\n {row.accuracy || 'N/A'} %
\n \n ),\n !!nextPosition &&\n nextPosition - 1 > row.position &&\n nextPosition - FETCH_SIZE > row.position && (\n })
\n })
\n\n })
\n