@0xsequence/connect
Version:
Connect package for Sequence Web SDK
46 lines • 3.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button, CheckmarkIcon, PINCodeInput, Spinner, Text } from '@0xsequence/design-system';
import { useEffect, useRef, useState } from 'react';
const PIN_CODE_LENGTH = 6;
export const EmailWaasVerify = (props) => {
const inputRef = useRef(null);
const { isLoading, error, onConfirm } = props;
const [isLoadingSendCode, setIsLoadingSendCode] = useState(false);
const [isErrorSendCode, setIsErrorSendCode] = useState(false);
const [waasEmailPinCode, setWaasEmailPinCode] = useState([]);
const [showSentEmail, setShowSentEmail] = useState(false);
const isPinCodeValid = !waasEmailPinCode.includes('') && waasEmailPinCode.length === PIN_CODE_LENGTH;
useEffect(() => {
props.resetError();
if (isPinCodeValid) {
onConfirm(waasEmailPinCode.join(''));
}
}, [waasEmailPinCode]);
useEffect(() => {
if (inputRef.current) {
const firstInput = inputRef.current?.childNodes?.[0]?.childNodes?.[0];
if (firstInput) {
;
firstInput?.focus();
}
}
}, [inputRef]);
const onClickResend = async () => {
props.resetError();
setIsErrorSendCode(false);
setIsLoadingSendCode(true);
try {
await props.sendEmailCode();
setShowSentEmail(true);
setTimeout(() => {
setShowSentEmail(false);
}, 3000);
}
catch (e) {
setIsErrorSendCode(true);
}
setIsLoadingSendCode(false);
};
return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex py-6 gap-4 items-center justify-center flex-col", children: [_jsx(Text, { className: "mt-5", variant: "normal", color: "secondary", children: "Enter code received in email." }), _jsx("div", { ref: inputRef, children: _jsx(PINCodeInput, { value: waasEmailPinCode, digits: 6, group: 3, onChange: setWaasEmailPinCode, disabled: isLoading }) }), _jsxs("div", { className: "flex justify-center items-center relative h-5 w-full gap-6", children: [_jsx(Text, { variant: "small", color: "secondary", children: "Didn't receive an email?" }), showSentEmail && (_jsxs("div", { className: "flex flex-row items-center justify-center gap-2", children: [_jsx(Text, { variant: "small", fontWeight: "bold", color: "muted", children: "Email sent!" }), _jsx(CheckmarkIcon, { className: "text-positive", size: "sm" })] })), !showSentEmail && (_jsxs("div", { className: "flex relative flex-row items-center justify-center gap-2", children: [_jsx(Button, { variant: "text", onClick: onClickResend, disabled: isLoadingSendCode, label: "Resend email" }), isLoadingSendCode && _jsx(Spinner, { className: "absolute top-0 right-[-18px]", size: "sm" })] }))] }), isErrorSendCode && (_jsx(Text, { className: "text-center", variant: "small", color: "negative", children: "An error occurred while sending the email" })), _jsxs("div", { className: "flex gap-4 items-center justify-center flex-col", children: [_jsx(Button, { variant: "primary", disabled: !isPinCodeValid || isLoading || isLoadingSendCode, label: "Confirm", onClick: () => onConfirm(waasEmailPinCode.join('')), "data-id": "verifyButton" }), isLoading && _jsx(Spinner, {}), error && (_jsx(Text, { className: "text-center", variant: "small", color: "negative", children: error.message }))] })] }) }));
};
//# sourceMappingURL=EmailWaasVerify.js.map