blob: 0a91ab391ad3734fd0358b1518bdce9303a072b3 (
plain)
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
|
import { clsx } from "clsx";
import { useAppDispatch, useAppSelector } from "@/hooks";
import { UpkQuestionChoice } from "@/api_fsb";
import { useGetMeQuery } from "@/models/authAPI";
import { ChevronRightIcon } from "lucide-react";
import { KeyboardEvent, MouseEvent, useEffect, useRef, useState } from "react";
import { useSelector } from "react-redux";
import { cashoutMethodsSelectors } from "@/models/cashoutMethodsSlice";
const RedemptionHeader = () => {
const cashout_methods = useSelector(cashoutMethodsSelectors.selectAll);
return (
<>
<h2 className="text-xs font-mono font-bold p-0 m-0">
{/* {cashout_methods.length} Redemption Methods */}
30+ Redemption Methods
</h2>
</>
);
};
const RedemptionModalBody = () => {
return (
<div className="grid grid-cols-[auto_1fr] text-xs">
<div className="label text-center p-2">
Paypal, Visa, Giftcards will be available. Finishing processing the
transfer from Amazon.
</div>
</div>
);
};
const Redemption = () => {
const dispatch = useAppDispatch();
const { data: user, isLoading, isError } = useGetMeQuery();
const [showRedemption, setShowRedemption] = useState(false);
return (
<div
className={clsx(
"fixed rounded bg-blue-500 text-white shadow-lg z-60 \
top-1 sm:top-6 \
right-1 sm:right-2",
showRedemption ? "w-[98vw] sm:w-[400px]" : "w-[220px]",
)}
>
<div
className="bg-blue-600 rounded border-white-300
cursor-pointer py-1 px-4
hover:bg-blue-700 transition-colors duration-200"
onClick={() => setShowRedemption(!showRedemption)}
>
<RedemptionHeader />
<h4 className="text-[10px] text-center italic text-white-300 py-0">
{/* (Click to {showRedemption ? "hide" : "show"}) */}
Details within 24hr.
</h4>
</div>
{showRedemption && <RedemptionModalBody />}
</div>
);
};
export default Redemption;
|
