Merge pull request #1 from codesandbox/pr-christianalfoni-2774

Fixes import

Author: alanhoskins

.github/PULL_REQUEST_TEMPLATE.md

@@ -18,7 +18,7 @@ merge of your pull request!
 
 <!-- if this is a feature change -->
 
-## What steps did you take to test this? This is required before we can merge.
+## What steps did you take to test this? This is required before we can merge, make sure to test the flow you've updated.
 
 1. Step A
 2. Step B

packages/app/src/app/overmind/internalActions.ts

@@ -98,10 +98,12 @@ export const signInGithub: Action<
   { useExtraScopes: boolean },
   Promise<string>
 > = ({ effects }, options) => {
-  const popup = effects.browser.openPopup(
-    `/auth/github${options.useExtraScopes ? '?scope=user:email,repo' : ''}`,
-    'sign in'
-  );
+  const authPath =
+    process.env.LOCAL_SERVER || 'STAGING_BRANCH' in process.env
+      ? '/auth/dev'
+      : `/auth/github${options.useExtraScopes ? '?scope=user:email,repo' : ''}`;
+
+  const popup = effects.browser.openPopup(authPath, 'sign in');
 
   return effects.browser
     .waitForMessage<{ jwt: string }>('signin')

packages/app/src/app/pages/DevAuth/elements.ts

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  height: 100%;
+  width: 100%;
+  margin: 1rem;
+  margin-top: 10%;
+`;

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

@@ -0,0 +1,87 @@
+import React from 'react';
+
+import { Title } from 'app/components/Title';
+import { SubTitle } from 'app/components/SubTitle';
+import Input from '@codesandbox/common/lib/components/Input';
+import { Button } from '@codesandbox/common/lib/components/Button';
+import { protocolAndHost } from '@codesandbox/common/lib/utils/url-generator';
+
+import { Container } from './elements';
+
+export const DevAuthPage = () => {
+  const [authCode, setAuthCode] = React.useState('');
+  const [error, setError] = React.useState<string | null>(null);
+
+  const getJWTToken = () => {
+    setError(null);
+    let ok = true;
+    fetch(`/api/v1/auth/verify/${authCode}`)
+      .then(res => {
+        ok = res.ok;
+        return res.json();
+      })
+      .then(res => {
+        if (!ok) {
+          throw new Error(res.errors.detail[0]);
+        }
+        if (
+          window.opener &&
+          window.opener.location.origin === window.location.origin
+        ) {
+          window.opener.postMessage(
+            {
+              type: 'signin',
+              data: {
+                jwt: res.data.token,
+              },
+            },
+            protocolAndHost()
+          );
+        }
+      })
+      .catch(e => {
+        setError(e.message);
+      });
+  };
+
+  return (
+    <Container>
+      <Title>Developer Sign In</Title>
+      <SubTitle style={{ width: 800 }}>
+        Please enter the token you get from{' '}
+        <a
+          href="https://codesandbox.io/cli/login"
+          target="popup"
+          rel="noreferrer noopener"
+          onClick={e => {
+            e.preventDefault();
+            window.open(
+              'https://codesandbox.io/cli/login',
+              'popup',
+              'width=600,height=600'
+            );
+            return false;
+          }}
+        >
+          here
+        </a>
+        . This token will sign you in with your account from codesandbox.io.
+      </SubTitle>
+      <div
+        style={{ display: 'flex', justifyContent: 'center', marginTop: '2rem' }}
+      >
+        <Input
+          style={{ width: 600, fontSize: '1.5rem' }}
+          placeholder="Auth Code"
+          value={authCode}
+          onChange={e => {
+            setAuthCode(e.target.value);
+          }}
+        />
+        <Button onClick={getJWTToken}>Submit</Button>
+      </div>
+
+      {error && <div style={{ marginTop: '1rem' }}>Error: {error}</div>}
+    </Container>
+  );
+};

packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/PaymentInfo.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+import { SubscribeForm } from 'app/components/SubscribeForm';
+import { useOvermind } from 'app/overmind';
+import { Card } from './Card';
+import { Title, Subheading } from '../elements';
+import { Container, CustomSubHeading } from './elements';
+
+export const PaymentInfo: React.FunctionComponent = () => {
+  const {
+    state: {
+      preferences: {
+        paymentDetailError,
+        paymentDetails: paymentDetailsFromHooks,
+        isLoadingPaymentDetails,
+      },
+    },
+    actions: {
+      preferences: { paymentDetailsRequested, paymentDetailsUpdated },
+    },
+  } = useOvermind();
+  useEffect(() => {
+    paymentDetailsRequested();
+  }, [paymentDetailsRequested]);
+
+  const updatePaymentDetails = ({ token }) => {
+    paymentDetailsUpdated({ token });
+  };
+
+  const paymentDetails = () => {
+    const { last4, name, brand } = paymentDetailsFromHooks;
+    if (paymentDetailError)
+      return <div>An error occurred: {paymentDetailError}</div>;
+
+    return (
+      <div>
+        <Subheading>Current card</Subheading>
+        <Card last4={last4} name={name} brand={brand} />
+
+        <CustomSubHeading>Update card info</CustomSubHeading>
+        <SubscribeForm
+          buttonName="Update"
+          loadingText="Updating Card Info..."
+          name={name}
+          subscribe={updatePaymentDetails}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <Container>
+      <Title>Payment Info</Title>
+      {isLoadingPaymentDetails ? (
+        <div>Loading payment details...</div>
+      ) : (
+        paymentDetails()
+      )}
+    </Container>
+  );
+};

packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/elements.ts

@@ -1,6 +1,11 @@
 import styled from 'styled-components';
+import { Subheading } from '../elements';
 
 export const Container = styled.div`
   font-weight: 400;
   color: rgba(255, 255, 255, 0.6);
 `;
+
+export const CustomSubHeading = styled(Subheading)`
+  margin-top: 2rem;
+`;

packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.ts

@@ -0,0 +1,3 @@
+import { PaymentInfo } from './PaymentInfo';
+
+export default PaymentInfo;

packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.tsx

@@ -17,7 +17,7 @@ import { Appearance } from './Appearance';
 import { EditorSettings } from './EditorPageSettings/EditorSettings';
 import { PreviewSettings } from './EditorPageSettings/PreviewSettings';
 import { CodeFormatting } from './CodeFormatting';
-import { PaymentInfo } from './PaymentInfo';
+import PaymentInfo from './PaymentInfo';
 import { Integrations } from './Integrations';
 import { Badges } from './Badges';
 import { Experiments } from './Experiments';

packages/app/src/app/pages/common/Modals/PreferencesModal/index.tsx

@@ -1,38 +1,38 @@
-import React, { Component } from 'react';
+import getTemplateDefinition from '@codesandbox/common/lib/templates';
+import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json';
 import { inject, observer } from 'app/componentConnectors';
-import { ThemeProvider } from 'styled-components';
 import Modal from 'app/components/Modal';
+import getVSCodeTheme from 'app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme';
 import Loadable from 'app/utils/Loadable';
 import { templateColor } from 'app/utils/template-color';
-import getTemplateDefinition from '@codesandbox/common/lib/templates';
-import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json';
-import getVSCodeTheme from 'app/src/app/pages/Sandbox/Editor/utils/get-vscode-theme';
+import React, { Component } from 'react';
+import { ThemeProvider } from 'styled-components';
 
-import NewSandbox from './NewSandbox';
-import PreferencesModal from './PreferencesModal';
-import DeleteSandboxModal from './DeleteSandboxModal';
-import DeleteDeploymentModal from './DeleteDeploymentModal';
-import ShareModal from './ShareModal';
-import DeploymentModal from './DeploymentModal';
-import ExportGitHubModal from './ExportGitHubModal';
 import CommitModal from './CommitModal';
-import PRModal from './PRModal';
-import SelectSandboxModal from './SelectSandboxModal';
-import SearchDependenciesModal from './SearchDependenciesModal';
+import DeleteDeploymentModal from './DeleteDeploymentModal';
 import DeleteProfileSandboxModal from './DeleteProfileSandboxModal';
+import DeleteSandboxModal from './DeleteSandboxModal';
+import DeploymentModal from './DeploymentModal';
 import EmptyTrash from './EmptyTrash';
+import ExportGitHubModal from './ExportGitHubModal';
+import FeedbackModal from './FeedbackModal';
+import { ForkServerModal } from './ForkServerModal';
 import LiveSessionEnded from './LiveSessionEnded';
 import LiveSessionVersionMismatch from './LiveSessionVersionMismatch';
-import UploadModal from './UploadModal';
-import StorageManagementModal from './StorageManagementModal';
-import ForkServerModal from './ForkServerModal';
-import PrivacyServerWarning from './PrivacyServerWarning';
-import PickSandboxModal from './PickSandboxModal';
-import FeedbackModal from './FeedbackModal';
 import NetlifyLogs from './NetlifyLogs';
+import NewSandbox from './NewSandbox';
+import PickSandboxModal from './PickSandboxModal';
+import PreferencesModal from './PreferencesModal';
+import PrivacyServerWarning from './PrivacyServerWarning';
+import PRModal from './PRModal';
+import SearchDependenciesModal from './SearchDependenciesModal';
+import SelectSandboxModal from './SelectSandboxModal';
+import ShareModal from './ShareModal';
 // eslint-disable-next-line
 import SignInForTemplates from './SignInForTemplates/index.ts';
+import StorageManagementModal from './StorageManagementModal';
 import { SurveyModal } from './SurveyModal';
+import UploadModal from './UploadModal';
 
 const MoveSandboxFolderModal = Loadable(() =>
   import('./MoveSandboxFolderModal')