@edx/frontend-app-subscription-learner-dashboard 1.5.0 → 1.6.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/ProgramDashboard/ProgramProgress/ProgramProgress.js +8 -10
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgress.js.map +1 -1
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgressTabs/index.js +2 -1
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgressTabs/index.js.map +1 -1
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCard/index.js +31 -4
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCard/index.js.map +1 -1
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/ViewCourseDetailButton.d.ts +2 -0
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/ViewCourseDetailButton.js +9 -0
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/ViewCourseDetailButton.js.map +1 -0
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/index.d.ts +2 -0
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/index.js +12 -0
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/index.js.map +1 -0
- package/dist/containers/ProgramDashboard/ProgramProgress/RemainingTabData/index.d.ts +2 -0
- package/dist/containers/ProgramDashboard/ProgramProgress/RemainingTabData/index.js +13 -0
- package/dist/containers/ProgramDashboard/ProgramProgress/RemainingTabData/index.js.map +1 -0
- package/dist/containers/ProgramDashboard/ProgramProgress/messages.d.ts +23 -3
- package/dist/containers/ProgramDashboard/ProgramProgress/messages.js +25 -5
- package/dist/containers/ProgramDashboard/ProgramProgress/messages.js.map +1 -1
- package/dist/hooks/index.d.ts +2 -1
- package/dist/hooks/index.js +2 -0
- package/dist/hooks/index.js.map +1 -1
- package/dist/hooks/useProgressData.d.ts +15 -0
- package/dist/hooks/useProgressData.js +20 -0
- package/dist/hooks/useProgressData.js.map +1 -0
- package/package.json +1 -1
|
@@ -1,20 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { Helmet } from 'react-helmet';
|
|
3
|
-
import { useParams } from 'react-router-dom';
|
|
4
3
|
import { Col, Container, Row } from '@openedx/paragon';
|
|
5
|
-
import { camelCaseObject } from '@openedx/frontend-base';
|
|
6
4
|
import './index.scss';
|
|
7
|
-
import {
|
|
5
|
+
import { useProgressData } from '../../../hooks';
|
|
8
6
|
import ProgramProgressHeader from './ProgramProgressHeader';
|
|
9
7
|
import ProgramProgressInfo from './ProgramProgressInfo';
|
|
10
8
|
import { ProgramProgressTabs } from './ProgramProgressTabs';
|
|
11
9
|
const ProgramProgress = () => {
|
|
12
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
const { data, isLoading, error } = useProgramProgressData(uuid);
|
|
16
|
-
const programProgressData = camelCaseObject(data);
|
|
17
|
-
if (!uuid) {
|
|
10
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
11
|
+
const { programProgressData, isLoading, error } = useProgressData();
|
|
12
|
+
if (programProgressData === null) {
|
|
18
13
|
return _jsx("div", { children: "Invalid URL" });
|
|
19
14
|
}
|
|
20
15
|
if (isLoading) {
|
|
@@ -32,7 +27,10 @@ const ProgramProgress = () => {
|
|
|
32
27
|
&& !((_e = courseData.inProgress) === null || _e === void 0 ? void 0 : _e.length)
|
|
33
28
|
&& ((_f = courseData.completed) === null || _f === void 0 ? void 0 : _f.length);
|
|
34
29
|
const programType = (_g = programData === null || programData === void 0 ? void 0 : programData.type) !== null && _g !== void 0 ? _g : '';
|
|
35
|
-
|
|
30
|
+
const inProgressCourseCount = ((_h = courseData === null || courseData === void 0 ? void 0 : courseData.inProgress) === null || _h === void 0 ? void 0 : _h.length) || 0;
|
|
31
|
+
const remainingCourseCount = ((_j = courseData === null || courseData === void 0 ? void 0 : courseData.notStarted) === null || _j === void 0 ? void 0 : _j.length) || 0;
|
|
32
|
+
const completedCourseCount = ((_k = courseData === null || courseData === void 0 ? void 0 : courseData.completed) === null || _k === void 0 ? void 0 : _k.length) || 0;
|
|
33
|
+
return (_jsxs(_Fragment, { children: [_jsx(Helmet, { title: `${programData === null || programData === void 0 ? void 0 : programData.title}` }), _jsxs(Container, { fluid: false, size: "xl", className: "p-4.5", children: [_jsx(ProgramProgressHeader, { programTitle: (_l = programData === null || programData === void 0 ? void 0 : programData.title) !== null && _l !== void 0 ? _l : '', programType: (_m = programData === null || programData === void 0 ? void 0 : programData.type) !== null && _m !== void 0 ? _m : '', authoringOrganizations: programData === null || programData === void 0 ? void 0 : programData.authoringOrganizations }), _jsx(Row, { children: _jsxs(Col, { sm: 12, md: 8, children: [_jsx(ProgramProgressInfo, { allCoursesCompleted: allCoursesCompleted, totalCoursesInProgram: totalCoursesInProgram, programTitle: (_o = programData === null || programData === void 0 ? void 0 : programData.title) !== null && _o !== void 0 ? _o : '' }), _jsx(ProgramProgressTabs, { counts: { inProgress: inProgressCourseCount, remaining: remainingCourseCount, completed: completedCourseCount }, type: programType })] }) })] })] }));
|
|
36
34
|
};
|
|
37
35
|
export default ProgramProgress;
|
|
38
36
|
//# sourceMappingURL=ProgramProgress.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgramProgress.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgress.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ProgramProgress.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgress.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,qBAAqB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,MAAM,eAAe,GAAO,GAAG,EAAE;;IAC/B,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAC;IAEpE,IAAI,mBAAmB,KAAK,IAAI,EAAE,CAAC;QACjC,OAAO,wCAAsB,CAAC;IAChC,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,uCAAqB,CAAC;IAC/B,CAAC;IAED,IAAI,KAAK,EAAE,CAAC;QACV,OAAO,2CAAyB,CAAC;IACnC,CAAC;IAED,MAAM,WAAW,GAAG,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,WAAW,CAAC;IACrD,MAAM,UAAU,GAAG,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,UAAU,CAAC;IAEnD,MAAM,qBAAqB,GAAG,CAAC,CAAA,MAAA,UAAU,CAAC,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC;UAC9D,CAAC,CAAA,MAAA,UAAU,CAAC,SAAS,0CAAE,MAAM,KAAI,CAAC,CAAC;UACnC,CAAC,CAAA,MAAA,UAAU,CAAC,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC,CAAC;IAEzC,MAAM,mBAAmB,GAAG,CAAC,CAAA,MAAA,UAAU,CAAC,UAAU,0CAAE,MAAM,CAAA;WACrD,CAAC,CAAA,MAAA,UAAU,CAAC,UAAU,0CAAE,MAAM,CAAA;YAC9B,MAAA,UAAU,CAAC,SAAS,0CAAE,MAAM,CAAA,CAAC;IAElC,MAAM,WAAW,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,mCAAI,EAAE,CAAC;IAC5C,MAAM,qBAAqB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC;IAClE,MAAM,oBAAoB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC;IACjE,MAAM,oBAAoB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,SAAS,0CAAE,MAAM,KAAI,CAAC,CAAC;IAEhE,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,KAAK,EAAE,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,EAAE,GAAI,EAC1C,MAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,aAClD,KAAC,qBAAqB,IACpB,YAAY,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,mCAAI,EAAE,EACtC,WAAW,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,mCAAI,EAAE,EACpC,sBAAsB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,sBAAsB,GAC3D,EACF,KAAC,GAAG,cACF,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,aAChB,KAAC,mBAAmB,IAClB,mBAAmB,EAAE,mBAAmB,EACxC,qBAAqB,EAAE,qBAAqB,EAC5C,YAAY,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,mCAAI,EAAE,GACtC,EACF,KAAC,mBAAmB,IAAC,MAAM,EAAE,EAAE,UAAU,EAAE,qBAAqB,EAAE,SAAS,EAAE,oBAAoB,EAAE,SAAS,EAAE,oBAAoB,EAAE,EAAE,IAAI,EAAE,WAAW,GAAI,IACvJ,GACF,IACI,IACX,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FC } from 'react';\nimport { Helmet } from 'react-helmet';\nimport { Col, Container, Row } from '@openedx/paragon';\n\nimport './index.scss';\nimport { useProgressData } from '@src/hooks';\nimport ProgramProgressHeader from './ProgramProgressHeader';\nimport ProgramProgressInfo from './ProgramProgressInfo';\nimport { ProgramProgressTabs } from './ProgramProgressTabs';\n\nconst ProgramProgress: FC = () => {\n const { programProgressData, isLoading, error } = useProgressData();\n\n if (programProgressData === null) {\n return <div>Invalid URL</div>;\n }\n\n if (isLoading) {\n return <div>Loading...</div>;\n }\n\n if (error) {\n return <div>Error occurred</div>;\n }\n\n const programData = programProgressData?.programData;\n const courseData = programProgressData?.courseData;\n\n const totalCoursesInProgram = (courseData.notStarted?.length || 0)\n + (courseData.completed?.length || 0)\n + (courseData.inProgress?.length || 0);\n\n const allCoursesCompleted = !courseData.notStarted?.length\n && !courseData.inProgress?.length\n && courseData.completed?.length;\n\n const programType = programData?.type ?? '';\n const inProgressCourseCount = courseData?.inProgress?.length || 0;\n const remainingCourseCount = courseData?.notStarted?.length || 0;\n const completedCourseCount = courseData?.completed?.length || 0;\n\n return (\n <>\n <Helmet title={`${programData?.title}`} />\n <Container fluid={false} size=\"xl\" className=\"p-4.5\">\n <ProgramProgressHeader\n programTitle={programData?.title ?? ''}\n programType={programData?.type ?? ''}\n authoringOrganizations={programData?.authoringOrganizations}\n />\n <Row>\n <Col sm={12} md={8}>\n <ProgramProgressInfo\n allCoursesCompleted={allCoursesCompleted}\n totalCoursesInProgram={totalCoursesInProgram}\n programTitle={programData?.title ?? ''}\n />\n <ProgramProgressTabs counts={{ inProgress: inProgressCourseCount, remaining: remainingCourseCount, completed: completedCourseCount }} type={programType} />\n </Col>\n </Row>\n </Container>\n </>\n );\n};\n\nexport default ProgramProgress;\n"]}
|
|
@@ -3,6 +3,7 @@ import { useState } from 'react';
|
|
|
3
3
|
import { Tabs, Tab } from '@openedx/paragon';
|
|
4
4
|
import { useIntl } from '@openedx/frontend-base';
|
|
5
5
|
import messages from '../messages';
|
|
6
|
+
import { RemainingTabData } from '../RemainingTabData';
|
|
6
7
|
export const ProgramProgressTabs = ({ type, counts }) => {
|
|
7
8
|
const { inProgress, remaining, completed } = counts;
|
|
8
9
|
const { formatMessage } = useIntl();
|
|
@@ -17,7 +18,7 @@ export const ProgramProgressTabs = ({ type, counts }) => {
|
|
|
17
18
|
key: 'remaining',
|
|
18
19
|
title: formatMessage(messages.programProgressRemainingTab),
|
|
19
20
|
count: remaining,
|
|
20
|
-
panel: _jsx(
|
|
21
|
+
panel: _jsx(RemainingTabData, {}),
|
|
21
22
|
},
|
|
22
23
|
{
|
|
23
24
|
key: 'completed',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgressTabs/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,OAAO,QAAQ,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgressTabs/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE;IACpF,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC;IACpD,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,QAAQ,GAA8B;QAC1C;YACE,GAAG,EAAE,aAAa;YAClB,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,4BAA4B,CAAC;YAC3D,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,0EAAyD;SACjE;QACD;YACE,GAAG,EAAE,WAAW;YAChB,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC;YAC1D,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,KAAC,gBAAgB,KAAG;SAC5B;QACD;YACE,GAAG,EAAE,WAAW;YAChB,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC;YAC1D,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,wEAAuD;SAC/D;QACD,GAAG,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,EAAE,MAAK,cAAc;YACxC,CAAC,CAAC,CAAC;oBACC,GAAG,EAAE,UAAU;oBACf,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,0BAA0B,CAAC;oBACzD,KAAK,EAAE,uEAAsD;iBAC9D,CAAC;YACJ,CAAC,CAAC,EAAE,CAAC;KACR,CAAC;IAEF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IAEpE,MAAM,eAAe,GAAG,CAAC,MAAqB,EAAE,EAAE;QAChD,IAAI,MAAM;YAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAC,uBAAuB,EAC1B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,eAAe,EACzB,SAAS,EAAC,MAAM,EAChB,YAAY,kBAEX,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACnB,KAAC,GAAG,IAAC,QAAQ,EAAE,GAAG,CAAC,GAAG,EAAgB,KAAK,EAAE,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,YAC7G,GAAG,CAAC,KAAK,IADiB,GAAG,CAAC,GAAG,CAE9B,CACP,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC, useState } from 'react';\nimport { Tabs, Tab } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { ProgramProgressTabsProps, ProgramProgressTabItems } from '../../data/types';\nimport messages from '../messages';\nimport { RemainingTabData } from '../RemainingTabData';\n\nexport const ProgramProgressTabs: FC<ProgramProgressTabsProps> = ({ type, counts }) => {\n const { inProgress, remaining, completed } = counts;\n const { formatMessage } = useIntl();\n\n const tabsData: ProgramProgressTabItems[] = [\n {\n key: 'in-progress',\n title: formatMessage(messages.programProgressInProgressTab),\n count: inProgress,\n panel: <span>In progress tab data will be available soon.</span>,\n },\n {\n key: 'remaining',\n title: formatMessage(messages.programProgressRemainingTab),\n count: remaining,\n panel: <RemainingTabData />,\n },\n {\n key: 'completed',\n title: formatMessage(messages.programProgressCompletedTab),\n count: completed,\n panel: <span>Completed tab data will be available soon.</span>,\n },\n ...(type?.toLowerCase() === 'micromasters'\n ? [{\n key: 'pathways',\n title: formatMessage(messages.programProgressPathwaysTab),\n panel: <span>Pathways tab data will be available soon.</span>,\n }]\n : []),\n ];\n\n const [activeTab, setActiveTab] = useState<string>(tabsData[0].key);\n\n const handleTabSelect = (tabKey: string | null) => {\n if (tabKey) setActiveTab(tabKey);\n };\n\n return (\n <Tabs\n id=\"program-progress-tabs\"\n activeKey={activeTab}\n onSelect={handleTabSelect}\n className=\"mb-4\"\n mountOnEnter\n >\n {tabsData.map(tab => (\n <Tab eventKey={tab.key} key={tab.key} title={tab.count !== undefined ? `${tab.title} (${tab.count})` : tab.title}>\n {tab.panel}\n </Tab>\n ))}\n </Tabs>\n );\n};\n"]}
|
|
@@ -3,12 +3,39 @@ import { Card, Button, Row, Col } from '@openedx/paragon';
|
|
|
3
3
|
import { useIntl } from '@openedx/frontend-base';
|
|
4
4
|
import messages from '../messages';
|
|
5
5
|
import './index.scss';
|
|
6
|
-
|
|
6
|
+
import { ProgressCardActions } from '../ProgressCardActions';
|
|
7
|
+
export const ProgressCard = ({ progressCardData, isLoading, tabType }) => {
|
|
7
8
|
const { formatMessage } = useIntl();
|
|
8
|
-
const { title,
|
|
9
|
-
|
|
9
|
+
const { title, certificateStatus, courseRuns } = progressCardData;
|
|
10
|
+
const [{ pacingType = '', start = '' } = {}] = Array.isArray(courseRuns) ? courseRuns : [];
|
|
11
|
+
/*
|
|
12
|
+
- Formatting pacing type safely
|
|
13
|
+
- replace underscores with spaces
|
|
14
|
+
- capitalize first letter of each word
|
|
15
|
+
- example: 'self_paced' -> 'Self Paced'
|
|
16
|
+
*/
|
|
17
|
+
const formattedPacing = pacingType
|
|
18
|
+
? pacingType.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
|
|
19
|
+
: '';
|
|
20
|
+
// base string
|
|
21
|
+
let enrollmentInfo = tabType !== 'remaining' ? formatMessage(messages.programProgressCardEnrollText) : '';
|
|
22
|
+
if (formattedPacing) {
|
|
23
|
+
enrollmentInfo += `${enrollmentInfo ? ' ' : ''}(${formattedPacing})`;
|
|
24
|
+
}
|
|
25
|
+
// add start date if exists
|
|
26
|
+
if (start) {
|
|
27
|
+
const startDate = new Date(start).toLocaleDateString('en-US', {
|
|
28
|
+
month: 'short',
|
|
29
|
+
day: 'numeric',
|
|
30
|
+
year: 'numeric'
|
|
31
|
+
});
|
|
32
|
+
enrollmentInfo = enrollmentInfo
|
|
33
|
+
? `${enrollmentInfo} ${formatMessage(messages.programProgressCardStartText)} ${startDate}`
|
|
34
|
+
: `${formatMessage(messages.programProgressCardStartText)} ${startDate}`;
|
|
35
|
+
}
|
|
36
|
+
return (_jsxs(Card, { className: "progress-card mb-3", "data-testid": "progress-card", isLoading: isLoading, children: [_jsx(Card.Section, { className: "pt-3 pb-2 px-4", children: _jsxs(Row, { children: [_jsxs(Col, { xs: 12, children: [_jsx("h4", { className: "mb-1 font-weight-bold", children: title }), _jsx("div", { className: "text-muted", children: enrollmentInfo })] }), _jsx(ProgressCardActions, {})] }) }), tabType !== 'remaining' && (_jsx(Card.Section, { className: "pt-3 pb-2 px-4", children: _jsxs(Row, { children: [_jsx(Col, { xs: 12, md: 9, children: _jsx("span", { children: formatMessage(messages.programProgressCardCertificate, {
|
|
10
37
|
certificateStatus,
|
|
11
38
|
bold: (chunks) => (_jsx("span", { className: "font-weight-bold", children: chunks })),
|
|
12
|
-
}) }) }), _jsx(Col, { xs: 12, md: 3, className: "d-flex justify-content-md-end", children: _jsx(Button, { variant: "outline-brand", children: formatMessage(messages.programProgressCardUpgradeButton) }) })] }) })] }));
|
|
39
|
+
}) }) }), _jsx(Col, { xs: 12, md: 3, className: "d-flex justify-content-md-end", children: _jsx(Button, { variant: "outline-brand", children: formatMessage(messages.programProgressCardUpgradeButton) }) })] }) }))] }));
|
|
13
40
|
};
|
|
14
41
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgressCard/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgressCard/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC } from 'react';\nimport { Card, Button, Row, Col } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { ProgressCardProps } from '../../data/types';\nimport messages from '../messages';\nimport './index.scss';\nimport { ProgressCardActions } from '../ProgressCardActions';\n\nexport const ProgressCard: FC<ProgressCardProps> = ({ progressCardData, isLoading, tabType }) => {\n const { formatMessage } = useIntl();\n const { title, certificateStatus, courseRuns } = progressCardData;\n\n const [{ pacingType = '', start = '' } = {}] = Array.isArray(courseRuns) ? courseRuns : [];\n\n /*\n - Formatting pacing type safely\n - replace underscores with spaces\n - capitalize first letter of each word\n - example: 'self_paced' -> 'Self Paced'\n */\n const formattedPacing = pacingType\n ? pacingType.replace(/_/g, ' ').replace(/\\b\\w/g, c => c.toUpperCase())\n : '';\n\n // base string\n let enrollmentInfo = tabType !== 'remaining' ? formatMessage(messages.programProgressCardEnrollText) : '';\n\n if (formattedPacing) {\n enrollmentInfo += `${enrollmentInfo ? ' ' : ''}(${formattedPacing})`;\n }\n\n // add start date if exists\n if (start) {\n const startDate = new Date(start).toLocaleDateString('en-US', {\n month: 'short',\n day: 'numeric',\n year: 'numeric'\n });\n\n enrollmentInfo = enrollmentInfo\n ? `${enrollmentInfo} ${formatMessage(messages.programProgressCardStartText)} ${startDate}`\n : `${formatMessage(messages.programProgressCardStartText)} ${startDate}`;\n }\n\n return (\n <Card className=\"progress-card mb-3\" data-testid=\"progress-card\" isLoading={isLoading}>\n <Card.Section className=\"pt-3 pb-2 px-4\">\n <Row>\n <Col xs={12}>\n <h4 className=\"mb-1 font-weight-bold\">{title}</h4>\n <div className=\"text-muted\">\n {enrollmentInfo}\n </div>\n </Col>\n <ProgressCardActions />\n </Row>\n </Card.Section>\n\n { tabType !== 'remaining' && (\n <Card.Section className=\"pt-3 pb-2 px-4\">\n <Row>\n <Col xs={12} md={9}>\n <span>\n {formatMessage(messages.programProgressCardCertificate, {\n certificateStatus,\n bold: (chunks: React.ReactNode) => (\n <span className=\"font-weight-bold\">{chunks}</span>\n ),\n })}\n </span>\n </Col>\n\n <Col xs={12} md={3} className=\"d-flex justify-content-md-end\">\n <Button variant=\"outline-brand\">\n {formatMessage(messages.programProgressCardUpgradeButton)}\n </Button>\n </Col>\n </Row>\n </Card.Section>\n )}\n </Card>\n );\n};\n"]}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Button } from '@openedx/paragon';
|
|
3
|
+
import { useIntl } from '@openedx/frontend-base';
|
|
4
|
+
import messages from '../messages';
|
|
5
|
+
export const ViewCourseDetailButton = () => {
|
|
6
|
+
const { formatMessage } = useIntl();
|
|
7
|
+
return (_jsx(Button, { variant: "outline-primary", children: formatMessage(messages.programProgressCardViewCourseDetailButton) }));
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=ViewCourseDetailButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ViewCourseDetailButton.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/ViewCourseDetailButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,MAAM,CAAC,MAAM,sBAAsB,GAAO,GAAG,EAAE;IAC7C,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,OAAO,CACL,KAAC,MAAM,IAAC,OAAO,EAAC,iBAAiB,YAC9B,aAAa,CAAC,QAAQ,CAAC,yCAAyC,CAAC,GAC3D,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { Button } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport messages from '../messages';\n\nexport const ViewCourseDetailButton: FC = () => {\n const { formatMessage } = useIntl();\n\n return (\n <Button variant=\"outline-primary\">\n {formatMessage(messages.programProgressCardViewCourseDetailButton)}\n </Button>\n );\n};\n"]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Col } from '@openedx/paragon';
|
|
3
|
+
import { useProgressData } from '../../../../hooks';
|
|
4
|
+
import { ViewCourseDetailButton } from './ViewCourseDetailButton';
|
|
5
|
+
export const ProgressCardActions = () => {
|
|
6
|
+
var _a;
|
|
7
|
+
const { programProgressData } = useProgressData();
|
|
8
|
+
const courseData = (programProgressData === null || programProgressData === void 0 ? void 0 : programProgressData.courseData) || {};
|
|
9
|
+
const remainingCourseCount = ((_a = courseData === null || courseData === void 0 ? void 0 : courseData.notStarted) === null || _a === void 0 ? void 0 : _a.length) || 0;
|
|
10
|
+
return (_jsx(Col, { xs: 12, className: "d-flex justify-content-md-end align-items-start mb-2", children: remainingCourseCount > 0 && _jsx(ViewCourseDetailButton, {}) }));
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAElE,MAAM,CAAC,MAAM,mBAAmB,GAAO,GAAG,EAAE;;IAC1C,MAAM,EAAE,mBAAmB,EAAE,GAAG,eAAe,EAAE,CAAC;IAElD,MAAM,UAAU,GAAG,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,UAAU,KAAI,EAAE,CAAC;IACzD,MAAM,oBAAoB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC;IAEjE,OAAO,CACL,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,sDAAsD,YAK1E,oBAAoB,GAAG,CAAC,IAAI,KAAC,sBAAsB,KAAG,GACnD,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { Col } from '@openedx/paragon';\n\nimport { useProgressData } from '@src/hooks';\nimport { ViewCourseDetailButton } from './ViewCourseDetailButton';\n\nexport const ProgressCardActions: FC = () => {\n const { programProgressData } = useProgressData();\n\n const courseData = programProgressData?.courseData || {};\n const remainingCourseCount = courseData?.notStarted?.length || 0;\n\n return (\n <Col xs={12} className=\"d-flex justify-content-md-end align-items-start mb-2\">\n {/**\n * TODO: The button shown here does not do anything at the moment but is meant to link to the walled garden page.\n * ACTION ITEM: Add the correct link to the ViewCourseDetailButton component once the URL is available.\n */}\n {remainingCourseCount > 0 && <ViewCourseDetailButton /> }\n </Col>\n );\n};\n"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useProgressData } from '../../../../hooks';
|
|
3
|
+
import { useIntl } from '@openedx/frontend-base';
|
|
4
|
+
import { ProgressCard } from '../ProgressCard';
|
|
5
|
+
import messages from '../messages';
|
|
6
|
+
export const RemainingTabData = () => {
|
|
7
|
+
const { programProgressData, isLoading } = useProgressData();
|
|
8
|
+
const { formatMessage } = useIntl();
|
|
9
|
+
const courseData = programProgressData === null || programProgressData === void 0 ? void 0 : programProgressData.courseData;
|
|
10
|
+
const remainingData = (courseData === null || courseData === void 0 ? void 0 : courseData.notStarted) || [];
|
|
11
|
+
return (_jsxs("div", { children: [_jsx("h5", { children: formatMessage(messages.programProgressRemainingCourse) }), remainingData.length > 0 ? (remainingData.map((course) => (_jsx(ProgressCard, { progressCardData: course, isLoading: isLoading, tabType: "remaining" }, course.id)))) : (_jsx("p", { children: formatMessage(messages.programProgressRemainingTabNoCourse) }))] }));
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/RemainingTabData/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,MAAM,CAAC,MAAM,gBAAgB,GAAO,GAAG,EAAE;IACvC,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,GAAG,eAAe,EAAE,CAAC;IAC7D,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,UAAU,GAAG,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,UAAU,CAAC;IACnD,MAAM,aAAa,GAAG,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,KAAI,EAAE,CAAC;IAEnD,OAAO,CACL,0BACE,uBAAK,aAAa,CAAC,QAAQ,CAAC,8BAA8B,CAAC,GAAM,EAChE,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC1B,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC5B,KAAC,YAAY,IAAiB,gBAAgB,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAC,WAAW,IAA9E,MAAM,CAAC,EAAE,CAAwE,CACrG,CAAC,CACH,CAAC,CAAC,CAAC,CACF,sBAAI,aAAa,CAAC,QAAQ,CAAC,mCAAmC,CAAC,GAAK,CACrE,IACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useProgressData } from '@src/hooks';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { ProgressCard } from '../ProgressCard';\nimport messages from '../messages';\n\nexport const RemainingTabData: FC = () => {\n const { programProgressData, isLoading } = useProgressData();\n const { formatMessage } = useIntl();\n\n const courseData = programProgressData?.courseData;\n const remainingData = courseData?.notStarted || [];\n\n return (\n <div>\n <h5>{formatMessage(messages.programProgressRemainingCourse)}</h5>\n {remainingData.length > 0 ? (\n remainingData.map((course) => (\n <ProgressCard key={course.id} progressCardData={course} isLoading={isLoading} tabType=\"remaining\" />\n ))\n ) : (\n <p>{formatMessage(messages.programProgressRemainingTabNoCourse)}</p>\n )}\n </div>\n );\n};\n"]}
|
|
@@ -29,17 +29,17 @@ declare const messages: {
|
|
|
29
29
|
id: string;
|
|
30
30
|
description: string;
|
|
31
31
|
};
|
|
32
|
-
|
|
32
|
+
programProgressCardCertificate: {
|
|
33
33
|
defaultMessage: string;
|
|
34
34
|
id: string;
|
|
35
35
|
description: string;
|
|
36
36
|
};
|
|
37
|
-
|
|
37
|
+
programProgressCardResumeButton: {
|
|
38
38
|
defaultMessage: string;
|
|
39
39
|
id: string;
|
|
40
40
|
description: string;
|
|
41
41
|
};
|
|
42
|
-
|
|
42
|
+
programProgressCardViewCourseDetailButton: {
|
|
43
43
|
defaultMessage: string;
|
|
44
44
|
id: string;
|
|
45
45
|
description: string;
|
|
@@ -49,6 +49,16 @@ declare const messages: {
|
|
|
49
49
|
id: string;
|
|
50
50
|
description: string;
|
|
51
51
|
};
|
|
52
|
+
programProgressCardEnrollText: {
|
|
53
|
+
defaultMessage: string;
|
|
54
|
+
id: string;
|
|
55
|
+
description: string;
|
|
56
|
+
};
|
|
57
|
+
programProgressCardStartText: {
|
|
58
|
+
defaultMessage: string;
|
|
59
|
+
id: string;
|
|
60
|
+
description: string;
|
|
61
|
+
};
|
|
52
62
|
programProgressInProgressTab: {
|
|
53
63
|
defaultMessage: string;
|
|
54
64
|
id: string;
|
|
@@ -69,5 +79,15 @@ declare const messages: {
|
|
|
69
79
|
id: string;
|
|
70
80
|
description: string;
|
|
71
81
|
};
|
|
82
|
+
programProgressRemainingCourse: {
|
|
83
|
+
defaultMessage: string;
|
|
84
|
+
id: string;
|
|
85
|
+
description: string;
|
|
86
|
+
};
|
|
87
|
+
programProgressRemainingTabNoCourse: {
|
|
88
|
+
defaultMessage: string;
|
|
89
|
+
id: string;
|
|
90
|
+
description: string;
|
|
91
|
+
};
|
|
72
92
|
};
|
|
73
93
|
export default messages;
|
|
@@ -30,11 +30,6 @@ const messages = defineMessages({
|
|
|
30
30
|
id: 'program.progress.incomplete.text',
|
|
31
31
|
description: 'text to display when a user has not completed all of the courses for a program',
|
|
32
32
|
},
|
|
33
|
-
programProgressCardEnrollment: {
|
|
34
|
-
defaultMessage: 'Enrolled: {enrollmentInfo}',
|
|
35
|
-
id: 'program.progress.card.enrollment.text',
|
|
36
|
-
description: 'text to display on the progress card related to the enrollment date for the course',
|
|
37
|
-
},
|
|
38
33
|
programProgressCardCertificate: {
|
|
39
34
|
defaultMessage: '<bold>Certificate Status:</bold> {certificateStatus}',
|
|
40
35
|
id: 'program.progress.card.certificate.text',
|
|
@@ -45,11 +40,26 @@ const messages = defineMessages({
|
|
|
45
40
|
id: 'program.progress.card.resume.button.text',
|
|
46
41
|
description: 'text to display on the progress card for the resume course button',
|
|
47
42
|
},
|
|
43
|
+
programProgressCardViewCourseDetailButton: {
|
|
44
|
+
defaultMessage: 'View course details',
|
|
45
|
+
id: 'program.progress.card.view.course.detail.button.text',
|
|
46
|
+
description: 'text to display on the progress card for the view course details button',
|
|
47
|
+
},
|
|
48
48
|
programProgressCardUpgradeButton: {
|
|
49
49
|
defaultMessage: 'Upgrade with your subscription',
|
|
50
50
|
id: 'program.progress.card.upgrade.button.text',
|
|
51
51
|
description: 'text to display on the progress card for the upgrade button',
|
|
52
52
|
},
|
|
53
|
+
programProgressCardEnrollText: {
|
|
54
|
+
defaultMessage: 'Enrolled:',
|
|
55
|
+
id: 'program.progress.card.enroll.text',
|
|
56
|
+
description: 'text to display on the progress card for the enrolled status of the course',
|
|
57
|
+
},
|
|
58
|
+
programProgressCardStartText: {
|
|
59
|
+
defaultMessage: 'Started',
|
|
60
|
+
id: 'program.progress.card.start.text',
|
|
61
|
+
description: 'text to display on the progress card for the start date of the course',
|
|
62
|
+
},
|
|
53
63
|
programProgressInProgressTab: {
|
|
54
64
|
defaultMessage: 'In progress',
|
|
55
65
|
id: 'program.progress.in.progress.tab',
|
|
@@ -70,6 +80,16 @@ const messages = defineMessages({
|
|
|
70
80
|
id: 'program.progress.pathways.tab',
|
|
71
81
|
description: 'Label for the "Pathways" tab on the program progress page, which gives details of how the program can be used to further the learners education. This tab is only shown for MicroMasters programs.',
|
|
72
82
|
},
|
|
83
|
+
programProgressRemainingCourse: {
|
|
84
|
+
defaultMessage: 'Remaining Courses',
|
|
85
|
+
id: 'program.progress.remaining.course',
|
|
86
|
+
description: 'Header text to be displayed inside the Remaining tab of the program progress page.',
|
|
87
|
+
},
|
|
88
|
+
programProgressRemainingTabNoCourse: {
|
|
89
|
+
defaultMessage: "You have enrolled in all of this program's courses.",
|
|
90
|
+
id: 'program.progress.remaining.tab.no.course',
|
|
91
|
+
description: 'Text to display on the Remaining tab of the program progress page when there is no course remaining for the user',
|
|
92
|
+
},
|
|
73
93
|
});
|
|
74
94
|
export default messages;
|
|
75
95
|
//# sourceMappingURL=messages.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramProgress/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,2BAA2B,EAAE;QAC3B,cAAc,EAAE,cAAc;QAC9B,EAAE,EAAE,+BAA+B;QACnC,WAAW,EAAE,yCAAyC;KACvD;IACD,gBAAgB,EAAE;QAChB,cAAc,EAAE,uBAAuB;QACvC,EAAE,EAAE,qCAAqC;QACzC,WAAW,EAAE,qGAAqG;KACnH;IACD,6BAA6B,EAAE;QAC7B,cAAc,EAAE,kBAAkB;QAClC,EAAE,EAAE,kCAAkC;QACtC,WAAW,EAAE,yEAAyE;KACvF;IACD,2BAA2B,EAAE;QAC3B,cAAc,EAAE,0EAA0E;QAC1F,EAAE,EAAE,gCAAgC;QACpC,WAAW,EAAE,8EAA8E;KAC5F;IACD,+BAA+B,EAAE;QAC/B,cAAc,EAAE,sBAAsB;QACtC,EAAE,EAAE,oCAAoC;QACxC,WAAW,EAAE,sFAAsF;KACpG;IACD,6BAA6B,EAAE;QAC7B,cAAc,EAAE,0KAA0K;QAC1L,EAAE,EAAE,kCAAkC;QACtC,WAAW,EAAE,gFAAgF;KAC9F;IACD,
|
|
1
|
+
{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramProgress/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,2BAA2B,EAAE;QAC3B,cAAc,EAAE,cAAc;QAC9B,EAAE,EAAE,+BAA+B;QACnC,WAAW,EAAE,yCAAyC;KACvD;IACD,gBAAgB,EAAE;QAChB,cAAc,EAAE,uBAAuB;QACvC,EAAE,EAAE,qCAAqC;QACzC,WAAW,EAAE,qGAAqG;KACnH;IACD,6BAA6B,EAAE;QAC7B,cAAc,EAAE,kBAAkB;QAClC,EAAE,EAAE,kCAAkC;QACtC,WAAW,EAAE,yEAAyE;KACvF;IACD,2BAA2B,EAAE;QAC3B,cAAc,EAAE,0EAA0E;QAC1F,EAAE,EAAE,gCAAgC;QACpC,WAAW,EAAE,8EAA8E;KAC5F;IACD,+BAA+B,EAAE;QAC/B,cAAc,EAAE,sBAAsB;QACtC,EAAE,EAAE,oCAAoC;QACxC,WAAW,EAAE,sFAAsF;KACpG;IACD,6BAA6B,EAAE;QAC7B,cAAc,EAAE,0KAA0K;QAC1L,EAAE,EAAE,kCAAkC;QACtC,WAAW,EAAE,gFAAgF;KAC9F;IACD,8BAA8B,EAAE;QAC9B,cAAc,EAAE,sDAAsD;QACtE,EAAE,EAAE,wCAAwC;QAC5C,WAAW,EAAE,uFAAuF;KACrG;IACD,+BAA+B,EAAE;QAC/B,cAAc,EAAE,eAAe;QAC/B,EAAE,EAAE,0CAA0C;QAC9C,WAAW,EAAE,mEAAmE;KACjF;IACD,yCAAyC,EAAE;QACzC,cAAc,EAAE,qBAAqB;QACrC,EAAE,EAAE,sDAAsD;QAC1D,WAAW,EAAE,yEAAyE;KACvF;IACD,gCAAgC,EAAE;QAChC,cAAc,EAAE,gCAAgC;QAChD,EAAE,EAAE,2CAA2C;QAC/C,WAAW,EAAE,6DAA6D;KAC3E;IACD,6BAA6B,EAAE;QAC7B,cAAc,EAAE,WAAW;QAC3B,EAAE,EAAE,mCAAmC;QACvC,WAAW,EAAE,4EAA4E;KAC1F;IACD,4BAA4B,EAAE;QAC5B,cAAc,EAAE,SAAS;QACzB,EAAE,EAAE,kCAAkC;QACtC,WAAW,EAAE,uEAAuE;KACrF;IACD,4BAA4B,EAAE;QAC5B,cAAc,EAAE,aAAa;QAC7B,EAAE,EAAE,kCAAkC;QACtC,WAAW,EAAE,oIAAoI;KAClJ;IACD,2BAA2B,EAAE;QAC3B,cAAc,EAAE,WAAW;QAC3B,EAAE,EAAE,gCAAgC;QACpC,WAAW,EAAE,oHAAoH;KAClI;IACD,2BAA2B,EAAE;QAC3B,cAAc,EAAE,WAAW;QAC3B,EAAE,EAAE,gCAAgC;QACpC,WAAW,EAAE,8GAA8G;KAC5H;IACD,0BAA0B,EAAE;QAC1B,cAAc,EAAE,UAAU;QAC1B,EAAE,EAAE,+BAA+B;QACnC,WAAW,EAAE,oMAAoM;KAClN;IACD,8BAA8B,EAAE;QAC9B,cAAc,EAAE,mBAAmB;QACnC,EAAE,EAAE,mCAAmC;QACvC,WAAW,EAAE,oFAAoF;KAClG;IACD,mCAAmC,EAAE;QACnC,cAAc,EAAE,qDAAqD;QACrE,EAAE,EAAE,0CAA0C;QAC9C,WAAW,EAAE,kHAAkH;KAChI;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n programProgressInstitutions: {\n defaultMessage: 'Institutions',\n id: 'program.progress.institutions',\n description: 'Label text for organization image logos',\n },\n programTypeLabel: {\n defaultMessage: '{programType} program',\n id: 'program.progress.program.type.label',\n description: 'Label displaying the program type (e.g. \"MicroMasters program\", \"Professional Certificate program\")',\n },\n programProgressCompleteHeader: {\n defaultMessage: 'Congratulations!',\n id: 'program.progress.complete.header',\n description: 'header text for the program progress page when all courses are complete',\n },\n programProgressCompleteText: {\n defaultMessage: 'You have successfully completed all the requirements for {programTitle}.',\n id: 'program.progress.complete.text',\n description: 'text to display when a user has completed all of the courses for the program',\n },\n programProgressIncompleteHeader: {\n defaultMessage: 'Your Program Journey',\n id: 'program.progress.incomplete.header',\n description: 'header text to display when the user has remaining incomplete courses in the program',\n },\n programProgressIncompleteText: {\n defaultMessage: 'Track and plan your progress through the {totalCoursesInProgram} courses in this program. To complete the program, you must earn a verified certificate for each course.',\n id: 'program.progress.incomplete.text',\n description: 'text to display when a user has not completed all of the courses for a program',\n },\n programProgressCardCertificate: {\n defaultMessage: '<bold>Certificate Status:</bold> {certificateStatus}',\n id: 'program.progress.card.certificate.text',\n description: 'text to display on the progress card related to the certificate status for the course',\n },\n programProgressCardResumeButton: {\n defaultMessage: 'Resume course',\n id: 'program.progress.card.resume.button.text',\n description: 'text to display on the progress card for the resume course button',\n },\n programProgressCardViewCourseDetailButton: {\n defaultMessage: 'View course details',\n id: 'program.progress.card.view.course.detail.button.text',\n description: 'text to display on the progress card for the view course details button',\n },\n programProgressCardUpgradeButton: {\n defaultMessage: 'Upgrade with your subscription',\n id: 'program.progress.card.upgrade.button.text',\n description: 'text to display on the progress card for the upgrade button',\n },\n programProgressCardEnrollText: {\n defaultMessage: 'Enrolled:',\n id: 'program.progress.card.enroll.text',\n description: 'text to display on the progress card for the enrolled status of the course',\n },\n programProgressCardStartText: {\n defaultMessage: 'Started',\n id: 'program.progress.card.start.text',\n description: 'text to display on the progress card for the start date of the course',\n },\n programProgressInProgressTab: {\n defaultMessage: 'In progress',\n id: 'program.progress.in.progress.tab',\n description: 'Label for the \"In progress\" tab on the program progress page, which lists courses that the user has started but not yet completed.',\n },\n programProgressRemainingTab: {\n defaultMessage: 'Remaining',\n id: 'program.progress.remaining.tab',\n description: 'Label for the \"Remaining\" tab on the program progress page, which lists courses that the user has not yet started.',\n },\n programProgressCompletedTab: {\n defaultMessage: 'Completed',\n id: 'program.progress.completed.tab',\n description: 'Label for the \"Completed\" tab on the program progress page, which lists courses that the user has completed.',\n },\n programProgressPathwaysTab: {\n defaultMessage: 'Pathways',\n id: 'program.progress.pathways.tab',\n description: 'Label for the \"Pathways\" tab on the program progress page, which gives details of how the program can be used to further the learners education. This tab is only shown for MicroMasters programs.',\n },\n programProgressRemainingCourse: {\n defaultMessage: 'Remaining Courses',\n id: 'program.progress.remaining.course',\n description: 'Header text to be displayed inside the Remaining tab of the program progress page.',\n },\n programProgressRemainingTabNoCourse: {\n defaultMessage: \"You have enrolled in all of this program's courses.\",\n id: 'program.progress.remaining.tab.no.course',\n description: 'Text to display on the Remaining tab of the program progress page when there is no course remaining for the user',\n },\n});\n\nexport default messages;\n"]}
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -4,4 +4,5 @@ import useCourseData from './useCourseData';
|
|
|
4
4
|
import useCourseTrackingEvent from './useCourseTrackingEvent';
|
|
5
5
|
import useEntitlementInfo from './useEntitlementInfo';
|
|
6
6
|
import useIsMasquerading from './useIsMasquerading';
|
|
7
|
-
|
|
7
|
+
import { useProgressData } from './useProgressData';
|
|
8
|
+
export { useCourseData, useCourseTrackingEvent, useEntitlementInfo, useIsMasquerading, useProgressData };
|
package/dist/hooks/index.js
CHANGED
|
@@ -3,9 +3,11 @@ import useCourseData from './useCourseData';
|
|
|
3
3
|
import useCourseTrackingEvent from './useCourseTrackingEvent';
|
|
4
4
|
import useEntitlementInfo from './useEntitlementInfo';
|
|
5
5
|
import useIsMasquerading from './useIsMasquerading';
|
|
6
|
+
import { useProgressData } from './useProgressData';
|
|
6
7
|
export const utilHooks = utils;
|
|
7
8
|
export { useCourseData };
|
|
8
9
|
export { useCourseTrackingEvent };
|
|
9
10
|
export { useEntitlementInfo };
|
|
10
11
|
export { useIsMasquerading };
|
|
12
|
+
export { useProgressData };
|
|
11
13
|
//# sourceMappingURL=index.js.map
|
package/dist/hooks/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAEpD,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,OAAO,EAAE,sBAAsB,EAAE,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAAE,CAAC","sourcesContent":["import * as utils from './utils';\nimport useCourseData from './useCourseData';\nimport useCourseTrackingEvent from './useCourseTrackingEvent';\nimport useEntitlementInfo from './useEntitlementInfo';\nimport useIsMasquerading from './useIsMasquerading';\n\nexport const utilHooks = utils;\nexport { useCourseData };\nexport { useCourseTrackingEvent };\nexport { useEntitlementInfo };\nexport { useIsMasquerading };\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,sBAAsB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,CAAC;AACzB,OAAO,EAAE,sBAAsB,EAAE,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAC7B,OAAO,EAAE,eAAe,EAAE,CAAC","sourcesContent":["import * as utils from './utils';\nimport useCourseData from './useCourseData';\nimport useCourseTrackingEvent from './useCourseTrackingEvent';\nimport useEntitlementInfo from './useEntitlementInfo';\nimport useIsMasquerading from './useIsMasquerading';\nimport { useProgressData } from './useProgressData';\n\nexport const utilHooks = utils;\nexport { useCourseData };\nexport { useCourseTrackingEvent };\nexport { useEntitlementInfo };\nexport { useIsMasquerading };\nexport { useProgressData };\n"]}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Custom hook to fetch and manage program progress data for the Program Progress Page.
|
|
3
|
+
* This hook retrieves the program UUID from the route parameters, fetches the corresponding progress data using a data hook, and returns the data along with loading and error states.
|
|
4
|
+
* The returned `programProgressData` is transformed to camelCase for easier consumption in the components.
|
|
5
|
+
* @returns An object containing `programProgressData`, `isLoading`, and `error` states.
|
|
6
|
+
*/
|
|
7
|
+
export declare const useProgressData: () => {
|
|
8
|
+
programProgressData: null;
|
|
9
|
+
isLoading: boolean;
|
|
10
|
+
error: string;
|
|
11
|
+
} | {
|
|
12
|
+
programProgressData: any;
|
|
13
|
+
isLoading: boolean;
|
|
14
|
+
error: Error | null;
|
|
15
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { useParams } from 'react-router-dom';
|
|
2
|
+
import { camelCaseObject } from '@openedx/frontend-base';
|
|
3
|
+
import { useProgramProgressData } from '../data/hooks';
|
|
4
|
+
/**
|
|
5
|
+
* Custom hook to fetch and manage program progress data for the Program Progress Page.
|
|
6
|
+
* This hook retrieves the program UUID from the route parameters, fetches the corresponding progress data using a data hook, and returns the data along with loading and error states.
|
|
7
|
+
* The returned `programProgressData` is transformed to camelCase for easier consumption in the components.
|
|
8
|
+
* @returns An object containing `programProgressData`, `isLoading`, and `error` states.
|
|
9
|
+
*/
|
|
10
|
+
export const useProgressData = () => {
|
|
11
|
+
// Fetch UUID from route params
|
|
12
|
+
const { uuid } = useParams();
|
|
13
|
+
const { data, isLoading, error } = useProgramProgressData(uuid);
|
|
14
|
+
const programProgressData = camelCaseObject(data);
|
|
15
|
+
if (!uuid) {
|
|
16
|
+
return { programProgressData: null, isLoading: false, error: 'Invalid URL' };
|
|
17
|
+
}
|
|
18
|
+
return { programProgressData, isLoading, error };
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=useProgressData.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useProgressData.js","sourceRoot":"","sources":["../../src/hooks/useProgressData.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAEzD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,+BAA+B;IAC/B,MAAM,EAAE,IAAI,EAAE,GAAG,SAAS,EAAsB,CAAC;IAEjD,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAC;IAChE,MAAM,mBAAmB,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IAElD,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,EAAE,mBAAmB,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;IAC/E,CAAC;IAED,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;AACnD,CAAC,CAAC","sourcesContent":["import { useParams } from 'react-router-dom';\nimport { camelCaseObject } from '@openedx/frontend-base';\nimport { useProgramProgressData } from '@src/data/hooks';\n\n/**\n * Custom hook to fetch and manage program progress data for the Program Progress Page.\n * This hook retrieves the program UUID from the route parameters, fetches the corresponding progress data using a data hook, and returns the data along with loading and error states.\n * The returned `programProgressData` is transformed to camelCase for easier consumption in the components.\n * @returns An object containing `programProgressData`, `isLoading`, and `error` states.\n */\nexport const useProgressData = () => {\n // Fetch UUID from route params\n const { uuid } = useParams() as { uuid: string };\n\n const { data, isLoading, error } = useProgramProgressData(uuid);\n const programProgressData = camelCaseObject(data);\n\n if (!uuid) {\n return { programProgressData: null, isLoading: false, error: 'Invalid URL' };\n }\n\n return { programProgressData, isLoading, error };\n};\n"]}
|