Merge remote-tracking branch 'origin/main' into fix/39559

ios/Podfile.lock

@@ -1818,7 +1818,7 @@ PODS:
   - RNGoogleSignin (10.0.1):
     - GoogleSignIn (~> 7.0)
     - React-Core
-  - RNLiveMarkdown (0.1.47):
+  - RNLiveMarkdown (0.1.62):
     - glog
     - hermes-engine
     - RCT-Folly (= 2022.05.16.00)
@@ -1836,9 +1836,9 @@ PODS:
     - React-utils
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNLiveMarkdown/common (= 0.1.47)
+    - RNLiveMarkdown/common (= 0.1.62)
     - Yoga
-  - RNLiveMarkdown/common (0.1.47):
+  - RNLiveMarkdown/common (0.1.62):
     - glog
     - hermes-engine
     - RCT-Folly (= 2022.05.16.00)
@@ -2547,7 +2547,7 @@ SPEC CHECKSUMS:
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNGestureHandler: 1190c218cdaaf029ee1437076a3fbbc3297d89fb
   RNGoogleSignin: ccaa4a81582cf713eea562c5dd9dc1961a715fd0
-  RNLiveMarkdown: f172c7199283dc9d21bccf7e21ea10741fd19e1d
+  RNLiveMarkdown: 47dfb50244f9ba1caefbc0efc6404ba41bf6620a
   RNLocalize: d4b8af4e442d4bcca54e68fc687a2129b4d71a81
   rnmapbox-maps: 3e273e0e867a079ec33df9ee33bb0482434b897d
   RNPermissions: 8990fc2c10da3640938e6db1647cb6416095b729
@@ -2564,7 +2564,7 @@ SPEC CHECKSUMS:
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Turf: 13d1a92d969ca0311bbc26e8356cca178ce95da2
   VisionCamera: 3033e0dd5272d46e97bcb406adea4ae0e6907abf
-  Yoga: 64cd2a583ead952b0315d5135bf39e053ae9be70
+  Yoga: 1b901a6d6eeba4e8a2e8f308f708691cdb5db312
 
 PODFILE CHECKSUM: a25a81f2b50270f0c0bd0aff2e2ebe4d0b4ec06d
 

package.json

@@ -64,7 +64,7 @@
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@dotlottie/react-player": "^1.6.3",
-    "@expensify/react-native-live-markdown": "0.1.49",
+    "@expensify/react-native-live-markdown": "0.1.62",
     "@expo/metro-runtime": "~3.1.1",
     "@formatjs/intl-datetimeformat": "^6.10.0",
     "@formatjs/intl-listformat": "^7.2.2",
@@ -108,7 +108,7 @@
     "date-fns-tz": "^2.0.0",
     "dom-serializer": "^0.2.2",
     "domhandler": "^4.3.0",
-    "expensify-common": "git+ssh://[email protected]/Expensify/expensify-common.git#13de5b0606662df33fa1392ad82cc11daadff52e",
+    "expensify-common": "git+ssh://[email protected]/Expensify/expensify-common.git#c0f7f3b6558fbeda0527c80d68460d418afef219",
     "expo": "^50.0.3",
     "expo-av": "~13.10.4",
     "expo-image": "1.11.0",

src/ONYXKEYS.ts

@@ -318,6 +318,11 @@ const ONYXKEYS = {
         POLICY_RECENTLY_USED_CATEGORIES: 'policyRecentlyUsedCategories_',
         POLICY_TAGS: 'policyTags_',
         POLICY_RECENTLY_USED_TAGS: 'nvp_recentlyUsedTags_',
+        // Whether the policy's connection data was attempted to be fetched in
+        // the current user session. As this state only exists client-side, it
+        // should not be included as part of the policy object. The policy
+        // object should mirror the data as it's stored in the database.
+        POLICY_HAS_CONNECTIONS_DATA_BEEN_FETCHED: 'policyHasConnectionsDataBeenFetched_',
         OLD_POLICY_RECENTLY_USED_TAGS: 'policyRecentlyUsedTags_',
         WORKSPACE_INVITE_MEMBERS_DRAFT: 'workspaceInviteMembersDraft_',
         WORKSPACE_INVITE_MESSAGE_DRAFT: 'workspaceInviteMessageDraft_',
@@ -525,6 +530,7 @@ type OnyxCollectionValuesMapping = {
     [ONYXKEYS.COLLECTION.POLICY_CATEGORIES]: OnyxTypes.PolicyCategories;
     [ONYXKEYS.COLLECTION.POLICY_TAGS]: OnyxTypes.PolicyTagList;
     [ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES]: OnyxTypes.RecentlyUsedCategories;
+    [ONYXKEYS.COLLECTION.POLICY_HAS_CONNECTIONS_DATA_BEEN_FETCHED]: boolean;
     [ONYXKEYS.COLLECTION.DEPRECATED_POLICY_MEMBER_LIST]: OnyxTypes.PolicyEmployeeList;
     [ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT]: OnyxTypes.InvitedEmailsToAccountIDs;
     [ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MESSAGE_DRAFT]: string;

src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx

@@ -92,6 +92,9 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
             tagsStyles={styles.webViewStyles.tagStyles}
             enableCSSInlineProcessing={false}
             systemFonts={Object.values(FontUtils.fontFamily.single)}
+            htmlParserOptions={{
+                recognizeSelfClosing: true,
+            }}
             domVisitors={{
                 // eslint-disable-next-line no-param-reassign
                 onText: (text) => (text.data = convertToLTR(text.data)),

src/hooks/useMarkdownStyle.ts

@@ -49,6 +49,10 @@ function useMarkdownStyle(message: string | null = null): MarkdownStyle {
                 color: theme.mentionText,
                 backgroundColor: theme.mentionBG,
             },
+            mentionReport: {
+                color: theme.mentionText,
+                backgroundColor: theme.mentionBG,
+            },
         }),
         [theme, emojiFontSize],
     );

src/libs/API/parameters/OpenPolicyAccountingPageParams.ts

@@ -0,0 +1,5 @@
+type OpenPolicyAccountingPageParams = {
+    policyID: string;
+};
+
+export default OpenPolicyAccountingPageParams;

src/libs/API/parameters/index.ts

@@ -210,3 +210,4 @@ export type {default as ConvertTrackedExpenseToRequestParams} from './ConvertTra
 export type {default as ShareTrackedExpenseParams} from './ShareTrackedExpenseParams';
 export type {default as CategorizeTrackedExpenseParams} from './CategorizeTrackedExpenseParams';
 export type {default as LeavePolicyParams} from './LeavePolicyParams';
+export type {default as OpenPolicyAccountingPageParams} from './OpenPolicyAccountingPageParams';

src/libs/API/types.ts

@@ -457,6 +457,7 @@ const READ_COMMANDS = {
     OPEN_POLICY_WORKFLOWS_PAGE: 'OpenPolicyWorkflowsPage',
     OPEN_POLICY_DISTANCE_RATES_PAGE: 'OpenPolicyDistanceRatesPage',
     OPEN_POLICY_MORE_FEATURES_PAGE: 'OpenPolicyMoreFeaturesPage',
+    OPEN_POLICY_ACCOUNTING_PAGE: 'OpenPolicyAccountingPage',
 } as const;
 
 type ReadCommand = ValueOf<typeof READ_COMMANDS>;
@@ -497,6 +498,7 @@ type ReadCommandParameters = {
     [READ_COMMANDS.OPEN_POLICY_WORKFLOWS_PAGE]: Parameters.OpenPolicyWorkflowsPageParams;
     [READ_COMMANDS.OPEN_POLICY_DISTANCE_RATES_PAGE]: Parameters.OpenPolicyDistanceRatesPageParams;
     [READ_COMMANDS.OPEN_POLICY_MORE_FEATURES_PAGE]: Parameters.OpenPolicyMoreFeaturesPageParams;
+    [READ_COMMANDS.OPEN_POLICY_ACCOUNTING_PAGE]: Parameters.OpenPolicyAccountingPageParams;
 };
 
 const SIDE_EFFECT_REQUEST_COMMANDS = {

src/libs/actions/PolicyConnections.ts

@@ -0,0 +1,38 @@
+import Onyx from 'react-native-onyx';
+import type {OnyxUpdate} from 'react-native-onyx';
+import * as API from '@libs/API';
+import type {OpenPolicyAccountingPageParams} from '@libs/API/parameters';
+import {READ_COMMANDS} from '@libs/API/types';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+function openPolicyAccountingPage(policyID: string) {
+    const hasConnectionsDataBeenFetchedKey = `${ONYXKEYS.COLLECTION.POLICY_HAS_CONNECTIONS_DATA_BEEN_FETCHED}${policyID}` as const;
+
+    const optimisticData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: hasConnectionsDataBeenFetchedKey,
+            value: false,
+        },
+    ];
+    const finallyData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: hasConnectionsDataBeenFetchedKey,
+            value: true,
+        },
+    ];
+
+    const parameters: OpenPolicyAccountingPageParams = {
+        policyID,
+    };
+
+    API.read(READ_COMMANDS.OPEN_POLICY_ACCOUNTING_PAGE, parameters, {
+        optimisticData,
+        finallyData,
+    });
+}
+
+// More action functions will be added later
+// eslint-disable-next-line import/prefer-default-export
+export {openPolicyAccountingPage};

src/pages/workspace/accounting/WorkspaceAccountingPage.tsx

@@ -22,8 +22,8 @@ import Navigation from '@navigation/Navigation';
 import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper';
 import FeatureEnabledAccessOrNotFoundWrapper from '@pages/workspace/FeatureEnabledAccessOrNotFoundWrapper';
 import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper';
-import withPolicy from '@pages/workspace/withPolicy';
 import type {WithPolicyProps} from '@pages/workspace/withPolicy';
+import withPolicyConnections from '@pages/workspace/withPolicyConnections';
 import type {AnchorPosition} from '@styles/index';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
@@ -237,4 +237,4 @@ function WorkspaceAccountingPage({policy}: WithPolicyProps) {
 
 WorkspaceAccountingPage.displayName = 'WorkspaceAccountingPage';
 
-export default withPolicy(WorkspaceAccountingPage);
+export default withPolicyConnections(WorkspaceAccountingPage);

src/pages/workspace/withPolicyConnections.tsx

@@ -0,0 +1,69 @@
+import React, {useEffect} from 'react';
+import type {ComponentType} from 'react';
+import {useOnyx} from 'react-native-onyx';
+import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import useNetwork from '@hooks/useNetwork';
+import {openPolicyAccountingPage} from '@libs/actions/PolicyConnections';
+import ONYXKEYS from '@src/ONYXKEYS';
+import withPolicy from './withPolicy';
+import type {WithPolicyProps} from './withPolicy';
+
+type WithPolicyConnectionsProps = WithPolicyProps;
+
+/**
+ * Higher-order component that fetches the connections data and populates
+ * the corresponding field of the policy object if the field is empty. It then passes the policy object
+ * to the wrapped component.
+ *
+ * Use this HOC when you need the policy object with its connections field populated.
+ *
+ * Only the active policy gets the complete policy data upon app start that includes the connections data.
+ * For other policies, the connections data needs to be fetched when it's needed.
+ */
+function withPolicyConnections(WrappedComponent: ComponentType<WithPolicyConnectionsProps>) {
+    function WithPolicyConnections({policy, policyDraft, route}: WithPolicyConnectionsProps) {
+        const {isOffline} = useNetwork();
+        const [hasConnectionsDataBeenFetched, {status}] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_HAS_CONNECTIONS_DATA_BEEN_FETCHED}${policy?.id ?? '0'}`, {
+            initWithStoredValues: false,
+        });
+
+        useEffect(() => {
+            // When the accounting feature is not enabled, or if the connections data already exists,
+            // there is no need to fetch the connections data.
+            if (!policy || !policy.areConnectionsEnabled || !!hasConnectionsDataBeenFetched || !!policy.connections) {
+                return;
+            }
+
+            openPolicyAccountingPage(policy.id);
+        }, [hasConnectionsDataBeenFetched, policy]);
+
+        if (status === 'loading' || !hasConnectionsDataBeenFetched) {
+            if (isOffline) {
+                return (
+                    <FullPageOfflineBlockingView>
+                        <WrappedComponent
+                            policy={policy}
+                            policyDraft={policyDraft}
+                            route={route}
+                        />
+                    </FullPageOfflineBlockingView>
+                );
+            }
+
+            return <FullScreenLoadingIndicator />;
+        }
+
+        return (
+            <WrappedComponent
+                policy={policy}
+                policyDraft={policyDraft}
+                route={route}
+            />
+        );
+    }
+
+    return withPolicy(WithPolicyConnections);
+}
+
+export default withPolicyConnections;