Skip to content
Permalink
Browse files

feat(autopay): add ability to edit autopay entries

resolve #1777
  • Loading branch information...
korhaliv committed Mar 26, 2019
1 parent f8809c5 commit 140e51dd6851dadd54b39a469af6accc31077cb7
@@ -18,46 +18,72 @@ const Container = styled(animated.div)`
width: 100%;
`

function getButtonText(isActive, isEditMode) {
if (isEditMode) {
return messages.edit_button_text
}

return isActive ? messages.close_button_text : messages.add_button_text
}

const AutopayCreateForm = props => {
const {
merchantNickname,
merchantName,
pubkey,
isActive,
limit,
merchantLogo,
onRemoveAutopay,
onCreateAutopay,
onClose,
showError,
intl,
isEditMode,
showNotification,
...rest
} = props
const isEditMode = true
const onSubmit = async values => {
try {
const { limit } = values
await onCreateAutopay(pubkey, parseFloat(limit))
const message = intl.formatMessage({ ...messages.add_success })
showNotification(message)
if (isEditMode) {
const { limit, isEnabled } = values
if (isEnabled) {
await onCreateAutopay(pubkey, limit)
const message = intl.formatMessage({ ...messages.save_success })
onClose()
showNotification(message)
} else {
onRemoveAutopay(pubkey)
const message = intl.formatMessage({ ...messages.remove_success })
onClose()
showNotification(message)
}
} else {
const { limit } = values
await onCreateAutopay(pubkey, limit)
const message = intl.formatMessage({ ...messages.add_success })
showNotification(message)
}
} catch (e) {
const message = intl.formatMessage({ ...messages.add_error })
showError(message)
}
}

// new autopay entry has just been added
const isNewItemAdded = isActive && !isEditMode
const hide = { opacity: 0 }
const show = { opacity: 1 }

return (
<Form {...rest} onSubmit={onSubmit}>
{({ formState }) => {
const { limit = min } = formState.values
const back = <AutopayCreateSuccess merchantLogo={merchantLogo} />
const front = (
<AutopayCreateSettings
defaultValue={defaultValue}
editMode
defaultValue={limit || defaultValue}
isEditMode={isEditMode}
limit={limit}
limit={formState.values.limit}
max={max}
merchantName={merchantName}
min={min}
@@ -67,7 +93,6 @@ const AutopayCreateForm = props => {

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

const renderFlipper = isActive => ({ opacity }) => (
<Container
style={{
@@ -78,7 +103,7 @@ const AutopayCreateForm = props => {
}),
}}
>
{isActive ? back : front}
{isNewItemAdded ? back : front}
</Container>
)
/* eslint-disable */
@@ -93,7 +118,7 @@ const AutopayCreateForm = props => {
</Heading.h1>
<Bar my={2} />
</Panel.Header>
<Panel.Body css={{ height: editMode ? '250px' : '195px' }}>
<Panel.Body css={{ height: isEditMode ? '250px' : '195px' }}>
<Spring
native
to={{
@@ -120,13 +145,11 @@ const AutopayCreateForm = props => {
<Panel.Footer mt={3}>
<Flex justifyContent="center">
<Button
onClick={() => isActive && onClose()}
type={isActive ? 'button' : 'submit'}
onClick={() => isNewItemAdded && onClose()}
type={isNewItemAdded ? 'button' : 'submit'}
variant="primary"
>
<FormattedMessage
{...(isActive ? messages.close_button_text : messages.add_button_text)}
/>
<FormattedMessage {...getButtonText(isActive, isEditMode)} />
</Button>
</Flex>
</Panel.Footer>
@@ -137,13 +160,20 @@ const AutopayCreateForm = props => {
)
}

AutopayCreateForm.defaultProps = {
limit: defaultValue,
}

AutopayCreateForm.propTypes = {
isActive: PropTypes.bool.isRequired,
isEditMode: PropTypes.bool.isRequired,
limit: PropTypes.string,
merchantLogo: PropTypes.string.isRequired,
merchantName: PropTypes.string.isRequired,
merchantNickname: PropTypes.string.isRequired,
showNotification: PropTypes.func.isRequired,
showError: PropTypes.func.isRequired,
onRemoveAutopay: PropTypes.func.isRequired,
intl: intlShape.isRequired,
onClose: PropTypes.func.isRequired,
onCreateAutopay: PropTypes.func.isRequired,
@@ -8,8 +8,10 @@ import AutopayModalBody from './AutopayModalBody'
const AutopayCreateModal = ({
selectedMerchant,
onClose,
isEditMode,
onCreateAutopay,
showError,
onRemoveAutopay,
showNotification,
}) => {
const isOpen = Boolean(selectedMerchant)
@@ -18,18 +20,20 @@ const AutopayCreateModal = ({
if (!isOpen) {
return null
}
const { nickname, pubkey, image, isActive } = selectedMerchant

const { nickname, pubkey, image, isActive, limit } = selectedMerchant
return (
<DialogOverlay alignItems="center" justifyContent="center">
<AutopayModalBody onClose={onClose}>
<AutopayCreateForm
isActive={isActive}
isEditMode={isEditMode}
limit={limit}
merchantLogo={image}
merchantName={nickname}
merchantNickname={nickname}
onClose={onClose}
onCreateAutopay={onCreateAutopay}
onRemoveAutopay={onRemoveAutopay}
pubkey={pubkey}
showError={showError}
showNotification={showNotification}
@@ -40,8 +44,10 @@ const AutopayCreateModal = ({
}

AutopayCreateModal.propTypes = {
isEditMode: PropTypes.bool.isRequired,
onClose: PropTypes.func.isRequired,
onCreateAutopay: PropTypes.func.isRequired,
onRemoveAutopay: PropTypes.func.isRequired,
selectedMerchant: PropTypes.object,
showError: PropTypes.func.isRequired,
showNotification: PropTypes.func.isRequired,
@@ -20,25 +20,28 @@ const AutopayCreateSettings = ({
min,
max,
intl,
defaultValue,
limit,
defaultValue,
merchantName,
pubkey,
isEditMode,
}) => (
<SettingsContainer>
{isEditMode && (
<DataRow
left={intl.formatMessage({ ...messages.autopay_status })}
right={
<Flex>
<Toggle field="isEnabled" id="isEnabled" />
<AutopayStatus ml={2} />
</Flex>
}
/>
<>
<DataRow
left={intl.formatMessage({ ...messages.autopay_status })}
right={
<Flex>
<Toggle field="isEnabled" id="isEnabled" initialValue />
<AutopayStatus ml={2} />
</Flex>
}
/>
<Bar variant="light" />
</>
)}
<Bar variant="light" />

<DataRow
left={
<>
@@ -60,12 +63,12 @@ const AutopayCreateSettings = ({
right={
<Flex alignItems="flex-end" flexDirection="column" ml={4}>
<Flex alignItems="baseline">
<CryptoValue fontSize="xxl" value={limit} />
<CryptoValue fontSize="xxl" value={limit || defaultValue} />
<CryptoSelector ml={2} />
</Flex>
<Flex alignItems="baseline">
<Text color="gray">=</Text>
<FiatValue color="gray" style="currency" value={limit} />
<FiatValue color="gray" style="currency" value={limit || defaultValue} />
</Flex>
</Flex>
}
@@ -85,7 +88,7 @@ AutopayCreateSettings.propTypes = {
defaultValue: PropTypes.string.isRequired,
intl: intlShape.isRequired,
isEditMode: PropTypes.bool.isRequired,
limit: PropTypes.string.isRequired,
limit: PropTypes.string,
max: PropTypes.string.isRequired,
merchantName: PropTypes.string.isRequired,
min: PropTypes.string.isRequired,
@@ -34,7 +34,7 @@ const AutopayLimitBadge = ({ limit, limitCurrency, ...rest }) => {
}

AutopayLimitBadge.propTypes = {
limit: PropTypes.number.isRequired,
limit: PropTypes.string.isRequired,
limitCurrency: PropTypes.string.isRequired,
}

@@ -1,14 +1,18 @@
import { connect } from 'react-redux'
import AutopayCreateModal from 'components/Autopay/AutopayCreateModal'
import { closeAutopayCreateModal, autopaySelectors, enableAutopay } from 'reducers/autopay'
import {
closeAutopayCreateModal,
autopaySelectors,
enableAutopay,
disableAutopay,
} from 'reducers/autopay'
import { showNotification, showError } from 'reducers/notification'

const mapStateToProps = state => {
const selectedMerchant = autopaySelectors.selectedMerchant(state)
return {
selectedMerchant,
}
}
const mapStateToProps = state => ({
selectedMerchant: autopaySelectors.selectedMerchant(state),
isEditMode: autopaySelectors.isCreateModalEditMode(state),
})

const mapDispatchToProps = dispatch => ({
onClose() {
dispatch(closeAutopayCreateModal())
@@ -18,6 +22,10 @@ const mapDispatchToProps = dispatch => ({
dispatch(enableAutopay(pubkey, limit))
},

onRemoveAutopay(pubkey) {
dispatch(disableAutopay(pubkey))
},

showNotification(...args) {
dispatch(showNotification(...args))
},
@@ -6,8 +6,12 @@ const mapStateToProps = state => ({
merchants: autopaySelectors.autopayListAsArray(state),
})

const mapDispatchToProps = {
openAutopayCreateModal,
const mapDispatchToProps = dispatch => {
return {
openAutopayCreateModal(merchantId) {
dispatch(openAutopayCreateModal(merchantId, true))
},
}
}

export default connect(

0 comments on commit 140e51d

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