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 | 13x 232x 232x 232x 6x 6x 6x 232x 47x 47x 232x 6x 232x 6x | import { InfoIcon } from "@phosphor-icons/react";
import { useAppSelector } from "@redux/hooks";
import { selectCardType } from "@redux/slices/checkout";
import { GiveInput, InputProps } from "@shared/GiveInputs/GiveInput";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import React from "react";
import { useFormContext } from "react-hook-form";
type CVVFieldProps = InputProps & {
hideTooltip?: boolean;
};
const CVVField = ({ hideTooltip, ...props }: CVVFieldProps) => {
const { setValue, watch } = useFormContext();
const checkoutCardType = useAppSelector(selectCardType);
const normalizeInput = (value: string) => {
Iif (!value) return value;
const currentValue = value.replace(/[^\d]/g, "");
return currentValue;
};
const CVVLimit = React.useMemo(() => {
switch (checkoutCardType) {
case "AMEX":
return 4;
default:
return 3;
}
}, [checkoutCardType]);
const handleChange = (value: string) => {
setValue("payment.cvv", normalizeInput(value), { shouldValidate: true });
};
return (
<GiveInput
{...props}
onChange={(event) => handleChange(event.target.value)}
rightContent={
<GiveTooltip
title="3-digit security code on the back of your card (4 digits for AMEX)"
placement="top"
color="default"
disableHoverListener={hideTooltip}
>
<InfoIcon size={16} />
</GiveTooltip>
}
maxLength={CVVLimit}
InputProps={{
inputMode: "numeric",
}}
/>
);
};
export default CVVField;
|