@edx/frontend-app-subscription-learner-dashboard 1.55.1 → 1.55.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/containers/ProgramDashboard/ProgramProgress/CompletedTabData/CompletedRecordBanner/index.js +5 -2
- package/dist/containers/ProgramDashboard/ProgramProgress/CompletedTabData/CompletedRecordBanner/index.js.map +1 -1
- package/dist/containers/ProgramDashboard/ProgramsList/index.js +6 -5
- package/dist/containers/ProgramDashboard/ProgramsList/index.js.map +1 -1
- package/dist/containers/ProgramsPanel/NoProgramsView/index.js +4 -4
- package/dist/containers/ProgramsPanel/NoProgramsView/index.js.map +1 -1
- package/dist/containers/ProgramsPanel/index.js +11 -2
- package/dist/containers/ProgramsPanel/index.js.map +1 -1
- package/dist/data/constants/app.d.ts +3 -0
- package/dist/data/constants/app.js +3 -0
- package/dist/data/constants/app.js.map +1 -1
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.js +1 -0
- package/dist/utils/index.js.map +1 -1
- package/dist/utils/responsiveUtils.d.ts +5 -0
- package/dist/utils/responsiveUtils.js +13 -0
- package/dist/utils/responsiveUtils.js.map +1 -0
- package/package.json +1 -1
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useIntl } from '@openedx/frontend-base';
|
|
2
|
+
import { useIntl, getAppConfig } from '@openedx/frontend-base';
|
|
3
3
|
import { Card, Button, Row, Col, Icon } from '@openedx/paragon';
|
|
4
4
|
import { OpenInNew } from '@openedx/paragon/icons';
|
|
5
|
+
import { appId } from '../../../../../constants';
|
|
5
6
|
import messages from '../../messages';
|
|
6
7
|
import './index.scss';
|
|
7
8
|
export const CompletedRecordBanner = () => {
|
|
9
|
+
var _a;
|
|
8
10
|
const { formatMessage } = useIntl();
|
|
9
|
-
|
|
11
|
+
const programRecordsUrl = (_a = getAppConfig(appId).PROGRAM_RECORDS_URL) !== null && _a !== void 0 ? _a : 'https://records.edx.org/';
|
|
12
|
+
return (_jsx(Card, { className: "mb-3 mt-4 completed-banner-card", "data-testid": "completed-banner-card", children: _jsxs(Card.Section, { className: "pt-3 pb-3 px-4 border-top", children: [_jsx(Row, { children: _jsxs(Col, { xs: 12, children: [_jsx("h5", { className: "mb-1 font-weight-bold", children: formatMessage(messages.programProgressCompletedBannerTitle) }), _jsx("div", { className: "text-muted", children: formatMessage(messages.programProgressCompletedBannerDescription) })] }) }), _jsx(Row, { className: "mt-3", children: _jsxs(Col, { xs: 12, className: "d-flex justify-content-end", children: [_jsxs(Button, { variant: "outline-primary", className: "mr-2 d-flex align-items-center", as: "a", target: "_blank", rel: "noopener noreferrer", href: "https://help.edx.org/edxlearner/s/article/Viewing-and-sharing-your-program-record?language=en_US", children: [formatMessage(messages.programProgressCompletedBannerHelpCenterButton), _jsx(Icon, { src: OpenInNew, className: "ml-1" })] }), _jsx(Button, { variant: "primary", as: "a", target: "_blank", rel: "noopener noreferrer", href: `${programRecordsUrl}`, children: formatMessage(messages.programProgressCompletedBannerMyProgramRecordsButton) })] }) })] }) }));
|
|
10
13
|
};
|
|
11
14
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/containers/ProgramDashboard/ProgramProgress/CompletedTabData/CompletedRecordBanner/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/containers/ProgramDashboard/ProgramProgress/CompletedTabData/CompletedRecordBanner/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,qBAAqB,GAAO,GAAG,EAAE;;IAC5C,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,iBAAiB,GAAG,MAAA,YAAY,CAAC,KAAK,CAAC,CAAC,mBAAmB,mCAAI,0BAA0B,CAAC;IAEhG,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAC,iCAAiC,iBAAa,uBAAuB,YACnF,MAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAC,2BAA2B,aACjD,KAAC,GAAG,cACF,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,aACT,aAAI,SAAS,EAAC,uBAAuB,YAAE,aAAa,CAAC,QAAQ,CAAC,mCAAmC,CAAC,GAAM,EACxG,cAAK,SAAS,EAAC,YAAY,YACxB,aAAa,CAAC,QAAQ,CAAC,yCAAyC,CAAC,GAC9D,IACF,GACF,EAEN,KAAC,GAAG,IAAC,SAAS,EAAC,MAAM,YACnB,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,4BAA4B,aACjD,MAAC,MAAM,IAAC,OAAO,EAAC,iBAAiB,EAAC,SAAS,EAAC,gCAAgC,EAAC,EAAE,EAAC,GAAG,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,EAAC,IAAI,EAAC,kGAAkG,aAClO,aAAa,CAAC,QAAQ,CAAC,8CAA8C,CAAC,EACvE,KAAC,IAAI,IAAC,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,IAClC,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,EAAE,EAAC,GAAG,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,EAAC,IAAI,EAAE,GAAG,iBAAiB,EAAE,YAAG,aAAa,CAAC,QAAQ,CAAC,oDAAoD,CAAC,GAAU,IAC5L,GACF,IACO,GACV,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useIntl, getAppConfig } from '@openedx/frontend-base';\nimport { Card, Button, Row, Col, Icon } from '@openedx/paragon';\nimport { OpenInNew } from '@openedx/paragon/icons';\n\nimport { appId } from '@src/constants';\nimport messages from '../../messages';\nimport './index.scss';\n\nexport const CompletedRecordBanner: FC = () => {\n const { formatMessage } = useIntl();\n const programRecordsUrl = getAppConfig(appId).PROGRAM_RECORDS_URL ?? 'https://records.edx.org/';\n\n return (\n <Card className=\"mb-3 mt-4 completed-banner-card\" data-testid=\"completed-banner-card\">\n <Card.Section className=\"pt-3 pb-3 px-4 border-top\">\n <Row>\n <Col xs={12}>\n <h5 className=\"mb-1 font-weight-bold\">{formatMessage(messages.programProgressCompletedBannerTitle)}</h5>\n <div className=\"text-muted\">\n {formatMessage(messages.programProgressCompletedBannerDescription)}\n </div>\n </Col>\n </Row>\n\n <Row className=\"mt-3\">\n <Col xs={12} className=\"d-flex justify-content-end\">\n <Button variant=\"outline-primary\" className=\"mr-2 d-flex align-items-center\" as=\"a\" target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://help.edx.org/edxlearner/s/article/Viewing-and-sharing-your-program-record?language=en_US\">\n {formatMessage(messages.programProgressCompletedBannerHelpCenterButton)}\n <Icon src={OpenInNew} className=\"ml-1\" />\n </Button>\n <Button variant=\"primary\" as=\"a\" target=\"_blank\" rel=\"noopener noreferrer\" href={`${programRecordsUrl}`}>{formatMessage(messages.programProgressCompletedBannerMyProgramRecordsButton)}</Button>\n </Col>\n </Row>\n </Card.Section>\n </Card>\n );\n};\n"]}
|
|
@@ -1,18 +1,19 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { Alert, CardGrid, Col, Row, Spinner, } from '@openedx/paragon';
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { Alert, CardGrid, Col, Row, Spinner, Pagination } from '@openedx/paragon';
|
|
3
3
|
import { useIntl, getSiteConfig } from '@openedx/frontend-base';
|
|
4
4
|
import appMessages from '../../../messages';
|
|
5
5
|
import ProgramListCard from './ProgramListCard';
|
|
6
6
|
import messages from './messages';
|
|
7
|
+
import { ProgramPaginationListLabel } from '../../../data/constants/app';
|
|
7
8
|
import './index.scss';
|
|
8
|
-
const ProgramsList = ({
|
|
9
|
+
const ProgramsList = ({ visiblePrograms, isLoading, errorState, numPages, setPageNumber }) => {
|
|
9
10
|
const { formatMessage } = useIntl();
|
|
10
11
|
const renderPrograms = () => {
|
|
11
12
|
if (isLoading) {
|
|
12
13
|
return (_jsx(Col, { sm: 12, className: "d-flex justify-content-center py-4", children: _jsx(Spinner, { animation: "border", screenReaderText: formatMessage(appMessages['subs-dash.loadingSR']) }) }));
|
|
13
14
|
}
|
|
14
|
-
if (
|
|
15
|
-
return (_jsx(_Fragment, { children:
|
|
15
|
+
if (visiblePrograms.length > 0) {
|
|
16
|
+
return (_jsx(_Fragment, { children: _jsxs(Col, { sm: 12, md: 12, children: [_jsx(CardGrid, { columnSizes: { xs: 12, lg: 6 }, children: visiblePrograms.map(program => (_jsx(ProgramListCard, { program: program }, program.uuid))) }), numPages > 1 && (_jsx(Pagination, { variant: "secondary", paginationLabel: ProgramPaginationListLabel, className: "mx-auto mb-2", pageCount: numPages, onPageSelect: setPageNumber }))] }) }));
|
|
16
17
|
}
|
|
17
18
|
return null;
|
|
18
19
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramsList/index.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramsList/index.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,EAC/C,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,WAAW,MAAM,mBAAmB,CAAC;AAC5C,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAErE,OAAO,cAAc,CAAC;AAEtB,MAAM,YAAY,GAA0B,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE;IAClH,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,SAAS,EAAE,CAAC;YACd,OAAO,CACL,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,oCAAoC,YACzD,KAAC,OAAO,IAAC,SAAS,EAAC,QAAQ,EAAC,gBAAgB,EAAE,aAAa,CAAC,WAAW,CAAC,qBAAqB,CAAC,CAAC,GAAI,GAC/F,CACP,CAAC;QACJ,CAAC;QACD,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC/B,OAAO,CACL,4BACE,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,aACjB,KAAC,QAAQ,IAAC,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,YACrC,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAC9B,KAAC,eAAe,IAEd,OAAO,EAAE,OAAO,IADX,OAAO,CAAC,IAAI,CAEjB,CACH,CAAC,GACO,EACV,QAAQ,GAAG,CAAC,IAAI,CACf,KAAC,UAAU,IACT,OAAO,EAAC,WAAW,EACnB,eAAe,EAAE,0BAA0B,EAC3C,SAAS,EAAC,cAAc,EACxB,SAAS,EAAE,QAAQ,EACnB,YAAY,EAAE,aAAa,GAC3B,CACH,IACG,GACL,CACJ,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,MAAM,UAAU,GAAG,GAAG,aAAa,EAAE,CAAC,UAAU,UAAU,CAAC;QAC3D,OAAO,CACL,KAAC,KAAK,IAAC,SAAS,EAAC,yBAAyB,EAAC,OAAO,EAAC,QAAQ,YACxD,aAAa,CAAC,QAAQ,CAAC,8BAA8B,EAAE;gBACtD,iBAAiB,EAAE,CACjB,KAAC,KAAK,CAAC,IAAI,IAAC,IAAI,EAAE,UAAU,YACzB,UAAU,GACA,CACd;aACF,CAAC,GACI,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,wBACE,KAAC,GAAG,IAAC,SAAS,EAAC,MAAM,YAClB,UAAU,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,GACjD,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import React from 'react';\nimport {\n Alert, CardGrid, Col, Row, Spinner, Pagination\n} from '@openedx/paragon';\nimport { useIntl, getSiteConfig } from '@openedx/frontend-base';\nimport appMessages from '../../../messages';\nimport ProgramListCard from './ProgramListCard';\nimport messages from './messages';\nimport { ProgramList } from '../data/types';\nimport { ProgramPaginationListLabel } from '@src/data/constants/app';\n\nimport './index.scss';\n\nconst ProgramsList: React.FC<ProgramList> = ({ visiblePrograms, isLoading, errorState, numPages, setPageNumber }) => {\n const { formatMessage } = useIntl();\n\n const renderPrograms = () => {\n if (isLoading) {\n return (\n <Col sm={12} className=\"d-flex justify-content-center py-4\">\n <Spinner animation=\"border\" screenReaderText={formatMessage(appMessages['subs-dash.loadingSR'])} />\n </Col>\n );\n }\n if (visiblePrograms.length > 0) {\n return (\n <>\n <Col sm={12} md={12}>\n <CardGrid columnSizes={{ xs: 12, lg: 6 }}>\n {visiblePrograms.map(program => (\n <ProgramListCard\n key={program.uuid}\n program={program}\n />\n ))}\n </CardGrid>\n {numPages > 1 && (\n <Pagination\n variant=\"secondary\"\n paginationLabel={ProgramPaginationListLabel}\n className=\"mx-auto mb-2\"\n pageCount={numPages}\n onPageSelect={setPageNumber}\n />\n )}\n </Col>\n </>\n );\n }\n return null;\n };\n\n const renderFailureAlert = () => {\n const contactUrl = `${getSiteConfig().lmsBaseUrl}/contact`;\n return (\n <Alert className=\"mx-auto container-mw-md\" variant=\"danger\">\n {formatMessage(messages.errorLoadingProgramEnrollments, {\n contactSupportUrl: (\n <Alert.Link href={contactUrl}>\n {contactUrl}\n </Alert.Link>\n ),\n })}\n </Alert>\n );\n };\n\n return (\n <div>\n <Row className=\"py-3\">\n {errorState ? renderFailureAlert() : renderPrograms()}\n </Row>\n </div>\n );\n};\n\nexport default ProgramsList;\n"]}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useIntl } from '@openedx/frontend-base';
|
|
2
|
+
import { useIntl, getSiteConfig } from '@openedx/frontend-base';
|
|
3
3
|
import messages from './messages';
|
|
4
4
|
import { Button } from '@openedx/paragon';
|
|
5
5
|
import { Search } from '@openedx/paragon/icons';
|
|
6
|
-
import {
|
|
7
|
-
import { exploreProgramsUrl } from '../../../data/constants/app';
|
|
6
|
+
import { searchPageUrl } from '../../../data/constants/app';
|
|
8
7
|
export const NoProgramsView = () => {
|
|
9
8
|
const { formatMessage } = useIntl();
|
|
10
|
-
|
|
9
|
+
const baseUrl = getSiteConfig().baseUrl;
|
|
10
|
+
return (_jsxs("div", { className: "no-programs-content-view", children: [_jsx("p", { children: formatMessage(messages.inProgressProgramsPrompt) }), _jsx(Button, { variant: "brand", as: "a", href: `${baseUrl}${searchPageUrl}`, iconBefore: Search, children: formatMessage(messages.findProgramsButton) })] }));
|
|
11
11
|
};
|
|
12
12
|
export default NoProgramsView;
|
|
13
13
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/containers/ProgramsPanel/NoProgramsView/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/containers/ProgramsPanel/NoProgramsView/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEhE,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,cAAc,GAAO,GAAG,EAAE;IACrC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC,OAAO,CAAC;IAExC,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,GAAG,OAAO,GAAG,aAAa,EAAE,EAClC,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, getSiteConfig } from '@openedx/frontend-base';\n\nimport messages from './messages';\nimport { Button } from '@openedx/paragon';\nimport { Search } from '@openedx/paragon/icons';\nimport { searchPageUrl } from '@src/data/constants/app';\n\nexport const NoProgramsView: FC = () => {\n const { formatMessage } = useIntl();\n const baseUrl = getSiteConfig().baseUrl;\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={`${baseUrl}${searchPageUrl}`}\n iconBefore={Search}\n >\n {formatMessage(messages.findProgramsButton)}\n </Button>\n </div>\n );\n};\n\nexport default NoProgramsView;\n"]}
|
|
@@ -1,19 +1,28 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useMemo } from 'react';
|
|
2
|
+
import { useMemo, useState } from 'react';
|
|
3
3
|
import { camelCaseObject, useIntl } from '@openedx/frontend-base';
|
|
4
4
|
import messages from './messages';
|
|
5
5
|
import NoProgramsView from './NoProgramsView';
|
|
6
6
|
import { ProgramsList } from '../ProgramDashboard';
|
|
7
7
|
import { useProgramsListData } from '../../data/hooks/queryHooks';
|
|
8
|
+
import { ListPageSize, ProgramsListMobilePageSize } from '../../data/constants/app';
|
|
9
|
+
import { useViewport } from '../../utils';
|
|
8
10
|
export const ProgramsPanel = () => {
|
|
9
11
|
const { formatMessage } = useIntl();
|
|
10
12
|
const { data, isLoading, isError: errorState } = useProgramsListData();
|
|
11
13
|
const programsData = useMemo(() => { var _a; return (_a = camelCaseObject(data === null || data === void 0 ? void 0 : data.programs)) !== null && _a !== void 0 ? _a : []; }, [data === null || data === void 0 ? void 0 : data.programs]);
|
|
12
14
|
const hasProgramsEnrollment = programsData.length > 0;
|
|
13
15
|
const shouldRenderNoProgramsView = !isLoading && !errorState && !hasProgramsEnrollment;
|
|
16
|
+
const [pageNumber, setPageNumber] = useState(1);
|
|
17
|
+
const { isMobile } = useViewport();
|
|
18
|
+
const pageSize = isMobile ? ProgramsListMobilePageSize : ListPageSize;
|
|
19
|
+
const { visiblePrograms, numPages } = useMemo(() => ({
|
|
20
|
+
visiblePrograms: programsData.slice((pageNumber - 1) * pageSize, pageNumber * pageSize),
|
|
21
|
+
numPages: Math.ceil(programsData.length / pageSize),
|
|
22
|
+
}), [programsData, pageNumber, pageSize]);
|
|
14
23
|
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) }) }), shouldRenderNoProgramsView
|
|
15
24
|
? _jsx(NoProgramsView, {})
|
|
16
|
-
: _jsx(ProgramsList, {
|
|
25
|
+
: (_jsx(ProgramsList, { visiblePrograms: visiblePrograms, isLoading: isLoading, errorState: errorState, numPages: numPages, setPageNumber: setPageNumber }))] }) }));
|
|
17
26
|
};
|
|
18
27
|
export default ProgramsPanel;
|
|
19
28
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/ProgramsPanel/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,OAAO,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/ProgramsPanel/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AACnF,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,MAAM,CAAC,MAAM,aAAa,GAAO,GAAG,EAAE;IACpC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACvE,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,eAAe,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,CAAC,mCAAI,EAAE,CAAA,EAAA,EAAE,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,CAAC,CAAC,CAAC;IAC5F,MAAM,qBAAqB,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;IACtD,MAAM,0BAA0B,GAAG,CAAC,SAAS,IAAI,CAAC,UAAU,IAAI,CAAC,qBAAqB,CAAC;IAEvF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAChD,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,CAAC;IACnC,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,YAAY,CAAC;IAEtE,MAAM,EAAE,eAAe,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACnD,eAAe,EAAE,YAAY,CAAC,KAAK,CACjC,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,QAAQ,EAC3B,UAAU,GAAG,QAAQ,CACtB;QACD,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,QAAQ,CAAC;KACpD,CAAC,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1C,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,0BAA0B;oBACzB,CAAC,CAAC,KAAC,cAAc,KAAG;oBACpB,CAAC,CAAC,CACE,KAAC,YAAY,IACX,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,GAC5B,CACH,IACD,GACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { FC, useMemo, useState } from 'react';\nimport { camelCaseObject, useIntl } from '@openedx/frontend-base';\nimport messages from './messages';\nimport NoProgramsView from './NoProgramsView';\nimport { ProgramsList } from '../ProgramDashboard';\nimport { useProgramsListData } from '@src/data/hooks/queryHooks';\nimport { ListPageSize, ProgramsListMobilePageSize } from '@src/data/constants/app';\nimport { useViewport } from '@src/utils';\n\nexport const ProgramsPanel: FC = () => {\n const { formatMessage } = useIntl();\n const { data, isLoading, isError: errorState } = useProgramsListData();\n const programsData = useMemo(() => camelCaseObject(data?.programs) ?? [], [data?.programs]);\n const hasProgramsEnrollment = programsData.length > 0;\n const shouldRenderNoProgramsView = !isLoading && !errorState && !hasProgramsEnrollment;\n\n const [pageNumber, setPageNumber] = useState(1);\n const { isMobile } = useViewport();\n const pageSize = isMobile ? ProgramsListMobilePageSize : ListPageSize;\n\n const { visiblePrograms, numPages } = useMemo(() => ({\n visiblePrograms: programsData.slice(\n (pageNumber - 1) * pageSize,\n pageNumber * pageSize,\n ),\n numPages: Math.ceil(programsData.length / pageSize),\n }), [programsData, pageNumber, pageSize]);\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 {shouldRenderNoProgramsView\n ? <NoProgramsView />\n : (\n <ProgramsList\n visiblePrograms={visiblePrograms}\n isLoading={isLoading}\n errorState={errorState}\n numPages={numPages}\n setPageNumber={setPageNumber}\n />\n )}\n </div>\n </>\n );\n};\n\nexport default ProgramsPanel;\n"]}
|
|
@@ -5,3 +5,6 @@ export const ListPageSize: 6;
|
|
|
5
5
|
export const subscriptionRenewalURL: "/manage-subscription";
|
|
6
6
|
export const exploreProgramsUrl: "/explore-programs";
|
|
7
7
|
export const manageSubscriptionURL: "/manage-subscription";
|
|
8
|
+
export const ProgramsListMobilePageSize: 4;
|
|
9
|
+
export const ProgramPaginationListLabel: "Program List";
|
|
10
|
+
export const searchPageUrl: "/subscription-search";
|
|
@@ -16,4 +16,7 @@ export const ListPageSize = 6;
|
|
|
16
16
|
export const subscriptionRenewalURL = '/manage-subscription';
|
|
17
17
|
export const exploreProgramsUrl = '/explore-programs';
|
|
18
18
|
export const manageSubscriptionURL = '/manage-subscription';
|
|
19
|
+
export const ProgramsListMobilePageSize = 4;
|
|
20
|
+
export const ProgramPaginationListLabel = 'Program List';
|
|
21
|
+
export const searchPageUrl = '/subscription-search';
|
|
19
22
|
//# sourceMappingURL=app.js.map
|
|
@@ -1 +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,CAAC,CAAC;AAC9B,kHAAkH;AAClH,MAAM,CAAC,MAAM,sBAAsB,GAAG,sBAAsB,CAAC;AAC7D,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 = 6;\n// TODO : Below URL is temporary and will be removed once the subscription renewal flow is implemented in the app.\nexport const subscriptionRenewalURL = '/manage-subscription';\nexport const exploreProgramsUrl = '/explore-programs';\nexport const manageSubscriptionURL = '/manage-subscription';\n"]}
|
|
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,CAAC,CAAC;AAC9B,kHAAkH;AAClH,MAAM,CAAC,MAAM,sBAAsB,GAAG,sBAAsB,CAAC;AAC7D,MAAM,CAAC,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AACtD,MAAM,CAAC,MAAM,qBAAqB,GAAG,sBAAsB,CAAC;AAC5D,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,CAAC;AAC5C,MAAM,CAAC,MAAM,0BAA0B,GAAG,cAAc,CAAC;AACzD,MAAM,CAAC,MAAM,aAAa,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 = 6;\n// TODO : Below URL is temporary and will be removed once the subscription renewal flow is implemented in the app.\nexport const subscriptionRenewalURL = '/manage-subscription';\nexport const exploreProgramsUrl = '/explore-programs';\nexport const manageSubscriptionURL = '/manage-subscription';\nexport const ProgramsListMobilePageSize = 4;\nexport const ProgramPaginationListLabel = 'Program List';\nexport const searchPageUrl = '/subscription-search';\n"]}
|
package/dist/utils/index.d.ts
CHANGED
package/dist/utils/index.js
CHANGED
|
@@ -2,4 +2,5 @@ export const nullMethod = () => ({});
|
|
|
2
2
|
export { default as StrictDict } from './StrictDict';
|
|
3
3
|
export { default as keyStore } from './keyStore';
|
|
4
4
|
export { default as dateFormatter } from './dateFormatter';
|
|
5
|
+
export { useViewport } from './responsiveUtils';
|
|
5
6
|
//# sourceMappingURL=index.js.map
|
package/dist/utils/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.js"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AAErC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export const nullMethod = () => ({});\n\nexport { default as StrictDict } from './StrictDict';\nexport { default as keyStore } from './keyStore';\nexport { default as dateFormatter } from './dateFormatter';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.js"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AAErC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export const nullMethod = () => ({});\n\nexport { default as StrictDict } from './StrictDict';\nexport { default as keyStore } from './keyStore';\nexport { default as dateFormatter } from './dateFormatter';\nexport { useViewport } from './responsiveUtils';\n"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { useWindowSize, breakpoints } from '@openedx/paragon';
|
|
2
|
+
export const useViewport = () => {
|
|
3
|
+
var _a, _b, _c, _d;
|
|
4
|
+
const { width = 0 } = useWindowSize();
|
|
5
|
+
const mobileMax = (_b = (_a = breakpoints.medium) === null || _a === void 0 ? void 0 : _a.minWidth) !== null && _b !== void 0 ? _b : 768;
|
|
6
|
+
const desktopMin = (_d = (_c = breakpoints.extraLarge) === null || _c === void 0 ? void 0 : _c.minWidth) !== null && _d !== void 0 ? _d : 1200;
|
|
7
|
+
return {
|
|
8
|
+
isMobile: width < mobileMax,
|
|
9
|
+
isTablet: width >= mobileMax && width < desktopMin,
|
|
10
|
+
isDesktop: width >= desktopMin,
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=responsiveUtils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"responsiveUtils.js","sourceRoot":"","sources":["../../src/utils/responsiveUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE9D,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;;IAC9B,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,GAAG,aAAa,EAAE,CAAC;IAEtC,MAAM,SAAS,GAAG,MAAA,MAAA,WAAW,CAAC,MAAM,0CAAE,QAAQ,mCAAI,GAAG,CAAC;IACtD,MAAM,UAAU,GAAG,MAAA,MAAA,WAAW,CAAC,UAAU,0CAAE,QAAQ,mCAAI,IAAI,CAAC;IAE5D,OAAO;QACL,QAAQ,EAAE,KAAK,GAAG,SAAS;QAC3B,QAAQ,EAAE,KAAK,IAAI,SAAS,IAAI,KAAK,GAAG,UAAU;QAClD,SAAS,EAAE,KAAK,IAAI,UAAU;KAC/B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useWindowSize, breakpoints } from '@openedx/paragon';\n\nexport const useViewport = () => {\n const { width = 0 } = useWindowSize();\n\n const mobileMax = breakpoints.medium?.minWidth ?? 768;\n const desktopMin = breakpoints.extraLarge?.minWidth ?? 1200;\n\n return {\n isMobile: width < mobileMax,\n isTablet: width >= mobileMax && width < desktopMin,\n isDesktop: width >= desktopMin,\n };\n};\n"]}
|