@openedx/frontend-app-learner-dashboard 1.0.0-alpha.5 → 1.0.0-alpha.7

package/src/widgets/LearnerDashboardHeader/ConfirmEmailBanner/hooks.js

@@ -1,45 +0,0 @@
-import { useContext, useState } from 'react';
-
-import GlobalDataContext from '../../../data/contexts/GlobalDataContext';
-import { StrictDict } from '../../../utils';
-import { apiHooks } from '../../../hooks';
-
-import * as module from './hooks';
-
-export const state = StrictDict({
-  showPageBanner: (val) => useState(val), // eslint-disable-line
-  showConfirmModal: (val) => useState(val), // eslint-disable-line
-});
-
-export const useConfirmEmailBannerData = () => {
-  const { emailConfirmation } = useContext(GlobalDataContext);
-  const { isNeeded } = emailConfirmation;
-  const [showPageBanner, setShowPageBanner] = module.state.showPageBanner(isNeeded);
-  const [showConfirmModal, setShowConfirmModal] = module.state.showConfirmModal(false);
-  const closePageBanner = () => setShowPageBanner(false);
-  const closeConfirmModal = () => setShowConfirmModal(false);
-  const openConfirmModal = () => setShowConfirmModal(true);
-  const sendConfirmEmail = apiHooks.useSendConfirmEmail();
-
-  const openConfirmModalButtonClick = () => {
-    sendConfirmEmail();
-    openConfirmModal();
-    closePageBanner();
-  };
-
-  const userConfirmEmailButtonClick = () => {
-    closeConfirmModal();
-    closePageBanner();
-  };
-  return {
-    isNeeded,
-    showPageBanner,
-    closePageBanner,
-    showConfirmModal,
-    closeConfirmModal,
-    openConfirmModalButtonClick,
-    userConfirmEmailButtonClick,
-  };
-};
-
-export default useConfirmEmailBannerData;

package/src/widgets/LearnerDashboardHeader/ConfirmEmailBanner/index.jsx

@@ -1,66 +0,0 @@
-import { useIntl } from '@openedx/frontend-base';
-import { Button, Image, MarketingModal, ModalDialog, PageBanner } from '@openedx/paragon';
-
-import confirmEmailSVG from './assets/confirm-email.svg';
-import messages from './messages';
-import './ConfirmEmailBanner.scss';
-import useConfirmEmailBannerData from './hooks';
-
-export const ConfirmEmailBanner = () => {
-  const {
-    isNeeded,
-    showConfirmModal,
-    showPageBanner,
-    closePageBanner,
-    closeConfirmModal,
-    openConfirmModalButtonClick,
-    userConfirmEmailButtonClick,
-  } = useConfirmEmailBannerData();
-  const { formatMessage } = useIntl();
-
-  if (!isNeeded) { return null; }
-
-  return (
-    <>
-      <PageBanner show={showPageBanner} dismissible onDismiss={closePageBanner}>
-        {formatMessage(messages.confirmEmailTextReminderBanner, {
-          confirmNowButton: (
-            <Button
-              className="confirm-email-now-button"
-              variant="link"
-              size="inline"
-              onClick={openConfirmModalButtonClick}
-            >
-              {formatMessage(messages.confirmNowButton)}
-            </Button>
-          ),
-        })}
-      </PageBanner>
-      <MarketingModal
-        title=""
-        isOpen={showConfirmModal}
-        onClose={closeConfirmModal}
-        hasCloseButton={false}
-        heroNode={(
-          <ModalDialog.Hero className="bg-gray-300">
-            <Image
-              className="m-auto"
-              src={confirmEmailSVG}
-              alt={formatMessage(messages.confirmEmailImageAlt)}
-            />
-          </ModalDialog.Hero>
-        )}
-        footerNode={(
-          <Button className="mx-auto my-3" variant="danger" onClick={userConfirmEmailButtonClick}>
-            {formatMessage(messages.verifiedConfirmEmailButton)}
-          </Button>
-        )}
-      >
-        <h2 className="text-center p-3 h1">{formatMessage(messages.confirmEmailModalHeader)}</h2>
-        <p className="text-center">{formatMessage(messages.confirmEmailModalBody)}</p>
-      </MarketingModal>
-    </>
-  );
-};
-
-export default ConfirmEmailBanner;

package/src/widgets/LearnerDashboardHeader/ConfirmEmailBanner/messages.js

@@ -1,36 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  confirmNowButton: {
-    id: 'leanerDashboard.confirmEmailBanner',
-    description: 'Button for sending confirm email and open modal',
-    defaultMessage: 'Confirm Now',
-  },
-  confirmEmailTextReminderBanner: {
-    id: 'leanerDashboard.confirmEmailTextReminderBanner',
-    description: 'Text for reminding user to confirm email',
-    defaultMessage: 'Remember to confirm your email so that you can keep learning! {confirmNowButton}.',
-  },
-  verifiedConfirmEmailButton: {
-    id: 'leanerDashboard.verifiedConfirmEmailButton',
-    description: 'Button for verified confirming email',
-    defaultMessage: 'I\'ve confirmed my email',
-  },
-  confirmEmailModalHeader: {
-    id: 'leanerDashboard.confirmEmailModalHeader',
-    description: 'title for confirming email modal',
-    defaultMessage: 'Confirm your email',
-  },
-  confirmEmailModalBody: {
-    id: 'leanerDashboard.confirmEmailModalBody',
-    description: 'text hint for confirming email modal',
-    defaultMessage: 'We\'ve sent you an email to verify your account. Please check your inbox and click on the big red button to confirm and keep learning.',
-  },
-  confirmEmailImageAlt: {
-    id: 'leanerDashboard.confirmEmailImageAlt',
-    description: 'text alt confirm email image',
-    defaultMessage: 'confirm email background',
-  },
-});
-
-export default messages;

package/src/widgets/LearnerDashboardHeader/CoursesLink.jsx

@@ -1,14 +0,0 @@
-import { useIntl } from '@openedx/frontend-base';
-
-import messages from './messages';
-
-export default function CoursesLink() {
-  const { formatMessage } = useIntl();
-
-  return (
-    <div className="d-flex">
-      <span>{formatMessage(messages.course)}</span>
-    </div>
-  );
-}
-

package/src/widgets/LearnerDashboardHeader/DiscoverLinkMenuItem.jsx

@@ -1,30 +0,0 @@
-import { useContext } from 'react';
-import { LinkMenuItem, useIntl } from '@openedx/frontend-base';
-
-import GlobalDataContext from '../../data/contexts/GlobalDataContext';
-import urls from '../../data/services/lms/urls';
-import messages from './messages';
-
-function DiscoverLink() {
-  const { formatMessage } = useIntl();
-
-  return (
-    <div className="d-flex">
-      <span>{formatMessage(messages.discoverNew)}</span>
-    </div>
-  );
-}
-
-export default function DiscoverLinkMenuItem({ variant = 'hyperlink' }) {
-  const { platformSettings } = useContext(GlobalDataContext);
-  const { courseSearchUrl } = platformSettings;
-  const url = urls.baseAppUrl(courseSearchUrl);
-
-  return (
-    <LinkMenuItem
-      label={<DiscoverLink />}
-      url={url}
-      variant={variant}
-    />
-  );
-}

package/src/widgets/LearnerDashboardHeader/MasqueradeBar/hooks.js

@@ -1,69 +0,0 @@
-import { useState, useContext } from 'react';
-import { useIntl } from '@openedx/frontend-base';
-
-import MasqueradeUserContext from '../../../data/contexts/MasqueradeUserContext';
-import { StrictDict } from '../../../utils';
-
-import * as module from './hooks';
-import messages from './messages';
-
-export const state = StrictDict({
-  masqueradeInput: (val) => useState(val), // eslint-disable-line
-});
-
-export const useMasqueradeInput = () => {
-  const [masqueradeInput, setMasqueradeInput] = module.state.masqueradeInput('');
-  const handleMasqueradeInputChange = (e) => setMasqueradeInput(e.target.value);
-  return {
-    handleMasqueradeInputChange,
-    masqueradeInput,
-  };
-};
-
-const masqueradeErrorMessageMap = {
-  404: messages.NoStudentFound,
-};
-
-export const getMasqueradeErrorMessage = (errorStatus) => {
-  if (errorStatus == null) {
-    return null;
-  }
-  return masqueradeErrorMessageMap[errorStatus] ?? messages.UnknownError;
-};
-
-export const useMasqueradeBarData = ({
-  authenticatedUser,
-}) => {
-  const { formatMessage } = useIntl();
-  const { setMasqueradeUser } = useContext(MasqueradeUserContext);
-  const handleClearMasquerade = () => setMasqueradeUser(null);
-
-  const {
-    masqueradeIsSuccess,
-    masqueradeIsPending,
-    masqueradeIsError,
-    masqueradeError,
-  } = useContext(MasqueradeUserContext);
-  const { masqueradeInput, handleMasqueradeInputChange } = module.useMasqueradeInput();
-
-  const masqueradeErrorMessage = getMasqueradeErrorMessage(masqueradeError?.customAttributes?.httpErrorStatus);
-  const handleMasqueradeSubmit = (user) => (e) => {
-    setMasqueradeUser(user);
-    e.preventDefault();
-  };
-
-  return {
-    canMasquerade: authenticatedUser?.administrator,
-    isMasquerading: masqueradeIsSuccess,
-    isMasqueradingFailed: masqueradeIsError,
-    isMasqueradingPending: masqueradeIsPending,
-    masqueradeErrorMessage,
-    masqueradeInput,
-    handleMasqueradeSubmit,
-    handleClearMasquerade,
-    handleMasqueradeInputChange,
-    formatMessage,
-  };
-};
-
-export default useMasqueradeBarData;

package/src/widgets/LearnerDashboardHeader/MasqueradeBar/index.jsx

@@ -1,92 +0,0 @@
-import { useContext } from 'react';
-import { SiteContext } from '@openedx/frontend-base';
-
-import {
-  Chip,
-  Form,
-  FormControl,
-  FormControlFeedback,
-  FormLabel,
-  FormGroup,
-  StatefulButton,
-  Icon,
-} from '@openedx/paragon';
-import { Close, PersonSearch } from '@openedx/paragon/icons';
-
-import messages from './messages';
-import { useMasqueradeBarData } from './hooks';
-import './index.scss';
-
-export const MasqueradeBar = () => {
-  const { authenticatedUser } = useContext(SiteContext);
-
-  const {
-    canMasquerade,
-    isMasquerading,
-    isMasqueradingFailed,
-    isMasqueradingPending,
-    masqueradeInput,
-    masqueradeErrorMessage,
-    handleMasqueradeInputChange,
-    handleClearMasquerade,
-    handleMasqueradeSubmit,
-    formatMessage,
-  } = useMasqueradeBarData({ authenticatedUser });
-
-  if (!canMasquerade) { return null; }
-
-  return (
-    <div className="w-100 shadow-sm px-2">
-      <Form className="masquerade-bar w-100">
-        {isMasquerading ? (
-          <>
-            <FormLabel inline="true" className="masquerade-form-label">
-              <Icon src={PersonSearch} />
-              {formatMessage(messages.ViewingAs)}
-            </FormLabel>
-            <Chip
-              className="masquerade-chip"
-              iconAfter={Close}
-              onClick={handleClearMasquerade}
-            >
-              {masqueradeInput}
-            </Chip>
-          </>
-        ) : (
-          <>
-            <FormLabel inline="true" id="masquerade-form-label" className="masquerade-form-label">
-              <Icon src={PersonSearch} />
-              {formatMessage(messages.ViewAs)}
-            </FormLabel>
-            <FormGroup isInvalid={isMasqueradingFailed} className="masquerade-form-input">
-              <FormControl
-                value={masqueradeInput}
-                onChange={handleMasqueradeInputChange}
-                floatingLabel={formatMessage(messages.StudentNameInput)}
-                aria-labelledby="masquerade-form-label"
-              />
-              {isMasqueradingFailed && (
-                <FormControlFeedback type="invalid" hasIcon={false}>
-                  {formatMessage(masqueradeErrorMessage)}
-                </FormControlFeedback>
-              )}
-            </FormGroup>
-            <StatefulButton
-              disabled={!masqueradeInput.length}
-              variant="brand"
-              onClick={handleMasqueradeSubmit(masqueradeInput)}
-              labels={{
-                default: formatMessage(messages.SubmitButton),
-              }}
-              className="mr-3"
-              state={isMasqueradingPending ? 'pending' : 'default'}
-              type="submit"
-            />
-          </>
-        )}
-      </Form>
-    </div>
-  );
-};
-
-export default MasqueradeBar;

package/src/widgets/LearnerDashboardHeader/MasqueradeBar/messages.js

@@ -1,36 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  ViewAs: {
-    id: 'MasqueradeBar.ViewAs',
-    defaultMessage: 'View as: ',
-    description: 'Label for the View as',
-  },
-  ViewingAs: {
-    id: 'MasqueradeBar.ViewingAs',
-    defaultMessage: 'Viewing as: ',
-    description: 'Label for the Viewing as',
-  },
-  SubmitButton: {
-    id: 'MasqueradeBar.SubmitButton',
-    defaultMessage: 'Submit',
-    description: 'Label for the Submit button',
-  },
-  StudentNameInput: {
-    id: 'MasqueradeBar.StudentNameInput',
-    defaultMessage: 'Username or email',
-    description: 'Label for the Student Name or email input',
-  },
-  NoStudentFound: {
-    id: 'MasqueradeBar.NoStudentFound',
-    defaultMessage: 'No student with this username or email could be found',
-    description: 'Error message when no student is found',
-  },
-  UnknownError: {
-    id: 'MasqueradeBar.UnknownError',
-    defaultMessage: 'An unknown error occurred',
-    description: 'Error message when an unknown error occurs',
-  },
-});
-
-export default messages;

package/src/widgets/LearnerDashboardHeader/OrderHistoryLinkMenuItem.jsx

@@ -1,29 +0,0 @@
-import { LinkMenuItem, getAppConfig, useIntl } from '@openedx/frontend-base';
-
-import { appId } from '../../constants';
-import messages from './messages';
-
-function OrderHistoryLink() {
-  const { formatMessage } = useIntl();
-
-  return (
-    <div className="d-flex">
-      <span>{formatMessage(messages.orderHistory)}</span>
-    </div>
-  );
-}
-
-export default function OrderHistoryLinkMenuItem({ variant = 'hyperlink' }) {
-  const { ORDER_HISTORY_URL: url } = getAppConfig(appId);
-
-  if (!url)
-    return null;
-
-  return (
-    <LinkMenuItem
-      label={<OrderHistoryLink />}
-      url={url}
-      variant={variant}
-    />
-  );
-}

package/src/widgets/LearnerDashboardHeader/ProgramsLinkMenuItem.jsx

@@ -1,26 +0,0 @@
-import { LinkMenuItem, useIntl } from '@openedx/frontend-base';
-
-import urls from '../../data/services/lms/urls';
-import messages from './messages';
-
-function ProgramsLink() {
-  const { formatMessage } = useIntl();
-
-  return (
-    <div className="d-flex">
-      <span>{formatMessage(messages.program)}</span>
-    </div>
-  );
-}
-
-export default function ProgramsLinkMenuItem({ variant = 'hyperlink' }) {
-  const url = urls.programsUrl();
-
-  return (
-    <LinkMenuItem
-      label={<ProgramsLink />}
-      url={url}
-      variant={variant}
-    />
-  );
-}

package/src/widgets/LearnerDashboardHeader/SupportLinkMenuItem.jsx

@@ -1,29 +0,0 @@
-import { LinkMenuItem, getAppConfig, useIntl } from '@openedx/frontend-base';
-
-import { appId } from '../../constants';
-import messages from './messages';
-
-function SupportLink() {
-  const { formatMessage } = useIntl();
-
-  return (
-    <div className="d-flex">
-      <span>{formatMessage(messages.help)}</span>
-    </div>
-  );
-}
-
-export default function SupportLinkMenuItem({ variant = 'hyperlink' }) {
-  const { SUPPORT_URL: url } = getAppConfig(appId);
-
-  if (!url)
-    return null;
-
-  return (
-    <LinkMenuItem
-      label={<SupportLink />}
-      url={url}
-      variant={variant}
-    />
-  );
-}

package/src/widgets/LearnerDashboardHeader/app.tsx

@@ -1,93 +0,0 @@
-import { App, LinkMenuItem, WidgetOperationTypes, getAppConfig } from '@openedx/frontend-base';
-
-import { appId } from '../../constants';
-
-import ConfirmEmailBanner from './ConfirmEmailBanner';
-import MasqueradeBar from './MasqueradeBar';
-import CoursesLink from './CoursesLink';
-import DiscoverLinkMenuItem from './DiscoverLinkMenuItem';
-import ProgramsLinkMenuItem from './ProgramsLinkMenuItem';
-import SupportLinkMenuItem from './SupportLinkMenuItem';
-import OrderHistoryLinkMenuItem from './OrderHistoryLinkMenuItem';
-
-const app: App = {
-  appId: 'org.openedx.frontend.app.learnerDashboard.header',
-  slots: [
-    {
-      slotId: 'org.openedx.frontend.slot.header.main.v1',
-      id: 'org.openedx.frontend.widget.learnerDashboard.headerConfirmEmail.v1',
-      op: WidgetOperationTypes.PREPEND,
-      component: ConfirmEmailBanner,
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
-      id: 'org.openedx.frontend.widget.learnerDashboard.headerLinkCourses.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: (
-        <LinkMenuItem
-          label={<CoursesLink />}
-          url="/"
-          variant="navLink"
-        />
-      )
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
-      id: 'org.openedx.frontend.widget.learnerDashboard.headerLinkPrograms.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: (
-        <ProgramsLinkMenuItem
-          variant="navLink"
-        />
-      ),
-      condition: {
-        callback: () => getAppConfig(appId).ENABLE_PROGRAMS === true,
-      }
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.header.primaryLinks.v1',
-      id: 'org.openedx.frontend.widget.learnerDashboard.headerLinkDiscover.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: (
-        <DiscoverLinkMenuItem
-          variant="navLink"
-        />
-      ),
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.header.secondaryLinks.v1',
-      id: 'org.openedx.frontend.widget.learnerDashboard.headerLinkSupport.v1',
-      op: WidgetOperationTypes.APPEND,
-      element: (
-        <SupportLinkMenuItem
-          variant="navLink"
-        />
-      ),
-      condition: {
-        callback: () => getAppConfig(appId).SUPPORT_URL ? true : false,
-      }
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.header.authenticatedMenu.v1',
-      id: 'org.openedx.frontend.widget.learnerDashboard.headerLinkOrderHistory.v1',
-      op: WidgetOperationTypes.INSERT_BEFORE,
-      relatedId: 'org.openedx.frontend.widget.header.desktopAuthenticatedMenuLogout.v1',
-      element: (
-        <OrderHistoryLinkMenuItem
-          variant="navLink"
-        />
-      ),
-      condition: {
-        callback: () => getAppConfig(appId).ORDER_HISTORY_URL ? true : false,
-      }
-    },
-    {
-      slotId: 'org.openedx.frontend.slot.header.main.v1',
-      id: 'org.openedx.frontend.widget.learnerDashboard.headerMasqueradeBar.v1',
-      op: WidgetOperationTypes.APPEND,
-      component: MasqueradeBar,
-    },
-  ]
-};
-
-export default app;

package/src/widgets/LearnerDashboardHeader/hooks.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { useIntl } from '@openedx/frontend-base';
-import { StrictDict } from 'utils';
-
-import getLearnerHeaderMenu from './LearnerDashboardMenu';
-
-export const state = StrictDict({
-  isOpen: (val) => React.useState(val), // eslint-disable-line
-});
-
-export const useLearnerDashboardHeaderMenu = ({
-  courseSearchUrl, authenticatedUser,
-}) => {
-  const { formatMessage } = useIntl();
-  return getLearnerHeaderMenu(formatMessage, courseSearchUrl, authenticatedUser);
-};
-
-export default {
-  useLearnerDashboardHeaderMenu,
-};

package/src/widgets/LearnerDashboardHeader/messages.js

@@ -1,91 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  dashboard: {
-    id: 'learnerVariantDashboard.menu.dashboard.label',
-    defaultMessage: 'Dashboard',
-    description: 'The text for the user menu Dashboard navigation link.',
-  },
-  dashboardPersonal: {
-    id: 'learnerVariantDashboard.menu.dashboardPersonal.label',
-    defaultMessage: 'Personal',
-    description: 'Link to personal dashboard in user menu',
-  },
-  dashboardSwitch: {
-    id: 'learnerVariantDashboard.menu.dashboardSwitch.label',
-    defaultMessage: 'SWITCH DASHBOARD',
-    description: 'Switch Dashboard header in the user menu',
-  },
-  help: {
-    id: 'learnerVariantDashboard.help.label',
-    defaultMessage: 'Help',
-    description: 'The text for the link to the Help Center',
-  },
-  profile: {
-    id: 'learnerVariantDashboard.menu.profile.label',
-    defaultMessage: 'Profile',
-    description: 'The text for the user menu Profile navigation link.',
-  },
-  viewPrograms: {
-    id: 'learnerVariantDashboard.menu.viewPrograms.label',
-    defaultMessage: 'View Programs',
-    description: 'The text for the user menu View Programs navigation link.',
-  },
-  account: {
-    id: 'learnerVariantDashboard.menu.account.label',
-    defaultMessage: 'Account',
-    description: 'The text for the user menu Account navigation link.',
-  },
-  orderHistory: {
-    id: 'learnerVariantDashboard.menu.orderHistory.label',
-    defaultMessage: 'Order History',
-    description: 'The text for the user menu Order History navigation link.',
-  },
-  signOut: {
-    id: 'learnerVariantDashboard.menu.signOut.label',
-    defaultMessage: 'Sign Out',
-    description: 'The label for the user menu Sign Out action.',
-  },
-  course: {
-    id: 'learnerVariantDashboard.course',
-    defaultMessage: 'Courses',
-    description: 'Header link for switching to dashboard page.',
-  },
-  program: {
-    id: 'learnerVariantDashboard.program',
-    defaultMessage: 'Programs',
-    description: 'Header link for switching to program page.',
-  },
-  discoverNew: {
-    id: 'learnerVariantDashboard.discoverNew',
-    defaultMessage: 'Discover New',
-    description: 'Header link for switching to discover page.',
-  },
-  logoAltText: {
-    id: 'learnerVariantDashboard.logoAltText',
-    defaultMessage: 'edX, Inc. Dashboard',
-    description: 'Alt text for the edX logo.',
-  },
-  collapseMenuOpenAltText: {
-    id: 'learnerVariantDashboard.collapseMenuOpenAltText',
-    defaultMessage: 'Menu',
-    description: 'Alt text for the collapse menu icon when the menu is open.',
-  },
-  collapseMenuClosedAltText: {
-    id: 'learnerVariantDashboard.collapseMenuClosedAltText',
-    defaultMessage: 'Close',
-    description: 'Alt text for the collapse menu icon when the menu is closed.',
-  },
-  career: {
-    id: 'leanerDashboard.menu.career.label',
-    defaultMessage: 'Career',
-    description: 'The text for the user menu Career navigation link.',
-  },
-  newAlert: {
-    id: 'header.menu.new.label',
-    defaultMessage: 'New',
-    description: 'The text announcing that an item in the user menu is New',
-  },
-});
-
-export default messages;