@edx/frontend-app-subscription-learner-dashboard 1.11.0 → 1.11.1

package/dist/containers/CoursesPanel/index.js

@@ -2,7 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import { useIntl } from '@openedx/frontend-base';
 import { useInitializeSubsCourseDashboard } from '../../data/hooks';
-import { CourseFilterControls, } from '../../containers/CourseFilterControls';
 import CourseListSlot from '../../slots/CourseListSlot';
 import NoCoursesViewSlot from '../../slots/NoCoursesViewSlot';
 import { useFilters } from '../../data/context';
@@ -10,7 +9,7 @@ import { getVisibleList } from '../../utils/dataTransformers';
 import messages from './messages';
 import './index.scss';
 /**
- * Renders the list of CourseCards, as well as the controls (CourseFilterControls) for modifying the list.
+ * Renders the list of CourseCards
  * Also houses the NoCoursesView to display if the user hasn't enrolled in any courses.
  * @returns List of courses as CourseCards or empty state
 */
@@ -31,9 +30,6 @@ export const CoursesPanel = () => {
             setPageNumber(1);
         }
     }, [numPages, pageNumber, setPageNumber]);
-    // TODO [TEMP]: Passing data twice and displaying the list twice, also fixed the corresponding test cases to reflect this.
-    // Reason: Requirements not finalized
-    // Action: Revisit after UX and data confirmation
     const courseListData = {
         showFilters: true,
         setPageNumber,
@@ -41,8 +37,7 @@ export const CoursesPanel = () => {
         visibleList,
         verifiedCourse: true,
     };
-    const limitedCourseListData = Object.assign(Object.assign({}, courseListData), { verifiedCourse: false });
-    return (_jsxs("div", { className: "course-list-container", children: [_jsxs("div", { className: "course-list-heading-container", children: [_jsx("h2", { className: "course-list-title", children: formatMessage(messages.myCourses) }), _jsx("p", { className: "mb-4.5", children: formatMessage(messages.lastSession) })] }), hasCourses ? _jsx(CourseListSlot, { courseListData: courseListData }) : _jsx(NoCoursesViewSlot, {}), _jsx("div", { className: "course-list-heading-container", children: _jsx("h2", { className: "course-list-title text-gray-700", children: formatMessage(messages.limitedCourse) }) }), hasCourses ? _jsx(CourseListSlot, { courseListData: limitedCourseListData }) : _jsx(NoCoursesViewSlot, {})] }));
+    return (_jsxs("div", { className: "course-list-container", children: [_jsxs("div", { className: "course-list-heading-container", children: [_jsx("h2", { className: "course-list-title", children: formatMessage(messages.myCourses) }), _jsx("p", { className: "mb-4.5", children: formatMessage(messages.lastSession) })] }), hasCourses ? _jsx(CourseListSlot, { courseListData: courseListData }) : _jsx(NoCoursesViewSlot, {})] }));
 };
 CoursesPanel.propTypes = {};
 export default CoursesPanel;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/CoursesPanel/index.jsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo } from 'react';\n\nimport { useIntl } from '@openedx/frontend-base';\nimport { useInitializeSubsCourseDashboard } from '@src/data/hooks';\nimport {\n  CourseFilterControls,\n} from '../../containers/CourseFilterControls';\nimport CourseListSlot from '../../slots/CourseListSlot';\nimport NoCoursesViewSlot from '../../slots/NoCoursesViewSlot';\nimport { useFilters } from '@src/data/context';\n\nimport { getVisibleList } from '@src/utils/dataTransformers';\n\nimport messages from './messages';\n\nimport './index.scss';\n\n/**\n * Renders the list of CourseCards, as well as the controls (CourseFilterControls) for modifying the list.\n * Also houses the NoCoursesView to display if the user hasn't enrolled in any courses.\n * @returns List of courses as CourseCards or empty state\n*/\nexport const CoursesPanel = () => {\n  const { formatMessage } = useIntl();\n  const { data } = useInitializeSubsCourseDashboard();\n  const hasCourses = useMemo(() => data?.subscriptionCourses?.length > 0, [data]);\n\n  const {\n    filters, sortBy, pageNumber, setPageNumber,\n  } = useFilters();\n  const { visibleList, numPages } = useMemo(() => {\n    const transformedCourses = data?.coursesByCardId\n      ? Object.values(data.coursesByCardId)\n      : [];\n    return getVisibleList(\n      transformedCourses,\n      filters,\n      sortBy,\n      pageNumber,\n    );\n  }, [data, filters, sortBy, pageNumber]);\n\n  // Clamp page number when filtered/mutated list shrinks\n  React.useEffect(() => {\n    if (numPages > 0 && pageNumber > numPages) {\n      setPageNumber(1);\n    }\n  }, [numPages, pageNumber, setPageNumber]);\n\n  // TODO [TEMP]: Passing data twice and displaying the list twice, also fixed the corresponding test cases to reflect this.\n  // Reason: Requirements not finalized\n  // Action: Revisit after UX and data confirmation\n  const courseListData = {\n    showFilters: true,\n    setPageNumber,\n    numPages,\n    visibleList,\n    verifiedCourse: true,\n  };\n\n  const limitedCourseListData = {\n    ...courseListData,\n    verifiedCourse: false,\n  };\n\n  return (\n    <div className=\"course-list-container\">\n      <div className=\"course-list-heading-container\">\n        <h2 className=\"course-list-title\">{formatMessage(messages.myCourses)}</h2>\n        <p className=\"mb-4.5\">{formatMessage(messages.lastSession)}</p>\n      </div>\n      {hasCourses ? <CourseListSlot courseListData={courseListData} /> : <NoCoursesViewSlot />}\n\n      <div className=\"course-list-heading-container\">\n        <h2 className=\"course-list-title text-gray-700\">{formatMessage(messages.limitedCourse)}</h2>\n      </div>\n      {hasCourses ? <CourseListSlot courseListData={limitedCourseListData} /> : <NoCoursesViewSlot />}\n    </div>\n  );\n};\n\nCoursesPanel.propTypes = {};\n\nexport default CoursesPanel;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/CoursesPanel/index.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,gCAAgC,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,cAAc,MAAM,4BAA4B,CAAC;AACxD,OAAO,iBAAiB,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,cAAc,CAAC;AAEtB;;;;EAIE;AACF,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,EAAE;IAC/B,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,EAAE,IAAI,EAAE,GAAG,gCAAgC,EAAE,CAAC;IACpD,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,mBAAmB,0CAAE,MAAM,IAAG,CAAC,CAAA,EAAA,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEhF,MAAM,EACJ,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,GAC3C,GAAG,UAAU,EAAE,CAAC;IACjB,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7C,MAAM,kBAAkB,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,eAAe;YAC9C,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC;YACrC,CAAC,CAAC,EAAE,CAAC;QACP,OAAO,cAAc,CACnB,kBAAkB,EAClB,OAAO,EACP,MAAM,EACN,UAAU,CACX,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;IAExC,uDAAuD;IACvD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,QAAQ,GAAG,CAAC,IAAI,UAAU,GAAG,QAAQ,EAAE,CAAC;YAC1C,aAAa,CAAC,CAAC,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;IAE1C,MAAM,cAAc,GAAG;QACrB,WAAW,EAAE,IAAI;QACjB,aAAa;QACb,QAAQ;QACR,WAAW;QACX,cAAc,EAAE,IAAI;KACrB,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,aACpC,eAAK,SAAS,EAAC,+BAA+B,aAC5C,aAAI,SAAS,EAAC,mBAAmB,YAAE,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAM,EAC1E,YAAG,SAAS,EAAC,QAAQ,YAAE,aAAa,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAK,IAC3D,EACL,UAAU,CAAC,CAAC,CAAC,KAAC,cAAc,IAAC,cAAc,EAAE,cAAc,GAAI,CAAC,CAAC,CAAC,KAAC,iBAAiB,KAAG,IACpF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,SAAS,GAAG,EAAE,CAAC;AAE5B,eAAe,YAAY,CAAC","sourcesContent":["import React, { useMemo } from 'react';\n\nimport { useIntl } from '@openedx/frontend-base';\nimport { useInitializeSubsCourseDashboard } from '@src/data/hooks';\nimport CourseListSlot from '../../slots/CourseListSlot';\nimport NoCoursesViewSlot from '../../slots/NoCoursesViewSlot';\nimport { useFilters } from '@src/data/context';\n\nimport { getVisibleList } from '@src/utils/dataTransformers';\n\nimport messages from './messages';\n\nimport './index.scss';\n\n/**\n * Renders the list of CourseCards\n * Also houses the NoCoursesView to display if the user hasn't enrolled in any courses.\n * @returns List of courses as CourseCards or empty state\n*/\nexport const CoursesPanel = () => {\n  const { formatMessage } = useIntl();\n  const { data } = useInitializeSubsCourseDashboard();\n  const hasCourses = useMemo(() => data?.subscriptionCourses?.length > 0, [data]);\n\n  const {\n    filters, sortBy, pageNumber, setPageNumber,\n  } = useFilters();\n  const { visibleList, numPages } = useMemo(() => {\n    const transformedCourses = data?.coursesByCardId\n      ? Object.values(data.coursesByCardId)\n      : [];\n    return getVisibleList(\n      transformedCourses,\n      filters,\n      sortBy,\n      pageNumber,\n    );\n  }, [data, filters, sortBy, pageNumber]);\n\n  // Clamp page number when filtered/mutated list shrinks\n  React.useEffect(() => {\n    if (numPages > 0 && pageNumber > numPages) {\n      setPageNumber(1);\n    }\n  }, [numPages, pageNumber, setPageNumber]);\n\n  const courseListData = {\n    showFilters: true,\n    setPageNumber,\n    numPages,\n    visibleList,\n    verifiedCourse: true,\n  };\n\n  return (\n    <div className=\"course-list-container\">\n      <div className=\"course-list-heading-container\">\n        <h2 className=\"course-list-title\">{formatMessage(messages.myCourses)}</h2>\n        <p className=\"mb-4.5\">{formatMessage(messages.lastSession)}</p>\n      </div>\n      {hasCourses ? <CourseListSlot courseListData={courseListData} /> : <NoCoursesViewSlot />}\n    </div>\n  );\n};\n\nCoursesPanel.propTypes = {};\n\nexport default CoursesPanel;\n"]}

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

@@ -5,7 +5,7 @@ declare namespace messages {
         let defaultMessage: string;
         let description: string;
     }
-    namespace limitedCourse {
+    namespace lastSession {
         let id_1: string;
         export { id_1 as id };
         let defaultMessage_1: string;
@@ -13,12 +13,4 @@ declare namespace messages {
         let description_1: string;
         export { description_1 as description };
     }
-    namespace lastSession {
-        let id_2: string;
-        export { id_2 as id };
-        let defaultMessage_2: string;
-        export { defaultMessage_2 as defaultMessage };
-        let description_2: string;
-        export { description_2 as description };
-    }
 }

package/dist/containers/CoursesPanel/messages.js

@@ -2,14 +2,9 @@ import { defineMessages } from '@openedx/frontend-base';
 const messages = defineMessages({
     myCourses: {
         id: 'dashboard.mycourses',
-        defaultMessage: 'Courses',
+        defaultMessage: 'My courses',
         description: 'Label for courses belonging to a user\'s active subscription',
     },
-    limitedCourse: {
-        id: 'subs.limitedCourses',
-        defaultMessage: 'Limited access courses',
-        description: 'Label for subscription courses with limited access',
-    },
     lastSession: {
         id: 'subs.lastSession',
         defaultMessage: 'Last session was Thursday, May 20, 2026.', // This is a placeholder default message. The actual message should be dynamic based on the last session date received via api.

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

@@ -1 +1 @@
-{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/CoursesPanel/messages.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,SAAS,EAAE;QACT,EAAE,EAAE,qBAAqB;QACzB,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,8DAA8D;KAC5E;IACD,aAAa,EAAE;QACb,EAAE,EAAE,qBAAqB;QACzB,cAAc,EAAE,wBAAwB;QACxC,WAAW,EAAE,oDAAoD;KAClE;IACD,WAAW,EAAE;QACX,EAAE,EAAE,kBAAkB;QACtB,cAAc,EAAE,0CAA0C,EAAE,+HAA+H;QAC3L,WAAW,EAAE,iEAAiE;KAC/E;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  myCourses: {\n    id: 'dashboard.mycourses',\n    defaultMessage: 'Courses',\n    description: 'Label for courses belonging to a user\\'s active subscription',\n  },\n  limitedCourse: {\n    id: 'subs.limitedCourses',\n    defaultMessage: 'Limited access courses',\n    description: 'Label for subscription courses with limited access',\n  },\n  lastSession: {\n    id: 'subs.lastSession',\n    defaultMessage: 'Last session was Thursday, May 20, 2026.', // This is a placeholder default message. The actual message should be dynamic based on the last session date received via api.\n    description: 'Label for subscription courses to show last session information',\n  }\n});\n\nexport default messages;\n"]}
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/CoursesPanel/messages.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,SAAS,EAAE;QACT,EAAE,EAAE,qBAAqB;QACzB,cAAc,EAAE,YAAY;QAC5B,WAAW,EAAE,8DAA8D;KAC5E;IACD,WAAW,EAAE;QACX,EAAE,EAAE,kBAAkB;QACtB,cAAc,EAAE,0CAA0C,EAAE,+HAA+H;QAC3L,WAAW,EAAE,iEAAiE;KAC/E;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  myCourses: {\n    id: 'dashboard.mycourses',\n    defaultMessage: 'My courses',\n    description: 'Label for courses belonging to a user\\'s active subscription',\n  },\n  lastSession: {\n    id: 'subs.lastSession',\n    defaultMessage: 'Last session was Thursday, May 20, 2026.', // This is a placeholder default message. The actual message should be dynamic based on the last session date received via api.\n    description: 'Label for subscription courses to show last session information',\n  }\n});\n\nexport default messages;\n"]}

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

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

package/dist/containers/Dashboard/DashboardContent.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Row, Col } from '@openedx/paragon';
+import DashboardTabs from './DashboardTabs';
+export const DashboardContent = () => (_jsxs(Row, { children: [_jsx(Col, { xs: 12, lg: 8, children: _jsx(DashboardTabs, {}) }), _jsx(Col, { xs: 12, lg: 4, className: "mt-4", "data-testid": "dashboard-sidebar", children: _jsxs("div", { className: "dashboard-sidebar", children: [_jsx("h2", { children: "Sidebar" }), _jsx("p", { children: "This is the sidebar content." })] }) })] }));
+//# sourceMappingURL=DashboardContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardContent.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/DashboardContent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,MAAM,CAAC,MAAM,gBAAgB,GAAO,GAAG,EAAE,CAAC,CACxC,MAAC,GAAG,eACF,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,YAChB,KAAC,aAAa,KAAG,GACb,EAEN,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,SAAS,EAAC,MAAM,iBAAa,mBAAmB,YAClE,eAAK,SAAS,EAAC,mBAAmB,aAEhC,mCAAgB,EAChB,uDAAmC,IAC/B,GACF,IACF,CACP,CAAC","sourcesContent":["import { FC } from 'react';\nimport { Row, Col } from '@openedx/paragon';\nimport DashboardTabs from './DashboardTabs';\n\nexport const DashboardContent: FC = () => (\n  <Row>\n    <Col xs={12} lg={8}>\n      <DashboardTabs />\n    </Col>\n\n    <Col xs={12} lg={4} className=\"mt-4\" data-testid=\"dashboard-sidebar\">\n      <div className=\"dashboard-sidebar\">\n        {/* Temporary Content added, will be replaced with actual sidebar content */}\n        <h2>Sidebar</h2>\n        <p>This is the sidebar content.</p>\n      </div>\n    </Col>\n  </Row>\n);\n"]}

package/dist/containers/Dashboard/index.js

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { useSelectSessionModal } from '../../data/context';
 import { useInitializeSubsCourseDashboard } from '../../data/hooks';
 import SelectSessionModal from '../../containers/SelectSessionModal';
-import DashboardTabs from './DashboardTabs';
+import { DashboardContent } from './DashboardContent';
 import DashboardModalSlot from '../../slots/DashboardModalSlot';
 import RecentlyViewedPanel from '../RecentlyViewedPanel';
 import LoadingView from './LoadingView';
@@ -20,7 +20,7 @@ export const Dashboard = () => {
     const hasCourses = useMemo(() => { var _a; return ((_a = data === null || data === void 0 ? void 0 : data.subscriptionCourses) === null || _a === void 0 ? void 0 : _a.length) > 0; }, [data]);
     return (_jsx("div", { id: "learnerdashboardroot", children: _jsx("main", { children: _jsxs("div", { id: "dashboard-container", className: "d-flex flex-column p-2 pt-0", children: [_jsx("h1", { className: "sr-only", children: pageTitle }), !isPending && (_jsxs(_Fragment, { children: [_jsx(DashboardModalSlot, {}), (hasCourses && showSelectSessionModal) && _jsx(SelectSessionModal, {})] })), _jsx("div", { id: "dashboard-content", "data-testid": "dashboard-content", children: isPending
                             ? (_jsx(LoadingView, {}))
-                            : (_jsxs(DashboardLayout, { children: [_jsx(SubscriptionBanner, {}), _jsx(DashboardTitle, {}), _jsx(DashboardTabs, {}), _jsx(RecentlyViewedPanel, {})] })) })] }) }) }));
+                            : (_jsxs(DashboardLayout, { children: [_jsx(SubscriptionBanner, {}), _jsx(DashboardTitle, {}), _jsx(DashboardContent, {}), _jsx(RecentlyViewedPanel, {})] })) })] }) }) }));
 };
 export default Dashboard;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/index.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,gCAAgC,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,kBAAkB,MAAM,qCAAqC,CAAC;AACrE,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,kBAAkB,MAAM,gCAAgC,CAAC;AAChE,OAAO,mBAAmB,MAAM,wBAAwB,CAAC;AAEzD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,gCAAgC,EAAE,CAAC;IAC/D,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACnD,MAAM,EAAE,kBAAkB,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACvD,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,MAAM,KAAK,IAAI,CAAC;IAElE,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,mBAAmB,0CAAE,MAAM,IAAG,CAAC,CAAA,EAAA,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEhF,OAAO,CACL,cAAK,EAAE,EAAC,sBAAsB,YAC5B,yBACE,eAAK,EAAE,EAAC,qBAAqB,EAAC,SAAS,EAAC,6BAA6B,aACnE,aAAI,SAAS,EAAC,SAAS,YAAE,SAAS,GAAM,EACvC,CAAC,SAAS,IAAI,CACb,8BACE,KAAC,kBAAkB,KAAG,EACrB,CAAC,UAAU,IAAI,sBAAsB,CAAC,IAAI,KAAC,kBAAkB,KAAG,IAChE,CACJ,EACD,cAAK,EAAE,EAAC,mBAAmB,iBAAa,mBAAmB,YACxD,SAAS;4BACR,CAAC,CAAC,CAAC,KAAC,WAAW,KAAG,CAAC;4BACnB,CAAC,CAAC,CACA,MAAC,eAAe,eACd,KAAC,kBAAkB,KAAG,EACtB,KAAC,cAAc,KAAG,EAClB,KAAC,aAAa,KAAG,EACjB,KAAC,mBAAmB,KAAG,IACP,CACnB,GACC,IACF,GACD,GACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useMemo } from 'react';\n\nimport { useSelectSessionModal } from '@src/data/context';\nimport { useInitializeSubsCourseDashboard } from '@src/data/hooks';\nimport SelectSessionModal from '../../containers/SelectSessionModal';\nimport DashboardTabs from './DashboardTabs';\nimport DashboardModalSlot from '../../slots/DashboardModalSlot';\nimport RecentlyViewedPanel from '../RecentlyViewedPanel';\n\nimport LoadingView from './LoadingView';\nimport DashboardLayout from './DashboardLayout';\n\nimport hooks from './hooks';\nimport './index.scss';\nimport { SubscriptionBanner } from '../SubscriptionBanner';\nimport { DashboardTitle } from './DashboardTitle';\n\nexport const Dashboard = () => {\n  const { data, isPending } = useInitializeSubsCourseDashboard();\n  const { pageTitle } = hooks.useDashboardMessages();\n  const { selectSessionModal } = useSelectSessionModal();\n  const showSelectSessionModal = selectSessionModal.cardId !== null;\n\n  const hasCourses = useMemo(() => data?.subscriptionCourses?.length > 0, [data]);\n\n  return (\n    <div id=\"learnerdashboardroot\">\n      <main>\n        <div id=\"dashboard-container\" className=\"d-flex flex-column p-2 pt-0\">\n          <h1 className=\"sr-only\">{pageTitle}</h1>\n          {!isPending && (\n            <>\n              <DashboardModalSlot />\n              {(hasCourses && showSelectSessionModal) && <SelectSessionModal />}\n            </>\n          )}\n          <div id=\"dashboard-content\" data-testid=\"dashboard-content\">\n            {isPending\n              ? (<LoadingView />)\n              : (\n                <DashboardLayout>\n                  <SubscriptionBanner />\n                  <DashboardTitle />\n                  <DashboardTabs />\n                  <RecentlyViewedPanel />\n                </DashboardLayout>\n              )}\n          </div>\n        </div>\n      </main>\n    </div>\n  );\n};\n\nexport default Dashboard;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/index.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,gCAAgC,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,kBAAkB,MAAM,qCAAqC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,kBAAkB,MAAM,gCAAgC,CAAC;AAChE,OAAO,mBAAmB,MAAM,wBAAwB,CAAC;AAEzD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,gCAAgC,EAAE,CAAC;IAC/D,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACnD,MAAM,EAAE,kBAAkB,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACvD,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,MAAM,KAAK,IAAI,CAAC;IAElE,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,mBAAmB,0CAAE,MAAM,IAAG,CAAC,CAAA,EAAA,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEhF,OAAO,CACL,cAAK,EAAE,EAAC,sBAAsB,YAC5B,yBACE,eAAK,EAAE,EAAC,qBAAqB,EAAC,SAAS,EAAC,6BAA6B,aACnE,aAAI,SAAS,EAAC,SAAS,YAAE,SAAS,GAAM,EACvC,CAAC,SAAS,IAAI,CACb,8BACE,KAAC,kBAAkB,KAAG,EACrB,CAAC,UAAU,IAAI,sBAAsB,CAAC,IAAI,KAAC,kBAAkB,KAAG,IAChE,CACJ,EACD,cAAK,EAAE,EAAC,mBAAmB,iBAAa,mBAAmB,YACxD,SAAS;4BACR,CAAC,CAAC,CAAC,KAAC,WAAW,KAAG,CAAC;4BACnB,CAAC,CAAC,CACA,MAAC,eAAe,eACd,KAAC,kBAAkB,KAAG,EACtB,KAAC,cAAc,KAAG,EAClB,KAAC,gBAAgB,KAAG,EACpB,KAAC,mBAAmB,KAAG,IACP,CACnB,GACC,IACF,GACD,GACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useMemo } from 'react';\n\nimport { useSelectSessionModal } from '@src/data/context';\nimport { useInitializeSubsCourseDashboard } from '@src/data/hooks';\nimport SelectSessionModal from '../../containers/SelectSessionModal';\nimport { DashboardContent } from './DashboardContent';\nimport DashboardModalSlot from '../../slots/DashboardModalSlot';\nimport RecentlyViewedPanel from '../RecentlyViewedPanel';\n\nimport LoadingView from './LoadingView';\nimport DashboardLayout from './DashboardLayout';\n\nimport hooks from './hooks';\nimport './index.scss';\nimport { SubscriptionBanner } from '../SubscriptionBanner';\nimport { DashboardTitle } from './DashboardTitle';\n\nexport const Dashboard = () => {\n  const { data, isPending } = useInitializeSubsCourseDashboard();\n  const { pageTitle } = hooks.useDashboardMessages();\n  const { selectSessionModal } = useSelectSessionModal();\n  const showSelectSessionModal = selectSessionModal.cardId !== null;\n\n  const hasCourses = useMemo(() => data?.subscriptionCourses?.length > 0, [data]);\n\n  return (\n    <div id=\"learnerdashboardroot\">\n      <main>\n        <div id=\"dashboard-container\" className=\"d-flex flex-column p-2 pt-0\">\n          <h1 className=\"sr-only\">{pageTitle}</h1>\n          {!isPending && (\n            <>\n              <DashboardModalSlot />\n              {(hasCourses && showSelectSessionModal) && <SelectSessionModal />}\n            </>\n          )}\n          <div id=\"dashboard-content\" data-testid=\"dashboard-content\">\n            {isPending\n              ? (<LoadingView />)\n              : (\n                <DashboardLayout>\n                  <SubscriptionBanner />\n                  <DashboardTitle />\n                  <DashboardContent />\n                  <RecentlyViewedPanel />\n                </DashboardLayout>\n              )}\n          </div>\n        </div>\n      </main>\n    </div>\n  );\n};\n\nexport default Dashboard;\n"]}

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

@@ -6,6 +6,7 @@ import { useProgressData } from '../../../hooks';
 import ProgramProgressHeader from './ProgramProgressHeader';
 import ProgramProgressInfo from './ProgramProgressInfo';
 import { ProgramProgressTabs } from './ProgramProgressTabs';
+import { ProgramProgressSidebar } from './ProgramProgressSidebar';
 const ProgramProgress = () => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { programProgressData, isLoading, error } = useProgressData();
@@ -31,7 +32,7 @@ const ProgramProgress = () => {
     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;
     const discountData = programData === null || programData === void 0 ? void 0 : programData.discountData;
-    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 : '', discountData: discountData }), _jsx(ProgramProgressTabs, { counts: { inProgress: inProgressCourseCount, remaining: remainingCourseCount, completed: completedCourseCount }, type: programType })] }) })] })] }));
+    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 }), _jsxs(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 : '', discountData: discountData }), _jsx(ProgramProgressTabs, { counts: { inProgress: inProgressCourseCount, remaining: remainingCourseCount, completed: completedCourseCount }, type: programType })] }), _jsx(Col, { sm: 12, md: 4, children: _jsx(ProgramProgressSidebar, { inProgress: inProgressCourseCount, remaining: remainingCourseCount, completed: completedCourseCount }) })] })] })] }));
 };
 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 { 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  const discountData = programData?.discountData;\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              discountData={discountData}\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"]}
+{"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';\nimport { ProgramProgressSidebar } from './ProgramProgressSidebar';\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  const discountData = programData?.discountData;\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              discountData={discountData}\n            />\n            <ProgramProgressTabs counts={{ inProgress: inProgressCourseCount, remaining: remainingCourseCount, completed: completedCourseCount }} type={programType} />\n          </Col>\n\n          <Col sm={12} md={4}>\n            <ProgramProgressSidebar\n              inProgress={inProgressCourseCount}\n              remaining={remainingCourseCount}\n              completed={completedCourseCount}\n            />\n          </Col>\n        </Row>\n      </Container>\n    </>\n  );\n};\n\nexport default ProgramProgress;\n"]}

package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgressSidebar/ProgramProgressCircle.d.ts

@@ -0,0 +1,4 @@
+import { ProgramProgressCircleProps } from '../../data/types';
+import { FC } from 'react';
+declare const ProgramProgressCircle: FC<ProgramProgressCircleProps>;
+export default ProgramProgressCircle;

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PROGRAM_PROGRESS_CIRCLE_MAP } from '../../data/constants';
+import { useIntl } from '@openedx/frontend-base';
+import messages from '../messages';
+const { X_AXIS, Y_AXIS, CIRCLE_RADIUS, CIRCLE_DEGREES, STROKE_WIDTH, } = PROGRAM_PROGRESS_CIRCLE_MAP;
+const CircleSegment = ({ total, index, classList, }) => {
+    const segmentDash = 2 * Math.PI * CIRCLE_RADIUS;
+    const degreeInc = 360 / total;
+    // Remove strokeWidth to show a gap between the segments
+    let dashArray = segmentDash - STROKE_WIDTH;
+    const segmentDegrees = CIRCLE_DEGREES + (index * degreeInc);
+    const offset = segmentDash - ((1 / total) * segmentDash);
+    // Want the incomplete segments to have no gaps
+    if (classList === 'incomplete' && (index + 1) < total) {
+        dashArray = segmentDash;
+    }
+    return (_jsx("circle", { "data-testid": "circle-segment", className: classList, r: CIRCLE_RADIUS, cx: X_AXIS, cy: Y_AXIS, transform: `rotate(${segmentDegrees} ${X_AXIS} ${Y_AXIS})`, strokeWidth: STROKE_WIDTH, fill: "none", strokeDasharray: dashArray, strokeDashoffset: offset }));
+};
+const ProgramProgressCircle = ({ inProgress, remaining, completed }) => {
+    const totalCourses = inProgress + remaining + completed;
+    const { formatMessage } = useIntl();
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "progress-circle-wrapper", children: [_jsxs("svg", { "data-testid": "svg-circle", className: "progress-circle w-100 h-100", viewBox: "5.4 5.4 33.2 33.2", "aria-hidden": "true", children: [_jsx("circle", { className: "bg", r: CIRCLE_RADIUS, cx: X_AXIS, cy: Y_AXIS, strokeWidth: STROKE_WIDTH, fill: "none" }), Array.from({ length: totalCourses }).map((_, index) => {
+                            const segmentType = index >= completed ? 'incomplete' : 'complete';
+                            const typeIndex = index >= completed ? index - completed : index;
+                            return (_jsx(CircleSegment, { total: totalCourses, index: index, classList: segmentType }, `${segmentType}-${typeIndex}`));
+                        })] }), _jsxs("div", { className: "progress-label", children: [_jsxs("div", { className: "numbers", children: [_jsx("span", { className: "complete", children: completed }), "/", _jsx("span", { className: "total", children: totalCourses })] }), _jsx("div", { className: "label", children: formatMessage(messages.programProgressEarnedCertificates) })] })] }) }));
+};
+export default ProgramProgressCircle;
+//# sourceMappingURL=ProgramProgressCircle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgramProgressCircle.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgressSidebar/ProgramProgressCircle.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ProgramProgressCircleProps, CircleSegmentProps } from '../../data/types';\nimport { FC } from 'react';\nimport { PROGRAM_PROGRESS_CIRCLE_MAP } from '../../data/constants';\nimport { useIntl } from '@openedx/frontend-base';\nimport messages from '../messages';\n\nconst {\n  X_AXIS, Y_AXIS, CIRCLE_RADIUS, CIRCLE_DEGREES, STROKE_WIDTH,\n} = PROGRAM_PROGRESS_CIRCLE_MAP;\n\nconst CircleSegment = ({\n  total, index, classList,\n}: CircleSegmentProps) => {\n  const segmentDash = 2 * Math.PI * CIRCLE_RADIUS;\n  const degreeInc = 360 / total;\n  // Remove strokeWidth to show a gap between the segments\n  let dashArray = segmentDash - STROKE_WIDTH;\n  const segmentDegrees = CIRCLE_DEGREES + (index * degreeInc);\n  const offset = segmentDash - ((1 / total) * segmentDash);\n  // Want the incomplete segments to have no gaps\n  if (classList === 'incomplete' && (index + 1) < total) {\n    dashArray = segmentDash;\n  }\n\n  return (\n    <circle\n      data-testid=\"circle-segment\"\n      className={classList}\n      r={CIRCLE_RADIUS}\n      cx={X_AXIS}\n      cy={Y_AXIS}\n      transform={`rotate(${segmentDegrees} ${X_AXIS} ${Y_AXIS})`}\n      strokeWidth={STROKE_WIDTH}\n      fill=\"none\"\n      strokeDasharray={dashArray}\n      strokeDashoffset={offset}\n    />\n  );\n};\n\nconst ProgramProgressCircle: FC<ProgramProgressCircleProps> = ({ inProgress, remaining, completed }) => {\n  const totalCourses = inProgress + remaining + completed;\n  const { formatMessage } = useIntl();\n\n  return (\n    <>\n      <div className=\"progress-circle-wrapper\">\n        <svg data-testid=\"svg-circle\" className=\"progress-circle w-100 h-100\" viewBox=\"5.4 5.4 33.2 33.2\" aria-hidden=\"true\">\n          <circle className=\"bg\" r={CIRCLE_RADIUS} cx={X_AXIS} cy={Y_AXIS} strokeWidth={STROKE_WIDTH} fill=\"none\" />\n          {Array.from({ length: totalCourses }).map((_, index) => {\n            const segmentType = index >= completed ? 'incomplete' : 'complete';\n            const typeIndex = index >= completed ? index - completed : index;\n            return (\n              <CircleSegment\n                key={`${segmentType}-${typeIndex}`}\n                total={totalCourses}\n                index={index}\n                classList={segmentType}\n              />\n            );\n          })}\n        </svg>\n        <div className=\"progress-label\">\n          <div className=\"numbers\">\n            <span className=\"complete\">{completed}</span>/<span className=\"total\">{totalCourses}</span>\n          </div>\n          <div className=\"label\">\n            {formatMessage(messages.programProgressEarnedCertificates)}\n          </div>\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport default ProgramProgressCircle;\n"]}

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ProgramProgressSidebarProps } from '../../data/types';
+import './index.scss';
+export declare const ProgramProgressSidebar: FC<ProgramProgressSidebarProps>;

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIntl } from '@openedx/frontend-base';
+import messages from '../messages';
+import ProgramProgressCircle from './ProgramProgressCircle';
+import './index.scss';
+export const ProgramProgressSidebar = ({ inProgress, remaining, completed }) => {
+    const { formatMessage } = useIntl();
+    // TODO: Replace hard-coded price with API value when integrated
+    const formattedPrice = '$896.10';
+    return (_jsxs("div", { className: "program-certificate-widget", "data-testid": "program-certificate-progress", children: [_jsx(ProgramProgressCircle, { inProgress: inProgress, remaining: remaining, completed: completed }), _jsx("h6", { className: "progress-heading-circle font-weight-bold mb-4 mt-4", children: formatMessage(messages.programProgressCertificateLabel) }), _jsxs("div", { className: "progress-certificate-content pt-3 px-3", children: [_jsx("p", { children: formatMessage(messages.programProgressCertificateContentOne) }), _jsx("p", { children: formatMessage(messages.programProgressCertificateContentTwo, { price: formattedPrice }) })] })] }));
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgressSidebar/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,OAAO,qBAAqB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,sBAAsB,GAAoC,CAAC,EACtE,UAAU,EAAE,SAAS,EAAE,SAAS,EACjC,EAAE,EAAE;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,gEAAgE;IAChE,MAAM,cAAc,GAAG,SAAS,CAAC;IAEjC,OAAO,CACL,eACE,SAAS,EAAC,4BAA4B,iBAC1B,8BAA8B,aAE1C,KAAC,qBAAqB,IAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,GAAI,EAC7F,aAAI,SAAS,EAAC,oDAAoD,YAC/D,aAAa,CAAC,QAAQ,CAAC,+BAA+B,CAAC,GACrD,EACL,eAAK,SAAS,EAAC,wCAAwC,aACrD,sBACG,aAAa,CAAC,QAAQ,CAAC,oCAAoC,CAAC,GAC3D,EACJ,sBACG,aAAa,CAAC,QAAQ,CAAC,oCAAoC,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,CAAC,GACtF,IACA,IACF,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useIntl } from '@openedx/frontend-base';\nimport messages from '../messages';\nimport { ProgramProgressSidebarProps } from '../../data/types';\nimport ProgramProgressCircle from './ProgramProgressCircle';\nimport './index.scss';\n\nexport const ProgramProgressSidebar: FC<ProgramProgressSidebarProps> = ({\n  inProgress, remaining, completed\n}) => {\n  const { formatMessage } = useIntl();\n  // TODO: Replace hard-coded price with API value when integrated\n  const formattedPrice = '$896.10';\n\n  return (\n    <div\n      className=\"program-certificate-widget\"\n      data-testid=\"program-certificate-progress\"\n    >\n      <ProgramProgressCircle inProgress={inProgress} remaining={remaining} completed={completed} />\n      <h6 className=\"progress-heading-circle font-weight-bold mb-4 mt-4\">\n        {formatMessage(messages.programProgressCertificateLabel)}\n      </h6>\n      <div className=\"progress-certificate-content pt-3 px-3\">\n        <p>\n          {formatMessage(messages.programProgressCertificateContentOne)}\n        </p>\n        <p>\n          {formatMessage(messages.programProgressCertificateContentTwo, { price: formattedPrice })}\n        </p>\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgressSidebar/index.scss

@@ -0,0 +1,63 @@
+$progress-incomplete-number-color: #002B2B !default;
+$progress-number-label-color: #454545 !default;
+$progress-heading-circle-color: #333333 !default;
+
+.program-certificate-widget {
+  padding-right: 1.125rem;
+  padding-left: 3.1rem;
+}
+
+.progress-circle-wrapper {
+  position: relative;
+  width: 14.375rem;
+  height: 14.375rem;
+  margin: .5rem auto;
+}
+
+.progress-circle {
+  .bg {
+    stroke: var(--pgn-color-primary-200);
+  }
+
+  .complete {
+    stroke: var(--pgn-color-primary-500);
+  }
+
+  .incomplete {
+    stroke: var(--pgn-color-primary-200);
+  }
+}
+
+.progress-label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.numbers {
+  color: $progress-incomplete-number-color;
+  font-size: 3.25rem;
+  line-height: 3.75rem;
+  letter-spacing: -0.065rem;
+}
+
+.label {
+  color: $progress-number-label-color;
+  font-size: 0.875rem;
+}
+
+.progress-heading-circle {
+  color: $progress-heading-circle-color;
+  text-align: center;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.progress-certificate-content {
+  color: $progress-heading-circle-color;
+  line-height: 1.575rem;
+}

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

@@ -124,5 +124,25 @@ declare const messages: {
         id: string;
         description: string;
     };
+    programProgressEarnedCertificates: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
+    programProgressCertificateLabel: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
+    programProgressCertificateContentOne: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
+    programProgressCertificateContentTwo: {
+        defaultMessage: string;
+        id: string;
+        description: string;
+    };
 };
 export default messages;

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

@@ -124,7 +124,27 @@ const messages = defineMessages({
         defaultMessage: 'My program records',
         id: 'program.progress.completed.banner.my.program.records.button',
         description: 'Text for the My Program Records button displayed on the banner in the Completed tab of the program progress page.',
-    }
+    },
+    programProgressEarnedCertificates: {
+        defaultMessage: 'Earned Certificates',
+        id: 'program.progress.earned.certificates',
+        description: 'Label shown in the program progress circle',
+    },
+    programProgressCertificateLabel: {
+        defaultMessage: 'Program Certificate Progress',
+        id: 'program.progress.certificate.program.progress',
+        description: 'Label shown under the program progress circle',
+    },
+    programProgressCertificateContentOne: {
+        defaultMessage: 'Earn a professional certificate when you meet requirements for all courses in the series.',
+        id: 'program.progress.certificate.content.one',
+        description: 'First content paragraph shown under the program progress circle',
+    },
+    programProgressCertificateContentTwo: {
+        defaultMessage: "This program is valued at '{'{price}'}' for non-subscribers.",
+        id: 'program.progress.certificate.content.two',
+        description: 'Second content paragraph shown under the program progress circle',
+    },
 });
 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":"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","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  programProgressCardCompletedCertificateText: {\n    defaultMessage: 'You earned the certificate on {certificateDate}',\n    id: 'program.progress.card.completed.certificate.text',\n    description: 'text to display on the progress card completed tab related to the certificate status for the course',\n  },\n  programProgressCardCompletedCertificateButton: {\n    defaultMessage: 'View certificate',\n    id: 'program.progress.card.completed.certificate.button.text',\n    description: 'text to display on the progress card on certificate button for completed courses',\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  programProgressCardResumeCourseButton: {\n    defaultMessage: 'Resume course',\n    id: 'program.progress.card.resume.course.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  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  programProgressCompletedCourse: {\n    defaultMessage: 'Completed courses',\n    id: 'program.progress.completed.course',\n    description: 'Header text to be displayed inside the Completed tab of the program progress page.',\n  },\n  programProgressCompletedTabNoCourse: {\n    defaultMessage: 'As you complete courses, you will see them listed here.',\n    id: 'program.progress.completed.tab.no.course',\n    description: 'Text to display on the Completed tab of the program progress page when no course is completed for the user',\n  },\n  programProgressCompletedBannerTitle: {\n    defaultMessage: 'Earning a program record',\n    id: 'program.progress.completed.banner.title',\n    description: 'Title text for the banner displayed on the Completed tab of the program progress page.',\n  },\n  programProgressCompletedBannerDescription: {\n    defaultMessage: 'Once you meet all course and program requirements, you will receive a program record and your professional certificate.',\n    id: 'program.progress.completed.banner.description',\n    description: 'Description text for the banner displayed on the Completed tab of the program progress page.',\n  },\n  programProgressCompletedBannerHelpCenterButton: {\n    defaultMessage: 'Help center',\n    id: 'program.progress.completed.banner.help.center.button',\n    description: 'Text for the Help Center button displayed on the banner in the Completed tab of the program progress page.',\n  },\n  programProgressCompletedBannerMyProgramRecordsButton: {\n    defaultMessage: 'My program records',\n    id: 'program.progress.completed.banner.my.program.records.button',\n    description: 'Text for the My Program Records button displayed on the banner in the Completed tab of the program progress page.',\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,2CAA2C,EAAE;QAC3C,cAAc,EAAE,iDAAiD;QACjE,EAAE,EAAE,kDAAkD;QACtD,WAAW,EAAE,qGAAqG;KACnH;IACD,6CAA6C,EAAE;QAC7C,cAAc,EAAE,kBAAkB;QAClC,EAAE,EAAE,yDAAyD;QAC7D,WAAW,EAAE,kFAAkF;KAChG;IACD,yCAAyC,EAAE;QACzC,cAAc,EAAE,qBAAqB;QACrC,EAAE,EAAE,sDAAsD;QAC1D,WAAW,EAAE,yEAAyE;KACvF;IACD,qCAAqC,EAAE;QACrC,cAAc,EAAE,eAAe;QAC/B,EAAE,EAAE,iDAAiD;QACrD,WAAW,EAAE,mEAAmE;KACjF;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;IACD,8BAA8B,EAAE;QAC9B,cAAc,EAAE,mBAAmB;QACnC,EAAE,EAAE,mCAAmC;QACvC,WAAW,EAAE,oFAAoF;KAClG;IACD,mCAAmC,EAAE;QACnC,cAAc,EAAE,yDAAyD;QACzE,EAAE,EAAE,0CAA0C;QAC9C,WAAW,EAAE,4GAA4G;KAC1H;IACD,mCAAmC,EAAE;QACnC,cAAc,EAAE,0BAA0B;QAC1C,EAAE,EAAE,yCAAyC;QAC7C,WAAW,EAAE,wFAAwF;KACtG;IACD,yCAAyC,EAAE;QACzC,cAAc,EAAE,yHAAyH;QACzI,EAAE,EAAE,+CAA+C;QACnD,WAAW,EAAE,8FAA8F;KAC5G;IACD,8CAA8C,EAAE;QAC9C,cAAc,EAAE,aAAa;QAC7B,EAAE,EAAE,sDAAsD;QAC1D,WAAW,EAAE,4GAA4G;KAC1H;IACD,oDAAoD,EAAE;QACpD,cAAc,EAAE,oBAAoB;QACpC,EAAE,EAAE,6DAA6D;QACjE,WAAW,EAAE,mHAAmH;KACjI;IACD,iCAAiC,EAAE;QACjC,cAAc,EAAE,qBAAqB;QACrC,EAAE,EAAE,sCAAsC;QAC1C,WAAW,EAAE,4CAA4C;KAC1D;IACD,+BAA+B,EAAE;QAC/B,cAAc,EAAE,8BAA8B;QAC9C,EAAE,EAAE,+CAA+C;QACnD,WAAW,EAAE,+CAA+C;KAC7D;IACD,oCAAoC,EAAE;QACpC,cAAc,EAAE,2FAA2F;QAC3G,EAAE,EAAE,0CAA0C;QAC9C,WAAW,EAAE,iEAAiE;KAC/E;IACD,oCAAoC,EAAE;QACpC,cAAc,EAAE,8DAA8D;QAC9E,EAAE,EAAE,0CAA0C;QAC9C,WAAW,EAAE,kEAAkE;KAChF;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  programProgressCardCompletedCertificateText: {\n    defaultMessage: 'You earned the certificate on {certificateDate}',\n    id: 'program.progress.card.completed.certificate.text',\n    description: 'text to display on the progress card completed tab related to the certificate status for the course',\n  },\n  programProgressCardCompletedCertificateButton: {\n    defaultMessage: 'View certificate',\n    id: 'program.progress.card.completed.certificate.button.text',\n    description: 'text to display on the progress card on certificate button for completed courses',\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  programProgressCardResumeCourseButton: {\n    defaultMessage: 'Resume course',\n    id: 'program.progress.card.resume.course.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  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  programProgressCompletedCourse: {\n    defaultMessage: 'Completed courses',\n    id: 'program.progress.completed.course',\n    description: 'Header text to be displayed inside the Completed tab of the program progress page.',\n  },\n  programProgressCompletedTabNoCourse: {\n    defaultMessage: 'As you complete courses, you will see them listed here.',\n    id: 'program.progress.completed.tab.no.course',\n    description: 'Text to display on the Completed tab of the program progress page when no course is completed for the user',\n  },\n  programProgressCompletedBannerTitle: {\n    defaultMessage: 'Earning a program record',\n    id: 'program.progress.completed.banner.title',\n    description: 'Title text for the banner displayed on the Completed tab of the program progress page.',\n  },\n  programProgressCompletedBannerDescription: {\n    defaultMessage: 'Once you meet all course and program requirements, you will receive a program record and your professional certificate.',\n    id: 'program.progress.completed.banner.description',\n    description: 'Description text for the banner displayed on the Completed tab of the program progress page.',\n  },\n  programProgressCompletedBannerHelpCenterButton: {\n    defaultMessage: 'Help center',\n    id: 'program.progress.completed.banner.help.center.button',\n    description: 'Text for the Help Center button displayed on the banner in the Completed tab of the program progress page.',\n  },\n  programProgressCompletedBannerMyProgramRecordsButton: {\n    defaultMessage: 'My program records',\n    id: 'program.progress.completed.banner.my.program.records.button',\n    description: 'Text for the My Program Records button displayed on the banner in the Completed tab of the program progress page.',\n  },\n  programProgressEarnedCertificates: {\n    defaultMessage: 'Earned Certificates',\n    id: 'program.progress.earned.certificates',\n    description: 'Label shown in the program progress circle',\n  },\n  programProgressCertificateLabel: {\n    defaultMessage: 'Program Certificate Progress',\n    id: 'program.progress.certificate.program.progress',\n    description: 'Label shown under the program progress circle',\n  },\n  programProgressCertificateContentOne: {\n    defaultMessage: 'Earn a professional certificate when you meet requirements for all courses in the series.',\n    id: 'program.progress.certificate.content.one',\n    description: 'First content paragraph shown under the program progress circle',\n  },\n  programProgressCertificateContentTwo: {\n    defaultMessage: \"This program is valued at '{'{price}'}' for non-subscribers.\",\n    id: 'program.progress.certificate.content.two',\n    description: 'Second content paragraph shown under the program progress circle',\n  },\n});\n\nexport default messages;\n"]}

package/dist/containers/ProgramDashboard/data/constants.d.ts

@@ -6,3 +6,10 @@ export declare const PROGRAM_TYPE_MAP: {
     MICROBACHELORS: string;
     MASTERS: string;
 };
+export declare const PROGRAM_PROGRESS_CIRCLE_MAP: {
+    X_AXIS: number;
+    Y_AXIS: number;
+    CIRCLE_RADIUS: number;
+    CIRCLE_DEGREES: number;
+    STROKE_WIDTH: number;
+};

package/dist/containers/ProgramDashboard/data/constants.js

@@ -6,4 +6,11 @@ export const PROGRAM_TYPE_MAP = {
     MICROBACHELORS: 'MicroBachelors',
     MASTERS: 'Masters',
 };
+export const PROGRAM_PROGRESS_CIRCLE_MAP = {
+    X_AXIS: 22,
+    Y_AXIS: 22,
+    CIRCLE_RADIUS: 16,
+    CIRCLE_DEGREES: 180,
+    STROKE_WIDTH: 1.2,
+};
 //# sourceMappingURL=constants.js.map

package/dist/containers/ProgramDashboard/data/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/data/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,YAAY,EAAE,cAAc;IAC5B,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,wBAAwB,EAAE,0BAA0B;IACpD,cAAc,EAAE,gBAAgB;IAChC,OAAO,EAAE,SAAS;CACnB,CAAC","sourcesContent":["export const PROGRAM_TYPE_MAP = {\n  MICROMASTERS: 'MicroMasters',\n  CREDIT: 'Credit',\n  XSERIES: 'XSeries',\n  PROFESSIONAL_CERTIFICATE: 'Professional Certificate',\n  MICROBACHELORS: 'MicroBachelors',\n  MASTERS: 'Masters',\n};\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/data/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC9B,YAAY,EAAE,cAAc;IAC5B,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,wBAAwB,EAAE,0BAA0B;IACpD,cAAc,EAAE,gBAAgB;IAChC,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,MAAM,EAAE,EAAE;IACV,MAAM,EAAE,EAAE;IACV,aAAa,EAAE,EAAE;IACjB,cAAc,EAAE,GAAG;IACnB,YAAY,EAAE,GAAG;CAClB,CAAC","sourcesContent":["export const PROGRAM_TYPE_MAP = {\n  MICROMASTERS: 'MicroMasters',\n  CREDIT: 'Credit',\n  XSERIES: 'XSeries',\n  PROFESSIONAL_CERTIFICATE: 'Professional Certificate',\n  MICROBACHELORS: 'MicroBachelors',\n  MASTERS: 'Masters',\n};\n\nexport const PROGRAM_PROGRESS_CIRCLE_MAP = {\n  X_AXIS: 22,\n  Y_AXIS: 22,\n  CIRCLE_RADIUS: 16,\n  CIRCLE_DEGREES: 180,\n  STROKE_WIDTH: 1.2,\n};\n"]}

package/package.json

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