From 74890e251dee3e0f195583431cb48b9f3a58ecc9 Mon Sep 17 00:00:00 2001
From: Max Nanis
Date: Mon, 9 Jun 2025 16:05:52 +0700
Subject: Cashout Methods page: adding walletSlice and cashoutmethodsSlice so
they're in the stored state. Iterating with fix vs variable filters. Pulling
old validators from old code and setting up the wallet fetch.
---
src/pages/CashoutMethods.tsx | 207 +++++++++++++++++++++++++++++++++++++------
1 file changed, 182 insertions(+), 25 deletions(-)
(limited to 'src/pages/CashoutMethods.tsx')
diff --git a/src/pages/CashoutMethods.tsx b/src/pages/CashoutMethods.tsx
index 9656087..fca6af0 100644
--- a/src/pages/CashoutMethods.tsx
+++ b/src/pages/CashoutMethods.tsx
@@ -1,45 +1,202 @@
-import React, {useEffect, useState} from 'react'
+import React, {useState} from 'react'
+import {Card, CardContent, CardHeader,} from "@/components/ui/card"
+import {Tabs, TabsContent, TabsList, TabsTrigger,} from "@/components/ui/tabs"
+import {Badge} from "@/components/ui/badge"
+
+import {selectFixedCashoutMethods, selectVariableCashoutMethods} from "@/models/cashoutMethodSlice.ts";
+import {CashoutMethodOut, UserWalletBalance} from "@/api"
+import {formatCentsToUSD} from "@/lib/utils.ts";
+import {useSelector} from 'react-redux'
+import {motion} from "framer-motion";
+import {Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle,} from "@/components/ui/drawer"
+import {useAppSelector} from "@/hooks.ts";
+
+const CashoutAcknowledgement = () => {
+ return (
+ <>
+ Your request has been successfully submitted!
+
+
+
+ Request Status:
+ Pending
+
+ Your redemption link will be on the history page.
+
+ )
+}
+
+const CashoutReview: React.FC<{ cashout_method: CashoutMethodOut }> = ({cashout_method}) => {
+ return (
+ <>
+ You are about to redeem to a card.
+ 
+ {cashout_method.name}
+ {/*{data.terms}
*/}
+
+
+
+
+ )
+}
+
+const VariableCashoutMethodPreview: React.FC<{ cashout_method: CashoutMethodOut }> = ({cashout_method}) => {
+ return (
+ <>
+
+ {cashout_method.name}
+
+
+
+ {formatCentsToUSD(cashout_method.min_value)} – {formatCentsToUSD(cashout_method.max_value)}
+
+
+ )
+}
+
+const FixedCashoutMethodPreview: React.FC<{ cashout_method: CashoutMethodOut }> = ({cashout_method}) => {
+ return (
+ <>
+
+ {cashout_method.name}
+
+
+ )
+}
-import {Card, CardContent, CardHeader} from "@/components/ui/card.tsx";
-import {CashoutMethodOut, CashoutMethodsResponse, WalletApi} from "@/api"
const CashoutMethodPreview: React.FC<{ cashout_method: CashoutMethodOut }> = ({cashout_method}) => {
+ const [open, setOpen] = useState(false)
+
+ const renderContent = () => {
+ switch (cashout_method.data.value_type) {
+ case 'fixed':
+ return
+ case 'variable':
+ return
+ }
+ };
+
return (
-
+
- {cashout_method.name}
+ {renderContent()}
- 
+ 
+
+ setOpen(true)}
+ >Details
+
+
+
+
+
+ {cashout_method.name} Details
+
+
+
+
+
+
+
)
}
-const CashoutMethodsPage: React.FC = ({settings}) => {
- const [cashoutMethods, setCashoutMethods] = useState([]);
- useEffect(() => {
- const x = new WalletApi();
- x.getCashoutMethodsProductIdCashoutMethodsGet(settings.bpid, settings.bpuid)
- .then(res => {
- const data: CashoutMethodsResponse = res.data;
- setCashoutMethods(data.cashout_methods);
- })
- .catch(err => console.log(err));
- }, []); // ← empty array means "run once"
+const CashoutMethodsPage = () => {
+ const variableCashoutMethods = useSelector(selectVariableCashoutMethods)
+ const fixedCashoutMethods = useSelector(selectFixedCashoutMethods)
+ const wallet: UserWalletBalance = useAppSelector(state => state.wallet)
+
return (
-
- {
- cashoutMethods.map((m, index) => {
- return ;
- })
- }
-
- );
+ <>
+ Your balance is {formatCentsToUSD(wallet.amount)}.
+ You can redeem {formatCentsToUSD(wallet.redeemable_amount)} now.
+ (a portion of each survey is delayed by 30 days)
+
+
+
+ Variable
+ Fixed
+
+
+
+
+ {
+ variableCashoutMethods.map((m, index) => {
+ return ;
+ })
+ }
+
+
+
+
+ {
+ fixedCashoutMethods.map((m, index) => {
+ return ;
+ })
+ }
+
+
+
+
+ )
}
+
export {CashoutMethodsPage}
\ No newline at end of file
--
cgit v1.2.3