\n \n {children || null}\n {message ?
\n \n );\n}\n\nUserMessage.propTypes = {\n className: px.string,\n timestamp: px.number,\n timeout: px.number,\n message: px.string,\n children: px.node,\n onClick: px.func,\n dontHideWhenClicked: px.bool,\n type: px.oneOf(['info', 'success', 'error']),\n isGiftMessage: px.bool,\n};\n","import React, { useEffect, useMemo } from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { UserMessage } from 'Common/components/ui';\n\nexport default function QueryStringUserMessage({ removeSearchParams, condition, className, ...props }) {\n const shouldShow = useMemo(() => {\n const params = new URLSearchParams(window.location.search);\n\n return Object.keys(condition).every((param) => params.get(param) === condition[param]);\n }, [condition]);\n\n const timestamp = useMemo(() => (shouldShow ? new Date().getTime() : 0), [shouldShow]);\n\n useEffect(() => {\n if (shouldShow && removeSearchParams && typeof window.history !== 'undefined') {\n const path = window.location.pathname;\n const params = new URLSearchParams(window.location.search);\n\n Object.keys(condition).forEach((param) => params.delete(param));\n\n history.replaceState({}, '', [path, params.toString()].filter((x) => x).join('?'));\n }\n }, [shouldShow, removeSearchParams, condition]);\n\n return {children}
\n );\n}\n\nContainer.propTypes = {\n className: px.string,\n children: px.node,\n enabled: px.bool,\n label: px.string,\n onClick: px.func,\n};\n\nexport default function ProductRating({\n className,\n reviewCount = 0,\n center = true,\n slimView = false,\n reviewProviderEntityId,\n writeReviewAnchor,\n isDiscontinued,\n leftAlignBreakpoint = 'lg',\n forceInline = false,\n hideLink = false,\n}) {\n const reviewQtySingular = useTranslation('Commerce.Product.ReviewQuantity.Singular.Label');\n const reviewQtyPlural = useTranslation('Commerce.Product.ReviewQuantity.Plural.Label');\n const reviewsLabel = React.useMemo(\n () => `${reviewCount} ${reviewCount === 1 ? reviewQtySingular : reviewQtyPlural}`,\n [reviewCount, reviewQtySingular, reviewQtyPlural]\n );\n\n const goToReviews = React.useCallback(\n (write = false) => {\n if (writeReviewAnchor === 'reviews') {\n const reviewButton = $(`#${writeReviewAnchor}_button`);\n const reviewSection = $(`#${writeReviewAnchor}`);\n\n if (!reviewSection?.attr('aria-expanded')) reviewSection.attr('aria-expanded', true);\n if (!reviewSection.hasClass('active')) reviewSection.addClass('active show');\n if (!reviewButton?.hasClass('active')) reviewButton.addClass('active');\n\n } else {\n const accordionContent = $(`#${writeReviewAnchor}`);\n const accordionButton = $(`#${writeReviewAnchor}__button`);\n\n if (!accordionContent?.attr('aria-expanded')) accordionButton.attr('aria-expanded', true);\n if (!accordionContent.hasClass('show')) accordionContent.addClass('show');\n if (accordionButton?.hasClass('collapsed')) accordionButton.removeClass('collapsed');\n }\n\n if (write) {\n $('.write-review-wrapper')?.css('display', 'block')\n $('.connect-wrapper visible')?.css('display', 'block')\n };\n document.getElementById(writeReviewAnchor)?.scrollIntoView();\n },\n [writeReviewAnchor]\n );\n\n const onWriteReview = React.useCallback(\n (e) => {\n e.stopPropagation();\n goToReviews(true);\n },\n [goToReviews]\n );\n\n const onGotoReviews = React.useCallback(() => goToReviews(false), [goToReviews]);\n\n React.useEffect(() => {\n if (window.yotpo?.initialized) {\n window.yotpo.refreshWidgets();\n }\n }, [reviewProviderEntityId]);\n\n return (\n \n \n
\n ) : (\n \n \n \n
\n {hideLink ? null : (\n \n
\n \n )}\n \n )}\n \n );\n}\n\nProductRating.propTypes = {\n className: px.string,\n reviewCount: px.number,\n center: px.bool,\n hideLink: px.bool,\n isDiscontinued: px.bool,\n slimView: px.bool,\n reviewProviderEntityId: px.string,\n writeReviewAnchor: px.string,\n forceInline: px.bool,\n leftAlignBreakpoint: px.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { v4 } from 'uuid';\nimport $ from 'jquery';\nimport { useTranslation } from 'Common/hooks';\n\nexport default function ToolTip({\n className,\n selector,\n tip,\n translationParams = null,\n children,\n disabled = false,\n forceShowTip = null,\n placement = 'top',\n trigger = 'click',\n cursor = 'default',\n ...props\n}) {\n const id = React.useRef(`tip-${v4()}`);\n const translatedTip = useTranslation(tip, translationParams);\n const onClick = React.useMemo(\n () =>\n disabled || trigger !== 'click'\n ? null\n : (e) => {\n e.preventDefault();\n e.stopPropagation();\n },\n [disabled, trigger]\n );\n\n React.useEffect(() => {\n const el = $(selector || `#${id.current}`);\n\n el.tooltip({\n placement,\n trigger,\n });\n el.on('shown.bs.tooltip', () => {\n $('.tooltip').addClass(className);\n });\n el.on('hidden.bs.tooltip', () => {\n $('.tooltip').removeClass(className);\n });\n return () => el.tooltip('dispose');\n }, [className, selector, placement, trigger]);\n\n React.useEffect(() => {\n const el = $(selector || `#${id.current}`);\n\n if (selector) {\n const title = disabled && !forceShowTip ? null : translatedTip;\n\n el.attr('title', title);\n el.attr('data-original-title', title);\n }\n\n el.tooltip(disabled && !forceShowTip ? 'disable' : 'enable');\n if (typeof forceShowTip === 'boolean') {\n el.tooltip(forceShowTip ? 'show' : 'hide');\n }\n }, [disabled, forceShowTip, selector, translatedTip]);\n\n return (\n \n {isDiscontinued || !writeReviewAnchor ? null : (\n \n {'|'}\n \n
\n
\n \n \n ))}\n \n \n \n );\n}\n\nCatalogCard.propTypes = {\n className: px.string,\n defaultImage: px.string,\n secondaryImage: px.string,\n title: px.string,\n price: px.string,\n id: px.string,\n reducedPrice: px.string,\n rating: px.number,\n onSelectProduct: px.func,\n productUrl: px.string,\n productLinks: px.arrayOf(\n px.shape({\n label: px.node,\n icon: px.string,\n action: px.oneOfType([px.string, px.func]),\n })\n ),\n marketingBadges: px.arrayOf(px.string),\n reviewProviderEntityId: px.string,\n};\n","import px from 'prop-types';\n\nexport const PageInfoShape = {\n count: px.number,\n total: px.number,\n page: px.number,\n totalPages: px.number,\n pageSize: px.number,\n sortValue: px.number,\n from: px.number,\n to: px.number,\n next: px.shape({\n from: px.number,\n to: px.number,\n }),\n};\n\nexport default px.shape(PageInfoShape);\n","export const TRANSFORM_PRODUCT_IMAGE_BACKGROUND = true;\n\n","import Url from './Url';\nimport * as PRODUCT from '~config/product';\n\nexport default class ProductImage {\n static getSecondaryImageUrl(\n media = [],\n primaryImageUrl = '',\n imageQuery = `format=png&width=430&height=430${\n PRODUCT.TRANSFORM_PRODUCT_IMAGE_BACKGROUND ? '&transBg=true' : ''\n }`\n ) {\n const medium = media.find(\n (m) => m.MediaType === 'image' && m.MediaGroup === 'Alternate' && m.Url !== primaryImageUrl\n );\n\n return medium ? Url.addToRelativeUrl(medium.Url, imageQuery) : null;\n }\n\n static getGlamOrDefaultImageUrl(media = [], defaultImage, imageQuery = null) {\n const mastImg = media.find((m) => m.MediaGroup === 'Glam')?.Url;\n const url = mastImg ? mastImg : defaultImage;\n\n return imageQuery ? Url.addToRelativeUrl(url, imageQuery) : url;\n }\n}\n","import { useCallback, useMemo, useState } from 'react';\n\nexport default function useLoading() {\n const [isLoading, setIsLoading] = useState(false);\n\n const load = useCallback(async (callback) => {\n setIsLoading(true);\n try {\n const result = await callback();\n\n return result;\n } finally {\n setIsLoading(false);\n }\n }, []);\n\n return useMemo(() => [isLoading, load], [isLoading, load]);\n}\n","import * as React from 'react';\nimport styled, { keyframes } from 'styled-components';\n\nconst loading = keyframes`\n 0% {\n top: .8em;\n height: 6.4em;\n }\n 50%, 100% {\n top: 2.4em;\n height: 3.2em;\n }\n`;\n\nconst Spin = styled.div`\n animation: ${loading} 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;\n`;\n\nexport default function Spinner() {\n return (\n \n {badges?.length ? (\n <>\n
\n {reviewProviderEntityId != \"\" ? (\n \n {title}\n
\n \n
\n {price}
\n {reducedPrice ? {reducedPrice}
: null}\n - \n {productLinks?.map(({ label, key, icon, action, disabled, tip, tipDisabled = !!tip } = {}) => (\n
- \n
\n
\n \n \n \n
\n );\n}\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport debounce from 'lodash.debounce';\nimport { Spinner } from 'Common/components/ui';\n\nexport default function InfiniteScroll({\n className,\n children,\n isDoneLoading,\n isLoading = false,\n onLoad,\n useLoadIndicator,\n}) {\n const scrollViewRef = React.useRef();\n const isFetching = React.useRef(false);\n const handleScrollRef = React.useRef(null);\n const [showLoader, setShowLoader] = React.useState(false);\n const debounceFetch = React.useMemo(\n () =>\n debounce(async () => {\n await onLoad();\n isFetching.current = false;\n setShowLoader(false);\n }, 500),\n [onLoad]\n );\n\n const handleScroll = React.useCallback(() => {\n const bounding = scrollViewRef.current.getBoundingClientRect();\n\n if (!isFetching.current && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)) {\n isFetching.current = true;\n setShowLoader(true);\n debounceFetch();\n }\n }, [debounceFetch]);\n\n React.useEffect(() => {\n if (handleScrollRef.current) {\n window.removeEventListener('scroll', handleScrollRef.current);\n }\n handleScrollRef.current = handleScroll;\n if (isLoading || isDoneLoading) window.removeEventListener('scroll', handleScrollRef.current);\n else window.addEventListener('scroll', handleScrollRef.current);\n\n return () => window.removeEventListener('scroll', handleScrollRef.current);\n }, [handleScroll, isLoading, isDoneLoading]);\n\n return (\n \n {children}\n {showLoader && useLoadIndicator ? (\n
\n );\n}\n\nInfiniteScroll.propTypes = {\n className: px.string,\n children: px.node,\n isDoneLoading: px.bool,\n onLoad: px.func,\n useLoadIndicator: px.bool,\n isLoading: px.bool,\n};\n","import px from 'prop-types';\n\nexport const LinkItemShape = {\n href: px.string.isRequired,\n target: px.string,\n};\n\nexport default px.shape(LinkItemShape);\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { LinkItem as LinkItemType } from 'Common/types';\n\nexport default function LinkItem({ link, className, children, ...props }) {\n const rel = React.useMemo(() => (link?.target === '_blank' ? 'noopener noreferrer' : ''), [link]);\n\n if (!link) return null;\n\n return (\n \n {children}\n \n );\n}\n\nLinkItem.propTypes = {\n className: px.string,\n link: LinkItemType,\n children: px.node,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport styled from 'styled-components';\nimport { useViewport } from 'Common/hooks';\nimport { LinkItem } from 'Common/components/ui';\nimport { LinkItem as LinkItemType } from 'Common/types';\n\nconst Container = styled.div`\n align-items: ${({ HorizontalAlign }) => {\n switch (HorizontalAlign) {\n case 'right':\n return 'flex-end';\n case 'middle':\n case 'center':\n return 'center';\n default:\n return 'flex-start';\n }\n }};\n text-align: ${({ HorizontalAlign }) => HorizontalAlign};\n justify-content: ${({ VerticalAlign }) => {\n switch (VerticalAlign) {\n case 'bottom':\n return 'flex-end';\n case 'middle':\n case 'center':\n return 'center';\n case 'span':\n case 'stretch':\n return 'space-between';\n default:\n return 'flex-start';\n }\n }};\n background-image: ${({ ImageUrl }) => `url(${ImageUrl})`};\n background-position: center center;\n background-repeat: no-repeat;\n background-size: ${({ ImageResize }) => {\n switch (ImageResize) {\n case 'fit':\n case 'contain':\n return 'contain';\n case 'cover':\n return 'cover';\n case 'stretch':\n return '100% 100%';\n default:\n return 'auto auto';\n }\n }};\n`;\n\nfunction goto(url) {\n return url ? () => (window.location.href = url) : undefined;\n}\n\nexport default function Default({\n className,\n model: {\n SubTitle,\n Title = 'Call To Action',\n Details,\n HorizontalAlign = 'center',\n MobileHorizontalAlign,\n VerticalAlign = 'center',\n MobileVerticalAlign,\n ImageUrl,\n ImageResize = 'cover',\n ButtonText,\n ButtonIcon,\n ButtonIconPosition = 'last',\n TextColor = 'light',\n LinkUrl,\n LinkItem: Link,\n } = {},\n}) {\n const viewport = useViewport();\n const vAlign = React.useMemo(() => (viewport.is.mobile && MobileVerticalAlign) || VerticalAlign, [\n viewport,\n MobileVerticalAlign,\n VerticalAlign,\n ]);\n\n const hAlign = React.useMemo(() => (viewport.is.mobile && MobileHorizontalAlign) || HorizontalAlign, [\n viewport,\n MobileHorizontalAlign,\n HorizontalAlign,\n ]);\n\n const link = React.useMemo(() => Link || { href: LinkUrl || '#' }, [Link, LinkUrl]);\n\n return (\n \n
\n ) : null}\n {SubTitle}
: null}\n {Title ?{Title}
: null}\n {Details ?{Details}
: null}\n {ButtonText || ButtonIcon ? (\n\n
\n );\n}\n\nVideoPlayer.propTypes = {\n className: px.string,\n showControls: px.bool,\n url: px.string,\n previewImage: px.string,\n playing: px.bool,\n id: px.string,\n playsInline: px.bool,\n muted: px.bool,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { APP } from '$env';\n\nexport default function SvgIcon({ sheet = '', name = '', className, ...props }) {\n const cls = React.useMemo(() => cx('SvgIcon', className, 'icons', sheet ? `icons-${sheet}` : '', `icon-${name}`), [\n className,\n sheet,\n name,\n ]);\n\n const href = React.useMemo(\n () =>\n `/Client/${APP}/built/img/spritesheet${sheet ? `-${sheet}` : ''}.svg#icon-${[sheet, name]\n .filter(Boolean)\n .join('-')}`,\n [sheet, name]\n );\n\n return (\n \n );\n}\n\nSvgIcon.propTypes = {\n sheet: px.string,\n name: px.string.isRequired,\n className: px.string,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { useTranslation } from 'Common/hooks';\nimport SvgIcon from './SvgIcon';\n\nexport default function Icon({\n icon,\n label,\n labelProps,\n name,\n sheet,\n style,\n color,\n size,\n rotate,\n className,\n ...props\n}) {\n const translated = useTranslation(label, labelProps);\n\n const [svg, iconSheet, iconName] = React.useMemo(() => {\n if (name) {\n return [true, sheet, name];\n }\n if (icon && /\\bicons\\b/.test(icon)) {\n const mSheet = icon.match(/\\bicons-([\\w-]+)\\b/);\n const mName = icon.match(/\\bicon-([\\w-]+)\\b/);\n\n return [!!mName, mSheet ? mSheet[1] : undefined, mName ? mName[1] : undefined];\n }\n return [false];\n }, [icon, sheet, name]);\n\n const css = React.useMemo(() => {\n const s = { ...style };\n\n if (color) s.color = color;\n if (size) s.fontSize = size;\n if (rotate) {\n s.transform = typeof rotate === 'number' ? `rotate(${rotate}deg)` : `rotate(${rotate})`;\n }\n return s;\n }, [style, color, size, rotate]);\n\n const aria = React.useMemo(() => (translated ? { 'aria-label': translated } : { 'aria-hidden': 'true' }), [\n translated,\n ]);\n\n return svg ? (\n \n 
\n
\n ) : null\n ) : (\n \n );\n }\n if (media.MediaType && media.Url) {\n if (media.MediaType === 'image') {\n return (\n \n
\n \n
\n ) : null\n ) : (\n \n \n
\n \n
\n );\n}\n\nCarouselItem.propTypes = {\n item: px.shape({\n MediaType: px.string,\n MediaGroup: px.string,\n Url: px.string,\n Thumbnail: px.string,\n FileType: px.string,\n Order: px.number,\n IsDefault: px.bool,\n }),\n selected: px.bool,\n onClickGalleryImg: px.func,\n showGalleryMobile: px.bool,\n isMobile: px.bool,\n imageResizeSearchQuery: px.string,\n};\n","import React, { Children } from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { useTranslation } from 'Common/hooks';\n\nfunction getKey(prefix, index) {\n return `${prefix}_${index}`;\n}\n\nexport default function PagingButtons({\n BtnPrev = ,\n BtnNext = ,\n onSelect,\n value,\n pageCount,\n className,\n style,\n children,\n}) {\n const prevLbl = useTranslation('PagingButtons.PreviousPage.Label');\n const nextLbl = useTranslation('PagingButtons.NextPage.Label');\n const scrollLeft = React.useCallback(() => {\n onSelect(Math.max(0, value - 1));\n }, [onSelect, value]);\n\n const scrollRight = React.useCallback(() => {\n onSelect(Math.min(pageCount - 1, value + 1));\n }, [onSelect, value, pageCount]);\n\n return (\n <>\n \n {el}\n
\n );\n}\n\nconst PagedCarouselItem = forwardRef(PagedCarouselItemRender);\n\nPagedCarouselItem.propTypes = {\n el: px.node,\n style: px.object,\n};\n\nconst ResizeableItem = withResize(PagedCarouselItem);\n\nexport default function PagedCarousel({ gap = 1, className, maxVisibleItems, children }) {\n const containerRef = useRef(null);\n const itemWidths = useRef([]);\n const [selectedIndex, setSelectedIndex] = useState(0);\n const [clickPos, setClickPos] = useState();\n const [movedBy, setMovedBy] = useState(0);\n const [containerWidth, setContainerWidth] = useState(null);\n const [isClicked, setDraggableClick] = useState(false);\n const [counter, setCounter] = useState(0);\n\n /**\n * Compute the valid page indexes based on the dimensions of all items and of the\n * carousel container. Returns an array of pages, each of which contains the array\n * of visible item indices (ex: [[0, 1], [2, 3, 4], [3, 4, 5], [6], [7, 8]]).\n *\n * Note:\n * The same index can show up multiple times, depending on the location of\n * full width items.\n */\n const pageRanges = useMemo(() => {\n const widths = itemWidths.current;\n\n // If we don't have the item widths yet, we can't compute any pages.\n if (widths.some((width) => width == null)) return [];\n\n const ranges = [];\n const count = widths.length;\n\n // Iterate forward from the first item...\n for (let i = 0; i < count; ) {\n let pageWidth = widths[i];\n const range = [i];\n\n // Add items to the current range. Stop if the new item would\n // exceed the container width.\n for (let j = i + 1; j < count; j++) {\n const width = widths[j] + gap * GAP_PX;\n\n if (width + pageWidth > containerWidth || (maxVisibleItems && range.length >= maxVisibleItems)) {\n break;\n }\n\n pageWidth += width;\n\n range.push(j);\n }\n\n // Compute how many items to shift forward before we start computing\n // the next page. We don't want to include prepended items, which are\n // computed in the next loop, since we have already processed them.\n const shift = range.length;\n\n // In the case where the next item is larger than can be displayed,\n // we look backwards, prepending smaller items to fill up\n // the space as much as possible.\n for (let k = i - 1; k >= 0; k--) {\n const width = widths[k] + gap * GAP_PX;\n\n if (width + pageWidth > containerWidth || (maxVisibleItems && range.length >= maxVisibleItems)) {\n break;\n }\n\n pageWidth += width;\n\n range.unshift(k);\n }\n\n // Shift forward.\n i += shift;\n\n // Store the new range.\n ranges.push(range);\n }\n\n return ranges;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [containerWidth, counter, gap]);\n\n /**\n * Compute the space between the fully visible elements and the right side of the container.\n *\n * This is used to center the visible elements within the slider container.\n *\n * +---------------------------------+\n * | 1 | 2 | 3 |--space--|\n * +---------------------------------+\n */\n const rangesTrailingSpace = useMemo(() => {\n return pageRanges.map(\n (range) =>\n containerWidth -\n range.reduce((total, i) => itemWidths.current[i] + total, 0) -\n (range.length - 1) * gap * GAP_PX\n );\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [pageRanges, gap, containerWidth, counter]);\n\n /**\n * Updates the width (in pixels) of the carousel item at index `index`.\n *\n * Forces a rerender by incrementing a counter.\n */\n const setWidth = useCallback(\n (index) => (el) => {\n if (el === null) return;\n\n const rectWidth = el.getBoundingClientRect().width;\n\n if (!rectWidth) return;\n\n const newWidth = rectWidth;\n\n if (itemWidths.current[index] === newWidth) return;\n\n itemWidths.current[index] = newWidth;\n setCounter((x) => x + 1);\n },\n []\n );\n\n /**\n * The x-offset of the carousel slider. This slides all images to the left.\n */\n const offset = useMemo(() => {\n let imageLeft = 0;\n const startIndex = pageRanges[selectedIndex]?.[0];\n\n for (let i = 0; i < itemWidths.current.length; i++) {\n if (i === startIndex) break;\n\n imageLeft += itemWidths.current[i] + gap * GAP_PX;\n }\n\n return imageLeft;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedIndex, pageRanges, gap, children, counter]);\n\n const currentPage = pageRanges[selectedIndex] ?? [];\n\n /**\n * Stored item widths get updated when they are rendered. Changing the `children` rerenders\n * the items, so we want to clear the item width array before we start inserting new\n * values. If we don't do this and the new `children` array is shorter, then we will\n * have too many widths stored in the array.\n */\n useEffect(() => {\n itemWidths.current = [];\n }, [children]);\n\n /**\n * Make sure the active page is always within the ever-changing page count.\n *\n * If we don't do this, then making the browser wider while selecting the last\n * page could potentially show a blank row, since the new page count may be less than\n * the selected page index.\n */\n useEffect(() => {\n if (pageRanges.length > 0 && selectedIndex >= pageRanges.length) {\n setSelectedIndex(pageRanges.length - 1);\n }\n }, [selectedIndex, pageRanges]);\n\n /**\n * Store the new carousel container width every time carousel container width\n * changes.\n */\n useEffect(() => {\n const el = containerRef.current;\n\n if (el == null) return;\n\n function computeContainerWidth() {\n const bounds = el.getBoundingClientRect();\n\n if (bounds == null) return;\n\n setContainerWidth(bounds.width);\n }\n\n computeContainerWidth();\n\n const observer = new ResizeObserver((entries) => {\n if (entries.length) {\n computeContainerWidth();\n }\n });\n\n observer.observe(el);\n\n return () => {\n observer.unobserve(el);\n };\n }, []);\n\n /**\n * The amount of pixels to shift the slider in order to render the visible items.\n * This centers the visible items using the precomputed space between the last\n * visible item and the end of the container.\n *\n * (This shift uses the left margin, so all values are shifting to the right.\n * Most of the time, this number will be negative, since it is shifting the slider\n * to the left. The very first page may shift to the right, since it needs to\n * center the first item.)\n */\n const sliderOffset = rangesTrailingSpace[selectedIndex] / 2 - offset;\n\n\n const onMove = useCallback((isTouch = false) => (e) => {\n if (!isClicked) return;\n\n setMovedBy((isTouch ? e.touches[0].clientX : e.clientX ) - containerRef.current.offsetLeft - clickPos);\n }, [isClicked, clickPos]);\n\n const onMouseUp = useCallback(() => {\n setDraggableClick(false);\n if (Math.abs(movedBy) > 10) {\n if (movedBy < 0) {\n setSelectedIndex(pageRanges.length >= selectedIndex + 1 ? selectedIndex + 1 : selectedIndex);\n } else {\n setSelectedIndex(0 <= selectedIndex - 1 ? selectedIndex - 1 : selectedIndex);\n }\n setMovedBy(0);\n }\n }, [movedBy, pageRanges.length, selectedIndex]);\n\n const onMouseDown = useCallback((isTouch = false) => (e) => {\n e.preventDefault();\n setDraggableClick(true);\n const downPos = isTouch ? e.touches[0].clientX : e.clientX;\n\n setClickPos(downPos - containerRef.current.offsetLeft);\n }, []);\n \n return (\n \n \n \n {React.Children.map(children, (el, index) => (\n
\n \n );\n}\n\nPagedCarousel.propTypes = {\n gap: px.number,\n children: px.node,\n className: px.string,\n maxVisibleItems: px.number,\n};\n","import React, { useEffect, useRef } from 'react';\nimport px from 'prop-types';\n\nexport const withResize = (Component) => {\n function ResizeableComponent({ onResize, ...props }) {\n const ref = useRef(null);\n\n useEffect(() => {\n const el = ref.current;\n\n if (el == null) return;\n const observer = new ResizeObserver((entries) => {\n if (!entries.length) return;\n onResize(el);\n });\n\n observer.observe(el);\n onResize(el);\n return () => {\n observer.unobserve(el);\n };\n }, [onResize]);\n\n return \n {header ? (\n
\n \n \n );\n}\n\nModal.propTypes = {\n className: px.string,\n onClose: px.func,\n onConfirm: px.func,\n onOpen: px.func,\n header: px.node,\n confirmLabel: px.node,\n closeLabel: px.node,\n body: px.node,\n footer: px.node,\n showModal: px.bool,\n id: px.string,\n modalSize: px.string,\n children: px.node,\n noOptimization: px.bool,\n noDefaultButtons: px.bool,\n};\n","import React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { v4 } from 'uuid';\nimport * as PRODUCT from '~config/product';\nimport { useViewport } from 'Common/hooks';\nimport { Carousel, CarouselItem, Modal, MediaConverter } from 'Common/components/ui';\n\nconst NOOP = () => {};\n\nfunction ImageModalContent({ content, className } = {}) {\n const { type = 'image', src, selectedItem } = content || {};\n const viewport = useViewport();\n const isMobile = viewport.is.lt('lg');\n\n const imageResizeSearchQuery = React.useMemo(() => {\n return [\n `format=png`,\n isMobile ? 'height=450&width=550' : 'height=697&width=852',\n PRODUCT.TRANSFORM_PRODUCT_IMAGE_BACKGROUND ? 'transBg=true' : '',\n ]\n .filter(Boolean)\n .join('&');\n }, [isMobile]);\n\n return type === 'spin' ? (\n \n ) : (\n \n {header}\n {onClose && !noDefaultButtons ? (\n \n \n \n ) : null}\n
\n ) : null}\n {body ? {body}
: null}\n {footer || ((onConfirm || onClose) && !noDefaultButtons) ? (\n \n {footer}\n {onClose && !noDefaultButtons ? (\n \n {closeLabel}\n \n ) : null}\n {onConfirm && !noDefaultButtons ? (\n \n {confirmLabel}\n \n ) : null}\n
\n ) : null}\n \n {/* Main image (or video) */}\n {(!noGallery && noGalleryMobile) || !useImageModal ? (\n \n {items.map((m) =>\n m?.Url && ((m.MediaType === 'video' && m.ThumbnailUrl) || m.MediaType === 'image') ? (\n \n ) : carousel === 'react' ? (\n \n {items.map((item, i) => (\n \n ) : null}\n\n {/* Modal handling */}\n {useImageModal && (\n <>\n
\n );\n}\n\nProductGallery.propTypes = {\n allowImageZoom: px.bool,\n children: px.node,\n className: px.string,\n desktopBreakpoint: px.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),\n largeCarouselImages: px.bool,\n mainMedia: px.shape({\n MediaType: px.string,\n MediaGroup: px.string,\n Url: px.string,\n Thumbnail: px.string,\n FileType: px.string,\n Order: px.number,\n IsDefault: px.bool,\n }),\n media: px.arrayOf(\n px.shape({\n MediaType: px.string,\n MediaGroup: px.string,\n Url: px.string,\n Thumbnail: px.string,\n FileType: px.string,\n Order: px.number,\n IsDefault: px.bool,\n })\n ),\n noGallery: px.bool,\n onMainImageClick: px.func,\n onSelectImage: px.func,\n showGalleryMobile: px.bool,\n slidesToShow: px.number,\n useCarousel: px.oneOf([true, false, 'react', 'slick', 'react-paged']),\n useCarouselMobile: px.oneOf([true, false, 'react', 'slick', 'react-paged']),\n useImageModal: px.bool,\n useModalCarousel: px.bool,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { v4 } from 'uuid';\nimport { useTranslation, useViewport } from 'Common/hooks';\nimport * as STYLE from '~config/style';\n\nexport default function DropdownSelector({\n className,\n options = [],\n selectedValues = [],\n title = '',\n onSelect,\n outOfStockToolTip,\n notAvailableToolTip,\n disabledMap,\n definition = null,\n singleRowHeight = `${STYLE.FILTER_COLAPSED_ROW_HEIGHT ?? 42}px`,\n}) {\n const viewport = useViewport();\n const optionsRef = React.useRef(null);\n const id = React.useRef(`dropdown_${v4()}`);\n const lblExpand = useTranslation('Commerce.Product.Selector.Expand.Label');\n const lblHide = useTranslation('Commerce.Product.Selector.Hide.Label');\n const [expanded, setExpanded] = React.useState(true);\n const [expandedAll, setExpandedAll] = React.useState(false);\n const [hidden, setHidden] = React.useState(false);\n\n const optionIsDisabled = React.useCallback(\n ({ value } = {}) =>\n disabledMap && (disabledMap === true || disabledMap[value]?.isDisabled || !disabledMap[value]?.isValid),\n [disabledMap]\n );\n\n const onClick = React.useCallback((value) => (onSelect ? () => onSelect(value) : null), [onSelect]);\n\n const updateHeight = React.useCallback(() => {\n if (optionsRef.current) {\n optionsRef.current.style.height = expandedAll ? `${optionsRef.current.scrollHeight}px` : singleRowHeight;\n }\n }, [expandedAll, singleRowHeight]);\n\n React.useEffect(() => {\n updateHeight();\n }, [expandedAll, singleRowHeight, options, updateHeight]);\n\n React.useEffect(() => {\n const optionsContainer = optionsRef.current?.children[0];\n const children = optionsContainer?.children || [];\n\n for (let i = 0, l = children.length; i < l; i++) {\n if (i > 0 && children[i - 1].offsetTop < children[i].offsetTop) {\n setHidden(true);\n return;\n }\n }\n setHidden(false);\n }, [viewport, options]);\n\n React.useEffect(() => {\n const observer = new MutationObserver(updateHeight);\n\n if (optionsRef.current) {\n observer.observe(optionsRef.current, {\n childList: true,\n subtree: true,\n attributes: true,\n attributeFilter: ['style', 'class'],\n });\n }\n return () => {\n observer.disconnect();\n };\n }, [updateHeight]);\n\n const buttonTitle = React.useCallback(\n (value) => {\n if (disabledMap && (disabledMap[value]?.isDisabled || !disabledMap[value]?.isValid))\n return notAvailableToolTip;\n else if (disabledMap && !disabledMap[value]?.hasStock) return outOfStockToolTip;\n\n return value;\n },\n [outOfStockToolTip, notAvailableToolTip, disabledMap]\n );\n\n return (\n \n \n
\n ) : null\n )}\n \n setExpanded(!expanded)}\n >\n
\n \n );\n}\n\nDropdownSelector.propTypes = {\n className: px.string,\n title: px.string,\n options: px.arrayOf(px.shape({ label: px.string, value: px.string })),\n selectedValues: px.arrayOf(px.oneOfType([px.string, px.number])),\n outOfStockToolTip: px.string,\n notAvailableToolTip: px.string,\n disabledMap: px.objectOf(px.object),\n onSelect: px.func,\n definition: px.node,\n singleRowHeight: px.string,\n};\n","export const FILTER_COLAPSED_ROW_HEIGHT = 42;\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { v4 } from 'uuid';\nimport { useTranslation } from 'Common/hooks';\n\nexport default function DropdownMenuSelector({\n className,\n options = [],\n selectedValues = [],\n title = '',\n onSelect,\n outOfStockToolTip,\n notAvailableToolTip,\n disabledMap,\n definition = null,\n}) {\n const id = React.useRef(`dropdownmenu_${v4()}`);\n const lblChoose = useTranslation('Commerce.Product.Selector.Choose.Label');\n\n const optionIsDisabled = React.useCallback(\n (value) =>\n disabledMap && (disabledMap === true || disabledMap[value]?.isDisabled || !disabledMap[value]?.isValid),\n [disabledMap]\n );\n\n const onClick = React.useCallback(\n (value) =>\n onSelect\n ? (e) => {\n e.preventDefault();\n onSelect(value);\n }\n : null,\n [onSelect]\n );\n\n const additionalLabel = React.useCallback(\n (value) => {\n if (disabledMap && (disabledMap[value]?.isDisabled || !disabledMap[value]?.isValid))\n return ` (${notAvailableToolTip})`;\n else if (disabledMap && !disabledMap[value]?.hasStock) return ` (${outOfStockToolTip})`;\n\n return '';\n },\n [outOfStockToolTip, notAvailableToolTip, disabledMap]\n );\n\n const buttonTitle = React.useCallback((value) => `${value}${additionalLabel(value)}`, [additionalLabel]);\n\n return (\n \n
\n \n {title}
\n \n\n \n setExpandedAll(!expandedAll)}\n aria-label={expandedAll ? lblHide : lblExpand}\n title={expandedAll ? lblHide : lblExpand}\n >\n \n \n ) : null}\n
\n \n {options.map((option) => (\n \n
\n {hidden ? (\n {option.label}
\n \n ))}\n {definition ? (\n\n
\n ) : null}\n {definition}
\n\n
\n );\n}\n\nDropdownMenuSelector.propTypes = {\n className: px.string,\n title: px.string,\n options: px.arrayOf(px.shape({ label: px.string, value: px.string })),\n selectedValues: px.arrayOf(px.oneOfType([px.string, px.number])),\n outOfStockToolTip: px.string,\n notAvailableToolTip: px.string,\n disabledMap: px.objectOf(px.object),\n onSelect: px.func,\n definition: px.node,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { useViewport, useTranslation } from 'Common/hooks';\nimport $ from 'jquery';\n\nfunction Swatch({ option, colorValues }) {\n const colorValue = React.useMemo(() => colorValues.find((v) => v.value === option.value), [option, colorValues]);\n\n if (colorValue?.uri) {\n return (\n {title}
\n\n \n {selectedValues[0] ? buttonTitle(selectedValues[0]) : lblChoose}\n \n
\n {definition ? (\n \n {options.map((option) => (\n \n {`${option.label}${additionalLabel(option.value)}`}\n \n ))}\n
\n \n
\n ) : null}\n {definition}
\n\n
\n {definition ? (\n \n {title}\n {selectedValues.length === 1 && selectedValues[0] ? selectedValues : null}\n
\n\n \n setExpanded(!expanded)}\n aria-label={expanded ? lblHide : lblExpand}\n title={expanded ? lblHide : lblExpand}\n >\n \n \n ) : null}\n
\n \n {options.map((option) => (\n \n
\n {hidden ? (\n \n
\n ) : null}\n \n );\n}\n\nColorSelector.propTypes = {\n className: px.string,\n options: px.arrayOf(px.shape({ label: px.string, value: px.string })),\n colorValues: px.arrayOf(px.object),\n selectedValues: px.arrayOf(px.oneOfType([px.string, px.number])),\n title: px.string,\n onSelect: px.func,\n outOfStockToolTip: px.string,\n notAvailableToolTip: px.string,\n disabledMap: px.objectOf(px.object),\n definition: px.node,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { v4 } from 'uuid';\nimport { useViewport, useTranslation } from 'Common/hooks';\n\nexport default function CheckboxSelector({\n className,\n options = [],\n selectedValues = [],\n title = '',\n onSelect,\n disabledMap,\n outOfStockToolTip,\n notAvailableToolTip,\n definition = null,\n}) {\n const viewport = useViewport();\n const optionsRef = React.useRef(null);\n const id = React.useRef(`checkbox_${v4()}`);\n const lblExpand = useTranslation('Commerce.Product.Selector.Expand.Label');\n const lblHide = useTranslation('Commerce.Product.Selector.Hide.Label');\n const [expanded, setExpanded] = React.useState(false);\n const [hidden, setHidden] = React.useState(false);\n\n const buttonTitle = React.useCallback(\n (value) => {\n if (disabledMap && (disabledMap[value]?.isDisabled || !disabledMap[value]?.isValid))\n return notAvailableToolTip;\n else if (disabledMap && !disabledMap[value]?.hasStock) return outOfStockToolTip;\n\n return value;\n },\n [outOfStockToolTip, notAvailableToolTip, disabledMap]\n );\n\n const optionIsDisabled = React.useCallback(\n ({ value } = {}) =>\n disabledMap && (disabledMap === true || disabledMap[value]?.isDisabled || !disabledMap[value]?.isValid),\n [disabledMap]\n );\n\n const onClick = React.useCallback((value) => (onSelect ? () => onSelect(value) : null), [onSelect]);\n\n React.useEffect(() => {\n optionsRef.current.style.height = expanded\n ? `${optionsRef.current.children[0]?.getBoundingClientRect()?.height}px`\n : '21px';\n }, [expanded]);\n\n React.useEffect(() => {\n const optionsContainer = optionsRef.current.children[0];\n const children = optionsContainer?.children || [];\n\n for (let i = 0, l = children.length; i < l; i++) {\n if (i > 0 && children[i - 1].offsetTop < children[i].offsetTop) {\n setHidden(true);\n return;\n }\n }\n setHidden(false);\n }, [viewport, options]);\n\n return (\n {definition}
\n\n
\n {hidden ? (\n {title}
\n\n
\n \n {options.map((option) => (\n \n \n \n {option.label}\n \n
\n ))}\n \n
\n ) : null}\n \n );\n}\n\nCheckboxSelector.propTypes = {\n definition: px.node,\n className: px.string,\n options: px.arrayOf(px.shape({ label: px.string, value: px.string })),\n selectedValues: px.arrayOf(px.oneOfType([px.string, px.number])),\n title: px.string,\n onSelect: px.func,\n outOfStockToolTip: px.string,\n notAvailableToolTip: px.string,\n disabledMap: px.objectOf(px.object),\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { v4 } from 'uuid';\nimport { useTranslation, useViewport } from 'Common/hooks';\n\nexport default function RadioSelector({\n className,\n options = [],\n selectedValues = [],\n title = '',\n onSelect,\n outOfStockToolTip,\n notAvailableToolTip,\n disabledMap,\n definition = null,\n}) {\n const viewport = useViewport();\n const optionsRef = React.useRef(null);\n const id = React.useRef(`radio_${v4()}`);\n const lblExpand = useTranslation('Commerce.Product.Selector.Expand.Label');\n const lblHide = useTranslation('Commerce.Product.Selector.Hide.Label');\n const [expanded, setExpanded] = React.useState(false);\n const [hidden, setHidden] = React.useState(false);\n\n const optionIsDisabled = React.useCallback(\n ({ value } = {}) =>\n disabledMap && (disabledMap === true || disabledMap[value]?.isDisabled || !disabledMap[value]?.isValid),\n [disabledMap]\n );\n\n const onClick = React.useCallback((value) => (onSelect ? () => onSelect(value) : null), [onSelect]);\n\n const buttonTitle = React.useCallback(\n (value) => {\n if (disabledMap && (disabledMap[value]?.isDisabled || !disabledMap[value]?.isValid))\n return notAvailableToolTip;\n else if (disabledMap && !disabledMap[value]?.hasStock) return outOfStockToolTip;\n\n return value;\n },\n [outOfStockToolTip, notAvailableToolTip, disabledMap]\n );\n\n React.useEffect(() => {\n optionsRef.current.style.height = expanded\n ? `${optionsRef.current.children[0]?.getBoundingClientRect()?.height}px`\n : '21px';\n }, [expanded]);\n\n React.useEffect(() => {\n const optionsContainer = optionsRef.current?.children[0];\n const children = optionsContainer?.children || [];\n\n for (let i = 0, l = children.length; i < l; i++) {\n if (i > 0 && children[i - 1].offsetTop < children[i].offsetTop) {\n setHidden(true);\n return;\n }\n }\n setHidden(false);\n }, [viewport, options]);\n\n return (\n {definition}
\n\n
\n {hidden ? (\n {title}
\n\n
\n \n {options.map((option) => (\n \n \n \n {option.label}\n \n
\n ))}\n \n
\n ) : null}\n \n );\n}\n\nRadioSelector.propTypes = {\n className: px.string,\n options: px.arrayOf(px.shape({ label: px.string, value: px.string })),\n selectedValues: px.arrayOf(px.oneOfType([px.string, px.number])),\n title: px.string,\n onSelect: px.func,\n outOfStockToolTip: px.string,\n notAvailableToolTip: px.string,\n disabledMap: px.objectOf(px.object),\n definition: px.node,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { v4 } from 'uuid';\n\nexport default function ButtonSelector({\n className,\n options = [],\n selectedValues = [],\n title = '',\n onSelect,\n outOfStockToolTip,\n notAvailableToolTip,\n disabledMap = {},\n definition = null,\n}) {\n const id = React.useRef(`button_${v4()}`);\n\n const optionIsDisabled = React.useCallback(\n ({ value } = {}) =>\n disabledMap && (disabledMap === true || disabledMap[value]?.isDisabled || !disabledMap[value]?.isValid),\n [disabledMap]\n );\n\n const onClick = React.useCallback((value) => (onSelect ? () => onSelect(value) : null), [onSelect]);\n\n const buttonTitle = React.useCallback(\n (value) => {\n if (disabledMap && (disabledMap[value]?.isDisabled || !disabledMap[value]?.isValid))\n return notAvailableToolTip;\n else if (disabledMap && !disabledMap[value]?.hasStock) return outOfStockToolTip;\n\n return value;\n },\n [outOfStockToolTip, notAvailableToolTip, disabledMap]\n );\n\n return (\n {definition}
\n\n
\n );\n}\n\nButtonSelector.propTypes = {\n className: px.string,\n options: px.arrayOf(px.shape({ label: px.string, value: px.string })),\n selectedValues: px.arrayOf(px.oneOfType([px.string, px.number])),\n title: px.string,\n onSelect: px.func,\n outOfStockToolTip: px.string,\n notAvailableToolTip: px.string,\n disabledMap: px.objectOf(px.object),\n definition: px.node,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport * as types from 'Common/types';\nimport DropdownSelector from './DropdownSelector';\nimport DropdownMenuSelector from './DropdownMenuSelector';\nimport ColorSelector from './ColorSelector';\nimport CheckboxSelector from './CheckboxSelector';\nimport RadioSelector from './RadioSelector';\nimport ButtonSelector from './ButtonSelector';\nimport { useTranslation } from 'Common/hooks';\n\nexport const SELECTORS = {\n 'color-1-single': {\n Comp: ColorSelector,\n props: (facet, onChange, outOfStockToolTip, notAvailableToolTip) => ({\n onSelect: onChange,\n options: facet.FacetValues.map((v) => ({ label: v.Label, value: v.Value })),\n colorValues: facet.FacetColors.map((c) => ({ value: c.Name, uri: c.Swatch, hex: c.Hex })),\n selectedValues: facet.FacetValues.filter((v) => v.Selected).map((v) => v.Value),\n title: facet.AttributeFacetLabel || facet.DisplayName || facet.AttributeDisplayName || facet.Attribute,\n definition: facet.AttributeDefinition,\n notAvailableToolTip: notAvailableToolTip,\n outOfStockToolTip: outOfStockToolTip,\n }),\n },\n 'cbl-single': {\n Comp: CheckboxSelector,\n props: (facet, onChange, outOfStockToolTip, notAvailableToolTip) => ({\n onSelect: onChange,\n options: facet.FacetValues.map((v) => ({ label: v.Label, value: v.Value })),\n selectedValues: facet.FacetValues.filter((v) => v.Selected).map((v) => v.Value),\n title: facet.AttributeFacetLabel || facet.DisplayName || facet.AttributeDisplayName || facet.Attribute,\n definition: facet.AttributeDefinition,\n outOfStockToolTip: outOfStockToolTip,\n notAvailableToolTip: notAvailableToolTip,\n }),\n },\n 'rbl-single': {\n Comp: RadioSelector,\n props: (facet, onChange, outOfStockToolTip, notAvailableToolTip) => ({\n onSelect: onChange,\n options: facet.FacetValues.map((v) => ({ label: v.Label, value: v.Value })),\n selectedValues: facet.FacetValues.filter((v) => v.Selected).map((v) => v.Value),\n title: facet.AttributeFacetLabel || facet.DisplayName || facet.AttributeDisplayName || facet.Attribute,\n definition: facet.AttributeDefinition,\n notAvailableToolTip: notAvailableToolTip,\n outOfStockToolTip: outOfStockToolTip,\n }),\n },\n 'bl-single': {\n Comp: ButtonSelector,\n props: (facet, onChange, outOfStockToolTip, notAvailableToolTip) => ({\n onSelect: onChange,\n options: facet.FacetValues.map((v) => ({ label: v.Label, value: v.Value })),\n selectedValues: facet.FacetValues.filter((v) => v.Selected).map((v) => v.Value),\n title: facet.AttributeFacetLabel || facet.DisplayName || facet.AttributeDisplayName || facet.Attribute,\n definition: facet.AttributeDefinition,\n notAvailableToolTip: notAvailableToolTip,\n outOfStockToolTip: outOfStockToolTip,\n }),\n },\n 'ddl-single': {\n Comp: DropdownSelector,\n props: (facet, onChange, outOfStockToolTip, notAvailableToolTip) => ({\n onSelect: onChange,\n options: facet.FacetValues.map((v) => ({ label: v.Label, value: v.Value })),\n selectedValues: facet.FacetValues.filter((v) => v.Selected).map((v) => v.Value),\n title: facet.AttributeFacetLabel || facet.DisplayName || facet.AttributeDisplayName || facet.Attribute,\n definition: facet.AttributeDefinition,\n notAvailableToolTip: notAvailableToolTip,\n outOfStockToolTip: outOfStockToolTip,\n }),\n },\n 'ddm-single': {\n Comp: DropdownMenuSelector,\n props: (facet, onChange, outOfStockToolTip, notAvailableToolTip) => ({\n onSelect: onChange,\n options: facet.FacetValues.map((v) => ({ label: v.Label, value: v.Value })),\n selectedValues: facet.FacetValues.filter((v) => v.Selected).map((v) => v.Value),\n title: facet.AttributeFacetLabel || facet.DisplayName || facet.AttributeDisplayName || facet.Attribute,\n definition: facet.AttributeDefinition,\n notAvailableToolTip: notAvailableToolTip,\n outOfStockToolTip: outOfStockToolTip,\n }),\n },\n default: {\n Comp: () => null,\n props: () => ({}),\n },\n};\n\nexport default function FacetFilter({ className, facet, disabled, onSelect, extraProps }) {\n const outOfStockToolTip = useTranslation('FacetFilter.Value.OutOfStock.ToolTip');\n const notAvailableToolTip = useTranslation('FacetFilter.Value.NotAvailable.ToolTip');\n const onChange = React.useCallback(\n (value) =>\n onSelect(\n facet,\n facet.FacetValues.find((v) => v.Value === value)\n ),\n [facet, onSelect]\n );\n\n const selector = React.useMemo(\n () => SELECTORS[facet.SelectorControlType || facet.SelectorType] || SELECTORS.default,\n [facet]\n );\n\n const props = React.useMemo(() => selector.props(facet, onChange, outOfStockToolTip, notAvailableToolTip), [\n selector,\n facet,\n onChange,\n outOfStockToolTip,\n notAvailableToolTip,\n ]);\n\n return (\n {title}
\n\n {options.map((option) => (\n \n {option.label}\n \n ))}\n
\n {definition ? (\n \n
\n ) : null}\n {definition}
\n\n
\n );\n}\n\nFacetFilter.propTypes = {\n className: px.string,\n facet: types.Facet,\n onSelect: px.func,\n onUpdate: px.func,\n disabled: px.oneOfType([px.bool, px.object]),\n extraProps: px.object,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { v4 } from 'uuid';\nimport { Translation } from 'Common/components/localization';\n\nexport default function ChildrenSelector({\n className,\n productChildren = [],\n selectedChild = null,\n onSelect,\n skuLabel,\n}) {\n const id = React.useRef(`childselector_${v4()}`);\n const [expanded, setExpanded] = React.useState(false);\n const options = React.useMemo(\n () =>\n productChildren.map((c) => ({\n name: c.DisplayName,\n code: c.Code,\n isDisabled: c.StockStatus === 'InStock' ? false : true,\n title: c.StockStatusLabel,\n })),\n [productChildren]\n );\n\n const onSelectChild = React.useCallback(\n (value) => (onSelect ? onSelect(productChildren.find((c) => c.Code === value)) : null),\n [onSelect, productChildren]\n );\n\n React.useEffect(() => {\n function onWindowClick() {\n if (expanded) setExpanded(false);\n }\n\n window.addEventListener('click', onWindowClick);\n return () => window.removeEventListener('click', onWindowClick);\n }, [expanded]);\n\n return (\n \n
\n );\n}\n\nChildrenSelector.propTypes = {\n className: px.string,\n productChildren: px.arrayOf(px.shape({ DisplayName: px.string, Code: px.string })),\n selectedChild: px.shape({ Code: px.string }),\n onSelect: px.func,\n skuLabel: px.string,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { Translation } from 'Common/components/localization';\nimport * as types from 'Common/types';\nimport { FacetFilter, ChildrenSelector } from 'Common/components/ui';\n\nexport default function ProductOptions({\n clearFacets,\n className,\n currentChildren,\n disabledFacets,\n facets,\n optionLabel,\n onFacetSelect,\n onSelectChild,\n productChildren,\n productCode,\n selectedChild,\n skuLabel,\n extraFacetProps,\n}) {\n const [showClearFacets, setShowClearFacets] = React.useState(false);\n\n React.useEffect(() => {\n if (\n facets.find((facet) => facet.FacetValues.find((value) => value.Selected)) &&\n facets.length > 1 &&\n productChildren?.length > 1\n )\n setShowClearFacets(true);\n else setShowClearFacets(false);\n }, [facets, productChildren]);\n\n const autoSelectFacet = React.useCallback(() => {\n for (let facet of facets) {\n if (\n Object.values(disabledFacets[facet.Attribute])?.filter((map) => map.hasStock && !map.isDisabled)\n ?.length === 1\n ) {\n const value = facet.FacetValues.find(\n (v) =>\n disabledFacets[facet.Attribute][v.Value].hasStock &&\n !disabledFacets[facet.Attribute][v.Value].isDisabled &&\n !v.Selected\n );\n\n if (value) {\n onFacetSelect(facet, value);\n }\n }\n }\n }, [currentChildren, disabledFacets, facets, onFacetSelect, onSelectChild, productChildren, productCode]);\n\n React.useEffect(() => {\n if (\n !facets?.length &&\n productChildren?.length === 1 &&\n (selectedChild == null || productChildren[0].Code !== selectedChild.Code)\n ) {\n onSelectChild(productChildren[0]);\n } else {\n autoSelectFacet();\n }\n }, [facets, onSelectChild, productChildren, autoSelectFacet, selectedChild]);\n\n return (\n \n setExpanded(!expanded)}\n >\n
\n \n
\n \n \n
\n
\n \n {options.map((option) => (\n onSelectChild(option.code)}\n disabled={option.isDisabled}\n title={option.title}\n >\n
\n \n {option.name}\n
\n\n
\n {facets?.length ? (\n facets.map((facet) => (\n
\n );\n}\n\nProductOptions.propTypes = {\n currentChildren: px.arrayOf(types.Product),\n className: px.string,\n clearFacets: px.func,\n disabledFacets: px.object,\n facets: px.arrayOf(px.object),\n optionLabel: px.string,\n onFacetSelect: px.func,\n onSelectChild: px.func,\n productChildren: px.arrayOf(types.Product),\n productCode: px.string,\n selectedChild: px.object,\n skuLabel: px.string,\n extraFacetProps: px.object,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { Formatter } from 'Common/utils';\n\n/**\n *\n * Displays product price based on optional params of quantity and range.\n * Displays sale price if applicable.\n * Optionally transforms backend product price properties.\n */\nexport default function ProductPrice({\n className,\n priceInfo,\n quantity,\n defaultPrice,\n noRanges = false,\n multiplyByQuantity = false,\n skipPriceTransform = false,\n}) {\n const price = React.useMemo(\n () =>\n priceInfo ? getProductPrice(priceInfo, quantity, multiplyByQuantity, !noRanges, skipPriceTransform) : null,\n [priceInfo, quantity, noRanges, multiplyByQuantity, skipPriceTransform]\n );\n\n return (\n \n
\n );\n}\n\nfunction getQuantitySalePrice(quantitySalePrices, quantity) {\n const quantityOptions = Object.keys(quantitySalePrices);\n let salePrice = quantitySalePrices[quantityOptions[0]];\n\n for (const option of quantityOptions.slice(1)) {\n if (quantity < parseInt(option, 10)) {\n break;\n }\n salePrice = quantitySalePrices[option];\n }\n\n return salePrice.Amount;\n}\n\nfunction getProductPrice(priceInfo, quantity, multiplyByQuantity, useRange, skipPriceTransform) {\n if (skipPriceTransform) return priceInfo;\n\n const factor = multiplyByQuantity ? quantity : 1;\n const salePrice = priceInfo.useQtySalePrice\n ? getQuantitySalePrice(priceInfo.price.QtySalePrices, quantity)\n : priceInfo.salePrice;\n\n const qtySale = priceInfo.useQtySalePrice ? salePrice * factor : 0;\n\n let retail = useRange\n ? [priceInfo.price?.MinListPrice.Amount * factor, priceInfo.price?.MaxListPrice.Amount * factor]\n : priceInfo.price?.ListPrice.Amount * factor;\n\n let sale = useRange\n ? [priceInfo.price?.MinSalePrice.Amount * factor, priceInfo.price?.MaxSalePrice.Amount * factor]\n : salePrice * factor;\n\n if (qtySale && (Array.isArray(sale) ? Math.max(...sale) : sale) > qtySale) {\n sale = useRange ? [sale[0], qtySale] : qtySale;\n }\n\n if (useRange) {\n retail = quantity ? (!retail[1] || retail[0] === retail[1] ? retail[0] : retail) : retail;\n sale = quantity ? (!sale[1] || sale[0] === sale[1] ? sale[0] : sale) : sale;\n }\n\n const retailStr = retail ? Formatter.currency(retail, priceInfo.price?.ListPrice?.Currency) : '';\n const saleStr =\n (Array.isArray(sale) && sale.every((s) => typeof s === 'number' && s >= 0)) ||\n (typeof sale === 'number' && sale >= 0)\n ? Formatter.currency(sale, priceInfo.price?.SalePrice.Currency)\n : '';\n\n const maxSale = Array.isArray(sale) ? sale[1] || sale[0] : sale;\n const maxRetail = Array.isArray(retail) ? retail[1] || retail[0] : retail;\n\n if (!maxSale && !maxRetail) return null;\n if (retailStr === saleStr) return { price: saleStr };\n if (maxSale < 0) return { price: retailStr };\n return { price: retailStr, reducedPrice: saleStr };\n}\n\nProductPrice.propTypes = {\n className: px.string,\n defaultPrice: px.string,\n priceInfo: px.object,\n quantity: px.oneOfType([px.string, px.number]),\n multiplyByQuantity: px.bool,\n noRanges: px.bool,\n skipPriceTransform: px.bool,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Translation } from 'Common/components/localization';\n\nexport default function ChildDetail({ className, currentItemStatus, productCode, productTypeId }) {\n const showDetail = React.useMemo(\n () =>\n productTypeId === 'Product'\n ? currentItemStatus && currentItemStatus?.code !== productCode\n : currentItemStatus?.code === productCode,\n [currentItemStatus, productCode, productTypeId]\n );\n\n const showDivider = React.useMemo(() => currentItemStatus?.statusDisplayName && currentItemStatus?.code, [\n currentItemStatus,\n ]);\n\n return showDetail ? (\n {price?.price || defaultPrice}
\n {price?.reducedPrice ? (\n{price?.reducedPrice}
\n ) : null}\n\n {currentItemStatus.statusDisplayName}\n {showDivider ? ' | ' : null}\n
\n {children}\n {message}\n {clickDismiss ?
\n \n ) : null;\n}\n\nAlertTip.propTypes = {\n className: px.string,\n timestamp: px.number,\n children: px.node,\n message: px.string,\n hidden: px.bool,\n level: px.oneOf(['info', 'success', 'danger']),\n timeout: px.number,\n placement: px.oneOf(['top', 'right', 'bottom', 'left']),\n clickDismiss: px.bool,\n removeFromDomWhenInactive: px.bool,\n};\n","export default {\n isDisplayOnly: (productInfo) => productInfo?.StockStatus === 'DisplayOnly',\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { GTM } from 'Common/utils';\nimport { useViewport, useTranslation, useOrderRequestState } from 'Common/hooks';\nimport { Product } from 'Common/types';\nimport { Translation } from '../localization';\nimport { NumberInput, PureTip } from '../ui';\nimport { ProductInfo } from 'Common/models';\n\nexport default function ProductInput({\n addToCartLabel = 'Form.Button.AddToCart.Label',\n allowZeroQty = false,\n bibProdInput,\n checkoutPageLink,\n children,\n className,\n currentChildren,\n currentItemStatus,\n disabled = false,\n gtmListValue,\n hideWhenOOS = false,\n isUserAuthenticated,\n itemCodes = [],\n minQuantity = 1,\n noBuyNow = false,\n noSidePadding = false,\n numInputButtons = false,\n onAddToCart,\n onQuantityChange,\n paddingValue = 1,\n productInfo,\n productRecommendationId = null,\n quantity,\n reverseButtonOrder = false,\n skipGtmImpression = false,\n statusTooltip,\n totalQty = 0,\n}) {\n const viewport = useViewport();\n const addToCartToolTip = useTranslation('Form.Button.AddToCart.ToolTip.Label');\n const buyNowToolTip = useTranslation('Form.Button.BuyNow.ToolTip.Label');\n const cartIsUpdating = useOrderRequestState();\n const [isLoading, setIsLoading] = React.useState(false);\n const [addToCartTip, setAddToCartTip] = React.useState({\n timestamp: 0,\n message: null,\n hidden: true,\n });\n\n const isDisplayOnly = ProductInfo.isDisplayOnly(productInfo);\n\n const [buyNowTip, setBuyNowTip] = React.useState({\n timestamp: 0,\n message: null,\n hidden: true,\n });\n\n const buttonsDisabled = React.useMemo(\n () => disabled || (!allowZeroQty && (!currentItemStatus?.hasStock || !quantity)) || currentChildren.length > 1,\n [currentItemStatus, quantity, currentChildren, allowZeroQty, disabled]\n );\n\n const showTip = React.useCallback(\n (tip) => (viewport.is.touch && buttonsDisabled && tip ? () => alert(tip) : null),\n [viewport, buttonsDisabled]\n );\n\n const statusCallback = React.useCallback(\n (buyNow = false) =>\n statusTooltip\n ? (successMsg, validationIssues = [], params) => {\n const setter = buyNow ? setBuyNowTip : setAddToCartTip;\n const timestamp = Date.now();\n const placement = typeof statusTooltip === 'string' ? statusTooltip : undefined;\n\n if (successMsg && !buyNow) {\n setter({ message: successMsg, params, timestamp, placement, level: 'success' });\n } else if (!successMsg) {\n const lineItem = validationIssues?.find(\n (issue) => issue.RefType === 'LineItem' && itemCodes.includes(issue.Ref)\n )?.Issue;\n\n setter({ message: lineItem, timestamp, placement, level: 'danger' });\n } else {\n setter(null);\n }\n }\n : null,\n [statusTooltip, itemCodes]\n );\n\n const getGtmPayload = React.useCallback(\n () =>\n gtmListValue === 'Compared Item' ? (\n GTM.mapComparedItemToAddCart(\n productInfo,\n quantity,\n productInfo.CatalogEntity.Attributes,\n gtmListValue,\n totalQty + quantity\n )\n ) : (\n GTM.mapEntityToAddCart(\n productInfo.Code === currentItemStatus?.code\n ? productInfo\n : productInfo.Children.find((c) => c.Code === currentItemStatus?.code),\n quantity,\n productInfo.Attributes,\n gtmListValue,\n totalQty + quantity\n )\n ), [currentItemStatus?.code, gtmListValue, productInfo, quantity, totalQty]\n )\n \n const getImpressionPayload = React.useCallback(\n () =>\n gtmListValue === 'Compared Item' ? (\n GTM.mapComparedEntityToImpressions(\n productInfo, \n productInfo.Attributes, \n gtmListValue)\n ) : (\n GTM.mapEntityToImpressions(\n [\n productInfo.Code === currentItemStatus?.code\n ? productInfo\n : productInfo.Children.find((c) => c.Code === currentItemStatus?.code),\n ],\n gtmListValue\n )\n ), [currentItemStatus?.code, gtmListValue, productInfo]\n )\n\n const addItem = React.useCallback(\n (buyNow = false) =>\n onAddToCart\n ? async () => {\n if (!skipGtmImpression) {\n const impressionPayload = getImpressionPayload();\n\n if (impressionPayload) GTM.updateDataLayer(impressionPayload);\n }\n\n const gtmPayload = getGtmPayload();\n\n setIsLoading(true);\n await onAddToCart(currentItemStatus?.code, quantity, {\n gtmPayload,\n rerouteLink: buyNow ? checkoutPageLink : null,\n statusCallback: statusCallback(buyNow),\n productRecommendationId,\n cartApiOptions: { expand: ['forms', 'ordertotals'], update: ['lineitems', 'promotions'] },\n });\n setIsLoading(false);\n }\n : null,\n [checkoutPageLink, currentItemStatus?.code, getGtmPayload, getImpressionPayload, onAddToCart, productRecommendationId, quantity, skipGtmImpression, statusCallback]\n );\n\n const onBuyNow = React.useMemo(\n () => (noBuyNow || !checkoutPageLink ? null : addItem(true)),\n [noBuyNow, checkoutPageLink, addItem]\n );\n\n const onAddItem = React.useMemo(() => addItem(), [addItem]);\n\n const btnsColSize = React.useMemo(\n () => (!onBuyNow && !onAddItem ? 0 : !onQuantityChange ? 12 : !numInputButtons && !viewport.is.mobile ? 10 : 9),\n [onBuyNow, onAddItem, numInputButtons, onQuantityChange, viewport]\n );\n\n const p = React.useMemo(\n () => ({ left: `pl-${paddingValue}`, right: `pr-${paddingValue}`, x: `px-${paddingValue}` }),\n [paddingValue]\n );\n\n return (\n \n \n {isDisplayOnly ? null : currentItemStatus.hasStock || !hideWhenOOS ? (\n <>\n {onQuantityChange ? (\n \n
\n ) : null}\n {bibProdInput && viewport.is.mobile ? null : !btnsColSize ? null : (\n {children}
\n ) : null}\n \n ) : (\n \n
\n )}\n \n \n );\n}\n\nProductInput.propTypes = {\n addToCartLabel: px.string,\n allowZeroQty: px.bool,\n bibProdInput: px.bool,\n checkoutPageLink: px.string,\n children: px.node,\n className: px.string,\n currentChildren: px.arrayOf(px.object),\n currentItemStatus: px.shape({\n hasStock: px.bool,\n statusDisplayName: px.string,\n code: px.string,\n }),\n disabled: px.bool,\n gtmListValue: px.string,\n hideWhenOOS: px.bool,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n itemCodes: px.arrayOf(px.string),\n minQuantity: px.number,\n noBuyNow: px.bool,\n noSidePadding: px.bool,\n numInputButtons: px.bool,\n onAddToCart: px.func,\n onQuantityChange: px.func,\n paddingValue: px.oneOf([1, 2, 3]),\n productInfo: Product,\n productRecommendationId: px.string,\n quantity: px.oneOfType([px.string, px.number]),\n reverseButtonOrder: px.bool,\n skipGtmImpression: px.bool,\n statusTooltip: px.oneOf([false, true, undefined, null, 'top', 'bottom', 'right', '']),\n totalQty: px.number,\n};\n","import px from 'prop-types';\nimport React, { useMemo } from 'react';\nimport cx from 'classnames';\n\n/**\n * Returns the properties of the first header row, if it exists.\n *\n * Returns `null` if the first header row does not exist.\n *\n * @param {ReactNode} children\n * @returns Properties for the first header row, if it exists. `null` if it does not exist.\n */\nfunction getHeaderProps(children) {\n return React.Children.map(children, (child) => {\n return child?.type === Header ? child?.props : null;\n }).filter(Boolean)[0];\n}\n\n/**\n * Computes the column widths for a grid based on its header properties.\n *\n * If `headerProps` is `null`, returns an array with a single element: `['repeat(1fr)']`.\n * @param {*} headerProps\n * @returns Array of column widths for the grid.\n */\nfunction getColumnWidths(headerProps) {\n if (headerProps == null) return ['1fr'];\n\n const validChildren = React.Children.toArray(headerProps.children).filter(Boolean);\n\n return validChildren\n .map((child) => {\n if (child?.type !== Cell) return null;\n return child?.props?.width ?? '1fr';\n })\n .filter(Boolean);\n}\n\nexport default function Grid({ children, className, style, ...props }) {\n const headerProps = getHeaderProps(children);\n const columnWidths = getColumnWidths(headerProps);\n const templateColumns = columnWidths.join(' ');\n\n return (\n \n \n
\n \n {React.Children.map(children, (child, index) => {\n if (!React.isValidElement(child)) return null;\n\n const childType = child.type;\n\n if (childType === Header || childType === Row || childType === Interrupter) {\n return React.cloneElement(child, {\n ...child.props,\n index,\n });\n } else {\n return child;\n }\n })}\n
\n );\n}\n\nGrid.propTypes = {\n children: px.node,\n className: px.string,\n style: px.string,\n};\n\nexport function Header({ children, index, ...props }) {\n const validChildren = React.Children.toArray(children).filter(Boolean);\n\n return validChildren.map((child, columnIndex) =>\n child?.type === Cell\n ? React.cloneElement(child, {\n ...props,\n header: true,\n rowIndex: index,\n columnIndex,\n })\n : child\n );\n}\n\nHeader.propTypes = {\n children: px.node,\n index: px.number,\n};\n\nexport function Row({ children, index, ...props }) {\n const validChildren = React.Children.toArray(children).filter(Boolean);\n\n return (\n \n {validChildren.map((child, columnIndex) =>\n child?.type === Cell\n ? React.cloneElement(child, {\n ...props,\n rowIndex: index,\n columnIndex,\n })\n : child\n )}\n
\n );\n}\n\nRow.propTypes = {\n index: px.number,\n children: px.node,\n};\n\nexport const Cell = React.forwardRef(function Cell(\n { children, rowIndex, columnIndex, header, interrupter, className, sticky, style: baseStyle, colSpan, ...props },\n ref\n) {\n const style = useMemo(\n () => ({\n ...baseStyle,\n gridColumn: colSpan ? `${columnIndex + 1} / span ${colSpan}` : columnIndex + 1,\n gridRow: rowIndex + 1,\n }),\n [baseStyle, rowIndex, columnIndex, colSpan]\n );\n\n return (\n \n
\n ) : null;\n}\n\nItemDetailsCard.propTypes = {\n itemData: px.object,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { ItemDetailsCard } from '.';\nimport Modal from '../ui/Modal';\n\nexport default function ItemDetailsModal({ \n closeModal, \n showModal,\n selectedChild, \n setShowModal \n}) {\n\n const closeClear = React.useCallback(() => {\n closeModal();\n setShowModal(false);\n }, [closeModal, setShowModal])\n\n const item = React.useMemo(() => showModal ? selectedChild : null, [selectedChild, showModal])\n\n return showModal ? (\n \n
\n \n {itemData.DisplayName}\n
\n \n
\n {itemContent?.map((a) => {\n return (\n \n
\n \n
\n {itemData.Code}
\n \n
\n \n
\n \n {itemData?.Price ? (\n <>\n {Formatter.currency(\n itemData?.Price?.ListPrice.Amount,\n itemData?.Price?.ListPrice.Currency\n )}\n \n ) : null}\n
\n \n
\n );\n })}\n \n
\n {a.value}
\n \n \n \n {!isMobile ? (\n \n | \n ) : null}\n \n | \n {!isMobile && isPriceExists ? (\n \n | \n ) : null}\n {disableItemDetails ? null : ( | )}\n \n \n {productChildren.map((child) => {\n const isOpen = selectedVariant === child.Code;\n\n return [\n handleVariantSelection(child)}>\n {!isMobile ? (\n | \n {child.Code}\n | \n ) : null}\n 45 ? child.DisplayName : null}\n >\n {child.DisplayName}\n | \n {isPriceExists && !isMobile ? (\n \n {child.Price.ListPrice.Amount > 0\n ? Formatter.currency(\n child.Price.ListPrice.Amount,\n child.Price.ListPrice.Currency\n )\n : null}\n | \n ) : (\n null\n )}\n {disableItemDetails ? null : (\n \n \n | \n )}\n \n
,\n ].filter(Boolean);\n })}\n \n {showModal && !disableItemDetails ? (\n
\n ) : null;\n}\n\nProductChildTable.propTypes = {\n disableItemDetails: px.bool,\n productChildren: px.arrayOf(\n px.object\n ),\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Url } from 'Common/utils';\nimport { useTranslation } from 'Common/hooks';\nimport Icon from '../Icon';\n\nexport const SERVICE = {\n facebook: 'Facebook',\n twitter: 'Twitter',\n email: 'Email',\n};\n\nexport function getUrl(service, shareLink, title = '', hashtags = '') {\n if (shareLink) {\n const { href } = Url.create(shareLink);\n\n switch (service) {\n case SERVICE.facebook:\n return `https://www.facebook.com/sharer.php?u=${encodeURIComponent(href)}`;\n case SERVICE.twitter:\n return `https://twitter.com/intent/tweet?text=${encodeURIComponent(\n title\n )}&url=${href}&hashtags=${encodeURIComponent(hashtags)}`;\n case SERVICE.email:\n return `mailto:?body=${encodeURIComponent(href)}`;\n }\n }\n return null;\n}\n\nexport default function SocialShare({\n className,\n service = SERVICE.facebook,\n link = '',\n name = '',\n hashtags = '',\n propagate = false,\n}) {\n const lblId = React.useMemo(() => `Social.${service}.Share.Label`, [service]);\n const lbl = useTranslation(lblId);\n const url = React.useMemo(() => getUrl(service, link, name, hashtags), [service, link, name, hashtags]);\n const onClick = React.useCallback(\n (e) => {\n if (!propagate) e.stopPropagation();\n },\n [propagate]\n );\n\n return url ? (\n \n
\n );\n}\n\nProductShare.propTypes = {\n siteId: px.string,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\n\nexport default function HTMLRender({ className, content }) {\n const innerRef = React.useRef();\n\n React.useEffect(() => {\n innerRef.current.innerHTML = content;\n }, [content]);\n\n return (\n \n
\n \n
\n );\n}\n\nHTMLRender.propTypes = {\n className: px.string,\n content: px.string,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport * as types from 'Common/types';\nimport { GTM as gtmUtil } from 'Common/utils';\nimport * as GTM from 'Common/constants/gtm';\nimport { Translation } from 'Common/components/localization';\nimport ProductOptions from './ProductOptions';\nimport ProductPrice from './ProductPrice';\nimport ChildDetail from './ChildDetail';\nimport ProductInput from './ProductInput';\nimport ProductRating from './ProductRating';\nimport ProductChildTable from './ProductChildTable';\nimport ProductShare from './ProductShare';\nimport { HTMLRender } from '../ui';\n\nexport default function ProductDetails({\n checkoutPageLink,\n className,\n clearFacets,\n currentChildren,\n currentHazmat,\n currentItemStatus,\n currentOversize,\n desktopBreakpoint = 'md',\n disabledFacets,\n facets,\n gtmListValue,\n includeDescription,\n isQuickView,\n isUserAuthenticated,\n itemStatusTooltip,\n Links,\n onAddItemToCart,\n onFacetSelect,\n onQuantityChange,\n onSelectChild,\n pageId,\n priceInfo,\n productChildren,\n productInfo,\n productRecommendationId,\n quantity,\n renderedInQuickView = false,\n returnPolicyUrl = null,\n reviewProviderEntityId,\n selectedChild,\n siteId,\n totalQty = 0,\n useChildTable,\n useSocialShare,\n writeReviewAnchor,\n}) {\n const currentChildRef = React.useRef();\n const showSpecificationsLink = React.useMemo(\n () =>\n productInfo?.Options?.SpecificationsLinkLabel &&\n productInfo.Options.ShowSpecifications?.toLowerCase() === 'true',\n [productInfo]\n );\n\n const displayOnly = React.useMemo(() => productInfo?.StockStatus === 'DisplayOnly', [productInfo]);\n\n const onShowSpecifications = React.useCallback(() => {\n const tabContents = document.getElementById(`${pageId}_content`).children;\n const contentTabs = document.getElementById(`${pageId}_tabs`).children;\n\n for (let i = 0, l = contentTabs.length; i < l; i++) {\n const tabContent = tabContents[i];\n const contentTab = contentTabs[i];\n\n if (tabContent.id.includes('Specifications')) {\n if (tabContent.classList.contains('active') && tabContent.classList.contains('show')) break;\n\n const tabLink = contentTab.getElementsByClassName('nav-link');\n\n tabLink.item(0).classList.add('active');\n tabContent.classList.add('active');\n tabContent.classList.add('show');\n } else if (tabContent.classList.contains('active') || tabContent.classList.contains('show')) {\n const tabLink = contentTab.getElementsByClassName('nav-link');\n\n tabLink.item(0).classList.remove('active');\n tabContent.classList.remove('active');\n tabContent.classList.remove('show');\n }\n }\n }, [pageId]);\n\n const itemCodes = React.useMemo(() => currentChildren?.map((c) => c.Code), [currentChildren]);\n\n React.useEffect(() => {\n if (currentChildren.length === 1) {\n const currentChildCode = currentChildren[0].Code;\n\n if (currentChildCode != currentChildRef.current) {\n const gtmPayload = gtmUtil.mapEntityToImpressions(currentChildren, GTM.TAGS.PDP);\n\n if (gtmPayload) gtmUtil.updateDataLayer(gtmPayload);\n currentChildRef.current = currentChildCode;\n }\n }\n }, [currentChildren]);\n\n return productInfo ? (\n \n Loading...\n
\n \n {!renderedInQuickView ? (\n
\n ) : null;\n}\n\nProductDetails.propTypes = {\n checkoutPageLink: px.string,\n className: px.string,\n clearFacets: px.func,\n currentChildren: px.arrayOf(px.object),\n currentHazmat: px.shape({\n code: px.string,\n description: px.string,\n }),\n currentItemStatus: px.shape({ hasStock: px.bool, statusDisplayName: px.string, code: px.string }),\n currentOversize: px.object,\n desktopBreakpoint: px.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),\n disabledFacets: px.object,\n facets: px.arrayOf(types.Facet),\n gtmListValue: px.string,\n includeDescription: px.bool,\n isQuickView: px.bool,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n itemStatusTooltip: px.oneOfType([px.string, px.bool]),\n Links: px.node,\n onAddItemToCart: px.func,\n onFacetSelect: px.func,\n onQuantityChange: px.func,\n onSelectChild: px.func,\n pageId: px.string,\n priceInfo: px.object,\n productChildren: px.arrayOf(px.object),\n productInfo: px.object,\n productRecommendationId: px.string,\n quantity: px.oneOfType([px.string, px.number]),\n renderedInQuickView: px.bool,\n reviewProviderEntityId: px.string,\n returnPolicyUrl: px.string,\n selectedChild: px.object,\n siteId: px.string,\n totalQty: px.number,\n useChildTable: px.bool,\n useSocialShare: px.bool,\n writeReviewAnchor: px.string,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport Spinner from './Spinner';\n\nexport default function Loader({ fitToContainer = false, className, noOverlay = false, ...props }) {\n return (\n \n {useChildTable ? null : (\n \n
\n )}\n\n {displayOnly ? null : (\n
\n {!renderedInQuickView && productInfo.Description && includeDescription ? (\n \n
\n )}\n\n {displayOnly ? null : (\n \n
\n ) : null}\n {currentOversize?.description ? (\n \n
\n \n
\n ) : null}\n {currentHazmat?.description ? (\n {currentOversize.description}
\n\n
\n ) : null}\n {productInfo.ItemStatus === 'Discontinued' || displayOnly ? null : (\n {currentHazmat.description}
\n{Links}
\n \n {useSocialShare ?
\n \n \n
\n ) : null}\n \n
\n );\n}\n\nRelatedProducts.propTypes = {\n className: px.string,\n relatedProducts: px.arrayOf(Product),\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\n\nexport default function ProductTitle({ className, productTitle = '', useLargeProductTitle }) {\n const targetRef = React.useRef();\n const [dimensions, setDimensions] = React.useState(null);\n\n React.useLayoutEffect(() => {\n if (targetRef.current) {\n const innerRef = targetRef.current;\n\n //set the dimensions when we first load\n setDimensions({\n height: innerRef.offsetHeight,\n });\n\n //use a resize observer (doesn't work in IE) to trigger a size change whenever the inner element resizes\n const resizeObserver = new ResizeObserver((observedEntries) => {\n setDimensions({\n height: observedEntries[0].target.offsetHeight,\n });\n });\n\n resizeObserver.observe(innerRef);\n\n return () => {\n resizeObserver.unobserve(innerRef);\n };\n }\n }, [productTitle, targetRef]);\n\n return (\n \n
\n {relatedProducts?.length ? (\n relatedProducts.map((product, index) => (\n //TODO: EDS-3143\n \n {/* eslint-disable-next-line react/jsx-no-target-blank */}\n \n
\n ))\n ) : relatedProducts ? null : (\n {product.DisplayName}
\n {product.Price ? (\n \n
\n )}\n {productTitle}
:{productTitle}
}\n \n );\n}\n\nProductTitle.propTypes = {\n className: px.string,\n productTitle: px.string,\n useLargeProductTitle: px.bool,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport ProductGallery from './ProductGallery';\nimport { ProductDetailsComponent as ProductDetails } from '~components/product';\nimport RelatedProducts from './RelatedProducts';\nimport ProductTitle from './ProductTitle';\nimport ProductBadge from './ProductBadge';\nimport { useViewport } from 'Common/hooks';\n\n\nexport default function ProductView({\n className,\n currentMarketingBadges,\n Details = ProductDetails,\n detailsProps = {},\n Gallery = ProductGallery,\n galleryProps = {},\n isQuickView=false,\n isUserAuthenticated,\n itemStatusTooltip,\n productTitle,\n Related = RelatedProducts,\n relatedProductProps = {},\n showRelatedEntries = false,\n useChildTable\n}) {\n\n const viewport = useViewport();\n const isMobile = React.useMemo(() => viewport.is.lt(galleryProps.desktopBreakpoint ?? 'md'), [viewport, galleryProps.desktopBreakpoint]);\n\n return (\n\n {!isMobile && !isQuickView ?(\n <>\n
\n )\n};\n\nProductView.propTypes = {\n className: px.string,\n currentMarketingBadges: px.arrayOf(px.string),\n Details: px.elementType,\n detailsProps: px.objectOf(px.any),\n Gallery: px.elementType,\n galleryProps: px.objectOf(px.any),\n isQuickView: px.bool,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n itemStatusTooltip: px.oneOfType([px.string, px.bool]),\n productTitle: px.string,\n Related: px.elementType,\n relatedProductProps: px.object,\n showRelatedEntries: px.bool,\n useChildTable: px.bool\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\n\nfunction Block({ c, h, w, mt }) {\n return ;\n}\n\nBlock.propTypes = {\n c: px.string,\n h: px.oneOfType([px.string, px.number]),\n w: px.oneOfType([px.string, px.number]),\n mt: px.string,\n};\n\nexport default function FakeQuickviewItem() {\n return (\n \n
\n \n
\n \n ) : (\n \n
\n )}\n \n
\n \n
\n \n
\n \n
\n );\n}\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport * as types from 'Common/types';\nimport { useTranslation } from 'Common/hooks';\nimport { ProductView } from '../product';\nimport { Loader } from '../ui';\nimport FakeQuickViewItem from './FakeQuickViewItem';\n\nexport default function CatalogQuickView({\n className,\n isUserAuthenticated,\n showRelatedProducts = false,\n Product = ProductView,\n productProps = {},\n onSetProduct,\n onClearProduct,\n loading = false,\n productData,\n variantData,\n children,\n onClose,\n checkoutPageLink,\n itemStatusTooltip,\n useRetailer = false,\n}) {\n const quickviewRef = React.useRef(null);\n const lblClose = useTranslation('Commerce.CatalogNode.QuickView.Close.Label');\n const scrollToRef = React.useCallback((ref) => {\n return setTimeout(() => {\n ref?.current?.scrollIntoView({\n block: 'start',\n behavior: 'smooth',\n });\n }, 300);\n }, []);\n\n React.useEffect(() => {\n const handler = scrollToRef(quickviewRef);\n\n if (onSetProduct) onSetProduct(productData, variantData);\n return () => {\n if (onClearProduct) onClearProduct();\n clearTimeout(handler);\n };\n }, [productData, onClearProduct, variantData, scrollToRef, onSetProduct]);\n\n console.log('quick component', useRetailer)\n\n return (\n \n \n {loading ? (\n <>\n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n {CTA && ctaModel ? (\n \n {QuickView && quick && i === quickIdx && !disableQuickView ? (\n \n ) : null\n )\n ) : isLoading ? (\n \n
\n )}\n {QuickView && quick && quickIdx >= cardProps.length ? (\n
\n {CTA && ctaModel ? (\n \n
\n ) : (\n \n
\n )}\n {QuickView && quick && quickIdx >= cardProps.length ? (\n \n
\n ) : null}\n \n
\n {showVariantImages ? (\n \n
\n ) : null}\n \n {!cols.length ? (\n \n
\n {getName(v)}
\n \n {showVariantImages ? (\n \n onQuantityChange(n, v.Code)}\n useStepBtns\n />\n
\n ) : (\n \n
\n \n );\n}\n\nProductListTable.propTypes = {\n facets: px.arrayOf(Facet),\n getName: px.func,\n id: px.string,\n NotifyMe: px.elementType,\n notifyProps: px.objectOf(px.any),\n onQuantityChange: px.func,\n onRowClick: px.func,\n quantities: px.objectOf(px.number),\n showVariantImages: px.bool,\n variants: px.arrayOf(Product),\n};\n","import { useMemo } from 'react';\n\nconst selectPrimary = (x) => x.IsDefault || x.MediaGroup === 'Primary';\nconst selectImage = (x) => x.MediaType === 'image';\nconst selectPrimaryImage = (x) => selectPrimary(x) && selectImage(x);\nconst first = (arr) => arr && arr[0];\nconst parseUrl = (url) => {\n if (url) {\n const [, ext] = url.match(/\\.([a-z]{3,4})(?:\\?.*)?$/i);\n\n return { MediaType: 'image', Url: url, FileType: ext };\n }\n return undefined;\n};\n\nexport default function useProductDetails(variant, product, opts = {}) {\n const { useFacets = false, includeDisplayOnlyFacets = false, salePrice = null } = useMemo(() => opts, [opts]);\n const attributes = useMemo(\n () =>\n (!product?.Facets || !useFacets\n ? variant?.Attributes?.filter((x) => x.IsSpecification)\n : includeDisplayOnlyFacets\n ? product?.Facets\n : product?.Facets?.filter((f) => !/^display/i.test(f.SelectorControlType))) || [],\n [useFacets, includeDisplayOnlyFacets, product, variant]\n );\n\n const details = useMemo(\n () => ({\n badges: [...new Set(variant?.MarketingBadges?.map((badge) => badge.toUpperCase()))],\n mainMedia:\n variant?.GalleryMedia?.find(selectPrimary) ??\n first(variant?.GalleryMedia) ??\n product?.GalleryMedia?.find(selectPrimary) ??\n first(product?.GalleryMedia),\n\n mainMediaImage:\n variant?.GalleryMedia?.find(selectPrimaryImage) ??\n variant?.GalleryMedia?.find(selectImage) ??\n parseUrl(variant?.DefaultImageUrl) ??\n product?.GalleryMedia?.find(selectPrimaryImage) ??\n product?.GalleryMedia?.find(selectImage) ??\n parseUrl(product?.DefaultImageUrl),\n priceInfo: {\n price: variant?.Price,\n salePrice: typeof salePrice === 'number' ? salePrice : variant?.Price?.SalePrice?.Amount,\n useQtySalePrice:\n variant?.Price?.QtySalePrices != null && Object.keys(variant?.Price?.QtySalePrices).length > 1,\n },\n stockStatus: {\n code: variant?.Code,\n statusDisplayName: variant?.StockStatusLabel,\n hasStock: variant?.StockStatus === 'InStock',\n },\n attributes: attributes.map(({ AttributeDisplayName, DisplayName, SelectorControlType }) => ({\n name: DisplayName || AttributeDisplayName,\n value:\n variant?.Attributes.find((x) => x.AttributeDisplayName === AttributeDisplayName)?.Values?.join(\n ', '\n ) ?? '',\n isDisplayOnly: /^display/i.test(SelectorControlType),\n })),\n }),\n [variant, product, attributes, salePrice]\n );\n\n return details;\n}\n","import * as types from './types';\nimport { Facet, FacetList } from '../../models';\n\nfunction updateDetails(state, withDetails) {\n return {\n ...state,\n details: state.details\n ? {\n ...state.details,\n ...withDetails(state.details),\n }\n : state.details,\n };\n}\n\nfunction updateProduct(state, withProduct) {\n return updateDetails(state, (details) => ({\n Product: {\n ...details.Product,\n ...withProduct(details.Product),\n },\n }));\n}\n\nexport default {\n [types.SET_SELECTED_CODE]: (state, selectedCode) => ({ ...state, selectedCode }),\n [types.ADD_PRODUCT_ENTRIES]: (state, products = []) => ({\n ...state,\n byId: products\n .reduce((a, p) => (p?.Children?.length ? a.concat(p, p.Children) : a.concat(p)), [])\n .reduce((o, p) => ({ ...o, [p.Code]: p }), state.byId),\n }),\n [types.UPDATE_PRODUCT_ENTRIES_QUANTITY]: (state, updates) => ({\n ...state,\n byId: {\n ...updates.reduce((o, u) => ({ ...o, [u.Code]: {...state.byId[u.Code], Quantity: u.Quantity} }), state.byId)\n }\n }),\n [types.SET_DETAILS]: (state, details) => ({\n ...state,\n details,\n selectedCode: details?.Product?.Code || state.selectedCode,\n }),\n [types.UPDATE_DETAILS]: (state, details) => ({\n ...state,\n details: {\n ...state.details,\n ...details,\n },\n selectedCode: details?.Product?.Code || state.selectedCode,\n }),\n [types.SET_QUANTITY]: (state, quantity) => ({ ...state, quantity }),\n [types.SET_SELECTED_MEDIA]: (state, selectedMedia) => ({ ...state, selectedMedia }),\n [types.SELECT_FACET]: (state, { facet, value } = {}) =>\n updateProduct(state, (product) => ({\n Facets: FacetList.exclusivelyToggle(product.Facets, Facet.attribute(facet), value.Value),\n })),\n [types.SELECT_MULTI_FACET]: (state, { facet, value } = {}) =>\n updateProduct(state, (product) => ({\n Facets: FacetList.toggle(product.Facets, Facet.attribute(facet), value.Value),\n })),\n [types.SELECT_CHILD]: (state, { child } = {}) => ({\n ...state,\n selectedChild: state.selectedChild && state.selectedChild.Code === child.Code ? null : child,\n }),\n [types.DESELECT_ALL_FACET_VALUES]: (state) =>\n updateProduct(state, (product) => ({\n Facets: FacetList.deselectAll(product.Facets),\n })),\n [types.SET_CHILD]: (state, { child = null } = {}) => ({\n ...state,\n selectedChild: child,\n }),\n [types.SELECT_CHILD_ATTRIBUTES]: (state, { child = null } = {}) =>\n updateProduct(state, (product) =>\n product && child\n ? {\n Facets: product.Facets.reduce((F, f) => {\n const attribute = child.Attributes.find((a) => a.AttributeName === f.Attribute);\n\n return attribute?.Values?.length\n ? FacetList.exclusivelySelect(F, attribute.AttributeName, attribute.Values[0])\n : F;\n }, product.Facets),\n }\n : product\n ),\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { v4 } from 'uuid';\nimport $ from 'jquery';\nimport { Product, Facet } from 'Common/types';\nimport { useProductDetails, useTranslation } from 'Common/hooks';\nimport { Icon } from 'Common/components/ui';\nimport { Translation } from 'Common/components/localization';\nimport ProductInput from './ProductInput';\nimport ProductBadge from './ProductBadge';\nimport ProductPrice from './ProductPrice';\nimport { ProductVariant } from 'Common/models';\n\nexport default function ProductDetailCard({\n checkoutPageLink,\n className,\n collapseDisplayOnlyFacets = false,\n expandable = false,\n facets,\n gtmListValue,\n hideInput = false,\n inputStatusTooltip,\n isUserAuthenticated,\n noBuyNow = false,\n NotifyMe,\n notifyProps,\n onAddToCart,\n onClickView,\n onQuantityChange,\n quantity = 1,\n showItemData = false,\n showTitle = true,\n showVariantImages = false,\n startExpanded = false,\n totalQty = 0,\n variant,\n}) {\n const id = React.useRef(`DetailsCard${v4()}`);\n const toggleLbl = useTranslation('Commerce.Product.DetailsCard.Toggle.Label');\n const { badges, attributes, stockStatus, priceInfo } = useProductDetails(\n variant,\n { Facets: facets },\n { useFacets: true, includeDisplayOnlyFacets: true }\n );\n\n const isDisplayOnly = ProductVariant.isDisplayOnly(variant);\n\n const canHideAttr = React.useMemo(() => !!attributes.filter((a) => a.isDisplayOnly)?.length, [attributes]);\n const filteredAttr = React.useMemo(\n () => attributes.filter((a) => !collapseDisplayOnlyFacets || !a.isDisplayOnly),\n [attributes, collapseDisplayOnlyFacets]\n );\n\n const displayOnlyRef = React.useRef(null);\n const nameEl = React.useRef();\n const [showDisplayOnly, setShowDisplayOnly] = React.useState();\n const [expanded, setExpanded] = React.useState(!expandable || startExpanded);\n const toggleExpanded = React.useCallback(() => {\n if (expandable) {\n setExpanded(!expanded);\n $(`#${id.current}_Details`).collapse('toggle');\n }\n }, [expanded, expandable]);\n\n const toggleDisplayOnly = React.useCallback(() => setShowDisplayOnly(!showDisplayOnly), [showDisplayOnly]);\n\n React.useEffect(() => {\n if (!expandable) setExpanded(true);\n }, [expandable]);\n\n React.useEffect(() => {\n if (displayOnlyRef.current) {\n const height = showDisplayOnly ? displayOnlyRef.current.children[0]?.getBoundingClientRect()?.height : 0;\n\n displayOnlyRef.current.style.height = `${height}px`;\n }\n }, [showDisplayOnly]);\n return (\n \n {showTitle ? (\n
\n );\n}\n\nProductDetailCard.propTypes = {\n checkoutPageLink: px.string,\n className: px.string,\n collapseDisplayOnlyFacets: px.bool,\n expandable: px.bool,\n facets: px.arrayOf(Facet),\n gtmListValue: px.string,\n hideInput: px.bool,\n inputStatusTooltip: px.oneOfType([px.string, px.bool]),\n isUserAuthenticated: px.bool,\n noBuyNow: px.bool,\n NotifyMe: px.elementType,\n notifyProps: px.objectOf(px.any),\n onAddToCart: px.func,\n onClickView: px.func,\n onQuantityChange: px.func,\n quantity: px.number,\n showItemData: px.bool,\n showTitle: px.bool,\n showVariantImages: px.bool,\n startExpanded: px.bool,\n totalQty: px.number,\n variant: Product,\n};\n","import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Product } from 'Common/types';\nimport { useBEM, useTranslation, useViewport } from 'Common/hooks';\nimport { Translation } from 'Common/components/localization';\nimport { Icon, ImageModal } from 'Common/components/ui';\nimport ProductListTable from './ProductListTable';\nimport ProductDetailCard from './ProductDetailCard';\nimport ProductInput from './ProductInput';\n\nexport default function ProductListView({\n checkoutPageLink,\n className,\n googleRecaptchaV3Sitekey,\n gtmListValue,\n hideTitle = false,\n inputStatusTooltip,\n isUserAuthenticated,\n noBuyNow = false,\n NotifyMe,\n onAddItemToCart,\n onAddMultipleToCart,\n onClose,\n overrideIsMobile,\n productInfo,\n showVariantImages = false,\n singleFacet = null,\n stopPropagation = false,\n stretchBody = false,\n totalQty = 0,\n useRecaptcha,\n variants = [],\n}) {\n const [showModal, setShowModal] = useState(false);\n const [showModalCarousel, setShowModalCarousel] = useState(false);\n const [modalContent, setModalContent] = useState({});\n const [variantMedia, setVariantMedia] = useState([]);\n const viewport = useViewport();\n const [b, em] = useBEM('ProductListView', className);\n const [qtyMap, setQtyMap] = useState({});\n const lblClose = useTranslation('Commerce.CatalogNode.QuickView.Close');\n const onQtyChange = useCallback(\n (qty, code) => {\n setQtyMap({ ...qtyMap, [code]: qty });\n },\n [qtyMap]\n );\n\n const itemCodes = useMemo(() => variants?.map((v) => v.Code), [variants]);\n const quantity = useMemo(() => Object.values(qtyMap).reduce((sum, x) => sum + x, 0), [qtyMap]);\n const qtyChanger = useCallback((code) => (qty) => onQtyChange(qty, code), [onQtyChange]);\n const onTableAddToCart = useCallback(\n (_1, _2, opts) => onAddMultipleToCart(qtyMap, opts),\n [onAddMultipleToCart, qtyMap]\n );\n\n const stockStatus = useMemo(\n () => ({\n code: productInfo.Code,\n statusDisplayName: productInfo.StockStatusLabel,\n hasStock: productInfo.StockStatus === 'InStock',\n }),\n [productInfo]\n );\n\n const props = useMemo(\n () => ({ checkoutPageLink, isUserAuthenticated, gtmListValue }),\n [checkoutPageLink, isUserAuthenticated, gtmListValue]\n );\n\n const onClick = useMemo(\n () =>\n stopPropagation\n ? (e) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : undefined,\n [stopPropagation]\n );\n\n const getName = useCallback(\n (v) => {\n if (singleFacet) {\n const f =\n productInfo.Options?.DetailGridAttributeName ||\n productInfo.Facets.find((a) => a.Attribute === singleFacet)?.Attribute ||\n productInfo.Facets[0]?.Attribute;\n\n const values = v.Attributes.find((a) => a.AttributeName === f)?.Values || [v.Code];\n\n return values[0];\n }\n\n return v.Code;\n },\n [singleFacet, productInfo]\n );\n\n useEffect(() => {\n //reset quantities for each product passed in\n setQtyMap({});\n }, [productInfo.Code]);\n\n const isMobile = useMemo(() => overrideIsMobile ?? viewport.is.mobile, [viewport, overrideIsMobile]);\n\n const closeModal = useCallback(() => setShowModal(false), []);\n\n const setShowModalSlider = useCallback(() => setShowModalCarousel(true), []);\n\n const onClickView = useCallback(\n (vM) => {\n setVariantMedia(vM);\n setModalContent({\n type: vM[0].FileType,\n src: vM[0].Url,\n isMobile: isMobile,\n selectedItem: vM[0],\n });\n setShowModal(true);\n },\n [isMobile]\n );\n\n return (\n \n onClickView(variant.GalleryMedia)}\n disabled={!variant.GalleryMedia.length || variant.GalleryMedia[0].ContentId == 0}\n >\n \n \n ) : null}\n {expandable ? (\n \n
\n ) : null}\n {variant.DisplayName}
\n {expanded && showVariantImages ? (\n\n
\n \n \n \n {showItemData ? (\n
\n {!stockStatus.hasStock && !isDisplayOnly ?
\n | \n \n | \n \n {variant.Code}\n | \n
|---|---|
| \n {name}\n | \n\n {value}\n | \n
| \n \n \n \n \n {attributes\n .filter((a) => a.isDisplayOnly)\n .map(({ name, value }) => (\n \n ))}\n \n {name}\n \n \n {value}\n \n | \n \n {showDisplayOnly ? (\n | \n \n | \n \n ) : null}\n
| \n | \n \n \n | \n
\n {hideTitle ? null : (\n
\n );\n}\n\nProductListView.propTypes = {\n checkoutPageLink: px.string,\n className: px.string,\n googleRecaptchaV3Sitekey: px.string,\n gtmListValue: px.string,\n hideTitle: px.bool,\n inputStatusTooltip: px.oneOfType([px.string, px.bool]),\n isUserAuthenticated: px.bool,\n noBuyNow: px.bool,\n NotifyMe: px.elementType,\n onAddItemToCart: px.func,\n onAddMultipleToCart: px.func,\n onClose: px.func,\n overrideIsMobile: px.bool,\n productInfo: Product,\n quickviewRef: px.objectOf(px.any),\n showVariantImages: px.bool,\n singleFacet: px.string,\n stopPropagation: px.bool,\n stretchBody: px.bool,\n totalQty: px.number,\n useRecaptcha: px.bool,\n variants: px.arrayOf(Product),\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport * as types from 'Common/types';\nimport { ProductListView } from 'Common/components/product';\nimport { Loader } from '../ui';\n\nexport default function Quickview({\n checkoutPageLink,\n className,\n googleRecaptchaV3Sitekey,\n gtmListValue,\n inputStatusTooltip,\n isMobile = false,\n isUserAuthenticated,\n loading = false,\n noBuyNow,\n NotifyMe,\n notifyProps,\n onAddItemToCart,\n onAddMultipleToCart,\n onClearProduct,\n onClose,\n onSetProduct,\n product,\n totalQty = 0,\n useRecaptcha,\n variants,\n}) {\n React.useEffect(() => {\n if (onSetProduct) onSetProduct(product);\n return () => {\n if (onClearProduct) onClearProduct();\n };\n }, [product, onClearProduct, onSetProduct]);\n\n return (\n <>\n {loading ? (\n \n
\n )}\n {isMobile ? (\n \n
\n {onClose ? (\n \n ) : null}\n \n {variants?.map((variant) => (\n
\n ) : variants?.length ? (\n <>\n \n
\n \n
\n {product.DisplayName}
\n\n \n \n
\n );\n}\n\nCatalogDetailGrid.propTypes = {\n className: px.string,\n pageInfo: types.PageInfo,\n products: px.arrayOf(types.Product),\n onLoadMore: px.func,\n colSize: px.number,\n gtmListValue: px.string,\n NotifyMe: px.elementType,\n notifyProps: px.object,\n onAddItemToCart: px.func,\n onAddMultipleToCart: px.func,\n googleRecaptchaV3Sitekey: px.string,\n singleFacet: px.string,\n checkoutPageLink: px.string,\n isUserAuthenticated: px.bool,\n inputStatusTooltip: px.oneOfType([px.string, px.bool]),\n noBuyNow: px.bool,\n totalQty: px.number,\n useRecaptcha: px.bool,\n};\n","export default class Script {\n static scripts = {};\n\n static listen(src, globalNamespace, opts, onChange) {\n if (src) {\n if (!this.scripts[src]) {\n this.scripts[src] = new this(src, globalNamespace, opts);\n } else if (opts.forceReload) {\n this.scripts[src].load(opts);\n }\n\n this.scripts[src].onChange(onChange);\n }\n }\n\n static release(src, onChange) {\n if (this.scripts[src]) {\n this.scripts[src].offChange(onChange);\n }\n }\n\n static destroy(src, andRemove = false) {\n if (this.scripts[src]) {\n this.scripts[src].destroy();\n if (andRemove) delete this.scripts[src];\n }\n }\n\n listeners = [];\n script = null;\n src = null;\n namespace = null;\n _value = null;\n\n get value() {\n return this._value;\n }\n\n constructor(src, globalNamespace, opts) {\n this.ns = globalNamespace;\n this.src = src;\n if (globalNamespace && window[globalNamespace] && !opts.forceReload) {\n this.update(window[globalNamespace]);\n } else {\n this.load(opts);\n }\n }\n\n load({ async = true, onBefore } = {}) {\n if (this.script) this.destroy();\n\n this.script = document.createElement('script');\n if (onBefore) onBefore();\n if (this.ns && window[this.ns]) delete window[this.ns];\n this.script.async = async;\n this.script.src = this.src;\n this.script.onload = this.script.onreadystatechange = () => {\n this.update(this.ns ? window[this.ns] : true);\n };\n document.body.appendChild(this.script);\n }\n\n destroy() {\n if (this.script) {\n this.script.onload = this.script.onreadystatechange = () => undefined;\n document.body.removeChild(this.script);\n if (this.ns) delete window[this.ns];\n this.script = null;\n this.update(null);\n }\n }\n\n update(value) {\n this._value = value;\n for (const fn of this.listeners) fn(value);\n }\n\n onChange(listener) {\n this.listeners.push(listener);\n listener(this.value);\n }\n\n offChange(listener) {\n const i = this.listeners.indexOf(listener);\n\n if (i !== -1) this.listeners.splice(i, 1);\n }\n}\n","import onReady from './onReady';\n\n/**\n * Get a promise that resolves when a global namespace becomes available (defined).\n * Times out if not found after specified timeout.\n * @param {string|string[]} globalName - name or array of names of library(s)\n * @param {number} [timeout=30000] - milliseconds\n * @returns {Promise<*>} A promise resolving to the library / namespace object.\n *\n * @example\n * window.ensureLib('$').then(function withJquery($) {\n * $('#input').val('hello, world');\n * });\n *\n * window.ensureLib(['RewardsController', 'PasswordResetController'], 1000)\n * .then(([RewardsController, PasswordResetController]) => {\n * RewardsController.init(...);\n * PasswordResetController.init(...);\n * })\n * .catch((e) => {\n * console.error(e);\n * });\n */\nexport default function ensureLib(globalName, timeout = 30000) {\n if (Array.isArray(globalName)) return Promise.all(globalName.map((n) => ensureLib(n, timeout)));\n return window[globalName] != null\n ? Promise.resolve(window[globalName])\n : new Promise((res, rej) => {\n onReady(() => {\n if (window[globalName] == null) {\n const start = Date.now();\n const handler = setInterval(() => {\n if (window[globalName] != null) {\n clearInterval(handler);\n res(window[globalName]);\n } else if (Date.now() > start + timeout) {\n clearInterval(handler);\n rej(new Error(`Timed out after ${timeout}ms waiting for library: ${globalName}`));\n }\n }, 100);\n } else {\n res(window[globalName]);\n }\n });\n });\n}\n","import { useEffect, useState, useRef } from 'react';\nimport { Script } from 'Common/utils';\nimport { ensureLib } from 'Common/core';\n\nexport default function useScript(\n src,\n {\n onBefore,\n onCleanup,\n onLoad,\n async = true,\n globalNamespace,\n forceReload = false,\n destroyOnDismount = true,\n delay,\n } = {}\n) {\n const [loaded, setLoaded] = useState(false);\n const opts = useRef({ onBefore, onLoad, async, forceReload, destroyOnDismount, delay });\n\n useEffect(() => {\n const destroy = opts.current.destroyOnDismount;\n\n if (src && opts.current.delay && globalNamespace) {\n ensureLib(globalNamespace, opts.current.delay)\n .then((lib) => {\n if (opts.current.onLoad) {\n const transformedLib = opts.current.onLoad(lib);\n\n return transformedLib;\n }\n return lib;\n })\n .then((lib) => {\n if (lib) setLoaded(lib);\n else Script.listen(src, globalNamespace, opts.current, setLoaded);\n })\n .catch(() => {\n Script.listen(src, globalNamespace, opts.current, setLoaded);\n });\n } else {\n Script.listen(src, globalNamespace, opts.current, setLoaded);\n }\n\n return () => {\n if (src) Script.release(src, setLoaded);\n if (destroy && src) Script.destroy(src);\n if (onCleanup) onCleanup();\n };\n }, [src, globalNamespace, onCleanup]);\n\n return loaded;\n}\n","import { ADDRESS } from 'Common/constants/fields';\nimport * as types from './types';\n\nexport default {\n [types.SET_CUSTOMER_MESSAGE]: (state, { message, success, type, ts, position, translationParams } = {}) => ({\n ...state,\n customerMessage: { message, success, type, ts, position, translationParams },\n }),\n [types.SET_CUSTOMER_ERROR]: (state, { message, type, ts, translationParams } = {}) => ({\n ...state,\n customerError: { message, type, ts, translationParams },\n }),\n [types.SET_USER_EMAIL]: (state, payload) => ({\n ...state,\n userEmail: payload || null,\n }),\n [types.SET_CUSTOMER_ADDRESSES]: (state, payload) => ({\n ...state,\n addresses: [...payload],\n }),\n\n [types.DELETE_CUSTOMER_ADDRESS]: (state, payload) => {\n const { [ADDRESS.defaultAddress]: isDefault } = state.addresses.find((a) => a.Id === payload);\n const addresses = state.addresses.filter((a) => a.Id !== payload);\n\n if (isDefault && addresses.length) addresses[0] = { ...addresses[0], [ADDRESS.defaultAddress]: true };\n\n return { ...state, addresses };\n },\n\n // gift cards\n\n [types.SET_CUSTOMER_GIFT_CARDS]: (state, payload) => ({\n ...state,\n giftCards: [...payload],\n }),\n\n [types.ADD_CUSTOMER_GIFT_CARD]: (state, { card } = {}) => {\n return {\n ...state,\n giftCards: [...state.giftCards, card],\n };\n },\n\n [types.DELETE_CUSTOMER_GIFT_CARD]: (state, payload) => ({\n ...state,\n giftCards: state.giftCards.filter((card) => card.CardNumber !== payload.id),\n }),\n\n // payment methods\n\n [types.SET_CUSTOMER_PAYMENT_METHODS]: (state, payload) => ({\n ...state,\n paymentMethods: [...payload],\n }),\n\n [types.DELETE_CUSTOMER_PAYMENT_METHOD]: (state, payload) => ({\n ...state,\n paymentMethods: state.paymentMethods.filter((card) => card.Id !== payload.id),\n }),\n\n [types.MARK_DEFAULT_CUSTOMER_PAYMENT_METHOD]: (state, payload) => {\n // get payment methods but without any defaults set\n\n const updatedPaymentMethod = state.paymentMethods.find((card) => card.Id === payload.id);\n const filteredPaymentMethods = state.paymentMethods.filter((card) => card.Id !== payload.id);\n\n return {\n ...state,\n paymentMethods: [\n ...filteredPaymentMethods,\n {\n ...updatedPaymentMethod,\n IsDefault: true,\n },\n ],\n };\n },\n\n // order\n [types.SET_CUSTOMER_ORDER_RMARETURNDATA]: (state, rmaReturnData) => ({\n ...state,\n customerOrders: { ...state.customerOrders, ...rmaReturnData, lastUpdate: Date.now() },\n }),\n [types.SET_CUSTOMER_ORDERS]: (state, orders) => ({\n ...state,\n customerOrders: { ...state.customerOrders, ...orders, lastUpdate: Date.now() },\n }),\n\n // notification subscription\n [types.SET_CUSTOMER_USER_NOTIFICATION_SUBSCRIPTIONS]: (state, payload) => ({\n ...state,\n userNotificationSubscriptions: [...payload],\n }),\n\n [types.REMOVE_CUSTOMER_USER_NOTIFICATION_SUBSCRIPTION]: (state, payload) => ({\n ...state,\n userNotificationSubscriptions: state.userNotificationSubscriptions.filter(\n (n) => n.NotificationUniqueId !== payload\n ),\n }),\n\n // Notifications\n [types.SET_CUSTOMER_NOTIFICATION]: (state, payload) => ({\n ...state,\n notifications: payload,\n }),\n\n // Mailchimp\n [types.SET_CUSTOMER_MAILCHIMP]: (state, payload) => ({\n ...state,\n mailchimp: payload,\n }),\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { useFieldState } from 'informed';\nimport { Translation } from '../localization';\n\nexport default function ErrorDisplay({ className, field, fieldId, collapse = false }) {\n const { error, touched } = useFieldState(field);\n\n return (touched && typeof error === 'string' && error) || !collapse ? (\n \n {touched && typeof error === 'string' && error ? \n {products.map((x) => (\n \n \n ))}\n
\n \n \n {hideError ? null :
\n ) : (\n \n {labelLast || !label ? null : (\n \n )}\n \n {inlineChildren ? null : children}\n \n {inlineChildren ? children : null}\n {labelLast && label ? (\n \n ) : null}\n {hideError ? null :
\n );\n}\n\nField.propTypes = {\n className: px.string,\n label: px.node,\n labelInline: px.bool,\n labelFirst: px.bool,\n name: px.string,\n hideError: px.bool,\n Component: px.elementType,\n validateOnValueChange: px.bool,\n validateOnBlur: px.bool,\n required: px.bool,\n validate: px.func,\n collapseError: px.bool,\n hidden: px.bool,\n labelLast: px.bool,\n hookAutofill: px.bool,\n children: px.node,\n onInput: px.func,\n placeholder: px.string,\n trimOnInput: px.bool,\n value: px.any,\n mask: px.oneOfType([px.func, px.string]),\n formatter: px.oneOfType([px.func, px.string]),\n transform: px.func,\n formatterDependencies: px.arrayOf(px.any),\n formatterDependsOnState: px.bool,\n placeholderParams: px.any,\n disabled: px.bool,\n disabledConditionEval: px.func,\n disabledConditionWhen: px.arrayOf(px.string),\n inlineChildren: px.bool,\n forceValue: px.bool,\n transformDelay: px.bool,\n};\n","import { ReduxFeature } from 'Common/utils';\nimport * as actions from './actions';\nimport * as selectors from './selectors';\nimport reducers from './reducers';\nimport initialState from './state';\n\nexport default ReduxFeature.create({ actions, selectors, reducers, initialState });\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport styled from 'styled-components';\nimport { createPortal } from 'react-dom';\nimport debounce from 'lodash.debounce';\n\nconst Popup = styled.div`\n position: absolute;\n opacity: 0;\n transition: opacity 0.3s ease-out;\n pointer-events: none;\n\n &.show {\n opacity: 1;\n pointer-events: all;\n }\n`;\n\nexport default function PortalPopup({ className, children, anchorRef, showPopup = false, style }) {\n const popupRef = React.useRef();\n const [y, setY] = React.useState(null);\n const [x, setX] = React.useState();\n\n const containerStyle = React.useMemo(\n () => ({\n ...style,\n left: x,\n top: y,\n }),\n [x, y, style]\n );\n\n const reposition = React.useMemo(\n () =>\n debounce(() => {\n const el = anchorRef.current;\n\n if (!el) return;\n const elRect = el.getBoundingClientRect();\n const bodyRect = document.body.getBoundingClientRect();\n const popupRect = popupRef.current?.getBoundingClientRect();\n\n elRect.top < screen.height / 2 || !popupRect\n ? setY(`${elRect.bottom - bodyRect.top}px`)\n : setY(`${elRect.bottom - bodyRect.top - popupRect.height - elRect.height}px`);\n const alignRight = screen.width - elRect.left < popupRect?.width / 2;\n const alignLeft = elRect.left < popupRect?.width / 2;\n\n setX(\n alignRight\n ? `calc(100% - ${popupRect?.width}px)`\n : alignLeft\n ? `${elRect.left}px`\n : `${elRect.left - popupRect.width / 2}px`\n );\n }),\n [anchorRef]\n );\n\n const repositionRef = React.useRef(reposition);\n\n React.useEffect(() => {\n function handler() {\n repositionRef.current();\n }\n\n handler();\n window.addEventListener('resize', handler);\n return () => {\n window.removeEventListener('resize', handler);\n };\n }, []);\n\n React.useEffect(() => {\n repositionRef.current = reposition;\n if (showPopup) reposition();\n }, [showPopup, reposition]);\n\n return createPortal(\n \n
\n \n
\n {userEmail ? (\n \n
\n
\n );\n}\n\nCatalogExploreCard.propTypes = {\n className: px.string,\n displayImgFirst: px.bool,\n product: types.Product,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport * as types from 'Common/types';\nimport { useBEM, useViewport } from 'Common/hooks';\nimport { InfiniteScroll } from 'Common/components/ui';\nimport CatalogExploreCard from './CatalogExploreCard';\n\nexport default function CatalogExplore({ pageInfo = {}, className, products = [], onLoadMore, cardProps = {} }) {\n const viewPort = useViewport();\n const isDoneLoading = React.useMemo(() => pageInfo.page * pageInfo.pageSize >= pageInfo.total, [pageInfo]);\n const [b, em] = useBEM('CatalogExplore', className);\n\n return (\n \n
\n \n
\n \n {product.ProductTypeDescription}\n
\n{product.ProductName}
\n{product.DescriptionShort}
\n \n\n \n
\n \n 
\n
\n \n \n \n
\n );\n}\n\nCatalogExplore.propTypes = {\n className: px.string,\n pageInfo: types.PageInfo,\n products: px.arrayOf(types.Product),\n onLoadMore: px.func,\n desktopBreakpoint: px.string,\n loadOnArgsChange: px.bool,\n gtmListValue: px.string,\n cardProps: px.shape(CatalogExploreCard.propTypes),\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { CatalogExplore as Explore } from 'Common/components/catalog';\nimport { catalog } from '~features';\nimport { useAction } from 'Common/hooks';\n\nexport default function CatalogGrid({ gtmListValue, skipChildEnrichment = false, ...props }) {\n const items = useSelector(catalog.selectors.getFilteredProducts);\n const pageInfo = useSelector(catalog.selectors.getPageInfo);\n const loadMore = useAction(catalog.actions.loadMore);\n\n const onLoadMore = React.useCallback(() => loadMore(skipChildEnrichment), [loadMore, skipChildEnrichment]);\n\n return (\n \n {products?.length\n ? products.map((x, i) => (\n
\n \n
\n {product.DisplayName}
\n\n
\n {product.DescriptionShort}
\n\n \n
\n \n );\n}\n\nGridCard.propTypes = {\n className: px.string,\n product: types.Product,\n active: px.bool,\n onOpenQuickview: px.func,\n onCloseQuickview: px.func,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { BREAKPOINTS } from 'Common/utils/Viewport';\nimport * as types from 'Common/types';\nimport { useBEM, useViewport } from 'Common/hooks';\nimport { InfiniteScroll } from 'Common/components/ui';\nimport { CatalogAltQuickview } from 'Common/components/catalog';\nimport GridCard from './GridCard';\n\nexport const DEFAULT_CARD_SIZE = 360;\n\nexport function maxRowSize(bp, colSize = DEFAULT_CARD_SIZE) {\n const min = BREAKPOINTS[bp] || 0;\n\n return Math.max(1, Math.floor(min / (colSize + 24)));\n}\n\nexport function calculateQuickviewIndex(quickview, rowSize) {\n return quickview ? Math.ceil((quickview.idx + 1) / rowSize) * rowSize - 1 : -1;\n}\n\nexport default function CatalogExploreGrid({\n checkoutPageLink,\n className,\n colSize = DEFAULT_CARD_SIZE,\n googleRecaptchaV3Sitekey,\n gtmListValue,\n inputStatusTooltip,\n isUserAuthenticated,\n noBuyNow,\n NotifyMe,\n notifyProps,\n onAddItemToCart,\n onAddMultipleToCart,\n onLoadMore,\n pageInfo = {},\n products = [],\n Quickview = CatalogAltQuickview,\n totalQty = 0,\n useRecaptcha,\n}) {\n const viewPort = useViewport();\n const handler = React.useRef();\n const [hide, setHide] = React.useState(false);\n const [quickview, setQuickview] = React.useState(null);\n const isDoneLoading = React.useMemo(() => pageInfo.page * pageInfo.pageSize >= pageInfo.total, [pageInfo]);\n const [b, em] = useBEM('CatalogExploreGrid', className);\n const rowSize = React.useMemo(() => maxRowSize(viewPort.name, colSize), [viewPort.name, colSize]);\n const quickviewIdx = React.useMemo(\n () => Math.min(calculateQuickviewIndex(quickview, rowSize), products.length - 1),\n [rowSize, quickview, products]\n );\n\n const closeQuickview = React.useCallback(() => {\n setHide(true);\n clearTimeout(handler.current);\n handler.current = setTimeout(() => {\n setQuickview(null);\n }, 310);\n }, []);\n\n const onOpenQuickview = React.useCallback(\n (idx, product) => (e) => {\n e.stopPropagation();\n e.preventDefault();\n setHide(false);\n clearTimeout(handler.current);\n setQuickview({ idx, product });\n },\n []\n );\n\n const onCloseQuickview = React.useCallback(\n (e) => {\n e.stopPropagation();\n e.preventDefault();\n closeQuickview();\n },\n [closeQuickview]\n );\n\n React.useEffect(() => () => clearTimeout(handler.current), []);\n\n return (\n \n \n \n
\n );\n}\n\nCatalogExploreGrid.propTypes = {\n checkoutPageLink: px.string,\n className: px.string,\n colSize: px.number,\n googleRecaptchaV3Sitekey: px.string,\n gtmListValue: px.string,\n inputStatusTooltip: px.oneOfType([px.string, px.bool]),\n isUserAuthenticated: px.bool,\n noBuyNow: px.bool,\n NotifyMe: px.elementType,\n notifyProps: px.object,\n onAddItemToCart: px.func,\n onAddMultipleToCart: px.func,\n onLoadMore: px.func,\n pageInfo: types.PageInfo,\n products: px.arrayOf(types.Product),\n Quickview: px.elementType,\n totalQty: px.number,\n useRecaptcha: px.bool,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { CatalogExploreGrid as Grid } from 'Common/components/catalog';\nimport { NotificationSubscription } from 'Common/containers/customer';\nimport { catalog, order } from '~features';\nimport { useAction } from 'Common/hooks';\nimport CatalogAltQuickview from './CatalogAltQuickview';\n\nexport default function CatalogExploreGrid({ gtmListValue, ...props }) {\n const items = useSelector(catalog.selectors.getFilteredProducts);\n const pageInfo = useSelector(catalog.selectors.getPageInfo);\n const onLoadMore = useAction(catalog.actions.loadMore);\n const onAddItemToCart = useAction(order.actions.addItem);\n const onAddMultipleToCart = useAction(order.actions.addItems);\n const totalQty = useSelector(order.selectors.getTotalQuantity);\n\n return (\n \n {products.map((x, i) => (\n \n \n ))}\n
\n \n setExpanded(!expanded) : toggleFilter}\n >\n {title}\n \n \n {expanded ? (\n
\n );\n}\n\nFilterDropdown.propTypes = {\n anchor: px.string,\n autoClose: px.bool,\n className: px.string,\n ctrlType: px.string,\n disabled: px.oneOfType([px.bool, px.objectOf(px.bool)]),\n hasFacetsDropdown: px.bool,\n includeCloseIcon: px.bool,\n onSelect: px.func,\n options: px.arrayOf(px.any),\n selectedValues: px.arrayOf(px.oneOfType([px.string, px.number])),\n startExpanded: px.bool,\n title: px.node,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\n\nexport default function Selector({\n type = '',\n onSelect,\n value = null,\n label = null,\n leftIcon = null,\n rightIcon = null,\n selected = false,\n tooltip,\n color,\n className,\n disabled = false,\n}) {\n const ctrl = React.useMemo(() => {\n if (type && type.includes('rb')) return 'radio';\n if (type && type.includes('cb')) return 'checkbox';\n if ((type && type.includes('color')) || color?.uri || color?.hex) return 'color';\n return 'button';\n }, [type, color]);\n\n const tooltipProps = React.useMemo(() => {\n const { title, placement = 'top' } = tooltip || {};\n\n return title ? { title, ['data-placement']: placement, ['data-toggle']: 'toggle' } : null;\n }, [tooltip]);\n\n switch (ctrl) {\n case 'radio':\n case 'checkbox':\n return (\n \n {btnType === 'button'\n ? options.map((option) => (\n\n \n {selectedValues.includes(option.value) && includeCloseIcon ? (\n \n \n \n ) : null}\n {option?.label || option}\n \n ))\n : options.map((option) => (\n \n {}}\n />\n {selectedValues.includes(option.value) && includeCloseIcon ? (\n \n \n \n ) : null}\n {option?.label || option}\n \n ))}\n
\n ) : null}\n \n
\n );\n}\n\nMobileFiltersMenu.propTypes = {\n className: px.string,\n closeOnApply: px.bool,\n open: px.bool,\n facets: px.arrayOf(types.Facet),\n onApplyFilters: px.func,\n onCancel: px.func,\n categoryIcon: px.node,\n properties: px.objectOf(px.string),\n id: px.string,\n style: px.object,\n fitToParent: px.bool,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport * as types from 'Common/types';\nimport { useTranslation } from 'Common/hooks';\nimport { FilterDropdown } from '../ui';\nimport MobileFiltersMenu from './MobileFiltersMenu';\nimport { Translation } from '../localization';\n\nconst PAGE_OPTIONS = [{ Value: 2 }, { Value: 10 }, { Value: 25 }, { Value: 50 }, { Value: 0 }];\n\nconst SORT_OPTIONS = [{ Value: 1, Text: 'A to Z' }];\n\nfunction convertPaginationOptions(options = [], pageInfo = {}) {\n return options?.map((p) => ({\n value: p.Value === 0 ? pageInfo.total : p.Value,\n label: p.label || p.Text || p.value || p.Value,\n }));\n}\n\nfunction convertSortOptions(options = []) {\n return options.map((p) => ({\n value: p.value || p.Value,\n label: p.label || p.Text || p.value || p.Value,\n }));\n}\n\nexport default function MobileCatalogFilters({\n className,\n facets = [],\n hidePagination = false,\n hideSort = false,\n onUpdateFacets,\n onUpdatePageSize,\n onUpdateSort,\n pageInfo = {},\n paginationOptions = PAGE_OPTIONS,\n sortOptions = SORT_OPTIONS,\n}) {\n const mobileSortBy = useTranslation('Commerce.CatalogNode.Filters.MobileSortBy');\n const [showMenu, setShowMenu] = React.useState(false);\n const pageOpts = React.useMemo(\n () => convertPaginationOptions(paginationOptions, pageInfo),\n [paginationOptions, pageInfo]\n );\n\n const sortOpts = React.useMemo(() => convertSortOptions(sortOptions), [sortOptions]);\n const curPageOpt = React.useMemo(() => pageOpts.find((p) => p.value === pageInfo.pageSize), [pageOpts, pageInfo]);\n const onApplyFilters = React.useCallback(\n (Facets) => {\n onUpdateFacets(Facets);\n setShowMenu(false);\n },\n [setShowMenu, onUpdateFacets]\n );\n\n return (\n \n {selectedFacet ? (\n \n ) : (\n \n )}\n \n \n \n
\n \n \n {selectedFacet ||
\n \n \n
\n \n {selectedFacet ||
\n - \n {listItems.map((item) => (\n
- \n
\n \n ))}\n
\n {facets?.length ? (\n <>\n setShowMenu(false)}\n />\n
\n );\n}\n\nMobileCatalogFilters.propTypes = {\n className: px.string,\n facets: px.arrayOf(types.Facet),\n hidePagination: px.bool,\n hideSort: px.bool,\n onUpdateFacets: px.func,\n onUpdateSort: px.func,\n onUpdatePageSize: px.func,\n pageInfo: types.PageInfo,\n paginationOptions: px.arrayOf(\n px.shape({\n Text: px.string,\n Value: px.number,\n })\n ),\n sortOptions: px.arrayOf(\n px.shape({\n Text: px.string,\n Value: px.number,\n })\n ),\n};\n","import React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\n\nconst drawerTypes = {\n float: 'float',\n relative: 'relative',\n};\n\nexport default function Dropdown({\n className,\n style,\n icon,\n label,\n isOpen = false,\n toggleOpen,\n selectedValue,\n children,\n drawerType = drawerTypes.float,\n disabled = false,\n hasFacetsDropdown = false,\n}) {\n const drawerId = React.useRef();\n\n React.useLayoutEffect(() => {\n if (!drawerId.current || drawerType == drawerTypes.float) return;\n if (!isOpen) {\n drawerId.current.style.height = '0px';\n return;\n }\n\n const child = drawerId.current.firstChild;\n\n drawerId.current.style.height = `${child.offsetHeight}px`;\n }, [drawerType, isOpen]);\n\n return (\n \n setShowMenu(true)}\n >\n \n \n
\n \n \n ) : null}\n {!hidePagination ? (\n \n
\n ) : null}\n {!hidePagination && !hideSort ? : null}\n {!hideSort ? (\n \n
\n ) : null}\n \n {label && }\n
\n );\n}\n\nDropdown.propTypes = {\n style: px.object,\n className: px.string,\n label: px.string,\n icon: px.node,\n isOpen: px.bool.isRequired,\n selectedValue: px.node,\n toggleOpen: px.func.isRequired,\n children: px.node.isRequired,\n drawerType: px.oneOf([drawerTypes.float, drawerTypes.relative]),\n disabled: px.bool,\n hasFacetsDropdown: px.bool\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport * as types from 'Common/types';\nimport { Dropdown, FilterDropdown } from '../ui';\nimport { Translation } from '../localization';\nimport { useTranslation } from '../../hooks';\n\nconst PAGE_OPTIONS = [{ Value: 2 }, { Value: 10 }, { Value: 25 }, { Value: 50 }, { Value: 0 }];\n\nconst SORT_OPTIONS = [{ Value: 1, Text: 'A to Z' }];\n\nfunction convertPaginationOptions(options = [], pageInfo = {}) {\n return options?.map((p) => ({\n value: p.Value === 0 ? pageInfo.total : p.Value,\n label: p.label || p.Text || p.value || p.Value,\n }));\n}\n\nfunction convertSortOptions(options = []) {\n return options.map((p) => ({\n value: p.value || p.Value,\n label: p.label || p.Text || p.value || p.Value,\n }));\n}\n\nexport default function CatalogFilters({\n className,\n facets = [],\n hidePagination = false,\n hideSort = false,\n includeCloseIcon = false,\n onUpdateFacet,\n onUpdatePageSize,\n onUpdateSort,\n pageInfo = {},\n paginationOptions = PAGE_OPTIONS,\n showingCtaBlock,\n sortOptions = SORT_OPTIONS,\n startExpanded = false,\n viewport\n}) {\n\n const [isOpen, setIsOpen] = React.useState(false);\n const [isFacetOpen, setIsFacetOpen] = React.useState(false)\n const [hasFacetsDropdown, setHasFacetsDropdown] = React.useState(false)\n const clickedRef = React.useRef(false);\n\n const toggleOpen = React.useCallback(() => {\n clickedRef.current = !isOpen;\n setIsOpen((val) => !val);\n }, [isOpen]);\n\n const toggleFacetOpen = React.useCallback(() => {\n clickedRef.current = !isFacetOpen;\n setIsFacetOpen((val) => !val);\n }, [isFacetOpen])\n\n const sortBy = useTranslation('Commerce.CatalogNode.Filters.SortBy');\n const showingItems = useTranslation('Commerce.CatalogNode.Filters.ShowingItems', {\n ...pageInfo,\n from: 1,\n to: showingCtaBlock.toLowerCase() === 'true' && pageInfo.count < pageInfo.total ? pageInfo.to - 1 : pageInfo.to,\n });\n\n const onSelectFacet = React.useCallback(\n (facet) => (value) =>\n onUpdateFacet\n ? onUpdateFacet(\n facet,\n facet.Values.find((v) => v.Value === value)\n )\n : null,\n [onUpdateFacet]\n );\n\n const pageOpts = React.useMemo(\n () => convertPaginationOptions(paginationOptions, pageInfo),\n [paginationOptions, pageInfo]\n );\n\n const sortOpts = React.useMemo(() => convertSortOptions(sortOptions), [sortOptions]);\n const curPageOpt = React.useMemo(() => pageOpts.find((p) => p.value === pageInfo.pageSize), [pageOpts, pageInfo]);\n\n React.useEffect(() => {\n if (viewport.is.lt('xl') && (facets?.length >= 5)) {\n setHasFacetsDropdown(true)\n }; \n }, [viewport, facets.length])\n \n React.useEffect(() => {\n function onWindowClick() {\n if ((isFacetOpen || isOpen) && !clickedRef.current && !startExpanded) {\n setIsOpen(false);\n setIsFacetOpen(false)\n } \n clickedRef.current = false;\n }\n\n window.addEventListener('click', onWindowClick);\n return () => window.removeEventListener('click', onWindowClick);\n }, [isOpen, isFacetOpen, startExpanded]);\n\n return (\n \n \n
\n \n
\n {children}
\n \n \n \n
\n );\n}\n\nCatalogFilters.propTypes = {\n className: px.string,\n facets: px.arrayOf(types.Facet),\n hidePagination: px.bool,\n hideSort: px.bool,\n includeCloseIcon: px.bool,\n onUpdateFacet: px.func,\n onUpdateSort: px.func,\n onUpdatePageSize: px.func,\n pageInfo: types.PageInfo,\n paginationOptions: px.arrayOf(\n px.shape({\n Text: px.string,\n Value: px.number,\n })\n ),\n sortOptions: px.arrayOf(\n px.shape({\n Text: px.string,\n Value: px.number,\n })\n ),\n showingCtaBlock: px.string,\n startExpanded: px.bool,\n viewport: px.object\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { useViewport, useAction } from 'Common/hooks';\nimport { CatalogFilters as Filters, MobileCatalogFilters as MobileFilters } from 'Common/components/catalog';\nimport { catalog } from '~features';\n\nexport default function CatalogFilters({\n className,\n desktopBreakpoint = 'lg',\n startExpanded,\n useMobileFilters = true,\n ...props\n}) {\n const viewport = useViewport();\n const hasChanged = useSelector(catalog.selectors.hasChanged);\n const facets = useSelector(catalog.selectors.getFilteredFacets);\n const pageInfo = useSelector(catalog.selectors.getPageInfo);\n const onUpdateSort = useAction(catalog.actions.updateSortOrder);\n const onUpdatePageSize = useAction(catalog.actions.updatePageSize);\n const onUpdateFacet = useAction(catalog.actions.selectFacetValue);\n const onUpdateFacets = useAction(catalog.actions.updateFacets);\n const onFetchItems = useAction(catalog.actions.fetchItems);\n\n React.useEffect(() => {\n if (hasChanged) {\n onFetchItems();\n }\n }, [hasChanged, onFetchItems]);\n\n return viewport.is.lt(desktopBreakpoint) && useMobileFilters ? (\n \n \n {pageInfo.count ? showingItems :
\n \n \n {hasFacetsDropdown ? (\n <>\n v.Selected).map((v) => v.Value)}\n options={facet.Values.map((v) => ({ label: v.Label, value: v.Value }))}\n onSelect={onSelectFacet(facet)}\n ctrlType={facet.SelectorType}\n autoClose={false}\n startExpanded={startExpanded}\n includeCloseIcon={includeCloseIcon}\n />\n ))}\n \n )}\n
\n {!hidePagination || !hideSort ? (\n \n {facets.map((facet) => (\n v.Selected).map((v) => v.Value)}\n options={facet.Values.map((v) => ({ label: v.Label, value: v.Value }))}\n onSelect={onSelectFacet(facet)}\n ctrlType={facet.SelectorType}\n autoClose={false}\n startExpanded={startExpanded}\n includeCloseIcon={includeCloseIcon}\n hasFacetsDropdown={true}\n />\n ))}\n
\n \n \n ) : (\n <>\n \n \n {onUpdatePageSize && !hidePagination ? (\n o.value === pageInfo.sortValue)?.label ?? sortBy}\n selectedValues={[pageInfo.sortValue]}\n options={sortOpts}\n onSelect={onUpdateSort}\n includeCloseIcon={includeCloseIcon}\n />\n ) : null}\n
\n ) : null}\n \n {retailSearch ? (\n \n \n \n \n ) : null}\n {onAddItemToCompare ? (\n \n {' '}\n \n
\n );\n}\n\nDetailsLinks.propTypes = {\n className: px.string,\n retailSearch: LinkItemType,\n onAddItemToCompare: px.func,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { ProductDetails as Details } from 'Common/components/product';\nimport { useAction } from 'Common/hooks';\nimport { LinkItem } from 'Common/types';\nimport { DetailsLinks } from '~components/product';\nimport { compare, product, order } from '~features';\n\nexport default function ProductDetails({ Links, storeLocatorLink, reviewProviderEntityId, useCompare, isQuickView = false, ...props }) {\n const priceInfo = useSelector(product.selectors.getCurrentPriceInfo);\n const productInfo = useSelector(product.selectors.getProduct);\n const quantity = useSelector(product.selectors.getQuantity);\n const productChildren = useSelector(product.selectors.getChildren);\n const currentItemStatus = useSelector(product.selectors.getCurrentItemStatus);\n const currentChildren = useSelector(product.selectors.getCurrentChildren);\n const currentOversize = useSelector(product.selectors.getCurrentOversize);\n const selectedChild = useSelector(product.selectors.getSelectedChild);\n const facets = useSelector(product.selectors.getFacets);\n const currentHazmat = useSelector(product.selectors.getCurrentHazmat);\n const disabledFacets = useSelector(product.selectors.getDisabledFacetValues);\n const onFacetSelect = useAction(product.actions.selectFacet);\n const onSelectChild = useAction(product.actions.selectChild);\n const onQuantityChange = useAction(product.actions.selectQuantity);\n const orderLastUpdate = useSelector(order.selectors.getLastUpdate);\n const onAddItemToCart = useAction(order.actions.addItem);\n const onAddItemToCompare = useAction(compare.actions.addToCompareList);\n const clearFacets = useAction(product.actions.clearFacets);\n const totalQty = useSelector(order.selectors.getTotalQuantity);\n const setSelectedCode = useAction(product.actions.setSelectedCode);\n\n return (\n \n {productUrl ? (\n \n {label}\n \n \n \n ) : null}\n {retailSearch && useRetailer ? (\n \n \n \n
\n );\n}\n\nPartialDetailsLinks.propTypes = {\n className: px.string,\n productLink: px.string,\n retailSearch: px.string,\n useRetailer: px.bool\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { CatalogQuickView as QuickView } from 'Common/components/catalog';\nimport * as types from 'Common/types';\nimport { useAction } from 'Common/hooks';\nimport * as GTM from 'Common/constants/gtm';\nimport { order, product } from '~features';\nimport { ProductView, PartialDetailsLinks } from '~components/product';\n\nexport default function CatalogQuickView(props) {\n const { checkoutPageLink, gtmListValue } = props;\n const lastSelected = React.useRef(null);\n const setItemDetails = useAction(product.actions.setItemDetails);\n const setSelectedCode = useAction(product.actions.setSelectedCode);\n const clearItemDetails = useAction(product.actions.clearItemDetails);\n const fetchProductDetails = useAction(product.actions.fetchProductDetails);\n const onQuantityChange = useAction(product.actions.selectQuantity);\n const selectedProduct = useSelector(product.selectors.getSelectedProduct);\n const currentProduct = useSelector(product.selectors.getProduct);\n const selectedCode = useSelector(product.selectors.getSelectedCode);\n const media = useSelector(product.selectors.getMedia);\n const mainMedia = useSelector(product.selectors.getMainMedia);\n const totalQty = useSelector(order.selectors.getTotalQuantity);\n const link = React.useMemo(() => (currentProduct ? currentProduct.ContentUrl : null), [currentProduct]);\n\n const onClearProduct = React.useCallback(() => {\n setSelectedCode('');\n clearItemDetails();\n }, [setSelectedCode, clearItemDetails]);\n\n const onSetProduct = React.useCallback(\n async (productData) => {\n if (productData.Children) {\n await setItemDetails({ Product: { ...productData } });\n } else {\n await setSelectedCode(productData.Code);\n }\n onQuantityChange(1);\n },\n [setItemDetails, setSelectedCode, onQuantityChange]\n );\n\n React.useEffect(() => {\n if (selectedCode) {\n lastSelected.current = selectedCode;\n if (currentProduct?.Code !== selectedCode) {\n if (!selectedProduct) fetchProductDetails(selectedCode);\n else setItemDetails({ Product: JSON.parse(JSON.stringify(selectedProduct)) });\n }\n } else if (lastSelected.current) {\n lastSelected.current = null;\n clearItemDetails();\n }\n }, [selectedCode, setItemDetails, fetchProductDetails, clearItemDetails, selectedProduct, currentProduct]);\n\n console.log('catalog quick container', props.useRetailer)\n\n return (\n \n \n \n \n \n
\n \n \n {product.ProductName ?? product.DisplayName}\n \n {product?.Children?.length && product.Facets?.length ? (\n viewport.is.mobile ? (\n <>\n \n
\n \n );\n}\n\nCatalogListCard.propTypes = {\n checkoutPageLink: px.string,\n className: px.string,\n cardIdx: px.number,\n gtmListValue: px.string,\n inputStatusTooltip: px.oneOfType([px.string, px.bool]),\n imgPosition: px.string,\n isUserAuthenticated: px.bool,\n NotifyMe: px.elementType,\n notifyProps: px.objectOf(px.any),\n onAddItemToCart: px.func,\n onAddMultipleToCart: px.func,\n product: types.Product,\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport * as types from 'Common/types';\nimport { InfiniteScroll } from 'Common/components/ui';\nimport CatalogListCard from './CatalogListCard';\n\nexport default function CatalogList({\n checkoutPageLink,\n className,\n googleRecaptchaV3Sitekey,\n gtmListValue,\n imgPosition,\n inputStatusTooltip,\n isUserAuthenticated,\n NotifyMe,\n onLoadMore,\n onAddItemToCart,\n onAddMultipleToCart,\n itemStatusTooltip,\n pageInfo = {},\n products = [],\n useRecaptcha,\n totalQty = 0,\n}) {\n const isDoneLoading = React.useMemo(() => pageInfo.page * pageInfo.pageSize >= pageInfo.total, [pageInfo]);\n\n return (\n \n
\n \n ) : (\n <>\n \n {product.Children.map((c) => (\n
\n \n \n \n
\n );\n}\n\nCatalogList.propTypes = {\n className: px.string,\n checkoutPageLink: px.string,\n googleRecaptchaV3Sitekey: px.string,\n gtmListValue: px.string,\n imgPosition: px.string,\n inputStatusTooltip: px.oneOfType([px.bool, px.string]),\n isUserAuthenticated: px.bool,\n NotifyMe: px.elementType,\n onAddItemToCart: px.func,\n onAddMultipleToCart: px.func,\n onLoadMore: px.func,\n pageInfo: types.PageInfo,\n products: px.arrayOf(types.Product),\n itemStatusTooltip: px.oneOfType([px.bool, px.string]),\n useRecaptcha: px.bool,\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { useAction } from 'Common/hooks';\nimport { CatalogList as List } from 'Common/components/catalog';\nimport { catalog, order } from '~features';\nimport { NotificationSubscription } from 'Common/containers/customer';\n\nexport default function CatalogList({ inputStatusTooltip, ...props }) {\n const items = useSelector(catalog.selectors.getFilteredProducts);\n const pageInfo = useSelector(catalog.selectors.getPageInfo);\n const onLoadMore = useAction(catalog.actions.loadMore);\n const onAddItemToCart = useAction(order.actions.addItem);\n const onAddMultipleToCart = useAction(order.actions.addItems);\n const totalQty = useSelector(order.selectors.getTotalQuantity);\n\n return (\n \n {products?.map((x, i) => (\n
\n \n {showPageInfo && pageInfo ? (\n
\n );\n }\n\n return values?.length ? (\n \n {pageInfo.count ? (\n
\n ) : null}\n \n {values?.length\n ? values.map(({ facet, value }) => (\n
\n {values?.length ? (\n \n ) : null}\n \n
\n ))\n : null}\n \n \n
\n \n {facet.DisplayName}: {value.Label ?? value.Value}\n \n \n \n \n
\n ) : null;\n}\n\nCatalogQuery.propTypes = {\n className: px.string,\n facets: px.arrayOf(types.Facet),\n onClearFacetValue: px.func,\n onClearAll: px.func,\n pageInfo: px.shape({ count: px.number }),\n desktopBreakpoint: px.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),\n showPageInfo: px.bool,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { useAction } from 'Common/hooks';\nimport { CatalogQuery as Query } from 'Common/components/catalog';\nimport { catalog } from '~features';\n\nexport default function CatalogQuery({ showPageInfo = true, ...props }) {\n const facets = useSelector(catalog.selectors.getFilteredFacets);\n const pageInfo = useSelector(catalog.selectors.getPageInfo);\n const onClearAll = useAction(catalog.actions.clearAllFacetFilters);\n const onClearFacetValue = useAction(catalog.actions.clearFacetValue);\n\n return (\n \n
\n \n {values.map(({ facet, value }) => (\n
\n \n \n
\n ))}\n \n \n
\n \n {facet.DisplayName}: {value.Label ?? value.Value}\n \n \n
\n \n );\n}\n\nGridCard.propTypes = {\n className: px.string,\n product: types.Product,\n active: px.bool,\n onOpenQuickview: px.func,\n onCloseQuickview: px.func,\n stacked: px.bool,\n imgHeight: px.number,\n imgWidth: px.number,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { BREAKPOINTS } from 'Common/utils/Viewport';\nimport * as types from 'Common/types';\nimport { useBEM, useViewport } from 'Common/hooks';\nimport { InfiniteScroll } from 'Common/components/ui';\nimport { CatalogAltQuickview } from 'Common/components/catalog';\nimport GridCard from './GridCard';\n\nexport const DEFAULT_CARD_SIZE = 600;\n\nexport function maxRowSize(bp, colSize = DEFAULT_CARD_SIZE) {\n const min = BREAKPOINTS[bp] || 0;\n\n return Math.max(1, Math.floor(min / colSize));\n}\n\nexport function calculateQuickviewIndex(quickview, rowSize) {\n return quickview ? Math.ceil((quickview.idx + 1) / rowSize) * rowSize - 1 : -1;\n}\n\nexport default function CatalogSimpleGrid({\n checkoutPageLink,\n className,\n colSize = DEFAULT_CARD_SIZE,\n facets = [],\n googleRecaptchaV3Sitekey,\n gtmListValue,\n inputStatusTooltip,\n isUserAuthenticated,\n noBuyNow,\n NotifyMe,\n notifyProps,\n onAddItemToCart,\n onAddMultipleToCart,\n onLoadMore,\n pageInfo = {},\n products = [],\n Quickview = CatalogAltQuickview,\n stacked = false,\n totalQty = 0,\n useRecaptcha,\n}) {\n const viewPort = useViewport();\n const handler = React.useRef();\n const [hide, setHide] = React.useState(false);\n const [quickview, setQuickview] = React.useState(null);\n const isDoneLoading = React.useMemo(() => pageInfo.page * pageInfo.pageSize >= pageInfo.total, [pageInfo]);\n const [b, em] = useBEM('CatalogSimpleGrid', className);\n\n const rowSize = React.useMemo(\n () => ((stacked || products.length <= 2) && viewPort.is.gt('lg') ? 2 : maxRowSize(viewPort.name, colSize)),\n [viewPort.name, viewPort.is, stacked, colSize, products]\n );\n\n const quickviewIdx = React.useMemo(\n () => Math.min(calculateQuickviewIndex(quickview, rowSize), products.length - 1),\n [rowSize, quickview, products]\n );\n\n const closeQuickview = React.useCallback(() => {\n setHide(true);\n clearTimeout(handler.current);\n handler.current = setTimeout(() => {\n setQuickview(null);\n }, 310);\n }, []);\n\n React.useEffect(() => {\n if (facets.some((f) => f.Values.some((v) => v.Selected))) {\n closeQuickview();\n }\n }, [facets, closeQuickview]);\n\n const onOpenQuickview = React.useCallback(\n (idx, product) => (e) => {\n e.stopPropagation();\n e.preventDefault();\n setHide(false);\n clearTimeout(handler.current);\n setQuickview({ idx, product });\n },\n []\n );\n\n const onCloseQuickview = React.useCallback(\n (e) => {\n e.stopPropagation();\n e.preventDefault();\n closeQuickview();\n },\n [closeQuickview]\n );\n\n React.useEffect(() => () => clearTimeout(handler.current), []);\n\n return (\n \n
\n {product.DescriptionShort ? (\n {product.DisplayName}
\n\n
\n ) : null}\n \n {product.DescriptionShort}\n \n
\n \n \n
\n \n {products.map((x, i) => (\n \n \n ))}\n
\n \n\n
\n );\n}\n\nContent.propTypes = {\n className: px.string,\n data: px.shape({\n description: px.string,\n displayName: px.string,\n descriptionBackgroundUrl: px.string,\n descriptionImageUrl: px.string,\n }),\n hideImage: px.bool,\n};\n\nexport default function ProductDescriptionTab({\n className,\n id,\n labelledBy = id ? id.replace(/content/g, 'tab') : undefined,\n unwrap = false,\n ...props\n}) {\n return unwrap ? (\n \n
\n {hideImage ? null : (\n \n
\n )}\n \n
\n ) : null\n )}\n \n ) : (\n \n {videosCount === 1 ? (\n \n {videos.map((m) =>\n m?.Url && m.MediaType === 'video' && m.ThumbnailUrl ? (\n
\n \n onClickGalleryItem(m)}\n aria-label={thumbTranslator(m)}\n id={id.current}\n >\n \n \n
\n No slides to display
\n )}\n \n \n \n \n
\n
\n );\n}\n\nAccordionTable.propTypes = {\n className: px.string,\n accordionData: px.arrayOf(\n px.shape({\n content: px.arrayOf(\n px.shape({\n label: px.string,\n values: px.arrayOf(\n px.shape({\n id: px.any,\n node: px.node,\n })\n ),\n })\n ),\n rowValues: px.arrayOf(\n px.shape({\n value: px.node,\n id: px.oneOfType([px.string, px.number]),\n className: px.string,\n })\n ),\n id: px.node,\n priceInfo: px.object,\n })\n ),\n accordionHeaders: px.arrayOf(px.string),\n listDisplay: px.bool,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { useViewport, useTranslation, useOrderRequestState } from 'Common/hooks';\nimport { Url } from 'Common/utils';\nimport { AccordionTable, PureTip } from 'Common/components/ui';\nimport * as PRODUCT from '~config/product';\nimport ProductPrice from '../../ProductPrice';\nimport ProductBadge from '../../ProductBadge';\nimport ProductInput from '../../ProductInput';\nimport { Product } from 'Common/types';\nimport { GTM } from 'Common/constants';\nimport { Translation } from 'Common/components/localization';\n\nfunction isQuantityValid(value = 0) {\n const nonZeroPositiveIntegerRegex = /^[1-9][0-9]*$/;\n\n return nonZeroPositiveIntegerRegex.test(value);\n}\n\nexport default function ProductBuyInBulk({\n className,\n buyInBulkTableData,\n id,\n onAddItemToCart,\n orderLastUpdate,\n forceMobile = false,\n Price = ProductPrice,\n labelledBy = id ? id.replace(/content/g, 'tab') : undefined,\n isUserAuthenticated,\n statusTooltip,\n totalQty\n}) {\n const viewport = useViewport();\n const [isLoading, setIsLoading] = React.useState(false);\n const [rows, setRows] = React.useState({});\n const updateRow = React.useCallback(\n (rowId, state) => {\n setRows({ ...rows, [rowId]: state });\n },\n [rows]\n );\n\n const addToCartLabel = useTranslation('Form.Button.AddToCart.Label');\n const quantityLabel = useTranslation('Commerce.Product.Tabs.BuyInBulk.Quantity.Label');\n const priceLabel = useTranslation('Commerce.Product.Tabs.Price.Label');\n const typeIdLabel = useTranslation('Commerce.Product.Tabs.TypeId.Label');\n const skuLabel = useTranslation('Commerce.Product.Tabs.Sku.Label');\n const colorLabel = useTranslation('Commerce.Product.Tabs.Color.Label');\n const cartIsUpdating = useOrderRequestState();\n const [addToCartTip, setAddToCartTip] = React.useState({\n timestamp: 0,\n message: null,\n hidden: true,\n });\n\n const accordionHeaders = React.useMemo(\n () =>\n forceMobile || viewport.is.mobile\n ? [typeIdLabel, skuLabel]\n : [typeIdLabel, colorLabel, skuLabel, priceLabel, quantityLabel],\n [colorLabel, viewport, priceLabel, quantityLabel, skuLabel, typeIdLabel, forceMobile]\n );\n \n const showTip = React.useCallback(\n (tip) => (viewport.is.touch && tip ? () => alert(tip) : null),\n [viewport]\n );\n\n const statusCallback = React.useCallback(\n (code) => \n statusTooltip\n ? (successMsg, validationIssues = [], params) => {\n const setter = setAddToCartTip;\n const timestamp = Date.now();\n const placement = 'top';\n\n if (successMsg) {\n setter({ message: successMsg, params, timestamp, placement, level: 'success' });\n } else {\n const lineItem = validationIssues?.find(\n (issue) => issue.RefType === 'LineItem' && code.includes(issue.Ref)\n )?.Issue;\n\n setter({ message: lineItem, timestamp, placement, level: 'danger' });\n }\n showTip(addToCartTip);\n } : null, \n [addToCartTip, showTip, statusTooltip]\n )\n\n const onAddCart = React.useCallback(\n (code, quantity, { gtmPayload }) => {\n if (gtmPayload.ecommerce.items.length) {\n gtmPayload.ecommerce.items[0].quantity = quantity;\n }\n setIsLoading(true);\n onAddItemToCart(code, quantity, { gtmPayload, statusCallback: statusCallback(code) });\n },\n [onAddItemToCart, statusCallback]\n );\n\n React.useEffect(() => {\n setIsLoading(false);\n }, [orderLastUpdate]);\n \n const accordionData = React.useMemo(() => {\n return buyInBulkTableData.map((data) => {\n if (forceMobile || viewport.is.mobile) {\n const dropdownData = [\n {\n label: colorLabel,\n values: [\n {\n node: data.swatch,\n id: data.swatch,\n },\n ],\n },\n {\n label: priceLabel,\n values: [\n {\n node: | {header} | )}\n\n {node.value}\n | \n ))}\n {data.content?.length ? (\n\n | \n ) : null}\n \n
|---|
| \n \n \n ))}\n \n \n {facet.label ? (\n <>\n \n \n \n \n \n \n {facet.values &&\n facet.values.map((value, index) => (\n <>\n {typeof value.node === 'string' ? (\n \n \n ) : (\n // Here we provide a way to pass in a node and have it display full width like for images or buttons.\n \n {facet.values[0].node}\n \n )}\n | \n
\n \n \n onAddCart(data.id, rows[data.id]?.quantity, { gtmPayload: data.gtaPayload })\n }\n className=\"w-100 btn-primary\"\n data-toggle=\"tooltip\"\n data-placement=\"top\"\n >\n
\n ),\n id: 'addToCart',\n },\n ],\n },\n ];\n\n return {\n content: dropdownData,\n id: data.id,\n rowValues: [\n {\n value: (\n \n
\n ),\n id: data.imageUrl,\n },\n {\n value: data.id,\n id: data.id,\n },\n ],\n };\n }\n\n return {\n id: data.id,\n rowValues: [\n {\n value: (\n \n
\n ),\n id: data.imageUrl,\n },\n {\n value: data.swatch,\n id: data.swatch,\n },\n {\n value: data.id,\n id: data.id,\n },\n {\n value: - \n {features.map((feature) => (\n
- {feature} \n ))}\n
\n
\n )}\n \n );\n}\n\nProductFeatures.propTypes = {\n className: px.string,\n features: px.arrayOf(px.string),\n labelledBy: px.string,\n id: px.string,\n forceMobile: px.bool,\n};","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Product } from 'Common/types';\nimport ProductBadge from '../../ProductBadge';\nimport ProductInput from '../../ProductInput';\n\nexport default function ProductTable({\n addToCartLabel,\n className,\n gtmListValue,\n isLoading,\n isUserAuthenticated,\n statusTooltip,\n onAddItemToCart,\n productInfo,\n tableData,\n totalQty = 0,\n}) {\n return (\n \n
\n - \n {features.slice(0, Math.ceil(features.length / 2)).map((feature) => (\n
- {feature} \n ))}\n
\n
\n - \n {features.slice(Math.ceil(features.length / 2)).map((feature) => (\n
- {feature} \n ))}\n
\n \n \n
\n
\n );\n}\n\nProductTable.propTypes = {\n addToCartLabel: px.string,\n className: px.string,\n gtmListValue: px.string,\n isLoading: px.bool,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n statusTooltip: px.oneOf([false, true, undefined, null, 'top', 'bottom', 'right']),\n onAddItemToCart: px.func,\n productInfo: Product,\n tableData: px.shape({\n columns: px.arrayOf(px.string),\n rows: px.arrayOf(\n px.shape({\n values: px.arrayOf(\n px.shape({\n id: px.string,\n values: px.arrayOf(px.string),\n hasStock: px.bool,\n gtaPayload: px.object,\n })\n ),\n label: px.string,\n })\n ),\n }),\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Product } from 'Common/types';\nimport ProductBadge from '../../ProductBadge';\nimport ProductInput from '../../ProductInput';\n\nexport default function ProductTableMobile({\n addToCartLabel,\n className,\n gtmListValue,\n isLoading,\n isUserAuthenticated,\n statusTooltip,\n onAddItemToCart,\n productInfo,\n specsTableBreakpoint,\n tableData,\n totalQty = 0,\n}) {\n return (\n | \n {column}\n | \n ))}\n {onAddItemToCart ?: null}\n | |
|---|---|---|
| \n {row.label} \n | \n {row.values.map((cell) => (\n \n {cell.values.map((cellVal, index) => (\n \n {cellVal}\n {index < cell.values.length - 1 ? ', ' : null}\n \n ))}\n | \n ))}\n {onAddItemToCart ? (\n \n | \n ) : null}\n
\n \n \n
\n
\n );\n}\n\nProductTableMobile.propTypes = {\n addToCartLabel: px.string,\n className: px.string,\n gtmListValue: px.string,\n isLoading: px.bool,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n statusTooltip: px.oneOf([false, true, undefined, null, 'top', 'bottom']),\n onAddItemToCart: px.func,\n productInfo: Product,\n specsTableBreakpoint: px.number,\n tableData: px.shape({\n columns: px.arrayOf(\n px.shape({\n name: px.string,\n hasStock: px.bool,\n })\n ),\n rows: px.arrayOf(\n px.shape({\n values: px.arrayOf(\n px.shape({\n id: px.string,\n values: px.arrayOf(px.string),\n })\n ),\n label: px.string,\n })\n ),\n }),\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { useTranslation, useViewport } from 'Common/hooks';\nimport { Product } from 'Common/types';\nimport ProductTable from './ProductTable';\nimport ProductTableMobile from './ProductTableMobile';\n\nexport default function ProductSpecifications({\n className,\n forceMobile = false,\n gtmListValue,\n id,\n statusTooltip,\n isUserAuthenticated,\n labelledBy = id ? id.replace(/content/g, 'tab') : undefined,\n onAddItemToCart,\n orderLastUpdate,\n productDefinitions,\n productInfo,\n specifications,\n specsTableBreakpoint,\n totalQty = 0,\n}) {\n const viewport = useViewport();\n const [isLoading, setIsLoading] = React.useState(false);\n const addToCartLabel = useTranslation('Form.Button.AddToCart.Label');\n\n React.useEffect(() => {\n setIsLoading(false);\n }, [orderLastUpdate]);\n\n return (\n | \n {index > 0 ? | \n ))}\n |
|---|---|
| \n {row.label} \n | \n {row.values.map((cell) => (\n \n {cell.values.map((cellVal, index) => (\n \n {cellVal}\n {index < cell.values.length - 1 ? ', ' : null}\n \n ))}\n | \n ))}\n
| \n {tableData.columns.slice(1).map((column) => (\n | \n | \n ))}\n
\n {productDefinitions.map((definition) => (\n
\n ) : null}\n \n );\n}\n\nProductSpecifications.propTypes = {\n className: px.string,\n forceMobile: px.bool,\n gtmListValue: px.string,\n id: px.string,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n statusTooltip: px.oneOf([false, true, undefined, null, 'top', 'bottom', 'right']),\n labelledBy: px.string,\n onAddItemToCart: px.func,\n orderLastUpdate: px.number,\n productDefinitions: px.arrayOf(px.string),\n productInfo: Product,\n specifications: px.shape({\n tableDataMobile: px.shape({\n columns: px.arrayOf(\n px.shape({\n name: px.string,\n hasStock: px.bool,\n })\n ),\n rows: px.arrayOf(\n px.shape({\n values: px.arrayOf(\n px.shape({\n id: px.string,\n values: px.arrayOf(px.string),\n })\n ),\n label: px.string,\n })\n ),\n }),\n tableDataDesktop: px.shape({\n columns: px.arrayOf(px.string),\n rows: px.arrayOf(\n px.shape({\n values: px.arrayOf(\n px.shape({\n id: px.string,\n values: px.arrayOf(px.string),\n hasStock: px.bool,\n gtaPayload: px.object,\n })\n ),\n label: px.string,\n })\n ),\n }),\n showAddToCartButton: px.bool,\n }),\n specsTableBreakpoint: px.number,\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { AccordionTable } from 'Common/components/ui';\nimport { useTranslation, useViewport } from 'Common/hooks';\nimport ProductPrice from '../../ProductPrice';\n\nexport default function ProductIncludes({\n className,\n facetTableData,\n typeId,\n id,\n Price = ProductPrice,\n orderLastUpdate,\n onAddItemToCart,\n forceMobile = false,\n showAddToCart = true,\n labelledBy = id ? id.replace(/content/g, 'tab') : undefined,\n}) {\n const viewport = useViewport();\n const [isLoading, setIsLoading] = React.useState(false);\n const [rows, setRows] = React.useState(\n facetTableData.reduce((acc, data) => ({ ...acc, [data.id]: { quantity: data.childRelationQuantity } }), {})\n );\n\n const updateRow = React.useCallback(\n (rowId, state) => {\n setRows({ ...rows, [rowId]: state });\n },\n [rows]\n );\n\n const addToCartLabel = useTranslation('Form.Button.AddToCart.Label');\n const quantityLabel = useTranslation('Commerce.Product.Tabs.BuyInBulk.Quantity.Label');\n const priceLabel = useTranslation('Commerce.Product.Tabs.Price.Label');\n const typeIdLabel = useTranslation('Commerce.Product.Tabs.TypeId.Label');\n const skuLabel = useTranslation('Commerce.Product.Tabs.Sku.Label');\n\n const accordionHeaders = React.useMemo(() => {\n let columnHeaders = [typeIdLabel, skuLabel];\n\n if (forceMobile || viewport.is.mobile) return columnHeaders;\n if (typeId === 'Bundle') columnHeaders = columnHeaders.concat([priceLabel]);\n\n return showAddToCart\n ? columnHeaders.concat([quantityLabel, addToCartLabel])\n : columnHeaders.concat([quantityLabel]);\n }, [\n viewport,\n typeId,\n addToCartLabel,\n priceLabel,\n quantityLabel,\n skuLabel,\n typeIdLabel,\n forceMobile,\n showAddToCart,\n ]);\n\n const onAddCart = React.useCallback(\n (code, quantity, gtmPayload) => {\n if (gtmPayload.ecommerce.items.length) {\n gtmPayload.ecommerce.items[0].quantity = quantity;\n }\n setIsLoading(true);\n onAddItemToCart(code, quantity, { gtmPayload });\n },\n [onAddItemToCart]\n );\n\n React.useEffect(() => {\n setIsLoading(false);\n }, [orderLastUpdate]);\n\n const accordionData = React.useMemo(() => {\n return facetTableData.map((data) => {\n if (forceMobile || viewport.is.mobile) {\n let content = [];\n\n if (typeId === 'Bundle') {\n content = content.concat([\n {\n label: priceLabel,\n values: [\n {\n node: \n {definition}\n
\n ))}\n{data.childRelationQuantity}
,\n id: quantityLabel,\n },\n ],\n },\n ]);\n }\n\n return {\n id: data.id,\n content: showAddToCart\n ? content.concat([\n {\n label: null,\n values: [\n {\n node: (\n{data.childRelationQuantity}
,\n id: 'Commerce.Product.Tabs.BuyInBulk.Quantity.Label',\n },\n ]);\n }\n\n return {\n id: data.id,\n rowValues: showAddToCart\n ? rowValues.concat({\n value: (\n\n
\n );\n}\n\nProductAccordion.propTypes = {\n BuyInBulkTab: px.elementType,\n className: px.string,\n content: px.arrayOf(\n px.shape({\n tab: px.string,\n content: px.any,\n typeId: px.string,\n showAddToCart: px.bool,\n })\n ),\n DescriptionTab: px.elementType,\n displayOnly: px.bool,\n FeaturesTab: px.elementType,\n gtmListValue: px.string,\n hideImage: px.bool,\n hideTitle: px.bool,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n IncludesTab: px.elementType,\n multiExpansion: px.bool,\n onAddItemToCart: px.func,\n orderLastUpdate: px.number,\n pageId: px.string,\n productDefinitions: px.arrayOf(px.string),\n productInfo: Product,\n SpecificationsTab: px.elementType,\n specsTableBreakpoint: px.number,\n startExpandedIndex: px.number,\n statusTooltip: px.oneOf([false, true, undefined, null, 'top', 'bottom', 'right']),\n totalQty: px.number,\n useChevron: px.bool,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { useAction, useProductTabContent } from 'Common/hooks';\nimport { ProductAccordion as Accordion, ProductDescriptionTab } from 'Common/components/product';\nimport { customer, product, order } from '~features';\nimport * as GTM from 'Common/constants/gtm';\n\nexport default function ProductAccordion({ className, ...props }) {\n const options = useSelector(product.selectors.getOptions);\n const isUserAuthenticated = useSelector(customer.selectors.isLoggedIn);\n const productInfo = useSelector(product.selectors.getProduct);\n const productDefinitions = useSelector(product.selectors.getProductDefinitions);\n const onAddItemToCart = useAction(order.actions.addItem);\n const orderLastUpdate = useSelector(order.selectors.getLastUpdate);\n const totalQty = useSelector(order.selectors.getTotalQuantity);\n const displayOnly = React.useMemo(() => productInfo?.StockStatus === 'DisplayOnly', [productInfo]);\n const content = useProductTabContent();\n\n return content?.length ? (\n - \n {content.map((tab) => (\n
\n
\n \n ))}\n \n
\n );\n}\n\nProductGridCell.propTypes = {\n className: px.string,\n variant: Product,\n onAddToCart: px.func,\n gtmListValue: px.string,\n checkoutPageLink: px.string,\n isUserAuthenticated: px.bool,\n inputReverseButtonOrder: px.bool,\n inputNumInputButtons: px.bool,\n resetQtyAfterAdd: px.bool,\n addToCartLabel: px.string,\n NotifyMe: px.elementType,\n inputStatusTooltip: px.oneOfType([px.string, px.bool]),\n noQty: px.bool,\n notifyProps: px.objectOf(px.any),\n defaultQuantity: px.number,\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Product } from 'Common/types';\nimport { Translation } from 'Common/components/localization';\nimport ProductGridCell from './ProductGridCell';\n\nconst VAR_CLS = 'col-12 col-md-6 col-xl-4';\n\nexport default function ProductGridView({\n variants = [],\n onAddToCart,\n title,\n className,\n gtmListValue,\n checkoutPageLink,\n isUserAuthenticated,\n inputReverseButtonOrder,\n inputNumInputButtons,\n resetQtyAfterAdd,\n inputStatusTooltip,\n NotifyMe,\n googleRecaptchaV3Sitekey,\n useRecaptcha,\n totalQty = 0,\n}) {\n const props = React.useMemo(\n () => ({\n checkoutPageLink,\n isUserAuthenticated,\n gtmListValue,\n onAddToCart,\n inputReverseButtonOrder,\n inputNumInputButtons,\n resetQtyAfterAdd,\n inputStatusTooltip,\n }),\n [\n checkoutPageLink,\n isUserAuthenticated,\n gtmListValue,\n onAddToCart,\n inputReverseButtonOrder,\n inputNumInputButtons,\n resetQtyAfterAdd,\n inputStatusTooltip,\n ]\n );\n\n return (\n \n
\n \n
\n {variant.DisplayName}
\n\n
\n )}\n \n {title ? (\n
\n );\n}\n\nProductGridView.propTypes = {\n className: px.string,\n variants: px.arrayOf(Product),\n title: px.string,\n onAddToCart: px.func,\n gtmListValue: px.string,\n googleRecaptchaV3Sitekey: px.string,\n useRecaptcha: px.bool,\n checkoutPageLink: px.string,\n isUserAuthenticated: px.bool,\n inputReverseButtonOrder: px.bool,\n inputNumInputButtons: px.bool,\n resetQtyAfterAdd: px.bool,\n NotifyMe: px.elementType,\n inputStatusTooltip: px.oneOfType([px.string, px.bool]),\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { useAction } from 'Common/hooks';\nimport { LinkItem } from 'Common/types';\nimport { TAGS } from 'Common/constants/gtm';\nimport { ProductGridView as GridView } from 'Common/components/product';\nimport { NotificationSubscription } from 'Common/containers/customer';\nimport { product, order } from '~features';\n\nexport default function ProductGridView(props) {\n const onAddItemToCart = useAction(order.actions.addItem);\n const variants = useSelector(product.selectors.getChildren);\n const facets = useSelector(product.selectors.getFacets);\n const totalQty = useSelector(order.selectors.getTotalQuantity);\n const title = React.useMemo(\n () =>\n facets.length\n ? facets[0].AttributeFacetLabel ||\n facets[0].DisplayName ||\n facets[0].AttributeDisplayName ||\n facets[0].Attribute\n : 'Commerce.CatalogAttribute.Variation.FacetLabel',\n [facets]\n );\n\n return (\n \n \n
\n ) : null}\n {variants.map((variant) => (\n \n \n {products.map((product, index) => (\n \n {showQuick ? (\n
\n );\n}\n\nProductRecommendations.propTypes = {\n className: px.string,\n checkoutPageLink: px.string,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n ProductPartialView: px.elementType,\n products: px.arrayOf(Product),\n RecommendedProductCard: px.elementType,\n slidesToShow: px.number,\n trackProductQuickviewClick: px.func,\n itemStatusTooltip: px.string,\n totalQty: px.number,\n useChildTable: px.bool,\n useRelatedEntries: px.bool\n};\n","import * as React from 'react';\nimport { ProductVideo as Video } from 'Common/components/ui';\n\nconst isIOS = navigator?.platform ? /iphone|ipod|ipad/i.test(navigator.platform) : false;\n\nexport default function ProductVideo(props) {\n return ;\n}\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { Product } from 'Common/types';\nimport { Url } from 'Common/utils';\nimport * as PRODUCT from '~config/product';\nimport ProductPrice from 'Common/components/product/ProductPrice';\nimport ProductRating from 'Common/components/product/ProductRating';\nimport { Translation } from 'Common/components/localization';\nimport { ProductInfo } from 'Common/models';\n\nexport default function RecommendedProductCard({ product, onOpenQuick, onSelectProduct, index, hasBorder=false }) {\n const productLink = React.useMemo(\n () => (product ? `${product.ContentUrl}?prid=${product.ProductRecommendationId.toString()}` : null),\n [product]\n );\n\n const productReviewProviderEntityId = React.useMemo(\n () => (product ? product.ReviewProviderEntityId : null),\n [product]\n );\n\n const productUrlIsForSameSite = React.useMemo(\n () =>\n productLink ? (Url.isAbsolute(productLink) ? new URL(productLink).host === location.host : true) : false,\n [productLink]\n );\n\n const anchorTarget = React.useMemo(() => (productUrlIsForSameSite ? '_self' : '_blank'), [productUrlIsForSameSite]);\n const anchorRel = React.useMemo(\n () => (productUrlIsForSameSite ? undefined : 'noopener noreferrer'),\n [productUrlIsForSameSite]\n );\n\n const isDisplayOnly = ProductInfo.isDisplayOnly(product)\n\n return (\n \n
\n );\n}\n\nRecommendedProductCard.propTypes = {\n product: Product,\n onOpenQuick: px.func,\n onSelectProduct: px.func,\n index: px.number,\n hasBorder: px.bool\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { ProductRecommendations as Recommendations } from 'Common/components/product';\nimport { useAction } from 'Common/hooks';\nimport { RecommendedProductCard as ProductCard, ProductPartialView } from '~components/product';\nimport { order, product } from '~features';\nimport { Translation } from 'Common/components/localization';\n\nexport default function ProductRecommendations({ className, isUserAuthenticated, checkoutPageLink, useRelatedEntries=false, useChildTable=false, ...props }) {\n const trackProductQuickviewClick = useAction(product.actions.trackProductQuickviewClick);\n const products = useSelector(product.selectors.getEpiRecommedationCrossSellProducts);\n const totalQty = useSelector(order.selectors.getTotalQuantity);\n\n const fetched = React.useRef(null);\n const currentCode = useSelector(product.selectors.getSelectedCode);\n const relatedProducts = useSelector(product.selectors.getRelatedProducts);\n const fetchRelatedProducts = useAction(product.actions.fetchRelatedProducts);\n\n React.useEffect(() => {\n if (!relatedProducts && currentCode && fetched.current !== currentCode) {\n fetched.current = currentCode;\n fetchRelatedProducts(currentCode);\n }\n }, [relatedProducts, fetchRelatedProducts, currentCode]); \n\n const displayNone = React.useMemo(() => {\n return (useRelatedEntries && !relatedProducts?.length) || (!useRelatedEntries && !products?.length);\n }, [useRelatedEntries, relatedProducts, products]);\n\n return displayNone ? null : (\n <>\n {useRelatedEntries ? (\n \n \n
\n \n
\n \n
\n \n
\n \n \n {product.DisplayName}\n \n
\n {isDisplayOnly ? null : (\n \n
\n ) \n }\n \n
\n \n \n
\n
\n ) : (\n \n
\n )}\n \n \n setPlayVideo(false)}\n className=\"btn close p-3\"\n aria-label={lblStop}\n title={lblStop}\n >\n \n \n {isIOS ? (\n
\n ) : (\n \n
\n )}\n \n );\n}\n\nProductVideo.propTypes = {\n className: px.string,\n videoUrl: px.string,\n backgroundImage: px.string,\n title: px.string,\n isIOS: px.bool,\n};\n","import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { Dropdown } from 'Common/components/ui';\nimport { Cell, Grid, Row } from 'Common/components/ui/Grid';\n\nexport default function SparePartsDropdown({\n className,\n style,\n options = [],\n placeholder,\n selected,\n setSelected,\n showId = false,\n ...props\n}) {\n const sortedOptions = useMemo(() => {\n return [...options].sort((a, b) => a.Name.localeCompare(b.Name));\n }, [options]);\n\n const [isOpen, setIsOpen] = useState(false);\n const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);\n const dropdownRef = useRef(null);\n\n const onChange = useCallback(\n (c) => {\n setSelected(c);\n setIsOpen(false);\n },\n [setSelected]\n );\n\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {\n setIsOpen(false);\n }\n };\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside);\n }\n\n return () => {\n if (isOpen) {\n document.removeEventListener('mousedown', handleClickOutside);\n }\n };\n }, [isOpen]);\n\n return (\n \n \n
\n setPlayVideo(!playVideo)}\n type=\"button\"\n className=\"btn\"\n data-toggle=\"modal\"\n data-target=\"#@(uid)_Modal\"\n aria-label={lblPlay}\n title={lblPlay}\n >\n \n \n
\n {title}
\n\n
\n \n \n {sortedOptions?.map((c) => (\n \n \n onChange(c)}\n className={cx('SearchDropdownFacet__option btn btn-sm')}\n >\n {c.Name}\n {showId && c.Id ? ` (${c.Id})` : null}\n \n | \n
\n ))}\n \n \n
\n );\n}\n\nSparePartsDropdown.propTypes = {\n className: px.string,\n style: px.object,\n options: px.arrayOf(\n px.shape({\n Name: px.string,\n Id: px.oneOfType([px.string, px.number]),\n })\n ),\n placeholder: px.string,\n selected: px.shape({\n Name: px.string,\n Id: px.oneOfType([px.string, px.number]),\n }),\n setSelected: px.func,\n showId: px.bool,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { useViewport } from 'Common/hooks';\nimport { Product } from 'Common/types';\nimport { Formatter } from 'Common/utils';\nimport { Translation } from 'Common/components/localization';\nimport { ProductGallery, ProductTitle } from 'Common/components/product';\n\nfunction SparePartDetailsGrid({ sparePartInfo }) {\n return (\n \n
\n );\n}\n\nSparePartDetailsGrid.propTypes = {\n sparePartInfo: Product,\n};\n\nexport default function SparePartsPartial({\n className,\n Gallery = ProductGallery,\n galleryProps = {},\n sparePartInfo,\n sparePartTitle,\n}) {\n const viewport = useViewport();\n const isMobile = React.useMemo(() => viewport.is.lt('md'), [viewport]);\n\n return (\n \n
\n {sparePartInfo?.Code}
\n {sparePartInfo?.Price.ListPrice.Amount > 0 ? (\n <>\n \n
\n \n {Formatter.currency(\n sparePartInfo?.Price.ListPrice.Amount,\n sparePartInfo?.Price.ListPrice.Currency\n )}\n
\n \n ) : null}\n \n {!isMobile ? (\n <>\n
\n );\n}\n\nSparePartsPartial.propTypes = {\n className: px.string,\n Gallery: px.elementType,\n galleryProps: px.objectOf(px.any),\n sparePartInfo: Product,\n sparePartTitle: px.string,\n};\n","import * as React from 'react';\nimport { useLocalFeature } from 'Common/hooks';\nimport * as types from 'Common/types';\nimport { SparePartsPartial as SpareParts } from 'Common/components/product/SpareParts';\nimport { product } from '~features';\n\nexport default function SparePartsPartial({ sparePartsData = {} }) {\n const [localSelector, localAction] = useLocalFeature(product, 'product');\n const lastDataRef = React.useRef(null);\n const updateSparePartsData = localAction(product.actions.setItemDetails);\n const sparePartTitle = localSelector(product.selectors.getChildTitle);\n const sparePartInfo = localSelector(product.selectors.getProduct);\n const media = localSelector(product.selectors.getMedia);\n const mainMedia = localSelector(product.selectors.getMainMedia);\n\n React.useEffect(() => {\n if (lastDataRef.current !== sparePartsData) {\n updateSparePartsData(sparePartsData);\n lastDataRef.current = sparePartsData;\n }\n }, [sparePartsData, updateSparePartsData]);\n\n return (\n \n
\n \n
\n \n ) : (\n \n
\n )}\n \n
\n \n
\n \n
\n \n \n \n \n | \n {!isMobile ? (\n \n | \n ) : null}\n {isPriceExists && !isMobile ? (\n \n | \n ) : null}\n | \n \n {spareParts.map((part) => {\n const isOpen = selectedPartCode === part.Code;\n\n return [\n setSelectedPartCode(isOpen ? null : part.Code)}>\n | {part.Code} | \n {!isMobile ? {part.DisplayName} | : null}\n {isPriceExists && !isMobile ? (\n \n {part.Price.ListPrice.Amount > 0\n ? Formatter.currency(part.Price.ListPrice.Amount, part.Price.ListPrice.Currency)\n : null}\n | \n ) : null}\n \n \n | \n
,\n isOpen && (\n \n \n | \n \n ),\n ].filter(Boolean);\n })}\n \n
\n ) : (\n \n
\n );\n}\n\nSparePartsTable.propTypes = {\n spareParts: px.arrayOf(\n px.shape({\n Code: px.string.isRequired,\n DisplayName: px.string.isRequired,\n Price: px.shape({\n ListPrice: px.shape({\n Amount: px.number.isRequired,\n Currency: px.string.isRequired,\n }).isRequired,\n }).isRequired,\n })\n ).isRequired,\n className: px.string,\n};\n","import React, { useEffect, useState } from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Product } from 'Common/types';\nimport { useTranslation, useViewport } from 'Common/hooks';\nimport { Loader } from 'Common/components/ui';\nimport { SparePartsDropdown, SparePartsTable } from '../SpareParts';\n\nexport default function SparePartsFinder({\n clearItemDetails,\n currentProduct,\n fetchProductDetails,\n fetchProducts,\n fetchSpareParts,\n partsLoading,\n products,\n selectedCode,\n selectedProduct,\n setItemDetails,\n setSelected,\n spareParts,\n variants,\n ...props\n}) {\n const { categories, className, desktopImage, mobileImage, style } = props;\n\n const viewport = useViewport();\n const [selectedCategory, setSelectedCategory] = useState();\n const [selectedProductOption, setSelectedProductOption] = useState();\n const [selectedVariant, setSelectedVariant] = useState();\n const [mappedChildren, setMappedChildren] = useState();\n const [showPlaceholder, setShowPlaceholder] = useState(true);\n const [showTable, setShowTable] = useState(false);\n const imageAlt = useTranslation('SpareParts.Table.Placeholder.Image.AltText');\n const categoryLbl = useTranslation('SpareParts.Finder.Category.Dropdown.Label');\n const productLbl = useTranslation('SpareParts.Finder.Product.Dropdown.Label');\n const noProductsLbl = useTranslation('SpareParts.Finder.Product.Dropdown.Empty.Label');\n const variantLbl = useTranslation('SpareParts.Finder.Variant.Dropdown.Label');\n const noVariantsLbl = useTranslation('SpareParts.Finder.Variant.Dropdown.Empty.Label');\n\n useEffect(() => {\n if (selectedCategory) {\n fetchProducts(selectedCategory.Id);\n clearSelections();\n }\n }, [clearSelections, fetchProducts, selectedCategory]);\n\n const onReset = React.useCallback(() => {\n setSelectedCategory(null);\n clearSelections();\n }, [clearSelections, setSelectedCategory]);\n\n const clearSelections = React.useCallback(() => {\n setSelectedProductOption(null);\n setSelectedVariant(null);\n setMappedChildren(null);\n onClearProduct();\n }, [onClearProduct, setMappedChildren, setSelectedProductOption, setSelectedVariant]);\n\n const onClearProduct = React.useCallback(() => {\n setSelected('');\n clearItemDetails();\n }, [setSelected, clearItemDetails]);\n\n useEffect(() => {\n if (selectedCode) {\n if (currentProduct?.Code !== selectedCode) {\n if (!selectedProduct) fetchProductDetails(selectedCode);\n else\n setItemDetails({\n Product: JSON.parse(JSON.stringify(selectedProduct)),\n ProductsByNode: products,\n });\n }\n }\n }, [\n selectedCode,\n setItemDetails,\n fetchProductDetails,\n clearItemDetails,\n selectedProduct,\n selectedProductOption,\n currentProduct,\n products,\n ]);\n\n useEffect(() => {\n if (selectedProductOption) {\n setSelected(selectedProductOption.Id);\n setSelectedVariant(null);\n }\n }, [onClearProduct, setSelected, selectedProductOption]);\n\n useEffect(() => {\n if (variants) {\n const childrenArray = Array.isArray(variants) ? variants : [variants];\n\n const mapped = childrenArray.map((c) => ({\n Name: c.DisplayName,\n Id: c.Code,\n }));\n\n setMappedChildren(mapped);\n }\n }, [variants]);\n\n useEffect(() => {\n if (selectedVariant) {\n fetchSpareParts(selectedVariant.Id);\n }\n }, [fetchSpareParts, selectedVariant]);\n\n useEffect(() => {\n if (spareParts) {\n setTimeout(() => {\n setShowPlaceholder(false);\n setTimeout(() => {\n setShowTable(true);\n }, 50);\n }, 500);\n } else {\n setTimeout(() => {\n setShowTable(false);\n setTimeout(() => {\n setShowPlaceholder(true);\n }, 50);\n }, 500);\n }\n }, [spareParts]);\n\n return (\n \n {partsLoading ?
\n
\n );\n}\n\nSparePartsFinder.propTypes = {\n categories: px.arrayOf(\n px.shape({\n Name: px.string,\n Id: px.oneOfType([px.string, px.number]),\n })\n ),\n className: px.string,\n clearItemDetails: px.func,\n currentProduct: Product,\n desktopImage: px.string,\n fetchProductDetails: px.func,\n fetchProducts: px.func,\n fetchSpareParts: px.func,\n mobileImage: px.string,\n partsLoading: px.bool,\n products: px.arrayOf(Product),\n selectedCode: px.string,\n selectedProduct: Product,\n setItemDetails: px.func,\n setSelected: px.func,\n spareParts: px.arrayOf(Product),\n style: px.object,\n variants: px.arrayOf(Product),\n};\n","import React, { useCallback, useRef, useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport { useAction } from 'Common/hooks';\nimport { product } from '~features';\nimport { SparePartsFinder as SpareParts } from 'Common/components/product/SpareParts';\n\nexport default function SparePartsFinder({ ...props }) {\n const partsLoadCount = useRef(0);\n const [partsLoading, setPartsLoading] = useState(false);\n\n const startLoader = useCallback(() => {\n partsLoadCount.current += 1;\n setPartsLoading(true);\n }, []);\n\n const stopLoader = useCallback(() => {\n partsLoadCount.current -= 1;\n if (!partsLoadCount.current) setPartsLoading(false);\n }, []);\n\n const fetchProductsByNode = useAction(product.actions.fetchProductsByNode, startLoader, stopLoader);\n const setSelectedCode = useAction(product.actions.setSelectedCode);\n const setItemDetails = useAction(product.actions.setItemDetails);\n const clearItemDetails = useAction(product.actions.clearItemDetails);\n const fetchProductDetails = useAction(product.actions.fetchProductDetails, startLoader, stopLoader);\n const fetchSpareParts = useAction(product.actions.fetchSpareParts, startLoader, stopLoader);\n const getProductsByNode = useSelector(product.selectors.getProductsByNode);\n const getChildren = useSelector(product.selectors.getChildren);\n const currentProduct = useSelector(product.selectors.getProduct);\n const selectedCode = useSelector(product.selectors.getSelectedCode);\n const selectedProduct = useSelector(product.selectors.getSelectedProduct);\n const getSpareParts = useSelector(product.selectors.getSpareParts);\n\n return (\n \n
\n {showPlaceholder && (\n
\n \n
\n )}\n {showTable && (\n \n
\n )}\n \n {data.map((doc, index) => (\n \n ))}\n
\n )\n}\n\nProductManuals.propTypes = {\n data: px.arrayOf(px.object),\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { ProductDescriptionTab } from 'Common/components/product';\nimport {\n ProductBuyInBulk,\n ProductFeatures,\n ProductSpecifications,\n ProductIncludes,\n ProductManuals\n} from './ProductTabContent/TabContent';\nimport { Translation } from '../localization';\n\nexport default function StackContent({\n className,\n displayOnly,\n onAddItemToCart,\n orderLastUpdate,\n productDefinitions,\n specsTableBreakpoint,\n stackContent,\n totalQty = 0,\n ...props\n}) {\n\n return (\n \n
\n );\n}\n\nStackContent.propTypes = {\n className: px.string,\n displayOnly: px.bool,\n onAddItemToCart: px.func,\n orderLastUpdate: px.number,\n productDefinitions: px.arrayOf(px.string),\n specsTableBreakpoint: px.number,\n stackContent: px.arrayOf(\n px.shape({\n tab: px.string,\n content: px.any,\n typeId: px.string,\n showAddToCart: px.bool,\n })\n ),\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { useAction, useProductTabContent } from 'Common/hooks';\nimport { ProductDescriptionTab, StackContent as StackContentComponent } from 'Common/components/product';\nimport { product, order } from '~features';\nimport * as GTM from 'Common/constants/gtm';\n\nexport default function StackContent({\n className,\n DescriptionTab = ProductDescriptionTab,\n pageId,\n specsTableBreakpoint,\n statusTooltip,\n isUserAuthenticated\n}) {\n const options = useSelector(product.selectors.getOptions);\n const productInfo = useSelector(product.selectors.getProduct);\n const productDefinitions = useSelector(product.selectors.getProductDefinitions);\n const onAddItemToCart = useAction(order.actions.addItem);\n const orderLastUpdate = useSelector(order.selectors.getLastUpdate);\n const totalQty = useSelector(order.selectors.getTotalQuantity);\n const displayOnly = React.useMemo(() => productInfo?.StockStatus === 'DisplayOnly', [productInfo]);\n const stackContent = useProductTabContent(true);\n\n return stackContent.length ? (\n \n {stackContent.map((tab, index) => {\n let Component = null;\n\n switch (tab.tab) {\n case 'Includes':\n Component = (\n
\n \n
\n );\n })}\n \n \n
\n {Component}\n \n
\n );\n}\n\nProductTabContent.propTypes = {\n BuyInBulkTab: px.elementType,\n className: px.string,\n DescriptionTab: px.elementType,\n displayOnly: px.bool,\n FeaturesTab: px.elementType,\n gtmListValue: px.string,\n IncludesTab: px.elementType,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n onAddItemToCart: px.func,\n orderLastUpdate: px.number,\n pageId: px.string,\n productDefinitions: px.arrayOf(px.string),\n productInfo: Product,\n SpecificationsTab: px.elementType,\n specsTableBreakpoint: px.number,\n statusTooltip: px.oneOf([false, true, undefined, null, 'top', 'bottom', 'left']),\n tabContent: px.arrayOf(\n px.shape({\n tab: px.string,\n content: px.any,\n typeId: px.string,\n showAddToCart: px.bool,\n })\n ),\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { useAction, useProductTabContent } from 'Common/hooks';\nimport { ProductDescriptionTab, ProductTabContent } from 'Common/components/product';\nimport { product, order } from '~features';\nimport * as GTM from 'Common/constants/gtm';\n\nexport default function TabContent({\n className,\n DescriptionTab = ProductDescriptionTab,\n pageId,\n specsTableBreakpoint,\n statusTooltip,\n isUserAuthenticated,\n}) {\n const options = useSelector(product.selectors.getOptions);\n const productInfo = useSelector(product.selectors.getProduct);\n const productDefinitions = useSelector(product.selectors.getProductDefinitions);\n const onAddItemToCart = useAction(order.actions.addItem);\n const orderLastUpdate = useSelector(order.selectors.getLastUpdate);\n const totalQty = useSelector(order.selectors.getTotalQuantity);\n const displayOnly = React.useMemo(() => productInfo?.StockStatus === 'DisplayOnly', [productInfo]);\n const tabContent = useProductTabContent();\n\n return tabContent.length ? (\n \n
\n - \n {tabContent.map((tab, index) => (\n
- \n
\n \n \n ))}\n
\n {tabContent.map((tab, index) => (\n
\n \n {viewport.is.mobile ? (\n <>\n
\n );\n}\n\nCartLineItem.propTypes = {\n viewport: px.shape({ is: px.shape({ lt: px.function, lte: px.function, mobile: px.bool }) }),\n item: types.CartLineItem,\n shipment: types.Shipment,\n getQty: px.func,\n setEditingItem: px.func,\n addItem: px.func,\n hasChange: px.func,\n lblAdd: px.string,\n lblEdit: px.string,\n editingItem: px.string,\n lblRemove: px.string,\n onChangeQty: px.func,\n onDelete: px.func,\n currency: px.string,\n isEditable: px.bool,\n QuickView: px.elementType,\n gtmListValue: px.string,\n OOS: px.bool,\n statusTooltip: px.string,\n fauxQuantity: px.oneOfType([px.string, px.number]),\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport * as types from 'Common/types';\nimport { useViewport, useTranslation } from 'Common/hooks';\nimport { GTM } from 'Common/utils';\nimport { Translation } from '../localization';\nimport { CatalogQuickView } from '../catalog';\nimport CartLineItem from './CartLineItem';\n\nexport default function CartTable({\n className,\n Forms = [],\n qtyChanges = [],\n QuickView = CatalogQuickView,\n onChangeQty,\n onDelete,\n currency,\n onAddItemToCart,\n emptyLabel = 'Commerce.Order.Cart.EmptyCart.Label',\n isEditable = true,\n gtmListValue,\n statusTooltip,\n totalQty,\n}) {\n const viewport = useViewport();\n const lblAdd = useTranslation('Commerce.Order.Cart.AddItem.Label');\n const lblEdit = useTranslation('Commerce.Order.Cart.EditItem.Label');\n const lblRemove = useTranslation('Commerce.Order.Cart.RemoveItem.Label');\n const [editingItem, setEditingItem] = React.useState(null);\n\n const itemCount = React.useMemo(\n () =>\n Forms.reduce(\n (acc, form) => acc + form.Shipments.reduce((sum, shipment) => sum + shipment.LineItems.length, 0),\n 0\n ),\n [Forms]\n );\n\n const fauxItemCount = React.useMemo(\n () =>\n Forms.reduce(\n (acc, form) =>\n acc + form.Shipments.reduce((sum, shipment) => sum + (shipment.FauxLineItems?.length || 0), 0),\n 0\n ),\n [Forms]\n );\n\n const getQty = React.useCallback(\n (shipment, item) => {\n const change = qtyChanges.find((c) => c.shipmentId === shipment.ShipmentId && c.itemCode === item.Code);\n\n return change ? change.qty : item.Quantity;\n },\n [qtyChanges]\n );\n\n const hasChange = React.useCallback(\n (shipment, item) => {\n const change = qtyChanges.find((c) => c.shipmentId === shipment.ShipmentId && c.itemCode === item.Code);\n\n return change && change.qty !== item.Quantity;\n },\n [qtyChanges]\n );\n\n const addItem = React.useMemo(\n () =>\n onAddItemToCart\n ? (lineItem, productInfo, quantity, listValue) => async () => {\n const gtmPayload = GTM.mapEntityToAddCart(\n productInfo,\n quantity,\n productInfo.Attributes,\n listValue,\n totalQty + quantity\n );\n\n await onAddItemToCart(lineItem.Code, quantity, { gtmPayload });\n }\n : null,\n [onAddItemToCart, totalQty]\n );\n\n return (\n \n
\n\n \n
\n\n {!item.IsGift && !OOS && isEditable ? (\n \n {item.DisplayName}\n
\n\n {item.ListPrice > item.SalePrice ? (\n \n
\n ) : (\n \n
\n
\n
\n )}\n\n {!OOS ? (\n \n
\n \n
\n ) : null}\n {item.Quantity}
\n ) : (\n\n
\n ) : null}\n \n ) : (\n <>\n \n
\n \n
\n \n {productInfo && onAddItem ? (\n \n \n \n ) : null}\n {productInfo?.Children?.length ? (\n \n \n \n ) : null}\n \n \n \n
\n \n
\n\n {item.ListPrice > item.SalePrice ? (\n \n
\n \n
\n \n {item.DisplayName}\n
\n \n
\n ) : (\n \n
\n
\n
\n )}\n\n {!OOS ? (\n <>\n \n
\n {item.IsGift || !isEditable ? (\n
\n {item.ListPrice > item.SalePrice ? (\n {item.Quantity}
\n ) : (\n\n
\n ) : (\n \n
\n
\n
\n )}\n \n
\n {item.AdditionalInfo\n ? item.AdditionalInfo.map((info) => (\n
\n {!item.IsGift && isEditable ? (\n \n
\n ))\n : null}\n {info}
\n\n
\n ) : null}\n \n ) : null}\n \n )}\n {OOS ? (\n \n
\n \n
\n \n {productInfo?.Children?.length && onAddItem ? (\n \n \n \n ) : null}\n {productInfo?.Children?.length ? (\n \n \n \n ) : null}\n \n \n \n
\n \n
\n ) : null}\n\n {item.ValidationMessage ? (\n \n
\n \n \n {!item.IsGift ? (\n \n
\n \n
\n \n {!item.IsGift && productInfo?.Children?.length ? (\n \n \n
\n \n
\n \n {!item.IsGift ? (\n \n \n {lblRemove}\n \n ) : null}\n
\n \n
\n ) : null}\n\n {editingItem === item.Code ? (\n \n
\n {item.ValidationMessage}
\n\n
\n ) : null}\n \n {fauxItemCount ? (\n <>\n
\n );\n}\n\nCartTable.propTypes = {\n className: px.string,\n Forms: px.arrayOf(types.CartForm),\n onChangeQty: px.func,\n onDelete: px.func,\n currency: px.string,\n qtyChanges: px.arrayOf(px.any),\n onAddItemToCart: px.func,\n isEditable: px.bool,\n QuickView: px.elementType,\n emptyLabel: px.string,\n gtmListValue: px.string,\n statusTooltip: px.string,\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { useTranslation } from 'Common/hooks';\nimport { Translation } from 'Common/components/localization';\n\nconst sharedPropTypes = {\n className: px.string,\n promotions: px.arrayOf(px.string),\n Promotions: px.elementType,\n promoError: px.shape({ message: px.string, timestamp: px.number, reference: px.string, type: px.string }),\n addPromotion: px.func,\n removePromotion: px.func,\n disabled: px.bool,\n};\n\nexport function DefaultPromotions({ promotions, onRemovePromo }) {\n const lblRemove = useTranslation('Commerce.Order.RemovePromo.Label');\n\n return promotions?.map((promo) => (\n \n \n
\n \n ) : null}\n \n
\n
\n \n
\n {itemCount ? (\n Forms.map((form) =>\n form.Shipments.map((shipment) =>\n shipment.LineItems.map((item) => (\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n
\n )}\n {fauxItemCount ? (\n <>\n \n
\n
\n {Forms.map((form) =>\n form.Shipments.map((shipment) =>\n shipment.FauxLineItems.map((item) => (\n \n
\n
\n ));\n}\n\nDefaultPromotions.propTypes = {\n onRemovePromo: px.func,\n promotions: px.arrayOf(px.string),\n};\n\nexport function PromoCode({\n className,\n Promotions = DefaultPromotions,\n promotions = [],\n promoError,\n code,\n addPromotion,\n removePromotion,\n onCodeChanged,\n disabled = false,\n}) {\n const placeholder = useTranslation('Commerce.Order.AddPromo.Input.PlaceHolder');\n const lastLength = React.useRef(promotions.length);\n const [showError, setShowError] = React.useState(false);\n const handleRemovePromotion = React.useCallback(\n (promo) => () => {\n if (removePromotion) {\n removePromotion(promo);\n }\n },\n [removePromotion]\n );\n\n const handleCodeChanged = React.useCallback(\n (e) => {\n if (onCodeChanged) {\n onCodeChanged(e.target.value);\n }\n },\n [onCodeChanged]\n );\n\n const handleAddPromotion = React.useCallback(() => {\n if (!promotions?.includes(code)) {\n if (addPromotion) {\n addPromotion(code);\n }\n } else {\n onCodeChanged('');\n }\n }, [code, addPromotion, onCodeChanged, promotions]);\n\n React.useEffect(() => {\n if (promotions.length > lastLength.current) {\n lastLength.current = promotions.length;\n onCodeChanged('');\n }\n }, [onCodeChanged, promotions]);\n\n React.useEffect(() => {\n if (promoError) {\n setShowError(true);\n const handle = setTimeout(() => {\n setShowError(false);\n }, 5000);\n return () => { if (handle != null) clearTimeout(handle); }\n } else {\n setShowError(false);\n }\n\n }, [promoError]);\n\n return (\n \n
\n \n \n \n \n \n \n {promo}\n
\n \n \n \n \n \n
\n \n
\n );\n}\n\nPromoCode.propTypes = {\n ...sharedPropTypes,\n onCodeChanged: px.func,\n};\n\nexport default function ConnectedPromoCode(props) {\n const [code, setCode] = React.useState('');\n\n return \n
\n \n
\n \n {\n if (e.key === 'Enter') {\n e.preventDefault();\n handleAddPromotion();\n }\n }}\n >\n \n
\n {showError ? (\n \n
\n ) : null}\n \n
\n \n
\n
\n )) ?? null\n );\n}\n\nDefaultCards.propTypes = {\n onRemoveCard: px.func,\n cards: px.arrayOf(px.shape({ CardNumber: px.string, PaymentMethodId: px.string, Balance: px.number })),\n currency: px.string,\n};\n\nexport default function GiftCard({\n className,\n currency,\n accountEmail,\n giftCards,\n onUpdate,\n GiftCards = DefaultCards,\n removePayment,\n savedGiftCards,\n noLoadingIndicator = false,\n errorMessage = '',\n id: idStr = `CheckoutGiftCard_${v4()}`,\n}) {\n const id = React.useRef(idStr);\n const [availableCards, setAvailableCards] = React.useState(filterCards(savedGiftCards || [], giftCards || []));\n const placeholder = useTranslation('Commerce.Order.AddGiftCard.Input.PlaceHolder');\n const formApi = useFormApi();\n const state = useFormState();\n const [showSpinner, setShowSpinner] = React.useState(false);\n\n const [showError, setShowError] = React.useState(false);\n const spinWrapper = React.useCallback(\n (fn) => async (...args) => {\n setShowSpinner(true);\n\n const succeeded = await fn(...args);\n\n setShowSpinner(false);\n\n return succeeded;\n },\n []\n );\n\n React.useEffect(() => {\n setAvailableCards(filterCards(savedGiftCards, giftCards));\n }, [giftCards, savedGiftCards]);\n\n const clearNumber = React.useCallback(() => {\n formApi.setValue(PAYMENT.cardNumber, '');\n }, [formApi]);\n\n const onAddCard = React.useCallback(\n (cardNumber = formApi.getValue(PAYMENT.cardNumber)) =>\n cardNumber\n ? spinWrapper(async () => {\n formApi.setError(PAYMENT.cardNumber, null);\n await onUpdate({\n ...formApi.getFormState().values,\n [PAYMENT.cardNumber]: cardNumber,\n [PAYMENT.paymentType]: 'GiftCard',\n [PAYMENT.systemName]: 'GiftCard',\n [PAYMENT.cardType]: 'GiftCard',\n [PAYMENT.address]: {\n [ADDRESS.email]: decodeURIComponent(accountEmail),\n },\n });\n clearNumber();\n })\n : () => null,\n [formApi, clearNumber, onUpdate, spinWrapper, accountEmail]\n );\n\n const handleKeyDown = React.useCallback(\n async (event) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n formApi.setError(PAYMENT.cardNumber, null);\n await onUpdate({\n ...formApi.getFormState().values,\n [PAYMENT.cardNumber]: formApi.getValue(PAYMENT.cardNumber),\n [PAYMENT.paymentType]: 'GiftCard',\n [PAYMENT.systemName]: 'GiftCard',\n [PAYMENT.cardType]: 'GiftCard',\n [PAYMENT.address]: {\n [ADDRESS.email]: decodeURIComponent(accountEmail),\n },\n });\n clearNumber();\n }\n },\n [formApi, clearNumber, accountEmail, onUpdate]\n );\n\n const onRemovePayment = React.useCallback(\n (method, number) => () =>\n spinWrapper((paymentMethodId, cardNumber) => removePayment(paymentMethodId, cardNumber))(method, number),\n [removePayment, spinWrapper]\n );\n\n React.useEffect(() => {\n if (errorMessage !== '') {\n setShowError(true);\n const handle = setTimeout(() => {\n setShowError(false);\n }, 5000);\n return () => {\n if (handle != null) clearTimeout(handle);\n };\n } else {\n setShowError(false); \n }\n }, [errorMessage]);\n\n return (\n \n
\n \n
\n \n
\n \n \n \n \n \n \n {card.CardNumber}\n
\n \n
\n \n \n \n \n
\n \n {showSpinner && !noLoadingIndicator ?
\n \n );\n}\n\nGiftCard.propTypes = {\n className: px.string,\n currency: px.string,\n accountEmail: px.string,\n giftCards: px.arrayOf(px.any),\n onUpdate: px.func,\n removePayment: px.func,\n savedGiftCards: px.arrayOf(px.any),\n noLoadingIndicator: px.bool,\n id: px.string,\n GiftCards: px.elementType,\n errorMessage: px.string,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport * as types from 'Common/types';\nimport { useViewport, useTranslation } from 'Common/hooks';\nimport { Translation } from 'Common/components/localization';\nimport { ProductTitle, ProductOptions, ProductPrice, ChildDetail } from 'Common/components/product';\n\nexport default function EditProductView({\n className,\n productTitle,\n priceInfo,\n productInfo,\n productChildren,\n currentItemStatus,\n currentChildren,\n selectedChild,\n quantity,\n facets,\n disabledFacets,\n onFacetSelect,\n clearFacets,\n onSelectChild,\n Links,\n onCancel,\n originalItemCode,\n onUpdate,\n}) {\n const viewport = useViewport();\n const addToCartToolTip = useTranslation('Form.Button.AddToCart.ToolTip.Label');\n const onUpdateVariant = React.useMemo(\n () => (onUpdate && currentChildren.length === 1 ? () => onUpdate(currentChildren[0].Code) : null),\n [onUpdate, currentChildren]\n );\n\n const buttonState = React.useMemo(\n () => (currentItemStatus?.hasStock && currentItemStatus.code !== originalItemCode ? 'active' : 'disabled'),\n [currentItemStatus, originalItemCode]\n );\n\n const showTip = React.useCallback(\n (tip) => (viewport.is.touch && buttonState === 'disabled' && tip ? () => alert(tip) : null),\n [viewport, buttonState]\n );\n\n return productInfo ? (\n \n
\n \n
\n ) : null}\n \n \n
\n {showError ||\n (state?.errors &&\n state.errors[PAYMENT.cardNumber] &&\n state.errors[PAYMENT.cardNumber] !== validation.required) ? (\n \n
\n ) : null}\n {savedGiftCards?.length ? (\n \n
\n \n
\n
\n \n \n
\n \n \n
\n \n
\n {savedGiftCards.map((giftCard) => (\n
\n \n \n
\n ))}\n {giftCard.CardNumber}
\n\n
\n \n
\n
\n ) : null;\n}\n\nEditProductView.propTypes = {\n className: px.string,\n productTitle: px.string,\n priceInfo: px.object,\n productInfo: px.object,\n productChildren: px.arrayOf(px.object),\n currentItemStatus: px.shape({\n hasStock: px.bool,\n statusDisplayName: px.string,\n code: px.string,\n }),\n currentChildren: px.arrayOf(px.object),\n selectedChild: px.object,\n facets: px.arrayOf(types.Facet),\n disabledFacets: px.object,\n onFacetSelect: px.func,\n onSelectChild: px.func,\n quantity: px.number,\n clearFacets: px.func,\n onCancel: px.func,\n originalItemCode: px.string,\n onUpdate: px.func,\n Links: px.node,\n};\n","import * as React from 'react';\nimport { useSelector } from 'react-redux';\nimport { useAction } from 'Common/hooks';\nimport { EditProductView as ProductView } from 'Common/components/cart';\nimport { product } from '~features';\n\nexport default function EditProductView(props) {\n const productTitle = useSelector(product.selectors.getChildTitle);\n const priceInfo = useSelector(product.selectors.getCurrentPriceInfo);\n const productInfo = useSelector(product.selectors.getProduct);\n const productChildren = useSelector(product.selectors.getChildren);\n const currentItemStatus = useSelector(product.selectors.getCurrentItemStatus);\n const currentChildren = useSelector(product.selectors.getCurrentChildren);\n const selectedChild = useSelector(product.selectors.getSelectedChild);\n const facets = useSelector(product.selectors.getFacets);\n const disabledFacets = useSelector(product.selectors.getDisabledFacetValues);\n const onFacetSelect = useAction(product.actions.selectFacet);\n const onSelectChild = useAction(product.actions.selectChild);\n const clearFacets = useAction(product.actions.clearFacets);\n\n return (\n \n
\n \n
\n \n
\n \n \n
\n \n \n \n
\n {Links}
\n \n {!Forms?.length || isUpdating ?
\n );\n}\n\nCartItemList.propTypes = {\n accountEmail: px.string,\n allowGiftCards: px.bool,\n};\n","import px from 'prop-types';\nimport CartLineItem from './CartLineItem';\n\nexport const OrderSummaryShape = {\n subtotal: px.number,\n handling: px.number,\n shipping: px.number,\n shippingSubTotal: px.number,\n shippingDiscount: px.number,\n orderDiscount: px.number,\n tax: px.number,\n total: px.number,\n giftCardPayments: px.arrayOf(px.shape({ CardNumber: px.string, Amount: px.number, Balance: px.number })),\n giftCardDiscount: px.number,\n totalSansGiftCards: px.number,\n discounts: px.arrayOf(\n px.shape({ label: px.string, value: px.number, id: px.string, code: px.string, discountType: px.string })\n ),\n lineItems: px.arrayOf(CartLineItem),\n};\n\nexport default px.shape(OrderSummaryShape);\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { OrderSummary } from 'Common/types';\nimport { Translation, Currency } from '../localization';\nimport { Icon } from '../ui';\n\nconst IMG_MAP = {\n AmazonPay: { name: 'amazon-pay-large', sheet: 'payment', label: 'AmazonPay' },\n GooglePay: { name: 'google-pay-large', sheet: 'payment', label: 'GooglePay' },\n ApplePay: { name: 'apple-pay-large', sheet: 'payment', label: 'ApplePay' },\n PayPal: { name: 'paypal-large', sheet: 'payment', label: 'PayPal' },\n};\n\nexport default function CartSummary({\n className,\n checkoutLink,\n availablePaymentTypes = [],\n paymentTypeRowHeight = 42,\n paymentTypeCellPadding = 8,\n paymentsPerRow = 3,\n bottomSeparator,\n cartSummaryData,\n currency = 'gbp',\n disabled = false,\n}) {\n const [expandPayments, setExpandPayments] = React.useState(false);\n\n const payments = React.useMemo(() => availablePaymentTypes.map((p) => IMG_MAP[p]).filter(Boolean), [\n availablePaymentTypes,\n ]);\n\n const rows = React.useMemo(() => Math.ceil(payments.length / paymentsPerRow), [payments, paymentsPerRow]);\n const paymentWidth = React.useMemo(() => `${Math.floor(100 / paymentsPerRow)}%`, [paymentsPerRow]);\n\n const paymentsHeight = React.useMemo(\n () => `${(expandPayments ? rows : 1) * (paymentTypeRowHeight + 2 * paymentTypeCellPadding)}px`,\n [expandPayments, rows, paymentTypeRowHeight, paymentTypeCellPadding]\n );\n\n return (\n \n {hasChanges ? (\n \n ) : null}\n \n \n \n
\n \n
\n \n
\n \n
\n {allowGiftCards ? (\n \n ) : null}\n \n setExpandPayments(false)}\n >\n \n setExpandPayments(true)}\n >\n \n
}\n
\n );\n}\n\nCartSummary.propTypes = {\n className: px.string,\n properties: px.objectOf(px.string),\n bottomSeparator: px.bool,\n checkoutLink: px.string,\n subtotal: px.number,\n promo: px.number,\n tax: px.number,\n currency: px.string,\n shipping: px.number,\n disabled: px.bool,\n availablePaymentTypes: px.arrayOf(px.string),\n paymentTypeRowHeight: px.number,\n paymentTypeCellPadding: px.number,\n paymentsPerRow: px.number,\n cartSummaryData: OrderSummary,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { CartSummary as Summary } from 'Common/components/cart';\nimport { order } from '~features';\n\nexport default function CartSummary({ bottomSeparator, checkoutLink }) {\n const cartSummaryData = useSelector(order.selectors.getCartSummaryData);\n const currency = useSelector(order.selectors.getCurrencyCode);\n const totalQty = useSelector(order.selectors.getAllItemQty);\n const availablePaymentTypes = useSelector(order.selectors.getAvailablePaymentTypes);\n\n return (\n \n \n
\n {cartSummaryData.handling > 0 ? (\n \n \n
\n ) : null}\n \n \n
\n {cartSummaryData.shippingDiscount > 0 ? (\n \n \n
\n ) : null}\n \n \n
\n {cartSummaryData.orderDiscount ? (\n \n \n
\n ) : null}\n {cartSummaryData.giftCardDiscount ? (\n \n \n
\n ) : null}\n \n \n
\n \n \n \n
\n
\n
\n
\n {rows > 1 ? (\n expandPayments ? (\n \n {payments.map((p) => (\n
\n }\n
\n
\n ) : null}\n \n
\n \n {title}
\n e.stopPropagation()}>\n {onEdit ? (\n \n \n \n ) : null}\n {onSave && !hideSaveButton ? (\n \n \n \n ) : null}\n
\n {children}
\n \n \n );\n}\n\nCheckoutSection.propTypes = {\n className: px.string,\n disabled: px.bool,\n collapsed: px.bool,\n children: px.node,\n title: px.node,\n onToggleCollapse: px.func,\n onEdit: px.func,\n onSave: px.func,\n canSave: px.bool,\n isEditing: px.bool,\n hideSaveButton: px.bool,\n};\n","import { createContext } from 'react';\n\nexport default createContext({ setValues: () => {}, getValues: () => ({}), validate: () => {} });\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport mergewith from 'lodash.mergewith';\nimport { Form } from 'informed';\nimport { Translation } from '../localization';\nimport CheckoutSection from './CheckoutSection';\nimport CheckoutFormContext from './CheckoutFormContext';\nimport omit from 'lodash.omit';\n\nfunction setFormValues(formApi, values, prefix) {\n Object.keys(values).forEach((k) => {\n if (values[k] && typeof values[k] === 'object' && !Array.isArray(values[k])) {\n setFormValues(formApi, values[k], [prefix, k].filter(Boolean).join('.'));\n } else {\n formApi.setValue(prefix ? `${prefix}.${k}` : k, values[k]);\n }\n });\n}\n\nfunction mergeState(state, next) {\n return mergewith(state, next, (x, y) => (Array.isArray(y) ? y : undefined));\n}\n\nexport default function CheckoutForm({\n onUpdate,\n className,\n initialStateIsValid = false,\n initialState,\n isFormRendered = true,\n allowCancelEditing = true,\n forceEdit = false,\n ReadOnlyContents = null,\n allowUpdates = false,\n title = null,\n children,\n hideSaveActions = false,\n onBeginEdit,\n onEndEdit,\n onCancelEdit,\n readOnlyProps = {},\n editState,\n showNext,\n hideSaveButton = false,\n disabled: disabledProp = false,\n}) {\n const lastEditRef = React.useRef(false);\n const formApiRef = React.useRef(null);\n const forceEditRef = React.useRef(forceEdit);\n const initialStateRef = React.useRef(JSON.stringify(omit(initialState, '_static')));\n const pristineRef = React.useRef(true);\n const [disabled, setDisabled] = React.useState(false);\n const [canSave, setCanSave] = React.useState(initialStateIsValid);\n const localEditState = React.useState(forceEdit);\n const [isEditing, setIsEditing] = editState || localEditState;\n const [collapsed, setCollapsed] = React.useState(isEditing);\n const [formErrors, setFormErrors] = React.useState([]);\n const [formState, setFormState] = React.useState(initialState);\n const onChange = React.useCallback(({ invalid } = {}) => setCanSave(!invalid), []);\n const onValueChange = React.useCallback(({ values }) => setFormState({ _static: formState?._static, ...values }), [\n formState,\n ]);\n\n const updateState = React.useCallback((values) => setFormState(mergeState(formState, values)), [formState]);\n\n const setValues = React.useCallback(\n async (values) => {\n await updateState(values);\n if (formApiRef.current) {\n setFormValues(formApiRef.current, values);\n }\n },\n [updateState]\n );\n\n const getValues = React.useCallback(\n () => (formApiRef.current ? formApiRef.current.getFormState().values : formState),\n [formState]\n );\n\n const onSave = React.useMemo(\n () =>\n isEditing && onUpdate && isFormRendered\n ? async () => {\n setDisabled(true);\n formApiRef.current?.touchAllFields();\n formApiRef.current?.validate();\n if (formApiRef.current && !formApiRef.current.getFormState().invalid) {\n const response = await onUpdate(formState);\n\n setDisabled(false);\n if (response) {\n if (!response?.success && response?.errors) {\n setFormErrors(response?.errors || []);\n } else {\n setFormErrors([]);\n setIsEditing(false);\n }\n }\n } else {\n setDisabled(false);\n }\n }\n : null,\n [isEditing, formState, setIsEditing, onUpdate, isFormRendered]\n );\n\n const onEdit = React.useMemo(() => (allowUpdates && !isEditing && onUpdate ? () => setIsEditing(true) : null), [\n isEditing,\n allowUpdates,\n onUpdate,\n setIsEditing,\n ]);\n\n const onToggleCollapse = React.useCallback((next) => (isEditing ? null : setCollapsed(next)), [isEditing]);\n\n const onCancel = React.useCallback(() => {\n setIsEditing(false);\n if (onCancelEdit) onCancelEdit();\n }, [onCancelEdit, setIsEditing]);\n\n const ctx = React.useMemo(\n () => ({ validate: () => {}, ...formApiRef.current, setValues, getValues, updateState }),\n [setValues, getValues, updateState]\n );\n\n React.useEffect(() => {\n pristineRef.current = true;\n }, []);\n\n React.useEffect(() => {\n const nextInitial = JSON.stringify(omit(initialState, '_static'));\n\n if (initialStateRef.current !== nextInitial) {\n initialStateRef.current = nextInitial;\n pristineRef.current = true;\n setFormState(initialState);\n if (formApiRef.current) {\n formApiRef.current.setValues(initialState);\n formApiRef.current.validate();\n setCanSave(!formApiRef.current.getFormState().invalid);\n }\n }\n }, [initialState]);\n\n React.useEffect(() => {\n if (forceEdit !== forceEditRef.current) {\n forceEditRef.current = forceEdit;\n if (forceEdit && !isEditing) {\n setIsEditing(true);\n setCollapsed(false);\n } else if (!forceEdit && isEditing) {\n setIsEditing(false);\n setCollapsed(true);\n }\n }\n }, [forceEdit, isEditing, setIsEditing]);\n\n React.useEffect(() => {\n if (isEditing && collapsed) {\n setCollapsed(false);\n }\n }, [isEditing, collapsed]);\n\n React.useEffect(() => {\n if (!lastEditRef.current && isEditing && onBeginEdit) {\n lastEditRef.current = isEditing;\n onBeginEdit();\n } else if (lastEditRef.current && !isEditing && onEndEdit) {\n lastEditRef.current = isEditing;\n onEndEdit();\n } else {\n lastEditRef.current = isEditing;\n }\n }, [isEditing, onBeginEdit, onEndEdit]);\n\n React.useEffect(() => {\n setDisabled(disabledProp);\n }, [disabledProp]);\n\n const isSaveDisabled = React.useMemo(() => disabled || !canSave, [disabled, canSave]);\n\n return (\n \n
\n ) : null}\n \n \n \n
\n \n \n
\n
\n );\n}\n\nReadOnlyContents.propTypes = {\n state: EmailFormType,\n};\n\nexport default function CheckoutEmail({\n className,\n accountEmail = '',\n loggedIn = false,\n signup = false,\n signinLink,\n ...props\n}) {\n return (\n \n
\n {state[FIELDS.email]}
\n\n \n
\n \n );\n}\n\nCheckoutEmail.propTypes = {\n signinLink: px.string,\n className: px.string,\n accountEmail: px.string,\n loggedIn: px.bool,\n signup: px.bool,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { v4 } from 'uuid';\nimport * as types from 'Common/types';\nimport { Translation, Currency } from '../localization';\n\nexport default function CheckoutSummary({\n className,\n costs,\n summaryTitle,\n totalLabel,\n orderSummary = {},\n id = `CheckoutSummary_${v4()}`,\n currency,\n}) {\n return (\n \n \n
\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n \n ) : null}\n \n \n \n );\n}\n\nCheckoutSummary.propTypes = {\n className: px.string,\n costs: px.arrayOf(px.shape({ label: px.node, value: px.number })),\n summaryTitle: px.node,\n totalLabel: px.node,\n id: px.string,\n currency: px.string,\n orderSummary: types.OrderSummary,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { SHIPMENT, ADDRESS } from 'Common/constants/fields';\nimport { Translation } from 'Common/components/localization';\nimport CheckoutSummary from '../CheckoutSummary';\n\nexport default function ReadOnlyContents({ state, shipment, email, cartPage }) {\n const {\n _static: { showSummary, summaryData, currency },\n } = React.useMemo(() => state || {}, [state]);\n\n const {\n [SHIPMENT.isDigital]: isDigital,\n [SHIPMENT.isGift]: isGift,\n [SHIPMENT.giftMessage]: giftMessage,\n [SHIPMENT.shippingMethodDisplay]: methodDisplay,\n [SHIPMENT.shippingMethodDesc]: methodDesc,\n [SHIPMENT.shippingMethodInfo]: methodInfo,\n [SHIPMENT.address]: {\n [ADDRESS.firstName]: fName,\n [ADDRESS.lastName]: lName,\n [ADDRESS.line1]: line1,\n [ADDRESS.line2]: line2,\n [ADDRESS.email]: shipmentEmail,\n [ADDRESS.company]: org,\n [ADDRESS.zip]: zip,\n [ADDRESS.city]: city,\n [ADDRESS.state]: region,\n [ADDRESS.country]: country,\n [ADDRESS.phone]: phone,\n } = {},\n } = React.useMemo(() => shipment || {}, [shipment]);\n\n const isReadOnlyValid = React.useMemo(\n () => (isDigital ? (shipmentEmail || email) != null : lName && country && zip),\n [isDigital, email, shipmentEmail, lName, country, zip]\n );\n\n return isReadOnlyValid ? (\n {summaryTitle}
\n\n {costs\n ? costs.map((cost) =>\n cost ? (\n
\n \n
\n ) : null\n )\n : null}\n {orderSummary.giftCardDiscount ? (\n \n
\n
\n
\n ) : null}\n \n \n
\n
\n
\n \n {totalLabel}\n
\n\n \n
\n
\n \n ) : null}\n {orderSummary.lineItems?.length ? (\n \n {orderSummary.discounts?.length ? (\n <>\n \n
\n \n \n
\n \n \n
\n {orderSummary.discounts.map((promo) => (\n \n
\n ))}\n \n
\n {promo.label}
\n\n
\n \n
\n \n \n
\n \n \n
\n {orderSummary.lineItems.map((item) => (\n \n
\n ))}\n \n
\n \n
\n
{item.Quantity}
\n\n
\n {showSummary ? (\n
\n ) : null;\n}\n\nReadOnlyContents.propTypes = {\n state: px.objectOf(px.any),\n shipment: px.objectOf(px.any),\n email: px.string,\n cartPage: px.string,\n};\n","import * as React from 'react';\nimport { useField, useFormState } from 'informed';\nimport PhoneNumber from 'react-phone-number-input';\n\nexport default function PhoneField(props) {\n const { values } = useFormState();\n const {\n fieldState: { value, touched },\n fieldApi: { setValue, setTouched, setError },\n ref,\n render,\n } = useField(props);\n\n const {\n onBlur,\n placeholder,\n validate,\n validateOn,\n onChange,\n initialValue,\n defaultCountry,\n id,\n formatterDependencies,\n ...rest\n } = props;\n\n const onValidate = React.useCallback(\n (v, vs) => {\n setError(validate(v, vs));\n },\n [setError, validate]\n );\n\n const onNumberChange = React.useCallback(\n (nextValue) => {\n if (!touched) setTouched(true);\n if (nextValue !== value) {\n if (onChange) onChange(nextValue);\n if (validateOn === 'change') onValidate(nextValue, values);\n setValue(nextValue);\n }\n },\n [touched, onValidate, onChange, validateOn, setTouched, value, setValue, values]\n );\n\n const onNumberBlur = React.useCallback(() => {\n if (!touched) setTouched(true);\n if (validateOn === 'blur') onValidate(value, values);\n if (onBlur) onBlur();\n }, [value, touched, setTouched, onBlur, validateOn, onValidate, values]);\n\n return render(\n <>\n \n \n
\n \n \n
\n
\n \n
\n \n {fName} {lName}\n
\n {isDigital ? (\n{shipmentEmail || email}
\n ) : (\n <>\n {org ?{org}
: null}\n{line1}
\n {line2 ?{line2}
: null}\n\n {city}, {region || ''} {zip}\n
\n{country}
\n {phone ?{phone}
: null}\n \n )}\n\n \n
\n
\n \n
\n \n {methodDisplay}, {methodDesc}\n
\n\n
\n \n
\n
\n \n );\n}\n\nAccordionDropdown.propTypes = {\n className: px.string,\n defaultExpanded: px.bool,\n id: px.string,\n ctrlRef: px.shape({ current: px.any }),\n title: px.oneOfType([px.string, px.node]),\n header: px.node,\n children: px.node,\n hideChevron: px.bool,\n onHeaderClick: px.func,\n open: px.bool,\n controlled: px.bool,\n headerClass: px.string,\n bodyClass: px.string,\n disabled: px.bool,\n};\n\nconst Forwarded = React.forwardRef((props, ref) => \n \n
\n \n \n {header || (\n <>\n {typeof title === 'string' ?
\n {children}
\n \n {a[ADDRESS.firstName]} {a[ADDRESS.lastName]}\n
\n \n {a[ADDRESS.line1]}, {a[ADDRESS.city]}, {a[ADDRESS.state]}\n
\n \n )\n )}\n \n );\n}\n\nSavedAddressSelector.propTypes = {\n addresses: px.arrayOf(types.Address),\n scope: px.string,\n className: px.string,\n defaultExpanded: px.bool,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useFormApi } from 'informed';\nimport * as types from 'Common/types';\nimport { useRegionSelection } from 'Common/hooks';\nimport { ADDRESS } from 'Common/constants/fields';\nimport AddressForm from './AddressForm';\nimport SavedAddressSelector from './SavedAddressSelector';\n\nexport default function ConnectedAddressForm({\n Form = AddressForm,\n waitForMount = false,\n regionEnabled = true,\n scope,\n siteId,\n savedAddresses,\n savedAddressSelectorClassName,\n savedAddressDefaultExpanded,\n ...props\n}) {\n const scopedFields = React.useMemo(\n () => (scope ? Object.keys(ADDRESS).reduce((o, k) => ({ ...o, [k]: `${scope}.${ADDRESS[k]}` }), {}) : ADDRESS),\n [scope]\n );\n\n const [postalRegex, setPostalRegex] = React.useState(null);\n const formApi = useFormApi();\n const getRegion = React.useCallback(() => formApi.getValue(scopedFields.state), [formApi, scopedFields]);\n const getCountry = React.useCallback(() => formApi.getValue(scopedFields.country), [formApi, scopedFields]);\n const enabledRef = React.useRef(regionEnabled && !waitForMount);\n\n const setCountry = React.useCallback(\n (v, { PostalValidationRegex } = {}) => {\n formApi.setValue(scopedFields.country, v);\n if (PostalValidationRegex) setPostalRegex(new RegExp(PostalValidationRegex, 'i'));\n },\n [formApi, scopedFields]\n );\n\n const setRegion = React.useCallback((v) => formApi.setValue(scopedFields.state, v), [formApi, scopedFields]);\n\n const { countryList, regionOptions, fetchRegions } = useRegionSelection({\n getCountry,\n getRegion,\n setCountry,\n setRegion,\n siteId,\n enabledRef,\n enabled: regionEnabled,\n });\n\n const onCountryChange = React.useCallback(\n (code) => {\n const { PostalValidationRegex } = countryList?.find((c) => c.CountryCode === code) || {};\n\n if (PostalValidationRegex) setPostalRegex(new RegExp(PostalValidationRegex, 'i'));\n fetchRegions(code);\n },\n [countryList, fetchRegions]\n );\n\n React.useEffect(() => {\n enabledRef.current = regionEnabled;\n }, [regionEnabled]);\n\n return (\n <>\n {savedAddresses?.length ? (\n \n \n
\n {shouldShowAddressSelector ? (\n
\n ) : null}\n \n
\n {shouldShowAddressSelector ? (\n \n
\n \n
\n \n \n
\n \n \n
\n \n
\n \n {addressId ? (\n \n ) : null}\n {leanSavedShippingAddress.map((a) =>\n a[ADDRESS.id] === addressId ? null : (\n onSelect(a)}\n className=\"btn p-1 w-100 text-left\"\n >\n
\n \n {a[ADDRESS.firstName]} {a[ADDRESS.lastName]}\n
\n\n {a[ADDRESS.line1]}, {a[ADDRESS.city]}, {a[ADDRESS.state]}\n
\n \n )\n )}\n\n {isDigitalDelivery ? (\n
\n \n \n \n
\n (value ? undefined : VALIDATION_STRINGS.required)}\n validateOn=\"change\"\n >\n
\n \n
\n \n {shippingOptions.map((m) => (\n
\n \n \n
\n ))}\n \n
\n \n
\n \n );\n}\n\nFormContents.propTypes = {\n currency: px.string,\n shippingOptions: px.arrayOf(px.object),\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n id: px.string,\n siteId: px.oneOfType([px.number, px.string]),\n isDigitalDelivery: px.bool,\n shipmentId: px.oneOfType([px.number, px.string]),\n savedShippingAddresses: px.arrayOf(types.Address),\n fetchShippingMethods: px.func,\n};\n\nfunction ShippingLabels({ m, currency }) {\n return (\n \n
\n );\n}\n\nShippingLabels.propTypes = {\n m: px.shape({ EstimatedCost: px.number, DisplayName: px.string, Description: px.string, DeliveryInfo: px.string }),\n currency: px.string,\n};\n","import px from 'prop-types';\nimport { PAYMENT } from 'Common/constants/fields';\nimport Address from './Address';\n\nexport const PaymentShape = {\n [PAYMENT.paymentId]: px.oneOfType([px.number, px.string]),\n [PAYMENT.paymentMethodId]: px.oneOfType([px.number, px.string]),\n [PAYMENT.merchantGuid]: px.string,\n [PAYMENT.displayName]: px.string,\n [PAYMENT.paymentType]: px.string,\n [PAYMENT.systemName]: px.string,\n [PAYMENT.cardType]: px.string,\n [PAYMENT.token]: px.string,\n [PAYMENT.cardNumber]: px.string,\n [PAYMENT.cardCvv]: px.string,\n [PAYMENT.cardDate]: px.string,\n [PAYMENT.savePayment]: px.bool,\n [PAYMENT.expMonth]: px.number,\n [PAYMENT.expYear]: px.number,\n [PAYMENT.address._name]: Address,\n CreditCardTypeFriendlyName: px.string,\n Amount: px.number,\n Balance: px.number,\n PaymentMethodName: px.string,\n};\n\nexport default px.shape(PaymentShape);\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport * as types from 'Common/types';\nimport { useTranslation } from 'Common/hooks';\nimport { Translation } from 'Common/components/localization';\nimport { Field } from 'Common/components/forms';\nimport { SHIPMENT, ADDRESS } from 'Common/constants/fields';\nimport CheckoutForm from '../CheckoutForm';\nimport ReadOnlyContents from './ReadOnlyContents';\nimport FormContents from './FormContents';\n\nexport default function CheckoutShipment({\n accountEmail,\n className,\n currency,\n index,\n shipment = {},\n savedShippingAddresses = [],\n showSummary,\n siteId,\n onUpdate,\n isUserAuthenticated,\n fetchShippingMethods,\n cartPage,\n ...props\n}) {\n const lblSubtotal = useTranslation('Commerce.Order.Checkout.CheckoutSummary.Subtotal.Label');\n const lblShipping = useTranslation('Commerce.Order.Checkout.CheckoutSummary.Shipping.Label');\n const lblHandling = useTranslation('Commerce.Order.Checkout.CheckoutSummary.Handling.Label');\n const summaryData = React.useMemo(\n () => ({\n total: (shipment?.SubTotal ?? 0) + (shipment?.ShippingTax ?? 0) + (shipment?.ShippingCost ?? 0),\n lineItems: shipment?.lineItems ?? [],\n costs: [\n {\n label: lblSubtotal,\n isPositive: true,\n value: shipment?.SubTotal ?? 0,\n },\n {\n label: lblHandling,\n isPositive: true,\n value: shipment?.HandlingTotal ?? 0,\n },\n {\n label: lblShipping,\n isPositive: true,\n value: shipment?.ShippingCost ?? 0,\n },\n ],\n }),\n [shipment, lblSubtotal, lblShipping, lblHandling]\n );\n\n return (\n \n
\n \n
\n \n
\n {m.DisplayName || ''}
\n{m.DeliveryInfo || ''}
\n\n
\n \n
\n {Formatter.currency(m.EstimatedCost || 0, currency)}
\n{m.Description || ''}
\n\n {!isGiftCard && iconCls ? (\n
\n \n
\n
\n
\n {isGiftCard ? (\n <>\n {payment.map((p) => [\n
\n {children}\n \n ) : null;\n}\n\nPaymentBlock.propTypes = {\n onClick: px.func,\n currency: px.string,\n payment: px.oneOfType([px.arrayOf(types.Payment), types.Payment]),\n savedPayment: types.Payment,\n className: px.string,\n amount: px.number,\n id: px.string,\n paymentType: px.string,\n children: px.node,\n style: px.oneOfType([px.string, px.objectOf(px.string)]),\n showDefault: px.bool,\n paymentMethod: types.PaymentMethod,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport * as types from 'Common/types';\nimport { PAYMENT } from 'Common/constants/fields';\nimport PaymentBlock from '../PaymentBlock';\n\nexport default function ReadOnlyContents({ orderPayment, paymentAmount, paymentMethod, orderGiftCards, currency }) {\n const type = React.useMemo(() => (paymentMethod ?? orderPayment ?? {})[PAYMENT.paymentType], [\n paymentMethod,\n orderPayment,\n ]);\n\n return (\n \n
,\n {p[PAYMENT.cardNumber]}
\n\n
\n
,\n ])}\n \n ) : (\n <>\n {isCC && customerName ? \n
{customerName}
: null}\n {isCC && payment.CardNumber ?{paymentNumber}
: null}\n {isCC && payment.CardNumber ? (\n\n
\n
\n
\n );\n}\n\nReadOnlyContents.propTypes = {\n orderGiftCards: px.arrayOf(px.any),\n orderPayment: px.objectOf(px.any),\n currency: px.string,\n paymentAmount: px.number,\n paymentMethod: types.PaymentMethod,\n};\n","import { useEffect, useState } from 'react';\n\nfunction nextUrl(urlParams) {\n const params = urlParams.toString();\n\n return params ? `${window.location.pathname}?${params}` : window.location.pathname;\n}\n\nexport default function useUrlParam(paramName, consumeParam = false) {\n const [value, setValue] = useState(undefined);\n\n useEffect(() => {\n const urlParams = new URLSearchParams(window.location.search);\n const v = urlParams.get(paramName);\n\n if (v) {\n if (consumeParam) {\n urlParams.delete(paramName);\n window.history.replaceState({}, document.title, nextUrl(urlParams));\n }\n setValue(v);\n }\n }, [paramName, consumeParam]);\n\n return value;\n}\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Spinner } from 'Common/components/ui';\nimport { Field } from 'Common/components/forms';\nimport { Translation } from 'Common/components/localization';\nimport { PAYMENT as FIELDS } from 'Common/constants/fields';\nimport { validateApplePay } from 'Common/features/order/api';\n\n//the states the display could be in\nconst STATE_STARTUP = 'STATE_STARTUP';\nconst STATE_UNSUPPORTED_BROWSER = 'STATE_UNSUPPORTED_BROWSER';\nconst STATE_NO_PAYMENT = 'STATE_NO_PAYMENT';\nconst STATE_SHOW_BUTTON = 'STATE_SHOW_BUTTON';\nconst STATE_PAYMENT_IN_PROGRESS = 'STATE_PAYMENT_IN_PROGRESS';\nconst STATE_PAYMENT_COMPLETE = 'STATE_PAYMENT_COMPLETE';\n\nexport default function SpreedlyApplePayGateway({ className, options, paymentAmount, systemName, marketId }) {\n const [token, setToken] = React.useState(undefined);\n const [state, setState] = React.useState(STATE_STARTUP);\n const [error, setError] = React.useState(false);\n\n //properties for Apple Pay\n const merchantIdentifier = options.ApplePayMerchantIdentifier;\n const merchantName = options.ApplePayDisplayName;\n const amount = paymentAmount.toString();\n\n //this is all the logic to set up the Apple Pay session and associated callbacks\n const onInitSession = React.useCallback(() => {\n const request = {\n countryCode: 'US',\n currencyCode: 'USD',\n supportedNetworks: ['visa', 'masterCard', 'amex', 'discover'],\n merchantCapabilities: ['supports3DS'],\n total: { label: merchantName, amount: amount },\n };\n\n const newSession = new window.ApplePaySession(3, request);\n\n //when it's time to validate the merchant, we need to make a callback to the external URL to verify the domain\n //and generate one-time transaction credentials\n newSession.onvalidatemerchant = async (event) => {\n try {\n const apiResp = await validateApplePay(event.validationURL, systemName, marketId);\n\n if (apiResp && apiResp.Status == 'Success') {\n const appleData = JSON.parse(apiResp.MerchantSession);\n\n newSession.completeMerchantValidation(appleData);\n } else {\n setError(true);\n setState(STATE_SHOW_BUTTON);\n newSession.abort();\n }\n } catch (err) {\n setError(true);\n setState(STATE_SHOW_BUTTON);\n newSession.abort();\n }\n };\n\n //when we select a payment, don't change the total at all but mark payment selection as complete\n newSession.onpaymentmethodselected = (/* event */) => {\n const newTotal = { type: 'final', label: merchantName, amount: amount };\n\n newSession.completePaymentMethodSelection({ newTotal });\n };\n\n //when the payment is authorized, signal to Apple Pay that we're done and update the UI to say we're done\n newSession.onpaymentauthorized = (event) => {\n setToken(JSON.stringify(event.payment.token));\n\n newSession.completePayment(window.ApplePaySession.STATUS_SUCCESS);\n\n setState(STATE_PAYMENT_COMPLETE);\n };\n\n //if we cancel the payment, go back to showing the button\n newSession.oncancel = () => {\n setState(STATE_SHOW_BUTTON);\n };\n\n //begin the payment session and change the button to a display that we're currently in progress\n newSession.begin();\n setState(STATE_PAYMENT_IN_PROGRESS);\n }, [amount, merchantName, marketId, systemName]);\n\n //initialize the Apple Pay session\n React.useEffect(() => {\n async function initApplePay() {\n if (window.ApplePaySession) {\n //first check if the browser even supports Apple Pay\n const canMakePayments = await window.ApplePaySession.canMakePaymentsWithActiveCard(merchantIdentifier);\n\n //we could enter one of two states here if the browser supports Apple Pay...\n if (canMakePayments) {\n setState(STATE_SHOW_BUTTON); //either the user has a payment method ready and they can make payments\n } else {\n setState(STATE_NO_PAYMENT); //or they don't, so they can't make payments until they set up Apple Pay\n }\n } else {\n setState(STATE_UNSUPPORTED_BROWSER);\n }\n }\n\n initApplePay();\n }, [merchantIdentifier]);\n\n return (\n \n {orderGiftCards?.length ? (\n
\n \n
\n );\n}\n\nSpreedlyApplePayGateway.propTypes = {\n className: px.string,\n options: px.shape({\n ApplePayMerchantIdentifier: px.string.isRequired,\n ApplePayDisplayName: px.string.isRequired,\n }),\n systemName: px.string.isRequired,\n marketId: px.string.isRequired,\n paymentAmount: px.number.isRequired,\n};\n","import GooglePayButton from '@google-pay/button-react';\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport { logger } from 'Common/core';\nimport { Field } from 'Common/components/forms';\nimport { Translation } from 'Common/components/localization';\nimport { PAYMENT as FIELDS } from 'Common/constants/fields';\n\nexport default function SpreedlyGooglePayGateway({ payment, paymentAmount, currency, options }) {\n const [error, setError] = React.useState(undefined);\n\n const [paymentObject, setPaymentObject] = React.useState(\n payment?.PaymentType === 'GooglePay' ? payment : undefined\n );\n\n const setToken = React.useCallback(\n (token) => setPaymentObject({ ...paymentObject, PaymentType: 'GooglePay', Token: token }),\n [paymentObject]\n );\n\n return (\n \n
\n )}\n {state === STATE_UNSUPPORTED_BROWSER && (\n \n
\n )}\n {state === STATE_NO_PAYMENT && (\n \n
\n )}\n {state === STATE_SHOW_BUTTON && (\n <>\n {error && (\n \n
\n )}\n \n \n )}\n {state === STATE_PAYMENT_IN_PROGRESS && (\n \n
\n )}\n {state === STATE_PAYMENT_COMPLETE && (\n \n
\n )}\n \n
\n );\n}\n\nSpreedlyGooglePayGateway.propTypes = {\n paymentAmount: PropTypes.number,\n payment: PropTypes.object,\n currency: PropTypes.string,\n options: PropTypes.shape({\n TestMode: PropTypes.oneOf(['True', 'False']),\n EnabledCardNetworks: PropTypes.string.isRequired,\n MerchantId: PropTypes.string.isRequired,\n MerchantName: PropTypes.string.isRequired,\n GatewayMerchantId: PropTypes.string.isRequired,\n }),\n};\n","import { useRef, useState, useMemo, useCallback, useEffect, useLayoutEffect } from 'react';\nimport { v4 } from 'uuid';\nimport { logger } from 'Common/core';\nimport useScript from '../useScript';\n\nconst PAGE_LOADING = 'PAGE_LOADING';\nconst PAGE_LOGIN = 'PAGE_LOGIN';\nconst PAGE_WALLET = 'PAGE_WALLET';\nconst SCOPE = 'payments:widget';\nconst POPUP = 'POPUP-PARAMETER';\n\nwindow.onAmazonLoginReady = () => {};\n\nexport default function useAmazonPay(idProp = `AmazonPay-${v4()}`, { Env, SellerId, ClientId } = {}) {\n const id = useRef({ main: idProp, btn: `${idProp}-btn`, widget: `${idProp}-widget` });\n const [orderReference, setOrderReference] = useState(null);\n const [readyToOrder, setReadyToOrder] = useState(false);\n const [page, setPage] = useState(PAGE_LOADING);\n\n const orderId = useMemo(() => (readyToOrder ? orderReference.getAmazonOrderReferenceId() : null), [\n readyToOrder,\n orderReference,\n ]);\n\n const src = useMemo(\n () =>\n `https://static-na.payments-amazon.com/OffAmazonPayments/us/${\n Env === 'TEST' ? 'sandbox/' : ''\n }js/Widgets.js`,\n [Env]\n );\n\n const onBefore = useCallback(() => {\n window.onAmazonLoginReady = () => {\n window.amazon.Login.setClientId(ClientId);\n setPage(PAGE_LOGIN);\n };\n }, [ClientId]);\n\n const onCleanup = useCallback(() => {\n window.onAmazonLoginReady = () => {};\n setReadyToOrder(false);\n setOrderReference(null);\n setPage(PAGE_LOADING);\n }, []);\n\n const amazon = useScript(src, {\n onBefore,\n onCleanup,\n globalNamespace: 'amazon',\n forceReload: true,\n destroyOnDismount: true,\n });\n\n const logout = useCallback(() => {\n if (amazon) amazon.Login.logout();\n setReadyToOrder(false);\n setOrderReference(null);\n setPage(PAGE_LOGIN);\n }, [amazon]);\n\n const state = useMemo(\n () => ({\n isLoading: page === PAGE_LOADING,\n isLoggedIn: page === PAGE_WALLET,\n logout,\n orderId,\n btnId: id.current.btn,\n widgetId: id.current.widget,\n }),\n [logout, page, orderId]\n );\n\n useEffect(() => {\n let handler;\n\n if (page === PAGE_LOADING && amazon) {\n clearTimeout(handler);\n handler = setTimeout(() => window.onAmazonLoginReady(), 100);\n }\n return () => clearTimeout(handler);\n }, [page, amazon]);\n\n useLayoutEffect(() => {\n if (page === PAGE_WALLET) {\n // bind the Amazon Wallet Widget to the appropriate div\n document.querySelector(`#${id.current.widget}`).innerHTML = '';\n new window.OffAmazonPayments.Widgets.Wallet({\n sellerId: SellerId,\n onPaymentSelect: (/* paymentInfo */) => {\n setReadyToOrder(true);\n },\n design: { designMode: 'responsive' },\n onOrderReferenceCreate: (newOrderReference) => {\n setOrderReference(newOrderReference);\n },\n onError: (error) => {\n logger.error(`${error.getErrorCode()}: ${error.getErrorMessage()}`);\n },\n }).bind(id.current.widget);\n } else if (page === PAGE_LOGIN) {\n // bind the Amazon Pay Login button to the appropriate div\n document.querySelector(`#${id.current.btn}`).innerHTML = '';\n window.OffAmazonPayments.Button(id.current.btn, SellerId, {\n type: 'PwA',\n color: 'LightGray',\n size: 'large',\n popup: true,\n\n authorization: () => {\n window.amazon.Login.authorize({ scope: SCOPE, popup: POPUP }, () => {\n setPage(PAGE_WALLET);\n });\n },\n onError: (error) => {\n logger.error(`${error.getErrorCode()}: ${error.getErrorMessage()}`);\n },\n });\n }\n }, [page, SellerId]);\n\n return state;\n}\n","import React, { useMemo, useCallback, useEffect, useRef } from 'react';\nimport get from 'lodash.get';\nimport { CreditCard } from 'Common/utils';\nimport { Translation } from 'Common/components/localization';\nimport { PAYMENT } from 'Common/constants/fields';\nimport useCurrentIssuer from './useCurrentIssuer';\n\nexport const processor = CreditCard.currentProcessor?.name ?? CreditCard.currentProcessor?.processorName;\n\nexport default function useCreditCard({ scope, options, usePlaceholders }) {\n const prefix = useMemo(() => (scope ? `${scope}.` : ''), [scope]);\n const currentIssuer = useCurrentIssuer(scope);\n const numberMask = useMemo(() => CreditCard.getCardNumberFormat({ issuer: currentIssuer }), [currentIssuer]);\n const issuerRef = useRef(currentIssuer);\n\n const labelProps = useCallback(\n (id, params) =>\n usePlaceholders\n ? { placeholder: id, placeholderParams: params }\n : { label: \n
\n )}\n {paymentObject?.Token ? ( //show the success message if we have the token (i.e. paid successfully via Google) and show the payment box if we don't\n \n
\n ) : (\n \n
\n \n \n {\n // setToken(auth.paymentMethodData.tokenizationData.token);\n //}}\n onLoadPaymentData={(data) => {\n setToken(data.paymentMethodData.tokenizationData.token);\n }}\n onError={(e) => {\n logger.error(e);\n setError(e);\n }}\n />\n
\n )}\n \n
\n );\n}\n\nAmazonPay.propTypes = {\n id: px.string,\n className: px.string,\n options: px.shape({\n ClientId: px.string.isRequired,\n Env: px.string.isRequired,\n SellerId: px.string.isRequired,\n }).isRequired,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { v4 } from 'uuid';\nimport * as types from 'Common/types';\nimport { useScript } from 'Common/hooks';\nimport { Translation } from 'Common/components/localization';\nimport { Field } from 'Common/components/forms';\nimport { PAYMENT as FIELDS } from 'Common/constants/fields';\nimport PaymentBlock from '../PaymentBlock';\n\nfunction createButtons(paypal, id, value, onApprove, onReady) {\n paypal\n .Buttons({\n style: { label: 'paypal' },\n onInit: onReady,\n createOrder: (_, actions) =>\n actions.order.create({\n purchase_units: [{ amount: { value: String(value) } }],\n }),\n onApprove,\n })\n .render(`#${id}`);\n}\n\nexport default function PayPal({ options, payment, className, paymentMethod, currency, paymentAmount = '0.01' }) {\n const id = React.useRef(`paypal-buttons-${v4()}`);\n const buttonsAdded = React.useRef(false);\n const hasToken = React.useMemo(() => payment?.PaymentType === 'PayPal' && payment.Token, [payment]);\n const [formValue, setFormValue] = React.useState(hasToken ? payment : { PaymentType: 'PayPal', Token: '' });\n const src = React.useMemo(() => {\n const params = new URLSearchParams();\n\n params.append('client-id', options.ClientId);\n params.append('currency', currency);\n params.append('intent', 'authorize');\n if (options.Sandbox) params.append('debug', 'true');\n if (options.MerchantId) params.append('merchant-id', options.MerchantId);\n\n return `https://www.paypal.com/sdk/js?${params.toString()}`;\n }, [options, currency]);\n\n const [buttonsLoaded, setButtonsLoaded] = React.useState(false);\n const paypal = useScript(src, { globalNamespace: 'paypal', destroyOnDismount: false, delay: 100 });\n const onReady = React.useCallback(() => setButtonsLoaded(true), [setButtonsLoaded]);\n const onComplete = React.useCallback((data) => setFormValue({ ...formValue, Token: data.orderID }), [formValue]);\n const onClear = React.useCallback(() => setFormValue(''), [setFormValue]);\n\n React.useEffect(() => {\n if (!formValue.Token && paypal && !buttonsAdded.current) {\n createButtons(paypal, id.current, paymentAmount, onComplete, onReady);\n buttonsAdded.current = true;\n }\n }, [paypal, formValue, paymentAmount, onComplete, onReady]);\n\n return (\n \n
\n ) : (\n \n )}\n {isLoggedIn ? (\n \n
\n ) : null}\n \n \n
\n \n \n
\n \n
\n );\n}\n\nPayPal.propTypes = {\n className: px.string,\n options: px.shape({\n Sandbox: px.string,\n EnvKey: px.string,\n MerchantId: px.oneOfType([px.string, px.number]),\n ClientId: px.string,\n }),\n payment: types.Payment,\n currency: px.string,\n paymentAmount: px.number,\n paymentMethod: types.PaymentMethod,\n};\n","import { useMemo } from 'react';\nimport { useFieldState } from 'informed';\nimport { CreditCard } from 'Common/utils';\nimport { PAYMENT } from 'Common/constants/fields';\n\nexport default function useCurrentIssuer(scope) {\n const { value: cardNumber } = useFieldState(scope ? `${scope}.${PAYMENT.cardNumber}` : PAYMENT.cardNumber);\n\n return useMemo(() => (cardNumber ? CreditCard.getIssuerByNumber(cardNumber) : null), [cardNumber]);\n}\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { useCurrentIssuer, useAvailableIssuers } from 'Common/hooks/payment';\nimport { CreditCard } from 'Common/utils';\nimport { Icon } from 'Common/components/ui';\n\nexport default function CreditCardIssuers({ options, scope, className, ...rest }) {\n const availableIssuers = useAvailableIssuers(options);\n const currentIssuer = useCurrentIssuer(scope);\n\n return (\n \n
\n
\n {hasToken && hasToken === formValue.Token ? (\n
\n
\n \n
\n )}\n \n {availableIssuers.map((issuer) => (\n
\n );\n}\n\nCreditCardIssuers.propTypes = {\n scope: px.string,\n options: px.shape({\n EnabledCardTypes: px.string,\n }),\n className: px.string,\n};\n","import { useMemo } from 'react';\nimport { CreditCard } from 'Common/utils';\n\nexport default function useAvailableIssuers(options) {\n return useMemo(\n () => (options?.EnabledCardTypes ? options.EnabledCardTypes.split(',') : CreditCard.DEFAULT_AVAILABLE),\n [options]\n );\n}\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useFormApi, useFieldState } from 'informed';\nimport { logger } from 'Common/core';\nimport { CreditCard } from 'Common/utils';\nimport { PAYMENT } from 'Common/constants/fields';\nimport { useExpDateFormat } from 'Common/hooks/payment';\nimport VALIDATION_STRINGS from 'Common/constants/validation';\nimport Field from 'Common/components/forms/Field';\n\nexport default function ExpDateForm({\n defaultFormat = 'M / YY',\n placeholder,\n required,\n initializeValueIfPristine,\n scope,\n ...rest\n}) {\n const scopeStr = React.useMemo(() => (scope ? `${scope}.` : ''), [scope]);\n const api = useFormApi();\n const { masks = [], format, parseLoose, formatStr } = useExpDateFormat(defaultFormat);\n const masksRef = React.useRef(masks.join(masks.length));\n const { value: date = '' } = useFieldState(`${scopeStr}${PAYMENT.cardDate}`);\n const { value: month = '' } = useFieldState(`${scopeStr}${PAYMENT.expMonth}`);\n const { value: year = '' } = useFieldState(`${scopeStr}${PAYMENT.expYear}`);\n\n const [mask, setMask] = React.useState(\n !date || masks.length < 2 ? masks[0] : masks[Math.max(masks.length - masks[0].length + date.length - 1, 0)]\n );\n\n const maskRef = React.useRef(mask);\n const dateRef = React.useRef(date);\n const monthRef = React.useRef(month);\n const yearRef = React.useRef(year);\n\n const updateMonthYear = React.useCallback(\n ({ month: m, year: y }) => {\n monthRef.current = m;\n yearRef.current = y;\n api.setValue(`${scopeStr}${PAYMENT.expMonth}`, m);\n api.setValue(`${scopeStr}${PAYMENT.expYear}`, y);\n },\n [api, scopeStr]\n );\n\n const validateDate = React.useCallback(\n (v) => {\n try {\n const { year: y, month: m } = parseLoose ? parseLoose(v) : { year: 5, month: 5 };\n\n return CreditCard.validateExpiration(m, y);\n } catch (e) {\n return VALIDATION_STRINGS.invalidCCDate;\n }\n },\n [parseLoose]\n );\n\n const transform = React.useCallback(\n (v) => {\n if (/^\\d\\d?20\\d\\d$/.test(v)) {\n return v.replace('20', '');\n } else if (/^\\d\\d?\\s*(\\/|-|\\.|\\s+)\\s*20\\d\\d$/.test(v)) {\n const { month: m, year: y } = parseLoose(v);\n\n return format(m, y);\n }\n return v;\n },\n [parseLoose, format]\n );\n\n React.useEffect(() => {\n const nextRef = masks.join(masks.length);\n\n if (dateRef.current !== date || masksRef.current !== nextRef) {\n dateRef.current = date;\n masksRef.current = nextRef;\n\n const nextMask =\n !date || masks.length < 2\n ? masks[0]\n : masks[Math.max(masks.length - masks[0].length + date.length - 1, 0)];\n\n if (nextMask !== maskRef.current) {\n setMask(nextMask);\n }\n\n if (parseLoose && date.length >= nextMask.length) {\n try {\n updateMonthYear(parseLoose(date));\n } catch (e) {\n logger.debug(`Failed to set month/year from expDate string:`, e);\n }\n }\n }\n }, [date, masks, parseLoose, updateMonthYear]);\n\n React.useEffect(() => {\n if (mask !== maskRef.current) {\n maskRef.current = mask;\n api.setValue(`${scopeStr}${PAYMENT.cardDate}`, api.getValue(`${scopeStr}${PAYMENT.cardDate}`));\n }\n }, [mask, api, scopeStr]);\n\n React.useEffect(() => {\n if (month !== monthRef.current || year !== yearRef.current) {\n monthRef.current = month;\n yearRef.current = year;\n if (format) api.setValue(`${scopeStr}${PAYMENT.cardDate}`, month && year ? format(month, year) : '');\n }\n }, [month, year, scopeStr, api, format]);\n\n return (\n <>\n \n
\n ) : (\n \n
\n ) : null}\n\n {!isUserAuthenticated && autosave ? (\n \n {isUserAuthenticated && savedPayments?.length ? (\n
\n ) : null}\n {pmt && (!isUserAuthenticated || !savedPayments?.length) ? (\n \n
\n \n \n
\n \n \n
\n \n
\n
\n \n \n
\n {pmt ? (\n <>\n \n
\n ) : null}\n {pmt ? null : (\n \n
\n
\n \n ) : null}\n {PaymentForm ? (\n \n {paymentOptions.map((p) =>\n p.PaymentType !== 'GiftCard' ? (\n \n
\n \n
\n \n ) : null}\n \n
\n {errorMessages && errorMessages.length ? (\n \n {errorMessages.map((err, index) => (\n
\n ) : null}\n \n
\n \n \n
\n \n );\n}\n\nCheckoutComplete.propTypes = {\n className: px.string,\n disabled: px.bool,\n disableSubmit: px.bool,\n onPlaceOrder: px.func,\n cartPage: px.string,\n addPromotion: px.func,\n removePromotion: px.func,\n promoError: px.shape({ message: px.string, timestamp: px.number, reference: px.string, type: px.string }),\n currency: px.string,\n promotions: px.oneOfType([px.array, px.object]),\n orderSummaryData: types.OrderSummary,\n validateUser: px.func,\n useRecaptcha: px.bool,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\n\nfunction stopProp(e) {\n e.stopPropagation();\n}\n\nexport default function Drawer({\n className,\n children,\n open = false,\n backdrop = false,\n onClickOutside = null,\n size,\n anchor = 'left',\n}) {\n const classes = React.useMemo(\n () => cx(`Drawer anchor-${anchor}`, open && 'open', backdrop && 'backdrop', className),\n [className, open, backdrop, anchor]\n );\n\n const style = React.useMemo(() => {\n const s = {};\n\n if (size) {\n if (anchor === 'left' || anchor === 'right') {\n s.width = size;\n s.maxWidth = size;\n s.minWidth = size;\n } else {\n s.height = size;\n s.maxHeight = size;\n s.minHeight = size;\n }\n }\n return s;\n }, [size, anchor]);\n\n return (\n \n
\n );\n}\n\nDrawer.propTypes = {\n className: px.string,\n children: px.node,\n open: px.bool,\n anchor: px.oneOf(['left', 'top', 'bottom', 'right']),\n backdrop: px.bool,\n onClickOutside: px.func,\n size: px.string,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport * as types from 'Common/types';\nimport { Drawer } from 'Common/components/ui';\nimport { ADDRESS } from 'Common/constants/fields';\nimport { Translation } from 'Common/components/localization';\n\nfunction Address({ address, ignoreWarnings = false } = {}) {\n const {\n [ADDRESS.line1]: line1,\n [ADDRESS.line2]: line2,\n [ADDRESS.city]: city,\n [ADDRESS.state]: region,\n [ADDRESS.zip]: zip,\n [ADDRESS.country]: country,\n [ADDRESS.isStreetAddress]: isStreet,\n } = React.useMemo(() => address || {}, [address]);\n\n return (\n \n {children}\n
\n \n {!ignoreWarnings && !isStreet ? (\n
\n );\n}\n\nAddress.propTypes = { address: types.Address, ignoreWarnings: px.bool };\n\nexport default function AddressVerificationDrawer({\n className,\n address,\n verifiedAddresses = [],\n onSelect,\n onCancel,\n open,\n anchor = 'right',\n allowPostal: ignoreWarnings = false,\n}) {\n const disabled = React.useMemo(\n () => !ignoreWarnings && verifiedAddresses?.length === 1 && !verifiedAddresses[0].IsStreetAddress,\n [verifiedAddresses, ignoreWarnings]\n );\n\n const onKeyDown = React.useCallback(\n (a, d = false) =>\n !d && onSelect && (a?.IsStreetAddress !== false || ignoreWarnings)\n ? (e) => {\n if (e.key === 'Enter') {\n onSelect(a);\n }\n }\n : null,\n [onSelect, ignoreWarnings]\n );\n\n const onClick = React.useCallback(\n (a, d = false) =>\n !d && onSelect && (a?.IsStreetAddress !== false || ignoreWarnings) ? () => onSelect(a) : null,\n [onSelect, ignoreWarnings]\n );\n\n React.useEffect(() => {\n if (open && verifiedAddresses.length === 1 && address == null) {\n onSelect(verifiedAddresses[0]);\n }\n }, [address, open, onSelect, verifiedAddresses]);\n\n return (\n \n
\n ) : null}\n {line1}
\n {line2 ? {line2}
: null}\n \n {city}, {region || ''} {zip}\n
\n {country}
\n \n
\n \n
\n \n
\n \n \n ) : null}\n {verifiedAddresses.map((a, i) => (\n \n \n
\n ) : (\n \n \n
\n )}\n \n \n ))}\n \n \n {showSpinner ? 1}\n siteId={siteId}\n cartPage={cartPageLink}\n fetchShippingMethods={fetchShippingMethods}\n />\n ))}\n shipmentIsValid(s))}\n />\n
\n );\n}\n\nCheckoutPage.propTypes = {\n addPromotion: px.func,\n promoError: px.shape({ message: px.string, timestamp: px.number, reference: px.string, type: px.string }),\n className: px.string,\n onUpdateEmail: px.func,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n onValidateShipment: px.func,\n onUpdatePayment: px.func,\n cartPageLink: px.string,\n accountEmail: px.string,\n shipments: px.arrayOf(types.Shipment),\n orderSummaryData: types.OrderSummary,\n verifiedAddresses: px.arrayOf(types.Address),\n unverifiedAddress: types.Address,\n CheckoutEmailSection: px.elementType,\n CheckoutShipmentSection: px.elementType,\n AddressVerification: px.elementType,\n paymentMethods: px.arrayOf(px.object),\n LoaderComponent: px.elementType,\n signinLink: px.string,\n pageTitle: px.string,\n onPlaceOrder: px.func,\n loggedIn: px.bool,\n currency: px.string,\n signup: px.bool,\n isOrdering: px.bool,\n siteId: px.string,\n requiredPaymentAmount: px.number,\n CheckoutCompleteSection: px.elementType,\n CheckoutPaymentSection: px.elementType,\n fetchShippingMethods: px.func,\n confirmShipment: px.objectOf(px.any),\n isLoading: px.bool,\n onConfirmShipment: px.func,\n orderGiftCards: px.oneOfType([px.object, px.array]),\n payments: px.arrayOf(px.object),\n promotions: px.oneOfType([px.object, px.array]),\n removePayment: px.func,\n removePromotion: px.func,\n savedShippingAddresses: px.oneOfType([px.object, px.array]),\n onCancelVerification: px.func,\n marketId: px.string,\n useFullBillingAddress: px.bool,\n validateUser: px.func,\n catalogEntities: px.arrayOf(types.Product),\n useRecaptcha: px.bool,\n forms: px.arrayOf(types.CartForm),\n};\n","import * as React from 'react';\nimport { useSelector } from 'react-redux';\nimport { UserMessage } from 'Common/components/ui';\nimport { order } from '~features';\n\nexport default function CheckoutUserMessage() {\n const props = useSelector(order.selectors.getNonLineItemValidationError);\n\n return {pageTitle}
\n {onValidateShipment ? (\n\n \n
\n );\n}\n\nSearchBar.propTypes = {\n style: px.object,\n className: px.string,\n onClear: px.func,\n onTextChange: px.func,\n onSubmit: px.func,\n query: px.string,\n showLoader: px.bool,\n placeholder: px.string,\n};\n","import { useEffect } from \"react\";\n\nexport default function useWindowResize(callback, deps) {\n useEffect(() => {\n function recompute() {\n callback();\n }\n\n window.addEventListener('resize', recompute);\n\n return () => {\n window.removeEventListener('resize', recompute);\n };\n }, deps);\n}\n","import React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { Icon } from 'Common/components/ui';\nimport { useTranslation, useWindowResize } from 'Common/hooks';\nimport $ from 'jquery';\n\nconst TAB_POS = {\n vert: 'vertical',\n horiz: 'horizontal',\n};\n\n/**\n * ID of each tab must corrilate with the ID of it's indended content (in children).\n */\nexport default function TabbedContent({\n className,\n style,\n tabs,\n children,\n onSelectTab,\n tabLayout = TAB_POS.horiz,\n tabGap = 1,\n tabScroll = false,\n}) {\n const [canScroll, setCanScroll] = React.useState({ left: false, right: false });\n const leftLbl = useTranslation('TabbedContent.Navigation.Button.Left.Label');\n const rightLbl = useTranslation('TabbedContent.Navigation.Button.Right.Label');\n const tabsRef = React.useRef();\n const showScrollBtn = React.useMemo(() => tabScroll && tabLayout === TAB_POS.horiz, [tabLayout, tabScroll]);\n const selectedContentId = React.useMemo(() => tabs.find((t) => t.selected)?.contentId, [tabs]);\n const onClick = React.useCallback(\n (tab) => () => {\n onSelectTab(tab);\n },\n [onSelectTab]\n );\n\n /**\n * determines the arrow direction clicked based on parameter to then add 1 or -1 to the currently selected tab index.\n */\n const onArrowClick = React.useCallback(\n (dir) => () => {\n const indxChange = dir === 'left' ? -1 : 1;\n const selectedIdx = tabs.findIndex((t) => t.selected);\n const newIdx = selectedIdx + indxChange;\n\n if (newIdx > -1 && newIdx < tabs.length) {\n scrollToIndex(newIdx);\n onSelectTab(tabs.find((_, i) => i === newIdx));\n } else {\n scrollToIndex(selectedIdx);\n }\n },\n [onSelectTab, scrollToIndex, tabs]\n );\n\n const scrollToIndex = React.useCallback((idx) => {\n const el = tabsRef.current.children[idx];\n\n $(tabsRef.current).animate({ scrollLeft: el.offsetLeft + el.offsetWidth }, 350);\n }, []);\n\n /**\n * determines to show our left and or right scroll buttons based on current scroll state of tabs (scrollWidth and scrollLeft).\n */\n const computeCanScroll = React.useCallback(() => {\n if (tabsRef.current.scrollWidth > tabsRef.current.offsetWidth) {\n const firstItem = tabsRef.current.children.item(1); // 1 to skip the arrow button\n\n setCanScroll({\n left: tabsRef.current.scrollLeft > firstItem.offsetWidth / 2,\n right: tabsRef.current.scrollWidth - (tabsRef.current.offsetWidth + tabsRef.current.scrollLeft) > 0,\n });\n } else {\n setCanScroll({ left: false, right: false });\n }\n }, []);\n\n useWindowResize(computeCanScroll, [computeCanScroll]);\n React.useEffect(() => {\n computeCanScroll();\n\n tabsRef.current.addEventListener('scroll', computeCanScroll);\n return () => {\n window.removeEventListener('scroll', computeCanScroll);\n };\n }, [computeCanScroll]);\n\n return (\n \n {showLoader ? : null}\n
\n \n
\n \n \n \n \n {tab.tabContent}\n \n ))}\n \n
\n \n {React.Children.map(children, (child) => (child.props.id === selectedContentId ? child : null))}\n
\n \n );\n}\n\nTabbedContent.propTypes = {\n style: px.object,\n className: px.string,\n tabs: px.arrayOf(\n px.shape({ contentId: px.string.isRequired, tabContent: px.node, selected: px.bool, args: px.object })\n ),\n children: px.node,\n onSelectTab: px.func.isRequired,\n tabLayout: px.oneOf([TAB_POS.vert, TAB_POS.horiz]),\n tabGap: px.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]),\n tabScroll: px.bool,\n};\n","import React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { Facet } from 'Common/types';\nimport { TabbedContent } from 'Common/components/ui';\n\nexport default function SearchTabbedFacet({ className, style, facet, onChange, order = [] }) {\n const unsortedTabs = React.useMemo(\n () =>\n facet?.options\n ?.filter((o) => o.count > 0)\n ?.map((o) => ({ contentId: o.value, tabContent: `${o.title} (${o.count})`, selected: o.selected })) ?? [],\n [facet]\n );\n\n const tabs = React.useMemo(\n () => [\n ...order.map((value) => unsortedTabs?.filter((x) => x.contentId === value)[0]).filter(Boolean),\n ...unsortedTabs.filter((tab) => !order.includes(tab.contentId)),\n ],\n [unsortedTabs, order]\n );\n\n const onSelectTab = React.useCallback(\n ({ contentId }) => {\n onChange({\n ...facet,\n options: facet.options.map((o) =>\n o.value === contentId ? { ...o, selected: true } : { ...o, selected: false }\n ),\n });\n },\n [facet, onChange]\n );\n\n return (\n \n
\n );\n}\n\nSearchTabbedFacet.propTypes = {\n order: px.arrayOf(px.string),\n style: px.object,\n className: px.string,\n facet: Facet,\n onChange: px.func,\n};\n","import React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { HTMLRender, Social } from 'Common/components/ui';\nimport { useBEM } from 'Common/hooks';\nimport * as PRODUCT from '~config/product';\nimport { Translation } from 'Common/components/localization';\n\n/**\n *\n * @param {{ className: string, style: Object, result: import('./SearchProvider').ContentSearchResult}}} param0\n * @returns {JSX.Element}\n */\nexport default function ContentSearchResult({ className, style, showFake = false, result }) {\n const [b, em] = useBEM('ContentSearchResult', className);\n const img = React.useMemo(\n () =>\n result.imageUrl?.includes('ytimg.com')\n ? result.imageUrl\n : `${result.imageUrl}?format=png&width=360&height=360${\n PRODUCT.TRANSFORM_PRODUCT_IMAGE_BACKGROUND ? '&transBg=true' : ''\n }`,\n [result]\n );\n\n return showFake ? (\n \n
\n <>\n \n\n {result.shortDescription ? (\n {result.title}
\n\n
\n ) : result.description ? (\n {result.shortDescription}
\n\n ${result.description}`} />\n
\n ) : null}\n\n \n \n
\n \n \n );\n}\n\nconst FakeResult = () => {\n return (\n \n
\n \n \n \n \n
\n );\n};\n\nContentSearchResult.propTypes = {\n style: px.object,\n className: px.string,\n result: px.object,\n showFake: px.bool,\n};\n","import React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { useBEM } from 'Common/hooks';\nimport { ProductBadge, ProductPrice } from 'Common/components/product';\nimport { Translation } from 'Common/components/localization';\nimport { ProductInfo } from 'Common/models';\n\nexport default function ProductSearchResult({\n className,\n style,\n showFake,\n result,\n active = false,\n openQuickview,\n closeQuickview,\n}) {\n const [b, em] = useBEM('ProductSearchResult', className);\n const isDisplayOnly = ProductInfo.isDisplayOnly(result?.product?.catalogEntity);\n \n return showFake ? (\n \n
\n \n
\n {result.product.title}
\n\n {\n closeQuickview();\n e.preventDefault();\n }\n : (e) => {\n openQuickview();\n e.preventDefault();\n }\n }\n role=\"button\"\n href=\"#\"\n >\n \n
\n \n );\n}\n\nProductSearchResult.propTypes = {\n style: px.object,\n className: px.string,\n result: px.object,\n showFake: px.bool,\n active: px.bool,\n openQuickview: px.func,\n closeQuickview: px.func,\n};\n\nconst FakeResult = () => {\n return (\n \n \n \n \n
\n );\n};\n","import React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { v4 } from 'uuid';\nimport { Icon } from 'Common/components/ui';\nimport { youtubeThumbnailResolver } from 'Common/utils';\nimport { useBEM, useTranslation } from 'Common/hooks';\nimport * as PRODUCT from '~config/product';\n\n/**\n *\n * @param {{ className: string, style: Object, result: import('./SearchProvider').ContentSearchResult}}} param0\n * @returns {JSX.Element}\n */\nexport default function VideoSearchResult({ className, style, result, onPlayVideo = () => null, showFake = false }) {\n const [id] = React.useState(() => `video-${v4()}`);\n const [b, em] = useBEM('ContentSearchResult', className);\n const lblPlay = useTranslation('Commerce.Product.Video.Subtitle');\n const videoData = React.useMemo(() => ({ url: result.url, playing: true, showControls: result.controllable }), [\n result,\n ]);\n\n const img = React.useMemo(\n () =>\n result.imageUrl?.includes('ytimg.com')\n ? result.imageUrl\n : `${result.imageUrl}?format=png&width=360&height=360${\n PRODUCT.TRANSFORM_PRODUCT_IMAGE_BACKGROUND ? '&transBg=true' : ''\n }`,\n [result]\n );\n\n const onClick = React.useCallback(\n (e) => {\n e.preventDefault();\n e.stopPropagation();\n onPlayVideo(videoData)(e);\n },\n [videoData, onPlayVideo]\n );\n\n React.useLayoutEffect(() => {\n youtubeThumbnailResolver(`#${id}`);\n }, [img, id]);\n\n return showFake ? (\n \n
\n \n \n \n );\n}\n\nconst FakeResult = () => {\n return (\n {result.title}
\n\n \n
\n );\n};\n\nVideoSearchResult.propTypes = {\n style: px.object,\n className: px.string,\n result: px.object,\n onPlayVideo: px.func,\n showFake: px.bool,\n};\n","import React from 'react';\nimport px from 'prop-types';\nimport ContentSearchResult from './ContentSearchResult';\nimport ProductSearchResult from './ProductSearchResult';\nimport VideoSearchResult from './VideoSearchResult';\n\nconst ResultComponents = { product: ProductSearchResult, content: ContentSearchResult, video: VideoSearchResult };\n\nexport default function SearchResult({ result, ...props }) {\n const Component = ResultComponents[result?.type] ?? ContentSearchResult;\n\n return \n \n \n
\n \n
\n );\n}\n\nSearchPagingSummary.propTypes = {\n style: px.object,\n className: px.string,\n pageInfo: PageInfo,\n hide: px.bool,\n};\n","import { Api } from 'Common/utils';\n\nexport function searchWithCategory(query) {\n return Api.POST('/search/FindWithCategoryType', { TextQuery: query });\n}\n\nexport function searchAllContent(query, params = null) {\n return Api.POST('/search/allcontent', query, { params });\n}\n\nexport function contentSearch(query, page = 1, pageSize = undefined, sort = undefined, facets = []) {\n const params = {};\n\n for (const f of facets) {\n const selectedValues = f.options.filter((o) => o.selected).map((o) => o.value);\n\n if (!selectedValues.length) continue;\n params[f.id] = selectedValues;\n }\n\n return Api.POST(\n '/search/content',\n { TextQuery: query, PageSize: pageSize, Page: page, SortOrder: sort },\n { params }\n );\n}\n\nexport function topSearches() {\n return Api.GET('/search/topsearches');\n}\n\nexport function crossSiteSearch(crossSiteSearchData) {\n return Api.POST('/search/CrossSiteSearch', { ...crossSiteSearchData });\n}\n","import React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\n\nconst Section = ({ header, sidebarLeft, sidebarRight, children, className, style }) => (\n \n {!pageInfo?.total ? (\n
{sidebarLeft}
: null}\n {children}
\n {sidebarRight ? {sidebarRight}
: null}\n \n);\n\nSection.propTypes = {\n className: px.string,\n style: px.object,\n header: px.node,\n sidebarLeft: px.node,\n sidebarRight: px.node,\n children: px.node.isRequired,\n};\n\nexport default Section;\n","import React, { useState } from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport useWindowResize from 'Common/hooks/useWindowResize';\n\nexport default function ResultsGrid({ className, style, children, gap = 0, expandedResultIndex, expandedChildren }) {\n const containerRef = React.useRef(null);\n\n const [resultsPerRow, setResultsPerRow] = useState(1);\n\n const rowInsertionIndex = Math.floor(expandedResultIndex / resultsPerRow) + 1;\n\n const recomputeResultsPerRow = React.useCallback(() => {\n const containerEl = containerRef.current;\n\n if (!containerEl) return;\n\n const firstResultEl = containerEl.childNodes[0];\n\n if (!firstResultEl) return;\n\n const resultRect = firstResultEl.getBoundingClientRect();\n const containerRect = containerEl.getBoundingClientRect();\n\n if (!resultRect?.width || !containerRect?.width) return;\n\n // Convert \"gap\" to pixels:\n const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);\n\n // Each \"gap\" unit is 0.5rem based on spacing() func in _functions.scss\n // so gap=2 => 1rem => e.g. 16px\n const gapPx = gap * 0.5 * rootFontSize;\n\n const resultWidth = resultRect.width;\n const containerWidth = containerRect.width;\n\n // Solve for the maximum integer n such that:\n // n * resultWidth + (n - 1) * gapPx <= containerWidth\n // => n = floor((containerWidth + gapPx) / (resultWidth + gapPx))\n const newResultsPerRow = Math.floor((containerWidth + gapPx) / (resultWidth + gapPx));\n\n setResultsPerRow(newResultsPerRow);\n }, [gap]);\n\n useWindowResize(recomputeResultsPerRow, [recomputeResultsPerRow]);\n React.useEffect(recomputeResultsPerRow, [children, expandedResultIndex, expandedChildren, recomputeResultsPerRow]);\n\n return (\n \n {React.Children.map(children, (result, i) => (\n
\n );\n}\n\nResultsGrid.propTypes = {\n style: px.object,\n className: px.string,\n children: px.arrayOf(px.node),\n expandedResultIndex: px.number,\n expandedChildren: px.node,\n gap: px.number,\n};\n","import React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { customer, order } from '~features';\nimport { useSelector } from 'react-redux';\nimport { useAction } from 'Common/hooks';\nimport { NotificationSubscription } from 'Common/containers/customer';\n\nexport default function ProductQuickviewContainer({\n className,\n style,\n Component,\n useRecaptcha,\n googleRecaptchaV3Sitekey,\n viewType,\n ...props\n}) {\n const isUserAuthenticated = useSelector(customer.selectors.isLoggedIn);\n const onAddItemToCart = useAction(order.actions.addItem);\n const onAddMultipleToCart = useAction(order.actions.addItems);\n\n return (\n \n {result}\n
\n ))}\n {expandedChildren ? (\n \n
\n ) : null}\n {expandedChildren}
\n \n
\n );\n}\n\nProductQuickviewContainer.propTypes = {\n style: px.object,\n className: px.string,\n Component: px.elementType,\n useRecaptcha: px.bool,\n googleRecaptchaV3Sitekey: px.string,\n viewType: px.string,\n};\n","import React from 'react';\nimport px from 'prop-types';\nimport { ProductListView } from 'Common/components/product';\nimport { Product } from 'Common/types';\nimport { ProductPartialView, ProductQuickviewContainer } from 'Common/containers/product';\nimport { Icon } from 'Common/containers';\nimport { useTranslation } from 'Common/hooks';\nimport { Spinner } from 'Common/components/ui';\n\nconst quickview = {\n List: List,\n Filter: Filter,\n};\n\nexport default function ProductQuickview({\n className,\n style,\n viewType,\n product,\n showLoader = false,\n onClose,\n inputStatusTooltip,\n ...props\n}) {\n const Component = React.useMemo(() => quickview[viewType] ?? quickview['List'], [viewType]);\n\n return showLoader ? (\n \n
\n ) : (\n \n \n
\n ))}\n \n );\n}\n\nSearchCheckboxFacet.propTypes = {\n className: px.string,\n style: px.object,\n facet: Facet,\n onChange: px.func,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { v4 } from 'uuid';\nimport { Facet } from 'Common/types';\nimport { Dropdown } from 'Common/components/ui';\nimport { toggleFacetValue } from './utils';\n\nexport default function SearchRadioFacet({ className, style, facet, onChange }) {\n const [isOpen, setIsOpen] = React.useState(false);\n const toggleOpen = React.useCallback(() => setIsOpen((val) => !val), []);\n const id = React.useRef(`radio_${v4()}`);\n\n return (\n \n onChange(toggleFacetValue(idx, facet))}\n >\n \n
\n ))}\n \n );\n}\n\nSearchRadioFacet.propTypes = {\n className: px.string,\n style: px.object,\n facet: Facet,\n onChange: px.func,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Facet } from 'Common/types';\nimport { Dropdown } from 'Common/components/ui';\nimport { toggleFacetValue } from './utils';\n\nexport default function SearchDropdownFacet({ className, style, facet, onChange }) {\n const [isOpen, setIsOpen] = React.useState(false);\n const toggleOpen = React.useCallback(() => setIsOpen((val) => !val), []);\n\n return (\n \n {children}\n
\n );\n}\n\nPanel.propTypes = {\n children: px.arrayOf(px.node),\n style: px.object,\n className: px.string,\n};\n","import React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\n\nexport default function Stack({ children, dividers, direction = 'column', gap = 0, className, style }) {\n return (\n \n
\n \n {pendingFacets?.map((f, idx) => (\n
\n {children ?? null}\n \n {showClear ? (\n \n
\n )\n }\n >\n \n
\n ) : null}\n \n {icon &&
\n );\n}\n\nPanelSection.propTypes = {\n style: px.object,\n className: px.string,\n title: px.node,\n icon: px.node,\n iconPos: px.oneOf(['left', 'right']),\n children: px.node.isRequired,\n};\n","import React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { Stack, Panel, PanelSection } from 'Common/components/ui';\nimport { Translation } from 'Common/components/localization';\n\n/**\n * Displays link sections configured in cms using the Models specified in the backend.\n * Also displays recentSearches as stored in cookies.\n */\nexport default function SearchDrawerLinks({ className, style, linkSections, recentSearches }) {\n return (\n {icon}
}\n {title && {title}
}\n {children}
\n \n
\n {link.Title}
\n \n \n \n
\n );\n}\n\nFakeResult.propTypes = {\n className: px.string,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport debounce from 'lodash.debounce';\nimport * as SearchApi from 'Common/features/search/api';\nimport { Cookie } from 'Common/utils';\nimport { HeaderController } from 'Common/controllers';\nimport { useViewport } from 'Common/hooks';\nimport SearchDrawerLinks from './SearchDrawerLinks';\nimport { SearchContext } from './SearchProvider';\nimport SearchBar from './SearchBar';\nimport HeaderSearchResult from './HeaderSearchResult';\nimport { Translation } from 'Common/components/localization';\nimport { ResultsGrid, Section } from 'Common/components/ui';\n\nconst initialPageSize = 5;\nconst textSearchPageSize = 8;\n\nfunction updateRecents(searches, relatedSearchCount, value) {\n let newSearches = searches?.map((s) => s.title);\n\n if (newSearches.includes(value)) return;\n newSearches.unshift(value);\n\n if (newSearches.length > relatedSearchCount) {\n newSearches = newSearches.slice(0, relatedSearchCount);\n }\n\n for (let i = 0; i < newSearches.length; i++) {\n Cookie.createCookie(`RecentSearch${i}`, newSearches[i]);\n }\n}\n\n/**\n *\n * @param {SearchContext} context\n * @param {boolean} appendResults\n * @returns {SearchContext}\n */\nasync function defaultSearch(context, query = null, pageSize = textSearchPageSize, sort) {\n return SearchContext.fromSearchApiResponse(\n context,\n await SearchApi.contentSearch(query, 1, pageSize, sort, context.facets)\n );\n}\n\nconst defaultContext = (intialContext) => SearchContext.create(intialContext);\n\nexport default function HeaderSearch({\n className,\n id,\n style,\n onSearch = defaultSearch,\n linkSections,\n relatedSearchCount,\n theme = 'light',\n searchResultsPage,\n}) {\n /**\n * @type {[SearchContext, (action: SearchContextAction) => void]}\n */\n const [context, dispatch] = React.useReducer(SearchContext.reducer, defaultContext({}));\n const viewport = useViewport();\n const drawerRef = React.useRef();\n const headerSearchRef = React.useRef($(`#${id}`)); // parent div\n const initialResults = React.useRef();\n const [isLoading, setIsLoading] = React.useState(false);\n\n const [showInitialResults, setShowInitialResults] = React.useState(true);\n\n /**\n * @type {(query: string) => void}\n */\n const setQuery = React.useCallback(\n (query) => {\n dispatch({\n type: 'setQuery',\n payload: query,\n });\n },\n [dispatch]\n );\n\n const onTextChange = React.useCallback(\n async (text) => {\n setQuery(text);\n if (text.length > 2) await debounceSearch(context, text);\n else debounceSearch.cancel();\n },\n [setQuery, debounceSearch, context]\n );\n\n const onClear = React.useCallback(() => {\n setQuery(null);\n HeaderController.closeSearch();\n }, [setQuery]);\n\n const search = React.useCallback(\n async (ctx, query, pageSize, sort = 'Relevance') => {\n setIsLoading(true);\n const newCtx = await onSearch(ctx, query, pageSize, sort);\n\n setIsLoading(false);\n if (!initialResults.current) initialResults.current = newCtx?.results;\n else setShowInitialResults(false);\n dispatch({\n type: 'setResults',\n payload: newCtx,\n });\n },\n [onSearch, dispatch]\n );\n\n const onSubmit = React.useCallback(\n (e) => {\n updateRecents(recentSearches, relatedSearchCount, context.query);\n e.preventDefault();\n window.location.href = `${searchResultsPage}?query=${context.query}`;\n const url = new URL(searchResultsPage, window.location.origin);\n\n url.searchParams.set('query', context.query);\n\n window.location.href = url.toString();\n },\n [recentSearches, relatedSearchCount, context.query, searchResultsPage]\n );\n\n const debounceSearch = React.useMemo(() => (search ? debounce(search, 900) : null), [search]);\n\n const recentSearches = React.useMemo(() => {\n let recents = [];\n\n for (let i in [...Array(relatedSearchCount)]) {\n const query = Cookie.getCookieByName(`RecentSearch${i}`);\n\n if (!query) continue;\n recents.push({\n title: query,\n link: `${searchResultsPage}?query=${query}`,\n });\n }\n return recents;\n }, [relatedSearchCount, searchResultsPage]);\n\n const searchDrawerLinks = React.useMemo(\n () =>\n !showInitialResults && (linkSections?.length || recentSearches?.length) ? (\n \n \n \n {resultsLink ? \n {results?.map((result) => (\n \n )}\n \n
\n \n );\n}\n\nHeaderSearch.propTypes = {\n style: px.object,\n className: px.string,\n onSearch: px.func,\n linkSections: px.arrayOf(\n px.shape({\n Title: px.string,\n Links: px.arrayOf(\n px.shape({\n Href: px.string,\n Title: px.string,\n })\n ),\n })\n ),\n relatedSearchCount: px.number,\n /**\n * id of parent div\n */\n id: px.string,\n theme: px.string,\n searchResultsPage: px.string,\n};\n","import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { v4 as uuidv4 } from 'uuid';\nimport { Translation } from 'Common/components/localization';\nimport { useTranslation } from 'Common/hooks';\nimport { Email } from 'Common/utils';\nimport { PhoneNumberUtil } from 'google-libphonenumber';\n\nconst phoneUtil = PhoneNumberUtil.getInstance();\n\nexport default function AdvancedSubscribeForm({\n allowMultiple,\n bodyColor,\n bodyText,\n btnColor,\n btnTextColor,\n className,\n getMailchimpStatus,\n id = uuidv4(),\n mailchimpSMSRequest,\n privacyUrl,\n smsConsentText,\n subscribeToMailchimp,\n tags,\n termsUrl,\n titleColor,\n titleFontStyle,\n url,\n}) {\n const idRef = useRef(id);\n const formRef = useRef(null);\n const frameRef = useRef(null);\n const submitLbl = useTranslation('Form.Advanced.Subscription.Submit');\n\n const [email, setEmail] = useState('');\n const [smsPhone, setSmsPhone] = useState('');\n const [firstName, setFirstName] = useState('');\n const [lastName, setLastName] = useState('');\n const [birthdayMonth, setBirthdayMonth] = useState('');\n const [birthdayDay, setBirthdayDay] = useState('');\n const [zipCode, setZipCode] = useState('');\n const [smsPhoneAck, setSmsPhoneAck] = useState(false);\n const [listId, setListId] = useState('');\n const [hiddenFieldName, setHiddenFieldName] = useState('');\n const [complete, setComplete] = useState(false);\n const [submissionErrors, setSubmissionErrors] = useState([]);\n\n const isValidEmail = useMemo(() => Email.isValid(email), [email]);\n\n const hasEmailInputValue = email.trim() !== '';\n const hasPhoneInputValue = smsPhone.trim() !== '';\n const hasBirthdayMonthValue = birthdayMonth.trim() != '';\n const hasBirthdayDayValue = birthdayDay.trim() != '';\n const showForm = allowMultiple || !complete || submissionErrors.length > 0;\n\n const isValidPhone = useMemo(() => {\n if (!hasPhoneInputValue) {\n return false;\n }\n try {\n const parsedNumber = phoneUtil.parseAndKeepRawInput(smsPhone, 'US');\n\n return phoneUtil.isValidNumber(parsedNumber);\n } catch {\n return false;\n }\n }, [smsPhone, hasPhoneInputValue]);\n\n const validationErrors = useMemo(() => {\n const errors = [];\n\n if (hasEmailInputValue && !isValidEmail) {\n errors.push('Form.Advanced.Subscription.Email.Input.Error');\n }\n if (hasPhoneInputValue && !isValidPhone) {\n errors.push('Commerce.Account.PhoneNumberValidationMessage');\n }\n if (hasPhoneInputValue && !smsPhoneAck) {\n errors.push('Form.Advanced.Subscription.PhoneAck.Input.Error');\n }\n if (hasBirthdayDayValue && !hasBirthdayMonthValue) {\n errors.push('Form.Advanced.Subscription.Birthday.Input.Error');\n }\n return errors;\n }, [\n hasBirthdayDayValue,\n hasBirthdayMonthValue,\n hasEmailInputValue,\n hasPhoneInputValue,\n isValidEmail,\n isValidPhone,\n smsPhoneAck,\n ]);\n\n const isFormValid = hasEmailInputValue && validationErrors.length === 0;\n\n useEffect(() => {\n if (url) {\n const newUrl = new URL(url);\n const u = newUrl.searchParams.get('u');\n const idParam = newUrl.searchParams.get('id');\n\n setListId(idParam);\n\n if (u && idParam) {\n setHiddenFieldName(`b_${u}_${idParam}`);\n }\n }\n }, [url]);\n\n const handleSubmit = useCallback(\n async (e) => {\n e.preventDefault();\n\n if (isFormValid) {\n setComplete(false);\n setSubmissionErrors([]);\n\n if (!isValidPhone) {\n await subscribeToMailchimp(\n email,\n listId,\n firstName,\n lastName,\n birthdayMonth,\n birthdayDay,\n zipCode,\n Object.values(tags)\n );\n } else {\n const formData = {\n ...(isValidEmail && { EMAIL: email }),\n FNAME: firstName,\n LNAME: lastName,\n 'MMERGE5[month]': birthdayMonth,\n 'MMERGE5[day]': birthdayDay,\n MMERGE5: zipCode,\n tags: tags ? Object.keys(tags).join(',') : '',\n };\n\n const result = await mailchimpSMSRequest(formData, url, formRef, frameRef);\n\n if (!result?.success || result?.error) {\n setSubmissionErrors([result?.error || 'Form.Advanced.Subscription.Failure']);\n } else {\n setComplete(true);\n }\n }\n } else {\n setSubmissionErrors(['Please fill out all required fields correctly.']);\n }\n },\n [\n birthdayDay,\n birthdayMonth,\n email,\n firstName,\n isFormValid,\n isValidEmail,\n isValidPhone,\n lastName,\n listId,\n mailchimpSMSRequest,\n subscribeToMailchimp,\n tags,\n url,\n zipCode,\n ]\n );\n\n useEffect(() => {\n const frame = document.createElement('iframe');\n\n frame.name = `frame_${idRef.current}`;\n frame.style.display = 'none';\n frameRef.current = frame;\n document.body.appendChild(frame);\n\n return () => {\n document.body.removeChild(frame);\n };\n }, []);\n\n useEffect(() => {\n if (getMailchimpStatus?.message) {\n if (!getMailchimpStatus?.success) {\n setSubmissionErrors([getMailchimpStatus.message]);\n } else {\n setComplete(true);\n setSubmissionErrors([]);\n }\n\n setTimeout(() => {\n if (getMailchimpStatus?.success) {\n setComplete(false);\n } else {\n setSubmissionErrors([]);\n }\n }, 5000);\n }\n }, [getMailchimpStatus]);\n\n return (\n showForm && (\n {resultsLink}
: null}\n {!results?.length && initialResults.current?.length ? (\n \n {allowMultiple || !complete || error ? (\n
\n {complete ? (\n \n \n
\n ) : null}\n \n {error ? (\n
\n ) : null}\n \n );\n}\n\nSubscribeForm.propTypes = {\n host: px.oneOf(['MailChimp', 'Default']),\n options: px.shape({ embeddedForm: px.string }),\n className: px.string,\n id: px.string,\n style: px.any,\n allowMultiple: px.bool,\n useIcon: px.bool,\n};\n","import * as React from 'react';\nimport { useSelector } from 'react-redux';\nimport px from 'prop-types';\nimport { useAction } from 'Common/hooks';\nimport { customer } from '~features';\n\nexport default function UserEmailLoader({ email }) {\n const currentEmail = useSelector(customer.selectors.getUserEmail);\n const setEmail = useAction(customer.actions.setUserEmail);\n\n React.useEffect(() => {\n if (email && currentEmail !== email) {\n setEmail(email);\n }\n }, [currentEmail, email, setEmail]);\n\n return null;\n}\n\nUserEmailLoader.propTypes = {\n email: px.string,\n};\n","import * as React from 'react';\nimport { useSelector } from 'react-redux';\nimport { UserMessage } from 'Common/components/ui';\nimport { order } from '~features';\n\nexport default function CartUserMessage() {\n const props = useSelector(order.selectors.getCartValidationError); \n\n return \n
\n ) : (\n \n
\n )}\n \n \n \n \n
\n );\n}\n\nCustomerAddressesGrid.propTypes = {\n className: px.string,\n siteId: px.string,\n addresses: px.arrayOf(px.object),\n onFetchAddresses: px.func,\n onRemoveAddress: px.func,\n // onUpdateAddress: px.func,\n setCustomerError: px.func,\n clearCustomerError: px.func,\n defaultCountry: px.string,\n verification: px.shape({\n shipment: types.Address,\n unverifiedAddress: types.Address,\n verifiedAddresses: px.arrayOf(types.Address),\n }),\n onValidateShipment: px.func,\n onConfirmShipment: px.func,\n onCancelVerification: px.func,\n};\n","import * as React from 'react';\nimport { useSelector } from 'react-redux';\nimport { Translation } from 'Common/components/localization';\nimport { UserMessage } from 'Common/components/ui';\nimport { customer } from '~features';\n\nexport default function CustomerError() {\n const error = useSelector(customer.selectors.getCustomerError);\n\n return (\n \n {selected.action === ACTION.edit ? (\n setStateCopy({ ...values }),\n }}\n onClose={onCancel}\n className=\"p-2\"\n formError={localError}\n countryList={countryList}\n postalRegex={postalRegex}\n regionOptions={regionOptions}\n onCountryChange={onCountryChange}\n disabled={working}\n />\n ) : null}\n
\n \n {sortedAddress?.length ? (\n sortedAddress.map((address) => (\n
\n {selected.action === ACTION.delete ? (\n \n
\n ))\n ) : !selected.action ? (\n \n \n
\n \n {address.FirstName} {address.LastName}\n
\n {address.Organization ? (\n {address.Organization}
\n ) : null}\n {address.Line1}
\n {address.Line2 ? {address.Line2}
: null}\n \n {address.City}, {address.RegionCode} {address.PostalCode}\n
\n {countryList ? (\n \n {countryList.find((c) => c.CountryCode === address?.CountryCode)?.CountryName}\n
\n ) : null}\n \n \n \n \n \n \n \n
\n \n
\n {operationIsInProgress ? \n setCardIdToDelete(NO_ID)}\n closeLabel={
\n );\n}\n\nCustomerGiftCardsGrid.propTypes = {\n className: px.string,\n giftCards: px.arrayOf(px.object),\n onFetchGiftCards: px.func,\n onRemoveGiftCard: px.func,\n onSaveGiftCard: px.func,\n};\n","import * as React from 'react';\nimport { useSelector } from 'react-redux';\nimport { useAction } from 'Common/hooks';\nimport Grid from 'Common/components/customer/CustomerGiftCardsGrid';\nimport { customer } from '~features';\nimport CustomerError from './CustomerError';\n\nexport default function CustomerGiftCardsGrid(props) {\n const giftCards = useSelector(customer.selectors.getCustomerGiftCards);\n const onFetchGiftCards = useAction(customer.actions.fetchGiftCards);\n const onSaveGiftCard = useAction(customer.actions.saveCustomerGiftCard);\n const onRemoveGiftCard = useAction(customer.actions.removeCustomerGiftCard);\n\n return (\n <>\n \n \n
\n ) : null}\n \n {giftCards?.length ? (\n giftCards.map((card) => (\n
\n \n
\n ))\n ) : (\n \n setCardIdToDelete(card?.CardNumber)}\n data-toggle=\"modal\"\n data-target=\"#deleteGiftCardModal\"\n className=\"mt-2 btn btn-sm p-1\"\n aria-label={lblRemove}\n title={lblRemove}\n >\n
\n \n
\n \n
\n \n {card?.CardNumber}\n
\n \n
\n \n
\n \n {`${card?.FormattedBalance} ${card?.Currency}`}\n
\n \n
\n \n
\n \n {card?.FormattedIssuedDateUtc}\n
\n \n
\n \n
\n \n {card?.FormattedExpirationDateUtc}\n
\n \n
\n \n
\n \n {card?.Status}\n
\n \n
\n
\n \n \n \n \n \n \n
\n \n {payments.length ? (\n payments.map((payment) => (\n \n
\n ))\n ) : selectedCard !== 'new' ? (\n \n onSetDefault(payment[PAYMENT.paymentId])}\n disabled={payment.IsDefault}\n aria-label={lblDefault}\n title={lblDefault}\n >\n {/* \n \n */}\n\n \n \n \n \n setSelectedCard(payment[PAYMENT.paymentId])}\n title={lblRemove}\n aria-label={lblRemove}\n >\n {/* \n \n */}\n \n \n \n \n
\n \n
\n ) : null}\n \n {selectedCard === 'new' ? (\n
\n \n
\n ) : null}\n \n \n
\n \n
\n \n \n \n \n \n
\n \n \n ({\n id: row.omsOrderReference,\n rowValues: [\n { value: row.orderNumber, id: row.orderNumber },\n { value: Formatter.currency(row.total, row.currency), id: row.total },\n {\n value: (\n \n {orderDetailButtonText}\n \n ),\n id: `${row.orderNumber}_${row.omsOrderReference}`,\n className: 'p-0',\n },\n ],\n content: [\n {\n values: [{ node: new Date(row.date)?.toLocaleDateString(), id: row.date }],\n label: dateColumnName,\n },\n {\n values: row.trackingNumbers?.length\n ? row.trackingNumbers.map((tracking) => ({\n node: (\n \n
\n )}\n
\n );\n}\n\nOrderHistory.propTypes = {\n className: px.string,\n onSearchOrder: px.func,\n onUpdatePage: px.func,\n orderDetailPage: px.string,\n orderPagination: px.shape({\n orderPage: px.number,\n orderCount: px.number,\n orderTotal: px.number,\n }),\n orderTableData: px.arrayOf(\n px.shape({\n date: px.string,\n orderNumber: px.string,\n total: px.number,\n currency: px.string,\n trackingNumbers: px.arrayOf(\n px.shape({\n number: px.oneOfType([px.number, px.string]),\n url: px.string,\n })\n ),\n omsOrderReference: px.string,\n })\n ),\n trackingUrlTarget: px.string,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { OrderHistory as History } from 'Common/components/customer';\nimport { customer } from '~features';\n\nexport default function OrderHistory({ className, orderDetailPage, trackingUrlTarget }) {\n const dispatch = useDispatch();\n const orderTableData = useSelector(customer.selectors.getOrderTableData);\n const orderPagination = useSelector(customer.selectors.getOrderPagination);\n const onUpdatePage = (page) => dispatch(customer.actions.fetchOrdersByEmail(page));\n const onSearchOrder = (orderNumber) => dispatch(customer.actions.queryOrder(orderNumber));\n\n return (\n \n \n \n
\n
\n ) : (\n | {dateColumnName} | \n{orderNumColumnName} | \n{totalColumnName} | \n{trackNumColumnName} | \n{actionColumnName} | \n
|---|---|---|---|---|
| \n {Formatter.dateFormat(data.date)} \n | \n \n {data.orderNumber} \n | \n \n \n | \n \n {data.trackingNumbers?.length\n ? data.trackingNumbers.map((tracking) => (\n \n | \n \n | \n
\n {tracking.number}\n
\n ),\n id: tracking.number,\n }))\n : null,\n label: trackNumColumnName,\n },\n ],\n }))}\n />\n )\n ) : (\n\n
\n )}\n \n {orderTableData?.length > 1 && pageOptions?.length > 1\n ? pageOptions.map((pageNum) => (\n onPageClick(pageNum)}\n className={cx(\n 'btn mr-1 p-2',\n pageNum === orderPagination.orderPage ? 'btn-primary' : null\n )}\n >\n {pageNum}\n \n ))\n : null}\n
\n \n
\n );\n}\n\nOrderDetailTable.propTypes = {\n className: px.string,\n LineItems: px.arrayOf(\n px.shape({\n LineItemId: px.number,\n DisplayName: px.string,\n Quantity: px.number,\n SalePrice: px.number,\n MinQuantity: px.number,\n MaxQuantity: px.number,\n })\n ),\n shipmentId: px.number,\n currency: px.string,\n returnRequest: px.shape({\n OrderNumber: px.string,\n Notes: px.string,\n LineItems: px.arrayOf(\n px.shape({\n Code: px.string,\n ReasonCode: px.string,\n Notes: px.string,\n Quantity: px.number,\n })\n ),\n }),\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Formatter } from 'Common/utils';\nimport { Translation } from '../localization';\nimport { useTranslation } from 'Common/hooks';\nimport CheckoutSummary from '../checkout/CheckoutSummary';\nimport { ReadOnlyContents as OrderPaymentInfo } from '../checkout/paymentsection';\nimport OrderDetailTable from './OrderDetailTable';\n\nfunction flatten(arr) {\n if (typeof arr?.flat === 'function') return arr.flat();\n return [].concat.apply([], arr);\n}\n\nfunction getLineItemsByShipmentId(forms, shipmentId) {\n return shipmentId\n ? forms.reduce(\n (outer, form) =>\n outer.concat(\n form.Shipments.reduce(\n (inner, shipment) =>\n shipment.ShipmentId === shipmentId ? inner.concat(flatten(shipment.LineItems)) : inner,\n []\n )\n ),\n []\n )\n : [];\n}\n\nexport default function OrderDetail({ className, orderDetail, rmaPage }) {\n const summaryTitle = useTranslation('Commerce.Order.Detail.Summary.Title');\n const totalLabel = useTranslation('Commerce.Order.Detail.Summary.Total.Label');\n const subtotalLabel = useTranslation('Commerce.Order.Detail.Summary.Subtotal.Label');\n const handlingLabel = useTranslation('Commerce.Order.Detail.Summary.Handling.Label');\n const shippingLabel = useTranslation('Commerce.Order.Detail.Summary.Shipping.Label');\n const shippingDiscountLabel = useTranslation('Commerce.Order.Detail.Summary.ShippingDiscount.Label');\n const orderDiscountTotalLabel = useTranslation('Commerce.Order.Detail.Summary.OrderDiscount.Label');\n const taxLabel = useTranslation('Commerce.Order.Detail.Summary.Tax.Label');\n const costs = React.useMemo(\n () => [\n {\n label: subtotalLabel,\n key: 'subtotal',\n value: orderDetail?.SubTotal,\n },\n orderDetail?.HandlingTotal > 0\n ? {\n label: handlingLabel,\n key: 'handling',\n value: orderDetail?.HandlingTotal,\n }\n : null,\n {\n label: shippingLabel,\n key: 'shippingSubTotal',\n value: orderDetail?.ShippingSubTotal,\n },\n orderDetail?.ShippingDiscountTotal > 0\n ? {\n label: shippingDiscountLabel,\n key: 'shippingDiscount',\n value: orderDetail?.ShippingDiscountTotal * -1,\n isPositive: false,\n }\n : null,\n orderDetail?.OrderDiscountTotal > 0\n ? {\n label: orderDiscountTotalLabel,\n key: 'orderDiscount',\n value: orderDetail?.OrderDiscountTotal * -1,\n }\n : null,\n {\n label: taxLabel,\n key: 'tax',\n value: orderDetail?.TaxTotal,\n },\n ],\n [\n handlingLabel,\n orderDetail,\n orderDiscountTotalLabel,\n shippingDiscountLabel,\n shippingLabel,\n subtotalLabel,\n taxLabel,\n ]\n );\n\n const discounts = React.useMemo(\n () =>\n orderDetail?.Forms?.reduce(\n (arr, form) =>\n arr.concat(\n form.Promotions.reduce((promos, p) => {\n const existing = promos.find(({ id }) => id === p.PromotionGuid);\n\n if (existing) {\n existing.value += p.SavedAmount;\n } else {\n promos.push({\n value: p.SavedAmount,\n label: p.Description || p.CouponCode,\n id: p.PromotionGuid,\n code: p.CouponCode,\n });\n }\n\n return promos;\n }, [])\n ),\n []\n ) ?? [],\n [orderDetail]\n );\n\n const giftCards = React.useMemo(\n () =>\n orderDetail?.Forms?.find((form) => form.Payments)\n ?.Payments.filter((payment) => payment.PaymentType && payment.PaymentType === 'GiftCard')\n .map(({ Amount, CardNumber, Balance }) => ({ Amount, CardNumber, Balance })),\n [orderDetail]\n );\n\n const nonGiftCardPayment = React.useMemo(\n () =>\n orderDetail?.Forms?.find((form) => form.Payments)?.Payments.filter(\n (payment) => payment.PaymentType && payment.PaymentType !== 'GiftCard'\n ),\n [orderDetail]\n );\n\n const orderSummary = React.useMemo(() => {\n const giftCardDiscount = giftCards?.reduce((t, { Amount }) => t + (Amount || 0), 0);\n\n return {\n discounts,\n giftCardDiscount,\n total: (orderDetail?.Total || 0) - giftCardDiscount,\n };\n }, [orderDetail, discounts, giftCards]);\n\n return orderDetail ? (\n \n
\n \n
\n {itemCount\n ? LineItems.map((item) => (\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n {viewport.is.lt(MOBILE_BREAKPOINT) ? (\n
\n ))\n : null}\n \n
\n ) : (\n \n
\n \n
\n \n
\n \n {item.CatalogEntity?.DisplayName}\n
\n \n
\n \n {Formatter.currency(item.SalePrice, currency)}\n
\n\n \n
\n {item.Quantity}
\n\n
\n )}\n \n
\n {item.ListPrice > item.SalePrice ? (\n \n
\n \n
\n \n {item.CatalogEntity?.DisplayName}\n
\n \n
\n ) : (\n \n {Formatter.currency(item.ListPrice, currency)}\n
\n\n {Formatter.currency(item.SalePrice, currency)}\n
\n\n
\n )}\n \n {Formatter.currency(item.SalePrice, currency)}\n
\n\n
\n {item.ListPrice > item.SalePrice ? (\n {item.Quantity}
\n\n
\n ) : (\n \n {Formatter.currency(item.ListPrice * item.Quantity, currency)}\n
\n\n {Formatter.currency(item.SalePrice * item.Quantity, currency)}\n
\n\n
\n )}\n \n {Formatter.currency(item.SalePrice * item.Quantity, currency)}\n
\n\n
\n ) : null;\n}\n\nOrderDetail.propTypes = {\n className: px.string,\n orderDetail: px.object,\n rmaPage: px.string,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { customer } from '~features';\nimport { OrderDetail as Detail } from 'Common/components/customer';\n\nexport default function OrderDetail({ className, rmaPage }) {\n const orderDetail = useSelector(customer.selectors.getOrderDetail);\n\n return \n
\n {orderDetail.Forms.map((form) =>\n form.Shipments.map((shipment, index) => (\n \n
\n \n \n \n
\n
\n \n \n \n | \n \n {`${orderDetail.OrderNumber}`}\n | \n
| \n | \n {Formatter.dateFormat(orderDetail.Created)}\n | \n
\n \n
\n 0 ? 'mt-3' : null)}>\n
\n ))\n )}\n {orderDetail.Forms.map((form, index) => (\n \n \n {form.Shipments.length > 1 ? (\n
\n {shipment.OrderShipmentStatus ? (\n \n \n
\n \n \n {form.Shipments.length > 1 ? (\n
\n {shipment.OrderShipmentStatus ? (\n \n \n \n
\n \n \n
\n
\n \n
\n \n
\n \n {shipment.ShippingAddress.FirstName} {shipment.ShippingAddress.LastName}\n
\n {shipment.ShippingAddress.Organization ? (\n{shipment.ShippingAddress.Organization}
\n ) : null}\n {shipment.IsDigitalShipment ? (\n\n
\n ) : (\n {shipment.ShippingAddress.Email}
\n\n
\n )}\n \n {shipment.ShippingAddress.Line1}{' '}\n {shipment.ShippingAddress.Line2 ? (\n {shipment.ShippingAddress.Line2}\n ) : null}\n
\n\n {shipment.ShippingAddress.City},{' '}\n {shipment.ShippingAddress.RegionCode || ''}{' '}\n {shipment.ShippingAddress.PostalCode}\n
\n\n {shipment.ShippingAddress.CountryName ||\n shipment.ShippingAddress.CountryCode}\n
\n {shipment.ShippingAddress.DaytimePhoneNumber ? (\n{shipment.ShippingAddress.DaytimePhoneNumber}
\n ) : null}\n\n \n
\n
\n \n
\n \n
\n \n {shipment.ShippingMethodDisplayName}, {shipment.ShippingMethodDescription}\n
\n {shipment.ShipmentTrackingNumbers?.length ? (\n\n \n {tracking.TrackingNumber}\n {index < shipment.ShipmentTrackingNumbers.length - 1 ? ', ' : null}\n \n ))}\n
\n ) : null}\n \n
\n
\n \n
\n ))}\n \n \n {form.Payments.length > 1 ? (\n
\n
\n \n {nonGiftCardPayment?.length ? (\n nonGiftCardPayment.map((payment) => (\n \n {form.Payments.length > 1 ? (\n
\n \n \n \n
\n ) : null}\n
\n );\n}\n\nOrderLookup.propTypes = {\n orderDetail: px.object,\n orderEmailPlaceholder: px.string,\n orderEmailLabelText: px.string,\n orderNumberPlaceholder: px.string,\n orderNumber: px.string,\n orderEmail: px.string,\n buttonText: px.string,\n rmaPage: px.string,\n onSubmit: px.func,\n lastUpdate: px.number,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { useAction } from 'Common/hooks';\nimport { OrderLookup as Lookup } from 'Common/components/customer';\nimport { customer } from '~features';\n\nexport default function OrderLookup({\n orderEmailPlaceholder,\n orderEmailLabelText,\n orderNumberPlaceholder,\n orderNumber,\n orderEmail,\n buttonText,\n rmaPage,\n}) {\n const orderDetail = useSelector(customer.selectors.getOrderDetail);\n const lastUpdate = useSelector(customer.selectors.getCustomerOrderLastUpdate);\n const setOrderHistory = useAction(customer.actions.setCustomerOrderHistory);\n const onSearchOrder = useAction(customer.actions.queryOrder);\n\n React.useEffect(() => {\n if (orderEmail && orderNumber) onSearchOrder(orderNumber, orderEmail);\n }, [orderEmail, orderNumber, onSearchOrder]);\n return (\n \n \n setEmailInput(e.target.value)}\n placeholder={orderEmailPlaceholder}\n />\n
\n \n
\n \n \n
\n \n {orderDetail ? (\n \n
\n ) : null}\n \n
\n ))\n )\n )\n : null}\n \n \n );\n}\n\nRMARequestTable.propTypes = {\n className: px.string,\n Forms: px.arrayOf(\n px.shape({\n Shipments: px.arrayOf(\n px.shape({\n ShipmentId: px.number,\n LineItems: px.arrayOf(\n px.shape({\n LineItemId: px.number,\n DisplayName: px.string,\n Quantity: px.number,\n SalePrice: px.number,\n OrderDiscountedSalePrice: px.number,\n MinQuantity: px.number,\n MaxQuantity: px.number,\n })\n ),\n })\n ),\n })\n ),\n onChangeQty: px.func,\n currency: px.string,\n isLoading: px.bool,\n onReasonSelect: px.func,\n returnRequest: px.shape({\n OrderNumber: px.string,\n Notes: px.string,\n LineItems: px.arrayOf(\n px.shape({\n Code: px.string,\n ReasonCode: px.string,\n Notes: px.string,\n Quantity: px.number,\n })\n ),\n }),\n rmaReasonCodes: px.arrayOf(\n px.shape({\n Disabled: px.bool,\n Group: px.object,\n Selected: px.bool,\n Text: px.string,\n Value: px.string,\n })\n ),\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Translation } from 'Common/components/localization';\nimport RMARequestTable from './RMARequestTable';\nimport CheckoutSummary from '../checkout/CheckoutSummary';\nimport { useTranslation } from 'Common/hooks';\n\nconst TEXT_AREA_CHAR_LIMIT = 500;\n\nexport default function RMARequest({\n className,\n customerOrderLastUpdate,\n orderDetail,\n onSubmitReturn,\n rmaReasonCodes,\n rmaRequestSuccess,\n}) {\n const customerNoteLbl = useTranslation('Commerce.Order.Return.Notes.Placeholder');\n const summaryTitle = useTranslation('Commerce.Order.Return.Summary.Title');\n const totalLabel = useTranslation('Commerce.Order.Detail.Summary.Total.Label');\n const subtotalLabel = useTranslation('Commerce.Order.Detail.Summary.Subtotal.Label');\n const dirty = React.useRef(false);\n const [showErrorMessage, setShowErrorMessage] = React.useState(false);\n const [returnRequestPrices, setReturnRequestPrices] = React.useState({});\n const [isLoading, setIsLoading] = React.useState(false);\n const [textAreaCharacterCount, setTextAreaCharacterCount] = React.useState(0);\n const [returnRequest, setReturnRequest] = React.useState({\n LineItems: [],\n Notes: null,\n OrderNumber: orderDetail.OMSOrderReference,\n OrderEmail: orderDetail.OrderEmail,\n });\n\n //Memoized Values:\n const hasReturnableItems = React.useMemo(\n () =>\n orderDetail.Forms.reduce(\n (available, form) =>\n available ||\n form.Shipments.reduce(\n (availableShipment, shipment) =>\n availableShipment ||\n shipment.LineItems.reduce(\n (availableItem, item) => availableItem || item.ReturnQuantity < item.Quantity,\n false\n ),\n false\n ),\n false\n ),\n [orderDetail]\n );\n\n const total = React.useMemo(\n () =>\n returnRequest.LineItems?.reduce(\n (t, item) => (returnRequestPrices[item.Code] ? t + returnRequestPrices[item.Code] : t),\n 0\n ),\n [returnRequestPrices, returnRequest.LineItems]\n );\n\n const costs = React.useMemo(\n () => [\n {\n label: subtotalLabel,\n key: 'subtotal',\n value: total,\n },\n ],\n [total, subtotalLabel]\n );\n\n const discounts = React.useMemo(\n () =>\n orderDetail?.Forms?.reduce(\n (arr, form) =>\n arr.concat(\n form.Promotions.reduce((promos, p) => {\n const existing = promos.find(({ id }) => id === p.PromotionGuid);\n\n if (existing) {\n existing.value += p.SavedAmount;\n } else {\n promos.push({\n value: p.SavedAmount,\n label: p.Description || p.CouponCode,\n id: p.PromotionGuid,\n code: p.CouponCode,\n });\n }\n\n return promos;\n }, [])\n ),\n []\n ) ?? [],\n [orderDetail]\n );\n\n const isValidReturn = React.useMemo(() => {\n if (isLoading) return false;\n if (returnRequest.LineItems?.length) {\n for (let i = 0; i < returnRequest.LineItems.length; i++) {\n if (returnRequest.LineItems[i].ReasonCode && returnRequest.LineItems[i].Quantity) continue;\n return false;\n }\n return true;\n }\n return false;\n }, [returnRequest, isLoading]);\n\n // Line Item Updates:\n const onQtyChange = React.useCallback(\n (qty, code, price) => {\n if (returnRequest.LineItems?.find((item) => item.Code === code)) {\n const newItems = returnRequest.LineItems.reduce((acc, item) => {\n if (item.Code === code) {\n if (qty === 0) return acc;\n item.Quantity = qty;\n }\n\n return acc.concat(item);\n }, []);\n\n setReturnRequestPrices({ ...returnRequestPrices, [code]: price * qty });\n setReturnRequest({ ...returnRequest, LineItems: newItems });\n } else if (qty > 0) {\n setReturnRequestPrices({ ...returnRequestPrices, [code]: price * qty });\n setReturnRequest({\n ...returnRequest,\n LineItems: [\n ...returnRequest.LineItems,\n {\n Code: code,\n Quantity: qty,\n ReasonCode: null,\n ReasonText: null,\n },\n ],\n });\n }\n },\n [returnRequest, returnRequestPrices]\n );\n\n const onNotesChange = React.useCallback(\n (note) => {\n setTextAreaCharacterCount(note.length);\n setReturnRequest({\n ...returnRequest,\n Notes: note,\n });\n },\n [returnRequest]\n );\n\n const onSelectReason = React.useCallback(\n (reason, productCode) => {\n if (returnRequest?.LineItems.find((item) => item.Code === productCode)) {\n const newItems = returnRequest.LineItems.reduce((acc, item) => {\n if (item.Code === productCode) {\n item.ReasonCode = reason.Value;\n item.ReasonText = reason.Text;\n }\n\n return acc.concat(item);\n }, []);\n\n setReturnRequest({ ...returnRequest, LineItems: newItems });\n } else {\n setReturnRequest({\n ...returnRequest,\n LineItems: [\n ...returnRequest.LineItems,\n {\n Code: productCode,\n Quantity: null,\n ReasonCode: reason.Value,\n ReasonText: reason.Text,\n },\n ],\n });\n }\n },\n [returnRequest]\n );\n\n const onSubmit = React.useCallback(() => {\n setIsLoading(true);\n dirty.current = true;\n return onSubmitReturn(returnRequest);\n }, [onSubmitReturn, returnRequest]);\n\n const createdDate = React.useMemo(() => new Date(orderDetail.Created).toDateString(), [orderDetail.Created]);\n\n React.useEffect(() => {\n setIsLoading(false);\n if (!rmaRequestSuccess && dirty.current) setShowErrorMessage(true);\n }, [customerOrderLastUpdate, rmaRequestSuccess]);\n\n return orderDetail ? (\n \n
\n )}\n \n
\n {itemCount\n ? Forms.map((form) =>\n form.Shipments.map((shipment) =>\n shipment.LineItems.map((item) => (\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n {viewport.is.lt(MOBILE_BREAKPOINT) ? (\n
\n ) : (\n \n
\n \n
\n \n {item.ReturnQuantity >= item.Quantity ? (\n = item.Quantity ? 'overlay' : null\n )}\n src={`${item.CatalogEntity?.DefaultImageUrl}?height=200&width=200&bgcolor=white`}\n alt={item.CatalogEntity?.DisplayName}\n />\n
\n \n
\n
\n )}\n \n \n {item.CatalogEntity?.DisplayName}\n \n
\n \n
\n {!item.ReturnableQuantity ? (\n \n {Formatter.currency(item.OrderDiscountedSalePrice, currency)}\n
\n\n
\n ) : (\n \n
\n \n \n
\n \n {item.Quantity}\n
\n\n \n
\n \n {item.ReturnQuantity}\n
\n\n \n = item.Quantity\n }\n value={\n returnRequest.LineItems?.find(\n (lineItem) => lineItem.Code === item.Code\n )?.Quantity ?? 0\n }\n onChange={(e) =>\n onQuantityUpdate(\n e,\n item.Quantity,\n item.Code,\n item.OrderDiscountedSalePrice,\n item.ReturnQuantity\n )\n }\n />\n
\n \n
\n \n = item.Quantity\n }\n >\n \n \n \n {rmaReasonCodes.map((code) => (\n \n onReasonSelect(code, item.Code)\n }\n className={cx(\n 'paragraph-3 reason d-block',\n returnRequest.LineItems?.find(\n (lineItem) =>\n lineItem.Code === item.Code\n )?.ReasonCode === code.Value\n ? 'selected'\n : null\n )}\n >\n {code.Text}\n \n ))}\n
\n \n {returnRequest.LineItems?.find(\n (lineItem) => lineItem.Code === item.Code\n )?.ReasonText ?? (\n
\n
\n )}\n \n
\n \n
\n \n {item.ReturnQuantity >= item.Quantity ? (\n = item.Quantity\n ? 'overlay'\n : null\n )}\n src={`${item.CatalogEntity?.DefaultImageUrl}?height=200&width=200&bgcolor=white`}\n alt={item.CatalogEntity?.DisplayName}\n />\n
\n \n
\n \n {item.CatalogEntity?.DisplayName}\n \n
\n \n
\n \n {item.Quantity}\n
\n\n
\n \n {item.ReturnQuantity}\n
\n\n
\n {!item.ReturnableQuantity ? (\n \n {Formatter.currency(\n item.OrderDiscountedSalePrice * item.Quantity,\n currency\n )}\n
\n\n
\n ) : (\n \n
\n \n = item.Quantity\n }\n value={\n returnRequest.LineItems?.find(\n (lineItem) => lineItem.Code === item.Code\n )?.Quantity ?? 0\n }\n onChange={(e) =>\n onQuantityUpdate(\n e,\n item.Quantity,\n item.Code,\n item.OrderDiscountedSalePrice,\n item.ReturnQuantity\n )\n }\n />\n
\n \n
\n \n = item.Quantity\n }\n >\n \n \n \n {rmaReasonCodes.map((code) => (\n \n onReasonSelect(code, item.Code)\n }\n className={cx(\n 'paragraph-3 reason d-block',\n returnRequest.LineItems?.find(\n (lineItem) =>\n lineItem.Code === item.Code\n )?.ReasonCode === code.Text\n ? 'selected'\n : null\n )}\n >\n {code.Text}\n \n ))}\n
\n \n {returnRequest.LineItems?.find(\n (lineItem) => lineItem.Code === item.Code\n )?.ReasonText ?? (\n
\n \n
\n ) : null}\n
\n ) : null;\n}\n\nRMARequest.propTypes = {\n className: px.string,\n customerOrderLastUpdate: px.number,\n onSubmitReturn: px.func,\n orderDetail: px.object,\n rmaReasonCodes: px.arrayOf(\n px.shape({\n Disabled: px.bool,\n Group: px.object,\n Selected: px.bool,\n Text: px.string,\n Value: px.string,\n })\n ),\n rmaRequestSuccess: px.bool,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport $ from 'jquery';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { RMARequest as Request } from 'Common/components/customer';\nimport { customer } from '~features';\n\nexport default function RMARequest({ className, rmaReasonCodes, successContentId }) {\n const dispatch = useDispatch();\n const orderDetail = useSelector(customer.selectors.getOrderDetail);\n const onSubmitReturn = (returnRequest) => dispatch(customer.actions.submitReturnRequest(returnRequest));\n const rmaRequestSuccess = useSelector(customer.selectors.getCustomerRmaRequestSuccess);\n const rmaRequestMessage = useSelector(customer.selectors.getCustomerRmaRequestMessage);\n const customerOrderLastUpdate = useSelector(customer.selectors.getCustomerOrderLastUpdate);\n\n React.useEffect(() => {\n if (rmaRequestSuccess && successContentId) {\n $(`#${successContentId}`).removeClass('d-none');\n }\n }, [rmaRequestSuccess, successContentId]);\n\n return !rmaRequestSuccess ? (\n \n
\n {!hasReturnableItems ? (\n \n
\n \n
\n \n
\n \n
\n \n \n
\n
\n \n
\n \n
\n {`${orderDetail.OrderNumber}`}
\n\n \n
\n \n
\n {createdDate}
\n\n
\n ) : null}\n \n onNotesChange(e.target.value.toString())}\n disabled={isLoading}\n >\n
\n \n {showErrorMessage ? (\n {`${textAreaCharacterCount}/${TEXT_AREA_CHAR_LIMIT}`}
\n\n
{rmaRequestMessage}
\n );\n}\n\nRMARequest.propTypes = {\n className: px.string,\n rmaReasonCodes: px.arrayOf(\n px.shape({\n Disabled: px.bool,\n Group: px.object,\n Selected: px.bool,\n Text: px.string,\n Value: px.string,\n })\n ),\n successContentId: px.string,\n};\n","import * as React from 'react';\nimport { useSelector } from 'react-redux';\nimport { UserMessage } from 'Common/components/ui';\nimport { order } from '~features';\n\nexport default function CartLineItemUserMessage() {\n const error = useSelector(order.selectors.getLineItemValidationError);\n const lineItems = useSelector(order.selectors.getAllFauxLineItems);\n const isGift = React.useMemo(() => lineItems.find(item => item.Code === error?.reference)?.IsGift, [lineItems, error]);\n\n return\n \n {catalogEntities.map((product) => (\n openQuick(product)}\n defaultImage={Url.addToRelativeUrl(\n product.DefaultImageUrl,\n `format=png&height=172&width=172${\n PRODUCT.TRANSFORM_PRODUCT_IMAGE_BACKGROUND ? '&transBg=true' : ''\n }`\n )}\n productLinks={\n ProductInfo.isDisplayOnly(product)\n ? []\n : [\n {\n label: \n
\n );\n}\n\nProductSlider.propTypes = {\n className: px.string,\n catalogEntities: px.arrayOf(Product),\n checkoutPageLink: px.string,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n openQuick: px.func,\n};\n","import * as React from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport px from 'prop-types';\nimport { Product } from 'Common/types';\nimport { ProductSlider as Slider } from 'Common/components/prostaff';\nimport { CatalogQuickView } from '~components/catalog';\nimport { customer, product } from '~features';\n\nexport default function ProductSlider({ className, catalogEntities }) {\n const dispatch = useDispatch();\n const isUserAuthenticated = useSelector(customer.selectors.isLoggedIn);\n\n const onSetProduct = React.useCallback((p) => dispatch(product.actions.setItemDetails({ Product: p })), [dispatch]);\n\n return catalogEntities?.length ? (\n \n
\n ) : null;\n}\n\nProStaffQuickView.propTypes = {\n className: px.string,\n checkoutPageLink: px.string,\n itemStatusTooltip: px.string,\n};\n","import { Api } from 'Common/utils';\n\nexport function fetchLocationsByBrand(brand, categories) {\n const query = Object.assign({ brand }, categories?.length ? { categories } : undefined);\n\n return Api.GET('/StoreLocation/GetByBrand', query);\n}\n\nexport function getLocations(query) {\n return Api.POST('/StoreLocation/GetLocations', query);\n}\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { Translation } from 'Common/components/localization';\nimport { HTMLRender } from 'Common/components/ui';\n\nexport default function Locations({ locations, disclaimerText, locationContent }) {\n const sections = React.useMemo(() => {\n let prev = {};\n\n return locations?.reduce((acc, l, i) => {\n if (prev.Extended?.Address.County === l.Extended.Address.County) {\n prev = l;\n return acc;\n }\n prev = l;\n return {\n ...acc,\n [i]: l.Extended.Address.County,\n };\n }, {});\n }, [locations]);\n\n return locations?.length ? (\n \n
\n \n ) : null;\n}\n\nLocations.propTypes = {\n locations: px.arrayOf(px.object),\n disclaimerText: px.string,\n locationContent: px.string,\n};\n","import * as React from 'react';\nimport $ from 'jquery';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { logger } from 'Common/core';\nimport { getLocations } from 'Common/features/locator/api';\nimport { Loader } from 'Common/components/ui';\nimport { APP } from '$env';\nimport { Translation } from 'Common/components/localization';\nimport Locations from './Locations';\nimport { Url } from 'Common/utils';\nimport { useViewport } from 'Common/hooks';\n\n//Avid is only using County faceting but we will always get country and category facets back as well.\nconst VALID_FACET = 'County';\n\nexport default function StoreLocator({\n className,\n brandName = APP,\n language,\n disclaimerText,\n locationContent,\n categories,\n}) {\n const viewport = useViewport();\n const container = React.useRef();\n const mobileCountyList = React.useRef();\n const fetched = React.useRef(false);\n const [selectedCounty, setSelectedCounty] = React.useState(Url.current.getParam(VALID_FACET));\n const [locatorData, setLocatorData] = React.useState(null);\n const [showLoader, setShowLoader] = React.useState(false);\n const [pages, setPages] = React.useState([1]);\n const [query, setQuery] = React.useState({\n Site: brandName,\n Language: language,\n SortBy: [VALID_FACET],\n CategoriesFilter: categories,\n LocalityFilter: {\n County: selectedCounty,\n },\n });\n\n const updateQueryFacet = React.useCallback(\n (facet, value) => {\n setQuery({\n ...query,\n LocalityFilter: {\n ...query.LocalityFilter,\n [facet]: value,\n },\n Page: 1,\n });\n },\n [setQuery, query]\n );\n\n const paginate = React.useCallback(\n (page) => () => {\n setQuery({\n ...query,\n Page: page,\n });\n fetched.current = false;\n },\n [setQuery, query]\n );\n\n const onSelectFacet = React.useCallback(\n (facet, value) => () => {\n updateQueryFacet(facet, value);\n fetched.current = false;\n Url.current.addParam(facet, value).apply();\n setSelectedCounty(value);\n if (viewport.is.lt('md')) $(mobileCountyList.current).collapse('hide');\n },\n [updateQueryFacet, viewport]\n );\n\n const fetchLocations = React.useCallback(() => {\n setShowLoader(true);\n getLocations(query)\n .then((data) => {\n setLocatorData({ ...data.Response });\n setQuery({ ...data.Response.Query });\n const currentPg = data.Response.Query.Page;\n let pgArr = Array(data.Response.TotalPages)\n .fill(0)\n .map((_, i) => i + 1);\n\n if (currentPg > 4) pgArr = pgArr.slice(currentPg - 2, currentPg + 1);\n else if (data.Response.TotalPages > 5) pgArr = pgArr.slice(0, 5);\n\n setPages(pgArr);\n setShowLoader(false);\n })\n .catch((e) => {\n logger.error('error', e?.message || e);\n setShowLoader(false);\n });\n }, [setShowLoader, query]);\n\n React.useEffect(() => {\n if (!fetched.current) {\n fetched.current = true;\n fetchLocations();\n }\n }, [fetchLocations]);\n\n return (\n \n
\n \n \n ))}\n \n - \n {locations?.map((location, i) => (\n
- \n \n\n\n\n
{location.Name}
\n\n {location.Extended.Address.Line1}, {location.Extended.Address.Locality}{' '}\n {location.Extended.Address.County}, {location.Extended.Address.PostalCode}\n
\n\n\n\n {location.Extended.Phone ? (\n \n \n {location.Extended.Phone}\n \n ) : null}\n\n\n \n {location.Extended.Website ? (\n {' '}\n \n \n ) : null}\n {location.Extended.Description}
\n\n {disclaimerText ? (\n\n\n\n ) : null}\n{disclaimerText}
\n\n {location.Extended.BusinessHours?.length ? (\n\n\n\n ) : null}\n\n \n
\n\n \n \n \n {location.Extended.BusinessHours.map((bh) => (\n\n \n\n \n \n\n \n \n\n \n \n ))}\n \n{bh.DayOfWeek} \n\n {bh.Closed ? (\n \n\n ) : (\n bh.OpenTime\n )}\n \n {bh.Closed ? (\n \n\n ) : (\n bh.CloseTime\n )}\n
{sections[i]}
\n ) : null}\n\n
\n {showLoader ? \n \n \n {locatorData?.Facets && locatorData.Facets[VALID_FACET]?.length\n ? locatorData.Facets[VALID_FACET].map((f) => (\n \n \n {f.Label}\n \n \n ))\n : null}\n \n
\n \n
\n ) : null}\n \n {pages?.length !== locatorData.TotalPages && !pages.includes(1) ? (\n <>\n \n {locatorData.TotalPages}\n
\n \n \n
\n \n 1\n
\n ...\n \n ) : null}\n {pages.map((p) => (\n \n {p}\n
\n ))}\n {pages?.length !== locatorData.TotalPages && !pages.includes(locatorData.TotalPages) ? (\n <>\n ...\n \n \n
\n \n ) : null}\n \n \n {languageIcon ? (\n 
\n ) : (\n \n \n )}\n {selected.Value}\n
\n ) : null;\n}\n\nLanguageSelector.propTypes = {\n className: px.string,\n disabled: px.bool,\n dropdownClass: px.string,\n id: px.string,\n languageIcon: px.string,\n languageText: px.string,\n languages: px.arrayOf(px.shape({ Value: px.string, Text: px.string, Selected: px.bool })),\n onChange: px.func,\n setDefaultLanguage: px.bool,\n};\n","import * as React from 'react';\nimport { useAction } from 'Common/hooks';\nimport { LanguageSelector as Selector } from 'Common/components/localization';\nimport { Loader } from 'Common/components/ui';\nimport { localization } from '~features';\n\nexport default function LanguageSelector(props) {\n const [loading, setLoading] = React.useState(false);\n const selectLanguage = useAction(localization.actions.selectLanguage);\n const onChange = React.useCallback(\n async (lang, setDefaultLanguage) => {\n setLoading(true);\n await selectLanguage(lang, setDefaultLanguage);\n setLoading(false);\n },\n [selectLanguage]\n );\n\n return (\n <>\n {loading ? \n {languages.map((lang) => (\n \n {lang.Text}\n ({lang.Value})\n \n ))}\n
\n \n \n
\n \n );\n}\n\nBackgroundVideo.propTypes = {\n children: px.node,\n className: px.string,\n hideOnMobile: px.bool,\n id: px.string,\n mobileSrc: px.string,\n mobileVideoSize: px.string,\n src: px.string.isRequired,\n style: px.objectOf(px.any),\n videoAutoPlay: px.bool,\n videoSize: px.string,\n};\n","import React, { useEffect, useState } from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport debounce from 'lodash.debounce';\nimport { Icon } from 'Common/components/ui';\nimport { useTranslation } from 'Common/hooks';\n\n/**\n * Scrolls to the top of the page.\n */\nfunction scrollToTop() {\n window.scrollTo({\n top: 0,\n behavior: 'smooth',\n });\n}\n\n/**\n * Floating action button that scrolls to the top of the page when clicked.\n *\n * @param {Props} Properties\n * @returns {Element}\n */\nexport default function ScrollToTopFab({ className, style }) {\n const [isVisible, setIsVisible] = useState(window.scrollY > 0);\n const btnLbl = useTranslation('ScrollToTop.Button.Label');\n\n useEffect(() => {\n function handleScroll() {\n setIsVisible(window.scrollY > 0);\n }\n\n window.addEventListener('scroll', debounce(handleScroll, 200));\n\n return () => {\n window.removeEventListener('scroll', handleScroll);\n };\n }, []);\n\n return (\n \n \n \n \n \n
\n {facet?.Values?.length ? (\n
\n ) : (\n \n
\n {facet?.Values?.length ? (\n \n
\n ) : null}\n \n
\n \n {facet.Values.slice(0, sliceIdx).map((option) => (\n \n {}}\n />\n
\n {sliceIdx !== facet.Values.length ? (\n {option?.Label}
\n \n ))}\n \n {facet.Values.slice(sliceIdx).map((option) => (\n \n {}}\n />\n
\n ) : null}\n {option?.Label}
\n \n ))}\n \n \n
\n \n \n \n \n
\n \n
\n {facet.DisplayName ?? attributeName}
\n- \n {facet.Values.map((value) => (\n
- \n