1 files changed, 162 insertions, 0 deletions
diff --git a/jb-ui/src/pages/Transfer.tsx b/jb-ui/src/pages/Transfer.tsx
new file mode 100644
index 0000000..8079da2
--- /dev/null
+++ b/jb-ui/src/pages/Transfer.tsx
@@ -0,0 +1,162 @@
+import { type FormEvent, useState } from "react";
+import { useAppSelector } from "@/hooks";
+import { useGetMeQuery } from "@/models/authAPI";
+import { Button } from "@/components/ui/button";
+import max_lulu from "./max-and-lulu.jpg";
+
+//   const handleInputChange = (
+//     event: React.KeyboardEvent<HTMLInputElement>,
+//   ) => {};
+
+//   const handleKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {};
+//   const handleSubmit = (e) => {
+//     e.preventDefault();
+//     console.log("Form submitted successfully!");
+//   };
+
+const TransferComplete = function () {
+  return (
+    <div className="px-6 my-6">
+      <h2
+        className="
+                    bg-emerald-400 rounded py-2
+                    text-white text-2xl font-semibold text-center"
+      >
+        Please check your email.
+      </h2>
+      <p className="text-slate-600 text-l font-semibold text-center py-5 px-6">
+        If you don't recieve anything, please check your spam folder, or try
+        again shortly.
+      </p>
+      <p className="bg-slate-200 text-xs font-semibold text-center p-3 my-3">
+        We will be assisting account transfers throughout the rest of the month.
+        If you have any further questions or concerns, please email us directly
+        with your desired account email and the AMT ID to associate with your
+        worker history.
+      </p>
+      <img src={max_lulu} alt="Max and Lulu" className="object-contain" />
+    </div>
+  );
+};
+
+type RequestState = "idle" | "working" | "sent" | "failed";
+
+interface TransferSubmitProps {
+  onSubmitSuccess: () => void;
+}
+
+const TransferSubmit = function ({ onSubmitSuccess }: TransferSubmitProps) {
+  const [email, setEmail] = useState("");
+  const [state, setState] = useState<RequestState>("idle");
+  const { data: user } = useGetMeQuery();
+
+  const submit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setState("working");
+
+    try {
+      const response = await fetch("/auth/link-amt/request", {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          email: email,
+          amt_worker_id: user?.product_user_id,
+        }),
+      });
+
+      if (!response.ok) throw new Error("Account-link request failed");
+
+      const body = (await response.json()) as { magic_link?: string };
+      console.log(body.magic_link ?? null);
+      onSubmitSuccess();
+    } catch {
+      setState("failed");
+    }
+  };
+
+  return (
+    <div className="px-6 my-6">
+      <h2
+        className="
+                    bg-red-700 rounded py-2
+                    text-white text-2xl font-semibold text-center"
+      >
+        Transfer Required
+      </h2>
+      <h4
+        className="
+                    mt-2
+                    bg-slate-500 rounded p-2
+                    text-white text-sm font-semibold text-center"
+      >
+        James Billings is no longer available on Amazon Mechanical Turk. Our
+        dedicated platform will enable you to do the same work as always, paid
+        directly to you.
+        <br />
+        Enter your email below to transfer your account history.
+        <br />
+        This will allow you to keep your full account history and wallet
+        balance.
+      </h4>
+
+      <form onSubmit={submit}>
+        <input
+          className="w-full rounded-md border-3 border-slate-700  px-3 py-2 font-semibold my-5"
+          type="email"
+          autoComplete="email"
+          required
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+          placeholder="you@example.com"
+        />
+        <Button
+          className="w-1/2 font-semibold bg-slate-600 cursor-pointer hover:bg-blue-950"
+          type="submit"
+          disabled={state === "working"}
+        >
+          {state === "working" ? "Sending…" : "Send link"}
+        </Button>
+      </form>
+
+      {state === "sent" && (
+        <h4
+          className="
+                    mt-2
+                    bg-slate-500 rounded py-2
+                    text-white text-l font-semibold text-center"
+        >
+          Check your email to finish linking your account.
+        </h4>
+      )}
+
+      {state === "failed" && <p>Unable to send the link. Please try again.</p>}
+    </div>
+  );
+};
+
+const Transfer = function () {
+  const bpuid = useAppSelector((state) => state.app.bpuid);
+  const [submitted, setSubmitted] = useState(false);
+
+  if (!bpuid) {
+    return (
+      <p className="text-center text-2xl py-3 text-red-800 font-semibold">
+        No Worker ID found. Please access this page through the Amazon
+        Mechanical Turk platform.
+      </p>
+    );
+  }
+
+  return (
+    <>
+      {submitted ? (
+        <TransferComplete />
+      ) : (
+        <TransferSubmit onSubmitSuccess={() => setSubmitted(true)} />
+      )}
+    </>
+  );
+};
+
+export default Transfer;