{department.title}
\n {isMobile && (\n \n
\n )}\n \n );\n }\n}\n\nexport default Department;\n","import React, {Component} from \"react\";\nimport PropTypes from \"prop-types\";\n\nexport default class HorizontalScroll extends Component {\n static propTypes = {\n children: PropTypes.element,\n withArrows: PropTypes.bool,\n onScroll: PropTypes.func\n };\n state = {\n scrollLeft: 0,\n isVisibleScroll: true\n };\n static defaultProps = {\n withArrows: true,\n onScroll: () => {}\n };\n scrollWrapper = React.createRef();\n wheel = (e) => {\n const delta =\n Math.abs(e.wheelDeltaY) > Math.abs(e.wheelDeltaX)\n ? e.wheelDeltaY\n : e.wheelDeltaX;\n e.currentTarget.scrollLeft -= delta / 2;\n this.setState({\n scrollLeft: e.currentTarget.scrollLeft\n });\n this.props.onScroll();\n e.preventDefault();\n };\n changeScrollLeft = (direction) => () => {\n const scrollLeft = this.scrollWrapper.current.scrollLeft + direction * 1170; // 1 item = 130\n this.setState({\n scrollLeft\n });\n this.scrollWrapper.current.scrollLeft = scrollLeft;\n };\n componentDidMount() {\n if (this.scrollWrapper.current) {\n this.scrollWrapper.current.addEventListener(`mousewheel`, this.wheel);\n this.scrollWrapper.current.addEventListener(`DOMMouseScroll`, this.wheel);\n }\n }\n componentDidUpdate() {\n const isVisibleScroll = this.checkScroll();\n if (this.state.isVisibleScroll !== isVisibleScroll) {\n this.setState({\n isVisibleScroll\n });\n }\n }\n componentWillUnmount() {\n this.scrollWrapper.current.removeEventListener(`mousewheel`, this.wheel);\n this.scrollWrapper.current.removeEventListener(\n `DOMMouseScroll`,\n this.wheel\n );\n }\n checkScroll() {\n let result = true;\n if (\n this.scrollWrapper.current.scrollLeft === 0 &&\n this.scrollWrapper.current.scrollTo\n ) {\n this.scrollWrapper.current.scrollTo(1, 0);\n result = this.scrollWrapper.current.scrollLeft;\n this.scrollWrapper.current.scrollTo(0, 0);\n }\n return !!result;\n }\n render() {\n const {children, withArrows} = this.props;\n const {isVisibleScroll} = this.state;\n return (\n \n {isVisibleScroll && withArrows && (\n
\n );\n }\n}\n","import React from \"react\";\n\nconst products = [];\nexport default React.createContext(products);\n","import React, {Component} from \"react\";\nimport ProductsCtx from \"../contexts/ProductsCtx\";\n\nexport default (OriginalComponent) =>\n class ColorHexMapContextComponent extends Component {\n render() {\n return (\n {children}
\n {isVisibleScroll && withArrows && (\n \n {products.map((department) => {\n return (\n
\n \n \n \n
\n \n \n \n {this.getIconForMessage(type)}\n {text}\n \n }\n action={[\n \n
\n );\n }\n getIconForMessage(type) {\n switch (type) {\n case `error`:\n return \n \n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n product: productSelector(state),\n condition: conditionSelector(state),\n message: messageSelector(state),\n selectionMode: selectionModeSelect(state),\n});\n\nexport default connect(mapStateToProps, {\n initCanvas: initCanvasAC,\n applyConditionToCanvas: applyConditionToCanvasAC,\n addMessage: addMessageAC,\n changeDesign,\n autoSaveDesign\n})(withMobileContext(Product));\n","import {START, INIT_CANVAS, SUCCESS, FAIL} from \"../constants/action-types\";\nimport Mediator from \"../services/Mediator\";\nimport {toggleStaticObjects} from \"./toggle-static-objects\";\nimport {getDesignFromLocalStorage} from \"../services/lib/save-design\";\nimport {restoreDesign} from \"./restore-design\";\n\nexport const initCanvas = (options) => {\n return (dispatch, getState) => {\n dispatch({\n type: INIT_CANVAS + START\n });\n try {\n Mediator.initCanvas(options);\n dispatch({\n type: INIT_CANVAS + SUCCESS\n });\n const {\n condition,\n product: {\n id,\n meta: {product}\n }\n } = getState();\n const designs = getDesignFromLocalStorage(product, id);\n if (designs) {\n dispatch(restoreDesign(designs));\n }\n\n const hasStatic =\n condition.design &&\n condition.design.objects &&\n condition.design.objects.filter((o) => o.static).length;\n if (!hasStatic) {\n dispatch(toggleStaticObjects(condition));\n }\n } catch (e) {\n dispatch({\n type: INIT_CANVAS + FAIL,\n error: `Произошла ошибка`\n });\n throw e;\n }\n };\n};\n","import {RESTORE_DESIGN} from \"../constants/action-types\";\n\nexport const restoreDesign = (designs) => ({\n type: RESTORE_DESIGN,\n payload: {\n designs\n }\n});\n","import {ADD_MESSAGE} from \"../constants/action-types\";\n\nexport const addMessage = (type, text) => ({\n type: ADD_MESSAGE,\n payload: {\n type,\n text\n }\n});\n","import {CHANGE_DESIGN} from \"../constants/action-types\";\n\nexport const changeDesign = (side, design, index) => ({\n type: CHANGE_DESIGN,\n payload: {\n side,\n design,\n index\n }\n});\n","export const redirect = (url) => {\n if (url && window) {\n window.location = url;\n }\n};\n","import {saveDesignRequest, getURLforPushInHistory} from \"./save-design\";\nimport {redirect} from \"./redirect\";\nimport {push} from \"connected-react-router\";\nimport {SAVE_DESIGN, START, SUCCESS, FAIL} from \"../constants/action-types\";\nimport Mediator from \"../services/Mediator\";\nimport trackPageview from \"../../../utils/track-pageview\";\nimport productSettings from \"../services/product-settings\";\n\nconst convertOptionsToStringWithVerticalLine = (options) =>\n Object.keys(options)\n .map((key) => `${key}:${options[key]}`)\n .join(`|`);\n\nconst getParams = (initialVariants, currentVariants, settings) => {\n if (settings && settings.variants) {\n const changingVariants = settings.variants.reduce(\n (acc, variant) => ({...acc, [variant.name]: true}),\n {}\n );\n const mergedVariants = Object.keys(currentVariants).reduce(\n (acc, variantKey) => {\n if (changingVariants[variantKey]) {\n return {...acc, [variantKey]: currentVariants[variantKey]};\n } else if (initialVariants[variantKey]) {\n return {...acc, [variantKey]: initialVariants[variantKey]};\n }\n return acc;\n },\n {}\n );\n return convertOptionsToStringWithVerticalLine(mergedVariants);\n }\n return ``;\n};\n\nexport const orderProduct = () => (dispatch, getState) => {\n dispatch({\n type: SAVE_DESIGN + START\n });\n saveDesignRequest(dispatch, getState)\n .then((response) => {\n // change url\n if (response.product.id) {\n dispatch({\n type: SAVE_DESIGN + SUCCESS,\n response\n });\n Mediator.isDesignSaved = true;\n dispatch(push(getURLforPushInHistory(getState())));\n } else {\n throw new Error(`Ошибка сохранения`);\n }\n })\n .catch((error) => {\n dispatch({\n type: SAVE_DESIGN + FAIL,\n error\n });\n throw error;\n })\n .then(() => {\n const {\n initialVariants,\n mobileApp,\n condition: {variants: currentVariants, product},\n product: {closeup}\n } = getState();\n const settings = productSettings[product];\n const params = getParams(initialVariants, currentVariants, settings);\n const url = `${closeup}${params ? `?present[variant]=${params}` : ``}`;\n trackPageview({\n page: `/virtual/predmet-sozdan`\n });\n return mobileApp\n ? window.ReactNativeWebView.postMessage(\n JSON.stringify({\n product,\n closeup,\n variants: currentVariants\n })\n )\n : redirect(url);\n });\n};\n","export default (price) => {\n return `${Math.floor((parseInt(price, 10) || 0) / 100)}`;\n};\n","import isTransparent from \"./is-transparent\";\n\nconst hasDesign = (\n {objects = [], background = `transparent`} = {\n objects: [],\n background: `transparent`\n }\n) => {\n const isEmpty = objects && !objects.length;\n return !(isEmpty && isTransparent(background));\n};\n\nexport default hasDesign;\n","import hasDesign from \"./has-design\";\n\n// basic\n// basic_variant_dependent\n// per_item_quantity_discounts\n// variant_and_quantity_dependent\n// card_packs\n\nexport const getDesignInfo = ({data, meta}) => {\n return meta.reduce(\n (acc, design, i) => {\n if (!design.additional && data[i] && hasDesign(data[i].design)) {\n return {...acc, main: acc.main + 1};\n } else if (design.additional && data[i] && hasDesign(data[i].design)) {\n return {...acc, additional: acc.additional + 1};\n }\n return {...acc};\n },\n {\n main: 0,\n additional: 0\n }\n );\n};\n\nexport const getFormattedBasicDependentPriceMap = (priceMap) => {\n // {\n // black: [117000, 23000, 15000]\n // light-blue: [117000, 23000, 15000]\n // melange: [117000, 23000, 15000]\n // turquoise: [117000, 23000, 15000]\n // white: [89000, 21000, 15000]\n // yellow: [117000, 23000, 15000]\n // }\n return priceMap.reduce((acc, current, index) => {\n if (!(index % 2)) {\n return {\n ...acc,\n ...Object.values(current).reduce((_, elem) => {\n return elem.reduce((a, el) => {\n return {...a, [el]: Object.values(priceMap[index + 1])};\n }, {});\n }, {})\n };\n } else {\n return {...acc};\n }\n }, {});\n};\nconst getPriceForBasicVariantDependent = (priceData, {variants, designs}) => {\n const priceMap = getFormattedBasicDependentPriceMap(priceData.variant_prices);\n const dependent = Object.keys(priceData.variant_prices[0])[0];\n const priceMapForVariant = priceMap[variants[dependent]];\n const {main, additional} = getDesignInfo(designs);\n let price = priceMapForVariant[0];\n if (main > 1 && priceMapForVariant[1]) {\n price += priceMapForVariant[1];\n }\n if (additional && priceMapForVariant[2]) {\n price += priceMapForVariant[2] * additional;\n }\n return price;\n};\n\nconst getPriceForBasic = (priceData, {designs}) => {\n const {main, additional} = getDesignInfo(designs);\n let price = priceData.base_price;\n if (main > 1 && priceData.double_side_adjustment) {\n price += priceData.double_side_adjustment;\n }\n if (additional && priceData.additional_design_adjustment) {\n price += priceData.additional_design_adjustment * additional;\n }\n return price;\n};\n\nconst getPriceForPerItemQuantityDiscounts = (priceData) => {\n return Object.values(priceData.price_map)[0];\n};\n\nexport const getFormattedVariantAndQuantityDependent = (priceMap) => {\n // don't take quantity\n // {\n // milk: 2000\n // bitter: 2200\n // }\n\n return priceMap.reduce((acc, item, index) => {\n if (Array.isArray(item)) {\n return item.reduce((ac, el, i) => {\n return {...ac, [el]: Object.values(priceMap[index + 1])[0][i]};\n }, {});\n }\n return acc;\n }, {});\n};\nconst getPriceForVariantAndQuantityDependent = (priceData, {variants}) => {\n const priceMap = getFormattedVariantAndQuantityDependent(priceData.price_map);\n const dependent = priceData.variant_prices[0];\n return priceMap[variants[dependent]];\n};\n\nexport const getFormattedPaperPriceMap = (priceMap) => {\n // {\n // black: [117000, 23000]\n // light-blue: [117000, 23000]\n // melange: [117000, 23000]\n // turquoise: [117000, 23000]\n // white: [89000, 21000]\n // yellow: [117000, 23000]\n // }\n return priceMap.reduce((acc, arr, index) => {\n if (Array.isArray(arr)) {\n return arr.reduce(\n (ac, prop) => ({...ac, [prop]: priceMap[index + 1][200]}),\n {...acc}\n );\n }\n return acc;\n }, {});\n};\nconst getPriceForCardPacks = (priceData, {variants, designs}) => {\n const paperPriceMap = getFormattedPaperPriceMap(priceData.paper_price_maps);\n const laminationPriceMap = priceData.lamination_per_100;\n const cornerRadiusPriceMap = priceData.rounded_corners_per_100;\n const {main} = getDesignInfo(designs);\n\n let price = paperPriceMap[variants.paper_type][main > 1 ? 1 : 0];\n if (laminationPriceMap[variants.lamination]) {\n price += laminationPriceMap[variants.lamination];\n }\n if (variants.corner_radius !== `0`) {\n price += cornerRadiusPriceMap;\n }\n return price;\n};\n\nexport const getPriceFromScheme = (priceData, options) => {\n let price;\n switch (priceData.pricing_scheme) {\n case `basic_variant_dependent`:\n price = getPriceForBasicVariantDependent(priceData, options);\n break;\n case `basic`:\n price = getPriceForBasic(priceData, options);\n break;\n case `per_item_quantity_discounts`:\n price = getPriceForPerItemQuantityDiscounts(priceData);\n break;\n case `variant_and_quantity_dependent`:\n price = getPriceForVariantAndQuantityDependent(priceData, options);\n break;\n case `card_packs`:\n price = getPriceForCardPacks(priceData, options);\n }\n return price;\n};\n","import React, {PureComponent} from \"react\";\nimport PropTypes from \"prop-types\";\nimport {connect} from \"react-redux\";\nimport Provider from \"pubsub-js\";\nimport {\n productSelector,\n designsSelector,\n conditionSelector\n} from \"../selectors\";\nimport priceFormat from \"../services/lib/price-format\";\nimport {\n BACKGROUND_COLOR_CHANGED,\n OBJECT_ADDED,\n OBJECT_REMOVED\n} from \"../constants/event-types\";\nimport {getPriceFromScheme} from \"../services/lib/get-price-from-scheme\";\nimport withErrorBoundary from \"../decorators/withErrorBoundary\";\nimport {longCurrency} from \"../../../utils/currency\";\n\nexport class Price extends PureComponent {\n static propTypes = {\n product: PropTypes.object,\n designs: PropTypes.object,\n condition: PropTypes.object\n };\n state = {\n price: this.props.product.price.price\n };\n componentDidMount() {\n Provider.subscribe(BACKGROUND_COLOR_CHANGED, this.setPrice);\n Provider.subscribe(OBJECT_ADDED, this.setPrice);\n Provider.subscribe(OBJECT_REMOVED, this.setPrice);\n }\n componentWillUnmount() {\n Provider.unsubscribe(BACKGROUND_COLOR_CHANGED);\n Provider.unsubscribe(OBJECT_ADDED);\n Provider.unsubscribe(OBJECT_REMOVED);\n }\n setPrice = () => {\n const calcPrice = this.calculatePrice();\n if (calcPrice !== this.state.price) {\n this.setState({\n price: calcPrice\n });\n }\n };\n componentDidUpdate() {\n this.setPrice();\n }\n calculatePrice() {\n const {\n product: {meta},\n designs: designData,\n condition: {variants}\n } = this.props;\n return getPriceFromScheme(meta.price_data, {\n variants,\n designs: {\n data: designData,\n meta: meta.designs\n }\n });\n }\n render() {\n const {price} = this.state;\n const {currency} = this.props\n\n return {priceFormat(price)}{longCurrency(currency, price)}
;\n }\n}\n\nconst mapStateToProps = (state) => ({\n product: productSelector(state),\n designs: designsSelector(state),\n condition: conditionSelector(state),\n currency: state.currency\n});\n\nexport default connect(mapStateToProps)(withErrorBoundary(Price));\n","import React, {Component} from \"react\";\nimport Provider from \"pubsub-js\";\nimport {\n SELECTION_CREATED,\n SELECTION_CLEARED,\n SELECTION_UPDATED,\n OBJECT_REMOVED\n} from \"../constants/event-types\";\n\nexport default (OriginalComponent) =>\n class SelectionContextComponent extends Component {\n state = {\n selected: null\n };\n onSelectionCreated = (_, selected) => {\n this.setState({\n selected\n });\n };\n onSelectionUpdated = (_, {selected}) => {\n this.onSelectionCreated(_, selected[0]);\n };\n onSelectionCleared = () => {\n this.setState({\n selected: null\n });\n };\n componentDidMount() {\n Provider.subscribe(SELECTION_CREATED, this.onSelectionCreated);\n Provider.subscribe(SELECTION_UPDATED, this.onSelectionUpdated);\n Provider.subscribe(SELECTION_CLEARED, this.onSelectionCleared);\n Provider.subscribe(OBJECT_REMOVED, this.onSelectionCleared);\n }\n componentWillUnmount() {\n Provider.unsubscribe(SELECTION_CREATED, this.onSelectionCreated);\n Provider.unsubscribe(SELECTION_CLEARED, this.onSelectionCleared);\n Provider.unsubscribe(SELECTION_UPDATED, this.onSelectionUpdated);\n Provider.unsubscribe(OBJECT_REMOVED, this.onSelectionCleared);\n }\n render() {\n return \n
\n );\n }\n };\n\nexport default withViewPortContext;\n","import React, {PureComponent} from \"react\";\nimport PropTypes from \"prop-types\";\nimport {connect} from \"react-redux\";\nimport {sellProduct} from \"../AC/sell-product\";\nimport {saveDesign} from \"../AC/save-design\";\nimport MobileCtx from \"../../../contexts/MobileCtx\";\nimport withErrorBoundary from \"../decorators/withErrorBoundary\";\nimport NoSsr from \"@material-ui/core/NoSsr\";\nimport SaveIcon from \"@material-ui/icons/SaveOutlined\";\nimport MoneyIcon from \"@material-ui/icons/AttachMoneyOutlined\";\nimport {Tooltip} from \"@material-ui/core\";\nimport Order from \"./Order\";\nimport {mobileAppSelector, onPlatformSelector} from \"../selectors\";\n\nexport class ActionPanel extends PureComponent {\n static propTypes = {\n isOwner: PropTypes.bool,\n sellProduct: PropTypes.func,\n saveDesign: PropTypes.func,\n classes: PropTypes.object,\n onPlatform: PropTypes.string,\n mobileApp: PropTypes.bool\n };\n\n render() {\n const {isOwner, onPlatform, mobileApp} = this.props;\n return (\n \n \n {(isMobile) => (\n \n \n \n \n )}\n {!isMobile && isOwner && onPlatform !== `vtb` && (\n \n \n )}\n \n
\n );\n }\n}\n\nexport default connect(\n (state) => ({\n onPlatform: onPlatformSelector(state),\n mobileApp: mobileAppSelector(state)\n }),\n {\n sellProduct,\n saveDesign\n }\n)(withErrorBoundary(ActionPanel));\n","import {saveDesignRequest, getURLforPushInHistory} from \"./save-design\";\nimport {redirect} from \"./redirect\";\nimport {push} from \"connected-react-router\";\nimport {SAVE_DESIGN, START, SUCCESS, FAIL} from \"../constants/action-types\";\nimport Mediator from \"../services/Mediator\";\n\nexport const sellProduct = () => (dispatch, getState) => {\n dispatch({\n type: SAVE_DESIGN + START\n });\n saveDesignRequest(dispatch, getState)\n .then((response) => {\n // change url\n if (response.product.id) {\n dispatch({\n type: SAVE_DESIGN + SUCCESS,\n response\n });\n Mediator.isDesignSaved = true;\n dispatch(push(getURLforPushInHistory(getState())));\n } else {\n throw new Error(`Ошибка сохранения`);\n }\n })\n .catch((error) => {\n dispatch({\n type: SAVE_DESIGN + FAIL,\n error\n });\n throw error;\n })\n .then(() => {\n const url = getState().product.sell;\n redirect(url);\n });\n};\n","import React, {PureComponent} from \"react\";\nimport PropTypes from \"prop-types\";\n\nexport default class View extends PureComponent {\n static propTypes = {\n mode: PropTypes.string,\n src: PropTypes.string,\n handleClick: PropTypes.func\n };\n\n render() {\n const {mode, src, handleClick} = this.props;\n return (\n \n
\n {!mobileApp && (\n \n
\n )}\n \n );\n }\n}\n","import React, {PureComponent} from \"react\";\nimport PropTypes from \"prop-types\";\nimport {Line} from \"rc-progress\";\nimport Views from \"./Views\";\n\nexport default class Realism extends PureComponent {\n static propTypes = {\n progress: PropTypes.number,\n views: PropTypes.object\n };\n render() {\n const {progress, views} = this.props;\n return (\n \n {filterLargeViews && filterLargeViews.length > 1 && (\n \n \n \n )}\n {filterLargeViews && filterLargeViews.length > 0 && (\n \n \n \n )}\n
\n {filterSmallViews.length > 1 && (\n \n {filterSmallViews.map((src, index) => {\n return (\n \n
\n );\n })}\n \n \n \n \n \n \n \n
\n );\n }\n}\n\nModal.setAppElement(`body`);\n\nconst mapStateToProps = (state) => ({\n realism: realismSelector(state),\n isModalOpen: modalSelector(state, `realism`)\n});\n\nconst mapDispatchToProps = {\n getRealism,\n toggleModal\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(withErrorBoundary(withStyles(styles)(RealisticView)));\n","import React, {Component} from \"react\";\nimport PropTypes from \"prop-types\";\nimport {connect} from \"react-redux\";\nimport {isShownProductsSelector} from \"../selectors\";\nimport {toggleProducts} from \"../AC/toggle-products\";\nimport ArrowForwardIcon from \"@material-ui/icons/ArrowForwardIos\";\n\nclass Navigation extends Component {\n static propTypes = {\n toggleProducts: PropTypes.func,\n isShownProducts: PropTypes.bool\n };\n toggleProducts = (value) => (e) => {\n if (e && e.preventDefault) {\n e.preventDefault();\n }\n this.props.toggleProducts(value);\n if (window) {\n window.scrollTo(0, 0);\n }\n };\n render() {\n const {isShownProducts} = this.props;\n return (\n \n {realism.progress >= 0 && (\n
\n \n \n \n \n \n \n
\n );\n }\n}\n\nexport default connect(\n (state) => ({\n condition: conditionSelector(state),\n onPlatform: onPlatformSelector(state)\n }),\n {\n addText\n }\n)(withErrorBoundary(withStyles(styles)(AddingText)));\n","import {\n ADD_PICTURE_TO_CANVAS,\n START,\n SUCCESS,\n FAIL\n} from \"../constants/action-types\";\nimport Mediator from \"../services/Mediator\";\nimport isDarkColor from \"../services/lib/is-dark-color\";\n\nconst isDarkDesign = (design) => {\n return design && design.background && isDarkColor(design.background);\n};\n\nconst isBlackProduct = (variants) => {\n return variants && variants.color === `black`;\n};\n\nexport const addPictureToCanvas = (params, options, fields) => (\n dispatch,\n getState\n) => {\n dispatch({\n type: ADD_PICTURE_TO_CANVAS + START\n });\n (async () => {\n const {\n condition: {variants, design}\n } = getState();\n try {\n let fill;\n if (options.fill) {\n fill = options.fill;\n } else {\n fill =\n isBlackProduct(variants) || isDarkDesign(design) ? `#fff` : `#000`;\n }\n await Mediator.addPictureToCanvas(\n params,\n {\n ...options,\n fill\n },\n fields\n );\n dispatch({\n type: ADD_PICTURE_TO_CANVAS + SUCCESS\n });\n } catch (e) {\n dispatch({\n type: ADD_PICTURE_TO_CANVAS + FAIL,\n error: `Произошла ошибка`\n });\n throw e;\n }\n })();\n};\n","import {ADD_IMAGE, START, TICK, SUCCESS, FAIL} from \"../constants/action-types\";\nimport {API_IMAGES} from \"../constants/api\";\nimport {addPictureToCanvas} from \"./add-picture-to-canvas\";\nimport {closeAllModals} from \"./modal\";\nimport {PICTURE_POLL_TIME} from \"../constants\";\n\nexport const addImage = (id, fields = {}) => (dispatch, getState) => {\n const {mobileApp} = getState();\n const authHeader = mobileApp ? window.authHeaders : {};\n dispatch({\n type: ADD_IMAGE + START\n });\n dispatch(closeAllModals());\n const interval = setInterval(() => {\n fetch(`${API_IMAGES}/${id}`, {\n headers: {\n \"Accept\": `application/json`,\n \"Content-Type\": `application/json`,\n ...authHeader\n },\n credentials: `same-origin`\n })\n .then((res) => {\n if (res.status >= 400) {\n throw new Error(`Error`);\n }\n return res.json();\n })\n .then((response) => {\n if (!response) {\n dispatch({type: ADD_IMAGE + TICK});\n } else {\n clearInterval(interval);\n const {\n picture_content_type: type,\n canvas_url: original,\n original_width: originalWidth,\n original_height: originalHeight\n } = response;\n dispatch(\n addPictureToCanvas(\n {\n id,\n type,\n original,\n originalWidth,\n originalHeight\n },\n {},\n fields\n )\n );\n dispatch({type: ADD_IMAGE + SUCCESS, response});\n }\n })\n .catch((error) => {\n clearInterval(interval);\n dispatch({type: ADD_IMAGE + FAIL, error});\n });\n }, PICTURE_POLL_TIME);\n};\n","import {\n UPLOAD_IMAGE,\n START,\n TICK,\n FAIL,\n SUCCESS\n} from \"../constants/action-types\";\n\nimport request from \"superagent\";\nimport {API_IMAGES} from \"../constants/api\";\nimport {addImage} from \"./add-image\";\nexport const uploadImage = (data, fields, shutterstock) => (\n dispatch,\n getState\n) => {\n dispatch({\n type: UPLOAD_IMAGE + START\n });\n const formData = new FormData();\n formData.append(`authenticity_token`, getState().authenticityToken);\n if (typeof data === `string`) {\n formData.append(`image[remote_picture_url]`, data);\n\n if (shutterstock) {\n formData.append(`image[shutter_stock_params][image_id]`, shutterstock.id);\n formData.append(\n `image[shutter_stock_params][search_query]`,\n shutterstock.searchRequest\n );\n formData.append(\n `image[shutter_stock_params][contributor_id]`,\n shutterstock.contributor\n );\n }\n } else {\n formData.append(`image[picture]`, data);\n }\n request\n .post(API_IMAGES)\n .send(formData)\n .on(`progress`, (e) => {\n if (e.direction === `upload`) {\n dispatch({\n type: UPLOAD_IMAGE + TICK,\n payload: {\n progress: e.percent\n }\n });\n }\n })\n .end((error, response) => {\n if (error) {\n dispatch({\n type: UPLOAD_IMAGE + FAIL,\n error\n });\n throw error;\n } else {\n const json = JSON.parse(response.text);\n dispatch({\n type: UPLOAD_IMAGE + SUCCESS\n });\n if (json.id) {\n dispatch(addImage(json.id, fields));\n }\n }\n });\n};\n","import React, {PureComponent} from \"react\";\nimport PropTypes from \"prop-types\";\nimport {connect} from \"react-redux\";\nimport {addPictureToCanvas} from \"../../../AC/add-picture-to-canvas\";\nimport {removePicture} from \"../../../AC/remove-picture\";\nimport LazyLoad from \"react-lazyload\";\n\nexport class Picture extends PureComponent {\n static propTypes = {\n type: PropTypes.string,\n picture: PropTypes.object,\n addPictureToCanvas: PropTypes.func,\n removability: PropTypes.bool,\n removePicture: PropTypes.func,\n onRequestCloseModal: PropTypes.func\n };\n addPictureToCanvas = (params) => (e) => {\n const {type} = this.props;\n let flag;\n if (type === `images`) {\n flag = `isLocal`;\n } else if (type === `cliparts`) {\n flag = `isClipart`;\n } else if (type === `textures`) {\n flag = `isTexture`;\n }\n e.preventDefault();\n this.props.addPictureToCanvas(params, {\n [flag]: true\n });\n this.props.onRequestCloseModal();\n };\n removePicture = (params) => () => {\n this.props.removePicture(params);\n };\n render() {\n const {\n picture: {preview, ...params},\n removability\n } = this.props;\n return (\n \n \n
\n \n \n \n Загрузка...}\n >\n 
\n \n \n {removability && (\n \n ×\n \n )}\n
\n );\n }\n}\n\nconst mapDispatchToProps = {\n addPictureToCanvas,\n removePicture\n};\n\nexport default connect(null, mapDispatchToProps)(Picture);\n","import {REMOVE_IMAGE, START, SUCCESS, FAIL} from \"../constants/action-types\";\nimport {API_IMAGES} from \"../constants/api\";\n\nexport const removePicture = ({id}) => (dispatch, getState) => {\n dispatch({\n type: REMOVE_IMAGE + START\n });\n fetch(`${API_IMAGES}/${id}`, {\n method: `delete`,\n headers: {\n \"Accept\": `application/json`,\n \"Content-Type\": `application/json`\n },\n body: JSON.stringify({\n /* eslint-disable camelcase */\n authenticity_token: getState().authenticityToken\n /* eslint-enable camelcase */\n }),\n credentials: `same-origin`\n })\n .then((res) => {\n if (res.status >= 400) {\n throw new Error(`Error`);\n }\n dispatch({type: REMOVE_IMAGE + SUCCESS, payload: {id}});\n })\n .catch((error) => {\n dispatch({type: REMOVE_IMAGE + FAIL, error});\n });\n};\n","import React, {PureComponent} from \"react\";\nimport PropTypes from \"prop-types\";\nimport Picture from \"./Picture\";\nimport Button from \"@material-ui/core/Button\";\n\nexport default class Pictures extends PureComponent {\n static propTypes = {\n type: PropTypes.string,\n pictures: PropTypes.array,\n removability: PropTypes.bool,\n onRequestCloseModal: PropTypes.func\n };\n state = {\n end: 40\n };\n showMore = () => {\n const step = 40;\n this.setState({\n end: this.state.end + step\n });\n };\n render() {\n const {pictures, onRequestCloseModal, removability, type} = this.props;\n const {end} = this.state;\n return (\n \n {pictures.length ? (\n pictures.slice(0, end).map((picture) => {\n return (\n
\n \n
\n );\n })\n ) : (\n Нет изображений\n )}\n \n {pictures.length && end <= pictures.length ? (\n \n ) : null}\n
\n \n
\n \n {[\n {\n name: `Мои фото`,\n type: `images`\n },\n {\n name: `Текстуры`,\n type: `textures`\n }\n ].map((category) => {\n const {type, name} = category;\n return (\n \n \n {name}\n
\n {` `}\n \n );\n })}\n \n
\n \n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n pictures: picturesSelector(state)\n});\n\nexport default connect(mapStateToProps)(PictureBox);\n","import React from \"react\";\nimport createSvgIcon from \"@material-ui/icons/utils/createSvgIcon\";\n\nexport default createSvgIcon(\n \n
\n \n JPG или PNG размером не более{` `}\n 14МБ.\n
\n\n
\n \n
\n \n
\n \n {\n trackEvent({\n category: `Editor`,\n action: `Open Google search`\n });\n this.changeSource(`google-search`);\n }}\n className={classes.lightButton}\n >\n Искать в\n
\n {shutterStockEnabled && !this.areThereShutterstockPicsOnCanvas() && (\n \n {\n trackEvent({\n category: `Editor`,\n action: `Open ShutterStock search`\n });\n this.changeSource(`shutterstock`);\n }}\n className={classes.lightButton}\n >\n Искать в ShutterStock\n \n
\n )}\n \n Загружая изображение, вы принимаете{` `}\n Пользовательское соглашение и подтверждаете\n соблюдение авторских прав\n
\n\n \n 
\n \n
\n );\n}\n\nImage.propTypes = {\n url: PropTypes.string,\n previewSrc: PropTypes.string,\n alt: PropTypes.string,\n handleClick: PropTypes.func\n};\n\nexport default Image;\n","import React, {useMemo, useCallback} from \"react\";\nimport {useSelector, useDispatch} from \"react-redux\";\nimport Image from \"./Image\";\nimport {uploaderSelector} from \"../../../selectors\";\nimport {uploadImage} from \"../../../AC/upload-image\";\nimport Loader from \"../../../../common/Loader\";\nimport Button from \"@material-ui/core/Button\";\nimport {\n incrementThirdPartySearchPage,\n search\n} from \"../../../AC/third-party-search\";\n\nexport function GoogleSearchResults() {\n const dispatch = useDispatch();\n const {\n uploader: {data, loading, loaded}\n } = useSelector((state) => ({\n uploader: uploaderSelector(state)\n }));\n\n const showMore = useCallback(() => {\n dispatch(incrementThirdPartySearchPage());\n dispatch(search());\n }, [dispatch]);\n\n const doesNextPageExist = useMemo(\n () =>\n data &&\n data.length &&\n data[data.length - 1].items &&\n data[data.length - 1].queries.nextPage &&\n data[data.length - 1].queries.nextPage[0].count > 0,\n [data]\n );\n\n return (\n \n
\n );\n}\n\nGoogleSearchResults.propTypes = {};\n","import React from \"react\";\nimport {useSelector} from \"react-redux\";\nimport {GoogleSearchResults} from \"./GoogleSearchResults\";\nimport {ShutterStockResults} from \"./ShutterStockResults\";\nimport {uploaderSelector} from \"../../../selectors\";\n\nconst resultsSources = {\n \"google-search\": \n {loading && !loaded &&
\n \n () => dispatch(uploadImage(url))}\n />\n
\n );\n })\n ) : (\n Ничего не найдено\n );\n })}\n \n {doesNextPageExist ? (\n \n ) : null}\n
\n \n () =>\n dispatch(uploadShutterstockImage(url, query, item))}\n />\n
\n ))\n );\n }, [data, dispatch, query]);\n\n return (\n \n
\n );\n}\n","import {uploadImage} from \"./upload-image\";\nimport {shutterStockRetrieveContributor} from \"../constants/api\";\nimport {FAIL, UPLOAD_IMAGE} from \"../constants/action-types\";\n\nexport const uploadShutterstockImage = (url, query, item) => (dispatch) => {\n shutterStockRetrieveContributor(item.contributor.id)\n .then((contributor) =>\n dispatch(\n uploadImage(\n url,\n {\n isShutterstockImage: true\n },\n {\n id: item.id,\n searchRequest: query,\n contributor: contributor[`display_name`]\n }\n )\n )\n )\n .catch(() =>\n dispatch({\n type: UPLOAD_IMAGE + FAIL\n })\n );\n};\n","import React, {Component} from \"react\";\nimport PropTypes from \"prop-types\";\nimport {connect} from \"react-redux\";\nimport {withStyles} from \"@material-ui/core/styles\";\nimport TextField from \"@material-ui/core/TextField\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport SearchIcon from \"@material-ui/icons/Search\";\nimport {\n setSearchQuery,\n incrementThirdPartySearchPage,\n search,\n clearSearchData\n} from \"../../../AC/third-party-search\";\nimport {uploaderSelector} from \"../../../selectors\";\nimport withErrorBoundary from \"../../../decorators/withErrorBoundary\";\nimport {Results} from \"./Results\";\n\nconst styles = () => ({\n input: {\n padding: `14px`\n }\n});\n\nexport class ThirdPartySearch extends Component {\n static propTypes = {\n source: PropTypes.oneOf(`google-search`, `shutterstock`),\n classes: PropTypes.object,\n uploader: PropTypes.object,\n search: PropTypes.func,\n clearSearchData: PropTypes.func,\n uploadImage: PropTypes.func,\n setSearchQuery: PropTypes.func,\n incrementGoogleSearchPage: PropTypes.func\n };\n textValueRef = React.createRef();\n inputLabels = {\n \"google-search\": `Искать в Google`,\n \"shutterstock\": `Искать в ShutterStock`\n };\n handleChange = (event) => {\n this.props.setSearchQuery(event.target.value);\n };\n handleSubmit = (e) => {\n e.preventDefault();\n if (this.props.uploader.query) {\n this.props.search(this.props.source);\n }\n };\n componentDidMount() {\n this.textValueRef.current.focus();\n }\n componentWillUnmount() {\n this.props.clearSearchData();\n }\n render() {\n const {\n classes,\n uploader: {source, query: value}\n } = this.props;\n return (\n \n {loading && !loaded &&
\n \n {doesNextPageExist ? (\n \n ) : null}\n
\n \n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n uploader: uploaderSelector(state)\n});\n\nconst mapDispatchToProps = {\n search,\n setSearchQuery,\n incrementGoogleSearchPage: incrementThirdPartySearchPage,\n clearSearchData\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(withStyles(styles)(withErrorBoundary(ThirdPartySearch)));\n","import React, {PureComponent} from \"react\";\nimport PropTypes from \"prop-types\";\nimport {connect} from \"react-redux\";\nimport {uploaderSelector} from \"../../../selectors\";\nimport Local from \"./Local\";\nimport ThirdPartySearch from \"./ThirdPartySearch\";\n\nexport class Uploader extends PureComponent {\n static propTypes = {\n source: PropTypes.string\n };\n static defaultProps = {\n source: `local`\n };\n getSourceContent() {\n switch (this.props.source) {\n case `local`:\n return \n \n
\n \n
\n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n source: uploaderSelector(state).source\n});\n\nexport default connect(mapStateToProps)(Uploader);\n","import React, {PureComponent} from \"react\";\nimport PropTypes from \"prop-types\";\nimport {connect} from \"react-redux\";\nimport Modal from \"react-modal\";\nimport withErrorBoundary from \"../../decorators/withErrorBoundary\";\nimport {toggleModal} from \"../../AC/modal\";\nimport {\n modalSelector,\n conditionSelector,\n onPlatformSelector\n} from \"../../selectors\";\nimport Uploader from \"./Uploader\";\nimport ImageIcon from \"@material-ui/icons/ImageOutlined\";\nimport AddIcon from \"@material-ui/icons/Add\";\nimport NoSsr from \"@material-ui/core/NoSsr\";\nimport Tooltip from \"@material-ui/core/Tooltip\";\nimport {withStyles} from \"@material-ui/core/styles\";\nimport Button from \"@material-ui/core/Button\";\nimport classNames from \"classnames\";\nimport productSettings from \"../../services/product-settings\";\n\nconst styles = () => ({\n button: {\n backgroundColor: `#52abda`,\n height: `46px`,\n width: `100%`,\n boxShadow: `none`,\n borderRadius: `23px`,\n \"&:hover\": {\n opacity: `.8`,\n backgroundColor: `#52abda`\n },\n \"&:active\": {\n boxShadow: `none`\n }\n },\n vtb: {\n borderRadius: `4px`,\n backgroundColor: `#00AAFF`,\n color: `white`\n }\n});\n\nclass AddingPicture extends PureComponent {\n static propTypes = {\n isModalOpen: PropTypes.bool,\n condition: PropTypes.object,\n toggleModal: PropTypes.func,\n classes: PropTypes.object,\n onPlatform: PropTypes.string\n };\n toggleModal = () => {\n this.props.toggleModal(`pictures`);\n };\n isDisabled = () => {\n const {\n condition: {product, side}\n } = this.props;\n const settings = productSettings[product];\n return (\n settings &&\n settings.permissions &&\n settings.permissions[side] &&\n !settings.permissions[side].image\n );\n };\n render() {\n const {isModalOpen, classes, onPlatform} = this.props;\n const disabled = this.isDisabled();\n return (\n {this.getSourceContent()}
\n \n \n \n \n \n
\n );\n }\n}\n\nModal.setAppElement(`body`);\n\nconst mapStateToProps = (state) => ({\n isModalOpen: modalSelector(state, `pictures`),\n condition: conditionSelector(state),\n onPlatform: onPlatformSelector(state)\n});\n\nexport default connect(mapStateToProps, {toggleModal})(\n withErrorBoundary(withStyles(styles)(AddingPicture))\n);\n","import React, {PureComponent} from \"react\";\nimport AddingText from \"./AddingText\";\nimport AddingPicture from \"./AddingPicture\";\n\nexport class ObjectManager extends PureComponent {\n render() {\n return (\n \n \n
\n \n \n
\n );\n }\n}\n\nexport default ObjectManager;\n","import {\n APPLY_CONDITION_TO_SIDES,\n START,\n SUCCESS,\n FAIL\n} from \"../constants/action-types\";\nimport Mediator from \"../services/Mediator\";\n\nexport const applyConditionToSides = () => {\n return (dispatch, getState) => {\n dispatch({\n type: APPLY_CONDITION_TO_SIDES + START\n });\n (async () => {\n try {\n const {\n condition: {product, variants},\n product: {\n meta: {designs}\n }\n } = getState();\n const assets = await Promise.all(\n designs.map(async (design) => {\n return {\n [design.side]: await Mediator.getProductAssets({\n product,\n style: `small`,\n side: design.side,\n variants\n })\n };\n })\n ).catch((e) => {\n throw new Error(e);\n });\n dispatch({\n type: APPLY_CONDITION_TO_SIDES + SUCCESS,\n payload: {\n assets: assets.reduce((acc, item) => ({...acc, ...item}), {})\n }\n });\n } catch (e) {\n dispatch({\n type: APPLY_CONDITION_TO_SIDES + FAIL,\n error: `Произошла ошибка при загрузке сторон товара`\n });\n }\n })();\n };\n};\n","import {CHANGE_SIDE} from \"../constants/action-types\";\n\nconst getSideIndex = (metaDesigns, side) => {\n return metaDesigns.reduce(\n (acc, item, i) => (item.side === side ? i : acc),\n 0\n );\n};\nconst getSideInfo = (side, designs) => {\n return designs.find((design) => {\n return design.side === side;\n });\n};\nexport const changeSide = (side) => (dispatch, getState) => {\n const {\n designs,\n condition: {design: prevDesign, side: prevSide},\n product: {\n meta: {designs: metaDesigns}\n }\n } = getState();\n\n const prevSideIndex = getSideIndex(metaDesigns, prevSide);\n const nextSideIndex = getSideIndex(metaDesigns, side);\n const {dimensions, dpi} = getSideInfo(side, metaDesigns);\n\n dispatch({\n type: CHANGE_SIDE,\n payload: {\n prev: {\n side: prevSide,\n index: prevSideIndex,\n design: prevDesign ? prevDesign : {}\n },\n next: {\n side,\n index: nextSideIndex,\n design: designs[nextSideIndex].design,\n dimensions,\n dpi\n }\n }\n });\n};\n","import React, {PureComponent} from \"react\";\nimport {connect} from \"react-redux\";\nimport classnames from \"classnames\";\nimport PropTypes from \"prop-types\";\nimport Loader from \"../../common/Loader\";\nimport {\n productSelector,\n conditionSelector,\n designsSelector,\n sidesSelector,\n onPlatformSelector\n} from \"../selectors\";\nimport {applyConditionToSides} from \"../AC/apply-condition-to-sides\";\nimport {changeSide} from \"../AC/change-side\";\nimport withErrorBoundary from \"../decorators/withErrorBoundary\";\nimport {getFormattedBasicDependentPriceMap} from \"../services/lib/get-price-from-scheme\";\nimport hasDesign from \"../services/lib/has-design\";\nimport priceFormat from \"../services/lib/price-format\";\nimport { shortCurrency } from \"../../../utils/currency\";\n\nclass SideControl extends PureComponent {\n static propTypes = {\n product: PropTypes.object,\n condition: PropTypes.object,\n sides: PropTypes.object,\n designs: PropTypes.object,\n changeSide: PropTypes.func,\n applyConditionToSides: PropTypes.func,\n onPlatform: PropTypes.string\n };\n componentDidMount() {\n this.props.applyConditionToSides();\n }\n componentDidUpdate(prevProps) {\n const {condition: prevCondition} = prevProps;\n const {condition: nextCondition} = this.props;\n // disable update canvas when change design\n if (\n JSON.stringify({...prevCondition, design: ``}) ===\n JSON.stringify({...nextCondition, design: ``})\n ) {\n return;\n }\n this.props.applyConditionToSides();\n }\n changeSide = (side) => () => {\n return this.props.changeSide(side);\n };\n getPriceLabelForSide(side) {\n const {\n product: {\n meta: {designs, price_data: priceData}\n },\n designs: designData,\n condition: {variants},\n onPlatform,\n currency\n } = this.props;\n\n const getIndexOfDesignBySide = (metaDesigns, sideParam) => {\n return metaDesigns.reduce(\n (acc, item, i) => (item.side === sideParam ? i : acc),\n 0\n );\n };\n const indexOfDesign = getIndexOfDesignBySide(designs, side);\n const sideHasDesign = hasDesign(designData[indexOfDesign].design);\n\n let price = null;\n\n const isMainSide =\n indexOfDesign === 0 && !designs[indexOfDesign].additional;\n const isMainDoubleSide =\n indexOfDesign === 1 && !designs[indexOfDesign].additional;\n const isAdditionalDesign = !!designs[indexOfDesign].additional;\n\n if (priceData.pricing_scheme === `basic_variant_dependent`) {\n const priceMap = getFormattedBasicDependentPriceMap(\n priceData.variant_prices\n );\n const dependent = Object.keys(priceData.variant_prices[0])[0];\n const priceMapForVariant = priceMap[variants[dependent]];\n\n if (isMainSide) {\n price = priceMapForVariant[0];\n } else if (isMainDoubleSide) {\n price = priceMapForVariant[1] || 0;\n } else if (isAdditionalDesign) {\n price = priceMapForVariant[2] || 0;\n } else {\n price = 0;\n }\n } else if (priceData.pricing_scheme === `basic`) {\n if (isMainSide) {\n price = priceData.base_price;\n } else if (isMainDoubleSide) {\n price = priceData.double_side_adjustment || 0;\n } else if (isAdditionalDesign) {\n price = priceData.additional_design_adjustment || 0;\n } else {\n price = 0;\n }\n }\n\n return (\n (price || price === 0) && (\n \n
\n \n
\n \n {designs.map((design) => {\n const {side, name, translated_name: translatedName} = design;\n return (\n \n {loading && !loaded && \n 
\n {priceData.pricing_scheme === `basic_variant_dependent` ||\n priceData.pricing_scheme === `basic`\n ? this.getPriceLabelForSide(side)\n : null}\n \n )}\n
\n );\n })}\n \n )\n );\n }\n}\n\nexport default connect(\n (state) => ({\n product: productSelector(state),\n designs: designsSelector(state),\n condition: conditionSelector(state),\n sides: sidesSelector(state),\n onPlatform: onPlatformSelector(state),\n currency: state.currency\n }),\n {\n changeSide,\n applyConditionToSides\n }\n)(withErrorBoundary(SideControl));\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport TextField from \"@material-ui/core/TextField\";\n\nclass TextValue extends React.Component {\n static propTypes = {\n current: PropTypes.string,\n handleChange: PropTypes.func,\n inputRef: PropTypes.object\n };\n render() {\n const {current, handleChange, inputRef} = this.props;\n return (\n \n
\n );\n }\n}\n\nexport default TextValue;\n","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport PropTypes from \"prop-types\";\nimport FormControl from \"@material-ui/core/FormControl\";\nimport InputLabel from \"@material-ui/core/InputLabel\";\nimport OutlinedInput from \"@material-ui/core/OutlinedInput\";\nimport Select from \"@material-ui/core/Select\";\nimport MenuItem from \"@material-ui/core/MenuItem\";\nimport {withStyles} from \"@material-ui/core/styles\";\n\nconst styles = {\n input: {\n \"paddingTop\": `14px`,\n \"paddingBottom\": `14px`,\n \"&:hover\": {\n backgroundColor: `rgba(0, 0, 0, 0.08)`\n }\n }\n};\n\nclass MSelect extends React.Component {\n static propTypes = {\n name: PropTypes.string,\n isOpen: PropTypes.bool,\n label: PropTypes.string,\n current: PropTypes.shape({\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n label: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n }),\n onChange: PropTypes.func,\n onPreviewHover: PropTypes.func,\n options: PropTypes.array,\n optionStyles: PropTypes.func,\n classes: PropTypes.object\n };\n static defaultProps = {\n isOpen: false\n };\n state = {\n labelWidth: 0,\n isOpen: this.props.isOpen\n };\n InputLabelRef = React.createRef();\n componentDidMount() {\n /* eslint-disable react/no-find-dom-node*/\n this.setState({\n labelWidth: ReactDOM.findDOMNode(this.InputLabelRef.current).offsetWidth\n });\n /* eslint-enable react/no-find-dom-node*/\n }\n handleOpen = () => {\n this.setState({\n isOpen: true\n });\n };\n handleClose = () => {\n this.setState({\n isOpen: false\n });\n };\n render() {\n const {\n current,\n onChange,\n onPreviewHover,\n label,\n options,\n optionStyles,\n classes\n } = this.props;\n const {labelWidth, isOpen} = this.state;\n return (\n \n handleChange(`fontFamily`, fontFamily)()}\n options={Object.keys(fontFamilies)\n .map((font) => ({\n value: font,\n label: font\n }))\n .filter((font) => isPichshop || !pichshopFonts[font.value])}\n optionStyles={(option) => {\n return {\n fontFamily: option.value\n };\n }}\n />\n
\n );\n}\n\nFontFamily.propTypes = {\n current: PropTypes.string,\n handleChange: PropTypes.func,\n isPichshop: PropTypes.bool\n};\n\nexport default connect((state) => ({\n isPichshop: isPichshopSelector(state)\n}))(FontFamily);\n","import React from \"react\";\nimport createSvgIcon from \"@material-ui/icons/utils/createSvgIcon\";\n\nexport default createSvgIcon(\n \n \n \n \n \n \n {fontStyles.map(({style, setValue, resetValue, tooltip}) => {\n const active = setValue === current[style];\n const value = active ? resetValue : setValue;\n const disabled = !fontFamilies[current.fontFamily][style];\n return (\n {\n handleChange(style, value)();\n this.handleClose();\n }}\n selected={active}\n disabled={disabled}\n >\n {this.getIconForFontStyle(style)}\n {tooltip}\n \n );\n })}\n \n \n
\n );\n }\n}\n\nexport default FontStyle;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport {textAlings} from \"../../services/lib/fonts\";\nimport Tooltip from \"@material-ui/core/Tooltip\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport Menu from \"@material-ui/core/Menu\";\nimport MenuItem from \"@material-ui/core/MenuItem\";\nimport NoSsr from \"@material-ui/core/NoSsr\";\nimport FormatAlignLeftIcon from \"@material-ui/icons/FormatAlignLeft\";\nimport FormatAlignCenterIcon from \"@material-ui/icons/FormatAlignCenter\";\nimport FormatAlignRightIcon from \"@material-ui/icons/FormatAlignRight\";\nimport FormatAlignJustifyIcon from \"@material-ui/icons/FormatAlignJustify\";\nimport ArrowDropDownIcon from \"@material-ui/icons/ArrowDropDown\";\n\nclass TextAlign extends React.Component {\n static propTypes = {\n current: PropTypes.string,\n handleChange: PropTypes.func\n };\n getIconForTextAlign(style) {\n switch (style) {\n case `left`:\n return \n \n \n \n {this.getIconForTextAlign(current)}\n \n \n {textAlings.map(({value, tooltip}) => {\n const selected = current === value;\n return (\n {\n handleChange(`textAlign`, value)();\n this.handleClose();\n }}\n selected={selected}\n >\n {this.getIconForTextAlign(value)}\n {tooltip}\n \n );\n })}\n \n \n
\n );\n }\n}\n\nexport default TextAlign;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport {ChromePicker, GithubPicker} from \"react-color\";\nimport withErrorBoundary from \"../decorators/withErrorBoundary\";\nimport trackEvent from \"../../../utils/track-event\";\n\nclass ColorPicker extends React.Component {\n static propTypes = {\n color: PropTypes.string,\n onChange: PropTypes.func,\n children: PropTypes.element,\n position: PropTypes.string,\n withoutTransparent: PropTypes.bool,\n content: PropTypes.element\n };\n static defaultProps = {\n position: `bottom-right`,\n withoutTransparent: false\n };\n state = {\n isOpenPicker: false,\n pickerType: `Популярные`\n };\n componentDidMount() {\n document.addEventListener(`mousedown`, this.togglePicker.bind(this));\n }\n componentWillUnmount() {\n document.removeEventListener(`mousedown`, this.togglePicker.bind(this));\n }\n togglePicker = (e) => {\n const paletteNode = this.palette.current;\n const contentNode = this.content.current;\n if (paletteNode && !contentNode) {\n this.setState({\n isOpenPicker: paletteNode.contains(e.target)\n ? !this.state.isOpenPicker\n : false\n });\n } else if (paletteNode && contentNode) {\n this.setState({\n isOpenPicker: paletteNode.contains(e.target)\n ? !this.state.isOpenPicker\n : contentNode.contains(e.target)\n });\n }\n };\n setPickerType = (type) => () => {\n this.setState({\n pickerType: type\n });\n if (type === `Палитра`) {\n trackEvent({\n category: `Editor`,\n action: `Palette`\n });\n }\n };\n onChangeCirclePicker = (e) => {\n this.props.onChange(e, `circle`);\n };\n onChangeChromePicker = (e) => {\n this.props.onChange(e, `palette`);\n };\n getPicker() {\n const {pickerType} = this.state;\n const {color} = this.props;\n switch (pickerType) {\n case `Популярные`:\n return (\n \n {children}\n
\n ) : (\n \n {content ? content : null}\n {[`Популярные`, `Палитра`].map((item) => {\n return (\n \n {item}\n \n );\n })}\n
\n {this.getPicker()}
\n \n )}\n \n );\n }\n}\n\nexport default withErrorBoundary(ColorPicker);\n","import React from \"react\";\nimport createSvgIcon from \"@material-ui/icons/utils/createSvgIcon\";\nexport default createSvgIcon(\n \n
\n \n \n \n {current}\n \n \n {fontSizes.map(({value}) => {\n const selected = current === value;\n return (\n {\n handleChange(`fontSize`, value)();\n this.handleClose();\n }}\n onMouseEnter={() => {\n if (this.state.anchorEl) {\n handleChange(`fontSize`, value)();\n }\n }}\n selected={selected}\n >\n {value}\n \n );\n })}\n \n
\n );\n }\n}\n\nexport default FontSize;\n","import React, {Component} from \"react\";\nimport PropTypes from \"prop-types\";\nimport {connect} from \"react-redux\";\nimport Provider from \"pubsub-js\";\nimport {scroller, Element} from \"react-scroll\";\nimport {TEXT_CHANGED, TEXT_ADDED} from \"../../constants/event-types\";\nimport {setTextProperty} from \"../../AC/set-text-property\";\nimport Mediator from \"../../services/Mediator\";\nimport withErrorBoundary from \"../../decorators/withErrorBoundary\";\nimport withSelectionContext from \"../../decorators/withSelectionContext\";\nimport TextValue from \"./TextValue\";\nimport FontFamily from \"./FontFamily\";\nimport FontStyle from \"./FontStyle\";\nimport TextAlign from \"./TextAlign\";\nimport TextColor from \"./TextColor\";\nimport FontSize from \"./FontSize\";\n\nclass TextControl extends Component {\n static propTypes = {\n setTextProperty: PropTypes.func,\n selected: PropTypes.object\n };\n state = {\n text: `Впишите текст`,\n fontFamily: `Helvetica`,\n fontSize: 40,\n fontWeight: `normal`,\n linethrough: false,\n overline: false,\n underline: false,\n shadow: null,\n fontStyle: `normal`,\n stroke: null,\n strokeWidth: 1,\n textAlign: `left`,\n lineHeight: 1.16,\n textBackgroundColor: ``,\n fill: `rgb(0,0,0)`\n };\n onTextChanged = (_, target) => {\n this.setStateFromOText(target);\n };\n setStateFromOText(oText) {\n const {\n text,\n fontFamily,\n fontSize,\n fontWeight,\n linethrough,\n overline,\n underline,\n shadow,\n fontStyle,\n stroke,\n strokeWidth,\n textAlign,\n lineHeight,\n textBackgroundColor,\n fill\n } = oText;\n this.setState({\n text,\n fontFamily,\n fontSize,\n fontWeight,\n linethrough,\n overline,\n underline,\n shadow,\n fontStyle,\n stroke,\n strokeWidth,\n textAlign,\n lineHeight,\n textBackgroundColor,\n fill\n });\n }\n handleChange = (property, val) => (o) => {\n let value =\n (o && o.rgb) ||\n (o && o.target && o.currentTarget.value) ||\n (o && o.target && o.target.value);\n\n if (o && o.target && o.currentTarget.value === ``) {\n value = o.currentTarget.value;\n }\n if (val || val === false || val === ``) {\n value = val;\n }\n if (value.r || value.r === 0) {\n const {r, g, b, a} = value;\n const rgba = `rgba(${r}, ${g}, ${b}, ${a})`;\n value = rgba;\n }\n this.setState({\n [property]: value\n });\n this.props.setTextProperty(property, value);\n };\n focusTextField = () => {\n const viewHeight = window.innerHeight;\n scroller.scrollTo(`scroll-element`, {\n smooth: true,\n offset: -viewHeight + 150 // Scrolls to element + 50 pixels down the page\n });\n };\n textValueRef = React.createRef();\n componentDidMount() {\n Provider.subscribe(TEXT_ADDED, this.focusTextField);\n Provider.subscribe(TEXT_CHANGED, this.onTextChanged);\n }\n componentDidUpdate(prevProps) {\n const {selected: prevSelected} = prevProps;\n const {selected} = this.props;\n if (\n selected &&\n Mediator.isText(selected) &&\n JSON.stringify(selected) !== JSON.stringify(prevSelected)\n ) {\n this.setStateFromOText(selected);\n }\n }\n componentWillUnmount() {\n Provider.unsubscribe(TEXT_CHANGED, this.onTextChanged);\n Provider.unsubscribe(TEXT_ADDED, this.focusTextField);\n }\n render() {\n const {\n text,\n fontFamily,\n shadow,\n fontSize,\n fontStyle,\n textAlign,\n fill,\n fontWeight,\n underline,\n linethrough\n } = this.state;\n const {selected} = this.props;\n return selected && Mediator.isText(selected) ? (\n \n
\n ) : null;\n }\n}\n\nexport default connect(null, {setTextProperty})(\n withErrorBoundary(withSelectionContext(TextControl))\n);\n","import {CHANGE_TEXT} from \"../constants/action-types\";\nimport Mediator from \"../services/Mediator\";\n\nexport const setTextProperty = (property, value) => (dispatch) => {\n dispatch({\n type: CHANGE_TEXT\n });\n Mediator.setActiveTextProperty(property, value);\n};\n","import React from \"react\";\nimport dictionary from \"../dictionary\";\n\nexport default React.createContext(dictionary);\n","import React, {PureComponent} from \"react\";\nimport PropTypes from \"prop-types\";\nimport priceFormat from \"../../../services/lib/price-format\";\n\nexport default class LineTemplate extends PureComponent {\n static propTypes = {\n variant: PropTypes.string.isRequired,\n title: PropTypes.string,\n subTitle: PropTypes.string,\n items: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,\n itemsMap: PropTypes.object,\n changeVariant: PropTypes.func,\n currentValue: PropTypes.string,\n dict: PropTypes.object,\n customHandleClick: PropTypes.func,\n description: PropTypes.bool,\n priceMap: PropTypes.object,\n filterOfItemsBy: PropTypes.object\n };\n render() {\n const {variant, title, subTitle, items, filterOfItemsBy} = this.props;\n return (\n Текст
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {title &&
\n );\n }\n getItemsFromArray(items) {\n return items.map((item) => {\n return this.getElement(item);\n });\n }\n getItemsFromObject(items) {\n const elements = [];\n for (const key in items) {\n if (items.hasOwnProperty(key)) {\n const item = items[key];\n elements.push(this.getElement(item, key));\n }\n }\n return elements;\n }\n getElement(value, key) {\n const {\n variant,\n changeVariant,\n customHandleClick,\n currentValue,\n dict,\n description,\n priceMap\n } = this.props;\n\n const val = key || value;\n return (\n {title}
}\n {subTitle && {subTitle}
}\n \n {Array.isArray(items)\n ? this.getItemsFromArray(\n filterOfItemsBy\n ? items.filter((item) => filterOfItemsBy.test(item))\n : items\n )\n : this.getItemsFromObject(items)}\n
\n \n {dict[val]}\n {priceMap && priceMap[val] && (\n \n
\n {`${priceFormat(priceMap[val][0])}/${priceFormat(\n priceMap[val][1]\n )}`}\n \n )}\n
\n )}\n \n );\n }\n getBackground(val) {\n const {itemsMap, items, filterOfItemsBy} = this.props;\n if (itemsMap) {\n if (filterOfItemsBy && val.indexOf(`-`) > -1) {\n return itemsMap[val.replace(filterOfItemsBy, ``)];\n }\n return itemsMap[val];\n }\n return `url(${items[val]})`;\n }\n}\n","import React, {PureComponent} from \"react\";\nimport PropTypes from \"prop-types\";\nimport priceFormat from \"../../../services/lib/price-format\";\n\nexport default class SelectTemplate extends PureComponent {\n static propTypes = {\n variant: PropTypes.string.isRequired,\n title: PropTypes.string,\n items: PropTypes.array.isRequired,\n changeVariant: PropTypes.func,\n currentValue: PropTypes.string,\n dict: PropTypes.object,\n customHandleClick: PropTypes.func,\n priceMap: PropTypes.object\n };\n render() {\n const {\n variant,\n items,\n changeVariant,\n customHandleClick,\n currentValue,\n dict,\n priceMap,\n title\n } = this.props;\n return (\n \n {`${priceFormat(priceMap[val][0])}/${priceFormat(\n priceMap[val][1]\n )}`}\n \n )}\n
\n {title &&
\n );\n }\n}\n","import React, {PureComponent} from \"react\";\nimport PropTypes from \"prop-types\";\nimport priceFormat from \"../../../services/lib/price-format\";\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\nimport Checkbox from \"@material-ui/core/Checkbox\";\nimport NoSsr from \"@material-ui/core/NoSsr\";\n\nexport default class CheckboxTemplate extends PureComponent {\n static propTypes = {\n variant: PropTypes.string.isRequired,\n title: PropTypes.string,\n items: PropTypes.array.isRequired,\n changeVariant: PropTypes.func,\n currentValue: PropTypes.string,\n dict: PropTypes.object,\n customHandleClick: PropTypes.func,\n priceMap: PropTypes.number\n };\n render() {\n const {\n variant,\n items,\n changeVariant,\n customHandleClick,\n currentValue,\n priceMap,\n title\n } = this.props;\n return (\n {title}
}\n \n {\n const value = e.target.value;\n if (customHandleClick) {\n customHandleClick(e, variant, value);\n }\n changeVariant(e, variant, value);\n }}\n >\n {items.map((item) => {\n return (\n \n );\n })}\n \n
\n \n
\n );\n }\n}\n","import React from \"react\";\n\nexport default function ColorWheelIcon() {\n return (\n \n );\n}\n","import React, {Component} from \"react\";\nimport PropTypes from \"prop-types\";\nimport {connect} from \"react-redux\";\nimport {conditionSelector, forAllSidesSelector} from \"../../../selectors\";\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\nimport Checkbox from \"@material-ui/core/Checkbox\";\nimport NoSsr from \"@material-ui/core/NoSsr\";\nimport isTransparent from \"../../../services/lib/is-transparent\";\nimport ColorPicker from \"../../ColorPicker\";\nimport Tooltip from \"@material-ui/core/Tooltip\";\nimport ColorWheelIcon from \"../../ColorWheelIcon\";\nimport trackEvent from \"../../../../../utils/track-event\";\nimport withMobileContext from \"../../../decorators/withMobileContext\";\nimport {setForAllSides} from \"../../../AC/set-for-all-sides\";\n\nexport class LineWithColorPicker extends Component {\n static propTypes = {\n variant: PropTypes.string,\n title: PropTypes.string,\n items: PropTypes.array,\n changeVariant: PropTypes.func,\n setForAllSides: PropTypes.func,\n condition: PropTypes.object,\n forAllSides: PropTypes.bool,\n isMobile: PropTypes.bool\n };\n handleCheckboxChange = (e) => {\n const {checked} = e.target;\n this.props.setForAllSides(checked);\n if (checked) {\n const {variant, changeVariant} = this.props;\n const currentValue = this.getCurrentValue();\n changeVariant(e, variant, currentValue, true);\n }\n };\n getCurrentValue() {\n const {\n condition: {\n design: {background}\n }\n } = this.props;\n\n if (isTransparent(background)) {\n return `transparent`;\n }\n return background;\n }\n render() {\n const {items, variant, changeVariant, isMobile, forAllSides} = this.props;\n const currentValue = this.getCurrentValue();\n return (\n \n \n {\n const value = e.target.checked ? items[1] : items[0];\n if (customHandleClick) {\n customHandleClick(e, variant, value);\n }\n changeVariant(e, variant, value);\n }}\n color=\"primary\"\n />\n }\n label={\n title\n ? `${title} ${priceMap ? priceFormat(priceMap) : ``}`\n : null\n }\n />\n \n
\n \n
\n \n );\n }\n}\n\nconst mapStateToProps = (state) => ({\n condition: conditionSelector(state),\n forAllSides: forAllSidesSelector(state)\n});\n\nconst mapDispatchToProps = {\n setForAllSides\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(withMobileContext(LineWithColorPicker));\n","import {SET_FOR_ALL_SIDES} from \"../constants/action-types\";\n\nexport const setForAllSides = (forAllSides) => ({\n type: SET_FOR_ALL_SIDES,\n payload: forAllSides\n});\n","const getFormattedPaperPriceMap = (priceMap) => {\n return priceMap.reduce((acc, arr, index) => {\n if (Array.isArray(arr)) {\n return arr.reduce(\n (ac, prop) => ({...ac, [prop]: priceMap[index + 1][200]}),\n {...acc}\n );\n }\n return acc;\n }, {});\n};\n\nconst getFormattedPriceMapForVariant = (priceData, variantName) => {\n switch (variantName) {\n case `paper_type`:\n return getFormattedPaperPriceMap(priceData.paper_price_maps);\n\n case `lamination`:\n return priceData.lamination_per_100;\n\n case `corner_radius`:\n return priceData.rounded_corners_per_100;\n }\n\n return void 0;\n};\n\nexport default getFormattedPriceMapForVariant;\n","import React, {PureComponent} from \"react\";\nimport PropTypes from \"prop-types\";\nimport DictionaryCtx from \"../../../../../contexts/DictionaryCtx\";\nimport LineTemplate from \"./Line\";\nimport SelectTemplate from \"./Select\";\nimport CheckboxTemplate from \"./Checkbox\";\nimport LineWithColorPickerTemplate from \"./LineWithColorPicker\";\nimport getFormattedPriceMapForVariant from \"../../../services/lib/price-map-formatter\";\n\nexport default class Template extends PureComponent {\n static propTypes = {\n name: PropTypes.string.isRequired,\n variant: PropTypes.object,\n productMeta: PropTypes.object,\n colorHexMap: PropTypes.object,\n currentVariants: PropTypes.object,\n changeVariant: PropTypes.func,\n withoutTitle: PropTypes.bool\n };\n render() {\n const {\n name,\n variant,\n productMeta,\n currentVariants,\n changeVariant,\n colorHexMap,\n withoutTitle\n } = this.props;\n return (\n \n {items.map((val) => (\n {\n changeVariant(e, variant, val, forAllSides);\n }}\n >\n
\n ))}\n \n {\n changeVariant(e, variant, e.rgb);\n if (pickerType === `palette`) {\n trackEvent({\n category: `Editor`,\n action: `Palette`,\n label: `Background color`\n });\n }\n }}\n position={isMobile ? `bottom-left` : `bottom-right`}\n >\n \n \n \n
\n \n
\n \n \n \n
\n \n
\n {isOpen && (\n \n -1\n ? `backgroundImage`\n : `backgroundColor`]: background,\n backgroundPosition: ` center center`\n }}\n >\n \n \n
\n {settings.variants[0].title}
\n \n {settings.variants.map((variant, i) => {\n return (\n
\n )}\n \n ) : null;\n }\n}\nexport default connect(\n (state) => ({\n condition: conditionSelector(state),\n product: productSelector(state)\n }),\n {\n changeVariant,\n setBackgroundColor\n }\n)(withErrorBoundary(withColorHexMapContext(withMobileContext(VariantControl))));\n","import {CHANGE_VARIANT} from \"../constants/action-types\";\n\nexport const changeVariant = (variant, value) => ({\n type: CHANGE_VARIANT,\n payload: {\n variant,\n value\n }\n});\n","import React, {Component} from \"react\";\nimport PropTypes from \"prop-types\";\nimport {connect} from \"react-redux\";\nimport Provider from \"pubsub-js\";\nimport {undoRedoSelector} from \"../../selectors\";\nimport {undo, redo, updateUndoRedo} from \"../../AC/undo-redo\";\nimport {HISTORY_ADD, HISTORY_CHANGED} from \"../../constants/event-types\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport Tooltip from \"@material-ui/core/Tooltip\";\nimport NoSsr from \"@material-ui/core/NoSsr\";\nimport UndoIcon from \"@material-ui/icons/Undo\";\nimport RedoIcon from \"@material-ui/icons/Redo\";\nimport {withStyles} from \"@material-ui/core/styles\";\n\nconst styles = {\n root: {\n borderRadius: `3px`\n }\n};\n\nexport class UndoRedo extends Component {\n static propTypes = {\n undoRedo: PropTypes.shape({\n canUndo: PropTypes.bool,\n canRedo: PropTypes.bool\n }),\n undo: PropTypes.func,\n redo: PropTypes.func,\n updateUndoRedo: PropTypes.func,\n classes: PropTypes.object\n };\n undo = () => {\n this.props.undo();\n };\n redo = () => {\n this.props.redo();\n };\n updateUndoRedo = () => {\n this.props.updateUndoRedo();\n };\n componentDidMount() {\n this.historyAdd = Provider.subscribe(HISTORY_ADD, this.updateUndoRedo);\n this.historyChanged = Provider.subscribe(\n HISTORY_CHANGED,\n this.updateUndoRedo\n );\n }\n componentWillUnmount() {\n Provider.unsubscribe(this.historyAdd);\n Provider.unsubscribe(this.historyChanged);\n }\n render() {\n const {\n undoRedo: {canUndo, canRedo},\n classes\n } = this.props;\n return (\n \n \n {\n this.setState({isOpen: false});\n }}\n >\n \n
\n )}\n \n \n \n
\n \n \n
\n \n \n \n
\n \n \n
\n \n \n \n
\n )\n );\n })}\n \n \n {this.getIcon(icon)}\n \n
\n \n
\n );\n }\n}\n\nexport default withErrorBoundary(SystemControl);\n","import React from \"react\";\nimport createSvgIcon from \"@material-ui/icons/utils/createSvgIcon\";\n\nexport default createSvgIcon(\n \n
\n \n \n \n \n {Object.values(effectsMenu)\n .slice(0, 2)\n .map(this.mapDefaultEffects)}\n {/* Андрей хотел именно тут и именно на 3 место */}\n {/* splice в такой ситуации не помогает */}\n {/* {isGuest && selected.remoteId && (\n \n this.props.applyVisionHubFilter(selected, `anime_gan`)\n }\n >\n \n Аниме фильтр\n new!\n \n )}*/}\n {Object.values(effectsMenu)\n .slice(3, effectsMenu.length)\n .map(this.mapDefaultEffects)}\n \n
\n \n \n
\n \n \n \n \n \n \n \n
\n \n \n \n \n {layerMenu.map((item) => {\n const {name, icon, handleClick, hotKey} = item;\n return (\n {\n handleClick();\n this.handleClose();\n }}\n >\n \n {icon && (\n \n )}\n {name}\n \n {hotKey && (\n \n {hotKey}\n \n )}\n \n );\n })}\n \n
\n \n \n
\n \n
\n \n )\n );\n }\n}\n\nexport default connect(null, {setFillForPath})(withErrorBoundary(ClipartFill));\n","import {SET_FILL} from \"../constants/action-types\";\nimport Mediator from \"../services/Mediator\";\n\nexport const setFillForPath = (value) => (dispatch) => {\n dispatch({\n type: SET_FILL\n });\n Mediator.setFillForActivePath(value);\n};\n","import React, {Component} from \"react\";\nimport PropTypes from \"prop-types\";\nimport {connect} from \"react-redux\";\nimport Provider from \"pubsub-js\";\nimport Mediator from \"../../services/Mediator\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport Tooltip from \"@material-ui/core/Tooltip\";\nimport NoSsr from \"@material-ui/core/NoSsr\";\nimport CropIcon from \"@material-ui/icons/Crop\";\nimport CloseIcon from \"@material-ui/icons/Close\";\nimport {withStyles} from \"@material-ui/core/styles\";\nimport {CROP_APPLYIED} from \"../../constants/event-types\";\nimport {cropsSelector} from \"../../selectors\";\nimport {applyCrop} from \"../../AC/apply-crop\";\n\nconst styles = {\n root: {\n padding: `12px`,\n borderRadius: `3px`\n }\n};\n\nclass Crop extends Component {\n static propTypes = {\n toggleEffect: PropTypes.func,\n selected: PropTypes.object,\n classes: PropTypes.object,\n crops: PropTypes.array,\n applyCrop: PropTypes.func\n };\n state = {\n clipPath: null,\n isOpen: false\n };\n setStateFromOImage = (oImage) => {\n const {clipPath} = oImage;\n this.setState({\n clipPath\n });\n };\n componentDidMount() {\n Provider.subscribe(CROP_APPLYIED, (_, target) => {\n this.setStateFromOImage(target);\n });\n }\n componentDidUpdate(prevProps) {\n const {selected: prevSelected} = prevProps;\n const {selected} = this.props;\n if (\n selected &&\n Mediator.isImage(selected) &&\n JSON.stringify(selected) !== JSON.stringify(prevSelected)\n ) {\n this.setStateFromOImage(selected);\n }\n }\n componentWillUnmount() {\n Provider.unsubscribe(CROP_APPLYIED);\n }\n showPopup = () => {\n this.setState({\n isOpen: true\n });\n };\n hidePopup = () => {\n this.setState({\n isOpen: false\n });\n };\n applyCrop = (cropUrl) => () => {\n this.props.applyCrop(cropUrl);\n };\n render() {\n const {isOpen} = this.state;\n const {selected, classes, crops} = this.props;\n return (\n selected &&\n Mediator.isImage(selected) && (\n \n
\n \n \n {(isMobile) => (\n \n \n
\n \n )}\n \n \n \n \n
\n {isOpen && (\n \n \n
\n \n \n \n
\n );\n })}\n \n \n \n \n
\n {crops.map(({id, preview, original}) => {\n const active =\n selected.clipPath && selected.clipPath.id === original;\n return (\n \n \n \n
\n \n )}\n \n \n \n \n \n {isEmptyStroke ?
\n \n \n \n \n \n {isTiling\n ? [\n ,\n \n \n \n ]\n : null}\n {[\n {\n type: `basic`,\n title: `базовый`,\n onClick: this.createTiling(`basic`)\n },\n {\n type: `centered`,\n title: `центрированый`,\n onClick: this.createTiling(`centered`)\n },\n {\n type: `half-brick`,\n title: `горизонтальное смещение`,\n onClick: this.createTiling(`half-brick`)\n },\n {\n type: `half-drop`,\n title: `вертикальное смещение`,\n onClick: this.createTiling(`half-drop`)\n },\n {\n type: `mirror`,\n title: `зеркальный`,\n onClick: this.createTiling(`mirror`)\n }\n ].map(({type, title, onClick}) => (\n \n \n \n \n \n ))}\n \n
\n ) : null;\n }\n}\n\nexport default connect(null, {\n destroyTiling,\n createTiling,\n setTilePadding\n})(withErrorBoundary(withStyles(styles)(Tiling)));\n","import React, {Component} from \"react\";\nimport PropTypes from \"prop-types\";\nimport Effects from \"./Effects\";\nimport Opacity from \"./Opacity\";\nimport Edit from \"./Edit\";\nimport ClipartFill from \"./ClipartFill\";\nimport Crop from \"./Crop\";\nimport Stroke from \"./Stroke\";\nimport withErrorBoundary from \"../../decorators/withErrorBoundary\";\nimport withSelectionContext from \"../../decorators/withSelectionContext\";\nimport Tiling from \"./Tiling\";\n\nexport class EditControl extends Component {\n static propTypes = {\n selected: PropTypes.object\n };\n render() {\n const {selected} = this.props;\n return (\n !!selected && (\n \n
\n )\n );\n }\n}\n\nexport default withErrorBoundary(withSelectionContext(EditControl));\n","import React, {PureComponent} from \"react\";\nimport {connect} from \"react-redux\";\nimport PropTypes from \"prop-types\";\nimport ColorPicker from \"./ColorPicker\";\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\nimport Checkbox from \"@material-ui/core/Checkbox\";\nimport NoSsr from \"@material-ui/core/NoSsr\";\nimport isTransparent from \"../services/lib/is-transparent\";\nimport {conditionSelector} from \"../selectors\";\nimport {changeBgColorForOtherSides} from \"../AC/change-bg-color-for-other-sides\";\nimport {setBackgroundColor} from \"../AC/set-background-color\";\nimport withErrorBoundary from \"../decorators/withErrorBoundary\";\nimport trackEvent from \"../../../utils/track-event\";\nimport productSettings from \"../services/product-settings\";\n\nclass BackgroundControl extends PureComponent {\n static propTypes = {\n condition: PropTypes.object,\n changeBgColorForOtherSides: PropTypes.func,\n setBackgroundColor: PropTypes.func\n };\n state = {\n forAllSides: false\n };\n changeBackground = (color, pickerType) => {\n const {r, g, b, a} = color.rgb;\n const rgba = `rgba(${r}, ${g}, ${b}, ${a})`;\n this.props.setBackgroundColor(rgba, this.state.forAllSides);\n if (pickerType === `palette`) {\n trackEvent({\n category: `Editor`,\n action: `Palette color`,\n label: `Background color`\n });\n }\n };\n removeBackground = () => {\n const transparent = `transparent`;\n this.props.setBackgroundColor(transparent, this.state.forAllSides);\n };\n handleCheckboxChange = (e) => {\n const {checked} = e.target;\n this.setState({\n forAllSides: checked\n });\n if (checked) {\n this.props.changeBgColorForOtherSides(this.getColorForBackgroundInput());\n }\n };\n getColorForBackgroundInput() {\n const {\n condition: {design}\n } = this.props;\n if (design && design.background) {\n return design.background;\n }\n return `transparent`;\n }\n isFullPrint() {\n const {\n condition: {product}\n } = this.props;\n const settings = productSettings[product];\n return settings && settings.fullPrint;\n }\n render() {\n const color = this.getColorForBackgroundInput();\n const {forAllSides} = this.state;\n return (\n !this.isFullPrint() && (\n Правка и фильтры
\n \n
\n \n
\n )\n );\n }\n}\n\nexport default connect(\n (state) => ({\n condition: conditionSelector(state)\n }),\n {\n setBackgroundColor,\n changeBgColorForOtherSides\n }\n)(withErrorBoundary(BackgroundControl));\n","import React, {PureComponent} from \"react\";\nimport {connect} from \"react-redux\";\nimport PropTypes from \"prop-types\";\nimport Provider from \"pubsub-js\";\nimport {setFillForPathOfStaticObject} from \"../AC/set-fill-for-path-of-static-object\";\nimport ColorPicker from \"./ColorPicker\";\nimport {conditionSelector} from \"../selectors\";\nimport productSettings from \"../services/product-settings\";\nimport withErrorBoundary from \"../decorators/withErrorBoundary\";\nimport {CANVAS_MODIFIED} from \"../constants/event-types\";\n\nclass StaticObjectControl extends PureComponent {\n static propTypes = {\n condition: PropTypes.object,\n setFillForPathOfStaticObject: PropTypes.func\n };\n state = {\n colors: []\n };\n changeColor = (pathNumber) => (color) => {\n const {r, g, b, a} = color.rgb;\n const rgba = `rgba(${r}, ${g}, ${b}, ${a})`;\n\n this.props.setFillForPathOfStaticObject(rgba, pathNumber);\n };\n hasProductStaticObject() {\n const {\n condition: {side, product}\n } = this.props;\n const settigns = productSettings[product];\n return settigns && settigns.objectToLoad && settigns.objectToLoad[side];\n }\n onFillChanged = (_, staticObject) => {\n const colors = staticObject.getObjects().map((object) => object.fill);\n this.setState({\n colors\n });\n };\n setInitialValues = (_, design) => {\n if (design.objects) {\n const staticObject = design.objects.filter((o) => o.static)[0];\n if (staticObject) {\n const colors = staticObject.objects\n ? staticObject.objects.map((object) => object.fill)\n : [staticObject.fill];\n this.setState({\n colors\n });\n }\n }\n };\n componentDidMount() {\n Provider.subscribe(CANVAS_MODIFIED, this.setInitialValues);\n }\n componentWillUnmount() {\n Provider.unsubscribe(CANVAS_MODIFIED, this.setInitialValues);\n }\n getColor(pathNumber) {\n return this.state.colors[pathNumber];\n }\n render() {\n const {\n condition: {product}\n } = this.props;\n\n if (\n !productSettings[product] ||\n !productSettings[product].loadedObjectSettings\n ) {\n return null;\n }\n\n return this.hasProductStaticObject() ? (\n Фон печатной области
\n \n
\n \n
\n \n
\n \n
\n {!isTransparent(color) && (\n \n \n \n
\n )}\n \n
\n ) : null;\n }\n}\n\nexport default connect(\n (state) => ({\n condition: conditionSelector(state)\n }),\n {\n setFillForPathOfStaticObject\n }\n)(withErrorBoundary(StaticObjectControl));\n","import {SET_FILL_FOR_STATIC_OBJECT} from \"../constants/action-types\";\nimport Mediator from \"../services/Mediator\";\n\nexport const setFillForPathOfStaticObject = (fillColor, pathNumber) => (\n dispatch\n) => {\n dispatch({\n type: SET_FILL_FOR_STATIC_OBJECT,\n payload: {\n fillColor,\n pathNumber\n }\n });\n Mediator.setFillForPathOfStaticObject(fillColor, pathNumber);\n};\n","import ThreeJSMediator from \"../../../utils/threejs/ThreeJSMediator\";\nimport threeDSettings from \"../../../utils/threejs/three-d-settings\";\nimport {\n SUCCESS,\n GET_THREE_D_VIEWER,\n START,\n FAIL\n} from \"../constants/action-types\";\n\nexport const enableThreeDViewer = (element) => (dispatch, getState) => {\n const {\n condition: {product, side, variants},\n designs,\n product: {\n meta: {designs: designsInfo}\n }\n } = getState();\n const updateDesignsInfo = designsInfo.map((design, i) => {\n return {...designs[i], ...design};\n });\n dispatch({\n type: GET_THREE_D_VIEWER + START\n });\n ThreeJSMediator.enable(element);\n (async () => {\n if (threeDSettings && threeDSettings[product]) {\n try {\n await ThreeJSMediator.applySettings({\n ...threeDSettings[product],\n condition: {\n product,\n side,\n variants\n },\n designs: updateDesignsInfo\n });\n dispatch({\n type: GET_THREE_D_VIEWER + SUCCESS\n });\n } catch (err) {\n dispatch({\n type: GET_THREE_D_VIEWER + FAIL\n });\n throw err;\n }\n }\n })();\n};\nexport const disableThreeDViewer = () => () => {\n ThreeJSMediator.disable();\n};\n","import React, {PureComponent} from \"react\";\nimport PropTypes from \"prop-types\";\nimport Modal from \"react-modal\";\nimport {connect} from \"react-redux\";\nimport {modalSelector, productSelector} from \"../../selectors\";\nimport {toggleModal} from \"../../AC/modal\";\nimport {enableThreeDViewer, disableThreeDViewer} from \"../../AC/three-d-viewer\";\nimport threeDSettings from \"../../../../utils/threejs/three-d-settings\";\nimport withErrorBoundary from \"../../decorators/withErrorBoundary\";\nimport NoSsr from \"@material-ui/core/NoSsr\";\nimport Button from \"@material-ui/core/Button\";\nimport Tooltip from \"@material-ui/core/Tooltip\";\nimport {withStyles} from \"@material-ui/core/styles\";\nimport ThreeDRotationIcon from \"@material-ui/icons/ThreeDRotationOutlined\";\nimport ThreeDViewer from \"../../../common/ThreeDViewer\";\nimport classNames from \"classnames\";\n\nconst styles = () => ({\n button: {\n \"color\": `#fff`,\n \"boxShadow\": `none`,\n \"fontWeight\": `normal`,\n \"textTransform\": `none`,\n \"backgroundColor\": `#52abda`,\n \"&:hover\": {\n opacity: `.8`,\n backgroundColor: `#52abda`\n }\n }\n});\n\nclass ThreeDPreivew extends PureComponent {\n static propTypes = {\n product: PropTypes.object,\n isModalOpen: PropTypes.bool,\n toggleModal: PropTypes.func,\n threeDPreview: PropTypes.object,\n classes: PropTypes.object,\n enableThreeDViewer: PropTypes.func,\n disableThreeDViewer: PropTypes.func\n };\n toggleModal = () => {\n this.props.toggleModal(`threeDPreview`);\n };\n render() {\n const {\n product: {\n meta: {product}\n },\n isModalOpen,\n classes\n } = this.props;\n return threeDSettings && threeDSettings[product] ? (\n \n {productSettings[product].loadedObjectSettings.title}\n
\n \n
\n \n {productSettings[product].loadedObjectSettings.colorPickers.map(\n ({label, pathNumber}) => (\n
\n \n
\n )\n )}\n \n
\n {label && (\n {label}
\n )}\n \n \n \n \n \n \n \n
\n ) : null;\n }\n}\n\nModal.setAppElement(`body`);\n\nconst mapStateToProps = (state) => ({\n isModalOpen: modalSelector(state, `threeDPreview`),\n product: productSelector(state)\n});\n\nconst mapDispatchToProps = {\n toggleModal,\n enableThreeDViewer,\n disableThreeDViewer\n};\n\nexport default connect(\n mapStateToProps,\n mapDispatchToProps\n)(withErrorBoundary(withStyles(styles)(ThreeDPreivew)));\n","import React from 'react'\nimport {useSelector, useDispatch} from 'react-redux'\nimport cn from 'classnames'\nimport IconButton from '@material-ui/core/IconButton'\nimport Tooltip from '@material-ui/core/Tooltip'\nimport {OPEN_DRAW_CONTROL_POPUP} from '../../constants/action-types'\nimport {drawControlPopupSelector} from '../../selectors'\n\nimport styles from './DrawControl.module.scss'\n\nexport default function ControlTooltip(props) {\n const {popupName, icon, title} = props\n const drawControlPopup = useSelector(drawControlPopupSelector)\n const dispatch = useDispatch()\n\n const showPopup = () => {\n dispatch({\n type: OPEN_DRAW_CONTROL_POPUP,\n payload: popupName,\n })\n }\n\n return (\n \n
\n \n \n \n \n \n
\n )\n}\n","import React from 'react'\nimport {useDispatch} from 'react-redux'\nimport IconButton from '@material-ui/core/IconButton'\nimport CloseIcon from '@material-ui/icons/Close'\nimport {CLOSE_DRAW_CONTROL_POPUP} from '../../constants/action-types'\n\nexport default function ControlClose() {\n const dispatch = useDispatch()\n\n const hidePopup = () => {\n dispatch({type: CLOSE_DRAW_CONTROL_POPUP})\n }\n\n return (\n \n \n {icon}\n \n
\n \n \n \n
\n )\n}\n","import React from \"react\";\nimport createSvgIcon from \"@material-ui/icons/utils/createSvgIcon\";\n\nexport default createSvgIcon(\n \n
\n \n {figures.map(({id, type, preview, original}) => (\n \n \n
\n ))}\n \n \n {Object.keys(emoji)\n .sort()\n .filter((category) => emoji[category].length)\n .map((category) => {\n const {title} = categories[category]\n return (\n \n
\n \n )\n })}\n \n \n
\n \n {Object.keys(emoji)\n .sort()\n .filter((category) => emoji[category].length)\n .map((category) => {\n const {title, icon} = categories[category]\n return (\n \n \n \n )\n })}\n
\n \n {title}\n
\n \n {emoji[category].map(\n ({\n id,\n type,\n preview,\n original,\n }) => (\n \n \n
\n ),\n )}\n \n \n {Object.keys(cliparts)\n .sort()\n .filter((category) => cliparts[category].length)\n .map((category) => {\n const {title} = categories[category]\n return (\n \n
\n \n )\n })}\n \n \n
\n \n {Object.keys(cliparts)\n .sort()\n .filter((category) => cliparts[category].length)\n .map((category) => {\n const {title, icon} = categories[category]\n return (\n \n \n \n )\n })}\n
\n \n {title}\n
\n \n {cliparts[category].map(\n ({\n id,\n type,\n preview,\n original,\n }) => (\n \n \n
\n ),\n )}\n \n
\n \n {textures.map(({id, type, preview, original}) => (\n \n \n \n \n
\n ))}\n \n
\n \n Выбери надпись и редактируй\n
\n \n {letterings.map(({id, type, preview, original}) => (\n \n \n
\n ))}\n \n
\n );\n }\n}\n\nexport default connect()(withErrorBoundary(DrawControl));\n","import React from 'react'\nimport SvgIcon from '@material-ui/core/SvgIcon'\n\nexport default function MoveToolIcon() {\n return (\n Фигуры и графика
\n \n
\n \n
\n ) : null\n )\n}\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport {connect} from \"react-redux\";\nimport classnames from \"classnames\";\nimport withErrorBoundary from \"../decorators/withErrorBoundary\";\nimport withMobileContext from \"../decorators/withMobileContext\";\nimport {\n productSelector,\n isShownProductsSelector,\n onPlatformSelector,\n mobileAppSelector\n} from \"../selectors\";\nimport Products from \"./Products\";\nimport Product from \"./Product\";\nimport ActionPanel from \"./ActionPanel\";\nimport RealisticView from \"./RealisticView\";\nimport Navigation from \"./Navigation\";\nimport ObjectManager from \"./ObjectManager\";\nimport SideControl from \"./SideControl\";\nimport TextControl from \"./TextControl\";\nimport VariantControl from \"./VariantControl\";\nimport SystemControl from \"./SystemControl\";\nimport EditControl from \"./EditControl\";\nimport BackgroundControl from \"./BackgroundControl\";\nimport StaticObjectControl from \"./StaticObjectControl\";\nimport ThreeDPreview from \"./ThreeDPreview\";\nimport DrawControl from \"./DrawControl\";\nimport Instruments from \"./Instruments\";\n\nclass Root extends React.Component {\n static propTypes = {\n product: PropTypes.object,\n isMobile: PropTypes.bool,\n isShownProducts: PropTypes.bool,\n onPlatform: PropTypes.string,\n mobileApp: PropTypes.bool\n };\n componentDidMount() {\n const jssStyles = document.getElementById(`jss-server-side`);\n if (jssStyles && jssStyles.parentNode) {\n jssStyles.parentNode.removeChild(jssStyles);\n }\n }\n render() {\n const {\n product: {\n meta: {translated_product: h1Text}\n },\n product,\n isMobile,\n isShownProducts,\n onPlatform,\n mobileApp\n } = this.props;\n return (\n Инструменты
\n \n
\n \n dispatch(setMode(false))}\n className={!selectionMode ? styles.active : ''}\n >\n
\n \n dispatch(setMode(true))}\n className={selectionMode ? styles.active : ''}\n >\n
\n \n
\n )}\n {!isMobile && (\n \n
\n )}\n {!mobileApp && isMobile && (\n \n
\n {h1Text}
\n\n
\n )}\n \n
\n \n
\n \n );\n }\n}\n\nexport default connect((state) => ({\n product: productSelector(state),\n isShownProducts: isShownProductsSelector(state),\n onPlatform: onPlatformSelector(state),\n mobileApp: mobileAppSelector(state)\n}))(withErrorBoundary(withMobileContext(Root)));\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport {Provider} from \"react-redux\";\nimport axios from 'axios'\nimport axiosRetry from 'axios-retry'\nimport isRetryAllowed from 'is-retry-allowed';\nimport JssProvider from \"react-jss/lib/JssProvider\";\nimport {\n MuiThemeProvider,\n createGenerateClassName,\n jssPreset\n} from \"@material-ui/core/styles\";\nimport {create} from 'jss';\nimport createStoreForSSR from \"./store\";\nimport Router from \"../common/Router\";\nimport Root from \"./components/Root\";\nimport {Route} from \"react-router-dom\";\nimport MobileCtx from \"../../contexts/MobileCtx\";\nimport DictionaryCtx from \"../../contexts/DictionaryCtx\";\nimport dictionary from \"../../dictionary\";\nimport ProductsCtx from \"./contexts/ProductsCtx\";\nimport ColorHexMapCtx from \"./contexts/ColorHexMapCtx\";\nimport {getMuiTheme} from \"../../../javascripts/getMaterialTheme\";\n\naxiosRetry(axios, {\n retries: 2,\n retryDelay: (retryCount) => retryCount * 500,\n retryCondition: (error) => {\n return (\n error.code !== 'ECONNABORTED' &&\n (!error.response || (error.response.status >= 400 && error.response.status <= 599)) &&\n isRetryAllowed(error)\n );\n }\n})\n\nclass App extends React.Component {\n static propTypes = {\n materialUI: PropTypes.string,\n state: PropTypes.shape({\n path: PropTypes.string,\n isMobile: PropTypes.bool,\n isPichshop: PropTypes.bool,\n products: PropTypes.array,\n product: PropTypes.object,\n condition: PropTypes.object,\n initialVariants: PropTypes.object,\n designs: PropTypes.object,\n colorHexMap: PropTypes.object,\n pictures: PropTypes.object,\n crops: PropTypes.array,\n figures: PropTypes.array,\n emoji: PropTypes.object,\n cliparts: PropTypes.object,\n letterings: PropTypes.array,\n user: PropTypes.object,\n authenticityToken: PropTypes.string,\n onPlatform: PropTypes.string,\n shutterStockEnabled: PropTypes.bool,\n mobileApp: PropTypes.bool\n })\n };\n // Remove the server-side injected CSS.\n componentDidMount() {\n const jssStyles = document.getElementById(\n `jss-server-side-${this.props.materialUI}`\n );\n if (jssStyles && jssStyles.parentNode) {\n jssStyles.parentNode.removeChild(jssStyles);\n }\n document\n .querySelector(`[data-react-class]`)\n .removeAttribute(`data-react-props`);\n }\n render() {\n const {\n path,\n isMobile,\n isPichshop,\n products,\n product,\n designs,\n condition,\n initialVariants,\n colorHexMap,\n pictures,\n authenticityToken,\n crops,\n figures,\n emoji,\n cliparts,\n letterings,\n user,\n onPlatform,\n shutterStockEnabled,\n mobileApp,\n currency\n } = this.props.state;\n const sides = {};\n const realism = {};\n const message = {};\n const uploader = {};\n const undoRedo = {};\n const isShownProducts = false;\n const initialStore = {\n path,\n product,\n designs,\n condition,\n sides,\n realism,\n message,\n pictures,\n uploader,\n undoRedo,\n authenticityToken,\n isShownProducts,\n crops,\n isPichshop,\n figures,\n emoji,\n cliparts,\n letterings,\n initialVariants,\n user,\n forAllSides: true,\n onPlatform,\n shutterStockEnabled,\n mobileApp,\n drawControlPopup: '',\n currency,\n isMobile,\n };\n const store = createStoreForSSR(initialStore);\n const theme = getMuiTheme(onPlatform);\n // Create a new class name generator.\n const generateClassName = createGenerateClassName({\n productionPrefix: `${this.props.materialUI}-react-app`\n });\n const jss = create({\n ...jssPreset(),\n // We define a custom insertion point that JSS will look for injecting the styles in the DOM.\n insertionPoint: typeof document !== 'undefined' && document.getElementById('jss-insertion-point'),\n });\n\n return (\n \n {!isMobile &&
\n \n {isMobile && (\n \n \n )}\n \n \n )}\n
\n \n
\n \n
\n )}\n {isMobile && (\n \n
\n \n
\n \n {!isMobile && (\n \n \n )}\n
\n \n
\n