@edx/frontend-app-subscription-learner-dashboard 1.17.0 → 1.19.0

package/dist/containers/CoursesPanel/index.js

@@ -2,6 +2,7 @@ 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';
@@ -37,7 +38,7 @@ export const CoursesPanel = () => {
         visibleList,
         verifiedCourse: true,
     };
-    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, {})] }));
+    return (_jsxs("div", { className: "course-list-container", children: [_jsxs("div", { className: "course-list-heading-container mb-3", children: [_jsx("h2", { className: "course-list-title", children: formatMessage(messages.myCourses) }), _jsx("div", { className: "course-filter-controls-container", children: _jsx(CourseFilterControls, {}) })] }), hasCourses ? _jsx(CourseListSlot, { courseListData: courseListData }) : _jsx(NoCoursesViewSlot, {})] }));
 };
 CoursesPanel.propTypes = {};
 export default CoursesPanel;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/CoursesPanel/index.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,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"]}
+{"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,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAC5E,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,oCAAoC,aACjD,aAAI,SAAS,EAAC,mBAAmB,YAAE,aAAa,CAAC,QAAQ,CAAC,SAAS,CAAC,GAAM,EAC1E,cAAK,SAAS,EAAC,kCAAkC,YAC/C,KAAC,oBAAoB,KAAG,GACpB,IACF,EACL,UAAU,CAAC,CAAC,CAAC,KAAC,cAAc,IAAC,cAAc,EAAE,cAAc,GAAI,CAAC,CAAC,CAAC,KAAC,iBAAiB,KAAG,IACpF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,SAAS,GAAG,EAAE,CAAC;AAE5B,eAAe,YAAY,CAAC","sourcesContent":["import React, { useMemo } from 'react';\n\nimport { useIntl } from '@openedx/frontend-base';\nimport { useInitializeSubsCourseDashboard } from '@src/data/hooks';\nimport { CourseFilterControls } from '@src/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\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 mb-3\">\n        <h2 className=\"course-list-title\">{formatMessage(messages.myCourses)}</h2>\n        <div className=\"course-filter-controls-container\">\n          <CourseFilterControls />\n        </div>\n      </div>\n      {hasCourses ? <CourseListSlot courseListData={courseListData} /> : <NoCoursesViewSlot />}\n    </div>\n  );\n};\n\nCoursesPanel.propTypes = {};\n\nexport default CoursesPanel;\n"]}

package/dist/containers/CoursesPanel/index.scss

@@ -2,12 +2,13 @@
 
 .course-list-heading-container {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   justify-content: space-between;
+  align-items: center;
 }
 
 .course-list-title {
-  font-size: var(--pgn-typography-font-size-h3-base);
+  font-size: var(--pgn-typography-font-size-h2-base);
   margin: var(--pgn-spacing-spacer-3) 0;
 }
 
@@ -25,7 +26,6 @@
 
 @media (--pgn-size-breakpoint-max-width-md) {
   .course-list-heading-container {
-    flex-direction: column-reverse;
     align-items: flex-start;
   }
 

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import type { DashboardHeaderProps } from './data/types';
+export declare const DashboardHeader: FC<DashboardHeaderProps>;

package/dist/containers/Dashboard/DashboardHeader.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIntl } from '@openedx/frontend-base';
+import messages from './messages';
+import { dateFormatter } from '../../utils/dateFormatter';
+export const DashboardHeader = ({ startDate }) => {
+    const { formatMessage, formatDate } = useIntl();
+    const formattedDate = startDate ? dateFormatter(formatDate, startDate, 'long') : '';
+    return (_jsxs("div", { className: "my-4.5", children: [_jsx("h2", { className: "font-weight-bold mb-3 dashboard-header-title", "data-testid": "dashboard-header-title", children: formatMessage(messages.dashboardHeaderWelcomeTitle) }), startDate ? (_jsx("p", { className: "mb-0 text-body dashboard-header-subtitle", "data-testid": "dashboard-header-subtitle", children: formatMessage(messages.dashboardHeaderWelcomeMessage, { startDate: formattedDate || '' }) })) : null] }));
+};
+//# sourceMappingURL=DashboardHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardHeader.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/DashboardHeader.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,eAAe,GAA6B,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IACzE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,OAAO,EAAE,CAAC;IAChD,MAAM,aAAa,GAAG,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,UAAU,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpF,OAAO,CACL,eAAK,SAAS,EAAC,QAAQ,aACrB,aAAI,SAAS,EAAC,8CAA8C,iBAAa,wBAAwB,YAC9F,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC,GACjD,EACJ,SAAS,CAAC,CAAC,CAAC,CACX,YAAG,SAAS,EAAC,0CAA0C,iBAAa,2BAA2B,YAC5F,aAAa,CAAC,QAAQ,CAAC,6BAA6B,EAAE,EAAE,SAAS,EAAE,aAAa,IAAI,EAAE,EAAE,CAAC,GACxF,CACL,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useIntl } from '@openedx/frontend-base';\nimport messages from './messages';\nimport type { DashboardHeaderProps } from './data/types';\nimport { dateFormatter } from '@src/utils/dateFormatter';\n\nexport const DashboardHeader: FC<DashboardHeaderProps> = ({ startDate }) => {\n  const { formatMessage, formatDate } = useIntl();\n  const formattedDate = startDate ? dateFormatter(formatDate, startDate, 'long') : '';\n\n  return (\n    <div className=\"my-4.5\">\n      <h2 className=\"font-weight-bold mb-3 dashboard-header-title\" data-testid=\"dashboard-header-title\">\n        {formatMessage(messages.dashboardHeaderWelcomeTitle)}\n      </h2>\n      {startDate ? (\n        <p className=\"mb-0 text-body dashboard-header-subtitle\" data-testid=\"dashboard-header-subtitle\">\n          {formatMessage(messages.dashboardHeaderWelcomeMessage, { startDate: formattedDate || '' })}\n        </p>\n      ) : null}\n    </div>\n  );\n};\n"]}

package/dist/containers/Dashboard/index.js

@@ -1,28 +1,32 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
+import { DashboardHeader } from './DashboardHeader';
 import { useSelectSessionModal } from '../../data/context';
 import { useInitializeSubsCourseDashboard } from '../../data/hooks';
 import SelectSessionModal from '../../containers/SelectSessionModal';
 import { DashboardContent } from './DashboardContent';
 import DashboardModalSlot from '../../slots/DashboardModalSlot';
-import RecentlyViewedPanel from '../RecentlyViewedPanel';
+import PopularCoursePanel from '../PopularCoursePanel';
 import LoadingView from './LoadingView';
 import DashboardLayout from './DashboardLayout';
 import hooks from './hooks';
 import './index.scss';
 import { SubscriptionBanner } from '../SubscriptionBanner';
 import { DashboardTitle } from './DashboardTitle';
+import { useInitializeSubsDashboard } from '../../data/hooks';
 export const Dashboard = () => {
-    var _a, _b;
+    var _a, _b, _c;
     const { data, isPending } = useInitializeSubsCourseDashboard();
+    const { data: learnerData } = useInitializeSubsDashboard();
     const { pageTitle } = hooks.useDashboardMessages();
     const { selectSessionModal } = useSelectSessionModal();
     const showSelectSessionModal = selectSessionModal.cardId !== null;
+    const userSubscriptionStartDate = ((_a = learnerData === null || learnerData === void 0 ? void 0 : learnerData.userSubscription) === null || _a === void 0 ? void 0 : _a.subscriptionStartDate) || '';
     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]);
-    const hasCourseHistory = ((_b = (_a = data === null || data === void 0 ? void 0 : data.nonUpgradeableCourses) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
+    const hasCourseHistory = ((_c = (_b = data === null || data === void 0 ? void 0 : data.nonUpgradeableCourses) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0;
     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(DashboardContent, { hasCourseHistory: hasCourseHistory }), _jsx(RecentlyViewedPanel, {})] })) })] }) }) }));
+                            : (_jsxs(DashboardLayout, { children: [_jsx(DashboardHeader, { startDate: userSubscriptionStartDate }), _jsx(SubscriptionBanner, {}), _jsx(DashboardTitle, {}), _jsx(DashboardContent, { hasCourseHistory: hasCourseHistory }), _jsx(PopularCoursePanel, {})] })) })] }) }) }));
 };
 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,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,kBAAkB,MAAM,gCAAgC,CAAC;AAChE,OAAO,mBAAmB,MAAM,wBAAwB,CAAC;AAEzD,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;;IAC5B,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,gCAAgC,EAAE,CAAC;IAC/D,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACnD,MAAM,EAAE,kBAAkB,EAAE,GAAG,qBAAqB,EAAE,CAAC;IACvD,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,MAAM,KAAK,IAAI,CAAC;IAElE,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,mBAAmB,0CAAE,MAAM,IAAG,CAAC,CAAA,EAAA,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAChF,MAAM,gBAAgB,GAAG,CAAC,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,qBAAqB,0CAAE,MAAM,mCAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IAExE,OAAO,CACL,cAAK,EAAE,EAAC,sBAAsB,YAC5B,yBACE,eAAK,EAAE,EAAC,qBAAqB,EAAC,SAAS,EAAC,6BAA6B,aACnE,aAAI,SAAS,EAAC,SAAS,YAAE,SAAS,GAAM,EACvC,CAAC,SAAS,IAAI,CACb,8BACE,KAAC,kBAAkB,KAAG,EACrB,CAAC,UAAU,IAAI,sBAAsB,CAAC,IAAI,KAAC,kBAAkB,KAAG,IAChE,CACJ,EACD,cAAK,EAAE,EAAC,mBAAmB,iBAAa,mBAAmB,YACxD,SAAS;4BACR,CAAC,CAAC,CAAC,KAAC,WAAW,KAAG,CAAC;4BACnB,CAAC,CAAC,CACA,MAAC,eAAe,eACd,KAAC,kBAAkB,KAAG,EACtB,KAAC,cAAc,KAAG,EAClB,KAAC,gBAAgB,IAAC,gBAAgB,EAAE,gBAAgB,GAAI,EACxD,KAAC,mBAAmB,KAAG,IACP,CACnB,GACC,IACF,GACD,GACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useMemo } from 'react';\n\nimport { useSelectSessionModal } from '@src/data/context';\nimport { useInitializeSubsCourseDashboard } from '@src/data/hooks';\nimport SelectSessionModal from '../../containers/SelectSessionModal';\nimport { DashboardContent } from './DashboardContent';\nimport DashboardModalSlot from '../../slots/DashboardModalSlot';\nimport RecentlyViewedPanel from '../RecentlyViewedPanel';\n\nimport LoadingView from './LoadingView';\nimport DashboardLayout from './DashboardLayout';\n\nimport hooks from './hooks';\nimport './index.scss';\nimport { SubscriptionBanner } from '../SubscriptionBanner';\nimport { DashboardTitle } from './DashboardTitle';\n\nexport const Dashboard = () => {\n  const { data, isPending } = useInitializeSubsCourseDashboard();\n  const { pageTitle } = hooks.useDashboardMessages();\n  const { selectSessionModal } = useSelectSessionModal();\n  const showSelectSessionModal = selectSessionModal.cardId !== null;\n\n  const hasCourses = useMemo(() => data?.subscriptionCourses?.length > 0, [data]);\n  const hasCourseHistory = (data?.nonUpgradeableCourses?.length ?? 0) > 0;\n\n  return (\n    <div id=\"learnerdashboardroot\">\n      <main>\n        <div id=\"dashboard-container\" className=\"d-flex flex-column p-2 pt-0\">\n          <h1 className=\"sr-only\">{pageTitle}</h1>\n          {!isPending && (\n            <>\n              <DashboardModalSlot />\n              {(hasCourses && showSelectSessionModal) && <SelectSessionModal />}\n            </>\n          )}\n          <div id=\"dashboard-content\" data-testid=\"dashboard-content\">\n            {isPending\n              ? (<LoadingView />)\n              : (\n                <DashboardLayout>\n                  <SubscriptionBanner />\n                  <DashboardTitle />\n                  <DashboardContent hasCourseHistory={hasCourseHistory} />\n                  <RecentlyViewedPanel />\n                </DashboardLayout>\n              )}\n          </div>\n        </div>\n      </main>\n    </div>\n  );\n};\n\nexport default Dashboard;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/index.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,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,kBAAkB,MAAM,uBAAuB,CAAC;AAEvD,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;AAClD,OAAO,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAE7D,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;;IAC5B,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,gCAAgC,EAAE,CAAC;IAC/D,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,0BAA0B,EAAE,CAAC;IAC3D,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;IAClE,MAAM,yBAAyB,GAAG,CAAA,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,0CAAE,qBAAqB,KAAI,EAAE,CAAC;IAE7F,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,mBAAmB,0CAAE,MAAM,IAAG,CAAC,CAAA,EAAA,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAChF,MAAM,gBAAgB,GAAG,CAAC,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,qBAAqB,0CAAE,MAAM,mCAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IAExE,OAAO,CACL,cAAK,EAAE,EAAC,sBAAsB,YAC5B,yBACE,eAAK,EAAE,EAAC,qBAAqB,EAAC,SAAS,EAAC,6BAA6B,aACnE,aAAI,SAAS,EAAC,SAAS,YAAE,SAAS,GAAM,EACvC,CAAC,SAAS,IAAI,CACb,8BACE,KAAC,kBAAkB,KAAG,EACrB,CAAC,UAAU,IAAI,sBAAsB,CAAC,IAAI,KAAC,kBAAkB,KAAG,IAChE,CACJ,EACD,cAAK,EAAE,EAAC,mBAAmB,iBAAa,mBAAmB,YACxD,SAAS;4BACR,CAAC,CAAC,CAAC,KAAC,WAAW,KAAG,CAAC;4BACnB,CAAC,CAAC,CACA,MAAC,eAAe,eACd,KAAC,eAAe,IAAC,SAAS,EAAE,yBAAyB,GAAI,EACzD,KAAC,kBAAkB,KAAG,EACtB,KAAC,cAAc,KAAG,EAClB,KAAC,gBAAgB,IAAC,gBAAgB,EAAE,gBAAgB,GAAI,EACxD,KAAC,kBAAkB,KAAG,IACN,CACnB,GACC,IACF,GACD,GACH,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport { DashboardHeader } from './DashboardHeader';\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 PopularCoursePanel from '../PopularCoursePanel';\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';\nimport { useInitializeSubsDashboard } from '@src/data/hooks';\n\nexport const Dashboard = () => {\n  const { data, isPending } = useInitializeSubsCourseDashboard();\n  const { data: learnerData } = useInitializeSubsDashboard();\n  const { pageTitle } = hooks.useDashboardMessages();\n  const { selectSessionModal } = useSelectSessionModal();\n  const showSelectSessionModal = selectSessionModal.cardId !== null;\n  const userSubscriptionStartDate = learnerData?.userSubscription?.subscriptionStartDate || '';\n\n  const hasCourses = useMemo(() => data?.subscriptionCourses?.length > 0, [data]);\n  const hasCourseHistory = (data?.nonUpgradeableCourses?.length ?? 0) > 0;\n\n  return (\n    <div id=\"learnerdashboardroot\">\n      <main>\n        <div id=\"dashboard-container\" className=\"d-flex flex-column p-2 pt-0\">\n          <h1 className=\"sr-only\">{pageTitle}</h1>\n          {!isPending && (\n            <>\n              <DashboardModalSlot />\n              {(hasCourses && showSelectSessionModal) && <SelectSessionModal />}\n            </>\n          )}\n          <div id=\"dashboard-content\" data-testid=\"dashboard-content\">\n            {isPending\n              ? (<LoadingView />)\n              : (\n                <DashboardLayout>\n                  <DashboardHeader startDate={userSubscriptionStartDate} />\n                  <SubscriptionBanner />\n                  <DashboardTitle />\n                  <DashboardContent hasCourseHistory={hasCourseHistory} />\n                  <PopularCoursePanel />\n                </DashboardLayout>\n              )}\n          </div>\n        </div>\n      </main>\n    </div>\n  );\n};\n\nexport default Dashboard;\n"]}

package/dist/containers/Dashboard/index.scss

@@ -1,5 +1,16 @@
 @use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css";
+$title-color: #002B2B !default;
+$subtitle-color: #454545 !default;
 
 .course-list-column {
   padding: 0 var(--pgn-spacing-spacer-4);
-}
+}
+
+.dashboard-header-title {
+  color: $title-color;
+  font-size: var(--pgn-typography-font-size-h3-base);
+}
+
+.dashboard-header-subtitle {
+  color: $subtitle-color;
+}

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

@@ -9,5 +9,15 @@ declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    dashboardHeaderWelcomeTitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    dashboardHeaderWelcomeMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export default messages;

package/dist/containers/Dashboard/messages.js

@@ -10,6 +10,16 @@ const messages = defineMessages({
         defaultMessage: 'Your home for all of your future learning with edX Unlimited.',
         description: 'Subtitle for the subscriber dashboard',
     },
+    dashboardHeaderWelcomeTitle: {
+        id: 'Dashboard.Header.Welcome.Title',
+        defaultMessage: 'Welcome to your learning home.',
+        description: 'Welcome message for the subscriber dashboard',
+    },
+    dashboardHeaderWelcomeMessage: {
+        id: 'Dashboard.Header.Welcome.Message',
+        defaultMessage: 'Subscriber since {startDate}.',
+        description: 'Additional content for the subscriber dashboard',
+    },
 });
 export default messages;
 //# sourceMappingURL=messages.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,cAAc,EAAE;QACd,EAAE,EAAE,iBAAiB;QACrB,cAAc,EAAE,sBAAsB;QACtC,WAAW,EAAE,oCAAoC;KAClD;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,oBAAoB;QACxB,cAAc,EAAE,+DAA+D;QAC/E,WAAW,EAAE,uCAAuC;KACrD;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  dashboardTitle: {\n    id: 'Dashboard.Title',\n    defaultMessage: 'Subscriber Dashboard',\n    description: 'Title for the subscriber dashboard',\n  },\n  dashboardSubtitle: {\n    id: 'Dashboard.Subtitle',\n    defaultMessage: 'Your home for all of your future learning with edX Unlimited.',\n    description: 'Subtitle for the subscriber dashboard',\n  },\n});\n\nexport default messages;\n"]}
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,cAAc,EAAE;QACd,EAAE,EAAE,iBAAiB;QACrB,cAAc,EAAE,sBAAsB;QACtC,WAAW,EAAE,oCAAoC;KAClD;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,oBAAoB;QACxB,cAAc,EAAE,+DAA+D;QAC/E,WAAW,EAAE,uCAAuC;KACrD;IACD,2BAA2B,EAAE;QAC3B,EAAE,EAAE,gCAAgC;QACpC,cAAc,EAAE,gCAAgC;QAChD,WAAW,EAAE,8CAA8C;KAC5D;IACD,6BAA6B,EAAE;QAC7B,EAAE,EAAE,kCAAkC;QACtC,cAAc,EAAE,+BAA+B;QAC/C,WAAW,EAAE,iDAAiD;KAC/D;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  dashboardTitle: {\n    id: 'Dashboard.Title',\n    defaultMessage: 'Subscriber Dashboard',\n    description: 'Title for the subscriber dashboard',\n  },\n  dashboardSubtitle: {\n    id: 'Dashboard.Subtitle',\n    defaultMessage: 'Your home for all of your future learning with edX Unlimited.',\n    description: 'Subtitle for the subscriber dashboard',\n  },\n  dashboardHeaderWelcomeTitle: {\n    id: 'Dashboard.Header.Welcome.Title',\n    defaultMessage: 'Welcome to your learning home.',\n    description: 'Welcome message for the subscriber dashboard',\n  },\n  dashboardHeaderWelcomeMessage: {\n    id: 'Dashboard.Header.Welcome.Message',\n    defaultMessage: 'Subscriber since {startDate}.',\n    description: 'Additional content for the subscriber dashboard',\n  },\n});\n\nexport default messages;\n"]}

package/dist/containers/PopularCoursePanel/NoPopularCourseItems/index.d.ts

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

package/dist/containers/PopularCoursePanel/NoPopularCourseItems/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIntl } from '@openedx/frontend-base';
+import messages from './messages';
+const NoPopularCourseItems = () => {
+    const { formatMessage } = useIntl();
+    return (_jsx("div", { "data-testid": "no-popular-course-items", children: _jsx("p", { className: "mb-0", children: formatMessage(messages.popularCourseEmptyState) }) }));
+};
+export default NoPopularCourseItems;
+//# sourceMappingURL=index.js.map

package/dist/containers/PopularCoursePanel/NoPopularCourseItems/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/containers/PopularCoursePanel/NoPopularCourseItems/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,oBAAoB,GAAO,GAAG,EAAE;IACpC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,OAAO,CACL,6BAAiB,yBAAyB,YACxC,YAAG,SAAS,EAAC,MAAM,YAAE,aAAa,CAAC,QAAQ,CAAC,uBAAuB,CAAC,GAAK,GACrE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport messages from './messages';\n\nconst NoPopularCourseItems: FC = () => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <div data-testid=\"no-popular-course-items\">\n      <p className=\"mb-0\">{formatMessage(messages.popularCourseEmptyState)}</p>\n    </div>\n  );\n};\n\nexport default NoPopularCourseItems;\n"]}

package/dist/containers/{RecentlyViewedPanel/NoRecentlyViewedItems → PopularCoursePanel/NoPopularCourseItems}/messages.d.ts

@@ -1,5 +1,5 @@
 declare const messages: {
-    recentlyViewedEmptyState: {
+    popularCourseEmptyState: {
         id: string;
         defaultMessage: string;
         description: string;

package/dist/containers/PopularCoursePanel/NoPopularCourseItems/messages.js

@@ -0,0 +1,10 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    popularCourseEmptyState: {
+        id: 'subs-dash.popularCoursePanel.emptyState',
+        defaultMessage: 'When you browse the edX Unlimited catalog, we\'ll show popular courses here.',
+        description: 'Placeholder text for popular courses section',
+    }
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/containers/PopularCoursePanel/NoPopularCourseItems/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../src/containers/PopularCoursePanel/NoPopularCourseItems/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,uBAAuB,EAAE;QACvB,EAAE,EAAE,yCAAyC;QAC7C,cAAc,EAAE,8EAA8E;QAC9F,WAAW,EAAE,8CAA8C;KAC5D;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  popularCourseEmptyState: {\n    id: 'subs-dash.popularCoursePanel.emptyState',\n    defaultMessage: 'When you browse the edX Unlimited catalog, we\\'ll show popular courses here.',\n    description: 'Placeholder text for popular courses section',\n  }\n});\n\nexport default messages;\n"]}

package/dist/containers/PopularCoursePanel/PopularCourses/index.d.ts

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

package/dist/containers/{RecentlyViewedPanel/RecentlyViewedCourseProgram → PopularCoursePanel/PopularCourses}/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ProductCard } from '../../ProductCard';
-export const RecentlyViewedCourseProgram = ({ items, isLoading }) => {
-    return (_jsx("div", { "data-testid": "recently-viewed-items", children: _jsx("div", { className: "row g-3 flex-nowrap flex-md-wrap overflow-auto", children: items.map((item) => (_jsx("div", { className: "col-12 col-md-6 col-xl-3 d-flex mb-2", children: _jsx(ProductCard, { item: item, isLoading: isLoading }) }, item.objectID))) }) }));
+export const PopularCourses = ({ items, isLoading }) => {
+    return (_jsx("div", { "data-testid": "popular-courses-items", children: _jsx("div", { className: "row g-3 flex-nowrap flex-md-wrap overflow-auto", children: items.map((item) => (_jsx("div", { className: "col-12 col-md-6 col-xl-3 d-flex mb-2", children: _jsx(ProductCard, { item: item, isLoading: isLoading }) }, item.objectID))) }) }));
 };
-export default RecentlyViewedCourseProgram;
+export default PopularCourses;
 //# sourceMappingURL=index.js.map

package/dist/containers/PopularCoursePanel/PopularCourses/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/containers/PopularCoursePanel/PopularCourses/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IAC9E,OAAO,CACL,6BAAiB,uBAAuB,YACtC,cAAK,SAAS,EAAC,gDAAgD,YAC5D,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,cAAyB,SAAS,EAAC,sCAAsC,YACvE,KAAC,WAAW,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAI,IADzC,IAAI,CAAC,QAAQ,CAEjB,CACP,CAAC,GACE,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { ProductCard } from '../../ProductCard';\nimport { PopularCoursesProps } from './data/types';\n\nexport const PopularCourses: FC<PopularCoursesProps> = ({ items, isLoading }) => {\n  return (\n    <div data-testid=\"popular-courses-items\">\n      <div className=\"row g-3 flex-nowrap flex-md-wrap overflow-auto\">\n        {items.map((item) => (\n          <div key={item.objectID} className=\"col-12 col-md-6 col-xl-3 d-flex mb-2\">\n            <ProductCard item={item} isLoading={isLoading} />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default PopularCourses;\n"]}

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

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

package/dist/containers/PopularCoursePanel/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Alert } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import { usePopularCoursesData } from '../../hooks/usePopularCourses';
+import { useAlgoliaSearch } from '../../utils/algoliaUtils';
+import messages from './messages';
+import NoPopularCourseItems from './NoPopularCourseItems';
+import PopularCourses from './PopularCourses';
+export const PopularCoursePanel = () => {
+    const { formatMessage } = useIntl();
+    const [searchClient] = useAlgoliaSearch();
+    const { data: popularCoursesData = [], isError, isLoading, } = usePopularCoursesData(searchClient, true);
+    const hasPopularCoursesData = useMemo(() => popularCoursesData.length > 0, [popularCoursesData]);
+    if (isError) {
+        return (_jsx("div", { className: "popular-courses-container mt-5 mb-3", "data-testid": "popular-courses-panel", children: _jsx(Alert, { variant: "danger", "data-testid": "popular-courses-error", children: formatMessage(messages.popularCoursesErrorText) }) }));
+    }
+    return (_jsxs("div", { className: "popular-courses-container mt-5 mb-3", "data-testid": "popular-courses-panel", children: [_jsx("div", { className: "popular-courses-heading-container mb-4", children: _jsx("h2", { children: formatMessage(messages.popularCoursesHeader) }) }), (isLoading || hasPopularCoursesData) ? (_jsx(PopularCourses, { items: popularCoursesData, isLoading: isLoading })) : (_jsx(NoPopularCourseItems, {}))] }));
+};
+export default PopularCoursePanel;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/PopularCoursePanel/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,OAAO,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAC1D,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,MAAM,CAAC,MAAM,kBAAkB,GAAO,GAAG,EAAE;IACzC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,CAAC,YAAY,CAAC,GAAG,gBAAgB,EAAE,CAAC;IAC1C,MAAM,EACJ,IAAI,EAAE,kBAAkB,GAAG,EAAE,EAC7B,OAAO,EACP,SAAS,GACV,GAAG,qBAAqB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;IAC9C,MAAM,qBAAqB,GAAG,OAAO,CACnC,GAAG,EAAE,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC,EACnC,CAAC,kBAAkB,CAAC,CACrB,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,cAAK,SAAS,EAAC,qCAAqC,iBAAa,uBAAuB,YACtF,KAAC,KAAK,IAAC,OAAO,EAAC,QAAQ,iBAAa,uBAAuB,YACxD,aAAa,CAAC,QAAQ,CAAC,uBAAuB,CAAC,GAC1C,GACJ,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,qCAAqC,iBAAa,uBAAuB,aACtF,cAAK,SAAS,EAAC,wCAAwC,YACrD,uBAAK,aAAa,CAAC,QAAQ,CAAC,oBAAoB,CAAC,GAAM,GACnD,EACL,CAAC,SAAS,IAAI,qBAAqB,CAAC,CAAC,CAAC,CAAC,CACtC,KAAC,cAAc,IACb,KAAK,EAAE,kBAAkB,EACzB,SAAS,EAAE,SAAS,GACpB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,oBAAoB,KAAG,CACzB,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { FC, useMemo } from 'react';\nimport { Alert } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { usePopularCoursesData } from '@src/hooks/usePopularCourses';\nimport { useAlgoliaSearch } from '@src/utils/algoliaUtils';\nimport messages from './messages';\nimport NoPopularCourseItems from './NoPopularCourseItems';\nimport PopularCourses from './PopularCourses';\n\nexport const PopularCoursePanel: FC = () => {\n  const { formatMessage } = useIntl();\n  const [searchClient] = useAlgoliaSearch();\n  const {\n    data: popularCoursesData = [],\n    isError,\n    isLoading,\n  } = usePopularCoursesData(searchClient, true);\n  const hasPopularCoursesData = useMemo(\n    () => popularCoursesData.length > 0,\n    [popularCoursesData]\n  );\n\n  if (isError) {\n    return (\n      <div className=\"popular-courses-container mt-5 mb-3\" data-testid=\"popular-courses-panel\">\n        <Alert variant=\"danger\" data-testid=\"popular-courses-error\">\n          {formatMessage(messages.popularCoursesErrorText)}\n        </Alert>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"popular-courses-container mt-5 mb-3\" data-testid=\"popular-courses-panel\">\n      <div className=\"popular-courses-heading-container mb-4\">\n        <h2>{formatMessage(messages.popularCoursesHeader)}</h2>\n      </div>\n      {(isLoading || hasPopularCoursesData) ? (\n        <PopularCourses\n          items={popularCoursesData}\n          isLoading={isLoading}\n        />\n      ) : (\n        <NoPopularCourseItems />\n      )}\n    </div>\n  );\n};\n\nexport default PopularCoursePanel;\n"]}

package/dist/containers/{RecentlyViewedPanel → PopularCoursePanel}/messages.d.ts

@@ -1,10 +1,10 @@
 declare const messages: {
-    recentlyViewedHeader: {
+    popularCoursesHeader: {
         id: string;
         defaultMessage: string;
         description: string;
     };
-    recentlyViewedErrorText: {
+    popularCoursesErrorText: {
         id: string;
         defaultMessage: string;
         description: string;

package/dist/containers/PopularCoursePanel/messages.js

@@ -0,0 +1,15 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    popularCoursesHeader: {
+        id: 'subs-dash.popularCoursesPanel.header',
+        defaultMessage: 'Popular courses',
+        description: 'Label for the popular courses section',
+    },
+    popularCoursesErrorText: {
+        id: 'subs-dash.popularCoursesPanel.errorText',
+        defaultMessage: 'Failed to load popular courses. Please try again later.',
+        description: 'Error text for failing to load popular courses',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/PopularCoursePanel/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,oBAAoB,EAAE;QACpB,EAAE,EAAE,sCAAsC;QAC1C,cAAc,EAAE,iBAAiB;QACjC,WAAW,EAAE,uCAAuC;KACrD;IACD,uBAAuB,EAAE;QACvB,EAAE,EAAE,yCAAyC;QAC7C,cAAc,EAAE,yDAAyD;QACzE,WAAW,EAAE,gDAAgD;KAC9D;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  popularCoursesHeader: {\n    id: 'subs-dash.popularCoursesPanel.header',\n    defaultMessage: 'Popular courses',\n    description: 'Label for the popular courses section',\n  },\n  popularCoursesErrorText: {\n    id: 'subs-dash.popularCoursesPanel.errorText',\n    defaultMessage: 'Failed to load popular courses. Please try again later.',\n    description: 'Error text for failing to load popular courses',\n  },\n});\n\nexport default messages;\n"]}

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

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

package/dist/containers/ProductCard/index.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, Badge, Icon } from '@openedx/paragon';
-import { School } from '@openedx/paragon/icons';
+import { useIntl } from '@openedx/frontend-base';
+import { Card, Icon } from '@openedx/paragon';
+import { Timelapse, Speed } from '@openedx/paragon/icons';
 import './index.scss';
-const DESCRIPTION_MAX_LENGTH = 130;
-const getPlainText = (value) => value.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim();
-const truncateText = (value, maxLength) => (value.length > maxLength ? `${value.slice(0, maxLength).trimEnd()}...` : value);
+import cardFallbackImg from '@openedx/brand-openedx/paragon/images/card-imagecap-fallback.png';
+import messages from './messages';
 export const ProductCard = ({ item, isLoading }) => {
-    return (_jsxs(Card, { className: "shadow-sm d-flex flex-column rounded w-100 overflow-hidden", variant: item.product === 'Course' ? 'light' : 'dark', "data-testid": "product-card", isLoading: isLoading, children: [_jsx("div", { className: "position-relative", children: _jsx(Card.ImageCap, { src: item.url, srcAlt: `${item.title} main-image`, "data-testid": "product-card-image", logoSrc: item.thumbnail || '', logoAlt: `${item.title} thumbnail-image` }) }), _jsx(Card.Header, { title: item.title }), _jsxs(Card.Section, { className: "d-flex flex-column flex-grow-1 overflow-hidden", children: [_jsx("div", { className: "flex-grow-1 min-h-0", children: _jsx("p", { className: "text-truncate-3 mb-2", children: truncateText(getPlainText(item.primary_description), DESCRIPTION_MAX_LENGTH) }) }), (item.product === 'Program' && item.tagText) && (_jsxs(Badge, { variant: "light", className: "d-inline-flex align-items-center px-2 py-1 align-self-start", children: [_jsx(Icon, { src: School, className: "mr-2" }), item.tagText] }))] }), _jsx(Card.Footer, { className: "d-flex justify-content-between align-items-center", children: _jsx("span", { className: `small ${item.product === 'Program' ? 'text-white' : 'text-muted'}`, children: item.footerLabel }) })] }));
+    const { formatMessage } = useIntl();
+    return (_jsxs(Card, { className: "shadow-sm d-flex flex-column rounded w-100 overflow-hidden card-container", variant: item.product === 'Course' ? 'light' : 'dark', "data-testid": "product-card", isLoading: isLoading, children: [_jsx(Card.Header, { title: item.content_type, className: "pb-2 pt-2 bg-light-500 text-primary-500 content-type", size: "xs" }), _jsx("div", { className: "position-relative image-container", children: _jsx(Card.ImageCap, { src: item.url || cardFallbackImg, srcAlt: `${item.title} main-image`, "data-testid": "product-card-image", logoSrc: item.thumbnail || '', logoAlt: `${item.title} thumbnail-image` }) }), _jsx(Card.Header, { title: item.title, size: "sm", className: "product-card-title" }), item.partner ? (_jsx(Card.Header, { title: item.partner, className: "d-flex justify-content-between align-items-center", size: "xs" })) : null, _jsxs(Card.Section, { className: "d-flex flex-column flex-grow-1 overflow-hidden mt-5", children: [typeof item.weeks_to_complete === 'number' && (_jsxs("span", { className: "d-flex align-items-center", children: [_jsx(Icon, { src: Timelapse, className: "mr-2" }), _jsx("span", { children: formatMessage(messages.weeksToComplete, { count: item.weeks_to_complete }) })] })), item.level ? (_jsxs("span", { className: `d-flex align-items-center${typeof item.weeks_to_complete === 'number' ? ' mt-3' : ''}`, children: [_jsx(Icon, { src: Speed, className: "mr-2" }), _jsx("span", { children: formatMessage(messages.level, { level: item.level }) })] })) : null] })] }));
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/ProductCard/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAIhD,OAAO,cAAc,CAAC;AAEtB,MAAM,sBAAsB,GAAG,GAAG,CAAC;AAEnC,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAEnG,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,SAAiB,EAAE,EAAE,CAAC,CACzD,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAC/E,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;IACvE,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAC,4DAA4D,EACtE,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,iBACzC,cAAc,EAC1B,SAAS,EAAE,SAAS,aAEpB,cAAK,SAAS,EAAC,mBAAmB,YAChC,KAAC,IAAI,CAAC,QAAQ,IACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,aAAa,iBACtB,oBAAoB,EAChC,OAAO,EAAE,IAAI,CAAC,SAAS,IAAI,EAAE,EAC7B,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,kBAAkB,GACxC,GACE,EAEN,KAAC,IAAI,CAAC,MAAM,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,EAElC,MAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAC,gDAAgD,aACtE,cAAK,SAAS,EAAC,qBAAqB,YAClC,YAAG,SAAS,EAAC,sBAAsB,YAChC,YAAY,CAAC,YAAY,CAAC,IAAI,CAAC,mBAAmB,CAAC,EAAE,sBAAsB,CAAC,GAC3E,GACA,EAEL,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAC/C,MAAC,KAAK,IACJ,OAAO,EAAC,OAAO,EACf,SAAS,EAAC,6DAA6D,aAEvE,KAAC,IAAI,IAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,GAAG,EACrC,IAAI,CAAC,OAAO,IACP,CACT,IACY,EAEf,KAAC,IAAI,CAAC,MAAM,IAAC,SAAS,EAAC,mDAAmD,YACxE,eAAM,SAAS,EAAE,SAAS,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,EAAE,YAAG,IAAI,CAAC,WAAW,GAAQ,GACnG,IACT,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { Card, Badge, Icon } from '@openedx/paragon';\nimport { School } from '@openedx/paragon/icons';\n\nimport { ProductCardProps } from './data/types';\n\nimport './index.scss';\n\nconst DESCRIPTION_MAX_LENGTH = 130;\n\nconst getPlainText = (value: string) => value.replace(/<[^>]*>/g, ' ').replace(/\\s+/g, ' ').trim();\n\nconst truncateText = (value: string, maxLength: number) => (\n  value.length > maxLength ? `${value.slice(0, maxLength).trimEnd()}...` : value\n);\n\nexport const ProductCard: FC<ProductCardProps> = ({ item, isLoading }) => {\n  return (\n    <Card\n      className=\"shadow-sm d-flex flex-column rounded w-100 overflow-hidden\"\n      variant={item.product === 'Course' ? 'light' : 'dark'}\n      data-testid=\"product-card\"\n      isLoading={isLoading}\n    >\n      <div className=\"position-relative\">\n        <Card.ImageCap\n          src={item.url}\n          srcAlt={`${item.title} main-image`}\n          data-testid=\"product-card-image\"\n          logoSrc={item.thumbnail || ''}\n          logoAlt={`${item.title} thumbnail-image`}\n        />\n      </div>\n\n      <Card.Header title={item.title} />\n\n      <Card.Section className=\"d-flex flex-column flex-grow-1 overflow-hidden\">\n        <div className=\"flex-grow-1 min-h-0\">\n          <p className=\"text-truncate-3 mb-2\">\n            {truncateText(getPlainText(item.primary_description), DESCRIPTION_MAX_LENGTH)}\n          </p>\n        </div>\n\n        {(item.product === 'Program' && item.tagText) && (\n          <Badge\n            variant=\"light\"\n            className=\"d-inline-flex align-items-center px-2 py-1 align-self-start\"\n          >\n            <Icon src={School} className=\"mr-2\" />\n            {item.tagText}\n          </Badge>\n        )}\n      </Card.Section>\n\n      <Card.Footer className=\"d-flex justify-content-between align-items-center\">\n        <span className={`small ${item.product === 'Program' ? 'text-white' : 'text-muted'}`}>{item.footerLabel}</span>\n      </Card.Footer>\n    </Card>\n  );\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/ProductCard/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,MAAM,kEAAkE,CAAC;AAE/F,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;IACvE,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAC,2EAA2E,EACrF,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,iBACzC,cAAc,EAC1B,SAAS,EAAE,SAAS,aAEpB,KAAC,IAAI,CAAC,MAAM,IAAC,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,EAAC,sDAAsD,EAAC,IAAI,EAAC,IAAI,GAAG,EAEpH,cAAK,SAAS,EAAC,mCAAmC,YAChD,KAAC,IAAI,CAAC,QAAQ,IACZ,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,eAAe,EAChC,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,aAAa,iBACtB,oBAAoB,EAChC,OAAO,EAAE,IAAI,CAAC,SAAS,IAAI,EAAE,EAC7B,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,kBAAkB,GACxC,GACE,EAEN,KAAC,IAAI,CAAC,MAAM,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,oBAAoB,GAAG,EAE1E,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,KAAC,IAAI,CAAC,MAAM,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,SAAS,EAAC,mDAAmD,EAAC,IAAI,EAAC,IAAI,GAAG,CAC7G,CAAC,CAAC,CAAC,IAAI,EAER,MAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAC,qDAAqD,aAC1E,OAAO,IAAI,CAAC,iBAAiB,KAAK,QAAQ,IAAI,CAC7C,gBAAM,SAAS,EAAC,2BAA2B,aACzC,KAAC,IAAI,IAAC,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EACzC,yBAAO,aAAa,CAAC,QAAQ,CAAC,eAAe,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,CAAC,GAAQ,IACpF,CACR,EACA,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,gBAAM,SAAS,EAAE,4BAA4B,OAAO,IAAI,CAAC,iBAAiB,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,aACtG,KAAC,IAAI,IAAC,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,MAAM,GAAG,EACrC,yBAAO,aAAa,CAAC,QAAQ,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,GAAQ,IAC9D,CACR,CAAC,CAAC,CAAC,IAAI,IACK,IAEV,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useIntl } from '@openedx/frontend-base';\nimport { Card, Icon } from '@openedx/paragon';\nimport { Timelapse, Speed } from '@openedx/paragon/icons';\nimport './index.scss';\nimport cardFallbackImg from '@openedx/brand-openedx/paragon/images/card-imagecap-fallback.png';\nimport { ProductCardProps } from './data/types';\nimport messages from './messages';\n\nexport const ProductCard: FC<ProductCardProps> = ({ item, isLoading }) => {\n  const { formatMessage } = useIntl();\n  return (\n    <Card\n      className=\"shadow-sm d-flex flex-column rounded w-100 overflow-hidden card-container\"\n      variant={item.product === 'Course' ? 'light' : 'dark'}\n      data-testid=\"product-card\"\n      isLoading={isLoading}\n    >\n      <Card.Header title={item.content_type} className=\"pb-2 pt-2 bg-light-500 text-primary-500 content-type\" size=\"xs\" />\n\n      <div className=\"position-relative image-container\">\n        <Card.ImageCap\n          src={item.url || cardFallbackImg}\n          srcAlt={`${item.title} main-image`}\n          data-testid=\"product-card-image\"\n          logoSrc={item.thumbnail || ''}\n          logoAlt={`${item.title} thumbnail-image`}\n        />\n      </div>\n\n      <Card.Header title={item.title} size=\"sm\" className=\"product-card-title\" />\n\n      {item.partner ? (\n        <Card.Header title={item.partner} className=\"d-flex justify-content-between align-items-center\" size=\"xs\" />\n      ) : null}\n\n      <Card.Section className=\"d-flex flex-column flex-grow-1 overflow-hidden mt-5\">\n        {typeof item.weeks_to_complete === 'number' && (\n          <span className=\"d-flex align-items-center\">\n            <Icon src={Timelapse} className=\"mr-2\" />\n            <span>{formatMessage(messages.weeksToComplete, { count: item.weeks_to_complete })}</span>\n          </span>\n        )}\n        {item.level ? (\n          <span className={`d-flex align-items-center${typeof item.weeks_to_complete === 'number' ? ' mt-3' : ''}`}>\n            <Icon src={Speed} className=\"mr-2\" />\n            <span>{formatMessage(messages.level, { level: item.level })}</span>\n          </span>\n        ) : null}\n      </Card.Section>\n\n    </Card>\n  );\n};\n"]}

package/dist/containers/ProductCard/index.scss

@@ -1,6 +1,17 @@
-.text-truncate-3 {
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
+.product-card-title { 
+  min-height: 6.4rem;
+}
+
+.card-container > .content-type > .pgn__card-header-content {
+  margin-top: 0;
+}
+
+.card-container .pgn__card-logo-cap {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.card-container .pgn__card-image-cap {
+  border-radius: 0 !important;
+}

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

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

package/dist/containers/ProductCard/messages.js

@@ -0,0 +1,15 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    weeksToComplete: {
+        id: 'subs-dash.weeksToComplete.label',
+        defaultMessage: '{count, plural, one {# week to complete} other {# weeks to complete}}',
+        description: 'Label for the weeks to complete field',
+    },
+    level: {
+        id: 'subs-dash.level.label',
+        defaultMessage: '{level} level',
+        description: 'Label for the level field',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/ProductCard/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,eAAe,EAAE;QACf,EAAE,EAAE,iCAAiC;QACrC,cAAc,EAAE,uEAAuE;QACvF,WAAW,EAAE,uCAAuC;KACrD;IACD,KAAK,EAAE;QACL,EAAE,EAAE,uBAAuB;QAC3B,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,2BAA2B;KACzC;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  weeksToComplete: {\n    id: 'subs-dash.weeksToComplete.label',\n    defaultMessage: '{count, plural, one {# week to complete} other {# weeks to complete}}',\n    description: 'Label for the weeks to complete field',\n  },\n  level: {\n    id: 'subs-dash.level.label',\n    defaultMessage: '{level} level',\n    description: 'Label for the level field',\n  },\n});\n\nexport default messages;\n"]}

package/dist/containers/ProgramDashboard/ProgramProgress/PathwaysTabData/CreditFaqBanner/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import './index.scss';
+export declare const CreditFaqBanner: FC;

package/dist/containers/ProgramDashboard/ProgramProgress/PathwaysTabData/CreditFaqBanner/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIntl } from '@openedx/frontend-base';
+import { Card, Button, Row, Col } from '@openedx/paragon';
+import messages from '../../messages';
+import './index.scss';
+export const CreditFaqBanner = () => {
+    const { formatMessage } = useIntl();
+    return (_jsx(Card, { className: "mb-3 mt-4 credit-faq-banner-card", "data-testid": "credit-faq-banner-card", children: _jsxs(Card.Section, { className: "p-4", children: [_jsx(Row, { children: _jsxs(Col, { xs: 12, children: [_jsx("h5", { className: "mb-1 font-weight-bold", "data-testid": "credit-faq-banner-title", children: formatMessage(messages.programProgressPathwaysCreditPathwayFaqTitle) }), _jsx("div", { className: "card-description", "data-testid": "credit-faq-banner-description", children: formatMessage(messages.programProgressPathwaysCreditPathwayFaqDescription) })] }) }), _jsx(Row, { className: "mt-3", children: _jsx(Col, { xs: 12, className: "d-flex justify-content-end", children: _jsx(Button, { variant: "primary", className: "mr-2 d-flex align-items-center", children: formatMessage(messages.programProgressPathwaysCreditPathwayFaqButton) }) }) })] }) }));
+};
+//# sourceMappingURL=index.js.map

package/dist/containers/ProgramDashboard/ProgramProgress/PathwaysTabData/CreditFaqBanner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/containers/ProgramDashboard/ProgramProgress/PathwaysTabData/CreditFaqBanner/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAE1D,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,eAAe,GAAO,GAAG,EAAE;IACtC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAC,kCAAkC,iBAAa,wBAAwB,YACrF,MAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAC,KAAK,aAC3B,KAAC,GAAG,cACF,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,aACT,aAAI,SAAS,EAAC,uBAAuB,iBAAa,yBAAyB,YAAE,aAAa,CAAC,QAAQ,CAAC,4CAA4C,CAAC,GAAM,EACvJ,cAAK,SAAS,EAAC,kBAAkB,iBAAa,+BAA+B,YAC1E,aAAa,CAAC,QAAQ,CAAC,kDAAkD,CAAC,GACvE,IACF,GACF,EAEN,KAAC,GAAG,IAAC,SAAS,EAAC,MAAM,YACnB,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,4BAA4B,YAKjD,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,SAAS,EAAC,gCAAgC,YACjE,aAAa,CAAC,QAAQ,CAAC,6CAA6C,CAAC,GAC/D,GACL,GACF,IACO,GACV,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useIntl } from '@openedx/frontend-base';\nimport { Card, Button, Row, Col } from '@openedx/paragon';\n\nimport messages from '../../messages';\nimport './index.scss';\n\nexport const CreditFaqBanner: FC = () => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Card className=\"mb-3 mt-4 credit-faq-banner-card\" data-testid=\"credit-faq-banner-card\">\n      <Card.Section className=\"p-4\">\n        <Row>\n          <Col xs={12}>\n            <h5 className=\"mb-1 font-weight-bold\" data-testid=\"credit-faq-banner-title\">{formatMessage(messages.programProgressPathwaysCreditPathwayFaqTitle)}</h5>\n            <div className=\"card-description\" data-testid=\"credit-faq-banner-description\">\n              {formatMessage(messages.programProgressPathwaysCreditPathwayFaqDescription)}\n            </div>\n          </Col>\n        </Row>\n\n        <Row className=\"mt-3\">\n          <Col xs={12} className=\"d-flex justify-content-end\">\n            {/**\n             * TODO: The button shown here does not do anything at the moment.\n             * ACTION ITEM: Wire this button to the appropriate URL when the FAQ page/link is known.\n            */}\n            <Button variant=\"primary\" className=\"mr-2 d-flex align-items-center\">\n              {formatMessage(messages.programProgressPathwaysCreditPathwayFaqButton)}\n            </Button>\n          </Col>\n        </Row>\n      </Card.Section>\n    </Card>\n  );\n};\n"]}

package/dist/containers/ProgramDashboard/ProgramProgress/PathwaysTabData/CreditFaqBanner/index.scss

@@ -0,0 +1,14 @@
+$title-color: #00262B !default;
+$subtitle-color: #454545 !default;
+
+.credit-faq-banner-card{
+  background-color: var(--pgn-color-light-200);
+
+  .h5{
+    color: $title-color;
+  }
+  
+  .card-description{
+    color: $subtitle-color;
+  }
+}

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

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

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIntl } from '@openedx/frontend-base';
+import { ProgressCard } from '../ProgressCard';
+import messages from '../messages';
+import { useProgressData } from '../../../../hooks/useProgressData';
+import { CreditFaqBanner } from './CreditFaqBanner';
+export const PathwaysTabData = () => {
+    const { programProgressData, isLoading } = useProgressData();
+    const creditPathwayData = programProgressData === null || programProgressData === void 0 ? void 0 : programProgressData.creditPathways;
+    const { formatMessage } = useIntl();
+    const progressCards = creditPathwayData === null || creditPathwayData === void 0 ? void 0 : creditPathwayData.map((pathway) => {
+        const { name: title, description, destinationUrl, uuid } = pathway;
+        const progressCardData = {
+            title: title,
+            description: description,
+            destinationUrl: destinationUrl,
+        };
+        return (_jsx(ProgressCard, { progressCardData: progressCardData, isLoading: isLoading, tabType: formatMessage(messages.programProgressPathwaysTab).toLowerCase() }, uuid));
+    });
+    return (_jsxs("div", { children: [_jsx("h5", { className: "pathways-tab-title", children: formatMessage(messages.programProgressPathwaysCreditPathwayTitle) }), _jsx("p", { className: "pb-3 mb-4 pathways-tab-description", children: formatMessage(messages.programProgressPathwaysCreditPathwayDescription, {
+                    br: '\n',
+                }) }), progressCards, _jsx(CreditFaqBanner, {})] }));
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/PathwaysTabData/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,CAAC,MAAM,eAAe,GAAO,GAAG,EAAE;IACtC,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,GAAG,eAAe,EAAE,CAAC;IAC7D,MAAM,iBAAiB,GAAG,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,cAAc,CAAC;IAC9D,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,aAAa,GAAG,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE;QACvD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC;QAEnE,MAAM,gBAAgB,GAAG;YACvB,KAAK,EAAE,KAAK;YACZ,WAAW,EAAE,WAAW;YACxB,cAAc,EAAE,cAAc;SAC/B,CAAC;QAEF,OAAO,CACL,KAAC,YAAY,IAEX,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,aAAa,CAAC,QAAQ,CAAC,0BAA0B,CAAC,CAAC,WAAW,EAAE,IAHpE,IAAI,CAIT,CACH,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,0BACE,aAAI,SAAS,EAAC,oBAAoB,YAAE,aAAa,CAAC,QAAQ,CAAC,yCAAyC,CAAC,GAAM,EAC3G,YAAG,SAAS,EAAC,oCAAoC,YAAE,aAAa,CAAC,QAAQ,CAAC,+CAA+C,EAAE;oBACzH,EAAE,EAAE,IAAI;iBACT,CAAC,GACE,EACH,aAAa,EACd,KAAC,eAAe,KAAG,IACf,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useIntl } from '@openedx/frontend-base';\nimport { ProgressCard } from '../ProgressCard';\nimport messages from '../messages';\nimport { useProgressData } from '@src/hooks/useProgressData';\nimport { CreditFaqBanner } from './CreditFaqBanner';\n\nexport const PathwaysTabData: FC = () => {\n  const { programProgressData, isLoading } = useProgressData();\n  const creditPathwayData = programProgressData?.creditPathways;\n  const { formatMessage } = useIntl();\n\n  const progressCards = creditPathwayData?.map((pathway) => {\n    const { name: title, description, destinationUrl, uuid } = pathway;\n\n    const progressCardData = {\n      title: title,\n      description: description,\n      destinationUrl: destinationUrl,\n    };\n\n    return (\n      <ProgressCard\n        key={uuid}\n        progressCardData={progressCardData}\n        isLoading={isLoading}\n        tabType={formatMessage(messages.programProgressPathwaysTab).toLowerCase()}\n      />\n    );\n  });\n\n  return (\n    <div>\n      <h5 className=\"pathways-tab-title\">{formatMessage(messages.programProgressPathwaysCreditPathwayTitle)}</h5>\n      <p className=\"pb-3 mb-4 pathways-tab-description\">{formatMessage(messages.programProgressPathwaysCreditPathwayDescription, {\n        br: '\\n',\n      })}\n      </p>\n      {progressCards}\n      <CreditFaqBanner />\n    </div>\n  );\n};\n"]}

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

@@ -6,6 +6,7 @@ import messages from '../messages';
 import { RemainingTabData } from '../RemainingTabData';
 import { CompletedTabData } from '../CompletedTabData';
 import { InProgressTabData } from '../InProgressTabData';
+import { PathwaysTabData } from '../PathwaysTabData';
 export const ProgramProgressTabs = ({ type, counts }) => {
     const { inProgress, remaining, completed } = counts;
     const { formatMessage } = useIntl();
@@ -32,7 +33,7 @@ export const ProgramProgressTabs = ({ type, counts }) => {
             ? [{
                     key: 'pathways',
                     title: formatMessage(messages.programProgressPathwaysTab),
-                    panel: _jsx("span", { children: "Pathways tab data will be available soon." }),
+                    panel: _jsx(PathwaysTabData, {}),
                 }]
             : []),
     ];