@0xsequence/connect
Version:
Connect package for Sequence Web SDK
50 lines • 4.16 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.EmailWaasVerify = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const design_system_1 = require("@0xsequence/design-system");
const react_1 = require("react");
const PIN_CODE_LENGTH = 6;
const EmailWaasVerify = (props) => {
const inputRef = (0, react_1.useRef)(null);
const { isLoading, error, onConfirm } = props;
const [isLoadingSendCode, setIsLoadingSendCode] = (0, react_1.useState)(false);
const [isErrorSendCode, setIsErrorSendCode] = (0, react_1.useState)(false);
const [waasEmailPinCode, setWaasEmailPinCode] = (0, react_1.useState)([]);
const [showSentEmail, setShowSentEmail] = (0, react_1.useState)(false);
const isPinCodeValid = !waasEmailPinCode.includes('') && waasEmailPinCode.length === PIN_CODE_LENGTH;
(0, react_1.useEffect)(() => {
props.resetError();
if (isPinCodeValid) {
onConfirm(waasEmailPinCode.join(''));
}
}, [waasEmailPinCode]);
(0, react_1.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 ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "flex py-6 gap-4 items-center justify-center flex-col", children: [(0, jsx_runtime_1.jsx)(design_system_1.Text, { className: "mt-5", variant: "normal", color: "secondary", children: "Enter code received in email." }), (0, jsx_runtime_1.jsx)("div", { ref: inputRef, children: (0, jsx_runtime_1.jsx)(design_system_1.PINCodeInput, { value: waasEmailPinCode, digits: 6, group: 3, onChange: setWaasEmailPinCode, disabled: isLoading }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center items-center relative h-5 w-full gap-6", children: [(0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "small", color: "secondary", children: "Didn't receive an email?" }), showSentEmail && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "small", fontWeight: "bold", color: "muted", children: "Email sent!" }), (0, jsx_runtime_1.jsx)(design_system_1.CheckmarkIcon, { className: "text-positive", size: "sm" })] })), !showSentEmail && ((0, jsx_runtime_1.jsxs)("div", { className: "flex relative flex-row items-center justify-center gap-2", children: [(0, jsx_runtime_1.jsx)(design_system_1.Button, { variant: "text", onClick: onClickResend, disabled: isLoadingSendCode, label: "Resend email" }), isLoadingSendCode && (0, jsx_runtime_1.jsx)(design_system_1.Spinner, { className: "absolute top-0 right-[-18px]", size: "sm" })] }))] }), isErrorSendCode && ((0, jsx_runtime_1.jsx)(design_system_1.Text, { className: "text-center", variant: "small", color: "negative", children: "An error occurred while sending the email" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-4 items-center justify-center flex-col", children: [(0, jsx_runtime_1.jsx)(design_system_1.Button, { variant: "primary", disabled: !isPinCodeValid || isLoading || isLoadingSendCode, label: "Confirm", onClick: () => onConfirm(waasEmailPinCode.join('')), "data-id": "verifyButton" }), isLoading && (0, jsx_runtime_1.jsx)(design_system_1.Spinner, {}), error && ((0, jsx_runtime_1.jsx)(design_system_1.Text, { className: "text-center", variant: "small", color: "negative", children: error.message }))] })] }) }));
};
exports.EmailWaasVerify = EmailWaasVerify;
//# sourceMappingURL=EmailWaasVerify.js.map