From b98009652a9fe7d6e0124103331896422ba936de Mon Sep 17 00:00:00 2001
From: Adolfo Builes <builes.adolfo@gmail.com>
Date: Mon, 23 Jul 2018 11:21:50 -0500
Subject: [PATCH] Add new payment form component.

---
 app/components/PaymentForm.tsx                |  88 +++++
 app/components/__tests__/PaymentForm.test.tsx |  18 +
 .../__snapshots__/PaymentForm.test.tsx.snap   | 313 ++++++++++++++++++
 storybook/stories/PaymentForm/index.tsx       |  30 ++
 storybook/stories/index.js                    |   4 +
 5 files changed, 453 insertions(+)
 create mode 100644 app/components/PaymentForm.tsx
 create mode 100644 app/components/__tests__/PaymentForm.test.tsx
 create mode 100644 app/components/__tests__/__snapshots__/PaymentForm.test.tsx.snap
 create mode 100644 storybook/stories/PaymentForm/index.tsx

diff --git a/app/components/PaymentForm.tsx b/app/components/PaymentForm.tsx
new file mode 100644
index 0000000..2918856
--- /dev/null
+++ b/app/components/PaymentForm.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { Alert } from 'react-native'
+import { Container, Content, Form, Item, Input, Label, Button, Text, Spinner } from 'native-base';
+import { styles as s } from "react-native-style-tachyons";
+
+import { Transaction } from '../Types'
+
+interface Props {
+  send: (username: string, amount: string) => Promise<Transaction>
+  didSend: () => void
+}
+
+interface State {
+  amount: string
+  username: string
+  sending: boolean
+}
+
+class PaymentForm extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+
+    this.state = {
+      amount: '',
+      username: '',
+      sending: false
+    }
+  }
+
+  async send(): Promise<Transaction> {
+    const { username, amount } = this.state
+
+    this.setState({
+      sending: true
+    })
+
+    const transaction = await this.props.send(username, amount)
+
+    this.setState({
+      sending: false
+    })
+
+    this.props.didSend()
+
+    return transaction
+  }
+
+  render() {
+    const { amount, username, sending } = this.state
+
+    return (
+      <Container style={{backgroundColor: '#F5FCFF'}}>
+        <Content scrollEnabled={false}>
+          <Form>
+            <Item floatingLabel>
+              <Label>Recipient username</Label>
+              <Input
+                onChangeText={(username) => this.setState({ username })}
+                value={username}
+                autoFocus={true}
+                autoCorrect={false}
+                autoCapitalize={"none"}
+              />
+            </Item>
+            <Item floatingLabel>
+              <Label>Amount</Label>
+              <Input
+                onChangeText={(amount) => this.setState({ amount })}
+                value={amount}
+                keyboardType={'decimal-pad'}
+                autoCorrect={false}
+                autoCapitalize={"none"}
+              />
+            </Item>
+            {!sending && (
+               <Button full style={[s.mt4]} onPress={() => this.send()}>
+                 <Text>Send</Text>
+               </Button>
+            )}
+            {sending && <Spinner color="blue" />}
+          </Form>
+        </Content>
+      </Container>
+    );
+  }
+}
+
+export default PaymentForm
diff --git a/app/components/__tests__/PaymentForm.test.tsx b/app/components/__tests__/PaymentForm.test.tsx
new file mode 100644
index 0000000..4903181
--- /dev/null
+++ b/app/components/__tests__/PaymentForm.test.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+import PaymentForm from '../PaymentForm'
+
+import * as renderer from 'react-test-renderer'
+
+const send = (amount: string) => {
+  return new Promise.resolve({
+    id: '1234'
+  })
+}
+
+jest.useFakeTimers()
+
+it('renders correctly', () => {
+  const rendered = renderer.create(<PaymentForm send={send} />).toJSON()
+
+  expect(rendered).toMatchSnapshot()
+});
diff --git a/app/components/__tests__/__snapshots__/PaymentForm.test.tsx.snap b/app/components/__tests__/__snapshots__/PaymentForm.test.tsx.snap
new file mode 100644
index 0000000..577806b
--- /dev/null
+++ b/app/components/__tests__/__snapshots__/PaymentForm.test.tsx.snap
@@ -0,0 +1,313 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#fff",
+        "flex": 1,
+        "height": 1334,
+      },
+      Object {
+        "backgroundColor": "#F5FCFF",
+      },
+    ]
+  }
+>
+  <RCTScrollView
+    automaticallyAdjustContentInsets={false}
+    contentContainerStyle={
+      Array [
+        Object {
+          "padding": undefined,
+        },
+        undefined,
+      ]
+    }
+    contentInset={
+      Object {
+        "bottom": 0,
+      }
+    }
+    enableAutomaticScroll={true}
+    enableResetScrollToCoords={true}
+    extraHeight={75}
+    extraScrollHeight={0}
+    getScrollResponder={[Function]}
+    handleOnScroll={[Function]}
+    keyboardDismissMode="interactive"
+    keyboardOpeningTime={250}
+    keyboardShouldPersistTaps="handled"
+    keyboardSpace={0}
+    onScroll={[Function]}
+    resetKeyboardSpace={[Function]}
+    resetScrollToCoords={
+      Object {
+        "x": 0,
+        "y": 0,
+      }
+    }
+    scrollEnabled={false}
+    scrollEventThrottle={1}
+    scrollForExtraHeightOnAndroid={[Function]}
+    scrollToEnd={[Function]}
+    scrollToFocusedInput={[Function]}
+    scrollToPosition={[Function]}
+    showsVerticalScrollIndicator={true}
+    style={
+      Object {
+        "backgroundColor": "transparent",
+        "flex": 1,
+      }
+    }
+    viewIsInsideTabBar={false}
+  >
+    <View>
+      <View
+        style={Object {}}
+      >
+        <View
+          accessible={true}
+          isTVSelectable={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "transparent",
+              "borderBottomWidth": 1,
+              "borderColor": "#D9D5DC",
+              "borderLeftWidth": 0,
+              "borderRightWidth": 0,
+              "borderTopWidth": 0,
+              "flexDirection": "row",
+              "marginLeft": 15,
+              "marginTop": 15,
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "left": 0,
+                "opacity": 1,
+                "paddingBottom": undefined,
+                "paddingTop": undefined,
+                "position": "absolute",
+                "right": 0,
+                "top": 18,
+              }
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Object {
+                  "color": "#575757",
+                  "fontSize": 17,
+                  "left": 0,
+                  "paddingRight": 5,
+                  "top": 6,
+                }
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "fontSize": 17,
+                  }
+                }
+              >
+                Recipient username
+              </Text>
+            </Text>
+          </View>
+          <TextInput
+            allowFontScaling={true}
+            autoCapitalize="none"
+            autoCorrect={false}
+            autoFocus={true}
+            editable={true}
+            onBlur={[Function]}
+            onChangeText={[Function]}
+            onFocus={[Function]}
+            placeholderTextColor="#575757"
+            style={
+              Object {
+                "color": "#000",
+                "flex": 1,
+                "fontSize": 17,
+                "height": 50,
+                "marginLeft": null,
+                "paddingBottom": 7,
+                "paddingLeft": null,
+                "paddingRight": 5,
+                "paddingTop": 3,
+                "top": 10,
+              }
+            }
+            underlineColorAndroid="rgba(0,0,0,0)"
+            value=""
+          />
+        </View>
+        <View
+          accessible={true}
+          isTVSelectable={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "transparent",
+              "borderBottomWidth": 1,
+              "borderColor": "#D9D5DC",
+              "borderLeftWidth": 0,
+              "borderRightWidth": 0,
+              "borderTopWidth": 0,
+              "flexDirection": "row",
+              "marginLeft": 15,
+              "marginTop": 15,
+              "opacity": 1,
+            }
+          }
+        >
+          <View
+            style={
+              Object {
+                "left": 0,
+                "opacity": 1,
+                "paddingBottom": undefined,
+                "paddingTop": undefined,
+                "position": "absolute",
+                "right": 0,
+                "top": 18,
+              }
+            }
+          >
+            <Text
+              accessible={true}
+              allowFontScaling={true}
+              ellipsizeMode="tail"
+              style={
+                Object {
+                  "color": "#575757",
+                  "fontSize": 17,
+                  "left": 0,
+                  "paddingRight": 5,
+                  "top": 6,
+                }
+              }
+            >
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                style={
+                  Object {
+                    "fontSize": 17,
+                  }
+                }
+              >
+                Amount
+              </Text>
+            </Text>
+          </View>
+          <TextInput
+            allowFontScaling={true}
+            autoCapitalize="none"
+            autoCorrect={false}
+            editable={true}
+            keyboardType="decimal-pad"
+            onBlur={[Function]}
+            onChangeText={[Function]}
+            onFocus={[Function]}
+            placeholderTextColor="#575757"
+            style={
+              Object {
+                "color": "#000",
+                "flex": 1,
+                "fontSize": 17,
+                "height": 50,
+                "marginLeft": null,
+                "paddingBottom": 7,
+                "paddingLeft": null,
+                "paddingRight": 5,
+                "paddingTop": 3,
+                "top": 10,
+              }
+            }
+            underlineColorAndroid="rgba(0,0,0,0)"
+            value=""
+          />
+        </View>
+        <View
+          accessible={true}
+          isTVSelectable={true}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "alignSelf": "stretch",
+              "backgroundColor": "#007aff",
+              "borderBottomWidth": null,
+              "borderColor": "#007aff",
+              "borderLeftWidth": null,
+              "borderRadius": 0,
+              "borderRightWidth": null,
+              "borderTopWidth": null,
+              "elevation": 2,
+              "flexDirection": "row",
+              "height": 45,
+              "justifyContent": "center",
+              "opacity": 1,
+              "paddingBottom": 6,
+              "paddingTop": 6,
+            }
+          }
+        >
+          <Text
+            accessible={true}
+            allowFontScaling={true}
+            ellipsizeMode="tail"
+            style={
+              Object {
+                "backgroundColor": "transparent",
+                "color": "#fff",
+                "fontFamily": "System",
+                "fontSize": 16.5,
+                "marginLeft": 0,
+                "marginRight": 0,
+                "paddingLeft": 16,
+                "paddingRight": 16,
+              }
+            }
+            uppercase={false}
+          >
+            Send
+          </Text>
+        </View>
+      </View>
+    </View>
+  </RCTScrollView>
+</View>
+`;
diff --git a/storybook/stories/PaymentForm/index.tsx b/storybook/stories/PaymentForm/index.tsx
new file mode 100644
index 0000000..78e9910
--- /dev/null
+++ b/storybook/stories/PaymentForm/index.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Alert } from 'react-native';
+import PaymentForm from '../../../app/components/PaymentForm';
+
+class PaymentFormStory extends React.Component {
+  render() {
+    const transaction = {
+      id: '1234'
+    }
+
+    const send = (username: string, amount: string) => {
+      return new Promise((resolve) => {
+        Alert.alert(
+          `Sending ${amount} to ${username}!`,
+          'This should call the mutation payment',
+          [
+            {text: 'OK', onPress: () => resolve(transaction)},
+          ],
+          { cancelable: false }
+        )
+      })
+        }
+
+    return (
+      <PaymentForm send={send} didSend={()=> {}} />
+    )
+  }
+}
+
+export default PaymentFormStory
diff --git a/storybook/stories/index.js b/storybook/stories/index.js
index 765d69a..cfca2a4 100644
--- a/storybook/stories/index.js
+++ b/storybook/stories/index.js
@@ -11,6 +11,7 @@ import Login from './Login'
 import Balance from '../../app/containers/Balance'
 import Payment from './Payment'
 import Transfer from './Transfer'
+import PaymentForm from './PaymentForm'
 
 storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />)
 
@@ -47,3 +48,6 @@ storiesOf('Payment', module)
 
 storiesOf('TransferForm', module).
   add('default', () => <Transfer />)
+
+storiesOf('PaymentForm', module).
+  add('default', () => <PaymentForm />)