fix: update paragone and country field (#1157)

Description: Update Paragon version and changed the country field implementation as per documentation
VAN-1814

package.json

@@ -39,7 +39,7 @@
     "@fortawesome/free-brands-svg-icons": "6.5.1",
     "@fortawesome/free-solid-svg-icons": "6.5.1",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "@openedx/paragon": "^21.13.1",
+    "@openedx/paragon": "^22.0.0",
     "@optimizely/react-sdk": "^2.9.1",
     "@redux-devtools/extension": "3.3.0",
     "@testing-library/react": "^12.1.5",

src/register/RegistrationFields/CountryField/CountryField.jsx

@@ -31,6 +31,13 @@ const CountryField = (props) => {
   } = props;
   const { formatMessage } = useIntl();
   const dispatch = useDispatch();
+
+  const countryFieldValue = {
+    userProvidedText: selectedCountry.displayValue,
+    selectionValue: selectedCountry.displayValue,
+    selectionId: selectedCountry.countryCode,
+  };
+
   const backendCountryCode = useSelector(state => state.register.backendCountryCode);
 
   useEffect(() => {
@@ -49,7 +56,7 @@ const CountryField = (props) => {
         { target: { name: 'country' } },
         { countryCode, displayValue: countryDisplayValue },
       );
-    } else if (!selectedCountry.countryCode) {
+    } else if (!selectedCountry.displayValue) {
       onChangeHandler(
         { target: { name: 'country' } },
         { countryCode: '', displayValue: '' },
@@ -65,30 +72,32 @@ const CountryField = (props) => {
 
     const { value } = event.target;
 
-    const { countryCode, displayValue, error } = validateCountryField(
+    const { error } = validateCountryField(
       value.trim(), countryList, formatMessage(messages['empty.country.field.error']), formatMessage(messages['invalid.country.field.error']),
     );
-
-    onChangeHandler({ target: { name: 'country' } }, { countryCode, displayValue });
     handleErrorChange('country', error);
   };
 
-  const handleSelected = (value) => {
-    handleOnBlur({ target: { name: 'country', value } });
-  };
-
   const handleOnFocus = (event) => {
     handleErrorChange('country', '');
     dispatch(clearRegistrationBackendError('country'));
     onFocusHandler(event);
   };
 
   const handleOnChange = (value) => {
-    onChangeHandler({ target: { name: 'country' } }, { countryCode: '', displayValue: value });
+    onChangeHandler({ target: { name: 'country' } }, { countryCode: value.selectionId, displayValue: value.userProvidedText });
+
+    // We have put this check because proviously we also had onSelected event handler and we call
+    // the onBlur on that event handler but now there is no such handler and we only have
+    // onChange so we check the is there is proper sectionId which only be
+    // proper one when we select it from dropdown's item otherwise its null.
+    if (value.selectionId !== '') {
+      handleOnBlur({ target: { name: 'country', value: value.userProvidedText } });
+    }
   };
 
   const getCountryList = () => countryList.map((country) => (
-    <FormAutosuggestOption key={country[COUNTRY_CODE_KEY]}>
+    <FormAutosuggestOption key={country[COUNTRY_CODE_KEY]} id={country[COUNTRY_CODE_KEY]}>
       {country[COUNTRY_DISPLAY_KEY]}
     </FormAutosuggestOption>
   ));
@@ -99,9 +108,8 @@ const CountryField = (props) => {
         floatingLabel={formatMessage(messages['registration.country.label'])}
         aria-label="form autosuggest"
         name="country"
-        value={selectedCountry.displayValue || ''}
+        value={countryFieldValue || {}}
         className={classNames({ 'form-field-error': props.errorMessage })}
-        onSelected={(value) => handleSelected(value)}
         onFocus={(e) => handleOnFocus(e)}
         onBlur={(e) => handleOnBlur(e)}
         onChange={(value) => handleOnChange(value)}

src/register/components/tests/ConfigurableRegistrationForm.test.jsx

@@ -312,6 +312,7 @@ describe('ConfigurableRegistrationForm', () => {
       });
       const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       const countryInput = container.querySelector('input[name="country"]');
+      fireEvent.change(countryInput, { target: { value: 'Pak', name: 'country' } });
       fireEvent.blur(countryInput, { target: { value: 'Pak', name: 'country' } });
 
       const submitButton = container.querySelector('button.btn-brand');

src/sass/_registration.scss

@@ -109,7 +109,7 @@
 }
 
 .form-field-error {
-  border: 2px solid var(--danger-300, #CA3A2F) !important;
+  border: 1px solid var(--danger-300, #CA3A2F) !important;
 
   input {
     border: none;