@edx/frontend-app-subscription-learner-dashboard 1.65.0 → 1.65.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/CoursesPanel/index.js +1 -1
- package/dist/containers/CoursesPanel/index.js.map +1 -1
- package/dist/containers/CoursesPanel/index.scss +0 -2
- package/dist/containers/SubscriptionBanner/components/SubscriptionBanner.js +3 -1
- package/dist/containers/SubscriptionBanner/components/SubscriptionBanner.js.map +1 -1
- package/package.json +1 -1
|
@@ -42,7 +42,7 @@ export const CoursesPanel = () => {
|
|
|
42
42
|
numPages,
|
|
43
43
|
visibleList,
|
|
44
44
|
};
|
|
45
|
-
return (_jsxs("div", { className: "course-list-container", children: [_jsxs("div", { className: "course-list-heading-container mb-3", children: [_jsx("
|
|
45
|
+
return (_jsxs("div", { className: "course-list-container", children: [_jsxs("div", { className: "course-list-heading-container mb-3", children: [_jsx("h3", { className: "course-list-title", children: formatMessage(messages.myCourses) }), _jsx("div", { className: "course-filter-controls-container", children: _jsx(CourseFilterControls, {}) })] }), isPending ? (_jsx(LoadingView, {})) : (hasCourses ? _jsx(CourseListSlot, { courseListData: courseListData }) : _jsx(NoCoursesViewSlot, {}))] }));
|
|
46
46
|
};
|
|
47
47
|
CoursesPanel.propTypes = {};
|
|
48
48
|
export default CoursesPanel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/CoursesPanel/index.jsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo } from 'react';\n\nimport { useIntl } from '@openedx/frontend-base';\nimport { useInitializeSubsCourseDashboard } from '@src/data/hooks';\nimport { CourseFilterControls } from '@src/containers/CourseFilterControls';\nimport LoadingView from '@src/containers/Dashboard/LoadingView';\nimport CourseListSlot from '../../slots/CourseListSlot';\nimport NoCoursesViewSlot from '../../slots/NoCoursesViewSlot';\nimport { useFilters } from '@src/data/context';\n\nimport { getVisibleList } from '@src/utils/dataTransformers';\n\nimport messages from './messages';\n\nimport './index.scss';\n\n/**\n * Renders the list of CourseCards\n * Also houses the NoCoursesView to display if the user hasn't enrolled in any courses.\n * @returns List of courses as CourseCards or empty state\n*/\nexport const CoursesPanel = () => {\n const { formatMessage } = useIntl();\n const { data, isPending } = useInitializeSubsCourseDashboard();\n const hasCourses = useMemo(\n () =>\n (data?.subscriptionCourses?.length || 0) > 0\n || (data?.upgradeableCourses?.length || 0) > 0,\n [data],\n );\n const {\n filters, sortBy, pageNumber, setPageNumber,\n } = useFilters();\n const { visibleList, numPages } = useMemo(() => {\n const transformedCourses = data?.coursesByCardId\n ? Object.values(data.coursesByCardId)\n : [];\n return getVisibleList(\n transformedCourses,\n filters,\n sortBy,\n pageNumber,\n );\n }, [data, filters, sortBy, pageNumber]);\n\n // Clamp page number when filtered/mutated list shrinks\n React.useEffect(() => {\n if (numPages > 0 && pageNumber > numPages) {\n setPageNumber(1);\n }\n }, [numPages, pageNumber, setPageNumber]);\n\n const courseListData = {\n showFilters: true,\n setPageNumber,\n numPages,\n visibleList,\n };\n\n return (\n <div className=\"course-list-container\">\n <div className=\"course-list-heading-container mb-3\">\n <
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/containers/CoursesPanel/index.jsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo } from 'react';\n\nimport { useIntl } from '@openedx/frontend-base';\nimport { useInitializeSubsCourseDashboard } from '@src/data/hooks';\nimport { CourseFilterControls } from '@src/containers/CourseFilterControls';\nimport LoadingView from '@src/containers/Dashboard/LoadingView';\nimport CourseListSlot from '../../slots/CourseListSlot';\nimport NoCoursesViewSlot from '../../slots/NoCoursesViewSlot';\nimport { useFilters } from '@src/data/context';\n\nimport { getVisibleList } from '@src/utils/dataTransformers';\n\nimport messages from './messages';\n\nimport './index.scss';\n\n/**\n * Renders the list of CourseCards\n * Also houses the NoCoursesView to display if the user hasn't enrolled in any courses.\n * @returns List of courses as CourseCards or empty state\n*/\nexport const CoursesPanel = () => {\n const { formatMessage } = useIntl();\n const { data, isPending } = useInitializeSubsCourseDashboard();\n const hasCourses = useMemo(\n () =>\n (data?.subscriptionCourses?.length || 0) > 0\n || (data?.upgradeableCourses?.length || 0) > 0,\n [data],\n );\n const {\n filters, sortBy, pageNumber, setPageNumber,\n } = useFilters();\n const { visibleList, numPages } = useMemo(() => {\n const transformedCourses = data?.coursesByCardId\n ? Object.values(data.coursesByCardId)\n : [];\n return getVisibleList(\n transformedCourses,\n filters,\n sortBy,\n pageNumber,\n );\n }, [data, filters, sortBy, pageNumber]);\n\n // Clamp page number when filtered/mutated list shrinks\n React.useEffect(() => {\n if (numPages > 0 && pageNumber > numPages) {\n setPageNumber(1);\n }\n }, [numPages, pageNumber, setPageNumber]);\n\n const courseListData = {\n showFilters: true,\n setPageNumber,\n numPages,\n visibleList,\n };\n\n return (\n <div className=\"course-list-container\">\n <div className=\"course-list-heading-container mb-3\">\n <h3 className=\"course-list-title\">{formatMessage(messages.myCourses)}</h3>\n <div className=\"course-filter-controls-container\">\n <CourseFilterControls />\n </div>\n </div>\n {isPending ? (\n <LoadingView />\n ) : (\n hasCourses ? <CourseListSlot courseListData={courseListData} /> : <NoCoursesViewSlot />\n )}\n </div>\n );\n};\n\nCoursesPanel.propTypes = {};\n\nexport default CoursesPanel;\n"]}
|
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
.course-list-title {
|
|
11
|
-
font-size: var(--pgn-typography-font-size-h2-base);
|
|
12
11
|
margin: var(--pgn-spacing-spacer-3) 0;
|
|
13
12
|
}
|
|
14
13
|
|
|
@@ -35,7 +34,6 @@
|
|
|
35
34
|
}
|
|
36
35
|
|
|
37
36
|
.course-list-title {
|
|
38
|
-
font-size: var(--pgn-typography-font-size-h3-base);
|
|
39
37
|
margin: var(--pgn-spacing-spacer-2) 0;
|
|
40
38
|
}
|
|
41
39
|
}
|
|
@@ -76,7 +76,9 @@ export const SubscriptionBanner = ({ learnerSubscriptionData }) => {
|
|
|
76
76
|
break;
|
|
77
77
|
case 'CANCELLED':
|
|
78
78
|
setBannerVariant('light');
|
|
79
|
-
setBannerTitle(formatMessage(messages.cancelledSubscriptionTitle
|
|
79
|
+
setBannerTitle(formatMessage(messages.cancelledSubscriptionTitle, {
|
|
80
|
+
daysLeft: daysLeftAfterCancellation,
|
|
81
|
+
}));
|
|
80
82
|
setBannerBody(formatMessage(messages.cancelledSubscriptionBody, {
|
|
81
83
|
subscriptionRenewalEndDate: formatDate(currentPeriodEnd),
|
|
82
84
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SubscriptionBanner.js","sourceRoot":"","sources":["../../../../src/containers/SubscriptionBanner/components/SubscriptionBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useEffect, useState, useMemo } from 'react';\nimport { Alert, Button, Variant } from '@openedx/paragon';\nimport { CheckCircle, Info } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport moment from 'moment';\nimport { utilHooks } from '@src/hooks';\nimport messages from '../messages';\nimport { manageSubscriptionURL } from '@src/data/constants/app';\nimport { Link } from 'react-router-dom';\nimport { BannerItem } from '../types';\nimport { eventNames, trackSubscriptionEvent } from '@src/tracking/trackers/subscription';\n\nexport const SubscriptionBanner: FC<BannerItem> = ({ learnerSubscriptionData }) => {\n const { formatMessage } = useIntl();\n\n const [isDismissed, setIsDismissed] = useState(false);\n const [bannerBody, setBannerBody] = useState('');\n const [bannerTitle, setBannerTitle] = useState('');\n const [bannerVariant, setBannerVariant] = useState<Variant | undefined>(undefined);\n\n const formatDate = utilHooks.useFormatDate();\n\n const {\n status,\n subscriptionEndDate,\n subscriptionStartDate,\n currentPeriodEnd,\n trialEndDate,\n } = learnerSubscriptionData;\n\n useEffect(() => {\n if (!status) {\n setBannerTitle('');\n setBannerBody('');\n setBannerVariant(undefined);\n return;\n }\n\n const trialEndDateMoment = moment(trialEndDate).startOf('day');\n const today = moment().startOf('day');\n\n const trialDaysLeft = trialEndDateMoment.isValid()\n ? Math.max(0, trialEndDateMoment.diff(today, 'days'))\n : 0;\n\n const daysLeftAfterCancellation = moment(currentPeriodEnd).isValid()\n ? Math.max(0, moment(currentPeriodEnd).diff(today, 'days'))\n : 0;\n\n switch (status) {\n case 'RENEWAL_PENDING':\n setBannerVariant('success');\n setBannerTitle(formatMessage(messages.renewalPendingTitle));\n setBannerBody(\n formatMessage(messages.renewalPendingBody, {\n subscriptionRenewalDate: formatDate(\n currentPeriodEnd\n ),\n }),\n );\n break;\n\n case 'TRIAL_ACTIVE':\n setBannerVariant('success');\n\n if (trialDaysLeft === 0) {\n setBannerTitle(\n formatMessage(messages.activeTrialSubscriptionTitleToday),\n );\n } else if (trialDaysLeft === 1) {\n setBannerTitle(\n formatMessage(messages.activeTrialSubscriptionTitleTomorrow),\n );\n } else if (\n moment(subscriptionStartDate).isValid()\n && moment(subscriptionStartDate).isSame(moment(), 'day')\n ) {\n setBannerTitle(\n formatMessage(messages.activeSubscriptionTitle),\n );\n\n setBannerBody(\n formatMessage(messages.activeSubscriptionBody, {\n subscriptionRenewalDate: formatDate(\n currentPeriodEnd\n ),\n }),\n );\n\n return;\n } else {\n setBannerTitle(\n formatMessage(messages.activeTrialSubscriptionTitle, {\n daysLeft: trialDaysLeft,\n }),\n );\n }\n\n setBannerBody(\n formatMessage(messages.activeTrialSubscriptionBody, {\n trialEndDate: formatDate(trialEndDate),\n }),\n );\n break;\n\n case 'CANCEL_PENDING':\n setBannerVariant('light');\n setBannerTitle(\n formatMessage(messages.cancelledSubscriptionTitle, {\n daysLeft: daysLeftAfterCancellation,\n }),\n );\n setBannerBody(\n formatMessage(messages.cancelledSubscriptionBody, {\n subscriptionRenewalEndDate: formatDate(currentPeriodEnd),\n }),\n );\n break;\n\n case 'CANCELLED':\n setBannerVariant('light');\n setBannerTitle(\n formatMessage(messages.cancelledSubscriptionTitle),\n );\n setBannerBody(\n formatMessage(messages.cancelledSubscriptionBody, {\n subscriptionRenewalEndDate: formatDate(currentPeriodEnd),\n }),\n );\n break;\n\n case 'RENEWAL_FAILED':\n setBannerVariant('light');\n setBannerTitle(\n formatMessage(messages.renewalFailedTitle),\n );\n setBannerBody(\n formatMessage(messages.renewalFailedBody, {\n subscriptionRenewalDate: formatDate(\n currentPeriodEnd\n ),\n }),\n );\n break;\n\n default:\n break;\n }\n }, [\n status,\n formatDate,\n formatMessage,\n subscriptionEndDate,\n subscriptionStartDate,\n currentPeriodEnd,\n trialEndDate,\n ]);\n\n // Reset dismissal when the subscription status changes.\n useEffect(() => {\n setIsDismissed(false);\n }, [status]);\n\n const getSubscriptionAction = useMemo(() => {\n if (status === 'CANCELLED' || status === 'CANCEL_PENDING') {\n return [\n <Button\n key=\"renew-subscription\"\n data-testid=\"renew-button\"\n className=\"renew-button\"\n variant=\"primary\"\n href={manageSubscriptionURL}\n onClick={() => trackSubscriptionEvent(eventNames.subscriptionBannerActionClicked, {\n subscription_status: status,\n action: 'renew',\n })}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n role=\"link\"\n >\n {formatMessage(messages.renewSubscriptionButton)}\n </Button>,\n ];\n }\n\n if (status === 'RENEWAL_FAILED') {\n return [\n <Button\n key=\"renew-failed-subscription\"\n data-testid=\"renew-failed-button\"\n className=\"renew-failed-button\"\n variant=\"primary\"\n to={manageSubscriptionURL}\n onClick={() => trackSubscriptionEvent(eventNames.subscriptionBannerActionClicked, {\n subscription_status: status,\n action: 'renewal_failed',\n })}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n role=\"link\"\n as={Link}\n >\n {formatMessage(messages.renewalFailedButton)}\n </Button>,\n ];\n }\n\n return [];\n }, [formatMessage, status]);\n\n const subscriptionStatusIcons: Record<\n string,\n typeof Info | undefined\n > = {\n TRIAL_ACTIVE: CheckCircle,\n RENEWAL_PENDING: CheckCircle,\n };\n\n const bannerIcon = (subscriptionStatusIcons[status]\n && moment(subscriptionStartDate).isValid()\n && moment(subscriptionStartDate).isSame(moment(), 'day'))\n ? subscriptionStatusIcons[status]\n : undefined;\n\n const shouldShowBanner = Boolean(\n status\n && bannerTitle\n && bannerBody\n && !isDismissed\n && bannerVariant\n );\n\n useEffect(() => {\n if (shouldShowBanner) {\n trackSubscriptionEvent(eventNames.subscriptionBannerViewed, { subscription_status: status });\n }\n }, [shouldShowBanner, status]);\n\n const handleDismiss = () => {\n trackSubscriptionEvent(eventNames.subscriptionBannerDismissed, { subscription_status: status });\n setIsDismissed(true);\n };\n\n return (\n <div className=\"mt-4.5 mb-4.5\">\n {shouldShowBanner && (\n <Alert\n variant={bannerVariant}\n icon={bannerIcon}\n dismissible\n closeLabel=\"Dismiss\"\n onClose={handleDismiss}\n actions={getSubscriptionAction}\n >\n <Alert.Heading>{bannerTitle}</Alert.Heading>\n <p>{bannerBody}</p>\n </Alert>\n )}\n </div>\n );\n};\n\nexport default SubscriptionBanner;\n"]}
|
|
1
|
+
{"version":3,"file":"SubscriptionBanner.js","sourceRoot":"","sources":["../../../../src/containers/SubscriptionBanner/components/SubscriptionBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useEffect, useState, useMemo } from 'react';\nimport { Alert, Button, Variant } from '@openedx/paragon';\nimport { CheckCircle, Info } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport moment from 'moment';\nimport { utilHooks } from '@src/hooks';\nimport messages from '../messages';\nimport { manageSubscriptionURL } from '@src/data/constants/app';\nimport { Link } from 'react-router-dom';\nimport { BannerItem } from '../types';\nimport { eventNames, trackSubscriptionEvent } from '@src/tracking/trackers/subscription';\n\nexport const SubscriptionBanner: FC<BannerItem> = ({ learnerSubscriptionData }) => {\n const { formatMessage } = useIntl();\n\n const [isDismissed, setIsDismissed] = useState(false);\n const [bannerBody, setBannerBody] = useState('');\n const [bannerTitle, setBannerTitle] = useState('');\n const [bannerVariant, setBannerVariant] = useState<Variant | undefined>(undefined);\n\n const formatDate = utilHooks.useFormatDate();\n\n const {\n status,\n subscriptionEndDate,\n subscriptionStartDate,\n currentPeriodEnd,\n trialEndDate,\n } = learnerSubscriptionData;\n\n useEffect(() => {\n if (!status) {\n setBannerTitle('');\n setBannerBody('');\n setBannerVariant(undefined);\n return;\n }\n\n const trialEndDateMoment = moment(trialEndDate).startOf('day');\n const today = moment().startOf('day');\n\n const trialDaysLeft = trialEndDateMoment.isValid()\n ? Math.max(0, trialEndDateMoment.diff(today, 'days'))\n : 0;\n\n const daysLeftAfterCancellation = moment(currentPeriodEnd).isValid()\n ? Math.max(0, moment(currentPeriodEnd).diff(today, 'days'))\n : 0;\n\n switch (status) {\n case 'RENEWAL_PENDING':\n setBannerVariant('success');\n setBannerTitle(formatMessage(messages.renewalPendingTitle));\n setBannerBody(\n formatMessage(messages.renewalPendingBody, {\n subscriptionRenewalDate: formatDate(\n currentPeriodEnd\n ),\n }),\n );\n break;\n\n case 'TRIAL_ACTIVE':\n setBannerVariant('success');\n\n if (trialDaysLeft === 0) {\n setBannerTitle(\n formatMessage(messages.activeTrialSubscriptionTitleToday),\n );\n } else if (trialDaysLeft === 1) {\n setBannerTitle(\n formatMessage(messages.activeTrialSubscriptionTitleTomorrow),\n );\n } else if (\n moment(subscriptionStartDate).isValid()\n && moment(subscriptionStartDate).isSame(moment(), 'day')\n ) {\n setBannerTitle(\n formatMessage(messages.activeSubscriptionTitle),\n );\n\n setBannerBody(\n formatMessage(messages.activeSubscriptionBody, {\n subscriptionRenewalDate: formatDate(\n currentPeriodEnd\n ),\n }),\n );\n\n return;\n } else {\n setBannerTitle(\n formatMessage(messages.activeTrialSubscriptionTitle, {\n daysLeft: trialDaysLeft,\n }),\n );\n }\n\n setBannerBody(\n formatMessage(messages.activeTrialSubscriptionBody, {\n trialEndDate: formatDate(trialEndDate),\n }),\n );\n break;\n\n case 'CANCEL_PENDING':\n setBannerVariant('light');\n setBannerTitle(\n formatMessage(messages.cancelledSubscriptionTitle, {\n daysLeft: daysLeftAfterCancellation,\n }),\n );\n setBannerBody(\n formatMessage(messages.cancelledSubscriptionBody, {\n subscriptionRenewalEndDate: formatDate(currentPeriodEnd),\n }),\n );\n break;\n\n case 'CANCELLED':\n setBannerVariant('light');\n setBannerTitle(\n formatMessage(messages.cancelledSubscriptionTitle, {\n daysLeft: daysLeftAfterCancellation,\n }),\n );\n setBannerBody(\n formatMessage(messages.cancelledSubscriptionBody, {\n subscriptionRenewalEndDate: formatDate(currentPeriodEnd),\n }),\n );\n break;\n\n case 'RENEWAL_FAILED':\n setBannerVariant('light');\n setBannerTitle(\n formatMessage(messages.renewalFailedTitle),\n );\n setBannerBody(\n formatMessage(messages.renewalFailedBody, {\n subscriptionRenewalDate: formatDate(\n currentPeriodEnd\n ),\n }),\n );\n break;\n\n default:\n break;\n }\n }, [\n status,\n formatDate,\n formatMessage,\n subscriptionEndDate,\n subscriptionStartDate,\n currentPeriodEnd,\n trialEndDate,\n ]);\n\n // Reset dismissal when the subscription status changes.\n useEffect(() => {\n setIsDismissed(false);\n }, [status]);\n\n const getSubscriptionAction = useMemo(() => {\n if (status === 'CANCELLED' || status === 'CANCEL_PENDING') {\n return [\n <Button\n key=\"renew-subscription\"\n data-testid=\"renew-button\"\n className=\"renew-button\"\n variant=\"primary\"\n href={manageSubscriptionURL}\n onClick={() => trackSubscriptionEvent(eventNames.subscriptionBannerActionClicked, {\n subscription_status: status,\n action: 'renew',\n })}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n role=\"link\"\n >\n {formatMessage(messages.renewSubscriptionButton)}\n </Button>,\n ];\n }\n\n if (status === 'RENEWAL_FAILED') {\n return [\n <Button\n key=\"renew-failed-subscription\"\n data-testid=\"renew-failed-button\"\n className=\"renew-failed-button\"\n variant=\"primary\"\n to={manageSubscriptionURL}\n onClick={() => trackSubscriptionEvent(eventNames.subscriptionBannerActionClicked, {\n subscription_status: status,\n action: 'renewal_failed',\n })}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n role=\"link\"\n as={Link}\n >\n {formatMessage(messages.renewalFailedButton)}\n </Button>,\n ];\n }\n\n return [];\n }, [formatMessage, status]);\n\n const subscriptionStatusIcons: Record<\n string,\n typeof Info | undefined\n > = {\n TRIAL_ACTIVE: CheckCircle,\n RENEWAL_PENDING: CheckCircle,\n };\n\n const bannerIcon = (subscriptionStatusIcons[status]\n && moment(subscriptionStartDate).isValid()\n && moment(subscriptionStartDate).isSame(moment(), 'day'))\n ? subscriptionStatusIcons[status]\n : undefined;\n\n const shouldShowBanner = Boolean(\n status\n && bannerTitle\n && bannerBody\n && !isDismissed\n && bannerVariant\n );\n\n useEffect(() => {\n if (shouldShowBanner) {\n trackSubscriptionEvent(eventNames.subscriptionBannerViewed, { subscription_status: status });\n }\n }, [shouldShowBanner, status]);\n\n const handleDismiss = () => {\n trackSubscriptionEvent(eventNames.subscriptionBannerDismissed, { subscription_status: status });\n setIsDismissed(true);\n };\n\n return (\n <div className=\"mt-4.5 mb-4.5\">\n {shouldShowBanner && (\n <Alert\n variant={bannerVariant}\n icon={bannerIcon}\n dismissible\n closeLabel=\"Dismiss\"\n onClose={handleDismiss}\n actions={getSubscriptionAction}\n >\n <Alert.Heading>{bannerTitle}</Alert.Heading>\n <p>{bannerBody}</p>\n </Alert>\n )}\n </div>\n );\n};\n\nexport default SubscriptionBanner;\n"]}
|