Merge pull request #53 from lbryio/claim-referral-credits

Add referral credit check page (WIP)

dist/index.html

@@ -43,6 +43,7 @@
       <script src="./js/page/publish.js"></script>
       <script src="./js/page/start.js"></script>
       <script src="./js/page/claim_code.js"></script>
+      <script src="./js/page/referral.js"></script>
       <script src="./js/page/wallet.js"></script>
       <script src="./js/page/show.js"></script>
       <script src="./js/page/wallet.js"></script>

js/app.js

@@ -81,11 +81,13 @@ var App = React.createClass({
       case 'send':
       case 'receive':
       case 'claim':
+      case 'referral':
         return {
           '?wallet' : 'Overview',
           '?send' : 'Send',
           '?receive' : 'Receive',
-          '?claim' : 'Claim Beta Code'
+          '?claim' : 'Claim Beta Code',
+          '?referral' : 'Check Referral Credit',
         };
       default:
         return null;
@@ -109,6 +111,8 @@ var App = React.createClass({
         return <StartPage />;
       case 'claim':
         return <ClaimCodePage />;
+      case 'referral':
+        return <ReferralPage />;
       case 'wallet':
       case 'send':
       case 'receive':

js/page/referral.js

@@ -0,0 +1,90 @@
+var referralCodeContentStyle = {
+  display: 'inline-block',
+  textAlign: 'left',
+  width: '600px',
+}, referralCodeLabelStyle = {
+  display: 'inline-block',
+  cursor: 'default',
+  width: '130px',
+  textAlign: 'right',
+  marginRight: '6px',
+};
+
+var ReferralPage = React.createClass({
+  getInitialState: function() {
+    return {
+      submitting: false,
+    }
+  },
+  handleSubmit: function() {
+    if (!this.refs.code.value) {
+      alert('Please enter a referral code.');
+      return;
+    } else if (!this.refs.email.value) {
+      alert('Please enter an email address.');
+      return;
+    }
+
+    this.setState({
+      submitting: true
+    });
+
+    lbry.getNewAddress((address) => {
+      var code = this.refs.code.value;
+      var email = this.refs.email.value;
+
+      var xhr = new XMLHttpRequest;
+      xhr.addEventListener('load', () => {
+        var response = JSON.parse(xhr.responseText);
+
+        if (response.success) {
+          alert('You have earned ' + response.referralCredits + ' credits from referrals and ' +
+                response.activationCredits + ' credits from activations.');
+
+          window.location = '?home';
+        } else {
+          alert(response.reason);
+          this.setState({
+            submitting: false
+          });
+        }
+      });
+
+      xhr.addEventListener('error', () => {
+        this.setState({
+          submitting: false
+        });
+        alert('LBRY couldn\'t connect to our servers to confirm your referral code. Please check your ' +
+              'internet connection.');
+      });
+
+      xhr.open('POST', 'https://invites.lbry.io/check', true);
+      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+      xhr.send('code=' + encodeURIComponent(code) + '&address=' + encodeURIComponent(address) +
+               '&email=' + encodeURIComponent(email));
+    });
+  },
+  render: function() {
+    return (
+      <main>
+        <div className="card">
+          <h2>Check your referral credits</h2>
+          <section style={referralCodeContentStyle}>
+            <p>Have you referred others to LBRY? Enter your referral code and email address below to check how many credits you've earned!</p>
+            <p>As a reminder, your referral code is the same as your LBRY invitation code.</p>
+          </section>
+          <section>
+            <form onSubmit={this.handleSubmit}>
+              <section><label style={referralCodeLabelStyle} htmlFor="code">Referral code</label><input name="code" ref="code" /></section>
+              <section><label style={referralCodeLabelStyle} htmlFor="email">Email</label><input name="email" ref="email" /></section>
+            </form>
+          </section>
+          <section>
+            <Link button="primary" label={this.state.submitting ? "Submitting..." : "Submit"}
+                  disabled={this.state.submitting} onClick={this.handleSubmit} />
+          </section>
+        </div>
+      </main>
+    );
+  }
+});