@edx/frontend-app-subscription-learner-dashboard 1.4.0 → 1.5.0

package/dist/Main.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CurrentAppProvider, PageWrap } from '@openedx/frontend-base';
 import { appId } from './constants';
 import ContextProviders from './data/context';
 import Dashboard from './containers/Dashboard';
+import { SubscriptionInformation } from './containers/SubscriptionInformation';
 import './style.scss';
-const Main = () => (_jsx(CurrentAppProvider, { appId: appId, children: _jsx(ContextProviders, { children: _jsx(PageWrap, { children: _jsx(Dashboard, {}) }) }) }));
+const Main = () => (_jsx(CurrentAppProvider, { appId: appId, children: _jsx(ContextProviders, { children: _jsxs(PageWrap, { children: [_jsx(Dashboard, {}), _jsx(SubscriptionInformation, {})] }) }) }));
 export default Main;
 //# sourceMappingURL=Main.js.map

package/dist/Main.js.map

@@ -1 +1 @@
-{"version":3,"file":"Main.js","sourceRoot":"","sources":["../src/Main.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,gBAAgB,MAAM,gBAAgB,CAAC;AAC9C,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,OAAO,cAAc,CAAC;AAEtB,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,CACjB,KAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,YAC9B,KAAC,gBAAgB,cACf,KAAC,QAAQ,cACP,KAAC,SAAS,KAAG,GACJ,GACM,GACA,CACtB,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { CurrentAppProvider, PageWrap } from '@openedx/frontend-base';\n\nimport { appId } from './constants';\nimport ContextProviders from './data/context';\nimport Dashboard from './containers/Dashboard';\n\nimport './style.scss';\n\nconst Main = () => (\n  <CurrentAppProvider appId={appId}>\n    <ContextProviders>\n      <PageWrap>\n        <Dashboard />\n      </PageWrap>\n    </ContextProviders>\n  </CurrentAppProvider>\n);\n\nexport default Main;\n"]}
+{"version":3,"file":"Main.js","sourceRoot":"","sources":["../src/Main.jsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,gBAAgB,MAAM,gBAAgB,CAAC;AAC9C,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC;AAE/E,OAAO,cAAc,CAAC;AAEtB,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,CACjB,KAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,YAC9B,KAAC,gBAAgB,cACf,MAAC,QAAQ,eACP,KAAC,SAAS,KAAG,EACb,KAAC,uBAAuB,KAAG,IAClB,GACM,GACA,CACtB,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { CurrentAppProvider, PageWrap } from '@openedx/frontend-base';\n\nimport { appId } from './constants';\nimport ContextProviders from './data/context';\nimport Dashboard from './containers/Dashboard';\nimport { SubscriptionInformation } from './containers/SubscriptionInformation';\n\nimport './style.scss';\n\nconst Main = () => (\n  <CurrentAppProvider appId={appId}>\n    <ContextProviders>\n      <PageWrap>\n        <Dashboard />\n        <SubscriptionInformation />\n      </PageWrap>\n    </ContextProviders>\n  </CurrentAppProvider>\n);\n\nexport default Main;\n"]}

package/dist/containers/Dashboard/DashboardTabs.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo, useState, useCallback } from 'react';
 import { Tabs, Tab } from '@openedx/paragon';
-import CoursesPanel from '../../containers/CoursesPanel';
+import CoursesPanel from '../CoursesPanel';
+import ProgramsPanel from '../ProgramsPanel';
 const DashboardTabs = () => {
     var _a;
     // Defining the tabs here
@@ -14,7 +15,7 @@ const DashboardTabs = () => {
         {
             key: 'programs',
             title: 'Programs',
-            panel: _jsx("span", { children: "Programs tab will be available soon." }),
+            panel: _jsx(ProgramsPanel, {}),
         },
         {
             key: 'history',

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardTabs.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/DashboardTabs.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,YAAY,MAAM,+BAA+B,CAAC;AAEzD,MAAM,aAAa,GAAG,GAAG,EAAE;;IACzB,yBAAyB;IACzB,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACnC;YACE,GAAG,EAAE,SAAS;YACd,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,KAAC,YAAY,KAAG;SACxB;QACD;YACE,GAAG,EAAE,UAAU;YACf,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,kEAAiD;SACzD;QACD;YACE,GAAG,EAAE,SAAS;YACd,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,iEAAgD;SACxD;KACF,CAAC,EAAE,EAAE,CAAC,CAAC;IAER,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IACjE,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,MAAM,EAAE,EAAE;QAC7C,IAAI,MAAM,EAAE,CAAC;YACX,YAAY,CAAC,MAAM,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAC,6BAA6B,EAChC,gBAAgB,EAAE,MAAA,aAAa,CAAC,CAAC,CAAC,0CAAE,GAAG,EACvC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,eAAe,EACzB,SAAS,EAAC,MAAM,EAChB,YAAY,kBAEX,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACxB,KAAC,GAAG,IAAC,QAAQ,EAAE,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,YACrC,GAAG,CAAC,KAAK,IADmC,GAAG,CAAC,GAAG,CAEhD,CACP,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import React, { useMemo, useState, useCallback } from 'react';\nimport { Tabs, Tab } from '@openedx/paragon';\nimport CoursesPanel from '../../containers/CoursesPanel';\n\nconst DashboardTabs = () => {\n  // Defining the tabs here\n  const dashboardTabs = useMemo(() => ([\n    {\n      key: 'courses',\n      title: 'Courses',\n      panel: <CoursesPanel />,\n    },\n    {\n      key: 'programs',\n      title: 'Programs',\n      panel: <span>Programs tab will be available soon.</span>,\n    },\n    {\n      key: 'history',\n      title: 'History',\n      panel: <span>History tab will be available soon.</span>,\n    },\n  ]), []);\n\n  const [activeTab, setActiveTab] = useState(dashboardTabs[0].key);\n  const handleTabSelect = useCallback((tabKey) => {\n    if (tabKey) {\n      setActiveTab(tabKey);\n    }\n  }, []);\n\n  return (\n    <Tabs\n      id=\"subscription-dashboard-tabs\"\n      defaultActiveKey={dashboardTabs[0]?.key}\n      activeKey={activeTab}\n      onSelect={handleTabSelect}\n      className=\"mb-4\"\n      mountOnEnter\n    >\n      {dashboardTabs.map(tab => (\n        <Tab eventKey={tab.key} title={tab.title} key={tab.key}>\n          {tab.panel}\n        </Tab>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default DashboardTabs;\n"]}
+{"version":3,"file":"DashboardTabs.js","sourceRoot":"","sources":["../../../src/containers/Dashboard/DashboardTabs.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,MAAM,aAAa,GAAG,GAAG,EAAE;;IACzB,yBAAyB;IACzB,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACnC;YACE,GAAG,EAAE,SAAS;YACd,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,KAAC,YAAY,KAAG;SACxB;QACD;YACE,GAAG,EAAE,UAAU;YACf,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,KAAC,aAAa,KAAG;SACzB;QACD;YACE,GAAG,EAAE,SAAS;YACd,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,iEAAgD;SACxD;KACF,CAAC,EAAE,EAAE,CAAC,CAAC;IAER,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IACjE,MAAM,eAAe,GAAG,WAAW,CAAC,CAAC,MAAM,EAAE,EAAE;QAC7C,IAAI,MAAM,EAAE,CAAC;YACX,YAAY,CAAC,MAAM,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAC,6BAA6B,EAChC,gBAAgB,EAAE,MAAA,aAAa,CAAC,CAAC,CAAC,0CAAE,GAAG,EACvC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,eAAe,EACzB,SAAS,EAAC,MAAM,EAChB,YAAY,kBAEX,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACxB,KAAC,GAAG,IAAC,QAAQ,EAAE,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,CAAC,KAAK,YACrC,GAAG,CAAC,KAAK,IADmC,GAAG,CAAC,GAAG,CAEhD,CACP,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import React, { useMemo, useState, useCallback } from 'react';\nimport { Tabs, Tab } from '@openedx/paragon';\nimport CoursesPanel from '../CoursesPanel';\nimport ProgramsPanel from '../ProgramsPanel';\n\nconst DashboardTabs = () => {\n  // Defining the tabs here\n  const dashboardTabs = useMemo(() => ([\n    {\n      key: 'courses',\n      title: 'Courses',\n      panel: <CoursesPanel />,\n    },\n    {\n      key: 'programs',\n      title: 'Programs',\n      panel: <ProgramsPanel />,\n    },\n    {\n      key: 'history',\n      title: 'History',\n      panel: <span>History tab will be available soon.</span>,\n    },\n  ]), []);\n\n  const [activeTab, setActiveTab] = useState(dashboardTabs[0].key);\n  const handleTabSelect = useCallback((tabKey) => {\n    if (tabKey) {\n      setActiveTab(tabKey);\n    }\n  }, []);\n\n  return (\n    <Tabs\n      id=\"subscription-dashboard-tabs\"\n      defaultActiveKey={dashboardTabs[0]?.key}\n      activeKey={activeTab}\n      onSelect={handleTabSelect}\n      className=\"mb-4\"\n      mountOnEnter\n    >\n      {dashboardTabs.map(tab => (\n        <Tab eventKey={tab.key} title={tab.title} key={tab.key}>\n          {tab.panel}\n        </Tab>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default DashboardTabs;\n"]}

package/dist/containers/ProgramsPanel/NoProgramsView/index.d.ts

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

package/dist/containers/ProgramsPanel/NoProgramsView/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIntl } from '@openedx/frontend-base';
+import messages from './messages';
+import { Button } from '@openedx/paragon';
+import { Search } from '@openedx/paragon/icons';
+import { baseAppUrl } from '../../../data/services/lms/urls';
+import { exploreProgramsUrl } from '../../../data/constants/app';
+export const NoProgramsView = () => {
+    const { formatMessage } = useIntl();
+    return (_jsxs("div", { className: "no-programs-content-view", children: [_jsx("p", { children: formatMessage(messages.inProgressProgramsPrompt) }), _jsx(Button, { variant: "brand", as: "a", href: baseAppUrl(exploreProgramsUrl), iconBefore: Search, children: formatMessage(messages.findProgramsButton) })] }));
+};
+export default NoProgramsView;
+//# sourceMappingURL=index.js.map

package/dist/containers/ProgramsPanel/NoProgramsView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/containers/ProgramsPanel/NoProgramsView/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,CAAC,MAAM,cAAc,GAAO,GAAG,EAAE;IACrC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,OAAO,CACL,eAAK,SAAS,EAAC,0BAA0B,aACvC,sBAAI,aAAa,CAAC,QAAQ,CAAC,wBAAwB,CAAC,GAAK,EACzD,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,EAAE,EAAC,GAAG,EACN,IAAI,EAAE,UAAU,CAAC,kBAAkB,CAAC,EACpC,UAAU,EAAE,MAAM,YAEjB,aAAa,CAAC,QAAQ,CAAC,kBAAkB,CAAC,GACpC,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useIntl } from '@openedx/frontend-base';\nimport messages from './messages';\nimport { Button } from '@openedx/paragon';\nimport { Search } from '@openedx/paragon/icons';\nimport { baseAppUrl } from '@src/data/services/lms/urls';\nimport { exploreProgramsUrl } from '@src/data/constants/app';\n\nexport const NoProgramsView: FC = () => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <div className=\"no-programs-content-view\">\n      <p>{formatMessage(messages.inProgressProgramsPrompt)}</p>\n      <Button\n        variant=\"brand\"\n        as=\"a\"\n        href={baseAppUrl(exploreProgramsUrl)}\n        iconBefore={Search}\n      >\n        {formatMessage(messages.findProgramsButton)}\n      </Button>\n    </div>\n  );\n};\n\nexport default NoProgramsView;\n"]}

package/dist/containers/ProgramsPanel/NoProgramsView/messages.d.ts

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

package/dist/containers/ProgramsPanel/NoProgramsView/messages.js

@@ -0,0 +1,15 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    inProgressProgramsPrompt: {
+        id: 'Dashboard.NoProgramsView.inProgressProgramsPrompt',
+        defaultMessage: 'In-progress professional certificate programs will be found here.',
+        description: 'Placeholder text for in-progress programs section',
+    },
+    findProgramsButton: {
+        id: 'Dashboard.NoProgramsView.findProgramsButton',
+        defaultMessage: 'Find a program',
+        description: 'Button to find more programs',
+    }
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/containers/ProgramsPanel/NoProgramsView/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../src/containers/ProgramsPanel/NoProgramsView/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,wBAAwB,EAAE;QACxB,EAAE,EAAE,mDAAmD;QACvD,cAAc,EAAE,mEAAmE;QACnF,WAAW,EAAE,mDAAmD;KACjE;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,6CAA6C;QACjD,cAAc,EAAE,gBAAgB;QAChC,WAAW,EAAE,8BAA8B;KAC5C;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  inProgressProgramsPrompt: {\n    id: 'Dashboard.NoProgramsView.inProgressProgramsPrompt',\n    defaultMessage: 'In-progress professional certificate programs will be found here.',\n    description: 'Placeholder text for in-progress programs section',\n  },\n  findProgramsButton: {\n    id: 'Dashboard.NoProgramsView.findProgramsButton',\n    defaultMessage: 'Find a program',\n    description: 'Button to find more programs',\n  }\n});\n\nexport default messages;\n"]}

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

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

package/dist/containers/ProgramsPanel/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useIntl } from '@openedx/frontend-base';
+import messages from './messages';
+import NoProgramsView from './NoProgramsView';
+export const ProgramsPanel = () => {
+    const { formatMessage } = useIntl();
+    const [hasProgramsEnrollment] = useState(false);
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "programs-list-container mb-5", "data-testid": "programs-list", children: [_jsx("div", { className: "d-flex flex-row justify-content-between text-center", children: _jsx("h3", { className: "programs-list-title mb-3", children: formatMessage(messages.myPrograms) }) }), !hasProgramsEnrollment && _jsx(NoProgramsView, {})] }) }));
+};
+export default ProgramsPanel;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/ProgramsPanel/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,MAAM,CAAC,MAAM,aAAa,GAAO,GAAG,EAAE;IACpC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,CAAC,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,OAAO,CACL,4BACE,eAAK,SAAS,EAAC,8BAA8B,iBAAa,eAAe,aACvE,cAAK,SAAS,EAAC,qDAAqD,YAClE,aAAI,SAAS,EAAC,0BAA0B,YAAE,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,GAAM,GAC9E,EACL,CAAC,qBAAqB,IAAI,KAAC,cAAc,KAAG,IACzC,GACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FC, useState } from 'react';\nimport { useIntl } from '@openedx/frontend-base';\nimport messages from './messages';\nimport NoProgramsView from './NoProgramsView';\n\nexport const ProgramsPanel: FC = () => {\n  const { formatMessage } = useIntl();\n  const [hasProgramsEnrollment] = useState(false);\n\n  return (\n    <>\n      <div className=\"programs-list-container mb-5\" data-testid=\"programs-list\">\n        <div className=\"d-flex flex-row justify-content-between text-center\">\n          <h3 className=\"programs-list-title mb-3\">{formatMessage(messages.myPrograms)}</h3>\n        </div>\n        {!hasProgramsEnrollment && <NoProgramsView />}\n      </div>\n    </>\n  );\n};\n\nexport default ProgramsPanel;\n"]}

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

@@ -0,0 +1,23 @@
+declare const messages: {
+    myPrograms: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    emptyProgramsMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    explorePrograms: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    exploreProgramsCTAMessage: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/containers/ProgramsPanel/messages.js

@@ -0,0 +1,25 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    myPrograms: {
+        id: 'dashboard.myPrograms',
+        defaultMessage: 'Programs',
+        description: 'Label for Programs belonging to a user\'s active subscription',
+    },
+    emptyProgramsMessage: {
+        id: 'subs.emptyProgramsMessage',
+        defaultMessage: 'In-progress professional certificate programs will be found here.',
+        description: 'Message shown in the Programs tab of the learner dashboard',
+    },
+    explorePrograms: {
+        id: 'subs.explorePrograms',
+        defaultMessage: 'Explore programs',
+        description: 'Message shown in the explore programs button in the Programs tab of the learner dashboard',
+    },
+    exploreProgramsCTAMessage: {
+        id: 'subs.exploreProgramsCTAMessage',
+        defaultMessage: 'Advance your learning by exploring a program curriculum.',
+        description: 'Message shown in the explore programs button in the Programs tab of the learner dashboard',
+    }
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/ProgramsPanel/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,UAAU,EAAE;QACV,EAAE,EAAE,sBAAsB;QAC1B,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,+DAA+D;KAC7E;IACD,oBAAoB,EAAE;QACpB,EAAE,EAAE,2BAA2B;QAC/B,cAAc,EAAE,mEAAmE;QACnF,WAAW,EAAE,4DAA4D;KAC1E;IACD,eAAe,EAAE;QACf,EAAE,EAAE,sBAAsB;QAC1B,cAAc,EAAE,kBAAkB;QAClC,WAAW,EAAE,2FAA2F;KACzG;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,gCAAgC;QACpC,cAAc,EAAE,0DAA0D;QAC1E,WAAW,EAAE,2FAA2F;KACzG;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  myPrograms: {\n    id: 'dashboard.myPrograms',\n    defaultMessage: 'Programs',\n    description: 'Label for Programs belonging to a user\\'s active subscription',\n  },\n  emptyProgramsMessage: {\n    id: 'subs.emptyProgramsMessage',\n    defaultMessage: 'In-progress professional certificate programs will be found here.',\n    description: 'Message shown in the Programs tab of the learner dashboard',\n  },\n  explorePrograms: {\n    id: 'subs.explorePrograms',\n    defaultMessage: 'Explore programs',\n    description: 'Message shown in the explore programs button in the Programs tab of the learner dashboard',\n  },\n  exploreProgramsCTAMessage: {\n    id: 'subs.exploreProgramsCTAMessage',\n    defaultMessage: 'Advance your learning by exploring a program curriculum.',\n    description: 'Message shown in the explore programs button in the Programs tab of the learner dashboard',\n  }\n});\n\nexport default messages;\n"]}

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

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

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

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Button, Image } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import { utilHooks } from '../../../hooks';
+import messages from '../messages';
+import { manageSubscriptionURL } 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: 'cancelled', // can be 'active', 'cancelled', 'expired'
+    subscriptionStartDate: '05/22/25',
+    subscriptionEndDate: '05/22/26',
+    subscriptionRenewalDate: '05/22/26',
+    subscriptionRenewalPrice: '$36',
+    numberOfCoursesEnrolled: 5,
+    totalSavings: '$120',
+};
+export const SubscriptionInformation = () => {
+    const { formatMessage } = useIntl();
+    const formatDate = utilHooks.useFormatDate();
+    const subscriptionActions = [
+        _jsx(Button, { variant: "outline-brand", "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 p-3\\.5", children: [_jsx(Image, { className: "mr-2", src: "https://www.edx.org/trademark-logos/edx-logo-elm.svg", rounded: true, alt: "edX Logo", width: 40, height: 60 }), subscriptionInformationData.subscriptionStatus === 'cancelled' && (_jsx("h3", { children: formatMessage(messages.cancelledMessage, { totalSavings: subscriptionInformationData.totalSavings }) })), _jsx("p", { children: formatMessage(messages.coursesEnrollmentMessage, {
+                    numberOfCoursesEnrolled: subscriptionInformationData.numberOfCoursesEnrolled,
+                    totalSavings: subscriptionInformationData.totalSavings,
+                }) }), _jsxs(Alert, { dismissible: false, show: true, actions: subscriptionActions, className: "subscription-status-alert bg-light-200", children: [_jsx(Alert.Heading, { children: formatMessage(messages.statusMessage) }), _jsx("p", { children: formatMessage(messages.renewalMessage, {
+                            subscriptionRenewalDate: formatDate(subscriptionInformationData.subscriptionRenewalDate),
+                        }) })] })] }));
+};
+//# sourceMappingURL=SubscriptionInformation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubscriptionInformation.js","sourceRoot":"","sources":["../../../../src/containers/SubscriptionInformation/components/SubscriptionInformation.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACxD,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;AAEhE,qIAAqI;AACrI,yFAAyF;AACzF,MAAM,2BAA2B,GAAG;IAClC,YAAY,EAAE,IAAI;IAClB,kBAAkB,EAAE,WAAW,EAAE,0CAA0C;IAC3E,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;CACrB,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,eAAe,iBACX,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,4CAA2C,aACxD,KAAC,KAAK,IACJ,SAAS,EAAC,MAAM,EAChB,GAAG,EAAC,sDAAsD,EAC1D,OAAO,QACP,GAAG,EAAC,UAAU,EACd,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,EACD,2BAA2B,CAAC,kBAAkB,KAAK,WAAW,IAAI,CACjE,uBAAK,aAAa,CAAC,QAAQ,CAAC,gBAAgB,EAAE,EAAE,YAAY,EAAE,2BAA2B,CAAC,YAAY,EAAE,CAAC,GAAM,CAChH,EACD,sBACG,aAAa,CAAC,QAAQ,CAAC,wBAAwB,EAAE;oBAChD,uBAAuB,EAAE,2BAA2B,CAAC,uBAAuB;oBAC5E,YAAY,EAAE,2BAA2B,CAAC,YAAY;iBACvD,CAAC,GACA,EACJ,MAAC,KAAK,IACJ,WAAW,EAAE,KAAK,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,mBAAmB,EAC5B,SAAS,EAAC,wCAAwC,aAElD,KAAC,KAAK,CAAC,OAAO,cAAE,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,GAAiB,EACtE,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, Image } 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';\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: 'cancelled', // 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};\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=\"outline-brand\"\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 p-3\\.5\">\n      <Image\n        className=\"mr-2\"\n        src=\"https://www.edx.org/trademark-logos/edx-logo-elm.svg\"\n        rounded\n        alt=\"edX Logo\"\n        width={40}\n        height={60}\n      />\n      {subscriptionInformationData.subscriptionStatus === 'cancelled' && (\n        <h3>{formatMessage(messages.cancelledMessage, { totalSavings: subscriptionInformationData.totalSavings })}</h3>\n      )}\n      <p>\n        {formatMessage(messages.coursesEnrollmentMessage, {\n          numberOfCoursesEnrolled: subscriptionInformationData.numberOfCoursesEnrolled,\n          totalSavings: subscriptionInformationData.totalSavings,\n        })}\n      </p>\n      <Alert\n        dismissible={false}\n        show={true}\n        actions={subscriptionActions}\n        className=\"subscription-status-alert bg-light-200\"\n      >\n        <Alert.Heading>{formatMessage(messages.statusMessage)}</Alert.Heading>\n        <p>\n          {formatMessage(messages.renewalMessage, {\n            subscriptionRenewalDate: formatDate(subscriptionInformationData.subscriptionRenewalDate),\n          })}\n        </p>\n      </Alert>\n    </div>\n  );\n};\n"]}

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

@@ -0,0 +1 @@
+export { SubscriptionInformation } from "./components/SubscriptionInformation";

package/dist/containers/SubscriptionInformation/index.js

@@ -0,0 +1,2 @@
+export { SubscriptionInformation } from './components/SubscriptionInformation';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/SubscriptionInformation/index.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAC","sourcesContent":["export { SubscriptionInformation } from './components/SubscriptionInformation';\n"]}

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

@@ -0,0 +1,28 @@
+declare const messages: {
+    statusMessage: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    cancelledMessage: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    coursesEnrollmentMessage: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    renewalMessage: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+    manageSubscriptionMessage: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};
+export default messages;

package/dist/containers/SubscriptionInformation/messages.js

@@ -0,0 +1,30 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    statusMessage: {
+        id: 'learner-dash.subscriptionInformation.information.subscriptionStatus',
+        description: 'Status Message',
+        defaultMessage: 'Subscription Status',
+    },
+    cancelledMessage: {
+        id: 'learner-dash.subscriptionInformation.information.courseInformation',
+        description: 'Information of courses enrolled and savings',
+        defaultMessage: `You have saved {totalSavings} with your subscription so far!`,
+    },
+    coursesEnrollmentMessage: {
+        id: 'learner-dash.subscriptionInformation.information.enrollmentInformation',
+        description: 'Information of courses enrolled and savings',
+        defaultMessage: `As a subscriber, you've enrolled in {numberOfCoursesEnrolled} courses and saved {totalSavings}.`,
+    },
+    renewalMessage: {
+        id: 'learner-dash.subscriptionInformation.information.subscriptionSchedule',
+        description: 'Subscription Schedule',
+        defaultMessage: 'Subscription payment scheduled for {subscriptionRenewalDate}.',
+    },
+    manageSubscriptionMessage: {
+        id: 'learner-dash.subscriptionInformation.information.manageSubscription',
+        description: 'Manage Subscription',
+        defaultMessage: 'Manage my subscription',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

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

@@ -0,0 +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,+DAA+D;KAChF;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,qEAAqE;QACzE,WAAW,EAAE,qBAAqB;QAClC,cAAc,EAAE,wBAAwB;KACzC;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: 'Subscription payment scheduled for {subscriptionRenewalDate}.',\n  },\n  manageSubscriptionMessage: {\n    id: 'learner-dash.subscriptionInformation.information.manageSubscription',\n    description: 'Manage Subscription',\n    defaultMessage: 'Manage my subscription',\n  },\n});\n\nexport default messages;\n"]}

package/dist/data/constants/app.d.ts

@@ -2,4 +2,6 @@ export const locationId: string;
 export const SortKeys: any;
 export const FilterKeys: any;
 export const ListPageSize: 25;
-export const subscriptionRenewalURL: "https://courses.edx.org/renew-subscription";
+export const subscriptionRenewalURL: "https://courses.edx.org/manage-subscription";
+export const exploreProgramsUrl: "/explore-programs";
+export const manageSubscriptionURL: "/manage-subscription";

package/dist/data/constants/app.js

@@ -13,5 +13,7 @@ export const FilterKeys = StrictDict({
 });
 export const ListPageSize = 25;
 // TODO : Below URL is temporary and will be removed once the subscription renewal flow is implemented in the app.
-export const subscriptionRenewalURL = 'https://courses.edx.org/renew-subscription';
+export const subscriptionRenewalURL = 'https://courses.edx.org/manage-subscription';
+export const exploreProgramsUrl = '/explore-programs';
+export const manageSubscriptionURL = '/manage-subscription';
 //# sourceMappingURL=app.js.map

package/dist/data/constants/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sourceRoot":"","sources":["../../../src/data/constants/app.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AAE5D,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC;IACjC,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC;IACnC,UAAU,EAAE,YAAY;IACxB,UAAU,EAAE,YAAY;IACxB,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,aAAa;IAC1B,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAC/B,kHAAkH;AAClH,MAAM,CAAC,MAAM,sBAAsB,GAAG,4CAA4C,CAAC","sourcesContent":["import { StrictDict } from '../../utils';\nexport const locationId = window.location.pathname.slice(1);\n\nexport const SortKeys = StrictDict({\n  enrolled: 'enrolled',\n  title: 'title',\n});\n\nexport const FilterKeys = StrictDict({\n  inProgress: 'inProgress',\n  notStarted: 'notStarted',\n  done: 'done',\n  notEnrolled: 'notEnrolled',\n  upgraded: 'upgraded',\n});\n\nexport const ListPageSize = 25;\n// TODO : Below URL is temporary and will be removed once the subscription renewal flow is implemented in the app.\nexport const subscriptionRenewalURL = 'https://courses.edx.org/renew-subscription';\n"]}
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../../../src/data/constants/app.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AAE5D,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC;IACjC,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC;IACnC,UAAU,EAAE,YAAY;IACxB,UAAU,EAAE,YAAY;IACxB,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,aAAa;IAC1B,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAC/B,kHAAkH;AAClH,MAAM,CAAC,MAAM,sBAAsB,GAAG,6CAA6C,CAAC;AACpF,MAAM,CAAC,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AACtD,MAAM,CAAC,MAAM,qBAAqB,GAAG,sBAAsB,CAAC","sourcesContent":["import { StrictDict } from '../../utils';\nexport const locationId = window.location.pathname.slice(1);\n\nexport const SortKeys = StrictDict({\n  enrolled: 'enrolled',\n  title: 'title',\n});\n\nexport const FilterKeys = StrictDict({\n  inProgress: 'inProgress',\n  notStarted: 'notStarted',\n  done: 'done',\n  notEnrolled: 'notEnrolled',\n  upgraded: 'upgraded',\n});\n\nexport const ListPageSize = 25;\n// TODO : Below URL is temporary and will be removed once the subscription renewal flow is implemented in the app.\nexport const subscriptionRenewalURL = 'https://courses.edx.org/manage-subscription';\nexport const exploreProgramsUrl = '/explore-programs';\nexport const manageSubscriptionURL = '/manage-subscription';\n"]}

package/package.json

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