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

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

@@ -1,36 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-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/index.scss

@@ -1,38 +0,0 @@
-@import "@openedx/paragon/scss/core/core";
-
-.masquerade-bar {
-  display: flex;
-  align-items: flex-start;
-  padding: map-get($spacers, 3);
-  margin-bottom: map-get($spacers, 2);
-
-  .masquerade-form-label {
-    padding: map-get($spacers, 2) map-get($spacers, 3);
-    display: flex;
-    align-items: center;
-    margin-bottom: 0;
-    white-space: nowrap;
-
-    &>.pgn__icon {
-      margin-right: map-get($spacers, 3);
-    }
-  }
-
-  .masquerade-form-input {
-    margin-bottom: 0;
-    flex-grow: 1;
-    max-width: map-get($grid-breakpoints, 'md');
-  }
-
-  .masquerade-chip {
-    padding: map-get($spacers, 2) map-get($spacers, 3);
-    font-size: $font-size-base;
-  }
-}
-
-@include media-breakpoint-down(md) {
-  .masquerade-bar {
-    margin: auto;
-    padding: map-get($spacers, 3) map-get($spacers, 4);
-  }
-}

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 '@edx/frontend-platform/i18n';
-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;

package/src/widgets/LookingForChallengeWidget/__snapshots__/index.test.jsx.snap

@@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LookingForChallengeWidget snapshots default 1`] = `
-<Card
-  id="looking-for-challenge-widget"
-  orientation="horizontal"
->
-  <Card.ImageCap
-    src="icon/mock/path"
-    srcAlt="course side widget"
-  />
-  <Card.Body
-    className="m-auto pr-2"
-  >
-    <h4>
-      Looking for a new challenge?
-    </h4>
-    <h5>
-      <Hyperlink
-        className="d-flex align-items-center"
-        destination="http://localhost:18000/course-search-url"
-        onClick={[MockFunction track.findCoursesWidgetClicked('http://localhost:18000/course-search-url')]}
-        variant="brand"
-      >
-        <format-message-function
-          message={
-            {
-              "defaultMessage": "Find a course {arrow}",
-              "description": "Button to explore more courses",
-              "id": "WidgetSidebar.findCoursesButton",
-            }
-          }
-          values={
-            {
-              "arrow": <Icon
-                className="mx-1"
-              />,
-            }
-          }
-        />
-      </Hyperlink>
-    </h5>
-  </Card.Body>
-</Card>
-`;