{store.getState()}
\r\n * }\r\n */\n\nexport function useReduxContext() {\n var contextValue = useContext(ReactReduxContext);\n\n if (process.env.NODE_ENV !== 'production' && !contextValue) {\n throw new Error('could not find react-redux context value; please ensure the component is wrapped in a {store.getState()}
\r\n * }\r\n */\n\nexport var useStore = /*#__PURE__*/createStoreHook();","import { ReactReduxContext } from '../components/Context';\nimport { useStore as useDefaultStore, createStoreHook } from './useStore';\n/**\r\n * Hook factory, which creates a `useDispatch` hook bound to a given context.\r\n *\r\n * @param {React.Context} [context=ReactReduxContext] Context passed to your `\r\n * {value}\r\n * \r\n *
\r\n * )\r\n * }\r\n */\n\nexport var useDispatch = /*#__PURE__*/createDispatchHook();","import { useReducer, useRef, useMemo, useContext, useDebugValue } from 'react';\nimport { useReduxContext as useDefaultReduxContext } from './useReduxContext';\nimport Subscription from '../utils/Subscription';\nimport { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect';\nimport { ReactReduxContext } from '../components/Context';\n\nvar refEquality = function refEquality(a, b) {\n return a === b;\n};\n\nfunction useSelectorWithStoreAndSubscription(selector, equalityFn, store, contextSub) {\n var _useReducer = useReducer(function (s) {\n return s + 1;\n }, 0),\n forceRender = _useReducer[1];\n\n var subscription = useMemo(function () {\n return new Subscription(store, contextSub);\n }, [store, contextSub]);\n var latestSubscriptionCallbackError = useRef();\n var latestSelector = useRef();\n var latestStoreState = useRef();\n var latestSelectedState = useRef();\n var storeState = store.getState();\n var selectedState;\n\n try {\n if (selector !== latestSelector.current || storeState !== latestStoreState.current || latestSubscriptionCallbackError.current) {\n var newSelectedState = selector(storeState); // ensure latest selected state is reused so that a custom equality function can result in identical references\n\n if (latestSelectedState.current === undefined || !equalityFn(newSelectedState, latestSelectedState.current)) {\n selectedState = newSelectedState;\n } else {\n selectedState = latestSelectedState.current;\n }\n } else {\n selectedState = latestSelectedState.current;\n }\n } catch (err) {\n if (latestSubscriptionCallbackError.current) {\n err.message += \"\\nThe error may be correlated with this previous error:\\n\" + latestSubscriptionCallbackError.current.stack + \"\\n\\n\";\n }\n\n throw err;\n }\n\n useIsomorphicLayoutEffect(function () {\n latestSelector.current = selector;\n latestStoreState.current = storeState;\n latestSelectedState.current = selectedState;\n latestSubscriptionCallbackError.current = undefined;\n });\n useIsomorphicLayoutEffect(function () {\n function checkForUpdates() {\n try {\n var _newSelectedState = latestSelector.current(store.getState());\n\n if (equalityFn(_newSelectedState, latestSelectedState.current)) {\n return;\n }\n\n latestSelectedState.current = _newSelectedState;\n } catch (err) {\n // we ignore all errors here, since when the component\n // is re-rendered, the selectors are called again, and\n // will throw again, if neither props nor store state\n // changed\n latestSubscriptionCallbackError.current = err;\n }\n\n forceRender();\n }\n\n subscription.onStateChange = checkForUpdates;\n subscription.trySubscribe();\n checkForUpdates();\n return function () {\n return subscription.tryUnsubscribe();\n };\n }, [store, subscription]);\n return selectedState;\n}\n/**\r\n * Hook factory, which creates a `useSelector` hook bound to a given context.\r\n *\r\n * @param {React.Context} [context=ReactReduxContext] Context passed to your `{counter}
\r\n * }\r\n */\n\nexport var useSelector = /*#__PURE__*/createSelectorHook();","import Provider from './components/Provider';\nimport connectAdvanced from './components/connectAdvanced';\nimport { ReactReduxContext } from './components/Context';\nimport connect from './connect/connect';\nimport { useDispatch, createDispatchHook } from './hooks/useDispatch';\nimport { useSelector, createSelectorHook } from './hooks/useSelector';\nimport { useStore, createStoreHook } from './hooks/useStore';\nimport { setBatch } from './utils/batch';\nimport { unstable_batchedUpdates as batch } from './utils/reactBatchedUpdates';\nimport shallowEqual from './utils/shallowEqual';\nsetBatch(batch);\nexport { Provider, connectAdvanced, ReactReduxContext, connect, batch, useDispatch, createDispatchHook, useSelector, createSelectorHook, useStore, createStoreHook, shallowEqual };","(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"MediaQuery\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"MediaQuery\"] = factory(root[\"React\"]);\n})(this, (__WEBPACK_EXTERNAL_MODULE_react__) => {\nreturn /******/ (() => { // webpackBootstrap\n/******/ \tvar __webpack_modules__ = ({\n\n/***/ \"./node_modules/css-mediaquery/index.js\":\n/*!**********************************************!*\\\n !*** ./node_modules/css-mediaquery/index.js ***!\n \\**********************************************/\n/***/ ((__unused_webpack_module, exports) => {\n\n\"use strict\";\n/*\nCopyright (c) 2014, Yahoo! Inc. All rights reserved.\nCopyrights licensed under the New BSD License.\nSee the accompanying LICENSE file for terms.\n*/\n\n\n\nexports.match = matchQuery;\nexports.parse = parseQuery;\n\n// -----------------------------------------------------------------------------\n\nvar RE_MEDIA_QUERY = /(?:(only|not)?\\s*([^\\s\\(\\)]+)(?:\\s*and)?\\s*)?(.+)?/i,\n RE_MQ_EXPRESSION = /\\(\\s*([^\\s\\:\\)]+)\\s*(?:\\:\\s*([^\\s\\)]+))?\\s*\\)/,\n RE_MQ_FEATURE = /^(?:(min|max)-)?(.+)/,\n RE_LENGTH_UNIT = /(em|rem|px|cm|mm|in|pt|pc)?$/,\n RE_RESOLUTION_UNIT = /(dpi|dpcm|dppx)?$/;\n\nfunction matchQuery(mediaQuery, values) {\n return parseQuery(mediaQuery).some(function (query) {\n var inverse = query.inverse;\n\n // Either the parsed or specified `type` is \"all\", or the types must be\n // equal for a match.\n var typeMatch = query.type === 'all' || values.type === query.type;\n\n // Quit early when `type` doesn't match, but take \"not\" into account.\n if ((typeMatch && inverse) || !(typeMatch || inverse)) {\n return false;\n }\n\n var expressionsMatch = query.expressions.every(function (expression) {\n var feature = expression.feature,\n modifier = expression.modifier,\n expValue = expression.value,\n value = values[feature];\n\n // Missing or falsy values don't match.\n if (!value) { return false; }\n\n switch (feature) {\n case 'orientation':\n case 'scan':\n return value.toLowerCase() === expValue.toLowerCase();\n\n case 'width':\n case 'height':\n case 'device-width':\n case 'device-height':\n expValue = toPx(expValue);\n value = toPx(value);\n break;\n\n case 'resolution':\n expValue = toDpi(expValue);\n value = toDpi(value);\n break;\n\n case 'aspect-ratio':\n case 'device-aspect-ratio':\n case /* Deprecated */ 'device-pixel-ratio':\n expValue = toDecimal(expValue);\n value = toDecimal(value);\n break;\n\n case 'grid':\n case 'color':\n case 'color-index':\n case 'monochrome':\n expValue = parseInt(expValue, 10) || 1;\n value = parseInt(value, 10) || 0;\n break;\n }\n\n switch (modifier) {\n case 'min': return value >= expValue;\n case 'max': return value <= expValue;\n default : return value === expValue;\n }\n });\n\n return (expressionsMatch && !inverse) || (!expressionsMatch && inverse);\n });\n}\n\nfunction parseQuery(mediaQuery) {\n return mediaQuery.split(',').map(function (query) {\n query = query.trim();\n\n var captures = query.match(RE_MEDIA_QUERY),\n modifier = captures[1],\n type = captures[2],\n expressions = captures[3] || '',\n parsed = {};\n\n parsed.inverse = !!modifier && modifier.toLowerCase() === 'not';\n parsed.type = type ? type.toLowerCase() : 'all';\n\n // Split expressions into a list.\n expressions = expressions.match(/\\([^\\)]+\\)/g) || [];\n\n parsed.expressions = expressions.map(function (expression) {\n var captures = expression.match(RE_MQ_EXPRESSION),\n feature = captures[1].toLowerCase().match(RE_MQ_FEATURE);\n\n return {\n modifier: feature[1],\n feature : feature[2],\n value : captures[2]\n };\n });\n\n return parsed;\n });\n}\n\n// -- Utilities ----------------------------------------------------------------\n\nfunction toDecimal(ratio) {\n var decimal = Number(ratio),\n numbers;\n\n if (!decimal) {\n numbers = ratio.match(/^(\\d+)\\s*\\/\\s*(\\d+)$/);\n decimal = numbers[1] / numbers[2];\n }\n\n return decimal;\n}\n\nfunction toDpi(resolution) {\n var value = parseFloat(resolution),\n units = String(resolution).match(RE_RESOLUTION_UNIT)[1];\n\n switch (units) {\n case 'dpcm': return value / 2.54;\n case 'dppx': return value * 96;\n default : return value;\n }\n}\n\nfunction toPx(length) {\n var value = parseFloat(length),\n units = String(length).match(RE_LENGTH_UNIT)[1];\n\n switch (units) {\n case 'em' : return value * 16;\n case 'rem': return value * 16;\n case 'cm' : return value * 96 / 2.54;\n case 'mm' : return value * 96 / 2.54 / 10;\n case 'in' : return value * 96;\n case 'pt' : return value * 72;\n case 'pc' : return value * 72 / 12;\n default : return value;\n }\n}\n\n\n/***/ }),\n\n/***/ \"./node_modules/hyphenate-style-name/index.js\":\n/*!****************************************************!*\\\n !*** ./node_modules/hyphenate-style-name/index.js ***!\n \\****************************************************/\n/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {\n\n\"use strict\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* eslint-disable no-var, prefer-template */\nvar uppercasePattern = /[A-Z]/g\nvar msPattern = /^ms-/\nvar cache = {}\n\nfunction toHyphenLower(match) {\n return '-' + match.toLowerCase()\n}\n\nfunction hyphenateStyleName(name) {\n if (cache.hasOwnProperty(name)) {\n return cache[name]\n }\n\n var hName = name.replace(uppercasePattern, toHyphenLower)\n return (cache[name] = msPattern.test(hName) ? '-' + hName : hName)\n}\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (hyphenateStyleName);\n\n\n/***/ }),\n\n/***/ \"./node_modules/matchmediaquery/index.js\":\n/*!***********************************************!*\\\n !*** ./node_modules/matchmediaquery/index.js ***!\n \\***********************************************/\n/***/ ((module, __unused_webpack_exports, __webpack_require__) => {\n\n\"use strict\";\n\n\nvar staticMatch = (__webpack_require__(/*! css-mediaquery */ \"./node_modules/css-mediaquery/index.js\").match);\nvar dynamicMatch = typeof window !== 'undefined' ? window.matchMedia : null;\n\n// our fake MediaQueryList\nfunction Mql(query, values, forceStatic){\n var self = this;\n if(dynamicMatch && !forceStatic){\n var mql = dynamicMatch.call(window, query);\n this.matches = mql.matches;\n this.media = mql.media;\n // TODO: is there a time it makes sense to remove this listener?\n mql.addListener(update);\n } else {\n this.matches = staticMatch(query, values);\n this.media = query;\n }\n\n this.addListener = addListener;\n this.removeListener = removeListener;\n this.dispose = dispose;\n\n function addListener(listener){\n if(mql){\n mql.addListener(listener);\n }\n }\n\n function removeListener(listener){\n if(mql){\n mql.removeListener(listener);\n }\n }\n\n // update ourselves!\n function update(evt){\n self.matches = evt.matches;\n self.media = evt.media;\n }\n\n function dispose(){\n if(mql){\n mql.removeListener(update);\n }\n }\n}\n\nfunction matchMedia(query, values, forceStatic){\n return new Mql(query, values, forceStatic);\n}\n\nmodule.exports = matchMedia;\n\n\n/***/ }),\n\n/***/ \"./node_modules/object-assign/index.js\":\n/*!*********************************************!*\\\n !*** ./node_modules/object-assign/index.js ***!\n \\*********************************************/\n/***/ ((module) => {\n\n\"use strict\";\n/*\nobject-assign\n(c) Sindre Sorhus\n@license MIT\n*/\n\n\n/* eslint-disable no-unused-vars */\nvar getOwnPropertySymbols = Object.getOwnPropertySymbols;\nvar hasOwnProperty = Object.prototype.hasOwnProperty;\nvar propIsEnumerable = Object.prototype.propertyIsEnumerable;\n\nfunction toObject(val) {\n\tif (val === null || val === undefined) {\n\t\tthrow new TypeError('Object.assign cannot be called with null or undefined');\n\t}\n\n\treturn Object(val);\n}\n\nfunction shouldUseNative() {\n\ttry {\n\t\tif (!Object.assign) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Detect buggy property enumeration order in older V8 versions.\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=4118\n\t\tvar test1 = new String('abc'); // eslint-disable-line no-new-wrappers\n\t\ttest1[5] = 'de';\n\t\tif (Object.getOwnPropertyNames(test1)[0] === '5') {\n\t\t\treturn false;\n\t\t}\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\tvar test2 = {};\n\t\tfor (var i = 0; i < 10; i++) {\n\t\t\ttest2['_' + String.fromCharCode(i)] = i;\n\t\t}\n\t\tvar order2 = Object.getOwnPropertyNames(test2).map(function (n) {\n\t\t\treturn test2[n];\n\t\t});\n\t\tif (order2.join('') !== '0123456789') {\n\t\t\treturn false;\n\t\t}\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\tvar test3 = {};\n\t\t'abcdefghijklmnopqrst'.split('').forEach(function (letter) {\n\t\t\ttest3[letter] = letter;\n\t\t});\n\t\tif (Object.keys(Object.assign({}, test3)).join('') !==\n\t\t\t\t'abcdefghijklmnopqrst') {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t} catch (err) {\n\t\t// We don't expect any of the above to throw, but better to be safe.\n\t\treturn false;\n\t}\n}\n\nmodule.exports = shouldUseNative() ? Object.assign : function (target, source) {\n\tvar from;\n\tvar to = toObject(target);\n\tvar symbols;\n\n\tfor (var s = 1; s < arguments.length; s++) {\n\t\tfrom = Object(arguments[s]);\n\n\t\tfor (var key in from) {\n\t\t\tif (hasOwnProperty.call(from, key)) {\n\t\t\t\tto[key] = from[key];\n\t\t\t}\n\t\t}\n\n\t\tif (getOwnPropertySymbols) {\n\t\t\tsymbols = getOwnPropertySymbols(from);\n\t\t\tfor (var i = 0; i < symbols.length; i++) {\n\t\t\t\tif (propIsEnumerable.call(from, symbols[i])) {\n\t\t\t\t\tto[symbols[i]] = from[symbols[i]];\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\treturn to;\n};\n\n\n/***/ }),\n\n/***/ \"./node_modules/prop-types/checkPropTypes.js\":\n/*!***************************************************!*\\\n !*** ./node_modules/prop-types/checkPropTypes.js ***!\n \\***************************************************/\n/***/ ((module, __unused_webpack_exports, __webpack_require__) => {\n\n\"use strict\";\n/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\n\nvar printWarning = function() {};\n\nif (true) {\n var ReactPropTypesSecret = __webpack_require__(/*! ./lib/ReactPropTypesSecret */ \"./node_modules/prop-types/lib/ReactPropTypesSecret.js\");\n var loggedTypeFailures = {};\n var has = __webpack_require__(/*! ./lib/has */ \"./node_modules/prop-types/lib/has.js\");\n\n printWarning = function(text) {\n var message = 'Warning: ' + text;\n if (typeof console !== 'undefined') {\n console.error(message);\n }\n try {\n // --- Welcome to debugging React ---\n // This error was thrown as a convenience so that you can use this stack\n // to find the callsite that caused this warning to fire.\n throw new Error(message);\n } catch (x) { /**/ }\n };\n}\n\n/**\n * Assert that the values match with the type specs.\n * Error messages are memorized and will only be shown once.\n *\n * @param {object} typeSpecs Map of name to a ReactPropType\n * @param {object} values Runtime values that need to be type-checked\n * @param {string} location e.g. \"prop\", \"context\", \"child context\"\n * @param {string} componentName Name of the component for error messages.\n * @param {?Function} getStack Returns the component stack.\n * @private\n */\nfunction checkPropTypes(typeSpecs, values, location, componentName, getStack) {\n if (true) {\n for (var typeSpecName in typeSpecs) {\n if (has(typeSpecs, typeSpecName)) {\n var error;\n // Prop type validation may throw. In case they do, we don't want to\n // fail the render phase where it didn't fail before. So we log it.\n // After these have been cleaned up, we'll let them throw.\n try {\n // This is intentionally an invariant that gets caught. It's the same\n // behavior as without this statement except with a better message.\n if (typeof typeSpecs[typeSpecName] !== 'function') {\n var err = Error(\n (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +\n 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' +\n 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.'\n );\n err.name = 'Invariant Violation';\n throw err;\n }\n error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);\n } catch (ex) {\n error = ex;\n }\n if (error && !(error instanceof Error)) {\n printWarning(\n (componentName || 'React class') + ': type specification of ' +\n location + ' `' + typeSpecName + '` is invalid; the type checker ' +\n 'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +\n 'You may have forgotten to pass an argument to the type checker ' +\n 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +\n 'shape all require an argument).'\n );\n }\n if (error instanceof Error && !(error.message in loggedTypeFailures)) {\n // Only monitor this failure once because there tends to be a lot of the\n // same error.\n loggedTypeFailures[error.message] = true;\n\n var stack = getStack ? getStack() : '';\n\n printWarning(\n 'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')\n );\n }\n }\n }\n }\n}\n\n/**\n * Resets warning cache when testing.\n *\n * @private\n */\ncheckPropTypes.resetWarningCache = function() {\n if (true) {\n loggedTypeFailures = {};\n }\n}\n\nmodule.exports = checkPropTypes;\n\n\n/***/ }),\n\n/***/ \"./node_modules/prop-types/factoryWithTypeCheckers.js\":\n/*!************************************************************!*\\\n !*** ./node_modules/prop-types/factoryWithTypeCheckers.js ***!\n \\************************************************************/\n/***/ ((module, __unused_webpack_exports, __webpack_require__) => {\n\n\"use strict\";\n/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n\n\nvar ReactIs = __webpack_require__(/*! react-is */ \"./node_modules/react-is/index.js\");\nvar assign = __webpack_require__(/*! object-assign */ \"./node_modules/object-assign/index.js\");\n\nvar ReactPropTypesSecret = __webpack_require__(/*! ./lib/ReactPropTypesSecret */ \"./node_modules/prop-types/lib/ReactPropTypesSecret.js\");\nvar has = __webpack_require__(/*! ./lib/has */ \"./node_modules/prop-types/lib/has.js\");\nvar checkPropTypes = __webpack_require__(/*! ./checkPropTypes */ \"./node_modules/prop-types/checkPropTypes.js\");\n\nvar printWarning = function() {};\n\nif (true) {\n printWarning = function(text) {\n var message = 'Warning: ' + text;\n if (typeof console !== 'undefined') {\n console.error(message);\n }\n try {\n // --- Welcome to debugging React ---\n // This error was thrown as a convenience so that you can use this stack\n // to find the callsite that caused this warning to fire.\n throw new Error(message);\n } catch (x) {}\n };\n}\n\nfunction emptyFunctionThatReturnsNull() {\n return null;\n}\n\nmodule.exports = function(isValidElement, throwOnDirectAccess) {\n /* global Symbol */\n var ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;\n var FAUX_ITERATOR_SYMBOL = '@@iterator'; // Before Symbol spec.\n\n /**\n * Returns the iterator method function contained on the iterable object.\n *\n * Be sure to invoke the function with the iterable as context:\n *\n * var iteratorFn = getIteratorFn(myIterable);\n * if (iteratorFn) {\n * var iterator = iteratorFn.call(myIterable);\n * ...\n * }\n *\n * @param {?object} maybeIterable\n * @return {?function}\n */\n function getIteratorFn(maybeIterable) {\n var iteratorFn = maybeIterable && (ITERATOR_SYMBOL && maybeIterable[ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL]);\n if (typeof iteratorFn === 'function') {\n return iteratorFn;\n }\n }\n\n /**\n * Collection of methods that allow declaration and validation of props that are\n * supplied to React components. Example usage:\n *\n * var Props = require('ReactPropTypes');\n * var MyArticle = React.createClass({\n * propTypes: {\n * // An optional string prop named \"description\".\n * description: Props.string,\n *\n * // A required enum prop named \"category\".\n * category: Props.oneOf(['News','Photos']).isRequired,\n *\n * // A prop named \"dialog\" that requires an instance of Dialog.\n * dialog: Props.instanceOf(Dialog).isRequired\n * },\n * render: function() { ... }\n * });\n *\n * A more formal specification of how these methods are used:\n *\n * type := array|bool|func|object|number|string|oneOf([...])|instanceOf(...)\n * decl := ReactPropTypes.{type}(.isRequired)?\n *\n * Each and every declaration produces a function with the same signature. This\n * allows the creation of custom validation functions. For example:\n *\n * var MyLink = React.createClass({\n * propTypes: {\n * // An optional string or URI prop named \"href\".\n * href: function(props, propName, componentName) {\n * var propValue = props[propName];\n * if (propValue != null && typeof propValue !== 'string' &&\n * !(propValue instanceof URI)) {\n * return new Error(\n * 'Expected a string or an URI for ' + propName + ' in ' +\n * componentName\n * );\n * }\n * }\n * },\n * render: function() {...}\n * });\n *\n * @internal\n */\n\n var ANONYMOUS = '<\r\n {\r\n e.preventDefault();\r\n onToggle();\r\n }}\r\n >\r\n \r\n {quantity}\r\n \r\n \r\n {translate('minicart.checkout')}\r\n \r\n \r\n \r\n onToggle()}\r\n >\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default MiniCart;\r\n","import React, { Fragment } from 'react';\r\n\r\nconst sameCategory = (item, index, array) =>\r\n (index > 0 && array[index - 1].category === array[index].category) ||\r\n item.showAll;\r\n\r\nconst QuickSearchResult = ({ result, selectedItem, searchUrl }) => (\r\n \r\n {quantity} {translate('minicart.numberofproduct')}\r\n
\r\n\r\n {translate('minicart.total')} {orderTotal}\r\n
\r\n \r\n {translate('minicart.checkout')}\r\n \r\n- \r\n {result &&\r\n result.map((item, index, array) => (\r\n
- \r\n {item.category}\r\n \r\n )}\r\n
{item.name}
\r\n \r\n \r\n \r\n {\r\n e.preventDefault();\r\n dispatch(toggleShowFullForm());\r\n setTimeout(() => {\r\n searchInput.current && searchInput.current.focus();\r\n }, 0);\r\n }}\r\n >\r\n \r\n \r\n {translate('general.search')}\r\n \r\n \r\n \r\n dispatch(toggleShowFullForm())}\r\n >\r\n {\r\n const text = encodeURIComponent(event.target.value);\r\n dispatch(setSearchQuery(text));\r\n debouncedQuery(dispatch, text);\r\n }}\r\n onKeyDown={(event) => dispatch(handleKeyDown(event, { searchUrl }))}\r\n ref={searchInput}\r\n onBlur={() => {\r\n if (\r\n searchContainer.current &&\r\n !searchContainer.current.contains(lastClickedNode)\r\n ) {\r\n showFullForm && dispatch(toggleShowFullForm());\r\n }\r\n }}\r\n />\r\n {\r\n e.preventDefault();\r\n dispatch(handleClickSearch({ searchUrl }));\r\n dispatch(toggleShowFullForm());\r\n }}\r\n >\r\n \r\n \r\n {translate('general.search')}\r\n \r\n \r\n {showResult && (\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default QuickSearch;\r\n","import React, {\r\n\tFragment,\r\n\tuseState,\r\n\tuseRef,\r\n\tuseMemo,\r\n\tforwardRef,\r\n} from 'react';\r\nimport { useMediaQuery } from 'react-responsive';\r\nimport { translate } from '../Services/translation';\r\n\r\nconst Navigation = ({\r\n\tleftLinks = [],\r\n\trightLinks = [],\r\n\tdriftPage = null,\r\n\tlevel = 0,\r\n\tonToggle,\r\n}) => {\r\n\tconst isMobile = useMediaQuery({ maxWidth: 1024 });\r\n\tconst menuRef = useRef(null);\r\n\tconst menuButtonRef = useRef(null);\r\n\tconst menuBackdropRef = useRef(null);\r\n\tconst [isClosed, setIsClosed] = useState(true);\r\n\r\n\tfunction toggleMenu() {\r\n\t\tisClosed ? onOpenMenu() : onCloseMenu();\r\n\t\tsetIsClosed(!isClosed);\r\n\t}\r\n\r\n\tfunction onOpenMenu() {\r\n\t\tmenuRef.current.toggleAttribute('open');\r\n\t\tmenuRef.current.removeAttribute('closed');\r\n\t\tif(menuButtonRef != null && menuButtonRef.current)\r\n\t\t\tmenuButtonRef.current.classList.add('navbar__toggle--open');\r\n\t\t\r\n\t\tif(menuBackdropRef != null && menuBackdropRef.current) {\r\n\t\t\tmenuBackdropRef.current.classList.add('navbar__backdrop--open');\r\n\t\t\tmenuBackdropRef.current.classList.remove('navbar__backdrop--closed');\r\n\t\t}\r\n\t}\r\n\r\n\tfunction onCloseMenu() {\r\n\t\tmenuRef.current.removeAttribute('open');\r\n\t\tmenuRef.current.toggleAttribute('closed');\r\n\t\tif(menuButtonRef != null && menuButtonRef.current)\r\n\t\t\tmenuButtonRef.current.classList.remove('navbar__toggle--open');\r\n\t\t\r\n\t\tif(menuBackdropRef != null && menuBackdropRef.current) {\r\n\t\t\tmenuBackdropRef.current.classList.add('navbar__backdrop--closed');\r\n\t\t\tmenuBackdropRef.current.classList.remove('navbar__backdrop--open');\r\n\t\t}\r\n\t}\r\n\r\n\t// const categoryIsSelected = leftLinks.some((link) => link.isSelected);\r\n\tconst props = {\r\n\t\tlevel,\r\n\t\tleftLinks,\r\n\t\trightLinks,\r\n\t\tmenuRef,\r\n\t\tmenuButtonRef,\r\n\t\tmenuBackdropRef,\r\n\t\ttoggleMenu,\r\n\t\tisClosed,\r\n\t\tdriftPage\r\n\t};\r\n\r\n\t/* Caches renders of components if they are not changed. We dont want the setIsClose state change to recalculate all child components */\r\n\tconst NavigationMobileMemo = useMemo(\r\n\t\t() => \r\n\t\t\t\t\t
\r\n\t\t\t\r\n\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t{leftLinks.length > 0 && (\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t{leftLinks.length > 0 && (\r\n\t\t\t\t\tleftLinks.map((link, i) => (\r\n\t\t\t\t\t\tlink.links && link.links.length > 0 ? (\r\n\t\t\t\t\t\t\t toggleTopMenuItems(link)}\r\n\t\t\t\t\t\t\t\tkey={`${link.name}-${i}`}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t))\r\n\t\t\t\t)}\r\n\t\t\t
\r\n\t\t\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t{rightLinks.length > 0 && (\r\n\t\t\t\t\trightLinks.map((link, i) => (\r\n\t\t\t\t\t\tlink.links && link.links.length > 0 ? (\r\n\t\t\t\t\t\t\t toggleTopMenuItems(link)}\r\n\t\t\t\t\t\t\t\tkey={`${link.name}-${i}`}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t))\r\n\t\t\t\t)}\r\n\t\t\t
\r\n\r\n\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\r\n\t\t\t{activeTopMenuItem && (\r\n\t\t\t\t
\r\n\t)\r\n}\r\n\r\nconst NavigationItemMobile = ({\r\n\tlevelName,\r\n\tlevelUrl,\r\n\tlinks,\r\n\tlevel,\r\n\tisOpen,\r\n\tmegaMenuBlockTheme,\r\n\tmegaMenuBlockLink,\r\n\tmegaMenuBlockHeading,\r\n\tmegaMenuBlockText,\r\n\tmegaMenuBlockLinkText,\r\n\tmegaMenuBlockIcon,\r\n\tmegaMenuBlockImage,\r\n\tshowExpand = true,\r\n}) => {\r\n\tconst submenuRef = useRef(null);\r\n\r\n\treturn (\r\n\r\n\t\t<>\r\n\t\t\t{level < 3 && (\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t)}\t\r\n\t\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t- \r\n\t\t\t\t\t\t\t\t{links && links.map((link, i) => {\r\n\t\t\t\t\t\t\t\t\tconst isSelected = activeMenuItem === link;\r\n\t\t\t\t\t\t\t\t\t// link.isSelected || link === activeTopMenuItem ? 'navbar__toggle--open' : ''}\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t{activeMenuItem.editorialPageLinkText ? activeMenuItem.editorialPageLinkText : activeMenuItem.name}\r\n\t\t\t\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t)}\r\n\r\n\t\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t\t\t\t\t{activeMenuItem.links && activeMenuItem.links.length > 0 && (\r\n\t\t\t\t\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t\t\t\t\t{activeMenuItem.links.some(link => link.pageType === \"ProductPage\") && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t- \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{activeMenuItem.links.map((link, i) => (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlink.pageType === \"ProductPage\" ? (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
- \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{link.name}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : null\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
- \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{activeMenuItem.links.map((link, i) => (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlink.pageType !== \"ProductPage\" ? (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t
- \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{link.name}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : null\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t{activeMenuItem.megaMenuBlockLink && (\r\n\t\t\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t\t\t{!activeMenuItem.megaMenuBlockImage ? (\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t{activeMenuItem.megaMenuBlockIcon && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t{activeMenuItem.megaMenuBlockHeading && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{activeMenuItem.megaMenuBlockHeading}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t{activeMenuItem.megaMenuBlockText && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{activeMenuItem.megaMenuBlockText}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t{activeMenuItem.megaMenuBlockLinkText && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{activeMenuItem.megaMenuBlockLinkText}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t{activeMenuItem.megaMenuBlockLinkText && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{activeMenuItem.megaMenuBlockLinkText}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t- \r\n\t\t\t\t\t{level != 0 && (\r\n\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t
- \r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t{levelName}\r\n\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t\r\n\t\t\t\t\t)}\r\n\r\n\t\t\t\t\t{links.map((link, i) => {\r\n\t\t\t\t\t\tconst {\r\n\t\t\t\t\t\t\tname,\r\n\t\t\t\t\t\t\turl,\r\n\t\t\t\t\t\t\timageUrl,\r\n\t\t\t\t\t\t\timageAlt,\r\n\t\t\t\t\t\t\textraInfo,\r\n\t\t\t\t\t\t\titemClass,\r\n\t\t\t\t\t\t\tlinkClass,\r\n\t\t\t\t\t\t\tmegaMenuBlockTheme,\r\n\t\t\t\t\t\t\tmegaMenuBlockLink,\r\n\t\t\t\t\t\t\tmegaMenuBlockHeading,\r\n\t\t\t\t\t\t\tmegaMenuBlockText,\r\n\t\t\t\t\t\t\tmegaMenuBlockLinkText,\r\n\t\t\t\t\t\t\tmegaMenuBlockIcon,\r\n\t\t\t\t\t\t\tmegaMenuBlockImage,\r\n\t\t\t\t\t\t\tisSelected,\r\n\t\t\t\t\t\t} = link;\r\n\t\t\t\t\t\tlet {\r\n\t\t\t\t\t\t\tadditionalLinks = [],\r\n\t\t\t\t\t\t\tlinks = [],\r\n\t\t\t\t\t\t} = link;\r\n\t\t\t\t\t\tlinks = links.concat(additionalLinks);\r\n\r\n\t\t\t\t\t\tconst [isItemOpen, setIsItemOpen] = useState(isSelected);\r\n\t\t\t\t\t\tconst [isOpen, setIsOpen] = useState(link.isSelected);\r\n\t\t\t\t\t\tconst itemClassList = ['submenu__item', itemClass],\r\n\t\t\t\t\t\t\tlinksClassList = ['submenu__link', linkClass];\r\n\t\t\t\t\t\tlinks &&\r\n\t\t\t\t\t\t\tlinks.length > 0 &&\r\n\t\t\t\t\t\t\titemClassList.push('submenu__item--has-children') &&\r\n\t\t\t\t\t\t\tlinksClassList.push('submenu__link--has-children');\r\n\t\t\t\t\t\tif (link.isSelected && !link.links.some((x) => x.isSelected)) {\r\n\t\t\t\t\t\t\t// Only add selected visual class to links that are directly selected, not their parents\r\n\t\t\t\t\t\t\titemClassList.push('submenu__item--selected') &&\r\n\t\t\t\t\t\t\t\tlinksClassList.push('submenu__link--selected');\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\treturn (\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\tlink && links.length <= 0) || (link && level == 2) ? (\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t{showExpand && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsubmenuRef.current.scrollTo(0, 0);\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsOpen(!isOpen);\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsItemOpen(!isItemOpen);\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{extraInfo && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t{url && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{imageUrl && 
}\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{extraInfo && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t{showExpand && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t {\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsubmenuRef.current.scrollTo(0, 0);\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsOpen(!isOpen);\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsItemOpen(!isItemOpen);\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{megaMenuBlockLink && (\r\n\t\t\t\t\t\t\t\t\t<>\r\n\t\t\t\t\t\t\t\t\t\t{!megaMenuBlockImage ? (\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\r\n\t\t\t\t\t)}\r\n\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{megaMenuBlockIcon && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t{megaMenuBlockText && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t{megaMenuBlockHeading && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{megaMenuBlockHeading}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{megaMenuBlockText}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t\t{megaMenuBlockLinkText && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{megaMenuBlockLinkText}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t{megaMenuBlockLinkText && (\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{megaMenuBlockLinkText}\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t- \r\n
\r\n {group.label}\r\n
\r\n {group.options &&\r\n group.options.map((item, itemIndex, array) => (\r\n \r\n {facetFilters.map((group, groupIndex) => (\r\n
\r\n )\r\n );\r\n};\r\n\r\nexport default FacetedSearch;\r\n","import React from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { translate } from '../Services/translation';\r\n\r\nimport {\r\n submitSearchFacet,\r\n toggleVisibleDropdownMenu,\r\n} from '../Actions/FacetedSearch.action';\r\n\r\nconst FacetedSearchCompact = ({ facetFilters, onFacetChange }) => {\r\n const dispatch = useDispatch();\r\n const { visibleDropdownMenu } = useSelector((state) => state.facetedSearch);\r\n\r\n return (\r\n - \r\n {facetFilters &&\r\n facetFilters.map(\r\n (group, groupIndex, array) =>\r\n group.options &&\r\n group.options.length > 0 && (\r\n
- \r\n
- \r\n {group.options &&\r\n group.options.map(\r\n (item, itemIndex, array) => (\r\n
\r\n handleClickHeader(index)}\r\n >\r\n {accordion.props.header || ''}\r\n
\r\n \r\n ));\r\n\r\n const panels = accordions.map((accordion, index) => (\r\n \r\n \r\n {panels}\r\n
\r\n );\r\n};\r\n","import React, { Fragment } from 'react';\r\n\r\nconst SubNavCompact = ({ subNavigation }) => (\r\n \r\n)\r\n\r\nconst displaySubNav = subnav => (\r\n - \r\n {subnav && subnav.map(({ name, url, isSelected, links }, index) =>\r\n
- 0 ? 'has-children' : ''} ${isSelected ? 'active' : ''}`} key={`subnavCompact-${index}`}>\r\n {name}\r\n {displaySubNav(links)}\r\n \r\n )}\r\n
\r\n (window.location = event.target.value)}\r\n >\r\n {sortCriteria &&\r\n sortCriteria.map(({ text, value, selected }, index) => (\r\n \r\n ))}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SortCriteriaCompact;\r\n","import React from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { searchFacetChange } from '../Actions/FacetedSearch.action';\r\nimport { translate } from '../Services/translation';\r\n\r\nconst FilterTags = ({ facetFilters, navigationTheme }) => {\r\n const dispatch = useDispatch();\r\n\r\n const selectedFacetGroup = facetFilters.filter(\r\n (filter) => filter.selectedOptions.length > 0\r\n );\r\n const selectedFacetOption = selectedFacetGroup.reduce(\r\n (accumulator, group) => {\r\n if (!group) {\r\n return accumulator;\r\n }\r\n const { options, selectedOptions } = group;\r\n const groupOptions = options\r\n .filter((option) => selectedOptions.includes(option.id))\r\n .map((option) => ({ ...option, group }));\r\n return [...accumulator, ...groupOptions];\r\n },\r\n []\r\n );\r\n return selectedFacetGroup.length === 0 ? null : (\r\n \r\n \r\n {translate('search.yourfilter')} : \r\n {selectedFacetGroup &&\r\n selectedFacetGroup.map((group, index) => (\r\n \r\n dispatch(searchFacetChange(group))\r\n }\r\n key={`group-${index}`}\r\n >\r\n {' '}\r\n {group.label}{' '}\r\n \r\n ))}\r\n \r\n {navigationTheme === 'category' && (\r\n \r\n {translate('search.yourfilter')} : \r\n {selectedFacetOption &&\r\n selectedFacetOption.map((option, index) => (\r\n \r\n dispatch(\r\n searchFacetChange(option.group, option)\r\n )\r\n }\r\n key={`option-${index}`}\r\n >\r\n {' '}\r\n {option.label}{' '}\r\n \r\n ))}\r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default FilterTags;\r\n","import React, {\r\n Fragment,\r\n useCallback,\r\n useState,\r\n useEffect,\r\n useRef,\r\n} from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport FacetedSearchCompact from './FacetedSearchCompact';\r\nimport { AccordionPanel, Accordion } from '../Components/Accordion';\r\nimport { query } from '../Actions/FacetedSearch.action';\r\nimport SubNav from './SubNavCompact';\r\nimport SortCriteriaCompact from './SortCriteriaCompact';\r\nimport FilterTag from './FilterTags';\r\nimport { translate } from '../Services/translation';\r\nimport { updateFilterOption } from '../Actions/FacetedSearch.action';\r\nimport { PRODUCT_VIEW_CACHED } from '../constants';\r\n\r\nconst FacetedSearchCompactContainer = () => {\r\n const dispatch = useDispatch();\r\n const {\r\n subNavigation,\r\n sortCriteria,\r\n facetFilters: globalFacetFilters,\r\n navigationTheme,\r\n productsViewCachedId,\r\n } = useSelector((state) => state.facetedSearch);\r\n\r\n const [facetFilters, setFacetFilters] = useState(globalFacetFilters || []);\r\n const previousCachedId = useRef(productsViewCachedId);\r\n useEffect(() => {\r\n if (previousCachedId.current !== productsViewCachedId) {\r\n setFacetFilters(globalFacetFilters);\r\n previousCachedId.current = productsViewCachedId;\r\n }\r\n }, [globalFacetFilters, productsViewCachedId]);\r\n\r\n useEffect(() => {\r\n dispatch(query(window.location.search.substr(1) || '', false));\r\n }, [dispatch]);\r\n\r\n const onFacetChange = useCallback(\r\n (filter, option) => {\r\n setFacetFilters((prevFacetFilters) => {\r\n return updateFilterOption(prevFacetFilters, filter, option);\r\n });\r\n },\r\n [setFacetFilters]\r\n );\r\n\r\n const onSearchResultDataChange = (dom) => {\r\n if ([null, undefined].includes(dom)) {\r\n return;\r\n }\r\n const container = document.createElement('div');\r\n container.innerHTML = dom;\r\n const existingResult = document.querySelector('#search-result');\r\n const tempResult = container.querySelector('#search-result');\r\n const existingFilter = existingResult.querySelector(\r\n '#facetedSearchCompact'\r\n );\r\n const tempFilter = tempResult.querySelector('#facetedSearchCompact');\r\n const replace = (node, newNode) =>\r\n node.parentNode.replaceChild(newNode, node);\r\n // move existingFilter from existingResult to tempResult\r\n replace(tempFilter, existingFilter);\r\n // replace existingResult with tempResult ( newResult )\r\n replace(existingResult, tempResult);\r\n // bootstrap react components if any exists in the search result\r\n window.__litium.bootstrapComponents();\r\n };\r\n\r\n useEffect(() => {\r\n const productViewCached = window.__litium.cache\r\n ? window.__litium.cache[PRODUCT_VIEW_CACHED] || {}\r\n : {};\r\n if (!productViewCached.used) {\r\n productViewCached.used = true;\r\n const dom = productViewCached.productsView;\r\n dom && onSearchResultDataChange(dom);\r\n }\r\n });\r\n\r\n const empty = (array) => !(array && array.length);\r\n\r\n const subNavigations = !subNavigation ? null : [subNavigation];\r\n const sortCriterias =\r\n !sortCriteria || !sortCriteria.sortItems\r\n ? null\r\n : sortCriteria.sortItems;\r\n\r\n const hidden = [subNavigations, facetFilters, sortCriterias].every((arr) =>\r\n empty(arr)\r\n );\r\n\r\n return hidden ? null : (\r\n \r\n
\r\n )}\r\n