feat: banner for editor migration (codesandbox#8465)

* feat: banner for editor migration

* fix variant

* fix: wording

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

@@ -14,7 +14,7 @@ import {
 import { createGlobalStyle, useTheme } from 'styled-components';
 import css from '@styled-system/css';
 
-import { PaymentPending } from 'app/components/StripeMessages';
+import { PaymentPending } from 'app/components/StripeMessages/PaymentPending';
 import { useWorkspaceSubscription } from 'app/hooks/useWorkspaceSubscription';
 import { useDashboardVisit } from 'app/hooks/useDashboardVisit';
 import { SubscriptionStatus } from 'app/graphql/types';

packages/app/src/app/pages/Sandbox/Editor/index.tsx

@@ -5,24 +5,20 @@ import VERSION from '@codesandbox/common/lib/version';
 import {
   ThemeProvider as ComponentsThemeProvider,
   Element,
+  MessageStripe,
   Stack,
 } from '@codesandbox/components';
 import { GenericCreate } from 'app/components/Create/GenericCreate';
-import {
-  RestrictedSandbox,
-  PaymentPending,
-} from 'app/components/StripeMessages';
+
 import VisuallyHidden from '@reach/visually-hidden';
 import css from '@styled-system/css';
 import { useActions, useReaction, useEffects, useAppState } from 'app/overmind';
 import { templateColor } from 'app/utils/template-color';
+import { useBetaSandboxEditor } from 'app/hooks/useBetaSandboxEditor';
 import React, { useEffect, useRef, useState } from 'react';
 import SplitPane from 'react-split-pane';
 import styled, { ThemeProvider } from 'styled-components';
 
-import { SubscriptionStatus } from 'app/graphql/types';
-import { UpgradeSSEToV2Stripe } from 'app/components/StripeMessages/UpgradeSSEToV2';
-import { useWorkspaceSubscription } from 'app/hooks/useWorkspaceSubscription';
 import { CreateBox } from 'app/components/Create/CreateBox';
 import { MainWorkspace as Content } from './Content';
 import { Container } from './elements';
@@ -63,7 +59,7 @@ export const Editor = ({ showModalOnTop }: EditorTypes) => {
     },
     customVSCodeTheme: null,
   });
-  const { subscription } = useWorkspaceSubscription();
+  const [betaSandboxEditor, setBetaSandboxEditor] = useBetaSandboxEditor();
 
   useEffect(() => {
     let timeout;
@@ -106,17 +102,12 @@ export const Editor = ({ showModalOnTop }: EditorTypes) => {
   }, [effects.vscode]);
 
   const sandbox = state.editor.currentSandbox;
-  const sandboxFromActiveWorkspace = sandbox?.team?.id === state.activeTeam;
-  const showRestrictedBanner =
-    sandboxFromActiveWorkspace && sandbox?.restricted;
 
   const hideNavigation =
     state.preferences.settings.zenMode && state.workspace.workspaceHidden;
   const { statusBar } = state.editor;
 
   const templateDef = sandbox && getTemplateDefinition(sandbox.template);
-  const showCloudSandboxConvert =
-    !state.environment.isOnPrem && state.hasLogIn && sandbox?.isSse;
 
   const getTopOffset = () => {
     if (state.preferences.settings.zenMode) {
@@ -129,11 +120,7 @@ export const Editor = ({ showModalOnTop }: EditorTypes) => {
     }
 
     // Has MessageStripe
-    if (
-      subscription?.status === SubscriptionStatus.Unpaid ||
-      showRestrictedBanner ||
-      showCloudSandboxConvert
-    ) {
+    if (!betaSandboxEditor) {
       // Header height + MessageStripe
       return 3 * 16 + 44;
     }
@@ -160,13 +147,27 @@ export const Editor = ({ showModalOnTop }: EditorTypes) => {
           <ComponentsThemeProvider theme={localState.theme.vscodeTheme}>
             {!state.hasLogIn && <FixedSignInBanner />}
 
-            {subscription?.status === SubscriptionStatus.Unpaid ||
-              (subscription?.status === SubscriptionStatus.Incomplete && (
-                <PaymentPending status={subscription?.status} />
-              ))}
+            {!betaSandboxEditor && (
+              <MessageStripe variant="warning" corners="straight">
+                This legacy editor will be deprecated on June 3rd.
+                <MessageStripe.Action
+                  as="a"
+                  target="_blank"
+                  href="https://codesandbox.io/blog/introducing-a-unified-development-platform"
+                >
+                  Learn more
+                </MessageStripe.Action>
+                <MessageStripe.Action
+                  onClick={() => {
+                    setBetaSandboxEditor(true);
+                    window.location.reload();
+                  }}
+                >
+                  Switch to the new editor
+                </MessageStripe.Action>
+              </MessageStripe>
+            )}
 
-            {showRestrictedBanner ? <RestrictedSandbox /> : null}
-            {showCloudSandboxConvert ? <UpgradeSSEToV2Stripe /> : null}
             <Header />
           </ComponentsThemeProvider>
         )}

packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/BetaSandboxEditor.tsx

@@ -1,54 +1,13 @@
-import {
-  Checkbox,
-  Element,
-  Text,
-  Button,
-  Stack,
-} from '@codesandbox/components';
-import React, { useState } from 'react';
+import { Stack, Text } from '@codesandbox/components';
+import React from 'react';
 
 import { useBetaSandboxEditor } from 'app/hooks/useBetaSandboxEditor';
-import { useAppState, useEffects } from 'app/overmind';
 import track from '@codesandbox/common/lib/utils/analytics';
-import { Textarea } from 'app/components/dashboard/Textarea';
 import { PaddedPreference } from '../elements';
 
-const FEEDBACK_OPTIONS_LABEL = {
-  buggyExperience: 'The experience is too buggy',
-  missingLiveRoom: 'Missing live room / classroom feature',
-  slowness: 'The editor feels slow',
-  navigability: 'I found the editor hard to navigate',
-  other: 'Something else',
-};
-
-const ROWS_REQUEST_URL =
-  'https://api.rows.com/v1beta1/spreadsheets/JFBFxxAPvXEYDY7cU9GCA/tables/15558697-182d-43f7-a1f2-6c293a557295/values/A:G:append';
-
-// @ts-ignore
-const ROWS_API_KEY = '1WcvujvzSSQ1GtbnoYvrGb8liPJFWud915ELpjwnVfV5';
-
 export const BetaSandboxEditor = () => {
-  const { user } = useAppState();
-  const effects = useEffects();
-
   const [betaSandboxEditor, setBetaSandboxEditor] = useBetaSandboxEditor();
 
-  const [feedbackMode, setFeedbackMode] = useState(false);
-  const [feedbackOptions, setFeedbackOptions] = useState({
-    buggyExperience: false,
-    missingLiveRoom: false,
-    slowness: false,
-    navigability: false,
-    other: false,
-    feedback: null,
-  });
-
-  const atLeastOneFeedbackOptionSelected = Object.values(feedbackOptions).some(
-    value => value
-  );
-
-  const isInProd = window.location.host === 'codesandbox.io';
-
   return (
     <>
       <PaddedPreference
@@ -57,7 +16,6 @@ export const BetaSandboxEditor = () => {
             track('Enable new sandbox editor - User preferences');
           } else {
             track('Disable new sandbox editor - User preferences');
-            setFeedbackMode(true);
           }
 
           setBetaSandboxEditor(!betaSandboxEditor);
@@ -68,98 +26,19 @@ export const BetaSandboxEditor = () => {
         value={betaSandboxEditor}
       />
 
-      <Text block marginTop={2} size={3} variant="muted">
-        Run your sandboxes in a faster and more stable editor.
-      </Text>
-
-      {feedbackMode && (
-        <Element
-          as="form"
-          onSubmit={ev => {
-            ev.preventDefault();
-            if (isInProd && ROWS_API_KEY) {
-              effects.http.post(
-                ROWS_REQUEST_URL,
-                {
-                  values: [[user?.id, ...Object.values(feedbackOptions)]],
-                },
-                {
-                  headers: {
-                    'Content-Type': 'application/json',
-                    Authorization: 'Bearer ' + ROWS_API_KEY,
-                  },
-                }
-              );
-            }
-
-            setFeedbackMode(false);
-            setFeedbackOptions({
-              buggyExperience: false,
-              missingLiveRoom: false,
-              slowness: false,
-              navigability: false,
-              other: false,
-              feedback: null,
-            });
-          }}
-          paddingTop={4}
-        >
-          <Stack
-            css={{
-              borderTop: '1px solid #343434',
-              paddingTop: '16px !important',
-            }}
-            direction="vertical"
-            gap={3}
-          >
-            <Text block size={3}>
-              Would you mind telling us what you dislike about the new editor?
-            </Text>
-            {Object.keys(FEEDBACK_OPTIONS_LABEL).map(key => (
-              <Checkbox
-                key={key}
-                checked={feedbackOptions[key]}
-                onChange={ev => {
-                  setFeedbackOptions({
-                    ...feedbackOptions,
-                    [key]: ev.target.checked,
-                  });
-                }}
-                label={
-                  <Text size={3} variant="muted">
-                    {FEEDBACK_OPTIONS_LABEL[key]}
-                  </Text>
-                }
-              />
-            ))}
-
-            {feedbackOptions.other === true && (
-              <Textarea
-                id="feedback"
-                name="feedback"
-                css={{ fontSize: '13px' }}
-                placeholder="Something seems wrong..."
-                value={feedbackOptions.feedback}
-                onChange={ev =>
-                  setFeedbackOptions({
-                    ...feedbackOptions,
-                    feedback: ev.target.value,
-                  })
-                }
-              />
-            )}
-
-            <Button
-              autoWidth
-              variant="primary"
-              disabled={!atLeastOneFeedbackOptionSelected}
-              type="submit"
-            >
-              Send feedback
-            </Button>
-          </Stack>
-        </Element>
-      )}
+      <Stack gap={3} direction="vertical">
+        <Text block marginTop={2} size={3} variant="muted">
+          Run your sandboxes in a faster and more stable editor.
+        </Text>
+
+        {!betaSandboxEditor && (
+          <Text color="#F5A8A8" block size={3}>
+            We are in the process of deprecating the legacy editor. <br />
+            The unified platform editor will become the default starting June
+            3rd.
+          </Text>
+        )}
+      </Stack>
     </>
   );
 };