Stripe enhancements (codesandbox#2081)

* Update Stripe

* Add coupon support

* Add message about updating payment method

* Update CircleCI cache

* Update cache - again

* 🧹 Cleanup Apply Coding Conventions, change noCoupon to hasCoupon

All stylistic changes to be consistent with the latest refactors. No logic changes.

* Style changes

* TypeScript conversions

Author: CompuIves

.circleci/config.yml

@@ -6,21 +6,21 @@ version: 2.1
 
 aliases:
   - &restore_repo_cache
-    key: v17-repo-{{ .Environment.CIRCLE_SHA1 }}
+    key: v20-repo-{{ .Environment.CIRCLE_SHA1 }}
 
   - &save_repo_cache
-    key: v17-repo-{{ .Environment.CIRCLE_SHA1 }}
+    key: v20-repo-{{ .Environment.CIRCLE_SHA1 }}
     paths:
       - ~/codesandbox-client
 
   - &restore_deps_cache
     keys:
-      - v17-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
-      - v17-dependency-cache-{{ .Branch }}
-      - v17-dependency-cache
+      - v20-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+      - v20-dependency-cache-{{ .Branch }}
+      - v20-dependency-cache
 
   - &save_deps_cache
-    key: v17-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+    key: v20-dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
     paths:
       - node_modules
       - packages/app/node_modules
@@ -39,29 +39,29 @@ aliases:
 
   - &restore_standalone_deps_cache
     keys:
-      - v17-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
-      - v17-standalone-dependency-cache-{{ .Branch }}
-      - v17-standalone-dependency-cache
+      - v20-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
+      - v20-standalone-dependency-cache-{{ .Branch }}
+      - v20-standalone-dependency-cache
 
   - &save_standalone_deps_cache
-    key: v17-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
+    key: v20-standalone-dependency-cache-{{ .Branch }}-{{ checksum "standalone-packages/codesandbox-browserfs/yarn.lock" }}
     paths:
       - standalone-packages/codesandbox-browserfs/node_modules
 
   - &restore_prod_build_cache
-    key: v17-prod-app-build-cache-master
+    key: v20-prod-app-build-cache-master
 
   - &restore_prod_cache
-    key: v17-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
+    key: v20-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
 
   - &save_prod_app_cache
-    key: v17-prod-app-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
+    key: v20-prod-app-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
     paths:
       - ./packages/app/www
       - ./packages/homepage/.cache
 
   - &save_prod_cache
-    key: v17-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
+    key: v20-prod-build-cache-{{ .Environment.CIRCLE_BRANCH }}-{{ .Environment.CIRCLE_SHA1 }}
     paths:
       - ./www
 

packages/app/src/app/components/LinkButton/LinkButton.tsx

@@ -0,0 +1,20 @@
+import styled, { css } from 'styled-components';
+
+export const LinkButton = styled.button`
+  ${({ theme }) => css`
+    display: inline-block;
+    padding: 0;
+    margin: 0;
+    border: none;
+    background-color: transparent;
+    color: ${theme.secondary};
+    outline: none;
+    text-decoration: underline;
+    transition: 0.3s ease color;
+    cursor: pointer;
+
+    &:hover {
+      color: ${theme.secondary.lighten(0.1)};
+    }
+  `}
+`;

packages/app/src/app/components/LinkButton/index.ts

@@ -0,0 +1 @@
+export { LinkButton } from './LinkButton';

packages/app/src/app/components/Preview/DevTools/Tests/index.tsx

@@ -67,26 +67,29 @@ type State = {
   watching: boolean;
 };
 
-type SandboxMessage = { type: 'test' | 'done' } & (
-  | InitializedTestsMessage
+type SandboxMessage =
   | CompilationDoneMessage
-  | TestCountMessage
-  | TotalTestStartMessage
-  | TotalTestEndMessage
-  | AddFileMessage
-  | RemoveFileMessage
-  | FileErrorMessage
-  | DescribeStartMessage
-  | DescribeEndMessage
-  | AddTestMessage
-  | TestStartMessage
-  | TestEndMessage);
+  | ({ type: 'test' } & (
+      | InitializedTestsMessage
+      | TestCountMessage
+      | TotalTestStartMessage
+      | TotalTestEndMessage
+      | AddFileMessage
+      | RemoveFileMessage
+      | FileErrorMessage
+      | DescribeStartMessage
+      | DescribeEndMessage
+      | AddTestMessage
+      | TestStartMessage
+      | TestEndMessage
+    ));
 
 interface InitializedTestsMessage {
   event: messages.INITIALIZE;
 }
 
 interface CompilationDoneMessage {
+  type: 'done';
   compilatonError: boolean;
 }
 
@@ -292,7 +295,7 @@ class Tests extends React.Component<DevToolProps, State> {
           );
           break;
         }
-        case messages.REMOVE_FILE: {
+        case 'remove_file': {
           this.setState(
             immer(this.state, state => {
               if (state.files[data.path]) {

…s/SubscribeForm/CheckoutForm/elements.js …s/SubscribeForm/CheckoutForm/elements.tspackages/app/src/app/components/SubscribeForm/CheckoutForm/elements.js renamed to packages/app/src/app/components/SubscribeForm/CheckoutForm/elements.ts packages/app/src/app/components/SubscribeForm/CheckoutForm/elements.js renamed to packages/app/src/app/components/SubscribeForm/CheckoutForm/elements.ts

@@ -2,28 +2,29 @@ import styled from 'styled-components';
 import Input from '@codesandbox/common/lib/components/Input';
 
 export const CardContainer = styled.div`
-  background-color: rgba(0, 0, 0, 0.3);
   padding: 0.5rem;
   margin-top: 0.25rem;
+  margin-bottom: 0.5rem;
   border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.3);
 `;
 
-export const NameInput = styled(Input)`
+export const StripeInput = styled(Input)`
   width: 100%;
-  font-size: 0.875rem;
+  height: 32.8px;
   padding: 0.5rem;
   margin-top: 0.25rem;
   margin-bottom: 0.5rem;
-  height: 32.8px;
+  font-size: 0.875rem;
 `;
 
 export const ErrorText = styled.div`
+  margin: 0.25rem 0;
   color: ${props => props.theme.red};
   font-size: 0.875rem;
-  margin: 0.25rem 0;
 `;
 
 export const Label = styled.label`
-  color: rgba(255, 255, 255, 0.5);
   font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.5);
 `;

…ents/SubscribeForm/CheckoutForm/index.js …nts/SubscribeForm/CheckoutForm/index.tsxpackages/app/src/app/components/SubscribeForm/CheckoutForm/index.js renamed to packages/app/src/app/components/SubscribeForm/CheckoutForm/index.tsx packages/app/src/app/components/SubscribeForm/CheckoutForm/index.js renamed to packages/app/src/app/components/SubscribeForm/CheckoutForm/index.tsx

@@ -3,32 +3,66 @@ import { injectStripe, CardElement } from 'react-stripe-elements';
 import { Button } from '@codesandbox/common/lib/components/Button';
 import { logError } from '@codesandbox/common/lib/utils/analytics';
 
-import { CardContainer, NameInput, ErrorText, Label } from './elements';
+import { CardContainer, StripeInput, ErrorText, Label } from './elements';
+
+interface IStripe {
+  createToken: (params: {
+    name: string;
+  }) => Promise<{
+    token: { id: string };
+    error?: Error;
+  }>;
+}
 
-class CheckoutForm extends React.PureComponent {
-  constructor(props) {
-    super(props);
+interface Props {
+  name: string;
+  stripe: IStripe;
+  buttonName: string;
+  loadingText: string;
+  isLoading: boolean;
+  error?: Error;
+  subscribe: (params: { token: string; coupon: string }) => void;
+  hasCoupon?: boolean;
+}
 
-    this.state = {
-      errors: {},
-      name: props.name || '',
-    };
-  }
+interface State {
+  errors: {
+    name?: string;
+    stripe?: string;
+  };
+  name: string;
+  coupon: string;
+  loading: boolean;
+}
+
+class CheckoutForm extends React.PureComponent<Props, State> {
+  state: State = {
+    errors: {},
+    name: this.props.name || '',
+    coupon: '',
+    loading: false,
+  };
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps: Props) {
     if (nextProps.name !== this.props.name) {
       this.setState({ errors: {}, name: nextProps.name });
     }
   }
 
-  setName = e => {
+  setName = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e) {
       this.setState({ errors: {}, name: e.target.value });
     }
   };
 
-  handleSubmit = async ev => {
-    ev.preventDefault();
+  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 ' } });
     }
@@ -50,7 +84,10 @@ class CheckoutForm extends React.PureComponent {
     }
 
     try {
-      await this.props.subscribe(token.id);
+      await this.props.subscribe({
+        token: token.id,
+        coupon: this.state.coupon,
+      });
     } catch (e) {
       logError(e);
 
@@ -68,7 +105,13 @@ class CheckoutForm extends React.PureComponent {
   };
 
   render() {
-    const { buttonName, loadingText, isLoading, error } = this.props;
+    const {
+      buttonName,
+      loadingText,
+      isLoading,
+      error,
+      hasCoupon = false,
+    } = this.props;
     const { errors, loading: stateLoading } = this.state;
 
     const loading = isLoading || stateLoading;
@@ -80,10 +123,10 @@ class CheckoutForm extends React.PureComponent {
         <Label>Cardholder Name</Label>
         {errors.name != null && <ErrorText>{errors.name}</ErrorText>}
         <div>
-          <NameInput
+          <StripeInput
             value={this.state.name}
             onChange={this.setName}
-            error={errors.name}
+            error={!!errors.name}
             placeholder="Please enter your name"
           />
         </div>
@@ -96,6 +139,19 @@ class CheckoutForm extends React.PureComponent {
           />
         </CardContainer>
 
+        {hasCoupon && (
+          <>
+            <Label>Coupon</Label>
+            <div>
+              <StripeInput
+                value={this.state.coupon}
+                onChange={this.setCoupon}
+                placeholder="Coupon or Discount Code"
+              />
+            </div>
+          </>
+        )}
+
         <Button
           type="submit"
           disabled={loading}

…app/components/SubscribeForm/elements.js …app/components/SubscribeForm/elements.tspackages/app/src/app/components/SubscribeForm/elements.js renamed to packages/app/src/app/components/SubscribeForm/elements.ts packages/app/src/app/components/SubscribeForm/elements.js renamed to packages/app/src/app/components/SubscribeForm/elements.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { StripeProvider, Elements } from 'react-stripe-elements';
+import { STRIPE_API_KEY } from '@codesandbox/common/lib/utils/config';
+import CheckoutForm from './CheckoutForm';
+
+import { Container } from './elements';
+
+interface Props {
+  name: string;
+  subscribe: (params: { token: string; coupon: string }) => void;
+  loadingText?: string;
+  buttonName?: string;
+  isLoading?: boolean;
+  error?: string;
+  hasCoupon?: boolean;
+}
+
+const SubscribeForm = ({
+  name,
+  subscribe,
+  loadingText = 'Creating Subscription...',
+  buttonName = 'Subscribe',
+  isLoading = false,
+  error,
+  hasCoupon,
+}: Props) => (
+  <Container>
+    <StripeProvider apiKey={STRIPE_API_KEY}>
+      <Elements>
+        <CheckoutForm
+          buttonName={buttonName}
+          loadingText={loadingText}
+          subscribe={subscribe}
+          name={name}
+          isLoading={isLoading}
+          error={error}
+          hasCoupon={hasCoupon}
+        />
+      </Elements>
+    </StripeProvider>
+  </Container>
+);
+
+export default SubscribeForm;