613-feat: Update communication section

dev-data/communication.data.ts

@@ -1,5 +1,6 @@
 export const RS_DOCS_COMMUNICATION_LINK = 'https://docs.rs.school/#/rs-school-chats';
 export const RS_DOCS_TELEGRAM_CHATS_LINK = 'https://docs.rs.school/#/rs-school-chats?id=telegram';
+export const JS_EN_TELEGRAM_CHAT_LINK = 'https://t.me/RSS_EN';
 
 export const DISCORD_LINKS = {
   'js / front-end ru': 'https://discord.com/invite/QvEYg7EaQ4',

dev-data/index.ts

@@ -10,6 +10,7 @@ export { type CourseNames, contentMap } from './training-program.data';
 export {
   type CourseNamesChannels,
   DISCORD_LINKS,
+  JS_EN_TELEGRAM_CHAT_LINK,
   RS_DOCS_COMMUNICATION_LINK,
   RS_DOCS_TELEGRAM_CHATS_LINK,
 } from './communication.data';

dev-data/widget-communication.data.ts

@@ -2,9 +2,13 @@ export const communicationText = {
   en: {
     title: 'Communication',
     subTitle: 'Discord is the main communication channel in RS School',
+    subTitleJs: 'RS School uses two main communication channels:',
     firstParagraphFirstHalf: 'Here is link for the ',
+    discordParagraphTextJs: ': Join the Discord server to see the latest news and chat with students.',
     discordLink: 'course Discord server',
+    discordLinkJs: 'Discord',
     firstParagraphSecondHalf: ', where you can see latest news and chat with students.',
+    telegramParagraphTextJs: ': You can also join the official Telegram channel for updates and discussions.',
     discordNote: 'Attention! In some countries, access to Discord requires the use of a VPN. If you are having trouble connecting, please try using a reliable VPN service.',
     secondParagraphFirstHalf: 'There are channels in ',
     telegramLink: 'Telegram',
@@ -17,10 +21,14 @@ export const communicationText = {
   ru: {
     title: 'Общение',
     subTitle: 'Дискорд — основной способ общения в RS School',
+    subTitleJs: '',
     firstParagraphFirstHalf: 'Вот ссылка на ',
+    discordParagraphTextJs: '',
     discordLink: 'Дискорд сервер курса',
+    discordLinkJs: '',
     firstParagraphSecondHalf:
       ', где вы можете посмотреть последние новости, задать вопросы и общаться со студентами.',
+    telegramParagraphTextJs: '',
     discordNote: 'Внимание! В некоторых странах для доступа к Discord требуется использование VPN. Если у вас возникают трудности с подключением, попробуйте использовать надёжный VPN-сервис.',
     secondParagraphFirstHalf: 'Также есть каналы в ',
     telegramLink: 'Телеграм',

src/widgets/communication/ui/communication.module.scss

@@ -1,39 +1,38 @@
 .communication-content {
   display: flex;
   flex-direction: column;
-  gap: 26px;
-}
 
-.communication-wrapper {
-  display: flex;
-  flex-direction: row;
-  gap: 100px;
-  align-items: center;
-  justify-content: flex-start;
+  .communication-wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 100px;
+    align-items: center;
 
-  @include media-tablet-large {
-    flex-direction: column;
-    gap: 40px;
-    align-items: flex-start;
+    @include media-tablet-large {
+      flex-direction: column;
+      gap: 40px;
+      align-items: flex-start;
+    }
   }
-}
 
-.communication-paragraph {
-  padding-top: 5px;
-}
+  .communication-subtitle,
+  .communication-paragraph {
+    padding-bottom: 5px;
+  }
 
-.discord-logo-wrapper {
-  flex-shrink: 0;
-  align-self: center;
+  .discord-logo-wrapper {
+    flex-shrink: 0;
+    align-self: center;
 
-  width: 250px;
-  padding: 30px;
+    width: 250px;
+    padding: 30px;
 
-  background-color: hsl(234.9deg 85.6% 64.7%);
-  border-radius: 30px;
+    background-color: hsl(234.9deg 85.6% 64.7%);
+    border-radius: 30px;
 
-  @include media-tablet {
-    width: 150px;
-    padding: 15px;
+    @include media-tablet {
+      width: 150px;
+      padding: 15px;
+    }
   }
 }

src/widgets/communication/ui/communication.test.tsx

@@ -43,7 +43,7 @@ describe('Communication section', () => {
     'should render correct link of %s course',
     (courseName, link) => {
       renderWithRouter(<Communication courseName={courseName as keyof typeof DISCORD_LINKS} />);
-      const linkElement = screen.getByText(/course discord server/i);
+      const linkElement = screen.getByTestId('discord-link');
 
       expect(linkElement).toBeVisible();
       expect(linkElement.getAttribute('href')).toMatch(link);

src/widgets/communication/ui/communication.tsx

@@ -8,6 +8,7 @@ import { WidgetTitle } from '@/shared/ui/widget-title';
 import {
   CourseNamesChannels,
   DISCORD_LINKS,
+  JS_EN_TELEGRAM_CHAT_LINK,
   RS_DOCS_COMMUNICATION_LINK,
   RS_DOCS_TELEGRAM_CHATS_LINK,
   communicationText,
@@ -26,9 +27,13 @@ export const Communication = ({ courseName, lang = 'en' }: CommunicationProps) =
   const {
     title,
     subTitle,
+    subTitleJs,
     firstParagraphFirstHalf,
+    discordParagraphTextJs,
     discordLink,
+    discordLinkJs,
     firstParagraphSecondHalf,
+    telegramParagraphTextJs,
     secondParagraphFirstHalf,
     telegramLink,
     secondParagraphSecondHalf,
@@ -38,6 +43,13 @@ export const Communication = ({ courseName, lang = 'en' }: CommunicationProps) =
     discordNote,
   } = communicationText[lang];
 
+  const isJsEnCourse = courseName === 'js / front-end en';
+  const courseSubTitle = isJsEnCourse ? subTitleJs : subTitle;
+  const paragraphClassName = isJsEnCourse ? cx('communication-paragraph') : undefined;
+  const courseDiscordLink = isJsEnCourse ? discordLinkJs : discordLink;
+  const discordFirstHalfText = !isJsEnCourse ? firstParagraphFirstHalf : null;
+  const discordSecondHalfText = isJsEnCourse ? discordParagraphTextJs : firstParagraphSecondHalf;
+
   return (
     <section className={cx('container')}>
       <article className={cx('content', 'communication-content')}>
@@ -47,26 +59,36 @@ export const Communication = ({ courseName, lang = 'en' }: CommunicationProps) =
             <Image src={discordLogo} alt="discord logo" />
           </figure>
           <div>
-            <Subtitle>{subTitle}</Subtitle>
-            <Paragraph className={cx('communication-paragraph')}>
-              {firstParagraphFirstHalf}
-              <LinkCustom href={DISCORD_LINKS[courseName]} external>
-                {discordLink}
+            <Subtitle className={cx('communication-subtitle')}>
+              {courseSubTitle}
+            </Subtitle>
+            <Paragraph className={paragraphClassName}>
+              {discordFirstHalfText}
+              <LinkCustom href={DISCORD_LINKS[courseName]} external data-testid="discord-link">
+                {courseDiscordLink}
               </LinkCustom>
-              {firstParagraphSecondHalf}
+              {discordSecondHalfText}
             </Paragraph>
+            {isJsEnCourse && (
+              <Paragraph>
+                <LinkCustom href={JS_EN_TELEGRAM_CHAT_LINK} external>
+                  {telegramLink}
+                </LinkCustom>
+                {telegramParagraphTextJs}
+              </Paragraph>
+            )}
             <Paragraph>
               &#9888;&#65039;
               {discordNote}
             </Paragraph>
-            <Paragraph className={cx('communication-paragraph')}>
+            <Paragraph>
               {secondParagraphFirstHalf}
               <LinkCustom href={RS_DOCS_TELEGRAM_CHATS_LINK} external>
                 {telegramLink}
               </LinkCustom>
               {secondParagraphSecondHalf}
             </Paragraph>
-            <Paragraph className={cx('communication-paragraph')}>
+            <Paragraph>
               {thirdParagraphFirstHalf}
               <LinkCustom href={RS_DOCS_COMMUNICATION_LINK} external>
                 {rsDocsLink}