\n {filterType.key.indexOf(\"size\") !== -1 && \"Size \"}\n {\" \"}\n {filterType.displayName}\n
\n ;\n\n render () {\n const {clearAllFilters, selectedFilters} = this.props, // eslint-disable-line\n kindFilter = selectedFilters.filter(selectedFilter =>\n selectedFilter.key.indexOf(\"kind\") === 0 && selectedFilter.key.split(\"-\").length === 2),\n selectedNonKindFilters = selectedFilters.filter((selectedFilter) => {\n const {key} = selectedFilter;\n return (!(key.indexOf(\"kind\") === 0) || key.split(\"-\").length !== 2) && !(key.indexOf(\"sort\") === 0);\n });\n\n return (\n \n
\n\n \n );\n }\n}\n\nconst mapStoreToProps = state => ({\"selectedFilters\": state.selectedFilters || []});\n\n\nexport default connect(mapStoreToProps, {clearAllFilters})(FilterPills);\n","import PropTypes from \"prop-types\";\nimport React from \"react\";\nimport {connect} from \"react-redux\";\n\nclass MobileSort extends React.Component {\n\n static propTypes = {\n \"selectedFilters\": PropTypes.array.isRequired,\n \"sort\": PropTypes.func.isRequired,\n \"sorts\": PropTypes.array.isRequired\n };\n\n renderSortItem = (sortItem) => {\n const {selectedFilters, sort} = this.props;\n const selectedSort = selectedFilters.find(filter => filter.key.indexOf(\"sort\") === 0);\n\n return (\n \n \n {kindFilter.length > 0\n ? kindFilter[0].displayName\n : \"All Jewelry\"\n }\n \n
\n \n
\n \n {selectedNonKindFilters.map(filterName => this.filterPill(filterName))}\n {selectedFilters.length > 0 &&\n \n Clear All\n
}\n \n
\n );\n }\n}\n\nconst mapStoreToProps = state => ({\"selectedFilters\": state.selectedFilters || []});\n\nexport default connect(mapStoreToProps)(MobileSort);\n","/* eslint-disable max-len, max-lines, no-undef, react/destructuring-assignment, react/no-unused-state, sort-keys, sort-vars */\n/* eslint-disable consistent-return */\n\nimport MobileSort from \"./MobileSort\";\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\nimport ToolTip from \"../../../shared/components/ToolTip\";\nimport {clearAllFilters} from \"../../../actions\";\nimport {connect} from \"react-redux\";\n\nclass Filters extends React.Component {\n\n static propTypes = {\n \"categories\": PropTypes.array.isRequired,\n \"clearAllFilters\": PropTypes.func.isRequired,\n \"doFilter\": PropTypes.func.isRequired,\n \"excludeTrendsFromFilter\": PropTypes.bool,\n \"filters\": PropTypes.array.isRequired,\n \"handleClick\": PropTypes.func.isRequired,\n \"handleTooltipClose\": PropTypes.func.isRequired,\n \"isMobile\": PropTypes.bool.isRequired,\n \"params\": PropTypes.object.isRequired,\n \"previewSwapping\": PropTypes.bool.isRequired,\n \"selectedFilters\": PropTypes.array.isRequired,\n \"showClearancePrice\": PropTypes.bool.isRequired,\n \"showPriceRangeFilters\": PropTypes.bool.isRequired,\n \"showPromoFilters\": PropTypes.bool.isRequired,\n \"showToolTip\": PropTypes.bool.isRequired,\n \"showTrendFilters\": PropTypes.bool.isRequired,\n \"sort\": PropTypes.func.isRequired,\n \"sorts\": PropTypes.array.isRequired,\n \"stickyFilter\": PropTypes.object,\n \"toggleMobileFilters\": PropTypes.func.isRequired\n };\n\n static defaultProps = {\n \"excludeTrendsFromFilter\": false,\n \"stickyFilter\":\n {\n \"class\": \"sticky-filter-default\",\n \"scrollHeight\": 400\n }\n }\n\n constructor (props) {\n super(props);\n this.state = {\"selectedNonFilterTrend\": null};\n this.handleScroll = this.handleScroll.bind(this);\n }\n\n componentDidMount () {\n window.addEventListener(\"scroll\", this.handleScroll);\n }\n\n componentWillReceiveProps () {\n this.getSelectedNonFilterTrend();\n }\n\n componentWillUnmount () {\n window.removeEventListener(\"scroll\", this.handleScroll);\n }\n\n handleKeyDown = (event) => {\n if (event.keyCode === 13) {\n this.props.handleClick(event);\n }\n }\n\n handleScroll () {\n this.setState({\"scroll\": window.scrollY});\n }\n\n toggleFiltersDisplay = (event) => {\n const target = event.currentTarget;\n const querySelector = target.attributes[\"data-target\"].value;\n\n $(target).toggleClass(\"bold\");\n $(querySelector).slideToggle();\n $(target).children(\".expand-btn, .collapse-btn\").toggleClass(\"expand-btn collapse-btn\");\n }\n\n mapFiltersToProperty = (filters, propName) =>\n filters.reduce((result, filter) => {\n if (filter[propName]) {\n return result.concat(filter[propName]);\n }\n return result;\n }, []);\n\n resetFilters = () => {\n const {clearAllFilters} = this.props; // eslint-disable-line no-shadow\n clearAllFilters();\n }\n\n renderSubCategories = (selection, selectedKeys) =>\n (\n \n Sort by:\n
\n \n {sorts.map(sortItem => this.renderSortItem(sortItem))}\n
\n \n {nbOfSelectedForType > 0 ? ` (${nbOfSelectedForType})` : \"\"}\n
\n \n
\n );\n };\n\n render () {\n const {\n filters,\n handleTooltipClose,\n isMobile,\n previewSwapping,\n selectedFilters,\n showToolTip,\n sort,\n sorts,\n stickyFilter,\n toggleMobileFilters\n } = this.props;\n const {selectedNonFilterTrend} = this.state;\n const nbOfSelectedFilters = selectedFilters.filter(fil => !(fil.key.indexOf(\"sort\") === 0)).length - (selectedNonFilterTrend ? 1 : 0);\n\n return (\n \n \n Apply\n \n \n Reset\n \n
\n \n {nbOfSelectedFilters}\n
\n }\n \n }\n \n
\n {isMobile &&\n \n \n
\n {this.renderMobileButtons()}\n \n \n Filter\n \n
\n {!isMobile && previewSwapping &&\n \n {!previewSwapping &&\n
\n }\n \n
\n }\n \n {images.slice(0, 2).map((el, index) => {\n const imageClass = index === 0 ? \"product-photo\" : \"ugc-photo\";\n return this.renderSingleImageTag(el, `pd_image grid-item-link ${imageClass}`, `thumbnail_${index}`);\n })}\n
\n );\n\n return (\n \n
\n );\n }\n\n render = () => {\n const {images} = this.props;\n\n if (images.length > 1) {\n return this.renderTinySlider();\n }\n\n return this.renderImageTags();\n }\n}\n","/* eslint-disable complexity, max-lines*/\n/* eslint-disable quotes*/\n\nimport AnalyticsHelper from \"../../../shared/modules/AnalyticsHelper\";\nimport Carousels from \"../../../shared/components/Carousels\";\nimport CartAPI from \"../../../shared/modules/CartAPI\";\nimport EventsAPI from \"../../../shared/modules/EventsAPI\";\nimport InfoContainer from \"../../../shared/containers/InfoContainer\";\nimport {Link} from \"react-router-dom\";\nimport Modal from \"react-bootstrap-modal\";\nimport NonMemberCartAPI from \"../../../shared/modules/NonMemberCartAPI\";\nimport Notification from \"../../../shared/components/Notification\";\nimport ProductDetailButtons from \"../../../shared/components/ProductDetailButtons\";\nimport ProductDetailsModalImageOrCarousel from \"./ProductDetailsModalImageOrCarousel\";\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\nimport SharedPropTypes from \"../../Swap/modules/SharedPropTypes\";\nimport Star from \"../../../shared/components/Star\";\nimport SwapButton from \"../../Swap/components/SwapButton\";\nimport {connect} from \"react-redux\";\nimport {isMobile} from \"../../../lib/userAgent.js\";\nimport {sendStartedSwapEvent} from \"../../../shared/modules/PreviewAndSwapEventsHelper\";\n\nclass ProductDetailsModal extends React.PureComponent {\n\n static propTypes = {\n \"addWishListCallback\": PropTypes.func.isRequired,\n \"customerRequests\": PropTypes.object.isRequired,\n \"eligibleForFineJewelry\": PropTypes.bool.isRequired,\n \"isLoggedOutHomepage\": PropTypes.bool,\n \"isPreviewAndSwapExperiment\": PropTypes.bool,\n \"nonMemberCartEnabled\": PropTypes.bool.isRequired,\n \"onCloseModal\": PropTypes.func.isRequired,\n \"open\": PropTypes.bool.isRequired,\n \"previewSwapping\": PropTypes.bool,\n \"product\": PropTypes.object.isRequired,\n \"productDescriptors\": SharedPropTypes.productDescriptors.isRequired,\n \"removeWishListCallback\": PropTypes.func.isRequired,\n \"showClearancePrice\": PropTypes.bool.isRequired,\n \"startSwapUrl\": PropTypes.string,\n \"swapHandler\": PropTypes.func.isRequired,\n \"updateModalProductDescriptor\": PropTypes.func.isRequired\n };\n\n static defaultProps = {\n \"customerRequests\": {},\n \"eligibleForFineJewelry\": false,\n \"isLoggedOutHomepage\": false,\n \"isPreviewAndSwapExperiment\": false,\n \"previewSwapping\": false,\n \"productDescriptors\": [],\n \"startSwapUrl\": \"\"\n };\n\n constructor (props) {\n super(props);\n this.state = {\n \"itemAvailability\": null,\n \"itemCartNotification\": null,\n \"timerId\": null\n };\n }\n\n componentDidMount () {\n const {\"product\": {\"productDescriptor\": {id}}} = this.props;\n this.setItemAvailability(id);\n this.sendViewedProductEvent();\n const elements = document.querySelectorAll(\".search-field-container\");\n elements.forEach(element => element.classList.add(\"hidden\"));\n }\n\n componentWillUpdate = (nextProps) => {\n const {\"product\": {\"productDescriptor\": {\"id\": newId}}} = nextProps;\n const {\"product\": {\"productDescriptor\": {\"id\": currentId}}} = this.props;\n\n if (currentId !== newId) {\n this.setItemAvailability(newId);\n }\n }\n\n componentWillUnmount = () => {\n const elements = document.querySelectorAll(\".search-field-container\");\n elements.forEach(element => element.classList.remove(\"hidden\"));\n }\n\n sendViewedProductEvent = () => {\n const {product} = this.props;\n const {productDescriptor} = product;\n\n AnalyticsHelper.sendProductViewedEvent(productDescriptor);\n EventsAPI.trackBrowserAbandonment(productDescriptor.id);\n }\n\n inShipment = (currentProductDescriptorId) => {\n const {productDescriptors} = this.props;\n\n if (productDescriptors.length) {\n return productDescriptors.map(pd => pd.id).includes(currentProductDescriptorId);\n }\n\n return false;\n }\n\n displayExperimentButtons = () => {\n const {isPreviewAndSwapExperiment, previewSwapping, startSwapUrl} = this.props;\n return isPreviewAndSwapExperiment && previewSwapping && startSwapUrl;\n }\n\n\n isWishlisted = () => {\n const {\n customerRequests,\n \"product\": {\"productDescriptor\": {id}}\n } = this.props;\n\n return customerRequests[id] && customerRequests[id].statuses.includes(\"pending\");\n }\n\n addToCartRequest = async (productDescriptorId, quantity) => {\n const {fetchItemCart, showClearancePrice} = this.props;\n const storeKind = showClearancePrice ? \"clearance\" : \"retail\";\n\n await CartAPI.addToCart(productDescriptorId, quantity, storeKind, this.handleAddToCartNotification, fetchItemCart);\n this.setState({\"timerId\": this.handleCloseModalAndItemAddedToCartStatus()});\n }\n\n handleAddToCartNotification = (notificationText) => {\n const {timerId} = this.state;\n this.setitemCartNotification(timerId, notificationText);\n };\n\n handleCloseModalAndItemAddedToCartStatus = () => {\n const {onCloseModal} = this.props;\n\n const timerId = setTimeout(() => {\n this.setState({\"itemCartNotification\": null});\n onCloseModal();\n }, 3000);\n return timerId;\n }\n\n setitemCartNotification = (timerId, notificationText) => {\n clearTimeout(timerId);\n this.setState({\"itemCartNotification\": notificationText});\n }\n\n setItemAvailability = (id) => {\n const {showClearancePrice} = this.props;\n const storeKind = showClearancePrice ? \"clearance\" : \"retail\";\n\n NonMemberCartAPI.getItemAvailabilityCount(id, storeKind).then((response) => {\n this.setState({\"itemAvailability\": response});\n });\n };\n\n renderStartSwapButton = () => {\n const {startSwapUrl} = this.props;\n\n return (\n \n this.ts = ts}\n settings={tinySliderSettings}\n >\n {images.slice(0, 3).map((el, index) =>\n this.renderSingleImageTag(el, \"product-photo grid-item-link\", `slider_image_${index}`))}\n \n
\n \n {images.slice(0, 3).map((el, index) => (\n this.sliderMovesTo(event, index)}\n />\n ))}\n
\n \n \n Start Swap\n \n
\n );\n };\n\n renderProductDetailsButtons = () => {\n const {itemAvailability} = this.state;\n const {\n addWishListCallback, eligibleForFineJewelry, previewSwapping, product, removeWishListCallback, showClearancePrice,\n swapHandler, productDescriptors, nonMemberCartEnabled\n } = this.props;\n const wishlisted = this.isWishlisted();\n\n if (previewSwapping && !this.displayExperimentButtons && isMobile()) {\n return null;\n }\n\n return (\n \n {isLoggedOutHomepage &&\n \n View full details\n }\n {!previewSwapping &&\n \n View full details\n }\n
\n );\n }\n\n render () {\n const {itemAvailability, itemCartNotification} = this.state;\n const {\n addWishListCallback,\n eligibleForFineJewelry,\n isPreviewAndSwapExperiment,\n onCloseModal,\n open,\n previewSwapping,\n product,\n productDescriptors,\n removeWishListCallback,\n showClearancePrice,\n swapHandler,\n updateModalProductDescriptor\n } = this.props;\n const {productDescriptor} = product;\n const {\n \"details\": {\n \"base_metal\": baseMetal,\n designer,\n \"full_size_urls\": images,\n \"insider_price_dollars\": insiderPriceDollars,\n \"is_fine\": isFine,\n length,\n \"metal_detail\": metalDetail,\n \"metal_name\": metalName,\n \"name\": pdName,\n \"other_materials_formatted\": otherMaterials,\n wishlistable\n },\n id, sku\n } = productDescriptor;\n const wishlisted = this.isWishlisted();\n\n return (\n <>\n \n
}\n \n {isMobile() &&\n
\n \n {!isMobile() &&\n
\n }\n {this.displayExperimentButtons() && this.renderStartSwapButton()}\n {!this.displayExperimentButtons() &&\n \n \n {baseMetal && (metalName || metalDetail) &&\n
\n \n
\n }\n {length &&\n \n
\n \n Metal:\n
\n {\" \"}\n \n {`${metalDetail ? metalDetail : metalName} over ${baseMetal}`}\n
\n \n
\n }\n {otherMaterials &&\n \n
\n \n Size:\n
\n {\" \"}\n \n {length}\n
\n \n
\n }\n {!previewSwapping && !this.inShipment() && this.renderFullDetailsLinkForDesktop()}\n \n
\n \n Material:\n
\n {\" \"}\n \n {otherMaterials}\n
\n \n {this.renderProductDetailsButtons()}\n {previewSwapping && isMobile() && !this.inShipment(id) &&\n
\n }\n {isMobile() && !isPreviewAndSwapExperiment && this.renderFullDetailsLinkForMobile()}\n \n \n \n Cancel\n \n
\n }\n \n \n \n
\n {expanded &&\n sortList.map(displayName =>\n \n Sort by:\n
\n \n {selectedSortName}\n
\n \n \n Sizes\n
\n \n
\n \n );\n};\n\nAddToCartRings.propTypes = {\n \"allRingSizes\": PropTypes.array.isRequired,\n \"availableRingSizes\": PropTypes.array,\n \"isAvailable\": PropTypes.bool,\n \"isSelected\": PropTypes.bool,\n \"selectedRingSize\": PropTypes.string,\n \"setSelectedRingSize\": PropTypes.func.isRequired,\n \"size\": PropTypes.string\n};\n\nAddToCartRings.defaultProps = {\n \"availableRingSizes\": [],\n \"isAvailable\": false,\n \"isSelected\": false,\n \"selectedRingSize\": null,\n \"size\": null\n};\n\nexport default AddToCartRings;\n","/* eslint-disable max-len, react/jsx-no-bind */\n\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\n\nconst ColorSwatch = ({\n colorName,\n displayName,\n metalColor,\n mouseEnterHandler,\n mouseLeaveHandler,\n onClick,\n selected,\n stoneName,\n swatchId\n}) => {\n const editStoneColorName = name => name.replace(/[ &]+/g, \"_\").toLowerCase();\n\n const handleClick = () => onClick(swatchId);\n\n const handleMouseEnter = () => mouseEnterHandler(swatchId);\n\n const handleMouseLeave = () => mouseLeaveHandler();\n\n const invalidNames = [\n \"other\",\n \"none\"\n ];\n\n const validStoneName = stoneName && !invalidNames.includes(stoneName.toLowerCase());\n\n const validColorName = colorName && !invalidNames.includes(colorName.toLowerCase());\n\n return (\n \n {isAdjustableOnly ? renderAdjustableRingButton() : renderRingSizeButtons()}\n
\n \n { metalColor &&\n
\n \n );\n};\n\nColorSwatch.defaultProps = {\n \"colorName\": null,\n \"displayName\": null,\n \"metalColor\": null,\n \"stoneName\": null,\n \"swatchName\": null\n};\n\nColorSwatch.propTypes = {\n \"colorName\": PropTypes.string,\n \"displayName\": PropTypes.string,\n \"metalColor\": PropTypes.string,\n \"mouseEnterHandler\": PropTypes.func.isRequired,\n \"mouseLeaveHandler\": PropTypes.func.isRequired,\n \"onClick\": PropTypes.func.isRequired,\n \"selected\": PropTypes.bool.isRequired,\n \"stoneName\": PropTypes.string,\n \"swatchId\": PropTypes.number.isRequired\n};\n\nexport default ColorSwatch;\n","/* eslint-disable react/jsx-no-bind, consistent-return */\n\nimport React, {useState} from \"react\";\nimport ColorSwatch from \"./ColorSwatch\";\nimport PropTypes from \"prop-types\";\n\nconst ColorOptions = ({setHoveredSwatchId, setSelectedSwatchId, swatches, selectedSwatchId}) => {\n const [\n displayName,\n setDisplayName\n ] = useState(\"\");\n\n const getDisplayname = (swatchId) => {\n const activeSwatch = swatches.find(swatch => swatch.swatch_id === swatchId);\n\n return activeSwatch ? activeSwatch.swatch_name : null;\n };\n\n const handleMouseEnter = (swatchId) => {\n setDisplayName(getDisplayname(swatchId));\n setHoveredSwatchId(swatchId);\n };\n\n const handleMouseLeave = () => {\n setDisplayName(\"\");\n setHoveredSwatchId(null);\n };\n\n const renderColorOptions = () =>\n swatches.map(swatch =>\n \n {`Colors (${swatches.length})`}\n
\n \n
\n \n );\n};\n\nColorOptions.defaultProps = {\"selectedSwatchId\": null};\n\nColorOptions.propTypes = {\n \"selectedSwatchId\": PropTypes.number,\n \"setHoveredSwatchId\": PropTypes.func.isRequired,\n \"setSelectedSwatchId\": PropTypes.func.isRequired,\n \"swatches\": PropTypes.array.isRequired\n};\n\nexport default ColorOptions;\n","/* eslint-disable arrow-body-style, max-len, no-inline-comments, react/jsx-no-bind, react/no-multi-comp, no-empty-function */\nimport React, {useEffect, useState} from \"react\";\nimport API from \"../../../shared/modules/API\";\nimport AddToCartRings from \"./AddToCartRings\";\nimport CartAPI from \"../../../shared/modules/CartAPI\";\nimport ColorOptions from \"./ColorOptions\";\nimport LoadingSpinner from \"../../BuyItNow/components/LoadingSpinner\";\nimport NonMemberCartAPI from \"../../../shared/modules/NonMemberCartAPI\";\nimport PropTypes from \"prop-types\";\nimport useComponentVisible from \"../../Site/components/useComponentVisible\";\n\nconst AddToCart = ({\n allRingSizes,\n availableRingSizes,\n defaultProductDescriptorId,\n defaultSwatchId,\n defaultRingSize,\n isRing,\n selectedSwatchId,\n selectedRingSize,\n setHoveredSwatchId,\n setNotificationType,\n setSelectedSwatchId,\n setSelectedRingSize,\n showClearancePrice,\n swatches\n}) => {\n const hasManyColorOptions = Boolean(swatches.length > 1);\n const hasManySizeOptions = Boolean(availableRingSizes.length > 1);\n const hasSelections = isRing || hasManyColorOptions;\n\n const [\n isLoading,\n setIsLoading\n ] = useState(false);\n\n const [\n selectedProductDescriptorId,\n setSelectedProductDescriptorId\n ] = useState(null);\n\n const {\n ref,\n \"isComponentVisible\": showSelections,\n \"setIsComponentVisible\": setShowSelections\n } = useComponentVisible(false);\n\n const getButtonTextForRing = () => {\n if (selectedRingSize && selectedSwatchId) return \"Confirm Choice\";\n if (selectedRingSize && hasManyColorOptions) return \"Select Color\";\n if (selectedSwatchId && hasManySizeOptions) return \"Select Size\";\n if (hasManyColorOptions && hasManySizeOptions) return \"Select Color + Size\";\n return \"Add to Cart\";\n };\n\n const getButtonText = () => {\n if (!showSelections) return \"Add to Cart\";\n if (isRing) return getButtonTextForRing();\n if (selectedSwatchId) return \"Confirm Choice\";\n if (hasManyColorOptions) return \"Select Color\";\n return \"Add to Cart\";\n };\n\n const getProductDescriptorId = () => {\n if (!selectedSwatchId) return null;\n\n const matchedSwatch = swatches.find(swatch => swatch.swatch_id === selectedSwatchId);\n\n if (!isRing) return matchedSwatch.available[0].id;\n\n if (!selectedRingSize) return null;\n\n const matchedRingSize = matchedSwatch.available.find(item => item.ring_size === selectedRingSize);\n\n return matchedRingSize ? matchedRingSize.id : null;\n };\n\n const handleOnError = () => {\n setNotificationType(\"itemSoldOut\");\n };\n\n const handleOnSuccess = () => {\n setNotificationType(\"itemAddedToCart\");\n setShowSelections(false);\n };\n\n const handleAddToCart = () => {\n setIsLoading(true);\n\n if (!selectedProductDescriptorId) {\n setIsLoading(false);\n return;\n }\n\n const storeKind = showClearancePrice ? \"clearance\" : \"retail\";\n const quantity = 1;\n\n if (API.CUSTOMER_ID) {\n CartAPI.addToCart(selectedProductDescriptorId, quantity, storeKind, () => {}).then((response) => {\n if (response.error) {\n handleOnError();\n } else {\n handleOnSuccess();\n }\n });\n } else {\n NonMemberCartAPI.addToCart(selectedProductDescriptorId, quantity, storeKind).then((response) => {\n if (response.error) {\n handleOnError();\n } else {\n handleOnSuccess();\n }\n });\n }\n\n setIsLoading(false);\n };\n\n const toggleSelections = () => {\n setShowSelections(prevState => !prevState);\n };\n\n const handleOnClickContainer = (event) => {\n if (event.target === ref.current) {\n setShowSelections(false);\n }\n };\n\n const filterSizesBySelectedColor = () => {\n if (!selectedSwatchId) return availableRingSizes;\n\n const filteredSwatches = swatches.filter(swatch => swatch.swatch_id === selectedSwatchId);\n\n const [filteredSizes] = filteredSwatches.map(swatch => swatch.available.map(item => item.ring_size));\n\n if (selectedRingSize && !filteredSizes.includes(selectedRingSize)) setSelectedRingSize(null);\n\n return filteredSizes;\n };\n\n useEffect(() => {\n setSelectedProductDescriptorId(defaultProductDescriptorId);\n }, []);\n\n useEffect(() => {\n if (!showSelections) {\n setSelectedSwatchId(defaultSwatchId);\n setSelectedRingSize(defaultRingSize);\n setSelectedProductDescriptorId(defaultProductDescriptorId);\n }\n }, [showSelections]);\n\n useEffect(() => {\n setSelectedProductDescriptorId(getProductDescriptorId());\n }, [\n selectedSwatchId,\n selectedRingSize\n ]);\n\n return (\n \n {renderColorOptions()}\n
\n \n {displayName || getDisplayname(selectedSwatchId)}\n
\n \n {(isRing || hasManyColorOptions) &&\n
\n \n \n \n {isLoading &&\n
\n }\n \n \n {isLoading &&\n
\n \n );\n};\n\nAddToCart.propTypes = {\n \"allRingSizes\": PropTypes.array.isRequired,\n \"availableRingSizes\": PropTypes.array,\n \"defaultProductDescriptorId\": PropTypes.number,\n \"defaultRingSize\": PropTypes.string,\n \"defaultSwatchId\": PropTypes.number,\n \"isRing\": PropTypes.bool.isRequired,\n \"selectedRingSize\": PropTypes.string,\n \"selectedSwatchId\": PropTypes.number,\n \"setHoveredSwatchId\": PropTypes.func.isRequired,\n \"setNotificationType\": PropTypes.func.isRequired,\n \"setSelectedRingSize\": PropTypes.func.isRequired,\n \"setSelectedSwatchId\": PropTypes.func.isRequired,\n \"showClearancePrice\": PropTypes.bool.isRequired,\n \"swatches\": PropTypes.array.isRequired\n};\n\nAddToCart.defaultProps = {\n \"availableRingSizes\": [],\n \"defaultProductDescriptorId\": null,\n \"defaultRingSize\": null,\n \"defaultSwatchId\": null,\n \"selectedRingSize\": null,\n \"selectedSwatchId\": null\n};\n\nexport default AddToCart;\n","/* eslint-disable max-lines */\n/* eslint-disable react/jsx-closing-tag-location */\n/* eslint-disable indent */\n/* eslint-disable max-len, complexity */\nimport AddToCart from \"./AddToCart\";\nimport Helper from \"../../../shared/modules/Helper\";\nimport {Link} from \"react-router-dom\";\nimport MemberDiscountHelper from \"../../../shared/modules/MemberDiscountHelper\";\nimport ProductDescriptorViewsAPI from \"../../../shared/modules/ProductDescriptorViewsAPI\";\nimport ProductPanelImageOrCarousel from \"../components/ProductPanelImageOrCarousel\";\nimport ProductRating from \"../../../shared/components/ProductRating\";\nimport PromoPriceVariantHelper from \"../../../shared/modules/PromoPriceVariantHelper\";\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\nimport RingSizeSelection from \"../components/RingSizeSelection\";\nimport SharedPropTypes from \"../../Swap/modules/SharedPropTypes\";\nimport Star from \"../../../shared/components/Star\";\nimport SwapButton from \"../../Swap/components/SwapButton\";\nimport {connect} from \"react-redux\";\nimport {isMobile} from \"../../../lib/userAgent.js\";\nimport {withCookies} from \"react-cookie\";\n\nclass ProductPanel extends React.Component {\n\n static propTypes = {\n \"addToCartFromGrid\": PropTypes.bool,\n \"addWishListRequest\": PropTypes.func.isRequired,\n \"allRingSizes\": PropTypes.array.isRequired,\n \"cookies\": PropTypes.object.isRequired,\n \"customerId\": PropTypes.string,\n \"customerRequests\": PropTypes.object.isRequired,\n \"eligibleForFineJewelry\": PropTypes.bool.isRequired,\n \"handleShowSwapModal\": PropTypes.func,\n \"isLoggedOutHomepage\": PropTypes.bool.isRequired,\n \"onSelectSwap\": PropTypes.func,\n \"pdPrices\": PropTypes.object,\n \"previewSwapping\": PropTypes.bool,\n \"productDescriptor\": PropTypes.object.isRequired,\n \"productDescriptors\": SharedPropTypes.productDescriptors,\n \"productPanelClass\": PropTypes.string,\n \"removeWishListRequest\": PropTypes.func.isRequired,\n \"ringSizes\": PropTypes.array,\n \"setNotificationType\": PropTypes.func.isRequired,\n \"showClearancePrice\": PropTypes.bool.isRequired,\n \"showComingSoon\": PropTypes.bool.isRequired,\n \"showModal\": PropTypes.func.isRequired,\n \"showProductName\": PropTypes.bool.isRequired,\n \"showRetailPrice\": PropTypes.bool.isRequired,\n \"showTags\": PropTypes.bool.isRequired,\n \"showWishlistStars\": PropTypes.bool.isRequired,\n \"useModal\": PropTypes.bool.isRequired,\n \"wishlisted\": PropTypes.bool.isRequired\n };\n\n static defaultProps = {\n \"addToCartFromGrid\": false,\n \"customerId\": \"\",\n \"customerRequests\": {},\n \"eligibleForFineJewelry\": false,\n \"handleShowSwapModal\": null,\n \"isLoggedOutHomepage\": false,\n \"onSelectSwap\": null,\n \"pdPrices\": {},\n \"previewSwapping\": false,\n \"productDescriptors\": null,\n \"productPanelClass\": \"\",\n \"ringSizes\": []\n };\n\n static queryParamBuilder = (currentQuery, newQuery) => {\n if (!newQuery || newQuery.length === 0) return currentQuery;\n\n return (/^\\?/).test(currentQuery) ? `${currentQuery}&${newQuery}` : `?${newQuery}`;\n }\n\n constructor (props) {\n super(props);\n this.defaultImageUrl = \"/assets/roxy/veto_swap/fallback-image\";\n\n const {addToCartFromGrid, productDescriptor, showClearancePrice} = this.props;\n const {\"details\": {\"kind_name\": kindName, swatches}} = productDescriptor;\n\n this.state = {\n \"availableSwatches\": swatches.filter(swatch => swatch.available.filter(item => (showClearancePrice ? item.available_clearance_count : item.available_retail_count) > 0)),\n \"enableAddToCart\": addToCartFromGrid && (Helper.inExperimentVariant(\"add_to_cart_from_grid_var_a\") || Helper.inExperimentVariant(\"add_to_cart_from_grid_var_b\")),\n \"hoveredSwatchId\": null,\n \"isRing\": kindName === \"Ring\",\n \"omitQuickView\": addToCartFromGrid && Helper.inExperimentVariant(\"add_to_cart_from_grid_var_b\"),\n \"selectedRingSize\": null,\n \"selectedSwatchId\": null,\n \"showQuickViewButton\": false,\n \"showingRingSelection\": false\n };\n }\n\n setHoveredSwatchId = (swatchId) => {\n this.setState({\"hoveredSwatchId\": swatchId});\n }\n\n setNotificationType = (value) => {\n const {setNotificationType} = this.props;\n setNotificationType(value);\n }\n\n setSelectedRingSize = (size) => {\n this.setState({\"selectedRingSize\": size});\n }\n\n setSelectedSwatchId = (swatchId) => {\n this.setState({\"selectedSwatchId\": swatchId});\n }\n\n checkTag = (tag) => {\n if (tag === \"Demi-Fine\") return \"demifine\";\n if (tag === \"Fine Jewelry\") return \"fine\";\n return \"\";\n }\n\n isSwapped = () => {\n const {productDescriptor, productDescriptors} = this.props;\n for (const key in productDescriptors) {\n if (productDescriptors[key].id === productDescriptor.id) return true;\n }\n return false;\n }\n\n updateWishListRequests = (state) => {\n const {addWishListRequest, \"productDescriptor\": {originalId}, removeWishListRequest} = this.props;\n Object.values(state).forEach((value) => {\n const {id, wishlisted} = value;\n if (wishlisted) {\n addWishListRequest(id, id !== originalId);\n } else {\n removeWishListRequest(id, id !== originalId);\n }\n });\n };\n\n handleClick = (event) => {\n const {previewSwapping} = this.props;\n\n if (previewSwapping) {\n this.showModal(event);\n }\n }\n\n handleHideRingSizeWishList = () => this.setState({\"showingRingSelection\": false});\n\n handleShowRingSizeWishList = () => this.setState({\"showingRingSelection\": true});\n\n handleHideQuickViewButton = () => {\n if (isMobile()) return;\n this.setState({\"showQuickViewButton\": false});\n }\n\n handleShowQuickViewButton = () => {\n if (isMobile()) return;\n this.setState({\"showQuickViewButton\": true});\n }\n\n sendQuickViewEvent = () => {\n const {\"productDescriptor\": {id}} = this.props;\n\n ProductDescriptorViewsAPI.createProductDescriptorView(id, \"quick_view\");\n }\n\n showModal = (event) => {\n const {\"productDescriptor\": {id}, showModal} = this.props;\n event.preventDefault();\n this.sendQuickViewEvent();\n showModal(id);\n };\n\n displayWishlistStar = (kindName, wishlisted) => {\n const {ringSizes} = this.props;\n if (kindName === \"Ring\") {\n return ringSizes.filter(ring => ring.wishlisted).length > 0;\n }\n return wishlisted;\n }\n\n shouldDisplaySlider = () => {\n const {productDescriptor} = this.props;\n const {\"details\": {\"thumbnail_urls\": thumbnailImages}} = productDescriptor;\n\n return thumbnailImages.length > 1 && isMobile();\n }\n\n getClearancePrice = () => {\n const {\n customerId,\n pdPrices,\n productDescriptor\n } = this.props;\n const {\n \"details\": {\"clearance_price\": noCustomerClearancePrice},\n id\n } = productDescriptor;\n\n const isCustomerPresent = customerId && customerId.length;\n const isClearancePriceAvailable = pdPrices[id] && pdPrices[id].clearance_price;\n\n if (isCustomerPresent && isClearancePriceAvailable) {\n return pdPrices[id].clearance_price;\n }\n\n return noCustomerClearancePrice;\n }\n\n getPromoPriceInfo = () => {\n const {cookies, \"productDescriptor\": {\"promo_price_info\": promoPriceInfo}} = this.props;\n const autoAppliedPromoCode = cookies.get(\"auto_applied_promo_code\");\n\n return promoPriceInfo && autoAppliedPromoCode && promoPriceInfo[autoAppliedPromoCode];\n }\n\n getPrice = () => {\n const {customerId} = this.props;\n const {\"productDescriptor\": {\"details\": {\"retail_price\": retailPrice}}} = this.props;\n\n if (customerId) {\n return this.getMemberPrice();\n }\n return retailPrice;\n }\n\n getMemberPrice = () => {\n const {pdPrices, productDescriptor} = this.props;\n\n const {\n id,\n \"details\": {\n \"insider_price_dollars\": insiderPriceDollars,\n \"insider_price_dollars_varB\": insiderPriceDollarsVarB,\n \"insider_price_dollars_varC\": insiderPriceDollarsVarC\n }\n } = productDescriptor;\n\n const insiderPriceMap = new Map([\n [\n \"member_discount_var_b\",\n insiderPriceDollarsVarB\n ],\n [\n \"member_discount_var_c\",\n insiderPriceDollarsVarC\n ]\n ]);\n\n if (pdPrices[id]) {\n return pdPrices[id].member_price;\n } else if (MemberDiscountHelper.shouldSeeMemberDiscountVariant()) {\n const memberVariant = MemberDiscountHelper.getMemberDiscountVariant();\n\n if (!memberVariant) return \"\";\n return insiderPriceMap.get(memberVariant);\n }\n return insiderPriceDollars;\n }\n\n renderClearancePrice = () => {\n const {\n cookies,\n \"productDescriptor\": {\"details\": {\"retail_price\": retailPrice}}\n } = this.props;\n const {\"clearance_price\": promoClearancePrice, \"discount_text\": discountText} = this.getPromoPriceInfo() || {};\n const experimentVariant = cookies.get(\"item_level_promo_experiment_variant\");\n\n if (promoClearancePrice && PromoPriceVariantHelper.shouldSeePromoPrice(experimentVariant)) {\n return PromoPriceVariantHelper.renderPromoPriceOnGrid(retailPrice, promoClearancePrice);\n }\n\n if (promoClearancePrice && discountText && PromoPriceVariantHelper.shouldSeePromoPriceAndDiscount(experimentVariant)) {\n return PromoPriceVariantHelper.renderPromoPriceAndDiscountOnGrid(retailPrice, promoClearancePrice, discountText);\n }\n\n return (\n \n \n {`$${Helper.formatPriceCents(retailPrice)}`}\n \n {\" \"}\n \n {this.getClearancePrice()}\n \n
\n );\n }\n\n renderRetailPrice = () => {\n const {customerId, cookies} = this.props;\n const {price, \"discount_text\": discountText} = this.getPromoPriceInfo() || {};\n const experimentVariant = cookies.get(\"item_level_promo_experiment_variant\");\n\n if (price && PromoPriceVariantHelper.shouldSeePromoPrice(experimentVariant)) {\n return PromoPriceVariantHelper.renderPromoPriceOnGrid(this.getPrice(), price);\n }\n\n if (price && discountText && PromoPriceVariantHelper.shouldSeePromoPriceAndDiscount(experimentVariant)) {\n return PromoPriceVariantHelper.renderPromoPriceAndDiscountOnGrid(this.getPrice(), price, discountText);\n }\n\n return (\n \n {customerId ? \"member \" : \"\"}\n {this.getPrice()}\n
\n );\n }\n\n renderInnerContents = () => {\n const {\n previewSwapping,\n productDescriptor,\n showComingSoon,\n showClearancePrice,\n showProductName,\n showRetailPrice\n } = this.props;\n const {\n \"details\": {\n designer,\n \"first_date_received\": firstDateReceived,\n \"group_name\": groupName\n }\n } = productDescriptor;\n\n return (\n \n
\n );\n }\n\n getUrl = (url) => {\n const urlObj = new URL(url);\n urlObj.search = \"\";\n\n return urlObj.toString();\n }\n\n getAllRingSizes = (availableRingSizes) => {\n const {allRingSizes} = this.props;\n const sizes = [\n ...new Set([\n ...allRingSizes,\n ...availableRingSizes\n ])\n ];\n\n return sizes.sort((valueA, valueB) => valueA - valueB);\n }\n\n renderPreviewImage = (previewSwatchId) => {\n const {availableSwatches} = this.state;\n const swatchId = availableSwatches.find(swatch => swatch.swatch_id === previewSwatchId);\n const swatchImage = swatchId && swatchId.available.length ? swatchId.available[0].image : null;\n\n return (\n \n {designer}\n
\n {showProductName &&\n \n {groupName}\n
}\n\n {showClearancePrice && this.renderClearancePrice()}\n\n {showRetailPrice && this.renderRetailPrice()}\n\n {productDescriptor.details.ring_size && previewSwapping &&\n \n Size: \n {productDescriptor.details.ring_size}\n
\n }\n {showComingSoon && firstDateReceived === null &&\n \n Coming Soon!\n
}\n \n 
\n
\n );\n }\n\n render () {\n const {\n addWishListRequest,\n customerId,\n eligibleForFineJewelry,\n handleShowSwapModal,\n isLoggedOutHomepage,\n previewSwapping,\n productDescriptor,\n productDescriptors,\n productPanelClass,\n removeWishListRequest,\n ringSizes,\n showClearancePrice,\n showTags,\n showWishlistStars,\n useModal,\n wishlisted\n } = this.props;\n const {\n availableSwatches,\n enableAddToCart,\n hoveredSwatchId,\n isRing,\n omitQuickView,\n selectedSwatchId,\n selectedRingSize,\n showQuickViewButton,\n showingRingSelection\n } = this.state;\n const {\n \"details\": {\n \"is_fine\": isFine,\n \"kind_name\": kindName,\n \"insider_price_dollars\": insiderPriceDollars,\n name,\n \"ratings\": {\n average,\n count\n } = {},\n tag,\n url,\n wishlistable\n },\n id, sku\n } = productDescriptor;\n const availableRingSizes = ringSizes.map(ring => ring.ring_size);\n const defaultRingSize = availableRingSizes.length === 1 ? availableRingSizes[0] : null;\n const defaultSwatchId = availableSwatches ? availableSwatches.find(swatch => swatch.available.find(item => item.id === id))?.swatch_id : null;\n const defaultProductDescriptorId = (!isRing && defaultSwatchId) || (isRing && defaultRingSize && defaultSwatchId) ? id : null;\n const previewSwatchId = hoveredSwatchId || selectedSwatchId;\n return (\n \n
}\n {!showingRingSelection &&\n \n \n {this.renderInnerContents()}\n }\n\n {!isLoggedOutHomepage &&\n \n {this.renderInnerContents()}\n }\n\n {!isLoggedOutHomepage &&\n
}\n \n );\n }\n}\n\nconst mapStoreToProps = store =>\n ({\n \"customerRequests\": store.customerRequests,\n \"isLoggedOutHomepage\": store.isLoggedOutHomepage,\n \"pdPrices\": store.pdPrices\n });\n\nexport default withCookies(connect(mapStoreToProps)(ProductPanel));\n","import API from \"../../../shared/modules/API\";\nimport {Link} from \"react-router-dom\";\nimport ProductPanel from \"./ProductPanel\";\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\nimport SharedPropTypes from \"../../Swap/modules/SharedPropTypes\";\nimport {connect} from \"react-redux\";\n\nclass WishlistGrid extends React.Component {\n static propTypes = {\n \"addWishListRequest\": PropTypes.func.isRequired,\n \"allRingSizes\": PropTypes.array.isRequired,\n \"customerRequests\": PropTypes.object.isRequired,\n \"eligibleForFineJewelry\": PropTypes.bool.isRequired,\n \"filtering\": PropTypes.bool,\n \"handleShowSwapModal\": PropTypes.func,\n \"lazyLoadingNow\": PropTypes.bool,\n \"onSelectSwap\": PropTypes.func,\n \"previewSwapping\": PropTypes.bool,\n \"productDescriptors\": SharedPropTypes.productDescriptors,\n \"productOrdering\": PropTypes.array.isRequired,\n \"productPanelClass\": PropTypes.string,\n \"products\": PropTypes.object.isRequired,\n \"removeWishListRequest\": PropTypes.func.isRequired,\n \"requestsFetched\": PropTypes.bool,\n \"setNotificationType\": PropTypes.func.isRequired,\n \"showClearancePrice\": PropTypes.bool,\n \"showComingSoon\": PropTypes.bool,\n \"showModal\": PropTypes.func,\n \"showProductName\": PropTypes.bool,\n \"showRetailPrice\": PropTypes.bool,\n \"showTags\": PropTypes.bool,\n \"showWishlistStars\": PropTypes.bool,\n \"updateState\": PropTypes.func.isRequired,\n \"useModal\": PropTypes.bool\n };\n\n static defaultProps = {\n \"customerRequests\": {},\n \"eligibleForFineJewelry\": false,\n \"filtering\": false,\n \"handleShowSwapModal\": null,\n \"lazyLoadingNow\": false,\n \"onSelectSwap\": null,\n \"previewSwapping\": false,\n \"productDescriptors\": null,\n \"productPanelClass\": \"\",\n \"requestsFetched\": false,\n \"showClearancePrice\": false,\n \"showComingSoon\": false,\n \"showModal\": null,\n \"showProductName\": false,\n \"showRetailPrice\": false,\n \"showTags\": false,\n \"showWishlistStars\": false,\n \"useModal\": false\n };\n\n componentDidMount = () => {\n const {previewSwapping} = this.props;\n if (previewSwapping) {\n this.sortProductsByWishlist();\n }\n }\n\n getRingSizes = (id) => {\n const {\"products\": {[id]: product}, customerRequests, requestsFetched} = this.props;\n const {productDescriptor} = product;\n const {\n \"details\":\n {\n \"kind_name\": kindName,\n \"natural_stone_color_groups\": naturalStoneColorGroups,\n \"metal_name\": metalName,\n \"product_name\": productName\n }\n } = productDescriptor;\n const isAnArray = Array.isArray(naturalStoneColorGroups[metalName]);\n const isObject = typeof naturalStoneColorGroups === \"object\";\n const isRing = kindName === \"Ring\";\n\n if (isRing && isObject && isAnArray && requestsFetched) {\n return naturalStoneColorGroups[metalName].\n filter(innerProduct => innerProduct.product_name === productName).\n sort((firstProduct, secondProduct) => firstProduct.ring_size - secondProduct.ring_size).\n map(innerProduct => ({\n ...innerProduct,\n \"wishlisted\": customerRequests[innerProduct.id] &&\n customerRequests[innerProduct.id].statuses.includes(\"pending\")\n }));\n }\n return [];\n }\n\n sortProductsByWishlist = () => {\n const {\n customerRequests,\n productOrdering,\n requestsFetched\n } = this.props;\n\n return productOrdering.map((id) => {\n const wishlisted = requestsFetched && customerRequests[id] && customerRequests[id].statuses.includes(\"pending\");\n return (\n {\n id,\n wishlisted\n }\n );\n }).sort((prev, next) => next.wishlisted - prev.wishlisted).map(item => item.id);\n }\n\n renderWishlist = () => {\n const {\n eligibleForFineJewelry,\n previewSwapping,\n productOrdering,\n productPanelClass,\n showClearancePrice,\n showComingSoon,\n showProductName,\n showRetailPrice,\n showTags,\n showWishlistStars,\n useModal\n } = this.props;\n\n if (productOrdering.length === 0) {\n return (\n \n {previewSwatchId && previewSwatchId !== defaultSwatchId &&\n this.renderPreviewImage(previewSwatchId)}\n {showTags && tag &&\n \n + Quick View\n }\n
\n\n {isLoggedOutHomepage &&\n \n {tag}\n
}\n {showWishlistStars && wishlistable && (!isFine || eligibleForFineJewelry) &&\n \n
\n {isMobile() && !isLoggedOutHomepage && !omitQuickView &&\n \n \n
\n );\n }\n\n const {addToCartFromGrid} = document.documentElement.dataset;\n\n return productOrdering.map((id, index) => {\n const {\n addWishListRequest,\n allRingSizes,\n customerRequests,\n handleShowSwapModal,\n onSelectSwap,\n productDescriptors,\n \"products\": {[id]: product},\n removeWishListRequest,\n requestsFetched,\n setNotificationType\n } = this.props;\n const wishlisted = requestsFetched && customerRequests[id] && customerRequests[id].statuses.includes(\"pending\");\n\n return (\n \n No matching styles.\n
\n\n Oops, it looks like we couldn't find any pieces that match your search.\n
\n \n
\n );\n }\n}\n\nconst mapStoreToProps = store => ({\"customerRequests\": store.customerRequests});\n\nexport default connect(mapStoreToProps)(WishlistGrid);\n","/* eslint-disable one-var */\n\nexport const requestsNeededTotal = 30;\n// 20 minutes in ms\nexport const wishlistCacheLifespan = 1200000;\n","import \"jquery-zoom\";\nimport OwlCarousel from \"react-owl-carousel\";\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\n\nexport default class Carousels extends React.PureComponent {\n\n static propTypes = {\n \"designerName\": PropTypes.string.isRequired,\n \"images\": PropTypes.array.isRequired,\n \"name\": PropTypes.array.isRequired\n };\n\n constructor (props) {\n super(props);\n\n this.carousel = React.createRef();\n this.isMobileScreen = document.body.clientWidth < 767;\n }\n\n componentDidMount () {\n this.configure();\n }\n\n componentDidUpdate (prevProps) {\n const {images} = this.props;\n if (prevProps.images !== images) {\n this.configure();\n }\n }\n\n configure = () => {\n if (this.carousel.current) {\n this.carousel.current.to(0, 0);\n $(\".zoomBox\").zoom();\n }\n };\n\n handleSideImageClick = (event) => {\n if (this.carousel.current) {\n this.carousel.current.to($(event.target).data(\"item\"), 500);\n }\n };\n\n render () {\n let itemNum = 0;\n const {designerName, images, name} = this.props;\n\n return (\n \n {!filtering &&\n
\n\n \n {this.renderWishlist()}\n
}\n {lazyLoadingNow &&\n \n \n Return To My Set\n \n
}\n \n {!this.isMobileScreen &&\n \n {images.map(image =>\n \n
)}\n \n \n );\n }\n}\n","/* eslint-disable array-element-newline, max-len */\n/* eslint-disable react/jsx-no-bind */\nimport React, {useEffect, useRef, useState} from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst Notification = ({\n modalClassAddition,\n modalHideSpeed,\n notificationDisplayIconClass,\n notificationDisplayText,\n notificationDisplayType,\n setNotificationDisplayText,\n setNotificationDisplayType\n}) => {\n const [showNotification, setShowNotification] = useState(true);\n const notificationRef = useRef(null);\n const timeoutRef = useRef(null);\n const statusDependentNotification = [\"Sit back and relax\", \"Your set will ship in\"];\n\n const isStatusDependentNotification = () => statusDependentNotification.some(\n phrase => notificationDisplayText.includes(phrase)\n );\n\n useEffect(() => {\n const timer = setTimeout(() => {\n setShowNotification(false);\n }, modalHideSpeed);\n\n return () => clearTimeout(timer);\n }, [modalHideSpeed]);\n\n\n useEffect(() => {\n if (isStatusDependentNotification) {\n const hasNotificationBeenShown = localStorage.getItem(\"notificationShown\");\n if (!hasNotificationBeenShown) {\n localStorage.setItem(\"notificationShown\", \"true\");\n } else if (setNotificationDisplayText) {\n setNotificationDisplayText(\"\");\n }\n }\n if (!showNotification && notificationDisplayType) {\n setNotificationDisplayType(\"\");\n }\n }, [notificationDisplayText, showNotification]);\n\n useEffect(() => {\n setShowNotification(Boolean(notificationDisplayType));\n\n if (notificationDisplayType) {\n timeoutRef.current = setTimeout(() => {\n setNotificationDisplayType(\"\");\n }, modalHideSpeed);\n } else {\n clearTimeout(timeoutRef.current);\n }\n }, [notificationDisplayType]);\n\n const handleCloseNotification = () => {\n setShowNotification(false);\n };\n\n const handleClickOutside = (event) => {\n if (notificationRef.current && !notificationRef.current.contains(event.target)) {\n setShowNotification(false);\n }\n };\n\n const handleClickViewCart = () => {\n setShowNotification(false);\n document.querySelector(\".cart-icon-button\").click();\n };\n\n useEffect(() => {\n document.addEventListener(\"click\", handleClickOutside);\n return () => {\n document.removeEventListener(\"click\", handleClickOutside);\n };\n }, []);\n\n return (\n \n {images.map(image => (\n
}\n \n {notificationDisplayText && !notificationDisplayType &&\n \n \n \n {notificationDisplayText}\n \n
}\n\n {notificationDisplayType === \"itemAddedToCart\" &&\n \n \n
\n }\n\n {notificationDisplayType === \"itemSoldOut\" &&\n \n Added to cart.\n {\" \"}\n \n Ready to checkout?\n \n
\n \n \n
\n }\n \n );\n};\n\nNotification.defaultProps = {\n \"modalClassAddition\": \"\",\n \"modalHideSpeed\": 6000,\n \"notificationDisplayIconClass\": \"\",\n \"notificationDisplayText\": \"\",\n \"notificationDisplayType\": \"\",\n \"setNotificationDisplayText\": null,\n \"setNotificationDisplayType\": null\n};\n\nNotification.propTypes = {\n \"modalClassAddition\": PropTypes.string,\n \"modalHideSpeed\": PropTypes.number,\n \"notificationDisplayIconClass\": PropTypes.string,\n \"notificationDisplayText\": PropTypes.string,\n \"notificationDisplayType\": PropTypes.oneOf([\"\", \"itemAddedToCart\", \"itemSoldOut\"]),\n \"setNotificationDisplayText\": PropTypes.func,\n \"setNotificationDisplayType\": PropTypes.func\n};\n\nexport default Notification;\n","/* eslint-disable init-declarations, react/jsx-no-bind */\n\nimport React, {useEffect, useState} from \"react\";\nimport Modal from \"react-bootstrap-modal\";\nimport PropTypes from \"prop-types\";\nimport {connect} from \"react-redux\";\n\nconst NotificationModal = (props) => {\n const {displayNewTierNotification} = props;\n\n const [\n newTierName,\n setNewTierName\n ] = useState(displayNewTierNotification);\n\n let imgSrc;\n\n useEffect(() => {\n setNewTierName(displayNewTierNotification);\n }, [displayNewTierNotification]);\n\n const handleHideModal = () => {\n setNewTierName(false);\n };\n\n if (newTierName) {\n const imageUrlPrefix = \"https://karat-herokuapp-com.freetls.fastly.net/s3media\";\n const tierName = newTierName.toLowerCase().replace(\" \", \"\");\n imgSrc = `${imageUrlPrefix}/site/newbrand-banner/rewards/modals/rewards-modal-${tierName}.gif`;\n }\n\n return (\n \n Oh no! Not enough left in our inventory...\n
\n \n \n {stylingDescription &&\n -1\n ? \"mr64\"\n : \"\"} product-details`}\n >\n
\n {kindName === \"Earrings\" && weightClass &&\n \n
\n \n Details\n
\n\n {stylingDescription}\n
}\n \n
\n {kindName !== \"Ring\" && length &&\n \n Metal:\n
\n\n {this.getMetalInfo(baseMetal, metalDetail, metalName)}\n
\n\n
}\n {otherMaterials &&\n \n Size:\n
\n\n {length}\n
\n\n
}\n \n Material:\n
\n\n {this.otherMaterialsDisplay(otherMaterials)}\n
\n\n
}\n {kindName === \"Necklace\" && lengthClass &&\n \n Weight:\n
\n\n Light\n
\n\n Heavy\n
\n\n
}\n \n {otherMaterials && otherMaterials.indexOf(\"natural_stone\") > -1 &&\n
\n \n \n {ProductsHelper.icons[designerName] &&\n \n **Exact color patterns may vary slightly from the image shown due\n to the one-of-a-kind nature of the medium.\n
}\n {isFine &&\n \n **This item is electroplated with rhodium or finished with an e-coating.\n These finishes may wear off with frequent use.\n
}\n \n \n
\n }\n \n \n
\n \n About the Designer\n
\n\n 
\n
\n \n \n {designerBio}\n
\n {this.displayDesignerFilterLink(designerName, getsDesignerFilter)}\n\n {ProductsHelper.icons[designerName].map(icon =>\n
\n \n
)}\n \n {ProductsHelper.iconText(icon)}\n
\n\n
\n);\n\nRatingsBreakdownDetail.propTypes = {\n \"starRating\": PropTypes.number.isRequired,\n \"starRatingCount\": PropTypes.number.isRequired,\n \"totalCount\": PropTypes.number.isRequired\n};\n\nexport default RatingsBreakdownDetail;\n","import ProductRatingStars from \"../../../shared/components/ProductRatingStars\";\nimport PropTypes from \"prop-types\";\nimport RatingsBreakdownDetail from \"./RatingsBreakdownDetail\";\nimport React from \"react\";\n\nconst RatingsOverview = (props) => {\n const {\n averageRatingGeneral,\n averageRatingPrice,\n averageRatingQuality,\n averageRatingStyle,\n count,\n oneStar,\n twoStars,\n threeStars,\n fourStars,\n fiveStars\n } = props;\n\n if (count <= 0) {\n return null;\n }\n\n return (\n \n
\n \n
\n \n
\n );\n};\n\nRatingsOverview.propTypes = {\n \"averageRatingGeneral\": PropTypes.number.isRequired,\n \"averageRatingPrice\": PropTypes.number.isRequired,\n \"averageRatingQuality\": PropTypes.number.isRequired,\n \"averageRatingStyle\": PropTypes.number.isRequired,\n \"count\": PropTypes.number.isRequired,\n /* eslint-disable react/sort-prop-types, sort-keys */\n \"oneStar\": PropTypes.number.isRequired,\n \"twoStars\": PropTypes.number.isRequired,\n \"threeStars\": PropTypes.number.isRequired,\n \"fourStars\": PropTypes.number.isRequired,\n \"fiveStars\": PropTypes.number.isRequired\n /* eslint-enable react/sort-prop-types, sort-keys */\n};\n\nexport default RatingsOverview;\n","const getRangeSize = (currentPageInput, totalPages, rangeSize) => {\n if (totalPages <= rangeSize) {\n return totalPages;\n }\n\n if (currentPageInput <= rangeSize || totalPages - currentPageInput < rangeSize) {\n // The 2 accounts for the ellipsis components in the paginator\n return rangeSize + 2;\n }\n\n return rangeSize;\n};\n\nexport const buildRange = (currentPageInput, totalPages) => {\n const currentPage = currentPageInput;\n const rangeSize = getRangeSize(currentPageInput, totalPages, 4);\n const pages = [];\n const rangeWithDots = [];\n\n let start = 1;\n let previousPage = null;\n\n if (currentPage < (rangeSize / 2) + 1) {\n start = 1;\n } else if (currentPage >= (totalPages - (rangeSize / 2))) {\n start = Math.floor(totalPages - rangeSize + 1);\n } else {\n start = currentPage - Math.floor(rangeSize / 2);\n }\n\n for (let index = start; index <= ((start + rangeSize) - 1); index++) {\n pages.push(index);\n }\n\n if (!pages.includes(1)) {\n pages.unshift(1);\n }\n\n if (!pages.includes(totalPages)) {\n pages.push(totalPages);\n }\n\n for (const page of pages) {\n if (previousPage) {\n if (page - previousPage === 2) {\n rangeWithDots.push(previousPage + 1);\n } else if (page - previousPage !== 1) {\n rangeWithDots.push(\"...\");\n }\n }\n rangeWithDots.push(page);\n previousPage = page;\n }\n\n return rangeWithDots;\n};\n","import ProductRatingStars from \"../../../shared/components/ProductRatingStars\";\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\n\nconst Review = ({review}) => {\n const {\n date,\n name,\n rating,\n \"review\": memberReview,\n \"rewards_tier\": rewardsTier\n } = review;\n\n return (\n \n \n Overall\n \n
\n \n
\n \n
\n \n \n Style\n \n
\n \n \n Quality\n \n
\n \n \n Price\n \n
\n \n
\n );\n};\n\nReview.propTypes = {\n \"review\": PropTypes.shape({\n \"date\": PropTypes.string.isRequired,\n \"name\": PropTypes.string.isRequired,\n \"rating\": PropTypes.number.isRequired,\n \"review\": PropTypes.string.isRequired,\n \"rewards_tier\": PropTypes.string.isRequired\n }).isRequired\n};\n\nexport default Review;\n","/* eslint-disable react/no-multi-comp, sort-imports */\n\nimport React, {useEffect, useState} from \"react\";\nimport {Pagination} from \"react-bootstrap\";\nimport {buildRange} from \"../../../shared/modules/PaginationHelper\";\nimport Helper from \"../../../shared/modules/Helper\";\nimport ProductDescriptorsAPI from \"../modules/ProductDescriptorsAPI\";\nimport PropTypes from \"prop-types\";\nimport Review from \"./Review\";\n\nconst Reviews = ({productDescriptorId}) => {\n const [\n reviews,\n setReviews\n ] = useState([]);\n\n const [\n currentPage,\n setCurrentPage\n ] = useState(1);\n\n const [\n totalPages,\n setTotalPages\n ] = useState(0);\n\n const [\n pageRange,\n setPageRange\n ] = useState([]);\n\n const fetchReviews = (pageNumber) => {\n ProductDescriptorsAPI.fetchReviews(productDescriptorId, pageNumber).\n then((response) => {\n const {\n \"data\": {\n page,\n pages,\n \"reviews\": paginatedReviews\n }\n } = response;\n setReviews(paginatedReviews);\n setCurrentPage(page);\n setTotalPages(pages);\n setPageRange(buildRange(pageNumber, pages));\n });\n };\n\n const prevPage = () => {\n if (currentPage > 1) {\n fetchReviews(currentPage - 1);\n }\n };\n\n const nextPage = () => {\n if (currentPage < totalPages) {\n fetchReviews(currentPage + 1);\n }\n };\n\n const buildPaginationItems = () =>\n pageRange.map((page) => {\n if (page === \"...\") {\n return \n
\n \n \n {name}\n \n \n {date}\n \n
\n \n \n {rewardsTier}\n \n
\n \n
\n \n \n {memberReview}\n \n
\n \n \n {date}\n \n
\n \n
\n );\n};\n\nReviews.propTypes = {\"productDescriptorId\": PropTypes.number.isRequired};\n\nexport default Reviews;\n","import React, {useEffect, useState} from \"react\";\nimport {Collapse} from \"react-bootstrap\";\nimport ProductDescriptorsAPI from \"../modules/ProductDescriptorsAPI\";\nimport PropTypes from \"prop-types\";\nimport RatingsOverview from \"./RatingsOverview\";\nimport Reviews from \"./Reviews\";\n\nconst RatingsAndReviews = (props) => {\n const {\n location = {\"hash\": null},\n productDescriptorId,\n \"ratings\": {\n \"average\": averageRatingGeneral,\n count\n } = {\n \"average\": 0,\n \"count\": 0\n }\n } = props;\n\n const [\n open,\n setOpen\n ] = useState(false);\n\n const [\n ratingByType,\n setRatingByType\n ] = useState({\n \"averageRatingPrice\": 0,\n \"averageRatingQuality\": 0,\n \"averageRatingStyle\": 0\n });\n\n const [\n ratingByScore,\n setRatingByScore\n ] = useState({\n /* eslint-disable sort-keys */\n \"oneStar\": 0,\n \"twoStars\": 0,\n \"threeStars\": 0,\n \"fourStars\": 0,\n \"fiveStars\": 0\n /* eslint-enable sort-keys */\n });\n\n const fetchRatingsAndReviews = () => {\n ProductDescriptorsAPI.fetchRatings(productDescriptorId).\n then((response) => {\n const {\n \"data\": {\n \"ratings\": {\n \"average_rating_by_type\": {\n \"price\": averageRatingPrice = 0,\n \"quality\": averageRatingQuality = 0,\n \"style\": averageRatingStyle = 0\n } = {},\n \"feedback_general_by_score\": {\n \"one\": oneStar = 0,\n \"two\": twoStars = 0,\n \"three\": threeStars = 0,\n \"four\": fourStars = 0,\n \"five\": fiveStars = 0\n } = {}\n }\n }\n } = response;\n setRatingByScore({\n /* eslint-disable sort-keys */\n oneStar,\n twoStars,\n threeStars,\n fourStars,\n fiveStars\n /* eslint-enable sort-keys */\n });\n setRatingByType({\n averageRatingPrice,\n averageRatingQuality,\n averageRatingStyle\n });\n });\n };\n\n const {\n oneStar,\n twoStars,\n threeStars,\n fourStars,\n fiveStars\n } = ratingByScore;\n\n const {\n averageRatingPrice,\n averageRatingQuality,\n averageRatingStyle\n } = ratingByType;\n\n const toggleRatingsAndReviewsDisplay = () => {\n setOpen(!open);\n };\n\n const scrollToRatingsAndReviews = () => {\n const target = location.hash || null;\n const element = document.querySelector(target);\n\n if (element) {\n setOpen(true);\n element.scrollIntoView();\n }\n };\n\n useEffect(() => {\n fetchRatingsAndReviews();\n scrollToRatingsAndReviews();\n }, [productDescriptorId]);\n\n return (\n \n {\n reviews.map(review =>\n
\n \n {renderPagination()}\n
\n \n \n \n
\n );\n};\n\nRatingsAndReviews.defaultProps = {\"location\": {\"hash\": null}};\n\nRatingsAndReviews.propTypes = {\n \"location\": PropTypes.object,\n \"productDescriptorId\": PropTypes.number.isRequired,\n \"ratings\": PropTypes.shape({\n \"average\": PropTypes.number,\n \"count\": PropTypes.number\n }).isRequired\n};\n\nexport default RatingsAndReviews;\n","/* eslint-disable react/jsx-no-bind */\nimport React, {useEffect, useState} from \"react\";\nimport API from \"../modules/API\";\nimport EventsAPI from \"../modules/EventsAPI\";\nimport {Link} from \"react-router-dom\";\nimport LoadingSpinner from \"../../bundles/BuyItNow/components/LoadingSpinner\";\nimport ProductDescriptorsAPI from \"../../bundles/Product/modules/ProductDescriptorsAPI\";\nimport PropTypes from \"prop-types\";\n\nconst RecommendedItems = ({forProductDescriptorId}) => {\n const [\n products,\n setProducts\n ] = useState([]);\n\n const [\n isLoading,\n setIsLoading\n ] = useState(true);\n\n useEffect(() => {\n ProductDescriptorsAPI.fetchProductPageRecommendations(forProductDescriptorId).then((response) => {\n if (response.error) {\n console.log(response.error);\n } else {\n setProducts(response.data.product_descriptors);\n }\n setIsLoading(false);\n });\n }, []);\n\n const handleClick = (productDescriptorId) => {\n if (API.CUSTOMER_ID) {\n EventsAPI.trackCustomerEvent(\"clicked_on_recommended_pdp\", `product_descriptor_id: ${productDescriptorId}`);\n }\n };\n\n return (\n \n
\n \n Ratings & Reviews\n
\n\n
\n \n You May Also Like\n
\n {isLoading &&\n\n There are no recommendations at this time.\n
}\n {(!isLoading && products.length !== 0) &&\n \n {products && products.map(product => (\n handleClick(product.id)}\n title={product.details.name}\n to={product.details.url}\n >\n
}\n \n 
\n
\n \n
\n \n ))}\n \n {product.details.designer}\n
\n \n {product.details.name}\n
\n \n
\n );\n }\n});\n","/* eslint-disable react/jsx-no-bind, consistent-return, react/jsx-closing-tag-location */\nimport LoadingSpinner from \"../BuyItNow/components/LoadingSpinner\";\nimport NonMemberCartAPI from \"../../shared/modules/NonMemberCartAPI\";\nimport Notification from \"../../shared/components/Notification\";\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\n\nconst AddToCartButton = ({isItemAvailable, productDescriptor, showClearancePrice}) => {\n const [\n notificationText,\n setNotificationText\n ] = React.useState(null);\n const [\n isLoading,\n setIsLoading\n ] = React.useState(false);\n\n React.useEffect(() => {\n if (notificationText) {\n const timeout = setTimeout(() => {\n setNotificationText(null);\n }, 6000);\n return () => {\n clearTimeout(timeout);\n };\n }\n }, [notificationText]);\n\n\n const handleAddToCart = () => {\n setIsLoading(true);\n const storeKind = showClearancePrice ? \"clearance\" : \"retail\";\n NonMemberCartAPI.addToCart(productDescriptor.id, 1, storeKind).then((response) => {\n if (response.error) {\n setNotificationText(response.error);\n } else {\n setNotificationText(\"Added to cart\");\n }\n setIsLoading(false);\n });\n };\n\n const buttonText = isItemAvailable ? \"Add to Cart\" : \"Out of Stock\";\n\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n {cartItemNotification &&\n \n {notificationText &&\n \n {isLoading ?
\n );\n};\n\nAddToCartButton.propTypes = {\n \"cookies\": PropTypes.object.isRequired,\n \"isItemAvailable\": PropTypes.bool.isRequired,\n \"productDescriptor\": PropTypes.object.isRequired,\n \"showClearancePrice\": PropTypes.bool.isRequired\n};\n\nexport default AddToCartButton;\n","const totalPurchasePrice = (price, rewardsDiscount) => price - rewardsDiscount;\nconst calculateCredits = (purchasePrice, credit) => {\n if (purchasePrice > 0 && purchasePrice <= credit) {\n return purchasePrice;\n } else if (purchasePrice > 0) {\n return credit;\n }\n return 0;\n};\n\nexport const shineCreditUsed = (price, rewardsDiscount, customerCredits) => {\n const shineCredit = customerCredits.shine;\n const totalPrice = totalPurchasePrice(price, rewardsDiscount);\n return calculateCredits(totalPrice, shineCredit);\n};\n\nexport const shoppingCreditUsed = (price, rewardsDiscount, customerCredits) => {\n const shoppingCredit = customerCredits.shopping;\n const priceRemaining =\n totalPurchasePrice(price, rewardsDiscount) - shineCreditUsed(price, rewardsDiscount, customerCredits);\n return calculateCredits(priceRemaining, shoppingCredit);\n};\n\nexport const totalCreditUsed = (price, rewardsDiscount, customerCredits) =>\n shineCreditUsed(price, rewardsDiscount, customerCredits) +\n shoppingCreditUsed(price, rewardsDiscount, customerCredits);\n","export default class OrderAPI {\n static API_TOKEN = null;\n\n static API_VERSION = 1;\n\n static setApiToken (apiToken) {\n this.API_TOKEN = apiToken;\n }\n\n static purchaseOrder (data = {}) {\n return (\n fetch(\"/orders\", {\n \"body\": JSON.stringify(data),\n \"credentials\": \"same-origin\",\n \"headers\": {\n \"Authorization\": `Token token=${this.API_TOKEN}`,\n \"Content-Type\": \"application/json\",\n \"X-CSRF-Token\": document.querySelectorAll(\"meta[name=csrf-token]\")[0].getAttribute(\"content\")\n },\n \"method\": \"POST\"\n }).\n then(response => response.json())\n );\n }\n}\n","/* eslint-disable max-lines, init-declarations, no-shadow, no-warning-comments, camelcase */\n\nimport * as React from \"react\";\nimport {setDisplayNewTierNotification, setPostPurchaseModal} from \"../../../actions\";\nimport {shineCreditUsed, shoppingCreditUsed, totalCreditUsed} from \"../modules/CustomerCreditsHelper\";\nimport AnalyticsHelper from \"../../../shared/modules/AnalyticsHelper\";\nimport Helper from \"../../../shared/modules/Helper\";\nimport Modal from \"react-bootstrap-modal\";\nimport MovableIncHelper from \"../../../shared/modules/MovableIncHelper\";\nimport OrderAPI from \"../modules/OrderAPI\";\nimport PropTypes from \"prop-types\";\nimport {connect} from \"react-redux\";\nclass CheckoutModal extends React.PureComponent {\n\n static propTypes = {\n \"apiToken\": PropTypes.string.isRequired,\n \"customerCredits\": PropTypes.object.isRequired,\n \"customerId\": PropTypes.string.isRequired,\n \"onCloseModal\": PropTypes.func.isRequired,\n \"open\": PropTypes.bool.isRequired,\n \"parentProps\": PropTypes.object.isRequired,\n \"pdOrderInfo\": PropTypes.object.isRequired,\n \"setDisplayNewTierNotification\": PropTypes.func.isRequired,\n \"setPostPurchaseModal\": PropTypes.func.isRequired,\n \"warehouseClosed\": PropTypes.bool,\n \"warehouseClosedShopPageText\": PropTypes.string\n };\n\n static defaultProps = {\n \"customerCredits\": {\n \"shine\": 0,\n \"shopping\": 0\n },\n \"warehouseClosed\": false,\n \"warehouseClosedShopPageText\": null\n };\n\n constructor (props) {\n super(props);\n\n this.state = {\n \"buttonText\": \"Place Order\",\n \"isPurchasing\": false,\n \"purchaseComplete\": false,\n \"subtotalText\": \"Subtotal\"\n };\n }\n\n componentDidMount () {\n const {apiToken} = this.props;\n\n OrderAPI.setApiToken(apiToken);\n }\n\n componentDidUpdate (prevProps) {\n const {parentProps, open} = this.props;\n const {productDescriptor} = parentProps;\n if (prevProps.open !== open) {\n AnalyticsHelper.sendProductAddedToCartEvent(productDescriptor);\n }\n }\n\n handlePurchaseResult = (selector) => {\n // TODO: React-ify this\n $(\".btn-primary.center\").attr(\"disabled\", false);\n if ($(\".summary-review\").is(\":visible\")) {\n $(`.summary-review, ${selector}`).slideToggle();\n if ($(\".summary-title\").is(\":visible\")) {\n $(\".summary-title\").slideToggle();\n }\n } else {\n $(\".summary-review, .purchase-failure\").slideToggle();\n }\n $(\".summary\").animate({\n \"height\": \"111px\",\n \"margin-top\": \"32px\"\n });\n }\n\n handleSuccessfulPurchase = (response) => {\n const {\n customerId,\n \"pdOrderInfo\": {\n \"store_kind_name\": storeKindName,\n \"product_descriptor_id\": productDescriptorId,\n \"price\": productPrice\n },\n setDisplayNewTierNotification,\n setPostPurchaseModal\n } = this.props;\n\n this.setState(\n {\n \"buttonText\": response.message,\n \"isPurchasing\": false,\n \"purchaseComplete\": true,\n \"subtotalText\": \"Total\"\n },\n this.handlePurchaseResult(\".purchase-success\")\n );\n\n setPostPurchaseModal(response.post_purchase_promo);\n setDisplayNewTierNotification(response.show_new_tier_notification);\n\n const totalForConversionStat = response.price_dollars;\n const productName = response.product_name;\n const purchasedProducts = [\n {\n \"member_price\": productPrice,\n \"name\": productName,\n \"product_descriptor_id\": productDescriptorId,\n \"product_descriptor_sku\": response.pd_sku\n }\n ];\n\n MovableIncHelper.sendMovableIncConversion(purchasedProducts, totalForConversionStat, null, storeKindName);\n\n window.analytics.track(\"Shop: Purchased Piece\", {\n \"store_kind\": storeKindName,\n \"user_id\": customerId\n });\n }\n\n handleUnsuccessfulPurchase = (error) => {\n const {\n customerId,\n \"pdOrderInfo\": {\"store_kind_name\": storeKindName}\n } = this.props;\n let message;\n this.setState({\"buttonText\": error.message});\n\n if (error.reason === \"bad-card\") {\n this.handlePurchaseResult(\".purchase-failure\");\n message = \"Shop: Purchase Failure\";\n } else if (error.reason === \"no-more\") {\n this.handlePurchaseResult(\".purchase-no-more\");\n message = \"Shop: Out of Stock\";\n } else if (error.reason === \"system-failure\") {\n this.handlePurchaseResult(\".system-failure\");\n message = \"Shop: Purchasing Failure\";\n } else if (error.reason === \"too-soon\") {\n this.handlePurchaseResult(\".too-soon\");\n message = \"Shop: Too Soon\";\n }\n\n window.analytics.track(message, {\n \"store_kind\": storeKindName,\n \"user_id\": customerId\n });\n }\n\n clickHandler = () => {\n const {\"pdOrderInfo\": {\"store_kind_name\": storeKindName}} = this.props;\n const {purchaseComplete} = this.state;\n\n if (purchaseComplete) {\n window.location.href = storeKindName === \"clearance\" ? \"/shop/clearance\" : \"/jewelry\";\n } else {\n this.handleOrderPurchase();\n }\n }\n\n handleOrderPurchase = () => {\n const {\n customerId,\n \"pdOrderInfo\": {\n \"product_descriptor_id\": productDescriptorId,\n \"store_kind\": storeKind\n }\n } = this.props;\n\n /* eslint-disable no-undef */\n const purchaseInfo = {\n \"campaign_id\": getCookie(\"campaign_id\"),\n \"product_descriptor_id\": productDescriptorId,\n \"store_kind\": storeKind,\n \"template_id\": getCookie(\"template_id\"),\n \"user_id\": customerId\n };\n /* eslint-enable no-undef */\n\n this.setState(\n {\n \"buttonText\": \"Purchasing...\",\n \"isPurchasing\": true\n },\n () => {\n const response = OrderAPI.purchaseOrder(purchaseInfo);\n\n response.then((data) => {\n if (data.status === 200) {\n this.handleSuccessfulPurchase(data);\n } else {\n this.handleUnsuccessfulPurchase(data);\n }\n });\n }\n );\n }\n\n render () {\n const {\n customerCredits,\n onCloseModal,\n open,\n \"pdOrderInfo\": {\n \"address_on_file\": {\n city,\n \"first_name\": firstName,\n \"last_name\": lastName,\n state,\n \"street_address_1\": streetAddress1,\n \"street_address_2\": streetAddress2,\n zip\n },\n \"billing_info_type\": billingInfoType,\n \"card_on_file\": cardOnFile,\n price,\n \"price_class\": priceClass,\n \"price_description\": priceDescription,\n \"store_kind\": storeKind,\n \"store_kind_name\": storeKindName,\n \"rewards_info\": {\n \"discounts\": rewardsDiscount,\n \"invoice_label\": rewardsInvoiceLabel\n }\n },\n \"parentProps\": {\n customerId,\n \"productDescriptor\": {\n \"details\": {\n \"designer\": designerName,\n \"formatted_ring_size\": formattedRingSize,\n \"full_size_urls\": fullSizeUrls,\n \"kind_name\": kindName,\n name\n },\n id\n }\n },\n warehouseClosed,\n warehouseClosedShopPageText\n } = this.props;\n const {\n buttonText,\n isPurchasing,\n subtotalText\n } = this.state;\n const returnTo = window.location.pathname;\n\n return (\n \n
: buttonText}\n \n \n
\n \n Great Choice! Enjoy Your Purchase!\n
\n \n Congratulations!\n
\n \n Expect an email confirmation shortly.\n
\n \n
\n \n Order Unsuccessful\n
\n \n Sorry, we can't complete this payment.\n {\" \"}\n \n Update Card\n \n
\n \n
\n \n Oh no, something went wrong!\n
\n \n Sorry, we can't complete this payment.\n
\n \n
\n \n \n Order Unsuccessful\n
\n \n Please wait a few minutes and try again.\n
\n \n
\n }\n \n {warehouseClosedShopPageText}\n
\n \n
\n \n
\n \n
\n \n 
\n
\n \n
\n \n {designerName}\n
\n\n {name}\n
\n {kindName === \"Ring\" &&\n\n {`Size: ${formattedRingSize}`}\n
}\n \n \n {shineCreditUsed(price, rewardsDiscount, customerCredits) > 0 &&\n // eslint-disable-line react/jsx-closing-tag-location\n }\n
\n \n {priceDescription}\n \n {`$${Helper.formatPriceCents(price)}`}\n \n
\n {rewardsDiscount > 0 &&\n \n {rewardsInvoiceLabel}\n \n {`-$${Helper.formatPriceCents(rewardsDiscount)}`}\n \n
\n }\n {storeKindName === \"clearance\"\n ? \n Credit does not apply.\n
// eslint-disable-line react/jsx-closing-tag-location\n : \n Monthly Credit\n \n {`-$${Helper.formatPriceCents(shineCreditUsed(price, rewardsDiscount, customerCredits))}`}\n \n
\n }\n {shoppingCreditUsed(price, rewardsDiscount, customerCredits) > 0 &&\n \n Shopping Credit\n \n {`-$${Helper.formatPriceCents(shoppingCreditUsed(\n price, rewardsDiscount, customerCredits\n ))}`}\n \n
\n }\n \n Shipping & Handling\n {\" \"}\n \n Free\n \n
\n \n {subtotalText}\n {\" \"}\n \n {`$${Helper.formatPriceCents(price - rewardsDiscount -\n (storeKindName === \"clearance\" ? 0\n : totalCreditUsed(price, rewardsDiscount, customerCredits)))}`}\n \n
\n \n * Sales tax may apply\n
\n \n \n \n {buttonText}\n \n \n ...\n \n \n
\n \n * Final invoice will include tax where applicable.\n
\n \n
\n \n Billing & Shipping\n
\n\n {billingInfoType === \"credit_card\" && cardOnFile &&\n
\n \n Purchases will be charged on your card ending in\n {\" \"}\n \n {cardOnFile}\n \n
}\n {billingInfoType === \"apple_pay\" &&\n \n Purchases will be charged to your Apple Pay account\n
}\n {!cardOnFile && \"Purchases will be charged to your card on file.\"}\n \n \n Change\n \n
\n \n
\n \n {firstName}\n \n {lastName}\n
\n \n {streetAddress1}\n \n {streetAddress2}\n
\n \n {city}\n , \n {state}\n \n {zip}\n
\n \n \n Change\n \n
\n \n {\n !nonMemberCartEnabled &&\n
\n );\n }\n\n handleBINRedirect = () => {\n window.location = `${window.location.pathname}/checkout?${this.getUtmParameters()}`;\n }\n\n getUtmParameters = () => {\n const params = window.location.search.substring(1).split(\"&\");\n const utmParams = params.filter(param => param.includes(\"utm\")).join(\"&\");\n return utmParams || \"\";\n }\n\n nonmemberShouldSeeBIN = () => {\n const {buyItNowEligible} = this.props;\n return buyItNowEligible;\n }\n\n isAvailableRetailStore = () => {\n const {orderInfo, \"parentProps\": {productDescriptor}} = this.props;\n let availableRetailStore = false;\n\n if (orderInfo[productDescriptor.id]) {\n availableRetailStore = orderInfo[productDescriptor.id][\"retail?\"];\n }\n\n return availableRetailStore;\n }\n\n loggedIn = () => API.CUSTOMER_ID\n\n handleCloseModal = () => this.setState({\"modalOpen\": false});\n\n renderAddToCart = () => {\n const {loadingAddToCart} = this.props;\n return (\n \n Free Shipping\n {\" • \"}\n Free Returns\n
\n \n
\n );\n }\n\n renderBuyOnClearanceButton = () => (\n \n {this.renderAddToCart()}\n
\n )\n\n renderBuyNowButton = () => {\n const {orderInfo, \"parentProps\": {\"productDescriptor\": {id}}} = this.props;\n const {\"address_on_file\": addressOnFile, \"card_on_file\": cardOnFile} = orderInfo[id];\n return (\n \n { this.renderAddToCart()}\n {cardOnFile && addressOnFile &&\n
\n );\n }\n\n renderAddToWishListButton = () => {\n const {wishlisted} = this.props;\n\n return (\n \n\n {this.shouldRenderAddToWishlistButton() && this.renderAddToWishListButton()}\n\n {this.shouldRenderPreviewSwapButton() && this.renderPreviewSwapButton()}\n\n {this.shouldRenderBuyClearanceButton() && this.isAvailableClearanceStore() && this.renderBuyOnClearanceButton()}\n\n {this.shouldRenderBuyNowButton() && this.isAvailableRetailStore() && this.renderBuyNowButton()}\n\n {!this.loggedIn() && this.renderNonMemberBINSection()}\n\n {this.loggedIn() && (this.shouldRenderClearancePrice() || this.isAvailableRetailStore()) &&\n this.renderCheckoutModal()\n }\n
\n )\n}\n\nconst mapStateToProps = state => (\n {\n \"apiToken\": state.apiToken,\n \"buyItNowEligible\": state.buyItNowEligible,\n \"customerId\": state.customerId,\n \"orderInfo\": state.orderInfo,\n \"pdPrices\": state.pdPrices,\n \"warehouseClosed\": state.warehouseClosed,\n \"warehouseClosedShopPageText\": state.warehouseClosedShopPageText\n }\n);\n\nexport default connect(mapStateToProps)(ProductDetailButtons);\n","/* eslint-disable react/no-multi-comp */\nimport {Link} from \"react-router-dom\";\nimport ProductRatingStars from \"./ProductRatingStars\";\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\n\nconst ProductRating = (props) => {\n const {\n average,\n count,\n forGrid,\n fromClearancePage,\n fromProductDetailsModal,\n previewSwapping,\n productUrl\n } = props;\n\n if (!count > 0) {\n return null;\n }\n\n const scrollToRatingsAndReviews = () => {\n document.getElementById(\"ratings-and-reviews-container\").scrollIntoView();\n\n const btn = document.querySelector(\"#ratings-and-reviews-container span.expand-btn\");\n\n if (btn) {\n btn.click();\n }\n };\n\n const displayCount = () => {\n if (forGrid || previewSwapping) {\n return (\n \n {`(${count})`}\n \n );\n }\n\n if (fromProductDetailsModal) {\n return (\n /* eslint-disable react/jsx-no-bind */\n \n
\n );\n};\n\nProductRating.defaultProps = {\n \"average\": 0,\n \"count\": 0,\n \"forGrid\": false,\n \"fromClearancePage\": false,\n \"fromProductDetailsModal\": false,\n \"history\": {},\n \"previewSwapping\": false,\n \"productUrl\": \"\"\n};\n\nProductRating.propTypes = {\n \"average\": PropTypes.number,\n \"count\": PropTypes.number,\n \"forGrid\": PropTypes.bool,\n \"fromClearancePage\": PropTypes.bool,\n \"fromProductDetailsModal\": PropTypes.bool,\n \"history\": PropTypes.object,\n \"previewSwapping\": PropTypes.bool,\n \"productUrl\": PropTypes.string\n};\n\nexport default ProductRating;\n","import Helper from \"../modules/Helper\";\nimport PropTypes from \"prop-types\";\nimport React from \"react\";\nimport {times} from \"lodash\";\n\nconst ProductRatingStars = (props) => {\n const {\n averageRating,\n forGrid\n } = props;\n const stars = [];\n let index = 0;\n const filledStars = Math.floor(averageRating);\n const hasHalfStar = averageRating % 1 === 0.5;\n const emptyStars = 5 - (filledStars + hasHalfStar);\n\n times(filledStars, () => {\n stars.push(\n \n {stars}\n
\n );\n};\n\nProductRatingStars.propTypes = {\n \"averageRating\": PropTypes.number.isRequired,\n \"forGrid\": PropTypes.bool.isRequired\n};\n\nexport default ProductRatingStars;\n","/* eslint-disable quotes */\n\nimport * as React from \"react\";\nimport PropTypes from \"prop-types\";\n\nexport default class ToolTip extends React.PureComponent {\n\n static propTypes = {\n \"arrowPosition\": PropTypes.string,\n \"classes\": PropTypes.string,\n \"color\": PropTypes.string,\n \"content\": PropTypes.string.isRequired,\n \"handleTooltipClose\": PropTypes.func.isRequired,\n \"showToolTip\": PropTypes.bool\n };\n\n static defaultProps = {\n \"arrowPosition\": \"center\",\n \"classes\": \"\",\n \"color\": \"pink\",\n \"showToolTip\": true\n }\n\n displayColorClass = () => {\n const {color} = this.props;\n\n return color === \"pink\" ? \"tool-tip-pink\" : \"tool-tip-grey\";\n }\n\n render () {\n const {arrowPosition, classes, content, color, showToolTip, handleTooltipClose} = this.props;\n return (\n \n \n x\n
\n \n {content}\n
\n \n }\n \n {`retail price $${Helper.formatPriceCents(retailPrice)}`}\n
\n {memberPrice !== retailPrice &&\n\n {`member price $${Helper.formatPriceCents(memberPrice)}`}\n
\n }\n\n {`$${Helper.formatPriceCents(retailPrice)}`}\n
\n );\n }\n\n if (!this.nonmemberShouldSeeBIN() && !MemberDiscountHelper.shouldSeeMemberDiscountVariant() && memberPrice) {\n return (\n\n {`member $${Helper.formatPriceCents(memberPrice)}`}\n
\n {memberPrice !== retailPrice &&\n\n {`retail $${Helper.formatPriceCents(retailPrice)}`}\n
\n }\n\n {`member $${Helper.formatPriceCents(discountVariantPrice)}`}\n
\n {discountVariantPrice !== retailPrice &&\n\n {`retail $${Helper.formatPriceCents(retailPrice)}`}\n
\n }\n\n {`clearance ${clearancePrice}`}\n
\n\n
\n \n {this.nonmemberShouldSeeBIN() &&\n this.renderBINPrice()\n }\n {this.isClearanceItem() && this.renderClearancePriceInfo()}\n\n {!this.isClearanceItem() && this.renderPriceInfo()}\n
\n \n
\n }\n \n \n * Final Sale. Credit does not apply. Sale items are all gently worn and may have visible signs of wear.\n
\n\n \n {metalGroups.length > 1 && metalGroups.map(metalGroup =>\n
\n \n {showColorArea &&\n \n
\n \n Metal\n
\n {\" — \"}\n\n {metalName}\n
\n\n
\n }\n {kindName === \"Ring\" &&\n \n \n {uniqueColors && uniqueColors.length > 1 && uniqueColors.map(naturalStoneColorGroup =>\n
\n \n
\n \n Color\n
\n {\" — \"}\n\n {[\n groupName,\n metalName\n ].indexOf(productName) > -1\n ? naturalStoneName || colorName\n : productName}\n
\n\n \n {naturalStoneColorGroups[metalName] && naturalStoneColorGroups[metalName].\n filter(naturalStoneColorGroup => naturalStoneColorGroup.product_name === productName).\n sort((firstProduct, secondProduct) => parseInt(firstProduct.ring_size, 10) - parseInt(secondProduct.ring_size, 10)). // eslint-disable-line max-len\n map(naturalStoneColorGroup =>\n (naturalStoneColorGroup.url === location.pathname || !nav\n ? (\n \n \n {naturalStoneColorGroup.ring_size}\n \n
)\n : (\n \n
\n {ringSize !== \"Adjustable\" &&\n \n Size\n
\n {\" — \"}\n\n {ringSize}\n
\n\n \n {price}\n \n \n {promoPrice}\n \n
\n\n static renderPromoPriceAndDiscountOnGrid = (price, promoPrice, discountText) =>\n \n \n {price}\n \n \n {promoPrice}\n \n \n {discountText}\n \n
\n\n static renderPromoPriceOnProductPage = (price, promoPrice) =>\n \n \n {price}\n \n \n {promoPrice}\n \n
\n\n static renderPromoPriceAndDiscountOnProductPage = (price, promoPrice, discountText) =>\n \n \n {price}\n \n \n {promoPrice}\n \n \n {discountText}\n \n
\n}\n"],"names":["ScarcityMessaging","_ref","productDescriptorCount","displayScarcityMessaging","React","className","concat","propTypes","PropTypes","defaultProps","ProductRouting","_React$PureComponent","_inherits","_super","_createSuper","props","_this","_classCallCheck","call","_defineProperty","_assertThisInitialized","fetchProductFeedsAndSwatches","id","API","fetchProducts","then","response","updateState","prevState","Helper","createProductObject","products","_objectSpread","_this$props","event","lastId","state","product","productDescriptor","setState","moreBy","designer","recommended","similar","$","when","fetchProductFeeds","done","fetchSwatches","fetchProduct","map","feed","length","Object","values","details","natural_stone_color_groups","metalArray","filter","swatchId","keys","includes","toString","window","scrollTop","_createClass","key","value","_this$props2","this","addToCartRequest","addWishListRequest","buyItNowEligible","customerRequests","eligibleForFineJewelry","location","nonMemberCartEnabled","removeWishListRequest","backToResultsPath","get","productHasProductDescriptor","wishlisted","statuses","Link","to","Product","_extends","more_by","innerId","isRequired","withRouter","connect","store","fetchCustomerRequests","ContainerWrapper","_React$Component","applyMiddleware","promise","createStore","path","callback","propsCache","jQuery","data","createdAt","Date","now","assign","createStoreWithMiddleware","reducer","initializeStore","currentPathname","pathname","stampedProps","fetchNewProps","_this$state","currentPropsCacheKey","ErrorBoundary","Provider","children","useComponentVisible","initialIsVisible","_useState","useState","_useState2","_slicedToArray","isComponentVisible","setIsComponentVisible","ref","useRef","handleClickOutside","current","contains","target","useEffect","document","addEventListener","removeEventListener","ChooseSwap","_len","arguments","args","Array","_key","apply","onSwap","productDescriptors","_this$props3","classes","text","isSwapped","onClick","handleClick","SharedPropTypes","filterGenerator","selected","param","currentFilter","selections","subCategories","forEach","selection","displayName","name","showIfSelected","singleSelection","defaultHide","push","FilterPills","filterType","tabIndex","title","indexOf","_this2","clearAllFilters","selectedFilters","kindFilter","selectedFilter","split","selectedNonKindFilters","filterName","filterPill","MobileSort","sortItem","sort","selectedSort","find","sorts","renderSortItem","Filters","keyCode","currentTarget","querySelector","attributes","toggleClass","slideToggle","filters","propName","reduce","result","selectedKeys","slug","subCategory","onKeyDown","handleKeyDown","showifselected","selectedTrend","matchedTrend","display_in_filters","excludeTrendsFromFilter","isMobile","selectedNonFilterTrend","isColor","isSwatch","isTrend","isOnClearance","openByDefault","shift","collapseByDefault","nbOfSelectedForType","filKey","mapFiltersToProperty","some","sel","toggleFiltersDisplay","style","isNonFilterDisplay","isSelected","renderSubCategories","toggleMobileFilters","type","resetFilters","handleScroll","bind","getSelectedNonFilterTrend","scrollY","_this$props4","handleTooltipClose","previewSwapping","showToolTip","stickyFilter","nbOfSelectedFilters","fil","scroll","scrollHeight","ToolTip","arrowPosition","color","content","filterSection","renderMobileButtons","FiltersContainer","readInitialFilterParamsAndSyncURLAndCookies","setTimeout","hideToolTip","prevProps","doFilter","prevSelectedFilters","_isEqual","params","addFiltersQueryString","storeFilterParams","replace","search","_compact","readFilterParams","applyFiltersFromParams","filterKeys","filterQueryString","url","selectedFilterKeys","nonFilterParams","charAt","nonFilterParamsString","join","buildFilterQueryString","history","replaceState","filterParams","cookies","set","storeFilterParamsInCookie","filterParamsValue","readFilterParamsFromCookie","setFilters","transformKeysToSelectedFilterObjects","slice","EventsAPI","trackUserEvent","handleFilterClick","filterFound","subFilter","handleFilterClickEvent","toLowerCase","filtersOpen","css","removeClass","addClass","elem","body","classList","remove","setProperty","add","animate","closeAllFilters","stickyClass","SortSelect","_this$props5","customerState","requestsNeeded","controller","_this$props6","categories","productPanelClass","showClearancePrice","showPriceRangeFilters","showPromoFilters","showTrendFilters","filtersMobileClass","renderFiltersHeader","withCookies","ProductDetailsModalImageOrCarousel","index","preventDefault","ts","slider","goTo","indexCurrent","getInfo","displayIndex","sourceUrl","imageClassName","pdName","alt","src","images","sliderImages","el","imageClass","renderSingleImageTag","currentImageIndexShown","TinySliderOverride","onIndexChanged","updateCurrentIndex","settings","sliderMovesTo","renderTinySlider","renderImageTags","ProductDetailsModal","nextProps","newId","setItemAvailability","querySelectorAll","element","AnalyticsHelper","sendProductViewedEvent","trackBrowserAbandonment","currentProductDescriptorId","pd","isPreviewAndSwapExperiment","startSwapUrl","_asyncToGenerator","_regeneratorRuntime","_callee","productDescriptorId","quantity","fetchItemCart","storeKind","_context","prev","next","CartAPI","addToCart","handleAddToCartNotification","handleCloseModalAndItemAddedToCartStatus","stop","_x","_x2","notificationText","timerId","setitemCartNotification","onCloseModal","clearTimeout","NonMemberCartAPI","getItemAvailabilityCount","sendStartedSwapEvent","itemAvailability","addWishListCallback","removeWishListCallback","swapHandler","isWishlisted","displayExperimentButtons","ProductDetailButtons","addToCartCallback","inShipment","parentProps","isLoggedOutHomepage","searchParams","href","sendViewedProductEvent","itemCartNotification","_this$props7","open","updateModalProductDescriptor","_productDescriptor$de","baseMetal","insiderPriceDollars","isFine","metalDetail","metalName","otherMaterials","wishlistable","sku","Modal","onHide","show","closeButton","InfoContainer","fromProductDetailsModal","handleSwatchClick","nav","Carousels","designerNamer","Star","price","renderFullDetailsLinkForDesktop","renderStartSwapButton","renderProductDetailsButtons","SwapButton","renderFullDetailsLinkForMobile","Notification","notificationDisplayText","currentSort","selectedSortName","collapse","expanded","sortList","onBlur","toggleDropdown","AddToCartRings","allRingSizes","availableRingSizes","selectedRingSize","setSelectedRingSize","isAdjustableOnly","parseSize","size","Number","generateButton","_ref2","isAvailable","disabled","console","log","ringSize","ColorSwatch","colorName","metalColor","mouseEnterHandler","mouseLeaveHandler","stoneName","invalidNames","validStoneName","validColorName","onMouseEnter","onMouseLeave","ColorOptions","setHoveredSwatchId","setSelectedSwatchId","swatches","selectedSwatchId","setDisplayName","getDisplayname","activeSwatch","swatch","swatch_id","swatch_name","handleMouseEnter","handleMouseLeave","color_name","metal_name","stone_name","AddToCart","defaultProductDescriptorId","defaultSwatchId","defaultRingSize","isRing","setNotificationType","hasManyColorOptions","Boolean","hasManySizeOptions","hasSelections","isLoading","setIsLoading","_useState3","_useState4","selectedProductDescriptorId","setSelectedProductDescriptorId","_useComponentVisible","showSelections","setShowSelections","getButtonText","handleOnError","handleOnSuccess","handleAddToCart","CUSTOMER_ID","error","toggleSelections","matchedSwatch","available","matchedRingSize","item","ring_size","getProductDescriptorId","_filteredSwatches$map","filteredSizes","filterSizesBySelectedColor","startsWith","LoadingSpinner","ProductPanel","tag","originalId","showModal","ProductDescriptorViewsAPI","createProductDescriptorView","sendQuickViewEvent","kindName","ringSizes","ring","customerId","pdPrices","noCustomerClearancePrice","isCustomerPresent","isClearancePriceAvailable","clearance_price","promoPriceInfo","autoAppliedPromoCode","retailPrice","getMemberPrice","insiderPriceDollarsVarB","insiderPriceDollarsVarC","insiderPriceMap","Map","member_price","MemberDiscountHelper","shouldSeeMemberDiscountVariant","memberVariant","getMemberDiscountVariant","getPromoPriceInfo","promoClearancePrice","discountText","experimentVariant","PromoPriceVariantHelper","shouldSeePromoPrice","renderPromoPriceOnGrid","shouldSeePromoPriceAndDiscount","renderPromoPriceAndDiscountOnGrid","formatPriceCents","getClearancePrice","_this$props8","getPrice","_this$props9","showComingSoon","showProductName","showRetailPrice","_productDescriptor$de2","firstDateReceived","groupName","renderClearancePrice","renderRetailPrice","urlObj","URL","_toConsumableArray","Set","valueA","valueB","previewSwatchId","availableSwatches","swatchImage","image","defaultImageUrl","_this$props10","addToCartFromGrid","_productDescriptor$de3","available_clearance_count","available_retail_count","inExperimentVariant","_availableSwatches$fi","_this$props11","handleShowSwapModal","showTags","showWishlistStars","useModal","enableAddToCart","hoveredSwatchId","omitQuickView","showQuickViewButton","showingRingSelection","_productDescriptor$de4","_productDescriptor$de5","_productDescriptor$de6","average","count","handleShowQuickViewButton","handleHideQuickViewButton","RingSizeSelection","hideRingSizeSelection","handleHideRingSizeWishList","updateWishListCallback","updateWishListRequests","shouldDisplaySlider","renderPreviewImage","checkTag","handleShowRingSizeWishList","displayWishlistStar","ProductPanelImageOrCarousel","isGrid","queryParamBuilder","renderInnerContents","ProductRating","forGrid","getAllRingSizes","currentQuery","newQuery","test","WishlistGrid","sortProductsByWishlist","requestsFetched","naturalStoneColorGroups","productName","isAnArray","isArray","isObject","_typeof","innerProduct","product_name","firstProduct","secondProduct","productOrdering","documentElement","dataset","onSelectSwap","String","getRingSizes","filtering","lazyLoadingNow","renderWishlist","requestsNeededTotal","wishlistCacheLifespan","carousel","zoom","isMobileScreen","clientWidth","configure","itemNum","designerName","handleSideImageClick","OwlCarousel","dots","items","loadedClass","modalClassAddition","modalHideSpeed","notificationDisplayIconClass","notificationDisplayType","setNotificationDisplayText","setNotificationDisplayType","showNotification","setShowNotification","notificationRef","timeoutRef","statusDependentNotification","isStatusDependentNotification","phrase","timer","localStorage","getItem","setItem","handleCloseNotification","click","NotificationModal","imgSrc","displayNewTierNotification","newTierName","setNewTierName","tierName","PostPurchaseModal","postPurchaseModal","handleHideModal","link_url","image_url","ProductsHelper","icon","iconMap","ProductDetails","res","str","toUpperCase","substring","ex","orderInfo","availableRetailStore","metalInfo","isMetalFineJewelry","showClearanceRequested","cookie","getsDesignerFilter","generateSlug","_this$props2$parentPr","_this$props2$parentPr2","designerBio","lengthClass","stylingDescription","weightClass","Helmet","toggleDetailsDisplay","getMetalInfo","otherMaterialsDisplay","icons","rel","displayDesignerFilterLink","iconText","ProductDescriptorsAPI","axios","API_VERSION","authHeaders","pageQuery","forProductDescriptorId","RatingsBreakdownDetail","starRating","starRatingCount","totalCount","ProductRatingStars","averageRating","RatingsOverview","averageRatingGeneral","averageRatingPrice","averageRatingQuality","averageRatingStyle","oneStar","twoStars","threeStars","fourStars","fiveStars","Review","review","date","rating","memberReview","rewardsTier","Reviews","reviews","setReviews","currentPage","setCurrentPage","_useState5","_useState6","totalPages","setTotalPages","_useState7","_useState8","pageRange","setPageRange","fetchReviews","pageNumber","_response$data","page","pages","paginatedReviews","currentPageInput","rangeSize","getRangeSize","rangeWithDots","start","previousPage","Math","floor","unshift","_i","_pages","buildRange","generateKey","Pagination","Prev","Ellipsis","Item","active","Next","RatingsAndReviews","_props$location","_props$ratings","_props$ratings2","setOpen","ratingByType","setRatingByType","ratingByScore","setRatingByScore","fetchRatings","_response$data$rating","_response$data$rating2","_response$data$rating3","_response$data$rating4","_response$data$rating5","_response$data$rating6","_response$data$rating7","_response$data$rating8","_response$data$rating9","_response$data$rating10","_response$data$rating11","_response$data$rating12","_response$data$rating13","hash","scrollIntoView","Collapse","in","RecommendedItems","setProducts","fetchProductPageRecommendations","product_descriptors","trackCustomerEvent","thumbnail_urls","_class","roxySearchEnabledPage","prodId","bool","fromClearance","setLoadingAddToCart","removeCartItemNotification","setCartItemNotification","_this$props3$productD","_this$props3$productD2","ratings","cartItemNotification","loadingAddToCart","showClearanceDetails","AddToCartButton","isItemAvailable","_React$useState","_React$useState2","setNotificationText","_React$useState3","_React$useState4","timeout","buttonText","totalPurchasePrice","rewardsDiscount","calculateCredits","purchasePrice","credit","shineCreditUsed","customerCredits","shineCredit","shine","totalPrice","shoppingCreditUsed","shoppingCredit","shopping","priceRemaining","OrderAPI","apiToken","API_TOKEN","undefined","fetch","JSON","stringify","getAttribute","json","CheckoutModal","selector","attr","is","_this$props$pdOrderIn","storeKindName","productPrice","setDisplayNewTierNotification","setPostPurchaseModal","message","handlePurchaseResult","post_purchase_promo","show_new_tier_notification","totalForConversionStat","price_dollars","purchasedProducts","pd_sku","MovableIncHelper","sendMovableIncConversion","analytics","track","reason","purchaseComplete","handleOrderPurchase","_this$props3$pdOrderI","purchaseInfo","getCookie","purchaseOrder","status","handleSuccessfulPurchase","handleUnsuccessfulPurchase","setApiToken","sendProductAddedToCartEvent","_this$props5$pdOrderI","_this$props5$pdOrderI2","city","firstName","lastName","streetAddress1","streetAddress2","zip","billingInfoType","cardOnFile","priceClass","priceDescription","_this$props5$pdOrderI3","rewardsInvoiceLabel","_this$props5$parentPr","_this$props5$parentPr2","_this$props5$parentPr3","formattedRingSize","fullSizeUrls","warehouseClosed","warehouseClosedShopPageText","isPurchasing","subtotalText","returnTo","totalCreditUsed","clickHandler","Button","handleBINRedirect","getUtmParameters","loading","renderAddToCart","handleOpenModal","_orderInfo$id","addressOnFile","modalOpen","handleCloseModal","pdOrderInfo","_this$props9$parentPr","enoughToWishlist","isAvailableClearanceStore","isAvailableRetailStore","loggedIn","availableClearanceStore","_this$props12","shouldRenderAddToWishlistButton","renderAddToWishListButton","shouldRenderPreviewSwapButton","renderPreviewSwapButton","shouldRenderBuyClearanceButton","renderBuyOnClearanceButton","shouldRenderBuyNowButton","renderBuyNowButton","renderNonMemberBINSection","shouldRenderClearancePrice","renderCheckoutModal","fromClearancePage","productUrl","scrollToRatingsAndReviews","getElementById","btn","stars","filledStars","hasHalfStar","emptyStars","times","assetsUrl","displayColorClass","Swatch","hidden","storePath","swatchName","Info","fetchCustomerCredits","fetchOrderAndPriceInfo","fetchBuyItNowEligibility","oldId","clearBuyItNowEligibility","_get","fetchPDOrderInfo","fetchPDPrices","_this$props6$parentPr","_this$props6$parentPr2","insiderPriceVariantBDollarsOnPD","insiderPriceVariantCDollarsOnPD","_this$props7$parentPr","insiderPriceDollarsOnPD","_this$props8$parentPr","retailPriceOnPD","retail_price","colorGroups","obj","findIndex","clearancePrice","displayClearancePrice","memberPrice","getRetailPrice","isClearanceItem","nonmemberShouldSeeBIN","discountVariantPrice","getDiscountVariantPrice","clearancePromoPrice","renderPromoPriceOnProductPage","renderPromoPriceAndDiscountOnProductPage","renderPrice","locationState","_this$props12$parentP","_this$props12$parentP2","metalGroups","naturalStoneName","_this$props12$parentP3","prevPath","duplicatesAreHappeningIGuess","filterOut","showColorArea","tmp","uniqueColors","getUniqueColorGroups","_step","_iterator","_createForOfIteratorHelper","s","n","naturalStoneColorGroup","err","e","f","renderBINPrice","renderClearancePriceInfo","renderPriceInfo","metalGroup","parseInt","fetchOrderInfo","handleCartNotification","ajax","fail","alert","promoCode","addressInfo","first_name","last_name","phone","street_address_1","street_address_2","billingInfo","recurlyToken","productDescriptorIds","success","post","formatContactParamsForEasyPost","contactParams","email","streetAddress","unitNumber","zipCode","storeName","i","product_descriptor_id","mitr","promoInfo","code","revenue","identifier","exception","airbrake","notify","contactId","recaptchaToken","sessionId","contactInfo","formatContactParams","sendCompletedSwapEvent","pageSource","kind","experimentVariants","promoPrice"],"sourceRoot":""}