2 files changed, 80 insertions, 7 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;
diff --git a/jb-ui/src/components/Wallet.tsx b/jb-ui/src/components/Wallet.tsx
index 3f5c6a4..3bb23a9 100644
--- a/jb-ui/src/components/Wallet.tsx
+++ b/jb-ui/src/components/Wallet.tsx
@@ -54,7 +54,13 @@ const getBackgroundColor = (balance: number | undefined): string => {
 
 const WalletHeader = () => {
   const amount =
-    useAppSelector((state) => state.app.userWalletBalance)?.amount ?? 0;
+    useAppSelector((state) => state.app.userDisplayedWalletBalance?.amount) ??
+    0;
+
+  const amount_string =
+    useAppSelector(
+      (state) => state.app.userDisplayedWalletBalance?.amount_string,
+    ) ?? "$0.00";
 
   const bgStyle =
     typeof getBackgroundColor(amount) === "string" &&
@@ -77,13 +83,9 @@ const WalletHeader = () => {
         <span className="text-left">User Wallet:</span>
 
         {amount >= 0 ? (
-          <span className="text-emerald-50">
-            {`${formatCentsToUSD(Math.abs(amount))}`}
-          </span>
+          <span className="text-emerald-50">{`${amount_string}`}</span>
         ) : (
-          <span className="text-rose-50">
-            {`(${formatCentsToUSD(Math.abs(amount))})`}
-          </span>
+          <span className="text-rose-50">{`(${amount_string})`}</span>
         )}
       </h2>
     </div>
@@ -93,6 +95,10 @@ const WalletHeader = () => {
 const WalletSummary = () => {
   const summary = useAppSelector((state) => state.app.userLedgerSummary);
 
+  const userWallet = useAppSelector((state) => state.app.userWallet);
+
+  userWallet;
+
   const survey_completes = summary?.bp_payment?.entry_count ?? 0;
   const survey_completes_f = (survey_completes ?? 0).toLocaleString("en-US");