@edx/frontend-app-subscription-learner-dashboard 1.23.0 → 1.25.0

package/dist/containers/Dashboard/index.js

@@ -7,27 +7,28 @@ import SelectSessionModal from '../../containers/SelectSessionModal';
 import { DashboardContent } from './DashboardContent';
 import DashboardModalSlot from '../../slots/DashboardModalSlot';
 import PopularCoursePanel from '../PopularCoursePanel';
+import PopularProgramsPanel from '../PopularProgramsPanel';
 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';
 import DashboardHeroSlot from '../../slots/DashboardHeroSlot';
 export const Dashboard = () => {
-    var _a, _b, _c;
+    var _a, _b;
     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 learnerSubscriptionData = (learnerData === null || learnerData === void 0 ? void 0 : learnerData.userSubscription) || {};
+    const userSubscriptionStartDate = (learnerSubscriptionData === null || learnerSubscriptionData === void 0 ? void 0 : learnerSubscriptionData.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 = ((_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;
+    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;
     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(DashboardHeader, { startDate: userSubscriptionStartDate }), _jsx(SubscriptionBanner, {}), _jsx(DashboardTitle, {}), _jsx(DashboardHeroSlot, {}), _jsx(DashboardContent, { hasCourseHistory: hasCourseHistory }), _jsx(PopularCoursePanel, {})] })) })] }) }) }));
+                            : (_jsxs(DashboardLayout, { children: [_jsx(DashboardHeader, { startDate: userSubscriptionStartDate }), _jsx(SubscriptionBanner, { learnerSubscriptionData: learnerSubscriptionData }), _jsx(DashboardHeroSlot, {}), _jsx(DashboardContent, { hasCourseHistory: hasCourseHistory }), _jsx(PopularCoursePanel, {}), _jsx(PopularProgramsPanel, {})] })) })] }) }) }));
 };
 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;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;AAC7D,OAAO,iBAAiB,MAAM,8BAA8B,CAAC;AAG7D,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,iBAAiB,KAAG,EACrB,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';\nimport DashboardHeroSlot from '@src/slots/DashboardHeroSlot';\n\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                  <DashboardHeroSlot />\n                  <DashboardContent hasCourseHistory={hasCourseHistory} />\n                  <PopularCoursePanel />\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":"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","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';\nimport PopularProgramsPanel from '../PopularProgramsPanel';\n\nimport LoadingView from './LoadingView';\nimport DashboardLayout from './DashboardLayout';\n\nimport hooks from './hooks';\nimport './index.scss';\nimport { SubscriptionBanner } from '../SubscriptionBanner';\nimport { useInitializeSubsDashboard } from '@src/data/hooks';\nimport DashboardHeroSlot from '@src/slots/DashboardHeroSlot';\n\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 learnerSubscriptionData = learnerData?.userSubscription || {};\n  const userSubscriptionStartDate = learnerSubscriptionData?.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 learnerSubscriptionData={learnerSubscriptionData} />\n                  <DashboardHeroSlot />\n                  <DashboardContent hasCourseHistory={hasCourseHistory} />\n                  <PopularCoursePanel />\n                  <PopularProgramsPanel />\n                </DashboardLayout>\n              )}\n          </div>\n        </div>\n      </main>\n    </div>\n  );\n};\n\nexport default Dashboard;\n"]}

package/dist/containers/PopularCoursePanel/index.js

@@ -2,15 +2,16 @@ 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 { usePopularCoursesAndProgramsData } from '../../hooks/usePopularCoursesAndPrograms';
 import { useAlgoliaSearch } from '../../utils/algoliaUtils';
 import messages from './messages';
 import NoPopularCourseItems from './NoPopularCourseItems';
 import PopularCourses from './PopularCourses';
+import { PRODUCT_TYPE_COURSE } from '../../constants';
 export const PopularCoursePanel = () => {
     const { formatMessage } = useIntl();
     const [searchClient] = useAlgoliaSearch();
-    const { data: popularCoursesData = [], isError, isLoading, } = usePopularCoursesData(searchClient, true);
+    const { data: popularCoursesData = [], isError, isLoading, } = usePopularCoursesAndProgramsData(searchClient, true, PRODUCT_TYPE_COURSE);
     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) }) }));

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

@@ -1 +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"]}
+{"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,gCAAgC,EAAE,MAAM,yCAAyC,CAAC;AAC3F,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;AAC9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,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,gCAAgC,CAAC,YAAY,EAAE,IAAI,EAAE,mBAAmB,CAAC,CAAC;IAC9E,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 { usePopularCoursesAndProgramsData } from '@src/hooks/usePopularCoursesAndPrograms';\nimport { useAlgoliaSearch } from '@src/utils/algoliaUtils';\nimport messages from './messages';\nimport NoPopularCourseItems from './NoPopularCourseItems';\nimport PopularCourses from './PopularCourses';\nimport { PRODUCT_TYPE_COURSE } from '@src/constants';\n\nexport const PopularCoursePanel: FC = () => {\n  const { formatMessage } = useIntl();\n  const [searchClient] = useAlgoliaSearch();\n  const {\n    data: popularCoursesData = [],\n    isError,\n    isLoading,\n  } = usePopularCoursesAndProgramsData(searchClient, true, PRODUCT_TYPE_COURSE);\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/PopularProgramsPanel/NoPopularProgramItems/index.d.ts

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

package/dist/containers/PopularProgramsPanel/NoPopularProgramItems/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 NoPopularProgramItems = () => {
+    const { formatMessage } = useIntl();
+    return (_jsx("div", { "data-testid": "no-popular-program-items", children: _jsx("p", { className: "mb-0", children: formatMessage(messages.popularProgramEmptyState) }) }));
+};
+export default NoPopularProgramItems;
+//# sourceMappingURL=index.js.map

package/dist/containers/PopularProgramsPanel/NoPopularProgramItems/index.js.map

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

package/dist/containers/PopularProgramsPanel/NoPopularProgramItems/messages.d.ts

@@ -0,0 +1,8 @@
+declare const messages: {
+    popularProgramEmptyState: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/containers/PopularProgramsPanel/NoPopularProgramItems/messages.js

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

package/dist/containers/PopularProgramsPanel/NoPopularProgramItems/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../src/containers/PopularProgramsPanel/NoPopularProgramItems/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,wBAAwB,EAAE;QACxB,EAAE,EAAE,0CAA0C;QAC9C,cAAc,EAAE,+EAA+E;QAC/F,WAAW,EAAE,+CAA+C;KAC7D;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  popularProgramEmptyState: {\n    id: 'subs-dash.popularProgramPanel.emptyState',\n    defaultMessage: 'When you browse the edX Unlimited catalog, we\\'ll show popular programs here.',\n    description: 'Placeholder text for popular programs section',\n  }\n});\n\nexport default messages;\n"]}

package/dist/containers/PopularProgramsPanel/PopularPrograms/index.d.ts

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

package/dist/containers/PopularProgramsPanel/PopularPrograms/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ProductCard } from '../../ProductCard';
+export const PopularPrograms = ({ items, isLoading }) => {
+    return (_jsx("div", { "data-testid": "popular-programs-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 PopularPrograms;
+//# sourceMappingURL=index.js.map

package/dist/containers/PopularProgramsPanel/PopularPrograms/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/containers/PopularProgramsPanel/PopularPrograms/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,MAAM,CAAC,MAAM,eAAe,GAA6B,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IAChF,OAAO,CACL,6BAAiB,wBAAwB,YACvC,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,eAAe,CAAC","sourcesContent":["import { FC } from 'react';\n\nimport { ProductCard } from '../../ProductCard';\nimport { PopularProgramsProps } from './data/types';\n\nexport const PopularPrograms: FC<PopularProgramsProps> = ({ items, isLoading }) => {\n  return (\n    <div data-testid=\"popular-programs-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 PopularPrograms;\n"]}

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

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

package/dist/containers/PopularProgramsPanel/index.js

@@ -0,0 +1,22 @@
+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 { usePopularCoursesAndProgramsData } from '../../hooks/usePopularCoursesAndPrograms';
+import { useAlgoliaSearch } from '../../utils/algoliaUtils';
+import messages from './messages';
+import NoPopularProgramItems from './NoPopularProgramItems';
+import PopularPrograms from './PopularPrograms';
+import { PRODUCT_TYPE_PROGRAM } from '../../constants';
+export const PopularProgramsPanel = () => {
+    const { formatMessage } = useIntl();
+    const [searchClient] = useAlgoliaSearch();
+    const { data: popularProgramsData = [], isError, isLoading, } = usePopularCoursesAndProgramsData(searchClient, true, PRODUCT_TYPE_PROGRAM);
+    const hasPopularProgramsData = useMemo(() => popularProgramsData.length > 0, [popularProgramsData]);
+    if (isError) {
+        return (_jsx("div", { className: "popular-programs-container mt-5 mb-3", "data-testid": "popular-programs-panel", children: _jsx(Alert, { variant: "danger", "data-testid": "popular-programs-error", children: formatMessage(messages.popularProgramsErrorText) }) }));
+    }
+    return (_jsxs("div", { className: "popular-programs-container mt-5 mb-3", "data-testid": "popular-programs-panel", children: [_jsx("div", { className: "popular-programs-heading-container mb-4", children: _jsx("h2", { children: formatMessage(messages.popularProgramsHeader) }) }), (isLoading || hasPopularProgramsData) ? (_jsx(PopularPrograms, { items: popularProgramsData, isLoading: isLoading })) : (_jsx(NoPopularProgramItems, {}))] }));
+};
+export default PopularProgramsPanel;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/PopularProgramsPanel/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,gCAAgC,EAAE,MAAM,yCAAyC,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,qBAAqB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,oBAAoB,GAAO,GAAG,EAAE;IAC3C,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,CAAC,YAAY,CAAC,GAAG,gBAAgB,EAAE,CAAC;IAC1C,MAAM,EACJ,IAAI,EAAE,mBAAmB,GAAG,EAAE,EAC9B,OAAO,EACP,SAAS,GACV,GAAG,gCAAgC,CAAC,YAAY,EAAE,IAAI,EAAE,oBAAoB,CAAC,CAAC;IAC/E,MAAM,sBAAsB,GAAG,OAAO,CACpC,GAAG,EAAE,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC,EACpC,CAAC,mBAAmB,CAAC,CACtB,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,cAAK,SAAS,EAAC,sCAAsC,iBAAa,wBAAwB,YACxF,KAAC,KAAK,IAAC,OAAO,EAAC,QAAQ,iBAAa,wBAAwB,YACzD,aAAa,CAAC,QAAQ,CAAC,wBAAwB,CAAC,GAC3C,GACJ,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,sCAAsC,iBAAa,wBAAwB,aACxF,cAAK,SAAS,EAAC,yCAAyC,YACtD,uBAAK,aAAa,CAAC,QAAQ,CAAC,qBAAqB,CAAC,GAAM,GACpD,EACL,CAAC,SAAS,IAAI,sBAAsB,CAAC,CAAC,CAAC,CAAC,CACvC,KAAC,eAAe,IACd,KAAK,EAAE,mBAAmB,EAC1B,SAAS,EAAE,SAAS,GACpB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,qBAAqB,KAAG,CAC1B,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { FC, useMemo } from 'react';\nimport { Alert } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { usePopularCoursesAndProgramsData } from '@src/hooks/usePopularCoursesAndPrograms';\nimport { useAlgoliaSearch } from '@src/utils/algoliaUtils';\nimport messages from './messages';\nimport NoPopularProgramItems from './NoPopularProgramItems';\nimport PopularPrograms from './PopularPrograms';\nimport { PRODUCT_TYPE_PROGRAM } from '@src/constants';\n\nexport const PopularProgramsPanel: FC = () => {\n  const { formatMessage } = useIntl();\n  const [searchClient] = useAlgoliaSearch();\n  const {\n    data: popularProgramsData = [],\n    isError,\n    isLoading,\n  } = usePopularCoursesAndProgramsData(searchClient, true, PRODUCT_TYPE_PROGRAM);\n  const hasPopularProgramsData = useMemo(\n    () => popularProgramsData.length > 0,\n    [popularProgramsData]\n  );\n\n  if (isError) {\n    return (\n      <div className=\"popular-programs-container mt-5 mb-3\" data-testid=\"popular-programs-panel\">\n        <Alert variant=\"danger\" data-testid=\"popular-programs-error\">\n          {formatMessage(messages.popularProgramsErrorText)}\n        </Alert>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"popular-programs-container mt-5 mb-3\" data-testid=\"popular-programs-panel\">\n      <div className=\"popular-programs-heading-container mb-4\">\n        <h2>{formatMessage(messages.popularProgramsHeader)}</h2>\n      </div>\n      {(isLoading || hasPopularProgramsData) ? (\n        <PopularPrograms\n          items={popularProgramsData}\n          isLoading={isLoading}\n        />\n      ) : (\n        <NoPopularProgramItems />\n      )}\n    </div>\n  );\n};\n\nexport default PopularProgramsPanel;\n"]}

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

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

package/dist/containers/PopularProgramsPanel/messages.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/PopularProgramsPanel/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,qBAAqB,EAAE;QACrB,EAAE,EAAE,uCAAuC;QAC3C,cAAc,EAAE,kBAAkB;QAClC,WAAW,EAAE,wCAAwC;KACtD;IACD,wBAAwB,EAAE;QACxB,EAAE,EAAE,0CAA0C;QAC9C,cAAc,EAAE,0DAA0D;QAC1E,WAAW,EAAE,iDAAiD;KAC/D;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  popularProgramsHeader: {\n    id: 'subs-dash.popularProgramsPanel.header',\n    defaultMessage: 'Popular programs',\n    description: 'Label for the popular programs section',\n  },\n  popularProgramsErrorText: {\n    id: 'subs-dash.popularProgramsPanel.errorText',\n    defaultMessage: 'Failed to load popular programs. Please try again later.',\n    description: 'Error text for failing to load popular programs',\n  },\n});\n\nexport default messages;\n"]}

package/dist/containers/ProductCard/index.js

@@ -7,6 +7,6 @@ import cardFallbackImg from '@openedx/brand-openedx/paragon/images/card-imagecap
 import messages from './messages';
 export const ProductCard = ({ item, isLoading }) => {
     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] })] }));
+    return (_jsxs(Card, { className: "shadow-sm d-flex flex-column rounded w-100 overflow-hidden card-container", variant: "light", "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,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"]}
+{"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,EAAC,OAAO,iBACH,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=\"light\"\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/SubscriptionBanner/components/SubscriptionBanner.d.ts

@@ -1,2 +1,3 @@
 import { FC } from 'react';
-export declare const SubscriptionBanner: FC;
+import { BannerItem } from '../types';
+export declare const SubscriptionBanner: FC<BannerItem>;

package/dist/containers/SubscriptionBanner/components/SubscriptionBanner.js

@@ -8,84 +8,82 @@ import { utilHooks } from '../../../hooks';
 import messages from '../messages';
 import { subscriptionRenewalURL, checkoutPageURL } from '../../../data/constants/app';
 import { Link } from 'react-router-dom';
-// TODO: We can replace the below hardcoded subscriptionBannerData with the actual data from the API once we have the API ready.
-// For now, we can use this hardcoded data to test the SubscriptionBanner component.
-// Refer to https://2u-internal.atlassian.net/browse/SUBS-442 for more details on the API integration.
-// And https://github.com/edx/frontend-app-subscription-learner-dashboard/pull/2#discussion_r3139442324 for the implementation details of the API integration.
-// Test cases for the trial case are already written in the SubscriptionBanner.test.tsx file. We can update the test cases to use the actual API data once we have the API ready.
-const subscriptionBannerData = {
-    isSubscribed: true,
-    status: 'trial', // can be 'active', 'cancelled', 'renewalFailed'
-    subscriptionStartDate: '2026-05-22',
-    subscriptionEndDate: '2026-07-22',
-    subscriptionRenewalDate: '2026-07-22',
-    subscriptionRenewalPrice: '$36',
-};
-export const SubscriptionBanner = () => {
-    var _a;
+export const SubscriptionBanner = ({ learnerSubscriptionData }) => {
     const { formatMessage } = useIntl();
     const [showPageBanner, setShowPageBanner] = useState(true);
     const [bannerBody, setBannerBody] = useState('');
     const [bannerTitle, setBannerTitle] = useState('');
     const [bannerVariant, setBannerVariant] = useState(undefined);
     const formatDate = utilHooks.useFormatDate();
+    const { status, subscriptionEndDate, subscriptionRenewalDate, subscriptionStartDate } = learnerSubscriptionData;
     useEffect(() => {
-        const trialEndDate = moment(subscriptionBannerData.subscriptionEndDate).startOf('day');
+        const trialEndDate = moment(subscriptionEndDate).startOf('day');
         const today = moment().startOf('day');
         const trialDaysLeft = trialEndDate.isValid()
             ? Math.max(0, trialEndDate.diff(today, 'days'))
             : 0;
-        switch (subscriptionBannerData.status) {
-            case 'active':
-                setBannerVariant('success');
-                setBannerTitle(formatMessage(messages.activeSubscriptionTitle));
-                setBannerBody(formatMessage(messages.activeSubscriptionBody, {
-                    subscriptionRenewalDate: formatDate(subscriptionBannerData.subscriptionRenewalDate),
-                }));
-                break;
-            case 'trial':
-                setBannerVariant('success');
-                if (trialDaysLeft === 0) {
-                    setBannerTitle(formatMessage(messages.activeTrialSubscriptionTitleToday));
-                }
-                else if (trialDaysLeft === 1) {
-                    setBannerTitle(formatMessage(messages.activeTrialSubscriptionTitleTomorrow));
-                }
-                else {
-                    setBannerTitle(formatMessage(messages.activeTrialSubscriptionTitle, {
-                        daysLeft: trialDaysLeft,
+        if (status !== undefined && status !== null) {
+            switch (status) {
+                case 'ACTIVE':
+                    /**
+                     * TODO : Since we do not have screen for ACTIVE case, we are hiding the banner
+                     */
+                    setShowPageBanner(false);
+                    break;
+                case 'TRIAL_ACTIVE':
+                    setBannerVariant('success');
+                    if (trialDaysLeft === 0) {
+                        setBannerTitle(formatMessage(messages.activeTrialSubscriptionTitleToday));
+                    }
+                    else if (trialDaysLeft === 1) {
+                        setBannerTitle(formatMessage(messages.activeTrialSubscriptionTitleTomorrow));
+                    }
+                    else if (moment(subscriptionStartDate).isValid() && moment(subscriptionStartDate).isSame(moment(), 'day')) {
+                        setBannerTitle(formatMessage(messages.activeSubscriptionTitle));
+                        setBannerBody(formatMessage(messages.activeSubscriptionBody, {
+                            subscriptionRenewalDate: formatDate(subscriptionRenewalDate),
+                        }));
+                        return;
+                    }
+                    else {
+                        setBannerTitle(formatMessage(messages.activeTrialSubscriptionTitle, {
+                            daysLeft: trialDaysLeft,
+                        }));
+                    }
+                    setBannerBody(formatMessage(messages.activeTrialSubscriptionBody, {
+                        subscriptionEndDate: formatDate(subscriptionEndDate),
+                    }));
+                    break;
+                case 'CANCELLED':
+                    setBannerVariant('light');
+                    setBannerTitle(formatMessage(messages.cancelledSubscriptionTitle));
+                    setBannerBody(formatMessage(messages.cancelledSubscriptionBody, {
+                        subscriptionEndDate: formatDate(subscriptionEndDate),
+                    }));
+                    break;
+                case 'RENEWAL_FAILED': // also known as 'Payment Error' in figma designs
+                    setBannerVariant('light');
+                    setBannerTitle(formatMessage(messages.renewalFailedTitle));
+                    setBannerBody(formatMessage(messages.renewalFailedBody, {
+                        subscriptionRenewalDate: formatDate(subscriptionRenewalDate),
                     }));
-                }
-                setBannerBody(formatMessage(messages.activeTrialSubscriptionBody, {
-                    subscriptionEndDate: formatDate(subscriptionBannerData.subscriptionEndDate),
-                }));
-                break;
-            case 'cancelled':
-                setBannerVariant('light');
-                setBannerTitle(formatMessage(messages.cancelledSubscriptionTitle));
-                setBannerBody(formatMessage(messages.cancelledSubscriptionBody, {
-                    subscriptionEndDate: formatDate(subscriptionBannerData.subscriptionEndDate),
-                }));
-                break;
-            case 'renewalFailed': // also known as 'Payment Error' in figma designs
-                setBannerVariant('light');
-                setBannerTitle(formatMessage(messages.renewalFailedTitle));
-                setBannerBody(formatMessage(messages.renewalFailedBody, {
-                    subscriptionRenewalDate: formatDate(subscriptionBannerData.subscriptionRenewalDate),
-                }));
-                break;
-            default:
-                setShowPageBanner(false);
-                break;
+                    break;
+                default:
+                    setShowPageBanner(false);
+                    break;
+            }
+        }
+        else {
+            setShowPageBanner(false);
         }
-    }, [formatDate, formatMessage]);
+    }, [formatDate, formatMessage, status, subscriptionEndDate, subscriptionRenewalDate, subscriptionStartDate]);
     const getSubscriptionAction = useMemo(() => {
-        if (subscriptionBannerData.status === 'cancelled') {
+        if (status === 'CANCELLED') {
             return ([
                 _jsx(Button, { "data-testid": "renew-button", className: "renew-button", variant: "primary", href: subscriptionRenewalURL, target: "_blank", rel: "noopener noreferrer", role: "link", children: formatMessage(messages.renewSubscriptionButton) }, "renew-subscription"),
             ]);
         }
-        else if (subscriptionBannerData.status === 'renewalFailed') {
+        else if (status === 'RENEWAL_FAILED') {
             return ([
                 _jsx(Button, { "data-testid": "renew-failed-button", className: "renew-failed-button", variant: "primary", to: checkoutPageURL, target: "_blank", rel: "noopener noreferrer", role: "link", as: Link, children: formatMessage(messages.renewalFailedButton) }, "renew-failed-subscription"),
             ]);
@@ -93,11 +91,15 @@ export const SubscriptionBanner = () => {
         else {
             return [];
         }
-    }, [formatMessage]);
+    }, [formatMessage, status]);
     const subscriptionStatusIcons = {
-        active: CheckCircle,
+        TRIAL_ACTIVE: CheckCircle,
     };
-    const bannerIcon = (_a = subscriptionStatusIcons[subscriptionBannerData.status]) !== null && _a !== void 0 ? _a : undefined;
+    const bannerIcon = (subscriptionStatusIcons[status]
+        && moment(subscriptionStartDate).isValid()
+        && moment(subscriptionStartDate).isSame(moment(), 'day'))
+        ? subscriptionStatusIcons[status]
+        : undefined;
     return (_jsx("div", { className: "mt-4.5 mb-4.5", children: _jsxs(Alert, { variant: bannerVariant, icon: bannerIcon, dismissible: true, closeLabel: "Dismiss", show: showPageBanner, onClose: () => setShowPageBanner(false), actions: getSubscriptionAction, children: [_jsx(Alert.Heading, { children: bannerTitle }), _jsx("p", { children: bannerBody })] }) }));
 };
 //# sourceMappingURL=SubscriptionBanner.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SubscriptionBanner.js","sourceRoot":"","sources":["../../../../src/containers/SubscriptionBanner/components/SubscriptionBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useEffect, useState, useMemo } from 'react';\nimport { Alert, Button, Variant } from '@openedx/paragon';\nimport { CheckCircle, Info } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport moment from 'moment';\nimport { utilHooks } from '@src/hooks';\nimport messages from '../messages';\nimport { subscriptionRenewalURL, checkoutPageURL } from '@src/data/constants/app';\nimport { Link } from 'react-router-dom';\n\n// TODO: We can replace the below hardcoded subscriptionBannerData with the actual data from the API once we have the API ready.\n// For now, we can use this hardcoded data to test the SubscriptionBanner component.\n// Refer to https://2u-internal.atlassian.net/browse/SUBS-442 for more details on the API integration.\n// And https://github.com/edx/frontend-app-subscription-learner-dashboard/pull/2#discussion_r3139442324 for the implementation details of the API integration.\n// Test cases for the trial case are already written in the SubscriptionBanner.test.tsx file. We can update the test cases to use the actual API data once we have the API ready.\nconst subscriptionBannerData = {\n  isSubscribed: true,\n  status: 'trial', // can be 'active', 'cancelled', 'renewalFailed'\n  subscriptionStartDate: '2026-05-22',\n  subscriptionEndDate: '2026-07-22',\n  subscriptionRenewalDate: '2026-07-22',\n  subscriptionRenewalPrice: '$36',\n};\n\nexport const SubscriptionBanner: FC = () => {\n  const { formatMessage } = useIntl();\n  const [showPageBanner, setShowPageBanner] = useState<boolean>(true);\n  const [bannerBody, setBannerBody] = useState('');\n  const [bannerTitle, setBannerTitle] = useState('');\n  const [bannerVariant, setBannerVariant] = useState<Variant | undefined>(undefined);\n  const formatDate = utilHooks.useFormatDate();\n\n  useEffect(() => {\n    const trialEndDate = moment(subscriptionBannerData.subscriptionEndDate).startOf('day');\n    const today = moment().startOf('day');\n    const trialDaysLeft = trialEndDate.isValid()\n      ? Math.max(0, trialEndDate.diff(today, 'days'))\n      : 0;\n\n    switch (subscriptionBannerData.status) {\n      case 'active':\n        setBannerVariant('success');\n        setBannerTitle(formatMessage(messages.activeSubscriptionTitle));\n        setBannerBody(formatMessage(messages.activeSubscriptionBody, {\n          subscriptionRenewalDate: formatDate(subscriptionBannerData.subscriptionRenewalDate),\n        }));\n        break;\n      case 'trial':\n        setBannerVariant('success');\n        if (trialDaysLeft === 0) {\n          setBannerTitle(formatMessage(messages.activeTrialSubscriptionTitleToday));\n        } else if (trialDaysLeft === 1) {\n          setBannerTitle(formatMessage(messages.activeTrialSubscriptionTitleTomorrow));\n        } else {\n          setBannerTitle(formatMessage(messages.activeTrialSubscriptionTitle, {\n            daysLeft: trialDaysLeft,\n          }));\n        }\n        setBannerBody(formatMessage(messages.activeTrialSubscriptionBody, {\n          subscriptionEndDate: formatDate(subscriptionBannerData.subscriptionEndDate),\n        }));\n        break;\n      case 'cancelled':\n        setBannerVariant('light');\n        setBannerTitle(formatMessage(messages.cancelledSubscriptionTitle));\n        setBannerBody(formatMessage(messages.cancelledSubscriptionBody, {\n          subscriptionEndDate: formatDate(subscriptionBannerData.subscriptionEndDate),\n        }));\n        break;\n      case 'renewalFailed': // also known as 'Payment Error' in figma designs\n        setBannerVariant('light');\n        setBannerTitle(formatMessage(messages.renewalFailedTitle));\n        setBannerBody(formatMessage(messages.renewalFailedBody, {\n          subscriptionRenewalDate: formatDate(subscriptionBannerData.subscriptionRenewalDate),\n        }));\n        break;\n      default:\n        setShowPageBanner(false);\n        break;\n    }\n  }, [formatDate, formatMessage]);\n\n  const getSubscriptionAction = useMemo(() => {\n    if (subscriptionBannerData.status === 'cancelled') {\n      return (\n        [\n          <Button\n            key=\"renew-subscription\"\n            data-testid=\"renew-button\"\n            className=\"renew-button\"\n            variant=\"primary\"\n            href={subscriptionRenewalURL}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            role=\"link\"\n          >\n            {formatMessage(messages.renewSubscriptionButton)}\n          </Button>,\n        ]\n      );\n    } else if (subscriptionBannerData.status === 'renewalFailed') {\n      return (\n        [\n          <Button\n            key=\"renew-failed-subscription\"\n            data-testid=\"renew-failed-button\"\n            className=\"renew-failed-button\"\n            variant=\"primary\"\n            to={checkoutPageURL}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            role=\"link\"\n            as={Link}\n          >\n            {formatMessage(messages.renewalFailedButton)}\n          </Button>,\n        ]\n      );\n    } else {\n      return [];\n    }\n  }, [formatMessage]);\n\n  const subscriptionStatusIcons: Record<string, typeof Info | undefined> = {\n    active: CheckCircle,\n  };\n\n  const bannerIcon = subscriptionStatusIcons[subscriptionBannerData.status] ?? undefined;\n\n  return (\n    <div className=\"mt-4.5 mb-4.5\">\n      <Alert\n        variant={bannerVariant}\n        icon={bannerIcon}\n        dismissible\n        closeLabel=\"Dismiss\"\n        show={showPageBanner}\n        onClose={() => setShowPageBanner(false)}\n        actions={getSubscriptionAction}\n      >\n        <Alert.Heading>{bannerTitle}</Alert.Heading>\n        <p>\n          {bannerBody}\n        </p>\n      </Alert>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"SubscriptionBanner.js","sourceRoot":"","sources":["../../../../src/containers/SubscriptionBanner/components/SubscriptionBanner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,EAAW,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAQ,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,MAAM,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAGxC,MAAM,CAAC,MAAM,kBAAkB,GAAmB,CAAC,EAAE,uBAAuB,EAAE,EAAE,EAAE;IAChF,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,CAAC;IACpE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAC;IACnF,MAAM,UAAU,GAAG,SAAS,CAAC,aAAa,EAAE,CAAC;IAC7C,MAAM,EAAE,MAAM,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,GAAG,uBAAuB,CAAC;IAEhH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,MAAM,CAAC,mBAAmB,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAChE,MAAM,KAAK,GAAG,MAAM,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACtC,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,EAAE;YAC1C,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;YAC/C,CAAC,CAAC,CAAC,CAAC;QAEN,IAAI,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,IAAI,EAAE,CAAC;YAC5C,QAAQ,MAAM,EAAE,CAAC;gBACf,KAAK,QAAQ;oBACX;;uBAEG;oBACH,iBAAiB,CAAC,KAAK,CAAC,CAAC;oBACzB,MAAM;gBACR,KAAK,cAAc;oBACjB,gBAAgB,CAAC,SAAS,CAAC,CAAC;oBAC5B,IAAI,aAAa,KAAK,CAAC,EAAE,CAAC;wBACxB,cAAc,CAAC,aAAa,CAAC,QAAQ,CAAC,iCAAiC,CAAC,CAAC,CAAC;oBAC5E,CAAC;yBAAM,IAAI,aAAa,KAAK,CAAC,EAAE,CAAC;wBAC/B,cAAc,CAAC,aAAa,CAAC,QAAQ,CAAC,oCAAoC,CAAC,CAAC,CAAC;oBAC/E,CAAC;yBAAM,IAAI,MAAM,CAAC,qBAAqB,CAAC,CAAC,OAAO,EAAE,IAAI,MAAM,CAAC,qBAAqB,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC;wBAC5G,cAAc,CAAC,aAAa,CAAC,QAAQ,CAAC,uBAAuB,CAAC,CAAC,CAAC;wBAChE,aAAa,CAAC,aAAa,CAAC,QAAQ,CAAC,sBAAsB,EAAE;4BAC3D,uBAAuB,EAAE,UAAU,CAAC,uBAAuB,CAAC;yBAC7D,CAAC,CAAC,CAAC;wBACJ,OAAO;oBACT,CAAC;yBAAM,CAAC;wBACN,cAAc,CAAC,aAAa,CAAC,QAAQ,CAAC,4BAA4B,EAAE;4BAClE,QAAQ,EAAE,aAAa;yBACxB,CAAC,CAAC,CAAC;oBACN,CAAC;oBACD,aAAa,CAAC,aAAa,CAAC,QAAQ,CAAC,2BAA2B,EAAE;wBAChE,mBAAmB,EAAE,UAAU,CAAC,mBAAmB,CAAC;qBACrD,CAAC,CAAC,CAAC;oBACJ,MAAM;gBACR,KAAK,WAAW;oBACd,gBAAgB,CAAC,OAAO,CAAC,CAAC;oBAC1B,cAAc,CAAC,aAAa,CAAC,QAAQ,CAAC,0BAA0B,CAAC,CAAC,CAAC;oBACnE,aAAa,CAAC,aAAa,CAAC,QAAQ,CAAC,yBAAyB,EAAE;wBAC9D,mBAAmB,EAAE,UAAU,CAAC,mBAAmB,CAAC;qBACrD,CAAC,CAAC,CAAC;oBACJ,MAAM;gBACR,KAAK,gBAAgB,EAAE,iDAAiD;oBACtE,gBAAgB,CAAC,OAAO,CAAC,CAAC;oBAC1B,cAAc,CAAC,aAAa,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC,CAAC;oBAC3D,aAAa,CAAC,aAAa,CAAC,QAAQ,CAAC,iBAAiB,EAAE;wBACtD,uBAAuB,EAAE,UAAU,CAAC,uBAAuB,CAAC;qBAC7D,CAAC,CAAC,CAAC;oBACJ,MAAM;gBACR;oBACE,iBAAiB,CAAC,KAAK,CAAC,CAAC;oBACzB,MAAM;YACV,CAAC;QACH,CAAC;aAAM,CAAC;YACN,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,MAAM,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE7G,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,IAAI,MAAM,KAAK,WAAW,EAAE,CAAC;YAC3B,OAAO,CACL;gBACE,KAAC,MAAM,mBAEO,cAAc,EAC1B,SAAS,EAAC,cAAc,EACxB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,sBAAsB,EAC5B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,IAAI,EAAC,MAAM,YAEV,aAAa,CAAC,QAAQ,CAAC,uBAAuB,CAAC,IAT5C,oBAAoB,CAUjB;aACV,CACF,CAAC;QACJ,CAAC;aAAM,IAAI,MAAM,KAAK,gBAAgB,EAAE,CAAC;YACvC,OAAO,CACL;gBACE,KAAC,MAAM,mBAEO,qBAAqB,EACjC,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAC,SAAS,EACjB,EAAE,EAAE,eAAe,EACnB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,IAAI,YAEP,aAAa,CAAC,QAAQ,CAAC,mBAAmB,CAAC,IAVxC,2BAA2B,CAWxB;aACV,CACF,CAAC;QACJ,CAAC;aAAM,CAAC;YACN,OAAO,EAAE,CAAC;QACZ,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IAE5B,MAAM,uBAAuB,GAA4C;QACvE,YAAY,EAAE,WAAW;KAC1B,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,uBAAuB,CAAC,MAAM,CAAC;WAC9C,MAAM,CAAC,qBAAqB,CAAC,CAAC,OAAO,EAAE;WACvC,MAAM,CAAC,qBAAqB,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,CAAC;QACzD,CAAC,CAAC,uBAAuB,CAAC,MAAM,CAAC;QACjC,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,cAAK,SAAS,EAAC,eAAe,YAC5B,MAAC,KAAK,IACJ,OAAO,EAAE,aAAa,EACtB,IAAI,EAAE,UAAU,EAChB,WAAW,QACX,UAAU,EAAC,SAAS,EACpB,IAAI,EAAE,cAAc,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,EACvC,OAAO,EAAE,qBAAqB,aAE9B,KAAC,KAAK,CAAC,OAAO,cAAE,WAAW,GAAiB,EAC5C,sBACG,UAAU,GACT,IACE,GACJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC, useEffect, useState, useMemo } from 'react';\nimport { Alert, Button, Variant } from '@openedx/paragon';\nimport { CheckCircle, Info } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport moment from 'moment';\nimport { utilHooks } from '@src/hooks';\nimport messages from '../messages';\nimport { subscriptionRenewalURL, checkoutPageURL } from '@src/data/constants/app';\nimport { Link } from 'react-router-dom';\nimport { BannerItem } from '../types';\n\nexport const SubscriptionBanner: FC<BannerItem> = ({ learnerSubscriptionData }) => {\n  const { formatMessage } = useIntl();\n  const [showPageBanner, setShowPageBanner] = useState<boolean>(true);\n  const [bannerBody, setBannerBody] = useState('');\n  const [bannerTitle, setBannerTitle] = useState('');\n  const [bannerVariant, setBannerVariant] = useState<Variant | undefined>(undefined);\n  const formatDate = utilHooks.useFormatDate();\n  const { status, subscriptionEndDate, subscriptionRenewalDate, subscriptionStartDate } = learnerSubscriptionData;\n\n  useEffect(() => {\n    const trialEndDate = moment(subscriptionEndDate).startOf('day');\n    const today = moment().startOf('day');\n    const trialDaysLeft = trialEndDate.isValid()\n      ? Math.max(0, trialEndDate.diff(today, 'days'))\n      : 0;\n\n    if (status !== undefined && status !== null) {\n      switch (status) {\n        case 'ACTIVE':\n          /**\n           * TODO : Since we do not have screen for ACTIVE case, we are hiding the banner\n           */\n          setShowPageBanner(false);\n          break;\n        case 'TRIAL_ACTIVE':\n          setBannerVariant('success');\n          if (trialDaysLeft === 0) {\n            setBannerTitle(formatMessage(messages.activeTrialSubscriptionTitleToday));\n          } else if (trialDaysLeft === 1) {\n            setBannerTitle(formatMessage(messages.activeTrialSubscriptionTitleTomorrow));\n          } else if (moment(subscriptionStartDate).isValid() && moment(subscriptionStartDate).isSame(moment(), 'day')) {\n            setBannerTitle(formatMessage(messages.activeSubscriptionTitle));\n            setBannerBody(formatMessage(messages.activeSubscriptionBody, {\n              subscriptionRenewalDate: formatDate(subscriptionRenewalDate),\n            }));\n            return;\n          } else {\n            setBannerTitle(formatMessage(messages.activeTrialSubscriptionTitle, {\n              daysLeft: trialDaysLeft,\n            }));\n          }\n          setBannerBody(formatMessage(messages.activeTrialSubscriptionBody, {\n            subscriptionEndDate: formatDate(subscriptionEndDate),\n          }));\n          break;\n        case 'CANCELLED':\n          setBannerVariant('light');\n          setBannerTitle(formatMessage(messages.cancelledSubscriptionTitle));\n          setBannerBody(formatMessage(messages.cancelledSubscriptionBody, {\n            subscriptionEndDate: formatDate(subscriptionEndDate),\n          }));\n          break;\n        case 'RENEWAL_FAILED': // also known as 'Payment Error' in figma designs\n          setBannerVariant('light');\n          setBannerTitle(formatMessage(messages.renewalFailedTitle));\n          setBannerBody(formatMessage(messages.renewalFailedBody, {\n            subscriptionRenewalDate: formatDate(subscriptionRenewalDate),\n          }));\n          break;\n        default:\n          setShowPageBanner(false);\n          break;\n      }\n    } else {\n      setShowPageBanner(false);\n    }\n  }, [formatDate, formatMessage, status, subscriptionEndDate, subscriptionRenewalDate, subscriptionStartDate]);\n\n  const getSubscriptionAction = useMemo(() => {\n    if (status === 'CANCELLED') {\n      return (\n        [\n          <Button\n            key=\"renew-subscription\"\n            data-testid=\"renew-button\"\n            className=\"renew-button\"\n            variant=\"primary\"\n            href={subscriptionRenewalURL}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            role=\"link\"\n          >\n            {formatMessage(messages.renewSubscriptionButton)}\n          </Button>,\n        ]\n      );\n    } else if (status === 'RENEWAL_FAILED') {\n      return (\n        [\n          <Button\n            key=\"renew-failed-subscription\"\n            data-testid=\"renew-failed-button\"\n            className=\"renew-failed-button\"\n            variant=\"primary\"\n            to={checkoutPageURL}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            role=\"link\"\n            as={Link}\n          >\n            {formatMessage(messages.renewalFailedButton)}\n          </Button>,\n        ]\n      );\n    } else {\n      return [];\n    }\n  }, [formatMessage, status]);\n\n  const subscriptionStatusIcons: Record<string, typeof Info | undefined> = {\n    TRIAL_ACTIVE: CheckCircle,\n  };\n\n  const bannerIcon = (subscriptionStatusIcons[status]\n    && moment(subscriptionStartDate).isValid()\n    && moment(subscriptionStartDate).isSame(moment(), 'day'))\n    ? subscriptionStatusIcons[status]\n    : undefined;\n\n  return (\n    <div className=\"mt-4.5 mb-4.5\">\n      <Alert\n        variant={bannerVariant}\n        icon={bannerIcon}\n        dismissible\n        closeLabel=\"Dismiss\"\n        show={showPageBanner}\n        onClose={() => setShowPageBanner(false)}\n        actions={getSubscriptionAction}\n      >\n        <Alert.Heading>{bannerTitle}</Alert.Heading>\n        <p>\n          {bannerBody}\n        </p>\n      </Alert>\n    </div>\n  );\n};\n"]}

package/dist/containers/SubscriptionBanner/messages.js

@@ -4,7 +4,7 @@ const messages = defineMessages({
     activeSubscriptionTitle: {
         id: 'learner-dash.subscriptionBanner.banners.activeSubscriptionTitle',
         description: 'Message to learners with an active subscription',
-        defaultMessage: 'Congrats! Your edX subscription trial is active.',
+        defaultMessage: 'Congrats! Your edX Plus trial is active.',
     },
     activeSubscriptionBody: {
         id: 'learner-dash.subscriptionBanner.banners.activeSubscriptionBody',
@@ -14,17 +14,17 @@ const messages = defineMessages({
     activeTrialSubscriptionTitle: {
         id: 'learner-dash.subscriptionBanner.banners.activeTrialSubscriptionTitle',
         description: 'Message to learners with an active trial subscription',
-        defaultMessage: 'Your edX subscription trial expires in {daysLeft} days.',
+        defaultMessage: 'Your edX Plus trial expires in {daysLeft} days.',
     },
     activeTrialSubscriptionTitleToday: {
         id: 'learner-dash.subscriptionBanner.banners.activeTrialSubscriptionTitleToday',
         description: 'Message to learners with a trial subscription expiring today',
-        defaultMessage: 'Your edX subscription trial expires today.',
+        defaultMessage: 'Your edX Plus trial expires today.',
     },
     activeTrialSubscriptionTitleTomorrow: {
         id: 'learner-dash.subscriptionBanner.banners.activeTrialSubscriptionTitleTomorrow',
         description: 'Message to learners with a trial subscription expiring tomorrow',
-        defaultMessage: 'Your edX subscription trial expires tomorrow.',
+        defaultMessage: 'Your edX Plus trial expires tomorrow.',
     },
     activeTrialSubscriptionBody: {
         id: 'learner-dash.subscriptionBanner.banners.activeTrialSubscriptionBody',

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

@@ -1 +1 @@
-{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/SubscriptionBanner/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,yHAAyH;AACzH,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,uBAAuB,EAAE;QACvB,EAAE,EAAE,iEAAiE;QACrE,WAAW,EAAE,iDAAiD;QAC9D,cAAc,EAAE,kDAAkD;KACnE;IACD,sBAAsB,EAAE;QACtB,EAAE,EAAE,gEAAgE;QACpE,WAAW,EAAE,iDAAiD;QAC9D,cAAc,EAAE,4DAA4D;KAC7E;IACD,4BAA4B,EAAE;QAC5B,EAAE,EAAE,sEAAsE;QAC1E,WAAW,EAAE,uDAAuD;QACpE,cAAc,EAAE,yDAAyD;KAC1E;IACD,iCAAiC,EAAE;QACjC,EAAE,EAAE,2EAA2E;QAC/E,WAAW,EAAE,8DAA8D;QAC3E,cAAc,EAAE,4CAA4C;KAC7D;IACD,oCAAoC,EAAE;QACpC,EAAE,EAAE,8EAA8E;QAClF,WAAW,EAAE,iEAAiE;QAC9E,cAAc,EAAE,+CAA+C;KAChE;IACD,2BAA2B,EAAE;QAC3B,EAAE,EAAE,qEAAqE;QACzE,WAAW,EAAE,uDAAuD;QACpE,cAAc,EAAE,wDAAwD;KACzE;IACD,0BAA0B,EAAE;QAC1B,EAAE,EAAE,oEAAoE;QACxE,WAAW,EAAE,mDAAmD;QAChE,cAAc,EAAE,sCAAsC;KACvD;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,mEAAmE;QACvE,WAAW,EAAE,mDAAmD;QAChE,cAAc,EAAE,6GAA6G;KAC9H;IACD,uBAAuB,EAAE;QACvB,EAAE,EAAE,iEAAiE;QACrE,WAAW,EAAE,oBAAoB;QACjC,cAAc,EAAE,oBAAoB;KACrC;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,4DAA4D;QAChE,WAAW,EAAE,wDAAwD;QACrE,cAAc,EAAE,4DAA4D;KAC7E;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,2DAA2D;QAC/D,WAAW,EAAE,wDAAwD;QACrE,cAAc,EAAE,qJAAqJ;KACtK;IACD,mBAAmB,EAAE;QACnB,EAAE,EAAE,6DAA6D;QACjE,WAAW,EAAE,uBAAuB;QACpC,cAAc,EAAE,uBAAuB;KACxC;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\n// TODO: Update the messages as per new designs once we have the designs ready for subscription types other than 'trial'.\nconst messages = defineMessages({\n  activeSubscriptionTitle: {\n    id: 'learner-dash.subscriptionBanner.banners.activeSubscriptionTitle',\n    description: 'Message to learners with an active subscription',\n    defaultMessage: 'Congrats! Your edX subscription trial is active.',\n  },\n  activeSubscriptionBody: {\n    id: 'learner-dash.subscriptionBanner.banners.activeSubscriptionBody',\n    description: 'Message to learners with an active subscription',\n    defaultMessage: 'Your subscription will renew on {subscriptionRenewalDate}.',\n  },\n  activeTrialSubscriptionTitle: {\n    id: 'learner-dash.subscriptionBanner.banners.activeTrialSubscriptionTitle',\n    description: 'Message to learners with an active trial subscription',\n    defaultMessage: 'Your edX subscription trial expires in {daysLeft} days.',\n  },\n  activeTrialSubscriptionTitleToday: {\n    id: 'learner-dash.subscriptionBanner.banners.activeTrialSubscriptionTitleToday',\n    description: 'Message to learners with a trial subscription expiring today',\n    defaultMessage: 'Your edX subscription trial expires today.',\n  },\n  activeTrialSubscriptionTitleTomorrow: {\n    id: 'learner-dash.subscriptionBanner.banners.activeTrialSubscriptionTitleTomorrow',\n    description: 'Message to learners with a trial subscription expiring tomorrow',\n    defaultMessage: 'Your edX subscription trial expires tomorrow.',\n  },\n  activeTrialSubscriptionBody: {\n    id: 'learner-dash.subscriptionBanner.banners.activeTrialSubscriptionBody',\n    description: 'Message to learners with an active trial subscription',\n    defaultMessage: 'Your subscription will renew on {subscriptionEndDate}.',\n  },\n  cancelledSubscriptionTitle: {\n    id: 'learner-dash.subscriptionBanner.banners.cancelledSubscriptionTitle',\n    description: 'Message to learners with a cancelled subscription',\n    defaultMessage: 'Your subscription expires in # days.',\n  },\n  cancelledSubscriptionBody: {\n    id: 'learner-dash.subscriptionBanner.banners.cancelledSubscriptionBody',\n    description: 'Message to learners with a cancelled subscription',\n    defaultMessage: 'You canceled your subscription on {subscriptionEndDate}. Renew your subscription to maintain course access.',\n  },\n  renewSubscriptionButton: {\n    id: 'learner-dash.subscriptionBanner.banners.renewSubscriptionButton',\n    description: 'Renew Subscription',\n    defaultMessage: 'Renew Subscription',\n  },\n  renewalFailedTitle: {\n    id: 'learner-dash.subscriptionBanner.banners.renewalFailedTitle',\n    description: 'Message to learners with a failed renewal subscription',\n    defaultMessage: 'Update your payment card to keep your subscription active.',\n  },\n  renewalFailedBody: {\n    id: 'learner-dash.subscriptionBanner.banners.renewalFailedBody',\n    description: 'Message to learners with a failed renewal subscription',\n    defaultMessage: 'We were unable to process your subscription payment. Update your card on file by {subscriptionRenewalDate} or your subscription access will expire.',\n  },\n  renewalFailedButton: {\n    id: 'learner-dash.subscriptionBanner.banners.renewalFailedButton',\n    description: 'Update payment method',\n    defaultMessage: 'Update payment method',\n  },\n});\n\nexport default messages;\n"]}
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/SubscriptionBanner/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,yHAAyH;AACzH,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,uBAAuB,EAAE;QACvB,EAAE,EAAE,iEAAiE;QACrE,WAAW,EAAE,iDAAiD;QAC9D,cAAc,EAAE,0CAA0C;KAC3D;IACD,sBAAsB,EAAE;QACtB,EAAE,EAAE,gEAAgE;QACpE,WAAW,EAAE,iDAAiD;QAC9D,cAAc,EAAE,4DAA4D;KAC7E;IACD,4BAA4B,EAAE;QAC5B,EAAE,EAAE,sEAAsE;QAC1E,WAAW,EAAE,uDAAuD;QACpE,cAAc,EAAE,iDAAiD;KAClE;IACD,iCAAiC,EAAE;QACjC,EAAE,EAAE,2EAA2E;QAC/E,WAAW,EAAE,8DAA8D;QAC3E,cAAc,EAAE,oCAAoC;KACrD;IACD,oCAAoC,EAAE;QACpC,EAAE,EAAE,8EAA8E;QAClF,WAAW,EAAE,iEAAiE;QAC9E,cAAc,EAAE,uCAAuC;KACxD;IACD,2BAA2B,EAAE;QAC3B,EAAE,EAAE,qEAAqE;QACzE,WAAW,EAAE,uDAAuD;QACpE,cAAc,EAAE,wDAAwD;KACzE;IACD,0BAA0B,EAAE;QAC1B,EAAE,EAAE,oEAAoE;QACxE,WAAW,EAAE,mDAAmD;QAChE,cAAc,EAAE,sCAAsC;KACvD;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,mEAAmE;QACvE,WAAW,EAAE,mDAAmD;QAChE,cAAc,EAAE,6GAA6G;KAC9H;IACD,uBAAuB,EAAE;QACvB,EAAE,EAAE,iEAAiE;QACrE,WAAW,EAAE,oBAAoB;QACjC,cAAc,EAAE,oBAAoB;KACrC;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,4DAA4D;QAChE,WAAW,EAAE,wDAAwD;QACrE,cAAc,EAAE,4DAA4D;KAC7E;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,2DAA2D;QAC/D,WAAW,EAAE,wDAAwD;QACrE,cAAc,EAAE,qJAAqJ;KACtK;IACD,mBAAmB,EAAE;QACnB,EAAE,EAAE,6DAA6D;QACjE,WAAW,EAAE,uBAAuB;QACpC,cAAc,EAAE,uBAAuB;KACxC;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\n// TODO: Update the messages as per new designs once we have the designs ready for subscription types other than 'trial'.\nconst messages = defineMessages({\n  activeSubscriptionTitle: {\n    id: 'learner-dash.subscriptionBanner.banners.activeSubscriptionTitle',\n    description: 'Message to learners with an active subscription',\n    defaultMessage: 'Congrats! Your edX Plus trial is active.',\n  },\n  activeSubscriptionBody: {\n    id: 'learner-dash.subscriptionBanner.banners.activeSubscriptionBody',\n    description: 'Message to learners with an active subscription',\n    defaultMessage: 'Your subscription will renew on {subscriptionRenewalDate}.',\n  },\n  activeTrialSubscriptionTitle: {\n    id: 'learner-dash.subscriptionBanner.banners.activeTrialSubscriptionTitle',\n    description: 'Message to learners with an active trial subscription',\n    defaultMessage: 'Your edX Plus trial expires in {daysLeft} days.',\n  },\n  activeTrialSubscriptionTitleToday: {\n    id: 'learner-dash.subscriptionBanner.banners.activeTrialSubscriptionTitleToday',\n    description: 'Message to learners with a trial subscription expiring today',\n    defaultMessage: 'Your edX Plus trial expires today.',\n  },\n  activeTrialSubscriptionTitleTomorrow: {\n    id: 'learner-dash.subscriptionBanner.banners.activeTrialSubscriptionTitleTomorrow',\n    description: 'Message to learners with a trial subscription expiring tomorrow',\n    defaultMessage: 'Your edX Plus trial expires tomorrow.',\n  },\n  activeTrialSubscriptionBody: {\n    id: 'learner-dash.subscriptionBanner.banners.activeTrialSubscriptionBody',\n    description: 'Message to learners with an active trial subscription',\n    defaultMessage: 'Your subscription will renew on {subscriptionEndDate}.',\n  },\n  cancelledSubscriptionTitle: {\n    id: 'learner-dash.subscriptionBanner.banners.cancelledSubscriptionTitle',\n    description: 'Message to learners with a cancelled subscription',\n    defaultMessage: 'Your subscription expires in # days.',\n  },\n  cancelledSubscriptionBody: {\n    id: 'learner-dash.subscriptionBanner.banners.cancelledSubscriptionBody',\n    description: 'Message to learners with a cancelled subscription',\n    defaultMessage: 'You canceled your subscription on {subscriptionEndDate}. Renew your subscription to maintain course access.',\n  },\n  renewSubscriptionButton: {\n    id: 'learner-dash.subscriptionBanner.banners.renewSubscriptionButton',\n    description: 'Renew Subscription',\n    defaultMessage: 'Renew Subscription',\n  },\n  renewalFailedTitle: {\n    id: 'learner-dash.subscriptionBanner.banners.renewalFailedTitle',\n    description: 'Message to learners with a failed renewal subscription',\n    defaultMessage: 'Update your payment card to keep your subscription active.',\n  },\n  renewalFailedBody: {\n    id: 'learner-dash.subscriptionBanner.banners.renewalFailedBody',\n    description: 'Message to learners with a failed renewal subscription',\n    defaultMessage: 'We were unable to process your subscription payment. Update your card on file by {subscriptionRenewalDate} or your subscription access will expire.',\n  },\n  renewalFailedButton: {\n    id: 'learner-dash.subscriptionBanner.banners.renewalFailedButton',\n    description: 'Update payment method',\n    defaultMessage: 'Update payment method',\n  },\n});\n\nexport default messages;\n"]}

package/dist/hooks/{usePopularCourses.d.ts → usePopularCoursesAndPrograms.d.ts}

@@ -8,4 +8,4 @@ export declare const searchKeys: {
     courses: (query: string, tags: string[], page: number) => readonly ["search", "courses", string, string[], number];
     popular: (productType: ProductType, limit: number) => readonly ["search", "popular", ProductType, number];
 };
-export declare const usePopularCoursesData: (searchClient: SearchClient | null, enabled: boolean) => UseQueryResult<ProductCardItem[]>;
+export declare const usePopularCoursesAndProgramsData: (searchClient: SearchClient | null, enabled: boolean, productType?: ProductType) => UseQueryResult<ProductCardItem[]>;