feat: add searchable country dropdown and fix dropdown UX

example/src/assets/countries.ts

@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2024 Adyen N.V.
+ * This file is open source and available under the MIT license.
+ * See the LICENSE file for more info.
+ */
+
+export type CountryInfo = {
+  name: string;
+  currency: string;
+};
+
+export const COUNTRY_DATA: Record<string, CountryInfo> = {
+  AE: { name: 'United Arab Emirates', currency: 'AED' },
+  AT: { name: 'Austria', currency: 'EUR' },
+  AU: { name: 'Australia', currency: 'AUD' },
+  BE: { name: 'Belgium', currency: 'EUR' },
+  BR: { name: 'Brazil', currency: 'BRL' },
+  CA: { name: 'Canada', currency: 'CAD' },
+  CH: { name: 'Switzerland', currency: 'CHF' },
+  CN: { name: 'China', currency: 'CNY' },
+  CZ: { name: 'Czech Republic', currency: 'CZK' },
+  DE: { name: 'Germany', currency: 'EUR' },
+  DK: { name: 'Denmark', currency: 'DKK' },
+  ES: { name: 'Spain', currency: 'EUR' },
+  FI: { name: 'Finland', currency: 'EUR' },
+  FR: { name: 'France', currency: 'EUR' },
+  GB: { name: 'United Kingdom', currency: 'GBP' },
+  HK: { name: 'Hong Kong', currency: 'HKD' },
+  ID: { name: 'Indonesia', currency: 'IDR' },
+  IN: { name: 'India', currency: 'INR' },
+  IT: { name: 'Italy', currency: 'EUR' },
+  JP: { name: 'Japan', currency: 'JPY' },
+  KE: { name: 'Kenya', currency: 'KES' },
+  KR: { name: 'South Korea', currency: 'KRW' },
+  MX: { name: 'Mexico', currency: 'MXN' },
+  MY: { name: 'Malaysia', currency: 'MYR' },
+  NL: { name: 'Netherlands', currency: 'EUR' },
+  NO: { name: 'Norway', currency: 'NOK' },
+  NZ: { name: 'New Zealand', currency: 'NZD' },
+  PH: { name: 'Philippines', currency: 'PHP' },
+  PL: { name: 'Poland', currency: 'PLN' },
+  PT: { name: 'Portugal', currency: 'EUR' },
+  RU: { name: 'Russia', currency: 'RUB' },
+  SE: { name: 'Sweden', currency: 'SEK' },
+  SG: { name: 'Singapore', currency: 'SGD' },
+  TH: { name: 'Thailand', currency: 'THB' },
+  US: { name: 'United States', currency: 'USD' },
+  VN: { name: 'Vietnam', currency: 'VND' },
+  ZA: { name: 'South Africa', currency: 'ZAR' },
+};
+
+export const COUNTRY_CODES = Object.keys(COUNTRY_DATA);
+
+export const getCountryLabel = (countryCode: string): string => {
+  const data = COUNTRY_DATA[countryCode];
+  return data ? `${data.name} - ${data.currency}` : countryCode;
+};
+
+export const getCurrency = (countryCode: string): string | undefined => {
+  return COUNTRY_DATA[countryCode]?.currency;
+};

example/src/components/Checkout/components/PaymentMethodsView.tsx

@@ -1,6 +1,6 @@
 import { useAdyenCheckout } from '@adyen/react-native';
-import { View, Text, ScrollView, ActivityIndicator } from 'react-native';
-import Styles from '../../common/Styles';
+import { Text, ActivityIndicator } from 'react-native';
+import PageScrollView from '../../common/PageScrollView';
 import PaymentMethodsList from './PaymentMethodsList';
 import DropInButton from './DropInButton';
 import PlatformPayButton from './PlatformPayButton';
@@ -37,7 +37,7 @@ const PaymentMethods = (prop: PaymentMethodsProps) => {
   }
 
   return (
-    <ScrollView>
+    <PageScrollView>
       {showDropIn && <DropInButton />}
 
       {showEmbeddedComponents && (
@@ -54,9 +54,7 @@ const PaymentMethods = (prop: PaymentMethodsProps) => {
       {showDropinBasedComponents && (
         <PaymentMethodsList paymentMethods={paymentMethods.paymentMethods} />
       )}
-
-      <View style={Styles.scrollBottomPadding} />
-    </ScrollView>
+    </PageScrollView>
   );
 };
 

example/src/components/Settings/ApplePaySettingsView.tsx

@@ -1,10 +1,11 @@
 import { useCallback, useState } from 'react';
-import { Button, ScrollView, View } from 'react-native';
+import { Button, View } from 'react-native';
 import { useAppContext } from '../../hooks/useAppContext';
 import Styles from '../common/Styles';
 import FormToggle from '../common/FormToggle';
 import FormTextInput from '../common/FormTextInput';
-import FormDropdown from '../common/FormDropdown';
+import FormDropdown from './common/FormDropdown';
+import PageScrollView from '../common/PageScrollView';
 import { ENVIRONMENT } from '../../Configuration';
 import type { ApplePaySettings } from '../../settings/types';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
@@ -54,7 +55,7 @@ const ApplePaySettingsView = ({ navigation }: Props) => {
   ]);
 
   return (
-    <ScrollView style={Styles.page}>
+    <PageScrollView>
       <FormTextInput
         title="Merchant ID"
         value={merchantID}
@@ -79,7 +80,7 @@ const ApplePaySettingsView = ({ navigation }: Props) => {
       <View style={Styles.formAction}>
         <Button title="Save" onPress={saveAndGoBack} />
       </View>
-    </ScrollView>
+    </PageScrollView>
   );
 };
 

example/src/components/Settings/CardSettingsView.tsx

@@ -1,9 +1,10 @@
 import { useCallback, useState } from 'react';
-import { Button, ScrollView, View } from 'react-native';
+import { Button, View } from 'react-native';
 import { useAppContext } from '../../hooks/useAppContext';
 import Styles from '../common/Styles';
 import FormToggle from '../common/FormToggle';
-import FormDropdown from '../common/FormDropdown';
+import FormDropdown from './common/FormDropdown';
+import PageScrollView from '../common/PageScrollView';
 import type { CardSettings } from '../../settings/types';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import type { SettingsStackParamList } from './SettingsNavigator';
@@ -73,7 +74,7 @@ const CardSettingsView = ({ navigation }: Props) => {
   ]);
 
   return (
-    <ScrollView style={Styles.page}>
+    <PageScrollView>
       <FormToggle
         title="Holder Name Required"
         value={holderNameRequired}
@@ -121,7 +122,7 @@ const CardSettingsView = ({ navigation }: Props) => {
       <View style={Styles.formAction}>
         <Button title="Save" onPress={saveAndGoBack} />
       </View>
-    </ScrollView>
+    </PageScrollView>
   );
 };
 

example/src/components/Settings/DropInSettingsView.tsx

@@ -1,9 +1,10 @@
 import { useCallback, useState } from 'react';
-import { Button, ScrollView, View } from 'react-native';
+import { Button, View } from 'react-native';
 import { useAppContext } from '../../hooks/useAppContext';
 import Styles from '../common/Styles';
 import FormToggle from '../common/FormToggle';
 import FormTextInput from '../common/FormTextInput';
+import PageScrollView from '../common/PageScrollView';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import type { SettingsStackParamList } from './SettingsNavigator';
 
@@ -44,7 +45,7 @@ const DropInSettingsView = ({ navigation }: Props) => {
   ]);
 
   return (
-    <ScrollView style={Styles.page}>
+    <PageScrollView>
       <FormToggle
         title="Show Preselected Stored Payment"
         value={showPreselected}
@@ -69,7 +70,7 @@ const DropInSettingsView = ({ navigation }: Props) => {
       <View style={Styles.formAction}>
         <Button title="Save" onPress={saveAndGoBack} />
       </View>
-    </ScrollView>
+    </PageScrollView>
   );
 };
 

example/src/components/Settings/GooglePaySettingsView.tsx

@@ -1,9 +1,10 @@
 import { useCallback, useState } from 'react';
-import { Button, ScrollView, View } from 'react-native';
+import { Button, View } from 'react-native';
 import { useAppContext } from '../../hooks/useAppContext';
 import Styles from '../common/Styles';
 import FormToggle from '../common/FormToggle';
-import FormDropdown from '../common/FormDropdown';
+import FormDropdown from './common/FormDropdown';
+import PageScrollView from '../common/PageScrollView';
 import type { GooglePaySettings } from '../../settings/types';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import type { SettingsStackParamList } from './SettingsNavigator';
@@ -70,7 +71,7 @@ const GooglePaySettingsView = ({ navigation }: Props) => {
   ]);
 
   return (
-    <ScrollView style={Styles.page}>
+    <PageScrollView>
       <FormToggle
         title="Allow Prepaid Cards"
         value={allowPrepaidCards}
@@ -110,7 +111,7 @@ const GooglePaySettingsView = ({ navigation }: Props) => {
       <View style={Styles.formAction}>
         <Button title="Save" onPress={saveAndGoBack} />
       </View>
-    </ScrollView>
+    </PageScrollView>
   );
 };
 

example/src/components/Settings/SettingsView.tsx

@@ -1,11 +1,18 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useAppContext } from '../../hooks/useAppContext';
 import Styles from '../common/Styles';
-import { Button, ScrollView, TouchableOpacity, View } from 'react-native';
+import { Button, TouchableOpacity, View } from 'react-native';
 import FormTextInput from '../common/FormTextInput';
+import FormSearchDropdown from './common/FormSearchDropdown';
+import PageScrollView from '../common/PageScrollView';
 import AdaptiveText from '../common/AdaptiveText';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import type { SettingsStackParamList } from './SettingsNavigator';
+import {
+  COUNTRY_CODES,
+  getCountryLabel,
+  getCurrency,
+} from '../../assets/countries';
 
 type Props = NativeStackScreenProps<SettingsStackParamList, 'GeneralSettings'>;
 
@@ -14,7 +21,6 @@ const SettingView = ({ navigation }: Props) => {
 
   const [countryCode, setCountryCode] = useState(configuration.countryCode);
   const [amount, setAmount] = useState(String(configuration.amount));
-  const [currency, setCurrency] = useState(configuration.currency);
   const [merchantAccount, setMerchantAccount] = useState(
     configuration.merchantAccount
   );
@@ -25,6 +31,8 @@ const SettingView = ({ navigation }: Props) => {
     configuration.shopperLocale
   );
 
+  const currency = getCurrency(countryCode) ?? configuration.currency;
+
   const settings = useMemo(
     () => ({
       ...configuration,
@@ -52,18 +60,13 @@ const SettingView = ({ navigation }: Props) => {
   }, [settings, save, navigateToRoot]);
 
   return (
-    <ScrollView style={Styles.page}>
-      <FormTextInput
+    <PageScrollView>
+      <FormSearchDropdown
         title="Country"
         value={countryCode}
-        maxLength={2}
-        onChangeText={setCountryCode}
-      />
-      <FormTextInput
-        title="Currency"
-        value={currency}
-        maxLength={3}
-        onChangeText={setCurrency}
+        options={COUNTRY_CODES}
+        onChange={setCountryCode}
+        labelExtractor={getCountryLabel}
       />
       <FormTextInput
         title="Amount"
@@ -127,7 +130,7 @@ const SettingView = ({ navigation }: Props) => {
       <View style={Styles.formAction}>
         <Button title="Save" onPress={saveAndClose} />
       </View>
-    </ScrollView>
+    </PageScrollView>
   );
 };
 

example/src/components/Settings/common/DropdownTrigger.tsx

@@ -0,0 +1,42 @@
+import { type PropsWithChildren } from 'react';
+import { TouchableOpacity, View, useColorScheme } from 'react-native';
+import Styles from '../../common/Styles';
+import AdaptiveText from '../../common/AdaptiveText';
+import Colors from '../../common/Assets';
+
+type DropdownTriggerProps = {
+  title: string;
+  label: string;
+  onPress: () => void;
+};
+
+const DropdownTrigger = ({
+  title,
+  label,
+  onPress,
+  children,
+}: PropsWithChildren<DropdownTriggerProps>) => {
+  const isDarkMode = useColorScheme() === 'dark';
+  const backgroundColor = isDarkMode
+    ? Colors.textBackgroundDark
+    : Colors.textBackgroundLight;
+  const textColor = isDarkMode ? Colors.textDark : Colors.textLight;
+
+  return (
+    <View>
+      <AdaptiveText style={Styles.paddedTitle}>{title}</AdaptiveText>
+      <TouchableOpacity
+        style={[Styles.dropdown, { backgroundColor }]}
+        onPress={onPress}
+      >
+        <AdaptiveText style={Styles.dropdownText}>{label}</AdaptiveText>
+        <AdaptiveText style={[Styles.dropdownText, { color: textColor }]}>
+          {'›'}
+        </AdaptiveText>
+      </TouchableOpacity>
+      {children}
+    </View>
+  );
+};
+
+export default DropdownTrigger;