Transfer page. Jenkins CDN. Layout url check

2 files changed, 144 insertions, 111 deletions

diff --git a/jb-ui/src/pages/LinkAmtAccount.tsx b/jb-ui/src/pages/LinkAmtAccount.tsx
deleted file mode 100644
index a72626f..0000000
--- a/jb-ui/src/pages/LinkAmtAccount.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { type FormEvent, useState } from "react";
-
-import { Button } from "@/components/ui/button";
-
-type RequestState = "idle" | "working" | "sent" | "failed" | "missing-worker";
-
-const LinkAmtAccount = function () {
-  const [email, setEmail] = useState("");
-  const [state, setState] = useState<RequestState>("idle");
-  const [mockLink, setMockLink] = useState<string | null>(null);
-  const amtWorkerId = new URLSearchParams(window.location.search).get(
-    "workerId",
-  );
-
-  const submit = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (!amtWorkerId) {
-      setState("missing-worker");
-      return;
-    }
-
-    setState("working");
-    setMockLink(null);
-    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: amtWorkerId,
-        }),
-      });
-      if (!response.ok) throw new Error("Account-link request failed");
-      const body = (await response.json()) as { magic_link?: string };
-      setMockLink(body.magic_link ?? null);
-      setState("sent");
-    } catch {
-      setState("failed");
-    }
-  };
-
-  return (
-    <main className="flex min-h-screen items-center justify-center bg-zinc-200 p-4">
-      <section className="w-full max-w-md space-y-4 rounded-lg bg-white p-6 shadow-lg">
-        <h1 className="text-xl font-semibold">Link your MTurk account</h1>
-        <p>Enter the email address you want to use for James Billings.</p>
-        <form className="space-y-4" onSubmit={submit}>
-          <input
-            className="w-full rounded-md border px-3 py-2"
-            type="email"
-            autoComplete="email"
-            required
-            value={email}
-            onChange={(event) => setEmail(event.target.value)}
-            placeholder="you@example.com"
-          />
-          <Button type="submit" disabled={state === "working"}>
-            {state === "working" ? "Sending…" : "Send link"}
-          </Button>
-        </form>
-        {state === "sent" && (
-          <p>Check your email to finish linking your account.</p>
-        )}
-        {state === "failed" && (
-          <p>Unable to send the link. Please try again.</p>
-        )}
-        {state === "missing-worker" && (
-          <p>This page is missing your MTurk worker ID.</p>
-        )}
-        {mockLink && (
-          <p>
-            Development link:{" "}
-            <a className="underline" href={mockLink}>
-              continue
-            </a>
-          </p>
-        )}
-      </section>
-    </main>
-  );
-};
-
-export default LinkAmtAccount;
diff --git a/jb-ui/src/pages/Transfer.tsx b/jb-ui/src/pages/Transfer.tsx
index 6e087d6..bef40d4 100644
--- a/jb-ui/src/pages/Transfer.tsx
+++ b/jb-ui/src/pages/Transfer.tsx
@@ -1,50 +1,167 @@
-import { clsx } from "clsx";
+import { type FormEvent, useState } from "react";
+import { useAppDispatch, useAppSelector } from "@/hooks";
+import { Button } from "@/components/ui/button";
+import max_lulu from "./max-and-lulu.jpg";
 
-import { useSelector } from "react-redux";
+//   const handleInputChange = (
+//     event: React.KeyboardEvent<HTMLInputElement>,
+//   ) => {};
 
-const Transfer = function () {
-  let error = [];
+//   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";
 
-  const handleInputChange = (
-    event: React.KeyboardEvent<HTMLInputElement>,
-  ) => {};
+const TransferSubmit = function ({ onSubmitSuccess }) {
+  const [email, setEmail] = useState("");
+  const [state, setState] = useState<RequestState>("idle");
+  const bpuid = useAppSelector((state) => state.app.bpuid);
 
-  const handleKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {};
+  const submit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setState("working");
 
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    console.log("Form submitted successfully!");
+    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: bpuid,
+        }),
+      });
+
+      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-500 rounded py-2
+                    bg-red-700 rounded py-2
                     text-white text-2xl font-semibold text-center"
       >
         Transfer Required
       </h2>
-      <p
+      <h4
         className="
-                    py-4
-                    text-zinc-500 text-2xl font-semibold text-center"
+                    mt-2
+                    bg-slate-500 rounded p-2
+                    text-white text-sm font-semibold text-center"
       >
-        James Billings is finished 😭 Just Kidding!!!
-      </p>
+        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>
 
-      <input
-        type="text"
-        id="text-entry-input"
-        aria-describedby=""
-        // defaultValue={answer?.values.length ? answer?.values[0] : ""}
-        // onKeyUp={handleInputChange}
-        // onKeyDown={handleKeyPress} // Use onKeyDown to listen for the key press
-        // title={error ? answer?.error_msg : ""}
-        className={clsx("w-full border-1 rounded px-2 py-1")}
-      />
+      {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 assignment_id = useAppSelector((state) => state.app.assignment_id);
+  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>
+    );
+  }
+
+  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 (
+    <>
+      {submitted ? (
+        <TransferComplete />
+      ) : (
+        <TransferSubmit onSubmitSuccess={() => setSubmitted(true)} />
+      )}
+    </>
+  );
+};
+
 export default Transfer;