added calcualtor
This commit is contained in:
DmitriyB
Generated
+224
@@ -8,14 +8,17 @@
|
||||
"name": "estate-solutionv2",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "^1.9.3",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"animejs": "^3.2.1",
|
||||
"framer-motion": "^10.8.5",
|
||||
"react": "^18.2.0",
|
||||
"react-currency-input-field": "^3.6.10",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-minimal-pie-chart": "^8.4.0",
|
||||
"react-redux": "^8.0.5",
|
||||
"react-scripts": "5.0.1",
|
||||
"swiper": "^9.1.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
@@ -3132,6 +3135,29 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.3.tgz",
|
||||
"integrity": "sha512-GU2TNBQVofL09VGmuSioNPQIu6Ml0YLf4EJhgj0AvBadRlCGzUWet8372LjvO4fqKZF2vH1xU0htAa7BrK9pZg==",
|
||||
"dependencies": {
|
||||
"immer": "^9.0.16",
|
||||
"redux": "^4.2.0",
|
||||
"redux-thunk": "^2.4.2",
|
||||
"reselect": "^4.1.7"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.9.0 || ^17.0.0 || ^18",
|
||||
"react-redux": "^7.2.1 || ^8.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"react": {
|
||||
"optional": true
|
||||
},
|
||||
"react-redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
@@ -3879,6 +3905,15 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/hoist-non-react-statics": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
|
||||
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
|
||||
"dependencies": {
|
||||
"@types/react": "*",
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/html-minifier-terser": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
|
||||
@@ -4288,6 +4323,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz",
|
||||
"integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g=="
|
||||
},
|
||||
"node_modules/@types/use-sync-external-store": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
|
||||
"integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
|
||||
},
|
||||
"node_modules/@types/ws": {
|
||||
"version": "8.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
|
||||
@@ -8761,6 +8801,19 @@
|
||||
"he": "bin/he"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"dependencies": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics/node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/hoopy": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
|
||||
@@ -14255,6 +14308,14 @@
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/react-currency-input-field": {
|
||||
"version": "3.6.10",
|
||||
"resolved": "https://registry.npmjs.org/react-currency-input-field/-/react-currency-input-field-3.6.10.tgz",
|
||||
"integrity": "sha512-KRAJJaLujarBTLlEVbznsUxQ56+Qyqwoe5w9DnGxmsGnHv4ycQRpRkuuCDfF9BcXHmegzsOXesfIGpW7Cw9mTQ==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.9.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-dev-utils": {
|
||||
"version": "12.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
|
||||
@@ -14406,6 +14467,49 @@
|
||||
"react-dom": "^16.8.0 || ^17.0.0 || ^18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-redux": {
|
||||
"version": "8.0.5",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
|
||||
"integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.1",
|
||||
"@types/hoist-non-react-statics": "^3.3.1",
|
||||
"@types/use-sync-external-store": "^0.0.3",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"react-is": "^18.0.0",
|
||||
"use-sync-external-store": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^16.8 || ^17.0 || ^18.0",
|
||||
"@types/react-dom": "^16.8 || ^17.0 || ^18.0",
|
||||
"react": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-native": ">=0.59",
|
||||
"redux": "^4"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-native": {
|
||||
"optional": true
|
||||
},
|
||||
"redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-redux/node_modules/react-is": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
||||
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
@@ -14541,6 +14645,22 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/redux": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
|
||||
"integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.9.2"
|
||||
}
|
||||
},
|
||||
"node_modules/redux-thunk": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
|
||||
"integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==",
|
||||
"peerDependencies": {
|
||||
"redux": "^4"
|
||||
}
|
||||
},
|
||||
"node_modules/regenerate": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
|
||||
@@ -14667,6 +14787,11 @@
|
||||
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
|
||||
},
|
||||
"node_modules/reselect": {
|
||||
"version": "4.1.7",
|
||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.7.tgz",
|
||||
"integrity": "sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A=="
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
|
||||
@@ -16298,6 +16423,14 @@
|
||||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
|
||||
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
@@ -19408,6 +19541,17 @@
|
||||
"source-map": "^0.7.3"
|
||||
}
|
||||
},
|
||||
"@reduxjs/toolkit": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.3.tgz",
|
||||
"integrity": "sha512-GU2TNBQVofL09VGmuSioNPQIu6Ml0YLf4EJhgj0AvBadRlCGzUWet8372LjvO4fqKZF2vH1xU0htAa7BrK9pZg==",
|
||||
"requires": {
|
||||
"immer": "^9.0.16",
|
||||
"redux": "^4.2.0",
|
||||
"redux-thunk": "^2.4.2",
|
||||
"reselect": "^4.1.7"
|
||||
}
|
||||
},
|
||||
"@rollup/plugin-babel": {
|
||||
"version": "5.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
|
||||
@@ -19946,6 +20090,15 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"@types/hoist-non-react-statics": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
|
||||
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
|
||||
"requires": {
|
||||
"@types/react": "*",
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"@types/html-minifier-terser": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
|
||||
@@ -20302,6 +20455,11 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.3.tgz",
|
||||
"integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g=="
|
||||
},
|
||||
"@types/use-sync-external-store": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
|
||||
"integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
|
||||
},
|
||||
"@types/ws": {
|
||||
"version": "8.5.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz",
|
||||
@@ -23548,6 +23706,21 @@
|
||||
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
|
||||
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
|
||||
},
|
||||
"hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"requires": {
|
||||
"react-is": "^16.7.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"hoopy": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
|
||||
@@ -27331,6 +27504,12 @@
|
||||
"whatwg-fetch": "^3.6.2"
|
||||
}
|
||||
},
|
||||
"react-currency-input-field": {
|
||||
"version": "3.6.10",
|
||||
"resolved": "https://registry.npmjs.org/react-currency-input-field/-/react-currency-input-field-3.6.10.tgz",
|
||||
"integrity": "sha512-KRAJJaLujarBTLlEVbznsUxQ56+Qyqwoe5w9DnGxmsGnHv4ycQRpRkuuCDfF9BcXHmegzsOXesfIGpW7Cw9mTQ==",
|
||||
"requires": {}
|
||||
},
|
||||
"react-dev-utils": {
|
||||
"version": "12.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
|
||||
@@ -27444,6 +27623,26 @@
|
||||
"@types/svg-path-parser": "^1.1.3"
|
||||
}
|
||||
},
|
||||
"react-redux": {
|
||||
"version": "8.0.5",
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
|
||||
"integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.12.1",
|
||||
"@types/hoist-non-react-statics": "^3.3.1",
|
||||
"@types/use-sync-external-store": "^0.0.3",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"react-is": "^18.0.0",
|
||||
"use-sync-external-store": "^1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-is": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
||||
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-refresh": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
@@ -27547,6 +27746,20 @@
|
||||
"strip-indent": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"redux": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
|
||||
"integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.9.2"
|
||||
}
|
||||
},
|
||||
"redux-thunk": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
|
||||
"integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==",
|
||||
"requires": {}
|
||||
},
|
||||
"regenerate": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
|
||||
@@ -27648,6 +27861,11 @@
|
||||
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
|
||||
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
|
||||
},
|
||||
"reselect": {
|
||||
"version": "4.1.7",
|
||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.7.tgz",
|
||||
"integrity": "sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A=="
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.22.1",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
|
||||
@@ -28826,6 +29044,12 @@
|
||||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"use-sync-external-store": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
|
||||
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
|
||||
"requires": {}
|
||||
},
|
||||
"util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
|
||||
@@ -3,14 +3,17 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "^1.9.3",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"animejs": "^3.2.1",
|
||||
"framer-motion": "^10.8.5",
|
||||
"react": "^18.2.0",
|
||||
"react-currency-input-field": "^3.6.10",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-minimal-pie-chart": "^8.4.0",
|
||||
"react-redux": "^8.0.5",
|
||||
"react-scripts": "5.0.1",
|
||||
"swiper": "^9.1.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
|
||||
@@ -7,6 +7,8 @@ import { SwiperComponent } from 'components/SwiperComponent/SwiperComponent';
|
||||
import { VirtualTour } from 'components/VirtualTour/VirtualTour';
|
||||
import { Analytics } from 'components/Analytics/Analytics';
|
||||
import { MapComponent } from 'components/MapComponent/MapComponent';
|
||||
import { Footer } from 'components/Footer/Footer';
|
||||
import { CalculatorComponent } from 'components/CalculatorComponent/CalculatorComponent';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@@ -19,7 +21,9 @@ function App() {
|
||||
<VirtualTour></VirtualTour>
|
||||
<Analytics></Analytics>
|
||||
<MapComponent></MapComponent>
|
||||
<CalculatorComponent></CalculatorComponent>
|
||||
</main>
|
||||
<Footer></Footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
|
||||
|
||||
.calculator-layout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 32px;
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
|
||||
.input-container-main {
|
||||
width: 32%;
|
||||
background: transparent;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
.input-container-second {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 33px;
|
||||
width: 68%;
|
||||
background: #1c1d22;
|
||||
border-radius: 4px;
|
||||
padding: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.main {
|
||||
font-family: "GilroyWebRegular";
|
||||
max-width: 1440px;
|
||||
margin: 0 auto;
|
||||
padding: 40px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
.input-col-contianer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.input-caption {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 140%;
|
||||
/* or 22px */
|
||||
|
||||
|
||||
/* Inactive */
|
||||
|
||||
color: #C5C7CE;
|
||||
}
|
||||
|
||||
.input-caption-select {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 140%;
|
||||
/* or 20px */
|
||||
|
||||
|
||||
/* Button_3 */
|
||||
margin-top: 12px;
|
||||
color: #73788C;
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
|
||||
import './CalculatorComponent.css'
|
||||
import { useEffect, useState } from "react";
|
||||
import { calcSlice } from "../../store/reducers/calcSlice";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
|
||||
import { InputSelect } from "./components/InputSelect/InputSelect";
|
||||
import { InputNumber } from "./components/InputNumber/InputNumber";
|
||||
import { AveragePriceApartment } from "./components/AveragePriceApartment/AveragePriceApartment";
|
||||
import { AverageSquareApartment } from "./components/AverageSquareApartment/AverageSquareApartment";
|
||||
import { ConsultationReserv } from "./components/ConsultationReserv/ConsultationReserv";
|
||||
import { Sales } from "./components/Sales/Sales";
|
||||
import { calculationSlice } from "store/reducers/calculationSlice";
|
||||
|
||||
import { ResultBlock } from "./components/ResultBlock/ResultBlock";
|
||||
import { InputNumberSquare } from './components/InputNumberSquare/InputNumberSquare';
|
||||
import { InputNumberConsultation } from './components/InputNumberConsultation/InputNumberConsultation';
|
||||
|
||||
const INITIAL_REGION = "e5b7edfb-17ec-475f-8631-bc796ad19909";
|
||||
|
||||
export const CalculatorComponent = ({ }) => {
|
||||
const [result, setResult] = useState((false))
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const { handleSelectRegion, handleOptions, handleValue } = calcSlice.actions;
|
||||
const { selectedRegion, filteredList, squareRC, consultation, squareApartment, priceAvarage } = useSelector(
|
||||
(state) => state.calcReducer
|
||||
);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(handleSelectRegion(INITIAL_REGION));
|
||||
dispatch(handleOptions());
|
||||
dispatch(
|
||||
handleCalculation({
|
||||
squareApartment: squareApartment,
|
||||
priceAvarage: priceAvarage,
|
||||
squareRC: squareRC,
|
||||
consultation: consultation,
|
||||
})
|
||||
);
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const handleSelect = (element) => {
|
||||
dispatch(handleSelectRegion(element.id));
|
||||
};
|
||||
const { handleCalculation } = calculationSlice.actions;
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(
|
||||
handleCalculation({
|
||||
squareApartment: squareApartment,
|
||||
priceAvarage: priceAvarage,
|
||||
squareRC: squareRC,
|
||||
consultation: consultation,
|
||||
})
|
||||
);
|
||||
}, [consultation, squareRC, priceAvarage, squareApartment]);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<section className='calculator'>
|
||||
<div className="calculator-layout">
|
||||
<div className="input-container-main">
|
||||
<div className='input-col-contianer'>
|
||||
<span className='input-caption'>Регион</span>
|
||||
<InputSelect
|
||||
option={filteredList}
|
||||
handleSelect={handleSelect}
|
||||
selectedValue={selectedRegion}
|
||||
></InputSelect>
|
||||
<div className="input-caption-select ">
|
||||
Данные будут установлены в соответсвии со средними показателями по
|
||||
выбранному региону.
|
||||
</div>
|
||||
</div>
|
||||
<InputNumberSquare handleState={handleValue} number={squareRC}></InputNumberSquare>
|
||||
<InputNumberConsultation number={consultation}></InputNumberConsultation>
|
||||
<AverageSquareApartment></AverageSquareApartment>
|
||||
<AveragePriceApartment></AveragePriceApartment>
|
||||
</div>
|
||||
<div className="input-container-second">
|
||||
<ConsultationReserv result={result}></ConsultationReserv>
|
||||
<Sales result={result}></Sales>
|
||||
<ResultBlock setResult={setResult} result={result}></ResultBlock>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
);
|
||||
};
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
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 = "priceAvarage";
|
||||
const min = 30000;
|
||||
const max = 200000;
|
||||
const large = true
|
||||
|
||||
return ( <div className="container">
|
||||
<span className="input-caption">Средняя стоимость 1 м2</span>
|
||||
<InputComponent
|
||||
isDisabled={false}
|
||||
min={min}
|
||||
large={large}
|
||||
max={max}
|
||||
name={name}
|
||||
inputClass={"input_type_one"}
|
||||
value={priceAvarage}
|
||||
></InputComponent>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
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 = 201;
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<span className="input-caption">Средняя площадь квартиры</span>
|
||||
<InputComponent
|
||||
isDisabled={false}
|
||||
min={min}
|
||||
max={max}
|
||||
name={name}
|
||||
inputClass={"input_type_one"}
|
||||
value={squareApartment}
|
||||
></InputComponent>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+27
@@ -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>
|
||||
|
||||
)
|
||||
}
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
import { InputComponent } from "../InputComponent/InputComponent";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
|
||||
export const ConsultationReserv = ({result}) => {
|
||||
|
||||
|
||||
const { reserved, reservedDefalut } = useSelector(
|
||||
(state) => state.calculationReducer
|
||||
);
|
||||
|
||||
|
||||
|
||||
const name = "consultationReserv";
|
||||
const min = 1;
|
||||
const max = 101;
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<span className="caption-input_type_two">Консультации, закончившиеся бронью</span>
|
||||
<InputComponent
|
||||
isDisabled={true}
|
||||
min={min}
|
||||
max={max}
|
||||
name={name}
|
||||
inputClass={'input_type_two'}
|
||||
value={result ? Math.round(reserved) : Math.round(reservedDefalut)}
|
||||
></InputComponent>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
</>
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
.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 {
|
||||
font-family: 'Inter';
|
||||
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 120%;
|
||||
/* or 19px */
|
||||
|
||||
/* Landing/Blue/Default */
|
||||
|
||||
color: #C5C7CE;
|
||||
}
|
||||
|
||||
.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_disabled {
|
||||
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_disabled::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.input_type_disabled::-webkit-slider-thumb {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
.input_type_two {
|
||||
-webkit-appearance: none;
|
||||
background: #888888;
|
||||
border-radius: 2px;
|
||||
height: 28px;
|
||||
cursor: auto;
|
||||
background-image: linear-gradient(#798FFF, #798FFF);
|
||||
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 {
|
||||
visibility: hidden;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.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: #798FFF;
|
||||
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 */
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
color: #f7f7f7;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.number-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.edit-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
import "./InputComponent.css";
|
||||
import edit from "./edit.svg";
|
||||
import { useEffect, useState, useRef } 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,
|
||||
isDisabled
|
||||
}) => {
|
||||
const dispatch = useDispatch();
|
||||
const { handleValue } = calcSlice.actions;
|
||||
const [valid, setValid] = useState(false);
|
||||
const [valueInput, setValueInput] = useState(value);
|
||||
const [disabled, setDisabled] = useState(false);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
setValueInput(value);
|
||||
}, [value]);
|
||||
|
||||
const handleNumber = (number) => {
|
||||
console.log(number, 'test')
|
||||
if (!number) {
|
||||
return;
|
||||
}
|
||||
const num = Number(number.replace(/ /g, ""));
|
||||
return num;
|
||||
};
|
||||
|
||||
const handleTotalValues = (value, name) => {
|
||||
const toNum = parseInt(value);
|
||||
dispatch(handleValue({ name: name, value: toNum }));
|
||||
};
|
||||
|
||||
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) => {
|
||||
console.log('value', value)
|
||||
|
||||
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) => {
|
||||
setDisabled(false);
|
||||
const { name, value } = e.target;
|
||||
const number = handleNumber(value);
|
||||
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
|
||||
disabled={!disabled}
|
||||
className="number-input"
|
||||
decimalsLimit={3}
|
||||
allowNegativeValue={false}
|
||||
allowDecimals={false}
|
||||
groupSeparator={" "}
|
||||
style={{width: "100%"}}
|
||||
min={min}
|
||||
max={max + 1}
|
||||
name={name}
|
||||
value={valueInput}
|
||||
onBlur={(e) => handleFocusLeft(e)}
|
||||
onValueChange={(value, name) => handleOnValueChange(value, name)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="input-container">
|
||||
<input
|
||||
style={{
|
||||
backgroundSize: handleStyle(),
|
||||
}}
|
||||
type="range"
|
||||
className={inputClass}
|
||||
name={name}
|
||||
disabled={isDisabled}
|
||||
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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -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>
|
||||
|
After Width: | Height: | Size: 522 B |
@@ -0,0 +1,57 @@
|
||||
.input-number {
|
||||
width: 100%;
|
||||
font-family: "GilroyWebRegular";
|
||||
font-style: normal;
|
||||
box-sizing: border-box;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 120%;
|
||||
background: #23242A;
|
||||
border-radius: 2px;
|
||||
color: #ebebeb;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.input_type_disabled {
|
||||
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_disabled::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.input_type_disabled::-webkit-slider-thumb {
|
||||
visibility: hidden;
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
import "./InputNumber.css";
|
||||
import CurrencyInput from "react-currency-input-field";
|
||||
import { calcSlice } from "../../../../store/reducers/calcSlice";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { useState } from "react";
|
||||
|
||||
export const InputNumber = ({ number, min, max, name }) => {
|
||||
const [valid, setValid] = useState(false);
|
||||
const [valueInput, setValueInput] = useState(number);
|
||||
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const { handleValue } = calcSlice.actions;
|
||||
|
||||
const handleTotalValues = (value, name) => {
|
||||
const toNum = parseInt(value);
|
||||
dispatch(handleValue({ name: name, value: toNum }));
|
||||
};
|
||||
|
||||
const handleValidity = (number) => {
|
||||
if (!(number < max && number > min && number !== 0)) {
|
||||
setValid(false);
|
||||
return false;
|
||||
} else {
|
||||
setValid(true);
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
const handleNumber = (number) => {
|
||||
if (!number) {
|
||||
return;
|
||||
}
|
||||
const num = Number(number.replace(/ /g, ""));
|
||||
return num;
|
||||
};
|
||||
|
||||
const handleOnValueChange = (value, name) => {
|
||||
const number = handleNumber(value);
|
||||
setValueInput(number);
|
||||
|
||||
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);
|
||||
if (number === 0 && number === undefined && number === '') {
|
||||
handleTotalValues(min, name);
|
||||
return;
|
||||
} else {
|
||||
if (!valid) {
|
||||
if (number <= min) {
|
||||
handleTotalValues(min, name);
|
||||
setValueInput(min);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
<CurrencyInput
|
||||
onBlur={(e) => handleFocusLeft(e)}
|
||||
value={valueInput}
|
||||
onValueChange={(value, name) => handleOnValueChange(value, name)}
|
||||
className="input-number"
|
||||
name={name}
|
||||
decimalSeparator=" "
|
||||
/>
|
||||
);
|
||||
};
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
import { InputNumber } from "../InputNumber/InputNumber"
|
||||
|
||||
export const InputNumberConsultation = ({ number }) => {
|
||||
const min = 1
|
||||
const max = 100000
|
||||
const name = "consultation"
|
||||
return (
|
||||
<div className="input-col-contianer">
|
||||
<span className="input-caption">
|
||||
Очных консультаций в месяц
|
||||
</span>
|
||||
<InputNumber name={name} number={number} min={min} max={max} />
|
||||
</div>)
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { InputNumber } from "../InputNumber/InputNumber"
|
||||
|
||||
export const InputNumberSquare = ({ number }) => {
|
||||
const min = 1500;
|
||||
const max = 1000000;
|
||||
const name = 'squareRC'
|
||||
|
||||
return (
|
||||
<div className="input-col-contianer">
|
||||
<span className="input-caption">
|
||||
Кв. м жилья в жилом комплексе
|
||||
</span>
|
||||
<InputNumber name={name} number={number} min={min} max={max} />
|
||||
</div>)
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.3999 9.50002L12.4 16.5L5.39999 9.50002" stroke="#F2F2F2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 239 B |
@@ -0,0 +1,154 @@
|
||||
.select {
|
||||
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";
|
||||
width: 100%;
|
||||
border: none;
|
||||
color: #ebebeb;
|
||||
height: 57px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(35, 36, 42, 1);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.select:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.icon-select {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 13px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.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(35, 36, 42, 1);
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.select-container {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.option-container {
|
||||
z-index: 99;
|
||||
height: auto;
|
||||
background: #141414;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-height: 256px;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.option-container::-webkit-scrollbar-track {
|
||||
background: #393c46;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
.option-container::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.option-container::-webkit-scrollbar-thumb {
|
||||
background: #2b5ec6;
|
||||
border-radius: 8px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.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: 14.4px;
|
||||
line-height: 130%;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
/* Landing/LightGray */
|
||||
|
||||
color: #888888;
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { calcSlice } from "../../../../store/reducers/calcSlice";
|
||||
import { useDispatch } from "react-redux";
|
||||
import icon from "./Chevron.svg";
|
||||
import { motion } from "framer-motion";
|
||||
import "./InputSelect.css";
|
||||
export const InputSelect = ({ handleSelect, selectedValue, option }) => {
|
||||
const dispatch = useDispatch();
|
||||
const { handleSearch, handleOptions } = calcSlice.actions;
|
||||
|
||||
const divInput = useRef();
|
||||
const [show, setShow] = useState(false);
|
||||
const [text, setText] = useState("");
|
||||
|
||||
const transition = { duration: 0.3, ease: "easeOut" };
|
||||
|
||||
const iconAnimation = {
|
||||
open: {
|
||||
transform: "rotate(180deg)",
|
||||
},
|
||||
closed: { transform: "rotate(0deg)" },
|
||||
};
|
||||
const handleSelectRegion = (i) => {
|
||||
handleSelect(i);
|
||||
closeDropDown();
|
||||
};
|
||||
|
||||
const closeDropDown = () => {
|
||||
setShow(false);
|
||||
};
|
||||
|
||||
const handleShow = ({}) => {
|
||||
if (!show) {
|
||||
setShow(true);
|
||||
} else {
|
||||
closeDropDown();
|
||||
setText("");
|
||||
}
|
||||
};
|
||||
|
||||
const onSearch = (e) => {
|
||||
setText(e.target.value);
|
||||
dispatch(handleSearch({ query: e.target.value }));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleClose = (e) => {
|
||||
dispatch(handleOptions());
|
||||
setText("");
|
||||
if (e.target !== divInput.current) {
|
||||
closeDropDown();
|
||||
}
|
||||
};
|
||||
document.addEventListener("click", handleClose);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("click", handleClose);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div style={{ position: "relative" }} className="">
|
||||
<motion.img
|
||||
transition={transition}
|
||||
variants={iconAnimation}
|
||||
animate={show ? "open" : "closed"}
|
||||
className="icon-select"
|
||||
src={icon}
|
||||
></motion.img>
|
||||
<div onClick={handleShow} className="select-container">
|
||||
<input
|
||||
ref={divInput}
|
||||
type="text"
|
||||
onChange={(e) => onSearch(e)}
|
||||
value={show ? text : selectedValue.name}
|
||||
placeholder={!show ? "" : selectedValue.name}
|
||||
className="select"
|
||||
></input>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -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 {
|
||||
}
|
||||
|
||||
*/
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,144 @@
|
||||
.result-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.rub-container {}
|
||||
|
||||
.numbers-container {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.result-block {
|
||||
height: 150px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 46px;
|
||||
}
|
||||
|
||||
.result-number {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 54px;
|
||||
line-height: 100%;
|
||||
/* identical to box height, or 58px */
|
||||
margin: 0;
|
||||
color: #219653;
|
||||
}
|
||||
|
||||
.result-caption {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
line-height: 120%;
|
||||
/* identical to box height, or 29px */
|
||||
margin: 0;
|
||||
color: #219653;
|
||||
}
|
||||
|
||||
.result-number_one {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 100%;
|
||||
/* identical to box height, or 24px */
|
||||
|
||||
/* Gray/Accent */
|
||||
|
||||
color: #393c46;
|
||||
}
|
||||
|
||||
.result-caption_one {
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 10px;
|
||||
line-height: 120%;
|
||||
/* identical to box height, or 12px */
|
||||
margin-bottom: 6px;
|
||||
/* Gray/Accent */
|
||||
|
||||
color: #393c46;
|
||||
}
|
||||
|
||||
.result-diff-caption {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
/* or 20px */
|
||||
|
||||
/* White */
|
||||
|
||||
color: #f7f7f7;
|
||||
}
|
||||
|
||||
.diff {
|
||||
background: linear-gradient(44.34deg, #D375FF 17.64%, #798FFF 73.73%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-weight: 600;
|
||||
text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.caption-off {
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 140%;
|
||||
color: #f7f7f7;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.title-result {
|
||||
font-weight: 400;
|
||||
font-size: 28px;
|
||||
line-height: 130%;
|
||||
/* or 36px */
|
||||
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.button-result {
|
||||
padding: 16px 40px 14px;
|
||||
|
||||
width: 315px;
|
||||
height: 55px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 125%;
|
||||
/* identical to box height, or 20px */
|
||||
|
||||
letter-spacing: 0.01em;
|
||||
font-feature-settings: "tnum" on, "lnum" on;
|
||||
|
||||
/* Landing/White */
|
||||
|
||||
color: #ebebeb;
|
||||
cursor: pointer;
|
||||
/* Inside auto layout */
|
||||
border-radius: 2px;
|
||||
border: none;
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.button_on {
|
||||
transition: background ease-in 0.2s;
|
||||
background: #2b5ec6;
|
||||
}
|
||||
|
||||
.button_off {
|
||||
transition: background ease-in 0.2s;
|
||||
|
||||
background: #393c46;
|
||||
}
|
||||
@@ -0,0 +1,239 @@
|
||||
import "./ResultBlock.css";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useEffect, useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
export const ResultBlock = ({result, setResult}) => {
|
||||
const { timeUpdated, timeDefalut, priceDefault, priceUpdated } = useSelector(
|
||||
(state) => state.calculationReducer
|
||||
);
|
||||
|
||||
console.log(timeDefalut, timeUpdated)
|
||||
|
||||
const [showText, setShowText] = useState(false)
|
||||
|
||||
const transition = { duration: 0.35, ease: "easeIn" };
|
||||
|
||||
const colorAnimationValue = {
|
||||
open: { color: "#D375FF", fontSize: "56px", marginRight: "8px" },
|
||||
closed: { color: "#393c46", fontSize: "18px", marginRight: "4px" },
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const colorAnimationCaption = {
|
||||
open: { color: "#D375FF", fontSize: "18px" },
|
||||
closed: { color: "#393c46", fontSize: "12px" },
|
||||
};
|
||||
|
||||
const colorAnimationValueGreen = {
|
||||
open: { color: "#219653", fontSize: "56px", marginRight: "8px" },
|
||||
closed: { color: "#393c46", fontSize: "18px", marginRight: "4px" },
|
||||
};
|
||||
|
||||
const colorAnimationCaptionGreen = {
|
||||
open: { color: "#219653", fontSize: "18px" },
|
||||
closed: { color: "#393c46", fontSize: "12px" },
|
||||
};
|
||||
|
||||
const handleMouthPostifx = (num) => {
|
||||
num = num % 100;
|
||||
|
||||
if (num > 19) {
|
||||
num = num % 10;
|
||||
}
|
||||
|
||||
switch (num) {
|
||||
case 1:
|
||||
return 0;
|
||||
|
||||
case 2:
|
||||
case 3:
|
||||
case 4:
|
||||
return 1;
|
||||
|
||||
default:
|
||||
return 2;
|
||||
}
|
||||
};
|
||||
|
||||
const handleMounth = (num, type) => {
|
||||
const monthesPostfixes = ["месяц", "месяца", "месяцев"];
|
||||
|
||||
let postfix = handleMouthPostifx(num);
|
||||
let value1 = monthesPostfixes[postfix];
|
||||
|
||||
return handleNode(num, value1, type);
|
||||
};
|
||||
|
||||
const shortenNumRu = (num, type) => {
|
||||
console.log(num)
|
||||
if (isNaN(num)) throw new Error(num + " is not a Number!");
|
||||
let currency = {
|
||||
0: "",
|
||||
1: "тыс. руб.",
|
||||
2: "млн. руб",
|
||||
3: "млрд. руб",
|
||||
};
|
||||
let thousands = Math.floor((("" + num).length - 1) / 3);
|
||||
let coef = 1000 ** thousands;
|
||||
|
||||
let value = (num / coef).toFixed(1);
|
||||
let value1 = currency[thousands];
|
||||
|
||||
return handleNode(value, value1, type);
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleNode = (value, value1, type) => {
|
||||
if (type === 1) {
|
||||
return (
|
||||
<>
|
||||
<AnimatePresence initial={false}>
|
||||
{result && (<> <motion.span
|
||||
key={1}
|
||||
transition={transition}
|
||||
variants={colorAnimationValueGreen}
|
||||
animate={result ? "open" : "closed"}
|
||||
className="result-number_one"
|
||||
>
|
||||
{value}
|
||||
</motion.span>
|
||||
<motion.span
|
||||
key={2}
|
||||
|
||||
transition={transition}
|
||||
variants={colorAnimationCaptionGreen}
|
||||
animate={result ? "open" : "closed"}
|
||||
className="result-caption_one"
|
||||
>
|
||||
{value1}
|
||||
</motion.span>
|
||||
</>)}
|
||||
</AnimatePresence>
|
||||
|
||||
</>
|
||||
);
|
||||
} else if (type === 0) {
|
||||
return (
|
||||
<>
|
||||
<motion.span
|
||||
initial={false}
|
||||
transition={transition}
|
||||
variants={colorAnimationValue}
|
||||
animate={!result ? "open" : "closed"}
|
||||
className="result-number_one"
|
||||
>
|
||||
{value}
|
||||
</motion.span>
|
||||
<motion.span
|
||||
initial={false}
|
||||
transition={transition}
|
||||
variants={colorAnimationCaption}
|
||||
animate={!result ? "open" : "closed"}
|
||||
className="result-caption_one"
|
||||
>
|
||||
{value1}
|
||||
</motion.span>
|
||||
</>
|
||||
);
|
||||
} else if (type === 3) {
|
||||
return (
|
||||
<span className="result-diff-caption">
|
||||
На <span className="diff">{`${value} ${value1}`}</span> вы сократили
|
||||
срок реализации проекта
|
||||
</span>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<span className="result-diff-caption">
|
||||
На <span className="diff">{`${value} ${value1}`}</span> в месяц вы
|
||||
заработали больше с помощью нашего инструмента продаж
|
||||
</span>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex-container">
|
||||
<span className="title-result">Результаты расчета</span>
|
||||
<div className="result-block" style={!showText ? { justifyContent: 'space-between' } : { justifyContent: "space-between" }}>
|
||||
<div className="result-container">
|
||||
<div style={!result ? { gap: "0" } : { gap: "16px" }} className="numbers-container">
|
||||
<div>
|
||||
{handleMounth(Math.round(timeUpdated), 1)}
|
||||
</div>
|
||||
<div
|
||||
style={result ? { paddingBottom: "6px" } : { paddingBottom: "0px" }}
|
||||
className="padding"
|
||||
>
|
||||
{handleMounth(Math.round(timeDefalut), 0)}
|
||||
</div>
|
||||
</div>
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
{!result && (<motion.div key={3} initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={transition}
|
||||
exit={{ opacity: 0 }}
|
||||
className="caption-off">На реализацию проекта</motion.div>)}
|
||||
|
||||
{result && (<motion.div key={4} initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={transition}
|
||||
exit={{ opacity: 0 }}>
|
||||
{handleMounth(Math.floor(timeDefalut - timeUpdated), 4)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
</div>
|
||||
<div className="result-container">
|
||||
<div style={!result ? { gap: "0" } : { gap: "16px" }}
|
||||
className="numbers-container">
|
||||
<div
|
||||
className="rub-container"
|
||||
>
|
||||
{shortenNumRu(Math.round(priceUpdated), 1)}
|
||||
</div>
|
||||
<div
|
||||
key={2}
|
||||
style={result ? { paddingBottom: "6px" } : { paddingBottom: "0px" }}
|
||||
className="rub-container"
|
||||
>
|
||||
{shortenNumRu(Math.round(priceDefault), 0)}
|
||||
</div>
|
||||
</div>
|
||||
<AnimatePresence mode="wait" initial={false}>
|
||||
{!result && (<motion.div transition={transition}
|
||||
onAnimationComplete={definition => {
|
||||
setShowText(definition.opacity === 0 ? true : false)
|
||||
}}
|
||||
key={1} initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
className="caption-off">На реализацию проекта</motion.div>)}
|
||||
{result && (<motion.div transition={transition}
|
||||
key={2} initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
|
||||
{shortenNumRu(Math.floor(priceUpdated - priceDefault), 4)}
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
className={
|
||||
result ? "button-result button_on" : "button-result button_off"
|
||||
}
|
||||
onClick={() => setResult((prev) => !prev)}
|
||||
>
|
||||
{!result ? "Использовать инструмент" : "Отключить инструмент"}
|
||||
</button>
|
||||
</div >
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,32 @@
|
||||
import { InputComponent } from "../InputComponent/InputComponent";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
|
||||
export const Sales = ({ result }) => {
|
||||
|
||||
|
||||
const { sales, salesDefault } = useSelector(
|
||||
(state) => state.calculationReducer
|
||||
);
|
||||
|
||||
|
||||
const name = "sales";
|
||||
const min = 1;
|
||||
|
||||
const max = 100;
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<span className="caption-input_type_two">Продажи</span>
|
||||
<InputComponent
|
||||
isDisabled={true}
|
||||
min={min}
|
||||
max={max}
|
||||
name={name}
|
||||
inputClass={'input_type_two'}
|
||||
value={result ? Math.round(sales) : Math.round(salesDefault)}
|
||||
></InputComponent>
|
||||
</div>
|
||||
|
||||
)
|
||||
}
|
||||
@@ -5,7 +5,7 @@ import {zero, counters, precentage} from 'utils/utils'
|
||||
export const CounterComponent = () => {
|
||||
|
||||
|
||||
return (<section className='section-counter'>
|
||||
return (<section className='section-counter section-container'>
|
||||
<div className="text-row-container">
|
||||
<h2 className="title">Эффективность инстумента <br></br> продаж в цифрах</h2>
|
||||
<p className="paragraph">Мы собрали статистику за 10 лет работы <br></br>
|
||||
@@ -16,7 +16,7 @@ export const CounterComponent = () => {
|
||||
<Counter from={i.from} to={i.to} text={i.text} precentage={i.precentage}></Counter>
|
||||
))}
|
||||
</div>
|
||||
<button className='button-primary'>
|
||||
<button className='button-primary button-primary-no-icon'>
|
||||
<span>Заказать решение</span>
|
||||
</button>
|
||||
</section>)
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
footer {
|
||||
padding: 160px 240px 72px;
|
||||
background: #1C1D21;
|
||||
|
||||
}
|
||||
|
||||
.footer-title {
|
||||
font-size: 64px;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
export const Footer = ({ }) => {
|
||||
<footer>
|
||||
<h3 style={{ marginBottom: "32px" }} className="footer-title">Свяжитесь с нами</h3>
|
||||
<p>Хотите увеличить конверсию?
|
||||
Давайте обсудим детали!</p>
|
||||
<form className="footer-form">
|
||||
<div className="form-row">
|
||||
<div className="for-col">
|
||||
<span>Имя Фамилия*</span>
|
||||
<input type='text'></input>
|
||||
<span>Компания</span>
|
||||
<input type='text'></input>
|
||||
</div>
|
||||
<div className="form-col">
|
||||
<span>Email*</span>
|
||||
<input type='email'></input>
|
||||
<span>Номер телефона</span>
|
||||
<input type='tel'></input>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-checkbox-container">
|
||||
<input type="checkbox"></input>
|
||||
<span className="">Нажимая на кнопку «Отправить заявку» вы соглашаетесь
|
||||
с Политикой конфиденциальности</span>
|
||||
</div>
|
||||
<button className="">Отправить заявку</button>
|
||||
</form>
|
||||
<div className="line"></div>
|
||||
</footer>
|
||||
}
|
||||
@@ -2,19 +2,60 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
height: 900px;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
left: 40%;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -100%;
|
||||
top: -25%;
|
||||
|
||||
}
|
||||
|
||||
.map-text-container {
|
||||
width: 40%;
|
||||
.container-map {
|
||||
max-width: 604px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.map-text-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding-right: 52px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.paragraph-map {
|
||||
font-family: 'GilroyWebRegular';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 24px;
|
||||
line-height: 120%;
|
||||
/* or 29px */
|
||||
|
||||
margin: 0;
|
||||
/* White */
|
||||
|
||||
color: #F2F2F2;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.subparagraph-map {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 140%;
|
||||
/* or 28px */
|
||||
|
||||
|
||||
/* Inactive */
|
||||
margin: 0;
|
||||
color: #C5C7CE;
|
||||
}
|
||||
@@ -1,13 +1,15 @@
|
||||
import './MapComponent.css'
|
||||
import { MapAnimation } from 'components/Map/Map'
|
||||
export const MapComponent = () => {
|
||||
return <section className="section-map">
|
||||
<div className="map-text-container">
|
||||
return <section className="section-map section-container">
|
||||
<div className="container-map">
|
||||
<h2 className="title">Инструмент продаж поможет вам продавать удаленно</h2>
|
||||
<p className="paragraph paragraph-map">Высокий уровень графики и полное погружение покупателя в процесс выбора квартиры.</p>
|
||||
<p className="subparagraph paragraph">Покажите все преимущества вашего жилого комплекса клиенту из любого конца мира. Местоположение и устройство значения не имеют. Нужен только интернет.</p>
|
||||
<div className='map-container'> <MapAnimation></MapAnimation>
|
||||
<div className='map-text-container'>
|
||||
<p className="paragraph-map">Высокий уровень графики и полное погружение покупателя в процесс выбора квартиры.</p>
|
||||
<p className="subparagraph-map">Покажите все преимущества вашего жилого комплекса клиенту из любого конца мира. Местоположение и устройство значения не имеют. Нужен только интернет.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='map-container'> <MapAnimation></MapAnimation>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
@@ -33,6 +33,6 @@ video {
|
||||
flex-direction: column;
|
||||
gap: 56px;
|
||||
width: 1200px;
|
||||
height: 60vh;
|
||||
height: 50vh;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import './VirtualTour.css'
|
||||
import glasses from 'images/Photo.png'
|
||||
|
||||
export const VirtualTour = () => {
|
||||
return (<section className="virtual-section">
|
||||
return (<section className="virtual-section section-container">
|
||||
<div className="virtual-container">
|
||||
<div className='virtual-image-container'>
|
||||
<img className='virtual-image' src={glasses} />
|
||||
@@ -11,7 +11,7 @@ export const VirtualTour = () => {
|
||||
<h2 className="title">Экскурсия в виртуальной реальности</h2>
|
||||
<p className="paragraph">Клиенту достаточно надеть шлем виртуальной реальности, чтобы прогуляться, оценить и ощутить пространство.
|
||||
Он полностью погружается в воссозданную реальность, чувствует удобство и уровень комфорта.</p>
|
||||
<button className="button-primary">
|
||||
<button className="button-primary button-primary-no-icon">
|
||||
<span>Записаться в шоу-рум</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.4242 11.6364L12.9393 7.57131C12.6193 6.69547 11.3806 6.69547 11.0607 7.57131L9.57576 11.6364M14.4242 11.6364H9.57576M14.4242 11.6364L15 13.0398M9.57576 11.6364L9 13.0398M11.6571 16.8182H3C2.44772 16.8182 2 16.3705 2 15.8182V4C2 3.44772 2.44772 3 3 3H21C21.5523 3 22 3.44772 22 4V15.8182C22 16.3705 21.5523 16.8182 21 16.8182H19.6667C19.1144 16.8182 18.6667 17.2659 18.6667 17.8182V19.9562C18.6667 20.7882 17.7099 21.2563 17.053 20.7457L12.2708 17.0286C12.0953 16.8922 11.8793 16.8182 11.6571 16.8182Z" stroke="#C5C7CE" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 677 B |
+9
-1
@@ -3,11 +3,19 @@ import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
import { setupStore } from "store/store";
|
||||
import { Provider } from "react-redux";
|
||||
|
||||
|
||||
const store = setupStore();
|
||||
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
<Provider store={store}>
|
||||
<App />
|
||||
</Provider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
import { regions } from "../../utils/array";
|
||||
|
||||
const initialState = {
|
||||
squareRC: 10000,
|
||||
squareApartment: 45,
|
||||
priceAvarage: 100000,
|
||||
consultation: 30,
|
||||
consultationReserv: 30,
|
||||
sales: 10,
|
||||
averagePriceApartment: null,
|
||||
regions: regions,
|
||||
selectedRegion: {},
|
||||
options: [],
|
||||
filteredList: [],
|
||||
averageNumberApartment: null,
|
||||
};
|
||||
|
||||
export const calcSlice = createSlice({
|
||||
name: "calc",
|
||||
initialState,
|
||||
reducers: {
|
||||
handleOptions(state) {
|
||||
const options = state.regions.filter((i) => i.name);
|
||||
return { ...state, options: options, filteredList: options };
|
||||
},
|
||||
|
||||
handleSearch(state, action) {
|
||||
const result = state.options.filter((i) => {
|
||||
const name = String(i.name).toLowerCase().trim();
|
||||
const userSearch = action.payload.query.toLowerCase().trim();
|
||||
return name.indexOf(userSearch) !== -1;
|
||||
});
|
||||
|
||||
console.log(action.payload.query);
|
||||
|
||||
return { ...state, filteredList: result };
|
||||
},
|
||||
handleSelectRegion(state, action) {
|
||||
const region = state.regions.find((i) => i.id === action.payload);
|
||||
return {
|
||||
...state,
|
||||
selectedRegion: region,
|
||||
priceAvarage: parseInt(region.price),
|
||||
};
|
||||
},
|
||||
handleValue(state, action) {
|
||||
console.log(action.payload.value, "ss");
|
||||
return { ...state, [action.payload.name]: action.payload.value };
|
||||
},
|
||||
handleInitalState(state, action) {
|
||||
return {
|
||||
...state,
|
||||
[action.payload.name]: initialState[action.payload.name],
|
||||
};
|
||||
},
|
||||
handleTotal(state) {
|
||||
console.log(state.priceAvarage, "price");
|
||||
state.averagePriceApartment = state.squareApartment * state.priceAvarage;
|
||||
state.averageNumberApartment = state.squareRC / state.squareApartment;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default calcSlice.reducer;
|
||||
@@ -0,0 +1,41 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
const initialState = {
|
||||
averageNumberApartment: 0,
|
||||
averagePriceApartment: 0,
|
||||
priceDefault: 0,
|
||||
priceUpdated: 0,
|
||||
timeDefalut: 0,
|
||||
timeUpdated: 0,
|
||||
consultationNumber: 0,
|
||||
defaultValue: 30,
|
||||
updatedValue: 45,
|
||||
sales: 0,
|
||||
salesDefault: 0,
|
||||
reservedDefalut: 0,
|
||||
reserved: 0,
|
||||
};
|
||||
|
||||
export const calculationSlice = createSlice({
|
||||
name: "calculation",
|
||||
initialState,
|
||||
reducers: {
|
||||
handleCalculation(state, action) {
|
||||
state.averagePriceApartment =
|
||||
action.payload.squareApartment * action.payload.priceAvarage;
|
||||
state.averageNumberApartment =
|
||||
action.payload.squareRC / action.payload.squareApartment;
|
||||
state.consultationNumber = action.payload.consultation;
|
||||
state.reserved = (state.consultationNumber / 100) * state.updatedValue;
|
||||
state.sales = (state.reserved / 100) * 20;
|
||||
state.timeUpdated = state.averageNumberApartment / state.sales;
|
||||
state.priceUpdated = state.sales * state.averagePriceApartment;
|
||||
state.reservedDefalut = (state.consultationNumber / 100) * state.defaultValue;
|
||||
state.salesDefault = (state.reservedDefalut / 100) * 10;
|
||||
state.timeDefalut = state.averageNumberApartment / state.salesDefault;
|
||||
state.priceDefault = state.salesDefault * state.averagePriceApartment;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default calculationSlice.reducer;
|
||||
@@ -0,0 +1,11 @@
|
||||
import { combineReducers, configureStore } from "@reduxjs/toolkit";
|
||||
import calcReducer from "./reducers/calcSlice";
|
||||
import calculationReducer from './reducers/calculationSlice'
|
||||
|
||||
const rootReducer = combineReducers({ calcReducer, calculationReducer});
|
||||
|
||||
export const setupStore = () => {
|
||||
return configureStore({
|
||||
reducer: rootReducer,
|
||||
});
|
||||
};
|
||||
@@ -83,6 +83,15 @@
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.button-primary-no-icon {
|
||||
padding: 16px 40px;
|
||||
box-sizing: border-box;
|
||||
height: 62px;
|
||||
border-radius: 40px;
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
transition: background 0.2s ease-in-out;
|
||||
background: linear-gradient(180deg, #798FFF -41.07%, #D375FF 100%);
|
||||
@@ -149,3 +158,28 @@
|
||||
gap: 32px;
|
||||
margin-bottom: 118px;
|
||||
}
|
||||
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: auto;
|
||||
-webkit-border-radius: auto;
|
||||
border-radius: auto;
|
||||
background: auto;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
-webkit-border-radius: auto;
|
||||
border-radius: auto;
|
||||
background: auto;
|
||||
-webkit-box-shadow: auto;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:window-inactive {
|
||||
background: auto;
|
||||
}
|
||||
|
||||
+1247
File diff suppressed because one or more lines are too long
@@ -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,
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user