diff --git a/dev-data/communication.data.ts b/dev-data/communication.data.ts index 9808b7a59..1958e1fdd 100644 --- a/dev-data/communication.data.ts +++ b/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', diff --git a/dev-data/index.ts b/dev-data/index.ts index db8dfd07a..dab79b20e 100644 --- a/dev-data/index.ts +++ b/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'; diff --git a/dev-data/widget-communication.data.ts b/dev-data/widget-communication.data.ts index 0f6057a8d..7d88a40f8 100644 --- a/dev-data/widget-communication.data.ts +++ b/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: 'Телеграм', diff --git a/src/widgets/communication/ui/communication.module.scss b/src/widgets/communication/ui/communication.module.scss index 9fe032e5d..b5ab61592 100644 --- a/src/widgets/communication/ui/communication.module.scss +++ b/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; + } } } diff --git a/src/widgets/communication/ui/communication.test.tsx b/src/widgets/communication/ui/communication.test.tsx index e8eaa4636..09bdd1f02 100644 --- a/src/widgets/communication/ui/communication.test.tsx +++ b/src/widgets/communication/ui/communication.test.tsx @@ -43,7 +43,7 @@ describe('Communication section', () => { 'should render correct link of %s course', (courseName, link) => { renderWithRouter(); - const linkElement = screen.getByText(/course discord server/i); + const linkElement = screen.getByTestId('discord-link'); expect(linkElement).toBeVisible(); expect(linkElement.getAttribute('href')).toMatch(link); diff --git a/src/widgets/communication/ui/communication.tsx b/src/widgets/communication/ui/communication.tsx index 133defc8e..98529dc24 100644 --- a/src/widgets/communication/ui/communication.tsx +++ b/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 (
@@ -47,26 +59,36 @@ export const Communication = ({ courseName, lang = 'en' }: CommunicationProps) = discord logo
- {subTitle} - - {firstParagraphFirstHalf} - - {discordLink} + + {courseSubTitle} + + + {discordFirstHalfText} + + {courseDiscordLink} - {firstParagraphSecondHalf} + {discordSecondHalfText} + {isJsEnCourse && ( + + + {telegramLink} + + {telegramParagraphTextJs} + + )} ⚠️ {discordNote} - + {secondParagraphFirstHalf} {telegramLink} {secondParagraphSecondHalf} - + {thirdParagraphFirstHalf} {rsDocsLink}