614-fix: Pre school subtitle

dev-data/about-course.data.tsx

@@ -1,10 +1,10 @@
 import { ROUTES } from '@/core/const';
 import awardIcon from '@/shared/assets/icons/award-icon.webp';
 import giftIcon from '@/shared/assets/icons/gift.webp';
 import noteIcon from '@/shared/assets/icons/note-icon.webp';
 import paperIcon from '@/shared/assets/icons/paper-icon.webp';
 import personIcon from '@/shared/assets/icons/person-icon.webp';
 import planetIcon from '@/shared/assets/icons/planet.webp';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { List } from '@/shared/ui/list';
 import type { AboutCourseInfo } from 'data';
@@ -14,23 +14,33 @@
   [key in CourseNamesChannels]: AboutCourseInfo[];
 };
 
+const enIntro = {
+  title: 'About the course',
+  linkLabel: 'Become a student',
+  paragraph: null,
+};
+const ruIntro = {
+  title: 'О курсе',
+  linkLabel: 'Cтать студентом',
+  paragraph: null,
+};
+const preSchoolIntro = {
+  title: 'JS/Frontend-разработка. Подготовительный этап',
+  linkLabel: 'Стать студентом',
+  paragraph:
+    'Подготовительный этап поможет тем, кто мало знаком или совсем не знаком с программированием и хотел бы впоследствии учиться на основном курсе «JavaScript/Front-end».',
+};
+
 export const introLocalizedContent = {
-  en: {
-    title: 'About the course',
-    linkLabel: 'Become a student',
-    paragraph: '',
-  },
-  ru: {
-    title: 'О курсе',
-    linkLabel: 'Cтать студентом',
-    paragraph: '',
-  },
-  'pre-school-ru': {
-    title: 'JS/Frontend-разработка. Подготовительный этап',
-    linkLabel: 'Стать студентом',
-    paragraph:
-      'Подготовительный этап поможет тем, кто мало знаком или совсем не знаком с программированием и хотел бы впоследствии учиться на основном курсе «JavaScript/Front-end».',
-  },
+  [COURSE_TITLES.JS_PRESCHOOL_RU]: preSchoolIntro,
+  [COURSE_TITLES.JS_EN]: enIntro,
+  [COURSE_TITLES.JS_RU]: ruIntro,
+  [COURSE_TITLES.REACT]: enIntro,
+  [COURSE_TITLES.ANGULAR]: enIntro,
+  [COURSE_TITLES.NODE]: enIntro,
+  [COURSE_TITLES.AWS_FUNDAMENTALS]: enIntro,
+  [COURSE_TITLES.AWS_CLOUD_DEVELOPER]: enIntro,
+  [COURSE_TITLES.AWS_DEVOPS]: enIntro,
 };
 
 const listData = {

dev-data/courses.data.ts

@@ -24,6 +24,7 @@ export const courses: Course[] = [
   {
     id: '1',
     title: COURSE_TITLES.JS_PRESCHOOL_RU,
+    subTitle: 'Pre-school RU',
     alias: COURSE_ALIASES.JS_PRESCHOOL_RU,
     altTitle: 'JavaScript / Front-end',
     iconSrc: javascript,
@@ -43,6 +44,7 @@ export const courses: Course[] = [
   {
     id: '2',
     title: COURSE_TITLES.JS_EN,
+    subTitle: null,
     alias: COURSE_ALIASES.JS_EN,
     altTitle: 'JavaScript / Front-end',
     iconSrc: javascript,
@@ -62,6 +64,7 @@ export const courses: Course[] = [
   {
     id: '3',
     title: COURSE_TITLES.JS_RU,
+    subTitle: null,
     alias: COURSE_ALIASES.JS_RU,
     altTitle: 'JavaScript / Front-end',
     iconSrc: javascript,
@@ -81,6 +84,7 @@ export const courses: Course[] = [
   {
     id: '4',
     title: COURSE_TITLES.REACT,
+    subTitle: null,
     alias: COURSE_ALIASES.REACT,
     iconSrc: react,
     iconSmall: reactSmall,
@@ -99,6 +103,7 @@ export const courses: Course[] = [
   {
     id: '5',
     title: COURSE_TITLES.ANGULAR,
+    subTitle: null,
     alias: COURSE_ALIASES.ANGULAR,
     iconSrc: angular,
     iconSmall: angularSmall,
@@ -117,6 +122,7 @@ export const courses: Course[] = [
   {
     id: '6',
     title: COURSE_TITLES.NODE,
+    subTitle: null,
     alias: COURSE_ALIASES.NODE,
     iconSrc: nodejs,
     iconSmall: nodejsSmall,
@@ -135,6 +141,7 @@ export const courses: Course[] = [
   {
     id: '7',
     title: COURSE_TITLES.AWS_FUNDAMENTALS,
+    subTitle: null,
     alias: COURSE_ALIASES.AWS_FUNDAMENTALS,
     iconSrc: aws,
     iconSmall: awsFundSmall,
@@ -154,6 +161,7 @@ export const courses: Course[] = [
   {
     id: '8',
     title: COURSE_TITLES.AWS_CLOUD_DEVELOPER,
+    subTitle: null,
     alias: COURSE_ALIASES.AWS_CLOUD_DEVELOPER,
     iconSrc: aws,
     iconSmall: awsDevSmall,
@@ -172,6 +180,7 @@ export const courses: Course[] = [
   {
     id: '9',
     title: COURSE_TITLES.AWS_DEVOPS,
+    subTitle: null,
     alias: COURSE_ALIASES.AWS_DEVOPS,
     iconSrc: aws,
     iconSmall: awsDevSmall,

src/app/courses/javascript-preschool-ru/page.tsx

@@ -13,7 +13,5 @@ export async function generateMetadata(): Promise<Metadata> {
 export default async function JsPreRoute() {
   const course = await selectCourse(courseName);
 
-  return (
-    <JavaScriptPreSchoolRu lang="ru" type="pre-school-ru" course={course} courseName={courseName} />
-  );
+  return <JavaScriptPreSchoolRu lang="ru" course={course} courseName={courseName} />;
 }

src/entities/course/types.ts

@@ -25,6 +25,7 @@ export type ApiCoursesResponse = Readonly<{
 export type Course = {
   id: string;
   title: CourseNamesKeys;
+  subTitle: string | null;
   alias: CourseAliasValues;
   altTitle?: string;
   iconSrc: StaticImageData;

src/shared/__tests__/constants.ts

@@ -25,6 +25,7 @@ export const mockedCourses: Course[] = [
   {
     id: '1',
     title: COURSE_TITLES.JS_PRESCHOOL_RU,
+    subTitle: 'Pre-school RU',
     alias: COURSE_ALIASES.JS_PRESCHOOL_RU,
     startDate: 'Jun 24, 2024',
     registrationEndDate: 'Jun 24, 2024',
@@ -44,6 +45,7 @@ export const mockedCourses: Course[] = [
   {
     id: '2',
     title: COURSE_TITLES.JS_EN,
+    subTitle: null,
     alias: COURSE_ALIASES.JS_EN,
     startDate: 'Oct, 2024',
     registrationEndDate: 'Jun 24, 2025',
@@ -63,6 +65,7 @@ export const mockedCourses: Course[] = [
   {
     id: '3',
     title: COURSE_TITLES.JS_RU,
+    subTitle: null,
     alias: COURSE_ALIASES.JS_RU,
     startDate: 'Oct, 2024',
     registrationEndDate: 'Jun 24, 2025',
@@ -82,6 +85,7 @@ export const mockedCourses: Course[] = [
   {
     id: '4',
     title: COURSE_TITLES.REACT,
+    subTitle: null,
     alias: COURSE_ALIASES.REACT,
     startDate: 'Jul 1, 2024',
     registrationEndDate: 'Jun 24, 2024',
@@ -101,6 +105,7 @@ export const mockedCourses: Course[] = [
   {
     id: '5',
     title: COURSE_TITLES.ANGULAR,
+    subTitle: null,
     alias: COURSE_ALIASES.ANGULAR,
     startDate: 'Jul 1, 2024',
     registrationEndDate: 'Jun 24, 2025',
@@ -120,6 +125,7 @@ export const mockedCourses: Course[] = [
   {
     id: '6',
     title: COURSE_TITLES.AWS_FUNDAMENTALS,
+    subTitle: null,
     alias: COURSE_ALIASES.AWS_FUNDAMENTALS,
     startDate: 'Jul 1, 2024',
     registrationEndDate: 'Jun 24, 2025',

src/shared/helpers/getActualData.test.ts

@@ -20,6 +20,7 @@ const coursesMock: Course[] = [
     id: '1',
     title: COURSE_TITLES.REACT,
     alias: COURSE_ALIASES.REACT,
+    subTitle: null,
     altTitle: 'altTitle',
     iconSrc: {
       src: 'icon',
@@ -50,6 +51,7 @@ const coursesMock: Course[] = [
   {
     id: '2',
     title: COURSE_TITLES.REACT,
+    subTitle: null,
     alias: COURSE_ALIASES.REACT,
     altTitle: 'altTitle',
     iconSrc: {
@@ -81,6 +83,7 @@ const coursesMock: Course[] = [
   {
     id: '3',
     title: COURSE_TITLES.REACT,
+    subTitle: null,
     alias: COURSE_ALIASES.REACT,
     altTitle: 'altTitle',
     iconSrc: {

src/views/javascript-preschool-ru.tsx

@@ -13,21 +13,15 @@ import { CourseNames, preSchoolRu } from 'data';
 type JavaScriptPreSchoolRuProps = {
   course: Course;
   lang: 'ru' | 'en';
-  type?: 'pre-school-ru';
   courseName: CourseNames['JS_PRESCHOOL_RU'];
 };
 
-export const JavaScriptPreSchoolRu = ({
-  lang,
-  type,
-  course,
-  courseName,
-}: JavaScriptPreSchoolRuProps) => {
+export const JavaScriptPreSchoolRu = ({ lang, course, courseName }: JavaScriptPreSchoolRuProps) => {
   return (
     <>
-      <HeroCourse type={type} lang={lang} course={course} />
+      <HeroCourse lang={lang} course={course} />
       <Breadcrumbs />
-      <AboutCourse courseName={courseName} type={type} course={course} />
+      <AboutCourse courseName={courseName} course={course} />
       <TrainingProgram courseName={courseName} lang={lang} course={course} />
       <Required courseName={courseName} />
       <Certification courseName={courseName} />

src/views/javascript-ru.tsx

@@ -25,7 +25,7 @@ export const JavaScriptRu = ({ lang, course, courseName }: JavaScriptRuProps) =>
       <HeroCourse course={course} lang={lang} />
       <Breadcrumbs />
       <TrainingProgram course={course} courseName={courseName} lang={lang} />
-      <AboutCourse course={course} courseName={courseName} type={lang} />
+      <AboutCourse course={course} courseName={courseName} />
       <Certification courseName={courseName} />
       <Communication courseName={courseName} lang={lang} />
       <AboutVideo lang={lang} />

src/widgets/about-course/ui/about-course/about-course.test.tsx

@@ -18,6 +18,7 @@ const mockedReactCourse: Course = {
   iconSmall: MOCKED_IMAGE_PATH,
   iconSrc: MOCKED_IMAGE_PATH,
   title: COURSE_TITLES.REACT,
+  subTitle: null,
   alias: COURSE_ALIASES.REACT,
   language: ['en'],
   mode: 'online',
@@ -76,11 +77,7 @@ describe('AboutCourse component', () => {
   describe('render "Paragraph" with "js / front-end pre-school ru" props', () => {
     it("renders 'Paragraph' and its' content", async () => {
       renderWithRouter(
-        <AboutCourse
-          course={mockedPreSchoolCourse}
-          courseName="JS / Front-end Pre-school RU"
-          type="pre-school-ru"
-        />,
+        <AboutCourse course={mockedPreSchoolCourse} courseName="JS / Front-end Pre-school RU" />,
       );
 
       const paragraph = await screen.findByText(/Подготовительный этап поможет тем/i);

src/widgets/about-course/ui/about-course/about-course.tsx

@@ -12,23 +12,22 @@ export const cx = classNames.bind(styles);
 
 type AboutCourseProps = {
   courseName: CourseNamesKeys;
-  type?: 'ru' | 'en' | 'pre-school-ru';
   course: Course;
 };
 
-export const AboutCourse = ({ course, courseName, type = 'en' }: AboutCourseProps) => {
+export const AboutCourse = ({ course, courseName }: AboutCourseProps) => {
   const courseInfoList = contentMapAbout[courseName];
 
   return (
     <section className={cx('container')}>
       <div className={cx('about-course', 'content')}>
-        <WidgetTitle>{introLocalizedContent[type].title}</WidgetTitle>
-        {introLocalizedContent[type]?.paragraph && (
-          <Paragraph>{introLocalizedContent[type].paragraph}</Paragraph>
+        <WidgetTitle>{introLocalizedContent[courseName].title}</WidgetTitle>
+        {introLocalizedContent[courseName]?.paragraph && (
+          <Paragraph>{introLocalizedContent[courseName].paragraph}</Paragraph>
         )}
         <AboutCourseGrid items={courseInfoList} />
         <LinkCustom href={course.enroll} variant="primary" external>
-          {introLocalizedContent[type]?.linkLabel}
+          {introLocalizedContent[courseName]?.linkLabel}
         </LinkCustom>
       </div>
     </section>

src/widgets/hero-course/ui/hero-course.test.tsx

@@ -11,6 +11,7 @@ import { COURSE_TITLES } from 'data';
 const mockedCourse: Course = {
   id: '6',
   title: COURSE_TITLES.NODE,
+  subTitle: 'Test Subtitle',
   alias: COURSE_ALIASES.NODE,
   iconSrc: MOCKED_IMAGE_PATH,
   iconSmall: MOCKED_IMAGE_PATH,
@@ -28,29 +29,48 @@ const mockedCourse: Course = {
 };
 
 describe('HeroCourse component', () => {
-  beforeEach(() => {
-    renderWithRouter(<HeroCourse course={mockedCourse} />);
-  });
+  describe('Render general content', () => {
+    beforeEach(() => {
+      renderWithRouter(<HeroCourse course={mockedCourse} />);
+    });
 
-  it('renders the title and label correctly', async () => {
-    const titleElement = await screen.findByText('Node.js Course');
-    const labelElement = screen.getByText('planned');
+    it('renders the title and label correctly', async () => {
+      const titleElement = await screen.findByText('Node.js Course');
+      const labelElement = screen.getByText('planned');
 
-    expect(titleElement).toBeVisible();
-    expect(labelElement).toBeVisible();
-  });
+      expect(titleElement).toBeVisible();
+      expect(labelElement).toBeVisible();
+    });
+
+    it('renders enroll button with correct label and href', () => {
+      const buttonElement = screen.getByRole('link', { name: /enroll/i });
 
-  it('renders enroll button with correct label and href', () => {
-    const buttonElement = screen.getByRole('link', { name: /enroll/i });
+      expect(buttonElement).toBeVisible();
+      expect(buttonElement).toHaveAttribute('href', 'https://test.com');
+    });
 
-    expect(buttonElement).toBeVisible();
-    expect(buttonElement).toHaveAttribute('href', 'https://test.com');
+    it('renders the image with correct source', () => {
+      const imageElement = screen.getByRole('img', { name: /Node.js/i });
+
+      expect(imageElement).toBeInTheDocument();
+      expect(imageElement).toHaveAttribute('src', MOCKED_IMAGE_PATH.src);
+    });
   });
 
-  it('renders the image with correct source', () => {
-    const imageElement = screen.getByRole('img', { name: /Node.js/i });
+  describe('Render subtitle', () => {
+    it('renders the subtitle when provided', async () => {
+      renderWithRouter(<HeroCourse course={mockedCourse} />);
+      const subtitleElement = await screen.findByText('Test Subtitle');
+
+      expect(subtitleElement).toBeVisible();
+    });
+
+    it('does not display subtitles if they are not provided', () => {
+      mockedCourse.subTitle = null;
+      renderWithRouter(<HeroCourse course={mockedCourse} />);
+      const subtitleElement = screen.queryByText('Test Subtitle');
 
-    expect(imageElement).toBeInTheDocument();
-    expect(imageElement).toHaveAttribute('src', MOCKED_IMAGE_PATH.src);
+      expect(subtitleElement).toBeNull();
+    });
   });
 });