+ ...proxySettings,
+ historyApiFallback: true,
+ port,
+ - host: 'dev.new.expensify.com',
+ + host: 'localhost',
+ server: {
+ - type: 'https',
+ + type: 'http',
+ options: {
+ key: path.join(__dirname, 'key.pem'),
+ cert: path.join(__dirname, 'certificate.pem'),
+ ```
#### Set Environment to something other than "Development"
diff --git a/docs/articles/expensify-classic/copilots-and-delegates/Act-as-a-copilot.md b/docs/articles/expensify-classic/copilots-and-delegates/Act-as-a-copilot.md
new file mode 100644
index 000000000000..04bc82a90774
--- /dev/null
+++ b/docs/articles/expensify-classic/copilots-and-delegates/Act-as-a-copilot.md
@@ -0,0 +1,42 @@
+---
+title: Act as a Copilot
+description: How to access another account after being granted Copilot permissions
+---
+
+
+After being assigned as a Copilot, you can access the account you’ve been given Copilot permissions to via the Expensify website or the mobile app.
+
+{% include selector.html values="desktop, mobile" %}
+
+{% include option.html value="desktop" %}
+To switch to Copilot mode,
+1. Click your profile icon in the upper left side of the page.
+2. In the “Copilot Access” section of the dropdown, choose the account you wish to access.
+
+The Expensify header will change to blue, and an airplane icon will appear to show that you are in copilot mode. You can return to your own account any time by clicking your profile icon and selecting **Return to your account**.
+
+{% include end-option.html %}
+
+{% include option.html value="mobile" %}
+To switch to Copilot mode,
+1. Tap the menu icon in the top left.
+2. Tap your profile icon.
+3. Tap **Switch to Copilot Mode** and choose the account.
+
+An airplane icon will appear to show that you are in copilot mode. To return to your own account, follow the same steps above and select **Return to your account**.
+
+{% include end-option.html %}
+
+{% include end-selector.html %}
+
+# FAQs
+
+**Can a Copilot’s secondary login be used to forward receipts?**
+
+Yes, a Copilot can use any of the email addresses tied to their account to forward receipts into the account they are copiloting. To ensure a receipt is routed to the Expensify account you are copiloting instead of your own account, email the receipt to receipts@expensify.com with the email address of the account you are copiloting as the subject line of the email.
+
+**Can I add another copilot to an account that I’m copiloting?**
+
+No, only the original account holder can add another Copilot to their account.
+
+
diff --git a/docs/articles/expensify-classic/domains/Claim-And-Verify-A-Domain.md b/docs/articles/expensify-classic/domains/Claim-And-Verify-A-Domain.md
index bb4b21547892..509961b026e5 100644
--- a/docs/articles/expensify-classic/domains/Claim-And-Verify-A-Domain.md
+++ b/docs/articles/expensify-classic/domains/Claim-And-Verify-A-Domain.md
@@ -31,7 +31,8 @@ You can claim and verify private domains only. Public domains (like gmail.com) c
# Step 2: Verify domain ownership
{% include info.html %}
-To complete this step, you must have a Control workspace, and you’ll need access to your domain provider account (GoDaddy, Wix, GSuite, etc.). If you don’t verify the domain, you will still have access to the domain to add and manage credit card expenses and domain admins, but you will not be able to invite members, add groups, use domain reporting tools, set delegates for employees on vacation, or enable SAML SSO. For more guidance on how to complete this process for a specific provider, check the provider’s website.{% include end-info.html %}
+To complete this step, you must have a Control workspace, and you’ll need access to your domain provider account (GoDaddy, Wix, GSuite, etc.). If you don’t verify the domain, you will still have access to the domain to add and manage credit card expenses and domain admins, but you will not be able to invite members, add groups, use domain reporting tools, set delegates for employees on vacation, or enable SAML SSO. For more guidance on how to complete this process for a specific provider, check the provider’s website.
+{% include end-info.html %}
Log in to your DNS service provider (which may be the website you purchased the domain from or that currently hosts the domain, like NameCheap, GoDaddy, DNSMadeEasy, or Amazon Route53. You may need to contact your company’s IT department if your domain is managed internally).
diff --git a/docs/expensify-classic/hubs/billing-and-subscriptions/index.html b/docs/expensify-classic/hubs/expensify-billing/index.html
similarity index 100%
rename from docs/expensify-classic/hubs/billing-and-subscriptions/index.html
rename to docs/expensify-classic/hubs/expensify-billing/index.html
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
index ab5d359a5460..43e6d566c6d0 100644
--- a/ios/NewExpensify/Info.plist
+++ b/ios/NewExpensify/Info.plist
@@ -19,7 +19,7 @@
CFBundlePackageType
APPL
CFBundleShortVersionString
- 1.4.51
+ 1.4.52
CFBundleSignature
????
CFBundleURLTypes
@@ -40,7 +40,7 @@
CFBundleVersion
- 1.4.51.3
+ 1.4.52.3
ITSAppUsesNonExemptEncryption
LSApplicationQueriesSchemes
diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
index ca9200c78376..9cf5dc5d864d 100644
--- a/ios/NewExpensifyTests/Info.plist
+++ b/ios/NewExpensifyTests/Info.plist
@@ -15,10 +15,10 @@
CFBundlePackageType
BNDL
CFBundleShortVersionString
- 1.4.51
+ 1.4.52
CFBundleSignature
????
CFBundleVersion
- 1.4.51.3
+ 1.4.52.3
diff --git a/ios/NotificationServiceExtension/Info.plist b/ios/NotificationServiceExtension/Info.plist
index f20b520b1480..a394b26719fa 100644
--- a/ios/NotificationServiceExtension/Info.plist
+++ b/ios/NotificationServiceExtension/Info.plist
@@ -11,9 +11,9 @@
CFBundleName
$(PRODUCT_NAME)
CFBundleShortVersionString
- 1.4.51
+ 1.4.52
CFBundleVersion
- 1.4.51.3
+ 1.4.52.3
NSExtension
NSExtensionPointIdentifier
diff --git a/package-lock.json b/package-lock.json
index 3083c15c0196..ee7a091dc0a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "new.expensify",
- "version": "1.4.51-3",
+ "version": "1.4.52-3",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "new.expensify",
- "version": "1.4.51-3",
+ "version": "1.4.52-3",
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
diff --git a/package.json b/package.json
index dc5b261c3b40..90704f0df54f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "new.expensify",
- "version": "1.4.51-3",
+ "version": "1.4.52-3",
"author": "Expensify, Inc.",
"homepage": "https://new.expensify.com",
"description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",
diff --git a/src/CONST.ts b/src/CONST.ts
index 6b7ede6f0e10..fa44cda20720 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -993,8 +993,6 @@ const CONST = {
MAGIC_CODE_LENGTH: 6,
MAGIC_CODE_EMPTY_CHAR: ' ',
- RECOVERY_CODE_LENGTH: 8,
-
KEYBOARD_TYPE: {
VISIBLE_PASSWORD: 'visible-password',
ASCII_CAPABLE: 'ascii-capable',
diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
index 97ad4deb477c..3980789223f2 100755
--- a/src/ONYXKEYS.ts
+++ b/src/ONYXKEYS.ts
@@ -330,8 +330,8 @@ const ONYXKEYS = {
ADD_DEBIT_CARD_FORM: 'addDebitCardForm',
ADD_DEBIT_CARD_FORM_DRAFT: 'addDebitCardFormDraft',
WORKSPACE_SETTINGS_FORM: 'workspaceSettingsForm',
- WORKSPACE_CATEGORY_CREATE_FORM: 'workspaceCategoryCreate',
- WORKSPACE_CATEGORY_CREATE_FORM_DRAFT: 'workspaceCategoryCreateDraft',
+ WORKSPACE_CATEGORY_FORM: 'workspaceCategoryForm',
+ WORKSPACE_CATEGORY_FORM_DRAFT: 'workspaceCategoryFormDraft',
WORKSPACE_TAG_CREATE_FORM: 'workspaceTagCreate',
WORKSPACE_TAG_CREATE_FORM_DRAFT: 'workspaceTagCreateDraft',
WORKSPACE_SETTINGS_FORM_DRAFT: 'workspaceSettingsFormDraft',
@@ -417,7 +417,7 @@ type AllOnyxKeys = DeepValueOf;
type OnyxFormValuesMapping = {
[ONYXKEYS.FORMS.ADD_DEBIT_CARD_FORM]: FormTypes.AddDebitCardForm;
[ONYXKEYS.FORMS.WORKSPACE_SETTINGS_FORM]: FormTypes.WorkspaceSettingsForm;
- [ONYXKEYS.FORMS.WORKSPACE_CATEGORY_CREATE_FORM]: FormTypes.WorkspaceCategoryCreateForm;
+ [ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FORM]: FormTypes.WorkspaceCategoryForm;
[ONYXKEYS.FORMS.WORKSPACE_TAG_CREATE_FORM]: FormTypes.WorkspaceTagCreateForm;
[ONYXKEYS.FORMS.WORKSPACE_RATE_AND_UNIT_FORM]: FormTypes.WorkspaceRateAndUnitForm;
[ONYXKEYS.FORMS.CLOSE_ACCOUNT_FORM]: FormTypes.CloseAccountForm;
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index ad2d9c10700b..680c5bced9a9 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -555,7 +555,7 @@ const ROUTES = {
},
WORKSPACE_CATEGORY_SETTINGS: {
route: 'settings/workspaces/:policyID/categories/:categoryName',
- getRoute: (policyID: string, categoryName: string) => `settings/workspaces/${policyID}/categories/${encodeURI(categoryName)}` as const,
+ getRoute: (policyID: string, categoryName: string) => `settings/workspaces/${policyID}/categories/${encodeURIComponent(categoryName)}` as const,
},
WORKSPACE_CATEGORIES_SETTINGS: {
route: 'settings/workspaces/:policyID/categories/settings',
@@ -569,6 +569,10 @@ const ROUTES = {
route: 'settings/workspaces/:policyID/categories/new',
getRoute: (policyID: string) => `settings/workspaces/${policyID}/categories/new` as const,
},
+ WORKSPACE_CATEGORY_EDIT: {
+ route: 'workspace/:policyID/categories/:categoryName/edit',
+ getRoute: (policyID: string, categoryName: string) => `workspace/${policyID}/categories/${encodeURI(categoryName)}/edit` as const,
+ },
WORKSPACE_TAGS: {
route: 'settings/workspaces/:policyID/tags',
getRoute: (policyID: string) => `settings/workspaces/${policyID}/tags` as const,
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index 6c742f08bfb7..7ccb24aa19e5 100644
--- a/src/SCREENS.ts
+++ b/src/SCREENS.ts
@@ -231,6 +231,7 @@ const SCREENS = {
SHARE: 'Workspace_Profile_Share',
NAME: 'Workspace_Profile_Name',
CATEGORY_CREATE: 'Category_Create',
+ CATEGORY_EDIT: 'Category_Edit',
CATEGORY_SETTINGS: 'Category_Settings',
CATEGORIES_SETTINGS: 'Categories_Settings',
MORE_FEATURES: 'Workspace_More_Features',
diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.tsx
similarity index 71%
rename from src/components/AddPlaidBankAccount.js
rename to src/components/AddPlaidBankAccount.tsx
index b6fc639546a8..e64c95325fae 100644
--- a/src/components/AddPlaidBankAccount.js
+++ b/src/components/AddPlaidBankAccount.tsx
@@ -1,20 +1,19 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
import React, {useCallback, useEffect, useRef, useState} from 'react';
import {ActivityIndicator, View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import KeyboardShortcut from '@libs/KeyboardShortcut';
import Log from '@libs/Log';
-import {plaidDataPropTypes} from '@pages/ReimbursementAccount/plaidDataPropTypes';
import * as App from '@userActions/App';
import * as BankAccounts from '@userActions/BankAccounts';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
+import type {PlaidData} from '@src/types/onyx';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView';
import FormHelpMessage from './FormHelpMessage';
import Icon from './Icon';
@@ -24,103 +23,82 @@ import PlaidLink from './PlaidLink';
import RadioButtons from './RadioButtons';
import Text from './Text';
-const propTypes = {
+type AddPlaidBankAccountOnyxProps = {
/** If the user has been throttled from Plaid */
- isPlaidDisabled: PropTypes.bool,
+ isPlaidDisabled: OnyxEntry;
+ /** Plaid SDK token to use to initialize the widget */
+ plaidLinkToken: OnyxEntry;
+};
+
+type AddPlaidBankAccountProps = AddPlaidBankAccountOnyxProps & {
/** Contains plaid data */
- plaidData: plaidDataPropTypes.isRequired,
+ plaidData: OnyxEntry;
/** Selected account ID from the Picker associated with the end of the Plaid flow */
- selectedPlaidAccountID: PropTypes.string,
-
- /** Plaid SDK token to use to initialize the widget */
- plaidLinkToken: PropTypes.string,
+ selectedPlaidAccountID?: string;
/** Fired when the user exits the Plaid flow */
- onExitPlaid: PropTypes.func,
+ onExitPlaid?: () => void;
/** Fired when the user selects an account */
- onSelect: PropTypes.func,
+ onSelect?: (plaidAccountID: string) => void;
/** Additional text to display */
- text: PropTypes.string,
+ text?: string;
/** The OAuth URI + stateID needed to re-initialize the PlaidLink after the user logs into their bank */
- receivedRedirectURI: PropTypes.string,
+ receivedRedirectURI?: string;
/** During the OAuth flow we need to use the plaidLink token that we initially connected with */
- plaidLinkOAuthToken: PropTypes.string,
+ plaidLinkOAuthToken?: string;
/** If we're updating an existing bank account, what's its bank account ID? */
- bankAccountID: PropTypes.number,
+ bankAccountID?: number;
/** Are we adding a withdrawal account? */
- allowDebit: PropTypes.bool,
+ allowDebit?: boolean;
/** Is displayed in new VBBA */
- isDisplayedInNewVBBA: PropTypes.bool,
+ isDisplayedInNewVBBA?: boolean;
/** Text to display on error message */
- errorText: PropTypes.string,
+ errorText?: string;
/** Function called whenever radio button value changes */
- onInputChange: PropTypes.func,
-};
-
-const defaultProps = {
- selectedPlaidAccountID: '',
- plaidLinkToken: '',
- onExitPlaid: () => {},
- onSelect: () => {},
- text: '',
- receivedRedirectURI: null,
- plaidLinkOAuthToken: '',
- allowDebit: false,
- bankAccountID: 0,
- isPlaidDisabled: false,
- isDisplayedInNewVBBA: false,
- errorText: '',
- onInputChange: () => {},
+ onInputChange?: (plaidAccountID: string) => void;
};
function AddPlaidBankAccount({
plaidData,
- selectedPlaidAccountID,
+ selectedPlaidAccountID = '',
plaidLinkToken,
- onExitPlaid,
- onSelect,
- text,
+ onExitPlaid = () => {},
+ onSelect = () => {},
+ text = '',
receivedRedirectURI,
- plaidLinkOAuthToken,
- bankAccountID,
- allowDebit,
+ plaidLinkOAuthToken = '',
+ bankAccountID = 0,
+ allowDebit = false,
isPlaidDisabled,
- isDisplayedInNewVBBA,
- errorText,
- onInputChange,
-}) {
+ isDisplayedInNewVBBA = false,
+ errorText = '',
+ onInputChange = () => {},
+}: AddPlaidBankAccountProps) {
const theme = useTheme();
const styles = useThemeStyles();
- const plaidBankAccounts = lodashGet(plaidData, 'bankAccounts', []);
- const defaultSelectedPlaidAccount = _.find(plaidBankAccounts, (account) => account.plaidAccountID === selectedPlaidAccountID);
- const defaultSelectedPlaidAccountID = lodashGet(defaultSelectedPlaidAccount, 'plaidAccountID', '');
- const defaultSelectedPlaidAccountMask = lodashGet(
- _.find(plaidBankAccounts, (account) => account.plaidAccountID === selectedPlaidAccountID),
- 'mask',
- '',
- );
- const subscribedKeyboardShortcuts = useRef([]);
- const previousNetworkState = useRef();
+ const plaidBankAccounts = plaidData?.bankAccounts ?? [];
+ const defaultSelectedPlaidAccount = plaidBankAccounts.find((account) => account.plaidAccountID === selectedPlaidAccountID);
+ const defaultSelectedPlaidAccountID = defaultSelectedPlaidAccount?.plaidAccountID ?? '';
+ const defaultSelectedPlaidAccountMask = plaidBankAccounts.find((account) => account.plaidAccountID === selectedPlaidAccountID)?.mask ?? '';
+ const subscribedKeyboardShortcuts = useRef void>>([]);
+ const previousNetworkState = useRef();
const [selectedPlaidAccountMask, setSelectedPlaidAccountMask] = useState(defaultSelectedPlaidAccountMask);
const {translate} = useLocalize();
const {isOffline} = useNetwork();
- /**
- * @returns {String}
- */
- const getPlaidLinkToken = () => {
+ const getPlaidLinkToken = (): string | undefined => {
if (plaidLinkToken) {
return plaidLinkToken;
}
@@ -135,7 +113,7 @@ function AddPlaidBankAccount({
* I'm using useCallback so the useEffect which uses this function doesn't run on every render.
*/
const isAuthenticatedWithPlaid = useCallback(
- () => (receivedRedirectURI && plaidLinkOAuthToken) || !_.isEmpty(lodashGet(plaidData, 'bankAccounts')) || !_.isEmpty(lodashGet(plaidData, 'errors')),
+ () => (!!receivedRedirectURI && !!plaidLinkOAuthToken) || !!plaidData?.bankAccounts?.length || !isEmptyObject(plaidData?.errors),
[plaidData, plaidLinkOAuthToken, receivedRedirectURI],
);
@@ -144,15 +122,15 @@ function AddPlaidBankAccount({
*/
const subscribeToNavigationShortcuts = () => {
// find and block the shortcuts
- const shortcutsToBlock = _.filter(CONST.KEYBOARD_SHORTCUTS, (x) => x.type === CONST.KEYBOARD_SHORTCUTS_TYPES.NAVIGATION_SHORTCUT);
- subscribedKeyboardShortcuts.current = _.map(shortcutsToBlock, (shortcut) =>
+ const shortcutsToBlock = Object.values(CONST.KEYBOARD_SHORTCUTS).filter((shortcut) => 'type' in shortcut && shortcut.type === CONST.KEYBOARD_SHORTCUTS_TYPES.NAVIGATION_SHORTCUT);
+ subscribedKeyboardShortcuts.current = shortcutsToBlock.map((shortcut) =>
KeyboardShortcut.subscribe(
shortcut.shortcutKey,
() => {}, // do nothing
shortcut.descriptionKey,
shortcut.modifiers,
false,
- () => lodashGet(plaidData, 'bankAccounts', []).length > 0, // start bubbling when there are bank accounts
+ () => (plaidData?.bankAccounts ?? []).length > 0, // start bubbling when there are bank accounts
),
);
};
@@ -161,7 +139,7 @@ function AddPlaidBankAccount({
* Unblocks the keyboard shortcuts that can navigate
*/
const unsubscribeToNavigationShortcuts = () => {
- _.each(subscribedKeyboardShortcuts.current, (unsubscribe) => unsubscribe());
+ subscribedKeyboardShortcuts.current.forEach((unsubscribe) => unsubscribe());
subscribedKeyboardShortcuts.current = [];
};
@@ -189,22 +167,21 @@ function AddPlaidBankAccount({
}, [allowDebit, bankAccountID, isAuthenticatedWithPlaid, isOffline]);
const token = getPlaidLinkToken();
- const options = _.map(plaidBankAccounts, (account) => ({
+ const options = plaidBankAccounts.map((account) => ({
value: account.plaidAccountID,
- label: account.addressName,
+ label: account.addressName ?? '',
}));
const {icon, iconSize, iconStyles} = getBankIcon({styles});
- const plaidErrors = lodashGet(plaidData, 'errors');
- const plaidDataErrorMessage = !_.isEmpty(plaidErrors) ? _.chain(plaidErrors).values().first().value() : '';
- const bankName = lodashGet(plaidData, 'bankName');
+ const plaidErrors = plaidData?.errors;
+ const plaidDataErrorMessage = !isEmptyObject(plaidErrors) ? (Object.values(plaidErrors)[0] as string) : '';
+ const bankName = plaidData?.bankName;
/**
- * @param {String} plaidAccountID
*
* When user selects one of plaid accounts we need to set the mask in order to display it on UI
*/
- const handleSelectingPlaidAccount = (plaidAccountID) => {
- const mask = _.find(plaidBankAccounts, (account) => account.plaidAccountID === plaidAccountID).mask;
+ const handleSelectingPlaidAccount = (plaidAccountID: string) => {
+ const mask = plaidBankAccounts.find((account) => account.plaidAccountID === plaidAccountID)?.mask ?? '';
setSelectedPlaidAccountMask(mask);
onSelect(plaidAccountID);
onInputChange(plaidAccountID);
@@ -219,24 +196,24 @@ function AddPlaidBankAccount({
}
const renderPlaidLink = () => {
- if (Boolean(token) && !bankName) {
+ if (!!token && !bankName) {
return (
{
Log.info('[PlaidLink] Success!');
- BankAccounts.openPlaidBankAccountSelector(publicToken, metadata.institution.name, allowDebit, bankAccountID);
+ BankAccounts.openPlaidBankAccountSelector(publicToken, metadata?.institution?.name ?? '', allowDebit, bankAccountID);
}}
onError={(error) => {
- Log.hmmm('[PlaidLink] Error: ', error.message);
+ Log.hmmm('[PlaidLink] Error: ', error?.message);
}}
onEvent={(event, metadata) => {
BankAccounts.setPlaidEvent(event);
// Handle Plaid login errors (will potentially reset plaid token and item depending on the error)
if (event === 'ERROR') {
- Log.hmmm('[PlaidLink] Error: ', metadata);
- if (bankAccountID && metadata && metadata.error_code) {
- BankAccounts.handlePlaidError(bankAccountID, metadata.error_code, metadata.error_message, metadata.request_id);
+ Log.hmmm('[PlaidLink] Error: ', {...metadata});
+ if (bankAccountID && metadata && 'error_code' in metadata) {
+ BankAccounts.handlePlaidError(bankAccountID, metadata.error_code ?? '', metadata.error_message ?? '', metadata.request_id);
}
}
@@ -257,7 +234,7 @@ function AddPlaidBankAccount({
return {plaidDataErrorMessage} ;
}
- if (lodashGet(plaidData, 'isLoading')) {
+ if (plaidData?.isLoading) {
return (
{translate('bankAccount.chooseAnAccount')}
- {!_.isEmpty(text) && {text} }
+ {!!text && {text} }
- {!_.isEmpty(text) && {text} }
+ {!!text && {text} }
({
plaidLinkToken: {
key: ONYXKEYS.PLAID_LINK_TOKEN,
initWithStoredValues: false,
diff --git a/src/components/AttachmentModal.tsx b/src/components/AttachmentModal.tsx
index 1ed7b6d188a0..0c047ce52dc8 100755
--- a/src/components/AttachmentModal.tsx
+++ b/src/components/AttachmentModal.tsx
@@ -569,6 +569,7 @@ function AttachmentModal({
@@ -421,6 +419,7 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose
style={[styles.m5]}
onPress={cropAndSaveImage}
pressOnEnter
+ large
text={translate('common.save')}
/>
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index ca1bc391e800..3abc5b17ae80 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -10,6 +10,7 @@ import Text from '@components/Text';
import withNavigationFallback from '@components/withNavigationFallback';
import useActiveElementRole from '@hooks/useActiveElementRole';
import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import HapticFeedback from '@libs/HapticFeedback';
@@ -18,18 +19,7 @@ import type ChildrenProps from '@src/types/utils/ChildrenProps';
import type IconAsset from '@src/types/utils/IconAsset';
import validateSubmitShortcut from './validateSubmitShortcut';
-type ButtonWithText = {
- /** The text for the button label */
- text?: string;
-
- /** Boolean whether to display the right icon */
- shouldShowRightIcon?: boolean;
-
- /** The icon asset to display to the left of the text */
- icon?: IconAsset | null;
-};
-
-type ButtonProps = (ButtonWithText | ChildrenProps) & {
+type ButtonProps = Partial & {
/** Should the press event bubble across multiple instances when Enter key triggers it. */
allowBubble?: boolean;
@@ -116,6 +106,15 @@ type ButtonProps = (ButtonWithText | ChildrenProps) & {
/** Accessibility label for the component */
accessibilityLabel?: string;
+
+ /** The icon asset to display to the left of the text */
+ icon?: IconAsset | null;
+
+ /** The text for the button label */
+ text?: string;
+
+ /** Boolean whether to display the right icon */
+ shouldShowRightIcon?: boolean;
};
type KeyboardShortcutComponentProps = Pick;
@@ -162,8 +161,10 @@ function Button(
iconRight = Expensicons.ArrowRight,
iconFill,
+ icon = null,
iconStyles = [],
iconRightStyles = [],
+ text = '',
small = false,
large = false,
@@ -193,6 +194,7 @@ function Button(
shouldRemoveLeftBorderRadius = false,
shouldEnableHapticFeedback = false,
isLongPressDisabled = false,
+ shouldShowRightIcon = false,
id = '',
accessibilityLabel = '',
@@ -202,14 +204,13 @@ function Button(
) {
const theme = useTheme();
const styles = useThemeStyles();
+ const StyleUtils = useStyleUtils();
const renderContent = () => {
if ('children' in rest) {
return rest.children;
}
- const {text = '', icon = null, shouldShowRightIcon = false} = rest;
-
const textComponent = (
{icon && (
-
+
)}
{textComponent}
{shouldShowRightIcon && (
-
+
)}
@@ -310,9 +316,7 @@ function Button(
]}
style={[
styles.button,
- small ? styles.buttonSmall : undefined,
- medium ? styles.buttonMedium : undefined,
- large ? styles.buttonLarge : undefined,
+ StyleUtils.getButtonStyleWithIcon(styles, small, medium, large, Boolean(icon), Boolean(text?.length > 0), shouldShowRightIcon),
success ? styles.buttonSuccess : undefined,
danger ? styles.buttonDanger : undefined,
isDisabled ? styles.buttonOpacityDisabled : undefined,
@@ -320,7 +324,7 @@ function Button(
shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
- 'text' in rest && rest?.shouldShowRightIcon ? styles.alignItemsStretch : undefined,
+ text && shouldShowRightIcon ? styles.alignItemsStretch : undefined,
innerStyles,
]}
hoverStyle={[
diff --git a/src/components/ConfirmContent.tsx b/src/components/ConfirmContent.tsx
index c0c146bbae08..26331f92401c 100644
--- a/src/components/ConfirmContent.tsx
+++ b/src/components/ConfirmContent.tsx
@@ -145,6 +145,7 @@ function ConfirmContent({
style={[styles.mt4]}
onPress={onConfirm}
pressOnEnter
+ large
text={confirmText || translate('common.yes')}
isDisabled={isOffline && shouldDisableConfirmButtonWhenOffline}
/>
@@ -152,6 +153,7 @@ function ConfirmContent({
ReimbursementAccount.navigateToBankAccountRoute(policyID, activeRoute)}
icon={Expensicons.Bank}
style={style}
- iconStyles={styles.buttonCTAIcon}
shouldShowRightIcon
large
success
diff --git a/src/components/DistanceRequest/DistanceRequestFooter.tsx b/src/components/DistanceRequest/DistanceRequestFooter.tsx
index f86d5369d4ac..624ea940888b 100644
--- a/src/components/DistanceRequest/DistanceRequestFooter.tsx
+++ b/src/components/DistanceRequest/DistanceRequestFooter.tsx
@@ -96,7 +96,7 @@ function DistanceRequestFooter({waypoints, transaction, mapboxAccessToken, navig
onPress={() => navigateToWaypointEditPage(Object.keys(transaction?.comment?.waypoints ?? {}).length)}
text={translate('distance.addStop')}
isDisabled={numberOfWaypoints === MAX_WAYPOINTS}
- innerStyles={[styles.ph10]}
+ innerStyles={[styles.pl10, styles.pr10]}
/>
)}
diff --git a/src/components/DistanceRequest/index.tsx b/src/components/DistanceRequest/index.tsx
index ee435f77dbfb..05421937d30e 100644
--- a/src/components/DistanceRequest/index.tsx
+++ b/src/components/DistanceRequest/index.tsx
@@ -279,6 +279,7 @@ function DistanceRequest({transactionID = '', report, transaction, route, isEdit
{
diff --git a/src/components/FeatureList.tsx b/src/components/FeatureList.tsx
index f46b289b88d7..5f713d5f3aef 100644
--- a/src/components/FeatureList.tsx
+++ b/src/components/FeatureList.tsx
@@ -81,7 +81,6 @@ function FeatureList({
icon={icon}
iconWidth={variables.avatarSizeMedium}
iconHeight={variables.avatarSizeMedium}
- iconStyles={styles.mr2}
interactive={false}
displayInDefaultIconColor
wrapperStyle={[styles.p0, styles.cursorAuto]}
@@ -96,6 +95,7 @@ function FeatureList({
accessibilityLabel={ctaAccessibilityLabel}
style={styles.w100}
success
+ large
/>
diff --git a/src/components/Form/FormProvider.tsx b/src/components/Form/FormProvider.tsx
index ee3b3607401e..e9c5b80b37ac 100644
--- a/src/components/Form/FormProvider.tsx
+++ b/src/components/Form/FormProvider.tsx
@@ -1,5 +1,5 @@
import lodashIsEqual from 'lodash/isEqual';
-import type {ForwardedRef, MutableRefObject, ReactNode} from 'react';
+import type {ForwardedRef, MutableRefObject, ReactNode, RefAttributes} from 'react';
import React, {createRef, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
import type {NativeSyntheticEvent, StyleProp, TextInputSubmitEditingEventData, ViewStyle} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
@@ -18,7 +18,7 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject';
import type {RegisterInput} from './FormContext';
import FormContext from './FormContext';
import FormWrapper from './FormWrapper';
-import type {FormInputErrors, FormOnyxValues, FormProps, InputComponentBaseProps, InputRefs, ValueTypeKey} from './types';
+import type {FormInputErrors, FormOnyxValues, FormProps, FormRef, InputComponentBaseProps, InputRefs, ValueTypeKey} from './types';
// In order to prevent Checkbox focus loss when the user are focusing a TextInput and proceeds to toggle a CheckBox in web and mobile web.
// 200ms delay was chosen as a result of empirical testing.
@@ -73,10 +73,6 @@ type FormProviderProps = FormProvider
submitFlexEnabled?: boolean;
};
-type FormRef = {
- resetForm: (optionalValue: FormOnyxValues) => void;
-};
-
function FormProvider(
{
formID,
@@ -393,6 +389,6 @@ export default withOnyx({
// eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-explicit-any
key: (props) => `${props.formID}Draft` as any,
},
-})(forwardRef(FormProvider)) as (props: Omit, keyof FormProviderOnyxProps>) => ReactNode;
+})(forwardRef(FormProvider)) as (props: Omit & RefAttributes, keyof FormProviderOnyxProps>) => ReactNode;
export type {FormProviderProps};
diff --git a/src/components/Form/types.ts b/src/components/Form/types.ts
index 33d127308449..8df5c0287d3b 100644
--- a/src/components/Form/types.ts
+++ b/src/components/Form/types.ts
@@ -1,6 +1,7 @@
import type {ComponentType, FocusEvent, Key, MutableRefObject, ReactNode, Ref} from 'react';
import type {GestureResponderEvent, NativeSyntheticEvent, StyleProp, TextInputFocusEventData, TextInputSubmitEditingEventData, ViewStyle} from 'react-native';
import type {ValueOf} from 'type-fest';
+import type AddPlaidBankAccount from '@components/AddPlaidBankAccount';
import type AddressSearch from '@components/AddressSearch';
import type AmountForm from '@components/AmountForm';
import type AmountTextInput from '@components/AmountTextInput';
@@ -41,7 +42,8 @@ type ValidInputs =
| typeof RoomNameInput
| typeof ValuePicker
| typeof DatePicker
- | typeof RadioButtons;
+ | typeof RadioButtons
+ | typeof AddPlaidBankAccount;
type ValueTypeKey = 'string' | 'boolean' | 'date' | 'country';
type ValueTypeMap = {
@@ -128,8 +130,25 @@ type FormProps = {
disablePressOnEnter?: boolean;
};
+type FormRef = {
+ resetForm: (optionalValue: FormOnyxValues) => void;
+};
+
type InputRefs = Record>;
type FormInputErrors = Partial, MaybePhraseKey>>;
-export type {FormProps, ValidInputs, InputComponentValueProps, FormValue, ValueTypeKey, FormOnyxValues, FormOnyxKeys, FormInputErrors, InputRefs, InputComponentBaseProps, ValueTypeMap};
+export type {
+ FormProps,
+ ValidInputs,
+ InputComponentValueProps,
+ FormValue,
+ ValueTypeKey,
+ FormOnyxValues,
+ FormOnyxKeys,
+ FormInputErrors,
+ InputRefs,
+ InputComponentBaseProps,
+ ValueTypeMap,
+ FormRef,
+};
diff --git a/src/components/FormAlertWithSubmitButton.tsx b/src/components/FormAlertWithSubmitButton.tsx
index 270d476f4f79..27db5687a925 100644
--- a/src/components/FormAlertWithSubmitButton.tsx
+++ b/src/components/FormAlertWithSubmitButton.tsx
@@ -96,6 +96,7 @@ function FormAlertWithSubmitButton({
style={style}
danger={isSubmitActionDangerous}
medium={useSmallerSubmitButtonSize}
+ large={!useSmallerSubmitButtonSize}
/>
) : (
;
@@ -50,6 +59,9 @@ function Icon({
height = variables.iconSizeNormal,
fill = undefined,
small = false,
+ hasText = false,
+ large = false,
+ medium = false,
inline = false,
additionalStyles = [],
hovered = false,
@@ -59,8 +71,7 @@ function Icon({
}: IconProps) {
const StyleUtils = useStyleUtils();
const styles = useThemeStyles();
- const iconWidth = small ? variables.iconSizeSmall : width;
- const iconHeight = small ? variables.iconSizeSmall : height;
+ const {width: iconWidth, height: iconHeight} = StyleUtils.getIconWidthAndHeightStyle(small, medium, large, width, height, hasText);
const iconStyles = [StyleUtils.getWidthAndHeightStyle(width ?? 0, height), IconWrapperStyles, styles.pAbsolute, additionalStyles];
if (inline) {
diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx
index 2bad8322c8d9..6b562525258d 100755
--- a/src/components/MoneyRequestConfirmationList.tsx
+++ b/src/components/MoneyRequestConfirmationList.tsx
@@ -785,7 +785,7 @@ function MoneyRequestConfirmationList({
{
diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
index 968e1dfbfdca..5a9f96453987 100755
--- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
+++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js
@@ -717,7 +717,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({
;
@@ -181,7 +153,7 @@ function PopoverMenu({
const onModalHide = () => {
setFocusedIndex(-1);
if (selectedItemIndex.current !== null) {
- currentMenuItems[selectedItemIndex.current].onSelected();
+ currentMenuItems[selectedItemIndex.current].onSelected?.();
selectedItemIndex.current = null;
}
};
diff --git a/src/components/ProcessMoneyRequestHoldMenu.tsx b/src/components/ProcessMoneyRequestHoldMenu.tsx
index f1dc47b8556b..eefab719a103 100644
--- a/src/components/ProcessMoneyRequestHoldMenu.tsx
+++ b/src/components/ProcessMoneyRequestHoldMenu.tsx
@@ -53,6 +53,7 @@ function ProcessMoneyRequestHoldMenu({isVisible, onClose, onConfirm, anchorPosit
style={[styles.mt5]}
text={translate('common.buttonConfirm')}
onPress={onConfirm}
+ large
/>
diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx
index 2af07701c5d3..303b90a682e6 100644
--- a/src/components/SelectionList/BaseListItem.tsx
+++ b/src/components/SelectionList/BaseListItem.tsx
@@ -4,6 +4,7 @@ import Icon from '@components/Icon';
import * as Expensicons from '@components/Icon/Expensicons';
import OfflineWithFeedback from '@components/OfflineWithFeedback';
import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import SelectCircle from '@components/SelectCircle';
import useHover from '@hooks/useHover';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
@@ -23,6 +24,7 @@ function BaseListItem({
onCheckboxPress,
onDismissError = () => {},
rightHandSideComponent,
+ checkmarkPosition = CONST.DIRECTION.LEFT,
keyForList,
errors,
pendingAction,
@@ -76,7 +78,7 @@ function BaseListItem({
style={pressableStyle}
>
- {canSelectMultiple && (
+ {canSelectMultiple && checkmarkPosition === CONST.DIRECTION.LEFT && (
({
{typeof children === 'function' ? children(hovered) : children}
+ {canSelectMultiple && checkmarkPosition === CONST.DIRECTION.RIGHT && (
+
+
+ )}
+
{!canSelectMultiple && item.isSelected && !rightHandSideComponent && (
(
shouldShowTooltips = true,
shouldUseDynamicMaxToRenderPerBatch = false,
rightHandSideComponent,
+ checkmarkPosition,
isLoadingNewOptions = false,
onLayout,
customListHeader,
@@ -330,6 +331,7 @@ function BaseSelectionList(
onDismissError={() => onDismissError?.(item)}
shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
rightHandSideComponent={rightHandSideComponent}
+ checkmarkPosition={checkmarkPosition}
keyForList={item.keyForList ?? ''}
isMultilineSupported={isRowMultilineSupported}
/>
@@ -555,6 +557,7 @@ function BaseSelectionList(
<>
diff --git a/src/components/SelectionList/TableListItem.tsx b/src/components/SelectionList/TableListItem.tsx
index bc798c64dbc9..6a5630bc9df6 100644
--- a/src/components/SelectionList/TableListItem.tsx
+++ b/src/components/SelectionList/TableListItem.tsx
@@ -19,6 +19,7 @@ function TableListItem({
onDismissError,
shouldPreventDefaultFocusOnSelectRow,
rightHandSideComponent,
+ checkmarkPosition,
}: TableListItemProps) {
const styles = useThemeStyles();
const theme = useTheme();
@@ -42,6 +43,7 @@ function TableListItem({
onDismissError={onDismissError}
shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
rightHandSideComponent={rightHandSideComponent}
+ checkmarkPosition={checkmarkPosition}
errors={item.errors}
pendingAction={item.pendingAction}
keyForList={item.keyForList}
diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx
index 2a3a8dd04a79..b52289ffdb59 100644
--- a/src/components/SelectionList/UserListItem.tsx
+++ b/src/components/SelectionList/UserListItem.tsx
@@ -23,6 +23,7 @@ function UserListItem({
onDismissError,
shouldPreventDefaultFocusOnSelectRow,
rightHandSideComponent,
+ checkmarkPosition,
}: UserListItemProps) {
const styles = useThemeStyles();
const theme = useTheme();
@@ -47,6 +48,7 @@ function UserListItem({
onDismissError={onDismissError}
shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
rightHandSideComponent={rightHandSideComponent}
+ checkmarkPosition={checkmarkPosition}
errors={item.errors}
pendingAction={item.pendingAction}
FooterComponent={
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index 08b10369e31f..9e9ba7e5fc27 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -1,5 +1,6 @@
import type {MutableRefObject, ReactElement, ReactNode} from 'react';
import type {GestureResponderEvent, InputModeOptions, LayoutChangeEvent, SectionListData, StyleProp, TextInput, TextStyle, ViewStyle} from 'react-native';
+import type {ValueOf} from 'type-fest';
import type {MaybePhraseKey} from '@libs/Localize';
import type CONST from '@src/CONST';
import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
@@ -34,6 +35,9 @@ type CommonListItemProps = {
/** Component to display on the right side */
rightHandSideComponent?: ((item: TItem) => ReactElement) | ReactElement | null;
+ /** Direction of checkmark to show */
+ checkmarkPosition?: ValueOf;
+
/** Styles for the pressable component */
pressableStyle?: StyleProp;
@@ -270,6 +274,9 @@ type BaseSelectionListProps = Partial & {
/** Component to display on the right side of each child */
rightHandSideComponent?: ((item: ListItem) => ReactElement) | ReactElement | null;
+ /** Direction of checkmark to show */
+ checkmarkPosition?: ValueOf;
+
/** Whether to show the loading indicator for new options */
isLoadingNewOptions?: boolean;
diff --git a/src/components/TimePicker/TimePicker.js b/src/components/TimePicker/TimePicker.js
index f57f2540dfb3..95af2bc0c1b5 100644
--- a/src/components/TimePicker/TimePicker.js
+++ b/src/components/TimePicker/TimePicker.js
@@ -511,6 +511,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
shouldEnableHapticFeedback
innerStyles={styleForAM}
medium={isExtraSmallScreenHeight}
+ large={!isExtraSmallScreenHeight}
text={translate('common.am')}
onLongPress={() => {}}
onPress={() => {
@@ -523,6 +524,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
shouldEnableHapticFeedback
innerStyles={[...styleForPM, styles.ml1]}
medium={isExtraSmallScreenHeight}
+ large={!isExtraSmallScreenHeight}
text={translate('common.pm')}
onLongPress={() => {}}
onPress={() => {
@@ -551,6 +553,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
(null);
-function PlaybackContextProvider({children}) {
- const [currentlyPlayingURL, setCurrentlyPlayingURL] = useState(null);
- const [sharedElement, setSharedElement] = useState(null);
- const [originalParent, setOriginalParent] = useState(null);
- const currentVideoPlayerRef = useRef(null);
- const {currentReportID} = useCurrentReportID();
+function PlaybackContextProvider({children}: ChildrenProps) {
+ const [currentlyPlayingURL, setCurrentlyPlayingURL] = useState(null);
+ const [sharedElement, setSharedElement] = useState(null);
+ const [originalParent, setOriginalParent] = useState(null);
+ const currentVideoPlayerRef = useRef(null);
+ const {currentReportID} = useCurrentReportID() ?? {};
const pauseVideo = useCallback(() => {
- if (!(currentVideoPlayerRef && currentVideoPlayerRef.current && currentVideoPlayerRef.current.setStatusAsync)) {
- return;
- }
- currentVideoPlayerRef.current.setStatusAsync({shouldPlay: false});
+ currentVideoPlayerRef.current?.setStatusAsync({shouldPlay: false});
}, [currentVideoPlayerRef]);
const stopVideo = useCallback(() => {
- if (!(currentVideoPlayerRef && currentVideoPlayerRef.current && currentVideoPlayerRef.current.stopAsync)) {
- return;
- }
- currentVideoPlayerRef.current.stopAsync({shouldPlay: false});
+ currentVideoPlayerRef.current?.stopAsync();
}, [currentVideoPlayerRef]);
const playVideo = useCallback(() => {
- if (!(currentVideoPlayerRef && currentVideoPlayerRef.current && currentVideoPlayerRef.current.setStatusAsync)) {
- return;
- }
- currentVideoPlayerRef.current.getStatusAsync().then((status) => {
- const newStatus = {shouldPlay: true};
- if (status.durationMillis === status.positionMillis) {
+ currentVideoPlayerRef.current?.getStatusAsync().then((status) => {
+ const newStatus: AVPlaybackStatusToSet = {shouldPlay: true};
+ if ('durationMillis' in status && status.durationMillis === status.positionMillis) {
newStatus.positionMillis = 0;
}
- currentVideoPlayerRef.current.setStatusAsync(newStatus);
+ currentVideoPlayerRef.current?.setStatusAsync(newStatus);
});
}, [currentVideoPlayerRef]);
const unloadVideo = useCallback(() => {
- if (!(currentVideoPlayerRef && currentVideoPlayerRef.current && currentVideoPlayerRef.current.unloadAsync)) {
- return;
- }
- currentVideoPlayerRef.current.unloadAsync();
+ currentVideoPlayerRef.current?.unloadAsync();
}, [currentVideoPlayerRef]);
const updateCurrentlyPlayingURL = useCallback(
- (url) => {
+ (url: string) => {
if (currentlyPlayingURL && url !== currentlyPlayingURL) {
pauseVideo();
}
@@ -56,7 +47,7 @@ function PlaybackContextProvider({children}) {
);
const shareVideoPlayerElements = useCallback(
- (ref, parent, child, isUploading) => {
+ (ref: Video, parent: View, child: View, isUploading: boolean) => {
currentVideoPlayerRef.current = ref;
setOriginalParent(parent);
setSharedElement(child);
@@ -69,12 +60,9 @@ function PlaybackContextProvider({children}) {
);
const checkVideoPlaying = useCallback(
- (statusCallback) => {
- if (!(currentVideoPlayerRef && currentVideoPlayerRef.current && currentVideoPlayerRef.current.getStatusAsync)) {
- return;
- }
- currentVideoPlayerRef.current.getStatusAsync().then((status) => {
- statusCallback(status.isPlaying);
+ (statusCallback: StatusCallback) => {
+ currentVideoPlayerRef.current?.getStatusAsync().then((status) => {
+ statusCallback('isPlaying' in status && status.isPlaying);
});
},
[currentVideoPlayerRef],
@@ -110,21 +98,17 @@ function PlaybackContextProvider({children}) {
}),
[updateCurrentlyPlayingURL, currentlyPlayingURL, originalParent, sharedElement, shareVideoPlayerElements, playVideo, pauseVideo, checkVideoPlaying],
);
- return {children} ;
+ return {children} ;
}
function usePlaybackContext() {
- const context = useContext(PlaybackContext);
- if (context === undefined) {
+ const playbackContext = useContext(Context);
+ if (!playbackContext) {
throw new Error('usePlaybackContext must be used within a PlaybackContextProvider');
}
- return context;
+ return playbackContext;
}
PlaybackContextProvider.displayName = 'PlaybackContextProvider';
-PlaybackContextProvider.propTypes = {
- /** Actual content wrapped by this component */
- children: PropTypes.node.isRequired,
-};
export {PlaybackContextProvider, usePlaybackContext};
diff --git a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.js b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
similarity index 59%
rename from src/components/VideoPlayerContexts/VideoPopoverMenuContext.js
rename to src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
index 4a5c15080c98..0a53801683c3 100644
--- a/src/components/VideoPlayerContexts/VideoPopoverMenuContext.js
+++ b/src/components/VideoPlayerContexts/VideoPopoverMenuContext.tsx
@@ -1,38 +1,42 @@
-import PropTypes from 'prop-types';
import React, {useCallback, useContext, useMemo, useState} from 'react';
-import _ from 'underscore';
import * as Expensicons from '@components/Icon/Expensicons';
+import type {PopoverMenuItem} from '@components/PopoverMenu';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
import fileDownload from '@libs/fileDownload';
import CONST from '@src/CONST';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
import {usePlaybackContext} from './PlaybackContext';
+import type {PlaybackSpeed, VideoPopoverMenuContext} from './types';
-const VideoPopoverMenuContext = React.createContext(null);
+const Context = React.createContext(null);
-function VideoPopoverMenuContextProvider({children}) {
+function VideoPopoverMenuContextProvider({children}: ChildrenProps) {
const {currentVideoPlayerRef, currentlyPlayingURL} = usePlaybackContext();
const {translate} = useLocalize();
- const [currentPlaybackSpeed, setCurrentPlaybackSpeed] = useState(CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS[2]);
+ const [currentPlaybackSpeed, setCurrentPlaybackSpeed] = useState(CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS[2]);
const {isOffline} = useNetwork();
- const isLocalFile = currentlyPlayingURL && _.some(CONST.ATTACHMENT_LOCAL_URL_PREFIX, (prefix) => currentlyPlayingURL.startsWith(prefix));
+ const isLocalFile = currentlyPlayingURL && CONST.ATTACHMENT_LOCAL_URL_PREFIX.some((prefix) => currentlyPlayingURL.startsWith(prefix));
const updatePlaybackSpeed = useCallback(
- (speed) => {
+ (speed: PlaybackSpeed) => {
setCurrentPlaybackSpeed(speed);
- currentVideoPlayerRef.current.setStatusAsync({rate: speed});
+ currentVideoPlayerRef.current?.setStatusAsync({rate: speed});
},
[currentVideoPlayerRef],
);
const downloadAttachment = useCallback(() => {
+ if (currentlyPlayingURL === null) {
+ return;
+ }
const sourceURI = addEncryptedAuthTokenToURL(currentlyPlayingURL);
fileDownload(sourceURI);
}, [currentlyPlayingURL]);
const menuItems = useMemo(() => {
- const items = [];
+ const items: PopoverMenuItem[] = [];
if (!isOffline && !isLocalFile) {
items.push({
@@ -47,37 +51,30 @@ function VideoPopoverMenuContextProvider({children}) {
items.push({
icon: Expensicons.Meter,
text: translate('videoPlayer.playbackSpeed'),
- subMenuItems: [
- ..._.map(CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS, (speed) => ({
- icon: currentPlaybackSpeed === speed ? Expensicons.Checkmark : null,
- text: speed.toString(),
- onSelected: () => {
- updatePlaybackSpeed(speed);
- },
- shouldPutLeftPaddingWhenNoIcon: true,
- })),
- ],
+ subMenuItems: CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS.map((speed) => ({
+ icon: currentPlaybackSpeed === speed ? Expensicons.Checkmark : undefined,
+ text: speed.toString(),
+ onSelected: () => {
+ updatePlaybackSpeed(speed);
+ },
+ shouldPutLeftPaddingWhenNoIcon: true,
+ })),
});
-
return items;
}, [currentPlaybackSpeed, downloadAttachment, translate, updatePlaybackSpeed, isOffline, isLocalFile]);
const contextValue = useMemo(() => ({menuItems, updatePlaybackSpeed}), [menuItems, updatePlaybackSpeed]);
- return {children} ;
+ return {children} ;
}
function useVideoPopoverMenuContext() {
- const context = useContext(VideoPopoverMenuContext);
- if (context === undefined) {
+ const videoPopooverMenuContext = useContext(Context);
+ if (!videoPopooverMenuContext) {
throw new Error('useVideoPopoverMenuContext must be used within a VideoPopoverMenuContext');
}
- return context;
+ return videoPopooverMenuContext;
}
VideoPopoverMenuContextProvider.displayName = 'VideoPopoverMenuContextProvider';
-VideoPopoverMenuContextProvider.propTypes = {
- /** Actual content wrapped by this component */
- children: PropTypes.node.isRequired,
-};
export {VideoPopoverMenuContextProvider, useVideoPopoverMenuContext};
diff --git a/src/components/VideoPlayerContexts/VolumeContext.js b/src/components/VideoPlayerContexts/VolumeContext.tsx
similarity index 73%
rename from src/components/VideoPlayerContexts/VolumeContext.js
rename to src/components/VideoPlayerContexts/VolumeContext.tsx
index a0b972d37a0d..d67b989e5887 100644
--- a/src/components/VideoPlayerContexts/VolumeContext.js
+++ b/src/components/VideoPlayerContexts/VolumeContext.tsx
@@ -1,16 +1,17 @@
-import PropTypes from 'prop-types';
import React, {useCallback, useContext, useEffect, useMemo} from 'react';
import {useSharedValue} from 'react-native-reanimated';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
import {usePlaybackContext} from './PlaybackContext';
+import type {VolumeContext} from './types';
-const VolumeContext = React.createContext(null);
+const Context = React.createContext(null);
-function VolumeContextProvider({children}) {
+function VolumeContextProvider({children}: ChildrenProps) {
const {currentVideoPlayerRef, originalParent} = usePlaybackContext();
const volume = useSharedValue(0);
const updateVolume = useCallback(
- (newVolume) => {
+ (newVolume: number) => {
if (!currentVideoPlayerRef.current) {
return;
}
@@ -30,21 +31,17 @@ function VolumeContextProvider({children}) {
}, [originalParent, updateVolume, volume.value]);
const contextValue = useMemo(() => ({updateVolume, volume}), [updateVolume, volume]);
- return {children} ;
+ return {children} ;
}
function useVolumeContext() {
- const context = useContext(VolumeContext);
- if (context === undefined) {
+ const volumeContext = useContext(Context);
+ if (!volumeContext) {
throw new Error('useVolumeContext must be used within a VolumeContextProvider');
}
- return context;
+ return volumeContext;
}
VolumeContextProvider.displayName = 'VolumeContextProvider';
-VolumeContextProvider.propTypes = {
- /** Actual content wrapped by this component */
- children: PropTypes.node.isRequired,
-};
export {VolumeContextProvider, useVolumeContext};
diff --git a/src/components/VideoPlayerContexts/types.ts b/src/components/VideoPlayerContexts/types.ts
new file mode 100644
index 000000000000..4abaaf7debb9
--- /dev/null
+++ b/src/components/VideoPlayerContexts/types.ts
@@ -0,0 +1,34 @@
+import type {Video} from 'expo-av';
+import type {MutableRefObject} from 'react';
+import type {View} from 'react-native';
+import type {SharedValue} from 'react-native-reanimated';
+import type {PopoverMenuItem} from '@components/PopoverMenu';
+import type CONST from '@src/CONST';
+
+type PlaybackContext = {
+ updateCurrentlyPlayingURL: (url: string) => void;
+ currentlyPlayingURL: string | null;
+ originalParent: View | null;
+ sharedElement: View | null;
+ currentVideoPlayerRef: MutableRefObject;
+ shareVideoPlayerElements: (ref: Video, parent: View, child: View, isUploading: boolean) => void;
+ playVideo: () => void;
+ pauseVideo: () => void;
+ checkVideoPlaying: (statusCallback: StatusCallback) => void;
+};
+
+type VolumeContext = {
+ updateVolume: (newVolume: number) => void;
+ volume: SharedValue;
+};
+
+type VideoPopoverMenuContext = {
+ menuItems: PopoverMenuItem[];
+ updatePlaybackSpeed: (speed: PlaybackSpeed) => void;
+};
+
+type StatusCallback = (isPlaying: boolean) => void;
+
+type PlaybackSpeed = (typeof CONST.VIDEO_PLAYER.PLAYBACK_SPEEDS)[number];
+
+export type {PlaybackContext, VolumeContext, VideoPopoverMenuContext, StatusCallback, PlaybackSpeed};
diff --git a/src/hooks/useArrowKeyFocusManager.ts b/src/hooks/useArrowKeyFocusManager.ts
index 78ffc7f87209..b11999d61cf3 100644
--- a/src/hooks/useArrowKeyFocusManager.ts
+++ b/src/hooks/useArrowKeyFocusManager.ts
@@ -12,6 +12,7 @@ type Config = {
itemsPerRow?: number;
disableCyclicTraversal?: boolean;
disableHorizontalKeys?: boolean;
+ allowNegativeIndexes?: boolean;
};
type UseArrowKeyFocusManager = [number, (index: number) => void];
@@ -44,6 +45,7 @@ export default function useArrowKeyFocusManager({
itemsPerRow,
disableCyclicTraversal = false,
disableHorizontalKeys = false,
+ allowNegativeIndexes = false,
}: Config): UseArrowKeyFocusManager {
const allowHorizontalArrowKeys = !!itemsPerRow;
const [focusedIndex, setFocusedIndex] = useState(initialFocusedIndex);
@@ -84,7 +86,13 @@ export default function useArrowKeyFocusManager({
while (disabledIndexes.includes(newFocusedIndex)) {
newFocusedIndex -= allowHorizontalArrowKeys ? itemsPerRow : 1;
if (newFocusedIndex < 0) {
- break;
+ if (disableCyclicTraversal) {
+ if (!allowNegativeIndexes) {
+ return actualIndex;
+ }
+ break;
+ }
+ newFocusedIndex = maxIndex;
}
if (newFocusedIndex === currentFocusedIndex) {
// all indexes are disabled
@@ -93,7 +101,7 @@ export default function useArrowKeyFocusManager({
}
return newFocusedIndex;
});
- }, [allowHorizontalArrowKeys, disableCyclicTraversal, disabledIndexes, itemsPerRow, maxIndex]);
+ }, [allowHorizontalArrowKeys, disableCyclicTraversal, disabledIndexes, itemsPerRow, maxIndex, allowNegativeIndexes]);
useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ARROW_UP, arrowUpCallback, arrowConfig);
@@ -127,8 +135,11 @@ export default function useArrowKeyFocusManager({
newFocusedIndex += allowHorizontalArrowKeys ? itemsPerRow : 1;
}
- if (newFocusedIndex < 0) {
- break;
+ if (newFocusedIndex > maxIndex) {
+ if (disableCyclicTraversal) {
+ return actualIndex;
+ }
+ newFocusedIndex = 0;
}
if (newFocusedIndex === currentFocusedIndex) {
// all indexes are disabled
diff --git a/src/hooks/useReimbursementAccountStepFormSubmit.ts b/src/hooks/useReimbursementAccountStepFormSubmit.ts
index f3a17447c7d7..98f079dd2447 100644
--- a/src/hooks/useReimbursementAccountStepFormSubmit.ts
+++ b/src/hooks/useReimbursementAccountStepFormSubmit.ts
@@ -5,28 +5,29 @@ import type {OnyxFormKey} from '@src/ONYXKEYS';
import ONYXKEYS from '@src/ONYXKEYS';
import type {SubStepProps} from './useSubStep/types';
-type UseReimbursementAccountStepFormSubmitParams = Pick & {
+type UseReimbursementAccountStepFormSubmitParams = Pick & {
formId?: OnyxFormKey;
fieldIds: Array>;
+ shouldSaveDraft: boolean;
};
/**
* Hook for handling submit method in ReimbursementAccount substeps.
* When user is in editing mode we should save values only when user confirm that
* @param formId - ID for particular form
- * @param isEditing - if form is in editing mode
* @param onNext - callback
* @param fieldIds - field IDs for particular step
+ * @param shouldSaveDraft - if we should save draft values
*/
export default function useReimbursementAccountStepFormSubmit({
formId = ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM,
- isEditing,
onNext,
fieldIds,
+ shouldSaveDraft,
}: UseReimbursementAccountStepFormSubmitParams) {
return useCallback(
(values: FormOnyxValues) => {
- if (isEditing) {
+ if (shouldSaveDraft) {
const stepValues = fieldIds.reduce(
(acc, key) => ({
...acc,
@@ -40,6 +41,6 @@ export default function useReimbursementAccountStepFormSubmit({
onNext();
},
- [isEditing, onNext, formId, fieldIds],
+ [onNext, formId, fieldIds, shouldSaveDraft],
);
}
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 6ec5983583fc..eecd81c54123 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -1789,6 +1789,7 @@ export default {
},
genericFailureMessage: 'An error occurred while updating the category, please try again.',
addCategory: 'Add category',
+ editCategory: 'Edit category',
categoryRequiredError: 'Category name is required.',
existingCategoryError: 'A category with this name already exists.',
invalidCategoryName: 'Invalid category name.',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index c2eb6374affa..cd36f9071de6 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -1813,6 +1813,7 @@ export default {
},
genericFailureMessage: 'Se ha producido un error al intentar eliminar la categoría. Por favor, inténtalo más tarde.',
addCategory: 'Añadir categoría',
+ editCategory: 'Editar categoría',
categoryRequiredError: 'Lo nombre de la categoría es obligatorio.',
existingCategoryError: 'Ya existe una categoría con este nombre.',
invalidCategoryName: 'Lo nombre de la categoría es invalido.',
diff --git a/src/libs/API/parameters/RenameWorkspaceCategoriesParams.ts b/src/libs/API/parameters/RenameWorkspaceCategoriesParams.ts
new file mode 100644
index 000000000000..4ed07858564f
--- /dev/null
+++ b/src/libs/API/parameters/RenameWorkspaceCategoriesParams.ts
@@ -0,0 +1,10 @@
+type RenameWorkspaceCategoriesParams = {
+ policyID: string;
+ /**
+ * Stringified JSON object with type of following structure:
+ * {[oldName: string]: string;} where value is new category name
+ */
+ categories: string;
+};
+
+export default RenameWorkspaceCategoriesParams;
diff --git a/src/libs/API/parameters/index.ts b/src/libs/API/parameters/index.ts
index 25c336753203..302b980685e1 100644
--- a/src/libs/API/parameters/index.ts
+++ b/src/libs/API/parameters/index.ts
@@ -151,6 +151,7 @@ export type {default as UpdateWorkspaceDescriptionParams} from './UpdateWorkspac
export type {default as UpdateWorkspaceMembersRoleParams} from './UpdateWorkspaceMembersRoleParams';
export type {default as SetWorkspaceCategoriesEnabledParams} from './SetWorkspaceCategoriesEnabledParams';
export type {default as CreateWorkspaceCategoriesParams} from './CreateWorkspaceCategoriesParams';
+export type {default as RenameWorkspaceCategoriesParams} from './RenameWorkspaceCategoriesParams';
export type {default as SetWorkspaceRequiresCategoryParams} from './SetWorkspaceRequiresCategoryParams';
export type {default as DeleteWorkspaceCategoriesParams} from './DeleteWorkspaceCategoriesParams';
export type {default as SetWorkspaceAutoReportingParams} from './SetWorkspaceAutoReportingParams';
diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts
index 07f1ca09d7c5..50b6206bc341 100644
--- a/src/libs/API/types.ts
+++ b/src/libs/API/types.ts
@@ -118,6 +118,7 @@ const WRITE_COMMANDS = {
CREATE_WORKSPACE_FROM_IOU_PAYMENT: 'CreateWorkspaceFromIOUPayment',
SET_WORKSPACE_CATEGORIES_ENABLED: 'SetWorkspaceCategoriesEnabled',
CREATE_WORKSPACE_CATEGORIES: 'CreateWorkspaceCategories',
+ RENAME_WORKSPACE_CATEGORY: 'RenameWorkspaceCategory',
CREATE_POLICY_TAG: 'CreatePolicyTag',
SET_WORKSPACE_REQUIRES_CATEGORY: 'SetWorkspaceRequiresCategory',
DELETE_WORKSPACE_CATEGORIES: 'DeleteWorkspaceCategories',
@@ -282,6 +283,7 @@ type WriteCommandParameters = {
[WRITE_COMMANDS.CREATE_WORKSPACE_FROM_IOU_PAYMENT]: Parameters.CreateWorkspaceFromIOUPaymentParams;
[WRITE_COMMANDS.SET_WORKSPACE_CATEGORIES_ENABLED]: Parameters.SetWorkspaceCategoriesEnabledParams;
[WRITE_COMMANDS.CREATE_WORKSPACE_CATEGORIES]: Parameters.CreateWorkspaceCategoriesParams;
+ [WRITE_COMMANDS.RENAME_WORKSPACE_CATEGORY]: Parameters.RenameWorkspaceCategoriesParams;
[WRITE_COMMANDS.SET_WORKSPACE_REQUIRES_CATEGORY]: Parameters.SetWorkspaceRequiresCategoryParams;
[WRITE_COMMANDS.DELETE_WORKSPACE_CATEGORIES]: Parameters.DeleteWorkspaceCategoriesParams;
[WRITE_COMMANDS.SET_POLICY_REQUIRES_TAG]: Parameters.SetPolicyRequiresTag;
diff --git a/src/libs/KeyboardShortcut/index.ts b/src/libs/KeyboardShortcut/index.ts
index 0571f5e271ab..b349c43b5715 100644
--- a/src/libs/KeyboardShortcut/index.ts
+++ b/src/libs/KeyboardShortcut/index.ts
@@ -132,10 +132,10 @@ function getPlatformEquivalentForKeys(keys: ShortcutModifiers): string[] {
function subscribe(
key: string,
callback: (event?: KeyboardEvent) => void,
- descriptionKey: string,
+ descriptionKey: string | null,
modifiers: ShortcutModifiers = ['CTRL'],
captureOnInputs = false,
- shouldBubble = false,
+ shouldBubble: boolean | (() => boolean) = false,
priority = 0,
shouldPreventDefault = true,
excludedNodes: string[] = [],
diff --git a/src/libs/LocaleUtils.ts b/src/libs/LocaleUtils.ts
new file mode 100644
index 000000000000..1a63cbf579d5
--- /dev/null
+++ b/src/libs/LocaleUtils.ts
@@ -0,0 +1,17 @@
+import type {ValueOf} from 'type-fest';
+import CONST from '@src/CONST';
+
+function getLanguageFromLocale(locale: ValueOf): (typeof CONST.LANGUAGES)[number] {
+ switch (locale) {
+ case CONST.LOCALES.ES_ES:
+ case CONST.LOCALES.ES_ES_ONFIDO:
+ case CONST.LOCALES.ES:
+ return CONST.LOCALES.ES;
+ case CONST.LOCALES.EN:
+ return CONST.LOCALES.EN;
+ default:
+ return CONST.LOCALES.DEFAULT;
+ }
+}
+
+export default {getLanguageFromLocale};
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
index a4d7593cf750..2e55593ddd01 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
@@ -263,6 +263,7 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../pages/workspace/members/WorkspaceMemberDetailsPage').default as React.ComponentType,
[SCREENS.WORKSPACE.MEMBER_DETAILS_ROLE_SELECTION]: () => require('../../../pages/workspace/members/WorkspaceMemberDetailsRoleSelectionPage').default as React.ComponentType,
[SCREENS.WORKSPACE.CATEGORY_CREATE]: () => require('../../../pages/workspace/categories/CreateCategoryPage').default as React.ComponentType,
+ [SCREENS.WORKSPACE.CATEGORY_EDIT]: () => require('../../../pages/workspace/categories/EditCategoryPage').default as React.ComponentType,
[SCREENS.WORKSPACE.TAGS_SETTINGS]: () => require('../../../pages/workspace/tags/WorkspaceTagsSettingsPage').default as React.ComponentType,
[SCREENS.WORKSPACE.TAGS_EDIT]: () => require('../../../pages/workspace/tags/WorkspaceEditTagsPage').default as React.ComponentType,
[SCREENS.WORKSPACE.TAG_CREATE]: () => require('../../../pages/workspace/tags/WorkspaceCreateTagPage').default as React.ComponentType,
diff --git a/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts
index fd108f2c95f3..7561fb44933c 100755
--- a/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts
+++ b/src/libs/Navigation/linkingConfig/FULL_SCREEN_TO_RHP_MAPPING.ts
@@ -12,7 +12,7 @@ const FULL_SCREEN_TO_RHP_MAPPING: Partial> = {
SCREENS.WORKSPACE.WORKFLOWS_PAYER,
],
[SCREENS.WORKSPACE.TAGS]: [SCREENS.WORKSPACE.TAGS_SETTINGS, SCREENS.WORKSPACE.TAGS_EDIT, SCREENS.WORKSPACE.TAG_CREATE],
- [SCREENS.WORKSPACE.CATEGORIES]: [SCREENS.WORKSPACE.CATEGORY_CREATE, SCREENS.WORKSPACE.CATEGORY_SETTINGS, SCREENS.WORKSPACE.CATEGORIES_SETTINGS],
+ [SCREENS.WORKSPACE.CATEGORIES]: [SCREENS.WORKSPACE.CATEGORY_CREATE, SCREENS.WORKSPACE.CATEGORY_SETTINGS, SCREENS.WORKSPACE.CATEGORIES_SETTINGS, SCREENS.WORKSPACE.CATEGORY_EDIT],
};
export default FULL_SCREEN_TO_RHP_MAPPING;
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index 04bc53e7b542..56734e3c7242 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -265,7 +265,7 @@ const config: LinkingOptions['config'] = {
[SCREENS.WORKSPACE.CATEGORY_SETTINGS]: {
path: ROUTES.WORKSPACE_CATEGORY_SETTINGS.route,
parse: {
- categoryName: (categoryName: string) => decodeURI(categoryName),
+ categoryName: (categoryName: string) => decodeURIComponent(categoryName),
},
},
[SCREENS.WORKSPACE.CATEGORIES_SETTINGS]: {
@@ -283,6 +283,12 @@ const config: LinkingOptions['config'] = {
[SCREENS.WORKSPACE.CATEGORY_CREATE]: {
path: ROUTES.WORKSPACE_CATEGORY_CREATE.route,
},
+ [SCREENS.WORKSPACE.CATEGORY_EDIT]: {
+ path: ROUTES.WORKSPACE_CATEGORY_EDIT.route,
+ parse: {
+ categoryName: (categoryName: string) => decodeURI(categoryName),
+ },
+ },
[SCREENS.WORKSPACE.TAGS_SETTINGS]: {
path: ROUTES.WORKSPACE_TAGS_SETTINGS.route,
},
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index 17927464753b..f428697cfcce 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -168,6 +168,10 @@ type SettingsNavigatorParamList = {
[SCREENS.WORKSPACE.CATEGORY_CREATE]: {
policyID: string;
};
+ [SCREENS.WORKSPACE.CATEGORY_EDIT]: {
+ policyID: string;
+ categoryName: string;
+ };
[SCREENS.WORKSPACE.CATEGORY_SETTINGS]: {
policyID: string;
categoryName: string;
diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts
index d5575869444a..2bc5f20576e1 100644
--- a/src/libs/PolicyUtils.ts
+++ b/src/libs/PolicyUtils.ts
@@ -266,10 +266,7 @@ function getPolicyMembersByIdWithoutCurrentUser(policyMembers: OnyxCollection | EmptyObject): boolean {
/**
* Checks if the supplied report has a common policy member with the array passed in params.
*/
-function hasParticipantInArray(report: Report, policyMemberAccountIDs: number[]) {
- if (!report.participantAccountIDs) {
+function hasParticipantInArray(report: OnyxEntry, policyMemberAccountIDs: number[]) {
+ if (!report?.participantAccountIDs) {
return false;
}
@@ -939,9 +939,10 @@ function isConciergeChatReport(report: OnyxEntry): boolean {
* Checks if the supplied report belongs to workspace based on the provided params. If the report's policyID is _FAKE_ or has no value, it means this report is a DM.
* In this case report and workspace members must be compared to determine whether the report belongs to the workspace.
*/
-function doesReportBelongToWorkspace(report: Report, policyMemberAccountIDs: number[], policyID?: string) {
+function doesReportBelongToWorkspace(report: OnyxEntry, policyMemberAccountIDs: number[], policyID?: string) {
return (
- isConciergeChatReport(report) || (report.policyID === CONST.POLICY.ID_FAKE || !report.policyID ? hasParticipantInArray(report, policyMemberAccountIDs) : report.policyID === policyID)
+ isConciergeChatReport(report) ||
+ (report?.policyID === CONST.POLICY.ID_FAKE || !report?.policyID ? hasParticipantInArray(report, policyMemberAccountIDs) : report?.policyID === policyID)
);
}
diff --git a/src/libs/SidebarUtils.ts b/src/libs/SidebarUtils.ts
index 7bf163416054..81560e0d0691 100644
--- a/src/libs/SidebarUtils.ts
+++ b/src/libs/SidebarUtils.ts
@@ -62,10 +62,10 @@ function compareStringDates(a: string, b: string): 0 | 1 | -1 {
*/
function getOrderedReportIDs(
currentReportId: string | null,
- allReports: Record,
- betas: Beta[],
- policies: Record,
- priorityMode: ValueOf,
+ allReports: OnyxCollection,
+ betas: OnyxEntry,
+ policies: OnyxCollection,
+ priorityMode: OnyxEntry>,
allReportActions: OnyxCollection,
transactionViolations: OnyxCollection,
currentPolicyID = '',
@@ -73,15 +73,14 @@ function getOrderedReportIDs(
): string[] {
const isInGSDMode = priorityMode === CONST.PRIORITY_MODE.GSD;
const isInDefaultMode = !isInGSDMode;
- const allReportsDictValues = Object.values(allReports);
-
+ const allReportsDictValues = Object.values(allReports ?? {});
// Filter out all the reports that shouldn't be displayed
let reportsToDisplay = allReportsDictValues.filter((report) => {
const parentReportActionsKey = `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report?.parentReportID}`;
const parentReportActions = allReportActions?.[parentReportActionsKey];
const parentReportAction = parentReportActions?.find((action) => action && report && action?.reportActionID === report?.parentReportActionID);
const doesReportHaveViolations =
- betas.includes(CONST.BETAS.VIOLATIONS) && !!parentReportAction && ReportUtils.doesTransactionThreadHaveViolations(report, transactionViolations, parentReportAction);
+ !!betas?.includes(CONST.BETAS.VIOLATIONS) && !!parentReportAction && ReportUtils.doesTransactionThreadHaveViolations(report, transactionViolations, parentReportAction);
return ReportUtils.shouldReportBeInOptionList({
report,
currentReportId: currentReportId ?? '',
@@ -111,14 +110,14 @@ function getOrderedReportIDs(
// 4. Archived reports
// - Sorted by lastVisibleActionCreated in default (most recent) view mode
// - Sorted by reportDisplayName in GSD (focus) view mode
- const pinnedAndGBRReports: Report[] = [];
- const draftReports: Report[] = [];
- const nonArchivedReports: Report[] = [];
- const archivedReports: Report[] = [];
+ const pinnedAndGBRReports: Array> = [];
+ const draftReports: Array> = [];
+ const nonArchivedReports: Array> = [];
+ const archivedReports: Array> = [];
if (currentPolicyID || policyMemberAccountIDs.length > 0) {
reportsToDisplay = reportsToDisplay.filter(
- (report) => report.reportID === currentReportId || ReportUtils.doesReportBelongToWorkspace(report, policyMemberAccountIDs, currentPolicyID),
+ (report) => report?.reportID === currentReportId || ReportUtils.doesReportBelongToWorkspace(report, policyMemberAccountIDs, currentPolicyID),
);
}
// There are a few properties that need to be calculated for the report which are used when sorting reports.
@@ -126,14 +125,16 @@ function getOrderedReportIDs(
// Normally, the spread operator would be used here to clone the report and prevent the need to reassign the params.
// However, this code needs to be very performant to handle thousands of reports, so in the interest of speed, we're just going to disable this lint rule and add
// the reportDisplayName property to the report object directly.
- // eslint-disable-next-line no-param-reassign
- report.displayName = ReportUtils.getReportName(report);
+ if (report) {
+ // eslint-disable-next-line no-param-reassign
+ report.displayName = ReportUtils.getReportName(report);
+ }
- const isPinned = report.isPinned ?? false;
- const reportAction = ReportActionsUtils.getReportAction(report.parentReportID ?? '', report.parentReportActionID ?? '');
+ const isPinned = report?.isPinned ?? false;
+ const reportAction = ReportActionsUtils.getReportAction(report?.parentReportID ?? '', report?.parentReportActionID ?? '');
if (isPinned || ReportUtils.requiresAttentionFromCurrentUser(report, reportAction)) {
pinnedAndGBRReports.push(report);
- } else if (report.hasDraft) {
+ } else if (report?.hasDraft) {
draftReports.push(report);
} else if (ReportUtils.isArchivedRoom(report)) {
archivedReports.push(report);
@@ -164,7 +165,7 @@ function getOrderedReportIDs(
// Now that we have all the reports grouped and sorted, they must be flattened into an array and only return the reportID.
// The order the arrays are concatenated in matters and will determine the order that the groups are displayed in the sidebar.
- const LHNReports = [...pinnedAndGBRReports, ...draftReports, ...nonArchivedReports, ...archivedReports].map((report) => report.reportID);
+ const LHNReports = [...pinnedAndGBRReports, ...draftReports, ...nonArchivedReports, ...archivedReports].map((report) => report?.reportID ?? '');
return LHNReports;
}
diff --git a/src/libs/actions/Policy.ts b/src/libs/actions/Policy.ts
index 2adcfd29e00d..ad06173c48c1 100644
--- a/src/libs/actions/Policy.ts
+++ b/src/libs/actions/Policy.ts
@@ -249,8 +249,8 @@ function updateLastAccessedWorkspace(policyID: OnyxEntry) {
/**
* Check if the user has any active free policies (aka workspaces)
*/
-function hasActiveFreePolicy(policies: Array> | PoliciesRecord): boolean {
- const adminFreePolicies = Object.values(policies).filter((policy) => policy && policy.type === CONST.POLICY.TYPE.FREE && policy.role === CONST.POLICY.ROLE.ADMIN);
+function hasActiveFreePolicy(policies: OnyxEntry): boolean {
+ const adminFreePolicies = Object.values(policies ?? {}).filter((policy) => policy && policy.type === CONST.POLICY.TYPE.FREE && policy.role === CONST.POLICY.ROLE.ADMIN);
if (adminFreePolicies.length === 0) {
return false;
@@ -2762,6 +2762,67 @@ function createPolicyCategory(policyID: string, categoryName: string) {
API.write(WRITE_COMMANDS.CREATE_WORKSPACE_CATEGORIES, parameters, onyxData);
}
+function renamePolicyCategory(policyID: string, policyCategory: {oldName: string; newName: string}) {
+ const policyCategoryToUpdate = allPolicyCategories?.[`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`]?.[policyCategory.oldName] ?? {};
+
+ const onyxData: OnyxData = {
+ optimisticData: [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`,
+ value: {
+ [policyCategory.oldName]: null,
+ [policyCategory.newName]: {
+ ...policyCategoryToUpdate,
+ name: policyCategory.newName,
+ unencodedName: decodeURIComponent(policyCategory.newName),
+ pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+ },
+ },
+ },
+ ],
+ successData: [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`,
+ value: {
+ [policyCategory.oldName]: null,
+ [policyCategory.newName]: {
+ ...policyCategoryToUpdate,
+ name: policyCategory.newName,
+ unencodedName: decodeURIComponent(policyCategory.newName),
+ errors: null,
+ pendingAction: null,
+ },
+ },
+ },
+ ],
+ failureData: [
+ {
+ onyxMethod: Onyx.METHOD.MERGE,
+ key: `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`,
+ value: {
+ [policyCategory.newName]: null,
+ [policyCategory.oldName]: {
+ ...policyCategoryToUpdate,
+ name: policyCategory.oldName,
+ unencodedName: decodeURIComponent(policyCategory.oldName),
+ errors: ErrorUtils.getMicroSecondOnyxError('workspace.categories.genericFailureMessage'),
+ pendingAction: null,
+ },
+ },
+ },
+ ],
+ };
+
+ const parameters = {
+ policyID,
+ categories: JSON.stringify({[policyCategory.oldName]: policyCategory.newName}),
+ };
+
+ API.write(WRITE_COMMANDS.RENAME_WORKSPACE_CATEGORY, parameters, onyxData);
+}
+
function createPolicyTag(policyID: string, tagName: string) {
const tagListName = Object.keys(allPolicyTags?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`] ?? {})[0];
@@ -3572,6 +3633,7 @@ export {
acceptJoinRequest,
declineJoinRequest,
createPolicyCategory,
+ renamePolicyCategory,
clearCategoryErrors,
setWorkspacePayer,
clearWorkspacePayerError,
diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts
index c999a137df1d..f09b5c08b166 100644
--- a/src/libs/actions/Report.ts
+++ b/src/libs/actions/Report.ts
@@ -48,7 +48,6 @@ import DateUtils from '@libs/DateUtils';
import * as EmojiUtils from '@libs/EmojiUtils';
import * as Environment from '@libs/Environment/Environment';
import * as ErrorUtils from '@libs/ErrorUtils';
-import getPlatform from '@libs/getPlatform';
import Log from '@libs/Log';
import Navigation from '@libs/Navigation/Navigation';
import LocalNotification from '@libs/Notification/LocalNotification';
@@ -56,6 +55,7 @@ import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
import * as PhoneNumber from '@libs/PhoneNumber';
import getPolicyMemberAccountIDs from '@libs/PolicyMembersUtils';
import {extractPolicyIDFromPath} from '@libs/PolicyUtils';
+import processReportIDDeeplink from '@libs/processReportIDDeeplink';
import * as Pusher from '@libs/Pusher/pusher';
import * as ReportActionsUtils from '@libs/ReportActionsUtils';
import * as ReportUtils from '@libs/ReportUtils';
@@ -194,27 +194,7 @@ const typingWatchTimers: Record = {};
let reportIDDeeplinkedFromOldDot: string | undefined;
Linking.getInitialURL().then((url) => {
- const isWeb = ([CONST.PLATFORM.WEB] as unknown as string).includes(getPlatform());
- const currentParams = new URLSearchParams(url ?? '');
- const currentExitToRoute = currentParams.get('exitTo') ?? '';
- const {reportID: currentReportID} = ReportUtils.parseReportRouteParams(currentExitToRoute);
-
- if (!isWeb) {
- reportIDDeeplinkedFromOldDot = currentReportID;
-
- return;
- }
-
- const prevUrl = sessionStorage.getItem(CONST.SESSION_STORAGE_KEYS.INITIAL_URL);
- const prevParams = new URLSearchParams(prevUrl ?? '');
- const prevExitToRoute = prevParams.get('exitTo') ?? '';
- const {reportID: prevReportID} = ReportUtils.parseReportRouteParams(prevExitToRoute);
-
- reportIDDeeplinkedFromOldDot = currentReportID || prevReportID;
-
- if (currentReportID && url) {
- sessionStorage.setItem(CONST.SESSION_STORAGE_KEYS.INITIAL_URL, url);
- }
+ reportIDDeeplinkedFromOldDot = processReportIDDeeplink(url ?? '');
});
let lastVisitedPath: string | undefined;
diff --git a/src/libs/actions/Task.ts b/src/libs/actions/Task.ts
index 48ab7cce9186..fdbf10588c5d 100644
--- a/src/libs/actions/Task.ts
+++ b/src/libs/actions/Task.ts
@@ -678,7 +678,7 @@ function setParentReportID(parentReportID: string) {
/**
* Clears out the task info from the store and navigates to the NewTaskDetails page
*/
-function clearOutTaskInfoAndNavigate(reportID: string) {
+function clearOutTaskInfoAndNavigate(reportID?: string) {
clearOutTaskInfo();
if (reportID && reportID !== '0') {
setParentReportID(reportID);
diff --git a/src/libs/actions/User.ts b/src/libs/actions/User.ts
index fdd657f801f2..6655d78cb0a8 100644
--- a/src/libs/actions/User.ts
+++ b/src/libs/actions/User.ts
@@ -33,7 +33,7 @@ import playSoundExcludingMobile from '@libs/Sound/playSoundExcludingMobile';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
-import type {BlockedFromConcierge, FrequentlyUsedEmoji, Policy} from '@src/types/onyx';
+import type {BlockedFromConcierge, CustomStatusDraft, FrequentlyUsedEmoji, Policy} from '@src/types/onyx';
import type Login from '@src/types/onyx/Login';
import type {OnyxServerUpdate} from '@src/types/onyx/OnyxUpdatesFromServer';
import type OnyxPersonalDetails from '@src/types/onyx/PersonalDetails';
@@ -945,7 +945,7 @@ function clearCustomStatus() {
* @param status.emojiCode
* @param status.clearAfter - ISO 8601 format string, which represents the time when the status should be cleared
*/
-function updateDraftCustomStatus(status: Status) {
+function updateDraftCustomStatus(status: CustomStatusDraft) {
Onyx.merge(ONYXKEYS.CUSTOM_STATUS_DRAFT, status);
}
diff --git a/src/libs/fileDownload/index.android.ts b/src/libs/fileDownload/index.android.ts
index 7c9d3caf6865..abd116565922 100644
--- a/src/libs/fileDownload/index.android.ts
+++ b/src/libs/fileDownload/index.android.ts
@@ -33,12 +33,13 @@ function hasAndroidPermission(): Promise {
/**
* Handling the download
*/
-function handleDownload(url: string, fileName: string, successMessage?: string): Promise {
+function handleDownload(url: string, fileName?: string, successMessage?: string): Promise {
return new Promise((resolve) => {
const dirs = RNFetchBlob.fs.dirs;
// Android files will download to Download directory
const path = dirs.DownloadDir;
+ // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Disabling this line for safeness as nullish coalescing works only if the value is undefined or null, and since fileName can be an empty string we want to default to `FileUtils.getFileName(url)`
const attachmentName = FileUtils.appendTimeToFileName(fileName || FileUtils.getFileName(url));
const isLocalFile = url.startsWith('file://');
diff --git a/src/libs/fileDownload/index.ios.ts b/src/libs/fileDownload/index.ios.ts
index 7960f6c9e4ba..45e6a5027994 100644
--- a/src/libs/fileDownload/index.ios.ts
+++ b/src/libs/fileDownload/index.ios.ts
@@ -71,6 +71,7 @@ const fileDownload: FileDownload = (fileUrl, fileName, successMessage) =>
new Promise((resolve) => {
let fileDownloadPromise;
const fileType = FileUtils.getFileType(fileUrl);
+ // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Disabling this line for safeness as nullish coalescing works only if the value is undefined or null, and since fileName can be an empty string we want to default to `FileUtils.getFileName(url)`
const attachmentName = FileUtils.appendTimeToFileName(fileName || FileUtils.getFileName(fileUrl));
switch (fileType) {
diff --git a/src/libs/fileDownload/index.ts b/src/libs/fileDownload/index.ts
index 4f43b215925f..1e12a5ca321b 100644
--- a/src/libs/fileDownload/index.ts
+++ b/src/libs/fileDownload/index.ts
@@ -29,6 +29,7 @@ const fileDownload: FileDownload = (url, fileName) => {
// adding href to anchor
link.href = href;
link.style.display = 'none';
+ // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- Disabling this line for safeness as nullish coalescing works only if the value is undefined or null, and since fileName can be an empty string we want to default to `FileUtils.getFileName(url)`
link.download = FileUtils.appendTimeToFileName(fileName || FileUtils.getFileName(url));
// Append to html link element page
diff --git a/src/libs/fileDownload/types.ts b/src/libs/fileDownload/types.ts
index f09ce495795b..f8c92351d36c 100644
--- a/src/libs/fileDownload/types.ts
+++ b/src/libs/fileDownload/types.ts
@@ -1,6 +1,6 @@
import type {Asset} from 'react-native-image-picker';
-type FileDownload = (url: string, fileName: string, successMessage?: string) => Promise;
+type FileDownload = (url: string, fileName?: string, successMessage?: string) => Promise;
type ImageResolution = {width: number; height: number};
type GetImageResolution = (url: File | Asset) => Promise;
diff --git a/src/libs/getPlaidOAuthReceivedRedirectURI/index.native.ts b/src/libs/getPlaidOAuthReceivedRedirectURI/index.native.ts
index 49660dd6f077..1b1b8256db1e 100644
--- a/src/libs/getPlaidOAuthReceivedRedirectURI/index.native.ts
+++ b/src/libs/getPlaidOAuthReceivedRedirectURI/index.native.ts
@@ -1,5 +1,5 @@
import type GetPlaidOAuthReceivedRedirectURI from './types';
-const getPlaidOAuthReceivedRedirectURI: GetPlaidOAuthReceivedRedirectURI = () => null;
+const getPlaidOAuthReceivedRedirectURI: GetPlaidOAuthReceivedRedirectURI = () => undefined;
export default getPlaidOAuthReceivedRedirectURI;
diff --git a/src/libs/getPlaidOAuthReceivedRedirectURI/index.ts b/src/libs/getPlaidOAuthReceivedRedirectURI/index.ts
index c140d1c3339f..38be1e39d2f1 100644
--- a/src/libs/getPlaidOAuthReceivedRedirectURI/index.ts
+++ b/src/libs/getPlaidOAuthReceivedRedirectURI/index.ts
@@ -12,7 +12,7 @@ const getPlaidOAuthReceivedRedirectURI: GetPlaidOAuthReceivedRedirectURI = () =>
// If no stateID passed in then we are either not in OAuth flow or flow is broken
if (!oauthStateID) {
- return null;
+ return undefined;
}
return receivedRedirectURI;
};
diff --git a/src/libs/getPlaidOAuthReceivedRedirectURI/types.ts b/src/libs/getPlaidOAuthReceivedRedirectURI/types.ts
index b89f023e05d3..fd4790c38caf 100644
--- a/src/libs/getPlaidOAuthReceivedRedirectURI/types.ts
+++ b/src/libs/getPlaidOAuthReceivedRedirectURI/types.ts
@@ -1,3 +1,3 @@
-type GetPlaidOAuthReceivedRedirectURI = () => null | string;
+type GetPlaidOAuthReceivedRedirectURI = () => undefined | string;
export default GetPlaidOAuthReceivedRedirectURI;
diff --git a/src/libs/processReportIDDeeplink/getReportIDFromUrl.ts b/src/libs/processReportIDDeeplink/getReportIDFromUrl.ts
new file mode 100644
index 000000000000..6763b5a45085
--- /dev/null
+++ b/src/libs/processReportIDDeeplink/getReportIDFromUrl.ts
@@ -0,0 +1,9 @@
+import * as ReportUtils from '@libs/ReportUtils';
+
+export default function getReportIDFromUrl(url: string): string {
+ const currentParams = new URLSearchParams(url);
+ const currentExitToRoute = currentParams.get('exitTo') ?? '';
+ const {reportID} = ReportUtils.parseReportRouteParams(currentExitToRoute);
+
+ return reportID;
+}
diff --git a/src/libs/processReportIDDeeplink/index.ts b/src/libs/processReportIDDeeplink/index.ts
new file mode 100644
index 000000000000..7970556735b8
--- /dev/null
+++ b/src/libs/processReportIDDeeplink/index.ts
@@ -0,0 +1,5 @@
+import getReportIDFromUrl from './getReportIDFromUrl';
+
+export default function processReportIDDeeplink(url: string): string {
+ return getReportIDFromUrl(url);
+}
diff --git a/src/libs/processReportIDDeeplink/index.website.ts b/src/libs/processReportIDDeeplink/index.website.ts
new file mode 100644
index 000000000000..02fcfe75f968
--- /dev/null
+++ b/src/libs/processReportIDDeeplink/index.website.ts
@@ -0,0 +1,14 @@
+import CONST from '@src/CONST';
+import getReportIDFromUrl from './getReportIDFromUrl';
+
+export default function processReportIDDeeplink(url: string): string {
+ const prevUrl = sessionStorage.getItem(CONST.SESSION_STORAGE_KEYS.INITIAL_URL);
+ const prevReportID = getReportIDFromUrl(prevUrl ?? '');
+ const currentReportID = getReportIDFromUrl(url);
+
+ if (currentReportID && url) {
+ sessionStorage.setItem(CONST.SESSION_STORAGE_KEYS.INITIAL_URL, url);
+ }
+
+ return currentReportID || prevReportID;
+}
diff --git a/src/pages/OnboardEngagement/ExpensifyClassicPage.tsx b/src/pages/OnboardEngagement/ExpensifyClassicPage.tsx
index ad704156435d..7b242dd4aefa 100644
--- a/src/pages/OnboardEngagement/ExpensifyClassicPage.tsx
+++ b/src/pages/OnboardEngagement/ExpensifyClassicPage.tsx
@@ -49,6 +49,7 @@ function ExpensifyClassicModal() {
success
pressOnEnter
medium={isExtraSmallScreenHeight}
+ large={!isExtraSmallScreenHeight}
style={[styles.w100, styles.mtAuto]}
text={translate('expensifyClassic.buttonText')}
onPress={navigateToOldDot}
diff --git a/src/pages/OnboardEngagement/ManageTeamsExpensesPage.tsx b/src/pages/OnboardEngagement/ManageTeamsExpensesPage.tsx
index 559da335cf13..fb642c897dbc 100644
--- a/src/pages/OnboardEngagement/ManageTeamsExpensesPage.tsx
+++ b/src/pages/OnboardEngagement/ManageTeamsExpensesPage.tsx
@@ -97,6 +97,7 @@ function ManageTeamsExpensesModal() {
{
if (props.isPlaidDisabled || !props.user.validated) {
@@ -145,10 +146,9 @@ function BankAccountStep(props) {
}}
isDisabled={props.isPlaidDisabled || !props.user.validated}
style={[styles.mt4]}
- iconStyles={[styles.buttonCTAIcon]}
shouldShowRightIcon
success
- large
+ innerStyles={[styles.pr2, styles.pl4, styles.h13]}
/>
{Boolean(props.error) && {props.error} }
diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
index 44f83f55a23f..4aec290a4da9 100644
--- a/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
+++ b/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
@@ -96,6 +96,7 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
success
style={[styles.w100]}
onPress={onNext}
+ large
text={translate('common.confirm')}
/>
diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx
index a1a609f13734..224afd8c9344 100644
--- a/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx
+++ b/src/pages/ReimbursementAccount/BankInfo/substeps/Plaid.tsx
@@ -11,7 +11,6 @@ import type {SubStepProps} from '@hooks/useSubStep/types';
import useThemeStyles from '@hooks/useThemeStyles';
import * as BankAccounts from '@userActions/BankAccounts';
import * as ReimbursementAccountActions from '@userActions/ReimbursementAccount';
-import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import type {ReimbursementAccountForm} from '@src/types/form';
import INPUT_IDS from '@src/types/form/ReimbursementAccountForm';
@@ -88,21 +87,20 @@ function Plaid({reimbursementAccount, reimbursementAccountDraft, onNext, plaidDa
isSubmitButtonVisible={(plaidData?.bankAccounts ?? []).length > 0}
>
{
ReimbursementAccountActions.updateReimbursementAccountDraft({plaidAccountID});
}}
plaidData={plaidData}
- onExitPlaid={() => BankAccounts.setBankAccountSubStep(null)}
+ onExitPlaid={() => {
+ BankAccounts.setBankAccountSubStep(null);
+ }}
allowDebit
bankAccountID={bankAccountID}
selectedPlaidAccountID={selectedPlaidAccountID}
isDisplayedInNewVBBA
inputID={BANK_INFO_STEP_KEYS.SELECTED_PLAID_ACCOUNT_ID}
- inputMode={CONST.INPUT_MODE.TEXT}
- style={[styles.mt5]}
defaultValue={selectedPlaidAccountID}
/>
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx
index 999710310224..b68423115825 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/AddressUBO.tsx
@@ -59,8 +59,8 @@ function AddressUBO({reimbursementAccountDraft, onNext, isEditing, beneficialOwn
const handleSubmit = useReimbursementAccountStepFormSubmit({
fieldIds: stepFields,
- isEditing,
onNext,
+ shouldSaveDraft: isEditing,
});
return (
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
index 3d6f1d5947ef..939c52bfed27 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
@@ -114,6 +114,7 @@ function ConfirmationUBO({reimbursementAccount, reimbursementAccountDraft, onNex
{
diff --git a/src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx b/src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx
index 65f7f14d6c91..7ecf9b9ad253 100644
--- a/src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx
+++ b/src/pages/ReimbursementAccount/ConnectBankAccount/components/FinishChatCard.tsx
@@ -39,13 +39,13 @@ function FinishChatCard({requiresTwoFactorAuth, reimbursementAccount}: FinishCha
>
{translate('connectBankAccountStep.letsChatText')}
= useNavigation();
+ useEffect(() => {
+ setSearchTerm(SearchInputManager.searchInput);
+ }, []);
+
// Any existing participants and Expensify emails should not be eligible for invitation
const excludedUsers = useMemo(
() =>
@@ -187,6 +192,7 @@ function RoomInvitePage({betas, personalDetails, report, policies}: RoomInvitePa
if (reportID) {
Report.inviteToRoom(reportID, invitedEmailsToAccountIDs);
}
+ SearchInputManager.searchInput = '';
Navigation.navigate(backRoute);
}, [selectedOptions, backRoute, reportID, validate]);
@@ -231,7 +237,10 @@ function RoomInvitePage({betas, personalDetails, report, policies}: RoomInvitePa
ListItem={UserListItem}
textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
textInputValue={searchTerm}
- onChangeText={setSearchTerm}
+ onChangeText={(value) => {
+ SearchInputManager.searchInput = value;
+ setSearchTerm(value);
+ }}
headerMessage={headerMessage}
onSelectRow={toggleOption}
onConfirm={inviteUsers}
diff --git a/src/pages/RoomMembersPage.tsx b/src/pages/RoomMembersPage.tsx
index 89d20287f66c..6cdcc6e06b95 100644
--- a/src/pages/RoomMembersPage.tsx
+++ b/src/pages/RoomMembersPage.tsx
@@ -1,3 +1,4 @@
+import {useIsFocused} from '@react-navigation/native';
import type {StackScreenProps} from '@react-navigation/stack';
import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {View} from 'react-native';
@@ -35,6 +36,7 @@ import type {Session} from '@src/types/onyx';
import {isEmptyObject} from '@src/types/utils/EmptyObject';
import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound';
import withReportOrNotFound from './home/report/withReportOrNotFound';
+import SearchInputManager from './workspace/SearchInputManager';
type RoomMembersPageOnyxProps = {
session: OnyxEntry;
@@ -54,6 +56,19 @@ function RoomMembersPage({report, session, policies}: RoomMembersPageProps) {
const [didLoadRoomMembers, setDidLoadRoomMembers] = useState(false);
const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
+ const isFocusedScreen = useIsFocused();
+
+ useEffect(() => {
+ setSearchValue(SearchInputManager.searchInput);
+ }, [isFocusedScreen]);
+
+ useEffect(
+ () => () => {
+ SearchInputManager.searchInput = '';
+ },
+ [],
+ );
+
/**
* Get members for the current room
*/
@@ -274,7 +289,10 @@ function RoomMembersPage({report, session, policies}: RoomMembersPageProps) {
textInputLabel={translate('optionsSelector.findMember')}
disableKeyboardShortcuts={removeMembersConfirmModalVisible}
textInputValue={searchValue}
- onChangeText={setSearchValue}
+ onChangeText={(value) => {
+ SearchInputManager.searchInput = value;
+ setSearchValue(value);
+ }}
headerMessage={headerMessage}
onSelectRow={(item) => toggleUser(item)}
onSelectAll={() => toggleAllUsers(data)}
diff --git a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.tsx b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.tsx
index 9433aba2f299..551568e7dbb1 100644
--- a/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.tsx
+++ b/src/pages/TeachersUnite/ImTeacherUpdateEmailPage.tsx
@@ -36,6 +36,7 @@ function ImTeacherUpdateEmailPage() {
Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(activeRoute))}
diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx
index ad3c40666e76..8e0aefc39257 100644
--- a/src/pages/home/HeaderView.tsx
+++ b/src/pages/home/HeaderView.tsx
@@ -63,11 +63,14 @@ type HeaderViewProps = HeaderViewOnyxProps & {
/** The report currently being looked at */
report: OnyxTypes.Report;
+ /** The report action the transaction is tied to from the parent report */
+ parentReportAction: OnyxEntry;
+
/** The reportID of the request */
reportID: string;
};
-function HeaderView({report, personalDetails, parentReport, policy, session, reportID, guideCalendarLink, onNavigationMenuButtonClicked}: HeaderViewProps) {
+function HeaderView({report, personalDetails, parentReport, parentReportAction, policy, session, reportID, guideCalendarLink, onNavigationMenuButtonClicked}: HeaderViewProps) {
const [isDeleteTaskConfirmModalVisible, setIsDeleteTaskConfirmModalVisible] = React.useState(false);
const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
const {translate} = useLocalize();
@@ -90,7 +93,6 @@ function HeaderView({report, personalDetails, parentReport, policy, session, rep
const subtitle = ReportUtils.getChatRoomSubtitle(reportHeaderData);
const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(reportHeaderData);
const isConcierge = ReportUtils.hasSingleParticipant(report) && participants.includes(CONST.ACCOUNT_ID.CONCIERGE);
- const parentReportAction = ReportActionsUtils.getParentReportAction(report);
const isCanceledTaskReport = ReportUtils.isCanceledTaskReport(report, parentReportAction);
const isWhisperAction = ReportActionsUtils.isWhisperAction(parentReportAction);
const isUserCreatedPolicyRoom = ReportUtils.isUserCreatedPolicyRoom(report);
diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx
index ab09047ede68..4e12c75248d3 100644
--- a/src/pages/home/ReportScreen.tsx
+++ b/src/pages/home/ReportScreen.tsx
@@ -123,7 +123,7 @@ function ReportScreen({
const {translate} = useLocalize();
const {isSmallScreenWidth} = useWindowDimensions();
const isFocused = useIsFocused();
-
+ const prevIsFocused = usePrevious(isFocused);
const firstRenderRef = useRef(true);
const flatListRef = useRef(null);
const reactionListRef = useRef(null);
@@ -263,6 +263,7 @@ function ReportScreen({
reportID={reportID}
onNavigationMenuButtonClicked={goBack}
report={report}
+ parentReportAction={parentReportAction}
/>
);
@@ -361,6 +362,17 @@ function ReportScreen({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
+ // If a user has chosen to leave a thread, and then returns to it (e.g. with the back button), we need to call `openReport` again in order to allow the user to rejoin and to receive real-time updates
+ useEffect(() => {
+ if (!isFocused || prevIsFocused || !ReportUtils.isChatThread(report) || report.notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN) {
+ return;
+ }
+ Report.openReport(report.reportID);
+
+ // We don't want to run this useEffect every time `report` is changed
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [prevIsFocused, report.notificationPreference, isFocused]);
+
useEffect(() => {
// We don't want this effect to run on the first render.
if (firstRenderRef.current) {
diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
index 7216f4238621..fc78affa3a02 100644
--- a/src/pages/home/report/ReportActionItem.tsx
+++ b/src/pages/home/report/ReportActionItem.tsx
@@ -482,6 +482,7 @@ function ReportActionItem({
text={translate('bankAccount.addBankAccount')}
onPress={() => BankAccounts.openPersonalBankAccountSetupView(report.reportID)}
pressOnEnter
+ large
/>
)}
{missingPaymentMethod === 'wallet' && (
@@ -497,6 +498,7 @@ function ReportActionItem({
void;
};
-const defaultProps = {
- emojiStatus: '',
- isSelected: false,
- onPress: () => {},
-};
-
-function AvatarWithOptionalStatus({emojiStatus, isSelected, onPress}) {
+function AvatarWithOptionalStatus({emojiStatus = '', isSelected = false, onPress}: AvatarWithOptionalStatusProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
@@ -53,7 +45,5 @@ function AvatarWithOptionalStatus({emojiStatus, isSelected, onPress}) {
);
}
-AvatarWithOptionalStatus.propTypes = propTypes;
-AvatarWithOptionalStatus.defaultProps = defaultProps;
AvatarWithOptionalStatus.displayName = 'AvatarWithOptionalStatus';
export default AvatarWithOptionalStatus;
diff --git a/src/pages/home/sidebar/BottomTabBarFloatingActionButton/index.tsx b/src/pages/home/sidebar/BottomTabBarFloatingActionButton/index.tsx
index 788dd4ae5bc8..33b89be8fd17 100644
--- a/src/pages/home/sidebar/BottomTabBarFloatingActionButton/index.tsx
+++ b/src/pages/home/sidebar/BottomTabBarFloatingActionButton/index.tsx
@@ -32,7 +32,6 @@ function BottomTabBarFloatingActionButton() {
return (
;
+};
+type PressableAvatarWithIndicatorProps = PressableAvatarWithIndicatorOnyxProps & {
/** Whether the avatar is selected */
- isSelected: PropTypes.bool,
+ isSelected: boolean;
/** Callback called when the avatar is pressed */
- onPress: PropTypes.func,
+ onPress?: () => void;
};
-const defaultProps = {
- currentUserPersonalDetails: {
- pendingFields: {avatar: ''},
- accountID: '',
- avatar: '',
- },
- isLoading: true,
- isSelected: false,
- onPress: () => {},
-};
-
-function PressableAvatarWithIndicator({currentUserPersonalDetails, isLoading, isSelected, onPress}) {
+function PressableAvatarWithIndicator({isLoading = true, isSelected = false, onPress}: PressableAvatarWithIndicatorProps) {
const {translate} = useLocalize();
const styles = useThemeStyles();
+ const currentUserPersonalDetails = useCurrentUserPersonalDetails();
return (
-
+
@@ -65,14 +50,10 @@ function PressableAvatarWithIndicator({currentUserPersonalDetails, isLoading, is
);
}
-PressableAvatarWithIndicator.propTypes = propTypes;
-PressableAvatarWithIndicator.defaultProps = defaultProps;
PressableAvatarWithIndicator.displayName = 'PressableAvatarWithIndicator';
-export default compose(
- withCurrentUserPersonalDetails,
- withOnyx({
- isLoading: {
- key: ONYXKEYS.IS_LOADING_APP,
- },
- }),
-)(PressableAvatarWithIndicator);
+
+export default withOnyx({
+ isLoading: {
+ key: ONYXKEYS.IS_LOADING_APP,
+ },
+})(PressableAvatarWithIndicator);
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.tsx
similarity index 77%
rename from src/pages/home/sidebar/SidebarLinks.js
rename to src/pages/home/sidebar/SidebarLinks.tsx
index 4d1585cd424a..ef81aba715aa 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/src/pages/home/sidebar/SidebarLinks.tsx
@@ -1,8 +1,8 @@
-/* eslint-disable rulesdir/onyx-props-must-have-default */
-import PropTypes from 'prop-types';
import React, {useCallback, useEffect, useMemo, useRef} from 'react';
import {InteractionManager, StyleSheet, View} from 'react-native';
-import _ from 'underscore';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {EdgeInsets} from 'react-native-safe-area-context';
+import type {ValueOf} from 'type-fest';
import LHNOptionsList from '@components/LHNOptionsList/LHNOptionsList';
import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
import useLocalize from '@hooks/useLocalize';
@@ -13,37 +13,40 @@ import KeyboardShortcut from '@libs/KeyboardShortcut';
import Navigation from '@libs/Navigation/Navigation';
import onyxSubscribe from '@libs/onyxSubscribe';
import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
-import safeAreaInsetPropTypes from '@pages/safeAreaInsetPropTypes';
import * as App from '@userActions/App';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
+import type {Modal, Report} from '@src/types/onyx';
-const basePropTypes = {
+type SidebarLinksProps = {
/** Toggles the navigation menu open and closed */
- onLinkClick: PropTypes.func.isRequired,
+ onLinkClick: () => void;
/** Safe area insets required for mobile devices margins */
- insets: safeAreaInsetPropTypes.isRequired,
-};
+ insets: EdgeInsets;
-const propTypes = {
- ...basePropTypes,
+ /** List of options to display */
+ optionListItems: string[];
- optionListItems: PropTypes.arrayOf(PropTypes.string).isRequired,
+ /** Wheather the reports are loading. When false it means they are ready to be used. */
+ isLoading: OnyxEntry;
- isLoading: PropTypes.bool.isRequired,
+ /** The chat priority mode */
+ priorityMode?: OnyxEntry>;
- // eslint-disable-next-line react/require-default-props
- priorityMode: PropTypes.oneOf(_.values(CONST.PRIORITY_MODE)),
+ /** Method to change currently active report */
+ isActiveReport: (reportID: string) => boolean;
- isActiveReport: PropTypes.func.isRequired,
+ /** ID of currently active workspace */
+ // eslint-disable-next-line react/no-unused-prop-types -- its used in withOnyx
+ activeWorkspaceID: string | undefined;
};
-function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priorityMode = CONST.PRIORITY_MODE.DEFAULT, isActiveReport, isCreateMenuOpen}) {
+function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priorityMode = CONST.PRIORITY_MODE.DEFAULT, isActiveReport}: SidebarLinksProps) {
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
- const modal = useRef({});
+ const modal = useRef({});
const {updateLocale} = useLocalize();
const {isSmallScreenWidth} = useWindowDimensions();
@@ -61,7 +64,7 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
const unsubscribeOnyxModal = onyxSubscribe({
key: ONYXKEYS.MODAL,
callback: (modalArg) => {
- if (_.isNull(modalArg) || typeof modalArg !== 'object') {
+ if (modalArg === null || typeof modalArg !== 'object') {
return;
}
modal.current = modalArg;
@@ -99,24 +102,21 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
/**
* Show Report page with selected report id
- *
- * @param {Object} option
- * @param {String} option.reportID
*/
const showReportPage = useCallback(
- (option) => {
+ (option: Report) => {
// Prevent opening Report page when clicking LHN row quickly after clicking FAB icon
// or when clicking the active LHN row on large screens
// or when continuously clicking different LHNs, only apply to small screen
// since getTopmostReportId always returns on other devices
const reportActionID = Navigation.getTopmostReportActionId();
- if (isCreateMenuOpen || (option.reportID === Navigation.getTopmostReportId() && !reportActionID) || (isSmallScreenWidth && isActiveReport(option.reportID) && !reportActionID)) {
+ if ((option.reportID === Navigation.getTopmostReportId() && !reportActionID) || (isSmallScreenWidth && isActiveReport(option.reportID) && !reportActionID)) {
return;
}
Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(option.reportID));
onLinkClick();
},
- [isCreateMenuOpen, isSmallScreenWidth, isActiveReport, onLinkClick],
+ [isSmallScreenWidth, isActiveReport, onLinkClick],
);
const viewMode = priorityMode === CONST.PRIORITY_MODE.GSD ? CONST.OPTION_MODE.COMPACT : CONST.OPTION_MODE.DEFAULT;
@@ -136,7 +136,7 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
optionMode={viewMode}
onFirstItemRendered={App.setSidebarLoaded}
/>
- {isLoading && optionListItems.length === 0 && (
+ {isLoading && optionListItems?.length === 0 && (
@@ -146,8 +146,6 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority
);
}
-SidebarLinks.propTypes = propTypes;
SidebarLinks.displayName = 'SidebarLinks';
export default SidebarLinks;
-export {basePropTypes};
diff --git a/src/pages/home/sidebar/SidebarLinksData.js b/src/pages/home/sidebar/SidebarLinksData.tsx
similarity index 60%
rename from src/pages/home/sidebar/SidebarLinksData.js
rename to src/pages/home/sidebar/SidebarLinksData.tsx
index c4cc0713c596..9ac490a29a7d 100644
--- a/src/pages/home/sidebar/SidebarLinksData.js
+++ b/src/pages/home/sidebar/SidebarLinksData.tsx
@@ -1,162 +1,114 @@
+import {useIsFocused} from '@react-navigation/native';
import {deepEqual} from 'fast-equals';
-import lodashGet from 'lodash/get';
-import lodashMap from 'lodash/map';
-import PropTypes from 'prop-types';
import React, {useCallback, useEffect, useMemo, useRef} from 'react';
import {View} from 'react-native';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
-import networkPropTypes from '@components/networkPropTypes';
-import {withNetwork} from '@components/OnyxProvider';
+import type {EdgeInsets} from 'react-native-safe-area-context';
+import type {ValueOf} from 'type-fest';
+import type {CurrentReportIDContextValue} from '@components/withCurrentReportID';
import withCurrentReportID from '@components/withCurrentReportID';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
-import withNavigationFocus from '@components/withNavigationFocus';
import useActiveWorkspace from '@hooks/useActiveWorkspace';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
import usePrevious from '@hooks/usePrevious';
import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
import {getPolicyMembersByIdWithoutCurrentUser} from '@libs/PolicyUtils';
import * as ReportUtils from '@libs/ReportUtils';
import SidebarUtils from '@libs/SidebarUtils';
-import reportPropTypes from '@pages/reportPropTypes';
import * as Policy from '@userActions/Policy';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
-import SidebarLinks, {basePropTypes} from './SidebarLinks';
+import type * as OnyxTypes from '@src/types/onyx';
+import type {Message} from '@src/types/onyx/ReportAction';
+import SidebarLinks from './SidebarLinks';
-const propTypes = {
- ...basePropTypes,
+type ChatReportSelector = OnyxTypes.Report & {isUnreadWithMention: boolean};
+type PolicySelector = Pick;
+type ReportActionsSelector = Array>;
- /* Onyx Props */
+type SidebarLinksDataOnyxProps = {
/** List of reports */
- chatReports: PropTypes.objectOf(reportPropTypes),
+ chatReports: OnyxCollection;
- /** All report actions for all reports */
-
- /** Object of report actions for this report */
- allReportActions: PropTypes.objectOf(
- PropTypes.arrayOf(
- PropTypes.shape({
- error: PropTypes.string,
- message: PropTypes.arrayOf(
- PropTypes.shape({
- moderationDecision: PropTypes.shape({
- decision: PropTypes.string,
- }),
- }),
- ),
- }),
- ),
- ),
-
- /** Whether the reports are loading. When false it means they are ready to be used. */
- isLoadingApp: PropTypes.bool,
+ /** Wheather the reports are loading. When false it means they are ready to be used. */
+ isLoadingApp: OnyxEntry;
/** The chat priority mode */
- priorityMode: PropTypes.string,
+ priorityMode: OnyxEntry>;
/** Beta features list */
- betas: PropTypes.arrayOf(PropTypes.string),
+ betas: OnyxEntry;
- network: networkPropTypes.isRequired,
+ /** All report actions for all reports */
+ allReportActions: OnyxCollection;
/** The policies which the user has access to */
- // eslint-disable-next-line react/forbid-prop-types
- policies: PropTypes.object,
-
- // eslint-disable-next-line react/forbid-prop-types
- policyMembers: PropTypes.object,
+ policies: OnyxCollection;
/** All of the transaction violations */
- transactionViolations: PropTypes.shape({
- violations: PropTypes.arrayOf(
- PropTypes.shape({
- /** The transaction ID */
- transactionID: PropTypes.number,
-
- /** The transaction violation type */
- type: PropTypes.string,
-
- /** The transaction violation message */
- message: PropTypes.string,
+ transactionViolations: OnyxCollection;
- /** The transaction violation data */
- data: PropTypes.shape({
- /** The transaction violation data field */
- field: PropTypes.string,
-
- /** The transaction violation data value */
- value: PropTypes.string,
- }),
- }),
- ),
- }),
-
- ...withCurrentUserPersonalDetailsPropTypes,
+ /** All policy members */
+ policyMembers: OnyxCollection;
};
-const defaultProps = {
- chatReports: {},
- isLoadingApp: true,
- priorityMode: CONST.PRIORITY_MODE.DEFAULT,
- betas: [],
- policies: {},
- policyMembers: {},
- transactionViolations: {},
- allReportActions: {},
- ...withCurrentUserPersonalDetailsDefaultProps,
-};
+type SidebarLinksDataProps = CurrentReportIDContextValue &
+ SidebarLinksDataOnyxProps & {
+ /** Toggles the navigation menu open and closed */
+ onLinkClick: () => void;
+
+ /** Safe area insets required for mobile devices margins */
+ insets: EdgeInsets;
+ };
function SidebarLinksData({
- isFocused,
allReportActions,
betas,
chatReports,
- currentReportID,
insets,
- isLoadingApp,
+ isLoadingApp = true,
onLinkClick,
policies,
- priorityMode,
- network,
+ priorityMode = CONST.PRIORITY_MODE.DEFAULT,
policyMembers,
transactionViolations,
- currentUserPersonalDetails,
-}) {
+ currentReportID,
+}: SidebarLinksDataProps) {
+ const {accountID} = useCurrentUserPersonalDetails();
+ const network = useNetwork();
+ const isFocused = useIsFocused();
const styles = useThemeStyles();
const {activeWorkspaceID} = useActiveWorkspace();
const {translate} = useLocalize();
const prevPriorityMode = usePrevious(priorityMode);
-
- const policyMemberAccountIDs = getPolicyMembersByIdWithoutCurrentUser(policyMembers, activeWorkspaceID, currentUserPersonalDetails.accountID);
-
+ const policyMemberAccountIDs = getPolicyMembersByIdWithoutCurrentUser(policyMembers, activeWorkspaceID, accountID);
// eslint-disable-next-line react-hooks/exhaustive-deps
- useEffect(() => Policy.openWorkspace(activeWorkspaceID, policyMemberAccountIDs), [activeWorkspaceID]);
-
- const reportIDsRef = useRef(null);
+ useEffect(() => Policy.openWorkspace(activeWorkspaceID ?? '', policyMemberAccountIDs), [activeWorkspaceID]);
+ const reportIDsRef = useRef(null);
const isLoading = isLoadingApp;
- const optionListItems = useMemo(() => {
+ const optionListItems: string[] = useMemo(() => {
const reportIDs = SidebarUtils.getOrderedReportIDs(
null,
- chatReports,
+ chatReports as OnyxCollection,
betas,
- policies,
+ policies as OnyxCollection,
priorityMode,
- allReportActions,
+ allReportActions as OnyxCollection,
transactionViolations,
activeWorkspaceID,
policyMemberAccountIDs,
);
- if (deepEqual(reportIDsRef.current, reportIDs)) {
+ if (reportIDsRef.current && deepEqual(reportIDsRef.current, reportIDs)) {
return reportIDsRef.current;
}
// 1. We need to update existing reports only once while loading because they are updated several times during loading and causes this regression: https://github.com/Expensify/App/issues/24596#issuecomment-1681679531
// 2. If the user is offline, we need to update the reports unconditionally, since the loading of report data might be stuck in this case.
// 3. Changing priority mode to Most Recent will call OpenApp. If there is an existing reports and the priority mode is updated, we want to immediately update the list instead of waiting the OpenApp request to complete
- if (!isLoading || !reportIDsRef.current || network.isOffline || (reportIDsRef.current && prevPriorityMode !== priorityMode)) {
+ if (!isLoading || !reportIDsRef.current || !!network.isOffline || (reportIDsRef.current && prevPriorityMode !== priorityMode)) {
reportIDsRef.current = reportIDs;
}
return reportIDsRef.current || [];
@@ -168,14 +120,14 @@ function SidebarLinksData({
// the current report is missing from the list, which should very rarely happen. In this
// case we re-generate the list a 2nd time with the current report included.
const optionListItemsWithCurrentReport = useMemo(() => {
- if (currentReportID && !_.contains(optionListItems, currentReportID)) {
+ if (currentReportID && !optionListItems?.includes(currentReportID)) {
return SidebarUtils.getOrderedReportIDs(
currentReportID,
chatReports,
betas,
- policies,
+ policies as OnyxCollection,
priorityMode,
- allReportActions,
+ allReportActions as OnyxCollection,
transactionViolations,
activeWorkspaceID,
policyMemberAccountIDs,
@@ -186,7 +138,7 @@ function SidebarLinksData({
const currentReportIDRef = useRef(currentReportID);
currentReportIDRef.current = currentReportID;
- const isActiveReport = useCallback((reportID) => currentReportIDRef.current === reportID, []);
+ const isActiveReport = useCallback((reportID: string): boolean => currentReportIDRef.current === reportID, []);
return (
- report && {
+const chatReportSelector = (report: OnyxEntry): ChatReportSelector =>
+ (report && {
reportID: report.reportID,
participantAccountIDs: report.participantAccountIDs,
hasDraft: report.hasDraft,
@@ -228,7 +176,7 @@ const chatReportSelector = (report) =>
isHidden: report.isHidden,
notificationPreference: report.notificationPreference,
errorFields: {
- addWorkspaceRoom: report.errorFields && report.errorFields.addWorkspaceRoom,
+ addWorkspaceRoom: report.errorFields?.addWorkspaceRoom,
},
lastMessageText: report.lastMessageText,
lastVisibleActionCreated: report.lastVisibleActionCreated,
@@ -257,49 +205,36 @@ const chatReportSelector = (report) =>
parentReportID: report.parentReportID,
isDeletedParentAction: report.isDeletedParentAction,
isUnreadWithMention: ReportUtils.isUnreadWithMention(report),
- };
-
-/**
- * @param {Object} [reportActions]
- * @returns {Object|undefined}
- */
-const reportActionsSelector = (reportActions) =>
- reportActions &&
- lodashMap(reportActions, (reportAction) => {
- const {reportActionID, parentReportActionID, actionName, errors = [], originalMessage} = reportAction;
- const decision = lodashGet(reportAction, 'message[0].moderationDecision.decision');
-
- return {
- reportActionID,
- parentReportActionID,
- actionName,
- errors,
- message: [
- {
- moderationDecision: {decision},
- },
- ],
- originalMessage,
- };
- });
-
-/**
- * @param {Object} [policy]
- * @returns {Object|undefined}
- */
-const policySelector = (policy) =>
- policy && {
+ }) as ChatReportSelector;
+
+const reportActionsSelector = (reportActions: OnyxEntry): ReportActionsSelector =>
+ (reportActions &&
+ Object.values(reportActions).map((reportAction) => {
+ const {reportActionID, actionName, errors = [], originalMessage} = reportAction;
+ const decision = reportAction.message?.[0].moderationDecision?.decision;
+
+ return {
+ reportActionID,
+ actionName,
+ errors,
+ message: [
+ {
+ moderationDecision: {decision},
+ },
+ ] as Message[],
+ originalMessage,
+ };
+ })) as ReportActionsSelector;
+
+const policySelector = (policy: OnyxEntry): PolicySelector =>
+ (policy && {
type: policy.type,
name: policy.name,
avatar: policy.avatar,
- };
+ }) as PolicySelector;
-export default compose(
- withCurrentReportID,
- withCurrentUserPersonalDetails,
- withNavigationFocus,
- withNetwork(),
- withOnyx({
+export default withCurrentReportID(
+ withOnyx({
chatReports: {
key: ONYXKEYS.COLLECTION.REPORT,
selector: chatReportSelector,
@@ -333,5 +268,7 @@ export default compose(
key: ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS,
initialValue: {},
},
- }),
-)(SidebarLinksData);
+ })(SidebarLinksData),
+);
+
+export type {PolicySelector};
diff --git a/src/pages/home/sidebar/SidebarNavigationContext.js b/src/pages/home/sidebar/SidebarNavigationContext.js
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.tsx
similarity index 90%
rename from src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
rename to src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.tsx
index 2c2d28a0edbc..1cd59fe17716 100644
--- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js
+++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.tsx
@@ -9,7 +9,6 @@ import Performance from '@libs/Performance';
import SidebarLinksData from '@pages/home/sidebar/SidebarLinksData';
import Timing from '@userActions/Timing';
import CONST from '@src/CONST';
-import sidebarPropTypes from './sidebarPropTypes';
/**
* Function called when a pinned chat is selected.
@@ -19,7 +18,7 @@ const startTimer = () => {
Performance.markStart(CONST.TIMING.SWITCH_REPORT);
};
-function BaseSidebarScreen(props) {
+function BaseSidebarScreen() {
const styles = useThemeStyles();
const {activeWorkspaceID} = useActiveWorkspace();
useEffect(() => {
@@ -42,7 +41,6 @@ function BaseSidebarScreen(props) {
@@ -51,7 +49,6 @@ function BaseSidebarScreen(props) {
);
}
-BaseSidebarScreen.propTypes = sidebarPropTypes;
BaseSidebarScreen.displayName = 'BaseSidebarScreen';
export default BaseSidebarScreen;
diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx
similarity index 68%
rename from src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
rename to src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx
index 573cbe370aa7..90a4fc6fffa0 100644
--- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js
+++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx
@@ -1,20 +1,20 @@
-import PropTypes from 'prop-types';
+import {useIsFocused} from '@react-navigation/native';
+import type {ForwardedRef, RefAttributes} from 'react';
import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
import {View} from 'react-native';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
import FloatingActionButton from '@components/FloatingActionButton';
import * as Expensicons from '@components/Icon/Expensicons';
import PopoverMenu from '@components/PopoverMenu';
-import withNavigation from '@components/withNavigation';
-import withNavigationFocus from '@components/withNavigationFocus';
-import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
import useLocalize from '@hooks/useLocalize';
import usePrevious from '@hooks/usePrevious';
import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
+import useWindowDimensions from '@hooks/useWindowDimensions';
import interceptAnonymousUser from '@libs/interceptAnonymousUser';
import Navigation from '@libs/Navigation/Navigation';
import * as ReportUtils from '@libs/ReportUtils';
+import type {PolicySelector} from '@pages/home/sidebar/SidebarLinksData';
import * as App from '@userActions/App';
import * as IOU from '@userActions/IOU';
import * as Policy from '@userActions/Policy';
@@ -22,74 +22,54 @@ import * as Task from '@userActions/Task';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
+import type * as OnyxTypes from '@src/types/onyx';
-/**
- * @param {Object} [policy]
- * @returns {Object|undefined}
- */
-const policySelector = (policy) =>
- policy && {
- type: policy.type,
- role: policy.role,
- isPolicyExpenseChatEnabled: policy.isPolicyExpenseChatEnabled,
- pendingAction: policy.pendingAction,
- };
+type FloatingActionButtonAndPopoverOnyxProps = {
+ /** The list of policies the user has access to. */
+ allPolicies: OnyxCollection;
-const propTypes = {
- ...windowDimensionsPropTypes,
+ /** Whether app is in loading state */
+ isLoading: OnyxEntry;
+};
+type FloatingActionButtonAndPopoverProps = FloatingActionButtonAndPopoverOnyxProps & {
/* Callback function when the menu is shown */
- onShowCreateMenu: PropTypes.func,
+ onShowCreateMenu?: () => void;
/* Callback function before the menu is hidden */
- onHideCreateMenu: PropTypes.func,
-
- /** The list of policies the user has access to. */
- allPolicies: PropTypes.shape({
- /** The policy name */
- name: PropTypes.string,
- }),
-
- /** Indicated whether the report data is loading */
- isLoading: PropTypes.bool,
-
- /** Forwarded ref to FloatingActionButtonAndPopover */
- innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ onHideCreateMenu?: () => void;
};
-const defaultProps = {
- onHideCreateMenu: () => {},
- onShowCreateMenu: () => {},
- allPolicies: {},
- isLoading: false,
- innerRef: null,
+
+type FloatingActionButtonAndPopoverRef = {
+ hideCreateMenu: () => void;
};
/**
* Responsible for rendering the {@link PopoverMenu}, and the accompanying
* FAB that can open or close the menu.
- * @param {Object} props
- * @returns {JSX.Element}
*/
-function FloatingActionButtonAndPopover(props) {
+function FloatingActionButtonAndPopover(
+ {onHideCreateMenu, onShowCreateMenu, isLoading, allPolicies}: FloatingActionButtonAndPopoverProps,
+ ref: ForwardedRef,
+) {
const styles = useThemeStyles();
const {translate} = useLocalize();
const [isCreateMenuActive, setIsCreateMenuActive] = useState(false);
- const fabRef = useRef(null);
+ const fabRef = useRef(null);
+ const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
+ const isFocused = useIsFocused();
- const prevIsFocused = usePrevious(props.isFocused);
+ const prevIsFocused = usePrevious(isFocused);
/**
* Check if LHN status changed from active to inactive.
* Used to close already opened FAB menu when open any other pages (i.e. Press Command + K on web).
- *
- * @param {Object} prevProps
- * @return {Boolean}
*/
const didScreenBecomeInactive = useCallback(
() =>
// When any other page is opened over LHN
- !props.isFocused && prevIsFocused,
- [props.isFocused, prevIsFocused],
+ !isFocused && prevIsFocused,
+ [isFocused, prevIsFocused],
);
/**
@@ -97,14 +77,14 @@ function FloatingActionButtonAndPopover(props) {
*/
const showCreateMenu = useCallback(
() => {
- if (!props.isFocused && props.isSmallScreenWidth) {
+ if (!isFocused && isSmallScreenWidth) {
return;
}
setIsCreateMenuActive(true);
- props.onShowCreateMenu();
+ onShowCreateMenu?.();
},
// eslint-disable-next-line react-hooks/exhaustive-deps
- [props.isFocused, props.isSmallScreenWidth],
+ [isFocused, isSmallScreenWidth],
);
/**
@@ -118,7 +98,7 @@ function FloatingActionButtonAndPopover(props) {
return;
}
setIsCreateMenuActive(false);
- props.onHideCreateMenu();
+ onHideCreateMenu?.();
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[isCreateMenuActive],
@@ -133,7 +113,7 @@ function FloatingActionButtonAndPopover(props) {
hideCreateMenu();
}, [didScreenBecomeInactive, hideCreateMenu]);
- useImperativeHandle(props.innerRef, () => ({
+ useImperativeHandle(ref, () => ({
hideCreateMenu() {
hideCreateMenu();
},
@@ -151,10 +131,10 @@ function FloatingActionButtonAndPopover(props) {
interceptAnonymousUser(() => Navigation.navigate(ROUTES.TEACHERS_UNITE)),
},
- ...(!props.isLoading && !Policy.hasActiveFreePolicy(props.allPolicies)
+ ...(!isLoading && !Policy.hasActiveFreePolicy(allPolicies as OnyxEntry>)
? [
{
displayInDefaultIconColor: true,
- contentFit: 'contain',
+ contentFit: 'contain' as const,
icon: Expensicons.NewWorkspace,
iconWidth: 46,
iconHeight: 40,
@@ -220,31 +200,25 @@ function FloatingActionButtonAndPopover(props) {
);
}
-FloatingActionButtonAndPopover.propTypes = propTypes;
-FloatingActionButtonAndPopover.defaultProps = defaultProps;
FloatingActionButtonAndPopover.displayName = 'FloatingActionButtonAndPopover';
-const FloatingActionButtonAndPopoverWithRef = forwardRef((props, ref) => (
- ) =>
+ policy
+ ? {
+ type: policy.type,
+ role: policy.role,
+ isPolicyExpenseChatEnabled: policy.isPolicyExpenseChatEnabled,
+ pendingAction: policy.pendingAction,
+ }
+ : null;
+
+export default withOnyx, FloatingActionButtonAndPopoverOnyxProps>({
+ allPolicies: {
+ key: ONYXKEYS.COLLECTION.POLICY,
+ // This assertion is needed because the selector in withOnyx expects that the return type will be the same as type in ONYXKEYS but for collection keys the selector is executed for each collection item. This is a bug in withOnyx typings that we don't have a solution yet, when useOnyx hook is introduced it will be fixed.
+ selector: policySelector as unknown as (policy: OnyxEntry) => OnyxCollection,
+ },
+ isLoading: {
+ key: ONYXKEYS.IS_LOADING_APP,
+ },
+})(forwardRef(FloatingActionButtonAndPopover));
diff --git a/src/pages/home/sidebar/SidebarScreen/index.js b/src/pages/home/sidebar/SidebarScreen/index.tsx
similarity index 51%
rename from src/pages/home/sidebar/SidebarScreen/index.js
rename to src/pages/home/sidebar/SidebarScreen/index.tsx
index dfb5db7c15d3..625491674cd8 100755
--- a/src/pages/home/sidebar/SidebarScreen/index.js
+++ b/src/pages/home/sidebar/SidebarScreen/index.tsx
@@ -1,20 +1,15 @@
import React from 'react';
import FreezeWrapper from '@libs/Navigation/FreezeWrapper';
import BaseSidebarScreen from './BaseSidebarScreen';
-import sidebarPropTypes from './sidebarPropTypes';
-function SidebarScreen(props) {
+function SidebarScreen() {
return (
-
);
}
-SidebarScreen.propTypes = sidebarPropTypes;
SidebarScreen.displayName = 'SidebarScreen';
export default SidebarScreen;
diff --git a/src/pages/home/sidebar/SidebarScreen/sidebarPropTypes.js b/src/pages/home/sidebar/SidebarScreen/sidebarPropTypes.js
deleted file mode 100644
index 61a9194bb1e5..000000000000
--- a/src/pages/home/sidebar/SidebarScreen/sidebarPropTypes.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import PropTypes from 'prop-types';
-
-const sidebarPropTypes = {
- /** Callback when onLayout of sidebar is called */
- onLayout: PropTypes.func,
-};
-export default sidebarPropTypes;
diff --git a/src/pages/home/sidebar/SignInButton.js b/src/pages/home/sidebar/SignInButton.tsx
similarity index 95%
rename from src/pages/home/sidebar/SignInButton.js
rename to src/pages/home/sidebar/SignInButton.tsx
index f89deb6f65b2..1dc65bfd5050 100644
--- a/src/pages/home/sidebar/SignInButton.js
+++ b/src/pages/home/sidebar/SignInButton.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable rulesdir/onyx-props-must-have-default */
import React from 'react';
import {View} from 'react-native';
import Button from '@components/Button';
diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
index fb3a4d9457d5..f9317a1ea964 100644
--- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
+++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js
@@ -288,6 +288,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({
text={translate('iou.addToSplit')}
onPress={handleConfirmSelection}
pressOnEnter
+ large
isDisabled={shouldShowSplitBillErrorMessage}
/>
)}
diff --git a/src/pages/iou/request/step/IOURequestStepDistance.js b/src/pages/iou/request/step/IOURequestStepDistance.js
index 320359192c8d..9e12381bc497 100644
--- a/src/pages/iou/request/step/IOURequestStepDistance.js
+++ b/src/pages/iou/request/step/IOURequestStepDistance.js
@@ -234,6 +234,7 @@ function IOURequestStepDistance({
success
allowBubble
pressOnEnter
+ large
style={[styles.w100, styles.mb4, styles.ph4, styles.flexShrink0]}
onPress={submitWaypoints}
text={translate('common.next')}
diff --git a/src/pages/iou/steps/MoneyRequestAmountForm.tsx b/src/pages/iou/steps/MoneyRequestAmountForm.tsx
index 55bf77e9ae88..aec2f4765fd4 100644
--- a/src/pages/iou/steps/MoneyRequestAmountForm.tsx
+++ b/src/pages/iou/steps/MoneyRequestAmountForm.tsx
@@ -329,6 +329,7 @@ function MoneyRequestAmountForm(
allowBubble={!isEditing}
pressOnEnter
medium={isExtraSmallScreenHeight}
+ large={!isExtraSmallScreenHeight}
style={[styles.w100, canUseTouchScreen ? styles.mt5 : styles.mt3]}
onPress={submitAndNavigateToNextPage}
text={buttonText}
diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
index 1ad6488aeee9..fd869973d36a 100755
--- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
+++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js
@@ -306,6 +306,7 @@ function MoneyRequestParticipantsSelector({
text={translate('iou.addToSplit')}
onPress={handleConfirmSelection}
pressOnEnter
+ large
isDisabled={shouldShowSplitBillErrorMessage}
/>
)}
diff --git a/src/pages/settings/AboutPage/ConsolePage.tsx b/src/pages/settings/AboutPage/ConsolePage.tsx
index 5c5e9ba91874..50cbce314be4 100644
--- a/src/pages/settings/AboutPage/ConsolePage.tsx
+++ b/src/pages/settings/AboutPage/ConsolePage.tsx
@@ -148,12 +148,14 @@ function ConsolePage({capturedLogs, shouldStoreLogs}: ConsolePageProps) {
{
ExitSurvey.switchToOldDot();
diff --git a/src/pages/settings/InitialSettingsPage.tsx b/src/pages/settings/InitialSettingsPage.tsx
index 811ce38bdd1a..7059efab309f 100755
--- a/src/pages/settings/InitialSettingsPage.tsx
+++ b/src/pages/settings/InitialSettingsPage.tsx
@@ -439,11 +439,12 @@ function InitialSettingsPage({session, userWallet, bankAccountList, fundList, wa
return (
-
+
{headerContent}
{accountMenuItems}
{workspaceMenuItems}
diff --git a/src/pages/settings/Preferences/LanguagePage.js b/src/pages/settings/Preferences/LanguagePage.tsx
similarity index 56%
rename from src/pages/settings/Preferences/LanguagePage.js
rename to src/pages/settings/Preferences/LanguagePage.tsx
index 1df1565214c9..b577e006acfb 100644
--- a/src/pages/settings/Preferences/LanguagePage.js
+++ b/src/pages/settings/Preferences/LanguagePage.tsx
@@ -1,28 +1,21 @@
-import PropTypes from 'prop-types';
import React from 'react';
-import _ from 'underscore';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
import SelectionList from '@components/SelectionList';
import RadioListItem from '@components/SelectionList/RadioListItem';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
import Navigation from '@libs/Navigation/Navigation';
import * as App from '@userActions/App';
import CONST from '@src/CONST';
-const propTypes = {
- ...withLocalizePropTypes,
+function LanguagePage() {
+ const {translate, preferredLocale} = useLocalize();
- /** The preferred language of the App */
- preferredLocale: PropTypes.string.isRequired,
-};
-
-function LanguagePage(props) {
- const localesToLanguages = _.map(CONST.LANGUAGES, (language) => ({
+ const localesToLanguages = CONST.LANGUAGES.map((language) => ({
value: language,
- text: props.translate(`languagePage.languages.${language}.label`),
+ text: translate(`languagePage.languages.${language}.label`),
keyForList: language,
- isSelected: props.preferredLocale === language,
+ isSelected: preferredLocale === language,
}));
return (
@@ -31,20 +24,19 @@ function LanguagePage(props) {
testID={LanguagePage.displayName}
>
Navigation.goBack()}
/>
App.setLocaleAndNavigate(language.value)}
- initiallyFocusedOptionKey={_.find(localesToLanguages, (locale) => locale.isSelected).keyForList}
+ initiallyFocusedOptionKey={localesToLanguages.find((locale) => locale.isSelected)?.keyForList}
/>
);
}
LanguagePage.displayName = 'LanguagePage';
-LanguagePage.propTypes = propTypes;
-export default withLocalize(LanguagePage);
+export default LanguagePage;
diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.tsx
similarity index 86%
rename from src/pages/settings/Preferences/PreferencesPage.js
rename to src/pages/settings/Preferences/PreferencesPage.tsx
index 36a26ccffaa2..5849f323dc36 100755
--- a/src/pages/settings/Preferences/PreferencesPage.js
+++ b/src/pages/settings/Preferences/PreferencesPage.tsx
@@ -1,7 +1,6 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import * as Illustrations from '@components/Icon/Illustrations';
@@ -15,33 +14,28 @@ import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
+import LocaleUtils from '@libs/LocaleUtils';
import Navigation from '@libs/Navigation/Navigation';
import * as User from '@userActions/User';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
+import type {PreferredTheme, PriorityMode, User as UserType} from '@src/types/onyx';
-const propTypes = {
+type PreferencesPageOnyxProps = {
/** The chat priority mode */
- priorityMode: PropTypes.string,
+ priorityMode: PriorityMode;
/** The app's color theme */
- preferredTheme: PropTypes.string,
+ preferredTheme: PreferredTheme;
/** The details about the user that is signed in */
- user: PropTypes.shape({
- /** Whether or not the user is subscribed to news updates */
- isSubscribedToNewsletter: PropTypes.bool,
- }),
+ user: OnyxEntry;
};
-const defaultProps = {
- priorityMode: CONST.PRIORITY_MODE.DEFAULT,
- preferredTheme: CONST.DEFAULT_THEME,
- user: {},
-};
+type PreferencesPageProps = PreferencesPageOnyxProps;
-function PreferencesPage(props) {
+function PreferencesPage({priorityMode, preferredTheme, user}: PreferencesPageProps) {
const styles = useThemeStyles();
const {translate, preferredLocale} = useLocalize();
const {isSmallScreenWidth} = useWindowDimensions();
@@ -83,7 +77,7 @@ function PreferencesPage(props) {
@@ -95,28 +89,28 @@ function PreferencesPage(props) {
Navigation.navigate(ROUTES.SETTINGS_PRIORITY_MODE)}
wrapperStyle={styles.sectionMenuItemTopDescription}
/>
Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)}
wrapperStyle={styles.sectionMenuItemTopDescription}
/>
Navigation.navigate(ROUTES.SETTINGS_THEME)}
wrapperStyle={styles.sectionMenuItemTopDescription}
@@ -129,11 +123,9 @@ function PreferencesPage(props) {
);
}
-PreferencesPage.propTypes = propTypes;
-PreferencesPage.defaultProps = defaultProps;
PreferencesPage.displayName = 'PreferencesPage';
-export default withOnyx({
+export default withOnyx({
priorityMode: {
key: ONYXKEYS.NVP_PRIORITY_MODE,
},
diff --git a/src/pages/settings/Preferences/PriorityModePage.js b/src/pages/settings/Preferences/PriorityModePage.tsx
similarity index 50%
rename from src/pages/settings/Preferences/PriorityModePage.js
rename to src/pages/settings/Preferences/PriorityModePage.tsx
index 05c0546c2e41..677d3813acd7 100644
--- a/src/pages/settings/Preferences/PriorityModePage.js
+++ b/src/pages/settings/Preferences/PriorityModePage.tsx
@@ -1,49 +1,54 @@
-import PropTypes from 'prop-types';
import React, {useCallback} from 'react';
import {withOnyx} from 'react-native-onyx';
-import _, {compose} from 'underscore';
+import type {ValueOf} from 'type-fest';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
import SelectionList from '@components/SelectionList';
import RadioListItem from '@components/SelectionList/RadioListItem';
import Text from '@components/Text';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import Navigation from '@libs/Navigation/Navigation';
import * as User from '@userActions/User';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
+import type {PriorityMode} from '@src/types/onyx';
-const propTypes = {
- /** The chat priority mode */
- priorityMode: PropTypes.string,
-
- ...withLocalizePropTypes,
+type PriorityModeItem = {
+ value: ValueOf;
+ text: string;
+ alternateText: string;
+ keyForList: ValueOf;
+ isSelected: boolean;
};
-const defaultProps = {
- priorityMode: CONST.PRIORITY_MODE.DEFAULT,
+type PriorityModePageOnyxProps = {
+ /** The chat priority mode */
+ priorityMode: PriorityMode;
};
-function PriorityModePage(props) {
+type PriorityModePageProps = PriorityModePageOnyxProps;
+
+function PriorityModePage({priorityMode}: PriorityModePageProps) {
+ const {translate} = useLocalize();
const styles = useThemeStyles();
- const priorityModes = _.map(_.values(CONST.PRIORITY_MODE), (mode) => ({
+ const priorityModes = Object.values(CONST.PRIORITY_MODE).map((mode) => ({
value: mode,
- text: props.translate(`priorityModePage.priorityModes.${mode}.label`),
- alternateText: props.translate(`priorityModePage.priorityModes.${mode}.description`),
+ text: translate(`priorityModePage.priorityModes.${mode}.label`),
+ alternateText: translate(`priorityModePage.priorityModes.${mode}.description`),
keyForList: mode,
- isSelected: props.priorityMode === mode,
+ isSelected: priorityMode === mode,
}));
const updateMode = useCallback(
- (mode) => {
- if (mode.value === props.priorityMode) {
+ (mode: PriorityModeItem) => {
+ if (mode.value === priorityMode) {
Navigation.goBack();
return;
}
User.updateChatPriorityMode(mode.value);
},
- [props.priorityMode],
+ [priorityMode],
);
return (
@@ -52,29 +57,24 @@ function PriorityModePage(props) {
testID={PriorityModePage.displayName}
>
Navigation.goBack()}
/>
- {props.translate('priorityModePage.explainerText')}
+ {translate('priorityModePage.explainerText')}
mode.isSelected).keyForList}
+ initiallyFocusedOptionKey={priorityModes.find((mode) => mode.isSelected)?.keyForList}
/>
);
}
PriorityModePage.displayName = 'PriorityModePage';
-PriorityModePage.propTypes = propTypes;
-PriorityModePage.defaultProps = defaultProps;
-export default compose(
- withLocalize,
- withOnyx({
- priorityMode: {
- key: ONYXKEYS.NVP_PRIORITY_MODE,
- },
- }),
-)(PriorityModePage);
+export default withOnyx({
+ priorityMode: {
+ key: ONYXKEYS.NVP_PRIORITY_MODE,
+ },
+})(PriorityModePage);
diff --git a/src/pages/settings/Preferences/ThemePage.js b/src/pages/settings/Preferences/ThemePage.tsx
similarity index 74%
rename from src/pages/settings/Preferences/ThemePage.js
rename to src/pages/settings/Preferences/ThemePage.tsx
index 0724eb286620..f879a7a259ea 100644
--- a/src/pages/settings/Preferences/ThemePage.js
+++ b/src/pages/settings/Preferences/ThemePage.tsx
@@ -1,7 +1,5 @@
-import PropTypes from 'prop-types';
import React from 'react';
import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
import SelectionList from '@components/SelectionList';
@@ -13,24 +11,24 @@ import Navigation from '@libs/Navigation/Navigation';
import * as User from '@userActions/User';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
+import type {PreferredTheme} from '@src/types/onyx';
-const propTypes = {
+type ThemePageOnyxProps = {
/** The theme of the app */
- preferredTheme: PropTypes.string,
+ preferredTheme: PreferredTheme;
};
-const defaultProps = {
- preferredTheme: CONST.THEME.DEFAULT,
-};
+type ThemePageProps = ThemePageOnyxProps;
-function ThemePage(props) {
+function ThemePage({preferredTheme}: ThemePageProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
- const localesToThemes = _.map(_.values(_.omit(CONST.THEME, 'DEFAULT', 'FALLBACK')), (theme) => ({
+ const {DEFAULT, FALLBACK, ...themes} = CONST.THEME;
+ const localesToThemes = Object.values(themes).map((theme) => ({
value: theme,
text: translate(`themePage.themes.${theme}.label`),
keyForList: theme,
- isSelected: (props.preferredTheme || CONST.THEME.DEFAULT) === theme,
+ isSelected: (preferredTheme ?? CONST.THEME.DEFAULT) === theme,
}));
return (
@@ -51,17 +49,15 @@ function ThemePage(props) {
sections={[{data: localesToThemes}]}
ListItem={RadioListItem}
onSelectRow={(theme) => User.updateTheme(theme.value)}
- initiallyFocusedOptionKey={_.find(localesToThemes, (theme) => theme.isSelected).keyForList}
+ initiallyFocusedOptionKey={localesToThemes.find((theme) => theme.isSelected)?.keyForList}
/>
);
}
ThemePage.displayName = 'ThemePage';
-ThemePage.propTypes = propTypes;
-ThemePage.defaultProps = defaultProps;
-export default withOnyx({
+export default withOnyx({
preferredTheme: {
key: ONYXKEYS.PREFERRED_THEME,
},
diff --git a/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx b/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx
index 3851ef7153fb..cbb1f5991ad3 100644
--- a/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx
+++ b/src/pages/settings/Profile/Contacts/ContactMethodsPage.tsx
@@ -38,7 +38,7 @@ function ContactMethodsPage({loginList, session, route}: ContactMethodsPageProps
const styles = useThemeStyles();
const {formatPhoneNumber, translate} = useLocalize();
const loginNames = Object.keys(loginList ?? {});
- const navigateBackTo = route?.params?.backTo || ROUTES.SETTINGS_PROFILE;
+ const navigateBackTo = route?.params?.backTo;
// Sort the login names by placing the one corresponding to the default contact method as the first item before displaying the contact methods.
// The default contact method is determined by checking against the session email (the current login).
@@ -91,10 +91,6 @@ function ContactMethodsPage({loginList, session, route}: ContactMethodsPageProps
});
const onNewContactMethodButtonPress = useCallback(() => {
- if (navigateBackTo === ROUTES.SETTINGS_PROFILE) {
- Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD.route);
- return;
- }
Navigation.navigate(ROUTES.SETTINGS_NEW_CONTACT_METHOD.getRoute(navigateBackTo));
}, [navigateBackTo]);
@@ -121,6 +117,7 @@ function ContactMethodsPage({loginList, session, route}: ContactMethodsPageProps
{loginMenuItems}
;
};
-const propTypes = {
- ...withCurrentUserPersonalDetailsPropTypes,
-};
+type StatusPageProps = StatusPageOnyxProps & WithCurrentUserPersonalDetailsProps;
const initialEmoji = '💬';
-function StatusPage({draftStatus, currentUserPersonalDetails}) {
+function StatusPage({draftStatus, currentUserPersonalDetails}: StatusPageProps) {
const theme = useTheme();
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
const {translate} = useLocalize();
- const formRef = useRef(null);
- const [brickRoadIndicator, setBrickRoadIndicator] = useState('');
- const currentUserEmojiCode = lodashGet(currentUserPersonalDetails, 'status.emojiCode', '');
- const currentUserStatusText = lodashGet(currentUserPersonalDetails, 'status.text', '');
- const currentUserClearAfter = lodashGet(currentUserPersonalDetails, 'status.clearAfter', '');
- const draftEmojiCode = lodashGet(draftStatus, 'emojiCode');
- const draftText = lodashGet(draftStatus, 'text');
- const draftClearAfter = lodashGet(draftStatus, 'clearAfter');
-
+ const formRef = useRef(null);
+ const [brickRoadIndicator, setBrickRoadIndicator] = useState>();
+ const currentUserEmojiCode = currentUserPersonalDetails?.status?.emojiCode ?? '';
+ const currentUserStatusText = currentUserPersonalDetails?.status?.text ?? '';
+ const currentUserClearAfter = currentUserPersonalDetails?.status?.clearAfter ?? '';
+ const draftEmojiCode = draftStatus?.emojiCode;
+ const draftText = draftStatus?.text;
+ const draftClearAfter = draftStatus?.clearAfter;
+ // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
const defaultEmoji = draftEmojiCode || currentUserEmojiCode;
+ // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
const defaultText = draftText || currentUserStatusText;
const customClearAfter = useMemo(() => {
+ // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
const dataToShow = draftClearAfter || currentUserClearAfter;
return DateUtils.getLocalizedTimePeriodDescription(dataToShow);
}, [draftClearAfter, currentUserClearAfter]);
const isValidClearAfterDate = useCallback(() => {
+ // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
const clearAfterTime = draftClearAfter || currentUserClearAfter;
if (clearAfterTime === CONST.CUSTOM_STATUS_TYPES.NEVER || clearAfterTime === '') {
return true;
@@ -72,11 +76,12 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
const navigateBackToPreviousScreen = useCallback(() => Navigation.goBack(), []);
const updateStatus = useCallback(
- ({emojiCode, statusText}) => {
+ ({emojiCode, statusText}: FormOnyxValues) => {
+ // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
const clearAfterTime = draftClearAfter || currentUserClearAfter || CONST.CUSTOM_STATUS_TYPES.NEVER;
const isValid = DateUtils.isTimeAtLeastOneMinuteInFuture({dateTimeString: clearAfterTime});
if (!isValid && clearAfterTime !== CONST.CUSTOM_STATUS_TYPES.NEVER) {
- setBrickRoadIndicator(isValidClearAfterDate() ? null : CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR);
+ setBrickRoadIndicator(isValidClearAfterDate() ? undefined : CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR);
return;
}
User.updateCustomStatus({
@@ -84,7 +89,6 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
emojiCode: !emojiCode && statusText ? initialEmoji : emojiCode,
clearAfter: clearAfterTime !== CONST.CUSTOM_STATUS_TYPES.NEVER ? clearAfterTime : '',
});
-
User.clearDraftCustomStatus();
InteractionManager.runAfterInteractions(() => {
navigateBackToPreviousScreen();
@@ -100,13 +104,14 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
emojiCode: '',
clearAfter: DateUtils.getEndOfToday(),
});
- formRef.current.resetForm({[INPUT_IDS.EMOJI_CODE]: ''});
+ formRef.current?.resetForm({[INPUT_IDS.EMOJI_CODE]: ''});
+
InteractionManager.runAfterInteractions(() => {
navigateBackToPreviousScreen();
});
};
- useEffect(() => setBrickRoadIndicator(isValidClearAfterDate() ? null : CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR), [isValidClearAfterDate]);
+ useEffect(() => setBrickRoadIndicator(isValidClearAfterDate() ? undefined : CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR), [isValidClearAfterDate]);
useEffect(() => {
if (!currentUserEmojiCode && !currentUserClearAfter && !draftClearAfter) {
@@ -119,7 +124,7 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
- const validateForm = useCallback(() => {
+ const validateForm = useCallback((): FormInputErrors => {
if (brickRoadIndicator) {
return {clearAfter: ''};
}
@@ -157,8 +162,9 @@ function StatusPage({draftStatus, currentUserPersonalDetails}) {
({
draftStatus: {
key: () => ONYXKEYS.CUSTOM_STATUS_DRAFT,
},
- }),
-)(StatusPage);
+ })(StatusPage),
+);
diff --git a/src/pages/settings/Profile/DisplayNamePage.js b/src/pages/settings/Profile/DisplayNamePage.tsx
similarity index 67%
rename from src/pages/settings/Profile/DisplayNamePage.js
rename to src/pages/settings/Profile/DisplayNamePage.tsx
index c443a91a7313..2e7a67509139 100644
--- a/src/pages/settings/Profile/DisplayNamePage.js
+++ b/src/pages/settings/Profile/DisplayNamePage.tsx
@@ -1,19 +1,19 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
import FormProvider from '@components/Form/FormProvider';
import InputWrapper from '@components/Form/InputWrapper';
+import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
import Text from '@components/Text';
import TextInput from '@components/TextInput';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
+import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
+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 ValidationUtils from '@libs/ValidationUtils';
@@ -22,39 +22,27 @@ import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import INPUT_IDS from '@src/types/form/DisplayNameForm';
-const propTypes = {
- ...withLocalizePropTypes,
- ...withCurrentUserPersonalDetailsPropTypes,
- isLoadingApp: PropTypes.bool,
+type DisplayNamePageOnyxProps = {
+ isLoadingApp: OnyxEntry;
};
-const defaultProps = {
- ...withCurrentUserPersonalDetailsDefaultProps,
- isLoadingApp: true,
-};
+type DisplayNamePageProps = DisplayNamePageOnyxProps & WithCurrentUserPersonalDetailsProps;
/**
* Submit form to update user's first and last name (and display name)
- * @param {Object} values
- * @param {String} values.firstName
- * @param {String} values.lastName
*/
-const updateDisplayName = (values) => {
+const updateDisplayName = (values: FormOnyxValues) => {
PersonalDetails.updateDisplayName(values.firstName.trim(), values.lastName.trim());
};
-function DisplayNamePage(props) {
+function DisplayNamePage({isLoadingApp = true, currentUserPersonalDetails}: DisplayNamePageProps) {
const styles = useThemeStyles();
- const currentUserDetails = props.currentUserPersonalDetails || {};
+ const {translate} = useLocalize();
+
+ const currentUserDetails = currentUserPersonalDetails ?? {};
- /**
- * @param {Object} values
- * @param {String} values.firstName
- * @param {String} values.lastName
- * @returns {Object} - An object containing the errors for each inputID
- */
- const validate = (values) => {
- const errors = {};
+ const validate = (values: FormOnyxValues) => {
+ const errors: FormInputErrors = {};
// First we validate the first name field
if (!ValidationUtils.isValidDisplayName(values.firstName)) {
@@ -77,7 +65,6 @@ function DisplayNamePage(props) {
}
return errors;
};
-
return (
Navigation.goBack()}
/>
- {props.isLoadingApp ? (
+ {isLoadingApp ? (
- {props.translate('displayNamePage.isShownOnProfile')}
+ {translate('displayNamePage.isShownOnProfile')}
@@ -119,10 +106,10 @@ function DisplayNamePage(props) {
InputComponent={TextInput}
inputID={INPUT_IDS.LAST_NAME}
name="lname"
- label={props.translate('common.lastName')}
- aria-label={props.translate('common.lastName')}
+ label={translate('common.lastName')}
+ aria-label={translate('common.lastName')}
role={CONST.ROLE.PRESENTATION}
- defaultValue={lodashGet(currentUserDetails, 'lastName', '')}
+ defaultValue={currentUserDetails.lastName ?? ''}
spellCheck={false}
/>
@@ -132,16 +119,12 @@ function DisplayNamePage(props) {
);
}
-DisplayNamePage.propTypes = propTypes;
-DisplayNamePage.defaultProps = defaultProps;
DisplayNamePage.displayName = 'DisplayNamePage';
-export default compose(
- withLocalize,
- withCurrentUserPersonalDetails,
- withOnyx({
+export default withCurrentUserPersonalDetails(
+ withOnyx({
isLoadingApp: {
key: ONYXKEYS.IS_LOADING_APP,
},
- }),
-)(DisplayNamePage);
+ })(DisplayNamePage),
+);
diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.tsx
similarity index 53%
rename from src/pages/settings/Profile/ProfilePage.js
rename to src/pages/settings/Profile/ProfilePage.tsx
index 2fa133f41616..58a323bf0a10 100755
--- a/src/pages/settings/Profile/ProfilePage.js
+++ b/src/pages/settings/Profile/ProfilePage.tsx
@@ -1,10 +1,8 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
import React, {useEffect} from 'react';
import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
-import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import * as Illustrations from '@components/Icon/Illustrations';
import MenuItemGroup from '@components/MenuItemGroup';
@@ -12,63 +10,36 @@ import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import ScreenWrapper from '@components/ScreenWrapper';
import ScrollView from '@components/ScrollView';
import Section from '@components/Section';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
-import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
+import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
+import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
+import useLocalize from '@hooks/useLocalize';
import usePrivatePersonalDetails from '@hooks/usePrivatePersonalDetails';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
-import compose from '@libs/compose';
-import {translatableTextPropTypes} from '@libs/Localize';
+import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
import Navigation from '@libs/Navigation/Navigation';
import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
import * as UserUtils from '@libs/UserUtils';
import * as App from '@userActions/App';
import CONST from '@src/CONST';
+import type {TranslationPaths} from '@src/languages/types';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
+import type {LoginList, PersonalDetails, PrivatePersonalDetails} from '@src/types/onyx';
-const propTypes = {
- /* Onyx Props */
-
- /** Login list for the user that is signed in */
- loginList: PropTypes.objectOf(
- PropTypes.shape({
- /** Date login was validated, used to show brickroad info status */
- validatedDate: PropTypes.string,
-
- /** Field-specific server side errors keyed by microtime */
- errorFields: PropTypes.objectOf(PropTypes.objectOf(translatableTextPropTypes)),
- }),
- ),
-
+type ProfilePageOnyxProps = {
+ loginList: OnyxEntry;
/** User's private personal details */
- privatePersonalDetails: PropTypes.shape({
- legalFirstName: PropTypes.string,
- legalLastName: PropTypes.string,
- dob: PropTypes.string,
-
- /** User's home address */
- address: PropTypes.shape({
- street: PropTypes.string,
- city: PropTypes.string,
- state: PropTypes.string,
- zip: PropTypes.string,
- country: PropTypes.string,
- }),
- }),
-
- ...withLocalizePropTypes,
- ...windowDimensionsPropTypes,
- ...withCurrentUserPersonalDetailsPropTypes,
+ privatePersonalDetails: OnyxEntry;
};
-const defaultProps = {
- loginList: {},
- ...withCurrentUserPersonalDetailsDefaultProps,
- privatePersonalDetails: {
+type ProfilePageProps = ProfilePageOnyxProps & WithCurrentUserPersonalDetailsProps;
+
+function ProfilePage({
+ loginList,
+ privatePersonalDetails = {
legalFirstName: '',
legalLastName: '',
dob: '',
@@ -81,79 +52,73 @@ const defaultProps = {
country: '',
},
},
-};
-
-function ProfilePage(props) {
+ currentUserPersonalDetails,
+}: ProfilePageProps) {
const theme = useTheme();
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
- const getPronouns = () => {
- let pronounsKey = lodashGet(props.currentUserPersonalDetails, 'pronouns', '');
- if (pronounsKey.startsWith(CONST.PRONOUNS.PREFIX)) {
- pronounsKey = pronounsKey.slice(CONST.PRONOUNS.PREFIX.length);
- }
+ const {translate} = useLocalize();
+ const {isSmallScreenWidth} = useWindowDimensions();
- if (!pronounsKey) {
- return props.translate('profilePage.selectYourPronouns');
- }
- return props.translate(`pronouns.${pronounsKey}`);
+ const getPronouns = (): string => {
+ const pronounsKey = currentUserPersonalDetails?.pronouns?.replace(CONST.PRONOUNS.PREFIX, '') ?? '';
+ return pronounsKey ? translate(`pronouns.${pronounsKey}` as TranslationPaths) : translate('profilePage.selectYourPronouns');
};
- const currentUserDetails = props.currentUserPersonalDetails || {};
- const contactMethodBrickRoadIndicator = UserUtils.getLoginListBrickRoadIndicator(props.loginList);
- const emojiCode = lodashGet(props, 'currentUserPersonalDetails.status.emojiCode', '');
- const {isSmallScreenWidth} = useWindowDimensions();
+
+ const contactMethodBrickRoadIndicator = UserUtils.getLoginListBrickRoadIndicator(loginList);
+ const emojiCode = currentUserPersonalDetails?.status?.emojiCode ?? '';
usePrivatePersonalDetails();
- const privateDetails = props.privatePersonalDetails || {};
- const legalName = `${privateDetails.legalFirstName || ''} ${privateDetails.legalLastName || ''}`.trim();
- const isLoadingPersonalDetails = lodashGet(props.privatePersonalDetails, 'isLoading', true);
+ const privateDetails = privatePersonalDetails ?? {};
+ const legalName = `${privateDetails.legalFirstName ?? ''} ${privateDetails.legalLastName ?? ''}`.trim();
+ const isLoadingPersonalDetails = privatePersonalDetails?.isLoading ?? true;
const publicOptions = [
{
- description: props.translate('displayNamePage.headerTitle'),
- title: lodashGet(currentUserDetails, 'displayName', ''),
+ description: translate('displayNamePage.headerTitle'),
+ title: currentUserPersonalDetails?.displayName ?? '',
pageRoute: ROUTES.SETTINGS_DISPLAY_NAME,
},
{
- description: props.translate('contacts.contactMethod'),
- title: props.formatPhoneNumber(lodashGet(currentUserDetails, 'login', '')),
+ description: translate('contacts.contactMethod'),
+ title: LocalePhoneNumber.formatPhoneNumber(currentUserPersonalDetails?.login ?? ''),
pageRoute: ROUTES.SETTINGS_CONTACT_METHODS.route,
brickRoadIndicator: contactMethodBrickRoadIndicator,
},
{
- description: props.translate('statusPage.status'),
- title: emojiCode ? `${emojiCode} ${lodashGet(props, 'currentUserPersonalDetails.status.text', '')}` : '',
+ description: translate('statusPage.status'),
+ title: emojiCode ? `${emojiCode} ${currentUserPersonalDetails?.status?.text ?? ''}` : '',
pageRoute: ROUTES.SETTINGS_STATUS,
},
{
- description: props.translate('pronounsPage.pronouns'),
+ description: translate('pronounsPage.pronouns'),
title: getPronouns(),
pageRoute: ROUTES.SETTINGS_PRONOUNS,
},
{
- description: props.translate('timezonePage.timezone'),
- title: `${lodashGet(currentUserDetails, 'timezone.selected', '')}`,
+ description: translate('timezonePage.timezone'),
+ title: currentUserPersonalDetails?.timezone?.selected ?? '',
pageRoute: ROUTES.SETTINGS_TIMEZONE,
},
];
useEffect(() => {
- App.openProfile(props.currentUserPersonalDetails);
- }, [props.currentUserPersonalDetails]);
+ App.openProfile(currentUserPersonalDetails as PersonalDetails);
+ }, [currentUserPersonalDetails]);
const privateOptions = [
{
- description: props.translate('privatePersonalDetails.legalName'),
+ description: translate('privatePersonalDetails.legalName'),
title: legalName,
pageRoute: ROUTES.SETTINGS_LEGAL_NAME,
},
{
- description: props.translate('common.dob'),
- title: privateDetails.dob || '',
+ description: translate('common.dob'),
+ title: privateDetails.dob ?? '',
pageRoute: ROUTES.SETTINGS_DATE_OF_BIRTH,
},
{
- description: props.translate('privatePersonalDetails.address'),
- title: PersonalDetailsUtils.getFormattedAddress(props.privatePersonalDetails),
+ description: translate('privatePersonalDetails.address'),
+ title: PersonalDetailsUtils.getFormattedAddress(privateDetails),
pageRoute: ROUTES.SETTINGS_ADDRESS,
},
];
@@ -165,24 +130,25 @@ function ProfilePage(props) {
shouldShowOfflineIndicatorInWideScreen
>
Navigation.goBack()}
- shouldShowBackButton={props.isSmallScreenWidth}
+ shouldShowBackButton={isSmallScreenWidth}
icon={Illustrations.Profile}
/>
- {_.map(publicOptions, (detail, index) => (
+ {publicOptions.map((detail, index) => (
{isLoadingPersonalDetails ? (
- ({
loginList: {
key: ONYXKEYS.LOGIN_LIST,
},
privatePersonalDetails: {
key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
},
- user: {
- key: ONYXKEYS.USER,
- },
- }),
-)(ProfilePage);
+ })(ProfilePage),
+);
diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.tsx
similarity index 58%
rename from src/pages/settings/Profile/PronounsPage.js
rename to src/pages/settings/Profile/PronounsPage.tsx
index 1d4675a42b8a..5bd2737a98a4 100644
--- a/src/pages/settings/Profile/PronounsPage.js
+++ b/src/pages/settings/Profile/PronounsPage.tsx
@@ -1,49 +1,43 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
import React, {useEffect, useMemo, useState} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
import SelectionList from '@components/SelectionList';
import RadioListItem from '@components/SelectionList/RadioListItem';
+import type {ListItem} from '@components/SelectionList/types';
import Text from '@components/Text';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
+import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
+import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
import Navigation from '@libs/Navigation/Navigation';
import * as PersonalDetails from '@userActions/PersonalDetails';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
-const propTypes = {
- ...withCurrentUserPersonalDetailsPropTypes,
-
- /** Indicates whether the app is loading initial data */
- isLoadingApp: PropTypes.bool,
+type PronounEntry = ListItem & {
+ value: string;
};
-const defaultProps = {
- ...withCurrentUserPersonalDetailsDefaultProps,
- isLoadingApp: true,
+type PronounsPageOnyxProps = {
+ isLoadingApp: OnyxEntry;
};
+type PronounsPageProps = PronounsPageOnyxProps & WithCurrentUserPersonalDetailsProps;
-function PronounsPage({currentUserPersonalDetails, isLoadingApp}) {
+function PronounsPage({currentUserPersonalDetails, isLoadingApp = true}: PronounsPageProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
- const currentPronouns = lodashGet(currentUserPersonalDetails, 'pronouns', '');
+ const currentPronouns = currentUserPersonalDetails?.pronouns ?? '';
const currentPronounsKey = currentPronouns.substring(CONST.PRONOUNS.PREFIX.length);
const [searchValue, setSearchValue] = useState('');
useEffect(() => {
- if (isLoadingApp && _.isUndefined(currentUserPersonalDetails.pronouns)) {
+ if (isLoadingApp && !currentUserPersonalDetails.pronouns) {
return;
}
- const currentPronounsText = _.chain(CONST.PRONOUNS_LIST)
- .find((_value) => _value === currentPronounsKey)
- .value();
+ const currentPronounsText = CONST.PRONOUNS_LIST.find((value) => value === currentPronounsKey);
setSearchValue(currentPronounsText ? translate(`pronouns.${currentPronounsText}`) : '');
@@ -51,34 +45,31 @@ function PronounsPage({currentUserPersonalDetails, isLoadingApp}) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isLoadingApp]);
- const filteredPronounsList = useMemo(() => {
- const pronouns = _.chain(CONST.PRONOUNS_LIST)
- .map((value) => {
- const fullPronounKey = `${CONST.PRONOUNS.PREFIX}${value}`;
- const isCurrentPronouns = fullPronounKey === currentPronouns;
+ const filteredPronounsList = useMemo((): PronounEntry[] => {
+ const pronouns = CONST.PRONOUNS_LIST.map((value) => {
+ const fullPronounKey = `${CONST.PRONOUNS.PREFIX}${value}`;
+ const isCurrentPronouns = fullPronounKey === currentPronouns;
- return {
- text: translate(`pronouns.${value}`),
- value: fullPronounKey,
- keyForList: value,
- isSelected: isCurrentPronouns,
- };
- })
- .sortBy((pronoun) => pronoun.text.toLowerCase())
- .value();
+ return {
+ text: translate(`pronouns.${value}`),
+ value: fullPronounKey,
+ keyForList: value,
+ isSelected: isCurrentPronouns,
+ };
+ }).sort((a, b) => a.text.toLowerCase().localeCompare(b.text.toLowerCase()));
const trimmedSearch = searchValue.trim();
if (trimmedSearch.length === 0) {
return [];
}
- return _.filter(pronouns, (pronoun) => pronoun.text.toLowerCase().indexOf(trimmedSearch.toLowerCase()) >= 0);
+ return pronouns.filter((pronoun) => pronoun.text.toLowerCase().indexOf(trimmedSearch.toLowerCase()) >= 0);
}, [searchValue, currentPronouns, translate]);
- const headerMessage = searchValue.trim() && filteredPronounsList.length === 0 ? translate('common.noResultsFound') : '';
+ const headerMessage = searchValue.trim() && filteredPronounsList?.length === 0 ? translate('common.noResultsFound') : '';
- const updatePronouns = (selectedPronouns) => {
- PersonalDetails.updatePronouns(selectedPronouns.keyForList === currentPronounsKey ? '' : lodashGet(selectedPronouns, 'value', ''));
+ const updatePronouns = (selectedPronouns: PronounEntry) => {
+ PersonalDetails.updatePronouns(selectedPronouns.keyForList === currentPronounsKey ? '' : selectedPronouns?.value ?? '');
};
return (
@@ -86,7 +77,7 @@ function PronounsPage({currentUserPersonalDetails, isLoadingApp}) {
includeSafeAreaPaddingBottom={false}
testID={PronounsPage.displayName}
>
- {isLoadingApp && _.isUndefined(currentUserPersonalDetails.pronouns) ? (
+ {isLoadingApp && !currentUserPersonalDetails.pronouns ? (
({
isLoadingApp: {
key: ONYXKEYS.IS_LOADING_APP,
},
- }),
-)(PronounsPage);
+ })(PronounsPage),
+);
diff --git a/src/pages/settings/Profile/TimezoneInitialPage.js b/src/pages/settings/Profile/TimezoneInitialPage.tsx
similarity index 55%
rename from src/pages/settings/Profile/TimezoneInitialPage.js
rename to src/pages/settings/Profile/TimezoneInitialPage.tsx
index 1b2596b9d369..1df0063c57b1 100644
--- a/src/pages/settings/Profile/TimezoneInitialPage.js
+++ b/src/pages/settings/Profile/TimezoneInitialPage.tsx
@@ -1,4 +1,3 @@
-import lodashGet from 'lodash/get';
import React from 'react';
import {View} from 'react-native';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -6,62 +5,56 @@ import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
import ScreenWrapper from '@components/ScreenWrapper';
import Switch from '@components/Switch';
import Text from '@components/Text';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
+import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
+import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
import Navigation from '@libs/Navigation/Navigation';
import * as PersonalDetails from '@userActions/PersonalDetails';
import CONST from '@src/CONST';
import ROUTES from '@src/ROUTES';
+import type {SelectedTimezone, Timezone} from '@src/types/onyx/PersonalDetails';
-const propTypes = {
- ...withLocalizePropTypes,
- ...withCurrentUserPersonalDetailsPropTypes,
-};
+type TimezoneInitialPageProps = WithCurrentUserPersonalDetailsProps;
-const defaultProps = {
- ...withCurrentUserPersonalDetailsDefaultProps,
-};
-
-function TimezoneInitialPage(props) {
+function TimezoneInitialPage({currentUserPersonalDetails}: TimezoneInitialPageProps) {
const styles = useThemeStyles();
- const timezone = lodashGet(props.currentUserPersonalDetails, 'timezone', CONST.DEFAULT_TIME_ZONE);
+ const timezone: Timezone = currentUserPersonalDetails?.timezone ?? CONST.DEFAULT_TIME_ZONE;
+
+ const {translate} = useLocalize();
/**
* Updates setting for automatic timezone selection.
* Note: If we are updating automatically, we'll immediately calculate the user's timezone.
- *
- * @param {Boolean} isAutomatic
*/
- const updateAutomaticTimezone = (isAutomatic) => {
+ const updateAutomaticTimezone = (isAutomatic: boolean) => {
PersonalDetails.updateAutomaticTimezone({
automatic: isAutomatic,
- selected: isAutomatic ? Intl.DateTimeFormat().resolvedOptions().timeZone : timezone.selected,
+ selected: isAutomatic ? (Intl.DateTimeFormat().resolvedOptions().timeZone as SelectedTimezone) : timezone.selected,
});
};
return (
Navigation.goBack()}
/>
- {props.translate('timezonePage.isShownOnProfile')}
+ {translate('timezonePage.isShownOnProfile')}
- {props.translate('timezonePage.getLocationAutomatically')}
+ {translate('timezonePage.getLocationAutomatically')}
Navigation.navigate(ROUTES.SETTINGS_TIMEZONE_SELECT)}
@@ -71,8 +64,6 @@ function TimezoneInitialPage(props) {
);
}
-TimezoneInitialPage.propTypes = propTypes;
-TimezoneInitialPage.defaultProps = defaultProps;
TimezoneInitialPage.displayName = 'TimezoneInitialPage';
-export default compose(withLocalize, withCurrentUserPersonalDetails)(TimezoneInitialPage);
+export default withCurrentUserPersonalDetails(TimezoneInitialPage);
diff --git a/src/pages/settings/Profile/TimezoneSelectPage.js b/src/pages/settings/Profile/TimezoneSelectPage.tsx
similarity index 53%
rename from src/pages/settings/Profile/TimezoneSelectPage.js
rename to src/pages/settings/Profile/TimezoneSelectPage.tsx
index b6c8a5967abc..3aff5f820cf8 100644
--- a/src/pages/settings/Profile/TimezoneSelectPage.js
+++ b/src/pages/settings/Profile/TimezoneSelectPage.tsx
@@ -1,11 +1,11 @@
-import lodashGet from 'lodash/get';
import React, {useState} from 'react';
-import _ from 'underscore';
+import type {ValueOf} from 'type-fest';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
import SelectionList from '@components/SelectionList';
import RadioListItem from '@components/SelectionList/RadioListItem';
-import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
+import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
+import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
import useInitialValue from '@hooks/useInitialValue';
import useLocalize from '@hooks/useLocalize';
import Navigation from '@libs/Navigation/Navigation';
@@ -13,67 +13,45 @@ import * as PersonalDetails from '@userActions/PersonalDetails';
import CONST from '@src/CONST';
import ROUTES from '@src/ROUTES';
import TIMEZONES from '@src/TIMEZONES';
+import type {SelectedTimezone} from '@src/types/onyx/PersonalDetails';
-const propTypes = {
- ...withCurrentUserPersonalDetailsPropTypes,
-};
-
-const defaultProps = {
- ...withCurrentUserPersonalDetailsDefaultProps,
-};
+type TimezoneSelectPageProps = Pick;
/**
* We add the current time to the key to fix a bug where the list options don't update unless the key is updated.
- * @param {String} text
- * @return {string} key for list item
*/
-const getKey = (text) => `${text}-${new Date().getTime()}`;
+const getKey = (text: string): string => `${text}-${new Date().getTime()}`;
-/**
- * @param {Object} currentUserPersonalDetails
- * @return {Object} user's timezone data
- */
-const getUserTimezone = (currentUserPersonalDetails) => lodashGet(currentUserPersonalDetails, 'timezone', CONST.DEFAULT_TIME_ZONE);
+const getUserTimezone = (currentUserPersonalDetails: ValueOf) =>
+ currentUserPersonalDetails?.timezone ?? CONST.DEFAULT_TIME_ZONE;
-function TimezoneSelectPage(props) {
+function TimezoneSelectPage({currentUserPersonalDetails}: TimezoneSelectPageProps) {
const {translate} = useLocalize();
- const timezone = getUserTimezone(props.currentUserPersonalDetails);
+ const timezone = getUserTimezone(currentUserPersonalDetails);
const allTimezones = useInitialValue(() =>
- _.chain(TIMEZONES)
- .filter((tz) => !tz.startsWith('Etc/GMT'))
- .map((text) => ({
- text,
- keyForList: getKey(text),
- isSelected: text === timezone.selected,
- }))
- .value(),
+ TIMEZONES.filter((tz: string) => !tz.startsWith('Etc/GMT')).map((text: string) => ({
+ text,
+ keyForList: getKey(text),
+ isSelected: text === timezone.selected,
+ })),
);
const [timezoneInputText, setTimezoneInputText] = useState('');
const [timezoneOptions, setTimezoneOptions] = useState(allTimezones);
- /**
- * @param {Object} timezone
- * @param {String} timezone.text
- */
- const saveSelectedTimezone = ({text}) => {
- PersonalDetails.updateSelectedTimezone(text);
+ const saveSelectedTimezone = ({text}: {text: string}) => {
+ PersonalDetails.updateSelectedTimezone(text as SelectedTimezone);
};
- /**
- * @param {String} searchText
- */
- const filterShownTimezones = (searchText) => {
+ const filterShownTimezones = (searchText: string) => {
setTimezoneInputText(searchText);
- const searchWords = searchText.toLowerCase().match(/[a-z0-9]+/g) || [];
+ const searchWords = searchText.toLowerCase().match(/[a-z0-9]+/g) ?? [];
setTimezoneOptions(
- _.filter(allTimezones, (tz) =>
- _.every(
- searchWords,
- (word) =>
- tz.text
- .toLowerCase()
- .replace(/[^a-z0-9]/g, ' ')
- .indexOf(word) > -1,
+ allTimezones.filter((tz) =>
+ searchWords.every((word) =>
+ tz.text
+ .toLowerCase()
+ .replace(/[^a-z0-9]/g, ' ')
+ .includes(word),
),
),
);
@@ -95,7 +73,7 @@ function TimezoneSelectPage(props) {
onChangeText={filterShownTimezones}
onSelectRow={saveSelectedTimezone}
sections={[{data: timezoneOptions, indexOffset: 0, isDisabled: timezone.automatic}]}
- initiallyFocusedOptionKey={_.get(_.filter(timezoneOptions, (tz) => tz.text === timezone.selected)[0], 'keyForList')}
+ initiallyFocusedOptionKey={timezoneOptions.find((tz) => tz.text === timezone.selected)?.keyForList}
showScrollIndicator
shouldShowTooltips={false}
ListItem={RadioListItem}
@@ -104,8 +82,6 @@ function TimezoneSelectPage(props) {
);
}
-TimezoneSelectPage.propTypes = propTypes;
-TimezoneSelectPage.defaultProps = defaultProps;
TimezoneSelectPage.displayName = 'TimezoneSelectPage';
export default withCurrentUserPersonalDetails(TimezoneSelectPage);
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
index b4c1bc249c81..dfa769077374 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.tsx
@@ -131,6 +131,7 @@ function CodesStep({account, backTo}: CodesStepProps) {
)}
{
if (!account?.codesAreCopied) {
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx
index db64a805d088..588c21defee3 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/DisabledStep.tsx
@@ -25,6 +25,7 @@ function DisabledStep() {
TwoFactorAuthActions.quitAndNavigateBack()}
/>
diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
index 58e7d98d69de..cfd233d61cf1 100644
--- a/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
+++ b/src/pages/settings/Security/TwoFactorAuth/Steps/VerifyStep.tsx
@@ -121,6 +121,7 @@ function VerifyStep({account}: VerifyStepProps) {
{
diff --git a/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx b/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx
index 4edf637618ea..d5b1230fd216 100644
--- a/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx
+++ b/src/pages/settings/Wallet/ActivatePhysicalCardPage.tsx
@@ -150,6 +150,7 @@ function ActivatePhysicalCardPage({
isDisabled={isOffline}
isLoading={physicalCard?.isLoading}
medium={isExtraSmallScreenHeight}
+ large={!isExtraSmallScreenHeight}
style={[styles.w100, styles.p5, styles.mtAuto]}
onPress={submitAndNavigateToNextPage}
pressOnEnter
diff --git a/src/pages/settings/Wallet/ExpensifyCardPage.tsx b/src/pages/settings/Wallet/ExpensifyCardPage.tsx
index 097b2cf28ed0..732a21bc993c 100644
--- a/src/pages/settings/Wallet/ExpensifyCardPage.tsx
+++ b/src/pages/settings/Wallet/ExpensifyCardPage.tsx
@@ -230,6 +230,7 @@ function ExpensifyCardPage({
{physicalCard?.state === CONST.EXPENSIFY_CARD.STATE.NOT_ACTIVATED && (
Navigation.navigate(ROUTES.SETTINGS_WALLET_CARD_ACTIVATE.getRoute(domain))}
text={translate('activateCardPage.activatePhysicalCard')}
@@ -238,6 +239,7 @@ function ExpensifyCardPage({
{physicalCard?.state === CONST.EXPENSIFY_CARD.STATE.STATE_NOT_ISSUED && (
{
diff --git a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx
index 8111e8d39afa..d6a3e7b2d56b 100755
--- a/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx
+++ b/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.tsx
@@ -143,7 +143,7 @@ function BaseValidateCodeForm({account, credentials, session, autoComplete, isUs
setTwoFactorAuthCode(text);
}
if (key === 'recoveryCode') {
- setRecoveryCode(text);
+ setRecoveryCode(text.trim());
}
setFormError((prevError) => ({...prevError, [key]: undefined}));
@@ -290,7 +290,7 @@ function BaseValidateCodeForm({account, credentials, session, autoComplete, isUs
accessibilityLabel={translate('recoveryCodeForm.recoveryCode')}
value={recoveryCode}
onChangeText={(text) => onTextInput(text, 'recoveryCode')}
- maxLength={CONST.RECOVERY_CODE_LENGTH}
+ maxLength={CONST.FORM_CHARACTER_LIMIT}
label={translate('recoveryCodeForm.recoveryCode')}
errorText={formError?.recoveryCode ?? ''}
hasError={hasError}
@@ -380,6 +380,7 @@ function BaseValidateCodeForm({account, credentials, session, autoComplete, isUs
Navigation.navigate(ROUTES.SETTINGS_WORKSPACES)}
style={[styles.mh5, styles.mb5]}
diff --git a/src/pages/workspace/WorkspaceProfilePage.tsx b/src/pages/workspace/WorkspaceProfilePage.tsx
index 9fa5e0700091..2df6dd0489f9 100644
--- a/src/pages/workspace/WorkspaceProfilePage.tsx
+++ b/src/pages/workspace/WorkspaceProfilePage.tsx
@@ -194,6 +194,7 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi
text={translate('common.share')}
onPress={onPressShare}
medium
+ icon={Expensicons.QrCode}
/>
setIsDeleteModalOpen(true)}
medium
+ icon={Expensicons.Trashcan}
/>
)}
diff --git a/src/pages/workspace/card/WorkspaceCardVBANoECardView.tsx b/src/pages/workspace/card/WorkspaceCardVBANoECardView.tsx
index 02874a96ba76..db7a3f4b6368 100644
--- a/src/pages/workspace/card/WorkspaceCardVBANoECardView.tsx
+++ b/src/pages/workspace/card/WorkspaceCardVBANoECardView.tsx
@@ -44,7 +44,6 @@ function WorkspaceCardVBANoECardView({user}: WorkspaceCardVBANoECardViewProps) {
}}
icon={Expensicons.Mail}
style={[styles.mt4]}
- iconStyles={[styles.buttonCTAIcon]}
shouldShowRightIcon
large
success
diff --git a/src/pages/workspace/categories/CategoryForm.tsx b/src/pages/workspace/categories/CategoryForm.tsx
new file mode 100644
index 000000000000..aaf954f64468
--- /dev/null
+++ b/src/pages/workspace/categories/CategoryForm.tsx
@@ -0,0 +1,91 @@
+import React, {useCallback} from 'react';
+import {Keyboard} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
+import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
+import TextInput from '@components/TextInput';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as ErrorUtils from '@libs/ErrorUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ValidationUtils from '@libs/ValidationUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import INPUT_IDS from '@src/types/form/WorkspaceCategoryForm';
+import type {PolicyCategories} from '@src/types/onyx';
+
+type CategoryFormProps = {
+ /** All policy categories */
+ policyCategories: OnyxEntry;
+
+ /** The name of the category */
+ categoryName?: string;
+
+ /** Function to call when the form is submitted */
+ onSubmit: (values: FormOnyxValues) => void;
+};
+
+function CategoryForm({onSubmit, policyCategories, categoryName}: CategoryFormProps) {
+ const styles = useThemeStyles();
+ const {translate} = useLocalize();
+ const {inputCallbackRef} = useAutoFocusInput();
+
+ const validate = useCallback(
+ (values: FormOnyxValues) => {
+ const errors: FormInputErrors = {};
+ const newCategoryName = values.categoryName.trim();
+
+ if (!ValidationUtils.isRequiredFulfilled(newCategoryName)) {
+ errors.categoryName = 'workspace.categories.categoryRequiredError';
+ } else if (policyCategories?.[newCategoryName]) {
+ errors.categoryName = 'workspace.categories.existingCategoryError';
+ } else if (newCategoryName === CONST.INVALID_CATEGORY_NAME) {
+ errors.categoryName = 'workspace.categories.invalidCategoryName';
+ } else if ([...newCategoryName].length > CONST.CATEGORY_NAME_LIMIT) {
+ // Uses the spread syntax to count the number of Unicode code points instead of the number of UTF-16 code units.
+ ErrorUtils.addErrorMessage(errors, 'categoryName', ['common.error.characterLimitExceedCounter', {length: [...newCategoryName].length, limit: CONST.CATEGORY_NAME_LIMIT}]);
+ }
+
+ return errors;
+ },
+ [policyCategories],
+ );
+
+ const submit = useCallback(
+ (values: FormOnyxValues) => {
+ onSubmit(values);
+ Keyboard.dismiss();
+ Navigation.dismissModal();
+ },
+ [onSubmit],
+ );
+
+ return (
+
+
+ );
+}
+
+CategoryForm.displayName = 'CategoryForm';
+
+export default CategoryForm;
diff --git a/src/pages/workspace/categories/CategorySettingsPage.tsx b/src/pages/workspace/categories/CategorySettingsPage.tsx
index 16f128e5ea1f..8aad48fd94a7 100644
--- a/src/pages/workspace/categories/CategorySettingsPage.tsx
+++ b/src/pages/workspace/categories/CategorySettingsPage.tsx
@@ -13,12 +13,14 @@ import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import {setWorkspaceCategoryEnabled} from '@libs/actions/Policy';
import * as ErrorUtils from '@libs/ErrorUtils';
+import Navigation from '@libs/Navigation/Navigation';
import type {SettingsNavigatorParamList} from '@navigation/types';
import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
import * as Policy from '@userActions/Policy';
import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
import type SCREENS from '@src/SCREENS';
import type * as OnyxTypes from '@src/types/onyx';
@@ -43,6 +45,10 @@ function CategorySettingsPage({route, policyCategories}: CategorySettingsPagePro
setWorkspaceCategoryEnabled(route.params.policyID, {[policyCategory.name]: {name: policyCategory.name, enabled: value}});
};
+ const navigateToEditCategory = () => {
+ Navigation.navigate(ROUTES.WORKSPACE_CATEGORY_EDIT.getRoute(route.params.policyID, policyCategory.name));
+ };
+
return (
@@ -73,6 +79,7 @@ function CategorySettingsPage({route, policyCategories}: CategorySettingsPagePro
diff --git a/src/pages/workspace/categories/CreateCategoryPage.tsx b/src/pages/workspace/categories/CreateCategoryPage.tsx
index 8de0e3a07980..80370d2197fa 100644
--- a/src/pages/workspace/categories/CreateCategoryPage.tsx
+++ b/src/pages/workspace/categories/CreateCategoryPage.tsx
@@ -1,29 +1,21 @@
import type {StackScreenProps} from '@react-navigation/stack';
import React, {useCallback} from 'react';
-import {Keyboard} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import type {OnyxEntry} from 'react-native-onyx';
-import FormProvider from '@components/Form/FormProvider';
-import InputWrapper from '@components/Form/InputWrapper';
-import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
+import type {FormOnyxValues} from '@components/Form/types';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
-import TextInput from '@components/TextInput';
-import useAutoFocusInput from '@hooks/useAutoFocusInput';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
-import * as ErrorUtils from '@libs/ErrorUtils';
import Navigation from '@libs/Navigation/Navigation';
-import * as ValidationUtils from '@libs/ValidationUtils';
import type {SettingsNavigatorParamList} from '@navigation/types';
import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
import * as Policy from '@userActions/Policy';
-import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import type SCREENS from '@src/SCREENS';
-import INPUT_IDS from '@src/types/form/WorkspaceCategoryCreateForm';
import type {PolicyCategories} from '@src/types/onyx';
+import CategoryForm from './CategoryForm';
type WorkspaceCreateCategoryPageOnyxProps = {
/** All policy categories */
@@ -35,34 +27,10 @@ type CreateCategoryPageProps = WorkspaceCreateCategoryPageOnyxProps & StackScree
function CreateCategoryPage({route, policyCategories}: CreateCategoryPageProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
- const {inputCallbackRef} = useAutoFocusInput();
-
- const validate = useCallback(
- (values: FormOnyxValues) => {
- const errors: FormInputErrors = {};
- const categoryName = values.categoryName.trim();
-
- if (!ValidationUtils.isRequiredFulfilled(categoryName)) {
- errors.categoryName = 'workspace.categories.categoryRequiredError';
- } else if (policyCategories?.[categoryName]) {
- errors.categoryName = 'workspace.categories.existingCategoryError';
- } else if (categoryName === CONST.INVALID_CATEGORY_NAME) {
- errors.categoryName = 'workspace.categories.invalidCategoryName';
- } else if ([...categoryName].length > CONST.CATEGORY_NAME_LIMIT) {
- // Uses the spread syntax to count the number of Unicode code points instead of the number of UTF-16 code units.
- ErrorUtils.addErrorMessage(errors, 'categoryName', ['common.error.characterLimitExceedCounter', {length: [...categoryName].length, limit: CONST.CATEGORY_NAME_LIMIT}]);
- }
-
- return errors;
- },
- [policyCategories],
- );
const createCategory = useCallback(
- (values: FormOnyxValues) => {
+ (values: FormOnyxValues) => {
Policy.createPolicyCategory(route.params.policyID, values.categoryName.trim());
- Keyboard.dismiss();
- Navigation.goBack();
},
[route.params.policyID],
);
@@ -80,24 +48,10 @@ function CreateCategoryPage({route, policyCategories}: CreateCategoryPageProps)
title={translate('workspace.categories.addCategory')}
onBackButtonPress={Navigation.goBack}
/>
-
-
+ policyCategories={policyCategories}
+ />
diff --git a/src/pages/workspace/categories/EditCategoryPage.tsx b/src/pages/workspace/categories/EditCategoryPage.tsx
new file mode 100644
index 000000000000..35a8648f1a18
--- /dev/null
+++ b/src/pages/workspace/categories/EditCategoryPage.tsx
@@ -0,0 +1,68 @@
+import type {StackScreenProps} from '@react-navigation/stack';
+import React, {useCallback} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {FormOnyxValues} from '@components/Form/types';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import type {SettingsNavigatorParamList} from '@navigation/types';
+import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
+import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
+import * as Policy from '@userActions/Policy';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
+import type {PolicyCategories} from '@src/types/onyx';
+import CategoryForm from './CategoryForm';
+
+type WorkspaceEditCategoryPageOnyxProps = {
+ /** All policy categories */
+ policyCategories: OnyxEntry;
+};
+
+type EditCategoryPageProps = WorkspaceEditCategoryPageOnyxProps & StackScreenProps;
+
+function EditCategoryPage({route, policyCategories}: EditCategoryPageProps) {
+ const styles = useThemeStyles();
+ const {translate} = useLocalize();
+
+ const editCategory = useCallback(
+ (values: FormOnyxValues) => {
+ Policy.renamePolicyCategory(route.params.policyID, {oldName: route.params.categoryName, newName: values.categoryName});
+ },
+ [route.params.categoryName, route.params.policyID],
+ );
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+EditCategoryPage.displayName = 'EditCategoryPage';
+
+export default withOnyx({
+ policyCategories: {
+ key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${route?.params?.policyID}`,
+ },
+})(EditCategoryPage);
diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
index d22b822359f9..30a3ac257e4f 100644
--- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
+++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
@@ -236,14 +236,13 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat
onPress={navigateToCreateCategoryPage}
icon={Expensicons.Plus}
text={translate('workspace.categories.addCategory')}
- style={[styles.pr2, isSmallScreenWidth && styles.w50]}
+ style={[styles.mr3, isSmallScreenWidth && styles.w50]}
/>
)}
{
+ switch (true) {
+ case small:
+ return {width: hasText ? variables.iconSizeExtraSmall : variables.iconSizeSmall, height: hasText ? variables.iconSizeExtraSmall : variables?.iconSizeSmall};
+ case medium:
+ return {width: hasText ? variables.iconSizeSmall : variables.iconSizeNormal, height: hasText ? variables.iconSizeSmall : variables.iconSizeNormal};
+ case large:
+ return {width: hasText ? variables.iconSizeNormal : variables.iconSizeLarge, height: hasText ? variables.iconSizeNormal : variables.iconSizeLarge};
+ default: {
+ return {width, height};
+ }
+ }
+}
+
+function getButtonStyleWithIcon(
+ styles: ThemeStyles,
+ small: boolean,
+ medium: boolean,
+ large: boolean,
+ hasIcon?: boolean,
+ hasText?: boolean,
+ shouldShowRightIcon?: boolean,
+): ViewStyle | undefined {
+ const useDefaultButtonStyles = Boolean(hasIcon && shouldShowRightIcon) || Boolean(!hasIcon && !shouldShowRightIcon);
+ switch (true) {
+ case small: {
+ const verticalStyle = hasIcon ? styles.pl2 : styles.pr2;
+ return useDefaultButtonStyles ? styles.buttonSmall : {...styles.buttonSmall, ...(hasText ? verticalStyle : styles.ph0)};
+ }
+ case medium: {
+ const verticalStyle = hasIcon ? styles.pl3 : styles.pr3;
+ return useDefaultButtonStyles ? styles.buttonMedium : {...styles.buttonMedium, ...(hasText ? verticalStyle : styles.ph0)};
+ }
+ case large: {
+ const verticalStyle = hasIcon ? styles.pl4 : styles.pr4;
+ return useDefaultButtonStyles ? styles.buttonLarge : {...styles.buttonLarge, ...(hasText ? verticalStyle : styles.ph0)};
+ }
+ default: {
+ if (hasIcon && !hasText) {
+ return {...styles.buttonMedium, ...styles.ph0};
+ }
+
+ return undefined;
+ }
+ }
+}
+
/**
* Combine margin/padding with safe area inset
*
@@ -1096,6 +1144,8 @@ const staticStyleUtils = {
getOpacityStyle,
getMultiGestureCanvasContainerStyle,
getSignInBgStyles,
+ getIconWidthAndHeightStyle,
+ getButtonStyleWithIcon,
};
const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
diff --git a/src/styles/utils/sizing.ts b/src/styles/utils/sizing.ts
index b461fc0f5d09..1e9a6662d102 100644
--- a/src/styles/utils/sizing.ts
+++ b/src/styles/utils/sizing.ts
@@ -14,6 +14,10 @@ export default {
height: 272,
},
+ h13: {
+ height: 52,
+ },
+
w15: {
width: '15%',
},
diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts
index 56000a851e7b..740bf053c2d0 100644
--- a/src/styles/utils/spacing.ts
+++ b/src/styles/utils/spacing.ts
@@ -485,6 +485,10 @@ export default {
paddingRight: 32,
},
+ pr10: {
+ paddingRight: 40,
+ },
+
pr15: {
paddingRight: 60,
},
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 61c16a8c2fd7..0ebc4e60991f 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -222,4 +222,5 @@ export default {
mushroomTopHatWidth: 138,
mushroomTopHatHeight: 128,
+ bankButtonMargin: 23,
} as const;
diff --git a/src/types/form/SettingsStatusSetForm.ts b/src/types/form/SettingsStatusSetForm.ts
index 9aeec26c4887..53e42ba01cfa 100644
--- a/src/types/form/SettingsStatusSetForm.ts
+++ b/src/types/form/SettingsStatusSetForm.ts
@@ -1,6 +1,23 @@
+import type {ValueOf} from 'type-fest';
import type Form from './Form';
-type SettingsStatusSetForm = Form;
+const INPUT_IDS = {
+ EMOJI_CODE: 'emojiCode',
+ STATUS_TEXT: 'statusText',
+ clearAfter: 'clearAfter',
+} as const;
+
+type InputID = ValueOf;
+
+type SettingsStatusSetForm = Form<
+ InputID,
+ {
+ [INPUT_IDS.EMOJI_CODE]: string;
+ [INPUT_IDS.STATUS_TEXT]: string;
+ [INPUT_IDS.clearAfter]: string;
+ }
+>;
// eslint-disable-next-line import/prefer-default-export
export type {SettingsStatusSetForm};
+export default INPUT_IDS;
diff --git a/src/types/form/WorkspaceCategoryCreateForm.ts b/src/types/form/WorkspaceCategoryForm.ts
similarity index 77%
rename from src/types/form/WorkspaceCategoryCreateForm.ts
rename to src/types/form/WorkspaceCategoryForm.ts
index 051bf705fbf8..4f5f9282373c 100644
--- a/src/types/form/WorkspaceCategoryCreateForm.ts
+++ b/src/types/form/WorkspaceCategoryForm.ts
@@ -7,12 +7,12 @@ const INPUT_IDS = {
type InputID = ValueOf;
-type WorkspaceCategoryCreateForm = Form<
+type WorkspaceCategoryForm = Form<
InputID,
{
[INPUT_IDS.CATEGORY_NAME]: string;
}
>;
-export type {WorkspaceCategoryCreateForm};
+export type {WorkspaceCategoryForm};
export default INPUT_IDS;
diff --git a/src/types/form/index.ts b/src/types/form/index.ts
index 5a574de3db54..c4c0460b4f44 100644
--- a/src/types/form/index.ts
+++ b/src/types/form/index.ts
@@ -34,7 +34,7 @@ export type {SettingsStatusSetForm} from './SettingsStatusSetForm';
export type {WaypointForm} from './WaypointForm';
export type {WorkspaceInviteMessageForm} from './WorkspaceInviteMessageForm';
export type {WorkspaceRateAndUnitForm} from './WorkspaceRateAndUnitForm';
-export type {WorkspaceCategoryCreateForm} from './WorkspaceCategoryCreateForm';
+export type {WorkspaceCategoryForm} from './WorkspaceCategoryForm';
export type {WorkspaceSettingsForm} from './WorkspaceSettingsForm';
export type {ReportPhysicalCardForm} from './ReportPhysicalCardForm';
export type {WorkspaceDescriptionForm} from './WorkspaceDescriptionForm';
diff --git a/src/types/onyx/CustomStatusDraft.ts b/src/types/onyx/CustomStatusDraft.ts
index b2801a1d89e0..73c8fa4baa1a 100644
--- a/src/types/onyx/CustomStatusDraft.ts
+++ b/src/types/onyx/CustomStatusDraft.ts
@@ -1,9 +1,9 @@
type CustomStatusDraft = {
/** The emoji code of the draft status */
- emojiCode: string;
+ emojiCode?: string;
/** The text of the draft status */
- text: string;
+ text?: string;
/** ISO 8601 format string, which represents the time when the status should be cleared */
clearAfter: string;
diff --git a/src/types/onyx/PolicyCategory.ts b/src/types/onyx/PolicyCategory.ts
index 5cef49afc9d4..0fd498632dbc 100644
--- a/src/types/onyx/PolicyCategory.ts
+++ b/src/types/onyx/PolicyCategory.ts
@@ -4,6 +4,9 @@ type PolicyCategory = OnyxCommon.OnyxValueWithOfflineFeedback<{
/** Name of a category */
name: string;
+ /** Unencoded name of a category */
+ unencodedName: string;
+
/** Flag that determines if a category is active and able to be selected */
enabled: boolean;
diff --git a/src/types/onyx/PreferredTheme.ts b/src/types/onyx/PreferredTheme.ts
new file mode 100644
index 000000000000..408748ad06ea
--- /dev/null
+++ b/src/types/onyx/PreferredTheme.ts
@@ -0,0 +1,7 @@
+import type {OnyxEntry} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
+import type CONST from '@src/CONST';
+
+type PreferredTheme = OnyxEntry>;
+
+export default PreferredTheme;
diff --git a/src/types/onyx/PriorityMode.ts b/src/types/onyx/PriorityMode.ts
new file mode 100644
index 000000000000..224c86867f35
--- /dev/null
+++ b/src/types/onyx/PriorityMode.ts
@@ -0,0 +1,7 @@
+import type {OnyxEntry} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
+import type CONST from '@src/CONST';
+
+type PriorityMode = OnyxEntry>;
+
+export default PriorityMode;
diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts
index d12b0a22bba2..e3118538258e 100644
--- a/src/types/onyx/index.ts
+++ b/src/types/onyx/index.ts
@@ -40,6 +40,8 @@ import type {PolicyMembers} from './PolicyMember';
import type PolicyMember from './PolicyMember';
import type {PolicyReportField, PolicyReportFields} from './PolicyReportField';
import type {PolicyTag, PolicyTagList, PolicyTags} from './PolicyTag';
+import type PreferredTheme from './PreferredTheme';
+import type PriorityMode from './PriorityMode';
import type PrivatePersonalDetails from './PrivatePersonalDetails';
import type RecentlyUsedCategories from './RecentlyUsedCategories';
import type RecentlyUsedReportFields from './RecentlyUsedReportFields';
@@ -114,6 +116,8 @@ export type {
PolicyTag,
PolicyTags,
PolicyTagList,
+ PreferredTheme,
+ PriorityMode,
PrivatePersonalDetails,
RecentWaypoint,
RecentlyUsedCategories,
diff --git a/tests/unit/postTestBuildComment.js b/tests/unit/postTestBuildComment.ts
similarity index 83%
rename from tests/unit/postTestBuildComment.js
rename to tests/unit/postTestBuildComment.ts
index ff77ca190c08..5d4148134e19 100644
--- a/tests/unit/postTestBuildComment.js
+++ b/tests/unit/postTestBuildComment.ts
@@ -1,10 +1,11 @@
import * as core from '@actions/core';
import {when} from 'jest-when';
+import asMutable from '@src/types/utils/asMutable';
import ghAction from '../../.github/actions/javascript/postTestBuildComment/postTestBuildComment';
import GithubUtils from '../../.github/libs/GithubUtils';
const mockGetInput = jest.fn();
-const mockCreateComment = jest.fn();
+const createCommentMock = jest.spyOn(GithubUtils, 'createComment');
const mockListComments = jest.fn();
const mockGraphql = jest.fn();
jest.spyOn(GithubUtils, 'octokit', 'get').mockReturnValue({
@@ -12,7 +13,11 @@ jest.spyOn(GithubUtils, 'octokit', 'get').mockReturnValue({
listComments: mockListComments,
},
});
-jest.spyOn(GithubUtils, 'paginate', 'get').mockReturnValue((endpoint, params) => endpoint(params).then(({data}) => data));
+
+jest.spyOn(GithubUtils, 'paginate', 'get').mockReturnValue((endpoint: (params: Record) => Promise<{data: TData}>, params: Record) =>
+ endpoint(params).then((response) => response.data),
+);
+
jest.spyOn(GithubUtils, 'graphql', 'get').mockReturnValue(mockGraphql);
jest.mock('@actions/github', () => ({
@@ -52,12 +57,11 @@ const message = `:test_tube::test_tube: Use the links below to test this adhoc b
describe('Post test build comments action tests', () => {
beforeAll(() => {
// Mock core module
- core.getInput = mockGetInput;
- GithubUtils.createComment = mockCreateComment;
+ asMutable(core).getInput = mockGetInput;
});
test('Test GH action', async () => {
- when(core.getInput).calledWith('PR_NUMBER', {required: true}).mockReturnValue(12);
+ when(core.getInput).calledWith('PR_NUMBER', {required: true}).mockReturnValue('12');
when(core.getInput).calledWith('ANDROID', {required: true}).mockReturnValue('success');
when(core.getInput).calledWith('IOS', {required: true}).mockReturnValue('success');
when(core.getInput).calledWith('WEB', {required: true}).mockReturnValue('success');
@@ -66,11 +70,12 @@ describe('Post test build comments action tests', () => {
when(core.getInput).calledWith('IOS_LINK').mockReturnValue('https://expensify.app/IOS_LINK');
when(core.getInput).calledWith('WEB_LINK').mockReturnValue('https://expensify.app/WEB_LINK');
when(core.getInput).calledWith('DESKTOP_LINK').mockReturnValue('https://expensify.app/DESKTOP_LINK');
- GithubUtils.createComment.mockResolvedValue(true);
+ createCommentMock.mockResolvedValue(true);
mockListComments.mockResolvedValue({
data: [
{
body: ':test_tube::test_tube: Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing!',
+ // eslint-disable-next-line @typescript-eslint/naming-convention
node_id: 'IC_abcd',
},
],
@@ -86,7 +91,7 @@ describe('Post test build comments action tests', () => {
}
}
`);
- expect(GithubUtils.createComment).toBeCalledTimes(1);
- expect(GithubUtils.createComment).toBeCalledWith('App', 12, message);
+ expect(createCommentMock).toBeCalledTimes(1);
+ expect(createCommentMock).toBeCalledWith('App', '12', message);
});
});
diff --git a/tests/utils/LHNTestUtils.tsx b/tests/utils/LHNTestUtils.tsx
index 85c2d67f80bc..3aa428cc3eef 100644
--- a/tests/utils/LHNTestUtils.tsx
+++ b/tests/utils/LHNTestUtils.tsx
@@ -282,7 +282,6 @@ function MockedSidebarLinks({currentReportID = ''}: MockedSidebarLinksProps) {
return (
{}}
insets={{
top: 0,
@@ -290,7 +289,7 @@ function MockedSidebarLinks({currentReportID = ''}: MockedSidebarLinksProps) {
right: 0,
bottom: 0,
}}
- isSmallScreenWidth={false}
+ // @ts-expect-error - normally this comes from withCurrentReportID hoc, but here we are just mocking this
currentReportID={currentReportID}
/>