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 | 1x 2x 2x 1x 2x 1x 2x | import { useEffect } from "react";
import { RHFInput } from "@common/Input";
import { useFormContext } from "react-hook-form";
import { InputAdornment } from "@mui/material";
import { CVCIcon } from "@assets/icons";
interface CVVInputProps {
CVVLimit?: number;
}
const CvvInput = ({ CVVLimit }: CVVInputProps) => {
const { setValue, watch } = useFormContext();
const normalizeInput = (value: string) => {
Eif (!value) return value;
const currentValue = value.replace(/[^\d]/g, "");
return currentValue;
};
useEffect(() => {
setValue("cvv", normalizeInput(watch("cvv")));
}, [watch("cvv")]);
return (
<RHFInput
name="cvv"
label="CVC"
fullWidth
placeholder={"•".repeat(CVVLimit || 3)}
InputProps={{
endAdornment: (
<InputAdornment position="start" sx={{ alignItems: "center" }}>
<CVCIcon width={34} height={24} />
</InputAdornment>
),
}}
sx={{
letterSpacing: "6px",
"::placeholder": {
marginLeft: "35px",
},
"& .MuiFormHelperText-root": {
letterSpacing: "0px",
},
}}
inputProps={{
maxLength: CVVLimit || 3,
}}
/>
);
};
export default CvvInput;
|