Fix/country region modal prefill issue

src/components/account/AddAccountAddress.js

@@ -122,7 +122,7 @@ class AddAccountAddress extends Component {
 
   renderRegions = () => {
     const theme = this.context;
-    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) {
@@ -131,11 +131,16 @@ class AddAccountAddress 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="Region"
             value="Region"
             data={data}
@@ -187,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,15 +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(
-      attribute === 'CurrencyCode'
-        ? option.label
-        : `${label} : ${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}