@oxyhq/services/lib/commonjs/ui/screens/steps/SignUpWelcomeStep.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 _reactNative = require("react-native");
var _vectorIcons = require("@expo/vector-icons");
var _HighFive = _interopRequireDefault(require("../../../assets/illustrations/HighFive"));
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 SignUpWelcomeStep = ({
  colors,
  styles,
  navigate,
  nextStep
}) => {
  const {
    t
  } = (0, _useI18n.useI18n)();
  const localStyles = stylesheet;
  const baseStyles = _spacing.stepStyles;
  const webShadowReset = _reactNative.Platform.OS === 'web' ? {
    boxShadow: 'none'
  } : null;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: [baseStyles.container, baseStyles.sectionSpacing, {
        alignItems: 'flex-start',
        position: 'relative'
      }],
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HighFive.default, {
        width: 100,
        height: 100
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
        style: [localStyles.languageButton, {
          backgroundColor: colors.inputBackground
        }],
        onPress: () => navigate('LanguageSelector'),
        activeOpacity: 0.7,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
          name: "globe-outline",
          size: 20,
          color: colors.primary
        })
      })]
    }), /*#__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('signup.welcome.title')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
        style: [styles.modernSubtitle, baseStyles.subtitle, {
          color: colors.secondaryText,
          marginBottom: 0,
          marginTop: 0
        }],
        children: t('signup.welcome.subtitle')
      })]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [baseStyles.container, baseStyles.sectionSpacing],
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: [localStyles.actionCard, {
          backgroundColor: colors.inputBackground || colors.card || 'rgba(0,0,0,0.04)'
        }, webShadowReset],
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
          style: [styles.button, localStyles.primaryButton, {
            backgroundColor: colors.primary
          }, webShadowReset],
          onPress: nextStep,
          testID: "get-started-button",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
            style: [styles.buttonText, localStyles.buttonText, {
              color: colors.background
            }],
            children: t('common.actions.getStarted')
          })
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
          style: [styles.footerTextContainer, localStyles.footerLink, {
            marginTop: 0
          }],
          onPress: () => navigate('SignIn'),
          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
            style: [styles.footerText, {
              color: colors.secondaryText
            }],
            children: [t('signup.welcome.haveAccount'), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
              style: {
                color: colors.primary,
                fontWeight: '600'
              },
              children: [" ", t('signup.welcome.signInCta')]
            })]
          })
        })]
      })
    })]
  });
};
var _default = exports.default = SignUpWelcomeStep;
const stylesheet = _reactNative.StyleSheet.create({
  actionCard: {
    width: '100%',
    maxWidth: 420,
    borderRadius: 28,
    paddingHorizontal: 20,
    paddingVertical: 18,
    gap: _spacing.STEP_INNER_GAP,
    alignItems: 'stretch',
    shadowColor: 'transparent'
  },
  primaryButton: {
    borderRadius: 28,
    width: '100%',
    paddingVertical: 16,
    justifyContent: 'center',
    shadowOpacity: 0,
    shadowRadius: 0,
    shadowOffset: {
      width: 0,
      height: 0
    },
    elevation: 0
  },
  buttonText: {
    fontSize: 16,
    fontWeight: '600',
    textAlign: 'center'
  },
  footerLink: {
    alignSelf: 'center'
  },
  languageButton: {
    position: 'absolute',
    top: 0,
    right: 0,
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center'
  }
});
//# sourceMappingURL=SignUpWelcomeStep.js.map