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