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 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 1x 40x 40x 40x 40x 40x 40x 40x 40x 40x 12x 40x 2x 2x 2x 40x | import GiveText from "@shared/Text/GiveText";
import FeeSection from "./FeeSection";
import { useFormContext } from "react-hook-form";
import { selectUser } from "@redux/slices/auth/auth";
import { useAppSelector } from "@redux/hooks";
import { useAppTheme } from "@theme/v2/Provider";
import { maskEmail } from "@hooks/auth-api/useLoginOTP";
import { useCustomThemeV2 } from "@theme/hooks/useCustomThemeV2";
import { useEffect, useState } from "react";
import { sendTfaVerificationCode } from "@services/api/2FA/tfaVerifications";
import { useMutation } from "react-query";
import { OTPVerification } from "@features/common/OTP";
import { parseAmount } from "@utils/index";
type Props = {
fees: string;
selectedBankAccount: string;
totalAmount: number;
minimumReserveBPSFee?: number;
};
const VerificationStep = ({
fees,
totalAmount,
selectedBankAccount,
minimumReserveBPSFee,
}: Props) => {
const {
watch,
setValue,
formState: { errors },
} = useFormContext();
const tfaVerificationsMutation = useMutation(sendTfaVerificationCode);
const { palette } = useAppTheme();
const { isMobileView } = useCustomThemeV2();
const { email } = useAppSelector(selectUser);
const values = watch();
const [timer, setTimer] = useState(60);
const resendCode = (e: React.MouseEvent) => {
e.preventDefault();
tfaVerificationsMutation.mutate("email");
setTimer(60);
};
const handleChange = (value: string) => {
setValue("otp", value, { shouldDirty: true, shouldValidate: true });
};
useEffect(() => {
let interval: NodeJS.Timeout;
Eif (timer > 0) {
interval = setInterval(() => {
setTimer((prev) => prev - 1);
}, 1000);
}
return () => clearInterval(interval);
}, [timer]);
return (
<>
<FeeSection
fees={fees}
newBalance={
minimumReserveBPSFee
? totalAmount + minimumReserveBPSFee
: totalAmount
}
minimumReserveBPSFee={
minimumReserveBPSFee ? parseAmount(minimumReserveBPSFee) : undefined
}
sendTo={selectedBankAccount}
transferAmount={values.amount}
/>
<OTPVerification
email={email}
otp={values.otp}
setOtp={handleChange}
error={errors?.otp}
timer={timer}
onResend={resendCode}
timerSx={{ paddingBottom: isMobileView ? 0 : "9px" }}
description={
<GiveText variant="bodyS" color="secondary" textAlign="center">
We sent verification code to{" "}
<span style={{ color: palette.text.primary }}>
{maskEmail(email, 5)}
</span>
,<br /> enter it below to complete your money transfer.
</GiveText>
}
/>
</>
);
};
export default VerificationStep;
|