Combine Sign-In/Sign-Up and Teacher Account Required gates into distinct pages

apps/i18n/common/en_us.json

@@ -30,6 +30,7 @@
   "accountInformation_updateSuccess": "Account information successfully updated.",
   "accountInformation_emailUpdateSuccess": "Email successfully updated.",
   "accountExistingAccountCardContentWorkshopEnroll": "You’ll need to sign in to your Code.org account to enroll in this workshop.",
+  "accountExistingAccountCardDefaultDescription": "You'll need to sign in to your Code.org account to access this page.",
   "accountKeepStudentAccountCardTitle": "Keep my student account",
   "accountKeepStudentAccountCardContent": "Keep your student account and cancel your enrollment in this workshop.",
   "accountKeepStudentAccountCardContentGeneric": "You will keep your student account and exit.",
@@ -42,11 +43,13 @@
   "accountNeededJoinSectionCreateAccountCardContent": "You'll need to create an account on Code.org to join this section.",
   "accountNeededJoinSectionSignInCardContent": "You'll need to sign in to your Code.org account to to join this section.",
   "accountNewAccountCardContentWorkshopEnroll": "You’ll need to create an account on Code.org to enroll in this workshop.",
+  "accountNewAccountCardDefaultDescription": "You'll need to create an account on Code.org to access this page.",
   "accountSwitchTeacherAccountCardTitle": "Switch to a teacher account",
   "accountSwitchTeacherAccountCardContent": "Your account will be switched to a teacher account and you will be automatically enrolled.",
   "accountSwitchTeacherAccountCardContentGeneric": "Your account will be switched to a teacher account.",
   "accountSwitchTeacherAccountCardButton": "Switch account type",
   "accountWelcomeBannerContentWorkshopEnroll": "To enroll in workshops, you’ll need a Code.org educator account.",
+  "accountWelcomeBannerDefaultDescription": "To access this page, you'll need a Code.org account.",
   "accountWelcomeBannerHeaderLabel": "Continue with a Code.org account",
   "achievements": "Achievements",
   "activity": "Activity",

apps/src/sites/studio/pages/gates/logged_out.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import {queryParams} from '@cdo/apps/code-studio/utils';
+import LinkAccountPage from '@cdo/apps/templates/gates/LinkAccountPage';
+
+document.addEventListener('DOMContentLoaded', function () {
+  const urlParams = queryParams();
+  const returnToUrlParam = urlParams['return_to']
+    ? `?user_return_to=${urlParams['return_to']}`
+    : '';
+
+  ReactDOM.render(
+    <LinkAccountPage
+      sourcePage={urlParams['source_page']}
+      newAccountUrl={`/users/sign_up/account_type${returnToUrlParam}`}
+      existingAccountUrl={`/users/sign_in${returnToUrlParam}`}
+    />,
+    document.getElementById('logged-out-page')
+  );
+});

apps/src/sites/studio/pages/gates/teacher_account_required.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import {queryParams} from '@cdo/apps/code-studio/utils';
+import TeacherAccountRequiredPage from '@cdo/apps/templates/gates/TeacherAccountRequiredPage';
+
+document.addEventListener('DOMContentLoaded', function () {
+  const urlParams = queryParams();
+  const editAccountLink = `/users/edit${
+    urlParams['return_to'] ? `?user_return_to=${urlParams['return_to']}` : ''
+  }#change-user-type-modal-form`;
+
+  ReactDOM.render(
+    <TeacherAccountRequiredPage
+      sourcePage={urlParams['source_page']}
+      editAccountLink={editAccountLink}
+    />,
+    document.getElementById('teacher-account-required-page')
+  );
+});

apps/src/templates/gates/LinkAccountPage.tsx

@@ -0,0 +1,85 @@
+import React, {useEffect} from 'react';
+
+import {EVENTS, PLATFORMS} from '@cdo/apps/metrics/AnalyticsConstants';
+import analyticsReporter from '@cdo/apps/metrics/AnalyticsReporter';
+import AccountBanner from '@cdo/apps/templates/account/AccountBanner';
+import AccountCard from '@cdo/apps/templates/account/AccountCard';
+import i18n from '@cdo/locale';
+
+import styles from './gate-pages.module.scss';
+
+const SOURCE_PAGE_TEXT: {
+  [key: string]: {
+    headerDesc: string;
+    newAccountDesc: string;
+    existingAccountDesc: string;
+  };
+} = {
+  default: {
+    headerDesc: i18n.accountWelcomeBannerDefaultDescription(),
+    newAccountDesc: i18n.accountNewAccountCardDefaultDescription(),
+    existingAccountDesc: i18n.accountExistingAccountCardDefaultDescription(),
+  },
+  'workshop enroll': {
+    headerDesc: i18n.accountWelcomeBannerContentWorkshopEnroll(),
+    newAccountDesc: i18n.accountNewAccountCardContentWorkshopEnroll(),
+    existingAccountDesc: i18n.accountExistingAccountCardContentWorkshopEnroll(),
+  },
+  'join section': {
+    headerDesc: i18n.accountNeededJoinSectionWithoutCodeBannerLabel(),
+    newAccountDesc: i18n.accountNeededJoinSectionCreateAccountCardContent(),
+    existingAccountDesc: i18n.accountNeededJoinSectionSignInCardContent(),
+  },
+};
+
+const LinkAccountPage: React.FunctionComponent<{
+  sourcePage: string;
+  newAccountUrl: string;
+  existingAccountUrl: string;
+}> = ({sourcePage, newAccountUrl, existingAccountUrl}) => {
+  useEffect(() => {
+    analyticsReporter.sendEvent(
+      EVENTS.LINK_ACCOUNT_PAGE_VISITED_EVENT,
+      {source: sourcePage},
+      PLATFORMS.BOTH
+    );
+  }, [sourcePage]);
+
+  const sourcePageTextKey = Object.keys(SOURCE_PAGE_TEXT).includes(sourcePage)
+    ? sourcePage
+    : 'default';
+
+  return (
+    <main>
+      <div className={styles.contentContainer}>
+        <AccountBanner
+          heading={i18n.accountWelcomeBannerHeaderLabel()}
+          desc={SOURCE_PAGE_TEXT[sourcePageTextKey].headerDesc}
+          showLogo={true}
+        />
+        <div className={styles.cardContainer}>
+          <AccountCard
+            id={'new-account-card'}
+            icon={'user-plus'}
+            title={i18n.ltiLinkAccountNewAccountCardHeaderLabel()}
+            content={SOURCE_PAGE_TEXT[sourcePageTextKey].newAccountDesc}
+            buttonText={i18n.createAccount()}
+            buttonType="secondary"
+            href={newAccountUrl}
+          />
+          <AccountCard
+            id={'existing-account-card'}
+            icon={'user-check'}
+            title={i18n.ltiLinkAccountExistingAccountCardHeaderLabel()}
+            content={SOURCE_PAGE_TEXT[sourcePageTextKey].existingAccountDesc}
+            buttonText={i18n.ltiLinkAccountExistingAccountCardActionLabel()}
+            buttonType="primary"
+            href={existingAccountUrl}
+          />
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default LinkAccountPage;

apps/src/accounts/StudentUserTypeChangePrompt/index.tsx → apps/src/templates/gates/TeacherAccountRequiredPage.tsx

@@ -6,18 +6,19 @@ import AccountBanner from '@cdo/apps/templates/account/AccountBanner';
 import AccountCard from '@cdo/apps/templates/account/AccountCard';
 import i18n from '@cdo/locale';
 
-import styles from './style.module.scss';
+import styles from './gate-pages.module.scss';
 
-const StudentUserTypeChangePrompt: React.FunctionComponent<{
-  userReturnTo?: string;
-}> = ({userReturnTo}) => {
+const TeacherAccountRequiredPage: React.FunctionComponent<{
+  sourcePage: string;
+  editAccountLink: string;
+}> = ({sourcePage, editAccountLink}) => {
   useEffect(() => {
     analyticsReporter.sendEvent(
       EVENTS.UPGRADE_TO_TEACHER_ACCOUNT_PAGE_VISITED_EVENT,
-      {source: 'workshop enroll'},
+      {source: sourcePage},
       PLATFORMS.BOTH
     );
-  }, []);
+  }, [sourcePage]);
 
   return (
     <main>
@@ -44,16 +45,12 @@ const StudentUserTypeChangePrompt: React.FunctionComponent<{
             content={i18n.accountSwitchTeacherAccountCardContentGeneric()}
             buttonText={i18n.accountSwitchTeacherAccountCardButton()}
             buttonType="primary"
-            href={`/users/edit${
-              userReturnTo
-                ? `?user_return_to=${encodeURIComponent(userReturnTo)}`
-                : ''
-            }#change-user-type-modal-form`}
+            href={editAccountLink}
           />
         </div>
       </div>
     </main>
   );
 };
 
-export default StudentUserTypeChangePrompt;
+export default TeacherAccountRequiredPage;