Charge: Improve error handling

Also fix spinner import

src/modules/membership/Membership.js

@@ -1,7 +1,10 @@
 import React, {Component} from 'react';
-import {ScrollView, Text, View, Linking, StyleSheet, Platform} from "react-native";
-import {Button, Text as NBText} from "native-base";
+import {ScrollView, Text, View, StyleSheet} from "react-native";
+import {Button, Text as NBText, Spinner} from "native-base";
+
 import theme from "../../theme";
+
+
 export default class Membership extends Component {
     render() {
         if (this.props.isFetchingUserData) {

src/modules/membership/Proof.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import {Image, ScrollView, StyleSheet, Text, TouchableOpacity, View} from "react-native";
 import {Button, Text as NBText, Spinner} from 'native-base';
 import Confetti from 'react-native-confetti';
+
 import theme from "../../theme";
 
 export default class Proof extends Component {
@@ -82,6 +83,7 @@ export default class Proof extends Component {
         if (this.props.user.is_member) {
             return;
         }
+
         return (
             <View>
                 {this.props.isChargingMembership && <Spinner color="#f58220"/>}
@@ -101,7 +103,7 @@ export default class Proof extends Component {
 
     confetti() {
         if (this.props.user.is_member) {
-            // FIXME: allmost infinite confetti. Are the animations paused when not visible, if not power hog?
+            // Confetti!!!!
             return <Confetti ref={(node) => this._confettiView = node} confettiCount={Number.MAX_SAFE_INTEGER} />
         }
     }
@@ -122,6 +124,13 @@ export default class Proof extends Component {
             </View>)
     }
 
+    chargeError() {
+        if (!this.props.chargeError) {
+            return;
+        }
+
+        return <View><Text style={styles.errorMessage}>{this.props.chargeError}</Text></View>
+    }
 
     render() {
         return (
@@ -132,6 +141,7 @@ export default class Proof extends Component {
                         {this.membershipName()}
                         {this.logo()}
                         {this.membershipStatus()}
+                        {this.chargeError()}
                         {this.purchaseButton()}
                         {this.membershipValidTo()}
                     </View>
@@ -221,5 +231,10 @@ const styles = StyleSheet.create({
         textAlign: 'center',
         paddingTop: 10,
         paddingBottom: 8
+    },
+    errorMessage: {
+        paddingTop: 10,
+        textAlign: 'center',
+        color: theme.colors.danger
     }
 });

src/modules/membership/ProofContainer.js

@@ -36,7 +36,7 @@ class ProofContainer extends Component {
             user={this.props.user}
             isChargingMembership={this.props.isChargingMembership}
             isLoadingMembershipType={this.props.data.loading}
-            chargeError={this.props.chargeError}
+            chargeError={this.props.chargeError ? 'Kunne ikke belaste bankkortet, prøv igjen...' : ''}
             onChargePress={this.openStripe}
             onLogoutPress={this.props.onLogoutPress}
             membershipPrice={this.getPrice(this.props.data.membershipTypes)}

src/modules/register/UserRegister.js

@@ -1,8 +1,8 @@
 import React, {Component} from 'react';
 import {Container, Header, Content, Form, Item, Input, Label, Spinner, Button, Text, Icon, Toast} from 'native-base';
-import {Platform, StyleSheet, View} from "react-native";
+import {StyleSheet, View} from "react-native";
 import EmailValidator from 'email-validator';
-import platform from "native-base/src/theme/variables/platform";
+
 import theme from "../../theme";
 
 export default class UserRegister extends Component {
@@ -248,7 +248,7 @@ const styles = StyleSheet.create({
     },
     errorMessage: {
         textAlign: 'center',
-        color: platform.btnDangerBg,
+        color: theme.colors.danger,
         fontSize: 14,
     },
     card: theme.card,

src/navigation.js

@@ -9,8 +9,8 @@ import MembershipScreen from "./screens/MembershipScreen";
 import UserRegisterScreen from "./screens/UserRegisterScreen";
 
 const tabBarRoutes = {
-    Membership: { screen: MembershipScreen },
     EventList: { screen: EventListScreen },
+    Membership: { screen: MembershipScreen },
     About: { screen: AboutScreen },
 };
 

src/theme.js

@@ -1,6 +1,9 @@
 import { Platform } from "react-native";
+import platform from "native-base/src/theme/variables/platform";
 
-const colors = {};
+const colors = {
+    danger: platform.btnDangerBg
+};
 
 const card = {
     ...Platform.select({