42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { Button } from "@mantine/core";
|
|
import PhoneNumberInput from "@/components/phone-number-input";
|
|
import { useForm } from "@mantine/form";
|
|
import { Trans, useLingui } from "@lingui/react/macro";
|
|
import useCreateCode from "../hooks/use-create-code";
|
|
|
|
const PhonePrompt = () => {
|
|
const { t } = useLingui();
|
|
const form = useForm({
|
|
initialValues: {
|
|
number: ''
|
|
},
|
|
validate: {
|
|
number: (value) => {
|
|
if (value.length === 0) return t`Phone number is required`
|
|
if (value.length !== 10) return t`Phone number must be 10 digits`
|
|
}
|
|
}
|
|
})
|
|
|
|
const { mutate: createCode, isPending } = useCreateCode();
|
|
const handleSubmit = (data: { number: string }) => {
|
|
form.reset();
|
|
return createCode(data.number);
|
|
}
|
|
|
|
|
|
return (
|
|
<form onSubmit={form.onSubmit(handleSubmit)}>
|
|
<PhoneNumberInput
|
|
id="number"
|
|
label={t`Enter your phone number`}
|
|
key={form.key('number')}
|
|
{...form.getInputProps('number')}
|
|
/>
|
|
<Button type='submit' w='100%' mt='10px' variant='filled' loading={isPending}><Trans>Send Code</Trans></Button>
|
|
</form>
|
|
)
|
|
}
|
|
|
|
export default PhonePrompt;
|