\r\n \r\n 0\r\n ? \"clip clip-\" + this.props.styleId\r\n : \"d-none \")\r\n }\r\n >
\r\n\r\n {renderOverlay(this.props.styleId)}\r\n \r\n \r\n \r\n 0\r\n ? \"celestial-map-square\"\r\n : \"\")\r\n }\r\n ref={this._map}\r\n >
\r\n\r\n \r\n {/* Π·Π°Π³ΡΡΠ·ΠΊΠ° ΡΡΠΈΡΡΠ° */}\r\n \r\n \r\n font Π·Π°Π²Π°Π½ΡΠ°ΠΆΠ΅Π½Π½Ρ...\r\n \r\n
\r\n {/* */}\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n","import React, { Component } from \"react\";\r\n\r\nimport GooglePlacesAutocomplete from \"react-google-places-autocomplete\";\r\nimport \"react-google-places-autocomplete/dist/assets/index.css\";\r\nimport { geocodeByPlaceId, getLatLng } from \"react-google-places-autocomplete\";\r\nimport \"./editor-autocomplete.css\";\r\n\r\nimport i18n from \"i18next\";\r\n\r\nexport default class Autocomplete extends Component {\r\n constructor(props) {\r\n super(props);\r\n this._autocomplete = React.createRef();\r\n this.state = {};\r\n this._textInput = React.createRef();\r\n this.ukraineBounds = {\r\n west: 22.13722,\r\n east: 40.22806,\r\n north: 52.37917,\r\n south: 44.38722,\r\n };\r\n }\r\n\r\n getAddress(place) {\r\n let idx = 0;\r\n let city;\r\n let country;\r\n\r\n for (let address of place.address_components) {\r\n idx++;\r\n if (idx === 1) {\r\n city = address.long_name;\r\n }\r\n\r\n if (address.types.indexOf(\"country\") > -1) {\r\n country = address.long_name;\r\n }\r\n }\r\n return {\r\n city,\r\n country,\r\n };\r\n }\r\n\r\n getAddressAndCoordinates(place) {\r\n return getLatLng(place).then((latLng) => {\r\n console.log(\"Got coordinates: \", latLng);\r\n var address = this.getAddress(place);\r\n console.log(\"Got address: \", address);\r\n if (!address.country) {\r\n if (\r\n latLng.lat <= this.ukraineBounds.north &&\r\n latLng.lat >= this.ukraineBounds.south &&\r\n latLng.lng <= this.ukraineBounds.east &&\r\n latLng.lng >= this.ukraineBounds.west\r\n ) {\r\n address.country = \"Π£ΠΊΡΠ°ΡΠ½Π°\";\r\n try {\r\n var lang = i18n.language;\r\n if (lang === \"ru\") {\r\n address.country = \"Π£ΠΊΡΠ°ΠΈΠ½Π°\";\r\n }\r\n } catch (e) {\r\n (console.error || console.log).call(console, e.stack || e);\r\n }\r\n }\r\n }\r\n return {\r\n city: address.city,\r\n country: address.country,\r\n latitude: latLng.lat,\r\n longitude: latLng.lng,\r\n };\r\n });\r\n }\r\n handleAutocompleteSelect = (address) => {\r\n console.log(address);\r\n geocodeByPlaceId(address.place_id)\r\n .then((results) => {\r\n console.log(\"Got places:\", results);\r\n console.log(\"lat:\", results[0].geometry.location.lat());\r\n return this.getAddressAndCoordinates(results[0]);\r\n })\r\n .then((place) => {\r\n console.log(\"place:\", place);\r\n place.description = address.description;\r\n this.props.onPlaceChanged(place);\r\n })\r\n .catch((error) => console.error(\"Error\", error));\r\n };\r\n\r\n onClear = (e) => {\r\n try {\r\n this._autocomplete.current.changeValue(\"\");\r\n this._textInput.current.focus();\r\n } catch (e) {\r\n (console.error || console.log).call(console, e.stack || e);\r\n }\r\n };\r\n\r\n renderInput = (props) => {\r\n return (\r\n {this.props.text2}
\r\n\r\n
\r\n );\r\n };\r\n\r\n render() {\r\n var autocompletionRequest = {\r\n types: [\"(cities)\"],\r\n };\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React, { Component } from \"react\";\r\n\r\nimport Geolocation from \"react-geolocation\";\r\n\r\nexport default class GeolocationComponent extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {};\r\n }\r\n\r\n onSuccess = (position) => {\r\n console.log(\"Success\", position);\r\n var latitude = position.coords.latitude;\r\n var longitude = position.coords.longitude;\r\n this.props.onCoordinatesChanged(latitude, longitude);\r\n };\r\n\r\n render() {\r\n return \r\n
\r\n \r\n rest)(props)}\r\n class=\"form-control form-control-md u-datepicker-v1 rounded-0\"\r\n type=\"text\"\r\n />\r\n
\r\n );\r\n };\r\n\r\n onAllowTimePickerClick = () => {\r\n try {\r\n if (this.state.isTimePickerAllowed) {\r\n if (this.currentLocalDateTime) {\r\n this.currentLocalDateTime.set({\r\n hour: 0,\r\n minute: 0,\r\n second: 0,\r\n millisecond: 0,\r\n });\r\n }\r\n }\r\n var utcDateTime = this.getUtcTimeFromLocal();\r\n this.props.onDateChanged(\r\n this.currentLocalDateTime, utcDateTime,\r\n !this.state.isTimePickerAllowed\r\n );\r\n } catch (e) {\r\n (console.error || console.log).call(console, e.stack || e);\r\n }\r\n this.setState({ isTimePickerAllowed: !this.state.isTimePickerAllowed });\r\n };\r\n\r\n render() {\r\n console.log(\"Rendering editor-datepicker\");\r\n const { t, i18n } = this.props;\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n\r\n {/* \r\n \r\n \r\n \r\n
*/}\r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default withTranslation()(EditorDatePicker);\r\n","import React, { PureComponent } from 'react';\r\n\r\nimport Carousel from 'react-bootstrap/Carousel';\r\nimport './editor-materials.css';\r\nimport HyperModal from 'react-hyper-modal';\r\nimport { withTranslation } from 'react-i18next';\r\n\r\nclass EditorMaterials extends PureComponent {\r\n constructor(props) {\r\n super(props);\r\n const { t } = props;\r\n\r\n this.materials = [\r\n {\r\n id: 'ΠΡΠΌΠ°Π³Π°',\r\n name: t('ΠΠ°ΠΏΡΡ'),\r\n info: {\r\n name: t('ΠΡΡΠΊ Π½Π° ΠΏΠ°ΠΏΠ΅ΡΡ'),\r\n description: t(\r\n 'ΠΠΈ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΠΌΠΎ Π²ΠΈΡΠΎΠΊΠΎΡΠΊΡΡΠ½ΠΈΠΉ ΠΊΠΎΠ»ΡΠΎΡΠΎΠ²ΠΈΠΉ Π΄ΡΡΠΊ Π½Π° ΠΌΠ°ΡΠΎΠ²ΠΎΠΌΡ ΠΏΠ°ΠΏΠ΅ΡΡ Π²ΠΈΡΠΎΠΊΠΎΡ ΡΡΠ»ΡΠ½ΠΎΡΡΡ. Π’Π°ΠΊΠΈΠΉ Π΄ΡΡΠΊ Π·Π°Π±Π΅Π·ΠΏΠ΅ΡΡΡ ΡΠΎΡΠΎΡΠ΅Π°Π»ΡΡΡΠΈΡΠ½ΡΡΡΡ Ρ Π²ΠΈΡΠΎΠΊΡ Π΄Π΅ΡΠ°Π»ΡΠ·Π°ΡΡΡ ΠΏΠ»Π°ΠΊΠ°ΡΡΠ². ΠΠ»Π°ΠΊΠ°ΡΠΈ 30*40 ΠΏΠ΅ΡΠ΅ΡΠΈΠ»Π°ΡΠΌΠΎ Π² Π·Π°Ρ
ΠΈΡΠ½ΡΠΉ ΠΏΠ°ΠΏΡΡ, 40*50ΡΠΌ Ρ 50*70ΡΠΌ - Ρ ΡΡΠΈΠΊΡΡΠ½ΠΎΠΌΡ ΡΡΠ±ΡΡΡ.'\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + '/assets/img/paper1.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/paper2.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/paper3.jpg',\r\n ],\r\n },\r\n sizes: [\r\n {\r\n id: '21Ρ
30 ΡΠΌ',\r\n name: '21Ρ
30 ΡΠΌ',\r\n width: 210,\r\n height: 300,\r\n ratio: '7-10',\r\n price: 330,\r\n oldPrice: 410,\r\n hangers: [\r\n { id: 'ΠΠ΅Ρ', name: t('ΠΠ΅ΠΌΠ°Ρ'), price: 0 },\r\n {\r\n id: 'Π Π°ΠΌΠΊΠ°',\r\n name: t('Π Π°ΠΌΠΊΠ°'),\r\n price: 230,\r\n inStock: false,\r\n info: {\r\n name: t('Π Π°ΠΌΠΊΠ° Π΄Π»Ρ ΠΏΠ»Π°ΠΊΠ°ΡΡ'),\r\n description: t(\r\n 'ΠΠΈ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΠΌΠΎ ΡΠΊΡΡΠ½Ρ ΡΠΎΠ½ΠΊΡ ΠΏΠ»Π°ΡΡΠΈΠΊΠΎΠ²Ρ ΡΠ°ΠΌΠΊΠΈ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ»ΡΠΎΡΡ Π·Ρ ΡΠΊΠ»ΠΎΠΌ (Π½Π°ΡΡΡΠ°Π»ΡΠ½ΠΈΠΌ Π°Π±ΠΎ Π°ΠΊΡΠΈΠ»ΠΎΠ²ΠΈΠΌ) ΡΠ° Π·ΡΡΡΠ½ΠΈΠΌ ΠΏΡΠ΄Π²ΡΡΠΎΠΌ. Π’Π°ΠΊΡ ΡΠ°ΠΌΠΊΠΈ Π΄ΠΎΠ±ΡΠ΅ ΠΏΡΠ΄Ρ
ΠΎΠ΄ΡΡΡ Π΄ΠΎ Π±ΡΠ΄Ρ-ΡΠΊΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΡΠ½ΡΠ΅ΡβΡΡΡ. ΠΠ°Π΄Π½Ρ ΡΡΡΠ½ΠΊΠ° - ΠΠΠ Π· Π³Π°ΡΠΊΠ°ΠΌΠΈ'\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + '/assets/img/frame1.png',\r\n process.env.PUBLIC_URL + '/assets/img/frame2.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame3.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame4.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame5.jpg',\r\n ],\r\n },\r\n },\r\n ],\r\n },\r\n {\r\n id: '30Ρ
40 ΡΠΌ',\r\n name: '30Ρ
40 ΡΠΌ',\r\n width: 300,\r\n height: 400,\r\n ratio: '3-4',\r\n price: 430,\r\n oldPrice: 540,\r\n hangers: [\r\n { id: 'ΠΠ΅Ρ', name: t('ΠΠ΅ΠΌΠ°Ρ'), price: 0 },\r\n {\r\n id: 'Π Π°ΠΌΠΊΠ°',\r\n name: t('Π Π°ΠΌΠΊΠ°'),\r\n price: 260,\r\n inStock: false,\r\n info: {\r\n name: t('Π Π°ΠΌΠΊΠ° Π΄Π»Ρ ΠΏΠ»Π°ΠΊΠ°ΡΡ'),\r\n description: t(\r\n 'ΠΠΈ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΠΌΠΎ ΡΠΊΡΡΠ½Ρ ΡΠΎΠ½ΠΊΡ ΠΏΠ»Π°ΡΡΠΈΠΊΠΎΠ²Ρ ΡΠ°ΠΌΠΊΠΈ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ»ΡΠΎΡΡ Π·Ρ ΡΠΊΠ»ΠΎΠΌ (Π½Π°ΡΡΡΠ°Π»ΡΠ½ΠΈΠΌ Π°Π±ΠΎ Π°ΠΊΡΠΈΠ»ΠΎΠ²ΠΈΠΌ) ΡΠ° Π·ΡΡΡΠ½ΠΈΠΌ ΠΏΡΠ΄Π²ΡΡΠΎΠΌ. Π’Π°ΠΊΡ ΡΠ°ΠΌΠΊΠΈ Π΄ΠΎΠ±ΡΠ΅ ΠΏΡΠ΄Ρ
ΠΎΠ΄ΡΡΡ Π΄ΠΎ Π±ΡΠ΄Ρ-ΡΠΊΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΡΠ½ΡΠ΅ΡβΡΡΡ. ΠΠ°Π΄Π½Ρ ΡΡΡΠ½ΠΊΠ° - ΠΠΠ Π· Π³Π°ΡΠΊΠ°ΠΌΠΈ'\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + '/assets/img/frame1.png',\r\n process.env.PUBLIC_URL + '/assets/img/frame2.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame3.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame4.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame5.jpg',\r\n ],\r\n },\r\n },\r\n ],\r\n },\r\n {\r\n id: '40Ρ
50 ΡΠΌ',\r\n name: '40Ρ
50 ΡΠΌ',\r\n width: 400,\r\n height: 500,\r\n ratio: '4-5',\r\n price: 570,\r\n oldPrice: 710,\r\n hangers: [\r\n { id: 'ΠΠ΅Ρ', name: t('ΠΠ΅ΠΌΠ°Ρ'), price: 0 },\r\n {\r\n id: 'Π Π°ΠΌΠΊΠ°',\r\n name: t('Π Π°ΠΌΠΊΠ°'),\r\n price: 360,\r\n inStock: false,\r\n info: {\r\n name: t('Π Π°ΠΌΠΊΠ° Π΄Π»Ρ ΠΏΠ»Π°ΠΊΠ°ΡΡ'),\r\n description: t(\r\n 'ΠΠΈ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΠΌΠΎ ΡΠΊΡΡΠ½Ρ ΡΠΎΠ½ΠΊΡ ΠΏΠ»Π°ΡΡΠΈΠΊΠΎΠ²Ρ ΡΠ°ΠΌΠΊΠΈ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ»ΡΠΎΡΡ Π·Ρ ΡΠΊΠ»ΠΎΠΌ (Π½Π°ΡΡΡΠ°Π»ΡΠ½ΠΈΠΌ Π°Π±ΠΎ Π°ΠΊΡΠΈΠ»ΠΎΠ²ΠΈΠΌ) ΡΠ° Π·ΡΡΡΠ½ΠΈΠΌ ΠΏΡΠ΄Π²ΡΡΠΎΠΌ. Π’Π°ΠΊΡ ΡΠ°ΠΌΠΊΠΈ Π΄ΠΎΠ±ΡΠ΅ ΠΏΡΠ΄Ρ
ΠΎΠ΄ΡΡΡ Π΄ΠΎ Π±ΡΠ΄Ρ-ΡΠΊΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΡΠ½ΡΠ΅ΡβΡΡΡ. ΠΠ°Π΄Π½Ρ ΡΡΡΠ½ΠΊΠ° - ΠΠΠ Π· Π³Π°ΡΠΊΠ°ΠΌΠΈ'\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + '/assets/img/frame1.png',\r\n process.env.PUBLIC_URL + '/assets/img/frame2.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame3.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame4.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame5.jpg',\r\n ],\r\n },\r\n },\r\n ],\r\n },\r\n {\r\n id: '50Ρ
70 ΡΠΌ',\r\n name: '50Ρ
70 ΡΠΌ',\r\n width: 500,\r\n height: 700,\r\n ratio: '5-7',\r\n price: 770,\r\n oldPrice: 960,\r\n hangers: [\r\n { id: 'ΠΠ΅Ρ', name: t('ΠΠ΅ΠΌΠ°Ρ'), price: 0 },\r\n {\r\n id: 'Π Π°ΠΌΠΊΠ°',\r\n name: t('Π Π°ΠΌΠΊΠ°'),\r\n price: 560,\r\n inStock: false,\r\n info: {\r\n name: t('Π Π°ΠΌΠΊΠ° Π΄Π»Ρ ΠΏΠ»Π°ΠΊΠ°ΡΡ'),\r\n description: t(\r\n 'ΠΠΈ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΠΌΠΎ ΡΠΊΡΡΠ½Ρ ΡΠΎΠ½ΠΊΡ ΠΏΠ»Π°ΡΡΠΈΠΊΠΎΠ²Ρ ΡΠ°ΠΌΠΊΠΈ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ»ΡΠΎΡΡ Π·Ρ ΡΠΊΠ»ΠΎΠΌ (Π½Π°ΡΡΡΠ°Π»ΡΠ½ΠΈΠΌ Π°Π±ΠΎ Π°ΠΊΡΠΈΠ»ΠΎΠ²ΠΈΠΌ) ΡΠ° Π·ΡΡΡΠ½ΠΈΠΌ ΠΏΡΠ΄Π²ΡΡΠΎΠΌ. Π’Π°ΠΊΡ ΡΠ°ΠΌΠΊΠΈ Π΄ΠΎΠ±ΡΠ΅ ΠΏΡΠ΄Ρ
ΠΎΠ΄ΡΡΡ Π΄ΠΎ Π±ΡΠ΄Ρ-ΡΠΊΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΡΠ½ΡΠ΅ΡβΡΡΡ. ΠΠ°Π΄Π½Ρ ΡΡΡΠ½ΠΊΠ° - ΠΠΠ Π· Π³Π°ΡΠΊΠ°ΠΌΠΈ'\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + '/assets/img/frame1.png',\r\n process.env.PUBLIC_URL + '/assets/img/frame2.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame3.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame4.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame5.jpg',\r\n ],\r\n },\r\n },\r\n ],\r\n },\r\n ],\r\n },\r\n {\r\n id: 'ΠΠΠ₯',\r\n name: t('ΠΠ»Π°ΡΡΠΈΠΊ'),\r\n info: {\r\n name: t('ΠΡΡΠΊ Π½Π° ΠΠΠ₯'),\r\n description: t(\r\n 'ΠΠΠ₯ - Π»Π΅Π³ΠΊΠΎΠ²ΡΡΠ½ΠΈΠΉ Π»ΠΈΡΡ ΠΏΠ»Π°ΡΡΠΈΠΊΡ Π·Ρ Π²ΡΠΏΡΠ½Π΅Π½ΠΎΡ ΡΡΡΡΠΊΡΡΡΠΎΡ. ΠΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½Π° ΠΏΡΠ΄Π²ΡΡΡΠ²Π°ΡΠΈ Π±Π΅Π· ΡΠ°ΠΌΠΈ, ΠΎΡΠΊΡΠ»ΡΠΊΠΈ Π²ΡΠ½ Π΄ΠΎΡΡΠ°ΡΠ½ΡΠΎ ΡΡΠ»ΡΠ½ΠΈΠΉ Ρ Π½Π΅ ΡΠΊΡΡΡΡΡΡΡΡΡ. ΠΠ΅Π·ΠΊΠΎΡΡΠΎΠ²Π½ΠΎ ΠΌΠΎΠΆΠ΅ΠΌΠΎ Π½Π°ΠΊΠ»Π΅ΡΡΠΈ Π΄Π²ΠΎΡΡΠΎΡΠΎΠ½Π½ΡΠΉ ΡΠΊΠΎΡΡ, ΡΠΎΠ± ΠΊΡΡΠΏΠΈΡΠΈ Π΄ΠΎ ΡΡΡΠ½ΠΈ. Π’ΠΎΠ²ΡΠΈΠ½Π° - 3ΠΌΠΌ, Π°Π±ΠΎ 1ΠΌΠΌ (ΡΠΊΡΠΎ Π² ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΡ Π· ΡΠ°ΠΌΠΊΠΎΡ).\\nΠΠ΅Π·ΠΏΠ΅ΡΠ½ΠΈΠΉ Π΄Π»Ρ Π»ΡΠ΄ΠΈΠ½ΠΈ ΡΠ° Π½Π°Π²ΠΊΠΎΠ»ΠΈΡΠ½ΡΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π΄ΠΎΠ²ΠΈΡΠ°'\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + '/assets/img/plastic1.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/plastic2.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/plastic3.jpg',\r\n ],\r\n },\r\n sizes: [\r\n {\r\n id: '30Ρ
40 ΡΠΌ',\r\n name: '30Ρ
40 ΡΠΌ',\r\n width: 300,\r\n height: 400,\r\n ratio: '3-4',\r\n price: 590,\r\n oldPrice: 740,\r\n hangers: [\r\n { id: 'ΠΠ΅Ρ', name: t('ΠΠ΅ΠΌΠ°Ρ'), price: 0 },\r\n {\r\n id: 'ΠΠ΅Π½ΡΠ°',\r\n name: t('ΠΠ»Π΅ΠΉΠΊΠ° ΡΡΡΡΡΠΊΠ°'),\r\n price: 0,\r\n isDefault: true,\r\n info: {\r\n name: t('ΠΠ»Π΅ΠΉΠΊΠ° ΡΡΡΡΡΠΊΠ°'),\r\n description: t(\r\n 'Π§ΡΠΏΠΊΠΈΠΉ ΡΠΊΠΎΡΡ ΠΏΠΎ ΠΏΠ΅ΡΠΈΠΌΠ΅ΡΡΡ Π·Π²ΠΎΡΠΎΡΠ½ΠΎΡ ΡΡΠΎΡΠΎΠ½ΠΈ. ΠΠΎΠ±ΡΠ΅ ΡΡΠΈΠΌΠ°Ρ Π²Π°Π³Ρ, ΡΠΊΡΠΎ ΠΏΠΎΠ²Π΅ΡΡ
Π½Ρ Π½Π΅ ΠΌΠ°Ρ Π½Π°Π΄ΡΠΎ Π²ΠΈΡΠ°Π·Π½ΠΎΡ ΡΠ°ΠΊΡΡΡΠΈ.'\r\n ),\r\n images: [process.env.PUBLIC_URL + '/assets/img/plastic3.jpg'],\r\n },\r\n },\r\n {\r\n id: 'Π Π°ΠΌΠΊΠ°',\r\n name: t('Π Π°ΠΌΠΊΠ°'),\r\n price: 200,\r\n inStock: false,\r\n info: {\r\n name: t('Π Π°ΠΌΠΊΠ° Π΄Π»Ρ ΠΏΠ»Π°ΠΊΠ°ΡΡ'),\r\n description: t(\r\n 'ΠΠΈ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΠΌΠΎ ΡΠΊΡΡΠ½Ρ ΡΠΎΠ½ΠΊΡ ΠΏΠ»Π°ΡΡΠΈΠΊΠΎΠ²Ρ ΡΠ°ΠΌΠΊΠΈ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ»ΡΠΎΡΡ Π·Ρ ΡΠΊΠ»ΠΎΠΌ (Π½Π°ΡΡΡΠ°Π»ΡΠ½ΠΈΠΌ Π°Π±ΠΎ Π°ΠΊΡΠΈΠ»ΠΎΠ²ΠΈΠΌ) ΡΠ° Π·ΡΡΡΠ½ΠΈΠΌ ΠΏΡΠ΄Π²ΡΡΠΎΠΌ. Π’Π°ΠΊΡ ΡΠ°ΠΌΠΊΠΈ Π΄ΠΎΠ±ΡΠ΅ ΠΏΡΠ΄Ρ
ΠΎΠ΄ΡΡΡ Π΄ΠΎ Π±ΡΠ΄Ρ-ΡΠΊΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΡΠ½ΡΠ΅ΡβΡΡΡ. ΠΠ°Π΄Π½Ρ ΡΡΡΠ½ΠΊΠ° - ΠΠΠ Π· Π³Π°ΡΠΊΠ°ΠΌΠΈ'\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + '/assets/img/frame1.png',\r\n process.env.PUBLIC_URL + '/assets/img/frame2.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame3.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame4.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame5.jpg',\r\n ],\r\n },\r\n },\r\n /*{\r\n id: \"ΠΡΡΡΠΊΠΈ\",\r\n name: \"ΠΠ°ΡΠΊΠΈ\",\r\n price: 30,\r\n info: {\r\n name: \"ΠΠ°ΡΠΊΠΈ\",\r\n description:\r\n \"ΠΠ°ΡΠΊΠΈ Π½Π° Π·Π²ΠΎΡΠΎΡΠ½ΡΠΉ ΡΡΠΎΡΠΎΠ½Ρ. ΠΠ° Π²ΠΈΠΏΠ°Π΄ΠΎΠΊ, ΡΠΊΡΠΎ ΠΌΠ°ΡΡΠ΅ Π΄ΡΠΆΠ΅ ΡΠ°ΠΊΡΡΡΠ½Ρ ΠΏΠΎΠ²Π΅ΡΡ
Π½Ρ Ρ Π΄Π²ΠΎΡΡΠΎΡΠΎΠ½Π½ΡΠΎΠ³ΠΎ ΡΠΊΠΎΡΡΠ° Π½Π΅Π΄ΠΎΡΡΠ°ΡΠ½ΡΠΎ.\",\r\n images: [\"assets/img/plastic_hooks.jpg\"],\r\n },\r\n },*/\r\n ],\r\n },\r\n {\r\n id: '40Ρ
50 ΡΠΌ',\r\n name: '40Ρ
50 ΡΠΌ',\r\n width: 400,\r\n height: 500,\r\n ratio: '4-5',\r\n price: 790,\r\n oldPrice: 990,\r\n hangers: [\r\n { id: 'ΠΠ΅Ρ', name: t('ΠΠ΅ΠΌΠ°Ρ'), price: 0 },\r\n {\r\n id: 'ΠΠ΅Π½ΡΠ°',\r\n name: t('ΠΠ»Π΅ΠΉΠΊΠ° ΡΡΡΡΡΠΊΠ°'),\r\n price: 0,\r\n isDefault: true,\r\n info: {\r\n name: t('ΠΠ»Π΅ΠΉΠΊΠ° ΡΡΡΡΡΠΊΠ°'),\r\n description: t(\r\n 'Π§ΡΠΏΠΊΠΈΠΉ ΡΠΊΠΎΡΡ ΠΏΠΎ ΠΏΠ΅ΡΠΈΠΌΠ΅ΡΡΡ Π·Π²ΠΎΡΠΎΡΠ½ΠΎΡ ΡΡΠΎΡΠΎΠ½ΠΈ. ΠΠΎΠ±ΡΠ΅ ΡΡΠΈΠΌΠ°Ρ Π²Π°Π³Ρ, ΡΠΊΡΠΎ ΠΏΠΎΠ²Π΅ΡΡ
Π½Ρ Π½Π΅ ΠΌΠ°Ρ Π½Π°Π΄ΡΠΎ Π²ΠΈΡΠ°Π·Π½ΠΎΡ ΡΠ°ΠΊΡΡΡΠΈ.'\r\n ),\r\n images: [process.env.PUBLIC_URL + '/assets/img/plastic3.jpg'],\r\n },\r\n },\r\n {\r\n id: 'Π Π°ΠΌΠΊΠ°',\r\n name: t('Π Π°ΠΌΠΊΠ°'),\r\n price: 300,\r\n inStock: false,\r\n info: {\r\n name: t('Π Π°ΠΌΠΊΠ° Π΄Π»Ρ ΠΏΠ»Π°ΠΊΠ°ΡΡ'),\r\n description: t(\r\n 'ΠΠΈ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΠΌΠΎ ΡΠΊΡΡΠ½Ρ ΡΠΎΠ½ΠΊΡ ΠΏΠ»Π°ΡΡΠΈΠΊΠΎΠ²Ρ ΡΠ°ΠΌΠΊΠΈ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ»ΡΠΎΡΡ Π·Ρ ΡΠΊΠ»ΠΎΠΌ (Π½Π°ΡΡΡΠ°Π»ΡΠ½ΠΈΠΌ Π°Π±ΠΎ Π°ΠΊΡΠΈΠ»ΠΎΠ²ΠΈΠΌ) ΡΠ° Π·ΡΡΡΠ½ΠΈΠΌ ΠΏΡΠ΄Π²ΡΡΠΎΠΌ. Π’Π°ΠΊΡ ΡΠ°ΠΌΠΊΠΈ Π΄ΠΎΠ±ΡΠ΅ ΠΏΡΠ΄Ρ
ΠΎΠ΄ΡΡΡ Π΄ΠΎ Π±ΡΠ΄Ρ-ΡΠΊΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΡΠ½ΡΠ΅ΡβΡΡΡ. ΠΠ°Π΄Π½Ρ ΡΡΡΠ½ΠΊΠ° - ΠΠΠ Π· Π³Π°ΡΠΊΠ°ΠΌΠΈ'\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + '/assets/img/frame1.png',\r\n process.env.PUBLIC_URL + '/assets/img/frame2.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame3.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame4.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame5.jpg',\r\n ],\r\n },\r\n },\r\n // {\r\n // id: \"ΠΡΡΡΠΊΠΈ\",\r\n // name: \"ΠΠ°ΡΠΊΠΈ\",\r\n // price: 30,\r\n // info: {\r\n // name: \"ΠΠ°ΡΠΊΠΈ\",\r\n // description:\r\n // \"ΠΠ°ΡΠΊΠΈ Π½Π° Π·Π²ΠΎΡΠΎΡΠ½ΡΠΉ ΡΡΠΎΡΠΎΠ½Ρ. ΠΠ° Π²ΠΈΠΏΠ°Π΄ΠΎΠΊ, ΡΠΊΡΠΎ ΠΌΠ°ΡΡΠ΅ Π΄ΡΠΆΠ΅ ΡΠ°ΠΊΡΡΡΠ½Ρ ΠΏΠΎΠ²Π΅ΡΡ
Π½Ρ Ρ Π΄Π²ΠΎΡΡΠΎΡΠΎΠ½Π½ΡΠΎΠ³ΠΎ ΡΠΊΠΎΡΡΠ° Π½Π΅Π΄ΠΎΡΡΠ°ΡΠ½ΡΠΎ.\",\r\n // images: [\"assets/img/plastic_hooks.jpg\"],\r\n // },\r\n // },\r\n ],\r\n },\r\n {\r\n id: '50Ρ
70 ΡΠΌ',\r\n name: '50Ρ
70 ΡΠΌ',\r\n width: 500,\r\n height: 700,\r\n ratio: '5-7',\r\n price: 1150,\r\n oldPrice: 1440,\r\n hangers: [\r\n { id: 'ΠΠ΅Ρ', name: 'ΠΠ΅ΠΌΠ°Ρ', price: 0 },\r\n {\r\n id: t('ΠΠ΅Π½ΡΠ°'),\r\n name: t('ΠΠ»Π΅ΠΉΠΊΠ° ΡΡΡΡΡΠΊΠ°'),\r\n price: 0,\r\n isDefault: true,\r\n info: {\r\n name: t('ΠΠ»Π΅ΠΉΠΊΠ° ΡΡΡΡΡΠΊΠ°'),\r\n description: t(\r\n 'Π§ΡΠΏΠΊΠΈΠΉ ΡΠΊΠΎΡΡ ΠΏΠΎ ΠΏΠ΅ΡΠΈΠΌΠ΅ΡΡΡ Π·Π²ΠΎΡΠΎΡΠ½ΠΎΡ ΡΡΠΎΡΠΎΠ½ΠΈ. ΠΠΎΠ±ΡΠ΅ ΡΡΠΈΠΌΠ°Ρ Π²Π°Π³Ρ, ΡΠΊΡΠΎ ΠΏΠΎΠ²Π΅ΡΡ
Π½Ρ Π½Π΅ ΠΌΠ°Ρ Π½Π°Π΄ΡΠΎ Π²ΠΈΡΠ°Π·Π½ΠΎΡ ΡΠ°ΠΊΡΡΡΠΈ.'\r\n ),\r\n images: [process.env.PUBLIC_URL + '/assets/img/plastic3.jpg'],\r\n },\r\n },\r\n {\r\n id: 'Π Π°ΠΌΠΊΠ°',\r\n name: t('Π Π°ΠΌΠΊΠ°'),\r\n price: 400,\r\n inStock: false,\r\n info: {\r\n name: t('Π Π°ΠΌΠΊΠ° Π΄Π»Ρ ΠΏΠ»Π°ΠΊΠ°ΡΡ'),\r\n description: t(\r\n 'ΠΠΈ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΠΌΠΎ ΡΠΊΡΡΠ½Ρ ΡΠΎΠ½ΠΊΡ ΠΏΠ»Π°ΡΡΠΈΠΊΠΎΠ²Ρ ΡΠ°ΠΌΠΊΠΈ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ»ΡΠΎΡΡ Π·Ρ ΡΠΊΠ»ΠΎΠΌ (Π½Π°ΡΡΡΠ°Π»ΡΠ½ΠΈΠΌ Π°Π±ΠΎ Π°ΠΊΡΠΈΠ»ΠΎΠ²ΠΈΠΌ) ΡΠ° Π·ΡΡΡΠ½ΠΈΠΌ ΠΏΡΠ΄Π²ΡΡΠΎΠΌ. Π’Π°ΠΊΡ ΡΠ°ΠΌΠΊΠΈ Π΄ΠΎΠ±ΡΠ΅ ΠΏΡΠ΄Ρ
ΠΎΠ΄ΡΡΡ Π΄ΠΎ Π±ΡΠ΄Ρ-ΡΠΊΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΡΠ½ΡΠ΅ΡβΡΡΡ. ΠΠ°Π΄Π½Ρ ΡΡΡΠ½ΠΊΠ° - ΠΠΠ Π· Π³Π°ΡΠΊΠ°ΠΌΠΈ'\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + '/assets/img/frame1.png',\r\n process.env.PUBLIC_URL + '/assets/img/frame2.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame3.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame4.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/frame5.jpg',\r\n ],\r\n },\r\n },\r\n // {\r\n // id: \"ΠΡΡΡΠΊΠΈ\",\r\n // name: \"ΠΠ°ΡΠΊΠΈ\",\r\n // price: 30,\r\n // info: {\r\n // name: \"ΠΠ°ΡΠΊΠΈ\",\r\n // description:\r\n // \"ΠΠ°ΡΠΊΠΈ Π½Π° Π·Π²ΠΎΡΠΎΡΠ½ΡΠΉ ΡΡΠΎΡΠΎΠ½Ρ. ΠΠ° Π²ΠΈΠΏΠ°Π΄ΠΎΠΊ, ΡΠΊΡΠΎ ΠΌΠ°ΡΡΠ΅ Π΄ΡΠΆΠ΅ ΡΠ°ΠΊΡΡΡΠ½Ρ ΠΏΠΎΠ²Π΅ΡΡ
Π½Ρ Ρ Π΄Π²ΠΎΡΡΠΎΡΠΎΠ½Π½ΡΠΎΠ³ΠΎ ΡΠΊΠΎΡΡΠ° Π½Π΅Π΄ΠΎΡΡΠ°ΡΠ½ΡΠΎ.\",\r\n // images: [\"assets/img/plastic_hooks.jpg\"],\r\n // },\r\n // },\r\n ],\r\n },\r\n ],\r\n },\r\n {\r\n id: 'Π₯ΠΎΠ»ΡΡ',\r\n name: t('Π₯ΠΎΠ»ΡΡ'),\r\n info: {\r\n name: t('ΠΡΡΠΊ Π½Π° Ρ
ΠΎΠ»ΡΡΡ'),\r\n description: t(\r\n 'ΠΠΈ Π΄ΡΡΠΊΡΡΠΌΠΎ Π½Π° Π½Π°ΡΡΡΠ°Π»ΡΠ½ΠΎΠΌΡ Ρ
ΠΎΠ»ΡΡΡ Ρ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΠΌΠΎ Π³Π°Π»Π΅ΡΠ΅ΠΉΠ½Ρ Π½Π°ΡΡΠΆΠΊΡ Π½Π° Π΄Π΅ΡΠ΅Π²βΡΠ½ΠΈΠΉ ΠΏΡΠ΄ΡΠ°ΠΌΠ½ΠΈΠΊ. ΠΡΠΈ ΡΠ°ΠΊΡΠΉ Π½Π°ΡΡΠΆΡΡ Π·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½Π½Ρ Π·Π°Ρ
ΠΎΠ΄ΠΈΡΡ Π½Π° Π±ΠΎΠΊΠΎΠ²Ρ ΡΡΠΎΡΠΎΠ½ΠΈ Ρ
ΠΎΠ»ΡΡΡ Ρ Π·Π°Π³ΠΈΠ½Π°ΡΡΡΡΡ ΠΏΡΠ΄ ΠΏΡΠ΄ΡΠ°ΠΌΠ½ΠΈΠΊ. Π’Π°ΠΊΠΈΠΌ ΡΠΈΠ½ΠΎΠΌ Ρ
ΠΎΠ»ΡΡ ΡΡΠ΄ΠΎΠ²ΠΎ Π²ΠΈΠ³Π»ΡΠ΄Π°Ρ Π½Π° ΡΡΡΠ½Ρ Ρ Π½Π΅ ΠΏΠΎΡΡΠ΅Π±ΡΡ Π΄ΠΎΠ΄Π°ΡΠΊΠΎΠ²ΠΎΡ ΡΠ°ΠΌΠΈ.'\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + '/assets/img/canvas1.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/canvas2.jpg',\r\n process.env.PUBLIC_URL + '/assets/img/canvas3.jpg',\r\n ],\r\n },\r\n sizes: [\r\n {\r\n id: '30Ρ
40 ΡΠΌ',\r\n name: '30Ρ
40 ΡΠΌ',\r\n width: 300,\r\n height: 400,\r\n ratio: '3-4',\r\n price: 890,\r\n oldPrice: 1110,\r\n hangers: [\r\n {\r\n id: 'ΠΠ΅ΡΠ΅Π²ΡΠ½Π½ΡΠΉ ΠΏΠΎΠ΄ΡΠ°ΠΌΠ½ΠΈΠΊ',\r\n name: t('ΠΠ΅ΡΠ΅Π²βΡΠ½ΠΈΠΉ ΠΏΡΠ΄ΡΠ°ΠΌΠ½ΠΈΠΊ'),\r\n price: 0,\r\n isDefault: true,\r\n },\r\n ],\r\n },\r\n {\r\n id: '40Ρ
50 ΡΠΌ',\r\n name: '40Ρ
50 ΡΠΌ',\r\n width: 400,\r\n height: 500,\r\n ratio: '4-5',\r\n price: 1190,\r\n oldPrice: 1490,\r\n hangers: [\r\n {\r\n id: 'ΠΠ΅ΡΠ΅Π²ΡΠ½Π½ΡΠΉ ΠΏΠΎΠ΄ΡΠ°ΠΌΠ½ΠΈΠΊ',\r\n name: t('ΠΠ΅ΡΠ΅Π²βΡΠ½ΠΈΠΉ ΠΏΡΠ΄ΡΠ°ΠΌΠ½ΠΈΠΊ'),\r\n price: 0,\r\n isDefault: true,\r\n },\r\n ],\r\n },\r\n {\r\n id: '50Ρ
70 ΡΠΌ',\r\n name: '50Ρ
70 ΡΠΌ',\r\n width: 500,\r\n height: 700,\r\n ratio: '5-7',\r\n price: 1490,\r\n oldPrice: 1860,\r\n hangers: [\r\n {\r\n id: 'ΠΠ΅ΡΠ΅Π²ΡΠ½Π½ΡΠΉ ΠΏΠΎΠ΄ΡΠ°ΠΌΠ½ΠΈΠΊ',\r\n name: t('ΠΠ΅ΡΠ΅Π²βΡΠ½ΠΈΠΉ ΠΏΡΠ΄ΡΠ°ΠΌΠ½ΠΈΠΊ'),\r\n price: 0,\r\n isDefault: true,\r\n },\r\n ],\r\n },\r\n ],\r\n },\r\n ];\r\n\r\n this.state = {\r\n selectedMaterialId: props.initialSelectedMaterialId,\r\n selectedSizeId: props.initialSelectedSizeId,\r\n selectedHangerId: props.initialSelectedHangerId,\r\n isModalOpen: false,\r\n modalName: '',\r\n modalDescription: '',\r\n modalImages: [],\r\n };\r\n }\r\n\r\n riseUpdate = () => {\r\n console.log('recalculate price');\r\n\r\n try {\r\n var material = this.materials.find((material) => {\r\n return material.id === this.state.selectedMaterialId;\r\n });\r\n\r\n var size = material.sizes.find((size) => {\r\n return size.id === this.state.selectedSizeId;\r\n });\r\n\r\n let { price, ratio, width, height } = size;\r\n\r\n var hanger = size.hangers.find((h) => {\r\n return h.id === this.state.selectedHangerId;\r\n });\r\n\r\n price += hanger.price;\r\n\r\n var proposalHangerId = 'Π Π°ΠΌΠΊΠ°';\r\n var proposalHangerName = '';\r\n var proposalHangerPrice = 0;\r\n if (\r\n this.state.selectedMaterialId === 'ΠΡΠΌΠ°Π³Π°' &&\r\n this.state.selectedHangerId == 'ΠΠ΅Ρ'\r\n ) {\r\n var frameHanger = size.hangers.find((h) => {\r\n return h.id === proposalHangerId && h.inStock !== false;\r\n });\r\n if (frameHanger) {\r\n proposalHangerName = frameHanger.name;\r\n proposalHangerPrice = frameHanger.price;\r\n }\r\n }\r\n\r\n this.props.onChanged({\r\n selectedMaterialId: this.state.selectedMaterialId,\r\n selectedSizeId: this.state.selectedSizeId,\r\n selectedHangerId: this.state.selectedHangerId,\r\n selectedMaterialName: material.name,\r\n selectedHangerName: hanger.name,\r\n price,\r\n ratio,\r\n width,\r\n height,\r\n proposalHangerId,\r\n proposalHangerName,\r\n proposalHangerPrice,\r\n });\r\n } catch (e) {\r\n (console.error || console.log).call(console, e.stack || e);\r\n }\r\n };\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (\r\n this.state.selectedMaterialId !== prevState.selectedMaterialId ||\r\n this.state.selectedSizeId !== prevState.selectedSizeId ||\r\n this.state.selectedHangerId !== prevState.selectedHangerId\r\n ) {\r\n this.riseUpdate();\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.riseUpdate();\r\n }\r\n\r\n // useEffect(() => {\r\n // riseUpdate();\r\n // }, [selectedMaterialId, selectedSizeId, selectedHangerId]);\r\n\r\n onMaterialChanged = (changeEvent) => {\r\n var materialId = changeEvent.target.value;\r\n var material = this.materials.find((s) => s.id === materialId);\r\n if (material) {\r\n var size = material.sizes.find((s) => s.id === this.state.selectedSizeId);\r\n if (!size) {\r\n size = material.sizes[1];\r\n }\r\n var sizeId = size.id;\r\n\r\n var hangerId = '',\r\n hanger = null;\r\n if (\r\n this.state.selectedHangerId !== 'ΠΠ΅Ρ' &&\r\n this.state.selectedMaterialId !== 'ΠΠΠ₯'\r\n ) {\r\n hanger = size.hangers.find((s) => s.id === this.state.selectedHangerId);\r\n }\r\n if (!hanger) {\r\n hanger = size.hangers.find((s) => s.isDefault);\r\n if (!hanger && size.hangers.length > 0) {\r\n hanger = size.hangers[0];\r\n }\r\n }\r\n\r\n hangerId = hanger.id;\r\n\r\n this.setState({\r\n selectedMaterialId: materialId,\r\n selectedSizeId: sizeId,\r\n selectedHangerId: hangerId,\r\n });\r\n }\r\n };\r\n\r\n onSizeChanged = (changeEvent) => {\r\n var material = this.materials.find(\r\n (s) => s.id === this.state.selectedMaterialId\r\n );\r\n if (material) {\r\n var sizeId = changeEvent.target.value;\r\n var size = material.sizes.find((s) => s.id === sizeId);\r\n\r\n if (size) {\r\n var hangerId = '',\r\n hanger = null;\r\n if (\r\n this.state.selectedHangerId !== 'ΠΠ΅Ρ' &&\r\n this.state.selectedMaterialId !== 'ΠΠΠ₯'\r\n ) {\r\n hanger = size.hangers.find(\r\n (s) => s.id === this.state.selectedHangerId\r\n );\r\n }\r\n\r\n if (!hanger) {\r\n var hanger = size.hangers.find((s) => s.isDefault);\r\n if (!hanger && size.hangers.length > 0) {\r\n hanger = size.hangers[0];\r\n }\r\n }\r\n\r\n hangerId = hanger.id;\r\n\r\n this.setState({\r\n selectedSizeId: sizeId,\r\n selectedHangerId: hangerId,\r\n });\r\n }\r\n }\r\n };\r\n\r\n onHangerChanged = (changeEvent) => {\r\n var material = this.materials.find(\r\n (s) => s.id === this.state.selectedMaterialId\r\n );\r\n if (material) {\r\n var size = material.sizes.find((s) => s.id === this.state.selectedSizeId);\r\n if (size) {\r\n var hangerId = changeEvent.target.value;\r\n var hanger = size.hangers.find((s) => s.id === hangerId);\r\n if (!hanger) {\r\n hanger = size.hangers.find((s) => s.isDefault);\r\n }\r\n hangerId = hanger.id;\r\n\r\n this.setState({\r\n selectedHangerId: hangerId,\r\n });\r\n }\r\n }\r\n };\r\n\r\n onMaterialInfoClick = (e, material) => {\r\n e.preventDefault();\r\n\r\n if (material) {\r\n this.setState({\r\n modalName: material.info.name,\r\n modalDescription: material.info.description,\r\n modalImages: material.info.images,\r\n isModalOpen: true,\r\n });\r\n }\r\n };\r\n\r\n onHangerInfoClick = (e, hanger) => {\r\n e.preventDefault();\r\n\r\n if (hanger) {\r\n this.setState({\r\n modalName: hanger.info.name,\r\n modalDescription: hanger.info.description,\r\n modalImages: hanger.info.images,\r\n isModalOpen: true,\r\n });\r\n }\r\n };\r\n\r\n onModalClose = (e) => {\r\n this.setState({\r\n isModalOpen: false,\r\n });\r\n };\r\n\r\n renderModalWindow = (props) => {\r\n return (\r\n \r\n \r\n \r\n {t(\"Π― Π·Π½Π°Ρ ΡΠΎΡΠ½ΠΈΠΉ ΡΠ°Ρ\")}\r\n \r\n
\r\n\r\n \r\n
\r\n {props.name}
\r\n\r\n \r\n {props.images &&\r\n props.images.map((src, index) => {\r\n return (\r\n \r\n 
\r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n );\r\n };\r\n\r\n renderSizesOld = (props) => {\r\n const { t } = this.props;\r\n return (\r\n {props.description}
\r\n\r\n {this.materials\r\n .find((material) => {\r\n return material.id === this.state.selectedMaterialId;\r\n })\r\n .sizes.map((size, index) => {\r\n return (\r\n \r\n );\r\n })}\r\n
\r\n );\r\n };\r\n\r\n renderSizes = (props) => {\r\n const { t } = this.props;\r\n return (\r\n \r\n {this.materials\r\n .find((material) => {\r\n return material.id === this.state.selectedMaterialId;\r\n })\r\n .sizes.map((size, index) => {\r\n return (\r\n
\r\n );\r\n };\r\n\r\n renderHangers = (props) => {\r\n const { t } = this.props;\r\n const hangers = props.hangers;\r\n if (!hangers || hangers.length <= 0) {\r\n return null;\r\n }\r\n return (\r\n \r\n \r\n
\r\n );\r\n })}\r\n \r\n {t('ΠΡΡΠΏΠ»Π΅Π½Π½Ρ')}\r\n
\r\n\r\n {hangers.map((hanger, index) => {\r\n return (\r\n \r\n \r\n
\r\n );\r\n })}\r\n \r\n ΠΠ°ΡΠ΅ΡΡΠ°Π»
\r\n\r\n {this.materials.map((material, index) => {\r\n return (\r\n \r\n );\r\n })}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {t('Π ΠΎΠ·ΠΌΡΡ')}\r\n
\r\n\r\n \r\n {t('ΠΠΊΡΡΠΉΠ½Π° ΡΡΠ½Π°!')}\r\n \r\n
\r\n \r\n {item.name}\r\n \r\n
\r\n {this.styles.map((style, index) => {\r\n return (\r\n
\r\n \r\n {style.name}\r\n
\r\n \r\n );\r\n })}\r\n \r\n );\r\n };\r\n\r\n // renderStyles = () => {\r\n // const { t } = this.props;\r\n\r\n // return (\r\n //
\r\n // \r\n // {this.styles.map((style, index) => {\r\n // return (\r\n //
\r\n // \r\n // {style.name}\r\n //
\r\n // \r\n // );\r\n // })}\r\n // \r\n // \r\n // )\r\n // };\r\n\r\n renderFeatures = () => {\r\n const { t } = this.props;\r\n\r\n return (\r\n\r\n {this.props.features.map((feature, index) => {\r\n return (\r\n
\r\n \r\n {t(feature.name)}\r\n
\r\n \r\n );\r\n })}\r\n \r\n );\r\n };\r\n\r\n //\r\n // \r\n //
\r\n\r\n onModalClose = (e) => {\r\n this.setState({\r\n isModalOpen: false,\r\n });\r\n };\r\n\r\n proposedTextModalOpen = (e) => {\r\n e.preventDefault();\r\n this.setState({\r\n isProposedTextModalOpen: true,\r\n });\r\n };\r\n\r\n onProposedTextModalClose = (e) => {\r\n this.setState({\r\n isProposedTextModalOpen: false,\r\n });\r\n };\r\n\r\n onProposedTextSwitched = (selectedIndex, e) => {\r\n this._selectedProposedTextIndex = selectedIndex;\r\n };\r\n\r\n onProposedTextSelected = (e) => {\r\n if (this._selectedProposedTextIndex >= this._proposedTexts.length) {\r\n this._selectedProposedTextIndex = this._proposedTexts.length - 1;\r\n }\r\n var text = this._proposedTexts[this._selectedProposedTextIndex];\r\n\r\n this.onProposedTextModalClose();\r\n this.props.onText1Selected(text);\r\n };\r\n\r\n render() {\r\n console.log(\"rendering editor-sidebar\");\r\n const { t, i18n } = this.props;\r\n\r\n return (\r\n \r\n \r\n \r\n */}\r\n this.onSideBarMenuClick(e, 1)}\r\n >\r\n {t(\"ΠΡΠΎΠΊ 2: Π‘ΡΠΈΠ»Ρ\")} \r\n \r\n
\r\n \r\n
\r\n {t(\"ΠΠΎΠ΄ΡΡ\")}
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n {/* \r\n \r\n {/* \r\n \r\n */}\r\n
\r\n\r\n Π‘ΡΠΈΠ»Ρ
\r\n {this.renderStyles()}\r\n {/* \r\n\r\n
\r\n */}\r\n \r\n {this.styles.map((style, index) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n this.props.onStyleChanged(e, style.id)\r\n }\r\n />\r\n \r\n \r\n
\r\n {style.id}
\r\n \r\n );\r\n })}\r\n{t(\"ΠΠ»Π΅ΠΌΠ΅Π½ΡΠΈ\")}
\r\n {this.renderFeatures()}\r\n{t(\"ΠΠ°ΠΏΠΈΡΠΈ\")}
\r\n\r\n\r\n \r\n
\r\n \r\n \r\n \r\n {t(\"ΠΠ½ΡΡ Π²Π°ΡΡΠ°Π½ΡΠΈ\")}\r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {t(\"ΠΡΠ΄ΠΊΡΠΈΡΠΈ ΡΠ°Ρ\")}\r\n \r\n \r\n\r\n \r\n \r\n {this.props.price}{\" \"}\r\n {t(\"Π³ΡΠ½\")}\r\n \r\n \r\n {t(\"ΠΡΠΏΠΈΡΠΈ\")} \r\n \r\n \r\n
\r\n \r\n
\r\n {t(\"Π§ΡΠ΄ΠΎΠ²ΠΈΠΉ Π²ΠΈΠ±ΡΡ!\")}
\r\n\r\n
\r\n \r\n \r\n \r\n {t(\"ΠΠ»Π°ΠΊΠ°ΡΠΈ Ρ ΡΠ°ΠΌΠΊΠ°Ρ Π²ΠΈΠ³Π»ΡΠ΄Π°ΡΡΡ ΡΠ΅ ΠΊΡΠ°ΡΠ΅. ΠΠ°ΠΆΠ°ΡΡΠ΅ Π΄ΠΎΠ΄Π°ΡΠΈ ΡΠ°ΠΌΠΊΡ?\")}\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n {t(\"Π Π°ΠΌΠΊΠ°\")}
\r\n\r\n {t(\r\n \"Π’ΠΎΠ½ΠΊΠ° ΠΏΠ»Π°ΡΡΠΈΠΊΠΎΠ²Π° ΡΠ°ΠΌΠΊΠ° ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ»ΡΠΎΡΡ Π·Ρ ΡΠΊΠ»ΠΎΠΌ (Π½Π°ΡΡΡΠ°Π»ΡΠ½ΠΈΠΌ Π°Π±ΠΎ Π°ΠΊΡΠΈΠ»ΠΎΠ²ΠΈΠΌ) Ρ Π·ΡΡΡΠ½ΠΈΠΌ ΠΏΡΠ΄Π²ΡΡΠΎΠΌ. Π’Π°ΠΊΡ ΡΠ°ΠΌΠΊΠΈ Π΄ΠΎΠ±ΡΠ΅ ΠΏΡΠ΄Ρ ΠΎΠ΄ΡΡΡ Π΄ΠΎ Π±ΡΠ΄Ρ-ΡΠΊΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΡΠ½ΡΠ΅ΡβΡΡΡ.\"\r\n )}\r\n
\r\n\r\n \r\n {t(\"ΠΠΎΠ΄Π°ΡΠΈ\")}\r\n \r\n
\r\n \r\n +{this.state.proposalHangerPrice} {t(\"Π³ΡΠ½\")}\r\n \r\n
\r\n \r\n \r\n +{this.state.proposalHangerPrice} {t(\"Π³ΡΠ½\")}\r\n \r\n
\r\n
\r\n {t(\"ΠΠ±Π΅ΡΡΡΡ Π½Π°ΠΏΠΈΡ\")}
\r\n\r\n \r\n {this._proposedTexts.map((text, index) => {\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {text}\r\n
\r\n\r\n
\r\n );\r\n }\r\n}\r\nexport default withTranslation()(EditorComponent);\r\n","import React, { Component, PureComponent } from \"react\";\r\nimport \"./editor-map.css\";\r\nimport i18n from \"i18next\";\r\n\r\nimport DOMPurify from \"dompurify\";\r\n\r\nexport default class Map extends Component {\r\n static whyDidYouRender = true;\r\n isSmallScreen = true;\r\n\r\n constructor(props) {\r\n super(props);\r\n this._poster = React.createRef();\r\n this._posterWrapper = React.createRef();\r\n this._content = React.createRef();\r\n this._map = React.createRef();\r\n\r\n this.state = {\r\n posterWidth: \"-1\",\r\n posterHeight: \"-1\",\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n window.addEventListener(\"resize\", this.updateWindowDimensions);\r\n this.updateWindowDimensions();\r\n }\r\n\r\n componentWillUnmount() {\r\n window.removeEventListener(\"resize\", this.updateWindowDimensions);\r\n }\r\n\r\n updateWindowDimensions = () => {\r\n console.log(\"Calculating window size\");\r\n let windowWidth = window.innerWidth;\r\n let isSmallScreen = windowWidth < 768 ? true : false;\r\n this.isSmallScreen = isSmallScreen;\r\n\r\n this.updatePosterSize(this.props.ratio);\r\n //var styleWidth = width === -1 ? \"auto\" : `${width}px`;\r\n //var styleHeight = height === -1 ? \"auto\" : `${height}px`;\r\n\r\n //this._posterWrapper.current.style.width = styleWidth;\r\n //this._posterWrapper.current.style.height = styleHeight;\r\n };\r\n\r\n updatePosterSize = (ratio) => {\r\n var margin = 2 * 20;\r\n if (!this.isSmallScreen) {\r\n margin = 2 * 100;\r\n }\r\n var maxWidth = this._content.current.offsetWidth - margin;\r\n var maxHeight = this._content.current.offsetHeight - margin;\r\n var ratioSplit = ratio.split(\"-\");\r\n var ratioX = parseInt(ratioSplit[0]);\r\n var ratioY = parseInt(ratioSplit[1]);\r\n var width = -1;\r\n var height = -1;\r\n var tempHeight = (maxWidth * ratioX) / ratioY;\r\n if (tempHeight > maxHeight) {\r\n width = (maxHeight * ratioY) / ratioX;\r\n } else {\r\n height = tempHeight;\r\n }\r\n\r\n this.setState({\r\n posterWidth: width,\r\n posterHeight: height,\r\n });\r\n };\r\n\r\n getFixedText1(text1) {\r\n if (text1) {\r\n try {\r\n return DOMPurify.sanitize(text1).replace(\r\n /β€οΈ/g,\r\n ''\r\n );\r\n } catch (e) {\r\n (console.error || console.log).call(console, e.stack || e);\r\n }\r\n }\r\n return \"\";\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n this.setState({\r\n text1: this.getFixedText1(nextProps.text1),\r\n });\r\n\r\n if (nextProps.ratio !== this.props.ratio) {\r\n this.updatePosterSize(nextProps.ratio);\r\n }\r\n }\r\n\r\n // shouldComponentUpdate(nextProps, nextState) {\r\n // if (\r\n // nextProps.text1 !== this.props.text1 ||\r\n // nextProps.text2 !== this.props.text2 ||\r\n // nextProps.ratio !== this.props.ratio ||\r\n // nextProps.styleId !== this.props.styleId\r\n // ) {\r\n // console.log(\"map should update!\");\r\n // return true;\r\n // } else {\r\n // console.log(\"map shouldn't update\");\r\n // return false;\r\n // }\r\n // }\r\n\r\n render() {\r\n console.log(\"Rendering editor-map\");\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n Π€ΡΠ½Π°Π»ΡΠ½Π΅ Π·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½Ρ Π±ΡΠ΄Π΅ ΡΡΠ²ΠΎΡΠ΅Π½ΠΎ\r\n Π½Π° ΠΎΡΠ½ΠΎΠ²Ρ Π·Π°ΠΏΠΈΡΡ Π²Π°ΡΠΎΠ³ΠΎ Π³ΠΎΠ»ΠΎΡΡ, ΡΠΊΠΈΠΉ ΠΌΠΎΠΆΠ½Π° Π±ΡΠ΄Π΅ Π²ΡΠ΄ΠΏΡΠ°Π²ΠΈΡΠΈ ΠΏΡΡΠ»Ρ\r\n ΠΎΡΠΎΡΠΌΠ»Π΅Π½Π½Ρ Π·Π°ΠΌΠΎΠ²Π»Π΅Π½Π½Ρ\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n );\r\n }\r\n}\r\n","import React, { PureComponent } from \"react\";\r\n\r\nimport Carousel from \"react-bootstrap/Carousel\";\r\nimport HyperModal from \"react-hyper-modal\";\r\nimport { withTranslation } from \"react-i18next\";\r\n\r\nclass EditorMaterials extends PureComponent {\r\n constructor(props) {\r\n super(props);\r\n const { t } = props;\r\n\r\n this.materials = [\r\n {\r\n id: \"ΠΡΠΌΠ°Π³Π°\",\r\n name: t(\"ΠΠ°ΠΏΡΡ\"),\r\n info: {\r\n name: t(\"ΠΡΡΠΊ Π½Π° ΠΏΠ°ΠΏΠ΅ΡΡ\"),\r\n description: t(\r\n \"ΠΠΈ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΠΌΠΎ Π²ΠΈΡΠΎΠΊΠΎΡΠΊΡΡΠ½ΠΈΠΉ ΠΊΠΎΠ»ΡΠΎΡΠΎΠ²ΠΈΠΉ Π΄ΡΡΠΊ Π½Π° ΠΌΠ°ΡΠΎΠ²ΠΎΠΌΡ ΠΏΠ°ΠΏΠ΅ΡΡ Π²ΠΈΡΠΎΠΊΠΎΡ ΡΡΠ»ΡΠ½ΠΎΡΡΡ. Π’Π°ΠΊΠΈΠΉ Π΄ΡΡΠΊ Π·Π°Π±Π΅Π·ΠΏΠ΅ΡΡΡ ΡΠΎΡΠΎΡΠ΅Π°Π»ΡΡΡΠΈΡΠ½ΡΡΡΡ Ρ Π²ΠΈΡΠΎΠΊΡ Π΄Π΅ΡΠ°Π»ΡΠ·Π°ΡΡΡ ΠΏΠ»Π°ΠΊΠ°ΡΡΠ². ΠΠ»Π°ΠΊΠ°ΡΠΈ 30*40 ΠΏΠ΅ΡΠ΅ΡΠΈΠ»Π°ΡΠΌΠΎ Π² Π·Π°Ρ
ΠΈΡΠ½ΡΠΉ ΠΏΠ°ΠΏΡΡ, 40*50ΡΠΌ Ρ 50*70ΡΠΌ - Ρ ΡΡΠΈΠΊΡΡΠ½ΠΎΠΌΡ ΡΡΠ±ΡΡΡ.\"\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + \"/assets/img/paper1.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/paper2.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/paper3.jpg\",\r\n ],\r\n },\r\n sizes: [\r\n {\r\n id: \"30Ρ
40 ΡΠΌ\",\r\n name: \"30Ρ
40 ΡΠΌ\",\r\n width: 400,\r\n height: 300,\r\n ratio: \"3-4\",\r\n price: 390,\r\n oldPrice: 440,\r\n hangers: [\r\n { id: \"ΠΠ΅Ρ\", name: t(\"ΠΠ΅ΠΌΠ°Ρ\"), price: 0 },\r\n {\r\n id: \"Π Π°ΠΌΠΊΠ°\",\r\n name: t(\"Π Π°ΠΌΠΊΠ°\"),\r\n price: 260,\r\n info: {\r\n name: t(\"Π Π°ΠΌΠΊΠ° Π΄Π»Ρ ΠΏΠ»Π°ΠΊΠ°ΡΡ\"),\r\n description: t(\r\n \"ΠΠΈ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΠΌΠΎ ΡΠΊΡΡΠ½Ρ ΡΠΎΠ½ΠΊΡ ΠΏΠ»Π°ΡΡΠΈΠΊΠΎΠ²Ρ ΡΠ°ΠΌΠΊΠΈ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ»ΡΠΎΡΡ Π·Ρ Π·ΡΡΡΠ½ΠΈΠΌ ΠΏΡΠ΄Π²ΡΡΠΎΠΌ. Π’Π°ΠΊΡ ΡΠ°ΠΌΠΊΠΈ Π΄ΠΎΠ±ΡΠ΅ ΠΏΡΠ΄Ρ
ΠΎΠ΄ΡΡΡ Π΄ΠΎ Π±ΡΠ΄Ρ-ΡΠΊΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΡΠ½ΡΠ΅ΡβΡΡΡ.\\nΠΠ°Π΄Π½Ρ ΡΡΡΠ½ΠΊΠ° - ΠΠΠ Π· Π³Π°ΡΠΊΠ°ΠΌΠΈ\"\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + \"/assets/img/frame1.png\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame2.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame3.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame4.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame5.jpg\",\r\n ],\r\n },\r\n },\r\n ],\r\n },\r\n {\r\n id: \"40Ρ
50 ΡΠΌ\",\r\n name: \"40Ρ
50 ΡΠΌ\",\r\n width: 400,\r\n height: 500,\r\n ratio: \"4-5\",\r\n price: 490,\r\n oldPrice: 640,\r\n hangers: [\r\n { id: \"ΠΠ΅Ρ\", name: t(\"ΠΠ΅ΠΌΠ°Ρ\"), price: 0 },\r\n {\r\n id: \"Π Π°ΠΌΠΊΠ°\",\r\n name: t(\"Π Π°ΠΌΠΊΠ°\"),\r\n price: 360,\r\n info: {\r\n name: t(\"Π Π°ΠΌΠΊΠ° Π΄Π»Ρ ΠΏΠ»Π°ΠΊΠ°ΡΡ\"),\r\n description: t(\r\n \"ΠΠΈ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΠΌΠΎ ΡΠΊΡΡΠ½Ρ ΡΠΎΠ½ΠΊΡ ΠΏΠ»Π°ΡΡΠΈΠΊΠΎΠ²Ρ ΡΠ°ΠΌΠΊΠΈ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ»ΡΠΎΡΡ Π·Ρ Π·ΡΡΡΠ½ΠΈΠΌ ΠΏΡΠ΄Π²ΡΡΠΎΠΌ. Π’Π°ΠΊΡ ΡΠ°ΠΌΠΊΠΈ Π΄ΠΎΠ±ΡΠ΅ ΠΏΡΠ΄Ρ
ΠΎΠ΄ΡΡΡ Π΄ΠΎ Π±ΡΠ΄Ρ-ΡΠΊΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΡΠ½ΡΠ΅ΡβΡΡΡ.\\nΠΠ°Π΄Π½Ρ ΡΡΡΠ½ΠΊΠ° - ΠΠΠ Π· Π³Π°ΡΠΊΠ°ΠΌΠΈ\"\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + \"/assets/img/frame1.png\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame2.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame3.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame4.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame5.jpg\",\r\n ],\r\n },\r\n },\r\n ],\r\n },\r\n {\r\n id: \"50Ρ
70 ΡΠΌ\",\r\n name: \"50Ρ
70 ΡΠΌ\",\r\n width: 500,\r\n height: 700,\r\n ratio: \"5-7\",\r\n price: 590,\r\n oldPrice: 720,\r\n hangers: [\r\n { id: \"ΠΠ΅Ρ\", name: t(\"ΠΠ΅ΠΌΠ°Ρ\"), price: 0 },\r\n {\r\n id: \"Π Π°ΠΌΠΊΠ°\",\r\n name: t(\"Π Π°ΠΌΠΊΠ°\"),\r\n price: 560,\r\n info: {\r\n name: t(\"Π Π°ΠΌΠΊΠ° Π΄Π»Ρ ΠΏΠ»Π°ΠΊΠ°ΡΡ\"),\r\n description: t(\r\n \"ΠΠΈ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΠΌΠΎ ΡΠΊΡΡΠ½Ρ ΡΠΎΠ½ΠΊΡ ΠΏΠ»Π°ΡΡΠΈΠΊΠΎΠ²Ρ ΡΠ°ΠΌΠΊΠΈ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ»ΡΠΎΡΡ Π·Ρ Π·ΡΡΡΠ½ΠΈΠΌ ΠΏΡΠ΄Π²ΡΡΠΎΠΌ. Π’Π°ΠΊΡ ΡΠ°ΠΌΠΊΠΈ Π΄ΠΎΠ±ΡΠ΅ ΠΏΡΠ΄Ρ
ΠΎΠ΄ΡΡΡ Π΄ΠΎ Π±ΡΠ΄Ρ-ΡΠΊΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΡΠ½ΡΠ΅ΡβΡΡΡ.\\nΠΠ°Π΄Π½Ρ ΡΡΡΠ½ΠΊΠ° - ΠΠΠ Π· Π³Π°ΡΠΊΠ°ΠΌΠΈ\"\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + \"/assets/img/frame1.png\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame2.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame3.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame4.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame5.jpg\",\r\n ],\r\n },\r\n },\r\n ],\r\n },\r\n ],\r\n },\r\n {\r\n id: \"ΠΠΠ₯\",\r\n name: t(\"ΠΠ»Π°ΡΡΠΈΠΊ\"),\r\n info: {\r\n name: t(\"ΠΡΡΠΊ Π½Π° ΠΠΠ₯\"),\r\n description: t(\r\n \"ΠΠΠ₯ - Π»Π΅Π³ΠΊΠΎΠ²ΡΡΠ½ΠΈΠΉ Π»ΠΈΡΡ ΠΏΠ»Π°ΡΡΠΈΠΊΡ Π·Ρ Π²ΡΠΏΡΠ½Π΅Π½ΠΎΡ ΡΡΡΡΠΊΡΡΡΠΎΡ. ΠΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½Π° ΠΏΡΠ΄Π²ΡΡΡΠ²Π°ΡΠΈ Π±Π΅Π· ΡΠ°ΠΌΠΈ, ΠΎΡΠΊΡΠ»ΡΠΊΠΈ Π²ΡΠ½ Π΄ΠΎΡΡΠ°ΡΠ½ΡΠΎ ΡΡΠ»ΡΠ½ΠΈΠΉ Ρ Π½Π΅ ΡΠΊΡΡΡΡΡΡΡΡΡ. ΠΠ΅Π·ΠΊΠΎΡΡΠΎΠ²Π½ΠΎ ΠΌΠΎΠΆΠ΅ΠΌΠΎ Π½Π°ΠΊΠ»Π΅ΡΡΠΈ Π΄Π²ΠΎΡΡΠΎΡΠΎΠ½Π½ΡΠΉ ΡΠΊΠΎΡΡ, ΡΠΎΠ± ΠΊΡΡΠΏΠΈΡΠΈ Π΄ΠΎ ΡΡΡΠ½ΠΈ. Π’ΠΎΠ²ΡΠΈΠ½Π° - 3ΠΌΠΌ, Π°Π±ΠΎ 1ΠΌΠΌ (ΡΠΊΡΠΎ Π² ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΡ Π· ΡΠ°ΠΌΠΊΠΎΡ).\\nΠΠ΅Π·ΠΏΠ΅ΡΠ½ΠΈΠΉ Π΄Π»Ρ Π»ΡΠ΄ΠΈΠ½ΠΈ ΡΠ° Π½Π°Π²ΠΊΠΎΠ»ΠΈΡΠ½ΡΠΎΠ³ΠΎ ΡΠ΅ΡΠ΅Π΄ΠΎΠ²ΠΈΡΠ°\"\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + \"/assets/img/plastic1.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/plastic2.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/plastic3.jpg\",\r\n ],\r\n },\r\n sizes: [\r\n {\r\n id: \"30Ρ
40 ΡΠΌ\",\r\n name: \"30Ρ
40 ΡΠΌ\",\r\n width: 300,\r\n height: 400,\r\n ratio: \"3-4\",\r\n price: 550,\r\n oldPrice: 690,\r\n hangers: [\r\n { id: \"ΠΠ΅Ρ\", name: t(\"ΠΠ΅ΠΌΠ°Ρ\"), price: 0 },\r\n {\r\n id: \"ΠΠ΅Π½ΡΠ°\",\r\n name: t(\"ΠΠ»Π΅ΠΉΠΊΠ° ΡΡΡΡΡΠΊΠ°\"),\r\n price: 0,\r\n isDefault: true,\r\n info: {\r\n name: t(\"ΠΠ»Π΅ΠΉΠΊΠ° ΡΡΡΡΡΠΊΠ°\"),\r\n description: t(\r\n \"Π§ΡΠΏΠΊΠΈΠΉ ΡΠΊΠΎΡΡ ΠΏΠΎ ΠΏΠ΅ΡΠΈΠΌΠ΅ΡΡΡ Π·Π²ΠΎΡΠΎΡΠ½ΠΎΡ ΡΡΠΎΡΠΎΠ½ΠΈ. ΠΠΎΠ±ΡΠ΅ ΡΡΠΈΠΌΠ°Ρ Π²Π°Π³Ρ, ΡΠΊΡΠΎ ΠΏΠΎΠ²Π΅ΡΡ
Π½Ρ Π½Π΅ ΠΌΠ°Ρ Π½Π°Π΄ΡΠΎ Π²ΠΈΡΠ°Π·Π½ΠΎΡ ΡΠ°ΠΊΡΡΡΠΈ.\"\r\n ),\r\n images: [process.env.PUBLIC_URL + \"/assets/img/plastic3.jpg\"],\r\n },\r\n },\r\n {\r\n id: \"Π Π°ΠΌΠΊΠ°\",\r\n name: t(\"Π Π°ΠΌΠΊΠ°\"),\r\n price: 200,\r\n info: {\r\n name: t(\"Π Π°ΠΌΠΊΠ° Π΄Π»Ρ ΠΏΠ»Π°ΠΊΠ°ΡΡ\"),\r\n description: t(\r\n \"ΠΠΈ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΠΌΠΎ ΡΠΊΡΡΠ½Ρ ΡΠΎΠ½ΠΊΡ ΠΏΠ»Π°ΡΡΠΈΠΊΠΎΠ²Ρ ΡΠ°ΠΌΠΊΠΈ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ»ΡΠΎΡΡ Π·Ρ Π·ΡΡΡΠ½ΠΈΠΌ ΠΏΡΠ΄Π²ΡΡΠΎΠΌ. Π’Π°ΠΊΡ ΡΠ°ΠΌΠΊΠΈ Π΄ΠΎΠ±ΡΠ΅ ΠΏΡΠ΄Ρ
ΠΎΠ΄ΡΡΡ Π΄ΠΎ Π±ΡΠ΄Ρ-ΡΠΊΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΡΠ½ΡΠ΅ΡβΡΡΡ.\\nΠΠ°Π΄Π½Ρ ΡΡΡΠ½ΠΊΠ° - ΠΠΠ Π· Π³Π°ΡΠΊΠ°ΠΌΠΈ\"\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + \"/assets/img/frame1.png\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame2.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame3.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame4.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame5.jpg\",\r\n ],\r\n },\r\n },\r\n /*{\r\n id: \"ΠΡΡΡΠΊΠΈ\",\r\n name: \"ΠΠ°ΡΠΊΠΈ\",\r\n price: 30,\r\n info: {\r\n name: \"ΠΠ°ΡΠΊΠΈ\",\r\n description:\r\n \"ΠΠ°ΡΠΊΠΈ Π½Π° Π·Π²ΠΎΡΠΎΡΠ½ΡΠΉ ΡΡΠΎΡΠΎΠ½Ρ. ΠΠ° Π²ΠΈΠΏΠ°Π΄ΠΎΠΊ, ΡΠΊΡΠΎ ΠΌΠ°ΡΡΠ΅ Π΄ΡΠΆΠ΅ ΡΠ°ΠΊΡΡΡΠ½Ρ ΠΏΠΎΠ²Π΅ΡΡ
Π½Ρ Ρ Π΄Π²ΠΎΡΡΠΎΡΠΎΠ½Π½ΡΠΎΠ³ΠΎ ΡΠΊΠΎΡΡΠ° Π½Π΅Π΄ΠΎΡΡΠ°ΡΠ½ΡΠΎ.\",\r\n images: [\"assets/img/plastic_hooks.jpg\"],\r\n },\r\n },*/\r\n ],\r\n },\r\n {\r\n id: \"40Ρ
50 ΡΠΌ\",\r\n name: \"40Ρ
50 ΡΠΌ\",\r\n width: 400,\r\n height: 500,\r\n ratio: \"4-5\",\r\n price: 700,\r\n oldPrice: 880,\r\n hangers: [\r\n { id: \"ΠΠ΅Ρ\", name: t(\"ΠΠ΅ΠΌΠ°Ρ\"), price: 0 },\r\n {\r\n id: \"ΠΠ΅Π½ΡΠ°\",\r\n name: t(\"ΠΠ»Π΅ΠΉΠΊΠ° ΡΡΡΡΡΠΊΠ°\"),\r\n price: 0,\r\n isDefault: true,\r\n info: {\r\n name: t(\"ΠΠ»Π΅ΠΉΠΊΠ° ΡΡΡΡΡΠΊΠ°\"),\r\n description: t(\r\n \"Π§ΡΠΏΠΊΠΈΠΉ ΡΠΊΠΎΡΡ ΠΏΠΎ ΠΏΠ΅ΡΠΈΠΌΠ΅ΡΡΡ Π·Π²ΠΎΡΠΎΡΠ½ΠΎΡ ΡΡΠΎΡΠΎΠ½ΠΈ. ΠΠΎΠ±ΡΠ΅ ΡΡΠΈΠΌΠ°Ρ Π²Π°Π³Ρ, ΡΠΊΡΠΎ ΠΏΠΎΠ²Π΅ΡΡ
Π½Ρ Π½Π΅ ΠΌΠ°Ρ Π½Π°Π΄ΡΠΎ Π²ΠΈΡΠ°Π·Π½ΠΎΡ ΡΠ°ΠΊΡΡΡΠΈ.\"\r\n ),\r\n images: [process.env.PUBLIC_URL + \"/assets/img/plastic3.jpg\"],\r\n },\r\n },\r\n {\r\n id: \"Π Π°ΠΌΠΊΠ°\",\r\n name: t(\"Π Π°ΠΌΠΊΠ°\"),\r\n price: 300,\r\n info: {\r\n name: t(\"Π Π°ΠΌΠΊΠ° Π΄Π»Ρ ΠΏΠ»Π°ΠΊΠ°ΡΡ\"),\r\n description: t(\r\n \"ΠΠΈ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΠΌΠΎ ΡΠΊΡΡΠ½Ρ ΡΠΎΠ½ΠΊΡ ΠΏΠ»Π°ΡΡΠΈΠΊΠΎΠ²Ρ ΡΠ°ΠΌΠΊΠΈ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ»ΡΠΎΡΡ Π·Ρ Π·ΡΡΡΠ½ΠΈΠΌ ΠΏΡΠ΄Π²ΡΡΠΎΠΌ. Π’Π°ΠΊΡ ΡΠ°ΠΌΠΊΠΈ Π΄ΠΎΠ±ΡΠ΅ ΠΏΡΠ΄Ρ
ΠΎΠ΄ΡΡΡ Π΄ΠΎ Π±ΡΠ΄Ρ-ΡΠΊΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΡΠ½ΡΠ΅ΡβΡΡΡ.\\nΠΠ°Π΄Π½Ρ ΡΡΡΠ½ΠΊΠ° - ΠΠΠ Π· Π³Π°ΡΠΊΠ°ΠΌΠΈ\"\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + \"/assets/img/frame1.png\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame2.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame3.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame4.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame5.jpg\",\r\n ],\r\n },\r\n },\r\n // {\r\n // id: \"ΠΡΡΡΠΊΠΈ\",\r\n // name: \"ΠΠ°ΡΠΊΠΈ\",\r\n // price: 30,\r\n // info: {\r\n // name: \"ΠΠ°ΡΠΊΠΈ\",\r\n // description:\r\n // \"ΠΠ°ΡΠΊΠΈ Π½Π° Π·Π²ΠΎΡΠΎΡΠ½ΡΠΉ ΡΡΠΎΡΠΎΠ½Ρ. ΠΠ° Π²ΠΈΠΏΠ°Π΄ΠΎΠΊ, ΡΠΊΡΠΎ ΠΌΠ°ΡΡΠ΅ Π΄ΡΠΆΠ΅ ΡΠ°ΠΊΡΡΡΠ½Ρ ΠΏΠΎΠ²Π΅ΡΡ
Π½Ρ Ρ Π΄Π²ΠΎΡΡΠΎΡΠΎΠ½Π½ΡΠΎΠ³ΠΎ ΡΠΊΠΎΡΡΠ° Π½Π΅Π΄ΠΎΡΡΠ°ΡΠ½ΡΠΎ.\",\r\n // images: [\"assets/img/plastic_hooks.jpg\"],\r\n // },\r\n // },\r\n ],\r\n },\r\n {\r\n id: \"50Ρ
70 ΡΠΌ\",\r\n name: \"50Ρ
70 ΡΠΌ\",\r\n width: 500,\r\n height: 700,\r\n ratio: \"5-7\",\r\n price: 950,\r\n oldPrice: 1200,\r\n hangers: [\r\n { id: \"ΠΠ΅Ρ\", name: \"ΠΠ΅ΠΌΠ°Ρ\", price: 0 },\r\n {\r\n id: t(\"ΠΠ΅Π½ΡΠ°\"),\r\n name: t(\"ΠΠ»Π΅ΠΉΠΊΠ° ΡΡΡΡΡΠΊΠ°\"),\r\n price: 0,\r\n isDefault: true,\r\n info: {\r\n name: t(\"ΠΠ»Π΅ΠΉΠΊΠ° ΡΡΡΡΡΠΊΠ°\"),\r\n description: t(\r\n \"Π§ΡΠΏΠΊΠΈΠΉ ΡΠΊΠΎΡΡ ΠΏΠΎ ΠΏΠ΅ΡΠΈΠΌΠ΅ΡΡΡ Π·Π²ΠΎΡΠΎΡΠ½ΠΎΡ ΡΡΠΎΡΠΎΠ½ΠΈ. ΠΠΎΠ±ΡΠ΅ ΡΡΠΈΠΌΠ°Ρ Π²Π°Π³Ρ, ΡΠΊΡΠΎ ΠΏΠΎΠ²Π΅ΡΡ
Π½Ρ Π½Π΅ ΠΌΠ°Ρ Π½Π°Π΄ΡΠΎ Π²ΠΈΡΠ°Π·Π½ΠΎΡ ΡΠ°ΠΊΡΡΡΠΈ.\"\r\n ),\r\n images: [process.env.PUBLIC_URL + \"/assets/img/plastic3.jpg\"],\r\n },\r\n },\r\n {\r\n id: \"Π Π°ΠΌΠΊΠ°\",\r\n name: t(\"Π Π°ΠΌΠΊΠ°\"),\r\n price: 400,\r\n info: {\r\n name: t(\"Π Π°ΠΌΠΊΠ° Π΄Π»Ρ ΠΏΠ»Π°ΠΊΠ°ΡΡ\"),\r\n description: t(\r\n \"ΠΠΈ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΠΌΠΎ ΡΠΊΡΡΠ½Ρ ΡΠΎΠ½ΠΊΡ ΠΏΠ»Π°ΡΡΠΈΠΊΠΎΠ²Ρ ΡΠ°ΠΌΠΊΠΈ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ»ΡΠΎΡΡ Π·Ρ Π·ΡΡΡΠ½ΠΈΠΌ ΠΏΡΠ΄Π²ΡΡΠΎΠΌ. Π’Π°ΠΊΡ ΡΠ°ΠΌΠΊΠΈ Π΄ΠΎΠ±ΡΠ΅ ΠΏΡΠ΄Ρ
ΠΎΠ΄ΡΡΡ Π΄ΠΎ Π±ΡΠ΄Ρ-ΡΠΊΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΡΠ½ΡΠ΅ΡβΡΡΡ.\\nΠΠ°Π΄Π½Ρ ΡΡΡΠ½ΠΊΠ° - ΠΠΠ Π· Π³Π°ΡΠΊΠ°ΠΌΠΈ\"\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + \"/assets/img/frame1.png\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame2.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame3.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame4.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/frame5.jpg\",\r\n ],\r\n },\r\n },\r\n // {\r\n // id: \"ΠΡΡΡΠΊΠΈ\",\r\n // name: \"ΠΠ°ΡΠΊΠΈ\",\r\n // price: 30,\r\n // info: {\r\n // name: \"ΠΠ°ΡΠΊΠΈ\",\r\n // description:\r\n // \"ΠΠ°ΡΠΊΠΈ Π½Π° Π·Π²ΠΎΡΠΎΡΠ½ΡΠΉ ΡΡΠΎΡΠΎΠ½Ρ. ΠΠ° Π²ΠΈΠΏΠ°Π΄ΠΎΠΊ, ΡΠΊΡΠΎ ΠΌΠ°ΡΡΠ΅ Π΄ΡΠΆΠ΅ ΡΠ°ΠΊΡΡΡΠ½Ρ ΠΏΠΎΠ²Π΅ΡΡ
Π½Ρ Ρ Π΄Π²ΠΎΡΡΠΎΡΠΎΠ½Π½ΡΠΎΠ³ΠΎ ΡΠΊΠΎΡΡΠ° Π½Π΅Π΄ΠΎΡΡΠ°ΡΠ½ΡΠΎ.\",\r\n // images: [\"assets/img/plastic_hooks.jpg\"],\r\n // },\r\n // },\r\n ],\r\n },\r\n ],\r\n },\r\n {\r\n id: \"Π₯ΠΎΠ»ΡΡ\",\r\n name: t(\"Π₯ΠΎΠ»ΡΡ\"),\r\n info: {\r\n name: t(\"ΠΡΡΠΊ Π½Π° Ρ
ΠΎΠ»ΡΡΡ\"),\r\n description: t(\r\n \"ΠΠΈ Π΄ΡΡΠΊΡΡΠΌΠΎ Π½Π° Π½Π°ΡΡΡΠ°Π»ΡΠ½ΠΎΠΌΡ Ρ
ΠΎΠ»ΡΡΡ Ρ Π²ΠΈΠΊΠΎΡΠΈΡΡΠΎΠ²ΡΡΠΌΠΎ Π³Π°Π»Π΅ΡΠ΅ΠΉΠ½Ρ Π½Π°ΡΡΠΆΠΊΡ Π½Π° Π΄Π΅ΡΠ΅Π²βΡΠ½ΠΈΠΉ ΠΏΡΠ΄ΡΠ°ΠΌΠ½ΠΈΠΊ. ΠΡΠΈ ΡΠ°ΠΊΡΠΉ Π½Π°ΡΡΠΆΡΡ Π·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½Π½Ρ Π·Π°Ρ
ΠΎΠ΄ΠΈΡΡ Π½Π° Π±ΠΎΠΊΠΎΠ²Ρ ΡΡΠΎΡΠΎΠ½ΠΈ Ρ
ΠΎΠ»ΡΡΡ Ρ Π·Π°Π³ΠΈΠ½Π°ΡΡΡΡΡ ΠΏΡΠ΄ ΠΏΡΠ΄ΡΠ°ΠΌΠ½ΠΈΠΊ. Π’Π°ΠΊΠΈΠΌ ΡΠΈΠ½ΠΎΠΌ Ρ
ΠΎΠ»ΡΡ ΡΡΠ΄ΠΎΠ²ΠΎ Π²ΠΈΠ³Π»ΡΠ΄Π°Ρ Π½Π° ΡΡΡΠ½Ρ Ρ Π½Π΅ ΠΏΠΎΡΡΠ΅Π±ΡΡ Π΄ΠΎΠ΄Π°ΡΠΊΠΎΠ²ΠΎΡ ΡΠ°ΠΌΠΈ.\"\r\n ),\r\n images: [\r\n process.env.PUBLIC_URL + \"/assets/img/canvas1.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/canvas2.jpg\",\r\n process.env.PUBLIC_URL + \"/assets/img/canvas3.jpg\",\r\n ],\r\n },\r\n sizes: [\r\n {\r\n id: \"30Ρ
40 ΡΠΌ\",\r\n name: \"30Ρ
40 ΡΠΌ\",\r\n width: 300,\r\n height: 400,\r\n ratio: \"3-4\",\r\n price: 890,\r\n oldPrice: 1130,\r\n hangers: [{ id: \"ΠΡΡΡΠΊΠΈ\", name: t(\"ΠΠ°ΡΠΊΠΈ\"), price: 0 }],\r\n },\r\n {\r\n id: \"40Ρ
50 ΡΠΌ\",\r\n name: \"40Ρ
50 ΡΠΌ\",\r\n width: 400,\r\n height: 500,\r\n ratio: \"4-5\",\r\n price: 1090,\r\n oldPrice: 1400,\r\n hangers: [{ id: \"ΠΡΡΡΠΊΠΈ\", name: t(\"ΠΠ°ΡΠΊΠΈ\"), price: 0 }],\r\n },\r\n {\r\n id: \"50Ρ
70 ΡΠΌ\",\r\n name: \"50Ρ
70 ΡΠΌ\",\r\n width: 500,\r\n height: 700,\r\n ratio: \"5-7\",\r\n price: 1290,\r\n oldPrice: 1700,\r\n hangers: [{ id: \"ΠΡΡΡΠΊΠΈ\", name: t(\"ΠΠ°ΡΠΊΠΈ\"), price: 0 }],\r\n },\r\n ],\r\n },\r\n ];\r\n\r\n this.state = {\r\n selectedMaterialId: props.initialSelectedMaterialId,\r\n selectedSizeId: props.initialSelectedSizeId,\r\n selectedHangerId: props.initialSelectedHangerId,\r\n isModalOpen: false,\r\n modalName: \"\",\r\n modalDescription: \"\",\r\n modalImages: [],\r\n };\r\n }\r\n\r\n riseUpdate = () => {\r\n console.log(\"recalculate price\");\r\n\r\n try {\r\n var material = this.materials.find((material) => {\r\n return material.id === this.state.selectedMaterialId;\r\n });\r\n\r\n var size = material.sizes.find((size) => {\r\n return size.id === this.state.selectedSizeId;\r\n });\r\n\r\n let { price, ratio, width, height } = size;\r\n\r\n var hanger = size.hangers.find((h) => {\r\n return h.id === this.state.selectedHangerId;\r\n });\r\n\r\n price += hanger.price;\r\n\r\n var proposalHangerId = \"Π Π°ΠΌΠΊΠ°\";\r\n var proposalHangerName = \"\";\r\n var proposalHangerPrice = 0;\r\n if (\r\n this.state.selectedMaterialId === \"ΠΡΠΌΠ°Π³Π°\" &&\r\n this.state.selectedHangerId == \"ΠΠ΅Ρ\"\r\n ) {\r\n var frameHanger = size.hangers.find((h) => {\r\n return h.id === proposalHangerId;\r\n });\r\n if (frameHanger) {\r\n proposalHangerName = frameHanger.name;\r\n proposalHangerPrice = frameHanger.price;\r\n }\r\n }\r\n\r\n this.props.onChanged({\r\n selectedMaterialId: this.state.selectedMaterialId,\r\n selectedSizeId: this.state.selectedSizeId,\r\n selectedHangerId: this.state.selectedHangerId,\r\n selectedMaterialName: material.name,\r\n selectedHangerName: hanger.name,\r\n price,\r\n ratio,\r\n width,\r\n height,\r\n proposalHangerId,\r\n proposalHangerName,\r\n proposalHangerPrice,\r\n });\r\n } catch (e) {\r\n (console.error || console.log).call(console, e.stack || e);\r\n }\r\n };\r\n\r\n componentDidUpdate(prevProps, prevState) {\r\n if (\r\n this.state.selectedMaterialId !== prevState.selectedMaterialId ||\r\n this.state.selectedSizeId !== prevState.selectedSizeId ||\r\n this.state.selectedHangerId !== prevState.selectedHangerId\r\n ) {\r\n this.riseUpdate();\r\n }\r\n }\r\n\r\n componentDidMount() {\r\n this.riseUpdate();\r\n }\r\n\r\n // useEffect(() => {\r\n // riseUpdate();\r\n // }, [selectedMaterialId, selectedSizeId, selectedHangerId]);\r\n\r\n onMaterialChanged = (changeEvent) => {\r\n var materialId = changeEvent.target.value;\r\n var material = this.materials.find((s) => s.id === materialId);\r\n if (material) {\r\n var size = material.sizes.find((s) => s.id === this.state.selectedSizeId);\r\n if (!size) {\r\n size = material.sizes[1];\r\n }\r\n var sizeId = size.id;\r\n\r\n var hangerId = \"\",\r\n hanger = null;\r\n if (\r\n this.state.selectedHangerId !== \"ΠΠ΅Ρ\" &&\r\n this.state.selectedMaterialId !== \"ΠΠΠ₯\"\r\n ) {\r\n hanger = size.hangers.find((s) => s.id === this.state.selectedHangerId);\r\n }\r\n if (!hanger) {\r\n hanger = size.hangers.find((s) => s.isDefault);\r\n if (!hanger && size.hangers.length > 0) {\r\n hanger = size.hangers[0];\r\n }\r\n }\r\n\r\n hangerId = hanger.id;\r\n\r\n this.setState({\r\n selectedMaterialId: materialId,\r\n selectedSizeId: sizeId,\r\n selectedHangerId: hangerId,\r\n });\r\n }\r\n };\r\n\r\n onSizeChanged = (changeEvent) => {\r\n var material = this.materials.find(\r\n (s) => s.id === this.state.selectedMaterialId\r\n );\r\n if (material) {\r\n var sizeId = changeEvent.target.value;\r\n var size = material.sizes.find((s) => s.id === sizeId);\r\n\r\n if (size) {\r\n var hangerId = \"\",\r\n hanger = null;\r\n if (\r\n this.state.selectedHangerId !== \"ΠΠ΅Ρ\" &&\r\n this.state.selectedMaterialId !== \"ΠΠΠ₯\"\r\n ) {\r\n hanger = size.hangers.find(\r\n (s) => s.id === this.state.selectedHangerId\r\n );\r\n }\r\n\r\n if (!hanger) {\r\n var hanger = size.hangers.find((s) => s.isDefault);\r\n if (!hanger && size.hangers.length > 0) {\r\n hanger = size.hangers[0];\r\n }\r\n }\r\n\r\n hangerId = hanger.id;\r\n\r\n this.setState({\r\n selectedSizeId: sizeId,\r\n selectedHangerId: hangerId,\r\n });\r\n }\r\n }\r\n };\r\n\r\n onHangerChanged = (changeEvent) => {\r\n var material = this.materials.find(\r\n (s) => s.id === this.state.selectedMaterialId\r\n );\r\n if (material) {\r\n var size = material.sizes.find((s) => s.id === this.state.selectedSizeId);\r\n if (size) {\r\n var hangerId = changeEvent.target.value;\r\n var hanger = size.hangers.find((s) => s.id === hangerId);\r\n if (!hanger) {\r\n hanger = size.hangers.find((s) => s.isDefault);\r\n }\r\n hangerId = hanger.id;\r\n\r\n this.setState({\r\n selectedHangerId: hangerId,\r\n });\r\n }\r\n }\r\n };\r\n\r\n onMaterialInfoClick = (e, material) => {\r\n e.preventDefault();\r\n\r\n if (material) {\r\n this.setState({\r\n modalName: material.info.name,\r\n modalDescription: material.info.description,\r\n modalImages: material.info.images,\r\n isModalOpen: true,\r\n });\r\n }\r\n };\r\n\r\n onHangerInfoClick = (e, hanger) => {\r\n e.preventDefault();\r\n\r\n if (hanger) {\r\n this.setState({\r\n modalName: hanger.info.name,\r\n modalDescription: hanger.info.description,\r\n modalImages: hanger.info.images,\r\n isModalOpen: true,\r\n });\r\n }\r\n };\r\n\r\n onModalClose = (e) => {\r\n this.setState({\r\n isModalOpen: false,\r\n });\r\n };\r\n\r\n renderModalWindow = (props) => {\r\n return (\r\n \r\n
\r\n \r\n
*/}\r\n\r\n \r\n \r\n
\r\n {/* */}\r\n \r\n \r\n
\r\n\r\n {/* \r\n
\r\n {this.props.text2}
\r\n\r\n
\r\n {props.name}
\r\n\r\n \r\n {props.images &&\r\n props.images.map((src, index) => {\r\n return (\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n );\r\n };\r\n\r\n renderHangers = (props) => {\r\n const { t } = this.props;\r\n const hangers = props.hangers;\r\n if (!hangers || hangers.length <= 1) {\r\n return null;\r\n }\r\n return (\r\n {props.description}
\r\n\r\n {t(\"ΠΡΡΠΏΠ»Π΅Π½Π½Ρ\")}\r\n
\r\n\r\n {hangers.map((hanger, index) => {\r\n return (\r\n \r\n );\r\n })}\r\n
\r\n ΠΠ°ΡΠ΅ΡΡΠ°Π»
\r\n\r\n {this.materials.map((material, index) => {\r\n return (\r\n \r\n );\r\n })}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {t(\"Π ΠΎΠ·ΠΌΡΡ\")}\r\n
\r\n\r\n \r\n {t(\"ΠΠΊΡΡΠΉΠ½Π° ΡΡΠ½Π°!\")}\r\n \r\n
\r\n \r\n {this.materials\r\n .find((material) => {\r\n return material.id === this.state.selectedMaterialId;\r\n })\r\n .sizes.map((size, index) => {\r\n return (\r\n \r\n );\r\n })}\r\n
\r\n \r\n {item.name}\r\n \r\n
\r\n {this.styles.map((style, index) => {\r\n return (\r\n
\r\n \r\n {style.name}\r\n
\r\n \r\n );\r\n })}\r\n \r\n );\r\n };\r\n\r\n // renderStyles = () => {\r\n // const { t } = this.props;\r\n\r\n // return (\r\n //
\r\n // \r\n // {this.styles.map((style, index) => {\r\n // return (\r\n //
\r\n // \r\n // {style.name}\r\n //
\r\n // \r\n // );\r\n // })}\r\n // \r\n // \r\n // )\r\n // };\r\n\r\n //\r\n // \r\n //
\r\n\r\n onModalClose = (e) => {\r\n this.setState({\r\n isModalOpen: false,\r\n });\r\n };\r\n\r\n proposedTextModalOpen = (e) => {\r\n e.preventDefault();\r\n this.setState({\r\n isProposedTextModalOpen: true,\r\n });\r\n };\r\n\r\n onProposedTextModalClose = (e) => {\r\n this.setState({\r\n isProposedTextModalOpen: false,\r\n });\r\n };\r\n\r\n onProposedTextSwitched = (selectedIndex, e) => {\r\n this._selectedProposedTextIndex = selectedIndex;\r\n };\r\n\r\n onProposedTextSelected = (e) => {\r\n if (this._selectedProposedTextIndex >= this._proposedTexts.length) {\r\n this._selectedProposedTextIndex = this._proposedTexts.length - 1;\r\n }\r\n var text = this._proposedTexts[this._selectedProposedTextIndex];\r\n\r\n this.onProposedTextModalClose();\r\n this.props.onText1Selected(text);\r\n };\r\n\r\n render() {\r\n console.log(\"rendering editor-sidebar\");\r\n const { t, i18n } = this.props;\r\n\r\n return (\r\n \r\n \r\n \r\n
*/}\r\n\r\n Π‘ΡΠΈΠ»Ρ
\r\n {this.renderStyles()}\r\n {/* \r\n\r\n
\r\n \r\n {this.styles.map((style, index) => {\r\n return (\r\n \r\n
\r\n \r\n \r\n this.props.onStyleChanged(e, style.id)\r\n }\r\n />\r\n \r\n \r\n
\r\n {style.id}
\r\n \r\n );\r\n })}\r\n{t(\"ΠΠ°ΠΏΠΈΡΠΈ\")}
\r\n\r\n\r\n \r\n
\r\n \r\n \r\n {/* \r\n {t(\"ΠΠ½ΡΡ Π²Π°ΡΡΠ°Π½ΡΠΈ\")}\r\n */}\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n ΠΡΠ΄ΡΠΎ
*/}\r\n\r\n \r\n ΠΠ°ΠΏΠΈΡ Π°ΡΠ΄ΡΠΎ\r\n
\r\n\r\n ΠΠΈ Π·ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ΄ΠΏΡΠ°Π²ΠΈΡΠΈ Π·Π°ΠΏΠΈΡ Π²Π°ΡΠΎΠ³ΠΎ Π³ΠΎΠ»ΠΎΡΡ ΠΏΡΠ·Π½ΡΡΠ΅.\r\n ΠΠ°ΠΏΡΠΈΠΊΠ»Π°Π΄, Ρ Π²ΠΈΠ³Π»ΡΠ΄Ρ Π³ΠΎΠ»ΠΎΡΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ²ΡΠ΄ΠΎΠΌΠ»Π΅Π½Π½Ρ Ρ Viber ΡΠΈ\r\n Telegram. ΠΠΎΡΠΈΠ»Π°Π½Π½Ρ Π·'ΡΠ²ΠΈΡΡΡΡ ΠΏΡΡΠ»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½Π½Ρ Π·Π°ΠΌΠΎΠ²Π»Π΅Π½Π½Ρ.\r\n
\r\n \r\n\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {t(\"ΠΡΠ΄ΠΊΡΠΈΡΠΈ ΡΠ°Ρ\")}\r\n \r\n \r\n\r\n \r\n \r\n {this.props.price}{\" \"}\r\n {t(\"Π³ΡΠ½\")}\r\n \r\n \r\n {t(\"ΠΡΠΏΠΈΡΠΈ\")} \r\n \r\n \r\n
\r\n \r\n
\r\n {t(\"Π§ΡΠ΄ΠΎΠ²ΠΈΠΉ Π²ΠΈΠ±ΡΡ!\")}
\r\n\r\n
\r\n \r\n \r\n \r\n {t(\"ΠΠ»Π°ΠΊΠ°ΡΠΈ Ρ ΡΠ°ΠΌΠΊΠ°Ρ Π²ΠΈΠ³Π»ΡΠ΄Π°ΡΡΡ ΡΠ΅ ΠΊΡΠ°ΡΠ΅. ΠΠ°ΠΆΠ°ΡΡΠ΅ Π΄ΠΎΠ΄Π°ΡΠΈ ΡΠ°ΠΌΠΊΡ?\")}\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n {t(\"Π Π°ΠΌΠΊΠ°\")}
\r\n\r\n {t(\r\n \"Π’ΠΎΠ½ΠΊΠ° ΠΏΠ»Π°ΡΡΠΈΠΊΠΎΠ²Π° ΡΠ°ΠΌΠΊΠ° ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ»ΡΠΎΡΡ Π·Ρ Π·ΡΡΡΠ½ΠΈΠΌ ΠΏΡΠ΄Π²ΡΡΠΎΠΌ. Π’Π°ΠΊΡ ΡΠ°ΠΌΠΊΠΈ Π΄ΠΎΠ±ΡΠ΅ ΠΏΡΠ΄Ρ ΠΎΠ΄ΡΡΡ Π΄ΠΎ Π±ΡΠ΄Ρ-ΡΠΊΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ ΡΠ½ΡΠ΅ΡβΡΡΡ.\"\r\n )}\r\n
\r\n\r\n \r\n {t(\"ΠΠΎΠ΄Π°ΡΠΈ\")}\r\n \r\n
\r\n \r\n +{this.state.proposalHangerPrice} {t(\"Π³ΡΠ½\")}\r\n \r\n
\r\n \r\n \r\n +{this.state.proposalHangerPrice} {t(\"Π³ΡΠ½\")}\r\n \r\n
\r\n
\r\n {t(\"ΠΠ±Π΅ΡΡΡΡ Π½Π°ΠΏΠΈΡ\")}
\r\n\r\n \r\n {this._proposedTexts.map((text, index) => {\r\n return (\r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {text}\r\n
\r\n\r\n
\r\n );\r\n }\r\n}\r\nexport default withTranslation()(EditorComponent);\r\n","import React from 'react';\r\nimport { withFormik } from 'formik';\r\nimport Collapse from 'react-bootstrap/Collapse';\r\nimport './cart-form.css';\r\nimport { useTranslation } from 'react-i18next';\r\nimport { Formik } from 'formik';\r\n\r\nconst CartForm = React.memo((props) => {\r\n const { t } = useTranslation();\r\n\r\n const paymentTypePrivat24 = 'privat24';\r\n const paymentTypeCash = 'cash';\r\n const paymentTypeLiqpay = 'liqpay';\r\n const paymentTypeWayForPay = 'wayforpay';\r\n\r\n const shippingTypeNovaPoshta = 'nova poshta';\r\n const shippingTypeCourier = 'courier';\r\n const canShipFromFactory = props.canShipFromFactory;\r\n const needPrepayment = props.needPrepayment;\r\n const isFreeShippingTurnedOn = props.isFreeShippingTurnedOn;\r\n const isLiqpayEnabled = props.isLiqpayEnabled;\r\n const isWayForPayEnabled = props.isWayForPayEnabled;\r\n const canPayByCash = props.canPayByCash;\r\n // const initialPaymentType = isWayForPayEnabled\r\n // ? paymentTypeWayForPay\r\n // : paymentTypePrivat24;\r\n\r\n const initialPaymentType = paymentTypePrivat24;\r\n const shippingDates = props.shippingDates;\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {canShipFromFactory ? (\r\n <>\r\n Β· {t('ΠΠ΅Π·ΠΊΠΎΡΡΠΎΠ²Π½Π°')} {t('Π΄ΠΎΡΡΠ°Π²ΠΊΠ° Π΄ΠΎ Π²ΡΠ΄Π΄ΡΠ»Π΅Π½Π½Ρ ΠΠ')}\r\n
\r\n \r\n ) : null}\r\n Β· {t('ΠΡΠ΄ΡΡΡΠ½Ρ ΠΊΠΎΠΌΡΡΡΡ Π·Π° Π½Π°ΠΊΠ»Π°Π΄Π΅Π½ΠΈΠΉ ΠΏΠ»Π°ΡΡΠΆ')}\r\n
\r\n Β· {t('ΠΡΠ΄ΠΏΡΠ°Π²Π»Π΅Π½Π½Ρ ΡΠ°Π½ΡΡΠ΅ Π½Π° 1 Π΄Π΅Π½Ρ')}\r\n \r\n \r\n );\r\n }\r\n\r\n let wayForPayLabel = null;\r\n if (isWayForPayEnabled) {\r\n wayForPayLabel = (\r\n
\r\n \r\n {canShipFromFactory ? (\r\n <>\r\n Β· {t('ΠΠ΅Π·ΠΊΠΎΡΡΠΎΠ²Π½Π°')}{' '}\r\n {t('Π΄ΠΎΡΡΠ°Π²ΠΊΠ° Π΄ΠΎ Π²ΡΠ΄Π΄ΡΠ»Π΅Π½Π½Ρ ΠΠ')}\r\n
\r\n \r\n ) : null}\r\n Β· {t('ΠΡΠ΄ΡΡΡΠ½Ρ ΠΊΠΎΠΌΡΡΡΡ Π·Π° Π½Π°ΠΊΠ»Π°Π΄Π΅Π½ΠΈΠΉ ΠΏΠ»Π°ΡΡΠΆ')}\r\n {canShipFromFactory ? (\r\n <>\r\n
\r\n Β· {t('ΠΡΠ΄ΠΏΡΠ°Π²Π»Π΅Π½Π½Ρ ΡΠ°Π½ΡΡΠ΅ Π½Π° 1 Π΄Π΅Π½Ρ')}\r\n \r\n ) : null}\r\n \r\n \r\n \r\n );\r\n }\r\n\r\n var shippingCost = null;\r\n if (values.paymentType !== 'cash') {\r\n if (values.shippingType === 'courier') {\r\n if (canShipFromFactory) {\r\n if (values.city) {\r\n var city = values.city.toLowerCase().trim();\r\n if (\r\n city === 'ΠΊΠΈΠ΅Π²' ||\r\n city === 'kyiv' ||\r\n city === 'ΠΊΠΈΡΠ²' ||\r\n city === 'kiev'\r\n ) {\r\n shippingCost = 150;\r\n } else {\r\n //shippingCost = 90;\r\n }\r\n } else {\r\n //shippingCost = 70;\r\n }\r\n }\r\n } else if (\r\n values.shippingType === 'nova poshta' &&\r\n canShipFromFactory &&\r\n isFreeShippingTurnedOn\r\n ) {\r\n shippingCost = 0;\r\n }\r\n }\r\n\r\n var shippingDate = null;\r\n if (shippingDates) {\r\n shippingDate = shippingDates.find(\r\n (d) => d.paymentType === values.paymentType\r\n )?.date;\r\n }\r\n\r\n props.onShippingCostChanged(shippingCost);\r\n return (\r\n \r\n );\r\n }}\r\n \r\n );\r\n});\r\n\r\nexport default CartForm;\r\n","import React, { Component } from \"react\";\r\nimport { withTranslation } from \"react-i18next\";\r\nimport { getPublicUrl } from \"../utils/utils\";\r\nimport store from \"store\";\r\n\r\nclass Header extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n try {\r\n this.isProductTypeAudio = false;\r\n this.product = store.get(\"product\");\r\n if (this.product && this.product.productType === \"audio\") {\r\n this.isProductTypeAudio = true;\r\n }\r\n } catch (e) {\r\n (console.error || console.log).call(console, e.stack || e);\r\n }\r\n }\r\n\r\n render() {\r\n const { t, i18n } = this.props;\r\n let homeUrl = getPublicUrl(i18n);\r\n if (this.isProductTypeAudio) {\r\n homeUrl = \"/audio\";\r\n }\r\n return (\r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n {t('ΠΡΠΎΡΠΌΠ»Π΅Π½Π½Ρ Π·Π°ΠΌΠΎΠ²Π»Π΅Π½Π½Ρ')}
\r\n\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n {t('ΠΠ½ΡΠΎΡΠΌΠ°ΡΡΡ ΠΏΡΠΎ Π·Π°ΠΌΠΎΠ²Π»Π΅Π½Π½Ρ')}\r\n
\r\n\r\n\r\n \r\n {t('1 ΡΠΎΠ²Π°Ρ(ΡΠ²) Π² Π·Π°ΠΌΠΎΠ²Π»Π΅Π½Π½Ρ')}\r\n \r\n \r\n
\r\n \r\n
\r\n - \r\n
- \r\n \r\n\r\n
\r\n {t('ΠΠ»Π°ΠΊΠ°Ρ')} {city}\r\n
\r\n- \r\n
- \r\n {t('ΠΠ°ΡΠ΅ΡΡΠ°Π»')}: {material}{' '}\r\n \r\n
- \r\n {t('Π ΠΎΠ·ΠΌΡΡ')}: {size}\r\n \r\n
- \r\n {t('Π Π°ΠΌΠΊΠ°/Π’ΡΠΈΠΌΠ°Ρ')}: {hanger}\r\n \r\n
- \r\n {t('Π‘ΡΠΈΠ»Ρ')}: {style}{' '}\r\n \r\n
\r\n
\r\n \r\n {t('ΠΡΠΎΠΌΠΎΠΊΠΎΠ΄')}\r\n \r\n \r\n
\r\n \r\n
\r\n {this.state.isPromocodeFailed ? (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {t('ΠΠ°ΡΡΠΎΡΡΠ²Π°ΡΠΈ')}\r\n \r\n
\r\n \r\n \r\n {t(\r\n 'Π¦Π΅ΠΉ ΠΏΡΠΎΠΌΠΎΠΊΠΎΠ΄ Π½Π΅Π΄ΡΠΉΡΠ½ΠΈΠΉ, Π°Π±ΠΎ Π½Π΅ Π·Π°ΡΡΠΎΡΠΎΠ²ΡΡΡΡΡΡ Π΄Π»Ρ Π΄Π°Π½ΠΎΠ³ΠΎ ΡΠΎΠ²Π°ΡΡ'\r\n )}\r\n \r\n
\r\n ) : null}\r\n\r\n {this.state.succeededPromocode ? (\r\n \r\n \r\n {t('ΠΡΠΎΠΌΠΎΠΊΠΎΠ΄')} {this.state.succeededPromocode}{' '}\r\n {t('Π·Π°ΡΡΠΎΡΠΎΠ²Π°Π½ΠΈΠΉ')}\r\n \r\n
\r\n ) : null}\r\n \r\n \r\n {t('ΠΠ°ΡΡΡΡΡΡ Π±Π΅Π· Π΄ΠΎΡΡΠ°Π²ΠΊΠΈ')}\r\n \r\n \r\n {this.state.succeededPromocode ? (\r\n \r\n \r\n {this.state.basePrice}{' '}\r\n \r\n \r\n ) : null}\r\n\r\n \r\n {this.state.priceWithoutShipping} {t('Π³ΡΠ½')}\r\n \r\n \r\n
\r\n {this.state.shippingCost != null ? (\r\n \r\n
\r\n ) : null}\r\n \r\n \r\n \r\n \r\n \r\n {t('ΠΠΎΡΡΠ°Π²ΠΊΠ°')}\r\n \r\n \r\n {this.state.shippingCost === 0 ? (\r\n <>{t('Π±Π΅Π·ΠΊΠΎΡΡΠΎΠ²Π½ΠΎ')}\r\n ) : (\r\n <>\r\n {this.state.shippingCost} {t('Π³ΡΠ½')}\r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n {t('ΠΠΎ ΡΠΏΠ»Π°ΡΠΈ')}\r\n \r\n \r\n {this.state.price} {t('Π³ΡΠ½')}\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n }\r\n\r\n render() {\r\n const { t, i18n } = this.props;\r\n const homeUrl =\r\n getPublicUrl(i18n) + (this.isProductTypeAudio ? \"/audio\" : \"\");\r\n return (\r\n \r\n Π’ΠΈΠΌ ΡΠ°ΡΠΎΠΌ Π²ΠΈ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΡΠ΄ΠΏΡΠ°Π²ΠΈΡΠΈ Π·Π°ΠΏΠΈΡ\r\n Π²Π°ΡΠΎΠ³ΠΎ Π³ΠΎΠ»ΠΎΡΡ Ρ Π²ΠΈΠ³Π»ΡΠ΄Ρ Π³ΠΎΠ»ΠΎΡΠΎΠ²ΠΎΠ³ΠΎ ΠΏΠΎΠ²ΡΠ΄ΠΎΠΌΠ»Π΅Π½Π½Ρ Ρ Viber ΡΠΈ Telegram\r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\nexport default withTranslation()(Completed);\r\n","import React, { Component } from 'react';\r\nimport {\r\n getUrlQuery,\r\n getStyleSettingsByStyleId,\r\n getAllStyles,\r\n} from '../../utils/utils';\r\nimport moment from 'moment';\r\nimport './admin.css';\r\nimport formatcoords from 'formatcoords';\r\n\r\nexport default class AdminSky extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n var additionalStateValues = this.getAdditionalStateValues(\r\n this.props.settings\r\n );\r\n\r\n let stylesId = getAllStyles(true).map((s) => s.id);\r\n\r\n this.state = {\r\n isSubtitleRequiresChange: false,\r\n isAdditionalInfoOpen: false,\r\n stylesId,\r\n ...additionalStateValues,\r\n };\r\n }\r\n\r\n componentDidMount() {\r\n this.checkStyleIsCorrect();\r\n }\r\n\r\n checkStyleIsCorrect() {\r\n if (this.props.settings) {\r\n let styleId = this.props.settings.style;\r\n if (this.state.stylesId.indexOf(styleId) < 0) {\r\n this.props.onShowError(`ΠΠ΅ Π½Π°ΠΉΠ΄Π΅Π½ ΡΡΠΈΠ»Ρ ${styleId}`);\r\n }\r\n }\r\n }\r\n\r\n getAdditionalStateValues(settings) {\r\n let formattedDate = null;\r\n if (settings && settings.urlQuery) {\r\n if (settings.urlQuery.date) {\r\n var m = moment.utc(settings.urlQuery.date).local();\r\n formattedDate = m.format('DD.MM.YYYY HH:mm');\r\n }\r\n }\r\n\r\n return {\r\n formattedDate,\r\n };\r\n }\r\n\r\n onStyleChange = (event) => {\r\n var value = event.target.value;\r\n var settings = { ...this.props.settings };\r\n var urlQuery = { ...this.props.settings.urlQuery };\r\n var styleSettings = getStyleSettingsByStyleId(value);\r\n\r\n this.props.onSettingsChanged({\r\n ...settings,\r\n style: value,\r\n urlQuery: {\r\n ...urlQuery,\r\n style: value,\r\n ...styleSettings,\r\n },\r\n });\r\n };\r\n\r\n onSizeChange = (event) => {\r\n var value = event.target.value;\r\n\r\n let split = value.split(/[\\sxXΡ
Π₯]+/);\r\n let width = parseInt(split[0], 10) * 10;\r\n let height = parseInt(split[1], 10) * 10;\r\n\r\n var settings = { ...this.props.settings };\r\n var urlQuery = { ...this.props.settings.urlQuery };\r\n\r\n this.props.onSettingsChanged({\r\n ...settings,\r\n size: value,\r\n urlQuery: {\r\n ...urlQuery,\r\n printWidth: width,\r\n printHeight: height,\r\n },\r\n });\r\n };\r\n\r\n onDateChange = (event) => {\r\n this.dateUpdatedForOrderId = this.props.settings.orderId;\r\n\r\n var value = event.target.value;\r\n var parsedUtcDate = null;\r\n\r\n var parsedLocalDate = moment(value, 'DD.MM.YYYY HH:mm');\r\n parsedUtcDate = parsedLocalDate.utc().format();\r\n\r\n var settings = { ...this.props.settings };\r\n var urlQuery = { ...this.props.settings.urlQuery };\r\n\r\n this.setState({\r\n formattedDate: value,\r\n isSubtitleRequiresChange: true,\r\n });\r\n\r\n this.props.onSettingsChanged({\r\n ...settings,\r\n urlQuery: {\r\n ...urlQuery,\r\n date: parsedUtcDate,\r\n },\r\n });\r\n };\r\n\r\n onInputChange = (event) => {\r\n const target = event.target;\r\n const name = target.name;\r\n const type = target.type;\r\n let value = null;\r\n\r\n if (type == 'checkbox') {\r\n value = target.checked;\r\n } else {\r\n value = target.value;\r\n }\r\n\r\n var settings = { ...this.props.settings };\r\n\r\n this.props.onSettingsChanged({\r\n ...settings,\r\n [name]: value,\r\n });\r\n };\r\n\r\n onUrlQueryInputChange = (event) => {\r\n const target = event.target;\r\n const name = target.name;\r\n const type = target.type;\r\n let value = null;\r\n\r\n if (type == 'checkbox') {\r\n value = target.checked;\r\n } else {\r\n value = target.value;\r\n }\r\n\r\n var settings = { ...this.props.settings };\r\n var urlQuery = { ...this.props.settings.urlQuery };\r\n\r\n if (name === 'centerLon' || name === 'centerLat') {\r\n this.setState({\r\n isSubtitleRequiresChange: true,\r\n });\r\n }\r\n this.props.onSettingsChanged({\r\n ...settings,\r\n urlQuery: {\r\n ...urlQuery,\r\n [name]: value,\r\n },\r\n });\r\n };\r\n\r\n generateConfigFileFromState = () => {\r\n let query = getUrlQuery(this.props.settings.urlQuery);\r\n\r\n var result = {\r\n ...this.props.settings,\r\n urlQuery: query,\r\n };\r\n\r\n var stringResult = JSON.stringify(result, null, 2);\r\n\r\n console.log(stringResult);\r\n return stringResult;\r\n };\r\n\r\n handleSubmit = (event) => {\r\n event.preventDefault();\r\n var content = this.generateConfigFileFromState();\r\n this.props.onSaveFile(content);\r\n };\r\n\r\n sendToOrder = (event) => {\r\n event.preventDefault();\r\n var content = this.generateConfigFileFromState();\r\n this.props.onSendFileToOrder(content);\r\n };\r\n\r\n onAdditionalInfoClick = (event) => {\r\n event.preventDefault();\r\n this.setState({ isAdditionalInfoOpen: !this.state.isAdditionalInfoOpen });\r\n };\r\n\r\n copyRedHeart = (event) => {\r\n event.preventDefault();\r\n const text = 'β€οΈ';\r\n navigator.clipboard.writeText(text).then(\r\n () => {\r\n console.log('Async: Copying to clipboard was successful!');\r\n },\r\n (err) => {\r\n console.error('Async: Could not copy text: ', err);\r\n }\r\n );\r\n };\r\n\r\n getFormattedCoordinates() {\r\n let formattedCoordinates = '';\r\n if (\r\n this.props.settings &&\r\n this.props.settings.urlQuery &&\r\n this.props.settings.urlQuery.centerLat\r\n ) {\r\n let urlQuery = this.props.settings.urlQuery;\r\n let latitude = parseFloat(urlQuery.centerLat);\r\n let longitude = parseFloat(urlQuery.centerLon);\r\n formattedCoordinates = formatcoords(latitude, longitude).format(\r\n 'DΒ°M\\'s\"X',\r\n {\r\n latLonSeparator: ' ',\r\n decimalPlaces: 2,\r\n }\r\n );\r\n }\r\n return formattedCoordinates;\r\n }\r\n\r\n renderAdditionalInfo() {\r\n if (!this.state.isAdditionalInfoOpen) return null;\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {t(\"ΠΠ°ΡΠ΅ Π·Π°ΠΌΠΎΠ²Π»Π΅Π½Π½Ρ ΠΏΡΠΈΠΉΠ½ΡΡΠ΅!\")}
\r\n\r\n {t(\"ΠΠΎΠΌΠ΅Ρ Π·Π°ΠΌΠΎΠ²Π»Π΅Π½Π½Ρ:\")} {this.id}\r\n
\r\n\r\n {t(\r\n \"ΠΠΈ Π·Π²'ΡΠΆΠ΅ΠΌΠΎΡΡ Π· ΠΠ°ΠΌΠΈ Π½Π°ΠΉΠ±Π»ΠΈΠΆΡΠΈΠΌ ΡΠ°ΡΠΎΠΌ, Π·Π° Π²ΠΊΠ°Π·Π°Π½ΠΈΠΌ Π½ΠΎΠΌΠ΅ΡΠΎΠΌ ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ, Π΄Π»Ρ ΠΏΡΠ΄ΡΠ²Π΅ΡΠ΄ΠΆΠ΅Π½Π½Ρ Π΄Π΅ΡΠ°Π»Π΅ΠΉ Π·Π°ΠΌΠΎΠ²Π»Π΅Π½Π½Ρ.\"\r\n )}\r\n
\r\n {this.renderSendAudioButttons()}\r\n\r\n {t(\r\n \"Π―ΠΊΡΠΎ Ρ Π²Π°Ρ Ρ ΠΏΠΈΡΠ°Π½Π½Ρ, Π·Π²Π΅ΡΠ½ΡΡΡΡΡ Π΄ΠΎ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΠ° Π·Π° ΡΠ΅Π»Π΅ΡΠΎΠ½ΠΎΠΌ +380665444363, Π°Π±ΠΎ Π·Π° email: info@mimimaps.com.ua\"\r\n )}\r\n
\r\n\r\n \r\n {\" \"}\r\n {t(\"ΠΠΎΠ²Π΅ΡΠ½ΡΡΠΈΡΡ Π½Π° Π³ΠΎΠ»ΠΎΠ²Π½Ρ\")}\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n
\r\n );\r\n }\r\n\r\n render() {\r\n let formattedCoordinates = this.getFormattedCoordinates();\r\n let hangerOptions = [\r\n 'ΠΠ΅Ρ',\r\n 'Π Π°ΠΌΠΊΠ°',\r\n 'ΠΠ΅Π½ΡΠ°',\r\n 'ΠΡΡΡΠΊΠΈ',\r\n 'ΠΠ΅ΡΠ΅Π²ΡΠ½Π½ΡΠΉ ΠΏΠΎΠ΄ΡΠ°ΠΌΠ½ΠΈΠΊ',\r\n ];\r\n let isHangerNotValid = false;\r\n let material = this.props?.settings?.material;\r\n let hanger = this.props?.settings?.hanger;\r\n if (material === 'ΠΡΠΌΠ°Π³Π°') {\r\n if (hanger !== 'ΠΠ΅Ρ' && hanger !== 'Π Π°ΠΌΠΊΠ°') {\r\n isHangerNotValid = true;\r\n }\r\n } else if (material === 'ΠΠΠ₯') {\r\n if (hanger !== 'ΠΠ΅Ρ' && hanger !== 'Π Π°ΠΌΠΊΠ°' && hanger !== 'ΠΠ΅Π½ΡΠ°') {\r\n isHangerNotValid = true;\r\n }\r\n } else if (material === 'Π₯ΠΎΠ»ΡΡ') {\r\n if (hanger !== 'ΠΡΡΡΠΊΠΈ' && hanger !== 'ΠΠ΅ΡΠ΅Π²ΡΠ½Π½ΡΠΉ ΠΏΠΎΠ΄ΡΠ°ΠΌΠ½ΠΈΠΊ') {\r\n isHangerNotValid = true;\r\n }\r\n }\r\n\r\n return (\r\n \r\n );\r\n }\r\n}\r\n","import React, { Component } from 'react';\r\nimport './admin.css';\r\n\r\nexport default class AdminCity extends Component {\r\n constructor(props) {\r\n super(props);\r\n var additionalStateValues = this.getAdditionalStateValues(\r\n this.props.settings\r\n );\r\n\r\n let coordinates = JSON.stringify(props.settings.markersCoordinates);\r\n this.state = {\r\n markersCoordinates: coordinates,\r\n isSubtitleRequiresChange: false,\r\n isMapDirty: false,\r\n isChangingLocationNotAllowed: false,\r\n ...additionalStateValues,\r\n };\r\n }\r\n\r\n getAdditionalStateValues(settings) {\r\n let styleSrcFolder = null;\r\n let initialMapWidth = null;\r\n let initialMapHeight = null;\r\n let initialPadding = null;\r\n if (settings && settings.urlQuery) {\r\n if (settings.urlQuery.styleSrc) {\r\n let lastIndex = settings.urlQuery.styleSrc.lastIndexOf('/');\r\n styleSrcFolder = settings.urlQuery.styleSrc.substring(0, lastIndex + 1);\r\n }\r\n initialMapWidth = settings.urlQuery.mapWidth;\r\n initialMapHeight = settings.urlQuery.mapHeight;\r\n initialPadding = settings.urlQuery.padding;\r\n }\r\n return {\r\n styleSrcFolder,\r\n initialMapWidth,\r\n initialMapHeight,\r\n initialPadding,\r\n };\r\n }\r\n\r\n getStyleSettingsByStyleId = (styleId) => {\r\n try {\r\n let styleSrc = this.state.styleSrcFolder;\r\n\r\n switch (styleId) {\r\n case 'modern':\r\n styleSrc += 'oModern2.json';\r\n break;\r\n case 'simple':\r\n styleSrc += 'oSimple.json';\r\n break;\r\n case 'blue':\r\n styleSrc += 'oBlue.json';\r\n break;\r\n case 'tender':\r\n styleSrc += 'oTender.json';\r\n break;\r\n case 'black':\r\n styleSrc += 'oBlack2.json';\r\n break;\r\n case 'vintage':\r\n styleSrc += 'oVintage.json';\r\n break;\r\n case 'red':\r\n styleSrc += 'oRed.json';\r\n break;\r\n case 'paste':\r\n styleSrc += 'oPaste.json';\r\n break;\r\n case 'harvest':\r\n styleSrc += 'oHarvest.json';\r\n break;\r\n case 'bayside':\r\n styleSrc += 'oBayside.json';\r\n break;\r\n case 'plum':\r\n styleSrc += 'oPlum2.json';\r\n break;\r\n case 'leaf':\r\n styleSrc += 'oLeaf.json';\r\n break;\r\n case 'leaf2':\r\n styleSrc += 'oLeaf.json';\r\n break;\r\n default:\r\n throw 'ΠΠ΅ ΠΌΠΎΠ³Ρ Π½Π°ΠΉΡΠΈ ΡΡΠΈΠ»Ρ: ' + styleId;\r\n }\r\n return {\r\n styleSrc,\r\n };\r\n } catch (e) {\r\n (console.error || console.log).call(console, e.stack || e);\r\n }\r\n };\r\n\r\n onStyleChange = (event) => {\r\n var value = event.target.value;\r\n var settings = { ...this.props.settings };\r\n var urlQuery = { ...this.props.settings.urlQuery };\r\n var styleSettings = this.getStyleSettingsByStyleId(value);\r\n\r\n this.props.onSettingsChanged({\r\n ...settings,\r\n styleId: value,\r\n urlQuery: {\r\n ...urlQuery,\r\n style: value,\r\n ...styleSettings,\r\n },\r\n });\r\n };\r\n\r\n getMapSettingsByMaterialAndLabeStyle = (material, labelStyle) => {\r\n try {\r\n let padding = '';\r\n let mapWidth = '';\r\n let mapHeight = '';\r\n\r\n if (\r\n labelStyle === 'center' ||\r\n labelStyle === 'none' ||\r\n material === 'Π₯ΠΎΠ»ΡΡ'\r\n ) {\r\n padding = 0;\r\n mapWidth = this.props.settings.urlQuery.containerWidth;\r\n mapHeight = this.props.settings.urlQuery.containerHeight;\r\n } else {\r\n var paddingInt = 24;\r\n if (this.state.initialPadding && this.state.initialPadding !== '0') {\r\n paddingInt = parseInt(this.state.initialPadding);\r\n }\r\n\r\n padding = paddingInt + '';\r\n mapWidth = (\r\n parseInt(this.state.initialMapWidth) -\r\n 2 * paddingInt\r\n ).toString();\r\n mapHeight = (\r\n parseInt(this.state.initialMapHeight) -\r\n 2 * paddingInt\r\n ).toString();\r\n }\r\n return {\r\n padding,\r\n mapWidth,\r\n mapHeight,\r\n };\r\n } catch (e) {\r\n (console.error || console.log).call(console, e.stack || e);\r\n }\r\n };\r\n\r\n onMaterialChange = (event) => {\r\n var value = event.target.value;\r\n var settings = { ...this.props.settings };\r\n var urlQuery = { ...this.props.settings.urlQuery };\r\n\r\n this.setState({ isMapDirty: true });\r\n\r\n var mapSettings = this.getMapSettingsByMaterialAndLabeStyle(\r\n value,\r\n this.props.settings.labelStyle\r\n );\r\n\r\n this.props.onSettingsChanged({\r\n ...settings,\r\n material: value,\r\n urlQuery: {\r\n ...urlQuery,\r\n ...mapSettings,\r\n },\r\n });\r\n };\r\n\r\n onSizeChange = (event) => {\r\n var value = event.target.value;\r\n\r\n let split = value.split(/[\\sxXΡ
Π₯]+/);\r\n let width = parseInt(split[0], 10) * 10;\r\n let height = parseInt(split[1], 10) * 10;\r\n\r\n this.setState({ isMapDirty: true });\r\n\r\n var settings = { ...this.props.settings };\r\n var urlQuery = { ...this.props.settings.urlQuery };\r\n\r\n this.props.onSettingsChanged({\r\n ...settings,\r\n size: value,\r\n urlQuery: {\r\n ...urlQuery,\r\n printWidth: width,\r\n printHeight: height,\r\n },\r\n });\r\n };\r\n\r\n onLabelStyleChange = (event) => {\r\n var value = event.target.value;\r\n\r\n this.setState({ isMapDirty: true });\r\n\r\n var settings = { ...this.props.settings };\r\n var urlQuery = { ...this.props.settings.urlQuery };\r\n\r\n var mapSettings = this.getMapSettingsByMaterialAndLabeStyle(\r\n this.props.settings.material,\r\n value\r\n );\r\n\r\n this.props.onSettingsChanged({\r\n ...settings,\r\n labelStyle: value,\r\n urlQuery: {\r\n ...urlQuery,\r\n ...mapSettings,\r\n },\r\n });\r\n };\r\n\r\n onInputChange = (event) => {\r\n const target = event.target;\r\n const name = target.name;\r\n const type = target.type;\r\n let value = null;\r\n\r\n if (type == 'checkbox') {\r\n value = target.checked;\r\n } else {\r\n value = target.value;\r\n }\r\n\r\n var settings = { ...this.props.settings };\r\n this.props.onSettingsChanged({\r\n ...settings,\r\n [name]: value,\r\n });\r\n };\r\n\r\n onMarkersCoordinatesInputChange = (event) => {\r\n var value = event.target.value;\r\n\r\n this.setState({\r\n markersCoordinates: value,\r\n });\r\n };\r\n\r\n onUrlQueryInputChange = (event) => {\r\n const target = event.target;\r\n const name = target.name;\r\n const type = target.type;\r\n let value = null;\r\n\r\n if (type == 'checkbox') {\r\n value = target.checked;\r\n } else {\r\n value = target.value;\r\n }\r\n\r\n var settings = { ...this.props.settings };\r\n var urlQuery = { ...this.props.settings.urlQuery };\r\n\r\n var isSubtitleRequiresChange = false;\r\n var isMapDirty = false;\r\n if (name === 'centerLon' || name === 'centerLat') {\r\n isSubtitleRequiresChange = true;\r\n isMapDirty = true;\r\n } else if (name === 'zoom') {\r\n isMapDirty = true;\r\n }\r\n\r\n this.setState({\r\n isSubtitleRequiresChange,\r\n isMapDirty,\r\n });\r\n\r\n this.props.onSettingsChanged({\r\n ...settings,\r\n urlQuery: {\r\n ...urlQuery,\r\n [name]: value,\r\n },\r\n });\r\n };\r\n\r\n getUrlQuery = (obj) => {\r\n let query = '?';\r\n query += Object.keys(obj)\r\n .map(function (key) {\r\n return `${key}=${obj[key]}`;\r\n })\r\n .join('&');\r\n\r\n return query;\r\n };\r\n\r\n generateConfigFileFromState = () => {\r\n let query = this.getUrlQuery(this.props.settings.urlQuery);\r\n\r\n var result = {\r\n ...this.props.settings,\r\n urlQuery: query,\r\n };\r\n\r\n var stringResult = JSON.stringify(result, null, 2);\r\n\r\n console.log(stringResult);\r\n return stringResult;\r\n };\r\n\r\n handleSubmit = (event) => {\r\n event.preventDefault();\r\n let that = this;\r\n this.validateForm(() => {\r\n var content = that.generateConfigFileFromState();\r\n that.props.onSaveFile(content);\r\n });\r\n };\r\n\r\n sendToOrder = (event) => {\r\n event.preventDefault();\r\n this.validateForm(() => {\r\n var content = this.generateConfigFileFromState();\r\n this.props.onSendFileToOrder(content);\r\n });\r\n };\r\n\r\n validateMarkers = () => {\r\n //if (this.props.settings.)\r\n };\r\n\r\n validateForm(callback) {\r\n try {\r\n var obj = JSON.parse(this.state.markersCoordinates);\r\n var settings = { ...this.props.settings };\r\n this.props.onSettingsChanged(\r\n {\r\n ...settings,\r\n markersCoordinates: obj,\r\n },\r\n callback\r\n );\r\n } catch (e) {\r\n this.props.onShowError(\r\n `ΠΠ΅Π²Π΅ΡΠ½ΡΠΉ ΡΠΎΡΠΌΠ°Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°Ρ. ΠΠ΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌ [[lat,lng],[lat,lng]...]`\r\n );\r\n }\r\n }\r\n\r\n render() {\r\n let hangerOptions = [\r\n 'ΠΠ΅Ρ',\r\n 'Π Π°ΠΌΠΊΠ°',\r\n 'ΠΠ΅Π½ΡΠ°',\r\n 'ΠΡΡΡΠΊΠΈ',\r\n 'ΠΠ΅ΡΠ΅Π²ΡΠ½Π½ΡΠΉ ΠΏΠΎΠ΄ΡΠ°ΠΌΠ½ΠΈΠΊ',\r\n ];\r\n let isHangerNotValid = false;\r\n let material = this.props?.settings?.material;\r\n let hanger = this.props?.settings?.hanger;\r\n if (material === 'ΠΡΠΌΠ°Π³Π°') {\r\n if (hanger !== 'ΠΠ΅Ρ' && hanger !== 'Π Π°ΠΌΠΊΠ°') {\r\n isHangerNotValid = true;\r\n }\r\n } else if (material === 'ΠΠΠ₯') {\r\n if (hanger !== 'ΠΠ΅Ρ' && hanger !== 'Π Π°ΠΌΠΊΠ°' && hanger !== 'ΠΠ΅Π½ΡΠ°') {\r\n isHangerNotValid = true;\r\n }\r\n } else if (material === 'Π₯ΠΎΠ»ΡΡ') {\r\n if (hanger !== 'ΠΡΡΡΠΊΠΈ' && hanger !== 'ΠΠ΅ΡΠ΅Π²ΡΠ½Π½ΡΠΉ ΠΏΠΎΠ΄ΡΠ°ΠΌΠ½ΠΈΠΊ') {\r\n isHangerNotValid = true;\r\n }\r\n }\r\n return (\r\n \r\n );\r\n }\r\n}\r\n","import React, { Component } from \"react\";\r\nimport rjson from \"relaxed-json\";\r\nimport Dropzone from \"react-dropzone\";\r\nimport Toast from \"react-bootstrap/Toast\";\r\nimport Spinner from \"react-bootstrap/Spinner\";\r\nimport superagent from \"superagent\";\r\nimport \"./admin.css\";\r\n\r\nexport default class AdminFileLoader extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n fileName: null,\r\n };\r\n }\r\n\r\n getUrlQueryParameters(queryString) {\r\n var match,\r\n pl = /\\+/g, // Regex for replacing addition symbol with a space\r\n search = /([^&=]+)=?([^&]*)/g,\r\n decode = function (s) {\r\n return decodeURIComponent(s.replace(pl, \" \"));\r\n },\r\n query = queryString.substring(1);\r\n\r\n var urlParams = {};\r\n while ((match = search.exec(query))) {\r\n let value = decode(match[2]);\r\n value = this.fixStringBoolean(value);\r\n urlParams[decode(match[1])] = value;\r\n }\r\n\r\n return urlParams;\r\n }\r\n\r\n fixStringBoolean = (value) => {\r\n if (value == null) return null;\r\n var loweredValue = value.toLowerCase();\r\n return loweredValue === \"true\"\r\n ? true\r\n : loweredValue === \"false\"\r\n ? false\r\n : value;\r\n };\r\n\r\n extractSettings = (fileName, jsonContent) => {\r\n let urlQueryParams = this.getUrlQueryParameters(jsonContent.urlQuery);\r\n this.setState({\r\n fileName,\r\n });\r\n this.raiseOnFileLoaded(fileName, jsonContent, {\r\n ...jsonContent,\r\n urlQuery: { ...urlQueryParams },\r\n });\r\n };\r\n\r\n onFileChangeHandler = (event) => {\r\n var file = event.target.files[0];\r\n this.processFile(file);\r\n };\r\n\r\n onFilesSelected = (files) => {\r\n var file = files[0];\r\n this.processFile(file);\r\n };\r\n\r\n readFromClipboard = (e) => {\r\n navigator.clipboard\r\n .readText()\r\n .then((text) => {\r\n console.log(\"Pasted content: \", text);\r\n this.processContent(text);\r\n })\r\n .catch((err) => {\r\n console.error(\"Failed to read clipboard contents: \", err);\r\n this.raiseOnFileException(err);\r\n });\r\n e.preventDefault();\r\n };\r\n\r\n processFile = (file) => {\r\n if (file) {\r\n let reader = new FileReader();\r\n\r\n reader.readAsText(file);\r\n\r\n var that = this;\r\n reader.onload = function () {\r\n try {\r\n var content = reader.result;\r\n console.log(content);\r\n var fixedContent = rjson.transform(content);\r\n var jsonContent = JSON.parse(fixedContent);\r\n console.log(jsonContent);\r\n that.extractSettings(file.name, jsonContent);\r\n } catch (e) {\r\n (console.error || console.log).call(console, e.stack || e);\r\n that.raiseOnFileException(e);\r\n }\r\n };\r\n\r\n reader.onerror = function () {\r\n console.log(reader.error);\r\n that.raiseOnFileException(reader.error);\r\n };\r\n }\r\n };\r\n\r\n processContent = (content) => {\r\n if (content) {\r\n try {\r\n console.log(content);\r\n var fixedContent = rjson.transform(content);\r\n var jsonContent = JSON.parse(fixedContent);\r\n console.log(jsonContent);\r\n var d = new Date();\r\n\r\n var fileName =\r\n d.getFullYear().toString().substr(-2) +\r\n \"_\" +\r\n (\"0\" + (d.getMonth() + 1)).slice(-2) +\r\n \"_\" +\r\n (\"0\" + d.getDate()).slice(-2) +\r\n \"_\" +\r\n jsonContent.orderId +\r\n \".txt\";\r\n\r\n this.extractSettings(fileName, jsonContent);\r\n } catch (e) {\r\n (console.error || console.log).call(console, e.stack || e);\r\n this.raiseOnFileException(e);\r\n }\r\n }\r\n };\r\n\r\n raiseOnFileLoaded = (fileName, file, settings) => {\r\n this.props.onFileLoaded(fileName, file, settings);\r\n };\r\n\r\n raiseOnFileException = (message) => {\r\n this.props.onFileException(message);\r\n };\r\n\r\n render() {\r\n return (\r\n - \r\n
- \r\n \r\n\r\n
\r\n Π‘Π΅ΡΠ΄ΡΠ΅ Π΄Π»Ρ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΡ\r\n
\r\n {/* \r\n Htmlstream\r\n */}\r\n\r\n ΠΠ°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ Π² ΠΌΠ°ΠΊΠ΅ΡΠ΅ ΠΈ Π±ΡΠ΄Π΅Ρ ΠΎΠΊΡΠ°ΡΠ΅Π½ΠΎ Π² ΡΠ²Π΅Ρ\r\n ΡΠ΅ΠΊΡΡΠ°. β€οΈ\r\n
\r\n\r\n {/*\r\n- \r\n
- \r\n
- \r\n
- \r\n
- \r\n
- \r\n
\r\n\r\n \r\n - \r\n
\r\n \r\n \r\n ΠΡΠ±ΡΠ°ΡΡ ΡΠ°ΠΉΠ»\r\n \r\n \r\n ΠΡΡΠ°Π²ΠΈΡΡ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ\r\n \r\n
\r\n \r\n )}\r\n \r\n );\r\n }\r\n}\r\n","import React, { Component } from \"react\";\r\nimport rjson from \"relaxed-json\";\r\nimport Dropzone from \"react-dropzone\";\r\nimport Toast from \"react-bootstrap/Toast\";\r\nimport Spinner from \"react-bootstrap/Spinner\";\r\nimport superagent from \"superagent\";\r\nimport \"./admin.css\";\r\nimport AdminSky from \"./admin-sky\";\r\nimport AdminCity from \"./admin-city\";\r\nimport AdminFileLoader from \"./admin-fileLoader\";\r\n\r\nexport default class Admin extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n file: null,\r\n fileName: null,\r\n fileKey: null,\r\n settings: null,\r\n toast: {\r\n isShow: false,\r\n alertType: null,\r\n message: null,\r\n },\r\n isLoading: false,\r\n };\r\n }\r\n\r\n onFileLoaded = (fileName, file, settings) => {\r\n this.setState({\r\n fileName,\r\n file,\r\n settings,\r\n fileKey: new Date().getTime().toString(),\r\n });\r\n };\r\n\r\n onFileException = (message) => {\r\n this.showError(message);\r\n };\r\n\r\n onSaveFile = (data) => {\r\n var fileName = this.state.fileName;\r\n var blob = new Blob([data], { type: \"text/plain\" });\r\n if (window.navigator.msSaveOrOpenBlob) {\r\n window.navigator.msSaveBlob(blob, fileName);\r\n } else {\r\n var elem = window.document.createElement(\"a\");\r\n elem.href = window.URL.createObjectURL(blob);\r\n elem.download = fileName;\r\n document.body.appendChild(elem);\r\n elem.click();\r\n document.body.removeChild(elem);\r\n }\r\n };\r\n\r\n onSendFileToOrder = (data) => {\r\n this.setState({\r\n isLoading: true,\r\n });\r\n\r\n //var blob = new Blob([data], { type: \"text/plain\" });\r\n var file = new File([data], this.state.fileName, { type: \"text/plain\" });\r\n\r\n var formData = new FormData();\r\n formData.append(\"file\", file);\r\n // formData.append(\"file\", file);\r\n\r\n let that = this;\r\n superagent\r\n .post(`/api/Email/SendFileToOrder`)\r\n .send(formData)\r\n .end((error, result) => {\r\n that.setState({\r\n isLoading: false,\r\n });\r\n console.log(error);\r\n console.log(result);\r\n\r\n if (!error && result && result.text === \"Ok\") {\r\n that.showSuccess(\"Π€Π°ΠΉΠ» ΡΡΠΏΠ΅ΡΠ½ΠΎ ΠΎΡΠΏΡΠ°Π²Π»Π΅Π½\");\r\n } else {\r\n var errorMessage = \"\";\r\n if (error) {\r\n if (error.message) {\r\n errorMessage += error.message;\r\n }\r\n if (error.response && error.response.text) {\r\n errorMessage += \": \" + error.response.text;\r\n }\r\n } else {\r\n errorMessage += \"ΠΠΎΠ»ΡΡΠ΅Π½ Π½Π΅ΠΏΠ²Π΅ΡΠ½ΡΠΉ ΠΎΡΠ²Π΅Ρ ΠΎΡ ΡΠ΅ΡΠ²Π΅ΡΠ°\";\r\n }\r\n that.showError(errorMessage);\r\n }\r\n });\r\n };\r\n\r\n onCloseToast = () => {\r\n let toast = this.state.toast;\r\n this.setState({\r\n toast: {\r\n ...toast,\r\n isShow: false,\r\n },\r\n });\r\n };\r\n\r\n showError = (e) => {\r\n let toast = this.state.toast;\r\n this.setState({\r\n toast: {\r\n ...toast,\r\n isShow: true,\r\n alertType: \"danger\",\r\n message: e.toString(),\r\n },\r\n });\r\n };\r\n\r\n showSuccess = (e) => {\r\n let toast = this.state.toast;\r\n this.setState({\r\n toast: {\r\n ...toast,\r\n isShow: true,\r\n alertType: \"success\",\r\n message: e.toString(),\r\n },\r\n });\r\n };\r\n\r\n onSettingsChanged = (settings, callback) => {\r\n this.setState({ settings: { ...settings } }, callback);\r\n };\r\n\r\n render() {\r\n return (\r\n {this.state.fileName}
\r\n\r\n \r\n \r\n Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅\r\n {/* 11 mins ago */}\r\n \r\n \r\n \r\n {this.state.toast.message}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}\r\n","import { createAuthProvider } from \"react-token-auth\";\r\nimport axios from \"axios\";\r\n\r\nconst BackendLoginService = (function () {\r\n var instance;\r\n\r\n var isLoggedIn = false;\r\n\r\n const api = axios.create({\r\n baseURL: \"/api\",\r\n });\r\n\r\n const customFetch = (url, config) => {\r\n config.url = url;\r\n return api.request(config);\r\n };\r\n\r\n // function handleFetchErrors(response) {\r\n // if (!response.ok) {\r\n // throw Error(response.statusText);\r\n // }\r\n // return response;\r\n // }\r\n\r\n const [\r\n useAuth,\r\n authFetch,\r\n loginInternal,\r\n logoutInternal,\r\n ] = createAuthProvider({\r\n accessTokenKey: \"jwtToken\",\r\n customFetch: customFetch,\r\n onUpdateToken: (token) =>\r\n api\r\n .post(\"/Auth/refresh\", JSON.stringify(token.refreshToken), {\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n },\r\n })\r\n .then((r) => {\r\n return r.data;\r\n })\r\n .catch((error) => {\r\n isLoggedIn = false;\r\n let message = \"\";\r\n if (error.response) {\r\n if (error.response.status === 403) {\r\n throw new Error(\"Refresh token is outdated\");\r\n }\r\n message = `${error.response.status} ${\r\n error.response.statusText\r\n }\\n${JSON.stringify(error.response.data)}`;\r\n // Request made and server responded\r\n console.log(error.response);\r\n } else if (error.request) {\r\n message = \"no response\";\r\n console.log(error.request);\r\n } else {\r\n message = error.message;\r\n console.log(\"Error\", error.message);\r\n }\r\n throw new Error(message);\r\n }),\r\n // onUpdateToken: (token) =>\r\n // fetch(\"/api/Auth/refresh\", {\r\n // method: \"POST\",\r\n // body: JSON.stringify(token.refreshToken),\r\n // headers: {\r\n // \"Content-Type\": \"application/json\",\r\n // },\r\n // })\r\n // .then(handleFetchErrors)\r\n // .then((r) => r.json())\r\n // .catch((error) => {\r\n // console.log(error);\r\n // }),\r\n });\r\n\r\n const authGet = (url, config) => {\r\n config = config || {};\r\n config.method = \"get\";\r\n\r\n return authFetch(url, config);\r\n };\r\n\r\n const authPost = (url, data, config) => {\r\n config = config || {};\r\n config.method = \"post\";\r\n config.data = data;\r\n\r\n return authFetch(url, config);\r\n };\r\n\r\n const authPut = (url, data, config) => {\r\n config = config || {};\r\n config.method = \"put\";\r\n config.data = data;\r\n\r\n return authFetch(url, config);\r\n };\r\n\r\n const authDelete = (url, config) => {\r\n config = config || {};\r\n config.method = \"delete\";\r\n\r\n return authFetch(url, config);\r\n };\r\n\r\n const login = (googleResponse) => {\r\n return api\r\n .post(\"/Auth/google\", googleResponse)\r\n .then((r) => {\r\n loginInternal(r.data);\r\n isLoggedIn = true;\r\n return r.data;\r\n })\r\n .catch((error) => {\r\n let message = \"\";\r\n if (error.response) {\r\n message = `${error.response.status} ${\r\n error.response.statusText\r\n }\\n${JSON.stringify(error.response.data)}`;\r\n // Request made and server responded\r\n console.log(error.response);\r\n } else if (error.request) {\r\n message = \"no response\";\r\n console.log(error.request);\r\n } else {\r\n message = error.message;\r\n console.log(\"Error\", error.message);\r\n }\r\n throw new Error(message);\r\n });\r\n };\r\n\r\n // const login = (googleResponse) => {\r\n // return fetch(\"/api/Auth/google\", {\r\n // method: \"POST\",\r\n // body: JSON.stringify(googleResponse),\r\n // headers: {\r\n // \"Content-Type\": \"application/json\",\r\n // },\r\n // })\r\n // .then(handleFetchErrors)\r\n // .then((r) => r.json())\r\n // .then((r) => {\r\n // loginInternal(r);\r\n // isLoggedIn = true;\r\n // return r;\r\n // });\r\n // };\r\n\r\n const logout = () => {\r\n logoutInternal();\r\n isLoggedIn = false;\r\n };\r\n\r\n const isLoggedInFun = () => {\r\n return isLoggedIn;\r\n };\r\n\r\n const createInstance = function () {\r\n return {\r\n login,\r\n authGet,\r\n authPost,\r\n authPut,\r\n authDelete,\r\n logout,\r\n isLoggedIn: isLoggedInFun,\r\n };\r\n };\r\n\r\n return {\r\n getInstance: function () {\r\n return instance || (instance = createInstance());\r\n },\r\n };\r\n})();\r\n\r\nexport default BackendLoginService;\r\n","import React, { Component } from \"react\";\r\nimport { GoogleLogin } from \"react-google-login\";\r\nimport BackendLoginService from \"./backendLoginService\";\r\nimport { Redirect, Link } from \"react-router-dom\";\r\n\r\nexport default class Login extends Component {\r\n clientId =\r\n \"119044322202-46ojakubusukc4f80ovkehdali45q380.apps.googleusercontent.com\";\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n redirect: null,\r\n clientEmail: \"\",\r\n serverEmail: \"\",\r\n serverLoginFailed: false,\r\n };\r\n }\r\n\r\n onSuccess = (res) => {\r\n console.log(\"history:\", this.props.history);\r\n console.log(\"Client login succesful:\", res);\r\n\r\n this.setState({\r\n clientEmail: res?.profileObj?.email,\r\n serverLoginFailed: false,\r\n });\r\n //alert(\"Should go back to: \" + this.props.location.state.from);\r\n // this.setState({ email: res.profileObj.email, tokenId: res.tokenId });\r\n // let email = res?.profileObj?.email;\r\n\r\n BackendLoginService.getInstance()\r\n .login(res)\r\n .then((r) => {\r\n console.log(\"Server login succesful\");\r\n let redirect = null;\r\n if (this.props.location.state && this.props.location.state.from) {\r\n redirect = this.props.location.state.from;\r\n }\r\n\r\n let email = r.email;\r\n this.setState({\r\n redirect: redirect,\r\n serverEmail: email,\r\n });\r\n\r\n //alert(BackendLoginService.getInstance().isLoggedIn());\r\n })\r\n .catch((error) => {\r\n this.setState({\r\n serverEmail: \"\",\r\n serverLoginFailed: true,\r\n });\r\n console.log(error);\r\n alert(`Failed to do server login. π’\\n` + error);\r\n });\r\n };\r\n\r\n onFailure = (res) => {\r\n this.setState({\r\n clientEmail: \"\",\r\n serverEmail: \"\",\r\n });\r\n console.log(\"Login failed: res:\", res);\r\n alert(`Failed to do client login. π’`);\r\n };\r\n\r\n renderSuccessAccountInfo = () => {\r\n return (\r\n \r\n \r\n ) : this.state.settings?.productType === \"city\" ? (\r\n \r\n ) : null}\r\n
\r\n Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π°ΠΊΠ°Π·Π°
\r\n\r\n
\r\n \r\n
\r\n {this.state.settings?.productType === \"sky\" ? (\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n };\r\n\r\n renderFailedAccountInfo = () => {\r\n return (\r\n \r\n ΠΡ Π²ΠΎΡΠ»ΠΈ ΠΊΠ°ΠΊ: {this.state.clientEmail}\r\n
\r\n ΠΡΠΉΡΠΈ\r\n
\r\n
\r\n );\r\n };\r\n\r\n renderAccountInfo = () => {\r\n let isLoggedIn = false;\r\n try {\r\n isLoggedIn = BackendLoginService.getInstance().isLoggedIn();\r\n } catch (e) {\r\n console.log(e);\r\n }\r\n\r\n const isSuccess = isLoggedIn;\r\n const isServerLoginFailed =\r\n this.state.clientEmail && !isLoggedIn && this.state.serverLoginFailed;\r\n return isSuccess\r\n ? this.renderSuccessAccountInfo()\r\n : isServerLoginFailed\r\n ? this.renderFailedAccountInfo()\r\n : null;\r\n };\r\n\r\n render() {\r\n if (this.state.redirect) {\r\n console.log(\"Redirecting to: \" + this.state.redirect);\r\n return (\r\n \r\n ΠΠ΅ ΡΠ΄Π°Π»ΠΎΡΡ Π²ΠΎΠΉΡΠΈ Π½Π° ΡΠ΅ΡΠ²Π΅Ρ ΠΊΠ°ΠΊ: {this.state.clientEmail}.\r\n
\r\n ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ Π²ΡΠΉΡΠΈ ΠΈ Π·Π°ΠΉΡΠΈ ΠΏΠΎΠ΄ Π΄ΡΡΠ³ΠΈΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ.\r\n
\r\n ΠΡΠΉΡΠΈ\r\n
\r\n
\r\n \r\n );\r\n }\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { GoogleLogout } from \"react-google-login\";\r\nimport BackendLoginService from \"./backendLoginService\";\r\nimport { Redirect } from \"react-router-dom\";\r\n\r\nexport default class Logout extends Component {\r\n clientId =\r\n \"119044322202-46ojakubusukc4f80ovkehdali45q380.apps.googleusercontent.com\";\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n redirect: null,\r\n };\r\n }\r\n\r\n onSuccess = (res) => {\r\n console.log(\"Client logout succesful:\", res);\r\n //alert(\"Should go back to: \" + this.props.location.state.from);\r\n // this.setState({ email: res.profileObj.email, tokenId: res.tokenId });\r\n\r\n BackendLoginService.getInstance().logout();\r\n\r\n console.log(\"Server logout succesful\");\r\n let redirect = \"/login\";\r\n\r\n this.setState({ redirect: redirect });\r\n };\r\n\r\n onFailure = (res) => {\r\n console.log(\"Logout failed: res:\", res);\r\n alert(`Failed to do client logout. π’`);\r\n };\r\n\r\n renderAccountInfo = () => {\r\n let isLoggedIn = false;\r\n try {\r\n isLoggedIn = BackendLoginService.getInstance().isLoggedIn();\r\n } catch (e) {\r\n console.log(e);\r\n }\r\n\r\n return isLoggedIn ? \r\n {this.renderAccountInfo()}\r\n
\r\n ΠΡ Π·Π°Π»ΠΎΠ³ΠΈΠ½Π΅Π½Ρ
: null;\r\n };\r\n\r\n render() {\r\n if (this.state.redirect) {\r\n console.log(\"Redirecting to: \" + this.state.redirect);\r\n return (\r\n\r\n
\r\n \r\n );\r\n }\r\n}\r\n","//import axios from \"axios\";\r\nimport BackendLoginService from \"../components/login-components/backendLoginService\";\r\n\r\nconst api = BackendLoginService.getInstance();\r\n\r\n// const api = axios.create({\r\n// baseURL: \"/api/promo\",\r\n// });\r\n\r\nexport const insertPromo = (payload) => api.authPost(`/promo`, payload);\r\nexport const getAllPromos = () => api.authGet(`/promo`);\r\nexport const updatePromo = (payload) => api.authPut(`/promo`, payload);\r\nexport const deletePromoByCode = (code) => api.authDelete(`/promo/${code}`);\r\nexport const getPromoByCode = (code) => api.authGet(`/promo/${code}`);\r\n\r\nconst apis = {\r\n insertPromo,\r\n getAllPromos,\r\n updatePromo,\r\n deletePromoByCode,\r\n getPromoByCode,\r\n};\r\n\r\nexport default apis;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport Toast from \"react-bootstrap/Toast\";\r\n\r\nexport default function ToastFun(props) {\r\n //const [isShow, setIsShow] = useState(false);\r\n //const [message, setMessage] = useState(props.message);\r\n\r\n return (\r\n \r\n {this.renderAccountInfo()}\r\n
\r\n \r\n \r\n \r\n Π‘ΠΎΠ·Π΄Π°ΡΡ\r\n \r\n \r\n ΠΡΠΉΡΠΈ\r\n \r\n {showTable && (\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default PromoList;\r\n","import React, { Component } from \"react\";\r\nimport api from \"../../api/promo-api\";\r\nimport moment from \"moment\";\r\n\r\nimport Spinner from \"react-bootstrap/Spinner\";\r\nimport { Redirect } from \"react-router-dom\";\r\n\r\nimport Toast from \"../../utils/toast\";\r\n\r\nexport default class PromoAdd extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n var code = props.match?.params?.code;\r\n\r\n if (code) {\r\n this._isUpdatingMode = true;\r\n } else {\r\n this._isUpdatingMode = false;\r\n }\r\n\r\n var today = moment().local().startOf(\"day\");\r\n var expirationDate = today.add(14, \"days\");\r\n\r\n var expirationDateFormatted = expirationDate.format(\"DD.MM.YYYY HH:mm\");\r\n var expirationDateUtc = expirationDate.utc().format();\r\n\r\n this.state = {\r\n isLoading: false,\r\n isFailed: false,\r\n toast: {\r\n isShow: false,\r\n alertType: null,\r\n message: null,\r\n },\r\n redirect: null,\r\n formattedDate: expirationDateFormatted,\r\n promo: {\r\n code: code,\r\n discount: \"10%\",\r\n expirationDate: expirationDateUtc,\r\n description: \"\",\r\n },\r\n };\r\n }\r\n\r\n componentDidMount = () => {\r\n if (this._isUpdatingMode) {\r\n this.setState({ isLoading: true });\r\n\r\n api\r\n .getPromoByCode(this.state.promo.code)\r\n .then((res) => {\r\n let formattedDate = null;\r\n if (res.data && res.data.expirationDate) {\r\n var m = moment.utc(res.data.expirationDate).local();\r\n formattedDate = m.format(\"DD.MM.YYYY HH:mm\");\r\n }\r\n this.setState({\r\n formattedDate,\r\n promo: { ...res.data },\r\n isLoading: false,\r\n isFailed: false,\r\n });\r\n })\r\n .catch((error) => {\r\n this.setState({ isLoading: false, isFailed: true });\r\n let message = \"\";\r\n if (error.response) {\r\n message = `${error.response.status} ${error.response.statusText}:\\n${error.response.data}`;\r\n // Request made and server responded\r\n console.log(error.response);\r\n } else if (error.request) {\r\n message = \"no response\";\r\n console.log(error.request);\r\n } else {\r\n message = \"request failed\";\r\n console.log(\"Error\", error.message);\r\n }\r\n this.showMessage(message, \"danger\");\r\n });\r\n }\r\n };\r\n\r\n onInputChange = (event) => {\r\n const target = event.target;\r\n const name = target.name;\r\n const type = target.type;\r\n let value = null;\r\n\r\n if (type == \"checkbox\") {\r\n value = target.checked;\r\n } else {\r\n value = target.value;\r\n }\r\n\r\n var promo = { ...this.state.promo };\r\n this.setState({\r\n promo: {\r\n ...promo,\r\n [name]: value,\r\n },\r\n });\r\n };\r\n\r\n onDateChange = (event) => {\r\n var value = event.target.value;\r\n var parsedUtcDate = null;\r\n\r\n var parsedLocalDate = moment(value, \"DD.MM.YYYY HH:mm\");\r\n parsedUtcDate = parsedLocalDate.utc().format();\r\n\r\n var promo = { ...this.state.promo };\r\n this.setState({\r\n formattedDate: value,\r\n promo: {\r\n ...promo,\r\n expirationDate: parsedUtcDate,\r\n },\r\n });\r\n };\r\n\r\n handleSubmit = (event) => {\r\n event.preventDefault();\r\n\r\n this.setState({\r\n isLoading: true,\r\n });\r\n\r\n if (this._isUpdatingMode) {\r\n api\r\n .updatePromo(this.state.promo)\r\n .then((res) => {\r\n this.setState({\r\n isLoading: false,\r\n redirect: \"/promo\",\r\n });\r\n })\r\n .catch((error) => {\r\n this.setState({ isLoading: false });\r\n let message = \"\";\r\n if (error.response) {\r\n message = `${error.response.status} ${\r\n error.response.statusText\r\n }\\n${JSON.stringify(error.response.data)}`;\r\n // Request made and server responded\r\n console.log(error.response);\r\n } else if (error.request) {\r\n message = \"no response\";\r\n console.log(error.request);\r\n } else {\r\n message = `request failed: ${error.message}`;\r\n console.log(\"Error\", error.message);\r\n if (error.message === \"Refresh token is outdated\") {\r\n this.setState({\r\n redirect: \"/login\",\r\n });\r\n }\r\n }\r\n this.showMessage(message, \"danger\");\r\n });\r\n } else {\r\n api\r\n .insertPromo(this.state.promo)\r\n .then((res) => {\r\n this.setState({\r\n isLoading: false,\r\n redirect: \"/promo\",\r\n });\r\n })\r\n .catch((error) => {\r\n this.setState({ isLoading: false });\r\n let message = \"\";\r\n if (error.response) {\r\n message = `${error.response.status} ${\r\n error.response.statusText\r\n }\\n${JSON.stringify(error.response.data)}`;\r\n // Request made and server responded\r\n console.log(error.response);\r\n } else if (error.request) {\r\n message = \"no response\";\r\n console.log(error.request);\r\n } else {\r\n message = `request failed: ${error.message}`;\r\n console.log(\"Error\", error.message);\r\n if (error.message === \"Refresh token is outdated\") {\r\n this.setState({\r\n redirect: \"/login\",\r\n });\r\n }\r\n }\r\n this.showMessage(message, \"danger\");\r\n });\r\n }\r\n };\r\n\r\n onCancelClick = (e) => {\r\n e.preventDefault();\r\n this.setState({\r\n redirect: \"/promo\",\r\n });\r\n };\r\n\r\n onCloseToast = () => {\r\n let toast = this.state.toast;\r\n this.setState({\r\n toast: {\r\n ...toast,\r\n isShow: false,\r\n },\r\n });\r\n };\r\n\r\n showMessage = (e, type = \"success\") => {\r\n let toast = this.state.toast;\r\n this.setState({\r\n toast: {\r\n ...toast,\r\n isShow: true,\r\n alertType: type,\r\n message: e.toString(),\r\n },\r\n });\r\n };\r\n\r\n render() {\r\n if (this.state.redirect) {\r\n return (\r\n ΠΡΠΎΠΌΠΎΠΊΠΎΠ΄Ρ
\r\n\r\n \r\n \r\n
\r\n
\r\n )}\r\n | ΠΠΎΠ΄ | \r\nΠ‘ΠΊΠΈΠ΄ΠΊΠ° | \r\nΠΠΊΡΠΈΠ²Π½ΡΠΉ Π΄ΠΎ | \r\nΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ | \r\n\r\n |
|---|---|---|---|---|
| {s.code} | \r\n{s.discount} | \r\n{formatDate(s.expirationDate)} | \r\n{s.description} | \r\n\r\n\r\n | \r\n
\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React, { Component } from \"react\";\r\nimport { Typeahead, AsyncTypeahead } from \"react-bootstrap-typeahead\"; // ES2015\r\nimport \"react-bootstrap-typeahead/css/Typeahead.css\";\r\nimport \"./admin.css\";\r\n\r\nexport default class AdminNovaPoshta extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { isLoading: false, options: [], city: null };\r\n }\r\n\r\n onCopyClick = (e) => {\r\n navigator.clipboard\r\n .writeText(this.state.city.uk)\r\n .then(() => {\r\n console.log(\"Writed to clipboard\");\r\n })\r\n .catch((err) => {\r\n console.error(\"Failed to write to clipboard\", err);\r\n alert(err);\r\n });\r\n e.preventDefault();\r\n };\r\n\r\n onTypeheadChange = (e) => {\r\n var value = e ? e[0] : null;\r\n this.setState({ city: value });\r\n };\r\n\r\n render() {\r\n function range(start, end) {\r\n return Array.from({ length: end - start + 1 }, (_, i) => i);\r\n }\r\n\r\n //const options = range(0, 1000).map((o) => `Option ${o.toString()}`);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠΎΠΌΠΎΠΊΠΎΠ΄Π°
\r\n\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n}","import React, { Component } from \"react\";\r\nimport BackendLoginService from \"../login-components/backendLoginService\";\r\nimport { Redirect } from \"react-router-dom\";\r\n\r\nexport default class Promo extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n makeCall = (e) => {\r\n e.preventDefault();\r\n\r\n BackendLoginService.getInstance()\r\n .authGet(\"/api/Email/555\")\r\n .then((r) => {\r\n console.log(r);\r\n alert(r.data);\r\n //return r.json();\r\n })\r\n .catch((error) => {\r\n alert(error, \"danger\");\r\n });\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n `${option?.uk}`}\r\n onSearch={(query) => {\r\n this.setState({ isLoading: true });\r\n fetch(`/api/novaposhta/cities/${query}`)\r\n .then((resp) => resp.json())\r\n .then((json) =>\r\n this.setState({\r\n isLoading: false,\r\n options: json,\r\n })\r\n );\r\n }}\r\n options={this.state.options}\r\n onChange={this.onTypeheadChange}/>\r\n \r\n Π‘ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ua\r\n \r\n
\r\n ΠΠΎΠΈΡΠΊ ΠΏΠΎ Π½Π°Π·Π²Π°Π½ΠΈΡ Π³ΠΎΡΠΎΠ΄Π°
\r\n{(this.state.city?.ru) ? \"ru: \" + (this.state.city?.ru) : \"\\u00A0\"\r\n }
\r\n\r\n hello\r\n \r\n \r\n \r\n
\r\n
\r\n );\r\n }\r\n}\r\n","import i18n from \"i18next\";\r\nimport { initReactI18next } from \"react-i18next\";\r\n\r\nimport Backend from \"i18next-http-backend\";\r\nimport LanguageDetector from \"i18next-browser-languagedetector\";\r\n// not like to use this?\r\n// have a look at the Quick start guide\r\n// for passing in lng and translations on init\r\n\r\ni18n\r\n // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)\r\n // learn more: https://github.com/i18next/i18next-http-backend\r\n .use(Backend)\r\n // detect user language\r\n // learn more: https://github.com/i18next/i18next-browser-languageDetector\r\n .use(LanguageDetector)\r\n // pass the i18n instance to react-i18next.\r\n .use(initReactI18next)\r\n // init i18next\r\n // for all options read: https://www.i18next.com/overview/configuration-options\r\n .init({\r\n detection: {\r\n order: [\"path\"],\r\n lookupFromPathIndex: 0,\r\n checkWhitelist: true,\r\n },\r\n backend: {\r\n // for all available options read the backend's repository readme file\r\n loadPath: \"/sky/assets/i18n/{{lng}}.json\",\r\n },\r\n // resources: {\r\n // en: {\r\n // translation: {\r\n // \"Welcome to React\": \"Welcome to React and react-i18next\",\r\n // },\r\n // },\r\n // },\r\n\r\n fallbackLng: \"uk\",\r\n debug: true,\r\n whitelist: [\"ru\", \"uk\", \"en\"],\r\n load: \"languageOnly\",\r\n interpolation: {\r\n escapeValue: false, // not needed for react as it escapes by default\r\n },\r\n nsSeparator: false,\r\n keySeparator: false,\r\n });\r\n\r\nexport default i18n;\r\n","import \"react-app-polyfill/stable\";\r\nimport React, { Suspense } from \"react\";\r\nimport { Redirect } from \"react-router-dom\";\r\nimport ReactDOM from \"react-dom\";\r\nimport \"./index.css\";\r\n\r\nimport * as serviceWorker from \"./serviceWorker\";\r\nimport { BrowserRouter, Route, Switch } from \"react-router-dom\";\r\n\r\nimport Editor from \"./components/editor\";\r\nimport AudioEditor from \"./components/audio-components/editor\";\r\nimport Cart from \"./components/cart\";\r\nimport Completed from \"./components/completed\";\r\nimport ScrollToTop from \"react-router-scroll-top\";\r\nimport Admin from \"./components/admin-components/admin\";\r\nimport Login from \"./components/login-components/login\";\r\nimport Logout from \"./components/login-components/logout\";\r\nimport PromoList from \"./components/promo-components/promo-list\";\r\nimport PromoAdd from \"./components/promo-components/promo-add\";\r\nimport AdminNovaPoshta from \"./components/admin-components/admin-novaPoshta\";\r\n\r\nimport Promo from \"./components/promo-components/promo\";\r\nimport BackendLoginService from \"./components/login-components/backendLoginService\";\r\n\r\nimport \"./i18n\";\r\n\r\n// import $ from \"jquery\";\r\n// import Popper from \"popper.js\";\r\n// import \"bootstrap/dist/css/bootstrap.min.css\";\r\n// import \"bootstrap/dist/js/bootstrap.bundle.min\";\r\n\r\nif (process.env.NODE_ENV === \"development\") {\r\n console.log(\"why-did-you render!\");\r\n const whyDidYouRender = require(\"@welldone-software/why-did-you-render\");\r\n whyDidYouRender(React, {\r\n trackAllPureComponents: true,\r\n titleColor: \"green\",\r\n diffNameColor: \"aqua\",\r\n });\r\n}\r\n\r\nfunction Spinner() {\r\n return (\r\n | # | \r\nFirst | \r\nLast | \r\nHandle | \r\n
|---|---|---|---|
| 1 | \r\nMark | \r\nOtto | \r\n@mdo | \r\n
| 2 | \r\nJacob | \r\nThornton | \r\n@fat | \r\n
| 3 | \r\nLarry | \r\nthe Bird | \r\n
\r\n
\r\n );\r\n}\r\n\r\nlet language = \"\";\r\n\r\ntry {\r\n const path = window.location.pathname;\r\n const pathSplit = path.split(\"/\");\r\n\r\n if (pathSplit && pathSplit.length > 1 && pathSplit[1].length == 2) {\r\n language = pathSplit[1] + \"/\";\r\n }\r\n} catch (e) {\r\n (console.error || console.log).call(console, e.stack || e);\r\n}\r\nconst baseName = \"/\" + language + \"sky\";\r\n\r\nlet isLoggedIn = () => {\r\n try {\r\n var isLoggedIn = BackendLoginService.getInstance().isLoggedIn();\r\n console.log(\"Index isLoggedIn:\", isLoggedIn);\r\n return isLoggedIn;\r\n } catch {\r\n return false;\r\n }\r\n};\r\n\r\nReactDOM.render(\r\n //\r\n \r\n
\r\n \r\n ΠΠ°Π²Π°Π½ΡΠ°ΠΆΠ΅Π½Π½Ρ...\r\n
\r\n\r\n \r\n {/* (\r\n <>\r\n {\r\n return !isLoggedIn() ? (\r\n {\r\n return !isLoggedIn() ? (\r\n {\r\n return !isLoggedIn() ? (\r\n {\r\n console.log(\"Renderring promo route\");\r\n return !isLoggedIn() ? (\r\n \r\n
\r\n