\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: 320,\r\n oldPrice: 390,\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 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: 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 \"Ми використовуємо якісні тонкі пластикові рамки чорного кольору зі склом (натуральним або акриловим) та зручним підвісом. Такі рамки добре підходять до будь-якого стилю інтер’єру. Задня стінка - ДВП з гачками\"\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 \"Ми використовуємо якісні тонкі пластикові рамки чорного кольору зі склом (натуральним або акриловим) та зручним підвісом. Такі рамки добре підходять до будь-якого стилю інтер’єру. Задня стінка - ДВП з гачками\"\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 \"Ми використовуємо якісні тонкі пластикові рамки чорного кольору зі склом (натуральним або акриловим) та зручним підвісом. Такі рамки добре підходять до будь-якого стилю інтер’єру. Задня стінка - ДВП з гачками\"\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 \"Ми використовуємо якісні тонкі пластикові рамки чорного кольору зі склом (натуральним або акриловим) та зручним підвісом. Такі рамки добре підходять до будь-якого стилю інтер’єру. Задня стінка - ДВП з гачками\"\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 \"Ми використовуємо якісні тонкі пластикові рамки чорного кольору зі склом (натуральним або акриловим) та зручним підвісом. Такі рамки добре підходять до будь-якого стилю інтер’єру. Задня стінка - ДВП з гачками\"\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 \"Ми використовуємо якісні тонкі пластикові рамки чорного кольору зі склом (натуральним або акриловим) та зручним підвісом. Такі рамки добре підходять до будь-якого стилю інтер’єру. Задня стінка - ДВП з гачками\"\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 {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 <= 1) {\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 {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 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 !== 'Крючки') {\r\n isHangerNotValid = true;\r\n }\r\n }\r\n\r\n return (\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\r\n let hangerOptions = ['Нет', 'Рамка', 'Лента', 'Крючки'];\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 !== 'Крючки') {\r\n isHangerNotValid = true;\r\n }\r\n }\r\n return (\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}\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