feat(SelectProvider): add info text on amount spent

locales/base/translation.json

@@ -1410,6 +1410,12 @@
       "title": "New ways to transfer funds",
       "body": "We are releasing new ways to transfer funds to and from bank accounts, directly from the Valora app.\n\nIf you are seeing this, it means you are able to access this feature in your region.",
       "dismiss": "Dismiss"
+    },
+    "cashIn": {
+      "amountSpentInfo": "You'll pay <0></0> including fees"
+    },
+    "cashOut": {
+      "amountSpentInfo": "You'll withdraw <0></0> including fees"
     }
   },
   "fiatConnectLinkAccountScreen": {

src/fiatExchanges/SelectProvider.test.tsx

@@ -8,7 +8,7 @@ import { SelectProviderExchangesLink, SelectProviderExchangesText } from 'src/fi
 import { LocalCurrencyCode } from 'src/localCurrency/consts'
 import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
-import { getExperimentParams } from 'src/statsig'
+import { getExperimentParams, getFeatureGate } from 'src/statsig'
 import { ExperimentConfigs } from 'src/statsig/constants'
 import { StatsigExperiments } from 'src/statsig/types'
 import { CiCoCurrency, Currency } from 'src/utils/currencies'
@@ -112,6 +112,7 @@ describe(SelectProviderScreen, () => {
       addFundsExchangesText: SelectProviderExchangesText.CryptoExchange,
       addFundsExchangesLink: SelectProviderExchangesLink.ExternalExchangesScreen,
     })
+    mocked(getFeatureGate).mockReturnValue(false)
   })
 
   it('calls fetchProviders correctly', async () => {
@@ -156,7 +157,7 @@ describe(SelectProviderScreen, () => {
         quotes: [mockFiatConnectQuotes[4]],
       },
     })
-    const { queryByText, getByTestId, getByText } = render(
+    const { queryByTestId, queryByText, getByTestId, getByText } = render(
       <Provider store={mockStore}>
         <SelectProviderScreen {...mockScreenProps()} />
       </Provider>
@@ -171,6 +172,55 @@ describe(SelectProviderScreen, () => {
 
     expect(queryByText('selectProviderScreen.somePaymentsUnavailable')).toBeFalsy()
     expect(getByText('selectProviderScreen.disclaimer')).toBeTruthy()
+    expect(queryByTestId('AmountSpentInfo')).toBeFalsy()
+  })
+  it('shows you will pay fiat amount for cash ins if feature flag is true', async () => {
+    mocked(fetchProviders).mockResolvedValue(mockProviders)
+    mocked(fetchLegacyMobileMoneyProviders).mockResolvedValue(mockLegacyProviders)
+    mocked(fetchExchanges).mockResolvedValue(mockExchanges)
+    mocked(getFeatureGate).mockReturnValue(true)
+    mockStore = createMockStore({
+      ...MOCK_STORE_DATA,
+      fiatConnect: {
+        quotesError: null,
+        quotesLoading: false,
+        quotes: [mockFiatConnectQuotes[4]],
+      },
+    })
+    const { getByTestId, getByText } = render(
+      <Provider store={mockStore}>
+        <SelectProviderScreen {...mockScreenProps()} />
+      </Provider>
+    )
+    await waitFor(() => expect(fetchLegacyMobileMoneyProviders).toHaveBeenCalled())
+
+    expect(getByTestId('AmountSpentInfo')).toBeTruthy()
+    expect(getByText(/selectProviderScreen.cashIn.amountSpentInfo/)).toBeTruthy()
+    expect(getByTestId('AmountSpentInfo/Fiat/value')).toBeTruthy()
+  })
+  it('shows you will withdraw crypto amount for cash outs if feature flag is true', async () => {
+    mocked(fetchProviders).mockResolvedValue(mockProviders)
+    mocked(fetchLegacyMobileMoneyProviders).mockResolvedValue(mockLegacyProviders)
+    mocked(fetchExchanges).mockResolvedValue(mockExchanges)
+    mocked(getFeatureGate).mockReturnValue(true)
+    mockStore = createMockStore({
+      ...MOCK_STORE_DATA,
+      fiatConnect: {
+        quotesError: null,
+        quotesLoading: false,
+        quotes: [mockFiatConnectQuotes[4]],
+      },
+    })
+    const { getByTestId, getByText } = render(
+      <Provider store={mockStore}>
+        <SelectProviderScreen {...mockScreenProps(CICOFlow.CashOut)} />
+      </Provider>
+    )
+    await waitFor(() => expect(fetchLegacyMobileMoneyProviders).toHaveBeenCalled())
+
+    expect(getByTestId('AmountSpentInfo')).toBeTruthy()
+    expect(getByText(/selectProviderScreen.cashOut.amountSpentInfo/)).toBeTruthy()
+    expect(getByTestId('AmountSpentInfo/Crypto')).toBeTruthy()
   })
   it('shows the limit payment methods dialog when one of the provider types has no options', async () => {
     mocked(fetchProviders).mockResolvedValue([mockProviders[2]])

src/fiatExchanges/SelectProvider.tsx

@@ -17,6 +17,11 @@ import TextButton from 'src/components/TextButton'
 import Touchable from 'src/components/Touchable'
 import { CoinbasePaymentSection } from 'src/fiatExchanges/CoinbasePaymentSection'
 import { ExternalExchangeProvider } from 'src/fiatExchanges/ExternalExchanges'
+import {
+  PaymentMethodSection,
+  PaymentMethodSectionMethods,
+} from 'src/fiatExchanges/PaymentMethodSection'
+import { CryptoAmount, FiatAmount } from 'src/fiatExchanges/amount'
 import { normalizeQuotes } from 'src/fiatExchanges/quotes/normalizeQuotes'
 import {
   ProviderSelectionAnalyticsData,
@@ -31,10 +36,6 @@ import {
   selectFiatConnectQuoteLoadingSelector,
 } from 'src/fiatconnect/selectors'
 import { fetchFiatConnectProviders, fetchFiatConnectQuotes } from 'src/fiatconnect/slice'
-import {
-  PaymentMethodSection,
-  PaymentMethodSectionMethods,
-} from 'src/fiatExchanges/PaymentMethodSection'
 import { readOnceFromFirebase } from 'src/firebase/firebase'
 import i18n from 'src/i18n'
 import {
@@ -46,9 +47,9 @@ import { navigate } from 'src/navigator/NavigationService'
 import { Screens } from 'src/navigator/Screens'
 import { StackParamList } from 'src/navigator/types'
 import { userLocationDataSelector } from 'src/networkInfo/selectors'
-import { getExperimentParams } from 'src/statsig'
+import { getExperimentParams, getFeatureGate } from 'src/statsig'
 import { ExperimentConfigs } from 'src/statsig/constants'
-import { StatsigExperiments } from 'src/statsig/types'
+import { StatsigExperiments, StatsigFeatureGates } from 'src/statsig/types'
 import colors from 'src/styles/colors'
 import fontStyles from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
@@ -271,8 +272,13 @@ export default function SelectProviderScreen({ route, navigation }: Props) {
     cryptoType: digitalAsset,
   })
 
+  const showReceiveAmount = getFeatureGate(
+    StatsigFeatureGates.SHOW_RECEIVE_AMOUNT_IN_SELECT_PROVIDER
+  )
+
   return (
     <ScrollView>
+      {showReceiveAmount && <AmountSpentInfo {...route.params} />}
       {paymentMethodSections.map((paymentMethod) => (
         <PaymentMethodSection
           key={paymentMethod}
@@ -319,6 +325,37 @@ export default function SelectProviderScreen({ route, navigation }: Props) {
   )
 }
 
+function AmountSpentInfo({ flow, selectedCrypto, amount }: Props['route']['params']) {
+  const localCurrency = useSelector(getLocalCurrencyCode)
+  return (
+    <View style={styles.amountSpentInfo} testID="AmountSpentInfo">
+      <Text style={styles.amountSpentInfoText}>
+        <Trans
+          i18nKey={
+            flow === CICOFlow.CashIn
+              ? 'selectProviderScreen.cashIn.amountSpentInfo'
+              : 'selectProviderScreen.cashOut.amountSpentInfo'
+          }
+        >
+          {flow === CICOFlow.CashIn ? (
+            <FiatAmount
+              amount={amount.fiat}
+              currency={localCurrency}
+              testID="AmountSpentInfo/Fiat"
+            />
+          ) : (
+            <CryptoAmount
+              amount={amount.crypto}
+              currency={selectedCrypto}
+              testID="AmountSpentInfo/Crypto"
+            />
+          )}
+        </Trans>
+      </Text>
+    </View>
+  )
+}
+
 function LimitedPaymentMethods({ flow }: { flow: CICOFlow }) {
   const { t } = useTranslation()
   const [isDialogVisible, setIsDialogVisible] = useState(false)
@@ -571,6 +608,17 @@ const styles = StyleSheet.create({
     color: colors.gray4,
     padding: Spacing.Smallest8,
   },
+  amountSpentInfo: {
+    marginHorizontal: 16,
+    marginBottom: 8,
+    padding: 16,
+    backgroundColor: colors.gray1,
+    borderRadius: 16,
+  },
+  amountSpentInfoText: {
+    textAlign: 'center',
+    ...fontStyles.xsmall600,
+  },
 })
 SelectProviderScreen.navigationOptions = ({
   route,

src/fiatExchanges/amount.test.tsx

@@ -0,0 +1,49 @@
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { Provider } from 'react-redux'
+import CurrencyDisplay from 'src/components/CurrencyDisplay'
+import TokenDisplay from 'src/components/TokenDisplay'
+import { CryptoAmount, FiatAmount } from 'src/fiatExchanges/amount'
+import { CiCoCurrency } from 'src/utils/currencies'
+import { createMockStore } from 'test/utils'
+import { mockCusdAddress } from 'test/values'
+
+jest.mock('src/components/TokenDisplay')
+jest.mock('src/components/CurrencyDisplay')
+
+describe('CryptoAmount', () => {
+  it('passes amount and token address to TokenDisplay', () => {
+    render(
+      <Provider store={createMockStore()}>
+        <CryptoAmount amount={10} currency={CiCoCurrency.cUSD} testID="cryptoAmt" />
+      </Provider>
+    )
+    expect(TokenDisplay).toHaveBeenCalledWith(
+      {
+        amount: 10,
+        showLocalAmount: false,
+        testID: 'cryptoAmt',
+        tokenAddress: mockCusdAddress,
+      },
+      {}
+    )
+  })
+})
+
+describe('FiatAmount', () => {
+  it('passes amount and currency to CurrencyDisplay', () => {
+    render(<FiatAmount amount={20} currency="USD" testID="fiatAmt" />)
+
+    expect(CurrencyDisplay).toHaveBeenCalledWith(
+      expect.objectContaining({
+        amount: {
+          value: 0,
+          currencyCode: '',
+          localAmount: { value: 20, currencyCode: 'USD', exchangeRate: 1 },
+        },
+        testID: 'fiatAmt',
+      }),
+      {}
+    )
+  })
+})

src/fiatExchanges/amount.tsx

@@ -0,0 +1,50 @@
+import BigNumber from 'bignumber.js'
+import React from 'react'
+import CurrencyDisplay, { FormatType } from 'src/components/CurrencyDisplay'
+import TokenDisplay from 'src/components/TokenDisplay'
+import { useTokenInfoBySymbol } from 'src/tokens/hooks'
+import { CiCoCurrency } from 'src/utils/currencies'
+
+export function CryptoAmount({
+  amount,
+  currency,
+  testID,
+}: {
+  amount: BigNumber.Value
+  currency: CiCoCurrency
+  testID?: string
+}) {
+  const { address } = useTokenInfoBySymbol(currency)!
+  return (
+    <TokenDisplay amount={amount} tokenAddress={address} showLocalAmount={false} testID={testID} />
+  )
+}
+
+export function FiatAmount({
+  amount,
+  currency,
+  testID,
+  formatType,
+}: {
+  amount: BigNumber.Value
+  currency: string
+  testID?: string
+  formatType?: FormatType
+}) {
+  return (
+    <CurrencyDisplay
+      amount={{
+        // The value and currencyCode here doesn't matter since the component will use `localAmount`
+        value: 0,
+        currencyCode: '',
+        localAmount: {
+          value: amount,
+          currencyCode: currency,
+          exchangeRate: 1,
+        },
+      }}
+      formatType={formatType}
+      testID={testID}
+    />
+  )
+}

src/fiatconnect/ReviewScreen.tsx

@@ -11,10 +11,9 @@ import ValoraAnalytics from 'src/analytics/ValoraAnalytics'
 import BackButton from 'src/components/BackButton'
 import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
 import CancelButton from 'src/components/CancelButton'
-import CurrencyDisplay, { FormatType } from 'src/components/CurrencyDisplay'
+import { FormatType } from 'src/components/CurrencyDisplay'
 import Dialog from 'src/components/Dialog'
 import LineItemRow from 'src/components/LineItemRow'
-import TokenDisplay from 'src/components/TokenDisplay'
 import Touchable from 'src/components/Touchable'
 import { estimateFee, FeeEstimateState, FeeType } from 'src/fees/reducer'
 import { feeEstimatesSelector } from 'src/fees/selectors'
@@ -24,6 +23,7 @@ import {
   fiatConnectQuotesLoadingSelector,
 } from 'src/fiatconnect/selectors'
 import { createFiatConnectTransfer, refetchQuote } from 'src/fiatconnect/slice'
+import { CryptoAmount, FiatAmount } from 'src/fiatExchanges/amount'
 import { navigateToFiatExchangeStart } from 'src/fiatExchanges/navigator'
 import FiatConnectQuote from 'src/fiatExchanges/quotes/FiatConnectQuote'
 import { CICOFlow } from 'src/fiatExchanges/utils'
@@ -320,50 +320,6 @@ function ReceiveAmount({
   )
 }
 
-function CryptoAmount({
-  amount,
-  currency,
-  testID,
-}: {
-  amount: BigNumber.Value
-  currency: CiCoCurrency
-  testID: string
-}) {
-  const { address } = useTokenInfoBySymbol(currency)!
-  return (
-    <TokenDisplay amount={amount} tokenAddress={address} showLocalAmount={false} testID={testID} />
-  )
-}
-
-function FiatAmount({
-  amount,
-  currency,
-  testID,
-  formatType,
-}: {
-  amount: BigNumber.Value
-  currency: string
-  testID: string
-  formatType?: FormatType
-}) {
-  return (
-    <CurrencyDisplay
-      amount={{
-        // The value and currencyCode here doesn't matter since the component will use `localAmount`
-        value: 0,
-        currencyCode: '',
-        localAmount: {
-          value: amount,
-          currencyCode: currency,
-          exchangeRate: 1,
-        },
-      }}
-      formatType={formatType}
-      testID={testID}
-    />
-  )
-}
-
 function getDisplayAmounts({
   flow,
   normalizedQuote,

src/statsig/constants.ts

@@ -28,6 +28,7 @@ export const FeatureGates = {
   [StatsigFeatureGates.SHOW_CLAIM_SHORTCUTS]: false,
   [StatsigFeatureGates.APP_REVIEW]: false,
   [StatsigFeatureGates.SHOW_IN_APP_NFT_VIEWER]: false,
+  [StatsigFeatureGates.SHOW_RECEIVE_AMOUNT_IN_SELECT_PROVIDER]: false,
 }
 
 export const ExperimentConfigs = {

src/statsig/types.ts

@@ -22,6 +22,7 @@ export enum StatsigFeatureGates {
   SHOW_CLAIM_SHORTCUTS = 'show_claim_shortcuts',
   APP_REVIEW = 'app_review',
   SHOW_IN_APP_NFT_VIEWER = 'show_in_app_nft_viewer',
+  SHOW_RECEIVE_AMOUNT_IN_SELECT_PROVIDER = 'show_receive_amount_in_select_provider',
 }
 
 export enum StatsigExperiments {