diff --git a/FrontEnd/src/components/basicPage/BasicPage.jsx b/FrontEnd/src/components/basicPage/BasicPage.jsx
index 9d23dceed..db56e3f4e 100644
--- a/FrontEnd/src/components/basicPage/BasicPage.jsx
+++ b/FrontEnd/src/components/basicPage/BasicPage.jsx
@@ -24,6 +24,7 @@ import { RestorePasswordPage } from '../RestorePassword/pages/RestorePasswordPag
import { RestorePasswordModalPage } from '../RestorePassword/pages/RestorePasswordModalPage';
import { RestorePasswordSuccessPage } from '../RestorePassword/pages/RestorePasswordSuccessPage';
import { RestorePasswordFailedPage } from '../RestorePassword/pages/RestorePasswordFailedPage';
+import { ModerationModal } from '../moderation/ModerationModal';
import ScrollToTopButton from '../ScrollToTopButton/ScrollToTopButton';
import TermsAndConditions from '../terms-and-conditions-app/terms_conditions/TermsAndConditionsComponent';
import { useAuth } from '../../hooks';
@@ -161,6 +162,8 @@ function BasicPage() {
path="/search"
element={}
/>
+ }
+ />
} />
)}
diff --git a/FrontEnd/src/components/moderation/ModerationModal.jsx b/FrontEnd/src/components/moderation/ModerationModal.jsx
new file mode 100644
index 000000000..2ffe1f96d
--- /dev/null
+++ b/FrontEnd/src/components/moderation/ModerationModal.jsx
@@ -0,0 +1,79 @@
+import axios from 'axios';
+import{ useState, useEffect } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
+import MainPage from '../landing-page/MainPage';
+import MyModal from '../ProfilePage/UI/MyModal/MyModal';
+import classes from './ModerationModal.module.css';
+
+export function ModerationModal() {
+ const { id, action } = useParams();
+ const [moderationStatus, setModerationStatus] = useState('');
+ const [modalVisible, setModalVisible] = useState(false);
+
+ const [searchParams] = useSearchParams();
+ const banner = searchParams.get('banner');
+ const logo = searchParams.get('logo');
+
+ const data = {
+ action,
+ ...(banner && { banner_approved: banner }),
+ ...(logo && { logo_approved: logo }),
+ };
+
+ const errorMessages = {
+ 'There is a new request for moderation. URL is outdated':
+ 'Помилка: профіль було повторно оновлено. Існує новіший запит на модерацію. Посилання застаріле.',
+ 'The change approval request has been processed. URL is outdated':
+ 'Помилка: запит на затвердження змін вже було опрацьовано. Посилання застаріле.',
+ };
+
+ const handleModeration = async () => {
+ try {
+ await axios.patch(
+ `${process.env.REACT_APP_BASE_API_URL}/api/profiles/${id}/images_moderation/`,
+ data
+ );
+ action === 'approve'
+ ? setModerationStatus('Зміни успішно затверджено')
+ : setModerationStatus(
+ 'Зміни успішно скасовано. Профіль компанії заблоковано'
+ );
+ setModalVisible(true);
+ } catch (error) {
+ setModerationStatus('Помилка застосування змін');
+ if (error.response && error.response.status === 400) {
+ Object.keys(error.response.data).forEach((key) => {
+ const message = error.response.data[key][0];
+ if (errorMessages[message]) {
+ setModerationStatus(errorMessages[message]);
+ }
+ });
+ }
+ setModalVisible(true);
+ }
+ };
+
+ useEffect(() => {
+ handleModeration();
+ }, []);
+
+ const closeModal = () => {
+ setModalVisible(false);
+ };
+
+ return (
+
+
+
+ {moderationStatus}
+
+
+