refactor: use useOnboardingMessages hook in components to prevent stale translations

Author: Shahidullah-Muffakir

src/components/EmbeddedDemo/index.native.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import WebView from 'react-native-webview';
+import useOnboardingMessages from '@hooks/useOnboardingMessages';
 import useThemeStyles from '@hooks/useThemeStyles';
-import getOnboardingMessages from '@libs/actions/Welcome/OnboardingFlowTasks';
 import type EmbeddedDemoProps from './types';
 
 function EmbeddedDemo({url, webViewProps}: EmbeddedDemoProps) {
     const styles = useThemeStyles();
-    const {testDrive} = getOnboardingMessages();
+    const {testDrive} = useOnboardingMessages();
 
     return (
         <WebView

src/components/TestDrive/Modal/EmployeeTestDriveModal.tsx

@@ -6,6 +6,7 @@ import {InteractionManager} from 'react-native';
 import TestReceipt from '@assets/images/fake-test-drive-employee-receipt.jpg';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
+import useOnboardingMessages from '@hooks/useOnboardingMessages';
 import {
     initMoneyRequest,
     setMoneyRequestAmount,
@@ -17,7 +18,6 @@ import {
 } from '@libs/actions/IOU';
 import {verifyTestDriveRecipient} from '@libs/actions/Onboarding';
 import setTestReceipt from '@libs/actions/setTestReceipt';
-import getOnboardingMessages from '@libs/actions/Welcome/OnboardingFlowTasks';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {TestDriveModalNavigatorParamList} from '@libs/Navigation/types';
@@ -73,7 +73,7 @@ function EmployeeTestDriveModal() {
                                 selected: true,
                             },
                         ]);
-                        const {testDrive} = getOnboardingMessages();
+                        const {testDrive} = useOnboardingMessages();
                         setMoneyRequestAmount(transactionID, testDrive.EMPLOYEE_FAKE_RECEIPT.AMOUNT, testDrive.EMPLOYEE_FAKE_RECEIPT.CURRENCY);
                         setMoneyRequestDescription(transactionID, testDrive.EMPLOYEE_FAKE_RECEIPT.DESCRIPTION, true);
                         setMoneyRequestMerchant(transactionID, testDrive.EMPLOYEE_FAKE_RECEIPT.MERCHANT, true);

src/components/TestDrive/TestDriveDemo.tsx

@@ -5,11 +5,11 @@ import EmbeddedDemo from '@components/EmbeddedDemo';
 import Modal from '@components/Modal';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import useEnvironment from '@hooks/useEnvironment';
+import useOnboardingMessages from '@hooks/useOnboardingMessages';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {completeTestDriveTask} from '@libs/actions/Task';
-import getOnboardingMessages from '@libs/actions/Welcome/OnboardingFlowTasks';
 import Navigation from '@libs/Navigation/Navigation';
 import {isAdminRoom} from '@libs/ReportUtils';
 import {getTestDriveURL} from '@libs/TourUtils';
@@ -28,7 +28,7 @@ function TestDriveDemo() {
     const [introSelected] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED, {canBeMissing: false});
     const viewTourReportID = introSelected?.viewTour;
     const [viewTourReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${viewTourReportID}`, {canBeMissing: true});
-    const {testDrive} = getOnboardingMessages();
+    const {testDrive} = useOnboardingMessages();
 
     useEffect(() => {
         InteractionManager.runAfterInteractions(() => {

src/hooks/useOnboardingMessages/index.ts

@@ -0,0 +1,9 @@
+import {useMemo} from 'react';
+import useLocalize from '@hooks/useLocalize';
+import getOnboardingMessages from '@libs/actions/Welcome/OnboardingFlowTasks';
+
+export default function useOnboardingMessages() {
+    const {translate} = useLocalize();
+    const onboardingMessages = useMemo(getOnboardingMessages, [translate]);
+    return onboardingMessages;
+}

src/pages/OnboardingAccounting/BaseOnboardingAccounting.tsx

@@ -18,6 +18,7 @@ import type {ListItem} from '@components/SelectionList/types';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useOnboardingMessages from '@hooks/useOnboardingMessages';
 import usePermissions from '@hooks/usePermissions';
 import usePrevious from '@hooks/usePrevious';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
@@ -28,7 +29,6 @@ import {openOldDotLink} from '@libs/actions/Link';
 import {createWorkspace, generatePolicyID} from '@libs/actions/Policy/Policy';
 import {completeOnboarding} from '@libs/actions/Report';
 import {setOnboardingAdminsChatReportID, setOnboardingPolicyID} from '@libs/actions/Welcome';
-import getOnboardingMessages from '@libs/actions/Welcome/OnboardingFlowTasks';
 import navigateAfterOnboarding from '@libs/navigateAfterOnboarding';
 import Navigation from '@libs/Navigation/Navigation';
 import {waitForIdle} from '@libs/Network/SequentialQueue';
@@ -217,7 +217,7 @@ function BaseOnboardingAccounting({shouldUseNativeStyles}: BaseOnboardingAccount
             setOnboardingPolicyID(policyID);
         }
 
-        const {onboardingMessages} = getOnboardingMessages();
+        const {onboardingMessages} = useOnboardingMessages();
         completeOnboarding({
             engagementChoice: onboardingPurposeSelected,
             onboardingMessage: onboardingMessages[onboardingPurposeSelected],

src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx

@@ -11,10 +11,10 @@ import TextInput from '@components/TextInput';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
+import useOnboardingMessages from '@hooks/useOnboardingMessages';
 import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import getOnboardingMessages from '@libs/actions/Welcome/OnboardingFlowTasks';
 import {addErrorMessage} from '@libs/ErrorUtils';
 import navigateAfterOnboarding from '@libs/navigateAfterOnboarding';
 import Navigation from '@libs/Navigation/Navigation';
@@ -62,7 +62,7 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat
             if (!onboardingPurposeSelected) {
                 return;
             }
-            const {onboardingMessages} = getOnboardingMessages();
+            const {onboardingMessages} = useOnboardingMessages();
             completeOnboardingReport({
                 engagementChoice: onboardingPurposeSelected,
                 onboardingMessage: onboardingMessages[onboardingPurposeSelected],

src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx

@@ -11,10 +11,10 @@ import MenuItemList from '@components/MenuItemList';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useOnboardingMessages from '@hooks/useOnboardingMessages';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import getOnboardingMessages from '@libs/actions/Welcome/OnboardingFlowTasks';
 import Navigation from '@libs/Navigation/Navigation';
 import OnboardingRefManager from '@libs/OnboardingRefManager';
 import type {TOnboardingRef} from '@libs/OnboardingRefManager';
@@ -87,7 +87,7 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, ro
                 }
 
                 if (isPrivateDomainAndHasAccessiblePolicies && personalDetailsForm?.firstName && personalDetailsForm?.lastName) {
-                    const {onboardingMessages} = getOnboardingMessages();
+                    const {onboardingMessages} = useOnboardingMessages();
                     completeOnboarding({
                         engagementChoice: choice,
                         onboardingMessage: onboardingMessages[choice],

src/pages/OnboardingWorkspaces/BaseOnboardingWorkspaces.tsx

@@ -11,10 +11,10 @@ import UserListItem from '@components/SelectionList/UserListItem';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import useOnboardingMessages from '@hooks/useOnboardingMessages';
 import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import getOnboardingMessages from '@libs/actions/Welcome/OnboardingFlowTasks';
 import navigateAfterOnboarding from '@libs/navigateAfterOnboarding';
 import Navigation from '@libs/Navigation/Navigation';
 import {getDefaultWorkspaceAvatar} from '@libs/ReportUtils';
@@ -57,7 +57,7 @@ function BaseOnboardingWorkspaces({route, shouldUseNativeStyles}: BaseOnboarding
             } else {
                 askToJoinPolicy(policy.policyID);
             }
-            const {onboardingMessages} = getOnboardingMessages();
+            const {onboardingMessages} = useOnboardingMessages();
             completeOnboarding({
                 engagementChoice: CONST.ONBOARDING_CHOICES.LOOKING_AROUND,
                 onboardingMessage: onboardingMessages[CONST.ONBOARDING_CHOICES.LOOKING_AROUND],