@oxyhq/services/lib/commonjs/ui/screens/steps/RecoverRequestStep.js

Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _vectorIcons = require("@expo/vector-icons");
var _HighFive = _interopRequireDefault(require("../../../assets/illustrations/HighFive"));
var _TextField = _interopRequireDefault(require("../../components/internal/TextField"));
var _GroupedPillButtons = _interopRequireDefault(require("../../components/internal/GroupedPillButtons"));
var _sonner = require("../../../lib/sonner");
var _useI18n = require("../../hooks/useI18n");
var _spacing = require("../../styles/spacing");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const RecoverRequestStep = ({
  colors,
  styles,
  navigate,
  nextStep,
  identifier,
  setIdentifier,
  errorMessage,
  setErrorMessage,
  isLoading,
  setIsLoading,
  oxyServices
}) => {
  const inputRef = (0, _react.useRef)(null);
  const {
    t
  } = (0, _useI18n.useI18n)();
  const baseStyles = _spacing.stepStyles;
  const handleIdentifierChange = text => {
    setIdentifier(text);
    if (errorMessage) setErrorMessage('');
  };
  const handleRequest = async () => {
    if (!identifier || identifier.length < 3) {
      setErrorMessage(t('recover.username.errorRequired') || 'Please enter your username.');
      setTimeout(() => inputRef.current?.focus(), 0);
      return;
    }
    setErrorMessage('');
    setIsLoading(true);
    try {
      _sonner.toast.info(t('recover.noEmail'));
    } finally {
      setIsLoading(false);
    }
  };
  const handleRequestWithFocus = () => {
    if (!identifier) {
      setTimeout(() => inputRef.current?.focus(), 0);
    }
    handleRequest();
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [baseStyles.container, baseStyles.sectionSpacing, {
        alignItems: 'flex-start'
      }],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_HighFive.default, {
        width: 100,
        height: 100
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: [baseStyles.container, baseStyles.sectionSpacing, baseStyles.header],
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [styles.modernTitle, baseStyles.title, {
          color: colors.text,
          marginBottom: 0,
          marginTop: 0
        }],
        children: t('recover.title')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [styles.modernSubtitle, baseStyles.subtitle, {
          color: colors.secondaryText,
          marginBottom: 0,
          marginTop: 0
        }],
        children: t('recover.noEmail')
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [baseStyles.container, baseStyles.sectionSpacing],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
        ref: inputRef,
        label: t('recover.username.label'),
        leading: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
          name: "mail-outline",
          size: 24,
          color: colors.secondaryText
        }),
        value: identifier,
        onChangeText: handleIdentifierChange,
        autoCapitalize: "none",
        autoCorrect: false,
        testID: "recover-identifier-input",
        variant: "filled",
        error: errorMessage || undefined,
        helperText: t('recover.username.helper') || 'Enter your username or email',
        editable: !isLoading,
        onSubmitEditing: handleRequestWithFocus,
        autoFocus: true,
        accessibilityLabel: t('recover.username.label'),
        accessibilityHint: t('recover.username.helper') || 'Enter your username or email to recover your account',
        style: {
          marginBottom: 0
        }
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
        buttons: [{
          text: t('common.actions.back'),
          onPress: () => navigate('SignIn'),
          icon: 'arrow-back',
          variant: 'transparent'
        }, {
          text: t('common.actions.continue'),
          onPress: handleRequest,
          icon: 'information-circle-outline',
          variant: 'primary',
          loading: isLoading,
          disabled: isLoading || !identifier || identifier.length < 3
        }],
        colors: colors
      })
    })]
  });
};
var _default = exports.default = RecoverRequestStep;
//# sourceMappingURL=RecoverRequestStep.js.map