Add back button on credit card and billing address screens

finishes https://artsyproduct.atlassian.net/browse/PURCHASE-215

CHANGELOG.md

@@ -24,6 +24,7 @@
 * Now users see an error message when MP returns an error on the Registration and Confirm bid screens - yuki24
 * Update credit card form to have more sophisticated keyboard behavior - sweir27
 * Add registration result screens - maxim
+* Add a back button to the Billing address form screen and the Credit card form screen - yuki24
 
 ### 1.5.7
 

src/lib/Components/Bidding/Components/BackButton.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import { NavigatorIOS, TouchableWithoutFeedback, ViewProperties } from "react-native"
+
+import { Image } from "../Elements/Image"
+import { theme } from "../Elements/Theme"
+
+interface ContainerWithBackButtonProps extends ViewProperties {
+  navigator: NavigatorIOS
+}
+
+export class BackButton extends React.Component<ContainerWithBackButtonProps> {
+  goBack() {
+    this.props.navigator.pop()
+  }
+
+  render() {
+    return (
+      <TouchableWithoutFeedback onPress={() => this.goBack()}>
+        <Image
+          position="absolute"
+          top={theme.space[3]}
+          left={theme.space[3]}
+          source={require("../../../../../images/angle-left.png")}
+          style={{ zIndex: 10 }} // Here the style prop is intentionally used to avoid making zIndex too handy.
+        />
+      </TouchableWithoutFeedback>
+    )
+  }
+}

src/lib/Components/Bidding/Elements/Image.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+import styled from "styled-components/native"
+import { height, position, space, textAlign, width } from "styled-system"
+import { HeightProps, SpaceProps, TextAlignProps, WidthProps } from "./types"
+
+interface IconProps extends SpaceProps, WidthProps, HeightProps, SpaceProps, TextAlignProps {}
+
+const StyledImage = styled.Image.attrs<IconProps>({})`
+  ${height};
+  ${position};
+  ${space};
+  ${textAlign};
+  ${width};
+`
+
+export const Image = props => <StyledImage {...props} />

src/lib/Components/Bidding/Screens/BillingAddress.tsx

@@ -2,13 +2,14 @@ import React from "react"
 
 import { Schema, screenTrack, track } from "../../../utils/track"
 
-import { NavigatorIOS, ScrollView } from "react-native"
+import { NavigatorIOS, ScrollView, View } from "react-native"
 
 import { Flex } from "../Elements/Flex"
 import { Sans12, Serif16 } from "../Elements/Typography"
 
 import { validatePresence } from "../Validators"
 
+import { BackButton } from "../Components/BackButton"
 import { BiddingThemeProvider } from "../Components/BiddingThemeProvider"
 import { Button } from "../Components/Button"
 import { Container } from "../Components/Containers"
@@ -88,52 +89,56 @@ export class BillingAddress extends React.Component<BillingAddressProps, Billing
   render() {
     return (
       <BiddingThemeProvider>
-        <ScrollView>
-          <Container>
-            <Title mt={0} mb={6}>
-              Your billing address
-            </Title>
-
-            <StyledInput
-              label="Full name"
-              placeholder="Enter your full name"
-              autoCapitalize="words"
-              {...this.propsForInput("fullName")}
-            />
-
-            <StyledInput
-              label="Address line 1"
-              placeholder="Enter your street address"
-              autoCapitalize="words"
-              {...this.propsForInput("addressLine1")}
-            />
-
-            <StyledInput
-              label="Address line 2 (optional)"
-              placeholder="Enter your apt, floor, suite, etc."
-              autoCapitalize="words"
-              {...this.propsForInput("addressLine2")}
-            />
-
-            <StyledInput label="City" placeholder="Enter city" {...this.propsForInput("city")} />
-
-            <StyledInput
-              label="State, Province, or Region"
-              placeholder="Enter state, province, or region"
-              autoCapitalize="words"
-              {...this.propsForInput("state")}
-            />
-
-            <StyledInput
-              label="Postal code"
-              placeholder="Enter your postal code"
-              autoCapitalize="words"
-              {...this.propsForInput("postalCode")}
-            />
-
-            <Button text="Add billing address" onPress={() => this.onSubmit()} />
-          </Container>
-        </ScrollView>
+        <View>
+          <BackButton navigator={this.props.navigator} />
+
+          <ScrollView>
+            <Container>
+              <Title mt={0} mb={6}>
+                Your billing address
+              </Title>
+
+              <StyledInput
+                label="Full name"
+                placeholder="Enter your full name"
+                autoCapitalize="words"
+                {...this.propsForInput("fullName")}
+              />
+
+              <StyledInput
+                label="Address line 1"
+                placeholder="Enter your street address"
+                autoCapitalize="words"
+                {...this.propsForInput("addressLine1")}
+              />
+
+              <StyledInput
+                label="Address line 2 (optional)"
+                placeholder="Enter your apt, floor, suite, etc."
+                autoCapitalize="words"
+                {...this.propsForInput("addressLine2")}
+              />
+
+              <StyledInput label="City" placeholder="Enter city" {...this.propsForInput("city")} />
+
+              <StyledInput
+                label="State, Province, or Region"
+                placeholder="Enter state, province, or region"
+                autoCapitalize="words"
+                {...this.propsForInput("state")}
+              />
+
+              <StyledInput
+                label="Postal code"
+                placeholder="Enter your postal code"
+                autoCapitalize="words"
+                {...this.propsForInput("postalCode")}
+              />
+
+              <Button text="Add billing address" onPress={() => this.onSubmit()} />
+            </Container>
+          </ScrollView>
+        </View>
       </BiddingThemeProvider>
     )
   }

src/lib/Components/Bidding/Screens/CreditCardForm.tsx

@@ -4,6 +4,7 @@ import { NavigatorIOS, ScrollView, StyleSheet, View } from "react-native"
 import stripe, { PaymentCardTextField, StripeToken } from "tipsi-stripe"
 
 import BottomAlignedButtonWrapper from "lib/Components/Buttons/BottomAlignedButtonWrapper"
+import { BackButton } from "../Components/BackButton"
 import { BiddingThemeProvider } from "../Components/BiddingThemeProvider"
 import { Button } from "../Components/Button"
 import { Container } from "../Components/Containers"
@@ -84,6 +85,8 @@ export class CreditCardForm extends Component<CreditCardFormProps, CreditCardFor
           onPress={this.state.valid ? () => this.tokenizeCardAndSubmit() : null}
           buttonComponent={buttonComponent}
         >
+          <BackButton navigator={this.props.navigator} />
+
           <ScrollView scrollEnabled={false}>
             <Container m={0}>
               <View>