Fix Stripe & Add CodeSponsor

Author: Ives van Hoorne

package.json

@@ -145,7 +145,7 @@
     "react-router-dom": "^4.1.1",
     "react-router-redux": "next",
     "react-split-pane": "^0.1.63",
-    "react-stripe-elements": "^0.0.2",
+    "react-stripe-elements": "^0.1.0",
     "react-tippy": "^0.14.0",
     "redbox-react": "^1.4.3",
     "redux": "^3.7.1",

src/app/components/user/SubscribeForm/CheckoutForm.js

@@ -131,7 +131,9 @@ class CheckoutForm extends React.PureComponent {
         <Label>Card</Label>
         {errors.stripe != null && <ErrorText>{errors.stripe}</ErrorText>}
         <CardContainer>
-          <CardElement style={{ base: { color: 'white', fontWeight: 300 } }} />
+          <CardElement
+            style={{ base: { color: 'white', fontWeight: '500' } }}
+          />
         </CardContainer>
 
         <Button

src/app/index.html

@@ -38,7 +38,6 @@
   <!-- End Google Tag Manager -->
   <script src="https://cdn.ravenjs.com/3.17.0/raven.min.js" crossorigin="anonymous"></script>
   <script async src="//cdn.headwayapp.co/widget.js"></script>
-  <script async src="https://js.stripe.com/v3/"></script>
 
   <!-- AMD Loader for Monaco -->
   <script src="/public/vs/loader.js"></script>

src/app/pages/Patron/index.js

@@ -17,27 +17,56 @@ const Content = styled.div`
   color: white;
 `;
 
-export default function Support() {
-  document.title = 'Patron - CodeSandbox';
-  return (
-    <MaxWidth>
-      <Margin vertical={1.5} horizontal={1.5}>
-        <Navigation title="Become a Patron" />
-        <Content>
-          <MaxWidth width={1024}>
-            <Title>Become a CodeSandbox Patron!</Title>
-            <SubTitle>
-              You can support us by paying a monthly amount of your choice.
-              <br />
-              The money goes to all expenses of CodeSandbox.
-            </SubTitle>
-
-            <Centered horizontal>
-              <PricingModal />
-            </Centered>
-          </MaxWidth>
-        </Content>
-      </Margin>
-    </MaxWidth>
-  );
+type State = {
+  stripeLoaded: boolean,
+};
+
+export default class Patron extends React.PureComponent<void, State> {
+  constructor() {
+    super();
+    const stripeLoaded = Boolean(window.Stripe);
+
+    if (!stripeLoaded) {
+      const script = document.createElement('script');
+      script.setAttribute('src', 'https://js.stripe.com/v3/');
+      script.async = false;
+      document.head.appendChild(script);
+
+      script.onload = () => {
+        this.setState({ stripeLoaded: true });
+      };
+    }
+
+    this.state = {
+      stripeLoaded,
+    };
+  }
+
+  render() {
+    document.title = 'Patron - CodeSandbox';
+
+    if (!this.state.stripeLoaded) return null;
+
+    return (
+      <MaxWidth>
+        <Margin vertical={1.5} horizontal={1.5}>
+          <Navigation title="Become a Patron" />
+          <Content>
+            <MaxWidth width={1024}>
+              <Title>Become a CodeSandbox Patron!</Title>
+              <SubTitle>
+                You can support us by paying a monthly amount of your choice.
+                <br />
+                The money goes to all expenses of CodeSandbox.
+              </SubTitle>
+
+              <Centered horizontal>
+                <PricingModal />
+              </Centered>
+            </MaxWidth>
+          </Content>
+        </Margin>
+      </MaxWidth>
+    );
+  }
 }

src/app/pages/Sandbox/Editor/Workspace/Advertisement/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export default class Advertisement extends React.PureComponent {
+  componentDidMount() {
+    requestAnimationFrame(() => {
+      const script = document.createElement('script');
+      script.setAttribute(
+        'src',
+        'https://app.codesponsor.io/scripts/o81cdkzTVQe3UbTW0J2EQw?theme=dark&height=120&image=hide'
+      );
+      script.async = true;
+      document.head.appendChild(script);
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <div id="code-sponsor-widget" />
+      </div>
+    );
+  }
+}

src/app/pages/Sandbox/Editor/Workspace/index.js

@@ -26,6 +26,7 @@ import WorkspaceItem from './WorkspaceItem';
 import SandboxActions from './SandboxActions';
 import Logo from './Logo';
 import ConnectionNotice from './ConnectionNotice';
+import Advertisement from './Advertisement';
 
 const Container = styled.div`
   position: absolute;
@@ -153,6 +154,7 @@ const Workspace = ({
       </div>
 
       <div>
+        {!isPatron && <Advertisement />}
         <ConnectionNotice />
         <TermsContainer>
           By using CodeSandbox you agree to our{' '}

yarn.lock

@@ -7187,9 +7187,9 @@ react-split-pane@^0.1.63:
     prop-types "^15.5.10"
     react-style-proptype "^3.0.0"
 
-react-stripe-elements@^0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/react-stripe-elements/-/react-stripe-elements-0.0.2.tgz#57ec82e086a236482d5ad1599e58234ee9e3a881"
+react-stripe-elements@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/react-stripe-elements/-/react-stripe-elements-0.1.0.tgz#1cddd0b33ea341f83de0956d9bbd94386e3189d1"
   dependencies:
     prop-types "^15.5.8"