Skip to content
Permalink
Browse files

feat(ui): add ability to configure a new autopay merchant

fix #1776
  • Loading branch information...
korhaliv committed Mar 21, 2019
1 parent 003f29a commit 887a298015881436d0239a475320d6fa50a3cf65
@@ -1,68 +1,132 @@
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { FormattedMessage, injectIntl, intlShape } from 'react-intl'
import { Spring, animated, Transition } from 'react-spring'
import { Flex } from 'rebass'
import { Bar, DataRow, Heading, Button, Range, Form, Panel, Text } from 'components/UI'
import { CryptoValue, CryptoSelector, FiatValue } from 'containers/UI'
import { Truncate } from 'components/Util'
import { Bar, Heading, Button, Form, Panel } from 'components/UI'
import AutopayCreateSuccess from './AutopayCreateSuccess'
import AutopayCreateSettings from './AutopayCreateSettings'
import messages from './messages'

const Container = styled(animated.div)`
position: absolute;
transform-origin: 50% 100px;
left: 50%;
width: 100%;
`

const AutopayCreateForm = props => {
const { merchantNickname, merchantName, pubkey, ...rest } = props
const {
merchantNickname,
merchantName,
pubkey,
isActive,
merchantLogo,
onCreateAutopay,
onClose,
showError,
intl,
showNotification,
...rest
} = props

const onSubmit = async values => {
try {
const { limit } = values
await onCreateAutopay(pubkey, parseFloat(limit))
const message = intl.formatMessage({ ...messages.add_success })
showNotification(message)
} catch (e) {
const message = intl.formatMessage({ ...messages.add_error })
showError(message)
}
}

const hide = { opacity: 0 }
const show = { opacity: 1 }
return (
<Form {...rest}>
<Form {...rest} onSubmit={onSubmit}>
{({ formState }) => {
const { limit = 0 } = formState.values
const min = 0
const max = 1500000
const defaultValue = 150000
const { limit = '0' } = formState.values
const min = '0'
const max = '1500000'
const defaultValue = '150000'
const back = <AutopayCreateSuccess merchantLogo={merchantLogo} />
const front = (
<AutopayCreateSettings
defaultValue={defaultValue}
limit={limit}
max={max}
merchantName={merchantName}
min={min}
pubkey={pubkey}
/>
)

/* eslint-disable react/display-name */
/* eslint-disable react/prop-types */

const renderFlipper = isActive => ({ opacity }) => (
<Container
style={{
transform: `rotateX(${isActive ? 180 : 0}deg)`,
opacity: opacity.interpolate({
range: [0, 0.5, 1],
output: [0, 0, 1],
}),
}}
>
{isActive ? back : front}
</Container>
)
/* eslint-disable */
return (
<Panel>
<Panel px={5}>
<Panel.Header>
<Heading.h1 textAlign="center">{`Add ${merchantNickname} to autopay`}</Heading.h1>
<Heading.h1 textAlign="center">
<FormattedMessage
values={{ merchantNickname }}
{...(isActive ? messages.header_success : messages.header_add)}
/>
</Heading.h1>
<Bar my={2} />
</Panel.Header>
<Panel.Body>
<DataRow
left={
<>
<Flex justifyContent="space-between">
<Text fontWeight="normal">Range</Text>
<Text color="gray" fontWeight="light">
max. <FiatValue style="currency" value={max} />
</Text>
</Flex>
<Range
field="limit"
initialValue={defaultValue}
max={max}
min={min}
sliderWidthNumber={350}
/>
</>
}
right={
<Flex alignItems="flex-end" flexDirection="column">
<Flex alignItems="baseline">
<CryptoValue fontSize="xxl" value={limit} />
<CryptoSelector ml={2} />
</Flex>
<Flex alignItems="baseline">
<Text color="gray">=</Text>
<FiatValue color="gray" style="currency" value={limit} />
</Flex>
</Flex>
}
/>
<Bar variant="light" />
<DataRow left="Name" right={merchantName} />
<Bar variant="light" />
<DataRow left="Remote PubKey" right={<Truncate maxlen={40} text={pubkey} />} />
<Bar variant="light" />
<Panel.Body css={{ height: '195px' }}>
<Spring
native
to={{
transformOrigin: '50% 100px',
transform: `rotateX(${isActive ? 180 : 0}deg)`,
}}
>
{props => (
<animated.div style={props}>
<Transition
enter={show}
from={hide}
items={isActive}
leave={hide}
native
unique
>
{renderFlipper}
</Transition>
</animated.div>
)}
</Spring>
</Panel.Body>
<Panel.Footer mt={3}>
<Flex justifyContent="center">
<Button variant="primary">Add to autopay</Button>
<Button
onClick={() => isActive && onClose()}
type={isActive ? 'button' : 'submit'}
variant="primary"
>
<FormattedMessage
{...(isActive ? messages.close_button_text : messages.add_button_text)}
/>
</Button>
</Flex>
</Panel.Footer>
</Panel>
@@ -73,9 +137,16 @@ const AutopayCreateForm = props => {
}

AutopayCreateForm.propTypes = {
isActive: PropTypes.bool.isRequired,
merchantLogo: PropTypes.string.isRequired,
merchantName: PropTypes.string.isRequired,
merchantNickname: PropTypes.string.isRequired,
showNotification: PropTypes.func.isRequired,
showError: PropTypes.func.isRequired,
intl: intlShape.isRequired,
onClose: PropTypes.func.isRequired,
onCreateAutopay: PropTypes.func.isRequired,
pubkey: PropTypes.string.isRequired,
}

export default AutopayCreateForm
export default injectIntl(AutopayCreateForm)
@@ -5,27 +5,46 @@ import { useCloseOnUnmount, useOnKeydown } from 'hooks'
import AutopayCreateForm from './AutopayCreateForm'
import AutopayModalBody from './AutopayModalBody'

const AutopayCreateModal = ({ selectedMerchant, onCancel }) => {
const AutopayCreateModal = ({
selectedMerchant,
onClose,
onCreateAutopay,
showError,
showNotification,
}) => {
const isOpen = Boolean(selectedMerchant)
useOnKeydown('Escape', onCancel)
useCloseOnUnmount(isOpen, onCancel)
useOnKeydown('Escape', onClose)
useCloseOnUnmount(isOpen, onClose)
if (!isOpen) {
return null
}
const { nickname, pubkey } = selectedMerchant
const { nickname, pubkey, image, isActive } = selectedMerchant

return (
<DialogOverlay alignItems="center" justifyContent="center">
<AutopayModalBody onClose={onCancel}>
<AutopayCreateForm merchantName={nickname} merchantNickname={nickname} pubkey={pubkey} />
<AutopayModalBody onClose={onClose}>
<AutopayCreateForm
isActive={isActive}
merchantLogo={image}
merchantName={nickname}
merchantNickname={nickname}
onClose={onClose}
onCreateAutopay={onCreateAutopay}
pubkey={pubkey}
showError={showError}
showNotification={showNotification}
/>
</AutopayModalBody>
</DialogOverlay>
)
}

AutopayCreateModal.propTypes = {
onCancel: PropTypes.func.isRequired,
selectedMerchant: PropTypes.object.isRequired,
onClose: PropTypes.func.isRequired,
onCreateAutopay: PropTypes.func.isRequired,
selectedMerchant: PropTypes.object,
showError: PropTypes.func.isRequired,
showNotification: PropTypes.func.isRequired,
}

export default AutopayCreateModal
@@ -1,38 +1,41 @@
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { FormattedMessage, injectIntl, intlShape } from 'react-intl'
import { Flex } from 'rebass'

import { CryptoValue, CryptoSelector, FiatValue } from 'containers/UI'
import { Bar, DataRow, Range, Text } from 'components/UI'
import { Truncate } from 'components/Util'
import messages from './messages'

const SettingsContainer = styled.div`
position: relative;
left: -50%;
`

const AutopayCreateSettings = ({ min, max, defaultValue, limit, merchantName, pubkey }) => (
const AutopayCreateSettings = ({ min, max, intl, defaultValue, limit, merchantName, pubkey }) => (
<SettingsContainer>
<DataRow
left={
<>
<Flex justifyContent="space-between">
<Text fontWeight="normal">Range</Text>
<Text fontWeight="normal">Limit</Text>
<Text color="gray" fontWeight="light">
max. <FiatValue style="currency" value={max} />
<FormattedMessage {...messages.max_text} /> <FiatValue style="currency" value={max} />
</Text>
</Flex>
<Range
field="limit"
initialValue={defaultValue}
max={max}
min={min}
sliderWidthNumber={350}
sliderWidthNumber={240}
/>
</>
}
right={
<Flex alignItems="flex-end" flexDirection="column">
<Flex alignItems="flex-end" flexDirection="column" ml={4}>
<Flex alignItems="baseline">
<CryptoValue fontSize="xxl" value={limit} />
<CryptoSelector ml={2} />
@@ -45,20 +48,24 @@ const AutopayCreateSettings = ({ min, max, defaultValue, limit, merchantName, pu
}
/>
<Bar variant="light" />
<DataRow left="Name" right={merchantName} />
<DataRow left={intl.formatMessage({ ...messages.merchant_name })} right={merchantName} />
<Bar variant="light" />
<DataRow left="Remote PubKey" right={<Truncate maxlen={40} text={pubkey} />} />
<DataRow
left={intl.formatMessage({ ...messages.remote_pubkey })}
right={<Truncate maxlen={40} text={pubkey} />}
/>
<Bar variant="light" />
</SettingsContainer>
)

AutopayCreateSettings.propTypes = {
defaultValue: PropTypes.number.isRequired,
limit: PropTypes.number.isRequired,
max: PropTypes.number.isRequired,
intl: intlShape.isRequired,
limit: PropTypes.string.isRequired,
max: PropTypes.string.isRequired,
merchantName: PropTypes.string.isRequired,
min: PropTypes.number.isRequired,
min: PropTypes.string.isRequired,
pubkey: PropTypes.string.isRequired,
}

export default AutopayCreateSettings
export default injectIntl(AutopayCreateSettings)
@@ -2,12 +2,17 @@ import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { Box, Flex } from 'rebass'
import { FormattedMessage, injectIntl } from 'react-intl'

import { Text } from 'components/UI'
import AutopayCheck from 'components/Icon/AutopayCheck'
import messages from './messages'

const Container = styled(Flex)`
height: 200px;
height: 195px;
position: relative;
left: -50%;
&:before {
content: '';
background-image: url(${props => props.src});
@@ -19,7 +24,7 @@ const Container = styled(Flex)`
left: 0px;
width: 100%;
height: 100%;
opacity: 0.02; /* Here is your opacity */
opacity: 0.02;
}
`

@@ -34,7 +39,9 @@ const AutopayCreateSuccess = ({ merchantLogo }) => {
<Box color="superGreen" mb={3}>
<AutopayCheck height={128} width={128} />
</Box>
<Text color="gray">You can change your Limit or turn of autopay anytime. Enjoy.</Text>
<Text color="gray">
<FormattedMessage {...messages.success_text} />
</Text>
</Container>
)
}
@@ -43,4 +50,4 @@ AutopayCreateSuccess.propTypes = {
merchantLogo: PropTypes.string.isRequired,
}

export default AutopayCreateSuccess
export default injectIntl(AutopayCreateSuccess)
@@ -7,9 +7,8 @@ import AutopaySearchNoResults from './AutopaySearchNoResults'

const Grid = styled(Box)`
display: grid;
grid-template-columns: repeat(auto-fill, 195px);
grid-template-columns: repeat(auto-fit, 195px);
grid-gap: 1rem;
justify-content: space-between;
`

const AutopayList = ({ merchants, openAutopayCreateModal, ...rest }) => {
@@ -14,4 +14,6 @@ export default defineMessages({
max_text: 'max',
remote_pubkey: 'Remote pubkey',
merchant_name: 'Name',
add_error: 'Something went wrong',
add_success: 'Autopay successfully added',
})

0 comments on commit 887a298

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