the links for bronze, silver, and gold work...

apps/repository/js/splash/splashes/premium/PremiumButton.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import Button from 'reactstrap/lib/Button';
+import {Logger} from '../../../../../../web/js/logger/Logger';
+import {Nav} from '../../../../../../web/js/ui/util/Nav';
+import {Toaster} from '../../../../../../web/js/ui/toaster/Toaster';
+
+const log = Logger.create();
+
+export class PremiumButton extends React.Component<IProps, IState> {
+
+    constructor(props: IProps, context: any) {
+        super(props, context);
+
+        this.state = {
+        };
+
+    }
+
+    public render() {
+
+        const {to, from} = this.props;
+
+        // true if we're BUYING a new plan...
+        const buy = from === 'free';
+
+        const text = buy ? "Buy" : "Upgrade";
+
+        const buyHandler = () => {
+            // if we're buying a NEW product go ahead and redirect us to
+            // stripe and use their BUY package.  This is better than embedding
+            // the stripe SDK and also stripe ALSO needs to run over HTTPS
+            Nav.openLinkWithNewTab(`https://getpolarized.io/[email protected]&plan=${to}`);
+        };
+
+        const upgradeHandler = () => {
+            Toaster.info("Not implemented yet");
+        };
+
+        const handler = buy ? buyHandler : upgradeHandler;
+
+        return (
+
+            <Button color="secondary"
+                    onClick={() => handler()}>
+
+                {text}
+
+            </Button>
+
+        );
+    }
+
+}
+
+export interface IProps {
+    readonly from: Plan;
+    readonly to: Plan;
+}
+
+export interface IState {
+
+}
+
+export type Plan = 'free' | 'bronze' | 'silver' | 'gold';

apps/repository/js/splash/splashes/premium/PremiumContent2.tsx

@@ -4,6 +4,7 @@ import {Splash} from '../../Splash';
 import {SplitLayout, SplitLayoutLeft} from '../../../../../../web/js/ui/split_layout/SplitLayout';
 import {SplitLayoutRight} from '../../../../../../web/js/ui/split_layout/SplitLayoutRight';
 import {CallToActionLink} from '../components/CallToActionLink';
+import {PremiumButton} from './PremiumButton';
 
 export class PremiumContent2 extends React.Component<IProps, IState> {
 
@@ -99,20 +100,13 @@ export class PremiumContent2 extends React.Component<IProps, IState> {
                                 <td>
                                 </td>
                                 <td className="highlight-plan">
-                                    <a className="btn r-btn shadow-level-1 highlight"
-                                       rel=""
-                                       href="https://opencollective.com/polar-bookshelf/contribute/tier/6659-bronze">Buy
-                                        now</a>
+                                    <PremiumButton from="free" to="bronze"/>
                                 </td>
                                 <td>
-                                    <a className="btn bg-btn" rel=""
-                                       href="https://opencollective.com/polar-bookshelf/contribute/tier/6661-silver">Buy
-                                        now</a>
+                                    <PremiumButton from="free" to="silver"/>
                                 </td>
                                 <td className="">
-                                    <a className="btn bg-btn" rel=""
-                                       href="https://opencollective.com/polar-bookshelf/contribute/tier/9247-gold">Buy
-                                        now</a>
+                                    <PremiumButton from="free" to="gold"/>
                                 </td>
                             </tr>
 

package.json

@@ -135,6 +135,7 @@
     "@types/semver": "~5.5.0",
     "@types/serve-static": "~1.13.2",
     "@types/split.js": "~1.3.1",
+    "@types/stripe": "^6.26.4",
     "@types/summernote": "~0.8.0",
     "@types/toastr": "~2.1.35",
     "@types/twitter-text": "~2.0.0",
@@ -216,6 +217,7 @@
     "split.js": "~1.5.10",
     "stream-to-array": "~2.3.0",
     "string-to-stream": "~1.1.1",
+    "stripe": "^7.1.0",
     "stripe.js": "0.0.1",
     "summernote": "^0.8.10",
     "text-encoding": "~0.7.0",