Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 125x 1477x 1477x 1477x 1477x 1477x 2x 1477x 1452x 1152x 12x | import React from "react";
import { useMutation, useSuspenseQuery } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
import { suspendedFallback } from "~app/components/suspense-wrapper";
import { useTrpcMutationOptions } from "~app/hooks/use-trpc-mutation-options";
import { useTRPC } from "~app/utils/trpc";
import { Button } from "~components/button";
import { Card } from "~components/card";
import { Text } from "~components/text";
import { options as userResendEmailOptions } from "~mutations/user/resend-email";
export const EmailVerificationCard = suspendedFallback(
() => {
const { t } = useTranslation();
const trpc = useTRPC();
const { data: user } = useSuspenseQuery(trpc.user.get.queryOptions());
const resendEmailMutation = useMutation(
trpc.user.resendEmail.mutationOptions(
useTrpcMutationOptions(userResendEmailOptions),
),
);
const resendEmail = React.useCallback(
() => resendEmailMutation.mutate(),
[resendEmailMutation],
);
if (user.user.verified) {
return null;
}
return (
<Card
className="min-w-fit self-center"
testID="email-verification-card"
header={
<Text className="text-warning text-center text-2xl">
{t("components.emailVerification.header")}
</Text>
}
bodyClassName="gap-4"
>
<Text>{t("components.emailVerification.text")}</Text>
{resendEmailMutation.status === "success" ? (
<Text className="text-center text-2xl">
{t("components.emailVerification.success", {
email: resendEmailMutation.data.email,
})}
</Text>
) : (
<Button
color="primary"
onPress={resendEmail}
isDisabled={resendEmailMutation.isPending}
isLoading={resendEmailMutation.isPending}
>
{t("components.emailVerification.resendButton")}
</Button>
)}
</Card>
);
},
() => null,
);
|