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

package/{src → dist}/progressive-profiling/data/selectors.js

@@ -1,14 +1,9 @@
 import { createSelector } from 'reselect';
-
 export const storeName = 'commonComponents';
-
-export const commonComponentsSelector = state => ({ ...state[storeName] });
-
-export const welcomePageContextSelector = createSelector(
-  commonComponentsSelector,
-  commonComponents => ({
+export const commonComponentsSelector = state => (Object.assign({}, state[storeName]));
+export const welcomePageContextSelector = createSelector(commonComponentsSelector, commonComponents => ({
     fields: commonComponents.optionalFields.fields,
     extended_profile: commonComponents.optionalFields.extended_profile,
     nextUrl: commonComponents.thirdPartyAuthContext.welcomePageRedirectUrl,
-  }),
-);
+}));
+//# sourceMappingURL=selectors.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectors.js","sourceRoot":"","sources":["../../../src/progressive-profiling/data/selectors.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,CAAC,MAAM,SAAS,GAAG,kBAAkB,CAAC;AAE5C,MAAM,CAAC,MAAM,wBAAwB,GAAG,KAAK,CAAC,EAAE,CAAC,mBAAM,KAAK,CAAC,SAAS,CAAC,EAAG,CAAC;AAE3E,MAAM,CAAC,MAAM,0BAA0B,GAAG,cAAc,CACtD,wBAAwB,EACxB,gBAAgB,CAAC,EAAE,CAAC,CAAC;IACnB,MAAM,EAAE,gBAAgB,CAAC,cAAc,CAAC,MAAM;IAC9C,gBAAgB,EAAE,gBAAgB,CAAC,cAAc,CAAC,gBAAgB;IAClE,OAAO,EAAE,gBAAgB,CAAC,qBAAqB,CAAC,sBAAsB;CACvE,CAAC,CACH,CAAC","sourcesContent":["import { createSelector } from 'reselect';\n\nexport const storeName = 'commonComponents';\n\nexport const commonComponentsSelector = state => ({ ...state[storeName] });\n\nexport const welcomePageContextSelector = createSelector(\n  commonComponentsSelector,\n  commonComponents => ({\n    fields: commonComponents.optionalFields.fields,\n    extended_profile: commonComponents.optionalFields.extended_profile,\n    nextUrl: commonComponents.thirdPartyAuthContext.welcomePageRedirectUrl,\n  }),\n);\n"]}

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

@@ -0,0 +1 @@
+export function patchAccount(username: any, commitValues: any): Promise<void>;

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

@@ -0,0 +1,23 @@
+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 { 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);
+        });
+    });
+}
+//# sourceMappingURL=service.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"service.js","sourceRoot":"","sources":["../../../src/progressive-profiling/data/service.js"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,0BAA0B,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEnF,MAAM,UAAgB,YAAY,CAAC,QAAQ,EAAE,YAAY;;QACvD,MAAM,aAAa,GAAG;YACpB,OAAO,EAAE,EAAE,cAAc,EAAE,8BAA8B,EAAE;SAC5D,CAAC;QAEF,MAAM,0BAA0B,EAAE;aAC/B,KAAK,CACJ,GAAG,aAAa,EAAE,CAAC,UAAU,yBAAyB,QAAQ,EAAE,EAChE,YAAY,EACZ,aAAa,CACd;aACA,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;YACf,MAAM,CAAC,KAAK,CAAC,CAAC;QAChB,CAAC,CAAC,CAAC;IACP,CAAC;CAAA","sourcesContent":["import { getAuthenticatedHttpClient, getSiteConfig } from '@openedx/frontend-base';\n\nexport async function patchAccount(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"]}

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

@@ -0,0 +1,4 @@
+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/{src → dist}/progressive-profiling/index.js

@@ -1,5 +1,5 @@
 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

@@ -0,0 +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"]}

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

@@ -0,0 +1,53 @@
+export default messages;
+declare const messages: {
+    'progressive.profiling.page.title': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'progressive.profiling.page.heading': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'optional.fields.information.link': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'optional.fields.submit.button': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'optional.fields.skip.button': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'continue.to.platform': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'modal.title': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'modal.description': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'welcome.page.error.heading': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    'welcome.page.error.message': {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/progressive-profiling/messages.js

@@ -0,0 +1,57 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    'progressive.profiling.page.title': {
+        id: 'progressive.profiling.page.title',
+        defaultMessage: 'Welcome | {siteName}',
+        description: 'progressive profiling page title',
+    },
+    'progressive.profiling.page.heading': {
+        id: 'progressive.profiling.page.heading',
+        defaultMessage: 'A few questions for you will help us get smarter.',
+        description: 'The page heading for the progressive profiling page.',
+    },
+    'optional.fields.information.link': {
+        id: 'optional.fields.information.link',
+        defaultMessage: 'Learn more about how we use this information.',
+        description: 'Optional fields page information link',
+    },
+    'optional.fields.submit.button': {
+        id: 'optional.fields.submit.button',
+        defaultMessage: 'Submit',
+        description: 'Submit button text',
+    },
+    'optional.fields.skip.button': {
+        id: 'optional.fields.skip.button',
+        defaultMessage: 'Skip for now',
+        description: 'Skip button text',
+    },
+    // modal dialog box
+    'continue.to.platform': {
+        id: 'continue.to.platform',
+        defaultMessage: 'Continue to {platformName}',
+        description: 'Button text for modal when user chooses "skip for now" option',
+    },
+    'modal.title': {
+        id: 'modal.title',
+        defaultMessage: 'Thanks for letting us know.',
+        description: 'Heading for welcome page modal',
+    },
+    'modal.description': {
+        id: 'modal.description',
+        defaultMessage: 'You can complete your profile in settings at any time if you change your mind.',
+        description: 'Modal body text',
+    },
+    // error message
+    'welcome.page.error.heading': {
+        id: 'welcome.page.error.heading',
+        defaultMessage: 'We couldn\'t update your profile',
+        description: 'Error message heading',
+    },
+    'welcome.page.error.message': {
+        id: 'welcome.page.error.message',
+        defaultMessage: 'An error occurred. You can complete your profile in settings at any time.',
+        description: 'Error message body',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../src/progressive-profiling/messages.jsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,kCAAkC,EAAE;QAClC,EAAE,EAAE,kCAAkC;QACtC,cAAc,EAAE,sBAAsB;QACtC,WAAW,EAAE,kCAAkC;KAChD;IACD,oCAAoC,EAAE;QACpC,EAAE,EAAE,oCAAoC;QACxC,cAAc,EAAE,mDAAmD;QACnE,WAAW,EAAE,sDAAsD;KACpE;IACD,kCAAkC,EAAE;QAClC,EAAE,EAAE,kCAAkC;QACtC,cAAc,EAAE,+CAA+C;QAC/D,WAAW,EAAE,uCAAuC;KACrD;IACD,+BAA+B,EAAE;QAC/B,EAAE,EAAE,+BAA+B;QACnC,cAAc,EAAE,QAAQ;QACxB,WAAW,EAAE,oBAAoB;KAClC;IACD,6BAA6B,EAAE;QAC7B,EAAE,EAAE,6BAA6B;QACjC,cAAc,EAAE,cAAc;QAC9B,WAAW,EAAE,kBAAkB;KAChC;IACD,mBAAmB;IACnB,sBAAsB,EAAE;QACtB,EAAE,EAAE,sBAAsB;QAC1B,cAAc,EAAE,4BAA4B;QAC5C,WAAW,EAAE,+DAA+D;KAC7E;IACD,aAAa,EAAE;QACb,EAAE,EAAE,aAAa;QACjB,cAAc,EAAE,6BAA6B;QAC7C,WAAW,EAAE,gCAAgC;KAC9C;IACD,mBAAmB,EAAE;QACnB,EAAE,EAAE,mBAAmB;QACvB,cAAc,EAAE,gFAAgF;QAChG,WAAW,EAAE,iBAAiB;KAC/B;IACD,gBAAgB;IAChB,4BAA4B,EAAE;QAC5B,EAAE,EAAE,4BAA4B;QAChC,cAAc,EAAE,kCAAkC;QAClD,WAAW,EAAE,uBAAuB;KACrC;IACD,4BAA4B,EAAE;QAC5B,EAAE,EAAE,4BAA4B;QAChC,cAAc,EAAE,2EAA2E;QAC3F,WAAW,EAAE,oBAAoB;KAClC;CACF,CAAC,CAAC;AACH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  'progressive.profiling.page.title': {\n    id: 'progressive.profiling.page.title',\n    defaultMessage: 'Welcome | {siteName}',\n    description: 'progressive profiling page title',\n  },\n  'progressive.profiling.page.heading': {\n    id: 'progressive.profiling.page.heading',\n    defaultMessage: 'A few questions for you will help us get smarter.',\n    description: 'The page heading for the progressive profiling page.',\n  },\n  'optional.fields.information.link': {\n    id: 'optional.fields.information.link',\n    defaultMessage: 'Learn more about how we use this information.',\n    description: 'Optional fields page information link',\n  },\n  'optional.fields.submit.button': {\n    id: 'optional.fields.submit.button',\n    defaultMessage: 'Submit',\n    description: 'Submit button text',\n  },\n  'optional.fields.skip.button': {\n    id: 'optional.fields.skip.button',\n    defaultMessage: 'Skip for now',\n    description: 'Skip button text',\n  },\n  // modal dialog box\n  'continue.to.platform': {\n    id: 'continue.to.platform',\n    defaultMessage: 'Continue to {platformName}',\n    description: 'Button text for modal when user chooses \"skip for now\" option',\n  },\n  'modal.title': {\n    id: 'modal.title',\n    defaultMessage: 'Thanks for letting us know.',\n    description: 'Heading for welcome page modal',\n  },\n  'modal.description': {\n    id: 'modal.description',\n    defaultMessage: 'You can complete your profile in settings at any time if you change your mind.',\n    description: 'Modal body text',\n  },\n  // error message\n  'welcome.page.error.heading': {\n    id: 'welcome.page.error.heading',\n    defaultMessage: 'We couldn\\'t update your profile',\n    description: 'Error message heading',\n  },\n  'welcome.page.error.message': {\n    id: 'welcome.page.error.message',\n    defaultMessage: 'An error occurred. You can complete your profile in settings at any time.',\n    description: 'Error message body',\n  },\n});\nexport default messages;\n"]}

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

@@ -0,0 +1,38 @@
+export default CountryField;
+/**
+ * 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
+ * - Performing country field validations
+ * - clearing error on focus
+ * - setting value on change and selection
+ */
+declare function CountryField(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace CountryField {
+    namespace propTypes {
+        let countryList: PropTypes.Validator<(PropTypes.InferProps<{
+            code: PropTypes.Requireable<string>;
+            name: PropTypes.Requireable<string>;
+        }> | null | undefined)[]>;
+        let errorMessage: PropTypes.Requireable<string>;
+        let onChangeHandler: PropTypes.Validator<(...args: any[]) => any>;
+        let handleErrorChange: PropTypes.Validator<(...args: any[]) => any>;
+        let onFocusHandler: PropTypes.Validator<(...args: any[]) => any>;
+        let selectedCountry: PropTypes.Requireable<PropTypes.InferProps<{
+            displayValue: PropTypes.Requireable<string>;
+            countryCode: PropTypes.Requireable<string>;
+        }>>;
+    }
+    namespace defaultProps {
+        let errorMessage_1: null;
+        export { errorMessage_1 as errorMessage };
+        export namespace selectedCountry_1 {
+            let value: string;
+        }
+        export { selectedCountry_1 as selectedCountry };
+    }
+}
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,95 @@
+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';
+/**
+ * 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
+ * - Performing country field validations
+ * - clearing error on focus
+ * - setting value on change and selection
+ */
+const CountryField = (props) => {
+    const { countryList, selectedCountry, onChangeHandler, handleErrorChange, onFocusHandler, } = 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(() => {
+        if (backendCountryCode && backendCountryCode !== (selectedCountry === null || selectedCountry === void 0 ? void 0 : selectedCountry.countryCode)) {
+            let countryCode = '';
+            let countryDisplayValue = '';
+            const countryVal = countryList.find((country) => (country[COUNTRY_CODE_KEY].toLowerCase() === backendCountryCode.toLowerCase()));
+            if (countryVal) {
+                countryCode = countryVal[COUNTRY_CODE_KEY];
+                countryDisplayValue = countryVal[COUNTRY_DISPLAY_KEY];
+            }
+            onChangeHandler({ target: { name: 'country' } }, { countryCode, displayValue: countryDisplayValue });
+        }
+        else if (!selectedCountry.displayValue) {
+            onChangeHandler({ target: { name: 'country' } }, { countryCode: '', displayValue: '' });
+        }
+    }, [backendCountryCode, countryList]); // eslint-disable-line react-hooks/exhaustive-deps
+    const handleOnBlur = (event) => {
+        // Do not run validations when drop-down arrow is clicked
+        if (event.relatedTarget && event.relatedTarget.className.includes('pgn__form-autosuggest__icon-button')) {
+            return;
+        }
+        const { value } = event.target;
+        const { error } = validateCountryField(value.trim(), countryList, formatMessage(messages['empty.country.field.error']), formatMessage(messages['invalid.country.field.error']));
+        handleErrorChange('country', error);
+    };
+    const handleOnFocus = (event) => {
+        handleErrorChange('country', '');
+        dispatch(clearRegistrationBackendError('country'));
+        onFocusHandler(event);
+    };
+    const handleOnChange = (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) => (_jsx(FormAutosuggestOption, { id: country[COUNTRY_CODE_KEY], children: country[COUNTRY_DISPLAY_KEY] }, country[COUNTRY_DISPLAY_KEY])));
+    return (_jsxs("div", { className: "mb-4", children: [_jsx(FormAutosuggest, { floatingLabel: formatMessage(messages['registration.country.label']), "aria-label": "form autosuggest", name: "country", value: countryFieldValue || {}, className: classNames({ 'form-field-error': props.errorMessage }), onFocus: (e) => handleOnFocus(e), onBlur: (e) => handleOnBlur(e), onChange: (value) => handleOnChange(value), children: getCountryList() }), props.errorMessage !== '' && (_jsx(FormControlFeedback, { className: "form-text-size", hasIcon: false, "feedback-for": "country", type: "invalid", children: props.errorMessage }, "error"))] }));
+};
+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;
+//# sourceMappingURL=CountryField.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,8 @@
+export const COUNTRY_CODE_KEY: "code";
+export const COUNTRY_DISPLAY_KEY: "name";
+export default validateCountryField;
+declare function validateCountryField(value: any, countryList: any, emptyErrorMessage: any, invalidCountryErrorMessage: any): {
+    error: string;
+    countryCode: string;
+    displayValue: any;
+};

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

@@ -0,0 +1,29 @@
+export const COUNTRY_CODE_KEY = 'code';
+export const COUNTRY_DISPLAY_KEY = 'name';
+const validateCountryField = (value, countryList, emptyErrorMessage, invalidCountryErrorMessage) => {
+    let countryCode = '';
+    let displayValue = value;
+    let error = '';
+    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];
+        }
+        else {
+            error = invalidCountryErrorMessage;
+        }
+    }
+    else {
+        error = emptyErrorMessage;
+    }
+    return { error, countryCode, displayValue };
+};
+export default validateCountryField;
+//# sourceMappingURL=validator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"validator.js","sourceRoot":"","sources":["../../../../src/register/RegistrationFields/CountryField/validator.js"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC;AACvC,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC;AAE1C,MAAM,oBAAoB,GAAG,CAAC,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,EAAE;IACjG,IAAI,WAAW,GAAG,EAAE,CAAC;IACrB,IAAI,YAAY,GAAG,KAAK,CAAC;IACzB,IAAI,KAAK,GAAG,EAAE,CAAC;IAEf,IAAI,KAAK,EAAE,CAAC;QACV,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;QAC5C,+EAA+E;QAC/E,gDAAgD;QAChD,MAAM,eAAe,GAAG,WAAW,CAAC,IAAI,CACtC,CAAC,OAAO,EAAE,EAAE,CAAC;QACX,6FAA6F;QAC7F,OAAO,CAAC,mBAAmB,CAAC,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,eAAe;eAClE,OAAO,CAAC,gBAAgB,CAAC,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,eAAe,CACtE,CACF,CAAC;QACF,IAAI,eAAe,EAAE,CAAC;YACpB,WAAW,GAAG,eAAe,CAAC,gBAAgB,CAAC,CAAC;YAChD,YAAY,GAAG,eAAe,CAAC,mBAAmB,CAAC,CAAC;QACtD,CAAC;aAAM,CAAC;YACN,KAAK,GAAG,0BAA0B,CAAC;QACrC,CAAC;IACH,CAAC;SAAM,CAAC;QACN,KAAK,GAAG,iBAAiB,CAAC;IAC5B,CAAC;IACD,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,CAAC;AAC9C,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["export const COUNTRY_CODE_KEY = 'code';\nexport const COUNTRY_DISPLAY_KEY = 'name';\n\nconst validateCountryField = (value, countryList, emptyErrorMessage, invalidCountryErrorMessage) => {\n  let countryCode = '';\n  let displayValue = value;\n  let error = '';\n\n  if (value) {\n    const normalizedValue = value.toLowerCase();\n    // Handling a case here where user enters a valid country code that needs to be\n    // evaluated and set its value as a valid value.\n    const selectedCountry = countryList.find(\n      (country) => (\n        // When translations are applied, extra space added in country value, so we should trim that.\n        country[COUNTRY_DISPLAY_KEY].toLowerCase().trim() === normalizedValue\n        || country[COUNTRY_CODE_KEY].toLowerCase().trim() === normalizedValue\n      ),\n    );\n    if (selectedCountry) {\n      countryCode = selectedCountry[COUNTRY_CODE_KEY];\n      displayValue = selectedCountry[COUNTRY_DISPLAY_KEY];\n    } else {\n      error = invalidCountryErrorMessage;\n    }\n  } else {\n    error = emptyErrorMessage;\n  }\n  return { error, countryCode, displayValue };\n};\n\nexport default validateCountryField;\n"]}

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

@@ -0,0 +1,30 @@
+export default EmailField;
+/**
+ * Email field wrapper. It accepts following handlers
+ * - handleChange for setting value change and
+ * - handleErrorChange for setting error
+ *
+ * It is responsible for
+ * - Generating email warning and error suggestions
+ * - Setting and clearing email suggestions
+ * - Performing email field validations
+ * - clearing error on focus
+ * - setting value on change
+ */
+declare function EmailField(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace EmailField {
+    namespace defaultProps {
+        let errorMessage: string;
+        let confirmEmailValue: null;
+    }
+    namespace propTypes {
+        let errorMessage_1: PropTypes.Requireable<string>;
+        export { errorMessage_1 as errorMessage };
+        export let value: PropTypes.Validator<string>;
+        export let handleChange: PropTypes.Validator<(...args: any[]) => any>;
+        export let handleErrorChange: PropTypes.Validator<(...args: any[]) => any>;
+        let confirmEmailValue_1: PropTypes.Requireable<string>;
+        export { confirmEmailValue_1 as confirmEmailValue };
+    }
+}
+import PropTypes from 'prop-types';

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

@@ -0,0 +1,80 @@
+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 { FormGroup } from '../../../common-components';
+import { clearRegistrationBackendError, fetchRealtimeValidations, setEmailSuggestionInStore, } from '../../data/actions';
+import messages from '../../messages';
+import validateEmail from './validator';
+/**
+ * Email field wrapper. It accepts following handlers
+ * - handleChange for setting value change and
+ * - handleErrorChange for setting error
+ *
+ * It is responsible for
+ * - Generating email warning and error suggestions
+ * - Setting and clearing email suggestions
+ * - Performing email field validations
+ * - clearing error on focus
+ * - setting value on change
+ */
+const EmailField = (props) => {
+    const { formatMessage } = useIntl();
+    const dispatch = useDispatch();
+    const { handleChange, handleErrorChange, confirmEmailValue, } = props;
+    const backedUpFormData = useSelector(state => state.register.registrationFormData);
+    const validationApiRateLimited = useSelector(state => state.register.validationApiRateLimited);
+    const [emailSuggestion, setEmailSuggestion] = useState(Object.assign({}, backedUpFormData === null || backedUpFormData === void 0 ? void 0 : backedUpFormData.emailSuggestion));
+    useEffect(() => {
+        setEmailSuggestion(backedUpFormData.emailSuggestion);
+    }, [backedUpFormData.emailSuggestion]);
+    const handleOnBlur = (e) => {
+        const { value } = e.target;
+        const { fieldError, confirmEmailError, suggestion } = validateEmail(value, confirmEmailValue, formatMessage);
+        if (confirmEmailError) {
+            handleErrorChange('confirm_email', confirmEmailError);
+        }
+        dispatch(setEmailSuggestionInStore(suggestion));
+        setEmailSuggestion(suggestion);
+        if (fieldError) {
+            handleErrorChange('email', fieldError);
+        }
+        else if (!validationApiRateLimited) {
+            dispatch(fetchRealtimeValidations({ email: value }));
+        }
+    };
+    const handleOnFocus = () => {
+        handleErrorChange('email', '');
+        dispatch(clearRegistrationBackendError('email'));
+    };
+    const handleSuggestionClick = (event) => {
+        event.preventDefault();
+        handleErrorChange('email', '');
+        handleChange({ target: { name: 'email', value: emailSuggestion.suggestion } });
+        setEmailSuggestion({ suggestion: '', type: '' });
+    };
+    const handleSuggestionClosed = () => setEmailSuggestion({ suggestion: '', type: '' });
+    const renderEmailFeedback = () => {
+        if (emailSuggestion.type === 'error') {
+            return (_jsx(Alert, { variant: "danger", className: "email-suggestion-alert-error mt-1", icon: Error, children: _jsxs("span", { className: "email-suggestion__text", children: [formatMessage(messages['did.you.mean.alert.text']), ' ', _jsx(Alert.Link, { href: "#", name: "email", onClick: handleSuggestionClick, children: emailSuggestion.suggestion }), "?", _jsx(Icon, { src: Close, className: "email-suggestion__close", onClick: handleSuggestionClosed, tabIndex: "0" })] }) }));
+        }
+        return (_jsxs("span", { id: "email-warning", className: "small", children: [formatMessage(messages['did.you.mean.alert.text']), ":", ' ', _jsx(Alert.Link, { href: "#", name: "email", className: "email-suggestion-alert-warning", onClick: handleSuggestionClick, children: emailSuggestion.suggestion }), "?"] }));
+    };
+    return (_jsx(FormGroup, Object.assign({ borderClass: emailSuggestion.type === 'warning' ? 'yellow-border' : '', maxLength: 254 }, props, { handleBlur: handleOnBlur, handleFocus: handleOnFocus, children: emailSuggestion.suggestion ? renderEmailFeedback() : null })));
+};
+EmailField.defaultProps = {
+    errorMessage: '',
+    confirmEmailValue: null,
+};
+EmailField.propTypes = {
+    errorMessage: PropTypes.string,
+    value: PropTypes.string.isRequired,
+    handleChange: PropTypes.func.isRequired,
+    handleErrorChange: PropTypes.func.isRequired,
+    confirmEmailValue: PropTypes.string,
+};
+export default EmailField;
+//# sourceMappingURL=EmailField.js.map

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

@@ -0,0 +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"]}

package/dist/register/RegistrationFields/EmailField/constants.d.ts

@@ -0,0 +1,3 @@
+export const COMMON_EMAIL_PROVIDERS: string[];
+export const DEFAULT_SERVICE_PROVIDER_DOMAINS: string[];
+export const DEFAULT_TOP_LEVEL_DOMAINS: string[];