From 35e226bf560e3800b0bf263143c202f033068079 Mon Sep 17 00:00:00 2001 From: Yuki Nishijima Date: Mon, 2 Jul 2018 16:20:29 -0400 Subject: [PATCH] Add back button on credit card and billing address screens finishes https://artsyproduct.atlassian.net/browse/PURCHASE-215 --- CHANGELOG.md | 1 + images/angle-left.png | Bin 0 -> 781 bytes images/angle-left@2x.png | Bin 0 -> 2014 bytes images/angle-left@3x.png | Bin 0 -> 3286 bytes .../Bidding/Components/BackButton.tsx | 29 + src/lib/Components/Bidding/Elements/Image.tsx | 16 + .../Bidding/Screens/BillingAddress.tsx | 99 +- .../Bidding/Screens/CreditCardForm.tsx | 3 + .../BillingAddress-tests.tsx.snap | 902 +++++++++--------- .../CreditCardForm-tests.tsx.snap | 34 + 10 files changed, 604 insertions(+), 480 deletions(-) create mode 100755 images/angle-left.png create mode 100755 images/angle-left@2x.png create mode 100755 images/angle-left@3x.png create mode 100644 src/lib/Components/Bidding/Components/BackButton.tsx create mode 100644 src/lib/Components/Bidding/Elements/Image.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index aa2f41a25a..f1119911a6 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/images/angle-left.png b/images/angle-left.png new file mode 100755 index 0000000000000000000000000000000000000000..d3fadf2f3617195179cc9d1c6eb2bb994fc9f1c0 GIT binary patch literal 781 zcmV+o1M>WdP)Px%$4Nv%R9FeknOSbaFc3fo5IYF*0k`2E+zU>?<=Dl(FKM2uiCh}m#w0W&Q5?sf zd5rC`JAh9Ap14`HzPjsTE2 zM<|IJ-yRLU@{Da5U{NuEI{w7D{}vc@9l&A$A!dhQ|BOR0(C_!1RKWmC;6?W0$zWxMtCq<8)Y`AW>>!I6KV4^?c?Jbu}S3N<$ zIN?wV6KrfXo*#b#LoS85;b4FXHkr+4o`14%;WB-afI~4%u*rBlcAhIq!2!tpgH49R zq36dz>LN*!aDc!BTdjBnjwF;U=!Og*h!@T5FpZH+y`j*ZowwDVX);3 zATMxp3@bKlo94m#6Pi5I_go(}6%zM_{^j(WLZ&)_ zsgQm^Pj3oXA^B#`aO20Tlv9&Lw;{F6mINqsNi+IDBdo}{{tfW~8t2R?^E(T}00000 LNkvXXu0mjf8VzLO literal 0 HcmV?d00001 diff --git a/images/angle-left@2x.png b/images/angle-left@2x.png new file mode 100755 index 0000000000000000000000000000000000000000..f68f63447a0260198e35d4e901f503754aa2cee2 GIT binary patch literal 2014 zcmV<42O;>0P)Px+m`OxIRCodHoVil-JQRjafRBA&YKDTEh8cPa?t&Svj2Z5Nf}WC^f(u~ZclduE zF|S8StV9m7Ba@t&AmhlA&ZDEFBiYWtf8UaHNxr_mlK1!bw5(39D+S=& z+gtMV^pw23yco+;Ls9_0&-$vB6!t70b&KWx3_7-aqv@9Q)Wm7Z@EW-xQzSzdoxjyosOKDnK2{4 z<8rSoK>*V0fTO_(;HIaigErJl8%HKO_U`U31&NOYWQfu5Yk)wzxw$cu0}dRED`KcP z*yK8mYr!H3k!b7e?Ch^c$FBg=t4tCIK8{|cVKEEv7%lin1mDPL=~OxbNZ4?Bd1*oj zLJk@btJS%{V2v06x)2R4EG(En-Id>UJ~u#m5O}O0aLRLYbH?YnDv0?!I$U30n@JD9 z4aB@7C>KB`i;Ig3v+U}$!q|Y?2EnAVxVV^Wa`6U8Md#<|1|EU%{QP`JCLbF>+QTru zy1FvKI1rbXmb@*|%j3)EVS&Kw)L+C1k2c}Q(Fxtq5f_EdKH>#XK96CG<^5GbH*~}| zqO*^*1;|Xr`jQFbuUTFrAXy^1qBFX;la>Gpl8N&unAtY(4Arjk7{5nHbVX-$*XqjE zRwqDw0V@oII1khA6+u@8*D!#EOPm0S)|q)(VN@+hb}5_ZJUXL03}E4sOn@xDF+6md2Ndcp5yf#Dpw!vGNz^N;nX2_S1kw#xAXy*P9&Hs%lpuz(3{ z8l?%Kc30#?8!za^|HVRVYzB1z*$QXIfjCilUw#O{0w%D5ku7xqMOfqB&KS$_>FKGN z8Ov^un23?;PXQ8nGtP;^+47E2j*pL%jg5_DcXzjRh%kYTZl#J(3Q(p=>=UB^Z)vavEiw0CnqQAw!F?2or;ZEQJ(=wkVwSM)^>DXr8R`3*BgzPMzvcxEQfHA_ejVuL-IWn`beG}?g z6`!7Ll_yqsv>8UQf*I^;?7r&OUMr=_`YvX8VgN*#!L9~LgczsWQU!Q6E7(N?uqyDP z1Xv|_O#pF(NVnp@s=>2anMp+VKbcv|mMX%7kyyd5CJQWk=eerz04P>nv%o6DYqCI2 z^rdqGHG4dFUQE6#*VosR!^6Y6$3%{fj*{)|ZLg;R^3@hTw>@us59gm9E&0Om)n%7h zWr$)0yRKNEkX999rUkZod_f8qkya6+SP?tdvwr$tQLul zSW$1?t6pbkXXbtlqHsi_5WhIeNXUP_Kt zR##U`hi5YpBk`#Nh-tDs;fAqh8)fX}6c#XnjXiu}QU{O|BJA^;6Zv~V#6oOrotpsi zR664v;$?>kcEe&hh5;;KlJ(X?6F?fSmuvI`4Y4Rwc01U4)_fo)jcv#TNRY@ZOaZPJ zOd1RNi~plL3}B(axlzwdfMn8ZPQ*UFIF!*D-C1?GtPf63fXq1jt_p$^#Sip~psOYh z7{J0MPJmp1=`!=MeZ#L?=x&s&u)lB~9nlq?(Y@V*q9s6p@GLS96tWAO=eGo^2oq@N zh_2}D^Bi_tfPmmte|BFnZI&~CRnQF`(G{J2#0wzX*A$2^AS(ZBmMF_ZH+0PN+Yoh| z3GIlpAJ+fjoq9^S0CFi#77N7GiO%~!{e=DI6q!7`vkY&XZPqd;XR)PbC(a{OK^G>B zJj2#*Xl@I%FQx%{{gW5*6nxuxVmoF8vBJ>iD4~kaZ0pkFR{$xLjmG{DFuL%1o@a8Q zSM?SnVF11AT0eRg8!Q{MtG${cIA*l8T4DHB{%Z@gE25!*)T0l8x@Av-oGKq-%d#y9E~DGkR*YR6moib$!GyJz?~btIOCuPb7rD+Hjxpa>wP z2P%Faql0cck&OCbeHq)$07*qoM6N<$g8VnCJ^%m! literal 0 HcmV?d00001 diff --git a/images/angle-left@3x.png b/images/angle-left@3x.png new file mode 100755 index 0000000000000000000000000000000000000000..b2b7db08911974036efe87b5d149b97ef1ce5317 GIT binary patch literal 3286 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 U`4t!^DgXcg07*qoM6N<$f>a>|EdT%j literal 0 HcmV?d00001 diff --git a/src/lib/Components/Bidding/Components/BackButton.tsx b/src/lib/Components/Bidding/Components/BackButton.tsx new file mode 100644 index 0000000000..b925b9ce03 --- /dev/null +++ b/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 { + goBack() { + this.props.navigator.pop() + } + + render() { + return ( + this.goBack()}> + + + ) + } +} diff --git a/src/lib/Components/Bidding/Elements/Image.tsx b/src/lib/Components/Bidding/Elements/Image.tsx new file mode 100644 index 0000000000..4422770ec4 --- /dev/null +++ b/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({})` + ${height}; + ${position}; + ${space}; + ${textAlign}; + ${width}; +` + +export const Image = props => diff --git a/src/lib/Components/Bidding/Screens/BillingAddress.tsx b/src/lib/Components/Bidding/Screens/BillingAddress.tsx index 0320261ca8..df4a6e570d 100644 --- a/src/lib/Components/Bidding/Screens/BillingAddress.tsx +++ b/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 - - - - Your billing address - - - - - - - - - - - - - - -