@edx/frontend-app-subscription-learner-dashboard 1.38.5 → 1.40.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/SubscriptionBanner/components/SubscriptionBanner.js +2 -2
- package/dist/containers/SubscriptionBanner/components/SubscriptionBanner.js.map +1 -1
- package/dist/containers/SubscriptionBanner/messages.js +1 -1
- package/dist/containers/SubscriptionBanner/messages.js.map +1 -1
- package/dist/containers/SubscriptionInformation/components/SubscriptionInformation.js +5 -5
- package/dist/containers/SubscriptionInformation/components/SubscriptionInformation.js.map +1 -1
- package/dist/containers/SubscriptionInformation/messages.js +1 -1
- package/dist/containers/SubscriptionInformation/messages.js.map +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/data/types.d.ts +6 -0
- package/dist/widgets/ProgressiveProfilingQuiz/data/types.js.map +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/index.js +30 -4
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/index.js.map +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/messages.d.ts +10 -0
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/messages.js +10 -0
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/messages.js.map +1 -1
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/schema.d.ts +13 -0
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/schema.js +30 -0
- package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/schema.js.map +1 -0
- package/package.json +1 -1
|
@@ -70,14 +70,14 @@ export const SubscriptionBanner = ({ learnerSubscriptionData }) => {
|
|
|
70
70
|
daysLeft: daysLeftAfterCancellation,
|
|
71
71
|
}));
|
|
72
72
|
setBannerBody(formatMessage(messages.cancelledSubscriptionBody, {
|
|
73
|
-
|
|
73
|
+
subscriptionRenewalEndDate: formatDate(currentPeriodEnd),
|
|
74
74
|
}));
|
|
75
75
|
break;
|
|
76
76
|
case 'CANCELLED':
|
|
77
77
|
setBannerVariant('light');
|
|
78
78
|
setBannerTitle(formatMessage(messages.cancelledSubscriptionTitle));
|
|
79
79
|
setBannerBody(formatMessage(messages.cancelledSubscriptionBody, {
|
|
80
|
-
|
|
80
|
+
subscriptionRenewalEndDate: formatDate(currentPeriodEnd),
|
|
81
81
|
}));
|
|
82
82
|
break;
|
|
83
83
|
case 'RENEWAL_FAILED':
|
|
@@ -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';\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={manageSubscriptionURL}\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 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 { manageSubscriptionURL } 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 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 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 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"]}
|
|
@@ -39,7 +39,7 @@ const messages = defineMessages({
|
|
|
39
39
|
cancelledSubscriptionBody: {
|
|
40
40
|
id: 'learner-dash.subscriptionBanner.banners.cancelledSubscriptionBody',
|
|
41
41
|
description: 'Message to learners with a cancelled subscription',
|
|
42
|
-
defaultMessage: 'Your subscription will
|
|
42
|
+
defaultMessage: 'Your subscription will end on {subscriptionRenewalEndDate}',
|
|
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,8CAA8C;KAC/D;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,mEAAmE;QACvE,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,4DAA4D;KAC7E;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 end on {subscriptionRenewalEndDate}',\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"]}
|
|
@@ -10,7 +10,7 @@ import '../index.scss';
|
|
|
10
10
|
import { Cached, WarningFilled, Cancel } from '@openedx/paragon/icons';
|
|
11
11
|
import { subscriptionRenewalURL } from '../../../data/constants/app';
|
|
12
12
|
export const SubscriptionInformation = () => {
|
|
13
|
-
var _a, _b, _c, _d
|
|
13
|
+
var _a, _b, _c, _d;
|
|
14
14
|
const { data: subsData } = useInitializeSubsDashboard();
|
|
15
15
|
const { formatMessage } = useIntl();
|
|
16
16
|
const formatDate = utilHooks.useFormatDate();
|
|
@@ -42,7 +42,7 @@ export const SubscriptionInformation = () => {
|
|
|
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
|
+
subscriptionRenewalEndDate: formatDate((_d = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _d === void 0 ? void 0 : _d.currentPeriodEnd),
|
|
46
46
|
}));
|
|
47
47
|
break;
|
|
48
48
|
case 'CANCELLED':
|
|
@@ -51,7 +51,7 @@ export const SubscriptionInformation = () => {
|
|
|
51
51
|
planName: (_e = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _e === void 0 ? void 0 : _e.planName,
|
|
52
52
|
}));
|
|
53
53
|
setInfoBody(formatMessage(messages.cancelledSubscriptionBody, {
|
|
54
|
-
|
|
54
|
+
subscriptionRenewalEndDate: formatDate((_f = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _f === void 0 ? void 0 : _f.currentPeriodEnd),
|
|
55
55
|
}));
|
|
56
56
|
break;
|
|
57
57
|
case 'RENEWAL_FAILED': // also known as 'Payment Error' in figma designs
|
|
@@ -61,7 +61,7 @@ export const SubscriptionInformation = () => {
|
|
|
61
61
|
}));
|
|
62
62
|
break;
|
|
63
63
|
}
|
|
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
|
|
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]);
|
|
65
65
|
const getSubscriptionAction = useMemo(() => {
|
|
66
66
|
if (status === 'CANCELLED' || status === 'CANCEL_PENDING') {
|
|
67
67
|
return ([
|
|
@@ -81,7 +81,7 @@ export const SubscriptionInformation = () => {
|
|
|
81
81
|
RENEWAL_PENDING: Cached,
|
|
82
82
|
CANCEL_PENDING: Cancel,
|
|
83
83
|
};
|
|
84
|
-
const bannerIcon = (
|
|
84
|
+
const bannerIcon = (_d = subscriptionStatusIcons[status]) !== null && _d !== void 0 ? _d : undefined;
|
|
85
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 })] })] }));
|
|
86
86
|
};
|
|
87
87
|
//# sourceMappingURL=SubscriptionInformation.js.map
|
|
@@ -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 subscriptionRenewalEndDate: 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 subscriptionRenewalEndDate: formatDate(subsData?.userSubscription?.currentPeriodEnd),\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]);\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"]}
|
|
@@ -53,7 +53,7 @@ const messages = defineMessages({
|
|
|
53
53
|
cancelledSubscriptionBody: {
|
|
54
54
|
id: 'learner-dash.subscriptionInformation.information.cancelledSubscriptionBody',
|
|
55
55
|
description: 'Message to learners when subscription is cancelled',
|
|
56
|
-
defaultMessage: 'You have no upcoming payments.
|
|
56
|
+
defaultMessage: 'You have no upcoming payments. Your subscription will end on {subscriptionRenewalEndDate}.',
|
|
57
57
|
},
|
|
58
58
|
renewSubscriptionButton: {
|
|
59
59
|
id: 'learner-dash.subscriptionInformation.information.renewSubscriptionButton',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/SubscriptionInformation/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,aAAa,EAAE;QACb,EAAE,EAAE,qEAAqE;QACzE,WAAW,EAAE,gBAAgB;QAC7B,cAAc,EAAE,qBAAqB;KACtC;IACD,gBAAgB,EAAE;QAChB,EAAE,EAAE,oEAAoE;QACxE,WAAW,EAAE,6CAA6C;QAC1D,cAAc,EAAE,8DAA8D;KAC/E;IACD,wBAAwB,EAAE;QACxB,EAAE,EAAE,wEAAwE;QAC5E,WAAW,EAAE,6CAA6C;QAC1D,cAAc,EAAE,iGAAiG;KAClH;IACD,cAAc,EAAE;QACd,EAAE,EAAE,uEAAuE;QAC3E,WAAW,EAAE,uBAAuB;QACpC,cAAc,EAAE,iDAAiD;KAClE;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,qEAAqE;QACzE,WAAW,EAAE,qBAAqB;QAClC,cAAc,EAAE,wBAAwB;KACzC;IACD,qBAAqB,EAAE;QACrB,EAAE,EAAE,wEAAwE;QAC5E,WAAW,EAAE,yBAAyB;QACtC,cAAc,EAAE,iBAAiB;KAClC;IACD,uBAAuB,EAAE;QACvB,EAAE,EAAE,0EAA0E;QAC9E,WAAW,EAAE,uDAAuD;QACpE,cAAc,EAAE,kCAAkC;KACnD;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,qEAAqE;QACzE,WAAW,EAAE,8CAA8C;QAC3D,cAAc,EAAE,yBAAyB;KAC1C;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,oEAAoE;QACxE,WAAW,EAAE,6CAA6C;QAC1D,cAAc,EAAE,2FAA2F;KAC5G;IACD,0BAA0B,EAAE;QAC1B,EAAE,EAAE,6EAA6E;QACjF,WAAW,EAAE,oDAAoD;QACjE,cAAc,EAAE,kCAAkC;KACnD;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,4EAA4E;QAChF,WAAW,EAAE,oDAAoD;QACjE,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../src/containers/SubscriptionInformation/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,aAAa,EAAE;QACb,EAAE,EAAE,qEAAqE;QACzE,WAAW,EAAE,gBAAgB;QAC7B,cAAc,EAAE,qBAAqB;KACtC;IACD,gBAAgB,EAAE;QAChB,EAAE,EAAE,oEAAoE;QACxE,WAAW,EAAE,6CAA6C;QAC1D,cAAc,EAAE,8DAA8D;KAC/E;IACD,wBAAwB,EAAE;QACxB,EAAE,EAAE,wEAAwE;QAC5E,WAAW,EAAE,6CAA6C;QAC1D,cAAc,EAAE,iGAAiG;KAClH;IACD,cAAc,EAAE;QACd,EAAE,EAAE,uEAAuE;QAC3E,WAAW,EAAE,uBAAuB;QACpC,cAAc,EAAE,iDAAiD;KAClE;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,qEAAqE;QACzE,WAAW,EAAE,qBAAqB;QAClC,cAAc,EAAE,wBAAwB;KACzC;IACD,qBAAqB,EAAE;QACrB,EAAE,EAAE,wEAAwE;QAC5E,WAAW,EAAE,yBAAyB;QACtC,cAAc,EAAE,iBAAiB;KAClC;IACD,uBAAuB,EAAE;QACvB,EAAE,EAAE,0EAA0E;QAC9E,WAAW,EAAE,uDAAuD;QACpE,cAAc,EAAE,kCAAkC;KACnD;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,qEAAqE;QACzE,WAAW,EAAE,8CAA8C;QAC3D,cAAc,EAAE,yBAAyB;KAC1C;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,oEAAoE;QACxE,WAAW,EAAE,6CAA6C;QAC1D,cAAc,EAAE,2FAA2F;KAC5G;IACD,0BAA0B,EAAE;QAC1B,EAAE,EAAE,6EAA6E;QACjF,WAAW,EAAE,oDAAoD;QACjE,cAAc,EAAE,kCAAkC;KACnD;IACD,yBAAyB,EAAE;QACzB,EAAE,EAAE,4EAA4E;QAChF,WAAW,EAAE,oDAAoD;QACjE,cAAc,EAAE,4FAA4F;KAC7G;IACD,uBAAuB,EAAE;QACvB,EAAE,EAAE,0EAA0E;QAC9E,WAAW,EAAE,oBAAoB;QACjC,cAAc,EAAE,oBAAoB;KACrC;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n statusMessage: {\n id: 'learner-dash.subscriptionInformation.information.subscriptionStatus',\n description: 'Status Message',\n defaultMessage: 'Subscription Status',\n },\n cancelledMessage: {\n id: 'learner-dash.subscriptionInformation.information.courseInformation',\n description: 'Information of courses enrolled and savings',\n defaultMessage: `You have saved {totalSavings} with your subscription so far!`,\n },\n coursesEnrollmentMessage: {\n id: 'learner-dash.subscriptionInformation.information.enrollmentInformation',\n description: 'Information of courses enrolled and savings',\n defaultMessage: `As a subscriber, you've enrolled in {numberOfCoursesEnrolled} courses and saved {totalSavings}.`,\n },\n renewalMessage: {\n id: 'learner-dash.subscriptionInformation.information.subscriptionSchedule',\n description: 'Subscription Schedule',\n defaultMessage: 'Your next payment is {subscriptionRenewalDate}.',\n },\n manageSubscriptionMessage: {\n id: 'learner-dash.subscriptionInformation.information.manageSubscription',\n description: 'Manage Subscription',\n defaultMessage: 'Manage my subscription',\n },\n mySubscriptionHeading: {\n id: 'learner-dash.subscriptionInformation.information.mySubscriptionHeading',\n description: 'My Subscription Heading',\n defaultMessage: 'My subscription',\n },\n activeSubscriptionTitle: {\n id: 'learner-dash.subscriptionInformation.information.activeSubscriptionTitle',\n description: 'Message title to learners with an active subscription',\n defaultMessage: '{subscriptionStatus}, {planName}',\n },\n renewalFailedTitle: {\n id: 'learner-dash.subscriptionInformation.information.renewalFailedTitle',\n description: 'Message title to learners when renewal fails',\n defaultMessage: 'Subscription may expire',\n },\n renewalFailedBody: {\n id: 'learner-dash.subscriptionInformation.information.renewalFailedBody',\n description: 'Message body to learners when renewal fails',\n defaultMessage: 'Update your payment method by {subscriptionRenewalDate} to keep your subscription active.',\n },\n cancelledSubscriptionTitle: {\n id: 'learner-dash.subscriptionInformation.information.cancelledSubscriptionTitle',\n description: 'Message to learners when subscription is cancelled',\n defaultMessage: '{subscriptionStatus}, {planName}',\n },\n cancelledSubscriptionBody: {\n id: 'learner-dash.subscriptionInformation.information.cancelledSubscriptionBody',\n description: 'Message to learners when subscription is cancelled',\n defaultMessage: 'You have no upcoming payments. Your subscription will end on {subscriptionRenewalEndDate}.',\n },\n renewSubscriptionButton: {\n id: 'learner-dash.subscriptionInformation.information.renewSubscriptionButton',\n description: 'Renew Subscription',\n defaultMessage: 'Renew Subscription',\n },\n});\n\nexport default messages;\n"]}
|
|
@@ -3,6 +3,12 @@ export interface SkillWithCount {
|
|
|
3
3
|
value: string;
|
|
4
4
|
count: number;
|
|
5
5
|
}
|
|
6
|
+
/** The value shape Paragon's `Form.Autosuggest` reads from and calls `onChange` with. */
|
|
7
|
+
export interface AutosuggestValue {
|
|
8
|
+
userProvidedText: string;
|
|
9
|
+
selectionValue: string;
|
|
10
|
+
selectionId: string;
|
|
11
|
+
}
|
|
6
12
|
/** Structurally compatible with react-intl's MessageDescriptor, without depending on the package directly. */
|
|
7
13
|
export interface QuizMessageDescriptor {
|
|
8
14
|
id: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/widgets/ProgressiveProfilingQuiz/data/types.ts"],"names":[],"mappings":"","sourcesContent":["/** A single Algolia facet value with its matching record count, e.g. from fetchSkills. */\nexport interface SkillWithCount {\n value: string,\n count: number,\n}\n\n/** Structurally compatible with react-intl's MessageDescriptor, without depending on the package directly. */\nexport interface QuizMessageDescriptor {\n id: string,\n defaultMessage: string,\n description?: string,\n}\n\n/** A selectable option for a quiz question, as defined in source (unresolved) form. */\nexport interface QuizAnswerOption {\n value: string,\n message: QuizMessageDescriptor,\n}\n\n/**\n * The definition of a quiz question: its identity, the question text, and every option offered.\n * This is the single source of truth used both to render a step's UI and to record what was\n * actually shown to the user when they answered it.\n */\nexport interface QuizQuestionSchema {\n questionId: string,\n /** Bump whenever the question or its options change meaningfully, so recorded answers can be grouped by what was actually asked. */\n version: string,\n question: QuizMessageDescriptor,\n options: QuizAnswerOption[],\n}\n\n/** A resolved (formatted) option, as actually presented to the user. */\nexport interface QuizAnswerOptionRecord {\n value: string,\n label: string,\n}\n\n/**\n * A snapshot of a question, its options, and the user's selection(s), as it existed at answer\n * time. Always an array so single-select (radio) and multi-select (checkbox) questions share one\n * shape — a single-select answer is simply a one-element array.\n */\nexport interface QuizAnswerRecord {\n questionId: string,\n version: string,\n question: string,\n options: QuizAnswerOptionRecord[],\n selectedValues: string[],\n}\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/widgets/ProgressiveProfilingQuiz/data/types.ts"],"names":[],"mappings":"","sourcesContent":["/** A single Algolia facet value with its matching record count, e.g. from fetchSkills. */\nexport interface SkillWithCount {\n value: string,\n count: number,\n}\n\n/** The value shape Paragon's `Form.Autosuggest` reads from and calls `onChange` with. */\nexport interface AutosuggestValue {\n userProvidedText: string,\n selectionValue: string,\n selectionId: string,\n}\n\n/** Structurally compatible with react-intl's MessageDescriptor, without depending on the package directly. */\nexport interface QuizMessageDescriptor {\n id: string,\n defaultMessage: string,\n description?: string,\n}\n\n/** A selectable option for a quiz question, as defined in source (unresolved) form. */\nexport interface QuizAnswerOption {\n value: string,\n message: QuizMessageDescriptor,\n}\n\n/**\n * The definition of a quiz question: its identity, the question text, and every option offered.\n * This is the single source of truth used both to render a step's UI and to record what was\n * actually shown to the user when they answered it.\n */\nexport interface QuizQuestionSchema {\n questionId: string,\n /** Bump whenever the question or its options change meaningfully, so recorded answers can be grouped by what was actually asked. */\n version: string,\n question: QuizMessageDescriptor,\n options: QuizAnswerOption[],\n}\n\n/** A resolved (formatted) option, as actually presented to the user. */\nexport interface QuizAnswerOptionRecord {\n value: string,\n label: string,\n}\n\n/**\n * A snapshot of a question, its options, and the user's selection(s), as it existed at answer\n * time. Always an array so single-select (radio) and multi-select (checkbox) questions share one\n * shape — a single-select answer is simply a one-element array.\n */\nexport interface QuizAnswerRecord {\n questionId: string,\n version: string,\n question: string,\n options: QuizAnswerOptionRecord[],\n selectedValues: string[],\n}\n"]}
|
|
@@ -1,15 +1,41 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { useState } from 'react';
|
|
3
|
+
import { Stepper, Button, Form } from '@openedx/paragon';
|
|
3
4
|
import { useIntl } from '@openedx/frontend-base';
|
|
4
|
-
import BaseStep from '../BaseStep';
|
|
5
5
|
import { useProgressiveProfilingQuiz } from '../../../../../../widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';
|
|
6
6
|
import { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/constants';
|
|
7
|
+
import { buildAnswerRecord } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/schemaUtils';
|
|
8
|
+
import jobsList from '../../../../../../widgets/ProgressiveProfilingQuiz/data/jobsList';
|
|
9
|
+
import BaseStep from '../BaseStep';
|
|
7
10
|
import stepMessages from '../messages';
|
|
8
11
|
import messages from './messages';
|
|
12
|
+
import schema, { NOT_EMPLOYED_VALUE } from './schema';
|
|
13
|
+
const EMPTY_AUTOSUGGEST_VALUE = {
|
|
14
|
+
userProvidedText: '',
|
|
15
|
+
selectionValue: '',
|
|
16
|
+
selectionId: '',
|
|
17
|
+
};
|
|
9
18
|
const WorkStatusStep = () => {
|
|
10
|
-
|
|
19
|
+
var _a, _b;
|
|
20
|
+
const { goToPreviousStep, answers, recordAnswer, } = useProgressiveProfilingQuiz();
|
|
11
21
|
const { formatMessage } = useIntl();
|
|
12
|
-
|
|
22
|
+
const [inputValue, setInputValue] = useState(EMPTY_AUTOSUGGEST_VALUE);
|
|
23
|
+
const selectedValue = (_b = (_a = answers[schema.questionId]) === null || _a === void 0 ? void 0 : _a.selectedValues[0]) !== null && _b !== void 0 ? _b : '';
|
|
24
|
+
const isNotEmployed = selectedValue === NOT_EMPLOYED_VALUE;
|
|
25
|
+
const handleJobSelect = (value) => {
|
|
26
|
+
setInputValue(value);
|
|
27
|
+
if (value.selectionValue) {
|
|
28
|
+
recordAnswer(buildAnswerRecord(schema, [value.selectionValue], formatMessage));
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
const handleNotEmployedToggle = (event) => {
|
|
32
|
+
const { checked } = event.target;
|
|
33
|
+
if (checked) {
|
|
34
|
+
setInputValue(EMPTY_AUTOSUGGEST_VALUE);
|
|
35
|
+
}
|
|
36
|
+
recordAnswer(buildAnswerRecord(schema, checked ? [NOT_EMPLOYED_VALUE] : [], formatMessage));
|
|
37
|
+
};
|
|
38
|
+
return (_jsxs(_Fragment, { children: [_jsxs(BaseStep, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.WORK_STATUS, title: formatMessage(messages.title), index: 3, children: [_jsx("h4", { children: formatMessage(messages.question) }), _jsx("p", { children: formatMessage(messages.subtitle) }), _jsx(Form.Autosuggest, { name: "work-status-autosuggest", value: inputValue, onChange: handleJobSelect, className: "h-50", children: jobsList === null || jobsList === void 0 ? void 0 : jobsList.map(job => (_jsx(Form.AutosuggestOption, { id: job.jobTitle.replaceAll(' ', '-').toLowerCase(), children: job.jobTitle }, job.jobTitle))) }), _jsx(Form.Checkbox, { className: "mt-6", checked: isNotEmployed, onChange: handleNotEmployedToggle, children: formatMessage(messages.notEmployedOption) })] }), _jsxs(Stepper.ActionRow, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.WORK_STATUS, children: [_jsx(Button, { variant: "outline-primary", onClick: goToPreviousStep, children: formatMessage(stepMessages.backButton) }), _jsx(Button, { children: formatMessage(messages.viewResultsButton) })] })] }));
|
|
13
39
|
};
|
|
14
40
|
export default WorkStatusStep;
|
|
15
41
|
//# sourceMappingURL=index.js.map
|
package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/index.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { Stepper, Button, Form } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport { useProgressiveProfilingQuiz } from '@src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport { AutosuggestValue } from '@src/widgets/ProgressiveProfilingQuiz/data';\nimport { buildAnswerRecord } from '@src/widgets/ProgressiveProfilingQuiz/data/schemaUtils';\nimport jobsList from '@src/widgets/ProgressiveProfilingQuiz/data/jobsList';\nimport BaseStep from '../BaseStep';\nimport stepMessages from '../messages';\nimport messages from './messages';\nimport schema, { NOT_EMPLOYED_VALUE } from './schema';\n\nconst EMPTY_AUTOSUGGEST_VALUE: AutosuggestValue = {\n userProvidedText: '',\n selectionValue: '',\n selectionId: '',\n};\n\nconst WorkStatusStep: React.FC = () => {\n const {\n goToPreviousStep, answers, recordAnswer,\n } = useProgressiveProfilingQuiz();\n const { formatMessage } = useIntl();\n\n const [inputValue, setInputValue] = useState<AutosuggestValue>(EMPTY_AUTOSUGGEST_VALUE);\n\n const selectedValue = answers[schema.questionId]?.selectedValues[0] ?? '';\n const isNotEmployed = selectedValue === NOT_EMPLOYED_VALUE;\n\n const handleJobSelect = (value: AutosuggestValue) => {\n setInputValue(value);\n\n if (value.selectionValue) {\n recordAnswer(buildAnswerRecord(schema, [value.selectionValue], formatMessage));\n }\n };\n\n const handleNotEmployedToggle = (event: React.ChangeEvent<HTMLInputElement>) => {\n const { checked } = event.target;\n\n if (checked) {\n setInputValue(EMPTY_AUTOSUGGEST_VALUE);\n }\n recordAnswer(buildAnswerRecord(schema, checked ? [NOT_EMPLOYED_VALUE] : [], formatMessage));\n };\n\n return (\n <>\n <BaseStep\n eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.WORK_STATUS}\n title={formatMessage(messages.title)}\n index={3}\n >\n <h4>\n {formatMessage(messages.question)}\n </h4>\n <p>\n {formatMessage(messages.subtitle)}\n </p>\n <Form.Autosuggest\n name=\"work-status-autosuggest\"\n value={inputValue}\n onChange={handleJobSelect}\n className=\"h-50\"\n >\n {jobsList?.map(job => (\n <Form.AutosuggestOption\n key={job.jobTitle}\n id={job.jobTitle.replaceAll(' ', '-').toLowerCase()}\n >\n {job.jobTitle}\n </Form.AutosuggestOption>\n ))}\n </Form.Autosuggest>\n <Form.Checkbox\n className=\"mt-6\"\n checked={isNotEmployed}\n onChange={handleNotEmployedToggle}\n >\n {formatMessage(messages.notEmployedOption)}\n </Form.Checkbox>\n </BaseStep>\n <Stepper.ActionRow eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.WORK_STATUS}>\n <Button variant=\"outline-primary\" onClick={goToPreviousStep}>\n {formatMessage(stepMessages.backButton)}\n </Button>\n <Button>\n {formatMessage(messages.viewResultsButton)}\n </Button>\n </Stepper.ActionRow>\n </>\n );\n};\n\nexport default WorkStatusStep;\n"]}
|
package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/messages.d.ts
CHANGED
|
@@ -9,6 +9,16 @@ declare const messages: {
|
|
|
9
9
|
defaultMessage: string;
|
|
10
10
|
description: string;
|
|
11
11
|
};
|
|
12
|
+
subtitle: {
|
|
13
|
+
id: string;
|
|
14
|
+
defaultMessage: string;
|
|
15
|
+
description: string;
|
|
16
|
+
};
|
|
17
|
+
notEmployedOption: {
|
|
18
|
+
id: string;
|
|
19
|
+
defaultMessage: string;
|
|
20
|
+
description: string;
|
|
21
|
+
};
|
|
12
22
|
viewResultsButton: {
|
|
13
23
|
id: string;
|
|
14
24
|
defaultMessage: string;
|
package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/messages.js
CHANGED
|
@@ -10,6 +10,16 @@ const messages = defineMessages({
|
|
|
10
10
|
defaultMessage: 'What is your current role?',
|
|
11
11
|
description: 'Question asked in the work status step of the progressive profiling quiz',
|
|
12
12
|
},
|
|
13
|
+
subtitle: {
|
|
14
|
+
id: 'progressiveProfilingQuiz.stepper.workStatus.subtitle',
|
|
15
|
+
defaultMessage: 'Find the job title that best matches your role.',
|
|
16
|
+
description: 'Subtitle text shown below the question in the work status step of the progressive profiling quiz',
|
|
17
|
+
},
|
|
18
|
+
notEmployedOption: {
|
|
19
|
+
id: 'progressiveProfilingQuiz.stepper.workStatus.notEmployedOption',
|
|
20
|
+
defaultMessage: 'Not employed',
|
|
21
|
+
description: 'Checkbox label for indicating the user is not currently employed, in the work status step of the progressive profiling quiz',
|
|
22
|
+
},
|
|
13
23
|
viewResultsButton: {
|
|
14
24
|
id: 'progressiveProfilingQuiz.stepper.workStatus.viewResultsButton',
|
|
15
25
|
defaultMessage: 'View Results',
|
package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/messages.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,KAAK,EAAE;QACL,EAAE,EAAE,mDAAmD;QACvD,cAAc,EAAE,aAAa;QAC7B,WAAW,EAAE,kEAAkE;KAChF;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,sDAAsD;QAC1D,cAAc,EAAE,4BAA4B;QAC5C,WAAW,EAAE,0EAA0E;KACxF;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,+DAA+D;QACnE,cAAc,EAAE,cAAc;QAC9B,WAAW,EAAE,sFAAsF;KACpG;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n title: {\n id: 'progressiveProfilingQuiz.stepper.workStatus.title',\n defaultMessage: 'Work Status',\n description: 'Title for the work status step of the progressive profiling quiz',\n },\n question: {\n id: 'progressiveProfilingQuiz.stepper.workStatus.question',\n defaultMessage: 'What is your current role?',\n description: 'Question asked in the work status step of the progressive profiling quiz',\n },\n viewResultsButton: {\n id: 'progressiveProfilingQuiz.stepper.workStatus.viewResultsButton',\n defaultMessage: 'View Results',\n description: 'Label for the button to complete the quiz and view results from the work status step',\n },\n});\n\nexport default messages;\n"]}
|
|
1
|
+
{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,KAAK,EAAE;QACL,EAAE,EAAE,mDAAmD;QACvD,cAAc,EAAE,aAAa;QAC7B,WAAW,EAAE,kEAAkE;KAChF;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,sDAAsD;QAC1D,cAAc,EAAE,4BAA4B;QAC5C,WAAW,EAAE,0EAA0E;KACxF;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,sDAAsD;QAC1D,cAAc,EAAE,iDAAiD;QACjE,WAAW,EAAE,kGAAkG;KAChH;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,+DAA+D;QACnE,cAAc,EAAE,cAAc;QAC9B,WAAW,EAAE,6HAA6H;KAC3I;IACD,iBAAiB,EAAE;QACjB,EAAE,EAAE,+DAA+D;QACnE,cAAc,EAAE,cAAc;QAC9B,WAAW,EAAE,sFAAsF;KACpG;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n title: {\n id: 'progressiveProfilingQuiz.stepper.workStatus.title',\n defaultMessage: 'Work Status',\n description: 'Title for the work status step of the progressive profiling quiz',\n },\n question: {\n id: 'progressiveProfilingQuiz.stepper.workStatus.question',\n defaultMessage: 'What is your current role?',\n description: 'Question asked in the work status step of the progressive profiling quiz',\n },\n subtitle: {\n id: 'progressiveProfilingQuiz.stepper.workStatus.subtitle',\n defaultMessage: 'Find the job title that best matches your role.',\n description: 'Subtitle text shown below the question in the work status step of the progressive profiling quiz',\n },\n notEmployedOption: {\n id: 'progressiveProfilingQuiz.stepper.workStatus.notEmployedOption',\n defaultMessage: 'Not employed',\n description: 'Checkbox label for indicating the user is not currently employed, in the work status step of the progressive profiling quiz',\n },\n viewResultsButton: {\n id: 'progressiveProfilingQuiz.stepper.workStatus.viewResultsButton',\n defaultMessage: 'View Results',\n description: 'Label for the button to complete the quiz and view results from the work status step',\n },\n});\n\nexport default messages;\n"]}
|
package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/schema.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { QuizQuestionSchema } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/types';
|
|
2
|
+
export declare const NOT_EMPLOYED_VALUE = "not-employed";
|
|
3
|
+
/**
|
|
4
|
+
* IF YOU CHANGE THE SCHEMA, MAKE SURE TO UPDATE THE VERSION AS WELL
|
|
5
|
+
* For typos and small adjustments, use patch version.
|
|
6
|
+
* For any other changes, use minor versions unless it's been clearly indicated otherwise.
|
|
7
|
+
*
|
|
8
|
+
* Like step 3's skills, job titles are data from `jobsList`, not translatable copy, so each gets
|
|
9
|
+
* a synthetic message descriptor whose `defaultMessage` is the job title itself. "Not employed" is
|
|
10
|
+
* genuine UI copy, so it uses a real message from `messages.ts` instead.
|
|
11
|
+
*/
|
|
12
|
+
declare const schema: QuizQuestionSchema;
|
|
13
|
+
export default schema;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/constants';
|
|
2
|
+
import { jobsList } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/jobsList';
|
|
3
|
+
import messages from './messages';
|
|
4
|
+
export const NOT_EMPLOYED_VALUE = 'not-employed';
|
|
5
|
+
/**
|
|
6
|
+
* IF YOU CHANGE THE SCHEMA, MAKE SURE TO UPDATE THE VERSION AS WELL
|
|
7
|
+
* For typos and small adjustments, use patch version.
|
|
8
|
+
* For any other changes, use minor versions unless it's been clearly indicated otherwise.
|
|
9
|
+
*
|
|
10
|
+
* Like step 3's skills, job titles are data from `jobsList`, not translatable copy, so each gets
|
|
11
|
+
* a synthetic message descriptor whose `defaultMessage` is the job title itself. "Not employed" is
|
|
12
|
+
* genuine UI copy, so it uses a real message from `messages.ts` instead.
|
|
13
|
+
*/
|
|
14
|
+
const schema = {
|
|
15
|
+
questionId: PROGRESSIVE_PROFILING_QUIZ_STEPS.WORK_STATUS,
|
|
16
|
+
version: '1.0.0',
|
|
17
|
+
question: messages.question,
|
|
18
|
+
options: [
|
|
19
|
+
...jobsList.map(job => ({
|
|
20
|
+
value: job.jobTitle,
|
|
21
|
+
message: {
|
|
22
|
+
id: `progressiveProfilingQuiz.stepper.workStatus.jobOption.${job.jobTitle}`,
|
|
23
|
+
defaultMessage: job.jobTitle,
|
|
24
|
+
},
|
|
25
|
+
})),
|
|
26
|
+
{ value: NOT_EMPLOYED_VALUE, message: messages.notEmployedOption },
|
|
27
|
+
],
|
|
28
|
+
};
|
|
29
|
+
export default schema;
|
|
30
|
+
//# sourceMappingURL=schema.js.map
|
package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/schema.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-work-status/schema.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gCAAgC,EAAE,MAAM,sDAAsD,CAAC;AACxG,OAAO,EAAE,QAAQ,EAAE,MAAM,qDAAqD,CAAC;AAC/E,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,CAAC,MAAM,kBAAkB,GAAG,cAAc,CAAC;AAEjD;;;;;;;;GAQG;AACH,MAAM,MAAM,GAAuB;IACjC,UAAU,EAAE,gCAAgC,CAAC,WAAW;IACxD,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,QAAQ,CAAC,QAAQ;IAC3B,OAAO,EAAE;QACP,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;YACtB,KAAK,EAAE,GAAG,CAAC,QAAQ;YACnB,OAAO,EAAE;gBACP,EAAE,EAAE,yDAAyD,GAAG,CAAC,QAAQ,EAAE;gBAC3E,cAAc,EAAE,GAAG,CAAC,QAAQ;aAC7B;SACF,CAAC,CAAC;QACH,EAAE,KAAK,EAAE,kBAAkB,EAAE,OAAO,EAAE,QAAQ,CAAC,iBAAiB,EAAE;KACnE;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { QuizQuestionSchema } from '@src/widgets/ProgressiveProfilingQuiz/data/types';\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport { jobsList } from '@src/widgets/ProgressiveProfilingQuiz/data/jobsList';\nimport messages from './messages';\n\nexport const NOT_EMPLOYED_VALUE = 'not-employed';\n\n/**\n * IF YOU CHANGE THE SCHEMA, MAKE SURE TO UPDATE THE VERSION AS WELL\n * For typos and small adjustments, use patch version.\n * For any other changes, use minor versions unless it's been clearly indicated otherwise.\n *\n * Like step 3's skills, job titles are data from `jobsList`, not translatable copy, so each gets\n * a synthetic message descriptor whose `defaultMessage` is the job title itself. \"Not employed\" is\n * genuine UI copy, so it uses a real message from `messages.ts` instead.\n */\nconst schema: QuizQuestionSchema = {\n questionId: PROGRESSIVE_PROFILING_QUIZ_STEPS.WORK_STATUS,\n version: '1.0.0',\n question: messages.question,\n options: [\n ...jobsList.map(job => ({\n value: job.jobTitle,\n message: {\n id: `progressiveProfilingQuiz.stepper.workStatus.jobOption.${job.jobTitle}`,\n defaultMessage: job.jobTitle,\n },\n })),\n { value: NOT_EMPLOYED_VALUE, message: messages.notEmployedOption },\n ],\n};\n\nexport default schema;\n"]}
|