Merge pull request Expensify#89445 from shubham1206agra/refactor-convertToDisplayStringWithoutCurrency-1

Author: blimpich

src/components/CurrencyListContextProvider/default.ts

@@ -10,6 +10,7 @@ const defaultCurrencyListActionsContextValue: CurrencyListActionsContextType = {
     getCurrencySymbol: () => undefined,
     getCurrencyDecimals: () => 2,
     convertToDisplayString: () => '',
+    convertToDisplayStringWithoutCurrency: () => '',
 };
 
 export {defaultCurrencyListStateContextValue, defaultCurrencyListActionsContextValue};

src/components/CurrencyListContextProvider/index.tsx

@@ -2,7 +2,7 @@ import React, {createContext, useCallback, useContext, useMemo} from 'react';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import {convertToFrontendAmountAsInteger} from '@libs/CurrencyUtils';
-import {format} from '@libs/NumberFormatUtils';
+import {format, formatToParts} from '@libs/NumberFormatUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {CurrencyList} from '@src/types/onyx';
@@ -54,6 +54,28 @@ function CurrencyListContextProvider({children}: React.PropsWithChildren) {
         [getCurrencyDecimals, preferredLocale],
     );
 
+    const convertToDisplayStringWithoutCurrency = useCallback(
+        (amountInCents: number, currencyCode: string = CONST.CURRENCY.USD): string => {
+            const decimals = getCurrencyDecimals(currencyCode);
+            const convertedAmount = convertToFrontendAmountAsInteger(amountInCents, decimals);
+            return formatToParts(preferredLocale, convertedAmount, {
+                style: 'currency',
+                currency: currencyCode,
+
+                // We are forcing the number of decimals because we override the default number of decimals in the backend for some currencies
+                // See: https://github.com/Expensify/PHP-Libs/pull/834
+                minimumFractionDigits: decimals,
+                // For currencies that have decimal places > 2, floor to 2 instead as we don't support more than 2 decimal places.
+                maximumFractionDigits: 2,
+            })
+                .filter((x) => x.type !== 'currency')
+                .filter((x) => x.type !== 'literal' || x.value.trim().length !== 0)
+                .map((x) => x.value)
+                .join('');
+        },
+        [getCurrencyDecimals, preferredLocale],
+    );
+
     const stateValue = useMemo<CurrencyListStateContextType>(
         () => ({
             currencyList,
@@ -66,8 +88,9 @@ function CurrencyListContextProvider({children}: React.PropsWithChildren) {
             getCurrencySymbol,
             getCurrencyDecimals,
             convertToDisplayString,
+            convertToDisplayStringWithoutCurrency,
         }),
-        [getCurrencySymbol, getCurrencyDecimals, convertToDisplayString],
+        [getCurrencySymbol, getCurrencyDecimals, convertToDisplayString, convertToDisplayStringWithoutCurrency],
     );
 
     return (

src/components/CurrencyListContextProvider/types.ts

@@ -14,6 +14,9 @@ type CurrencyListActionsContextType = {
 
     /** Function to convert amount in cents to display string based on the currency and locale */
     convertToDisplayString: (amount: number | undefined, currencyCode: string | undefined) => string;
+
+    /** Function to convert amount in cents to display string without currency symbol */
+    convertToDisplayStringWithoutCurrency: (amount: number, currencyCode?: string) => string;
 };
 
 export type {CurrencyListStateContextType, CurrencyListActionsContextType};

src/components/MoneyRequestConfirmationList/hooks/useSplitParticipants.tsx

@@ -8,7 +8,7 @@ import {useCurrencyListActions} from '@hooks/useCurrencyList';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {resetSplitShares, setIndividualShare} from '@libs/actions/IOU/Split';
-import {convertToBackendAmount, convertToDisplayStringWithoutCurrency} from '@libs/CurrencyUtils';
+import {convertToBackendAmount} from '@libs/CurrencyUtils';
 import {calculateAmount} from '@libs/IOUUtils';
 import {getIOUConfirmationOptionsFromPayeePersonalDetail} from '@libs/OptionsListUtils';
 import CONST from '@src/CONST';
@@ -54,7 +54,7 @@ type UseSplitParticipantsParams = {
 function useSplitParticipants({isTypeSplit, shouldShowReadOnlySplits, payeePersonalDetails, selectedParticipants, transaction, iouAmount, iouCurrencyCode}: UseSplitParticipantsParams) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {convertToDisplayString, getCurrencySymbol} = useCurrencyListActions();
+    const {convertToDisplayString, convertToDisplayStringWithoutCurrency, getCurrencySymbol} = useCurrencyListActions();
 
     const transactionID = transaction?.transactionID;
     const onSplitShareChange = (accountID: number, value: number) => {

src/components/PerDiemEReceipt.tsx

@@ -6,7 +6,7 @@ import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {convertAmountToDisplayString, convertToDisplayStringWithoutCurrency} from '@libs/CurrencyUtils';
+import {convertAmountToDisplayString} from '@libs/CurrencyUtils';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {getTransactionDetails} from '@libs/ReportUtils';
 import variables from '@styles/variables';
@@ -53,7 +53,7 @@ function PerDiemEReceipt({transactionID}: PerDiemEReceiptProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
-    const {getCurrencySymbol} = useCurrencyListActions();
+    const {getCurrencySymbol, convertToDisplayStringWithoutCurrency} = useCurrencyListActions();
     const icons = useMemoizedLazyExpensifyIcons(['ExpensifyWordmark']);
     const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(transactionID)}`);