+ handleSelected(value)}
+ onFocus={(e) => handleOnFocus(e)}
+ onBlur={(e) => handleOnBlur(e)}
+ onChange={(value) => handleOnChange(value)}
+ >
+ {getCountryList()}
+
+ {props.errorMessage !== '' && (
+
+ {props.errorMessage}
+
+ )}
+
+ );
+};
+
+CountryField.propTypes = {
+ countryList: PropTypes.arrayOf(
+ PropTypes.shape({
+ code: PropTypes.string,
+ name: PropTypes.string,
+ }),
+ ).isRequired,
+ errorMessage: PropTypes.string,
+ onChangeHandler: PropTypes.func.isRequired,
+ handleErrorChange: PropTypes.func.isRequired,
+ onFocusHandler: PropTypes.func.isRequired,
+ selectedCountry: PropTypes.shape({
+ displayValue: PropTypes.string,
+ countryCode: PropTypes.string,
+ }),
+};
+
+CountryField.defaultProps = {
+ errorMessage: null,
+ selectedCountry: {
+ value: '',
+ },
+};
+
+export default CountryField;
diff --git a/src/register/RegistrationFields/CountryField/constants.js b/src/register/RegistrationFields/CountryField/constants.js
new file mode 100644
index 00000000..9817ad29
--- /dev/null
+++ b/src/register/RegistrationFields/CountryField/constants.js
@@ -0,0 +1,3 @@
+export const COUNTRY_FIELD_LABEL = 'country';
+export const COUNTRY_CODE_KEY = 'code';
+export const COUNTRY_DISPLAY_KEY = 'name';
diff --git a/src/register/RegistrationFields/CountryField/validator.js b/src/register/RegistrationFields/CountryField/validator.js
new file mode 100644
index 00000000..ebba8cf0
--- /dev/null
+++ b/src/register/RegistrationFields/CountryField/validator.js
@@ -0,0 +1,28 @@
+import { COUNTRY_CODE_KEY, COUNTRY_DISPLAY_KEY } from './constants';
+
+const validateCountryField = (value, countryList, errorMessage) => {
+ let countryCode = '';
+ let displayValue = value;
+ let error = errorMessage;
+
+ if (value) {
+ const normalizedValue = value.toLowerCase();
+ // Handling a case here where user enters a valid country code that needs to be
+ // evaluated and set its value as a valid value.
+ const selectedCountry = countryList.find(
+ (country) => (
+ // When translations are applied, extra space added in country value, so we should trim that.
+ country[COUNTRY_DISPLAY_KEY].toLowerCase().trim() === normalizedValue
+ || country[COUNTRY_CODE_KEY].toLowerCase().trim() === normalizedValue
+ ),
+ );
+ if (selectedCountry) {
+ countryCode = selectedCountry[COUNTRY_CODE_KEY];
+ displayValue = selectedCountry[COUNTRY_DISPLAY_KEY];
+ error = '';
+ }
+ }
+ return { error, countryCode, displayValue };
+};
+
+export default validateCountryField;
diff --git a/src/register/RegistrationFields/EmailField/EmailField.jsx b/src/register/RegistrationFields/EmailField/EmailField.jsx
new file mode 100644
index 00000000..be836ba3
--- /dev/null
+++ b/src/register/RegistrationFields/EmailField/EmailField.jsx
@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Alert, Icon } from '@edx/paragon';
+import { Close, Error } from '@edx/paragon/icons';
+import PropTypes from 'prop-types';
+
+import { CONFIRM_EMAIL_FIELD_LABEL, EMAIL_FIELD_LABEL } from './constants';
+import validateEmail from './validator';
+import { FormGroup } from '../../../common-components';
+import { backupRegistrationFormBegin, clearRegistertionBackendError, fetchRealtimeValidations } from '../../data/actions';
+import messages from '../../messages';
+
+const EmailField = (props) => {
+ const { formatMessage } = useIntl();
+ const dispatch = useDispatch();
+
+ const {
+ handleChange,
+ handleErrorChange,
+ confirmEmailValue,
+ } = props;
+
+ const {
+ registrationFormData: backedUpFormData,
+ validationApiRateLimited,
+ } = useSelector(state => state.register);
+
+ const [emailSuggestion, setEmailSuggestion] = useState({ ...backedUpFormData?.emailSuggestion });
+
+ const handleOnBlur = (e) => {
+ const { value } = e.target;
+ const { fieldError, confirmEmailError, suggestion } = validateEmail(value, confirmEmailValue, formatMessage);
+
+ handleErrorChange(CONFIRM_EMAIL_FIELD_LABEL, confirmEmailError);
+ dispatch(backupRegistrationFormBegin({
+ ...backedUpFormData,
+ emailSuggestion: { ...suggestion },
+ }));
+ setEmailSuggestion(suggestion);
+
+ if (fieldError) {
+ handleErrorChange(EMAIL_FIELD_LABEL, fieldError);
+ } else if (!validationApiRateLimited) {
+ dispatch(fetchRealtimeValidations({ email: value }));
+ }
+ };
+
+ const handleOnFocus = () => {
+ handleErrorChange(EMAIL_FIELD_LABEL, '');
+ dispatch(clearRegistertionBackendError(EMAIL_FIELD_LABEL));
+ };
+
+ const handleSuggestionClick = (event) => {
+ event.preventDefault();
+ handleErrorChange(EMAIL_FIELD_LABEL, '');
+ handleChange({ target: { name: EMAIL_FIELD_LABEL, value: emailSuggestion.suggestion } });
+ setEmailSuggestion({ suggestion: '', type: '' });
+ };
+
+ const handleSuggestionClosed = () => setEmailSuggestion({ suggestion: '', type: '' });
+
+ const renderEmailFeedback = () => {
+ if (emailSuggestion.type === 'error') {
+ return (
+
+ {formatMessage(messages['registration.username.suggestion.label'])}
+
+ );
+
+ if (usernameSuggestions.length > 0 && errorMessage && value === ' ') {
+ className = 'username-suggestions__error';
+ iconButton =
+ {usernameSuggestions.map((username, index) => (
+
+ ))}
+
+ {iconButton}
+