fix: update session tasks flow to have single root

Author: iagodahlem

packages/clerk-js/src/ui/components/SessionTasks/index.tsx

@@ -51,7 +51,7 @@ function SessionTasksRoutes(): JSX.Element {
   const ctx = useSessionTasksContext();
 
   return (
-    <Flow.Root flow='tasks'>
+    <Flow.Root flow='sessionTasks'>
       <Switch>
         <Route path={INTERNAL_SESSION_TASK_ROUTE_BY_KEY['choose-organization']}>
           <TaskChooseOrganizationContext.Provider

packages/clerk-js/src/ui/components/SessionTasks/tasks/TaskChooseOrganization/index.tsx

@@ -33,31 +33,29 @@ const TaskChooseOrganizationInternal = () => {
   const identifier = user?.primaryEmailAddress?.emailAddress ?? user?.username;
 
   return (
-    <Flow.Root flow='taskChooseOrganization'>
+    <Flow.Part part='taskChooseOrganization'>
       <Card.Root>
-        <Flow.Part part={hasExistingResources ? 'chooseOrganization' : 'createOrganization'}>
-          <Card.Content sx={t => ({ padding: `${t.space.$8} ${t.space.$none} ${t.space.$none}`, gap: t.space.$7 })}>
-            {isLoading ? (
-              <Flex
-                direction={'row'}
-                align={'center'}
-                justify={'center'}
-                sx={t => ({
-                  height: '100%',
-                  minHeight: t.sizes.$100,
-                })}
-              >
-                <Spinner
-                  size={'lg'}
-                  colorScheme={'primary'}
-                  elementDescriptor={descriptors.spinner}
-                />
-              </Flex>
-            ) : (
-              <TaskChooseOrganizationFlows initialFlow={hasExistingResources ? 'choose' : 'create'} />
-            )}
-          </Card.Content>
-        </Flow.Part>
+        <Card.Content sx={t => ({ padding: `${t.space.$8} ${t.space.$none} ${t.space.$none}`, gap: t.space.$7 })}>
+          {isLoading ? (
+            <Flex
+              direction={'row'}
+              align={'center'}
+              justify={'center'}
+              sx={t => ({
+                height: '100%',
+                minHeight: t.sizes.$100,
+              })}
+            >
+              <Spinner
+                size={'lg'}
+                colorScheme={'primary'}
+                elementDescriptor={descriptors.spinner}
+              />
+            </Flex>
+          ) : (
+            <TaskChooseOrganizationFlows initialFlow={hasExistingResources ? 'choose' : 'create'} />
+          )}
+        </Card.Content>
 
         <Card.Footer>
           <Card.Action
@@ -82,7 +80,7 @@ const TaskChooseOrganizationInternal = () => {
           </Card.Action>
         </Card.Footer>
       </Card.Root>
-    </Flow.Root>
+    </Flow.Part>
   );
 };
 

packages/clerk-js/src/ui/elements/contexts/index.tsx

@@ -100,9 +100,7 @@ export type FlowMetadata = {
     | 'apiKeys'
     | 'oauthConsent'
     | 'subscriptionDetails'
-    | 'subscriptionDetails'
-    | 'tasks'
-    | 'taskChooseOrganization';
+    | 'sessionTasks';
   part?:
     | 'start'
     | 'emailCode'
@@ -124,8 +122,7 @@ export type FlowMetadata = {
     | 'popover'
     | 'complete'
     | 'accountSwitcher'
-    | 'chooseOrganization'
-    | 'createOrganization';
+    | 'taskChooseOrganization';
 };
 
 const [FlowMetadataCtx, useFlowMetadata] = createContextAndHook<FlowMetadata>('FlowMetadata');