88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
import { useState } from 'react'
|
|
import {
|
|
Box,
|
|
Button,
|
|
Card,
|
|
CardBody,
|
|
Container,
|
|
FormControl,
|
|
FormLabel,
|
|
Heading,
|
|
Input,
|
|
Stack,
|
|
Text,
|
|
Textarea,
|
|
useToast,
|
|
} from '@chakra-ui/react'
|
|
import { Link as RouterLink } from 'react-router-dom'
|
|
import { api, ApiError } from '../lib/api'
|
|
|
|
export function RequestDemo() {
|
|
const toast = useToast()
|
|
const [telegram, setTelegram] = useState('')
|
|
const [message, setMessage] = useState('')
|
|
const [loading, setLoading] = useState(false)
|
|
const [sent, setSent] = useState(false)
|
|
|
|
const onSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setLoading(true)
|
|
try {
|
|
await api.createLead(telegram.trim(), message.trim())
|
|
setSent(true)
|
|
} catch (err) {
|
|
const msg = err instanceof ApiError ? err.message : 'Envoi impossible'
|
|
toast({ status: 'error', title: 'Échec', description: msg })
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Container maxW="md" py={16}>
|
|
<Stack spacing={6}>
|
|
<Box textAlign="center">
|
|
<Heading size="lg">Demander une démo</Heading>
|
|
<Text color="gray.500">
|
|
Laissez vos coordonnées, un commercial déploiera votre démo dédiée (30 jours).
|
|
</Text>
|
|
</Box>
|
|
|
|
{sent ? (
|
|
<Card>
|
|
<CardBody>
|
|
<Stack spacing={4} textAlign="center">
|
|
<Heading size="md">Merci !</Heading>
|
|
<Text>Votre demande a bien été enregistrée. Nous revenons vers vous rapidement.</Text>
|
|
<Button as={RouterLink} to="/" variant="outline">
|
|
Retour à l'accueil
|
|
</Button>
|
|
</Stack>
|
|
</CardBody>
|
|
</Card>
|
|
) : (
|
|
<Card>
|
|
<CardBody>
|
|
<form onSubmit={onSubmit}>
|
|
<Stack spacing={4}>
|
|
<FormControl isRequired>
|
|
<FormLabel>Telegram</FormLabel>
|
|
<Input value={telegram} onChange={(e) => setTelegram(e.target.value)} />
|
|
</FormControl>
|
|
<FormControl>
|
|
<FormLabel>Message (optionnel)</FormLabel>
|
|
<Textarea value={message} onChange={(e) => setMessage(e.target.value)} rows={4} />
|
|
</FormControl>
|
|
<Button type="submit" colorScheme="primary" isLoading={loading}>
|
|
Envoyer ma demande
|
|
</Button>
|
|
</Stack>
|
|
</form>
|
|
</CardBody>
|
|
</Card>
|
|
)}
|
|
</Stack>
|
|
</Container>
|
|
)
|
|
}
|