@edx/frontend-app-subscription-learner-dashboard 1.29.0 → 1.30.0
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/ProgramProgressSidebar/index.js +6 -4
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgressSidebar/index.js.map +1 -1
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCard/index.js +2 -2
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCard/index.js.map +1 -1
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/index.js +3 -3
- package/dist/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/index.js.map +1 -1
- package/dist/containers/SubscriptionInformation/components/SubscriptionInformation.js +32 -34
- package/dist/containers/SubscriptionInformation/components/SubscriptionInformation.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,12 +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, FormattedNumber } from '@openedx/frontend-base';
|
|
3
3
|
import messages from '../messages';
|
|
4
4
|
import ProgramProgressCircle from './ProgramProgressCircle';
|
|
5
5
|
import './index.scss';
|
|
6
|
+
import { useProgressData } from '../../../../hooks';
|
|
6
7
|
export const ProgramProgressSidebar = ({ inProgress, remaining, completed }) => {
|
|
8
|
+
var _a, _b, _c, _d;
|
|
7
9
|
const { formatMessage } = useIntl();
|
|
8
|
-
|
|
9
|
-
const
|
|
10
|
-
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 font-weight-bold mb-4 mt-4", children: formatMessage(messages.programProgressCertificateLabel) }), _jsxs("div", { className: "progress-certificate-content pt-3 px-3", children: [_jsx("p", { children: formatMessage(messages.programProgressCertificateContentOne) }), _jsx("p", { children: formatMessage(messages.programProgressCertificateContentTwo, { price
|
|
10
|
+
const { programProgressData, isLoading } = useProgressData();
|
|
11
|
+
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 });
|
|
12
|
+
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 font-weight-bold mb-4 mt-4", children: formatMessage(messages.programProgressCertificateLabel) }), _jsxs("div", { className: "progress-certificate-content pt-3 px-3", children: [_jsx("p", { children: formatMessage(messages.programProgressCertificateContentOne) }), _jsx("p", { children: formatMessage(messages.programProgressCertificateContentTwo, { price }) })] })] }));
|
|
11
13
|
};
|
|
12
14
|
//# 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,MAAM,wBAAwB,CAAC;
|
|
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;AAE7C,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,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,oDAAoD,YAC/D,aAAa,CAAC,QAAQ,CAAC,+BAA+B,CAAC,GACrD,EACL,eAAK,SAAS,EAAC,wCAAwC,aACrD,sBACG,aAAa,CAAC,QAAQ,CAAC,oCAAoC,CAAC,GAC3D,EACJ,sBACG,aAAa,CAAC,QAAQ,CAAC,oCAAoC,EAAE,EAAE,KAAK,EAAE,CAAC,GACtE,IACA,IACF,CACP,CAAC;AACJ,CAAC,CAAC","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';\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 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 font-weight-bold mb-4 mt-4\">\n {formatMessage(messages.programProgressCertificateLabel)}\n </h6>\n <div className=\"progress-certificate-content pt-3 px-3\">\n <p>\n {formatMessage(messages.programProgressCertificateContentOne)}\n </p>\n <p>\n {formatMessage(messages.programProgressCertificateContentTwo, { price })}\n </p>\n </div>\n </div>\n );\n};\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Card, Row, Col } from '@openedx/paragon';
|
|
3
|
-
import { useIntl } from '@openedx/frontend-base';
|
|
3
|
+
import { getSiteConfig, useIntl } from '@openedx/frontend-base';
|
|
4
4
|
import messages from '../messages';
|
|
5
5
|
import './index.scss';
|
|
6
6
|
import { ProgressCardActions } from '../ProgressCardActions';
|
|
@@ -40,7 +40,7 @@ export const ProgressCard = ({ progressCardData, isLoading, tabType }) => {
|
|
|
40
40
|
const canUpgrade = Boolean(upgradeUrl) && !expired;
|
|
41
41
|
return (_jsx(Card, { className: "progress-card mb-3", "data-testid": "progress-card", isLoading: isLoading, children: _jsxs(Card.Section, { className: "pt-3 pb-2 px-4", children: [_jsxs(Row, { className: "mb-2", children: [_jsxs(Col, { xs: 12, children: [tabType === (formatMessage(messages.programProgressPathwaysTab).toLowerCase()) ? (_jsx("h5", { className: "mb-1 font-weight-bold card-title", children: title })) : (_jsx("h4", { className: "mb-1 font-weight-bold card-title", children: title })), _jsxs("div", { className: "card-description", children: [enrollmentInfo, description && (_jsx(_Fragment, { children: description }))] })] }), _jsx(ProgressCardActions, { tabType: tabType, redirectUrl: destinationUrl || courseUrl })] }), tabType === (formatMessage(messages.programProgressCompletedTab).toLowerCase()) && (_jsx(Row, { className: "pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center", children: _jsxs(Col, { xs: 12, className: "d-flex justify-content-between align-items-center px-0", children: [_jsx("span", { className: "text-start", children: end && (formatMessage(messages.programProgressCardCompletedCertificateText, {
|
|
42
42
|
certificateDate: (end ? dateFormatter(formatDate, end, 'short') : ''),
|
|
43
|
-
})) }), _jsx(ProgressCardButton, { variant: "brand", redirectUrl: certificateUrl
|
|
43
|
+
})) }), _jsx(ProgressCardButton, { variant: "brand", redirectUrl: certificateUrl ? getSiteConfig().lmsBaseUrl + certificateUrl : '', buttonText: formatMessage(messages.programProgressCardCompletedCertificateButton) })] }) })), isInProgressTab && (_jsx(Row, { className: "pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center", children: _jsxs(Col, { xs: 12, className: "d-flex justify-content-between align-items-center px-0", children: [_jsx("span", { className: "text-start", children: formatMessage(messages.programProgressInProgressCertificateStatus, {
|
|
44
44
|
status: canUpgrade ? formatMessage(messages.programProgressInProgressCertificateNeedsVerified) : formatMessage(messages.programProgressInProgressCertificateNotEarned), // TODO : Certificate status will change after Upgrade is successful through api
|
|
45
45
|
}) }), isProfessionalProgram
|
|
46
46
|
&& canUpgrade
|
|
@@ -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 { 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';\n\nexport const ProgressCard: FC<ProgressCardProps> = ({ progressCardData, isLoading, tabType }) => {\n const { formatMessage, formatDate } = useIntl();\n\n const { title, pacingType, start, end, certificateUrl, courseUrl, upgradeUrl, programType, checkoutUrl, expired, seats, description, destinationUrl } = progressCardData;\n\n const inProgressTabKey = formatMessage(messages.programProgressInProgressTab).toLowerCase();\n const isInProgressTab = tabType === inProgressTabKey;\n const isProfessionalProgram = programType === PROGRAM_TYPE_MAP.PROFESSIONAL_CERTIFICATE;\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 const formattedPacing = pacingType\n ? pacingType.replace(/_/g, ' ').replace(/\\b\\w/g, c => c.toUpperCase())\n : '';\n\n // base string\n let enrollmentInfo = tabType !== formatMessage(messages.programProgressRemainingTab).toLowerCase() && tabType !== formatMessage(messages.programProgressPathwaysTab).toLowerCase() ? formatMessage(messages.programProgressCardEnrollText) : '';\n\n if (formattedPacing) {\n enrollmentInfo += `${enrollmentInfo ? ' ' : ''}(${formattedPacing})`;\n }\n\n // add start date if exists\n if (start) {\n const startDate = dateFormatter(formatDate, start, 'short');\n\n enrollmentInfo = enrollmentInfo\n ? `${enrollmentInfo} ${formatMessage(messages.programProgressCardStartText)} ${startDate}`\n : `${formatMessage(messages.programProgressCardStartText)} ${startDate}`;\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 {tabType === (formatMessage(messages.programProgressPathwaysTab).toLowerCase()) ? (\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 {end && (\n formatMessage(messages.programProgressCardCompletedCertificateText, {\n certificateDate: (end ? dateFormatter(formatDate, end, 'short') : ''),\n })\n )}\n </span>\n\n <ProgressCardButton variant=\"brand\" redirectUrl={certificateUrl || ''} buttonText={formatMessage(messages.programProgressCardCompletedCertificateButton)} />\n </Col>\n </Row>\n )}\n\n {isInProgressTab && (\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 {/* TODO : Certificate status will change after Upgrade is successful through api */}\n <span className=\"text-start\">\n {formatMessage(messages.programProgressInProgressCertificateStatus, {\n status: canUpgrade ? formatMessage(messages.programProgressInProgressCertificateNeedsVerified) : formatMessage(messages.programProgressInProgressCertificateNotEarned), // TODO : Certificate status will change after Upgrade is successful through api\n })}\n </span>\n\n {isProfessionalProgram\n && canUpgrade\n && getCertificatePriceString(seats)\n && (\n <ProgressCardButton\n variant=\"brand\"\n redirectUrl=\"\"\n buttonText={formatMessage(messages.programProgressCardUpgradeButton)}\n type=\"upgrade\"\n title={title}\n price={getCertificatePriceString(seats)}\n courseUrl={courseUrl}\n />\n )}\n {isMicroMastersProgram\n && checkoutUrl\n && canUpgrade\n && (\n <ProgressCardButton\n variant=\"brand\"\n redirectUrl={checkoutUrl}\n buttonText={formatMessage(messages.programProgressInProgressCourseMicromastersUpgrade, {\n price: getCertificatePriceString(seats, true),\n })}\n />\n )}\n </Col>\n </Row>\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';\n\nexport const ProgressCard: FC<ProgressCardProps> = ({ progressCardData, isLoading, tabType }) => {\n const { formatMessage, formatDate } = useIntl();\n\n const { title, pacingType, start, end, certificateUrl, courseUrl, upgradeUrl, programType, checkoutUrl, expired, seats, description, destinationUrl } = progressCardData;\n\n const inProgressTabKey = formatMessage(messages.programProgressInProgressTab).toLowerCase();\n const isInProgressTab = tabType === inProgressTabKey;\n const isProfessionalProgram = programType === PROGRAM_TYPE_MAP.PROFESSIONAL_CERTIFICATE;\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 const formattedPacing = pacingType\n ? pacingType.replace(/_/g, ' ').replace(/\\b\\w/g, c => c.toUpperCase())\n : '';\n\n // base string\n let enrollmentInfo = tabType !== formatMessage(messages.programProgressRemainingTab).toLowerCase() && tabType !== formatMessage(messages.programProgressPathwaysTab).toLowerCase() ? formatMessage(messages.programProgressCardEnrollText) : '';\n\n if (formattedPacing) {\n enrollmentInfo += `${enrollmentInfo ? ' ' : ''}(${formattedPacing})`;\n }\n\n // add start date if exists\n if (start) {\n const startDate = dateFormatter(formatDate, start, 'short');\n\n enrollmentInfo = enrollmentInfo\n ? `${enrollmentInfo} ${formatMessage(messages.programProgressCardStartText)} ${startDate}`\n : `${formatMessage(messages.programProgressCardStartText)} ${startDate}`;\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 {tabType === (formatMessage(messages.programProgressPathwaysTab).toLowerCase()) ? (\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 {end && (\n formatMessage(messages.programProgressCardCompletedCertificateText, {\n certificateDate: (end ? dateFormatter(formatDate, end, '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 <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 {/* TODO : Certificate status will change after Upgrade is successful through api */}\n <span className=\"text-start\">\n {formatMessage(messages.programProgressInProgressCertificateStatus, {\n status: canUpgrade ? formatMessage(messages.programProgressInProgressCertificateNeedsVerified) : formatMessage(messages.programProgressInProgressCertificateNotEarned), // TODO : Certificate status will change after Upgrade is successful through api\n })}\n </span>\n\n {isProfessionalProgram\n && canUpgrade\n && getCertificatePriceString(seats)\n && (\n <ProgressCardButton\n variant=\"brand\"\n redirectUrl=\"\"\n buttonText={formatMessage(messages.programProgressCardUpgradeButton)}\n type=\"upgrade\"\n title={title}\n price={getCertificatePriceString(seats)}\n courseUrl={courseUrl}\n />\n )}\n {isMicroMastersProgram\n && checkoutUrl\n && canUpgrade\n && (\n <ProgressCardButton\n variant=\"brand\"\n redirectUrl={checkoutUrl}\n buttonText={formatMessage(messages.programProgressInProgressCourseMicromastersUpgrade, {\n price: getCertificatePriceString(seats, true),\n })}\n />\n )}\n </Col>\n </Row>\n )}\n\n </Card.Section>\n </Card>\n );\n};\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Col } from '@openedx/paragon';
|
|
3
|
-
import { useIntl } from '@openedx/frontend-base';
|
|
3
|
+
import { getSiteConfig, useIntl } from '@openedx/frontend-base';
|
|
4
4
|
import { useProgressData } from '../../../../hooks';
|
|
5
5
|
import { ProgressCardButton } from './ProgressCardButton';
|
|
6
6
|
import messages from '../messages';
|
|
@@ -12,8 +12,8 @@ export const ProgressCardActions = ({ tabType, redirectUrl }) => {
|
|
|
12
12
|
const remainingCourseCount = ((_a = courseData === null || courseData === void 0 ? void 0 : courseData.notStarted) === null || _a === void 0 ? void 0 : _a.length) || 0;
|
|
13
13
|
const completedCourseCount = ((_b = courseData === null || courseData === void 0 ? void 0 : courseData.completed) === null || _b === void 0 ? void 0 : _b.length) || 0;
|
|
14
14
|
const inProgressCourseCount = ((_c = courseData === null || courseData === void 0 ? void 0 : courseData.inProgress) === null || _c === void 0 ? void 0 : _c.length) || 0;
|
|
15
|
-
return (_jsxs(Col, { xs: 12, className: "d-flex justify-content-md-end align-items-start mb-2", children: [tabType === formatMessage(messages.programProgressRemainingTab).toLowerCase() && remainingCourseCount > 0 && (_jsx(ProgressCardButton, { variant: "outline-primary", redirectUrl: redirectUrl
|
|
15
|
+
return (_jsxs(Col, { xs: 12, className: "d-flex justify-content-md-end align-items-start mb-2", children: [tabType === formatMessage(messages.programProgressRemainingTab).toLowerCase() && remainingCourseCount > 0 && (_jsx(ProgressCardButton, { variant: "outline-primary", redirectUrl: redirectUrl ? getSiteConfig().lmsBaseUrl + redirectUrl : '', buttonText: formatMessage(messages.programProgressCardViewCourseDetailButton) })), ((tabType === formatMessage(messages.programProgressCompletedTab).toLowerCase() && completedCourseCount > 0)
|
|
16
16
|
|| (tabType === formatMessage(messages.programProgressInProgressTab).toLowerCase() && inProgressCourseCount > 0))
|
|
17
|
-
&& (_jsx(ProgressCardButton, { variant: "primary", redirectUrl: redirectUrl
|
|
17
|
+
&& (_jsx(ProgressCardButton, { variant: "primary", redirectUrl: redirectUrl ? getSiteConfig().lmsBaseUrl + redirectUrl : '', buttonText: formatMessage(messages.programProgressCardResumeCourseButton) })), tabType === formatMessage(messages.programProgressPathwaysTab).toLowerCase() && (_jsx(ProgressCardButton, { variant: "outline-primary", destinationUrl: redirectUrl || '', buttonText: formatMessage(messages.programProgressPathwaysCreditPathwayLearnMore) }))] }));
|
|
18
18
|
};
|
|
19
19
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE;;IAC5F,MAAM,EAAE,mBAAmB,EAAE,GAAG,eAAe,EAAE,CAAC;IAClD,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,UAAU,GAAG,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,UAAU,KAAI,EAAE,CAAC;IACzD,MAAM,oBAAoB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC;IACjE,MAAM,oBAAoB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,SAAS,0CAAE,MAAM,KAAI,CAAC,CAAC;IAChE,MAAM,qBAAqB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC;IAElE,OAAO,CACL,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,sDAAsD,aAE1E,OAAO,KAAK,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC,CAAC,WAAW,EAAE,IAAI,oBAAoB,GAAG,CAAC,IAAI,CAC5G,KAAC,kBAAkB,IAAC,OAAO,EAAC,iBAAiB,EAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,yCAAyC,CAAC,GAAI,CAC1M,EAGA,CACC,CAAC,OAAO,KAAK,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC,CAAC,WAAW,EAAE,IAAI,oBAAoB,GAAG,CAAC,CAAC;mBACxG,CAAC,OAAO,KAAK,aAAa,CAAC,QAAQ,CAAC,4BAA4B,CAAC,CAAC,WAAW,EAAE,IAAI,qBAAqB,GAAG,CAAC,CAAC,CACjH;mBACE,CACD,KAAC,kBAAkB,IAAC,OAAO,EAAC,SAAS,EAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,qCAAqC,CAAC,GAAI,CAC9L,EAGA,OAAO,KAAK,aAAa,CAAC,QAAQ,CAAC,0BAA0B,CAAC,CAAC,WAAW,EAAE,IAAI,CAC/E,KAAC,kBAAkB,IAAC,OAAO,EAAC,iBAAiB,EAAC,cAAc,EAAE,WAAW,IAAI,EAAE,EAAE,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,6CAA6C,CAAC,GAAI,CACvK,IACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { Col } from '@openedx/paragon';\nimport { getSiteConfig, useIntl } from '@openedx/frontend-base';\n\nimport { useProgressData } from '@src/hooks';\nimport { ProgressCardActionsProps } from '../../data/types';\nimport { ProgressCardButton } from './ProgressCardButton';\nimport messages from '../messages';\n\nexport const ProgressCardActions: FC<ProgressCardActionsProps> = ({ tabType, redirectUrl }) => {\n const { programProgressData } = useProgressData();\n const { formatMessage } = useIntl();\n\n const courseData = programProgressData?.courseData || {};\n const remainingCourseCount = courseData?.notStarted?.length || 0;\n const completedCourseCount = courseData?.completed?.length || 0;\n const inProgressCourseCount = courseData?.inProgress?.length || 0;\n\n return (\n <Col xs={12} className=\"d-flex justify-content-md-end align-items-start mb-2\">\n {/** View course details button */}\n {tabType === formatMessage(messages.programProgressRemainingTab).toLowerCase() && remainingCourseCount > 0 && (\n <ProgressCardButton variant=\"outline-primary\" redirectUrl={redirectUrl ? getSiteConfig().lmsBaseUrl + redirectUrl : ''} buttonText={formatMessage(messages.programProgressCardViewCourseDetailButton)} />\n )}\n\n {/** Resume course button */}\n {(\n (tabType === formatMessage(messages.programProgressCompletedTab).toLowerCase() && completedCourseCount > 0)\n || (tabType === formatMessage(messages.programProgressInProgressTab).toLowerCase() && inProgressCourseCount > 0)\n )\n && (\n <ProgressCardButton variant=\"primary\" redirectUrl={redirectUrl ? getSiteConfig().lmsBaseUrl + redirectUrl : ''} buttonText={formatMessage(messages.programProgressCardResumeCourseButton)} />\n )}\n\n {/** Learn more button */}\n {tabType === formatMessage(messages.programProgressPathwaysTab).toLowerCase() && (\n <ProgressCardButton variant=\"outline-primary\" destinationUrl={redirectUrl || ''} buttonText={formatMessage(messages.programProgressPathwaysCreditPathwayLearnMore)} />\n )}\n </Col>\n );\n};\n"]}
|
|
@@ -3,61 +3,58 @@ import { useEffect, useMemo, useState } from 'react';
|
|
|
3
3
|
import { Alert, Button, Icon } from '@openedx/paragon';
|
|
4
4
|
import { useIntl } from '@openedx/frontend-base';
|
|
5
5
|
import { utilHooks } from '../../../hooks';
|
|
6
|
+
import { useInitializeSubsDashboard } from '../../../data/hooks';
|
|
6
7
|
import messages from '../messages';
|
|
7
8
|
import { manageSubscriptionURL } from '../../../data/constants/app';
|
|
8
9
|
import '../index.scss';
|
|
9
10
|
import { Cached, WarningFilled, Cancel } from '@openedx/paragon/icons';
|
|
10
11
|
import { subscriptionRenewalURL } from '../../../data/constants/app';
|
|
11
|
-
// TODO: We can replace the below hardcoded subscriptionInformationData with the actual data from the API once we have the API ready.
|
|
12
|
-
// For now, we can use this hardcoded data to test the SubscriptionInformation component.
|
|
13
|
-
const subscriptionInformationData = {
|
|
14
|
-
isSubscribed: true,
|
|
15
|
-
status: 'Active', // can be 'active', 'cancelled', 'renewalFailed'
|
|
16
|
-
subscriptionStartDate: '05/22/25',
|
|
17
|
-
subscriptionEndDate: '05/22/26',
|
|
18
|
-
subscriptionRenewalDate: '05/22/26',
|
|
19
|
-
subscriptionRenewalPrice: '$36',
|
|
20
|
-
numberOfCoursesEnrolled: 5,
|
|
21
|
-
totalSavings: '$120',
|
|
22
|
-
planName: 'Monthly plan',
|
|
23
|
-
};
|
|
24
12
|
export const SubscriptionInformation = () => {
|
|
25
|
-
var _a;
|
|
13
|
+
var _a, _b, _c, _d, _e;
|
|
14
|
+
const { data: subsData } = useInitializeSubsDashboard();
|
|
26
15
|
const { formatMessage } = useIntl();
|
|
27
16
|
const formatDate = utilHooks.useFormatDate();
|
|
28
17
|
const [infoBody, setInfoBody] = useState('');
|
|
29
18
|
const [infoTitle, setInfoTitle] = useState('');
|
|
19
|
+
const status = (_a = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _a === void 0 ? void 0 : _a.status;
|
|
30
20
|
useEffect(() => {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
21
|
+
var _a, _b, _c, _d, _e;
|
|
22
|
+
if (!status) {
|
|
23
|
+
setInfoTitle('');
|
|
24
|
+
setInfoBody('');
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
switch (status) {
|
|
28
|
+
case 'ACTIVE':
|
|
29
|
+
case 'TRIAL_ACTIVE':
|
|
30
|
+
case 'RENEWAL_PENDING':
|
|
34
31
|
setInfoTitle(formatMessage(messages.activeSubscriptionTitle, {
|
|
35
|
-
subscriptionStatus:
|
|
36
|
-
planName:
|
|
32
|
+
subscriptionStatus: status.split('_').map(part => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()).join(' '),
|
|
33
|
+
planName: (_a = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _a === void 0 ? void 0 : _a.planName,
|
|
37
34
|
}));
|
|
38
35
|
setInfoBody(formatMessage(messages.renewalMessage, {
|
|
39
|
-
subscriptionRenewalDate: formatDate(
|
|
36
|
+
subscriptionRenewalDate: formatDate((_b = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _b === void 0 ? void 0 : _b.currentPeriodEnd),
|
|
40
37
|
}));
|
|
41
38
|
break;
|
|
42
|
-
case '
|
|
39
|
+
case 'CANCELLED':
|
|
43
40
|
setInfoTitle(formatMessage(messages.cancelledSubscriptionTitle, {
|
|
44
|
-
subscriptionStatus:
|
|
45
|
-
planName:
|
|
41
|
+
subscriptionStatus: status.charAt(0).toUpperCase() + status.slice(1).toLowerCase(),
|
|
42
|
+
planName: (_c = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _c === void 0 ? void 0 : _c.planName,
|
|
46
43
|
}));
|
|
47
44
|
setInfoBody(formatMessage(messages.cancelledSubscriptionBody, {
|
|
48
|
-
subscriptionEndDate: formatDate(
|
|
45
|
+
subscriptionEndDate: formatDate((_d = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _d === void 0 ? void 0 : _d.subscriptionEndDate),
|
|
49
46
|
}));
|
|
50
47
|
break;
|
|
51
|
-
case '
|
|
48
|
+
case 'RENEWAL_FAILED': // also known as 'Payment Error' in figma designs
|
|
52
49
|
setInfoTitle(formatMessage(messages.renewalFailedTitle));
|
|
53
50
|
setInfoBody(formatMessage(messages.renewalFailedBody, {
|
|
54
|
-
subscriptionRenewalDate: formatDate(
|
|
51
|
+
subscriptionRenewalDate: formatDate((_e = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _e === void 0 ? void 0 : _e.currentPeriodEnd),
|
|
55
52
|
}));
|
|
56
53
|
break;
|
|
57
54
|
}
|
|
58
|
-
}, [formatDate, formatMessage]);
|
|
55
|
+
}, [formatDate, formatMessage, status, (_b = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _b === void 0 ? void 0 : _b.planName, (_c = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _c === void 0 ? void 0 : _c.currentPeriodEnd, (_d = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _d === void 0 ? void 0 : _d.subscriptionEndDate]);
|
|
59
56
|
const getSubscriptionAction = useMemo(() => {
|
|
60
|
-
if (
|
|
57
|
+
if (status === 'CANCELLED') {
|
|
61
58
|
return ([
|
|
62
59
|
_jsx(Button, { "data-testid": "renew-button", className: "renew-button", variant: "tertiary", href: subscriptionRenewalURL, target: "_blank", rel: "noopener noreferrer", role: "link", children: formatMessage(messages.renewSubscriptionButton) }, "renew-subscription"),
|
|
63
60
|
]);
|
|
@@ -66,14 +63,15 @@ export const SubscriptionInformation = () => {
|
|
|
66
63
|
return ([
|
|
67
64
|
_jsx(Button, { variant: "tertiary", "data-testid": "manage-button", href: manageSubscriptionURL, target: "_blank", rel: "noopener noreferrer", role: "link", children: formatMessage(messages.manageSubscriptionMessage) }, "manage-subscription"),
|
|
68
65
|
]);
|
|
69
|
-
}, [formatMessage]);
|
|
66
|
+
}, [formatMessage, status]);
|
|
70
67
|
const subscriptionStatusIcons = {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
68
|
+
ACTIVE: Cached,
|
|
69
|
+
TRIAL_ACTIVE: Cached,
|
|
70
|
+
CANCELLED: Cancel,
|
|
71
|
+
RENEWAL_FAILED: WarningFilled,
|
|
72
|
+
RENEWAL_PENDING: Cached,
|
|
75
73
|
};
|
|
76
|
-
const bannerIcon = (
|
|
74
|
+
const bannerIcon = (_e = subscriptionStatusIcons[status]) !== null && _e !== void 0 ? _e : undefined;
|
|
77
75
|
return (_jsxs("div", { className: "container subscription-information py-5 px-4", children: [_jsx("h2", { className: "mb-4 my-subscription-heading", children: formatMessage(messages.mySubscriptionHeading) }), _jsxs(Alert, { dismissible: false, show: true, actions: getSubscriptionAction, className: "subscription-status-alert bg-white", children: [_jsxs(Alert.Heading, { as: "h6", children: [_jsx(Icon, { src: bannerIcon, className: `icon mr-1 ${bannerIcon === WarningFilled ? 'warning-icon text-warning-500' : ''}`, "data-testid": "subscription-status-icon" }), infoTitle] }), _jsx("p", { children: infoBody })] })] }));
|
|
78
76
|
};
|
|
79
77
|
//# sourceMappingURL=SubscriptionInformation.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SubscriptionInformation.js","sourceRoot":"","sources":["../../../../src/containers/SubscriptionInformation/components/SubscriptionInformation.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAQ,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,
|
|
1
|
+
{"version":3,"file":"SubscriptionInformation.js","sourceRoot":"","sources":["../../../../src/containers/SubscriptionInformation/components/SubscriptionInformation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useEffect, useMemo, useState } from 'react';\nimport { Alert, Button, Icon } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport { utilHooks } from '@src/hooks';\nimport { useInitializeSubsDashboard } from '@src/data/hooks';\nimport messages from '../messages';\nimport { manageSubscriptionURL } from '@src/data/constants/app';\nimport '../index.scss';\nimport { Cached, WarningFilled, Cancel, Info } from '@openedx/paragon/icons';\nimport { subscriptionRenewalURL } from '@src/data/constants/app';\n\nexport const SubscriptionInformation: FC = () => {\n const { data: subsData } = useInitializeSubsDashboard();\n const { formatMessage } = useIntl();\n const formatDate = utilHooks.useFormatDate();\n const [infoBody, setInfoBody] = useState('');\n const [infoTitle, setInfoTitle] = useState('');\n const status = subsData?.userSubscription?.status;\n\n useEffect(() => {\n if (!status) {\n setInfoTitle('');\n setInfoBody('');\n return;\n }\n\n switch (status) {\n case 'ACTIVE':\n case 'TRIAL_ACTIVE':\n case 'RENEWAL_PENDING':\n setInfoTitle(formatMessage(messages.activeSubscriptionTitle, {\n subscriptionStatus: status.split('_').map(part => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()).join(' '),\n planName: subsData?.userSubscription?.planName,\n }));\n setInfoBody(formatMessage(messages.renewalMessage, {\n subscriptionRenewalDate: formatDate(subsData?.userSubscription?.currentPeriodEnd),\n }));\n break;\n case 'CANCELLED':\n setInfoTitle(formatMessage(messages.cancelledSubscriptionTitle, {\n subscriptionStatus: status.charAt(0).toUpperCase() + status.slice(1).toLowerCase(),\n planName: subsData?.userSubscription?.planName,\n }));\n setInfoBody(formatMessage(messages.cancelledSubscriptionBody, {\n subscriptionEndDate: formatDate(subsData?.userSubscription?.subscriptionEndDate),\n }));\n break;\n case 'RENEWAL_FAILED': // also known as 'Payment Error' in figma designs\n setInfoTitle(formatMessage(messages.renewalFailedTitle));\n setInfoBody(formatMessage(messages.renewalFailedBody, {\n subscriptionRenewalDate: formatDate(subsData?.userSubscription?.currentPeriodEnd),\n }));\n break;\n }\n }, [formatDate, formatMessage, status, subsData?.userSubscription?.planName, subsData?.userSubscription?.currentPeriodEnd, subsData?.userSubscription?.subscriptionEndDate]);\n\n const getSubscriptionAction = useMemo(() => {\n if (status === 'CANCELLED') {\n return (\n [\n <Button\n key=\"renew-subscription\"\n data-testid=\"renew-button\"\n className=\"renew-button\"\n variant=\"tertiary\"\n href={subscriptionRenewalURL}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n role=\"link\"\n >\n {formatMessage(messages.renewSubscriptionButton)}\n </Button>,\n ]\n );\n } else\n return (\n [\n <Button\n key=\"manage-subscription\"\n variant=\"tertiary\"\n data-testid=\"manage-button\"\n href={manageSubscriptionURL}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n role=\"link\"\n >\n {formatMessage(messages.manageSubscriptionMessage)}\n </Button>,\n ]\n );\n }, [formatMessage, status]);\n\n const subscriptionStatusIcons: Record<string, typeof Info | undefined> = {\n ACTIVE: Cached,\n TRIAL_ACTIVE: Cached,\n CANCELLED: Cancel,\n RENEWAL_FAILED: WarningFilled,\n RENEWAL_PENDING: Cached,\n };\n\n const bannerIcon = subscriptionStatusIcons[status] ?? undefined;\n\n return (\n <div className=\"container subscription-information py-5 px-4\">\n <h2 className=\"mb-4 my-subscription-heading\">{formatMessage(messages.mySubscriptionHeading)}</h2>\n <Alert\n dismissible={false}\n show={true}\n actions={getSubscriptionAction}\n className=\"subscription-status-alert bg-white\"\n >\n <Alert.Heading as=\"h6\">\n <Icon src={bannerIcon} className={`icon mr-1 ${bannerIcon === WarningFilled ? 'warning-icon text-warning-500' : ''}`} data-testid=\"subscription-status-icon\" />\n {infoTitle}\n </Alert.Heading>\n <p>\n {infoBody}\n </p>\n </Alert>\n </div>\n );\n};\n"]}
|