\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 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 {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
{SubTitle}
: null}\n {Title ?{Title}
: null}\n {Details ?{Details}
: null}\n {ButtonText || ButtonIcon ? (\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 { useMemo, useCallback } from 'react';\nimport { useSelector } from 'react-redux';\nimport { Formatter } from 'Common/utils';\nimport { localization } from 'Common/features';\n\nfunction createSelector(id) {\n return id ? (state) => localization.selectors.getTranslationString(state, id) : () => id;\n}\n\nexport default function useTranslator(id, { notFoundValue = id } = {}) {\n const selector = useMemo(() => createSelector(id), [id]);\n const property = useSelector(selector);\n\n const defaultProp = useMemo(() => (property === id ? notFoundValue : property || notFoundValue), [\n property,\n id,\n notFoundValue,\n ]);\n\n const translate = useCallback(\n (params = null) =>\n params ? Formatter.property(defaultProp, typeof params === 'object' ? params : {}) : defaultProp,\n [defaultProp]\n );\n\n return translate;\n}\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\n\nexport default function ArrowButton({\n className,\n style,\n onClick,\n direction = 'left',\n children,\n iconClass = 'chevron',\n ariaLabel,\n ariaHidden,\n}) {\n return (\n \n
\n ) : null}\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 { Carousel, CarouselItem, Modal, MediaConverter } from 'Common/components/ui';\n\nconst NOOP = () => {};\n\nfunction ImageModalContent({ content, className } = {}) {\n const { type = 'image', src, selectedItem } = content || {};\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 * from 'Common/config/style';\n\n/* eslint import/export: 0 */\nexport const FILTER_COLAPSED_ROW_HEIGHT = 46;\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}) {\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 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 ? (\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 && PRODUCT.USE_RETAILER ? (\n \n \n \n
\n );\n}\n\nPartialDetailsLinks.propTypes = {\n className: px.string,\n productLink: px.string,\n retailSearch: px.string,\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 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\nCatalogSort.propTypes = {\n className: px.string,\n title: px.node,\n selectedValues: px.arrayOf(px.oneOfType([px.string, px.number])),\n options: px.arrayOf(px.any),\n onSelect: px.func,\n anchor: px.string,\n disabled: px.oneOfType([px.bool, px.objectOf(px.bool)]),\n autoClose: px.bool,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { CatalogSort as Sort } from 'Common/components/catalog';\nimport { useAction, useTranslation } from 'Common/hooks';\nimport { catalog } from 'Common/features';\n\nconst SORT_OPTIONS = [{ Value: 256, Text: 'Relevance' }];\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 CatalogSort({ sortOptions = SORT_OPTIONS }) {\n const sortBy = useTranslation('Commerce.CatalogNode.Filters.SortBy');\n const hasChanged = useSelector(catalog.selectors.hasChanged);\n const pageInfo = useSelector(catalog.selectors.getPageInfo);\n const updateSort = useAction(catalog.actions.updateSortOrder);\n const sortOpts = React.useMemo(() => convertSortOptions(sortOptions), [sortOptions]);\n const onFetchItems = useAction(catalog.actions.fetchItems);\n\n React.useEffect(() => {\n if (hasChanged) {\n onFetchItems();\n }\n }, [hasChanged, onFetchItems]);\n\n const onUpdateSort = React.useCallback(\n (value) => {\n updateSort(value);\n },\n [updateSort]\n );\n\n return (\n \n \n
\n \n \n {title}\n \n \n {expanded ? (\n
\n \n {options.map((option) => (\n \n {option?.label || option}\n \n ))}\n
\n ) : null}\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 );\n}\n\nCartSummaryFooter.propTypes = {\n cartSummaryFooterData: px.shape({\n orderId: px.number,\n }),\n};\n","import * as React from 'react';\nimport { useSelector } from 'react-redux';\nimport { CartSummaryFooter as Summary } from 'Common/components/cart';\nimport { order } from '~features';\n\nexport default function CartSummaryFooter() {\n const cartSummaryFooterData = useSelector(order.selectors.getCartSummaryFooterData);\n\n return \n \n
\n \n
\n );\n}\n\nBadge.propTypes = {\n style: px.objectOf(px.any),\n children: px.node,\n className: px.string,\n vertical: px.oneOf(['top', 'start', 'middle', 'center', 'bottom', 'end']),\n horizontal: px.oneOf(['left', 'start', 'center', 'middle', 'right', 'end']),\n size: 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 { useTranslation, useProductDetails, useCatalogEntity } from 'Common/hooks';\nimport { Icon, Badge, Loader } from 'Common/components/ui';\nimport { ProductPrice, ProductBadge, ProductGallery, ProductInput } from 'Common/components/product';\n\nexport default function CartItem({\n className,\n item,\n qty = 1,\n gtmListValue,\n onChangeQty,\n onDelete,\n onAdd,\n onEdit,\n inputStatusTooltip = 'top',\n allowZeroQty = false,\n disabled = false,\n clickable = false,\n totalQty = 0,\n}) {\n const lblRemove = useTranslation('Commerce.Order.Cart.RemoveItem.Label');\n const [productInfo, variantInfo] = useCatalogEntity(item.ParentCode, item.Code);\n\n const itemSalePrice = React.useMemo(\n () => (item.SalePrice != undefined ? item.SalePrice.toFixed(2) : item?.Price?.SalePrice?.Amount),\n [item]\n );\n\n const salePrice = React.useMemo(() => {\n const itemSalePriceNum = parseFloat(itemSalePrice);\n const variantSalePriceNum = parseFloat(variantInfo?.Price?.SalePrice?.Amount?.toFixed(2));\n\n return !isNaN(itemSalePriceNum) && !isNaN(variantSalePriceNum) && itemSalePriceNum < variantSalePriceNum\n ? itemSalePriceNum\n : null;\n }, [itemSalePrice, variantInfo]);\n\n const { badges, mainMediaImage, priceInfo, stockStatus, attributes } = useProductDetails(variantInfo, productInfo, {\n useFacets: true,\n salePrice: salePrice,\n });\n\n const onEditItem = React.useCallback(() => onEdit(productInfo), [onEdit, productInfo]);\n\n const defaultPrice = React.useMemo(() => item.ListPriceFormatted ?? item.SalePriceFormatted ?? '', [item]);\n\n const onImageClick = React.useCallback(() => {\n if (clickable) window.location.href = productInfo?.ContentUrl;\n }, [productInfo, clickable]);\n\n return (\n {children}
\n \n
\n );\n}\n\nCartItem.propTypes = {\n className: px.string,\n item: types.CartLineItem,\n qty: px.number,\n onChangeQty: px.func,\n onDelete: px.func,\n onEdit: px.func,\n onAdd: px.func,\n gtmListValue: px.string,\n disabled: px.bool,\n allowZeroQty: px.bool,\n inputStatusTooltip: px.oneOfType([px.string, px.bool]),\n clickable: px.bool,\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { v4 } from 'uuid';\nimport * as types from 'Common/types';\nimport { Translation } from 'Common/components/localization';\nimport CartItem from './CartItem';\nimport { useViewport } from 'Common/hooks';\n\nexport default function CartItemList({\n className,\n id: idProp,\n items = [],\n shipmentId = 0,\n qtyChanges = [],\n onChangeQty,\n onDeleteItem,\n onEditItem,\n inputStatusTooltip,\n onBackToCustomer,\n onBackToShipping,\n recapData = null,\n recapDisabled = false,\n currency,\n title,\n faux = false,\n disabled = false,\n clickable = false,\n totalQty = 0,\n}) {\n const id = React.useRef(idProp || `cart-item-list-${v4()}`);\n const viewport = useViewport();\n const onEdit = React.useCallback(\n (lineItem) => (onEditItem ? (productInfo) => onEditItem(lineItem, productInfo) : null),\n [onEditItem]\n );\n\n const onDelete = React.useCallback(\n (lineItem) => (onDeleteItem ? () => onDeleteItem({ shipmentId, itemCode: lineItem.Code, faux }) : null),\n [onDeleteItem, shipmentId, faux]\n );\n\n const onQtyChange = React.useCallback(\n (lineItem) => (onChangeQty ? (num) => onChangeQty(shipmentId, lineItem.Code, num) : null),\n [onChangeQty, shipmentId]\n );\n\n const qty = React.useMemo(\n () =>\n items.reduce(\n (obj, item) => ({\n ...obj,\n [item.Code]:\n qtyChanges.find((c) => c.itemCode === item.Code && c.shipmentId === shipmentId)?.qty ??\n item.Quantity,\n }),\n {}\n ),\n [items, qtyChanges, shipmentId]\n );\n\n const recapWrapper = React.useCallback(\n (fn) => (e) => {\n if (viewport.is.gt('xs') || e.target?.classList?.contains('edit-action')) {\n fn();\n }\n },\n [viewport]\n );\n\n return (\n \n
\n \n {productInfo ? (\n \n {onChangeQty || !qty ? null : {qty} }\n \n ) : (\n
\n \n {onDelete ? (\n \n \n
\n \n \n \n {attributes.map((a) => (\n
\n
\n {variantInfo && (onAdd || onEdit) ? (\n | {a.name}: | \n{a.value} | \n
|---|
\n {variantInfo && (onAdd || onEdit) ? (\n
\n \n {item.AdditionalInfo\n ? item.AdditionalInfo.map((info) => (\n
\n ) : null}\n\n {item.ValidationMessage ? (\n \n
\n ))\n : null}\n {info}
\n{item.ValidationMessage}
\n ) : null}\n \n {title ? \n \n \n
\n );\n}\n\nCartItemList.propTypes = {\n recapData: px.shape({\n digital: px.bool,\n address: px.string,\n method: px.string,\n gift: px.string,\n }),\n onBackToCustomer: px.func,\n onBackToShipping: px.func,\n recapDisabled: px.bool,\n clickable: px.bool,\n className: px.string,\n id: px.string,\n items: px.arrayOf(types.CartLineItem),\n onChangeQty: px.func,\n onDeleteItem: px.func,\n qtyChanges: px.arrayOf(px.any),\n onEditItem: px.func,\n disabled: px.bool,\n title: px.node,\n faux: px.bool,\n currency: px.string,\n shipmentId: px.oneOfType([px.string, px.number]),\n inputStatusTooltip: px.oneOfType([px.bool, px.string]),\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\n\nfunction Block({ h, w, c, p, m }) {\n return ;\n}\n\nBlock.propTypes = {\n h: px.oneOfType([px.string, px.number]),\n w: px.oneOfType([px.string, px.number]),\n m: px.string,\n p: px.string,\n c: px.string,\n};\n\nexport default function FakeCartItem({ className, hideQty = false }) {\n return (\n {title}
: null}\n\n {recapData && onBackToCustomer ? (\n <>\n \n
\n \n \n
\n \n {recapData.address}\n
\n \n \n
\n \n {!recapData.digital && recapData.method && onBackToShipping ? (\n \n
\n \n \n
\n {recapData.method}
\n \n \n
\n \n ) : null}\n {recapData.gift && onBackToShipping ? (\n \n
\n \n \n
\n {recapData.gift}
\n \n \n
\n \n ) : null}\n \n ) : null}\n\n {items.map((item) => (\n \n
\n );\n}\n\nFakeCartItem.propTypes = {\n className: px.string,\n hideQty: px.bool,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport $ from 'jquery';\nimport { v4 } from 'uuid';\nimport { Form } from 'informed';\nimport * as types from 'Common/types';\nimport { useTranslation } from 'Common/hooks';\nimport { Translation, Currency } from 'Common/components/localization';\nimport { PromoCode, GiftCard } from 'Common/components/checkout/payments';\nimport { Icon } from 'Common/components/ui';\nimport CartItemList from './CartItemList';\nimport FakeCartItem from './FakeCartItem';\n\nexport default function CartListing({\n id: idProp,\n className,\n forms = [],\n subtotal = 0,\n total = 0,\n loaded = false,\n checkoutPageLink,\n qtyChanges = [],\n onChangeQty,\n onDelete,\n currency,\n emptyLabel = 'Commerce.Order.Cart.EmptyCart.Label',\n gtmListValue,\n loading = false,\n includeFaux = false,\n includeTotalCount = false,\n closeButtonIcon = 'arrow-right-short',\n onClose,\n onEdit,\n inputStatusTooltip,\n priceInfo,\n children,\n splitShipments = false,\n promoProps,\n giftCardProps,\n noHeader = false,\n recapData = null,\n onBackToCustomer,\n onBackToShipping,\n clickable = false,\n cartId,\n totalQty = 0,\n ...props\n}) {\n const id = React.useRef(idProp || `cart-listing-${v4()}`);\n const lblClose = useTranslation('Commerce.Order.Cart.Close.Label');\n const container = React.useRef();\n\n const [fauxCount, itemCount] = React.useMemo(\n () =>\n forms.reduce(\n (acc, form) =>\n form.Shipments.reduce(\n ([f, i], shipment) => [\n f + (shipment.FauxLineItems?.reduce((t, o) => t + (o?.Quantity || 1), 0) || 0),\n i + (shipment.LineItems?.reduce((t, o) => t + (o?.Quantity || 1), 0) || 0),\n ],\n acc\n ),\n [0, 0]\n ),\n [forms]\n );\n\n const scrollToFaux = React.useCallback(() => {\n if (container.current) {\n $(container.current).animate({ scrollTop: $($('.CartListing__faux-list')[0]).position().top }, 'slow');\n }\n }, []);\n\n return (\n \n
\n \n
\n \n \n \n
\n
\n | \n | \n \n | \n
|---|---|
| \n | \n \n | \n
\n {!hideQty ?
\n \n {noHeader ? null : (\n
\n \n ) : (\n \n \n
\n {onClose ? (\n \n
\n )}\n\n {includeTotalCount && itemCount ? (\n \n
\n {onClose ? (\n \n {itemCount === 1 ? (\n
\n
\n ) : null}\n\n {itemCount ? (\n forms.map((form) =>\n form.Shipments.map((shipment, i) =>\n shipment.LineItems.length ? (\n \n
\n ) : (\n \n
\n )}\n\n {promoProps || giftCardProps ? (\n \n {giftCardProps ? (\n \n ) : null}\n {promoProps ? (\n
\n ) : null}\n\n {priceInfo?.length ? (\n \n {loaded ? (\n
\n ) : null}\n \n {priceInfo.map(({ label, id: ID, value, children: childValues }) =>\n childValues && ID ? (\n
\n \n \n
\n \n
\n \n \n $(`#dc_${id.current}_${ID}_header .Icon`).toggleClass('flip')\n }\n >\n
\n \n
\n \n {typeof value === 'number' ? (\n
\n \n {childValues.map((c) => (\n \n
\n ))}\n {c.label}
\n \n {typeof c.value === 'number' ? (\n
\n \n
\n )\n )}\n \n ) : null}\n\n \n
\n \n {typeof value === 'number' ? (\n
\n \n
\n {checkoutPageLink ? (\n \n
\n {priceInfo?.length || !loaded ? null : (\n \n
\n \n {loaded ? (\n
\n \n
\n )}\n \n \n
\n ) : null}\n\n {fauxCount && includeFaux\n ? forms.map((form) =>\n form.Shipments.map((shipment) =>\n shipment.FauxLineItems?.length ? (\n {children}
: null}\n\n {cartId ? (\n \n
\n ) : null}\n \n );\n}\n\nCartListing.propTypes = {\n recapData: px.shape({\n contact: px.string,\n canEditContact: px.bool,\n disabled: px.bool,\n shipments: px.arrayOf(\n px.shape({\n digital: px.bool,\n address: px.string,\n method: px.string,\n gift: px.string,\n })\n ),\n }),\n loaded: px.bool,\n children: px.node,\n noHeader: px.bool,\n className: px.string,\n forms: px.arrayOf(types.CartForm),\n subtotal: px.number,\n total: px.number,\n onChangeQty: px.func,\n onDelete: px.func,\n clickable: px.bool,\n currency: px.string,\n qtyChanges: px.arrayOf(px.any),\n onEdit: px.func,\n onAddItemToCart: px.func,\n emptyLabel: px.string,\n gtmListValue: px.string,\n open: px.bool,\n onClose: px.func,\n checkoutPageLink: px.string,\n inputStatusTooltip: px.oneOfType([px.string, px.bool]),\n loading: px.bool,\n closeButtonIcon: px.string,\n includeFaux: px.bool,\n includeTotalCount: px.bool,\n splitShipments: px.bool,\n promoProps: px.shape(PromoCode.propTypes),\n giftCardProps: px.shape(GiftCard.propTypes),\n priceInfo: px.arrayOf(px.shape({ label: px.string, value: px.oneOfType([px.string, px.number]) })),\n onBackToCustomer: px.func,\n onBackToShipping: px.func,\n cartId: px.node,\n id: px.string,\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { v4 } from 'uuid';\nimport * as types from 'Common/types';\nimport { useTranslation } from 'Common/hooks';\nimport { Translation } from 'Common/components/localization';\nimport { Icon } from 'Common/components/ui';\nimport CartItem from './CartItem';\n\nexport default function VariantSelector({\n className,\n currency,\n loading = false,\n onClose,\n closeButtonIcon = 'arrow-right-short',\n onChangeVariant,\n changeVariant,\n gtmListValue,\n inputStatusTooltip,\n totalQty = 0,\n ...props\n}) {\n const id = React.useRef(`variant-selector-${v4()}`);\n const lblClose = useTranslation('Commerce.Order.Button.BackToCart.Label');\n const lastChangeVariant = React.useRef(changeVariant);\n const [replacementQuantities, setReplacementQuantites] = React.useState({});\n\n const onReplacementQty = React.useCallback(\n (code) => (num) => {\n setReplacementQuantites({ ...replacementQuantities, [code]: num });\n },\n [replacementQuantities]\n );\n\n React.useEffect(() => {\n if (changeVariant !== lastChangeVariant.current) {\n lastChangeVariant.current = changeVariant;\n setReplacementQuantites({});\n }\n }, [changeVariant]);\n\n return (\n \n
\n );\n}\n\nVariantSelector.propTypes = {\n id: px.string,\n className: px.string,\n currency: px.string,\n gtmListValue: px.string,\n onClose: px.func,\n loading: px.bool,\n onChangeVariant: px.func,\n inputStatusTooltip: px.oneOfType([px.string, px.bool]),\n closeButtonIcon: px.string,\n changeVariant: px.shape({\n lineItem: types.CartLineItem,\n productInfo: types.Product,\n shipmentId: px.oneOfType([px.string, px.number]),\n }),\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 { useViewport } from 'Common/hooks';\nimport { Loader } from 'Common/components/ui';\nimport CartListing from './CartListing';\nimport VariantSelector from './VariantSelector';\n\nfunction stopProp(e) {\n e.stopPropagation();\n}\n\nexport default function InlineCart({\n className,\n forms = [],\n subtotal = 0,\n loaded = false,\n checkoutPageLink,\n qtyChanges = [],\n onChangeQty,\n onDelete,\n currency,\n onAddItemToCart,\n inputStatusTooltip,\n emptyLabel = 'Commerce.Order.Cart.EmptyCart.Label',\n isEditable = true,\n gtmListValue,\n open = false,\n loading = false,\n cartId,\n onClose,\n cartApiOptions = {\n expand: ['forms'],\n update: ['lineitems', 'promotions'],\n },\n totalQty = 0,\n darkTheme,\n}) {\n const viewport = useViewport();\n\n const [changeVariant, setChangeVariant] = React.useState(null);\n const onEdit = React.useCallback(\n (shipmentId) =>\n isEditable\n ? (lineItem, productInfo) => {\n setChangeVariant({ shipmentId, lineItem, productInfo });\n }\n : null,\n [isEditable]\n );\n\n const cartIsEmpty = React.useMemo(() => {\n return !forms.some((f) => f.Shipments.some((s) => s.LineItems.length + s.FauxLineItems.length));\n }, [forms]);\n\n const onChangeVariant = React.useCallback(\n async (code, qty, gtmPayload) => {\n if (changeVariant && onAddItemToCart && onDelete) {\n if (!cartIsEmpty) {\n await onDelete({\n shipmentId: changeVariant.shipmentId,\n itemCode: changeVariant.lineItem.Code,\n cartApiOptions,\n faux: true,\n });\n }\n await onAddItemToCart(code, qty, { gtmPayload, cartApiOptions });\n setChangeVariant(null);\n }\n },\n [changeVariant, cartIsEmpty, onDelete, onAddItemToCart, cartApiOptions]\n );\n\n const onCancel = React.useCallback(() => setChangeVariant(null), []);\n\n const onBack = React.useCallback(() => {\n if (changeVariant) setChangeVariant(null);\n if (onClose) onClose();\n }, [changeVariant, onClose]);\n\n return (\n \n \n
\n {onClose ? (\n \n ) : null}\n
\n {changeVariant?.productInfo?.Children?.map((c) => (\n \n
\n {onClose ? (\n \n ) : null}\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\nTag.propTypes = {\n className: px.string,\n children: px.node,\n onClose: px.func,\n lblClose: px.string,\n disabled: px.bool,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { useTranslation } from 'Common/hooks';\nimport { Tag } from 'Common/components/ui';\n\nexport default function Promotions({ className, promotions, onRemovePromo }) {\n const lblClose = useTranslation('Commerce.Order.RemovePromo.Label');\n\n return promotions?.length ? (\n {children}
\n {onClose ? (\n \n ) : null}\n \n {promotions?.map((p) => (\n \n \n ))}\n
\n ) : null;\n}\n\nPromotions.propTypes = {\n promotions: px.arrayOf(px.string),\n onRemovePromo: px.func,\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 { Tag } from 'Common/components/ui';\nimport { Currency } from 'Common/components/localization';\n\nexport default function GiftCards({ className, cards, onRemoveCard, currency }) {\n const lblClose = useTranslation('Commerce.Order.RemoveGiftCard.Label');\n\n return cards?.length ? (\n {p}
\n \n {cards?.map(({ PaymentMethodId, CardNumber, Balance }) => (\n \n
\n ) : null;\n}\n\nGiftCards.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 className: px.string,\n};\n","const NULLISH = [null, undefined, ''];\n\nexport function findAndRemove(arr, predicate) {\n const idx = arr.findIndex(predicate);\n\n if (idx !== -1) {\n arr.splice(idx, 1);\n return true;\n }\n return false;\n}\n\nexport default function match(a, b, opts = {}) {\n if (a && typeof a === 'object') {\n if (b && typeof b === 'object') {\n if (Array.isArray(a)) {\n if (Array.isArray(b)) {\n const b2 = b.slice(0);\n\n return (\n a.length === b.length &&\n a.reduce((f, x) => f && findAndRemove(b2, (y) => match(x, y, opts)), true)\n );\n }\n return false;\n }\n if (!Array.isArray(b)) {\n for (const k of Object.keys(a)) {\n if (!match(a[k], b[k], opts)) {\n return false;\n }\n }\n return true;\n }\n }\n return false;\n }\n if (\n (opts.falseIsNull && ((a === false && NULLISH.includes(b)) || (NULLISH.includes(a) && b === false))) ||\n (NULLISH.includes(a) && NULLISH.includes(b)) ||\n a === b\n ) {\n return true;\n }\n return false;\n}\n","import { createContext } from 'react';\n\nexport default createContext({ state: null, dispatch: null });\n","import { logger } from 'Common/core';\nimport { ReduxReducer } from 'Common/utils';\n\nexport const types = {\n ADD_ROUTE: 'HashRouter:routes:add',\n DEL_ROUTE: 'HashRouter:routes:del',\n UPDATE_ROUTE: 'HashRouter:routes:update',\n SET_ACTIVE: 'HashRouter:active:set',\n CLEAR_ACTIVE: 'HashRouter:active:clear',\n};\n\nexport const initialState = {\n active: null,\n routes: [],\n};\n\nexport const selectors = {\n getCurrentRouteId(state = {}) {\n return state.active ?? undefined;\n },\n getCurrentRoute(state = {}) {\n return (state.routes && state.active && state.routes.find((r) => r.id === state.active)) || undefined;\n },\n getRouteById(state = {}, id) {\n const route = state.routes?.find((r) => r.id === id) ?? undefined;\n\n return route && { ...route, active: route.id === state.active };\n },\n getAllRoutes(state = {}) {\n return state.routes?.map((r) => ({ ...r, active: state.active === r.id })) || [];\n },\n getRouteCount(state = {}) {\n return state.routes?.length ?? 0;\n },\n};\n\nexport const actions = {\n /**\n * Add a route to the state\n * @param {string} id - route ID\n * @param {string?} label - display name for route\n * @param {object?} data - additional route data\n * @returns Action\n * @errors if no `id` provided or `id` already found in routes\n */\n addRoute(id, label, data) {\n return { type: types.ADD_ROUTE, payload: { id, label, data } };\n },\n /**\n * Updates data and label of route object at specified ID\n * @param {string} id\n * @param {object} data\n * @param {string} label\n * @returns Action\n * @errors if no `id` provided, `id` not found in routes, `data` is not an object and/or `label` is not a string\n */\n updateRoute(id, data, label) {\n return { type: types.UPDATE_ROUTE, payload: { id, data, label } };\n },\n /**\n * Updates data of route object at specified ID\n * @param {string} id\n * @param {object} data\n * @returns Action\n * @errors if no `id` provided, `id` not found in routes, or `data` is not an object\n */\n updateRouteData(id, data) {\n return { type: types.UPDATE_ROUTE, payload: { id, data } };\n },\n /**\n * Updates label of route object at specified ID\n * @param {string} id\n * @param {string} label\n * @returns Action\n * @errors if no `id` provided, `id` not found in routes, or `label` is not a string\n */\n updateRouteLabel(id, label) {\n return { type: types.UPDATE_ROUTE, payload: { id, label } };\n },\n /**\n * Remove a route from the state\n * @param {string} id - route ID\n * @returns Action\n * @errors if no `id` provded\n */\n removeRoute(id) {\n return { type: types.DEL_ROUTE, payload: { id } };\n },\n /**\n * Set route as active by route ID\n * @param {string} id - route ID\n * @returns Action\n * @errors if no `id` provided or `id` not found in routes\n */\n setActiveRoute(id) {\n return { type: types.SET_ACTIVE, payload: { id } };\n },\n /**\n * Clear any currently active route\n * @returns Action\n */\n clearActiveRoute() {\n return { type: types.CLEAR_ACTIVE };\n },\n};\n\nexport const reducer = ReduxReducer.create(\n {\n [types.ADD_ROUTE](state, { id, label = '', data = {} } = {}) {\n if (!id) {\n logger.error(\n 'HashRouter ADD_ROUTE action requires payload { id: string, label: string?, data: object? }'\n );\n } else if (state.routes.find((r) => r.id === id)) {\n logger.error(`Duplicate route provided to HashRouter ADD_ROUTE action: ${id}`);\n } else {\n return {\n ...state,\n routes: state.routes.concat({ id, label, data }),\n };\n }\n return state;\n },\n\n [types.UPDATE_ROUTE](state, { id, label, data } = {}) {\n if (!id || (typeof label !== 'string' && typeof data !== 'object')) {\n logger.error(\n 'HashRouter UPDATE_ROUTE action requires payload { id: string, label: string } or { id: string, data: object }'\n );\n } else if (!state.routes.find((r) => r.id === id)) {\n logger.error(`Invalid ID provided to HashRouter UPDATE_ROUTE action: ${id}`);\n } else if (typeof label === 'string' && typeof data === 'object') {\n return {\n ...state,\n routes: state.routes.map((r) => (r.id === id ? { ...r, label, data: { ...r.data, ...data } } : r)),\n };\n } else if (typeof label === 'string') {\n return { ...state, routes: state.routes.map((r) => (r.id === id ? { ...r, label } : r)) };\n } else {\n return {\n ...state,\n routes: state.routes.map((r) => (r.id === id ? { ...r, data: { ...r.data, ...data } } : r)),\n };\n }\n return state;\n },\n\n [types.DEL_ROUTE](state, { id } = {}) {\n if (!id) {\n logger.error('HashRouter DEL_ROUTE action requires payload { id: string }');\n } else {\n return state.active === id || state.routes.find((r) => r.id === id)\n ? {\n ...state,\n routes: state.routes.filter((r) => r.id !== id),\n active: state.active === id ? null : state.active,\n }\n : state;\n }\n return state;\n },\n\n [types.SET_ACTIVE](state, { id } = {}) {\n if (!id) {\n logger.error('HashRouter SET_ACTIVE action requires payload { id: string }');\n } else if (!state.routes.find((r) => r.id === id)) {\n logger.error(`Invalid ID provided to HashRouter SET_ACTIVE action: ${id}`);\n } else {\n return { ...state, active: id };\n }\n return state;\n },\n\n [types.CLEAR_ACTIVE](state) {\n return state.active ? { ...state, active: null } : state;\n },\n },\n initialState\n);\n","import * as React from 'react';\nimport px from 'prop-types';\nimport $ from 'jquery';\nimport { useLocationHash } from 'Common/hooks';\nimport { Url } from 'Common/utils';\nimport context from './context';\nimport { reducer, actions, selectors, initialState } from './duck';\n\n/**\n * Router\n * @param {function} props.onChange - Gets next hash and prev hash as args. If return value is truthy, the route change\n * is prevented. If the return is an available hash, location will be re-routed to specified hash.\n */\nexport default function Router({ children, onChange, useJqueryScroll = null }) {\n const [state, dispatch] = React.useReducer(reducer, initialState);\n const hashes = useLocationHash({ asCommaSeparatedArray: true });\n const routes = React.useMemo(() => selectors.getAllRoutes(state), [state]);\n const lastHashes = React.useRef(null);\n const lastActive = React.useRef();\n\n React.useEffect(() => {\n if (routes.length) {\n const indexRouteId = routes.find((r) => r.data?.index)?.id;\n const all = hashes.filter((h) => routes.find((r) => r.id === h));\n const str = all.join(',');\n\n if (str !== lastHashes.current) {\n lastHashes.current = str;\n if (all.length) {\n const next = all.pop();\n let url;\n\n for (const other of all) url = (url || Url.current).delHash(other);\n\n if (lastActive.current !== next) {\n const initialLoad = !lastActive.current;\n const change = onChange && onChange(next, lastActive.current);\n\n if (!change) {\n lastActive.current = next;\n dispatch(actions.setActiveRoute(next));\n\n if (useJqueryScroll) {\n const { speed = 'fast', offset = 0, topOnInitialLoad = false } = useJqueryScroll;\n\n if (initialLoad && topOnInitialLoad) {\n setTimeout(() => {\n $('html').animate({ scrollTop: 0 }, speed);\n });\n } else {\n setTimeout(() => {\n const el = $(`.hash-route-${next}`);\n\n if (el.length) {\n $('html').animate({ scrollTop: el.position().top + offset }, speed);\n }\n });\n }\n }\n } else {\n url = (url || Url.current)\n .delHash(next)\n .addHash(routes.find((r) => r.id === change) ? change : lastActive.current);\n }\n }\n\n if (url) url.apply();\n } else if (lastActive.current !== indexRouteId) {\n if (indexRouteId) {\n Url.current.addHash(indexRouteId).apply();\n } else {\n lastActive.current = undefined;\n dispatch(actions.clearActiveRoute());\n }\n }\n }\n }\n }, [hashes, routes, dispatch, onChange, useJqueryScroll]);\n\n return \n {CardNumber} (
\n \n ))}\n \n {routes.map((r, idx) => (\n
\n );\n}\n\nHashRouterNav.propTypes = {\n className: px.string,\n NavItem: px.elementType,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { useRouteRegistry } from './hooks';\n\nexport default function Route({\n className,\n id,\n label,\n data,\n removeFromDomWhenInactive = false,\n onClosed,\n onOpened,\n children,\n noDomId = false,\n ...props\n}) {\n const isActive = useRouteRegistry(id, label, data);\n const lastActive = React.useRef(isActive);\n\n React.useEffect(() => {\n if (lastActive.current !== isActive) {\n lastActive.current = isActive;\n if (onClosed && !isActive) onClosed(id);\n if (onOpened && isActive) onOpened(id);\n }\n }, [isActive, onClosed, onOpened, id]);\n\n return !removeFromDomWhenInactive || isActive ? (\n \n \n
\n );\n}\n\nCheckoutSummary.propTypes = {\n recapData: px.shape({\n contact: px.string,\n canEditContact: px.bool,\n disabled: px.bool,\n shipments: px.arrayOf(\n px.shape({\n digital: px.bool,\n address: px.string,\n method: px.string,\n gift: px.string,\n })\n ),\n }),\n onBackToCustomer: px.func,\n onBackToShipping: px.func,\n loaded: px.bool,\n className: px.string,\n forms: px.arrayOf(types.CartForm),\n emptyLabel: px.string,\n currency: px.string,\n gtmListValue: px.string,\n loading: px.bool,\n promoProps: px.any,\n giftCardProps: px.any,\n summaryData: types.OrderSummary,\n cartId: px.node,\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Checkbox, Relevant } from 'informed';\nimport * as types from 'Common/types';\nimport { Email } from 'Common/utils';\nimport { EMAIL, SHIPMENT, MONOFORM } from 'Common/constants/fields';\nimport { Field, AddressForm } from 'Common/components/forms';\nimport { Translation } from 'Common/components/localization';\n\nexport default function CustomerInformation({\n className,\n disabled,\n isLoggedIn,\n signinLink,\n signupLink,\n signoutLink,\n onLocationChange,\n savedAddresses = [],\n shipments = [],\n requestError,\n onBack,\n siteId,\n}) {\n const physicalCount = React.useMemo(() => shipments?.filter((s) => !s[SHIPMENT.isDigital])?.length ?? 0, [\n shipments,\n ]);\n\n const locationChangeIndex = React.useCallback(\n (index) => (onLocationChange ? (...args) => onLocationChange(index, ...args) : null),\n [onLocationChange]\n );\n\n return (\n \n
\n\n {recapData ? (\n \n
\n \n
\n \n \n {loaded ?
\n \n {recapData.contact && onBackToCustomer ? (\n \n \n \n \n
\n ) : null}\n\n \n
\n\n \n \n
\n {recapData.contact}
\n \n {recapData.canEditContact ? null : (\n \n
\n \n ) : null}\n\n {recapData.shipments?.length === 1 && onBackToCustomer ? (\n <>\n \n
\n \n \n
\n {recapData.shipments[0].address}
\n \n \n
\n \n {!recapData.shipments[0].digital && recapData.shipments[0].method && onBackToShipping ? (\n \n
\n \n \n
\n {recapData.shipments[0].method}
\n \n \n
\n \n ) : null}\n {recapData.shipments[0].gift && onBackToShipping ? (\n \n
\n \n \n
\n {recapData.shipments[0].gift}
\n \n \n
\n \n ) : null}\n \n ) : null}\n \n \n \n\n {shipments?.map((shipment, index) => (\n \n \n ))}\n\n {requestError ? (\n
\n );\n}\n\nCustomerInformation.propTypes = {\n className: px.string,\n disabled: px.bool,\n isLoggedIn: px.bool,\n signinLink: px.string,\n signupLink: px.string,\n savedAddresses: px.arrayOf(types.Address),\n onLocationChange: px.func,\n shipments: px.arrayOf(types.Shipment),\n siteId: px.string,\n onBack: px.func,\n signoutLink: px.string,\n requestError: px.string,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { useConditional } from 'informed';\n\nfunction evaluate(field) {\n return ({ formApi }) => ({ length: formApi.getValue(field)?.length ?? 0 });\n}\n\nexport default function CharCounter({ className, field, max = 0, alwaysShow = false }) {\n const { length } = useConditional({\n evaluate: evaluate(field),\n evaluateWhen: [field],\n });\n\n const invalid = React.useMemo(() => max && length > max, [length, max]);\n\n return alwaysShow || length ? (\n \n {length}\n {max ? (\n <>\n /\n {max}\n \n ) : null}\n \n ) : null;\n}\n\nCharCounter.propTypes = {\n className: px.string,\n field: px.string,\n max: px.number,\n alwaysShow: px.bool,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Checkbox, useFormApi, Radio, RadioGroup } from 'informed';\nimport * as types from 'Common/types';\nimport { useTranslator } from 'Common/hooks';\nimport { SHIPMENT, MONOFORM } from 'Common/constants/fields';\nimport { Translation, Currency } from 'Common/components/localization';\nimport { Field, CharCounter } from 'Common/components/forms';\nimport { Loader } from 'Common/components/ui';\n// import Recap from './Recap';\n\nexport const GIFT_MESSAGE_MAX_LENGTH = 50;\n\nfunction disabledCondition(index) {\n return ({ formApi }) => ({ disabled: !formApi.getValue(`${MONOFORM.shipments}[${index}].${SHIPMENT.isGift}`) });\n}\n\nfunction onValidateGiftMessage(value) {\n if (value?.length > GIFT_MESSAGE_MAX_LENGTH) {\n return 'Commerce.Order.Checkout.GiftMessageMaxLengthLabel';\n }\n return undefined;\n}\n\nexport default function ShippingInformation({\n className,\n disabled,\n // orderEmail,\n shipments = [],\n currency,\n // isLoggedIn = false,\n requestError,\n onBack,\n}) {\n const formApi = useFormApi();\n const lblShipment = useTranslator('Commerce.Order.Checkout.Shipment.Split.Title');\n\n const chooseMethod = React.useCallback(\n (index, method) => {\n formApi.setValue(`${MONOFORM.shipments}[${index}].${SHIPMENT.shippingMethod}`, method);\n },\n [formApi]\n );\n\n const clearGiftMessage = React.useCallback(\n (index) => () => {\n formApi.clearValue(`${MONOFORM.shipments}[${index}].${SHIPMENT.giftMessage}`);\n },\n [formApi]\n );\n\n return (\n \n
\n \n \n {shipments.length > 1 ? (\n
\n \n \n \n
\n ) : null}\n\n \n \n \n
\n \n {/* \n
\n );\n}\n\nShippingInformation.propTypes = {\n className: px.string,\n disabled: px.bool,\n shipments: px.arrayOf(types.Shipment),\n // orderEmail: px.string,\n onBack: px.func,\n currency: px.string,\n // isLoggedIn: px.bool,\n requestError: px.string,\n};\n","import { useMemo } from 'react';\nimport px from 'prop-types';\nimport { CreditCard } from 'Common/utils';\n\nexport default function CardNumber({\n separator = '-',\n lastFour = false,\n mask = 'X',\n issuer,\n number = Array(16).fill(mask).join(''),\n}) {\n const value = useMemo(() => {\n const n = CreditCard.formatNumber(number, { separator, issuer });\n\n return lastFour ? n.slice(-4) : n;\n }, [separator, number, lastFour, issuer]);\n\n return value;\n}\n\nCardNumber.propTypes = {\n number: px.string,\n separator: px.string,\n lastFour: px.bool,\n mask: px.string,\n forceMask: px.bool,\n issuer: px.string,\n};\n","import { useMemo } from 'react';\nimport px from 'prop-types';\nimport { CreditCard } from 'Common/utils';\n\nexport default function CardCVV({\n mask = 'X',\n issuer = CreditCard.ISSUER.VISA,\n cvv = Array(issuer === CreditCard.ISSUER.AMEX ? 4 : 3)\n .fill(mask)\n .join(''),\n}) {\n const value = useMemo(() => cvv.padStart(issuer === CreditCard.ISSUER.AMEX ? 4 : 3, mask), [cvv, issuer, mask]);\n\n return value;\n}\n\nCardCVV.propTypes = {\n mask: px.string,\n issuer: px.string,\n cvv: px.string,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { CreditCard } from 'Common/utils';\nimport { Icon } from 'Common/components/ui';\nimport { ExpDate, CardNumber, CardCVV } from 'Common/components/localization';\n\nexport default function PaymentDisplay({\n className,\n issuer,\n name,\n type,\n number,\n year,\n month,\n placeholder,\n separator,\n lastFour = false,\n cvv,\n}) {\n const icon = React.useMemo(() => CreditCard.getIcon(type === 'CreditCard' ? issuer ?? type : type), [issuer, type]);\n\n return type === 'CreditCard' ? (\n \n {shipments?.length > 1 ? (\n lblShipment({ index: index + 1 })\n ) : (\n
\n \n \n \n ))}\n\n {requestError ? (\n \n \n
\n ) : null}\n\n \n \n \n
\n \n
\n ) : (\n \n
\n {placeholder ? (\n \n XXXXX XXXXXXXX\n \n
\n ) : (\n \n {name ? {name} : null}\n {number ? (\n \n
\n )}\n \n
\n );\n}\n\nPaymentDisplay.propTypes = {\n className: px.string,\n issuer: px.string,\n type: px.string,\n name: px.string,\n number: px.string,\n year: px.oneOfType([px.string, px.number]),\n month: px.oneOfType([px.string, px.number]),\n placeholder: px.bool,\n separator: px.string,\n lastFour: px.bool,\n cvv: px.string,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { useFieldState } from 'informed';\nimport * as types from 'Common/types';\nimport { PAYMENT } from 'Common/constants/fields';\nimport { Translation } from 'Common/components/localization';\nimport { AccordionDropdown } from 'Common/components/ui';\nimport { PaymentDisplay } from './display';\n\nexport default function SavedPaymentSelector({\n className,\n payments,\n scope = '',\n defaultExpanded = false,\n paymentType,\n onNewPayment,\n onLoadPayment,\n cardSeparator = '-',\n showCurrent = false,\n}) {\n const ref = React.useRef();\n const scopeStr = React.useMemo(() => (scope ? `${scope}.` : ''), [scope]);\n const { value: token } = useFieldState(`${scopeStr}${PAYMENT.token}`);\n const usingSavedPayment = React.useMemo(() => (token && payments.find((a) => a[PAYMENT.token] === token)) || null, [\n token,\n payments,\n ]);\n\n return (\n \n
\n \n
\n ) : (\n \n );\n}\n\nAmazonPay.propTypes = {\n parentId: px.string.isRequired,\n scope: px.string,\n onChange: px.func,\n options: px.shape({\n ClientId: px.string.isRequired,\n Env: px.string.isRequired,\n SellerId: px.string.isRequired,\n }).isRequired,\n};\n","import { useMemo, useState, useCallback, useEffect } from 'react';\nimport { validateApplePay } from 'Common/features/order/api';\n\nexport const STATE = {\n STARTUP: 'STATE_STARTUP',\n UNSUPPORTED_BROWSER: 'STATE_UNSUPPORTED_BROWSER',\n NO_PAYMENT: 'STATE_NO_PAYMENT',\n SHOW_BUTTON: 'STATE_SHOW_BUTTON',\n PAYMENT_IN_PROGRESS: 'STATE_PAYMENT_IN_PROGRESS',\n PAYMENT_COMPLETE: 'STATE_PAYMENT_COMPLETE',\n};\n\nexport default function useApplePay({ options, paymentAmount, systemName, marketId }) {\n const [token, setToken] = useState(undefined);\n const [state, setState] = useState(STATE.STARTUP);\n const [error, setError] = useState(false);\n\n const merchantIdentifier = useMemo(() => options.ApplePayMerchantIdentifier, [options]);\n const merchantName = useMemo(() => options.ApplePayDisplayName, [options]);\n const amount = useMemo(() => `${paymentAmount}`, [paymentAmount]);\n\n const onInitSession = 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 useEffect(() => {\n async function initApplePay() {\n if (window.ApplePaySession) {\n const canMakePayments = await window.ApplePaySession.canMakePaymentsWithActiveCard(merchantIdentifier);\n\n if (canMakePayments) {\n setState(STATE.SHOW_BUTTON);\n } else {\n setState(STATE.NO_PAYMENT);\n }\n } else {\n setState(STATE.UNSUPPORTED_BROWSER);\n }\n }\n\n initApplePay();\n }, [merchantIdentifier]);\n\n return { token, state, error, onInitSession };\n}\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useFieldState } from 'informed';\nimport { usePaymentToken } from 'Common/hooks/payment';\nimport useApplePay, { STATE } from 'Common/hooks/payment/useApplePay';\nimport { Spinner } from 'Common/components/ui';\nimport { Translation } from 'Common/components/localization';\nimport { PAYMENT } from 'Common/constants/fields';\n\nexport default function ApplePay({ options, scope, paymentAmount, marketId, onChange }) {\n const { value: systemName } = useFieldState(scope ? `${scope}.${PAYMENT.systemName}` : PAYMENT.systemName);\n const { state, token, error, onInitSession } = useApplePay({ options, paymentAmount, systemName, marketId });\n const lastToken = React.useRef(token);\n\n usePaymentToken(token, scope);\n\n React.useEffect(() => {\n if (token !== lastToken.current) {\n lastToken.current = token;\n if (token && onChange) onChange();\n }\n }, [token, onChange]);\n\n return state === STATE.STARTUP ? (\n \n
\n ) : state === STATE.UNSUPPORTED_BROWSER ? (\n \n
\n ) : state === STATE.NO_PAYMENT ? (\n \n
\n ) : state === STATE.SHOW_BUTTON ? (\n <>\n {error && (\n \n
\n )}\n \n \n ) : state === STATE.PAYMENT_IN_PROGRESS ? (\n \n
\n ) : state === STATE.PAYMENT_COMPLETE ? (\n \n
\n ) : null;\n}\n\nApplePay.propTypes = {\n onChange: px.func,\n scope: px.string,\n options: px.shape({\n ApplePayMerchantIdentifier: px.string.isRequired,\n ApplePayDisplayName: px.string.isRequired,\n }),\n marketId: px.string.isRequired,\n paymentAmount: px.number.isRequired,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { usePayPal, usePaymentToken } from 'Common/hooks/payment';\nimport { Translation } from 'Common/components/localization';\nimport { Spinner } from 'Common/components/ui';\n\nexport default function PayPal({ parentId, options, scope, currency, paymentAmount = 0.01, onChange }) {\n const { loaded, token } = usePayPal({ options, currency, paymentAmount, id: `${parentId}-buttons` });\n const lastToken = React.useRef(token);\n\n usePaymentToken(token, scope);\n\n React.useEffect(() => {\n if (token !== lastToken.current) {\n lastToken.current = token;\n if (token && onChange) onChange();\n }\n }, [token, onChange]);\n\n return (\n <>\n {/* \n
*/}\n {loaded ? null : (\n \n
\n )}\n \n \n
\n \n );\n}\n\nPayPal.propTypes = {\n options: px.shape({\n Sandbox: px.string,\n MerchantId: px.oneOfType([px.string, px.number]),\n ClientId: px.string.isRequired,\n }).isRequired,\n scope: px.string,\n parentId: px.string.isRequired,\n currency: px.string.isRequired,\n paymentAmount: px.number,\n onChange: px.func,\n};\n","import { useRef, useMemo, useState, useEffect } from 'react';\nimport { v4 } from 'uuid';\nimport useScript from '../useScript';\nimport { Url } from 'Common/utils';\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: `${value}` } }],\n }),\n onApprove,\n })\n .render(`#${id}`);\n}\n\nexport default function usePayPal({ id: idProp, options, currency, paymentAmount }) {\n const id = useRef(idProp || `paypal-buttons-${v4()}`);\n const buttonsAdded = useRef(false);\n const [loaded, setLoaded] = useState(false);\n const [token, setToken] = useState(null);\n\n const src = useMemo(() => {\n const url = Url.create(`https://www.paypal.com/sdk/js`)\n .addParam('client-id', options.ClientId)\n .addParam('currency', currency)\n .addParam('intent', 'authorize');\n\n if (options.Sandbox) url.addParam('debug', 'true');\n if (options.MerchantId) url.addParam('merchant-id', options.MerchantId);\n\n return url.href;\n }, [options, currency]);\n\n const paypal = useScript(src, { globalNamespace: 'paypal', destroyOnDismount: false, delay: 100 });\n\n useEffect(() => {\n if (paypal && !buttonsAdded.current) {\n createButtons(\n paypal,\n id.current,\n paymentAmount,\n (data) => setToken(data.orderID),\n () => setLoaded(true)\n );\n buttonsAdded.current = true;\n }\n }, [paypal, paymentAmount]);\n\n return { loaded, token };\n}\n","import * as React from 'react';\nimport px from 'prop-types';\nimport GooglePayButton from '@google-pay/button-react';\nimport { useGooglePay, usePaymentToken } from 'Common/hooks/payment';\nimport { Translation } from 'Common/components/localization';\n\nexport default function GooglePay({ scope, paymentAmount, currency, options, onChange }) {\n const { paymentRequest, onLoadPaymentData, onError, token, error } = useGooglePay({\n options,\n paymentAmount,\n currency,\n });\n\n const lastToken = React.useRef(token);\n\n usePaymentToken(token, scope);\n\n React.useEffect(() => {\n if (token !== lastToken.current) {\n lastToken.current = token;\n if (token && onChange) onChange();\n }\n }, [token, onChange]);\n\n return (\n <>\n {error ? (\n \n
\n ) : null}\n\n \n {method.SavedPaymentInfo?.length ? (\n
\n );\n}\n\nPaymentForm.propTypes = {\n id: px.string,\n scope: px.string,\n useAlternateForms: px.bool,\n useConnectedForms: px.bool,\n defaultShipment: types.Shipment,\n method: types.PaymentMethod.isRequired,\n className: px.string,\n selectorClass: px.string,\n initialPayment: px.shape({ token: px.string, type: px.string }),\n formClass: px.string,\n disabled: px.bool,\n onChange: px.func,\n cardSeparator: px.string,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Relevant, useFieldApi, Radio, useFieldState } from 'informed';\nimport * as types from 'Common/types';\nimport { MONOFORM, PAYMENT } from 'Common/constants/fields';\nimport { CreditCardIssuers } from 'Common/components/forms/Payment/display';\nimport { PaymentForm } from 'Common/components/forms';\nimport { AccordionDropdown, Icon } from 'Common/components/ui';\n\nconst paymentTypeFieldName = `${MONOFORM.payment}.${PAYMENT.paymentType}`;\n\nfunction stopPropagation(e) {\n e.stopPropagation();\n}\n\nexport function PaymentLogo({ method }) {\n switch (method[PAYMENT.paymentType]) {\n case 'GooglePay':\n return \n \n \n\n \n \n
\n {method[PAYMENT.displayName]}
;\n }\n}\n\nPaymentLogo.propTypes = {\n method: types.PaymentMethod,\n};\n\nexport default function PaymentOption({\n method,\n marketId,\n currency,\n initialPayment,\n paymentAmount,\n defaultShipment,\n onChange,\n highlightError = false,\n}) {\n const api = useFieldApi(paymentTypeFieldName);\n const { value: paymentType } = useFieldState(paymentTypeFieldName);\n const active = React.useMemo(() => paymentType === method[PAYMENT.paymentType], [method, paymentType]);\n const onClick = React.useCallback(() => api.setValue(method[PAYMENT.paymentType]), [api, method]);\n\n return (\n\n
\n \n
\n \n }\n controlled\n >\n \n
\n ) : null}\n \n {paymentAmount > 0 ? (\n <>\n \n \n\n \n \n\n {isLoggedIn ? (\n \n \n ) : null}\n \n ) : null}\n\n {requestError ? (\n
\n );\n}\n\nPaymentInformation.propTypes = {\n className: px.string,\n disabled: px.bool,\n paymentMethods: px.arrayOf(types.PaymentMethod),\n defaultShipment: types.Shipment,\n shipments: px.arrayOf(types.Shipment),\n onBack: px.func,\n currency: px.string,\n marketId: px.string,\n paymentAmount: px.number,\n initialPayment: types.Payment,\n siteId: px.string,\n isLoggedIn: px.bool,\n requestError: px.string,\n clearRequestError: px.func,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport pick from 'lodash.pick';\nimport $ from 'jquery';\nimport { Form } from 'informed';\nimport * as types from 'Common/types';\nimport { useTranslation } from 'Common/hooks';\nimport { useExpDateFormat } from 'Common/hooks/payment';\nimport { Url, CreditCard, matchValue } from 'Common/utils';\nimport { HashRouter } from 'Common/components/app';\nimport { Icon, Loader, Modal } from 'Common/components/ui';\nimport { Translation } from 'Common/components/localization';\nimport { EMAIL, MONOFORM, SHIPMENT, ADDRESS, PAYMENT, EMPTY_PAYMENT, EMPTY_ADDRESS } from 'Common/constants/fields';\nimport * as GA4 from 'Common/constants/gtm';\nimport {\n CHECKOUT_PAGE_HASH_CUSTOMER,\n CHECKOUT_PAGE_HASH_SHIPPING,\n CHECKOUT_PAGE_HASH_PAYMENT,\n CART_LOCATION_HASH,\n} from '~config/order';\nimport AddressVerificationDrawer from '../AddressVerificationDrawer';\nimport CheckoutSummary from './CheckoutSummary';\nimport CustomerInformation from './CustomerInformation';\nimport ShippingInformation, { GIFT_MESSAGE_MAX_LENGTH } from './ShippingInformation';\nimport PaymentInformation from './PaymentInformation';\nimport { AddressVerification } from 'Common/models';\n\nconst PAGE_ORDER = [CHECKOUT_PAGE_HASH_CUSTOMER, CHECKOUT_PAGE_HASH_SHIPPING, CHECKOUT_PAGE_HASH_PAYMENT];\n\nconst NO_VERIFY = {\n Address: null,\n VerifiedAddresses: [],\n onConfirm: null,\n onCancel: null,\n};\n\nfunction getCustomerUpdates(values, initialValues) {\n const { [MONOFORM.customer]: customerNext, [MONOFORM.shipments]: shipmentsNext } = values;\n const { [MONOFORM.customer]: customer, [MONOFORM.shipments]: shipments } = initialValues;\n\n return {\n customer: matchValue(customerNext, customer, { falseIsNull: true })\n ? false\n : { email: customerNext[EMAIL.email], signup: customerNext[EMAIL.signup] },\n shipments: shipments\n .map((s, i) => (matchValue(shipmentsNext[i], s, { falseIsNull: true }) ? null : shipmentsNext[i]))\n .filter(Boolean),\n };\n}\n\nfunction getShippingUpdates(values, initialValues) {\n const { [MONOFORM.shipments]: shipmentsNext } = values;\n const { [MONOFORM.shipments]: shipments } = initialValues;\n const mapped = shipmentsNext.map((s) =>\n s[SHIPMENT.giftMessage]\n ? { ...s, [SHIPMENT.giftMessage]: s[SHIPMENT.giftMessage].slice(0, GIFT_MESSAGE_MAX_LENGTH) }\n : s\n );\n\n return shipments\n .map((s, i) => (matchValue(mapped[i], s, { falseIsNull: true }) ? null : mapped[i]))\n .filter(Boolean);\n}\n\nfunction getPaymentUpdate(values, initialValues) {\n const { [MONOFORM.payment]: paymentNext } = values;\n const { [MONOFORM.payment]: payment } = initialValues;\n\n return matchValue(paymentNext, payment, { falseIsNull: true }) ? null : paymentNext;\n}\n\nfunction isSupportedPayment(paymentType) {\n switch (paymentType) {\n case 'ApplePay':\n return !!window.ApplePaySession;\n default:\n return true;\n }\n}\n\nexport function NavItem({ id, label, active, data }) {\n return (\n \n \n
\n \n
\n \n \n
\n \n \n
\n \n \n \n
\n ) : null}\n\n \n \n \n
\n \n
\n \n
\n {cartLoading ? \n
\n );\n}\n\nMultiPageCheckout.propTypes = {\n accountEmail: px.string,\n cartEmptyLabel: px.string,\n cartId: px.node,\n cartLoaded: px.bool,\n cartLoading: px.bool,\n className: px.string,\n currency: px.string,\n darkTheme: px.string,\n forms: px.arrayOf(types.CartForm),\n getVerifiedAddresses: px.func,\n giftCardProps: px.objectOf(px.any),\n gtmListValue: px.string,\n handleUpdates: px.func,\n homePage: px.string,\n isLoggedIn: px.bool,\n marketId: px.string,\n maxHashIndex: px.number,\n onPlaceOrder: px.func,\n orderEmail: px.string,\n promoProps: px.objectOf(px.any),\n redirectWhenEmpty: px.string,\n savedShippingAddresses: px.arrayOf(types.Address),\n shipments: px.arrayOf(types.Shipment),\n signinLink: px.string,\n signoutLink: px.string,\n signupLink: px.string,\n siteId: px.string,\n summaryData: types.OrderSummary,\n takeoverPage: px.bool,\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { AddressUtil, GTM } from 'Common/utils';\nimport * as GA4 from 'Common/constants/gtm';\nimport { SHIPMENT } from 'Common/constants/fields';\nimport { useSelector } from 'react-redux';\nimport { logger } from 'Common/core';\nimport { useAction, useCatalogEntities, useScript } from 'Common/hooks';\nimport Checkout, { Promotions, GiftCards } from 'Common/components/checkout/MultiPageCheckout';\nimport { updateOrderEmail, updateShipmentDetail, updateShipmentAddress, addPayment } from 'Common/features/order/api';\nimport { order } from '~features';\nimport { NODE_ENV } from '$env';\n\nconst cartApiOptions = {\n expand: ['forms', 'ordertotals', 'savedshippingaddresses', 'shippingmethods', 'savedpayments'],\n update: ['lineitems', 'shipping', 'payment', 'promotions'],\n};\n\nfunction getHashIndex(shipments = []) {\n let page = 2;\n\n for (const {\n [SHIPMENT.address]: address,\n [SHIPMENT.shipmentId]: id,\n [SHIPMENT.shippingMethod]: method,\n [SHIPMENT.isDigital]: isDigital,\n } of shipments) {\n if (!id || !AddressUtil.isValidAddressObject(address, isDigital)) {\n page = 0;\n break;\n }\n if (!method && page === 2) page = 1;\n }\n\n return page;\n}\n\nexport default function MultiPageCheckout({\n accountEmail,\n signupLink,\n signinLink,\n signoutLink,\n cartPage,\n siteId,\n googleRecaptchaV3Sitekey,\n orderConfirmationPage,\n homePage,\n darkTheme,\n}) {\n const stepsUpdated = React.useRef({});\n const cartLoadCount = React.useRef(0);\n const [cartLoading, setCartLoading] = React.useState(false);\n\n const startLoader = React.useCallback(() => {\n cartLoadCount.current += 1;\n setCartLoading(true);\n }, []);\n\n const stopLoader = React.useCallback(() => {\n cartLoadCount.current -= 1;\n if (!cartLoadCount.current) setCartLoading(false);\n }, []);\n\n const loadedRef = React.useRef(false);\n const loadCart = useAction(order.actions.loadCart, startLoader, stopLoader);\n const forms = useSelector(order.selectors.getCartForms);\n const orderEmail = useSelector(order.selectors.getOrderEmail);\n const isUpdating = useSelector(order.selectors.isCartUpdating);\n const currency = useSelector(order.selectors.getCurrencyCode);\n const summary = useSelector(order.selectors.getCartSummaryData);\n const orderGiftCards = useSelector(order.selectors.getOrderGiftCards);\n const paymentMethods = useSelector(order.selectors.getPaymentMethods);\n const promoError = useSelector(order.selectors.getPromoCodeValidationIssue);\n const promotions = useSelector(order.selectors.getPromoCodes);\n const savedShippingAddresses = useSelector(order.selectors.getSavedShippingAddresses);\n const marketId = useSelector(order.selectors.getMarketId);\n const cartId = useSelector(order.selectors.getCartId);\n const placeOrder = useAction(order.actions.placeOrder, startLoader, stopLoader);\n const addPromotion = useAction(order.actions.addPromotion, startLoader, stopLoader);\n const removePromotion = useAction(order.actions.removePromotion, startLoader, stopLoader);\n const removePayment = useAction(order.actions.removePayment, startLoader, stopLoader);\n const deleteCart = useAction(order.actions.clearCart, startLoader, stopLoader);\n const orderUpdateQueue = useAction(order.actions.orderUpdateQueue, startLoader, stopLoader);\n const getVerifiedAddresses = useAction(order.actions.getVerifiedAddresses, startLoader, stopLoader);\n const lineItems = useSelector(order.selectors.getAllLineItems);\n const totalQty = useSelector(order.selectors.getTotalQuantity);\n const catalogEntities = useCatalogEntities(lineItems);\n\n const savedGiftCards = React.useMemo(\n () => paymentMethods?.find((pm) => pm.SystemName === 'GiftCard')?.SavedPaymentInfo,\n [paymentMethods]\n );\n\n const promoProps = React.useMemo(\n () => ({\n promotions,\n addPromotion,\n removePromotion,\n promoError,\n Promotions,\n }),\n [promotions, addPromotion, removePromotion, promoError]\n );\n\n const giftCardProps = React.useMemo(\n () =>\n paymentMethods?.find((pm) => pm.SystemName === 'GiftCard')\n ? {\n accountEmail,\n removePayment,\n savedGiftCards,\n GiftCards,\n giftCards: orderGiftCards,\n }\n : null,\n [accountEmail, removePayment, savedGiftCards, paymentMethods, orderGiftCards]\n );\n\n const recaptchSrc = React.useMemo(\n () =>\n googleRecaptchaV3Sitekey\n ? `https://www.google.com/recaptcha/api.js?render=${googleRecaptchaV3Sitekey}`\n : null,\n [googleRecaptchaV3Sitekey]\n );\n\n const grecaptcha = useScript(recaptchSrc, {\n globalNamespace: 'grecaptcha',\n destroyOnDismount: false,\n delay: 100,\n });\n\n const validateUser = React.useMemo(\n () =>\n googleRecaptchaV3Sitekey\n ? () =>\n new Promise((res, rej) =>\n grecaptcha.ready(() => {\n grecaptcha.execute(googleRecaptchaV3Sitekey, { action: 'submit' }).then(res).catch(rej);\n })\n )\n : null,\n [googleRecaptchaV3Sitekey, grecaptcha]\n );\n\n const handleUpdates = React.useCallback(\n async (updates = []) => {\n let response;\n const queue = await Promise.all(\n updates.map(async ({ type, data }) => {\n switch (type) {\n case GA4.CHECKOUT_STEPS.CUSTOMER:\n return [updateOrderEmail, data.email, data.signup];\n case 'address':\n return [\n updateShipmentAddress,\n data.shipmentId,\n data.address,\n data.useDefault,\n {\n expand: ['ordertotals', 'forms', 'shippingmethods'],\n update: ['shipping', 'lineitems', 'promotions', 'payment'],\n },\n ];\n case GA4.CHECKOUT_STEPS.SHIPPING:\n return [\n updateShipmentDetail,\n data,\n {\n expand: ['ordertotals', 'forms', 'shippingmethods'],\n update: ['shipping', 'lineitems', 'promotions', 'payment'],\n },\n ];\n case GA4.CHECKOUT_STEPS.PAYMENT:\n return [\n addPayment,\n data,\n (validateUser && (await validateUser())) || undefined,\n { expand: ['ordertotals', 'forms'] },\n ];\n case 'giftcard':\n return [addPayment, data, undefined, { expand: ['ordertotals', 'forms'] }];\n default:\n return null;\n }\n })\n );\n\n try {\n startLoader();\n response = await new Promise((res) =>\n orderUpdateQueue(queue.filter(Boolean), undefined, (errors, data) =>\n res({ success: Boolean(!errors?.length && data), errors, data })\n )\n );\n } finally {\n stopLoader();\n }\n\n if (response.success) {\n updates.forEach((update) => {\n GTM.updateDataLayer(\n GTM.mapEntitiesToCheckoutStep(\n catalogEntities,\n forms?.length > 0 ? forms[0]?.Promotions : null,\n update.type\n )\n );\n });\n return response.data;\n }\n\n const error = Array.isArray(response.errors) ? response.errors[0] : response.errors;\n\n throw new Error(error?.Issue || error?.message || error);\n },\n [catalogEntities, forms, orderUpdateQueue, startLoader, stopLoader, validateUser]\n );\n\n const onPlaceOrder = React.useCallback(async () => {\n let token = undefined;\n\n if (validateUser) token = await validateUser();\n return new Promise((res, rej) => {\n placeOrder(orderConfirmationPage, token, cartId, (err, data) => (err ? rej(err) : res(data)));\n });\n }, [orderConfirmationPage, placeOrder, validateUser, cartId]);\n\n React.useEffect(() => {\n if (!loadedRef.current && !isUpdating) {\n loadedRef.current = true;\n loadCart(cartApiOptions);\n }\n }, [loadCart, isUpdating]);\n\n React.useEffect(() => {\n if (NODE_ENV.startsWith('dev') && !Object.prototype.hasOwnProperty.call(window, 'DELETE_CART')) {\n window.DELETE_CART = deleteCart;\n logger.debug('You may use DELETE_CART() to clear your cart while in development');\n }\n }, [deleteCart]);\n\n const cartLoaded =\n !cartLoading &&\n forms?.length &&\n savedShippingAddresses != null &&\n paymentMethods?.[0]?.SavedPaymentInfo != null;\n\n const shipments = React.useMemo(() => forms?.reduce((arr, form) => arr.concat(form.Shipments), []), [forms]);\n\n const maxHashIndex = React.useMemo(\n () => (!orderEmail && !accountEmail ? 0 : getHashIndex(shipments)),\n [orderEmail, accountEmail, shipments]\n );\n\n React.useEffect(() => {\n if (cartLoaded) {\n const stepsToCall = [];\n\n if ((orderEmail || accountEmail) && !stepsUpdated.current[GA4.CHECKOUT_STEPS.CUSTOMER]) {\n stepsToCall.push(GA4.CHECKOUT_STEPS.CUSTOMER);\n stepsUpdated.current[GA4.CHECKOUT_STEPS.CUSTOMER] = true;\n }\n\n if (maxHashIndex >= 1 && !stepsUpdated.current[GA4.CHECKOUT_STEPS.SHIPPING]) {\n stepsToCall.push(GA4.CHECKOUT_STEPS.SHIPPING);\n stepsUpdated.current[GA4.CHECKOUT_STEPS.SHIPPING] = true;\n }\n\n stepsToCall.forEach((step) => {\n GTM.updateDataLayer(\n GTM.mapEntitiesToCheckoutStep(\n catalogEntities,\n forms?.length > 0 ? forms[0]?.Promotions : null,\n step\n )\n );\n });\n }\n }, [cartLoaded, orderEmail, accountEmail, maxHashIndex, catalogEntities, forms]);\n\n return (\n \n \n
\n \n
\n \n \n
\n \n
\n \n \n {formsReady ? (\n \n \n {formsReady ? (\n \n \n {formsReady ? (\n \n
\n \n
\n \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 { createStateLoader } from 'Common/components/app';\nimport { customer } from '~features';\n\nexport default createStateLoader({\n setState: customer.actions.setCustomerOrders,\n clearState: customer.actions.clearCustomerOrders,\n});\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { v4 } from 'uuid';\nimport { logger } from 'Common/core';\nimport { Translation } from 'Common/components/localization';\nimport { useTranslation } from 'Common/hooks';\nimport { Email, Api, GTM as gtmUtil } from 'Common/utils';\nimport * as GTM from 'Common/constants/gtm';\n\nfunction decodeHtml(str = '') {\n const div = document.createElement('div');\n\n div.innerHTML = str;\n return div.innerText || '';\n}\n\nconst REQ = {\n MailChimp: async function mailChimpRequest(email, options) {\n const id = `frame_${v4()}`;\n const [, urlStr = ''] = options?.embeddedForm?.match(/action=['\"]([^'\"]+)['\"]/i) || [];\n let url;\n\n try {\n url = new URL(decodeHtml(urlStr));\n } catch (e) {\n url = null;\n }\n\n if (url) {\n const form = document.createElement('form');\n const frame = document.createElement('iframe');\n\n frame.name = id;\n frame.id = id;\n frame.src = 'about:blank';\n frame.style.display = 'none';\n document.body.appendChild(frame);\n form.action = url.href;\n form.method = 'post';\n form.target = id;\n form.noValidate = true;\n form.innerHTML = `\n \n \n \n `;\n form.style.display = 'none';\n document.body.appendChild(form);\n\n await new Promise((res) => setTimeout(res, 100));\n\n const error = await new Promise((res) => {\n frame.onload = () => res(null);\n frame.onerror = () => res('Form.Subscription.Failure');\n document.createElement('form').submit.call(form);\n }).catch((e) => {\n logger.warn(`Failed to submit mailchimp form: `, e?.message || e);\n return 'Form.Subscription.Failure';\n });\n\n document.body.removeChild(form);\n document.body.removeChild(frame);\n return { success: !error, error };\n } else {\n logger.warn('No url found in options.embeddedForm for mailchimp subscribe', options);\n }\n return { success: false };\n },\n\n Default: async function defaultRequest(email, options = {}) {\n if (options.url) {\n const form = new FormData();\n\n form.append('__RequestVerificationToken', Api.antiForgeryToken);\n form.append('ProviderKey', options.providerKey);\n form.append('ListId', options.listId);\n form.append('MetaTags', options.metaTags);\n form.append('SubscriptionEmail', email);\n\n return Api.POST(options.url, form, { antiForgery: false });\n } else {\n logger.warn('No url found in options.url for default subscribe', options);\n }\n return { success: false };\n },\n};\n\nexport default function SubscribeForm({\n host = 'Default',\n id = v4(),\n className,\n options,\n allowMultiple,\n style,\n useIcon = false,\n}) {\n const idRef = React.useRef(id);\n const [complete, setComplete] = React.useState(null);\n const [error, setError] = React.useState(null);\n const [email, setEmail] = React.useState('');\n const isValid = React.useMemo(() => Email.isValid(email || ''), [email]);\n const lblPlaceholder = useTranslation('Form.Subscription.Email.Placeholder');\n const submitLbl = useTranslation('Form.Subscription.Submit');\n const onChange = React.useCallback((e) => setEmail(e.target.value), []);\n const onSubmit = React.useCallback(\n async (e) => {\n e.preventDefault();\n if (isValid) {\n const req = REQ[host] || REQ.Default;\n\n setComplete(false);\n setError(null);\n\n const r = await req(email, options);\n\n if (!r?.success) setError(r?.error || 'Form.Subscription.Failure');\n if (r?.success) {\n gtmUtil.updateDataLayer(gtmUtil.getEmailSignup(GTM.TAGS.FOOTER), GTM.LAYERS.EMAILSIGNUP); // assumes using this component in footer\n }\n setComplete(true);\n } else {\n setError('Form.Subscription.Failure');\n }\n },\n [email, isValid, options, host]\n );\n\n return (\n <>\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 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 \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 );\n}\n\nNotificationSubscriptionUnsubscribeButton.propTypes = {\n id: px.string,\n};\n","import * as React from 'react';\nimport groupBy from 'lodash/groupBy';\nimport cx from 'classnames';\nimport { useSelector } from 'react-redux';\nimport { useAction } from 'Common/hooks';\nimport { customer } from '~features';\nimport { Loader } from 'Common/components/ui';\nimport NotificationSubscriptionUnsubscribeButton from './NotificationSubscriptionUnsubscribeButton';\nimport { Translation } from 'Common/components/localization';\n\nexport default function NotificationSubscriptionListing() {\n const [loading, setLoading] = React.useState(false);\n const startLoader = React.useCallback(() => setLoading(true), []);\n const stopLoader = React.useCallback(() => setLoading(false), []);\n const notificationSubscriptions = useSelector(customer.selectors.getNotificationSubscriptionItems);\n const hasNotificationSubscriptions = React.useMemo(() => notificationSubscriptions?.length > 0, [\n notificationSubscriptions,\n ]);\n\n const fetchList = useAction(customer.actions.getNotificationSubscriptionList, startLoader, stopLoader);\n\n React.useEffect(() => {\n fetchList();\n }, [fetchList]);\n\n const groups = React.useMemo(() => Object.entries(groupBy(notificationSubscriptions, 'NotificationTypeLabel')), [\n notificationSubscriptions,\n ]);\n\n return (\n \n {loading ?
\n );\n}\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Formatter } from 'Common/utils';\nimport { useViewport } from 'Common/hooks';\nimport { Translation } from '../localization';\n\nconst MOBILE_BREAKPOINT = 'md';\n\nexport default function OrderDetailTable({ className, LineItems = [], currency, shipmentId }) {\n const viewport = useViewport();\n const itemCount = React.useMemo(() => LineItems.length, [LineItems]);\n\n return (\n \n
\n );\n })\n ) : (\n {key}
\n {value.map((subs) => {\n return (\n\n
\n );\n })}\n \n
\n {subs?.NotificationLabel}
\n \n
\n )}\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 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 ) : 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 $ from 'jquery';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport * as PRODUCT from '~config/product';\nimport { Product } from 'Common/types';\nimport Slider from 'react-slick';\nimport { ArrowButton } from 'Common/components/ui';\nimport { CatalogCard } from '../catalog';\nimport { Formatter, Url } from 'Common/utils';\nimport { Translation } from 'Common/components/localization';\nimport { ProductInfo } from 'Common/models';\n\nconst slickSliderSettings = {\n arrows: true,\n slidesToShow: 3.5,\n infinite: false,\n prevArrow:\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","const MILE = { key: 'MILE', value: 'Mile', queryValue: 'Miles' };\nconst KILOMETER = { key: 'KILOMETER', value: 'Kilometer', queryValue: 'Kilometers' };\n\nexport const QUERY_UNIT = {\n [MILE.value]: MILE.queryValue,\n [KILOMETER.value]: KILOMETER.queryValue,\n [MILE.key]: MILE.queryValue,\n [KILOMETER.key]: KILOMETER.queryValue,\n [MILE.queryValue]: MILE.queryValue,\n [KILOMETER.queryValue]: KILOMETER.queryValue,\n};\n\nexport const UNIT = {\n [MILE.value]: MILE.value,\n [KILOMETER.value]: KILOMETER.value,\n [MILE.key]: MILE.value,\n [KILOMETER.key]: KILOMETER.value,\n [MILE.queryValue]: MILE.value,\n [KILOMETER.queryValue]: KILOMETER.value,\n};\n\nexport const RADIUS_OPTS = [10, 50, 100, 200];\n","import supercluster from 'supercluster';\nimport { logger } from 'Common/core';\n\nconst Location = {\n Coord(latitude = 0, longitude = 0, convertRange = null) {\n let lat = latitude;\n let lng = longitude;\n\n if (latitude && typeof latitude === 'object' && !longitude) {\n lat = latitude.lat ?? latitude.latitude ?? 0;\n lng = latitude.lng ?? latitude.long ?? latitude.longitude ?? 0;\n }\n if (typeof lat !== 'number') {\n throw new Error(\n `Invalid Location.Coord arguments supplied. Expected () or (number, [, number[, string]]) or (object: { lat/latitude: number, lng/long/longitude: number }[, undefined, string]) but received (${JSON.stringify(\n latitude\n )}, ${JSON.stringify(longitude)}, ${JSON.stringify(convertRange)}).`\n );\n }\n if (convertRange === 'offset') {\n lat = lat > 90 ? lat - 180 : lat;\n lng = lng > 180 ? lng - 360 : lng;\n } else if (convertRange === 'whole') {\n lat = lat < 0 ? lat + 180 : lat;\n lng = lng < 0 ? lng + 360 : lng;\n }\n return { lat, lng };\n },\n\n truncateCoord(coord, decimalPlaces = 0) {\n return {\n lat: parseFloat(coord.lat).toFixed(decimalPlaces),\n lng: parseFloat(coord.lng).toFixed(decimalPlaces),\n };\n },\n\n convertBounds({ ne, sw }, convertRange = null) {\n return { ne: Location.Coord(ne, 0, convertRange), sw: Location.Coord(sw, 0, convertRange) };\n },\n\n addressFromCoords(coords, google, throws = false) {\n if (google && coords) {\n const latLng = new google.maps.LatLng(coords.lat, coords.lng);\n\n return new Promise((res, rej) =>\n new google.maps.Geocoder().geocode({ location: latLng }, (results, status) => {\n if (status == google.maps.GeocoderStatus.OK) {\n const result =\n results.find((r) => r.types.includes('postal_code')) ??\n results.find((r) => r.types.includes('locality')) ??\n results.find((r) => r.types.includes('political'));\n\n res(result?.formatted_address);\n } else {\n logger.warn('geocoder request failed', status);\n if (throws) rej(status);\n else res(null);\n }\n })\n );\n }\n return null;\n },\n\n addressFromPlace(place = {}) {\n const updatedAddress = Location.Coord(place.geometry?.location?.lat(), place.geometry?.location?.lng());\n\n if (place.address_components) {\n place.address_components.forEach((comp) => {\n if (comp.types.includes('postal_code')) updatedAddress.zip = comp.short_name;\n if (comp.types.includes('street_number')) updatedAddress.address = comp.short_name;\n if (comp.types.includes('locality')) updatedAddress.city = comp.short_name;\n if (comp.types.includes('administrative_area_level_1')) updatedAddress.state = comp.short_name;\n if (comp.types.includes('country')) updatedAddress.country = comp.short_name;\n if (comp.types.includes('route')) {\n updatedAddress.address\n ? (updatedAddress.address += ` ${comp.short_name}`)\n : (updatedAddress.address = comp.short_name);\n }\n });\n }\n if (place.formatted_address) updatedAddress.formatted_address = place.formatted_address;\n if (place.name) updatedAddress.searchInput = place.name;\n updatedAddress.fullAddress =\n updatedAddress.formatted_address ||\n `${updatedAddress.address} ${updatedAddress.city}, ${updatedAddress.state} ${updatedAddress.country} ${updatedAddress.zip}`;\n updatedAddress.place = place;\n\n return updatedAddress;\n },\n\n createClusters(bounds, zoom, markers, radius, extent, nodeSize, minZoom, maxZoom) {\n const ne = Location.Coord(bounds.ne, 0, 'whole');\n const sw = Location.Coord(bounds.sw, 0, 'whole');\n const index = new supercluster({\n radius: radius || 40,\n extent: extent || 512,\n nodeSize: nodeSize || 64,\n minZoom: minZoom || 0,\n maxZoom: maxZoom || 16,\n });\n\n const points = markers.map((marker) => ({\n ...marker,\n geometry: { coordinates: [marker.lng, marker.lat] },\n }));\n\n const clusters = index\n .load(points)\n .getClusters([sw.lng, sw.lat, ne.lng, ne.lat], zoom)\n .map((cluster) =>\n cluster.type === 'Feature'\n ? {\n id: cluster.id,\n lat: cluster.geometry.coordinates[1],\n lng: cluster.geometry.coordinates[0],\n point_count: cluster.properties.point_count,\n cluster_id: cluster.properties.cluster_id,\n // onclick to get correct zoom\n getZoom: () => index.getClusterExpansionZoom(cluster.properties.cluster_id),\n }\n : cluster\n );\n\n return clusters.length ? clusters : markers;\n },\n\n getDistanceBetweenCoords(a, b) {\n return Location.getDistance(a.lat, a.lng, b.lat, b.lng);\n },\n\n getDistance(lat1, lon1, lat2, lon2) {\n if (lat1 === lat2 && lon1 === lon2) return 0;\n\n const radlat1 = (Math.PI * lat1) / 180;\n const radlat2 = (Math.PI * lat2) / 180;\n const theta = lon1 - lon2;\n const radtheta = (Math.PI * theta) / 180;\n let dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);\n\n if (dist > 1) dist = 1;\n dist = Math.acos(dist);\n dist *= 180 / Math.PI;\n dist *= 60 * 1.1515;\n\n return dist;\n },\n\n convertResponseLocation({ Lat, Lng, Id, Name, Extended } = {}) {\n return {\n lat: Lat,\n lng: Lng,\n id: Id,\n name: Name,\n address1: Extended.Address.Line1,\n address2: `${Extended.Address.Locality}, ${Extended.Address.RegionCode} ${Extended.Address.PostalCode}`,\n phone: Extended.Phone,\n website: Extended.Website,\n directions: `https://www.google.com/maps/dir/?${new URLSearchParams({\n api: 1,\n destination: `${Extended.Address.Line1}+${Extended.Address.Locality},+${Extended.Address.StateCode}+${Extended.Address.PostalCode}`,\n }).toString()}`,\n categories: Extended.Categories,\n };\n },\n\n ui: {\n enableEnterKey(input, autocomplete) {\n const originalAddEventListener = input.addEventListener;\n\n const addEventListenerWrapper = (type, callback) => {\n let listener = callback;\n\n if (type === 'keydown') {\n const originalListener = callback;\n\n listener = (event) => {\n const pacContainer = Location.ui.getAutoCompleteContainer(autocomplete);\n\n if (pacContainer) {\n const suggestionsVisible = pacContainer.style.display !== 'none';\n const suggestionSelected =\n pacContainer.getElementsByClassName('pac-item-selected').length > 0;\n\n const enterPress = event.key === 'Enter' || event.which === 13 || event.keyCode === 13;\n\n if (suggestionsVisible && enterPress) {\n if (!suggestionSelected) {\n const arrowDownEvent = JSON.parse(\n JSON.stringify(\n event,\n (k, v) => {\n if (v instanceof Node) return 'Node';\n if (v instanceof Window) return 'Window';\n return v;\n },\n ' '\n )\n );\n\n arrowDownEvent.which = 40;\n arrowDownEvent.keyCode = 40;\n originalListener.call(input, arrowDownEvent);\n }\n event.preventDefault();\n }\n } else {\n logger.warn('could not find google autocomplete container');\n }\n\n originalListener.apply(input, [event]);\n };\n }\n originalAddEventListener.apply(input, [type, listener]);\n };\n\n input.addEventListener = addEventListenerWrapper;\n },\n\n getAutoCompleteContainer(autocomplete) {\n if (autocomplete && autocomplete.gm_accessors_) {\n const place = autocomplete.gm_accessors_.place;\n const placeKey = Object.keys(place).find(\n (value) =>\n typeof place[value] === 'object' &&\n Object.prototype.hasOwnProperty.call(place[value], 'gm_accessors_')\n );\n\n const input = place[placeKey].gm_accessors_.input[placeKey];\n const inputKey = Object.keys(input).find(\n (value) => input[value].classList && input[value].classList.contains('pac-container')\n );\n\n return input[inputKey];\n } else {\n logger.warn('could not find google autocomplete container : incomplete autocomplete object');\n }\n },\n },\n};\n\nexport default Location;\n","import { UNIT } from './constants';\n\nexport function stopPropagation(e) {\n e.stopPropagation();\n}\n\nexport function mapLocationData(locations) {\n return (\n locations?.map((l) => ({\n lat: l.Lat,\n lng: l.Lng,\n id: l.Id,\n name: l.Name,\n address1: l.Extended.Address.Line1,\n address2: `${l.Extended.Address.Locality}, ${l.Extended.Address.RegionCode} ${l.Extended.Address.PostalCode}`,\n phone: l.Extended.Phone,\n website: l.Extended.Website,\n directions: `https://www.google.com/maps/dir/?${new URLSearchParams({\n api: 1,\n destination: `${l.Extended.Address.Line1}+${l.Extended.Address.Locality},+${l.Extended.Address.StateCode}+${l.Extended.Address.PostalCode}`,\n }).toString()}`,\n })) || []\n );\n}\n\nexport function getDistance(lat1, lon1, lat2, lon2, unit = UNIT.MILE) {\n if (lat1 === lat2 && lon1 === lon2) return 0;\n\n const radlat1 = (Math.PI * lat1) / 180;\n const radlat2 = (Math.PI * lat2) / 180;\n const theta = lon1 - lon2;\n const radtheta = (Math.PI * theta) / 180;\n let dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);\n\n if (dist > 1) dist = 1;\n dist = Math.acos(dist);\n dist *= 180 / Math.PI;\n dist *= 60 * 1.1515;\n if (unit === UNIT.MILE) return dist;\n return dist * 1.609344;\n}\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Translation } from 'Common/components/localization';\nimport { ProductBadge } from 'Common/components/product';\nimport { stopPropagation } from './helpers';\n\nexport default function LocationResult({ location, className, onGotoLocation, showCategories = false }) {\n const role = React.useMemo(() => (onGotoLocation ? 'button' : undefined), [onGotoLocation]);\n\n return (\n \n \n
\n \n {showCategories ?
\n \n );\n}\n\nLocationResult.propTypes = {\n className: px.string,\n onGotoLocation: px.func,\n showCategories: px.bool,\n location: px.shape({\n id: px.oneOfType([px.string, px.number]),\n name: px.string,\n address1: px.string,\n address2: px.string,\n phone: px.string,\n website: px.string,\n directions: px.string,\n categories: px.arrayOf(px.string),\n }),\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { useTranslation } from 'Common/hooks';\nimport { Location } from 'Common/utils';\nimport { Translation } from 'Common/components/localization';\nimport { Icon } from 'Common/components/ui';\nimport { RADIUS_OPTS, UNIT, QUERY_UNIT } from 'Common/constants/locator';\nimport LocationResult from './LocationResult';\n\nexport default function LocatorList({\n searchState,\n height,\n className,\n onUpdateFilters,\n onClearLocation,\n onLoadMore,\n onGotoLocation,\n isMobile,\n children,\n categories,\n}) {\n const unitTranslationId = React.useMemo(\n () => `Dealer.Locator.DistanceUnit.${UNIT[searchState.query.LocationFilter.DistanceUnits]}.Label`,\n [searchState.query.LocationFilter]\n );\n\n const translatedUnit = useTranslation(unitTranslationId);\n const distanceParams = React.useMemo(\n () => ({ amount: searchState.query.LocationFilter.Distance, unit: translatedUnit }),\n [searchState.query.LocationFilter, translatedUnit]\n );\n\n const translatedDistance = useTranslation('Dealer.Locator.Filter.Distance.Label', distanceParams);\n const lblClear = useTranslation('Dealer.Locator.Filter.Clear.Label');\n const style = React.useMemo(\n () => (isMobile ? { height: 'auto', maxHeight: 'initial' } : { height, maxHeight: height }),\n [isMobile, height]\n );\n\n const pageParams = React.useMemo(() => {\n if (onLoadMore && searchState.response.TotalPages > searchState.response.Page) {\n const { TotalPages: totalPages, TotalItems: total, Page: page, PageSize: pageSize } = searchState.response;\n const from = page * pageSize + 1;\n const to = Math.min(total, from + pageSize);\n\n return {\n totalPages,\n total,\n page,\n pageSize,\n from,\n to,\n next: { from, to },\n };\n }\n return null;\n }, [searchState.response, onLoadMore]);\n\n const onClearCategories = React.useCallback(() => {\n return onUpdateFilters({ queryCategories: [] });\n }, [onUpdateFilters]);\n\n const onUpdateCategories = React.useCallback(\n (category) => {\n if (searchState.query.CategoriesFilter.includes(category)) {\n return onClearCategories();\n }\n return onUpdateFilters({ queryCategories: [category] });\n },\n [searchState, onUpdateFilters, onClearCategories]\n );\n\n return (\n {location.name}
\n\n {location.address1}\n
\n {location.address2}\n
\n {location.phone}\n
\n {location.website ? (\n <>\n \n {location.website.replace(/\\?.*$/, '')}\n \n
\n \n ) : null}\n \n {' '}\n
\n {children}\n {categories?.length > 0 || searchState.location ? (\n
\n );\n}\n\nLocatorList.propTypes = {\n height: px.number,\n className: px.string,\n onGotoLocation: px.func,\n onClearLocation: px.func,\n onLoadMore: px.func,\n onUpdateFilters: px.func,\n isMobile: px.bool,\n children: px.node,\n categories: px.arrayOf(px.string),\n searchState: px.shape({\n location: px.shape({\n lat: px.number,\n lng: px.number,\n address: px.string,\n fullAddress: px.string,\n }),\n query: px.shape({\n CategoriesFilter: px.arrayOf(px.string),\n LocationFilter: px.shape({\n Distance: px.number,\n DistanceUnits: px.oneOf([QUERY_UNIT.MILE, QUERY_UNIT.KILOMETER]),\n }),\n }),\n response: px.shape({\n TotalPages: px.number,\n Page: px.number,\n PageSize: px.number,\n PageItems: px.number,\n TotalItems: px.number,\n Locations: px.arrayOf(\n px.shape({\n id: px.oneOfType([px.string, px.number]),\n name: px.string,\n address1: px.string,\n address2: px.string,\n phone: px.string,\n website: px.string,\n directions: px.string,\n categories: px.arrayOf(px.string),\n })\n ),\n }),\n }),\n};\n","/* eslint-disable react/prop-types */\nimport * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Location } from 'Common/utils';\nimport { useTranslation } from 'Common/hooks';\nimport { Spinner } from 'Common/components/ui';\n\nconst LocationSearch = React.forwardRef(function LocationSearchComponent(\n {\n apiKey,\n children,\n className,\n google,\n name,\n onClearInput,\n onPlaceChange,\n onRequestLocation,\n options = {},\n placeholder,\n type = 'text',\n value,\n ...rest\n },\n inputRef\n) {\n const autoComplete = React.useRef(null);\n const optionsRef = React.useRef(options);\n const defaultInputRef = React.useRef();\n const inputRefRef = React.useRef(inputRef ?? defaultInputRef);\n const locationTip = useTranslation('Dealer.Locator.Search.CurrentLocation.ToolTip');\n const clearTip = useTranslation('Dealer.Locator.Search.ClearInput.ToolTip');\n\n const onChange = React.useCallback(() => {\n const nextPlace = autoComplete.current.getPlace();\n\n if (nextPlace?.geometry && onPlaceChange) {\n onPlaceChange(Location.addressFromPlace(nextPlace));\n }\n }, [onPlaceChange]);\n\n const onChangeRef = React.useRef(onChange);\n\n React.useEffect(() => {\n onChangeRef.current = onChange;\n }, [onChange]);\n\n React.useEffect(() => {});\n\n React.useEffect(() => {\n function handler(e) {\n return onChangeRef.current(e);\n }\n\n if (google && !autoComplete.current) {\n const el = inputRefRef.current.current;\n\n autoComplete.current = new google.maps.places.Autocomplete(el, optionsRef.current);\n autoComplete.current.addListener('place_changed', handler);\n Location.ui.enableEnterKey(el, autoComplete.current);\n return () => google.maps.event.clearInstanceListeners(el);\n }\n }, [google]);\n\n return google ? (\n \n \n
\n {categories?.length > 0 ? (\n
\n ) : null}\n \n
\n {categories?.length > 0 ? (\n \n
\n ) : null}\n {searchState.location ? (\n <>\n \n \n
\n
\n \n
\n \n {searchState.query.CategoriesFilter.length > 0 ? (\n onClearCategories()}\n role={'button'}\n title={lblClear}\n aria-label={lblClear}\n >\n onUpdateCategories(cat)}\n >\n {cat}\n \n ))}\n
\n \n
\n \n \n
\n
\n \n
\n \n {RADIUS_OPTS.map((rad) => (\n onUpdateFilters({ distance: rad })}\n >\n
\n \n \n \n \n
\n \n ) : null}\n \n {searchState.location.fullAddress || searchState.location.address ? (\n
\n \n
\n
\n \n
\n \n
\n - \n {!searchState.response.Locations.length ? (\n
- \n
\n
\n\n \n ) : (\n <>\n {searchState.response.Locations.map((loc) => (\n - \n \n \n ) : null}\n \n )}\n
\n {onRequestLocation ? (\n \n \n \n ) : null}\n
\n ) : (\n \n
\n );\n});\n\nexport default LocationSearch;\n\nLocationSearch.propTypes = {\n options: px.objectOf(px.any),\n onPlaceChange: px.func,\n type: px.string,\n placeholder: px.string,\n className: px.string,\n children: px.node,\n onRequestLocation: px.func,\n name: px.string,\n style: px.objectOf(px.any),\n};\n","import * as React from 'react';\nimport px from 'prop-types';\n\nconst PIN_STYLE = { cursor: 'pointer' };\nconst ICON_STYLE = { tranform: 'translate(-50%, -50%)', fontSize: '37px' };\n\nexport default function LocationPin({\n children,\n onClick,\n location,\n alt = false,\n color = 'var(--dark)',\n name = location.name,\n}) {\n const onKeyPress = React.useCallback((e) => (e.key === 'Enter' && onClick ? onClick() : null), [onClick]);\n const style = React.useMemo(() => ({ ...PIN_STYLE, color }), [color]);\n\n return (\n \n {children}\n \n \n
\n \n );\n}\n\nLocationPin.propTypes = {\n children: px.node,\n onClick: px.func,\n alt: px.bool,\n name: px.string,\n color: px.string,\n location: px.shape({ name: px.string }),\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\n\nexport default function ClusterPin({ className, location, onClick }) {\n const size = React.useMemo(\n () => (location.point_count > 50 ? 'large' : location.point_count > 25 ? 'medium' : 'small'),\n [location.point_count]\n );\n\n const onKeyPress = React.useCallback((e) => (e.key === 'Enter' ? onClick() : null), [onClick]);\n\n return (\n {location.point_count}
\n \n );\n}\n\nClusterPin.propTypes = {\n className: px.string,\n onClick: px.func,\n location: px.shape({\n point_count: px.number,\n cluster_id: px.oneOfType([px.string, px.number]),\n lat: px.number,\n lng: px.number,\n }),\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useTranslation } from 'Common/hooks';\nimport { Translation } from 'Common/components/localization';\nimport { stopPropagation } from './helpers';\n\nexport const infoStyle = {\n main: {\n fontSize: '1.2em',\n whiteSpace: 'nowrap',\n backgroundColor: '#000',\n color: '#fff',\n padding: '1em',\n },\n close: {\n position: 'absolute',\n background: 'transparent',\n border: 'none',\n top: '.1em',\n right: '.1em',\n cursor: 'pointer',\n color: '#fff',\n fontSize: '1em',\n },\n};\n\nfunction stopProp(e) {\n e.stopPropagation();\n}\n\n/* eslint-disable react/prop-types */\nexport const InfoContainer = React.forwardRef(function Info(\n { className, children, show, style: { width = '175px', height = 'auto', backgroundColor = '#fff', ...rest } = {} },\n ref\n) {\n const style = React.useMemo(\n () => ({\n width,\n height,\n backgroundColor,\n cursor: 'default',\n fontSize: '1em',\n overflow: 'hidden',\n transform: 'translate(-50%, -100%',\n position: 'absolute',\n marginTop: '-20px',\n zIndex: 4,\n ...rest,\n }),\n [width, rest, height, backgroundColor]\n );\n\n return show ? (\n \n {children}\n
\n ) : null;\n});\n\n// Info.propTypes = {\n// children: px.node,\n// show: px.bool,\n// style: px.objectOf(px.any),\n// className: px.string,\n// };\n/* eslint-enable react/prop-types */\n\nexport default function MapInfo({ show, location, onClose }) {\n const lblClose = useTranslation('Dealer.Locator.MapInfo.Close.Label');\n\n return (\n \n
\n {location.name}
\n {location.address1}
\n {location.address2}
\n {location.phone}
\n {location.website ? (\n \n \n {location.website.replace(/\\?.*$/, '')}\n \n
\n ) : null}\n \n \n {' '}\n
\n \n \n
\n );\n}\n\nStoreLocator.propTypes = {\n brandName: px.string,\n apiKey: px.string,\n defaultLat: px.oneOfType([px.number, px.string]),\n defaultLng: px.oneOfType([px.number, px.string]),\n defaultAddr: px.string,\n disclaimerText: px.string,\n // locationContent: px.any,\n language: px.string,\n unit: px.oneOf([UNIT.MILE, UNIT.KILOMETER]),\n categories: px.arrayOf(px.string),\n initialFilters: px.shape({ distance: px.number }),\n};\n","/* eslint-disable react/prop-types */\nimport * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Location, Url } from 'Common/utils';\nimport { useTranslation, useScript } from 'Common/hooks';\nimport { Spinner } from 'Common/components/ui';\nimport { logger } from 'Common/core';\n\nconst LocationSearch = React.forwardRef(function LocationSearchComponent(\n {\n className,\n options = {},\n type = 'text',\n placeholder,\n name,\n apiKey,\n region = 'us',\n storeLocatorPageUrl,\n ...rest\n },\n inputRef\n) {\n const autoComplete = React.useRef(null);\n const optionsRef = React.useRef(options);\n const defaultInputRef = React.useRef();\n const inputRefRef = React.useRef(inputRef ?? defaultInputRef);\n const locationTip = useTranslation('Dealer.Locator.Search.CurrentLocation.ToolTip');\n const clearTip = useTranslation('Dealer.Locator.Search.ClearInput.ToolTip');\n const [error, setError] = React.useState(null);\n\n const [value, setValue] = React.useState(undefined);\n const submitLbl = useTranslation('Footer.Store.Locator.SubmitButton.Label');\n\n const onSubmit = React.useCallback(\n (location) => {\n const url = new Url(storeLocatorPageUrl);\n\n if (location?.lat) {\n url.addParam('lat', location.lat)\n .addParam('lng', location.lng)\n .addParam('addr', location.fullAddress ?? location.address);\n }\n window.location = url.href;\n },\n [storeLocatorPageUrl]\n );\n\n const onPlaceChange = React.useCallback(\n (loc) => {\n if (loc) {\n setValue(loc.fullAddress);\n onSubmit(loc);\n } else {\n setValue('');\n }\n },\n [onSubmit]\n );\n\n const onClearInput = React.useCallback(() => setValue(''), []);\n\n const google = useScript(\n apiKey ? `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places®ion=${region}` : null,\n {\n onLoad: async (lib) => {\n const maps = await lib.maps.importLibrary('maps');\n\n lib.maps = { ...lib.maps, ...maps };\n return lib;\n },\n globalNamespace: 'google',\n delay: 2000,\n destroyOnDismount: false,\n }\n );\n\n const onChange = React.useCallback(() => {\n const nextPlace = autoComplete.current.getPlace();\n\n if (nextPlace?.geometry && onPlaceChange) {\n onPlaceChange(Location.addressFromPlace(nextPlace));\n }\n }, [onPlaceChange]);\n\n const onChangeRef = React.useRef(onChange);\n\n const onChangeSearch = React.useCallback((e) => {\n setValue(e.target.value);\n }, [setValue])\n\n\n const requestLocation = React.useCallback(async () => {\n if (window.navigator?.geolocation) {\n setError(false);\n \n window.navigator.geolocation.getCurrentPosition(\n async (pos) => {\n const { latitude, longitude } = pos.coords;\n\n const url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=${apiKey}`;\n\n try {\n const response = await fetch(url);\n\n if (!response.ok) {\n setError(\"Could not find your location\")\n }\n const data = await response.json();\n \n const currentLocation = data?.plus_code?.compound_code?.split(' ').slice(1, -1).join(' ').slice(0,-1);\n \n setValue(currentLocation);\n } catch (err) {\n logger.warn('Location services failed', err);\n }\n\n },\n );\n };\n }, [setValue, apiKey]);\n\n React.useEffect(() => {\n onChangeRef.current = onChange;\n }, [onChange]);\n\n React.useEffect(() => {});\n\n React.useEffect(() => {\n function handler(e) {\n return onChangeRef.current(e);\n }\n\n if (google && !autoComplete.current) {\n const el = inputRefRef.current.current;\n\n autoComplete.current = new google.maps.places.Autocomplete(el, optionsRef.current);\n autoComplete.current.addListener('place_changed', handler);\n Location.ui.enableEnterKey(el, autoComplete.current);\n return () => google.maps.event.clearInstanceListeners(el);\n }\n }, [google]);\n\n return google ? (\n \n \n
\n {viewport.is.mobile ? null : (\n \n \n
\n )}\n {loading ? \n \n \n \n
\n ) : (\n \n \n \n \n
\n \n
\n );\n});\n\nexport default LocationSearch;\n\nLocationSearch.propTypes = {\n options: px.objectOf(px.any),\n type: px.string,\n placeholder: px.string,\n className: px.string,\n name: px.string,\n style: px.objectOf(px.any),\n storeLocatorPageUrl: px.string.isRequired,\n};\n","import React from 'react';\nimport px from 'prop-types';\nimport { FooterLocationSearch as SearchComponent } from 'Common/components/locator';\n\nexport default function FooterLocationSearch({ apiKey, region = 'us', storeLocatorPageUrl }) {\n\n\n return (\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 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 {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
\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","export const SET_USER = 'user:set';\n\nexport const SET_SHIPPING_ADDRESSES = 'user:shipping:set';\nexport const ADD_SHIPPING_ADDRESS = 'user:shipping:add';\nexport const DEL_SHIPPING_ADDRESS = 'user:shipping:del';\nexport const UPDATE_SHIPPING_ADDRESS = 'user:shipping:update';\nexport const SET_DEFAULT_SHIPPING = 'user:shipping:default';\n\nexport const SET_BILLING_ADDRESSES = 'user:billing:set';\nexport const ADD_BILLING_ADDRESS = 'user:billing:add';\nexport const DEL_BILLING_ADDRESS = 'user:billing:del';\nexport const UPDATE_BILLING_ADDRESS = 'user:billing:update';\nexport const SET_DEFAULT_BILLING = 'user:billing:default';\n","export default {\n shipping: [],\n billing: [],\n};\n","import { createSelector } from 'reselect';\n\nexport const getUserState = (state) => state.user;\n\nexport const getBillingAddresses = createSelector(getUserState, (user = {}) => user.billing);\n\nexport const getShippingAddresses = createSelector(getUserState, (user = {}) => user.shipping);\n\nexport const getDefaultBilling = createSelector(getBillingAddresses, (billing = []) =>\n billing.find((address) => address.default)\n);\n\nexport const getDefaultShipping = createSelector(getShippingAddresses, (shipping = []) =>\n shipping.find((address) => address.default)\n);\n\nexport const getBillingById = createSelector(\n (_, id) => id,\n getBillingAddresses,\n (id, billing = []) => billing.find((address) => address.id === id)\n);\n\nexport const getShippingById = createSelector(\n (_, id) => id,\n getShippingAddresses,\n (id, shipping = []) => shipping.find((address) => address.id === id)\n);\n","import * as types from './types';\n\nexport default {\n [types.SET_USER]: (state, user) => ({\n ...state,\n ...user,\n }),\n\n [types.SET_BILLING_ADDRESSES]: (state, billing = []) => ({\n ...state,\n billing,\n }),\n [types.ADD_BILLING_ADDRESS]: (state, address) => ({\n ...state,\n billing: state.billing.concat(address),\n }),\n [types.DEL_BILLING_ADDRESS]: (state, id) => ({\n ...state,\n billing: state.billing.filter((a) => a.id !== id),\n }),\n [types.UPDATE_BILLING_ADDRESS]: (state, address) => ({\n ...state,\n billing: state.billing.map((a) => (a.id === address.id ? { ...a, ...address } : a)),\n }),\n [types.SET_DEFAULT_BILLING]: (state, id) => ({\n ...state,\n billing: state.billing.map((a) => (a.id === id ? { ...a, default: true } : { ...a, default: false })),\n }),\n\n [types.SET_SHIPPING_ADDRESSES]: (state, shipping = []) => ({\n ...state,\n shipping,\n }),\n [types.ADD_SHIPPING_ADDRESS]: (state, address) => ({\n ...state,\n shipping: state.shipping.concat(address),\n }),\n [types.DEL_SHIPPING_ADDRESS]: (state, id) => ({\n ...state,\n shipping: state.shipping.filter((a) => a.id !== id),\n }),\n [types.UPDATE_SHIPPING_ADDRESS]: (state, address) => ({\n ...state,\n shipping: state.shipping.map((a) => (a.id === address.id ? { ...a, ...address } : a)),\n }),\n [types.SET_DEFAULT_SHIPPING]: (state, id) => ({\n ...state,\n shipping: state.shipping.map((a) => (a.id === id ? { ...a, default: true } : { ...a, default: false })),\n }),\n};\n","import { v4 } from 'uuid';\nimport * as types from './types';\nimport * as api from './api';\nimport state from './state';\nimport { getDefaultBilling, getDefaultShipping, getShippingById, getBillingById } from './selectors';\n\nexport function setUserState(user = state) {\n return { type: types.SET_USER, payload: user };\n}\n\nexport function clearUserState() {\n return setUserState();\n}\n\nexport function fetchUser() {\n return async (dispatch) => {\n const user = await api.fetchUser();\n\n if (user) {\n dispatch(setUserState(user));\n }\n };\n}\n\nexport function updateShippingAddress(address) {\n return async (dispatch) => {\n const next = address; // await api.updateShippingAddress(address);\n\n if (next) {\n dispatch({\n type: types.UPDATE_SHIPPING_ADDRESS,\n payload: next,\n });\n }\n };\n}\n\nexport function updateBillingAddress(address) {\n return async (dispatch) => {\n const next = address; // await api.updateBillingAddress(address);\n\n if (next) {\n dispatch({\n type: types.UPDATE_BILLING_ADDRESS,\n payload: next,\n });\n }\n };\n}\n\nexport function setDefaultShipping(id) {\n return (dispatch, getState) => {\n const curState = getState();\n const sel = getShippingById(curState, id);\n const def = sel && (sel.default ? sel : getDefaultShipping(curState));\n\n if (sel && def !== sel) {\n dispatch(updateShippingAddress({ ...sel, default: true }));\n dispatch(updateShippingAddress({ ...def, default: false }));\n }\n };\n}\n\nexport function setDefaultBilling(id) {\n return (dispatch, getState) => {\n const curState = getState();\n const sel = getBillingById(curState, id);\n const def = sel && (sel.default ? sel : getDefaultBilling(curState));\n\n if (sel && def !== sel) {\n dispatch(updateBillingAddress({ ...sel, default: true }));\n dispatch(updateBillingAddress({ ...def, default: false }));\n }\n };\n}\n\nexport function addShippingAddress(data) {\n const address = { ...data, id: v4() };\n\n return async (dispatch) => {\n const next = address; // await api.addShippingAddress(address);\n\n if (next) {\n dispatch({\n type: types.ADD_SHIPPING_ADDRESS,\n payload: next,\n });\n }\n };\n}\n\nexport function addBillingAddress(data) {\n const address = { ...data, id: v4() };\n\n return async (dispatch) => {\n const next = address; // await api.addBillingAddress(address);\n\n if (next) {\n dispatch({\n type: types.ADD_BILLING_ADDRESS,\n payload: next,\n });\n }\n };\n}\n\nexport function removeShippingAddress(id) {\n return async (dispatch) => {\n if (id /* await api.removeShippingAddress(address) */) {\n dispatch({\n type: types.DEL_SHIPPING_ADDRESS,\n payload: id,\n });\n }\n };\n}\n\nexport function removeBillingAddress(id) {\n return async (dispatch) => {\n if (id /* await api.removeBillingAddress(address) */) {\n dispatch({\n type: types.DEL_BILLING_ADDRESS,\n payload: id,\n });\n }\n };\n}\n","import { Api } from 'Common/utils';\n\nexport function fetchUser() {\n return Api.GET('/user');\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 { createStore, applyMiddleware, compose, combineReducers } from 'redux';\nimport thunk from 'redux-thunk';\nimport { ReduxFeature } from 'Common/utils';\nimport * as features from './features';\n\nconst middleware = [thunk];\n\nconst reducer = combineReducers(\n Object.keys(features).reduce(\n (reducerMap, key) => ({\n ...reducerMap,\n [key]: ReduxFeature.getReducer(features[key]),\n }),\n {}\n )\n);\n\nconst composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__\n ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ trace: true, traceLimit: 25 })\n : compose;\n\nexport default createStore(reducer, composeEnhancers(applyMiddleware(...middleware)));\n","import 'Common/setup';\nimport { registerComponent } from 'Common/view';\nimport * as Components from './components';\nimport store from './store';\nimport * as controllers from './controllers';\n\nfunction register(obj) {\n Object.keys(obj).forEach((key) => {\n if (obj[key].propTypes || typeof obj[key] === 'function') {\n registerComponent(key, obj[key], store);\n } else if (typeof obj[key] === 'object') {\n register(obj[key]);\n }\n });\n}\n\nObject.keys(controllers).forEach((key) => {\n window[key] = controllers[key];\n});\n\nregister(Components);\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\tid: moduleId,\n\t\tloaded: false,\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n\t// Flag the module as loaded\n\tmodule.loaded = true;\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","// The chunk loading function for additional chunks\n// Since all referenced chunks are already included\n// in this file, this function is empty here.\n__webpack_require__.e = () => (Promise.resolve());","__webpack_require__.g = (function() {\n\tif (typeof globalThis === 'object') return globalThis;\n\ttry {\n\t\treturn this || new Function('return this')();\n\t} catch (e) {\n\t\tif (typeof window === 'object') return window;\n\t}\n})();","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.nmd = (module) => {\n\tmodule.paths = [];\n\tif (!module.children) module.children = [];\n\treturn module;\n};","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t594: 0\n};\n\n// no chunk on demand loading\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n__webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = (parentChunkLoadingFunction, data) => {\n\tvar [chunkIds, moreModules, runtime] = data;\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some((id) => (installedChunks[id] !== 0))) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\treturn __webpack_require__.O(result);\n}\n\nvar chunkLoadingGlobal = self[\"webpackChunkdooutdoors\"] = self[\"webpackChunkdooutdoors\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));","__webpack_require__.nc = undefined;","// startup\n// Load entry module and return exports\n// This entry module depends on other loaded chunks and execution need to be delayed\nvar __webpack_exports__ = __webpack_require__.O(undefined, [121], () => (__webpack_require__(22967)))\n__webpack_exports__ = __webpack_require__.O(__webpack_exports__);\n"],"names":["deferred","leafPrototypes","getProto","jQuery","onReady","callback","document","readyState","addEventListener","attachEvent","DEDUPE","m","Name","isValid","str","this","getValidationError","hasNumber","hasSymbol","getMultiValidationError","filter","Boolean","test","cleanString","replace","window","logger","console","log","bind","debug","args","NODE_ENV","startsWith","info","warn","msg","length","Error","stack","error","ANTIFORGERY_ELEMENT_NAME","getAntiForgeryToken","elements","getElementsByName","value","undefined","HTTPError","message","code","data","Api","antiForgeryToken","fetch","endpoint","method","query","safe","cache","antiForgery","requestHeaders","headers","credentials","mode","noApi","allowText","body","url","qstr","response","contentType","Message","errors","rest","text","e","FormData","JSON","stringify","URLSearchParams","toString","Object","keys","map","k","Array","isArray","encodeURIComponent","join","get","Number","status","includes","json","trim","GET","params","DELETE","POST","PUT","submitForm","path","formSelector","$","serialize","append","prop","required","noop","ExtForm","showErrors","inputSelector","errorSelector","messages","msgs","input","find","removeClass","addClass","forEach","createValidator","state","validators","btn","fieldErrorClass","buttonAlwaysEnabled","formIsValid","reduce","f","field","val","touched","valid","removeAttr","attr","initForm","uid","allFields","apiEndpoint","apiErrorSelector","onComplete","onError","scrollToTop","clearFields","form","apiError","fields","hidden","s","id","v","getElementById","validator","handleErrors","enableForm","clearValues","setup","el","touch","off","on","event","preventDefault","formData","html","then","success","returnUrl","scrollTo","location","decodeURIComponent","reload","catch","AccountSettingsController","init","fNameId","lNameId","TAGS","PLP","PDP","PRO_QUICK","CONTENT_QUICK","RECOMMENDED_QUICK","RELATED","SEARCH_QUICK","CART","FOOTER","COMPARED_ITEM","LAYERS","ECOMMERCE","EMAILSIGNUP","CHECKOUT_STEPS","CUSTOMER","SHIPPING","PAYMENT","GTM","mapEntityToAddCart","entity","productAttributes","quantity","listValue","totalQty","ecommerce","currency","Price","SalePrice","Currency","Amount","total_quantity","items","item_id","Code","item_name","DisplayName","item_brand","a","AttributeName","Values","item_category","item_category2","item_category3","item_list_name","price","mapComparedItemToAddCart","itemAttributes","CatalogEntity","mapEntityToUpdateCart","variants","sum","product","variant","Attributes","Quantity","mapEntityToRemoveCart","mapEntityToImpressions","products","firstProduct","mapComparedEntityToImpressions","mapEntityToImpClick","mapEntitiesToCheckoutStep","promotions","step","couponValue","promo","DiscountType","coupon","productPromotion","Children","some","child","EntryCode","SavedAmount","discount","getEmailSignup","signupLocation","newslettersignup","mapEntityToFormSubmission","formCategory","formName","updateDataLayer","gtmPayload","layer","strings","dataLayer","push","GoogleTagManagerController","epiForms","ready","isFinalizedSubmission","isSuccess","target","gtmCategoryName","gtmFormName","HeaderController","searchOpener","searchBar","hasClass","trigger","closeSearch","nav","stopPropagation","setTimeout","style","position","top","scrollY","parseInt","confirmationMismatch","tooShort","tooLong","invalidEmail","invalidCC","invalidCCType","invalidCCDate","invalidCCVerification","expiredCCDate","duplicateGiftCard","inactiveGiftCard","expiredGiftCard","invalidGiftCard","noFundsGiftCard","invalidPostalCode","Email","VALIDATION_STRINGS","LoginController","emailId","pwId","apiErrorId","BREAKPOINTS","xs","sm","md","lg","xl","xxl","getBp","width","innerWidth","SIZES","reduceRight","bp","size","matchMedia","matches","createViewport","breakpoint","idx","indexOf","lte","name","is","eq","neq","lt","gt","gte","mobile","handleResize","nextBreakpoint","Viewport","viewport","_viewport","_bpListeners","fn","_resizeListeners","_count","listenerCount","onChange","cb","offChange","i","splice","tearDown","onResize","offResize","removeEventListener","onListItemHref","href","NavigationController","originalActiveLink","numLinks","activeLink","closeNav","setActive","openNav","activator","ctrl","lastMobile","isMobile","dropdown","isTouch","css","Math","ceil","outerHeight","index","NewsletterSignupController","createRequestHandler","formId","errorId","successId","result","errorMessage","successMessage","reset","initMailchimpForm","submitLabel","placeholder","label","btnClass","NotificationSubscriptionController","hideRecaptchaBanner","createElement","innerHTML","head","appendChild","Password","isValidMatch","pw","confirmPw","getMatchError","getMatchValidationError","hasMinLength","hasLowerCase","hasUpperCase","matchField","matchCase","cmp","toLowerCase","combine","PasswordResetController","oldPwId","confPwId","RatingsController","verifyStarRating","wrapperCounter","MutationObserver","mutations","mutation","addedNodes","node","nodeType","Node","ELEMENT_NODE","has","children","reviewQaLabelsContainer","reviewQaLabel","observe","childList","subtree","RegistrationController","confEmailId","pwOnly","useRecaptcha","ReviewsController","lis","check_forNavTabs","prepend","setLoading","isLoading","RewardsController","onPointsRedeeming","xhr","setRequestHeader","onPointsRedemption","redemptionOptionsList","currentPointsText","redemptionOptions","option","Value","Disabled","Selected","repopulateRadioButtons","validateForm","itemScrollSize","ScrollingTimelineController","rootElement","popOutIndex","querySelectorAll","element","yearIndex","numPopouts","dataset","numPopoutSlots","max","yearStartFadeInPosition","yearStartFullShowPosition","yearStartFadeOutPosition","yearStartHidingPosition","querySelector","popoutElement","yearPopoutIndex","popoutWidth","popoutLeftOffset","timelineImageHeight","totalHeight","height","SlideNavigationController","showChildren","closest","hide","show","UserMenuController","container","getImageSource","source","defaultSource","minWidth","Promise","res","image","Image","onerror","onload","src","youtubeThumbnailResolver","selector","retries","backgroundImage","all","from","resolveThumbnail","originalImageUrl","getElementsByClassName","checkValidity","classList","add","offset","animate","scrollTop","accordionScroll","controllers","key","registerComponent","Component","store","renderComponent","props","ReactDOM","Provider","components","each","consumeData","attributes","removeAttribute","component","unwrapComponent","parentElement","remove","Formatter","property","match","out","def","coalesce","exec","getCurrencyFormatter","currencyCode","truncate","options","roundingMode","currencyFormatters","Intl","NumberFormat","getDateFormatter","dateCode","date","dateFormatters","DateTimeFormat","year","month","day","amount","format","formatter","amounts","sort","b","dateFormat","navigator","language","Date","expDateFormat","mixed","to","createMonthYearFormatter","parse","months","years","expDateMask","formatStr","mask","pieces","split","l","masks","ms","p","arr","concat","maxLen","x","fill","slice","y","pop","padStart","parsed","floor","getFullYear","parseLoose","yIndex","mIndex","n1","n2","padEnd","identity","types","RESET","actions","type","ReduxReducer","create","reducerMap","initialState","defaultReducer","reducer","payload","duckData","defineProperty","ReduxFeature","reducers","selectors","extend","feature","getReducer","SET_STATE","UPDATE_STRINGS","selectLanguage","setDefaultLanguage","pathname","setState","nextState","updateStrings","stringMap","getLocalization","localization","getStringMap","createSelector","getTranslationString","_","useTranslation","notFoundValue","useMemo","useSelector","defaultProp","Translation","propTypes","px","TIMEOUT_MS","CLS","warning","UserMessage","className","timestamp","timeout","onClick","dontHideWhenClicked","isGiftMessage","React","showMsg","setShowMsg","msgTimer","lastTimestamp","onHideMessage","clearTimeout","current","onShowMessage","handleClick","changed","div","cx","pointerEvents","role","span","QueryStringUserMessage","removeSearchParams","condition","shouldShow","search","every","param","getTime","useEffect","history","delete","replaceState","createStateLoader","clearState","hasLoaded","StateLoader","dispatchRef","useRef","useDispatch","dispatch","SET_FILTERED_ITEMS","SELECT_FACET","SELECT_MULTI_FACET","UPDATE_FACETS","SET_PAGE_SIZE","SET_PAGE_SORT","CLEAR_FACET_VALUE","searchProducts","searchQuery","getProduct","codes","codeArr","dirty","lastUpdate","filteredItems","pvars","WeakMap","lastLocation","hashListeners","pathListeners","paramListeners","globalListeners","onLocationChange","ref","Url","hashChange","hash","paramChange","pathChange","globalChange","listener","onHashChange","checkStart","base","URL","searchParams","origin","host","set","hashes","addSearch","searchStr","copy","entries","addParam","multi","hasParam","toggleParam","delParam","getParam","list","consumeParam","values","addPath","next","endsWith","setPath","delPath","part","nextPath","setOrigin","clearPath","setHash","clearHash","addHash","hashCount","h","hasHash","delHash","first","setSearch","clearSearch","clearParams","apply","pushState","title","addToRelativeUrl","offHashChange","onPathChange","offPathChange","onParamChange","offParamListeners","isAbsolute","getCatalog","catalog","getFilteredItems","hasChanged","getSearchQuery","SearchQuery","getFilteredFacets","q","Facets","getSelectedAttributes","facets","PropertyName","getPageInfo","page","Page","pageSize","PageSize","total","TotalItems","pageTotal","TotalPages","count","PageItems","nextTo","Items","nextFrom","sortValue","SortOrder","totalPages","getPaginatedPageInfo","getFilteredProducts","setFilteredItems","fetchItems","getState","api","loadMore","skipVariantEnrichment","nextPage","ShouldSkipChildEnrichment","goToPage","pageNumber","skipChildEnrichment","clearFilteredItems","selectFacetValue","facet","SelectorType","updateFacets","updatePageSize","updateSortOrder","sortOrder","clearAllFacetFilters","clearFacetValue","clearFacetFilters","Facet","FacetValues","attribute","Attribute","mapValues","updateValue","facetValue","deselectValue","deselectAllValues","FacetList","found","updateFacet","toggle","deselectFacet","deselectAll","exclusivelySelect","exclusivelyToggle","updateFilteredItems","withFilteredItems","now","updateSearchQuery","withSearchQuery","FacetValueShape","Count","FacetValue","FacetShape","SelectorControlType","ProductShape","TypeId","ContentLink","ContentUrl","DefaultImageUrl","Description","DescriptionShort","ProductName","ProductTypeDescription","arrayOf","AttributeShape","CommerceMedia","CommerceMediaShape","StockStatus","ItemStatus","CatagoryMedia","MediaShape","GalleryMedia","Options","Option","Rating","ReviewsCount","Features","ChildRelationQuantity","UPC","ManufacturerSKU","OversizeClass","HazmatCode","HazmatDescription","ShippingNotification","SchemaOrgJson","ProductRecommendationId","ReviewProviderEntityId","AttributeDisplayName","AttributeDefinition","IsSpecification","AssetLink","AssetType","GroupName","Money","ListPrice","IsPriceDiscounted","MinSalePrice","MinListPrice","IsMinPriceDiscounted","MaxSalePrice","MaxListPrice","IsMaxPriceDiscounted","QtySalePrice","MediaType","MediaGroup","FileType","Order","IsDefault","ShowBulkBuy","ShowSpecifications","DescriptionBackground","DetailGridAttributeName","ProductBadge","badges","noTopMargin","marginRight","badgeOverride","Set","MarketingBadges","badge","toUpperCase","Container","enabled","onKeyPress","aria-label","tabIndex","ProductRating","reviewCount","center","slimView","reviewProviderEntityId","writeReviewAnchor","isDiscontinued","leftAlignBreakpoint","forceInline","hideLink","reviewQtySingular","reviewQtyPlural","reviewsLabel","goToReviews","write","reviewButton","reviewSection","accordionContent","accordionButton","scrollIntoView","onWriteReview","onGotoReviews","yotpo","initialized","refreshWidgets","feedback","data-yotpo-product-id","ToolTip","tip","translationParams","disabled","forceShowTip","placement","cursor","v4","translatedTip","tooltip","data-toggle","data-placement","data-original-title","useViewport","useState","setViewport","doFn","CatalogCard","defaultImage","secondaryImage","initId","reducedPrice","rating","onSelectProduct","productUrl","productLinks","marketingBadges","cardImageUrl","setCardImageUrl","cardRef","onImageOver","onImageOut","productLink","productUrlIsForSameSite","anchorTarget","anchorRel","rel","onMouseOver","onMouseOut","aria-labelledby","img","aria-hidden","alt","strike","ul","icon","action","tipDisabled","li","Product","LinkItemShape","isRequired","LinkItem","link","LinkItemType","styled","HorizontalAlign","VerticalAlign","ImageUrl","ImageResize","Default","model","SubTitle","Title","Details","MobileHorizontalAlign","MobileVerticalAlign","ButtonText","ButtonIcon","ButtonIconPosition","TextColor","LinkUrl","vAlign","hAlign","Link","h6","h3","ImageFormat","ButtonIconOrder","Components","CatalogCTA","PageInfoShape","TRANSFORM_PRODUCT_IMAGE_BACKGROUND","USE_RETAILER","ProductImage","getSecondaryImageUrl","media","primaryImageUrl","imageQuery","PRODUCT","medium","getGlamOrDefaultImageUrl","useLoading","setIsLoading","load","useCallback","loading","keyframes","Spin","Spinner","InfiniteScroll","isDoneLoading","onLoad","useLoadIndicator","scrollViewRef","isFetching","handleScrollRef","showLoader","setShowLoader","debounceFetch","debounce","handleScroll","bounding","getBoundingClientRect","bottom","innerHeight","documentElement","clientHeight","useTranslator","translate","ArrowButton","direction","iconClass","ariaLabel","ariaHidden","button","TYPES","YouTube","regex","Other","CONFIG","youtube","iv_load_policy","modestbranding","loop","VideoPlayer","idProp","showControls","previewImage","playing","playsInline","muted","typeClass","cls","t","isPlaying","setIsPlaying","onClickPreview","useLayoutEffect","Player","light","playIcon","controls","config","SvgIcon","sheet","APP","svg","use","xlinkHref","Icon","labelProps","color","rotate","translated","mSheet","mName","iconSheet","iconName","fontSize","transform","aria","MediaConverter","autoPlayVideo","imageResizeSearchQuery","onSelectSpin","onSelectPhoto","renderVideoAsThumb","renderSpinAsThumb","ThumbnailUrl","data-src","DEFAULT_GETTER","useResize","getter","handler","SCROLL_TOLERANCE","pxToNum","n","DefaultCarouselItem","selected","Carousel","keyBy","onSelectItem","Item","scrollToSelected","BtnScrollLeft","BtnScrollRight","selectedIndex","itemProps","animateScroll","dimensions","idRef","firstItem","itemsContainer","innerContainer","mainContainer","itemWidth","itemElementWidth","containerWidth","viewWidth","listWidth","scrollLeft","canScrollLeft","canScrollRight","viewState","setViewState","setSelected","selectedRef","leftLbl","rightLbl","getKey","item","scrollToIndex","pos","min","selectIndex","onClickItem","onItemKeyPress","calcState","childStyle","getComputedStyle","styles","offsetWidth","getPropertyValue","offsetHeight","clientWidth","firstIndex","round","debouncedCalc","debouncedReselect","scrollRight","listOffset","onScroll","onKeyUp","left","data-index","CarouselItem","onClickGalleryImg","showGalleryMobile","thumb","PagingButtons","BtnPrev","BtnNext","onSelect","pageCount","prevLbl","nextLbl","Thumbnail","GAP_PX","PagedCarouselItemRender","PagedCarouselItem","forwardRef","ResizeableComponent","ResizeableItem","observer","ResizeObserver","unobserve","PagedCarousel","pageRanges","gap","maxVisibleItems","containerRef","itemWidths","setSelectedIndex","clickPos","setClickPos","movedBy","setMovedBy","setContainerWidth","isClicked","setDraggableClick","counter","setCounter","widths","ranges","pageWidth","range","j","shift","unshift","rangesTrailingSpace","setWidth","rectWidth","newWidth","imageLeft","startIndex","currentPage","computeContainerWidth","bounds","sliderOffset","onMove","touches","clientX","offsetLeft","onMouseUp","abs","onMouseDown","downPos","onTouchStart","onTouchMove","onMouseMove","onTouchEnd","marginLeft","maxWidth","opacity","stopProp","Modal","onClose","onConfirm","onOpen","confirmLabel","header","footer","closeLabel","showModal","modalSize","noDefaultButtons","noOptimization","lastShow","onCloseRef","noopt","currentTarget","modal","data-dismiss","NOOP","ImageModalContent","content","selectedItem","ImageModalFooter","showCarousel","ImageModal","closeModal","modalContent","setModalContent","setShowModalSlider","modalId","onSelectModalItem","showSlider","STYLE","getSliderSettings","slidesToShow","useImageModal","slidesToScroll","infinite","dots","speed","focusOnSelect","centerMode","prevArrow","nextArrow","swipeToScroll","swipe","draggable","cssEase","useCSS","responsive","settings","ProductGallery","allowImageZoom","desktopBreakpoint","largeCarouselImages","mainMedia","noGallery","onMainImageClick","onSelectImage","useCarousel","useCarouselMobile","useModalCarousel","thumbTranslator","showModalCarousel","setShowModalCarousel","setShowModal","primaryItem","slickSettings","onOpenModal","selectedMedia","onClickGalleryItem","noGalleryMobile","carousel","imageResizeSearchQueryNoWidth","Slider","DropdownSelector","selectedValues","outOfStockToolTip","notAvailableToolTip","disabledMap","definition","singleRowHeight","optionsRef","lblExpand","lblHide","expanded","setExpanded","expandedAll","setExpandedAll","setHidden","optionIsDisabled","isDisabled","updateHeight","scrollHeight","optionsContainer","offsetTop","attributeFilter","disconnect","buttonTitle","hasStock","data-target","aria-expanded","aria-controls","transition","oos","DropdownMenuSelector","lblChoose","additionalLabel","aria-haspopup","Swatch","colorValues","colorValue","uri","backgroundSize","backgroundPosition","hex","backgroundColor","ColorSelector","swatchesRef","setHeight","CheckboxSelector","checked","readOnly","htmlFor","RadioSelector","ButtonSelector","SELECTORS","Comp","Label","FacetColors","c","Hex","AttributeFacetLabel","default","FacetFilter","extraProps","ChildrenSelector","productChildren","selectedChild","skuLabel","StockStatusLabel","onSelectChild","onWindowClick","strong","sku","ProductOptions","clearFacets","currentChildren","disabledFacets","optionLabel","onFacetSelect","productCode","extraFacetProps","showClearFacets","setShowClearFacets","autoSelectFacet","ProductPrice","priceInfo","defaultPrice","noRanges","multiplyByQuantity","skipPriceTransform","useRange","factor","salePrice","useQtySalePrice","quantitySalePrices","quantityOptions","getQuantitySalePrice","QtySalePrices","qtySale","retail","sale","retailStr","saleStr","maxSale","maxRetail","getProductPrice","ChildDetail","currentItemStatus","productTypeId","showDetail","showDivider","statusDisplayName","onUpdate","Cookie","getCookieByName","cname","ca","cookie","charAt","substring","createCookie","expireDate","domain","expires","isNaN","toGMTString","saveCookie","cvalue","overrideCookie","AUTO_UPDATE_QTY_DEBOUNCE_DELAY_MS","CART_LOCATION_HASH","CHECKOUT_PAGE_HASH_CUSTOMER","CHECKOUT_PAGE_HASH_SHIPPING","CHECKOUT_PAGE_HASH_PAYMENT","SET_CUSTOMER_ADDRESSES","DELETE_CUSTOMER_ADDRESS","SET_CUSTOMER_GIFT_CARDS","DELETE_CUSTOMER_GIFT_CARD","ADD_CUSTOMER_GIFT_CARD","SET_CUSTOMER_PAYMENT_METHODS","SET_USER_EMAIL","SET_CUSTOMER_MESSAGE","SET_CUSTOMER_ERROR","SET_CUSTOMER_ORDER_RMARETURNDATA","SET_CUSTOMER_ORDERS","SET_CUSTOMER_NOTIFICATION","SET_CUSTOMER_USER_NOTIFICATION_SUBSCRIPTIONS","REMOVE_CUSTOMER_USER_NOTIFICATION_SUBSCRIPTION","SET_CUSTOMER_MAILCHIMP","EMAIL","email","confirmEmail","signup","MONOFORM","customer","shipments","payment","ADDRESS","firstName","lastName","company","line1","line2","city","zip","country","phone","defaultAddress","isStreetAddress","GIFTCARDS","cardNumber","EMPTY_ADDRESS","SHIPMENT","isGift","giftMessage","shippingMethod","shipmentId","isDigital","shippingMethodDesc","shippingMethodInfo","shippingMethodDisplay","address","paymentId","paymentMethodId","merchantGuid","displayName","paymentType","systemName","cardType","token","cardCvv","cardDate","savePayment","expMonth","expYear","extendedData","isDefault","customerName","EMPTY_PAYMENT","envKey","Spreedly","isReady","spreedly","EnvKey","tokenizePayment","fullName","phoneNumber","payment_method","credit_card","full_name","first_name","last_name","number","verification_value","phone_number","transaction","succeeded","card_type","processorName","DEFAULT_ERROR","callbackUrl","Paymetric","setUrl","XiInterceptUrl","XiInterceptCallbackUrl","xiecommUrl","instance","$XIPlugin","getPaymentToken","getAccessToken","MerchantGuid","Packet","PaymentMethodSystemName","SessionRequestType","xi","accessToken","cleanCardNumber","createJSRequestPacket","addField","createField","rej","ajax","MerchantGUID","AccessToken","phoneUtil","PhoneNumberUtil","getInstance","AddressUtil","getPhoneValidationError","num","isValidNumber","parseAndKeepRawInput","sortAddresses","sortByDefault","a2","a1","b2","b1","sortByName","getName","getContact","getAddressee","matchesLocation","isValidAddressObject","matchesPerson","isEqual","cleanAddressString","cleanCityString","cleanPostalString","MASK","RegExp","OTHER_MASKS","NON_CARD_NUM","AMEX_CVV","OTHER_CVV","ANY_CVV","PAYMENT_KEYS","ADDRESS_KEYS","FILTERED_PAYMENT_KEYS","ISSUER","AMEX","VISA","MASTER","DISCOVER","DINER","DINER_INT","JCB","MAESTRO","GOOGLE","ANDROID","APPLE","AMAZON","PAYPAL","CreditCard","ICON_CLASS","DEFAULT_AVAILABLE","REGEX","MINMAX","SPACING","VALID_CC_RE","LOWER_TO_ISSUER","o","currentProcessor","parseExp","currentYear","maskNumber","DEFAULT_MASK","last","getCardNumberFormat","separator","DEFAULT_SEPARATOR","issuer","getIssuerByNumber","spacing","formatNumber","getIcon","ccNumber","brand","setupPaymentProcessor","processor","tearDownPaymentProcessor","tokenizePaymentForm","originalToken","creditCardType","cvv","creditCard","CustomerName","validateCVV","validateExpiration","curYear","curMonth","getMonth","isValidCVV","isValidExpiration","isValidPayment","Address","paymentToForm","homogenize","defaultShipment","Id","ExpirationMonth","ExpirationYear","CreditCardTypeFriendlyName","SecurityCode","CreditCardNumber","GiftCardNumber","saved","pick","PhoneNumber","billingAddress","shippingAddress","ISSUERS","FORM_FIELDS","cartApiOptonsQuery","expand","update","deleteCurrentCart","createCartLineItems","lineItems","productRecommendationId","String","deleteCartLineItem","createCartOrderPayment","reCaptchaToken","updateCartOrderShipment","useDefault","shippingMethodName","updateCartQty","qtyChanges","promise","resolve","itemCode","qty","currentCode","updateCartLineItems","splitCart","addressChanges","orderFormId","getCountryRegionSelectionData","siteId","countryCode","verifyAddress","updateShipmentAddress","updateShipmentDetail","updateShipmentDetails","addPayment","paymentForm","getCreditCardPaymentFromForm","placeOrder","cartId","orderGroupId","updateOrderEmail","updateCartOrderEmail","validateApplePay","validationUrl","marketId","MarketId","ValidationUrl","saveCustomerAddress","IsShipping","deleteCustomerAddress","deleteCustomerGiftCard","saveCustomerGiftCard","card","deleteCustomerPaymentMethod","addCustomerPaymentMethod","setDefaultCustomerPaymentMethod","queryOrder","orderNumber","OrderEmail","OrderNumber","submitReturnRequest","returnRequest","unsubscribeNotificationSubscriptionById","subscribe","NotificationId","NotificationType","mailchimpSubscribe","listId","birthMonth","birthDate","zipCode","tags","birthday","SubscriptionEmail","ListId","FirstName","LastName","Birthday","ZipCode","MetaTags","ProviderKey","getCustomerState","getCustomerAddressesState","addresses","getCustomerGiftCardsState","giftCards","getCustomerPaymentMethodsState","paymentMethods","getUserEmail","userEmail","getCustomerError","customerError","getCustomerMessage","customerMessage","getCustomerMessageTimestamp","ts","getTranslatedCustomerMessage","getHeaderCustomerMessage","getTranslatedHeaderCustomerMessage","getGiftCardCustomerMessage","isLoggedIn","getCustomerAddresses","getAddressesWithNoDefaults","getCustomerGiftCards","getCustomerPaymentMethods","getCustomerOrders","customerOrders","getCustomerRmaRequestSuccess","rmaRequestSuccess","getCustomerRmaRequestReference","rmaRequestReference","getCustomerRmaRequestMessage","rmaRequestMessage","getCustomerOrderHistory","orders","getCustomerOrderLastUpdate","getOrderDetail","getOrderTableData","order","Created","Total","omsOrderReference","OMSOrderReference","trackingNumbers","Forms","acc","Shipments","shipAcc","shipment","ShipmentTrackingNumbers","TrackingNumber","TrackingUrl","getOrderPagination","orderCount","orderTotal","orderPage","getNotificationSubscriptionItems","userNotificationSubscriptions","getNotifications","notifications","getMailchimpStatus","mailchimp","setUserEmail","setCustomerOrders","setCustomerOrder","clearCustomerOrders","setCustomerMessage","setCustomerError","clearCustomerError","setCustomerAddresses","fetchAddresses","customerAddresses","handleError","defaultMessage","removeCustomerAddress","setCustomerGiftCards","addCustomerGiftCard","fetchGiftCards","giftCard","removeCustomerGiftCard","setCustomerPaymentMethods","cards","fetchPaymentMethods","removeCustomerPaymentMethod","paymentMethod","PaymentType","SystemName","creditCards","fetchOrdersByEmail","orderPagination","queryOrderCount","queryOrderIndex","OrderHistory","Orders","orderEmail","orderDetail","setUserNotificationSubscriptions","getNotificationSubscriptionList","UserNotificationSubscriptions","Success","subscribteToNotification","subscribeToMailchimp","SET_DETAILS","UPDATE_DETAILS","SET_SELECTED_MEDIA","SELECT_CHILD","SET_QUANTITY","SET_CHILD","DESELECT_ALL_FACET_VALUES","SET_SELECTED_CODE","ADD_PRODUCT_ENTRIES","UPDATE_PRODUCT_ENTRIES_QUANTITY","SELECT_CHILD_ATTRIBUTES","trackProductQuickviewClick","fetchProductDetails","fetchProductsByNode","nodeId","fetchRelatedProducts","fetchSpareParts","details","selectedChildren","selectedCode","byId","getItem","getItemDetails","getSelectedCode","getProductStore","getProductById","arg","getSelectedProduct","getQuantity","getRelatedProducts","CatalogRelatedProducts","getEpiRecommedationAlternativeProducts","EpiRecommendationAlternativeProducts","getEpiRecommedationCrossSellProducts","EpiRecommendationCrossSellProducts","getProductsByNode","ProductsByNode","getSpareParts","SpareParts","getRootSelectedChildren","getRootSelectedChild","getProductUrl","getFacets","getFacetValueStockStatuses","mapping","getFeatures","getOptions","controlType","getChildren","getInStockChildren","getSelectedChild","getCurrentChildren","submatch","getValidFacetCombinations","combination","facetName","getFilteredFacetCombinations","validCombinations","currentAttributes","getDisabledFacetValues","filteredCombinations","facetValueStockStatus","obj","getAttribute","valueObj","getCurrentFacets","getMedia","getProductMedia","getProductDocuments","CatalogMedia","getProductMainMedia","productState","currentMedia","getMainMedia","getCurrentPriceInfo","getChildByCode","getChildTitle","getSingleActiveChild","getCurrentItemStatus","getCurrentHazmat","description","getCurrentMarketingBadges","getCurrentOversize","class","OversizeDescription","getProductDefinitions","isNonLineItemValidationIssue","issue","IssueName","RefType","getCartState","getLastUpdate","getOrderConfig","isCartUpdating","isPerformingCartOperation","hasCart","getCart","Cart","getTotalQuantity","cart","TotalItemQuantity","getCartId","OrderId","getUserMessage","userMessage","getUserMessageTimestamp","getHeaderUserMessage","getTranslatedHeaderUserMessage","findValidationIssue","predicates","ValidationIssues","flag","findValidationError","reference","Ref","Issue","getCartValidationError","getLineItemValidationError","getNonLineItemValidationError","getPromoCodeValidationIssue","getNonLineItemNorPaymentValidationError","getOrderLink","OrderLink","getMarketId","getPaymentTokens","paymentTokens","getPaypalPaymentToken","tokens","paypal","getCurrency","getCatalogEntities","getCurrencyCode","getChanges","changes","getQtyChanges","change","getAddressChanges","getCartForms","getRequiredPaymentAmount","forms","RequiredPaymentAmount","getShipments","getOrderEmail","getForm","getPaymentMethods","AvailablePaymentMethods","getCreditCardPaymentMethod","methods","getOrderPayments","Payments","PaymentMethodName","getOrderGiftCards","getBillableOrderPayment","payments","CardType","getFormShipments","getAllShipments","Promotions","ShippingMethodId","getAvailablePaymentTypes","getSavedShippingAddresses","SavedShippingAddresses","getPromoCodes","CouponCodes","getAllLineItems","LineItems","getAllFauxLineItems","FauxLineItems","getCartSummaryData","giftCardPayments","CardNumber","Balance","gcTotal","discounts","promos","existing","PromotionGuid","CouponCode","orderDiscount","OrderTotals","OrderDiscountTotal","subtotal","SubTotal","handling","HandlingTotal","shipping","ShippingTotal","shippingSubTotal","ShippingSubTotal","shippingDiscount","ShippingDiscountTotal","tax","TaxTotal","giftCardDiscount","totalSansGiftCards","getCartSummaryFooterData","orderId","getEntityByCode","getFormShipmentById","ShipmentId","getLineItems","getFauxLineItems","getAllItemQty","getAllSubtotal","getLineItemById","_1","LineItemId","getLineItemByCode","getFauxLineItemByCode","getLineItemQtyByCode","getRemoveCartGTMPayloadByCode","gtmUtil","getRemoveCartFauxGTMPayloadByCode","getUpdateCartGTMPayload","getRemoveCartGTMPayload","getShipmentsByLineItems","ShippingAddress","getAddressByShipment","getShipmentAddressByLineItem","setItemDetails","selectSelectedMedia","setSelectedCode","selectQuantity","clearItemDetails","updateProductEntriesQuantity","updates","deselectAllFacetValues","selectFacet","setChild","selectChild","selectChildAttributes","UPDATE_ITEM_QTY","UPDATE_ITEM_ADDRESS","ADD_SAVE_ADDRESS","CLEAR_CHANGES","SET_USER_MESSAGE","ADD_VALIDATION_ISSUE","CLEAR_VALIDATION_ISSUE","SET_SHIPPING_METHODS","SET_IS_UPDATING","UPDATE_CONFIG","OPEN_CART_ON_ADD_ITEM","SUCCESS_NOTIFICATION_ON_ADD_ITEM","SCROLL_TOP_ON_ADD_ITEM","USE_TOOLTIP_ON_ADD_ITEM_TO_WISH_LIST","SCROLL_TO_TOP","setCartUpdatingMutex","addValidationIssue","clearValidationIssue","setUserMessage","loadCart","cartApiOptions","nextCart","clearChanges","clearCart","stateUpdater","apiCallback","messageForError","showGlobalError","addItems","codeToQtyMap","rerouteLink","openCartOnSuccessOverride","openCartOnSuccess","showSuccessMessageOverride","showSuccessMessage","scrollToTopOverride","statusCallback","issues","addItem","removeItem","faux","updateItem","nextItemCode","nextQuantity","nextCode","updateCart","splitShipments","shipmentQuantity","qc","updateItemQty","nextQty","originalQty","updateItemAddress","addSavedAddress","incItemQty","mod","decItemQty","updateShipment","shipmentForm","fetchShippingMethods","regionCode","CountryCode","RegionCode","removePayment","deleteCartOrderPayment","isShipping","addPromotion","couponCode","removePromotion","orderConfirmationPage","done","orderUpdateQueue","apiFn","getVerifiedAddresses","loadInPlaceAddToCartConfig","openCartOnAdd","SavedPaymentInfo","AvailableShippingMethods","updatedChanges","itemMatch","existingShipment","updateAddressChanges","useOrderRequestState","NumberInput","noDecimal","forceStep","pattern","onBlur","useStepBtns","inputValue","setInputValue","subLbl","addLbl","inRange","inStep","clampRange","clampStep","onInputChange","onStep","onInputBlur","buttons","inputMode","DEFAULT_TIMEOUT_MS","AlertTip","removeFromDomWhenInactive","clickDismiss","level","showTip","setShowTip","tipTimer","timeoutRef","closeTip","active","isDisplayOnly","productInfo","ProductInput","addToCartLabel","allowZeroQty","bibProdInput","checkoutPageLink","gtmListValue","hideWhenOOS","isUserAuthenticated","itemCodes","minQuantity","noBuyNow","noSidePadding","numInputButtons","onAddToCart","onQuantityChange","paddingValue","reverseButtonOrder","skipGtmImpression","statusTooltip","addToCartToolTip","buyNowToolTip","cartIsUpdating","addToCartTip","setAddToCartTip","ProductInfo","buyNowTip","setBuyNowTip","buttonsDisabled","alert","buyNow","successMsg","validationIssues","setter","getGtmPayload","getImpressionPayload","impressionPayload","onBuyNow","onAddItem","btnsColSize","right","flexDirection","PureTip","flex","Grid","headerProps","Header","getHeaderProps","columnWidths","toArray","Cell","getColumnWidths","templateColumns","gridTemplateColumns","childType","Row","Interrupter","columnIndex","rowIndex","validChildren","interrupter","sticky","colSpan","baseStyle","gridColumn","gridRow","ItemDetailsCard","itemData","itemContent","useItemAttributesTabs","mainImage","setMainImage","selectedImage","ItemDetailsModal","closeClear","ProductChildTable","disableItemDetails","quickViewRef","selectedVariant","setSelectedVariant","isPriceExists","variation","behavior","block","handleVariantSelection","isOpen","SERVICE","facebook","twitter","SocialShare","service","hashtags","propagate","lbl","shareLink","getUrl","ProductShare","Social","Facebook","Twitter","HTMLRender","innerRef","ProductDetails","currentHazmat","currentOversize","includeDescription","isQuickView","itemStatusTooltip","Links","onAddItemToCart","pageId","renderedInQuickView","returnPolicyUrl","useChildTable","useSocialShare","currentChildRef","showSpecificationsLink","SpecificationsLinkLabel","displayOnly","onShowSpecifications","tabContents","contentTabs","tabContent","contentTab","contains","currentChildCode","Loader","fitToContainer","noOverlay","Overlay","RelatedProducts","relatedProducts","gtmImpression","showProducts","ProductTitle","productTitle","useLargeProductTitle","targetRef","setDimensions","resizeObserver","observedEntries","overflow","ProductView","galleryProps","detailsProps","currentMarketingBadges","Gallery","Related","relatedProductProps","showRelatedEntries","Block","w","mt","marginTop","FakeQuickviewItem","CatalogQuickView","showRelatedProducts","productProps","onSetProduct","onClearProduct","productData","variantData","quickviewRef","lblClose","scrollToRef","FakeQuickViewItem","CatalogGrid","Card","CTA","ctaModel","ctaModelMobile","ctaType","ctaTypeMobile","loadArgs","loadOnArgsChange","onAddItemToCompare","onLoadMore","openQuickOnSelectProduct","pageInfo","QuickView","storeLocatorLink","useCompare","quick","setQuick","quickViewCardRef","curatedProducts","paginationData","openQuick","clearQuick","cardProps","PrimaryMarketingTag","quickIdx","rowSize","ctaShown","findIndex","callLoad","useBEM","classNames","blocks","em","modifier","productVariant","ProductListTable","NotifyMe","notifyProps","onRowClick","quantities","showVariantImages","variantMedia","setVariantMedia","shouldShowNotifyColumn","shouldShowQuantityColumn","shouldShowActionsColumn","cols","buildColsFromAttributes","onClickView","vM","d","ContentId","ProductVariant","selectPrimary","selectImage","selectPrimaryImage","parseUrl","useProductDetails","opts","useFacets","includeDisplayOnlyFacets","mainMediaImage","stockStatus","ProductDetailCard","collapseDisplayOnlyFacets","expandable","hideInput","inputStatusTooltip","showItemData","showTitle","startExpanded","toggleLbl","canHideAttr","filteredAttr","displayOnlyRef","nameEl","showDisplayOnly","setShowDisplayOnly","toggleExpanded","collapse","toggleDisplayOnly","table","tbody","tr","th","td","ProductListView","googleRecaptchaV3Sitekey","hideTitle","onAddMultipleToCart","overrideIsMobile","singleFacet","stretchBody","qtyMap","setQtyMap","onQtyChange","qtyChanger","onTableAddToCart","_2","Quickview","useAction","preAction","postAction","preActionRef","postActionRef","actionRef","updateProduct","withProduct","updateDetails","u","F","CatalogAltQuickview","lastSelected","currentProduct","selectedProduct","GridCard","primary","h4","noFacets","DEFAULT_CARD_SIZE","CatalogDetailGrid","colSize","viewPort","maxRowSize","data-row-size","Script","globalNamespace","listeners","script","namespace","_value","ns","forceReload","async","onBefore","destroy","onreadystatechange","removeChild","listen","scripts","release","andRemove","ensureLib","globalName","start","setInterval","clearInterval","useScript","onCleanup","destroyOnDismount","delay","loaded","setLoaded","lib","ErrorDisplay","fieldId","useFieldState","small","Field","Input","hideError","labelInline","labelLast","placeholderParams","validate","inlineChildren","forceValue","validateOnBlur","validateOnValueChange","formatterDependsOnState","formatterDependencies","disabledConditionEval","disabledConditionWhen","onInput","collapseError","hookAutofill","trimOnInput","transformDelay","lastValue","formApi","useFormApi","translatedPlaceholder","onValidate","formatObj","formatDeps","formValue","useConditional","evaluate","evaluateWhen","inputFn","setValue","setError","getFormState","setTouched","setInitialValue","invalid","validateOn","disabledProp","labelFirst","updatedPaymentMethod","filteredPaymentMethods","rmaReturnData","NotificationUniqueId","Popup","PortalPopup","anchorRef","showPopup","popupRef","setY","setX","containerStyle","reposition","elRect","bodyRect","popupRect","screen","alignRight","alignLeft","repositionRef","createPortal","RecaptchaDetails","NotificationSubscription","buttonRef","setShowPopup","setEmail","setResponse","closeLbl","emailRef","shouldValidate","grecaptcha","validateUser","execute","onNotifyMe","evt","r","whiteSpace","Form","formApiRef","onSubmit","fieldset","CatalogExploreCard","displayImgFirst","CatalogExplore","Explore","onOpenQuickview","onCloseQuickview","secondary","viewDetails","CatalogExploreGrid","setHide","quickview","setQuickview","quickviewIdx","calculateQuickviewIndex","closeQuickview","FilterDropdown","anchor","autoClose","ctrlType","hasFacetsDropdown","includeCloseIcon","clickedRef","btnType","toggleFilter","Selector","leftIcon","rightIcon","tooltipProps","catalogReducer","Catalog","MobileFiltersMenu","onApplyFilters","open","onCancel","closeOnApply","fitToParent","categoryIcon","selectedFacet","setSelectedFacet","tempState","setTempState","onSelectFacet","onSelectFacetValue","CatalogTypes","onApply","listItems","h2","properties","PAGE_OPTIONS","SORT_OPTIONS","Text","MobileCatalogFilters","hidePagination","hideSort","onUpdateFacets","onUpdatePageSize","onUpdateSort","paginationOptions","sortOptions","mobileSortBy","showMenu","setShowMenu","pageOpts","convertPaginationOptions","sortOpts","convertSortOptions","curPageOpt","drawerTypes","float","relative","Dropdown","toggleOpen","selectedValue","drawerType","drawerId","firstChild","CatalogFilters","onUpdateFacet","showingCtaBlock","setIsOpen","isFacetOpen","setIsFacetOpen","setHasFacetsDropdown","toggleFacetOpen","sortBy","showingItems","section","useMobileFilters","onFetchItems","MobileFilters","dekstopBreakpoint","Filters","SET_COMPARE_ITEMS","COMPARE_START_LOAD","COMPARE_ERROR","COMPARE_SET_ALERT","addToCompare","removeFromCompareList","setCompareList","setAlert","translationKey","startLoading","triggerError","addToCompareList","getCompareList","clearCompareList","getCompareState","compare","getCompareItems","getCompareItemsDetails","compareState","activeChild","getSpecDefinitions","flatMap","attrName","newAttr","existingAttr","attr1","attr2","getLoading","getAlert","getError","isError","DetailsLinks","retailSearch","onClickCompare","orderLastUpdate","onlyProductMedia","productMedia","productMainMedia","fetched","ProductDetailsComponent","ProductGalleryComponent","RelatedProductsComponent","prodcutId","PartialDetailsLinks","sourceSiteLabel","targetSiteLabel","linkDomain","linkTarget","linkRel","getImageStructureClass","structKey","imgCol","getDetailsStructureClass","detailsCol","CatalogListCard","cardIdx","imgPosition","goToProduct","CatalogList","List","CatalogQuery","onClearFacetValue","onClearAll","showPageInfo","onClearFilter","Query","stacked","imgHeight","imgWidth","hideRelatedProducts","CatalogSimpleGrid","CatalogSort","startExpandedRef","updateSort","Sort","OrderConfigLoader","inPlaceAddToCart","Content","hideImage","descriptionImageUrl","ProductDescriptionTab","labelledBy","unwrap","descriptionBackgroundUrl","VideoPlayerModal","videoProps","clickOutside","VideoGallery","videos","arrowColor","cardsToShow","emphasizeCenter","shouldOverhang","videoData","setVideoData","videosCount","centerPadding","arrows","autoplay","containerClasses","onCloseModal","selectedVideo","shouldWrap","productIsForSale","prod","showDocs","documents","selectedAttributes","totalQuantity","features","specificationsDesktop","columns","specifications","rows","rowData","IsNew","col","columnData","att","gtaPayload","specificationsMobile","colData","currentChild","currentAttribute","attributeRowIndex","row","rowValues","childFacetData","swatch","imageUrl","packageBundleData","childRelationQuantity","childLink","tab","DescriptionImageUrl","tableDataDesktop","tableDataMobile","showAddToCartButton","typeId","showAddToCart","AccordionTable","accordionData","accordionHeaders","listDisplay","collapseLbl","thead","replaceAll","data-parent","isQuantityValid","ProductBuyInBulk","buyInBulkTableData","forceMobile","setRows","updateRow","rowId","quantityLabel","priceLabel","typeIdLabel","colorLabel","onAddCart","dropdownData","ProductFeatures","ProductTable","tableData","column","scope","cell","cellVal","ProductTableMobile","specsTableBreakpoint","ProductSpecifications","productDefinitions","ProductIncludes","facetTableData","columnHeaders","VALID_TAB_CONTENT","Includes","Specifications","BuyInBulk","ContentSwitch","BuyInBulkTab","DescriptionTab","FeaturesTab","IncludesTab","SpecificationsTab","TAB_NAME_LOCALIZATION","ProductAccordion","multiExpansion","startExpandedIndex","useChevron","onToggle","useProductTabContent","Accordion","ProductBadges","ProductDescriptionContent","ProductGridCell","inputReverseButtonOrder","inputNumInputButtons","resetQtyAfterAdd","noQty","defaultQuantity","setQty","addToCart","VAR_CLS","ProductGridView","GridView","useLocalFeature","featureName","nameRef","useReducer","localSelector","localAction","actionResult","ProductPartialView","lastDataRef","updateProductData","ProductLinkQuickview","linkText","showQuick","setShowQuick","setProductData","linkRef","fetchProduct","isFullScreen","onShowPopup","ListView","ProductFilters","initialSlide","dotsClass","ProductRecommendations","RecommendedProductCard","useRelatedEntries","totalRecommended","slickSliderSettings","hideQuickView","onOpenQuick","hasBorder","productReviewProviderEntityId","Recommendations","ProductCard","ProductStock","productTitleLocal","ProductVideo","videoUrl","isIOS","playVideo","setPlayVideo","lblStop","lblPlay","platform","Video","SparePartsDropdown","showId","sortedOptions","localeCompare","prev","dropdownRef","handleClickOutside","SparePartDetailsGrid","sparePartInfo","SparePartsPartial","sparePartTitle","sparePartsData","updateSparePartsData","SparePartsTable","spareParts","selectedPartCode","setSelectedPartCode","numberOfColumns","borderTopLeftRadius","borderTopRightRadius","SparePartsFinder","fetchProducts","partsLoading","categories","desktopImage","mobileImage","selectedCategory","setSelectedCategory","selectedProductOption","setSelectedProductOption","mappedChildren","setMappedChildren","showPlaceholder","setShowPlaceholder","showTable","setShowTable","imageAlt","categoryLbl","productLbl","noProductsLbl","variantLbl","noVariantsLbl","clearSelections","onReset","mapped","br","partsLoadCount","setPartsLoading","startLoader","stopLoader","ProductManuals","doc","StackContent","stackContent","StackContentComponent","ProductTabContent","aria-selected","TabContent","entityCache","useCatalogEntity","childCode","didFetch","didFetchChild","fetchProductInfo","productSelector","variantSelector","variantInfo","lastCodeStr","productMap","productMapRef","catalogEntities","ParentCode","codeStr","CartLineItemShape","SiteId","SiteIdDisplayName","IsPreorder","PreorderAvailabilityDate","IsGift","ParentLineItemId","ReturnLineItems","ReturnQuantity","ReturnableQuantity","OrderDiscountedSalePrice","Tax","ValidationMessage","AdditionalInfo","AddressShape","CartShipmentShape","IsDigitalShipment","OrderShipmentStatus","GiftMessage","ShippingMethodDeliveryInfo","ShippingMethodDescription","ShippingMethodDisplayName","ShippingMethodName","ShippingCost","ShippingTax","CartLineItem","SavedPaymentShape","CardExpirationMonth","CardExpirationYear","CardLastFourDigits","CardSecurityCode","City","CountryName","DaytimePhoneNumber","Line1","Line2","PostalCode","RegionName","Token","PaymentMethodShape","PaymentProvider","SavedPayment","PromotionShape","CartFormShape","PricesIncludeTax","CapturedPaymentTotal","PaymentMethod","Promotion","CartShipment","ShippingMethodShape","DeliveryInfo","EstimatedCost","ShippingMethod","ShipmentShape","useParens","Infinity","hasChange","isEditable","lblAdd","lblEdit","editingItem","lblRemove","getQty","onChangeQty","setEditingItem","onDelete","OOS","fauxQuantity","onEditItem","onDeleteItem","onCancelEdit","MinQuantity","MaxQuantity","originalItemCode","CartTable","emptyLabel","itemCount","fauxItemCount","lineItem","sharedPropTypes","promoError","DefaultPromotions","onRemovePromo","PromoCode","onCodeChanged","lastLength","showError","setShowError","handleRemovePromotion","handleCodeChanged","handleAddPromotion","handle","onKeyDown","ConnectedPromoCode","setCode","filterCards","DefaultCards","onRemoveCard","PaymentMethodId","GiftCard","accountEmail","GiftCards","savedGiftCards","noLoadingIndicator","idStr","availableCards","setAvailableCards","useFormState","showSpinner","setShowSpinner","spinWrapper","clearNumber","onAddCard","getValue","handleKeyDown","onRemovePayment","validation","balance","EditProductView","onUpdateVariant","buttonState","CartQuickView","newItemCode","CartItemList","allowGiftCards","loadedRef","giftcardError","setGiftcardError","isUpdating","onClearChanges","onClearCart","orderGiftCards","hasChanges","onAddPayment","giftCardPayment","pm","useCatalogEntities","onCommitChanges","submitGiftcard","OrderSummaryShape","discountType","IMG_MAP","AmazonPay","GooglePay","ApplePay","PayPal","CartSummary","cartSummaryData","checkoutLink","availablePaymentTypes","paymentTypeRowHeight","paymentTypeCellPadding","paymentsPerRow","bottomSeparator","expandPayments","setExpandPayments","paymentWidth","paymentsHeight","maxHeight","Summary","CartSummaryFooter","cartSummaryFooterData","OrderSummary","MiniCart","iconSize","alertMessage","alertTimestamp","useSvg","cartPage","alertPlacement","lblCart","hideAlert","setHideAlert","DEFAULT_PAGE","opensCart","noFetch","openCart","Mini","useLocationHash","noHashtag","asCommaSeparatedArray","optsRef","array","cartApiOptionsShape","Badge","horizontal","vertical","justify","align","styleProps","justifyContent","alignItems","CartItem","onAdd","onEdit","clickable","itemSalePrice","toFixed","itemSalePriceNum","parseFloat","variantSalePriceNum","ListPriceFormatted","SalePriceFormatted","onImageClick","editable","adjustable","onBackToCustomer","onBackToShipping","recapData","recapDisabled","recapWrapper","digital","gift","padding","margin","FakeCartItem","hideQty","CartListing","includeFaux","includeTotalCount","closeButtonIcon","promoProps","giftCardProps","noHeader","fauxCount","scrollToFaux","childValues","ID","toggleClass","VariantSelector","changeVariant","onChangeVariant","lastChangeVariant","replacementQuantities","setReplacementQuantites","onReplacementQty","InlineCart","darkTheme","setChangeVariant","cartIsEmpty","onBack","loadCount","lastQtyChange","debounceUpdate","expantions","ORDER","qtyHash","CartBadge","contact","canEditContact","verifyUserInput","addressVerification","VerifiedAddresses","useAddressVerification","complete","verifiedAddresses","unverifiedAddress","verification","setVerification","resolved","onConfirmShipment","onCancelVerification","onValidateShipment","skipValidation","verifiedUserInput","_static","omit","AddressVerification","IsStreetAddress","CheckoutSection","collapsed","onToggleCollapse","onSave","canSave","isEditing","hideSaveButton","sectionRef","lblSave","createContext","setValues","getValues","setFormValues","prefix","CheckoutForm","initialStateIsValid","isFormRendered","allowCancelEditing","forceEdit","ReadOnlyContents","allowUpdates","hideSaveActions","onBeginEdit","onEndEdit","readOnlyProps","editState","showNext","lastEditRef","forceEditRef","initialStateRef","pristineRef","setDisabled","setCanSave","localEditState","setIsEditing","setCollapsed","formErrors","setFormErrors","formState","setFormState","onValueChange","updateState","mergewith","mergeState","touchAllFields","ctx","nextInitial","isSaveDisabled","setForceEdit","initialValues","CheckoutFormContext","validateConfirmation","FIELDS","onEditChange","EmailFormType","CheckoutEmail","loggedIn","signinLink","notify","Checkbox","CheckoutSummary","orderSummary","costs","summaryTitle","totalLabel","h5","cost","showSummary","summaryData","shipmentEmail","lName","fName","org","region","methodDisplay","methodDesc","methodInfo","PhoneField","useField","fieldState","fieldApi","render","initialValue","defaultCountry","vs","onNumberChange","nextValue","onNumberBlur","getCode","getCountryISO2","useAddressForm","onCountryChange","onRegionChange","usePlaceholders","countryList","scopeStr","lblCountry","lblRegion","lastCountry","lastRegion","setDefaultCountry","zipValidator","validateZip","regexString","PostalValidationRegex","postalCodeValidator","AddressForm","useDefaultCheck","postalRegex","regionOptions","halfInputsBreakpoint","halfInput","autoComplete","Select","entry","AlternateAddressForm","thirdInput","DigitalAddressForm","stretchEmail","fetching","useCountryList","enabledRef","setCountryList","fetchCountries","getCountrySelectionData","finally","useRegionSelection","getCountry","setCountry","setRegion","getRegion","setRegionOptions","fetchRegions","Regions","AccordionDropdown","hideChevron","defaultExpanded","controlled","onHeaderClick","headerClass","bodyClass","ctrlRef","showRef","controlledRef","openRef","close","Forwarded","SavedAddressSelector","usingSavedAddress","addressId","addressName","addressCityStatePostal","ConnectedAddressForm","waitForMount","regionEnabled","savedAddresses","savedAddressSelectorClassName","savedAddressDefaultExpanded","scopedFields","setPostalRegex","HiddenAddressForm","alternate","connected","DefaultAddressForm","waitFormMount","GIFT_MESSAGE_MAX_LENGTH","onValidateGiftMessage","FormContents","isDigitalDelivery","shippingOptions","savedShippingAddresses","formCtx","resetShippingMethod","clearGiftMessage","leanSavedShippingAddress","shouldShowAddressSelector","addressFirstName","addressLastName","addressLine1","addressCity","addressState","onNewAddress","RadioGroup","Radio","ShippingLabels","CheckoutShipment","lblSubtotal","lblShipping","lblHandling","isPositive","PaymentShape","_name","useExpDateFormat","defaultFormat","ExpDate","forceMask","PaymentBlock","savedPayment","pmt","showDefault","isCC","isGiftCard","paymentMethodName","lastIndexOf","iconCls","paymentNumber","remaining","orderPayment","paymentAmount","useUrlParam","paramName","urlParams","nextUrl","STATE_STARTUP","STATE_UNSUPPORTED_BROWSER","STATE_NO_PAYMENT","STATE_SHOW_BUTTON","STATE_PAYMENT_IN_PROGRESS","STATE_PAYMENT_COMPLETE","SpreedlyApplePayGateway","setToken","merchantIdentifier","ApplePayMerchantIdentifier","merchantName","ApplePayDisplayName","onInitSession","request","supportedNetworks","merchantCapabilities","newSession","ApplePaySession","onvalidatemerchant","apiResp","appleData","validationURL","Status","MerchantSession","completeMerchantValidation","abort","err","onpaymentmethodselected","newTotal","completePaymentMethodSelection","onpaymentauthorized","completePayment","STATUS_SUCCESS","oncancel","begin","initApplePay","canMakePayments","canMakePaymentsWithActiveCard","SpreedlyGooglePayGateway","paymentObject","setPaymentObject","GooglePayButton","environment","TestMode","paymentRequest","apiVersion","apiVersionMinor","allowedPaymentMethods","parameters","allowedAuthMethods","allowedCardNetworks","EnabledCardNetworks","tokenizationSpecification","gateway","gatewayMerchantId","GatewayMerchantId","merchantInfo","merchantId","MerchantId","MerchantName","transactionInfo","totalPriceStatus","totalPriceLabel","totalPrice","onLoadPaymentData","paymentMethodData","tokenizationData","PropTypes","PAGE_LOADING","PAGE_LOGIN","PAGE_WALLET","SCOPE","POPUP","useAmazonPay","Env","SellerId","ClientId","main","widget","orderReference","setOrderReference","readyToOrder","setReadyToOrder","setPage","getAmazonOrderReferenceId","amazon","onAmazonLoginReady","Login","setClientId","logout","btnId","widgetId","OffAmazonPayments","Widgets","Wallet","sellerId","onPaymentSelect","design","designMode","onOrderReferenceCreate","newOrderReference","getErrorCode","getErrorMessage","Button","popup","authorization","authorize","buttonsAdded","hasToken","setFormValue","Sandbox","buttonsLoaded","setButtonsLoaded","orderID","onClear","onApprove","Buttons","onInit","createOrder","purchase_units","createButtons","useCurrentIssuer","useCreditCard","currentIssuer","numberMask","issuerRef","validateCvv","isProcessor","CreditCardIssuers","availableIssuers","EnabledCardTypes","useAvailableIssuers","ExpDateForm","initializeValueIfPristine","masksRef","setMask","maskRef","dateRef","monthRef","yearRef","updateMonthYear","validateDate","nextRef","nextMask","autocomplete","validateNumber","CardForm","hideExtendedFields","nameClass","dateClass","cvvClass","zipClass","Relevant","when","XiInterceptMerchantGuid","validateWhen","maintainCursor","ConnectedCardForm","autosave","useFullBillingAddress","switchId","random","useShippingAddress","lastUseSwitch","usingShippingAddress","notUsingShippingAddress","mapBillingAddress","AlternateCardForm","HiddenPmt","savedPayments","onAddSavedPayment","clrPmt","setPmt","clearPayment","newPayment","selectSavedPayment","CC","PaymentId","paymentOptions","setIsFormRendered","onChangeType","selectedType","selectedPayment","PaymentForm","tokenType","onPaymentChange","CheckoutPayment","orderPayments","lastForce","edit","setEdit","ships","giftCardPaymentMethod","pType","setPType","wrappedUpdate","CheckoutComplete","onPlaceOrder","disableSubmit","orderSummaryData","errorMessages","setErrorMessages","disable","setDisable","canCompleteOrder","orderSubmit","errorRes","Drawer","backdrop","onClickOutside","classes","minHeight","ignoreWarnings","isStreet","AddressVerificationDrawer","allowPostal","shipmentIsValid","additional","emailIsValid","paymentIsValid","requiredPaymentAmount","CheckoutPage","isOrdering","LoaderComponent","CheckoutCompleteSection","CheckoutEmailSection","CheckoutPaymentSection","CheckoutShipmentSection","confirmShipment","onUpdateEmail","onUpdatePayment","pageTitle","cartPageLink","focus","setFocus","editTrack","setEditTrack","isEditingAny","setEditingTracker","onConfirmAddress","endEditWrapper","onUpdateShipment","GA4","onUpdatePmt","cartState","paymentError","determineFocus","h1","CheckoutUserMessage","homePage","setSignup","setIsOrdering","orderPaymentMethods","onUpdateShipmentDetails","addPaymentMethod","removePaymentMethod","updateEmail","deleteCart","DELETE_CART","CheckoutPageView","Tag","NULLISH","predicate","falseIsNull","routes","getCurrentRouteId","getCurrentRoute","getRouteById","route","getAllRoutes","getRouteCount","addRoute","updateRoute","updateRouteData","updateRouteLabel","removeRoute","setActiveRoute","clearActiveRoute","Router","useJqueryScroll","lastHashes","lastActive","indexRouteId","other","initialLoad","topOnInitialLoad","context","useRouter","useContext","partialUpdate","valueRef","DefaultNavItem","HashRouterNav","NavItem","useRoutes","Route","onClosed","onOpened","noDomId","isActive","dataRef","labelRef","isIdActive","registerRoute","useRouteRegistry","EM","setMaxHeight","orderDiscounts","shippingDiscounts","recapHeight","approxHeight","CustomerInformation","signupLink","signoutLink","requestError","physicalCount","locationChangeIndex","CharCounter","alwaysShow","disabledCondition","ShippingInformation","lblShipment","chooseMethod","clearValue","lastFour","CardCVV","PaymentDisplay","SavedPaymentSelector","onNewPayment","onLoadPayment","cardSeparator","showCurrent","usingSavedPayment","CurrentPaymentDisplay","typeProp","usePaymentToken","tokenApi","useFieldApi","parentId","lastToken","initialPayment","STATE","STARTUP","UNSUPPORTED_BROWSER","NO_PAYMENT","SHOW_BUTTON","PAYMENT_IN_PROGRESS","PAYMENT_COMPLETE","useApplePay","usePayPal","useGooglePay","onPaymentAuthorized","auth","CANNOT_RESET_PAYMENT","useAlternateForms","useConnectedForms","selectorClass","formClass","canResetPayment","Providers","loadPayment","noToken","relevanceWhen","paymentTypeFieldName","PaymentLogo","PaymentOption","highlightError","PaymentInformation","clearRequestError","lastBillingSwitch","billingSwitchApi","pristine","lastPaymentType","forceBillingInfo","typePristine","tokenPristine","lastForceBilling","currentSystemName","nextPaymentType","billingSwitch","resetField","_billing","PAGE_ORDER","NO_VERIFY","getCustomerUpdates","matchValue","customerNext","shipmentsNext","getShippingUpdates","getPaymentUpdate","paymentNext","ConfirmModal","onDiscard","MultiPageCheckout","cartEmptyLabel","cartLoaded","cartLoading","handleUpdates","maxHashIndex","redirectWhenEmpty","takeoverPage","lblBack","takeoverPageRef","indexed","confirmModal","setConfirmModal","setRequestError","submitted","skipConfirm","customerForm","shippingForm","defaultMethod","physical","selection","formsReady","recap","submitCustomer","shipmentUpdates","submitShipping","submitPayment","leaveCheckout","gotoHash","onCancelNavigation","onDiscardChanges","onConfirmChanges","HashRouter","validateOnMount","stepsUpdated","cartLoadCount","setCartLoading","summary","queue","prototype","hasOwnProperty","call","getHashIndex","stepsToCall","Checkout","SearchContext","sortPropertyName","canSelectMultiple","results","defaultPageSize","setFacets","ignoreCondition","updatePage","selectSort","updateQuery","clearResults","fromSearchApiResponse","contentItems","searchResults","contentFacets","catalogFacets","responseFacets","appendResults","newContext","ContentItems","MapSearchResult","TextQuery","CatalogItems","MapFacetType","fromProductApiResponse","MapProductData","SearchCategory","Excerpt","shortDescription","ShortDescription","controllable","MapVideoSearchResult","MapProductSearchResult","MapContentSearchResult","catalogEntity","primaryMarketingTag","hasChildren","SearchBar","onTextChange","handleChange","useWindowResize","deps","recompute","TAB_POS","vert","horiz","TabbedContent","tabs","onSelectTab","tabLayout","tabGap","tabScroll","canScroll","setCanScroll","tabsRef","showScrollBtn","selectedContentId","contentId","onArrowClick","dir","indxChange","selectedIdx","newIdx","computeCanScroll","scrollWidth","SearchTabbedFacet","unsortedTabs","ContentSearchResult","showFake","FakeResult","ProductSearchResult","openQuickview","VideoSearchResult","onPlayVideo","ResultComponents","video","SearchResult","SearchPagingSummary","contentSearch","PageInfo","Section","sidebarLeft","sidebarRight","ResultsGrid","expandedResultIndex","expandedChildren","resultsPerRow","setResultsPerRow","rowInsertionIndex","recomputeResultsPerRow","containerEl","firstResultEl","childNodes","resultRect","containerRect","rootFontSize","gapPx","resultWidth","newResultsPerRow","ProductQuickviewContainer","viewType","Filter","ProductQuickview","clearAllFacets","SearchFacetBreadcrumbs","toggleFacetValue","SearchCheckboxFacet","SearchRadioFacet","SearchDropdownFacet","onLoadProductData","facetViews","checkbox","radio","SearchFacet","Panel","Stack","dividers","SearchFiltersMenu","openMenu","setOpenMenu","pendingFacets","setPendingFacets","drawerSize","showClear","toggleMenu","closeMenu","applyFilters","defaultSearch","SearchApi","ProductApi","defaultContext","intialContext","SearchBlock","initialQuery","theme","quickviewMode","onSearch","relatedSearchCount","resultsNotFoundDetails","hasSearchedInitial","setHasSearchedInitial","setQuickviewIdx","quickviewData","tabfacet","filterFacets","searchFacets","tabFacet","selectedTab","setQuery","handleSubmit","searches","recent","updateRecents","updatedFacets","onSearchCatagoryChange","currentCtx","onLoadProduct","onCloseVideoModal","initialSearch","filtersMenu","tabOrder","PanelSection","iconPos","SearchDrawerLinks","linkSections","recentSearches","Href","HeaderSearchResult","initialPageSize","HeaderSearch","initialResults","searchResultsPage","drawerRef","headerSearchRef","showInitialResults","setShowInitialResults","debounceSearch","cancel","newCtx","newSearches","recents","searchDrawerLinks","resultsLink","handleClickOutsideSearch","REQ","MailChimp","mailChimpRequest","urlStr","frame","embeddedForm","innerText","decodeHtml","display","noValidate","submit","defaultRequest","providerKey","metaTags","SubscribeForm","allowMultiple","useIcon","setComplete","lblPlaceholder","submitLbl","req","UserEmailLoader","currentEmail","AdvancedSubscribeForm","bodyColor","bodyText","btnColor","btnTextColor","uuidv4","mailchimpSMSRequest","privacyUrl","smsConsentText","termsUrl","titleColor","titleFontStyle","formRef","frameRef","smsPhone","setSmsPhone","setFirstName","setLastName","birthdayMonth","setBirthdayMonth","birthdayDay","setBirthdayDay","setZipCode","smsPhoneAck","setSmsPhoneAck","setListId","hiddenFieldName","setHiddenFieldName","submissionErrors","setSubmissionErrors","isValidEmail","hasEmailInputValue","hasPhoneInputValue","hasBirthdayMonthValue","hasBirthdayDayValue","showForm","isValidPhone","parsedNumber","validationErrors","isFormValid","newUrl","idParam","FNAME","LNAME","MMERGE5","CartLineItemUserMessage","CartUserMessage","EditAddressForm","formError","formProps","ACTION","none","CustomerAddressesGrid","onFetchAddresses","onRemoveAddress","initialFetch","working","setWorking","stateCopy","setStateCopy","localError","setLocalError","sortedAddress","addressExists","selectAddress","clearSelection","Organization","CustomerError","onUpdateAddress","NO_ID","CustomerGiftCardsGrid","onFetchGiftCards","onRemoveGiftCard","onSaveGiftCard","defaultError","giftCardCodePlaceholder","isAdding","setIsAdding","giftCardCode","setGiftCardCode","cardIdToDelete","setCardIdToDelete","operationIsInProgress","setOperationInProgress","formMessage","setFormMessage","wrapUpdate","handleClose","handleDelete","onNewCard","FormattedBalance","FormattedIssuedDateUtc","FormattedExpirationDateUtc","paymentName","paymentSort","aName","bName","CustomerPaymentManager","onFetchPayments","onSetDefault","headerLabel","selectedCard","setSelectedCard","lblDefault","isSavingCard","setIsSavingCard","cancelPayment","Mgr","HeaderCustomerMessage","NotificationSubscriptionUnsubscribeButton","notificationSubscriptionUnsubscribe","onNotificationSubscriptionUnsubscribe","selectNotificationSubscription","NotificationSubscriptionListing","notificationSubscriptions","hasNotificationSubscriptions","fetchList","groups","groupBy","subs","NotificationLabel","MOBILE_BREAKPOINT","OrderDetailTable","OrderDetail","rmaPage","subtotalLabel","handlingLabel","shippingLabel","shippingDiscountLabel","orderDiscountTotalLabel","taxLabel","nonGiftCardPayment","tracking","outer","inner","flat","OrderFormId","OrderPaymentInfo","Detail","Notes","ReasonCode","onSearchOrder","onUpdatePage","orderDetailPage","orderTableData","trackingUrlTarget","searchRef","dateColumnName","orderNumColumnName","totalColumnName","trackNumColumnName","actionColumnName","orderDetailButtonText","pageOptions","pages","onPageClick","pageNum","toLocaleDateString","History","OrderLookup","orderEmailPlaceholder","orderEmailLabelText","orderNumberPlaceholder","buttonText","setDirty","emailInput","setEmailInput","orderNumInput","setOrderNumInput","onOrderNumChange","orderNum","onFormSubmit","setOrderHistory","setCustomerOrderHistory","Lookup","RMARequestTable","onReasonSelect","rmaReasonCodes","onQuantityUpdate","returnQtyEvent","lineItemQty","returnedQuantity","returnQuantityLimit","ReasonText","Group","TEXT_AREA_CHAR_LIMIT","RMARequest","customerOrderLastUpdate","onSubmitReturn","customerNoteLbl","showErrorMessage","setShowErrorMessage","returnRequestPrices","setReturnRequestPrices","textAreaCharacterCount","setTextAreaCharacterCount","setReturnRequest","hasReturnableItems","available","availableShipment","availableItem","isValidReturn","newItems","onNotesChange","note","onSelectReason","reason","createdDate","toDateString","textarea","autoCapitalize","spellCheck","maxLength","successContentId","Request","ProductSlider","ProStaffQuickView","MILE","KILOMETER","QUERY_UNIT","UNIT","RADIUS_OPTS","Location","Coord","latitude","longitude","convertRange","lat","lng","long","truncateCoord","coord","decimalPlaces","convertBounds","ne","sw","addressFromCoords","coords","google","throws","latLng","maps","LatLng","Geocoder","geocode","GeocoderStatus","OK","formatted_address","addressFromPlace","place","updatedAddress","geometry","address_components","comp","short_name","searchInput","fullAddress","createClusters","zoom","markers","radius","extent","nodeSize","minZoom","maxZoom","supercluster","points","marker","coordinates","clusters","getClusters","cluster","point_count","cluster_id","getZoom","getClusterExpansionZoom","getDistanceBetweenCoords","getDistance","lat1","lon1","lat2","lon2","radlat1","PI","radlat2","theta","radtheta","dist","sin","cos","acos","convertResponseLocation","Lat","Lng","Extended","address1","address2","Locality","Phone","website","Website","directions","destination","StateCode","Categories","ui","enableEnterKey","originalAddEventListener","originalListener","pacContainer","getAutoCompleteContainer","suggestionsVisible","suggestionSelected","enterPress","which","keyCode","arrowDownEvent","Window","gm_accessors_","placeKey","inputKey","LocationResult","onGotoLocation","showCategories","LocatorList","searchState","onUpdateFilters","onClearLocation","translatedUnit","LocationFilter","DistanceUnits","translatedDistance","Distance","unit","lblClear","pageParams","onClearCategories","queryCategories","onUpdateCategories","category","CategoriesFilter","cat","rad","distance","Locations","loc","LocationSearch","inputRef","apiKey","onClearInput","onPlaceChange","onRequestLocation","defaultInputRef","inputRefRef","locationTip","clearTip","nextPlace","getPlace","onChangeRef","places","Autocomplete","addListener","clearInstanceListeners","PIN_STYLE","ICON_STYLE","tranform","LocationPin","ClusterPin","infoStyle","background","border","InfoContainer","zIndex","MapInfo","marginBottom","fontWeight","pin","strToFixed","dec","googleMapRef","allowResearch","ClusterPinComponent","enableClusters","gestureHandling","MapInfoComponent","mapOptions","mapState","onMapLoaded","onSearchLocation","onTilesRendered","PinComponent","mapApiRef","controllerRef","loadingRef","showResearch","setShowResearch","culledLocations","setCulledLocations","locationHash","googleRef","onMapLoadedRef","onMapChanged","mapProps","changeLocation","coordsOrPlace","onResearch","toggleLocation","openLocation","closeLocation","getViewportWithBounds","newBounds","getNorthEast","getSouthWest","fitBounds","getLocationsViewportPartial","locs","LatLngBounds","getCurrentArea","zoomLevel","nw","se","onGoogleMapApiLoad","currentArea","moveToLocation","locations","Hash","swLat","neLat","swLng","neLng","foundLocations","GoogleMap","onGoogleApiLoaded","bootstrapURLKeys","libraries","yesIWantToUseGoogleMapApiInternals","onTilesLoaded","updateMap","SET_MAP","UPDATE_MAP","SET_SEARCH","UPDATE_SEARCH","SET_QUERY","SET_RESPONSE","Language","Site","Latitude","Longitude","locator","getMapState","getSearchState","getLocations","setMap","defaultState","partialState","updateSearch","queryLocations","queryUpdate","skipFetch","nextQuery","Response","StatusMessage","startLocationSearch","nextSearchPage","previousSearchPage","brandName","StoreLocator","defaultLat","defaultLng","defaultAddr","disclaimerText","initialLat","initialLng","initialAddr","dims","searchPlaceholder","setInnerHeight","initialLoc","importLibrary","onSearchInput","onClearSearchInput","clearLocation","searchLocation","updateFilters","requestLocation","geolocation","getCurrentPosition","gotoLocation","componentDidMount","disclaimer","LocatorMap","initialFilters","storeLocatorPageUrl","onChangeSearch","currentLocation","ok","plus_code","compound_code","FooterLocationSearch","SearchComponent","TranslationLoader","stringsRef","LanguageSelector","dropdownClass","languages","lang","template","isAccountSettings","VideoPlayerButton","modalEl","setModalEl","isVideoPlaying","setVideoPlaying","startVideo","stopVideo","Portal","elementRef","bodyHeight","overflowY","bodyScrollBehavior","scrollBehavior","htmlScrollBehavior","scrollPosition","scroll","scrollX","ShopByDropdown","pageLink","attributeName","textColor","shopByRef","setSelectedValues","sliceIdx","setSliceIndx","StaticLink","ScrollToTopFab","isVisible","setIsVisible","btnLbl","BackgroundVideo","hideOnMobile","mobileSrc","mobileVideoSize","videoAutoPlay","videoSize","videoRef","suspended","setSuspended","setMuted","setPlaying","setKey","playLbl","videoClass","playButtonIconClass","volumeButtonIconClass","volumeButtonClass","autoPlay","toggleVolume","play","videoEl","paused","pause","pauseVideo","setAttribute","preload","SET_USER","ADD_SHIPPING_ADDRESS","DEL_SHIPPING_ADDRESS","UPDATE_SHIPPING_ADDRESS","ADD_BILLING_ADDRESS","DEL_BILLING_ADDRESS","UPDATE_BILLING_ADDRESS","billing","getUserState","user","getBillingAddresses","getShippingAddresses","getDefaultBilling","getDefaultShipping","getBillingById","getShippingById","setUserState","clearUserState","fetchUser","updateShippingAddress","updateBillingAddress","setDefaultShipping","curState","sel","setDefaultBilling","addShippingAddress","addBillingAddress","removeShippingAddress","removeBillingAddress","middleware","thunk","combineReducers","composeEnhancers","__REDUX_DEVTOOLS_EXTENSION_COMPOSE__","trace","traceLimit","compose","createStore","applyMiddleware","register","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","exports","module","__webpack_modules__","O","chunkIds","priority","notFulfilled","fulfilled","__esModule","getPrototypeOf","getOwnPropertyNames","enumerable","g","globalThis","Function","Symbol","toStringTag","nmd","paths","installedChunks","chunkId","webpackJsonpCallback","parentChunkLoadingFunction","moreModules","runtime","chunkLoadingGlobal","self","nc","__webpack_exports__"],"sourceRoot":""}