@openedx/frontend-app-authn 1.0.0-alpha.6 → 1.0.0-alpha.8

package/dist/progressive-profiling/components/ProgressiveProfilingContext.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState, useCallback } from 'react';
+import { DEFAULT_STATE, } from '../../data/constants';
+const ProgressiveProfilingContext = createContext(undefined);
+export const ProgressiveProfilingProvider = ({ children }) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const [showError, setShowError] = useState(false);
+    const [success, setSuccess] = useState(false);
+    const [submitState, setSubmitState] = useState(DEFAULT_STATE);
+    const setLoading = useCallback((loading) => {
+        setIsLoading(loading);
+        if (loading) {
+            setShowError(false);
+            setSuccess(false);
+        }
+    }, []);
+    const clearState = useCallback(() => {
+        setIsLoading(false);
+        setShowError(false);
+        setSuccess(false);
+    }, []);
+    const value = useMemo(() => ({
+        isLoading,
+        showError,
+        success,
+        setLoading,
+        setShowError,
+        setSuccess,
+        clearState,
+        submitState,
+        setSubmitState,
+    }), [
+        isLoading,
+        showError,
+        success,
+        setLoading,
+        setShowError,
+        setSuccess,
+        clearState,
+        submitState,
+        setSubmitState,
+    ]);
+    return (_jsx(ProgressiveProfilingContext.Provider, { value: value, children: children }));
+};
+export const useProgressiveProfilingContext = () => {
+    const context = useContext(ProgressiveProfilingContext);
+    if (context === undefined) {
+        throw new Error('useProgressiveProfilingContext must be used within a ProgressiveProfilingProvider');
+    }
+    return context;
+};
+//# sourceMappingURL=ProgressiveProfilingContext.js.map

package/dist/progressive-profiling/components/ProgressiveProfilingContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressiveProfilingContext.js","sourceRoot":"","sources":["../../../src/progressive-profiling/components/ProgressiveProfilingContext.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAiB,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEjG,OAAO,EACL,aAAa,GACd,MAAM,sBAAsB,CAAC;AAc9B,MAAM,2BAA2B,GAAG,aAAa,CAA8C,SAAS,CAAC,CAAC;AAM1G,MAAM,CAAC,MAAM,4BAA4B,GAA0C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAClG,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,aAAa,CAAC,CAAC;IAEtE,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,OAAgB,EAAE,EAAE;QAClD,YAAY,CAAC,OAAO,CAAC,CAAC;QACtB,IAAI,OAAO,EAAE,CAAC;YACZ,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC3B,SAAS;QACT,SAAS;QACT,OAAO;QACP,UAAU;QACV,YAAY;QACZ,UAAU;QACV,UAAU;QACV,WAAW;QACX,cAAc;KACf,CAAC,EAAE;QACF,SAAS;QACT,SAAS;QACT,OAAO;QACP,UAAU;QACV,YAAY;QACZ,UAAU;QACV,UAAU;QACV,WAAW;QACX,cAAc;KACf,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,2BAA2B,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAC/C,QAAQ,GAC4B,CACxC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,8BAA8B,GAAG,GAAoC,EAAE;IAClF,MAAM,OAAO,GAAG,UAAU,CAAC,2BAA2B,CAAC,CAAC;IACxD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,mFAAmF,CAAC,CAAC;IACvG,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["import { createContext, FC, ReactNode, useContext, useMemo, useState, useCallback } from 'react';\n\nimport {\n  DEFAULT_STATE,\n} from '../../data/constants';\n\ninterface ProgressiveProfilingContextType {\n  isLoading: boolean,\n  showError: boolean,\n  success: boolean,\n  submitState?: string,\n  setLoading: (loading: boolean) => void,\n  setShowError: (showError: boolean) => void,\n  setSuccess: (success: boolean) => void,\n  setSubmitState: (state: string) => void,\n  clearState: () => void,\n}\n\nconst ProgressiveProfilingContext = createContext<ProgressiveProfilingContextType | undefined>(undefined);\n\ninterface ProgressiveProfilingProviderProps {\n  children: ReactNode,\n}\n\nexport const ProgressiveProfilingProvider: FC<ProgressiveProfilingProviderProps> = ({ children }) => {\n  const [isLoading, setIsLoading] = useState(false);\n  const [showError, setShowError] = useState(false);\n  const [success, setSuccess] = useState(false);\n  const [submitState, setSubmitState] = useState<string>(DEFAULT_STATE);\n\n  const setLoading = useCallback((loading: boolean) => {\n    setIsLoading(loading);\n    if (loading) {\n      setShowError(false);\n      setSuccess(false);\n    }\n  }, []);\n\n  const clearState = useCallback(() => {\n    setIsLoading(false);\n    setShowError(false);\n    setSuccess(false);\n  }, []);\n\n  const value = useMemo(() => ({\n    isLoading,\n    showError,\n    success,\n    setLoading,\n    setShowError,\n    setSuccess,\n    clearState,\n    submitState,\n    setSubmitState,\n  }), [\n    isLoading,\n    showError,\n    success,\n    setLoading,\n    setShowError,\n    setSuccess,\n    clearState,\n    submitState,\n    setSubmitState,\n  ]);\n\n  return (\n    <ProgressiveProfilingContext.Provider value={value}>\n      {children}\n    </ProgressiveProfilingContext.Provider>\n  );\n};\n\nexport const useProgressiveProfilingContext = (): ProgressiveProfilingContextType => {\n  const context = useContext(ProgressiveProfilingContext);\n  if (context === undefined) {\n    throw new Error('useProgressiveProfilingContext must be used within a ProgressiveProfilingProvider');\n  }\n  return context;\n};\n"]}

package/dist/progressive-profiling/data/api.d.ts

@@ -0,0 +1,2 @@
+declare const patchAccount: (username: any, commitValues: any) => Promise<void>;
+export { patchAccount, };

package/dist/progressive-profiling/data/{service.js → api.js}

@@ -8,16 +8,15 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { getAuthenticatedHttpClient, getSiteConfig } from '@openedx/frontend-base';
-export function patchAccount(username, commitValues) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const requestConfig = {
-            headers: { 'Content-Type': 'application/merge-patch+json' },
-        };
-        yield getAuthenticatedHttpClient()
-            .patch(`${getSiteConfig().lmsBaseUrl}/api/user/v1/accounts/${username}`, commitValues, requestConfig)
-            .catch((error) => {
-            throw (error);
-        });
+const patchAccount = (username, commitValues) => __awaiter(void 0, void 0, void 0, function* () {
+    const requestConfig = {
+        headers: { 'Content-Type': 'application/merge-patch+json' },
+    };
+    yield getAuthenticatedHttpClient()
+        .patch(`${getSiteConfig().lmsBaseUrl}/api/user/v1/accounts/${username}`, commitValues, requestConfig)
+        .catch((error) => {
+        throw (error);
     });
-}
-//# sourceMappingURL=service.js.map
+});
+export { patchAccount, };
+//# sourceMappingURL=api.js.map

package/dist/progressive-profiling/data/api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.js","sourceRoot":"","sources":["../../../src/progressive-profiling/data/api.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEnF,MAAM,YAAY,GAAG,CAAO,QAAQ,EAAE,YAAY,EAAE,EAAE;IACpD,MAAM,aAAa,GAAG;QACpB,OAAO,EAAE,EAAE,cAAc,EAAE,8BAA8B,EAAE;KAC5D,CAAC;IAEF,MAAM,0BAA0B,EAAE;SAC/B,KAAK,CACJ,GAAG,aAAa,EAAE,CAAC,UAAU,yBAAyB,QAAQ,EAAE,EAChE,YAAY,EACZ,aAAa,CACd;SACA,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;QACf,MAAM,CAAC,KAAK,CAAC,CAAC;IAChB,CAAC,CAAC,CAAC;AACP,CAAC,CAAA,CAAC;AAEF,OAAO,EACL,YAAY,GACb,CAAC","sourcesContent":["import { getAuthenticatedHttpClient, getSiteConfig } from '@openedx/frontend-base';\n\nconst patchAccount = async (username, commitValues) => {\n  const requestConfig = {\n    headers: { 'Content-Type': 'application/merge-patch+json' },\n  };\n\n  await getAuthenticatedHttpClient()\n    .patch(\n      `${getSiteConfig().lmsBaseUrl}/api/user/v1/accounts/${username}`,\n      commitValues,\n      requestConfig,\n    )\n    .catch((error) => {\n      throw (error);\n    });\n};\n\nexport {\n  patchAccount,\n};\n"]}

package/dist/progressive-profiling/data/apiHook.d.ts

@@ -0,0 +1,10 @@
+interface SaveUserProfilePayload {
+    username: string;
+    data: Record<string, any>;
+}
+interface UseSaveUserProfileOptions {
+    onSuccess?: () => void;
+    onError?: (error: unknown) => void;
+}
+declare const useSaveUserProfile: (options?: UseSaveUserProfileOptions) => import("@tanstack/react-query").UseMutationResult<void, unknown, SaveUserProfilePayload, unknown>;
+export { useSaveUserProfile, };

package/dist/progressive-profiling/data/apiHook.js

@@ -0,0 +1,36 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useMutation } from '@tanstack/react-query';
+import { patchAccount } from './api';
+import { COMPLETE_STATE, DEFAULT_STATE, } from '../../data/constants';
+import { useProgressiveProfilingContext } from '../components/ProgressiveProfilingContext';
+const useSaveUserProfile = (options = {}) => {
+    const { setSuccess, setSubmitState } = useProgressiveProfilingContext();
+    return useMutation({
+        mutationFn: (_a) => __awaiter(void 0, [_a], void 0, function* ({ username, data }) {
+            return (patchAccount(username, data));
+        }),
+        onSuccess: () => {
+            setSuccess(true);
+            setSubmitState(COMPLETE_STATE);
+            if (options.onSuccess) {
+                options.onSuccess();
+            }
+        },
+        onError: (error) => {
+            setSubmitState(DEFAULT_STATE);
+            if (options.onError) {
+                options.onError(error);
+            }
+        },
+    });
+};
+export { useSaveUserProfile, };
+//# sourceMappingURL=apiHook.js.map

package/dist/progressive-profiling/data/apiHook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"apiHook.js","sourceRoot":"","sources":["../../../src/progressive-profiling/data/apiHook.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EACL,cAAc,EAAE,aAAa,GAC9B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,8BAA8B,EAAE,MAAM,2CAA2C,CAAC;AAY3F,MAAM,kBAAkB,GAAG,CAAC,UAAqC,EAAE,EAAE,EAAE;IACrE,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,8BAA8B,EAAE,CAAC;IACxE,OAAO,WAAW,CAAC;QACjB,UAAU,EAAE,KAAmD,EAAE,4CAA9C,EAAE,QAAQ,EAAE,IAAI,EAA0B;YAAK,OAAA,CAChE,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,CAC7B,CAAA;UAAA;QACD,SAAS,EAAE,GAAG,EAAE;YACd,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,cAAc,CAAC,cAAc,CAAC,CAAC;YAC/B,IAAI,OAAO,CAAC,SAAS,EAAE,CAAC;gBACtB,OAAO,CAAC,SAAS,EAAE,CAAC;YACtB,CAAC;QACH,CAAC;QACD,OAAO,EAAE,CAAC,KAAc,EAAE,EAAE;YAC1B,cAAc,CAAC,aAAa,CAAC,CAAC;YAC9B,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;gBACpB,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACzB,CAAC;QACH,CAAC;KACF,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,OAAO,EACL,kBAAkB,GACnB,CAAC","sourcesContent":["import { useMutation } from '@tanstack/react-query';\n\nimport { patchAccount } from './api';\nimport {\n  COMPLETE_STATE, DEFAULT_STATE,\n} from '../../data/constants';\nimport { useProgressiveProfilingContext } from '../components/ProgressiveProfilingContext';\n\ninterface SaveUserProfilePayload {\n  username: string,\n  data: Record<string, any>,\n}\n\ninterface UseSaveUserProfileOptions {\n  onSuccess?: () => void,\n  onError?: (error: unknown) => void,\n}\n\nconst useSaveUserProfile = (options: UseSaveUserProfileOptions = {}) => {\n  const { setSuccess, setSubmitState } = useProgressiveProfilingContext();\n  return useMutation({\n    mutationFn: async ({ username, data }: SaveUserProfilePayload) => (\n      patchAccount(username, data)\n    ),\n    onSuccess: () => {\n      setSuccess(true);\n      setSubmitState(COMPLETE_STATE);\n      if (options.onSuccess) {\n        options.onSuccess();\n      }\n    },\n    onError: (error: unknown) => {\n      setSubmitState(DEFAULT_STATE);\n      if (options.onError) {\n        options.onError(error);\n      }\n    },\n  });\n};\n\nexport {\n  useSaveUserProfile,\n};\n"]}

package/dist/progressive-profiling/index.d.ts

@@ -1,4 +1,2 @@
 export const storeName: "welcomePage";
 export { default as ProgressiveProfiling } from "./ProgressiveProfiling";
-export { default as reducer } from "./data/reducers";
-export { default as saga } from "./data/sagas";

package/dist/progressive-profiling/index.js

@@ -1,5 +1,3 @@
 export const storeName = 'welcomePage';
 export { default as ProgressiveProfiling } from './ProgressiveProfiling';
-export { default as reducer } from './data/reducers';
-export { default as saga } from './data/sagas';
 //# sourceMappingURL=index.js.map

package/dist/progressive-profiling/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/progressive-profiling/index.js"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CAAC;AAEvC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export const storeName = 'welcomePage';\n\nexport { default as ProgressiveProfiling } from './ProgressiveProfiling';\nexport { default as reducer } from './data/reducers';\nexport { default as saga } from './data/sagas';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/progressive-profiling/index.js"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export const storeName = 'welcomePage';\nexport { default as ProgressiveProfiling } from './ProgressiveProfiling';\n"]}

package/dist/register/RegistrationFields/CountryField/CountryField.d.ts

@@ -5,7 +5,7 @@ export default CountryField;
  * - handleErrorChange for setting error
  *
  * It is responsible for
- * - Auto populating country field if backendCountryCode is available in redux
+ * - Auto populating country field if backendCountryCode is available in context
  * - Performing country field validations
  * - clearing error on focus
  * - setting value on change and selection

package/dist/register/RegistrationFields/CountryField/CountryField.js

@@ -1,20 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from '@openedx/frontend-base';
 import { FormAutosuggest, FormAutosuggestOption, FormControlFeedback } from '@openedx/paragon';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import { clearRegistrationBackendError } from '../../data/actions';
-import messages from '../../messages';
 import validateCountryField, { COUNTRY_CODE_KEY, COUNTRY_DISPLAY_KEY } from './validator';
+import { useRegisterContext } from '../../components/RegisterContext';
+import messages from '../../messages';
 /**
  * Country field wrapper. It accepts following handlers
  * - handleChange for setting value change and
  * - handleErrorChange for setting error
  *
  * It is responsible for
- * - Auto populating country field if backendCountryCode is available in redux
+ * - Auto populating country field if backendCountryCode is available in context
  * - Performing country field validations
  * - clearing error on focus
  * - setting value on change and selection
@@ -22,13 +21,12 @@ import validateCountryField, { COUNTRY_CODE_KEY, COUNTRY_DISPLAY_KEY } from './v
 const CountryField = (props) => {
     const { countryList, selectedCountry, onChangeHandler, handleErrorChange, onFocusHandler, } = props;
     const { formatMessage } = useIntl();
-    const dispatch = useDispatch();
+    const { clearRegistrationBackendError, backendCountryCode, } = useRegisterContext();
     const countryFieldValue = {
         userProvidedText: selectedCountry.displayValue,
         selectionValue: selectedCountry.displayValue,
         selectionId: selectedCountry.countryCode,
     };
-    const backendCountryCode = useSelector(state => state.register.backendCountryCode);
     useEffect(() => {
         if (backendCountryCode && backendCountryCode !== (selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.countryCode)) {
             let countryCode = '';
@@ -55,7 +53,7 @@ const CountryField = (props) => {
     };
     const handleOnFocus = (event) => {
         handleErrorChange('country', '');
-        dispatch(clearRegistrationBackendError('country'));
+        clearRegistrationBackendError('country');
         onFocusHandler(event);
     };
     const handleOnChange = (value) => {

package/dist/register/RegistrationFields/CountryField/CountryField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CountryField.js","sourceRoot":"","sources":["../../../../src/register/RegistrationFields/CountryField/CountryField.jsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport { useIntl } from '@openedx/frontend-base';\nimport { FormAutosuggest, FormAutosuggestOption, FormControlFeedback } from '@openedx/paragon';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport { clearRegistrationBackendError } from '../../data/actions';\nimport messages from '../../messages';\nimport validateCountryField, { COUNTRY_CODE_KEY, COUNTRY_DISPLAY_KEY } from './validator';\n\n/**\n * Country field wrapper. It accepts following handlers\n * - handleChange for setting value change and\n * - handleErrorChange for setting error\n *\n * It is responsible for\n * - Auto populating country field if backendCountryCode is available in redux\n * - Performing country field validations\n * - clearing error on focus\n * - setting value on change and selection\n */\nconst CountryField = (props) => {\n  const {\n    countryList,\n    selectedCountry,\n    onChangeHandler,\n    handleErrorChange,\n    onFocusHandler,\n  } = props;\n  const { formatMessage } = useIntl();\n  const dispatch = useDispatch();\n\n  const countryFieldValue = {\n    userProvidedText: selectedCountry.displayValue,\n    selectionValue: selectedCountry.displayValue,\n    selectionId: selectedCountry.countryCode,\n  };\n\n  const backendCountryCode = useSelector(state => state.register.backendCountryCode);\n\n  useEffect(() => {\n    if (backendCountryCode && backendCountryCode !== selectedCountry?.countryCode) {\n      let countryCode = '';\n      let countryDisplayValue = '';\n\n      const countryVal = countryList.find(\n        (country) => (country[COUNTRY_CODE_KEY].toLowerCase() === backendCountryCode.toLowerCase()),\n      );\n      if (countryVal) {\n        countryCode = countryVal[COUNTRY_CODE_KEY];\n        countryDisplayValue = countryVal[COUNTRY_DISPLAY_KEY];\n      }\n      onChangeHandler(\n        { target: { name: 'country' } },\n        { countryCode, displayValue: countryDisplayValue },\n      );\n    } else if (!selectedCountry.displayValue) {\n      onChangeHandler(\n        { target: { name: 'country' } },\n        { countryCode: '', displayValue: '' },\n      );\n    }\n  }, [backendCountryCode, countryList]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleOnBlur = (event) => {\n    // Do not run validations when drop-down arrow is clicked\n    if (event.relatedTarget && event.relatedTarget.className.includes('pgn__form-autosuggest__icon-button')) {\n      return;\n    }\n\n    const { value } = event.target;\n\n    const { error } = validateCountryField(\n      value.trim(),\n      countryList,\n      formatMessage(messages['empty.country.field.error']),\n      formatMessage(messages['invalid.country.field.error'])\n    );\n    handleErrorChange('country', error);\n  };\n\n  const handleOnFocus = (event) => {\n    handleErrorChange('country', '');\n    dispatch(clearRegistrationBackendError('country'));\n    onFocusHandler(event);\n  };\n\n  const handleOnChange = (value) => {\n    onChangeHandler(\n      { target: { name: 'country' } },\n      { countryCode: value.selectionId, displayValue: value.userProvidedText }\n    );\n\n    // We have put this check because proviously we also had onSelected event handler and we call\n    // the onBlur on that event handler but now there is no such handler and we only have\n    // onChange so we check the is there is proper sectionId which only be\n    // proper one when we select it from dropdown's item otherwise its null.\n    if (value.selectionId !== '') {\n      handleOnBlur({ target: { name: 'country', value: value.userProvidedText } });\n    }\n  };\n\n  const getCountryList = () => countryList.map((country) => (\n    <FormAutosuggestOption key={country[COUNTRY_DISPLAY_KEY]} id={country[COUNTRY_CODE_KEY]}>\n      {country[COUNTRY_DISPLAY_KEY]}\n    </FormAutosuggestOption>\n  ));\n\n  return (\n    <div className=\"mb-4\">\n      <FormAutosuggest\n        floatingLabel={formatMessage(messages['registration.country.label'])}\n        aria-label=\"form autosuggest\"\n        name=\"country\"\n        value={countryFieldValue || {}}\n        className={classNames({ 'form-field-error': props.errorMessage })}\n        onFocus={(e) => handleOnFocus(e)}\n        onBlur={(e) => handleOnBlur(e)}\n        onChange={(value) => handleOnChange(value)}\n      >\n        {getCountryList()}\n      </FormAutosuggest>\n      {props.errorMessage !== '' && (\n        <FormControlFeedback\n          key=\"error\"\n          className=\"form-text-size\"\n          hasIcon={false}\n          feedback-for=\"country\"\n          type=\"invalid\"\n        >\n          {props.errorMessage}\n        </FormControlFeedback>\n      )}\n    </div>\n  );\n};\n\nCountryField.propTypes = {\n  countryList: PropTypes.arrayOf(\n    PropTypes.shape({\n      code: PropTypes.string,\n      name: PropTypes.string,\n    }),\n  ).isRequired,\n  errorMessage: PropTypes.string,\n  onChangeHandler: PropTypes.func.isRequired,\n  handleErrorChange: PropTypes.func.isRequired,\n  onFocusHandler: PropTypes.func.isRequired,\n  selectedCountry: PropTypes.shape({\n    displayValue: PropTypes.string,\n    countryCode: PropTypes.string,\n  }),\n};\n\nCountryField.defaultProps = {\n  errorMessage: null,\n  selectedCountry: {\n    value: '',\n  },\n};\n\nexport default CountryField;\n"]}
+{"version":3,"file":"CountryField.js","sourceRoot":"","sources":["../../../../src/register/RegistrationFields/CountryField/CountryField.jsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect } from 'react';\n\nimport { useIntl } from '@openedx/frontend-base';\nimport { FormAutosuggest, FormAutosuggestOption, FormControlFeedback } from '@openedx/paragon';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport validateCountryField, { COUNTRY_CODE_KEY, COUNTRY_DISPLAY_KEY } from './validator';\nimport { useRegisterContext } from '../../components/RegisterContext';\nimport messages from '../../messages';\n\n/**\n * Country field wrapper. It accepts following handlers\n * - handleChange for setting value change and\n * - handleErrorChange for setting error\n *\n * It is responsible for\n * - Auto populating country field if backendCountryCode is available in context\n * - Performing country field validations\n * - clearing error on focus\n * - setting value on change and selection\n */\nconst CountryField = (props) => {\n  const {\n    countryList,\n    selectedCountry,\n    onChangeHandler,\n    handleErrorChange,\n    onFocusHandler,\n  } = props;\n  const { formatMessage } = useIntl();\n\n  const {\n    clearRegistrationBackendError,\n    backendCountryCode,\n  } = useRegisterContext();\n\n  const countryFieldValue = {\n    userProvidedText: selectedCountry.displayValue,\n    selectionValue: selectedCountry.displayValue,\n    selectionId: selectedCountry.countryCode,\n  };\n\n  useEffect(() => {\n    if (backendCountryCode && backendCountryCode !== selectedCountry?.countryCode) {\n      let countryCode = '';\n      let countryDisplayValue = '';\n\n      const countryVal = countryList.find(\n        (country) => (country[COUNTRY_CODE_KEY].toLowerCase() === backendCountryCode.toLowerCase()),\n      );\n      if (countryVal) {\n        countryCode = countryVal[COUNTRY_CODE_KEY];\n        countryDisplayValue = countryVal[COUNTRY_DISPLAY_KEY];\n      }\n      onChangeHandler(\n        { target: { name: 'country' } },\n        { countryCode, displayValue: countryDisplayValue },\n      );\n    } else if (!selectedCountry.displayValue) {\n      onChangeHandler(\n        { target: { name: 'country' } },\n        { countryCode: '', displayValue: '' },\n      );\n    }\n  }, [backendCountryCode, countryList]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const handleOnBlur = (event) => {\n    // Do not run validations when drop-down arrow is clicked\n    if (event.relatedTarget && event.relatedTarget.className.includes('pgn__form-autosuggest__icon-button')) {\n      return;\n    }\n\n    const { value } = event.target;\n\n    const { error } = validateCountryField(\n      value.trim(), countryList, formatMessage(messages['empty.country.field.error']), formatMessage(messages['invalid.country.field.error']),\n    );\n    handleErrorChange('country', error);\n  };\n\n  const handleOnFocus = (event) => {\n    handleErrorChange('country', '');\n    clearRegistrationBackendError('country');\n    onFocusHandler(event);\n  };\n\n  const handleOnChange = (value) => {\n    onChangeHandler({ target: { name: 'country' } }, { countryCode: value.selectionId, displayValue: value.userProvidedText });\n\n    // We have put this check because proviously we also had onSelected event handler and we call\n    // the onBlur on that event handler but now there is no such handler and we only have\n    // onChange so we check the is there is proper sectionId which only be\n    // proper one when we select it from dropdown's item otherwise its null.\n    if (value.selectionId !== '') {\n      handleOnBlur({ target: { name: 'country', value: value.userProvidedText } });\n    }\n  };\n\n  const getCountryList = () => countryList.map((country) => (\n    <FormAutosuggestOption key={country[COUNTRY_DISPLAY_KEY]} id={country[COUNTRY_CODE_KEY]}>\n      {country[COUNTRY_DISPLAY_KEY]}\n    </FormAutosuggestOption>\n  ));\n\n  return (\n    <div className=\"mb-4\">\n      <FormAutosuggest\n        floatingLabel={formatMessage(messages['registration.country.label'])}\n        aria-label=\"form autosuggest\"\n        name=\"country\"\n        value={countryFieldValue || {}}\n        className={classNames({ 'form-field-error': props.errorMessage })}\n        onFocus={(e) => handleOnFocus(e)}\n        onBlur={(e) => handleOnBlur(e)}\n        onChange={(value) => handleOnChange(value)}\n      >\n        {getCountryList()}\n      </FormAutosuggest>\n      {props.errorMessage !== '' && (\n        <FormControlFeedback\n          key=\"error\"\n          className=\"form-text-size\"\n          hasIcon={false}\n          feedback-for=\"country\"\n          type=\"invalid\"\n        >\n          {props.errorMessage}\n        </FormControlFeedback>\n      )}\n    </div>\n  );\n};\n\nCountryField.propTypes = {\n  countryList: PropTypes.arrayOf(\n    PropTypes.shape({\n      code: PropTypes.string,\n      name: PropTypes.string,\n    }),\n  ).isRequired,\n  errorMessage: PropTypes.string,\n  onChangeHandler: PropTypes.func.isRequired,\n  handleErrorChange: PropTypes.func.isRequired,\n  onFocusHandler: PropTypes.func.isRequired,\n  selectedCountry: PropTypes.shape({\n    displayValue: PropTypes.string,\n    countryCode: PropTypes.string,\n  }),\n};\n\nCountryField.defaultProps = {\n  errorMessage: null,\n  selectedCountry: {\n    value: '',\n  },\n};\n\nexport default CountryField;\n"]}

package/dist/register/RegistrationFields/EmailField/EmailField.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from '@openedx/frontend-base';
 import { Alert, Icon } from '@openedx/paragon';
 import { Close, Error } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
+import validateEmail from './validator';
 import { FormGroup } from '../../../common-components';
-import { clearRegistrationBackendError, fetchRealtimeValidations, setEmailSuggestionInStore, } from '../../data/actions';
+import { useRegisterContext } from '../../components/RegisterContext';
+import { useFieldValidations } from '../../data/apiHook';
 import messages from '../../messages';
-import validateEmail from './validator';
 /**
  * Email field wrapper. It accepts following handlers
  * - handleChange for setting value change and
@@ -23,10 +23,17 @@ import validateEmail from './validator';
  */
 const EmailField = (props) => {
     const { formatMessage } = useIntl();
-    const dispatch = useDispatch();
+    const { setValidationsSuccess, setValidationsFailure, validationApiRateLimited, clearRegistrationBackendError, registrationFormData, setEmailSuggestionContext, } = useRegisterContext();
     const { handleChange, handleErrorChange, confirmEmailValue, } = props;
-    const backedUpFormData = useSelector(state => state.register.registrationFormData);
-    const validationApiRateLimited = useSelector(state => state.register.validationApiRateLimited);
+    const fieldValidationsMutation = useFieldValidations({
+        onSuccess: (data) => {
+            setValidationsSuccess(data);
+        },
+        onError: () => {
+            setValidationsFailure();
+        },
+    });
+    const backedUpFormData = registrationFormData;
     const [emailSuggestion, setEmailSuggestion] = useState(Object.assign({}, backedUpFormData === null || backedUpFormData === void 0 ? void 0 : backedUpFormData.emailSuggestion));
     useEffect(() => {
         setEmailSuggestion(backedUpFormData.emailSuggestion);
@@ -37,24 +44,25 @@ const EmailField = (props) => {
         if (confirmEmailError) {
             handleErrorChange('confirm_email', confirmEmailError);
         }
-        dispatch(setEmailSuggestionInStore(suggestion));
+        setEmailSuggestionContext(suggestion.suggestion, suggestion.type);
         setEmailSuggestion(suggestion);
         if (fieldError) {
             handleErrorChange('email', fieldError);
         }
         else if (!validationApiRateLimited) {
-            dispatch(fetchRealtimeValidations({ email: value }));
+            fieldValidationsMutation.mutate({ email: value });
         }
     };
     const handleOnFocus = () => {
         handleErrorChange('email', '');
-        dispatch(clearRegistrationBackendError('email'));
+        clearRegistrationBackendError('email');
     };
     const handleSuggestionClick = (event) => {
         event.preventDefault();
         handleErrorChange('email', '');
         handleChange({ target: { name: 'email', value: emailSuggestion.suggestion } });
         setEmailSuggestion({ suggestion: '', type: '' });
+        setEmailSuggestionContext('', '');
     };
     const handleSuggestionClosed = () => setEmailSuggestion({ suggestion: '', type: '' });
     const renderEmailFeedback = () => {

package/dist/register/RegistrationFields/EmailField/EmailField.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmailField.js","sourceRoot":"","sources":["../../../../src/register/RegistrationFields/EmailField/EmailField.jsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport { useIntl } from '@openedx/frontend-base';\nimport { Alert, Icon } from '@openedx/paragon';\nimport { Close, Error } from '@openedx/paragon/icons';\nimport PropTypes from 'prop-types';\n\nimport { FormGroup } from '../../../common-components';\nimport {\n  clearRegistrationBackendError,\n  fetchRealtimeValidations,\n  setEmailSuggestionInStore,\n} from '../../data/actions';\nimport messages from '../../messages';\nimport validateEmail from './validator';\n\n/**\n * Email field wrapper. It accepts following handlers\n * - handleChange for setting value change and\n * - handleErrorChange for setting error\n *\n * It is responsible for\n * - Generating email warning and error suggestions\n * - Setting and clearing email suggestions\n * - Performing email field validations\n * - clearing error on focus\n * - setting value on change\n */\nconst EmailField = (props) => {\n  const { formatMessage } = useIntl();\n  const dispatch = useDispatch();\n\n  const {\n    handleChange,\n    handleErrorChange,\n    confirmEmailValue,\n  } = props;\n\n  const backedUpFormData = useSelector(state => state.register.registrationFormData);\n  const validationApiRateLimited = useSelector(state => state.register.validationApiRateLimited);\n\n  const [emailSuggestion, setEmailSuggestion] = useState({ ...backedUpFormData?.emailSuggestion });\n\n  useEffect(() => {\n    setEmailSuggestion(backedUpFormData.emailSuggestion);\n  }, [backedUpFormData.emailSuggestion]);\n\n  const handleOnBlur = (e) => {\n    const { value } = e.target;\n    const { fieldError, confirmEmailError, suggestion } = validateEmail(value, confirmEmailValue, formatMessage);\n\n    if (confirmEmailError) {\n      handleErrorChange('confirm_email', confirmEmailError);\n    }\n\n    dispatch(setEmailSuggestionInStore(suggestion));\n    setEmailSuggestion(suggestion);\n\n    if (fieldError) {\n      handleErrorChange('email', fieldError);\n    } else if (!validationApiRateLimited) {\n      dispatch(fetchRealtimeValidations({ email: value }));\n    }\n  };\n\n  const handleOnFocus = () => {\n    handleErrorChange('email', '');\n    dispatch(clearRegistrationBackendError('email'));\n  };\n\n  const handleSuggestionClick = (event) => {\n    event.preventDefault();\n    handleErrorChange('email', '');\n    handleChange({ target: { name: 'email', value: emailSuggestion.suggestion } });\n    setEmailSuggestion({ suggestion: '', type: '' });\n  };\n\n  const handleSuggestionClosed = () => setEmailSuggestion({ suggestion: '', type: '' });\n\n  const renderEmailFeedback = () => {\n    if (emailSuggestion.type === 'error') {\n      return (\n        <Alert variant=\"danger\" className=\"email-suggestion-alert-error mt-1\" icon={Error}>\n          <span className=\"email-suggestion__text\">\n            {formatMessage(messages['did.you.mean.alert.text'])}{' '}\n            <Alert.Link\n              href=\"#\"\n              name=\"email\"\n              onClick={handleSuggestionClick}\n            >\n              {emailSuggestion.suggestion}\n            </Alert.Link>?\n            <Icon src={Close} className=\"email-suggestion__close\" onClick={handleSuggestionClosed} tabIndex=\"0\" />\n          </span>\n        </Alert>\n      );\n    }\n    return (\n      <span id=\"email-warning\" className=\"small\">\n        {formatMessage(messages['did.you.mean.alert.text'])}:{' '}\n        <Alert.Link\n          href=\"#\"\n          name=\"email\"\n          className=\"email-suggestion-alert-warning\"\n          onClick={handleSuggestionClick}\n        >\n          {emailSuggestion.suggestion}\n        </Alert.Link>?\n      </span>\n    );\n  };\n\n  return (\n    <FormGroup\n      borderClass={emailSuggestion.type === 'warning' ? 'yellow-border' : ''}\n      maxLength={254} // Limit per RFCs is 254\n      {...props}\n      handleBlur={handleOnBlur}\n      handleFocus={handleOnFocus}\n    >\n      {emailSuggestion.suggestion ? renderEmailFeedback() : null}\n    </FormGroup>\n  );\n};\n\nEmailField.defaultProps = {\n  errorMessage: '',\n  confirmEmailValue: null,\n};\n\nEmailField.propTypes = {\n  errorMessage: PropTypes.string,\n  value: PropTypes.string.isRequired,\n  handleChange: PropTypes.func.isRequired,\n  handleErrorChange: PropTypes.func.isRequired,\n  confirmEmailValue: PropTypes.string,\n};\n\nexport default EmailField;\n"]}
+{"version":3,"file":"EmailField.js","sourceRoot":"","sources":["../../../../src/register/RegistrationFields/EmailField/EmailField.jsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { useIntl } from '@openedx/frontend-base';\nimport { Alert, Icon } from '@openedx/paragon';\nimport { Close, Error } from '@openedx/paragon/icons';\nimport PropTypes from 'prop-types';\n\nimport validateEmail from './validator';\nimport { FormGroup } from '../../../common-components';\nimport { useRegisterContext } from '../../components/RegisterContext';\nimport { useFieldValidations } from '../../data/apiHook';\nimport messages from '../../messages';\n\n/**\n * Email field wrapper. It accepts following handlers\n * - handleChange for setting value change and\n * - handleErrorChange for setting error\n *\n * It is responsible for\n * - Generating email warning and error suggestions\n * - Setting and clearing email suggestions\n * - Performing email field validations\n * - clearing error on focus\n * - setting value on change\n */\nconst EmailField = (props) => {\n  const { formatMessage } = useIntl();\n\n  const {\n    setValidationsSuccess,\n    setValidationsFailure,\n    validationApiRateLimited,\n    clearRegistrationBackendError,\n    registrationFormData,\n    setEmailSuggestionContext,\n  } = useRegisterContext();\n\n  const {\n    handleChange,\n    handleErrorChange,\n    confirmEmailValue,\n  } = props;\n\n  const fieldValidationsMutation = useFieldValidations({\n    onSuccess: (data) => {\n      setValidationsSuccess(data);\n    },\n    onError: () => {\n      setValidationsFailure();\n    },\n  });\n\n  const backedUpFormData = registrationFormData;\n  const [emailSuggestion, setEmailSuggestion] = useState({ ...backedUpFormData?.emailSuggestion });\n\n  useEffect(() => {\n    setEmailSuggestion(backedUpFormData.emailSuggestion);\n  }, [backedUpFormData.emailSuggestion]);\n\n  const handleOnBlur = (e) => {\n    const { value } = e.target;\n    const { fieldError, confirmEmailError, suggestion } = validateEmail(value, confirmEmailValue, formatMessage);\n\n    if (confirmEmailError) {\n      handleErrorChange('confirm_email', confirmEmailError);\n    }\n    setEmailSuggestionContext(suggestion.suggestion, suggestion.type);\n    setEmailSuggestion(suggestion);\n\n    if (fieldError) {\n      handleErrorChange('email', fieldError);\n    } else if (!validationApiRateLimited) {\n      fieldValidationsMutation.mutate({ email: value });\n    }\n  };\n\n  const handleOnFocus = () => {\n    handleErrorChange('email', '');\n    clearRegistrationBackendError('email');\n  };\n\n  const handleSuggestionClick = (event) => {\n    event.preventDefault();\n    handleErrorChange('email', '');\n    handleChange({ target: { name: 'email', value: emailSuggestion.suggestion } });\n    setEmailSuggestion({ suggestion: '', type: '' });\n    setEmailSuggestionContext('', '');\n  };\n\n  const handleSuggestionClosed = () => setEmailSuggestion({ suggestion: '', type: '' });\n\n  const renderEmailFeedback = () => {\n    if (emailSuggestion.type === 'error') {\n      return (\n        <Alert variant=\"danger\" className=\"email-suggestion-alert-error mt-1\" icon={Error}>\n          <span className=\"email-suggestion__text\">\n            {formatMessage(messages['did.you.mean.alert.text'])}{' '}\n            <Alert.Link\n              href=\"#\"\n              name=\"email\"\n              onClick={handleSuggestionClick}\n            >\n              {emailSuggestion.suggestion}\n            </Alert.Link>?\n            <Icon src={Close} className=\"email-suggestion__close\" onClick={handleSuggestionClosed} tabIndex=\"0\" />\n          </span>\n        </Alert>\n      );\n    }\n    return (\n      <span id=\"email-warning\" className=\"small\">\n        {formatMessage(messages['did.you.mean.alert.text'])}:{' '}\n        <Alert.Link\n          href=\"#\"\n          name=\"email\"\n          className=\"email-suggestion-alert-warning\"\n          onClick={handleSuggestionClick}\n        >\n          {emailSuggestion.suggestion}\n        </Alert.Link>?\n      </span>\n    );\n  };\n\n  return (\n    <FormGroup\n      borderClass={emailSuggestion.type === 'warning' ? 'yellow-border' : ''}\n      maxLength={254} // Limit per RFCs is 254\n      {...props}\n      handleBlur={handleOnBlur}\n      handleFocus={handleOnFocus}\n    >\n      {emailSuggestion.suggestion ? renderEmailFeedback() : null}\n    </FormGroup>\n  );\n};\n\nEmailField.defaultProps = {\n  errorMessage: '',\n  confirmEmailValue: null,\n};\n\nEmailField.propTypes = {\n  errorMessage: PropTypes.string,\n  value: PropTypes.string.isRequired,\n  handleChange: PropTypes.func.isRequired,\n  handleErrorChange: PropTypes.func.isRequired,\n  confirmEmailValue: PropTypes.string,\n};\n\nexport default EmailField;\n"]}

package/dist/register/RegistrationFields/NameField/NameField.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from '@openedx/frontend-base';
 import PropTypes from 'prop-types';
-import { FormGroup } from '../../../common-components';
-import { clearRegistrationBackendError, fetchRealtimeValidations } from '../../data/actions';
 import validateName from './validator';
+import { FormGroup } from '../../../common-components';
+import { useRegisterContext } from '../../components/RegisterContext';
+import { useFieldValidations } from '../../data/apiHook';
 /**
  * Name field wrapper. It accepts following handlers
  * - handleChange for setting value change and
@@ -18,8 +18,15 @@ import validateName from './validator';
  */
 const NameField = (props) => {
     const { formatMessage } = useIntl();
-    const dispatch = useDispatch();
-    const validationApiRateLimited = useSelector(state => state.register.validationApiRateLimited);
+    const { setValidationsSuccess, setValidationsFailure, validationApiRateLimited, clearRegistrationBackendError, } = useRegisterContext();
+    const fieldValidationsMutation = useFieldValidations({
+        onSuccess: (data) => {
+            setValidationsSuccess(data);
+        },
+        onError: () => {
+            setValidationsFailure();
+        },
+    });
     const { handleErrorChange, shouldFetchUsernameSuggestions, } = props;
     const handleOnBlur = (e) => {
         const { value } = e.target;
@@ -28,12 +35,12 @@ const NameField = (props) => {
             handleErrorChange('name', fieldError);
         }
         else if (shouldFetchUsernameSuggestions && !validationApiRateLimited) {
-            dispatch(fetchRealtimeValidations({ name: value }));
+            fieldValidationsMutation.mutate({ name: value });
         }
     };
     const handleOnFocus = () => {
         handleErrorChange('name', '');
-        dispatch(clearRegistrationBackendError('name'));
+        clearRegistrationBackendError('name');
     };
     return (_jsx(FormGroup, Object.assign({}, props, { handleBlur: handleOnBlur, handleFocus: handleOnFocus })));
 };

package/dist/register/RegistrationFields/NameField/NameField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NameField.js","sourceRoot":"","sources":["../../../../src/register/RegistrationFields/NameField/NameField.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAEvD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,6BAA6B,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAC7F,OAAO,YAAY,MAAM,aAAa,CAAC;AAEvC;;;;;;;;;;GAUG;AACH,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE;IAC1B,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,wBAAwB,GAAG,WAAW,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,wBAAwB,CAAC,CAAC;IAE/F,MAAM,EACJ,iBAAiB,EACjB,8BAA8B,GAC/B,GAAG,KAAK,CAAC;IAEV,MAAM,YAAY,GAAG,CAAC,CAAC,EAAE,EAAE;QACzB,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAC3B,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;QACtD,IAAI,UAAU,EAAE,CAAC;YACf,iBAAiB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACxC,CAAC;aAAM,IAAI,8BAA8B,IAAI,CAAC,wBAAwB,EAAE,CAAC;YACvE,QAAQ,CAAC,wBAAwB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;QACtD,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,iBAAiB,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAC9B,QAAQ,CAAC,6BAA6B,CAAC,MAAM,CAAC,CAAC,CAAC;IAClD,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,oBACJ,KAAK,IACT,UAAU,EAAE,YAAY,EACxB,WAAW,EAAE,aAAa,IAC1B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG;IACvB,YAAY,EAAE,EAAE;IAChB,8BAA8B,EAAE,KAAK;CACtC,CAAC;AAEF,SAAS,CAAC,SAAS,GAAG;IACpB,YAAY,EAAE,SAAS,CAAC,MAAM;IAC9B,8BAA8B,EAAE,SAAS,CAAC,IAAI;IAC9C,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IAClC,YAAY,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACvC,iBAAiB,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CAC7C,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useDispatch, useSelector } from 'react-redux';\n\nimport { useIntl } from '@openedx/frontend-base';\nimport PropTypes from 'prop-types';\n\nimport { FormGroup } from '../../../common-components';\nimport { clearRegistrationBackendError, fetchRealtimeValidations } from '../../data/actions';\nimport validateName from './validator';\n\n/**\n * Name field wrapper. It accepts following handlers\n * - handleChange for setting value change and\n * - handleErrorChange for setting error\n *\n * It is responsible for\n * - Making backend call for generating username suggestions\n * - Performing name field validations\n * - Clearing error on focus\n * - Setting value on change\n */\nconst NameField = (props) => {\n  const { formatMessage } = useIntl();\n  const dispatch = useDispatch();\n  const validationApiRateLimited = useSelector(state => state.register.validationApiRateLimited);\n\n  const {\n    handleErrorChange,\n    shouldFetchUsernameSuggestions,\n  } = props;\n\n  const handleOnBlur = (e) => {\n    const { value } = e.target;\n    const fieldError = validateName(value, formatMessage);\n    if (fieldError) {\n      handleErrorChange('name', fieldError);\n    } else if (shouldFetchUsernameSuggestions && !validationApiRateLimited) {\n      dispatch(fetchRealtimeValidations({ name: value }));\n    }\n  };\n\n  const handleOnFocus = () => {\n    handleErrorChange('name', '');\n    dispatch(clearRegistrationBackendError('name'));\n  };\n\n  return (\n    <FormGroup\n      {...props}\n      handleBlur={handleOnBlur}\n      handleFocus={handleOnFocus}\n    />\n  );\n};\n\nNameField.defaultProps = {\n  errorMessage: '',\n  shouldFetchUsernameSuggestions: false,\n};\n\nNameField.propTypes = {\n  errorMessage: PropTypes.string,\n  shouldFetchUsernameSuggestions: PropTypes.bool,\n  value: PropTypes.string.isRequired,\n  handleChange: PropTypes.func.isRequired,\n  handleErrorChange: PropTypes.func.isRequired,\n};\n\nexport default NameField;\n"]}
+{"version":3,"file":"NameField.js","sourceRoot":"","sources":["../../../../src/register/RegistrationFields/NameField/NameField.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,YAAY,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAEzD;;;;;;;;;;GAUG;AACH,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE;IAC1B,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,EACJ,qBAAqB,EACrB,qBAAqB,EACrB,wBAAwB,EACxB,6BAA6B,GAC9B,GAAG,kBAAkB,EAAE,CAAC;IAEzB,MAAM,wBAAwB,GAAG,mBAAmB,CAAC;QACnD,SAAS,EAAE,CAAC,IAAI,EAAE,EAAE;YAClB,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAC9B,CAAC;QACD,OAAO,EAAE,GAAG,EAAE;YACZ,qBAAqB,EAAE,CAAC;QAC1B,CAAC;KACF,CAAC,CAAC;IACH,MAAM,EACJ,iBAAiB,EACjB,8BAA8B,GAC/B,GAAG,KAAK,CAAC;IAEV,MAAM,YAAY,GAAG,CAAC,CAAC,EAAE,EAAE;QACzB,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAC3B,MAAM,UAAU,GAAG,YAAY,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;QACtD,IAAI,UAAU,EAAE,CAAC;YACf,iBAAiB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACxC,CAAC;aAAM,IAAI,8BAA8B,IAAI,CAAC,wBAAwB,EAAE,CAAC;YACvE,wBAAwB,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;QACnD,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,iBAAiB,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAC9B,6BAA6B,CAAC,MAAM,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,oBACJ,KAAK,IACT,UAAU,EAAE,YAAY,EACxB,WAAW,EAAE,aAAa,IAC1B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,YAAY,GAAG;IACvB,YAAY,EAAE,EAAE;IAChB,8BAA8B,EAAE,KAAK;CACtC,CAAC;AAEF,SAAS,CAAC,SAAS,GAAG;IACpB,YAAY,EAAE,SAAS,CAAC,MAAM;IAC9B,8BAA8B,EAAE,SAAS,CAAC,IAAI;IAC9C,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IAClC,YAAY,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACvC,iBAAiB,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CAC7C,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useIntl } from '@openedx/frontend-base';\nimport PropTypes from 'prop-types';\n\nimport validateName from './validator';\nimport { FormGroup } from '../../../common-components';\nimport { useRegisterContext } from '../../components/RegisterContext';\nimport { useFieldValidations } from '../../data/apiHook';\n\n/**\n * Name field wrapper. It accepts following handlers\n * - handleChange for setting value change and\n * - handleErrorChange for setting error\n *\n * It is responsible for\n * - Making backend call for generating username suggestions\n * - Performing name field validations\n * - Clearing error on focus\n * - Setting value on change\n */\nconst NameField = (props) => {\n  const { formatMessage } = useIntl();\n  const {\n    setValidationsSuccess,\n    setValidationsFailure,\n    validationApiRateLimited,\n    clearRegistrationBackendError,\n  } = useRegisterContext();\n\n  const fieldValidationsMutation = useFieldValidations({\n    onSuccess: (data) => {\n      setValidationsSuccess(data);\n    },\n    onError: () => {\n      setValidationsFailure();\n    },\n  });\n  const {\n    handleErrorChange,\n    shouldFetchUsernameSuggestions,\n  } = props;\n\n  const handleOnBlur = (e) => {\n    const { value } = e.target;\n    const fieldError = validateName(value, formatMessage);\n    if (fieldError) {\n      handleErrorChange('name', fieldError);\n    } else if (shouldFetchUsernameSuggestions && !validationApiRateLimited) {\n      fieldValidationsMutation.mutate({ name: value });\n    }\n  };\n\n  const handleOnFocus = () => {\n    handleErrorChange('name', '');\n    clearRegistrationBackendError('name');\n  };\n\n  return (\n    <FormGroup\n      {...props}\n      handleBlur={handleOnBlur}\n      handleFocus={handleOnFocus}\n    />\n  );\n};\n\nNameField.defaultProps = {\n  errorMessage: '',\n  shouldFetchUsernameSuggestions: false,\n};\n\nNameField.propTypes = {\n  errorMessage: PropTypes.string,\n  shouldFetchUsernameSuggestions: PropTypes.bool,\n  value: PropTypes.string.isRequired,\n  handleChange: PropTypes.func.isRequired,\n  handleErrorChange: PropTypes.func.isRequired,\n};\n\nexport default NameField;\n"]}

package/dist/register/RegistrationFields/NameField/validator.d.ts

@@ -1,5 +1,6 @@
 export const URL_REGEX: RegExp;
 export const HTML_REGEX: RegExp;
 export const INVALID_NAME_REGEX: RegExp;
+export const MAX_FULL_NAME_LENGTH: 255;
 export default validateName;
 declare function validateName(value: any, formatMessage: any): string;

package/dist/register/RegistrationFields/NameField/validator.js

@@ -5,6 +5,7 @@ export const URL_REGEX = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-
 export const HTML_REGEX = /<|>/u;
 // regex from backend
 export const INVALID_NAME_REGEX = /https?:\/\/(?:[-\w.]|(?:%[\da-fA-F]{2}))*/g;
+export const MAX_FULL_NAME_LENGTH = 255;
 const validateName = (value, formatMessage) => {
     let fieldError = '';
     if (!value.trim()) {
@@ -13,6 +14,9 @@ const validateName = (value, formatMessage) => {
     else if (URL_REGEX.test(value) || HTML_REGEX.test(value) || INVALID_NAME_REGEX.test(value)) {
         fieldError = formatMessage(messages['name.validation.message']);
     }
+    else if (value && value.length > MAX_FULL_NAME_LENGTH) {
+        fieldError = formatMessage(messages['name.validation.length.message'], { limit: MAX_FULL_NAME_LENGTH });
+    }
     return fieldError;
 };
 export default validateName;

package/dist/register/RegistrationFields/NameField/validator.js.map

@@ -1 +1 @@
-{"version":3,"file":"validator.js","sourceRoot":"","sources":["../../../../src/register/RegistrationFields/NameField/validator.js"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,0CAA0C;AAC1C,MAAM,CAAC,MAAM,SAAS,GAAG,uFAAuF,CAAC,CAAC,wCAAwC;AAE1J,sBAAsB;AACtB,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC;AAEjC,qBAAqB;AACrB,MAAM,CAAC,MAAM,kBAAkB,GAAG,4CAA4C,CAAC;AAE/E,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE;IAC5C,IAAI,UAAU,GAAG,EAAE,CAAC;IACpB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC;QAClB,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,wBAAwB,CAAC,CAAC,CAAC;IACjE,CAAC;SAAM,IAAI,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QAC7F,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,yBAAyB,CAAC,CAAC,CAAC;IAClE,CAAC;IACD,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import messages from '../../messages';\n\n// regex more focused towards url matching\nexport const URL_REGEX = /[-a-zA-Z0-9@:%._\\+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_\\+.~#?&//=]*)?/gi; // eslint-disable-line no-useless-escape\n\n// regex for html tags\nexport const HTML_REGEX = /<|>/u;\n\n// regex from backend\nexport const INVALID_NAME_REGEX = /https?:\\/\\/(?:[-\\w.]|(?:%[\\da-fA-F]{2}))*/g;\n\nconst validateName = (value, formatMessage) => {\n  let fieldError = '';\n  if (!value.trim()) {\n    fieldError = formatMessage(messages['empty.name.field.error']);\n  } else if (URL_REGEX.test(value) || HTML_REGEX.test(value) || INVALID_NAME_REGEX.test(value)) {\n    fieldError = formatMessage(messages['name.validation.message']);\n  }\n  return fieldError;\n};\n\nexport default validateName;\n"]}
+{"version":3,"file":"validator.js","sourceRoot":"","sources":["../../../../src/register/RegistrationFields/NameField/validator.js"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,0CAA0C;AAC1C,MAAM,CAAC,MAAM,SAAS,GAAG,uFAAuF,CAAC,CAAC,wCAAwC;AAE1J,sBAAsB;AACtB,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC;AAEjC,qBAAqB;AACrB,MAAM,CAAC,MAAM,kBAAkB,GAAG,4CAA4C,CAAC;AAE/E,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAExC,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE;IAC5C,IAAI,UAAU,GAAG,EAAE,CAAC;IACpB,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC;QAClB,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,wBAAwB,CAAC,CAAC,CAAC;IACjE,CAAC;SAAM,IAAI,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QAC7F,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,yBAAyB,CAAC,CAAC,CAAC;IAClE,CAAC;SAAM,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,oBAAoB,EAAE,CAAC;QACxD,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,gCAAgC,CAAC,EAAE,EAAE,KAAK,EAAE,oBAAoB,EAAE,CAAC,CAAC;IAC1G,CAAC;IACD,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import messages from '../../messages';\n\n// regex more focused towards url matching\nexport const URL_REGEX = /[-a-zA-Z0-9@:%._\\+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_\\+.~#?&//=]*)?/gi; // eslint-disable-line no-useless-escape\n\n// regex for html tags\nexport const HTML_REGEX = /<|>/u;\n\n// regex from backend\nexport const INVALID_NAME_REGEX = /https?:\\/\\/(?:[-\\w.]|(?:%[\\da-fA-F]{2}))*/g;\n\nexport const MAX_FULL_NAME_LENGTH = 255;\n\nconst validateName = (value, formatMessage) => {\n  let fieldError = '';\n  if (!value.trim()) {\n    fieldError = formatMessage(messages['empty.name.field.error']);\n  } else if (URL_REGEX.test(value) || HTML_REGEX.test(value) || INVALID_NAME_REGEX.test(value)) {\n    fieldError = formatMessage(messages['name.validation.message']);\n  } else if (value && value.length > MAX_FULL_NAME_LENGTH) {\n    fieldError = formatMessage(messages['name.validation.length.message'], { limit: MAX_FULL_NAME_LENGTH });\n  }\n  return fieldError;\n};\n\nexport default validateName;\n"]}

package/dist/register/RegistrationFields/UsernameField/UsernameField.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import { useIntl } from '@openedx/frontend-base';
 import { Button, Icon, IconButton } from '@openedx/paragon';
 import { Close } from '@openedx/paragon/icons';
 import PropTypes from 'prop-types';
+import validateUsername from './validator';
 import { FormGroup } from '../../../common-components';
-import { clearRegistrationBackendError, clearUsernameSuggestions, fetchRealtimeValidations, } from '../../data/actions';
+import { useRegisterContext } from '../../components/RegisterContext';
+import { useFieldValidations } from '../../data/apiHook';
 import messages from '../../messages';
-import validateUsername from './validator';
 /**
  * Username field wrapper. It accepts following handlers
  * - handleChange for setting value change and
@@ -23,13 +23,19 @@ import validateUsername from './validator';
  */
 const UsernameField = (props) => {
     const { formatMessage } = useIntl();
-    const dispatch = useDispatch();
     const { value, errorMessage, handleChange, handleErrorChange, } = props;
     let className = '';
     let suggestedUsernameDiv = null;
     let iconButton = null;
-    const usernameSuggestions = useSelector(state => state.register.usernameSuggestions);
-    const validationApiRateLimited = useSelector(state => state.register.validationApiRateLimited);
+    const { usernameSuggestions, validationApiRateLimited, setValidationsSuccess, setValidationsFailure, clearUsernameSuggestions, clearRegistrationBackendError, } = useRegisterContext();
+    const fieldValidationsMutation = useFieldValidations({
+        onSuccess: (data) => {
+            setValidationsSuccess(data);
+        },
+        onError: () => {
+            setValidationsFailure();
+        },
+    });
     /**
      * We need to remove the placeholder from the field, adding a space will do that.
      * This is needed because we are placing the username suggestions on top of the field.
@@ -46,7 +52,7 @@ const UsernameField = (props) => {
             handleErrorChange('username', fieldError);
         }
         else if (!validationApiRateLimited) {
-            dispatch(fetchRealtimeValidations({ username }));
+            fieldValidationsMutation.mutate({ username });
         }
     };
     const handleOnChange = (event) => {
@@ -61,7 +67,7 @@ const UsernameField = (props) => {
     };
     const handleOnFocus = (event) => {
         const username = event.target.value;
-        dispatch(clearUsernameSuggestions());
+        clearUsernameSuggestions();
         // If we added a space character to username field to display the suggestion
         // remove it before user enters the input. This is to ensure user doesn't
         // have a space prefixed to the username.
@@ -69,21 +75,21 @@ const UsernameField = (props) => {
             handleChange({ target: { name: 'username', value: '' } });
         }
         handleErrorChange('username', '');
-        dispatch(clearRegistrationBackendError('username'));
+        clearRegistrationBackendError('username');
     };
     const handleSuggestionClick = (event, suggestion = '') => {
         event.preventDefault();
         handleErrorChange('username', ''); // clear error
         handleChange({ target: { name: 'username', value: suggestion } }); // to set suggestion as value
-        dispatch(clearUsernameSuggestions());
+        clearUsernameSuggestions();
     };
     const handleUsernameSuggestionClose = () => {
         handleChange({ target: { name: 'username', value: '' } }); // to remove space in field
-        dispatch(clearUsernameSuggestions());
+        clearUsernameSuggestions();
     };
-    const suggestedUsernames = () => (_jsxs("div", { className: className, children: [_jsx("span", { className: "text-gray username-suggestion--label", children: formatMessage(messages['registration.username.suggestion.label']) }), _jsx("div", { className: "username-scroll-suggested--form-field", children: usernameSuggestions.map((username, index) => (_jsx(Button, { type: "button", name: "username", variant: "outline-dark", className: "username-suggestions--chip data-hj-suppress", autoComplete: props.autoComplete, onClick: (e) => handleSuggestionClick(e, username), children: username }, `suggestion-${index.toString()}`))) }), iconButton] }));
+    const suggestedUsernames = () => (_jsxs("div", { className: className, role: "listbox", children: [_jsx("span", { className: "text-gray username-suggestion--label", children: formatMessage(messages['registration.username.suggestion.label']) }), _jsx("div", { className: "username-scroll-suggested--form-field", children: usernameSuggestions.map((username, index) => (_jsx(Button, { type: "button", name: "username", variant: "outline-dark", className: "username-suggestions--chip data-hj-suppress", autoComplete: props.autoComplete, tabIndex: 0, onClick: (e) => handleSuggestionClick(e, username), role: "option", children: username }, `suggestion-${index.toString()}`))) }), iconButton] }));
     if (usernameSuggestions.length > 0 && errorMessage && value === ' ') {
-        className = 'username-suggestions__error';
+        className = 'username-suggestions';
         iconButton = _jsx(IconButton, { src: Close, iconAs: Icon, alt: "Close", onClick: () => handleUsernameSuggestionClose(), variant: "black", size: "sm", className: "username-suggestions__close__button" });
         suggestedUsernameDiv = suggestedUsernames();
     }
@@ -95,7 +101,7 @@ const UsernameField = (props) => {
     else if (usernameSuggestions.length > 0 && errorMessage) {
         suggestedUsernameDiv = suggestedUsernames();
     }
-    return (_jsx(FormGroup, Object.assign({}, props, { handleChange: handleOnChange, handleFocus: handleOnFocus, handleBlur: handleOnBlur, children: suggestedUsernameDiv })));
+    return (_jsxs("div", { className: "username__form-group-wrapper", children: [suggestedUsernameDiv, _jsx(FormGroup, Object.assign({}, props, { handleChange: handleOnChange, handleFocus: handleOnFocus, handleBlur: handleOnBlur }))] }));
 };
 UsernameField.defaultProps = {
     errorMessage: '',