RSXP Cadastro

index.js

import React, { useState, useRef } from 'react';
import {
  TouchableWithoutFeedback,
  KeyboardAvoidingView,
  Keyboard,
  Platform,
  ActivityIndicator,
  Alert,
} from 'react-native';

import { MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';

import api from '../../services/api';

import {
  Container,
  Title,
  Description,
  FormContainer,
  InputContainer,
  InputTitle,
  Input,
  SubmitButton,
  SubmitButtonText,
  ForgotPasswordButton,
  ForgotPasswordButtonText,
} from './styles';

export default function CreateAccount({ navigation }) {
  const [loading, setLoading] = useState(false);

  const [order_id, setOrderId] = useState('');
  const [ticket_number, setTicketNumber] = useState('');
  const [buyer_email, setBuyerEmail] = useState('');
  const [app_email, setAppEmail] = useState('');
  const [app_password, setAppPassword] = useState('');

  const ticketIdInputRef = useRef();
  const buyerEmailInputRef = useRef();
  const appEmailInputRef = useRef();
  const appPasswordInputRef = useRef();

  async function handleCreateAccount() {
    Keyboard.dismiss();

    try {
      setLoading(true);

      await api.post('/integration', {
        order_id,
        ticket_number,
        buyer_email,
        app_email,
        app_password,
      });

      Alert.alert(
        'Sucesso!',
        'Sua conta foi criada, agora faça login para entrar no app.',
        [
          {
            text: 'Fazer login',
            onPress: () => navigation.navigate('Login'),
          },
        ]
      );
    } catch (err) {
      console.log(err);

      const message =
        err.response && err.response.data && err.response.data.error;

      Alert.alert(
        'Ooopsss',
        message ||
          'Falha na criação de conta, verifique seus dados e tente novamente!'
      );

      setLoading(false);
    }
  }

  return (
    <TouchableWithoutFeedback
      onPress={Keyboard.dismiss}
      enabled={Platform.OS === 'ios'}
    >
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={{ flex: 1 }}
      >
        <Container>
          <FormContainer keyboardShouldPersistTaps="handled">
            <Title>CRIE SUA CONTA</Title>
            <Description>
              Para criar sua conta no app você precisará de algumas informações
              que pode obter através da compra do ingresso no Sympla.
            </Description>

            <InputTitle>ID do pedido (obtido no Sympla)</InputTitle>
            <InputContainer>
              <Input
                placeholder="Digite o ID do pedido"
                autoCapitalize="characters"
                autoCorrect={false}
                onChangeText={setOrderId}
                value={order_id}
                returnKeyType="next"
                onSubmitEditing={() => ticketIdInputRef.current.focus()}
              />
              <MaterialCommunityIcons
                name="ticket-outline"
                size={20}
                color="#999"
              />
            </InputContainer>

            <InputTitle>Nº do ingresso (obtido no Sympla)</InputTitle>
            <InputContainer>
              <Input
                placeholder="Digite o Nº do ingresso"
                autoCapitalize="characters"
                autoCorrect={false}
                onChangeText={setTicketNumber}
                value={ticket_number}
                ref={ticketIdInputRef}
                returnKeyType="next"
                onSubmitEditing={() => buyerEmailInputRef.current.focus()}
              />
              <MaterialCommunityIcons
                name="ticket-outline"
                size={20}
                color="#999"
              />
            </InputContainer>

            <InputTitle>E-mail do comprador (obtido no Sympla)</InputTitle>
            <InputContainer>
              <Input
                placeholder="Digite o e-mail do comprador"
                autoCapitalize="none"
                autoCorrect={false}
                keyboardType="email-address"
                onChangeText={setBuyerEmail}
                value={buyer_email}
                ref={buyerEmailInputRef}
                returnKeyType="next"
                onSubmitEditing={() => appEmailInputRef.current.focus()}
              />
              <MaterialIcons name="mail-outline" size={20} color="#999" />
            </InputContainer>

            <InputTitle>E-mail de acesso</InputTitle>
            <InputContainer>
              <Input
                placeholder="Digite seu e-mail para login"
                autoCapitalize="none"
                autoCorrect={false}
                keyboardType="email-address"
                onChangeText={setAppEmail}
                value={app_email}
                ref={appEmailInputRef}
                returnKeyType="next"
                onSubmitEditing={() => appPasswordInputRef.current.focus()}
              />
              <MaterialIcons name="mail-outline" size={20} color="#999" />
            </InputContainer>

            <InputTitle>Senha de acesso</InputTitle>
            <InputContainer>
              <Input
                placeholder="Digite sua senha para login"
                autoCapitalize="none"
                autoCorrect={false}
                secureTextEntry
                onChangeText={setAppPassword}
                value={app_password}
                ref={appPasswordInputRef}
                returnKeyType="send"
                textContentType="oneTimeCode"
                onSubmitEditing={handleCreateAccount}
              />
              <MaterialCommunityIcons
                name="lock-outline"
                size={20}
                color="#999"
              />
            </InputContainer>

            <SubmitButton onPress={handleCreateAccount}>
              {loading ? (
                <ActivityIndicator color="#FFF" size="small" />
              ) : (
                <SubmitButtonText>CRIAR MINHA CONTA</SubmitButtonText>
              )}
            </SubmitButton>

            <ForgotPasswordButton onPress={() => navigation.navigate('Login')}>
              <ForgotPasswordButtonText>Voltar</ForgotPasswordButtonText>
            </ForgotPasswordButton>
          </FormContainer>
        </Container>
      </KeyboardAvoidingView>
    </TouchableWithoutFeedback>
  );
}

styles.js

import styled from 'styled-components/native';
import { StyleSheet } from 'react-native';
import Constants from 'expo-constants';

export const Container = styled.View`
  flex: 1;
  justify-content: center;
  background: #100f12;
  padding-top: ${Constants.statusBarHeight}px;
`;

export const Title = styled.Text`
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  text-align: center;
`;

export const Description = styled.Text`
  text-align: center;
  color: #999;
  font-size: 15px;
  margin: 5px 0 30px;
  max-width: 260px;
  align-self: center;
`;

export const FormContainer = styled.ScrollView.attrs({
  // contentContainerStyle: { justifyContent: 'center' },
})`
  flex: 1;
  padding: 0 30px;
  margin-top: 30px;
`;

export const InputTitle = styled.Text`
  color: #999;
  font-weight: bold;
`;

export const InputContainer = styled.View`
  flex-direction: row;
  border-bottom-width: ${StyleSheet.hairlineWidth};
  border-color: rgba(255, 255, 255, 0.2);
  justify-content: space-between;
  margin-bottom: 30px;
`;

export const Input = styled.TextInput.attrs({
  placeholderTextColor: '#999',
})`
  height: 48px;
  font-size: 17px;
  color: #fff;
  flex: 1;
`;

export const SubmitButton = styled.TouchableOpacity`
  height: 50px;
  background-color: #7159c1;
  justify-content: center;
  align-items: center;
`;

export const SubmitButtonText = styled.Text`
  color: #e6e6e6;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 2.8px;
`;

export const ForgotPasswordButton = styled.TouchableOpacity`
  margin: 30px 0 50px;
  align-items: center;
`;

export const ForgotPasswordButtonText = styled.Text`
  color: #999;
  font-size: 16px;
`;