@edx/frontend-app-subscription-learner-dashboard 1.4.0 → 1.6.0

package/dist/Main.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CurrentAppProvider, PageWrap } from '@openedx/frontend-base';
 import { appId } from './constants';
 import ContextProviders from './data/context';
 import Dashboard from './containers/Dashboard';
+import { SubscriptionInformation } from './containers/SubscriptionInformation';
 import './style.scss';
-const Main = () => (_jsx(CurrentAppProvider, { appId: appId, children: _jsx(ContextProviders, { children: _jsx(PageWrap, { children: _jsx(Dashboard, {}) }) }) }));
+const Main = () => (_jsx(CurrentAppProvider, { appId: appId, children: _jsx(ContextProviders, { children: _jsxs(PageWrap, { children: [_jsx(Dashboard, {}), _jsx(SubscriptionInformation, {})] }) }) }));
 export default Main;
 //# sourceMappingURL=Main.js.map

package/dist/Main.js.map

@@ -1 +1 @@
-{"version":3,"file":"Main.js","sourceRoot":"","sources":["../src/Main.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,gBAAgB,MAAM,gBAAgB,CAAC;AAC9C,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,OAAO,cAAc,CAAC;AAEtB,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,CACjB,KAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,YAC9B,KAAC,gBAAgB,cACf,KAAC,QAAQ,cACP,KAAC,SAAS,KAAG,GACJ,GACM,GACA,CACtB,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { CurrentAppProvider, PageWrap } from '@openedx/frontend-base';\n\nimport { appId } from './constants';\nimport ContextProviders from './data/context';\nimport Dashboard from './containers/Dashboard';\n\nimport './style.scss';\n\nconst Main = () => (\n  <CurrentAppProvider appId={appId}>\n    <ContextProviders>\n      <PageWrap>\n        <Dashboard />\n      </PageWrap>\n    </ContextProviders>\n  </CurrentAppProvider>\n);\n\nexport default Main;\n"]}
+{"version":3,"file":"Main.js","sourceRoot":"","sources":["../src/Main.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,gBAAgB,MAAM,gBAAgB,CAAC;AAC9C,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,OAAO,cAAc,CAAC;AAEtB,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,CACjB,KAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,YAC9B,KAAC,gBAAgB,cACf,MAAC,QAAQ,eACP,KAAC,SAAS,KAAG,EACb,KAAC,uBAAuB,KAAG,IAClB,GACM,GACA,CACtB,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { CurrentAppProvider, PageWrap } from '@openedx/frontend-base';\n\nimport { appId } from './constants';\nimport ContextProviders from './data/context';\nimport Dashboard from './containers/Dashboard';\nimport { SubscriptionInformation } from './containers/SubscriptionInformation';\n\nimport './style.scss';\n\nconst Main = () => (\n  <CurrentAppProvider appId={appId}>\n    <ContextProviders>\n      <PageWrap>\n        <Dashboard />\n        <SubscriptionInformation />\n      </PageWrap>\n    </ContextProviders>\n  </CurrentAppProvider>\n);\n\nexport default Main;\n"]}

package/dist/containers/Dashboard/DashboardTabs.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState, useCallback } from 'react';
 import { Tabs, Tab } from '@openedx/paragon';
-import CoursesPanel from '../../containers/CoursesPanel';
+import CoursesPanel from '../CoursesPanel';
+import ProgramsPanel from '../ProgramsPanel';
 const DashboardTabs = () => {
     var _a;
     // Defining the tabs here
@@ -14,7 +15,7 @@ const DashboardTabs = () => {
         {
             key: 'programs',
             title: 'Programs',
-            panel: _jsx("span", { children: "Programs tab will be available soon." }),
+            panel: _jsx(ProgramsPanel, {}),
         },
         {
             key: 'history',

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

@@ -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,+BAA+B,CAAC;AAEzD,MAAM,aAAa,GAAG,GAAG,EAAE;;IACzB,yBAAyB;IACzB,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACnC;YACE,GAAG,EAAE,SAAS;YACd,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,KAAC,YAAY,KAAG;SACxB;QACD;YACE,GAAG,EAAE,UAAU;YACf,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,kEAAiD;SACzD;QACD;YACE,GAAG,EAAE,SAAS;YACd,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,iEAAgD;SACxD;KACF,CAAC,EAAE,EAAE,CAAC,CAAC;IAER,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 '../../containers/CoursesPanel';\n\nconst DashboardTabs = () => {\n  // Defining the tabs here\n  const dashboardTabs = useMemo(() => ([\n    {\n      key: 'courses',\n      title: 'Courses',\n      panel: <CoursesPanel />,\n    },\n    {\n      key: 'programs',\n      title: 'Programs',\n      panel: <span>Programs tab will be available soon.</span>,\n    },\n    {\n      key: 'history',\n      title: 'History',\n      panel: <span>History tab will be available soon.</span>,\n    },\n  ]), []);\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"]}
+{"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;AAE7C,MAAM,aAAa,GAAG,GAAG,EAAE;;IACzB,yBAAyB;IACzB,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACnC;YACE,GAAG,EAAE,SAAS;YACd,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,KAAC,YAAY,KAAG;SACxB;QACD;YACE,GAAG,EAAE,UAAU;YACf,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,KAAC,aAAa,KAAG;SACzB;QACD;YACE,GAAG,EAAE,SAAS;YACd,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,iEAAgD;SACxD;KACF,CAAC,EAAE,EAAE,CAAC,CAAC;IAER,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';\n\nconst DashboardTabs = () => {\n  // Defining the tabs here\n  const dashboardTabs = useMemo(() => ([\n    {\n      key: 'courses',\n      title: 'Courses',\n      panel: <CoursesPanel />,\n    },\n    {\n      key: 'programs',\n      title: 'Programs',\n      panel: <ProgramsPanel />,\n    },\n    {\n      key: 'history',\n      title: 'History',\n      panel: <span>History tab will be available soon.</span>,\n    },\n  ]), []);\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"]}

package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgress.js

@@ -1,20 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Helmet } from 'react-helmet';
-import { useParams } from 'react-router-dom';
 import { Col, Container, Row } from '@openedx/paragon';
-import { camelCaseObject } from '@openedx/frontend-base';
 import './index.scss';
-import { useProgramProgressData } from '../../../data/hooks';
+import { useProgressData } from '../../../hooks';
 import ProgramProgressHeader from './ProgramProgressHeader';
 import ProgramProgressInfo from './ProgramProgressInfo';
 import { ProgramProgressTabs } from './ProgramProgressTabs';
 const ProgramProgress = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    // Fetch UUID from route params
-    const { uuid } = useParams();
-    const { data, isLoading, error } = useProgramProgressData(uuid);
-    const programProgressData = camelCaseObject(data);
-    if (!uuid) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const { programProgressData, isLoading, error } = useProgressData();
+    if (programProgressData === null) {
         return _jsx("div", { children: "Invalid URL" });
     }
     if (isLoading) {
@@ -32,7 +27,10 @@ const ProgramProgress = () => {
         && !((_e = courseData.inProgress) === null || _e === void 0 ? void 0 : _e.length)
         && ((_f = courseData.completed) === null || _f === void 0 ? void 0 : _f.length);
     const programType = (_g = programData === null || programData === void 0 ? void 0 : programData.type) !== null && _g !== void 0 ? _g : '';
-    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: (_h = programData === null || programData === void 0 ? void 0 : programData.title) !== null && _h !== void 0 ? _h : '', programType: (_j = programData === null || programData === void 0 ? void 0 : programData.type) !== null && _j !== void 0 ? _j : '', authoringOrganizations: programData === null || programData === void 0 ? void 0 : programData.authoringOrganizations }), _jsx(Row, { children: _jsx(Col, { sm: 12, md: 8, children: _jsx(ProgramProgressInfo, { allCoursesCompleted: allCoursesCompleted, totalCoursesInProgram: totalCoursesInProgram, programTitle: (_k = programData === null || programData === void 0 ? void 0 : programData.title) !== null && _k !== void 0 ? _k : '' }) }) }), _jsx(ProgramProgressTabs, { counts: { inProgress: 1, remaining: 2, completed: 0 }, type: programType })] })] }));
+    const inProgressCourseCount = ((_h = courseData === null || courseData === void 0 ? void 0 : courseData.inProgress) === null || _h === void 0 ? void 0 : _h.length) || 0;
+    const remainingCourseCount = ((_j = courseData === null || courseData === void 0 ? void 0 : courseData.notStarted) === null || _j === void 0 ? void 0 : _j.length) || 0;
+    const completedCourseCount = ((_k = courseData === null || courseData === void 0 ? void 0 : courseData.completed) === null || _k === void 0 ? void 0 : _k.length) || 0;
+    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 })] }) })] })] }));
 };
 export default ProgramProgress;
 //# sourceMappingURL=ProgramProgress.js.map

package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgramProgress.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgress.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC } from 'react';\nimport { Helmet } from 'react-helmet';\nimport { useParams } from 'react-router-dom';\nimport { Col, Container, Row } from '@openedx/paragon';\nimport { camelCaseObject } from '@openedx/frontend-base';\n\nimport './index.scss';\nimport { useProgramProgressData } from '@src/data/hooks';\nimport ProgramProgressHeader from './ProgramProgressHeader';\nimport ProgramProgressInfo from './ProgramProgressInfo';\nimport { ProgramProgressTabs } from './ProgramProgressTabs';\n\nconst ProgramProgress: FC = () => {\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 <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\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          </Col>\n        </Row>\n\n        {/* TODO [TEMP]: Replace the below course count with actual count. For now, returning hardcoded data.\n          Action: Revisit when data is being made dynamic.\n        */}\n        <ProgramProgressTabs counts={{ inProgress: 1, remaining: 2, completed: 0 }} type={programType} />\n      </Container>\n    </>\n  );\n};\n\nexport default ProgramProgress;\n"]}
+{"version":3,"file":"ProgramProgress.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgress.tsx"],"names":[],"mappings":"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","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"]}

package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgressTabs/index.js

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { Tabs, Tab } from '@openedx/paragon';
 import { useIntl } from '@openedx/frontend-base';
 import messages from '../messages';
+import { RemainingTabData } from '../RemainingTabData';
 export const ProgramProgressTabs = ({ type, counts }) => {
     const { inProgress, remaining, completed } = counts;
     const { formatMessage } = useIntl();
@@ -17,7 +18,7 @@ export const ProgramProgressTabs = ({ type, counts }) => {
             key: 'remaining',
             title: formatMessage(messages.programProgressRemainingTab),
             count: remaining,
-            panel: _jsx("span", { children: "Remaining tab data will be available soon." }),
+            panel: _jsx(RemainingTabData, {}),
         },
         {
             key: 'completed',

package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgressTabs/index.js.map

@@ -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;AAEnC,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,wEAAuD;SAC/D;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';\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: <span>Remaining tab data will be available soon.</span>,\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"]}
+{"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"]}

package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCard/index.js

@@ -3,12 +3,39 @@ import { Card, Button, Row, Col } from '@openedx/paragon';
 import { useIntl } from '@openedx/frontend-base';
 import messages from '../messages';
 import './index.scss';
-export const ProgressCard = ({ progressCardData, isLoading }) => {
+import { ProgressCardActions } from '../ProgressCardActions';
+export const ProgressCard = ({ progressCardData, isLoading, tabType }) => {
     const { formatMessage } = useIntl();
-    const { title, enrollmentInfo, certificateStatus } = progressCardData;
-    return (_jsxs(Card, { className: "progress-card", "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: formatMessage(messages.programProgressCardEnrollment, { enrollmentInfo }) })] }), _jsx(Col, { xs: 12, className: "d-flex justify-content-md-end align-items-start", children: _jsx(Button, { variant: "primary", children: formatMessage(messages.programProgressCardResumeButton) }) })] }) }), _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, {
+    const { title, certificateStatus, courseRuns } = progressCardData;
+    const [{ pacingType = '', start = '' } = {}] = Array.isArray(courseRuns) ? courseRuns : [];
+    /*
+      - Formatting pacing type safely
+      - replace underscores with spaces
+      - capitalize first letter of each word
+      - example: 'self_paced' -> 'Self Paced'
+    */
+    const formattedPacing = pacingType
+        ? pacingType.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
+        : '';
+    // base string
+    let enrollmentInfo = tabType !== 'remaining' ? formatMessage(messages.programProgressCardEnrollText) : '';
+    if (formattedPacing) {
+        enrollmentInfo += `${enrollmentInfo ? ' ' : ''}(${formattedPacing})`;
+    }
+    // add start date if exists
+    if (start) {
+        const startDate = new Date(start).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric'
+        });
+        enrollmentInfo = enrollmentInfo
+            ? `${enrollmentInfo} ${formatMessage(messages.programProgressCardStartText)} ${startDate}`
+            : `${formatMessage(messages.programProgressCardStartText)} ${startDate}`;
+    }
+    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, {
                                     certificateStatus,
                                     bold: (chunks) => (_jsx("span", { className: "font-weight-bold", children: chunks })),
-                                }) }) }), _jsx(Col, { xs: 12, md: 3, className: "d-flex justify-content-md-end", children: _jsx(Button, { variant: "outline-brand", children: formatMessage(messages.programProgressCardUpgradeButton) }) })] }) })] }));
+                                }) }) }), _jsx(Col, { xs: 12, md: 3, className: "d-flex justify-content-md-end", children: _jsx(Button, { variant: "outline-brand", children: formatMessage(messages.programProgressCardUpgradeButton) }) })] }) }))] }));
 };
 //# sourceMappingURL=index.js.map

package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCard/index.js.map

@@ -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;AAEtB,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,EAAE;IACrF,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC;IAEtE,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAC,eAAe,iBAAa,eAAe,EAAC,SAAS,EAAE,SAAS,aAC9E,KAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAC,gBAAgB,YACtC,MAAC,GAAG,eACF,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,aACT,aAAI,SAAS,EAAC,uBAAuB,YAAE,KAAK,GAAM,EAClD,cAAK,SAAS,EAAC,YAAY,YACxB,aAAa,CAAC,QAAQ,CAAC,6BAA6B,EAAE,EAAE,cAAc,EAAE,CAAC,GACtE,IACF,EACN,KAAC,GAAG,IACF,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,iDAAiD,YAE3D,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,YACtB,aAAa,CAAC,QAAQ,CAAC,+BAA+B,CAAC,GACjD,GACL,IACF,GACO,EAEf,KAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAC,gBAAgB,YACtC,MAAC,GAAG,eACF,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,YAChB,yBACG,aAAa,CAAC,QAAQ,CAAC,8BAA8B,EAAE;oCACtD,iBAAiB;oCACjB,IAAI,EAAE,CAAC,MAAuB,EAAE,EAAE,CAAC,CACjC,eAAM,SAAS,EAAC,kBAAkB,YAAE,MAAM,GAAQ,CACnD;iCACF,CAAC,GACG,GACH,EAEN,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,SAAS,EAAC,+BAA+B,YAC3D,KAAC,MAAM,IAAC,OAAO,EAAC,eAAe,YAC5B,aAAa,CAAC,QAAQ,CAAC,gCAAgC,CAAC,GAClD,GACL,IACF,GACO,IACV,CACR,CAAC;AACJ,CAAC,CAAC","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';\n\nexport const ProgressCard: FC<ProgressCardProps> = ({ progressCardData, isLoading }) => {\n  const { formatMessage } = useIntl();\n  const { title, enrollmentInfo, certificateStatus } = progressCardData;\n\n  return (\n    <Card className=\"progress-card\" 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              {formatMessage(messages.programProgressCardEnrollment, { enrollmentInfo })}\n            </div>\n          </Col>\n          <Col\n            xs={12}\n            className=\"d-flex justify-content-md-end align-items-start\"\n          >\n            <Button variant=\"primary\">\n              {formatMessage(messages.programProgressCardResumeButton)}\n            </Button>\n          </Col>\n        </Row>\n      </Card.Section>\n\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    </Card>\n  );\n};\n"]}
+{"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"]}

package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/ViewCourseDetailButton.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const ViewCourseDetailButton: FC;

package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/ViewCourseDetailButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import messages from '../messages';
+export const ViewCourseDetailButton = () => {
+    const { formatMessage } = useIntl();
+    return (_jsx(Button, { variant: "outline-primary", children: formatMessage(messages.programProgressCardViewCourseDetailButton) }));
+};
+//# sourceMappingURL=ViewCourseDetailButton.js.map

package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/ViewCourseDetailButton.js.map

@@ -0,0 +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"]}

package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/index.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const ProgressCardActions: FC;

package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Col } from '@openedx/paragon';
+import { useProgressData } from '../../../../hooks';
+import { ViewCourseDetailButton } from './ViewCourseDetailButton';
+export const ProgressCardActions = () => {
+    var _a;
+    const { programProgressData } = useProgressData();
+    const courseData = (programProgressData === null || programProgressData === void 0 ? void 0 : programProgressData.courseData) || {};
+    const remainingCourseCount = ((_a = courseData === null || courseData === void 0 ? void 0 : courseData.notStarted) === null || _a === void 0 ? void 0 : _a.length) || 0;
+    return (_jsx(Col, { xs: 12, className: "d-flex justify-content-md-end align-items-start mb-2", children: remainingCourseCount > 0 && _jsx(ViewCourseDetailButton, {}) }));
+};
+//# sourceMappingURL=index.js.map

package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/index.js.map

@@ -0,0 +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"]}

package/dist/containers/ProgramDashboard/ProgramProgress/RemainingTabData/index.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const RemainingTabData: FC;

package/dist/containers/ProgramDashboard/ProgramProgress/RemainingTabData/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProgressData } from '../../../../hooks';
+import { useIntl } from '@openedx/frontend-base';
+import { ProgressCard } from '../ProgressCard';
+import messages from '../messages';
+export const RemainingTabData = () => {
+    const { programProgressData, isLoading } = useProgressData();
+    const { formatMessage } = useIntl();
+    const courseData = programProgressData === null || programProgressData === void 0 ? void 0 : programProgressData.courseData;
+    const remainingData = (courseData === null || courseData === void 0 ? void 0 : courseData.notStarted) || [];
+    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) }))] }));
+};
+//# sourceMappingURL=index.js.map

package/dist/containers/ProgramDashboard/ProgramProgress/RemainingTabData/index.js.map

@@ -0,0 +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"]}

package/dist/containers/ProgramDashboard/ProgramProgress/messages.d.ts

@@ -29,17 +29,17 @@ declare const messages: {
         id: string;
         description: string;
     };
-    programProgressCardEnrollment: {
+    programProgressCardCertificate: {
         defaultMessage: string;
         id: string;
         description: string;
     };
-    programProgressCardCertificate: {
+    programProgressCardResumeButton: {
         defaultMessage: string;
         id: string;
         description: string;
     };
-    programProgressCardResumeButton: {
+    programProgressCardViewCourseDetailButton: {
         defaultMessage: string;
         id: string;
         description: string;
@@ -49,6 +49,16 @@ declare const messages: {
         id: string;
         description: string;
     };
+    programProgressCardEnrollText: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
+    programProgressCardStartText: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
     programProgressInProgressTab: {
         defaultMessage: string;
         id: string;
@@ -69,5 +79,15 @@ declare const messages: {
         id: string;
         description: string;
     };
+    programProgressRemainingCourse: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
+    programProgressRemainingTabNoCourse: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
 };
 export default messages;

package/dist/containers/ProgramDashboard/ProgramProgress/messages.js

@@ -30,11 +30,6 @@ const messages = defineMessages({
         id: 'program.progress.incomplete.text',
         description: 'text to display when a user has not completed all of the courses for a program',
     },
-    programProgressCardEnrollment: {
-        defaultMessage: 'Enrolled: {enrollmentInfo}',
-        id: 'program.progress.card.enrollment.text',
-        description: 'text to display on the progress card related to the enrollment date for the course',
-    },
     programProgressCardCertificate: {
         defaultMessage: '<bold>Certificate Status:</bold> {certificateStatus}',
         id: 'program.progress.card.certificate.text',
@@ -45,11 +40,26 @@ const messages = defineMessages({
         id: 'program.progress.card.resume.button.text',
         description: 'text to display on the progress card for the resume course button',
     },
+    programProgressCardViewCourseDetailButton: {
+        defaultMessage: 'View course details',
+        id: 'program.progress.card.view.course.detail.button.text',
+        description: 'text to display on the progress card for the view course details button',
+    },
     programProgressCardUpgradeButton: {
         defaultMessage: 'Upgrade with your subscription',
         id: 'program.progress.card.upgrade.button.text',
         description: 'text to display on the progress card for the upgrade button',
     },
+    programProgressCardEnrollText: {
+        defaultMessage: 'Enrolled:',
+        id: 'program.progress.card.enroll.text',
+        description: 'text to display on the progress card for the enrolled status of the course',
+    },
+    programProgressCardStartText: {
+        defaultMessage: 'Started',
+        id: 'program.progress.card.start.text',
+        description: 'text to display on the progress card for the start date of the course',
+    },
     programProgressInProgressTab: {
         defaultMessage: 'In progress',
         id: 'program.progress.in.progress.tab',
@@ -70,6 +80,16 @@ const messages = defineMessages({
         id: 'program.progress.pathways.tab',
         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.',
     },
+    programProgressRemainingCourse: {
+        defaultMessage: 'Remaining Courses',
+        id: 'program.progress.remaining.course',
+        description: 'Header text to be displayed inside the Remaining tab of the program progress page.',
+    },
+    programProgressRemainingTabNoCourse: {
+        defaultMessage: "You have enrolled in all of this program's courses.",
+        id: 'program.progress.remaining.tab.no.course',
+        description: 'Text to display on the Remaining tab of the program progress page when there is no course remaining for the user',
+    },
 });
 export default messages;
 //# sourceMappingURL=messages.js.map

package/dist/containers/ProgramDashboard/ProgramProgress/messages.js.map

@@ -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,6BAA6B,EAAE;QAC7B,cAAc,EAAE,4BAA4B;QAC5C,EAAE,EAAE,uCAAuC;QAC3C,WAAW,EAAE,oFAAoF;KAClG;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,gCAAgC,EAAE;QAChC,cAAc,EAAE,gCAAgC;QAChD,EAAE,EAAE,2CAA2C;QAC/C,WAAW,EAAE,6DAA6D;KAC3E;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;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  programProgressCardEnrollment: {\n    defaultMessage: 'Enrolled: {enrollmentInfo}',\n    id: 'program.progress.card.enrollment.text',\n    description: 'text to display on the progress card related to the enrollment date for the course',\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  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  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});\n\nexport default messages;\n"]}
+{"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/containers/ProgramsPanel/NoProgramsView/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+export declare const NoProgramsView: FC;
+export default NoProgramsView;

package/dist/containers/ProgramsPanel/NoProgramsView/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIntl } from '@openedx/frontend-base';
+import messages from './messages';
+import { Button } from '@openedx/paragon';
+import { Search } from '@openedx/paragon/icons';
+import { baseAppUrl } from '../../../data/services/lms/urls';
+import { exploreProgramsUrl } from '../../../data/constants/app';
+export const NoProgramsView = () => {
+    const { formatMessage } = useIntl();
+    return (_jsxs("div", { className: "no-programs-content-view", children: [_jsx("p", { children: formatMessage(messages.inProgressProgramsPrompt) }), _jsx(Button, { variant: "brand", as: "a", href: baseAppUrl(exploreProgramsUrl), iconBefore: Search, children: formatMessage(messages.findProgramsButton) })] }));
+};
+export default NoProgramsView;
+//# sourceMappingURL=index.js.map

package/dist/containers/ProgramsPanel/NoProgramsView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/containers/ProgramsPanel/NoProgramsView/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,CAAC,MAAM,cAAc,GAAO,GAAG,EAAE;IACrC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,OAAO,CACL,eAAK,SAAS,EAAC,0BAA0B,aACvC,sBAAI,aAAa,CAAC,QAAQ,CAAC,wBAAwB,CAAC,GAAK,EACzD,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,EAAE,EAAC,GAAG,EACN,IAAI,EAAE,UAAU,CAAC,kBAAkB,CAAC,EACpC,UAAU,EAAE,MAAM,YAEjB,aAAa,CAAC,QAAQ,CAAC,kBAAkB,CAAC,GACpC,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useIntl } from '@openedx/frontend-base';\nimport messages from './messages';\nimport { Button } from '@openedx/paragon';\nimport { Search } from '@openedx/paragon/icons';\nimport { baseAppUrl } from '@src/data/services/lms/urls';\nimport { exploreProgramsUrl } from '@src/data/constants/app';\n\nexport const NoProgramsView: FC = () => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <div className=\"no-programs-content-view\">\n      <p>{formatMessage(messages.inProgressProgramsPrompt)}</p>\n      <Button\n        variant=\"brand\"\n        as=\"a\"\n        href={baseAppUrl(exploreProgramsUrl)}\n        iconBefore={Search}\n      >\n        {formatMessage(messages.findProgramsButton)}\n      </Button>\n    </div>\n  );\n};\n\nexport default NoProgramsView;\n"]}

package/dist/containers/ProgramsPanel/NoProgramsView/messages.d.ts

@@ -0,0 +1,13 @@
+declare const messages: {
+    inProgressProgramsPrompt: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    findProgramsButton: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/containers/ProgramsPanel/NoProgramsView/messages.js

@@ -0,0 +1,15 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    inProgressProgramsPrompt: {
+        id: 'Dashboard.NoProgramsView.inProgressProgramsPrompt',
+        defaultMessage: 'In-progress professional certificate programs will be found here.',
+        description: 'Placeholder text for in-progress programs section',
+    },
+    findProgramsButton: {
+        id: 'Dashboard.NoProgramsView.findProgramsButton',
+        defaultMessage: 'Find a program',
+        description: 'Button to find more programs',
+    }
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/containers/ProgramsPanel/NoProgramsView/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../src/containers/ProgramsPanel/NoProgramsView/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,wBAAwB,EAAE;QACxB,EAAE,EAAE,mDAAmD;QACvD,cAAc,EAAE,mEAAmE;QACnF,WAAW,EAAE,mDAAmD;KACjE;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,6CAA6C;QACjD,cAAc,EAAE,gBAAgB;QAChC,WAAW,EAAE,8BAA8B;KAC5C;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  inProgressProgramsPrompt: {\n    id: 'Dashboard.NoProgramsView.inProgressProgramsPrompt',\n    defaultMessage: 'In-progress professional certificate programs will be found here.',\n    description: 'Placeholder text for in-progress programs section',\n  },\n  findProgramsButton: {\n    id: 'Dashboard.NoProgramsView.findProgramsButton',\n    defaultMessage: 'Find a program',\n    description: 'Button to find more programs',\n  }\n});\n\nexport default messages;\n"]}

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+export declare const ProgramsPanel: FC;
+export default ProgramsPanel;

package/dist/containers/ProgramsPanel/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useIntl } from '@openedx/frontend-base';
+import messages from './messages';
+import NoProgramsView from './NoProgramsView';
+export const ProgramsPanel = () => {
+    const { formatMessage } = useIntl();
+    const [hasProgramsEnrollment] = useState(false);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "programs-list-container mb-5", "data-testid": "programs-list", children: [_jsx("div", { className: "d-flex flex-row justify-content-between text-center", children: _jsx("h3", { className: "programs-list-title mb-3", children: formatMessage(messages.myPrograms) }) }), !hasProgramsEnrollment && _jsx(NoProgramsView, {})] }) }));
+};
+export default ProgramsPanel;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/ProgramsPanel/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,MAAM,CAAC,MAAM,aAAa,GAAO,GAAG,EAAE;IACpC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,CAAC,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,OAAO,CACL,4BACE,eAAK,SAAS,EAAC,8BAA8B,iBAAa,eAAe,aACvE,cAAK,SAAS,EAAC,qDAAqD,YAClE,aAAI,SAAS,EAAC,0BAA0B,YAAE,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAM,GAC9E,EACL,CAAC,qBAAqB,IAAI,KAAC,cAAc,KAAG,IACzC,GACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FC, useState } from 'react';\nimport { useIntl } from '@openedx/frontend-base';\nimport messages from './messages';\nimport NoProgramsView from './NoProgramsView';\n\nexport const ProgramsPanel: FC = () => {\n  const { formatMessage } = useIntl();\n  const [hasProgramsEnrollment] = useState(false);\n\n  return (\n    <>\n      <div className=\"programs-list-container mb-5\" data-testid=\"programs-list\">\n        <div className=\"d-flex flex-row justify-content-between text-center\">\n          <h3 className=\"programs-list-title mb-3\">{formatMessage(messages.myPrograms)}</h3>\n        </div>\n        {!hasProgramsEnrollment && <NoProgramsView />}\n      </div>\n    </>\n  );\n};\n\nexport default ProgramsPanel;\n"]}

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

@@ -0,0 +1,23 @@
+declare const messages: {
+    myPrograms: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    emptyProgramsMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    explorePrograms: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    exploreProgramsCTAMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/containers/ProgramsPanel/messages.js

@@ -0,0 +1,25 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    myPrograms: {
+        id: 'dashboard.myPrograms',
+        defaultMessage: 'Programs',
+        description: 'Label for Programs belonging to a user\'s active subscription',
+    },
+    emptyProgramsMessage: {
+        id: 'subs.emptyProgramsMessage',
+        defaultMessage: 'In-progress professional certificate programs will be found here.',
+        description: 'Message shown in the Programs tab of the learner dashboard',
+    },
+    explorePrograms: {
+        id: 'subs.explorePrograms',
+        defaultMessage: 'Explore programs',
+        description: 'Message shown in the explore programs button in the Programs tab of the learner dashboard',
+    },
+    exploreProgramsCTAMessage: {
+        id: 'subs.exploreProgramsCTAMessage',
+        defaultMessage: 'Advance your learning by exploring a program curriculum.',
+        description: 'Message shown in the explore programs button in the Programs tab of the learner dashboard',
+    }
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/ProgramsPanel/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,UAAU,EAAE;QACV,EAAE,EAAE,sBAAsB;QAC1B,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,+DAA+D;KAC7E;IACD,oBAAoB,EAAE;QACpB,EAAE,EAAE,2BAA2B;QAC/B,cAAc,EAAE,mEAAmE;QACnF,WAAW,EAAE,4DAA4D;KAC1E;IACD,eAAe,EAAE;QACf,EAAE,EAAE,sBAAsB;QAC1B,cAAc,EAAE,kBAAkB;QAClC,WAAW,EAAE,2FAA2F;KACzG;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,gCAAgC;QACpC,cAAc,EAAE,0DAA0D;QAC1E,WAAW,EAAE,2FAA2F;KACzG;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  myPrograms: {\n    id: 'dashboard.myPrograms',\n    defaultMessage: 'Programs',\n    description: 'Label for Programs belonging to a user\\'s active subscription',\n  },\n  emptyProgramsMessage: {\n    id: 'subs.emptyProgramsMessage',\n    defaultMessage: 'In-progress professional certificate programs will be found here.',\n    description: 'Message shown in the Programs tab of the learner dashboard',\n  },\n  explorePrograms: {\n    id: 'subs.explorePrograms',\n    defaultMessage: 'Explore programs',\n    description: 'Message shown in the explore programs button in the Programs tab of the learner dashboard',\n  },\n  exploreProgramsCTAMessage: {\n    id: 'subs.exploreProgramsCTAMessage',\n    defaultMessage: 'Advance your learning by exploring a program curriculum.',\n    description: 'Message shown in the explore programs button in the Programs tab of the learner dashboard',\n  }\n});\n\nexport default messages;\n"]}

package/dist/containers/SubscriptionInformation/components/SubscriptionInformation.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const SubscriptionInformation: FC;

package/dist/containers/SubscriptionInformation/components/SubscriptionInformation.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Button, Image } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import { utilHooks } from '../../../hooks';
+import messages from '../messages';
+import { manageSubscriptionURL } from '../../../data/constants/app';
+// TODO: We can replace the below hardcoded subscriptionInformationData with the actual data from the API once we have the API ready.
+// For now, we can use this hardcoded data to test the SubscriptionInformation component.
+const subscriptionInformationData = {
+    isSubscribed: true,
+    subscriptionStatus: 'cancelled', // can be 'active', 'cancelled', 'expired'
+    subscriptionStartDate: '05/22/25',
+    subscriptionEndDate: '05/22/26',
+    subscriptionRenewalDate: '05/22/26',
+    subscriptionRenewalPrice: '$36',
+    numberOfCoursesEnrolled: 5,
+    totalSavings: '$120',
+};
+export const SubscriptionInformation = () => {
+    const { formatMessage } = useIntl();
+    const formatDate = utilHooks.useFormatDate();
+    const subscriptionActions = [
+        _jsx(Button, { variant: "outline-brand", "data-testid": "manage-button", href: manageSubscriptionURL, target: "_blank", rel: "noopener noreferrer", role: "link", children: formatMessage(messages.manageSubscriptionMessage) }, "manage-subscription"),
+    ];
+    return (_jsxs("div", { className: "container subscription-information p-3\\.5", children: [_jsx(Image, { className: "mr-2", src: "https://www.edx.org/trademark-logos/edx-logo-elm.svg", rounded: true, alt: "edX Logo", width: 40, height: 60 }), subscriptionInformationData.subscriptionStatus === 'cancelled' && (_jsx("h3", { children: formatMessage(messages.cancelledMessage, { totalSavings: subscriptionInformationData.totalSavings }) })), _jsx("p", { children: formatMessage(messages.coursesEnrollmentMessage, {
+                    numberOfCoursesEnrolled: subscriptionInformationData.numberOfCoursesEnrolled,
+                    totalSavings: subscriptionInformationData.totalSavings,
+                }) }), _jsxs(Alert, { dismissible: false, show: true, actions: subscriptionActions, className: "subscription-status-alert bg-light-200", children: [_jsx(Alert.Heading, { children: formatMessage(messages.statusMessage) }), _jsx("p", { children: formatMessage(messages.renewalMessage, {
+                            subscriptionRenewalDate: formatDate(subscriptionInformationData.subscriptionRenewalDate),
+                        }) })] })] }));
+};
+//# sourceMappingURL=SubscriptionInformation.js.map

package/dist/containers/SubscriptionInformation/components/SubscriptionInformation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscriptionInformation.js","sourceRoot":"","sources":["../../../../src/containers/SubscriptionInformation/components/SubscriptionInformation.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,qIAAqI;AACrI,yFAAyF;AACzF,MAAM,2BAA2B,GAAG;IAClC,YAAY,EAAE,IAAI;IAClB,kBAAkB,EAAE,WAAW,EAAE,0CAA0C;IAC3E,qBAAqB,EAAE,UAAU;IACjC,mBAAmB,EAAE,UAAU;IAC/B,uBAAuB,EAAE,UAAU;IACnC,wBAAwB,EAAE,KAAK;IAC/B,uBAAuB,EAAE,CAAC;IAC1B,YAAY,EAAE,MAAM;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAO,GAAG,EAAE;IAC9C,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,UAAU,GAAG,SAAS,CAAC,aAAa,EAAE,CAAC;IAE7C,MAAM,mBAAmB,GAAG;QAC1B,KAAC,MAAM,IAEL,OAAO,EAAC,eAAe,iBACX,eAAe,EAC3B,IAAI,EAAE,qBAAqB,EAC3B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,IAAI,EAAC,MAAM,YAEV,aAAa,CAAC,QAAQ,CAAC,yBAAyB,CAAC,IAR9C,qBAAqB,CASlB;KACV,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,4CAA2C,aACxD,KAAC,KAAK,IACJ,SAAS,EAAC,MAAM,EAChB,GAAG,EAAC,sDAAsD,EAC1D,OAAO,QACP,GAAG,EAAC,UAAU,EACd,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,EACD,2BAA2B,CAAC,kBAAkB,KAAK,WAAW,IAAI,CACjE,uBAAK,aAAa,CAAC,QAAQ,CAAC,gBAAgB,EAAE,EAAE,YAAY,EAAE,2BAA2B,CAAC,YAAY,EAAE,CAAC,GAAM,CAChH,EACD,sBACG,aAAa,CAAC,QAAQ,CAAC,wBAAwB,EAAE;oBAChD,uBAAuB,EAAE,2BAA2B,CAAC,uBAAuB;oBAC5E,YAAY,EAAE,2BAA2B,CAAC,YAAY;iBACvD,CAAC,GACA,EACJ,MAAC,KAAK,IACJ,WAAW,EAAE,KAAK,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAC,wCAAwC,aAElD,KAAC,KAAK,CAAC,OAAO,cAAE,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAiB,EACtE,sBACG,aAAa,CAAC,QAAQ,CAAC,cAAc,EAAE;4BACtC,uBAAuB,EAAE,UAAU,CAAC,2BAA2B,CAAC,uBAAuB,CAAC;yBACzF,CAAC,GACA,IACE,IACJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { Alert, Button, Image } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport { utilHooks } from '@src/hooks';\nimport messages from '../messages';\nimport { manageSubscriptionURL } from '@src/data/constants/app';\n\n// TODO: We can replace the below hardcoded subscriptionInformationData with the actual data from the API once we have the API ready.\n// For now, we can use this hardcoded data to test the SubscriptionInformation component.\nconst subscriptionInformationData = {\n  isSubscribed: true,\n  subscriptionStatus: 'cancelled', // can be 'active', 'cancelled', 'expired'\n  subscriptionStartDate: '05/22/25',\n  subscriptionEndDate: '05/22/26',\n  subscriptionRenewalDate: '05/22/26',\n  subscriptionRenewalPrice: '$36',\n  numberOfCoursesEnrolled: 5,\n  totalSavings: '$120',\n};\n\nexport const SubscriptionInformation: FC = () => {\n  const { formatMessage } = useIntl();\n  const formatDate = utilHooks.useFormatDate();\n\n  const subscriptionActions = [\n    <Button\n      key=\"manage-subscription\"\n      variant=\"outline-brand\"\n      data-testid=\"manage-button\"\n      href={manageSubscriptionURL}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      role=\"link\"\n    >\n      {formatMessage(messages.manageSubscriptionMessage)}\n    </Button>,\n  ];\n\n  return (\n    <div className=\"container subscription-information p-3\\.5\">\n      <Image\n        className=\"mr-2\"\n        src=\"https://www.edx.org/trademark-logos/edx-logo-elm.svg\"\n        rounded\n        alt=\"edX Logo\"\n        width={40}\n        height={60}\n      />\n      {subscriptionInformationData.subscriptionStatus === 'cancelled' && (\n        <h3>{formatMessage(messages.cancelledMessage, { totalSavings: subscriptionInformationData.totalSavings })}</h3>\n      )}\n      <p>\n        {formatMessage(messages.coursesEnrollmentMessage, {\n          numberOfCoursesEnrolled: subscriptionInformationData.numberOfCoursesEnrolled,\n          totalSavings: subscriptionInformationData.totalSavings,\n        })}\n      </p>\n      <Alert\n        dismissible={false}\n        show={true}\n        actions={subscriptionActions}\n        className=\"subscription-status-alert bg-light-200\"\n      >\n        <Alert.Heading>{formatMessage(messages.statusMessage)}</Alert.Heading>\n        <p>\n          {formatMessage(messages.renewalMessage, {\n            subscriptionRenewalDate: formatDate(subscriptionInformationData.subscriptionRenewalDate),\n          })}\n        </p>\n      </Alert>\n    </div>\n  );\n};\n"]}

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

@@ -0,0 +1 @@
+export { SubscriptionInformation } from "./components/SubscriptionInformation";

package/dist/containers/SubscriptionInformation/index.js

@@ -0,0 +1,2 @@
+export { SubscriptionInformation } from './components/SubscriptionInformation';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/SubscriptionInformation/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC","sourcesContent":["export { SubscriptionInformation } from './components/SubscriptionInformation';\n"]}

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

@@ -0,0 +1,28 @@
+declare const messages: {
+    statusMessage: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    cancelledMessage: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    coursesEnrollmentMessage: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    renewalMessage: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    manageSubscriptionMessage: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};
+export default messages;

package/dist/containers/SubscriptionInformation/messages.js

@@ -0,0 +1,30 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    statusMessage: {
+        id: 'learner-dash.subscriptionInformation.information.subscriptionStatus',
+        description: 'Status Message',
+        defaultMessage: 'Subscription Status',
+    },
+    cancelledMessage: {
+        id: 'learner-dash.subscriptionInformation.information.courseInformation',
+        description: 'Information of courses enrolled and savings',
+        defaultMessage: `You have saved {totalSavings} with your subscription so far!`,
+    },
+    coursesEnrollmentMessage: {
+        id: 'learner-dash.subscriptionInformation.information.enrollmentInformation',
+        description: 'Information of courses enrolled and savings',
+        defaultMessage: `As a subscriber, you've enrolled in {numberOfCoursesEnrolled} courses and saved {totalSavings}.`,
+    },
+    renewalMessage: {
+        id: 'learner-dash.subscriptionInformation.information.subscriptionSchedule',
+        description: 'Subscription Schedule',
+        defaultMessage: 'Subscription payment scheduled for {subscriptionRenewalDate}.',
+    },
+    manageSubscriptionMessage: {
+        id: 'learner-dash.subscriptionInformation.information.manageSubscription',
+        description: 'Manage Subscription',
+        defaultMessage: 'Manage my subscription',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/SubscriptionInformation/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,aAAa,EAAE;QACb,EAAE,EAAE,qEAAqE;QACzE,WAAW,EAAE,gBAAgB;QAC7B,cAAc,EAAE,qBAAqB;KACtC;IACD,gBAAgB,EAAE;QAChB,EAAE,EAAE,oEAAoE;QACxE,WAAW,EAAE,6CAA6C;QAC1D,cAAc,EAAE,8DAA8D;KAC/E;IACD,wBAAwB,EAAE;QACxB,EAAE,EAAE,wEAAwE;QAC5E,WAAW,EAAE,6CAA6C;QAC1D,cAAc,EAAE,iGAAiG;KAClH;IACD,cAAc,EAAE;QACd,EAAE,EAAE,uEAAuE;QAC3E,WAAW,EAAE,uBAAuB;QACpC,cAAc,EAAE,+DAA+D;KAChF;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,qEAAqE;QACzE,WAAW,EAAE,qBAAqB;QAClC,cAAc,EAAE,wBAAwB;KACzC;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  statusMessage: {\n    id: 'learner-dash.subscriptionInformation.information.subscriptionStatus',\n    description: 'Status Message',\n    defaultMessage: 'Subscription Status',\n  },\n  cancelledMessage: {\n    id: 'learner-dash.subscriptionInformation.information.courseInformation',\n    description: 'Information of courses enrolled and savings',\n    defaultMessage: `You have saved {totalSavings} with your subscription so far!`,\n  },\n  coursesEnrollmentMessage: {\n    id: 'learner-dash.subscriptionInformation.information.enrollmentInformation',\n    description: 'Information of courses enrolled and savings',\n    defaultMessage: `As a subscriber, you've enrolled in {numberOfCoursesEnrolled} courses and saved {totalSavings}.`,\n  },\n  renewalMessage: {\n    id: 'learner-dash.subscriptionInformation.information.subscriptionSchedule',\n    description: 'Subscription Schedule',\n    defaultMessage: 'Subscription payment scheduled for {subscriptionRenewalDate}.',\n  },\n  manageSubscriptionMessage: {\n    id: 'learner-dash.subscriptionInformation.information.manageSubscription',\n    description: 'Manage Subscription',\n    defaultMessage: 'Manage my subscription',\n  },\n});\n\nexport default messages;\n"]}

package/dist/data/constants/app.d.ts

@@ -2,4 +2,6 @@ export const locationId: string;
 export const SortKeys: any;
 export const FilterKeys: any;
 export const ListPageSize: 25;
-export const subscriptionRenewalURL: "https://courses.edx.org/renew-subscription";
+export const subscriptionRenewalURL: "https://courses.edx.org/manage-subscription";
+export const exploreProgramsUrl: "/explore-programs";
+export const manageSubscriptionURL: "/manage-subscription";

package/dist/data/constants/app.js

@@ -13,5 +13,7 @@ export const FilterKeys = StrictDict({
 });
 export const ListPageSize = 25;
 // TODO : Below URL is temporary and will be removed once the subscription renewal flow is implemented in the app.
-export const subscriptionRenewalURL = 'https://courses.edx.org/renew-subscription';
+export const subscriptionRenewalURL = 'https://courses.edx.org/manage-subscription';
+export const exploreProgramsUrl = '/explore-programs';
+export const manageSubscriptionURL = '/manage-subscription';
 //# sourceMappingURL=app.js.map

package/dist/data/constants/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sourceRoot":"","sources":["../../../src/data/constants/app.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AAE5D,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC;IACjC,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC;IACnC,UAAU,EAAE,YAAY;IACxB,UAAU,EAAE,YAAY;IACxB,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,aAAa;IAC1B,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAC/B,kHAAkH;AAClH,MAAM,CAAC,MAAM,sBAAsB,GAAG,4CAA4C,CAAC","sourcesContent":["import { StrictDict } from '../../utils';\nexport const locationId = window.location.pathname.slice(1);\n\nexport const SortKeys = StrictDict({\n  enrolled: 'enrolled',\n  title: 'title',\n});\n\nexport const FilterKeys = StrictDict({\n  inProgress: 'inProgress',\n  notStarted: 'notStarted',\n  done: 'done',\n  notEnrolled: 'notEnrolled',\n  upgraded: 'upgraded',\n});\n\nexport const ListPageSize = 25;\n// TODO : Below URL is temporary and will be removed once the subscription renewal flow is implemented in the app.\nexport const subscriptionRenewalURL = 'https://courses.edx.org/renew-subscription';\n"]}
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../../../src/data/constants/app.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AAE5D,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC;IACjC,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC;IACnC,UAAU,EAAE,YAAY;IACxB,UAAU,EAAE,YAAY;IACxB,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,aAAa;IAC1B,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAC/B,kHAAkH;AAClH,MAAM,CAAC,MAAM,sBAAsB,GAAG,6CAA6C,CAAC;AACpF,MAAM,CAAC,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AACtD,MAAM,CAAC,MAAM,qBAAqB,GAAG,sBAAsB,CAAC","sourcesContent":["import { StrictDict } from '../../utils';\nexport const locationId = window.location.pathname.slice(1);\n\nexport const SortKeys = StrictDict({\n  enrolled: 'enrolled',\n  title: 'title',\n});\n\nexport const FilterKeys = StrictDict({\n  inProgress: 'inProgress',\n  notStarted: 'notStarted',\n  done: 'done',\n  notEnrolled: 'notEnrolled',\n  upgraded: 'upgraded',\n});\n\nexport const ListPageSize = 25;\n// TODO : Below URL is temporary and will be removed once the subscription renewal flow is implemented in the app.\nexport const subscriptionRenewalURL = 'https://courses.edx.org/manage-subscription';\nexport const exploreProgramsUrl = '/explore-programs';\nexport const manageSubscriptionURL = '/manage-subscription';\n"]}

package/dist/hooks/index.d.ts

@@ -4,4 +4,5 @@ import useCourseData from './useCourseData';
 import useCourseTrackingEvent from './useCourseTrackingEvent';
 import useEntitlementInfo from './useEntitlementInfo';
 import useIsMasquerading from './useIsMasquerading';
-export { useCourseData, useCourseTrackingEvent, useEntitlementInfo, useIsMasquerading };
+import { useProgressData } from './useProgressData';
+export { useCourseData, useCourseTrackingEvent, useEntitlementInfo, useIsMasquerading, useProgressData };

package/dist/hooks/index.js

@@ -3,9 +3,11 @@ import useCourseData from './useCourseData';
 import useCourseTrackingEvent from './useCourseTrackingEvent';
 import useEntitlementInfo from './useEntitlementInfo';
 import useIsMasquerading from './useIsMasquerading';
+import { useProgressData } from './useProgressData';
 export const utilHooks = utils;
 export { useCourseData };
 export { useCourseTrackingEvent };
 export { useEntitlementInfo };
 export { useIsMasquerading };
+export { useProgressData };
 //# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -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"]}
+{"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"]}

package/dist/hooks/useProgressData.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Custom hook to fetch and manage program progress data for the Program Progress Page.
+ * 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.
+ * The returned `programProgressData` is transformed to camelCase for easier consumption in the components.
+ * @returns An object containing `programProgressData`, `isLoading`, and `error` states.
+ */
+export declare const useProgressData: () => {
+    programProgressData: null;
+    isLoading: boolean;
+    error: string;
+} | {
+    programProgressData: any;
+    isLoading: boolean;
+    error: Error | null;
+};

package/dist/hooks/useProgressData.js

@@ -0,0 +1,20 @@
+import { useParams } from 'react-router-dom';
+import { camelCaseObject } from '@openedx/frontend-base';
+import { useProgramProgressData } from '../data/hooks';
+/**
+ * Custom hook to fetch and manage program progress data for the Program Progress Page.
+ * 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.
+ * The returned `programProgressData` is transformed to camelCase for easier consumption in the components.
+ * @returns An object containing `programProgressData`, `isLoading`, and `error` states.
+ */
+export const useProgressData = () => {
+    // Fetch UUID from route params
+    const { uuid } = useParams();
+    const { data, isLoading, error } = useProgramProgressData(uuid);
+    const programProgressData = camelCaseObject(data);
+    if (!uuid) {
+        return { programProgressData: null, isLoading: false, error: 'Invalid URL' };
+    }
+    return { programProgressData, isLoading, error };
+};
+//# sourceMappingURL=useProgressData.js.map

package/dist/hooks/useProgressData.js.map

@@ -0,0 +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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edx/frontend-app-subscription-learner-dashboard",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "",
   "repository": {
     "type": "git",