725-feat: Sync wearecommunity link with api data

dev-data/about-course.data.tsx

@@ -5,6 +5,7 @@ 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 { REGISTRATION_WILL_OPEN_SOON, REGISTRATION_WILL_OPEN_SOON_RU } from '@/shared/constants';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { List } from '@/shared/ui/list';
 import type { AboutCourseInfo } from 'data';
@@ -17,16 +18,19 @@ type ContentMap = {
 const enIntro = {
   title: 'About the course',
   linkLabel: 'Become a student',
+  noLinkLabel: REGISTRATION_WILL_OPEN_SOON,
   paragraph: null,
 };
 const ruIntro = {
   title: 'О курсе',
   linkLabel: 'Cтать студентом',
+  noLinkLabel: REGISTRATION_WILL_OPEN_SOON_RU,
   paragraph: null,
 };
 const preSchoolIntro = {
   title: 'JS/Frontend-разработка. Подготовительный этап',
   linkLabel: 'Стать студентом',
+  noLinkLabel: REGISTRATION_WILL_OPEN_SOON_RU,
   paragraph:
     'Подготовительный этап поможет тем, кто мало знаком или совсем не знаком с программированием и хотел бы впоследствии учиться на основном курсе «JavaScript/Front-end».',
 };

dev-data/courses.data.ts

@@ -35,7 +35,7 @@ export const courses: Course[] = [
     language: 'ru',
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.JS_PRESCHOOL_RU}`,
-    enroll: 'https://wearecommunity.io/events/js-stage0-rs-2024q2',
+    enroll: null,
     backgroundStyle: {
       backgroundColor: '#FFFCE9',
       accentColor: '#FFDB20',
@@ -55,7 +55,7 @@ export const courses: Course[] = [
     language: 'en',
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.JS}`,
-    enroll: 'https://wearecommunity.io/events/js-en-2024q4',
+    enroll: null,
     backgroundStyle: {
       backgroundColor: '#FFFCE9',
       accentColor: '#FFDB20',
@@ -75,7 +75,7 @@ export const courses: Course[] = [
     language: 'ru',
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.JS_RU}`,
-    enroll: 'https://wearecommunity.io/events/js-stage1-2024q4',
+    enroll: null,
     backgroundStyle: {
       backgroundColor: '#FFFCE9',
       accentColor: '#FFDB20',
@@ -94,7 +94,7 @@ export const courses: Course[] = [
     language: 'en',
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.REACT}`,
-    enroll: 'https://wearecommunity.io/events/rs-react-2025q1',
+    enroll: null,
     backgroundStyle: {
       backgroundColor: '#EAF8FE',
       accentColor: '#2BB4EF',
@@ -113,7 +113,7 @@ export const courses: Course[] = [
     language: 'en',
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.ANGULAR}`,
-    enroll: 'https://wearecommunity.io/events/rs-angular-2024q3',
+    enroll: null,
     backgroundStyle: {
       backgroundColor: '#FFEFF2',
       accentColor: '#F95879',
@@ -132,7 +132,7 @@ export const courses: Course[] = [
     language: 'en',
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.NODE_JS}`,
-    enroll: 'https://wearecommunity.io/events/nodejs-2025q2',
+    enroll: null,
     backgroundStyle: {
       backgroundColor: '#F0F9F4',
       accentColor: '#AEDF36',
@@ -151,7 +151,7 @@ export const courses: Course[] = [
     language: 'en',
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.AWS_FUNDAMENTALS}`,
-    enroll: 'https://wearecommunity.io/events/aws-fundamentals-course-2024q4',
+    enroll: null,
     backgroundStyle: {
       backgroundColor: '#F4F1FA',
       accentColor: '#7356BF',
@@ -171,7 +171,7 @@ export const courses: Course[] = [
     language: 'en',
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.AWS_DEVELOPER}`,
-    enroll: 'https://wearecommunity.io/events/aws-cloud-dev-rs2024q2',
+    enroll: null,
     backgroundStyle: {
       backgroundColor: '#F4F1FA',
       accentColor: '#7356BF',
@@ -190,7 +190,7 @@ export const courses: Course[] = [
     language: 'en',
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.AWS_DEVOPS}`,
-    enroll: 'https://wearecommunity.io/events/aws-devops-course',
+    enroll: null,
     backgroundStyle: {
       backgroundColor: '#F4F1FA',
       accentColor: '#7356BF',

dev-data/hero-course.data.ts

@@ -1,6 +1,14 @@
+import { REGISTRATION_WILL_OPEN_SOON, REGISTRATION_WILL_OPEN_SOON_RU } from '@/shared/constants';
+
 export const heroCourseLocalized = {
-  en: { linkLabel: 'Enroll' },
-  ru: { linkLabel: 'Присоединиться' },
+  en: {
+    linkLabel: 'Enroll',
+    noLinkLabel: REGISTRATION_WILL_OPEN_SOON,
+  },
+  ru: {
+    linkLabel: 'Присоединиться',
+    noLinkLabel: REGISTRATION_WILL_OPEN_SOON_RU,
+  },
 } as const;
 
 export const courseStatus = {

dev-data/training-program.data.tsx

@@ -14,6 +14,7 @@ import awsFundamentalsImg from '@/shared/assets/rs-slope-aws-fundamentals.webp';
 import jsImg from '@/shared/assets/rs-slope-js.webp';
 import nodejsImg from '@/shared/assets/rs-slope-nodejs.webp';
 import reactEnImg from '@/shared/assets/rs-slope-react-en.webp';
+import { REGISTRATION_WILL_OPEN_SOON, REGISTRATION_WILL_OPEN_SOON_RU } from '@/shared/constants';
 import { LinkCustom } from '@/shared/ui/link-custom';
 import { List } from '@/shared/ui/list';
 import { Paragraph } from '@/shared/ui/paragraph';
@@ -301,6 +302,12 @@ export const contentMap: ContentMap = {
 };
 
 export const trainingProgramLink = {
-  en: { linkLabel: 'Register' },
-  ru: { linkLabel: 'Зарегистрироваться' },
+  en: {
+    linkLabel: 'Register',
+    noLinkLabel: REGISTRATION_WILL_OPEN_SOON,
+  },
+  ru: {
+    linkLabel: 'Зарегистрироваться',
+    noLinkLabel: REGISTRATION_WILL_OPEN_SOON_RU,
+  },
 };

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

src/core/styles/_constants.scss

@@ -72,5 +72,6 @@ $opacity-100: 1;
 $opacity-80: 0.8;
 $opacity-50: 0.5;
 $opacity-20: 0.2;
+$opacity-30: 0.3;
 $opacity-8: 0.08;
 $opacity-0: 0;

src/entities/course/helpers/sync-with-api-data.ts

@@ -19,6 +19,7 @@ export const syncWithApiData = (apiCourses: ApiCoursesResponse[]) => {
     clonedCourse.registrationEndDate = dayJS(currApiCourse.registrationEndDate).format(
       COURSE_DATE_FORMAT,
     );
+    clonedCourse.enroll = currApiCourse.wearecommunityUrl;
 
     return clonedCourse;
   });

src/entities/course/types.ts

@@ -21,6 +21,7 @@ export type ApiCoursesResponse = Readonly<{
   name: string;
   registrationEndDate: string;
   startDate: string;
+  wearecommunityUrl: string | null;
 }>;
 
 export type Course = {
@@ -37,7 +38,7 @@ export type Course = {
   language: Language;
   mode: 'online' | 'offline';
   detailsUrl: string;
-  enroll: string;
+  enroll: string | null;
   backgroundStyle: {
     backgroundColor: string;
     accentColor: string;

src/shared/__tests__/constants.ts

@@ -74,7 +74,7 @@ export const mockedCourses: Course[] = [
     iconSrc: MOCKED_IMAGE_PATH,
     iconSmall: MOCKED_IMAGE_PATH,
     secondaryIcon: MOCKED_IMAGE_PATH,
-    enroll: 'enroll',
+    enroll: null,
     mode: 'online',
     altTitle: 'JavaScript / Front-end',
     backgroundStyle: {
@@ -171,7 +171,7 @@ export const mockedCourses: Course[] = [
     language: 'en',
     mode: 'online',
     detailsUrl: `/${ROUTES.COURSES}/${ROUTES.AWS_DEVOPS}`,
-    enroll: 'enroll',
+    enroll: null,
     backgroundStyle: {
       backgroundColor: '#F4F1FA',
       accentColor: '#7356BF',

src/shared/constants.ts

@@ -2,6 +2,8 @@ export const RS_INTRO_URL = 'https://www.youtube.com/embed/n4unZLVpnaU';
 export const RS_FOUNDATION_YEAR = '2013';
 export const RS_EMAIL = '[email protected]';
 export const TO_BE_DETERMINED = 'TBD';
+export const REGISTRATION_WILL_OPEN_SOON = 'Registration will open soon!';
+export const REGISTRATION_WILL_OPEN_SOON_RU = 'Регистрация откроется скоро!';
 
 export const PAGE_NAMES = {
   SCHOOL: 'school',

src/shared/ui/link-custom/link-custom.module.scss

@@ -88,3 +88,8 @@
     text-decoration: none;
   }
 }
+
+.disabled {
+  pointer-events: none;
+  opacity: $opacity-30;
+}

src/shared/ui/link-custom/link-custom.tsx

@@ -16,6 +16,7 @@ type LinkCustomAdditionalProps = {
   href: string;
   icon?: ReactNode;
   external?: boolean;
+  disabled?: boolean;
 };
 
 const linkCustomVariants = cva('', {
@@ -42,6 +43,7 @@ export const LinkCustom = ({
   className = '',
   variant = 'textLink',
   external = false,
+  disabled = false,
   ...props
 }: LinkCustomProps) => {
   const resolveIcon = () => {
@@ -62,16 +64,19 @@ export const LinkCustom = ({
 
   return (
     <Link
-      className={linkCustomVariants({
-        variant,
-        className,
-      })}
+      className={cx(
+        { disabled },
+        linkCustomVariants({
+          variant,
+          className,
+        }),
+      )}
       href={href}
       {...props}
       {...(external && externalLinkAttributes)}
     >
       {children}
-      {resolveIcon()}
+      {!disabled && resolveIcon()}
     </Link>
   );
 };

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

@@ -3,9 +3,13 @@ import { beforeEach } from 'vitest';
 import { AboutCourse } from './about-course';
 import { mockedCourses } from '@/shared/__tests__/constants';
 import { renderWithRouter } from '@/shared/__tests__/utils';
+import { REGISTRATION_WILL_OPEN_SOON, REGISTRATION_WILL_OPEN_SOON_RU } from '@/shared/constants';
 import { COURSE_TITLES } from 'data';
 
 const mockReactCourse = mockedCourses.find((course) => course.title === COURSE_TITLES.REACT);
+const mockCourseWithoutLink = mockedCourses.find(
+  (course) => course.title === COURSE_TITLES.AWS_DEVOPS,
+)!;
 
 describe('AboutCourse component', () => {
   describe('render with "react" props', () => {
@@ -56,4 +60,30 @@ describe('AboutCourse component', () => {
       expect(paragraph).toBeVisible();
     });
   });
+
+  describe('Render widget with empty link', () => {
+    it('renders registration will open soon with correct label and href', async () => {
+      const widget = await AboutCourse({ courseName: mockCourseWithoutLink.title });
+
+      renderWithRouter(widget);
+
+      const buttonElement = screen.getByText(REGISTRATION_WILL_OPEN_SOON);
+
+      expect(buttonElement).toBeVisible();
+      expect(buttonElement).toHaveAttribute('href', '/');
+      expect(buttonElement).toHaveTextContent(REGISTRATION_WILL_OPEN_SOON);
+    });
+
+    it('renders registration will open soon in russian with correct label and href', async () => {
+      const widget = await AboutCourse({ courseName: COURSE_TITLES.JS_RU });
+
+      renderWithRouter(widget);
+
+      const buttonElement = screen.getByText(REGISTRATION_WILL_OPEN_SOON_RU);
+
+      expect(buttonElement).toBeVisible();
+      expect(buttonElement).toHaveAttribute('href', '/');
+      expect(buttonElement).toHaveTextContent(REGISTRATION_WILL_OPEN_SOON_RU);
+    });
+  });
 });

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

@@ -17,6 +17,10 @@ type AboutCourseProps = {
 export const AboutCourse = async ({ courseName }: AboutCourseProps) => {
   const course = await selectCourse(courseName);
   const courseInfoList = contentMapAbout[courseName];
+  const registrationLinkText = course.enroll
+    ? introLocalizedContent[courseName]?.linkLabel
+    : introLocalizedContent[courseName]?.noLinkLabel;
+  const enrollHref = course.enroll ?? '';
 
   return (
     <section className={cx('container')}>
@@ -26,8 +30,8 @@ export const AboutCourse = async ({ courseName }: AboutCourseProps) => {
           <Paragraph>{introLocalizedContent[courseName].paragraph}</Paragraph>
         )}
         <AboutCourseGrid items={courseInfoList} />
-        <LinkCustom href={course.enroll} variant="primary" external>
-          {introLocalizedContent[courseName]?.linkLabel}
+        <LinkCustom href={enrollHref} variant="primary" external disabled={!course.enroll}>
+          {registrationLinkText}
         </LinkCustom>
       </div>
     </section>

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

@@ -2,6 +2,7 @@ import { screen } from '@testing-library/react';
 import { HeroCourse } from './hero-course';
 import { MOCKED_IMAGE_PATH, mockedCourses } from '@/shared/__tests__/constants';
 import { renderWithRouter } from '@/shared/__tests__/utils';
+import { REGISTRATION_WILL_OPEN_SOON, REGISTRATION_WILL_OPEN_SOON_RU } from '@/shared/constants';
 import { COURSE_TITLES } from 'data';
 
 const mockedCourseWithSubtitle = mockedCourses.find(
@@ -57,4 +58,30 @@ describe('HeroCourse component', () => {
       expect(subtitleElement).toBeNull();
     });
   });
+
+  describe('Render widget with empty link', () => {
+    it('renders registration will open soon with correct label and href', async () => {
+      const widget = await HeroCourse({ courseName: COURSE_TITLES.AWS_DEVOPS });
+
+      renderWithRouter(widget);
+
+      const buttonElement = screen.getByText(REGISTRATION_WILL_OPEN_SOON);
+
+      expect(buttonElement).toBeVisible();
+      expect(buttonElement).toHaveAttribute('href', '/');
+      expect(buttonElement).toHaveTextContent(REGISTRATION_WILL_OPEN_SOON);
+    });
+
+    it('renders registration will open soon in russian with correct label and href', async () => {
+      const widget = await HeroCourse({ courseName: COURSE_TITLES.JS_RU });
+
+      renderWithRouter(widget);
+
+      const buttonElement = screen.getByText(REGISTRATION_WILL_OPEN_SOON_RU);
+
+      expect(buttonElement).toBeVisible();
+      expect(buttonElement).toHaveAttribute('href', '/');
+      expect(buttonElement).toHaveTextContent(REGISTRATION_WILL_OPEN_SOON_RU);
+    });
+  });
 });

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

@@ -31,6 +31,10 @@ export const HeroCourse = async ({ courseName }: HeroCourseProps) => {
     registrationEndDate,
   } = course;
   const status = getCourseStatus(startDate, dayJS(registrationEndDate).diff(startDate, 'd'));
+  const registrationLinkText = enroll
+    ? heroCourseLocalized[language].linkLabel
+    : heroCourseLocalized[language].noLinkLabel;
+  const enrollHref = enroll ?? '';
 
   return (
     <section className={cx('hero-course', 'container')} data-testid="hero-course">
@@ -56,8 +60,8 @@ export const HeroCourse = async ({ courseName }: HeroCourseProps) => {
             mode={mode}
             withMargin
           />
-          <LinkCustom href={enroll} variant="secondary" external>
-            {heroCourseLocalized[language].linkLabel}
+          <LinkCustom href={enrollHref} variant="secondary" external disabled={!enroll}>
+            {registrationLinkText}
           </LinkCustom>
         </article>
       </div>