Merge pull request #206 from software-mansion-labs/poc/fix-navigating-after-creating-policy

Fix navigating from WorkspaceConfirmationPage on a wide layout

Author: adamgrzybowski

src/libs/actions/App.ts

@@ -411,6 +411,7 @@ function endSignOnTransition() {
  * @param [policyID] Optional, Policy id.
  * @param [currency] Optional, selected currency for the workspace
  * @param [file], avatar file for workspace
+ * @param [routeToNavigateAfterCreate], Optional, route to navigate after creating a workspace
  */
 function createWorkspaceWithPolicyDraftAndNavigateToIt(
     policyOwnerEmail = '',
@@ -421,18 +422,19 @@ function createWorkspaceWithPolicyDraftAndNavigateToIt(
     policyID = '',
     currency?: string,
     file?: File,
+    routeToNavigateAfterCreate?: Route,
 ) {
     const policyIDWithDefault = policyID || generatePolicyID();
     createDraftInitialWorkspace(policyOwnerEmail, policyName, policyIDWithDefault, makeMeAdmin, currency, file);
-
     Navigation.isNavigationReady()
         .then(() => {
             if (transitionFromOldDot) {
                 // We must call goBack() to remove the /transition route from history
                 Navigation.goBack();
             }
+            const routeToNavigate = routeToNavigateAfterCreate ?? ROUTES.WORKSPACE_INITIAL.getRoute(policyIDWithDefault, backTo);
             savePolicyDraftByNewWorkspace(policyIDWithDefault, policyName, policyOwnerEmail, makeMeAdmin, currency, file);
-            Navigation.navigate(ROUTES.WORKSPACE_INITIAL.getRoute(policyIDWithDefault, backTo), {forceReplace: !transitionFromOldDot});
+            Navigation.navigate(routeToNavigate, {forceReplace: !transitionFromOldDot});
         })
         .then(endSignOnTransition);
 }

src/pages/workspace/WorkspaceConfirmationPage.tsx

@@ -2,12 +2,22 @@ import React from 'react';
 import ScreenWrapper from '@components/ScreenWrapper';
 import WorkspaceConfirmationForm from '@components/WorkspaceConfirmationForm';
 import type {WorkspaceConfirmationSubmitFunctionParams} from '@components/WorkspaceConfirmationForm';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import {createWorkspaceWithPolicyDraftAndNavigateToIt} from '@libs/actions/App';
+import {generatePolicyID} from '@libs/actions/Policy/Policy';
 import getCurrentUrl from '@libs/Navigation/currentUrl';
+import ROUTES from '@src/ROUTES';
 
 function WorkspaceConfirmationPage() {
+    // It is necessary to use here isSmallScreenWidth because on a wide layout we should always navigate to ROUTES.WORKSPACE_PROFILE.
+    // shouldUseNarrowLayout cannot be used to determine that as this screen is displayed in RHP and shouldUseNarrowLayout always returns true.
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth} = useResponsiveLayout();
+
     const onSubmit = (params: WorkspaceConfirmationSubmitFunctionParams) => {
-        createWorkspaceWithPolicyDraftAndNavigateToIt('', params.name, false, false, '', params.policyID, params.currency, params.avatarFile as File);
+        const policyID = params.policyID || generatePolicyID();
+        const routeToNavigate = isSmallScreenWidth ? ROUTES.WORKSPACE_INITIAL.getRoute(policyID) : ROUTES.WORKSPACE_PROFILE.getRoute(policyID);
+        createWorkspaceWithPolicyDraftAndNavigateToIt('', params.name, false, false, '', policyID, params.currency, params.avatarFile as File, routeToNavigate);
     };
     const currentUrl = getCurrentUrl();
     // Approved Accountants and Guides can enter a flow where they make a workspace for other users,