first commit

src/App.css

@@ -0,0 +1,38 @@
+.App {
+  width: 100%;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.js

@@ -0,0 +1,13 @@
+import logo from "./logo.svg";
+import { Main } from "./components/Main/Main";
+import "./App.css";
+
+function App() {
+  return (
+    <div className="App">
+      <Main></Main>
+    </div>
+  );
+}
+
+export default App;

src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/Crimea.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="6.5" fill="#EBEBEB" stroke="#567ECE"/>
+</svg>

src/Ellipse 224.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="6.5" fill="#EBEBEB" stroke="#567ECE"/>
+</svg>

src/Moscow.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="6.5" fill="#EBEBEB" stroke="#567ECE"/>
+</svg>

src/components/AveragePriceApartment/AveragePriceApartment.js

@@ -0,0 +1,25 @@
+import { InputComponent } from "../InputComponent/InputComponent";
+import { useSelector } from "react-redux";
+
+export const AveragePriceApartment = () => {
+   const { priceAvarage, total } = useSelector((state) => state.calcReducer);
+
+   console.log(priceAvarage)
+   const name = "priceApartment";
+   const min = 30000;
+   const max = 200000;
+   const large = true
+ 
+   return (    <div className="container">
+   <span className="caption-input">Средняя стоимость 1 м2</span>
+   <InputComponent
+     min={min}
+     large={large}
+     max={max}
+     name={name}
+     inputClass={"input_type_one"}
+     value={priceAvarage}
+   ></InputComponent>
+ </div>
+)
+}

src/components/AverageSquareApartment/AverageSquareApartment.js

@@ -0,0 +1,22 @@
+import { InputComponent } from "../InputComponent/InputComponent";
+import { useSelector } from "react-redux";
+export const AverageSquareApartment = () => {
+  const { squareApartment, total } = useSelector((state) => state.calcReducer);
+
+  const name = "squareApartment";
+  const min = 1;
+  const max = 200;
+
+  return (
+    <div className="container">
+      <span className="caption-input">Средняя площадь квартиры</span>
+      <InputComponent
+        min={min}
+        max={max}
+        name={name}
+        inputClass={"input_type_one"}
+        value={squareApartment}
+      ></InputComponent>
+    </div>
+  );
+};

src/components/ConsultationOffice/ConsultationOffice.js

@@ -0,0 +1,27 @@
+import { InputComponent } from "../InputComponent/InputComponent";
+import { useSelector } from "react-redux";
+
+
+export const ConsultationOffice = ({}) => {
+
+    const { consultation, total } = useSelector((state) => state.calcReducer);
+
+
+    const name = "consultation";
+    const min = 1;
+    const max = 100;
+  
+    return (
+        <div className="container">
+        <span className="caption-input_type_two">Консультации в офисе</span>
+        <InputComponent
+          min={min}
+          max={max}
+          name={name}
+          inputClass={'input_type_two'}
+          value={consultation}
+        ></InputComponent>
+      </div>
+  
+    )
+}

src/components/ConsultationReserv/ConsultationReserv.js

@@ -0,0 +1,29 @@
+import { InputComponent } from "../InputComponent/InputComponent";
+import { useSelector } from "react-redux";
+
+
+export const ConsultationReserv = ({ }) => {
+
+
+    const { consultationReserv, total } = useSelector((state) => state.calcReducer);
+
+
+
+    const name = "consultationReserv";
+    const min = 1;
+    const max = 100;
+
+    return (
+        <div className="container">
+            <span className="caption-input_type_two">Консультации, закончившиеся бронью</span>
+            <InputComponent
+                min={min}
+                max={max}
+                name={name}
+                inputClass={'input_type_two'}
+                value={consultationReserv}
+            ></InputComponent>
+        </div>
+
+    )
+}

src/components/FederalCIty/FederalCity.js

@@ -0,0 +1,19 @@
+import '../Region/Region.css'
+export const FederalCity = ({ item, select, setHover, handleSelect }) => {
+    const isSelected = item.id === select;
+    const isAlive = item.name === undefined;
+
+    const handleClick = ({ }) => {
+        handleSelect(item);
+    };
+
+    return <>
+        <use
+            className={isSelected ? "regionClass selected" : "regionClass"}
+            onClick={handleClick}
+            style={isAlive ? { pointerEvents: "none" } : { pointerEvents: "all" }}
+            stroke="#567ECE" fill={isSelected ? "#2B5EC6" : "#EBEBEB"}
+            id="1" x={item.x} y={item.y} xlinkHref="#crc1"> </use>
+
+    </>
+}

src/components/InputComponent/InputComponent.css

@@ -0,0 +1,161 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 17px;
+  width: 100%;
+
+}
+
+.caption-input {
+  text-align: left;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 120%;
+  /* or 19px */
+
+  /* Landing/Blue/Default */
+
+  color: #567ECE;
+}
+
+.caption-input_type_two {
+  text-align: left;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 120%;
+  /* or 19px */
+
+  /* Landing/Blue/Default */
+
+  color: #2B5EC6;
+}
+
+
+
+.input_type_one {
+  -webkit-appearance: none;
+  background: #888888;
+  height: 2px;
+  cursor: pointer;
+  background-image: linear-gradient(#567ECE, #567ECE);
+  background-size: 70% 100%;
+  background-repeat: no-repeat;
+}
+
+.input_type_two {
+  -webkit-appearance: none;
+  background: #888888;
+  border-radius: 2px;
+  height: 28px;
+  cursor: pointer;
+  background-image: linear-gradient(#2B5EC6, #2B5EC6);
+  background-size: 70% 100%;
+  background-repeat: no-repeat;
+}
+
+.input_type_two::-webkit-slider-runnable-track {
+  -webkit-appearance: none;
+  box-shadow: none;
+  border: none;
+  background: transparent;
+}
+
+.input_type_two::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  background: #F7F7F7;
+  /* Button/Blue/Default */
+  width: 8px;
+  height: 16px;
+  
+  border: 1.2px solid #2B5EC6;
+  border-radius: 1.2px;
+}
+
+.input_type_one::-webkit-slider-runnable-track {
+  -webkit-appearance: none;
+  box-shadow: none;
+  border: none;
+  background: transparent;
+}
+
+
+
+.input_type_one::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  background: #567ECE;
+  height: 15px;
+  width: 15px;
+  border-radius: 50%;
+}
+
+
+.input-container {
+  flex-direction: column;
+  display: flex;
+}
+
+.value-container {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 140%;
+  /* identical to box height, or 20px */
+
+  text-align: center;
+
+  /* Landing/Blue/Default */
+
+  color: #567ECE;
+  display: flex;
+  margin-top: 12px;
+  justify-content: space-between;
+}
+
+
+.value-container_type_two {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 140%;
+  /* identical to box height, or 20px */
+
+  text-align: center;
+
+  /* Landing/Blue/Default */
+  color: #2B5EC6;
+
+  display: flex;
+  margin-top: 12px;
+  justify-content: space-between;
+} 
+
+.number-input {
+  -webkit-appearance: none;
+  border: none;
+  outline: none;
+  width: 39px;
+
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 21.6px;
+  line-height: 135%;
+  /* or 29px */
+
+  /* White */
+  background-color: transparent;
+  color: #f7f7f7;
+}
+
+.number-container {
+  display: flex;
+  align-items: center;
+}
+
+.edit-icon {
+  cursor: pointer;
+}

src/components/InputComponent/InputComponent.js

@@ -0,0 +1,157 @@
+import './InputComponent.css'
+import edit from './edit.svg'
+import { useEffect, useState } from "react";
+import CurrencyInput from "react-currency-input-field";
+import { useDispatch } from "react-redux";
+import { calcSlice } from "../../store/reducers/calcSlice";
+
+export const InputComponent = ({ value, name, min, max, inputClass, large }) => {
+  const dispatch = useDispatch();
+  const { handleValue, handleTotal } = calcSlice.actions;
+  const [valid, setValid] = useState(false);
+  const [valueInput, setValueInput] = useState(value);
+
+
+  useEffect(() => {
+    setValueInput(value)
+  }, [value])
+
+  const handleNumber = (number) => {
+    if (!number) {
+      return;
+    }
+    const num = Number(number.replace(/ /g, ""));
+    console.log(num, "test");
+    return num;
+  };
+
+  useEffect(() => {
+    dispatch(handleTotal());
+  }, []);
+
+  const handleTotalValues = (value, name) => {
+    dispatch(handleValue({ name: name, value: value }));
+    dispatch(handleTotal());
+  };
+
+  const handleState = (e) => {
+    const { value, name } = e.target;
+
+    setValueInput(value);
+    handleTotalValues(value, name);
+    handleStyle();
+  };
+
+  const handleValidity = (number) => {
+    if (!(number < max && number > min && number !== 0)) {
+      setValid(false);
+      return false;
+    } else {
+      setValid(true);
+      return true;
+    }
+  };
+
+  const handleOnValueChange = (value, name) => {
+    const number = handleNumber(value);
+    setValueInput(number);
+
+    handleStyle();
+
+    setValid(false);
+    if (!name) {
+      return;
+    }
+
+    if (!value) {
+      setValueInput("");
+      return;
+    }
+
+    if (!Number.isNaN(number)) {
+      const validity = handleValidity(number);
+
+      if (validity) {
+        handleTotalValues(number, name);
+        return;
+      } else {
+        return;
+      }
+    }
+  };
+
+  const handleFocusLeft = (e) => {
+    const { name, value } = e.target;
+    const number = handleNumber(value);
+    console.log(number, value, "valuie");
+    if (number === 0 && number === undefined) {
+      handleTotalValues(min, name);
+      return;
+    } else {
+      if (!valid) {
+        if (!(number < max)) {
+          handleTotalValues(max, name);
+          setValueInput(max);
+          return;
+        }
+        if (number <= min) {
+          handleTotalValues(min, name);
+          setValueInput(min);
+          return;
+        }
+      } else {
+        return;
+      }
+    }
+  };
+
+  const handleStyle = () => {
+    let width;
+    if (valueInput < min) {
+      return (width = "0%");
+    }
+    width = ((valueInput - min) * 100) / (max - min) + "% 100%";
+    return width;
+  };
+
+  return (
+    <>
+      <div className='number-container'>
+        <CurrencyInput
+          className="number-input"
+          decimalsLimit={3}
+          allowNegativeValue={false}
+          allowDecimals={false}
+          groupSeparator={" "}
+          style={large ? {width: '78px'} : {width: '45px'}}
+          min={min}
+          max={max}
+          name={name}
+          value={valueInput}
+          onBlur={(e) => handleFocusLeft(e)}
+          onValueChange={(value, name) => handleOnValueChange(value, name)}
+        />
+        <img className='edit-icon' alt='edit/изменить' src={edit} />
+      </div>
+
+      <div className="input-container">
+        <input
+          style={{
+            backgroundSize: handleStyle(),
+          }}
+          type="range"
+          className={inputClass}
+          name={name}
+          min={min}
+          value={valueInput === "" ? 0 : valueInput}
+          max={max}
+          onChange={(e) => handleState(e)}
+        ></input>
+        <div className="value-container">
+          <span>{min}</span>
+          <span>{max}</span>
+        </div>
+      </div>
+    </>
+  );
+};

src/components/InputComponent/edit.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="23" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3.03353H2.7C2.03726 3.03353 1.5 3.57079 1.5 4.23353V20.5002C1.5 21.1629 2.03726 21.7002 2.7 21.7002H18.9667C19.6294 21.7002 20.1667 21.1629 20.1667 20.5002V11.2002M7.33333 15.8669V13.5335L15.5 5.36686L17.8333 7.7002L9.66667 15.8669H7.33333ZM17.8333 3.03353L20.1667 0.700195L22.5 3.03353L20.1667 5.36686L17.8333 3.03353Z" stroke="#F7F7F7" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/InputNumber/InputNumber.css

@@ -0,0 +1,33 @@
+.input-number {
+    width: 100%;
+    font-family: "GilroyWebRegular";
+    font-style: normal;
+    box-sizing: border-box;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 120%;
+    background: rgba(86, 126, 206, 0.1);
+    border-radius: 8px;
+    color: #ebebeb;
+    outline: none;
+    border: none;
+    margin-top: 10px;
+  
+  }
+  
+  .input-number-caption {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 140%;
+    /* identical to box height, or 20px */
+  
+    /* Landing/Blue/Default */
+  
+    color: #567ECE;
+  }
+
+  .input-number[type="text"] {
+    padding: 16px 16px 12px;
+
+  }

src/components/InputNumber/InputNumber.js

@@ -0,0 +1,37 @@
+import './InputNumber.css'
+import { useEffect } from 'react';
+import CurrencyInput from 'react-currency-input-field';
+import useFormWithValidation from "../../hooks/useFormWithValidation";
+
+export const InputNumber = ({ number, handleState }) => {
+
+    const { values, handleValidity, resetForm, isTrigger } =
+        useFormWithValidation(0, 5000);
+
+    useEffect(() => {
+        if (isTrigger) {
+            handleState(prevState => ({ ...prevState, rcNumber: parseInt(values) }))
+
+        }
+    }, [values])
+
+
+    useEffect(() => {
+        handleValidity(number)
+    }, [])
+
+
+    return (<div>
+        <span className="input-number-caption">
+            Кв. м жилья в жилом комплексе
+        </span>
+        <CurrencyInput
+            value={values}
+            onValueChange={(value, name) => handleValidity(value)}
+            className="input-number"
+            name='squareRC'
+            decimalSeparator=' '
+        />
+    </div>
+    )
+}

src/components/InputSelect/InputSelect.css

@@ -0,0 +1,134 @@
+.select {
+  margin-bottom: 30px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 16px 16px 12px;
+  gap: 74px;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  /* identical to box height, or 24px */
+  cursor: pointer;
+  font-family: "GilroyWebRegular";
+
+  /* Landing/White */
+
+  color: #ebebeb;
+  position: relative;
+  height: 52px;
+  box-sizing: border-box;
+  background: rgba(86, 126, 206, 0.1);
+  border-radius: 8px;
+}
+
+.select-container {
+  height: 321px;
+}
+
+.option {
+  appearance: none;
+  font-family: "GilroyWebRegular";
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 16px 16px 12px;
+  gap: 74px;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  /* identical to box height, or 24px */
+  border: none;
+  width: 100%;
+  /* Landing/White */
+  cursor: pointer;
+  height: 52px;
+  box-sizing: border-box;
+  background: rgba(86, 126, 206, 0.1);
+}
+
+.container {
+  position: relative;
+  height: auto;
+}
+
+.select-container {
+  width: 100%;
+
+  height: auto;
+  margin-bottom: 20px;
+}
+
+.option-container {
+  z-index: 99;
+
+  background: #141414;
+  position: absolute;
+  width: 100%;
+  height: 256px;
+  overflow: hidden;
+  overflow-y: scroll;
+}
+
+.option:hover {
+  opacity: 0.8;
+}
+
+.option-name {
+  color: #ebebeb;
+
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.map-input {
+  width: 99%;
+  height: 99%;
+  position: relative;
+}
+
+.map {
+  z-index: 1;
+  position: absolute;
+}
+
+.map-hover-caption {
+  cursor: pointer;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 125%;
+  color: #ebebeb;
+}
+
+.map-hover {
+  position: absolute;
+  background-color: transparent;
+  z-index: 1;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+}
+
+
+.map-caption {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 130%;
+  /* or 16px */
+  margin-bottom: 30px;
+  /* Landing/LightGray */
+
+  color: #888888;
+}

src/components/InputSelect/InputSelect.js

@@ -0,0 +1,87 @@
+import { useState, useEffect, useRef } from "react";
+import { MapComponent } from "../MapComponent/MapComponent";
+import "./InputSelect.css";
+export const InputSelect = ({
+  handleSelect,
+  selectedValue,
+  option,
+}) => {
+  const selectInput = useRef()
+  const divInput = useRef()
+  const [show, setShow] = useState(false);
+
+
+  console.log(option, 'pt')
+  const handleSelectRegion = (i) => {
+    handleSelect(i)
+    closeDropDown();
+  }
+
+  const closeDropDown = () => {
+    setShow(false)
+  }
+
+  const handleShow = ({ }) => {
+    if (!show) {
+      setTimeout(() => {
+        selectInput.current.focus()
+      }, 200)
+      setShow(true)
+    } else {
+      closeDropDown()
+    }
+  }
+
+  useEffect(() => {
+    const handleClose = (e) => {
+      if (e.target !== divInput.current) {
+        closeDropDown();
+      }
+    }
+    document.addEventListener('click', handleClose)
+
+    return () => {
+      document.removeEventListener('click', handleClose);
+    }
+  }, [])
+
+
+  return (
+    <div className="">
+      <div className="select-container">
+        <div ref={divInput} onClick={handleShow} className="select">{selectedValue.name}
+        </div>
+        <div
+          className="container">
+          {show && (<>
+            <div
+              className="option-container">
+              {option.map((i) => (
+                <button
+                  onClick={() => handleSelectRegion(i)}
+                  key={i.id}
+                  value={i.price}
+                  className="option"
+                >
+                  <p className="option-name"> {i.name}</p>
+                </button>
+              ))}
+            </div>
+          </>
+          )}
+          <div
+            className="map-input">
+            <MapComponent
+              handleSelect={handleSelect}
+              selectedValue={selectedValue}
+            ></MapComponent>
+          </div>
+        </div>
+      </div>
+      <span className="map-caption">
+        Данные будут установлены в соответсвии со средними показателями по
+        выбранному региону.
+      </span>
+    </div>
+  );
+};

src/components/Main/Main.css

@@ -0,0 +1,37 @@
+.input-container-main {
+  width: 32%;
+  background: transparent;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+
+.input-container-second {
+  display: flex;
+  flex-direction: column;
+  gap: 33px;
+  width: 68%;
+  background: #1C1D22;
+  border-radius: 4px;
+  padding: 56px;
+  box-sizing: border-box;
+
+
+}
+
+.main {
+  font-family: "GilroyWebRegular";
+  display: flex;
+  flex-direction: row;
+  gap: 32px;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding-top: 74px;
+}
+
+.map-main-component {
+  background: #0e0e0e;
+  position: absolute;
+  z-index: 99;
+}

src/components/Main/Main.js

@@ -0,0 +1,57 @@
+import "./Main.css";
+import { useEffect } from "react";
+import { calcSlice } from "../../store/reducers/calcSlice";
+import { useSelector, useDispatch } from "react-redux";
+
+
+import { InputSelect } from "../InputSelect/InputSelect";
+import { InputNumber } from "../InputNumber/InputNumber";
+import { AveragePriceApartment } from '../AveragePriceApartment/AveragePriceApartment';
+import { AverageSquareApartment } from '../AverageSquareApartment/AverageSquareApartment'
+import { ConsultationOffice } from "../ConsultationOffice/ConsultationOffice";
+import { ConsultationReserv } from "../ConsultationReserv/ConsultationReserv";
+import { Sales } from "../Sales/Sales";
+
+const INITIAL_REGION = "e5b7edfb-17ec-475f-8631-bc796ad19909";
+
+export const Main = ({ }) => {
+
+  const dispatch = useDispatch()
+  const { handleSelectRegion, handleOptions, handleValue } = calcSlice.actions
+  const { selectedRegion, options, squareRC } = useSelector((state) => state.calcReducer);
+
+
+  useEffect(() => {
+    dispatch(handleSelectRegion(INITIAL_REGION))
+    dispatch(handleOptions())
+  }, [])
+
+
+  const handleSelect = (element) => {
+    dispatch(handleSelectRegion(element.id))
+  };
+
+
+  return (
+    <div className="main">
+      <div className="input-container-main">
+        <InputSelect
+          option={options}
+          handleSelect={handleSelect}
+          selectedValue={selectedRegion}
+        ></InputSelect>
+        <InputNumber handleState={handleValue} number={squareRC}></InputNumber>
+        <AverageSquareApartment></AverageSquareApartment>
+        <AveragePriceApartment></AveragePriceApartment>
+      </div>
+      <div className="input-container-second">
+        <ConsultationReserv></ConsultationReserv>
+        <ConsultationOffice></ConsultationOffice>
+        <Sales></Sales>
+      </div>
+      <div className="result-block">
+        
+      </div>
+    </div>
+  );
+};

src/components/MapComponent/MapComponent.css

@@ -0,0 +1,95 @@
+.region-name-block {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  align-items: center;
+  height: 60px;
+}
+
+.region-selected {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+}
+
+.region-pointer {
+  background: #567ece;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+}
+
+.region-name {
+  font-weight: 400;
+  font-size: 40px;
+  line-height: 100%;
+  color: #ebebeb;
+}
+
+.region-hover {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+}
+
+.region-pointer-hover {
+  background: #828a9a;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+.region-name-hover {
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 100%;
+
+  text-align: center;
+
+  color: #888888;
+}
+
+.button-block {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  justify-content: center;
+}
+
+.map-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 60px;
+}
+
+
+.button {
+  font-family: "GilroyWebRegular";
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 32px 8px;
+  gap: 8px;
+  width: 156px;
+  height: 42px;
+  cursor: pointer;
+  border: none;
+  color: #ebebeb;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 125%;
+  border-radius: 8px;
+}
+.button-confirm {
+  background: #567ece;
+}
+
+.button-back {
+  border: 1px solid #454545;
+  background-color: transparent;
+}

src/components/MapComponent/MapComponent.js

@@ -0,0 +1,81 @@
+import "./MapComponent.css";
+import { borders, federalCities, regions } from "../../utils/array";
+import { Region } from "../Region/Region";
+import { FederalCity } from "../FederalCIty/FederalCity";
+import { useEffect, useState } from "react";
+
+export const MapComponent = ({
+  selectedValue,
+  handleSelect,
+  open,
+  setOpen,
+}) => {
+  const [select, setSelect] = useState(selectedValue.id);
+  const [display, setDisplay] = useState(selectedValue.name);
+
+  useEffect(() => {
+    setSelect(selectedValue.id);
+    setDisplay(selectedValue.name);
+  }, [handleSelect]);
+
+  return (
+    <div className="map-container">
+      {open && (
+        <div className="region-name-block">
+          <div className="region-selected">
+            {display && (
+              <>
+                {" "}
+                <div className="region-pointer"></div>
+                <span className="region-name">{display}</span>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+      <svg
+        viewBox="0 0 1064 555"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clipPath="url(#clip0_2181_13226)">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d={borders.d}
+            fill={borders.fill}
+          ></path>
+          {regions.map((i) => (
+            <Region
+              handleSelect={handleSelect}
+              select={select}
+              key={i.id}
+              element={i}
+              d={i.d}
+            ></Region>
+          ))}
+        </g>
+        <defs>
+          <clipPath id="clip0_2181_13226">
+            <rect width="1063.48" height="554.495" fill="white" />
+          </clipPath>
+          <circle cx="7" cy="7" r="6.5" id="crc1" />
+        </defs>
+        {federalCities.map((item) => (<FederalCity select={select} handleSelect={handleSelect}  key={item.id} item={item}></FederalCity>))}
+      </svg>
+      {open && (
+        <div className="button-block">
+          <button onClick={() => setOpen(false)} className="button button-back">
+            Назад
+          </button>
+          <button
+            onClick={() => setOpen(false)}
+            className="button-confirm button"
+          >
+            Продолжить
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};

src/components/Region/Region.css

@@ -0,0 +1,15 @@
+.regionClass {
+  transition: 0.3s;
+  pointer-events: none;
+};
+
+/*
+.regionClass:not(.selected):hover {
+  fill: rgba(106, 146, 226, 0.2);
+  transition: 0.3s;
+}
+
+.regionNoPointer {
+}
+
+*/

src/components/Region/Region.js

@@ -0,0 +1,27 @@
+import "./Region.css";
+import { useState } from "react";
+
+export const Region = ({ d, element, handleSelect, select }) => {
+  const isSelected = element.id === select;
+  const isAlive = element.name === undefined;
+
+  const handleClick = ({ }) => {
+    handleSelect(element);
+  };
+
+  return (
+    <>
+
+      <path
+        className={isSelected ? "regionClass selected" : "regionClass"}
+        style={isAlive ? { pointerEvents: "none" } : { pointerEvents: "all" }}
+        onClick={handleClick}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d={d}
+        fill={isSelected ? "#2B5EC6" : "#141414"}
+      >
+      </path> 
+    </>
+  );
+};

src/components/Sales/Sales.js

@@ -0,0 +1,27 @@
+import { InputComponent } from "../InputComponent/InputComponent";
+import { useSelector } from "react-redux";
+
+
+export const Sales = ({ }) => {
+
+    const { sales, total } = useSelector((state) => state.calcReducer);
+
+
+    const name = "sales";
+    const min = 1;
+    const max = 100;
+
+    return (
+        <div className="container">
+            <span className="caption-input_type_two">Продажи</span>
+            <InputComponent
+                min={min}
+                max={max}
+                name={name}
+                inputClass={'input_type_two'}
+                value={sales}
+            ></InputComponent>
+        </div>
+
+    )
+}

src/fonts/fonts.css

@@ -0,0 +1,28 @@
+
+@font-face {
+	font-family: 'GilroyWebRegular';
+	src:
+		url('Gilroy_Regular.woff2') format('woff2'),
+		url('Gilroy_Regular.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'GilroyWebMedium';
+	src:
+		url('Gilroy_Medium.woff2') format('woff2'),
+		url('Gilroy_Medium.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'GilroyWebSemiBold';
+	src:
+		url('Gilroy_SemiBold.woff2') format('woff2'),
+		url('Gilroy_SemiBold.woff') format('woff');
+	font-weight: normal;
+	font-style: normal;
+}
+

src/hooks/useFormWithValidation.js

@@ -0,0 +1,33 @@
+import { useState, useCallback } from 'react';
+
+export default function useFormWithValidation(min, max) {
+    const [values, setValues] = useState('');
+    const [isTrigger, setIsTrigger] = useState(false);
+
+
+    const handleValidity = (value) => {
+        setIsTrigger(true)
+        if (value) {
+            if (value > max) {
+                setValues(max)
+            } else if (min > value) {
+                setValues(min)
+            } else {
+                setValues(value)
+            }
+        }
+        else {
+            setValues(0)
+        }
+    }
+
+    const resetForm = useCallback(
+        (newValues = {}, newIsValid = false) => {
+            setValues(newValues);
+            setIsTrigger(newIsValid);
+        },
+        [setValues, setIsTrigger]
+    );
+
+    return { values, handleValidity, isTrigger, resetForm };
+}

src/index.css

@@ -0,0 +1,14 @@
+@import url(./fonts/fonts.css);
+
+body {
+  margin: 0;
+  font-family: 'GilroyWebRegular';
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: #0E0E0E;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.js

@@ -0,0 +1,25 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { Provider } from "react-redux";
+
+import { setupStore } from "./store/store";
+
+const store = setupStore();
+
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/saintP.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="7" cy="7" r="6.5" fill="#EBEBEB" stroke="#567ECE"/>
+</svg>

src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

src/store/reducers/calcSlice.js

@@ -0,0 +1,48 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { regions } from "../../utils/array";
+
+const initialState = {
+  squareRC: 1500,
+  squareApartment: 100,
+  priceAvarage: 100000,
+  consultation: 100,
+  consultationReserv: 30,
+  sales: 10,
+  total: null,
+  regions: regions,
+  selectedRegion: {},
+  options: []
+};
+
+export const calcSlice = createSlice({
+  name: "calc",
+  initialState,
+  reducers: {
+    handleOptions(state) {
+      const options = state.regions.filter((i) => i.name);
+      return { ...state, options: options }
+
+    },
+    handleSelectRegion(state, action) {
+      console.log(action)
+      const region = state.regions.find((i) => i.id === action.payload);
+      return { ...state, selectedRegion: region, priceAvarage: region.price }
+    },
+    handleValue(state, action) {
+      console.log(action.payload.value)
+      return { ...state, [action.payload.name]: action.payload.value };
+    },
+    handleInitalState(state, action) {
+      return {
+        ...state,
+        [action.payload.name]: initialState[action.payload.name],
+      };
+    },
+    handleTotal(state) {
+      const number = Number(state.squareApartment)
+      state.total = number + 20;
+    },
+  },
+});
+
+export default calcSlice.reducer;

src/store/store.js

@@ -0,0 +1,10 @@
+import { combineReducers, configureStore } from "@reduxjs/toolkit";
+import calcReducer from "./reducers/calcSlice";
+
+const rootReducer = combineReducers({ calcReducer });
+
+export const setupStore = () => {
+  return configureStore({
+    reducer: rootReducer,
+  });
+};

src/utils/inputRangeStaticProps.js

@@ -0,0 +1,34 @@
+export const averegeSquare = {
+    title: 'Средняя площадь квартиры',
+    min: 1,
+    max: 200,
+    defaultValue: 100
+}
+
+export const averagePrice = {
+    title: 'Средняя стоимость 1 м2',
+    min: 30000,
+    max: 300000,
+}
+
+export const officeConsultation = {
+    title: 'Консультации в офисе',
+    min: 0,
+    max: 100,
+    defaultValue: false
+}
+
+export const consultationBooking = {
+    title: 'Консультации, закончившиеся бронью',
+    min: 0,
+    max: 100,
+}
+
+export const sales = {
+    title: 'Продажи',
+    min: 0,
+    max: 100,
+}
+
+
+