@edx/frontend-app-subscription-learner-dashboard 1.54.0 → 1.55.1
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/ProgramProgressHeader.js +3 -1
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgressHeader.js.map +1 -1
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgressSidebar/index.js +6 -1
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgressSidebar/index.js.map +1 -1
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgressSidebar/index.scss +2 -1
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgressTabs/index.d.ts +1 -0
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgressTabs/index.js +8 -4
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgressTabs/index.js.map +1 -1
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgressTabs/index.scss +3 -0
- 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/ProgramProgress/index.scss +7 -0
- package/package.json +1 -1
|
@@ -7,7 +7,9 @@ import messages from './messages';
|
|
|
7
7
|
const ProgramProgressHeader = ({ programTitle, programType, authoringOrganizations, }) => {
|
|
8
8
|
const { formatMessage } = useIntl();
|
|
9
9
|
const programIcon = getProgramIcon(programType);
|
|
10
|
-
return (_jsxs(Row, { className: "justify-content-between pb-4.5", children: [_jsxs(Col, { sm: 8, xs: 12, className: "d-flex flex-column align-items-start", children: [_jsxs("div", { className: "d-flex align-items-center", children: [_jsx(Image, { src: programIcon, alt: `${programType} icon`, className: "program-icon mr-1" }), _jsx("h4", { className: "program-type-label
|
|
10
|
+
return (_jsxs(Row, { className: "justify-content-between pb-4.5", children: [_jsxs(Col, { sm: 8, xs: 12, className: "d-flex flex-column align-items-start", children: [_jsxs("div", { className: "d-flex align-items-center", children: [_jsx(Image, { src: programIcon, alt: `${programType} icon`, className: "program-icon mr-1" }), _jsx("h4", { className: "program-type-label text-brand-500", children: formatMessage(messages.programTypeLabel, { programType }) })] }), _jsx("h2", { className: "program-title font-weight-bold", children: programTitle })] }), authoringOrganizations && (authoringOrganizations === null || authoringOrganizations === void 0 ? void 0 : authoringOrganizations.length) > 0 && (_jsxs(Col, { sm: 4, className: "text-center", children: [_jsx("div", { className: "x-small mb-2", children: formatMessage(messages.programProgressInstitutions) }), _jsx("div", { children: authoringOrganizations.map((org) => (_jsx(Image, { id: "org-image", src: org.certificateLogoImageUrl
|
|
11
|
+
|| org.logoImageUrl
|
|
12
|
+
|| rwthAachenUniversityLogo, className: "container-mw-md program-org__logo", alt: `${org.name}'s logo` }, org.uuid))) })] }))] }));
|
|
11
13
|
};
|
|
12
14
|
export default ProgramProgressHeader;
|
|
13
15
|
//# sourceMappingURL=ProgramProgressHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgramProgressHeader.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgressHeader.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,wBAAwB,MAAM,sCAAsC,CAAC;AAE5E,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,qBAAqB,GAAyC,CAAC,EACnE,YAAY,EAAE,WAAW,EAAE,sBAAsB,GAClD,EAAE,EAAE;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;IAEhD,OAAO,CACL,MAAC,GAAG,IAAC,SAAS,EAAC,gCAAgC,aAC7C,MAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,sCAAsC,aAClE,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,KAAK,
|
|
1
|
+
{"version":3,"file":"ProgramProgressHeader.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgressHeader.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,wBAAwB,MAAM,sCAAsC,CAAC;AAE5E,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,qBAAqB,GAAyC,CAAC,EACnE,YAAY,EAAE,WAAW,EAAE,sBAAsB,GAClD,EAAE,EAAE;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;IAEhD,OAAO,CACL,MAAC,GAAG,IAAC,SAAS,EAAC,gCAAgC,aAC7C,MAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,sCAAsC,aAClE,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,KAAK,IACJ,GAAG,EAAE,WAAW,EAChB,GAAG,EAAE,GAAG,WAAW,OAAO,EAC1B,SAAS,EAAC,mBAAmB,GAC7B,EACF,aAAI,SAAS,EAAC,mCAAmC,YAC9C,aAAa,CAAC,QAAQ,CAAC,gBAAgB,EAAE,EAAE,WAAW,EAAE,CAAC,GACvD,IACD,EACN,aAAI,SAAS,EAAC,gCAAgC,YAAE,YAAY,GAAM,IAC9D,EACL,sBAAsB,IAAI,CAAA,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,MAAM,IAAG,CAAC,IAAI,CAC/D,MAAC,GAAG,IAAC,EAAE,EAAE,CAAC,EAAE,SAAS,EAAC,aAAa,aACjC,cAAK,SAAS,EAAC,cAAc,YAC1B,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC,GAChD,EACN,wBACG,sBAAsB,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACnC,KAAC,KAAK,IAEJ,EAAE,EAAC,WAAW,EACd,GAAG,EACD,GAAG,CAAC,uBAAuB;mCACxB,GAAG,CAAC,YAAY;mCAChB,wBAAwB,EAE7B,SAAS,EAAC,mCAAmC,EAC7C,GAAG,EAAE,GAAG,GAAG,CAAC,IAAI,SAAS,IARpB,GAAG,CAAC,IAAI,CASb,CACH,CAAC,GACE,IACF,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,qBAAqB,CAAC","sourcesContent":["import React from 'react';\nimport { useIntl } from '@openedx/frontend-base';\nimport { Row, Col, Image } from '@openedx/paragon';\nimport { ProgramProgressHeaderProps } from '../data/types';\nimport { getProgramIcon } from '../data/util';\nimport rwthAachenUniversityLogo from '../assets/rwth-aachen-university.svg';\n\nimport messages from './messages';\n\nconst ProgramProgressHeader: React.FC<ProgramProgressHeaderProps> = ({\n programTitle, programType, authoringOrganizations,\n}) => {\n const { formatMessage } = useIntl();\n const programIcon = getProgramIcon(programType);\n\n return (\n <Row className=\"justify-content-between pb-4.5\">\n <Col sm={8} xs={12} className=\"d-flex flex-column align-items-start\">\n <div className=\"d-flex align-items-center\">\n <Image\n src={programIcon}\n alt={`${programType} icon`}\n className=\"program-icon mr-1\"\n />\n <h4 className=\"program-type-label text-brand-500\">\n {formatMessage(messages.programTypeLabel, { programType })}\n </h4>\n </div>\n <h2 className=\"program-title font-weight-bold\">{programTitle}</h2>\n </Col>\n {authoringOrganizations && authoringOrganizations?.length > 0 && (\n <Col sm={4} className=\"text-center\">\n <div className=\"x-small mb-2\">\n {formatMessage(messages.programProgressInstitutions)}\n </div>\n <div>\n {authoringOrganizations.map((org) => (\n <Image\n key={org.uuid}\n id=\"org-image\"\n src={\n org.certificateLogoImageUrl\n || org.logoImageUrl\n || rwthAachenUniversityLogo\n }\n className=\"container-mw-md program-org__logo\"\n alt={`${org.name}'s logo`}\n />\n ))}\n </div>\n </Col>\n )}\n </Row>\n );\n};\n\nexport default ProgramProgressHeader;\n"]}
|
|
@@ -27,6 +27,11 @@ export const ProgramProgressSidebar = ({ inProgress, remaining, completed }) =>
|
|
|
27
27
|
const price = isLoading ? '' : _jsx(FormattedNumber, { value: (_b = (_a = programProgressData === null || programProgressData === void 0 ? void 0 : programProgressData.programData) === null || _a === void 0 ? void 0 : _a.priceRanges[0]) === null || _b === void 0 ? void 0 : _b.total, style: "currency", currency: (_d = (_c = programProgressData === null || programProgressData === void 0 ? void 0 : programProgressData.programData) === null || _c === void 0 ? void 0 : _c.priceRanges[0]) === null || _d === void 0 ? void 0 : _d.currency });
|
|
28
28
|
const type = ((_e = programProgressData === null || programProgressData === void 0 ? void 0 : programProgressData.programData) === null || _e === void 0 ? void 0 : _e.type) || '';
|
|
29
29
|
const programType = getProgramCertificateLabel(type, formatMessage);
|
|
30
|
-
return (_jsxs("div", { className: "program-certificate-widget", "data-testid": "program-certificate-progress", children: [_jsx(ProgramProgressCircle, { inProgress: inProgress, remaining: remaining, completed: completed }), _jsx("h6", { className: "progress-heading-circle
|
|
30
|
+
return (_jsxs("div", { className: "program-certificate-widget", "data-testid": "program-certificate-progress", children: [_jsx(ProgramProgressCircle, { inProgress: inProgress, remaining: remaining, completed: completed }), _jsx("h6", { className: "progress-heading-circle my-5", children: formatMessage(messages.programProgressCertificateLabel) }), type.trim().toLowerCase()
|
|
31
|
+
!== PROGRAM_TYPE_MAP.MICROMASTERS.toLowerCase() && (_jsxs("div", { className: "progress-certificate-content pt-3 px-3", children: [_jsx("p", { className: "text-gray-800", children: formatMessage(messages.programProgressCertificateContentOne, {
|
|
32
|
+
programType: programType,
|
|
33
|
+
}) }), _jsx("p", { className: "text-gray-800", children: formatMessage(messages.programProgressCertificateContentTwo, {
|
|
34
|
+
price,
|
|
35
|
+
}) })] }))] }));
|
|
31
36
|
};
|
|
32
37
|
//# sourceMappingURL=index.js.map
|
package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgressSidebar/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgressSidebar/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,OAAO,qBAAqB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,0BAA0B,GAAG,CAAC,WAAoB,EAAE,aAAmF,EAAE,EAAE;IAC/I,MAAM,cAAc,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,EAAE,CAAC;IAE3C,IAAI,CAAC,cAAc,EAAE,CAAC;QACpB,OAAO,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,8BAA8B,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC;IAChG,CAAC;IAED,MAAM,aAAa,GAAG,cAAc,CAAC,WAAW,EAAE,CAAC;IAEnD,QAAQ,aAAa,EAAE,CAAC;QACtB,KAAK,gBAAgB,CAAC,OAAO,CAAC,WAAW,EAAE;YACzC,OAAO,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,sCAAsC,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC;QAChH,KAAK,gBAAgB,CAAC,wBAAwB,CAAC,WAAW,EAAE;YAC1D,OAAO,cAAc,CAAC;QACxB;YACE,OAAO,GAAG,cAAc,IAAI,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,8BAA8B,CAAC,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC;IACzH,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAoC,CAAC,EACtE,UAAU,EAAE,SAAS,EAAE,SAAS,EACjC,EAAE,EAAE;;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,GAAG,eAAe,EAAE,CAAC;IAE7D,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,KAAK,EAAE,MAAA,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,WAAW,0CAAE,WAAW,CAAC,CAAC,CAAC,0CAAE,KAAK,EAAE,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,MAAA,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,WAAW,0CAAE,WAAW,CAAC,CAAC,CAAC,0CAAE,QAAQ,GAAI,CAAC;IAC1M,MAAM,IAAI,GAAG,CAAA,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,WAAW,0CAAE,IAAI,KAAI,EAAE,CAAC;IAC1D,MAAM,WAAW,GAAG,0BAA0B,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;IAEpE,OAAO,CACL,eACE,SAAS,EAAC,4BAA4B,iBAC1B,8BAA8B,aAE1C,KAAC,qBAAqB,IAAC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,GAAI,EAC7F,aAAI,SAAS,EAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgressSidebar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC } from 'react';\nimport { useIntl, FormattedNumber } from '@openedx/frontend-base';\nimport messages from '../messages';\nimport { ProgramProgressSidebarProps } from '../../data/types';\nimport ProgramProgressCircle from './ProgramProgressCircle';\nimport './index.scss';\nimport { useProgressData } from '@src/hooks';\nimport { PROGRAM_TYPE_MAP } from '../../data/constants';\n\nconst getProgramCertificateLabel = (programType?: string, formatMessage?: (message: typeof messages.programProgressCertificateText) => string) => {\n const normalizedType = programType?.trim();\n\n if (!normalizedType) {\n return formatMessage ? formatMessage(messages.programProgressCertificateText) : 'certificate';\n }\n\n const lowercaseType = normalizedType.toLowerCase();\n\n switch (lowercaseType) {\n case PROGRAM_TYPE_MAP.XSERIES.toLowerCase():\n return formatMessage ? formatMessage(messages.programProgressXSeriesCertificateLabel) : 'XSeries Certificate';\n case PROGRAM_TYPE_MAP.PROFESSIONAL_CERTIFICATE.toLowerCase():\n return normalizedType;\n default:\n return `${normalizedType} ${formatMessage ? formatMessage(messages.programProgressCertificateText) : 'certificate'}`;\n }\n};\n\nexport const ProgramProgressSidebar: FC<ProgramProgressSidebarProps> = ({\n inProgress, remaining, completed\n}) => {\n const { formatMessage } = useIntl();\n const { programProgressData, isLoading } = useProgressData();\n\n const price = isLoading ? '' : <FormattedNumber value={programProgressData?.programData?.priceRanges[0]?.total} style=\"currency\" currency={programProgressData?.programData?.priceRanges[0]?.currency} />;\n const type = programProgressData?.programData?.type || '';\n const programType = getProgramCertificateLabel(type, formatMessage);\n\n return (\n <div\n className=\"program-certificate-widget\"\n data-testid=\"program-certificate-progress\"\n >\n <ProgramProgressCircle inProgress={inProgress} remaining={remaining} completed={completed} />\n <h6 className=\"progress-heading-circle my-5\">\n {formatMessage(messages.programProgressCertificateLabel)}\n </h6>\n {type.trim().toLowerCase()\n !== PROGRAM_TYPE_MAP.MICROMASTERS.toLowerCase() && (\n <div className=\"progress-certificate-content pt-3 px-3\">\n <p className=\"text-gray-800\">\n {formatMessage(messages.programProgressCertificateContentOne, {\n programType: programType,\n })}\n </p>\n <p className=\"text-gray-800\">\n {formatMessage(messages.programProgressCertificateContentTwo, {\n price,\n })}\n </p>\n </div>\n )}\n </div>\n );\n};\n"]}
|
|
@@ -11,7 +11,7 @@ $progress-heading-circle-color: #333333 !default;
|
|
|
11
11
|
position: relative;
|
|
12
12
|
width: 14.375rem;
|
|
13
13
|
height: 14.375rem;
|
|
14
|
-
margin: .5rem auto;
|
|
14
|
+
margin: 0.5rem auto;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
.progress-circle {
|
|
@@ -55,6 +55,7 @@ $progress-heading-circle-color: #333333 !default;
|
|
|
55
55
|
text-align: center;
|
|
56
56
|
font-size: 0.875rem;
|
|
57
57
|
line-height: 1.25rem;
|
|
58
|
+
font-weight: 700;
|
|
58
59
|
}
|
|
59
60
|
|
|
60
61
|
.progress-certificate-content {
|
|
@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import { Tabs, Tab } from '@openedx/paragon';
|
|
4
4
|
import { useIntl } from '@openedx/frontend-base';
|
|
5
|
+
import './index.scss';
|
|
5
6
|
import messages from '../messages';
|
|
6
7
|
import { RemainingTabData } from '../RemainingTabData';
|
|
7
8
|
import { CompletedTabData } from '../CompletedTabData';
|
|
@@ -29,12 +30,15 @@ export const ProgramProgressTabs = ({ type, counts }) => {
|
|
|
29
30
|
count: completed,
|
|
30
31
|
panel: _jsx(CompletedTabData, {}),
|
|
31
32
|
},
|
|
32
|
-
...((type === null || type === void 0 ? void 0 : type.toLowerCase()) === 'micromasters'
|
|
33
|
-
?
|
|
33
|
+
...((type === null || type === void 0 ? void 0 : type.toLowerCase()) === 'micromasters'
|
|
34
|
+
|| (type === null || type === void 0 ? void 0 : type.toLowerCase()) === 'microbachelors'
|
|
35
|
+
? [
|
|
36
|
+
{
|
|
34
37
|
key: 'pathways',
|
|
35
38
|
title: formatMessage(messages.programProgressPathwaysTab),
|
|
36
39
|
panel: _jsx(PathwaysTabData, {}),
|
|
37
|
-
}
|
|
40
|
+
},
|
|
41
|
+
]
|
|
38
42
|
: []),
|
|
39
43
|
];
|
|
40
44
|
const [activeTab, setActiveTab] = useState(tabsData[0].key);
|
|
@@ -42,6 +46,6 @@ export const ProgramProgressTabs = ({ type, counts }) => {
|
|
|
42
46
|
if (tabKey)
|
|
43
47
|
setActiveTab(tabKey);
|
|
44
48
|
};
|
|
45
|
-
return (_jsx(Tabs, { id: "program-progress-tabs", activeKey: activeTab, onSelect: handleTabSelect, className: "mb-4", mountOnEnter: true, children: tabsData.map(tab => (_jsx(Tab, { eventKey: tab.key, title: tab.count !== undefined ? `${tab.title} (${tab.count})` : tab.title, children: tab.panel }, tab.key))) }));
|
|
49
|
+
return (_jsx(Tabs, { id: "program-progress-tabs", activeKey: activeTab, onSelect: handleTabSelect, className: "mb-4", mountOnEnter: true, children: tabsData.map((tab) => (_jsx(Tab, { eventKey: tab.key, title: tab.count !== undefined ? `${tab.title} (${tab.count})` : tab.title, children: tab.panel }, tab.key))) }));
|
|
46
50
|
};
|
|
47
51
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgressTabs/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgressTabs/index.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,cAAc,CAAC;AAGtB,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE;IACpF,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC;IACpD,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,QAAQ,GAA8B;QAC1C;YACE,GAAG,EAAE,aAAa;YAClB,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,4BAA4B,CAAC;YAC3D,KAAK,EAAE,UAAU;YACjB,KAAK,EAAE,KAAC,iBAAiB,KAAG;SAC7B;QACD;YACE,GAAG,EAAE,WAAW;YAChB,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC;YAC1D,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,KAAC,gBAAgB,KAAG;SAC5B;QACD;YACE,GAAG,EAAE,WAAW;YAChB,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC;YAC1D,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,KAAC,gBAAgB,KAAG;SAC5B;QACD,GAAG,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,EAAE,MAAK,cAAc;eACrC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,EAAE,MAAK,gBAAgB;YAC3C,CAAC,CAAC;gBACE;oBACE,GAAG,EAAE,UAAU;oBACf,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,0BAA0B,CAAC;oBACzD,KAAK,EAAE,KAAC,eAAe,KAAG;iBAC3B;aACF;YACH,CAAC,CAAC,EAAE,CAAC;KACR,CAAC;IAEF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAS,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IAEpE,MAAM,eAAe,GAAG,CAAC,MAAqB,EAAE,EAAE;QAChD,IAAI,MAAM;YAAE,YAAY,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAC,uBAAuB,EAC1B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,eAAe,EACzB,SAAS,EAAC,MAAM,EAChB,YAAY,kBAEX,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACrB,KAAC,GAAG,IACF,QAAQ,EAAE,GAAG,CAAC,GAAG,EAEjB,KAAK,EACH,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,YAGpE,GAAG,CAAC,KAAK,IALL,GAAG,CAAC,GAAG,CAMR,CACP,CAAC,GACG,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC, useState } from 'react';\nimport { Tabs, Tab } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport './index.scss';\n\nimport { ProgramProgressTabsProps, ProgramProgressTabItems } from '../../data/types';\nimport messages from '../messages';\nimport { RemainingTabData } from '../RemainingTabData';\nimport { CompletedTabData } from '../CompletedTabData';\nimport { InProgressTabData } from '../InProgressTabData';\nimport { PathwaysTabData } from '../PathwaysTabData';\n\nexport const ProgramProgressTabs: FC<ProgramProgressTabsProps> = ({ type, counts }) => {\n const { inProgress, remaining, completed } = counts;\n const { formatMessage } = useIntl();\n\n const tabsData: ProgramProgressTabItems[] = [\n {\n key: 'in-progress',\n title: formatMessage(messages.programProgressInProgressTab),\n count: inProgress,\n panel: <InProgressTabData />,\n },\n {\n key: 'remaining',\n title: formatMessage(messages.programProgressRemainingTab),\n count: remaining,\n panel: <RemainingTabData />,\n },\n {\n key: 'completed',\n title: formatMessage(messages.programProgressCompletedTab),\n count: completed,\n panel: <CompletedTabData />,\n },\n ...(type?.toLowerCase() === 'micromasters'\n || type?.toLowerCase() === 'microbachelors'\n ? [\n {\n key: 'pathways',\n title: formatMessage(messages.programProgressPathwaysTab),\n panel: <PathwaysTabData />,\n },\n ]\n : []),\n ];\n\n const [activeTab, setActiveTab] = useState<string>(tabsData[0].key);\n\n const handleTabSelect = (tabKey: string | null) => {\n if (tabKey) setActiveTab(tabKey);\n };\n\n return (\n <Tabs\n id=\"program-progress-tabs\"\n activeKey={activeTab}\n onSelect={handleTabSelect}\n className=\"mb-4\"\n mountOnEnter\n >\n {tabsData.map((tab) => (\n <Tab\n eventKey={tab.key}\n key={tab.key}\n title={\n tab.count !== undefined ? `${tab.title} (${tab.count})` : tab.title\n }\n >\n {tab.panel}\n </Tab>\n ))}\n </Tabs>\n );\n};\n"]}
|
|
@@ -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"]}
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
color: var(--pgn-color-info-900);
|
|
8
8
|
font-size: 22px;
|
|
9
9
|
margin-bottom: 0.3rem;
|
|
10
|
+
font-weight: 500;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
.program-journey-header{
|
|
@@ -29,4 +30,10 @@
|
|
|
29
30
|
p {
|
|
30
31
|
margin-bottom: 0;
|
|
31
32
|
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.program-org__logo {
|
|
36
|
+
max-width: 10.875rem;
|
|
37
|
+
max-height: 5.5rem;
|
|
38
|
+
object-fit: contain;
|
|
32
39
|
}
|