добавлена возможность возвращаться на предыдущий этап выбора записи

src/components/mainPart/backButtonIcon.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 7L13 7M1 7L7.36364 13M1 7L7.36364 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/mainPart/contentContainer.tsx

@@ -17,7 +17,7 @@ type TProps = {
         ru: string,
         en: string
     }
-    accessCode?: string,
+    isAccessCode?: boolean,
 }
 
 type WsData = {
@@ -59,7 +59,7 @@ export const ContentContainer:React.FC<TProps> = React.memo((props) => {
             {props.descriptText[lang]}
         </span>
         {
-            props.accessCode &&
+            props.isAccessCode &&
             <span className="main-part-text-access-code">{accessCode}</span>
         }
         <PinkButton

src/components/mainPart/mainPart.css

@@ -217,6 +217,32 @@
     display: flex;
     flex-direction: column;
     width: 500px;
+    gap: 20px;
+}
+
+.plan-content-back-button-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 80px;
+    cursor: pointer;
+}
+
+.plan-content-back-button-container:hover {
+    opacity: .7;    
+}
+
+.plan-content-back-button-icon {
+    width: 12px;
+    height: 12px;
+    background: url('backButtonIcon.svg') 50% 50% no-repeat;
+    background-size: 100% 100%;
+}
+
+.plan-content-back-button-text {
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 130%;
 }
 
 .plan-content-title {

src/components/mainPart/mainPart.tsx

@@ -28,7 +28,7 @@ export const MainPart: React.FC<TProps> = React.memo((props) => {
     const {lang, setLang} = useContext(ContextLang);
     const changeContent = useRef(0);
     const [showBackground, setShowBackground] = useState<boolean>(false);
-    const [planContent, setPlaneContent] = useState<JSX.Element>();
+    const [planContent, setPlanContent] = useState<JSX.Element>();
     const defaultCurrentContent = 
         <ContentContainer 
             titleText={LangDict.mainTitle}
@@ -38,14 +38,23 @@ export const MainPart: React.FC<TProps> = React.memo((props) => {
         />
     const [currentContent, setCurrentContent] = useState<JSX.Element>(defaultCurrentContent);  
     const lastRender = currentContent;
-    const {ws, wsEvent} = useContext(ContextWs);
+    const history = useRef<Array<JSX.Element>>(new Array());
+    const isRemoveLastElementHistry = useRef<boolean>(false);
 
     useEffect(() => {
         console.log(lang)
         // onClickStartDemo()
         setCurrentContent(lastRender)
         
-    }, [lang])
+    }, [lang]);
+
+    useEffect(() => {
+        if(planContent && !isRemoveLastElementHistry.current) {
+            history.current.push(planContent);
+            isRemoveLastElementHistry.current = false;
+            console.log(history.current.length, 'добавили 1')
+        }
+    }, [planContent])
     
     function changeLang(lang: 'ru' | 'en') {
         setLang(lang);
@@ -56,6 +65,23 @@ export const MainPart: React.FC<TProps> = React.memo((props) => {
         changeContent.current += 1
     }
 
+    function prevPlan() {
+        changeContentFunc();
+        if(history.current.length - 1 <= 0) {
+            onClickStartDemo();
+            history.current = new Array();
+            setPlanContent(null);
+            disableBackground();
+            isRemoveLastElementHistry.current = false;
+        } else {
+            setPlanContent(history.current[history.current.length - 2]);
+            history.current.splice(history.current.length - 1, 1);
+            isRemoveLastElementHistry.current = true;
+            console.log(history.current.length, 'убрали 1')
+        }
+        
+    }
+
     function onClickStartDemo() {
         changeContentFunc();
         setCurrentContent(
@@ -85,19 +111,22 @@ export const MainPart: React.FC<TProps> = React.memo((props) => {
                 descriptText={LangDict.demoStartedDescription}
                 onClickButton={() => onClickConnect()}
                 textButton={LangDict.connectToDemoButton}
-                accessCode="1876"
+                isAccessCode={true}
             />
         )            
     }
 
-    function onClickPlaneDemo() {  
+    function onClickPlaneDemo() { 
         // changeContentFunc()
+        isRemoveLastElementHistry.current = false;
         enableBackground();
-        setPlaneContent(
+        setPlanContent(
             <PlanContentContainer 
                 title={LangDict.selectDate}
                 content={<CalendarComponent onCLick={(date) => onSelectDay(date)} />}
                 isLegend={true}
+                toPrevState={prevPlan}
+                showPrevButton={true}
             />
         );
         setCurrentContent(<></>);
@@ -109,8 +138,10 @@ export const MainPart: React.FC<TProps> = React.memo((props) => {
     }
 
     function onSelectDay(date: {ru: string, en: string}) {
+        // history.current.push(planContent);
+        isRemoveLastElementHistry.current = false;
         changeContentFunc()
-        setPlaneContent(
+        setPlanContent(
             <PlanContentContainer 
             title={LangDict.selectTime}
                 date={date}
@@ -119,18 +150,22 @@ export const MainPart: React.FC<TProps> = React.memo((props) => {
                     onClickTime={(date, time) => onSelectTime(date, time)}                
                 />}
                 isLegend={true}
+                toPrevState={prevPlan}
+                showPrevButton={true}
             />
         );
     }
 
     function onSelectTime(date: {ru: string, en: string}, time: string) {
+        // history.current.push(planContent);
+        isRemoveLastElementHistry.current = false;
         changeContentFunc()
         let dateTime = `${date} ${lang === 'ru' ? 'в' : 'in'} ${time}`;
         let dateObj = {
             ru: `${date.ru} в ${time}`,
             en: `${date.en} in ${time}`
         }
-        setPlaneContent(
+        setPlanContent(
             <PlanContentContainer
                 title={LangDict.checkout}
                 date={dateObj}
@@ -141,14 +176,16 @@ export const MainPart: React.FC<TProps> = React.memo((props) => {
                     />
                 }
                 isLegend={false}
+                toPrevState={prevPlan}
+                showPrevButton={true}
             />
         )
         console.log(dateTime)
     }
 
-    function onSubmit(data: FormData, date: string) {
+    function onSubmit(data: FormData, date: string) {        
         changeContentFunc();
-        setPlaneContent(null);
+        setPlanContent(null);
         setCurrentContent(
             <ContentContainer 
                 titleText={LangDict.checkouted}
@@ -157,14 +194,16 @@ export const MainPart: React.FC<TProps> = React.memo((props) => {
                 onClickButton={() => toMain()}
             />
         )
+        history.current = new Array();
         // console.log(data, date)
     }
 
     function toMain() {
         changeContentFunc();
         setCurrentContent(defaultCurrentContent);
-        setPlaneContent(null);
+        setPlanContent(null);
         disableBackground();
+        history.current = new Array();
     }
 
     function enableBackground() {

src/components/mainPart/planContentContainer.tsx

@@ -13,11 +13,17 @@ type TProps = {
     }
     content: JSX.Element
     isLegend: boolean
+    toPrevState: () => void
+    showPrevButton: boolean
 }
 
 export const PlanContentContainer:React.FC<TProps> = React.memo((props) => {
     const {lang} = useContext(ContextLang);
     return <div className="plan-content-container">
+        {props.showPrevButton && <div className="plan-content-back-button-container" onClick={() => props.toPrevState()}>
+            <span className="plan-content-back-button-icon"></span>
+            <span className="plan-content-back-button-text">Назад</span>
+        </div>}
         <span className="plan-content-title">{props.title[lang]}</span>
         {
             props.date