Skip to content

Commit 533512a

Browse files
butikdenbutikden
authored
Countries select implemented (#84)
1 parent d6af986 commit 533512a

File tree

4 files changed

+284
-2
lines changed

4 files changed

+284
-2
lines changed

‎src/AddressFields.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import moltin from "@moltin/sdk";
33
import { useTranslation, useAddressData } from './app-state';
44
import { PlacesSuggest } from './PlacesSuggest';
55
import { useFormik } from 'formik';
6+
import { CountriesSelect } from './CountriesSelect';
67

78
import './AddressFields.scss';
89

@@ -283,7 +284,7 @@ export const AddressFields: React.FC<CheckoutParams> = (props) => {
283284
&nbsp;
284285
{t('country')}
285286
</label>
286-
<input className="epform__input" id="country" type="text" onChange={handleChange} value={values.country} />
287+
<CountriesSelect value={values.country} onChange={handleChange} />
287288
<div className="epform__error">
288289
{errors.country ? errors.country : null}
289290
</div>

‎src/AddressForm.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useFormik } from 'formik';
44
import { useAddressData, useTranslation } from './app-state';
55
import { ReactComponent as CloseIcon } from './images/icons/ic_close.svg';
66
import Modal from 'react-responsive-modal';
7+
import { CountriesSelect } from './CountriesSelect';
78

89
import './AddressForm.scss';
910

@@ -230,7 +231,7 @@ export const AddressForm: React.FC<AddressFormParams> = (props) => {
230231
&nbsp;
231232
{t('country')}
232233
</label>
233-
<input className="epform__input" id="country" type="text" onChange={handleChange} value={values.country} />
234+
<CountriesSelect value={values.country} onChange={handleChange} />
234235
<div className="epform__error">
235236
{errors.country ? errors.country : null}
236237
</div>

‎src/CountriesSelect.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import countriesList from './data/countriesList.json';
3+
4+
interface CountriesSelectParams {
5+
value: string,
6+
onChange: (...args: any) => void,
7+
}
8+
9+
export const CountriesSelect: React.FC<CountriesSelectParams> = (props) => {
10+
const { value, onChange } = props;
11+
const sortedCountries = countriesList
12+
.sort((a, b) => {
13+
if (a['value'] > b['value']) {
14+
return 1;
15+
}
16+
return -1;
17+
});
18+
19+
return (
20+
<select id="country" name="country" className="epform__input" value={value} onChange={onChange} onBlur={onChange}>
21+
<option value="" />
22+
{sortedCountries.map(country => (
23+
<option key={country.key} value={country.key}>
24+
{country['value']}
25+
</option>
26+
))}
27+
</select>
28+
);
29+
};

‎src/data/countriesList.json‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
[
2+
{ "key": "AD", "value": "Andorra" },
3+
{ "key": "AE", "value": "United Arab Emirates" },
4+
{ "key": "AF", "value": "Afghanistan" },
5+
{ "key": "AG", "value": "Antigua and Barbuda" },
6+
{ "key": "AI", "value": "Anguilla" },
7+
{ "key": "AL", "value": "Albania" },
8+
{ "key": "AM", "value": "Armenia" },
9+
{ "key": "AO", "value": "Angola" },
10+
{ "key": "AQ", "value": "Antarctica" },
11+
{ "key": "AR", "value": "Argentina" },
12+
{ "key": "AS", "value": "American Samoa" },
13+
{ "key": "AT", "value": "Austria" },
14+
{ "key": "AU", "value": "Australia" },
15+
{ "key": "AW", "value": "Aruba" },
16+
{ "key": "AX", "value": "Åland Islands" },
17+
{ "key": "AZ", "value": "Azerbaijan" },
18+
{ "key": "BA", "value": "Bosnia and Herzegovina" },
19+
{ "key": "BB", "value": "Barbados" },
20+
{ "key": "BD", "value": "Bangladesh" },
21+
{ "key": "BE", "value": "Belgium" },
22+
{ "key": "BF", "value": "Burkina Faso" },
23+
{ "key": "BG", "value": "Bulgaria" },
24+
{ "key": "BH", "value": "Bahrain" },
25+
{ "key": "BI", "value": "Burundi" },
26+
{ "key": "BJ", "value": "Benin" },
27+
{ "key": "BL", "value": "Saint Barthélemy" },
28+
{ "key": "BM", "value": "Bermuda" },
29+
{ "key": "BN", "value": "Brunei Darussalam" },
30+
{ "key": "BO", "value": "Bolivia, Plurinational State of" },
31+
{ "key": "BQ", "value": "Bonaire, Sint Eustatius and Saba" },
32+
{ "key": "BR", "value": "Brazil" },
33+
{ "key": "BS", "value": "Bahamas" },
34+
{ "key": "BT", "value": "Bhutan" },
35+
{ "key": "BV", "value": "Bouvet Island" },
36+
{ "key": "BW", "value": "Botswana" },
37+
{ "key": "BY", "value": "Belarus" },
38+
{ "key": "BZ", "value": "Belize" },
39+
{ "key": "CA", "value": "Canada" },
40+
{ "key": "CC", "value": "Cocos (Keeling) Islands" },
41+
{ "key": "CD", "value": "Congo, Democratic Republic of the" },
42+
{ "key": "CF", "value": "Central African Republic" },
43+
{ "key": "CG", "value": "Congo" },
44+
{ "key": "CH", "value": "Switzerland" },
45+
{ "key": "CI", "value": "Côte d'Ivoire" },
46+
{ "key": "CK", "value": "Cook Islands" },
47+
{ "key": "CL", "value": "Chile" },
48+
{ "key": "CM", "value": "Cameroon" },
49+
{ "key": "CN", "value": "China" },
50+
{ "key": "CO", "value": "Colombia" },
51+
{ "key": "CR", "value": "Costa Rica" },
52+
{ "key": "CU", "value": "Cuba" },
53+
{ "key": "CV", "value": "Cabo Verde" },
54+
{ "key": "CW", "value": "Curaçao" },
55+
{ "key": "CX", "value": "Christmas Island" },
56+
{ "key": "CY", "value": "Cyprus" },
57+
{ "key": "CZ", "value": "Czechia" },
58+
{ "key": "DE", "value": "Germany" },
59+
{ "key": "DJ", "value": "Djibouti" },
60+
{ "key": "DK", "value": "Denmark" },
61+
{ "key": "DM", "value": "Dominica" },
62+
{ "key": "DO", "value": "Dominican Republic" },
63+
{ "key": "DZ", "value": "Algeria" },
64+
{ "key": "EC", "value": "Ecuador" },
65+
{ "key": "EE", "value": "Estonia" },
66+
{ "key": "EG", "value": "Egypt" },
67+
{ "key": "EH", "value": "Western Sahara" },
68+
{ "key": "ER", "value": "Eritrea" },
69+
{ "key": "ES", "value": "Spain" },
70+
{ "key": "ET", "value": "Ethiopia" },
71+
{ "key": "FI", "value": "Finland" },
72+
{ "key": "FJ", "value": "Fiji" },
73+
{ "key": "FK", "value": "Falkland Islands (Malvinas)" },
74+
{ "key": "FM", "value": "Micronesia, Federated States of" },
75+
{ "key": "FO", "value": "Faroe Islands" },
76+
{ "key": "FR", "value": "France" },
77+
{ "key": "GA", "value": "Gabon" },
78+
{ "key": "GB", "value": "United Kingdom of Great Britain and Northern Ireland" },
79+
{ "key": "GD", "value": "Grenada" },
80+
{ "key": "GE", "value": "Georgia" },
81+
{ "key": "GF", "value": "French Guiana" },
82+
{ "key": "GG", "value": "Guernsey" },
83+
{ "key": "GH", "value": "Ghana" },
84+
{ "key": "GI", "value": "Gibraltar" },
85+
{ "key": "GL", "value": "Greenland" },
86+
{ "key": "GM", "value": "Gambia" },
87+
{ "key": "GN", "value": "Guinea" },
88+
{ "key": "GP", "value": "Guadeloupe" },
89+
{ "key": "GQ", "value": "Equatorial Guinea" },
90+
{ "key": "GR", "value": "Greece" },
91+
{ "key": "GS", "value": "South Georgia and the South Sandwich Islands" },
92+
{ "key": "GT", "value": "Guatemala" },
93+
{ "key": "GU", "value": "Guam" },
94+
{ "key": "GW", "value": "Guinea-Bissau" },
95+
{ "key": "GY", "value": "Guyana" },
96+
{ "key": "HK", "value": "Hong Kong" },
97+
{ "key": "HM", "value": "Heard Island and McDonald Islands" },
98+
{ "key": "HN", "value": "Honduras" },
99+
{ "key": "HR", "value": "Croatia" },
100+
{ "key": "HT", "value": "Haiti" },
101+
{ "key": "HU", "value": "Hungary" },
102+
{ "key": "ID", "value": "Indonesia" },
103+
{ "key": "IE", "value": "Ireland" },
104+
{ "key": "IL", "value": "Israel" },
105+
{ "key": "IM", "value": "Isle of Man" },
106+
{ "key": "IN", "value": "India" },
107+
{ "key": "IO", "value": "British Indian Ocean Territory" },
108+
{ "key": "IQ", "value": "Iraq" },
109+
{ "key": "IR", "value": "Iran, Islamic Republic of" },
110+
{ "key": "IS", "value": "Iceland" },
111+
{ "key": "IT", "value": "Italy" },
112+
{ "key": "JE", "value": "Jersey" },
113+
{ "key": "JM", "value": "Jamaica" },
114+
{ "key": "JO", "value": "Jordan" },
115+
{ "key": "JP", "value": "Japan" },
116+
{ "key": "KE", "value": "Kenya" },
117+
{ "key": "KG", "value": "Kyrgyzstan" },
118+
{ "key": "KH", "value": "Cambodia" },
119+
{ "key": "KI", "value": "Kiribati" },
120+
{ "key": "KM", "value": "Comoros" },
121+
{ "key": "KN", "value": "Saint Kitts and Nevis" },
122+
{ "key": "KP", "value": "Korea, Democratic People's Republic of" },
123+
{ "key": "KR", "value": "Korea, Republic of" },
124+
{ "key": "KW", "value": "Kuwait" },
125+
{ "key": "KY", "value": "Cayman Islands" },
126+
{ "key": "KZ", "value": "Kazakhstan" },
127+
{ "key": "LA", "value": "Lao People's Democratic Republic" },
128+
{ "key": "LB", "value": "Lebanon" },
129+
{ "key": "LC", "value": "Saint Lucia" },
130+
{ "key": "LI", "value": "Liechtenstein" },
131+
{ "key": "LK", "value": "Sri Lanka" },
132+
{ "key": "LR", "value": "Liberia" },
133+
{ "key": "LS", "value": "Lesotho" },
134+
{ "key": "LT", "value": "Lithuania" },
135+
{ "key": "LU", "value": "Luxembourg" },
136+
{ "key": "LV", "value": "Latvia" },
137+
{ "key": "LY", "value": "Libya" },
138+
{ "key": "MA", "value": "Morocco" },
139+
{ "key": "MC", "value": "Monaco" },
140+
{ "key": "MD", "value": "Moldova, Republic of" },
141+
{ "key": "ME", "value": "Montenegro" },
142+
{ "key": "MF", "value": "Saint Martin, (French part)" },
143+
{ "key": "MG", "value": "Madagascar" },
144+
{ "key": "MH", "value": "Marshall Islands" },
145+
{ "key": "MK", "value": "North Macedonia" },
146+
{ "key": "ML", "value": "Mali" },
147+
{ "key": "MM", "value": "Myanmar" },
148+
{ "key": "MN", "value": "Mongolia" },
149+
{ "key": "MO", "value": "Macao" },
150+
{ "key": "MP", "value": "Northern Mariana Islands" },
151+
{ "key": "MQ", "value": "Martinique" },
152+
{ "key": "MR", "value": "Mauritania" },
153+
{ "key": "MS", "value": "Montserrat" },
154+
{ "key": "MT", "value": "Malta" },
155+
{ "key": "MU", "value": "Mauritius" },
156+
{ "key": "MV", "value": "Maldives" },
157+
{ "key": "MW", "value": "Malawi" },
158+
{ "key": "MX", "value": "Mexico" },
159+
{ "key": "MY", "value": "Malaysia" },
160+
{ "key": "MZ", "value": "Mozambique" },
161+
{ "key": "NA", "value": "Namibia" },
162+
{ "key": "NC", "value": "New Caledonia" },
163+
{ "key": "NE", "value": "Niger" },
164+
{ "key": "NF", "value": "Norfolk Island" },
165+
{ "key": "NG", "value": "Nigeria" },
166+
{ "key": "NI", "value": "Nicaragua" },
167+
{ "key": "NL", "value": "Netherlands" },
168+
{ "key": "NO", "value": "Norway" },
169+
{ "key": "NP", "value": "Nepal" },
170+
{ "key": "NR", "value": "Nauru" },
171+
{ "key": "NU", "value": "Niue" },
172+
{ "key": "NZ", "value": "New Zealand" },
173+
{ "key": "OM", "value": "Oman" },
174+
{ "key": "PA", "value": "Panama" },
175+
{ "key": "PE", "value": "Peru" },
176+
{ "key": "PF", "value": "French Polynesia" },
177+
{ "key": "PG", "value": "Papua New Guinea" },
178+
{ "key": "PH", "value": "Philippines" },
179+
{ "key": "PK", "value": "Pakistan" },
180+
{ "key": "PL", "value": "Poland" },
181+
{ "key": "PM", "value": "Saint Pierre and Miquelon" },
182+
{ "key": "PN", "value": "Pitcairn" },
183+
{ "key": "PR", "value": "Puerto Rico" },
184+
{ "key": "PS", "value": "Palestine, State of" },
185+
{ "key": "PT", "value": "Portugal" },
186+
{ "key": "PW", "value": "Palau" },
187+
{ "key": "PY", "value": "Paraguay" },
188+
{ "key": "QA", "value": "Qatar" },
189+
{ "key": "RE", "value": "Réunion" },
190+
{ "key": "RO", "value": "Romania" },
191+
{ "key": "RS", "value": "Serbia" },
192+
{ "key": "RU", "value": "Russian Federation" },
193+
{ "key": "RW", "value": "Rwanda" },
194+
{ "key": "SA", "value": "Saudi Arabia" },
195+
{ "key": "SB", "value": "Solomon Islands" },
196+
{ "key": "SC", "value": "Seychelles" },
197+
{ "key": "SD", "value": "Sudan" },
198+
{ "key": "SE", "value": "Sweden" },
199+
{ "key": "SG", "value": "Singapore" },
200+
{ "key": "SH", "value": "Saint Helena, Ascension and Tristan da Cunha" },
201+
{ "key": "SI", "value": "Slovenia" },
202+
{ "key": "SJ", "value": "Svalbard and Jan Mayen" },
203+
{ "key": "SK", "value": "Slovakia" },
204+
{ "key": "SL", "value": "Sierra Leone" },
205+
{ "key": "SM", "value": "San Marino" },
206+
{ "key": "SN", "value": "Senegal" },
207+
{ "key": "SO", "value": "Somalia" },
208+
{ "key": "SR", "value": "Surivalue" },
209+
{ "key": "SS", "value": "South Sudan" },
210+
{ "key": "ST", "value": "Sao Tome and Principe" },
211+
{ "key": "SV", "value": "El Salvador" },
212+
{ "key": "SX", "value": "Sint Maarten, (Dutch part)" },
213+
{ "key": "SY", "value": "Syrian Arab Republic" },
214+
{ "key": "SZ", "value": "Eswatini" },
215+
{ "key": "TC", "value": "Turks and Caicos Islands" },
216+
{ "key": "TD", "value": "Chad" },
217+
{ "key": "TF", "value": "French Southern Territories" },
218+
{ "key": "TG", "value": "Togo" },
219+
{ "key": "TH", "value": "Thailand" },
220+
{ "key": "TJ", "value": "Tajikistan" },
221+
{ "key": "TK", "value": "Tokelau" },
222+
{ "key": "TL", "value": "Timor-Leste" },
223+
{ "key": "TM", "value": "Turkmenistan" },
224+
{ "key": "TN", "value": "Tunisia" },
225+
{ "key": "TO", "value": "Tonga" },
226+
{ "key": "TR", "value": "Turkey" },
227+
{ "key": "TT", "value": "Trinidad and Tobago" },
228+
{ "key": "TV", "value": "Tuvalu" },
229+
{ "key": "TW", "value": "Taiwan, Province of China" },
230+
{ "key": "TZ", "value": "Tanzania, United Republic of" },
231+
{ "key": "UA", "value": "Ukraine" },
232+
{ "key": "UG", "value": "Uganda" },
233+
{ "key": "UM", "value": "United States Minor Outlying Islands" },
234+
{ "key": "US", "value": "United States of America" },
235+
{ "key": "UY", "value": "Uruguay" },
236+
{ "key": "UZ", "value": "Uzbekistan" },
237+
{ "key": "VA", "value": "Holy See" },
238+
{ "key": "VC", "value": "Saint Vincent and the Grenadines" },
239+
{ "key": "VE", "value": "Venezuela, Bolivarian Republic of" },
240+
{ "key": "VG", "value": "Virgin Islands, British" },
241+
{ "key": "VI", "value": "Virgin Islands, U.S." },
242+
{ "key": "VN", "value": "Viet Nam" },
243+
{ "key": "VU", "value": "Vanuatu" },
244+
{ "key": "WF", "value": "Wallis and Futuna" },
245+
{ "key": "WS", "value": "Samoa" },
246+
{ "key": "YE", "value": "Yemen" },
247+
{ "key": "YT", "value": "Mayotte" },
248+
{ "key": "ZA", "value": "South Africa" },
249+
{ "key": "ZM", "value": "Zambia" },
250+
{ "key": "ZW", "value": "Zimbabwe" }
251+
]

0 commit comments

Comments
 (0)