import React, { useState } from 'react'; import { View, Text, Platform } from 'react-native'; import { connect } from 'react-redux'; import { SafeAreaView } from 'react-native-safe-area-context'; import * as actions from 'loot-core/src/client/actions'; import { colors, mobileStyles as styles } from 'loot-design/src/style'; import { send } from 'loot-core/src/platform/client/fetch'; import { getSubscribeError } from 'loot-core/src/shared/errors'; import Stack from 'loot-design/src/components/Stack'; import KeyboardAvoidingView from 'loot-design/src/components/mobile/KeyboardAvoidingView'; import Header from './Header'; import SingleInput from './SingleInput'; import * as iap from '../../util/iap.js'; import TransitionView from './TransitionView'; export function SubscribeEmail({ navigation, createBudget }) { let [email, setEmail] = useState(''); let [error, setError] = useState(null); let [loading, setLoading] = useState(false); async function eagerlyLoadOfferings(userId, email) { await iap.setupPurchases({ id: userId, email }); iap.getOfferings(); } async function onSignup() { setLoading(true); setError(null); let { error, userId, key } = await send('subscribe-subscribe', { email, useStripe: Platform.OS !== 'ios' }); if (error) { setLoading(false); setError(getSubscribeError(error)); } else { if (Platform.OS === 'ios') { // Don't block on this, but start loading the available offerings // now so when they see the subscribe screen later they don't see // a loading screen eagerlyLoadOfferings(userId, email); } let { error } = await send('subscribe-send-email-code', { email }); if (error) { setError('Something went wrong while activating your account'); return; } setLoading(false); navigation.navigate('Confirm', { email, signingUp: true }); } } let textStyle = [ styles.text, { fontSize: 17, lineHeight: 25, color: 'white' } ]; return ( <SafeAreaView style={{ flex: 1 }}> <KeyboardAvoidingView> <TransitionView navigation={navigation}> {/* <StatusBar barStyle="light-content" /> */} <Header navigation={navigation} loadDemoBudget={() => createBudget({ demoMode: true })} /> <Stack justify="center" style={{ flex: 1, padding: 20 }} spacing={5}> <View> <Text style={[textStyle, { maxWidth: 500 }]}> <Text style={{ fontWeight: '700' }}>Create an account.</Text>{' '} Sign up to sync your data across all devices. By default all your data is local. In the future we will also provide bank syncing. </Text> </View> <SingleInput title="Email" value={email} loading={loading} error={error} inputProps={{ keyboardType: 'email-address', placeholder: '[email protected]' }} onChange={setEmail} onSubmit={onSignup} /> </Stack> </TransitionView> </KeyboardAvoidingView> </SafeAreaView> ); } export default connect( null, actions )(SubscribeEmail);