@edx/frontend-app-subscription-learner-dashboard 1.16.0 → 1.18.0

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/InProgressTabData/index.d.ts

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

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

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProgressData } from '../../../../hooks';
+import { useIntl } from '@openedx/frontend-base';
+import { ProgressCard } from '../ProgressCard';
+import messages from '../messages';
+export const InProgressTabData = () => {
+    var _a, _b, _c, _d;
+    const { programProgressData, isLoading } = useProgressData();
+    const { formatMessage } = useIntl();
+    const courseData = programProgressData === null || programProgressData === void 0 ? void 0 : programProgressData.courseData;
+    const remainingCount = ((_a = courseData === null || courseData === void 0 ? void 0 : courseData.notStarted) === null || _a === void 0 ? void 0 : _a.length) || 0;
+    const inProgressData = (courseData === null || courseData === void 0 ? void 0 : courseData.inProgress) || [];
+    const completedCount = ((_b = courseData === null || courseData === void 0 ? void 0 : courseData.completed) === null || _b === void 0 ? void 0 : _b.length) || 0;
+    const inProgressCount = inProgressData.length;
+    const programType = ((_c = programProgressData === null || programProgressData === void 0 ? void 0 : programProgressData.programData) === null || _c === void 0 ? void 0 : _c.type) || '';
+    const checkoutUrl = ((_d = programProgressData === null || programProgressData === void 0 ? void 0 : programProgressData.urls) === null || _d === void 0 ? void 0 : _d.buyButtonUrl) || '';
+    const inProgressTabType = formatMessage(messages.programProgressInProgressTab).toLowerCase();
+    const shouldShowRemainingMessage = !inProgressCount && remainingCount > 0;
+    const shouldShowCompletedMessage = !inProgressCount && !remainingCount && completedCount > 0;
+    const progressCards = inProgressData.map((course) => {
+        const courseRuns = course.courseRuns || [];
+        const [{ pacingType = '', start = '', end = '', courseUrl = '', upgradeUrl = '', seats = [] } = {}] = Array.isArray(courseRuns) ? courseRuns : [];
+        const progressCardData = {
+            title: course.title,
+            start: start,
+            end: end || '',
+            pacingType: pacingType,
+            courseUrl: courseUrl || '',
+            upgradeUrl: upgradeUrl || '',
+            programType: programType || '',
+            checkoutUrl: checkoutUrl || '',
+            seats: seats || [],
+            expired: course.expired || false, // using expired from course object to determine if the course is expired as per condition on confluence and learners dashboard code.
+        };
+        return (_jsx(ProgressCard, { progressCardData: progressCardData, isLoading: isLoading, tabType: inProgressTabType }, course.key));
+    });
+    return (_jsxs("div", { children: [_jsx("h5", { children: formatMessage(messages.programProgressInProgressCourse) }), inProgressCount > 0 ? (progressCards) : shouldShowRemainingMessage ? (_jsx("p", { children: formatMessage(messages.programProgressInProgressRemainingCourses) })) : shouldShowCompletedMessage ? (_jsx("p", { children: formatMessage(messages.programProgressInProgressCompletedCourses) })) : null] }));
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/InProgressTabData/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,MAAM,CAAC,MAAM,iBAAiB,GAAO,GAAG,EAAE;;IACxC,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,GAAG,eAAe,EAAE,CAAC;IAE7D,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,UAAU,GAAG,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,UAAU,CAAC;IACnD,MAAM,cAAc,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC;IAC3D,MAAM,cAAc,GAAG,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,KAAI,EAAE,CAAC;IACpD,MAAM,cAAc,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,SAAS,0CAAE,MAAM,KAAI,CAAC,CAAC;IAC1D,MAAM,eAAe,GAAG,cAAc,CAAC,MAAM,CAAC;IAC9C,MAAM,WAAW,GAAG,CAAA,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,WAAW,0CAAE,IAAI,KAAI,EAAE,CAAC;IACjE,MAAM,WAAW,GAAG,CAAA,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,IAAI,0CAAE,YAAY,KAAI,EAAE,CAAC;IAClE,MAAM,iBAAiB,GAAG,aAAa,CAAC,QAAQ,CAAC,4BAA4B,CAAC,CAAC,WAAW,EAAE,CAAC;IAE7F,MAAM,0BAA0B,GAAG,CAAC,eAAe,IAAI,cAAc,GAAG,CAAC,CAAC;IAC1E,MAAM,0BAA0B,GAAG,CAAC,eAAe,IAAI,CAAC,cAAc,IAAI,cAAc,GAAG,CAAC,CAAC;IAE7F,MAAM,aAAa,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;QAClD,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,IAAI,EAAE,CAAC;QAC3C,MAAM,CAAC,EAAE,UAAU,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,GAAG,EAAE,EAAE,SAAS,GAAG,EAAE,EAAE,UAAU,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;QAElJ,MAAM,gBAAgB,GAAG;YACvB,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,KAAK;YACZ,GAAG,EAAE,GAAG,IAAI,EAAE;YACd,UAAU,EAAE,UAAU;YACtB,SAAS,EAAE,SAAS,IAAI,EAAE;YAC1B,UAAU,EAAE,UAAU,IAAI,EAAE;YAC5B,WAAW,EAAE,WAAW,IAAI,EAAE;YAC9B,WAAW,EAAE,WAAW,IAAI,EAAE;YAC9B,KAAK,EAAE,KAAK,IAAI,EAAE;YAClB,OAAO,EAAE,MAAM,CAAC,OAAO,IAAI,KAAK,EAAE,qIAAqI;SACxK,CAAC;QAEF,OAAO,CACL,KAAC,YAAY,IAEX,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,iBAAiB,IAHrB,MAAM,CAAC,GAAG,CAIf,CACH,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,0BACE,uBAAK,aAAa,CAAC,QAAQ,CAAC,+BAA+B,CAAC,GAAM,EACjE,eAAe,GAAG,CAAC,CAAC,CAAC,CAAC,CACrB,aAAa,CACd,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAC/B,sBAAI,aAAa,CAAC,QAAQ,CAAC,yCAAyC,CAAC,GAAK,CAC3E,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,CAC/B,sBAAI,aAAa,CAAC,QAAQ,CAAC,yCAAyC,CAAC,GAAK,CAC3E,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useProgressData } from '@src/hooks';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { ProgressCard } from '../ProgressCard';\nimport messages from '../messages';\n\nexport const InProgressTabData: FC = () => {\n  const { programProgressData, isLoading } = useProgressData();\n\n  const { formatMessage } = useIntl();\n  const courseData = programProgressData?.courseData;\n  const remainingCount = courseData?.notStarted?.length || 0;\n  const inProgressData = courseData?.inProgress || [];\n  const completedCount = courseData?.completed?.length || 0;\n  const inProgressCount = inProgressData.length;\n  const programType = programProgressData?.programData?.type || '';\n  const checkoutUrl = programProgressData?.urls?.buyButtonUrl || '';\n  const inProgressTabType = formatMessage(messages.programProgressInProgressTab).toLowerCase();\n\n  const shouldShowRemainingMessage = !inProgressCount && remainingCount > 0;\n  const shouldShowCompletedMessage = !inProgressCount && !remainingCount && completedCount > 0;\n\n  const progressCards = inProgressData.map((course) => {\n    const courseRuns = course.courseRuns || [];\n    const [{ pacingType = '', start = '', end = '', courseUrl = '', upgradeUrl = '', seats = [] } = {}] = Array.isArray(courseRuns) ? courseRuns : [];\n\n    const progressCardData = {\n      title: course.title,\n      start: start,\n      end: end || '',\n      pacingType: pacingType,\n      courseUrl: courseUrl || '',\n      upgradeUrl: upgradeUrl || '',\n      programType: programType || '',\n      checkoutUrl: checkoutUrl || '',\n      seats: seats || [],\n      expired: course.expired || false, // using expired from course object to determine if the course is expired as per condition on confluence and learners dashboard code.\n    };\n\n    return (\n      <ProgressCard\n        key={course.key}\n        progressCardData={progressCardData}\n        isLoading={isLoading}\n        tabType={inProgressTabType}\n      />\n    );\n  });\n\n  return (\n    <div>\n      <h5>{formatMessage(messages.programProgressInProgressCourse)}</h5>\n      {inProgressCount > 0 ? (\n        progressCards\n      ) : shouldShowRemainingMessage ? (\n        <p>{formatMessage(messages.programProgressInProgressRemainingCourses)}</p>\n      ) : shouldShowCompletedMessage ? (\n        <p>{formatMessage(messages.programProgressInProgressCompletedCourses)}</p>\n      ) : null}\n    </div>\n  );\n};\n"]}

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

@@ -5,6 +5,7 @@ import { useIntl } from '@openedx/frontend-base';
 import messages from '../messages';
 import { RemainingTabData } from '../RemainingTabData';
 import { CompletedTabData } from '../CompletedTabData';
+import { InProgressTabData } from '../InProgressTabData';
 export const ProgramProgressTabs = ({ type, counts }) => {
     const { inProgress, remaining, completed } = counts;
     const { formatMessage } = useIntl();
@@ -13,7 +14,7 @@ export const ProgramProgressTabs = ({ type, counts }) => {
             key: 'in-progress',
             title: formatMessage(messages.programProgressInProgressTab),
             count: inProgress,
-            panel: _jsx("span", { children: "In progress tab data will be available soon." }),
+            panel: _jsx(InProgressTabData, {}),
         },
         {
             key: 'remaining',

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgressTabs/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE;IACpF,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC;IACpD,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,QAAQ,GAA8B;QAC1C;YACE,GAAG,EAAE,aAAa;YAClB,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,4BAA4B,CAAC;YAC3D,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,0EAAyD;SACjE;QACD;YACE,GAAG,EAAE,WAAW;YAChB,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC;YAC1D,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,KAAC,gBAAgB,KAAG;SAC5B;QACD;YACE,GAAG,EAAE,WAAW;YAChB,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC;YAC1D,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,KAAC,gBAAgB,KAAG;SAC5B;QACD,GAAG,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,EAAE,MAAK,cAAc;YACxC,CAAC,CAAC,CAAC;oBACC,GAAG,EAAE,UAAU;oBACf,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,0BAA0B,CAAC;oBACzD,KAAK,EAAE,uEAAsD;iBAC9D,CAAC;YACJ,CAAC,CAAC,EAAE,CAAC;KACR,CAAC;IAEF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IAEpE,MAAM,eAAe,GAAG,CAAC,MAAqB,EAAE,EAAE;QAChD,IAAI,MAAM;YAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAC,uBAAuB,EAC1B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,eAAe,EACzB,SAAS,EAAC,MAAM,EAChB,YAAY,kBAEX,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACnB,KAAC,GAAG,IAAC,QAAQ,EAAE,GAAG,CAAC,GAAG,EAAgB,KAAK,EAAE,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,YAC7G,GAAG,CAAC,KAAK,IADiB,GAAG,CAAC,GAAG,CAE9B,CACP,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC, useState } from 'react';\nimport { Tabs, Tab } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { ProgramProgressTabsProps, ProgramProgressTabItems } from '../../data/types';\nimport messages from '../messages';\nimport { RemainingTabData } from '../RemainingTabData';\nimport { CompletedTabData } from '../CompletedTabData';\n\nexport const ProgramProgressTabs: FC<ProgramProgressTabsProps> = ({ type, counts }) => {\n  const { inProgress, remaining, completed } = counts;\n  const { formatMessage } = useIntl();\n\n  const tabsData: ProgramProgressTabItems[] = [\n    {\n      key: 'in-progress',\n      title: formatMessage(messages.programProgressInProgressTab),\n      count: inProgress,\n      panel: <span>In progress tab data will be available soon.</span>,\n    },\n    {\n      key: 'remaining',\n      title: formatMessage(messages.programProgressRemainingTab),\n      count: remaining,\n      panel: <RemainingTabData />,\n    },\n    {\n      key: 'completed',\n      title: formatMessage(messages.programProgressCompletedTab),\n      count: completed,\n      panel: <CompletedTabData />,\n    },\n    ...(type?.toLowerCase() === 'micromasters'\n      ? [{\n          key: 'pathways',\n          title: formatMessage(messages.programProgressPathwaysTab),\n          panel: <span>Pathways tab data will be available soon.</span>,\n        }]\n      : []),\n  ];\n\n  const [activeTab, setActiveTab] = useState<string>(tabsData[0].key);\n\n  const handleTabSelect = (tabKey: string | null) => {\n    if (tabKey) setActiveTab(tabKey);\n  };\n\n  return (\n    <Tabs\n      id=\"program-progress-tabs\"\n      activeKey={activeTab}\n      onSelect={handleTabSelect}\n      className=\"mb-4\"\n      mountOnEnter\n    >\n      {tabsData.map(tab => (\n        <Tab eventKey={tab.key} key={tab.key} title={tab.count !== undefined ? `${tab.title} (${tab.count})` : tab.title}>\n          {tab.panel}\n        </Tab>\n      ))}\n    </Tabs>\n  );\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgressTabs/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE;IACpF,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC;IACpD,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,QAAQ,GAA8B;QAC1C;YACE,GAAG,EAAE,aAAa;YAClB,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,4BAA4B,CAAC;YAC3D,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,KAAC,iBAAiB,KAAG;SAC7B;QACD;YACE,GAAG,EAAE,WAAW;YAChB,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC;YAC1D,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,KAAC,gBAAgB,KAAG;SAC5B;QACD;YACE,GAAG,EAAE,WAAW;YAChB,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC;YAC1D,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,KAAC,gBAAgB,KAAG;SAC5B;QACD,GAAG,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,EAAE,MAAK,cAAc;YACxC,CAAC,CAAC,CAAC;oBACC,GAAG,EAAE,UAAU;oBACf,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,0BAA0B,CAAC;oBACzD,KAAK,EAAE,uEAAsD;iBAC9D,CAAC;YACJ,CAAC,CAAC,EAAE,CAAC;KACR,CAAC;IAEF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IAEpE,MAAM,eAAe,GAAG,CAAC,MAAqB,EAAE,EAAE;QAChD,IAAI,MAAM;YAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAC,uBAAuB,EAC1B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,eAAe,EACzB,SAAS,EAAC,MAAM,EAChB,YAAY,kBAEX,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACnB,KAAC,GAAG,IAAC,QAAQ,EAAE,GAAG,CAAC,GAAG,EAAgB,KAAK,EAAE,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,YAC7G,GAAG,CAAC,KAAK,IADiB,GAAG,CAAC,GAAG,CAE9B,CACP,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC, useState } from 'react';\nimport { Tabs, Tab } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { ProgramProgressTabsProps, ProgramProgressTabItems } from '../../data/types';\nimport messages from '../messages';\nimport { RemainingTabData } from '../RemainingTabData';\nimport { CompletedTabData } from '../CompletedTabData';\nimport { InProgressTabData } from '../InProgressTabData';\n\nexport const ProgramProgressTabs: FC<ProgramProgressTabsProps> = ({ type, counts }) => {\n  const { inProgress, remaining, completed } = counts;\n  const { formatMessage } = useIntl();\n\n  const tabsData: ProgramProgressTabItems[] = [\n    {\n      key: 'in-progress',\n      title: formatMessage(messages.programProgressInProgressTab),\n      count: inProgress,\n      panel: <InProgressTabData />,\n    },\n    {\n      key: 'remaining',\n      title: formatMessage(messages.programProgressRemainingTab),\n      count: remaining,\n      panel: <RemainingTabData />,\n    },\n    {\n      key: 'completed',\n      title: formatMessage(messages.programProgressCompletedTab),\n      count: completed,\n      panel: <CompletedTabData />,\n    },\n    ...(type?.toLowerCase() === 'micromasters'\n      ? [{\n          key: 'pathways',\n          title: formatMessage(messages.programProgressPathwaysTab),\n          panel: <span>Pathways tab data will be available soon.</span>,\n        }]\n      : []),\n  ];\n\n  const [activeTab, setActiveTab] = useState<string>(tabsData[0].key);\n\n  const handleTabSelect = (tabKey: string | null) => {\n    if (tabKey) setActiveTab(tabKey);\n  };\n\n  return (\n    <Tabs\n      id=\"program-progress-tabs\"\n      activeKey={activeTab}\n      onSelect={handleTabSelect}\n      className=\"mb-4\"\n      mountOnEnter\n    >\n      {tabsData.map(tab => (\n        <Tab eventKey={tab.key} key={tab.key} title={tab.count !== undefined ? `${tab.title} (${tab.count})` : tab.title}>\n          {tab.panel}\n        </Tab>\n      ))}\n    </Tabs>\n  );\n};\n"]}

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

@@ -6,9 +6,15 @@ import './index.scss';
 import { ProgressCardActions } from '../ProgressCardActions';
 import { dateFormatter } from '../../../../utils/dateFormatter';
 import { ProgressCardButton } from '../ProgressCardActions/ProgressCardButton';
+import { PROGRAM_TYPE_MAP } from '../../data/constants';
+import { getCertificatePriceString } from '../../data/util';
 export const ProgressCard = ({ progressCardData, isLoading, tabType }) => {
     const { formatMessage, formatDate } = useIntl();
-    const { title, pacingType, start, end, certificateUrl, courseUrl } = progressCardData;
+    const { title, pacingType, start, end, certificateUrl, courseUrl, upgradeUrl, programType, checkoutUrl, expired, seats } = progressCardData;
+    const inProgressTabKey = formatMessage(messages.programProgressInProgressTab).toLowerCase();
+    const isInProgressTab = tabType === inProgressTabKey;
+    const isProfessionalProgram = programType === PROGRAM_TYPE_MAP.PROFESSIONAL_CERTIFICATE;
+    const isMicroMastersProgram = programType === PROGRAM_TYPE_MAP.MICROMASTERS;
     /*
       - Formatting pacing type safely
       - replace underscores with spaces
@@ -30,8 +36,20 @@ export const ProgressCard = ({ progressCardData, isLoading, tabType }) => {
             ? `${enrollmentInfo} ${formatMessage(messages.programProgressCardStartText)} ${startDate}`
             : `${formatMessage(messages.programProgressCardStartText)} ${startDate}`;
     }
+    // using expired key from course object to determine if the course is expired as per condition on confluence and learners dashboard code.
+    const canUpgrade = Boolean(upgradeUrl) && !expired;
     return (_jsx(Card, { className: "progress-card mb-3", "data-testid": "progress-card", isLoading: isLoading, children: _jsxs(Card.Section, { className: "pt-3 pb-2 px-4", children: [_jsxs(Row, { className: "mb-2", children: [_jsxs(Col, { xs: 12, children: [_jsx("h4", { className: "mb-1 font-weight-bold", children: title }), _jsx("div", { className: "text-muted", children: enrollmentInfo })] }), _jsx(ProgressCardActions, { tabType: tabType, redirectUrl: courseUrl })] }), tabType === (formatMessage(messages.programProgressCompletedTab).toLowerCase()) && (_jsx(Row, { className: "pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center", children: _jsxs(Col, { xs: 12, className: "d-flex justify-content-between align-items-center px-0", children: [_jsx("span", { className: "text-start", children: end && (formatMessage(messages.programProgressCardCompletedCertificateText, {
                                     certificateDate: (end ? dateFormatter(formatDate, end, 'short') : ''),
-                                })) }), _jsx(ProgressCardButton, { variant: "brand", redirectUrl: certificateUrl || '', buttonText: formatMessage(messages.programProgressCardCompletedCertificateButton) })] }) }))] }) }));
+                                })) }), _jsx(ProgressCardButton, { variant: "brand", redirectUrl: certificateUrl || '', buttonText: formatMessage(messages.programProgressCardCompletedCertificateButton) })] }) })), isInProgressTab && (_jsx(Row, { className: "pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center", children: _jsxs(Col, { xs: 12, className: "d-flex justify-content-between align-items-center px-0", children: [_jsx("span", { className: "text-start", children: formatMessage(messages.programProgressInProgressCertificateStatus, {
+                                    status: canUpgrade ? formatMessage(messages.programProgressInProgressCertificateNeedsVerified) : formatMessage(messages.programProgressInProgressCertificateNotEarned), // TODO : Certificate status will change after Upgrade is successful through api
+                                }) }), isProfessionalProgram
+                                && canUpgrade
+                                && getCertificatePriceString(seats)
+                                && (_jsx(ProgressCardButton, { variant: "brand", redirectUrl: "", buttonText: formatMessage(messages.programProgressCardUpgradeButton), type: "upgrade", title: title, price: getCertificatePriceString(seats), courseUrl: courseUrl })), isMicroMastersProgram
+                                && checkoutUrl
+                                && canUpgrade
+                                && (_jsx(ProgressCardButton, { variant: "brand", redirectUrl: checkoutUrl, buttonText: formatMessage(messages.programProgressInProgressCourseMicromastersUpgrade, {
+                                        price: getCertificatePriceString(seats, true),
+                                    }) }))] }) }))] }) }));
 };
 //# sourceMappingURL=index.js.map