SuccessAnnouncement

src/components/NewPost/NewPost.jsx

@@ -1,18 +1,31 @@
+import { useState } from 'react';
+
 import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
+
 import PostForm from './PostForm/PostForm.jsx';
+import SuccessAnnouncement from './SuccessAnnouncement/SuccessAnnouncement.jsx';
+
 import { Container, StyledLink, StyledTitle, TitleSection } from './NewPost.styled.js';
 
 const NewPost = () => {
+  const [isPublished, setIsPublished] = useState(false);
+
   return (
-    <Container>
-      <TitleSection>
-        <StyledLink to={'/'}>
-          <NavigateBeforeIcon />
-        </StyledLink>
-        <StyledTitle>Додати оголошення</StyledTitle>
-      </TitleSection>
-      <PostForm />
-    </Container>
+    <>
+      {isPublished && <SuccessAnnouncement onSuccess={() => setIsPublished(false)} />}
+
+      {!isPublished && (
+        <Container>
+          <TitleSection>
+            <StyledLink to={'/'}>
+              <NavigateBeforeIcon />
+            </StyledLink>
+            <StyledTitle>Додати оголошення</StyledTitle>
+          </TitleSection>
+          <PostForm onSuccess={() => setIsPublished(true)} />
+        </Container>
+      )}
+    </>
   );
 };
 

src/components/NewPost/PostForm/PostForm.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { nanoid } from '@reduxjs/toolkit';
 import { useForm } from 'react-hook-form';
+import PropTypes from 'prop-types';
 
 import { categories, cities } from '../../../constants';
 import IconSectionsDown from '../../../assets/svg/icon-sections-down.svg?react';
@@ -14,7 +15,7 @@ import CategoriesDropDown from '../../Header/PostSearchForm/CategoriesDropDown/C
 
 import { StyledButton, StyledForm, StyledLabel, Wrapper } from './PostForm.styled.js';
 
-const PostForm = () => {
+const PostForm = ({ onSuccess }) => {
   const { register, handleSubmit, setValue, watch } = useForm();
   const [isOpenCategoriesDropDown, setIsOpenCategoriesDropDown] = useState(false);
   const [isOpenLocationDropDown, setIsOpenLocationDropDown] = useState(false);
@@ -44,6 +45,8 @@ const PostForm = () => {
     for (let [key, value] of formData.entries()) {
       console.log(`${key}:`, value);
     }
+
+    onSuccess();
   };
 
   const handleCategoryClick = value => {
@@ -135,4 +138,8 @@ const PostForm = () => {
   );
 };
 
+PostForm.propTypes = {
+  onSuccess: PropTypes.func.isRequired,
+};
+
 export default PostForm;

src/components/NewPost/SuccessAnnouncement/SuccessAnnouncement.jsx

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+
+import {
+  Wrapper,
+  Title,
+  SuccessMessage,
+  Image,
+  AddAnnouncement,
+  LinkOnMyAnnouncement,
+  Container,
+  Text,
+  PlacementLink,
+} from './SuccessAnnouncement.styled.js';
+
+const SuccessAnnouncement = ({ onSuccess }) => {
+  return (
+    <Wrapper>
+      <Title>Успіх</Title>
+      <SuccessMessage>Вітаємо! Ваше оголошення активовано.</SuccessMessage>
+      <Image />
+      <AddAnnouncement to={'/new-post'} onClick={() => onSuccess()}>
+        Додати ще одне оголошення
+      </AddAnnouncement>
+
+      {/*TODO: Додати посилання на сторінку 'Мої оголошення'*/}
+      <LinkOnMyAnnouncement to={'/'}>Мої оголошення</LinkOnMyAnnouncement>
+      <Container>
+        <Text>
+          Збільште ефективність свого оголошення! Розмістіть його в рекламних блоках на нашому
+          маркетплейсі. Ваше оголошення отримає більше уваги та обсяг аудиторії.
+        </Text>
+
+        {/*TODO: Додати посилання на сторінку 'Розмістити'*/}
+        <PlacementLink to={'/'}>Розмістити</PlacementLink>
+      </Container>
+    </Wrapper>
+  );
+};
+
+SuccessAnnouncement.propTypes = {
+  onSuccess: PropTypes.func.isRequired,
+};
+
+export default SuccessAnnouncement;

src/components/NewPost/SuccessAnnouncement/SuccessAnnouncement.styled.js

@@ -0,0 +1,132 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+import { device } from '../../../utils';
+
+import Nice from '../../../assets/images/Nice.png';
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 60px;
+  margin-bottom: 67px;
+
+  @media ${device.tablet} {
+    margin-top: 40px;
+    margin-bottom: 50px;
+  }
+`;
+
+export const Title = styled.p`
+  font-family: Gilroy-SemiBold, sans-serif;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 24px;
+
+  @media ${device.tablet} {
+    font-family: Gilroy-Medium, sans-serif;
+    font-weight: 500;
+    font-size: 40px;
+    line-height: 48px;
+  }
+`;
+
+export const SuccessMessage = styled.p`
+  margin-top: 44px;
+  font-family: Gilroy-Regular, sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 26px;
+
+  @media ${device.tablet} {
+    display: none;
+  }
+`;
+
+export const Image = styled.img.attrs({
+  src: Nice,
+  alt: 'Photo of an orange that shows that everything is cool',
+})`
+  margin-top: 32px;
+  width: 221px;
+  height: 216px;
+
+  @media ${device.tablet} {
+    margin-top: 27px;
+  }
+`;
+
+export const AddAnnouncement = styled(Link)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 35px;
+  width: 328px;
+  height: 36px;
+  font-family: Gilroy-SemiBold, sans-serif;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 22px;
+  background: var(--color-primary-active);
+  color: var(--color-btn-text);
+  border-radius: 5px;
+
+  @media ${device.tablet} {
+    margin-top: 57px;
+    width: 353px;
+    height: 42px;
+  }
+`;
+
+export const LinkOnMyAnnouncement = styled(AddAnnouncement)`
+  margin-top: 16px;
+  background: var(--color-btn-text);
+  color: var(--color-primary-active);
+
+  @media ${device.tablet} {
+    display: none;
+  }
+`;
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 39px;
+
+  @media ${device.tablet} {
+    display: flex;
+    flex-direction: row;
+    align-items: end;
+    justify-content: space-between;
+    margin-top: 50px;
+  }
+`;
+
+export const Text = styled.span`
+  font-family: Gilroy-Medium, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+
+  @media ${device.tablet} {
+    font-family: Gilroy-SemiBold, sans-serif;
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 24px;
+  }
+`;
+
+export const PlacementLink = styled(AddAnnouncement)`
+  margin-top: 26px;
+  width: 208px;
+  background: var(--color-btn-text);
+  color: var(--color-primary-active);
+  border: 1px solid var(--color-primary-active);
+
+  @media ${device.tablet} {
+    margin-left: 140px;
+    min-width: 230px;
+  }
+`;