From e836ee100800097a1d90ca7b7b12753608af14f3 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Mon, 17 Feb 2025 18:09:50 -0300
Subject: [PATCH] Display pending task routes

---
 .../ui/components/PendingTask/PendingTask.tsx | 50 +++++++++++++++++++
 .../src/ui/components/PendingTask/index.ts    |  1 +
 .../src/ui/components/SignIn/SignIn.tsx       |  2 +
 .../src/ui/components/SignUp/SignUp.tsx       |  2 +
 4 files changed, 55 insertions(+)
 create mode 100644 packages/clerk-js/src/ui/components/PendingTask/PendingTask.tsx
 create mode 100644 packages/clerk-js/src/ui/components/PendingTask/index.ts

diff --git a/packages/clerk-js/src/ui/components/PendingTask/PendingTask.tsx b/packages/clerk-js/src/ui/components/PendingTask/PendingTask.tsx
new file mode 100644
index 00000000000..7f46e52f584
--- /dev/null
+++ b/packages/clerk-js/src/ui/components/PendingTask/PendingTask.tsx
@@ -0,0 +1,50 @@
+import { useSessionContext } from '@clerk/shared/react/index';
+import type { SessionTasks } from '@clerk/types';
+import type { ComponentType } from 'react';
+import { withRedirectToAfterSignIn } from 'ui/common';
+
+import { Route } from '../../../ui/router';
+import { OrganizationList } from '../OrganizationList';
+
+const paths: Record<keyof SessionTasks, string> = {
+  orgs: 'select-organization',
+};
+
+const TaskRegistry: Record<keyof SessionTasks, ComponentType> = {
+  orgs: OrganizationList,
+};
+
+function usePendingTask() {
+  const session = useSessionContext();
+
+  if (!session) {
+    return null;
+  }
+
+  const [pendingTask] = Object.entries(session.tasks ?? {}).map(([task, value]) => ({
+    task,
+    ...value,
+  }));
+
+  return pendingTask;
+}
+
+export function _PendingTask() {
+  const pendingTask = usePendingTask();
+
+  if (!pendingTask) {
+    return null;
+  }
+
+  const Task = TaskRegistry['orgs'];
+  // @ts-ignore
+  const path = paths[pendingTask.task];
+
+  return (
+    <Route path={path}>
+      <Task />
+    </Route>
+  );
+}
+
+export const PendingTask = withRedirectToAfterSignIn(_PendingTask);
diff --git a/packages/clerk-js/src/ui/components/PendingTask/index.ts b/packages/clerk-js/src/ui/components/PendingTask/index.ts
new file mode 100644
index 00000000000..fd98317a8c6
--- /dev/null
+++ b/packages/clerk-js/src/ui/components/PendingTask/index.ts
@@ -0,0 +1 @@
+export * from './PendingTask';
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx
index a767b6dbf1e..c5ffbb7ebb5 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignIn.tsx
@@ -14,6 +14,7 @@ import {
 } from '../../contexts';
 import { Flow } from '../../customizables';
 import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
+import { PendingTask } from '../PendingTask';
 import { SignUpContinue } from '../SignUp/SignUpContinue';
 import { SignUpSSOCallback } from '../SignUp/SignUpSSOCallback';
 import { SignUpStart } from '../SignUp/SignUpStart';
@@ -138,6 +139,7 @@ function SignInRoutes(): JSX.Element {
         <Route>
           <RedirectToSignIn />
         </Route>
+        <PendingTask />
       </Switch>
     </Flow.Root>
   );
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx
index 430ae2f53a9..88035c000e6 100644
--- a/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/SignUp.tsx
@@ -6,6 +6,7 @@ import { SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowC
 import { SignUpContext, useSignUpContext, withCoreSessionSwitchGuard } from '../../contexts';
 import { Flow } from '../../customizables';
 import { Route, Switch, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
+import { PendingTask } from '../PendingTask';
 import { SignUpContinue } from './SignUpContinue';
 import { SignUpSSOCallback } from './SignUpSSOCallback';
 import { SignUpStart } from './SignUpStart';
@@ -80,6 +81,7 @@ function SignUpRoutes(): JSX.Element {
         <Route>
           <RedirectToSignUp />
         </Route>
+        <PendingTask />
       </Switch>
     </Flow.Root>
   );