\n\n \n \n )}\n \n );\n}\n\n\nProductReviews.propTypes = {\n productId: PropTypes.number,\n returnUrl: PropTypes.string\n}\n\n\nexport default ProductReviews;","import { blurImage } from 'lib/Constants/blurImage';\nimport Style from './ImageSlider.module.scss';\n\n\n\nexport function getSlides({ images, videos, setImages = null }){\n const defaultSlide = { name: \"default image\", image_url: blurImage, description: \"default image\", zoom_url: blurImage \n}\n const parsedImages = ( (images && typeof images === \"string\") ? JSON.parse(images) : images ) ?? [ defaultSlide ];\n const parsedVideos = ( (videos && typeof videos === \"string\") ? JSON.parse(videos) : videos ) ?? \"\";\n \n const slidesImgVideo = [\n ...parsedImages, \n ...parsedVideos\n ];\n\n // if we have product set images, add them in there too\n // const productSetImg = setImages && setImages.map(img => {\n // return{\n // image_url: img,\n // description: \"product set image\",\n // zoom_url: img\n // }\n // })\n\n return [ ...slidesImgVideo ]\n}\n\n\n\n// should probably update the api data to just have the youtube video ID\nexport const getYoutubeId = (video) => {\n const key = Object.keys(video)[0];\n const id = video[key].includes(\"https://youtu.be\") ? video[key].split(\"https://youtu.be/\")[1] : video[key].split(\"v=\")[1];\n\n return id;\n}\n\n\nexport const getYoutubeUrl = (videoObj) => {\n const id = getYoutubeId(videoObj)\n return id ? `https://www.youtube.com/embed/${id}` : null;\n\n}\n\n\nexport const getYoutubeImage = (slide) => {\n const id = getYoutubeId(slide);\n\n return id ? `https://img.youtube.com/vi/${id}/0.jpg` : null\n}\n\n\n\nexport function thumbnailPlugin(mainRef){\n return ( slider ) => {\n function removeActive() {\n slider.slides.forEach((slide) => {\n slide.classList.remove(Style.active)\n })\n }\n\n function addActive(idx) {\n slider.slides[idx].classList.add(Style.active)\n }\n\n function addClickEvents() {\n slider.slides.forEach((slide, idx) => {\n slide.addEventListener(\"click\", () => {\n if (mainRef.current){\n mainRef.current.moveToIdx(idx)\n }\n })\n })\n }\n\n\n slider.on(\"created\", () => {\n if (!mainRef.current){ return }\n\n addActive(slider.track.details.rel)\n addClickEvents()\n\n mainRef.current.on(\"animationStarted\", (main) => {\n const next = main.animator.targetIdx || 0\n\n removeActive()\n addActive(main.track.absToRel(next))\n\n slider.moveToIdx(Math.min(slider.track.details.maxIdx, next))\n })\n })\n\n }\n}\n\n\n\n","/* eslint-disable react-hooks/exhaustive-deps */\nimport { getFileName } from \"components/applications/plp/components/Pod/Pod.helpers\";\nimport { blurImage } from 'lib/Constants/blurImage';\nimport { cloudinaryProductImageLoader } from \"thirdparty/Cloudinary/cloudinaryLoader\";\nimport Image from \"next/image\";\nimport { useEffect, useState } from \"react\";\n\n\nfunction SliderImage({ image_url = \"\", description, width, height, isLoaded = false }){\n const [ fileName, setFileName ] = useState(blurImage)\n\n\n useEffect(() => {\n const fileName = image_url ? getFileName(image_url) : null;\n setFileName(fileName)\n\n }, [])\n\n \n return(\n \n )\n}\n\nexport default SliderImage;","import { useContext, useEffect } from \"react\"\nimport { ProductOptionContext } from \"../../contexts/ProductOptionContext\"\nimport Image from \"next/image\"\nimport Style from './ImageSlider.module.scss';\nimport { blurImage } from 'lib/Constants/blurImage';\n\nfunction GlobalHoverImage({ slideHasChanged }){\n const [ global, dispatch ] = useContext(ProductOptionContext)\n\n useEffect(() => {\n dispatch({\n type: \"setHoverImage\",\n data: null\n })\n\n }, [ slideHasChanged?.track?.details?.abs ])\n\n\n return(\n <>\n {(global.hoverImage) && (\n \n )}\n \n )\n}\n\n\nexport default GlobalHoverImage","import { blurImage } from 'lib/Constants/blurImage';\nimport Image from \"next/image\";\nimport Style from \"./ImageZoom.module.scss\";\nimport { use, useEffect, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\n\n\n\nfunction ImageZoom({ \n className, \n src, \n alt, \n zoomSrc, \n width = 800,\n height = 800\n}) {\n const resultRef = useRef(null);\n const lens = useRef(null);\n const imgRef = useRef(null);\n const cx = useRef(null);\n const cy = useRef(null);\n\n const [ zoomResult, setZoomResult ] = useState(false);\n\n\n function getCursorPos(e) {\n let img, x = 0, y = 0;\n\n e = e || window.event;\n /* Get the x and y positions of the image: */\n img = imgRef.current.getBoundingClientRect();\n\n /* Calculate the cursor's x and y coordinates, relative to the image: */\n x = e.pageX - img.left;\n y = e.pageY - img.top;\n\n /* Consider any page scrolling: */\n x = x - window.pageXOffset;\n y = y - window.pageYOffset;\n\n return { x, y };\n }\n\n\n\n function moveLens(e, img) {\n if( lens.current ){\n let pos, x, y;\n\n /* Prevent any other actions that may occur when moving over the image */\n e.preventDefault();\n\n /* Get the cursor's x and y positions: */\n pos = getCursorPos(e);\n\n /* Calculate the position of the lens: */\n x = pos.x - (lens.current.offsetWidth / 2);\n y = pos.y - (lens.current.offsetHeight / 2);\n\n /* Prevent the lens from being positioned outside the image: */\n if (x > img.width - lens.current.offsetWidth) {x = img.width - lens.current.offsetWidth;}\n if (x < 0) {x = 0;}\n if (y > img.height - lens.current.offsetHeight) {y = img.height - lens.current.offsetHeight;}\n if (y < 0) {y = 0;}\n\n lens.current.style.left = x + \"px\";\n lens.current.style.top = y + \"px\";\n\n /* Display what the lens \"sees\": */\n resultRef.current.style.backgroundPosition = \"-\" + (x * cx.current) + \"px -\" + (y * cy.current) + \"px\";\n }\n }\n\n\n \n\n useEffect(() => {\n if( zoomResult ){\n lens.current = document.createElement(\"div\");\n lens.current.setAttribute(\"class\", Style.lens);\n imgRef.current.parentElement.insertBefore(lens.current, imgRef.current);\n\n lens.current.addEventListener(\"mousemove\", (e) => moveLens(e, imgRef.current));\n\n cx.current = resultRef.current.offsetWidth / lens.current.offsetWidth;\n cy.current = resultRef.current.offsetHeight / lens.current.offsetHeight;\n\n resultRef.current.style.backgroundImage = `url(${zoomSrc})`;\n resultRef.current.style.backgroundSize = (imgRef.current.width * cx.current) + \"px \" + (imgRef.current.height * cy.current) + \"px\";\n }\n\n return () => {\n lens.current?.remove();\n resultRef.current = null;\n cx.current = null;\n cy.current = null;\n }\n\n }, [ \n zoomResult,\n resultRef.current,\n imgRef.current,\n zoomSrc,\n cx.current,\n cy.current,\n lens.current\n ])\n\n\n\n return(\n setZoomResult(!zoomResult)}\n >\n \n\n moveLens(e, imgRef.current)}\n {...{ width, height, alt, src, className }}\n />\n\n {/*
\n \n \n Click to Zoom\n \n
*/}\n \n )\n}\n\nexport default ImageZoom;","//Color Disclaimer for PDP\nexport const colorDisclaimerTxt = \"Colors may vary based on differences in monitors, lighting, dye lots, and fibers. If you’re shopping for fabrics, order swatches to most accurately view colors. Order up to 3 premium swatches for $10, credited toward your next purchase.\"\n","import { colorDisclaimerTxt } from \"lib/Constants/colorDisclaimerTxt\";\nimport Style from \"./ColorDisclaimerText.module.scss\";\n\n\nfunction ColorDisclaimerText({ show = false }){\n return(\n <>\n {show && (\n
\n \n \n )\n}\n\n\nexport default BreadcrumbLoader;","\"use client\"\n\n/* eslint-disable react-hooks/exhaustive-deps */\n/** @format */\n\n\n/**\n * Nextjs-Breadcrumbs by Niklas NiklasMencke\n * Highly Modified for AuthenTEAK\n * https://github.com/NiklasMencke/nextjs-breadcrumbs\n */\n\nimport React, { useEffect, useState } from 'react';\nimport Link from 'next/link';\nimport useExportBreadcrumbPath from 'custom_hooks/useExportBreadcrumbPath';\nimport toTitleCase from 'lib/Utils/toTitleCase';\nimport BreadcrumbLoader from './BreadcrumbLoader';\n\n\n/**\n * Takes an URL String and removes query params and hash params\n *\n * @param url - The URL string\n * @returns The transformed URL string\n *\n */\n\nconst getPathFromUrl = (url: string): string => {\n return url.split(/[?#]/)[0];\n};\n\n\n/**\n * Takes a breadcrumb title (from url path) and replaces\n * special chars to more readable chars\n *\n * @param title - The breadcrumb title\n * @returns The transformed title or the result of the custom transformLabel function\n *\n */\n\nconst convertBreadcrumb = (\n title: string,\n toUpperCase: boolean | undefined,\n replaceCharacterList: Array | undefined,\n transformLabel ? : ((title: string) => React.ReactNode) | undefined\n\n): React.ReactNode => {\n\n let transformedTitle = getPathFromUrl(title);\n\n if (transformLabel) {\n return transformLabel(transformedTitle);\n }\n\n if (replaceCharacterList) {\n for (let i = 0; i < replaceCharacterList.length; i++) {\n transformedTitle = typeof transformedTitle === \"string\" ? transformedTitle.replaceAll(\n replaceCharacterList?.[i]?.from ?? \"\",\n replaceCharacterList?.[i]?.to ?? \"\"\n ) : \"\";\n }\n }\n\n\n // decode for utf-8 characters and return ascii. \n return (\n \n {toUpperCase ? decodeURI(transformedTitle).toUpperCase() : decodeURI(transformedTitle)}\n \n );\n};\n\n\n\nexport interface Breadcrumb {\n /** Breadcrumb title. Example: 'blog-entries' */\n breadcrumb: string;\n\n /** The URL which the breadcrumb points to. Example: 'blog/blog-entries' */\n href: string;\n}\n\nexport interface CharacterMap {\n /** The source character or character pattern that should be replaced (e.g. 'ae') */\n from: string;\n\n /** The replacement into which the character should be replaced. */\n to: string;\n}\n\nexport interface BreadcrumbsProps {\n /** If true, the default styles are used.\n * Make sure to import the CSS in _app.js\n * Example: true Default: false */\n useDefaultStyle ? : boolean;\n\n /** The title for the very first breadcrumb pointing to the root directory. Example: '/' Default: 'HOME' */\n rootLabel ? : string | null;\n\n /** Boolean indicator whether the root label should be omitted. Example: true Default: false */\n omitRootLabel ? : boolean;\n\n /** Boolean indicator if the labels should be displayed as uppercase. Example: true Default: false */\n labelsToUppercase ? : boolean | undefined;\n\n /** Array containing a list of specific characters that should be replaced in the label. This can be useful to convert special characters such as vowels. Example: [{ from: 'ae', to: 'ä' }, { from: '-', to: ' '}] Default: [{ from: '-', to: ' ' }] */\n replaceCharacterList ? : Array < CharacterMap > | undefined;\n\n /** A transformation function that allows to customize the label strings. Receives the label string and has to return a string or React Component */\n transformLabel ? : ((title: string) => React.ReactNode) | undefined;\n\n /** Array containing all the indexes of the path that should be omitted and not be rendered as labels. If we have a path like '/home/category/1' then you might want to pass '[2]' here, which omits the breadcrumb label '1'. Indexes start with 0. Example: [2] Default: undefined */\n omitIndexList ? : Array < number > | undefined;\n\n /** An inline style object for the outer container */\n containerStyle ? : any | null;\n\n /** Classes to be used for the outer container. Won't be used if useDefaultStyle is true */\n containerClassName ? : string;\n\n /** An inline style object for the breadcrumb list */\n listStyle ? : any | null;\n\n /** Classes to be used for the breadcrumb list */\n listClassName ? : string;\n\n /** An inline style object for the inactive breadcrumb list item */\n inactiveItemStyle ? : any | null;\n\n /** Classes to be used for the inactive breadcrumb list item */\n inactiveItemClassName ? : string;\n\n /** An inline style object for the active breadcrumb list item */\n activeItemStyle ? : any | null;\n\n /** Classes to be used for the active breadcrumb list item */\n activeItemClassName ? : string;\n\n /** class for the link */\n linkClassName ? : string;\n\n /** custom url path for a bespoke breadcrumb */\n customPath ? : string;\n\n /** path array for json schema */\n // exportPath ? : ((array: Array