Merges pull request #3

Off of Amazon!!!

1 files changed, 744 insertions, 691 deletions

diff --git a/jb-ui/src/pages/Work.tsx b/jb-ui/src/pages/Work.tsx
index c54732f..6d0b1c1 100644
--- a/jb-ui/src/pages/Work.tsx
+++ b/jb-ui/src/pages/Work.tsx
@@ -1,765 +1,818 @@
+import { useGetMeQuery } from "@/models/authAPI";
+import { Link } from "react-router-dom";
 import {
-    BucketTask,
-    OfferwallApi,
-    OfferwallReason,
-    ReportApi, ReportTask, ReportValue, StatusApi,
-    TasksStatusResponse, TaskStatusResponse, TopNPlusBlockOfferWall
+  BucketTask,
+  OfferwallApi,
+  OfferwallReason,
+  ReportApi,
+  ReportTask,
+  ReportValue,
+  StatusApi,
+  TasksStatusResponse,
+  TaskStatusResponse,
+  TopNPlusBlockOfferWall,
 } from "@/api_fsb";
+import Preview from "@/pages/Preview";
 
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
-    Field,
-    FieldDescription,
-    FieldGroup,
-    FieldLabel,
-    FieldLegend,
-    FieldSet,
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
 } from "@/components/ui/field";
 import { useAppDispatch, useAppSelector } from "@/hooks";
 import { bpid, formatCentsToUSD, formatSource, truncate } from "@/lib/utils";
 import {
-    getAvailabilityCount, getLOIText,
-    isLowBalance,
-    selectBucket,
-    setAttemptedLiveEligibleCount,
-    setAvailabilityCount,
-    setCurrentBuckets,
-    setEnteredTimestamp, setLOI,
-    setOfferwallReasons,
-    setTaskStatus
+  getAvailabilityCount,
+  getLOIText,
+  isLowBalance,
+  selectBucket,
+  setAttemptedLiveEligibleCount,
+  setAvailabilityCount,
+  setCurrentBuckets,
+  setEnteredTimestamp,
+  setLOI,
+  setOfferwallReasons,
+  setTaskStatus,
 } from "@/models/appSlice";
 import {
-    createColumnHelper, flexRender, getCoreRowModel,
-    useReactTable
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
 } from "@tanstack/react-table";
 import { XIcon } from "lucide-react";
 import moment from "moment/moment";
-import { useEffect, useRef, useState } from "react";
-import Markdown from 'react-markdown';
+import { useEffect, useState } from "react";
+import Markdown from "react-markdown";
 
 const Report = ({ onClose }: { onClose: () => void }) => {
-    const [showComplete, setShowComplete] = useState(false);
-    const [selectedValues, setSelectedValues] = useState<ReportValue[]>([]);
-
-    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 [, setShowComplete] = useState(false);
+  const [selectedValues, setSelectedValues] = useState<ReportValue[]>([]);
+  const { data: user } = useGetMeQuery();
+  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 (!user?.product_user_id) return;
+    // ReportValue.NUMBER_0
+    console.log("selectedValues:", selectedValues);
+
+    const rt: ReportTask = {
+      bpuid: user.product_user_id,
+      reasons: selectedValues,
+      notes: "",
     };
 
-    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 <p>Please finish a Task to report its status.</p>
-    }
-
-    if (showComplete) {
-        return <SubimtAMT />
-    }
-
-    return (
-        <div className="border-2 border-rose-200 rounded">
-            <div className="flex justify-center">
-                <FieldSet className="mt-2">
-                    <FieldLegend variant="label" className="my-0 text-rose-950">
-                        Please select all reasons why you are reporting this Task:
-                    </FieldLegend>
-                    <FieldDescription className="my-0 text-rose-950">
-                        You must provide at least one reason to report a Task.
-                    </FieldDescription>
-                    <FieldGroup className="gap-2 my-0 py-0">
-
-                        {reportReasons.map((reason) => (
-                            <Field key={reason.id} orientation="horizontal" className="
-                            hover:cursor-pointer">
-                                <Checkbox
-                                    id={reason.id}
-                                    name={reason.id}
-                                    onCheckedChange={(checked) =>
-                                        handleCheckboxChange(reason.value, checked as boolean)
-                                    }
-                                />
-                                <FieldLabel
-                                    htmlFor={reason.id}
-                                    className="font-medium text-rose-950
+    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 <p>Please finish a Task to report its status.</p>;
+  }
+
+  // TODO! What do we do here, redirect back to / with a thank you + wallet refresh?
+  // if (showComplete) {
+  // return <SubimtAMT />;
+  // }
+
+  return (
+    <div className="border-2 border-rose-200 rounded">
+      <div className="flex justify-center">
+        <FieldSet className="mt-2">
+          <FieldLegend variant="label" className="my-0 text-rose-950">
+            Please select all reasons why you are reporting this Task:
+          </FieldLegend>
+          <FieldDescription className="my-0 text-rose-950">
+            You must provide at least one reason to report a Task.
+          </FieldDescription>
+          <FieldGroup className="gap-2 my-0 py-0">
+            {reportReasons.map((reason) => (
+              <Field
+                key={reason.id}
+                orientation="horizontal"
+                className="
+                            hover:cursor-pointer"
+              >
+                <Checkbox
+                  id={reason.id}
+                  name={reason.id}
+                  onCheckedChange={(checked) =>
+                    handleCheckboxChange(reason.value, checked as boolean)
+                  }
+                />
+                <FieldLabel
+                  htmlFor={reason.id}
+                  className="font-medium text-rose-950
                                     hover:cursor-pointer hover:font-semibold"
-                                >
-                                    {reason.label}
-                                </FieldLabel>
-                            </Field>
-                        ))}
-
-                    </FieldGroup>
-                </FieldSet>
-            </div>
-            <div className="flex justify-center my-2 space-x-5">
-                <Button variant="outline" size="icon" aria-label="Submit"
-                    className="
+                >
+                  {reason.label}
+                </FieldLabel>
+              </Field>
+            ))}
+          </FieldGroup>
+        </FieldSet>
+      </div>
+      <div className="flex justify-center my-2 space-x-5">
+        <Button
+          variant="outline"
+          size="icon"
+          aria-label="Submit"
+          className="
                     border-2 rounded border-zinc-800 text-zinc-800
                     hover:cursor-pointer hover:bg-zinc-800 hover:text-zinc-50"
-                    onClick={onClose}>
-                    <XIcon />
-                </Button>
-                <Button variant="outline"
-                    className="
+          onClick={onClose}
+        >
+          <XIcon />
+        </Button>
+        <Button
+          variant="outline"
+          className="
                     border-2 rounded border-rose-400 text-rose-950
                     hover:cursor-pointer hover:bg-rose-400 hover:text-rose-50"
-                    onClick={clicked_submit}>Submit and Complete HIT</Button>
-            </div>
-        </div>
-    )
-}
+          onClick={clicked_submit}
+        >
+          Submit and Complete Attempt
+        </Button>
+      </div>
+    </div>
+  );
+};
 
-const SubimtAMT = () => {
-    const bpuid = useAppSelector(state => state.app.bpuid)
-    const assignment_id = useAppSelector(state => state.app.assignment_id)
-    const ts = useAppSelector(state => state.app.taskStatus)
-    const turkSubmitTo = useAppSelector(state => state.app.turkSubmitTo)
+const SurveyMonitor = () => {
+  const dispatch = useAppDispatch();
 
-    const formRef = useRef<HTMLFormElement>(null);
+  const [isPolling, setIsPolling] = useState(true);
+  // const [timeAgo, setTimeAgo] = useState("");
 
-    useEffect(() => {
-        if (!ts) return;
-        if (!bpuid) return;
-        if (!assignment_id) return;
-        if (!turkSubmitTo) return;
+  const [, setShowComplete] = useState(false);
+  const [showReport, setShowReport] = useState(false);
 
-        if (formRef.current) {
-            formRef.current.submit();
-        }
-    }, [ts?.tsid, bpuid, assignment_id, turkSubmitTo]);
+  const { data: user } = useGetMeQuery();
+  const entered = useAppSelector((state) => state.app.currentBucketEntered);
+  const isLow = useAppSelector((state) => isLowBalance(state));
 
-    return (
-        <>
-            <form
-                ref={formRef}
-                action={`${turkSubmitTo}/mturk/externalSubmit`}
-                method="POST"
-                style={{ display: 'none' }}>
-                <input type="hidden" name="assignmentId" value={assignment_id} />
-                <input type="hidden" name="tsid" value={ts?.tsid} />
-                <input type="hidden" name="amt_assignment_id" value={assignment_id} />
-                <input type="hidden" name="amt_worker_id" value={bpuid} />
-                <button type="submit">Submit HIT</button>
-            </form>
-        </>
-    )
-}
+  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 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 (
-            <p>Loading</p>
-        )
-    }
-
-    // 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 (
-            <>
-                <div>
-                    <h2 className="
-                    bg-blue-500 rounded py-2
-                    text-white text-2xl font-semibold text-center">
-                        In Progress
-                    </h2>
-                    <p className="
-                    py-4
-                    text-zinc-500 text-2xl font-semibold text-center">
-                        We're actively monitoring your Task status.
-                    </p>
-                </div>
-            </>
+  //     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 (!user?.product_user_id) return;
+    if (!entered) return;
+    if (!isPolling) return;
+
+    const pollApi = async () => {
+      new StatusApi()
+        .listTaskStatusesProductIdStatusGet(
+          bpid, // productId
+          user.product_user_id, // 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);
+          }
+        });
 
-    // This is if they have finished a survey complete and it resulted in a 
-    // COMPLETE or a INCOMPLETE (doesn't matter). They can now submit the HIT.
-    //
-    // 2 - INCOMPLETE, 3 - COMPLETE
+      // 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 <p>Loading</p>;
+  }
+
+  // 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 (
-        <>
-            <div>
-                <h2 className="
+      <>
+        <div>
+          <h2
+            className="
                     bg-blue-500 rounded py-2
-                    text-white text-2xl font-semibold text-center">
-                    {ts.status === 3 ? "Survey Complete!" : "Survey Terminated."}
-                </h2>
-
-                {((ts.status === 3 || !isLow) && !isBaddie) && (
-                    <p className="
+                    text-white text-2xl font-semibold text-center"
+          >
+            In Progress
+          </h2>
+          <p
+            className="
+                    py-4
+                    text-zinc-500 text-2xl font-semibold text-center"
+          >
+            We're actively monitoring your Task status.
+          </p>
+        </div>
+      </>
+    );
+  }
+
+  // This is if they have finished a survey complete and it resulted in a
+  // COMPLETE or a INCOMPLETE (doesn't matter). They can now submit the Attempt.
+  //
+  // 2 - INCOMPLETE, 3 - COMPLETE
+  return (
+    <>
+      <div>
+        <h2
+          className="
+                    bg-blue-500 rounded py-2
+                    text-white text-2xl font-semibold text-center"
+        >
+          {ts.status === 3 ? "Survey Complete!" : "Survey Terminated."}
+        </h2>
+
+        {(ts.status === 3 || !isLow) && !isBaddie && (
+          <p
+            className="
                     py-2
-                    text-zinc-500 text-md font-medium text-center">
-                        You may now submit the HIT.
-                    </p>
-                )}
-            </div>
-
-            {(isBaddie) ? (
-                <>
-                    <div className="
+                    text-zinc-500 text-md font-medium text-center"
+          >
+            You may now submit the attempt.
+          </p>
+        )}
+      </div>
+
+      {isBaddie ? (
+        <>
+          <div
+            className="
                     border-2 border-rose-500 rounded py-2
-                    bg-rose-400 text-rose-700">
-                        <h2 className="text-center text-xl font-bold text-white">
-                            Quality Check Failed.
-                        </h2>
-                        <p className="px-4 py-2 text-center text-sm font-medium text-white">
-                            Unfortunately, it looks like you did not pass the quality check for this survey.
-                        </p>
-
-                        <p className="
+                    bg-rose-400 text-rose-700"
+          >
+            <h2 className="text-center text-xl font-bold text-white">
+              Quality Check Failed.
+            </h2>
+            <p className="px-4 py-2 text-center text-sm font-medium text-white">
+              Unfortunately, it looks like you did not pass the quality check
+              for this survey.
+            </p>
+
+            <p
+              className="
                     pt-0 pb-4
-                    text-red-950 text-sm font-semibold text-center">
-                            Please return the HIT to avoid having your assignment rejected.
-                        </p>
-                    </div>
-                </>
-
-            ) : (
-                <>
-                    {(ts.status === 3 || !isLow) ? (
-                        <>
-                            <div className="flex justify-center my-4 space-x-5">
-
-                                <button type="button" className="
+                    text-red-950 text-sm font-semibold text-center"
+            >
+              <Link to="/" reloadDocument>
+                Click to Refresh and Try Again
+              </Link>
+            </p>
+          </div>
+        </>
+      ) : (
+        <>
+          {ts.status === 3 || !isLow ? (
+            <>
+              <div className="flex justify-center my-4 space-x-5">
+                <button
+                  type="button"
+                  className="
                 border-4 rounded border-emerald-400 py-1 px-3
                 text-xl font-bold text-emerald-950
                 hover:cursor-pointer hover:bg-emerald-400 hover:text-emerald-50"
-                                    onClick={() => setShowComplete(true)}
-                                >Submit HIT</button>
-
-                                <button type="button" className="
+                  onClick={() => setShowComplete(true)}
+                >
+                  Finish Attempt
+                </button>
+
+                <button
+                  type="button"
+                  className="
                 border-4 rounded border-rose-200 py-1 px-3
                 text-xl font-bold text-rose-200
                 hover:cursor-pointer hover:border-rose-500 hover:bg-rose-400 hover:text-rose-50"
-                                    onClick={() => setShowReport(!showReport)}
-                                >Report Survey</button>
-                            </div>
-
-                            {showComplete && <SubimtAMT />}
-                            {showReport && <Report onClose={() => setShowReport(false)} />}
-                        </>
-                    ) : (
-                        <div>
-                            <p className="
-                    text-red-600 text-lg font-semibold text-center">
-                                Your balance is low. You cannot submit the HIT at this time.
-                            </p>
-
-                            <p className="
-                    pt-0 pb-4
-                    text-red-950 text-sm font-semibold text-center">
-                                Please return the HIT to avoid having your assignment rejected.
-                            </p>
-                        </div>
-                    )}
-                </>
-
-            )}
-
-
+                  onClick={() => setShowReport(!showReport)}
+                >
+                  Report Survey
+                </button>
+              </div>
+              {/* TODO! What do we do here, redirect back to / with wallet */}
+              {/* TODO! refresh? The confetti is on a different page. */}
+              {/* {showComplete && <SubimtAMT />} */}
+              {showReport && <Report onClose={() => setShowReport(false)} />}
+            </>
+          ) : (
+            <div>
+              <p
+                className="
+                    text-red-600 text-lg font-semibold text-center"
+              >
+                Your balance is low.
+              </p>
+            </div>
+          )}
         </>
-    )
-}
-
+      )}
+    </>
+  );
+};
 
 const LOISelect = () => {
-    // This is what's responsible for being able to click on the text 
-    //  we set the global LOI times.
-
-    const dispatch = useAppDispatch()
-    const loi: number = useAppSelector(state => state.app.loi)
-    const bucket = useAppSelector(state => selectBucket(state))
-
-    const toggle_loi = function () {
-        dispatch(setLOI(loi >= 1800 ? 600 : loi + 600))
-    }
-
-    const time_f = useAppSelector(state => getLOIText(state))
-
-    const avg_time_f = ((bucket?.duration.q2 ?? 0) / 60).toLocaleString(
-        'en-US', { minimumFractionDigits: 0, maximumFractionDigits: 1 })
-
-    const formatter = new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-    });
-    const avg_pay_f: string = formatter.format((bucket?.payout.q2 ?? 0) / 100)
-
-    return (
-        <div className="bg-zinc-100 rounded py-2 m-0">
-            <p className="text-zinc-700 text-2xl text-center font-bold m-0">
-                I have <span
-                    className="cursor-pointer text-emerald-600 italic hover:text-emerald-700 hover:underline"
-                    onClick={toggle_loi}>{time_f}</span> minutes
-            </p>
-            <p
-                className="text-center text-xs font-thin m-0 text-zinc-500">
-                The average time spent is {avg_time_f} minutes and pays {avg_pay_f}</p>
-        </div>
-    )
-
+  // This is what's responsible for being able to click on the text
+  //  we set the global LOI times.
+
+  const dispatch = useAppDispatch();
+  const loi: number = useAppSelector((state) => state.app.loi);
+  const bucket = useAppSelector((state) => selectBucket(state));
+
+  const toggle_loi = function () {
+    dispatch(setLOI(loi >= 1800 ? 600 : loi + 600));
+  };
+
+  const time_f = useAppSelector((state) => getLOIText(state));
+
+  const avg_time_f = ((bucket?.duration.q2 ?? 0) / 60).toLocaleString("en-US", {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 1,
+  });
+
+  const formatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  });
+  const avg_pay_f: string = formatter.format((bucket?.payout.q2 ?? 0) / 100);
+
+  return (
+    <div className="bg-zinc-100 rounded py-2 m-0">
+      <p className="text-zinc-700 text-2xl text-center font-bold m-0">
+        I have{" "}
+        <span
+          className="cursor-pointer text-emerald-600 italic hover:text-emerald-700 hover:underline"
+          onClick={toggle_loi}
+        >
+          {time_f}
+        </span>{" "}
+        minutes
+      </p>
+      <p className="text-center text-xs font-thin m-0 text-zinc-500">
+        The average time spent is {avg_time_f} minutes and pays {avg_pay_f}
+      </p>
+    </div>
+  );
 };
 
 const SurveyLoading = () => {
-    return (
-        <div className="
+  return (
+    <div
+      className="
             border-8 border-emerald-400 rounded py-0 my-2
             text-center text-3xl 
-            hover:cursor-pointer hover:bg-green-500 hover:text-white">
-            <p className="py-2 text-center text-3xl font-semibold">
-                Survey Loading…
-            </p>
-        </div>
-    )
-}
-
+            hover:cursor-pointer hover:bg-green-500 hover:text-white"
+    >
+      <p className="py-2 text-center text-3xl font-semibold">Survey Loading…</p>
+    </div>
+  );
+};
 
 const NoSurveys = () => {
-    const offerwall_reasons = useAppSelector(state => state.app.offerwall_reasons)
-
-    const REASON_DISPLAY: Record<OfferwallReason, { label: string; description: string }> = {
-        [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.",
-        },
-    };
+  const offerwall_reasons = useAppSelector(
+    (state) => state.app.offerwall_reasons,
+  );
 
-    function formatReasons(reasons: OfferwallReason[]): { label: string; description: string }[] {
-        return reasons.map((r) => REASON_DISPLAY[r]);
-    }
-
-    return (
-        <>
-            <div className="
+  const REASON_DISPLAY: Record<
+    OfferwallReason,
+    { label: string; description: string }
+  > = {
+    [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 (
+    <>
+      <div
+        className="
             border-8 border-emerald-400 rounded py-0 my-2
             text-center text-3xl 
-            hover:cursor-pointer hover:bg-green-500 hover:text-white">
-                <p className="py-2 text-center text-3xl font-semibold">
-                    No Surveys available…
-                </p>
-            </div>
-
-            {formatReasons(offerwall_reasons).map(r => {
-                return (
-                    <div className="
+            hover:cursor-pointer hover:bg-green-500 hover:text-white"
+      >
+        <p className="py-2 text-center text-3xl font-semibold">
+          No Surveys available…
+        </p>
+      </div>
+
+      {formatReasons(offerwall_reasons).map((r) => {
+        return (
+          <div
+            className="
                     border-6 border-rose-200 rounded py-0 my-2
                     text-center 
-                    hover:cursor-pointer hover:bg-rose-200 hover:text-rose-950  ">
-                        <p className="py-2 text-center text-md font-semibold text-rose-600">
-                            {r.description}
-                        </p>
-                    </div>
-                )
-            })}
-        </>
-    )
-}
+                    hover:cursor-pointer hover:bg-rose-200 hover:text-rose-950  "
+          >
+            <p className="py-2 text-center text-md font-semibold text-rose-600">
+              {r.description}
+            </p>
+          </div>
+        );
+      })}
+    </>
+  );
+};
 
 const BucketDetails = () => {
-    const bucket = useAppSelector(state => selectBucket(state))
-    if (!bucket) return null;
-    const [showDetails, setShowDetails] = useState(false);
-
-    const columnHelper = createColumnHelper<BucketTask>()
-    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 (
-        <>
-            <div className="w-full text-center text-[8px] text-emerald-600
+  const bucket = useAppSelector((state) => selectBucket(state));
+  if (!bucket) return null;
+  const [showDetails, setShowDetails] = useState(false);
+
+  const columnHelper = createColumnHelper<BucketTask>();
+  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 (
+    <>
+      <div
+        className="w-full text-center text-[8px] text-emerald-600
             rounded py-2 my-1
             hover:cursor-pointer hover:text-emerald-700 hover:underline hover:bg-emerald-200 
             "
-                onClick={() => setShowDetails(!showDetails)}
-            >
-                ({showDetails ? 'Hide' : 'Show'} details of surveys in this bucket)
-            </div>
-
-            {showDetails && (
-                <div className="w-full border-t-1 border-emerald-200 py-1 my-0 flex justify-center">
-                    <table className="text-[10px] text-emerald-900 table-fixed border-collapse">
-                        <thead className="font-bold">
-                            {table.getHeaderGroups().map((headerGroup) => (
-
-                                <tr key={headerGroup.id}>
-                                    {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 (
-                                            <th
-                                                key={header.id}
-                                                className={`p-0 m-0 ${alignClass}`}
-                                                style={{
-                                                    width: `${header.column.getSize()}px`,
-                                                }}
-                                            >
-                                                {flexRender(
-                                                    header.column.columnDef.header,
-                                                    header.getContext(),
-                                                )}
-                                            </th>
-                                        )
-                                    })}
-                                </tr>
-                            ))}
-                        </thead>
-                        <tbody>
-                            {table.getRowModel().rows.map((row) => (
-                                <tr key={row.id}>
-                                    {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 (
-                                            <td key={cell.id}
-                                                className={`p-0 ${alignClass}`}
-                                                style={{
-                                                    width: `${cell.column.getSize()}px`,
-                                                }}
-                                            >
-                                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                            </td>
-                                        )
-                                    })}
-                                </tr>
-                            ))}
-                        </tbody>
-
-                    </table>
-                </div>
-            )}
-        </>
-    )
+        onClick={() => setShowDetails(!showDetails)}
+      >
+        ({showDetails ? "Hide" : "Show"} details of surveys in this bucket)
+      </div>
+
+      {showDetails && (
+        <div className="w-full border-t-1 border-emerald-200 py-1 my-0 flex justify-center">
+          <table className="text-[10px] text-emerald-900 table-fixed border-collapse">
+            <thead className="font-bold">
+              {table.getHeaderGroups().map((headerGroup) => (
+                <tr key={headerGroup.id}>
+                  {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 (
+                      <th
+                        key={header.id}
+                        className={`p-0 m-0 ${alignClass}`}
+                        style={{
+                          width: `${header.column.getSize()}px`,
+                        }}
+                      >
+                        {flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                      </th>
+                    );
+                  })}
+                </tr>
+              ))}
+            </thead>
+            <tbody>
+              {table.getRowModel().rows.map((row) => (
+                <tr key={row.id}>
+                  {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 (
+                      <td
+                        key={cell.id}
+                        className={`p-0 ${alignClass}`}
+                        style={{
+                          width: `${cell.column.getSize()}px`,
+                        }}
+                      >
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext(),
+                        )}
+                      </td>
+                    );
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </>
+  );
 };
 
 const SurveyEnter = () => {
-    const dispatch = useAppDispatch()
-    const loi = useAppSelector(state => state.app.loi)
-    const bpuid = useAppSelector(state => state.app.bpuid)
-
-    const available_cnt = useAppSelector(state => getAvailabilityCount(state))
-    const buckets = useAppSelector(state => state.app.currentBuckets)
-    const bucket = useAppSelector(state => selectBucket(state))
-    const isLow = useAppSelector(state => isLowBalance(state))
-
-    useEffect(() => {
-        if (!bpuid) return;
-
-        new OfferwallApi().topNPlusBlockOfferwallProductIdOfferwallD48cce47Get(
-            bpid,  // productId
-            bpuid, // bpuid
-            undefined,  // ip
-            undefined,  // countryIso
-            undefined,  // languages
-            undefined,  // behavior
-            undefined,  // minPayout
-            loi,  //duration
-            1  // nBins
-        ).then(res => {
-            const top_n_res = res.data.offerwall as TopNPlusBlockOfferWall;
-            dispatch(setAvailabilityCount(top_n_res.availability_count))
-            if (top_n_res.attempted_live_eligible_count) {
-                dispatch(setAttemptedLiveEligibleCount(top_n_res.attempted_live_eligible_count))
-            }
-            dispatch(setCurrentBuckets(top_n_res.buckets))
-            dispatch(setOfferwallReasons(top_n_res.offerwall_reasons ?? []))
-        });
-    }, [loi, bpuid]);
-
-
-    const start_survey = () => {
-        if (!bucket?.uri) return;
-
-        dispatch(setEnteredTimestamp());
-        window.open(bucket.uri, '_blank');
-    }
-
-    if (buckets === undefined) {
-        return <SurveyLoading />
-    }
-
-    if (available_cnt === 0 || buckets.length === 0 || !bucket) {
-        return <NoSurveys />
-    }
-
-    return (
-        <>
-            {isLow && (
-                <div className="
+  const dispatch = useAppDispatch();
+  const loi = useAppSelector((state) => state.app.loi);
+  const { data: user } = useGetMeQuery();
+
+  const available_cnt = useAppSelector((state) => getAvailabilityCount(state));
+  const buckets = useAppSelector((state) => state.app.currentBuckets);
+  const bucket = useAppSelector((state) => selectBucket(state));
+  const isLow = useAppSelector((state) => isLowBalance(state));
+
+  useEffect(() => {
+    if (!user?.product_user_id) return;
+
+    new OfferwallApi()
+      .topNPlusBlockOfferwallProductIdOfferwallD48cce47Get(
+        bpid, // productId
+        // "7d9240132c695c05cd0ba47e2580158719f8215b",
+        // "71.225.51.26",
+        user.product_user_id,
+        undefined, // ip
+        undefined, // countryIso
+        undefined, // languages
+        undefined, // behavior
+        undefined, // minPayout
+        loi, //duration
+        1, // nBins
+      )
+      .then((res) => {
+        const top_n_res = res.data.offerwall as TopNPlusBlockOfferWall;
+        dispatch(setAvailabilityCount(top_n_res.availability_count));
+        if (top_n_res.attempted_live_eligible_count) {
+          dispatch(
+            setAttemptedLiveEligibleCount(
+              top_n_res.attempted_live_eligible_count,
+            ),
+          );
+        }
+        dispatch(setCurrentBuckets(top_n_res.buckets));
+        dispatch(setOfferwallReasons(top_n_res.offerwall_reasons ?? []));
+      });
+  }, [loi, user?.product_user_id]);
+
+  const start_survey = () => {
+    if (!bucket?.uri) return;
+
+    dispatch(setEnteredTimestamp());
+    window.open(bucket.uri, "_blank");
+  };
+
+  if (buckets === undefined) {
+    return <SurveyLoading />;
+  }
+
+  if (available_cnt === 0 || buckets.length === 0 || !bucket) {
+    return <NoSurveys />;
+  }
+
+  return (
+    <>
+      {isLow && (
+        <div
+          className="
                 border-8 border-rose-500 rounded py-2
-                bg-rose-400 text-rose-700">
-                    <h2 className="text-center text-xl font-bold text-white">
-                        Your balance is low.
-                    </h2>
-                    <p className="px-4 py-2 text-center text-sm font-medium text-white">
-                        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.
-                    </p>
-                    <p className="px-4 py-2 text-center text-sm font-bold text-white">
-                        HIT submissions with a balance exceeding -$1.00 will
-                        return in rejected assignments.
-                    </p>
-                </div>
-            )}
-
-            <LOISelect />
-            <div
-                onClick={start_survey}
-                className="
+                bg-rose-400 text-rose-700"
+        >
+          <h2 className="text-center text-xl font-bold text-white">
+            Your balance is low.
+          </h2>
+          <p className="px-4 py-2 text-center text-sm font-medium text-white">
+            You may continue to attempt surveys, but you will not earn an
+            attempt credit if your survey attempt does not result in a complete.
+          </p>
+          <p className="px-4 py-2 text-center text-sm font-bold text-white">
+            Attempts with a balance exceeding -$1.00 will not be issued an
+            attempt credit.
+          </p>
+        </div>
+      )}
+
+      <LOISelect />
+      <div
+        onClick={start_survey}
+        className="
                 border-8 border-emerald-400 rounded py-0 my-2
-                hover:cursor-pointer hover:bg-emerald-400 hover:text-emerald-50">
-                <p className="py-2 text-center text-3xl font-semibold">
-                    <a
-                        target="_blank"
-                        rel="noopener noreferrer">
-                        Start Task
-                    </a>
-                </p>
-            </div>
-            <BucketDetails />
-
-            <div className="border-2 border-emerald-200 rounded py-2 m-0">
-                <p className="text-emerald-700 text-sm text-center font-medium px-2 m-0">
-                    <Markdown>
-                        {bucket.eligibility_explanation}
-                    </Markdown>
-                </p>
-            </div>
-        </>
-    )
+                hover:cursor-pointer hover:bg-emerald-400 hover:text-emerald-50"
+      >
+        <p className="py-2 text-center text-3xl font-semibold">
+          <a target="_blank" rel="noopener noreferrer">
+            Start Task
+          </a>
+        </p>
+      </div>
+      <BucketDetails />
+
+      <div className="border-2 border-emerald-200 rounded py-2 m-0">
+        <p className="text-emerald-700 text-sm text-center font-medium px-2 m-0">
+          <Markdown>{bucket.eligibility_explanation}</Markdown>
+        </p>
+      </div>
+    </>
+  );
 };
 
-
 const Work = () => {
-    const entered = useAppSelector(state => state.app.currentBucketEntered)
-    const assignment_id = useAppSelector(state => state.app.assignment_id)
-
-    if (!assignment_id) {
-        return (
-            <p className="text-center text-2xl py-3 text-red-800 font-semibold">
-                No Assignment ID found. Please access this page through
-                the Amazon Mechanical Turk platform.
-            </p>
-        )
-    }
-
-    return (
-        <>
-            {entered ? (
-                <SurveyMonitor />
-            ) : (
-                <SurveyEnter />
-            )}
-        </>
-    )
+  const entered = useAppSelector((state) => state.app.currentBucketEntered);
+  // const assignment_id = useAppSelector((state) => state.app.assignment_id);
+  // if (!assignment_id) {
+  //   return (
+  //     <p className="text-center text-2xl py-3 text-red-800 font-semibold">
+  //       No Assignment ID found. Please access this page through the Amazon
+  //       Mechanical Turk platform.
+  //     </p>
+  //   );
+  // }
+
+  const { data: user, isLoading, isError } = useGetMeQuery();
+  // const location = useLocation();
+
+  if (isLoading) return <div>Loading...</div>;
+
+  if (isError || !user) {
+    return <Preview />;
+  }
+
+  return <>{entered ? <SurveyMonitor /> : <SurveyEnter />}</>;
 };
 
-
-export default Work;
\ No newline at end of file
+export default Work;