@edx/frontend-app-subscription-learner-dashboard 1.31.0 → 1.31.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/SubscriptionBanner/components/SubscriptionBanner.js +13 -1
- package/dist/containers/SubscriptionBanner/components/SubscriptionBanner.js.map +1 -1
- package/dist/containers/SubscriptionBanner/messages.js +2 -2
- package/dist/containers/SubscriptionBanner/messages.js.map +1 -1
- package/dist/containers/SubscriptionInformation/components/SubscriptionInformation.js +15 -5
- package/dist/containers/SubscriptionInformation/components/SubscriptionInformation.js.map +1 -1
- package/dist/data/constants/app.d.ts +1 -1
- package/dist/data/constants/app.js +1 -1
- package/dist/data/constants/app.js.map +1 -1
- package/package.json +1 -1
|
@@ -28,6 +28,9 @@ export const SubscriptionBanner = ({ learnerSubscriptionData }) => {
|
|
|
28
28
|
const trialDaysLeft = trialEndDateMoment.isValid()
|
|
29
29
|
? Math.max(0, trialEndDateMoment.diff(today, 'days'))
|
|
30
30
|
: 0;
|
|
31
|
+
const daysLeftAfterCancellation = moment(currentPeriodEnd).isValid()
|
|
32
|
+
? Math.max(0, moment(currentPeriodEnd).diff(today, 'days'))
|
|
33
|
+
: 0;
|
|
31
34
|
switch (status) {
|
|
32
35
|
case 'RENEWAL_PENDING':
|
|
33
36
|
setBannerVariant('success');
|
|
@@ -61,6 +64,15 @@ export const SubscriptionBanner = ({ learnerSubscriptionData }) => {
|
|
|
61
64
|
trialEndDate: formatDate(trialEndDate),
|
|
62
65
|
}));
|
|
63
66
|
break;
|
|
67
|
+
case 'CANCEL_PENDING':
|
|
68
|
+
setBannerVariant('light');
|
|
69
|
+
setBannerTitle(formatMessage(messages.cancelledSubscriptionTitle, {
|
|
70
|
+
daysLeft: daysLeftAfterCancellation,
|
|
71
|
+
}));
|
|
72
|
+
setBannerBody(formatMessage(messages.cancelledSubscriptionBody, {
|
|
73
|
+
subscriptionEndDate: formatDate(subscriptionEndDate),
|
|
74
|
+
}));
|
|
75
|
+
break;
|
|
64
76
|
case 'CANCELLED':
|
|
65
77
|
setBannerVariant('light');
|
|
66
78
|
setBannerTitle(formatMessage(messages.cancelledSubscriptionTitle));
|
|
@@ -92,7 +104,7 @@ export const SubscriptionBanner = ({ learnerSubscriptionData }) => {
|
|
|
92
104
|
setIsDismissed(false);
|
|
93
105
|
}, [status]);
|
|
94
106
|
const getSubscriptionAction = useMemo(() => {
|
|
95
|
-
if (status === 'CANCELLED') {
|
|
107
|
+
if (status === 'CANCELLED' || status === 'CANCEL_PENDING') {
|
|
96
108
|
return [
|
|
97
109
|
_jsx(Button, { "data-testid": "renew-button", className: "renew-button", variant: "primary", href: subscriptionRenewalURL, target: "_blank", rel: "noopener noreferrer", role: "link", children: formatMessage(messages.renewSubscriptionButton) }, "renew-subscription"),
|
|
98
110
|
];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SubscriptionBanner.js","sourceRoot":"","sources":["../../../../src/containers/SubscriptionBanner/components/SubscriptionBanner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,EAAW,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAQ,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,MAAM,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAGxC,MAAM,CAAC,MAAM,kBAAkB,GAAmB,CAAC,EAAE,uBAAuB,EAAE,EAAE,EAAE;IAChF,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAsB,SAAS,CAAC,CAAC;IAEnF,MAAM,UAAU,GAAG,SAAS,CAAC,aAAa,EAAE,CAAC;IAE7C,MAAM,EACJ,MAAM,EACN,mBAAmB,EACnB,qBAAqB,EACrB,gBAAgB,EAChB,YAAY,GACb,GAAG,uBAAuB,CAAC;IAE5B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,cAAc,CAAC,EAAE,CAAC,CAAC;YACnB,aAAa,CAAC,EAAE,CAAC,CAAC;YAClB,gBAAgB,CAAC,SAAS,CAAC,CAAC;YAC5B,OAAO;QACT,CAAC;QAED,MAAM,kBAAkB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC/D,MAAM,KAAK,GAAG,MAAM,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAEtC,MAAM,aAAa,GAAG,kBAAkB,CAAC,OAAO,EAAE;YAChD,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;YACrD,CAAC,CAAC,CAAC,CAAC;QAEN,QAAQ,MAAM,EAAE,CAAC;YACf,KAAK,iBAAiB;gBACpB,gBAAgB,CAAC,SAAS,CAAC,CAAC;gBAC5B,cAAc,CAAC,aAAa,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC,CAAC;gBAC5D,aAAa,CACX,aAAa,CAAC,QAAQ,CAAC,kBAAkB,EAAE;oBACzC,uBAAuB,EAAE,UAAU,CACjC,gBAAgB,CACjB;iBACF,CAAC,CACH,CAAC;gBACF,MAAM;YAER,KAAK,cAAc;gBACjB,gBAAgB,CAAC,SAAS,CAAC,CAAC;gBAE5B,IAAI,aAAa,KAAK,CAAC,EAAE,CAAC;oBACxB,cAAc,CACZ,aAAa,CAAC,QAAQ,CAAC,iCAAiC,CAAC,CAC1D,CAAC;gBACJ,CAAC;qBAAM,IAAI,aAAa,KAAK,CAAC,EAAE,CAAC;oBAC/B,cAAc,CACZ,aAAa,CAAC,QAAQ,CAAC,oCAAoC,CAAC,CAC7D,CAAC;gBACJ,CAAC;qBAAM,IACL,MAAM,CAAC,qBAAqB,CAAC,CAAC,OAAO,EAAE;uBACpC,MAAM,CAAC,qBAAqB,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,EACxD,CAAC;oBACD,cAAc,CACZ,aAAa,CAAC,QAAQ,CAAC,uBAAuB,CAAC,CAChD,CAAC;oBAEF,aAAa,CACX,aAAa,CAAC,QAAQ,CAAC,sBAAsB,EAAE;wBAC7C,uBAAuB,EAAE,UAAU,CACjC,gBAAgB,CACjB;qBACF,CAAC,CACH,CAAC;oBAEF,OAAO;gBACT,CAAC;qBAAM,CAAC;oBACN,cAAc,CACZ,aAAa,CAAC,QAAQ,CAAC,4BAA4B,EAAE;wBACnD,QAAQ,EAAE,aAAa;qBACxB,CAAC,CACH,CAAC;gBACJ,CAAC;gBAED,aAAa,CACX,aAAa,CAAC,QAAQ,CAAC,2BAA2B,EAAE;oBAClD,YAAY,EAAE,UAAU,CAAC,YAAY,CAAC;iBACvC,CAAC,CACH,CAAC;gBACF,MAAM;YAER,KAAK,WAAW;gBACd,gBAAgB,CAAC,OAAO,CAAC,CAAC;gBAC1B,cAAc,CACZ,aAAa,CAAC,QAAQ,CAAC,0BAA0B,CAAC,CACnD,CAAC;gBACF,aAAa,CACX,aAAa,CAAC,QAAQ,CAAC,yBAAyB,EAAE;oBAChD,mBAAmB,EAAE,UAAU,CAAC,mBAAmB,CAAC;iBACrD,CAAC,CACH,CAAC;gBACF,MAAM;YAER,KAAK,gBAAgB;gBACnB,gBAAgB,CAAC,OAAO,CAAC,CAAC;gBAC1B,cAAc,CACZ,aAAa,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAC3C,CAAC;gBACF,aAAa,CACX,aAAa,CAAC,QAAQ,CAAC,iBAAiB,EAAE;oBACxC,uBAAuB,EAAE,UAAU,CACjC,gBAAgB,CACjB;iBACF,CAAC,CACH,CAAC;gBACF,MAAM;YAER;gBACE,MAAM;QACV,CAAC;IACH,CAAC,EAAE;QACD,MAAM;QACN,UAAU;QACV,aAAa;QACb,mBAAmB;QACnB,qBAAqB;QACrB,gBAAgB;QAChB,YAAY;KACb,CAAC,CAAC;IAEH,wDAAwD;IACxD,SAAS,CAAC,GAAG,EAAE;QACb,cAAc,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,qBAAqB,GAAG,OAAO,CAAC,GAAG,EAAE;QACzC,IAAI,MAAM,KAAK,WAAW,EAAE,CAAC;YAC3B,OAAO;gBACL,KAAC,MAAM,mBAEO,cAAc,EAC1B,SAAS,EAAC,cAAc,EACxB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,sBAAsB,EAC5B,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,IAAI,EAAC,MAAM,YAEV,aAAa,CAAC,QAAQ,CAAC,uBAAuB,CAAC,IAT5C,oBAAoB,CAUjB;aACV,CAAC;QACJ,CAAC;QAED,IAAI,MAAM,KAAK,gBAAgB,EAAE,CAAC;YAChC,OAAO;gBACL,KAAC,MAAM,mBAEO,qBAAqB,EACjC,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAC,SAAS,EACjB,EAAE,EAAE,eAAe,EACnB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,IAAI,YAEP,aAAa,CAAC,QAAQ,CAAC,mBAAmB,CAAC,IAVxC,2BAA2B,CAWxB;aACV,CAAC;QACJ,CAAC;QAED,OAAO,EAAE,CAAC;IACZ,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC;IAE5B,MAAM,uBAAuB,GAGzB;QACF,YAAY,EAAE,WAAW;QACzB,eAAe,EAAE,WAAW;KAC7B,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,uBAAuB,CAAC,MAAM,CAAC;WAC9C,MAAM,CAAC,qBAAqB,CAAC,CAAC,OAAO,EAAE;WACvC,MAAM,CAAC,qBAAqB,CAAC,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,KAAK,CAAC,CAAC;QACzD,CAAC,CAAC,uBAAuB,CAAC,MAAM,CAAC;QACjC,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,gBAAgB,GAAG,OAAO,CAC9B,MAAM;WACH,WAAW;WACX,UAAU;WACV,CAAC,WAAW;WACZ,aAAa,CACjB,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAC,eAAe,YAC3B,gBAAgB,IAAI,CACnB,MAAC,KAAK,IACJ,OAAO,EAAE,aAAa,EACtB,IAAI,EAAE,UAAU,EAChB,WAAW,QACX,UAAU,EAAC,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,EACnC,OAAO,EAAE,qBAAqB,aAE9B,KAAC,KAAK,CAAC,OAAO,cAAE,WAAW,GAAiB,EAC5C,sBAAI,UAAU,GAAK,IACb,CACT,GACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC","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 { subscriptionRenewalURL, checkoutPageURL } from '@src/data/constants/app';\nimport { Link } from 'react-router-dom';\nimport { BannerItem } from '../types';\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 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 'CANCELLED':\n setBannerVariant('light');\n setBannerTitle(\n formatMessage(messages.cancelledSubscriptionTitle),\n );\n setBannerBody(\n formatMessage(messages.cancelledSubscriptionBody, {\n subscriptionEndDate: formatDate(subscriptionEndDate),\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') {\n return [\n <Button\n key=\"renew-subscription\"\n data-testid=\"renew-button\"\n className=\"renew-button\"\n variant=\"primary\"\n href={subscriptionRenewalURL}\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={checkoutPageURL}\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 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={() => setIsDismissed(true)}\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 { subscriptionRenewalURL, checkoutPageURL } from '@src/data/constants/app';\nimport { Link } from 'react-router-dom';\nimport { BannerItem } from '../types';\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 subscriptionEndDate: formatDate(subscriptionEndDate),\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 subscriptionEndDate: formatDate(subscriptionEndDate),\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={subscriptionRenewalURL}\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={checkoutPageURL}\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 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={() => setIsDismissed(true)}\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"]}
|
|
@@ -34,12 +34,12 @@ const messages = defineMessages({
|
|
|
34
34
|
cancelledSubscriptionTitle: {
|
|
35
35
|
id: 'learner-dash.subscriptionBanner.banners.cancelledSubscriptionTitle',
|
|
36
36
|
description: 'Message to learners with a cancelled subscription',
|
|
37
|
-
defaultMessage: 'Your subscription expires in
|
|
37
|
+
defaultMessage: 'Your subscription expires in {daysLeft} days',
|
|
38
38
|
},
|
|
39
39
|
cancelledSubscriptionBody: {
|
|
40
40
|
id: 'learner-dash.subscriptionBanner.banners.cancelledSubscriptionBody',
|
|
41
41
|
description: 'Message to learners with a cancelled subscription',
|
|
42
|
-
defaultMessage: '
|
|
42
|
+
defaultMessage: 'Your subscription will expire on {subscriptionEndDate}',
|
|
43
43
|
},
|
|
44
44
|
renewSubscriptionButton: {
|
|
45
45
|
id: 'learner-dash.subscriptionBanner.banners.renewSubscriptionButton',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/SubscriptionBanner/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,yHAAyH;AACzH,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,uBAAuB,EAAE;QACvB,EAAE,EAAE,iEAAiE;QACrE,WAAW,EAAE,iDAAiD;QAC9D,cAAc,EAAE,0CAA0C;KAC3D;IACD,sBAAsB,EAAE;QACtB,EAAE,EAAE,gEAAgE;QACpE,WAAW,EAAE,iDAAiD;QAC9D,cAAc,EAAE,4DAA4D;KAC7E;IACD,4BAA4B,EAAE;QAC5B,EAAE,EAAE,sEAAsE;QAC1E,WAAW,EAAE,uDAAuD;QACpE,cAAc,EAAE,iDAAiD;KAClE;IACD,iCAAiC,EAAE;QACjC,EAAE,EAAE,2EAA2E;QAC/E,WAAW,EAAE,8DAA8D;QAC3E,cAAc,EAAE,oCAAoC;KACrD;IACD,oCAAoC,EAAE;QACpC,EAAE,EAAE,8EAA8E;QAClF,WAAW,EAAE,iEAAiE;QAC9E,cAAc,EAAE,uCAAuC;KACxD;IACD,2BAA2B,EAAE;QAC3B,EAAE,EAAE,qEAAqE;QACzE,WAAW,EAAE,uDAAuD;QACpE,cAAc,EAAE,iDAAiD;KAClE;IACD,0BAA0B,EAAE;QAC1B,EAAE,EAAE,oEAAoE;QACxE,WAAW,EAAE,mDAAmD;QAChE,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/SubscriptionBanner/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,yHAAyH;AACzH,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,uBAAuB,EAAE;QACvB,EAAE,EAAE,iEAAiE;QACrE,WAAW,EAAE,iDAAiD;QAC9D,cAAc,EAAE,0CAA0C;KAC3D;IACD,sBAAsB,EAAE;QACtB,EAAE,EAAE,gEAAgE;QACpE,WAAW,EAAE,iDAAiD;QAC9D,cAAc,EAAE,4DAA4D;KAC7E;IACD,4BAA4B,EAAE;QAC5B,EAAE,EAAE,sEAAsE;QAC1E,WAAW,EAAE,uDAAuD;QACpE,cAAc,EAAE,iDAAiD;KAClE;IACD,iCAAiC,EAAE;QACjC,EAAE,EAAE,2EAA2E;QAC/E,WAAW,EAAE,8DAA8D;QAC3E,cAAc,EAAE,oCAAoC;KACrD;IACD,oCAAoC,EAAE;QACpC,EAAE,EAAE,8EAA8E;QAClF,WAAW,EAAE,iEAAiE;QAC9E,cAAc,EAAE,uCAAuC;KACxD;IACD,2BAA2B,EAAE;QAC3B,EAAE,EAAE,qEAAqE;QACzE,WAAW,EAAE,uDAAuD;QACpE,cAAc,EAAE,iDAAiD;KAClE;IACD,0BAA0B,EAAE;QAC1B,EAAE,EAAE,oEAAoE;QACxE,WAAW,EAAE,mDAAmD;QAChE,cAAc,EAAE,8CAA8C;KAC/D;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,mEAAmE;QACvE,WAAW,EAAE,mDAAmD;QAChE,cAAc,EAAE,wDAAwD;KACzE;IACD,uBAAuB,EAAE;QACvB,EAAE,EAAE,iEAAiE;QACrE,WAAW,EAAE,oBAAoB;QACjC,cAAc,EAAE,oBAAoB;KACrC;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,4DAA4D;QAChE,WAAW,EAAE,wDAAwD;QACrE,cAAc,EAAE,4DAA4D;KAC7E;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,2DAA2D;QAC/D,WAAW,EAAE,wDAAwD;QACrE,cAAc,EAAE,qJAAqJ;KACtK;IACD,mBAAmB,EAAE;QACnB,EAAE,EAAE,6DAA6D;QACjE,WAAW,EAAE,uBAAuB;QACpC,cAAc,EAAE,uBAAuB;KACxC;IACD,mBAAmB,EAAE;QACnB,EAAE,EAAE,6DAA6D;QACjE,WAAW,EAAE,yDAAyD;QACtE,cAAc,EAAE,kCAAkC;KACnD;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,4DAA4D;QAChE,WAAW,EAAE,yDAAyD;QACtE,cAAc,EAAE,kEAAkE;KACnF;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\n// TODO: Update the messages as per new designs once we have the designs ready for subscription types other than 'trial'.\nconst messages = defineMessages({\n activeSubscriptionTitle: {\n id: 'learner-dash.subscriptionBanner.banners.activeSubscriptionTitle',\n description: 'Message to learners with an active subscription',\n defaultMessage: 'Congrats! Your edX Plus trial is active.',\n },\n activeSubscriptionBody: {\n id: 'learner-dash.subscriptionBanner.banners.activeSubscriptionBody',\n description: 'Message to learners with an active subscription',\n defaultMessage: 'Your subscription will renew on {subscriptionRenewalDate}.',\n },\n activeTrialSubscriptionTitle: {\n id: 'learner-dash.subscriptionBanner.banners.activeTrialSubscriptionTitle',\n description: 'Message to learners with an active trial subscription',\n defaultMessage: 'Your edX Plus trial expires in {daysLeft} days.',\n },\n activeTrialSubscriptionTitleToday: {\n id: 'learner-dash.subscriptionBanner.banners.activeTrialSubscriptionTitleToday',\n description: 'Message to learners with a trial subscription expiring today',\n defaultMessage: 'Your edX Plus trial expires today.',\n },\n activeTrialSubscriptionTitleTomorrow: {\n id: 'learner-dash.subscriptionBanner.banners.activeTrialSubscriptionTitleTomorrow',\n description: 'Message to learners with a trial subscription expiring tomorrow',\n defaultMessage: 'Your edX Plus trial expires tomorrow.',\n },\n activeTrialSubscriptionBody: {\n id: 'learner-dash.subscriptionBanner.banners.activeTrialSubscriptionBody',\n description: 'Message to learners with an active trial subscription',\n defaultMessage: 'Your subscription will renew on {trialEndDate}.',\n },\n cancelledSubscriptionTitle: {\n id: 'learner-dash.subscriptionBanner.banners.cancelledSubscriptionTitle',\n description: 'Message to learners with a cancelled subscription',\n defaultMessage: 'Your subscription expires in {daysLeft} days',\n },\n cancelledSubscriptionBody: {\n id: 'learner-dash.subscriptionBanner.banners.cancelledSubscriptionBody',\n description: 'Message to learners with a cancelled subscription',\n defaultMessage: 'Your subscription will expire on {subscriptionEndDate}',\n },\n renewSubscriptionButton: {\n id: 'learner-dash.subscriptionBanner.banners.renewSubscriptionButton',\n description: 'Renew Subscription',\n defaultMessage: 'Renew Subscription',\n },\n renewalFailedTitle: {\n id: 'learner-dash.subscriptionBanner.banners.renewalFailedTitle',\n description: 'Message to learners with a failed renewal subscription',\n defaultMessage: 'Update your payment card to keep your subscription active.',\n },\n renewalFailedBody: {\n id: 'learner-dash.subscriptionBanner.banners.renewalFailedBody',\n description: 'Message to learners with a failed renewal subscription',\n defaultMessage: 'We were unable to process your subscription payment. Update your card on file by {subscriptionRenewalDate} or your subscription access will expire.',\n },\n renewalFailedButton: {\n id: 'learner-dash.subscriptionBanner.banners.renewalFailedButton',\n description: 'Update payment method',\n defaultMessage: 'Update payment method',\n },\n renewalPendingTitle: {\n id: 'learner-dash.subscriptionBanner.banners.renewalPendingTitle',\n description: 'Message to learners with a pending renewal subscription',\n defaultMessage: 'Your subscription is now active.',\n },\n renewalPendingBody: {\n id: 'learner-dash.subscriptionBanner.banners.renewalPendingBody',\n description: 'Message to learners with a pending renewal subscription',\n defaultMessage: 'Your subscription will renew again on {subscriptionRenewalDate}.',\n },\n});\n\nexport default messages;\n"]}
|
|
@@ -18,7 +18,7 @@ export const SubscriptionInformation = () => {
|
|
|
18
18
|
const [infoTitle, setInfoTitle] = useState('');
|
|
19
19
|
const status = (_a = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _a === void 0 ? void 0 : _a.status;
|
|
20
20
|
useEffect(() => {
|
|
21
|
-
var _a, _b, _c, _d, _e;
|
|
21
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
22
22
|
if (!status) {
|
|
23
23
|
setInfoTitle('');
|
|
24
24
|
setInfoBody('');
|
|
@@ -36,25 +36,34 @@ export const SubscriptionInformation = () => {
|
|
|
36
36
|
subscriptionRenewalDate: formatDate((_b = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _b === void 0 ? void 0 : _b.currentPeriodEnd),
|
|
37
37
|
}));
|
|
38
38
|
break;
|
|
39
|
-
case '
|
|
39
|
+
case 'CANCEL_PENDING':
|
|
40
40
|
setInfoTitle(formatMessage(messages.cancelledSubscriptionTitle, {
|
|
41
|
-
subscriptionStatus: status.charAt(0).toUpperCase() +
|
|
41
|
+
subscriptionStatus: status.split('_').map(part => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()).join(' '),
|
|
42
42
|
planName: (_c = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _c === void 0 ? void 0 : _c.planName,
|
|
43
43
|
}));
|
|
44
44
|
setInfoBody(formatMessage(messages.cancelledSubscriptionBody, {
|
|
45
45
|
subscriptionEndDate: formatDate((_d = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _d === void 0 ? void 0 : _d.subscriptionEndDate),
|
|
46
46
|
}));
|
|
47
47
|
break;
|
|
48
|
+
case 'CANCELLED':
|
|
49
|
+
setInfoTitle(formatMessage(messages.cancelledSubscriptionTitle, {
|
|
50
|
+
subscriptionStatus: status.charAt(0).toUpperCase() + status.slice(1).toLowerCase(),
|
|
51
|
+
planName: (_e = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _e === void 0 ? void 0 : _e.planName,
|
|
52
|
+
}));
|
|
53
|
+
setInfoBody(formatMessage(messages.cancelledSubscriptionBody, {
|
|
54
|
+
subscriptionEndDate: formatDate((_f = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _f === void 0 ? void 0 : _f.subscriptionEndDate),
|
|
55
|
+
}));
|
|
56
|
+
break;
|
|
48
57
|
case 'RENEWAL_FAILED': // also known as 'Payment Error' in figma designs
|
|
49
58
|
setInfoTitle(formatMessage(messages.renewalFailedTitle));
|
|
50
59
|
setInfoBody(formatMessage(messages.renewalFailedBody, {
|
|
51
|
-
subscriptionRenewalDate: formatDate((
|
|
60
|
+
subscriptionRenewalDate: formatDate((_g = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _g === void 0 ? void 0 : _g.currentPeriodEnd),
|
|
52
61
|
}));
|
|
53
62
|
break;
|
|
54
63
|
}
|
|
55
64
|
}, [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]);
|
|
56
65
|
const getSubscriptionAction = useMemo(() => {
|
|
57
|
-
if (status === 'CANCELLED') {
|
|
66
|
+
if (status === 'CANCELLED' || status === 'CANCEL_PENDING') {
|
|
58
67
|
return ([
|
|
59
68
|
_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"),
|
|
60
69
|
]);
|
|
@@ -70,6 +79,7 @@ export const SubscriptionInformation = () => {
|
|
|
70
79
|
CANCELLED: Cancel,
|
|
71
80
|
RENEWAL_FAILED: WarningFilled,
|
|
72
81
|
RENEWAL_PENDING: Cached,
|
|
82
|
+
CANCEL_PENDING: Cancel,
|
|
73
83
|
};
|
|
74
84
|
const bannerIcon = (_e = subscriptionStatusIcons[status]) !== null && _e !== void 0 ? _e : undefined;
|
|
75
85
|
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 })] })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SubscriptionInformation.js","sourceRoot":"","sources":["../../../../src/containers/SubscriptionInformation/components/SubscriptionInformation.tsx"],"names":[],"mappings":"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
|
|
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 'CANCEL_PENDING':\n setInfoTitle(formatMessage(messages.cancelledSubscriptionTitle, {\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.cancelledSubscriptionBody, {\n subscriptionEndDate: formatDate(subsData?.userSubscription?.subscriptionEndDate),\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' || status === 'CANCEL_PENDING') {\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 CANCEL_PENDING: Cancel,\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"]}
|
|
@@ -2,7 +2,7 @@ export const locationId: string;
|
|
|
2
2
|
export const SortKeys: any;
|
|
3
3
|
export const FilterKeys: any;
|
|
4
4
|
export const ListPageSize: 6;
|
|
5
|
-
export const subscriptionRenewalURL: "
|
|
5
|
+
export const subscriptionRenewalURL: "/manage-subscription";
|
|
6
6
|
export const exploreProgramsUrl: "/explore-programs";
|
|
7
7
|
export const manageSubscriptionURL: "/manage-subscription";
|
|
8
8
|
export const checkoutPageURL: "/checkout-page";
|
|
@@ -13,7 +13,7 @@ export const FilterKeys = StrictDict({
|
|
|
13
13
|
});
|
|
14
14
|
export const ListPageSize = 6;
|
|
15
15
|
// TODO : Below URL is temporary and will be removed once the subscription renewal flow is implemented in the app.
|
|
16
|
-
export const subscriptionRenewalURL = '
|
|
16
|
+
export const subscriptionRenewalURL = '/manage-subscription';
|
|
17
17
|
export const exploreProgramsUrl = '/explore-programs';
|
|
18
18
|
export const manageSubscriptionURL = '/manage-subscription';
|
|
19
19
|
export const checkoutPageURL = '/checkout-page';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"app.js","sourceRoot":"","sources":["../../../src/data/constants/app.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AAE5D,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC;IACjC,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC;IACnC,UAAU,EAAE,YAAY;IACxB,UAAU,EAAE,YAAY;IACxB,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,aAAa;IAC1B,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,CAAC;AAC9B,kHAAkH;AAClH,MAAM,CAAC,MAAM,sBAAsB,GAAG,
|
|
1
|
+
{"version":3,"file":"app.js","sourceRoot":"","sources":["../../../src/data/constants/app.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AAE5D,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC;IACjC,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,OAAO;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC;IACnC,UAAU,EAAE,YAAY;IACxB,UAAU,EAAE,YAAY;IACxB,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,aAAa;IAC1B,QAAQ,EAAE,UAAU;CACrB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,CAAC;AAC9B,kHAAkH;AAClH,MAAM,CAAC,MAAM,sBAAsB,GAAG,sBAAsB,CAAC;AAC7D,MAAM,CAAC,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AACtD,MAAM,CAAC,MAAM,qBAAqB,GAAG,sBAAsB,CAAC;AAC5D,MAAM,CAAC,MAAM,eAAe,GAAG,gBAAgB,CAAC","sourcesContent":["import { StrictDict } from '../../utils';\nexport const locationId = window.location.pathname.slice(1);\n\nexport const SortKeys = StrictDict({\n enrolled: 'enrolled',\n title: 'title',\n});\n\nexport const FilterKeys = StrictDict({\n inProgress: 'inProgress',\n notStarted: 'notStarted',\n done: 'done',\n notEnrolled: 'notEnrolled',\n upgraded: 'upgraded',\n});\n\nexport const ListPageSize = 6;\n// TODO : Below URL is temporary and will be removed once the subscription renewal flow is implemented in the app.\nexport const subscriptionRenewalURL = '/manage-subscription';\nexport const exploreProgramsUrl = '/explore-programs';\nexport const manageSubscriptionURL = '/manage-subscription';\nexport const checkoutPageURL = '/checkout-page';\n"]}
|