\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 {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 * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Product } from 'Common/types';\n\nexport default function ProductBadge({ className, badges: badgeOverride, product, noTopMargin, marginRight, style }) {\n const badges = React.useMemo(\n () => badgeOverride || [...new Set(product?.MarketingBadges?.map((badge) => badge.toUpperCase()))],\n [product, badgeOverride]\n );\n\n return badges?.length ? (\n \n
\n ) : null}\n {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 { 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 {badges?.length ? (\n <>\n
\n {reviewProviderEntityId != \"\" ? (\n \n {title}\n
\n \n
\n {price}
\n {reducedPrice ? {reducedPrice}
: null}\n - \n {productLinks.map(({ label, key, icon, action, disabled, tip, tipDisabled = !!tip } = {}) => (\n
- \n
\n
\n
\n );\n}\n\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 const FILTER_COLAPSED_ROW_HEIGHT = 42;\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { v4 } from 'uuid';\nimport { useTranslation } from 'Common/hooks';\n\nexport default function DropdownMenuSelector({\n className,\n options = [],\n selectedValues = [],\n title = '',\n onSelect,\n outOfStockToolTip,\n notAvailableToolTip,\n disabledMap,\n definition = null,\n}) {\n const id = React.useRef(`dropdownmenu_${v4()}`);\n const lblChoose = useTranslation('Commerce.Product.Selector.Choose.Label');\n\n const optionIsDisabled = React.useCallback(\n (value) =>\n disabledMap && (disabledMap === true || disabledMap[value]?.isDisabled || !disabledMap[value]?.isValid),\n [disabledMap]\n );\n\n const onClick = React.useCallback(\n (value) =>\n onSelect\n ? (e) => {\n e.preventDefault();\n onSelect(value);\n }\n : null,\n [onSelect]\n );\n\n const additionalLabel = React.useCallback(\n (value) => {\n if (disabledMap && (disabledMap[value]?.isDisabled || !disabledMap[value]?.isValid))\n return ` (${notAvailableToolTip})`;\n else if (disabledMap && !disabledMap[value]?.hasStock) return ` (${outOfStockToolTip})`;\n\n return '';\n },\n [outOfStockToolTip, notAvailableToolTip, disabledMap]\n );\n\n const buttonTitle = React.useCallback((value) => `${value}${additionalLabel(value)}`, [additionalLabel]);\n\n return (\n \n
\n \n {title}
\n \n\n \n setExpandedAll(!expandedAll)}\n aria-label={expandedAll ? lblHide : lblExpand}\n title={expandedAll ? lblHide : lblExpand}\n >\n \n \n ) : null}\n
\n \n {options.map((option) => (\n \n
\n {hidden ? (\n {option.label}
\n \n ))}\n {definition ? (\n\n
\n ) : null}\n {definition}
\n\n
\n );\n}\n\nDropdownMenuSelector.propTypes = {\n className: px.string,\n title: px.string,\n options: px.arrayOf(px.shape({ label: px.string, value: px.string })),\n selectedValues: px.arrayOf(px.oneOfType([px.string, px.number])),\n outOfStockToolTip: px.string,\n notAvailableToolTip: px.string,\n disabledMap: px.objectOf(px.object),\n onSelect: px.func,\n definition: px.node,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { useViewport, useTranslation } from 'Common/hooks';\nimport $ from 'jquery';\n\nfunction Swatch({ option, colorValues }) {\n const colorValue = React.useMemo(() => colorValues.find((v) => v.value === option.value), [option, colorValues]);\n\n if (colorValue?.uri) {\n return (\n {title}
\n\n \n {selectedValues[0] ? buttonTitle(selectedValues[0]) : lblChoose}\n \n
\n {definition ? (\n \n {options.map((option) => (\n \n {`${option.label}${additionalLabel(option.value)}`}\n \n ))}\n
\n \n
\n ) : null}\n {definition}
\n\n
\n {definition ? (\n \n {title}\n {selectedValues.length === 1 && selectedValues[0] ? selectedValues : null}\n
\n\n \n setExpanded(!expanded)}\n aria-label={expanded ? lblHide : lblExpand}\n title={expanded ? lblHide : lblExpand}\n >\n \n \n ) : null}\n
\n \n {options.map((option) => (\n \n
\n {hidden ? (\n \n
\n ) : null}\n \n );\n}\n\nColorSelector.propTypes = {\n className: px.string,\n options: px.arrayOf(px.shape({ label: px.string, value: px.string })),\n colorValues: px.arrayOf(px.object),\n selectedValues: px.arrayOf(px.oneOfType([px.string, px.number])),\n title: px.string,\n onSelect: px.func,\n outOfStockToolTip: px.string,\n notAvailableToolTip: px.string,\n disabledMap: px.objectOf(px.object),\n definition: px.node,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { v4 } from 'uuid';\nimport { useViewport, useTranslation } from 'Common/hooks';\n\nexport default function CheckboxSelector({\n className,\n options = [],\n selectedValues = [],\n title = '',\n onSelect,\n disabledMap,\n outOfStockToolTip,\n notAvailableToolTip,\n definition = null,\n}) {\n const viewport = useViewport();\n const optionsRef = React.useRef(null);\n const id = React.useRef(`checkbox_${v4()}`);\n const lblExpand = useTranslation('Commerce.Product.Selector.Expand.Label');\n const lblHide = useTranslation('Commerce.Product.Selector.Hide.Label');\n const [expanded, setExpanded] = React.useState(false);\n const [hidden, setHidden] = React.useState(false);\n\n const buttonTitle = React.useCallback(\n (value) => {\n if (disabledMap && (disabledMap[value]?.isDisabled || !disabledMap[value]?.isValid))\n return notAvailableToolTip;\n else if (disabledMap && !disabledMap[value]?.hasStock) return outOfStockToolTip;\n\n return value;\n },\n [outOfStockToolTip, notAvailableToolTip, disabledMap]\n );\n\n const optionIsDisabled = React.useCallback(\n ({ value } = {}) =>\n disabledMap && (disabledMap === true || disabledMap[value]?.isDisabled || !disabledMap[value]?.isValid),\n [disabledMap]\n );\n\n const onClick = React.useCallback((value) => (onSelect ? () => onSelect(value) : null), [onSelect]);\n\n React.useEffect(() => {\n optionsRef.current.style.height = expanded\n ? `${optionsRef.current.children[0]?.getBoundingClientRect()?.height}px`\n : '21px';\n }, [expanded]);\n\n React.useEffect(() => {\n const optionsContainer = optionsRef.current.children[0];\n const children = optionsContainer?.children || [];\n\n for (let i = 0, l = children.length; i < l; i++) {\n if (i > 0 && children[i - 1].offsetTop < children[i].offsetTop) {\n setHidden(true);\n return;\n }\n }\n setHidden(false);\n }, [viewport, options]);\n\n return (\n {definition}
\n\n
\n {hidden ? (\n {title}
\n\n
\n \n {options.map((option) => (\n \n \n \n {option.label}\n \n
\n ))}\n \n
\n ) : null}\n \n );\n}\n\nCheckboxSelector.propTypes = {\n definition: px.node,\n className: px.string,\n options: px.arrayOf(px.shape({ label: px.string, value: px.string })),\n selectedValues: px.arrayOf(px.oneOfType([px.string, px.number])),\n title: px.string,\n onSelect: px.func,\n outOfStockToolTip: px.string,\n notAvailableToolTip: px.string,\n disabledMap: px.objectOf(px.object),\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { v4 } from 'uuid';\nimport { useTranslation, useViewport } from 'Common/hooks';\n\nexport default function RadioSelector({\n className,\n options = [],\n selectedValues = [],\n title = '',\n onSelect,\n outOfStockToolTip,\n notAvailableToolTip,\n disabledMap,\n definition = null,\n}) {\n const viewport = useViewport();\n const optionsRef = React.useRef(null);\n const id = React.useRef(`radio_${v4()}`);\n const lblExpand = useTranslation('Commerce.Product.Selector.Expand.Label');\n const lblHide = useTranslation('Commerce.Product.Selector.Hide.Label');\n const [expanded, setExpanded] = React.useState(false);\n const [hidden, setHidden] = React.useState(false);\n\n const optionIsDisabled = React.useCallback(\n ({ value } = {}) =>\n disabledMap && (disabledMap === true || disabledMap[value]?.isDisabled || !disabledMap[value]?.isValid),\n [disabledMap]\n );\n\n const onClick = React.useCallback((value) => (onSelect ? () => onSelect(value) : null), [onSelect]);\n\n const buttonTitle = React.useCallback(\n (value) => {\n if (disabledMap && (disabledMap[value]?.isDisabled || !disabledMap[value]?.isValid))\n return notAvailableToolTip;\n else if (disabledMap && !disabledMap[value]?.hasStock) return outOfStockToolTip;\n\n return value;\n },\n [outOfStockToolTip, notAvailableToolTip, disabledMap]\n );\n\n React.useEffect(() => {\n optionsRef.current.style.height = expanded\n ? `${optionsRef.current.children[0]?.getBoundingClientRect()?.height}px`\n : '21px';\n }, [expanded]);\n\n React.useEffect(() => {\n const optionsContainer = optionsRef.current?.children[0];\n const children = optionsContainer?.children || [];\n\n for (let i = 0, l = children.length; i < l; i++) {\n if (i > 0 && children[i - 1].offsetTop < children[i].offsetTop) {\n setHidden(true);\n return;\n }\n }\n setHidden(false);\n }, [viewport, options]);\n\n return (\n {definition}
\n\n
\n {hidden ? (\n {title}
\n\n
\n \n {options.map((option) => (\n \n \n \n {option.label}\n \n
\n ))}\n \n
\n ) : null}\n \n );\n}\n\nRadioSelector.propTypes = {\n className: px.string,\n options: px.arrayOf(px.shape({ label: px.string, value: px.string })),\n selectedValues: px.arrayOf(px.oneOfType([px.string, px.number])),\n title: px.string,\n onSelect: px.func,\n outOfStockToolTip: px.string,\n notAvailableToolTip: px.string,\n disabledMap: px.objectOf(px.object),\n definition: px.node,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { v4 } from 'uuid';\n\nexport default function ButtonSelector({\n className,\n options = [],\n selectedValues = [],\n title = '',\n onSelect,\n outOfStockToolTip,\n notAvailableToolTip,\n disabledMap = {},\n definition = null,\n}) {\n const id = React.useRef(`button_${v4()}`);\n\n const optionIsDisabled = React.useCallback(\n ({ value } = {}) =>\n disabledMap && (disabledMap === true || disabledMap[value]?.isDisabled || !disabledMap[value]?.isValid),\n [disabledMap]\n );\n\n const onClick = React.useCallback((value) => (onSelect ? () => onSelect(value) : null), [onSelect]);\n\n const buttonTitle = React.useCallback(\n (value) => {\n if (disabledMap && (disabledMap[value]?.isDisabled || !disabledMap[value]?.isValid))\n return notAvailableToolTip;\n else if (disabledMap && !disabledMap[value]?.hasStock) return outOfStockToolTip;\n\n return value;\n },\n [outOfStockToolTip, notAvailableToolTip, disabledMap]\n );\n\n return (\n {definition}
\n\n
\n );\n}\n\nButtonSelector.propTypes = {\n className: px.string,\n options: px.arrayOf(px.shape({ label: px.string, value: px.string })),\n selectedValues: px.arrayOf(px.oneOfType([px.string, px.number])),\n title: px.string,\n onSelect: px.func,\n outOfStockToolTip: px.string,\n notAvailableToolTip: px.string,\n disabledMap: px.objectOf(px.object),\n definition: px.node,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport * as types from 'Common/types';\nimport DropdownSelector from './DropdownSelector';\nimport DropdownMenuSelector from './DropdownMenuSelector';\nimport ColorSelector from './ColorSelector';\nimport CheckboxSelector from './CheckboxSelector';\nimport RadioSelector from './RadioSelector';\nimport ButtonSelector from './ButtonSelector';\nimport { useTranslation } from 'Common/hooks';\n\nexport const SELECTORS = {\n 'color-1-single': {\n Comp: ColorSelector,\n props: (facet, onChange, outOfStockToolTip, notAvailableToolTip) => ({\n onSelect: onChange,\n options: facet.FacetValues.map((v) => ({ label: v.Label, value: v.Value })),\n colorValues: facet.FacetColors.map((c) => ({ value: c.Name, uri: c.Swatch, hex: c.Hex })),\n selectedValues: facet.FacetValues.filter((v) => v.Selected).map((v) => v.Value),\n title: facet.AttributeFacetLabel || facet.DisplayName || facet.AttributeDisplayName || facet.Attribute,\n definition: facet.AttributeDefinition,\n notAvailableToolTip: notAvailableToolTip,\n outOfStockToolTip: outOfStockToolTip,\n }),\n },\n 'cbl-single': {\n Comp: CheckboxSelector,\n props: (facet, onChange, outOfStockToolTip, notAvailableToolTip) => ({\n onSelect: onChange,\n options: facet.FacetValues.map((v) => ({ label: v.Label, value: v.Value })),\n selectedValues: facet.FacetValues.filter((v) => v.Selected).map((v) => v.Value),\n title: facet.AttributeFacetLabel || facet.DisplayName || facet.AttributeDisplayName || facet.Attribute,\n definition: facet.AttributeDefinition,\n outOfStockToolTip: outOfStockToolTip,\n notAvailableToolTip: notAvailableToolTip,\n }),\n },\n 'rbl-single': {\n Comp: RadioSelector,\n props: (facet, onChange, outOfStockToolTip, notAvailableToolTip) => ({\n onSelect: onChange,\n options: facet.FacetValues.map((v) => ({ label: v.Label, value: v.Value })),\n selectedValues: facet.FacetValues.filter((v) => v.Selected).map((v) => v.Value),\n title: facet.AttributeFacetLabel || facet.DisplayName || facet.AttributeDisplayName || facet.Attribute,\n definition: facet.AttributeDefinition,\n notAvailableToolTip: notAvailableToolTip,\n outOfStockToolTip: outOfStockToolTip,\n }),\n },\n 'bl-single': {\n Comp: ButtonSelector,\n props: (facet, onChange, outOfStockToolTip, notAvailableToolTip) => ({\n onSelect: onChange,\n options: facet.FacetValues.map((v) => ({ label: v.Label, value: v.Value })),\n selectedValues: facet.FacetValues.filter((v) => v.Selected).map((v) => v.Value),\n title: facet.AttributeFacetLabel || facet.DisplayName || facet.AttributeDisplayName || facet.Attribute,\n definition: facet.AttributeDefinition,\n notAvailableToolTip: notAvailableToolTip,\n outOfStockToolTip: outOfStockToolTip,\n }),\n },\n 'ddl-single': {\n Comp: DropdownSelector,\n props: (facet, onChange, outOfStockToolTip, notAvailableToolTip) => ({\n onSelect: onChange,\n options: facet.FacetValues.map((v) => ({ label: v.Label, value: v.Value })),\n selectedValues: facet.FacetValues.filter((v) => v.Selected).map((v) => v.Value),\n title: facet.AttributeFacetLabel || facet.DisplayName || facet.AttributeDisplayName || facet.Attribute,\n definition: facet.AttributeDefinition,\n notAvailableToolTip: notAvailableToolTip,\n outOfStockToolTip: outOfStockToolTip,\n }),\n },\n 'ddm-single': {\n Comp: DropdownMenuSelector,\n props: (facet, onChange, outOfStockToolTip, notAvailableToolTip) => ({\n onSelect: onChange,\n options: facet.FacetValues.map((v) => ({ label: v.Label, value: v.Value })),\n selectedValues: facet.FacetValues.filter((v) => v.Selected).map((v) => v.Value),\n title: facet.AttributeFacetLabel || facet.DisplayName || facet.AttributeDisplayName || facet.Attribute,\n definition: facet.AttributeDefinition,\n notAvailableToolTip: notAvailableToolTip,\n outOfStockToolTip: outOfStockToolTip,\n }),\n },\n default: {\n Comp: () => null,\n props: () => ({}),\n },\n};\n\nexport default function FacetFilter({ className, facet, disabled, onSelect, extraProps }) {\n const outOfStockToolTip = useTranslation('FacetFilter.Value.OutOfStock.ToolTip');\n const notAvailableToolTip = useTranslation('FacetFilter.Value.NotAvailable.ToolTip');\n const onChange = React.useCallback(\n (value) =>\n onSelect(\n facet,\n facet.FacetValues.find((v) => v.Value === value)\n ),\n [facet, onSelect]\n );\n\n const selector = React.useMemo(\n () => SELECTORS[facet.SelectorControlType || facet.SelectorType] || SELECTORS.default,\n [facet]\n );\n\n const props = React.useMemo(() => selector.props(facet, onChange, outOfStockToolTip, notAvailableToolTip), [\n selector,\n facet,\n onChange,\n outOfStockToolTip,\n notAvailableToolTip,\n ]);\n\n return (\n {title}
\n\n {options.map((option) => (\n \n {option.label}\n \n ))}\n
\n {definition ? (\n \n
\n ) : null}\n {definition}
\n\n
\n );\n}\n\nFacetFilter.propTypes = {\n className: px.string,\n facet: types.Facet,\n onSelect: px.func,\n onUpdate: px.func,\n disabled: px.oneOfType([px.bool, px.object]),\n extraProps: px.object,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { v4 } from 'uuid';\nimport { Translation } from 'Common/components/localization';\n\nexport default function ChildrenSelector({\n className,\n productChildren = [],\n selectedChild = null,\n onSelect,\n skuLabel,\n}) {\n const id = React.useRef(`childselector_${v4()}`);\n const [expanded, setExpanded] = React.useState(false);\n const options = React.useMemo(\n () =>\n productChildren.map((c) => ({\n name: c.DisplayName,\n code: c.Code,\n isDisabled: c.StockStatus === 'InStock' ? false : true,\n title: c.StockStatusLabel,\n })),\n [productChildren]\n );\n\n const onSelectChild = React.useCallback(\n (value) => (onSelect ? onSelect(productChildren.find((c) => c.Code === value)) : null),\n [onSelect, productChildren]\n );\n\n React.useEffect(() => {\n function onWindowClick() {\n if (expanded) setExpanded(false);\n }\n\n window.addEventListener('click', onWindowClick);\n return () => window.removeEventListener('click', onWindowClick);\n }, [expanded]);\n\n return (\n \n
\n );\n}\n\nChildrenSelector.propTypes = {\n className: px.string,\n productChildren: px.arrayOf(px.shape({ DisplayName: px.string, Code: px.string })),\n selectedChild: px.shape({ Code: px.string }),\n onSelect: px.func,\n skuLabel: px.string,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { Translation } from 'Common/components/localization';\nimport * as types from 'Common/types';\nimport { FacetFilter, ChildrenSelector } from 'Common/components/ui';\n\nexport default function ProductOptions({\n clearFacets,\n className,\n currentChildren,\n disabledFacets,\n facets,\n optionLabel,\n onFacetSelect,\n onSelectChild,\n productChildren,\n productCode,\n selectedChild,\n skuLabel,\n extraFacetProps,\n}) {\n const [showClearFacets, setShowClearFacets] = React.useState(false);\n\n React.useEffect(() => {\n if (\n facets.find((facet) => facet.FacetValues.find((value) => value.Selected)) &&\n facets.length > 1 &&\n productChildren?.length > 1\n )\n setShowClearFacets(true);\n else setShowClearFacets(false);\n }, [facets, productChildren]);\n\n const autoSelectFacet = React.useCallback(() => {\n for (let facet of facets) {\n if (\n Object.values(disabledFacets[facet.Attribute])?.filter((map) => map.hasStock && !map.isDisabled)\n ?.length === 1\n ) {\n const value = facet.FacetValues.find(\n (v) =>\n disabledFacets[facet.Attribute][v.Value].hasStock &&\n !disabledFacets[facet.Attribute][v.Value].isDisabled &&\n !v.Selected\n );\n\n if (value) {\n onFacetSelect(facet, value);\n }\n }\n }\n }, [currentChildren, disabledFacets, facets, onFacetSelect, onSelectChild, productChildren, productCode]);\n\n React.useEffect(() => {\n if (\n !facets?.length &&\n productChildren?.length === 1 &&\n (selectedChild == null || productChildren[0].Code !== selectedChild.Code)\n ) {\n onSelectChild(productChildren[0]);\n } else {\n autoSelectFacet();\n }\n }, [facets, onSelectChild, productChildren, autoSelectFacet, selectedChild]);\n\n return (\n \n setExpanded(!expanded)}\n >\n
\n \n
\n \n \n
\n
\n \n {options.map((option) => (\n onSelectChild(option.code)}\n disabled={option.isDisabled}\n title={option.title}\n >\n
\n \n {option.name}\n
\n\n
\n {facets?.length ? (\n facets.map((facet) => (\n
\n );\n}\n\nProductOptions.propTypes = {\n currentChildren: px.arrayOf(types.Product),\n className: px.string,\n clearFacets: px.func,\n disabledFacets: px.object,\n facets: px.arrayOf(px.object),\n optionLabel: px.string,\n onFacetSelect: px.func,\n onSelectChild: px.func,\n productChildren: px.arrayOf(types.Product),\n productCode: px.string,\n selectedChild: px.object,\n skuLabel: px.string,\n extraFacetProps: px.object,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { Formatter } from 'Common/utils';\n\n/**\n *\n * Displays product price based on optional params of quantity and range.\n * Displays sale price if applicable.\n * Optionally transforms backend product price properties.\n */\nexport default function ProductPrice({\n className,\n priceInfo,\n quantity,\n defaultPrice,\n noRanges = false,\n multiplyByQuantity = false,\n skipPriceTransform = false,\n}) {\n const price = React.useMemo(\n () =>\n priceInfo ? getProductPrice(priceInfo, quantity, multiplyByQuantity, !noRanges, skipPriceTransform) : null,\n [priceInfo, quantity, noRanges, multiplyByQuantity, skipPriceTransform]\n );\n\n return (\n \n
\n );\n}\n\nfunction getQuantitySalePrice(quantitySalePrices, quantity) {\n const quantityOptions = Object.keys(quantitySalePrices);\n let salePrice = quantitySalePrices[quantityOptions[0]];\n\n for (const option of quantityOptions.slice(1)) {\n if (quantity < parseInt(option, 10)) {\n break;\n }\n salePrice = quantitySalePrices[option];\n }\n\n return salePrice.Amount;\n}\n\nfunction getProductPrice(priceInfo, quantity, multiplyByQuantity, useRange, skipPriceTransform) {\n if (skipPriceTransform) return priceInfo;\n\n const factor = multiplyByQuantity ? quantity : 1;\n const salePrice = priceInfo.useQtySalePrice\n ? getQuantitySalePrice(priceInfo.price.QtySalePrices, quantity)\n : priceInfo.salePrice;\n\n const qtySale = priceInfo.useQtySalePrice ? salePrice * factor : 0;\n\n let retail = useRange\n ? [priceInfo.price?.MinListPrice.Amount * factor, priceInfo.price?.MaxListPrice.Amount * factor]\n : priceInfo.price?.ListPrice.Amount * factor;\n\n let sale = useRange\n ? [priceInfo.price?.MinSalePrice.Amount * factor, priceInfo.price?.MaxSalePrice.Amount * factor]\n : salePrice * factor;\n\n if (qtySale && (Array.isArray(sale) ? Math.max(...sale) : sale) > qtySale) {\n sale = useRange ? [sale[0], qtySale] : qtySale;\n }\n\n if (useRange) {\n retail = quantity ? (!retail[1] || retail[0] === retail[1] ? retail[0] : retail) : retail;\n sale = quantity ? (!sale[1] || sale[0] === sale[1] ? sale[0] : sale) : sale;\n }\n\n const retailStr = retail ? Formatter.currency(retail, priceInfo.price?.ListPrice?.Currency) : '';\n const saleStr =\n (Array.isArray(sale) && sale.every((s) => typeof s === 'number' && s >= 0)) ||\n (typeof sale === 'number' && sale >= 0)\n ? Formatter.currency(sale, priceInfo.price?.SalePrice.Currency)\n : '';\n\n const maxSale = Array.isArray(sale) ? sale[1] || sale[0] : sale;\n const maxRetail = Array.isArray(retail) ? retail[1] || retail[0] : retail;\n\n if (!maxSale && !maxRetail) return null;\n if (retailStr === saleStr) return { price: saleStr };\n if (maxSale < 0) return { price: retailStr };\n return { price: retailStr, reducedPrice: saleStr };\n}\n\nProductPrice.propTypes = {\n className: px.string,\n defaultPrice: px.string,\n priceInfo: px.object,\n quantity: px.oneOfType([px.string, px.number]),\n multiplyByQuantity: px.bool,\n noRanges: px.bool,\n skipPriceTransform: px.bool,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Translation } from 'Common/components/localization';\n\nexport default function ChildDetail({ className, currentItemStatus, productCode, productTypeId }) {\n const showDetail = React.useMemo(\n () =>\n productTypeId === 'Product'\n ? currentItemStatus && currentItemStatus?.code !== productCode\n : currentItemStatus?.code === productCode,\n [currentItemStatus, productCode, productTypeId]\n );\n\n const showDivider = React.useMemo(() => currentItemStatus?.statusDisplayName && currentItemStatus?.code, [\n currentItemStatus,\n ]);\n\n return showDetail ? (\n {price?.price || defaultPrice}
\n {price?.reducedPrice ? (\n{price?.reducedPrice}
\n ) : null}\n\n {currentItemStatus.statusDisplayName}\n {showDivider ? ' | ' : null}\n
\n {children}\n {message}\n {clickDismiss ?
\n \n ) : null;\n}\n\nAlertTip.propTypes = {\n className: px.string,\n timestamp: px.number,\n children: px.node,\n message: px.string,\n hidden: px.bool,\n level: px.oneOf(['info', 'success', 'danger']),\n timeout: px.number,\n placement: px.oneOf(['top', 'right', 'bottom', 'left']),\n clickDismiss: px.bool,\n removeFromDomWhenInactive: px.bool,\n};\n","export default {\n isDisplayOnly: (productInfo) => productInfo?.StockStatus === 'DisplayOnly',\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { GTM } from 'Common/utils';\nimport { useViewport, useTranslation, useOrderRequestState } from 'Common/hooks';\nimport { Product } from 'Common/types';\nimport { Translation } from '../localization';\nimport { NumberInput, PureTip } from '../ui';\nimport { ProductInfo } from 'Common/models';\n\nexport default function ProductInput({\n addToCartLabel = 'Form.Button.AddToCart.Label',\n allowZeroQty = false,\n bibProdInput,\n checkoutPageLink,\n children,\n className,\n currentChildren,\n currentItemStatus,\n disabled = false,\n gtmListValue,\n hideWhenOOS = false,\n isUserAuthenticated,\n itemCodes = [],\n minQuantity = 1,\n noBuyNow = false,\n noSidePadding = false,\n numInputButtons = false,\n onAddToCart,\n onQuantityChange,\n paddingValue = 1,\n productInfo,\n productRecommendationId = null,\n quantity,\n reverseButtonOrder = false,\n skipGtmImpression = false,\n statusTooltip,\n totalQty = 0,\n}) {\n const viewport = useViewport();\n const addToCartToolTip = useTranslation('Form.Button.AddToCart.ToolTip.Label');\n const buyNowToolTip = useTranslation('Form.Button.BuyNow.ToolTip.Label');\n const cartIsUpdating = useOrderRequestState();\n const [isLoading, setIsLoading] = React.useState(false);\n const [addToCartTip, setAddToCartTip] = React.useState({\n timestamp: 0,\n message: null,\n hidden: true,\n });\n\n const isDisplayOnly = ProductInfo.isDisplayOnly(productInfo);\n\n const [buyNowTip, setBuyNowTip] = React.useState({\n timestamp: 0,\n message: null,\n hidden: true,\n });\n\n const buttonsDisabled = React.useMemo(\n () => disabled || (!allowZeroQty && (!currentItemStatus?.hasStock || !quantity)) || currentChildren.length > 1,\n [currentItemStatus, quantity, currentChildren, allowZeroQty, disabled]\n );\n\n const showTip = React.useCallback(\n (tip) => (viewport.is.touch && buttonsDisabled && tip ? () => alert(tip) : null),\n [viewport, buttonsDisabled]\n );\n\n const statusCallback = React.useCallback(\n (buyNow = false) =>\n statusTooltip\n ? (successMsg, validationIssues = [], params) => {\n const setter = buyNow ? setBuyNowTip : setAddToCartTip;\n const timestamp = Date.now();\n const placement = typeof statusTooltip === 'string' ? statusTooltip : undefined;\n\n if (successMsg && !buyNow) {\n setter({ message: successMsg, params, timestamp, placement, level: 'success' });\n } else if (!successMsg) {\n const lineItem = validationIssues?.find(\n (issue) => issue.RefType === 'LineItem' && itemCodes.includes(issue.Ref)\n )?.Issue;\n\n setter({ message: lineItem, timestamp, placement, level: 'danger' });\n } else {\n setter(null);\n }\n }\n : null,\n [statusTooltip, itemCodes]\n );\n\n const getGtmPayload = React.useCallback(\n () =>\n gtmListValue === 'Compared Item' ? (\n GTM.mapComparedItemToAddCart(\n productInfo,\n quantity,\n productInfo.CatalogEntity.Attributes,\n gtmListValue,\n totalQty + quantity\n )\n ) : (\n GTM.mapEntityToAddCart(\n productInfo.Code === currentItemStatus?.code\n ? productInfo\n : productInfo.Children.find((c) => c.Code === currentItemStatus?.code),\n quantity,\n productInfo.Attributes,\n gtmListValue,\n totalQty + quantity\n )\n ), [currentItemStatus?.code, gtmListValue, productInfo, quantity, totalQty]\n )\n \n const getImpressionPayload = React.useCallback(\n () =>\n gtmListValue === 'Compared Item' ? (\n GTM.mapComparedEntityToImpressions(\n productInfo, \n productInfo.Attributes, \n gtmListValue)\n ) : (\n GTM.mapEntityToImpressions(\n [\n productInfo.Code === currentItemStatus?.code\n ? productInfo\n : productInfo.Children.find((c) => c.Code === currentItemStatus?.code),\n ],\n gtmListValue\n )\n ), [currentItemStatus?.code, gtmListValue, productInfo]\n )\n\n const addItem = React.useCallback(\n (buyNow = false) =>\n onAddToCart\n ? async () => {\n if (!skipGtmImpression) {\n const impressionPayload = getImpressionPayload();\n\n if (impressionPayload) GTM.updateDataLayer(impressionPayload);\n }\n\n const gtmPayload = getGtmPayload();\n\n setIsLoading(true);\n await onAddToCart(currentItemStatus?.code, quantity, {\n gtmPayload,\n rerouteLink: buyNow ? checkoutPageLink : null,\n statusCallback: statusCallback(buyNow),\n productRecommendationId,\n cartApiOptions: { expand: ['forms', 'ordertotals'], update: ['lineitems', 'promotions'] },\n });\n setIsLoading(false);\n }\n : null,\n [checkoutPageLink, currentItemStatus?.code, getGtmPayload, getImpressionPayload, onAddToCart, productRecommendationId, quantity, skipGtmImpression, statusCallback]\n );\n\n const onBuyNow = React.useMemo(\n () => (noBuyNow || !checkoutPageLink ? null : addItem(true)),\n [noBuyNow, checkoutPageLink, addItem]\n );\n\n const onAddItem = React.useMemo(() => addItem(), [addItem]);\n\n const btnsColSize = React.useMemo(\n () => (!onBuyNow && !onAddItem ? 0 : !onQuantityChange ? 12 : !numInputButtons && !viewport.is.mobile ? 10 : 9),\n [onBuyNow, onAddItem, numInputButtons, onQuantityChange, viewport]\n );\n\n const p = React.useMemo(\n () => ({ left: `pl-${paddingValue}`, right: `pr-${paddingValue}`, x: `px-${paddingValue}` }),\n [paddingValue]\n );\n\n return (\n \n \n {isDisplayOnly ? null : currentItemStatus.hasStock || !hideWhenOOS ? (\n <>\n {onQuantityChange ? (\n \n
\n ) : null}\n {bibProdInput && viewport.is.mobile ? null : !btnsColSize ? null : (\n {children}
\n ) : null}\n \n ) : (\n \n
\n )}\n \n \n );\n}\n\nProductInput.propTypes = {\n addToCartLabel: px.string,\n allowZeroQty: px.bool,\n bibProdInput: px.bool,\n checkoutPageLink: px.string,\n children: px.node,\n className: px.string,\n currentChildren: px.arrayOf(px.object),\n currentItemStatus: px.shape({\n hasStock: px.bool,\n statusDisplayName: px.string,\n code: px.string,\n }),\n disabled: px.bool,\n gtmListValue: px.string,\n hideWhenOOS: px.bool,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n itemCodes: px.arrayOf(px.string),\n minQuantity: px.number,\n noBuyNow: px.bool,\n noSidePadding: px.bool,\n numInputButtons: px.bool,\n onAddToCart: px.func,\n onQuantityChange: px.func,\n paddingValue: px.oneOf([1, 2, 3]),\n productInfo: Product,\n productRecommendationId: px.string,\n quantity: px.oneOfType([px.string, px.number]),\n reverseButtonOrder: px.bool,\n skipGtmImpression: px.bool,\n statusTooltip: px.oneOf([false, true, undefined, null, 'top', 'bottom', 'right', '']),\n totalQty: px.number,\n};\n","import px from 'prop-types';\nimport React, { useMemo } from 'react';\nimport cx from 'classnames';\n\n/**\n * Returns the properties of the first header row, if it exists.\n *\n * Returns `null` if the first header row does not exist.\n *\n * @param {ReactNode} children\n * @returns Properties for the first header row, if it exists. `null` if it does not exist.\n */\nfunction getHeaderProps(children) {\n return React.Children.map(children, (child) => {\n return child?.type === Header ? child?.props : null;\n }).filter(Boolean)[0];\n}\n\n/**\n * Computes the column widths for a grid based on its header properties.\n *\n * If `headerProps` is `null`, returns an array with a single element: `['repeat(1fr)']`.\n * @param {*} headerProps\n * @returns Array of column widths for the grid.\n */\nfunction getColumnWidths(headerProps) {\n if (headerProps == null) return ['1fr'];\n\n const validChildren = React.Children.toArray(headerProps.children).filter(Boolean);\n\n return validChildren\n .map((child) => {\n if (child?.type !== Cell) return null;\n return child?.props?.width ?? '1fr';\n })\n .filter(Boolean);\n}\n\nexport default function Grid({ children, className, style, ...props }) {\n const headerProps = getHeaderProps(children);\n const columnWidths = getColumnWidths(headerProps);\n const templateColumns = columnWidths.join(' ');\n\n return (\n \n \n
\n \n {React.Children.map(children, (child, index) => {\n if (!React.isValidElement(child)) return null;\n\n const childType = child.type;\n\n if (childType === Header || childType === Row || childType === Interrupter) {\n return React.cloneElement(child, {\n ...child.props,\n index,\n });\n } else {\n return child;\n }\n })}\n
\n );\n}\n\nGrid.propTypes = {\n children: px.node,\n className: px.string,\n style: px.string,\n};\n\nexport function Header({ children, index, ...props }) {\n const validChildren = React.Children.toArray(children).filter(Boolean);\n\n return validChildren.map((child, columnIndex) =>\n child?.type === Cell\n ? React.cloneElement(child, {\n ...props,\n header: true,\n rowIndex: index,\n columnIndex,\n })\n : child\n );\n}\n\nHeader.propTypes = {\n children: px.node,\n index: px.number,\n};\n\nexport function Row({ children, index, ...props }) {\n const validChildren = React.Children.toArray(children).filter(Boolean);\n\n return (\n \n {validChildren.map((child, columnIndex) =>\n child?.type === Cell\n ? React.cloneElement(child, {\n ...props,\n rowIndex: index,\n columnIndex,\n })\n : child\n )}\n
\n );\n}\n\nRow.propTypes = {\n index: px.number,\n children: px.node,\n};\n\nexport const Cell = React.forwardRef(function Cell(\n { children, rowIndex, columnIndex, header, interrupter, className, sticky, style: baseStyle, colSpan, ...props },\n ref\n) {\n const style = useMemo(\n () => ({\n ...baseStyle,\n gridColumn: colSpan ? `${columnIndex + 1} / span ${colSpan}` : columnIndex + 1,\n gridRow: rowIndex + 1,\n }),\n [baseStyle, rowIndex, columnIndex, colSpan]\n );\n\n return (\n \n
\n ) : null;\n}\n\nItemDetailsCard.propTypes = {\n itemData: px.object,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { ItemDetailsCard } from '.';\nimport Modal from '../ui/Modal';\n\nexport default function ItemDetailsModal({ \n closeModal, \n showModal,\n selectedChild, \n setShowModal \n}) {\n\n const closeClear = React.useCallback(() => {\n closeModal();\n setShowModal(false);\n }, [closeModal, setShowModal])\n\n const item = React.useMemo(() => showModal ? selectedChild : null, [selectedChild, showModal])\n\n return showModal ? (\n \n
\n \n {itemData.DisplayName}\n
\n \n
\n {itemContent?.map((a) => {\n return (\n \n
\n \n
\n {itemData.Code}
\n \n
\n \n
\n \n {itemData?.Price ? (\n <>\n {Formatter.currency(\n itemData?.Price?.ListPrice.Amount,\n itemData?.Price?.ListPrice.Currency\n )}\n \n ) : null}\n
\n \n
\n );\n })}\n \n
\n {a.value}
\n \n \n \n {!isMobile ? (\n \n | \n ) : null}\n \n | \n {!isMobile && isPriceExists ? (\n \n | \n ) : null}\n {disableItemDetails ? null : ( | )}\n \n \n {productChildren.map((child) => {\n const isOpen = selectedVariant === child.Code;\n\n return [\n handleVariantSelection(child)}>\n {!isMobile ? (\n | \n {child.Code}\n | \n ) : null}\n 45 ? child.DisplayName : null}\n >\n {child.DisplayName}\n | \n {isPriceExists && !isMobile ? (\n \n {child.Price.ListPrice.Amount > 0\n ? Formatter.currency(\n child.Price.ListPrice.Amount,\n child.Price.ListPrice.Currency\n )\n : null}\n | \n ) : (\n null\n )}\n {disableItemDetails ? null : (\n \n \n | \n )}\n \n
,\n ].filter(Boolean);\n })}\n \n {showModal && !disableItemDetails ? (\n
\n ) : null;\n}\n\nProductChildTable.propTypes = {\n disableItemDetails: px.bool,\n productChildren: px.arrayOf(\n px.object\n ),\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Url } from 'Common/utils';\nimport { useTranslation } from 'Common/hooks';\nimport Icon from '../Icon';\n\nexport const SERVICE = {\n facebook: 'Facebook',\n twitter: 'Twitter',\n email: 'Email',\n};\n\nexport function getUrl(service, shareLink, title = '', hashtags = '') {\n if (shareLink) {\n const { href } = Url.create(shareLink);\n\n switch (service) {\n case SERVICE.facebook:\n return `https://www.facebook.com/sharer.php?u=${encodeURIComponent(href)}`;\n case SERVICE.twitter:\n return `https://twitter.com/intent/tweet?text=${encodeURIComponent(\n title\n )}&url=${href}&hashtags=${encodeURIComponent(hashtags)}`;\n case SERVICE.email:\n return `mailto:?body=${encodeURIComponent(href)}`;\n }\n }\n return null;\n}\n\nexport default function SocialShare({\n className,\n service = SERVICE.facebook,\n link = '',\n name = '',\n hashtags = '',\n propagate = false,\n}) {\n const lblId = React.useMemo(() => `Social.${service}.Share.Label`, [service]);\n const lbl = useTranslation(lblId);\n const url = React.useMemo(() => getUrl(service, link, name, hashtags), [service, link, name, hashtags]);\n const onClick = React.useCallback(\n (e) => {\n if (!propagate) e.stopPropagation();\n },\n [propagate]\n );\n\n return url ? (\n \n
\n );\n}\n\nProductShare.propTypes = {\n siteId: px.string,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\n\nexport default function HTMLRender({ className, content }) {\n const innerRef = React.useRef();\n\n React.useEffect(() => {\n innerRef.current.innerHTML = content;\n }, [content]);\n\n return (\n \n
\n \n
\n );\n}\n\nHTMLRender.propTypes = {\n className: px.string,\n content: px.string,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport * as types from 'Common/types';\nimport { GTM as gtmUtil } from 'Common/utils';\nimport * as GTM from 'Common/constants/gtm';\nimport { Translation } from 'Common/components/localization';\nimport ProductOptions from './ProductOptions';\nimport ProductPrice from './ProductPrice';\nimport ChildDetail from './ChildDetail';\nimport ProductInput from './ProductInput';\nimport ProductRating from './ProductRating';\nimport ProductChildTable from './ProductChildTable';\nimport ProductShare from './ProductShare';\nimport { HTMLRender } from '../ui';\n\nexport default function ProductDetails({\n checkoutPageLink,\n className,\n clearFacets,\n currentChildren,\n currentHazmat,\n currentItemStatus,\n currentOversize,\n desktopBreakpoint = 'md',\n disabledFacets,\n facets,\n gtmListValue,\n includeDescription,\n isQuickView,\n isUserAuthenticated,\n itemStatusTooltip,\n Links,\n onAddItemToCart,\n onFacetSelect,\n onQuantityChange,\n onSelectChild,\n pageId,\n priceInfo,\n productChildren,\n productInfo,\n productRecommendationId,\n quantity,\n renderedInQuickView = false,\n returnPolicyUrl = null,\n reviewProviderEntityId,\n selectedChild,\n siteId,\n totalQty = 0,\n useChildTable,\n useSocialShare,\n writeReviewAnchor,\n}) {\n const currentChildRef = React.useRef();\n const showSpecificationsLink = React.useMemo(\n () =>\n productInfo?.Options?.SpecificationsLinkLabel &&\n productInfo.Options.ShowSpecifications?.toLowerCase() === 'true',\n [productInfo]\n );\n\n const displayOnly = React.useMemo(() => productInfo?.StockStatus === 'DisplayOnly', [productInfo]);\n\n const onShowSpecifications = React.useCallback(() => {\n const tabContents = document.getElementById(`${pageId}_content`).children;\n const contentTabs = document.getElementById(`${pageId}_tabs`).children;\n\n for (let i = 0, l = contentTabs.length; i < l; i++) {\n const tabContent = tabContents[i];\n const contentTab = contentTabs[i];\n\n if (tabContent.id.includes('Specifications')) {\n if (tabContent.classList.contains('active') && tabContent.classList.contains('show')) break;\n\n const tabLink = contentTab.getElementsByClassName('nav-link');\n\n tabLink.item(0).classList.add('active');\n tabContent.classList.add('active');\n tabContent.classList.add('show');\n } else if (tabContent.classList.contains('active') || tabContent.classList.contains('show')) {\n const tabLink = contentTab.getElementsByClassName('nav-link');\n\n tabLink.item(0).classList.remove('active');\n tabContent.classList.remove('active');\n tabContent.classList.remove('show');\n }\n }\n }, [pageId]);\n\n const itemCodes = React.useMemo(() => currentChildren?.map((c) => c.Code), [currentChildren]);\n\n React.useEffect(() => {\n if (currentChildren.length === 1) {\n const currentChildCode = currentChildren[0].Code;\n\n if (currentChildCode != currentChildRef.current) {\n const gtmPayload = gtmUtil.mapEntityToImpressions(currentChildren, GTM.TAGS.PDP);\n\n if (gtmPayload) gtmUtil.updateDataLayer(gtmPayload);\n currentChildRef.current = currentChildCode;\n }\n }\n }, [currentChildren]);\n\n return productInfo ? (\n \n Loading...\n
\n \n {!renderedInQuickView ? (\n
\n ) : null;\n}\n\nProductDetails.propTypes = {\n checkoutPageLink: px.string,\n className: px.string,\n clearFacets: px.func,\n currentChildren: px.arrayOf(px.object),\n currentHazmat: px.shape({\n code: px.string,\n description: px.string,\n }),\n currentItemStatus: px.shape({ hasStock: px.bool, statusDisplayName: px.string, code: px.string }),\n currentOversize: px.object,\n desktopBreakpoint: px.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),\n disabledFacets: px.object,\n facets: px.arrayOf(types.Facet),\n gtmListValue: px.string,\n includeDescription: px.bool,\n isQuickView: px.bool,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n itemStatusTooltip: px.oneOfType([px.string, px.bool]),\n Links: px.node,\n onAddItemToCart: px.func,\n onFacetSelect: px.func,\n onQuantityChange: px.func,\n onSelectChild: px.func,\n pageId: px.string,\n priceInfo: px.object,\n productChildren: px.arrayOf(px.object),\n productInfo: px.object,\n productRecommendationId: px.string,\n quantity: px.oneOfType([px.string, px.number]),\n renderedInQuickView: px.bool,\n reviewProviderEntityId: px.string,\n returnPolicyUrl: px.string,\n selectedChild: px.object,\n siteId: px.string,\n totalQty: px.number,\n useChildTable: px.bool,\n useSocialShare: px.bool,\n writeReviewAnchor: px.string,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport Spinner from './Spinner';\n\nexport default function Loader({ fitToContainer = false, className, noOverlay = false, ...props }) {\n return (\n \n {useChildTable ? null : (\n \n
\n )}\n\n {displayOnly ? null : (\n
\n {!renderedInQuickView && productInfo.Description && includeDescription ? (\n \n
\n )}\n\n {displayOnly ? null : (\n \n
\n ) : null}\n {currentOversize?.description ? (\n \n
\n \n
\n ) : null}\n {currentHazmat?.description ? (\n {currentOversize.description}
\n\n
\n ) : null}\n {productInfo.ItemStatus === 'Discontinued' || displayOnly ? null : (\n {currentHazmat.description}
\n{Links}
\n \n {useSocialShare ?
\n \n \n
\n ) : null}\n \n
\n );\n}\n\nRelatedProducts.propTypes = {\n className: px.string,\n relatedProducts: px.arrayOf(Product),\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\n\nexport default function ProductTitle({ className, productTitle = '', useLargeProductTitle }) {\n const targetRef = React.useRef();\n const [dimensions, setDimensions] = React.useState(null);\n\n React.useLayoutEffect(() => {\n if (targetRef.current) {\n const innerRef = targetRef.current;\n\n //set the dimensions when we first load\n setDimensions({\n height: innerRef.offsetHeight,\n });\n\n //use a resize observer (doesn't work in IE) to trigger a size change whenever the inner element resizes\n const resizeObserver = new ResizeObserver((observedEntries) => {\n setDimensions({\n height: observedEntries[0].target.offsetHeight,\n });\n });\n\n resizeObserver.observe(innerRef);\n\n return () => {\n resizeObserver.unobserve(innerRef);\n };\n }\n }, [productTitle, targetRef]);\n\n return (\n \n
\n {relatedProducts?.length ? (\n relatedProducts.map((product, index) => (\n //TODO: EDS-3143\n \n {/* eslint-disable-next-line react/jsx-no-target-blank */}\n \n
\n ))\n ) : relatedProducts ? null : (\n {product.DisplayName}
\n {product.Price ? (\n \n
\n )}\n {productTitle}
:{productTitle}
}\n \n );\n}\n\nProductTitle.propTypes = {\n className: px.string,\n productTitle: px.string,\n useLargeProductTitle: px.bool,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport ProductGallery from './ProductGallery';\nimport { ProductDetailsComponent as ProductDetails } from '~components/product';\nimport RelatedProducts from './RelatedProducts';\nimport ProductTitle from './ProductTitle';\nimport ProductBadge from './ProductBadge';\nimport { useViewport } from 'Common/hooks';\n\n\nexport default function ProductView({\n className,\n currentMarketingBadges,\n Details = ProductDetails,\n detailsProps = {},\n Gallery = ProductGallery,\n galleryProps = {},\n isQuickView=false,\n isUserAuthenticated,\n itemStatusTooltip,\n productTitle,\n Related = RelatedProducts,\n relatedProductProps = {},\n showRelatedEntries = false,\n useChildTable\n}) {\n\n const viewport = useViewport();\n const isMobile = React.useMemo(() => viewport.is.lt(galleryProps.desktopBreakpoint ?? 'md'), [viewport, galleryProps.desktopBreakpoint]);\n\n return (\n\n {!isMobile && !isQuickView ?(\n <>\n
\n )\n};\n\nProductView.propTypes = {\n className: px.string,\n currentMarketingBadges: px.arrayOf(px.string),\n Details: px.elementType,\n detailsProps: px.objectOf(px.any),\n Gallery: px.elementType,\n galleryProps: px.objectOf(px.any),\n isQuickView: px.bool,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n itemStatusTooltip: px.oneOfType([px.string, px.bool]),\n productTitle: px.string,\n Related: px.elementType,\n relatedProductProps: px.object,\n showRelatedEntries: px.bool,\n useChildTable: px.bool\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\n\nfunction Block({ c, h, w, mt }) {\n return ;\n}\n\nBlock.propTypes = {\n c: px.string,\n h: px.oneOfType([px.string, px.number]),\n w: px.oneOfType([px.string, px.number]),\n mt: px.string,\n};\n\nexport default function FakeQuickviewItem() {\n return (\n \n
\n \n
\n \n ) : (\n \n
\n )}\n \n
\n \n
\n \n
\n \n
\n );\n}\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport * as types from 'Common/types';\nimport { useTranslation } from 'Common/hooks';\nimport { ProductView } from '../product';\nimport { Loader } from '../ui';\nimport FakeQuickViewItem from './FakeQuickViewItem';\n\nexport default function CatalogQuickView({\n className,\n isUserAuthenticated,\n showRelatedProducts = false,\n Product = ProductView,\n productProps = {},\n onSetProduct,\n onClearProduct,\n loading = false,\n productData,\n variantData,\n children,\n onClose,\n checkoutPageLink,\n itemStatusTooltip,\n}) {\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 {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 * 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\nCatalogCard.propTypes = {\n className: px.string,\n checkoutPageLink: px.string,\n googleRecaptchaV3Sitekey: px.string,\n gtmListValue: px.string,\n product: types.Product,\n onAddMultipleToCart: px.func,\n isUserAuthenticated: px.bool,\n itemStatusTooltip: px.bool,\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 { InfiniteScroll } from 'Common/components/ui';\nimport { catalog, customer, order } from '~features';\nimport { useAction } from 'Common/hooks';\nimport CatalogCard from './CatalogCard';\n\nexport default function CatalogGrid({ skipChildEnrichment = false, ...props }) {\n const items = useSelector(catalog.selectors.getFilteredProducts);\n const pageInfo = useSelector(catalog.selectors.getPageInfo);\n const isUserAuthenticated = useSelector(customer.selectors.isLoggedIn);\n const loadMore = useAction(catalog.actions.loadMore);\n const onAddMultipleToCart = useAction(order.actions.addItems);\n const totalQty = useSelector(order.selectors.getTotalQuantity);\n const isDoneLoading = React.useMemo(() => pageInfo.page * pageInfo.pageSize >= pageInfo.total, [pageInfo]);\n\n const onLoadMore = React.useCallback(() => loadMore(skipChildEnrichment), [loadMore, skipChildEnrichment]);\n\n return (\n \n
\n \n
\n \n
\n \n {product.ProductName}
\n \n\n {cols.length ? (\n
\n \n \n \n {product?.Children?.map((p) => (\n
\n
\n ) : null}\n | \n {i === 0 ? (\n \n {getFirstBadge(p.MarketingBadges)}\n \n ) : null}\n {p.Attributes.find(\n (a) => a.AttributeDisplayName === c\n )?.Values?.join(', ') ?? ''}\n | \n ))}\n \n ))}\n
\n \n \n {product?.Children?.map((v) => (\n
\n
\n | \n | \n \n {v.StockStatus === 'InStock' ? (\n \n \n ) : (\n | \n
\n \n \n
\n );\n}\n\nCatalogGrid.propTypes = {\n ctaModel: px.objectOf(px.any),\n checkoutPageLink: px.string,\n gtmListValue: px.string,\n viewDetails: px.string,\n skipChildEnrichment: px.bool,\n};\n","import { useMemo, useCallback } from 'react';\nimport cx from 'classnames';\n\nexport default function useBEM(...classNames) {\n const b = useMemo(() => cx(...classNames), [classNames]);\n const blocks = useMemo(\n () =>\n classNames\n .join(' ')\n .split(' ')\n .filter((x) => x && /^[A-Z]/.test(x) && !/--\\w+$/.test(x)),\n [classNames]\n );\n\n const em = useCallback(\n (name, modifier = '') =>\n cx(\n blocks.map((n) =>\n modifier && name\n ? `${n}__${name}--${modifier}`\n : name\n ? `${n}__${name}`\n : modifier\n ? `${n}--${modifier}`\n : ''\n )\n ),\n [blocks]\n );\n\n return [b, em];\n}\n","export default {\n isDisplayOnly: (productVariant) => productVariant?.StockStatus === 'DisplayOnly',\n};\n","import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { v4 } from 'uuid';\nimport { useViewport, useTranslation } from 'Common/hooks';\nimport { Product, Facet } from 'Common/types';\nimport { Translation } from 'Common/components/localization';\nimport { ImageModal, NumberInput } from 'Common/components/ui';\nimport { Grid, Header, Row, Cell } from 'Common/components/ui/Grid';\nimport ProductBadge from './ProductBadge';\nimport ProductPrice from './ProductPrice';\nimport { ProductVariant } from 'Common/models';\n\nfunction buildColsFromAttributes(variants = []) {\n const cols = new Set();\n\n for (const variant of variants) {\n for (const { IsSpecification, AttributeName } of variant.Attributes) {\n if (IsSpecification) cols.add([AttributeName]);\n }\n }\n\n return [...cols];\n}\n\nexport default function ProductListTable({\n facets,\n getName = (x) => x.Code,\n id: idProp = `PLT_${v4()}`,\n NotifyMe,\n notifyProps,\n onQuantityChange,\n onRowClick,\n quantities = {},\n showVariantImages = false,\n variants = [],\n}) {\n const viewport = useViewport();\n const isMobile = useMemo(() => viewport.is.lt('md'), [viewport]);\n const [showModal, setShowModal] = useState(false);\n const [showModalCarousel, setShowModalCarousel] = useState(false);\n const [modalContent, setModalContent] = useState({});\n const [variantMedia, setVariantMedia] = useState([]);\n const shouldShowNotifyColumn = variants.some((v) => v.StockStatus === 'OutOfStock');\n const shouldShowQuantityColumn = Boolean(onQuantityChange) && variants.some((v) => v.StockStatus === 'InStock');\n const shouldShowActionsColumn = shouldShowNotifyColumn || shouldShowQuantityColumn;\n\n const tooltip = useTranslation('Commerce.Product.Varient.Images.ToolTip');\n const id = useRef(idProp);\n const key = useCallback((...args) => [id.current, ...args].join('__'), []);\n const cols = useMemo(\n () => facets?.map((f) => [f.Attribute, f.AttributeDisplayName]) ?? buildColsFromAttributes(variants),\n [facets, variants]\n );\n\n const closeModal = useCallback(() => setShowModal(false), []);\n\n const setShowModalSlider = useCallback(() => setShowModalCarousel(true), []);\n\n const onClickView = useCallback((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\n return (\n <>\n \n {items?.map((product) => (\n
\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 \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 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 {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 {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","export const SET_COMPARE_ITEMS = 'compare:items:set';\nexport const ADD_COMPARE_ITEM = 'compare:items:add';\nexport const COMPARE_START_LOAD = 'compare:startLoad';\nexport const COMPARE_ERROR = 'compare:triggerError';\nexport const COMPARE_SET_ALERT = 'compare:alert:set';\n","import { Api } from 'Common/utils';\n\nexport function addToCompare(code) {\n return Api.POST('/Comparelist/AddToComparelist', {\n code,\n });\n}\n\nexport function getCompareList() {\n return Api.GET('/Comparelist/GetComparelist');\n}\n\nexport function removeFromCompareList(code) {\n return Api.DELETE('/Comparelist/RemoveFromComparelist', { code });\n}\n\nexport function clearCompareList() {\n return Api.DELETE('/Comparelist/ClearComparelist');\n}\n","import * as types from './types';\nimport * as api from './api';\nimport $ from 'jquery';\n\nfunction setCompareList(items) {\n return {\n type: types.SET_COMPARE_ITEMS,\n payload: items,\n };\n}\n\nfunction setAlert(translationKey, params = {}, type = 'success') {\n return {\n type: types.COMPARE_SET_ALERT,\n payload: { translationKey, params, type },\n };\n}\n\nfunction startLoading() {\n return {\n type: types.COMPARE_START_LOAD,\n };\n}\n\nfunction triggerError() {\n return {\n type: types.COMPARE_ERROR,\n };\n}\n\nexport function addToCompareList(code) {\n return async (dispatch) => {\n dispatch(startLoading());\n const response = await api.addToCompare(code);\n\n if (response) {\n dispatch(setCompareList(response.LineItems));\n dispatch(setAlert('Commerce.Product.Compare.Alert.AddSuccess', {}, 'success'));\n $('html, body').animate({ scrollTop: 0 }, 'slow');\n } else {\n dispatch(setAlert('Commerce.Product.Compare.Alert.AddFailure', {}, 'failure'));\n dispatch(triggerError());\n $('html, body').animate({ scrollTop: 0 }, 'slow');\n }\n };\n}\n\nexport function getCompareList() {\n return async (dispatch) => {\n dispatch(startLoading());\n const response = await api.getCompareList();\n\n if (response?.LineItems) {\n dispatch(setCompareList(response.LineItems));\n } else {\n dispatch(triggerError());\n }\n };\n}\n\nexport function removeFromCompareList(code) {\n return async (dispatch) => {\n dispatch(startLoading());\n const response = await api.removeFromCompareList(code);\n\n if (response) {\n dispatch(setCompareList(response.LineItems));\n } else {\n dispatch(triggerError());\n }\n };\n}\n\nexport function clearCompareList() {\n return async (dispatch) => {\n dispatch(startLoading());\n const response = await api.clearCompareList();\n\n if (response) {\n dispatch(setCompareList(response.LineItems));\n } else {\n dispatch(triggerError());\n }\n };\n}\n","import { createSelector } from 'reselect';\n\nexport const getCompareState = (state) => state.compare;\n\nexport const getCompareItems = createSelector(getCompareState, (compare = { items: [] }) => compare.items)\n\nexport const getCompareItemsDetails = createSelector(getCompareState, (compareState = { items: [] }) =>\n compareState.items.map((item) => {\n const activeChild = item.CatalogEntity.Children.find((child) => child.Code === item.Code);\n\n return {\n Code: item.Code,\n ListPrice: item.ListPrice,\n SalePrice: item.SalePrice,\n Title: item.CatalogEntity.DisplayName || item.CatalogEntity.Name,\n Url: item.CatalogEntity.ContentUrl,\n ImageUrl: item.CatalogEntity.DefaultImageUrl,\n Attributes: item.CatalogEntity.Attributes.concat(activeChild?.Attributes || [])\n .filter((attr) => attr.IsSpecification)\n .reduce((acc, attr) => ({ ...acc, [attr.AttributeName]: attr }), {}),\n StockStatus: item.StockStatus,\n };\n })\n);\n\nexport const getSpecDefinitions = createSelector(getCompareItemsDetails, (items = []) =>\n items\n .flatMap((item) => Object.entries(item.Attributes))\n .reduce(\n (acc, [attrName, newAttr]) =>\n acc.find((existingAttr) => existingAttr.AttributeName === attrName) ? acc : [...acc, newAttr],\n []\n )\n .sort((attr1, attr2) => attr1.Order - attr2.Order)\n);\n\nexport const getLoading = createSelector(\n getCompareState,\n (compareState = { isLoading: false }) => compareState.isLoading\n);\n\nexport const getAlert = createSelector(\n getCompareState,\n (\n compareState = {\n alert: {\n message: {\n translationKey: undefined,\n params: {},\n type: '',\n },\n timestamp: undefined,\n },\n }\n ) => compareState.alert\n);\n\nexport const getError = createSelector(getCompareState, (compareState = { isError: false }) => compareState.isError);\n","import * as types from './types';\n\nconst setItemsReducer = (state, items) => {\n return { ...state, items, isLoading: false, isError: false };\n};\n\nconst setAlertReducer = (state, { translationKey, params, type }) => {\n return { ...state, alert: { ...state.alert, message: { translationKey, params, type }, timestamp: Date.now() } };\n};\n\nconst setErrorReducer = (state) => ({ ...state, isLoading: false, isError: true });\n\nconst startLoadingReducer = (state) => ({ ...state, isLoading: true, isError: false });\n\nexport default {\n [types.SET_COMPARE_ITEMS]: setItemsReducer,\n [types.COMPARE_ERROR]: setErrorReducer,\n [types.COMPARE_START_LOAD]: startLoadingReducer,\n [types.COMPARE_SET_ALERT]: setAlertReducer,\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","export default {\n items: [],\n isLoading: false,\n isError: false,\n alert: {\n message: {\n translationKey: undefined,\n params: {},\n type: '',\n },\n timestamp: undefined,\n },\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\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
\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","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { useAction } from 'Common/hooks';\nimport { CatalogDetailGrid as Grid } from 'Common/components/catalog';\nimport { NotificationSubscription } from 'Common/containers/customer';\nimport { catalog, order } from '~features';\n\nexport default function CatalogDetailGrid({ gtmListValue, noBuyNow, singleFacet, ...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) => (\n \n \n ))}\n
\n \n
\n \n );\n}\n\nGridCard.propTypes = {\n className: px.string,\n product: types.Product,\n active: px.bool,\n onOpenQuickview: px.func,\n onCloseQuickview: px.func,\n stacked: px.bool,\n imgHeight: px.number,\n imgWidth: px.number,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { BREAKPOINTS } from 'Common/utils/Viewport';\nimport * as types from 'Common/types';\nimport { useBEM, useViewport } from 'Common/hooks';\nimport { InfiniteScroll } from 'Common/components/ui';\nimport { CatalogAltQuickview } from 'Common/components/catalog';\nimport GridCard from './GridCard';\n\nexport const DEFAULT_CARD_SIZE = 600;\n\nexport function maxRowSize(bp, colSize = DEFAULT_CARD_SIZE) {\n const min = BREAKPOINTS[bp] || 0;\n\n return Math.max(1, Math.floor(min / colSize));\n}\n\nexport function calculateQuickviewIndex(quickview, rowSize) {\n return quickview ? Math.ceil((quickview.idx + 1) / rowSize) * rowSize - 1 : -1;\n}\n\nexport default function CatalogSimpleGrid({\n checkoutPageLink,\n className,\n colSize = DEFAULT_CARD_SIZE,\n facets = [],\n googleRecaptchaV3Sitekey,\n gtmListValue,\n inputStatusTooltip,\n isUserAuthenticated,\n noBuyNow,\n NotifyMe,\n notifyProps,\n onAddItemToCart,\n onAddMultipleToCart,\n onLoadMore,\n pageInfo = {},\n products = [],\n Quickview = CatalogAltQuickview,\n stacked = false,\n totalQty = 0,\n useRecaptcha,\n}) {\n const viewPort = useViewport();\n const handler = React.useRef();\n const [hide, setHide] = React.useState(false);\n const [quickview, setQuickview] = React.useState(null);\n const isDoneLoading = React.useMemo(() => pageInfo.page * pageInfo.pageSize >= pageInfo.total, [pageInfo]);\n const [b, em] = useBEM('CatalogSimpleGrid', className);\n\n const rowSize = React.useMemo(\n () => ((stacked || products.length <= 2) && viewPort.is.gt('lg') ? 2 : maxRowSize(viewPort.name, colSize)),\n [viewPort.name, viewPort.is, stacked, colSize, products]\n );\n\n const quickviewIdx = React.useMemo(\n () => Math.min(calculateQuickviewIndex(quickview, rowSize), products.length - 1),\n [rowSize, quickview, products]\n );\n\n const closeQuickview = React.useCallback(() => {\n setHide(true);\n clearTimeout(handler.current);\n handler.current = setTimeout(() => {\n setQuickview(null);\n }, 310);\n }, []);\n\n React.useEffect(() => {\n if (facets.some((f) => f.Values.some((v) => v.Selected))) {\n closeQuickview();\n }\n }, [facets, closeQuickview]);\n\n const onOpenQuickview = React.useCallback(\n (idx, product) => (e) => {\n e.stopPropagation();\n e.preventDefault();\n setHide(false);\n clearTimeout(handler.current);\n setQuickview({ idx, product });\n },\n []\n );\n\n const onCloseQuickview = React.useCallback(\n (e) => {\n e.stopPropagation();\n e.preventDefault();\n closeQuickview();\n },\n [closeQuickview]\n );\n\n React.useEffect(() => () => clearTimeout(handler.current), []);\n\n return (\n \n
\n {product.DescriptionShort ? (\n {product.DisplayName}
\n\n
\n ) : null}\n \n {product.DescriptionShort}\n \n
\n \n \n
\n \n {products.map((x, i) => (\n \n \n ))}\n
\n \n\n
\n );\n}\n\nContent.propTypes = {\n className: px.string,\n data: px.shape({\n description: px.string,\n displayName: px.string,\n descriptionBackgroundUrl: px.string,\n descriptionImageUrl: px.string,\n }),\n hideImage: px.bool,\n};\n\nexport default function ProductDescriptionTab({\n className,\n id,\n labelledBy = id ? id.replace(/content/g, 'tab') : undefined,\n unwrap = false,\n ...props\n}) {\n return unwrap ? (\n \n
\n {hideImage ? null : (\n \n
\n )}\n \n
\n ) : null\n )}\n \n ) : (\n \n {videosCount === 1 ? (\n \n {videos.map((m) =>\n m?.Url && m.MediaType === 'video' && m.ThumbnailUrl ? (\n
\n \n onClickGalleryItem(m)}\n aria-label={thumbTranslator(m)}\n id={id.current}\n >\n \n \n
\n No slides to display
\n )}\n \n \n \n \n
\n
\n );\n}\n\nAccordionTable.propTypes = {\n className: px.string,\n accordionData: px.arrayOf(\n px.shape({\n content: px.arrayOf(\n px.shape({\n label: px.string,\n values: px.arrayOf(\n px.shape({\n id: px.any,\n node: px.node,\n })\n ),\n })\n ),\n rowValues: px.arrayOf(\n px.shape({\n value: px.node,\n id: px.oneOfType([px.string, px.number]),\n className: px.string,\n })\n ),\n id: px.node,\n priceInfo: px.object,\n })\n ),\n accordionHeaders: px.arrayOf(px.string),\n listDisplay: px.bool,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { useViewport, useTranslation, useOrderRequestState } from 'Common/hooks';\nimport { Url } from 'Common/utils';\nimport { AccordionTable, PureTip } from 'Common/components/ui';\nimport * as PRODUCT from '~config/product';\nimport ProductPrice from '../../ProductPrice';\nimport ProductBadge from '../../ProductBadge';\nimport ProductInput from '../../ProductInput';\nimport { Product } from 'Common/types';\nimport { GTM } from 'Common/constants';\nimport { Translation } from 'Common/components/localization';\n\nfunction isQuantityValid(value = 0) {\n const nonZeroPositiveIntegerRegex = /^[1-9][0-9]*$/;\n\n return nonZeroPositiveIntegerRegex.test(value);\n}\n\nexport default function ProductBuyInBulk({\n className,\n buyInBulkTableData,\n id,\n onAddItemToCart,\n orderLastUpdate,\n forceMobile = false,\n Price = ProductPrice,\n labelledBy = id ? id.replace(/content/g, 'tab') : undefined,\n isUserAuthenticated,\n statusTooltip,\n totalQty\n}) {\n const viewport = useViewport();\n const [isLoading, setIsLoading] = React.useState(false);\n const [rows, setRows] = React.useState({});\n const updateRow = React.useCallback(\n (rowId, state) => {\n setRows({ ...rows, [rowId]: state });\n },\n [rows]\n );\n\n const addToCartLabel = useTranslation('Form.Button.AddToCart.Label');\n const quantityLabel = useTranslation('Commerce.Product.Tabs.BuyInBulk.Quantity.Label');\n const priceLabel = useTranslation('Commerce.Product.Tabs.Price.Label');\n const typeIdLabel = useTranslation('Commerce.Product.Tabs.TypeId.Label');\n const skuLabel = useTranslation('Commerce.Product.Tabs.Sku.Label');\n const colorLabel = useTranslation('Commerce.Product.Tabs.Color.Label');\n const cartIsUpdating = useOrderRequestState();\n const [addToCartTip, setAddToCartTip] = React.useState({\n timestamp: 0,\n message: null,\n hidden: true,\n });\n\n const accordionHeaders = React.useMemo(\n () =>\n forceMobile || viewport.is.mobile\n ? [typeIdLabel, skuLabel]\n : [typeIdLabel, colorLabel, skuLabel, priceLabel, quantityLabel],\n [colorLabel, viewport, priceLabel, quantityLabel, skuLabel, typeIdLabel, forceMobile]\n );\n \n const showTip = React.useCallback(\n (tip) => (viewport.is.touch && tip ? () => alert(tip) : null),\n [viewport]\n );\n\n const statusCallback = React.useCallback(\n (code) => \n statusTooltip\n ? (successMsg, validationIssues = [], params) => {\n const setter = setAddToCartTip;\n const timestamp = Date.now();\n const placement = 'top';\n\n if (successMsg) {\n setter({ message: successMsg, params, timestamp, placement, level: 'success' });\n } else {\n const lineItem = validationIssues?.find(\n (issue) => issue.RefType === 'LineItem' && code.includes(issue.Ref)\n )?.Issue;\n\n setter({ message: lineItem, timestamp, placement, level: 'danger' });\n }\n showTip(addToCartTip);\n } : null, \n [addToCartTip, showTip, statusTooltip]\n )\n\n const onAddCart = React.useCallback(\n (code, quantity, { gtmPayload }) => {\n if (gtmPayload.ecommerce.items.length) {\n gtmPayload.ecommerce.items[0].quantity = quantity;\n }\n setIsLoading(true);\n onAddItemToCart(code, quantity, { gtmPayload, statusCallback: statusCallback(code) });\n },\n [onAddItemToCart, statusCallback]\n );\n\n React.useEffect(() => {\n setIsLoading(false);\n }, [orderLastUpdate]);\n \n const accordionData = React.useMemo(() => {\n return buyInBulkTableData.map((data) => {\n if (forceMobile || viewport.is.mobile) {\n const dropdownData = [\n {\n label: colorLabel,\n values: [\n {\n node: data.swatch,\n id: data.swatch,\n },\n ],\n },\n {\n label: priceLabel,\n values: [\n {\n node: | {header} | )}\n\n {node.value}\n | \n ))}\n {data.content?.length ? (\n\n | \n ) : null}\n \n
|---|
| \n \n \n ))}\n \n \n {facet.label ? (\n <>\n \n \n \n \n \n \n {facet.values &&\n facet.values.map((value, index) => (\n <>\n {typeof value.node === 'string' ? (\n \n \n ) : (\n // Here we provide a way to pass in a node and have it display full width like for images or buttons.\n \n {facet.values[0].node}\n \n )}\n | \n
\n \n \n onAddCart(data.id, rows[data.id]?.quantity, { gtmPayload: data.gtaPayload })\n }\n className=\"w-100 btn-primary\"\n data-toggle=\"tooltip\"\n data-placement=\"top\"\n >\n
\n ),\n id: 'addToCart',\n },\n ],\n },\n ];\n\n return {\n content: dropdownData,\n id: data.id,\n rowValues: [\n {\n value: (\n \n
\n ),\n id: data.imageUrl,\n },\n {\n value: data.id,\n id: data.id,\n },\n ],\n };\n }\n\n return {\n id: data.id,\n rowValues: [\n {\n value: (\n \n
\n ),\n id: data.imageUrl,\n },\n {\n value: data.swatch,\n id: data.swatch,\n },\n {\n value: data.id,\n id: data.id,\n },\n {\n value: - \n {features.map((feature) => (\n
- {feature} \n ))}\n
\n
\n )}\n \n );\n}\n\nProductFeatures.propTypes = {\n className: px.string,\n features: px.arrayOf(px.string),\n labelledBy: px.string,\n id: px.string,\n forceMobile: px.bool,\n};","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Product } from 'Common/types';\nimport ProductBadge from '../../ProductBadge';\nimport ProductInput from '../../ProductInput';\n\nexport default function ProductTable({\n addToCartLabel,\n className,\n gtmListValue,\n isLoading,\n isUserAuthenticated,\n statusTooltip,\n onAddItemToCart,\n productInfo,\n tableData,\n totalQty = 0,\n}) {\n return (\n \n
\n - \n {features.slice(0, Math.ceil(features.length / 2)).map((feature) => (\n
- {feature} \n ))}\n
\n
\n - \n {features.slice(Math.ceil(features.length / 2)).map((feature) => (\n
- {feature} \n ))}\n
\n \n \n
\n
\n );\n}\n\nProductTable.propTypes = {\n addToCartLabel: px.string,\n className: px.string,\n gtmListValue: px.string,\n isLoading: px.bool,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n statusTooltip: px.oneOf([false, true, undefined, null, 'top', 'bottom', 'right']),\n onAddItemToCart: px.func,\n productInfo: Product,\n tableData: px.shape({\n columns: px.arrayOf(px.string),\n rows: px.arrayOf(\n px.shape({\n values: px.arrayOf(\n px.shape({\n id: px.string,\n values: px.arrayOf(px.string),\n hasStock: px.bool,\n gtaPayload: px.object,\n })\n ),\n label: px.string,\n })\n ),\n }),\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Product } from 'Common/types';\nimport ProductBadge from '../../ProductBadge';\nimport ProductInput from '../../ProductInput';\n\nexport default function ProductTableMobile({\n addToCartLabel,\n className,\n gtmListValue,\n isLoading,\n isUserAuthenticated,\n statusTooltip,\n onAddItemToCart,\n productInfo,\n specsTableBreakpoint,\n tableData,\n totalQty = 0,\n}) {\n return (\n | \n {column}\n | \n ))}\n {onAddItemToCart ?: null}\n | |
|---|---|---|
| \n {row.label} \n | \n {row.values.map((cell) => (\n \n {cell.values.map((cellVal, index) => (\n \n {cellVal}\n {index < cell.values.length - 1 ? ', ' : null}\n \n ))}\n | \n ))}\n {onAddItemToCart ? (\n \n | \n ) : null}\n
\n \n \n
\n
\n );\n}\n\nProductTableMobile.propTypes = {\n addToCartLabel: px.string,\n className: px.string,\n gtmListValue: px.string,\n isLoading: px.bool,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n statusTooltip: px.oneOf([false, true, undefined, null, 'top', 'bottom']),\n onAddItemToCart: px.func,\n productInfo: Product,\n specsTableBreakpoint: px.number,\n tableData: px.shape({\n columns: px.arrayOf(\n px.shape({\n name: px.string,\n hasStock: px.bool,\n })\n ),\n rows: px.arrayOf(\n px.shape({\n values: px.arrayOf(\n px.shape({\n id: px.string,\n values: px.arrayOf(px.string),\n })\n ),\n label: px.string,\n })\n ),\n }),\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { useTranslation, useViewport } from 'Common/hooks';\nimport { Product } from 'Common/types';\nimport ProductTable from './ProductTable';\nimport ProductTableMobile from './ProductTableMobile';\n\nexport default function ProductSpecifications({\n className,\n forceMobile = false,\n gtmListValue,\n id,\n statusTooltip,\n isUserAuthenticated,\n labelledBy = id ? id.replace(/content/g, 'tab') : undefined,\n onAddItemToCart,\n orderLastUpdate,\n productDefinitions,\n productInfo,\n specifications,\n specsTableBreakpoint,\n totalQty = 0,\n}) {\n const viewport = useViewport();\n const [isLoading, setIsLoading] = React.useState(false);\n const addToCartLabel = useTranslation('Form.Button.AddToCart.Label');\n\n React.useEffect(() => {\n setIsLoading(false);\n }, [orderLastUpdate]);\n\n return (\n | \n {index > 0 ? | \n ))}\n |
|---|---|
| \n {row.label} \n | \n {row.values.map((cell) => (\n \n {cell.values.map((cellVal, index) => (\n \n {cellVal}\n {index < cell.values.length - 1 ? ', ' : null}\n \n ))}\n | \n ))}\n
| \n {tableData.columns.slice(1).map((column) => (\n | \n | \n ))}\n
\n {productDefinitions.map((definition) => (\n
\n ) : null}\n \n );\n}\n\nProductSpecifications.propTypes = {\n className: px.string,\n forceMobile: px.bool,\n gtmListValue: px.string,\n id: px.string,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n statusTooltip: px.oneOf([false, true, undefined, null, 'top', 'bottom', 'right']),\n labelledBy: px.string,\n onAddItemToCart: px.func,\n orderLastUpdate: px.number,\n productDefinitions: px.arrayOf(px.string),\n productInfo: Product,\n specifications: px.shape({\n tableDataMobile: px.shape({\n columns: px.arrayOf(\n px.shape({\n name: px.string,\n hasStock: px.bool,\n })\n ),\n rows: px.arrayOf(\n px.shape({\n values: px.arrayOf(\n px.shape({\n id: px.string,\n values: px.arrayOf(px.string),\n })\n ),\n label: px.string,\n })\n ),\n }),\n tableDataDesktop: px.shape({\n columns: px.arrayOf(px.string),\n rows: px.arrayOf(\n px.shape({\n values: px.arrayOf(\n px.shape({\n id: px.string,\n values: px.arrayOf(px.string),\n hasStock: px.bool,\n gtaPayload: px.object,\n })\n ),\n label: px.string,\n })\n ),\n }),\n showAddToCartButton: px.bool,\n }),\n specsTableBreakpoint: px.number,\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { AccordionTable } from 'Common/components/ui';\nimport { useTranslation, useViewport } from 'Common/hooks';\nimport ProductPrice from '../../ProductPrice';\n\nexport default function ProductIncludes({\n className,\n facetTableData,\n typeId,\n id,\n Price = ProductPrice,\n orderLastUpdate,\n onAddItemToCart,\n forceMobile = false,\n showAddToCart = true,\n labelledBy = id ? id.replace(/content/g, 'tab') : undefined,\n}) {\n const viewport = useViewport();\n const [isLoading, setIsLoading] = React.useState(false);\n const [rows, setRows] = React.useState(\n facetTableData.reduce((acc, data) => ({ ...acc, [data.id]: { quantity: data.childRelationQuantity } }), {})\n );\n\n const updateRow = React.useCallback(\n (rowId, state) => {\n setRows({ ...rows, [rowId]: state });\n },\n [rows]\n );\n\n const addToCartLabel = useTranslation('Form.Button.AddToCart.Label');\n const quantityLabel = useTranslation('Commerce.Product.Tabs.BuyInBulk.Quantity.Label');\n const priceLabel = useTranslation('Commerce.Product.Tabs.Price.Label');\n const typeIdLabel = useTranslation('Commerce.Product.Tabs.TypeId.Label');\n const skuLabel = useTranslation('Commerce.Product.Tabs.Sku.Label');\n\n const accordionHeaders = React.useMemo(() => {\n let columnHeaders = [typeIdLabel, skuLabel];\n\n if (forceMobile || viewport.is.mobile) return columnHeaders;\n if (typeId === 'Bundle') columnHeaders = columnHeaders.concat([priceLabel]);\n\n return showAddToCart\n ? columnHeaders.concat([quantityLabel, addToCartLabel])\n : columnHeaders.concat([quantityLabel]);\n }, [\n viewport,\n typeId,\n addToCartLabel,\n priceLabel,\n quantityLabel,\n skuLabel,\n typeIdLabel,\n forceMobile,\n showAddToCart,\n ]);\n\n const onAddCart = React.useCallback(\n (code, quantity, gtmPayload) => {\n if (gtmPayload.ecommerce.items.length) {\n gtmPayload.ecommerce.items[0].quantity = quantity;\n }\n setIsLoading(true);\n onAddItemToCart(code, quantity, { gtmPayload });\n },\n [onAddItemToCart]\n );\n\n React.useEffect(() => {\n setIsLoading(false);\n }, [orderLastUpdate]);\n\n const accordionData = React.useMemo(() => {\n return facetTableData.map((data) => {\n if (forceMobile || viewport.is.mobile) {\n let content = [];\n\n if (typeId === 'Bundle') {\n content = content.concat([\n {\n label: priceLabel,\n values: [\n {\n node: \n {definition}\n
\n ))}\n{data.childRelationQuantity}
,\n id: quantityLabel,\n },\n ],\n },\n ]);\n }\n\n return {\n id: data.id,\n content: showAddToCart\n ? content.concat([\n {\n label: null,\n values: [\n {\n node: (\n{data.childRelationQuantity}
,\n id: 'Commerce.Product.Tabs.BuyInBulk.Quantity.Label',\n },\n ]);\n }\n\n return {\n id: data.id,\n rowValues: showAddToCart\n ? rowValues.concat({\n value: (\n\n
\n );\n}\n\nProductAccordion.propTypes = {\n BuyInBulkTab: px.elementType,\n className: px.string,\n content: px.arrayOf(\n px.shape({\n tab: px.string,\n content: px.any,\n typeId: px.string,\n showAddToCart: px.bool,\n })\n ),\n DescriptionTab: px.elementType,\n displayOnly: px.bool,\n FeaturesTab: px.elementType,\n gtmListValue: px.string,\n hideImage: px.bool,\n hideTitle: px.bool,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n IncludesTab: px.elementType,\n multiExpansion: px.bool,\n onAddItemToCart: px.func,\n orderLastUpdate: px.number,\n pageId: px.string,\n productDefinitions: px.arrayOf(px.string),\n productInfo: Product,\n SpecificationsTab: px.elementType,\n specsTableBreakpoint: px.number,\n startExpandedIndex: px.number,\n statusTooltip: px.oneOf([false, true, undefined, null, 'top', 'bottom', 'right']),\n totalQty: px.number,\n useChevron: px.bool,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { useAction, useProductTabContent } from 'Common/hooks';\nimport { ProductAccordion as Accordion, ProductDescriptionTab } from 'Common/components/product';\nimport { customer, product, order } from '~features';\nimport * as GTM from 'Common/constants/gtm';\n\nexport default function ProductAccordion({ className, ...props }) {\n const options = useSelector(product.selectors.getOptions);\n const isUserAuthenticated = useSelector(customer.selectors.isLoggedIn);\n const productInfo = useSelector(product.selectors.getProduct);\n const productDefinitions = useSelector(product.selectors.getProductDefinitions);\n const onAddItemToCart = useAction(order.actions.addItem);\n const orderLastUpdate = useSelector(order.selectors.getLastUpdate);\n const totalQty = useSelector(order.selectors.getTotalQuantity);\n const displayOnly = React.useMemo(() => productInfo?.StockStatus === 'DisplayOnly', [productInfo]);\n const content = useProductTabContent();\n\n return content?.length ? (\n - \n {content.map((tab) => (\n
\n
\n \n ))}\n \n
\n );\n}\n\nProductGridCell.propTypes = {\n className: px.string,\n variant: Product,\n onAddToCart: px.func,\n gtmListValue: px.string,\n checkoutPageLink: px.string,\n isUserAuthenticated: px.bool,\n inputReverseButtonOrder: px.bool,\n inputNumInputButtons: px.bool,\n resetQtyAfterAdd: px.bool,\n addToCartLabel: px.string,\n NotifyMe: px.elementType,\n inputStatusTooltip: px.oneOfType([px.string, px.bool]),\n noQty: px.bool,\n notifyProps: px.objectOf(px.any),\n defaultQuantity: px.number,\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Product } from 'Common/types';\nimport { Translation } from 'Common/components/localization';\nimport ProductGridCell from './ProductGridCell';\n\nconst VAR_CLS = 'col-12 col-md-6 col-xl-4';\n\nexport default function ProductGridView({\n variants = [],\n onAddToCart,\n title,\n className,\n gtmListValue,\n checkoutPageLink,\n isUserAuthenticated,\n inputReverseButtonOrder,\n inputNumInputButtons,\n resetQtyAfterAdd,\n inputStatusTooltip,\n NotifyMe,\n googleRecaptchaV3Sitekey,\n useRecaptcha,\n totalQty = 0,\n}) {\n const props = React.useMemo(\n () => ({\n checkoutPageLink,\n isUserAuthenticated,\n gtmListValue,\n onAddToCart,\n inputReverseButtonOrder,\n inputNumInputButtons,\n resetQtyAfterAdd,\n inputStatusTooltip,\n }),\n [\n checkoutPageLink,\n isUserAuthenticated,\n gtmListValue,\n onAddToCart,\n inputReverseButtonOrder,\n inputNumInputButtons,\n resetQtyAfterAdd,\n inputStatusTooltip,\n ]\n );\n\n return (\n \n
\n \n
\n {variant.DisplayName}
\n\n
\n )}\n \n {title ? (\n
\n );\n}\n\nProductGridView.propTypes = {\n className: px.string,\n variants: px.arrayOf(Product),\n title: px.string,\n onAddToCart: px.func,\n gtmListValue: px.string,\n googleRecaptchaV3Sitekey: px.string,\n useRecaptcha: px.bool,\n checkoutPageLink: px.string,\n isUserAuthenticated: px.bool,\n inputReverseButtonOrder: px.bool,\n inputNumInputButtons: px.bool,\n resetQtyAfterAdd: px.bool,\n NotifyMe: px.elementType,\n inputStatusTooltip: px.oneOfType([px.string, px.bool]),\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { useAction } from 'Common/hooks';\nimport { LinkItem } from 'Common/types';\nimport { TAGS } from 'Common/constants/gtm';\nimport { ProductGridView as GridView } from 'Common/components/product';\nimport { NotificationSubscription } from 'Common/containers/customer';\nimport { product, order } from '~features';\n\nexport default function ProductGridView(props) {\n const onAddItemToCart = useAction(order.actions.addItem);\n const variants = useSelector(product.selectors.getChildren);\n const facets = useSelector(product.selectors.getFacets);\n const totalQty = useSelector(order.selectors.getTotalQuantity);\n const title = React.useMemo(\n () =>\n facets.length\n ? facets[0].AttributeFacetLabel ||\n facets[0].DisplayName ||\n facets[0].AttributeDisplayName ||\n facets[0].Attribute\n : 'Commerce.CatalogAttribute.Variation.FacetLabel',\n [facets]\n );\n\n return (\n \n \n
\n ) : null}\n {variants.map((variant) => (\n \n \n {products.map((product, index) => (\n \n {showQuick ? (\n
\n );\n}\n\nProductRecommendations.propTypes = {\n className: px.string,\n checkoutPageLink: px.string,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n ProductPartialView: px.elementType,\n products: px.arrayOf(Product),\n RecommendedProductCard: px.elementType,\n slidesToShow: px.number,\n trackProductQuickviewClick: px.func,\n itemStatusTooltip: px.string,\n totalQty: px.number,\n useChildTable: px.bool,\n useRelatedEntries: px.bool\n};\n","import * as React from 'react';\nimport { ProductVideo as Video } from 'Common/components/ui';\n\nconst isIOS = navigator?.platform ? /iphone|ipod|ipad/i.test(navigator.platform) : false;\n\nexport default function ProductVideo(props) {\n return ;\n}\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { Product } from 'Common/types';\nimport { Url } from 'Common/utils';\nimport * as PRODUCT from '~config/product';\nimport ProductPrice from 'Common/components/product/ProductPrice';\nimport ProductRating from 'Common/components/product/ProductRating';\nimport { Translation } from 'Common/components/localization';\nimport { ProductInfo } from 'Common/models';\n\nexport default function RecommendedProductCard({ product, onOpenQuick, onSelectProduct, index, hasBorder=false }) {\n const productLink = React.useMemo(\n () => (product ? `${product.ContentUrl}?prid=${product.ProductRecommendationId.toString()}` : null),\n [product]\n );\n\n const productReviewProviderEntityId = React.useMemo(\n () => (product ? product.ReviewProviderEntityId : null),\n [product]\n );\n\n const productUrlIsForSameSite = React.useMemo(\n () =>\n productLink ? (Url.isAbsolute(productLink) ? new URL(productLink).host === location.host : true) : false,\n [productLink]\n );\n\n const anchorTarget = React.useMemo(() => (productUrlIsForSameSite ? '_self' : '_blank'), [productUrlIsForSameSite]);\n const anchorRel = React.useMemo(\n () => (productUrlIsForSameSite ? undefined : 'noopener noreferrer'),\n [productUrlIsForSameSite]\n );\n\n const isDisplayOnly = ProductInfo.isDisplayOnly(product)\n\n return (\n \n
\n );\n}\n\nRecommendedProductCard.propTypes = {\n product: Product,\n onOpenQuick: px.func,\n onSelectProduct: px.func,\n index: px.number,\n hasBorder: px.bool\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { ProductRecommendations as Recommendations } from 'Common/components/product';\nimport { useAction } from 'Common/hooks';\nimport { RecommendedProductCard as ProductCard, ProductPartialView } from '~components/product';\nimport { order, product } from '~features';\nimport { Translation } from 'Common/components/localization';\n\nexport default function ProductRecommendations({ className, isUserAuthenticated, checkoutPageLink, useRelatedEntries=false, useChildTable=false, ...props }) {\n const trackProductQuickviewClick = useAction(product.actions.trackProductQuickviewClick);\n const products = useSelector(product.selectors.getEpiRecommedationCrossSellProducts);\n const totalQty = useSelector(order.selectors.getTotalQuantity);\n\n const fetched = React.useRef(null);\n const currentCode = useSelector(product.selectors.getSelectedCode);\n const relatedProducts = useSelector(product.selectors.getRelatedProducts);\n const fetchRelatedProducts = useAction(product.actions.fetchRelatedProducts);\n\n React.useEffect(() => {\n if (!relatedProducts && currentCode && fetched.current !== currentCode) {\n fetched.current = currentCode;\n fetchRelatedProducts(currentCode);\n }\n }, [relatedProducts, fetchRelatedProducts, currentCode]); \n\n const displayNone = React.useMemo(() => {\n return (useRelatedEntries && !relatedProducts?.length) || (!useRelatedEntries && !products?.length);\n }, [useRelatedEntries, relatedProducts, products]);\n\n return displayNone ? null : (\n <>\n {useRelatedEntries ? (\n \n \n
\n \n
\n \n
\n \n
\n \n \n {product.DisplayName}\n \n
\n {isDisplayOnly ? null : (\n \n
\n ) \n }\n \n
\n \n \n
\n
\n ) : (\n \n
\n )}\n \n \n setPlayVideo(false)}\n className=\"btn close p-3\"\n aria-label={lblStop}\n title={lblStop}\n >\n \n \n {isIOS ? (\n
\n ) : (\n \n
\n )}\n \n );\n}\n\nProductVideo.propTypes = {\n className: px.string,\n videoUrl: px.string,\n backgroundImage: px.string,\n title: px.string,\n isIOS: px.bool,\n};\n","import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { Dropdown } from 'Common/components/ui';\nimport { Cell, Grid, Row } from 'Common/components/ui/Grid';\n\nexport default function SparePartsDropdown({\n className,\n style,\n options = [],\n placeholder,\n selected,\n setSelected,\n showId = false,\n ...props\n}) {\n const sortedOptions = useMemo(() => {\n return [...options].sort((a, b) => a.Name.localeCompare(b.Name));\n }, [options]);\n\n const [isOpen, setIsOpen] = useState(false);\n const toggleOpen = useCallback(() => setIsOpen((prev) => !prev), []);\n const dropdownRef = useRef(null);\n\n const onChange = useCallback(\n (c) => {\n setSelected(c);\n setIsOpen(false);\n },\n [setSelected]\n );\n\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {\n setIsOpen(false);\n }\n };\n\n if (isOpen) {\n document.addEventListener('mousedown', handleClickOutside);\n }\n\n return () => {\n if (isOpen) {\n document.removeEventListener('mousedown', handleClickOutside);\n }\n };\n }, [isOpen]);\n\n return (\n \n \n
\n setPlayVideo(!playVideo)}\n type=\"button\"\n className=\"btn\"\n data-toggle=\"modal\"\n data-target=\"#@(uid)_Modal\"\n aria-label={lblPlay}\n title={lblPlay}\n >\n \n \n
\n {title}
\n\n
\n \n \n {sortedOptions?.map((c) => (\n \n \n onChange(c)}\n className={cx('SearchDropdownFacet__option btn btn-sm')}\n >\n {c.Name}\n {showId && c.Id ? ` (${c.Id})` : null}\n \n | \n
\n ))}\n \n \n
\n );\n}\n\nSparePartsDropdown.propTypes = {\n className: px.string,\n style: px.object,\n options: px.arrayOf(\n px.shape({\n Name: px.string,\n Id: px.oneOfType([px.string, px.number]),\n })\n ),\n placeholder: px.string,\n selected: px.shape({\n Name: px.string,\n Id: px.oneOfType([px.string, px.number]),\n }),\n setSelected: px.func,\n showId: px.bool,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { useViewport } from 'Common/hooks';\nimport { Product } from 'Common/types';\nimport { Formatter } from 'Common/utils';\nimport { Translation } from 'Common/components/localization';\nimport { ProductGallery, ProductTitle } from 'Common/components/product';\n\nfunction SparePartDetailsGrid({ sparePartInfo }) {\n return (\n \n
\n );\n}\n\nSparePartDetailsGrid.propTypes = {\n sparePartInfo: Product,\n};\n\nexport default function SparePartsPartial({\n className,\n Gallery = ProductGallery,\n galleryProps = {},\n sparePartInfo,\n sparePartTitle,\n}) {\n const viewport = useViewport();\n const isMobile = React.useMemo(() => viewport.is.lt('md'), [viewport]);\n\n return (\n \n
\n {sparePartInfo?.Code}
\n {sparePartInfo?.Price.ListPrice.Amount > 0 ? (\n <>\n \n
\n \n {Formatter.currency(\n sparePartInfo?.Price.ListPrice.Amount,\n sparePartInfo?.Price.ListPrice.Currency\n )}\n
\n \n ) : null}\n \n {!isMobile ? (\n <>\n
\n );\n}\n\nSparePartsPartial.propTypes = {\n className: px.string,\n Gallery: px.elementType,\n galleryProps: px.objectOf(px.any),\n sparePartInfo: Product,\n sparePartTitle: px.string,\n};\n","import * as React from 'react';\nimport { useLocalFeature } from 'Common/hooks';\nimport * as types from 'Common/types';\nimport { SparePartsPartial as SpareParts } from 'Common/components/product/SpareParts';\nimport { product } from '~features';\n\nexport default function SparePartsPartial({ sparePartsData = {} }) {\n const [localSelector, localAction] = useLocalFeature(product, 'product');\n const lastDataRef = React.useRef(null);\n const updateSparePartsData = localAction(product.actions.setItemDetails);\n const sparePartTitle = localSelector(product.selectors.getChildTitle);\n const sparePartInfo = localSelector(product.selectors.getProduct);\n const media = localSelector(product.selectors.getMedia);\n const mainMedia = localSelector(product.selectors.getMainMedia);\n\n React.useEffect(() => {\n if (lastDataRef.current !== sparePartsData) {\n updateSparePartsData(sparePartsData);\n lastDataRef.current = sparePartsData;\n }\n }, [sparePartsData, updateSparePartsData]);\n\n return (\n \n
\n \n
\n \n ) : (\n \n
\n )}\n \n
\n \n
\n \n
\n \n \n \n \n | \n {!isMobile ? (\n \n | \n ) : null}\n {isPriceExists && !isMobile ? (\n \n | \n ) : null}\n | \n \n {spareParts.map((part) => {\n const isOpen = selectedPartCode === part.Code;\n\n return [\n setSelectedPartCode(isOpen ? null : part.Code)}>\n | {part.Code} | \n {!isMobile ? {part.DisplayName} | : null}\n {isPriceExists && !isMobile ? (\n \n {part.Price.ListPrice.Amount > 0\n ? Formatter.currency(part.Price.ListPrice.Amount, part.Price.ListPrice.Currency)\n : null}\n | \n ) : null}\n \n \n | \n
,\n isOpen && (\n \n \n | \n \n ),\n ].filter(Boolean);\n })}\n \n
\n ) : (\n \n
\n );\n}\n\nSparePartsTable.propTypes = {\n spareParts: px.arrayOf(\n px.shape({\n Code: px.string.isRequired,\n DisplayName: px.string.isRequired,\n Price: px.shape({\n ListPrice: px.shape({\n Amount: px.number.isRequired,\n Currency: px.string.isRequired,\n }).isRequired,\n }).isRequired,\n })\n ).isRequired,\n className: px.string,\n};\n","import React, { useEffect, useState } from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { Product } from 'Common/types';\nimport { useTranslation, useViewport } from 'Common/hooks';\nimport { Loader } from 'Common/components/ui';\nimport { SparePartsDropdown, SparePartsTable } from '../SpareParts';\n\nexport default function SparePartsFinder({\n clearItemDetails,\n currentProduct,\n fetchProductDetails,\n fetchProducts,\n fetchSpareParts,\n partsLoading,\n products,\n selectedCode,\n selectedProduct,\n setItemDetails,\n setSelected,\n spareParts,\n variants,\n ...props\n}) {\n const { categories, className, desktopImage, mobileImage, style } = props;\n\n const viewport = useViewport();\n const [selectedCategory, setSelectedCategory] = useState();\n const [selectedProductOption, setSelectedProductOption] = useState();\n const [selectedVariant, setSelectedVariant] = useState();\n const [mappedChildren, setMappedChildren] = useState();\n const [showPlaceholder, setShowPlaceholder] = useState(true);\n const [showTable, setShowTable] = useState(false);\n const imageAlt = useTranslation('SpareParts.Table.Placeholder.Image.AltText');\n const categoryLbl = useTranslation('SpareParts.Finder.Category.Dropdown.Label');\n const productLbl = useTranslation('SpareParts.Finder.Product.Dropdown.Label');\n const noProductsLbl = useTranslation('SpareParts.Finder.Product.Dropdown.Empty.Label');\n const variantLbl = useTranslation('SpareParts.Finder.Variant.Dropdown.Label');\n const noVariantsLbl = useTranslation('SpareParts.Finder.Variant.Dropdown.Empty.Label');\n\n useEffect(() => {\n if (selectedCategory) {\n fetchProducts(selectedCategory.Id);\n clearSelections();\n }\n }, [clearSelections, fetchProducts, selectedCategory]);\n\n const onReset = React.useCallback(() => {\n setSelectedCategory(null);\n clearSelections();\n }, [clearSelections, setSelectedCategory]);\n\n const clearSelections = React.useCallback(() => {\n setSelectedProductOption(null);\n setSelectedVariant(null);\n setMappedChildren(null);\n onClearProduct();\n }, [onClearProduct, setMappedChildren, setSelectedProductOption, setSelectedVariant]);\n\n const onClearProduct = React.useCallback(() => {\n setSelected('');\n clearItemDetails();\n }, [setSelected, clearItemDetails]);\n\n useEffect(() => {\n if (selectedCode) {\n if (currentProduct?.Code !== selectedCode) {\n if (!selectedProduct) fetchProductDetails(selectedCode);\n else\n setItemDetails({\n Product: JSON.parse(JSON.stringify(selectedProduct)),\n ProductsByNode: products,\n });\n }\n }\n }, [\n selectedCode,\n setItemDetails,\n fetchProductDetails,\n clearItemDetails,\n selectedProduct,\n selectedProductOption,\n currentProduct,\n products,\n ]);\n\n useEffect(() => {\n if (selectedProductOption) {\n setSelected(selectedProductOption.Id);\n setSelectedVariant(null);\n }\n }, [onClearProduct, setSelected, selectedProductOption]);\n\n useEffect(() => {\n if (variants) {\n const childrenArray = Array.isArray(variants) ? variants : [variants];\n\n const mapped = childrenArray.map((c) => ({\n Name: c.DisplayName,\n Id: c.Code,\n }));\n\n setMappedChildren(mapped);\n }\n }, [variants]);\n\n useEffect(() => {\n if (selectedVariant) {\n fetchSpareParts(selectedVariant.Id);\n }\n }, [fetchSpareParts, selectedVariant]);\n\n useEffect(() => {\n if (spareParts) {\n setTimeout(() => {\n setShowPlaceholder(false);\n setTimeout(() => {\n setShowTable(true);\n }, 50);\n }, 500);\n } else {\n setTimeout(() => {\n setShowTable(false);\n setTimeout(() => {\n setShowPlaceholder(true);\n }, 50);\n }, 500);\n }\n }, [spareParts]);\n\n return (\n \n {partsLoading ?
\n
\n );\n}\n\nSparePartsFinder.propTypes = {\n categories: px.arrayOf(\n px.shape({\n Name: px.string,\n Id: px.oneOfType([px.string, px.number]),\n })\n ),\n className: px.string,\n clearItemDetails: px.func,\n currentProduct: Product,\n desktopImage: px.string,\n fetchProductDetails: px.func,\n fetchProducts: px.func,\n fetchSpareParts: px.func,\n mobileImage: px.string,\n partsLoading: px.bool,\n products: px.arrayOf(Product),\n selectedCode: px.string,\n selectedProduct: Product,\n setItemDetails: px.func,\n setSelected: px.func,\n spareParts: px.arrayOf(Product),\n style: px.object,\n variants: px.arrayOf(Product),\n};\n","import React, { useCallback, useRef, useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport { useAction } from 'Common/hooks';\nimport { product } from '~features';\nimport { SparePartsFinder as SpareParts } from 'Common/components/product/SpareParts';\n\nexport default function SparePartsFinder({ ...props }) {\n const partsLoadCount = useRef(0);\n const [partsLoading, setPartsLoading] = useState(false);\n\n const startLoader = useCallback(() => {\n partsLoadCount.current += 1;\n setPartsLoading(true);\n }, []);\n\n const stopLoader = useCallback(() => {\n partsLoadCount.current -= 1;\n if (!partsLoadCount.current) setPartsLoading(false);\n }, []);\n\n const fetchProductsByNode = useAction(product.actions.fetchProductsByNode, startLoader, stopLoader);\n const setSelectedCode = useAction(product.actions.setSelectedCode);\n const setItemDetails = useAction(product.actions.setItemDetails);\n const clearItemDetails = useAction(product.actions.clearItemDetails);\n const fetchProductDetails = useAction(product.actions.fetchProductDetails, startLoader, stopLoader);\n const fetchSpareParts = useAction(product.actions.fetchSpareParts, startLoader, stopLoader);\n const getProductsByNode = useSelector(product.selectors.getProductsByNode);\n const getChildren = useSelector(product.selectors.getChildren);\n const currentProduct = useSelector(product.selectors.getProduct);\n const selectedCode = useSelector(product.selectors.getSelectedCode);\n const selectedProduct = useSelector(product.selectors.getSelectedProduct);\n const getSpareParts = useSelector(product.selectors.getSpareParts);\n\n return (\n \n
\n {showPlaceholder && (\n
\n \n
\n )}\n {showTable && (\n \n
\n )}\n \n {data.map((doc, index) => (\n \n ))}\n
\n )\n}\n\nProductManuals.propTypes = {\n data: px.arrayOf(px.object),\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { ProductDescriptionTab } from 'Common/components/product';\nimport {\n ProductBuyInBulk,\n ProductFeatures,\n ProductSpecifications,\n ProductIncludes,\n ProductManuals\n} from './ProductTabContent/TabContent';\nimport { Translation } from '../localization';\n\nexport default function StackContent({\n className,\n displayOnly,\n onAddItemToCart,\n orderLastUpdate,\n productDefinitions,\n specsTableBreakpoint,\n stackContent,\n totalQty = 0,\n ...props\n}) {\n\n return (\n \n
\n );\n}\n\nStackContent.propTypes = {\n className: px.string,\n displayOnly: px.bool,\n onAddItemToCart: px.func,\n orderLastUpdate: px.number,\n productDefinitions: px.arrayOf(px.string),\n specsTableBreakpoint: px.number,\n stackContent: px.arrayOf(\n px.shape({\n tab: px.string,\n content: px.any,\n typeId: px.string,\n showAddToCart: px.bool,\n })\n ),\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { useAction, useProductTabContent } from 'Common/hooks';\nimport { ProductDescriptionTab, StackContent as StackContentComponent } from 'Common/components/product';\nimport { product, order } from '~features';\nimport * as GTM from 'Common/constants/gtm';\n\nexport default function StackContent({\n className,\n DescriptionTab = ProductDescriptionTab,\n pageId,\n specsTableBreakpoint,\n statusTooltip,\n isUserAuthenticated\n}) {\n const options = useSelector(product.selectors.getOptions);\n const productInfo = useSelector(product.selectors.getProduct);\n const productDefinitions = useSelector(product.selectors.getProductDefinitions);\n const onAddItemToCart = useAction(order.actions.addItem);\n const orderLastUpdate = useSelector(order.selectors.getLastUpdate);\n const totalQty = useSelector(order.selectors.getTotalQuantity);\n const displayOnly = React.useMemo(() => productInfo?.StockStatus === 'DisplayOnly', [productInfo]);\n const stackContent = useProductTabContent(true);\n\n return stackContent.length ? (\n \n {stackContent.map((tab, index) => {\n let Component = null;\n\n switch (tab.tab) {\n case 'Includes':\n Component = (\n
\n \n
\n );\n })}\n \n \n
\n {Component}\n \n
\n );\n}\n\nProductTabContent.propTypes = {\n BuyInBulkTab: px.elementType,\n className: px.string,\n DescriptionTab: px.elementType,\n displayOnly: px.bool,\n FeaturesTab: px.elementType,\n gtmListValue: px.string,\n IncludesTab: px.elementType,\n isUserAuthenticated: px.oneOfType([px.string, px.bool]),\n onAddItemToCart: px.func,\n orderLastUpdate: px.number,\n pageId: px.string,\n productDefinitions: px.arrayOf(px.string),\n productInfo: Product,\n SpecificationsTab: px.elementType,\n specsTableBreakpoint: px.number,\n statusTooltip: px.oneOf([false, true, undefined, null, 'top', 'bottom', 'left']),\n tabContent: px.arrayOf(\n px.shape({\n tab: px.string,\n content: px.any,\n typeId: px.string,\n showAddToCart: px.bool,\n })\n ),\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { useAction, useProductTabContent } from 'Common/hooks';\nimport { ProductDescriptionTab, ProductTabContent } from 'Common/components/product';\nimport { product, order } from '~features';\nimport * as GTM from 'Common/constants/gtm';\n\nexport default function TabContent({\n className,\n DescriptionTab = ProductDescriptionTab,\n pageId,\n specsTableBreakpoint,\n statusTooltip,\n isUserAuthenticated,\n}) {\n const options = useSelector(product.selectors.getOptions);\n const productInfo = useSelector(product.selectors.getProduct);\n const productDefinitions = useSelector(product.selectors.getProductDefinitions);\n const onAddItemToCart = useAction(order.actions.addItem);\n const orderLastUpdate = useSelector(order.selectors.getLastUpdate);\n const totalQty = useSelector(order.selectors.getTotalQuantity);\n const displayOnly = React.useMemo(() => productInfo?.StockStatus === 'DisplayOnly', [productInfo]);\n const tabContent = useProductTabContent();\n\n return tabContent.length ? (\n \n
\n - \n {tabContent.map((tab, index) => (\n
- \n
\n \n \n ))}\n
\n {tabContent.map((tab, index) => (\n
\n \n {viewport.is.mobile ? (\n <>\n
\n );\n}\n\nCartLineItem.propTypes = {\n viewport: px.shape({ is: px.shape({ lt: px.function, lte: px.function, mobile: px.bool }) }),\n item: types.CartLineItem,\n shipment: types.Shipment,\n getQty: px.func,\n setEditingItem: px.func,\n addItem: px.func,\n hasChange: px.func,\n lblAdd: px.string,\n lblEdit: px.string,\n editingItem: px.string,\n lblRemove: px.string,\n onChangeQty: px.func,\n onDelete: px.func,\n currency: px.string,\n isEditable: px.bool,\n QuickView: px.elementType,\n gtmListValue: px.string,\n OOS: px.bool,\n statusTooltip: px.string,\n fauxQuantity: px.oneOfType([px.string, px.number]),\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport * as types from 'Common/types';\nimport { useViewport, useTranslation } from 'Common/hooks';\nimport { GTM } from 'Common/utils';\nimport { Translation } from '../localization';\nimport { CatalogQuickView } from '../catalog';\nimport CartLineItem from './CartLineItem';\n\nexport default function CartTable({\n className,\n Forms = [],\n qtyChanges = [],\n QuickView = CatalogQuickView,\n onChangeQty,\n onDelete,\n currency,\n onAddItemToCart,\n emptyLabel = 'Commerce.Order.Cart.EmptyCart.Label',\n isEditable = true,\n gtmListValue,\n statusTooltip,\n totalQty,\n}) {\n const viewport = useViewport();\n const lblAdd = useTranslation('Commerce.Order.Cart.AddItem.Label');\n const lblEdit = useTranslation('Commerce.Order.Cart.EditItem.Label');\n const lblRemove = useTranslation('Commerce.Order.Cart.RemoveItem.Label');\n const [editingItem, setEditingItem] = React.useState(null);\n\n const itemCount = React.useMemo(\n () =>\n Forms.reduce(\n (acc, form) => acc + form.Shipments.reduce((sum, shipment) => sum + shipment.LineItems.length, 0),\n 0\n ),\n [Forms]\n );\n\n const fauxItemCount = React.useMemo(\n () =>\n Forms.reduce(\n (acc, form) =>\n acc + form.Shipments.reduce((sum, shipment) => sum + (shipment.FauxLineItems?.length || 0), 0),\n 0\n ),\n [Forms]\n );\n\n const getQty = React.useCallback(\n (shipment, item) => {\n const change = qtyChanges.find((c) => c.shipmentId === shipment.ShipmentId && c.itemCode === item.Code);\n\n return change ? change.qty : item.Quantity;\n },\n [qtyChanges]\n );\n\n const hasChange = React.useCallback(\n (shipment, item) => {\n const change = qtyChanges.find((c) => c.shipmentId === shipment.ShipmentId && c.itemCode === item.Code);\n\n return change && change.qty !== item.Quantity;\n },\n [qtyChanges]\n );\n\n const addItem = React.useMemo(\n () =>\n onAddItemToCart\n ? (lineItem, productInfo, quantity, listValue) => async () => {\n const gtmPayload = GTM.mapEntityToAddCart(\n productInfo,\n quantity,\n productInfo.Attributes,\n listValue,\n totalQty + quantity\n );\n\n await onAddItemToCart(lineItem.Code, quantity, { gtmPayload });\n }\n : null,\n [onAddItemToCart, totalQty]\n );\n\n return (\n \n
\n\n \n
\n\n {!item.IsGift && !OOS && isEditable ? (\n \n {item.DisplayName}\n
\n\n {item.ListPrice > item.SalePrice ? (\n \n
\n ) : (\n \n
\n
\n
\n )}\n\n {!OOS ? (\n \n
\n \n
\n ) : null}\n {item.Quantity}
\n ) : (\n\n
\n ) : null}\n \n ) : (\n <>\n \n
\n \n
\n \n {productInfo && onAddItem ? (\n \n \n \n ) : null}\n {productInfo?.Children?.length ? (\n \n \n \n ) : null}\n \n \n \n
\n \n
\n\n {item.ListPrice > item.SalePrice ? (\n \n
\n \n
\n \n {item.DisplayName}\n
\n \n
\n ) : (\n \n
\n
\n
\n )}\n\n {!OOS ? (\n <>\n \n
\n {item.IsGift || !isEditable ? (\n
\n {item.ListPrice > item.SalePrice ? (\n {item.Quantity}
\n ) : (\n\n
\n ) : (\n \n
\n
\n
\n )}\n \n
\n {item.AdditionalInfo\n ? item.AdditionalInfo.map((info) => (\n
\n {!item.IsGift && isEditable ? (\n \n
\n ))\n : null}\n {info}
\n\n
\n ) : null}\n \n ) : null}\n \n )}\n {OOS ? (\n \n
\n \n
\n \n {productInfo?.Children?.length && onAddItem ? (\n \n \n \n ) : null}\n {productInfo?.Children?.length ? (\n \n \n \n ) : null}\n \n \n \n
\n \n
\n ) : null}\n\n {item.ValidationMessage ? (\n \n
\n \n \n {!item.IsGift ? (\n \n
\n \n
\n \n {!item.IsGift && productInfo?.Children?.length ? (\n \n \n
\n \n
\n \n {!item.IsGift ? (\n \n \n {lblRemove}\n \n ) : null}\n
\n \n
\n ) : null}\n\n {editingItem === item.Code ? (\n \n
\n {item.ValidationMessage}
\n\n
\n ) : null}\n \n {fauxItemCount ? (\n <>\n
\n );\n}\n\nCartTable.propTypes = {\n className: px.string,\n Forms: px.arrayOf(types.CartForm),\n onChangeQty: px.func,\n onDelete: px.func,\n currency: px.string,\n qtyChanges: px.arrayOf(px.any),\n onAddItemToCart: px.func,\n isEditable: px.bool,\n QuickView: px.elementType,\n emptyLabel: px.string,\n gtmListValue: px.string,\n statusTooltip: px.string,\n totalQty: px.number,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { useTranslation } from 'Common/hooks';\nimport { Translation } from 'Common/components/localization';\n\nconst sharedPropTypes = {\n className: px.string,\n promotions: px.arrayOf(px.string),\n Promotions: px.elementType,\n promoError: px.shape({ message: px.string, timestamp: px.number, reference: px.string, type: px.string }),\n addPromotion: px.func,\n removePromotion: px.func,\n disabled: px.bool,\n};\n\nexport function DefaultPromotions({ promotions, onRemovePromo }) {\n const lblRemove = useTranslation('Commerce.Order.RemovePromo.Label');\n\n return promotions?.map((promo) => (\n \n \n
\n \n ) : null}\n \n
\n
\n \n
\n {itemCount ? (\n Forms.map((form) =>\n form.Shipments.map((shipment) =>\n shipment.LineItems.map((item) => (\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n
\n )}\n {fauxItemCount ? (\n <>\n \n
\n
\n {Forms.map((form) =>\n form.Shipments.map((shipment) =>\n shipment.FauxLineItems.map((item) => (\n \n
\n
\n ));\n}\n\nDefaultPromotions.propTypes = {\n onRemovePromo: px.func,\n promotions: px.arrayOf(px.string),\n};\n\nexport function PromoCode({\n className,\n Promotions = DefaultPromotions,\n promotions = [],\n promoError,\n code,\n addPromotion,\n removePromotion,\n onCodeChanged,\n disabled = false,\n}) {\n const placeholder = useTranslation('Commerce.Order.AddPromo.Input.PlaceHolder');\n const lastLength = React.useRef(promotions.length);\n const [showError, setShowError] = React.useState(false);\n const handleRemovePromotion = React.useCallback(\n (promo) => () => {\n if (removePromotion) {\n removePromotion(promo);\n }\n },\n [removePromotion]\n );\n\n const handleCodeChanged = React.useCallback(\n (e) => {\n if (onCodeChanged) {\n onCodeChanged(e.target.value);\n }\n },\n [onCodeChanged]\n );\n\n const handleAddPromotion = React.useCallback(() => {\n if (!promotions?.includes(code)) {\n if (addPromotion) {\n addPromotion(code);\n }\n } else {\n onCodeChanged('');\n }\n }, [code, addPromotion, onCodeChanged, promotions]);\n\n React.useEffect(() => {\n if (promotions.length > lastLength.current) {\n lastLength.current = promotions.length;\n onCodeChanged('');\n }\n }, [onCodeChanged, promotions]);\n\n React.useEffect(() => {\n if (promoError) {\n setShowError(true);\n const handle = setTimeout(() => {\n setShowError(false);\n }, 5000);\n return () => { if (handle != null) clearTimeout(handle); }\n } else {\n setShowError(false);\n }\n\n }, [promoError]);\n\n return (\n \n
\n \n \n \n \n \n \n {promo}\n
\n \n \n \n \n \n
\n \n
\n );\n}\n\nPromoCode.propTypes = {\n ...sharedPropTypes,\n onCodeChanged: px.func,\n};\n\nexport default function ConnectedPromoCode(props) {\n const [code, setCode] = React.useState('');\n\n return \n
\n \n
\n \n {\n if (e.key === 'Enter') {\n e.preventDefault();\n handleAddPromotion();\n }\n }}\n >\n \n
\n {showError ? (\n \n
\n ) : null}\n \n
\n \n
\n
\n )) ?? null\n );\n}\n\nDefaultCards.propTypes = {\n onRemoveCard: px.func,\n cards: px.arrayOf(px.shape({ CardNumber: px.string, PaymentMethodId: px.string, Balance: px.number })),\n currency: px.string,\n};\n\nexport default function GiftCard({\n className,\n currency,\n accountEmail,\n giftCards,\n onUpdate,\n GiftCards = DefaultCards,\n removePayment,\n savedGiftCards,\n noLoadingIndicator = false,\n errorMessage = '',\n id: idStr = `CheckoutGiftCard_${v4()}`,\n}) {\n const id = React.useRef(idStr);\n const [availableCards, setAvailableCards] = React.useState(filterCards(savedGiftCards || [], giftCards || []));\n const placeholder = useTranslation('Commerce.Order.AddGiftCard.Input.PlaceHolder');\n const formApi = useFormApi();\n const state = useFormState();\n const [showSpinner, setShowSpinner] = React.useState(false);\n\n const [showError, setShowError] = React.useState(false);\n const spinWrapper = React.useCallback(\n (fn) => async (...args) => {\n setShowSpinner(true);\n\n const succeeded = await fn(...args);\n\n setShowSpinner(false);\n\n return succeeded;\n },\n []\n );\n\n React.useEffect(() => {\n setAvailableCards(filterCards(savedGiftCards, giftCards));\n }, [giftCards, savedGiftCards]);\n\n const clearNumber = React.useCallback(() => {\n formApi.setValue(PAYMENT.cardNumber, '');\n }, [formApi]);\n\n const onAddCard = React.useCallback(\n (cardNumber = formApi.getValue(PAYMENT.cardNumber)) =>\n cardNumber\n ? spinWrapper(async () => {\n formApi.setError(PAYMENT.cardNumber, null);\n await onUpdate({\n ...formApi.getFormState().values,\n [PAYMENT.cardNumber]: cardNumber,\n [PAYMENT.paymentType]: 'GiftCard',\n [PAYMENT.systemName]: 'GiftCard',\n [PAYMENT.cardType]: 'GiftCard',\n [PAYMENT.address]: {\n [ADDRESS.email]: decodeURIComponent(accountEmail),\n },\n });\n clearNumber();\n })\n : () => null,\n [formApi, clearNumber, onUpdate, spinWrapper, accountEmail]\n );\n\n const handleKeyDown = React.useCallback(\n async (event) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n formApi.setError(PAYMENT.cardNumber, null);\n await onUpdate({\n ...formApi.getFormState().values,\n [PAYMENT.cardNumber]: formApi.getValue(PAYMENT.cardNumber),\n [PAYMENT.paymentType]: 'GiftCard',\n [PAYMENT.systemName]: 'GiftCard',\n [PAYMENT.cardType]: 'GiftCard',\n [PAYMENT.address]: {\n [ADDRESS.email]: decodeURIComponent(accountEmail),\n },\n });\n clearNumber();\n }\n },\n [formApi, clearNumber, accountEmail, onUpdate]\n );\n\n const onRemovePayment = React.useCallback(\n (method, number) => () =>\n spinWrapper((paymentMethodId, cardNumber) => removePayment(paymentMethodId, cardNumber))(method, number),\n [removePayment, spinWrapper]\n );\n\n React.useEffect(() => {\n if (errorMessage !== '') {\n setShowError(true);\n const handle = setTimeout(() => {\n setShowError(false);\n }, 5000);\n return () => {\n if (handle != null) clearTimeout(handle);\n };\n } else {\n setShowError(false); \n }\n }, [errorMessage]);\n\n return (\n \n
\n \n
\n \n
\n \n \n \n \n \n \n {card.CardNumber}\n
\n \n
\n \n \n \n \n
\n \n {showSpinner && !noLoadingIndicator ?
\n \n );\n}\n\nGiftCard.propTypes = {\n className: px.string,\n currency: px.string,\n accountEmail: px.string,\n giftCards: px.arrayOf(px.any),\n onUpdate: px.func,\n removePayment: px.func,\n savedGiftCards: px.arrayOf(px.any),\n noLoadingIndicator: px.bool,\n id: px.string,\n GiftCards: px.elementType,\n errorMessage: px.string,\n};\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport * as types from 'Common/types';\nimport { useViewport, useTranslation } from 'Common/hooks';\nimport { Translation } from 'Common/components/localization';\nimport { ProductTitle, ProductOptions, ProductPrice, ChildDetail } from 'Common/components/product';\n\nexport default function EditProductView({\n className,\n productTitle,\n priceInfo,\n productInfo,\n productChildren,\n currentItemStatus,\n currentChildren,\n selectedChild,\n quantity,\n facets,\n disabledFacets,\n onFacetSelect,\n clearFacets,\n onSelectChild,\n Links,\n onCancel,\n originalItemCode,\n onUpdate,\n}) {\n const viewport = useViewport();\n const addToCartToolTip = useTranslation('Form.Button.AddToCart.ToolTip.Label');\n const onUpdateVariant = React.useMemo(\n () => (onUpdate && currentChildren.length === 1 ? () => onUpdate(currentChildren[0].Code) : null),\n [onUpdate, currentChildren]\n );\n\n const buttonState = React.useMemo(\n () => (currentItemStatus?.hasStock && currentItemStatus.code !== originalItemCode ? 'active' : 'disabled'),\n [currentItemStatus, originalItemCode]\n );\n\n const showTip = React.useCallback(\n (tip) => (viewport.is.touch && buttonState === 'disabled' && tip ? () => alert(tip) : null),\n [viewport, buttonState]\n );\n\n return productInfo ? (\n \n
\n \n
\n ) : null}\n \n \n
\n {showError ||\n (state?.errors &&\n state.errors[PAYMENT.cardNumber] &&\n state.errors[PAYMENT.cardNumber] !== validation.required) ? (\n \n
\n ) : null}\n {savedGiftCards?.length ? (\n \n
\n \n
\n
\n \n \n
\n \n \n
\n \n
\n {savedGiftCards.map((giftCard) => (\n
\n \n \n
\n ))}\n {giftCard.CardNumber}
\n\n
\n \n
\n
\n ) : null;\n}\n\nEditProductView.propTypes = {\n className: px.string,\n productTitle: px.string,\n priceInfo: px.object,\n productInfo: px.object,\n productChildren: px.arrayOf(px.object),\n currentItemStatus: px.shape({\n hasStock: px.bool,\n statusDisplayName: px.string,\n code: px.string,\n }),\n currentChildren: px.arrayOf(px.object),\n selectedChild: px.object,\n facets: px.arrayOf(types.Facet),\n disabledFacets: px.object,\n onFacetSelect: px.func,\n onSelectChild: px.func,\n quantity: px.number,\n clearFacets: px.func,\n onCancel: px.func,\n originalItemCode: px.string,\n onUpdate: px.func,\n Links: px.node,\n};\n","import * as React from 'react';\nimport { useSelector } from 'react-redux';\nimport { useAction } from 'Common/hooks';\nimport { EditProductView as ProductView } from 'Common/components/cart';\nimport { product } from '~features';\n\nexport default function EditProductView(props) {\n const productTitle = useSelector(product.selectors.getChildTitle);\n const priceInfo = useSelector(product.selectors.getCurrentPriceInfo);\n const productInfo = useSelector(product.selectors.getProduct);\n const productChildren = useSelector(product.selectors.getChildren);\n const currentItemStatus = useSelector(product.selectors.getCurrentItemStatus);\n const currentChildren = useSelector(product.selectors.getCurrentChildren);\n const selectedChild = useSelector(product.selectors.getSelectedChild);\n const facets = useSelector(product.selectors.getFacets);\n const disabledFacets = useSelector(product.selectors.getDisabledFacetValues);\n const onFacetSelect = useAction(product.actions.selectFacet);\n const onSelectChild = useAction(product.actions.selectChild);\n const clearFacets = useAction(product.actions.clearFacets);\n\n return (\n \n
\n \n
\n \n
\n \n \n
\n \n \n \n
\n {Links}
\n \n {!Forms?.length || isUpdating ?
\n );\n}\n\nCartItemList.propTypes = {\n accountEmail: px.string,\n allowGiftCards: px.bool,\n};\n","import px from 'prop-types';\nimport CartLineItem from './CartLineItem';\n\nexport const OrderSummaryShape = {\n subtotal: px.number,\n handling: px.number,\n shipping: px.number,\n shippingSubTotal: px.number,\n shippingDiscount: px.number,\n orderDiscount: px.number,\n tax: px.number,\n total: px.number,\n giftCardPayments: px.arrayOf(px.shape({ CardNumber: px.string, Amount: px.number, Balance: px.number })),\n giftCardDiscount: px.number,\n totalSansGiftCards: px.number,\n discounts: px.arrayOf(\n px.shape({ label: px.string, value: px.number, id: px.string, code: px.string, discountType: px.string })\n ),\n lineItems: px.arrayOf(CartLineItem),\n};\n\nexport default px.shape(OrderSummaryShape);\n","import * as React from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { OrderSummary } from 'Common/types';\nimport { Translation, Currency } from '../localization';\nimport { Icon } from '../ui';\n\nconst IMG_MAP = {\n AmazonPay: { name: 'amazon-pay-large', sheet: 'payment', label: 'AmazonPay' },\n GooglePay: { name: 'google-pay-large', sheet: 'payment', label: 'GooglePay' },\n ApplePay: { name: 'apple-pay-large', sheet: 'payment', label: 'ApplePay' },\n PayPal: { name: 'paypal-large', sheet: 'payment', label: 'PayPal' },\n};\n\nexport default function CartSummary({\n className,\n checkoutLink,\n availablePaymentTypes = [],\n paymentTypeRowHeight = 42,\n paymentTypeCellPadding = 8,\n paymentsPerRow = 3,\n bottomSeparator,\n cartSummaryData,\n currency = 'gbp',\n disabled = false,\n}) {\n const [expandPayments, setExpandPayments] = React.useState(false);\n\n const payments = React.useMemo(() => availablePaymentTypes.map((p) => IMG_MAP[p]).filter(Boolean), [\n availablePaymentTypes,\n ]);\n\n const rows = React.useMemo(() => Math.ceil(payments.length / paymentsPerRow), [payments, paymentsPerRow]);\n const paymentWidth = React.useMemo(() => `${Math.floor(100 / paymentsPerRow)}%`, [paymentsPerRow]);\n\n const paymentsHeight = React.useMemo(\n () => `${(expandPayments ? rows : 1) * (paymentTypeRowHeight + 2 * paymentTypeCellPadding)}px`,\n [expandPayments, rows, paymentTypeRowHeight, paymentTypeCellPadding]\n );\n\n return (\n \n {hasChanges ? (\n \n ) : null}\n \n \n \n
\n \n
\n \n
\n \n
\n {allowGiftCards ? (\n \n ) : null}\n \n setExpandPayments(false)}\n >\n \n setExpandPayments(true)}\n >\n \n
}\n
\n );\n}\n\nCartSummary.propTypes = {\n className: px.string,\n properties: px.objectOf(px.string),\n bottomSeparator: px.bool,\n checkoutLink: px.string,\n subtotal: px.number,\n promo: px.number,\n tax: px.number,\n currency: px.string,\n shipping: px.number,\n disabled: px.bool,\n availablePaymentTypes: px.arrayOf(px.string),\n paymentTypeRowHeight: px.number,\n paymentTypeCellPadding: px.number,\n paymentsPerRow: px.number,\n cartSummaryData: OrderSummary,\n};\n","import * as React from 'react';\nimport px from 'prop-types';\nimport { useSelector } from 'react-redux';\nimport { CartSummary as Summary } from 'Common/components/cart';\nimport { order } from '~features';\n\nexport default function CartSummary({ bottomSeparator, checkoutLink }) {\n const cartSummaryData = useSelector(order.selectors.getCartSummaryData);\n const currency = useSelector(order.selectors.getCurrencyCode);\n const totalQty = useSelector(order.selectors.getAllItemQty);\n const availablePaymentTypes = useSelector(order.selectors.getAvailablePaymentTypes);\n\n return (\n \n \n
\n {cartSummaryData.handling > 0 ? (\n \n \n
\n ) : null}\n \n \n
\n {cartSummaryData.shippingDiscount > 0 ? (\n \n \n
\n ) : null}\n \n \n
\n {cartSummaryData.orderDiscount ? (\n \n \n
\n ) : null}\n {cartSummaryData.giftCardDiscount ? (\n \n \n
\n ) : null}\n \n \n
\n \n \n \n
\n
\n
\n
\n {rows > 1 ? (\n expandPayments ? (\n \n {payments.map((p) => (\n
\n }\n
\n
\n );\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 );\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","import useTranslation from '../useTranslation';\nimport { Formatter } from 'Common/utils';\nimport { useMemo } from 'react';\n\nexport default function useExpDateFormat(defaultFormat = 'MM / YY') {\n const dateFormat = useTranslation('Commerce.Order.Checkout.ExpirationDate.Format', null, {\n notFoundValue: defaultFormat,\n });\n\n return useMemo(() => (dateFormat ? Formatter.createMonthYearFormatter(dateFormat) : { formatStr: dateFormat }), [\n dateFormat,\n ]);\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\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 \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 { 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 {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}\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\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 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 { 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 {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 {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 { 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 { useExpDateFormat } from 'Common/hooks/payment';\n\nexport default function ExpDate({ year, month, defaultFormat = 'MM / YY', mask = 'X', forceMask = false }) {\n const formatter = useExpDateFormat(defaultFormat);\n const value = useMemo(\n () =>\n !year || !month || forceMask\n ? formatter.formatStr.replace(/[MY]/g, mask)\n : formatter.format(Number(month), Number(year)),\n [month, year, formatter, mask, forceMask]\n );\n\n return value;\n}\n\nExpDate.propTypes = {\n year: px.oneOfType([px.number, px.string]),\n month: px.oneOfType([px.number, px.string]),\n defaultFormat: px.string,\n mask: px.string,\n forceMask: px.bool,\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
\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 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 ) : null}\n\n \n
\n ) : (\n \n
\n ) : null}\n\n {!isUserAuthenticated && autosave ? (\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","export default {\n verifyUserInput: (addressVerification) => {\n if (!addressVerification?.Address && addressVerification?.VerifiedAddresses?.length === 1)\n return addressVerification.VerifiedAddresses[0];\n return null;\n },\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 React, { useRef, useState, useCallback, useEffect, useMemo } from 'react';\nimport px from 'prop-types';\nimport cx from 'classnames';\nimport { v4 as uuidv4 } from 'uuid';\nimport { Translation } from 'Common/components/localization';\nimport { useTranslation } from 'Common/hooks';\nimport { Email } from 'Common/utils';\nimport { PhoneNumberUtil } from 'google-libphonenumber';\n\nconst phoneUtil = PhoneNumberUtil.getInstance();\n\nexport default function AdvancedSubscribeForm({\n allowMultiple,\n bodyColor,\n bodyText,\n btnColor,\n btnTextColor,\n className,\n getMailchimpStatus,\n id = uuidv4(),\n mailchimpSMSRequest,\n privacyUrl,\n smsConsentText,\n subscribeToMailchimp,\n tags,\n termsUrl,\n titleColor,\n titleFontStyle,\n url,\n}) {\n const idRef = useRef(id);\n const formRef = useRef(null);\n const frameRef = useRef(null);\n const submitLbl = useTranslation('Form.Advanced.Subscription.Submit');\n\n const [email, setEmail] = useState('');\n const [smsPhone, setSmsPhone] = useState('');\n const [firstName, setFirstName] = useState('');\n const [lastName, setLastName] = useState('');\n const [birthdayMonth, setBirthdayMonth] = useState('');\n const [birthdayDay, setBirthdayDay] = useState('');\n const [zipCode, setZipCode] = useState('');\n const [smsPhoneAck, setSmsPhoneAck] = useState(false);\n const [listId, setListId] = useState('');\n const [hiddenFieldName, setHiddenFieldName] = useState('');\n const [complete, setComplete] = useState(false);\n const [submissionErrors, setSubmissionErrors] = useState([]);\n\n const isValidEmail = useMemo(() => Email.isValid(email), [email]);\n\n const hasEmailInputValue = email.trim() !== '';\n const hasPhoneInputValue = smsPhone.trim() !== '';\n const hasBirthdayMonthValue = birthdayMonth.trim() != '';\n const hasBirthdayDayValue = birthdayDay.trim() != '';\n const showForm = allowMultiple || !complete || submissionErrors.length > 0;\n\n const isValidPhone = useMemo(() => {\n if (!hasPhoneInputValue) {\n return false;\n }\n try {\n const parsedNumber = phoneUtil.parseAndKeepRawInput(smsPhone, 'US');\n\n return phoneUtil.isValidNumber(parsedNumber);\n } catch {\n return false;\n }\n }, [smsPhone, hasPhoneInputValue]);\n\n const validationErrors = useMemo(() => {\n const errors = [];\n\n if (hasEmailInputValue && !isValidEmail) {\n errors.push('Form.Advanced.Subscription.Email.Input.Error');\n }\n if (hasPhoneInputValue && !isValidPhone) {\n errors.push('Commerce.Account.PhoneNumberValidationMessage');\n }\n if (hasPhoneInputValue && !smsPhoneAck) {\n errors.push('Form.Advanced.Subscription.PhoneAck.Input.Error');\n }\n if (hasBirthdayDayValue && !hasBirthdayMonthValue) {\n errors.push('Form.Advanced.Subscription.Birthday.Input.Error');\n }\n return errors;\n }, [\n hasBirthdayDayValue,\n hasBirthdayMonthValue,\n hasEmailInputValue,\n hasPhoneInputValue,\n isValidEmail,\n isValidPhone,\n smsPhoneAck,\n ]);\n\n const isFormValid = hasEmailInputValue && validationErrors.length === 0;\n\n useEffect(() => {\n if (url) {\n const newUrl = new URL(url);\n const u = newUrl.searchParams.get('u');\n const idParam = newUrl.searchParams.get('id');\n\n setListId(idParam);\n\n if (u && idParam) {\n setHiddenFieldName(`b_${u}_${idParam}`);\n }\n }\n }, [url]);\n\n const handleSubmit = useCallback(\n async (e) => {\n e.preventDefault();\n\n if (isFormValid) {\n setComplete(false);\n setSubmissionErrors([]);\n\n if (!isValidPhone) {\n await subscribeToMailchimp(\n email,\n listId,\n firstName,\n lastName,\n birthdayMonth,\n birthdayDay,\n zipCode,\n Object.values(tags)\n );\n } else {\n const formData = {\n ...(isValidEmail && { EMAIL: email }),\n FNAME: firstName,\n LNAME: lastName,\n 'MMERGE5[month]': birthdayMonth,\n 'MMERGE5[day]': birthdayDay,\n MMERGE5: zipCode,\n tags: tags ? Object.keys(tags).join(',') : '',\n };\n\n const result = await mailchimpSMSRequest(formData, url, formRef, frameRef);\n\n if (!result?.success || result?.error) {\n setSubmissionErrors([result?.error || 'Form.Advanced.Subscription.Failure']);\n } else {\n setComplete(true);\n }\n }\n } else {\n setSubmissionErrors(['Please fill out all required fields correctly.']);\n }\n },\n [\n birthdayDay,\n birthdayMonth,\n email,\n firstName,\n isFormValid,\n isValidEmail,\n isValidPhone,\n lastName,\n listId,\n mailchimpSMSRequest,\n subscribeToMailchimp,\n tags,\n url,\n zipCode,\n ]\n );\n\n useEffect(() => {\n const frame = document.createElement('iframe');\n\n frame.name = `frame_${idRef.current}`;\n frame.style.display = 'none';\n frameRef.current = frame;\n document.body.appendChild(frame);\n\n return () => {\n document.body.removeChild(frame);\n };\n }, []);\n\n useEffect(() => {\n if (getMailchimpStatus?.message) {\n if (!getMailchimpStatus?.success) {\n setSubmissionErrors([getMailchimpStatus.message]);\n } else {\n setComplete(true);\n setSubmissionErrors([]);\n }\n\n setTimeout(() => {\n if (getMailchimpStatus?.success) {\n setComplete(false);\n } else {\n setSubmissionErrors([]);\n }\n }, 5000);\n }\n }, [getMailchimpStatus]);\n\n return (\n showForm && (\n {resultsLink}
: null}\n {!results?.length && initialResults.current?.length ? (\n \n {allowMultiple || !complete || error ? (\n
\n {complete ? (\n \n \n
\n ) : null}\n \n {error ? (\n
\n ) : null}\n \n );\n}\n\nSubscribeForm.propTypes = {\n host: px.oneOf(['MailChimp', 'Default']),\n options: px.shape({ embeddedForm: px.string }),\n className: px.string,\n id: px.string,\n style: px.any,\n allowMultiple: px.bool,\n useIcon: px.bool,\n};\n","import * as React from 'react';\nimport { useSelector } from 'react-redux';\nimport px from 'prop-types';\nimport { useAction } from 'Common/hooks';\nimport { customer } from '~features';\n\nexport default function UserEmailLoader({ email }) {\n const currentEmail = useSelector(customer.selectors.getUserEmail);\n const setEmail = useAction(customer.actions.setUserEmail);\n\n React.useEffect(() => {\n if (email && currentEmail !== email) {\n setEmail(email);\n }\n }, [currentEmail, email, setEmail]);\n\n return null;\n}\n\nUserEmailLoader.propTypes = {\n email: px.string,\n};\n","import * as React from 'react';\nimport { useSelector } from 'react-redux';\nimport { UserMessage } from 'Common/components/ui';\nimport { order } from '~features';\n\nexport default function CartLineItemUserMessage() {\n const error = useSelector(order.selectors.getLineItemValidationError);\n const lineItems = useSelector(order.selectors.getAllFauxLineItems);\n const isGift = React.useMemo(() => lineItems.find(item => item.Code === error?.reference)?.IsGift, [lineItems, error]);\n\n return \n
\n ) : (\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 {!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 { Form } from 'informed';\nimport get from 'lodash.get';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport $ from 'jquery';\nimport * as types from 'Common/types';\nimport { useTranslation } from 'Common/hooks';\nimport { useExpDateFormat } from 'Common/hooks/payment';\nimport { CreditCard } from 'Common/utils';\nimport { PAYMENT, ADDRESS } from 'Common/constants/fields';\nimport { Modal /*, ToolTip */ } from '../ui';\nimport { Translation } from '../localization';\nimport PaymentBlock from '../checkout/PaymentBlock';\nimport { CreditCard as CardForm } from '../forms/Payment/types';\n\nfunction ScrollToForm() {\n $('html, body').animate({ scrollTop: $('#CustomerPaymentManagerForm').offset().top });\n}\n\nfunction paymentName(pmt) {\n return (\n pmt[PAYMENT.customerName] ||\n [\n get(pmt, `${PAYMENT.address}.${ADDRESS.firstName}`, pmt[ADDRESS.firstName]),\n get(pmt, `${PAYMENT.address}.${ADDRESS.lastName}`, pmt[ADDRESS.lastName]),\n ]\n .filter(Boolean)\n .join(' ')\n );\n}\n\nfunction paymentSort(a, b) {\n if (!a) return 1;\n if (!b) return -1;\n if (a[PAYMENT.isDefault]) return -1;\n if (b[PAYMENT.isDefault]) return 1;\n\n const aName = paymentName(a);\n const bName = paymentName(b);\n\n if (aName < bName) return -1;\n if (bName < aName) return 1;\n return 0;\n}\n\nexport default function CustomerPaymentManager({\n className,\n onFetchPayments,\n onSetDefault,\n onRemovePayment,\n onAddPayment,\n savedPayments,\n paymentMethod,\n useFullBillingAddress,\n defaultCountry,\n siteId,\n}) {\n const formApi = React.useRef(null);\n const closeLabel = useTranslation('Commerce.Account.CancelLabel');\n const confirmLabel = useTranslation('Commerce.Account.ConfirmLabel');\n const headerLabel = useTranslation('Commerce.Account.DeleteModalLabel');\n const bodyText = useTranslation('Commerce.Account.DeleteCardModalBodyText');\n const [selectedCard, setSelectedCard] = React.useState(null);\n const lblDefault = useTranslation('Commerce.Account.DefaultPayment.Label');\n const lblRemove = useTranslation('Commerce.Account.DeletePayment.Label');\n const [isSavingCard, setIsSavingCard] = React.useState(false);\n const formatter = useExpDateFormat();\n\n const payments = React.useMemo(\n () =>\n savedPayments\n ? savedPayments\n .filter((p) => p?.Id)\n .map((payment) =>\n CreditCard.paymentToForm({ payment, method: paymentMethod, formatter, savePayment: true })\n )\n .sort(paymentSort)\n : [],\n [savedPayments, paymentMethod, formatter]\n );\n\n const submitPayment = React.useCallback(\n async ({ values }) => {\n setIsSavingCard(true);\n await onAddPayment(values, paymentMethod);\n setSelectedCard(null);\n setIsSavingCard(false);\n },\n [onAddPayment, paymentMethod, setIsSavingCard]\n );\n\n const cancelPayment = React.useCallback(() => {\n setIsSavingCard(false);\n setSelectedCard(null);\n }, []);\n\n const onClick = React.useCallback(() => {\n setSelectedCard('new');\n ScrollToForm();\n }, [setSelectedCard]);\n\n React.useEffect(() => {\n onFetchPayments();\n }, [onFetchPayments]);\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 \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 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 {key}
\n {value.map((subs) => {\n return (\n\n
\n );\n })}\n \n
\n {subs?.NotificationLabel}
\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 * 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 {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
\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 * 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 {orderGiftCards?.length ? (\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","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","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","import { useRef, useEffect } from 'react';\nimport px from 'prop-types';\nimport { useDispatch } from 'react-redux';\nimport { localization } from '~features';\n\nexport default function TranslationLoader({ strings }) {\n const dispatch = useDispatch();\n const stringsRef = useRef();\n\n useEffect(() => {\n if (strings && stringsRef.current !== strings) {\n stringsRef.current = strings;\n dispatch(localization.actions.updateStrings(strings));\n }\n }, [strings, dispatch]);\n\n return null;\n}\n\nTranslationLoader.propTypes = {\n strings: px.objectOf(px.string),\n};\n","import * as React from 'react';\nimport { v4 } from 'uuid';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport { useTranslator } from 'Common/hooks';\n\nexport default function LanguageSelector({\n className,\n disabled = false,\n dropdownClass,\n id: idProp = `LanguageSelector-${v4()}`,\n languages = [],\n onChange,\n setDefaultLanguage = false,\n}) {\n const id = React.useRef(idProp);\n const selected = React.useMemo(\n () => languages.find((lang) => lang.Selected) || { Value: 'en', Text: 'English', Selected: true },\n [languages]\n );\n\n const template = useTranslator('Header.SelectLanguage.Label', { language: selected.Text });\n const label = React.useCallback((lang) => template({ language: lang.Text }), [template]);\n const onClick = React.useCallback(\n (lang) => (lang.Selected ? null : () => onChange(lang.Value, setDefaultLanguage)),\n [onChange, setDefaultLanguage]\n );\n\n const isAccountSettings = React.useMemo(() => className?.includes('account-settings'), [className]);\n\n return languages.length > 1 ? (\n \n \n
\n {viewport.is.mobile ? null : (\n \n \n
\n )}\n {loading ? \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\nBackgroundVideo.propTypes = {\n children: px.node,\n className: px.string,\n hideOnMobile: px.bool,\n id: px.string,\n mobileSrc: px.string,\n mobileVideoSize: px.string,\n src: px.string.isRequired,\n style: px.objectOf(px.any),\n videoAutoPlay: px.bool,\n videoSize: px.string,\n};\n","import React, { useEffect, useState } from 'react';\nimport cx from 'classnames';\nimport px from 'prop-types';\nimport debounce from 'lodash.debounce';\nimport { Icon } from 'Common/components/ui';\nimport { useTranslation } from 'Common/hooks';\n\n/**\n * Scrolls to the top of the page.\n */\nfunction scrollToTop() {\n window.scrollTo({\n top: 0,\n behavior: 'smooth',\n });\n}\n\n/**\n * Floating action button that scrolls to the top of the page when clicked.\n *\n * @param {Props} Properties\n * @returns {Element}\n */\nexport default function ScrollToTopFab({ className, style }) {\n const [isVisible, setIsVisible] = useState(window.scrollY > 0);\n const btnLbl = useTranslation('ScrollToTop.Button.Label');\n\n useEffect(() => {\n function handleScroll() {\n setIsVisible(window.scrollY > 0);\n }\n\n window.addEventListener('scroll', debounce(handleScroll, 200));\n\n return () => {\n window.removeEventListener('scroll', handleScroll);\n };\n }, []);\n\n return (\n \n \n \n \n \n
\n {facet?.Values?.length ? (\n
\n ) : (\n \n
\n {facet?.Values?.length ? (\n \n
\n ) : null}\n \n
\n \n {facet.Values.slice(0, sliceIdx).map((option) => (\n \n {}}\n />\n
\n {sliceIdx !== facet.Values.length ? (\n {option?.Label}
\n \n ))}\n \n {facet.Values.slice(sliceIdx).map((option) => (\n \n {}}\n />\n
\n ) : null}\n {option?.Label}
\n \n ))}\n \n \n
\n \n \n \n \n
\n \n
\n {facet.DisplayName ?? attributeName}
\n- \n {facet.Values.map((value) => (\n
- \n