From 5ca57bf26092bfbabea5dc0b42f1b90cbc469847 Mon Sep 17 00:00:00 2001 From: Tobias Pickel Date: Tue, 12 Feb 2019 09:07:54 +0100 Subject: [PATCH 1/4] refactor(currency-input): remove additional wrapper --- src/components/currency/currency-input.tsx | 60 +++++++++++----------- 1 file changed, 29 insertions(+), 31 deletions(-) diff --git a/src/components/currency/currency-input.tsx b/src/components/currency/currency-input.tsx index 79a3e133..1dd94397 100644 --- a/src/components/currency/currency-input.tsx +++ b/src/components/currency/currency-input.tsx @@ -73,37 +73,35 @@ export class CurrencyInput extends React.Component { minimumFractionDigits={2} value={this.state.value} children={(formattedValue: string) => ( -
- this.setState({ hasFocus: true })} - onBlur={() => - this.setState({ - hasFocus: false, - }) - } - onChange={this.updateValue} - type="tel" - autoFocus={this.props.autoFocus} - /> -
+ this.setState({ hasFocus: true })} + onBlur={() => + this.setState({ + hasFocus: false, + }) + } + onChange={this.updateValue} + type="tel" + autoFocus={this.props.autoFocus} + /> )} /> From f040c7596f2d539e3a778caf456e38a84efeb8bc Mon Sep 17 00:00:00 2001 From: Tobias Pickel Date: Tue, 12 Feb 2019 09:10:21 +0100 Subject: [PATCH 2/4] fix(PayPal): add layout --- ...button.tsx => paypal-transaction-form.tsx} | 44 ++++++++++++++----- src/components/paypal/paypal-transaction.tsx | 30 +++++-------- .../transaction/transaction-list-item.tsx | 6 +-- 3 files changed, 48 insertions(+), 32 deletions(-) rename src/components/paypal/{paypal-transaction-button.tsx => paypal-transaction-form.tsx} (50%) diff --git a/src/components/paypal/paypal-transaction-button.tsx b/src/components/paypal/paypal-transaction-form.tsx similarity index 50% rename from src/components/paypal/paypal-transaction-button.tsx rename to src/components/paypal/paypal-transaction-form.tsx index 9d90f509..b4388a71 100644 --- a/src/components/paypal/paypal-transaction-button.tsx +++ b/src/components/paypal/paypal-transaction-form.tsx @@ -1,27 +1,44 @@ -import { AcceptButton } from 'bricks-of-sand'; +import { AcceptButton, styled } from 'bricks-of-sand'; import React from 'react'; + import { useSettings } from '../../store'; +import { CurrencyInput } from '../currency'; +import { useTransactionValidator } from '../transaction/validator'; + +const Wrapper = styled('div')({ + form: { + display: 'flex', + }, + input: { + grow: 1, + marginRight: '1rem', + }, +}); interface Props { userName: string; - amount: number; - disabled?: boolean; + userId: number; } -export const PayPalTransactionButton = React.memo((props: Props) => { +export const PayPalTransactionForm = React.memo((props: Props) => { const settings = useSettings(); + const [value, setValue] = React.useState(0); + const isValid = useTransactionValidator(value, props.userId); + const numberAmount = value / 100; + const BASE_URL = settings.paypal.sandbox ? 'https://www.sandbox.paypal.com/cgi-bin/webscr' : 'https://www.paypal.com/cgi-bin/webscr'; - const returnUrl = `${location.href}/${props.amount}`; + const returnUrl = `${location.href}/${numberAmount}`; const returnCancelUrl = location.href; const amount = settings.paypal.fee - ? props.amount + props.amount * (settings.paypal.fee / 100) - : props.amount; + ? numberAmount + numberAmount * (settings.paypal.fee / 100) + : numberAmount; return ( -
+
+ { name="item_name" value={`STRICHLISTE: ${props.userName}`} /> + + + @@ -41,8 +65,8 @@ export const PayPalTransactionButton = React.memo((props: Props) => { name="currency_code" value={settings.i18n.currency.alpha3} /> - + -
+ ); }); diff --git a/src/components/paypal/paypal-transaction.tsx b/src/components/paypal/paypal-transaction.tsx index a553d942..a69e14d3 100644 --- a/src/components/paypal/paypal-transaction.tsx +++ b/src/components/paypal/paypal-transaction.tsx @@ -1,4 +1,4 @@ -import { Block } from 'bricks-of-sand'; +import { Block, styled } from 'bricks-of-sand'; import * as React from 'react'; import { FormattedMessage } from 'react-intl'; import { RouteComponentProps, withRouter } from 'react-router'; @@ -6,10 +6,13 @@ import { useDispatch } from 'redux-react-hook'; import { useUserName } from '../../store'; import { Transaction, startCreatingTransaction } from '../../store/reducers'; -import { CurrencyInput } from '../currency'; -import { useTransactionValidator } from '../transaction/validator'; import { getUserDetailLink, getUserPayPalLink } from '../user/user-router'; -import { PayPalTransactionButton } from './paypal-transaction-button'; +import { PayPalTransactionForm } from './paypal-transaction-form'; + +const H2 = styled('h2')({ + textAlign: 'center', + marginBottom: '1rem', +}); export interface PayPalTransactionProps extends RouteComponentProps<{ id: string; state: string; amount: string }> {} @@ -18,9 +21,7 @@ export const PayPalTransaction = withRouter((props: PayPalTransactionProps) => { const userId = Number(props.match.params.id); const paidAmount = Number(props.match.params.amount); - const [value, setValue] = React.useState(0); const userName = useUserName(userId); - const isValid = useTransactionValidator(value, userId); const dispatch = useDispatch(); React.useEffect(() => { @@ -42,29 +43,20 @@ export const PayPalTransaction = withRouter((props: PayPalTransactionProps) => { }, [paidAmount]); return ( - -

+ +

-

+

{props.match.params.amount === 'error' ? ( ) : ( - <> - - - - - + )} ); diff --git a/src/components/transaction/transaction-list-item.tsx b/src/components/transaction/transaction-list-item.tsx index 4ae9e87a..abf5f043 100644 --- a/src/components/transaction/transaction-list-item.tsx +++ b/src/components/transaction/transaction-list-item.tsx @@ -55,10 +55,10 @@ export function TransactionListItem(props: Props): JSX.Element | null { {props.transaction.sender && ( - <>← {props.transaction.sender.name} + <>← {props.transaction.sender.name} : )} {props.transaction.recipient && ( - <>→ {props.transaction.recipient.name} + <>→ {props.transaction.recipient.name} : )} {props.transaction.article && ( <> @@ -68,7 +68,7 @@ export function TransactionListItem(props: Props): JSX.Element | null { {props.transaction.article.name} )} - {props.transaction.comment && <>: {props.transaction.comment}} + {props.transaction.comment && <> {props.transaction.comment}} From 69587278059d6fa435ca9b7ae33b4497e56e045d Mon Sep 17 00:00:00 2001 From: Tobias Pickel Date: Tue, 12 Feb 2019 09:36:36 +0100 Subject: [PATCH 3/4] refactor(user): change breakpoint --- .../currency-input.spec.tsx.snap | 24 ++++++++----------- ...ate-custom-transactions-form.spec.tsx.snap | 16 ++++++------- src/components/user/views/user.tsx | 2 +- 3 files changed, 18 insertions(+), 24 deletions(-) diff --git a/src/components/currency/__tests__/__snapshots__/currency-input.spec.tsx.snap b/src/components/currency/__tests__/__snapshots__/currency-input.spec.tsx.snap index 2e8da1ab..356a3cc7 100644 --- a/src/components/currency/__tests__/__snapshots__/currency-input.spec.tsx.snap +++ b/src/components/currency/__tests__/__snapshots__/currency-input.spec.tsx.snap @@ -1,21 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CurrencyInput matches the snapshot 1`] = ` -
- -
+ `; exports[`CurrencyInput with a default value matches the snapshot 1`] = ` -
- -
+ `; diff --git a/src/components/transaction/__tests__/__snapshots__/create-custom-transactions-form.spec.tsx.snap b/src/components/transaction/__tests__/__snapshots__/create-custom-transactions-form.spec.tsx.snap index 9f63c57b..b61170c5 100644 --- a/src/components/transaction/__tests__/__snapshots__/create-custom-transactions-form.spec.tsx.snap +++ b/src/components/transaction/__tests__/__snapshots__/create-custom-transactions-form.spec.tsx.snap @@ -14,15 +14,13 @@ exports[`CreateCustomTransactionForm matches the snapshot 1`] = ` > - -
- -
+