Skip to content
Permalink
Browse files

feat(autopay): autopay form

  • Loading branch information...
mrfelton authored and korhaliv committed Mar 14, 2019
1 parent a722dde commit 1ee0cd785eb00a5b45a7df097d4ef425d664ea56
@@ -1,17 +1,33 @@
import React from 'react'
import AutopayList from 'containers/Autopay/AutopayList'
import { ThemeProvider } from 'styled-components'
import { Panel } from 'components/UI'
import AutopayList from 'containers/Autopay/AutopayList'
import AutopayCreateModal from 'containers/Autopay/AutopayCreateModal'
import { palette } from 'themes/base'
import createThemeVariant from 'themes/util'
import AutopayHeader from './AutopayHeader'

const customiseTheme = theme => {
return createThemeVariant('autopilot', {
...theme.colors,
lightningOrange: palette.superBlue,
})
}

const Autopay = props => (
<Panel {...props}>
<Panel.Header mx={4}>
<AutopayHeader />
</Panel.Header>
<Panel.Body css={{ 'overflow-y': 'overlay', 'overflow-x': 'hidden' }}>
<AutopayList mx={4} />
</Panel.Body>
</Panel>
<ThemeProvider theme={customiseTheme}>
<>
<Panel {...props}>
<Panel.Header mx={4}>
<AutopayHeader />
</Panel.Header>
<Panel.Body css={{ 'overflow-y': 'overlay', 'overflow-x': 'hidden' }}>
<AutopayList mx={4} />
</Panel.Body>
</Panel>
<AutopayCreateModal />
</>
</ThemeProvider>
)

export default Autopay
@@ -8,17 +8,17 @@ import { tint } from 'polished'
const Gradient = styled(Card)`
background: linear-gradient(
to bottom,
${props => tint(0.3, props.theme.colors[props.bg])},
${props => tint(0.2, props.theme.colors[props.bg])},
${props => props.theme.colors[props.bg]}
);
`

const AutopayAddButton = props => {
return (
<Gradient
bg="superBlue"
bg="lightningOrange"
borderRadius="50%"
boxShadow={`0 0 24px 0 ${themeGet('colors.superBlue')(props)}`}
boxShadow={`0 0 24px 0 ${themeGet('colors.lightningOrange')(props)}`}
css={{ height: '35px' }}
width={35}
{...props}
@@ -47,8 +47,8 @@ const TextOverlay = styled(Overlay)`
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
`

const AutopayCardView = ({ merchant: { host, image, nickname, pubkey }, onClick, ...rest }) => (
<Box {...rest} onClick={() => onClick(`${pubkey}@${host}`)}>
const AutopayCardView = ({ merchant: { image, nickname, pubkey }, onClick, ...rest }) => (
<Box {...rest} onClick={() => onClick(`${pubkey}`)}>
<CardWithBg mb="12px" src={image}>
<GradientOverlay />
<TextOverlay alignItems="center" flexDirection="column" justifyContent="center" p={3}>
@@ -66,7 +66,6 @@ const AutopayCardView = ({ merchant: { host, image, nickname, pubkey }, onClick,
AutopayCardView.propTypes = {
merchant: PropTypes.shape({
description: PropTypes.string.isRequired,
host: PropTypes.string.isRequired,
image: PropTypes.string.isRequired,
nickname: PropTypes.string.isRequired,
pubkey: PropTypes.string.isRequired,
@@ -0,0 +1,81 @@
import React from 'react'
import PropTypes from 'prop-types'
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'

const AutopayCreateForm = props => {
const { merchantNickname, merchantName, pubkey, ...rest } = props

return (
<Form {...rest}>
{({ formState }) => {
const { limit = 0 } = formState.values
const min = 0
const max = 1500000
const defaultValue = 150000

return (
<Panel>
<Panel.Header>
<Heading.h1 textAlign="center">{`Add ${merchantNickname} to autopay`}</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>
<Panel.Footer mt={3}>
<Flex justifyContent="center">
<Button variant="primary">Add to autopay</Button>
</Flex>
</Panel.Footer>
</Panel>
)
}}
</Form>
)
}

AutopayCreateForm.propTypes = {
merchantName: PropTypes.string.isRequired,
merchantNickname: PropTypes.string.isRequired,
pubkey: PropTypes.string.isRequired,
}

export default AutopayCreateForm
@@ -0,0 +1,70 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Flex, Box } from 'rebass'
import { Card, DialogOverlay } from 'components/UI'
import { useCloseOnUnmount, useOnKeydown } from 'hooks'
import Autopay from 'components/Icon/Autopay'
import X from 'components/Icon/X'
import AutopayCreateForm from './AutopayCreateForm'

const CloseButton = ({ onClick }) => (
<Flex color="primaryText" justifyContent="space-between">
<Box
css={{
position: 'absolute',
right: 0,
height: '32px',
cursor: 'pointer',
opacity: 0.6,
'&:hover': { opacity: 1 },
}}
m={3}
ml="auto"
onClick={onClick}
p={2}
>
<X height={15} width={15} />
</Box>
</Flex>
)

CloseButton.propTypes = {
onClick: PropTypes.func.isRequired,
}

const AutopayCreateModal = ({ selectedMerchant, onCancel }) => {
const isOpen = Boolean(selectedMerchant)
useOnKeydown('Escape', onCancel)
useCloseOnUnmount(isOpen, onCancel)
if (!isOpen) {
return null
}
const { nickname, pubkey } = selectedMerchant

return (
<DialogOverlay alignItems="center" justifyContent="center">
<Box css={{ position: 'relative' }}>
<CloseButton onClick={onCancel} />
<Card borderRadius={40} width={640}>
<Box mt={2} p={2}>
<AutopayCreateForm
merchantName={nickname}
merchantNickname={nickname}
pubkey={pubkey}
/>
</Box>
</Card>
<Flex css={{ position: 'absolute', top: '-25px' }} justifyContent="center" width={1}>
<Autopay height={50} mt="-102px" width={50} />
</Flex>
</Box>
</DialogOverlay>
)
}

AutopayCreateModal.propTypes = {
onCancel: PropTypes.func.isRequired,
selectedMerchant: PropTypes.object.isRequired,
}

export default AutopayCreateModal
@@ -12,7 +12,7 @@ const Grid = styled(Box)`
justify-content: space-between;
`

const AutopayList = ({ merchants, ...rest }) => {
const AutopayList = ({ merchants, openAutopayCreateModal, ...rest }) => {
if (merchants.length === 0) {
return <AutopaySearchNoResults {...rest} />
}
@@ -23,7 +23,7 @@ const AutopayList = ({ merchants, ...rest }) => {
{merchants.map(merchant => {
return (
<Box key={merchant.pubkey} py={2}>
<AutopayCardView merchant={merchant} onClick={() => alert('NOT IMPLEMENTED')} />
<AutopayCardView merchant={merchant} onClick={openAutopayCreateModal} />
</Box>
)
})}
@@ -34,6 +34,7 @@ const AutopayList = ({ merchants, ...rest }) => {

AutopayList.propTypes = {
merchants: PropTypes.array,
openAutopayCreateModal: PropTypes.func.isRequired,
}

AutopayList.defaultProps = {
@@ -4,7 +4,7 @@ import { Flex } from 'rebass'
const Overlay = styled(Flex)`
position: absolute;
z-index: 99999;
background-color: ${props => props.theme.colors.primaryText + '3F'};
background-color: ${props => props.theme.colors.primaryColor + 'CC'};
top: 0;
bottom: 0;
left: 0;
@@ -75,30 +75,28 @@ const Range = asField(({ fieldState, fieldApi, ...props }) => {
}

return (
<>
<Input
{...styleProps}
max={100}
min={0}
step={1}
{...rest}
ref={forwardedRef}
onBlur={e => {
setTouched()
if (onBlur) {
onBlur(e)
}
}}
onChange={e => {
setValue(e.target.value)
if (onChange) {
onChange(e)
}
}}
type="range"
value={value || 0}
/>
</>
<Input
{...styleProps}
max={100}
min={0}
step={1}
{...rest}
ref={forwardedRef}
onBlur={e => {
setTouched()
if (onBlur) {
onBlur(e)
}
}}
onChange={e => {
setValue(e.target.value)
if (onChange) {
onChange(e)
}
}}
type="range"
value={value || 0}
/>
)
})

@@ -0,0 +1,24 @@
import { connect } from 'react-redux'
import AutopayCreateModal from 'components/Autopay/AutopayCreateModal'
import { closeAutopayCreateModal, autopaySelectors } from 'reducers/autopay'

const mapStateToProps = state => {
const selectedMerchant = autopaySelectors.selectedMerchant(state)
return {
selectedMerchant,
}
}
const mapDispatchToProps = dispatch => ({
onClose() {
dispatch(closeAutopayCreateModal())
},

onCancel() {
dispatch(closeAutopayCreateModal())
},
})

export default connect(
mapStateToProps,
mapDispatchToProps
)(AutopayCreateModal)
@@ -1,12 +1,16 @@
import { connect } from 'react-redux'
import AutopayList from 'components/Autopay/AutopayList'
import { autopaySelectors } from 'reducers/autopay'
import { openAutopayCreateModal, autopaySelectors } from 'reducers/autopay'

const mapStateToProps = state => ({
merchants: autopaySelectors.filteredMerchants(state),
})

const mapDispatchToProps = {
openAutopayCreateModal,
}

export default connect(
mapStateToProps,
null
mapDispatchToProps
)(AutopayList)

0 comments on commit 1ee0cd7

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