добавлен контейнер Заявка оформлена

src/components/mainPart/button.tsx

@@ -11,7 +11,9 @@ export const PinkButton:React.FC<TProps> = React.memo((props) => {
     return <button
         style={{width: props.width ? props.width : ''}}
         className="main-part-text-button"
-        onClick={() => props?.onClick()}
+        onClick={() => {
+            return props?.onClick ? props.onClick() : null;
+        }}
         type={props.type ? props.type : 'button'}
         >
             {props.textButton}

src/components/mainPart/form/form.tsx

@@ -7,8 +7,8 @@ import { StyledOptions } from "@emotion/styled";
 import { MUIStyledCommonProps } from "@mui/system";
 
 type TProps = {
-    // dateInfo: string
+    dateInfo: string
-    onSubmit: (data: FormData) => void
+    onSubmit: (data: FormData, date: string) => void
 }
 
 type FormData = {
@@ -20,12 +20,7 @@ type FormData = {
 export const Form:React.FC<TProps> = React.memo((props) => {    
     const {control, handleSubmit} = useForm<FormData>();
     const [isError, setIsError] = useState(false);
-    let inputPr: InputProps = {
     
-    }
-    let a: StyledOptions<TextFieldProps> = {
-        
-    }
     const CustomizedTextField = styled(TextField)`
         background: #322948;
         border-radius: 8px;
@@ -75,7 +70,7 @@ export const Form:React.FC<TProps> = React.memo((props) => {
             return
         }
         console.log(data)
-        props.onSubmit(data)
+        props.onSubmit(data, props.dateInfo)
     }
 
     return <div className="request-form-container">
@@ -140,7 +135,6 @@ export const Form:React.FC<TProps> = React.memo((props) => {
                     />
                 }
             />
-            {/* <input className="request-form-submit-button" type="submit" value={'Записаться на просмотр'}/> */}
             <PinkButton 
                 type="submit" 
                 textButton={'Записаться на просмотр'}

src/components/mainPart/mainPart.css

@@ -64,6 +64,7 @@
 }
 
 .main-part-text-container {
+    z-index: 1;
     width: 800px;
     display: flex;
     flex-direction: column;

src/components/mainPart/mainPart.tsx

@@ -20,14 +20,14 @@ export const MainPart: React.FC = React.memo(() => {
     const changeContent = useRef(0);
     const [showBackground, setShowBackground] = useState<boolean>(false);
     const [planContent, setPlaneContent] = useState<JSX.Element>();
-    const [currentContent, setCurrentContent] = useState<JSX.Element>(
+    const defaultCurrentContent = 
         <ContentContainer 
                 titleText="Удаленная демонстрация жилого комплекса"
                 descriptText="Основанная на стриминге технология удаленной демонстрации позволяет познакомиться с жилым комплексом, не посещая офис продаж."
                 onClickButton={() => onClickStartDemo()}
                 textButton='Начать демонстрацию'
         />
-    );
+    const [currentContent, setCurrentContent] = useState<JSX.Element>(defaultCurrentContent);
 
     useEffect(() => {
         // changeContent.current += 1;
@@ -100,15 +100,34 @@ export const MainPart: React.FC = React.memo(() => {
             <PlanContentContainer
                 title="Оформление"
                 date={dateTime}
-                content={<Form onSubmit={(data) => onSubmit(data)} />}
+                content={
+                    <Form 
+                        onSubmit={(data, date) => onSubmit(data, date)} 
+                        dateInfo={dateTime}
+                    />
+                }
                 isLegend={false}
             />
         )
         console.log(dateTime)
     }
 
-    function onSubmit(data: FormData) {
+    function onSubmit(data: FormData, date: string) {
+        setPlaneContent(null);
+        setCurrentContent(
+            <ContentContainer 
+                titleText="Просмотр запланирован"
+                descriptText="Дополнительная информация будет отправлена на указанный почтовый адрес или номер телефона."
+                textButton="На главную"
+                onClickButton={() => toMain()}
+            />
+        )
+        console.log(data, date)
+    }
 
+    function toMain() {
+        setCurrentContent(defaultCurrentContent);
+        disableBackground();
     }
 
     function enableBackground() {