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

package/dist/containers/CourseCard/components/CourseCardMenu/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+import { useIntl } from '@openedx/frontend-base';
+import { Dropdown, Icon, IconButton } from '@openedx/paragon';
+import { MoreVert } from '@openedx/paragon/icons';
+import EmailSettingsModal from '../../../../containers/EmailSettingsModal';
+import UnenrollConfirmModal from '../../../../containers/UnenrollConfirmModal';
+import { useCourseData, useIsMasquerading } from '../../../../hooks';
+import SocialShareMenu from './SocialShareMenu';
+import { useEmailSettings, useUnenrollData, useHandleToggleDropdown, useOptionVisibility, } from './hooks';
+import messages from './messages';
+export const testIds = {
+    unenrollModalToggle: 'unenrollModalToggle',
+};
+export const CourseCardMenu = ({ cardId }) => {
+    var _a, _b;
+    const { formatMessage } = useIntl();
+    const courseData = useCourseData(cardId);
+    const isEmailEnabled = (_b = (_a = courseData === null || courseData === void 0 ? void 0 : courseData.enrollment) === null || _a === void 0 ? void 0 : _a.isEmailEnabled) !== null && _b !== void 0 ? _b : false;
+    const emailSettings = useEmailSettings();
+    const unenrollModal = useUnenrollData();
+    const handleToggleDropdown = useHandleToggleDropdown(cardId);
+    const { shouldShowUnenrollItem, shouldShowDropdown } = useOptionVisibility(cardId);
+    const isMasquerading = useIsMasquerading();
+    if (!shouldShowDropdown) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(Dropdown, { onToggle: handleToggleDropdown, children: [_jsx(Dropdown.Toggle, { id: `course-actions-dropdown-${cardId}`, as: IconButton, src: MoreVert, iconAs: Icon, variant: "primary", alt: formatMessage(messages.dropdownAlt) }), _jsxs(Dropdown.Menu, { children: [shouldShowUnenrollItem && (_jsx(Dropdown.Item, { disabled: isMasquerading, onClick: unenrollModal.show, "data-testid": testIds.unenrollModalToggle, children: formatMessage(messages.unenroll) })), _jsx(SocialShareMenu, { cardId: cardId, emailSettings: emailSettings })] })] }), _jsx(UnenrollConfirmModal, { show: unenrollModal.isVisible, closeModal: unenrollModal.hide, cardId: cardId }), isEmailEnabled && (_jsx(EmailSettingsModal, { show: emailSettings.isVisible, closeModal: emailSettings.hide, cardId: cardId }))] }));
+};
+CourseCardMenu.propTypes = {
+    cardId: PropTypes.string.isRequired,
+};
+export default CourseCardMenu;
+//# sourceMappingURL=index.js.map

package/dist/containers/CourseCard/components/CourseCardMenu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/CourseCard/components/CourseCardMenu/index.jsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AACpE,OAAO,oBAAoB,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,SAAS,CAAC;AAEjB,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,mBAAmB,EAAE,qBAAqB;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;;IAC3C,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IAEzC,MAAM,cAAc,GAAG,MAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,0CAAE,cAAc,mCAAI,KAAK,CAAC;IAEvE,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;IACzC,MAAM,aAAa,GAAG,eAAe,EAAE,CAAC;IACxC,MAAM,oBAAoB,GAAG,uBAAuB,CAAC,MAAM,CAAC,CAAC;IAC7D,MAAM,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnF,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAE3C,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,8BACE,MAAC,QAAQ,IAAC,QAAQ,EAAE,oBAAoB,aACtC,KAAC,QAAQ,CAAC,MAAM,IACd,EAAE,EAAE,2BAA2B,MAAM,EAAE,EACvC,EAAE,EAAE,UAAU,EACd,GAAG,EAAE,QAAQ,EACb,MAAM,EAAE,IAAI,EACZ,OAAO,EAAC,SAAS,EACjB,GAAG,EAAE,aAAa,CAAC,QAAQ,CAAC,WAAW,CAAC,GACxC,EACF,MAAC,QAAQ,CAAC,IAAI,eACX,sBAAsB,IAAI,CACzB,KAAC,QAAQ,CAAC,IAAI,IACZ,QAAQ,EAAE,cAAc,EACxB,OAAO,EAAE,aAAa,CAAC,IAAI,iBACd,OAAO,CAAC,mBAAmB,YAEvC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,GACnB,CACjB,EACD,KAAC,eAAe,IAAC,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,aAAa,GAAI,IACnD,IACP,EACX,KAAC,oBAAoB,IACnB,IAAI,EAAE,aAAa,CAAC,SAAS,EAC7B,UAAU,EAAE,aAAa,CAAC,IAAI,EAC9B,MAAM,EAAE,MAAM,GACd,EACD,cAAc,IAAI,CACjB,KAAC,kBAAkB,IACjB,IAAI,EAAE,aAAa,CAAC,SAAS,EAC7B,UAAU,EAAE,aAAa,CAAC,IAAI,EAC9B,MAAM,EAAE,MAAM,GACd,CACH,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AACF,cAAc,CAAC,SAAS,GAAG;IACzB,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;CACpC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import PropTypes from 'prop-types';\n\nimport { useIntl } from '@openedx/frontend-base';\nimport { Dropdown, Icon, IconButton } from '@openedx/paragon';\nimport { MoreVert } from '@openedx/paragon/icons';\n\nimport EmailSettingsModal from '@src/containers/EmailSettingsModal';\nimport UnenrollConfirmModal from '@src/containers/UnenrollConfirmModal';\nimport { useCourseData, useIsMasquerading } from '@src/hooks';\nimport SocialShareMenu from './SocialShareMenu';\nimport {\n  useEmailSettings,\n  useUnenrollData,\n  useHandleToggleDropdown,\n  useOptionVisibility,\n} from './hooks';\n\nimport messages from './messages';\n\nexport const testIds = {\n  unenrollModalToggle: 'unenrollModalToggle',\n};\n\nexport const CourseCardMenu = ({ cardId }) => {\n  const { formatMessage } = useIntl();\n  const courseData = useCourseData(cardId);\n\n  const isEmailEnabled = courseData?.enrollment?.isEmailEnabled ?? false;\n\n  const emailSettings = useEmailSettings();\n  const unenrollModal = useUnenrollData();\n  const handleToggleDropdown = useHandleToggleDropdown(cardId);\n  const { shouldShowUnenrollItem, shouldShowDropdown } = useOptionVisibility(cardId);\n  const isMasquerading = useIsMasquerading();\n\n  if (!shouldShowDropdown) {\n    return null;\n  }\n\n  return (\n    <>\n      <Dropdown onToggle={handleToggleDropdown}>\n        <Dropdown.Toggle\n          id={`course-actions-dropdown-${cardId}`}\n          as={IconButton}\n          src={MoreVert}\n          iconAs={Icon}\n          variant=\"primary\"\n          alt={formatMessage(messages.dropdownAlt)}\n        />\n        <Dropdown.Menu>\n          {shouldShowUnenrollItem && (\n            <Dropdown.Item\n              disabled={isMasquerading}\n              onClick={unenrollModal.show}\n              data-testid={testIds.unenrollModalToggle}\n            >\n              {formatMessage(messages.unenroll)}\n            </Dropdown.Item>\n          )}\n          <SocialShareMenu cardId={cardId} emailSettings={emailSettings} />\n        </Dropdown.Menu>\n      </Dropdown>\n      <UnenrollConfirmModal\n        show={unenrollModal.isVisible}\n        closeModal={unenrollModal.hide}\n        cardId={cardId}\n      />\n      {isEmailEnabled && (\n        <EmailSettingsModal\n          show={emailSettings.isVisible}\n          closeModal={emailSettings.hide}\n          cardId={cardId}\n        />\n      )}\n    </>\n  );\n};\nCourseCardMenu.propTypes = {\n  cardId: PropTypes.string.isRequired,\n};\n\nexport default CourseCardMenu;\n"]}

package/dist/containers/CourseCard/components/CourseCardMenu/messages.d.ts

@@ -0,0 +1,48 @@
+export default messages;
+declare namespace messages {
+    namespace unenroll {
+        let id: string;
+        let description: string;
+        let defaultMessage: string;
+    }
+    namespace dropdownAlt {
+        let id_1: string;
+        export { id_1 as id };
+        let description_1: string;
+        export { description_1 as description };
+        let defaultMessage_1: string;
+        export { defaultMessage_1 as defaultMessage };
+    }
+    namespace emailSettings {
+        let id_2: string;
+        export { id_2 as id };
+        let description_2: string;
+        export { description_2 as description };
+        let defaultMessage_2: string;
+        export { defaultMessage_2 as defaultMessage };
+    }
+    namespace shareToFacebook {
+        let id_3: string;
+        export { id_3 as id };
+        let description_3: string;
+        export { description_3 as description };
+        let defaultMessage_3: string;
+        export { defaultMessage_3 as defaultMessage };
+    }
+    namespace shareToTwitter {
+        let id_4: string;
+        export { id_4 as id };
+        let description_4: string;
+        export { description_4 as description };
+        let defaultMessage_4: string;
+        export { defaultMessage_4 as defaultMessage };
+    }
+    namespace shareQuote {
+        let id_5: string;
+        export { id_5 as id };
+        let description_5: string;
+        export { description_5 as description };
+        let defaultMessage_5: string;
+        export { defaultMessage_5 as defaultMessage };
+    }
+}

package/dist/containers/CourseCard/components/CourseCardMenu/messages.js

@@ -0,0 +1,35 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    unenroll: {
+        id: 'learner-dash.courseCardMenu.unenroll',
+        description: 'Course unenroll menu button',
+        defaultMessage: 'Unenroll',
+    },
+    dropdownAlt: {
+        id: 'learner-dash.courseCardMenu.dropdownAlt',
+        description: 'Course action menu alt-text',
+        defaultMessage: 'Course actions dropdown',
+    },
+    emailSettings: {
+        id: 'learner-dash.courseCardMenu.emailSettings',
+        description: 'Course email settings menu button',
+        defaultMessage: 'Email settings',
+    },
+    shareToFacebook: {
+        id: 'learner-dash.courseCardMenu.shareToFacebook',
+        description: 'Course Facebook Sharing button',
+        defaultMessage: 'Share to Facebook',
+    },
+    shareToTwitter: {
+        id: 'learner-dash.courseCardMenu.shareToTwitter',
+        description: 'Course Twitter Sharing button',
+        defaultMessage: 'Share to Twitter',
+    },
+    shareQuote: {
+        id: 'learner-dash.courseCardMenu.shareQuote',
+        description: 'Social sharing quote',
+        defaultMessage: 'I\'m taking {courseName} online with {socialBrand}.  Check it out!',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/containers/CourseCard/components/CourseCardMenu/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../src/containers/CourseCard/components/CourseCardMenu/messages.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,QAAQ,EAAE;QACR,EAAE,EAAE,sCAAsC;QAC1C,WAAW,EAAE,6BAA6B;QAC1C,cAAc,EAAE,UAAU;KAC3B;IACD,WAAW,EAAE;QACX,EAAE,EAAE,yCAAyC;QAC7C,WAAW,EAAE,6BAA6B;QAC1C,cAAc,EAAE,yBAAyB;KAC1C;IACD,aAAa,EAAE;QACb,EAAE,EAAE,2CAA2C;QAC/C,WAAW,EAAE,mCAAmC;QAChD,cAAc,EAAE,gBAAgB;KACjC;IACD,eAAe,EAAE;QACf,EAAE,EAAE,6CAA6C;QACjD,WAAW,EAAE,gCAAgC;QAC7C,cAAc,EAAE,mBAAmB;KACpC;IACD,cAAc,EAAE;QACd,EAAE,EAAE,4CAA4C;QAChD,WAAW,EAAE,+BAA+B;QAC5C,cAAc,EAAE,kBAAkB;KACnC;IACD,UAAU,EAAE;QACV,EAAE,EAAE,wCAAwC;QAC5C,WAAW,EAAE,sBAAsB;QACnC,cAAc,EAAE,oEAAoE;KACrF;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  unenroll: {\n    id: 'learner-dash.courseCardMenu.unenroll',\n    description: 'Course unenroll menu button',\n    defaultMessage: 'Unenroll',\n  },\n  dropdownAlt: {\n    id: 'learner-dash.courseCardMenu.dropdownAlt',\n    description: 'Course action menu alt-text',\n    defaultMessage: 'Course actions dropdown',\n  },\n  emailSettings: {\n    id: 'learner-dash.courseCardMenu.emailSettings',\n    description: 'Course email settings menu button',\n    defaultMessage: 'Email settings',\n  },\n  shareToFacebook: {\n    id: 'learner-dash.courseCardMenu.shareToFacebook',\n    description: 'Course Facebook Sharing button',\n    defaultMessage: 'Share to Facebook',\n  },\n  shareToTwitter: {\n    id: 'learner-dash.courseCardMenu.shareToTwitter',\n    description: 'Course Twitter Sharing button',\n    defaultMessage: 'Share to Twitter',\n  },\n  shareQuote: {\n    id: 'learner-dash.courseCardMenu.shareQuote',\n    description: 'Social sharing quote',\n    defaultMessage: 'I\\'m taking {courseName} online with {socialBrand}.  Check it out!',\n  },\n});\n\nexport default messages;\n"]}

package/dist/containers/CourseCard/components/CourseCardTitle.d.ts

@@ -0,0 +1,11 @@
+export function CourseCardTitle({ cardId }: {
+    cardId: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace CourseCardTitle {
+    namespace propTypes {
+        let cardId: PropTypes.Validator<string>;
+    }
+    let defaultProps: {};
+}
+export default CourseCardTitle;
+import PropTypes from 'prop-types';

package/dist/containers/CourseCard/components/CourseCardTitle.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+import track from '../../../tracking';
+import { useCourseData, useCourseTrackingEvent } from '../../../hooks';
+import useActionDisabledState from './hooks';
+const { courseTitleClicked } = track.course;
+export const CourseCardTitle = ({ cardId }) => {
+    var _a, _b;
+    const courseData = useCourseData(cardId);
+    const courseName = (_a = courseData === null || courseData === void 0 ? void 0 : courseData.course) === null || _a === void 0 ? void 0 : _a.courseName;
+    const homeUrl = (_b = courseData === null || courseData === void 0 ? void 0 : courseData.courseRun) === null || _b === void 0 ? void 0 : _b.homeUrl;
+    const handleTitleClicked = useCourseTrackingEvent(courseTitleClicked, cardId, homeUrl);
+    const { disableCourseTitle } = useActionDisabledState(cardId);
+    return (_jsx("h3", { children: disableCourseTitle ? (_jsx("span", { className: "course-card-title", "data-testid": "CourseCardTitle", children: courseName })) : (_jsx("a", { href: homeUrl, className: "course-card-title", "data-testid": "CourseCardTitle", onClick: handleTitleClicked, children: courseName })) }));
+};
+CourseCardTitle.propTypes = {
+    cardId: PropTypes.string.isRequired,
+};
+CourseCardTitle.defaultProps = {};
+export default CourseCardTitle;
+//# sourceMappingURL=CourseCardTitle.js.map

package/dist/containers/CourseCard/components/CourseCardTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CourseCardTitle.js","sourceRoot":"","sources":["../../../../src/containers/CourseCard/components/CourseCardTitle.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,sBAAsB,MAAM,SAAS,CAAC;AAE7C,MAAM,EAAE,kBAAkB,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;AAE5C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;;IAC5C,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IACzC,MAAM,UAAU,GAAG,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,MAAM,0CAAE,UAAU,CAAC;IAClD,MAAM,OAAO,GAAG,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,SAAS,0CAAE,OAAO,CAAC;IAC/C,MAAM,kBAAkB,GAAG,sBAAsB,CAC/C,kBAAkB,EAClB,MAAM,EACN,OAAO,CACR,CAAC;IACF,MAAM,EAAE,kBAAkB,EAAE,GAAG,sBAAsB,CAAC,MAAM,CAAC,CAAC;IAC9D,OAAO,CACL,uBACG,kBAAkB,CAAC,CAAC,CAAC,CACpB,eAAM,SAAS,EAAC,mBAAmB,iBAAa,iBAAiB,YAAE,UAAU,GAAQ,CACtF,CAAC,CAAC,CAAC,CACF,YACE,IAAI,EAAE,OAAO,EACb,SAAS,EAAC,mBAAmB,iBACjB,iBAAiB,EAC7B,OAAO,EAAE,kBAAkB,YAE1B,UAAU,GACT,CACL,GACE,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,SAAS,GAAG;IAC1B,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;CACpC,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,EAAE,CAAC;AAElC,eAAe,eAAe,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport track from '@src/tracking';\nimport { useCourseData, useCourseTrackingEvent } from '@src/hooks';\nimport useActionDisabledState from './hooks';\n\nconst { courseTitleClicked } = track.course;\n\nexport const CourseCardTitle = ({ cardId }) => {\n  const courseData = useCourseData(cardId);\n  const courseName = courseData?.course?.courseName;\n  const homeUrl = courseData?.courseRun?.homeUrl;\n  const handleTitleClicked = useCourseTrackingEvent(\n    courseTitleClicked,\n    cardId,\n    homeUrl,\n  );\n  const { disableCourseTitle } = useActionDisabledState(cardId);\n  return (\n    <h3>\n      {disableCourseTitle ? (\n        <span className=\"course-card-title\" data-testid=\"CourseCardTitle\">{courseName}</span>\n      ) : (\n        <a\n          href={homeUrl}\n          className=\"course-card-title\"\n          data-testid=\"CourseCardTitle\"\n          onClick={handleTitleClicked}\n        >\n          {courseName}\n        </a>\n      )}\n    </h3>\n  );\n};\n\nCourseCardTitle.propTypes = {\n  cardId: PropTypes.string.isRequired,\n};\n\nCourseCardTitle.defaultProps = {};\n\nexport default CourseCardTitle;\n"]}

package/dist/containers/CourseCard/components/RelatedProgramsBadge/hooks.d.ts

@@ -0,0 +1,11 @@
+export const state: any;
+export function useRelatedProgramsBadgeData({ cardId }: {
+    cardId: any;
+}): {
+    numPrograms: any;
+    programsMessage: string;
+    isOpen: any;
+    openModal: () => any;
+    closeModal: () => any;
+};
+export default module.useRelatedProgramsBadgeData;

package/dist/containers/CourseCard/components/RelatedProgramsBadge/hooks.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useIntl } from '@openedx/frontend-base';
+import { StrictDict } from '../../../../utils';
+import { useCourseData } from '../../../../hooks';
+import messages from './messages';
+import * as module from './hooks';
+export const state = StrictDict({
+    isOpen: (val) => React.useState(val), // eslint-disable-line
+});
+export const useRelatedProgramsBadgeData = ({ cardId }) => {
+    var _a, _b;
+    const [isOpen, setIsOpen] = module.state.isOpen(false);
+    const { formatMessage } = useIntl();
+    const courseData = useCourseData(cardId);
+    const numPrograms = ((_b = (_a = courseData === null || courseData === void 0 ? void 0 : courseData.programs) === null || _a === void 0 ? void 0 : _a.relatedPrograms) === null || _b === void 0 ? void 0 : _b.length) || 0;
+    let programsMessage = '';
+    if (numPrograms) {
+        programsMessage = formatMessage(numPrograms === 1 ? messages.badgeLabelSingular : messages.badgeLabelPlural, { numPrograms });
+    }
+    return {
+        numPrograms,
+        programsMessage,
+        isOpen,
+        openModal: () => setIsOpen(true),
+        closeModal: () => setIsOpen(false),
+    };
+};
+export default useRelatedProgramsBadgeData;
+//# sourceMappingURL=hooks.js.map

package/dist/containers/CourseCard/components/RelatedProgramsBadge/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../../../src/containers/CourseCard/components/RelatedProgramsBadge/hooks.jsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,KAAK,MAAM,MAAM,SAAS,CAAC;AAElC,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAAC;IAC9B,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,sBAAsB;CAC7D,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;;IACxD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACvD,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IACzC,MAAM,WAAW,GAAG,CAAA,MAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,0CAAE,eAAe,0CAAE,MAAM,KAAI,CAAC,CAAC;IACvE,IAAI,eAAe,GAAG,EAAE,CAAC;IACzB,IAAI,WAAW,EAAE,CAAC;QAChB,eAAe,GAAG,aAAa,CAC7B,WAAW,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC,CAAC,QAAQ,CAAC,gBAAgB,EAC3E,EAAE,WAAW,EAAE,CAChB,CAAC;IACJ,CAAC;IAED,OAAO;QACL,WAAW;QACX,eAAe;QACf,MAAM;QACN,SAAS,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;QAChC,UAAU,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC;KACnC,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,2BAA2B,CAAC","sourcesContent":["import React from 'react';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { StrictDict } from '@src/utils';\nimport { useCourseData } from '@src/hooks';\n\nimport messages from './messages';\nimport * as module from './hooks';\n\nexport const state = StrictDict({\n  isOpen: (val) => React.useState(val), // eslint-disable-line\n});\n\nexport const useRelatedProgramsBadgeData = ({ cardId }) => {\n  const [isOpen, setIsOpen] = module.state.isOpen(false);\n  const { formatMessage } = useIntl();\n  const courseData = useCourseData(cardId);\n  const numPrograms = courseData?.programs?.relatedPrograms?.length || 0;\n  let programsMessage = '';\n  if (numPrograms) {\n    programsMessage = formatMessage(\n      numPrograms === 1 ? messages.badgeLabelSingular : messages.badgeLabelPlural,\n      { numPrograms },\n    );\n  }\n\n  return {\n    numPrograms,\n    programsMessage,\n    isOpen,\n    openModal: () => setIsOpen(true),\n    closeModal: () => setIsOpen(false),\n  };\n};\n\nexport default useRelatedProgramsBadgeData;\n"]}

package/dist/containers/CourseCard/components/RelatedProgramsBadge/index.d.ts

@@ -0,0 +1,10 @@
+export function RelatedProgramsBadge({ cardId }: {
+    cardId: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+export namespace RelatedProgramsBadge {
+    namespace propTypes {
+        let cardId: PropTypes.Validator<string>;
+    }
+}
+export default RelatedProgramsBadge;
+import PropTypes from 'prop-types';

package/dist/containers/CourseCard/components/RelatedProgramsBadge/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/* eslint-disable quotes */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Icon } from '@openedx/paragon';
+import { Program } from '@openedx/paragon/icons';
+import RelatedProgramsBadgeModal from '../../../../containers/RelatedProgramsModal';
+import useRelatedProgramsBadgeData from './hooks';
+export const RelatedProgramsBadge = ({ cardId }) => {
+    const { isOpen, openModal, closeModal, numPrograms, programsMessage, } = useRelatedProgramsBadgeData({ cardId });
+    if (numPrograms === 0) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { "data-testid": "RelatedProgramsBadge", className: "pl-0 mr-0 justify-content-start align-self-start flex-shrink-1", variant: "tertiary", size: "sm", onClick: openModal, children: [_jsx(Icon, { src: Program, className: "mr-2 pr-0" }), " ", programsMessage] }), _jsx(RelatedProgramsBadgeModal, { isOpen, closeModal, cardId })] }));
+};
+RelatedProgramsBadge.propTypes = {
+    cardId: PropTypes.string.isRequired,
+};
+export default RelatedProgramsBadge;
+//# sourceMappingURL=index.js.map

package/dist/containers/CourseCard/components/RelatedProgramsBadge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/CourseCard/components/RelatedProgramsBadge/index.jsx"],"names":[],"mappings":";AAAA,2BAA2B;AAC3B,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,yBAAyB,MAAM,sCAAsC,CAAC;AAC7E,OAAO,2BAA2B,MAAM,SAAS,CAAC;AAElD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IACjD,MAAM,EACJ,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,eAAe,GAC5D,GAAG,2BAA2B,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;IAE5C,IAAI,WAAW,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,8BACE,MAAC,MAAM,mBACO,sBAAsB,EAClC,SAAS,EAAC,gEAAgE,EAC1E,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,SAAS,aAElB,KAAC,IAAI,IAAC,GAAG,EAAE,OAAO,EAAE,SAAS,EAAC,WAAW,GAAG,OAAE,eAAe,IACtD,EACT,KAAC,yBAAyB,IAAO,MAAM,EAAE,UAAU,EAAE,MAAM,GAAM,IAChE,CACJ,CAAC;AACJ,CAAC,CAAC;AACF,oBAAoB,CAAC,SAAS,GAAG;IAC/B,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;CACpC,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["/* eslint-disable quotes */\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Button, Icon } from '@openedx/paragon';\nimport { Program } from '@openedx/paragon/icons';\n\nimport RelatedProgramsBadgeModal from '@src/containers/RelatedProgramsModal';\nimport useRelatedProgramsBadgeData from './hooks';\n\nexport const RelatedProgramsBadge = ({ cardId }) => {\n  const {\n    isOpen, openModal, closeModal, numPrograms, programsMessage,\n  } = useRelatedProgramsBadgeData({ cardId });\n\n  if (numPrograms === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <Button\n        data-testid=\"RelatedProgramsBadge\"\n        className=\"pl-0 mr-0 justify-content-start align-self-start flex-shrink-1\"\n        variant=\"tertiary\"\n        size=\"sm\"\n        onClick={openModal}\n      >\n        <Icon src={Program} className=\"mr-2 pr-0\" /> {programsMessage}\n      </Button>\n      <RelatedProgramsBadgeModal {...{ isOpen, closeModal, cardId }} />\n    </>\n  );\n};\nRelatedProgramsBadge.propTypes = {\n  cardId: PropTypes.string.isRequired,\n};\n\nexport default RelatedProgramsBadge;\n"]}

package/dist/containers/CourseCard/components/RelatedProgramsBadge/messages.d.ts

@@ -0,0 +1,16 @@
+export namespace messages {
+    namespace badgeLabelPlural {
+        let id: string;
+        let description: string;
+        let defaultMessage: string;
+    }
+    namespace badgeLabelSingular {
+        let id_1: string;
+        export { id_1 as id };
+        let description_1: string;
+        export { description_1 as description };
+        let defaultMessage_1: string;
+        export { defaultMessage_1 as defaultMessage };
+    }
+}
+export default messages;

package/dist/containers/CourseCard/components/RelatedProgramsBadge/messages.js

@@ -0,0 +1,14 @@
+export const messages = {
+    badgeLabelPlural: {
+        id: 'learner-dash.courseCard.relatedProgramsBadge.label.plural',
+        description: 'Label test indicating number of related programs for a course card',
+        defaultMessage: '{numPrograms} Related Programs',
+    },
+    badgeLabelSingular: {
+        id: 'learner-dash.courseCard.relatedProgramsBadge.label.singular',
+        description: 'Label test indicating a single related program for a course card',
+        defaultMessage: '{numPrograms} Related Program',
+    },
+};
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/containers/CourseCard/components/RelatedProgramsBadge/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../src/containers/CourseCard/components/RelatedProgramsBadge/messages.js"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,gBAAgB,EAAE;QAChB,EAAE,EAAE,2DAA2D;QAC/D,WAAW,EAAE,oEAAoE;QACjF,cAAc,EAAE,gCAAgC;KACjD;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,6DAA6D;QACjE,WAAW,EAAE,kEAAkE;QAC/E,cAAc,EAAE,+BAA+B;KAChD;CACF,CAAC;AACF,eAAe,QAAQ,CAAC","sourcesContent":["export const messages = {\n  badgeLabelPlural: {\n    id: 'learner-dash.courseCard.relatedProgramsBadge.label.plural',\n    description: 'Label test indicating number of related programs for a course card',\n    defaultMessage: '{numPrograms} Related Programs',\n  },\n  badgeLabelSingular: {\n    id: 'learner-dash.courseCard.relatedProgramsBadge.label.singular',\n    description: 'Label test indicating a single related program for a course card',\n    defaultMessage: '{numPrograms} Related Program',\n  },\n};\nexport default messages;\n"]}

package/dist/containers/CourseCard/components/hooks.d.ts

@@ -0,0 +1,8 @@
+export function useActionDisabledState(cardId: any): {
+    disableBeginCourse: any;
+    disableResumeCourse: any;
+    disableViewCourse: any;
+    disableSelectSession: boolean;
+    disableCourseTitle: any;
+};
+export default useActionDisabledState;

package/dist/containers/CourseCard/components/hooks.js

@@ -0,0 +1,25 @@
+import { useCourseData, useEntitlementInfo, useIsMasquerading } from '../../../hooks';
+export const useActionDisabledState = (cardId) => {
+    var _a;
+    const courseData = useCourseData(cardId);
+    const isMasquerading = useIsMasquerading();
+    const { isAudit, isAuditAccessExpired, } = courseData.enrollment || {};
+    const { isStaff, hasUnmetPrereqs, isTooEarly } = ((_a = courseData.enrollment) === null || _a === void 0 ? void 0 : _a.coursewareAccess) || {};
+    const hasAccess = isStaff || !(hasUnmetPrereqs || isTooEarly);
+    const { isEntitlement, isFulfilled, canChange, hasSessions, } = useEntitlementInfo(courseData);
+    const { resumeUrl, homeUrl } = courseData.courseRun || {};
+    const disableBeginCourse = !homeUrl || (isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired));
+    const disableResumeCourse = !resumeUrl || (isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired));
+    const disableViewCourse = !hasAccess || (isAudit && isAuditAccessExpired);
+    const disableSelectSession = !isEntitlement || isMasquerading || !hasAccess || (!canChange || !hasSessions);
+    const disableCourseTitle = (isEntitlement && !isFulfilled) || disableViewCourse;
+    return {
+        disableBeginCourse,
+        disableResumeCourse,
+        disableViewCourse,
+        disableSelectSession,
+        disableCourseTitle,
+    };
+};
+export default useActionDisabledState;
+//# sourceMappingURL=hooks.js.map

package/dist/containers/CourseCard/components/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../../src/containers/CourseCard/components/hooks.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAElF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,MAAM,EAAE,EAAE;;IAC/C,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IACzC,MAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAE3C,MAAM,EACJ,OAAO,EAAE,oBAAoB,GAC9B,GAAG,UAAU,CAAC,UAAU,IAAI,EAAE,CAAC;IAChC,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,CAAA,MAAA,UAAU,CAAC,UAAU,0CAAE,gBAAgB,KAAI,EAAE,CAAC;IAC/F,MAAM,SAAS,GAAG,OAAO,IAAI,CAAC,CAAC,eAAe,IAAI,UAAU,CAAC,CAAC;IAC9D,MAAM,EACJ,aAAa,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,GACnD,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;IAEnC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,SAAS,IAAI,EAAE,CAAC;IAC1D,MAAM,kBAAkB,GAAG,CAAC,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS,IAAI,CAAC,OAAO,IAAI,oBAAoB,CAAC,CAAC,CAAC;IAC3G,MAAM,mBAAmB,GAAG,CAAC,SAAS,IAAI,CAAC,cAAc,IAAI,CAAC,SAAS,IAAI,CAAC,OAAO,IAAI,oBAAoB,CAAC,CAAC,CAAC;IAC9G,MAAM,iBAAiB,GAAG,CAAC,SAAS,IAAI,CAAC,OAAO,IAAI,oBAAoB,CAAC,CAAC;IAC1E,MAAM,oBAAoB,GAAG,CAAC,aAAa,IAAI,cAAc,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,SAAS,IAAI,CAAC,WAAW,CAAC,CAAC;IAE5G,MAAM,kBAAkB,GAAG,CAAC,aAAa,IAAI,CAAC,WAAW,CAAC,IAAI,iBAAiB,CAAC;IAEhF,OAAO;QACL,kBAAkB;QAClB,mBAAmB;QACnB,iBAAiB;QACjB,oBAAoB;QACpB,kBAAkB;KACnB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC","sourcesContent":["import { useCourseData, useEntitlementInfo, useIsMasquerading } from '@src/hooks';\n\nexport const useActionDisabledState = (cardId) => {\n  const courseData = useCourseData(cardId);\n  const isMasquerading = useIsMasquerading();\n\n  const {\n    isAudit, isAuditAccessExpired,\n  } = courseData.enrollment || {};\n  const { isStaff, hasUnmetPrereqs, isTooEarly } = courseData.enrollment?.coursewareAccess || {};\n  const hasAccess = isStaff || !(hasUnmetPrereqs || isTooEarly);\n  const {\n    isEntitlement, isFulfilled, canChange, hasSessions,\n  } = useEntitlementInfo(courseData);\n\n  const { resumeUrl, homeUrl } = courseData.courseRun || {};\n  const disableBeginCourse = !homeUrl || (isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired));\n  const disableResumeCourse = !resumeUrl || (isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired));\n  const disableViewCourse = !hasAccess || (isAudit && isAuditAccessExpired);\n  const disableSelectSession = !isEntitlement || isMasquerading || !hasAccess || (!canChange || !hasSessions);\n\n  const disableCourseTitle = (isEntitlement && !isFulfilled) || disableViewCourse;\n\n  return {\n    disableBeginCourse,\n    disableResumeCourse,\n    disableViewCourse,\n    disableSelectSession,\n    disableCourseTitle,\n  };\n};\n\nexport default useActionDisabledState;\n"]}

package/dist/containers/CourseCard/hooks.d.ts

@@ -0,0 +1 @@
+export function useIsCollapsed(): boolean;

package/dist/containers/CourseCard/hooks.js

@@ -0,0 +1,6 @@
+import { useWindowSize, breakpoints } from '@openedx/paragon';
+export const useIsCollapsed = () => {
+    const { width } = useWindowSize();
+    return width < breakpoints.small.maxWidth;
+};
+//# sourceMappingURL=hooks.js.map

package/dist/containers/CourseCard/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../src/containers/CourseCard/hooks.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE9D,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,EAAE,CAAC;IAClC,OAAO,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC;AAC5C,CAAC,CAAC","sourcesContent":["import { useWindowSize, breakpoints } from '@openedx/paragon';\n\nexport const useIsCollapsed = () => {\n  const { width } = useWindowSize();\n  return width < breakpoints.small.maxWidth;\n};\n"]}

package/dist/containers/CourseCard/index.d.ts

@@ -0,0 +1,10 @@
+export function CourseCard({ cardId, }: {
+    cardId: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace CourseCard {
+    namespace propTypes {
+        let cardId: PropTypes.Validator<string>;
+    }
+}
+export default CourseCard;
+import PropTypes from 'prop-types';

package/dist/containers/CourseCard/index.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Card } from '@openedx/paragon';
+import { useIsCollapsed } from './hooks';
+import CourseCardBanners from './components/CourseCardBanners';
+import CourseCardImage from './components/CourseCardImage';
+import CourseCardMenu from './components/CourseCardMenu';
+import CourseCardActions from './components/CourseCardActions';
+import CourseCardDetails from './components/CourseCardDetails';
+import CourseCardTitle from './components/CourseCardTitle';
+import './CourseCard.scss';
+export const CourseCard = ({ cardId, }) => {
+    const isCollapsed = useIsCollapsed();
+    const orientation = isCollapsed ? 'vertical' : 'horizontal';
+    return (_jsx("div", { className: "mb-4.5 course-card", id: cardId, "data-testid": "CourseCard", children: _jsx(Card, { orientation: orientation, children: _jsxs("div", { className: "d-flex flex-column w-100", children: [_jsxs("div", Object.assign({}, (!isCollapsed && { className: 'd-flex' }), { children: [_jsx(CourseCardImage, { cardId: cardId, orientation: "horizontal" }), _jsxs(Card.Body, { children: [_jsx(Card.Header, { title: _jsx(CourseCardTitle, { cardId: cardId }), actions: _jsx(CourseCardMenu, { cardId: cardId }) }), _jsx(Card.Section, { className: "pt-0", children: _jsx(CourseCardDetails, { cardId: cardId }) }), _jsx(Card.Footer, { orientation: orientation, children: _jsx(CourseCardActions, { cardId: cardId }) })] })] })), _jsx(CourseCardBanners, { cardId: cardId })] }) }) }));
+};
+CourseCard.propTypes = {
+    cardId: PropTypes.string.isRequired,
+};
+export default CourseCard;
+//# sourceMappingURL=index.js.map

package/dist/containers/CourseCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/CourseCard/index.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,OAAO,cAAc,MAAM,6BAA6B,CAAC;AACzD,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,OAAO,mBAAmB,CAAC;AAE3B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EACzB,MAAM,GACP,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC;IAC5D,OAAO,CACL,cAAK,SAAS,EAAC,oBAAoB,EAAC,EAAE,EAAE,MAAM,iBAAc,YAAY,YACtE,KAAC,IAAI,IAAC,WAAW,EAAE,WAAW,YAC5B,eAAK,SAAS,EAAC,0BAA0B,aACvC,+BAAS,CAAC,CAAC,WAAW,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,eAChD,KAAC,eAAe,IAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAC,YAAY,GAAG,EAC5D,MAAC,IAAI,CAAC,IAAI,eACR,KAAC,IAAI,CAAC,MAAM,IACV,KAAK,EAAE,KAAC,eAAe,IAAC,MAAM,EAAE,MAAM,GAAI,EAC1C,OAAO,EAAE,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,GAC3C,EACF,KAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAC,MAAM,YAC5B,KAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,GAAI,GACxB,EACf,KAAC,IAAI,CAAC,MAAM,IAAC,WAAW,EAAE,WAAW,YACnC,KAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,GAAI,GACzB,IACJ,KACR,EACN,KAAC,iBAAiB,IAAC,MAAM,EAAE,MAAM,GAAI,IACjC,GACD,GACH,CACP,CAAC;AACJ,CAAC,CAAC;AACF,UAAU,CAAC,SAAS,GAAG;IACrB,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;CACpC,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Card } from '@openedx/paragon';\n\nimport { useIsCollapsed } from './hooks';\nimport CourseCardBanners from './components/CourseCardBanners';\nimport CourseCardImage from './components/CourseCardImage';\nimport CourseCardMenu from './components/CourseCardMenu';\nimport CourseCardActions from './components/CourseCardActions';\nimport CourseCardDetails from './components/CourseCardDetails';\nimport CourseCardTitle from './components/CourseCardTitle';\n\nimport './CourseCard.scss';\n\nexport const CourseCard = ({\n  cardId,\n}) => {\n  const isCollapsed = useIsCollapsed();\n  const orientation = isCollapsed ? 'vertical' : 'horizontal';\n  return (\n    <div className=\"mb-4.5 course-card\" id={cardId} data-testid=\"CourseCard\">\n      <Card orientation={orientation}>\n        <div className=\"d-flex flex-column w-100\">\n          <div {...(!isCollapsed && { className: 'd-flex' })}>\n            <CourseCardImage cardId={cardId} orientation=\"horizontal\" />\n            <Card.Body>\n              <Card.Header\n                title={<CourseCardTitle cardId={cardId} />}\n                actions={<CourseCardMenu cardId={cardId} />}\n              />\n              <Card.Section className=\"pt-0\">\n                <CourseCardDetails cardId={cardId} />\n              </Card.Section>\n              <Card.Footer orientation={orientation}>\n                <CourseCardActions cardId={cardId} />\n              </Card.Footer>\n            </Card.Body>\n          </div>\n          <CourseCardBanners cardId={cardId} />\n        </div>\n      </Card>\n    </div>\n  );\n};\nCourseCard.propTypes = {\n  cardId: PropTypes.string.isRequired,\n};\n\nexport default CourseCard;\n"]}

package/dist/containers/CourseCard/messages.d.ts

@@ -0,0 +1,32 @@
+export default messages;
+declare namespace messages {
+    namespace bannerAlt {
+        let id: string;
+        let description: string;
+        let defaultMessage: string;
+    }
+    namespace verifiedBanner {
+        let id_1: string;
+        export { id_1 as id };
+        let description_1: string;
+        export { description_1 as description };
+        let defaultMessage_1: string;
+        export { defaultMessage_1 as defaultMessage };
+    }
+    namespace verifiedHoverDescription {
+        let id_2: string;
+        export { id_2 as id };
+        let description_2: string;
+        export { description_2 as description };
+        let defaultMessage_2: string;
+        export { defaultMessage_2 as defaultMessage };
+    }
+    namespace verifiedBannerRibbonAlt {
+        let id_3: string;
+        export { id_3 as id };
+        let description_3: string;
+        export { description_3 as description };
+        let defaultMessage_3: string;
+        export { defaultMessage_3 as defaultMessage };
+    }
+}

package/dist/containers/CourseCard/messages.js

@@ -0,0 +1,25 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    bannerAlt: {
+        id: 'learner-dash.courseCard.bannerAlt',
+        description: 'Course card banner alt-text',
+        defaultMessage: 'Course thumbnail',
+    },
+    verifiedBanner: {
+        id: 'learner-dash.courseCard.verifiedBanner',
+        description: 'Course card verified banner',
+        defaultMessage: 'Verified',
+    },
+    verifiedHoverDescription: {
+        id: 'learner-dash.courseCard.verifiedHoverDescription',
+        description: 'Course card verified hover description',
+        defaultMessage: 'You\'re enrolled as a verified student',
+    },
+    verifiedBannerRibbonAlt: {
+        id: 'learner-dash.courseCard.verifiedBannerRibbonAlt',
+        description: 'Course card verified banner ribbon alt-text',
+        defaultMessage: 'ID Verified Ribbon/Badge',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/containers/CourseCard/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/CourseCard/messages.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,SAAS,EAAE;QACT,EAAE,EAAE,mCAAmC;QACvC,WAAW,EAAE,6BAA6B;QAC1C,cAAc,EAAE,kBAAkB;KACnC;IACD,cAAc,EAAE;QACd,EAAE,EAAE,wCAAwC;QAC5C,WAAW,EAAE,6BAA6B;QAC1C,cAAc,EAAE,UAAU;KAC3B;IACD,wBAAwB,EAAE;QACxB,EAAE,EAAE,kDAAkD;QACtD,WAAW,EAAE,wCAAwC;QACrD,cAAc,EAAE,wCAAwC;KACzD;IACD,uBAAuB,EAAE;QACvB,EAAE,EAAE,iDAAiD;QACrD,WAAW,EAAE,6CAA6C;QAC1D,cAAc,EAAE,0BAA0B;KAC3C;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  bannerAlt: {\n    id: 'learner-dash.courseCard.bannerAlt',\n    description: 'Course card banner alt-text',\n    defaultMessage: 'Course thumbnail',\n  },\n  verifiedBanner: {\n    id: 'learner-dash.courseCard.verifiedBanner',\n    description: 'Course card verified banner',\n    defaultMessage: 'Verified',\n  },\n  verifiedHoverDescription: {\n    id: 'learner-dash.courseCard.verifiedHoverDescription',\n    description: 'Course card verified hover description',\n    defaultMessage: 'You\\'re enrolled as a verified student',\n  },\n  verifiedBannerRibbonAlt: {\n    id: 'learner-dash.courseCard.verifiedBannerRibbonAlt',\n    description: 'Course card verified banner ribbon alt-text',\n    defaultMessage: 'ID Verified Ribbon/Badge',\n  },\n});\n\nexport default messages;\n"]}

package/dist/containers/CourseFilterControls/ActiveCourseFilters.d.ts

@@ -0,0 +1,2 @@
+export function ActiveCourseFilters(): import("react/jsx-runtime").JSX.Element;
+export default ActiveCourseFilters;

package/dist/containers/CourseFilterControls/ActiveCourseFilters.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useIntl } from '@openedx/frontend-base';
+import { Button, Chip } from '@openedx/paragon';
+import { CloseSmall } from '@openedx/paragon/icons';
+import { useFilters } from '../../data/context';
+import messages from './messages';
+import './index.scss';
+export const ActiveCourseFilters = () => {
+    const { formatMessage } = useIntl();
+    const { filters, clearFilters, removeFilter } = useFilters();
+    return (_jsxs("div", { id: "course-list-active-filters", children: [filters.map(filter => (_jsx(Chip, { iconAfter: CloseSmall, onClick: () => removeFilter(filter), children: formatMessage(messages[filter]) }, filter))), _jsx(Button, { variant: "link", onClick: clearFilters, children: formatMessage(messages.clearAll) })] }));
+};
+export default ActiveCourseFilters;
+//# sourceMappingURL=ActiveCourseFilters.js.map

package/dist/containers/CourseFilterControls/ActiveCourseFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveCourseFilters.js","sourceRoot":"","sources":["../../../src/containers/CourseFilterControls/ActiveCourseFilters.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,EAAE;IACtC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,UAAU,EAAE,CAAC;IAE7D,OAAO,CACL,eAAK,EAAE,EAAC,4BAA4B,aACjC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CACrB,KAAC,IAAI,IAEH,SAAS,EAAE,UAAU,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,YAElC,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,IAJ3B,MAAM,CAKN,CACR,CAAC,EACF,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,YAAY,YACzC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAC1B,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["import React from 'react';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { Button, Chip } from '@openedx/paragon';\nimport { CloseSmall } from '@openedx/paragon/icons';\nimport { useFilters } from '@src/data/context';\n\nimport messages from './messages';\nimport './index.scss';\n\nexport const ActiveCourseFilters = () => {\n  const { formatMessage } = useIntl();\n  const { filters, clearFilters, removeFilter } = useFilters();\n\n  return (\n    <div id=\"course-list-active-filters\">\n      {filters.map(filter => (\n        <Chip\n          key={filter}\n          iconAfter={CloseSmall}\n          onClick={() => removeFilter(filter)}\n        >\n          {formatMessage(messages[filter])}\n        </Chip>\n      ))}\n      <Button variant=\"link\" onClick={clearFilters}>\n        {formatMessage(messages.clearAll)}\n      </Button>\n    </div>\n  );\n};\n\nexport default ActiveCourseFilters;\n"]}

package/dist/containers/CourseFilterControls/CourseFilterControls.d.ts

@@ -0,0 +1,2 @@
+export function CourseFilterControls(): import("react/jsx-runtime").JSX.Element;
+export default CourseFilterControls;

package/dist/containers/CourseFilterControls/CourseFilterControls.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useIntl } from '@openedx/frontend-base';
+import track from '../../tracking';
+import { Button, Form, Icon, ModalPopup, Sheet, breakpoints, useWindowSize, ModalCloseButton, } from '@openedx/paragon';
+import { Close, Tune } from '@openedx/paragon/icons';
+import { useInitializeLearnerHome } from '../../data/hooks';
+import { useFilters } from '../../data/context';
+import FilterForm from './components/FilterForm';
+import SortForm from './components/SortForm';
+import messages from './messages';
+import './index.scss';
+export const CourseFilterControls = () => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [targetRef, setTargetRef] = React.useState(null);
+    const { formatMessage } = useIntl();
+    const { data } = useInitializeLearnerHome();
+    const hasCourses = React.useMemo(() => { var _a; return ((_a = data === null || data === void 0 ? void 0 : data.courses) === null || _a === void 0 ? void 0 : _a.length) > 0; }, [data]);
+    const { filters, sortBy, setSortBy, addFilter, removeFilter, } = useFilters();
+    const openFiltersOptions = () => {
+        track.filter.filterClicked();
+        setIsOpen(true);
+    };
+    const closeFiltersOptions = () => {
+        track.filter.filterOptionSelected(filters);
+        setIsOpen(false);
+    };
+    const handleSortChange = (event) => {
+        setSortBy(event.target.value);
+    };
+    const handleFilterChange = ({ target: { checked, value } }) => {
+        const update = checked ? addFilter : removeFilter;
+        update(value);
+    };
+    const { width } = useWindowSize();
+    const isMobile = width < breakpoints.small.minWidth;
+    return (_jsxs("div", { id: "course-filter-controls", children: [_jsx(Button, { ref: setTargetRef, variant: "outline-primary", iconBefore: Tune, onClick: openFiltersOptions, disabled: !hasCourses, children: formatMessage(messages.refine) }), _jsx(Form, { children: isMobile
+                    ? (_jsxs(Sheet, { className: "w-75", position: "left", show: isOpen, onClose: closeFiltersOptions, children: [_jsx("div", { className: "p-1 mr-3", children: _jsx("b", { children: formatMessage(messages.refine) }) }), _jsx("hr", {}), _jsx("div", { className: "filter-form-row", children: _jsx(FilterForm, { filters, handleFilterChange }) }), _jsx("div", { className: "filter-form-row text-left m-1", children: _jsx(SortForm, { sortBy, handleSortChange }) }), _jsx("div", { className: "pgn__modal-close-container", children: _jsx(ModalCloseButton, { variant: "tertiary", onClick: closeFiltersOptions, children: _jsx(Icon, { src: Close }) }) })] })) : (_jsx(ModalPopup, { positionRef: targetRef, isOpen: isOpen, onClose: closeFiltersOptions, placement: "bottom-end", children: _jsxs("div", { id: "course-filter-controls-card", className: "bg-white p-3 rounded shadow d-flex flex-row", children: [_jsx("div", { className: "filter-form-col", children: _jsx(FilterForm, { filters, handleFilterChange }) }), _jsx("hr", { className: "h-100 bg-primary-200 mx-3 my-0" }), _jsx("div", { className: "filter-form-col text-left m-1", children: _jsx(SortForm, { sortBy, handleSortChange }) })] }) })) })] }));
+};
+export default CourseFilterControls;
+//# sourceMappingURL=CourseFilterControls.js.map

package/dist/containers/CourseFilterControls/CourseFilterControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CourseFilterControls.js","sourceRoot":"","sources":["../../../src/containers/CourseFilterControls/CourseFilterControls.jsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { useIntl } from '@openedx/frontend-base';\nimport track from '@src/tracking';\nimport {\n  Button,\n  Form,\n  Icon,\n  ModalPopup,\n  Sheet,\n  breakpoints,\n  useWindowSize,\n  ModalCloseButton,\n} from '@openedx/paragon';\nimport { Close, Tune } from '@openedx/paragon/icons';\n\nimport { useInitializeLearnerHome } from '@src/data/hooks';\nimport { useFilters } from '@src/data/context';\nimport FilterForm from './components/FilterForm';\nimport SortForm from './components/SortForm';\nimport messages from './messages';\n\nimport './index.scss';\n\nexport const CourseFilterControls = () => {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [targetRef, setTargetRef] = React.useState(null);\n  const { formatMessage } = useIntl();\n  const { data } = useInitializeLearnerHome();\n  const hasCourses = React.useMemo(() => data?.courses?.length > 0, [data]);\n  const {\n    filters, sortBy, setSortBy, addFilter, removeFilter,\n  } = useFilters();\n\n  const openFiltersOptions = () => {\n    track.filter.filterClicked();\n    setIsOpen(true);\n  };\n  const closeFiltersOptions = () => {\n    track.filter.filterOptionSelected(filters);\n    setIsOpen(false);\n  };\n\n  const handleSortChange = (event) => {\n    setSortBy(event.target.value);\n  };\n\n  const handleFilterChange = ({ target: { checked, value } }) => {\n    const update = checked ? addFilter : removeFilter;\n    update(value);\n  };\n  const { width } = useWindowSize();\n  const isMobile = width < breakpoints.small.minWidth;\n\n  return (\n    <div id=\"course-filter-controls\">\n      <Button\n        ref={setTargetRef}\n        variant=\"outline-primary\"\n        iconBefore={Tune}\n        onClick={openFiltersOptions}\n        disabled={!hasCourses}\n      >\n        {formatMessage(messages.refine)}\n      </Button>\n      <Form>\n        {isMobile\n          ? (\n            <Sheet\n              className=\"w-75\"\n              position=\"left\"\n              show={isOpen}\n              onClose={closeFiltersOptions}\n            >\n              <div className=\"p-1 mr-3\">\n                <b>{formatMessage(messages.refine)}</b>\n              </div>\n              <hr />\n              <div className=\"filter-form-row\">\n                <FilterForm {...{ filters, handleFilterChange }} />\n              </div>\n              <div className=\"filter-form-row text-left m-1\">\n                <SortForm {...{ sortBy, handleSortChange }} />\n              </div>\n              <div className=\"pgn__modal-close-container\">\n                <ModalCloseButton variant=\"tertiary\" onClick={closeFiltersOptions}>\n                  <Icon src={Close} />\n                </ModalCloseButton>\n              </div>\n            </Sheet>\n          ) : (\n            <ModalPopup\n              positionRef={targetRef}\n              isOpen={isOpen}\n              onClose={closeFiltersOptions}\n              placement=\"bottom-end\"\n            >\n              <div\n                id=\"course-filter-controls-card\"\n                className=\"bg-white p-3 rounded shadow d-flex flex-row\"\n              >\n                <div className=\"filter-form-col\">\n                  <FilterForm {...{ filters, handleFilterChange }} />\n                </div>\n                <hr className=\"h-100 bg-primary-200 mx-3 my-0\" />\n                <div className=\"filter-form-col text-left m-1\">\n                  <SortForm {...{ sortBy, handleSortChange }} />\n                </div>\n              </div>\n            </ModalPopup>\n          )}\n      </Form>\n    </div>\n  );\n};\n\nexport default CourseFilterControls;\n"]}

package/dist/containers/CourseFilterControls/components/Checkbox.d.ts

@@ -0,0 +1,10 @@
+export function Checkbox({ filterKey }: {
+    filterKey: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace Checkbox {
+    namespace propTypes {
+        let filterKey: PropTypes.Validator<string>;
+    }
+}
+export default Checkbox;
+import PropTypes from 'prop-types';

package/dist/containers/CourseFilterControls/components/Checkbox.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@openedx/frontend-base';
+import { Form } from '@openedx/paragon';
+import messages from '../messages';
+export const Checkbox = ({ filterKey }) => {
+    const { formatMessage } = useIntl();
+    return (_jsx(Form.Checkbox, { className: "py-2", value: filterKey, children: formatMessage(messages[filterKey]) }));
+};
+Checkbox.propTypes = {
+    filterKey: PropTypes.string.isRequired,
+};
+export default Checkbox;
+//# sourceMappingURL=Checkbox.js.map