Merge branch 'main' of https://github.com/Expensify/App into feat/#Ex…

…pensify#23220-bidirectional-pagination
margelo · Sep 5, 2023 · 2619fa8 · 2619fa8
2 parents a82dc0f + 6b1a667
commit 2619fa8
Show file tree

Hide file tree

Showing 26 changed files with 189 additions and 121 deletions.
diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -90,8 +90,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001036204
-        versionName "1.3.62-4"
+        versionCode 1001036300
+        versionName "1.3.63-0"
     }
 
     flavorDimensions "default"

diff --git a/docs/articles/request-money/Request-and-Split-Bills.md b/docs/articles/request-money/Request-and-Split-Bills.md
@@ -16,7 +16,10 @@ These two features ensure you can live in the moment and settle up afterward.
 
 # How to Request Money
 - Select the Green **+** button and choose **Request Money**
-- Enter the amount **$** they owe and click **Next**
+- Select the relevant option: 
+    - **Manual:** Enter the merchant and amount manually.
+    - **Scan:** Take a photo of the receipt to have the merchant and amount auto-filled.
+    - **Distance:** Enter the details of your trip, plus any stops along the way, and the mileage and amount will be automatically calculated.
 - Search for the user or enter their email!
 - Enter a reason for the request (optional)
 - Click **Request!**

diff --git a/ios/NewExpensify/Info.plist b/ios/NewExpensify/Info.plist
@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.62</string>
+	<string>1.3.63</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.62.4</string>
+	<string>1.3.63.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

diff --git a/ios/NewExpensifyTests/Info.plist b/ios/NewExpensifyTests/Info.plist
@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.62</string>
+	<string>1.3.63</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.62.4</string>
+	<string>1.3.63.0</string>
 </dict>
 </plist>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.62-4",
+  "version": "1.3.63-0",
   "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
@@ -235,7 +235,6 @@ const CONST = {
         TASKS: 'tasks',
         THREADS: 'threads',
         CUSTOM_STATUS: 'customStatus',
-        DISTANCE_REQUESTS: 'distanceRequests',
     },
     BUTTON_STATES: {
         DEFAULT: 'default',

diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js
@@ -95,6 +95,9 @@ const propTypes = {
     /** Maximum number of characters allowed in search input */
     maxInputLength: PropTypes.number,
 
+    /** The result types to return from the Google Places Autocomplete request */
+    resultTypes: PropTypes.string,
+
     /** Information about the network */
     network: networkPropTypes.isRequired,
 
@@ -123,6 +126,7 @@ const defaultProps = {
     },
     maxInputLength: undefined,
     predefinedPlaces: [],
+    resultTypes: 'address',
 };
 
 // Do not convert to class component! It's been tried before and presents more challenges than it's worth.
@@ -134,10 +138,10 @@ function AddressSearch(props) {
     const query = useMemo(
         () => ({
             language: props.preferredLocale,
-            types: 'address',
+            types: props.resultTypes,
             components: props.isLimitedToUSA ? 'country:us' : undefined,
         }),
-        [props.preferredLocale, props.isLimitedToUSA],
+        [props.preferredLocale, props.resultTypes, props.isLimitedToUSA],
     );
 
     const saveLocationDetails = (autocompleteData, details) => {

diff --git a/src/components/ConfirmedRoute.js b/src/components/ConfirmedRoute.js
@@ -93,6 +93,10 @@ function ConfirmedRoute({mapboxAccessToken, transaction}) {
                     accessToken={mapboxAccessToken.token}
                     mapPadding={CONST.MAP_PADDING}
                     pitchEnabled={false}
+                    initialState={{
+                        zoom: CONST.MAPBOX.DEFAULT_ZOOM,
+                        location: lodashGet(waypointMarkers, [0, 'coordinate'], CONST.MAPBOX.DEFAULT_COORDINATE),
+                    }}
                     directionCoordinates={coordinates}
                     style={styles.mapView}
                     waypoints={waypointMarkers}

diff --git a/src/components/DistanceRequest.js b/src/components/DistanceRequest.js
@@ -163,7 +163,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
     useEffect(updateGradientVisibility, [scrollContainerHeight, scrollContentHeight]);
 
     return (
-        <>
+        <ScrollView contentContainerStyle={styles.flex1}>
             <View
                 style={styles.distanceRequestContainer(scrollContainerMaxHeight)}
                 onLayout={(event = {}) => setScrollContainerHeight(lodashGet(event, 'nativeEvent.layout.height', 0))}
@@ -266,7 +266,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken})
                 isDisabled={_.size(validatedWaypoints) < 2}
                 text={translate('common.next')}
             />
-        </>
+        </ScrollView>
     );
 }
 

diff --git a/src/components/MoneyRequestSkeletonView.js b/src/components/MoneyRequestSkeletonView.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import {Rect} from 'react-native-svg';
+import SkeletonViewContentLoader from 'react-content-loader/native';
+import variables from '../styles/variables';
+import themeColors from '../styles/themes/default';
+import styles from '../styles/styles';
+
+function MoneyRequestSkeletonView() {
+    return (
+        <SkeletonViewContentLoader
+            animate
+            width={styles.w100.width}
+            height={variables.moneyRequestSkeletonHeight}
+            backgroundColor={themeColors.borderLighter}
+            foregroundColor={themeColors.border}
+        >
+            <Rect
+                x="16"
+                y="20"
+                width="40"
+                height="8"
+            />
+            <Rect
+                x="16"
+                y="46"
+                width="120"
+                height="20"
+            />
+            <Rect
+                x="16"
+                y="78"
+                width="80"
+                height="8"
+            />
+        </SkeletonViewContentLoader>
+    );
+}
+
+MoneyRequestSkeletonView.displayName = 'MoneyRequestSkeletonView';
+export default MoneyRequestSkeletonView;
diff --git a/src/components/ReportActionItem/MoneyRequestPreview.js b/src/components/ReportActionItem/MoneyRequestPreview.js
@@ -33,6 +33,7 @@ import * as ReceiptUtils from '../../libs/ReceiptUtils';
 import ReportActionItemImages from './ReportActionItemImages';
 import transactionPropTypes from '../transactionPropTypes';
 import colors from '../../styles/colors';
+import MoneyRequestSkeletonView from '../MoneyRequestSkeletonView';
 
 const propTypes = {
     /** The active IOUReport, used for Onyx subscription */
@@ -234,77 +235,81 @@ function MoneyRequestPreview(props) {
                             isHovered={isScanning}
                         />
                     )}
-                    <View style={styles.moneyRequestPreviewBoxText}>
-                        <View style={[styles.flexRow]}>
-                            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getPreviewHeaderText()}</Text>
-                                {Boolean(getSettledMessage()) && (
-                                    <>
-                                        <Icon
-                                            src={Expensicons.DotIndicator}
-                                            width={4}
-                                            height={4}
-                                            additionalStyles={[styles.mr1, styles.ml1]}
-                                        />
-                                        <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getSettledMessage()}</Text>
-                                    </>
+                    {_.isEmpty(props.transaction) ? (
+                        <MoneyRequestSkeletonView />
+                    ) : (
+                        <View style={styles.moneyRequestPreviewBoxText}>
+                            <View style={[styles.flexRow]}>
+                                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                    <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getPreviewHeaderText()}</Text>
+                                    {Boolean(getSettledMessage()) && (
+                                        <>
+                                            <Icon
+                                                src={Expensicons.DotIndicator}
+                                                width={4}
+                                                height={4}
+                                                additionalStyles={[styles.mr1, styles.ml1]}
+                                            />
+                                            <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20]}>{getSettledMessage()}</Text>
+                                        </>
+                                    )}
+                                </View>
+                                {hasFieldErrors && (
+                                    <Icon
+                                        src={Expensicons.DotIndicator}
+                                        fill={colors.red}
+                                    />
                                 )}
                             </View>
-                            {hasFieldErrors && (
-                                <Icon
-                                    src={Expensicons.DotIndicator}
-                                    fill={colors.red}
-                                />
-                            )}
-                        </View>
-                        <View style={[styles.flexRow]}>
-                            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
-                                <Text style={styles.textHeadline}>{getDisplayAmountText()}</Text>
-                                {ReportUtils.isSettled(props.iouReport.reportID) && !props.isBillSplit && (
-                                    <View style={styles.defaultCheckmarkWrapper}>
-                                        <Icon
-                                            src={Expensicons.Checkmark}
-                                            fill={themeColors.iconSuccessFill}
+                            <View style={[styles.flexRow]}>
+                                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}>
+                                    <Text style={styles.textHeadline}>{getDisplayAmountText()}</Text>
+                                    {ReportUtils.isSettled(props.iouReport.reportID) && !props.isBillSplit && (
+                                        <View style={styles.defaultCheckmarkWrapper}>
+                                            <Icon
+                                                src={Expensicons.Checkmark}
+                                                fill={themeColors.iconSuccessFill}
+                                            />
+                                        </View>
+                                    )}
+                                </View>
+                                {props.isBillSplit && (
+                                    <View style={styles.moneyRequestPreviewBoxAvatar}>
+                                        <MultipleAvatars
+                                            icons={participantAvatars}
+                                            shouldStackHorizontally
+                                            size="small"
+                                            isHovered={props.isHovered}
+                                            shouldUseCardBackground
                                         />
                                     </View>
                                 )}
                             </View>
-                            {props.isBillSplit && (
-                                <View style={styles.moneyRequestPreviewBoxAvatar}>
-                                    <MultipleAvatars
-                                        icons={participantAvatars}
-                                        shouldStackHorizontally
-                                        size="small"
-                                        isHovered={props.isHovered}
-                                        shouldUseCardBackground
-                                    />
+                            {shouldShowMerchant && (
+                                <View style={[styles.flexRow]}>
+                                    <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20, styles.breakWord]}>{requestMerchant}</Text>
                                 </View>
                             )}
-                        </View>
-                        {shouldShowMerchant && (
                             <View style={[styles.flexRow]}>
-                                <Text style={[styles.textLabelSupporting, styles.mb1, styles.lh20, styles.breakWord]}>{requestMerchant}</Text>
-                            </View>
-                        )}
-                        <View style={[styles.flexRow]}>
-                            <View style={[styles.flex1]}>
-                                {!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
-                                    <Text style={[styles.textLabel, styles.colorMuted, styles.mt1]}>{props.translate('iou.pendingConversionMessage')}</Text>
+                                <View style={[styles.flex1]}>
+                                    {!isCurrentUserManager && props.shouldShowPendingConversionMessage && (
+                                        <Text style={[styles.textLabel, styles.colorMuted, styles.mt1]}>{props.translate('iou.pendingConversionMessage')}</Text>
+                                    )}
+                                    {shouldShowDescription && <Text style={[styles.mt1, styles.colorMuted]}>{description}</Text>}
+                                </View>
+                                {props.isBillSplit && !_.isEmpty(participantAccountIDs) && (
+                                    <Text style={[styles.textLabel, styles.colorMuted, styles.ml1]}>
+                                        {props.translate('iou.amountEach', {
+                                            amount: CurrencyUtils.convertToDisplayString(
+                                                IOUUtils.calculateAmount(isPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount, requestCurrency),
+                                                requestCurrency,
+                                            ),
+                                        })}
+                                    </Text>
                                 )}
-                                {shouldShowDescription && <Text style={[styles.mt1, styles.colorMuted]}>{description}</Text>}
                             </View>
-                            {props.isBillSplit && !_.isEmpty(participantAccountIDs) && (
-                                <Text style={[styles.textLabel, styles.colorMuted, styles.ml1]}>
-                                    {props.translate('iou.amountEach', {
-                                        amount: CurrencyUtils.convertToDisplayString(
-                                            IOUUtils.calculateAmount(isPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount, requestCurrency),
-                                            requestCurrency,
-                                        ),
-                                    })}
-                                </Text>
-                            )}
                         </View>
-                    </View>
+                    )}
                 </View>
             </OfflineWithFeedback>
         </View>

diff --git a/src/libs/MoneyRequestUtils.js b/src/libs/MoneyRequestUtils.js
@@ -82,4 +82,15 @@ function replaceAllDigits(text, convertFn) {
         .value();
 }
 
-export {stripCommaFromAmount, stripSpacesFromAmount, addLeadingZero, validateAmount, replaceAllDigits};
+/**
+ * Check if distance request or not
+ *
+ * @param {String} iouType - `send` | `split` | `request`
+ * @param {String} selectedTab - `manual` | `scan` | `distance`
+ * @returns {Boolean}
+ */
+function isDistanceRequest(iouType, selectedTab) {
+    return iouType === CONST.IOU.MONEY_REQUEST_TYPE.REQUEST && selectedTab === CONST.TAB.DISTANCE;
+}
+
+export {stripCommaFromAmount, stripSpacesFromAmount, addLeadingZero, validateAmount, replaceAllDigits, isDistanceRequest};
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -164,9 +164,9 @@ class AuthScreens extends React.Component {
 
         // Check if we should be running any demos immediately after signing in.
         if (lodashGet(this.props.demoInfo, 'saastr.isBeginningDemo', false)) {
-            Navigation.navigate(ROUTES.SAASTR);
+            Navigation.navigate(ROUTES.SAASTR, CONST.NAVIGATION.TYPE.FORCED_UP);
         } else if (lodashGet(this.props.demoInfo, 'sbe.isBeginningDemo', false)) {
-            Navigation.navigate(ROUTES.SBE);
+            Navigation.navigate(ROUTES.SBE, CONST.NAVIGATION.TYPE.FORCED_UP);
         }
         if (this.props.lastOpenedPublicRoomID) {
             // Re-open the last opened public room if the user logged in from a public room link

diff --git a/src/libs/Permissions.js b/src/libs/Permissions.js
@@ -86,14 +86,6 @@ function canUseCustomStatus(betas) {
     return _.contains(betas, CONST.BETAS.CUSTOM_STATUS) || canUseAllBetas(betas);
 }
 
-/**
- * @param {Array<String>} betas
- * @returns {Boolean}
- */
-function canUseDistanceRequests(betas) {
-    return _.contains(betas, CONST.BETAS.DISTANCE_REQUESTS) || canUseAllBetas(betas);
-}
-
 /**
  * Link previews are temporarily disabled.
  * @returns {Boolean}
@@ -112,6 +104,5 @@ export default {
     canUsePolicyRooms,
     canUseTasks,
     canUseCustomStatus,
-    canUseDistanceRequests,
     canUseLinkPreviews,
 };
diff --git a/src/libs/ReportActionsUtils.js b/src/libs/ReportActionsUtils.js
@@ -362,6 +362,10 @@ function shouldReportActionBeVisibleAsLastAction(reportAction) {
         return false;
     }
 
+    if (!_.isEmpty(reportAction.errors)) {
+        return false;
+    }
+
     return shouldReportActionBeVisible(reportAction, reportAction.reportActionID) && !isWhisperAction(reportAction) && !isDeletedAction(reportAction);
 }