Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor WorkspaceInvitePage #10669

Merged
merged 10 commits into from
Sep 6, 2022
17 changes: 17 additions & 0 deletions src/libs/actions/Policy.js
Original file line number Diff line number Diff line change
Expand Up @@ -550,6 +550,10 @@ function uploadAvatar(policyID, file) {
* @param {Object} errors
*/
function setWorkspaceErrors(policyID, errors) {
if (!allPolicies[policyID]) {
return;
}

Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {errors: null});
Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {errors});
}
Expand All @@ -573,6 +577,10 @@ function removeUnitError(policyID, customUnitID) {
* @param {String} policyID
*/
function hideWorkspaceAlertMessage(policyID) {
if (!allPolicies[policyID]) {
return;
}

Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {alertMessage: ''});
}

Expand Down Expand Up @@ -745,6 +753,14 @@ function openWorkspaceMembersPage(policyID, clientPolicyMembers) {
API.read('OpenWorkspaceMembersPage', {policyID, clientPolicyMembers});
}

function openWorkspaceInvitePage(policyID, clientPolicyMembers) {
if (!policyID) {
return;
}

API.read('OpenWorkspaceInvitePage', {policyID, clientPolicyMembers});
}

export {
getPolicyList,
loadFullPolicy,
Expand Down Expand Up @@ -772,4 +788,5 @@ export {
clearAvatarErrors,
generatePolicyID,
openWorkspaceMembersPage,
openWorkspaceInvitePage,
};
138 changes: 78 additions & 60 deletions src/pages/workspace/WorkspaceInvitePage.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndica
import * as Link from '../../libs/actions/Link';
import Text from '../../components/Text';
import withFullPolicy, {fullPolicyPropTypes, fullPolicyDefaultProps} from './withFullPolicy';
import {withNetwork} from '../../components/OnyxProvider';
import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';

const personalDetailsPropTypes = PropTypes.shape({
/** The login of the person (either email or phone number) */
Expand Down Expand Up @@ -84,6 +86,19 @@ class WorkspaceInvitePage extends React.Component {

componentDidMount() {
this.clearErrors();

const clientPolicyMembers = _.keys(this.props.policyMemberList);
Policy.openWorkspaceInvitePage(this.props.policy.id, clientPolicyMembers);
}

componentDidUpdate(prevProps) {
const isReconnecting = prevProps.network.isOffline && !this.props.network.isOffline;
if (!isReconnecting) {
return;
}

const clientPolicyMembers = _.keys(this.props.policyMemberList);
Policy.openWorkspaceInvitePage(this.props.policy.id, clientPolicyMembers);
}

getExcludedUsers() {
Expand Down Expand Up @@ -230,22 +245,23 @@ class WorkspaceInvitePage extends React.Component {
return (
<ScreenWrapper>
{({didScreenTransitionEnd}) => (
<>
<HeaderWithCloseButton
title={this.props.translate('workspace.invite.invitePeople')}
subtitle={policyName}
onCloseButtonPress={() => {
this.clearErrors();
Navigation.dismissModal();
}}
shouldShowGetAssistanceButton
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
shouldShowBackButton
onBackButtonPress={() => Navigation.goBack()}
/>
<View style={[styles.flex1]}>
{!didScreenTransitionEnd && <FullScreenLoadingIndicator />}
{didScreenTransitionEnd && (
<FullPageNotFoundView shouldShow={_.isEmpty(this.props.policy)}>
<>
<HeaderWithCloseButton
title={this.props.translate('workspace.invite.invitePeople')}
subtitle={policyName}
onCloseButtonPress={() => {
this.clearErrors();
Navigation.dismissModal();
}}
shouldShowGetAssistanceButton
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_MEMBERS}
shouldShowBackButton
onBackButtonPress={() => Navigation.goBack()}
/>
<View style={[styles.flex1]}>
{!didScreenTransitionEnd && <FullScreenLoadingIndicator />}
{didScreenTransitionEnd && (
<OptionsSelector
autoFocus={false}
canSelectMultipleOptions
Expand Down Expand Up @@ -276,52 +292,53 @@ class WorkspaceInvitePage extends React.Component {
forceTextUnreadStyle
shouldFocusOnSelectRow
/>
)}
</View>
<View style={[styles.flexShrink0]}>
<View style={[styles.ph5, styles.pv3]}>
<TextInput
label={this.props.translate('workspace.invite.personalMessagePrompt')}
autoCompleteType="off"
autoCorrect={false}
numberOfLines={4}
textAlignVertical="top"
multiline
containerStyles={[styles.workspaceInviteWelcome]}
value={this.state.welcomeNote}
onChangeText={text => this.setState({welcomeNote: text})}
)}
</View>
<View style={[styles.flexShrink0]}>
<View style={[styles.ph5, styles.pv3]}>
<TextInput
label={this.props.translate('workspace.invite.personalMessagePrompt')}
autoCompleteType="off"
autoCorrect={false}
numberOfLines={4}
textAlignVertical="top"
multiline
containerStyles={[styles.workspaceInviteWelcome]}
value={this.state.welcomeNote}
onChangeText={text => this.setState({welcomeNote: text})}
/>
</View>
<FormAlertWithSubmitButton
isDisabled={!this.state.selectedOptions.length}
isAlertVisible={this.getShouldShowAlertPrompt()}
buttonText={this.props.translate('common.invite')}
onSubmit={this.inviteUser}
onFixTheErrorsLinkPressed={() => {}}
message={this.props.policy.alertMessage}
containerStyles={[styles.flexReset, styles.mb0, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto]}
/>
<Pressable
onPress={(e) => {
e.preventDefault();
Link.openExternalLink(CONST.PRIVACY_URL);
}}
accessibilityRole="link"
href={CONST.PRIVACY_URL}
style={[styles.mh5, styles.mv2, styles.alignSelfStart]}
>
{({hovered, pressed}) => (
<View style={[styles.flexRow]}>
<Text
style={[styles.mr1, styles.label, (hovered || pressed) ? styles.linkHovered : styles.link]}
>
{this.props.translate('common.privacyPolicy')}
</Text>
</View>
)}
</Pressable>
</View>
<FormAlertWithSubmitButton
isDisabled={!this.state.selectedOptions.length}
isAlertVisible={this.getShouldShowAlertPrompt()}
buttonText={this.props.translate('common.invite')}
onSubmit={this.inviteUser}
onFixTheErrorsLinkPressed={() => {}}
message={this.props.policy.alertMessage}
containerStyles={[styles.flexReset, styles.mb0, styles.flexGrow0, styles.flexShrink0, styles.flexBasisAuto]}
/>
<Pressable
onPress={(e) => {
e.preventDefault();
Link.openExternalLink(CONST.PRIVACY_URL);
}}
accessibilityRole="link"
href={CONST.PRIVACY_URL}
style={[styles.mh5, styles.mv2, styles.alignSelfStart]}
>
{({hovered, pressed}) => (
<View style={[styles.flexRow]}>
<Text
style={[styles.mr1, styles.label, (hovered || pressed) ? styles.linkHovered : styles.link]}
>
{this.props.translate('common.privacyPolicy')}
</Text>
</View>
)}
</Pressable>
</View>
</>
</>
</FullPageNotFoundView>
)}
</ScreenWrapper>
);
Expand All @@ -334,6 +351,7 @@ WorkspaceInvitePage.defaultProps = defaultProps;
export default compose(
withLocalize,
withFullPolicy,
withNetwork(),
arosiclair marked this conversation as resolved.
Show resolved Hide resolved
withOnyx({
personalDetails: {
key: ONYXKEYS.PERSONAL_DETAILS,
Expand Down