fix: checkout country/region picker label

Author: dimaportenko

src/components/account/AddAccountAddress.js

@@ -137,6 +137,7 @@ class AddAccountAddress extends Component {
 
         return (
           <ModalSelect
+            withLabel={false}
             disabled={data.length === 0}
             key="regions"
             label={label}
@@ -191,6 +192,7 @@ class AddAccountAddress extends Component {
 
     return (
       <ModalSelect
+        withLabel={false}
         disabled={data.length === 0}
         key="countries"
         label={label}

src/components/checkout/CheckoutCustomerAccount.js

@@ -184,7 +184,7 @@ class CheckoutCustomerAccount extends Component {
   }
 
   renderRegions() {
-    const { countryId, countries } = this.props;
+    const { countryId, countries, region } = this.props;
     if (countryId && countryId.length && countries && countries.length) {
       const country = countries.find(item => item.id === countryId);
       if (country && country.available_regions) {
@@ -193,11 +193,16 @@ class CheckoutCustomerAccount extends Component {
           key: value.id,
         }));
 
+        const label = region?.region
+          ? region?.region
+          : translate('common.region');
+
         return (
           <ModalSelect
+            withLabel={false}
             disabled={data.length === 0}
             key="regions"
-            label={translate('common.region')}
+            label={label}
             attribute={translate('common.region')}
             value={translate('common.region')}
             data={data}
@@ -240,11 +245,17 @@ class CheckoutCustomerAccount extends Component {
       key: value.id,
     }));
 
+    const country = countries.find(item => item.id === countryId);
+    const label = country
+      ? country.full_name_locale
+      : translate('common.country');
+
     return (
       <ModalSelect
+        withLabel={false}
         disabled={data.length === 0}
         key="countries"
-        label={translate('common.country')}
+        label={label}
         attribute={translate('common.country')}
         value={translate('common.country')}
         data={data}

src/components/common/ModalSelect.js

@@ -4,11 +4,19 @@ import ModalSelector from 'react-native-modal-selector';
 import PropTypes from 'prop-types';
 import { Input } from './Input';
 
-const ModalSelect = ({ data, disabled, label, onChange, attribute, style }) => {
+const ModalSelect = ({
+  data,
+  disabled,
+  label,
+  onChange,
+  attribute,
+  style,
+  withLabel = true,
+}) => {
   const [value, setValue] = useState('');
 
   const _onChange = option => {
-    setValue(option.label);
+    setValue(!withLabel ? option.label : `${label} : ${option.label}`);
 
     if (onChange) {
       onChange(attribute, option.key);

src/components/home/CurrencyPicker.js

@@ -34,6 +34,7 @@ const CurrencyPicker = ({
       disabled={data.length === 0}
       label={selectedCurrencyCode}
       attribute="CurrencyCode"
+      withLabel={false}
       data={data}
       onChange={onChange}
       style={styles.currencyContainer}