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

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

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
var reactFontawesome = require('@fortawesome/react-fontawesome');
var Hook$1 = require('../../providers/modal/Hook.js');
var Hook = require('../../providers/client/Hook.js');
var Buttons = require('../design/Buttons.js');
var react = require('react');
var Inputs = require('../design/Inputs.js');
var clsx = require('clsx');
var OTP = require('../auth/OTP.js');
var Success = require('../design/Success.js');
var core = require('@turnkey/core');

function UpdatePhoneNumber(params) {
  const {
    user,
    initOtp,
    verifyOtp,
    updateUserPhoneNumber
  } = Hook.useTurnkey();
  const {
    isMobile,
    pushPage,
    closeModal
  } = Hook$1.useModal();
  const phone = user?.userPhoneNumber || "";
  const [phoneInput, setPhoneInput] = react.useState(phone);
  const [loading, setLoading] = react.useState(false);
  const [isValid, setIsValid] = react.useState(false);
  const [formattedPhone, setFormattedPhone] = react.useState("");
  const {
    onSuccess,
    onError,
    successPageDuration
  } = params;
  const handleContinue = async () => {
    if (isValid) {
      try {
        const otpId = await initOtp({
          otpType: core.OtpType.Sms,
          contact: phoneInput
        });
        pushPage({
          key: "Verify OTP",
          content: jsxRuntime.jsx(OTP.OtpVerification, {
            contact: phoneInput,
            ...(formattedPhone && {
              formattedPhone
            }),
            otpId: otpId,
            otpType: core.OtpType.Sms,
            onContinue: async otpCode => {
              const {
                verificationToken
              } = await verifyOtp({
                otpId,
                otpCode,
                contact: phoneInput,
                otpType: core.OtpType.Sms
              });
              const res = await updateUserPhoneNumber({
                phoneNumber: phoneInput,
                verificationToken,
                userId: user.userId
              });
              handleSuccess(res);
            }
          }),
          showTitle: false
        });
      } catch (error) {
        onError(error);
      } finally {
        setLoading(false);
      }
    }
  };
  const handleSuccess = res => {
    onSuccess(res);
    if (!successPageDuration) {
      closeModal();
      return;
    }
    pushPage({
      key: "success",
      content: jsxRuntime.jsx(Success.SuccessPage, {
        text: "Phone number updated successfully!",
        duration: successPageDuration,
        onComplete: () => {
          closeModal();
        }
      }),
      preventBack: true,
      showTitle: false
    });
  };
  return jsxRuntime.jsxs("div", {
    className: clsx("mt-8", isMobile ? "w-full" : "w-72"),
    children: [jsxRuntime.jsxs("div", {
      className: "my-6 flex flex-col items-center",
      children: [jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
        icon: freeSolidSvgIcons.faPhone,
        size: "2xl"
      }), jsxRuntime.jsx("div", {
        className: "text-2xl font-bold py-2 text-center",
        children: params?.title ? params.title : "Update your phone number"
      }), params?.subTitle && jsxRuntime.jsx("div", {
        className: "text-sm text-icon-text-light dark:text-icon-text-dark text-center !p-0",
        children: params.subTitle
      })]
    }), jsxRuntime.jsxs("div", {
      className: "flex flex-col gap-4 my-3",
      children: [jsxRuntime.jsx(Inputs.PhoneInputBox, {
        value: phone,
        onChange: (raw, formatted, valid) => {
          setPhoneInput(raw);
          setFormattedPhone(formatted);
          setIsValid(valid);
        },
        onEnter: handleContinue
      }), jsxRuntime.jsx(Buttons.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"
      })]
    })]
  });
}

exports.UpdatePhoneNumber = UpdatePhoneNumber;
//# sourceMappingURL=UpdatePhoneNumber.js.map