\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 let status = (\n \n Sold Out\n
\n );\n }\n return (\n <>\n \n
\n { selection && inStock ? \n { status }\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 \n
\n );\n};\n\nMount.propTypes = {\n isSelected: PropTypes.bool.isRequired,\n kind: PropTypes.string.isRequired,\n name: PropTypes.string.isRequired,\n description: PropTypes.string.isRequired,\n onSelect: PropTypes.func.isRequired,\n paperId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,\n postFix: PropTypes.string,\n children: PropTypes.node\n};\n\nexport default Mount;\n","import React, { useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport * as Classes from './styles.module.scss';\n\nconst MatColor = ({\n isSelected, kind, onSelect, paperId, postFix, colorRgb, name\n}) => {\n const radioId = `MountRadioControl-${ paperId }-${ kind }`;\n const radioName = `MountRadioControl-${ paperId }-${ postFix }`;\n\n const ref = useRef(null);\n\n const onClick = (e) => {\n e.preventDefault();\n ref.current.click();\n };\n\n return (\n \n
\n \n { children }\n \n { name }\n \n { description }\n \n
\n \n \n \n \n
\n );\n};\n\nMatColor.propTypes = {\n isSelected: PropTypes.bool.isRequired,\n kind: PropTypes.string.isRequired,\n onSelect: PropTypes.func.isRequired,\n paperId: PropTypes.string.isRequired,\n postFix: PropTypes.string.isRequired,\n colorRgb: PropTypes.array.isRequired,\n name: PropTypes.string.isRequired\n};\n\nexport default MatColor;\n","import React, { useMemo } from 'react';\nimport T from 'prop-types';\n\nimport * as Classes from './styles.module.scss';\nimport Mount from './mount';\nimport MatColor from './mat_color';\n\nexport const FULL_BLEED = 'fullBleed';\nexport const MATTE = 'matte';\nexport const FLOAT_DECKLED = 'dckl';\nexport const FLOAT_STRIGHT = 'fltn';\nexport const FLOATING = 'floating';\n\nexport const MAT_COLORS_ORDER = ['White', 'Deep Red', 'Indigo', 'Moss Point Green'];\n\nexport const mat = () => (window.currentLocale.currentLocale === 'en' ? '2.75\"' : '7cm');\nconst matteText = (caps) => (caps ? 'M' : 'm') + (window.currentLocale.currentLocale === 'en' ? 'atte' : 'ount');\n\nconst VALID_MOUNT_KINDS = [MATTE, FULL_BLEED, FLOAT_STRIGHT, FLOAT_DECKLED];\n\nconst Mounts = ({\n onSelect, selectedMount, selectedMatColor, paperId, matte,\n fullBleed, dckl, fltn, matColors, matColorsRgb\n}) => {\n const onChange = (e) => {\n const { value } = e.target;\n if (value === FLOATING) {\n onSelect(FLOAT_STRIGHT, null);\n } else if (value === MATTE) {\n onSelect(MATTE, selectedMatColor);\n } else if (value.indexOf(';') > -1) {\n const [kind, color] = value.split(';');\n onSelect(kind, color);\n } else {\n onSelect(value, selectedMatColor);\n }\n };\n\n const renderMatte = useMemo(() => {\n const description = selectedMatColor\n ? ` - ${ mat() } wide, ${ selectedMatColor } matboard, buffered for extended life`\n : ` - ${ mat() } wide matboard, buffered for extended life`;\n if (matte) {\n return (\n \n { MAT_COLORS_ORDER.map((color) => (\n (matColors.includes(color) ? (\n
\n \n );\n }\n return null;\n }, [matte, matColors, selectedMatColor, selectedMount]);\n\n const renderFillBleed = useMemo(() => {\n if (fullBleed) {\n return (\n \n { fltn && (\n
\n \n );\n }\n return null;\n }, [dckl, fltn, selectedMount, matColors, selectedMatColor]);\n\n return (\n \n );\n};\n\nMounts.propTypes = {\n onSelect: T.func.isRequired,\n selectedMount: T.oneOf(VALID_MOUNT_KINDS),\n selectedMatColor: T.string,\n paperId: T.oneOfType([T.number, T.string]).isRequired,\n matte: T.bool,\n fullBleed: T.bool,\n dckl: T.bool,\n fltn: T.bool,\n matColors: T.arrayOf(T.string),\n matColorsRgb: T.arrayOf(T.arrayOf(T.number))\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 { 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\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 frameMatColorRgb: T.array\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 from 'react';\nimport T from 'prop-types';\nimport classnames from 'classnames';\nimport * as Classes from './styles.module.scss';\n\nconst Frame = ({\n frameName,\n frameThumbUrl,\n setFrameByName,\n handleDragStart,\n selected\n}) => {\n const onClick = (e) => {\n e.preventDefault();\n setFrameByName(frameName);\n };\n\n const classname = classnames(\n Classes.frame, {\n [Classes.active]: selected\n }\n );\n\n return (\n \n 
\n
\n \n );\n};\n\nFrame.propTypes = {\n frameName: T.string.isRequired,\n frameThumbUrl: T.string.isRequired,\n setFrameByName: 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, { useMemo } 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 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 hasMount = (options, mount, frameName) => !!options.find(\n i => i.mount === mount && i.frameName === frameName\n);\n\nconst Paper = ({\n paper,\n setFrame,\n setNonGlare,\n selectedFrame,\n thumbnails,\n nonGlare,\n availableFrames,\n selectFirstAvailableFrame\n}) => {\n const selectFrame = (frame) => setFrame(paper, frame);\n\n const setFrameAndMount = (frameName, mount, frameMatColorName) => {\n if (!(frameName && mount)) { return; }\n\n // with the selected mount\n let frame = paper.options.find(i => (\n i.mount === mount && i.frameName === frameName && i.frameMatColorName === frameMatColorName\n ));\n\n if (frame) {\n selectFrame(frame);\n return;\n }\n\n // any mat color\n frame = paper.options.find(i => (\n i.mount === mount && i.frameName === frameName\n ));\n if (frame) {\n selectFrame(frame);\n setNonGlare(false);\n return;\n }\n\n // any mount or mat color\n frame = paper.options.find(i => i.frameName === frameName);\n if (frame) {\n selectFrame(frame);\n setNonGlare(false);\n return;\n }\n\n // any frame\n selectFirstAvailableFrame(paper);\n };\n\n const setFrameByName = (frameName) => {\n const { mount, frameMatColorName } = selectedFrame || {};\n setFrameAndMount(frameName, mount, frameMatColorName);\n };\n\n const selectMount = (mount, frameMatColorName) => {\n const { frameName } = selectedFrame || {};\n setFrameAndMount(frameName, mount, frameMatColorName);\n };\n\n const renderAvailableFrames = useMemo(() => {\n const categories = availableFrames\n .map((f) => f.frameCategory)\n .filter((value, index, self) => self.indexOf(value) === index)\n .sort();\n\n return categories.map((category) => {\n const frames = availableFrames.filter((f) => f.frameCategory === category);\n const {\n frameName, frameDisplayWidth, frameDisplayDepth, warning, frameLabel, frameCategory\n } = selectedFrame || {};\n let frameDescription = null;\n let renderWarning = null;\n if (frameCategory === category) {\n frameDescription = ` - ${ frameName }, ${ frameLabel } width ${ frameDisplayWidth }${ window.currentLocale.unit }, depth ${ frameDisplayDepth }`;\n renderWarning = \n
\n );\n });\n }, [availableFrames, selectedFrame]);\n\n const {\n frameName, isTapestry, mount, nonGlarePrice, frameMatColorName\n } = selectedFrame || {};\n\n const uid = paper.paperId;\n const collapsed = isTapestry ? false : (paper.options.indexOf(selectedFrame) <= 0);\n const { url: previewUrl } = (thumbnails || []).find((t) => t.type === 'framed') || {};\n const withMatte = hasMount(paper.options, MATTE, frameName) ? 1 : 0;\n const withFullBleed = hasMount(paper.options, FULL_BLEED, frameName) ? 1 : 0;\n const withDckl = hasMount(paper.options, FLOAT_DECKLED, frameName) ? 1 : 0;\n const withFltn = hasMount(paper.options, FLOAT_STRIGHT, frameName) ? 1 : 0;\n const matAndColors = paper.options.filter(\n f => f.mount === MATTE && f.frameName === frameName\n ).map(f => [f.frameMatColorName, f.frameMatColorRgb]);\n const matColors = matAndColors.map(f => f[0]);\n const matColorsRgb = matAndColors.map(f => f[1]);\n\n const hasStep2 = (withMatte + withFullBleed + withDckl + withFltn) > 1;\n\n const step2 = hasStep2 ? (\n \n { category }\n { frameDescription }\n
\n { renderWarning }\n \n { renderedFrames }\n
\n \n \n { renderedFrames }\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 { renderAvailableFrames }\n \n { previewUrl ? : null }\n
\n \n
\n \n Step 2 - \n Select Mount\n
\n { step2 }\n { step3 }\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, { useEffect, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {\n paperShape\n} from 'arts/reducers/work';\nimport {\n selectionShape\n} from 'arts/reducers/selection';\nimport {\n FULL_BLEED, MATTE, FLOAT_DECKLED, FLOAT_STRIGHT\n} from './mounts';\nimport Paper from './paper';\nimport * as AppClasses from '../Application/styles.module.scss';\nimport * as Classes from './styles.module.scss';\nimport Header from './header';\n\n/* eslint-disable prefer-destructuring */\nconst findPaperAndFrame = (data, paperId, frameId) => {\n if (!data || data.length === 0) {\n return [null, null];\n }\n // // this.props.setFrame(nextProps.data[0], nextProps.data[0].options[0]);\n if (!paperId) {\n return [data[0], data[0].options[0]];\n }\n\n let paper = data.find((p) => p.paperId === paperId);\n if (!paper) {\n paper = data[0];\n }\n\n let frame = null;\n frame = paper.options.find((f) => f.frameId === frameId);\n if (!frame) {\n frame = paper.options[0];\n }\n\n return [paper, frame];\n};\n/* eslint-enable prefer-destructuring */\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 if (mount !== MATTE) {\n const frame = g.find(f => f.mount === mount);\n if (frame) {\n res.push(frame);\n return;\n }\n } else {\n const matteFrames = g.filter(f => f.mount === mount);\n matteFrames.forEach(frame => {\n res.push(frame);\n });\n }\n }\n });\n return res;\n};\n\nconst PapersMenu = ({\n data,\n setFrame,\n setNonGlare,\n selection,\n resetSelection,\n initialPaperId,\n initialFrameId,\n currentPrice,\n currency,\n landscape,\n nonGlare,\n thumbnails\n}) => {\n useEffect(() => {\n const [paper, frame] = findPaperAndFrame(\n data || [],\n initialPaperId,\n initialFrameId\n );\n setFrame(paper, frame);\n }, [data, initialPaperId, initialFrameId, setFrame]);\n\n useEffect(() => () => resetSelection(), [resetSelection]);\n\n const availableFrames = useMemo(() => {\n const res = {};\n data?.forEach((paper) => {\n res[paper.paperId] = generateUniqFrames(paper.options);\n });\n return res;\n }, [data, data?.options]);\n\n const selectNoFrame = (paper) => {\n setFrame(paper, paper.options[0]);\n setNonGlare(false);\n };\n\n const selectFirstAvailableFrame = (paper) => {\n setFrame(paper, availableFrames[paper.paperId][0]);\n setNonGlare(false);\n };\n\n const {\n frame: selectedFrame, paper: selectedPaper\n } = useMemo(() => selection || {}, [selection]);\n\n const { paperId: selectedPaperId } = useMemo(() => selectedPaper || {}, [selectedPaper]);\n\n const renderHeaders = () => {\n if (!data || data.length === 0) {\n return (\n <>\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 select size:
\n { renderHeaders() }\n {\n (data || []).map((paper) => (\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 { printableImageUrl }\n
\n );\n};\n\nExtraInfo.propTypes = {\n selection: PropTypes.object,\n aboutPrints: PropTypes.arrayOf(PropTypes.string),\n id: PropTypes.number\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 id: work.data && work.data.id\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