@oxyhq/services/lib/module/ui/screens/steps/SignUpWelcomeStep.js

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

"use strict";

import { View, Text, TouchableOpacity, Platform, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import HighFive from '../../../assets/illustrations/HighFive';
import { useI18n } from '../../hooks/useI18n';
import { STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const SignUpWelcomeStep = ({
  colors,
  styles,
  navigate,
  nextStep
}) => {
  const {
    t
  } = useI18n();
  const localStyles = stylesheet;
  const baseStyles = stepStyles;
  const webShadowReset = Platform.OS === 'web' ? {
    boxShadow: 'none'
  } : null;
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsxs(View, {
      style: [baseStyles.container, baseStyles.sectionSpacing, {
        alignItems: 'flex-start',
        position: 'relative'
      }],
      children: [/*#__PURE__*/_jsx(HighFive, {
        width: 100,
        height: 100
      }), /*#__PURE__*/_jsx(TouchableOpacity, {
        style: [localStyles.languageButton, {
          backgroundColor: colors.inputBackground
        }],
        onPress: () => navigate('LanguageSelector'),
        activeOpacity: 0.7,
        children: /*#__PURE__*/_jsx(Ionicons, {
          name: "globe-outline",
          size: 20,
          color: colors.primary
        })
      })]
    }), /*#__PURE__*/_jsxs(View, {
      style: [baseStyles.container, baseStyles.sectionSpacing, baseStyles.header],
      children: [/*#__PURE__*/_jsx(Text, {
        style: [styles.modernTitle, baseStyles.title, {
          color: colors.text,
          marginBottom: 0,
          marginTop: 0
        }],
        children: t('signup.welcome.title')
      }), /*#__PURE__*/_jsx(Text, {
        style: [styles.modernSubtitle, baseStyles.subtitle, {
          color: colors.secondaryText,
          marginBottom: 0,
          marginTop: 0
        }],
        children: t('signup.welcome.subtitle')
      })]
    }), /*#__PURE__*/_jsx(View, {
      style: [baseStyles.container, baseStyles.sectionSpacing],
      children: /*#__PURE__*/_jsxs(View, {
        style: [localStyles.actionCard, {
          backgroundColor: colors.inputBackground || colors.card || 'rgba(0,0,0,0.04)'
        }, webShadowReset],
        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
          style: [styles.button, localStyles.primaryButton, {
            backgroundColor: colors.primary
          }, webShadowReset],
          onPress: nextStep,
          testID: "get-started-button",
          children: /*#__PURE__*/_jsx(Text, {
            style: [styles.buttonText, localStyles.buttonText, {
              color: colors.background
            }],
            children: t('common.actions.getStarted')
          })
        }), /*#__PURE__*/_jsx(TouchableOpacity, {
          style: [styles.footerTextContainer, localStyles.footerLink, {
            marginTop: 0
          }],
          onPress: () => navigate('SignIn'),
          children: /*#__PURE__*/_jsxs(Text, {
            style: [styles.footerText, {
              color: colors.secondaryText
            }],
            children: [t('signup.welcome.haveAccount'), /*#__PURE__*/_jsxs(Text, {
              style: {
                color: colors.primary,
                fontWeight: '600'
              },
              children: [" ", t('signup.welcome.signInCta')]
            })]
          })
        })]
      })
    })]
  });
};
export default SignUpWelcomeStep;
const stylesheet = StyleSheet.create({
  actionCard: {
    width: '100%',
    maxWidth: 420,
    borderRadius: 28,
    paddingHorizontal: 20,
    paddingVertical: 18,
    gap: 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