From eab7290bbee8c7626fe0e087f51f23964f2d1569 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Fri, 20 Oct 2023 11:36:58 +0700
Subject: [PATCH 01/10] add new blocking view for new room page

---
 src/languages/en.ts                         |   2 +
 src/languages/es.ts                         |   2 +
 src/libs/Permissions.ts                     |   1 +
 src/pages/workspace/WorkspaceNewRoomPage.js | 156 +++++++++++---------
 4 files changed, 95 insertions(+), 66 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index 11637846130a..f352e4aa3d08 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1422,6 +1422,8 @@ export default {
                 companyCards: 'Company credit cards',
                 reimbursements: 'Easy reimbursements',
             },
+            notFound: 'No workspace found',
+            description: 'Rooms are a great place to discuss and work with multiple people. To message a room, create or join a workspace'
         },
         new: {
             newWorkspace: 'New workspace',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index e4a5c37241f2..14b99ce92b76 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1443,6 +1443,8 @@ export default {
                 companyCards: 'Tarjetas de crédito corporativas',
                 reimbursements: 'Reembolsos fáciles',
             },
+            notFound: 'No se encontró ningún espacio de trabajo',
+            description: 'Las salas son un gran lugar para discutir y trabajar con varias personas. Para enviar mensajes a una sala, crear o unirse a un espacio de trabajo'
         },
         new: {
             newWorkspace: 'Nuevo espacio de trabajo',
diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts
index 13489c396c3c..fe06ebb77e0c 100644
--- a/src/libs/Permissions.ts
+++ b/src/libs/Permissions.ts
@@ -2,6 +2,7 @@ import CONST from '../CONST';
 import Beta from '../types/onyx/Beta';
 
 function canUseAllBetas(betas: Beta[]): boolean {
+    return true;
     return betas?.includes(CONST.BETAS.ALL);
 }
 
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index da0bf845cc81..54ad2babb187 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -27,6 +27,11 @@ import compose from '../../libs/compose';
 import variables from '../../styles/variables';
 import useDelayedInputFocus from '../../hooks/useDelayedInputFocus';
 import ValuePicker from '../../components/ValuePicker';
+import BlockingView from '../../components/BlockingViews/BlockingView';
+import * as Illustrations from '../../components/Icon/Illustrations';
+import Button from '../../components/Button';
+import Navigation from '../../libs/Navigation/Navigation';
+import ROUTES from '../../ROUTES';
 
 const propTypes = {
     /** All reports shared with the user */
@@ -162,7 +167,7 @@ function WorkspaceNewRoomPage(props) {
 
     return (
         <FullPageNotFoundView
-            shouldShow={!Permissions.canUsePolicyRooms(props.betas) || !workspaceOptions.length}
+            shouldShow={!Permissions.canUsePolicyRooms(props.betas)}
             shouldShowBackButton={false}
             linkKey="workspace.emptyWorkspace.title"
             onLinkPress={() => App.createWorkspaceAndNavigateToIt('', false, '', false, false)}
@@ -175,75 +180,94 @@ function WorkspaceNewRoomPage(props) {
                 testID={WorkspaceNewRoomPage.displayName}
             >
                 {({insets}) => (
-                    <KeyboardAvoidingView
-                        style={styles.h100}
-                        behavior="padding"
-                        // Offset is needed as KeyboardAvoidingView in nested inside of TabNavigator instead of wrapping whole screen.
-                        // This is because when wrapping whole screen the screen was freezing when changing Tabs.
-                        keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top}
-                    >
-                        <Form
-                            formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
-                            submitButtonText={translate('newRoomPage.createRoom')}
-                            style={[styles.mh5, styles.flexGrow1]}
-                            validate={validate}
-                            onSubmit={submit}
-                            enabledWhenOffline
+                    workspaceOptions.length ? (
+                        <KeyboardAvoidingView
+                            style={styles.h100}
+                            behavior="padding"
+                            // Offset is needed as KeyboardAvoidingView in nested inside of TabNavigator instead of wrapping whole screen.
+                            // This is because when wrapping whole screen the screen was freezing when changing Tabs.
+                            keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top}
                         >
-                            <View style={styles.mb5}>
-                                <RoomNameInput
-                                    ref={(el) => (roomNameInputRef.current = el)}
-                                    inputID="roomName"
-                                    isFocused={props.isFocused}
-                                    shouldDelayFocus
-                                    autoFocus
-                                />
-                            </View>
-                            <View style={styles.mb5}>
-                                <TextInput
-                                    inputID="welcomeMessage"
-                                    label={translate('welcomeMessagePage.welcomeMessageOptional')}
-                                    accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')}
-                                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                                    autoGrowHeight
-                                    maxLength={CONST.MAX_COMMENT_LENGTH}
-                                    autoCapitalize="none"
-                                    textAlignVertical="top"
-                                    containerStyles={[styles.autoGrowHeightMultilineInput]}
-                                />
-                            </View>
-                            <View style={[styles.mhn5]}>
-                                <ValuePicker
-                                    inputID="policyID"
-                                    label={translate('workspace.common.workspace')}
-                                    placeholder={translate('newRoomPage.selectAWorkspace')}
-                                    items={workspaceOptions}
-                                    onValueChange={setPolicyID}
-                                />
-                            </View>
-                            {isPolicyAdmin && (
-                                <View style={styles.mhn5}>
+                            <Form
+                                formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
+                                submitButtonText={translate('newRoomPage.createRoom')}
+                                style={[styles.mh5, styles.flexGrow1]}
+                                validate={validate}
+                                onSubmit={submit}
+                                enabledWhenOffline
+                            >
+                                <View style={styles.mb5}>
+                                    <RoomNameInput
+                                        ref={(el) => (roomNameInputRef.current = el)}
+                                        inputID="roomName"
+                                        isFocused={props.isFocused}
+                                        shouldDelayFocus
+                                        autoFocus
+                                    />
+                                </View>
+                                <View style={styles.mb5}>
+                                    <TextInput
+                                        inputID="welcomeMessage"
+                                        label={translate('welcomeMessagePage.welcomeMessageOptional')}
+                                        accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')}
+                                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                                        autoGrowHeight
+                                        maxLength={CONST.MAX_COMMENT_LENGTH}
+                                        autoCapitalize="none"
+                                        textAlignVertical="top"
+                                        containerStyles={[styles.autoGrowHeightMultilineInput]}
+                                    />
+                                </View>
+                                <View style={[styles.mhn5]}>
+                                    <ValuePicker
+                                        inputID="policyID"
+                                        label={translate('workspace.common.workspace')}
+                                        placeholder={translate('newRoomPage.selectAWorkspace')}
+                                        items={workspaceOptions}
+                                        onValueChange={setPolicyID}
+                                    />
+                                </View>
+                                {isPolicyAdmin && (
+                                    <View style={styles.mhn5}>
+                                        <ValuePicker
+                                            inputID="writeCapability"
+                                            label={translate('writeCapabilityPage.label')}
+                                            items={writeCapabilityOptions}
+                                            value={writeCapability}
+                                            onValueChange={setWriteCapability}
+                                        />
+                                    </View>
+                                )}
+                                <View style={[styles.mb1, styles.mhn5]}>
                                     <ValuePicker
-                                        inputID="writeCapability"
-                                        label={translate('writeCapabilityPage.label')}
-                                        items={writeCapabilityOptions}
-                                        value={writeCapability}
-                                        onValueChange={setWriteCapability}
+                                        inputID="visibility"
+                                        label={translate('newRoomPage.visibility')}
+                                        items={visibilityOptions}
+                                        onValueChange={setVisibility}
+                                        value={visibility}
                                     />
                                 </View>
-                            )}
-                            <View style={[styles.mb1, styles.mhn5]}>
-                                <ValuePicker
-                                    inputID="visibility"
-                                    label={translate('newRoomPage.visibility')}
-                                    items={visibilityOptions}
-                                    onValueChange={setVisibility}
-                                    value={visibility}
-                                />
-                            </View>
-                            <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
-                        </Form>
-                    </KeyboardAvoidingView>
+                                <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
+                            </Form>
+                        </KeyboardAvoidingView>
+                    ) : (
+                        <>
+                            <BlockingView
+                                icon={Illustrations.ToddBehindCloud}
+                                iconWidth={variables.modalTopIconWidth}
+                                iconHeight={variables.modalTopIconHeight}
+                                title={translate("workspace.emptyWorkspace.notFound")}
+                                subtitle={translate("workspace.emptyWorkspace.description")}
+                                shouldShowLink={false}
+                            />
+                            <Button 
+                                success
+                                text={translate("footer.learnMore")}
+                                onPress={() =>  Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
+                                style={[styles.mh5, styles.mb5]}
+                            />
+                        </>
+                    )
                 )}
             </ScreenWrapper>
         </FullPageNotFoundView>

From 299a60c2706fd1563b2e06cdf344e3f0a5dac6fa Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Fri, 20 Oct 2023 13:56:26 +0700
Subject: [PATCH 02/10] fix lint

---
 src/languages/en.ts                         |  2 +-
 src/languages/es.ts                         |  2 +-
 src/pages/workspace/WorkspaceNewRoomPage.js | 14 +++++++-------
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/languages/en.ts b/src/languages/en.ts
index f352e4aa3d08..cb8e11660308 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1423,7 +1423,7 @@ export default {
                 reimbursements: 'Easy reimbursements',
             },
             notFound: 'No workspace found',
-            description: 'Rooms are a great place to discuss and work with multiple people. To message a room, create or join a workspace'
+            description: 'Rooms are a great place to discuss and work with multiple people. To message a room, create or join a workspace',
         },
         new: {
             newWorkspace: 'New workspace',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index 14b99ce92b76..d91148e9ac5d 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1444,7 +1444,7 @@ export default {
                 reimbursements: 'Reembolsos fáciles',
             },
             notFound: 'No se encontró ningún espacio de trabajo',
-            description: 'Las salas son un gran lugar para discutir y trabajar con varias personas. Para enviar mensajes a una sala, crear o unirse a un espacio de trabajo'
+            description: 'Las salas son un gran lugar para discutir y trabajar con varias personas. Para enviar mensajes a una sala, crear o unirse a un espacio de trabajo',
         },
         new: {
             newWorkspace: 'Nuevo espacio de trabajo',
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 54ad2babb187..38b93bf9badf 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -179,7 +179,7 @@ function WorkspaceNewRoomPage(props) {
                 shouldEnablePickerAvoiding={false}
                 testID={WorkspaceNewRoomPage.displayName}
             >
-                {({insets}) => (
+                {({insets}) =>
                     workspaceOptions.length ? (
                         <KeyboardAvoidingView
                             style={styles.h100}
@@ -256,19 +256,19 @@ function WorkspaceNewRoomPage(props) {
                                 icon={Illustrations.ToddBehindCloud}
                                 iconWidth={variables.modalTopIconWidth}
                                 iconHeight={variables.modalTopIconHeight}
-                                title={translate("workspace.emptyWorkspace.notFound")}
-                                subtitle={translate("workspace.emptyWorkspace.description")}
+                                title={translate('workspace.emptyWorkspace.notFound')}
+                                subtitle={translate('workspace.emptyWorkspace.description')}
                                 shouldShowLink={false}
                             />
-                            <Button 
+                            <Button
                                 success
-                                text={translate("footer.learnMore")}
-                                onPress={() =>  Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
+                                text={translate('footer.learnMore')}
+                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
                                 style={[styles.mh5, styles.mb5]}
                             />
                         </>
                     )
-                )}
+                }
             </ScreenWrapper>
         </FullPageNotFoundView>
     );

From 5e4f72e2cff715a8de9e08ac529a0abb346f2343 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Tue, 24 Oct 2023 13:00:36 +0700
Subject: [PATCH 03/10] revert hard code

---
 src/libs/Permissions.ts                     | 1 -
 src/pages/NewChatPage.js                    | 1 +
 src/pages/workspace/WorkspaceNewRoomPage.js | 8 ++------
 3 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts
index fe06ebb77e0c..13489c396c3c 100644
--- a/src/libs/Permissions.ts
+++ b/src/libs/Permissions.ts
@@ -2,7 +2,6 @@ import CONST from '../CONST';
 import Beta from '../types/onyx/Beta';
 
 function canUseAllBetas(betas: Beta[]): boolean {
-    return true;
     return betas?.includes(CONST.BETAS.ALL);
 }
 
diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index 9ee5f838aafd..6a33c8251334 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -216,6 +216,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i
             includeSafeAreaPaddingBottom={false}
             includePaddingTop={false}
             shouldEnableMaxHeight
+            shouldShowOfflineIndicator={false}
             testID={NewChatPage.displayName}
         >
             {({safeAreaPaddingBottomStyle, insets}) => (
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 38b93bf9badf..24b4a007ef2a 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -166,17 +166,13 @@ function WorkspaceNewRoomPage(props) {
     useDelayedInputFocus(roomNameInputRef, 600);
 
     return (
-        <FullPageNotFoundView
-            shouldShow={!Permissions.canUsePolicyRooms(props.betas)}
-            shouldShowBackButton={false}
-            linkKey="workspace.emptyWorkspace.title"
-            onLinkPress={() => App.createWorkspaceAndNavigateToIt('', false, '', false, false)}
-        >
+        <FullPageNotFoundView shouldShow={!Permissions.canUsePolicyRooms(props.betas)}>
             <ScreenWrapper
                 shouldEnableKeyboardAvoidingView={false}
                 includeSafeAreaPaddingBottom={false}
                 includePaddingTop={false}
                 shouldEnablePickerAvoiding={false}
+                shouldShowOfflineIndicator={false}
                 testID={WorkspaceNewRoomPage.displayName}
             >
                 {({insets}) =>

From d1e23ef73879f8aa17f957277d8bc6200cb89dd6 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Tue, 24 Oct 2023 13:05:51 +0700
Subject: [PATCH 04/10] fix lint

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index bf45b5d3b8fa..4d327fc68088 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -5,7 +5,6 @@ import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import withNavigationFocus from '../../components/withNavigationFocus';
 import * as Report from '../../libs/actions/Report';
-import * as App from '../../libs/actions/App';
 import useLocalize from '../../hooks/useLocalize';
 import styles from '../../styles/styles';
 import RoomNameInput from '../../components/RoomNameInput';

From 70fec0f74b2646b497cc623d541fb1eeeddb7d15 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Mon, 30 Oct 2023 14:54:01 +0700
Subject: [PATCH 05/10] fix lint

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index ee57edf3fa07..d6b429bc2bed 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -3,8 +3,11 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import BlockingView from '@components/BlockingViews/BlockingView';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
+import Button from '@components/Button';
 import Form from '@components/Form';
+import * as Illustrations from '@components/Icon/Illustrations';
 import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
 import RoomNameInput from '@components/RoomNameInput';
 import ScreenWrapper from '@components/ScreenWrapper';
@@ -16,6 +19,7 @@ import useDelayedInputFocus from '@hooks/useDelayedInputFocus';
 import useLocalize from '@hooks/useLocalize';
 import compose from '@libs/compose';
 import * as ErrorUtils from '@libs/ErrorUtils';
+import Navigation from '@libs/Navigation/Navigation';
 import Permissions from '@libs/Permissions';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -26,10 +30,6 @@ import variables from '@styles/variables';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import * as Illustrations from '@components/Icon/Illustrations';
-import BlockingView from '@components/BlockingViews/BlockingView';
-import Button from '@components/Button';
-import Navigation from '@libs/Navigation/Navigation';
 import ROUTES from '@src/ROUTES';
 
 const propTypes = {

From 6af325ab7e93050fcead4ff2d36dea974ce5662d Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Wed, 15 Nov 2023 12:07:20 +0700
Subject: [PATCH 06/10] fix lint

---
 src/pages/NewChatPage.js                    | 1 -
 src/pages/workspace/WorkspaceNewRoomPage.js | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js
index 2c9858a15f50..22af82041f7b 100755
--- a/src/pages/NewChatPage.js
+++ b/src/pages/NewChatPage.js
@@ -224,7 +224,6 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i
             shouldShowOfflineIndicator={false}
             includePaddingTop={false}
             shouldEnableMaxHeight
-            shouldShowOfflineIndicator={false}
             testID={NewChatPage.displayName}
         >
             {({safeAreaPaddingBottomStyle, insets}) => (
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 9cc085534c97..7fd70b704fee 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -175,7 +175,6 @@ function WorkspaceNewRoomPage(props) {
                 shouldShowOfflineIndicator={false}
                 includePaddingTop={false}
                 shouldEnablePickerAvoiding={false}
-                shouldShowOfflineIndicator={false}
                 testID={WorkspaceNewRoomPage.displayName}
             >
                 {({insets}) =>

From 452a6e880c1e822e44aed76c275ddee10efbd7d8 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Mon, 11 Dec 2023 16:13:09 +0700
Subject: [PATCH 07/10] refactor component

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 122 ++++++++++----------
 1 file changed, 63 insertions(+), 59 deletions(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index be4d3093fba2..842dfd3e2f03 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -219,6 +219,68 @@ function WorkspaceNewRoomPage(props) {
 
     const {inputCallbackRef} = useAutoFocusInput();
 
+    const newRoomForm = (
+        <Form
+            formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
+            submitButtonText={translate('newRoomPage.createRoom')}
+            style={[styles.mh5, styles.flexGrow1]}
+            validate={validate}
+            onSubmit={submit}
+            enabledWhenOffline
+        >
+            <View style={styles.mb5}>
+                <RoomNameInput
+                    ref={inputCallbackRef}
+                    inputID="roomName"
+                    isFocused={props.isFocused}
+                    shouldDelayFocus
+                    autoFocus
+                />
+            </View>
+            <View style={styles.mb5}>
+                <TextInput
+                    inputID="welcomeMessage"
+                    label={translate('welcomeMessagePage.welcomeMessageOptional')}
+                    accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')}
+                    role={CONST.ACCESSIBILITY_ROLE.TEXT}
+                    autoGrowHeight
+                    maxLength={CONST.MAX_COMMENT_LENGTH}
+                    autoCapitalize="none"
+                    containerStyles={[styles.autoGrowHeightMultilineInput]}
+                />
+            </View>
+            <View style={[styles.mhn5]}>
+                <ValuePicker
+                    inputID="policyID"
+                    label={translate('workspace.common.workspace')}
+                    items={workspaceOptions}
+                    onValueChange={setPolicyID}
+                />
+            </View>
+            {isPolicyAdmin && (
+                <View style={styles.mhn5}>
+                    <ValuePicker
+                        inputID="writeCapability"
+                        label={translate('writeCapabilityPage.label')}
+                        items={writeCapabilityOptions}
+                        value={writeCapability}
+                        onValueChange={setWriteCapability}
+                    />
+                </View>
+            )}
+            <View style={[styles.mb1, styles.mhn5]}>
+                <ValuePicker
+                    inputID="visibility"
+                    label={translate('newRoomPage.visibility')}
+                    items={visibilityOptions}
+                    onValueChange={setVisibility}
+                    value={visibility}
+                />
+            </View>
+            <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
+        </Form>
+    );
+
     return (
         <FullPageNotFoundView shouldShow={!Permissions.canUsePolicyRooms(props.betas)}>
             <ScreenWrapper
@@ -238,65 +300,7 @@ function WorkspaceNewRoomPage(props) {
                             // This is because when wrapping whole screen the screen was freezing when changing Tabs.
                             keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top}
                         >
-                            <Form
-                                formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
-                                submitButtonText={translate('newRoomPage.createRoom')}
-                                style={[styles.mh5, styles.flexGrow1]}
-                                validate={validate}
-                                onSubmit={submit}
-                                enabledWhenOffline
-                            >
-                                <View style={styles.mb5}>
-                                    <RoomNameInput
-                                        ref={inputCallbackRef}
-                                        inputID="roomName"
-                                        isFocused={props.isFocused}
-                                        shouldDelayFocus
-                                        autoFocus
-                                    />
-                                </View>
-                                <View style={styles.mb5}>
-                                    <TextInput
-                                        inputID="welcomeMessage"
-                                        label={translate('welcomeMessagePage.welcomeMessageOptional')}
-                                        accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')}
-                                        role={CONST.ACCESSIBILITY_ROLE.TEXT}
-                                        autoGrowHeight
-                                        maxLength={CONST.MAX_COMMENT_LENGTH}
-                                        autoCapitalize="none"
-                                        containerStyles={[styles.autoGrowHeightMultilineInput]}
-                                    />
-                                </View>
-                                <View style={[styles.mhn5]}>
-                                    <ValuePicker
-                                        inputID="policyID"
-                                        label={translate('workspace.common.workspace')}
-                                        items={workspaceOptions}
-                                        onValueChange={setPolicyID}
-                                    />
-                                </View>
-                                {isPolicyAdmin && (
-                                    <View style={styles.mhn5}>
-                                        <ValuePicker
-                                            inputID="writeCapability"
-                                            label={translate('writeCapabilityPage.label')}
-                                            items={writeCapabilityOptions}
-                                            value={writeCapability}
-                                            onValueChange={setWriteCapability}
-                                        />
-                                    </View>
-                                )}
-                                <View style={[styles.mb1, styles.mhn5]}>
-                                    <ValuePicker
-                                        inputID="visibility"
-                                        label={translate('newRoomPage.visibility')}
-                                        items={visibilityOptions}
-                                        onValueChange={setVisibility}
-                                        value={visibility}
-                                    />
-                                </View>
-                                <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
-                            </Form>
+                            {newRoomForm}
                             {isSmallScreenWidth && <OfflineIndicator />}
                         </KeyboardAvoidingView>
                     ) : (

From 133f9d2dbd818d1e7c8d73c548ed231211dd7287 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Tue, 12 Dec 2023 16:39:06 +0700
Subject: [PATCH 08/10] reverse view

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 160 ++++++++++----------
 1 file changed, 80 insertions(+), 80 deletions(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 842dfd3e2f03..7983fd663255 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -219,66 +219,24 @@ function WorkspaceNewRoomPage(props) {
 
     const {inputCallbackRef} = useAutoFocusInput();
 
-    const newRoomForm = (
-        <Form
-            formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
-            submitButtonText={translate('newRoomPage.createRoom')}
-            style={[styles.mh5, styles.flexGrow1]}
-            validate={validate}
-            onSubmit={submit}
-            enabledWhenOffline
-        >
-            <View style={styles.mb5}>
-                <RoomNameInput
-                    ref={inputCallbackRef}
-                    inputID="roomName"
-                    isFocused={props.isFocused}
-                    shouldDelayFocus
-                    autoFocus
-                />
-            </View>
-            <View style={styles.mb5}>
-                <TextInput
-                    inputID="welcomeMessage"
-                    label={translate('welcomeMessagePage.welcomeMessageOptional')}
-                    accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')}
-                    role={CONST.ACCESSIBILITY_ROLE.TEXT}
-                    autoGrowHeight
-                    maxLength={CONST.MAX_COMMENT_LENGTH}
-                    autoCapitalize="none"
-                    containerStyles={[styles.autoGrowHeightMultilineInput]}
-                />
-            </View>
-            <View style={[styles.mhn5]}>
-                <ValuePicker
-                    inputID="policyID"
-                    label={translate('workspace.common.workspace')}
-                    items={workspaceOptions}
-                    onValueChange={setPolicyID}
-                />
-            </View>
-            {isPolicyAdmin && (
-                <View style={styles.mhn5}>
-                    <ValuePicker
-                        inputID="writeCapability"
-                        label={translate('writeCapabilityPage.label')}
-                        items={writeCapabilityOptions}
-                        value={writeCapability}
-                        onValueChange={setWriteCapability}
-                    />
-                </View>
-            )}
-            <View style={[styles.mb1, styles.mhn5]}>
-                <ValuePicker
-                    inputID="visibility"
-                    label={translate('newRoomPage.visibility')}
-                    items={visibilityOptions}
-                    onValueChange={setVisibility}
-                    value={visibility}
-                />
-            </View>
-            <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
-        </Form>
+    const emptyWorkspaceView = (
+        <>
+            <BlockingView
+                icon={Illustrations.ToddBehindCloud}
+                iconWidth={variables.modalTopIconWidth}
+                iconHeight={variables.modalTopIconHeight}
+                title={translate('workspace.emptyWorkspace.notFound')}
+                subtitle={translate('workspace.emptyWorkspace.description')}
+                shouldShowLink={false}
+            />
+            <Button
+                success
+                text={translate('footer.learnMore')}
+                onPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
+                style={[styles.mh5, styles.mb5]}
+            />
+            {isSmallScreenWidth && <OfflineIndicator />}
+        </>
     );
 
     return (
@@ -292,7 +250,9 @@ function WorkspaceNewRoomPage(props) {
                 testID={WorkspaceNewRoomPage.displayName}
             >
                 {({insets}) =>
-                    workspaceOptions.length ? (
+                    workspaceOptions.length === 0 ? (
+                        {emptyWorkspaceView}
+                    ) : (
                         <KeyboardAvoidingView
                             style={styles.h100}
                             behavior="padding"
@@ -300,27 +260,67 @@ function WorkspaceNewRoomPage(props) {
                             // This is because when wrapping whole screen the screen was freezing when changing Tabs.
                             keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top}
                         >
-                            {newRoomForm}
+                            <Form
+                                formID={ONYXKEYS.FORMS.NEW_ROOM_FORM}
+                                submitButtonText={translate('newRoomPage.createRoom')}
+                                style={[styles.mh5, styles.flexGrow1]}
+                                validate={validate}
+                                onSubmit={submit}
+                                enabledWhenOffline
+                            >
+                                <View style={styles.mb5}>
+                                    <RoomNameInput
+                                        ref={inputCallbackRef}
+                                        inputID="roomName"
+                                        isFocused={props.isFocused}
+                                        shouldDelayFocus
+                                        autoFocus
+                                    />
+                                </View>
+                                <View style={styles.mb5}>
+                                    <TextInput
+                                        inputID="welcomeMessage"
+                                        label={translate('welcomeMessagePage.welcomeMessageOptional')}
+                                        accessibilityLabel={translate('welcomeMessagePage.welcomeMessageOptional')}
+                                        role={CONST.ACCESSIBILITY_ROLE.TEXT}
+                                        autoGrowHeight
+                                        maxLength={CONST.MAX_COMMENT_LENGTH}
+                                        autoCapitalize="none"
+                                        containerStyles={[styles.autoGrowHeightMultilineInput]}
+                                    />
+                                </View>
+                                <View style={[styles.mhn5]}>
+                                    <ValuePicker
+                                        inputID="policyID"
+                                        label={translate('workspace.common.workspace')}
+                                        items={workspaceOptions}
+                                        onValueChange={setPolicyID}
+                                    />
+                                </View>
+                                {isPolicyAdmin && (
+                                    <View style={styles.mhn5}>
+                                        <ValuePicker
+                                            inputID="writeCapability"
+                                            label={translate('writeCapabilityPage.label')}
+                                            items={writeCapabilityOptions}
+                                            value={writeCapability}
+                                            onValueChange={setWriteCapability}
+                                        />
+                                    </View>
+                                )}
+                                <View style={[styles.mb1, styles.mhn5]}>
+                                    <ValuePicker
+                                        inputID="visibility"
+                                        label={translate('newRoomPage.visibility')}
+                                        items={visibilityOptions}
+                                        onValueChange={setVisibility}
+                                        value={visibility}
+                                    />
+                                </View>
+                                <Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
+                            </Form>
                             {isSmallScreenWidth && <OfflineIndicator />}
                         </KeyboardAvoidingView>
-                    ) : (
-                        <>
-                            <BlockingView
-                                icon={Illustrations.ToddBehindCloud}
-                                iconWidth={variables.modalTopIconWidth}
-                                iconHeight={variables.modalTopIconHeight}
-                                title={translate('workspace.emptyWorkspace.notFound')}
-                                subtitle={translate('workspace.emptyWorkspace.description')}
-                                shouldShowLink={false}
-                            />
-                            <Button
-                                success
-                                text={translate('footer.learnMore')}
-                                onPress={() => Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
-                                style={[styles.mh5, styles.mb5]}
-                            />
-                            {isSmallScreenWidth && <OfflineIndicator />}
-                        </>
                     )
                 }
             </ScreenWrapper>

From 1c63ef7c2dfcaeee1221749725a0bcd3cadaae88 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Wed, 13 Dec 2023 15:25:48 +0700
Subject: [PATCH 09/10] fix crashes app

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index 7983fd663255..edd76b2ae5c5 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -251,7 +251,7 @@ function WorkspaceNewRoomPage(props) {
             >
                 {({insets}) =>
                     workspaceOptions.length === 0 ? (
-                        {emptyWorkspaceView}
+                        <>{emptyWorkspaceView}</>
                     ) : (
                         <KeyboardAvoidingView
                             style={styles.h100}

From 1f0e812a1fa26bfe8a35a81dea688dc24fb4b118 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Wed, 13 Dec 2023 21:44:34 +0700
Subject: [PATCH 10/10] refactor empty view variable

---
 src/pages/workspace/WorkspaceNewRoomPage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index edd76b2ae5c5..e7efe33b1e69 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -219,7 +219,7 @@ function WorkspaceNewRoomPage(props) {
 
     const {inputCallbackRef} = useAutoFocusInput();
 
-    const emptyWorkspaceView = (
+    const renderEmptyWorkspaceView = () => (
         <>
             <BlockingView
                 icon={Illustrations.ToddBehindCloud}
@@ -251,7 +251,7 @@ function WorkspaceNewRoomPage(props) {
             >
                 {({insets}) =>
                     workspaceOptions.length === 0 ? (
-                        <>{emptyWorkspaceView}</>
+                        renderEmptyWorkspaceView()
                     ) : (
                         <KeyboardAvoidingView
                             style={styles.h100}