Pro checkout (codesandbox#3096)

* clone patron and create a new page

* there is a form

* redirect patrons

* starting to look good now

* no height dance

* bring the redirect back

* improve login ux

* Pro page for user

* hook up controls to pro page

* open payment info directly in modal

* are you happy now typemom

* add check for currentModal

* Change type to plan

* redirect pro users away from patron

* fix dates + plan

* attempt to clean up before adding more

* even more cleanup

* add expiring page

* add loading state for reactivate

* disable loading button

* remove patron link from navigation

* hide patron in menu for non-patrons

* correct implementation for navigation patron

* patrons always go to patron\

* change price to 12 for pro under the hoooood

Author: siddharthkp

README.md

@@ -14,7 +14,10 @@
 [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
 [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
 
-An instantly ready, full-featured online IDE for web development on any device with a browser. Enabling you to start new projects quickly and prototype rapidly. With CodeSandbox, you can create web apps, experiment with code, test ideas, and share creations easily.
+An instantly ready, full-featured online IDE for web development on any device
+with a browser. Enabling you to start new projects quickly and prototype
+rapidly. With CodeSandbox, you can create web apps, experiment with code, test
+ideas, and share creations easily.
 
 ## Other CodeSandbox repositories
 

packages/app/src/app/overmind/actions.ts

@@ -74,13 +74,18 @@ type ModalName =
   | 'share'
   | 'signInForTemplates'
   | 'userSurvey';
-export const modalOpened: Action<{ modal: ModalName; message?: string }> = (
-  { state, effects },
-  { modal, message }
-) => {
+
+export const modalOpened: Action<{
+  modal: ModalName;
+  message?: string;
+  itemId?: string;
+}> = ({ state, effects }, { modal, message, itemId }) => {
   effects.analytics.track('Open Modal', { modal });
   state.currentModalMessage = message;
   state.currentModal = modal;
+  if (state.currentModal === 'preferences') {
+    state.preferences.itemId = itemId;
+  }
 };
 
 export const modalClosed: Action = ({ state, effects }) => {

packages/app/src/app/pages/Dashboard/Sidebar/Item/index.js

@@ -56,7 +56,7 @@ export class Item extends React.Component {
       <Route path={path}>
         {res => {
           const isActive =
-            (!noActive && (res.match && res.match.isExact)) || active;
+            (!noActive && res.match && res.match.isExact) || active;
           const isOpen =
             this.state.open === undefined ? isActive : this.state.open;
 

packages/app/src/app/pages/Dashboard/Sidebar/TemplateItem/MyTemplateItem/index.tsx

@@ -14,9 +14,14 @@ interface ITemplateItemProps {
   connectDropTarget?: any;
 }
 
-const TemplateItemComponent: React.FC<
-  ITemplateItemProps & RouteComponentProps
-> = ({ currentPath, isOver, canDrop, connectDropTarget, teamId }) => {
+const TemplateItemComponent: React.FC<ITemplateItemProps &
+  RouteComponentProps> = ({
+  currentPath,
+  isOver,
+  canDrop,
+  connectDropTarget,
+  teamId,
+}) => {
   const url = teamId
     ? `/dashboard/teams/${teamId}/templates`
     : `/dashboard/templates`;

packages/app/src/app/pages/Patron/PricingModal/PricingChoice/ChangeSubscription/index.tsx

@@ -101,7 +101,7 @@ export const ChangeSubscription: React.FC<IChangeSubscriptionProps> = ({
         <LinkButton
           onClick={e => {
             e.preventDefault();
-            modalOpened({ modal: 'preferences' });
+            modalOpened({ modal: 'preferences', itemId: 'paymentInfo' });
           }}
         >
           user preferences

packages/app/src/app/pages/Patron/index.tsx

@@ -11,7 +11,14 @@ import { PricingModal } from './PricingModal';
 import { Content } from './elements';
 
 const Patron: React.FC = () => {
-  const { actions } = useOvermind();
+  const {
+    state: { user },
+    actions,
+  } = useOvermind();
+
+  if (user && user.subscription && user.subscription.plan === 'pro') {
+    location.href = '/pro';
+  }
 
   useEffect(() => {
     actions.patron.patronMounted();

packages/app/src/app/pages/Pro/checkout-form.tsx

@@ -0,0 +1,184 @@
+/**
+ * Adapted from app/components/CheckoutForm
+ * that used to be used in Patron page
+ */
+
+import React from 'react';
+import { format } from 'date-fns';
+import {
+  injectStripe,
+  CardElement,
+  ReactStripeElements,
+} from 'react-stripe-elements';
+
+import { logError } from '@codesandbox/common/lib/utils/analytics';
+
+import {
+  CardContainer,
+  Form,
+  FormField,
+  Label,
+  Input,
+  Button,
+  ErrorText,
+  HelpText,
+} from './elements';
+
+interface Props {
+  name: string;
+  isLoading: boolean;
+  subscribe: (params: { token: string; coupon: string }) => void;
+  stripe?: ReactStripeElements.StripeProps;
+  error?: Error | string;
+  hasCoupon?: boolean;
+  disabled?: boolean;
+}
+
+interface State {
+  errors: {
+    name?: string;
+    stripe?: string;
+  };
+  name: string;
+  coupon: string;
+  loading: boolean;
+}
+
+class CheckoutFormComponent extends React.PureComponent<Props, State> {
+  state: State = {
+    errors: {},
+    name: this.props.name || '',
+    coupon: '',
+    loading: false,
+  };
+
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
+    if (nextProps.name !== this.props.name) {
+      this.setState({ errors: {}, name: nextProps.name });
+    }
+  }
+
+  setName = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e) {
+      this.setState({ errors: {}, name: e.target.value });
+    }
+  };
+
+  setCoupon = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e) {
+      this.setState({ errors: {}, coupon: e.target.value });
+    }
+  };
+
+  handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!this.state.name) {
+      return this.setState({ errors: { name: 'Please provide a name ' } });
+    }
+
+    this.setState({ loading: true, errors: {} });
+
+    // Within the context of `Elements`, this call to createToken knows which Element to
+    // tokenize, since there's only one in this group.
+    const { token, error } = await this.props.stripe.createToken({
+      name: this.state.name,
+    });
+    if (error) {
+      return this.setState({
+        loading: false,
+        errors: {
+          stripe: error.message,
+        },
+      });
+    }
+
+    try {
+      await this.props.subscribe({
+        token: token.id,
+        coupon: this.state.coupon,
+      });
+    } catch (err) {
+      logError(err);
+
+      return this.setState({
+        loading: false,
+        errors: {
+          stripe: err.message,
+        },
+      });
+    }
+
+    return this.setState({
+      loading: false,
+    });
+  };
+
+  render() {
+    const { isLoading, error, hasCoupon = false, disabled } = this.props;
+    const { errors, loading: stateLoading } = this.state;
+
+    const loading = isLoading || stateLoading;
+
+    const stripeError = errors.stripe || error;
+
+    return (
+      <Form onSubmit={this.handleSubmit} disabled={disabled}>
+        <FormField>
+          <Label htmlFor="cardholder-name">Cardholder Name</Label>
+          <Input
+            id="cardholder-name"
+            value={this.state.name}
+            onChange={this.setName}
+            placeholder="Please enter your name"
+            disabled={disabled}
+          />
+          {errors.name != null && <ErrorText>{errors.name}</ErrorText>}
+        </FormField>
+
+        <FormField>
+          <Label htmlFor="card-number">Card</Label>
+
+          <CardContainer>
+            <CardElement
+              id="card-number"
+              style={{ base: { color: 'white', fontWeight: '500' } }}
+              disabled={disabled}
+            />
+          </CardContainer>
+          {stripeError != null && <ErrorText>{stripeError}</ErrorText>}
+        </FormField>
+
+        {hasCoupon && (
+          <FormField>
+            <Label htmlFor="coupon">Coupon</Label>
+            <div>
+              <Input
+                id="coupon"
+                value={this.state.coupon}
+                onChange={this.setCoupon}
+                placeholder="Coupon or Discount Code"
+                disabled={disabled}
+              />
+            </div>
+          </FormField>
+        )}
+
+        <Button
+          type="submit"
+          disabled={loading || disabled}
+          style={{ marginTop: '1rem', width: 300 }}
+        >
+          {loading ? 'Creating Subscription...' : 'Subscribe to Pro'}
+        </Button>
+
+        <HelpText>
+          You will be billed now and on the <b>{format(new Date(), 'do')}</b> of
+          each month thereafter. You can cancel or change your subscription at
+          any time.
+        </HelpText>
+      </Form>
+    );
+  }
+}
+
+export const CheckoutForm = injectStripe(CheckoutFormComponent);