Merge pull request #52799 from Expensify/blimpich-fixStatementsOnStagingUrl

fix statement modal being broken on staging environment

Author: thienlnam

src/libs/Environment/Environment.ts

@@ -2,6 +2,7 @@ import Config from 'react-native-config';
 import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
 import getEnvironment from './getEnvironment';
+import type Environment from './getEnvironment/types';
 
 const ENVIRONMENT_URLS = {
     [CONST.ENVIRONMENT.DEV]: CONST.DEV_NEW_EXPENSIFY_URL + CONFIG.DEV_PORT,
@@ -47,11 +48,18 @@ function getEnvironmentURL(): Promise<string> {
     });
 }
 
+/**
+ * Given the environment get the corresponding oldDot URL
+ */
+function getOldDotURLFromEnvironment(environment: Environment): string {
+    return OLDDOT_ENVIRONMENT_URLS[environment];
+}
+
 /**
  * Get the corresponding oldDot URL based on the environment we are in
  */
 function getOldDotEnvironmentURL(): Promise<string> {
     return getEnvironment().then((environment) => OLDDOT_ENVIRONMENT_URLS[environment]);
 }
 
-export {getEnvironment, isInternalTestBuild, isDevelopment, isProduction, getEnvironmentURL, getOldDotEnvironmentURL};
+export {getEnvironment, isInternalTestBuild, isDevelopment, isProduction, getEnvironmentURL, getOldDotEnvironmentURL, getOldDotURLFromEnvironment};

src/pages/wallet/WalletStatementPage.tsx

@@ -7,16 +7,18 @@ import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOffli
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import WalletStatementModal from '@components/WalletStatementModal';
+import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
 import useThemePreference from '@hooks/useThemePreference';
 import DateUtils from '@libs/DateUtils';
+import {getOldDotURLFromEnvironment} from '@libs/Environment/Environment';
 import fileDownload from '@libs/fileDownload';
 import Navigation from '@libs/Navigation/Navigation';
+import {addTrailingForwardSlash} from '@libs/Url';
 import type {WalletStatementNavigatorParamList} from '@navigation/types';
 import * as User from '@userActions/User';
-import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
@@ -31,8 +33,11 @@ function WalletStatementPage({route}: WalletStatementPageProps) {
     const prevIsWalletStatementGenerating = usePrevious(isWalletStatementGenerating);
     const [isDownloading, setIsDownloading] = useState(isWalletStatementGenerating);
     const {translate, preferredLocale} = useLocalize();
+    const {environment} = useEnvironment();
     const {isOffline} = useNetwork();
 
+    const baseURL = addTrailingForwardSlash(getOldDotURLFromEnvironment(environment));
+
     useEffect(() => {
         const currentYearMonth = format(new Date(), CONST.DATE.YEAR_MONTH_FORMAT);
         if (!yearMonth || yearMonth.length !== 6 || yearMonth > currentYearMonth) {
@@ -55,13 +60,13 @@ function WalletStatementPage({route}: WalletStatementPageProps) {
             // We already have a file URL for this statement, so we can download it immediately
             const downloadFileName = `Expensify_Statement_${yearMonth}.pdf`;
             const fileName = walletStatement[yearMonth];
-            const pdfURL = `${CONFIG.EXPENSIFY.EXPENSIFY_URL}secure?secureType=pdfreport&filename=${fileName}&downloadName=${downloadFileName}`;
+            const pdfURL = `${baseURL}secure?secureType=pdfreport&filename=${fileName}&downloadName=${downloadFileName}`;
             fileDownload(pdfURL, downloadFileName).finally(() => setIsDownloading(false));
             return;
         }
 
         User.generateStatementPDF(yearMonth);
-    }, [isWalletStatementGenerating, walletStatement, yearMonth]);
+    }, [baseURL, isWalletStatementGenerating, walletStatement, yearMonth]);
 
     // eslint-disable-next-line rulesdir/prefer-early-return
     useEffect(() => {
@@ -79,7 +84,7 @@ function WalletStatementPage({route}: WalletStatementPageProps) {
     const month = yearMonth?.substring(4) || getMonth(new Date());
     const monthName = format(new Date(Number(year), Number(month) - 1), CONST.DATE.MONTH_FORMAT);
     const title = translate('statementPage.title', {year, monthName});
-    const url = `${CONFIG.EXPENSIFY.EXPENSIFY_URL}statement.php?period=${yearMonth}${themePreference === CONST.THEME.DARK ? '&isDarkMode=true' : ''}`;
+    const url = `${baseURL}statement.php?period=${yearMonth}${themePreference === CONST.THEME.DARK ? '&isDarkMode=true' : ''}`;
 
     return (
         <ScreenWrapper