Skip to content
Permalink
Browse files

(Feature) #1014 improve payment confirmation screen send receive (#1084)

* add: make the send screen to match design

* add: implement the new design for SendLink screen

* add: implement the new design for SendConfirmation screen

* add: change the naming for jss styles, Implement the ReceiveSummary screen according new design

* add: Implement the ReceiveConfirmation screen according new design

* fix: update snapshots

* fix: make space between group/elements smaller on ReceiveConfirmation screen

* fix: make space between group/elements smaller on SendConfirmation screen

* fix: make space between group/elements smaller on ReceiveSummary screen

* fix: update snapshots

* fix: add new test to pass travis build

* fix: update snapshot

* fix: add second parameter false for getDesignRelativeHeight fn to make the space between element be responsive on larger devices.

* fix: add second parameter false for relativeDesign in sendLinkSummary component

* fix: update snapshots

* Revert "fix: update snapshots"

This reverts commit b2bef1b

* Revert "fix: add second parameter false for relativeDesign in sendLinkSummary component"

This reverts commit 36468ec

* Revert "fix: add second parameter false for getDesignRelativeHeight fn to make the space between element be responsive on larger devices."

This reverts commit 113f84a
  • Loading branch information
yaroslav-fedyshyn-nordwhale authored and sirpy committed Jan 13, 2020
1 parent 023a108 commit a31ba5ace77d14688b39a92168e3c4235908a402
@@ -40,28 +40,24 @@ const ReceiveConfirmation = ({ screenProps, styles, ...props }: ReceiveProps) =>

return (
<Wrapper>
<TopBar push={screenProps.push} hideBalance />
<TopBar push={screenProps.push} />
<Section justifyContent="space-between" grow>
<Section.Stack style={styles.qrCode}>
<QRCode value={urlForQR} />
</Section.Stack>
<Section.Stack grow justifyContent="center" alignItems="center">
<Section.Text style={styles.textRow}>{'Request exactly'}</Section.Text>
{counterPartyDisplayName && (
<Section.Text style={styles.textRow}>
{'From: '}
<Section.Text fontSize={18}>{counterPartyDisplayName}</Section.Text>
</Section.Text>
)}
{amount && (
<BigGoodDollar
number={amount}
color="primary"
bigNumberProps={{ fontSize: 24 }}
bigNumberUnitProps={{ fontSize: 14 }}
/>
)}
<Section.Text style={styles.textRow}>{reason}</Section.Text>
<Section.Stack justifyContent="space-evenly" grow>
<Section.Stack style={styles.qrCode}>
<QRCode value={urlForQR} />
</Section.Stack>
<Section.Stack justifyContent="center" alignItems="center">
<Section.Text style={styles.textRow}>{'Request exactly'}</Section.Text>
{amount && (
<BigGoodDollar
number={amount}
color="green"
bigNumberProps={{ fontSize: 36, lineHeight: 24, fontWeight: 'bold', fontFamily: 'Roboto Slab' }}
bigNumberUnitProps={{ fontSize: 14 }}
/>
)}
{!!reason && <Section.Text style={styles.textRow}>For {reason}</Section.Text>}
</Section.Stack>
</Section.Stack>
<Section.Stack>
<ShareButton
@@ -1,14 +1,18 @@
// @flow
import React, { useMemo } from 'react'

import { Section, Wrapper } from '../common'
import { View } from 'react-native'
import { isMobile } from 'mobile-device-detect'
import { Icon, Section, Wrapper } from '../common'
import TopBar from '../common/view/TopBar'
import SummaryTable from '../common/view/SummaryTable'
import { BackButton, useScreenState } from '../appNavigation/stackNavigation'
import { PushButton } from '../appNavigation/PushButton'

import goodWallet from '../../lib/wallet/GoodWallet'
import { generateCode } from '../../lib/share'
import { getDesignRelativeHeight } from '../../lib/utils/sizes'
import BigGoodDollar from '../common/view/BigGoodDollar'
import normalize from '../../lib/utils/normalizeText'
import { withStyles } from '../../lib/styles'
import { navigationOptions } from './utils/sendReceiveFlow'

export type ReceiveProps = {
@@ -17,7 +21,7 @@ export type ReceiveProps = {
theme: any,
}

const ReceiveAmount = ({ screenProps, ...props }: ReceiveProps) => {
const ReceiveAmount = ({ screenProps, styles, ...props }: ReceiveProps) => {
const [screenState] = useScreenState(screenProps)
const { params } = props.navigation.state

@@ -32,17 +36,85 @@ const ReceiveAmount = ({ screenProps, ...props }: ReceiveProps) => {
counterPartyDisplayName,
])

const noCreds = !(counterPartyDisplayName || reason)
const iconMarginWithoutReason = isMobile ? styles.marginForNoCredsMobile : styles.marginForNoCreds
const amountMargin = isMobile ? styles.amountBlockMarginMobile : styles.amountBlockMargin

return (
<Wrapper>
<TopBar push={screenProps.push} />
<Section justifyContent="space-between" grow>
<Section.Title fontWeight="medium">Summary</Section.Title>
<SummaryTable
actionReceive={true}
counterPartyDisplayName={counterPartyDisplayName}
amount={amount}
reason={reason}
/>
<Section grow style={styles.section}>
<Section.Stack grow justifyContent="center">
{noCreds ? (
<>
<Section.Row justifyContent="center">
<View style={[styles.sendIconWrapper, iconMarginWithoutReason]}>
<Icon name="receive" size={getDesignRelativeHeight(45)} color="white" />
</View>
</Section.Row>
<Section.Stack style={amountMargin}>
<Section.Title fontWeight="medium">YOU ARE REQUESTING</Section.Title>
<Section.Title fontWeight="medium" style={styles.amountWrapper}>
<BigGoodDollar
number={amount}
color="green"
bigNumberProps={{
fontSize: 36,
lineHeight: 24,
fontFamily: 'Roboto Slab',
fontWeight: 'bold',
}}
bigNumberUnitProps={{ fontSize: 14 }}
/>
</Section.Title>
</Section.Stack>
</>
) : (
<Section.Stack style={amountMargin}>
<Section.Row justifyContent="center">
<View style={styles.sendIconWrapper}>
<Icon name="receive" size={getDesignRelativeHeight(45)} color="white" />
</View>
</Section.Row>
<Section.Title fontWeight="medium">YOU ARE REQUESTING</Section.Title>
<Section.Title fontWeight="medium" style={styles.amountWrapper}>
<BigGoodDollar
number={amount}
color="green"
bigNumberProps={{
fontSize: 36,
lineHeight: 24,
fontFamily: 'Roboto Slab',
fontWeight: 'bold',
}}
bigNumberUnitProps={{ fontSize: 14 }}
/>
</Section.Title>
</Section.Stack>
)}
<Section.Stack>
{!!counterPartyDisplayName && (
<Section.Row style={[styles.credsWrapper, styles.fromTextWrapper]}>
<Section.Text color="gray80Percent" fontSize={14} style={styles.credsLabel}>
From
</Section.Text>
<Section.Text fontSize={24} fontWeight="medium" lineHeight={24}>
{counterPartyDisplayName}
</Section.Text>
</Section.Row>
)}
{!!reason && (
<Section.Row style={[styles.credsWrapper, styles.reasonWrapper]}>
<Section.Text color="gray80Percent" fontSize={14} style={styles.credsLabel}>
For
</Section.Text>
<Section.Text fontSize={normalize(14)} numberOfLines={2} ellipsizeMode="tail">
{reason}
</Section.Text>
</Section.Row>
)}
</Section.Stack>
</Section.Stack>
<Section.Row>
<Section.Row grow={1} justifyContent="flex-start">
<BackButton mode="text" screenProps={screenProps}>
@@ -71,4 +143,73 @@ ReceiveAmount.shouldNavigateToComponent = props => {
return screenState.amount
}

export default ReceiveAmount
const getStylesFromProps = ({ theme }) => ({
section: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
},
amountBlockMarginMobile: {
marginBottom: getDesignRelativeHeight(35),
},
amountBlockMargin: {
marginBottom: getDesignRelativeHeight(80),
},
marginForNoCredsMobile: {
marginBottom: getDesignRelativeHeight(60),
},
marginForNoCreds: {
marginBottom: getDesignRelativeHeight(100),
},
sendIconWrapper: {
height: getDesignRelativeHeight(75),
width: getDesignRelativeHeight(75),
backgroundColor: theme.colors.green,
position: 'relative',
borderRadius: '50%',
marginTop: getDesignRelativeHeight(15),
marginBottom: getDesignRelativeHeight(24),
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
amountWrapper: {
display: 'flex',
justifyContent: 'center',
marginTop: getDesignRelativeHeight(10),
},
credsWrapper: {
borderWidth: 1,
borderStyle: 'solid',
borderColor: theme.colors.gray50Percent,
borderRadius: 25,
height: 42,
display: 'flex',
justifyContent: 'center',
alignItems: 'flex-end',
paddingBottom: getDesignRelativeHeight(4),
position: 'relative',
},
credsLabel: {
position: 'absolute',
top: -getDesignRelativeHeight(10),
backgroundColor: theme.colors.white,
paddingHorizontal: getDesignRelativeHeight(10),
lineHeight: normalize(14),
},
fromTextWrapper: {
marginBottom: getDesignRelativeHeight(24),
},
fromText: {
margin: 0,
},
reasonWrapper: {
alignItems: 'center',
marginBottom: getDesignRelativeHeight(24),
},
warnText: {
marginVertical: getDesignRelativeHeight(24),
},
})

export default withStyles(getStylesFromProps)(ReceiveAmount)
@@ -1,15 +1,19 @@
// @flow
import React from 'react'
import { View } from 'react-native'
import { useScreenState } from '../appNavigation/stackNavigation'
import CopyButton from '../common/buttons/CopyButton'
import Section from '../common/layout/Section'
import Wrapper from '../common/layout/Wrapper'
import TopBar from '../common/view/TopBar'
import { withStyles } from '../../lib/styles'
import SummaryTable from '../common/view/SummaryTable'
import { SEND_TITLE } from './utils/sendReceiveFlow'
import { Icon } from '../common'
import { getDesignRelativeHeight } from '../../lib/utils/sizes'

import './AButton.css'
import BigGoodDollar from '../common/view/BigGoodDollar'
import normalize from '../../lib/utils/normalizeText'
import { SEND_TITLE } from './utils/sendReceiveFlow'

export type ReceiveProps = {
screenProps: any,
@@ -20,16 +24,47 @@ export type ReceiveProps = {
const SendConfirmation = ({ screenProps, styles }: ReceiveProps) => {
const [screenState] = useScreenState(screenProps)

const { amount, counterPartyDisplayName, reason, paymentLink } = screenState
const { amount, reason, paymentLink } = screenState

return (
<Wrapper>
<TopBar hideBalance push={screenProps.push} />
<Section grow justifyContent={'center'}>
<Section.Text style={styles.confirmationDescription} fontSize={22} fontWeight="medium">
{'To complete the transaction\ncopy the link and share it\nwith your recipient.'}
</Section.Text>
<SummaryTable counterPartyDisplayName={counterPartyDisplayName} amount={amount} reason={reason} />
<Section grow style={styles.section}>
<Section.Stack grow justifyContent="center">
<Section.Text style={styles.confirmationDescription} fontSize={22} fontWeight="medium">
{'To complete the transaction\ncopy the link and share it\nwith your recipient.'}
</Section.Text>
<Section.Stack style={styles.iconAmountBlock}>
<Section.Row justifyContent="center">
<View style={styles.sendIconWrapper}>
<Icon name="send" size={getDesignRelativeHeight(45)} color="white" />
</View>
</Section.Row>
<Section.Title fontWeight="medium" style={styles.amountWrapper}>
<BigGoodDollar
number={amount}
color="red"
bigNumberProps={{
fontSize: 36,
lineHeight: 24,
fontFamily: 'Roboto Slab',
fontWeight: 'bold',
}}
bigNumberUnitProps={{ fontSize: 14 }}
/>
</Section.Title>
</Section.Stack>
{reason && (
<Section.Row style={[styles.credsWrapper, styles.reasonWrapper]}>
<Section.Text color="gray80Percent" fontSize={14} style={styles.credsLabel}>
For
</Section.Text>
<Section.Text fontSize={normalize(14)} numberOfLines={2} ellipsizeMode="tail">
{reason}
</Section.Text>
</Section.Row>
)}
</Section.Stack>
<CopyButton toCopy={paymentLink} onPressDone={() => screenProps.goToRoot()}>
Copy link to clipboard
</CopyButton>
@@ -39,12 +74,60 @@ const SendConfirmation = ({ screenProps, styles }: ReceiveProps) => {
}

const getStylesFromProps = ({ theme }) => ({
section: {
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
},
confirmationDescription: {
display: 'flex',
flexGrow: 1,
justifyContent: 'center',
alignItems: 'center',
},
iconAmountBlock: {
marginVertical: getDesignRelativeHeight(50),
},
sendIconWrapper: {
height: getDesignRelativeHeight(75),
width: getDesignRelativeHeight(75),
backgroundColor: theme.colors.red,
position: 'relative',
borderRadius: '50%',
marginTop: getDesignRelativeHeight(15),
marginBottom: getDesignRelativeHeight(24),
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
amountWrapper: {
display: 'flex',
justifyContent: 'center',
marginTop: getDesignRelativeHeight(10),
},
credsWrapper: {
borderWidth: 1,
borderStyle: 'solid',
borderColor: theme.colors.gray50Percent,
borderRadius: 25,
height: 42,
display: 'flex',
justifyContent: 'center',
alignItems: 'flex-end',
paddingBottom: getDesignRelativeHeight(4),
position: 'relative',
marginVertical: getDesignRelativeHeight(25),
},
credsLabel: {
position: 'absolute',
top: -getDesignRelativeHeight(10),
backgroundColor: theme.colors.white,
paddingHorizontal: getDesignRelativeHeight(10),
lineHeight: normalize(14),
},
reasonWrapper: {
alignItems: 'center',
paddingBottom: 0,
},
})

SendConfirmation.navigationOptions = {

0 comments on commit a31ba5a

Please sign in to comment.
You can’t perform that action at this time.