JimmyMow
6 years ago
committed by
GitHub
GitHub
10 changed files with 2 additions and 393 deletions
@ -1,113 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import PropTypes from 'prop-types' |
|
||||
import { btc } from 'lib/utils' |
|
||||
import Hand from 'components/Icon/Hand' |
|
||||
import AmountInput from 'components/AmountInput' |
|
||||
import { Button, Dropdown } from 'components/UI' |
|
||||
import { FormattedNumber, FormattedMessage, injectIntl } from 'react-intl' |
|
||||
import messages from './messages' |
|
||||
import styles from './Request.scss' |
|
||||
|
|
||||
const Request = ({ |
|
||||
requestform: { amount, memo }, |
|
||||
ticker, |
|
||||
setRequestAmount, |
|
||||
setRequestMemo, |
|
||||
setCurrency, |
|
||||
requestFiatAmount, |
|
||||
currencyFilters, |
|
||||
onRequestSubmit, |
|
||||
intl |
|
||||
}) => { |
|
||||
const onCurrencyFilterClick = currency => { |
|
||||
// change the input amount
|
|
||||
setRequestAmount(btc.convert(ticker.currency, currency, amount)) |
|
||||
setCurrency(currency) |
|
||||
} |
|
||||
|
|
||||
return ( |
|
||||
<div className={styles.container}> |
|
||||
<header className={styles.header}> |
|
||||
<Hand width="3em" height="3em" /> |
|
||||
<h1> |
|
||||
<FormattedMessage {...messages.title} /> |
|
||||
</h1> |
|
||||
</header> |
|
||||
|
|
||||
<div className={styles.content}> |
|
||||
<section className={styles.amount}> |
|
||||
<div className={styles.top}> |
|
||||
<label htmlFor="amount"> |
|
||||
<FormattedMessage {...messages.amount} /> |
|
||||
</label> |
|
||||
<span /> |
|
||||
</div> |
|
||||
<div className={styles.bottom}> |
|
||||
<AmountInput |
|
||||
id="amount" |
|
||||
amount={amount} |
|
||||
currency={ticker.currency} |
|
||||
onChangeEvent={setRequestAmount} |
|
||||
/> |
|
||||
<Dropdown |
|
||||
activeKey={ticker.currency} |
|
||||
items={currencyFilters} |
|
||||
onChange={onCurrencyFilterClick} |
|
||||
ml={2} |
|
||||
/> |
|
||||
</div> |
|
||||
|
|
||||
<div className={styles.fiatAmount}> |
|
||||
{'≈ '} |
|
||||
<FormattedNumber |
|
||||
currency={ticker.fiatTicker} |
|
||||
style="currency" |
|
||||
value={requestFiatAmount || 0} |
|
||||
/> |
|
||||
</div> |
|
||||
</section> |
|
||||
|
|
||||
<section className={styles.memo}> |
|
||||
<div className={styles.top}> |
|
||||
<label htmlFor="memo"> |
|
||||
<FormattedMessage {...messages.memo} /> |
|
||||
</label> |
|
||||
</div> |
|
||||
<div className={styles.bottom}> |
|
||||
<input |
|
||||
type="text" |
|
||||
placeholder={intl.formatMessage({ ...messages.details })} |
|
||||
value={memo} |
|
||||
onChange={event => setRequestMemo(event.target.value)} |
|
||||
id="memo" |
|
||||
/> |
|
||||
</div> |
|
||||
</section> |
|
||||
|
|
||||
<section className={styles.submit}> |
|
||||
<Button disabled={!(amount > 0)} onClick={onRequestSubmit} width={200}> |
|
||||
<FormattedMessage {...messages.request} /> |
|
||||
</Button> |
|
||||
</section> |
|
||||
</div> |
|
||||
</div> |
|
||||
) |
|
||||
} |
|
||||
|
|
||||
Request.propTypes = { |
|
||||
requestform: PropTypes.shape({ |
|
||||
amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), |
|
||||
memo: PropTypes.string |
|
||||
}).isRequired, |
|
||||
requestFiatAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), |
|
||||
currencyName: PropTypes.string.isRequired, |
|
||||
currencyFilters: PropTypes.array.isRequired, |
|
||||
setRequestAmount: PropTypes.func.isRequired, |
|
||||
setRequestMemo: PropTypes.func.isRequired, |
|
||||
onRequestSubmit: PropTypes.func.isRequired, |
|
||||
setCurrency: PropTypes.func.isRequired, |
|
||||
|
|
||||
ticker: PropTypes.object.isRequired |
|
||||
} |
|
||||
|
|
||||
export default injectIntl(Request) |
|
||||
@ -1,88 +0,0 @@ |
|||||
@import 'styles/variables.scss'; |
|
||||
|
|
||||
.container { |
|
||||
margin: 0 auto; |
|
||||
width: 500px; |
|
||||
} |
|
||||
|
|
||||
.header { |
|
||||
text-align: center; |
|
||||
padding-bottom: 20px; |
|
||||
color: var(--primaryText); |
|
||||
border-bottom: 1px solid $spaceborder; |
|
||||
|
|
||||
h1 { |
|
||||
font-size: 22px; |
|
||||
font-weight: 300; |
|
||||
margin-top: 10px; |
|
||||
letter-spacing: 1.5px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.content { |
|
||||
margin-top: 50px; |
|
||||
color: var(--primaryText); |
|
||||
|
|
||||
.memo { |
|
||||
margin-top: 35px; |
|
||||
} |
|
||||
|
|
||||
.amount .bottom { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
align-items: center; |
|
||||
|
|
||||
input { |
|
||||
font-size: 20px; |
|
||||
max-width: 150px; |
|
||||
border: 1px solid #404040; |
|
||||
border-radius: 4px; |
|
||||
padding: 15px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.top { |
|
||||
margin-bottom: 10px; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
|
|
||||
label { |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.bottom { |
|
||||
display: flex; |
|
||||
align-items: center; |
|
||||
|
|
||||
input { |
|
||||
background: transparent; |
|
||||
outline: none; |
|
||||
border: 1px solid #404040; |
|
||||
border-radius: 4px; |
|
||||
color: var(--lightningOrange); |
|
||||
-webkit-text-fill-color: var(--primaryText); |
|
||||
font-size: 20px; |
|
||||
width: 100%; |
|
||||
padding: 15px; |
|
||||
} |
|
||||
|
|
||||
input::-webkit-input-placeholder { |
|
||||
text-shadow: none; |
|
||||
-webkit-text-fill-color: initial; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
.fiatAmount { |
|
||||
margin-top: 10px; |
|
||||
opacity: 0.5; |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
|
|
||||
.submit { |
|
||||
margin-top: 50px; |
|
||||
text-align: center; |
|
||||
} |
|
||||
} |
|
||||
@ -1,3 +0,0 @@ |
|||||
import Request from './Request' |
|
||||
|
|
||||
export default Request |
|
||||
@ -1,9 +0,0 @@ |
|||||
import { defineMessages } from 'react-intl' |
|
||||
|
|
||||
export default defineMessages({ |
|
||||
title: 'Request Payment', |
|
||||
amount: 'Amount', |
|
||||
memo: 'Memo', |
|
||||
details: 'Details about the request', |
|
||||
request: 'Request' |
|
||||
}) |
|
||||
@ -1,78 +0,0 @@ |
|||||
import { createSelector } from 'reselect' |
|
||||
import { btc } from 'lib/utils' |
|
||||
import { tickerSelectors } from './ticker' |
|
||||
|
|
||||
// Initial State
|
|
||||
const initialState = { |
|
||||
amount: '', |
|
||||
memo: '' |
|
||||
} |
|
||||
|
|
||||
// Constants
|
|
||||
// ------------------------------------
|
|
||||
export const SET_REQUEST_AMOUNT = 'SET_REQUEST_AMOUNT' |
|
||||
export const SET_REQUEST_MEMO = 'SET_REQUEST_MEMO' |
|
||||
export const SET_PAY_INVOICE = 'SET_PAY_INVOICE' |
|
||||
export const RESET_FORM = 'RESET_FORM' |
|
||||
|
|
||||
// ------------------------------------
|
|
||||
// Actions
|
|
||||
// ------------------------------------
|
|
||||
export function setRequestAmount(amount) { |
|
||||
return { |
|
||||
type: SET_REQUEST_AMOUNT, |
|
||||
amount |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export function setRequestMemo(memo) { |
|
||||
return { |
|
||||
type: SET_REQUEST_MEMO, |
|
||||
memo |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export function resetRequestForm() { |
|
||||
return { |
|
||||
type: RESET_FORM |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// ------------------------------------
|
|
||||
// Action Handlers
|
|
||||
// ------------------------------------
|
|
||||
const ACTION_HANDLERS = { |
|
||||
[SET_REQUEST_AMOUNT]: (state, { amount }) => ({ ...state, amount }), |
|
||||
[SET_REQUEST_MEMO]: (state, { memo }) => ({ ...state, memo }), |
|
||||
[RESET_FORM]: () => initialState |
|
||||
} |
|
||||
|
|
||||
const requestFormSelectors = {} |
|
||||
const requestAmountSelector = state => state.requestform.amount |
|
||||
const currencySelector = state => state.ticker.currency |
|
||||
const fiatTickerSelector = state => state.ticker.fiatTicker |
|
||||
|
|
||||
requestFormSelectors.fiatAmount = createSelector( |
|
||||
requestAmountSelector, |
|
||||
currencySelector, |
|
||||
tickerSelectors.currentTicker, |
|
||||
fiatTickerSelector, |
|
||||
(amount, currency, currentTicker, fiatTicker) => { |
|
||||
if (!currentTicker || !currentTicker[fiatTicker].last) { |
|
||||
return false |
|
||||
} |
|
||||
|
|
||||
return btc.convert(currency, 'fiat', amount, currentTicker[fiatTicker].last) |
|
||||
} |
|
||||
) |
|
||||
|
|
||||
export { requestFormSelectors } |
|
||||
|
|
||||
// ------------------------------------
|
|
||||
// Reducer
|
|
||||
// ------------------------------------
|
|
||||
export default function requestFormReducer(state = initialState, action) { |
|
||||
const handler = ACTION_HANDLERS[action.type] |
|
||||
|
|
||||
return handler ? handler(state, action) : state |
|
||||
} |
|
||||
@ -1,41 +0,0 @@ |
|||||
import React from 'react' |
|
||||
import { configure } from 'enzyme' |
|
||||
import Adapter from 'enzyme-adapter-react-16' |
|
||||
import { ThemeProvider } from 'styled-components' |
|
||||
import Request from 'components/Form/Request' |
|
||||
import { dark } from 'themes' |
|
||||
import { mountWithIntl } from '../../__helpers__/intl-enzyme-test-helper' |
|
||||
|
|
||||
configure({ adapter: new Adapter() }) |
|
||||
|
|
||||
const defaultProps = { |
|
||||
requestform: {}, |
|
||||
ticker: { |
|
||||
currency: 'btc', |
|
||||
fiatTicker: 'USD' |
|
||||
}, |
|
||||
|
|
||||
currencyFilters: [], |
|
||||
currencyName: '', |
|
||||
requestFiatAmount: '', |
|
||||
|
|
||||
setRequestAmount: () => {}, |
|
||||
setRequestMemo: () => {}, |
|
||||
setCurrency: () => {}, |
|
||||
|
|
||||
onRequestSubmit: () => {} |
|
||||
} |
|
||||
|
|
||||
describe('Form', () => { |
|
||||
describe('should show request form when formType is REQUEST_FORM', () => { |
|
||||
const props = { ...defaultProps } |
|
||||
const el = mountWithIntl( |
|
||||
<ThemeProvider theme={dark}> |
|
||||
<Request {...props} /> |
|
||||
</ThemeProvider> |
|
||||
) |
|
||||
it('should contain Request', () => { |
|
||||
expect(el.contains('Request Payment')).toBe(true) |
|
||||
}) |
|
||||
}) |
|
||||
}) |
|
||||
Loading…
Reference in new issue