\n {amountDetails.title}\n
\n );\n const amountValue = (\n <>\n\n {t('vip_hasEndedTime')}{' '}\n {formatUtcDateAsSwedishTimeZoneDate(endDate)}\n
\n ) : (\n\n {t('vip_willEndTime')}{' '}\n {formatUtcDateAsSwedishTimeZoneDate(endDate)}\n
\n );\n const timeValue =\n isEnding || hasEnded ? (\n\n
\n {t('vip_bid')}{' '}\n \n (\n
\n {bidCount} {t('vip_amount')}\n
\n );\n\n const showBidCount =\n itemState !== ITEM_STATES.ENDED_AUCTION_BIN_BOUGHT_AS_BIN;\n\n return (\n\n
\n {amountTitle}
\n {amountValue}
\n {timeTitle}
\n {timeValue}
\n \n {showBidCount && (\n \n
\n )}\n {bidTitle}
\n {bidValue}
\n \n {children}\n
\n );\n};\n\n// Global loading with overlay that covers the whole page, except top menu\nconst GlobalLoader = () => (\n - \n {[...Array(5)]\n .map((e, i) => i + 1)\n .map(number => (\n
\n
\n );\n};\nexport const DetailedRating = React.memo(_DetailedRating);\n","const namespace = 'FEEDBACKS';\nexport const ACTION_TYPES = {\n SET_FEEDBACKS: `${namespace}/SET_FEEDBACKS`,\n TOGGLE_IS_POSITIVE: `${namespace}/TOGGLE_IS_POSITIVE`,\n SET_IS_POSITIVE: `${namespace}/SET_IS_POSITIVE`,\n SET_IS_ITEM_NOT_RECEIVED: `${namespace}/SET_IS_ITEM_NOT_RECEIVED`,\n SET_COMMENT: `${namespace}/SET_COMMENT`,\n SET_RATING: `${namespace}/SET_RATING`\n};\n\nexport const setFeedbacks = payload => ({\n type: ACTION_TYPES.SET_FEEDBACKS,\n payload\n});\n\n/**\n * If previously null, isPositive value becomes the given value.\n * If previously true, isPositive becomes null if given true or false if given false.\n * If previously false, isPositive becomes null if given false or true if given true.\n * @param {*} transactionId\n * @param {*} isPositive\n * @returns\n */\nexport const toggleIsPositive = (transactionId, isPositive) => ({\n type: ACTION_TYPES.TOGGLE_IS_POSITIVE,\n payload: { transactionId, isPositive }\n});\n\nexport const setComment = (transactionId, comment) => ({\n type: ACTION_TYPES.SET_COMMENT,\n payload: { transactionId, comment }\n});\n\nexport const setRating = (transactionId, ratingName, rating) => ({\n type: ACTION_TYPES.SET_RATING,\n payload: { transactionId, rating, ratingName }\n});\n\nexport const setItemNotReceived = (transactionId, isItemNotReceived) => ({\n type: ACTION_TYPES.SET_IS_ITEM_NOT_RECEIVED,\n payload: { transactionId, isItemNotReceived }\n});\n","import React from 'react';\nimport { useTranslator } from 'tradera-lang/translate';\nimport AlertIcon from '@tradera/blueprint/theme/icons2/alert.svg?jsx';\nimport { setItemNotReceived } from './feedbacks-actions';\n\nconst _ItemNotReceived = ({ dispatch, isItemNotReceived, transactionId }) => {\n const { t } = useTranslator();\n const checkboxId = `inr-checkbox-${transactionId}`;\n return (\n {title}
\n\n {ratingDescription}\n
\n )}\n {children}\n\n
\n );\n};\nexport const ItemNotReceived = React.memo(_ItemNotReceived);\n","import React from 'react';\nimport { useTranslator, useUrlLocalizer } from 'tradera-lang/translate';\nimport AlertIcon from '@tradera/blueprint/theme/icons2/alert.svg?jsx';\n\nconst _UnpaidItem = ({ unpaidItemUrl }) => {\n const { t } = useTranslator();\n const { toLocalizedUrl } = useUrlLocalizer();\n return (\n \n
\n\n {t('leaveFeedback_inrHeading')}
\n{t('leaveFeedback_inrText')}
\n\n \n dispatch(\n setItemNotReceived(\n transactionId,\n !isItemNotReceived\n )\n )\n }\n checked={isItemNotReceived}\n />\n \n
\n \n
\n );\n};\nexport const UnpaidItem = React.memo(_UnpaidItem);\n","// extracted by mini-css-extract-plugin\nexport default {\"commentInput\":\"commentInput--2nFgi\"};","import React, { useRef, useState, useEffect } from 'react';\n\nexport const AutoHeightTextArea = props => {\n const textAreaRef = useRef(null);\n const [text, setText] = useState('');\n const [textAreaHeight, setTextAreaHeight] = useState('auto');\n const [parentHeight, setParentHeight] = useState('auto');\n\n useEffect(() => {\n setParentHeight(`${textAreaRef.current.scrollHeight}px`);\n setTextAreaHeight(`${textAreaRef.current.scrollHeight}px`);\n }, [text, textAreaRef]);\n\n const onChangeHandler = event => {\n setTextAreaHeight('auto');\n setParentHeight(`${textAreaRef.current.scrollHeight}px`);\n setText(event.target.value);\n\n if (props.onChange) {\n props.onChange(event);\n }\n };\n\n return (\n \n
\n\n {t('leaveFeedback_upiHeading')}
\n\n
\n
\n \n \n {t('leaveFeedback_charsLeft_v2', {\n charsCount: comment.length,\n max: MAX_COMMENT_LENGTH\n })}\n \n
\n {errorMessageTranslationKeys.map(translationKey => (\n {t('leaveFeedback_leaveComment')}
\n\n {t(translationKey)}\n
\n ))}\n\n {ratingSettings.map((ratingSetting, index) => {\n return (\n t(key)\n )}\n selectedRating={ratingValues[index]}\n onRatingClicked={value =>\n dispatch(\n setRating(\n transactionId,\n ratingSetting.name,\n value\n )\n )\n }>\n {showItemNotReceived &&\n isMobile() &&\n indexOfShippingTime === index && (\n
\n {showItemNotReceived && !isMobile() && (\n \n
\n \n );\n};\n\nDetailsAndPrice.propTypes = {\n url: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n transactionDate: PropTypes.string.isRequired,\n memberUrl: PropTypes.string.isRequired,\n alias: PropTypes.string.isRequired,\n price: PropTypes.string.isRequired,\n shippingPrice: PropTypes.string.isRequired\n};\n","import React from 'react';\nimport { Happy, Sad } from './smiley';\nimport { Figure } from './figure';\nimport { Form } from './form';\nimport { toggleIsPositive } from './feedbacks-actions';\nimport { DetailsAndPrice } from './details-and-price';\n\nexport const _LeaveFeedbackItem = ({\n alias,\n className = '',\n comment = '',\n dispatch,\n errorMessageTranslationKeys,\n imageUrl,\n isItemNotReceived,\n memberUrl,\n price,\n title,\n shippingPrice,\n transactionDate,\n transactionId,\n url,\n isPositive,\n isNegative,\n ratingSettings,\n ratingValues,\n state,\n unpaidItemUrl\n}) => {\n const Image = ({ className = '' }) => (\n \n \n
\n
\n \n \n {title}\n \n
\n \n
\n \n {transactionDate} |{' '}\n
\n \n {shippingPrice}\n
\n {price}
\n \n
\n );\n};\n\nexport const LeaveFeedbackItem = React.memo(_LeaveFeedbackItem);\n","// extracted by mini-css-extract-plugin\nexport default {\"thinDivider\":\"thinDivider--35UZk\",\"thickDivider\":\"thickDivider--CR6ys\"};","import React from 'react';\nimport styles from './divider.module.scss';\n\nexport const ThinDivider = ({ className = '' }) => (\n \n);\n\nexport const ThickDivider = ({ className = '' }) => (\n \n);\n","import React from 'react';\nimport { useTranslator } from 'tradera-lang/translate';\nimport DialogModal from 'tradera-components/dialog/dialog-modal';\nimport CheckmarkIcon from '@tradera/blueprint/theme/icons2/check-circle.svg?jsx';\nimport AlertIcon from '@tradera/blueprint/theme/icons2/alert.svg?jsx';\nimport CloseIcon from '@tradera/blueprint/theme/icons2/close.svg?jsx';\n\nexport const Dialog = ({\n title,\n text,\n icon,\n dismissActionText,\n onDismiss,\n confirmActionText,\n onConfirm\n}) => {\n return (\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n dispatch(toggleIsPositive(transactionId, true))\n }\n />\n \n dispatch(toggleIsPositive(transactionId, false))\n }\n className=\"ml-3\"\n />\n
\n {showForm && (\n \n \n \n
\n {title}
\n{icon}
\n {text}
\n {onConfirm ? (\n\n \n {confirmActionText}\n \n \n {dismissActionText}\n \n
\n ) : (\n \n \n {dismissActionText}\n \n
\n )}\n \n \n );\n};\n\nexport const SubmittedDialog = ({ submittedFeedbackCount, onDismiss }) => {\n const { t } = useTranslator();\n return (\n \n \n \n {title}\n \n
\n {actionComponent && (\n \n {actionComponent}\n
\n )}\n \n );\n};\n\nPageHeader.propTypes = {\n title: PropTypes.node.isRequired,\n actionComponent: PropTypes.node\n};\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useTranslator } from 'tradera-lang/translate';\nimport CheckIcon from '@tradera/blueprint/theme/icons2/check.svg?jsx';\nimport LoadingIcon from '@tradera/blueprint/theme/icons2/loading.svg?jsx';\n\nexport const SubmitButton = ({\n isInMultipleFeedbacksContext,\n isSubmitting,\n onClick,\n submittableCount,\n className = ''\n}) => {\n const { t } = useTranslator();\n const submitButtonText = isInMultipleFeedbacksContext\n ? t(\n submittableCount > 0\n ? 'leaveFeedback_submitButton'\n : 'leaveFeedback_submitButton_noSelected',\n {\n count: submittableCount\n }\n )\n : t('leaveFeedback_confirmButton');\n return (\n \n {children}\n
\n );\n};\nexport const StickyContainer = makeSticky(Container);\n","// extracted by mini-css-extract-plugin\nexport default {\"leaveFeedbackLayout\":\"leaveFeedbackLayout--3RkUl\",\"loaderContainer\":\"loaderContainer--7G8pB\"};","import React, {\n useCallback,\n useEffect,\n useReducer,\n useState,\n Fragment\n} from 'react';\nimport { useTranslator } from 'tradera-lang/translate';\nimport { LocalLoader } from 'tradera-components/loader';\nimport CloseIcon from '@tradera/blueprint/theme/icons2/close.svg?jsx';\nimport leaveFeedbackService from 'tradera-apps/my-tradera/app/data/leave-feedback-service';\nimport { LeaveFeedbackItem } from './leave-feedback-item';\nimport { ThinDivider, ThickDivider } from './divider';\nimport {\n AlreadySubmittedErrorDialog,\n SubmittedDialog,\n ConfirmSubmitDialog,\n SubmitErrorDialog\n} from './dialog';\nimport { keepUnique } from 'tradera-utils/array';\nimport {\n createFeedbackPayloadsMap,\n getRatingSettings\n} from './leave-feedback-helper';\nimport { feedbacksReducer, initialState } from './feedbacks-reducer';\nimport { setFeedbacks } from './feedbacks-actions';\nimport { ROLES } from './constants';\nimport {\n Breakpoint,\n BREAKPOINTS\n} from 'tradera-components/breakpoint/breakpoint';\nimport { PageHeader } from './page-header';\nimport { SubmitButton } from './submit-button';\nimport { StickyContainer } from './sticky-container';\nimport styles from './leave-feedback.module.scss';\n\nconst PAGE_SIZE = 10;\n\nconst Layout = ({ renderHeader, children, className = '' }) => (\n \n
\n);\n\nexport const LeaveFeedback = ({\n isInMultipleFeedbacksContext,\n onDismiss = () => {},\n onDone,\n role,\n transactionIds: givenTransactionIds\n}) => {\n const [transactionIds] = useState(givenTransactionIds);\n const [loadedCount, setLoadedCount] = useState(0);\n const [itemsLeft, setItemsLeft] = useState(0);\n const [groups, setGroups] = useState([]);\n const [isFetching, setIsFetching] = useState(false);\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [negativeCount, setNegativeCount] = useState(0);\n const [showSubmitNegativeWarning, setShowSubmitNegativeWarning] = useState(\n false\n );\n const [showSubmittedDialog, setShowSubmittedDialog] = useState(false);\n const [showSubmitErrorDialog, setShowSubmitErrorDialog] = useState(false);\n const [\n showAlreadySubmittedErrorDialog,\n setShowAlreadySubmittedErrorDialog\n ] = useState(false);\n const [{ feedbacks, submittables }, dispatch] = useReducer(\n feedbacksReducer,\n initialState\n );\n const [ratingSettings] = useState(getRatingSettings(role === ROLES.BUYER));\n const nextCount = itemsLeft > PAGE_SIZE ? PAGE_SIZE : itemsLeft;\n const { t } = useTranslator();\n\n useEffect(() => {\n let loadedCount = groups.reduce((acc, group) => {\n return acc + group.items.length;\n }, 0);\n setLoadedCount(loadedCount);\n const feedbacks = createFeedbackPayloadsMap(\n groups,\n role === ROLES.BUYER\n );\n dispatch(setFeedbacks(feedbacks));\n }, [groups, role]);\n\n useEffect(() => {\n const negatives = Object.values(submittables).filter(\n submittable => submittable.isPositive === false\n );\n setNegativeCount(negatives.length);\n }, [submittables]);\n\n const submitOrConfirm = useCallback(() => {\n if (negativeCount > 0) {\n setShowSubmitNegativeWarning(true);\n } else {\n submit(submittables);\n }\n }, [negativeCount, submit, submittables]);\n\n const submit = useCallback(submittables => {\n setIsSubmitting(true);\n const onSuccess = () => {\n setIsSubmitting(false);\n setShowSubmittedDialog(true);\n };\n const onError = () => {\n setIsSubmitting(false);\n setShowSubmitErrorDialog(true);\n };\n leaveFeedbackService.submitData(submittables, onSuccess, onError);\n }, []);\n\n const onFetchAllSuccess = useCallback(data => {\n setGroups(oldGroups => {\n const newGroups = [...oldGroups];\n data.groups.forEach(incomingGroup => {\n const existingGroup = newGroups.find(\n g => g.label === incomingGroup.label\n );\n if (existingGroup) {\n const mayHaveDuplicates = existingGroup.items.concat(\n incomingGroup.items\n );\n existingGroup.items = keepUnique(\n mayHaveDuplicates,\n item => `${item.itemId}${item.transactionId}`,\n false\n );\n } else {\n newGroups.push(incomingGroup);\n }\n });\n return newGroups;\n });\n setItemsLeft(() => data.itemsLeft);\n setIsFetching(false);\n }, []);\n\n const onFetchError = useCallback(data => {\n setIsFetching(false);\n if (\n data.responseJSON.errorCode === 'BuyerFeedbackAlreadyLeft' ||\n data.responseJSON.errorCode === 'SellerFeedbackAlreadyLeft'\n ) {\n setShowAlreadySubmittedErrorDialog(true);\n }\n }, []);\n\n const fetchNext = useCallback(() => {\n leaveFeedbackService.getAllFeedbackItems(\n loadedCount,\n PAGE_SIZE,\n onFetchAllSuccess,\n onFetchError\n );\n }, [loadedCount, onFetchError, onFetchAllSuccess]);\n\n const fetchAll = useCallback(() => {\n setIsFetching(true);\n leaveFeedbackService.getAllFeedbackItems(\n 0,\n PAGE_SIZE,\n onFetchAllSuccess,\n onFetchError\n );\n }, [onFetchAllSuccess, onFetchError]);\n\n const fetchByTransactionIds = useCallback(\n transactionIds => {\n setIsFetching(true);\n leaveFeedbackService.getFeedbackItems(\n transactionIds,\n data => {\n const group = {\n items: data.items\n };\n setGroups(() => {\n return [group];\n });\n setIsFetching(false);\n },\n onFetchError\n );\n },\n [onFetchError]\n );\n\n useEffect(() => {\n setIsFetching(true);\n leaveFeedbackService.setRootUrl(`/my/leave-feedback/${role}/`);\n if (transactionIds.length > 0) {\n fetchByTransactionIds(transactionIds);\n } else {\n fetchAll();\n }\n }, [fetchAll, fetchByTransactionIds, role, transactionIds]);\n\n if (isFetching) {\n return (\n \n {renderHeader && renderHeader()}\n {children}\n
\n {t('leaveFeedback_no_items')}
}\n {itemsExist && (\n \n {index > 0 && (\n \n {index > 0 && (\n \n );\n })}\n
\n ))}\n {nextCount > 0 && (\n \n {group.label}\n
\n )}\n {group.items.map((item, index) => {\n const payload =\n feedbacks[item.transactionId];\n if (!payload) {\n return null;\n }\n return (\n\n \n {t('leaveFeedback_showMore', {\n count: nextCount\n })}\n \n
\n )}\n {isInMultipleFeedbacksContext ? (\n \n
\n \n \n onDismiss && onDismiss()\n }>\n
\n )}\n \n )}\n \n )}\n \n );\n};\n","/**\n * Returns an array with unique values based on keys provided by the given function.\n */\nexport const keepUnique = (arr, getKey, keepFirst) => {\n if (keepFirst) {\n let seen = new Set();\n return arr.filter(item => {\n let key = getKey(item);\n return seen.has(key) ? false : seen.add(key);\n });\n }\n return [...new Map(arr.map(x => [getKey(x), x])).values()];\n};\n","import $ from 'jquery';\nexport default $.ajax;\n","import qs from 'qs';\n\nexport const URL_HASHES = {\n openBiddingModal: 'bidding',\n saveInWishlist: 'wishlist=1',\n openBinModal: 'bin=1',\n openChangeCombinedShippingModal: 'open_change_combined_shipping=',\n markAsPaid: 'mark_as_paid=',\n hasRequestedCombinedShipping: 'has_requested_combined_shipping='\n};\n\n/**\n * Remove hash and forceRedirect param from url\n */\nexport const removeHashFromUrl = () => {\n const { forceRedirect, ...otherQueryParams } = qs.parse(location.search, {\n ignoreQueryPrefix: true\n });\n history.replaceState(\n {},\n window.title,\n location.pathname +\n qs.stringify(otherQueryParams, { addQueryPrefix: true })\n );\n};\n\nexport const shouldOpenBiddingModal = () => {\n if (document.location.hash.includes(URL_HASHES.openBiddingModal)) {\n const { bidding } = qs.parse(document.location.hash.substr(1));\n return bidding ? parseInt(bidding, 10) : 0;\n } else {\n return 0;\n }\n};\n\nexport const shouldSaveInWishlist = () =>\n document.location.hash.includes(URL_HASHES.saveInWishlist);\n\nexport const shouldOpenBinModal = () =>\n document.location.hash.includes(URL_HASHES.openBinModal);\n\nexport const shouldOpenChangeCombinedShippingModal = () =>\n document.location.hash.includes(URL_HASHES.openChangeCombinedShippingModal);\n\nexport const shouldMarkAsPaid = () =>\n document.location.hash.includes(URL_HASHES.markAsPaid);\n\nexport const shouldShowRequestedCombinedShippingToast = () =>\n document.location.hash.includes(URL_HASHES.hasRequestedCombinedShipping);\n\nconst getBaseRedirectUrl = () => {\n // Add random query parameter to force reload when redirecting to this url\n // and only the hash differs\n const queryParams = {\n ...qs.parse(location.search, { ignoreQueryPrefix: true }),\n forceRedirect: Math.round(Math.random() * 100000)\n };\n return (\n location.protocol +\n '//' +\n location.host +\n location.pathname +\n qs.stringify(queryParams, { addQueryPrefix: true })\n );\n};\n\nexport const getBiddingRedirectUrl = amount => {\n const url = getBaseRedirectUrl() + '#' + URL_HASHES.openBiddingModal;\n if (!amount) return url;\n return `${url}=${amount}`;\n};\n\nexport const getWishlistRedirectUrl = () =>\n getBaseRedirectUrl() + '#' + URL_HASHES.saveInWishlist;\n\nexport const getBinRedirectUrl = () =>\n getBaseRedirectUrl() + '#' + URL_HASHES.openBinModal;\n","export default {\n INITIALIZE: 'CURRENCY/INITIALIZE',\n SET_PREFERRED_CURRENCY: 'CURRENCY/SET_PREFERRED_CURRENCY',\n SET_CURRENCY_IF_NOT_CHOSEN: 'CURRENCY/SET_CURRENCY_IF_NOT_CHOSEN'\n};\n","import {\n selectGeolocation,\n selectIsOutsideSweden\n} from 'tradera-state/member/selectors';\nimport { selectPreferredLanguage } from 'tradera-state/language/selectors';\nimport { selectIsLoggedIn } from 'tradera-state/member';\nimport { getLanguageFromCountryCode } from 'tradera-utils/languagecode';\nimport { isSwedenCountryCodeOrUndefined } from 'tradera-utils/countrycode';\n\nexport const selectShowRegionSelection = state =>\n !selectIsLoggedIn(state) && selectIsOutsideSweden(state);\nexport const selectAvailableShippingCountries = state =>\n state.shippingRegion.availableShippingCountries;\nexport const selectShippingCountry = state =>\n state.shippingRegion.shippingCountry;\nexport const selectIsLoadingAvailableShippingCountries = state =>\n state.shippingRegion.isLoadingAvailableShippingCountries;\nexport const selectHasLoadedAvailableShippingCountries = state =>\n state.shippingRegion.hasLoadedAvailableShippingCountries;\nexport const selectShippingRegionCountryCodeIso2 = state =>\n state.shippingRegion.shippingCountry?.countryCodeIso2;\nexport const selectIsSwedishVisitor = state =>\n isSwedenCountryCodeOrUndefined(selectShippingRegionCountryCodeIso2(state));\n\nconst gpsMatchesLanguage = state => {\n const geoLocation = selectGeolocation(state);\n if (!geoLocation) {\n return true;\n }\n const country = geoLocation?.isoCode?.toLowerCase();\n const expectedLang = getLanguageFromCountryCode(country);\n const language =\n selectPreferredLanguage(state)?.languageCodeIso2?.toLowerCase() || 'sv';\n return expectedLang === language;\n};\n\nexport const selectShowLocalizationRegionPicker = state =>\n !selectIsLoggedIn(state) &&\n state.shippingRegion.localizationRegionPickerEnabled &&\n !state.shippingRegion.regionPickerDismissed &&\n !gpsMatchesLanguage(state);\n","import { PAGE_LIST_TYPES, PAGE_BULK_ACTIONS } from '../constants/list-types';\n\n/**\n * @param {string} listType\n * @param {object} item\n * @returns {object} 'Bulk Actions' available for the specific list\n */\n\nexport const listActions = (\n listType,\n memberId,\n selectedFilterBar,\n count = 0,\n t\n) => {\n const actions = {\n [PAGE_LIST_TYPES.SELLER_ACTIVE]: () => {\n switch (selectedFilterBar) {\n default:\n return {\n isCheckboxActive: item =>\n item && item.bidInformation.bidCount === 0,\n bulkCssClass: 'danger',\n label: t('myt_action_cancelListingsLabel'),\n bulkAction: PAGE_BULK_ACTIONS.ACTIVE_CANCEL,\n modal: {\n icon: 'warning',\n heading: t(\n 'myt_action_cancelListingsModalHeading',\n { count: count, itemCount: count }\n ),\n message: t(\n 'myt_action_cancelListingsModalMessage',\n { count: count }\n ),\n confirmButtonText: t(\n 'myt_action_cancelListingsModalConfirmButtonText'\n ),\n cancelButtonText: t(\n 'myt_action_cancelListingsModalCancelButtonText'\n ),\n dismissable: true\n },\n idType: 'itemId'\n };\n }\n },\n\n [PAGE_LIST_TYPES.SELLER_NOT_SOLD]: () => {\n switch (selectedFilterBar) {\n default:\n return {\n isCheckboxActive: item => {\n if (!item) {\n return false;\n }\n if (item.listing.restart.hasRestartedChild) {\n return false;\n }\n return !item.isArchived;\n },\n /*\n * @todo: confirm this\n */\n bulkCssClass: 'primary',\n label: t('myt_action_restartListingsLabel'),\n bulkAction: PAGE_BULK_ACTIONS.UNSOLD_RESTART,\n modal: {\n heading: t(\n 'myt_action_restartListingsModalHeading',\n { count: count, itemCount: count }\n ),\n dismissable: true,\n wide: true,\n confirmButtonText: t(\n 'myt_action_restartListingsModalConfirmButtonText'\n ),\n cancelButtonText: t(\n 'myt_action_restartListingsModalCancelButtonText'\n ),\n headingCSS: 'messaging-modal-title-with-line',\n messageAlignment: 'left',\n cssClass: false\n },\n idType: 'itemId'\n };\n }\n },\n\n [PAGE_LIST_TYPES.BUYER_ACTIVE_ITEMS]: () => {\n switch (selectedFilterBar) {\n case 'BuyerHidden':\n return {\n isCheckboxActive: item => {\n return (\n (item &&\n item.caller.leadingBidRemoved === true) ||\n (item.bidInformation.leadingBidder &&\n item.bidInformation.leadingBidder.id !==\n memberId)\n );\n },\n bulkCssClass: 'primary',\n label: t(\n 'myt_action_showBuyerHiddenActiveListingsLabel'\n ),\n bulkAction: PAGE_BULK_ACTIONS.BUYER_SHOW_ACTIVE,\n modal: {\n heading: t(\n 'myt_action_showBuyerHiddenActiveListingsModalHeading',\n { count: count, itemCount: count }\n ),\n message: t(\n 'myt_action_showBuyerHiddenActiveListingsModalMessage',\n { count: count }\n ),\n dismissable: true,\n wide: false,\n confirmButtonText: t(\n 'myt_action_showBuyerHiddenActiveListingsModalConfirmButtonText'\n ),\n cancelButtonText: t(\n 'myt_action_showBuyerHiddenActiveListingsModalCancelButtonText'\n ),\n icon: 'warning',\n headingCSS: 'messaging-modal-title',\n messageAlignment: 'center',\n cssClass: false\n }\n };\n case 'BuyerNotHidden':\n return {\n isCheckboxActive: item => {\n return (\n (item &&\n item.caller?.leadingBidRemoved === true) ||\n (item.bidInformation.leadingBidder &&\n (item.bidInformation.leadingBidder.id !==\n memberId ||\n item.reservePriceReached === false))\n );\n },\n bulkCssClass: 'primary',\n label: t('myt_action_hideListingsLabel'),\n bulkAction: PAGE_BULK_ACTIONS.BUYER_HIDE_ACTIVE,\n modal: {\n heading: t('myt_action_hideListingsModalHeading', {\n count: count,\n itemCount: count\n }),\n dismissable: true,\n wide: false,\n icon: 'warning',\n confirmButtonText: t(\n 'myt_action_hideListingsModalConfirmButtonText'\n ),\n cancelButtonText: t(\n 'myt_action_hideListingsModalCancelButtonText'\n ),\n message: t('myt_action_hideListingsModalMessage', {\n count: count\n }),\n headingCSS: 'messaging-modal-title',\n messageAlignment: 'center',\n cssClass: false\n }\n };\n default:\n return undefined;\n }\n },\n\n [PAGE_LIST_TYPES.BUYER_PURCHASES]: () => {\n switch (selectedFilterBar) {\n case 'AllPurchases':\n case 'BuyerNotPaid':\n return {\n isCheckboxActive: item =>\n item &&\n item.transaction &&\n item.transaction.buyerState &&\n item.transaction.buyerState.paid !== true,\n bulkCssClass: 'primary',\n label: t('myt_action_markListingsAsPaidLabel'),\n bulkAction: PAGE_BULK_ACTIONS.BUYER_MARK_PAID,\n modal: {\n heading: t(\n 'myt_action_markListingsAsPaidModalHeading',\n { count: count, itemCount: count }\n ),\n message: '',\n dismissable: true,\n wide: false,\n confirmButtonText: t(\n 'myt_action_markListingsAsPaidModalConfirmButtonText'\n ),\n cancelButtonText: t(\n 'myt_action_markListingsAsPaidModalCancelButtonText'\n ),\n icon: 'warning',\n headingCSS: 'messaging-modal-title',\n messageAlignment: 'center',\n cssClass: false\n }\n };\n case 'BuyerHidden':\n return {\n isCheckboxActive: () => {\n return true;\n // return item && (item.caller.leadingBidRemoved === true) || (item.bidInformation.leadingBidder && item.bidInformation.leadingBidder.id !== memberId) ? true : false;\n },\n bulkCssClass: 'primary',\n label: t('myt_action_showBuyerHiddenPurchasesLabel'),\n bulkAction: PAGE_BULK_ACTIONS.PURCHASES_SHOW,\n modal: {\n heading: t(\n 'myt_action_showBuyerHiddenPurchasesModalHeading',\n { count: count, itemCount: count }\n ),\n message: t(\n 'myt_action_showBuyerHiddenPurchasesModalMessage',\n { count: count }\n ),\n dismissable: true,\n wide: false,\n confirmButtonText: t(\n 'myt_action_showBuyerHiddenPurchasesModalConfirmButtonText'\n ),\n cancelButtonText: t(\n 'myt_action_showBuyerHiddenPurchasesModalCancelButtonText'\n ),\n icon: 'warning',\n headingCSS: 'messaging-modal-title',\n messageAlignment: 'center',\n cssClass: false\n }\n };\n default:\n return undefined;\n }\n },\n\n [PAGE_LIST_TYPES.BUYER_ITEMS_LOST]: () => {\n switch (selectedFilterBar) {\n case 'ItemsLostNotHidden':\n return {\n isCheckboxActive: () => true,\n bulkCssClass: 'primary',\n label: t('myt_action_hideListingsLabel'),\n bulkAction: PAGE_BULK_ACTIONS.BUYER_HIDE_ACTIVE,\n modal: {\n heading: t('myt_action_hideListingsModalHeading', {\n count: count,\n itemCount: count\n }),\n dismissable: true,\n wide: false,\n icon: 'warning',\n confirmButtonText: 'Ja',\n cancelButtonText: 'Nej',\n message: t('myt_action_hideListingsModalMessage', {\n count: count\n }),\n headingCSS: 'messaging-modal-title',\n messageAlignment: 'center',\n cssClass: false\n }\n };\n case 'ItemsLostHidden':\n return {\n isCheckboxActive: () => true,\n bulkCssClass: 'primary',\n label: t(\n 'myt_action_showBuyerHiddenActiveListingsLabel'\n ),\n bulkAction: PAGE_BULK_ACTIONS.BUYER_SHOW_ACTIVE,\n modal: {\n heading: t(\n 'myt_action_showBuyerHiddenActiveListingsModalHeading',\n { count: count, itemCount: count }\n ),\n message: t(\n 'myt_action_showBuyerHiddenActiveListingsModalMessage',\n { count: count }\n ),\n dismissable: true,\n wide: false,\n confirmButtonText: t(\n 'myt_action_showBuyerHiddenActiveListingsModalConfirmButtonText'\n ),\n cancelButtonText: t(\n 'myt_action_showBuyerHiddenActiveListingsModalCancelButtonText'\n ),\n icon: 'warning',\n headingCSS: 'messaging-modal-title',\n messageAlignment: 'center',\n cssClass: false\n }\n };\n default:\n return undefined;\n }\n },\n\n default: () => ({})\n };\n\n return actions[listType] ? actions[listType]() : actions['default']();\n};\n","import { CHANNEL_TAG_GROUPS } from 'tradera-state/push-notifications/constants';\nimport GdprSettings from 'tradera-utils/gdpr-settings';\nimport logger from 'packages/logger';\n\n/**\n * get the urban airship sdk.\n * @returns obj if null then no sdk object available\n */\nexport const getUrbanSdk = () => {\n return new Promise(resolve => {\n // script from urban airship not loaded\n if (!window.UA) {\n return resolve(null);\n }\n\n // is already loaded?\n if (window.UACache) {\n return resolve(window.UACache);\n }\n\n UA.then(async sdk => {\n if (sdk !== null && !sdk.isSupported) {\n sdk = null;\n }\n window.UACache = sdk;\n return resolve(window.UACache);\n }).catch(() => {\n // browser is most likely not supported, return null\n window.UACache = null;\n return resolve(null);\n });\n });\n};\n\nexport const getTagGroupsFromUrbanAirship = async () => {\n try {\n const sdk = await getUrbanSdk();\n if (sdk.channel === null) {\n return null;\n }\n\n // check what tag groups are active\n let tagGroups = {};\n for (const [group, groupTags] of Object.entries(CHANNEL_TAG_GROUPS)) {\n for (const tag of groupTags) {\n tagGroups[group] = sdk.channel.tags.has(tag) === true;\n if (tagGroups[group] === true) {\n break;\n }\n }\n }\n return tagGroups;\n } catch (error) {\n logger(error);\n }\n};\n\nexport const isPushEnabled = getState => {\n const {\n member,\n initData: { featureSwitches }\n } = getState();\n\n // something blocking notifications modal from being shown?\n if (\n !GdprSettings.isFunctionalEnabled() ||\n !member.isLoggedIn ||\n featureSwitches['web-push-notifications'] !== true\n ) {\n return false;\n }\n return true;\n};\n","/**\n * HOW IT WORKS\n *\n * urban airship has something called channels. A tradera member subscribes to a channel to get push notifications.\n * each channel has tags that indicate what kind of push notifications the member wants to receive. In the case of the wish list\n * reminder that particular setting subscribes the user to 2 different notifications: reminder 15 minutes before auction ends\n * and reminder 3 minutes before the auction ends. In order to be able to have 1 push notification setting that subscribes\n * to multiple push notifications at tradera we call these tag groups.\n *\n *\n * Urban airship docs:\n * https://docs.airship.com/reference/libraries/web-notify-sdk/latest/index.html\n *\n * web_version_2:\n * Version 1 of push notifications was just targetted at wish list reminders, 3 min and 15 min. When this release was done\n * the code did subscribe the user to all notifications even though the user only wanted to signup for wish list reminders.\n * Since the app push notifier only sent wishlist reminders for web push it was not a problem that the user was subscribed to all\n * kinds of notifications. In the next release when tradera wanted to offer all sorts of push notifications but wanted the users\n * to on their own sign up then we had to update all the current subscriptions. Since this is not possible via the urban airship\n * to update channels via the REST API and then see the updated reflected in the Web SDK we had to introduce the tag web_version_2\n * that indicates if the user has updated their push notification settings.\n *\n * opt-in dialog sample usage:\n * import uiActions from 'tradera-state/ui/actions';\n * import { MODAL_TYPES } from 'tradera-constants/push-notifications';\n *\n * uiActions.openNotificationOptinModal(\n * MODAL_TYPES.wishlistReminders\n * )\n *\n */\n\nimport { createSlice } from '@reduxjs/toolkit';\nimport logger from 'packages/logger';\nimport {\n CHANNEL_TAG_GROUPS,\n MODAL_TYPES\n} from 'tradera-state/push-notifications/constants';\nimport { localStore } from 'utils/storage';\nimport { STORAGE_KEYS } from 'tradera-constants/storage';\nimport {\n getUrbanSdk,\n getTagGroupsFromUrbanAirship,\n isPushEnabled\n} from './helpers';\n\nconst pushNotificationsSlice = createSlice({\n name: 'pushNotifications',\n initialState: {\n enabled: false,\n initDone: false,\n pushSupported: false,\n optedIn: false,\n tagGroups: {\n wishlistReminders: false,\n buyingListingOutbid: false,\n buyingListingWon: false,\n sellingListingFirstBid: false,\n sellingListingAllBids: false,\n sellingListingSold: false,\n sellingPaymentReceived: false\n },\n shownModals: {\n [MODAL_TYPES.wishlistReminders]: false,\n [MODAL_TYPES.default]: false,\n [MODAL_TYPES.selling]: false\n }\n },\n reducers: {\n setInitDone(state) {\n state.initDone = true;\n },\n setPushSupported(state, actions) {\n state.pushSupported = actions.payload;\n if (!state.pushSupported) {\n state.optedIn = false;\n }\n },\n setOptedInValue(state, action) {\n state.optedIn = action.payload;\n },\n setTagGroupsValue(state, action) {\n const tagGroups = action.payload;\n state.tagGroups = { ...state.tagGroups, ...tagGroups };\n },\n setShownModalTrue(state, action) {\n const modalType = action.payload;\n state.shownModals[modalType] = true;\n localStore.setItem(\n STORAGE_KEYS.WEB_PUSH_SHOWN_MODALS,\n state.shownModals\n );\n },\n setAllShownModals(state, action) {\n const shownModals = action.payload;\n state.shownModals = shownModals;\n localStore.setItem(\n STORAGE_KEYS.WEB_PUSH_SHOWN_MODALS,\n state.shownModals\n );\n },\n setEnabled(state, action) {\n const enabled = action.payload;\n state.enabled = enabled;\n }\n }\n});\n\nconst actions = pushNotificationsSlice.actions;\nexport const { setShownModalTrue } = actions;\nexport default pushNotificationsSlice.reducer;\n\n/**\n * this should be called as soon as the store is mounted\n */\nexport const init = () => async (dispatch, getState) => {\n let sdk = null;\n try {\n sdk = await getUrbanSdk();\n } catch (error) {\n // not able to init sdk\n }\n dispatch(\n actions.setPushSupported(\n sdk !== null && sdk.canRegister && sdk.isSupported\n )\n );\n\n if (sdk !== null && sdk.channel !== null) {\n dispatch(actions.setOptedInValue(sdk.channel.optedIn));\n\n // has this user been upgraded to version 2?\n if (!sdk.channel.tags.has('web_version_2')) {\n await sdk.channel.tags.set([\n 'wishlist_reminder_3_min_optin',\n 'wishlist_reminder_15_min_optin',\n 'web_version_2'\n ]);\n }\n const tagGroups = await getTagGroupsFromUrbanAirship();\n dispatch(actions.setTagGroupsValue(tagGroups));\n }\n dispatch(actions.setEnabled(sdk !== null && isPushEnabled(getState)));\n\n // load modal shown settings from local store\n const shownModals = localStore.getItem(STORAGE_KEYS.WEB_PUSH_SHOWN_MODALS);\n if (shownModals !== null) {\n dispatch(actions.setAllShownModals(shownModals));\n }\n dispatch(actions.setInitDone());\n};\n\nexport const optIn = () => async (dispatch, getState) => {\n try {\n dispatch(actions.setOptedInValue(true));\n const memberId = getState().member.memberId;\n const sdk = await getUrbanSdk();\n const channel = await sdk.register();\n await channel.namedUser.set(memberId.toString());\n return channel;\n } catch (error) {\n dispatch(actions.setOptedInValue(false));\n return null;\n }\n};\n\nexport const optOut = () => async dispatch => {\n try {\n dispatch(actions.setOptedInValue(false));\n const sdk = await getUrbanSdk();\n if (sdk !== null && sdk.channel !== null) {\n await sdk.channel.optOut();\n }\n } catch (error) {\n dispatch(actions.setOptedInValue(true));\n return null;\n }\n};\n\nconst saveTagsToUrbanAirshipAndUpdateState = async (\n channel,\n tagGroups,\n tagGroupValue,\n dispatch,\n getState\n) => {\n // check what tag groups to set and not set\n const tagGroupsToSet = { ...getState().pushNotifications.tagGroups };\n for (let t of tagGroups) {\n tagGroupsToSet[t] = tagGroupValue;\n }\n\n // get the actual tags that we want to get push notifications for and\n // register these tags in urban airship\n let channelTags = ['web_version_2'];\n for (const [group, enabled] of Object.entries(tagGroupsToSet)) {\n if (enabled) {\n channelTags = [...channelTags, ...CHANNEL_TAG_GROUPS[group]];\n }\n }\n\n dispatch(actions.setTagGroupsValue(tagGroupsToSet));\n await channel.tags.set(channelTags);\n};\n\nexport const addTagGroups = tagGroupsToAdd => async (dispatch, getState) => {\n try {\n // no sdk? then do nothing\n const sdk = await getUrbanSdk();\n if (sdk === null) {\n return;\n }\n\n let channel = sdk.channel;\n if (channel === null) {\n channel = await dispatch(optIn());\n if (channel === null) {\n dispatch(actions.setPushSupported(false));\n // seems user clicked on block notifications in the browser, abort\n return;\n }\n }\n\n saveTagsToUrbanAirshipAndUpdateState(\n channel,\n tagGroupsToAdd,\n true,\n dispatch,\n getState\n );\n } catch (error) {\n logger(error);\n }\n};\n\nexport const removeTagGroups = tagGroupsToRemove => async (\n dispatch,\n getState\n) => {\n try {\n // no sdk and no subscription? then do nothing\n const sdk = await getUrbanSdk();\n if (sdk === null || sdk.channel === null) {\n return;\n }\n saveTagsToUrbanAirshipAndUpdateState(\n sdk.channel,\n tagGroupsToRemove,\n false,\n dispatch,\n getState\n );\n } catch (error) {\n logger(error);\n }\n};\n","export default {\n INITIALIZE: 'ADS/INITIALIZE',\n SET_TCF_LOADED: 'ADS/SET_TCF_LOADED',\n SET_ADS: 'ADS/SET_ADS'\n};\n","import {\n formatQueryParams,\n stripItmFromQueryParameters,\n toQueryParameters\n} from 'tradera-utils/url';\n\nimport adsActions from './ads/actions';\nimport uiActions from './ui/actions';\nimport * as pushNotificationActions from './push-notifications/push-notifications-slice';\nimport { initializeFromInitData as initShippingRegion } from './shipping-region/actions';\nimport discoverActions from './discover/actions';\nimport { initialize as initEnvironment } from './environment/reducer';\nimport { initialize as initLanguage } from './language/reducer';\nimport { initialize as initMember } from './member/actions';\nimport { initialize as initInitData } from './init-data/actions';\nimport { initialize as initMultiCurrency } from './multi-currency/actions';\nimport itemsActions from './items/actions';\nimport pageActions from './page/actions';\n\n// Views\nimport * as viewItemActions from './views/view-item/reducer';\nimport { handleReportItemModel } from './views/report-item/actions';\nimport { initialize as initStartPage } from './views/start-page/reducer';\nimport { initialize as initTraderaShop } from './views/tradera-shop/actions';\nimport { initializeFromInitData as initializeUiFromInitData } from './ui/initial-state';\n\nexport const initializeState = initData => dispatch => {\n /**\n * handle tcf + gdpr loading\n */\n if (\n initData.featureSwitches &&\n initData.featureSwitches['quantcast-consent']\n ) {\n window.addEventListener('tcfLoaded', function() {\n dispatch(adsActions.setTcfLoaded());\n });\n } else {\n dispatch(adsActions.setTcfLoaded());\n }\n\n dispatch(initializeUiFromInitData(initData));\n dispatch(pushNotificationActions.init());\n dispatch(adsActions.initialize(initData));\n dispatch(initShippingRegion(initData));\n dispatch(discoverActions.initialize(initData));\n dispatch(initEnvironment(initData));\n dispatch(initLanguage(initData));\n dispatch(initMember(initData));\n dispatch(initInitData(initData));\n dispatch(initMultiCurrency(initData));\n dispatch(itemsActions.initialize(initData));\n dispatch(pageActions.initialize(initData));\n dispatch(initStartPage(initData));\n dispatch(initTraderaShop(initData));\n dispatch(uiActions.fetchSystemMessages());\n\n /**\n * We hydrate the store with discover results from initData\n * this will be dispatched before any rendering to reduce the time from first byte to first render.\n */\n if (initData?.discoverResponse) {\n dispatch(\n discoverActions.receiveSearchResults({\n endpoint: window.location.pathname,\n queryParams: stripItmFromQueryParameters(\n formatQueryParams(toQueryParameters(window.location.search))\n ),\n result: initData.discoverResponse\n })\n );\n } else if (initData?.item) {\n dispatch(\n viewItemActions.handleItemModel(initData.item, initData.memberId)\n );\n } else if (initData?.reportItem) {\n dispatch(handleReportItemModel(initData.reportItem));\n } else if (initData?.traderaShopProduct) {\n dispatch(\n adsActions.setAds(\n initData.traderaShopProduct.item.reduxContainer.ads\n )\n );\n }\n};\n","import actionTypes from './action-types';\n\nexport const initialize = initData => ({\n type: actionTypes.INITIALIZE,\n payload: initData\n});\n\nexport const defaultAction = data => ({\n type: actionTypes.DEFAULT_ACTION,\n payload: data\n});\n","/**\n * Count the number of system messages that should cause alerts and badges\n *\n * @param {object} systemMessages\n * @returns {number}\n */\nconst getSystemMessageAlertCount = (systemMessages = {}) => {\n return (\n (systemMessages.InvoiceOverdue ? 1 : 0) +\n (systemMessages.PayoutFailed ? 1 : 0) +\n (systemMessages.PayoutReadyBankAccountMissing ? 1 : 0) +\n (systemMessages.SwishNumberMissing ? 1 : 0) +\n (systemMessages.HyperwalletPayeeVerificationRequired ? 1 : 0)\n );\n};\n\nexport { getSystemMessageAlertCount };\n","import CONSTANTS from 'tradera-constants/state';\nimport { cache, CACHE_KEYS } from 'tradera-utils/cache';\nimport actionTypes from './action-types';\nimport { getInitialBadges } from './initial-state';\nimport { getSystemMessageAlertCount } from './helpers';\n\nconst MESSAGING_NOTIFICATIONS_CACHE_TTL = 30 * 1000;\n\nexport default (state = {}, action) => {\n const toggleHeaderSearch = () => ({\n ...state,\n showHeaderSearch:\n action.payload === undefined\n ? !state.showHeaderSearch\n : !!action.payload\n });\n\n const openGdprModal = () => ({\n ...state,\n gdpr: {\n ...state.gdpr,\n modalOpen: true\n }\n });\n\n const closeGdprModal = () => ({\n ...state,\n gdpr: {\n ...state.gdpr,\n modalOpen: false\n }\n });\n\n const openGdprSettings = () => ({\n ...state,\n gdpr: {\n ...state.gdpr,\n settingsOpen: true\n }\n });\n\n const closeGdprSettings = () => ({\n ...state,\n gdpr: {\n ...state.gdpr,\n settingsOpen: false\n }\n });\n\n const openQuickView = () => {\n const {\n itemIds = state.quickView.itemIds,\n itemId = state.quickView.itemId\n } = action.payload;\n return {\n ...state,\n quickView: {\n ...state.quickView,\n open: CONSTANTS.MODAL.OPEN,\n itemIds: itemIds,\n currentItem: itemId\n }\n };\n };\n\n const closeQuickView = () => {\n return {\n ...state,\n quickView: {\n ...state.quickView,\n open: CONSTANTS.MODAL.CLOSED\n }\n };\n };\n\n const loadingQuickView = () => {\n return {\n ...state,\n quickView: {\n ...state.quickView,\n loading: action.payload\n }\n };\n };\n\n const openVideoModal = () => {\n const { videoUrl, title, pageType } = action.payload;\n return {\n ...state,\n videoModal: {\n ...state.videoModal,\n open: CONSTANTS.MODAL.OPEN,\n videoUrl: videoUrl,\n title: title,\n pageType: pageType\n }\n };\n };\n\n const closeVideoModal = () => {\n return {\n ...state,\n videoModal: {\n ...state.videoModal,\n open: CONSTANTS.MODAL.CLOSED\n }\n };\n };\n\n const openYoutubeVideoModal = () => {\n const { videoId, title, pageType } = action.payload;\n return {\n ...state,\n youtubeVideoModal: {\n ...state.youtubeVideoModal,\n open: CONSTANTS.MODAL.OPEN,\n videoId: videoId,\n title: title,\n pageType: pageType\n }\n };\n };\n\n const closeYoutubeVideoModal = () => {\n return {\n ...state,\n youtubeVideoModal: {\n ...state.youtubeVideoModal,\n open: CONSTANTS.MODAL.CLOSED\n }\n };\n };\n /*\n Changes made to messaging modal will affect My Tradera as well!\n TODO - test this!\n */\n const openMessagingModal = () => {\n const {\n title = state.messagingModal.title,\n src = state.messagingModal.src,\n participating = state.messagingModal.participating,\n recipientId = state.messagingModal.recipientId,\n item = state.messagingModal.item\n } = action.payload;\n return {\n ...state,\n messagingModal: {\n open: CONSTANTS.MODAL.OPEN,\n title: title,\n src: src,\n participating: participating,\n recipientId: recipientId,\n item: item\n }\n };\n };\n\n const closeMessagingModal = () => {\n return {\n ...state,\n messagingModal: {\n open: CONSTANTS.MODAL.CLOSED\n }\n };\n };\n\n const openNotificationOptinModal = () => {\n const {\n modalType,\n gaLabel,\n title,\n description,\n tagGroups\n } = action.payload;\n return {\n ...state,\n notificationOptinModal: {\n open: CONSTANTS.MODAL.OPEN,\n modalType,\n gaLabel,\n title,\n description,\n tagGroups\n }\n };\n };\n\n const closeNotificationOptinModal = () => {\n return {\n ...state,\n notificationOptinModal: {\n open: CONSTANTS.MODAL.CLOSED\n }\n };\n };\n\n const openModal = () => {\n const { modalId, data } = action.payload;\n return {\n ...state,\n modals: {\n currentModal: modalId,\n currentModalData: data\n }\n };\n };\n\n const closeModal = () => {\n return {\n ...state,\n modals: {\n currentModal: null,\n currentModalData: null\n }\n };\n };\n\n const itemLayout = () => {\n if (state.itemLayout === action.payload) {\n return state;\n } else {\n return {\n ...state,\n itemLayout: action.payload\n };\n }\n };\n\n const siteLayout = () => {\n if (state.siteLayout === action.payload) {\n return state;\n } else {\n return {\n ...state,\n siteLayout: action.payload\n };\n }\n };\n\n const updateSystemMessages = () => {\n return {\n ...state,\n systemMessages: {\n ...state.systemMessages,\n ...action.payload\n },\n badges: {\n ...state.badges,\n system: getSystemMessageAlertCount(action.payload)\n }\n };\n };\n\n const updateMessagingNotifications = () => {\n cache.write(\n CACHE_KEYS.MESSAGING_BADGES,\n action.payload,\n MESSAGING_NOTIFICATIONS_CACHE_TTL\n );\n return {\n ...state,\n badges: {\n ...state.badges,\n messaging: action.payload\n }\n };\n };\n\n const openProfileMenu = () => {\n const { payload } = action;\n return {\n ...state,\n profileMenu: {\n open: CONSTANTS.MODAL.OPEN,\n redirectUrl: payload || false\n }\n };\n };\n\n const closeProfileMenu = () => {\n return {\n ...state,\n profileMenu: {\n ...state.profileMenu,\n open: CONSTANTS.MODAL.CLOSED\n }\n };\n };\n\n const openCategoryDropdownMenu = () => {\n return {\n ...state,\n categoryDropdownMenu: {\n open: CONSTANTS.MODAL.OPEN\n }\n };\n };\n\n const closeCategoryDropdownMenu = () => {\n return {\n ...state,\n categoryDropdownMenu: {\n open: CONSTANTS.MODAL.CLOSED\n }\n };\n };\n\n const openSearchForm = () => {\n return {\n ...state,\n showSearchForm: true\n };\n };\n\n const closeSearchForm = () => {\n return {\n ...state,\n showSearchForm: false\n };\n };\n\n const logOut = () => {\n return {\n ...state,\n badges: getInitialBadges()\n };\n };\n\n const openItemSettings = () => {\n const { payload } = action;\n return {\n ...state,\n itemSettings: {\n open: CONSTANTS.MODAL.OPEN,\n ...payload\n }\n };\n };\n\n const closeItemSettings = () => {\n return {\n ...state,\n itemSettings: {\n open: CONSTANTS.MODAL.CLOSED,\n item: {}\n }\n };\n };\n\n const openShareModal = () => ({\n ...state,\n shareModal: {\n isOpen: true,\n settings: action.payload\n }\n });\n\n const initialize = () => {\n const { payload } = action;\n return {\n ...payload\n };\n };\n\n const closeShareModal = () => ({\n ...state,\n shareModal: {\n isOpen: false,\n settings: null\n }\n });\n\n const def = () => state;\n\n const reducers = {\n [actionTypes.INITIALIZE]: initialize,\n [actionTypes.TOGGLE_HEADER_SEARCH]: toggleHeaderSearch,\n [actionTypes.OPEN_GDPR_MODAL]: openGdprModal,\n [actionTypes.CLOSE_GDPR_MODAL]: closeGdprModal,\n [actionTypes.OPEN_GDPR_SETTINGS]: openGdprSettings,\n [actionTypes.CLOSE_GDPR_SETTINGS]: closeGdprSettings,\n [actionTypes.OPEN_QUICK_VIEW]: openQuickView,\n [actionTypes.CLOSE_QUICK_VIEW]: closeQuickView,\n [actionTypes.LOADING_QUICK_VIEW]: loadingQuickView,\n [actionTypes.OPEN_VIDEO_MODAL]: openVideoModal,\n [actionTypes.CLOSE_VIDEO_MODAL]: closeVideoModal,\n [actionTypes.OPEN_YOUTUBE_VIDEO_MODAL]: openYoutubeVideoModal,\n [actionTypes.CLOSE_YOUTUBE_VIDEO_MODAL]: closeYoutubeVideoModal,\n [actionTypes.OPEN_MESSAGING_MODAL]: openMessagingModal,\n [actionTypes.CLOSE_MESSAGING_MODAL]: closeMessagingModal,\n [actionTypes.OPEN_NOTIFICATION_OPTIN_MODAL]: openNotificationOptinModal,\n [actionTypes.CLOSE_NOTIFICATION_OPTIN_MODAL]: closeNotificationOptinModal,\n [actionTypes.ITEM_LAYOUT]: itemLayout,\n [actionTypes.UPDATE_SYSTEM_MESSAGES]: updateSystemMessages,\n [actionTypes.UPDATE_MESSAGING_NOTIFICATIONS]: updateMessagingNotifications,\n [actionTypes.OPEN_PROFILE_MENU]: openProfileMenu,\n [actionTypes.CLOSE_PROFILE_MENU]: closeProfileMenu,\n [actionTypes.OPEN_CATEGORY_DROPDOWN_MENU]: openCategoryDropdownMenu,\n [actionTypes.CLOSE_CATEGORY_DROPDOWN_MENU]: closeCategoryDropdownMenu,\n [actionTypes.OPEN_SEARCH_FORM]: openSearchForm,\n [actionTypes.CLOSE_SEARCH_FORM]: closeSearchForm,\n [actionTypes.OPEN_ITEM_SETTINGS]: openItemSettings,\n [actionTypes.CLOSE_ITEM_SETTINGS]: closeItemSettings,\n [actionTypes.SITE_LAYOUT]: siteLayout,\n [actionTypes.LOG_OUT]: logOut,\n [actionTypes.OPEN_MODAL]: openModal,\n [actionTypes.CLOSE_MODAL]: closeModal,\n [actionTypes.OPEN_SHARE_MODAL]: openShareModal,\n [actionTypes.CLOSE_SHARE_MODAL]: closeShareModal\n };\n\n return !action || !action.type || !reducers[action.type]\n ? def()\n : reducers[action.type]();\n};\n","import React, { useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useMediaQuery } from 'react-responsive';\n\nimport { BREAKPOINT_SIZES, BREAKPOINTS } from 'tradera-constants/breakpoints';\nimport { getCurrentBreakpoint } from 'tradera-utils/breakpoints';\nimport { getWindow } from 'tradera-utils/window';\n\n/**\n * Conditionally render children depending on matching breakpoint\n *\n * \"is\" prop has precedence over \"upTo\" and \"downTo\", which can be used together to define a range\n *\n * @param {boolean} props.desktop - LG and above\n * @param {boolean} props.tablet - MD\n * @param {boolean} props.mobile - SM and below\n * @param {string} props.is - Exact breakpoint match\n * @param {string} props.upTo - Up to (inclusive) breakpoint match\n * @param {string} props.downTo - Down to (inclusive) breakpoint match\n * @param props.children\n * @returns {children|null}\n */\nconst Breakpoint = props => {\n const { desktop, tablet, mobile, children } = props;\n let { is, upTo, downTo } = props;\n let mediaQuery = {};\n if (desktop || tablet || mobile) {\n if (desktop) downTo = BREAKPOINTS.LG;\n else if (tablet) is = BREAKPOINTS.MD;\n else if (mobile) upTo = BREAKPOINTS.SM;\n }\n if (is) {\n mediaQuery.minWidth = BREAKPOINT_SIZES[is].min;\n mediaQuery.maxWidth = BREAKPOINT_SIZES[is].max;\n } else {\n if (upTo) {\n mediaQuery.maxWidth = BREAKPOINT_SIZES[upTo].max;\n } else if (downTo) {\n mediaQuery.minWidth = BREAKPOINT_SIZES[downTo].min;\n }\n }\n const isActive = useMediaQuery(mediaQuery);\n return isActive ? children : null;\n};\nBreakpoint.propTypes = {\n desktop: PropTypes.bool,\n tablet: PropTypes.bool,\n mobile: PropTypes.bool,\n is: PropTypes.oneOf(Object.keys(BREAKPOINTS)),\n upTo: PropTypes.oneOf(Object.keys(BREAKPOINTS)),\n downTo: PropTypes.oneOf(Object.keys(BREAKPOINTS))\n};\n\n/**\n * Returns breakpoint id when it changes\n *\n * @returns {string|null}\n */\nfunction useBreakpoint() {\n const [breakpoint, setBreakpoint] = useState(\n getCurrentBreakpoint(getWindow().innerWidth)\n );\n useEffect(() => {\n const handleResize = event =>\n setBreakpoint(getCurrentBreakpoint(event.target.innerWidth));\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n return breakpoint;\n}\n\nconst withBreakpoint = WrappedComponent => {\n function WithBreakpoint(props) {\n const currentBreakpoint = useBreakpoint();\n return (\n