@edx/frontend-app-subscription-learner-dashboard 1.38.4 → 1.39.0

package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgress.js

@@ -38,7 +38,7 @@ const ProgramProgress = () => {
     const remainingCourseCount = ((_j = courseData === null || courseData === void 0 ? void 0 : courseData.notStarted) === null || _j === void 0 ? void 0 : _j.length) || 0;
     const completedCourseCount = ((_k = courseData === null || courseData === void 0 ? void 0 : courseData.completed) === null || _k === void 0 ? void 0 : _k.length) || 0;
     const discountData = programData === null || programData === void 0 ? void 0 : programData.discountData;
-    return (_jsxs(_Fragment, { children: [_jsx(Helmet, { title: `${programData === null || programData === void 0 ? void 0 : programData.title}` }), _jsxs(Container, { fluid: false, size: "xl", className: "p-4.5", children: [_jsx("div", { className: "d-block d-lg-none mb-4", children: _jsxs(Link, { to: subscriptionDashboardUrlPath, className: "text-reset text-decoration-none d-inline-flex align-items-center", children: [_jsx(Icon, { src: ArrowBack, className: "mr-2" }), formatMessage(messages.programProgressReturnToDashboardText)] }) }), _jsx(ProgramProgressHeader, { programTitle: (_l = programData === null || programData === void 0 ? void 0 : programData.title) !== null && _l !== void 0 ? _l : '', programType: (_m = programData === null || programData === void 0 ? void 0 : programData.type) !== null && _m !== void 0 ? _m : '', authoringOrganizations: programData === null || programData === void 0 ? void 0 : programData.authoringOrganizations }), _jsxs(Row, { children: [_jsxs(Col, { sm: 12, md: 8, children: [_jsx(ProgramProgressInfo, { allCoursesCompleted: allCoursesCompleted, totalCoursesInProgram: totalCoursesInProgram, programTitle: (_o = programData === null || programData === void 0 ? void 0 : programData.title) !== null && _o !== void 0 ? _o : '', discountData: discountData, programType: programType }), _jsx(ProgramProgressTabs, { counts: { inProgress: inProgressCourseCount, remaining: remainingCourseCount, completed: completedCourseCount }, type: programType })] }), _jsx(Col, { sm: 12, md: 4, children: _jsx(ProgramProgressSidebar, { inProgress: inProgressCourseCount, remaining: remainingCourseCount, completed: completedCourseCount }) })] })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Helmet, { title: `${programData === null || programData === void 0 ? void 0 : programData.title}` }), _jsxs(Container, { fluid: false, size: "xl", className: "p-4.5", children: [_jsx("div", { className: "d-block d-lg-none mb-4", children: _jsxs(Link, { to: subscriptionDashboardUrlPath, className: "text-reset text-decoration-none d-inline-flex align-items-center", children: [_jsx(Icon, { src: ArrowBack, className: "mr-2" }), formatMessage(messages.programProgressReturnToDashboardText)] }) }), _jsx(ProgramProgressHeader, { programTitle: (_l = programData === null || programData === void 0 ? void 0 : programData.title) !== null && _l !== void 0 ? _l : '', programType: (_m = programData === null || programData === void 0 ? void 0 : programData.type) !== null && _m !== void 0 ? _m : '', authoringOrganizations: programData === null || programData === void 0 ? void 0 : programData.authoringOrganizations }), _jsxs(Row, { children: [_jsxs(Col, { sm: 12, md: 8, children: [_jsx(ProgramProgressInfo, { allCoursesCompleted: allCoursesCompleted, totalCoursesInProgram: totalCoursesInProgram, programTitle: (_o = programData === null || programData === void 0 ? void 0 : programData.title) !== null && _o !== void 0 ? _o : '', discountData: discountData, completedCourseCount: completedCourseCount }), _jsx(ProgramProgressTabs, { counts: { inProgress: inProgressCourseCount, remaining: remainingCourseCount, completed: completedCourseCount }, type: programType })] }), _jsx(Col, { sm: 12, md: 4, children: _jsx(ProgramProgressSidebar, { inProgress: inProgressCourseCount, remaining: remainingCourseCount, completed: completedCourseCount }) })] })] })] }));
 };
 export default ProgramProgress;
 //# sourceMappingURL=ProgramProgress.js.map

package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgramProgress.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgress.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,qBAAqB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,4BAA4B,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,eAAe,GAAO,GAAG,EAAE;;IAC/B,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAC;IACpE,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,IAAI,mBAAmB,KAAK,IAAI,EAAE,CAAC;QACjC,OAAO,wCAAsB,CAAC;IAChC,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,uCAAqB,CAAC;IAC/B,CAAC;IAED,IAAI,KAAK,EAAE,CAAC;QACV,OAAO,2CAAyB,CAAC;IACnC,CAAC;IAED,MAAM,WAAW,GAAG,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,WAAW,CAAC;IACrD,MAAM,UAAU,GAAG,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,UAAU,CAAC;IAEnD,MAAM,qBAAqB,GAAG,CAAC,CAAA,MAAA,UAAU,CAAC,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC;UAC9D,CAAC,CAAA,MAAA,UAAU,CAAC,SAAS,0CAAE,MAAM,KAAI,CAAC,CAAC;UACnC,CAAC,CAAA,MAAA,UAAU,CAAC,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC,CAAC;IAEzC,MAAM,mBAAmB,GAAG,CAAC,CAAA,MAAA,UAAU,CAAC,UAAU,0CAAE,MAAM,CAAA;WACrD,CAAC,CAAA,MAAA,UAAU,CAAC,UAAU,0CAAE,MAAM,CAAA;YAC9B,MAAA,UAAU,CAAC,SAAS,0CAAE,MAAM,CAAA,CAAC;IAElC,MAAM,WAAW,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,mCAAI,EAAE,CAAC;IAC5C,MAAM,qBAAqB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC;IAClE,MAAM,oBAAoB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC;IACjE,MAAM,oBAAoB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,SAAS,0CAAE,MAAM,KAAI,CAAC,CAAC;IAChE,MAAM,YAAY,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,YAAY,CAAC;IAE/C,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,KAAK,EAAE,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,EAAE,GAAI,EAC1C,MAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,aAClD,cAAK,SAAS,EAAC,wBAAwB,YACrC,MAAC,IAAI,IAAC,EAAE,EAAE,4BAA4B,EAAE,SAAS,EAAC,kEAAkE,aAClH,KAAC,IAAI,IAAC,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EACxC,aAAa,CAAC,QAAQ,CAAC,oCAAoC,CAAC,IACxD,GACH,EACN,KAAC,qBAAqB,IACpB,YAAY,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,mCAAI,EAAE,EACtC,WAAW,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,mCAAI,EAAE,EACpC,sBAAsB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,sBAAsB,GAC3D,EACF,MAAC,GAAG,eACF,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,aAChB,KAAC,mBAAmB,IAClB,mBAAmB,EAAE,mBAAmB,EACxC,qBAAqB,EAAE,qBAAqB,EAC5C,YAAY,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,mCAAI,EAAE,EACtC,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,GACxB,EACF,KAAC,mBAAmB,IAAC,MAAM,EAAE,EAAE,UAAU,EAAE,qBAAqB,EAAE,SAAS,EAAE,oBAAoB,EAAE,SAAS,EAAE,oBAAoB,EAAE,EAAE,IAAI,EAAE,WAAW,GAAI,IACvJ,EAEN,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,YAChB,KAAC,sBAAsB,IACrB,UAAU,EAAE,qBAAqB,EACjC,SAAS,EAAE,oBAAoB,EAC/B,SAAS,EAAE,oBAAoB,GAC/B,GACE,IACF,IACI,IACX,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FC } from 'react';\nimport { Helmet } from 'react-helmet';\nimport { Link } from 'react-router-dom';\nimport { Col, Container, Icon, Row } from '@openedx/paragon';\nimport { ArrowBack } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport './index.scss';\nimport { useProgressData } from '@src/hooks';\nimport ProgramProgressHeader from './ProgramProgressHeader';\nimport ProgramProgressInfo from './ProgramProgressInfo';\nimport { ProgramProgressTabs } from './ProgramProgressTabs';\nimport { ProgramProgressSidebar } from './ProgramProgressSidebar';\nimport { subscriptionDashboardUrlPath } from '@src/constants';\nimport messages from './messages';\n\nconst ProgramProgress: FC = () => {\n  const { programProgressData, isLoading, error } = useProgressData();\n  const { formatMessage } = useIntl();\n\n  if (programProgressData === null) {\n    return <div>Invalid URL</div>;\n  }\n\n  if (isLoading) {\n    return <div>Loading...</div>;\n  }\n\n  if (error) {\n    return <div>Error occurred</div>;\n  }\n\n  const programData = programProgressData?.programData;\n  const courseData = programProgressData?.courseData;\n\n  const totalCoursesInProgram = (courseData.notStarted?.length || 0)\n    + (courseData.completed?.length || 0)\n    + (courseData.inProgress?.length || 0);\n\n  const allCoursesCompleted = !courseData.notStarted?.length\n    && !courseData.inProgress?.length\n    && courseData.completed?.length;\n\n  const programType = programData?.type ?? '';\n  const inProgressCourseCount = courseData?.inProgress?.length || 0;\n  const remainingCourseCount = courseData?.notStarted?.length || 0;\n  const completedCourseCount = courseData?.completed?.length || 0;\n  const discountData = programData?.discountData;\n\n  return (\n    <>\n      <Helmet title={`${programData?.title}`} />\n      <Container fluid={false} size=\"xl\" className=\"p-4.5\">\n        <div className=\"d-block d-lg-none mb-4\">\n          <Link to={subscriptionDashboardUrlPath} className=\"text-reset text-decoration-none d-inline-flex align-items-center\">\n            <Icon src={ArrowBack} className=\"mr-2\" />\n            {formatMessage(messages.programProgressReturnToDashboardText)}\n          </Link>\n        </div>\n        <ProgramProgressHeader\n          programTitle={programData?.title ?? ''}\n          programType={programData?.type ?? ''}\n          authoringOrganizations={programData?.authoringOrganizations}\n        />\n        <Row>\n          <Col sm={12} md={8}>\n            <ProgramProgressInfo\n              allCoursesCompleted={allCoursesCompleted}\n              totalCoursesInProgram={totalCoursesInProgram}\n              programTitle={programData?.title ?? ''}\n              discountData={discountData}\n              programType={programType}\n            />\n            <ProgramProgressTabs counts={{ inProgress: inProgressCourseCount, remaining: remainingCourseCount, completed: completedCourseCount }} type={programType} />\n          </Col>\n\n          <Col sm={12} md={4}>\n            <ProgramProgressSidebar\n              inProgress={inProgressCourseCount}\n              remaining={remainingCourseCount}\n              completed={completedCourseCount}\n            />\n          </Col>\n        </Row>\n      </Container>\n    </>\n  );\n};\n\nexport default ProgramProgress;\n"]}
+{"version":3,"file":"ProgramProgress.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgress.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,qBAAqB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,4BAA4B,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,eAAe,GAAO,GAAG,EAAE;;IAC/B,MAAM,EAAE,mBAAmB,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAC;IACpE,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,IAAI,mBAAmB,KAAK,IAAI,EAAE,CAAC;QACjC,OAAO,wCAAsB,CAAC;IAChC,CAAC;IAED,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,uCAAqB,CAAC;IAC/B,CAAC;IAED,IAAI,KAAK,EAAE,CAAC;QACV,OAAO,2CAAyB,CAAC;IACnC,CAAC;IAED,MAAM,WAAW,GAAG,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,WAAW,CAAC;IACrD,MAAM,UAAU,GAAG,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,UAAU,CAAC;IAEnD,MAAM,qBAAqB,GAAG,CAAC,CAAA,MAAA,UAAU,CAAC,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC;UAC9D,CAAC,CAAA,MAAA,UAAU,CAAC,SAAS,0CAAE,MAAM,KAAI,CAAC,CAAC;UACnC,CAAC,CAAA,MAAA,UAAU,CAAC,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC,CAAC;IAEzC,MAAM,mBAAmB,GAAG,CAAC,CAAA,MAAA,UAAU,CAAC,UAAU,0CAAE,MAAM,CAAA;WACrD,CAAC,CAAA,MAAA,UAAU,CAAC,UAAU,0CAAE,MAAM,CAAA;YAC9B,MAAA,UAAU,CAAC,SAAS,0CAAE,MAAM,CAAA,CAAC;IAElC,MAAM,WAAW,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,mCAAI,EAAE,CAAC;IAC5C,MAAM,qBAAqB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC;IAClE,MAAM,oBAAoB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC;IACjE,MAAM,oBAAoB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,SAAS,0CAAE,MAAM,KAAI,CAAC,CAAC;IAChE,MAAM,YAAY,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,YAAY,CAAC;IAE/C,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,KAAK,EAAE,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,EAAE,GAAI,EAC1C,MAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,aAClD,cAAK,SAAS,EAAC,wBAAwB,YACrC,MAAC,IAAI,IAAC,EAAE,EAAE,4BAA4B,EAAE,SAAS,EAAC,kEAAkE,aAClH,KAAC,IAAI,IAAC,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EACxC,aAAa,CAAC,QAAQ,CAAC,oCAAoC,CAAC,IACxD,GACH,EACN,KAAC,qBAAqB,IACpB,YAAY,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,mCAAI,EAAE,EACtC,WAAW,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,mCAAI,EAAE,EACpC,sBAAsB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,sBAAsB,GAC3D,EACF,MAAC,GAAG,eACF,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,aAChB,KAAC,mBAAmB,IAClB,mBAAmB,EAAE,mBAAmB,EACxC,qBAAqB,EAAE,qBAAqB,EAC5C,YAAY,EAAE,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,KAAK,mCAAI,EAAE,EACtC,YAAY,EAAE,YAAY,EAC1B,oBAAoB,EAAE,oBAAoB,GAC1C,EACF,KAAC,mBAAmB,IAAC,MAAM,EAAE,EAAE,UAAU,EAAE,qBAAqB,EAAE,SAAS,EAAE,oBAAoB,EAAE,SAAS,EAAE,oBAAoB,EAAE,EAAE,IAAI,EAAE,WAAW,GAAI,IACvJ,EAEN,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,YAChB,KAAC,sBAAsB,IACrB,UAAU,EAAE,qBAAqB,EACjC,SAAS,EAAE,oBAAoB,EAC/B,SAAS,EAAE,oBAAoB,GAC/B,GACE,IACF,IACI,IACX,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { FC } from 'react';\nimport { Helmet } from 'react-helmet';\nimport { Link } from 'react-router-dom';\nimport { Col, Container, Icon, Row } from '@openedx/paragon';\nimport { ArrowBack } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport './index.scss';\nimport { useProgressData } from '@src/hooks';\nimport ProgramProgressHeader from './ProgramProgressHeader';\nimport ProgramProgressInfo from './ProgramProgressInfo';\nimport { ProgramProgressTabs } from './ProgramProgressTabs';\nimport { ProgramProgressSidebar } from './ProgramProgressSidebar';\nimport { subscriptionDashboardUrlPath } from '@src/constants';\nimport messages from './messages';\n\nconst ProgramProgress: FC = () => {\n  const { programProgressData, isLoading, error } = useProgressData();\n  const { formatMessage } = useIntl();\n\n  if (programProgressData === null) {\n    return <div>Invalid URL</div>;\n  }\n\n  if (isLoading) {\n    return <div>Loading...</div>;\n  }\n\n  if (error) {\n    return <div>Error occurred</div>;\n  }\n\n  const programData = programProgressData?.programData;\n  const courseData = programProgressData?.courseData;\n\n  const totalCoursesInProgram = (courseData.notStarted?.length || 0)\n    + (courseData.completed?.length || 0)\n    + (courseData.inProgress?.length || 0);\n\n  const allCoursesCompleted = !courseData.notStarted?.length\n    && !courseData.inProgress?.length\n    && courseData.completed?.length;\n\n  const programType = programData?.type ?? '';\n  const inProgressCourseCount = courseData?.inProgress?.length || 0;\n  const remainingCourseCount = courseData?.notStarted?.length || 0;\n  const completedCourseCount = courseData?.completed?.length || 0;\n  const discountData = programData?.discountData;\n\n  return (\n    <>\n      <Helmet title={`${programData?.title}`} />\n      <Container fluid={false} size=\"xl\" className=\"p-4.5\">\n        <div className=\"d-block d-lg-none mb-4\">\n          <Link to={subscriptionDashboardUrlPath} className=\"text-reset text-decoration-none d-inline-flex align-items-center\">\n            <Icon src={ArrowBack} className=\"mr-2\" />\n            {formatMessage(messages.programProgressReturnToDashboardText)}\n          </Link>\n        </div>\n        <ProgramProgressHeader\n          programTitle={programData?.title ?? ''}\n          programType={programData?.type ?? ''}\n          authoringOrganizations={programData?.authoringOrganizations}\n        />\n        <Row>\n          <Col sm={12} md={8}>\n            <ProgramProgressInfo\n              allCoursesCompleted={allCoursesCompleted}\n              totalCoursesInProgram={totalCoursesInProgram}\n              programTitle={programData?.title ?? ''}\n              discountData={discountData}\n              completedCourseCount={completedCourseCount}\n            />\n            <ProgramProgressTabs counts={{ inProgress: inProgressCourseCount, remaining: remainingCourseCount, completed: completedCourseCount }} type={programType} />\n          </Col>\n\n          <Col sm={12} md={4}>\n            <ProgramProgressSidebar\n              inProgress={inProgressCourseCount}\n              remaining={remainingCourseCount}\n              completed={completedCourseCount}\n            />\n          </Col>\n        </Row>\n      </Container>\n    </>\n  );\n};\n\nexport default ProgramProgress;\n"]}

package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgressInfo.js

@@ -2,12 +2,9 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useIntl } from '@openedx/frontend-base';
 import messages from './messages';
 import { UpgradeAllButton } from './UpgradeButton';
-import { PROGRAM_TYPE_MAP } from '../data/constants';
-const ProgramProgressInfo = ({ allCoursesCompleted, totalCoursesInProgram, programTitle, discountData, programType }) => {
+const ProgramProgressInfo = ({ allCoursesCompleted, totalCoursesInProgram, programTitle, discountData, completedCourseCount }) => {
     const { formatMessage } = useIntl();
-    const isProfessionalProgram = programType === PROGRAM_TYPE_MAP.PROFESSIONAL_CERTIFICATE;
-    const isXSeriesProgram = programType === PROGRAM_TYPE_MAP.XSERIES;
-    const showUpgradeButton = !isProfessionalProgram && !isXSeriesProgram
+    const showUpgradeButton = completedCourseCount === 0
         && (discountData === null || discountData === void 0 ? void 0 : discountData.currency)
         && typeof (discountData === null || discountData === void 0 ? void 0 : discountData.totalInclTax) === 'number'
         && typeof (discountData === null || discountData === void 0 ? void 0 : discountData.totalInclTaxExclDiscounts) === 'number';

package/dist/containers/ProgramDashboard/ProgramProgress/ProgramProgressInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgramProgressInfo.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgressInfo.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErD,MAAM,mBAAmB,GAAuC,CAAC,EAC/D,mBAAmB,EAAE,qBAAqB,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EACpF,EAAE,EAAE;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,qBAAqB,GAAG,WAAW,KAAK,gBAAgB,CAAC,wBAAwB,CAAC;IACxF,MAAM,gBAAgB,GAAG,WAAW,KAAK,gBAAgB,CAAC,OAAO,CAAC;IAClE,MAAM,iBAAiB,GAAG,CAAC,qBAAqB,IAAI,CAAC,gBAAgB;YAChE,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,QAAQ,CAAA;WACtB,OAAO,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,YAAY,CAAA,KAAK,QAAQ;WAC9C,OAAO,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,yBAAyB,CAAA,KAAK,QAAQ,CAAC;IAEjE,OAAO,CACL,cAAK,SAAS,EAAC,QAAQ,YACpB,mBAAmB;YAClB,CAAC,CAAC,CACE,8BACE,uBAAK,aAAa,CAAC,QAAQ,CAAC,6BAA6B,CAAC,GAAM,EAChE,sBAAI,aAAa,CAAC,QAAQ,CAAC,2BAA2B,EAAE,EAAE,YAAY,EAAE,CAAC,GAAK,IAC7E,CACJ;YACH,CAAC,CAAC,CACE,8BACE,aAAI,SAAS,EAAC,yCAAyC,YAAE,aAAa,CAAC,QAAQ,CAAC,+BAA+B,CAAC,GAAM,EACtH,YAAG,SAAS,EAAC,sBAAsB,iBAAa,8BAA8B,YAC3E,aAAa,CAAC,QAAQ,CAAC,6BAA6B,EAAE,EAAE,qBAAqB,EAAE,CAAC,GAC/E,EACH,iBAAiB,IAAI,CACpB,KAAC,gBAAgB,KAAG,CACrB,IACA,CACJ,GACD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["import React from 'react';\nimport { useIntl } from '@openedx/frontend-base';\nimport { ProgramProgressInfoProps } from '../data/types';\nimport messages from './messages';\n\nimport { UpgradeAllButton } from './UpgradeButton';\nimport { PROGRAM_TYPE_MAP } from '../data/constants';\n\nconst ProgramProgressInfo: React.FC<ProgramProgressInfoProps> = ({\n  allCoursesCompleted, totalCoursesInProgram, programTitle, discountData, programType\n}) => {\n  const { formatMessage } = useIntl();\n  const isProfessionalProgram = programType === PROGRAM_TYPE_MAP.PROFESSIONAL_CERTIFICATE;\n  const isXSeriesProgram = programType === PROGRAM_TYPE_MAP.XSERIES;\n  const showUpgradeButton = !isProfessionalProgram && !isXSeriesProgram\n    && discountData?.currency\n    && typeof discountData?.totalInclTax === 'number'\n    && typeof discountData?.totalInclTaxExclDiscounts === 'number';\n\n  return (\n    <div className=\"pb-4.5\">\n      {allCoursesCompleted\n        ? (\n            <>\n              <h3>{formatMessage(messages.programProgressCompleteHeader)}</h3>\n              <p>{formatMessage(messages.programProgressCompleteText, { programTitle })}</p>\n            </>\n          )\n        : (\n            <>\n              <h3 className=\"program-journey-header font-weight-bold\">{formatMessage(messages.programProgressIncompleteHeader)}</h3>\n              <p className=\"program-journey-text\" data-testid=\"program-incomplete-info-text\">\n                {formatMessage(messages.programProgressIncompleteText, { totalCoursesInProgram })}\n              </p>\n              {showUpgradeButton && (\n                <UpgradeAllButton />\n              )}\n            </>\n          )}\n    </div>\n  );\n};\n\nexport default ProgramProgressInfo;\n"]}
+{"version":3,"file":"ProgramProgressInfo.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgressInfo.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,mBAAmB,GAAuC,CAAC,EAC/D,mBAAmB,EAAE,qBAAqB,EAAE,YAAY,EAAE,YAAY,EAAE,oBAAoB,EAC7F,EAAE,EAAE;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,iBAAiB,GAAG,oBAAoB,KAAK,CAAC;YAC/C,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,QAAQ,CAAA;WACtB,OAAO,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,YAAY,CAAA,KAAK,QAAQ;WAC9C,OAAO,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,yBAAyB,CAAA,KAAK,QAAQ,CAAC;IAEjE,OAAO,CACL,cAAK,SAAS,EAAC,QAAQ,YACpB,mBAAmB;YAClB,CAAC,CAAC,CACE,8BACE,uBAAK,aAAa,CAAC,QAAQ,CAAC,6BAA6B,CAAC,GAAM,EAChE,sBAAI,aAAa,CAAC,QAAQ,CAAC,2BAA2B,EAAE,EAAE,YAAY,EAAE,CAAC,GAAK,IAC7E,CACJ;YACH,CAAC,CAAC,CACE,8BACE,aAAI,SAAS,EAAC,yCAAyC,YAAE,aAAa,CAAC,QAAQ,CAAC,+BAA+B,CAAC,GAAM,EACtH,YAAG,SAAS,EAAC,sBAAsB,iBAAa,8BAA8B,YAC3E,aAAa,CAAC,QAAQ,CAAC,6BAA6B,EAAE,EAAE,qBAAqB,EAAE,CAAC,GAC/E,EACH,iBAAiB,IAAI,CACpB,KAAC,gBAAgB,KAAG,CACrB,IACA,CACJ,GACD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC","sourcesContent":["import React from 'react';\nimport { useIntl } from '@openedx/frontend-base';\nimport { ProgramProgressInfoProps } from '../data/types';\nimport messages from './messages';\n\nimport { UpgradeAllButton } from './UpgradeButton';\n\nconst ProgramProgressInfo: React.FC<ProgramProgressInfoProps> = ({\n  allCoursesCompleted, totalCoursesInProgram, programTitle, discountData, completedCourseCount\n}) => {\n  const { formatMessage } = useIntl();\n  const showUpgradeButton = completedCourseCount === 0\n    && discountData?.currency\n    && typeof discountData?.totalInclTax === 'number'\n    && typeof discountData?.totalInclTaxExclDiscounts === 'number';\n\n  return (\n    <div className=\"pb-4.5\">\n      {allCoursesCompleted\n        ? (\n            <>\n              <h3>{formatMessage(messages.programProgressCompleteHeader)}</h3>\n              <p>{formatMessage(messages.programProgressCompleteText, { programTitle })}</p>\n            </>\n          )\n        : (\n            <>\n              <h3 className=\"program-journey-header font-weight-bold\">{formatMessage(messages.programProgressIncompleteHeader)}</h3>\n              <p className=\"program-journey-text\" data-testid=\"program-incomplete-info-text\">\n                {formatMessage(messages.programProgressIncompleteText, { totalCoursesInProgram })}\n              </p>\n              {showUpgradeButton && (\n                <UpgradeAllButton />\n              )}\n            </>\n          )}\n    </div>\n  );\n};\n\nexport default ProgramProgressInfo;\n"]}

package/dist/containers/SubscriptionBanner/components/SubscriptionBanner.js

@@ -70,14 +70,14 @@ export const SubscriptionBanner = ({ learnerSubscriptionData }) => {
                     daysLeft: daysLeftAfterCancellation,
                 }));
                 setBannerBody(formatMessage(messages.cancelledSubscriptionBody, {
-                    subscriptionEndDate: formatDate(subscriptionEndDate),
+                    subscriptionRenewalEndDate: formatDate(currentPeriodEnd),
                 }));
                 break;
             case 'CANCELLED':
                 setBannerVariant('light');
                 setBannerTitle(formatMessage(messages.cancelledSubscriptionTitle));
                 setBannerBody(formatMessage(messages.cancelledSubscriptionBody, {
-                    subscriptionEndDate: formatDate(subscriptionEndDate),
+                    subscriptionRenewalEndDate: formatDate(currentPeriodEnd),
                 }));
                 break;
             case 'RENEWAL_FAILED':

package/dist/containers/SubscriptionBanner/components/SubscriptionBanner.js.map

@@ -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"]}
+{"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"]}

package/dist/containers/SubscriptionBanner/messages.js

@@ -39,7 +39,7 @@ const messages = defineMessages({
     cancelledSubscriptionBody: {
         id: 'learner-dash.subscriptionBanner.banners.cancelledSubscriptionBody',
         description: 'Message to learners with a cancelled subscription',
-        defaultMessage: 'Your subscription will expire on {subscriptionEndDate}',
+        defaultMessage: 'Your subscription will end on {subscriptionRenewalEndDate}',
     },
     renewSubscriptionButton: {
         id: 'learner-dash.subscriptionBanner.banners.renewSubscriptionButton',

package/dist/containers/SubscriptionBanner/messages.js.map

@@ -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,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"]}
+{"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"]}

package/dist/containers/SubscriptionInformation/components/SubscriptionInformation.js

@@ -10,7 +10,7 @@ import '../index.scss';
 import { Cached, WarningFilled, Cancel } from '@openedx/paragon/icons';
 import { subscriptionRenewalURL } from '../../../data/constants/app';
 export const SubscriptionInformation = () => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const { data: subsData } = useInitializeSubsDashboard();
     const { formatMessage } = useIntl();
     const formatDate = utilHooks.useFormatDate();
@@ -42,7 +42,7 @@ export const SubscriptionInformation = () => {
                     planName: (_c = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _c === void 0 ? void 0 : _c.planName,
                 }));
                 setInfoBody(formatMessage(messages.cancelledSubscriptionBody, {
-                    subscriptionEndDate: formatDate((_d = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _d === void 0 ? void 0 : _d.subscriptionEndDate),
+                    subscriptionRenewalEndDate: formatDate((_d = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _d === void 0 ? void 0 : _d.currentPeriodEnd),
                 }));
                 break;
             case 'CANCELLED':
@@ -51,7 +51,7 @@ export const SubscriptionInformation = () => {
                     planName: (_e = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _e === void 0 ? void 0 : _e.planName,
                 }));
                 setInfoBody(formatMessage(messages.cancelledSubscriptionBody, {
-                    subscriptionEndDate: formatDate((_f = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _f === void 0 ? void 0 : _f.subscriptionEndDate),
+                    subscriptionRenewalEndDate: formatDate((_f = subsData === null || subsData === void 0 ? void 0 : subsData.userSubscription) === null || _f === void 0 ? void 0 : _f.currentPeriodEnd),
                 }));
                 break;
             case 'RENEWAL_FAILED': // also known as 'Payment Error' in figma designs
@@ -61,7 +61,7 @@ export const SubscriptionInformation = () => {
                 }));
                 break;
         }
-    }, [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]);
+    }, [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]);
     const getSubscriptionAction = useMemo(() => {
         if (status === 'CANCELLED' || status === 'CANCEL_PENDING') {
             return ([
@@ -81,7 +81,7 @@ export const SubscriptionInformation = () => {
         RENEWAL_PENDING: Cached,
         CANCEL_PENDING: Cancel,
     };
-    const bannerIcon = (_e = subscriptionStatusIcons[status]) !== null && _e !== void 0 ? _e : undefined;
+    const bannerIcon = (_d = subscriptionStatusIcons[status]) !== null && _d !== void 0 ? _d : undefined;
     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 })] })] }));
 };
 //# sourceMappingURL=SubscriptionInformation.js.map

package/dist/containers/SubscriptionInformation/components/SubscriptionInformation.js.map

@@ -1 +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"]}
+{"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"]}

package/dist/containers/SubscriptionInformation/messages.js

@@ -53,7 +53,7 @@ const messages = defineMessages({
     cancelledSubscriptionBody: {
         id: 'learner-dash.subscriptionInformation.information.cancelledSubscriptionBody',
         description: 'Message to learners when subscription is cancelled',
-        defaultMessage: 'You have no upcoming payments. You canceled your subscription on {subscriptionEndDate}.',
+        defaultMessage: 'You have no upcoming payments. Your subscription will end on {subscriptionRenewalEndDate}.',
     },
     renewSubscriptionButton: {
         id: 'learner-dash.subscriptionInformation.information.renewSubscriptionButton',

package/dist/containers/SubscriptionInformation/messages.js.map

@@ -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,yFAAyF;KAC1G;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. You canceled your subscription on {subscriptionEndDate}.',\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"]}
+{"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"]}

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/InterestsDeclaredAutosuggest.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SkillWithCount } from '../../../../../../widgets/ProgressiveProfilingQuiz/data';
+export interface AutosuggestValue {
+    userProvidedText: string;
+    selectionValue: string;
+    selectionId: string;
+}
+interface InterestsDeclaredAutosuggestProps {
+    inputValue: AutosuggestValue;
+    skills?: SkillWithCount[];
+    onChange: (value: AutosuggestValue) => void;
+}
+declare const InterestsDeclaredAutosuggest: React.FC<InterestsDeclaredAutosuggestProps>;
+export default InterestsDeclaredAutosuggest;

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/InterestsDeclaredAutosuggest.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Form, Icon } from '@openedx/paragon';
+import { Search } from '@openedx/paragon/icons';
+const InterestsDeclaredAutosuggest = ({ inputValue, skills, onChange, }) => {
+    return (_jsx(Form.Autosuggest, { value: inputValue, onChange: onChange, name: "interests-declared-autosuggest", trailingElement: (_jsx(Icon, { src: Search })), className: "container-mw-xs", children: skills === null || skills === void 0 ? void 0 : skills.map(skill => (_jsx(Form.AutosuggestOption, { id: skill.value.replaceAll(' ', '-').toLowerCase(), children: skill.value }, skill.value))) }));
+};
+export default InterestsDeclaredAutosuggest;
+//# sourceMappingURL=InterestsDeclaredAutosuggest.js.map

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/InterestsDeclaredAutosuggest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InterestsDeclaredAutosuggest.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/InterestsDeclaredAutosuggest.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAgBhD,MAAM,4BAA4B,GAAgD,CAAC,EACjF,UAAU,EACV,MAAM,EACN,QAAQ,GACT,EAAE,EAAE;IACH,OAAO,CACL,KAAC,IAAI,CAAC,WAAW,IACf,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,gCAAgC,EACrC,eAAe,EAAE,CACf,KAAC,IAAI,IACH,GAAG,EAAE,MAAM,GACX,CACH,EACD,SAAS,EAAC,iBAAiB,YAE1B,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACpB,KAAC,IAAI,CAAC,iBAAiB,IAAmB,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE,YACzF,KAAK,CAAC,KAAK,IADe,KAAK,CAAC,KAAK,CAEf,CAC1B,CAAC,GACe,CACpB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,4BAA4B,CAAC","sourcesContent":["import React from 'react';\nimport { Form, Icon } from '@openedx/paragon';\nimport { Search } from '@openedx/paragon/icons';\n\nimport { SkillWithCount } from '@src/widgets/ProgressiveProfilingQuiz/data';\n\nexport interface AutosuggestValue {\n  userProvidedText: string,\n  selectionValue: string,\n  selectionId: string,\n}\n\ninterface InterestsDeclaredAutosuggestProps {\n  inputValue: AutosuggestValue,\n  skills?: SkillWithCount[],\n  onChange: (value: AutosuggestValue) => void,\n}\n\nconst InterestsDeclaredAutosuggest: React.FC<InterestsDeclaredAutosuggestProps> = ({\n  inputValue,\n  skills,\n  onChange,\n}) => {\n  return (\n    <Form.Autosuggest\n      value={inputValue}\n      onChange={onChange}\n      name=\"interests-declared-autosuggest\"\n      trailingElement={(\n        <Icon\n          src={Search}\n        />\n      )}\n      className=\"container-mw-xs\"\n    >\n      {skills?.map(skill => (\n        <Form.AutosuggestOption key={skill.value} id={skill.value.replaceAll(' ', '-').toLowerCase()}>\n          {skill.value}\n        </Form.AutosuggestOption>\n      ))}\n    </Form.Autosuggest>\n  );\n};\n\nexport default InterestsDeclaredAutosuggest;\n"]}

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/index.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
+import './index.scss';
 declare const InterestsDeclaredStep: React.FC;
 export default InterestsDeclaredStep;

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/index.js

@@ -1,15 +1,55 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Stepper, Button } from '@openedx/paragon';
+import { useState } from 'react';
+import { Stepper, Button, Form, Chip } from '@openedx/paragon';
+import { Close } from '@openedx/paragon/icons';
 import { useIntl } from '@openedx/frontend-base';
-import BaseStep from '../BaseStep';
 import { useProgressiveProfilingQuiz } from '../../../../../../widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';
 import { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/constants';
+import BaseStep from '../BaseStep';
+import InterestsDeclaredAutosuggest from './InterestsDeclaredAutosuggest';
+import { useSkills } from '../../../../../../widgets/ProgressiveProfilingQuiz/data';
+import { buildAnswerRecord } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/schemaUtils';
+import buildInterestsDeclaredSchema from './schema';
+const EMPTY_AUTOSUGGEST_VALUE = {
+    userProvidedText: '',
+    selectionValue: '',
+    selectionId: '',
+};
 import stepMessages from '../messages';
 import messages from './messages';
+import './index.scss';
 const InterestsDeclaredStep = () => {
-    const { goToPreviousStep, goToNextStep } = useProgressiveProfilingQuiz();
+    var _a, _b;
+    const { goToPreviousStep, goToNextStep, answers, recordAnswer, } = useProgressiveProfilingQuiz();
     const { formatMessage } = useIntl();
-    return (_jsxs(_Fragment, { children: [_jsx(BaseStep, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.INTERESTS_DECLARED, title: formatMessage(messages.title), index: 2, children: _jsx("h4", { children: formatMessage(messages.question) }) }), _jsxs(Stepper.ActionRow, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.INTERESTS_DECLARED, children: [_jsx(Button, { variant: "outline-primary", onClick: goToPreviousStep, children: formatMessage(stepMessages.backButton) }), _jsx(Button, { onClick: goToNextStep, children: formatMessage(stepMessages.nextButton) })] })] }));
+    const [inputValue, setInputValue] = useState(EMPTY_AUTOSUGGEST_VALUE);
+    const { data: skills } = useSkills();
+    const schema = buildInterestsDeclaredSchema(skills !== null && skills !== void 0 ? skills : []);
+    const interestInput = (_b = (_a = answers[schema.questionId]) === null || _a === void 0 ? void 0 : _a.selectedValues) !== null && _b !== void 0 ? _b : [];
+    const addInterest = (value) => {
+        if (interestInput.includes(value)) {
+            return;
+        }
+        recordAnswer(buildAnswerRecord(schema, [...interestInput, value], formatMessage));
+    };
+    const removeInterest = (value) => {
+        const newInterestInput = interestInput.filter(item => value !== item);
+        recordAnswer(buildAnswerRecord(schema, newInterestInput, formatMessage));
+    };
+    const handleAutosuggestChange = (value) => {
+        setInputValue(value);
+        if (value.selectionValue) {
+            addInterest(value.selectionValue);
+        }
+    };
+    const handleCheckboxTopicToggle = (event) => {
+        const { value, checked } = event.target;
+        const nextValues = checked
+            ? [...interestInput, value]
+            : interestInput.filter((interest) => interest !== value);
+        recordAnswer(buildAnswerRecord(schema, nextValues, formatMessage));
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(BaseStep, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.INTERESTS_DECLARED, title: formatMessage(messages.title), index: 2, children: [_jsx("h4", { children: formatMessage(messages.question) }), _jsx("p", { children: formatMessage(messages.subtitle) }), _jsxs("div", { className: "d-flex flex-column gap-2", children: [_jsx(InterestsDeclaredAutosuggest, { inputValue: inputValue, onChange: handleAutosuggestChange, skills: skills }), _jsx("div", { children: interestInput.map(interest => (_jsx(Chip, { iconAfter: Close, iconAfterAlt: formatMessage(messages.removeInterestIconAlt), variant: "dark", onIconAfterClick: () => removeInterest(interest), children: interest }, interest))) }), _jsx("p", { className: "font-weight-bold", children: formatMessage(messages.popularTopicsLabel) }), _jsx(Form.CheckboxSet, { name: "interests-declared-topics", isInline: true, value: interestInput, onChange: handleCheckboxTopicToggle, className: "interests-declared-checkbox-set", children: skills === null || skills === void 0 ? void 0 : skills.slice(0, 10).map(skill => (_jsx(Form.Checkbox, { value: skill.value, className: "ml-0 mr-3", children: skill.value }, skill.value))) })] })] }), _jsxs(Stepper.ActionRow, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.INTERESTS_DECLARED, children: [_jsx(Button, { variant: "outline-primary", onClick: goToPreviousStep, children: formatMessage(stepMessages.backButton) }), _jsx(Button, { onClick: goToNextStep, children: formatMessage(stepMessages.nextButton) })] })] }));
 };
 export default InterestsDeclaredStep;
 //# sourceMappingURL=index.js.map

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,2BAA2B,EAAE,MAAM,wEAAwE,CAAC;AACrH,OAAO,EAAE,gCAAgC,EAAE,MAAM,sDAAsD,CAAC;AACxG,OAAO,YAAY,MAAM,aAAa,CAAC;AACvC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,qBAAqB,GAAa,GAAG,EAAE;IAC3C,MAAM,EAAE,gBAAgB,EAAE,YAAY,EAAE,GAAG,2BAA2B,EAAE,CAAC;IACzE,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,OAAO,CACL,8BACE,KAAC,QAAQ,IACP,QAAQ,EAAE,gCAAgC,CAAC,kBAAkB,EAC7D,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpC,KAAK,EAAE,CAAC,YAER,uBACG,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAC9B,GACI,EACX,MAAC,OAAO,CAAC,SAAS,IAAC,QAAQ,EAAE,gCAAgC,CAAC,kBAAkB,aAC9E,KAAC,MAAM,IAAC,OAAO,EAAC,iBAAiB,EAAC,OAAO,EAAE,gBAAgB,YACxD,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,GAChC,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,YAAY,YAC1B,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,GAChC,IACS,IACnB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,qBAAqB,CAAC","sourcesContent":["import React from 'react';\nimport { Stepper, Button } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport BaseStep from '../BaseStep';\nimport { useProgressiveProfilingQuiz } from '@src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport stepMessages from '../messages';\nimport messages from './messages';\n\nconst InterestsDeclaredStep: React.FC = () => {\n  const { goToPreviousStep, goToNextStep } = useProgressiveProfilingQuiz();\n  const { formatMessage } = useIntl();\n\n  return (\n    <>\n      <BaseStep\n        eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.INTERESTS_DECLARED}\n        title={formatMessage(messages.title)}\n        index={2}\n      >\n        <h4>\n          {formatMessage(messages.question)}\n        </h4>\n      </BaseStep>\n      <Stepper.ActionRow eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.INTERESTS_DECLARED}>\n        <Button variant=\"outline-primary\" onClick={goToPreviousStep}>\n          {formatMessage(stepMessages.backButton)}\n        </Button>\n        <Button onClick={goToNextStep}>\n          {formatMessage(stepMessages.nextButton)}\n        </Button>\n      </Stepper.ActionRow>\n    </>\n  );\n};\n\nexport default InterestsDeclaredStep;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,2BAA2B,EAAE,MAAM,wEAAwE,CAAC;AACrH,OAAO,EAAE,gCAAgC,EAAE,MAAM,sDAAsD,CAAC;AACxG,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,4BAAkD,MAAM,gCAAgC,CAAC;AAChG,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wDAAwD,CAAC;AAC3F,OAAO,4BAA4B,MAAM,UAAU,CAAC;AAEpD,MAAM,uBAAuB,GAAqB;IAChD,gBAAgB,EAAE,EAAE;IACpB,cAAc,EAAE,EAAE;IAClB,WAAW,EAAE,EAAE;CAChB,CAAC;AAEF,OAAO,YAAY,MAAM,aAAa,CAAC;AACvC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAa,GAAG,EAAE;;IAC3C,MAAM,EACJ,gBAAgB,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,GACtD,GAAG,2BAA2B,EAAE,CAAC;IAClC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAmB,uBAAuB,CAAC,CAAC;IAExF,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;IACrC,MAAM,MAAM,GAAG,4BAA4B,CAAC,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,EAAE,CAAC,CAAC;IAC1D,MAAM,aAAa,GAAG,MAAA,MAAA,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,0CAAE,cAAc,mCAAI,EAAE,CAAC;IAEvE,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE;QACpC,IAAI,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YAClC,OAAO;QACT,CAAC;QACD,YAAY,CAAC,iBAAiB,CAAC,MAAM,EAAE,CAAC,GAAG,aAAa,EAAE,KAAK,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC;IACpF,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,EAAE;QACvC,MAAM,gBAAgB,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,CAAC;QACtE,YAAY,CAAC,iBAAiB,CAAC,MAAM,EAAE,gBAAgB,EAAE,aAAa,CAAC,CAAC,CAAC;IAC3E,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,CAAC,KAAuB,EAAE,EAAE;QAC1D,aAAa,CAAC,KAAK,CAAC,CAAC;QAErB,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;YACzB,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;QACpC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,yBAAyB,GAAG,CAAC,KAA0C,EAAE,EAAE;QAC/E,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;QAExC,MAAM,UAAU,GAAG,OAAO;YACxB,CAAC,CAAC,CAAC,GAAG,aAAa,EAAE,KAAK,CAAC;YAC3B,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC;QAC3D,YAAY,CAAC,iBAAiB,CAAC,MAAM,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;IACrE,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,MAAC,QAAQ,IACP,QAAQ,EAAE,gCAAgC,CAAC,kBAAkB,EAC7D,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpC,KAAK,EAAE,CAAC,aAER,uBAAK,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAM,EAC3C,sBAAI,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAK,EACzC,eAAK,SAAS,EAAC,0BAA0B,aACvC,KAAC,4BAA4B,IAC3B,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,uBAAuB,EACjC,MAAM,EAAE,MAAM,GACd,EACF,wBACG,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAC7B,KAAC,IAAI,IAEH,SAAS,EAAE,KAAK,EAChB,YAAY,EAAE,aAAa,CAAC,QAAQ,CAAC,qBAAqB,CAAC,EAC3D,OAAO,EAAC,MAAM,EACd,gBAAgB,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,QAAQ,CAAC,YAE/C,QAAQ,IANJ,QAAQ,CAOR,CACR,CAAC,GACE,EACN,YAAG,SAAS,EAAC,kBAAkB,YAAE,aAAa,CAAC,QAAQ,CAAC,kBAAkB,CAAC,GAAK,EAChF,KAAC,IAAI,CAAC,WAAW,IACf,IAAI,EAAC,2BAA2B,EAChC,QAAQ,QACR,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,yBAAyB,EACnC,SAAS,EAAC,iCAAiC,YAE1C,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CACjC,KAAC,IAAI,CAAC,QAAQ,IAAmB,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAC,WAAW,YACvE,KAAK,CAAC,KAAK,IADM,KAAK,CAAC,KAAK,CAEf,CACjB,CAAC,GACe,IACf,IACG,EACX,MAAC,OAAO,CAAC,SAAS,IAAC,QAAQ,EAAE,gCAAgC,CAAC,kBAAkB,aAC9E,KAAC,MAAM,IAAC,OAAO,EAAC,iBAAiB,EAAC,OAAO,EAAE,gBAAgB,YACxD,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,GAChC,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,YAAY,YAC1B,aAAa,CAAC,YAAY,CAAC,UAAU,CAAC,GAChC,IACS,IACnB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,qBAAqB,CAAC","sourcesContent":["import React, { useState } from 'react';\nimport { Stepper, Button, Form, Chip } from '@openedx/paragon';\nimport { Close } from '@openedx/paragon/icons';\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 BaseStep from '../BaseStep';\nimport InterestsDeclaredAutosuggest, { AutosuggestValue } from './InterestsDeclaredAutosuggest';\nimport { useSkills } from '@src/widgets/ProgressiveProfilingQuiz/data';\nimport { buildAnswerRecord } from '@src/widgets/ProgressiveProfilingQuiz/data/schemaUtils';\nimport buildInterestsDeclaredSchema from './schema';\n\nconst EMPTY_AUTOSUGGEST_VALUE: AutosuggestValue = {\n  userProvidedText: '',\n  selectionValue: '',\n  selectionId: '',\n};\n\nimport stepMessages from '../messages';\nimport messages from './messages';\n\nimport './index.scss';\n\nconst InterestsDeclaredStep: React.FC = () => {\n  const {\n    goToPreviousStep, goToNextStep, answers, recordAnswer,\n  } = useProgressiveProfilingQuiz();\n  const { formatMessage } = useIntl();\n\n  const [inputValue, setInputValue] = useState<AutosuggestValue>(EMPTY_AUTOSUGGEST_VALUE);\n\n  const { data: skills } = useSkills();\n  const schema = buildInterestsDeclaredSchema(skills ?? []);\n  const interestInput = answers[schema.questionId]?.selectedValues ?? [];\n\n  const addInterest = (value: string) => {\n    if (interestInput.includes(value)) {\n      return;\n    }\n    recordAnswer(buildAnswerRecord(schema, [...interestInput, value], formatMessage));\n  };\n\n  const removeInterest = (value: string) => {\n    const newInterestInput = interestInput.filter(item => value !== item);\n    recordAnswer(buildAnswerRecord(schema, newInterestInput, formatMessage));\n  };\n\n  const handleAutosuggestChange = (value: AutosuggestValue) => {\n    setInputValue(value);\n\n    if (value.selectionValue) {\n      addInterest(value.selectionValue);\n    }\n  };\n\n  const handleCheckboxTopicToggle = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const { value, checked } = event.target;\n\n    const nextValues = checked\n      ? [...interestInput, value]\n      : interestInput.filter((interest) => interest !== value);\n    recordAnswer(buildAnswerRecord(schema, nextValues, formatMessage));\n  };\n\n  return (\n    <>\n      <BaseStep\n        eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.INTERESTS_DECLARED}\n        title={formatMessage(messages.title)}\n        index={2}\n      >\n        <h4>{formatMessage(messages.question)}</h4>\n        <p>{formatMessage(messages.subtitle)}</p>\n        <div className=\"d-flex flex-column gap-2\">\n          <InterestsDeclaredAutosuggest\n            inputValue={inputValue}\n            onChange={handleAutosuggestChange}\n            skills={skills}\n          />\n          <div>\n            {interestInput.map(interest => (\n              <Chip\n                key={interest}\n                iconAfter={Close}\n                iconAfterAlt={formatMessage(messages.removeInterestIconAlt)}\n                variant=\"dark\"\n                onIconAfterClick={() => removeInterest(interest)}\n              >\n                {interest}\n              </Chip>\n            ))}\n          </div>\n          <p className=\"font-weight-bold\">{formatMessage(messages.popularTopicsLabel)}</p>\n          <Form.CheckboxSet\n            name=\"interests-declared-topics\"\n            isInline\n            value={interestInput}\n            onChange={handleCheckboxTopicToggle}\n            className=\"interests-declared-checkbox-set\"\n          >\n            {skills?.slice(0, 10).map(skill => (\n              <Form.Checkbox key={skill.value} value={skill.value} className=\"ml-0 mr-3\">\n                {skill.value}\n              </Form.Checkbox>\n            ))}\n          </Form.CheckboxSet>\n        </div>\n      </BaseStep>\n      <Stepper.ActionRow eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.INTERESTS_DECLARED}>\n        <Button variant=\"outline-primary\" onClick={goToPreviousStep}>\n          {formatMessage(stepMessages.backButton)}\n        </Button>\n        <Button onClick={goToNextStep}>\n          {formatMessage(stepMessages.nextButton)}\n        </Button>\n      </Stepper.ActionRow>\n    </>\n  );\n};\n\nexport default InterestsDeclaredStep;\n"]}

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/index.scss

@@ -0,0 +1,3 @@
+.interests-declared-checkbox-set {
+  line-height: 2;
+}

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/messages.d.ts

@@ -9,5 +9,20 @@ declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    subtitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    popularTopicsLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    removeInterestIconAlt: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export default messages;

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/messages.js

@@ -10,6 +10,21 @@ const messages = defineMessages({
         defaultMessage: 'What do you want to learn?',
         description: 'Question asked in the interests step of the progressive profiling quiz',
     },
+    subtitle: {
+        id: 'progressiveProfilingQuiz.stepper.interestsDeclared.subtitle',
+        defaultMessage: 'Choose from the list below or search for a subject or skill you want to study.',
+        description: 'Subtitle text shown below the question in the interests step of the progressive profiling quiz',
+    },
+    popularTopicsLabel: {
+        id: 'progressiveProfilingQuiz.stepper.interestsDeclared.popularTopicsLabel',
+        defaultMessage: 'Popular topics',
+        description: 'Label for the list of popular topic checkboxes in the interests step of the progressive profiling quiz',
+    },
+    removeInterestIconAlt: {
+        id: 'progressiveProfilingQuiz.stepper.interestsDeclared.removeInterestIconAlt',
+        defaultMessage: 'close',
+        description: 'Alt text for the icon on a selected interest chip that removes the interest when clicked',
+    },
 });
 export default messages;
 //# sourceMappingURL=messages.js.map

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/messages.js.map

@@ -1 +1 @@
-{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,KAAK,EAAE;QACL,EAAE,EAAE,0DAA0D;QAC9D,cAAc,EAAE,WAAW;QAC3B,WAAW,EAAE,gEAAgE;KAC9E;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,6DAA6D;QACjE,cAAc,EAAE,4BAA4B;QAC5C,WAAW,EAAE,wEAAwE;KACtF;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  title: {\n    id: 'progressiveProfilingQuiz.stepper.interestsDeclared.title',\n    defaultMessage: 'Interests',\n    description: 'Title for the interests step of the progressive profiling quiz',\n  },\n  question: {\n    id: 'progressiveProfilingQuiz.stepper.interestsDeclared.question',\n    defaultMessage: 'What do you want to learn?',\n    description: 'Question asked in the interests step of the progressive profiling quiz',\n  },\n});\n\nexport default messages;\n"]}
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,KAAK,EAAE;QACL,EAAE,EAAE,0DAA0D;QAC9D,cAAc,EAAE,WAAW;QAC3B,WAAW,EAAE,gEAAgE;KAC9E;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,6DAA6D;QACjE,cAAc,EAAE,4BAA4B;QAC5C,WAAW,EAAE,wEAAwE;KACtF;IACD,QAAQ,EAAE;QACR,EAAE,EAAE,6DAA6D;QACjE,cAAc,EAAE,gFAAgF;QAChG,WAAW,EAAE,gGAAgG;KAC9G;IACD,kBAAkB,EAAE;QAClB,EAAE,EAAE,uEAAuE;QAC3E,cAAc,EAAE,gBAAgB;QAChC,WAAW,EAAE,wGAAwG;KACtH;IACD,qBAAqB,EAAE;QACrB,EAAE,EAAE,0EAA0E;QAC9E,cAAc,EAAE,OAAO;QACvB,WAAW,EAAE,0FAA0F;KACxG;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  title: {\n    id: 'progressiveProfilingQuiz.stepper.interestsDeclared.title',\n    defaultMessage: 'Interests',\n    description: 'Title for the interests step of the progressive profiling quiz',\n  },\n  question: {\n    id: 'progressiveProfilingQuiz.stepper.interestsDeclared.question',\n    defaultMessage: 'What do you want to learn?',\n    description: 'Question asked in the interests step of the progressive profiling quiz',\n  },\n  subtitle: {\n    id: 'progressiveProfilingQuiz.stepper.interestsDeclared.subtitle',\n    defaultMessage: 'Choose from the list below or search for a subject or skill you want to study.',\n    description: 'Subtitle text shown below the question in the interests step of the progressive profiling quiz',\n  },\n  popularTopicsLabel: {\n    id: 'progressiveProfilingQuiz.stepper.interestsDeclared.popularTopicsLabel',\n    defaultMessage: 'Popular topics',\n    description: 'Label for the list of popular topic checkboxes in the interests step of the progressive profiling quiz',\n  },\n  removeInterestIconAlt: {\n    id: 'progressiveProfilingQuiz.stepper.interestsDeclared.removeInterestIconAlt',\n    defaultMessage: 'close',\n    description: 'Alt text for the icon on a selected interest chip that removes the interest when clicked',\n  },\n});\n\nexport default messages;\n"]}

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/schema.d.ts

@@ -0,0 +1,18 @@
+import { QuizQuestionSchema, SkillWithCount } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/types';
+export declare const VERSION = "1.0.0";
+/**
+ * IF YOU CHANGE THE SCHEMA, MAKE SURE TO UPDATE THE VERSION AS WELL
+ * For typos and small adjustments, use patch version.
+ * For any other changes, use minor versions unless it's been clearly indicated otherwise.
+ *
+ * Unlike the other steps, this question's options aren't static copy — they're skill values
+ * fetched from Algolia, so the schema can't be built until those skills are available. Build it
+ * from whatever skills were fetched when the user reached this step, so the persisted answer
+ * stays a faithful record of what was actually offered.
+ *
+ * Each option's `message` is a synthetic descriptor rather than a translatable one from
+ * `messages.ts` — skill names are data, not copy, so there's nothing to translate. `formatMessage`
+ * simply falls back to `defaultMessage` for an id with no matching translation.
+ */
+declare const buildInterestsDeclaredSchema: (skills: SkillWithCount[]) => QuizQuestionSchema;
+export default buildInterestsDeclaredSchema;

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/schema.js

@@ -0,0 +1,31 @@
+import { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '../../../../../../widgets/ProgressiveProfilingQuiz/data/constants';
+import messages from './messages';
+export const VERSION = '1.0.0';
+/**
+ * IF YOU CHANGE THE SCHEMA, MAKE SURE TO UPDATE THE VERSION AS WELL
+ * For typos and small adjustments, use patch version.
+ * For any other changes, use minor versions unless it's been clearly indicated otherwise.
+ *
+ * Unlike the other steps, this question's options aren't static copy — they're skill values
+ * fetched from Algolia, so the schema can't be built until those skills are available. Build it
+ * from whatever skills were fetched when the user reached this step, so the persisted answer
+ * stays a faithful record of what was actually offered.
+ *
+ * Each option's `message` is a synthetic descriptor rather than a translatable one from
+ * `messages.ts` — skill names are data, not copy, so there's nothing to translate. `formatMessage`
+ * simply falls back to `defaultMessage` for an id with no matching translation.
+ */
+const buildInterestsDeclaredSchema = (skills) => ({
+    questionId: PROGRESSIVE_PROFILING_QUIZ_STEPS.INTERESTS_DECLARED,
+    version: VERSION,
+    question: messages.question,
+    options: skills.map(skill => ({
+        value: skill.value,
+        message: {
+            id: `progressiveProfilingQuiz.stepper.interestsDeclared.skillOption.${skill.value}`,
+            defaultMessage: skill.value,
+        },
+    })),
+});
+export default buildInterestsDeclaredSchema;
+//# sourceMappingURL=schema.js.map

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-interests-declared/schema.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gCAAgC,EAAE,MAAM,sDAAsD,CAAC;AACxG,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC;AAE/B;;;;;;;;;;;;;GAaG;AACH,MAAM,4BAA4B,GAAG,CAAC,MAAwB,EAAsB,EAAE,CAAC,CAAC;IACtF,UAAU,EAAE,gCAAgC,CAAC,kBAAkB;IAC/D,OAAO,EAAE,OAAO;IAChB,QAAQ,EAAE,QAAQ,CAAC,QAAQ;IAC3B,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAC5B,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,OAAO,EAAE;YACP,EAAE,EAAE,kEAAkE,KAAK,CAAC,KAAK,EAAE;YACnF,cAAc,EAAE,KAAK,CAAC,KAAK;SAC5B;KACF,CAAC,CAAC;CACJ,CAAC,CAAC;AAEH,eAAe,4BAA4B,CAAC","sourcesContent":["import { QuizQuestionSchema, SkillWithCount } from '@src/widgets/ProgressiveProfilingQuiz/data/types';\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport messages from './messages';\n\nexport const VERSION = '1.0.0';\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 * Unlike the other steps, this question's options aren't static copy — they're skill values\n * fetched from Algolia, so the schema can't be built until those skills are available. Build it\n * from whatever skills were fetched when the user reached this step, so the persisted answer\n * stays a faithful record of what was actually offered.\n *\n * Each option's `message` is a synthetic descriptor rather than a translatable one from\n * `messages.ts` — skill names are data, not copy, so there's nothing to translate. `formatMessage`\n * simply falls back to `defaultMessage` for an id with no matching translation.\n */\nconst buildInterestsDeclaredSchema = (skills: SkillWithCount[]): QuizQuestionSchema => ({\n  questionId: PROGRESSIVE_PROFILING_QUIZ_STEPS.INTERESTS_DECLARED,\n  version: VERSION,\n  question: messages.question,\n  options: skills.map(skill => ({\n    value: skill.value,\n    message: {\n      id: `progressiveProfilingQuiz.stepper.interestsDeclared.skillOption.${skill.value}`,\n      defaultMessage: skill.value,\n    },\n  })),\n});\n\nexport default buildInterestsDeclaredSchema;\n"]}

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/index.js

@@ -23,7 +23,7 @@ const LearningGoalStep = () => {
         }
         (_a = event.currentTarget.querySelector('input[type="radio"]')) === null || _a === void 0 ? void 0 : _a.click();
     };
-    return (_jsxs(_Fragment, { children: [_jsx(BaseStep, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_GOAL, title: formatMessage(messages.title), index: 0, optionalHeaderText: formatMessage(messages.headerText), children: _jsxs(Form.Group, { className: "mb-0", children: [_jsx(Form.Label, { className: "h4", children: formatMessage(messages.question) }), _jsx("p", { children: formatMessage(messages.hint) }), _jsx(Form.RadioSet, { name: schema.questionId, value: selectedValue, onChange: handleChange, className: "gap-4", children: schema.options.map(option => (_jsx("div", { className: "learning-goal-radio d-flex bg-light-100 px-3 py-3.5 mt-0", onClick: handleOptionClick, children: _jsx(Form.Radio, { value: option.value, children: formatMessage(option.message) }) }, option.value))) })] }) }), _jsxs(Stepper.ActionRow, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_GOAL, children: [_jsx(Stepper.ActionRow.Spacer, {}), _jsx(Button, { variant: "outline-primary", onClick: goToNextStep, disabled: !selectedValue, children: formatMessage(messages.continueButton) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(BaseStep, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_GOAL, title: formatMessage(messages.title), index: 0, optionalHeaderText: formatMessage(messages.headerText), children: _jsxs(Form.Group, { className: "mb-0", children: [_jsx(Form.Label, { className: "h4", children: formatMessage(messages.question) }), _jsx("p", { children: "Select one" }), _jsx(Form.RadioSet, { name: schema.questionId, value: selectedValue, onChange: handleChange, className: "gap-4", children: schema.options.map(option => (_jsx("div", { className: "learning-goal-radio d-flex bg-light-100 px-3 py-3.5 mt-0", onClick: handleOptionClick, children: _jsx(Form.Radio, { value: option.value, children: formatMessage(option.message) }) }, option.value))) })] }) }), _jsxs(Stepper.ActionRow, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_GOAL, children: [_jsx(Stepper.ActionRow.Spacer, {}), _jsx(Button, { variant: "outline-primary", onClick: goToNextStep, disabled: !selectedValue, children: formatMessage(messages.continueButton) })] })] }));
 };
 export default LearningGoalStep;
 //# sourceMappingURL=index.js.map

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/index.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,OAAO,EAAE,MAAM,EAAE,IAAI,GACtB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,2BAA2B,EAAE,MAAM,wEAAwE,CAAC;AACrH,OAAO,EAAE,gCAAgC,EAAE,MAAM,sDAAsD,CAAC;AACxG,OAAO,EAAE,iBAAiB,EAAE,MAAM,wDAAwD,CAAC;AAC3F,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,cAAc,CAAC;AAEtB,MAAM,gBAAgB,GAAa,GAAG,EAAE;;IACtC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,2BAA2B,EAAE,CAAC;IAC9E,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,aAAa,GAAG,MAAA,MAAA,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,0CAAE,cAAc,CAAC,CAAC,CAAC,mCAAI,EAAE,CAAC;IAE1E,MAAM,YAAY,GAAG,CAAC,KAA0C,EAAE,EAAE;QAClE,YAAY,CAAC,iBAAiB,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC;IAC/E,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAAuC,EAAE,EAAE;;QACpE,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa,EAAE,CAAC;YACzC,OAAO;QACT,CAAC;QACD,MAAA,KAAK,CAAC,aAAa,CAAC,aAAa,CAAmB,qBAAqB,CAAC,0CAAE,KAAK,EAAE,CAAC;IACtF,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,QAAQ,IACP,QAAQ,EAAE,gCAAgC,CAAC,aAAa,EACxD,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpC,KAAK,EAAE,CAAC,EACR,kBAAkB,EAAE,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,YAEtD,MAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,MAAM,aAC1B,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,IAAI,YACvB,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,GACtB,EACb,sBAAI,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAK,EACrC,KAAC,IAAI,CAAC,QAAQ,IACZ,IAAI,EAAE,MAAM,CAAC,UAAU,EACvB,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAC,OAAO,YAEhB,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC5B,cAEE,SAAS,EAAC,0DAA0D,EACpE,OAAO,EAAE,iBAAiB,YAE1B,KAAC,IAAI,CAAC,KAAK,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,YAC5B,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,GACnB,IANR,MAAM,CAAC,KAAK,CAOb,CACP,CAAC,GACY,IACL,GACJ,EACX,MAAC,OAAO,CAAC,SAAS,IAAC,QAAQ,EAAE,gCAAgC,CAAC,aAAa,aACzE,KAAC,OAAO,CAAC,SAAS,CAAC,MAAM,KAAG,EAC5B,KAAC,MAAM,IAAC,OAAO,EAAC,iBAAiB,EAAC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC,aAAa,YAC9E,aAAa,CAAC,QAAQ,CAAC,cAAc,CAAC,GAChC,IACS,IACnB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import React from 'react';\nimport {\n  Stepper, Button, Form,\n} from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport BaseStep from '../BaseStep';\nimport { useProgressiveProfilingQuiz } from '@src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport { buildAnswerRecord } from '@src/widgets/ProgressiveProfilingQuiz/data/schemaUtils';\nimport messages from './messages';\nimport schema from './schema';\n\nimport './index.scss';\n\nconst LearningGoalStep: React.FC = () => {\n  const { goToNextStep, answers, recordAnswer } = useProgressiveProfilingQuiz();\n  const { formatMessage } = useIntl();\n\n  const selectedValue = answers[schema.questionId]?.selectedValues[0] ?? '';\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    recordAnswer(buildAnswerRecord(schema, [event.target.value], formatMessage));\n  };\n\n  const handleOptionClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget) {\n      return;\n    }\n    event.currentTarget.querySelector<HTMLInputElement>('input[type=\"radio\"]')?.click();\n  };\n\n  return (\n    <>\n      <BaseStep\n        eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_GOAL}\n        title={formatMessage(messages.title)}\n        index={0}\n        optionalHeaderText={formatMessage(messages.headerText)}\n      >\n        <Form.Group className=\"mb-0\">\n          <Form.Label className=\"h4\">\n            {formatMessage(messages.question)}\n          </Form.Label>\n          <p>{formatMessage(messages.hint)}</p>\n          <Form.RadioSet\n            name={schema.questionId}\n            value={selectedValue}\n            onChange={handleChange}\n            className=\"gap-4\"\n          >\n            {schema.options.map(option => (\n              <div\n                key={option.value}\n                className=\"learning-goal-radio d-flex bg-light-100 px-3 py-3.5 mt-0\"\n                onClick={handleOptionClick}\n              >\n                <Form.Radio value={option.value}>\n                  {formatMessage(option.message)}\n                </Form.Radio>\n              </div>\n            ))}\n          </Form.RadioSet>\n        </Form.Group>\n      </BaseStep>\n      <Stepper.ActionRow eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_GOAL}>\n        <Stepper.ActionRow.Spacer />\n        <Button variant=\"outline-primary\" onClick={goToNextStep} disabled={!selectedValue}>\n          {formatMessage(messages.continueButton)}\n        </Button>\n      </Stepper.ActionRow>\n    </>\n  );\n};\n\nexport default LearningGoalStep;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-goal/index.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,OAAO,EAAE,MAAM,EAAE,IAAI,GACtB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,2BAA2B,EAAE,MAAM,wEAAwE,CAAC;AACrH,OAAO,EAAE,gCAAgC,EAAE,MAAM,sDAAsD,CAAC;AACxG,OAAO,EAAE,iBAAiB,EAAE,MAAM,wDAAwD,CAAC;AAC3F,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,cAAc,CAAC;AAEtB,MAAM,gBAAgB,GAAa,GAAG,EAAE;;IACtC,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,2BAA2B,EAAE,CAAC;IAC9E,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,aAAa,GAAG,MAAA,MAAA,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,0CAAE,cAAc,CAAC,CAAC,CAAC,mCAAI,EAAE,CAAC;IAE1E,MAAM,YAAY,GAAG,CAAC,KAA0C,EAAE,EAAE;QAClE,YAAY,CAAC,iBAAiB,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC;IAC/E,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAAuC,EAAE,EAAE;;QACpE,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa,EAAE,CAAC;YACzC,OAAO;QACT,CAAC;QACD,MAAA,KAAK,CAAC,aAAa,CAAC,aAAa,CAAmB,qBAAqB,CAAC,0CAAE,KAAK,EAAE,CAAC;IACtF,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,QAAQ,IACP,QAAQ,EAAE,gCAAgC,CAAC,aAAa,EACxD,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpC,KAAK,EAAE,CAAC,EACR,kBAAkB,EAAE,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,YAEtD,MAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,MAAM,aAC1B,KAAC,IAAI,CAAC,KAAK,IAAC,SAAS,EAAC,IAAI,YACvB,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC,GACtB,EACb,qCAAiB,EACjB,KAAC,IAAI,CAAC,QAAQ,IACZ,IAAI,EAAE,MAAM,CAAC,UAAU,EACvB,KAAK,EAAE,aAAa,EACpB,QAAQ,EAAE,YAAY,EACtB,SAAS,EAAC,OAAO,YAEhB,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAC5B,cAEE,SAAS,EAAC,0DAA0D,EACpE,OAAO,EAAE,iBAAiB,YAE1B,KAAC,IAAI,CAAC,KAAK,IAAC,KAAK,EAAE,MAAM,CAAC,KAAK,YAC5B,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,GACnB,IANR,MAAM,CAAC,KAAK,CAOb,CACP,CAAC,GACY,IACL,GACJ,EACX,MAAC,OAAO,CAAC,SAAS,IAAC,QAAQ,EAAE,gCAAgC,CAAC,aAAa,aACzE,KAAC,OAAO,CAAC,SAAS,CAAC,MAAM,KAAG,EAC5B,KAAC,MAAM,IAAC,OAAO,EAAC,iBAAiB,EAAC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC,aAAa,YAC9E,aAAa,CAAC,QAAQ,CAAC,cAAc,CAAC,GAChC,IACS,IACnB,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import React from 'react';\nimport {\n  Stepper, Button, Form,\n} from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport BaseStep from '../BaseStep';\nimport { useProgressiveProfilingQuiz } from '@src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport { buildAnswerRecord } from '@src/widgets/ProgressiveProfilingQuiz/data/schemaUtils';\nimport messages from './messages';\nimport schema from './schema';\n\nimport './index.scss';\n\nconst LearningGoalStep: React.FC = () => {\n  const { goToNextStep, answers, recordAnswer } = useProgressiveProfilingQuiz();\n  const { formatMessage } = useIntl();\n\n  const selectedValue = answers[schema.questionId]?.selectedValues[0] ?? '';\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    recordAnswer(buildAnswerRecord(schema, [event.target.value], formatMessage));\n  };\n\n  const handleOptionClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget) {\n      return;\n    }\n    event.currentTarget.querySelector<HTMLInputElement>('input[type=\"radio\"]')?.click();\n  };\n\n  return (\n    <>\n      <BaseStep\n        eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_GOAL}\n        title={formatMessage(messages.title)}\n        index={0}\n        optionalHeaderText={formatMessage(messages.headerText)}\n      >\n        <Form.Group className=\"mb-0\">\n          <Form.Label className=\"h4\">\n            {formatMessage(messages.question)}\n          </Form.Label>\n          <p>Select one</p>\n          <Form.RadioSet\n            name={schema.questionId}\n            value={selectedValue}\n            onChange={handleChange}\n            className=\"gap-4\"\n          >\n            {schema.options.map(option => (\n              <div\n                key={option.value}\n                className=\"learning-goal-radio d-flex bg-light-100 px-3 py-3.5 mt-0\"\n                onClick={handleOptionClick}\n              >\n                <Form.Radio value={option.value}>\n                  {formatMessage(option.message)}\n                </Form.Radio>\n              </div>\n            ))}\n          </Form.RadioSet>\n        </Form.Group>\n      </BaseStep>\n      <Stepper.ActionRow eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_GOAL}>\n        <Stepper.ActionRow.Spacer />\n        <Button variant=\"outline-primary\" onClick={goToNextStep} disabled={!selectedValue}>\n          {formatMessage(messages.continueButton)}\n        </Button>\n      </Stepper.ActionRow>\n    </>\n  );\n};\n\nexport default LearningGoalStep;\n"]}

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/index.js

@@ -28,7 +28,7 @@ const LearningMotivationStep = () => {
         }
         (_a = event.currentTarget.querySelector('input[type="checkbox"]')) === null || _a === void 0 ? void 0 : _a.click();
     };
-    return (_jsxs(_Fragment, { children: [_jsx(BaseStep, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_MOTIVATION, title: formatMessage(messages.title), index: 1, children: _jsxs(Form.Group, { className: "mb-0", children: [_jsx(Form.Label, { className: "h4", children: formatMessage(messages.question) }), _jsx("p", { children: formatMessage(messages.hint) }), _jsx(Form.CheckboxSet, { name: schema.questionId, value: selectedValues, onChange: handleChange, className: "gap-4", children: schema.options.map(option => (_jsx("div", { className: "learning-motivation-checkbox d-flex bg-light-100 px-3 py-3.5 mt-0", onClick: handleOptionClick, children: _jsx(Form.Checkbox, { value: option.value, children: formatMessage(option.message) }) }, option.value))) })] }) }), _jsxs(Stepper.ActionRow, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_MOTIVATION, children: [_jsx(Button, { variant: "outline-primary", onClick: goToPreviousStep, children: formatMessage(stepMessages.backButton) }), _jsx(Button, { onClick: goToNextStep, disabled: selectedValues.length === 0, className: "ml-3", children: formatMessage(stepMessages.nextButton) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(BaseStep, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_MOTIVATION, title: formatMessage(messages.title), index: 1, children: _jsxs(Form.Group, { className: "mb-0", children: [_jsx(Form.Label, { className: "h4", children: formatMessage(messages.question) }), _jsx("p", { children: "Select one or more" }), _jsx(Form.CheckboxSet, { name: schema.questionId, value: selectedValues, onChange: handleChange, className: "gap-4", children: schema.options.map(option => (_jsx("div", { className: "learning-motivation-checkbox d-flex bg-light-100 px-3 py-3.5 mt-0", onClick: handleOptionClick, children: _jsx(Form.Checkbox, { value: option.value, children: formatMessage(option.message) }) }, option.value))) })] }) }), _jsxs(Stepper.ActionRow, { eventKey: PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_MOTIVATION, children: [_jsx(Button, { variant: "outline-primary", onClick: goToPreviousStep, children: formatMessage(stepMessages.backButton) }), _jsx(Button, { onClick: goToNextStep, disabled: selectedValues.length === 0, className: "ml-3", children: formatMessage(stepMessages.nextButton) })] })] }));
 };
 export default LearningMotivationStep;
 //# sourceMappingURL=index.js.map

package/dist/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Stepper, Button, Form } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport BaseStep from '../BaseStep';\nimport { useProgressiveProfilingQuiz } from '@src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport { buildAnswerRecord } from '@src/widgets/ProgressiveProfilingQuiz/data/schemaUtils';\nimport stepMessages from '../messages';\nimport messages from './messages';\nimport schema from './schema';\n\nimport './index.scss';\n\nconst LearningMotivationStep: React.FC = () => {\n  const {\n    goToPreviousStep, goToNextStep, answers, recordAnswer,\n  } = useProgressiveProfilingQuiz();\n  const { formatMessage } = useIntl();\n\n  const selectedValues = answers[schema.questionId]?.selectedValues ?? [];\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const { checked, value } = event.target;\n    const nextValues = checked\n      ? [...selectedValues, value]\n      : selectedValues.filter(selectedValue => selectedValue !== value);\n    recordAnswer(buildAnswerRecord(schema, nextValues, formatMessage));\n  };\n\n  const handleOptionClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget) {\n      return;\n    }\n    event.currentTarget.querySelector<HTMLInputElement>('input[type=\"checkbox\"]')?.click();\n  };\n\n  return (\n    <>\n      <BaseStep\n        eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_MOTIVATION}\n        title={formatMessage(messages.title)}\n        index={1}\n      >\n        <Form.Group className=\"mb-0\">\n          <Form.Label className=\"h4\">\n            {formatMessage(messages.question)}\n          </Form.Label>\n          <p>{formatMessage(messages.hint)}</p>\n          <Form.CheckboxSet\n            name={schema.questionId}\n            value={selectedValues}\n            onChange={handleChange}\n            className=\"gap-4\"\n          >\n            {schema.options.map(option => (\n              <div\n                key={option.value}\n                className=\"learning-motivation-checkbox d-flex bg-light-100 px-3 py-3.5 mt-0\"\n                onClick={handleOptionClick}\n              >\n                <Form.Checkbox value={option.value}>\n                  {formatMessage(option.message)}\n                </Form.Checkbox>\n              </div>\n            ))}\n          </Form.CheckboxSet>\n        </Form.Group>\n      </BaseStep>\n      <Stepper.ActionRow eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_MOTIVATION}>\n        <Button variant=\"outline-primary\" onClick={goToPreviousStep}>\n          {formatMessage(stepMessages.backButton)}\n        </Button>\n        <Button onClick={goToNextStep} disabled={selectedValues.length === 0} className=\"ml-3\">\n          {formatMessage(stepMessages.nextButton)}\n        </Button>\n      </Stepper.ActionRow>\n    </>\n  );\n};\n\nexport default LearningMotivationStep;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/widgets/ProgressiveProfilingQuiz/modal/stepper/steps/step-learning-motivation/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Stepper, Button, Form } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport BaseStep from '../BaseStep';\nimport { useProgressiveProfilingQuiz } from '@src/widgets/ProgressiveProfilingQuiz/ProgressiveProfilingQuizProvider';\nimport { PROGRESSIVE_PROFILING_QUIZ_STEPS } from '@src/widgets/ProgressiveProfilingQuiz/data/constants';\nimport { buildAnswerRecord } from '@src/widgets/ProgressiveProfilingQuiz/data/schemaUtils';\nimport stepMessages from '../messages';\nimport messages from './messages';\nimport schema from './schema';\n\nimport './index.scss';\n\nconst LearningMotivationStep: React.FC = () => {\n  const {\n    goToPreviousStep, goToNextStep, answers, recordAnswer,\n  } = useProgressiveProfilingQuiz();\n  const { formatMessage } = useIntl();\n\n  const selectedValues = answers[schema.questionId]?.selectedValues ?? [];\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const { checked, value } = event.target;\n    const nextValues = checked\n      ? [...selectedValues, value]\n      : selectedValues.filter(selectedValue => selectedValue !== value);\n    recordAnswer(buildAnswerRecord(schema, nextValues, formatMessage));\n  };\n\n  const handleOptionClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.target !== event.currentTarget) {\n      return;\n    }\n    event.currentTarget.querySelector<HTMLInputElement>('input[type=\"checkbox\"]')?.click();\n  };\n\n  return (\n    <>\n      <BaseStep\n        eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_MOTIVATION}\n        title={formatMessage(messages.title)}\n        index={1}\n      >\n        <Form.Group className=\"mb-0\">\n          <Form.Label className=\"h4\">\n            {formatMessage(messages.question)}\n          </Form.Label>\n          <p>Select one or more</p>\n          <Form.CheckboxSet\n            name={schema.questionId}\n            value={selectedValues}\n            onChange={handleChange}\n            className=\"gap-4\"\n          >\n            {schema.options.map(option => (\n              <div\n                key={option.value}\n                className=\"learning-motivation-checkbox d-flex bg-light-100 px-3 py-3.5 mt-0\"\n                onClick={handleOptionClick}\n              >\n                <Form.Checkbox value={option.value}>\n                  {formatMessage(option.message)}\n                </Form.Checkbox>\n              </div>\n            ))}\n          </Form.CheckboxSet>\n        </Form.Group>\n      </BaseStep>\n      <Stepper.ActionRow eventKey={PROGRESSIVE_PROFILING_QUIZ_STEPS.LEARNING_MOTIVATION}>\n        <Button variant=\"outline-primary\" onClick={goToPreviousStep}>\n          {formatMessage(stepMessages.backButton)}\n        </Button>\n        <Button onClick={goToNextStep} disabled={selectedValues.length === 0} className=\"ml-3\">\n          {formatMessage(stepMessages.nextButton)}\n        </Button>\n      </Stepper.ActionRow>\n    </>\n  );\n};\n\nexport default LearningMotivationStep;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edx/frontend-app-subscription-learner-dashboard",
-  "version": "1.38.4",
+  "version": "1.39.0",
   "description": "",
   "repository": {
     "type": "git",