@turnkey/react-wallet-kit
Version:
The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.
197 lines (194 loc) • 7.98 kB
JavaScript
import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsxs, jsx } from 'react/jsx-runtime';
import { faPhone } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useModal } from '../../providers/modal/Hook.mjs';
import { useTurnkey } from '../../providers/client/Hook.mjs';
import { ActionButton } from '../design/Buttons.mjs';
import { useState } from 'react';
import { PhoneInputBox } from '../design/Inputs.mjs';
import clsx from 'clsx';
import { OtpVerification } from '../auth/OTP.mjs';
import { SuccessPage } from '../design/Success.mjs';
import { OtpType } from '@turnkey/core';
function UpdatePhoneNumber(params) {
var _useTurnkey = useTurnkey(),
config = _useTurnkey.config,
user = _useTurnkey.user,
initOtp = _useTurnkey.initOtp,
verifyOtp = _useTurnkey.verifyOtp,
updateUserPhoneNumber = _useTurnkey.updateUserPhoneNumber;
var _useModal = useModal(),
isMobile = _useModal.isMobile,
pushPage = _useModal.pushPage,
closeModal = _useModal.closeModal;
var phone = (user === null || user === void 0 ? void 0 : user.userPhoneNumber) || "";
var _useState = useState(phone),
_useState2 = _slicedToArray(_useState, 2),
phoneInput = _useState2[0],
setPhoneInput = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
loading = _useState4[0],
setLoading = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
isValid = _useState6[0],
setIsValid = _useState6[1];
var _useState7 = useState(""),
_useState8 = _slicedToArray(_useState7, 2),
formattedPhone = _useState8[0],
setFormattedPhone = _useState8[1];
var onSuccess = params.onSuccess,
onError = params.onError,
successPageDuration = params.successPageDuration,
organizationId = params.organizationId,
stampWith = params.stampWith,
userId = params.userId;
var handleContinue = /*#__PURE__*/function () {
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
var _config$auth, _config$auth2, _yield$initOtp, otpId, otpEncryptionTargetBundle, _t;
return _regenerator().w(function (_context2) {
while (1) switch (_context2.p = _context2.n) {
case 0:
if (!isValid) {
_context2.n = 5;
break;
}
_context2.p = 1;
_context2.n = 2;
return initOtp({
otpType: OtpType.Sms,
contact: phoneInput
});
case 2:
_yield$initOtp = _context2.v;
otpId = _yield$initOtp.otpId;
otpEncryptionTargetBundle = _yield$initOtp.otpEncryptionTargetBundle;
pushPage({
key: "Verify OTP",
content: jsx(OtpVerification, _objectSpread2(_objectSpread2({
contact: phoneInput
}, formattedPhone && {
formattedPhone: formattedPhone
}), {}, {
otpId: otpId,
otpEncryptionTargetBundle: otpEncryptionTargetBundle,
otpType: OtpType.Sms,
otpLength: (config === null || config === void 0 ? void 0 : (_config$auth = config.auth) === null || _config$auth === void 0 ? void 0 : _config$auth.otpLength) !== undefined ? Number(config.auth.otpLength) : undefined,
alphanumeric: config === null || config === void 0 ? void 0 : (_config$auth2 = config.auth) === null || _config$auth2 === void 0 ? void 0 : _config$auth2.otpAlphanumeric,
onContinue: function () {
var _onContinue = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(otpCode) {
var _yield$verifyOtp, verificationToken, res;
return _regenerator().w(function (_context) {
while (1) switch (_context.n) {
case 0:
_context.n = 1;
return verifyOtp({
otpId: otpId,
otpCode: otpCode,
otpEncryptionTargetBundle: otpEncryptionTargetBundle
});
case 1:
_yield$verifyOtp = _context.v;
verificationToken = _yield$verifyOtp.verificationToken;
_context.n = 2;
return updateUserPhoneNumber(_objectSpread2({
phoneNumber: phoneInput,
verificationToken: verificationToken,
userId: userId,
organizationId: organizationId
}, params.stampWith && {
stampWith: stampWith
}));
case 2:
res = _context.v;
handleSuccess(res);
case 3:
return _context.a(2);
}
}, _callee);
}));
function onContinue(_x) {
return _onContinue.apply(this, arguments);
}
return onContinue;
}()
})),
showTitle: false
});
_context2.n = 4;
break;
case 3:
_context2.p = 3;
_t = _context2.v;
onError(_t);
case 4:
_context2.p = 4;
setLoading(false);
return _context2.f(4);
case 5:
return _context2.a(2);
}
}, _callee2, null, [[1, 3, 4, 5]]);
}));
return function handleContinue() {
return _ref.apply(this, arguments);
};
}();
var handleSuccess = function handleSuccess(res) {
onSuccess(res);
if (!successPageDuration) {
closeModal();
return;
}
pushPage({
key: "success",
content: jsx(SuccessPage, {
text: "Phone number updated successfully!",
duration: successPageDuration,
onComplete: function onComplete() {
closeModal();
}
}),
preventBack: true,
showTitle: false
});
};
return jsxs("div", {
className: clsx("mt-8", isMobile ? "w-full" : "w-72"),
children: [jsxs("div", {
className: "my-6 flex flex-col items-center",
children: [jsx(FontAwesomeIcon, {
icon: faPhone,
size: "2xl"
}), jsx("div", {
className: "text-2xl font-bold py-2 text-center",
children: params !== null && params !== void 0 && params.title ? params.title : "Update your phone number"
}), (params === null || params === void 0 ? void 0 : params.subTitle) && jsx("div", {
className: "text-sm text-icon-text-light dark:text-icon-text-dark text-center !p-0",
children: params.subTitle
})]
}), jsxs("div", {
className: "flex flex-col gap-4 my-3",
children: [jsx(PhoneInputBox, {
value: phone,
onChange: function onChange(raw, formatted, valid) {
setPhoneInput(raw);
setFormattedPhone(formatted);
setIsValid(valid);
},
onEnter: handleContinue
}), jsx(ActionButton, {
onClick: handleContinue,
disabled: !isValid,
loading: loading,
className: "w-full md:max-w-md bg-primary-light dark:bg-primary-dark text-primary-text-light dark:text-primary-text-dark",
spinnerClassName: "text-primary-text-light dark:text-primary-text-dark",
children: "Continue"
})]
})]
});
}
export { UpdatePhoneNumber };
//# sourceMappingURL=UpdatePhoneNumber.mjs.map