Merge pull request #9 from goldcaddy77/feat/update-donation-stories

feat(beer-donation): better beer donation form

src/components/ReblocksPayment/BeerForm.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+
+import { ACCOUNT_ID, Currency, getCurrentXRBPrice } from '../../lib/';
+
+import { PaymentResponse, ReblocksPayment } from './ReblocksPayment';
+
+export interface Props {
+  onSuccess: (data: PaymentResponse) => void;
+}
+
+export interface State {
+  currentXRBPrice?: number;
+  xrbPerBeer?: number;
+}
+
+export class BeerForm extends React.Component<Props, State> {
+  BEER_PRICE = 7.0;
+
+  constructor(props: Props) {
+    super(props);
+    this.state = { currentXRBPrice: undefined, xrbPerBeer: undefined };
+  }
+
+  componentDidMount() {
+    this.loadData('USD');
+  }
+
+  loadData = (currency?: Currency) => {
+    getCurrentXRBPrice(currency as Currency)
+      .then(response => {
+        console.log('parsed json', response);
+        console.log('xrb per beer', this.BEER_PRICE / parseFloat(response.price_local));
+        this.setState({
+          currentXRBPrice: parseFloat(response.price_local),
+          xrbPerBeer: this.BEER_PRICE / parseFloat(response.price_local)
+        });
+      })
+      .catch(ex => {
+        console.log('parsing failed', ex);
+      });
+  };
+
+  formatUSD = (value?: number): string => {
+    if (!value) {
+      return '';
+    }
+    return `$${value.toFixed(2)}`;
+  };
+
+  render() {
+    return (
+      <div style={{ padding: 20 }}>
+        <p>
+          Current cost of a delicious IPA in Boston: {this.formatUSD(this.BEER_PRICE)}
+          <br />
+          {this.state.currentXRBPrice && (
+            <span>Current cost of XRB in USD: {this.formatUSD(this.state.currentXRBPrice)}</span>
+          )}
+          <br />
+          {this.state.xrbPerBeer && <span>XRBs in a beer: {this.state.xrbPerBeer}</span>}
+        </p>
+        <p style={{ display: this.state.xrbPerBeer }}>
+          <ReblocksPayment
+            accountId={ACCOUNT_ID}
+            amount={(this.state.xrbPerBeer || 0) * 1000000}
+            onPaymentSuccess={this.props.onSuccess}
+          />
+        </p>
+      </div>
+    );
+  }
+}

src/components/ReblocksPayment/PaymentForm.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+// tslint:disable-next-line:no-duplicate-imports
+import { ChangeEvent } from 'react';
+
+import { ACCOUNT_ID } from '../../lib/';
+
+import { PaymentResponse, ReblocksPayment } from './ReblocksPayment';
+
+export interface State {
+  accountId: string;
+  amount: number;
+}
+
+export interface Props {
+  onSuccess: (data: PaymentResponse) => void;
+}
+
+export class PaymentForm extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { accountId: ACCOUNT_ID, amount: 10000 };
+  }
+
+  onChangeAccountId = (event: ChangeEvent<HTMLInputElement>) => {
+    console.log(event.currentTarget.value);
+    this.setState({ accountId: event.currentTarget.value });
+  };
+
+  onChangeAmount = (event: ChangeEvent<HTMLInputElement>) => {
+    console.log(event.currentTarget.value);
+    this.setState({ amount: parseFloat(event.currentTarget.value) });
+  };
+
+  render() {
+    return (
+      <form>
+        <p>
+          Filling in the form below will dynamically change the payment button with the new account
+          and amount specified
+        </p>
+        <fieldset>
+          <label>Account ID</label>
+          <input
+            type="text"
+            value={this.state.accountId}
+            placeholder="Account ID"
+            onChange={this.onChangeAccountId}
+          />
+          <label>Amount (in rai, 1,000,000 rai = 1 XRB)</label>
+
+          <input
+            type="number"
+            value={this.state.amount}
+            placeholder="Amount of rai"
+            onChange={this.onChangeAmount}
+          />
+          <ReblocksPayment
+            accountId={this.state.accountId}
+            amount={this.state.amount}
+            onPaymentSuccess={this.props.onSuccess}
+          />
+        </fieldset>
+      </form>
+    );
+  }
+}

src/components/ReblocksPayment/ReblocksPayment.story.tsx

@@ -2,102 +2,49 @@ import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 // tslint:disable-next-line:no-duplicate-imports
-import { ChangeEvent } from 'react';
 
 import { ACCOUNT_ID } from '../../lib/';
 
+import { BeerForm } from './BeerForm';
+import { PaymentForm } from './PaymentForm';
 import { PaymentResponse, ReblocksPayment } from './ReblocksPayment';
 
-interface State {
-  accountId: string;
-  amount: number;
-}
-
-class PaymentForm extends React.Component<{}, State> {
-  constructor(props: {}) {
-    super(props);
-    this.state = { accountId: ACCOUNT_ID, amount: 10000 };
-  }
-
-  onChangeAccountId = (event: ChangeEvent<HTMLInputElement>) => {
-    console.log(event.currentTarget.value);
-    this.setState({ accountId: event.currentTarget.value });
-  };
-
-  onChangeAmount = (event: ChangeEvent<HTMLInputElement>) => {
-    console.log(event.currentTarget.value);
-    this.setState({ amount: parseFloat(event.currentTarget.value) });
-  };
-
-  render() {
-    return (
-      <form>
-        <p>
-          Filling in the form below will dynamically change the payment button with the new account
-          and amount specified
-        </p>
-        <fieldset>
-          <label>Account ID</label>
-          <input
-            type="text"
-            value={this.state.accountId}
-            placeholder="Account ID"
-            onChange={this.onChangeAccountId}
-          />
-          <label>Amount (in rai, 1,000,000 rai = 1 XRB)</label>
-
-          <input
-            type="number"
-            value={this.state.amount}
-            placeholder="Amount of rai"
-            onChange={this.onChangeAmount}
-          />
-          <ReblocksPayment
-            accountId={this.state.accountId}
-            amount={this.state.amount}
-            onPaymentSuccess={onSuccess}
-          />
-        </fieldset>
-      </form>
-    );
-  }
-}
-
 const onSuccess = (data: PaymentResponse) => {
   action('Payment successful.')();
   action(`Transaction ID: ${data.token}`)();
 };
 
 storiesOf('ReblocksPayment', module)
-  .add('Small test transaction', () => {
+  .add('Donate 1 XRB', () => {
     action('Click the button to start payment')();
 
     return (
-      <div style={{ margin: '10px 80px' }}>
-        <p>The button below will prompt you to send a test transaction of 1000 rai (~2 cents)</p>
-        <ReblocksPayment accountId={ACCOUNT_ID} amount={1000} onPaymentSuccess={onSuccess} />
+      <div style={{ padding: 20 }}>
+        <p>
+          By clicking the button below and making payment to the address, you'll donate 1 XRB to
+          this project
+        </p>
+        <ReblocksPayment accountId={ACCOUNT_ID} amount={1000000} onPaymentSuccess={onSuccess} />
       </div>
     );
   })
-  .add('Dynamic Button', () => {
+  .add('Donate a 🍺', () => {
+    return <BeerForm onSuccess={onSuccess} />;
+  })
+  .add('Small test transaction', () => {
+    action('Click the button to start payment')();
+
     return (
-      <div style={{ margin: '10px 80px' }}>
-        <PaymentForm />
+      <div style={{ padding: 20 }}>
+        <p>The button below will prompt you to send a test transaction of 1000 rai (~2 cents)</p>
+        <ReblocksPayment accountId={ACCOUNT_ID} amount={1000} onPaymentSuccess={onSuccess} />
       </div>
     );
   })
-  .add('Buy Dan a 🍺', () => {
+  .add('Dynamic Button', () => {
     return (
-      <div style={{ margin: '10px 80px' }}>
-        <p>
-          If you want to help support the project, you can donate a beer's worth of rai using this
-          form
-        </p>
-        <ReblocksPayment accountId={ACCOUNT_ID} amount={250000} onPaymentSuccess={onSuccess} />
-        <p style={{ marginTop: 30 }}>
-          ...or you can donate a different amount to
-          xrb_3ritoyx4zcixshfbezg4aycb49xbupw9ggink1rfm43tm6uh87t4ifuxg5dm
-        </p>
+      <div style={{ padding: 20 }}>
+        <PaymentForm onSuccess={onSuccess} />
       </div>
     );
   });