@edx/frontend-app-subscription-learner-dashboard 1.22.0 → 1.24.0

package/dist/containers/Dashboard/index.js

@@ -7,6 +7,7 @@ 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';
@@ -27,7 +28,7 @@ export const Dashboard = () => {
     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(DashboardHeader, { startDate: userSubscriptionStartDate }), _jsx(SubscriptionBanner, {}), _jsx(DashboardTitle, {}), _jsx(DashboardHeroSlot, {}), _jsx(DashboardContent, { hasCourseHistory: hasCourseHistory }), _jsx(PopularCoursePanel, {})] })) })] }) }) }));
+                            : (_jsxs(DashboardLayout, { children: [_jsx(DashboardHeader, { startDate: userSubscriptionStartDate }), _jsx(SubscriptionBanner, {}), _jsx(DashboardTitle, {}), _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":";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;AACvD,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAE3D,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,EACtB,KAAC,oBAAoB,KAAG,IACR,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';\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 { 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                  <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/SubscriptionInformation/components/SubscriptionInformation.js

@@ -1,32 +1,79 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
 import { Alert, Button, Icon } from '@openedx/paragon';
 import { useIntl } from '@openedx/frontend-base';
 import { utilHooks } from '../../../hooks';
 import messages from '../messages';
 import { manageSubscriptionURL } from '../../../data/constants/app';
 import '../index.scss';
-import { Cached } from '@openedx/paragon/icons';
+import { Cached, WarningFilled, Cancel } from '@openedx/paragon/icons';
+import { subscriptionRenewalURL } from '../../../data/constants/app';
 // TODO: We can replace the below hardcoded subscriptionInformationData with the actual data from the API once we have the API ready.
 // For now, we can use this hardcoded data to test the SubscriptionInformation component.
 const subscriptionInformationData = {
     isSubscribed: true,
-    subscriptionStatus: 'Active', // can be 'Active', 'Cancelled', 'Expired'
+    status: 'Active', // can be 'active', 'cancelled', 'renewalFailed'
     subscriptionStartDate: '05/22/25',
     subscriptionEndDate: '05/22/26',
     subscriptionRenewalDate: '05/22/26',
     subscriptionRenewalPrice: '$36',
     numberOfCoursesEnrolled: 5,
     totalSavings: '$120',
-    planName: 'Monthly Plan',
+    planName: 'Monthly plan',
 };
 export const SubscriptionInformation = () => {
+    var _a;
     const { formatMessage } = useIntl();
     const formatDate = utilHooks.useFormatDate();
-    const subscriptionActions = [
-        _jsx(Button, { variant: "tertiary", "data-testid": "manage-button", href: manageSubscriptionURL, target: "_blank", rel: "noopener noreferrer", role: "link", children: formatMessage(messages.manageSubscriptionMessage) }, "manage-subscription"),
-    ];
-    return (_jsxs("div", { className: "container subscription-information py-5 px-4", children: [_jsx("h2", { className: "mb-4 my-subscription-heading", children: formatMessage(messages.mySubscriptionHeading) }), _jsxs(Alert, { dismissible: false, show: true, actions: subscriptionActions, className: "subscription-status-alert bg-white", children: [_jsxs(Alert.Heading, { as: "h6", children: [_jsx(Icon, { src: Cached, className: "icon mr-1", "data-testid": "subscription-status-icon" }), subscriptionInformationData.subscriptionStatus, ", ", subscriptionInformationData.planName] }), _jsx("p", { children: formatMessage(messages.renewalMessage, {
-                            subscriptionRenewalDate: formatDate(subscriptionInformationData.subscriptionRenewalDate),
-                        }) })] })] }));
+    const [infoBody, setInfoBody] = useState('');
+    const [infoTitle, setInfoTitle] = useState('');
+    useEffect(() => {
+        switch (subscriptionInformationData.status.toLowerCase()) {
+            case 'active':
+            case 'trialactive':
+                setInfoTitle(formatMessage(messages.activeSubscriptionTitle, {
+                    subscriptionStatus: subscriptionInformationData.status.charAt(0).toUpperCase() + subscriptionInformationData.status.slice(1),
+                    planName: subscriptionInformationData.planName,
+                }));
+                setInfoBody(formatMessage(messages.renewalMessage, {
+                    subscriptionRenewalDate: formatDate(subscriptionInformationData.subscriptionRenewalDate),
+                }));
+                break;
+            case 'cancelled':
+                setInfoTitle(formatMessage(messages.cancelledSubscriptionTitle, {
+                    subscriptionStatus: subscriptionInformationData.status.charAt(0).toUpperCase() + subscriptionInformationData.status.slice(1),
+                    planName: subscriptionInformationData.planName,
+                }));
+                setInfoBody(formatMessage(messages.cancelledSubscriptionBody, {
+                    subscriptionEndDate: formatDate(subscriptionInformationData.subscriptionEndDate),
+                }));
+                break;
+            case 'renewalfailed': // also known as 'Payment Error' in figma designs
+                setInfoTitle(formatMessage(messages.renewalFailedTitle));
+                setInfoBody(formatMessage(messages.renewalFailedBody, {
+                    subscriptionRenewalDate: formatDate(subscriptionInformationData.subscriptionRenewalDate),
+                }));
+                break;
+        }
+    }, [formatDate, formatMessage]);
+    const getSubscriptionAction = useMemo(() => {
+        if (subscriptionInformationData.status.toLowerCase() === 'cancelled') {
+            return ([
+                _jsx(Button, { "data-testid": "renew-button", className: "renew-button", variant: "tertiary", href: subscriptionRenewalURL, target: "_blank", rel: "noopener noreferrer", role: "link", children: formatMessage(messages.renewSubscriptionButton) }, "renew-subscription"),
+            ]);
+        }
+        else
+            return ([
+                _jsx(Button, { variant: "tertiary", "data-testid": "manage-button", href: manageSubscriptionURL, target: "_blank", rel: "noopener noreferrer", role: "link", children: formatMessage(messages.manageSubscriptionMessage) }, "manage-subscription"),
+            ]);
+    }, [formatMessage]);
+    const subscriptionStatusIcons = {
+        active: Cached,
+        trialactive: Cached,
+        cancelled: Cancel,
+        renewalfailed: WarningFilled,
+    };
+    const bannerIcon = (_a = subscriptionStatusIcons[subscriptionInformationData.status.toLowerCase()]) !== null && _a !== void 0 ? _a : undefined;
+    return (_jsxs("div", { className: "container subscription-information py-5 px-4", children: [_jsx("h2", { className: "mb-4 my-subscription-heading", children: formatMessage(messages.mySubscriptionHeading) }), _jsxs(Alert, { dismissible: false, show: true, actions: getSubscriptionAction, className: "subscription-status-alert bg-white", children: [_jsxs(Alert.Heading, { as: "h6", children: [_jsx(Icon, { src: bannerIcon, className: `icon mr-1 ${bannerIcon === WarningFilled ? 'warning-icon text-warning-500' : ''}`, "data-testid": "subscription-status-icon" }), infoTitle] }), _jsx("p", { children: infoBody })] })] }));
 };
 //# sourceMappingURL=SubscriptionInformation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SubscriptionInformation.js","sourceRoot":"","sources":["../../../../src/containers/SubscriptionInformation/components/SubscriptionInformation.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,qIAAqI;AACrI,yFAAyF;AACzF,MAAM,2BAA2B,GAAG;IAClC,YAAY,EAAE,IAAI;IAClB,kBAAkB,EAAE,QAAQ,EAAE,0CAA0C;IACxE,qBAAqB,EAAE,UAAU;IACjC,mBAAmB,EAAE,UAAU;IAC/B,uBAAuB,EAAE,UAAU;IACnC,wBAAwB,EAAE,KAAK;IAC/B,uBAAuB,EAAE,CAAC;IAC1B,YAAY,EAAE,MAAM;IACpB,QAAQ,EAAE,cAAc;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAO,GAAG,EAAE;IAC9C,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,UAAU,GAAG,SAAS,CAAC,aAAa,EAAE,CAAC;IAE7C,MAAM,mBAAmB,GAAG;QAC1B,KAAC,MAAM,IAEL,OAAO,EAAC,UAAU,iBACN,eAAe,EAC3B,IAAI,EAAE,qBAAqB,EAC3B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,IAAI,EAAC,MAAM,YAEV,aAAa,CAAC,QAAQ,CAAC,yBAAyB,CAAC,IAR9C,qBAAqB,CASlB;KACV,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,8CAA8C,aAC3D,aAAI,SAAS,EAAC,8BAA8B,YAAE,aAAa,CAAC,QAAQ,CAAC,qBAAqB,CAAC,GAAM,EACjG,MAAC,KAAK,IACJ,WAAW,EAAE,KAAK,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAC,oCAAoC,aAE9C,MAAC,KAAK,CAAC,OAAO,IACZ,EAAE,EAAC,IAAI,aAEP,KAAC,IAAI,IAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAC,WAAW,iBAAa,0BAA0B,GAAG,EAEjF,2BAA2B,CAAC,kBAAkB,QAAI,2BAA2B,CAAC,QAAQ,IACzE,EAChB,sBACG,aAAa,CAAC,QAAQ,CAAC,cAAc,EAAE;4BACtC,uBAAuB,EAAE,UAAU,CAAC,2BAA2B,CAAC,uBAAuB,CAAC;yBACzF,CAAC,GACA,IACE,IACJ,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { Alert, Button, Icon } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport { utilHooks } from '@src/hooks';\nimport messages from '../messages';\nimport { manageSubscriptionURL } from '@src/data/constants/app';\nimport '../index.scss';\nimport { Cached } from '@openedx/paragon/icons';\n\n// TODO: We can replace the below hardcoded subscriptionInformationData with the actual data from the API once we have the API ready.\n// For now, we can use this hardcoded data to test the SubscriptionInformation component.\nconst subscriptionInformationData = {\n  isSubscribed: true,\n  subscriptionStatus: 'Active', // can be 'Active', 'Cancelled', 'Expired'\n  subscriptionStartDate: '05/22/25',\n  subscriptionEndDate: '05/22/26',\n  subscriptionRenewalDate: '05/22/26',\n  subscriptionRenewalPrice: '$36',\n  numberOfCoursesEnrolled: 5,\n  totalSavings: '$120',\n  planName: 'Monthly Plan',\n};\n\nexport const SubscriptionInformation: FC = () => {\n  const { formatMessage } = useIntl();\n  const formatDate = utilHooks.useFormatDate();\n\n  const subscriptionActions = [\n    <Button\n      key=\"manage-subscription\"\n      variant=\"tertiary\"\n      data-testid=\"manage-button\"\n      href={manageSubscriptionURL}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      role=\"link\"\n    >\n      {formatMessage(messages.manageSubscriptionMessage)}\n    </Button>,\n  ];\n\n  return (\n    <div className=\"container subscription-information py-5 px-4\">\n      <h2 className=\"mb-4 my-subscription-heading\">{formatMessage(messages.mySubscriptionHeading)}</h2>\n      <Alert\n        dismissible={false}\n        show={true}\n        actions={subscriptionActions}\n        className=\"subscription-status-alert bg-white\"\n      >\n        <Alert.Heading\n          as=\"h6\"\n        >\n          <Icon src={Cached} className=\"icon mr-1\" data-testid=\"subscription-status-icon\" />\n          {/* TODO : To be updated from API response once correct response is received */}\n          {subscriptionInformationData.subscriptionStatus}, {subscriptionInformationData.planName}\n        </Alert.Heading>\n        <p>\n          {formatMessage(messages.renewalMessage, {\n            subscriptionRenewalDate: formatDate(subscriptionInformationData.subscriptionRenewalDate),\n          })}\n        </p>\n      </Alert>\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"SubscriptionInformation.js","sourceRoot":"","sources":["../../../../src/containers/SubscriptionInformation/components/SubscriptionInformation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useEffect, useMemo, useState } from 'react';\nimport { Alert, Button, Icon } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport { utilHooks } from '@src/hooks';\nimport messages from '../messages';\nimport { manageSubscriptionURL } from '@src/data/constants/app';\nimport '../index.scss';\nimport { Cached, WarningFilled, Cancel, Info } from '@openedx/paragon/icons';\nimport { subscriptionRenewalURL } from '@src/data/constants/app';\n\n// TODO: We can replace the below hardcoded subscriptionInformationData with the actual data from the API once we have the API ready.\n// For now, we can use this hardcoded data to test the SubscriptionInformation component.\nconst subscriptionInformationData = {\n  isSubscribed: true,\n  status: 'Active', // can be 'active', 'cancelled', 'renewalFailed'\n  subscriptionStartDate: '05/22/25',\n  subscriptionEndDate: '05/22/26',\n  subscriptionRenewalDate: '05/22/26',\n  subscriptionRenewalPrice: '$36',\n  numberOfCoursesEnrolled: 5,\n  totalSavings: '$120',\n  planName: 'Monthly plan',\n};\n\nexport const SubscriptionInformation: FC = () => {\n  const { formatMessage } = useIntl();\n  const formatDate = utilHooks.useFormatDate();\n  const [infoBody, setInfoBody] = useState('');\n  const [infoTitle, setInfoTitle] = useState('');\n\n  useEffect(() => {\n    switch (subscriptionInformationData.status.toLowerCase()) {\n      case 'active':\n      case 'trialactive':\n        setInfoTitle(formatMessage(messages.activeSubscriptionTitle, {\n          subscriptionStatus: subscriptionInformationData.status.charAt(0).toUpperCase() + subscriptionInformationData.status.slice(1),\n          planName: subscriptionInformationData.planName,\n        }));\n        setInfoBody(formatMessage(messages.renewalMessage, {\n          subscriptionRenewalDate: formatDate(subscriptionInformationData.subscriptionRenewalDate),\n        }));\n        break;\n      case 'cancelled':\n        setInfoTitle(formatMessage(messages.cancelledSubscriptionTitle, {\n          subscriptionStatus: subscriptionInformationData.status.charAt(0).toUpperCase() + subscriptionInformationData.status.slice(1),\n          planName: subscriptionInformationData.planName,\n        }));\n        setInfoBody(formatMessage(messages.cancelledSubscriptionBody, {\n          subscriptionEndDate: formatDate(subscriptionInformationData.subscriptionEndDate),\n        }));\n        break;\n      case 'renewalfailed': // also known as 'Payment Error' in figma designs\n        setInfoTitle(formatMessage(messages.renewalFailedTitle));\n        setInfoBody(formatMessage(messages.renewalFailedBody, {\n          subscriptionRenewalDate: formatDate(subscriptionInformationData.subscriptionRenewalDate),\n        }));\n        break;\n    }\n  }, [formatDate, formatMessage]);\n\n  const getSubscriptionAction = useMemo(() => {\n    if (subscriptionInformationData.status.toLowerCase() === 'cancelled') {\n      return (\n        [\n          <Button\n            key=\"renew-subscription\"\n            data-testid=\"renew-button\"\n            className=\"renew-button\"\n            variant=\"tertiary\"\n            href={subscriptionRenewalURL}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            role=\"link\"\n          >\n            {formatMessage(messages.renewSubscriptionButton)}\n          </Button>,\n        ]\n      );\n    } else\n      return (\n        [\n          <Button\n            key=\"manage-subscription\"\n            variant=\"tertiary\"\n            data-testid=\"manage-button\"\n            href={manageSubscriptionURL}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            role=\"link\"\n          >\n            {formatMessage(messages.manageSubscriptionMessage)}\n          </Button>,\n        ]\n      );\n  }, [formatMessage]);\n\n  const subscriptionStatusIcons: Record<string, typeof Info | undefined> = {\n    active: Cached,\n    trialactive: Cached,\n    cancelled: Cancel,\n    renewalfailed: WarningFilled,\n  };\n\n  const bannerIcon = subscriptionStatusIcons[subscriptionInformationData.status.toLowerCase()] ?? undefined;\n\n  return (\n    <div className=\"container subscription-information py-5 px-4\">\n      <h2 className=\"mb-4 my-subscription-heading\">{formatMessage(messages.mySubscriptionHeading)}</h2>\n      <Alert\n        dismissible={false}\n        show={true}\n        actions={getSubscriptionAction}\n        className=\"subscription-status-alert bg-white\"\n      >\n        <Alert.Heading as=\"h6\">\n          <Icon src={bannerIcon} className={`icon mr-1 ${bannerIcon === WarningFilled ? 'warning-icon text-warning-500' : ''}`} data-testid=\"subscription-status-icon\" />\n          {infoTitle}\n        </Alert.Heading>\n        <p>\n          {infoBody}\n        </p>\n      </Alert>\n    </div>\n  );\n};\n"]}

package/dist/containers/SubscriptionInformation/index.scss

@@ -1,13 +1,14 @@
 $text-color: #002B2B !default;
+$link-color: #00262B !default;
 
-.subscription-information {
+.subscription-information{
   background: var(--pgn-color-light-200);
   
-  .my-subscription-heading {
+  .my-subscription-heading{
     color: $text-color;
   }
 
-  .subscription-status-alert {
+  .subscription-status-alert{
     h6 {
       margin-bottom: 0;
     }
@@ -16,4 +17,24 @@ $text-color: #002B2B !default;
       color: var(--pgn-color-black);
     }
   }
+
+  .alert-heading{
+    display: flex;
+    align-items: center;
+    color: $text-color;
+
+    .warning-icon {
+      color: var(--pgn-color-warning-500);
+
+      svg {
+        background-color: black;
+        clip-path: polygon(50% 8%, 4% 88%, 92% 88%);
+      }
+    }
+  }
+
+  .renew-button, .manage-button {
+    text-decoration: underline;
+    color: $link-color;
+  }
 }

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

@@ -29,5 +29,35 @@ declare const messages: {
         description: string;
         defaultMessage: string;
     };
+    activeSubscriptionTitle: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    renewalFailedTitle: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    renewalFailedBody: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    cancelledSubscriptionTitle: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    cancelledSubscriptionBody: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    renewSubscriptionButton: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
 };
 export default messages;

package/dist/containers/SubscriptionInformation/messages.js

@@ -30,6 +30,36 @@ const messages = defineMessages({
         description: 'My Subscription Heading',
         defaultMessage: 'My subscription',
     },
+    activeSubscriptionTitle: {
+        id: 'learner-dash.subscriptionInformation.information.activeSubscriptionTitle',
+        description: 'Message title to learners with an active subscription',
+        defaultMessage: '{subscriptionStatus}, {planName}',
+    },
+    renewalFailedTitle: {
+        id: 'learner-dash.subscriptionInformation.information.renewalFailedTitle',
+        description: 'Message title to learners when renewal fails',
+        defaultMessage: 'Subscription may expire',
+    },
+    renewalFailedBody: {
+        id: 'learner-dash.subscriptionInformation.information.renewalFailedBody',
+        description: 'Message body to learners when renewal fails',
+        defaultMessage: 'Update your payment method by {subscriptionRenewalDate} to keep your subscription active.',
+    },
+    cancelledSubscriptionTitle: {
+        id: 'learner-dash.subscriptionInformation.information.cancelledSubscriptionTitle',
+        description: 'Message to learners when subscription is cancelled',
+        defaultMessage: '{subscriptionStatus}, {planName}',
+    },
+    cancelledSubscriptionBody: {
+        id: 'learner-dash.subscriptionInformation.information.cancelledSubscriptionBody',
+        description: 'Message to learners when subscription is cancelled',
+        defaultMessage: 'You have no upcoming payments. You canceled your subscription on {subscriptionEndDate}.',
+    },
+    renewSubscriptionButton: {
+        id: 'learner-dash.subscriptionInformation.information.renewSubscriptionButton',
+        description: 'Renew Subscription',
+        defaultMessage: 'Renew Subscription',
+    },
 });
 export default messages;
 //# sourceMappingURL=messages.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/SubscriptionInformation/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,aAAa,EAAE;QACb,EAAE,EAAE,qEAAqE;QACzE,WAAW,EAAE,gBAAgB;QAC7B,cAAc,EAAE,qBAAqB;KACtC;IACD,gBAAgB,EAAE;QAChB,EAAE,EAAE,oEAAoE;QACxE,WAAW,EAAE,6CAA6C;QAC1D,cAAc,EAAE,8DAA8D;KAC/E;IACD,wBAAwB,EAAE;QACxB,EAAE,EAAE,wEAAwE;QAC5E,WAAW,EAAE,6CAA6C;QAC1D,cAAc,EAAE,iGAAiG;KAClH;IACD,cAAc,EAAE;QACd,EAAE,EAAE,uEAAuE;QAC3E,WAAW,EAAE,uBAAuB;QACpC,cAAc,EAAE,iDAAiD;KAClE;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,qEAAqE;QACzE,WAAW,EAAE,qBAAqB;QAClC,cAAc,EAAE,wBAAwB;KACzC;IACD,qBAAqB,EAAE;QACrB,EAAE,EAAE,wEAAwE;QAC5E,WAAW,EAAE,yBAAyB;QACtC,cAAc,EAAE,iBAAiB;KAClC;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  statusMessage: {\n    id: 'learner-dash.subscriptionInformation.information.subscriptionStatus',\n    description: 'Status Message',\n    defaultMessage: 'Subscription Status',\n  },\n  cancelledMessage: {\n    id: 'learner-dash.subscriptionInformation.information.courseInformation',\n    description: 'Information of courses enrolled and savings',\n    defaultMessage: `You have saved {totalSavings} with your subscription so far!`,\n  },\n  coursesEnrollmentMessage: {\n    id: 'learner-dash.subscriptionInformation.information.enrollmentInformation',\n    description: 'Information of courses enrolled and savings',\n    defaultMessage: `As a subscriber, you've enrolled in {numberOfCoursesEnrolled} courses and saved {totalSavings}.`,\n  },\n  renewalMessage: {\n    id: 'learner-dash.subscriptionInformation.information.subscriptionSchedule',\n    description: 'Subscription Schedule',\n    defaultMessage: 'Your next payment is {subscriptionRenewalDate}.',\n  },\n  manageSubscriptionMessage: {\n    id: 'learner-dash.subscriptionInformation.information.manageSubscription',\n    description: 'Manage Subscription',\n    defaultMessage: 'Manage my subscription',\n  },\n  mySubscriptionHeading: {\n    id: 'learner-dash.subscriptionInformation.information.mySubscriptionHeading',\n    description: 'My Subscription Heading',\n    defaultMessage: 'My subscription',\n  },\n});\n\nexport default messages;\n"]}
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/SubscriptionInformation/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,aAAa,EAAE;QACb,EAAE,EAAE,qEAAqE;QACzE,WAAW,EAAE,gBAAgB;QAC7B,cAAc,EAAE,qBAAqB;KACtC;IACD,gBAAgB,EAAE;QAChB,EAAE,EAAE,oEAAoE;QACxE,WAAW,EAAE,6CAA6C;QAC1D,cAAc,EAAE,8DAA8D;KAC/E;IACD,wBAAwB,EAAE;QACxB,EAAE,EAAE,wEAAwE;QAC5E,WAAW,EAAE,6CAA6C;QAC1D,cAAc,EAAE,iGAAiG;KAClH;IACD,cAAc,EAAE;QACd,EAAE,EAAE,uEAAuE;QAC3E,WAAW,EAAE,uBAAuB;QACpC,cAAc,EAAE,iDAAiD;KAClE;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,qEAAqE;QACzE,WAAW,EAAE,qBAAqB;QAClC,cAAc,EAAE,wBAAwB;KACzC;IACD,qBAAqB,EAAE;QACrB,EAAE,EAAE,wEAAwE;QAC5E,WAAW,EAAE,yBAAyB;QACtC,cAAc,EAAE,iBAAiB;KAClC;IACD,uBAAuB,EAAE;QACvB,EAAE,EAAE,0EAA0E;QAC9E,WAAW,EAAE,uDAAuD;QACpE,cAAc,EAAE,kCAAkC;KACnD;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,qEAAqE;QACzE,WAAW,EAAE,8CAA8C;QAC3D,cAAc,EAAE,yBAAyB;KAC1C;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,oEAAoE;QACxE,WAAW,EAAE,6CAA6C;QAC1D,cAAc,EAAE,2FAA2F;KAC5G;IACD,0BAA0B,EAAE;QAC1B,EAAE,EAAE,6EAA6E;QACjF,WAAW,EAAE,oDAAoD;QACjE,cAAc,EAAE,kCAAkC;KACnD;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,4EAA4E;QAChF,WAAW,EAAE,oDAAoD;QACjE,cAAc,EAAE,yFAAyF;KAC1G;IACD,uBAAuB,EAAE;QACvB,EAAE,EAAE,0EAA0E;QAC9E,WAAW,EAAE,oBAAoB;QACjC,cAAc,EAAE,oBAAoB;KACrC;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  statusMessage: {\n    id: 'learner-dash.subscriptionInformation.information.subscriptionStatus',\n    description: 'Status Message',\n    defaultMessage: 'Subscription Status',\n  },\n  cancelledMessage: {\n    id: 'learner-dash.subscriptionInformation.information.courseInformation',\n    description: 'Information of courses enrolled and savings',\n    defaultMessage: `You have saved {totalSavings} with your subscription so far!`,\n  },\n  coursesEnrollmentMessage: {\n    id: 'learner-dash.subscriptionInformation.information.enrollmentInformation',\n    description: 'Information of courses enrolled and savings',\n    defaultMessage: `As a subscriber, you've enrolled in {numberOfCoursesEnrolled} courses and saved {totalSavings}.`,\n  },\n  renewalMessage: {\n    id: 'learner-dash.subscriptionInformation.information.subscriptionSchedule',\n    description: 'Subscription Schedule',\n    defaultMessage: 'Your next payment is {subscriptionRenewalDate}.',\n  },\n  manageSubscriptionMessage: {\n    id: 'learner-dash.subscriptionInformation.information.manageSubscription',\n    description: 'Manage Subscription',\n    defaultMessage: 'Manage my subscription',\n  },\n  mySubscriptionHeading: {\n    id: 'learner-dash.subscriptionInformation.information.mySubscriptionHeading',\n    description: 'My Subscription Heading',\n    defaultMessage: 'My subscription',\n  },\n  activeSubscriptionTitle: {\n    id: 'learner-dash.subscriptionInformation.information.activeSubscriptionTitle',\n    description: 'Message title to learners with an active subscription',\n    defaultMessage: '{subscriptionStatus}, {planName}',\n  },\n  renewalFailedTitle: {\n    id: 'learner-dash.subscriptionInformation.information.renewalFailedTitle',\n    description: 'Message title to learners when renewal fails',\n    defaultMessage: 'Subscription may expire',\n  },\n  renewalFailedBody: {\n    id: 'learner-dash.subscriptionInformation.information.renewalFailedBody',\n    description: 'Message body to learners when renewal fails',\n    defaultMessage: 'Update your payment method by {subscriptionRenewalDate} to keep your subscription active.',\n  },\n  cancelledSubscriptionTitle: {\n    id: 'learner-dash.subscriptionInformation.information.cancelledSubscriptionTitle',\n    description: 'Message to learners when subscription is cancelled',\n    defaultMessage: '{subscriptionStatus}, {planName}',\n  },\n  cancelledSubscriptionBody: {\n    id: 'learner-dash.subscriptionInformation.information.cancelledSubscriptionBody',\n    description: 'Message to learners when subscription is cancelled',\n    defaultMessage: 'You have no upcoming payments. You canceled your subscription on {subscriptionEndDate}.',\n  },\n  renewSubscriptionButton: {\n    id: 'learner-dash.subscriptionInformation.information.renewSubscriptionButton',\n    description: 'Renew Subscription',\n    defaultMessage: 'Renew Subscription',\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[]>;

package/dist/hooks/{usePopularCourses.js → usePopularCoursesAndPrograms.js}

@@ -18,10 +18,10 @@ export const searchKeys = {
     courses: (query, tags, page) => [...searchKeys.all, 'courses', query, tags, page],
     popular: (productType, limit) => [...searchKeys.all, 'popular', productType, limit],
 };
-export const usePopularCoursesData = (searchClient, enabled) => useQuery({
-    queryKey: searchKeys.popular(PRODUCT_TYPE_COURSE, 4),
+export const usePopularCoursesAndProgramsData = (searchClient, enabled, productType = PRODUCT_TYPE_COURSE) => useQuery({
+    queryKey: searchKeys.popular(productType, 4),
     queryFn: () => __awaiter(void 0, void 0, void 0, function* () {
-        const hits = yield fetchPopularProducts(searchClient, PRODUCT_TYPE_COURSE, 4);
+        const hits = yield fetchPopularProducts(searchClient, productType, 4);
         return hits.map((hit) => {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
             const hitDetails = hit;
@@ -31,8 +31,8 @@ export const usePopularCoursesData = (searchClient, enabled) => useQuery({
                 primary_description: (_e = (_d = (_c = hitDetails.primary_description) !== null && _c !== void 0 ? _c : hitDetails.short_description) !== null && _d !== void 0 ? _d : hitDetails.description) !== null && _e !== void 0 ? _e : '',
                 url: (_h = (_g = (_f = hitDetails.card_image_url) !== null && _f !== void 0 ? _f : hitDetails.image_url) !== null && _g !== void 0 ? _g : hitDetails.marketing_url) !== null && _h !== void 0 ? _h : '',
                 thumbnail: (_j = hitDetails.organization_logo_override) !== null && _j !== void 0 ? _j : '',
-                content_type: (_l = (_k = hitDetails.content_type) !== null && _k !== void 0 ? _k : hitDetails.type) !== null && _l !== void 0 ? _l : 'Course',
-                product: 'Course',
+                content_type: (_l = (_k = hitDetails.content_type) !== null && _k !== void 0 ? _k : hitDetails.product) !== null && _l !== void 0 ? _l : 'Course',
+                product: productType,
                 partner: (_m = hitDetails.partner) !== null && _m !== void 0 ? _m : '',
                 weeks_to_complete: (_o = hitDetails.weeks_to_complete) !== null && _o !== void 0 ? _o : undefined,
                 level: (_p = hitDetails.level) !== null && _p !== void 0 ? _p : undefined,
@@ -42,4 +42,4 @@ export const usePopularCoursesData = (searchClient, enabled) => useQuery({
     enabled: !!searchClient && enabled,
     staleTime: 1000 * 60 * 10,
 });
-//# sourceMappingURL=usePopularCourses.js.map
+//# sourceMappingURL=usePopularCoursesAndPrograms.js.map

package/dist/hooks/usePopularCoursesAndPrograms.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopularCoursesAndPrograms.js","sourceRoot":"","sources":["../../src/hooks/usePopularCoursesAndPrograms.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,uBAAuB,CAAC;AAGjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAG/D,iFAAiF;AACjF,oDAAoD;AAEpD,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,GAAG,EAAE,CAAC,QAAQ,CAAU;IACxB,QAAQ,EAAE,CAAC,KAAa,EAAE,IAAc,EAAE,EAAE,CAC1C,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,IAAI,CAAU;IACvD,OAAO,EAAE,CAAC,KAAa,EAAE,IAAc,EAAE,IAAY,EAAE,EAAE,CACvD,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAU;IAC5D,OAAO,EAAE,CAAC,WAAwB,EAAE,KAAa,EAAE,EAAE,CACnD,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,CAAU;CAC9D,CAAC;AAEF,MAAM,CAAC,MAAM,gCAAgC,GAAG,CAC9C,YAAiC,EACjC,OAAgB,EAChB,cAA2B,mBAAmB,EACX,EAAE,CACrC,QAAQ,CAAC;IACP,QAAQ,EAAE,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC5C,OAAO,EAAE,GAAS,EAAE;QAClB,MAAM,IAAI,GAAG,MAAM,oBAAoB,CAAC,YAAa,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC;QACvE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAmB,EAAE;;YACvC,MAAM,UAAU,GAAG,GAalB,CAAC;YAEF,OAAO;gBACL,QAAQ,EAAE,GAAG,CAAC,QAAQ;gBACtB,KAAK,EAAE,MAAA,MAAA,GAAG,CAAC,KAAK,mCAAI,GAAG,CAAC,IAAI,mCAAI,UAAU;gBAC1C,mBAAmB,EAAE,MAAA,MAAA,MAAA,UAAU,CAAC,mBAAmB,mCAAI,UAAU,CAAC,iBAAiB,mCAAI,UAAU,CAAC,WAAW,mCAAI,EAAE;gBACnH,GAAG,EAAE,MAAA,MAAA,MAAA,UAAU,CAAC,cAAc,mCAAI,UAAU,CAAC,SAAS,mCAAI,UAAU,CAAC,aAAa,mCAAI,EAAE;gBACxF,SAAS,EAAE,MAAA,UAAU,CAAC,0BAA0B,mCAAI,EAAE;gBACtD,YAAY,EAAE,MAAA,MAAA,UAAU,CAAC,YAAY,mCAAI,UAAU,CAAC,OAAO,mCAAI,QAAQ;gBACvE,OAAO,EAAE,WAAW;gBACpB,OAAO,EAAE,MAAA,UAAU,CAAC,OAAO,mCAAI,EAAE;gBACjC,iBAAiB,EAAE,MAAA,UAAU,CAAC,iBAAiB,mCAAI,SAAS;gBAC5D,KAAK,EAAE,MAAA,UAAU,CAAC,KAAK,mCAAI,SAAS;aACrC,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,CAAA;IACD,OAAO,EAAE,CAAC,CAAC,YAAY,IAAI,OAAO;IAClC,SAAS,EAAE,IAAI,GAAG,EAAE,GAAG,EAAE;CAC1B,CAAC,CAAC","sourcesContent":["import { useQuery, UseQueryResult } from '@tanstack/react-query';\nimport { SearchClient } from 'algoliasearch';\nimport { ProductType } from '@src/types/types';\nimport { PRODUCT_TYPE_COURSE } from '@src/constants';\nimport { fetchPopularProducts } from '@src/utils/algoliaUtils';\nimport { ProductCardItem } from '@src/containers/ProductCard/data/types';\n\n// ─── Query key factories ──────────────────────────────────────────────────────\n// Centralised so cache invalidation is never a typo\n\nexport const searchKeys = {\n  all: ['search'] as const,\n  programs: (query: string, tags: string[]) =>\n    [...searchKeys.all, 'programs', query, tags] as const,\n  courses: (query: string, tags: string[], page: number) =>\n    [...searchKeys.all, 'courses', query, tags, page] as const,\n  popular: (productType: ProductType, limit: number) =>\n    [...searchKeys.all, 'popular', productType, limit] as const,\n};\n\nexport const usePopularCoursesAndProgramsData = (\n  searchClient: SearchClient | null,\n  enabled: boolean,\n  productType: ProductType = PRODUCT_TYPE_COURSE\n): UseQueryResult<ProductCardItem[]> =>\n  useQuery({\n    queryKey: searchKeys.popular(productType, 4),\n    queryFn: async () => {\n      const hits = await fetchPopularProducts(searchClient!, productType, 4);\n      return hits.map((hit): ProductCardItem => {\n        const hitDetails = hit as {\n          short_description?: string,\n          primary_description?: string,\n          description?: string,\n          marketing_url?: string,\n          image_url?: string,\n          card_image_url?: string,\n          organization_logo_override?: string,\n          content_type?: string,\n          product?: string,\n          partner?: string,\n          weeks_to_complete?: number,\n          level?: string,\n        };\n\n        return {\n          objectID: hit.objectID,\n          title: hit.title ?? hit.name ?? 'Untitled',\n          primary_description: hitDetails.primary_description ?? hitDetails.short_description ?? hitDetails.description ?? '',\n          url: hitDetails.card_image_url ?? hitDetails.image_url ?? hitDetails.marketing_url ?? '',\n          thumbnail: hitDetails.organization_logo_override ?? '',\n          content_type: hitDetails.content_type ?? hitDetails.product ?? 'Course',\n          product: productType,\n          partner: hitDetails.partner ?? '',\n          weeks_to_complete: hitDetails.weeks_to_complete ?? undefined,\n          level: hitDetails.level ?? undefined,\n        };\n      });\n    },\n    enabled: !!searchClient && enabled,\n    staleTime: 1000 * 60 * 10,\n  });\n"]}

package/dist/slots.js

@@ -1,6 +1,8 @@
 import { learnerDashboardHeaderApp } from './widgets/LearnerDashboardHeader';
+import { progressiveProfilingApp } from './widgets/ProgressiveProfilingQuiz';
 const slots = [
     ...learnerDashboardHeaderApp.slots,
+    ...progressiveProfilingApp.slots,
 ];
 export default slots;
 //# sourceMappingURL=slots.js.map