@edx/frontend-app-subscription-learner-dashboard 1.55.0 → 1.55.2
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/ProgressCard/index.js +1 -1
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCard/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
|
@@ -44,7 +44,7 @@ export const ProgressCard = ({ progressCardData, isLoading, tabType }) => {
|
|
|
44
44
|
})) }), _jsx(ProgressCardButton, { variant: "brand", redirectUrl: certificateUrl ? `${getSiteConfig().lmsBaseUrl}${certificateUrl}` : '', buttonText: formatMessage(messages.programProgressCardCompletedCertificateButton) })] }) })), isInProgressTab && (_jsxs(_Fragment, { children: [(isProfessionalProgram || isXSeriesProgram)
|
|
45
45
|
&& canUpgrade
|
|
46
46
|
&& getCertificatePriceString(seats)
|
|
47
|
-
&& (_jsxs(Row, { className: "pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center", children: [_jsx(Col, { xs: 12, md: 8, className: "d-flex justify-content-between align-items-center px-0", children: _jsx("span", { className: "text-start", children: formatMessage(messages.programProgressInProgressProfessionalCertificate) }) }), _jsx(Col, { xs: 12, md: 4, className: "d-flex justify-content-between align-items-center px-0", children: _jsx(UpgradeCourseButton, { variant: "brand", buttonText: formatMessage(messages.programProgressCardUpgradeButton), title: title, price: getCertificatePriceString(seats), courseRunKey: courseRunKey || '', courseUrl: courseUrl ? `${getSiteConfig().lmsBaseUrl}${courseUrl}` : '' }) })] })), isMicroMastersProgram
|
|
47
|
+
&& (_jsxs(Row, { className: "pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center", children: [_jsx(Col, { xs: 12, md: 8, className: "d-flex justify-content-between align-items-center px-0", children: _jsx("span", { className: "text-start", children: formatMessage(messages.programProgressInProgressProfessionalCertificate) }) }), _jsx(Col, { xs: 12, md: 4, className: "d-flex justify-content-between align-items-center px-0", children: _jsx(UpgradeCourseButton, { variant: "outline-brand", buttonText: formatMessage(messages.programProgressCardUpgradeButton), title: title, price: getCertificatePriceString(seats), courseRunKey: courseRunKey || '', courseUrl: courseUrl ? `${getSiteConfig().lmsBaseUrl}${courseUrl}` : '' }) })] })), isMicroMastersProgram
|
|
48
48
|
&& checkoutUrl
|
|
49
49
|
&& canUpgrade
|
|
50
50
|
&& (_jsxs(Row, { className: "pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center", children: [_jsx(Col, { xs: 12, md: 8, className: "d-flex justify-content-between align-items-center px-0", children: _jsx("span", { className: "text-start", children: formatMessage(messages.programProgressInProgressMicromastersCertificate) }) }), _jsx(Col, { xs: 12, md: 4, className: "d-flex justify-content-between align-items-center", children: _jsx(ProgressCardButton, { variant: "brand", redirectUrl: checkoutUrl, buttonText: formatMessage(messages.programProgressInProgressCourseMicromastersUpgrade, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgressCard/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC } from 'react';\nimport { Card, Row, Col } from '@openedx/paragon';\nimport { getSiteConfig, useIntl } from '@openedx/frontend-base';\n\nimport { ProgressCardProps } from '../../data/types';\nimport messages from '../messages';\nimport './index.scss';\nimport { ProgressCardActions } from '../ProgressCardActions';\nimport { dateFormatter } from '@src/utils/dateFormatter';\nimport { ProgressCardButton } from '../ProgressCardActions/ProgressCardButton';\nimport { PROGRAM_TYPE_MAP } from '../../data/constants';\nimport { getCertificatePriceString } from '../../data/util';\nimport { UpgradeCourseButton } from '../ProgressCardActions/UpgradeCourseButton';\n\nexport const ProgressCard: FC<ProgressCardProps> = ({ progressCardData, isLoading, tabType }) => {\n const { formatMessage, formatDate } = useIntl();\n\n const { title, enrollment_date, certificateIssuedDate, certificateUrl, courseUrl, upgradeUrl, programType, checkoutUrl, expired, seats, description, destinationUrl, courseRunKey } = progressCardData;\n\n const inProgressTabKey = formatMessage(messages.programProgressInProgressTab).toLowerCase();\n const isInProgressTab = tabType === inProgressTabKey;\n const isRemainingTab = tabType === formatMessage(messages.programProgressRemainingTab).toLowerCase();\n const isPathwaysTab = tabType === formatMessage(messages.programProgressPathwaysTab).toLowerCase();\n const isProfessionalProgram = programType === PROGRAM_TYPE_MAP.PROFESSIONAL_CERTIFICATE;\n const isXSeriesProgram = programType === PROGRAM_TYPE_MAP.XSERIES;\n const isMicroMastersProgram = programType === PROGRAM_TYPE_MAP.MICROMASTERS;\n /*\n - Formatting pacing type safely\n - replace underscores with spaces\n - capitalize first letter of each word\n - example: 'self_paced' -> 'Self Paced'\n */\n // base string; pathways tab has no enrollment/subscription status\n let enrollmentInfo = '';\n if (!isPathwaysTab) {\n enrollmentInfo = isRemainingTab\n ? formatMessage(messages.programProgressCardIncludedInSubscriptionText)\n : formatMessage(messages.programProgressCardEnrollText);\n }\n\n // if enrollment start exists\n if (!isPathwaysTab && !isRemainingTab && enrollment_date) {\n const enrollment_date_formatted = dateFormatter(formatDate, enrollment_date, 'short');\n\n enrollmentInfo = enrollmentInfo && `${enrollmentInfo} ${enrollment_date_formatted}`;\n }\n\n // using expired key from course object to determine if the course is expired as per condition on confluence and learners dashboard code.\n const canUpgrade = Boolean(upgradeUrl) && !expired;\n return (\n <Card className=\"progress-card mb-3\" data-testid=\"progress-card\" isLoading={isLoading}>\n <Card.Section className=\"pt-3 pb-2 px-4\">\n <Row className=\"mb-2\">\n <Col xs={12}>\n {isPathwaysTab ? (\n <h5 className=\"mb-1 font-weight-bold card-title\">{title}</h5>\n ) : (\n <h4 className=\"mb-1 font-weight-bold card-title\">{title}</h4>\n )}\n <div className=\"card-description\">\n {enrollmentInfo}\n {description && (\n <>\n {description}\n </>\n )}\n </div>\n </Col>\n <ProgressCardActions tabType={tabType} redirectUrl={destinationUrl || courseUrl} />\n </Row>\n\n {tabType === (formatMessage(messages.programProgressCompletedTab).toLowerCase()) && (\n <Row className=\"pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center\">\n <Col xs={12} className=\"d-flex justify-content-between align-items-center px-0\">\n <span className=\"text-start\">\n {certificateIssuedDate && (\n formatMessage(messages.programProgressCardCompletedCertificateText, {\n certificateDate: (certificateIssuedDate ? dateFormatter(formatDate, certificateIssuedDate, 'short') : ''),\n })\n )}\n </span>\n\n <ProgressCardButton variant=\"brand\" redirectUrl={certificateUrl ? `${getSiteConfig().lmsBaseUrl}${certificateUrl}` : ''} buttonText={formatMessage(messages.programProgressCardCompletedCertificateButton)} />\n </Col>\n </Row>\n )}\n\n {isInProgressTab && (\n <>\n {(isProfessionalProgram || isXSeriesProgram)\n && canUpgrade\n && getCertificatePriceString(seats)\n && (\n <Row className=\"pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center\">\n <Col xs={12} md={8} className=\"d-flex justify-content-between align-items-center px-0\">\n <span className=\"text-start\">\n {formatMessage(messages.programProgressInProgressProfessionalCertificate)}\n </span>\n </Col>\n <Col xs={12} md={4} className=\"d-flex justify-content-between align-items-center px-0\">\n <UpgradeCourseButton\n variant=\"brand\"\n buttonText={formatMessage(messages.programProgressCardUpgradeButton)}\n title={title}\n price={getCertificatePriceString(seats)}\n courseRunKey={courseRunKey || ''}\n courseUrl={courseUrl ? `${getSiteConfig().lmsBaseUrl}${courseUrl}` : ''}\n />\n </Col>\n </Row>\n )}\n {isMicroMastersProgram\n && checkoutUrl\n && canUpgrade\n && (\n <Row className=\"pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center\">\n <Col xs={12} md={8} className=\"d-flex justify-content-between align-items-center px-0\">\n <span className=\"text-start\">\n {formatMessage(messages.programProgressInProgressMicromastersCertificate)}\n </span>\n </Col>\n <Col xs={12} md={4} className=\"d-flex justify-content-between align-items-center\">\n <ProgressCardButton\n variant=\"brand\"\n redirectUrl={checkoutUrl}\n buttonText={formatMessage(messages.programProgressInProgressCourseMicromastersUpgrade, {\n price: getCertificatePriceString(seats, true),\n })}\n />\n </Col>\n </Row>\n )}\n </>\n )}\n\n </Card.Section>\n </Card>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgressCard/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC } from 'react';\nimport { Card, Row, Col } from '@openedx/paragon';\nimport { getSiteConfig, useIntl } from '@openedx/frontend-base';\n\nimport { ProgressCardProps } from '../../data/types';\nimport messages from '../messages';\nimport './index.scss';\nimport { ProgressCardActions } from '../ProgressCardActions';\nimport { dateFormatter } from '@src/utils/dateFormatter';\nimport { ProgressCardButton } from '../ProgressCardActions/ProgressCardButton';\nimport { PROGRAM_TYPE_MAP } from '../../data/constants';\nimport { getCertificatePriceString } from '../../data/util';\nimport { UpgradeCourseButton } from '../ProgressCardActions/UpgradeCourseButton';\n\nexport const ProgressCard: FC<ProgressCardProps> = ({ progressCardData, isLoading, tabType }) => {\n const { formatMessage, formatDate } = useIntl();\n\n const { title, enrollment_date, certificateIssuedDate, certificateUrl, courseUrl, upgradeUrl, programType, checkoutUrl, expired, seats, description, destinationUrl, courseRunKey } = progressCardData;\n\n const inProgressTabKey = formatMessage(messages.programProgressInProgressTab).toLowerCase();\n const isInProgressTab = tabType === inProgressTabKey;\n const isRemainingTab = tabType === formatMessage(messages.programProgressRemainingTab).toLowerCase();\n const isPathwaysTab = tabType === formatMessage(messages.programProgressPathwaysTab).toLowerCase();\n const isProfessionalProgram = programType === PROGRAM_TYPE_MAP.PROFESSIONAL_CERTIFICATE;\n const isXSeriesProgram = programType === PROGRAM_TYPE_MAP.XSERIES;\n const isMicroMastersProgram = programType === PROGRAM_TYPE_MAP.MICROMASTERS;\n /*\n - Formatting pacing type safely\n - replace underscores with spaces\n - capitalize first letter of each word\n - example: 'self_paced' -> 'Self Paced'\n */\n // base string; pathways tab has no enrollment/subscription status\n let enrollmentInfo = '';\n if (!isPathwaysTab) {\n enrollmentInfo = isRemainingTab\n ? formatMessage(messages.programProgressCardIncludedInSubscriptionText)\n : formatMessage(messages.programProgressCardEnrollText);\n }\n\n // if enrollment start exists\n if (!isPathwaysTab && !isRemainingTab && enrollment_date) {\n const enrollment_date_formatted = dateFormatter(formatDate, enrollment_date, 'short');\n\n enrollmentInfo = enrollmentInfo && `${enrollmentInfo} ${enrollment_date_formatted}`;\n }\n\n // using expired key from course object to determine if the course is expired as per condition on confluence and learners dashboard code.\n const canUpgrade = Boolean(upgradeUrl) && !expired;\n return (\n <Card className=\"progress-card mb-3\" data-testid=\"progress-card\" isLoading={isLoading}>\n <Card.Section className=\"pt-3 pb-2 px-4\">\n <Row className=\"mb-2\">\n <Col xs={12}>\n {isPathwaysTab ? (\n <h5 className=\"mb-1 font-weight-bold card-title\">{title}</h5>\n ) : (\n <h4 className=\"mb-1 font-weight-bold card-title\">{title}</h4>\n )}\n <div className=\"card-description\">\n {enrollmentInfo}\n {description && (\n <>\n {description}\n </>\n )}\n </div>\n </Col>\n <ProgressCardActions tabType={tabType} redirectUrl={destinationUrl || courseUrl} />\n </Row>\n\n {tabType === (formatMessage(messages.programProgressCompletedTab).toLowerCase()) && (\n <Row className=\"pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center\">\n <Col xs={12} className=\"d-flex justify-content-between align-items-center px-0\">\n <span className=\"text-start\">\n {certificateIssuedDate && (\n formatMessage(messages.programProgressCardCompletedCertificateText, {\n certificateDate: (certificateIssuedDate ? dateFormatter(formatDate, certificateIssuedDate, 'short') : ''),\n })\n )}\n </span>\n\n <ProgressCardButton variant=\"brand\" redirectUrl={certificateUrl ? `${getSiteConfig().lmsBaseUrl}${certificateUrl}` : ''} buttonText={formatMessage(messages.programProgressCardCompletedCertificateButton)} />\n </Col>\n </Row>\n )}\n\n {isInProgressTab && (\n <>\n {(isProfessionalProgram || isXSeriesProgram)\n && canUpgrade\n && getCertificatePriceString(seats)\n && (\n <Row className=\"pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center\">\n <Col xs={12} md={8} className=\"d-flex justify-content-between align-items-center px-0\">\n <span className=\"text-start\">\n {formatMessage(messages.programProgressInProgressProfessionalCertificate)}\n </span>\n </Col>\n <Col xs={12} md={4} className=\"d-flex justify-content-between align-items-center px-0\">\n <UpgradeCourseButton\n variant=\"outline-brand\"\n buttonText={formatMessage(messages.programProgressCardUpgradeButton)}\n title={title}\n price={getCertificatePriceString(seats)}\n courseRunKey={courseRunKey || ''}\n courseUrl={courseUrl ? `${getSiteConfig().lmsBaseUrl}${courseUrl}` : ''}\n />\n </Col>\n </Row>\n )}\n {isMicroMastersProgram\n && checkoutUrl\n && canUpgrade\n && (\n <Row className=\"pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center\">\n <Col xs={12} md={8} className=\"d-flex justify-content-between align-items-center px-0\">\n <span className=\"text-start\">\n {formatMessage(messages.programProgressInProgressMicromastersCertificate)}\n </span>\n </Col>\n <Col xs={12} md={4} className=\"d-flex justify-content-between align-items-center\">\n <ProgressCardButton\n variant=\"brand\"\n redirectUrl={checkoutUrl}\n buttonText={formatMessage(messages.programProgressInProgressCourseMicromastersUpgrade, {\n price: getCertificatePriceString(seats, true),\n })}\n />\n </Col>\n </Row>\n )}\n </>\n )}\n\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"]}
|