@edx/frontend-app-subscription-learner-dashboard 1.56.0 → 1.58.0

package/dist/containers/ProgramDashboard/ProgramProgress/CompletedTabData/CompletedRecordBanner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/containers/ProgramDashboard/ProgramProgress/CompletedTabData/CompletedRecordBanner/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,qBAAqB,GAAO,GAAG,EAAE;;IAC5C,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,iBAAiB,GAAG,MAAA,YAAY,CAAC,KAAK,CAAC,CAAC,mBAAmB,mCAAI,0BAA0B,CAAC;IAEhG,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAC,iCAAiC,iBAAa,uBAAuB,YACnF,MAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAC,2BAA2B,aACjD,KAAC,GAAG,cACF,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,aACT,aAAI,SAAS,EAAC,uBAAuB,YAAE,aAAa,CAAC,QAAQ,CAAC,mCAAmC,CAAC,GAAM,EACxG,cAAK,SAAS,EAAC,YAAY,YACxB,aAAa,CAAC,QAAQ,CAAC,yCAAyC,CAAC,GAC9D,IACF,GACF,EAEN,KAAC,GAAG,IAAC,SAAS,EAAC,MAAM,YACnB,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,4BAA4B,aACjD,MAAC,MAAM,IAAC,OAAO,EAAC,iBAAiB,EAAC,SAAS,EAAC,gCAAgC,EAAC,EAAE,EAAC,GAAG,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,EAAC,IAAI,EAAC,kGAAkG,aAClO,aAAa,CAAC,QAAQ,CAAC,8CAA8C,CAAC,EACvE,KAAC,IAAI,IAAC,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,IAClC,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,EAAE,EAAC,GAAG,EAAC,MAAM,EAAC,QAAQ,EAAC,GAAG,EAAC,qBAAqB,EAAC,IAAI,EAAE,GAAG,iBAAiB,EAAE,YAAG,aAAa,CAAC,QAAQ,CAAC,oDAAoD,CAAC,GAAU,IAC5L,GACF,IACO,GACV,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useIntl, getAppConfig } from '@openedx/frontend-base';\nimport { Card, Button, Row, Col, Icon } from '@openedx/paragon';\nimport { OpenInNew } from '@openedx/paragon/icons';\n\nimport { appId } from '@src/constants';\nimport messages from '../../messages';\nimport './index.scss';\n\nexport const CompletedRecordBanner: FC = () => {\n  const { formatMessage } = useIntl();\n  const programRecordsUrl = getAppConfig(appId).PROGRAM_RECORDS_URL ?? 'https://records.edx.org/';\n\n  return (\n    <Card className=\"mb-3 mt-4 completed-banner-card\" data-testid=\"completed-banner-card\">\n      <Card.Section className=\"pt-3 pb-3 px-4 border-top\">\n        <Row>\n          <Col xs={12}>\n            <h5 className=\"mb-1 font-weight-bold\">{formatMessage(messages.programProgressCompletedBannerTitle)}</h5>\n            <div className=\"text-muted\">\n              {formatMessage(messages.programProgressCompletedBannerDescription)}\n            </div>\n          </Col>\n        </Row>\n\n        <Row className=\"mt-3\">\n          <Col xs={12} className=\"d-flex justify-content-end\">\n            <Button variant=\"outline-primary\" className=\"mr-2 d-flex align-items-center\" as=\"a\" target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://help.edx.org/edxlearner/s/article/Viewing-and-sharing-your-program-record?language=en_US\">\n              {formatMessage(messages.programProgressCompletedBannerHelpCenterButton)}\n              <Icon src={OpenInNew} className=\"ml-1\" />\n            </Button>\n            <Button variant=\"primary\" as=\"a\" target=\"_blank\" rel=\"noopener noreferrer\" href={`${programRecordsUrl}`}>{formatMessage(messages.programProgressCompletedBannerMyProgramRecordsButton)}</Button>\n          </Col>\n        </Row>\n      </Card.Section>\n    </Card>\n  );\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/containers/ProgramDashboard/ProgramProgress/CompletedTabData/CompletedRecordBanner/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,2CAA2C,EAAE,iDAAiD,EAAE,MAAM,wCAAwC,CAAC;AAExJ,MAAM,CAAC,MAAM,qBAAqB,GAAO,GAAG,EAAE;;IAC5C,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,iBAAiB,GAAG,MAAA,YAAY,CAAC,KAAK,CAAC,CAAC,mBAAmB,mCAAI,0BAA0B,CAAC;IAChG,MAAM,aAAa,GAAG,kGAAkG,CAAC;IAEzH,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAC,iCAAiC,iBAAa,uBAAuB,YACnF,MAAC,IAAI,CAAC,OAAO,IAAC,SAAS,EAAC,2BAA2B,aACjD,KAAC,GAAG,cACF,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,aACT,aAAI,SAAS,EAAC,uBAAuB,YAAE,aAAa,CAAC,QAAQ,CAAC,mCAAmC,CAAC,GAAM,EACxG,cAAK,SAAS,EAAC,YAAY,YACxB,aAAa,CAAC,QAAQ,CAAC,yCAAyC,CAAC,GAC9D,IACF,GACF,EAEN,KAAC,GAAG,IAAC,SAAS,EAAC,MAAM,YACnB,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,4BAA4B,aACjD,MAAC,MAAM,IACL,OAAO,EAAC,iBAAiB,EACzB,SAAS,EAAC,gCAAgC,EAC1C,EAAE,EAAC,GAAG,EACN,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,IAAI,EAAE,aAAa,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,2CAA2C,CAAC,EAAE,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC,CAAC,WAAW,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,8CAA8C,CAAC,EAAE,CAAC,aAE/P,aAAa,CAAC,QAAQ,CAAC,8CAA8C,CAAC,EACvE,KAAC,IAAI,IAAC,GAAG,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,IAClC,EACT,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,SAAS,EAAC,2BAA2B,EACrC,EAAE,EAAC,GAAG,EACN,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,IAAI,EAAE,GAAG,iBAAiB,EAAE,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,iDAAiD,CAAC,EAAE,SAAS,EAAE,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC,CAAC,WAAW,EAAE,EAAE,eAAe,EAAE,iBAAiB,EAAE,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,oDAAoD,CAAC,EAAE,CAAC,YAE/Q,aAAa,CAAC,QAAQ,CAAC,oDAAoD,CAAC,GACtE,IACL,GACF,IACO,GACV,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useIntl, getAppConfig } from '@openedx/frontend-base';\nimport { Card, Button, Row, Col, Icon } from '@openedx/paragon';\nimport { OpenInNew } from '@openedx/paragon/icons';\n\nimport { appId } from '@src/constants';\nimport messages from '../../messages';\nimport './index.scss';\nimport { trackProgramProgressHelpCenterButtonClicked, trackProgramProgressMyProgramRecordsButtonClicked } from '@src/tracking/trackers/programProgress';\n\nexport const CompletedRecordBanner: FC = () => {\n  const { formatMessage } = useIntl();\n  const programRecordsUrl = getAppConfig(appId).PROGRAM_RECORDS_URL ?? 'https://records.edx.org/';\n  const helpCenterUrl = 'https://help.edx.org/edxlearner/s/article/Viewing-and-sharing-your-program-record?language=en_US';\n\n  return (\n    <Card className=\"mb-3 mt-4 completed-banner-card\" data-testid=\"completed-banner-card\">\n      <Card.Section className=\"pt-3 pb-3 px-4 border-top\">\n        <Row>\n          <Col xs={12}>\n            <h5 className=\"mb-1 font-weight-bold\">{formatMessage(messages.programProgressCompletedBannerTitle)}</h5>\n            <div className=\"text-muted\">\n              {formatMessage(messages.programProgressCompletedBannerDescription)}\n            </div>\n          </Col>\n        </Row>\n\n        <Row className=\"mt-3\">\n          <Col xs={12} className=\"d-flex justify-content-end\">\n            <Button\n              variant=\"outline-primary\"\n              className=\"mr-2 d-flex align-items-center\"\n              as=\"a\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              href={helpCenterUrl}\n              onClick={() => trackProgramProgressHelpCenterButtonClicked({ tabSource: formatMessage(messages.programProgressCompletedTab).toLowerCase(), redirection_url: helpCenterUrl, buttonText: formatMessage(messages.programProgressCompletedBannerHelpCenterButton) })}\n            >\n              {formatMessage(messages.programProgressCompletedBannerHelpCenterButton)}\n              <Icon src={OpenInNew} className=\"ml-1\" />\n            </Button>\n            <Button\n              variant=\"primary\"\n              className=\"d-flex align-items-center\"\n              as=\"a\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              href={`${programRecordsUrl}`}\n              onClick={() => trackProgramProgressMyProgramRecordsButtonClicked({ tabSource: formatMessage(messages.programProgressCompletedTab).toLowerCase(), redirection_url: programRecordsUrl, buttonText: formatMessage(messages.programProgressCompletedBannerMyProgramRecordsButton) })}\n            >\n              {formatMessage(messages.programProgressCompletedBannerMyProgramRecordsButton)}\n            </Button>\n          </Col>\n        </Row>\n      </Card.Section>\n    </Card>\n  );\n};\n"]}

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

@@ -12,6 +12,7 @@ import { ProgramProgressTabs } from './ProgramProgressTabs';
 import { ProgramProgressSidebar } from './ProgramProgressSidebar';
 import { subscriptionDashboardUrlPath } from '../../../constants';
 import messages from './messages';
+import { trackProgramProgressReturntoDashboardLinkClicked } from '../../../tracking/trackers/programProgress';
 const ProgramProgress = () => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { programProgressData, isLoading, error } = useProgressData();
@@ -38,7 +39,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, 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 }) })] })] })] }));
+    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", onClick: () => trackProgramProgressReturntoDashboardLinkClicked({ linkPath: subscriptionDashboardUrlPath }), 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":"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","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"]}
+{"version":3,"file":"ProgramProgress.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramProgress/ProgramProgress.tsx"],"names":[],"mappings":"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","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';\nimport { trackProgramProgressReturntoDashboardLinkClicked } from '@src/tracking/trackers/programProgress';\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\" onClick={() => trackProgramProgressReturntoDashboardLinkClicked({ linkPath: subscriptionDashboardUrlPath })}>\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/ProgressCard/index.js

@@ -42,9 +42,9 @@ export const ProgressCard = ({ progressCardData, isLoading, tabType }) => {
     }
     // using expired key from course object to determine if the course is expired as per condition on confluence and learners dashboard code.
     const canUpgrade = Boolean(upgradeUrl) && !expired;
-    return (_jsx(Card, { className: "progress-card mb-3", "data-testid": "progress-card", isLoading: isLoading, children: _jsxs(Card.Section, { className: "pt-3 pb-2 px-4", children: [_jsxs(Row, { className: "mb-2", children: [_jsxs(Col, { xs: 12, children: [isPathwaysTab ? (_jsx("h5", { className: "mb-1 font-weight-bold card-title", children: title })) : (_jsx("h4", { className: "mb-1 font-weight-bold card-title", children: title })), _jsxs("div", { className: "card-description", children: [enrollmentInfo, description && (_jsx(_Fragment, { children: description }))] })] }), _jsx(ProgressCardActions, { tabType: tabType, redirectUrl: destinationUrl || courseUrl })] }), tabType === (formatMessage(messages.programProgressCompletedTab).toLowerCase()) && (_jsx(Row, { className: "pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center", children: _jsxs(Col, { xs: 12, className: "d-flex justify-content-between align-items-center px-0", children: [_jsx("span", { className: "text-start", children: certificateIssuedDate && (formatMessage(messages.programProgressCardCompletedCertificateText, {
+    return (_jsx(Card, { className: "progress-card mb-3", "data-testid": "progress-card", isLoading: isLoading, children: _jsxs(Card.Section, { className: "pt-3 pb-2 px-4", children: [_jsxs(Row, { className: "mb-2", children: [_jsxs(Col, { xs: 12, children: [isPathwaysTab ? (_jsx("h5", { className: "mb-1 font-weight-bold card-title", children: title })) : (_jsx("h4", { className: "mb-1 font-weight-bold card-title", children: title })), _jsxs("div", { className: "card-description", children: [enrollmentInfo, description && (_jsx(_Fragment, { children: description }))] })] }), _jsx(ProgressCardActions, { tabType: tabType, redirectUrl: destinationUrl || courseUrl, courseTitle: title })] }), tabType === (formatMessage(messages.programProgressCompletedTab).toLowerCase()) && (_jsx(Row, { className: "pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center", children: _jsxs(Col, { xs: 12, className: "d-flex justify-content-between align-items-center px-0", children: [_jsx("span", { className: "text-start", children: certificateIssuedDate && (formatMessage(messages.programProgressCardCompletedCertificateText, {
                                     certificateDate: (certificateIssuedDate ? dateFormatter(formatDate, certificateIssuedDate, 'short') : ''),
-                                })) }), _jsx(ProgressCardButton, { variant: "brand", redirectUrl: certificateUrl ? `${getSiteConfig().lmsBaseUrl}${certificateUrl}` : '', buttonText: formatMessage(messages.programProgressCardCompletedCertificateButton) })] }) })), isInProgressTab && (_jsxs(_Fragment, { children: [(isProfessionalProgram || isXSeriesProgram)
+                                })) }), _jsx(ProgressCardButton, { variant: "brand", redirectUrl: certificateUrl ? `${getSiteConfig().lmsBaseUrl}${certificateUrl}` : '', buttonText: formatMessage(messages.programProgressCardCompletedCertificateButton), tabType: tabType, courseTitle: title })] }) })), isInProgressTab && (_jsxs(_Fragment, { children: [(isProfessionalProgram || isXSeriesProgram)
                             && canUpgrade
                             && getCertificatePriceString(seats)
                             && (_jsxs(Row, { className: "pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center", children: [_jsx(Col, { xs: 12, md: 8, className: "d-flex justify-content-between align-items-center px-0", children: _jsx("span", { className: "text-start", children: formatMessage(messages.programProgressInProgressProfessionalCertificate) }) }), _jsx(Col, { xs: 12, md: 4, className: "d-flex justify-content-between align-items-center px-0", children: _jsx(UpgradeCourseButton, { variant: "outline-brand", buttonText: formatMessage(messages.programProgressCardUpgradeButton), title: title, price: getCertificatePriceString(seats), courseRunKey: courseRunKey || '', courseUrl: courseUrl ? `${getSiteConfig().lmsBaseUrl}${courseUrl}` : '' }) })] })), isMicroMastersProgram

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgressCard/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC } from 'react';\nimport { Card, Row, Col } from '@openedx/paragon';\nimport { getSiteConfig, useIntl } from '@openedx/frontend-base';\n\nimport { ProgressCardProps } from '../../data/types';\nimport messages from '../messages';\nimport './index.scss';\nimport { ProgressCardActions } from '../ProgressCardActions';\nimport { dateFormatter } from '@src/utils/dateFormatter';\nimport { ProgressCardButton } from '../ProgressCardActions/ProgressCardButton';\nimport { PROGRAM_TYPE_MAP } from '../../data/constants';\nimport { getCertificatePriceString } from '../../data/util';\nimport { UpgradeCourseButton } from '../ProgressCardActions/UpgradeCourseButton';\n\nexport const ProgressCard: FC<ProgressCardProps> = ({ progressCardData, isLoading, tabType }) => {\n  const { formatMessage, formatDate } = useIntl();\n\n  const { title, enrollment_date, certificateIssuedDate, certificateUrl, courseUrl, upgradeUrl, programType, checkoutUrl, expired, seats, description, destinationUrl, courseRunKey, isAudit, canUpgradeCourse } = progressCardData;\n\n  const inProgressTabKey = formatMessage(messages.programProgressInProgressTab).toLowerCase();\n  const isInProgressTab = tabType === inProgressTabKey;\n  const isRemainingTab = tabType === formatMessage(messages.programProgressRemainingTab).toLowerCase();\n  const isPathwaysTab = tabType === formatMessage(messages.programProgressPathwaysTab).toLowerCase();\n  const isProfessionalProgram = programType === PROGRAM_TYPE_MAP.PROFESSIONAL_CERTIFICATE;\n  const isXSeriesProgram = programType === PROGRAM_TYPE_MAP.XSERIES;\n  const isMicroMastersProgram = programType === PROGRAM_TYPE_MAP.MICROMASTERS;\n  /*\n    - Formatting pacing type safely\n    - replace underscores with spaces\n    - capitalize first letter of each word\n    - example: 'self_paced' -> 'Self Paced'\n  */\n  // base string; pathways tab has no enrollment/subscription status\n  let enrollmentInfo = '';\n  if (!isPathwaysTab) {\n    enrollmentInfo = isRemainingTab\n      ? formatMessage(messages.programProgressCardIncludedInSubscriptionText)\n      : formatMessage(messages.programProgressCardEnrollText);\n  }\n\n  if (isInProgressTab && isAudit && canUpgradeCourse) {\n    enrollmentInfo = `${formatMessage(messages.programProgressCardAuditTrack)} ${formatMessage(messages.programProgressCardEnrollText)}`;\n  }\n\n  //  if enrollment start exists\n  if (!isPathwaysTab && !isRemainingTab && enrollment_date) {\n    const enrollment_date_formatted = dateFormatter(formatDate, enrollment_date, 'short');\n\n    enrollmentInfo = enrollmentInfo && `${enrollmentInfo} ${enrollment_date_formatted}`;\n  }\n\n  // using expired key from course object to determine if the course is expired as per condition on confluence and learners dashboard code.\n  const canUpgrade = Boolean(upgradeUrl) && !expired;\n  return (\n    <Card className=\"progress-card mb-3\" data-testid=\"progress-card\" isLoading={isLoading}>\n      <Card.Section className=\"pt-3 pb-2 px-4\">\n        <Row className=\"mb-2\">\n          <Col xs={12}>\n            {isPathwaysTab ? (\n              <h5 className=\"mb-1 font-weight-bold card-title\">{title}</h5>\n            ) : (\n              <h4 className=\"mb-1 font-weight-bold card-title\">{title}</h4>\n            )}\n            <div className=\"card-description\">\n              {enrollmentInfo}\n              {description && (\n                <>\n                  {description}\n                </>\n              )}\n            </div>\n          </Col>\n          <ProgressCardActions tabType={tabType} redirectUrl={destinationUrl || courseUrl} />\n        </Row>\n\n        {tabType === (formatMessage(messages.programProgressCompletedTab).toLowerCase()) && (\n          <Row className=\"pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center\">\n            <Col xs={12} className=\"d-flex justify-content-between align-items-center px-0\">\n              <span className=\"text-start\">\n                {certificateIssuedDate && (\n                  formatMessage(messages.programProgressCardCompletedCertificateText, {\n                    certificateDate: (certificateIssuedDate ? dateFormatter(formatDate, certificateIssuedDate, 'short') : ''),\n                  })\n                )}\n              </span>\n\n              <ProgressCardButton variant=\"brand\" redirectUrl={certificateUrl ? `${getSiteConfig().lmsBaseUrl}${certificateUrl}` : ''} buttonText={formatMessage(messages.programProgressCardCompletedCertificateButton)} />\n            </Col>\n          </Row>\n        )}\n\n        {isInProgressTab && (\n          <>\n            {(isProfessionalProgram || isXSeriesProgram)\n            && canUpgrade\n            && getCertificatePriceString(seats)\n            && (\n              <Row className=\"pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center\">\n                <Col xs={12} md={8} className=\"d-flex justify-content-between align-items-center px-0\">\n                  <span className=\"text-start\">\n                    {formatMessage(messages.programProgressInProgressProfessionalCertificate)}\n                  </span>\n                </Col>\n                <Col xs={12} md={4} className=\"d-flex justify-content-between align-items-center px-0\">\n                  <UpgradeCourseButton\n                    variant=\"outline-brand\"\n                    buttonText={formatMessage(messages.programProgressCardUpgradeButton)}\n                    title={title}\n                    price={getCertificatePriceString(seats)}\n                    courseRunKey={courseRunKey || ''}\n                    courseUrl={courseUrl ? `${getSiteConfig().lmsBaseUrl}${courseUrl}` : ''}\n                  />\n                </Col>\n              </Row>\n            )}\n            {isMicroMastersProgram\n            && checkoutUrl\n            && canUpgrade\n            && (\n              <Row className=\"pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center\">\n                <Col xs={12} md={8} className=\"d-flex justify-content-between align-items-center px-0\">\n                  <span className=\"text-start\">\n                    {formatMessage(messages.programProgressInProgressMicromastersCertificate)}\n                  </span>\n                </Col>\n                <Col xs={12} md={4} className=\"d-flex justify-content-between align-items-center\">\n                  <ProgressCardButton\n                    variant=\"brand\"\n                    redirectUrl={checkoutUrl}\n                    buttonText={formatMessage(messages.programProgressInProgressCourseMicromastersUpgrade, {\n                      price: getCertificatePriceString(seats, true),\n                    })}\n                  />\n                </Col>\n              </Row>\n            )}\n          </>\n        )}\n\n      </Card.Section>\n    </Card>\n  );\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgressCard/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC } from 'react';\nimport { Card, Row, Col } from '@openedx/paragon';\nimport { getSiteConfig, useIntl } from '@openedx/frontend-base';\n\nimport { ProgressCardProps } from '../../data/types';\nimport messages from '../messages';\nimport './index.scss';\nimport { ProgressCardActions } from '../ProgressCardActions';\nimport { dateFormatter } from '@src/utils/dateFormatter';\nimport { ProgressCardButton } from '../ProgressCardActions/ProgressCardButton';\nimport { PROGRAM_TYPE_MAP } from '../../data/constants';\nimport { getCertificatePriceString } from '../../data/util';\nimport { UpgradeCourseButton } from '../ProgressCardActions/UpgradeCourseButton';\n\nexport const ProgressCard: FC<ProgressCardProps> = ({ progressCardData, isLoading, tabType }) => {\n  const { formatMessage, formatDate } = useIntl();\n\n  const { title, enrollment_date, certificateIssuedDate, certificateUrl, courseUrl, upgradeUrl, programType, checkoutUrl, expired, seats, description, destinationUrl, courseRunKey, isAudit, canUpgradeCourse } = progressCardData;\n\n  const inProgressTabKey = formatMessage(messages.programProgressInProgressTab).toLowerCase();\n  const isInProgressTab = tabType === inProgressTabKey;\n  const isRemainingTab = tabType === formatMessage(messages.programProgressRemainingTab).toLowerCase();\n  const isPathwaysTab = tabType === formatMessage(messages.programProgressPathwaysTab).toLowerCase();\n  const isProfessionalProgram = programType === PROGRAM_TYPE_MAP.PROFESSIONAL_CERTIFICATE;\n  const isXSeriesProgram = programType === PROGRAM_TYPE_MAP.XSERIES;\n  const isMicroMastersProgram = programType === PROGRAM_TYPE_MAP.MICROMASTERS;\n  /*\n    - Formatting pacing type safely\n    - replace underscores with spaces\n    - capitalize first letter of each word\n    - example: 'self_paced' -> 'Self Paced'\n  */\n  // base string; pathways tab has no enrollment/subscription status\n  let enrollmentInfo = '';\n  if (!isPathwaysTab) {\n    enrollmentInfo = isRemainingTab\n      ? formatMessage(messages.programProgressCardIncludedInSubscriptionText)\n      : formatMessage(messages.programProgressCardEnrollText);\n  }\n\n  if (isInProgressTab && isAudit && canUpgradeCourse) {\n    enrollmentInfo = `${formatMessage(messages.programProgressCardAuditTrack)} ${formatMessage(messages.programProgressCardEnrollText)}`;\n  }\n\n  //  if enrollment start exists\n  if (!isPathwaysTab && !isRemainingTab && enrollment_date) {\n    const enrollment_date_formatted = dateFormatter(formatDate, enrollment_date, 'short');\n\n    enrollmentInfo = enrollmentInfo && `${enrollmentInfo} ${enrollment_date_formatted}`;\n  }\n\n  // using expired key from course object to determine if the course is expired as per condition on confluence and learners dashboard code.\n  const canUpgrade = Boolean(upgradeUrl) && !expired;\n  return (\n    <Card className=\"progress-card mb-3\" data-testid=\"progress-card\" isLoading={isLoading}>\n      <Card.Section className=\"pt-3 pb-2 px-4\">\n        <Row className=\"mb-2\">\n          <Col xs={12}>\n            {isPathwaysTab ? (\n              <h5 className=\"mb-1 font-weight-bold card-title\">{title}</h5>\n            ) : (\n              <h4 className=\"mb-1 font-weight-bold card-title\">{title}</h4>\n            )}\n            <div className=\"card-description\">\n              {enrollmentInfo}\n              {description && (\n                <>\n                  {description}\n                </>\n              )}\n            </div>\n          </Col>\n          <ProgressCardActions tabType={tabType} redirectUrl={destinationUrl || courseUrl} courseTitle={title} />\n        </Row>\n\n        {tabType === (formatMessage(messages.programProgressCompletedTab).toLowerCase()) && (\n          <Row className=\"pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center\">\n            <Col xs={12} className=\"d-flex justify-content-between align-items-center px-0\">\n              <span className=\"text-start\">\n                {certificateIssuedDate && (\n                  formatMessage(messages.programProgressCardCompletedCertificateText, {\n                    certificateDate: (certificateIssuedDate ? dateFormatter(formatDate, certificateIssuedDate, 'short') : ''),\n                  })\n                )}\n              </span>\n\n              <ProgressCardButton variant=\"brand\" redirectUrl={certificateUrl ? `${getSiteConfig().lmsBaseUrl}${certificateUrl}` : ''} buttonText={formatMessage(messages.programProgressCardCompletedCertificateButton)} tabType={tabType} courseTitle={title} />\n            </Col>\n          </Row>\n        )}\n\n        {isInProgressTab && (\n          <>\n            {(isProfessionalProgram || isXSeriesProgram)\n            && canUpgrade\n            && getCertificatePriceString(seats)\n            && (\n              <Row className=\"pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center\">\n                <Col xs={12} md={8} className=\"d-flex justify-content-between align-items-center px-0\">\n                  <span className=\"text-start\">\n                    {formatMessage(messages.programProgressInProgressProfessionalCertificate)}\n                  </span>\n                </Col>\n                <Col xs={12} md={4} className=\"d-flex justify-content-between align-items-center px-0\">\n                  <UpgradeCourseButton\n                    variant=\"outline-brand\"\n                    buttonText={formatMessage(messages.programProgressCardUpgradeButton)}\n                    title={title}\n                    price={getCertificatePriceString(seats)}\n                    courseRunKey={courseRunKey || ''}\n                    courseUrl={courseUrl ? `${getSiteConfig().lmsBaseUrl}${courseUrl}` : ''}\n                  />\n                </Col>\n              </Row>\n            )}\n            {isMicroMastersProgram\n            && checkoutUrl\n            && canUpgrade\n            && (\n              <Row className=\"pt-3 pb-2 px-2 border-top border-2 border-muted mb-2 align-items-center\">\n                <Col xs={12} md={8} className=\"d-flex justify-content-between align-items-center px-0\">\n                  <span className=\"text-start\">\n                    {formatMessage(messages.programProgressInProgressMicromastersCertificate)}\n                  </span>\n                </Col>\n                <Col xs={12} md={4} className=\"d-flex justify-content-between align-items-center\">\n                  <ProgressCardButton\n                    variant=\"brand\"\n                    redirectUrl={checkoutUrl}\n                    buttonText={formatMessage(messages.programProgressInProgressCourseMicromastersUpgrade, {\n                      price: getCertificatePriceString(seats, true),\n                    })}\n                  />\n                </Col>\n              </Row>\n            )}\n          </>\n        )}\n\n      </Card.Section>\n    </Card>\n  );\n};\n"]}

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

@@ -2,15 +2,27 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Icon } from '@openedx/paragon';
 import { useIntl } from '@openedx/frontend-base';
 import { Link } from 'react-router-dom';
-import messages from '../messages';
 import { Launch } from '@openedx/paragon/icons';
-export const ProgressCardButton = ({ variant, redirectUrl, buttonText, destinationUrl }) => {
+import messages from '../messages';
+import { trackProgramProgressResumeCourseButtonClicked, trackProgramProgressViewCourseButtonClicked, trackProgramProgressViewCertificateButtonClicked } from '../../../../tracking/trackers/programProgress';
+export const ProgressCardButton = ({ variant, redirectUrl, buttonText, destinationUrl, tabType, courseTitle }) => {
     const { formatMessage } = useIntl();
+    const handleCaptureEvent = () => {
+        if (buttonText === formatMessage(messages.programProgressCardResumeCourseButton)) {
+            trackProgramProgressResumeCourseButtonClicked({ tabSource: tabType, redirection_url: redirectUrl || destinationUrl, buttonText, courseTitle });
+        }
+        else if (buttonText === formatMessage(messages.programProgressCardViewCourseDetailButton)) {
+            trackProgramProgressViewCourseButtonClicked({ tabSource: tabType, redirection_url: redirectUrl || destinationUrl, buttonText, courseTitle });
+        }
+        else if (buttonText === formatMessage(messages.programProgressCardCompletedCertificateButton)) {
+            trackProgramProgressViewCertificateButtonClicked({ tabSource: tabType, certificate_url: redirectUrl || destinationUrl, buttonText, courseTitle });
+        }
+    };
     if (redirectUrl) {
-        return (_jsx(Button, { variant: variant, as: Link, to: redirectUrl, children: buttonText }));
+        return (_jsx(Button, { variant: variant, as: Link, to: redirectUrl, onClick: handleCaptureEvent, children: buttonText }));
     }
     if (destinationUrl) {
-        return (_jsxs(Button, { variant: variant, href: destinationUrl, children: [buttonText, buttonText === formatMessage(messages.programProgressPathwaysCreditPathwayLearnMore) && (_jsx(Icon, { src: Launch, className: "ms-1 ml-1.5" }))] }));
+        return (_jsxs(Button, { variant: variant, href: destinationUrl, onClick: handleCaptureEvent, children: [buttonText, buttonText === formatMessage(messages.programProgressPathwaysCreditPathwayLearnMore) && (_jsx(Icon, { src: Launch, className: "ms-1 ml-1.5" }))] }));
     }
     return (_jsx(Button, { variant: variant, children: buttonText }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressCardButton.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/ProgressCardButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAGxC,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,MAAM,CAAC,MAAM,kBAAkB,GAAgC,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,EAAE,EAAE;IACtH,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,IAAI,WAAW,EAAE,CAAC;QAChB,OAAO,CACL,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,YAChD,UAAU,GACJ,CACV,CAAC;IACJ,CAAC;IAED,IAAI,cAAc,EAAE,CAAC;QACnB,OAAO,CACL,MAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,aAC3C,UAAU,EACV,UAAU,KAAK,aAAa,CAAC,QAAQ,CAAC,6CAA6C,CAAC,IAAI,CACvF,KAAC,IAAI,IAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAC,aAAa,GAAG,CAC9C,IACM,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,YACrB,UAAU,GACJ,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { Button, Icon } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport { Link } from 'react-router-dom';\n\nimport { ProgressCardButtonProps } from '../../data/types';\nimport messages from '../messages';\nimport { Launch } from '@openedx/paragon/icons';\n\nexport const ProgressCardButton: FC<ProgressCardButtonProps> = ({ variant, redirectUrl, buttonText, destinationUrl }) => {\n  const { formatMessage } = useIntl();\n\n  if (redirectUrl) {\n    return (\n      <Button variant={variant} as={Link} to={redirectUrl}>\n        {buttonText}\n      </Button>\n    );\n  }\n\n  if (destinationUrl) {\n    return (\n      <Button variant={variant} href={destinationUrl}>\n        {buttonText}\n        {buttonText === formatMessage(messages.programProgressPathwaysCreditPathwayLearnMore) && (\n          <Icon src={Launch} className=\"ms-1 ml-1.5\" />\n        )}\n      </Button>\n    );\n  }\n\n  return (\n    <Button variant={variant}>\n      {buttonText}\n    </Button>\n  );\n};\n"]}
+{"version":3,"file":"ProgressCardButton.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/ProgressCardButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAGhD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,6CAA6C,EAAE,2CAA2C,EAAE,gDAAgD,EAAE,MAAM,wCAAwC,CAAC;AAEtM,MAAM,CAAC,MAAM,kBAAkB,GAAgC,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE;IAC5I,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,UAAU,KAAK,aAAa,CAAC,QAAQ,CAAC,qCAAqC,CAAC,EAAE,CAAC;YACjF,6CAA6C,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,IAAI,cAAc,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,CAAC;QACjJ,CAAC;aAAM,IAAI,UAAU,KAAK,aAAa,CAAC,QAAQ,CAAC,yCAAyC,CAAC,EAAE,CAAC;YAC5F,2CAA2C,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,IAAI,cAAc,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,CAAC;QAC/I,CAAC;aAAM,IAAI,UAAU,KAAK,aAAa,CAAC,QAAQ,CAAC,6CAA6C,CAAC,EAAE,CAAC;YAChG,gDAAgD,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,IAAI,cAAc,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,CAAC;QACpJ,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,WAAW,EAAE,CAAC;QAChB,OAAO,CACL,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,kBAAkB,YAC7E,UAAU,GACJ,CACV,CAAC;IACJ,CAAC;IAED,IAAI,cAAc,EAAE,CAAC;QACnB,OAAO,CACL,MAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,kBAAkB,aACxE,UAAU,EACV,UAAU,KAAK,aAAa,CAAC,QAAQ,CAAC,6CAA6C,CAAC,IAAI,CACvF,KAAC,IAAI,IAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAC,aAAa,GAAG,CAC9C,IACM,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,YACrB,UAAU,GACJ,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { Button, Icon } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\nimport { Link } from 'react-router-dom';\nimport { Launch } from '@openedx/paragon/icons';\n\nimport { ProgressCardButtonProps } from '../../data/types';\nimport messages from '../messages';\nimport { trackProgramProgressResumeCourseButtonClicked, trackProgramProgressViewCourseButtonClicked, trackProgramProgressViewCertificateButtonClicked } from '@src/tracking/trackers/programProgress';\n\nexport const ProgressCardButton: FC<ProgressCardButtonProps> = ({ variant, redirectUrl, buttonText, destinationUrl, tabType, courseTitle }) => {\n  const { formatMessage } = useIntl();\n\n  const handleCaptureEvent = () => {\n    if (buttonText === formatMessage(messages.programProgressCardResumeCourseButton)) {\n      trackProgramProgressResumeCourseButtonClicked({ tabSource: tabType, redirection_url: redirectUrl || destinationUrl, buttonText, courseTitle });\n    } else if (buttonText === formatMessage(messages.programProgressCardViewCourseDetailButton)) {\n      trackProgramProgressViewCourseButtonClicked({ tabSource: tabType, redirection_url: redirectUrl || destinationUrl, buttonText, courseTitle });\n    } else if (buttonText === formatMessage(messages.programProgressCardCompletedCertificateButton)) {\n      trackProgramProgressViewCertificateButtonClicked({ tabSource: tabType, certificate_url: redirectUrl || destinationUrl, buttonText, courseTitle });\n    }\n  };\n\n  if (redirectUrl) {\n    return (\n      <Button variant={variant} as={Link} to={redirectUrl} onClick={handleCaptureEvent}>\n        {buttonText}\n      </Button>\n    );\n  }\n\n  if (destinationUrl) {\n    return (\n      <Button variant={variant} href={destinationUrl} onClick={handleCaptureEvent}>\n        {buttonText}\n        {buttonText === formatMessage(messages.programProgressPathwaysCreditPathwayLearnMore) && (\n          <Icon src={Launch} className=\"ms-1 ml-1.5\" />\n        )}\n      </Button>\n    );\n  }\n\n  return (\n    <Button variant={variant}>\n      {buttonText}\n    </Button>\n  );\n};\n"]}

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

@@ -6,6 +6,7 @@ import messages from '../messages';
 import ConfirmCourseUpgradeActionModal from '../../../../components/ConfirmCourseUpgradeActionModal';
 import { useUpgradeCourseEnrollment } from '../../../../data/hooks/mutationHooks';
 import { useActionWithModal } from '../../../../hooks';
+import { trackProgramProgressUpgradeWithMySubscriptionButtonClicked } from '../../../../tracking/trackers/programProgress';
 export const UpgradeCourseButton = ({ variant, buttonText, title, price, courseRunKey, courseUrl }) => {
     const { formatMessage } = useIntl();
     const queryClient = useQueryClient();
@@ -15,6 +16,10 @@ export const UpgradeCourseButton = ({ variant, buttonText, title, price, courseR
         shouldOpenModal: (response) => (response === null || response === void 0 ? void 0 : response.success) === true,
         onCancel: () => queryClient.invalidateQueries({ queryKey: ['programProgress'] }),
     });
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: variant, onClick: trigger, disabled: !normalizedCourseRunKey || isTriggering || isPending, children: buttonText }), _jsx(ConfirmCourseUpgradeActionModal, { isOpen: isModalOpen, title: formatMessage(messages.programProgressInProgressCourseProfessionalUpgradeModalTitle, { title }), body: formatMessage(messages.programProgressInProgressCourseProfessionalUpgradeModalContent, { price }), onSuccess: handleSuccessAction, onReload: handleCancelAction, reloadLabel: "Close", navigateLabel: "Resume Course", navigateTo: courseUrl || `/courses/${normalizedCourseRunKey}` })] }));
+    const handleClick = () => {
+        trackProgramProgressUpgradeWithMySubscriptionButtonClicked({ buttonText, title, price });
+        trigger();
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: variant, disabled: !normalizedCourseRunKey || isTriggering || isPending, onClick: handleClick, children: buttonText }), _jsx(ConfirmCourseUpgradeActionModal, { isOpen: isModalOpen, title: formatMessage(messages.programProgressInProgressCourseProfessionalUpgradeModalTitle, { title }), body: formatMessage(messages.programProgressInProgressCourseProfessionalUpgradeModalContent, { price }), onSuccess: handleSuccessAction, onReload: handleCancelAction, reloadLabel: "Close", navigateLabel: "Resume Course", navigateTo: courseUrl || `/courses/${normalizedCourseRunKey}` })] }));
 };
 //# sourceMappingURL=UpgradeCourseButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"UpgradeCourseButton.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/UpgradeCourseButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,OAAO,+BAA+B,MAAM,iDAAiD,CAAC;AAC9F,OAAO,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE;IAClI,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,0BAA0B,EAAE,CAAC;IAEhE,MAAM,sBAAsB,GAAG,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC;IAElD,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,GAAG,kBAAkB,CACxG,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,YAAY,EAAE,sBAAsB,EAAE,CAAC,EAC3D;QACE,eAAe,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,MAAK,IAAI;QACzD,QAAQ,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC,iBAAiB,CAAC,EAAE,CAAC;KACjF,CACF,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,sBAAsB,IAAI,YAAY,IAAI,SAAS,YAAG,UAAU,GAAU,EAEjI,KAAC,+BAA+B,IAC9B,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,4DAA4D,EAAE,EAAE,KAAK,EAAE,CAAC,EACtG,IAAI,EAAE,aAAa,CAAC,QAAQ,CAAC,8DAA8D,EAAE,EAAE,KAAK,EAAE,CAAC,EACvG,SAAS,EAAE,mBAAmB,EAC9B,QAAQ,EAAE,kBAAkB,EAC5B,WAAW,EAAC,OAAO,EACnB,aAAa,EAAC,eAAe,EAC7B,UAAU,EAAE,SAAS,IAAI,YAAY,sBAAsB,EAAE,GAC7D,IACD,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { Button } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { UpgradeCourseButtonProps } from '../../data/types';\nimport messages from '../messages';\n\nimport ConfirmCourseUpgradeActionModal from '@src/components/ConfirmCourseUpgradeActionModal';\nimport { useUpgradeCourseEnrollment } from '@src/data/hooks/mutationHooks';\nimport { useActionWithModal } from '@src/hooks';\n\nexport const UpgradeCourseButton: FC<UpgradeCourseButtonProps> = ({ variant, buttonText, title, price, courseRunKey, courseUrl }) => {\n  const { formatMessage } = useIntl();\n  const queryClient = useQueryClient();\n  const { mutateAsync, isPending } = useUpgradeCourseEnrollment();\n\n  const normalizedCourseRunKey = courseRunKey ?? '';\n\n  const { isModalOpen, isTriggering, trigger, handleSuccessAction, handleCancelAction } = useActionWithModal(\n    () => mutateAsync({ courseRunKey: normalizedCourseRunKey }),\n    {\n      shouldOpenModal: (response) => response?.success === true,\n      onCancel: () => queryClient.invalidateQueries({ queryKey: ['programProgress'] }),\n    }\n  );\n\n  return (\n    <>\n      <Button variant={variant} onClick={trigger} disabled={!normalizedCourseRunKey || isTriggering || isPending}>{buttonText}</Button>\n\n      <ConfirmCourseUpgradeActionModal\n        isOpen={isModalOpen}\n        title={formatMessage(messages.programProgressInProgressCourseProfessionalUpgradeModalTitle, { title })}\n        body={formatMessage(messages.programProgressInProgressCourseProfessionalUpgradeModalContent, { price })}\n        onSuccess={handleSuccessAction}\n        onReload={handleCancelAction}\n        reloadLabel=\"Close\"\n        navigateLabel=\"Resume Course\"\n        navigateTo={courseUrl || `/courses/${normalizedCourseRunKey}`}\n      />\n    </>\n  );\n};\n"]}
+{"version":3,"file":"UpgradeCourseButton.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/UpgradeCourseButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAGjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,OAAO,+BAA+B,MAAM,iDAAiD,CAAC;AAC9F,OAAO,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAC3E,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,0DAA0D,EAAE,MAAM,wCAAwC,CAAC;AAEpH,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE;IAClI,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,0BAA0B,EAAE,CAAC;IAEhE,MAAM,sBAAsB,GAAG,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,EAAE,CAAC;IAElD,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,GAAG,kBAAkB,CACxG,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,YAAY,EAAE,sBAAsB,EAAE,CAAC,EAC3D;QACE,eAAe,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,MAAK,IAAI;QACzD,QAAQ,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,iBAAiB,CAAC,EAAE,QAAQ,EAAE,CAAC,iBAAiB,CAAC,EAAE,CAAC;KACjF,CACF,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,0DAA0D,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC;QACzF,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IAEF,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,sBAAsB,IAAI,YAAY,IAAI,SAAS,EAAE,OAAO,EAAE,WAAW,YAAG,UAAU,GAAU,EAErI,KAAC,+BAA+B,IAC9B,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,aAAa,CAAC,QAAQ,CAAC,4DAA4D,EAAE,EAAE,KAAK,EAAE,CAAC,EACtG,IAAI,EAAE,aAAa,CAAC,QAAQ,CAAC,8DAA8D,EAAE,EAAE,KAAK,EAAE,CAAC,EACvG,SAAS,EAAE,mBAAmB,EAC9B,QAAQ,EAAE,kBAAkB,EAC5B,WAAW,EAAC,OAAO,EACnB,aAAa,EAAC,eAAe,EAC7B,UAAU,EAAE,SAAS,IAAI,YAAY,sBAAsB,EAAE,GAC7D,IACD,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useQueryClient } from '@tanstack/react-query';\nimport { Button } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { UpgradeCourseButtonProps } from '../../data/types';\nimport messages from '../messages';\n\nimport ConfirmCourseUpgradeActionModal from '@src/components/ConfirmCourseUpgradeActionModal';\nimport { useUpgradeCourseEnrollment } from '@src/data/hooks/mutationHooks';\nimport { useActionWithModal } from '@src/hooks';\nimport { trackProgramProgressUpgradeWithMySubscriptionButtonClicked } from '@src/tracking/trackers/programProgress';\n\nexport const UpgradeCourseButton: FC<UpgradeCourseButtonProps> = ({ variant, buttonText, title, price, courseRunKey, courseUrl }) => {\n  const { formatMessage } = useIntl();\n  const queryClient = useQueryClient();\n  const { mutateAsync, isPending } = useUpgradeCourseEnrollment();\n\n  const normalizedCourseRunKey = courseRunKey ?? '';\n\n  const { isModalOpen, isTriggering, trigger, handleSuccessAction, handleCancelAction } = useActionWithModal(\n    () => mutateAsync({ courseRunKey: normalizedCourseRunKey }),\n    {\n      shouldOpenModal: (response) => response?.success === true,\n      onCancel: () => queryClient.invalidateQueries({ queryKey: ['programProgress'] }),\n    }\n  );\n\n  const handleClick = () => {\n    trackProgramProgressUpgradeWithMySubscriptionButtonClicked({ buttonText, title, price });\n    trigger();\n  };\n\n  return (\n    <>\n      <Button variant={variant} disabled={!normalizedCourseRunKey || isTriggering || isPending} onClick={handleClick}>{buttonText}</Button>\n\n      <ConfirmCourseUpgradeActionModal\n        isOpen={isModalOpen}\n        title={formatMessage(messages.programProgressInProgressCourseProfessionalUpgradeModalTitle, { title })}\n        body={formatMessage(messages.programProgressInProgressCourseProfessionalUpgradeModalContent, { price })}\n        onSuccess={handleSuccessAction}\n        onReload={handleCancelAction}\n        reloadLabel=\"Close\"\n        navigateLabel=\"Resume Course\"\n        navigateTo={courseUrl || `/courses/${normalizedCourseRunKey}`}\n      />\n    </>\n  );\n};\n"]}

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

@@ -4,7 +4,7 @@ import { getSiteConfig, useIntl } from '@openedx/frontend-base';
 import { useProgressData } from '../../../../hooks';
 import { ProgressCardButton } from './ProgressCardButton';
 import messages from '../messages';
-export const ProgressCardActions = ({ tabType, redirectUrl }) => {
+export const ProgressCardActions = ({ tabType, redirectUrl, courseTitle }) => {
     var _a, _b, _c;
     const { programProgressData } = useProgressData();
     const { formatMessage } = useIntl();
@@ -12,8 +12,8 @@ export const ProgressCardActions = ({ tabType, redirectUrl }) => {
     const remainingCourseCount = ((_a = courseData === null || courseData === void 0 ? void 0 : courseData.notStarted) === null || _a === void 0 ? void 0 : _a.length) || 0;
     const completedCourseCount = ((_b = courseData === null || courseData === void 0 ? void 0 : courseData.completed) === null || _b === void 0 ? void 0 : _b.length) || 0;
     const inProgressCourseCount = ((_c = courseData === null || courseData === void 0 ? void 0 : courseData.inProgress) === null || _c === void 0 ? void 0 : _c.length) || 0;
-    return (_jsxs(Col, { xs: 12, className: "d-flex justify-content-md-end align-items-start mb-2", children: [tabType === formatMessage(messages.programProgressRemainingTab).toLowerCase() && remainingCourseCount > 0 && (_jsx(ProgressCardButton, { variant: "outline-primary", redirectUrl: redirectUrl ? getSiteConfig().lmsBaseUrl + redirectUrl : '', buttonText: formatMessage(messages.programProgressCardViewCourseDetailButton) })), ((tabType === formatMessage(messages.programProgressCompletedTab).toLowerCase() && completedCourseCount > 0)
+    return (_jsxs(Col, { xs: 12, className: "d-flex justify-content-md-end align-items-start mb-2", children: [tabType === formatMessage(messages.programProgressRemainingTab).toLowerCase() && remainingCourseCount > 0 && (_jsx(ProgressCardButton, { variant: "outline-primary", redirectUrl: redirectUrl ? getSiteConfig().lmsBaseUrl + redirectUrl : '', buttonText: formatMessage(messages.programProgressCardViewCourseDetailButton), tabType: tabType, courseTitle: courseTitle })), ((tabType === formatMessage(messages.programProgressCompletedTab).toLowerCase() && completedCourseCount > 0)
                 || (tabType === formatMessage(messages.programProgressInProgressTab).toLowerCase() && inProgressCourseCount > 0))
-                && (_jsx(ProgressCardButton, { variant: "primary", redirectUrl: redirectUrl ? getSiteConfig().lmsBaseUrl + redirectUrl : '', buttonText: formatMessage(messages.programProgressCardResumeCourseButton) })), tabType === formatMessage(messages.programProgressPathwaysTab).toLowerCase() && (_jsx(ProgressCardButton, { variant: "outline-primary", destinationUrl: redirectUrl || '', buttonText: formatMessage(messages.programProgressPathwaysCreditPathwayLearnMore) }))] }));
+                && (_jsx(ProgressCardButton, { variant: "primary", redirectUrl: redirectUrl ? getSiteConfig().lmsBaseUrl + redirectUrl : '', buttonText: formatMessage(messages.programProgressCardResumeCourseButton), tabType: tabType, courseTitle: courseTitle })), tabType === formatMessage(messages.programProgressPathwaysTab).toLowerCase() && (_jsx(ProgressCardButton, { variant: "outline-primary", destinationUrl: redirectUrl || '', buttonText: formatMessage(messages.programProgressPathwaysCreditPathwayLearnMore), courseTitle: courseTitle, tabType: tabType }))] }));
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE;;IAC5F,MAAM,EAAE,mBAAmB,EAAE,GAAG,eAAe,EAAE,CAAC;IAClD,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,UAAU,GAAG,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,UAAU,KAAI,EAAE,CAAC;IACzD,MAAM,oBAAoB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC;IACjE,MAAM,oBAAoB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,SAAS,0CAAE,MAAM,KAAI,CAAC,CAAC;IAChE,MAAM,qBAAqB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC;IAElE,OAAO,CACL,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,sDAAsD,aAE1E,OAAO,KAAK,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC,CAAC,WAAW,EAAE,IAAI,oBAAoB,GAAG,CAAC,IAAI,CAC5G,KAAC,kBAAkB,IAAC,OAAO,EAAC,iBAAiB,EAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,yCAAyC,CAAC,GAAI,CAC1M,EAGA,CACC,CAAC,OAAO,KAAK,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC,CAAC,WAAW,EAAE,IAAI,oBAAoB,GAAG,CAAC,CAAC;mBACxG,CAAC,OAAO,KAAK,aAAa,CAAC,QAAQ,CAAC,4BAA4B,CAAC,CAAC,WAAW,EAAE,IAAI,qBAAqB,GAAG,CAAC,CAAC,CACjH;mBACE,CACD,KAAC,kBAAkB,IAAC,OAAO,EAAC,SAAS,EAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,qCAAqC,CAAC,GAAI,CAC9L,EAGA,OAAO,KAAK,aAAa,CAAC,QAAQ,CAAC,0BAA0B,CAAC,CAAC,WAAW,EAAE,IAAI,CAC/E,KAAC,kBAAkB,IAAC,OAAO,EAAC,iBAAiB,EAAC,cAAc,EAAE,WAAW,IAAI,EAAE,EAAE,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,6CAA6C,CAAC,GAAI,CACvK,IACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { Col } from '@openedx/paragon';\nimport { getSiteConfig, useIntl } from '@openedx/frontend-base';\n\nimport { useProgressData } from '@src/hooks';\nimport { ProgressCardActionsProps } from '../../data/types';\nimport { ProgressCardButton } from './ProgressCardButton';\nimport messages from '../messages';\n\nexport const ProgressCardActions: FC<ProgressCardActionsProps> = ({ tabType, redirectUrl }) => {\n  const { programProgressData } = useProgressData();\n  const { formatMessage } = useIntl();\n\n  const courseData = programProgressData?.courseData || {};\n  const remainingCourseCount = courseData?.notStarted?.length || 0;\n  const completedCourseCount = courseData?.completed?.length || 0;\n  const inProgressCourseCount = courseData?.inProgress?.length || 0;\n\n  return (\n    <Col xs={12} className=\"d-flex justify-content-md-end align-items-start mb-2\">\n      {/** View course details button */}\n      {tabType === formatMessage(messages.programProgressRemainingTab).toLowerCase() && remainingCourseCount > 0 && (\n        <ProgressCardButton variant=\"outline-primary\" redirectUrl={redirectUrl ? getSiteConfig().lmsBaseUrl + redirectUrl : ''} buttonText={formatMessage(messages.programProgressCardViewCourseDetailButton)} />\n      )}\n\n      {/** Resume course button */}\n      {(\n        (tabType === formatMessage(messages.programProgressCompletedTab).toLowerCase() && completedCourseCount > 0)\n        || (tabType === formatMessage(messages.programProgressInProgressTab).toLowerCase() && inProgressCourseCount > 0)\n      )\n      && (\n        <ProgressCardButton variant=\"primary\" redirectUrl={redirectUrl ? getSiteConfig().lmsBaseUrl + redirectUrl : ''} buttonText={formatMessage(messages.programProgressCardResumeCourseButton)} />\n      )}\n\n      {/** Learn more button */}\n      {tabType === formatMessage(messages.programProgressPathwaysTab).toLowerCase() && (\n        <ProgressCardButton variant=\"outline-primary\" destinationUrl={redirectUrl || ''} buttonText={formatMessage(messages.programProgressPathwaysCreditPathwayLearnMore)} />\n      )}\n    </Col>\n  );\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/containers/ProgramDashboard/ProgramProgress/ProgressCardActions/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,QAAQ,MAAM,aAAa,CAAC;AAEnC,MAAM,CAAC,MAAM,mBAAmB,GAAiC,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,EAAE;;IACzG,MAAM,EAAE,mBAAmB,EAAE,GAAG,eAAe,EAAE,CAAC;IAClD,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,UAAU,GAAG,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,UAAU,KAAI,EAAE,CAAC;IACzD,MAAM,oBAAoB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC;IACjE,MAAM,oBAAoB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,SAAS,0CAAE,MAAM,KAAI,CAAC,CAAC;IAChE,MAAM,qBAAqB,GAAG,CAAA,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,0CAAE,MAAM,KAAI,CAAC,CAAC;IAElE,OAAO,CACL,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,sDAAsD,aAE1E,OAAO,KAAK,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC,CAAC,WAAW,EAAE,IAAI,oBAAoB,GAAG,CAAC,IAAI,CAC5G,KAAC,kBAAkB,IAAC,OAAO,EAAC,iBAAiB,EAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,yCAAyC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,GAAI,CACtP,EAGA,CACC,CAAC,OAAO,KAAK,aAAa,CAAC,QAAQ,CAAC,2BAA2B,CAAC,CAAC,WAAW,EAAE,IAAI,oBAAoB,GAAG,CAAC,CAAC;mBACxG,CAAC,OAAO,KAAK,aAAa,CAAC,QAAQ,CAAC,4BAA4B,CAAC,CAAC,WAAW,EAAE,IAAI,qBAAqB,GAAG,CAAC,CAAC,CACjH;mBACE,CACD,KAAC,kBAAkB,IAAC,OAAO,EAAC,SAAS,EAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,aAAa,EAAE,CAAC,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,qCAAqC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,GAAI,CAC1O,EAGA,OAAO,KAAK,aAAa,CAAC,QAAQ,CAAC,0BAA0B,CAAC,CAAC,WAAW,EAAE,IAAI,CAC/E,KAAC,kBAAkB,IAAC,OAAO,EAAC,iBAAiB,EAAC,cAAc,EAAE,WAAW,IAAI,EAAE,EAAE,UAAU,EAAE,aAAa,CAAC,QAAQ,CAAC,6CAA6C,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,GAAI,CACnN,IACG,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FC } from 'react';\nimport { Col } from '@openedx/paragon';\nimport { getSiteConfig, useIntl } from '@openedx/frontend-base';\n\nimport { useProgressData } from '@src/hooks';\nimport { ProgressCardActionsProps } from '../../data/types';\nimport { ProgressCardButton } from './ProgressCardButton';\nimport messages from '../messages';\n\nexport const ProgressCardActions: FC<ProgressCardActionsProps> = ({ tabType, redirectUrl, courseTitle }) => {\n  const { programProgressData } = useProgressData();\n  const { formatMessage } = useIntl();\n\n  const courseData = programProgressData?.courseData || {};\n  const remainingCourseCount = courseData?.notStarted?.length || 0;\n  const completedCourseCount = courseData?.completed?.length || 0;\n  const inProgressCourseCount = courseData?.inProgress?.length || 0;\n\n  return (\n    <Col xs={12} className=\"d-flex justify-content-md-end align-items-start mb-2\">\n      {/** View course details button */}\n      {tabType === formatMessage(messages.programProgressRemainingTab).toLowerCase() && remainingCourseCount > 0 && (\n        <ProgressCardButton variant=\"outline-primary\" redirectUrl={redirectUrl ? getSiteConfig().lmsBaseUrl + redirectUrl : ''} buttonText={formatMessage(messages.programProgressCardViewCourseDetailButton)} tabType={tabType} courseTitle={courseTitle} />\n      )}\n\n      {/** Resume course button */}\n      {(\n        (tabType === formatMessage(messages.programProgressCompletedTab).toLowerCase() && completedCourseCount > 0)\n        || (tabType === formatMessage(messages.programProgressInProgressTab).toLowerCase() && inProgressCourseCount > 0)\n      )\n      && (\n        <ProgressCardButton variant=\"primary\" redirectUrl={redirectUrl ? getSiteConfig().lmsBaseUrl + redirectUrl : ''} buttonText={formatMessage(messages.programProgressCardResumeCourseButton)} tabType={tabType} courseTitle={courseTitle} />\n      )}\n\n      {/** Learn more button */}\n      {tabType === formatMessage(messages.programProgressPathwaysTab).toLowerCase() && (\n        <ProgressCardButton variant=\"outline-primary\" destinationUrl={redirectUrl || ''} buttonText={formatMessage(messages.programProgressPathwaysCreditPathwayLearnMore)} courseTitle={courseTitle} tabType={tabType} />\n      )}\n    </Col>\n  );\n};\n"]}

package/dist/containers/ProgramDashboard/ProgramsList/ProgramListCard.js

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
 import { breakpoints, useWindowSize, Card, } from '@openedx/paragon';
 import programCardFallbackImage from '../assets/program-card-fallback.svg';
 import ProgressCategoryBubbles from './ProgressCategoryBubbles';
+import { eventNames, trackSubscriptionEvent } from '../../../tracking/trackers/subscription';
 const ProgramListCard = ({ program, }) => {
     var _a;
     const { width: windowWidth } = useWindowSize();
@@ -36,7 +37,10 @@ const ProgramListCard = ({ program, }) => {
         }
         return '';
     };
-    return (_jsxs(Card, { className: "program-list-card mb-4 mr-4", isClickable: true, as: Link, to: `/subscription-program-progress/${program.uuid}`, "data-testid": "program-list-card", children: [_jsx(Card.ImageCap, { src: getBannerImageURL() || programCardFallbackImage, srcAlt: `program card image for ${program.title}`, logoSrc: getOrgImageUrl(), logoAlt: program.authoringOrganizations && ((_a = program.authoringOrganizations[0]) === null || _a === void 0 ? void 0 : _a.key), className: "banner-image" }), _jsx(Card.Section, { className: "pb-0", children: _jsx("h3", { children: program.title }) }), _jsxs(Card.Section, { className: "d-flex flex-column flex-grow-1 overflow-hidden", children: [program.authoringOrganizations && (_jsx("span", { className: "d-flex align-items-center mb-1", children: program.authoringOrganizations.map(org => org.key).join(', ') })), _jsx("span", { className: "d-flex align-items-center program-type", children: program.type })] }), _jsx(Card.Section, { className: "pt-0", children: _jsx(ProgressCategoryBubbles, { inProgress: program.progress.inProgress, notStarted: program.progress.notStarted, completed: program.progress.completed }) })] }));
+    const handleClick = () => {
+        trackSubscriptionEvent(eventNames.cardTileSelected, {});
+    };
+    return (_jsxs(Card, { className: "program-list-card mb-4 mr-4", isClickable: true, as: Link, to: `/subscription-program-progress/${program.uuid}`, "data-testid": "program-list-card", onClick: handleClick, children: [_jsx(Card.ImageCap, { src: getBannerImageURL() || programCardFallbackImage, srcAlt: `program card image for ${program.title}`, logoSrc: getOrgImageUrl(), logoAlt: program.authoringOrganizations && ((_a = program.authoringOrganizations[0]) === null || _a === void 0 ? void 0 : _a.key), className: "banner-image" }), _jsx(Card.Section, { className: "pb-0", children: _jsx("h3", { children: program.title }) }), _jsxs(Card.Section, { className: "d-flex flex-column flex-grow-1 overflow-hidden", children: [program.authoringOrganizations && (_jsx("span", { className: "d-flex align-items-center mb-1", children: program.authoringOrganizations.map(org => org.key).join(', ') })), _jsx("span", { className: "d-flex align-items-center program-type", children: program.type })] }), _jsx(Card.Section, { className: "pt-0", children: _jsx(ProgressCategoryBubbles, { inProgress: program.progress.inProgress, notStarted: program.progress.notStarted, completed: program.progress.completed }) })] }));
 };
 export default ProgramListCard;
 //# sourceMappingURL=ProgramListCard.js.map

package/dist/containers/ProgramDashboard/ProgramsList/ProgramListCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgramListCard.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramsList/ProgramListCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Link } from 'react-router-dom';\nimport {\n  breakpoints,\n  useWindowSize,\n  Card,\n} from '@openedx/paragon';\nimport programCardFallbackImage from '../assets/program-card-fallback.svg';\nimport { ProgramCardProps } from '../data/types';\nimport ProgressCategoryBubbles from './ProgressCategoryBubbles';\n\nconst ProgramListCard: React.FC<ProgramCardProps> = ({\n  program,\n}) => {\n  const { width: windowWidth } = useWindowSize();\n\n  const getBannerImageURL = (): string => {\n    let imageURL = '';\n    // We need to check that the breakpoint value exists before using it\n    // Otherwise TypeScript will flag it as it can potentially be undefined in Paragon\n    if (program.bannerImage && Object.keys(program.bannerImage).length > 0) {\n      if (!windowWidth) {\n        return program.bannerImage.medium.url;\n      }\n\n      if (typeof breakpoints.large.minWidth === 'number' && windowWidth >= breakpoints.large.minWidth) {\n        imageURL = program.bannerImage.large.url;\n      } else if (typeof breakpoints.medium.minWidth === 'number' && windowWidth >= breakpoints.medium.minWidth) {\n        imageURL = program.bannerImage.medium.url;\n      } else if (typeof breakpoints.small.minWidth === 'number' && windowWidth >= breakpoints.small.minWidth) {\n        imageURL = program.bannerImage.small.url;\n      } else {\n        imageURL = program.bannerImage.xSmall.url;\n      }\n    }\n    return imageURL;\n  };\n\n  const getOrgImageUrl = (): string => {\n    if (program.authoringOrganizations?.length === 1 && program.authoringOrganizations[0].logoImageUrl) {\n      return program.authoringOrganizations[0].logoImageUrl;\n    }\n    return '';\n  };\n\n  return (\n    <Card\n      className=\"program-list-card mb-4 mr-4\"\n      isClickable\n      as={Link}\n      to={`/subscription-program-progress/${program.uuid}`}\n      data-testid=\"program-list-card\"\n    >\n      <Card.ImageCap\n        src={getBannerImageURL() || programCardFallbackImage}\n        srcAlt={`program card image for ${program.title}`}\n        logoSrc={getOrgImageUrl()}\n        logoAlt={program.authoringOrganizations && program.authoringOrganizations[0]?.key}\n        className=\"banner-image\"\n      />\n      <Card.Section className=\"pb-0\">\n        <h3>{program.title}</h3>\n      </Card.Section>\n      <Card.Section className=\"d-flex flex-column flex-grow-1 overflow-hidden\">\n        {program.authoringOrganizations && (\n          <span className=\"d-flex align-items-center mb-1\">\n            {program.authoringOrganizations.map(org => org.key).join(', ')}\n          </span>\n        )}\n        <span className=\"d-flex align-items-center program-type\">\n          {program.type}\n        </span>\n      </Card.Section>\n      <Card.Section className=\"pt-0\">\n        <ProgressCategoryBubbles\n          inProgress={program.progress.inProgress}\n          notStarted={program.progress.notStarted}\n          completed={program.progress.completed}\n        />\n      </Card.Section>\n    </Card>\n  );\n};\nexport default ProgramListCard;\n"]}
+{"version":3,"file":"ProgramListCard.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramsList/ProgramListCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Link } from 'react-router-dom';\nimport {\n  breakpoints,\n  useWindowSize,\n  Card,\n} from '@openedx/paragon';\nimport programCardFallbackImage from '../assets/program-card-fallback.svg';\nimport { ProgramCardProps } from '../data/types';\nimport ProgressCategoryBubbles from './ProgressCategoryBubbles';\nimport { eventNames, trackSubscriptionEvent } from '@src/tracking/trackers/subscription';\n\nconst ProgramListCard: React.FC<ProgramCardProps> = ({\n  program,\n}) => {\n  const { width: windowWidth } = useWindowSize();\n\n  const getBannerImageURL = (): string => {\n    let imageURL = '';\n    // We need to check that the breakpoint value exists before using it\n    // Otherwise TypeScript will flag it as it can potentially be undefined in Paragon\n    if (program.bannerImage && Object.keys(program.bannerImage).length > 0) {\n      if (!windowWidth) {\n        return program.bannerImage.medium.url;\n      }\n\n      if (typeof breakpoints.large.minWidth === 'number' && windowWidth >= breakpoints.large.minWidth) {\n        imageURL = program.bannerImage.large.url;\n      } else if (typeof breakpoints.medium.minWidth === 'number' && windowWidth >= breakpoints.medium.minWidth) {\n        imageURL = program.bannerImage.medium.url;\n      } else if (typeof breakpoints.small.minWidth === 'number' && windowWidth >= breakpoints.small.minWidth) {\n        imageURL = program.bannerImage.small.url;\n      } else {\n        imageURL = program.bannerImage.xSmall.url;\n      }\n    }\n    return imageURL;\n  };\n\n  const getOrgImageUrl = (): string => {\n    if (program.authoringOrganizations?.length === 1 && program.authoringOrganizations[0].logoImageUrl) {\n      return program.authoringOrganizations[0].logoImageUrl;\n    }\n    return '';\n  };\n\n  const handleClick = () => {\n    trackSubscriptionEvent(eventNames.cardTileSelected, {});\n  };\n\n  return (\n    <Card\n      className=\"program-list-card mb-4 mr-4\"\n      isClickable\n      as={Link}\n      to={`/subscription-program-progress/${program.uuid}`}\n      data-testid=\"program-list-card\"\n      onClick={handleClick}\n    >\n      <Card.ImageCap\n        src={getBannerImageURL() || programCardFallbackImage}\n        srcAlt={`program card image for ${program.title}`}\n        logoSrc={getOrgImageUrl()}\n        logoAlt={program.authoringOrganizations && program.authoringOrganizations[0]?.key}\n        className=\"banner-image\"\n      />\n      <Card.Section className=\"pb-0\">\n        <h3>{program.title}</h3>\n      </Card.Section>\n      <Card.Section className=\"d-flex flex-column flex-grow-1 overflow-hidden\">\n        {program.authoringOrganizations && (\n          <span className=\"d-flex align-items-center mb-1\">\n            {program.authoringOrganizations.map(org => org.key).join(', ')}\n          </span>\n        )}\n        <span className=\"d-flex align-items-center program-type\">\n          {program.type}\n        </span>\n      </Card.Section>\n      <Card.Section className=\"pt-0\">\n        <ProgressCategoryBubbles\n          inProgress={program.progress.inProgress}\n          notStarted={program.progress.notStarted}\n          completed={program.progress.completed}\n        />\n      </Card.Section>\n    </Card>\n  );\n};\nexport default ProgramListCard;\n"]}

package/dist/containers/ProgramDashboard/ProgramsList/index.js

@@ -6,14 +6,22 @@ import ProgramListCard from './ProgramListCard';
 import messages from './messages';
 import { ProgramPaginationListLabel } from '../../../data/constants/app';
 import './index.scss';
+import { eventNames, trackSubscriptionEvent } from '../../../tracking/trackers/subscription';
 const ProgramsList = ({ visiblePrograms, isLoading, errorState, numPages, setPageNumber }) => {
     const { formatMessage } = useIntl();
+    const handlePageSelect = (pageNumber) => {
+        trackSubscriptionEvent(eventNames.paginationPageSelected, {
+            page_number: pageNumber,
+            total_pages: numPages,
+        });
+        setPageNumber(pageNumber);
+    };
     const renderPrograms = () => {
         if (isLoading) {
             return (_jsx(Col, { sm: 12, className: "d-flex justify-content-center py-4", children: _jsx(Spinner, { animation: "border", screenReaderText: formatMessage(appMessages['subs-dash.loadingSR']) }) }));
         }
         if (visiblePrograms.length > 0) {
-            return (_jsx(_Fragment, { children: _jsxs(Col, { sm: 12, md: 12, children: [_jsx(CardGrid, { columnSizes: { xs: 12, lg: 6 }, children: visiblePrograms.map(program => (_jsx(ProgramListCard, { program: program }, program.uuid))) }), numPages > 1 && (_jsx(Pagination, { variant: "secondary", paginationLabel: ProgramPaginationListLabel, className: "mx-auto mb-2", pageCount: numPages, onPageSelect: setPageNumber }))] }) }));
+            return (_jsx(_Fragment, { children: _jsxs(Col, { sm: 12, md: 12, children: [_jsx(CardGrid, { columnSizes: { xs: 12, lg: 6 }, children: visiblePrograms.map(program => (_jsx(ProgramListCard, { program: program }, program.uuid))) }), numPages > 1 && (_jsx(Pagination, { variant: "secondary", paginationLabel: ProgramPaginationListLabel, className: "mx-auto mb-2", pageCount: numPages, onPageSelect: handlePageSelect }))] }) }));
         }
         return null;
     };

package/dist/containers/ProgramDashboard/ProgramsList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramsList/index.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,EAC/C,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,WAAW,MAAM,mBAAmB,CAAC;AAC5C,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAErE,OAAO,cAAc,CAAC;AAEtB,MAAM,YAAY,GAA0B,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE;IAClH,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,SAAS,EAAE,CAAC;YACd,OAAO,CACL,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,oCAAoC,YACzD,KAAC,OAAO,IAAC,SAAS,EAAC,QAAQ,EAAC,gBAAgB,EAAE,aAAa,CAAC,WAAW,CAAC,qBAAqB,CAAC,CAAC,GAAI,GAC/F,CACP,CAAC;QACJ,CAAC;QACD,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC/B,OAAO,CACL,4BACE,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,aACjB,KAAC,QAAQ,IAAC,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,YACrC,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAC9B,KAAC,eAAe,IAEd,OAAO,EAAE,OAAO,IADX,OAAO,CAAC,IAAI,CAEjB,CACH,CAAC,GACO,EACV,QAAQ,GAAG,CAAC,IAAI,CACf,KAAC,UAAU,IACT,OAAO,EAAC,WAAW,EACnB,eAAe,EAAE,0BAA0B,EAC3C,SAAS,EAAC,cAAc,EACxB,SAAS,EAAE,QAAQ,EACnB,YAAY,EAAE,aAAa,GAC3B,CACH,IACG,GACL,CACJ,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,MAAM,UAAU,GAAG,GAAG,aAAa,EAAE,CAAC,UAAU,UAAU,CAAC;QAC3D,OAAO,CACL,KAAC,KAAK,IAAC,SAAS,EAAC,yBAAyB,EAAC,OAAO,EAAC,QAAQ,YACxD,aAAa,CAAC,QAAQ,CAAC,8BAA8B,EAAE;gBACtD,iBAAiB,EAAE,CACjB,KAAC,KAAK,CAAC,IAAI,IAAC,IAAI,EAAE,UAAU,YACzB,UAAU,GACA,CACd;aACF,CAAC,GACI,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,wBACE,KAAC,GAAG,IAAC,SAAS,EAAC,MAAM,YAClB,UAAU,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,GACjD,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import React from 'react';\nimport {\n  Alert, CardGrid, Col, Row, Spinner, Pagination\n} from '@openedx/paragon';\nimport { useIntl, getSiteConfig } from '@openedx/frontend-base';\nimport appMessages from '../../../messages';\nimport ProgramListCard from './ProgramListCard';\nimport messages from './messages';\nimport { ProgramList } from '../data/types';\nimport { ProgramPaginationListLabel } from '@src/data/constants/app';\n\nimport './index.scss';\n\nconst ProgramsList: React.FC<ProgramList> = ({ visiblePrograms, isLoading, errorState, numPages, setPageNumber }) => {\n  const { formatMessage } = useIntl();\n\n  const renderPrograms = () => {\n    if (isLoading) {\n      return (\n        <Col sm={12} className=\"d-flex justify-content-center py-4\">\n          <Spinner animation=\"border\" screenReaderText={formatMessage(appMessages['subs-dash.loadingSR'])} />\n        </Col>\n      );\n    }\n    if (visiblePrograms.length > 0) {\n      return (\n        <>\n          <Col sm={12} md={12}>\n            <CardGrid columnSizes={{ xs: 12, lg: 6 }}>\n              {visiblePrograms.map(program => (\n                <ProgramListCard\n                  key={program.uuid}\n                  program={program}\n                />\n              ))}\n            </CardGrid>\n            {numPages > 1 && (\n              <Pagination\n                variant=\"secondary\"\n                paginationLabel={ProgramPaginationListLabel}\n                className=\"mx-auto mb-2\"\n                pageCount={numPages}\n                onPageSelect={setPageNumber}\n              />\n            )}\n          </Col>\n        </>\n      );\n    }\n    return null;\n  };\n\n  const renderFailureAlert = () => {\n    const contactUrl = `${getSiteConfig().lmsBaseUrl}/contact`;\n    return (\n      <Alert className=\"mx-auto container-mw-md\" variant=\"danger\">\n        {formatMessage(messages.errorLoadingProgramEnrollments, {\n          contactSupportUrl: (\n            <Alert.Link href={contactUrl}>\n              {contactUrl}\n            </Alert.Link>\n          ),\n        })}\n      </Alert>\n    );\n  };\n\n  return (\n    <div>\n      <Row className=\"py-3\">\n        {errorState ? renderFailureAlert() : renderPrograms()}\n      </Row>\n    </div>\n  );\n};\n\nexport default ProgramsList;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/containers/ProgramDashboard/ProgramsList/index.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,EAC/C,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,WAAW,MAAM,mBAAmB,CAAC;AAC5C,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAErE,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAEzF,MAAM,YAAY,GAA0B,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,EAAE,EAAE;IAClH,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IAEpC,MAAM,gBAAgB,GAAG,CAAC,UAAU,EAAE,EAAE;QACtC,sBAAsB,CAAC,UAAU,CAAC,sBAAsB,EAAE;YACxD,WAAW,EAAE,UAAU;YACvB,WAAW,EAAE,QAAQ;SACtB,CAAC,CAAC;QACH,aAAa,CAAC,UAAU,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,SAAS,EAAE,CAAC;YACd,OAAO,CACL,KAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAC,oCAAoC,YACzD,KAAC,OAAO,IAAC,SAAS,EAAC,QAAQ,EAAC,gBAAgB,EAAE,aAAa,CAAC,WAAW,CAAC,qBAAqB,CAAC,CAAC,GAAI,GAC/F,CACP,CAAC;QACJ,CAAC;QACD,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC/B,OAAO,CACL,4BACE,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,aACjB,KAAC,QAAQ,IAAC,WAAW,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,YACrC,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAC9B,KAAC,eAAe,IAEd,OAAO,EAAE,OAAO,IADX,OAAO,CAAC,IAAI,CAEjB,CACH,CAAC,GACO,EACV,QAAQ,GAAG,CAAC,IAAI,CACf,KAAC,UAAU,IACT,OAAO,EAAC,WAAW,EACnB,eAAe,EAAE,0BAA0B,EAC3C,SAAS,EAAC,cAAc,EACxB,SAAS,EAAE,QAAQ,EACnB,YAAY,EAAE,gBAAgB,GAC9B,CACH,IACG,GACL,CACJ,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,MAAM,UAAU,GAAG,GAAG,aAAa,EAAE,CAAC,UAAU,UAAU,CAAC;QAC3D,OAAO,CACL,KAAC,KAAK,IAAC,SAAS,EAAC,yBAAyB,EAAC,OAAO,EAAC,QAAQ,YACxD,aAAa,CAAC,QAAQ,CAAC,8BAA8B,EAAE;gBACtD,iBAAiB,EAAE,CACjB,KAAC,KAAK,CAAC,IAAI,IAAC,IAAI,EAAE,UAAU,YACzB,UAAU,GACA,CACd;aACF,CAAC,GACI,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,wBACE,KAAC,GAAG,IAAC,SAAS,EAAC,MAAM,YAClB,UAAU,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,GACjD,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import React from 'react';\nimport {\n  Alert, CardGrid, Col, Row, Spinner, Pagination\n} from '@openedx/paragon';\nimport { useIntl, getSiteConfig } from '@openedx/frontend-base';\nimport appMessages from '../../../messages';\nimport ProgramListCard from './ProgramListCard';\nimport messages from './messages';\nimport { ProgramList } from '../data/types';\nimport { ProgramPaginationListLabel } from '@src/data/constants/app';\n\nimport './index.scss';\nimport { eventNames, trackSubscriptionEvent } from '@src/tracking/trackers/subscription';\n\nconst ProgramsList: React.FC<ProgramList> = ({ visiblePrograms, isLoading, errorState, numPages, setPageNumber }) => {\n  const { formatMessage } = useIntl();\n\n  const handlePageSelect = (pageNumber) => {\n    trackSubscriptionEvent(eventNames.paginationPageSelected, {\n      page_number: pageNumber,\n      total_pages: numPages,\n    });\n    setPageNumber(pageNumber);\n  };\n\n  const renderPrograms = () => {\n    if (isLoading) {\n      return (\n        <Col sm={12} className=\"d-flex justify-content-center py-4\">\n          <Spinner animation=\"border\" screenReaderText={formatMessage(appMessages['subs-dash.loadingSR'])} />\n        </Col>\n      );\n    }\n    if (visiblePrograms.length > 0) {\n      return (\n        <>\n          <Col sm={12} md={12}>\n            <CardGrid columnSizes={{ xs: 12, lg: 6 }}>\n              {visiblePrograms.map(program => (\n                <ProgramListCard\n                  key={program.uuid}\n                  program={program}\n                />\n              ))}\n            </CardGrid>\n            {numPages > 1 && (\n              <Pagination\n                variant=\"secondary\"\n                paginationLabel={ProgramPaginationListLabel}\n                className=\"mx-auto mb-2\"\n                pageCount={numPages}\n                onPageSelect={handlePageSelect}\n              />\n            )}\n          </Col>\n        </>\n      );\n    }\n    return null;\n  };\n\n  const renderFailureAlert = () => {\n    const contactUrl = `${getSiteConfig().lmsBaseUrl}/contact`;\n    return (\n      <Alert className=\"mx-auto container-mw-md\" variant=\"danger\">\n        {formatMessage(messages.errorLoadingProgramEnrollments, {\n          contactSupportUrl: (\n            <Alert.Link href={contactUrl}>\n              {contactUrl}\n            </Alert.Link>\n          ),\n        })}\n      </Alert>\n    );\n  };\n\n  return (\n    <div>\n      <Row className=\"py-3\">\n        {errorState ? renderFailureAlert() : renderPrograms()}\n      </Row>\n    </div>\n  );\n};\n\nexport default ProgramsList;\n"]}

package/dist/containers/ProgramsPanel/NoProgramsView/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useIntl, getSiteConfig } from '@openedx/frontend-base';
+import track from '../../../tracking';
 import messages from './messages';
 import { Button } from '@openedx/paragon';
 import { Search } from '@openedx/paragon/icons';
@@ -7,7 +8,9 @@ import { searchPageUrl } from '../../../data/constants/app';
 export const NoProgramsView = () => {
     const { formatMessage } = useIntl();
     const baseUrl = getSiteConfig().baseUrl;
-    return (_jsxs("div", { className: "no-programs-content-view", children: [_jsx("p", { children: formatMessage(messages.inProgressProgramsPrompt) }), _jsx(Button, { variant: "brand", as: "a", href: `${baseUrl}${searchPageUrl}`, iconBefore: Search, children: formatMessage(messages.findProgramsButton) })] }));
+    const programSearchUrl = `${baseUrl}${searchPageUrl}`;
+    const handleClick = track.program.noProgramsViewClicked(programSearchUrl);
+    return (_jsxs("div", { className: "no-programs-content-view", children: [_jsx("p", { children: formatMessage(messages.inProgressProgramsPrompt) }), _jsx(Button, { variant: "brand", as: "a", href: programSearchUrl, iconBefore: Search, onClick: handleClick, children: formatMessage(messages.findProgramsButton) })] }));
 };
 export default NoProgramsView;
 //# sourceMappingURL=index.js.map

package/dist/containers/ProgramsPanel/NoProgramsView/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/containers/ProgramsPanel/NoProgramsView/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEhE,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,cAAc,GAAO,GAAG,EAAE;IACrC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC,OAAO,CAAC;IAExC,OAAO,CACL,eAAK,SAAS,EAAC,0BAA0B,aACvC,sBAAI,aAAa,CAAC,QAAQ,CAAC,wBAAwB,CAAC,GAAK,EACzD,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,EAAE,EAAC,GAAG,EACN,IAAI,EAAE,GAAG,OAAO,GAAG,aAAa,EAAE,EAClC,UAAU,EAAE,MAAM,YAEjB,aAAa,CAAC,QAAQ,CAAC,kBAAkB,CAAC,GACpC,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useIntl, getSiteConfig } from '@openedx/frontend-base';\n\nimport messages from './messages';\nimport { Button } from '@openedx/paragon';\nimport { Search } from '@openedx/paragon/icons';\nimport { searchPageUrl } from '@src/data/constants/app';\n\nexport const NoProgramsView: FC = () => {\n  const { formatMessage } = useIntl();\n  const baseUrl = getSiteConfig().baseUrl;\n\n  return (\n    <div className=\"no-programs-content-view\">\n      <p>{formatMessage(messages.inProgressProgramsPrompt)}</p>\n      <Button\n        variant=\"brand\"\n        as=\"a\"\n        href={`${baseUrl}${searchPageUrl}`}\n        iconBefore={Search}\n      >\n        {formatMessage(messages.findProgramsButton)}\n      </Button>\n    </div>\n  );\n};\n\nexport default NoProgramsView;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/containers/ProgramsPanel/NoProgramsView/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,KAAK,MAAM,eAAe,CAAC;AAElC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,cAAc,GAAO,GAAG,EAAE;IACrC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,MAAM,OAAO,GAAG,aAAa,EAAE,CAAC,OAAO,CAAC;IACxC,MAAM,gBAAgB,GAAG,GAAG,OAAO,GAAG,aAAa,EAAE,CAAC;IAEtD,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,qBAAqB,CAAC,gBAAgB,CAAC,CAAC;IAE1E,OAAO,CACL,eAAK,SAAS,EAAC,0BAA0B,aACvC,sBAAI,aAAa,CAAC,QAAQ,CAAC,wBAAwB,CAAC,GAAK,EACzD,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,EAAE,EAAC,GAAG,EACN,IAAI,EAAE,gBAAgB,EACtB,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,WAAW,YAEnB,aAAa,CAAC,QAAQ,CAAC,kBAAkB,CAAC,GACpC,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { FC } from 'react';\nimport { useIntl, getSiteConfig } from '@openedx/frontend-base';\nimport track from '@src/tracking';\n\nimport messages from './messages';\nimport { Button } from '@openedx/paragon';\nimport { Search } from '@openedx/paragon/icons';\nimport { searchPageUrl } from '@src/data/constants/app';\n\nexport const NoProgramsView: FC = () => {\n  const { formatMessage } = useIntl();\n  const baseUrl = getSiteConfig().baseUrl;\n  const programSearchUrl = `${baseUrl}${searchPageUrl}`;\n\n  const handleClick = track.program.noProgramsViewClicked(programSearchUrl);\n\n  return (\n    <div className=\"no-programs-content-view\">\n      <p>{formatMessage(messages.inProgressProgramsPrompt)}</p>\n      <Button\n        variant=\"brand\"\n        as=\"a\"\n        href={programSearchUrl}\n        iconBefore={Search}\n        onClick={handleClick}\n      >\n        {formatMessage(messages.findProgramsButton)}\n      </Button>\n    </div>\n  );\n};\n\nexport default NoProgramsView;\n"]}

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

@@ -8,6 +8,7 @@ import { utilHooks } from '../../../hooks';
 import messages from '../messages';
 import { manageSubscriptionURL } from '../../../data/constants/app';
 import { Link } from 'react-router-dom';
+import { eventNames, trackSubscriptionEvent } from '../../../tracking/trackers/subscription';
 export const SubscriptionBanner = ({ learnerSubscriptionData }) => {
     const { formatMessage } = useIntl();
     const [isDismissed, setIsDismissed] = useState(false);
@@ -106,12 +107,18 @@ export const SubscriptionBanner = ({ learnerSubscriptionData }) => {
     const getSubscriptionAction = useMemo(() => {
         if (status === 'CANCELLED' || status === 'CANCEL_PENDING') {
             return [
-                _jsx(Button, { "data-testid": "renew-button", className: "renew-button", variant: "primary", href: manageSubscriptionURL, target: "_blank", rel: "noopener noreferrer", role: "link", children: formatMessage(messages.renewSubscriptionButton) }, "renew-subscription"),
+                _jsx(Button, { "data-testid": "renew-button", className: "renew-button", variant: "primary", href: manageSubscriptionURL, onClick: () => trackSubscriptionEvent(eventNames.subscriptionBannerActionClicked, {
+                        subscription_status: status,
+                        action: 'renew',
+                    }), target: "_blank", rel: "noopener noreferrer", role: "link", children: formatMessage(messages.renewSubscriptionButton) }, "renew-subscription"),
             ];
         }
         if (status === 'RENEWAL_FAILED') {
             return [
-                _jsx(Button, { "data-testid": "renew-failed-button", className: "renew-failed-button", variant: "primary", to: manageSubscriptionURL, target: "_blank", rel: "noopener noreferrer", role: "link", as: Link, children: formatMessage(messages.renewalFailedButton) }, "renew-failed-subscription"),
+                _jsx(Button, { "data-testid": "renew-failed-button", className: "renew-failed-button", variant: "primary", to: manageSubscriptionURL, onClick: () => trackSubscriptionEvent(eventNames.subscriptionBannerActionClicked, {
+                        subscription_status: status,
+                        action: 'renewal_failed',
+                    }), target: "_blank", rel: "noopener noreferrer", role: "link", as: Link, children: formatMessage(messages.renewalFailedButton) }, "renew-failed-subscription"),
             ];
         }
         return [];
@@ -130,7 +137,16 @@ export const SubscriptionBanner = ({ learnerSubscriptionData }) => {
         && bannerBody
         && !isDismissed
         && bannerVariant);
-    return (_jsx("div", { className: "mt-4.5 mb-4.5", children: shouldShowBanner && (_jsxs(Alert, { variant: bannerVariant, icon: bannerIcon, dismissible: true, closeLabel: "Dismiss", onClose: () => setIsDismissed(true), actions: getSubscriptionAction, children: [_jsx(Alert.Heading, { children: bannerTitle }), _jsx("p", { children: bannerBody })] })) }));
+    useEffect(() => {
+        if (shouldShowBanner) {
+            trackSubscriptionEvent(eventNames.subscriptionBannerViewed, { subscription_status: status });
+        }
+    }, [shouldShowBanner, status]);
+    const handleDismiss = () => {
+        trackSubscriptionEvent(eventNames.subscriptionBannerDismissed, { subscription_status: status });
+        setIsDismissed(true);
+    };
+    return (_jsx("div", { className: "mt-4.5 mb-4.5", children: shouldShowBanner && (_jsxs(Alert, { variant: bannerVariant, icon: bannerIcon, dismissible: true, closeLabel: "Dismiss", onClose: handleDismiss, actions: getSubscriptionAction, children: [_jsx(Alert.Heading, { children: bannerTitle }), _jsx("p", { children: bannerBody })] })) }));
 };
 export default SubscriptionBanner;
 //# sourceMappingURL=SubscriptionBanner.js.map

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            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"]}
+{"version":3,"file":"SubscriptionBanner.js","sourceRoot":"","sources":["../../../../src/containers/SubscriptionBanner/components/SubscriptionBanner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, useEffect, useState, useMemo } from 'react';\nimport { Alert, Button, Variant } from '@openedx/paragon';\nimport { CheckCircle, Info } from '@openedx/paragon/icons';\nimport { useIntl } from '@openedx/frontend-base';\nimport moment from 'moment';\nimport { utilHooks } from '@src/hooks';\nimport messages from '../messages';\nimport { manageSubscriptionURL } from '@src/data/constants/app';\nimport { Link } from 'react-router-dom';\nimport { BannerItem } from '../types';\nimport { eventNames, trackSubscriptionEvent } from '@src/tracking/trackers/subscription';\n\nexport const SubscriptionBanner: FC<BannerItem> = ({ learnerSubscriptionData }) => {\n  const { formatMessage } = useIntl();\n\n  const [isDismissed, setIsDismissed] = useState(false);\n  const [bannerBody, setBannerBody] = useState('');\n  const [bannerTitle, setBannerTitle] = useState('');\n  const [bannerVariant, setBannerVariant] = useState<Variant | undefined>(undefined);\n\n  const formatDate = utilHooks.useFormatDate();\n\n  const {\n    status,\n    subscriptionEndDate,\n    subscriptionStartDate,\n    currentPeriodEnd,\n    trialEndDate,\n  } = learnerSubscriptionData;\n\n  useEffect(() => {\n    if (!status) {\n      setBannerTitle('');\n      setBannerBody('');\n      setBannerVariant(undefined);\n      return;\n    }\n\n    const trialEndDateMoment = moment(trialEndDate).startOf('day');\n    const today = moment().startOf('day');\n\n    const trialDaysLeft = trialEndDateMoment.isValid()\n      ? Math.max(0, trialEndDateMoment.diff(today, 'days'))\n      : 0;\n\n    const daysLeftAfterCancellation = moment(currentPeriodEnd).isValid()\n      ? Math.max(0, moment(currentPeriodEnd).diff(today, 'days'))\n      : 0;\n\n    switch (status) {\n      case 'RENEWAL_PENDING':\n        setBannerVariant('success');\n        setBannerTitle(formatMessage(messages.renewalPendingTitle));\n        setBannerBody(\n          formatMessage(messages.renewalPendingBody, {\n            subscriptionRenewalDate: formatDate(\n              currentPeriodEnd\n            ),\n          }),\n        );\n        break;\n\n      case 'TRIAL_ACTIVE':\n        setBannerVariant('success');\n\n        if (trialDaysLeft === 0) {\n          setBannerTitle(\n            formatMessage(messages.activeTrialSubscriptionTitleToday),\n          );\n        } else if (trialDaysLeft === 1) {\n          setBannerTitle(\n            formatMessage(messages.activeTrialSubscriptionTitleTomorrow),\n          );\n        } else if (\n          moment(subscriptionStartDate).isValid()\n          && moment(subscriptionStartDate).isSame(moment(), 'day')\n        ) {\n          setBannerTitle(\n            formatMessage(messages.activeSubscriptionTitle),\n          );\n\n          setBannerBody(\n            formatMessage(messages.activeSubscriptionBody, {\n              subscriptionRenewalDate: formatDate(\n                currentPeriodEnd\n              ),\n            }),\n          );\n\n          return;\n        } else {\n          setBannerTitle(\n            formatMessage(messages.activeTrialSubscriptionTitle, {\n              daysLeft: trialDaysLeft,\n            }),\n          );\n        }\n\n        setBannerBody(\n          formatMessage(messages.activeTrialSubscriptionBody, {\n            trialEndDate: formatDate(trialEndDate),\n          }),\n        );\n        break;\n\n      case 'CANCEL_PENDING':\n        setBannerVariant('light');\n        setBannerTitle(\n          formatMessage(messages.cancelledSubscriptionTitle, {\n            daysLeft: daysLeftAfterCancellation,\n          }),\n        );\n        setBannerBody(\n          formatMessage(messages.cancelledSubscriptionBody, {\n            subscriptionRenewalEndDate: formatDate(currentPeriodEnd),\n          }),\n        );\n        break;\n\n      case 'CANCELLED':\n        setBannerVariant('light');\n        setBannerTitle(\n          formatMessage(messages.cancelledSubscriptionTitle),\n        );\n        setBannerBody(\n          formatMessage(messages.cancelledSubscriptionBody, {\n            subscriptionRenewalEndDate: formatDate(currentPeriodEnd),\n          }),\n        );\n        break;\n\n      case 'RENEWAL_FAILED':\n        setBannerVariant('light');\n        setBannerTitle(\n          formatMessage(messages.renewalFailedTitle),\n        );\n        setBannerBody(\n          formatMessage(messages.renewalFailedBody, {\n            subscriptionRenewalDate: formatDate(\n              currentPeriodEnd\n            ),\n          }),\n        );\n        break;\n\n      default:\n        break;\n    }\n  }, [\n    status,\n    formatDate,\n    formatMessage,\n    subscriptionEndDate,\n    subscriptionStartDate,\n    currentPeriodEnd,\n    trialEndDate,\n  ]);\n\n  // Reset dismissal when the subscription status changes.\n  useEffect(() => {\n    setIsDismissed(false);\n  }, [status]);\n\n  const getSubscriptionAction = useMemo(() => {\n    if (status === 'CANCELLED' || status === 'CANCEL_PENDING') {\n      return [\n        <Button\n          key=\"renew-subscription\"\n          data-testid=\"renew-button\"\n          className=\"renew-button\"\n          variant=\"primary\"\n          href={manageSubscriptionURL}\n          onClick={() => trackSubscriptionEvent(eventNames.subscriptionBannerActionClicked, {\n            subscription_status: status,\n            action: 'renew',\n          })}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          role=\"link\"\n        >\n          {formatMessage(messages.renewSubscriptionButton)}\n        </Button>,\n      ];\n    }\n\n    if (status === 'RENEWAL_FAILED') {\n      return [\n        <Button\n          key=\"renew-failed-subscription\"\n          data-testid=\"renew-failed-button\"\n          className=\"renew-failed-button\"\n          variant=\"primary\"\n          to={manageSubscriptionURL}\n          onClick={() => trackSubscriptionEvent(eventNames.subscriptionBannerActionClicked, {\n            subscription_status: status,\n            action: 'renewal_failed',\n          })}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          role=\"link\"\n          as={Link}\n        >\n          {formatMessage(messages.renewalFailedButton)}\n        </Button>,\n      ];\n    }\n\n    return [];\n  }, [formatMessage, status]);\n\n  const subscriptionStatusIcons: Record<\n    string,\n    typeof Info | undefined\n  > = {\n    TRIAL_ACTIVE: CheckCircle,\n    RENEWAL_PENDING: CheckCircle,\n  };\n\n  const bannerIcon = (subscriptionStatusIcons[status]\n    && moment(subscriptionStartDate).isValid()\n    && moment(subscriptionStartDate).isSame(moment(), 'day'))\n    ? subscriptionStatusIcons[status]\n    : undefined;\n\n  const shouldShowBanner = Boolean(\n    status\n    && bannerTitle\n    && bannerBody\n    && !isDismissed\n    && bannerVariant\n  );\n\n  useEffect(() => {\n    if (shouldShowBanner) {\n      trackSubscriptionEvent(eventNames.subscriptionBannerViewed, { subscription_status: status });\n    }\n  }, [shouldShowBanner, status]);\n\n  const handleDismiss = () => {\n    trackSubscriptionEvent(eventNames.subscriptionBannerDismissed, { subscription_status: status });\n    setIsDismissed(true);\n  };\n\n  return (\n    <div className=\"mt-4.5 mb-4.5\">\n      {shouldShowBanner && (\n        <Alert\n          variant={bannerVariant}\n          icon={bannerIcon}\n          dismissible\n          closeLabel=\"Dismiss\"\n          onClose={handleDismiss}\n          actions={getSubscriptionAction}\n        >\n          <Alert.Heading>{bannerTitle}</Alert.Heading>\n          <p>{bannerBody}</p>\n        </Alert>\n      )}\n    </div>\n  );\n};\n\nexport default SubscriptionBanner;\n"]}