\r\n \r\n \r\n );\r\n};\r\n\r\nexport default Card;\r\n","\r\n\r\nconst setDataToCookies = (cookieName, cookieValue, accessPath) => {\r\n const expiryDate = new Date();\r\n expiryDate.setTime(expiryDate.getTime() + 1 * 60 * 60 * 1000);\r\n document.cookie = `${cookieName}=${encodeURIComponent(\r\n JSON.stringify(cookieValue)\r\n )}; expires=${expiryDate.toUTCString()}; path=${accessPath}`;\r\n};\r\n\r\nconst removeDataFromCookie = (cookieName, accessPath) => {\r\n const expiryDate = new Date(0);\r\n document.cookie = `${cookieName}=; expires=${expiryDate.toUTCString()}; path=${accessPath}`;\r\n};\r\n\r\nconst setDataToCookiesWithExpirationTime = (\r\n cookieName,\r\n cookieValue,\r\n expiryDate,\r\n accessPath\r\n) => {\r\n document.cookie = `${cookieName}=${encodeURIComponent(\r\n JSON.stringify(cookieValue)\r\n )}; expires=${expiryDate.toUTCString()}; path=${accessPath}`;\r\n};\r\n\r\nconst getDataFromCookies = (cookieName) => {\r\n const cookies = document.cookie.split(\"; \");\r\n let cookieValue = null;\r\n for (let i = 0; i < cookies.length; i++) {\r\n const cookie = cookies[i].split(\"=\");\r\n if (cookie[0] === cookieName) {\r\n cookieValue = decodeURIComponent(cookie[1]);\r\n break;\r\n }\r\n }\r\n let returnValue = null;\r\n if (cookieValue) {\r\n try {\r\n returnValue = JSON.parse(cookieValue);\r\n } catch (error) {\r\n console.error(\"Error parsing JSON from cookie:\", error);\r\n \r\n }\r\n }\r\n return returnValue;\r\n};\r\n\r\nconst setProductIdsArrayToCookies = (product_id) => {\r\n const cookieName = \"t-a3%)/`$o\";\r\n const expiryDate = new Date();\r\n expiryDate.setDate(expiryDate.getDate() + 365);\r\n const cookies = document.cookie.split(\"; \");\r\n let cookieValue = null;\r\n for (let i = 0; i < cookies.length; i++) {\r\n const cookie = cookies[i].split(\"=\");\r\n if (cookie[0] === cookieName) {\r\n cookieValue = decodeURIComponent(cookie[1]);\r\n break;\r\n }\r\n }\r\n let cookieArray = [];\r\n if (cookieValue) {\r\n try {\r\n cookieArray = JSON.parse(cookieValue);\r\n } catch (error) {\r\n console.error(\"Error parsing JSON from cookie:\", error);\r\n // if (error.message.includes(\"Failed to fetch\")) {\r\n // navigate(\"/serviceUnavailable\");\r\n // }\r\n }\r\n }\r\n const index = cookieArray.indexOf(product_id);\r\n if (index !== -1) {\r\n cookieArray.splice(index, 1);\r\n } else {\r\n if (cookieArray.length >= 30) {\r\n cookieArray.pop();\r\n }\r\n }\r\n cookieArray.unshift(product_id);\r\n document.cookie = `${cookieName}=${encodeURIComponent(\r\n JSON.stringify(cookieArray)\r\n )}; expires=${expiryDate.toUTCString()}; path=/`;\r\n};\r\n\r\nexport {\r\n setDataToCookies,\r\n getDataFromCookies,\r\n setProductIdsArrayToCookies,\r\n setDataToCookiesWithExpirationTime,\r\n removeDataFromCookie,\r\n};\r\n","import type { ObserverInstanceCallback } from \"./index\";\n\nconst observerMap = new Map<\n string,\n {\n id: string;\n observer: IntersectionObserver;\n elements: Map>;\n }\n>();\n\nconst RootIds: WeakMap = new WeakMap();\nlet rootId = 0;\n\nlet unsupportedValue: boolean | undefined = undefined;\n\n/**\n * What should be the default behavior if the IntersectionObserver is unsupported?\n * Ideally the polyfill has been loaded, you can have the following happen:\n * - `undefined`: Throw an error\n * - `true` or `false`: Set the `inView` value to this regardless of intersection state\n * **/\nexport function defaultFallbackInView(inView: boolean | undefined) {\n unsupportedValue = inView;\n}\n\n/**\n * Generate a unique ID for the root element\n * @param root\n */\nfunction getRootId(root: IntersectionObserverInit[\"root\"]) {\n if (!root) return \"0\";\n if (RootIds.has(root)) return RootIds.get(root);\n rootId += 1;\n RootIds.set(root, rootId.toString());\n return RootIds.get(root);\n}\n\n/**\n * Convert the options to a string Id, based on the values.\n * Ensures we can reuse the same observer when observing elements with the same options.\n * @param options\n */\nexport function optionsToId(options: IntersectionObserverInit) {\n return Object.keys(options)\n .sort()\n .filter(\n (key) => options[key as keyof IntersectionObserverInit] !== undefined,\n )\n .map((key) => {\n return `${key}_${\n key === \"root\"\n ? getRootId(options.root)\n : options[key as keyof IntersectionObserverInit]\n }`;\n })\n .toString();\n}\n\nfunction createObserver(options: IntersectionObserverInit) {\n // Create a unique ID for this observer instance, based on the root, root margin and threshold.\n const id = optionsToId(options);\n let instance = observerMap.get(id);\n\n if (!instance) {\n // Create a map of elements this observer is going to observe. Each element has a list of callbacks that should be triggered, once it comes into view.\n const elements = new Map>();\n // biome-ignore lint/style/useConst: It's fine to use let here, as we are going to assign it later\n let thresholds: number[] | readonly number[];\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n // While it would be nice if you could just look at isIntersecting to determine if the component is inside the viewport, browsers can't agree on how to use it.\n // -Firefox ignores `threshold` when considering `isIntersecting`, so it will never be false again if `threshold` is > 0\n const inView =\n entry.isIntersecting &&\n thresholds.some((threshold) => entry.intersectionRatio >= threshold);\n\n // @ts-ignore support IntersectionObserver v2\n if (options.trackVisibility && typeof entry.isVisible === \"undefined\") {\n // The browser doesn't support Intersection Observer v2, falling back to v1 behavior.\n // @ts-ignore\n entry.isVisible = inView;\n }\n\n elements.get(entry.target)?.forEach((callback) => {\n callback(inView, entry);\n });\n });\n }, options);\n\n // Ensure we have a valid thresholds array. If not, use the threshold from the options\n thresholds =\n observer.thresholds ||\n (Array.isArray(options.threshold)\n ? options.threshold\n : [options.threshold || 0]);\n\n instance = {\n id,\n observer,\n elements,\n };\n\n observerMap.set(id, instance);\n }\n\n return instance;\n}\n\n/**\n * @param element - DOM Element to observe\n * @param callback - Callback function to trigger when intersection status changes\n * @param options - Intersection Observer options\n * @param fallbackInView - Fallback inView value.\n * @return Function - Cleanup function that should be triggered to unregister the observer\n */\nexport function observe(\n element: Element,\n callback: ObserverInstanceCallback,\n options: IntersectionObserverInit = {},\n fallbackInView = unsupportedValue,\n) {\n if (\n typeof window.IntersectionObserver === \"undefined\" &&\n fallbackInView !== undefined\n ) {\n const bounds = element.getBoundingClientRect();\n callback(fallbackInView, {\n isIntersecting: fallbackInView,\n target: element,\n intersectionRatio:\n typeof options.threshold === \"number\" ? options.threshold : 0,\n time: 0,\n boundingClientRect: bounds,\n intersectionRect: bounds,\n rootBounds: bounds,\n });\n return () => {\n // Nothing to cleanup\n };\n }\n // An observer with the same options can be reused, so lets use this fact\n const { id, observer, elements } = createObserver(options);\n\n // Register the callback listener for this element\n const callbacks = elements.get(element) || [];\n if (!elements.has(element)) {\n elements.set(element, callbacks);\n }\n\n callbacks.push(callback);\n observer.observe(element);\n\n return function unobserve() {\n // Remove the callback from the callback list\n callbacks.splice(callbacks.indexOf(callback), 1);\n\n if (callbacks.length === 0) {\n // No more callback exists for element, so destroy it\n elements.delete(element);\n observer.unobserve(element);\n }\n\n if (elements.size === 0) {\n // No more elements are being observer by this instance, so destroy it\n observer.disconnect();\n observerMap.delete(id);\n }\n };\n}\n","import * as React from \"react\";\nimport type { IntersectionObserverProps, PlainChildrenProps } from \"./index\";\nimport { observe } from \"./observe\";\n\ntype State = {\n inView: boolean;\n entry?: IntersectionObserverEntry;\n};\n\nfunction isPlainChildren(\n props: IntersectionObserverProps | PlainChildrenProps,\n): props is PlainChildrenProps {\n return typeof props.children !== \"function\";\n}\n\n/**\n ## Render props\n\n To use the `` component, you pass it a function. It will be called\n whenever the state changes, with the new value of `inView`. In addition to the\n `inView` prop, children also receive a `ref` that should be set on the\n containing DOM element. This is the element that the IntersectionObserver will\n monitor.\n\n If you need it, you can also access the\n [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)\n on `entry`, giving you access to all the details about the current intersection\n state.\n\n ```jsx\n import { InView } from 'react-intersection-observer';\n\n const Component = () => (\n \n {({ inView, ref, entry }) => (\n
\n
{`Header inside viewport ${inView}.`}
\n
\n )}\n \n );\n\n export default Component;\n ```\n\n ## Plain children\n\n You can pass any element to the ``, and it will handle creating the\n wrapping DOM element. Add a handler to the `onChange` method, and control the\n state in your own component. Any extra props you add to `` will be\n passed to the HTML element, allowing you set the `className`, `style`, etc.\n\n ```jsx\n import { InView } from 'react-intersection-observer';\n\n const Component = () => (\n console.log('Inview:', inView)}>\n
Plain children are always rendered. Use onChange to monitor state.
\n \n );\n\n export default Component;\n ```\n */\nexport class InView extends React.Component<\n IntersectionObserverProps | PlainChildrenProps,\n State\n> {\n node: Element | null = null;\n _unobserveCb: (() => void) | null = null;\n\n constructor(props: IntersectionObserverProps | PlainChildrenProps) {\n super(props);\n this.state = {\n inView: !!props.initialInView,\n entry: undefined,\n };\n }\n\n componentDidMount() {\n this.unobserve();\n this.observeNode();\n }\n\n componentDidUpdate(prevProps: IntersectionObserverProps) {\n // If a IntersectionObserver option changed, reinit the observer\n if (\n prevProps.rootMargin !== this.props.rootMargin ||\n prevProps.root !== this.props.root ||\n prevProps.threshold !== this.props.threshold ||\n prevProps.skip !== this.props.skip ||\n prevProps.trackVisibility !== this.props.trackVisibility ||\n prevProps.delay !== this.props.delay\n ) {\n this.unobserve();\n this.observeNode();\n }\n }\n\n componentWillUnmount() {\n this.unobserve();\n }\n\n observeNode() {\n if (!this.node || this.props.skip) return;\n const {\n threshold,\n root,\n rootMargin,\n trackVisibility,\n delay,\n fallbackInView,\n } = this.props;\n\n this._unobserveCb = observe(\n this.node,\n this.handleChange,\n {\n threshold,\n root,\n rootMargin,\n // @ts-ignore\n trackVisibility,\n // @ts-ignore\n delay,\n },\n fallbackInView,\n );\n }\n\n unobserve() {\n if (this._unobserveCb) {\n this._unobserveCb();\n this._unobserveCb = null;\n }\n }\n\n handleNode = (node?: Element | null) => {\n if (this.node) {\n // Clear the old observer, before we start observing a new element\n this.unobserve();\n\n if (!node && !this.props.triggerOnce && !this.props.skip) {\n // Reset the state if we get a new node, and we aren't ignoring updates\n this.setState({ inView: !!this.props.initialInView, entry: undefined });\n }\n }\n\n this.node = node ? node : null;\n this.observeNode();\n };\n\n handleChange = (inView: boolean, entry: IntersectionObserverEntry) => {\n if (inView && this.props.triggerOnce) {\n // If `triggerOnce` is true, we should stop observing the element.\n this.unobserve();\n }\n if (!isPlainChildren(this.props)) {\n // Store the current State, so we can pass it to the children in the next render update\n // There's no reason to update the state for plain children, since it's not used in the rendering.\n this.setState({ inView, entry });\n }\n if (this.props.onChange) {\n // If the user is actively listening for onChange, always trigger it\n this.props.onChange(inView, entry);\n }\n };\n\n render() {\n const { children } = this.props;\n if (typeof children === \"function\") {\n const { inView, entry } = this.state;\n return children({ inView, entry, ref: this.handleNode });\n }\n\n const {\n as,\n triggerOnce,\n threshold,\n root,\n rootMargin,\n onChange,\n skip,\n trackVisibility,\n delay,\n initialInView,\n fallbackInView,\n ...props\n } = this.props as PlainChildrenProps;\n\n return React.createElement(\n as || \"div\",\n { ref: this.handleNode, ...props },\n children,\n );\n }\n}\n","import React, { useEffect, useRef, useState } from \"react\";\r\nimport placeHolderImage from \"../../Assets/placeHolderImage.webp\";\r\nimport { useInView } from \"react-intersection-observer\";\r\n\r\nconst LazyImage = React.memo((props) => {\r\n const { ref, inView } = useInView({\r\n threshold: 0.01, // Trigger when 1% of the div is visible\r\n });\r\n const [loadedOnce, setLoadedOnce] = useState(false); // State to track if image has been loaded once\r\n const [reCheck, setReCheck] = useState(false);\r\n\r\n const imageRef = useRef(null);\r\n const [placeHolderImageLoaded, setPlaceHolderImageLoaded] = useState(false); // Changed to useState\r\n\r\n useEffect(() => {\r\n const observerCallback = (entries) => {\r\n entries.forEach(async (entry) => {\r\n if (entry.isIntersecting) {\r\n if (props.loadingImg && imageRef.current) {\r\n props.loadingImg(false);\r\n }\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n };\r\n\r\n const options = {\r\n root: null,\r\n rootMargin: \"0px\",\r\n threshold: 0.01,\r\n };\r\n\r\n const observer = new IntersectionObserver(observerCallback, options);\r\n\r\n if (imageRef.current) {\r\n observer.observe(imageRef.current);\r\n }\r\n\r\n return () => {\r\n if (imageRef.current) {\r\n observer.unobserve(imageRef.current);\r\n }\r\n };\r\n }, [reCheck, props.loadingImg]);\r\n\r\n useEffect(() => {\r\n // If the image has been loaded once and it's not in view now, don't re-fetch it when it comes back into view\r\n if (!inView && loadedOnce) return;\r\n\r\n if (inView) {\r\n setLoadedOnce(true);\r\n }\r\n }, [inView, loadedOnce]);\r\n\r\n return (\r\n \r\n {(inView || loadedOnce) && (\r\n {\r\n if (!placeHolderImageLoaded) {\r\n e.target.src = placeHolderImage;\r\n setPlaceHolderImageLoaded(true);\r\n }\r\n if (props.loadingImg) {\r\n props.loadingImg(false);\r\n }\r\n }}\r\n id={props.id}\r\n src={props.src}\r\n style={props.style}\r\n alt={props.alt ? props.alt : \"Image\"}\r\n onLoad={() => {\r\n setReCheck(!reCheck);\r\n }}\r\n loading=\"lazy\"\r\n />\r\n )}\r\n \r\n );\r\n});\r\n\r\nexport default LazyImage;\r\n","import * as React from \"react\";\nimport type { InViewHookResponse, IntersectionOptions } from \"./index\";\nimport { observe } from \"./observe\";\n\ntype State = {\n inView: boolean;\n entry?: IntersectionObserverEntry;\n};\n\n/**\n * React Hooks make it easy to monitor the `inView` state of your components. Call\n * the `useInView` hook with the (optional) [options](#options) you need. It will\n * return an array containing a `ref`, the `inView` status and the current\n * [`entry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).\n * Assign the `ref` to the DOM element you want to monitor, and the hook will\n * report the status.\n *\n * @example\n * ```jsx\n * import React from 'react';\n * import { useInView } from 'react-intersection-observer';\n *\n * const Component = () => {\n * const { ref, inView, entry } = useInView({\n * threshold: 0,\n * });\n *\n * return (\n *
\n *
{`Header inside viewport ${inView}.`}
\n *
\n * );\n * };\n * ```\n */\nexport function useInView({\n threshold,\n delay,\n trackVisibility,\n rootMargin,\n root,\n triggerOnce,\n skip,\n initialInView,\n fallbackInView,\n onChange,\n}: IntersectionOptions = {}): InViewHookResponse {\n const [ref, setRef] = React.useState(null);\n const callback = React.useRef();\n const [state, setState] = React.useState({\n inView: !!initialInView,\n entry: undefined,\n });\n\n // Store the onChange callback in a `ref`, so we can access the latest instance\n // inside the `useEffect`, but without triggering a rerender.\n callback.current = onChange;\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: threshold is not correctly detected as a dependency\n React.useEffect(\n () => {\n // Ensure we have node ref, and that we shouldn't skip observing\n if (skip || !ref) return;\n\n let unobserve: (() => void) | undefined;\n unobserve = observe(\n ref,\n (inView, entry) => {\n setState({\n inView,\n entry,\n });\n if (callback.current) callback.current(inView, entry);\n\n if (entry.isIntersecting && triggerOnce && unobserve) {\n // If it should only trigger once, unobserve the element after it's inView\n unobserve();\n unobserve = undefined;\n }\n },\n {\n root,\n rootMargin,\n threshold,\n // @ts-ignore\n trackVisibility,\n // @ts-ignore\n delay,\n },\n fallbackInView,\n );\n\n return () => {\n if (unobserve) {\n unobserve();\n }\n };\n },\n // We break the rule here, because we aren't including the actual `threshold` variable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n // If the threshold is an array, convert it to a string, so it won't change between renders.\n Array.isArray(threshold) ? threshold.toString() : threshold,\n ref,\n root,\n rootMargin,\n triggerOnce,\n skip,\n trackVisibility,\n fallbackInView,\n delay,\n ],\n );\n\n const entryTarget = state.entry?.target;\n const previousEntryTarget = React.useRef();\n if (\n !ref &&\n entryTarget &&\n !triggerOnce &&\n !skip &&\n previousEntryTarget.current !== entryTarget\n ) {\n // If we don't have a node ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)\n // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView\n previousEntryTarget.current = entryTarget;\n setState({\n inView: !!initialInView,\n entry: undefined,\n });\n }\n\n const result = [setRef, state.inView, state.entry] as InViewHookResponse;\n\n // Support object destructuring, by adding the specific values.\n result.ref = result[0];\n result.inView = result[1];\n result.entry = result[2];\n\n return result;\n}\n","import { toast, ToastContainer } from \"react-toastify\";\r\nimport \"react-toastify/dist/ReactToastify.css\";\r\n\r\nconst Toast = () => {\r\n const showToast = (type, message, options = {}) => {\r\n switch (type) {\r\n case \"info\":\r\n toast.info(message, options);\r\n break;\r\n case \"success\":\r\n toast.success(message, options);\r\n break;\r\n case \"warning\":\r\n toast.info(message, options);\r\n break;\r\n case \"error\":\r\n toast.error(message, options);\r\n break;\r\n default:\r\n toast(message, options);\r\n }\r\n };\r\n\r\n return {\r\n showToast,\r\n ToastContainer,\r\n };\r\n};\r\n\r\nexport default Toast;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { useNavigate } from \"react-router-dom\";\r\nimport \"./resources.css\";\r\n\r\nconst ResourcesSidebar = (props) => {\r\n const navigate = useNavigate();\r\n const [activeResource, setActiveResource] = useState(\"\");\r\n useEffect(() => {\r\n setActiveResource(props.activeResource);\r\n }, [props]);\r\n\r\n const handleKeyDown = (e, path) => {\r\n if (e.key === \"Enter\") {\r\n navigate(path);\r\n }\r\n };\r\n\r\n const resources = [\r\n { name: \"Privacy Policy\", path: \"/privacy-policy\" },\r\n { name: \"Cookie Policy\", path: \"/cookie-policy\" },\r\n { name: \"Return Policy\", path: \"/return-policy\" },\r\n { name: \"Refund Policy\", path: \"/refund-policy\" },\r\n { name: \"Shipping Policy\", path: \"/shipping-policy\" },\r\n { name: \"Terms & Conditions\", path: \"/terms-and-condition\" },\r\n { name: \"Terms Of Use\", path: \"/terms-of-use\" },\r\n { name: \"FAQs\", path: \"/faq\" },\r\n { name: \"Seller's Guideline\", path: \"/seller-guideline\" },\r\n ];\r\n\r\n return (\r\n
\r\n {/* {\r\n navigate(`${navigation.navigateToHomepage}`);\r\n }}\r\n className=\"serviceUnavailableNavigateToHomeBtn\"\r\n >\r\n Go Back To Home Screen\r\n