\n Please note that you are adding multiple\n
\n versions of this item to your cart.\n
\n \n OK\n \n
\n \n ) : null\n }\n {\n showEmpty ? (\n \n Please select the number of items to add to your cart.\n
\n\n \n OK\n \n
\n \n\n ) : null\n }\n \n {\n hasSelection && currency ? (\n <>\n Total: \n { currency }\n { Math.abs(price * (qnty || 1)).toFixed(2) }\n \n ) : ''\n }\n
\n \n {\n allowQnty ? (\n
\n \n );\n};\n\nAddWithTotals.propTypes = {\n price: PropTypes.number,\n currency: PropTypes.string,\n frameId: PropTypes.number,\n workId: PropTypes.number,\n paperId: PropTypes.number,\n originalArtId: PropTypes.number,\n addArtToCart: PropTypes.func.isRequired,\n addOriginalArtToCart: PropTypes.func.isRequired,\n adding: PropTypes.bool.isRequired,\n added: PropTypes.bool.isRequired,\n allowQnty: PropTypes.bool.isRequired,\n nonGlare: PropTypes.bool,\n hasSelection: PropTypes.bool\n};\n\nexport default AddWithTotals;\n","import React, { Suspense } from 'react';\n\nconst ShoppableLookAssignment = React.lazy(() => import('./shoppable_look_assignment'));\n\nexport default (props) => (\n \n \n
\n ) : null\n }\n \n \n
\n );\n};\n\nAffirmPromo.propTypes = {\n price: T.number.isRequired,\n onWall: T.bool,\n currency: T.string\n};\n\nconst AddToCart = ({\n price, inStock, selection, frameId, workId,\n paperId, originalArtId, addRemoveFromStore, storeItemId,\n addArtToCart, addOriginalArtToCart,\n currency, adding, added,\n allowQnty, nonGlare\n}) => (\n <>\n \n
\n { selection && inStock ? \n {\n inStock ? (\n
\n \n Sold Out\n
\n )\n }\n \n
\n ) : null\n }\n { window.hasELinks ? (\n \n {\n title || renderEmpty ? (\n
\n );\n};\n\nconst renderArray = (title, texts) => {\n if (!texts || !texts.length) { return null; }\n return (\n \n { title }\n \n
\n ) : null\n }\n \n { text }\n
\n \n
\n );\n};\n\n/* eslint-disable jsx-a11y/anchor-is-valid */\nconst ArtistDetails = ({\n background, exhibitions, statement, styles\n}) => (\n { title }
\n { texts.join('\\n') }
\n \n \n
\n);\n/* eslint-enable jsx-a11y/anchor-is-valid */\n\nArtistDetails.propTypes = {\n background: PropTypes.string,\n exhibitions: PropTypes.arrayOf(PropTypes.string),\n statement: PropTypes.string,\n styles: PropTypes.array\n};\n\nexport default ArtistDetails;\n","import React, { PureComponent } from 'react';\nimport T from 'prop-types';\n\nimport * as Classes from './styles.module.scss';\n\nclass Transition extends PureComponent {\n static propTypes = {\n children: T.node,\n collapsed: T.bool\n };\n\n constructor(props) {\n super(props);\n\n const { collapsed } = props;\n\n this.state = {\n initiallyCollapsed: collapsed\n };\n\n this.setRootRef = this.setRootRef.bind(this);\n this.onTransitionEnd = this.onTransitionEnd.bind(this);\n }\n\n componentDidUpdate(prevProps) {\n const { collapsed } = this.props;\n\n if (collapsed && !prevProps.collapsed) {\n this.hide();\n } else if (!collapsed && prevProps.collapsed) {\n this.open();\n }\n }\n\n componentWillUnmount() {\n this.cancelAnimations();\n }\n\n onTransitionEnd() {\n this.rootRef.removeEventListener('transitionend', this.onTransitionEnd);\n this.rootRef.style.maxHeight = 'none';\n this.rootRef.style.overflow = 'visible';\n }\n\n setRootRef(ref) {\n this.rootRef = ref;\n }\n\n hide() {\n this.cancelAnimations();\n this.rootRef.style.maxHeight = `${ this.rootRef.scrollHeight }px`;\n this.rootRef.style.overflow = 'hidden';\n\n this.raf = window.requestAnimationFrame(() => {\n this.raf = window.requestAnimationFrame(() => {\n this.rootRef.style.maxHeight = '0';\n });\n });\n }\n\n open() {\n this.cancelAnimations();\n this.rootRef.addEventListener('transitionend', this.onTransitionEnd);\n this.rootRef.style.maxHeight = `${ this.rootRef.scrollHeight }px`;\n }\n\n cancelAnimations() {\n this.rootRef.removeEventListener('transitionend', this.onTransitionEnd);\n window.cancelAnimationFrame(this.raf);\n }\n\n render() {\n const { children } = this.props;\n const { initiallyCollapsed } = this.state;\n const className = `\n ${ initiallyCollapsed ? Classes.collapsed : '' }\n ${ Classes.transitionRoot }\n `;\n\n return (\n \n
\n \n { renderText('Background', background) }\n { renderText('Statement', statement) }\n {\n styles && styles.length ? (\n
\n \n Art Style Emphasis: \n {\n styles.map(({ name, path }, index) => (\n \n { name }\n { index < styles.length - 1 ? (<>, ) : null }\n \n ))\n }\n
\n ) : null\n }\n \n { renderArray('Selected Exhibitions', exhibitions) }\n
\n \n { this.renderMount(floatStright, 'float') }\n { this.renderMount(floatDeckled, 'float') }\n
\n );\n }\n\n return (\n \n \n
\n );\n }\n\n render() {\n return (\n \n );\n }\n}\n\nexport default Mounts;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport * as Classes from './styles.module.scss';\n\nconst Warning = ({ warning, flat }) => (\n warning ? (\n \n
\n \n { extraMounts }\n \n { name }\n \n { description }\n \n
\n \n { warning }\n
\n ) : null\n);\n\nWarning.propTypes = {\n warning: PropTypes.string,\n flat: PropTypes.bool\n};\n\nexport default Warning;\n","import React from 'react';\nimport T from 'prop-types';\nimport * as Classes from './styles.module.scss';\n\nconst Radio = (props) => (\n \n
\n);\nRadio.propTypes = {\n checked: T.bool,\n id: T.oneOfType([T.string, T.number])\n};\nexport default Radio;\n","// extracted by mini-css-extract-plugin\nvar _1 = \"_nayueMnaS3n4G3LaZXg\";\nexport { _1 as \"radio\" }\n","import React from 'react';\nimport T from 'prop-types';\nimport * as Classes from './styles.module.scss';\n\nconst PinIt = ({ href, imageUrl, description }) => {\n if (!window.allowSharing) { return null; }\n\n const onClick = (e) => {\n e.preventDefault();\n if (window.PinUtils) {\n window.PinUtils.pinOne({\n url: href,\n media: imageUrl,\n description\n });\n }\n };\n\n return (\n // eslint-disable-next-line jsx-a11y/anchor-is-valid\n \n \n { frameShadow }\n 
\n
\n \n );\n};\n\nPaperView.propTypes = {\n width: T.string,\n height: T.string,\n borderH: T.number,\n borderW: T.number,\n imageUrl: T.string,\n backgroundImage: T.string,\n zoomPreviewUrl: T.string,\n title: T.string,\n landscape: T.bool,\n unframed: T.bool.isRequired,\n frameThicknessV: T.number,\n frameThicknessH: T.number,\n mount: T.string,\n isTapestry: T.bool\n};\n\nexport default PaperView;\n","import React from 'react';\nimport T from 'prop-types';\nimport { MODAL_LEVEL2_SELECTOR } from 'arts/config/constants';\nimport Modal from 'arts/components/Modal';\n\nconst PreviewModal = ({\n onHide, children, className, contentOptions\n}) => (\n \n { modal }\n \n
\n );\n }, [zoomPreviewUrl, visible]);\n};\n\nZoomIn.propTypes = {\n zoomPreviewUrl: PropTypes.string,\n withFrame: PropTypes.bool,\n className: PropTypes.string\n};\n\nexport default ZoomIn;\n","import React from 'react';\nimport T from 'prop-types';\nimport PreviewModal from './preview_modal';\nimport * as ModalClasses from '../Modal/styles.module.scss';\n\nconst ZoomModal = ({\n img, onHide\n}) => (\n \n
\n );\n};\n\nMoreArtistWorks.propTypes = {\n artistId: PropTypes.number.isRequired,\n skipId: PropTypes.number.isRequired,\n artist: artistShape,\n name: PropTypes.string.isRequired,\n about: PropTypes.string,\n loadMoreWorks: PropTypes.func.isRequired\n};\n\nexport default MoreArtistWorks;\n","import { connect } from 'react-redux';\nimport {\n fetchArtist as loadMoreWorks\n} from 'arts/actions/artist';\nimport MoreArtistWorks from './more_artist_works';\n\nconst mapStateToProps = ({ artist }) => ({\n artist\n});\n\nconst mapDispatchToProps = (dispatch) => ({\n loadMoreWorks: (id) => { dispatch(loadMoreWorks(id)); }\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(MoreArtistWorks);\n","import React from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport { Link } from 'react-router-dom';\nimport { trackEvent } from '../../config/analytics';\nimport Eye from '../Viewer/eye';\nimport * as Classes from './styles.module.scss';\n// import SimilarModal from '../similar_modal';\n\nconst SimilarItems = ({\n className, eventSource, children, id\n}) => {\n const onClick = () => trackEvent('more like this', { source: eventSource, 'work id': id });\n\n return (\n \n
\n \n \n { children }\n
\n );\n};\n\nSimilarItems.propTypes = {\n id: PropTypes.number.isRequired,\n className: PropTypes.string,\n eventSource: PropTypes.string.isRequired,\n children: PropTypes.node\n};\n\nexport default SimilarItems;\n","// extracted by mini-css-extract-plugin\nvar _1 = \"EoBDmSKndybHIxFTqW6p\";\nexport { _1 as \"more\" }\n","import React, { PureComponent } from 'react';\nimport T from 'prop-types';\nimport { mayAlsoLikeShape } from 'arts/reducers/artist';\nimport SmallItemsCarousel, { WorkImage, calculateWith } from '../small_items_carousel';\nimport * as Classes from './styles.module.scss';\nimport SimilarItems from '../similar_items';\n\nconst onMoreLikeThis = () => true;\n\nconst renderImage = ({\n // eslint-disable-next-line react/prop-types\n href, title, imgUrl, id, imageWidth, imageHeight\n}, index) => {\n const width = calculateWith(imageWidth, imageHeight);\n return (\n \n
\n );\n};\n\nexport default class MayAlsoLike extends PureComponent {\n static propTypes = {\n sourceId: T.number,\n data: mayAlsoLikeShape.isRequired,\n loadAlsoLike: T.func.isRequired\n };\n\n componentDidMount() {\n const { sourceId, loadAlsoLike } = this.props;\n if (sourceId) {\n loadAlsoLike(sourceId);\n }\n }\n\n componentDidUpdate({ sourceId: sourceIdWas }) {\n const { sourceId, loadAlsoLike } = this.props;\n if (sourceId !== sourceIdWas) {\n loadAlsoLike(sourceId);\n }\n }\n\n render() {\n const { data } = this.props;\n return (\n \n { moreWorks }\n
\n );\n};\n\nMoreDetails.propTypes = {\n artistId: PropTypes.number,\n id: PropTypes.number,\n name: PropTypes.string,\n about: PropTypes.string\n};\n\nexport default MoreDetails;\n","import Constants from 'arts/config/constants';\n\nexport const resetOtherImage = () => ({\n type: Constants.Selection.RESET_OTHER\n});\n\nexport const setFrame = (paper, frame) => ({\n type: Constants.Selection.SET_FRAME,\n paper,\n frame\n});\n\nexport const setOtherImage = (url) => ({\n type: Constants.Selection.SET_OTHER,\n url\n});\n\nexport const resetSelection = () => ({\n type: Constants.Selection.RESET\n});\n\nexport const setNonGlare = (nonGlare) => ({\n type: Constants.Selection.SET_NON_GLARE,\n nonGlare\n});\n\nexport const setFramePreview = (paper, frame) => (dispatch) => {\n dispatch(setFrame(paper, frame));\n dispatch(resetOtherImage());\n};\n","import React, { PureComponent } from 'react';\nimport classnames from 'classnames';\nimport T from 'prop-types';\nimport {\n paperShape\n} from 'arts/reducers/work';\nimport { humanSize } from 'arts/config/lib';\nimport Radio from 'arts/components/Radio';\nimport * as Classes from './styles.module.scss';\n\nclass Header extends PureComponent {\n static propTypes = {\n paper: paperShape.isRequired,\n active: T.bool,\n frameless: T.bool,\n selectFrame: T.func.isRequired,\n selectNoFrame: T.func.isRequired,\n currentPrice: T.number,\n currency: T.string,\n landscape: T.bool,\n onClick: T.func.isRequired,\n skipSelectFrame: T.bool\n }\n\n constructor() {\n super();\n\n this.selectFrame = this.selectFrame.bind(this);\n this.onClick = this.onClick.bind(this);\n }\n\n onClick(e) {\n const { onClick } = this.props;\n e.stopPropagation();\n onClick();\n }\n\n selectFrame(e) {\n e.stopPropagation();\n const { frameless, selectFrame, selectNoFrame } = this.props;\n if (frameless) { selectFrame(); } else { selectNoFrame(); }\n }\n\n hasFrames() {\n const { paper } = this.props;\n return !!paper.options.find((f) => f.frameId);\n }\n\n renderAction() {\n const { frameless, skipSelectFrame } = this.props;\n if (skipSelectFrame) { return null; }\n const action = frameless\n ? '+ Add frame'\n : '- Remove frame';\n\n return (\n \n { paper.limitations }\n
\n );\n }\n return active && this.hasFrames() ? this.renderAction() : null;\n }\n\n render() {\n const {\n paper: {\n displayPaperWidth,\n displayPaperHeight,\n displayPrintWidth,\n displayPrintHeight,\n options,\n paperId,\n isHidden\n },\n active,\n currentPrice,\n currency,\n landscape\n } = this.props;\n\n const hiddenIcon = isHidden\n ? [ , ]\n : null;\n\n const price = active\n ? currentPrice.toFixed(2) || Math.abs(options[0].price).toFixed(2)\n : Math.abs(options[0].price).toFixed(2);\n\n return (\n \n
\n );\n }\n}\n\nexport default Header;\n","import React from 'react';\nimport T from 'prop-types';\nimport classnames from 'classnames';\nimport {\n frameShape\n} from 'arts/reducers/work';\n\nimport * as Classes from './styles.module.scss';\n\nconst Frame = ({\n data,\n onSelect,\n handleDragStart,\n selected\n}) => {\n const onClick = (e) => {\n e.preventDefault();\n onSelect(data);\n };\n\n const classname = classnames(\n Classes.frame, {\n [Classes.active]: selected\n }\n );\n\n return (\n \n \n { humanSize(landscape, displayPaperWidth, displayPaperHeight, 'X') }\n \n\n \n { `(image ${ humanSize(landscape, displayPrintWidth, displayPrintHeight, 'x') }${ window.currentLocale.unit })` }\n \n
\n \n \n { `${ currency }${ price }` }\n { hiddenIcon }\n \n \n
\n { this.renderActions() }\n \n \n
\n \n );\n};\n\nFrame.propTypes = {\n data: frameShape.isRequired,\n onSelect: T.func.isRequired,\n handleDragStart: T.func.isRequired,\n selected: T.bool\n};\n\nexport default Frame;\n","/* eslint-disable jsx-a11y/label-has-associated-control */\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport Radio from 'arts/components/Radio';\nimport * as Classes from './styles.module.scss';\n\nconst SelectPlexiGlass = ({ nonGlare, setNonGlare }) => {\n const onChange = (e) => setNonGlare(e.target.value === 'nonGlare');\n\n return (\n \n );\n};\n\nSelectPlexiGlass.propTypes = {\n nonGlare: PropTypes.bool,\n setNonGlare: PropTypes.func.isRequired\n};\n\nexport default SelectPlexiGlass;\n","import React, { PureComponent } from 'react';\nimport T from 'prop-types';\nimport AliceCarousel from 'react-alice-carousel';\nimport classnames from 'classnames';\nimport {\n paperShape,\n frameShape\n} from 'arts/reducers/work';\nimport Collapsible from 'arts/components/Collapsible';\nimport Header from './header';\nimport Frame from './frame';\n// eslint-disable-next-line import/named\nimport Mounts, {\n FULL_BLEED, MATTE, FLOAT_DECKLED, FLOAT_STRIGHT\n} from './mounts';\nimport SelectPlexiGlass from './select_plexi_glass';\nimport { aliceSliderSettins, handleDragStart } from '../slider_arrows';\nimport Warning from './warning';\nimport * as Classes from './styles.module.scss';\n\nconst groupBy = (xs, key) => xs.reduce((rv, x) => {\n // eslint-disable-next-line no-param-reassign\n rv[x[key]] = rv[x[key]] || [];\n rv[x[key]].push(x);\n return rv;\n}, {});\n\nconst generateUniqFrames = (options) => {\n const res = [];\n const groups = groupBy(options, 'frameName');\n const order = [MATTE, FULL_BLEED, FLOAT_DECKLED, FLOAT_STRIGHT];\n Object.keys(groups).forEach((k) => {\n const g = groups[k];\n for (let i = 0, l = order.length; i < l; i += 1) {\n const mount = order[i];\n const frame = g.find(f => f.mount === mount);\n if (frame) {\n res.push(frame);\n return;\n }\n }\n });\n return res;\n};\n\nconst hasMount = (options, mount, frameName) => !!options.find(\n i => i.mount === mount && i.frameName === frameName\n);\n\nclass Paper extends PureComponent {\n static propTypes = {\n data: paperShape.isRequired,\n setFrame: T.func.isRequired,\n setNonGlare: T.func.isRequired,\n selectedPaperId: T.number,\n selectedFrame: frameShape,\n currentPrice: T.number,\n currency: T.string,\n landscape: T.bool,\n updateHeader: T.func.isRequired,\n thumbnails: T.array,\n nonGlare: T.bool\n }\n\n constructor(props) {\n super(props);\n const {\n options\n } = props.data;\n\n this.state = {\n availableFrames: generateUniqFrames(options)\n };\n\n this.selectFrame = this.selectFrame.bind(this);\n this.setFrame = this.setFrame.bind(this);\n this.selectNoFrame = this.selectNoFrame.bind(this);\n this.selectFirstAvailableFrame = this.selectFirstAvailableFrame.bind(this);\n this.selectMount = this.selectMount.bind(this);\n this.renderFrame = this.renderFrame.bind(this);\n this.renderCollapsibleHeader = this.renderCollapsibleHeader.bind(this);\n }\n\n componentDidMount() {\n this.updateHeader();\n }\n\n componentDidUpdate() {\n this.updateHeader();\n }\n\n updateHeader() {\n this.props.updateHeader(this.props.data.paperId, this.renderCollapsibleHeader());\n }\n\n selectFrame(frame) {\n this.props.setFrame(this.props.data, frame);\n }\n\n selectFirstAvailableFrame() {\n this.props.setFrame(this.props.data, this.state.availableFrames[0]);\n this.props.setNonGlare(false);\n }\n\n selectNoFrame() {\n this.props.setFrame(this.props.data, this.props.data.options[0]);\n this.props.setNonGlare(false);\n }\n\n setFrameAndMount(frameName, mount) {\n if (frameName && mount) {\n let frame = this.props.data.options\n .find(i => i.mount === mount && i.frameName === frameName);\n if (frame) {\n this.selectFrame(frame);\n return;\n }\n // any mount\n frame = this.props.data.options.find(i => i.frameName === frameName);\n if (frame) {\n this.selectFrame(frame);\n this.props.setNonGlare(false);\n return;\n }\n this.selectFirstAvailableFrame();\n }\n }\n\n setFrame(frame) {\n const { mount } = this.props.selectedFrame;\n const { frameName } = frame;\n this.setFrameAndMount(frameName, mount);\n }\n\n selectMount(mount) {\n const { frameName } = this.props.selectedFrame;\n this.setFrameAndMount(frameName, mount);\n }\n\n renderCollapsibleHeader() {\n const {\n selectedPaperId,\n selectedFrame,\n landscape,\n data,\n currency\n } = this.props;\n\n const { isTapestry } = selectedFrame || {};\n\n return (\n \n
\n );\n });\n return res;\n }\n\n render() {\n const {\n data, selectedFrame, thumbnails, nonGlare\n } = this.props;\n const {\n frameName, mount, nonGlarePrice, isTapestry\n } = selectedFrame || {};\n const uid = data.paperId;\n const collapsed = isTapestry ? false : (data.options.indexOf(this.props.selectedFrame) <= 0);\n\n const { url: previewUrl } = (thumbnails || []).find((t) => t.type === 'framed') || {};\n const withMatte = hasMount(data.options, MATTE, frameName) ? 1 : 0;\n const withFullBleed = hasMount(data.options, FULL_BLEED, frameName) ? 1 : 0;\n const withDckl = hasMount(data.options, FLOAT_DECKLED, frameName) ? 1 : 0;\n const withFltn = hasMount(data.options, FLOAT_STRIGHT, frameName) ? 1 : 0;\n\n const hasStep2 = (withMatte + withFullBleed + withDckl + withFltn) > 1;\n const step2 = hasStep2 ? (\n \n { category }\n { frameDescription }\n
\n { renderWarning }\n \n { frames.map(this.renderFrame) }\n
\n \n \n { frames.map(this.renderFrame) }\n \n
\n \n
\n ) : null;\n\n return (\n \n Step 3 - \n Select UV Plexiglass\n
\n \n Step 1 - \n Select Moulding\n
\n { this.renderAvailableFrames() }\n \n {\n previewUrl ? (\n \n ) : null\n }\n
\n \n
\n \n Step 2 - \n Select Mount\n
\n { step2 }\n { step3 }\n select size:
\n { this.renderHeaders() }\n { this.props.data && this.props.data.length > 0 && this.props.data.map(this.renderPaper) }\n \n );\n }\n}\n\nexport default PapersMenu;\n","import { connect } from 'react-redux';\nimport {\n setFrame,\n resetSelection,\n setNonGlare\n} from 'arts/actions/selection';\nimport PapersMenu from './papers_menu';\nimport { currentPriceAndNonGlare } from '../AddToCart/add_to_cart';\n\nconst mapStateToProps = ({ selection, work: { thumbnails, data: { currency } } }) => ({\n selection,\n ...currentPriceAndNonGlare(selection, 'currentPrice'),\n thumbnails,\n currency\n});\n\nexport default connect(mapStateToProps, { setFrame, resetSelection, setNonGlare })(PapersMenu);\n","import React, { PureComponent } from 'react';\nimport T from 'prop-types';\nimport {\n thumbnailsShape\n} from 'arts/reducers/work';\nimport Entry from './entry';\n\nconst otherImageChanged = (prevThumbnails, thumbnails, prevSelectedIndex, selectedIndex) => {\n if (\n prevThumbnails[prevSelectedIndex] && thumbnails[selectedIndex]\n && prevThumbnails[prevSelectedIndex].type === thumbnails[selectedIndex].type\n && (\n prevThumbnails[prevSelectedIndex].type === 'second'\n || prevThumbnails[prevSelectedIndex].type === 'frame'\n )\n ) {\n return true;\n }\n return false;\n};\n\nexport default class Thumbnails extends PureComponent {\n static propTypes = {\n thumbnails: thumbnailsShape.isRequired,\n setFramePreview: T.func.isRequired,\n setOtherImage: T.func.isRequired\n };\n\n constructor(props) {\n super(props);\n this.onSelect = this.onSelect.bind(this);\n this.state = { selectedIndex: 0 };\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (otherImageChanged(\n prevProps.thumbnails, this.props.thumbnails,\n prevState.selectedIndex, this.state.selectedIndex\n )\n ) {\n this.props.setOtherImage(this.props.thumbnails[this.state.selectedIndex].url);\n }\n }\n\n onSelect(selectedIndex) {\n this.setState({ selectedIndex });\n if (this.props.thumbnails[selectedIndex].selection) {\n const { paper, frame } = this.props.thumbnails[selectedIndex].selection;\n this.props.setFramePreview(paper, frame);\n } else {\n this.props.setOtherImage(this.props.thumbnails[selectedIndex].url);\n }\n }\n\n render() {\n if (this.props.thumbnails.length < 1) {\n return null;\n }\n\n return (\n <>\n {\n this.props.thumbnails.map((e, index) => (\n \n \n
\n );\n } else {\n const paper = selectedPaper || data.firstPaper;\n if (!paper) {\n content = \n { content }\n
\n );\n};\n\nImagePreview.propTypes = {\n selectedFrame: frameShape,\n selectedPaper: paperShape,\n data: workShape,\n otherImageUrl: PropTypes.string\n};\n\nexport default ImagePreview;\n","import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport AliceCarousel from 'react-alice-carousel';\nimport { useWindowSize } from '../visual_search/use_window_size';\nimport * as Classes from '../works/styles.module.scss';\nimport ImagePreview from './image_preview';\n\nconst { w1 } = Classes;\nconst mobileBreak = parseInt(w1, 10);\n\nconst ImagePreviewSwitcher = ({ secondPreviewUrl, otherImageUrl, ...props }) => {\n const { width } = useWindowSize();\n const showCarousel = useMemo(\n () => secondPreviewUrl && width <= mobileBreak,\n [width, secondPreviewUrl]\n );\n if (showCarousel) {\n return (\n \n \n
\n \n );\n }\n return \n \n
\n \n {\n (id && zoomPreviewUrlUsed && !otherImageUrl) ? 'Roll Over to Zoom' : null\n }\n \n
\n );\n\n const similarItems = id && !skipMoreLikeThis ? (\n \n
\n \n );\n};\n\nViewer.propTypes = {\n id: T.number.isRequired,\n selectedFrame: frameShape,\n selectedPaper: paperShape,\n hasSelection: T.bool,\n data: workShape,\n thumbnails: thumbnailsShape,\n setOtherImage: T.func.isRequired,\n setFramePreview: T.func.isRequired,\n otherImageUrl: T.string,\n extraContent: T.node\n};\n\nexport default Viewer;\n","import { connect } from 'react-redux';\nimport {\n setFramePreview,\n setOtherImage\n} from 'arts/actions/selection';\nimport Viewer from './viewer';\n\nconst mapStateToProps = ({ selection, work: { data, thumbnails } }) => ({\n selectedFrame: selection.frame,\n selectedPaper: selection.paper,\n otherImageUrl: selection.otherImageUrl,\n hasSelection: Boolean(selection.frame && selection.paper),\n data,\n thumbnails\n});\n\nconst mapDispatchToProps = (dispatch) => ({\n setFramePreview: (paper, frame) => dispatch(setFramePreview(paper, frame)),\n setOtherImage: (url) => dispatch(setOtherImage(url))\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Viewer);\n","import React from 'react';\nimport classnames from 'classnames';\nimport T from 'prop-types';\nimport { Link } from 'react-router-dom';\nimport PinIt from 'arts/components/Social/pin_it';\nimport * as AppClasses from '../Application/styles.module.scss';\nimport * as Classes from './styles.module.scss';\nimport Favorite from '../favorite';\n\nexport const author = (authorId, authorSlug, authorName, isMobile) => {\n if (!authorName || !authorId) {\n return (\n \n
\n \n \n
\n { rollOver }\n { extraContent }\n \n By \n
\n \n) : null);\n\nexport const renderTitle = (isHidden, title, id) => {\n const hiddenIcon = isHidden ? [\n ,\n \n ] : null;\n return (\n
\n { hiddenIcon }\n { title }\n \n { adminLink(id) }\n
\n );\n};\n\nconst renderPrintedOn = (printedOn, limitedEdition) => (\n\n Printed on \n { printedOn || '...'}\n { limitedEdition ? '' : (printedOn && ' (Open Edition)') }\n
\n);\n\nconst WorkSummary = ({\n title,\n authorName,\n authorId,\n authorSlug,\n description,\n printedOn,\n limitedEdition,\n isHidden,\n id,\n frameId,\n paperId,\n href,\n isMobile\n}) => {\n const theTitle = (\n\n { renderTitle(isHidden, title, id) }\n
\n );\n\n const s1 = isMobile ? (\n \n {\n href ? (\n
\n \n { theTitle }\n { author(authorId, authorSlug, authorName, true) }\n
\n ) : null;\n\n const s2 = isMobile ? null : (\n <>\n \n { theTitle }\n { author(authorId, authorSlug, authorName, false) }\n
\n \n
\n \n );\n\n return (\n <>\n { s1 }\n { s2 }\n \n );\n};\n\nWorkSummary.propTypes = {\n id: T.number,\n frameId: T.number,\n paperId: T.number,\n title: T.string,\n authorName: T.string,\n authorId: T.number,\n authorSlug: T.string,\n description: T.string,\n printedOn: T.string,\n limitedEdition: T.bool,\n isHidden: T.bool,\n href: T.string,\n isMobile: T.bool\n};\n\nexport default WorkSummary;\n","import { connect } from 'react-redux';\nimport AddToCart from './smart_add_to_cart';\nimport { currentPriceAndNonGlare } from './add_to_cart';\n\nconst mapStateToProps = ({ selection, work }) => ({\n ...currentPriceAndNonGlare(selection, 'price'),\n inStock: work && work.data ? work.data.inStock : null,\n selection: !!selection.frame,\n frameId: selection && selection.frame && selection.frame.frameId,\n workId: work && work.data && work.data.id,\n paperId: selection && selection.paper && selection.paper.paperId,\n currency: work.data.currency\n});\n\nconst mapDispatchToProps = () => ({});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(AddToCart);\n","import React from 'react';\nimport T from 'prop-types';\nimport * as Classes from './styles.module.scss';\n\nconst Entry = ({ label, value }) => (\n \n { description }\n \n
\n { renderPrintedOn(printedOn, limitedEdition) }\n\n
\n);\n\nEntry.propTypes = {\n label: T.string,\n value: T.string\n};\n\nexport default Entry;\n","// extracted by mini-css-extract-plugin\nvar _1 = \"csGzcl2tkRzYoCzC4PxS\";\nvar _2 = \"R2BOgqLAdpOWbNvET40w\";\nvar _3 = \"_4qkYw9o6IFbGG0vbKNwn\";\nexport { _1 as \"entry\", _2 as \"label\", _3 as \"value\" }\n","import React from 'react';\nimport T from 'prop-types';\nimport {\n frameShape,\n paperShape\n} from 'arts/reducers/work';\nimport Constants, { TAPESTRY } from 'arts/config/constants';\nimport { humanSize } from 'arts/config/lib';\nimport Entry from './entry';\nimport Expandable from '../expandable';\n\nconst PRODUCT_DETAILS = 'Product Details and Dimensions';\n\nconst title = (frame, paper) => {\n if (paper.paperMaterial === 'Canvas') {\n return `Canvas ${ PRODUCT_DETAILS }`;\n }\n\n if (frame.frameId) {\n if (paper.paperMaterial !== TAPESTRY) {\n return `Framed ${ PRODUCT_DETAILS }`;\n }\n }\n\n return PRODUCT_DETAILS;\n};\n\nexport const renderDetailEtries = (frame, paper, landscape) => {\n const entries = [];\n let sizes = null;\n if (frame.frameId && frame.frameMat === 0) {\n sizes = `${ humanSize(landscape, paper.displayPrintWidthNoMat, paper.displayPrintHeightNoMat, 'x') }${ window.currentLocale.unit }`;\n } else {\n sizes = `${ humanSize(landscape, paper.displayPrintWidth, paper.displayPrintHeight, 'x') }${ window.currentLocale.unit }`;\n }\n entries.push(\n { label }\n :\n
\n \n { value }\n
\n \n {\n lines.map((l, i) => (\n
\n \n -\n {' '}\n {l}\n
\n ))\n }\n \n As our prints and frames are custom made to order according to your\n specifications, all of our products are final sale and non-returnable.\n \n \n Our tapestries are anchored with a hanging rod on the top and one on the bottom.\n All of our hanging rods are made from wood.\n
\n\n Canvas prints do not require a hanging wire and can be hung\n directly on a screw or nail.\n
\n ) : (\n\n Our canvas prints are professionally framed with a woodgrain frame,\n designed specifically for framing canvas. The frame has a stepped inner\n edge to add subtle depth, and comes ready to hang with a hanging wire.\n
\n )\n }\n\n Our fine art paper prints and photographs are professionally framed\n with \n { plexiGlass }\n , and come ready to hang on your wall\n with a hanging wire. Prints can be framed with a \n { mat() }\n white mat,\n or without.\n
\n\n \n {\n (aboutPrints || []).map((v, i) => (\n \n { frameDetails }\n \n { shippingDetailsItems() }\n \n
\n );\n};\n\nExtraInfo.propTypes = {\n selection: PropTypes.object,\n aboutPrints: PropTypes.arrayOf(PropTypes.string)\n};\n\nexport default ExtraInfo;\n","import { connect } from 'react-redux';\nimport ExtraInfo from './extra_info';\n\nconst mapStateToProps = ({ selection, work }) => ({\n selection,\n aboutPrints: work.data && work.data.aboutPrints\n});\n\nconst mapDispatchToProps = () => ({});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(ExtraInfo);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Constants from 'arts/config/constants';\nimport Expandable from '../expandable';\nimport * as Classes from './styles.module.scss';\n\nconst AboutTheArt = ({\n description, printedOn, limitedEdition\n}) => (\n { v }
\n ))\n }\n\n
\n \n);\n\nAboutTheArt.propTypes = {\n description: PropTypes.string,\n printedOn: PropTypes.string,\n limitedEdition: PropTypes.bool\n};\n\nexport default AboutTheArt;\n","import React, { useEffect } from 'react';\nimport T from 'prop-types';\nimport classnames from 'classnames';\nimport { Link } from 'react-router-dom';\nimport { frameShape, workShape } from 'arts/reducers/work';\nimport { toCamelCase } from 'arts/config/convertCase';\nimport { linkTo } from 'arts/config/lib';\nimport { trackEvent } from 'arts/config/analytics';\nimport MoreDetails from './more_details';\nimport PapersMenu from '../PapersMenu';\nimport Viewer from '../Viewer';\nimport WorkSummary from '../WorkSummary';\nimport AddToCart from '../AddToCart';\nimport SelectionDetails from '../selection_details';\nimport AdditionalInfo from '../additional_info';\nimport ExtraInfo from '../extra_info';\nimport BreadCrumbs from './bread_crumbs';\nimport AboutTheArt from './about_the_art';\nimport GTMPageView, { GtmDetails } from '../Application/data_layer';\n\nimport * as AppClasses from '../Application/styles.module.scss';\nimport * as Classes from './styles.module.scss';\n\nconst Work = ({\n id,\n detail,\n fetchWork,\n data,\n modal,\n paperId,\n frameId,\n selectedFrame,\n selectedPaper\n}) => {\n useEffect(() => {\n const details = detail || (window.arts && toCamelCase(window.arts[id])) || {};\n fetchWork(id, details);\n }, [id]);\n\n let papers = null;\n const {\n title, authorName, authorId, authorSlug, description, aboutPaper,\n limitedEdition, isHidden, href,\n notAvailable, allowStores, storeItemId, aboutTheAuthor,\n workSizes, landscape\n } = data;\n\n useEffect(() => {\n if (id && title && authorId) {\n trackEvent('art page', {\n 'work id': id,\n 'author id': authorId,\n name: title,\n 'author name': authorName,\n display: (modal ? 'modal' : 'page')\n });\n }\n }, [id, title, authorId]);\n\n if (notAvailable && !isHidden) {\n papers = (\n { description }
\n\n Printed on \n { printedOn }\n { limitedEdition ? '' : ' (Open Edition)' }\n
\nThis art is no longer available
\n );\n } else {\n papers = (\n \n { id ?
\n );\n};\n\nWork.propTypes = {\n id: T.number.isRequired,\n detail: T.shape({}),\n fetchWork: T.func.isRequired,\n data: workShape,\n modal: T.bool,\n paperId: T.number,\n frameId: T.number,\n selectedFrame: frameShape,\n selectedPaper: T.shape({})\n};\n\nexport default Work;\n","import { connect } from 'react-redux';\nimport { fetchWork } from 'arts/actions/work';\nimport Work from './work';\n\nconst findWorkDetails = (works, id, detail) => (\n detail || ((works || {}).collection || []).find(w => w.id === id)\n);\n\nconst mapStateToProps = ({ selection, works, work: { data, error, loading } }, { id, detail }) => ({\n data,\n error,\n loading,\n selectedFrame: (selection || {}).frame,\n selectedPaper: (selection || {}).paper,\n otherImageUrl: (selection || {}).otherImageUrl,\n detail: findWorkDetails(works, id, detail)\n});\n\nconst mapDispatchToProps = (dispatch) => ({\n fetchWork: (id, detail) => { dispatch(fetchWork(id, detail)); }\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Work);\n","// extracted by mini-css-extract-plugin\nvar _1 = \"mmhr4PYiH1kAgbPb3Zw7\";\nvar _2 = \"wmyG9E90WXyuLmgpgBPn\";\nexport { _1 as \"links\", _2 as \"root\" }\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from 'react-router-dom';\nimport classnames from 'classnames';\nimport * as Classes from './styles.module.scss';\n\nconst renderLink = (text, to, index, isLast) => (\n isLast ? (\n \n { text }\n \n ) : [\n (\n \n { text }\n \n ),\n (\n /\n )\n ]\n);\n\nexport const BreadCrumbsSkeleton = () => (\n \n
\n \n
\n);\n\nconst BreadCrumbs = ({\n links, className, rootClassName, children\n}) => (\n \n \n
\n \n
\n);\n\nBreadCrumbs.propTypes = {\n links: PropTypes.arrayOf(PropTypes.shape({\n text: PropTypes.string,\n to: PropTypes.string.isRequired\n })).isRequired,\n children: PropTypes.node,\n className: PropTypes.string,\n rootClassName: PropTypes.string\n};\n\nexport default BreadCrumbs;\n","import React, { PureComponent } from 'react';\nimport classnames from 'classnames';\nimport T from 'prop-types';\nimport Collapsible from 'arts/components/Collapsible';\nimport * as Classes from './styles.module.scss';\n\nexport default class Expandable extends PureComponent {\n static propTypes = {\n title: T.string.isRequired,\n children: T.node.isRequired,\n eKey: T.string.isRequired,\n open: T.bool.isRequired,\n expand: T.func.isRequired,\n className: T.string\n };\n\n toggle = (e) => {\n const { eKey, expand } = this.props;\n e.preventDefault();\n expand(eKey);\n }\n\n render() {\n const {\n className, open, title, children\n } = this.props;\n return (\n \n {\n links.map(\n ({ text, to }, index) => renderLink(text, to, index, index === links.length - 1)\n )\n }\n
\n { children }\n \n \n \n { title }\n \n \n \n
\n );\n }\n}\n","// extracted by mini-css-extract-plugin\nvar _1 = \"BCL2ds2XnYdF3lJ5DJD7\";\nvar _2 = \"kHNVWMauXQAJVKfooo4c\";\nvar _3 = \"SmztE1_oVRHMyb1os4BA\";\nvar _4 = \"RGznuVimqTJ3ln2AhELi\";\nexport { _1 as \"content\", _2 as \"expandable\", _3 as \"open\", _4 as \"triangle\" }\n","import { connect } from 'react-redux';\nimport { expand } from 'arts/actions/expand';\nimport Expandable from './expandable';\n\nconst mapStateToProps = ({ expandable }, { eKey }) => ({\n open: !!expandable[eKey]\n});\n\nconst mapDispatchToProps = (dispatch, { eKey }) => ({\n expand: () => dispatch(expand(eKey))\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Expandable);\n","import Constants from 'arts/config/constants';\n\nexport const expand = (key) => ({\n type: Constants.Expandable.ACTIONS.expand,\n key\n});\n","import React from 'react';\n\nexport default (props) => (\n \n);\n","import React from 'react';\n\nexport default (props) => (\n \n);\n","// extracted by mini-css-extract-plugin\nvar _1 = \"aFSN3O2Qhh4FqjePRYT3\";\nvar _2 = \"aaRM_DpYs_hBjAzZpxKT\";\nvar _3 = \"qOQrvfHpzEjJUcg06NLp\";\nexport { _1 as \"button\", _2 as \"off\", _3 as \"on\" }\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport HeartE from './heart_e';\nimport HeartF from './heart_f';\nimport * as classes from './styles.module.scss';\n\nconst Favorite = ({\n id,\n type,\n isAdded,\n add,\n remove,\n load,\n loading,\n loaded,\n className\n}) => {\n useEffect(() => {\n if (!loaded && !loading) {\n load();\n }\n }, []);\n\n if (!window.currentUser) {\n const onSignIn = () => {\n const event = new CustomEvent('LoginRequiredFavroutes');\n document.dispatchEvent(event);\n };\n\n return (\n \n );\n }\n\n if (!loaded) {\n return null;\n }\n\n const onClick = () => {\n if (isAdded) {\n remove(id, type);\n } else {\n add(id, type);\n }\n };\n\n const icon = isAdded ? \n { children }\n
\n \n
\n );\n\n return renderText(title, images, true);\n};\n\nSmallItemsCarousel.propTypes = {\n items: PropTypes.arrayOf(PropTypes.shape({\n imgUrl: PropTypes.string,\n imageHeight: PropTypes.number,\n imageWidth: PropTypes.number,\n href: PropTypes.string,\n title: PropTypes.string\n })),\n title: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),\n onClick: PropTypes.func,\n renderItem: PropTypes.func,\n gtmListName: PropTypes.string,\n extended: PropTypes.bool\n};\n\nexport default SmallItemsCarousel;\n","import Constants from 'arts/config/constants';\nimport { addToStoreItemsApi, removeFromStoreItemsApi } from 'arts/config/api';\n\nexport const updateUI = (totalItems) => {\n document.querySelector('.my-store-status strong').innerHTML = totalItems;\n};\n\nexport const add = (opts) => (dispatch) => {\n addToStoreItemsApi(opts)\n .then(\n (data) => {\n if (!data) { return; }\n const { id, storableId, totalItems } = data;\n dispatch({\n storeItemId: id,\n wallId: storableId,\n type: Constants.WallStoreItems.ADDED\n });\n updateUI(totalItems);\n }\n ).catch(() => { });\n};\n\nexport const remove = (wallId, storeItemId) => (dispatch) => {\n removeFromStoreItemsApi(storeItemId)\n .then(\n (data) => {\n if (!data) { return; }\n const { totalItems } = data;\n dispatch({\n wallId,\n type: Constants.WallStoreItems.REMOVED\n });\n updateUI(totalItems);\n }\n ).catch(() => { });\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport * as Classes from './styles.module.scss';\n\nconst StoreItem = ({\n wallId,\n workId,\n storeItemId,\n add,\n remove,\n className,\n paperId,\n frameId\n}) => {\n const onAction = (e) => {\n e.preventDefault();\n if (storeItemId) {\n const id = wallId || workId;\n remove(id, storeItemId);\n return;\n }\n const props = { frameId, paperId };\n if (wallId) {\n props.wallId = wallId;\n } else {\n props.workId = workId;\n }\n add(props);\n };\n\n const action = storeItemId ? 'Remove from Store' : 'Add To Store';\n return (\n