Merge pull request #143 from strichliste/paypal-refinment

Paypal refinement

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`] = `
-<div>
-  <input
-    class="css-f1jp27"
-    type="tel"
-    value="0.00"
-  />
-</div>
+<input
+  class="css-f1jp27"
+  type="tel"
+  value="0.00"
+/>
 `;
 
 exports[`CurrencyInput with a default value matches the snapshot 1`] = `
-<div>
-  <input
-    class="css-f1jp27"
-    type="tel"
-    value="1,234.56"
-  />
-</div>
+<input
+  class="css-f1jp27"
+  type="tel"
+  value="1,234.56"
+/>
 `;

src/components/currency/currency-input.tsx

@@ -73,37 +73,35 @@ export class CurrencyInput extends React.Component<Props, State> {
           minimumFractionDigits={2}
           value={this.state.value}
           children={(formattedValue: string) => (
-            <div>
-              <Input
-                // @ts-ignore
-                ref={this.inputRef}
-                style={{
-                  color:
-                    getPlaceholder(
-                      this.props.placeholder,
-                      formattedValue,
-                      this.state.hasFocus
-                    ) === this.props.placeholder
-                      ? '#8e8e8e'
-                      : undefined,
-                }}
-                placeholder={this.props.placeholder}
-                value={getPlaceholder(
-                  this.props.placeholder,
-                  formattedValue,
-                  this.state.hasFocus
-                )}
-                onFocus={() => this.setState({ hasFocus: true })}
-                onBlur={() =>
-                  this.setState({
-                    hasFocus: false,
-                  })
-                }
-                onChange={this.updateValue}
-                type="tel"
-                autoFocus={this.props.autoFocus}
-              />
-            </div>
+            <Input
+              // @ts-ignore
+              ref={this.inputRef}
+              style={{
+                color:
+                  getPlaceholder(
+                    this.props.placeholder,
+                    formattedValue,
+                    this.state.hasFocus
+                  ) === this.props.placeholder
+                    ? '#8e8e8e'
+                    : undefined,
+              }}
+              placeholder={this.props.placeholder}
+              value={getPlaceholder(
+                this.props.placeholder,
+                formattedValue,
+                this.state.hasFocus
+              )}
+              onFocus={() => this.setState({ hasFocus: true })}
+              onBlur={() =>
+                this.setState({
+                  hasFocus: false,
+                })
+              }
+              onChange={this.updateValue}
+              type="tel"
+              autoFocus={this.props.autoFocus}
+            />
           )}
         />
       </>

src/components/paypal/paypal-transaction-form.tsx

@@ -0,0 +1,77 @@
+import { AcceptButton, styled } from 'bricks-of-sand';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { useSettings } from '../../store';
+import { Currency, CurrencyInput } from '../currency';
+import { useTransactionValidator } from '../transaction/validator';
+
+const Wrapper = styled('div')({
+  form: {
+    display: 'flex',
+    marginBottom: '1rem',
+  },
+  input: {
+    grow: 1,
+    marginRight: '1rem',
+  },
+});
+
+interface Props {
+  userName: string;
+  userId: number;
+}
+
+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}/${numberAmount}`;
+  const returnCancelUrl = location.href;
+  const fee = numberAmount * (settings.paypal.fee / 100) || null;
+  const amount = fee ? numberAmount + fee : numberAmount;
+
+  return (
+    <>
+      <Wrapper>
+        <form action={BASE_URL} method="post">
+          <CurrencyInput value={value} onChange={setValue} />
+          <input type="hidden" name="cmd" value="_xclick" />
+          <input
+            type="hidden"
+            name="business"
+            value={settings.paypal.recipient}
+          />
+          <input
+            type="hidden"
+            name="item_name"
+            value={`STRICHLISTE: ${props.userName}`}
+          />
+          <input type="hidden" name="rm" value="1" />
+          <input type="hidden" name="no_shipping" value="1" />
+          <input type="hidden" name="no_note" value="1" />
+          <input type="hidden" name="amount" value={amount} />
+          <input type="hidden" name="return" value={returnUrl} />
+          <input type="hidden" name="cancel_return" value={returnCancelUrl} />
+          <input
+            type="hidden"
+            name="currency_code"
+            value={settings.i18n.currency.alpha3}
+          />
+          <AcceptButton disabled={!isValid} />
+        </form>
+      </Wrapper>
+      {fee && (
+        <p>
+          <FormattedMessage id="PAY_PAL_FEE_LABEL" defaultMessage="fee: " />
+          <Currency value={fee} />
+        </p>
+      )}
+    </>
+  );
+});

src/components/paypal/paypal-transaction.tsx

@@ -1,15 +1,18 @@
-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';
 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 (
-    <Block padding="2rem">
-      <h2>
+    <Block padding="2rem 0">
+      <H2>
         <FormattedMessage
           id="PAYPAL_HEADING"
           defaultMessage="Charge by paypal"
         />
-      </h2>
+      </H2>
       {props.match.params.amount === 'error' ? (
         <FormattedMessage
           id="PAYPAL_ERROR"
           defaultMessage="Could not create the STRICHLISTE Transaction :("
         />
       ) : (
-        <>
-          <CurrencyInput value={value} onChange={setValue} />
-          <Block margin="1rem 0 0 0">
-            <PayPalTransactionButton
-              amount={value / 100}
-              userName={userName}
-              disabled={!isValid}
-            />
-          </Block>
-        </>
+        <PayPalTransactionForm userName={userName} userId={userId} />
       )}
     </Block>
   );

src/components/transaction/__tests__/__snapshots__/create-custom-transactions-form.spec.tsx.snap

@@ -14,15 +14,13 @@ exports[`CreateCustomTransactionForm matches the snapshot 1`] = `
     >
       -
     </button>
-    <div>
-      <input
-        class="css-1mnge6h"
-        placeholder="CUSTOM AMOUNT"
-        style="color: rgb(142, 142, 142);"
-        type="tel"
-        value="CUSTOM AMOUNT"
-      />
-    </div>
+    <input
+      class="css-1mnge6h"
+      placeholder="CUSTOM AMOUNT"
+      style="color: rgb(142, 142, 142);"
+      type="tel"
+      value="CUSTOM AMOUNT"
+    />
     <button
       class="css-m3fq00"
       disabled=""

src/components/transaction/transaction-list-item.tsx

@@ -55,10 +55,10 @@ export function TransactionListItem(props: Props): JSX.Element | null {
             </AlertText>
             <Ellipsis>
               {props.transaction.sender && (
-                <>&#8592; {props.transaction.sender.name}</>
+                <>&#8592; {props.transaction.sender.name} :</>
               )}
               {props.transaction.recipient && (
-                <>&#8594; {props.transaction.recipient.name}</>
+                <>&#8594; {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}</>}
             </Ellipsis>
           </ResponsiveGrid>
           <TextRight>

src/components/user/views/user.tsx

@@ -78,7 +78,7 @@ export class User extends React.Component<UserProps> {
         <GridWrapper>
           <NavTabMenus
             margin="2rem 1rem"
-            breakpoint={768}
+            breakpoint={320}
             label={<FormattedMessage id="USER_ACTIVE_LINK" />}
             tabs={[
               {