add links for vacancies` description

add redirecting to gmail
ita-social-projects · Sep 26, 2023 · 7d497de · 7d497de
1 parent 9108cef
commit 7d497de
Show file tree

Hide file tree

Showing 8 changed files with 102 additions and 62 deletions.
diff --git a/src/app/common/constants/email.constants.ts b/src/app/common/constants/email.constants.ts
@@ -0,0 +1,3 @@
+const EMAIL = '[email protected]';
+
+export default EMAIL;
diff --git a/src/features/AboutUsPage/Vacancies/Vacancy/Vacancy.component.tsx b/src/features/AboutUsPage/Vacancies/Vacancy/Vacancy.component.tsx
@@ -1,5 +1,7 @@
-import { useState } from 'react';
-import './Vacancy.syles.scss'
+import './Vacancy.syles.scss';
+
+import React, { useState } from 'react';
+
 import VacancyModal from './VacancyModal/VacancyModal.component';
 
 const Vacancy = (job: Job) => {
@@ -11,18 +13,18 @@ const Vacancy = (job: Job) => {
     }
     return (
         <div className='vacancyContainer'>
-            <h2>{job.title}</h2>
-            <h3>{job.salary}</h3>
+            <h2>{job?.title}</h2>
+            <h3>{job?.salary}</h3>
             {
-                job.description.length < maxLength 
-                    ? <p>{job.description} 
-                        <label  
+                job?.description.length < maxLength
+                    ? <p><div dangerouslySetInnerHTML={{ __html: job?.description }} />
+                        <label
                             onClick={ () => {setIsModalOpen(true)}}> Трохи ще
                         </label>
                     </p>
-                    : <p>{job.description.substring(0, maxLength)}... 
-                        <label  
-                            onClick={ () => {setIsModalOpen(true)}}> 
+                    : <p><div dangerouslySetInnerHTML={{ __html: job.description.substring(0, maxLength) }} />...
+                        <label
+                            onClick={ () => {setIsModalOpen(true)}}>
                                 Трохи ще
                         </label>
                     </p>

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 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 = `https://mail.google.com/mail/?view=cm&fs=1&to=${EMAIL}`;
+                            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,14 +8,14 @@ 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 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={`https://mail.google.com/mail/?view=cm&fs=1&to=${EMAIL}`} className="emailLink">
                     <img className="icon" src={Email} alt="email-logo" />
                 </a>
                 <span className="email">

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 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={`https://mail.google.com/mail/?view=cm&fs=1&to=${EMAIL}`}>{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 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={`https://mail.google.com/mail/?view=cm&fs=1&to=${EMAIL}`}>{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,21 +151,37 @@ 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"
-                    rules={[{ required: true, message: 'Введіть заробітню плату' }]}
+                    rules={[{ required: false, message: 'Введіть заробітню плату' }]}
                 >
                     <Input
                         showCount
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const EMAIL = '[email protected]';

		export default EMAIL;