1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
import { type FormEvent, useState } from "react";
import { useAppSelector } from "@/hooks";
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 bpuid = useAppSelector((state) => state.app.bpuid);
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: 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-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;
|
