\n \n images.map((image, index) => (\n \n \n {isVideoEnabled && image.video ? (\n
\n \n ))\n }\n />\n \n \n {images.map((image, index) => {\n if (isVideoEnabled && image.video) {\n return (\n {\n if (enableZoom) {\n this.setState({\n showZoomModal: true\n });\n }\n }}>\n
\n );\n } else {\n return (\n \n
\n \n );\n return link ? (\n \n \n {displayRating}\n \n
\n \n \n
\n {displayRating}
\n \n \n
\n );\n};\n\nconst NotParticipatingMessage = props => {\n const { item, onClose, toLocalizedUrl } = props;\n if (item) {\n return (\n \n
\n \n );\n } else {\n return (\n \n \n \n \n
\n {item.seller.alias}
\n\n Butik\n
\n\n
\n \n {item.seller.alias} är inte en privat säljare och\n finns för tillfället inte tillgänglig via Traderas\n meddelandetjänst.\n
\n\n Vi rekommenderar att du kontaktar dem via\n orderinformation för detta köp.\n
\n\n \n \n
\n \n );\n }\n};\n\nexport default withUrlLocalizer(MessagingModal);\n","/**\n * Description:\n * module with helper functions to create GPT objects, preferably used in combination with html data attributes as below\n *\n *\n * Sample of how to define a new ad slot:\n *\n \n
\n \n Säljaren finns för tillfället inte tillgänglig via\n Traderas meddelandetjänst.\n
\n\n
{t('error_somethingWentWrong')}
\n\n
\n {t('startPage_favoriteSeller_fallbackDescription')}\n
\n \n );\n};\n\nexport default FavouriteSellersFallback;\n","// extracted by mini-css-extract-plugin\nexport default {\"overlay\":\"overlay--ZLLD9\"};","import React, { Component } from 'react';\nimport PropType from 'prop-types';\nimport styles from './overlay.module.scss';\n\nclass Overlay extends Component {\n closeOnEscape = e => {\n const { closeModalCallback } = this.props;\n if (e.keyCode === 27) {\n if (closeModalCallback) {\n closeModalCallback(e);\n }\n e.preventDefault();\n }\n };\n\n componentDidMount() {\n window.addEventListener('keydown', this.closeOnEscape);\n }\n\n componentWillUnmount() {\n window.removeEventListener('keydown', this.closeOnEscape);\n }\n\n render() {\n const { children, closeModalCallback, style } = this.props;\n\n return (\n\n \n \n {formattedCartItems}\n \n
\n );\n};\n\nCartLink.propTypes = {\n formattedCartItems: PropTypes.number,\n cartSum: PropTypes.number\n};\n\nexport default React.memo(CartLink);\n","import React from 'react';\nimport { useTranslator } from 'tradera-lang/translate';\nimport { Button } from 'tradera-components/atoms/button/button';\n\nconst DropDownMenuHamburger = ({ active, className, onClick, tabIndex }) => {\n const { t } = useTranslator();\n return (\n \n
\n \n \n {cartSum} {unit}\n \n
\n \n \n
\n )}\n - {children}
- \n {/* NOTE: Notifications are disabled for burger button for desktop due to hidden cart and messaging, see DropDownMenuHamburger */}\n
\n
\n \n }\n className=\"bg-white\"\n />\n {filteredCategories.map(\n category =>\n category && (\n \n {topLevelCategories?.length >= 0 && (\n
\n );\n};\n\nexport { SeoLinks };\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { TransitionGroup } from 'react-transition-group';\nimport MediaQuery from 'react-responsive';\nimport { RemoveScroll } from 'react-remove-scroll';\n\nimport categoryActions from 'tradera-state/categories/actions';\nimport uiActions from 'tradera-state/ui/actions';\nimport { BREAKPOINTS, BREAKPOINT_SIZES } from 'tradera-constants/breakpoints';\nimport { logger } from 'packages';\nimport GtmService from 'static/script/app/ui/google-tagmanager-service';\nimport {\n EnterFade,\n EnterFrom\n} from 'tradera-components/transitions/transitions';\nimport ApplicationErrorBoundary from 'tradera-components/application-error-boundary/application-error-boundary';\nimport Overlay from 'components/modals/overlay';\nimport DropDownMenuHamburger from './dropdown-menu-burger';\nimport DropdownMenuContent from './dropdown-menu-content';\nimport { SeoLinks } from './seo-links';\n\nconst trackAnalytics = label => {\n try {\n GtmService.trackAction('Top navigation', 'Category menu', label);\n } catch (error) {\n logger(error);\n }\n};\n\nconst DropdownMenu = ({\n className,\n inSPA,\n isLoggedIn,\n transparentHeader,\n tabIndex\n}) => {\n const dropdownMenu = useSelector(state => state.ui.categoryDropdownMenu);\n const categories = useSelector(state => state.categories);\n const expanded = dropdownMenu.open === 'open';\n const dispatch = useDispatch();\n\n const onClick = () => {\n if (expanded) {\n dispatch(uiActions.closeCategoryDropdownMenu());\n trackAnalytics('Menu close');\n } else {\n dispatch(uiActions.closeProfileMenu());\n if (!categories.isFetching && categories.list.length === 0) {\n dispatch(categoryActions.fetchCategoryList());\n }\n dispatch(uiActions.openCategoryDropdownMenu());\n\n trackAnalytics('Menu open');\n }\n };\n\n const onItemClick = () => {\n dispatch(uiActions.closeCategoryDropdownMenu());\n };\n\n const sideMenuMediaProps = {\n maxWidth: BREAKPOINT_SIZES[BREAKPOINTS.LG].max\n };\n const dropdownMenuMediaProps = {\n minWidth: BREAKPOINT_SIZES[BREAKPOINTS.LG].max\n };\n\n const renderChild = () => (\n \n
\n \n 
\n
\n {t(title)}
\n\n
\n \n \n {t('pushModal_btn_no')}\n \n
\n \n \n
\n \n {title && (\n {\n onCurrencySelected(code);\n onBlur();\n }}>\n \n
\n );\n};\n\nPlainCurrencySelect.propTypes = {\n currencies: PropTypes.arrayOf(\n PropTypes.shape({\n code: PropTypes.string,\n shortName: PropTypes.string,\n longName: PropTypes.string\n })\n ),\n preferredCurrency: PropTypes.shape({\n code: PropTypes.string\n }),\n onCurrencySelected: PropTypes.func.isRequired,\n onBlur: PropTypes.func.isRequired,\n inProfileMenu: PropTypes.bool\n};\n\nconst mapStateToProps = state => ({\n currencies: selectCurrencies(state),\n preferredCurrency: selectPreferredCurrency(state)\n});\n\nconst mapDispatchToProps = dispatch => ({\n onCurrencySelected: code => dispatch(setPreferredCurrencyThunk(code))\n});\n\nexport const CurrencySelect = connect(\n mapStateToProps,\n mapDispatchToProps\n)(PlainCurrencySelect);\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport ExpandableMenuItem from 'tradera-components/site-header/dropdown-menu-item-expandable';\nimport { CurrencySelect } from 'static/script/components/localization/currency-select';\nimport CurrencyIcon from '@tradera/blueprint/theme/icons2/currency.svg?jsx';\nimport { useTranslator } from 'tradera-lang/translate';\nimport {\n selectShowCurrencySelection,\n selectPreferredCurrency\n} from 'tradera-state/multi-currency/selectors';\n\nexport const PlainCurrencyMenuItem = ({\n onToggle,\n showCurrencySelection,\n preferredCurrency\n}) => {\n const { t } = useTranslator();\n\n return showCurrencySelection ? (\n \n {title}\n
\n )}\n {currencies.map(({ code, shortName, longName }) => (\n \n {t('siteheader_invoiceUnpaidDescription')}\n
\n );\n};\n\nconst InvoiceOverdueAlert = () => {\n const { t } = useTranslator();\n return (\n \n
\n {t('siteheader_invoiceOverdueDescription')}\n \n
\n );\n};\n\nconst BankAccountMissingAlert = () => {\n const { t } = useTranslator();\n trackPaymentOnboarding(\n 'Bank account Onboarding Alert',\n 'Will add from - Account menu alert'\n );\n return (\n \n {t('siteheader_invoiceOverdueDescription')}\n \n
\n
\n {t('siteheader_bankAccountMissingDescription')}\n \n
\n );\n};\n\nconst PayoutFailedAlert = () => {\n const { t } = useTranslator();\n return (\n \n {t('siteheader_bankAccountMissingDescription')}\n \n
\n
\n {t('siteheader_payoutFailedDescription')}\n \n
\n );\n};\n\nconst PayoutReadyBankAccountMissingAlert = () => {\n const { t } = useTranslator();\n trackPaymentOnboarding(\n 'Bank account Onboarding Alert',\n 'Will add from - Account menu alert - Failed payment'\n );\n return (\n \n {t('siteheader_payoutFailedDescription')}\n \n
\n
\n );\n};\n\nconst SwishMissingAlert = ({ dismissSwish, enableSwishUrl }) => {\n const { t } = useTranslator();\n trackPaymentOnboarding(\n 'Swish Onboarding Alert',\n 'Show on - Account menu alert'\n );\n return (\n \n
\n {t('siteheader_paymentReadBankAccountMissingDescription')}\n \n
\n \n {t('siteheader_paymentReadBankAccountMissingDescription')}\n \n
\n {\n e.preventDefault();\n window.location.href = enableSwishUrl;\n trackPaymentOnboarding(\n 'Swish Onboarding Alert',\n 'Will add from - Account menu alert'\n );\n }}>\n {\n e.preventDefault();\n dismissSwish();\n trackPaymentOnboarding(\n 'Swish Onboarding Alert',\n 'Dismissed from - Account menu alert'\n );\n }}>\n {t('siteheader_swishNoThanks')}\n
\n \n );\n};\n\nconst HyperwalletPayeeVerificationAlert = () => {\n const { t } = useTranslator();\n return (\n \n
\n {t('siteheader_swishMissingDescription')}\n \n
\n \n {t('siteheader_swishMissingDescription')}\n \n
\n {\n e.preventDefault();\n window.location.href = '/my/PayeeVerification';\n }}>\n {t('siteheader_hyperwalletPayeeVerificationMoreInfo')}\n \n
\n );\n};\n\nconst HyperwalletPayeeVerificationReviewAlert = () => {\n const { t } = useTranslator();\n return (\n \n
\n {t('siteheader_hyperwalletPayeeVerificationDescription')}\n \n
\n \n {t('siteheader_hyperwalletPayeeVerificationDescription')}\n \n
\n {t('siteheader_hyperwalletPayeeVerificationReviewDescription')}\n \n \n );\n};\n\nconst FeeNettingInfoAlert = () => {\n const { t } = useTranslator();\n return (\n
\n
\n );\n};\n\nexport {\n InvoiceUnpaidAlert,\n InvoiceOverdueAlert,\n BankAccountMissingAlert,\n PayoutFailedAlert,\n PayoutReadyBankAccountMissingAlert,\n SwishMissingAlert,\n HyperwalletPayeeVerificationAlert,\n HyperwalletPayeeVerificationReviewAlert,\n FeeNettingInfoAlert\n};\n","import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslator, useUrlLocalizer } from 'tradera-lang/translate';\nimport RatingStars from 'tradera-components/rating-stars/rating-stars';\nimport ALink from 'tradera-components/alink/alink';\n\nconst getGaLinkAttributes = label => ({\n 'data-ga-category': 'Top navigation',\n 'data-ga-action': 'Account menu',\n 'data-ga-label': `Link - ${label}`\n});\n\nconst getGaButtonAttributes = label => ({\n 'data-ga-category': 'Top navigation',\n 'data-ga-action': 'Account menu',\n 'data-ga-label': `Button - ${label}`\n});\n\nconst ProfileCard = ({\n closeProfileMenu,\n memberAlias,\n memberId,\n rating,\n imageUrl,\n cleanedMemberAlias\n}) => {\n const [imageAvailable, setImageAvailable] = useState(true);\n const { t } = useTranslator();\n const { toLocalizedUrl } = useUrlLocalizer();\n return (\n \n {imageUrl && imageAvailable && (\n {\n setImageAvailable(false);\n }}\n />\n )}\n \n \n {imageUrl\n ? t('siteHeader_changeCoverImage')\n : t('siteHeader_addCoverImage')}\n \n \n {memberAlias}\n \n {rating && (\n
\n );\n};\n\nProfileCard.propTypes = {\n memberAlias: PropTypes.string,\n memberId: PropTypes.number,\n rating: PropTypes.number,\n imageUrl: PropTypes.string\n};\n\nexport default ProfileCard;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport MediaQuery from 'react-responsive';\nimport { useDispatch } from 'react-redux';\n\nimport { useTranslator, useUrlLocalizer } from 'tradera-lang/translate';\nimport { BREAKPOINT_SIZES, BREAKPOINTS } from 'tradera-constants/breakpoints';\nimport { useIsFeatureEnabled } from 'tradera-hooks/use-is-feature-enabled';\nimport GtmService from 'static/script/app/ui/google-tagmanager-service';\nimport { getMenuGaAttributes } from 'tradera-components/site-header/site-header.analytics';\n\nimport { useQualtive } from 'tradera-hooks/use-qualtive';\nimport { SURVEYS } from 'tradera-constants/surveys';\nimport uiActions from 'tradera-state/ui/actions';\nimport MenuItemSeparator from 'tradera-components/site-header/dropdown-menu-item-separator';\nimport MenuItem from 'tradera-components/site-header/dropdown-menu-item';\nimport ExpandableMenuItem from 'tradera-components/site-header/dropdown-menu-item-expandable';\nimport { LocalizationMenuItem } from './expandable-localization-menu-item';\nimport { CurrencyMenuItem } from './expandable-currency-menu-item';\nimport {\n InvoiceUnpaidAlert,\n InvoiceOverdueAlert,\n BankAccountMissingAlert,\n PayoutFailedAlert,\n PayoutReadyBankAccountMissingAlert,\n SwishMissingAlert,\n HyperwalletPayeeVerificationAlert,\n HyperwalletPayeeVerificationReviewAlert,\n FeeNettingInfoAlert\n} from './profile-menu-alerts';\nimport ProfileCard from '../profile/profile-card';\nimport AuctionIcon from '@tradera/blueprint/theme/icons2/auction.svg?jsx';\nimport AuctionLostIcon from '@tradera/blueprint/theme/icons2/bid-lost.svg?jsx';\nimport BookmarkIcon from '@tradera/blueprint/theme/icons2/bookmark.svg?jsx';\nimport BuyIcon from '@tradera/blueprint/theme/icons2/buy.svg?jsx';\nimport ChatIcon from '@tradera/blueprint/theme/icons2/chat.svg?jsx';\nimport DateIcon from '@tradera/blueprint/theme/icons2/date.svg?jsx';\nimport DocumentIcon from '@tradera/blueprint/theme/icons2/document.svg?jsx';\nimport HeartIcon from '@tradera/blueprint/theme/icons2/heart.svg?jsx';\nimport HomeIcon from '@tradera/blueprint/theme/icons2/home.svg?jsx';\nimport ListIcon from '@tradera/blueprint/theme/icons2/list.svg?jsx';\nimport LogoutIcon from '@tradera/blueprint/theme/icons2/logout.svg?jsx';\nimport PackageIcon from '@tradera/blueprint/theme/icons2/package.svg?jsx';\nimport PenIcon from '@tradera/blueprint/theme/icons2/pen.svg?jsx';\nimport RatingPositiveIcon from '@tradera/blueprint/theme/icons2/rating-positive.svg?jsx';\nimport SaleIcon from '@tradera/blueprint/theme/icons2/sale.svg?jsx';\nimport SettingsIcon from '@tradera/blueprint/theme/icons2/settings.svg?jsx';\nimport SoldIcon from '@tradera/blueprint/theme/icons2/sold.svg?jsx';\nimport StarIcon from '@tradera/blueprint/theme/icons2/star.svg?jsx';\nimport UnsoldIcon from '@tradera/blueprint/theme/icons2/unsold.svg?jsx';\nimport UserIcon from '@tradera/blueprint/theme/icons2/user.svg?jsx';\nimport WalletIcon from '@tradera/blueprint/theme/icons2/wallet.svg?jsx';\nimport WinningIcon from '@tradera/blueprint/theme/icons2/winning.svg?jsx';\nimport WriteIcon from '@tradera/blueprint/theme/icons2/write.svg?jsx';\nimport { useMenuHeightFix } from 'tradera-hooks/use-menu-height-fix';\nimport { localStore } from 'utils/storage';\nimport { STORAGE_KEYS } from 'tradera-constants/storage';\nimport initData from 'init-data';\n\nconst mediaBelowLarge = { maxWidth: BREAKPOINT_SIZES[BREAKPOINTS.MD].max };\n\nconst getGaAttributes = label =>\n getMenuGaAttributes('Top navigation', 'Account menu', label);\n\nconst trackOnClick = label => {\n GtmService.trackAction('Top navigation', 'Account menu', `Link - ${label}`);\n};\n\nconst trackExpandItemClick = label => {\n GtmService.trackAction('Top navigation', 'Account menu', label);\n};\n\nconst ProfileMenuContent = ({\n cleanedMemberAlias,\n dismissSwish,\n logOut,\n memberAlias,\n memberDetailedSellerRatingAverage,\n memberHeroImage = {},\n memberId,\n showMessagingLink,\n hasTraderaPay,\n systemMessages,\n threadsUnread\n}) => {\n const { t } = useTranslator();\n const dispatch = useDispatch();\n const { toLocalizedUrl } = useUrlLocalizer();\n const isTraderaShopEnabled = useIsFeatureEnabled('tradera-shop');\n const menuContentRef = useMenuHeightFix();\n const { isQualtiveEnabled, openQualtiveModal } = useQualtive();\n const isSellerListEnabled = useIsFeatureEnabled('my-tradera-seller-list');\n\n const closeProfileMenu = () => dispatch(uiActions.closeProfileMenu());\n\n return (\n <>\n \n
\n )}\n \n
\n - \n
{STRINGS.IFRAME_NOT_SUPPORTED}
\n \n\n {isLoggedIn ? (\n
\n \n
\n );\n }\n};\n\nexport const TraderaToastContainer = () => {\n return \n {\n onBlur(e, HOVER_MENUS.CURRENCY);\n }}\n inProfileMenu={false}\n title={t('siteHeader_currency')}\n />\n
\n \n \n );\n};\n\nconst mapStateToProps = state => ({\n preferredCurrency: selectPreferredCurrency(state)\n});\n\nconst mapDispatchToProps = {};\n\nexport const CurrencyLink = connect(\n mapStateToProps,\n mapDispatchToProps\n)(PlainCurrencyLink);\n","import React, { Component } from 'react';\nimport { compose } from 'redux';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport Sticky from 'react-stickynode';\nimport { selectShowCurrencySelection } from 'tradera-state/multi-currency/selectors';\nimport { withIsMobile } from 'tradera-hooks/use-is-mobile';\nimport { withIsTablet } from 'tradera-hooks/use-is-tablet';\nimport { withIsDesktop } from 'tradera-hooks/use-is-desktop';\nimport { HOVER_MENUS } from './hover-menu/constants';\nimport cookieUtil from 'tradera-utils/cookie';\nimport { onWindowLoad } from 'utils/on-ready';\nimport { actions as memberStateActions } from 'tradera-state/member';\nimport uiActions from 'tradera-state/ui/actions';\nimport { withUrlLocalizer } from 'tradera-lang/translate';\nimport TraderaLogo from 'components/tradera/logo?jsx';\nimport TraderaAppLogo from '@tradera/blueprint/theme/logos/tradera-app-logo.svg?jsx';\nimport CartLink from 'tradera-components/site-header/cart-link';\nimport DropdownMenu from 'tradera-components/site-header/dropdown-menu';\nimport SignUpLink from 'tradera-components/site-header/sign-up-link';\nimport ALink from 'tradera-components/alink/alink';\nimport { SearchInSpa, SearchOutsideSpa } from 'components/search/search';\nimport ModalPortal from 'tradera-components/portals/modal-portal';\nimport PushNotificationModal from 'tradera-components/push-notification-modal/push-notification-modal';\nimport { LocalizationLink } from './localization-link';\nimport BuyingLink from './buying-link';\nimport { HowTraderaWorks } from './how-tradera-works';\nimport NewListingLink from './new-listing-link';\nimport ProfileMenuLink from './profile-menu-link';\nimport { SearchButton } from './search-button';\n\nimport MessagingModal from 'tradera-components/messaging/messaging-modal';\nimport WishlistLink from 'tradera-components/site-header/wishlist-link';\nimport OngoingAuctionsLink from 'tradera-components/site-header/ongoing-auctions-link';\nimport SellingLink from 'tradera-components/site-header/selling-link';\nimport { TraderaToastContainer } from 'tradera-components/toasts/tradera-toast-container';\nimport { CurrencyLink } from 'tradera-components/site-header/currency-link';\n\nclass SiteHeader extends Component {\n static propTypes = {\n cartItemCount: PropTypes.number,\n cartSum: PropTypes.number,\n closeMessagingModal: PropTypes.func,\n fetchMessagingNotifications: PropTypes.func,\n getGeolocation: PropTypes.func,\n inSPA: PropTypes.bool,\n searchQuery: PropTypes.string,\n showHeaderSearch: PropTypes.bool\n };\n\n static defaultProps = {\n inSPA: false\n };\n\n constructor(props) {\n super(props);\n this.state = {\n sticky: false,\n autoFocusSearch: false\n };\n }\n\n componentDidMount() {\n const {\n featureSwitches,\n isLoggedIn,\n fetchMessagingNotifications,\n getGeolocation\n } = this.props;\n getGeolocation();\n\n if (featureSwitches['messaging'] && isLoggedIn) {\n fetchMessagingNotifications();\n }\n\n // Scroll up one pixel to show fixed header on mobile\n onWindowLoad(() => {\n // Toggle on sticky behavior on window load to force reflow and show sticky header on mobile & Firefox\n this.setState({ sticky: true });\n });\n }\n\n handleClickSearch = () => {\n const { openSearchForm, closeSearchForm, showSearch } = this.props;\n if (showSearch) {\n closeSearchForm();\n } else {\n openSearchForm();\n }\n this.setState(prevState => ({\n ...prevState,\n autoFocusSearch: !prevState.showSearch\n }));\n };\n\n handleMouseOverMenu = menu => {\n if (this.props.isDesktop) {\n this.setState({\n activeHoverMenu: menu\n });\n }\n };\n\n handleMouseOutMenu = () => {\n this.setState({\n activeHoverMenu: false\n });\n };\n\n // Event handler for menu button:\n // Mobile: link, no menu open\n // Tablet: not a link, menu open\n // Desktop: link, menu open\n handleMenuClick = (event, menu) => {\n if (\n this.props.isMobile &&\n menu !== HOVER_MENUS.LOCALIZATION &&\n menu !== HOVER_MENUS.CURRENCY\n ) {\n return;\n }\n\n // Prevent click for tablet to allow tap to open\n if (this.props.isTablet) {\n event.preventDefault();\n }\n // Force focus so touch devices can get a blur event\n event.target.focus();\n this.setState(state => ({\n activeHoverMenu: state.activeHoverMenu === menu ? false : menu\n }));\n };\n\n // Event handler for non-linked menu button that always open a menu\n handleAlwaysOpenMenuClick = (event, menu) => {\n event.preventDefault();\n event.target.focus();\n this.setState(state => ({\n activeHoverMenu: state.activeHoverMenu === menu ? false : menu\n }));\n };\n\n handleMenuBlur = () => {\n this.setState({\n activeHoverMenu: false\n });\n };\n\n handleRegisterClick = () => {\n const { isLoggedIn } = this.props;\n\n if (!isLoggedIn) {\n const cookieName = 'signup_referral_path';\n const expireDate = new Date();\n const value = window.location.href;\n expireDate.setTime(expireDate.getTime() + 10 * 60 * 1000);\n cookieUtil.createCookie(cookieName, value, expireDate);\n }\n };\n\n render() {\n const {\n cartItemCount,\n cartSum,\n closeMessagingModal,\n closeNotificationOptinModal,\n isMobile,\n inSPA,\n isLoggedIn,\n messagingModal,\n notificationOptinModal,\n pageName,\n showSearch,\n showCurrencySelection,\n showHeaderSearch,\n toLocalizedUrl\n } = this.props;\n const { sticky } = this.state;\n const formattedCartItems = cartItemCount;\n const hasCartItems = formattedCartItems > 0;\n const stickyEnabledOnPage = !pageName?.includes('MyTradera');\n\n const hideElements =\n !showHeaderSearch && pageName?.includes('StartPage');\n const transparentHeader = hideElements && !isMobile;\n\n return (\n - \n
- \n
- \n
- \n
- \n
- \n {isLoggedIn ? (\n
- \n
- \n
- \n
- \n
- \n
\n {description}\n
\n \n
\n \n );\n })}\n {shippingPriceRange && (\n \n {formatPrice(\n shippingOption.cost,\n language,\n preferredCurrency\n )}\n
\n \n
\n )}\n \n );\n\n return (\n \n {t('checkout_shipping_priceRange', {\n min: shippingPriceRange.minPrice,\n max: shippingPriceRange.maxPrice\n })}\n
\n {isSellpyCheckout && (\n \n {t('cart_sellpyShippingRange')}\n
\n )}\n \n
\n );\n};\n\nexport default ShippingDisplay;\n","/* eslint-disable better-mutation/no-mutation */\n\nimport { useState, useEffect, useRef } from 'react';\n\nconst useDidMountEffect = (func, deps) => {\n const didMount = useRef(false);\n\n useEffect(() => {\n if (didMount.current) func();\n else didMount.current = true;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, deps);\n};\n\n/**\n * Loads an image source and keep track of isLoaded and error states.\n *\n * @param {string} src\n * @returns {[boolean, boolean]}\n */\nfunction useImageLoader(src) {\n const [isLoaded, setIsLoaded] = useState(false);\n const [error, setError] = useState(false);\n\n useEffect(() => {\n if (!src) {\n return;\n }\n const image = new Image();\n image.onload = () => setIsLoaded(true);\n image.onerror = () => setError(true);\n image.src = src;\n return () => {\n image.onload = null;\n image.onerror = null;\n };\n }, [src]);\n\n return [isLoaded, error];\n}\n\nexport { useDidMountEffect, useImageLoader };\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\nif (process.env.NODE_ENV !== 'production') {\n var ReactIs = require('react-is');\n\n // By explicitly using `prop-types` you are opting into new development behavior.\n // http://fb.me/prop-types-in-prod\n var throwOnDirectAccess = true;\n module.exports = require('./factoryWithTypeCheckers')(ReactIs.isElement, throwOnDirectAccess);\n} else {\n // By explicitly using `prop-types` you are opting into new production behavior.\n // http://fb.me/prop-types-in-prod\n module.exports = require('./factoryWithThrowingShims')();\n}\n","import { PAGE_NAMES as MYT_PAGE_NAMES } from 'tradera-apps/my-tradera/app/constants/page';\n\nexport const SURVEYS = {\n general: {\n survey: 'tradera/hur-tycker-du-att-det-fungerar-att-anvanda-tradera',\n supportURL: 'https://info.tradera.com/'\n },\n language: {\n survey: 'tradera/english-translation---rate-your-experience'\n },\n paynova: {\n survey: 'tradera/hur-tycker-du-att-paynova-fungerar',\n textKey: 'surveys_text_paynova'\n },\n cardVerification: {\n survey: 'tradera/vad-fick-dig-att-avbryta-kortverifieringen'\n },\n bankId: {\n survey: 'tradera/bankid'\n },\n [MYT_PAGE_NAMES.BuyerActiveItems]: {\n survey:\n 'tradera/hur-tycker-du-det-fungerar-att-filtrera-soka-och-sortera-i-listan-for-aktiva-annonser'\n },\n [MYT_PAGE_NAMES.BuyerPurchases]: {\n survey:\n 'tradera/hur-tycker-du-det-fungerar-att-filtrera-soka-och-sortera-i-listan-for-mina-kop'\n },\n [MYT_PAGE_NAMES.BuyerItemsLost]: {\n survey:\n 'tradera/hur-tycker-du-det-fungerar-att-filtrera-soka-och-sortera-i-listan-for-mina-ej-vunna'\n },\n [MYT_PAGE_NAMES.SellerActive]: {\n survey:\n 'tradera/hur-tycker-du-det-fungerar-att-filtrera-soka-och-sortera-i-listan-for-aktiva-annonser-2'\n },\n [MYT_PAGE_NAMES.SellerSold]: {\n survey:\n 'tradera/hur-tycker-du-det-fungerar-att-filtrera-soka-och-sortera-i-listan-for-salda-annonser'\n },\n [MYT_PAGE_NAMES.SellerUnsold]: {\n survey:\n 'tradera/hur-tycker-du-det-fungerar-att-filtrera-soka-och-sortera-i-listan-for-osalda-annonser'\n },\n valuationPage: {\n survey: 'tradera/vad-ar-den-vard-hur-tycker-varderingen-funkar-'\n },\n syiDraftPage: {\n survey: 'tradera/hur-fungerar-det-att-skapa-en-annons'\n },\n combinedShipping: {\n survey: 'tradera/samfrakt---som-sljare-hur-fungerar-det-fr-dig'\n },\n payouts: {\n survey: 'tradera/utbetalningar-hur-fungerar-den-for-dig'\n },\n translationImprovements: {\n survey: 'tradera/versattningar-forbattringsforslag'\n },\n shipping: {\n survey: 'tradera/fraktbokning---hur-fungerar-det-fr-dig'\n },\n selectShipping: {\n survey: 'tradera/hur-fungerar-det-att-valja-och-boka-frakt'\n }\n};\n","import {\n addRecentSearch,\n removeRecentSearch\n} from 'components/search/helpers/suggestions-api';\nimport { getPersonalisedBrands, getPersonalisedSearches } from './api';\n\nconst setPersonalisedBrandsAction = (items, status) => ({\n type: 'PERSONALISATION/SET_BRANDS',\n items,\n status\n});\n\nconst setPersonalisedSearchesAction = (items, status) => ({\n type: 'PERSONALISATION/SET_SEARCHES',\n items,\n status\n});\n\nconst setPersonalisedBrandsStatusAction = status => ({\n type: 'PERSONALISATION/FETCH_BRANDS_STATUS',\n status\n});\n\nconst setPersonalisedSearchesStatusAction = status => ({\n type: 'PERSONALISATION/FETCH_SEARCHES_STATUS',\n status\n});\n\nconst recentSearchesIsUpdatedAction = () => ({\n type: 'RECENT_SEARCHES_LAST_UPDATED',\n lastUpdated: Date.now()\n});\n\nexport const fetchPersonalisedBrandsIfNeeded = () => async (\n dispatch,\n getState\n) => {\n const { status } = getState().personalisation.brands;\n if (status !== 'NOT_FETCHED') return;\n\n dispatch(setPersonalisedBrandsStatusAction('LOADING'));\n\n const brandsResult = await getPersonalisedBrands();\n\n const newStatus = brandsResult.length > 0 ? 'HAS_DATA' : 'HAS_NO_DATA';\n dispatch(setPersonalisedBrandsAction(brandsResult, newStatus));\n};\n\nexport const fetchPersonalisedSearchesIfNeeded = () => async (\n dispatch,\n getState\n) => {\n const { status } = getState().personalisation.searches;\n if (status !== 'NOT_FETCHED') return;\n\n dispatch(setPersonalisedSearchesStatusAction('LOADING'));\n\n const searchesResult = await getPersonalisedSearches();\n\n const newStatus = searchesResult.length > 0 ? 'HAS_DATA' : 'HAS_NO_DATA';\n dispatch(setPersonalisedSearchesAction(searchesResult, newStatus));\n};\n\nexport const addRecentSearchText = text => async dispatch => {\n addRecentSearch(text);\n dispatch(recentSearchesIsUpdatedAction());\n};\n\nexport const removeRecentSearchText = text => async dispatch => {\n removeRecentSearch(text);\n dispatch(recentSearchesIsUpdatedAction());\n};\n","import ENDPOINTS from 'tradera-constants/endpoints';\nimport {\n axiosWithTokenRefresh,\n defaultJsonRequestHeaders,\n handleError,\n logError\n} from 'tradera-utils/api';\n\nexport const getPersonalisedBrands = () => {\n return axiosWithTokenRefresh()\n .get(`${ENDPOINTS.PERSONALISED_SUGGESTIONS}/brands`, {\n headers: defaultJsonRequestHeaders\n })\n .catch(handleError())\n .catch(logError)\n .then(response => response?.data || []);\n};\n\nexport const getPersonalisedSearches = () => {\n return axiosWithTokenRefresh()\n .get(`${ENDPOINTS.PERSONALISED_SUGGESTIONS}/searches`, {\n headers: defaultJsonRequestHeaders\n })\n .catch(handleError())\n .catch(logError)\n .then(response => response?.data || []);\n};\n","import { BIN_VALIDATION_RESULTS } from '../../api/vip-api-constants';\n\nconst binValidationParser = error => {\n let validationTitle;\n let validationBody;\n switch (error) {\n case BIN_VALIDATION_RESULTS.ITEM_NOT_FOUND:\n validationTitle = 'vip_bid_itemNotFoundTitle';\n validationBody = 'vip_bid_itemNotFoundBody';\n break;\n case BIN_VALIDATION_RESULTS.BIDDER_IS_BLOCKED:\n validationTitle = 'vip_bid_bidderIsBlockedTitle';\n validationBody = 'vip_bid_bidderIsBlockedBody';\n break;\n case BIN_VALIDATION_RESULTS.BUYING_OWN_ITEM:\n validationTitle = 'vip_bid_biddingOrBuyingOwnItemTitle';\n validationBody = 'vip_bid_biddingOrBuyingOwnItemBody';\n break;\n case BIN_VALIDATION_RESULTS.ONLY_EU_BUYERS_ACCEPTED:\n validationTitle = 'vip_bid_onlyEUBuyersAcceptedTitle';\n validationBody = 'vip_bid_onlyEUBuyersAcceptedBody';\n break;\n case BIN_VALIDATION_RESULTS.ONLY_NORDIC_BUYERS_ACCEPTED:\n validationTitle = 'vip_bid_onlyNordicBuyersAcceptedTitle';\n validationBody = 'vip_bid_onlyNordicBuyersAcceptedBody';\n break;\n case BIN_VALIDATION_RESULTS.ONLY_SWEDISH_BUYERS_ACCEPTED:\n validationTitle = 'vip_bid_onlySwedishBuyersAcceptedTitle';\n validationBody = 'vip_bid_onlySwedishBuyersAcceptedBody';\n break;\n case BIN_VALIDATION_RESULTS.USER_IS_SUSPENDED:\n validationTitle = 'vip_bid_userIsSuspendedTitle';\n validationBody = 'vip_bid_userIsSuspendedBody';\n break;\n case BIN_VALIDATION_RESULTS.ITEM_HAS_ENDED:\n validationTitle = 'vip_bid_auctionHasEndedTitle';\n validationBody = 'vip_bid_auctionHasEndedBody';\n break;\n case BIN_VALIDATION_RESULTS.PURCHASE_DID_NOT_SUCCEED:\n case BIN_VALIDATION_RESULTS.ITEM_ALREADY_PURCHASED_BY_OTHER_USER:\n default:\n validationTitle = 'vip_bid_errorTitle';\n validationBody = 'vip_bid_errorDescription';\n break;\n }\n\n return {\n validationTitle,\n validationBody\n };\n};\n\nexport default binValidationParser;\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport React from \"react\";\nexport default (({\n styles = {},\n ...props\n}) => /*#__PURE__*/React.createElement(\"svg\", _extends({\n viewBox: \"0 0 16 16\",\n xmlns: \"http://www.w3.org/2000/svg\"\n}, props), /*#__PURE__*/React.createElement(\"path\", {\n clipRule: \"evenodd\",\n d: \"M8 0c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm0 10.9c-.6 0-1.1.5-1.1 1.1s.5 1.1 1.1 1.1 1.1-.5 1.1-1.1-.5-1.1-1.1-1.1zm1-7.4H7l.2 5.6h1.7z\",\n fillRule: \"evenodd\"\n})));","import React from 'react';\n\nconst ItemDisplayConfirmed = ({\n itemImage,\n itemTitle,\n formattedPrice,\n itemUrl\n}) => {\n return (\n <>\n \n \n {shippingPriceRange\n ? t('checkout_bin_shippingPriceRange')\n : t('checkout_bin_shippingOptions')}\n :\n \n
\n \n {shippingOptionsPart}\n
\n \n
\n {shippingOptionsPart}
\n \n \n
\n \n
\n \n );\n};\n\nexport default ItemDisplayConfirmed;\n","import React, { useCallback, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport {\n useUrlLocalizer,\n useCurrentLanguage,\n useTranslator\n} from 'tradera-lang/translate';\nimport DialogModal from 'tradera-components/dialog/dialog-modal';\nimport { purchaseBin } from 'tradera-state/views/checkout/api';\nimport { fetchItemAndBidInfo } from 'tradera-state/views/view-item/reducer';\nimport binValidationParser from './bin-validation-parser';\nimport CheckFillIcon from '@tradera/blueprint/theme/icons2/check-fill.svg?jsx';\nimport NotifyIcon from '@tradera/blueprint/theme/icons2/notify.svg?jsx';\nimport { formatPrice } from '@tradera/blueprint/utils';\nimport * as analytics from '../../helpers/analytics';\nimport TopDescription from './bin-modal-top-description';\nimport SellerName from './bin-modal-seller-name';\nimport ItemDisplay from './bin-modal-item-display';\nimport ItemDisplayConfirmed from './bin-modal-item-display-confirmed';\nimport ShippingDisplay from './bin-modal-shipping-display';\nimport PaymentSummary from './bin-modal-payment-summary';\nimport BottomButtons from './bin-modal-bottom-buttons';\nimport { CardVerificationModal } from 'tradera-components/wacko-bidder/card-verification-modal';\nimport { BID_VALIDATION_RESULTS } from 'tradera-apps/tradera/components/vip/api/vip-api-constants';\nimport { selectPreferredCurrency } from 'tradera-state/multi-currency/selectors';\n\nconst BIN_FORM_STATES = {\n NOT_CONFIRMED: 'NOT_CONFIRMED',\n CONFIRMED: 'CONFIRMED',\n CONFIRMED_WITH_ERROR: 'CONFIRMED_WITH_ERROR'\n};\n\nconst CenteredIcon = ({ children }) => {\n return (\n \n 
\n
\n \n \n {itemTitle}\n \n
\n \n {formattedPrice}\n
\n \n
\n );\n};\n\nconst Separator = () => ;\n\nconst BigSeparator = () => (\n \n);\n\nconst CloseButton = ({ action, text }) => (\n {children}
\n \n
\n);\n\nconst BinModal = ({ onClose }) => {\n const { toLocalizedUrl } = useUrlLocalizer();\n const { t } = useTranslator();\n const dispatch = useDispatch();\n const preferredCurrency = useSelector(selectPreferredCurrency);\n const [currentFormState, setCurrentFormState] = useState(\n BIN_FORM_STATES.NOT_CONFIRMED\n );\n const [error, setError] = useState(undefined);\n const [transactionId, setTransactionId] = useState(undefined);\n const { language } = useCurrentLanguage();\n\n const itemDetails = useSelector(state => state.views.viewItem.itemDetails);\n const {\n seller,\n itemMainImage,\n title: itemTitle,\n itemId,\n shippingOptions,\n fixedPrice\n } = itemDetails;\n const formattedPrice = formatPrice(fixedPrice, language, preferredCurrency);\n const buyerCountryCode = useSelector(\n state => state.shippingRegion.shippingCountry.countryCodeIso2\n );\n\n const onContinue = useCallback(() => {\n analytics.trackPayBin();\n window.location = toLocalizedUrl(\n `/Shopping/Checkout/SelectPaymentForTransaction?transactionId=${transactionId}`\n );\n }, [transactionId, toLocalizedUrl]);\n\n const onConfirm = () => {\n purchaseBin({\n itemId: itemId,\n googleAnalyticsData: analytics.getGaTrackingData()\n })\n .then(({ data }) => {\n setError(undefined);\n analytics.trackConfirmBin();\n setTransactionId(data.transactionId);\n setCurrentFormState(BIN_FORM_STATES.CONFIRMED);\n return;\n })\n .catch(e => {\n analytics.trackBinError();\n\n setError(e.response.data.responseStatus.errorCode);\n setCurrentFormState(BIN_FORM_STATES.CONFIRMED_WITH_ERROR);\n });\n };\n\n const closeModal = () => {\n if (currentFormState !== BIN_FORM_STATES.NOT_CONFIRMED) {\n dispatch(fetchItemAndBidInfo(itemId, false));\n }\n onClose();\n };\n\n const keepShopping = () => {\n analytics.trackKeepShopping();\n closeModal();\n };\n\n if (\n error === BID_VALIDATION_RESULTS.MAX_PLACED_BIDS_LIMIT ||\n error === BID_VALIDATION_RESULTS.BID_AMOUNT_LIMIT\n ) {\n return (\n \n \n {text}\n \n
\n \n {currentFormState === BIN_FORM_STATES.NOT_CONFIRMED && (\n <>\n \n \n\n
\n \n );\n};\n\nconst ErrorFeedback = ({\n error,\n itemMainImage,\n itemTitle,\n formattedPrice,\n closeModal\n}) => {\n const { t } = useTranslator();\n const { validationTitle, validationBody } = binValidationParser(error);\n\n return (\n <>\n \n \n {t('checkout_summary_toPayTitle')}:\n \n
\n \n
\n \n {showShippingSelectionRow && (\n \n {t('checkout_bin_pricePlusShipping', {\n price: formattedPrice\n })}\n
\n \n
\n )}\n \n );\n};\n\nexport default PaymentSummary;\n","import React, { useCallback, useState } from 'react';\nimport PropTypes from 'prop-types';\n\nimport RadioSwitch from 'tradera-components/form-controls/radio-switch';\n\nconst ContentSwitch = props => {\n const { className, defaultSelected, onSwitch, options, title } = props;\n const [selected, setSelected] = useState(\n defaultSelected || Object.keys(options)[0]\n );\n // Keep track of which options have been shown to only render what's needed\n const [renderedOptions, setRenderedOptions] = useState([selected]);\n const onChange = useCallback(\n selected => {\n if (!renderedOptions.includes(selected)) {\n setRenderedOptions([...renderedOptions, selected]);\n }\n setSelected(selected);\n if (onSwitch) onSwitch(selected);\n },\n [onSwitch, renderedOptions, setRenderedOptions, setSelected]\n );\n\n return (\n \n {isSellpyCheckout\n ? t('cart_sellpyShipping')\n : t('checkout_bin_shippingDescription')}\n
\n {title}
}\n\n ({\n value: key,\n name: options[key].label\n }))}\n checked={selected}\n handleOnChange={onChange}\n />\n
\n \n {Object.entries(options).map(([key, option]) => (\n \n {categoriesElement}\n
\n \n
\n \n );\n};\n\nSearchInput.propTypes = {\n categoriesElement: PropTypes.element,\n inputClassName: PropTypes.string,\n onBlur: PropTypes.func,\n onClearSearchInput: PropTypes.func,\n onFocus: PropTypes.func,\n onFormSubmit: PropTypes.func.isRequired,\n onUserInputChange: PropTypes.func,\n onUserKeyUp: PropTypes.func,\n searchInputRef: PropTypes.object,\n searchTerm: PropTypes.string.isRequired,\n selectedCategory: PropTypes.object,\n suggestionsElement: PropTypes.element,\n placeholderText: PropTypes.string\n};\n\nSearchInput.defaultProps = {\n categoriesElement: null,\n inputClassName: '',\n onBlur: () => {},\n onFocus: () => {},\n onUserInputChange: () => {},\n onUserKeyUp: () => {},\n selectedCategory: null,\n suggestionsElement: null,\n placeholderText: null\n};\n\nexport default SearchInput;\n","import { useSelector } from 'react-redux';\n\nconst useIsLoggedIn = () => useSelector(state => state.member?.isLoggedIn);\n\nexport default useIsLoggedIn;\n","import React, { useState, useEffect, useCallback } from 'react';\nimport { connect } from 'react-redux';\nimport { compose } from 'redux';\nimport { hot } from 'react-hot-loader';\nimport axios from 'axios';\n\nimport ENDPOINTS from 'tradera-constants/endpoints';\nimport { handleError, API_ERRORS } from 'tradera-utils/api';\nimport { logger } from 'packages';\nimport { LAST_CHANCE } from '../content-types';\nimport { trackContainerClick } from '../analytics';\nimport {\n withTranslator,\n useTranslator,\n withUrlLocalizer\n} from 'tradera-lang/translate';\nimport { registerLiveUpdates } from 'tradera-utils/register-live-updates';\nimport { ProviderWithGlobalStore } from 'tradera-state/configure-store';\nimport itemActions from 'tradera-state/items/actions';\nimport uiActions from 'tradera-state/ui/actions';\nimport { generateItemCardPlaceholders } from 'tradera-components/item-card/generate-item-card-placeholders';\nimport { lazyLoadSettings } from 'tradera-components/item-card/config';\nimport ItemCard from 'tradera-components/item-card/item-card';\nimport ApplicationErrorBoundary from 'tradera-components/application-error-boundary';\nimport useIsMobile from 'tradera-hooks/use-is-mobile';\nimport ALink from 'tradera-components/alink/alink';\nimport { useIsFeatureEnabled } from 'tradera-hooks/use-is-feature-enabled';\n\nconst LastChance = props => (\n \n {t('lastChance_header')}\n
\n\n {displayItems.map(item => (\n
\n \n
\n ))}\n \n
\n \n \n trackContainerClick(\n LAST_CHANCE,\n 'Last chance button below'\n )\n }>\n {`${t('lastChance_showMore')} ->`}\n \n
\n \n
{t('error_pageNotFound')}
\n\n
\n {!imageFormats ? (\n
\n \n
\n ) : (\n \n
\n \n
\n \n {shortDescription}\n
\n\n
\n \n {loading && (\n \n handleWishlistClick()}>\n {existsInWishList ? (\n {\n GtmService.trackAction(\n 'Quick View',\n 'Navigation',\n 'View full listing'\n );\n }}>\n {t('mytQuickView_viewFullListing')}\n \n
\n \n \n {t(titleKey)}\n \n
\n \n
\n \n \n );\n};\n\nexport default TopDescription;\n","import React, { Fragment } from 'react';\n\nimport CheckIcon from '@tradera/blueprint/theme/icons2/check.svg?jsx';\nimport InfoIcon from '@tradera/blueprint/theme/icons2/info.svg?jsx';\nimport { useTranslator } from 'tradera-lang/translate';\nimport SimpleModal from 'components/modals/simple-modal';\nimport TraderaLogo from 'components/tradera/logo';\nimport './gdpr-modal.scss';\n\nconst GdprModal = props => {\n const { t } = useTranslator();\n const { openGdprSettings, acceptAndHide } = props;\n return (\n \n {descriptions.map(descKey => (\n \n {t(descKey)}\n
\n ))}\n \n
\n \n
\n \n {t('gdprConsent_modal_header')}\n
\n\n
\n {t('gdprConsent_modal_info')}{' '}\n
\n
\n \n {t('gdprConsent_modalTitle')}\n
\n\n
\n \n \n
\n \n {t('gdprConsent_save')}\n \n
\n \n );\n }\n}\n\nGdprSettingsModal.propTypes = {\n saveHandler: PropTypes.func.isRequired\n};\n\nexport default withTranslator(GdprSettingsModal);\n","import React, { Fragment } from 'react';\nimport { connect } from 'react-redux';\n\nimport { useDayJs } from 'tradera-hooks/use-day-js';\nimport { Analytics, logger } from 'packages';\nimport uiActions from 'tradera-state/ui/actions';\nimport CookieUtil from 'tradera-utils/cookie';\nimport {\n GDPR_CONSENT_COOKIE,\n GDPR_CONSENT_ALERT_DISMISSED\n} from 'tradera-constants/cookies';\nimport GdprSettings from 'tradera-utils/gdpr-settings';\nimport GdprModal from 'tradera-components/alerts/gdpr/gdpr-modal';\nimport GdprSettingsModal from 'tradera-components/alerts/gdpr/gdpr-settings-modal';\nimport { useIsFeatureEnabled } from 'tradera-hooks/use-is-feature-enabled';\n\nconst GdprContainer = props => {\n const {\n visibleModal,\n visibleSettings,\n closeModal,\n openSettings,\n closeSettings\n } = props;\n\n const isQuantcastConsentEnabled = useIsFeatureEnabled('quantcast-consent');\n const dayjs = useDayJs();\n\n const openGdprSettings = event => {\n if (event) event.preventDefault();\n openSettings();\n };\n\n const acceptAndHide = (\n performance = true,\n functional = true,\n marketing = true,\n eventLabel\n ) => {\n GdprSettings.set(performance, functional, marketing);\n CookieUtil.createCookie(\n GDPR_CONSENT_ALERT_DISMISSED,\n 1,\n dayjs()\n .add(1, 'years')\n .toDate()\n );\n closeSettings();\n closeModal();\n // Only track event and reload if cookie settings allow tracking\n if (performance) {\n trackEvent(eventLabel)\n .then(() => location.reload(true))\n .catch(error => logger(error));\n }\n };\n\n const trackEvent = (label = 'Save') => {\n return new Promise(resolve => {\n Analytics.trackEvent({\n category: 'Settings',\n action: 'Cookies',\n label,\n hitCallback: resolve\n });\n });\n };\n\n const hasGdprCookie = CookieUtil.hasCookie(GDPR_CONSENT_COOKIE);\n // Default to all toggled on if settings have never been set\n const gdprSettings = hasGdprCookie\n ? {\n performance: GdprSettings.isPerformanceEnabled(),\n functional: GdprSettings.isFunctionalEnabled(),\n marketing: GdprSettings.isMarketingEnabled()\n }\n : {\n performance: true,\n functional: true,\n marketing: true\n };\n\n return !isQuantcastConsentEnabled ? (\n \n
\n \n ) : null;\n};\n","import React from 'react';\nimport { CAROUSEL, HEADER } from './content-types';\n\nexport const getImageSizes = (\n imageCount,\n image,\n containerType,\n format = 'jpg&fl=progressive'\n) => {\n if (!image) {\n return {};\n }\n const { baseUrl } = image;\n\n const imageUrl = baseUrl + '?fm=' + format;\n\n if (containerType === HEADER) {\n return {\n srcSet: `${imageUrl}&w=1920 1920w, ${imageUrl}&w=768 768w, ${imageUrl}&w=425 425w`,\n sizes: '100vw'\n };\n }\n\n if (containerType === CAROUSEL) {\n return {\n srcSet: `${imageUrl}&w=1250 1250w, ${imageUrl}&w=768 768w, ${imageUrl}&w=425 425w`,\n sizes: '(max-width: 425px) 425px, (max-width: 768px) 768px, 1250px'\n };\n }\n\n let imageSizes;\n switch (imageCount) {\n case 1:\n imageSizes = {\n srcSet: `${imageUrl}&w=1230 1230w, ${imageUrl}&w=768 768w, ${imageUrl}&w=425 425w`,\n sizes:\n '(max-width: 425px) 425px, (max-width: 768px) 768px, 1230px'\n };\n break;\n case 2:\n imageSizes = {\n srcSet: `${imageUrl}&w=605 605w, ${imageUrl}&w=397 397w, ${imageUrl}&w=425 425w`,\n sizes:\n '(max-width: 425px) 425px, (max-width: 768px) 397px, 605px'\n };\n break;\n case 3:\n imageSizes = {\n srcSet: `${imageUrl}&w=605 605w, ${imageUrl}&w=397 397w, ${imageUrl}&w=425 425w`,\n sizes:\n '(max-width: 425px) 425px, (max-width: 768px) 397px, 605px'\n };\n break;\n default:\n imageSizes = {\n srcSet: `${imageUrl}&w=1250 1250w, ${imageUrl}&w=768 768w, ${imageUrl}&w=425 425w`,\n sizes:\n '(max-width: 425px) 425px, (max-width: 768px) 768px, 1250px'\n };\n break;\n }\n return imageSizes;\n};\n\nexport const getWebpImage = (imageCount, image, containerType) => {\n if (!image) {\n return {};\n }\n\n const imageSizes = getImageSizes(imageCount, image, containerType, 'webp');\n\n const { srcSet, sizes } = imageSizes;\n\n return \n {bannerLinks.map(({ text, url, icon }) => (\n \n {url ? (\n \n {content(icon, text)}\n \n ) : (\n content(icon, text)\n )}\n
\n ))}\n \n \n {isDesktopBreakpoint && (\n
\n );\n};\n\nconst MediaItem = ({\n alternativeText,\n heading,\n imageSizes,\n image,\n video,\n webpImage\n}) => {\n const { effectiveConnectionType } = useNetworkStatus();\n\n if (!image) {\n return null;\n }\n\n const { srcSet, sizes } = imageSizes;\n\n const { largeUrl, mediumUrl, smallUrl } = image;\n\n //Return image instead of video if on slow connection\n let media;\n switch (effectiveConnectionType) {\n case 'slow-2g':\n case '2g':\n case '3g':\n media = (\n {media}
;\n};\n\nMediaItem.propTypes = {\n alternativeText: PropTypes.string,\n heading: PropTypes.string,\n imageSizes: PropTypes.shape({\n srcSet: PropTypes.string,\n sizes: PropTypes.string\n }),\n image: PropTypes.object.isRequired,\n video: PropTypes.object\n};\n\nexport default MediaItem;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport ALink from 'tradera-components/alink/alink';\nimport GtmService from 'static/script/app/ui/google-tagmanager-service';\nimport { useUrlLocalizer } from 'tradera-lang/translate';\n\nconst Tag = ({ color, gaAction, gaCategory, name, onClick, url }) => {\n const { toLocalizedUrl } = useUrlLocalizer();\n\n return (\n \n
\n ) : null;\n};\n","import React, { useCallback, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useInView } from 'react-intersection-observer';\n\nimport { StartPageHeroBanner } from './start-page-hero-banner';\nimport { useIsFeatureEnabled } from 'tradera-hooks/use-is-feature-enabled';\nimport useIsMobile from 'tradera-hooks/use-is-mobile';\nimport { getImageSizes, getWebpImage } from '../image-sizes';\nimport { HEADER } from '../content-types';\nimport { trackContainerClick } from '../analytics';\nimport { isSpaLink, toRelativeTraderaUrl } from 'tradera-utils/url';\nimport ALink from 'tradera-components/alink/alink';\nimport MediaItem from '../media/media-item';\nimport TrendingSearchesTags from '../trending/trending-searches-tags';\nimport TraderaLogo from 'components/tradera/logo';\nimport { SearchInSpa } from 'components/search/search';\nimport uiActions from 'tradera-state/ui/actions';\nimport RecentSearchesTags from '../recent-searches/recent-searches-tags';\nimport './start-page-hero.scss';\nimport { StartPageHeroTrustmark } from './start-page-hero-trustmark';\n\nconst StartPageHero = ({\n isLoading,\n showRecentSearches,\n showTrendingSearches\n}) => {\n const {\n backgroundVideo,\n backgroundImage,\n isCampaignMode,\n trackingId,\n webpageUrl = '',\n taglineDesktop,\n taglineMobile\n } = useSelector(state => state.views.startPage.config.header);\n\n const videoEnabled = useIsFeatureEnabled('start-page-contentful-video');\n const video = videoEnabled ? backgroundVideo : null;\n\n const [searchElementRef, searchInView, searchInViewEntry] = useInView({\n rootMargin: '-45px 0px 0px 0px',\n threshold: 1.0\n });\n\n const dispatch = useDispatch();\n const toggleHeaderSearch = useCallback(\n show => dispatch(uiActions.toggleHeaderSearch(show)),\n [dispatch]\n );\n useEffect(() => {\n if (searchInViewEntry) {\n toggleHeaderSearch(!searchInView);\n } else if (isCampaignMode) {\n toggleHeaderSearch(true);\n }\n }, [searchInViewEntry, isCampaignMode, searchInView, toggleHeaderSearch]);\n\n const isMobile = useIsMobile();\n const imageSizes = getImageSizes(1, backgroundImage, HEADER);\n const webpImage = getWebpImage(1, backgroundImage, HEADER);\n const parsedCampaignUrl = isCampaignMode\n ? toRelativeTraderaUrl(webpageUrl)\n : null;\n\n return (\n <>\n \n {backgroundImage ? (\n trackContainerClick(HEADER, trackingId)}\n style={{ top: '0px' }}\n className=\"position-absolute w-100 h-100\"\n aria-label={trackingId}\n />\n ) : (\n
\n \n )}\n \n \n
\n {showRecentSearches && (\n \n
\n \n
\n \n {taglineDesktop && (\n
\n \n {taglineDesktop}\n
\n )}\n\n {taglineMobile && (\n\n {taglineMobile}\n
\n )}\n\n \n
\n \n
\n )}\n {showTrendingSearches && (\n \n
\n \n
\n )}\n \n
\n \n
\n {showContent && (\n \n \n trackContainerClick(containerType, trackingId)\n }\n className=\"carousel-item-link\">\n \n \n \n
\n \n {showHeading && (\n \n trackContainerClick(containerType, trackingId)\n }\n className=\"font-weight-bold btn btn-tertiary mt-1 text-styled\">\n {button}\n \n )}\n
\n )}\n \n );\n};\n\nCarouselItem.propTypes = {\n item: PropTypes.shape({\n alternativeText: PropTypes.string,\n imageUrl: PropTypes.string,\n webpageUrl: PropTypes.string,\n heading: PropTypes.string,\n button: PropTypes.string,\n showsTitle: PropTypes.bool,\n video: PropTypes.object\n })\n};\n\nexport default CarouselItem;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Slider from 'react-slick';\nimport CarouselItem from './carousel-item';\nimport './carousel.scss';\n\nexport const NextArrow = props => {\n const { className, arrowClassName = '', style, onClick } = props;\n return (\n {heading}
\n )}\n {body &&{body}
}\n {button && (\n{title}
}\n\n
\n ))}\n \n {t('instagramFeed_header')}\n
\n\n {posts &&\n posts\n .slice(0, 6)\n .map((post, index) => (\n
\n \n \n trackContainerClick(INSTAGRAM_FEED, 'Instagram post')\n }\n rel=\"nofollow noopener noreferrer\">\n \n {imageAvailable ? (\n setImageAvailable(false)}\n />\n ) : (\n \n \n \n
\n );\n};\n\nexport default InstagramFeed;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Carousel, { NextArrow, PreviousArrow } from '../carousel/carousel';\n\nconst PopularCategories = ({ containerType, data, inSPA, videoEnabled }) => {\n const { items, hiddenOn } = data;\n\n if (hiddenOn?.some(x => x === 'Web')) {\n return null;\n }\n\n // Do not allow container with items outside of range 1-3 or 6\n if (![1, 2, 3, 6].includes(items.length)) {\n return null;\n }\n\n const multiRow = items.length === 6;\n const slidesToShow = multiRow ? 1 : items.length;\n const singleItem = items.length === 1;\n\n const settings = {\n className: `${multiRow ? 'carousel--multi-row' : ''}`,\n dots: true,\n dotsClass: 'slick-dots mb-2',\n infinite: true,\n speed: 500,\n slidesToShow: slidesToShow,\n slidesToScroll: 1,\n initialSlide: 0,\n swipeToSlide: true,\n rows: multiRow ? 2 : 1,\n slidesPerRow: multiRow ? 3 : 1,\n nextArrow: \n
\n \n )}\n \n {t('recentlyViewed_header')}\n
\n\n {items.map(item => (\n
\n \n
\n ))}\n \n
\n );\n};\n\nconst LoadMoreButton = ({ recommendationMode }) => {\n const inSPA = true;\n const { t } = useTranslator();\n const { toLocalizedUrl } = useUrlLocalizer();\n return (\n \n \n {t('startPage_recommendation_endingSoonHeading')}\n \n
\n\n {t('startPage_recommendation_endingSoonText')}\n
\n\n \n {`${t('startPage_recommendation_lastChance')} ->`}\n \n
\n \n \n trackPicksForYouClick('Picks for you button below')\n }\n href={toLocalizedUrl(\n `/ma/endless-recommendation/${recommendationMode}`\n )}>\n {`${t('startPage_recommendation_showMore')} ->`}\n \n
\n );\n};\n\nexport default PicksForYou;\n","import { useSelector } from 'react-redux';\n\nconst useSplitTestGroup = splitTestName =>\n useSelector(state => state.environment.splitTestGroups[splitTestName]);\nexport default useSplitTestGroup;\n","import React, { useState } from 'react';\nimport { useUrlLocalizer, useTranslator } from 'tradera-lang/translate';\nimport ALink from 'tradera-components/alink/alink';\nimport { trackContainerClick } from '../analytics';\nimport './favourite-sellers.scss';\nimport LazyLoad from 'react-lazyload';\nimport GtmService from 'static/script/app/ui/google-tagmanager-service';\nimport { Analytics } from 'packages';\nimport { Button } from 'tradera-components/atoms/button/button';\nimport { postFavoriteSeller } from '../../vip/api/vip-api';\n\nconst FavouriteSellerCard = ({\n sellerAlias,\n sellerId,\n sellerProfileUrl,\n matchedItems,\n heroImageUrl,\n items,\n isSuggestion = false\n}) => {\n const { t } = useTranslator();\n const { toLocalizedUrl } = useUrlLocalizer();\n\n return (\n \n
\n )}\n \n );\n};\n\nconst trackFavoriteSellerClick = (sellerId, wasFavouriteSeller) => {\n GtmService.trackAction(\n 'SellerSuggestion',\n `${wasFavouriteSeller ? 'Remove' : 'Add'} favourite seller`,\n `SellerId: ${sellerId}`\n );\n};\n\nconst SuggestedSellerToggle = ({\n sellerId,\n className = '',\n isFavouriteSeller = false\n}) => {\n const { t } = useTranslator();\n const [isFavoriteSeller, setFavoriteSeller] = useState(isFavouriteSeller);\n const toggleFavoriteSeller = async (sellerId, isAlreadySaved) => {\n const data = await postFavoriteSeller(sellerId, isAlreadySaved);\n if (data && data.status === 200) {\n setFavoriteSeller(!isFavoriteSeller);\n }\n };\n return (\n \n {!!heroImageUrl && (\n {\n trackContainerClick(\n 'favouriteSeller',\n 'Favourite Seller Card image'\n );\n\n if (isSuggestion) {\n Analytics.trackEvent({\n category: 'SellerSuggestion',\n action: 'NavigateProfile',\n label: `${sellerId}:${sellerAlias}`\n });\n }\n }}>\n \n \n \n )}\n
\n {items && items.length > 0 && (\n \n \n
\n {\n trackContainerClick(\n 'favouriteSeller',\n 'Favourite Seller Card item count'\n );\n\n if (isSuggestion) {\n Analytics.trackEvent({\n category: 'SellerSuggestion',\n action: 'NavigateProfile',\n label: `${sellerId}:${sellerAlias}`\n });\n }\n }}\n useLink={true}>\n {t('startPage_favouriteSellers_sellerCard_count', {\n count: matchedItems\n })}\n \n
\n {isSuggestion && (\n \n {\n trackContainerClick(\n 'favouriteSeller',\n 'Favourite Seller Card title'\n );\n\n if (isSuggestion) {\n Analytics.trackEvent({\n category: 'SellerSuggestion',\n action: 'NavigateProfile',\n label: `${sellerId}:${sellerAlias}`\n });\n }\n }}\n title={sellerAlias}\n useLink={true}>\n {sellerAlias}\n \n
\n \n \n \n {items.map(item => (\n {\n trackContainerClick(\n 'favouriteSeller',\n 'Favourite Seller Card item'\n );\n\n if (isSuggestion) {\n Analytics.trackEvent({\n category: 'SellerSuggestion',\n action: 'NavigateItem',\n label: `${sellerId}:${sellerAlias}/${item.itemId}`\n });\n }\n }}\n useLink={true}>\n \n
\n {t('vip_following')}
\n ) : (\n {t('vip_follow')}
\n )}\n \n );\n};\n\nexport default FavouriteSellerCard;\n","import React from 'react';\nimport useIsMobile from 'tradera-hooks/use-is-mobile';\nimport useIsDesktop from 'tradera-hooks/use-is-desktop';\nimport FavouriteSellerCard from './favourite-seller-card';\nimport 'tradera-components/item-card/layout.scss';\nimport './favourite-sellers.scss';\n\nexport const FavouriteSellerCardsGrid = ({\n className = '',\n sellers: allSellers,\n isSuggestion = false\n}) => {\n const isMobile = useIsMobile();\n const isDesktop = useIsDesktop();\n\n if (!allSellers?.length) {\n return null;\n }\n\n const sellers = isMobile\n ? allSellers\n : allSellers?.slice(0, isDesktop ? 4 : 3);\n\n return (\n \n {t('startPage_favouriteSellers_suggestionsTitle')}\n
\n\n {showSellerSuggestionsPositionAbove && (\n \n \n {displayItems.map(item => (\n \n
\n ))}\n {isMobile && (\n \n \n trackContainerClick(\n 'favouriteSellers',\n 'Favourite-Sellers showAll link'\n )\n }\n useLink={false} // Use 'inSPA' when mytradera-page can be rnavigated to without a hard reload\n >\n {`${t('startPage_showAll_link')} ->`}\n \n
\n {showFallbackInfo ? (\n \n {t('startPage_favouriteSellers_title')}\n
\n\n \n trackContainerClick(\n 'favouriteSellers',\n 'Favourite-Sellers button below'\n )\n }\n useLink={inSPA}>\n {`${t(\n 'startPage_favouriteSellers_showMore'\n )} ->`}\n \n
\n )}\n \n )}\n \n {showSellerSuggestionsPositionBelow && (\n \n
\n );\n};\n\nexport default WishListInfoCard;\n","// extracted by mini-css-extract-plugin\nexport default {\"fallback__image\":\"fallback__image--3xQQk\",\"fallbackImage\":\"fallback__image--3xQQk\",\"top-right\":\"top-right--NFxAS\",\"topRight\":\"top-right--NFxAS\",\"wish-list-item\":\"wish-list-item--350rc\",\"wishListItem\":\"wish-list-item--350rc\",\"wish-list-item--removed\":\"wish-list-item--removed--3IZ8L\",\"wishListItemRemoved\":\"wish-list-item--removed--3IZ8L\"};","import React, { useState, useEffect } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { useUrlLocalizer, useTranslator } from 'tradera-lang/translate';\nimport { useInView } from 'react-intersection-observer';\nimport useIsMobile from 'tradera-hooks/use-is-mobile';\nimport ALink from 'tradera-components/alink/alink';\nimport ItemCard from 'tradera-components/item-card/item-card';\nimport { lazyLoadSettings } from 'tradera-components/item-card/config';\nimport { generateItemCardPlaceholders } from 'tradera-components/item-card/generate-item-card-placeholders';\nimport itemActions from 'tradera-state/items/actions';\nimport uiActions from 'tradera-state/ui/actions';\nimport { trackContainerClick } from '../analytics';\nimport { fetchWishList } from 'tradera-state/views/start-page/actions';\nimport HeartFilledIcon from '@tradera/blueprint/theme/icons2/heart-fill.svg?jsx';\nimport WishListEmpty from './wish-list-empty.svg?jsx';\nimport WishListInfoCard from './wish-list-info-card';\nimport { localStore } from 'utils/storage';\nimport { STORAGE_KEYS } from 'tradera-constants/storage';\nimport 'tradera-components/item-card/layout.scss';\nimport useIsLoggedIn from 'tradera-hooks/use-is-loggedin';\nimport { useIsFeatureEnabled } from 'tradera-hooks/use-is-feature-enabled';\nimport startPageStyles from '../start-page.module.scss';\nimport styles from './wish-list.module.scss';\n\nconst WishList = () => {\n const isLoggedIn = useIsLoggedIn();\n const isWishListEnabled = useIsFeatureEnabled('startpage-wish-list');\n\n return isLoggedIn && isWishListEnabled ? \n
\n \n {t('myt_wishlist_title')}\n
\n {showFallbackInfo ? (\n\n \n
\n \n ) : (\n <>\n \n {t('wishList_fallbackDescription')}\n
\n\n \n trackContainerClick(\n 'wishList',\n 'Wish-List button below'\n )\n }\n useLink={false} // Use 'inSPA' when mytradera-page can be rnavigated to without a hard reload\n >\n {`${t('wishList_showMore')} ->`}\n \n
\n )}\n \n {!isMobile && (\n \n
\n )}\n \n )}\n \n \n trackContainerClick(\n 'wishList',\n 'Wish-List button below'\n )\n }\n useLink={false} // Use 'inSPA' when mytradera-page can be rnavigated to without a hard reload\n >\n {`${t('wishList_showMore')} ->`}\n \n
\n \n Start page content missing!\n
\n );\n }\n return content.map((container, index) => {\n return (\n\n {[...tags].splice(0, limitTags).map(tag => (\n \n typeof onClickTag === 'function' && onClickTag(tag)\n }\n url={tag.url}\n />\n ))}\n
\n )\n );\n};\n\nImageTags.propTypes = {\n gaAction: PropTypes.string.isRequired,\n gaCategory: PropTypes.string.isRequired,\n onClickTag: PropTypes.func,\n tags: PropTypes.array.isRequired\n};\n\nexport default ImageTags;\n","import React, { useEffect } from 'react';\nimport { useSelector, useDispatch } from 'react-redux';\nimport { useTranslator } from 'tradera-lang/translate';\nimport ImageTags from '../tags/image-tags';\nimport { fetchTrendingBrandsIfNeeded } from 'tradera-state/views/start-page/actions';\n\nconst TrendingBrandsTags = () => {\n const { t } = useTranslator();\n const dispatch = useDispatch();\n\n const tags = useSelector(\n state => state.views.startPage.trendingBrands.items\n );\n\n useEffect(() => {\n dispatch(fetchTrendingBrandsIfNeeded());\n }, [dispatch]);\n\n if (!tags || tags.length === 0) {\n return null;\n }\n\n return (\n <>\n \n {t('trendingTags_brands')}\n
\n\n {showFallback\n ? t('trendingTags_brands')\n : t('personalised_suggestions_brands')}\n
\n\n {showFallback\n ? t('trendingTags_searches')\n : t('personalised_suggestions_searches')}\n
\n\n
\n );\n};\n\nPersonalisedTags.propTypes = {\n scroll: PropTypes.bool.isRequired\n};\n\nexport default PersonalisedTags;\n","import React, { useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport { fetchStartPageConfig } from 'tradera-state/views/start-page/actions';\nimport {\n selectStartPageStatus,\n selectStartPageHeader\n} from 'tradera-state/views/start-page/selectors';\nimport { usePageMeta, useScrollToTopOnMount } from 'tradera-hooks';\nimport useIsDesktop from 'tradera-hooks/use-is-desktop';\nimport useIsMobile from 'tradera-hooks/use-is-mobile';\nimport useIsLoggedIn from 'tradera-hooks/use-is-loggedin';\nimport { useIsFeatureEnabled } from 'tradera-hooks/use-is-feature-enabled';\nimport Ad from 'tradera-components/ads/ad';\nimport ApplicationErrorBoundary from 'tradera-components/application-error-boundary';\nimport Loader from 'tradera-components/loader/loader';\nimport StartPageHero from '../components/start-page/hero/start-page-hero';\nimport PageContent from '../components/start-page/page-content';\nimport '../components/start-page/ads/start-page-ad.scss';\nimport './start-page.scss';\n\nimport QuickView from 'tradera-components/quick-view/quick-view-modal';\nimport RecentSearchesTags from '../components/start-page/recent-searches/recent-searches-tags';\nimport TrendingSearchesTags from '../components/start-page/trending/trending-searches-tags';\nimport TrendingBrandsTags from '../components/start-page/trending/trending-brands-tags';\nimport PersonalisedTags from '../components/start-page/personalised/personalised-tags';\nimport { useIsPersonalisedBrandsTagsLoading } from '../components/start-page/personalised/personalised-brands-tags';\nimport {\n useIsPersonalisedSearchesTagsLoading,\n useShowPersonalisedSearchesFallback\n} from '../components/start-page/personalised/personalised-searches-tags';\n\nfunction StartPage({ pageType }) {\n const status = useSelector(selectStartPageStatus);\n const {\n isCampaignMode,\n displayRecentSearches,\n displayTrendingSearches\n } = useSelector(selectStartPageHeader);\n\n const dispatch = useDispatch();\n\n usePageMeta(pageType);\n useScrollToTopOnMount();\n\n const isDesktop = useIsDesktop();\n const isMobile = useIsMobile();\n const isLoggedIn = useIsLoggedIn();\n const isPersonalisedSuggestionsEnabled = useIsFeatureEnabled(\n 'personalised-suggestions'\n );\n\n useEffect(() => {\n if (status === 'NOT_FETCHED') {\n dispatch(fetchStartPageConfig());\n }\n }, [dispatch, status]);\n\n const isPersonalisedBrandsTagsLoading = useIsPersonalisedBrandsTagsLoading();\n const isPersonalisedSearchesTagsLoading = useIsPersonalisedSearchesTagsLoading();\n const showPersonalisedSearchesFallback = useShowPersonalisedSearchesFallback();\n\n if (status !== 'HAS_DATA') {\n return (\n \n
\n \n
\n \n
\n );\n }\n\n const showPersonalisedTags = isLoggedIn && isPersonalisedSuggestionsEnabled;\n\n const isLoadingPersonalisedTags =\n showPersonalisedTags &&\n (isPersonalisedBrandsTagsLoading || isPersonalisedSearchesTagsLoading);\n\n const moveTrendingSearchesToPersonalised =\n showPersonalisedTags && showPersonalisedSearchesFallback;\n\n const showTrendingBrands = !isLoggedIn || !isPersonalisedSuggestionsEnabled;\n\n const showTrendingSearchesInHeader =\n !isCampaignMode &&\n isDesktop &&\n !moveTrendingSearchesToPersonalised &&\n displayTrendingSearches;\n const showTrendingSearchesBelowHeader =\n !isCampaignMode &&\n !isDesktop &&\n !moveTrendingSearchesToPersonalised &&\n displayTrendingSearches;\n\n const showRecentSearchesInHeader =\n !isCampaignMode && !isMobile && displayRecentSearches;\n const showRecentSearchesBelowHeader =\n !isCampaignMode && isMobile && displayRecentSearches;\n\n return (\n \n \n {showRecentSearchesBelowHeader && (\n \n \n )}\n {showTrendingSearchesBelowHeader && (\n \n \n )}\n {showPersonalisedTags && (\n \n \n )}\n {showTrendingBrands && (\n \n \n )}\n
\n \n \n \n \n \n changeItemQuantity(\n row.itemId,\n parseInt(quantity)\n )\n }\n itemUrl={toLocalizedUrl(row.itemUrl)}\n isUnavailable={row.isUnavailable}\n />\n ))}\n\n \n goToSeller(\n order.merchantMemberId,\n order.cleanedAlias\n ),\n text: t('checkout_bin_keepShopping', {\n seller: order.merchantAlias\n }),\n className: 'btn-primary'\n }}\n rightButton={{\n action: () => onConfirm(order),\n text:\n !order.isCommitOnPayment ||\n order.isSellpyCheckout\n ? t('checkout_bin_title')\n : t('cart_offplatform_continue'),\n className: 'btn-success',\n disabled: isCheckoutDisabled(order)\n }}\n />\n\n {errors && errors[order.id] && (\n
\n );\n })}\n \n \n );\n};\n\nconst CartError = ({ error }) => {\n const { t } = useTranslator();\n\n const mapErrorCode = errorCode => {\n switch (errorCode) {\n case BID_VALIDATION_RESULTS.BIDDER_IS_BLOCKED:\n return 'checkout_item_bidderIsBlocked';\n default:\n return 'syi_publish_error_unknownerror';\n }\n };\n const errorMessage = mapErrorCode(error);\n\n return (\n \n {isFetching && \n \n <- {t('checkout_bin_button1')}\n \n \n <- {t('checkout_bin_button1')}\n \n
\n )}\n\n {!isFetching && merchantPreOrders.length === 0 && (\n \n {t('cartCheckoutOverview_cartEmpty')}\n
\n )}\n\n {merchantPreOrders.length > 0 && (\n \n
\n )}\n\n {merchantPreOrders.map(order => {\n const shippingOptions = order.shippingOptions.map(option =>\n mapShippingOption(option, t)\n );\n const totalPrice = order.orderRows.reduce(\n (sum, row) => sum + row.unitPrice * row.quantity,\n 0\n );\n const shippingPriceRange =\n order.isSellpyCheckout && order.shippingPriceRange\n ? {\n minPrice: order.shippingPriceRange.minPrice,\n maxPrice: Math.min(\n order.shippingPriceRange.maxPrice,\n 99\n )\n }\n : order.shippingPriceRange;\n return (\n \n
\n );\n};\n\nexport default CartPage;\n","import { useEffect } from 'react';\nimport { useDispatch } from 'react-redux';\nimport { useLocation } from 'react-router';\nimport pageActions from 'tradera-state/page/actions';\nimport { getCurrentPageFromRoute } from 'tradera-helpers/get-current-page-helper';\n\nexport const PageMeta = ({ routeMap }) => {\n const location = useLocation();\n const dispatch = useDispatch();\n\n useEffect(() => {\n const page = getCurrentPageFromRoute(routeMap, location);\n if (page) {\n const pageMetaData = {\n type: page.pageType\n };\n dispatch(pageActions.setPageMeta(pageMetaData));\n }\n }, [dispatch, location, routeMap]);\n\n return null;\n};\n","import React, { Suspense, lazy } from 'react';\nimport qs from 'qs';\nimport { Redirect } from 'react-router';\nimport { NotFoundError } from 'tradera-components/errors';\nimport Loader from 'tradera-components/loader';\nimport StartPage from './pages/start-page'; // Startpage is included for speed\nimport CartPage from './pages/cart-page';\nimport { RouteMapRoutes } from 'tradera-components/route-map-routes/route-map-routes';\nimport { PageMeta } from 'tradera-components/page-meta/page-meta';\nimport GtmService from 'static/script/app/ui/google-tagmanager-service';\nimport { traderaRoutes } from './routes';\n\n// Lacy load other pages\nconst BrandPage = lazy(() =>\n import(\n /* webpackChunkName: \"brand-page\" */ 'tradera-apps/tradera/pages/brand-page'\n )\n);\nconst BrandListPage = lazy(() =>\n import(\n /* webpackChunkName: \"brand-list-page\" */ 'tradera-apps/tradera/pages/brand-list-page'\n )\n);\nconst CampaignPage = lazy(() =>\n import(\n /* webpackChunkName: \"campaign-page\" */ 'tradera-apps/tradera/pages/campaign-page'\n )\n);\nconst CategoryListPage = lazy(() =>\n import(\n /* webpackChunkName: \"category-list-page\" */ 'tradera-apps/tradera/pages/category-list-page'\n )\n);\nconst CategoryPage = lazy(() =>\n import(\n /* webpackChunkName: \"category-page\" */ 'tradera-apps/tradera/pages/category-page'\n )\n);\nconst CheckoutPage = lazy(() =>\n import(\n /* webpackChunkName: \"checkout-page\" */ 'tradera-apps/tradera/pages/checkout-page'\n )\n);\nconst CheckoutConfirmationPage = lazy(() =>\n import(\n /* webpackChunkName: \"checkout-confirmation-page\" */ 'tradera-apps/tradera/pages/checkout-confirmation-page'\n )\n);\nconst FavouriteSellersPage = lazy(() =>\n import(\n /* webpackChunkName: \"favourite-sellers\" */ 'tradera-apps/tradera/pages/favourite-sellers-page'\n )\n);\nconst Landing_GantXTradera = lazy(() =>\n import(\n /* webpackChunkName: \"landing_gantxtradera\" */ 'tradera-apps/tradera/pages/landing/gant-x-tradera'\n )\n);\nconst Landing_StadiumXTradera = lazy(() =>\n import(\n /* webpackChunkName: \"landing-stadiumxtradera\" */ 'tradera-apps/tradera/pages/landing/stadium-x-tradera'\n )\n);\nconst ProfilePage = lazy(() =>\n import(\n /* webpackChunkName: \"profile-page\" */ 'tradera-apps/tradera/pages/profile-page'\n )\n);\nconst ShippingInfoPage = lazy(() =>\n import(\n /* webpackChunkName: \"shippingcalculator\" */ 'tradera-apps/tradera/pages/shipping-info-page'\n )\n);\nconst CombinedShippingInfoPage = lazy(() =>\n import(\n /* webpackChunkName: \"combined-shipping\" */ 'tradera-apps/tradera/pages/combined-shipping-info'\n )\n);\nconst RecommendationsPage = lazy(() =>\n import(\n /* webpackChunkName: \"profile-page\" */ 'tradera-apps/tradera/pages/recommendations-page'\n )\n);\nconst ReportItemPage = lazy(() =>\n import(\n /* webpackChunkName: \"report-item-page\" */ 'tradera-apps/tradera/pages/report-item-page'\n )\n);\nconst SearchPage = lazy(() =>\n import(\n /* webpackChunkName: \"search-page\" */ 'tradera-apps/tradera/pages/search-page'\n )\n);\nconst SwishApp2AppCallbackPage = lazy(() =>\n import(\n /* webpackChunkName: \"swish-app2app-callback-page\" */ 'tradera-apps/tradera/pages/swish-app2app-callback-page'\n )\n);\nconst TraderaShopPage = lazy(() =>\n import(\n /* webpackChunkName: \"tradera-shop\" */ 'tradera-apps/tradera/pages/tradera-shop-page'\n )\n);\nconst VerifyPage = lazy(() =>\n import(\n /* webpackChunkName: \"verify-page\" */ 'tradera-apps/tradera/pages/verify-page'\n )\n);\nconst ViewItemPage = lazy(() =>\n import(\n /* webpackChunkName: \"view-item-page\" */ 'tradera-apps/tradera/pages/view-item-page'\n )\n);\n\nconst UPI = lazy(() =>\n import(/* webpackChunkName: \"upi\" */ 'tradera-apps/tradera/pages/upi')\n);\n\nconst INR = lazy(() =>\n import(/* webpackChunkName: \"inr\" */ 'tradera-apps/tradera/pages/inr')\n);\n\nconst Cause = lazy(() =>\n import(/* webpackChunkName: \"cause\" */ 'tradera-apps/tradera/pages/cause')\n);\n\nconst CausesLandingPage = lazy(() =>\n import(\n /* webpackChunkName: \"causes-landing-page\" */ 'tradera-apps/tradera/pages/causes-landing-page'\n )\n);\n\nconst CausesInfo = lazy(() =>\n import(\n /* webpackChunkName: \"causes-info\" */ 'tradera-apps/tradera/pages/causes-info'\n )\n);\n\nconst Messaging = lazy(() =>\n import(\n /* webpackChunkName: \"causes-info\" */ 'tradera-apps/tradera/pages/messaging'\n )\n);\n\nconst ValuationPage = lazy(() =>\n import(\n /* webpackChunkName: \"valuation-page\" */ 'tradera-apps/tradera/pages/valuation-page'\n )\n);\n\nconst PrintPage = lazy(() =>\n import(\n /* webpackChunkName: \"print-page\" */ 'tradera-apps/tradera/pages/print-page'\n )\n);\n\nexport const routeMap = [\n {\n ...traderaRoutes.startPage,\n onLoaded: () => {\n GtmService.trackGtmEvent('viewHomePage');\n },\n render: props => \n
\n {t(errorMessage)}
\n\n
{t('error_oops')}
\n{t('error_cantLoadItems')}
\n{t('error_tryAgainLater')}
\n\n
\n {suggestions.map((entry, index) => {\n const componentProps = {\n changeSearchTerm: onChangeSearchTerm,\n inSPA: inSPA,\n isSelected: index === selectedIndex,\n item: entry.item,\n key: entry.key,\n searchTerm: searchTerm,\n selectedCategoryId: selectedCategoryId,\n text: entry.text\n };\n switch (entry.type) {\n case 'previous':\n return (\n
\n \n);\n\nSearchSuggestion.propTypes = {\n allSuggestions: PropTypes.array,\n isSearchInputFocused: PropTypes.bool,\n onChangeSearchTerm: PropTypes.func,\n onPreviousSearchRemoved: PropTypes.func,\n previousSearches: PropTypes.array,\n searchTerm: PropTypes.string,\n selectedCategoryId: PropTypes.number,\n selectedIndex: PropTypes.number,\n setSearchSuggestionsElement: PropTypes.func\n};\n\nexport default SearchSuggestion;\n","import React from 'react';\nimport { connect } from 'react-redux';\nimport CloseIcon from '@tradera/blueprint/theme/icons2/close.svg?jsx';\nimport LocationIcon from '@tradera/blueprint/theme/icons2/location.svg?jsx';\nimport { useUrlLocalizer } from 'tradera-lang/translate';\nimport { selectShowLocalizationRegionPicker } from 'tradera-state/shipping-region/selectors';\nimport { selectGeolocation } from 'tradera-state/member/selectors';\nimport { dismissLocalizationRegionPicker } from 'tradera-state/shipping-region/reducer';\nimport { onLocalizationShippingRegionSelected } from 'tradera-state/shipping-region/actions';\nimport ApplicationErrorBoundary from 'tradera-components/application-error-boundary/application-error-boundary';\nimport Flag from 'tradera-components/flag/flag';\nimport { isPrerender } from 'tradera-utils/is-prerender';\nimport { useUserAgent } from 'tradera-hooks/use-user-agent';\n\nconst LocalizationRegionPicker = ({\n showLocalizationRegionPicker,\n dismissLocalizationRegionPicker,\n onLocalizationShippingRegionSelected,\n geolocation\n}) => {\n const { toLocalizedUrl } = useUrlLocalizer();\n const userAgent = useUserAgent();\n const onClick = () => {\n onLocalizationShippingRegionSelected({\n countryCodeIso2: geolocation.isoCode,\n currencyCode: geolocation.currency,\n toLocalizedUrl\n });\n dismissLocalizationRegionPicker();\n };\n const isCrawler = isPrerender(userAgent);\n\n return showLocalizationRegionPicker && !isCrawler ? (\n \n
\n \n \n
\n \n
\n \n \n Would you like to set your browsing destination\n to
\n
\n
\n
\n ));\n\n return (\n \n {title}\n \n {showAds ? (\n
\n );\n}\n\nRecommendations.propTypes = {\n className: PropTypes.string,\n collapseIfEmpty: PropTypes.bool,\n createRequestUrl: PropTypes.func.isRequired,\n enableQuickView: PropTypes.bool,\n errorFallback: PropTypes.node,\n infiniteScrollEnabled: PropTypes.bool,\n loader: PropTypes.node.isRequired,\n noMoreItemsMarker: PropTypes.node,\n onError: PropTypes.func,\n onReachedEnd: PropTypes.func,\n openQuickView: PropTypes.func,\n title: PropTypes.element,\n showAds: PropTypes.bool\n};\n\nRecommendations.defaultProps = {\n className: '',\n collapseIfEmpty: true,\n enableQuickView: false,\n infiniteScrollEnabled: false,\n showAds: false\n};\n\nconst mapStateToProps = state => ({\n items: state.items.cache,\n isLoggedIn: state.member.isLoggedIn,\n enableQuickView: state.environment.featureSwitches['quick-view']\n});\n\nconst mapDispatchToProps = dispatch => ({\n addItems: items => dispatch(itemActions.add(items)),\n openQuickView: (itemId, itemIds, openedFrom) =>\n dispatch(uiActions.openQuickView({ itemIds, itemId, openedFrom })),\n setAds: ads => dispatch(adsActions.setAds(ads)),\n toggleWishlist: itemId => dispatch(itemActions.wishlist(itemId))\n});\n\nexport { Recommendations, LOADING_STATES };\nexport default connect(mapStateToProps, mapDispatchToProps)(Recommendations);\n","import Recommendations from './recommendations';\n\nexport default Recommendations;\nexport {\n similarItemsRequestBuilder,\n similarItemsFromShopRequestBuilder,\n similarItemsFromCampaignRequestBuilder\n} from './recommendations-requests';\n","// extracted by mini-css-extract-plugin\nexport default {\"shipping-country-select-row\":\"shipping-country-select-row--p9bCi\",\"shippingCountrySelectRow\":\"shipping-country-select-row--p9bCi\"};","import React, { useState } from 'react';\nimport { FixedSizeList } from 'react-window';\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport CloseIcon from '@tradera/blueprint/theme/icons2/close.svg?jsx';\nimport ArrowDownIcon from '@tradera/blueprint/theme/icons2/arrow-down.svg?jsx';\nimport { useTranslator } from 'tradera-lang/translate';\nimport { mapCountryCodeToCountryKey } from 'tradera-utils/countries';\nimport Flag from 'tradera-components/flag/flag';\nimport styles from './shipping-country-select-dropdown.module.scss';\n\nexport const ShippingCountrySelectDropdown = ({\n shippingCountries,\n selectedShippingCountry,\n onSelect\n}) => {\n const { t } = useTranslator();\n const [searchFocus, setSearchFocus] = useState(false);\n const [search, setSearch] = useState('');\n const [isSearchEnabled, setIsSearchEnabled] = useState(false);\n const includesSearch = v => v.toLowerCase().includes(search.toLowerCase());\n const filteredShippingCountries = shippingCountries\n .map(countryCodeIso2 => ({\n countryCodeIso2,\n name: t(mapCountryCodeToCountryKey(countryCodeIso2))\n }))\n .filter(\n ({ name, countryCodeIso2 }) =>\n includesSearch(name) || includesSearch(countryCodeIso2)\n );\n\n const listStyle = {\n height:\n filteredShippingCountries.length < 6\n ? `${(filteredShippingCountries.length || 1) * 35}px`\n : '165px'\n };\n\n const Row = ({ index, style }) => (\n \n
\n )}\n \n )}\n \n {t('siteHeader_shippingCountryNoResults')}\n
\n \n \n {t('siteHeader_shippingCountry')}\n \n
\n );\n};\n\nPlainShippingCountrySelect.propTypes = {\n shippingCountries: PropTypes.arrayOf(PropTypes.string),\n shippingCountry: PropTypes.object,\n updateShippingRegion: PropTypes.func,\n getAvailableShippingCountries: PropTypes.func.isRequired,\n showShippingCountries: PropTypes.bool,\n isLoadingAvailableShippingCountries: PropTypes.bool,\n onShippingCountrySelected: PropTypes.func.isRequired\n};\n\nconst mapStateToProps = state => ({\n shippingCountry: selectShippingCountry(state),\n shippingCountries: selectAvailableShippingCountries(state),\n isLoadingAvailableShippingCountries: selectIsLoadingAvailableShippingCountries(\n state\n ),\n showShippingCountries:\n selectHasLoadedAvailableShippingCountries(state) &&\n !selectIsLoadingAvailableShippingCountries(state)\n});\n\nconst mapDispatchToProps = {\n updateShippingRegion,\n getAvailableShippingCountries\n};\n\nexport const ShippingCountrySelect = connect(\n mapStateToProps,\n mapDispatchToProps\n)(PlainShippingCountrySelect);\n","import React from 'react';\nimport { LanguageSelect } from './language-select';\nimport { ShippingCountrySelect } from './shipping-country-select';\nimport { useTranslator } from 'tradera-lang/translate';\n\nexport const LocalizationMenu = ({ onBlur, showRegionSelection }) => {\n const { t } = useTranslator();\n return (\n \n {isLoadingAvailableShippingCountries && (\n {\n onShippingCountrySelected(countryCodeIso2);\n updateShippingRegion(countryCodeIso2);\n }}\n />\n )}\n
\n \n
\n )}\n {showShippingCountries && (\n \n {showRegionSelection && (\n <>\n
\n );\n};\n","import { useEffect } from 'react';\nimport { useDispatch } from 'react-redux';\n\nimport { useTranslator } from 'tradera-lang/translate';\nimport PAGE_TYPES from 'tradera-constants/page-types';\nimport pageActions from 'tradera-state/page/actions';\n\n/**\n * Set page metadata, either with a pagemeta id or a page metadata object\n *\n * @param {string} [type]\n * @param {object} [customPageMetaData]\n */\nconst usePageMeta = (\n type = PAGE_TYPES.DEFAULT,\n customPageMetaData,\n setMetaTitle = true,\n metaRobots = null\n) => {\n const { t } = useTranslator();\n const dispatch = useDispatch();\n useEffect(() => {\n const pageMetaData = {\n metaRobots: metaRobots,\n metaTitle: setMetaTitle ? t(`pageMeta_title_${type}`) : '',\n type,\n ...(customPageMetaData || { canonicalLink: location.pathname })\n };\n dispatch(pageActions.setPageMeta(pageMetaData));\n }, [customPageMetaData, dispatch, setMetaTitle, t, type, metaRobots]);\n};\n\nexport { usePageMeta, PAGE_TYPES };\n","import React from 'react';\n\nimport { formatNumberWithSeparators } from 'tradera-utils/format';\n\nconst DiscountedPriceLabel = ({ className, price, tagName: TagName }) => {\n return (\n \n
\n \n
\n \n {children}\n
\n )}\n \n \n
\n \n );\n};\n\nItemCard.defaultProps = {\n animatePriceLabel: false,\n className: '',\n gaCategory: null,\n imageMode: ITEM_CARD_IMAGE_MODES.SQUARE,\n onQuickView: null,\n showBidStatus: false,\n showShippingOrOnDisplay: true,\n showSellerAlias: false\n};\n\nItemCard.propTypes = {\n animatePriceLabel: PropTypes.bool,\n className: PropTypes.string,\n gaCategory: PropTypes.string,\n imageMode: PropTypes.oneOf(Object.values(ITEM_CARD_IMAGE_MODES)),\n item: PropTypes.shape({\n attributes: PropTypes.array,\n buyNowPrice: PropTypes.number,\n discountRate: PropTypes.number,\n displayHighlighted: PropTypes.bool,\n endDate: PropTypes.string,\n hasFreeShipping: PropTypes.bool,\n imageHeight: PropTypes.number,\n imageUrl: PropTypes.string,\n imageSecondaryUrl: PropTypes.string,\n imageWidth: PropTypes.number,\n isActive: PropTypes.bool,\n itemId: PropTypes.number,\n itemType: PropTypes.string,\n itemUrl: PropTypes.string,\n onDisplay: PropTypes.bool,\n price: PropTypes.number,\n priceBeforeDiscount: PropTypes.number,\n reservePriceReached: PropTypes.bool,\n sellerAlias: PropTypes.string,\n sellerDsrAverage: PropTypes.number,\n sellerMemberId: PropTypes.number,\n shippingOptions: PropTypes.array,\n shortDescription: PropTypes.string,\n startDate: PropTypes.string,\n totalBids: PropTypes.number,\n\n /* Currently only used in Wish list */\n isOverbidden: PropTypes.bool,\n isLeading: PropTypes.bool,\n isWinner: PropTypes.bool\n }),\n lazy: PropTypes.shape({\n offset: PropTypes.number,\n once: PropTypes.bool,\n height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n placeholder: PropTypes.node,\n imagePlaceholder: PropTypes.node\n }),\n onAddToWishlist: PropTypes.func,\n onRemoveFromWishlist: PropTypes.func,\n onQuickView: PropTypes.func,\n onSettings: PropTypes.func,\n ready: PropTypes.bool,\n showBidStatus: PropTypes.bool,\n showShippingOrOnDisplay: PropTypes.bool,\n isShopOwnedByCurrentMember: PropTypes.bool\n};\n\nexport default ItemCard;\n","// extracted by mini-css-extract-plugin\nexport default {\"with-arrow-top\":\"with-arrow-top--3SozC\",\"withArrowTop\":\"with-arrow-top--3SozC\"};","export const HEADER = 'header';\nexport const LAST_CHANCE = 'lastChance';\nexport const PICKS_FOR_YOU = 'picksForYou';\nexport const POPULAR_CATEGORIES = 'popularCategories';\nexport const CAROUSEL = 'carousel';\nexport const RECENTLY_VIEWED = 'recentlyViewed';\nexport const INSTAGRAM_FEED = 'instagramPosts';\nexport const WISH_LIST = 'wishList';\nexport const FAVOURITE_SELLERS = 'favouriteSellers';\n","import { useCallback, useEffect } from 'react';\n\nconst intervals = {};\n\n/**\n * Set up an periodical call to a component callback.\n * Intervals with the same period time are reused.\n * The interval can be cancelled with the returned function. It also cancels itself when no component uses it.\n *\n * @param {function} callback\n * @param {int} period - Milliseconds\n * @returns {function}\n */\nexport function useTicker(callback, period) {\n // Remove callback from interval and cancel interval if no callbacks remain\n const cleanup = useCallback(() => {\n if (intervals[period]) {\n // eslint-disable-next-line better-mutation/no-mutation\n intervals[period].callbacks = intervals[period].callbacks.filter(\n cb => cb !== callback\n );\n if (intervals[period].callbacks.length === 0) {\n clearInterval(intervals[period].intervalId);\n // eslint-disable-next-line better-mutation/no-mutation\n intervals[period] = undefined;\n }\n }\n }, [callback, period]);\n\n useEffect(() => {\n if (period <= 0) {\n return;\n }\n // Reuse existing interval\n if (intervals[period]) {\n intervals[period].callbacks.push(callback);\n // Add callback to new interval and save interval id for cancellation\n } else {\n const intervalId = setInterval(() => {\n intervals[period].callbacks.forEach(cb => cb());\n }, period);\n // eslint-disable-next-line better-mutation/no-mutation\n intervals[period] = { callbacks: [callback], intervalId };\n }\n\n // Return cancellation callback\n return cleanup;\n }, [callback, cleanup, period]);\n\n return cleanup;\n}\n","import { useCallback, useState, useEffect, useMemo, useRef } from 'react';\nimport { useSelector } from 'react-redux';\nimport { useTicker } from 'tradera-hooks/use-ticker';\nimport { syncServerTime } from 'tradera-utils/server-date';\nimport { useTranslator } from 'tradera-lang/translate';\nimport { selectPreferredLanguageCode } from 'tradera-state/language/selectors';\nimport { useDayJs } from 'tradera-hooks/use-day-js';\n\nconst COUNTDOWN_TICK_INTERVAL = 1000;\nconst COUNTDOWN_DEFAULT_WARNING_LIMIT = 12 * 60 * 60;\n\n/**\n *\n * @return {{timeLeftText: string, isCountdownEnabled: boolean, isCountdownDone: boolean, isTimeLeftBelowWarningLimit: boolean}}\n * isCountdownEnabled - True if client time is synched with server time.\n * isCountdownDone - True if there is no time left after counting down.\n * timeLeftText - The time left, formatted by the given formatter function.\n * isTimeLeftBelowWarningLimit - True if time is below the given warningLimit.\n */\nexport const useCountdown = (\n endDateStr,\n formatTimeLeft,\n warningLimit = COUNTDOWN_DEFAULT_WARNING_LIMIT\n) => {\n const { t } = useTranslator();\n const [isCountdownDone, setIsCountdownDone] = useState(false);\n const [timeLeftText, setTimeLeftText] = useState('');\n const [isCountdownEnabled, setIsCountdownEnabled] = useState(false);\n const [\n isTimeLeftBelowWarningLimit,\n setIsTimeLeftBelowWarningLimit\n ] = useState(false);\n const previousAdjustment = useRef(0);\n const endDate = useMemo(() => new Date(endDateStr), [endDateStr]);\n const preferredLanguageCode = useSelector(selectPreferredLanguageCode);\n const dayjs = useDayJs();\n\n const updateTimeLeft = useCallback(\n async (isInitialCall = false) => {\n const serverDate = await syncServerTime(preferredLanguageCode);\n if (!serverDate) {\n // In case server date is lost we need to\n // ensure everything looks OK.\n setIsCountdownEnabled(false);\n setIsCountdownDone(false);\n setTimeLeftText('');\n setIsTimeLeftBelowWarningLimit(false);\n return;\n }\n setIsCountdownEnabled(true);\n\n const secondsLeftWithFractions = (endDate - serverDate) / 1000;\n let adjustedSecondsLeftWithFractions =\n secondsLeftWithFractions - previousAdjustment.current;\n let secondsLeft = Math.round(adjustedSecondsLeftWithFractions);\n\n // The amount we adjusted the time at this tick.\n // We use this at the next tick to make adjustedSecondsLeftWithFractions\n // as close to whole seconds as possible.\n // In other words adjustedSecondsLeftWithFractions - secondsLeft should be as close to zero\n // as possible.\n let adjustment = secondsLeftWithFractions - secondsLeft;\n\n // Don't let the adjustment to drift over a second up or down.\n if (adjustment >= 1 || adjustment <= -1) {\n // Reset the adjustment\n secondsLeft = Math.round(secondsLeftWithFractions);\n adjustment = secondsLeftWithFractions - secondsLeft;\n }\n\n // The first time here we are not in a tick so\n // ignore adjustment.\n if (!isInitialCall) {\n // eslint-disable-next-line better-mutation/no-mutation\n previousAdjustment.current = adjustment;\n }\n\n const formattedTimeLeft =\n secondsLeft > 0\n ? formatTimeLeft(secondsLeft, t, endDate, serverDate, dayjs)\n : t('vip_ended');\n\n setTimeLeftText(formattedTimeLeft);\n setIsTimeLeftBelowWarningLimit(secondsLeft <= warningLimit);\n\n if (secondsLeft <= 0) {\n setIsCountdownDone(true);\n }\n },\n [endDate, formatTimeLeft, t, warningLimit, preferredLanguageCode, dayjs]\n );\n\n useEffect(() => {\n updateTimeLeft(true);\n }, [updateTimeLeft]);\n\n useTicker(updateTimeLeft, isCountdownDone ? 0 : COUNTDOWN_TICK_INTERVAL);\n\n return {\n timeLeftText,\n isCountdownDone,\n isCountdownEnabled,\n isTimeLeftBelowWarningLimit\n };\n};\n","export function filterCategories(categories, filter) {\n if (categories && filter.length > 0) {\n return categories\n .slice()\n .map(category => {\n const categoryNodes =\n category.categoryNodes\n ?.slice()\n .filter(node =>\n node.title\n .toLowerCase()\n .includes(filter.toLowerCase())\n ) || [];\n return {\n ...category,\n categoryNodes\n };\n })\n .filter(category => category.categoryNodes.length > 0);\n }\n return categories;\n}\n","import React from 'react';\nimport { useMediaQuery } from 'react-responsive';\nimport { BREAKPOINT_SIZES } from 'tradera-constants/breakpoints';\n\nconst useIsDesktop = () =>\n useMediaQuery({\n minWidth: BREAKPOINT_SIZES.LG.min,\n maxWidth: BREAKPOINT_SIZES.XL.max\n });\n\nexport const withIsDesktop = WrappedComponent => {\n const WithIsDesktop = props => {\n const isDesktop = useIsDesktop();\n return \n {showSellerAlias && (\n
\n \n {showShippingOrOnDisplay && isSwedishVisitor && (\n
\n \n \n {ready && (\n <>\n {handleWishlist && (\n
\n \n
\n {hasDiscount && (\n
\n \n
\n\n \n {hasDiscount && (\n \n
\n
\n \n \n {item.shortDescription}\n \n
\n \n \n
\n
\n {!!item.attributes?.length && onAttributeButtonClick && (\n \n \n {item.shortDescription}\n \n
\n \n
\n\n \n onQuickView(item.itemId)}\n />\n )}\n {isShopOwnedByCurrentMember && (\n onSettings(item.itemId)}\n />\n )}\n
\n \n {isShopItem ? (\n
{children}
\n);\n\nModalFooter.propTypes = {\n children: PropType.node.isRequired,\n className: PropType.string\n};\n\nexport default ModalFooter;\n","// extracted by mini-css-extract-plugin\nexport default {\"language-select\":\"language-select--2fNZ6\",\"languageSelect\":\"language-select--2fNZ6\",\"language-select-row\":\"language-select-row--14WN1\",\"languageSelectRow\":\"language-select-row--14WN1\"};","// extracted by mini-css-extract-plugin\nexport default {\"translation-preference-form-toggle-input\":\"translation-preference-form-toggle-input--27odm\",\"translationPreferenceFormToggleInput\":\"translation-preference-form-toggle-input--27odm\"};","import React from 'react';\nimport { touchWebClient } from 'tradera-utils/http';\nimport { useDispatch, useSelector } from 'react-redux';\nimport { selectAutomaticTranslationPreference } from 'tradera-state/language/selectors';\nimport styles from './translation-preference-menu-item.module.scss';\nimport { setAutomaticTranslationPreference } from 'tradera-state/language/reducer';\nimport { useTranslator } from 'tradera-lang/translate';\nimport { selectIsLoggedIn } from 'tradera-state/member';\n\nexport const TranslationPreferenceMenuItem = () => {\n const { t } = useTranslator();\n const dispatch = useDispatch();\n const automaticTranslationPreference = useSelector(\n selectAutomaticTranslationPreference\n );\n const isLoggedIn = useSelector(selectIsLoggedIn);\n\n const onAutomaticTranslationPreferenceChanged = async e => {\n const checked = e.target.checked;\n await touchWebClient.post(\n 'my/profile/save-automatic-translation-preference-setting',\n { isAutomaticTranslationPreferenceEnabled: checked }\n );\n\n dispatch(\n setAutomaticTranslationPreference({\n automaticTranslationPreference: checked\n })\n );\n };\n return isLoggedIn ? (\n \n \n {t('profileMenu_translationPreferenceHeading')}\n
\n ) : null;\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { connect } from 'react-redux';\nimport {\n selectAvailableLanguages,\n selectPreferredLanguage\n} from 'tradera-state/language/selectors';\nimport { setPreferredLanguage } from 'tradera-state/language/actions';\nimport { useTranslator, useUrlLocalizer } from 'tradera-lang/translate';\nimport { SURVEYS } from 'tradera-constants/surveys';\nimport Flag from 'tradera-components/flag/flag';\nimport { getCountryCodeFromLanguage } from 'tradera-utils/languagecode';\nimport { useQualtive } from 'tradera-hooks/use-qualtive';\nimport CheckIcon from '@tradera/blueprint/theme/icons2/check.svg?jsx';\nimport styles from './language-select.module.scss';\nimport { TranslationPreferenceMenuItem } from './translation-preference-menu-item';\n\nexport const PlainLanguageSelect = ({\n languages,\n preferredLanguage,\n setPreferredLanguage,\n onLanguageSelected,\n inProfileMenu,\n title\n}) => {\n const { t } = useTranslator();\n const { toLocalizedUrl } = useUrlLocalizer();\n const { isQualtiveEnabled, openQualtiveModal } = useQualtive();\n\n const onLanguageChanged = (code, e) => {\n if (preferredLanguage.languageCodeIso2 === code) {\n return;\n }\n setPreferredLanguage(code, toLocalizedUrl);\n if (onLanguageSelected) {\n onLanguageSelected(code, e);\n }\n };\n return (\n \n {t('profileMenu_translationPreferenceText')}\n
\n \n {title && (\n {\n onLanguageChanged(languageCodeIso2, e);\n }}\n data-language-select={languageCodeIso2}>\n \n
\n );\n};\n\nPlainLanguageSelect.propTypes = {\n languages: PropTypes.arrayOf(\n PropTypes.shape({\n languageCodeIso2: PropTypes.string,\n displayName: PropTypes.string\n })\n ),\n preferredLanguage: PropTypes.object,\n onLanguageSelected: PropTypes.func,\n setPreferredLanguage: PropTypes.func.isRequired,\n inProfileMenu: PropTypes.bool\n};\n\nconst mapStateToProps = state => ({\n languages: selectAvailableLanguages(state),\n preferredLanguage: selectPreferredLanguage(state)\n});\n\nconst mapDispatchToProps = {\n setPreferredLanguage\n};\n\nexport const LanguageSelect = connect(\n mapStateToProps,\n mapDispatchToProps\n)(PlainLanguageSelect);\n","/**\n * Run callback when document DOM content is ready\n *\n * @param {function} callback\n */\nfunction onDOMContentLoaded(callback) {\n if (document.readyState !== 'loading') {\n callback();\n } else {\n document.addEventListener('DOMContentLoaded', callback);\n }\n}\n\n/**\n * Run callback when all window content has loaded\n *\n * @param {function} callback\n */\nfunction onWindowLoad(callback) {\n if (document.readyState === 'complete') {\n callback();\n } else {\n window.addEventListener('load', callback);\n }\n}\n\nexport {\n // Export onDOMContentLoaded as default to cover old uses of onReady\n onDOMContentLoaded as default,\n onDOMContentLoaded,\n onWindowLoad\n};\n","import React, { useEffect, useRef, useState } from 'react';\nimport { useDispatch, useSelector } from 'react-redux';\nimport DialogModal from 'tradera-components/dialog/dialog-modal';\nimport ModalContainer from 'static/script/components/modals/modal-container';\nimport ModalHeader from 'static/script/components/modals/modal-header';\nimport ModalBody from 'static/script/components/modals/modal-body';\nimport { useTranslator } from 'tradera-lang/translate';\nimport { webApiClient } from 'tradera-utils/http';\nimport { setIsInternationalWacko } from 'tradera-state/views/view-item/reducer';\nimport { LocalLoader } from 'tradera-components/loader';\nimport { selectPreferredLanguage } from 'tradera-state/language/selectors';\nimport { useQualtive } from 'tradera-hooks/use-qualtive';\nimport { SURVEYS } from 'tradera-constants/surveys';\nimport GtmService from 'static/script/app/ui/google-tagmanager-service';\n\nconst states = {\n START: 'START',\n LOADING: 'LOADING',\n CARD_VERIFICATION_MODAL: 'CARD_VERIFICATION_MODAL',\n ERROR: 'ERROR',\n NOT_VERIFIED: 'NOT_VERIFIED'\n};\n\nexport const CardVerificationModal = ({ closeModal, onCardVerified }) => {\n const preferredLanguage = useSelector(selectPreferredLanguage);\n const memberEmail = useSelector(state => state.initData.memberEmail);\n const [state, setState] = useState(states.START);\n const [isHidden, setIsHidden] = useState(false);\n const { t } = useTranslator();\n const submitButtonRef = useRef();\n const dispatch = useDispatch();\n const { openQualtiveModal } = useQualtive();\n\n const onClose = () => {\n closeModal();\n GtmService.trackAction('VIP', 'Card Verification', 'Close modal');\n openQualtiveModal(SURVEYS.cardVerification, t);\n };\n\n useEffect(() => {\n if (state !== states.START) {\n return;\n }\n\n GtmService.trackAction('VIP', 'Card Verification', 'Start');\n\n const onSuccess = nonce => {\n setState(states.LOADING);\n webApiClient\n .post('/shopping/payment/verifybraintreecardnonce', { nonce })\n .then(({ data }) => {\n if (data.isVerified) {\n onCardVerified();\n GtmService.trackAction(\n 'VIP',\n 'Card Verification',\n 'Verified'\n );\n dispatch(setIsInternationalWacko(false));\n return;\n }\n GtmService.trackAction(\n 'VIP',\n 'Card Verification',\n 'NotVerified'\n );\n setIsHidden(false);\n setState(states.NOT_VERIFIED);\n return;\n })\n .catch(() => {\n GtmService.trackAction(\n 'VIP',\n 'Card Verification',\n 'Server error'\n );\n setState(states.ERROR);\n });\n };\n\n webApiClient\n .get('/shopping/payment/braintreeclienttokenforverification')\n .then(async ({ data }) => {\n setState(states.CARD_VERIFICATION_MODAL);\n const options = {\n authorization: data.clientToken,\n container: '#dropin-container',\n locale: preferredLanguage.languageCodeIso2,\n threeDSecure: true\n };\n const dropin = await import(\n /* webpackChunkName: \"braintree-web-drop-in\" */ 'braintree-web-drop-in'\n );\n dropin.create(options, (createErrors, instance) => {\n submitButtonRef.current.addEventListener('click', () => {\n setIsHidden(true);\n try {\n instance.requestPaymentMethod(\n {\n threeDSecure: {\n amount: '1',\n email: memberEmail\n }\n },\n (requestPaymentMethodErr, payload) => {\n if (requestPaymentMethodErr) {\n setIsHidden(false);\n setState(states.NOT_VERIFIED);\n const error =\n requestPaymentMethodErr._braintreeWebError ||\n {};\n\n GtmService.trackAction(\n 'VIP',\n 'Card Verification',\n `${error.type}:${error.code}`\n );\n\n return;\n }\n\n if (!payload || !payload.nonce) {\n setIsHidden(false);\n setState(states.NOT_VERIFIED);\n\n if (payload) {\n const threeDSecureValidationFailed =\n payload.liabilityShiftPossible &&\n !payload.liabilityShifted;\n\n GtmService.trackAction(\n 'VIP',\n 'Card Verification',\n threeDSecureValidationFailed\n ? 'ThreeDSecure failed'\n : 'Card invalid'\n );\n }\n return;\n }\n\n onSuccess(payload.nonce);\n }\n );\n } catch (e) {\n setIsHidden(false);\n setState(states.NOT_VERIFIED);\n GtmService.trackAction(\n 'VIP',\n 'Card Verification',\n 'requestPaymentMethod failed'\n );\n throw e;\n }\n });\n });\n return;\n })\n .catch(() => setState(states.ERROR));\n setState(states.LOADING);\n }, [onCardVerified, dispatch, state, preferredLanguage, memberEmail]);\n\n const restart = () => {\n GtmService.trackAction('VIP', 'Card Verification', 'Restart');\n setState(states.START);\n };\n\n return (\n \n {title}\n
\n )}\n {languages.map(({ languageCodeIso2, displayName }) => (\n \n {t('siteHeader_languageDisclaimerShort')} \n openQualtiveModal(SURVEYS.language)}>\n {t('siteHeader_languageLeaveFeedBack')}\n \n
\n )}\n \n {t('internationalwacko_cardverificationmodal_header')}\n
\n \n \n {t(\n 'internationalwacko_cardverificationmodal_verifyCard'\n )}\n \n
\n )}\n {state === states.ERROR && (\n \n \n {t(\n 'internationalwacko_cardverificationmodal_welcome'\n )}\n {' '}\n {t(\n 'internationalwacko_cardverificationmodal_info'\n )}\n
\n\n \n\n\n {t(\n 'internationalwacko_cardverificationmodal_disclaimer'\n )}\n
\n\n\n {t(\n 'internationalwacko_cardverificationmodal_unavailable'\n )}\n
\n )}\n {state === states.NOT_VERIFIED && (\n\n \n {t(\n 'internationalwacko_cardverificationmodal_tryAgain'\n )}\n \n
\n )}\n \n {t(\n 'internationalwacko_cardverificationmodal_failedVerification'\n )}\n
\n\n {t(\n 'internationalwacko_cardverificationmodal_failedVerification_info'\n )}\n
\n\n
\n );\n};\n\nexport const SellingLinks = () => {\n const { t } = useTranslator();\n const { toLocalizedUrl } = useUrlLocalizer();\n const isPennybridgeCharitiesEnabled = useIsFeatureEnabled(\n 'pennybridge-charities'\n );\n const availableLanguageCodesIso2 = useSelector(\n selectAvailableLanguageCodesIso2\n );\n\n const links = [\n {\n href: toLocalizedUrl('/how-to-sell'),\n 'data-ga-category': 'Footer',\n 'data-ga-action': 'Navigation',\n 'data-ga-label': 'Så säljer du som privatperson',\n text: t('footer_howToSellPrivate'),\n includedLanguages: availableLanguageCodesIso2\n },\n {\n href: 'https://info.tradera.com/foretag/',\n 'data-ga-category': 'Footer',\n 'data-ga-action': 'Navigation',\n 'data-ga-label': 'Sälj som företag',\n text: t('footer_howToSellCorporate'),\n includedLanguages: ['SV']\n },\n isPennybridgeCharitiesEnabled && {\n href: toLocalizedUrl('/causes'),\n 'data-ga-category': 'Footer',\n 'data-ga-action': 'Navigation',\n 'data-ga-label': 'Donera med Tradera',\n text: t('footer_donateWithTradera'),\n includedLanguages: ['SV']\n },\n {\n href: toLocalizedUrl('/frakt'),\n 'data-ga-category': 'Footer',\n 'data-ga-action': 'Navigation',\n 'data-ga-label': 'Fraktkalkylator',\n text: t('footer_shippingCalculator'),\n includedLanguages: ['SV', 'DA', 'EN']\n },\n {\n href: 'https://info.tradera.com/butik-privat/',\n 'data-ga-category': 'Footer',\n 'data-ga-action': 'Navigation',\n 'data-ga-label': 'Butik',\n text: t('footer_store'),\n includedLanguages: ['SV']\n },\n {\n href: {\n SV:\n 'https://info.tradera.com/salja-pa-tradera/prislista-privat/',\n DA: 'https://info.tradera.com/da/price-list-personal-account/',\n DE: 'https://info.tradera.com/en/price-list-personal-account/',\n EN: 'https://info.tradera.com/en/price-list-personal-account/'\n },\n 'data-ga-category': 'Footer',\n 'data-ga-action': 'Navigation',\n 'data-ga-label': 'Priser',\n text: t('footer_prices'),\n includedLanguages: ['SV', 'DA', 'EN']\n }\n ].filter(Boolean);\n\n return (\n {t('footer_buyHeading')}
\n- \n
\n
\n );\n};\n\nexport const ContactAndHelpLinks = ({ pageName, openGdprSettings }) => {\n const { t } = useTranslator();\n const { language } = useCurrentLanguage();\n const isQuantcastConsentEnabled = useIsFeatureEnabled('quantcast-consent');\n const availableLanguageCodesIso2 = useSelector(\n selectAvailableLanguageCodesIso2\n );\n\n const links = [\n {\n href: 'https://info.tradera.com/sakerhetscenter/regler-pa-tradera/',\n 'data-ga-category': 'Footer',\n 'data-ga-action': 'Navigation',\n 'data-ga-label': 'Regler på Tradera',\n text: t('footer_traderaRules'),\n includedLanguages: ['SV']\n },\n {\n href: 'http://www.mynewsdesk.com/se/tradera',\n 'data-ga-category': 'Footer',\n 'data-ga-action': 'Navigation',\n 'data-ga-label': 'Press',\n text: t('footer_press'),\n rel: 'nofollow',\n includedLanguages: ['SV']\n },\n {\n href: 'https://info.tradera.com/sakerhetscenter',\n 'data-ga-category': 'Footer',\n 'data-ga-action': 'Navigation',\n 'data-ga-label': 'Säkerhet',\n text: t('footer_security'),\n includedLanguages: ['SV']\n },\n {\n href: isSwedishOrUndefined(language)\n ? 'https://info.tradera.com/'\n : 'https://info.tradera.com/en/',\n 'data-ga-category': 'Footer',\n 'data-ga-action': 'Navigation',\n 'data-ga-label': 'Vanliga frågor',\n text: t('footer_faq'),\n includedLanguages: availableLanguageCodesIso2\n },\n {\n href: 'https://www.tradera.com/info/blogg/',\n 'data-ga-category': 'Footer',\n 'data-ga-action': 'Navigation',\n 'data-ga-label': 'Vad är nytt',\n text: t('footer_whatsUp'),\n includedLanguages: ['SV']\n },\n {\n href: 'https://info.tradera.com/kontakt/',\n 'data-ga-category': 'Footer',\n 'data-ga-action': 'Navigation',\n 'data-ga-label': 'Kontakta oss',\n text: t('footer_contactUs'),\n includedLanguages: ['SV']\n },\n {\n href:\n pageName === 'SellItem'\n ? '//tradera.humany.net/syi'\n : '//tradera.humany.net/juno',\n text: t('footer_customerService'),\n rel: 'nofollow',\n className: 'd-none',\n includedLanguages: availableLanguageCodesIso2\n },\n {\n href: '#',\n 'data-ga-category': 'Footer',\n 'data-ga-action': 'Navigation',\n 'data-ga-label': 'Open GDPR Settings',\n text: t('footer_gdpr_settings'),\n onClick: event => {\n event.preventDefault();\n if (isQuantcastConsentEnabled) {\n ConsentService.openUi();\n } else {\n openGdprSettings();\n }\n },\n includedLanguages: availableLanguageCodesIso2\n }\n ];\n\n return (\n {t('footer_sellHeading')}
\n- \n
\n
\n );\n};\n\nexport const InformationLinks = () => {\n const { t } = useTranslator();\n const { language } = useCurrentLanguage();\n const availableLanguageCodesIso2 = useSelector(\n selectAvailableLanguageCodesIso2\n );\n\n const links = [\n {\n href: isSwedishOrUndefined(language)\n ? 'https://info.tradera.com/anvandaravtal/'\n : 'https://info.tradera.com/en/anvandaravtal-eng/',\n 'data-ga-category': 'Footer',\n 'data-ga-action': 'Navigation',\n 'data-ga-label': 'Användaravtal',\n text: t('footer_userAgreement'),\n includedLanguages: availableLanguageCodesIso2\n },\n {\n href: isSwedishOrUndefined(language)\n ? 'https://info.tradera.com/sakerhetscenter/integritetspolicy/'\n : 'https://info.tradera.com/en/integritetespolicy-eng/',\n 'data-ga-category': 'Footer',\n 'data-ga-action': 'Navigation',\n 'data-ga-label': 'Integritetspolicy',\n text: t('footer_integrityPolicy'),\n includedLanguages: availableLanguageCodesIso2\n },\n {\n href: isSwedishOrUndefined(language)\n ? 'https://info.tradera.com/cookies-webb-beacons-och-liknande-teknik/'\n : 'https://info.tradera.com/en/cookies-webb-beacons-och-liknande-teknik/',\n 'data-ga-category': 'Footer',\n 'data-ga-action': 'Navigation',\n 'data-ga-label': 'Cookies',\n text: t('footer_cookies'),\n includedLanguages: availableLanguageCodesIso2\n },\n {\n href: '/info/om-oss',\n 'data-ga-category': 'Footer',\n 'data-ga-action': 'Navigation',\n 'data-ga-label': 'Om oss',\n text: t('footer_aboutTradera'),\n includedLanguages: availableLanguageCodesIso2\n },\n {\n href: 'https://careers.tradera.com/',\n 'data-ga-category': 'Footer',\n 'data-ga-action': 'Navigation',\n 'data-ga-label': 'Jobb',\n text: t('footer_availableJobs'),\n includedLanguages: availableLanguageCodesIso2\n }\n ];\n\n return (\n {t('footer_contactHelpHeading')}
\n- \n
\n
\n );\n};\n\nexport const SocialLinks = () => {\n const { t } = useTranslator();\n const availableLanguageCodesIso2 = useSelector(\n selectAvailableLanguageCodesIso2\n );\n\n const links = [\n {\n ['aria-label']: 'Tradera Facebook',\n href: 'https://www.facebook.com/Tradera',\n ['data-ga-category']: 'Footer',\n ['data-ga-action']: 'Navigation',\n ['data-ga-label']: 'Sociala medier - Facebook',\n rel: 'nofollow',\n icon: {t('footer_informationHeading')}
\n- \n
\n
\n );\n};\n","function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nimport React from \"react\";\nexport default (({\n styles = {},\n ...props\n}) => /*#__PURE__*/React.createElement(\"svg\", _extends({\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 48 9\"\n}, props), /*#__PURE__*/React.createElement(\"path\", {\n fill: \"#FFCC29\",\n d: \"M0 0h48v9H0z\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n d: \"M45 0v9H3V0h42z\",\n fill: \"#FECC00\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n clipRule: \"evenodd\",\n d: \"M16.22 4.2l-.36.47c-.1.12-.26.35.3.35h3l.88-1.17c.55-.73.05-2.24-1.91-2.24h-7.74L9.04 3.4h7.32c.37 0 .36.13.18.37l-.32.43zm-1.87 1.25c-.57 0-.4-.22-.3-.35l.37-.5.3-.4c.19-.24.2-.37-.18-.37H11.2L8.5 7.38h6.57a4.68 4.68 0 003.75-1.93h-4.48zm8.13 1.93h-3.86l1.46-1.93h3.86l-1.47 1.93zm6.09-5.76l-1.48 1.95h-1.72l1.48-1.95h-3.86l-2.58 3.4h9.43l2.58-3.4h-3.85zm-.52 5.76H24.2l1.46-1.93h3.85l-1.46 1.93zM3 6.22v.4h5.37l.31-.4H3zm0-.76h6.26l-.31.4H3v-.4zm0 1.93h4.8l.3-.41H3v.4zm42-.76h-5.66l.31-.41H45v.4zm-6.23.76H45v-.41h-5.92l-.31.4zm1.15-1.52l.3-.41H45v.4h-5.08zm-4.74-.85l2.58-3.4h-4.08l-2.58 3.4h4.08zM30.35 6l.42-.55h8.75l-1.46 1.93h-6.19c-1.58 0-2-.75-1.52-1.38z\",\n fill: \"#D50029\"\n})));","// extracted by mini-css-extract-plugin\nexport default {\"footer-partner--image-container\":\"footer-partner--image-container--2pyTs\",\"footerPartnerImageContainer\":\"footer-partner--image-container--2pyTs\"};","import React from 'react';\nimport { useSelector } from 'react-redux';\nimport { selectIsOutsideSweden } from 'tradera-state/member';\nimport PaypalLogo from '@tradera/blueprint/theme/logos/paypal.svg?jsx';\nimport MastercardLogo from '@tradera/blueprint/theme/logos/mastercard_vertical.svg?jsx';\nimport VisaLogo from '@tradera/blueprint/theme/logos/visa.svg?jsx';\nimport GooglePayLogo from '@tradera/blueprint/theme/logos/google-pay.svg?jsx';\nimport ApplePayLogo from '@tradera/blueprint/theme/logos/apple-pay.svg?jsx';\nimport DhlLogo from './dhl.svg?jsx';\n\nimport SwishLogo from '@tradera/blueprint/theme/logos/swish_horizontal.svg?jsx';\nimport PaynovaLogo from '@tradera/blueprint/theme/logos/paynova.svg?jsx';\n\nimport styles from './footer-partners.module.scss';\n\nexport const FooterPartners = () => {\n const isOutsideSweden = useSelector(state => selectIsOutsideSweden(state));\n\n const partners = [\n {\n src: '/static/images/shipping/postnord.svg',\n alt: 'Postnord logo',\n height: 9,\n containerCss: styles.footerPartnerImageContainer\n },\n {\n src: '/static/images/shipping/schenker.svg',\n alt: 'Schenker logo',\n height: 9,\n containerCss: styles.footerPartnerImageContainer\n },\n {\n logo: \n {/* Social media */}\n\n
\n - \n
\n \n \n
\n \n
\n \n \n \n
\n \n {/* Köp */}\n
\n \n
\n \n
\n \n
\n \n
\n\n {/* Copyright */}\n \n
\n \n © {new Date().getFullYear()} Tradera\n
\n\n
\n \n );\n};\n\nconst mapStateToProps = state => ({\n pageName: state.page.name,\n isCouponationNavLinkEnabled:\n state.environment.featureSwitches['couponation-nav-link']\n});\n\nconst mapDispatchToProps = dispatch => ({\n openGdprSettings: () => dispatch(uiActions.openGdprSettings())\n});\n\nexport default connect(mapStateToProps, mapDispatchToProps)(SiteFooter);\n","export const getMessagingUrl = toLocalizedUrl =>\n toLocalizedUrl(`${window.origin}/messagingiframe`);\n","import React from 'react';\nimport AttributeButton from './attribute-button';\n\nconst ATTRIBUTE_NAMES = { BRAND: 'brand', CLOTHES_SIZE: 'clothes_size' };\nconst ATTRIBUTE_PREFIX = 'af-';\n\nconst AttributeButtonsList = ({ attributes, onClick, className }) => {\n const visibleAttributes = attributes\n .map(({ name, values }) => {\n switch (name) {\n case ATTRIBUTE_NAMES.BRAND:\n return { name, values };\n case ATTRIBUTE_NAMES.CLOTHES_SIZE:\n return { name: ATTRIBUTE_PREFIX + name, values };\n default:\n return null;\n }\n })\n .filter(x => !!x);\n return (\n \n {visibleAttributes.map(attribute => (\n
\n
\n );\n};\n\nexport default BottomButtons;\n","export const generateItemCardPlaceholders = itemCount =>\n [...new Array(itemCount)].map((_, index) => ({\n itemId: index,\n shortDescription: ''\n }));\n","import React from 'react';\nimport PropType from 'prop-types';\n\nconst ModalBody = ({ children, className = '', inlineStyle = {} }) => (\n \n \n {leftButton.text}\n \n
\n \n \n {rightButton.text}\n \n
\n \n
\n);\n\nconst LoadingSymbolCards = ({ itemsPerPage }) => {\n const items = generateItemCardPlaceholders(itemsPerPage);\n const localLazyLoadSettings = {\n ...lazyLoadSettings,\n offset: 100\n };\n\n const isMobile = useIsMobile();\n\n return (\n {children}
\n \n);\n\nexport default ErrorContainer;\n","/**\n * Legacy class replaced by translations. Please don't add anything here, translate all copy instead\n */\nexport default {\n INVOICE_UNPAID: 'Obetald faktura',\n INVOICE_UNPAID_DESCRIPTION: 'Du har väntande faktura(or)',\n INVOICE_OVERDUE: 'Förfallen faktura',\n INVOICE_OVERDUE_DESCRIPTION:\n 'Du har en eller flera förfallna fakturor (registrering av nya inbetalningar är fördröjd).',\n BANK_ACCOUNT_MISSING: 'Kontouppgifter',\n BANK_ACCOUNT_MISSING_DESCRIPTION:\n 'Fyll i dina kontouppgifter för att få betalt när du säljer.',\n PAYOUT_FAILED: 'Misslyckad utbetalning',\n PAYOUT_FAILED_DESCRIPTION:\n 'Vi kunde tyvärr inte betala ut dina pengar. Klicka här för att uppdatera utbetalningsuppgifter.',\n PAYMENT_READY_BANK_ACCOUNT_MISSING: 'Misslyckad utbetalning',\n PAYMENT_READY_BANK_ACCOUNT_MISSING_DESCRIPTION:\n 'Du har en väntande utbetalning. Fyll i dina kontouppgifter för att få pengarna.',\n SWISH_MISSING: 'Swish saknas',\n SWISH_MISSING_DESCRIPTION:\n 'De flesta köpare väljer att betala med Swish. Fyll i ditt Swish-nummer för att inte missa betalningar.',\n ADD_SWISH: 'Lägg till Swish',\n NO_THANKS_SWISH: 'Nej tack till Swish',\n I_UNDERSTAND: 'Jag förstår',\n IFRAME_NOT_SUPPORTED: 'Din browser saknar stöd för iframes',\n COOKIES: {\n HEADER: 'Information om cookies',\n DESC:\n 'Tradera använder cookies (kakor) för att ge dig en bättre upplevelse.',\n READ_MORE: 'Läs mer om vårt användande av cookies.'\n },\n WELCOME_TO_TRADERA: 'Välkommen till Sveriges största marknadsplats!',\n GET_STARTED_BUYING: 'Kom igång med att handla på Tradera',\n GET_STARTED_SELLING: 'Kom igång med att sälja på Tradera',\n VIEW_MORE_VIDEOS: 'Se fler videos',\n DISCOVER: {\n FILTERS: {\n ALL_CATEGORIES: 'Alla kategorier',\n BRANDS: 'Varumärken',\n CONDITION: 'Skick',\n ITEM_TYPE: 'Annonsformat',\n PRICE: 'Pris',\n SELLER_TYPE: 'Typ av säljare',\n COUNTY: 'Område',\n ITEM_STATUS: 'Status',\n SORTING: 'Sortering',\n CLEAR: 'Återställ'\n }\n },\n META: {\n DEFAULT_SITE_NAME: 'Tradera',\n DEFAULT_DESCRIPTION:\n 'Köp och sälj bland auktioner och till fast pris på Tradera.com. Fynda bland massor av auktioner.'\n }\n};\n","import React, { useEffect, useRef, useMemo } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { useUrlLocalizer } from 'tradera-lang/translate';\nimport ALink from 'tradera-components/alink/alink';\nimport Home from '@tradera/blueprint/theme/icons2/home.svg?jsx';\n\nconst Breadcrumbs = ({\n categoryPath,\n categoryTree,\n className = '',\n handleClick,\n inSPA = false\n}) => {\n const { toLocalizedUrl } = useUrlLocalizer();\n const breadcrumbRef = useRef(null);\n\n // Use path if provided otherwise parse path from tree\n let parsedCategoryPath = useMemo(() => {\n if (categoryPath) {\n return categoryPath;\n } else if (categoryTree) {\n const path = resolveActiveCategoryPath(categoryTree);\n // If empty path, fall back to first root category\n if (path.length > 0) {\n return path;\n } else {\n return [categoryTree];\n }\n } else {\n return [];\n }\n }, [categoryPath, categoryTree]);\n\n useEffect(() => {\n // eslint-disable-next-line better-mutation/no-mutation\n breadcrumbRef.current.scrollLeft =\n breadcrumbRef.current.scrollWidth -\n breadcrumbRef.current.clientWidth;\n }, [parsedCategoryPath]);\n\n return (\n \n {children}\n
\n \n );\n};\n\nexport default SiteSubheader;\n","import qs from 'qs';\nimport axios from 'axios';\n\nimport ENDPOINTS from 'tradera-constants/endpoints';\nimport { toLocalizedUrl } from 'tradera-utils/url';\nimport {\n axiosWithTokenRefresh,\n finalizeResponse,\n handleError,\n API_ERRORS,\n axiosConfigs,\n checkResponseLoggedOut\n} from 'tradera-utils/api';\n\nexport const getBids = async (itemId, preferredLanguageCode) => {\n return axiosWithTokenRefresh()\n .get(toLocalizedUrl(`/ajax/item/${itemId}/bids`, preferredLanguageCode))\n .then(({ data }) => data)\n .catch(\n handleError({\n // Ignore 400 & 401 errors that slip through token refresh\n 400: API_ERRORS.IGNORE_ME,\n 401: API_ERRORS.IGNORE_ME\n })\n );\n};\n\nexport const postFavoriteSeller = async (sellerId, isAlreadySaved) => {\n const payload = isAlreadySaved\n ? qs.stringify({ ids: sellerId })\n : qs.stringify({ sellerId: sellerId });\n return axios\n .post(\n isAlreadySaved\n ? ENDPOINTS.FAVORITE_SELLER_REMOVE\n : ENDPOINTS.FAVORITE_SELLER_ADD,\n payload,\n {\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded'\n },\n ...axiosConfigs\n }\n )\n .then(checkResponseLoggedOut())\n .then(finalizeResponse())\n .catch(handleError());\n};\n","import { matchPath } from 'react-router';\nimport { logger } from 'packages';\n\nexport const getCurrentPageFromRoute = (routeMap, location) => {\n if (!routeMap) {\n logger(`Variable 'routeMap' missing in getCurrentPageFromRoute()`);\n return;\n } else if (!location) {\n logger(`Variable 'location' missing in getCurrentPageFromRoute()`);\n return;\n }\n\n const matchedPage = Object.keys(routeMap)?.find(pageName => {\n const page = routeMap[pageName];\n return matchPath(location.pathname, {\n path: page.path,\n exact: page.exact || false,\n strict: page.strict || false\n });\n });\n\n return routeMap[matchedPage];\n};\n","import actionTypes from './action-types';\nimport { getCategoryList } from './api';\nimport { API_ERRORS } from 'tradera-utils/api';\nimport { reload } from 'tradera-utils/location';\n\nconst fetchCategoryList = () => dispatch => {\n dispatch(requestCategoryList());\n\n return getCategoryList()\n .then(results => dispatch(receiveCategoryList(results.data)))\n .catch(error => {\n switch (error.message) {\n case API_ERRORS.VERSION_MISMATCH:\n reload(true);\n break;\n case API_ERRORS.CANCELLED:\n break;\n default:\n dispatch(handleCategoryListError(error));\n break;\n }\n });\n};\n\nconst requestCategoryList = payload => ({\n type: actionTypes.REQUEST_CATEGORY_LIST,\n payload\n});\n\nconst receiveCategoryList = payload => ({\n type: actionTypes.RECEIVE_CATEGORY_LIST,\n payload\n});\n\nconst handleCategoryListError = payload => ({\n type: actionTypes.HANDLE_CATEGORY_LIST_ERROR,\n payload\n});\n\nexport default {\n fetchCategoryList\n};\n","import { touchWebClient } from 'tradera-utils/http';\n\nexport const getCategoryList = () =>\n touchWebClient.get('categories', { cancelTokenId: 'getCategoryList' });\n","import React from 'react';\n\nconst lazyLoadSettings = {\n offset: 400,\n once: true,\n height: 150,\n placeholder: React.createElement('div', {\n className: 'item-card-image animation-loading-shimmer w-100 h-100'\n })\n};\n\nexport { lazyLoadSettings };\n","import React, { useState } from 'react';\nimport { useTranslator } from 'tradera-lang/translate';\nimport { formatPrice } from '@tradera/blueprint/utils';\nimport MultiCurrency from 'tradera-components/multi-currency/multi-currency';\nimport { useSelector } from 'react-redux';\nimport { selectPreferredCurrency } from 'tradera-state/multi-currency/selectors';\nimport TrashcanIcon from '@tradera/blueprint/theme/icons2/trashcan.svg?jsx';\nimport { Button } from 'tradera-components/atoms/button/button';\n\nconst MAX_DROPDOWN_SIZE = 10;\n\nconst ItemQuantitySelector = ({\n quantity,\n quantityInShop,\n onQuantityChange\n}) => {\n const { t } = useTranslator();\n const [inputMode, setInputMode] = useState(quantity > MAX_DROPDOWN_SIZE);\n\n const onChange = event => {\n const value = parseInt(event.target.value);\n if (isNaN(value)) return;\n\n if (value === -1) {\n setInputMode(true);\n } else {\n onQuantityChange(Math.min(value, quantityInShop));\n }\n };\n\n return (\n \n {!inputMode && (\n
\n );\n};\n\nconst ItemDisplay = ({\n itemImage,\n itemTitle,\n unitPrice,\n language,\n isFirstItem,\n quantity,\n quantityInShop,\n onQuantityChange,\n itemUrl,\n isUnavailable\n}) => {\n const { t } = useTranslator();\n const preferredCurrency = useSelector(selectPreferredCurrency);\n\n const getError = () => {\n if (isUnavailable) {\n return t('checkout_item_noLongerAvailable');\n } else if (quantityInShop !== undefined && quantity > quantityInShop) {\n return t('checkout_item_outOfStock');\n }\n return null;\n };\n\n const error = getError();\n\n const renderPrice = () => {\n return (\n \n quantityInShop ? 'border-danger' : ''\n }`}\n onChange={onChange}>\n {[\n ...Array(\n Math.min(\n Math.max(quantityInShop, 0),\n MAX_DROPDOWN_SIZE\n )\n )\n ].map((_, i) => {\n const count = i + 1;\n return (\n \n {t('cartCheckoutOverview_countDisplay', {\n count: count\n })}\n \n );\n })}\n {quantity > quantityInShop && (\n \n )}\n {quantityInShop > MAX_DROPDOWN_SIZE && (\n \n )}\n \n onQuantityChange(0)}\n title={t('cartCheckoutOverview_removeItem')}>\n
\n )}\n {inputMode && (\n \n
\n );\n };\n\n return (\n <>\n \n {quantity > 1 && ×}\n\n 1 ? 'ml-1' : 'font-weight-bold'\n }`}>\n {formatPrice(unitPrice, language, preferredCurrency)}\n \n
\n\n {quantity > 1 && (\n \n =\n \n {formatPrice(\n unitPrice * quantity,\n language,\n preferredCurrency\n )}\n \n
\n )}\n\n \n
\n {isFirstItem && (\n \n \n \n {itemTitle}\n \n\n {error &&
\n \n {isFirstItem && (\n \n {t('checkout_item_title')}:\n \n )}\n
\n {error}
}\n\n {quantityInShop !== undefined && (\n \n
\n )}\n \n \n {t('checkout_item_title')}:\n \n
\n \n
\n \n );\n};\n\nexport default ItemDisplay;\n","import { useSelector } from 'react-redux';\nimport { isServer } from 'tradera-utils/nextjs';\n\nexport const useUserAgent = () => {\n const request = useSelector(state => state.request);\n return isServer ? request.userAgent : navigator.userAgent;\n};\n"],"sourceRoot":""}\n \n
\n \n \n {itemTitle}\n \n\n
\n\n {quantityInShop !== undefined &&\n quantity > quantityInShop && (\n \n {quantityInShop !== undefined && (\n
\n \n {t('checkout_item_outOfStock')}\n
\n )}\n