richie-education 2.28.1 → 2.28.2-dev23

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.spec.tsx

@@ -1,9 +1,11 @@
 import { getByText, screen, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import queryString from 'query-string';
-import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import {
-  CourseLightFactory,
+  RichieContextFactory as mockRichieContextFactory,
+  PacedCourseFactory,
+} from 'utils/test/factories/richie';
+import {
   CourseProductRelationFactory,
   EnrollmentFactory,
   CredentialOrderFactory,
@@ -81,7 +83,7 @@ describe('CourseProductItem', () => {
 
     render(
       <CourseProductItem
-        course={CourseLightFactory({ code: '00000' }).one()}
+        course={PacedCourseFactory({ code: '00000' }).one()}
         productId={product.id}
       />,
       { queryOptions: { client: createTestQueryClient({ user: null }) } },
@@ -103,7 +105,7 @@ describe('CourseProductItem', () => {
 
     render(
       <CourseProductItem
-        course={CourseLightFactory({ code: '00000' }).one()}
+        course={PacedCourseFactory({ code: '00000' }).one()}
         productId={product.id}
       />,
       { queryOptions: { client: createTestQueryClient({ user: null }) } },
@@ -162,7 +164,7 @@ describe('CourseProductItem', () => {
     render(
       <CourseProductItem
         productId={product.id}
-        course={CourseLightFactory({ code: '00000' }).one()}
+        course={PacedCourseFactory({ code: '00000' }).one()}
       />,
       { queryOptions: { client: createTestQueryClient({ user: null }) } },
     );
@@ -183,7 +185,7 @@ describe('CourseProductItem', () => {
 
     const { container } = render(
       <CourseProductItem
-        course={CourseLightFactory({ code: '00000' }).one()}
+        course={PacedCourseFactory({ code: '00000' }).one()}
         productId={relation.product.id}
         compact
       />,
@@ -234,7 +236,7 @@ describe('CourseProductItem', () => {
     const { product } = relation;
     const order = CredentialOrderFactory({
       product_id: product.id,
-      course: CourseLightFactory({ code: '00000' }).one(),
+      course: PacedCourseFactory({ code: '00000' }).one(),
       target_courses: product.target_courses,
     }).one();
 
@@ -255,7 +257,7 @@ describe('CourseProductItem', () => {
     render(
       <CourseProductItem
         productId={product.id}
-        course={CourseLightFactory({ code: '00000' }).one()}
+        course={PacedCourseFactory({ code: '00000' }).one()}
       />,
     );
 
@@ -293,7 +295,7 @@ describe('CourseProductItem', () => {
     const relation = CourseProductRelationFactory().one();
     const order: CredentialOrder = CredentialOrderFactory({
       product_id: relation.product.id,
-      course: CourseLightFactory({ code: '00000' }).one(),
+      course: PacedCourseFactory({ code: '00000' }).one(),
       target_courses: relation.product.target_courses,
     }).one();
 
@@ -314,7 +316,7 @@ describe('CourseProductItem', () => {
     render(
       <CourseProductItem
         productId={relation.product.id}
-        course={CourseLightFactory({ code: '00000' }).one()}
+        course={PacedCourseFactory({ code: '00000' }).one()}
         compact
       />,
     );
@@ -364,7 +366,7 @@ describe('CourseProductItem', () => {
     }).one();
     const order: CredentialOrder = CredentialOrderFactory({
       product_id: product.id,
-      course: CourseLightFactory({ code: '00000' }).one(),
+      course: PacedCourseFactory({ code: '00000' }).one(),
       target_courses: product.target_courses,
       target_enrollments: [enrollment],
     }).one();
@@ -386,7 +388,7 @@ describe('CourseProductItem', () => {
     render(
       <CourseProductItem
         productId={product.id}
-        course={CourseLightFactory({ code: '00000' }).one()}
+        course={PacedCourseFactory({ code: '00000' }).one()}
       />,
     );
 
@@ -425,7 +427,7 @@ describe('CourseProductItem', () => {
     const { product } = relation;
     const order = CredentialOrderFactory({
       product_id: product.id,
-      course: CourseLightFactory({ code: '00000' }).one(),
+      course: PacedCourseFactory({ code: '00000' }).one(),
       target_courses: product.target_courses,
       state: OrderState.PENDING,
     }).one();
@@ -446,7 +448,7 @@ describe('CourseProductItem', () => {
     render(
       <CourseProductItem
         productId={product.id}
-        course={CourseLightFactory({ code: '00000' }).one()}
+        course={PacedCourseFactory({ code: '00000' }).one()}
       />,
     );
 
@@ -495,7 +497,7 @@ describe('CourseProductItem', () => {
     render(
       <CourseProductItem
         productId={product.id}
-        course={CourseLightFactory({ code: '00000' }).one()}
+        course={PacedCourseFactory({ code: '00000' }).one()}
       />,
     );
 
@@ -529,7 +531,7 @@ describe('CourseProductItem', () => {
     const { product } = relation;
     const order = CredentialOrderFactory({
       product_id: product.id,
-      course: CourseLightFactory({ code: '00000' }).one(),
+      course: PacedCourseFactory({ code: '00000' }).one(),
       target_courses: product.target_courses,
       state: OrderState.SUBMITTED,
     }).one();
@@ -550,7 +552,7 @@ describe('CourseProductItem', () => {
     render(
       <CourseProductItem
         productId={product.id}
-        course={CourseLightFactory({ code: '00000' }).one()}
+        course={PacedCourseFactory({ code: '00000' }).one()}
       />,
     );
 
@@ -600,7 +602,7 @@ describe('CourseProductItem', () => {
       const order = CredentialOrderFactory({
         product_id: product.id,
         target_courses: product.target_courses,
-        course: CourseLightFactory({ code: '00000' }).one(),
+        course: PacedCourseFactory({ code: '00000' }).one(),
         state: orderState,
       }).one();
       fetchMock.get(
@@ -621,7 +623,7 @@ describe('CourseProductItem', () => {
       render(
         <CourseProductItem
           productId={product.id}
-          course={CourseLightFactory({ code: '00000' }).one()}
+          course={PacedCourseFactory({ code: '00000' }).one()}
         />,
       );
 
@@ -649,7 +651,7 @@ describe('CourseProductItem', () => {
     const order = CredentialOrderFactory({
       product_id: product.id,
       target_courses: product.target_courses,
-      course: CourseLightFactory({ code: '00000' }).one(),
+      course: PacedCourseFactory({ code: '00000' }).one(),
       state: OrderState.VALIDATED,
     }).one();
     fetchMock.get(
@@ -670,7 +672,7 @@ describe('CourseProductItem', () => {
     render(
       <CourseProductItem
         productId={product.id}
-        course={CourseLightFactory({ code: '00000' }).one()}
+        course={PacedCourseFactory({ code: '00000' }).one()}
       />,
     );
 
@@ -686,7 +688,7 @@ describe('CourseProductItem', () => {
     const relation = CourseProductRelationFactory().one();
     const order: CredentialOrder = CredentialOrderFactory({
       product_id: relation.product.id,
-      course: CourseLightFactory({ code: '00000' }).one(),
+      course: PacedCourseFactory({ code: '00000' }).one(),
       target_courses: relation.product.target_courses,
       state: OrderState.SUBMITTED,
     }).one();
@@ -707,7 +709,7 @@ describe('CourseProductItem', () => {
     render(
       <CourseProductItem
         productId={relation.product.id}
-        course={CourseLightFactory({ code: '00000' }).one()}
+        course={PacedCourseFactory({ code: '00000' }).one()}
         compact={true}
       />,
     );
@@ -751,7 +753,7 @@ describe('CourseProductItem', () => {
     render(
       <CourseProductItem
         productId={product.id}
-        course={CourseLightFactory({ code: '00000' }).one()}
+        course={PacedCourseFactory({ code: '00000' }).one()}
       />,
       { queryOptions: { client: createTestQueryClient({ user: null }) } },
     );
@@ -767,7 +769,7 @@ describe('CourseProductItem', () => {
     const { product } = relation;
     const order = CredentialOrderFactory({
       product_id: product.id,
-      course: CourseLightFactory({ code: '00000' }).one(),
+      course: PacedCourseFactory({ code: '00000' }).one(),
       target_courses: product.target_courses,
       state: OrderState.PENDING,
     }).one();
@@ -788,7 +790,7 @@ describe('CourseProductItem', () => {
     render(
       <CourseProductItem
         productId={product.id}
-        course={CourseLightFactory({ code: '00000' }).one()}
+        course={PacedCourseFactory({ code: '00000' }).one()}
       />,
     );
 
@@ -806,7 +808,7 @@ describe('CourseProductItem', () => {
     const { product } = relation;
     const order = CredentialOrderFactory({
       product_id: product.id,
-      course: CourseLightFactory({ code: '00000' }).one(),
+      course: PacedCourseFactory({ code: '00000' }).one(),
       target_courses: product.target_courses,
       state: OrderState.PENDING,
     }).one();
@@ -827,7 +829,7 @@ describe('CourseProductItem', () => {
     render(
       <CourseProductItem
         productId={product.id}
-        course={CourseLightFactory({ code: '00000' }).one()}
+        course={PacedCourseFactory({ code: '00000' }).one()}
       />,
     );
 
@@ -846,7 +848,7 @@ describe('CourseProductItem', () => {
     const { product } = relation;
     const order = CredentialOrderFactory({
       product_id: product.id,
-      course: CourseLightFactory({ code: '00000' }).one(),
+      course: PacedCourseFactory({ code: '00000' }).one(),
       target_courses: product.target_courses,
       state: OrderState.PENDING,
     }).one();
@@ -867,7 +869,7 @@ describe('CourseProductItem', () => {
     render(
       <CourseProductItem
         productId={product.id}
-        course={CourseLightFactory({ code: '00000' }).one()}
+        course={PacedCourseFactory({ code: '00000' }).one()}
       />,
     );
 

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.stories.tsx

@@ -3,7 +3,6 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import {
-  CourseLightFactory,
   CourseProductRelationFactory,
   CourseRunFactory,
   CredentialOrderFactory,
@@ -12,7 +11,7 @@ import {
   TargetCourseFactory,
 } from 'utils/test/factories/joanie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { UserFactory } from 'utils/test/factories/richie';
+import { UserFactory, PacedCourseFactory } from 'utils/test/factories/richie';
 import { CredentialOrder, OrderState } from 'types/Joanie';
 import { Maybe } from 'types/utils';
 import CourseProductItem, { CourseProductItemProps } from '.';
@@ -49,7 +48,7 @@ export default {
   },
   args: {
     productId: 'AAA',
-    course: CourseLightFactory({ code: 'BBB' }).one(),
+    course: PacedCourseFactory({ code: 'BBB' }).one(),
   },
   render: (args) => render(args),
 } as Meta<typeof CourseProductItem>;
@@ -61,7 +60,7 @@ export const Default: Story = {};
 export const WithPendingOrder: Story = {
   args: {
     productId: 'AAA',
-    course: CourseLightFactory({ code: 'BBB' }).one(),
+    course: PacedCourseFactory({ code: 'BBB' }).one(),
   },
   render: (args) =>
     render(args, { order: CredentialOrderFactory({ state: OrderState.PENDING }).one() }),
@@ -70,7 +69,7 @@ export const WithPendingOrder: Story = {
 export const WithValidatedOrder: Story = {
   args: {
     productId: 'AAA',
-    course: CourseLightFactory({ code: 'BBB' }).one(),
+    course: PacedCourseFactory({ code: 'BBB' }).one(),
   },
   render: (args) => {
     const courseRunWithEnrollment = CourseRunFactory().one();
@@ -95,7 +94,7 @@ export const WithValidatedOrder: Story = {
 export const WithSubmittedOrder: Story = {
   args: {
     productId: 'AAA',
-    course: CourseLightFactory({ code: 'BBB' }).one(),
+    course: PacedCourseFactory({ code: 'BBB' }).one(),
   },
   render: (args) =>
     render(args, { order: CredentialOrderFactory({ state: OrderState.SUBMITTED }).one() }),

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.tsx

@@ -1,7 +1,7 @@
 import { Children, useEffect, useMemo } from 'react';
 import { defineMessages, FormattedMessage, FormattedNumber, useIntl } from 'react-intl';
 import c from 'classnames';
-import { ProductType, OrderState, CourseLight, Product, CredentialOrder } from 'types/Joanie';
+import { ProductType, OrderState, Product, CredentialOrder } from 'types/Joanie';
 import { useCourseProduct } from 'hooks/useCourseProducts';
 import { Spinner } from 'components/Spinner';
 import { Icon, IconTypeEnum } from 'components/Icon';
@@ -12,6 +12,7 @@ import useProductOrder from 'hooks/useProductOrder';
 import { OrderHelper } from 'utils/OrderHelper';
 import { handle } from 'utils/errors/handle';
 import { ProductSignatureHeader } from 'widgets/SyllabusCourseRunsList/components/CourseProductItem/components/ProductSignatureHeader';
+import { PacedCourse } from 'types';
 import CertificateItem from './components/CourseProductCertificateItem';
 import CourseRunItem from './components/CourseRunItem';
 import CourseProductItemFooter from './CourseProductItemFooter';
@@ -48,7 +49,7 @@ const messages = defineMessages({
 
 export interface CourseProductItemProps {
   compact?: boolean;
-  course: CourseLight;
+  course: PacedCourse;
   productId: Product['id'];
 }
 

package/js/widgets/SyllabusCourseRunsList/components/CourseWishButton/index.login.spec.tsx

@@ -5,9 +5,11 @@
 import { screen } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import userEvent from '@testing-library/user-event';
-import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import {
+  RichieContextFactory as mockRichieContextFactory,
+  PacedCourseFactory,
+} from 'utils/test/factories/richie';
 import { HttpStatusCode } from 'utils/errors/HttpError';
-import { CourseLightFactory } from 'utils/test/factories/joanie';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { render } from 'utils/test/render';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
@@ -29,7 +31,7 @@ jest.mock('utils/context', () => ({
 describe('CourseWishButton', () => {
   const joanieSessionData = setupJoanieSession();
   let nbApiCalls: number;
-  const course = CourseLightFactory().one();
+  const course = PacedCourseFactory().one();
 
   beforeEach(() => {
     nbApiCalls = joanieSessionData.nbSessionApiRequest;

package/js/widgets/SyllabusCourseRunsList/components/CourseWishButton/index.logout.spec.tsx

@@ -5,9 +5,11 @@
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import fetchMock from 'fetch-mock';
-import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import {
+  RichieContextFactory as mockRichieContextFactory,
+  PacedCourseFactory,
+} from 'utils/test/factories/richie';
 import { location } from 'utils/indirection/window';
-import { CourseLightFactory } from 'utils/test/factories/joanie';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { render } from 'utils/test/render';
 import { HttpStatusCode } from 'utils/errors/HttpError';
@@ -37,7 +39,7 @@ jest.mock('utils/context', () => ({
 
 describe('CourseWishButton', () => {
   setupJoanieSession();
-  const course = CourseLightFactory().one();
+  const course = PacedCourseFactory().one();
 
   it('renders a log me link', async () => {
     fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/${course.code}/wish/`, {

package/js/widgets/SyllabusCourseRunsList/components/CourseWishButton/index.tsx

@@ -3,7 +3,7 @@ import { defineMessages, FormattedMessage } from 'react-intl';
 import { Button } from '@openfun/cunningham-react';
 import { Spinner } from 'components/Spinner';
 import { useSession } from 'contexts/SessionContext';
-import { CourseLight } from 'types/Joanie';
+import { PacedCourse } from 'types';
 import { useCourseWish } from './hooks/useCourseWish';
 
 const messages = defineMessages({
@@ -37,7 +37,7 @@ enum ComponentStates {
 }
 
 export interface Props {
-  course: CourseLight;
+  course: PacedCourse;
 }
 
 const CourseWishButton = ({ course }: Props) => {

package/js/widgets/SyllabusCourseRunsList/components/SyllabusAsideList/index.tsx

@@ -1,9 +1,9 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import React from 'react';
-import { CourseRun, Priority } from 'types';
+import { PacedCourse, CourseRun, Priority } from 'types';
+import { CourseRunHelper } from 'utils/CourseRunHelper';
 import { SyllabusSimpleCourseRunsList } from 'widgets/SyllabusCourseRunsList/components/SyllabusSimpleCourseRunsList';
 import { SyllabusCourseRun } from 'widgets/SyllabusCourseRunsList/components/SyllabusCourseRun';
-import { CourseLight } from 'types/Joanie';
 
 const messages = defineMessages({
   otherCourseRuns: {
@@ -57,7 +57,7 @@ export const SyllabusAsideList = ({
   maxArchivedCourseRuns,
 }: {
   courseRuns: CourseRun[];
-  course: CourseLight;
+  course: PacedCourse;
   maxArchivedCourseRuns: number;
 }) => {
   const intl = useIntl();
@@ -106,6 +106,8 @@ export const SyllabusAsideList = ({
     [Priority.ARCHIVED_CLOSED].includes(run.state.priority),
   );
 
+  const showLanguages = CourseRunHelper.IsAllCourseRunsWithSameLanguages(courseRuns);
+
   return (
     <>
       <h2 className="course-detail__title">
@@ -134,7 +136,12 @@ export const SyllabusAsideList = ({
           className="course-detail__row course-detail__runs course-detail__runs--open"
         >
           {openedRuns.map((run) => (
-            <SyllabusCourseRun key={run.id} courseRun={run} course={course} />
+            <SyllabusCourseRun
+              key={run.id}
+              courseRun={run}
+              course={course}
+              showLanguages={showLanguages}
+            />
           ))}
         </div>
       )}

package/js/widgets/SyllabusCourseRunsList/components/SyllabusCourseRun/index.tsx

@@ -1,13 +1,12 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Button } from '@openfun/cunningham-react';
-import { CourseRun, CourseRunDisplayMode } from 'types';
+import { CourseRun, CourseRunDisplayMode, PacedCourse } from 'types';
 import useDateFormat from 'hooks/useDateFormat';
 import { extractResourceId, isJoanieResourceLinkProduct } from 'api/lms/joanie';
 import { findLmsBackend } from 'api/configuration';
 import { StringHelper } from 'utils/StringHelper';
 import { IntlHelper } from 'utils/IntlHelper';
 import { DjangoCMSPluginCourseRun, DjangoCMSTemplate } from 'components/DjangoCMSTemplate';
-import { CourseLight } from 'types/Joanie';
 import CourseRunEnrollment from '../CourseRunEnrollment';
 import CourseProductItem from '../CourseProductItem';
 
@@ -39,7 +38,13 @@ const messages = defineMessages({
   },
 });
 
-const OpenedCourseRun = ({ courseRun }: { courseRun: CourseRun }) => {
+const OpenedCourseRun = ({
+  courseRun,
+  showLanguages,
+}: {
+  courseRun: CourseRun;
+  showLanguages: boolean;
+}) => {
   const formatDate = useDateFormat();
   const intl = useIntl();
   const enrollmentStart = courseRun.enrollment_start
@@ -76,10 +81,14 @@ const OpenedCourseRun = ({ courseRun }: { courseRun: CourseRun }) => {
             }}
           />
         </dd>
-        <dt>
-          <FormattedMessage {...messages.languages} />
-        </dt>
-        <dd>{IntlHelper.getLocalizedLanguages(courseRun.languages, intl)}</dd>
+        {!showLanguages && (
+          <>
+            <dt>
+              <FormattedMessage {...messages.languages} />
+            </dt>
+            <dd>{IntlHelper.getLocalizedLanguages(courseRun.languages, intl)}</dd>
+          </>
+        )}
       </dl>
       {findLmsBackend(courseRun.resource_link) ? (
         <CourseRunEnrollment courseRun={courseRun} />
@@ -95,9 +104,11 @@ const OpenedCourseRun = ({ courseRun }: { courseRun: CourseRun }) => {
 export const SyllabusCourseRun = ({
   courseRun,
   course,
+  showLanguages,
 }: {
   courseRun: CourseRun;
-  course: CourseLight;
+  course: PacedCourse;
+  showLanguages: boolean;
 }) => {
   return (
     <DjangoCMSTemplate plugin={DjangoCMSPluginCourseRun(courseRun)}>
@@ -109,7 +120,7 @@ export const SyllabusCourseRun = ({
             compact={courseRun.display_mode === CourseRunDisplayMode.COMPACT}
           />
         ) : (
-          <OpenedCourseRun courseRun={courseRun} />
+          <OpenedCourseRun courseRun={courseRun} showLanguages={showLanguages} />
         )}
       </div>
     </DjangoCMSTemplate>

package/js/widgets/SyllabusCourseRunsList/components/SyllabusCourseRunCompacted/index.tsx

@@ -0,0 +1,111 @@
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { CourseRun, CourseRunDisplayMode, PacedCourse } from 'types';
+import useDateFormat from 'hooks/useDateFormat';
+import { extractResourceId, isJoanieResourceLinkProduct } from 'api/lms/joanie';
+import { findLmsBackend } from 'api/configuration';
+import { StringHelper } from 'utils/StringHelper';
+import { IntlHelper } from 'utils/IntlHelper';
+import { DjangoCMSPluginCourseRun, DjangoCMSTemplate } from 'components/DjangoCMSTemplate';
+import CourseRunEnrollment from '../CourseRunEnrollment';
+import CourseProductItem from '../CourseProductItem';
+
+const messages = defineMessages({
+  course: {
+    id: 'components.SyllabusCourseRunCompacted.course',
+    description: 'Title of the course dates section of an opened course run block',
+    defaultMessage: 'Course',
+  },
+  languages: {
+    id: 'components.SyllabusCourseRunCompacted.languages',
+    description: 'Title of the languages section of an opened course run block',
+    defaultMessage: 'Languages',
+  },
+  selfPaceRunPeriod: {
+    id: 'components.SyllabusCourseRunCompacted.selfPaceCoursePeriod',
+    description: 'Course date of an opened and self paced course run block',
+    defaultMessage: 'Available until {endDate}',
+  },
+  selfPaceNoEndDate: {
+    id: 'components.SyllabusCourseRunCompacted.selfPaceNoEndDate',
+    description: 'Self paced course run block with no end date',
+    defaultMessage: 'Available',
+  },
+});
+
+const OpenedSelfPacedCourseRun = ({
+  courseRun,
+  showLanguages,
+}: {
+  courseRun: CourseRun;
+  showLanguages: boolean;
+}) => {
+  const formatDate = useDateFormat();
+  const intl = useIntl();
+  const end = courseRun.end ? formatDate(courseRun.end) : '...';
+  const hasEndDate = end !== '...';
+  return (
+    <>
+      {courseRun.title && <h3>{StringHelper.capitalizeFirst(courseRun.title)}</h3>}
+      <dl>
+        {!showLanguages && (
+          <dt>
+            <FormattedMessage {...messages.course} />
+          </dt>
+        )}
+        <dd>
+          {hasEndDate ? (
+            <FormattedMessage
+              {...messages.selfPaceRunPeriod}
+              values={{
+                endDate: end,
+              }}
+            />
+          ) : (
+            <FormattedMessage {...messages.selfPaceNoEndDate} />
+          )}
+        </dd>
+        {!showLanguages && (
+          <>
+            <dt>
+              <FormattedMessage {...messages.languages} />
+            </dt>
+            <dd>{IntlHelper.getLocalizedLanguages(courseRun.languages, intl)}</dd>
+          </>
+        )}
+      </dl>
+      {findLmsBackend(courseRun.resource_link) ? (
+        <CourseRunEnrollment courseRun={courseRun} />
+      ) : (
+        <a className="course-run-enrollment__cta" href={courseRun.resource_link}>
+          {StringHelper.capitalizeFirst(courseRun.state.call_to_action)}
+        </a>
+      )}
+    </>
+  );
+};
+
+export const SyllabusCourseRunCompacted = ({
+  courseRun,
+  course,
+  showLanguages,
+}: {
+  courseRun: CourseRun;
+  course: PacedCourse;
+  showLanguages: boolean;
+}) => {
+  return (
+    <DjangoCMSTemplate plugin={DjangoCMSPluginCourseRun(courseRun)}>
+      <div className="course-detail__run-descriptions course-detail__run-descriptions--course_and_search">
+        {isJoanieResourceLinkProduct(courseRun.resource_link) ? (
+          <CourseProductItem
+            productId={extractResourceId(courseRun.resource_link, 'product')!}
+            course={course}
+            compact={courseRun.display_mode === CourseRunDisplayMode.COMPACT}
+          />
+        ) : (
+          <OpenedSelfPacedCourseRun courseRun={courseRun} showLanguages={showLanguages} />
+        )}
+      </div>
+    </DjangoCMSTemplate>
+  );
+};