{"version":3,"sources":["redux/hook/productHooks.js","redux/hook/priceHooks.js","redux/hook/compareHooks.js","lib/helper/googleAnalyticsHelper.jsx","components/CompareOverview/styles.js","components/CompareOverview/CompareOverview.jsx"],"names":["useProduct","id","dispatch","useDispatch","lang","useLanguage","useEffect","params","requestProduct","product","useSelector","state","selectById","useLoadPrices","originalId","useProducts","ids","key","arguments","length","undefined","products","requestProducts","selectAllModtekProducts","selectAllRelatedProducts","selectAll","map","item","useFilteredProducts","filters","pagination","promise","requestFilteredProducts","sendGAEventProductSearch","abort","filter","lastProductFetch","includes","startsWith","useProductsLoading","loading","authToken","useUserAuthToken","isAuthorized","useIsUserAuthorized","data","prices","useGetPricesQuery","skip","usePrice","useCompareCount","_useSelector$length","compareProduct","productIds","useCompareProducts","useIsCompareOverviewVisible","showOverview","useIsOnComparePage","onComparePage","ReactGA","event","category","action","label","sendGAEventProductSearchViaLink","sendGAEventSignedIn","sendGAEventSignInUnauthorized","sendGAEventMaintenanceSignIn","sendGAEventErrorOnSignIn","makeStyles","theme","root","backgroundColor","palette","background","paper","padding","spacing","avatarImg","width","height","objectFit","clearAllListItem","margin","clearAllPrimary","fontSize","clearAllSecondary","ProductEntryListItem","_ref2","_prod$name","_prod$originalId","prod","classes","useStyles","_jsxs","ListItem","children","_jsx","ListItemAvatar","Avatar","img","slotProps","src","alt","Localization","isComparing","variant","ListItemText","primary","name","productIsNotAvailable","secondary","IconButton","onClick","onCloseClick","removeFromCompare","CloseIcon","CompareOverview","compareCount","compareProds","visible","isOnComparePage","language","isMobile","useMediaQuery","breakpoints","down","mobileBreakpoint","onClearClick","removeAllFromCompare","hideCompare","setShowCompareOverview","Popper","open","transition","placement","style","position","bottom","right","top","left","_ref","TransitionProps","Fade","timeout","Paper","className","elevation","Box","display","justifyContent","marginBottom","Minimize","color","Grid","container","gap","Typography","compareProducts","NavLink","to","end","toComparison","List","clearAllProducts","endComparison","DeleteIcon","zIndex","showCompare","CompareIcon"],"mappings":"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","file":"static/js/42.ceaaf02e.chunk.js","sourcesContent":["import { useLoadPrices } from \"./priceHooks\"\r\nimport { sendGAEventProductSearch } from \"../../lib/helper/googleAnalyticsHelper\"\r\nimport { useLanguage } from \"../../lib/hooks/languageHooks\"\r\nimport {\r\n    selectAll, selectAllModtekProducts, selectAllRelatedProducts, selectById\r\n} from \"../adapter/productAdapter\"\r\nimport { requestProduct, requestProducts, requestFilteredProducts } from \"../thunk/productThunk\"\r\nimport { useDispatch, useSelector } from \"react-redux\"\r\nimport { useEffect } from \"react\"\r\n\r\nconst useProduct = id => {\r\n    const dispatch = useDispatch()\r\n    const lang = useLanguage()\r\n\r\n    useEffect(() => {\r\n        const params = { id, lang }\r\n        dispatch(requestProduct(params))\r\n    }, [id, lang, dispatch])\r\n\r\n    const product = useSelector(state => selectById(state, `${lang}-${id}`))\r\n    useLoadPrices(\r\n        product?.originalId\r\n            ? [product.originalId]\r\n            : []\r\n    )\r\n\r\n    return product\r\n}\r\n\r\nconst useProducts = (ids, key = null) => {\r\n    const dispatch = useDispatch()//\r\n    const lang = useLanguage()\r\n\r\n    useEffect(() => {\r\n        const params = { ids, lang, key }\r\n        dispatch(requestProducts(params))\r\n    }, [ids, lang, dispatch, key])\r\n\r\n    let products;\r\n\r\n    switch (key) {\r\n        case \"modtek\":\r\n            products = useSelector(state => selectAllModtekProducts(state) || [])\r\n            break\r\n        case \"related\":\r\n            products = useSelector(state => selectAllRelatedProducts(state) || [])\r\n            break\r\n        default:\r\n            products = useSelector(state => selectAll(state))\r\n    }\r\n\r\n    useLoadPrices(ids.map(item => item))\r\n\r\n    return products\r\n}\r\n\r\n/**\r\n * Fetches and returns the products that matched the given filters.\r\n * @param {*} filters A search query object. (Refer to the backend model\r\n *  for exact values. Accepts the structure specified in the searchReducer)\r\n * @param {*} pagination A pagination object containing offset and limit.\r\n * @returns The language specific products that matched the search query.\r\n */\r\nconst useFilteredProducts = (filters, pagination) => {\r\n    const dispatch = useDispatch()\r\n    const lang = useLanguage()\r\n\r\n    useEffect(() => {\r\n        const promise = dispatch(requestFilteredProducts({ filters, pagination, lang }))\r\n        sendGAEventProductSearch()\r\n\r\n        return () => {\r\n            promise.abort()\r\n        }\r\n    }, [filters, pagination, lang, dispatch])\r\n\r\n    const products = useSelector(\r\n        state => (\r\n            selectAll(state)\r\n                .filter(\r\n                    product => state.product.lastProductFetch.includes(product.originalId)\r\n                ).filter(\r\n                    product => product.id.startsWith(lang)\r\n                )\r\n        )\r\n    )\r\n    useLoadPrices(products.map(product => product.originalId))\r\n    return products\r\n}\r\n\r\nconst useLastFetchedProductProperties = () => useSelector(\r\n    state => state.product.lastFetchProperties\r\n)\r\n\r\nconst useProductsLoading = () => useSelector(state => state.product.loading)\r\n\r\nconst useLastFetchItemCount = () => useSelector(state => state.product.lastFetchItemCount)\r\n\r\nexport {\r\n    useProduct,\r\n    useProducts,\r\n    useFilteredProducts,\r\n    useLastFetchedProductProperties,\r\n    useLastFetchItemCount,\r\n    useProductsLoading\r\n}\r\n","import { useIsUserAuthorized, useUserAuthToken } from \"./userHooks\"\r\nimport { selectById } from \"../adapter/priceAdapter\"\r\nimport { useGetPricesQuery } from \"../services/priceApi\"\r\nimport { useSelector } from \"react-redux\"\r\n\r\nconst usePrice = id => useSelector(state => selectById(state, id))\r\n\r\n/**\r\n * Use this hook to load the prices into the price adapter.\r\n * @param {*} ids The ids of the products we fetch the price for.\r\n * @returns The prices for the specified products.\r\n */\r\nexport const useLoadPrices = ids => {\r\n    const authToken = useUserAuthToken()\r\n    const isAuthorized = useIsUserAuthorized()\r\n    const { data: prices } = useGetPricesQuery(\r\n        {\r\n            authToken,\r\n            ids\r\n        },\r\n        { skip: !isAuthorized || ids.length <= 0 }\r\n    )\r\n    return prices\r\n}\r\n\r\nexport default usePrice\r\n","import { useSelector } from \"react-redux\";\r\n\r\nconst useCompareCount = () => useSelector(state => state.compareProduct.productIds).length ?? 0\r\n\r\nconst useCompareProducts = () => useSelector(state => state.compareProduct.productIds)\r\n\r\nconst useIsCompareOverviewVisible = () => useSelector(state => state.compareProduct.showOverview)\r\n\r\nconst useIsOnComparePage = () => useSelector(state => state.compareProduct.onComparePage)\r\n\r\nexport {\r\n    useCompareCount,\r\n    useCompareProducts,\r\n    useIsCompareOverviewVisible,\r\n    useIsOnComparePage\r\n};\r\n","import { eraseCookie } from \"../../redux/cookieStorage\"\r\nimport ReactGA from \"react-ga4\"\r\n\r\nexport const startGoogleAnalytics = () => {\r\n    if (process.env.REACT_APP_GA_TRACKING_ID) {\r\n        ReactGA.initialize(\r\n            process.env.REACT_APP_GA_TRACKING_ID\r\n            // ,{\r\n            //     debug: true,\r\n            //     // titleCase: false,\r\n            //     gaOptions: {\r\n            //         // userId: 123,\r\n            //         siteSpeedSampleRate: 100\r\n            //     }\r\n            // }\r\n        )\r\n    }\r\n}\r\n\r\nexport const stopGoogleAnalytics = () => {\r\n    const cookieIdName = process.env.REACT_APP_GA_TRACKING_ID.replace(/.*?\\-/, \"\")\r\n    eraseCookie(`_ga_${cookieIdName}`)\r\n    eraseCookie(\"_ga\")\r\n    eraseCookie(\"_gat\")\r\n    eraseCookie(\"_gid\")\r\n}\r\n\r\nexport const sendGAEventProductSearch = () => {\r\n    ReactGA.event(\r\n        {\r\n            category: \"product\",\r\n            action: \"search\",\r\n            label: \"Searched on products\"\r\n        }\r\n    )\r\n}\r\n\r\nexport const sendGAEventProductSearchViaLink = () => {\r\n    ReactGA.event(\r\n        {\r\n            category: \"product\",\r\n            action: \"search-using-link\",\r\n            label: \"Searched on products using a link\"\r\n        }\r\n    )\r\n}\r\n\r\nexport const sendGAEventSignedIn = () => {\r\n    ReactGA.event(\r\n        {\r\n            category: \"user\",\r\n            action: \"sign-in\",\r\n            label: \"Signed in\"\r\n        }\r\n    )\r\n}\r\n\r\nexport const sendGAEventSignInUnauthorized = () => {\r\n    ReactGA.event(\r\n        {\r\n            category: \"user\",\r\n            action: \"sign-in-unauthorized\",\r\n            label: \"Sign in failed due to being unauthorized\"\r\n        }\r\n    )\r\n}\r\n\r\nexport const sendGAEventMaintenanceSignIn = () => {\r\n    ReactGA.event(\r\n        {\r\n            category: \"user\",\r\n            action: \"sign-in-blocked-by-maintenance\",\r\n            label: \"Blocked sign in attempt due to maintenance\"\r\n        }\r\n    )\r\n}\r\n\r\nexport const sendGAEventErrorOnSignIn = () => {\r\n    ReactGA.event(\r\n        {\r\n            category: \"user\",\r\n            action: \"sign-in-error\",\r\n            label: \"Error on signing in\"\r\n        }\r\n    )\r\n}\r\n","import { makeStyles } from \"@mui/styles\"\r\n\r\nexport default makeStyles(theme => ({\r\n    root: {\r\n        backgroundColor: theme.palette.background.paper\r\n    },\r\n    paper: {\r\n        padding: theme.spacing(2)\r\n    },\r\n    avatarImg: {\r\n        width: \"100%\",\r\n        height: \"auto\",\r\n        objectFit: \"initial\"\r\n    },\r\n    clearAllListItem: {\r\n        margin: 0\r\n    },\r\n    clearAllPrimary: {\r\n        fontSize: \"0.8rem\"\r\n    },\r\n    clearAllSecondary: {\r\n        fontSize: \"0.7rem\"\r\n    }\r\n}))\r\n","import useStyles from \"./styles\"\r\nimport {\r\n    useCompareCount, useCompareProducts, useIsCompareOverviewVisible, useIsOnComparePage\r\n} from \"../../redux/hook/compareHooks\"\r\nimport { useProduct } from \"../../redux/hook/productHooks\"\r\nimport { strings as Localization } from \"../../lib/Localization\"\r\nimport { removeFromCompare, setShowCompareOverview, removeAllFromCompare } from \"../../redux/compareProductsReducer\"\r\nimport { useLanguage } from \"../../lib/hooks/languageHooks\"\r\nimport { mobileBreakpoint } from \"../../lib/helper/viewportHelper\"\r\nimport theme from \"../../theme\"\r\nimport React, { useEffect } from \"react\"\r\nimport {\r\n    Popper, Fade, Paper, List,\r\n    ListItemAvatar, Avatar, ListItemText,\r\n    ListItem, Typography, IconButton, Grid, useMediaQuery, Box\r\n} from \"@mui/material\"\r\nimport CloseIcon from \"@mui/icons-material/Close\"\r\nimport { useDispatch } from \"react-redux\"\r\nimport { NavLink } from \"react-router-dom\"\r\nimport DeleteIcon from \"@mui/icons-material/Delete\"\r\nimport Minimize from \"@mui/icons-material/Minimize\"\r\nimport CompareIcon from \"@mui/icons-material/Compare\"\r\n\r\nconst CompareOverview = () => {\r\n    const compareCount = useCompareCount()\r\n    const compareProds = useCompareProducts()\r\n    const classes = useStyles()\r\n    const visible = useIsCompareOverviewVisible()\r\n    const isOnComparePage = useIsOnComparePage()\r\n    const language = useLanguage()\r\n    const dispatch = useDispatch()\r\n    const isMobile = useMediaQuery(theme.breakpoints.down(mobileBreakpoint))\r\n\r\n    const onClearClick = () => {\r\n        dispatch(removeAllFromCompare())\r\n    }\r\n\r\n    const hideCompare = () => {\r\n        dispatch(setShowCompareOverview(false))\r\n    }\r\n\r\n    const showCompare = () => {\r\n        dispatch(setShowCompareOverview(true))\r\n    }\r\n\r\n    useEffect(() => {\r\n        // If number of compare prods change and if we have any\r\n        // products to compare, unhide the popup.\r\n        dispatch(setShowCompareOverview(compareCount > 0))\r\n    }, [compareCount])\r\n\r\n    return (\r\n        visible\r\n            ? (\r\n                <Popper\r\n                    open={visible && !isOnComparePage}\r\n                    transition\r\n                    placement=\"bottom\"\r\n                    style={{\r\n                        position: \"fixed\",\r\n                        bottom: isMobile ? 0 : 25,\r\n                        right: isMobile ? 0 : 25,\r\n                        top: isMobile ? \"\" : \"unset\",\r\n                        left: isMobile ? \"\" : \"unset\",\r\n                        width: isMobile ? \"100vw\" : \"\"\r\n                    }}\r\n                >\r\n                    {({ TransitionProps }) => (\r\n                        <Fade {...TransitionProps} timeout={350}>\r\n                            <Paper className={classes.paper} elevation={3}>\r\n                                <Box style={{ display: isMobile ? \"flex\" : \"none\", justifyContent: \"flex-end\", marginBottom: \"10px\" }}>\r\n                                    <Minimize onClick={hideCompare} style={{ color: \"gray\" }} />\r\n                                </Box>\r\n                                <Grid container justifyContent=\"space-between\" gap=\"16px\">\r\n                                    <Grid item>\r\n                                        <Typography>{Localization.compareProducts}</Typography>\r\n                                    </Grid>\r\n                                    <Grid item>\r\n                                        <Typography>\r\n                                            <NavLink style={{ color: \"#2D2D2D\" }} to={`/${language}/compare`} end>\r\n                                                {Localization.toComparison}\r\n                                            </NavLink>\r\n                                        </Typography>\r\n                                    </Grid>\r\n                                </Grid>\r\n\r\n                                <List className={classes.root}>\r\n                                    {compareProds.map(prod => (\r\n                                        <ProductEntryListItem\r\n                                            key={`product-entry-list-${prod}`}\r\n                                            id={prod}\r\n                                        />\r\n                                    ))}\r\n                                    <ListItem>\r\n                                        <ListItemText\r\n                                            primary={Localization.clearAllProducts}\r\n                                            secondary={Localization.endComparison}\r\n                                            classes={{\r\n                                                root: classes.clearAllListItem,\r\n                                                primary: classes.clearAllPrimary,\r\n                                                secondary: classes.clearAllSecondary\r\n                                            }}\r\n                                        />\r\n                                        <IconButton onClick={onClearClick}>\r\n                                            <DeleteIcon />\r\n                                        </IconButton>\r\n                                    </ListItem>\r\n                                </List>\r\n                            </Paper>\r\n                        </Fade>\r\n                    )}\r\n                </Popper>\r\n            )\r\n            : (\r\n                (isMobile && compareCount > 0) && (\r\n                    <Paper\r\n                        elevation={2}\r\n                        style={{\r\n                            padding: \"8px\",\r\n                            position: \"fixed\",\r\n                            bottom: 10,\r\n                            right: 10,\r\n                            zIndex: 99\r\n                        }}\r\n                        onClick={showCompare}\r\n                    >\r\n                        <CompareIcon style={{ color: \"gray\" }} />\r\n                    </Paper>\r\n                )\r\n            )\r\n    )\r\n}\r\n\r\nconst ProductEntryListItem = ({ id }) => {\r\n    const prod = useProduct(id)\r\n    const dispatch = useDispatch()\r\n    const classes = useStyles()\r\n\r\n    const onCloseClick = () => {\r\n        dispatch(removeFromCompare(id))\r\n    }\r\n\r\n    return (\r\n        <ListItem>\r\n            <ListItemAvatar>\r\n                <Avatar\r\n                    classes={{\r\n                        img: classes.avatarImg\r\n                    }}\r\n                    slotProps={{\r\n                        img: {\r\n                            loading: \"lazy\"\r\n                        }\r\n                    }}\r\n                    src={`${process.env.REACT_APP_IMAGE_URL}w120/${id}.jpg`}\r\n                    // Todo: src={`${process.env.REACT_APP_IMAGE_URL}${id}.jpg`}\r\n                    alt={`\r\n                        Brodit\r\n                        ${Localization.product}-${prod?.originalId}\r\n                        ${Localization.isComparing}\r\n                    `}\r\n                    variant=\"square\"\r\n                />\r\n            </ListItemAvatar>\r\n            <ListItemText\r\n                primary={prod?.name ?? Localization.productIsNotAvailable}\r\n                secondary={prod?.originalId ?? id}\r\n            />\r\n            <IconButton onClick={onCloseClick}>\r\n                <CloseIcon />\r\n            </IconButton>\r\n        </ListItem>\r\n    )\r\n}\r\n\r\nexport default CompareOverview\r\n"],"sourceRoot":""}