Skip to content

Commit

Permalink
Merge pull request Expensify#30051 from dukenv0307/fix/27995
Browse files Browse the repository at this point in the history 
Add new blocking view for new room page
  • Loading branch information
@techievivek
techievivek authored Dec 14, 2023
2 parents e81ed8f + 1f0e812 commit 5c0f3e4
Show file tree
Hide file tree
Showing 3 changed files with 99 additions and 73 deletions.
2 changes: 2 additions & 0 deletions src/languages/en.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1492,6 +1492,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 begin collaborating, create or join a workspace',
},
new: {
newWorkspace: 'New workspace',
Expand Down
2 changes: 2 additions & 0 deletions src/languages/es.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1515,6 +1515,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 comenzar a colaborar, cree o únase a un espacio de trabajo',
},
new: {
newWorkspace: 'Nuevo espacio de trabajo',
Expand Down
168 changes: 95 additions & 73 deletions src/pages/workspace/WorkspaceNewRoomPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@ import React, {useCallback, useEffect, useMemo, 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 OfflineIndicator from '@components/OfflineIndicator';
import RoomNameInput from '@components/RoomNameInput';
Expand All @@ -27,10 +30,10 @@ import * as PolicyUtils from '@libs/PolicyUtils';
import * as ReportUtils from '@libs/ReportUtils';
import * as ValidationUtils from '@libs/ValidationUtils';
import variables from '@styles/variables';
import * as App from '@userActions/App';
import * as Report from '@userActions/Report';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';

const propTypes = {
/** All reports shared with the user */
Expand Down Expand Up @@ -216,13 +219,28 @@ function WorkspaceNewRoomPage(props) {

const {inputCallbackRef} = useAutoFocusInput();

const renderEmptyWorkspaceView = () => (
<>
<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 (
<FullPageNotFoundView
shouldShow={!Permissions.canUsePolicyRooms(props.betas) || !workspaceOptions.length}
shouldShowBackButton={false}
linkKey="workspace.emptyWorkspace.title"
onLinkPress={() => App.createWorkspaceWithPolicyDraftAndNavigateToIt()}
>
<FullPageNotFoundView shouldShow={!Permissions.canUsePolicyRooms(props.betas)}>
<ScreenWrapper
shouldEnableKeyboardAvoidingView={false}
includeSafeAreaPaddingBottom={isOffline}
Expand All @@ -231,76 +249,80 @@ function WorkspaceNewRoomPage(props) {
shouldEnablePickerAvoiding={false}
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
{({insets}) =>
workspaceOptions.length === 0 ? (
renderEmptyWorkspaceView()
) : (
<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={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.ROLE.PRESENTATION}
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}>
<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="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>
{isSmallScreenWidth && <OfflineIndicator />}
</KeyboardAvoidingView>
)}
<Text style={[styles.textLabel, styles.colorMuted]}>{visibilityDescription}</Text>
</Form>
{isSmallScreenWidth && <OfflineIndicator />}
</KeyboardAvoidingView>
)
}
</ScreenWrapper>
</FullPageNotFoundView>
);
Expand Down

0 comments on commit 5c0f3e4

Please sign in to comment.