zet-fragment/index.js

ZET fragment

import Expo from 'expo';
import React from 'react';
import { Text, View, StyleSheet, Button, Alert, TextInput } from 'react-native';

export default class MembershipArea extends React.Component {
  state = {
    customerNumber: "3029474557"
  };

  _loadMembershipArea = async () => {
    try {
      const response = await fetch(`https://dredd.mask.zalan.do/api/membership-area?ts=0&sig=13131a3044c82d2c6c4edee5651aba00c6210773`, {
        headers: {
          'Content-Type': 'application/json',
          'X-Zalando-Mobile-App': '3580f92a4bafb890i',
          'x-app-domain': '1',
          'x-zalando-customer': this.state.customerNumber,
          'X-Zalando-Request-Uri': '/a',
        }
      });
      const result = await response.json();
      console.log('result', result);

      if (response.status === 200) {
        this.setState({ message: result.subscription_info_message });
      } else if (response.status === 404) {
        this.setState({ message: result.detail });
      }
      this.setState({ membershipArea: result });
    } catch (e) {
      console.log('request failed', e);
      this.setState({ message: 'request failed' });
      Alert.alert(
        'Oops!',
        'Failed!',
      );
    }
  };

  render() {

    return (
      <View style={styles.container}>

        <TextInput
          value={this.state.customerNumber}
          onChangeText={(customerNumber) => this.setState({customerNumber})}
          onSubmitEditing={this._loadMembershipArea}
          style={styles.textInput}
        />

        <Text style={styles.paragraph}>
          {this.state.message}
        </Text>

        <Button
          title="Load membership area"
          onPress={this._loadMembershipArea}
        />

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Expo.Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  textInput: {
    margin: 24,
    width: 200,
    height: 44,
    padding: 8,
    color: '#34495e'
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'left',
    color: '#34495e',
  },
});