@turnkey/react-wallet-kit/dist/components/user/UpdatePhoneNumber.mjs

The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.

import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime, 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(),
    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;
  var handleContinue = /*#__PURE__*/function () {
    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
      var otpId;
      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
        while (1) switch (_context2.prev = _context2.next) {
          case 0:
            if (!isValid) {
              _context2.next = 14;
              break;
            }
            _context2.prev = 1;
            _context2.next = 4;
            return initOtp({
              otpType: OtpType.Sms,
              contact: phoneInput
            });
          case 4:
            otpId = _context2.sent;
            pushPage({
              key: "Verify OTP",
              content: jsx(OtpVerification, _objectSpread2(_objectSpread2({
                contact: phoneInput
              }, formattedPhone && {
                formattedPhone: formattedPhone
              }), {}, {
                otpId: otpId,
                otpType: OtpType.Sms,
                onContinue: function () {
                  var _onContinue = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(otpCode) {
                    var _yield$verifyOtp, verificationToken, res;
                    return _regeneratorRuntime().wrap(function _callee$(_context) {
                      while (1) switch (_context.prev = _context.next) {
                        case 0:
                          _context.next = 2;
                          return verifyOtp({
                            otpId: otpId,
                            otpCode: otpCode,
                            contact: phoneInput,
                            otpType: OtpType.Sms
                          });
                        case 2:
                          _yield$verifyOtp = _context.sent;
                          verificationToken = _yield$verifyOtp.verificationToken;
                          _context.next = 6;
                          return updateUserPhoneNumber({
                            phoneNumber: phoneInput,
                            verificationToken: verificationToken,
                            userId: user.userId
                          });
                        case 6:
                          res = _context.sent;
                          handleSuccess(res);
                        case 8:
                        case "end":
                          return _context.stop();
                      }
                    }, _callee);
                  }));
                  function onContinue(_x) {
                    return _onContinue.apply(this, arguments);
                  }
                  return onContinue;
                }()
              })),
              showTitle: false
            });
            _context2.next = 11;
            break;
          case 8:
            _context2.prev = 8;
            _context2.t0 = _context2["catch"](1);
            onError(_context2.t0);
          case 11:
            _context2.prev = 11;
            setLoading(false);
            return _context2.finish(11);
          case 14:
          case "end":
            return _context2.stop();
        }
      }, _callee2, null, [[1, 8, 11, 14]]);
    }));
    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 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