diff --git a/android/app/build.gradle b/android/app/build.gradle index 62e30858e73c..0b2271d16716 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -98,8 +98,8 @@ android { minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion multiDexEnabled rootProject.ext.multiDexEnabled - versionCode 1001045602 - versionName "1.4.56-2" + versionCode 1001045605 + versionName "1.4.56-5" } flavorDimensions "default" diff --git a/docs/articles/expensify-classic/expenses/Distance-Tracking.md b/docs/articles/expensify-classic/expenses/Distance-Tracking.md deleted file mode 100644 index c0d8956f71ac..000000000000 --- a/docs/articles/expensify-classic/expenses/Distance-Tracking.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Distance Tracking in Expensify -description: Learn how distance tracking works in Expensify! ---- - -# Overview - -Expensify provides a convenient feature for tracking your mileage-related expenses. You'll find all the essential information to begin logging your trips below. - -# How to Use Distance Tracking -## Mobile App - -First, you’ll want to click the **+** in the top right corner. - -If you select **Manually Create**, you’ll be prompted to enter your mileage, select a rate, and code the expense before clicking **Save**. - - ![Click manually create or odometer to create a distance request.](https://help.expensify.com/assets/images/ExpensifyHelp_CreateExpense_Mobile.png){:width="100%"} - -If you select **Manually Create**: - - Enter your mileage. - - Select a rate. - - Code the expense. - - Click **Save**. - -![Enter your mileage, rate, code the expense, and click save.](https://help.expensify.com/assets/images/ExpensifyHelp_ManualDistance_Mobile.png){:width="100%"} - -If you select **Odometer**: - - Enter your vehicle’s mileage reading before and after your trip. - - Select your rate. - - Code the expense. - - Click **Save**. - -![Etner your mileage readings, your rate, code the expense, and click save.](https://help.expensify.com/assets/images/ExpensifyHelp_Odometer_Mobile.png){:width="100%"} - -The **Start GPS** option also exists on the mobile app. However, we’ve learned that most customers prefer to track their mileage after their trips (thus not needing to hit that start button!) - -We’ve temporarily paused the development of GPS mileage tracking in the mobile app, and we recommend you use one of the above options instead! - - -## Web - -Navigate to the **Expenses** page, click **New Expense**, and review the two **Distance** options. - -![Select manually create or create from map to create a new distance request.](https://help.expensify.com/assets/images/ExpensifyHelp_CreateExpense.png){:width="100%"} - -If you select **Manually Create**: - - Enter the number of miles for your trip. - - Mileage rate is automatically selected based on your history, or manually select it if it's your first time. - - Complete any other applicable coding fields. - - Click **Save**. - -![Enter the number of miles, select your rate, code the expense, and click save.](https://help.expensify.com/assets/images/ExpensifyHelp_ManualDistance.png){:width="100%"} - -For **Create from Map** expenses: - - Add your start and end location, and the distance will be calculated. - - You can also click **Add Destination** for multiple stops. - - Leave **Create Receipt** selected if you want a map receipt generated. - - Click **Save**. - -![Enter your start and end locations, and click save.](https://help.expensify.com/assets/images/ExpensifyHelp_ManualDistanceMap.png){:width="100%"} - -Once you click **Save**, review the details from your map selection. - - Select your rate. - - Enter any other applicable coding. - - Click **Save**. - -![Select your rate, code the expense, and click save.](https://help.expensify.com/assets/images/ExpensifyHelp_ManualDistanceConfirm.png){:width="100%"} - -# Mileage Tracking FAQs -## **How can I change the rate of my mileage expenses?** -You can change the rate by going to Settings > Workspaces > [Your Workspace] > Expenses > Distance > Add a Mileage Rate. -If you submit mileage expenses on a group workspace, only workspace admins can do this. - -## **Do you plan to add the "Create from Map" option to the mobile app or "Odometer" option to web?** -Not now, but if that changes, you'll be the first to know! - -## **Will you restart maintenance on the mobile app's GPS option anytime soon?** -Not now, but if that changes, you'll be the first to know! - -## **Does Expensify automatically update IRS Mileage rates?** - We never automatically update mileage rates in Expensify because different companies want the new rates to become effective on different dates. diff --git a/docs/articles/expensify-classic/expenses/Track-mileage-expenses.md b/docs/articles/expensify-classic/expenses/Track-mileage-expenses.md new file mode 100644 index 000000000000..e8b9ab0eac75 --- /dev/null +++ b/docs/articles/expensify-classic/expenses/Track-mileage-expenses.md @@ -0,0 +1,66 @@ +--- +title: Track mileage expenses +description: Add mileage-related expenses +--- + +
+ +You can track your mileage-related expenses by logging your trips in Expensify. You have a couple of different options for logging distance: + +- Web app: + - **Manually create**: Manually enter the number of miles for the trip + - **Create from map**: Automatically determine the trip distance based on the start and end location. +- Mobile app: + - **Manually create**: Manually enter the miles for the trip and your mileage rate + - **Odometer**: Enter your odometer reading before and after the trip + - **Start GPS**: Currently under development and unavailable for use. + +{% include info.html %} +When adding a distance expense, the rates available are determined by the rates set in your workspace rate settings. To update these rates or add a new rate, you must be a Workspace Admin. +{% include end-info.html %} + +{% include selector.html values="desktop, mobile" %} + +{% include option.html value="desktop" %} + +1. Click the **Expenses** tab. +2. Click **New Expense**. +3. Select the expense type. + - **Manually create**: + - Enter the number of miles for the trip. + - Select your rate. + - If desired, select the category, add a description, or select a report to add the expense to. + - Click **Save**. + - **Create from map**: + - Add your start location as point A. + - Add your end location as point B. + - If applicable, click **Add Destination** to add additional stops. + - To generate a map receipt, leave the Create Receipt checkbox selected. + - Click **Save**. + - Select your rate. + - If desired, select the category, add a description, or select a report to add the expense to. + - Click **Save**. + +{% include end-option.html %} + +{% include option.html value="mobile" %} + +1. Click the + icon in the top right corner. +2. Under the Distance section, select the expense type. + - **Manually create**: + - Enter your mileage. + - Select your rate. + - If desired, click **More Options** to select the category, add a description, or select a report to add the expense to. + - Click **Save**. + - **Odometer**: + - Enter your vehicle’s odometer reading before the trip. + - Enter your vehicle’s odometer reading after the trip. + - Select your rate. + - If desired, click **More Options** to select the category, add a description, or select a report to add the expense to. + - Click **Save**. +{% include end-option.html %} + +{% include end-selector.html %} + +
+ diff --git a/docs/articles/expensify-classic/workspaces/Change-member-workspace-roles.md b/docs/articles/expensify-classic/workspaces/Change-member-workspace-roles.md new file mode 100644 index 000000000000..29fbc8b46323 --- /dev/null +++ b/docs/articles/expensify-classic/workspaces/Change-member-workspace-roles.md @@ -0,0 +1,26 @@ +--- +title: Change member workspace roles +description: Update a member's role for a workspace +--- +
+ +To change the roles and permissions for members of your workspace, + +1. Hover over Settings, then click **Workspaces**. +2. Click the **Group** tab on the left. +3. Click the desired workspace name. +4. Click the **Members** tab on the left. +5. Click the Settings icon next to the desired member. +6. Select a new role for the member. + +| | Employee | Auditor | Workspace Admin | +|---------------------------|----------------------------------|---------|-----------------| +| Submit reports | Yes | Yes | Yes | +| Comment on reports | Yes | Yes | Yes | +| Approve workspace reports | Only reports submitted to them | Yes | Yes | +| Edit workspace settings | No | No | Yes | + +7. If your workspace uses Advanced Approvals, select an “Approves to.” This determines who the member’s reports must be approved by, if applicable. If “no one” is selected, then any one with the Auditor or Workspace Admin role can approve the member’s reports. +8. Click **Save**. + +
diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist index a962c69f0bc6..37741d484d63 100644 --- a/ios/NewExpensify/Info.plist +++ b/ios/NewExpensify/Info.plist @@ -40,7 +40,7 @@ CFBundleVersion - 1.4.56.2 + 1.4.56.5 ITSAppUsesNonExemptEncryption LSApplicationQueriesSchemes diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist index 9f20eb574abc..e228808076d0 100644 --- a/ios/NewExpensifyTests/Info.plist +++ b/ios/NewExpensifyTests/Info.plist @@ -19,6 +19,6 @@ CFBundleSignature ???? CFBundleVersion - 1.4.56.2 + 1.4.56.5 diff --git a/ios/NotificationServiceExtension/Info.plist b/ios/NotificationServiceExtension/Info.plist index 2319ff879a03..11f83011d47a 100644 --- a/ios/NotificationServiceExtension/Info.plist +++ b/ios/NotificationServiceExtension/Info.plist @@ -13,7 +13,7 @@ CFBundleShortVersionString 1.4.56 CFBundleVersion - 1.4.56.2 + 1.4.56.5 NSExtension NSExtensionPointIdentifier diff --git a/metro.config.js b/metro.config.js index 2422d29aaacf..68ed72d52ba0 100644 --- a/metro.config.js +++ b/metro.config.js @@ -7,7 +7,7 @@ require('dotenv').config(); const defaultConfig = getDefaultConfig(__dirname); const isE2ETesting = process.env.E2E_TESTING === 'true'; -const e2eSourceExts = ['e2e.js', 'e2e.ts']; +const e2eSourceExts = ['e2e.js', 'e2e.ts', 'e2e.tsx']; /** * Metro configuration diff --git a/package-lock.json b/package-lock.json index 22c26e83b2e6..60823bc5091d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "new.expensify", - "version": "1.4.56-2", + "version": "1.4.56-5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "new.expensify", - "version": "1.4.56-2", + "version": "1.4.56-5", "hasInstallScript": true, "license": "MIT", "dependencies": { @@ -73,6 +73,7 @@ "react-content-loader": "^7.0.0", "react-dom": "18.1.0", "react-error-boundary": "^4.0.11", + "react-fast-pdf": "^1.0.6", "react-map-gl": "^7.1.3", "react-native": "0.73.2", "react-native-android-location-enabler": "^2.0.1", @@ -25301,7 +25302,6 @@ }, "node_modules/dequal": { "version": "2.0.3", - "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -39048,6 +39048,74 @@ "react": ">=16.13.1" } }, + "node_modules/react-fast-pdf": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/react-fast-pdf/-/react-fast-pdf-1.0.6.tgz", + "integrity": "sha512-CdAnBSZaLCGLSEuiqWLzzXhV9Wvdf1VRixaXCrb3NFrXyeltahF7PY+u7eU6ynrWZGmNI6g0cMLPv0DQhJEeew==", + "dependencies": { + "react-pdf": "^7.7.0", + "react-window": "^1.8.10" + }, + "engines": { + "node": "20.10.0", + "npm": "10.2.3" + }, + "peerDependencies": { + "lodash": "4.x", + "prop-types": "15.x", + "react": "18.x", + "react-dom": "18.x" + } + }, + "node_modules/react-fast-pdf/node_modules/pdfjs-dist": { + "version": "3.11.174", + "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.11.174.tgz", + "integrity": "sha512-TdTZPf1trZ8/UFu5Cx/GXB7GZM30LT+wWUNfsi6Bq8ePLnb+woNKtDymI2mxZYBpMbonNFqKmiz684DIfnd8dA==", + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "canvas": "^2.11.2", + "path2d-polyfill": "^2.0.1" + } + }, + "node_modules/react-fast-pdf/node_modules/react-pdf": { + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-7.7.1.tgz", + "integrity": "sha512-cbbf/PuRtGcPPw+HLhMI1f6NSka8OJgg+j/yPWTe95Owf0fK6gmVY7OXpTxMeh92O3T3K3EzfE0ML0eXPGwR5g==", + "dependencies": { + "clsx": "^2.0.0", + "dequal": "^2.0.3", + "make-cancellable-promise": "^1.3.1", + "make-event-props": "^1.6.0", + "merge-refs": "^1.2.1", + "pdfjs-dist": "3.11.174", + "prop-types": "^15.6.2", + "tiny-invariant": "^1.0.0", + "warning": "^4.0.0" + }, + "funding": { + "url": "https://github.com/wojtekmaj/react-pdf?sponsor=1" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-fast-pdf/node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/react-freeze": { "version": "1.0.3", "license": "MIT", @@ -40524,8 +40592,9 @@ } }, "node_modules/react-window": { - "version": "1.8.9", - "license": "MIT", + "version": "1.8.10", + "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz", + "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==", "dependencies": { "@babel/runtime": "^7.0.0", "memoize-one": ">=3.1.1 <6" diff --git a/package.json b/package.json index f3d062313bf6..8395f2253591 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "new.expensify", - "version": "1.4.56-2", + "version": "1.4.56-5", "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.", @@ -124,6 +124,7 @@ "react-content-loader": "^7.0.0", "react-dom": "18.1.0", "react-error-boundary": "^4.0.11", + "react-fast-pdf": "^1.0.6", "react-map-gl": "^7.1.3", "react-native": "0.73.2", "react-native-android-location-enabler": "^2.0.1", diff --git a/scripts/build-desktop.sh b/scripts/build-desktop.sh index 43ed481e2dc0..791f59d73330 100755 --- a/scripts/build-desktop.sh +++ b/scripts/build-desktop.sh @@ -13,8 +13,18 @@ else ENV_FILE=".env" fi +if [[ -n "$GCP_GEOLOCATION_API_KEY" ]]; then + if grep -qE "^GCP_GEOLOCATION_API_KEY=" "$ENV_FILE"; then + # Replace the value for the existing key + sed -i "s|^GCP_GEOLOCATION_API_KEY=.*$|GCP_GEOLOCATION_API_KEY=$GCP_GEOLOCATION_API_KEY|g" "$ENV_FILE" + else + # Add the key-value pair to the config file + echo "GCP_GEOLOCATION_API_KEY=$GCP_GEOLOCATION_API_KEY" >> "$ENV_FILE" + fi +fi + SCRIPTS_DIR=$(dirname "${BASH_SOURCE[0]}") -source "$SCRIPTS_DIR/shellUtils.sh"; +source "$SCRIPTS_DIR/shellUtils.sh" title "Bundling Desktop js Bundle Using Webpack" info " • ELECTRON_ENV: $ELECTRON_ENV" diff --git a/src/CONST.ts b/src/CONST.ts index 12c254736cdb..3109b9ea90ca 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -1851,13 +1851,6 @@ const CONST = { MAX_INT_FOR_RANDOM_7_DIGIT_VALUE: 10000000, IOS_KEYBOARD_SPACE_OFFSET: -30, - PDF_PASSWORD_FORM: { - // Constants for password-related error responses received from react-pdf. - REACT_PDF_PASSWORD_RESPONSES: { - NEED_PASSWORD: 1, - INCORRECT_PASSWORD: 2, - }, - }, API_REQUEST_TYPE: { READ: 'read', WRITE: 'write', @@ -4150,6 +4143,8 @@ const CONST = { }, }, }, + + MAX_TAX_RATE_DECIMAL_PLACES: 4, } as const; type Country = keyof typeof CONST.ALL_COUNTRIES; diff --git a/src/ROUTES.ts b/src/ROUTES.ts index c216d5ac288c..6302e0ee4683 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -179,7 +179,7 @@ const ROUTES = { REPORT: 'r', REPORT_WITH_ID: { route: 'r/:reportID?/:reportActionID?', - getRoute: (reportID: string) => `r/${reportID}` as const, + getRoute: (reportID: string, reportActionID?: string) => (reportActionID ? (`r/${reportID}/${reportActionID}` as const) : (`r/${reportID}` as const)), }, REPORT_AVATAR: { route: 'r/:reportID/avatar', diff --git a/src/components/AddPaymentMethodMenu.js b/src/components/AddPaymentMethodMenu.tsx similarity index 63% rename from src/components/AddPaymentMethodMenu.js rename to src/components/AddPaymentMethodMenu.tsx index 803b7f2cdabe..ac9657694500 100644 --- a/src/components/AddPaymentMethodMenu.js +++ b/src/components/AddPaymentMethodMenu.tsx @@ -1,78 +1,75 @@ -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; +import type {RefObject} from 'react'; import React from 'react'; +import type {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 * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; -import iouReportPropTypes from '@pages/iouReportPropTypes'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import type {AnchorPosition} from '@src/styles'; +import type {Report, Session} from '@src/types/onyx'; +import type AnchorAlignment from '@src/types/utils/AnchorAlignment'; +import type {EmptyObject} from '@src/types/utils/EmptyObject'; import * as Expensicons from './Icon/Expensicons'; +import type {PaymentMethod} from './KYCWall/types'; import PopoverMenu from './PopoverMenu'; -import refPropTypes from './refPropTypes'; -const propTypes = { +type AddPaymentMethodMenuOnyxProps = { + /** Session info for the currently logged-in user. */ + session: OnyxEntry; +}; + +type AddPaymentMethodMenuProps = AddPaymentMethodMenuOnyxProps & { /** Should the component be visible? */ - isVisible: PropTypes.bool.isRequired, + isVisible: boolean; /** Callback to execute when the component closes. */ - onClose: PropTypes.func.isRequired, + onClose: () => void; /** Callback to execute when the payment method is selected. */ - onItemSelected: PropTypes.func.isRequired, + onItemSelected: (paymentMethod: PaymentMethod) => void; /** The IOU/Expense report we are paying */ - iouReport: iouReportPropTypes, + iouReport?: OnyxEntry | EmptyObject; /** Anchor position for the AddPaymentMenu. */ - anchorPosition: PropTypes.shape({ - horizontal: PropTypes.number, - vertical: PropTypes.number, - }), + anchorPosition: AnchorPosition; /** Where the popover should be positioned relative to the anchor points. */ - anchorAlignment: PropTypes.shape({ - horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)), - vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)), - }), + anchorAlignment?: AnchorAlignment; /** Popover anchor ref */ - anchorRef: refPropTypes, - - /** Session info for the currently logged in user. */ - session: PropTypes.shape({ - /** Currently logged in user accountID */ - accountID: PropTypes.number, - }), + anchorRef: RefObject; /** Whether the personal bank account option should be shown */ - shouldShowPersonalBankAccountOption: PropTypes.bool, + shouldShowPersonalBankAccountOption?: boolean; }; -const defaultProps = { - iouReport: {}, - anchorPosition: {}, - anchorAlignment: { +function AddPaymentMethodMenu({ + isVisible, + onClose, + anchorPosition, + anchorAlignment = { horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM, }, - anchorRef: () => {}, - session: {}, - shouldShowPersonalBankAccountOption: false, -}; - -function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignment, anchorRef, iouReport, onItemSelected, session, shouldShowPersonalBankAccountOption}) { + anchorRef, + iouReport, + onItemSelected, + session, + shouldShowPersonalBankAccountOption = false, +}: AddPaymentMethodMenuProps) { const {translate} = useLocalize(); // Users can choose to pay with business bank account in case of Expense reports or in case of P2P IOU report // which then starts a bottom up flow and creates a Collect workspace where the payer is an admin and payee is an employee. + const isIOUReport = ReportUtils.isIOUReport(iouReport ?? {}); const canUseBusinessBankAccount = - ReportUtils.isExpenseReport(iouReport) || - (ReportUtils.isIOUReport(iouReport) && !ReportActionsUtils.hasRequestFromCurrentAccount(lodashGet(iouReport, 'reportID', 0), lodashGet(session, 'accountID', 0))); + ReportUtils.isExpenseReport(iouReport ?? {}) || (isIOUReport && !ReportActionsUtils.hasRequestFromCurrentAccount(iouReport?.reportID ?? '', session?.accountID ?? 0)); - const canUsePersonalBankAccount = shouldShowPersonalBankAccountOption || ReportUtils.isIOUReport(iouReport); + const canUsePersonalBankAccount = shouldShowPersonalBankAccountOption || isIOUReport; return ( ({ session: { key: ONYXKEYS.SESSION, }, diff --git a/src/components/AmountForm.tsx b/src/components/AmountForm.tsx index 48035dd884bd..e947c74f7c60 100644 --- a/src/components/AmountForm.tsx +++ b/src/components/AmountForm.tsx @@ -37,6 +37,9 @@ type AmountFormProps = { /** Whether the currency symbol is pressable */ isCurrencyPressable?: boolean; + + /** Custom max amount length. It defaults to CONST.IOU.AMOUNT_MAX_LENGTH */ + amountMaxLength?: number; } & Pick & Pick; @@ -53,7 +56,7 @@ const NUM_PAD_CONTAINER_VIEW_ID = 'numPadContainerView'; const NUM_PAD_VIEW_ID = 'numPadView'; function AmountForm( - {value: amount, currency = CONST.CURRENCY.USD, extraDecimals = 0, errorText, onInputChange, onCurrencyButtonPress, isCurrencyPressable = true, ...rest}: AmountFormProps, + {value: amount, currency = CONST.CURRENCY.USD, extraDecimals = 0, amountMaxLength, errorText, onInputChange, onCurrencyButtonPress, isCurrencyPressable = true, ...rest}: AmountFormProps, forwardedRef: ForwardedRef, ) { const styles = useThemeStyles(); @@ -101,7 +104,7 @@ function AmountForm( const newAmountWithoutSpaces = MoneyRequestUtils.stripSpacesFromAmount(newAmount); // Use a shallow copy of selection to trigger setSelection // More info: https://github.com/Expensify/App/issues/16385 - if (!MoneyRequestUtils.validateAmount(newAmountWithoutSpaces, decimals)) { + if (!MoneyRequestUtils.validateAmount(newAmountWithoutSpaces, decimals, amountMaxLength)) { setSelection((prevSelection) => ({...prevSelection})); return; } @@ -111,13 +114,13 @@ function AmountForm( setSelection((prevSelection) => getNewSelection(prevSelection, isForwardDelete ? strippedAmount.length : currentAmount.length, strippedAmount.length)); onInputChange?.(strippedAmount); }, - [currentAmount, decimals, onInputChange], + [amountMaxLength, currentAmount, decimals, onInputChange], ); // Modifies the amount to match the decimals for changed currency. useEffect(() => { // If the changed currency supports decimals, we can return - if (MoneyRequestUtils.validateAmount(currentAmount, decimals)) { + if (MoneyRequestUtils.validateAmount(currentAmount, decimals, amountMaxLength)) { return; } diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx index d389ac4b92f0..da8e3694a7d2 100644 --- a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx +++ b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx @@ -59,7 +59,6 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow role={CONST.ROLE.BUTTON} > ; }; -type Attachment = { - source: AvatarSource; - isAuthTokenRequired: boolean; - file: FileObject; - isReceipt: boolean; - hasBeenFlagged?: boolean; - reportActionID?: string; -}; - type ImagePickerResponse = { height: number; name: string; @@ -79,7 +71,7 @@ type ImagePickerResponse = { width: number; }; -type FileObject = File | ImagePickerResponse; +type FileObject = Partial; type ChildrenProps = { displayFileInModal: (data: FileObject) => void; @@ -181,7 +173,7 @@ function AttachmentModal({ const [isAuthTokenRequiredState, setIsAuthTokenRequiredState] = useState(isAuthTokenRequired); const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState(null); const [attachmentInvalidReason, setAttachmentInvalidReason] = useState(null); - const [sourceState, setSourceState] = useState(() => source); + const [sourceState, setSourceState] = useState(() => source); const [modalType, setModalType] = useState(CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE); const [isConfirmButtonDisabled, setIsConfirmButtonDisabled] = useState(false); const [confirmButtonFadeAnimation] = useState(() => new Animated.Value(1)); @@ -190,7 +182,7 @@ function AttachmentModal({ const {windowWidth, isSmallScreenWidth} = useWindowDimensions(); const isOverlayModalVisible = (isReceiptAttachment && isDeleteReceiptConfirmModalVisible) || (!isReceiptAttachment && isAttachmentInvalid); - const [file, setFile] = useState | undefined>( + const [file, setFile] = useState( originalFileName ? { name: originalFileName, @@ -211,7 +203,7 @@ function AttachmentModal({ (attachment: Attachment) => { setSourceState(attachment.source); setFile(attachment.file); - setIsAuthTokenRequiredState(attachment.isAuthTokenRequired); + setIsAuthTokenRequiredState(attachment.isAuthTokenRequired ?? false); onCarouselAttachmentChange(attachment); }, [onCarouselAttachmentChange], @@ -222,7 +214,7 @@ function AttachmentModal({ */ const getModalType = useCallback( (sourceURL: string, fileObject: FileObject) => - sourceURL && (Str.isPDF(sourceURL) || (fileObject && Str.isPDF(fileObject.name || translate('attachmentView.unknownFilename')))) + sourceURL && (Str.isPDF(sourceURL) || (fileObject && Str.isPDF(fileObject.name ?? translate('attachmentView.unknownFilename')))) ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.CENTERED, [translate], @@ -292,14 +284,14 @@ function AttachmentModal({ }, [transaction, report]); const isValidFile = useCallback((fileObject: FileObject) => { - if (fileObject.size > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) { + if (fileObject.size !== undefined && fileObject.size > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) { setIsAttachmentInvalid(true); setAttachmentInvalidReasonTitle('attachmentPicker.attachmentTooLarge'); setAttachmentInvalidReason('attachmentPicker.sizeExceeded'); return false; } - if (fileObject.size < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) { + if (fileObject.size !== undefined && fileObject.size < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) { setIsAttachmentInvalid(true); setAttachmentInvalidReasonTitle('attachmentPicker.attachmentTooSmall'); setAttachmentInvalidReason('attachmentPicker.sizeNotMet'); @@ -352,7 +344,7 @@ function AttachmentModal({ setSourceState(inputSource); setFile(updatedFile); setModalType(inputModalType); - } else { + } else if (fileObject.uri) { const inputModalType = getModalType(fileObject.uri, fileObject); setIsModalOpen(true); setSourceState(fileObject.uri); @@ -536,7 +528,6 @@ function AttachmentModal({ onNavigate={onNavigate} onClose={closeModal} source={source} - onToggleKeyboard={updateConfirmButtonVisibility} setDownloadButtonVisibility={setDownloadButtonVisibility} /> ) : ( @@ -546,7 +537,6 @@ function AttachmentModal({ !shouldShowNotFoundPage && ( ({ }, })(memo(AttachmentModal)); -export type {Attachment, FileObject}; +export type {FileObject}; diff --git a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.tsx similarity index 71% rename from src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js rename to src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.tsx index f4cbffc0e1e4..839e05c419df 100644 --- a/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.js +++ b/src/components/Attachments/AttachmentCarousel/AttachmentCarouselCellRenderer.tsx @@ -1,19 +1,15 @@ -import PropTypes from 'prop-types'; import React from 'react'; +import type {StyleProp, ViewStyle} from 'react-native'; import {PixelRatio, View} from 'react-native'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -const propTypes = { +type AttachmentCarouselCellRendererProps = { /** Cell Container styles */ - style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]), + style?: StyleProp; }; -const defaultProps = { - style: [], -}; - -function AttachmentCarouselCellRenderer(props) { +function AttachmentCarouselCellRenderer(props: AttachmentCarouselCellRendererProps) { const styles = useThemeStyles(); const {windowWidth, isSmallScreenWidth} = useWindowDimensions(); const modalStyles = styles.centeredModalStyles(isSmallScreenWidth, true); @@ -28,8 +24,6 @@ function AttachmentCarouselCellRenderer(props) { ); } -AttachmentCarouselCellRenderer.propTypes = propTypes; -AttachmentCarouselCellRenderer.defaultProps = defaultProps; AttachmentCarouselCellRenderer.displayName = 'AttachmentCarouselCellRenderer'; export default React.memo(AttachmentCarouselCellRenderer); diff --git a/src/components/Attachments/AttachmentCarousel/CarouselActions.js b/src/components/Attachments/AttachmentCarousel/CarouselActions.tsx similarity index 73% rename from src/components/Attachments/AttachmentCarousel/CarouselActions.js rename to src/components/Attachments/AttachmentCarousel/CarouselActions.tsx index cf5309222c4e..6138f07809c5 100644 --- a/src/components/Attachments/AttachmentCarousel/CarouselActions.js +++ b/src/components/Attachments/AttachmentCarousel/CarouselActions.tsx @@ -1,25 +1,22 @@ -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; import {useEffect} from 'react'; import KeyboardShortcut from '@libs/KeyboardShortcut'; import CONST from '@src/CONST'; -const propTypes = { +type CarouselActionsProps = { /** Callback to cycle through attachments */ - onCycleThroughAttachments: PropTypes.func.isRequired, + onCycleThroughAttachments: (deltaSlide: number) => void; }; -function CarouselActions({onCycleThroughAttachments}) { +function CarouselActions({onCycleThroughAttachments}: CarouselActionsProps) { useEffect(() => { const shortcutLeftConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_LEFT; const unsubscribeLeftKey = KeyboardShortcut.subscribe( shortcutLeftConfig.shortcutKey, - (e) => { - if (lodashGet(e, 'target.blur')) { + (event) => { + if (event?.target instanceof HTMLElement) { // prevents focus from highlighting around the modal - e.target.blur(); + event.target.blur(); } - onCycleThroughAttachments(-1); }, shortcutLeftConfig.descriptionKey, @@ -29,12 +26,11 @@ function CarouselActions({onCycleThroughAttachments}) { const shortcutRightConfig = CONST.KEYBOARD_SHORTCUTS.ARROW_RIGHT; const unsubscribeRightKey = KeyboardShortcut.subscribe( shortcutRightConfig.shortcutKey, - (e) => { - if (lodashGet(e, 'target.blur')) { + (event) => { + if (event?.target instanceof HTMLElement) { // prevents focus from highlighting around the modal - e.target.blur(); + event.target.blur(); } - onCycleThroughAttachments(1); }, shortcutRightConfig.descriptionKey, @@ -50,6 +46,4 @@ function CarouselActions({onCycleThroughAttachments}) { return null; } -CarouselActions.propTypes = propTypes; - export default CarouselActions; diff --git a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js b/src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx similarity index 75% rename from src/components/Attachments/AttachmentCarousel/CarouselButtons.js rename to src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx index a2c5dadb101d..2037ebdab086 100644 --- a/src/components/Attachments/AttachmentCarousel/CarouselButtons.js +++ b/src/components/Attachments/AttachmentCarousel/CarouselButtons.tsx @@ -1,8 +1,6 @@ -import PropTypes from 'prop-types'; import React from 'react'; import {View} from 'react-native'; -import _ from 'underscore'; -import * as AttachmentCarouselViewPropTypes from '@components/Attachments/propTypes'; +import type {Attachment} from '@components/Attachments/types'; import Button from '@components/Button'; import * as Expensicons from '@components/Icon/Expensicons'; import Tooltip from '@components/Tooltip'; @@ -11,36 +9,34 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -const propTypes = { +type CarouselButtonsProps = { /** Where the arrows should be visible */ - shouldShowArrows: PropTypes.bool.isRequired, + shouldShowArrows: boolean; /** The current page index */ - page: PropTypes.number.isRequired, + page: number; /** The attachments from the carousel */ - attachments: AttachmentCarouselViewPropTypes.attachmentsPropType.isRequired, + attachments: Attachment[]; /** Callback to go one page back */ - onBack: PropTypes.func.isRequired, + onBack: () => void; + /** Callback to go one page forward */ - onForward: PropTypes.func.isRequired, + onForward: () => void; - autoHideArrow: PropTypes.func, - cancelAutoHideArrow: PropTypes.func, -}; + /** Callback for autohiding carousel button arrows */ + autoHideArrow?: () => void; -const defaultProps = { - autoHideArrow: () => {}, - cancelAutoHideArrow: () => {}, + /** Callback for cancelling autohiding of carousel button arrows */ + cancelAutoHideArrow?: () => void; }; -function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward, cancelAutoHideArrow, autoHideArrow}) { +function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward, cancelAutoHideArrow, autoHideArrow}: CarouselButtonsProps) { const theme = useTheme(); const styles = useThemeStyles(); const isBackDisabled = page === 0; - const isForwardDisabled = page === _.size(attachments) - 1; - + const isForwardDisabled = page === attachments.length - 1; const {translate} = useLocalize(); const {isSmallScreenWidth} = useWindowDimensions(); @@ -80,8 +76,6 @@ function CarouselButtons({page, attachments, shouldShowArrows, onBack, onForward ) : null; } -CarouselButtons.propTypes = propTypes; -CarouselButtons.defaultProps = defaultProps; CarouselButtons.displayName = 'CarouselButtons'; export default CarouselButtons; diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.js b/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx similarity index 65% rename from src/components/Attachments/AttachmentCarousel/CarouselItem.js rename to src/components/Attachments/AttachmentCarousel/CarouselItem.tsx index b2c9fed64467..4988110538fe 100644 --- a/src/components/Attachments/AttachmentCarousel/CarouselItem.js +++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx @@ -1,8 +1,8 @@ -import PropTypes from 'prop-types'; import React, {useContext, useState} from 'react'; +import type {StyleProp, ViewStyle} from 'react-native'; import {View} from 'react-native'; import AttachmentView from '@components/Attachments/AttachmentView'; -import * as AttachmentsPropTypes from '@components/Attachments/propTypes'; +import type {Attachment} from '@components/Attachments/types'; import Button from '@components/Button'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import SafeAreaConsumer from '@components/SafeAreaConsumer'; @@ -12,55 +12,27 @@ import useThemeStyles from '@hooks/useThemeStyles'; import ReportAttachmentsContext from '@pages/home/report/ReportAttachmentsContext'; import CONST from '@src/CONST'; -const propTypes = { +type CarouselItemProps = { /** Attachment required information such as the source and file name */ - item: PropTypes.shape({ - /** Report action ID of the attachment */ - reportActionID: PropTypes.string, - - /** Whether source URL requires authentication */ - isAuthTokenRequired: PropTypes.bool, - - /** URL to full-sized attachment or SVG function */ - source: AttachmentsPropTypes.attachmentSourcePropType.isRequired, - - /** Additional information about the attachment file */ - file: PropTypes.shape({ - /** File name of the attachment */ - name: PropTypes.string.isRequired, - }).isRequired, - - /** Whether the attachment has been flagged */ - hasBeenFlagged: PropTypes.bool, - - /** The id of the transaction related to the attachment */ - transactionID: PropTypes.string, - - duration: PropTypes.number, - }).isRequired, + item: Attachment; /** onPress callback */ - onPress: PropTypes.func, + onPress?: () => void; - isModalHovered: PropTypes.bool, + /** Whether attachment carousel modal is hovered over */ + isModalHovered?: boolean; /** Whether the attachment is currently being viewed in the carousel */ - isFocused: PropTypes.bool.isRequired, -}; - -const defaultProps = { - onPress: undefined, - isModalHovered: false, + isFocused: boolean; }; -function CarouselItem({item, onPress, isFocused, isModalHovered}) { +function CarouselItem({item, onPress, isFocused, isModalHovered}: CarouselItemProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const {isAttachmentHidden} = useContext(ReportAttachmentsContext); - // eslint-disable-next-line es/no-nullish-coalescing-operators - const [isHidden, setIsHidden] = useState(() => isAttachmentHidden(item.reportActionID) ?? item.hasBeenFlagged); + const [isHidden, setIsHidden] = useState(() => (item.reportActionID ? isAttachmentHidden(item.reportActionID) : item.hasBeenFlagged)); - const renderButton = (style) => ( + const renderButton = (style: StyleProp) => (