From 0788cde2194744195aacb024ee61625a78dbc73d Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Thu, 8 Sep 2016 04:17:08 -0400
Subject: [PATCH 1/2] Add referral code claim page

---
 dist/index.html     |  1 +
 js/app.js           |  6 ++-
 js/page/referral.js | 89 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 js/page/referral.js

diff --git a/dist/index.html b/dist/index.html
index cbd6e497e..d4a10ed73 100644
--- a/dist/index.html
+++ b/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>
diff --git a/js/app.js b/js/app.js
index c2fc77148..51e70b8d8 100644
--- a/js/app.js
+++ b/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' : 'Claim Referral',
         };
       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':
diff --git a/js/page/referral.js b/js/page/referral.js
new file mode 100644
index 000000000..e15b6bfbb
--- /dev/null
+++ b/js/page/referral.js
@@ -0,0 +1,89 @@
+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) {
+          var credits = response.activationCredits + response.referralCredits;
+          alert('Your referral code has been redeemed! ' + credits + ' credits will be added to ' +
+                'your balance shortly.');
+          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>Claim your referral credits</h2>
+          <section style={referralCodeContentStyle}>
+            <p>Did you refer someone to LBRY? Enter your referral code and email address below to receive your credits!</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>
+    );
+  }
+});

From cd2d3a44ea95bd82d7f2b1a7bd2f6b3c691a7331 Mon Sep 17 00:00:00 2001
From: Alex Liebowitz <alex@alexliebowitz.com>
Date: Fri, 9 Sep 2016 07:40:27 -0400
Subject: [PATCH 2/2] Fix wording

---
 js/app.js           |  2 +-
 js/page/referral.js | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/js/app.js b/js/app.js
index 51e70b8d8..697bd33c2 100644
--- a/js/app.js
+++ b/js/app.js
@@ -87,7 +87,7 @@ var App = React.createClass({
           '?send' : 'Send',
           '?receive' : 'Receive',
           '?claim' : 'Claim Beta Code',
-          '?referral' : 'Claim Referral',
+          '?referral' : 'Check Referral Credit',
         };
       default:
         return null;
diff --git a/js/page/referral.js b/js/page/referral.js
index e15b6bfbb..e4df4de49 100644
--- a/js/page/referral.js
+++ b/js/page/referral.js
@@ -38,9 +38,9 @@ var ReferralPage = React.createClass({
         var response = JSON.parse(xhr.responseText);
 
         if (response.success) {
-          var credits = response.activationCredits + response.referralCredits;
-          alert('Your referral code has been redeemed! ' + credits + ' credits will be added to ' +
-                'your balance shortly.');
+          alert('You have earned ' + response.referralCredits + ' credits from referrals and ' +
+                response.activationCredits + ' credits from activations.');
+
           window.location = '?home';
         } else {
           alert(response.reason);
@@ -68,9 +68,10 @@ var ReferralPage = React.createClass({
     return (
       <main>
         <div className="card">
-          <h2>Claim your referral credits</h2>
+          <h2>Check your referral credits</h2>
           <section style={referralCodeContentStyle}>
-            <p>Did you refer someone to LBRY? Enter your referral code and email address below to receive your credits!</p>
+            <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}>