diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 7328fb2543ad..83b6d1b31e4a 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -499,8 +499,8 @@ type OnyxValues = { [ONYXKEYS.FORMS.PROFILE_SETTINGS_FORM_DRAFT]: OnyxTypes.Form; [ONYXKEYS.FORMS.DISPLAY_NAME_FORM]: OnyxTypes.DisplayNameForm; [ONYXKEYS.FORMS.DISPLAY_NAME_FORM_DRAFT]: OnyxTypes.DisplayNameForm; - [ONYXKEYS.FORMS.ROOM_NAME_FORM]: OnyxTypes.Form; - [ONYXKEYS.FORMS.ROOM_NAME_FORM_DRAFT]: OnyxTypes.Form; + [ONYXKEYS.FORMS.ROOM_NAME_FORM]: OnyxTypes.RoomNameForm; + [ONYXKEYS.FORMS.ROOM_NAME_FORM_DRAFT]: OnyxTypes.RoomNameForm; [ONYXKEYS.FORMS.WELCOME_MESSAGE_FORM]: OnyxTypes.Form; [ONYXKEYS.FORMS.WELCOME_MESSAGE_FORM_DRAFT]: OnyxTypes.Form; [ONYXKEYS.FORMS.LEGAL_NAME_FORM]: OnyxTypes.Form; diff --git a/src/components/DisplayNames/DisplayNamesWithTooltip.tsx b/src/components/DisplayNames/DisplayNamesWithTooltip.tsx index ce0ae7ddcf4f..1cacb0e20c5d 100644 --- a/src/components/DisplayNames/DisplayNamesWithTooltip.tsx +++ b/src/components/DisplayNames/DisplayNamesWithTooltip.tsx @@ -56,7 +56,7 @@ function DisplayNamesWithToolTip({shouldUseFullTitle, fullTitle, displayNamesWit > {shouldUseFullTitle ? ReportUtils.formatReportLastMessageText(fullTitle) - : displayNamesWithTooltips.map(({displayName, accountID, avatar, login}, index) => ( + : displayNamesWithTooltips?.map(({displayName, accountID, avatar, login}, index) => ( // eslint-disable-next-line react/no-array-index-key + ); + } + return ( ; * @param errors - An object containing current errors in the form * @param message - Message to assign to the inputID errors */ -function addErrorMessage(errors: ErrorsList, inputID?: string, message?: TKey) { +function addErrorMessage(errors: ErrorsList, inputID?: string, message?: TKey | Localize.MaybePhraseKey) { if (!message || !inputID) { return; } diff --git a/src/libs/ValidationUtils.ts b/src/libs/ValidationUtils.ts index 9b2b1d01b80b..b3e733d1f6b3 100644 --- a/src/libs/ValidationUtils.ts +++ b/src/libs/ValidationUtils.ts @@ -4,6 +4,7 @@ import {URL_REGEX_WITH_REQUIRED_PROTOCOL} from 'expensify-common/lib/Url'; import isDate from 'lodash/isDate'; import isEmpty from 'lodash/isEmpty'; import isObject from 'lodash/isObject'; +import type {OnyxCollection} from 'react-native-onyx'; import CONST from '@src/CONST'; import type {Report} from '@src/types/onyx'; import type * as OnyxCommon from '@src/types/onyx/OnyxCommon'; @@ -361,8 +362,8 @@ function isReservedRoomName(roomName: string): boolean { /** * Checks if the room name already exists. */ -function isExistingRoomName(roomName: string, reports: Record, policyID: string): boolean { - return Object.values(reports).some((report) => report && report.policyID === policyID && report.reportName === roomName); +function isExistingRoomName(roomName: string, reports: OnyxCollection, policyID: string): boolean { + return Object.values(reports ?? {}).some((report) => report && report.policyID === policyID && report.reportName === roomName); } /** diff --git a/src/pages/settings/Report/NotificationPreferencePage.js b/src/pages/settings/Report/NotificationPreferencePage.js deleted file mode 100644 index c6044bd81efe..000000000000 --- a/src/pages/settings/Report/NotificationPreferencePage.js +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import _ from 'underscore'; -import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; -import HeaderWithBackButton from '@components/HeaderWithBackButton'; -import ScreenWrapper from '@components/ScreenWrapper'; -import SelectionList from '@components/SelectionList'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import compose from '@libs/compose'; -import * as ReportUtils from '@libs/ReportUtils'; -import withReportOrNotFound from '@pages/home/report/withReportOrNotFound'; -import reportPropTypes from '@pages/reportPropTypes'; -import * as Report from '@userActions/Report'; -import CONST from '@src/CONST'; - -const propTypes = { - ...withLocalizePropTypes, - - /** The report for which we are setting notification preferences */ - report: reportPropTypes.isRequired, -}; - -function NotificationPreferencePage(props) { - const shouldDisableNotificationPreferences = ReportUtils.isArchivedRoom(props.report); - const notificationPreferenceOptions = _.map( - _.filter(_.values(CONST.REPORT.NOTIFICATION_PREFERENCE), (pref) => pref !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN), - (preference) => ({ - value: preference, - text: props.translate(`notificationPreferencesPage.notificationPreferences.${preference}`), - keyForList: preference, - isSelected: preference === props.report.notificationPreference, - }), - ); - - return ( - - - ReportUtils.goBackToDetailsPage(props.report)} - /> - - Report.updateNotificationPreference(props.report.reportID, props.report.notificationPreference, option.value, true, undefined, undefined, props.report) - } - initiallyFocusedOptionKey={_.find(notificationPreferenceOptions, (locale) => locale.isSelected).keyForList} - /> - - - ); -} - -NotificationPreferencePage.displayName = 'NotificationPreferencePage'; -NotificationPreferencePage.propTypes = propTypes; - -export default compose(withLocalize, withReportOrNotFound())(NotificationPreferencePage); diff --git a/src/pages/settings/Report/NotificationPreferencePage.tsx b/src/pages/settings/Report/NotificationPreferencePage.tsx new file mode 100644 index 000000000000..05f3483f7ce8 --- /dev/null +++ b/src/pages/settings/Report/NotificationPreferencePage.tsx @@ -0,0 +1,54 @@ +import type {StackScreenProps} from '@react-navigation/stack'; +import React from 'react'; +import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import ScreenWrapper from '@components/ScreenWrapper'; +import SelectionList from '@components/SelectionList'; +import useLocalize from '@hooks/useLocalize'; +import * as ReportUtils from '@libs/ReportUtils'; +import type {ReportSettingsNavigatorParamList} from '@navigation/types'; +import withReportOrNotFound from '@pages/home/report/withReportOrNotFound'; +import type {WithReportOrNotFoundProps} from '@pages/home/report/withReportOrNotFound'; +import * as ReportActions from '@userActions/Report'; +import CONST from '@src/CONST'; +import type SCREENS from '@src/SCREENS'; + +type NotificationPreferencePageProps = WithReportOrNotFoundProps & StackScreenProps; + +function NotificationPreferencePage({report}: NotificationPreferencePageProps) { + const {translate} = useLocalize(); + const shouldDisableNotificationPreferences = ReportUtils.isArchivedRoom(report); + const notificationPreferenceOptions = Object.values(CONST.REPORT.NOTIFICATION_PREFERENCE) + .filter((pref) => pref !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN) + .map((preference) => ({ + value: preference, + text: translate(`notificationPreferencesPage.notificationPreferences.${preference}`), + keyForList: preference, + isSelected: preference === report?.notificationPreference, + })); + + return ( + + + ReportUtils.goBackToDetailsPage(report)} + /> + + report && ReportActions.updateNotificationPreference(report.reportID, report.notificationPreference, option.value, true, undefined, undefined, report) + } + initiallyFocusedOptionKey={notificationPreferenceOptions.find((locale) => locale.isSelected)?.keyForList} + /> + + + ); +} + +NotificationPreferencePage.displayName = 'NotificationPreferencePage'; + +export default withReportOrNotFound()(NotificationPreferencePage); diff --git a/src/pages/settings/Report/ReportSettingsPage.js b/src/pages/settings/Report/ReportSettingsPage.tsx similarity index 75% rename from src/pages/settings/Report/ReportSettingsPage.js rename to src/pages/settings/Report/ReportSettingsPage.tsx index c7cfd9c7850d..c1839b44553d 100644 --- a/src/pages/settings/Report/ReportSettingsPage.js +++ b/src/pages/settings/Report/ReportSettingsPage.tsx @@ -1,9 +1,6 @@ -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; +import type {StackScreenProps} from '@react-navigation/stack'; import React, {useMemo} from 'react'; import {ScrollView, View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import _ from 'underscore'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import DisplayNames from '@components/DisplayNames'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -15,71 +12,46 @@ import ScreenWrapper from '@components/ScreenWrapper'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import compose from '@libs/compose'; import {getGroupChatName} from '@libs/GroupChatUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; +import type {ReportSettingsNavigatorParamList} from '@navigation/types'; import withReportOrNotFound from '@pages/home/report/withReportOrNotFound'; -import reportPropTypes from '@pages/reportPropTypes'; -import * as Report from '@userActions/Report'; +import type {WithReportOrNotFoundProps} from '@pages/home/report/withReportOrNotFound'; +import * as ReportActions from '@userActions/Report'; import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import type SCREENS from '@src/SCREENS'; +import {isEmptyObject} from '@src/types/utils/EmptyObject'; -const propTypes = { - /** Route params */ - route: PropTypes.shape({ - params: PropTypes.shape({ - /** Report ID passed via route r/:reportID/settings */ - reportID: PropTypes.string, - }), - }).isRequired, +type ReportSettingsPageProps = WithReportOrNotFoundProps & StackScreenProps; - /* Onyx Props */ - - /** The active report */ - report: reportPropTypes.isRequired, - - /** The policies which the user has access to and which the report could be tied to */ - policies: PropTypes.shape({ - /** The policy name */ - name: PropTypes.string, - - /** ID of the policy */ - id: PropTypes.string, - }), -}; - -const defaultProps = { - policies: {}, -}; - -function ReportSettingsPage(props) { +function ReportSettingsPage({report, policies}: ReportSettingsPageProps) { + const reportID = report?.reportID ?? ''; const styles = useThemeStyles(); - const {report, policies} = props; const {translate} = useLocalize(); // The workspace the report is on, null if the user isn't a member of the workspace - const linkedWorkspace = useMemo(() => _.find(policies, (policy) => policy && policy.id === report.policyID), [policies, report.policyID]); + const linkedWorkspace = useMemo(() => Object.values(policies ?? {}).find((policy) => policy && policy.id === report?.policyID) ?? null, [policies, report?.policyID]); const shouldDisableRename = useMemo(() => ReportUtils.shouldDisableRename(report, linkedWorkspace), [report, linkedWorkspace]); const isMoneyRequestReport = ReportUtils.isMoneyRequestReport(report); // We only want policy owners and admins to be able to modify the welcome message, but not in thread chat const shouldDisableWelcomeMessage = ReportUtils.shouldDisableWelcomeMessage(report, linkedWorkspace); - const shouldDisableSettings = _.isEmpty(report) || ReportUtils.isArchivedRoom(report); + const shouldDisableSettings = isEmptyObject(report) || ReportUtils.isArchivedRoom(report); const shouldShowRoomName = !ReportUtils.isPolicyExpenseChat(report) && !ReportUtils.isChatThread(report); const notificationPreference = - report.notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN + report?.notificationPreference && report.notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN ? translate(`notificationPreferencesPage.notificationPreferences.${report.notificationPreference}`) : ''; - const writeCapability = ReportUtils.isAdminRoom(report) ? CONST.REPORT.WRITE_CAPABILITIES.ADMINS : report.writeCapability || CONST.REPORT.WRITE_CAPABILITIES.ALL; + const writeCapability = ReportUtils.isAdminRoom(report) ? CONST.REPORT.WRITE_CAPABILITIES.ADMINS : report?.writeCapability ?? CONST.REPORT.WRITE_CAPABILITIES.ALL; const writeCapabilityText = translate(`writeCapabilityPage.writeCapability.${writeCapability}`); const shouldAllowWriteCapabilityEditing = useMemo(() => ReportUtils.canEditWriteCapability(report, linkedWorkspace), [report, linkedWorkspace]); - const shouldShowNotificationPref = !isMoneyRequestReport && report.notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN; + const shouldShowNotificationPref = !isMoneyRequestReport && report?.notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN; const roomNameLabel = translate(isMoneyRequestReport ? 'workspace.editor.nameInputLabel' : 'newRoomPage.roomName'); - const reportName = ReportUtils.isGroupChat(props.report) ? getGroupChatName(props.report) : ReportUtils.getReportName(props.report); + const reportName = ReportUtils.isGroupChat(report) ? getGroupChatName(report) : ReportUtils.getReportName(report); const shouldShowWriteCapability = !isMoneyRequestReport; @@ -88,7 +60,7 @@ function ReportSettingsPage(props) { Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID))} + onBackButtonPress={() => Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(reportID))} /> {shouldShowNotificationPref && ( @@ -96,15 +68,15 @@ function ReportSettingsPage(props) { shouldShowRightIcon title={notificationPreference} description={translate('notificationPreferencesPage.label')} - onPress={() => Navigation.navigate(ROUTES.REPORT_SETTINGS_NOTIFICATION_PREFERENCES.getRoute(report.reportID))} + onPress={() => Navigation.navigate(ROUTES.REPORT_SETTINGS_NOTIFICATION_PREFERENCES.getRoute(reportID))} /> )} {shouldShowRoomName && ( Report.clearPolicyRoomNameErrors(report.reportID)} + onClose={() => ReportActions.clearPolicyRoomNameErrors(reportID)} > {shouldDisableRename ? ( @@ -115,7 +87,7 @@ function ReportSettingsPage(props) { {roomNameLabel} Navigation.navigate(ROUTES.REPORT_SETTINGS_ROOM_NAME.getRoute(report.reportID))} + onPress={() => Navigation.navigate(ROUTES.REPORT_SETTINGS_ROOM_NAME.getRoute(reportID))} /> )} @@ -138,7 +110,7 @@ function ReportSettingsPage(props) { shouldShowRightIcon title={writeCapabilityText} description={translate('writeCapabilityPage.label')} - onPress={() => Navigation.navigate(ROUTES.REPORT_SETTINGS_WRITE_CAPABILITY.getRoute(report.reportID))} + onPress={() => Navigation.navigate(ROUTES.REPORT_SETTINGS_WRITE_CAPABILITY.getRoute(reportID))} /> ) : ( @@ -157,7 +129,7 @@ function ReportSettingsPage(props) { ))} - {Boolean(linkedWorkspace) && ( + {linkedWorkspace !== null && ( )} - {Boolean(report.visibility) && ( + {report?.visibility !== undefined && ( Navigation.navigate(ROUTES.REPORT_WELCOME_MESSAGE.getRoute(report.reportID))} + onPress={() => Navigation.navigate(ROUTES.REPORT_WELCOME_MESSAGE.getRoute(reportID))} shouldShowRightIcon /> )} @@ -206,14 +178,6 @@ function ReportSettingsPage(props) { ); } -ReportSettingsPage.propTypes = propTypes; -ReportSettingsPage.defaultProps = defaultProps; ReportSettingsPage.displayName = 'ReportSettingsPage'; -export default compose( - withReportOrNotFound(), - withOnyx({ - policies: { - key: ONYXKEYS.COLLECTION.POLICY, - }, - }), -)(ReportSettingsPage); + +export default withReportOrNotFound()(ReportSettingsPage); diff --git a/src/pages/settings/Report/RoomNamePage.js b/src/pages/settings/Report/RoomNamePage.tsx similarity index 71% rename from src/pages/settings/Report/RoomNamePage.js rename to src/pages/settings/Report/RoomNamePage.tsx index 5f64faca50fc..30226bc6f502 100644 --- a/src/pages/settings/Report/RoomNamePage.js +++ b/src/pages/settings/Report/RoomNamePage.tsx @@ -1,59 +1,55 @@ import {useIsFocused} from '@react-navigation/native'; -import PropTypes from 'prop-types'; +import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useRef} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; +import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; +import type {OnyxFormValuesFields} from '@components/Form/types'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import type {AnimatedTextInputRef} from '@components/RNTextInput'; import RoomNameInput from '@components/RoomNameInput'; import ScreenWrapper from '@components/ScreenWrapper'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import compose from '@libs/compose'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; import * as ValidationUtils from '@libs/ValidationUtils'; +import type {ReportSettingsNavigatorParamList} from '@navigation/types'; import withReportOrNotFound from '@pages/home/report/withReportOrNotFound'; -import reportPropTypes from '@pages/reportPropTypes'; -import * as Report from '@userActions/Report'; +import type {WithReportOrNotFoundProps} from '@pages/home/report/withReportOrNotFound'; +import * as ReportActions from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import type SCREENS from '@src/SCREENS'; +import type {Policy, Report} from '@src/types/onyx'; -const propTypes = { - ...withLocalizePropTypes, - - /** The room report for which the name is being edited */ - report: reportPropTypes.isRequired, - +type RoomNamePageOnyxProps = { /** All reports shared with the user */ - reports: PropTypes.objectOf(reportPropTypes), + reports: OnyxCollection; /** Policy of the report for which the name is being edited */ - policy: PropTypes.shape({ - role: PropTypes.string, - owner: PropTypes.string, - }), -}; -const defaultProps = { - reports: {}, - policy: {}, + policy: OnyxEntry; }; -function RoomNamePage({policy, report, reports, translate}) { +type RoomNamePageProps = RoomNamePageOnyxProps & WithReportOrNotFoundProps & StackScreenProps; + +function RoomNamePage({report, policy, reports}: RoomNamePageProps) { const styles = useThemeStyles(); - const roomNameInputRef = useRef(null); + const roomNameInputRef = useRef(null); const isFocused = useIsFocused(); + const {translate} = useLocalize(); const validate = useCallback( - (values) => { + (values: OnyxFormValuesFields) => { const errors = {}; // We should skip validation hence we return an empty errors and we skip Form submission on the onSubmit method - if (values.roomName === report.reportName) { + if (values.roomName === report?.reportName) { return errors; } @@ -66,7 +62,7 @@ function RoomNamePage({policy, report, reports, translate}) { } else if (ValidationUtils.isReservedRoomName(values.roomName)) { // Certain names are reserved for default rooms and should not be used for policy rooms. ErrorUtils.addErrorMessage(errors, 'roomName', ['newRoomPage.roomNameReservedError', {reservedName: values.roomName}]); - } else if (ValidationUtils.isExistingRoomName(values.roomName, reports, report.policyID)) { + } else if (ValidationUtils.isExistingRoomName(values.roomName, reports, report?.policyID ?? '')) { // The room name can't be set to one that already exists on the policy ErrorUtils.addErrorMessage(errors, 'roomName', 'newRoomPage.roomAlreadyExistsError'); } @@ -78,19 +74,19 @@ function RoomNamePage({policy, report, reports, translate}) { return ( roomNameInputRef.current && roomNameInputRef.current.focus()} + onEntryTransitionEnd={() => roomNameInputRef.current?.focus()} includeSafeAreaPaddingBottom={false} testID={RoomNamePage.displayName} > Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(report.reportID))} + onBackButtonPress={() => Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(report?.reportID ?? ''))} /> Report.updatePolicyRoomNameAndNavigate(report, values.roomName)} + onSubmit={(values) => report && ReportActions.updatePolicyRoomNameAndNavigate(report, values.roomName)} validate={validate} submitButtonText={translate('common.save')} enabledWhenOffline @@ -100,7 +96,7 @@ function RoomNamePage({policy, report, reports, translate}) { InputComponent={RoomNameInput} ref={roomNameInputRef} inputID="roomName" - defaultValue={report.reportName} + defaultValue={report?.reportName} isFocused={isFocused} /> @@ -110,19 +106,15 @@ function RoomNamePage({policy, report, reports, translate}) { ); } -RoomNamePage.propTypes = propTypes; -RoomNamePage.defaultProps = defaultProps; RoomNamePage.displayName = 'RoomNamePage'; -export default compose( - withLocalize, - withReportOrNotFound(), - withOnyx({ +export default withReportOrNotFound()( + withOnyx({ reports: { key: ONYXKEYS.COLLECTION.REPORT, }, policy: { - key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, + key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`, }, - }), -)(RoomNamePage); + })(RoomNamePage), +); diff --git a/src/pages/settings/Report/WriteCapabilityPage.js b/src/pages/settings/Report/WriteCapabilityPage.js deleted file mode 100644 index fc587b028f7d..000000000000 --- a/src/pages/settings/Report/WriteCapabilityPage.js +++ /dev/null @@ -1,75 +0,0 @@ -import React from 'react'; -import {withOnyx} from 'react-native-onyx'; -import _ from 'underscore'; -import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; -import HeaderWithBackButton from '@components/HeaderWithBackButton'; -import ScreenWrapper from '@components/ScreenWrapper'; -import SelectionList from '@components/SelectionList'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import compose from '@libs/compose'; -import Navigation from '@libs/Navigation/Navigation'; -import * as ReportUtils from '@libs/ReportUtils'; -import withReportOrNotFound from '@pages/home/report/withReportOrNotFound'; -import reportPropTypes from '@pages/reportPropTypes'; -import {policyDefaultProps, policyPropTypes} from '@pages/workspace/withPolicy'; -import * as Report from '@userActions/Report'; -import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; - -const propTypes = { - ...withLocalizePropTypes, - ...policyPropTypes, - - /** The report for which we are setting write capability */ - report: reportPropTypes.isRequired, -}; - -const defaultProps = { - ...policyDefaultProps, -}; - -function WriteCapabilityPage(props) { - const writeCapabilityOptions = _.map(CONST.REPORT.WRITE_CAPABILITIES, (value) => ({ - value, - text: props.translate(`writeCapabilityPage.writeCapability.${value}`), - keyForList: value, - isSelected: value === (props.report.writeCapability || CONST.REPORT.WRITE_CAPABILITIES.ALL), - })); - - const isAbleToEdit = ReportUtils.canEditWriteCapability(props.report, props.policy); - - return ( - - - Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(props.report.reportID))} - /> - Report.updateWriteCapabilityAndNavigate(props.report, option.value)} - initiallyFocusedOptionKey={_.find(writeCapabilityOptions, (locale) => locale.isSelected).keyForList} - /> - - - ); -} - -WriteCapabilityPage.displayName = 'WriteCapabilityPage'; -WriteCapabilityPage.propTypes = propTypes; -WriteCapabilityPage.defaultProps = defaultProps; - -export default compose( - withLocalize, - withReportOrNotFound(), - withOnyx({ - policy: { - key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, - }, - }), -)(WriteCapabilityPage); diff --git a/src/pages/settings/Report/WriteCapabilityPage.tsx b/src/pages/settings/Report/WriteCapabilityPage.tsx new file mode 100644 index 000000000000..5f5fe73e5199 --- /dev/null +++ b/src/pages/settings/Report/WriteCapabilityPage.tsx @@ -0,0 +1,71 @@ +import type {StackScreenProps} from '@react-navigation/stack'; +import React from 'react'; +import {withOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; +import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import ScreenWrapper from '@components/ScreenWrapper'; +import SelectionList from '@components/SelectionList'; +import useLocalize from '@hooks/useLocalize'; +import Navigation from '@libs/Navigation/Navigation'; +import * as ReportUtils from '@libs/ReportUtils'; +import type {ReportSettingsNavigatorParamList} from '@navigation/types'; +import withReportOrNotFound from '@pages/home/report/withReportOrNotFound'; +import type {WithReportOrNotFoundProps} from '@pages/home/report/withReportOrNotFound'; +import * as ReportActions from '@userActions/Report'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; +import type SCREENS from '@src/SCREENS'; +import type {Policy} from '@src/types/onyx'; + +type WriteCapabilityPageOnyxProps = { + /** The policy object for the current route */ + policy: OnyxEntry; +}; + +type WriteCapabilityPageProps = WriteCapabilityPageOnyxProps & + WithReportOrNotFoundProps & + StackScreenProps; + +function WriteCapabilityPage({report, policy}: WriteCapabilityPageProps) { + const {translate} = useLocalize(); + const writeCapabilityOptions = Object.values(CONST.REPORT.WRITE_CAPABILITIES).map((value) => ({ + value, + text: translate(`writeCapabilityPage.writeCapability.${value}`), + keyForList: value, + isSelected: value === (report?.writeCapability ?? CONST.REPORT.WRITE_CAPABILITIES.ALL), + })); + + const isAbleToEdit = ReportUtils.canEditWriteCapability(report, policy); + + return ( + + + Navigation.goBack(ROUTES.REPORT_SETTINGS.getRoute(report?.reportID ?? ''))} + /> + report && ReportActions.updateWriteCapabilityAndNavigate(report, option.value)} + initiallyFocusedOptionKey={writeCapabilityOptions.find((locale) => locale.isSelected)?.keyForList} + /> + + + ); +} + +WriteCapabilityPage.displayName = 'WriteCapabilityPage'; + +export default withReportOrNotFound()( + withOnyx({ + policy: { + key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`, + }, + })(WriteCapabilityPage), +); diff --git a/src/types/onyx/Form.ts b/src/types/onyx/Form.ts index 48f386afcbb0..a73f8d4c9732 100644 --- a/src/types/onyx/Form.ts +++ b/src/types/onyx/Form.ts @@ -68,6 +68,10 @@ type CloseAccountForm = Form<{ phoneOrEmail: string; }>; +type RoomNameForm = Form<{ + roomName: string; +}>; + export default Form; export type { @@ -84,4 +88,5 @@ export type { WorkspaceSettingsForm, ReportFieldEditForm, CloseAccountForm, + RoomNameForm, }; diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts index d0ac2ce395fa..ef37e40026a4 100644 --- a/src/types/onyx/index.ts +++ b/src/types/onyx/index.ts @@ -19,6 +19,7 @@ import type { NewRoomForm, PrivateNotesForm, ReportFieldEditForm, + RoomNameForm, WorkspaceSettingsForm, } from './Form'; import type Form from './Form'; @@ -165,4 +166,5 @@ export type { IntroSchoolPrincipalForm, PrivateNotesForm, ReportFieldEditForm, + RoomNameForm, };