@openedx/frontend-app-learner-dashboard 1.0.0-alpha.1 → 1.0.0-alpha.11

package/dist/containers/CoursesPanel/index.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { useIntl } from '@openedx/frontend-base';
+import { useInitializeLearnerHome } from '../../data/hooks';
+import { CourseFilterControls, } from '../../containers/CourseFilterControls';
+import CourseListSlot from '../../slots/CourseListSlot';
+import NoCoursesViewSlot from '../../slots/NoCoursesViewSlot';
+import { useFilters } from '../../data/context';
+import { getVisibleList } from '../../utils/dataTransformers';
+import messages from './messages';
+import './index.scss';
+/**
+ * Renders the list of CourseCards, as well as the controls (CourseFilterControls) for modifying the list.
+ * Also houses the NoCoursesView to display if the user hasn't enrolled in any courses.
+ * @returns List of courses as CourseCards or empty state
+*/
+export const CoursesPanel = () => {
+    const { formatMessage } = useIntl();
+    const { data } = useInitializeLearnerHome();
+    const hasCourses = 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, pageNumber, setPageNumber, } = useFilters();
+    const { visibleList, numPages } = useMemo(() => {
+        const transformedCourses = (data === null || data === void 0 ? void 0 : data.coursesByCardId)
+            ? Object.values(data.coursesByCardId)
+            : [];
+        return getVisibleList(transformedCourses, filters, sortBy, pageNumber);
+    }, [data, filters, sortBy, pageNumber]);
+    // Clamp page number when filtered/mutated list shrinks
+    React.useEffect(() => {
+        if (numPages > 0 && pageNumber > numPages) {
+            setPageNumber(1);
+        }
+    }, [numPages, pageNumber, setPageNumber]);
+    const courseListData = {
+        filterOptions: filters,
+        setPageNumber,
+        numPages,
+        visibleList,
+        showFilters: filters.length > 0,
+    };
+    return (_jsxs("div", { className: "course-list-container", children: [_jsxs("div", { className: "course-list-heading-container", children: [_jsx("h2", { className: "course-list-title", children: formatMessage(messages.myCourses) }), _jsx("div", { className: "course-filter-controls-container", children: _jsx(CourseFilterControls, {}) })] }), hasCourses ? _jsx(CourseListSlot, { courseListData: courseListData }) : _jsx(NoCoursesViewSlot, {})] }));
+};
+CoursesPanel.propTypes = {};
+export default CoursesPanel;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/CoursesPanel/index.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EACL,oBAAoB,GACrB,MAAM,uCAAuC,CAAC;AAC/C,OAAO,cAAc,MAAM,4BAA4B,CAAC;AACxD,OAAO,iBAAiB,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,cAAc,CAAC;AAEtB;;;;EAIE;AACF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,EAAE,IAAI,EAAE,GAAG,wBAAwB,EAAE,CAAC;IAC5C,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,0CAAE,MAAM,IAAG,CAAC,CAAA,EAAA,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEpE,MAAM,EACJ,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,GAC3C,GAAG,UAAU,EAAE,CAAC;IACjB,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7C,MAAM,kBAAkB,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,eAAe;YAC9C,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC;YACrC,CAAC,CAAC,EAAE,CAAC;QACP,OAAO,cAAc,CACnB,kBAAkB,EAClB,OAAO,EACP,MAAM,EACN,UAAU,CACX,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAExC,uDAAuD;IACvD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,QAAQ,GAAG,CAAC,IAAI,UAAU,GAAG,QAAQ,EAAE,CAAC;YAC1C,aAAa,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;IAE1C,MAAM,cAAc,GAAG;QACrB,aAAa,EAAE,OAAO;QACtB,aAAa;QACb,QAAQ;QACR,WAAW;QACX,WAAW,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC;KAChC,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,aACpC,eAAK,SAAS,EAAC,+BAA+B,aAC5C,aAAI,SAAS,EAAC,mBAAmB,YAAE,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAM,EAC1E,cAAK,SAAS,EAAC,kCAAkC,YAC/C,KAAC,oBAAoB,KAAG,GACpB,IACF,EACL,UAAU,CAAC,CAAC,CAAC,KAAC,cAAc,IAAC,cAAc,EAAE,cAAc,GAAI,CAAC,CAAC,CAAC,KAAC,iBAAiB,KAAG,IACpF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,SAAS,GAAG,EAAE,CAAC;AAE5B,eAAe,YAAY,CAAC","sourcesContent":["import React, { useMemo } from 'react';\n\nimport { useIntl } from '@openedx/frontend-base';\nimport { useInitializeLearnerHome } from '@src/data/hooks';\nimport {\n  CourseFilterControls,\n} from '../../containers/CourseFilterControls';\nimport CourseListSlot from '../../slots/CourseListSlot';\nimport NoCoursesViewSlot from '../../slots/NoCoursesViewSlot';\nimport { useFilters } from '@src/data/context';\n\nimport { getVisibleList } from '@src/utils/dataTransformers';\n\nimport messages from './messages';\n\nimport './index.scss';\n\n/**\n * Renders the list of CourseCards, as well as the controls (CourseFilterControls) for modifying the list.\n * Also houses the NoCoursesView to display if the user hasn't enrolled in any courses.\n * @returns List of courses as CourseCards or empty state\n*/\nexport const CoursesPanel = () => {\n  const { formatMessage } = useIntl();\n  const { data } = useInitializeLearnerHome();\n  const hasCourses = useMemo(() => data?.courses?.length > 0, [data]);\n\n  const {\n    filters, sortBy, pageNumber, setPageNumber,\n  } = useFilters();\n  const { visibleList, numPages } = useMemo(() => {\n    const transformedCourses = data?.coursesByCardId\n      ? Object.values(data.coursesByCardId)\n      : [];\n    return getVisibleList(\n      transformedCourses,\n      filters,\n      sortBy,\n      pageNumber,\n    );\n  }, [data, filters, sortBy, pageNumber]);\n\n  // Clamp page number when filtered/mutated list shrinks\n  React.useEffect(() => {\n    if (numPages > 0 && pageNumber > numPages) {\n      setPageNumber(1);\n    }\n  }, [numPages, pageNumber, setPageNumber]);\n\n  const courseListData = {\n    filterOptions: filters,\n    setPageNumber,\n    numPages,\n    visibleList,\n    showFilters: filters.length > 0,\n  };\n\n  return (\n    <div className=\"course-list-container\">\n      <div className=\"course-list-heading-container\">\n        <h2 className=\"course-list-title\">{formatMessage(messages.myCourses)}</h2>\n        <div className=\"course-filter-controls-container\">\n          <CourseFilterControls />\n        </div>\n      </div>\n      {hasCourses ? <CourseListSlot courseListData={courseListData} /> : <NoCoursesViewSlot />}\n    </div>\n  );\n};\n\nCoursesPanel.propTypes = {};\n\nexport default CoursesPanel;\n"]}

package/dist/containers/CoursesPanel/index.scss

@@ -0,0 +1,40 @@
+.course-list-heading-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.course-list-title {
+  font-size: var(--pgn-typography-font-size-h2-base);
+  margin: var(--pgn-spacing-spacer-3) 0;
+}
+
+.course-list-loading {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.course-filter-controls-container {
+  text-align: right;
+  align-self: center;
+}
+
+@media (--pgn-size-breakpoint-max-width-md) {
+  .course-list-heading-container {
+    flex-direction: column-reverse;
+    align-items: flex-start;
+  }
+
+  .course-filter-controls-container {
+    text-align: left;
+    align-self: flex-start;
+  }
+
+  .course-list-title {
+    font-size: var(--pgn-typography-font-size-h3-base);
+    margin: var(--pgn-spacing-spacer-2) 0;
+  }
+}

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

@@ -0,0 +1,8 @@
+export default messages;
+declare namespace messages {
+    namespace myCourses {
+        let id: string;
+        let defaultMessage: string;
+        let description: string;
+    }
+}

package/dist/containers/CoursesPanel/messages.js

@@ -0,0 +1,10 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    myCourses: {
+        id: 'dashboard.mycourses',
+        defaultMessage: 'My Courses',
+        description: 'Course list heading',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/CoursesPanel/messages.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,SAAS,EAAE;QACT,EAAE,EAAE,qBAAqB;QACzB,cAAc,EAAE,YAAY;QAC5B,WAAW,EAAE,qBAAqB;KACnC;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  myCourses: {\n    id: 'dashboard.mycourses',\n    defaultMessage: 'My Courses',\n    description: 'Course list heading',\n  },\n});\n\nexport default messages;\n"]}

package/dist/containers/Dashboard/DashboardLayout.d.ts

@@ -0,0 +1,58 @@
+export namespace columnConfig {
+    namespace courseList {
+        namespace withSidebar {
+            namespace lg {
+                let span: number;
+                let offset: number;
+            }
+            namespace xl {
+                let span_1: number;
+                export { span_1 as span };
+                let offset_1: number;
+                export { offset_1 as offset };
+            }
+        }
+        namespace noSidebar {
+            export namespace lg_1 {
+                let span_2: number;
+                export { span_2 as span };
+                let offset_2: number;
+                export { offset_2 as offset };
+            }
+            export { lg_1 as lg };
+            export namespace xl_1 {
+                let span_3: number;
+                export { span_3 as span };
+                let offset_3: number;
+                export { offset_3 as offset };
+            }
+            export { xl_1 as xl };
+        }
+    }
+    namespace sidebar {
+        export namespace lg_2 {
+            let span_4: number;
+            export { span_4 as span };
+            let offset_4: number;
+            export { offset_4 as offset };
+        }
+        export { lg_2 as lg };
+        export namespace xl_2 {
+            let span_5: number;
+            export { span_5 as span };
+            let offset_5: number;
+            export { offset_5 as offset };
+        }
+        export { xl_2 as xl };
+    }
+}
+export function DashboardLayout({ children }: {
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace DashboardLayout {
+    namespace propTypes {
+        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+    }
+}
+export default DashboardLayout;
+import PropTypes from 'prop-types';

package/dist/containers/Dashboard/DashboardLayout.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container, Col, Row } from '@openedx/paragon';
+import WidgetSidebarSlot from '../../slots/WidgetSidebarSlot';
+import hooks from './hooks';
+export const columnConfig = {
+    courseList: {
+        withSidebar: {
+            lg: { span: 12, offset: 0 },
+            xl: { span: 8, offset: 0 },
+        },
+        noSidebar: {
+            lg: { span: 12, offset: 0 },
+            xl: { span: 12, offset: 0 },
+        },
+    },
+    sidebar: {
+        lg: { span: 12, offset: 0 },
+        xl: { span: 4, offset: 0 },
+    },
+};
+export const DashboardLayout = ({ children }) => {
+    const { isCollapsed, sidebarShowing, } = hooks.useDashboardLayoutData();
+    const courseListColumnProps = sidebarShowing
+        ? columnConfig.courseList.withSidebar
+        : columnConfig.courseList.noSidebar;
+    return (_jsx(Container, { fluid: true, size: "xl", children: _jsxs(Row, { children: [_jsx(Col, Object.assign({}, courseListColumnProps, { className: "course-list-column", children: children })), _jsx(Col, Object.assign({}, columnConfig.sidebar, { className: ['sidebar-column', !isCollapsed && 'not-collapsed'], children: _jsx(WidgetSidebarSlot, {}) }))] }) }));
+};
+DashboardLayout.propTypes = {
+    children: PropTypes.node.isRequired,
+};
+export default DashboardLayout;
+//# sourceMappingURL=DashboardLayout.js.map

package/dist/containers/Dashboard/DashboardLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardLayout.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/DashboardLayout.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,iBAAiB,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,UAAU,EAAE;QACV,WAAW,EAAE;YACX,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;YAC3B,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;SAC3B;QACD,SAAS,EAAE;YACT,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;YAC3B,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;SAC5B;KACF;IACD,OAAO,EAAE;QACP,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE;QAC3B,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;KAC3B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9C,MAAM,EACJ,WAAW,EACX,cAAc,GACf,GAAG,KAAK,CAAC,sBAAsB,EAAE,CAAC;IAEnC,MAAM,qBAAqB,GAAG,cAAc;QAC1C,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,WAAW;QACrC,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,SAAS,CAAC;IAEtC,OAAO,CACL,KAAC,SAAS,IAAC,KAAK,QAAC,IAAI,EAAC,IAAI,YACxB,MAAC,GAAG,eACF,KAAC,GAAG,oBAAK,qBAAqB,IAAE,SAAS,EAAC,oBAAoB,YAC3D,QAAQ,IACL,EACN,KAAC,GAAG,oBAAK,YAAY,CAAC,OAAO,IAAE,SAAS,EAAE,CAAC,gBAAgB,EAAE,CAAC,WAAW,IAAI,eAAe,CAAC,YAC3F,KAAC,iBAAiB,KAAG,IACjB,IACF,GACI,CACb,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,CAAC,SAAS,GAAG;IAC1B,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CACpC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Container, Col, Row } from '@openedx/paragon';\n\nimport WidgetSidebarSlot from '../../slots/WidgetSidebarSlot';\n\nimport hooks from './hooks';\n\nexport const columnConfig = {\n  courseList: {\n    withSidebar: {\n      lg: { span: 12, offset: 0 },\n      xl: { span: 8, offset: 0 },\n    },\n    noSidebar: {\n      lg: { span: 12, offset: 0 },\n      xl: { span: 12, offset: 0 },\n    },\n  },\n  sidebar: {\n    lg: { span: 12, offset: 0 },\n    xl: { span: 4, offset: 0 },\n  },\n};\n\nexport const DashboardLayout = ({ children }) => {\n  const {\n    isCollapsed,\n    sidebarShowing,\n  } = hooks.useDashboardLayoutData();\n\n  const courseListColumnProps = sidebarShowing\n    ? columnConfig.courseList.withSidebar\n    : columnConfig.courseList.noSidebar;\n\n  return (\n    <Container fluid size=\"xl\">\n      <Row>\n        <Col {...courseListColumnProps} className=\"course-list-column\">\n          {children}\n        </Col>\n        <Col {...columnConfig.sidebar} className={['sidebar-column', !isCollapsed && 'not-collapsed']}>\n          <WidgetSidebarSlot />\n        </Col>\n      </Row>\n    </Container>\n  );\n};\nDashboardLayout.propTypes = {\n  children: PropTypes.node.isRequired,\n};\n\nexport default DashboardLayout;\n"]}

package/dist/containers/Dashboard/LoadingView.d.ts

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

package/dist/containers/Dashboard/LoadingView.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Spinner } from '@openedx/paragon';
+import hooks from './hooks';
+export const LoadingView = () => {
+    const { spinnerScreenReaderText } = hooks.useDashboardMessages();
+    return (_jsx("div", { className: "course-list-loading", children: _jsx(Spinner, { animation: "border", className: "mie-3", screenReaderText: spinnerScreenReaderText }) }));
+};
+export default LoadingView;
+//# sourceMappingURL=LoadingView.js.map

package/dist/containers/Dashboard/LoadingView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingView.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/LoadingView.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C,OAAO,KAAK,MAAM,SAAS,CAAC;AAE5B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,EAAE,uBAAuB,EAAE,GAAG,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAEjE,OAAO,CACL,cAAK,SAAS,EAAC,qBAAqB,YAClC,KAAC,OAAO,IACN,SAAS,EAAC,QAAQ,EAClB,SAAS,EAAC,OAAO,EACjB,gBAAgB,EAAE,uBAAuB,GACzC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import React from 'react';\nimport { Spinner } from '@openedx/paragon';\n\nimport hooks from './hooks';\n\nexport const LoadingView = () => {\n  const { spinnerScreenReaderText } = hooks.useDashboardMessages();\n\n  return (\n    <div className=\"course-list-loading\">\n      <Spinner\n        animation=\"border\"\n        className=\"mie-3\"\n        screenReaderText={spinnerScreenReaderText}\n      />\n    </div>\n  );\n};\n\nexport default LoadingView;\n"]}

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

@@ -0,0 +1,15 @@
+export const state: any;
+export function useDashboardMessages(): {
+    spinnerScreenReaderText: string;
+    pageTitle: string;
+};
+export function useDashboardLayoutData(): {
+    isDashboardCollapsed: boolean;
+    sidebarShowing: any;
+    setSidebarShowing: any;
+};
+declare namespace _default {
+    export { useDashboardLayoutData };
+    export { useDashboardMessages };
+}
+export default _default;

package/dist/containers/Dashboard/hooks.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useWindowSize, breakpoints } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import { StrictDict } from '../../utils';
+import appMessages from '../../messages';
+import * as module from './hooks';
+export const state = StrictDict({
+    sidebarShowing: (val) => React.useState(val), // eslint-disable-line
+});
+export const useDashboardMessages = () => {
+    const { formatMessage } = useIntl();
+    return {
+        spinnerScreenReaderText: formatMessage(appMessages['learner-dash.loadingSR']),
+        pageTitle: formatMessage(appMessages['learner-dash.title']),
+    };
+};
+export const useDashboardLayoutData = () => {
+    const { width } = useWindowSize();
+    const [sidebarShowing, setSidebarShowing] = module.state.sidebarShowing(true);
+    return {
+        isDashboardCollapsed: width < breakpoints.large.maxWidth,
+        sidebarShowing,
+        setSidebarShowing,
+    };
+};
+export default {
+    useDashboardLayoutData,
+    useDashboardMessages,
+};
+//# sourceMappingURL=hooks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/hooks.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,KAAK,MAAM,MAAM,SAAS,CAAC;AAElC,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAAC;IAC9B,cAAc,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,sBAAsB;CACrE,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,OAAO;QACL,uBAAuB,EAAE,aAAa,CAAC,WAAW,CAAC,wBAAwB,CAAC,CAAC;QAC7E,SAAS,EAAE,aAAa,CAAC,WAAW,CAAC,oBAAoB,CAAC,CAAC;KAC5D,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE;IACzC,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,EAAE,CAAC;IAElC,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;IAC9E,OAAO;QACL,oBAAoB,EAAE,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,QAAQ;QACxD,cAAc;QACd,iBAAiB;KAClB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe;IACb,sBAAsB;IACtB,oBAAoB;CACrB,CAAC","sourcesContent":["import React from 'react';\nimport { useWindowSize, breakpoints } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport { StrictDict } from '../../utils';\n\nimport appMessages from '../../messages';\nimport * as module from './hooks';\n\nexport const state = StrictDict({\n  sidebarShowing: (val) => React.useState(val), // eslint-disable-line\n});\n\nexport const useDashboardMessages = () => {\n  const { formatMessage } = useIntl();\n  return {\n    spinnerScreenReaderText: formatMessage(appMessages['learner-dash.loadingSR']),\n    pageTitle: formatMessage(appMessages['learner-dash.title']),\n  };\n};\n\nexport const useDashboardLayoutData = () => {\n  const { width } = useWindowSize();\n\n  const [sidebarShowing, setSidebarShowing] = module.state.sidebarShowing(true);\n  return {\n    isDashboardCollapsed: width < breakpoints.large.maxWidth,\n    sidebarShowing,\n    setSidebarShowing,\n  };\n};\n\nexport default {\n  useDashboardLayoutData,\n  useDashboardMessages,\n};\n"]}

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

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

package/dist/containers/Dashboard/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { useSelectSessionModal } from '../../data/context';
+import { useInitializeLearnerHome } from '../../data/hooks';
+import SelectSessionModal from '../../containers/SelectSessionModal';
+import CoursesPanel from '../../containers/CoursesPanel';
+import DashboardModalSlot from '../../slots/DashboardModalSlot';
+import LoadingView from './LoadingView';
+import DashboardLayout from './DashboardLayout';
+import hooks from './hooks';
+import './index.scss';
+export const Dashboard = () => {
+    const { data, isPending } = useInitializeLearnerHome();
+    const { pageTitle } = hooks.useDashboardMessages();
+    const { selectSessionModal } = useSelectSessionModal();
+    const showSelectSessionModal = selectSessionModal.cardId !== null;
+    const hasCourses = useMemo(() => { var _a; return ((_a = data === null || data === void 0 ? void 0 : data.courses) === null || _a === void 0 ? void 0 : _a.length) > 0; }, [data]);
+    return (_jsx("div", { id: "learnerdashboardroot", children: _jsx("main", { children: _jsxs("div", { id: "dashboard-container", className: "d-flex flex-column p-2 pt-0", children: [_jsx("h1", { className: "sr-only", children: pageTitle }), !isPending && (_jsxs(_Fragment, { children: [_jsx(DashboardModalSlot, {}), (hasCourses && showSelectSessionModal) && _jsx(SelectSessionModal, {})] })), _jsx("div", { id: "dashboard-content", "data-testid": "dashboard-content", children: isPending
+                            ? (_jsx(LoadingView, {}))
+                            : (_jsx(DashboardLayout, { children: _jsx(CoursesPanel, {}) })) })] }) }) }));
+};
+export default Dashboard;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/index.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,kBAAkB,MAAM,qCAAqC,CAAC;AACrE,OAAO,YAAY,MAAM,+BAA+B,CAAC;AACzD,OAAO,kBAAkB,MAAM,gCAAgC,CAAC;AAEhE,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,wBAAwB,EAAE,CAAC;IACvD,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACnD,MAAM,EAAE,kBAAkB,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACvD,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,MAAM,KAAK,IAAI,CAAC;IAElE,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,0CAAE,MAAM,IAAG,CAAC,CAAA,EAAA,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEpE,OAAO,CACL,cAAK,EAAE,EAAC,sBAAsB,YAC5B,yBACE,eAAK,EAAE,EAAC,qBAAqB,EAAC,SAAS,EAAC,6BAA6B,aACnE,aAAI,SAAS,EAAC,SAAS,YAAE,SAAS,GAAM,EACvC,CAAC,SAAS,IAAI,CACb,8BACE,KAAC,kBAAkB,KAAG,EACrB,CAAC,UAAU,IAAI,sBAAsB,CAAC,IAAI,KAAC,kBAAkB,KAAG,IAChE,CACJ,EACD,cAAK,EAAE,EAAC,mBAAmB,iBAAa,mBAAmB,YACxD,SAAS;4BACR,CAAC,CAAC,CAAC,KAAC,WAAW,KAAG,CAAC;4BACnB,CAAC,CAAC,CACA,KAAC,eAAe,cACd,KAAC,YAAY,KAAG,GACA,CACnB,GACC,IACF,GACD,GACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import React, { useMemo } from 'react';\n\nimport { useSelectSessionModal } from '@src/data/context';\nimport { useInitializeLearnerHome } from '@src/data/hooks';\nimport SelectSessionModal from '../../containers/SelectSessionModal';\nimport CoursesPanel from '../../containers/CoursesPanel';\nimport DashboardModalSlot from '../../slots/DashboardModalSlot';\n\nimport LoadingView from './LoadingView';\nimport DashboardLayout from './DashboardLayout';\nimport hooks from './hooks';\nimport './index.scss';\n\nexport const Dashboard = () => {\n  const { data, isPending } = useInitializeLearnerHome();\n  const { pageTitle } = hooks.useDashboardMessages();\n  const { selectSessionModal } = useSelectSessionModal();\n  const showSelectSessionModal = selectSessionModal.cardId !== null;\n\n  const hasCourses = useMemo(() => data?.courses?.length > 0, [data]);\n\n  return (\n    <div id=\"learnerdashboardroot\">\n      <main>\n        <div id=\"dashboard-container\" className=\"d-flex flex-column p-2 pt-0\">\n          <h1 className=\"sr-only\">{pageTitle}</h1>\n          {!isPending && (\n            <>\n              <DashboardModalSlot />\n              {(hasCourses && showSelectSessionModal) && <SelectSessionModal />}\n            </>\n          )}\n          <div id=\"dashboard-content\" data-testid=\"dashboard-content\">\n            {isPending\n              ? (<LoadingView />)\n              : (\n                <DashboardLayout>\n                  <CoursesPanel />\n                </DashboardLayout>\n              )}\n          </div>\n        </div>\n      </main>\n    </div>\n  );\n};\n\nexport default Dashboard;\n"]}

package/dist/containers/Dashboard/index.scss

@@ -0,0 +1,27 @@
+.course-list-column {
+  padding: 0 var(--pgn-spacing-spacer-4);
+}
+
+.sidebar-column {
+  padding: 0 var(--pgn-spacing-spacer-3) 0 var(--pgn-spacing-spacer-1);
+
+  &.not-collapsed {
+    padding-top: var(--pgn-spacing-spacer-2);
+
+    & >:first-child {
+      margin-top: var(--pgn-spacing-spacer-5-5);
+    }
+  }
+}
+
+@media (--pgn-size-breakpoint-max-width-lg) {
+  .sidebar-column {
+    // grid are inheriting dir="ltr" from the body, so we need to override it
+    [dir=ltr] & {
+      padding: 0 var(--pgn-spacing-spacer-3);
+    }
+    [dir=rtl] & {
+      padding: 0 var(--pgn-spacing-spacer-3);
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+export const state: any;
+export function useEmailData({ closeModal, cardId, }: {
+    closeModal: any;
+    cardId: any;
+}): {
+    onToggle: () => any;
+    save: () => void;
+    isOptedOut: any;
+};
+export default module.useEmailData;

package/dist/containers/EmailSettingsModal/hooks.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StrictDict } from '../../utils';
+import { useUpdateEmailSettings } from '../../data/hooks';
+import { useCourseData } from '../../hooks';
+import * as module from './hooks';
+export const state = StrictDict({
+    toggle: (val) => React.useState(val), // eslint-disable-line
+});
+export const useEmailData = ({ closeModal, cardId, }) => {
+    var _a, _b;
+    const courseData = useCourseData(cardId);
+    const hasOptedOutOfEmail = ((_a = courseData === null || courseData === void 0 ? void 0 : courseData.enrollment) === null || _a === void 0 ? void 0 : _a.hasOptedOutOfEmail) || false;
+    const courseId = (_b = courseData === null || courseData === void 0 ? void 0 : courseData.courseRun) === null || _b === void 0 ? void 0 : _b.courseId;
+    const [isOptedOut, setIsOptedOut] = module.state.toggle(hasOptedOutOfEmail);
+    const { mutate: updateEmailSettings } = useUpdateEmailSettings();
+    const onToggle = () => setIsOptedOut(!isOptedOut);
+    const save = () => {
+        updateEmailSettings({ courseId, enable: !isOptedOut }, { onSuccess: () => closeModal() });
+    };
+    return {
+        onToggle,
+        save,
+        isOptedOut,
+    };
+};
+export default useEmailData;
+//# sourceMappingURL=hooks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../src/containers/EmailSettingsModal/hooks.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE3C,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,YAAY,GAAG,CAAC,EAC3B,UAAU,EACV,MAAM,GACP,EAAE,EAAE;;IACH,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IACzC,MAAM,kBAAkB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,0CAAE,kBAAkB,KAAI,KAAK,CAAC;IAC/E,MAAM,QAAQ,GAAG,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,SAAS,0CAAE,QAAQ,CAAC;IACjD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;IAC5E,MAAM,EAAE,MAAM,EAAE,mBAAmB,EAAE,GAAG,sBAAsB,EAAE,CAAC;IACjE,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;IAClD,MAAM,IAAI,GAAG,GAAG,EAAE;QAChB,mBAAmB,CACjB,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,UAAU,EAAE,EACjC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,EAAE,CAClC,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO;QACL,QAAQ;QACR,IAAI;QACJ,UAAU;KACX,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import React from 'react';\n\nimport { StrictDict } from '@src/utils';\nimport { useUpdateEmailSettings } from '@src/data/hooks';\nimport { useCourseData } from '@src/hooks';\n\nimport * as module from './hooks';\n\nexport const state = StrictDict({\n  toggle: (val) => React.useState(val), // eslint-disable-line\n});\n\nexport const useEmailData = ({\n  closeModal,\n  cardId,\n}) => {\n  const courseData = useCourseData(cardId);\n  const hasOptedOutOfEmail = courseData?.enrollment?.hasOptedOutOfEmail || false;\n  const courseId = courseData?.courseRun?.courseId;\n  const [isOptedOut, setIsOptedOut] = module.state.toggle(hasOptedOutOfEmail);\n  const { mutate: updateEmailSettings } = useUpdateEmailSettings();\n  const onToggle = () => setIsOptedOut(!isOptedOut);\n  const save = () => {\n    updateEmailSettings(\n      { courseId, enable: !isOptedOut },\n      { onSuccess: () => closeModal() },\n    );\n  };\n\n  return {\n    onToggle,\n    save,\n    isOptedOut,\n  };\n};\n\nexport default useEmailData;\n"]}

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

@@ -0,0 +1,14 @@
+export function EmailSettingsModal({ closeModal, show, cardId, }: {
+    closeModal: any;
+    show: any;
+    cardId: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace EmailSettingsModal {
+    namespace propTypes {
+        let cardId: PropTypes.Validator<string>;
+        let closeModal: PropTypes.Validator<(...args: any[]) => any>;
+        let show: PropTypes.Validator<boolean>;
+    }
+}
+export default EmailSettingsModal;
+import PropTypes from 'prop-types';

package/dist/containers/EmailSettingsModal/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@openedx/frontend-base';
+import { ActionRow, Button, Form, ModalDialog, } from '@openedx/paragon';
+import { nullMethod } from '../../utils';
+import useEmailData from './hooks';
+import messages from './messages';
+export const EmailSettingsModal = ({ closeModal, show, cardId, }) => {
+    const { isOptedOut, onToggle, save, } = useEmailData({ closeModal, cardId });
+    const { formatMessage } = useIntl();
+    return (_jsx(ModalDialog, { isOpen: show, onClose: nullMethod, hasCloseButton: false, title: "", children: _jsxs("div", { className: "bg-white p-3 rounded shadow", style: { textAlign: 'start' }, children: [_jsx("h4", { children: formatMessage(messages.header) }), _jsx(Form.Switch, { checked: !isOptedOut, onChange: onToggle, children: formatMessage(isOptedOut ? messages.emailsOff : messages.emailsOn) }), _jsx("p", { children: formatMessage(messages.description) }), _jsxs(ActionRow, { children: [_jsx(Button, { variant: "tertiary", onClick: closeModal, children: formatMessage(messages.nevermind) }), _jsx(Button, { onClick: save, children: formatMessage(messages.save) })] })] }) }));
+};
+EmailSettingsModal.propTypes = {
+    cardId: PropTypes.string.isRequired,
+    closeModal: PropTypes.func.isRequired,
+    show: PropTypes.bool.isRequired,
+};
+export default EmailSettingsModal;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/EmailSettingsModal/index.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EACL,SAAS,EACT,MAAM,EACN,IAAI,EACJ,WAAW,GACZ,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,YAAY,MAAM,SAAS,CAAC;AACnC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EACjC,UAAU,EACV,IAAI,EACJ,MAAM,GACP,EAAE,EAAE;IACH,MAAM,EACJ,UAAU,EACV,QAAQ,EACR,IAAI,GACL,GAAG,YAAY,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,CAAC;IACzC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,OAAO,CACL,KAAC,WAAW,IACV,MAAM,EAAE,IAAI,EACZ,OAAO,EAAE,UAAU,EACnB,cAAc,EAAE,KAAK,EACrB,KAAK,EAAC,EAAE,YAER,eAAK,SAAS,EAAC,6BAA6B,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,aACxE,uBAAK,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,GAAM,EACzC,KAAC,IAAI,CAAC,MAAM,IAAC,OAAO,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,QAAQ,YAClD,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,GACvD,EACd,sBAAI,aAAa,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAK,EAC5C,MAAC,SAAS,eACR,KAAC,MAAM,IAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,UAAU,YAC3C,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC,GAC3B,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,IAAI,YAAG,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAU,IACpD,IACR,GACM,CACf,CAAC;AACJ,CAAC,CAAC;AACF,kBAAkB,CAAC,SAAS,GAAG;IAC7B,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IACnC,UAAU,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;IACrC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,UAAU;CAChC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { useIntl } from '@openedx/frontend-base';\nimport {\n  ActionRow,\n  Button,\n  Form,\n  ModalDialog,\n} from '@openedx/paragon';\n\nimport { nullMethod } from '../../utils';\n\nimport useEmailData from './hooks';\nimport messages from './messages';\n\nexport const EmailSettingsModal = ({\n  closeModal,\n  show,\n  cardId,\n}) => {\n  const {\n    isOptedOut,\n    onToggle,\n    save,\n  } = useEmailData({ closeModal, cardId });\n  const { formatMessage } = useIntl();\n\n  return (\n    <ModalDialog\n      isOpen={show}\n      onClose={nullMethod}\n      hasCloseButton={false}\n      title=\"\"\n    >\n      <div className=\"bg-white p-3 rounded shadow\" style={{ textAlign: 'start' }}>\n        <h4>{formatMessage(messages.header)}</h4>\n        <Form.Switch checked={!isOptedOut} onChange={onToggle}>\n          {formatMessage(isOptedOut ? messages.emailsOff : messages.emailsOn)}\n        </Form.Switch>\n        <p>{formatMessage(messages.description)}</p>\n        <ActionRow>\n          <Button variant=\"tertiary\" onClick={closeModal}>\n            {formatMessage(messages.nevermind)}\n          </Button>\n          <Button onClick={save}>{formatMessage(messages.save)}</Button>\n        </ActionRow>\n      </div>\n    </ModalDialog>\n  );\n};\nEmailSettingsModal.propTypes = {\n  cardId: PropTypes.string.isRequired,\n  closeModal: PropTypes.func.isRequired,\n  show: PropTypes.bool.isRequired,\n};\n\nexport default EmailSettingsModal;\n"]}

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

@@ -0,0 +1,49 @@
+export default messages;
+declare namespace messages {
+    export namespace header {
+        let id: string;
+        let description: string;
+        let defaultMessage: string;
+    }
+    export namespace emailsOff {
+        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 namespace emailsOn {
+        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 };
+    }
+    export namespace description_3 {
+        let id_3: string;
+        export { id_3 as id };
+        let description_4: string;
+        export { description_4 as description };
+        let defaultMessage_3: string;
+        export { defaultMessage_3 as defaultMessage };
+    }
+    export { description_3 as description };
+    export namespace nevermind {
+        let id_4: string;
+        export { id_4 as id };
+        let description_5: string;
+        export { description_5 as description };
+        let defaultMessage_4: string;
+        export { defaultMessage_4 as defaultMessage };
+    }
+    export namespace save {
+        let id_5: string;
+        export { id_5 as id };
+        let description_6: string;
+        export { description_6 as description };
+        let defaultMessage_5: string;
+        export { defaultMessage_5 as defaultMessage };
+    }
+}

package/dist/containers/EmailSettingsModal/messages.js

@@ -0,0 +1,35 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    header: {
+        id: 'learner-dash.emailSettings.header',
+        description: 'Header for email settings modal',
+        defaultMessage: 'Receive course emails?',
+    },
+    emailsOff: {
+        id: 'learner-dash.emailSettings.emailsOff',
+        description: 'Toggle text for email settings modal when email is disabled',
+        defaultMessage: 'Course emails are off',
+    },
+    emailsOn: {
+        id: 'learner-dash.emailSettings.emailsOn',
+        description: 'Toggle text for email settings modal when email is enabled',
+        defaultMessage: 'Course emails are on',
+    },
+    description: {
+        id: 'learner-dash.emailSettings.description',
+        description: 'Description for email settings modal',
+        defaultMessage: 'Course emails include important information about your course from instructors.',
+    },
+    nevermind: {
+        id: 'learner-dash.emailSettings.nevermind',
+        description: 'Cancel action for email settings modal',
+        defaultMessage: 'Never mind',
+    },
+    save: {
+        id: 'learner-dash.emailSettings.save',
+        description: 'Save action for email settings modal',
+        defaultMessage: 'Save settings',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/EmailSettingsModal/messages.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,MAAM,EAAE;QACN,EAAE,EAAE,mCAAmC;QACvC,WAAW,EAAE,iCAAiC;QAC9C,cAAc,EAAE,wBAAwB;KACzC;IACD,SAAS,EAAE;QACT,EAAE,EAAE,sCAAsC;QAC1C,WAAW,EAAE,6DAA6D;QAC1E,cAAc,EAAE,uBAAuB;KACxC;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,qCAAqC;QACzC,WAAW,EAAE,4DAA4D;QACzE,cAAc,EAAE,sBAAsB;KACvC;IACD,WAAW,EAAE;QACX,EAAE,EAAE,wCAAwC;QAC5C,WAAW,EAAE,sCAAsC;QACnD,cAAc,EAAE,iFAAiF;KAClG;IACD,SAAS,EAAE;QACT,EAAE,EAAE,sCAAsC;QAC1C,WAAW,EAAE,wCAAwC;QACrD,cAAc,EAAE,YAAY;KAC7B;IACD,IAAI,EAAE;QACJ,EAAE,EAAE,iCAAiC;QACrC,WAAW,EAAE,sCAAsC;QACnD,cAAc,EAAE,eAAe;KAChC;CAEF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  header: {\n    id: 'learner-dash.emailSettings.header',\n    description: 'Header for email settings modal',\n    defaultMessage: 'Receive course emails?',\n  },\n  emailsOff: {\n    id: 'learner-dash.emailSettings.emailsOff',\n    description: 'Toggle text for email settings modal when email is disabled',\n    defaultMessage: 'Course emails are off',\n  },\n  emailsOn: {\n    id: 'learner-dash.emailSettings.emailsOn',\n    description: 'Toggle text for email settings modal when email is enabled',\n    defaultMessage: 'Course emails are on',\n  },\n  description: {\n    id: 'learner-dash.emailSettings.description',\n    description: 'Description for email settings modal',\n    defaultMessage: 'Course emails include important information about your course from instructors.',\n  },\n  nevermind: {\n    id: 'learner-dash.emailSettings.nevermind',\n    description: 'Cancel action for email settings modal',\n    defaultMessage: 'Never mind',\n  },\n  save: {\n    id: 'learner-dash.emailSettings.save',\n    description: 'Save action for email settings modal',\n    defaultMessage: 'Save settings',\n  },\n\n});\n\nexport default messages;\n"]}

package/dist/containers/RelatedProgramsModal/components/ProgramCard.d.ts

@@ -0,0 +1,19 @@
+export function whiteFontWrapper(node: any): import("react/jsx-runtime").JSX.Element;
+export function ProgramCard({ data }: {
+    data: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace ProgramCard {
+    namespace propTypes {
+        let data: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            bannerImgSrc: PropTypes.Requireable<string>;
+            logoImgSrc: PropTypes.Requireable<string>;
+            numberOfCourses: PropTypes.Requireable<number>;
+            programType: PropTypes.Requireable<string>;
+            programUrl: PropTypes.Requireable<string>;
+            provider: PropTypes.Requireable<string>;
+            title: PropTypes.Requireable<string>;
+        }>>>;
+    }
+}
+export default ProgramCard;
+import PropTypes from 'prop-types';

package/dist/containers/RelatedProgramsModal/components/ProgramCard.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@openedx/frontend-base';
+import { Badge, Card, 
+// Hyperlink,
+Icon, } from '@openedx/paragon';
+import { Program } from '@openedx/paragon/icons';
+import messages from './messages';
+import './index.scss';
+export const whiteFontWrapper = (node) => (_jsx("span", { className: "text-white", children: node }));
+export const ProgramCard = ({ data }) => {
+    const { formatMessage } = useIntl();
+    const numCoursesMessage = formatMessage(messages.courses, { numCourses: data.numberOfCourses });
+    return (_jsxs(Card, { className: "program-card mx-auto bg-primary-500 text-white mb-3.5 pb-3.5", style: { width: '18rem', color: 'white' }, as: "a", href: data.programUrl, isClickable: true, children: [_jsx(Card.ImageCap, { className: "program-card-banner", src: data.bannerImgSrc, srcAlt: formatMessage(messages.bannerAlt), logoSrc: data.logoImgSrc, logoAlt: formatMessage(messages.logoAlt, { provider: data.provider }) }), _jsx(Card.Header, { title: whiteFontWrapper(data.title), subtitle: whiteFontWrapper(data.provider) }), _jsxs("div", { className: "ml-4", children: [_jsxs(Badge, { variant: "light", className: "program-type-badge", children: [_jsx(Icon, { src: Program, className: "d-inline-block" }), " ", data.programType] }), _jsx("div", { className: "program-summary mt-2", children: numCoursesMessage })] })] }));
+};
+ProgramCard.propTypes = {
+    data: PropTypes.shape({
+        bannerImgSrc: PropTypes.string,
+        logoImgSrc: PropTypes.string,
+        numberOfCourses: PropTypes.number,
+        programType: PropTypes.string,
+        programUrl: PropTypes.string,
+        provider: PropTypes.string,
+        title: PropTypes.string,
+    }).isRequired,
+};
+export default ProgramCard;
+//# sourceMappingURL=ProgramCard.js.map

package/dist/containers/RelatedProgramsModal/components/ProgramCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgramCard.js","sourceRoot":"","sources":["../../../../src/containers/RelatedProgramsModal/components/ProgramCard.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EACL,KAAK,EACL,IAAI;AACJ,aAAa;AACb,IAAI,GACL,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,eAAM,SAAS,EAAC,YAAY,YAAE,IAAI,GAAQ,CAAC,CAAC;AAEvF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACtC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,iBAAiB,GAAG,aAAa,CACrC,QAAQ,CAAC,OAAO,EAChB,EAAE,UAAU,EAAE,IAAI,CAAC,eAAe,EAAE,CACrC,CAAC;IACF,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAC,8DAA8D,EACxE,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EACzC,EAAE,EAAC,GAAG,EACN,IAAI,EAAE,IAAI,CAAC,UAAU,EACrB,WAAW,mBAEX,KAAC,IAAI,CAAC,QAAQ,IACZ,SAAS,EAAC,qBAAqB,EAC/B,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,MAAM,EAAE,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC,EACzC,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,OAAO,EAAE,aAAa,CAAC,QAAQ,CAAC,OAAO,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,GACrE,EACF,KAAC,IAAI,CAAC,MAAM,IACV,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,EACnC,QAAQ,EAAE,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,GACzC,EACF,eAAK,SAAS,EAAC,MAAM,aACnB,MAAC,KAAK,IAAC,OAAO,EAAC,OAAO,EAAC,SAAS,EAAC,oBAAoB,aACnD,KAAC,IAAI,IAAC,GAAG,EAAE,OAAO,EAAE,SAAS,EAAC,gBAAgB,GAAG,OAAE,IAAI,CAAC,WAAW,IAC7D,EACR,cAAK,SAAS,EAAC,sBAAsB,YAClC,iBAAiB,GACd,IACF,IACD,CACR,CAAC;AACJ,CAAC,CAAC;AACF,WAAW,CAAC,SAAS,GAAG;IACtB,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC;QACpB,YAAY,EAAE,SAAS,CAAC,MAAM;QAC9B,UAAU,EAAE,SAAS,CAAC,MAAM;QAC5B,eAAe,EAAE,SAAS,CAAC,MAAM;QACjC,WAAW,EAAE,SAAS,CAAC,MAAM;QAC7B,UAAU,EAAE,SAAS,CAAC,MAAM;QAC5B,QAAQ,EAAE,SAAS,CAAC,MAAM;QAC1B,KAAK,EAAE,SAAS,CAAC,MAAM;KACxB,CAAC,CAAC,UAAU;CACd,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { useIntl } from '@openedx/frontend-base';\nimport {\n  Badge,\n  Card,\n  // Hyperlink,\n  Icon,\n} from '@openedx/paragon';\nimport { Program } from '@openedx/paragon/icons';\n\nimport messages from './messages';\nimport './index.scss';\n\nexport const whiteFontWrapper = (node) => (<span className=\"text-white\">{node}</span>);\n\nexport const ProgramCard = ({ data }) => {\n  const { formatMessage } = useIntl();\n  const numCoursesMessage = formatMessage(\n    messages.courses,\n    { numCourses: data.numberOfCourses },\n  );\n  return (\n    <Card\n      className=\"program-card mx-auto bg-primary-500 text-white mb-3.5 pb-3.5\"\n      style={{ width: '18rem', color: 'white' }}\n      as=\"a\"\n      href={data.programUrl}\n      isClickable\n    >\n      <Card.ImageCap\n        className=\"program-card-banner\"\n        src={data.bannerImgSrc}\n        srcAlt={formatMessage(messages.bannerAlt)}\n        logoSrc={data.logoImgSrc}\n        logoAlt={formatMessage(messages.logoAlt, { provider: data.provider })}\n      />\n      <Card.Header\n        title={whiteFontWrapper(data.title)}\n        subtitle={whiteFontWrapper(data.provider)}\n      />\n      <div className=\"ml-4\">\n        <Badge variant=\"light\" className=\"program-type-badge\">\n          <Icon src={Program} className=\"d-inline-block\" /> {data.programType}\n        </Badge>\n        <div className=\"program-summary mt-2\">\n          {numCoursesMessage}\n        </div>\n      </div>\n    </Card>\n  );\n};\nProgramCard.propTypes = {\n  data: PropTypes.shape({\n    bannerImgSrc: PropTypes.string,\n    logoImgSrc: PropTypes.string,\n    numberOfCourses: PropTypes.number,\n    programType: PropTypes.string,\n    programUrl: PropTypes.string,\n    provider: PropTypes.string,\n    title: PropTypes.string,\n  }).isRequired,\n};\n\nexport default ProgramCard;\n"]}