diff options
| author | Max Nanis | 2025-06-09 16:05:52 +0700 |
|---|---|---|
| committer | Max Nanis | 2025-06-09 16:05:52 +0700 |
| commit | 74890e251dee3e0f195583431cb48b9f3a58ecc9 (patch) | |
| tree | a27ceee03999f18fd3ef2e0d44ba7deb39f0b6c8 /src/pages/Offerwall.tsx | |
| parent | a674d2e03de3bd048714d9c06e4bba9d9ecdb328 (diff) | |
| download | panel-ui-74890e251dee3e0f195583431cb48b9f3a58ecc9.tar.gz panel-ui-74890e251dee3e0f195583431cb48b9f3a58ecc9.zip | |
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.
Diffstat (limited to 'src/pages/Offerwall.tsx')
| -rw-r--r-- | src/pages/Offerwall.tsx | 89 |
1 files changed, 50 insertions, 39 deletions
diff --git a/src/pages/Offerwall.tsx b/src/pages/Offerwall.tsx index 0d0534e..19c4515 100644 --- a/src/pages/Offerwall.tsx +++ b/src/pages/Offerwall.tsx @@ -1,5 +1,5 @@ import React, {useState} from 'react' -import { motion } from "framer-motion"; +import {motion} from "framer-motion"; import {Badge} from "@/components/ui/badge" import {Link} from '@mui/material'; import {Tabs, TabsContent} from "@/components/ui/tabs" @@ -18,14 +18,13 @@ import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow,} from "@/ import {useSelector} from "react-redux"; import {Switch} from "@/components/ui/switch" import {Card, CardContent, CardFooter} from "@/components/ui/card.tsx"; -import {makeSelectQuestionsByIds, ProfileQuestion} from "@/models/questionSlice.ts" +import {makeSelectQuestionsByIds} from "@/models/questionSlice.ts" import {CheckIcon, MessageCircleQuestionIcon, XIcon} from "lucide-react" import {useAppDispatch, useAppSelector} from '@/hooks' import {Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger,} from "@/components/ui/sheet" import {ProfileQuestionFull} from "@/pages/Questions.tsx" import {Answer, selectAnswerForQuestion, submitAnswer} from "@/models/answerSlice.ts"; import {assert, formatCentsToUSD, formatSeconds} from "@/lib/utils.ts"; -import {IQRBoxPlot} from "@/lib/snippets.tsx" import {setAvailabilityCount, setOfferwallId} from "@/models/appSlice.ts"; import {setBuckets} from "@/models/bucketSlice.ts"; @@ -54,12 +53,12 @@ const ContentsGrid: React.FC<SoftPairBucket> = ({bucket}) => { { accessorKey: "loi", header: "Length", - cell: ({ getValue }) => formatSeconds(getValue() as number), + cell: ({getValue}) => formatSeconds(getValue() as number), }, { accessorKey: "payout", header: "Payout", - cell: ({ getValue}) => formatCentsToUSD(getValue() as number) + cell: ({getValue}) => formatCentsToUSD(getValue() as number) }, ] @@ -73,7 +72,7 @@ const ContentsGrid: React.FC<SoftPairBucket> = ({bucket}) => { return ( <div className="max-h-[120px] overflow-y-auto border rounded-md"> - <Table className="text-sm [&_th]:px-2 [&_td]:px-2 [&_th]:py-1 [&_td]:py-1" > + <Table className="text-sm [&_th]:px-2 [&_td]:px-2 [&_th]:py-1 [&_td]:py-1"> <TableHeader> {table.getHeaderGroups().map((headerGroup) => ( <TableRow key={headerGroup.id}> @@ -123,6 +122,7 @@ const ConditionalQuestions: React.FC<SoftPairBucket> = ({bucket}) => { const app = useAppSelector(state => state.app) console.log("Conditional bucket:", questions, question, answer) + const [open, setOpen] = useState(false) const submitEvt = () => { dispatch(submitAnswer({question: question})) @@ -153,32 +153,41 @@ const ConditionalQuestions: React.FC<SoftPairBucket> = ({bucket}) => { } return ( - <Sheet> - <SheetTrigger>Open</SheetTrigger> - <SheetContent - side="right" - className="md:w-[900px], lg:w-[1000px]"> - - <SheetHeader> - <SheetTitle>Bucket Questions</SheetTitle> - <SheetDescription> - This survey has some unanswered questions. Answer these to determine if you're - eligible for the Survey Bucket - </SheetDescription> - </SheetHeader> - - { - questions.map(q => { - return <ProfileQuestionFull - key={q.question_id} - question={q} - submitAnswerEvt={submitEvt} - className="mt-4 m-2"/> - }) - } + <> + <Button + variant="secondary" + className="w-full h-8 cursor-pointer" + onClick={() => setOpen(true)} + > + Check Eligibility + </Button> + + <Sheet open={open} onOpenChange={setOpen}> + <SheetContent + side="right" + className="md:w-[900px], lg:w-[1000px] p-5"> + + <SheetHeader> + <SheetTitle>Bucket Questions</SheetTitle> + <SheetDescription> + This survey has some unanswered questions. Answer these to determine if you're + eligible for the Survey Bucket + </SheetDescription> + </SheetHeader> - </SheetContent> - </Sheet> + { + questions.map(q => { + return <ProfileQuestionFull + key={q.question_id} + question={q} + submitAnswerEvt={submitEvt} + className="mt-4 m-2"/> + }) + } + + </SheetContent> + </Sheet> + </> ) } @@ -201,22 +210,24 @@ const CallToAction: React.FC<SoftPairBucket> = ({bucket}) => { </div> ) case "conditional": - // return <ConditionalQuestions bucket={bucket}/> + return ( + <div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-[90%]"> + <ConditionalQuestions bucket={bucket}/> + </div> + ) + + case "ineligible": return ( <div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-[90%]"> <Button - variant="secondary" className="w-full h-8 cursor-pointer" + variant="outline" + disabled > - Check Eligibility + Sorry, you're ineligible </Button> </div> ) - - case "ineligible": - return <button type="button"> - Ineligible Survey - </button>; } } |
