(null);
+
+ // const bpuid = useAppSelector(state => state.app.bpuid)
+ const bpuid = undefined
+
+ useEffect(() => {
+ new LeaderboardApi().timespanLeaderboardProductIdLeaderboardTimespanBoardCodeGet(
+ bpid,
+ LeaderboardCode.CompleteCount,
+ frequency,
+ "us",
+ bpuid, // bpuid
+ undefined, // within_time
+ 10)
+ .then(res => {
+ setCompletes(res.data.leaderboard as Leaderboard)
+ })
+
+ new LeaderboardApi().timespanLeaderboardProductIdLeaderboardTimespanBoardCodeGet(
+ bpid,
+ LeaderboardCode.SumUserPayout,
+ frequency,
+ "us",
+ bpuid,
+ undefined,
+ 10)
+ .then(res => {
+ setPayouts(res.data.leaderboard as Leaderboard)
+ })
+ }, [frequency]);
+
+ let dateRange = " - "
+ if (completes) {
+ const start = moment(completes?.start_timestamp * 1000).format("MMM Do, ha");
+ const end = moment(completes?.end_timestamp * 1000).format("MMM Do, h:mm:ssa");
+ //dateRange = `${start} – ${end} (${completes?.timezone_name})`;
+ dateRange = `${start} – ${end}`;
+ }
+
+ return (
+
+
+ {/* Left spacer (hidden on small screens) */}
+
+
+ {/* Centered text */}
+
+ Leaderboards
+
+
+ {/* Right-aligned button group */}
+
+
+
+
+
+
+
+
+
+ Most earned in the past week.
+
+
+
+ Rank
+ Bonus
+ User
+
+
+
+
+ {payouts?.rows?.map((dataItem: LeaderboardRow) => (
+
+
+ {dataItem.rank}
+
+
+ {formatCentsToUSD(dataItem.value)}
+
+
+ {truncate(dataItem.bpuid, 6, "*****").toUpperCase()}
+
+
+ ))}
+
+
+
+
+
+ Top completes in the past week.
+
+
+
+ Rank
+ Completes
+ User
+
+
+
+
+ {completes?.rows?.map((dataItem: LeaderboardRow, index: number) => (
+
+
+ {dataItem.rank ?? showSmartRank(dataItem, index, completes?.rows)}
+
+
+ {dataItem.value}
+
+
+ {truncate(dataItem.bpuid, 6, "*****").toUpperCase()}
+
+
+ ))}
+
+
+
+
+
+
+
+ {users_f} people are actively attempting {surveys_f} available surveys right now.
+
+
+
+
+
+
+
+ Get paid to take surveys. Our algorithm attempts to pair you with the
+ highest paying survey available at the moment (right now, the highest
+ paying survey is {survey_max_cpi_f}) that you are eligible for,
+ each attempt is a valid HIT. Try as many as you can, our system will
+ self regulate you: we want to ensure you have a high chance of being
+ paired with a survey based on what surveys are available, as their
+ availability constantly changes.
+
+ Each HIT is paid when you attempt to take a survey and if you complete
+ the survey, you will be awarded a bonus equal to that in which the
+ survey pays out.
+
+
Survey Completed
+ Congratulations! You completed the Survey.
+ {ts?.user_payout_string}
+ You may close this tab and return to submit the HIT
+
+ )
+}
+
+export const Enter = () => {
+ return (
+ <>
+ Entered
+ You're currently in the Survey
+ You may close this tab and return to submit the HIT
+
+ )
+}
+
+export const InComplete = () => {
+ const ts = useAppSelector(state => state.app.taskStatus)
+ if (!ts) { return null; }
+
+ return (
+ <>
+ HIT Complete
+ Survey terminated the attempt.
+ You may close this tab and return to submit the HIT
+
+
+ )
+}
+
+export const Unknown = () => {
+
+ return (
+ <>
+ Task Issue
+ You're not currently eligible for any Surveys
+ You may close this tab and return to submit the HIT
+
+ )
+}
+
+export const Loading = () => {
+
+ return (
+ Loading...
+ )
+}
+
+
+const Result = () => {
+
+ const ts = useAppSelector(state => state.app.taskStatus)
+
+ const confettiCannons = () => {
+ const end = Date.now() + 3 * 1000
+ const colors = ["#84cc16", "#1e3a8a", "#ec4899"]
+ const frame = () => {
+ if (Date.now() > end) return
+ confetti({
+ particleCount: 3,
+ angle: 60,
+ spread: 55,
+ startVelocity: 80,
+ gravity: 0.7,
+ origin: { x: 0, y: 0.8 },
+ colors: colors,
+ })
+ confetti({
+ particleCount: 3,
+ angle: 120,
+ spread: 55,
+ startVelocity: 80,
+ gravity: 0.7,
+ origin: { x: 1, y: 0.8 },
+ colors: colors,
+ })
+ requestAnimationFrame(frame)
+ }
+ frame()
+ }
+
+ useEffect(() => {
+ if (ts?.status === 3) {
+ confettiCannons()
+ }
+ }, [ts])
+
+
+ switch (ts?.status) {
+ case 0: // UNKNOWN
+ return ([]);
+
+ const bpuid = useAppSelector(state => state.app.bpuid)
+ const ts = useAppSelector(state => state.app.taskStatus)
+
+ const handleCheckboxChange = (value: ReportValue, checked: boolean) => {
+ setSelectedValues(prev =>
+ checked
+ ? [...prev, value]
+ : prev.filter(v => v !== value)
+ );
+ };
+
+ const clicked_submit = () => {
+ if (!bpuid) return;
+ // ReportValue.NUMBER_0
+ console.log("selectedValues:", selectedValues);
+
+ const rt: ReportTask = {
+ 'bpuid': bpuid,
+ 'reasons': selectedValues,
+ 'notes': ""
+ };
+
+ new ReportApi().reportTaskProductIdReportPost(
+ bpid, // productId
+ rt, // reportTask
+ ).then(res => {
+ console.log("Response:", res); // Check what's actually here
+
+ if (res.status === 400) {
+ // Handle error here instead
+ } else {
+ setShowComplete(true);
+ }
+ })
+ }
+
+ const reportReasons = [
+ { id: 'TECHNICAL_ERROR', label: 'Technical Error', value: ReportValue.NUMBER_1 },
+ { id: 'NO_REDIRECT', label: 'No Redirect', value: ReportValue.NUMBER_2 },
+ { id: 'PRIVACY_INVASION', label: 'Privacy Invasion', value: ReportValue.NUMBER_3 },
+ { id: 'UNCOMFORTABLE_TOPICS', label: 'Uncomfortable Topics', value: ReportValue.NUMBER_4 },
+ { id: 'ASKED_FOR_NOT_ALLOWED_ACTION', label: 'Asked for Not Allowed Action', value: ReportValue.NUMBER_5 },
+ { id: 'BAD_ON_MOBILE', label: 'Bad on Mobile', value: ReportValue.NUMBER_6 },
+ { id: 'DIDNT_LIKE', label: "Didn't Like", value: ReportValue.NUMBER_7 },
+ ];
+
+ if (!ts?.finished) {
+ return Please finish a Task to report its status.
+ }
+
+ if (showComplete) {
+ return
+
+
+
+ Please select all reasons why you are reporting this Task:
+
+
+ You must provide at least one reason to report a Task.
+
+
+
+ {reportReasons.map((reason) => (
+
+
+ handleCheckboxChange(reason.value, checked as boolean)
+ }
+ />
+
+ {reason.label}
+
+
+ ))}
+
+
+
+
+
+
+
+ Submit and Complete HIT
+
+
(null);
+
+ useEffect(() => {
+ if (!ts) return;
+ if (!bpuid) return;
+ if (!assignment_id) return;
+ if (!turkSubmitTo) return;
+
+ if (formRef.current) {
+ formRef.current.submit();
+ }
+ }, [ts?.tsid, bpuid, assignment_id, turkSubmitTo]);
+
+ return (
+ <>
+
+
+ )
+}
+
+
+const SurveyMonitor = () => {
+ const dispatch = useAppDispatch()
+
+ const [isPolling, setIsPolling] = useState(true);
+ // const [timeAgo, setTimeAgo] = useState("");
+
+ const [showComplete, setShowComplete] = useState(false);
+ const [showReport, setShowReport] = useState(false);
+
+ const bpuid = useAppSelector(state => state.app.bpuid)
+ const entered = useAppSelector(state => state.app.currentBucketEntered)
+ const isLow = useAppSelector(state => isLowBalance(state))
+
+ const ts = useAppSelector(state => state.app.taskStatus)
+ const isBaddie = ts?.status_code_1 === "SESSION_START_FAIL" || ts?.status_code_1 === "SESSION_START_QUALITY_FAIL" || ts?.status_code_1 === "SESSION_CONTINUE_QUALITY_FAIL";
+
+ // useEffect(() => {
+ // if (!ts) return;
+
+ // const updateTimeAgo = () => {
+ // const time_ago = moment(ts.started).fromNow();
+ // setTimeAgo(time_ago);
+ // };
+
+ // // Update immediately
+ // updateTimeAgo();
+
+ // // Then update every minute
+ // const intervalId = setInterval(updateTimeAgo, 60 * 1000);
+
+ // return () => clearInterval(intervalId);
+ // }, [ts]);
+
+ useEffect(() => {
+ if (!bpuid) return;
+ if (!entered) return;
+ if (!isPolling) return;
+
+ const pollApi = async () => {
+ new StatusApi().listTaskStatusesProductIdStatusGet(
+ bpid, // productId
+ bpuid, // Worker ID
+ entered, // startedAfter
+ moment.utc().unix() // startedBefore
+ ).then(res => {
+ const d = res.data as TasksStatusResponse;
+
+ if (!d.tasks_status || d.tasks_status.length === 0) {
+ // Likely still in a GRS survey
+ return;
+ }
+
+ // if (d_len >= 2) Sentry.captureMessage("Results returned back multiple")
+ const ts = d.tasks_status![0] as TaskStatusResponse;
+ dispatch(setTaskStatus(ts))
+
+ if (ts.status == 2 || ts.status == 3) {
+ // INCOMPLETE + COMPLETE
+ setIsPolling(false);
+ }
+ });
+
+ // If there is already a TaskStatus, update the time ago
+ // if (ts) {
+ // const time_ago = moment(ts.started).fromNow();
+ // setTimeAgo(time_ago);
+ // }
+ };
+
+ // Call immediately on mount, then set up interval
+ pollApi();
+ const intervalId = setInterval(pollApi, 4 * 1000);
+
+ // Cleanup: stop interval when component unmounts or isPolling changes
+ return () => clearInterval(intervalId);
+ }, [isPolling, entered]);
+
+ if (!ts) {
+ return (
+ Loading
+ )
+ }
+
+ // This is if they are actively in a survey or we can't determine the
+ // status yet. We want to show the timer and keep them on this page to
+ // monitor for completion. This gets shown no matter what regardless of
+ // balance.
+ //
+ // 0 - UNKNOWN, 1 - ENTER
+ if (ts.status === 0 || ts.status === 1) {
+ return (
+ <>
+
+
+ In Progress
+
+
+ We're actively monitoring your Task status.
+
+
+
+ {ts.status === 3 ? "Survey Complete!" : "Survey Terminated."}
+
+
+ {((ts.status === 3 || !isLow) && !isBaddie) && (
+
+ You may now submit the HIT.
+
+ )}
+
+
+ Quality Check Failed.
+
+
+ Unfortunately, it looks like you did not pass the quality check for this survey.
+
+
+
+ Please return the HIT to avoid having your assignment rejected.
+
+
+
+ setShowComplete(true)}
+ >Submit HIT
+
+ setShowReport(!showReport)}
+ >Report Survey
+
+
+ {showComplete && setShowReport(false)} />}
+
+ ) : (
+
+
+ Your balance is low. You cannot submit the HIT at this time.
+
+
+
+ Please return the HIT to avoid having your assignment rejected.
+
+
+
+ I have {time_f} minutes
+
+
+ The average time spent is {avg_time_f} minutes and pays {avg_pay_f}
+
= {
+ [OfferwallReason.UserBlocked]: {
+ label: "Account Restricted",
+ description: "Your account has been restricted.",
+ },
+ [OfferwallReason.HighReconRate]: {
+ label: "High Reconciliation Rate",
+ description: "Your account has an unusually high reconciliation rate.",
+ },
+ [OfferwallReason.UncommonDemographics]: {
+ label: "Demographic Mismatch",
+ description: "No surveys require your current demographics.",
+ },
+ [OfferwallReason.UnderMinimumAge]: {
+ label: "Age Requirement Not Met",
+ description: "You must meet the minimum age requirement to participate.",
+ },
+ [OfferwallReason.ExhaustedHighValueSupply]: {
+ label: "No Premium Offers Available",
+ description: "You've attempted all premium surveys.",
+ },
+ [OfferwallReason.AllEligibleAttempted]: {
+ label: "All Offers Attempted",
+ description: "You've attempted all available surveys.",
+ },
+ [OfferwallReason.LowCurrentSupply]: {
+ label: "Limited Availability",
+ description: "There are currently limited opportunities available.",
+ },
+ };
+
+ function formatReasons(reasons: OfferwallReason[]): { label: string; description: string }[] {
+ return reasons.map((r) => REASON_DISPLAY[r]);
+ }
+
+ return (
+ <>
+
+
+ No Surveys available…
+
+
()
+ const columns = [
+ columnHelper.display({
+ id: 'index',
+ header: '#',
+ cell: ({ row }) => row.index + 1,
+ size: 25,
+ meta: {
+ align: 'center'
+ }
+ }),
+ columnHelper.accessor('source', {
+ header: () => 'Marketplace',
+ cell: (props) => {
+ const s = props.getValue()
+ return formatSource(s)
+ },
+ size: 85,
+ meta: {
+ align: 'left'
+ }
+ }),
+ columnHelper.accessor('id', {
+ header: () => 'Survey ID',
+ cell: props => {
+ return truncate(props.getValue(), 6, "*****").toUpperCase()
+ },
+ size: 70,
+ meta: {
+ align: 'left'
+ }
+ }),
+ columnHelper.accessor('payout', {
+ header: () => 'Amount',
+ cell: (props) => {
+ const val = props.renderValue() as number;
+ return formatCentsToUSD(val)
+ },
+ size: 50,
+ meta: {
+ align: 'center'
+ }
+ }),
+ columnHelper.accessor('loi', {
+ header: () => 'Duration',
+ cell: (props) => {
+ const val = props.renderValue() as number;
+ return `${Math.round(val / 60)} min`
+ },
+ size: 50,
+ meta: {
+ align: 'center'
+ }
+ }),
+ ]
+
+ const table = useReactTable({
+ 'data': bucket.contents,
+ 'columns': columns,
+ getCoreRowModel: getCoreRowModel(),
+ });
+
+ return (
+ <>
+ setShowDetails(!showDetails)}
+ >
+ ({showDetails ? 'Hide' : 'Show'} details of surveys in this bucket)
+
+
+ {showDetails && (
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+
+ {headerGroup.headers.map((header) => {
+ const align = header.column.columnDef.meta?.align || 'left';
+ const alignClass = align === 'center' ? 'text-center' : align === 'right' ? 'text-right' : 'text-left';
+
+ return (
+
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext(),
+ )}
+
+ )
+ })}
+
+ ))}
+
+
+ {table.getRowModel().rows.map((row) => (
+
+ {row.getVisibleCells().map((cell) => {
+ const align = cell.column.columnDef.meta?.align || 'left';
+ const alignClass = align === 'center' ? 'text-center' :
+ align === 'right' ? 'text-right' : 'text-left';
+
+ return (
+
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
+
+ )
+ })}
+
+ ))}
+
+
+
+
+
+ Your balance is low.
+
+
+ You may continue to attempt surveys, but you will be
+ advised to return the HIT if your survey attempt does
+ not result in a complete.
+
+
+ HIT submissions with a balance exceeding -$1.00 will
+ return in rejected assignments.
+
+
+
+
+ {bucket.eligibility_explanation}
+
+
+
+ No Assignment ID found. Please access this page through
+ the Amazon Mechanical Turk platform.
+
+ )
+ }
+
+ return (
+ <>
+ {entered ? (
+