1 files changed, 67 insertions, 0 deletions
diff --git a/jb-ui/src/components/Redemption.tsx b/jb-ui/src/components/Redemption.tsx
new file mode 100644
index 0000000..0a91ab3
--- /dev/null
+++ b/jb-ui/src/components/Redemption.tsx
@@ -0,0 +1,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;