@openedx/frontend-app-authn 1.0.0-alpha.0

package/src/progressive-profiling/ProgressiveProfiling.jsx

@@ -0,0 +1,313 @@
+import { useEffect, useState } from 'react';
+import { connect } from 'react-redux';
+
+import {
+  AxiosJwtAuthService,
+  configureAuth,
+  useAppConfig,
+  getAuthenticatedUser,
+  getSiteConfig,
+  getLoggingService,
+  identifyAuthenticatedUser,
+  sendPageEvent,
+  sendTrackEvent,
+  snakeCaseObject,
+  useIntl
+} from '@openedx/frontend-base';
+import {
+  Alert,
+  Form,
+  Hyperlink,
+  Spinner,
+  StatefulButton,
+} from '@openedx/paragon';
+import { Error } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+import { useLocation } from 'react-router-dom';
+
+import BaseContainer from '../base-container';
+import { RedirectLogistration } from '../common-components';
+import { getThirdPartyAuthContext } from '../common-components/data/actions';
+import {
+  COMPLETE_STATE,
+  DEFAULT_REDIRECT_URL,
+  DEFAULT_STATE,
+  FAILURE_STATE,
+  PENDING_STATE,
+} from '../data/constants';
+import isOneTrustFunctionalCookieEnabled from '../data/oneTrust';
+import { getAllPossibleQueryParams, isHostAvailableInQueryParams } from '../data/utils';
+import { FormFieldRenderer } from '../field-renderer';
+import { saveUserProfile } from './data/actions';
+import { welcomePageContextSelector } from './data/selectors';
+import messages from './messages';
+import ProgressiveProfilingPageModal from './ProgressiveProfilingPageModal';
+
+const ProgressiveProfiling = (props) => {
+  const { formatMessage } = useIntl();
+  const {
+    getFieldDataFromBackend,
+    submitState,
+    showError,
+    welcomePageContext,
+    welcomePageContextApiStatus,
+  } = props;
+  const {
+    SEARCH_CATALOG_URL,
+    AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK
+  } = useAppConfig();
+  const location = useLocation();
+  const registrationEmbedded = isHostAvailableInQueryParams();
+
+  const queryParams = getAllPossibleQueryParams();
+  const authenticatedUser = getAuthenticatedUser() || location.state?.authenticatedUser;
+  const functionalCookiesConsent = isOneTrustFunctionalCookieEnabled();
+
+  const [registrationResult, setRegistrationResult] = useState({ redirectUrl: '' });
+  const [formFieldData, setFormFieldData] = useState({ fields: {}, extendedProfile: [] });
+  const [values, setValues] = useState({});
+  const [showModal, setShowModal] = useState(false);
+
+  useEffect(() => {
+    if (registrationEmbedded) {
+      getFieldDataFromBackend({ is_welcome_page: true, next: queryParams?.next });
+    } else {
+      configureAuth(AxiosJwtAuthService, { mockLoggingService: getLoggingService(), config: getSiteConfig() });
+    }
+  }, [registrationEmbedded, getFieldDataFromBackend, queryParams?.next]);
+
+  useEffect(() => {
+    const registrationResponse = location.state?.registrationResult;
+    if (registrationResponse) {
+      setRegistrationResult(registrationResponse);
+      setFormFieldData({
+        fields: location.state?.optionalFields.fields,
+        extendedProfile: location.state?.optionalFields.extended_profile,
+      });
+    }
+  }, [location.state]);
+
+  useEffect(() => {
+    if (registrationEmbedded && Object.keys(welcomePageContext).includes('fields')) {
+      setFormFieldData({
+        fields: welcomePageContext.fields,
+        extendedProfile: welcomePageContext.extended_profile,
+      });
+      const nextUrl = welcomePageContext.nextUrl ? welcomePageContext.nextUrl : SEARCH_CATALOG_URL;
+      setRegistrationResult({ redirectUrl: nextUrl });
+    }
+  }, [registrationEmbedded, welcomePageContext]);
+
+  useEffect(() => {
+    if (authenticatedUser?.userId) {
+      identifyAuthenticatedUser(authenticatedUser.userId);
+      sendPageEvent('login_and_registration', 'welcome');
+    }
+  }, [authenticatedUser]);
+
+  if (
+    !authenticatedUser
+    || !(location.state?.registrationResult || registrationEmbedded)
+    || welcomePageContextApiStatus === FAILURE_STATE
+    || (welcomePageContextApiStatus === COMPLETE_STATE && !Object.keys(welcomePageContext).includes('fields'))
+  ) {
+    const DASHBOARD_URL = getSiteConfig().lmsBaseUrl.concat(DEFAULT_REDIRECT_URL);
+    global.location.assign(DASHBOARD_URL);
+    return null;
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    window.history.replaceState(location.state, null, '');
+    const payload = { ...values, extendedProfile: [] };
+    if (Object.keys(formFieldData.extendedProfile).length > 0) {
+      formFieldData.extendedProfile.forEach(fieldName => {
+        if (values[fieldName]) {
+          payload.extendedProfile.push({ fieldName, fieldValue: values[fieldName] });
+        }
+        delete payload[fieldName];
+      });
+    }
+    props.saveUserProfile(authenticatedUser.username, snakeCaseObject(payload));
+
+    sendTrackEvent(
+      'edx.bi.welcome.page.submit.clicked',
+      {
+        isGenderSelected: !!values.gender,
+        isYearOfBirthSelected: !!values.year_of_birth,
+        isLevelOfEducationSelected: !!values.level_of_education,
+        isWorkExperienceSelected: !!values.work_experience,
+        host: queryParams?.host || '',
+      },
+    );
+  };
+
+  const handleSkip = (e) => {
+    e.preventDefault();
+    window.history.replaceState(location.state, null, '');
+    setShowModal(true);
+    sendTrackEvent(
+      'edx.bi.welcome.page.skip.link.clicked',
+      {
+        host: queryParams?.host || '',
+      },
+    );
+  };
+
+  const onChangeHandler = (e) => {
+    if (e.target.type === 'checkbox') {
+      setValues({ ...values, [e.target.name]: e.target.checked });
+    } else {
+      setValues({ ...values, [e.target.name]: e.target.value });
+    }
+  };
+
+  const formFields = Object.keys(formFieldData.fields).map((fieldName) => {
+    const fieldData = formFieldData.fields[fieldName];
+    return (
+      <span key={fieldData.name}>
+        <FormFieldRenderer
+          fieldData={fieldData}
+          value={values[fieldData.name]}
+          onChangeHandler={onChangeHandler}
+        />
+      </span>
+    );
+  });
+
+  return (
+    <BaseContainer showWelcomeBanner fullName={authenticatedUser?.fullName || authenticatedUser?.name}>
+      <Helmet>
+        <title>{formatMessage(
+          messages['progressive.profiling.page.title'],
+          { siteName: getSiteConfig().siteName }
+        )}
+        </title>
+      </Helmet>
+      <ProgressiveProfilingPageModal isOpen={showModal} redirectUrl={registrationResult.redirectUrl} />
+      {(props.shouldRedirect && welcomePageContext.nextUrl) && (
+        <RedirectLogistration
+          success
+          redirectUrl={registrationResult.redirectUrl}
+        />
+      )}
+      {props.shouldRedirect && (
+        <RedirectLogistration
+          success
+          redirectUrl={registrationResult.redirectUrl}
+          educationLevel={values?.level_of_education}
+          userId={authenticatedUser?.userId}
+        />
+      )}
+      <div className="mw-xs m-4 pp-page-content">
+        {registrationEmbedded && welcomePageContextApiStatus === PENDING_STATE ? (
+          <Spinner animation="border" variant="primary" id="tpa-spinner" />
+        ) : (
+          <>
+            <div>
+              <h2 className="pp-page__heading text-primary">{formatMessage(messages['progressive.profiling.page.heading'])}</h2>
+            </div><hr className="border-light-700 mb-4" />
+            {showError ? (
+              <Alert id="pp-page-errors" className="mb-3" variant="danger" icon={Error}>
+                <Alert.Heading>{formatMessage(messages['welcome.page.error.heading'])}</Alert.Heading>
+                <p>{formatMessage(messages['welcome.page.error.message'])}</p>
+              </Alert>
+            ) : null}
+            <Form>
+              {formFields}
+              {(AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK) && (
+                <span className="pp-page__support-link">
+                  <Hyperlink
+                    isInline
+                    variant="muted"
+                    destination={AUTHN_PROGRESSIVE_PROFILING_SUPPORT_LINK}
+                    target="_blank"
+                    showLaunchIcon={false}
+                    onClick={() => (sendTrackEvent('edx.bi.welcome.page.support.link.clicked'))}
+                  >
+                    {formatMessage(messages['optional.fields.information.link'])}
+                  </Hyperlink>
+                </span>
+              )}
+              <div className="d-flex mt-4 mb-3">
+                <StatefulButton
+                  type="submit"
+                  variant="brand"
+                  className="pp-page__button-width"
+                  state={submitState}
+                  labels={{
+                    default: formatMessage(messages['optional.fields.submit.button']),
+                    pending: '',
+                  }}
+                  onClick={handleSubmit}
+                  onMouseDown={(e) => e.preventDefault()}
+                />
+                <StatefulButton
+                  className="text-gray-700 font-weight-500"
+                  type="submit"
+                  variant="link"
+                  labels={{
+                    default: formatMessage(messages['optional.fields.skip.button']),
+                  }}
+                  onClick={handleSkip}
+                  onMouseDown={(e) => e.preventDefault()}
+                />
+              </div>
+            </Form>
+          </>
+        )}
+
+      </div>
+    </BaseContainer>
+  );
+};
+
+ProgressiveProfiling.propTypes = {
+  authenticatedUser: PropTypes.shape({
+    username: PropTypes.string,
+    userId: PropTypes.number,
+    fullName: PropTypes.string,
+  }),
+  showError: PropTypes.bool,
+  shouldRedirect: PropTypes.bool,
+  submitState: PropTypes.string,
+  welcomePageContext: PropTypes.shape({
+    extended_profile: PropTypes.arrayOf(PropTypes.string),
+    fields: PropTypes.shape({}),
+    nextUrl: PropTypes.string,
+  }),
+  welcomePageContextApiStatus: PropTypes.string,
+  // Actions
+  getFieldDataFromBackend: PropTypes.func.isRequired,
+  saveUserProfile: PropTypes.func.isRequired,
+};
+
+ProgressiveProfiling.defaultProps = {
+  authenticatedUser: {},
+  shouldRedirect: false,
+  showError: false,
+  submitState: DEFAULT_STATE,
+  welcomePageContext: {},
+  welcomePageContextApiStatus: PENDING_STATE,
+};
+
+const mapStateToProps = state => {
+  const welcomePageStore = state.welcomePage;
+
+  return {
+    shouldRedirect: welcomePageStore.success,
+    showError: welcomePageStore.showError,
+    submitState: welcomePageStore.submitState,
+    welcomePageContext: welcomePageContextSelector(state),
+    welcomePageContextApiStatus: state.commonComponents.thirdPartyAuthApiStatus,
+  };
+};
+
+export default connect(
+  mapStateToProps,
+  {
+    saveUserProfile,
+    getFieldDataFromBackend: getThirdPartyAuthContext,
+  },
+)(ProgressiveProfiling);

package/src/progressive-profiling/ProgressiveProfilingPageModal.jsx

@@ -0,0 +1,56 @@
+import { getSiteConfig, useIntl } from '@openedx/frontend-base';
+import { ActionRow, Button, ModalDialog } from '@openedx/paragon';
+import PropTypes from 'prop-types';
+
+import messages from './messages';
+
+const ProgressiveProfilingPageModal = (props) => {
+  const { formatMessage } = useIntl();
+  const { isOpen, redirectUrl } = props;
+  const platformName = getSiteConfig().siteName;
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    window.location.href = redirectUrl;
+  };
+
+  return (
+    <ModalDialog
+      title={formatMessage(messages['modal.title'])}
+      isOpen={isOpen}
+      onClose={() => { }}
+      size="sm"
+      variant="default"
+      hasCloseButton={false}
+    >
+      <ModalDialog.Header>
+        <ModalDialog.Title>
+          {formatMessage(messages['modal.title'])}
+        </ModalDialog.Title>
+      </ModalDialog.Header>
+
+      <ModalDialog.Body>
+        {formatMessage(messages['modal.description'])}
+      </ModalDialog.Body>
+
+      <ModalDialog.Footer>
+        <ActionRow>
+          <Button onClick={handleSubmit} variant="primary">
+            {formatMessage(messages['continue.to.platform'], { platformName })}
+          </Button>
+        </ActionRow>
+      </ModalDialog.Footer>
+    </ModalDialog>
+  );
+};
+
+ProgressiveProfilingPageModal.propTypes = {
+  isOpen: PropTypes.bool,
+  redirectUrl: PropTypes.string.isRequired,
+};
+
+ProgressiveProfilingPageModal.defaultProps = {
+  isOpen: false,
+};
+
+export default ProgressiveProfilingPageModal;

package/src/progressive-profiling/data/actions.js

@@ -0,0 +1,22 @@
+import { AsyncActionType } from '../../data/utils';
+
+export const GET_FIELDS_DATA = new AsyncActionType('FIELD_DESCRIPTION', 'GET_FIELDS_DATA');
+export const SAVE_USER_PROFILE = new AsyncActionType('USER_PROFILE', 'SAVE_USER_PROFILE');
+
+// save additional user information
+export const saveUserProfile = (username, data) => ({
+  type: SAVE_USER_PROFILE.BASE,
+  payload: { username, data },
+});
+
+export const saveUserProfileBegin = () => ({
+  type: SAVE_USER_PROFILE.BEGIN,
+});
+
+export const saveUserProfileSuccess = () => ({
+  type: SAVE_USER_PROFILE.SUCCESS,
+});
+
+export const saveUserProfileFailure = () => ({
+  type: SAVE_USER_PROFILE.FAILURE,
+});

package/src/progressive-profiling/data/reducers.js

@@ -0,0 +1,38 @@
+import { SAVE_USER_PROFILE } from './actions';
+import {
+  DEFAULT_STATE, PENDING_STATE,
+} from '../../data/constants';
+
+export const defaultState = {
+  extendedProfile: [],
+  fieldDescriptions: {},
+  success: false,
+  submitState: DEFAULT_STATE,
+  showError: false,
+};
+
+const reducer = (state = defaultState, action = {}) => {
+  switch (action.type) {
+    case SAVE_USER_PROFILE.BEGIN:
+      return {
+        ...state,
+        submitState: PENDING_STATE,
+      };
+    case SAVE_USER_PROFILE.SUCCESS:
+      return {
+        ...state,
+        success: true,
+        showError: false,
+      };
+    case SAVE_USER_PROFILE.FAILURE:
+      return {
+        ...state,
+        submitState: DEFAULT_STATE,
+        showError: true,
+      };
+    default:
+      return state;
+  }
+};
+
+export default reducer;

package/src/progressive-profiling/data/sagas.js

@@ -0,0 +1,24 @@
+import { call, put, takeEvery } from 'redux-saga/effects';
+
+import {
+  SAVE_USER_PROFILE,
+  saveUserProfileBegin,
+  saveUserProfileFailure,
+  saveUserProfileSuccess,
+} from './actions';
+import { patchAccount } from './service';
+
+export function* saveUserProfileInformation(action) {
+  try {
+    yield put(saveUserProfileBegin());
+    yield call(patchAccount, action.payload.username, action.payload.data);
+
+    yield put(saveUserProfileSuccess());
+  } catch (e) {
+    yield put(saveUserProfileFailure());
+  }
+}
+
+export default function* saga() {
+  yield takeEvery(SAVE_USER_PROFILE.BASE, saveUserProfileInformation);
+}

package/src/progressive-profiling/data/selectors.js

@@ -0,0 +1,14 @@
+import { createSelector } from 'reselect';
+
+export const storeName = 'commonComponents';
+
+export const commonComponentsSelector = state => ({ ...state[storeName] });
+
+export const welcomePageContextSelector = createSelector(
+  commonComponentsSelector,
+  commonComponents => ({
+    fields: commonComponents.optionalFields.fields,
+    extended_profile: commonComponents.optionalFields.extended_profile,
+    nextUrl: commonComponents.thirdPartyAuthContext.welcomePageRedirectUrl,
+  }),
+);

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

@@ -0,0 +1,17 @@
+import { getAuthenticatedHttpClient, getSiteConfig } from '@openedx/frontend-base';
+
+export async function patchAccount(username, commitValues) {
+  const requestConfig = {
+    headers: { 'Content-Type': 'application/merge-patch+json' },
+  };
+
+  await getAuthenticatedHttpClient()
+    .patch(
+      `${getSiteConfig().lmsBaseUrl}/api/user/v1/accounts/${username}`,
+      commitValues,
+      requestConfig,
+    )
+    .catch((error) => {
+      throw (error);
+    });
+}

package/src/progressive-profiling/index.js

@@ -0,0 +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';

package/src/progressive-profiling/messages.jsx

@@ -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;