638-feat: Add registration end date to the course pages (#828)

* feat: 638 - add ending of register date

* feat: 638 - add end registration date

* fix: 638 - fix unnecessary conditional rendering

* feat: 638 - add reg date in upcoming courses

* fix: 638 - fix component

* fix: 638 - Fixed files

* refactor: 638 - Refactor short-info-panel

* refactor: 638 - Refactor variables

* refactor: 638 - Refactor short-info-panel tests

* fix: 638 - Fix styles in mentoring course-card

* fix: 638 - Delete isCompactView variable

* refactor: 638 - Refactor shortInfoPanel

* fix: 638 - Add .env.example

* fix: 638 - fix bags

* fix: 638 - Fix short-infp-panel tests

* fix: 638 - Fix start date

* fix: 638 - Fix data-simple component

* fix: 638 - Fix tests course-item

* fix: 638 - fix the name of .env.example

Author: satrija87

src/entities/course/ui/course-card/course-card.tsx

@@ -3,8 +3,7 @@ import classNames from 'classnames/bind';
 import Image from 'next/image';
 
 import type { Course } from '../../types';
-import { LABELS, TO_BE_DETERMINED } from '@/shared/constants';
-import { DateSimple } from '@/shared/ui/date-simple';
+import { LABELS } from '@/shared/constants';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { ShortInfoPanel } from '@/shared/ui/short-info-panel';
 import { Subtitle } from '@/shared/ui/subtitle';
@@ -25,7 +24,8 @@ export type CourseCardProps = Pick<
   | 'registrationEndDate'
   | 'personalMentoringStartDate'
   | 'personalMentoringEndDate'
-> & Pick<HTMLProps<HTMLDivElement>, 'className'> & {
+> &
+Pick<HTMLProps<HTMLDivElement>, 'className'> & {
   size?: 'sm' | 'md';
   showMentoringStartDate?: boolean;
 };
@@ -40,7 +40,7 @@ export const CourseCard = ({
   backgroundStyle,
   personalMentoringStartDate,
   personalMentoringEndDate,
-  showMentoringStartDate = false,
+  showMentoringStartDate,
   className = '',
   size = 'md',
 }: CourseCardProps) => {
@@ -63,33 +63,22 @@ export const CourseCard = ({
     <article className={cx('course-card', classes)} data-testid="course-card">
       <div className={cx('card-header')} style={cardStyle} data-testid="card-header">
         <Image src={iconSrc} alt={title} />
-        <Subtitle className={cx('course-title')} fontSize={fontSize}>{title}</Subtitle>
+        <Subtitle className={cx('course-title')} fontSize={fontSize}>
+          {title}
+        </Subtitle>
       </div>
       <div className={cx('course-info')}>
-        {!showMentoringStartDate && (
-          <ShortInfoPanel
-            label={dateLabel}
-            startDate={startDate}
-            registrationEndDate={registrationEndDate}
-            language={language}
-          >
-          </ShortInfoPanel>
-        )}
-        {showMentoringStartDate && (
-          <div>
-            <DateSimple
-              label={LABELS.MENTOR_ACTIVITIES}
-              startDate={personalMentoringStartDate || TO_BE_DETERMINED}
-              endDate={personalMentoringStartDate ? personalMentoringEndDate : null}
-              labelSeparator={LABELS.MENTOR_ACTIVITIES_SEPARATOR}
-            />
-            <ShortInfoPanel
-              startDate={null}
-              registrationEndDate={null}
-              language={language}
-            />
-          </div>
-        )}
+        <ShortInfoPanel
+          showMentoringStartDate={showMentoringStartDate}
+          label={dateLabel}
+          startDate={startDate}
+          registrationEndDate={registrationEndDate}
+          language={language}
+          personalMentoringStartDate={personalMentoringStartDate}
+          personalMentoringEndDate={personalMentoringEndDate}
+        >
+        </ShortInfoPanel>
+
         <LinkCustom
           className={cx('course-link')}
           href={detailsUrl}

src/entities/course/ui/course-item/course-item.tsx

@@ -30,14 +30,11 @@ export const CourseItem = ({
         />
       </figure>
       <article className={cx('course-info')}>
-        <Subtitle fontSize="extra-small">
-          {title}
-        </Subtitle>
+        <Subtitle fontSize="extra-small">{title}</Subtitle>
         <ShortInfoPanel
           startDate={startDate}
           registrationEndDate={registrationEndDate}
           language={language}
-          onlyLanguage={true}
         />
       </article>
       <LinkCustom

src/shared/constants.ts

@@ -16,6 +16,7 @@ export const API_MAX_INCLUDE_DEPTH = 10;
 export const LABELS = {
   START_DATE: 'Course starts on:',
   START_DATE_SHORT: 'Start:',
+  REGISTRATION_END: 'Enroll untill:',
   COURSE_LANGUAGE_EN: 'English',
   COURSE_LANGUAGE_RU: 'Russian',
   MENTOR_ACTIVITIES: 'Mentorship starts on:',

src/shared/ui/date-simple/date-simple.test.tsx

@@ -9,8 +9,9 @@ import { dayJS } from '@/shared/helpers/day-js';
 describe('DateSimple', () => {
   it('renders UI correctly having only start date', () => {
     const startDate = '2088-01-01';
+    const showMentoringStartDate = false;
 
-    render(<DateSimple startDate={startDate} />);
+    render(<DateSimple startDate={startDate} showMentoringStartDate={showMentoringStartDate} />);
     expect(screen.queryByText(LABELS.START_DATE)).toBeNull();
     expect(screen.getByText(`${startDate}`)).toBeInTheDocument();
     expect(screen.queryByAltText('note-icon')).toBeNull();
@@ -21,13 +22,15 @@ describe('DateSimple', () => {
     const startDate = '2088-01-01';
     const endDate = '2088-06-30';
     const labelSeparator = 'test-separator';
+    const showMentoringStartDate = true;
 
     render(
       <DateSimple
         label={label}
         startDate={startDate}
         endDate={endDate}
         labelSeparator={labelSeparator}
+        showMentoringStartDate={showMentoringStartDate}
       />,
     );
     expect(screen.getByAltText('note-icon')).toHaveAttribute('src', noteIcon.src);
@@ -40,8 +43,15 @@ describe('DateSimple', () => {
   it('displays dates and date attributes correctly including endDate TBD case', () => {
     const startDate = '2088-01-01';
     const endDate = TO_BE_DETERMINED;
+    const showMentoringStartDate = true;
 
-    render(<DateSimple startDate={startDate} endDate={endDate} />);
+    render(
+      <DateSimple
+        startDate={startDate}
+        endDate={endDate}
+        showMentoringStartDate={showMentoringStartDate}
+      />,
+    );
     const startDateElement = screen.getByTestId('date-time-start');
     const endDateElement = screen.getByTestId('date-time-end');
 
@@ -54,13 +64,15 @@ describe('DateSimple', () => {
   it('displays dates and date attributes correctly when start and end dates are TBD', () => {
     const startDate = TO_BE_DETERMINED;
     const endDate = TO_BE_DETERMINED;
+    const showMentoringStartDate = true;
 
     render(
       <DateSimple
         label={LABELS.START_DATE}
         startDate={startDate}
         labelSeparator={LABELS.MENTOR_ACTIVITIES_SEPARATOR}
         endDate={endDate}
+        showMentoringStartDate={showMentoringStartDate}
       />,
     );
     const startDateElement = screen.getByTestId('date-time-start');
@@ -77,12 +89,14 @@ describe('DateSimple', () => {
   it('displays correctly when endDate is undefined but label separator not', () => {
     const startDate = '2088-01-01';
     const labelSeparator = 'test-separator';
+    const showMentoringStartDate = true;
 
     render(
       <DateSimple
         label={LABELS.START_DATE}
         startDate={startDate}
         labelSeparator={labelSeparator}
+        showMentoringStartDate={showMentoringStartDate}
       />,
     );
     const labelSeparatorElement = screen.queryByText(`${labelSeparator}`);
@@ -93,9 +107,10 @@ describe('DateSimple', () => {
   it('displays start date and additional info passed as children', () => {
     const startDate = '2088-01-01';
     const additionalInfoText = 'Test additional info element';
+    const showMentoringStartDate = true;
 
     render(
-      <DateSimple startDate={startDate}>
+      <DateSimple startDate={startDate} showMentoringStartDate={showMentoringStartDate}>
         <span>{additionalInfoText}</span>
       </DateSimple>,
     );

src/shared/ui/date-simple/date-simple.tsx

@@ -1,61 +1,66 @@
-import React from 'react';
-import classNames from 'classnames/bind';
-import Image from 'next/image';
-
-import noteIcon from '@/shared/assets/icons/note-icon.svg';
-import { TO_BE_DETERMINED } from '@/shared/constants';
-import { dayJS } from '@/shared/helpers/day-js';
-
-import styles from './date-simple.module.scss';
-
-const cx = classNames.bind(styles);
-
-type DateStartProps = {
-  startDate: string | null;
-  endDate?: string | null;
-  label?: string;
-  labelSeparator?: string;
-  children?: React.ReactNode;
-};
-
-const formatDateAttr = (date: string | null | undefined): string | undefined => {
-  if (!date || date === TO_BE_DETERMINED) {
-    return undefined;
-  }
-
-  return dayJS(date).toISOString();
-};
-
-export const DateSimple = ({
-  startDate,
-  endDate,
-  label,
-  labelSeparator,
-  children,
-}: DateStartProps) => {
-  const startDateAttr = formatDateAttr(startDate);
-  const endDateAttr = formatDateAttr(endDate);
-
-  return (
-    <p className={cx('date')}>
-      {label && (
-        <>
-          <Image className={cx('icon')} src={noteIcon} alt="note-icon" />
-          <span className={cx('bold')}>{label}</span>
-        </>
-      )}
-      {startDate && (
-        <time dateTime={startDateAttr} data-testid="date-time-start">
-          {startDate}
-        </time>
-      )}
-      {labelSeparator && endDate && <span>{labelSeparator}</span>}
-      {endDate && (
-        <time dateTime={endDateAttr} data-testid="date-time-end">
-          {endDate}
-        </time>
-      )}
-      {children}
-    </p>
-  );
-};
+import React from 'react';
+import classNames from 'classnames/bind';
+import Image from 'next/image';
+
+import noteIcon from '@/shared/assets/icons/note-icon.svg';
+import { TO_BE_DETERMINED } from '@/shared/constants';
+import { dayJS } from '@/shared/helpers/day-js';
+
+import styles from './date-simple.module.scss';
+
+const cx = classNames.bind(styles);
+
+type DateStartProps = {
+  startDate: string | null;
+  endDate?: string | null;
+  label?: string;
+  labelSeparator?: string;
+  children?: React.ReactNode;
+  showMentoringStartDate: boolean;
+};
+
+const formatDateAttr = (date: string | null | undefined): string | undefined => {
+  if (!date || date === TO_BE_DETERMINED) {
+    return undefined;
+  }
+
+  return dayJS(date).toISOString();
+};
+
+export const DateSimple = ({
+  startDate,
+  endDate,
+  label,
+  labelSeparator,
+  children,
+  showMentoringStartDate,
+}: DateStartProps) => {
+  const startDateAttr = formatDateAttr(startDate);
+  const endDateAttr = formatDateAttr(endDate);
+
+  const startDateFormat = startDate && endDate ? dayJS(startDate).format('MMM D') : startDate;
+
+  return (
+    <p className={cx('date')}>
+      {label && (
+        <>
+          <Image className={cx('icon')} src={noteIcon} alt="note-icon" />
+          <span className={cx('bold')}>{label}</span>
+        </>
+      )}
+      {startDate && (
+        <time dateTime={startDateAttr} data-testid="date-time-start">
+          {showMentoringStartDate ? startDate : startDateFormat}
+        </time>
+      )}
+
+      {labelSeparator && endDate && <span>{labelSeparator}</span>}
+      {endDate && (
+        <time dateTime={endDateAttr} data-testid="date-time-end">
+          {endDate}
+        </time>
+      )}
+      {children}
+    </p>
+  );
+};

src/shared/ui/short-info-panel/short-info-panel.module.scss

@@ -18,7 +18,7 @@
   margin: 0;
 
   font-size: 14px;
-  color: $color-gray-600;
+  color: $color-gray-900;
 }
 
 .icon {