@openedx/frontend-app-catalog 1.0.0-alpha.0

package/dist/course-about/CourseAboutPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CourseAboutPage.js","sourceRoot":"","sources":["../../src/course-about/CourseAboutPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useParams } from 'react-router';\nimport { Helmet } from 'react-helmet';\nimport {\n  Container, Layout, Alert, useMediaQuery, breakpoints, Stack,\n} from '@openedx/paragon';\nimport {\n  ErrorPage, getAppConfig, getSiteConfig, useIntl,\n} from '@openedx/frontend-base';\n\nimport { Loading } from '@src/generic';\nimport { appId } from '@src/constants';\nimport CourseAboutIntroSlot from '@src/slots/CourseAboutIntroSlot';\nimport CourseAboutCourseMediaSlot from '@src/slots/CourseAboutCourseMediaSlot';\nimport CourseAboutOverviewSlot from '@src/slots/CourseAboutOverviewSlot';\nimport CourseAboutSidebarSlot from '@src/slots/CourseAboutSidebarSlot';\nimport { useCourseAboutData } from './data/hooks';\nimport messages from './messages';\nimport { GRID_LAYOUT } from './layout';\n\nconst CourseAboutPage = () => {\n  const intl = useIntl();\n  const { courseId = '' } = useParams<{ courseId: string }>();\n  const isSmallScreen = useMediaQuery({ maxWidth: breakpoints.large.maxWidth });\n  const {\n    data: courseAboutData,\n    isLoading,\n    isError,\n  } = useCourseAboutData(courseId);\n\n  if (isLoading) {\n    return <Loading />;\n  }\n\n  if (isError) {\n    return (\n      <Container className=\"py-5.5\">\n        <Alert variant=\"danger\">\n          <ErrorPage\n            // @ts-expect-error frontend-base ErrorPage declares message?: null but renders the prop as text. Remove when typing is fixed upstream.\n            message={intl.formatMessage(messages.errorMessage, {\n              supportEmail: getAppConfig(appId).INFO_EMAIL as string,\n            })}\n          />\n        </Alert>\n      </Container>\n    );\n  }\n\n  return (\n    <>\n      <Helmet>\n        <title>\n          {intl.formatMessage(messages.pageTitle, {\n            courseName: courseAboutData?.name ?? '',\n            siteName: getSiteConfig().siteName,\n          })}\n        </title>\n      </Helmet>\n      <Container fluid={false} size=\"xl\" className=\"py-5.5\">\n        <Layout {...GRID_LAYOUT}>\n          <Layout.Element>\n            {isSmallScreen ? (\n              <Stack gap={4}>\n                <Layout.Element className=\"course-media-wrapper text-center\">\n                  <CourseAboutCourseMediaSlot courseAboutData={courseAboutData} />\n                </Layout.Element>\n                <CourseAboutIntroSlot courseAboutData={courseAboutData} />\n                <CourseAboutOverviewSlot\n                  overviewData={courseAboutData.overview}\n                  courseId={courseId}\n                />\n                <CourseAboutSidebarSlot courseAboutData={courseAboutData} />\n              </Stack>\n            ) : (\n              <Stack gap={4}>\n                <CourseAboutIntroSlot courseAboutData={courseAboutData} />\n                <CourseAboutOverviewSlot\n                  overviewData={courseAboutData.overview}\n                  courseId={courseId}\n                />\n              </Stack>\n            )}\n          </Layout.Element>\n          <Layout.Element>\n            {!isSmallScreen && (\n              <Stack gap={4}>\n                <Layout.Element className=\"course-media-wrapper\">\n                  <CourseAboutCourseMediaSlot courseAboutData={courseAboutData} />\n                </Layout.Element>\n                <CourseAboutSidebarSlot courseAboutData={courseAboutData} />\n              </Stack>\n            )}\n          </Layout.Element>\n        </Layout>\n      </Container>\n    </>\n  );\n};\n\nexport default CourseAboutPage;\n"]}

package/dist/course-about/CourseAboutPage.scss

@@ -0,0 +1,36 @@
+@use "./course-intro/course-media/CourseMedia";
+
+.course-about-intro .pgn__card {
+  min-height: var(--catalog-course-about-page-intro-card-min-height, var(--catalog-course-about-page-course-media-image-height, 15.75rem));
+}
+
+// This is used by the legacy course about page to ensure course staff photos
+// are reasonably sized and the text layout is reasonable.
+// 
+// These classes are included in the placeholder content for that section
+// https://github.com/openedx/edx-platform/blob/master/xmodule/templates/about/overview.yaml
+// and the legacy styles live here
+// https://github.com/openedx/edx-platform/blob/master/lms/static/sass/multicourse/_course_about.scss
+.course-about-overview .teacher {
+  margin-top: var(--pgn-spacing-spacer-base);
+  margin-bottom: var(--pgn-spacing-spacer-base);
+
+  .teacher-image {
+    width: calc(var(--pgn-spacing-spacer-base) * 8);
+
+    img {
+      min-height: 100%;
+      max-width: 100%;
+      margin-inline-end: calc(var(--pgn-spacing-spacer-base) * .5);
+    }
+  }
+
+  // This was handled in the legacy styles by including a clearfix mixin
+  // https://github.com/openedx/edx-platform/blob/ca78895edf6cd017c6870d3671c01dfb19125fd1/lms/static/sass/multicourse/_course_about.scss#L367
+  // https://github.com/openedx/edx-platform/blob/master/common/static/sass/bourbon/addons/_clearfix.scss
+  &::after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}

package/dist/course-about/course-intro/CourseIntro.d.ts

@@ -0,0 +1,4 @@
+import type { CourseAboutDataPartial } from '../types';
+export declare const CourseIntro: ({ courseAboutData }: {
+    courseAboutData: CourseAboutDataPartial;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/course-about/course-intro/CourseIntro.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, Container } from '@openedx/paragon';
+import { getAuthenticatedUser } from '@openedx/frontend-base';
+import { useEnrollmentActions, useEnrollmentStatus } from './hooks';
+export const CourseIntro = ({ courseAboutData }) => {
+    const authenticatedUser = getAuthenticatedUser();
+    const { id: courseId, displayOrgWithDefault: courseOrg, name: courseName, shortDescription, ecommerceCheckoutLink, } = courseAboutData;
+    const { enrollmentError, isEnrollmentPending, handleChangeEnrollment, handleEcommerceCheckout, } = useEnrollmentActions({ courseId, ecommerceCheckoutLink });
+    const { renderStatusContent } = useEnrollmentStatus({
+        courseAboutData,
+        enrollmentError,
+        authenticatedUser,
+        isEnrollmentPending,
+        handleChangeEnrollment,
+        handleEcommerceCheckout,
+    });
+    return (_jsx(Container, { className: "course-about-intro px-0", children: _jsxs(Card, { children: [_jsx(Card.Header, { title: _jsx("h1", { className: "my-0", children: courseName }), subtitle: courseOrg }), _jsx(Card.Section, { children: shortDescription }), _jsx(Card.Footer, { className: "justify-content-start", children: renderStatusContent() })] }) }));
+};
+//# sourceMappingURL=CourseIntro.js.map

package/dist/course-about/course-intro/CourseIntro.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CourseIntro.js","sourceRoot":"","sources":["../../../src/course-about/course-intro/CourseIntro.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEpE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,eAAe,EAA+C,EAAE,EAAE;IAC9F,MAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAC;IAEjD,MAAM,EACJ,EAAE,EAAE,QAAQ,EACZ,qBAAqB,EAAE,SAAS,EAChC,IAAI,EAAE,UAAU,EAChB,gBAAgB,EAChB,qBAAqB,GACtB,GAAG,eAAe,CAAC;IAEpB,MAAM,EACJ,eAAe,EACf,mBAAmB,EACnB,sBAAsB,EACtB,uBAAuB,GACxB,GAAG,oBAAoB,CAAC,EAAE,QAAQ,EAAE,qBAAqB,EAAE,CAAC,CAAC;IAE9D,MAAM,EAAE,mBAAmB,EAAE,GAAG,mBAAmB,CAAC;QAClD,eAAe;QACf,eAAe;QACf,iBAAiB;QACjB,mBAAmB;QACnB,sBAAsB;QACtB,uBAAuB;KACxB,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,SAAS,IAAC,SAAS,EAAC,yBAAyB,YAC5C,MAAC,IAAI,eACH,KAAC,IAAI,CAAC,MAAM,IACV,KAAK,EAAE,aAAI,SAAS,EAAC,MAAM,YAAE,UAAU,GAAM,EAC7C,QAAQ,EAAE,SAAS,GACnB,EACF,KAAC,IAAI,CAAC,OAAO,cACV,gBAAgB,GACJ,EACf,KAAC,IAAI,CAAC,MAAM,IAAC,SAAS,EAAC,uBAAuB,YAC3C,mBAAmB,EAAE,GACV,IACT,GACG,CACb,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Card, Container } from '@openedx/paragon';\nimport { getAuthenticatedUser } from '@openedx/frontend-base';\n\nimport type { CourseAboutDataPartial } from '../types';\nimport { useEnrollmentActions, useEnrollmentStatus } from './hooks';\n\nexport const CourseIntro = ({ courseAboutData }: { courseAboutData: CourseAboutDataPartial }) => {\n  const authenticatedUser = getAuthenticatedUser();\n\n  const {\n    id: courseId,\n    displayOrgWithDefault: courseOrg,\n    name: courseName,\n    shortDescription,\n    ecommerceCheckoutLink,\n  } = courseAboutData;\n\n  const {\n    enrollmentError,\n    isEnrollmentPending,\n    handleChangeEnrollment,\n    handleEcommerceCheckout,\n  } = useEnrollmentActions({ courseId, ecommerceCheckoutLink });\n\n  const { renderStatusContent } = useEnrollmentStatus({\n    courseAboutData,\n    enrollmentError,\n    authenticatedUser,\n    isEnrollmentPending,\n    handleChangeEnrollment,\n    handleEcommerceCheckout,\n  });\n\n  return (\n    <Container className=\"course-about-intro px-0\">\n      <Card>\n        <Card.Header\n          title={<h1 className=\"my-0\">{courseName}</h1>}\n          subtitle={courseOrg}\n        />\n        <Card.Section>\n          {shortDescription}\n        </Card.Section>\n        <Card.Footer className=\"justify-content-start\">\n          {renderStatusContent()}\n        </Card.Footer>\n      </Card>\n    </Container>\n  );\n};\n"]}

package/dist/course-about/course-intro/components/EnrolledStatus.d.ts

@@ -0,0 +1,2 @@
+import type { EnrolledStatusTypes } from './types';
+export declare const EnrolledStatus: ({ showCoursewareLink, courseId }: EnrolledStatusTypes) => import("react/jsx-runtime").JSX.Element;

package/dist/course-about/course-intro/components/EnrolledStatus.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { breakpoints, Button, Stack, useMediaQuery, } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import { getLearningHomePageUrl } from '../utils';
+import messages from '../messages';
+import { STATUS_MESSAGE_VARIANTS } from '../constants';
+import { StatusMessage } from './StatusMessage';
+export const EnrolledStatus = ({ showCoursewareLink, courseId }) => {
+    const intl = useIntl();
+    const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });
+    return (_jsxs(Stack, { direction: isExtraSmall ? 'vertical' : 'horizontal', gap: isExtraSmall ? 2 : 5, children: [_jsx(StatusMessage, { variant: STATUS_MESSAGE_VARIANTS.SUCCESS, messageKey: "statusMessageEnrolled" }), showCoursewareLink && (_jsx(Button, { as: "a", href: getLearningHomePageUrl(courseId), children: intl.formatMessage(messages.viewCourseBtn) }))] }));
+};
+//# sourceMappingURL=EnrolledStatus.js.map

package/dist/course-about/course-intro/components/EnrolledStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnrolledStatus.js","sourceRoot":"","sources":["../../../../src/course-about/course-intro/components/EnrolledStatus.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,WAAW,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,GAC1C,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,kBAAkB,EAAE,QAAQ,EAAuB,EAAE,EAAE;IACtF,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,YAAY,GAAG,aAAa,CAAC,EAAE,QAAQ,EAAE,WAAW,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IAE7E,OAAO,CACL,MAAC,KAAK,IAAC,SAAS,EAAE,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,EAAE,GAAG,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,aACnF,KAAC,aAAa,IACZ,OAAO,EAAE,uBAAuB,CAAC,OAAO,EACxC,UAAU,EAAC,uBAAuB,GAClC,EACD,kBAAkB,IAAI,CACrB,KAAC,MAAM,IAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAE,sBAAsB,CAAC,QAAQ,CAAC,YAClD,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,GACpC,CACV,IACK,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  breakpoints, Button, Stack, useMediaQuery,\n} from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport { getLearningHomePageUrl } from '../utils';\nimport messages from '../messages';\nimport { STATUS_MESSAGE_VARIANTS } from '../constants';\nimport type { EnrolledStatusTypes } from './types';\nimport { StatusMessage } from './StatusMessage';\n\nexport const EnrolledStatus = ({ showCoursewareLink, courseId }: EnrolledStatusTypes) => {\n  const intl = useIntl();\n  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });\n\n  return (\n    <Stack direction={isExtraSmall ? 'vertical' : 'horizontal'} gap={isExtraSmall ? 2 : 5}>\n      <StatusMessage\n        variant={STATUS_MESSAGE_VARIANTS.SUCCESS}\n        messageKey=\"statusMessageEnrolled\"\n      />\n      {showCoursewareLink && (\n        <Button as=\"a\" href={getLearningHomePageUrl(courseId)}>\n          {intl.formatMessage(messages.viewCourseBtn)}\n        </Button>\n      )}\n    </Stack>\n  );\n};\n"]}

package/dist/course-about/course-intro/components/EnrollmentButton.d.ts

@@ -0,0 +1,2 @@
+import type { EnrollmentButtonTypes } from './types';
+export declare const EnrollmentButton: ({ onEnroll, singlePaidMode, ecommerceCheckout, isEnrollmentPending, onEcommerceCheckout, }: EnrollmentButtonTypes) => import("react/jsx-runtime").JSX.Element;

package/dist/course-about/course-intro/components/EnrollmentButton.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StatefulButton } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import messages from '../messages';
+export const EnrollmentButton = ({ onEnroll, singlePaidMode, ecommerceCheckout, isEnrollmentPending, onEcommerceCheckout, }) => {
+    const intl = useIntl();
+    return (_jsx(StatefulButton, { variant: Object.entries(singlePaidMode).length > 0 ? 'outline-primary' : 'primary', onClick: ecommerceCheckout ? onEcommerceCheckout : onEnroll, state: isEnrollmentPending ? 'pending' : 'default', labels: {
+            default: intl.formatMessage(messages.enrollNowBtn),
+            pending: intl.formatMessage(messages.enrollNowBtnPending),
+        } }));
+};
+//# sourceMappingURL=EnrollmentButton.js.map

package/dist/course-about/course-intro/components/EnrollmentButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnrollmentButton.js","sourceRoot":"","sources":["../../../../src/course-about/course-intro/components/EnrollmentButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AAGnC,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,cAAc,EACd,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,GACG,EAAE,EAAE;IAC1B,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,OAAO,CACL,KAAC,cAAc,IACb,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,SAAS,EAClF,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,QAAQ,EAC3D,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAClD,MAAM,EAAE;YACN,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,YAAY,CAAC;YAClD,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,mBAAmB,CAAC;SAC1D,GACD,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { StatefulButton } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport messages from '../messages';\nimport type { EnrollmentButtonTypes } from './types';\n\nexport const EnrollmentButton = ({\n  onEnroll,\n  singlePaidMode,\n  ecommerceCheckout,\n  isEnrollmentPending,\n  onEcommerceCheckout,\n}: EnrollmentButtonTypes) => {\n  const intl = useIntl();\n\n  return (\n    <StatefulButton\n      variant={Object.entries(singlePaidMode).length > 0 ? 'outline-primary' : 'primary'}\n      onClick={ecommerceCheckout ? onEcommerceCheckout : onEnroll}\n      state={isEnrollmentPending ? 'pending' : 'default'}\n      labels={{\n        default: intl.formatMessage(messages.enrollNowBtn),\n        pending: intl.formatMessage(messages.enrollNowBtnPending),\n      }}\n    />\n  );\n};\n"]}

package/dist/course-about/course-intro/components/StatusMessage.d.ts

@@ -0,0 +1,2 @@
+import type { StatusMessageTypes } from './types';
+export declare const StatusMessage: ({ variant, messageKey }: StatusMessageTypes) => import("react/jsx-runtime").JSX.Element;

package/dist/course-about/course-intro/components/StatusMessage.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Stack, Icon } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import messages from '../messages';
+import { STATUS_MESSAGE_ICONS, STATUS_MESSAGE_VARIANTS } from '../constants';
+export const StatusMessage = ({ variant, messageKey }) => {
+    const intl = useIntl();
+    const icon = useMemo(() => STATUS_MESSAGE_ICONS[variant] || STATUS_MESSAGE_ICONS[STATUS_MESSAGE_VARIANTS.INFO], [variant]);
+    return (_jsxs(Stack, { role: "status", direction: "horizontal", gap: 2, className: `text-${variant}-500 h4`, children: [_jsx(Icon, { src: icon }), intl.formatMessage(messages[messageKey])] }));
+};
+//# sourceMappingURL=StatusMessage.js.map

package/dist/course-about/course-intro/components/StatusMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusMessage.js","sourceRoot":"","sources":["../../../../src/course-about/course-intro/components/StatusMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAG7E,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,OAAO,EAAE,UAAU,EAAsB,EAAE,EAAE;IAC3E,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,MAAM,IAAI,GAAG,OAAO,CAClB,GAAG,EAAE,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,oBAAoB,CAAC,uBAAuB,CAAC,IAAI,CAAC,EACzF,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,CACL,MAAC,KAAK,IAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,YAAY,EAAC,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,OAAO,SAAS,aACrF,KAAC,IAAI,IAAC,GAAG,EAAE,IAAI,GAAI,EAClB,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,IACnC,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport { Stack, Icon } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport messages from '../messages';\nimport { STATUS_MESSAGE_ICONS, STATUS_MESSAGE_VARIANTS } from '../constants';\nimport type { StatusMessageTypes } from './types';\n\nexport const StatusMessage = ({ variant, messageKey }: StatusMessageTypes) => {\n  const intl = useIntl();\n\n  const icon = useMemo(\n    () => STATUS_MESSAGE_ICONS[variant] || STATUS_MESSAGE_ICONS[STATUS_MESSAGE_VARIANTS.INFO],\n    [variant],\n  );\n\n  return (\n    <Stack role=\"status\" direction=\"horizontal\" gap={2} className={`text-${variant}-500 h4`}>\n      <Icon src={icon} />\n      {intl.formatMessage(messages[messageKey])}\n    </Stack>\n  );\n};\n"]}

package/dist/course-about/course-intro/components/index.d.ts

@@ -0,0 +1,3 @@
+export { EnrollmentButton } from './EnrollmentButton';
+export { EnrolledStatus } from './EnrolledStatus';
+export { StatusMessage } from './StatusMessage';

package/dist/course-about/course-intro/components/index.js

@@ -0,0 +1,4 @@
+export { EnrollmentButton } from './EnrollmentButton';
+export { EnrolledStatus } from './EnrolledStatus';
+export { StatusMessage } from './StatusMessage';
+//# sourceMappingURL=index.js.map

package/dist/course-about/course-intro/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/course-about/course-intro/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { EnrollmentButton } from './EnrollmentButton';\nexport { EnrolledStatus } from './EnrolledStatus';\nexport { StatusMessage } from './StatusMessage';\n"]}

package/dist/course-about/course-intro/components/types.d.ts

@@ -0,0 +1,18 @@
+import { STATUS_MESSAGE_VARIANTS } from '../constants';
+import type { SinglePaidMode } from '../../types';
+export type StatusMessageVariant = typeof STATUS_MESSAGE_VARIANTS[keyof typeof STATUS_MESSAGE_VARIANTS];
+export interface EnrollmentButtonTypes {
+    singlePaidMode: SinglePaidMode;
+    ecommerceCheckout: boolean;
+    isEnrollmentPending: boolean;
+    onEnroll: () => void;
+    onEcommerceCheckout: () => void;
+}
+export interface EnrolledStatusTypes {
+    showCoursewareLink: boolean;
+    courseId: string;
+}
+export interface StatusMessageTypes {
+    variant: StatusMessageVariant;
+    messageKey: string;
+}

package/dist/course-about/course-intro/components/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/course-about/course-intro/components/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/course-about/course-intro/components/types.ts"],"names":[],"mappings":"","sourcesContent":["import { STATUS_MESSAGE_VARIANTS } from '../constants';\nimport type { SinglePaidMode } from '../../types';\n\nexport type StatusMessageVariant = typeof STATUS_MESSAGE_VARIANTS[keyof typeof STATUS_MESSAGE_VARIANTS];\n\nexport interface EnrollmentButtonTypes {\n  singlePaidMode: SinglePaidMode,\n  ecommerceCheckout: boolean,\n  isEnrollmentPending: boolean,\n  onEnroll: () => void,\n  onEcommerceCheckout: () => void,\n}\n\nexport interface EnrolledStatusTypes {\n  showCoursewareLink: boolean,\n  courseId: string,\n}\n\nexport interface StatusMessageTypes {\n  variant: StatusMessageVariant,\n  messageKey: string,\n}\n"]}

package/dist/course-about/course-intro/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const STATUS_MESSAGE_VARIANTS: {
+    readonly SUCCESS: "success";
+    readonly INFO: "info";
+    readonly DANGER: "danger";
+};
+export declare const STATUS_MESSAGE_ICONS: {
+    readonly success: any;
+    readonly info: any;
+    readonly danger: any;
+};

package/dist/course-about/course-intro/constants.js

@@ -0,0 +1,12 @@
+import { Info as InfoIcon, CheckCircle as CheckCircleIcon, Error as ErrorIcon, } from '@openedx/paragon/icons';
+export const STATUS_MESSAGE_VARIANTS = {
+    SUCCESS: 'success',
+    INFO: 'info',
+    DANGER: 'danger',
+};
+export const STATUS_MESSAGE_ICONS = {
+    [STATUS_MESSAGE_VARIANTS.SUCCESS]: CheckCircleIcon,
+    [STATUS_MESSAGE_VARIANTS.INFO]: InfoIcon,
+    [STATUS_MESSAGE_VARIANTS.DANGER]: ErrorIcon,
+};
+//# sourceMappingURL=constants.js.map

package/dist/course-about/course-intro/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../src/course-about/course-intro/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,IAAI,QAAQ,EAAE,WAAW,IAAI,eAAe,EAAE,KAAK,IAAI,SAAS,GACrE,MAAM,wBAAwB,CAAC;AAEhC,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;CACR,CAAC;AAEX,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,CAAC,uBAAuB,CAAC,OAAO,CAAC,EAAE,eAAe;IAClD,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,QAAQ;IACxC,CAAC,uBAAuB,CAAC,MAAM,CAAC,EAAE,SAAS;CACnC,CAAC","sourcesContent":["import {\n  Info as InfoIcon, CheckCircle as CheckCircleIcon, Error as ErrorIcon,\n} from '@openedx/paragon/icons';\n\nexport const STATUS_MESSAGE_VARIANTS = {\n  SUCCESS: 'success',\n  INFO: 'info',\n  DANGER: 'danger',\n} as const;\n\nexport const STATUS_MESSAGE_ICONS = {\n  [STATUS_MESSAGE_VARIANTS.SUCCESS]: CheckCircleIcon,\n  [STATUS_MESSAGE_VARIANTS.INFO]: InfoIcon,\n  [STATUS_MESSAGE_VARIANTS.DANGER]: ErrorIcon,\n} as const;\n"]}

package/dist/course-about/course-intro/course-media/CourseMedia.d.ts

@@ -0,0 +1,3 @@
+import type { CourseMediaTypes } from './types';
+declare const CourseMedia: ({ courseAboutData }: CourseMediaTypes) => import("react/jsx-runtime").JSX.Element;
+export default CourseMedia;

package/dist/course-about/course-intro/course-media/CourseMedia.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useToggle } from '@openedx/paragon';
+import { getSiteConfig } from '@openedx/frontend-base';
+import noCourseImg from '../../../assets/images/no-course-image.svg';
+import { CourseAboutIntroVideoModalSlot, CourseAboutIntroVideoButtonSlot } from '../../../slots/CourseAboutIntroVideoSlots';
+import CourseAboutCourseImageSlot from '../../../slots/CourseAboutCourseImageSlot';
+import { extractYouTubeVideoId, getMediaUris } from './utils';
+const CourseMedia = ({ courseAboutData }) => {
+    const [isOpenVideoModal, openVideoModal, closeVideoModal] = useToggle(false);
+    const { imageUrl, videoUrl } = getMediaUris(courseAboutData);
+    const videoId = useMemo(() => extractYouTubeVideoId(videoUrl), [videoUrl]);
+    const imgSrc = imageUrl ? `${getSiteConfig().lmsBaseUrl}${imageUrl}` : noCourseImg;
+    return videoId ? (_jsxs(_Fragment, { children: [_jsx(CourseAboutIntroVideoModalSlot, { isOpen: isOpenVideoModal, close: closeVideoModal, videoId: videoId }), _jsx(CourseAboutIntroVideoButtonSlot, { courseImageSrc: imgSrc, courseImageAltText: courseAboutData.name, openVideoModal: openVideoModal })] })) : _jsx(CourseAboutCourseImageSlot, { imgSrc: imgSrc, altText: courseAboutData.name });
+};
+export default CourseMedia;
+//# sourceMappingURL=CourseMedia.js.map

package/dist/course-about/course-intro/course-media/CourseMedia.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CourseMedia.js","sourceRoot":"","sources":["../../../../src/course-about/course-intro/course-media/CourseMedia.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEvD,OAAO,WAAW,MAAM,wCAAwC,CAAC;AAEjE,OAAO,EAAE,8BAA8B,EAAE,+BAA+B,EAAE,MAAM,uCAAuC,CAAC;AACxH,OAAO,0BAA0B,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAG9D,MAAM,WAAW,GAAG,CAAC,EAAE,eAAe,EAAoB,EAAE,EAAE;IAC5D,MAAM,CAAC,gBAAgB,EAAE,cAAc,EAAE,eAAe,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAC7E,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,YAAY,CAAC,eAAe,CAAC,CAAC;IAC7D,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE3E,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,aAAa,EAAE,CAAC,UAAU,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;IAEnF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,8BACE,KAAC,8BAA8B,IAC7B,MAAM,EAAE,gBAAgB,EACxB,KAAK,EAAE,eAAe,EACtB,OAAO,EAAE,OAAO,GAChB,EACF,KAAC,+BAA+B,IAC9B,cAAc,EAAE,MAAM,EACtB,kBAAkB,EAAE,eAAe,CAAC,IAAI,EACxC,cAAc,EAAE,cAAc,GAC9B,IACD,CACJ,CAAC,CAAC,CAAC,KAAC,0BAA0B,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,CAAC,IAAI,GAAI,CAAC;AACpF,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { useMemo } from 'react';\nimport { useToggle } from '@openedx/paragon';\nimport { getSiteConfig } from '@openedx/frontend-base';\n\nimport noCourseImg from '@src/assets/images/no-course-image.svg';\n\nimport { CourseAboutIntroVideoModalSlot, CourseAboutIntroVideoButtonSlot } from '@src/slots/CourseAboutIntroVideoSlots';\nimport CourseAboutCourseImageSlot from '@src/slots/CourseAboutCourseImageSlot';\nimport { extractYouTubeVideoId, getMediaUris } from './utils';\nimport type { CourseMediaTypes } from './types';\n\nconst CourseMedia = ({ courseAboutData }: CourseMediaTypes) => {\n  const [isOpenVideoModal, openVideoModal, closeVideoModal] = useToggle(false);\n  const { imageUrl, videoUrl } = getMediaUris(courseAboutData);\n  const videoId = useMemo(() => extractYouTubeVideoId(videoUrl), [videoUrl]);\n\n  const imgSrc = imageUrl ? `${getSiteConfig().lmsBaseUrl}${imageUrl}` : noCourseImg;\n\n  return videoId ? (\n    <>\n      <CourseAboutIntroVideoModalSlot\n        isOpen={isOpenVideoModal}\n        close={closeVideoModal}\n        videoId={videoId}\n      />\n      <CourseAboutIntroVideoButtonSlot\n        courseImageSrc={imgSrc}\n        courseImageAltText={courseAboutData.name}\n        openVideoModal={openVideoModal}\n      />\n    </>\n  ) : <CourseAboutCourseImageSlot imgSrc={imgSrc} altText={courseAboutData.name} />;\n};\n\nexport default CourseMedia;\n"]}

package/dist/course-about/course-intro/course-media/CourseMedia.scss

@@ -0,0 +1,24 @@
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints.css";
+
+.course-media-wrapper {
+  .course-media-image {
+    height: var(--catalog-course-about-page-course-media-image-height, 15.75rem);
+    object-fit: cover;
+  }
+
+  .pgn__icon {
+    height: var(--catalog-course-about-page-course-media-play-icon-height, 3.125rem);
+    width: var(--catalog-course-about-page-course-media-play-icon-width, 3.125rem);
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    svg:hover {
+      opacity: var(--catalog-course-about-page-course-media-play-icon-hover-opacity, .9);
+    }
+  }
+
+  @media (--pgn-size-breakpoint-max-width-xl) {
+    margin-bottom: var(--pgn-spacing-spacer-2-5);
+  }
+}

package/dist/course-about/course-intro/course-media/messages.d.ts

@@ -0,0 +1,8 @@
+declare const messages: {
+    playCourseIntroductionVideo: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/course-about/course-intro/course-media/messages.js

@@ -0,0 +1,10 @@
+import { defineMessages } from '@openedx/frontend-base';
+const messages = defineMessages({
+    playCourseIntroductionVideo: {
+        id: 'category.course-about.course-intro.course-media.play-course-introduction-video',
+        defaultMessage: 'Play course introduction video',
+        description: 'The text for the button to play the course introduction video.',
+    },
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/course-about/course-intro/course-media/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","sourceRoot":"","sources":["../../../../src/course-about/course-intro/course-media/messages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAExD,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,2BAA2B,EAAE;QAC3B,EAAE,EAAE,gFAAgF;QACpF,cAAc,EAAE,gCAAgC;QAChD,WAAW,EAAE,gEAAgE;KAC9E;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '@openedx/frontend-base';\n\nconst messages = defineMessages({\n  playCourseIntroductionVideo: {\n    id: 'category.course-about.course-intro.course-media.play-course-introduction-video',\n    defaultMessage: 'Play course introduction video',\n    description: 'The text for the button to play the course introduction video.',\n  },\n});\n\nexport default messages;\n"]}

package/dist/course-about/course-intro/course-media/types.d.ts

@@ -0,0 +1,8 @@
+import type { CourseMediaPartial } from '../../types';
+export interface CourseMediaTypes {
+    courseAboutData: {
+        name: string;
+        media: CourseMediaPartial;
+    };
+}
+export type ExtractYouTubeVideoIdTypes = (url: string) => string | null;

package/dist/course-about/course-intro/course-media/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/course-about/course-intro/course-media/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/course-about/course-intro/course-media/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CourseMediaPartial } from '../../types';\n\nexport interface CourseMediaTypes {\n  courseAboutData: {\n    name: string,\n    media: CourseMediaPartial,\n  },\n}\n\nexport type ExtractYouTubeVideoIdTypes = (url: string) => string | null;\n"]}

package/dist/course-about/course-intro/course-media/utils.d.ts

@@ -0,0 +1,12 @@
+import type { CourseMediaTypes, ExtractYouTubeVideoIdTypes } from './types';
+/**
+ * Extracts the YouTube video ID from a given URL.
+ */
+export declare const extractYouTubeVideoId: ExtractYouTubeVideoIdTypes;
+/**
+ * Returns media URIs (image and video) from course about data.
+ */
+export declare const getMediaUris: (courseAboutData: CourseMediaTypes["courseAboutData"]) => {
+    imageUrl: string;
+    videoUrl: string;
+};

package/dist/course-about/course-intro/course-media/utils.js

@@ -0,0 +1,18 @@
+/**
+ * Extracts the YouTube video ID from a given URL.
+ */
+export const extractYouTubeVideoId = (url) => {
+    const match = /[?&]v=([^&#]+)/.exec(url);
+    return match ? match[1] : null;
+};
+/**
+ * Returns media URIs (image and video) from course about data.
+ */
+export const getMediaUris = (courseAboutData) => {
+    var _a, _b, _c, _d;
+    return ({
+        imageUrl: (_b = (_a = courseAboutData.media.courseImage) === null || _a === void 0 ? void 0 : _a.uri) !== null && _b !== void 0 ? _b : '',
+        videoUrl: (_d = (_c = courseAboutData.media.courseVideo) === null || _c === void 0 ? void 0 : _c.uri) !== null && _d !== void 0 ? _d : '',
+    });
+};
+//# sourceMappingURL=utils.js.map

package/dist/course-about/course-intro/course-media/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/course-about/course-intro/course-media/utils.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAA+B,CAAC,GAAG,EAAE,EAAE;IACvE,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AACjC,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,eAAoD,EAAE,EAAE;;IAAC,OAAA,CAAC;QACrF,QAAQ,EAAE,MAAA,MAAA,eAAe,CAAC,KAAK,CAAC,WAAW,0CAAE,GAAG,mCAAI,EAAE;QACtD,QAAQ,EAAE,MAAA,MAAA,eAAe,CAAC,KAAK,CAAC,WAAW,0CAAE,GAAG,mCAAI,EAAE;KACvD,CAAC,CAAA;CAAA,CAAC","sourcesContent":["import type { CourseMediaTypes, ExtractYouTubeVideoIdTypes } from './types';\n\n/**\n * Extracts the YouTube video ID from a given URL.\n */\nexport const extractYouTubeVideoId: ExtractYouTubeVideoIdTypes = (url) => {\n  const match = /[?&]v=([^&#]+)/.exec(url);\n  return match ? match[1] : null;\n};\n\n/**\n * Returns media URIs (image and video) from course about data.\n */\nexport const getMediaUris = (courseAboutData: CourseMediaTypes['courseAboutData']) => ({\n  imageUrl: courseAboutData.media.courseImage?.uri ?? '',\n  videoUrl: courseAboutData.media.courseVideo?.uri ?? '',\n});\n"]}

package/dist/course-about/course-intro/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useEnrollmentActions } from './useEnrollmentActions';
+export { useEnrollmentStatus } from './useEnrollmentStatus';

package/dist/course-about/course-intro/hooks/index.js

@@ -0,0 +1,3 @@
+export { useEnrollmentActions } from './useEnrollmentActions';
+export { useEnrollmentStatus } from './useEnrollmentStatus';
+//# sourceMappingURL=index.js.map

package/dist/course-about/course-intro/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/course-about/course-intro/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export { useEnrollmentActions } from './useEnrollmentActions';\nexport { useEnrollmentStatus } from './useEnrollmentStatus';\n"]}

package/dist/course-about/course-intro/hooks/types.d.ts

@@ -0,0 +1,16 @@
+import type { CourseAboutDataPartial } from '../../types';
+export interface UseEnrollmentActionsTypes {
+    courseId: string;
+    ecommerceCheckoutLink?: string | null;
+}
+export interface AuthenticatedUser {
+    username: string;
+}
+export interface UseEnrollmentStatusTypes {
+    courseAboutData: CourseAboutDataPartial;
+    authenticatedUser: AuthenticatedUser | null;
+    enrollmentError: string | null;
+    isEnrollmentPending: boolean;
+    handleChangeEnrollment: () => void;
+    handleEcommerceCheckout: () => void;
+}

package/dist/course-about/course-intro/hooks/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/course-about/course-intro/hooks/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/course-about/course-intro/hooks/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { CourseAboutDataPartial } from '../../types';\n\nexport interface UseEnrollmentActionsTypes {\n  courseId: string,\n  ecommerceCheckoutLink?: string | null,\n}\n\nexport interface AuthenticatedUser {\n  username: string,\n}\n\nexport interface UseEnrollmentStatusTypes {\n  courseAboutData: CourseAboutDataPartial,\n  authenticatedUser: AuthenticatedUser | null,\n  enrollmentError: string | null,\n  isEnrollmentPending: boolean,\n  handleChangeEnrollment: () => void,\n  handleEcommerceCheckout: () => void,\n}\n"]}

package/dist/course-about/course-intro/hooks/useEnrollmentActions.d.ts

@@ -0,0 +1,7 @@
+import type { UseEnrollmentActionsTypes } from './types';
+export declare const useEnrollmentActions: ({ courseId, ecommerceCheckoutLink }: UseEnrollmentActionsTypes) => {
+    enrollmentError: string | null;
+    isEnrollmentPending: boolean;
+    handleChangeEnrollment: () => Promise<void>;
+    handleEcommerceCheckout: () => void;
+};

package/dist/course-about/course-intro/hooks/useEnrollmentActions.js

@@ -0,0 +1,47 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useState, useMemo } from 'react';
+import { getSiteConfig, logError, useIntl } from '@openedx/frontend-base';
+import { useEnrollment } from '../../data/hooks';
+import messages from '../messages';
+export const useEnrollmentActions = ({ courseId, ecommerceCheckoutLink }) => {
+    const intl = useIntl();
+    const [enrollmentError, setEnrollmentError] = useState(null);
+    const [isEnrollmentPending, setIsEnrollmentPending] = useState(false);
+    const enrollmentConfig = useMemo(() => ({
+        onError: setEnrollmentError,
+        errorMessage: intl.formatMessage(messages.statusMessageEnrollmentError),
+    }), [intl]);
+    const enrollAndRedirect = useEnrollment(enrollmentConfig);
+    const handleChangeEnrollment = () => __awaiter(void 0, void 0, void 0, function* () {
+        setIsEnrollmentPending(true);
+        try {
+            yield enrollAndRedirect(courseId, `${getSiteConfig().lmsBaseUrl}/dashboard`);
+        }
+        catch (error) {
+            setIsEnrollmentPending(false);
+            logError('Failed to enroll in course', error);
+        }
+    });
+    const handleEcommerceCheckout = () => {
+        if (!ecommerceCheckoutLink) {
+            logError('Ecommerce checkout link is not available');
+            return;
+        }
+        window.location.assign(ecommerceCheckoutLink);
+    };
+    return {
+        enrollmentError,
+        isEnrollmentPending,
+        handleChangeEnrollment,
+        handleEcommerceCheckout,
+    };
+};
+//# sourceMappingURL=useEnrollmentActions.js.map

package/dist/course-about/course-intro/hooks/useEnrollmentActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEnrollmentActions.js","sourceRoot":"","sources":["../../../../src/course-about/course-intro/hooks/useEnrollmentActions.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,QAAQ,MAAM,aAAa,CAAC;AAGnC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAAE,qBAAqB,EAA6B,EAAE,EAAE;IACrG,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC5E,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtE,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACtC,OAAO,EAAE,kBAAkB;QAC3B,YAAY,EAAE,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,4BAA4B,CAAC;KACxE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEZ,MAAM,iBAAiB,GAAG,aAAa,CAAC,gBAAgB,CAAC,CAAC;IAE1D,MAAM,sBAAsB,GAAG,GAAS,EAAE;QACxC,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC;YACH,MAAM,iBAAiB,CAAC,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC,UAAU,YAAY,CAAC,CAAC;QAC/E,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,sBAAsB,CAAC,KAAK,CAAC,CAAC;YAC9B,QAAQ,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAC;QAChD,CAAC;IACH,CAAC,CAAA,CAAC;IAEF,MAAM,uBAAuB,GAAG,GAAG,EAAE;QACnC,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAC3B,QAAQ,CAAC,0CAA0C,CAAC,CAAC;YACrD,OAAO;QACT,CAAC;QACD,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC;IAChD,CAAC,CAAC;IAEF,OAAO;QACL,eAAe;QACf,mBAAmB;QACnB,sBAAsB;QACtB,uBAAuB;KACxB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useState, useMemo } from 'react';\nimport { getSiteConfig, logError, useIntl } from '@openedx/frontend-base';\n\nimport { useEnrollment } from '../../data/hooks';\nimport messages from '../messages';\nimport type { UseEnrollmentActionsTypes } from './types';\n\nexport const useEnrollmentActions = ({ courseId, ecommerceCheckoutLink }: UseEnrollmentActionsTypes) => {\n  const intl = useIntl();\n  const [enrollmentError, setEnrollmentError] = useState<null | string>(null);\n  const [isEnrollmentPending, setIsEnrollmentPending] = useState(false);\n\n  const enrollmentConfig = useMemo(() => ({\n    onError: setEnrollmentError,\n    errorMessage: intl.formatMessage(messages.statusMessageEnrollmentError),\n  }), [intl]);\n\n  const enrollAndRedirect = useEnrollment(enrollmentConfig);\n\n  const handleChangeEnrollment = async () => {\n    setIsEnrollmentPending(true);\n    try {\n      await enrollAndRedirect(courseId, `${getSiteConfig().lmsBaseUrl}/dashboard`);\n    } catch (error) {\n      setIsEnrollmentPending(false);\n      logError('Failed to enroll in course', error);\n    }\n  };\n\n  const handleEcommerceCheckout = () => {\n    if (!ecommerceCheckoutLink) {\n      logError('Ecommerce checkout link is not available');\n      return;\n    }\n    window.location.assign(ecommerceCheckoutLink);\n  };\n\n  return {\n    enrollmentError,\n    isEnrollmentPending,\n    handleChangeEnrollment,\n    handleEcommerceCheckout,\n  };\n};\n"]}

package/dist/course-about/course-intro/hooks/useEnrollmentStatus.d.ts

@@ -0,0 +1,4 @@
+import type { UseEnrollmentStatusTypes } from './types';
+export declare const useEnrollmentStatus: ({ courseAboutData, enrollmentError, authenticatedUser, isEnrollmentPending, handleChangeEnrollment, handleEcommerceCheckout, }: UseEnrollmentStatusTypes) => {
+    renderStatusContent: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/course-about/course-intro/hooks/useEnrollmentStatus.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@openedx/paragon';
+import { useIntl } from '@openedx/frontend-base';
+import CourseAboutEnrollmentButtonSlot from '../../../slots/CourseAboutEnrollmentButtonSlot';
+import { StatusMessage, EnrolledStatus } from '../components';
+import { getLearningHomePageUrl } from '../utils';
+import messages from '../messages';
+import { STATUS_MESSAGE_VARIANTS } from '../constants';
+export const useEnrollmentStatus = ({ courseAboutData, enrollmentError, authenticatedUser, isEnrollmentPending, handleChangeEnrollment, handleEcommerceCheckout, }) => {
+    const intl = useIntl();
+    const { id: courseId, canEnroll, enrollment, isShibCourse, isCourseFull, allowAnonymous, singlePaidMode, invitationOnly, ecommerceCheckout, showCoursewareLink, } = courseAboutData;
+    const renderStatusContent = () => {
+        if (enrollmentError) {
+            return _jsx(StatusMessage, { variant: STATUS_MESSAGE_VARIANTS.DANGER, messageKey: "statusMessageEnrollmentError" });
+        }
+        if (authenticatedUser && enrollment.isActive) {
+            return _jsx(EnrolledStatus, { showCoursewareLink: showCoursewareLink, courseId: courseId });
+        }
+        if (isCourseFull) {
+            return _jsx(StatusMessage, { variant: STATUS_MESSAGE_VARIANTS.INFO, messageKey: "statusMessageFull" });
+        }
+        if (invitationOnly && !canEnroll) {
+            return _jsx(StatusMessage, { variant: STATUS_MESSAGE_VARIANTS.INFO, messageKey: "statusMessageEnrollmentInvitationOnly" });
+        }
+        if (!isShibCourse && !canEnroll) {
+            return _jsx(StatusMessage, { variant: STATUS_MESSAGE_VARIANTS.INFO, messageKey: "statusMessageEnrollmentClosed" });
+        }
+        if (allowAnonymous && showCoursewareLink) {
+            return (_jsx(Button, { as: "a", href: getLearningHomePageUrl(courseId), children: intl.formatMessage(messages.viewCourseBtn) }));
+        }
+        return (_jsx(CourseAboutEnrollmentButtonSlot, { singlePaidMode: singlePaidMode, ecommerceCheckout: ecommerceCheckout, isEnrollmentPending: isEnrollmentPending, onEnroll: handleChangeEnrollment, onEcommerceCheckout: handleEcommerceCheckout }));
+    };
+    return { renderStatusContent };
+};
+//# sourceMappingURL=useEnrollmentStatus.js.map

package/dist/course-about/course-intro/hooks/useEnrollmentStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEnrollmentStatus.js","sourceRoot":"","sources":["../../../../src/course-about/course-intro/hooks/useEnrollmentStatus.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEjD,OAAO,+BAA+B,MAAM,4CAA4C,CAAC;AACzF,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAClD,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAGvD,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAClC,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,mBAAmB,EACnB,sBAAsB,EACtB,uBAAuB,GACE,EAAE,EAAE;IAC7B,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IACvB,MAAM,EACJ,EAAE,EAAE,QAAQ,EACZ,SAAS,EACT,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,kBAAkB,GACnB,GAAG,eAAe,CAAC;IAEpB,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,IAAI,eAAe,EAAE,CAAC;YACpB,OAAO,KAAC,aAAa,IAAC,OAAO,EAAE,uBAAuB,CAAC,MAAM,EAAE,UAAU,EAAC,8BAA8B,GAAG,CAAC;QAC9G,CAAC;QAED,IAAI,iBAAiB,IAAI,UAAU,CAAC,QAAQ,EAAE,CAAC;YAC7C,OAAO,KAAC,cAAc,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;QACxF,CAAC;QAED,IAAI,YAAY,EAAE,CAAC;YACjB,OAAO,KAAC,aAAa,IAAC,OAAO,EAAE,uBAAuB,CAAC,IAAI,EAAE,UAAU,EAAC,mBAAmB,GAAG,CAAC;QACjG,CAAC;QAED,IAAI,cAAc,IAAI,CAAC,SAAS,EAAE,CAAC;YACjC,OAAO,KAAC,aAAa,IAAC,OAAO,EAAE,uBAAuB,CAAC,IAAI,EAAE,UAAU,EAAC,uCAAuC,GAAG,CAAC;QACrH,CAAC;QAED,IAAI,CAAC,YAAY,IAAI,CAAC,SAAS,EAAE,CAAC;YAChC,OAAO,KAAC,aAAa,IAAC,OAAO,EAAE,uBAAuB,CAAC,IAAI,EAAE,UAAU,EAAC,+BAA+B,GAAG,CAAC;QAC7G,CAAC;QAED,IAAI,cAAc,IAAI,kBAAkB,EAAE,CAAC;YACzC,OAAO,CACL,KAAC,MAAM,IAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAE,sBAAsB,CAAC,QAAQ,CAAC,YAClD,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,GACpC,CACV,CAAC;QACJ,CAAC;QAED,OAAO,CACL,KAAC,+BAA+B,IAC9B,cAAc,EAAE,cAAc,EAC9B,iBAAiB,EAAE,iBAAiB,EACpC,mBAAmB,EAAE,mBAAmB,EACxC,QAAQ,EAAE,sBAAsB,EAChC,mBAAmB,EAAE,uBAAuB,GAC5C,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,EAAE,mBAAmB,EAAE,CAAC;AACjC,CAAC,CAAC","sourcesContent":["import { Button } from '@openedx/paragon';\nimport { useIntl } from '@openedx/frontend-base';\n\nimport CourseAboutEnrollmentButtonSlot from '@src/slots/CourseAboutEnrollmentButtonSlot';\nimport { StatusMessage, EnrolledStatus } from '../components';\nimport { getLearningHomePageUrl } from '../utils';\nimport messages from '../messages';\nimport { STATUS_MESSAGE_VARIANTS } from '../constants';\nimport type { UseEnrollmentStatusTypes } from './types';\n\nexport const useEnrollmentStatus = ({\n  courseAboutData,\n  enrollmentError,\n  authenticatedUser,\n  isEnrollmentPending,\n  handleChangeEnrollment,\n  handleEcommerceCheckout,\n}: UseEnrollmentStatusTypes) => {\n  const intl = useIntl();\n  const {\n    id: courseId,\n    canEnroll,\n    enrollment,\n    isShibCourse,\n    isCourseFull,\n    allowAnonymous,\n    singlePaidMode,\n    invitationOnly,\n    ecommerceCheckout,\n    showCoursewareLink,\n  } = courseAboutData;\n\n  const renderStatusContent = () => {\n    if (enrollmentError) {\n      return <StatusMessage variant={STATUS_MESSAGE_VARIANTS.DANGER} messageKey=\"statusMessageEnrollmentError\" />;\n    }\n\n    if (authenticatedUser && enrollment.isActive) {\n      return <EnrolledStatus showCoursewareLink={showCoursewareLink} courseId={courseId} />;\n    }\n\n    if (isCourseFull) {\n      return <StatusMessage variant={STATUS_MESSAGE_VARIANTS.INFO} messageKey=\"statusMessageFull\" />;\n    }\n\n    if (invitationOnly && !canEnroll) {\n      return <StatusMessage variant={STATUS_MESSAGE_VARIANTS.INFO} messageKey=\"statusMessageEnrollmentInvitationOnly\" />;\n    }\n\n    if (!isShibCourse && !canEnroll) {\n      return <StatusMessage variant={STATUS_MESSAGE_VARIANTS.INFO} messageKey=\"statusMessageEnrollmentClosed\" />;\n    }\n\n    if (allowAnonymous && showCoursewareLink) {\n      return (\n        <Button as=\"a\" href={getLearningHomePageUrl(courseId)}>\n          {intl.formatMessage(messages.viewCourseBtn)}\n        </Button>\n      );\n    }\n\n    return (\n      <CourseAboutEnrollmentButtonSlot\n        singlePaidMode={singlePaidMode}\n        ecommerceCheckout={ecommerceCheckout}\n        isEnrollmentPending={isEnrollmentPending}\n        onEnroll={handleChangeEnrollment}\n        onEcommerceCheckout={handleEcommerceCheckout}\n      />\n    );\n  };\n\n  return { renderStatusContent };\n};\n"]}

package/dist/course-about/course-intro/messages.d.ts

@@ -0,0 +1,43 @@
+declare const messages: {
+    statusMessageEnrolled: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    viewCourseBtn: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    statusMessageFull: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    statusMessageEnrollmentInvitationOnly: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    statusMessageEnrollmentClosed: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    enrollNowBtn: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    enrollNowBtnPending: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    statusMessageEnrollmentError: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;