@edx/frontend-app-subscription-learner-dashboard 1.15.1 → 1.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/containers/Dashboard/DashboardContent.d.ts +5 -2
- package/dist/containers/Dashboard/DashboardContent.js +1 -1
- package/dist/containers/Dashboard/DashboardContent.js.map +1 -1
- package/dist/containers/Dashboard/DashboardTabs.d.ts +4 -1
- package/dist/containers/Dashboard/DashboardTabs.js +23 -18
- package/dist/containers/Dashboard/DashboardTabs.js.map +1 -1
- package/dist/containers/Dashboard/index.js +3 -1
- package/dist/containers/Dashboard/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
interface IDashboardContentProps {
|
|
2
|
+
hasCourseHistory: boolean;
|
|
3
|
+
}
|
|
4
|
+
export declare const DashboardContent: ({ hasCourseHistory }: IDashboardContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Row, Col } from '@openedx/paragon';
|
|
3
3
|
import DashboardTabs from './DashboardTabs';
|
|
4
|
-
export const DashboardContent = () => (_jsxs(Row, { children: [_jsx(Col, { xs: 12, lg: 8, children: _jsx(DashboardTabs, {}) }), _jsx(Col, { xs: 12, lg: 4, className: "mt-4", "data-testid": "dashboard-sidebar", children: _jsxs("div", { className: "dashboard-sidebar", children: [_jsx("h2", { children: "Sidebar" }), _jsx("p", { children: "This is the sidebar content." })] }) })] }));
|
|
4
|
+
export const DashboardContent = ({ hasCourseHistory }) => (_jsxs(Row, { children: [_jsx(Col, { xs: 12, lg: 8, children: _jsx(DashboardTabs, { hasCourseHistory: hasCourseHistory }) }), _jsx(Col, { xs: 12, lg: 4, className: "mt-4", "data-testid": "dashboard-sidebar", children: _jsxs("div", { className: "dashboard-sidebar", children: [_jsx("h2", { children: "Sidebar" }), _jsx("p", { children: "This is the sidebar content." })] }) })] }));
|
|
5
5
|
//# sourceMappingURL=DashboardContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashboardContent.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/DashboardContent.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"DashboardContent.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/DashboardContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAM5C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,gBAAgB,EAA0B,EAAE,EAAE,CAAC,CAChF,MAAC,GAAG,eACF,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,YAChB,KAAC,aAAa,IAAC,gBAAgB,EAAE,gBAAgB,GAAI,GACjD,EACN,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,SAAS,EAAC,MAAM,iBAAa,mBAAmB,YAClE,eAAK,SAAS,EAAC,mBAAmB,aAEhC,mCAAgB,EAChB,uDAAmC,IAC/B,GACF,IACF,CACP,CAAC","sourcesContent":["import { Row, Col } from '@openedx/paragon';\nimport DashboardTabs from './DashboardTabs';\n\ninterface IDashboardContentProps {\n hasCourseHistory: boolean,\n}\n\nexport const DashboardContent = ({ hasCourseHistory }: IDashboardContentProps) => (\n <Row>\n <Col xs={12} lg={8}>\n <DashboardTabs hasCourseHistory={hasCourseHistory} />\n </Col>\n <Col xs={12} lg={4} className=\"mt-4\" data-testid=\"dashboard-sidebar\">\n <div className=\"dashboard-sidebar\">\n {/* Temporary Content added, will be replaced with actual sidebar content */}\n <h2>Sidebar</h2>\n <p>This is the sidebar content.</p>\n </div>\n </Col>\n </Row>\n);\n"]}
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
interface IDashboardTabsProps {
|
|
2
|
+
hasCourseHistory: boolean;
|
|
3
|
+
}
|
|
4
|
+
declare const DashboardTabs: ({ hasCourseHistory }: IDashboardTabsProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
5
|
export default DashboardTabs;
|
|
@@ -4,26 +4,31 @@ import { Tabs, Tab } from '@openedx/paragon';
|
|
|
4
4
|
import CoursesPanel from '../CoursesPanel';
|
|
5
5
|
import ProgramsPanel from '../ProgramsPanel';
|
|
6
6
|
import HistoryPanel from '../HistoryPanel';
|
|
7
|
-
const DashboardTabs = () => {
|
|
7
|
+
const DashboardTabs = ({ hasCourseHistory }) => {
|
|
8
8
|
var _a;
|
|
9
9
|
// Defining the tabs here
|
|
10
|
-
const dashboardTabs = useMemo(() =>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
10
|
+
const dashboardTabs = useMemo(() => {
|
|
11
|
+
const tabs = [
|
|
12
|
+
{
|
|
13
|
+
key: 'courses',
|
|
14
|
+
title: 'Courses',
|
|
15
|
+
panel: _jsx(CoursesPanel, {}),
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
key: 'programs',
|
|
19
|
+
title: 'Programs',
|
|
20
|
+
panel: _jsx(ProgramsPanel, {}),
|
|
21
|
+
},
|
|
22
|
+
];
|
|
23
|
+
if (hasCourseHistory) {
|
|
24
|
+
tabs.push({
|
|
25
|
+
key: 'history',
|
|
26
|
+
title: 'Course history',
|
|
27
|
+
panel: _jsx(HistoryPanel, {}),
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
return tabs;
|
|
31
|
+
}, [hasCourseHistory]);
|
|
27
32
|
const [activeTab, setActiveTab] = useState(dashboardTabs[0].key);
|
|
28
33
|
const handleTabSelect = useCallback((tabKey) => {
|
|
29
34
|
if (tabKey) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashboardTabs.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/DashboardTabs.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,YAAY,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"DashboardTabs.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/DashboardTabs.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAM3C,MAAM,aAAa,GAAG,CAAC,EAAE,gBAAgB,EAAuB,EAAE,EAAE;;IAClE,yBAAyB;IACzB,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,IAAI,GAAG;YACX;gBACE,GAAG,EAAE,SAAS;gBACd,KAAK,EAAE,SAAS;gBAChB,KAAK,EAAE,KAAC,YAAY,KAAG;aACxB;YACD;gBACE,GAAG,EAAE,UAAU;gBACf,KAAK,EAAE,UAAU;gBACjB,KAAK,EAAE,KAAC,aAAa,KAAG;aACzB;SACF,CAAC;QAEF,IAAI,gBAAgB,EAAE,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC;gBACR,GAAG,EAAE,SAAS;gBACd,KAAK,EAAE,gBAAgB;gBACvB,KAAK,EAAE,KAAC,YAAY,KAAG;aACxB,CAAC,CAAC;QACL,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IACjE,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,MAAM,EAAE,EAAE;QAC7C,IAAI,MAAM,EAAE,CAAC;YACX,YAAY,CAAC,MAAM,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAC,6BAA6B,EAChC,gBAAgB,EAAE,MAAA,aAAa,CAAC,CAAC,CAAC,0CAAE,GAAG,EACvC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,eAAe,EACzB,SAAS,EAAC,MAAM,EAChB,YAAY,kBAEX,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACxB,KAAC,GAAG,IAAC,QAAQ,EAAE,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,YACrC,GAAG,CAAC,KAAK,IADmC,GAAG,CAAC,GAAG,CAEhD,CACP,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import React, { useMemo, useState, useCallback } from 'react';\nimport { Tabs, Tab } from '@openedx/paragon';\nimport CoursesPanel from '../CoursesPanel';\nimport ProgramsPanel from '../ProgramsPanel';\nimport HistoryPanel from '../HistoryPanel';\n\ninterface IDashboardTabsProps {\n hasCourseHistory: boolean,\n}\n\nconst DashboardTabs = ({ hasCourseHistory }: IDashboardTabsProps) => {\n // Defining the tabs here\n const dashboardTabs = useMemo(() => {\n const tabs = [\n {\n key: 'courses',\n title: 'Courses',\n panel: <CoursesPanel />,\n },\n {\n key: 'programs',\n title: 'Programs',\n panel: <ProgramsPanel />,\n },\n ];\n\n if (hasCourseHistory) {\n tabs.push({\n key: 'history',\n title: 'Course history',\n panel: <HistoryPanel />,\n });\n }\n\n return tabs;\n }, [hasCourseHistory]);\n\n const [activeTab, setActiveTab] = useState(dashboardTabs[0].key);\n const handleTabSelect = useCallback((tabKey) => {\n if (tabKey) {\n setActiveTab(tabKey);\n }\n }, []);\n\n return (\n <Tabs\n id=\"subscription-dashboard-tabs\"\n defaultActiveKey={dashboardTabs[0]?.key}\n activeKey={activeTab}\n onSelect={handleTabSelect}\n className=\"mb-4\"\n mountOnEnter\n >\n {dashboardTabs.map(tab => (\n <Tab eventKey={tab.key} title={tab.title} key={tab.key}>\n {tab.panel}\n </Tab>\n ))}\n </Tabs>\n );\n};\n\nexport default DashboardTabs;\n"]}
|
|
@@ -13,14 +13,16 @@ import './index.scss';
|
|
|
13
13
|
import { SubscriptionBanner } from '../SubscriptionBanner';
|
|
14
14
|
import { DashboardTitle } from './DashboardTitle';
|
|
15
15
|
export const Dashboard = () => {
|
|
16
|
+
var _a, _b;
|
|
16
17
|
const { data, isPending } = useInitializeSubsCourseDashboard();
|
|
17
18
|
const { pageTitle } = hooks.useDashboardMessages();
|
|
18
19
|
const { selectSessionModal } = useSelectSessionModal();
|
|
19
20
|
const showSelectSessionModal = selectSessionModal.cardId !== null;
|
|
20
21
|
const hasCourses = useMemo(() => { var _a; return ((_a = data === null || data === void 0 ? void 0 : data.subscriptionCourses) === null || _a === void 0 ? void 0 : _a.length) > 0; }, [data]);
|
|
22
|
+
const hasCourseHistory = ((_b = (_a = data === null || data === void 0 ? void 0 : data.nonUpgradeableCourses) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
|
|
21
23
|
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
|
|
22
24
|
? (_jsx(LoadingView, {}))
|
|
23
|
-
: (_jsxs(DashboardLayout, { children: [_jsx(SubscriptionBanner, {}), _jsx(DashboardTitle, {}), _jsx(DashboardContent, {}), _jsx(RecentlyViewedPanel, {})] })) })] }) }) }));
|
|
25
|
+
: (_jsxs(DashboardLayout, { children: [_jsx(SubscriptionBanner, {}), _jsx(DashboardTitle, {}), _jsx(DashboardContent, { hasCourseHistory: hasCourseHistory }), _jsx(RecentlyViewedPanel, {})] })) })] }) }) }));
|
|
24
26
|
};
|
|
25
27
|
export default Dashboard;
|
|
26
28
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/index.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,gCAAgC,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,kBAAkB,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,kBAAkB,MAAM,gCAAgC,CAAC;AAChE,OAAO,mBAAmB,MAAM,wBAAwB,CAAC;AAEzD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/index.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,gCAAgC,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,kBAAkB,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,kBAAkB,MAAM,gCAAgC,CAAC;AAChE,OAAO,mBAAmB,MAAM,wBAAwB,CAAC;AAEzD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;;IAC5B,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,gCAAgC,EAAE,CAAC;IAC/D,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,mBAAmB,0CAAE,MAAM,IAAG,CAAC,CAAA,EAAA,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAChF,MAAM,gBAAgB,GAAG,CAAC,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,qBAAqB,0CAAE,MAAM,mCAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IAExE,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,MAAC,eAAe,eACd,KAAC,kBAAkB,KAAG,EACtB,KAAC,cAAc,KAAG,EAClB,KAAC,gBAAgB,IAAC,gBAAgB,EAAE,gBAAgB,GAAI,EACxD,KAAC,mBAAmB,KAAG,IACP,CACnB,GACC,IACF,GACD,GACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useMemo } from 'react';\n\nimport { useSelectSessionModal } from '@src/data/context';\nimport { useInitializeSubsCourseDashboard } from '@src/data/hooks';\nimport SelectSessionModal from '../../containers/SelectSessionModal';\nimport { DashboardContent } from './DashboardContent';\nimport DashboardModalSlot from '../../slots/DashboardModalSlot';\nimport RecentlyViewedPanel from '../RecentlyViewedPanel';\n\nimport LoadingView from './LoadingView';\nimport DashboardLayout from './DashboardLayout';\n\nimport hooks from './hooks';\nimport './index.scss';\nimport { SubscriptionBanner } from '../SubscriptionBanner';\nimport { DashboardTitle } from './DashboardTitle';\n\nexport const Dashboard = () => {\n const { data, isPending } = useInitializeSubsCourseDashboard();\n const { pageTitle } = hooks.useDashboardMessages();\n const { selectSessionModal } = useSelectSessionModal();\n const showSelectSessionModal = selectSessionModal.cardId !== null;\n\n const hasCourses = useMemo(() => data?.subscriptionCourses?.length > 0, [data]);\n const hasCourseHistory = (data?.nonUpgradeableCourses?.length ?? 0) > 0;\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 <SubscriptionBanner />\n <DashboardTitle />\n <DashboardContent hasCourseHistory={hasCourseHistory} />\n <RecentlyViewedPanel />\n </DashboardLayout>\n )}\n </div>\n </div>\n </main>\n </div>\n );\n};\n\nexport default Dashboard;\n"]}
|