Merge branch 'main' of github-nikos:nikosamofa/expensify-app into ts-…

…migration/ReportWelcomeText

.github/PULL_REQUEST_TEMPLATE.md

@@ -103,6 +103,9 @@ This is a checklist for PR authors. Please make sure to complete all tasks and c
 - [ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like `Avatar` is modified, I verified that `Avatar` is working as expected in all cases)
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
 - [ ] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
+- [ ] If the PR modifies the form input styles:
+    - [ ] I verified that all the inputs inside a form are aligned with each other.
+    - [ ] I added `Design` label so the design team can review the changes.
 - [ ] If a new page is added, I verified it's using the `ScrollView` component to make it scrollable when more elements are added to the page.
 - [ ] If the `main` branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the `Test` steps.
 

android/app/build.gradle

@@ -91,8 +91,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001041402
-        versionName "1.4.14-2"
+        versionCode 1001041504
+        versionName "1.4.15-4"
     }
 
     flavorDimensions "default"

android/app/src/main/AndroidManifest.xml

@@ -18,7 +18,6 @@
         android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"
         android:resizeableActivity="false"
-        android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="false"
         android:theme="@style/AppTheme"
         tools:replace="android:supportsRtl">

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -2,4 +2,5 @@
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
     <background android:drawable="@color/ic_launcher_background"/>
     <foreground android:drawable="@drawable/ic_launcher_foreground"/>
+    <monochrome android:drawable="@drawable/ic_launcher_monochrome"/>
 </adaptive-icon>

contributingGuides/OFFLINE_UX.md

@@ -82,6 +82,7 @@ When the user is offline:
     - `optimisticData` - always include this object when using the Pattern B
     - `successData` - include this if the action is `update` or `delete`. You do not have to include this if the action is `add` (same data was already passed using the `optimisticData` object)
     - `failureData` - always include this object. In case of `add` action, you will want to add some generic error which covers some unexpected failures which were not handled in the backend
+       - In the event that `successData` and `failureData` are the same, you can use a single object `finallyData` in place of both. 
 
 **Handling errors:**
 - The [OfflineWithFeedback component](https://github.com/Expensify/App/blob/main/src/components/OfflineWithFeedback.js) already handles showing errors too, as long as you pass the error field in the [errors prop](https://github.com/Expensify/App/blob/128ea378f2e1418140325c02f0b894ee60a8e53f/src/components/OfflineWithFeedback.js#L29-L31)

contributingGuides/REVIEWER_CHECKLIST.md

@@ -51,6 +51,9 @@
 - [ ] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like `Avatar` is modified, I verified that `Avatar` is working as expected in all cases)
 - [ ] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
 - [ ] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
+- [ ] If the PR modifies the form input styles:
+    - [ ] I verified that all the inputs inside a form are aligned with each other.
+    - [ ] I added `Design` label so the design team can review the changes.
 - [ ] If a new page is added, I verified it's using the `ScrollView` component to make it scrollable when more elements are added to the page.
 - [ ] If the `main` branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the `Test` steps.
 - [ ] I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

ios/NewExpensify/Info.plist

@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.14</string>
+	<string>1.4.15</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.14.2</string>
+	<string>1.4.15.4</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.14</string>
+	<string>1.4.15</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.14.2</string>
+	<string>1.4.15.4</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.14-2",
+  "version": "1.4.15-4",
   "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.",

src/NAVIGATORS.ts

@@ -4,7 +4,6 @@
  * */
 export default {
     CENTRAL_PANE_NAVIGATOR: 'CentralPaneNavigator',
-    LEFT_MODAL_NAVIGATOR: 'LeftModalNavigator',
     RIGHT_MODAL_NAVIGATOR: 'RightModalNavigator',
     FULL_SCREEN_NAVIGATOR: 'FullScreenNavigator',
 } as const;

src/ONYXKEYS.ts

@@ -254,6 +254,8 @@ const ONYXKEYS = {
         POLICY_RECENTLY_USED_CATEGORIES: 'policyRecentlyUsedCategories_',
         POLICY_TAGS: 'policyTags_',
         POLICY_RECENTLY_USED_TAGS: 'policyRecentlyUsedTags_',
+        POLICY_REPORT_FIELDS: 'policyReportFields_',
+        POLICY_RECENTLY_USED_REPORT_FIELDS: 'policyRecentlyUsedReportFields_',
         WORKSPACE_INVITE_MEMBERS_DRAFT: 'workspaceInviteMembersDraft_',
         WORKSPACE_INVITE_MESSAGE_DRAFT: 'workspaceInviteMessageDraft_',
         REPORT: 'report_',
@@ -443,6 +445,8 @@ type OnyxValues = {
     [ONYXKEYS.COLLECTION.POLICY_MEMBERS]: OnyxTypes.PolicyMembers;
     [ONYXKEYS.COLLECTION.POLICY_MEMBERS_DRAFTS]: OnyxTypes.PolicyMember;
     [ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES]: OnyxTypes.RecentlyUsedCategories;
+    [ONYXKEYS.COLLECTION.POLICY_REPORT_FIELDS]: OnyxTypes.PolicyReportField;
+    [ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_REPORT_FIELDS]: OnyxTypes.RecentlyUsedReportFields;
     [ONYXKEYS.COLLECTION.DEPRECATED_POLICY_MEMBER_LIST]: OnyxTypes.PolicyMembers;
     [ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT]: Record<string, number>;
     [ONYXKEYS.COLLECTION.REPORT]: OnyxTypes.Report;

src/SCREENS.ts

@@ -81,12 +81,10 @@ const SCREENS = {
     SAVE_THE_WORLD: {
         ROOT: 'SaveTheWorld_Root',
     },
-    LEFT_MODAL: {
-        SEARCH: 'Search',
-    },
     RIGHT_MODAL: {
         SETTINGS: 'Settings',
         NEW_CHAT: 'NewChat',
+        SEARCH: 'Search',
         DETAILS: 'Details',
         PROFILE: 'Profile',
         REPORT_DETAILS: 'Report_Details',

src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.js

@@ -30,7 +30,7 @@ function BaseAttachmentViewPdf({
             onScaleChangedProp(scale);
 
             // When a pdf is shown in a carousel, we want to disable the pager scroll when the pdf is zoomed in
-            if (isUsedInCarousel) {
+            if (isUsedInCarousel && attachmentCarouselPagerContext) {
                 const shouldPagerScroll = scale === 1;
 
                 attachmentCarouselPagerContext.onPinchGestureChange(!shouldPagerScroll);

src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.js

@@ -18,7 +18,7 @@ function AttachmentViewPdf(props) {
     const Pan = Gesture.Pan()
         .manualActivation(true)
         .onTouchesMove((evt) => {
-            if (offsetX.value !== 0 && offsetY.value !== 0) {
+            if (offsetX.value !== 0 && offsetY.value !== 0 && attachmentCarouselPagerContext) {
                 // if the value of X is greater than Y and the pdf is not zoomed in,
                 // enable  the pager scroll so that the user
                 // can swipe to the next attachment otherwise disable it.

src/components/DatePicker/CalendarPicker/index.js

@@ -236,7 +236,7 @@ class CalendarPicker extends React.PureComponent {
                                         <View
                                             style={[
                                                 this.props.themeStyles.calendarDayContainer,
-                                                isSelected ? this.props.themeStyles.calendarDayContainerSelected : {},
+                                                isSelected ? this.props.themeStyles.buttonDefaultBG : {},
                                                 !isDisabled ? this.props.StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed)) : {},
                                             ]}
                                         >

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js

@@ -65,14 +65,17 @@ function BaseHTMLEngineProvider(props) {
                 mixedUAStyles: {...styles.textLabelSupporting},
             }),
             'next-steps-email': defaultHTMLElementModels.span.extend({tagName: 'next-steps-email'}),
+            video: defaultHTMLElementModels.div.extend({
+                tagName: 'video',
+                mixedUAStyles: {whiteSpace: 'pre'},
+            }),
         }),
         [styles.colorMuted, styles.formError, styles.mb0, styles.textLabelSupporting],
     );
 
     // We need to memoize this prop to make it referentially stable.
     const defaultTextProps = useMemo(() => ({selectable: props.textSelectable, allowFontScaling: false, textBreakStrategy: 'simple'}), [props.textSelectable]);
     const defaultViewProps = {style: [styles.alignItemsStart, styles.userSelectText]};
-
     return (
         <TRenderEngineProvider
             customHTMLElementModels={customHTMLElementModels}

src/components/HTMLEngineProvider/HTMLRenderers/AnchorRenderer.js

@@ -20,7 +20,7 @@ function AnchorRenderer(props) {
     const isAttachment = Boolean(htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]);
     const displayName = lodashGet(props.tnode, 'domNode.children[0].data', '');
     const parentStyle = lodashGet(props.tnode, 'parent.styles.nativeTextRet', {});
-    const attrHref = htmlAttribs.href || '';
+    const attrHref = htmlAttribs.href || htmlAttribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE] || '';
     const internalNewExpensifyPath = Link.getInternalNewExpensifyPath(attrHref);
     const internalExpensifyPath = Link.getInternalExpensifyPath(attrHref);
 

src/components/HTMLEngineProvider/HTMLRenderers/index.js

@@ -15,6 +15,7 @@ export default {
     a: AnchorRenderer,
     code: CodeRenderer,
     img: ImageRenderer,
+    video: AnchorRenderer, // temporary until we have a video player component
 
     // Custom tag renderers
     edited: EditedRenderer,

src/components/Icon/Illustrations.ts

@@ -35,6 +35,7 @@ import ConciergeNew from '@assets/images/simple-illustrations/simple-illustratio
 import CreditCardsNew from '@assets/images/simple-illustrations/simple-illustration__credit-cards.svg';
 import EmailAddress from '@assets/images/simple-illustrations/simple-illustration__email-address.svg';
 import HandEarth from '@assets/images/simple-illustrations/simple-illustration__handearth.svg';
+import HotDogStand from '@assets/images/simple-illustrations/simple-illustration__hotdogstand.svg';
 import InvoiceBlue from '@assets/images/simple-illustrations/simple-illustration__invoice.svg';
 import LockOpen from '@assets/images/simple-illustrations/simple-illustration__lockopen.svg';
 import Luggage from '@assets/images/simple-illustrations/simple-illustration__luggage.svg';
@@ -60,6 +61,7 @@ export {
     ConciergeExclamation,
     CreditCardsBlue,
     EmailAddress,
+    HotDogStand,
     InvoiceOrange,
     JewelBoxBlue,
     JewelBoxGreen,

src/components/MapView/MapView.tsx

@@ -29,13 +29,19 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         const [isIdle, setIsIdle] = useState(false);
         const [currentPosition, setCurrentPosition] = useState(cachedUserLocation);
         const [userInteractedWithMap, setUserInteractedWithMap] = useState(false);
+        const hasAskedForLocationPermission = useRef(false);
 
         useFocusEffect(
             useCallback(() => {
                 if (isOffline) {
                     return;
                 }
 
+                if (hasAskedForLocationPermission.current) {
+                    return;
+                }
+
+                hasAskedForLocationPermission.current = true;
                 getCurrentPosition(
                     (params) => {
                         const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};

src/components/MapView/MapView.website.tsx

@@ -5,7 +5,7 @@
 import {useFocusEffect} from '@react-navigation/native';
 import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
-import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useState} from 'react';
+import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import Map, {MapRef, Marker} from 'react-map-gl';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
@@ -52,28 +52,35 @@ const MapView = forwardRef<MapViewHandle, ComponentProps>(
         const [userInteractedWithMap, setUserInteractedWithMap] = useState(false);
         const [shouldResetBoundaries, setShouldResetBoundaries] = useState<boolean>(false);
         const setRef = useCallback((newRef: MapRef | null) => setMapRef(newRef), []);
+        const hasAskedForLocationPermission = useRef(false);
 
         useFocusEffect(
             useCallback(() => {
                 if (isOffline) {
                     return;
                 }
 
+                if (hasAskedForLocationPermission.current) {
+                    return;
+                }
+
+                hasAskedForLocationPermission.current = true;
                 getCurrentPosition(
                     (params) => {
                         const currentCoords = {longitude: params.coords.longitude, latitude: params.coords.latitude};
                         setCurrentPosition(currentCoords);
                         setUserLocation(currentCoords);
                     },
                     () => {
-                        if (cachedUserLocation) {
+                        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+                        if (cachedUserLocation || !initialState) {
                             return;
                         }
 
                         setCurrentPosition({longitude: initialState.location[0], latitude: initialState.location[1]});
                     },
                 );
-            }, [cachedUserLocation, isOffline, initialState.location]),
+            }, [cachedUserLocation, initialState, isOffline]),
         );
 
         // Determines if map can be panned to user's detected

src/components/MenuItem.tsx

@@ -531,7 +531,7 @@ function MenuItem(
                                 {badgeText && (
                                     <Badge
                                         text={badgeText}
-                                        badgeStyles={[styles.alignSelfCenter, brickRoadIndicator ? styles.mr2 : undefined, focused || isHovered || pressed ? styles.hoveredButton : {}]}
+                                        badgeStyles={[styles.alignSelfCenter, brickRoadIndicator ? styles.mr2 : undefined, focused || isHovered || pressed ? styles.buttonHoveredBG : {}]}
                                     />
                                 )}
                                 {/* Since subtitle can be of type number, we should allow 0 to be shown */}

src/components/Section/IconSection.js

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+const iconSectionPropTypes = {
+    icon: PropTypes.icon,
+    IconComponent: PropTypes.IconComponent,
+    iconContainerStyles: PropTypes.iconContainerStyles,
+};
+
+const defaultIconSectionPropTypes = {
+    icon: null,
+    IconComponent: null,
+    iconContainerStyles: [],
+};
+
+function IconSection({icon, IconComponent, iconContainerStyles}) {
+    const styles = useThemeStyles();
+
+    return (
+        <View style={[styles.flexGrow1, styles.flexRow, styles.justifyContentEnd, ...iconContainerStyles]}>
+            {Boolean(icon) && (
+                <Icon
+                    src={icon}
+                    height={68}
+                    width={68}
+                />
+            )}
+            {Boolean(IconComponent) && <IconComponent />}
+        </View>
+    );
+}
+
+IconSection.displayName = 'IconSection';
+IconSection.propTypes = iconSectionPropTypes;
+IconSection.defaultProps = defaultIconSectionPropTypes;
+
+export default IconSection;