Merge pull request #868 from ita-social-projects/develop

Develop
ita-social-projects · Oct 1, 2023 · ff16ea1 · ff16ea1
2 parents 1550935 + b0c8b81
commit ff16ea1
Show file tree

Hide file tree

Showing 18 changed files with 238 additions and 131 deletions.
diff --git a/src/app/common/constants/email.constants.ts b/src/app/common/constants/email.constants.ts
@@ -0,0 +1,6 @@
+const EMAIL = '[email protected]';
+
+export const EMAIL_INFO = {
+    EMAIL,
+    WRITE_EMAIL_TO_US: `https://mail.google.com/mail/?view=cm&fs=1&to=${EMAIL}`,
+};
diff --git a/src/features/AboutUsPage/TeamMembers/TeamPositionsSlider/TeamPositionSlider.styles.scss b/src/features/AboutUsPage/TeamMembers/TeamPositionsSlider/TeamPositionSlider.styles.scss
@@ -0,0 +1,3 @@
+.slider-arrow, .positionText{
+  cursor: pointer;
+}
diff --git a/src/features/AboutUsPage/TeamMembers/TeamPositionsSlider/TeamPostionSlider.component.tsx b/src/features/AboutUsPage/TeamMembers/TeamPositionsSlider/TeamPostionSlider.component.tsx
@@ -1,3 +1,5 @@
+import './TeamPositionSlider.styles.scss';
+
 import { useState } from 'react';
 import LeftSliderArrow from '@assets/images/utils/LeftDefaultSliderArrow.svg';
 import RightSliderArrow from '@assets/images/utils/RightDefaultSliderArrow.svg';
@@ -41,6 +43,7 @@ const SliderComponents = ({ positions, setActive }: Props) => {
                     slidesPerView={5}
                     centeredSlides
                     loop
+                    slideToClickedSlide
                     onSwiper={(swiper) => setSwiper(swiper)}
                     onSlideChange={(swiper) => getActive(swiper)}
                     navigation={{ nextEl: '.arrow-left', prevEl: '.arrow-right' }}
@@ -57,10 +60,13 @@ const SliderComponents = ({ positions, setActive }: Props) => {
                         },
                     }}
                 >
-                    {positions.map((position) => (
-                        <SwiperSlide className="square" key={position.id}>
+                    {positions.map((position, index) => (
+                        <SwiperSlide
+                            className="square"
+                            key={position.id}
+                        >
                             <div key={position.position}>
-                                <div>{position.position}</div>
+                                <div className="positionText">{position.position}</div>
                             </div>
                         </SwiperSlide>
                     ))}

diff --git a/src/features/AboutUsPage/Vacancies/Vacancy/Vacancy.component.tsx b/src/features/AboutUsPage/Vacancies/Vacancy/Vacancy.component.tsx
@@ -1,6 +1,6 @@
 import './Vacancy.syles.scss';
 
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 import VacancyModal from './VacancyModal/VacancyModal.component';
 
@@ -12,39 +12,24 @@ const Vacancy = (job: Job) => {
         setIsModalOpen(!isModalOpen);
     };
     return (
-        <div className="vacancyContainer">
-            <h2>{job.title}</h2>
-            <h3>{job.salary}</h3>
+        <div className='vacancyContainer'>
+            <h2>{job?.title}</h2>
+            <h3>{job?.salary}</h3>
             {
-                job.description.length < maxLength
-                    ? (
-                        <p>
-                            {job.description}
-                            <label
-                                onClick={() => {
-                                    setIsModalOpen(true);
-                                }}
-                            >
-                                {' '}
-Трохи ще
-                            </label>
-                        </p>
-                    )
-                    : (
-                        <p>
-                            {job.description.substring(0, maxLength)}
-...
-                            <label
-                                onClick={() => {
-                                    setIsModalOpen(true);
-                                }}
-                            >
+                job?.description.length < maxLength
+                    ? <p><div dangerouslySetInnerHTML={{ __html: job?.description }} />
+                        <label
+                            onClick={ () => {setIsModalOpen(true)}}> Трохи ще
+                        </label>
+                    </p>
+                    : <p><div dangerouslySetInnerHTML={{ __html: `${job?.description.substring(0, maxLength).split(' ').slice(0, -1).join(' ')}...` }} />
+                        <label
+                            onClick={ () => {setIsModalOpen(true)}}>
                                 Трохи ще
-                            </label>
-                        </p>
-                    )
+                        </label>
+                    </p>
             }
-            <VacancyModal isOpen={isModalOpen} setOpen={ChangeStatus} job={job} />
+            <VacancyModal isOpen={isModalOpen} setOpen={ChangeStatus} job = {job}/>
         </div>
     );
 };

diff --git a/src/features/AboutUsPage/Vacancies/Vacancy/Vacancy.syles.scss b/src/features/AboutUsPage/Vacancies/Vacancy/Vacancy.syles.scss
@@ -30,6 +30,7 @@
     label {
         @include mut.with-font($font-family: ft.$closer-text-font, $font-weight: 500, $font-size: 20px);
         color: c.$dark-red-color;
+        cursor: pointer;
     }
 
     @media screen and (max-width: s.$tablet) {

diff --git a/src/features/AboutUsPage/Vacancies/Vacancy/VacancyModal/VacancyModal.component.tsx b/src/features/AboutUsPage/Vacancies/Vacancy/VacancyModal/VacancyModal.component.tsx
@@ -1,62 +1,75 @@
 import './VacancyModal.styles.scss';
-import { Button, Modal } from "antd";
+
 import CancelBtn from '@images/utils/Cancel_btn.svg';
+
 import React from 'react';
-import { SCREEN_SIZES } from '@/app/common/constants/screen-sizes.constants';
+import { EMAIL_INFO } from '@constants/email.constants';
 
+import { Button, Modal } from 'antd';
+
+import { SCREEN_SIZES } from '@/app/common/constants/screen-sizes.constants';
 
 interface Props {
     isOpen: boolean,
     setOpen: React.Dispatch<React.SetStateAction<boolean>>,
     job : Job
 }
 
-const VacancyModal = ({isOpen, setOpen, job}: Props) => {
-
+const VacancyModal = ({ isOpen, setOpen, job }: Props) => {
     const descriptionLines = job.description.split('\n').map((line, index) => (
-        <React.Fragment key={index}>
-            {line}
+        <>
+            <div dangerouslySetInnerHTML={{ __html: line }} />
             <br />
-        </React.Fragment>
+        </>
     ));
 
     const getWidth = () => {
-        if(window.innerWidth > SCREEN_SIZES.tablet) {
-            return 830
+        if (window.innerWidth > SCREEN_SIZES.tablet) {
+            return 830;
         }
-        if(window.innerWidth > SCREEN_SIZES.smallTablet){
-            return 600
+        if (window.innerWidth > SCREEN_SIZES.smallTablet) {
+            return 600;
         }
-        if(window.innerWidth > SCREEN_SIZES.phone){
-            return 400
+        if (window.innerWidth > SCREEN_SIZES.phone) {
+            return 400;
         }
-        if(window.innerWidth > SCREEN_SIZES.smallPhone){
-            return 310
+        if (window.innerWidth > SCREEN_SIZES.smallPhone) {
+            return 310;
         }
-            return 270
-    }
+        return 270;
+    };
 
-   return(
+    return (
         <Modal
-            open = {isOpen}
-            onCancel={ ()=>{setOpen(false)}}
+            open={isOpen}
+            onCancel={() => {
+                setOpen(false);
+            }}
             closeIcon={<CancelBtn />}
             className="vacancyModal"
-            footer = {null}
+            footer={null}
             width={getWidth()}
-            >
-
-                <div className='vacancyModalContainer'>
-                    <div className='textContainer'>
-                        <h2>{job.title}</h2>
-                        <h3>{job.salary}</h3>
-                        <p>{descriptionLines}</p>
-                    </div>
-                    <div className='buttonContainer'>
-                        <Button className='vacancyModalButton streetcode-custom-button'>Відгукнутися</Button>
-                    </div>
+        >
+
+            <div className="vacancyModalContainer">
+                <div className="textContainer">
+                    <h2>{job.title}</h2>
+                    <h3>{job.salary}</h3>
+                    <p>{descriptionLines}</p>
                 </div>
+                <div className="buttonContainer">
+                    <Button
+                        className="vacancyModalButton streetcode-custom-button"
+                        onClick={(e) => {
+                            window.location.href = EMAIL_INFO.WRITE_EMAIL_TO_US;
+                            e.preventDefault();
+                        }}
+                    >
+                        Відгукнутися
+                    </Button>
+                </div>
+            </div>
         </Modal>
-   );
-}
-export default VacancyModal;
+    );
+};
+export default VacancyModal;
diff --git a/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactBlock/ContactBlock.component.tsx b/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactBlock/ContactBlock.component.tsx
@@ -8,18 +8,18 @@ import TikTok from '@images/contact-us/TikTok.webp';
 import Twitter from '@images/contact-us/Twitter.webp';
 import YouTube from '@images/contact-us/Youtube.webp';
 
-const EMAIL = '[email protected]';
+import { EMAIL_INFO } from '@constants/email.constants';
 
 const ContactBlock = () => (
     <div className="contactBlock">
         <img className="contactLogo" src={Logo} alt="" />
         <div className="contactCover">
             <div className="emailBlock">
-                <a href={`mailto:${EMAIL}`} className="emailLink">
+                <a href={EMAIL_INFO.WRITE_EMAIL_TO_US} className="emailLink">
                     <img className="icon" src={Email} alt="email-logo" />
                 </a>
                 <span className="email">
-                    {EMAIL}
+                    {EMAIL_INFO.EMAIL}
                 </span>
             </div>
 

diff --git a/.../AdditionalPages/PrivatePolicyPage/SubSections/SubSectionFifth/SectionFifth.component.tsx b/.../AdditionalPages/PrivatePolicyPage/SubSections/SubSectionFifth/SectionFifth.component.tsx
@@ -1,4 +1,4 @@
-const EMAIL = '[email protected]';
+import { EMAIL_INFO } from '@constants/email.constants';
 
 const SectionFifth = () => (
     <section id="fifth" data-block-id="fifth">
@@ -105,7 +105,7 @@ const SectionFifth = () => (
             </ul>
                 Щоб звернутися до Організації з приводу використання файлів cookie, відправте повідомлення
                 електронною поштою на адресу&nbsp;
-            <a className="link" href={`mailto:${EMAIL}`}>{EMAIL}</a>
+            <a className="link" href={EMAIL_INFO.WRITE_EMAIL_TO_US}>{EMAIL_INFO.EMAIL}</a>
                 .
             <br />
                 Якщо користувач не включає використання файлів cookie або навмисно видаляє всі файли cookie

diff --git a/...itionalPages/PrivatePolicyPage/SubSections/SubSectionSeventh/SectionSeventh.component.tsx b/...itionalPages/PrivatePolicyPage/SubSections/SubSectionSeventh/SectionSeventh.component.tsx
@@ -1,4 +1,4 @@
-const EMAIL = '[email protected]';
+import { EMAIL_INFO } from '@constants/email.constants';
 
 const SectionSeventh = () => (
     <section>
@@ -12,7 +12,7 @@ const SectionSeventh = () => (
             <br />
             З питань щодо політики конфіденційності (в т.ч. видалення персональних даних), Користувач може
             зв&apos;язатися з нами, використовуючи e—mail:
-            <a className="link" href={`mailto:${EMAIL}`}> {EMAIL}</a>
+            <a className="link" href={EMAIL_INFO.WRITE_EMAIL_TO_US}>{EMAIL_INFO.EMAIL}</a>
             .
         </div>
     </section>

diff --git a/src/features/AdminPage/JobsPage/JobsModal/JobsModal.component.tsx b/src/features/AdminPage/JobsPage/JobsModal/JobsModal.component.tsx
@@ -3,6 +3,7 @@ import './JobsModal.styles.scss';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useState } from 'react';
 import CancelBtn from '@assets/images/utils/Cancel_btn.svg';
+import { Editor as TinyMCEEditor } from '@tinymce/tinymce-react/lib/cjs/main/ts/components/Editor';
 
 import {
     Button, Form, Input, Modal, Popover,
@@ -76,7 +77,7 @@ const JobsModal = ({ open, setOpen, currentId } : Props) => {
                 id: currentId,
                 title,
                 status: isActive,
-                description,
+                description: current.description,
                 salary,
             };
 
@@ -96,6 +97,10 @@ const JobsModal = ({ open, setOpen, currentId } : Props) => {
         setOpen(false);
     };
 
+    const handleEditorChange = (content: string, editor: any) => {
+        setCurrent({ ...current, description: content });
+    };
+
     return (
         <Modal
             className="modalContainer"
@@ -146,17 +151,33 @@ const JobsModal = ({ open, setOpen, currentId } : Props) => {
                         </Select.Option>
                     </Select>
                 </FormItem>
-                <FormItem
-                    label="Опис вакансії"
-                    name="description"
-                    rules={[{ required: true, message: 'Введіть опис вакансії' }]}
-                >
-                    <TextArea
-                        className="textWrapper"
-                        showCount
-                        maxLength={maxLengths.maxLenghtVacancyDesc}
-                    />
-                </FormItem>
+
+                <label>Опис вакансії</label>
+                <TinyMCEEditor
+                    className="textWrapper"
+                    onEditorChange={(event, editor) => {
+                        handleEditorChange(event, editor);
+                    }}
+                    init={{
+                        max_chars: maxLengths.maxLenghtVacancyDesc,
+                        language: 'uk',
+                        height: 300,
+                        menubar: false,
+                        init_instance_callback(editor) {
+                            editor.setContent(current?.description ?? '');
+                        },
+                        plugins: [
+                            'autolink', 'link',
+                        ],
+                        toolbar: 'link',
+                        content_style: 'body {font - family:Roboto,Helvetica Neue,sans-serif; font-size:14px }',
+                        link_title: false,
+                        link_target_list: false,
+                    }}
+                    onChange={(e, editor) => {
+                        setCurrent({ ...current, description: editor.getContent() });
+                    }}
+                />
                 <FormItem
                     label="Заробітня плата"
                     name="salary"

diff --git a/src/features/MainPage/NewsSlider/NewsSliderItem/NewsSliderItem.styles.scss b/src/features/MainPage/NewsSlider/NewsSliderItem/NewsSliderItem.styles.scss
@@ -139,15 +139,27 @@
         }
 
         .moreText {
-            display: inline-block;
-            margin-left: 4px;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+
+            height: f.pxToRem(54px);
+            padding-top: f.pxToRem(18px);
+            padding-left: f.pxToRem(30px);
+
             @include mut.with-font(ft.$roboto-font, $font-weight: bolder, $font-size: 15px);
             color: c.$dark-red-color;
+            background-color: c.$accented-grayish-gray-color;
             text-decoration: none;
 
             &:hover {
                 text-decoration: underline;
             }
+
+            @media (max-width: 1025px) {
+                padding-left: f.pxToRem(20px);
+            }
         }
         @media (min-width: 768px) and (max-width: 1024px) {
             width: 96vw;

diff --git a/src/features/StreetcodePage/DonateBtn/DonateBtn.component.tsx b/src/features/StreetcodePage/DonateBtn/DonateBtn.component.tsx
@@ -15,7 +15,9 @@ const DonateBtn = () => {
     const windowSize = useWindowSize();
     useScrollPosition(({ currentPos: { y } }) => {
         if (showModalOnScroll.current) {
-            if (Math.abs(y) > document.documentElement.scrollHeight * 0.83) {
+            const isAtBottom = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight;
+
+            if (isAtBottom) {
                 setModal('survey', undefined, true);
                 showModalOnScroll.current = false;
             }