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

package/src/progressive-profiling/ProgressiveProfiling.jsx

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

@@ -1,56 +0,0 @@
-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/reducers.js

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

@@ -1,24 +0,0 @@
-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/service.js

@@ -1,17 +0,0 @@
-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/messages.jsx

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