MiguelMLorente
/
Paysplit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add buy button in sign up page

main
MiguelMLorente 2025-11-16 17:31:48 +01:00
parent de7e79207c
commit dc5bffa1d4
1 changed files with 37 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/pages/SignUp.tsx
View File

@ -3,6 +3,7 @@ import {
Button, Button,
SpaceBetween, SpaceBetween,
Container, Container,
Header,
} from "@cloudscape-design/components"; } from "@cloudscape-design/components";
import { useState } from "react"; import { useState } from "react";
import { FormattedDate } from "react-intl"; import { FormattedDate } from "react-intl";
@ -14,33 +15,45 @@ export const SignUp = () => {
const isDateEnabled = (date: Date) => const isDateEnabled = (date: Date) =>
[tuesday, thursday].includes(date.getDay()); [tuesday, thursday].includes(date.getDay());
const availableSlots: number = 3; const availableSlots: number = 3;
const availableTokens: number = 0;
return ( return (
<SpaceBetween size="s" alignItems={"center"}> <SpaceBetween size="s" alignItems={"center"}>
<Calendar <Container>
value={selectedDate || ""} <Header>Pick a date</Header>
onChange={(e) => setSelectedDate(e.detail.value)} <Calendar
isDateEnabled={isDateEnabled} value={selectedDate || ""}
/> onChange={(e) => setSelectedDate(e.detail.value)}
{selectedDate && ( isDateEnabled={isDateEnabled}
<Container />
header={ {selectedDate && (
<FormattedDate <>
value={selectedDate} <Header>
day="numeric" <FormattedDate
month="long" value={selectedDate}
year="numeric" day="numeric"
/> month="long"
} year="numeric"
> />
{availableSlots === 0 ? ( </Header>
<p>There are no available slots for this date.</p> {availableSlots === 0 ? (
) : ( <p>There are no available slots for this date.</p>
<> ) : (
<p>There are {availableSlots} available slots for this date.</p> <>
<Button>Sign up</Button> <p>There are {availableSlots} available slots for this date.</p>
</> <Button disabled={!availableTokens}>Sign up</Button>
)} </>
)}
</>
)}
</Container>
{!availableTokens && (
<Container>
<p>
You don't have any more tokens to sign up to any slot, please buy
here.
</p>
<Button>Buy</Button>
</Container> </Container>
)} )}
</SpaceBetween> </SpaceBetween>