\r\n \r\n {busyText}\r\n \r\n
\r\n \r\n );\r\n }\r\n return ;\r\n};\r\n\r\nexport default Busy;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { useQuery } from \"@apollo/react-hooks\";\r\nimport { useSelector } from \"react-redux\";\r\nimport gql from \"graphql-tag\";\r\nimport { STATE_CULTURE, STATE_CURRENCY } from \"../../common/state\";\r\nimport { getInitialFromUntil } from \"../../common/util\";\r\nimport Busy from \"./busy\";\r\n\r\nexport const DataContext = React.createContext();\r\nconst { from, until } = getInitialFromUntil();\r\n\r\nconst ArticleQuery = gql`\r\n query ArticleQuery(\r\n $currency: String\r\n $culture: String\r\n $posId: Int\r\n $from: DateTime\r\n $until: DateTime\r\n ) {\r\n tags(currency: $currency, culture: $culture, posId: $posId) {\r\n name\r\n articles {\r\n imageFilename\r\n id\r\n plu\r\n name\r\n inStock\r\n priceInclVat\r\n price {\r\n amountInclVat\r\n }\r\n translation {\r\n culture\r\n name\r\n description\r\n }\r\n isPersonalTicket\r\n isProduct\r\n isGiftCertificate\r\n overrideStartDate\r\n ticketHolders {\r\n categoryName\r\n categoryId\r\n maximumNumber\r\n defaultNumber\r\n }\r\n accessConditions {\r\n start\r\n stop\r\n dayOfWeeks\r\n }\r\n }\r\n }\r\n allotments(\r\n currency: $currency\r\n culture: $culture\r\n posId: $posId\r\n from: $from\r\n until: $until\r\n ) {\r\n id\r\n description\r\n imageFileName\r\n translation {\r\n culture\r\n name\r\n description\r\n }\r\n occasions {\r\n time\r\n remaining\r\n }\r\n articles {\r\n id\r\n plu\r\n name\r\n priceInclVat\r\n price {\r\n amountInclVat\r\n }\r\n }\r\n }\r\n articles(culture: $culture, posId: $posId) {\r\n imageFilename\r\n id\r\n plu\r\n inStock\r\n name\r\n priceInclVat\r\n price {\r\n amountInclVat\r\n }\r\n translation {\r\n culture\r\n name\r\n description\r\n }\r\n isPersonalTicket\r\n isProduct\r\n isGiftCertificate\r\n ticketHolders {\r\n categoryName\r\n categoryId\r\n maximumNumber\r\n defaultNumber\r\n }\r\n }\r\n cultures {\r\n name\r\n description\r\n }\r\n currencies {\r\n name\r\n }\r\n }\r\n`;\r\n\r\nconst DataProvider = ({ children }) => {\r\n const setEventFilterLogger = (data) => {\r\n setEventFilter(data);\r\n console.log(\"--> Set event date filter to:\", data);\r\n };\r\n\r\n const [eventFilter, setEventFilter] = useState();\r\n const { config, culture, currency } = useSelector((state) => ({\r\n config: state.config,\r\n culture: state.cookies[STATE_CULTURE],\r\n currency: state.cookies[STATE_CURRENCY],\r\n }));\r\n const { data, loading, refetch } = useQuery(ArticleQuery, {\r\n variables: {\r\n posId: config.posId,\r\n currency,\r\n culture,\r\n from,\r\n until,\r\n },\r\n fetchPolicy: \"network-only\",\r\n });\r\n useEffect(() => {\r\n if (!loading) {\r\n //Set default value to empty. Will be overridden if navigating months in all-events.\r\n setEventFilterLogger([]);\r\n }\r\n }, [data, loading]);\r\n\r\n if (loading) return \r\n {config.logoLink ? (\r\n \r\n 
\r\n \r\n ) : (\r\n \r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default Logo;\r\n","import React, { useContext } from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { Link } from \"@reach/router\";\r\nimport clsx from \"clsx\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport UserIcon from \"@material-ui/icons/AccountCircle\";\r\nimport { Context } from \"../../context\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n // userButton: {\r\n // \"@media(max-width: 667px)\": {\r\n // display: \"none\",\r\n // },\r\n // },\r\n // loginButton: {\r\n // marginLeft: \"4px\",\r\n // color: \"inherit\",\r\n // \"@media(max-width: 667px)\": {\r\n // display: \"none\",\r\n // },\r\n // },\r\n}));\r\n\r\nconst Login = ({ changeBackground }) => {\r\n const classes = useStyles();\r\n const { handleLogin } = useContext(Context);\r\n const { config, auth, language } = useSelector((state) => ({\r\n auth: state.oidc.user !== null && !state.oidc.user.expired,\r\n language: state.language,\r\n config: state.config,\r\n }));\r\n return auth ? (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n case \"en-US\":\r\n case \"en-GB\":\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n case \"de-DE\":\r\n return (\r\n \r\n \r\n
\r\n );\r\n case \"fr-FR\":\r\n return (\r\n \r\n \r\n
\r\n );\r\n case \"nn-NO\":\r\n case \"nb-NO\":\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n case \"fi-FI\":\r\n return (\r\n \r\n \r\n
\r\n );\r\n case \"da-DK\":\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n case \"it-IT\":\r\n return (\r\n \r\n \r\n
\r\n );\r\n case \"es-ES\":\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n\r\n default:\r\n throw new Error(`wrong culture for flag: ${culture}`);\r\n }\r\n};\r\n\r\nexport default Flag;\r\n","import React, { useContext } from \"react\";\r\nimport { useSelector, useDispatch } from \"react-redux\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport Flag from \"./flag\";\r\nimport { setCulture, STATE_CULTURE } from \"../../common/state\";\r\nimport { DataContext } from \"../common/dataProvider\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n container: {},\r\n button: {\r\n marginRight: \"8px\",\r\n minWidth: \"100px\",\r\n },\r\n buttonText: { marginLeft: \"8px\" },\r\n active: {\r\n \"& svg\": {\r\n opacity: 0.6,\r\n },\r\n },\r\n}));\r\n\r\nconst Cultures = () => {\r\n const { data, refetch } = useContext(DataContext);\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n const handleSetCulture = (culture, config) => {\r\n dispatch(setCulture(culture, config));\r\n refetch();\r\n };\r\n const { language, config, culture } = useSelector((state) => ({\r\n config: state.config,\r\n language: state.language,\r\n culture: state.cookies[STATE_CULTURE],\r\n }));\r\n const cultures = data?.cultures;\r\n const active = culture;\r\n if (!cultures) return null;\r\n return (\r\n \r\n \r\n {language.Culture}\r\n \r\n {cultures.map((c, i) => {\r\n const isActive = c.name === active;\r\n return (\r\n handleSetCulture(c.name, config)}\r\n className={classes.button}\r\n classes={{ disabled: classes.active }}\r\n disabled={isActive}\r\n data-testid={`button_${c.name}`}\r\n >\r\n
\r\n );\r\n};\r\n\r\nexport default Cultures;\r\n","import React, { useMemo, useContext } from \"react\";\r\nimport { useSelector, useDispatch } from \"react-redux\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport { getAllowedCurrencies } from \"./util\";\r\nimport { setCurrency, STATE_CURRENCY } from \"../../common/state\";\r\nimport { DataContext } from \"../common/dataProvider\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n container: {},\r\n button: {\r\n marginRight: \"8px\",\r\n minWidth: \"100px\",\r\n },\r\n}));\r\n\r\nconst Currencies = (props) => {\r\n const { data, refetch } = useContext(DataContext);\r\n const classes = useStyles();\r\n const dispatch = useDispatch();\r\n const handleSetCurrency = (currency) => {\r\n dispatch(setCurrency(currency));\r\n refetch();\r\n };\r\n const { currency, language, config } = useSelector((state) => ({\r\n currency: state.cookies[STATE_CURRENCY],\r\n language: state.language,\r\n config: state.config,\r\n }));\r\n const { allowedCurrencies } = config;\r\n const currencies = data?.currencies;\r\n const filteredCurrencies = useMemo(\r\n () => getAllowedCurrencies(currencies, allowedCurrencies),\r\n [currencies, allowedCurrencies]\r\n );\r\n\r\n if (!filteredCurrencies) return null;\r\n\r\n return (\r\n \r\n \r\n {language.Currency}\r\n \r\n {filteredCurrencies.map((c, i) => {\r\n const isActive = c.name === currency;\r\n return (\r\n handleSetCurrency(c.name)}\r\n className={classes.button}\r\n disabled={isActive}\r\n data-testid={`button_${c.name}`}\r\n >\r\n {c.name}\r\n \r\n );\r\n })}\r\n
\r\n );\r\n};\r\n\r\nexport default Currencies;\r\n","export const getAllowedCurrencies = (\r\n avaliableCurrencies,\r\n allowedCurrencies\r\n) => {\r\n let matchedCurrencies = [];\r\n let filteredCurrencies = [];\r\n\r\n // return available currencies if no allowed currencies\r\n if (!allowedCurrencies || allowedCurrencies.length < 1)\r\n return avaliableCurrencies;\r\n\r\n // match allowed currencies to available currencies\r\n avaliableCurrencies.forEach((c) => {\r\n if (allowedCurrencies.includes(c.name)) {\r\n matchedCurrencies = [...matchedCurrencies, c.name];\r\n }\r\n });\r\n\r\n // filter out allowed and matched currencies\r\n matchedCurrencies.forEach((curr) => {\r\n filteredCurrencies = [\r\n ...filteredCurrencies,\r\n avaliableCurrencies.find((c) => c.name === curr),\r\n ];\r\n });\r\n\r\n // return filtered currencies\r\n return filteredCurrencies;\r\n};\r\n","import React from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n version: {},\r\n versionText: {\r\n fontSize: \"0.8125rem\",\r\n color: theme.app.secondaryColor,\r\n },\r\n}));\r\n\r\nconst Version = () => {\r\n const classes = useStyles();\r\n const {\r\n config: { version },\r\n } = useSelector((state) => ({\r\n config: state.config,\r\n }));\r\n return (\r\n \r\n \r\n Version\r\n \r\n \r\n Entry Event Sweden AB - {version}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Version;\r\n","import React, { useState } from \"react\";\r\nimport clsx from \"clsx\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport ButtonBase from \"@material-ui/core/ButtonBase\";\r\nimport Dialog from \"@material-ui/core/Dialog\";\r\nimport DialogTitle from \"@material-ui/core/DialogTitle\";\r\nimport DialogContent from \"@material-ui/core/DialogContent\";\r\nimport DialogActions from \"@material-ui/core/DialogActions\";\r\nimport Divider from \"@material-ui/core/Divider\";\r\nimport Cultures from \"./cultures\";\r\nimport Currencies from \"./currencies\";\r\nimport Version from \"./version\";\r\nimport Flag from \"./flag\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { STATE_CULTURE } from \"../../common/state\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n settingsButton: {\r\n },\r\n divider: { margin: \"16px 0px\" },\r\n}));\r\n\r\nconst Settings = (props) => {\r\n const [settingsOpen, setSettingsOpen] = useState(false);\r\n const { language, culture } = useSelector((state) => ({\r\n language: state.language,\r\n culture: state.cookies[STATE_CULTURE],\r\n }));\r\n const classes = useStyles();\r\n return (\r\n <>\r\n \r\n
\r\n \n {language?.FromCost} {filter[0].openPriceValues[0]}{\" \"}\n {language?.CurrencyAbbreviation}\n
\n );\n }\n if (\n filter[0]?.openPriceValues &&\n filter[0]?.openPriceValues.length === 0 &&\n config?.showSearchPrice\n ) {\n return{language?.OpenPrice}
;\n }\n }\n };\n\n const variants = {\n hidden: { opacity: 0 },\n show: {\n opacity: 1,\n transition: {\n staggerChildren: 0.05,\n },\n },\n };\n\n const item = {\n hidden: {\n opacity: 0,\n x: -15,\n },\n show: {\n opacity: 1,\n x: 0,\n transition: {\n duration: 0.25,\n },\n },\n };\n\n const getCalendarBookingLink = (item) => {\n let articleBooking = config?.articleBookingConfigurator;\n let eventCalendar = config?.ticketConfigurator;\n\n const eventFilter =\n eventCalendar &&\n eventCalendar.reduce((a, b) => {\n let filter = b?.tickets?.filter((el) =>\n el?.articleId?.includes(item?.id)\n );\n if (filter && filter?.length > 0) {\n a.push(b);\n }\n return a;\n }, []);\n\n const articleFilter =\n articleBooking &&\n articleBooking.reduce((a, b) => {\n const filter = b?.tickets.filter((el) =>\n el?.articleId.includes(item?.id)\n );\n if (filter && filter.length > 0) {\n a.push(b);\n }\n return a;\n }, []);\n if (articleFilter?.length > 0) {\n return `/ticketshop/booking/${articleFilter[0].slug}`;\n }\n\n if (eventFilter?.length > 0) {\n return `/ticketshop/tickets/${eventFilter[0].slug}`;\n }\n };\n\n return (\n\n
\n \n ) : (\n \"\"\n )}\n\n {toggleAllotment &&\n el !== null &&\n (!el?.isProduct || el?.isModification === true) ? (\n {\n setToggleSearch(false);\n setSearchValue(\"\");\n if (el?.plu) {\n navigate(`/ticketshop/products/${el?.plu}`);\n }\n if (el?.isEventCalendar) {\n localStorage.setItem(\"selected\", el?.name);\n navigate(`/ticketshop/tickets/${el?.slug}`);\n }\n if (el?.isArticleBooking) {\n localStorage.setItem(\"selected\", el?.name);\n navigate(`/ticketshop/booking/${el?.slug}`);\n }\n\n if (getCalendarBookingLink(el)) {\n let translation = el?.translation?.filter(\n (el) => el.culture === \"sv-SE\"\n )[0]?.name;\n\n if (translation) {\n localStorage.setItem(\"selected\", el?.name);\n }\n navigate(getCalendarBookingLink(el));\n } else if (\n !el.plu &&\n !el.isEventCalendar &&\n !el.isArticleBooking &&\n !getCalendarBookingLink(el)\n ) {\n navigate(\n `/ticketshop/events/${slugify(el?.description)}`\n );\n }\n }}\n aria-label={getDescription(\n el?.translation ? el?.translation : el?.translations\n )}\n >\n {/*el.isEventCalendar navigate*/}\n
\n \n ) : (\n \"\"\n )}\n \n ))\n ) : (\n
\n \n );\n};\n\nexport default SearchResult;\n","import React, { useState, useEffect, useContext, useRef } from \"react\";\r\nimport { BiSearch } from \"react-icons/bi\";\r\nimport { STATE_CULTURE } from \"../../../common/state\";\r\nimport useClickDetector from \"./hooks/useClickDetector\";\r\nimport \"./search.css\";\r\nimport { useSelector } from \"react-redux\";\r\nimport SearchInput from \"./SearchInput\";\r\nimport SearchResult from \"./SearchResult\";\r\nimport { DataContext } from \"../dataProvider\";\r\nimport { useFocusTrap } from \"@mantine/hooks\";\r\n\r\nconst SearchV2 = ({ changeBackground, mobile }) => {\r\n const [toggleSearch, setToggleSearch] = useState(false);\r\n const { config, language, culture } = useSelector((state) => ({\r\n config: state.config,\r\n language: state.language,\r\n culture: state.cookies[STATE_CULTURE],\r\n }));\r\n const { data } = useContext(DataContext);\r\n const [allotments, setAllotments] = useState([]);\r\n const [articles, setArticles] = useState([]);\r\n const [searchValue, setSearchValue] = useState(\"\");\r\n const [loading, setLoading] = useState(false);\r\n\r\n const focusTrapRef = useFocusTrap(toggleSearch ? true : false);\r\n const ref = useRef(null);\r\n useClickDetector(ref, toggleSearch, setToggleSearch, setSearchValue);\r\n\r\n useEffect(() => {\r\n setAllotments(data?.allotments);\r\n setArticles(data?.articles);\r\n }, [data]);\r\n\r\n const calcHeight = () => {\r\n let headerHeight = config?.headerHeight;\r\n let calc = headerHeight / 3.5 + \"px\";\r\n return calc;\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \n {searchValue &&\n searchValue.length > 0 &&\n (allotments.length > 0 || articles.length > 0) ? (\n
\n \n {newResult && newResult.length > 0 ? (\n
\n ) : (\n \"\"\n )}\n {language?.SearchCategories}
\n ) : (\n{language?.NotFound}
\n )}\n\n\n {newResult &&\n newResult.find(\n (el) => !el?.isProduct || el?.isModification === true\n ) ? (\n setToggleAllotment(!toggleAllotment)}\n >\n {language?.Tickets}\n\n {\n setToggleArticle(!toggleArticle);\n }}\n >\n {language?.Products}\n
\n - \n {newResult &&\n newResult.length > 0 &&\n !loadingResults &&\n searchValue.length > 0 && (\n
\n
\n \n
\n\n {config?.showSearchPrice &&\n parseInt(el.priceInclVat) > 0 ? (\n \n {getName(\n el?.translation\n ? el?.translation\n : el?.translations\n )}\n
\n\n {getDescription(\n el?.translation\n ? el?.translation\n : el?.translations\n )}\n
\n\n {el.priceInclVat}\n {/* {language?.CurrencyAbbreviation} */}\n
\n ) : (\n \"\"\n )}\n\n \n ) : (\n \"\"\n )}\n\n {toggleAllotment &&\n el !== null &&\n (!el?.isProduct || el?.isModification === true) ? (\n
\n {el.plu & (el?.isModification === true) ? (\n
\n \n
\n \n {getName(\n el?.translation\n ? el?.translation\n : el?.translations\n )}\n
\n\n {el?.isEventCalendar || el?.isArticleBooking\n ? getMarkdownDescription(el)\n : getDescription(\n el?.translation\n ? el?.translation\n : el?.translations\n )}\n
\n {config?.showSearchPrice &&\n parseInt(el.priceInclVat) > 0 ? (\n{el?.priceInclVat}
\n ) : (\n \"\"\n )}\n {giftCard(el)}\n\n \n ) : (\n \"\"\n )}\n \n ))\n ) : (\n
loading
\n )}\n \n )}\n \n\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default SearchV2;\r\n","import { createStyles, Indicator } from \"@mantine/core\";\nimport React, { useContext } from \"react\";\nimport { useSelector } from \"react-redux\";\nimport { Context, OPEN_CART } from \"../../context\";\nimport { SaleContext } from \"../common/saleProvider\";\n\nconst useStyles = createStyles({\n wrapper: {\n display: \"flex\",\n alignItems: \"center\",\n marginLeft: \"0.7rem\",\n marginRight: \"0.9rem\",\n paddingTop: \"0.3rem\",\n },\n button: {\n padding: 0,\n margin: 0,\n backgroundColor: \"transparent\",\n border: \"none\",\n cursor: \"pointer\",\n },\n shoppingBag: {\n minWidth: \"1.6rem\",\n minHeight: \"1.6rem\",\n // color: \"var(--header-link-color-light)\",\n color: \"inherit\",\n \"@media screen and (max-width: 768px)\": {},\n strokeWidth: \"2px\",\n },\n indicator: {\n fontWeight: \"500\",\n },\n});\n\nconst CartV2 = ({ changeBackground }) => {\n const { language } = useSelector((state) => ({\n language: state.language,\n }));\n const {\n state: { sale },\n } = useContext(SaleContext);\n const { classes } = useStyles();\n const { dispatch } = useContext(Context);\n\n const openCart = () => {\n dispatch({ type: OPEN_CART });\n };\n\n return (\n \n \n openCart()}\n aria-label={language.OpenCart}\n >\n {sale?.itemQuantity > 0 ? (\n \n \n
\n );\n};\n\nexport default CartV2;\n","import React from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\n\r\nconst LogoV2 = ({ changeBackground }) => {\r\n const { config } = useSelector((state) => ({\r\n config: state.config,\r\n }));\r\n\r\n const logoUrl = `${process.env.PUBLIC_URL}/ee-static/shop/${\r\n config.shopName\r\n }/Images/${config.logoImg ? config.logoImg : \"logo.svg\"}`;\r\n\r\n const logoWhite = `${process.env.PUBLIC_URL}/ee-static/shop/${\r\n config.shopName\r\n }/Images/${\r\n config.logoImgWhite\r\n ? config.logoImgWhite\r\n : config?.logoImg\r\n ? config?.logoImg\r\n : \"logo.svg\"\r\n }`;\r\n return (\r\n - \n
- \n
\n \n {el.subLinks.map((ele) => (\n \n {!ele.disabled && getLink(ele, \"dropdown\")}\n \n ))}\n
\n ) : (\n \"\"\n )}\n - \n
\r\n {props.children}\r\n
\r\n );\r\n}","import React, { useEffect } from \"react\";\r\n\r\nconst useClickDetector = (ref, open, setOpen) => {\r\n useEffect(() => {\r\n const handleClick = (event) => {\r\n if(ref?.current && ref?.current.contains(event.target)) {\r\n if(open) {\r\n setOpen(false)\r\n }\r\n }\r\n };\r\n document.addEventListener(\"mousedown\", handleClick);\r\n return () => {\r\n document.removeEventListener(\"mousedown\", handleClick);\r\n };\r\n }, [ref, open]);\r\n};\r\n\r\nexport default useClickDetector;\r\n","import React, { useEffect, useRef } from \"react\";\nimport { AnimatePresence, AnimateSharedLayout, motion } from \"framer-motion\";\nimport NavContentV2 from \"./NavContentV2\";\nimport Settings from \"../../Settings\";\nimport Login from \"../login\";\nimport FocusTrap from \"./hooks/useFocusTrap\";\nimport useClickDetector from \"./hooks/useClickDetector\";\nimport { useLocation } from \"@reach/router\";\n\nconst MobileMenuOverlay = ({\n open,\n setOpen,\n config,\n language,\n changeBackground,\n culture,\n}) => {\n const ref = useRef(null);\n useClickDetector(ref, open, setOpen);\n useEffect(() => {});\n const location = useLocation();\n\n const variants = {\n show: {\n opacity: 1,\n x: \"0%\",\n y: \"0\",\n transition: {\n delay: 0.1,\n duration: 0.25,\n ease: \"easeInOut\",\n },\n },\n hidden: {\n opacity: 0,\n x: \"-100%\",\n y: \"0\",\n transition: {\n delay: 0.25,\n duration: 0.4,\n ease: \"easeInOut\",\n },\n },\n };\n\n const overlayVariant = {\n show: {\n opacity: 1,\n transition: {\n delay: 0,\n duration: 0.2,\n ease: \"easeInOut\",\n },\n },\n hidden: {\n opacity: 0,\n transition: {\n delay: 0.3,\n duration: 0.5,\n ease: \"easeInOut\",\n },\n },\n };\n\n useEffect(() => {\n setOpen(false);\n }, [location.pathname]);\n\n return (\n \n
\n {config?.showLogin ? (\n \n
\n ) : (\n \"\"\n )}\n \n
\n \n
\n {!open ? (\n <>\n \n
\n \n );\n};\n\nexport default MobileMenuV2;\n","import React from \"react\";\r\nimport SearchV2 from \"../../common/Search/SearchV2\";\r\nimport Settings from \"../../Settings\";\r\nimport Cart from \"../cart\";\r\nimport CartV2 from \"../CartV2\";\r\nimport CountdownContainer from \"../CountdownContainer\";\r\nimport Login from \"../login\";\r\nimport LogoV2 from \"./LogoV2\";\r\nimport MobileMenuV2 from \"./MobileMenuV2\";\r\nimport NavContentV2 from \"./NavContentV2\";\r\nimport \"./styles.css\";\r\n\r\nconst NavV2 = React.memo(({ changeBackground, config, language, culture }) => {\r\n const headerStyling = () => {\r\n if (config?.useFixedHeader) {\r\n return \"headerFixed\";\r\n } else {\r\n return \"headerDefault\";\r\n }\r\n };\r\n const headerHeight = () => {\r\n if (config?.headerHeight) {\r\n return config?.headerHeight + \"px\";\r\n } else {\r\n return \"70px\";\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n {config?.useTransparentHeader ? (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Nav;\r\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\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport React from \"react\";\n\nvar _ref2 = /*#__PURE__*/React.createElement(\"style\", {\n type: \"text/css\"\n}, \"\\r\\n\\t.st0{fill:#CCCCCC;}\\r\\n\\t.st1{fill:none;}\\r\\n\");\n\nvar _ref3 = /*#__PURE__*/React.createElement(\"g\", {\n id: \"photo\"\n}, /*#__PURE__*/React.createElement(\"circle\", {\n className: \"st0\",\n cx: 200.18,\n cy: 201.09,\n r: 26.7\n}), /*#__PURE__*/React.createElement(\"path\", {\n className: \"st0\",\n d: \"M175.18,117.79l-15.3,16.7h-26.4c-9.2,0-16.7,7.5-16.7,16.7v100c0,9.2,7.5,16.7,16.7,16.7h133.3 c9.2,0,16.7-7.5,16.7-16.7v-100.1c0-9.2-7.5-16.7-16.7-16.7h-26.4l-15.2-16.6H175.18z M200.18,242.79c-23,0-41.7-18.7-41.7-41.7 s18.7-41.7,41.7-41.7s41.7,18.7,41.7,41.7S223.18,242.79,200.18,242.79z\"\n}), /*#__PURE__*/React.createElement(\"path\", {\n className: \"st1\",\n d: \"M100.18,101.09h200v200h-200V101.09z\"\n}));\n\nvar SvgPlaceholder = function SvgPlaceholder(_ref) {\n var svgRef = _ref.svgRef,\n title = _ref.title,\n props = _objectWithoutProperties(_ref, [\"svgRef\", \"title\"]);\n\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n id: \"Lager_1\",\n x: \"0px\",\n y: \"0px\",\n viewBox: \"0 0 400 400\",\n style: {\n enableBackground: \"new 0 0 400 400\"\n },\n xmlSpace: \"preserve\",\n ref: svgRef\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", null, title) : null, _ref2, _ref3);\n};\n\nvar ForwardRef = React.forwardRef(function (props, ref) {\n return /*#__PURE__*/React.createElement(SvgPlaceholder, _extends({\n svgRef: ref\n }, props));\n});\nexport default __webpack_public_path__ + \"static/media/placeholder.700bb90f.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useContext, useState, useEffect } from \"react\";\r\nimport { useNavigate } from \"@reach/router\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport Collapse from \"@material-ui/core/Collapse\";\r\nimport { Context, CLOSE_CART, CART_ARTICLE_REMOVE } from \"../../context\";\r\nimport AddedProduct from \"./addedProduct\";\r\nimport { SaleContext } from \"../common/saleProvider\";\r\nimport { useSelector } from \"react-redux\";\r\nimport DrawerCart from \"../Drawer\";\r\n\r\nconst useStyles = makeStyles({\r\n cartContainer: {\r\n position: \"fixed\",\r\n top: \"var(--header-height)\",\r\n right: \"0px\",\r\n zIndex: 1200,\r\n },\r\n paper: {\r\n width: \"100%\",\r\n },\r\n});\r\n\r\nlet cartTimeout;\r\nconst Cart = (props) => {\r\n const classes = useStyles();\r\n const [prevQuantity, setPrevQuantity] = useState(null);\r\n const [abortClose, setAbortClose] = useState(false);\r\n const navigate = useNavigate();\r\n const {\r\n state: { cartOpen },\r\n dispatch,\r\n } = useContext(Context);\r\n const { config } = useSelector((state) => ({\r\n config: state.config,\r\n }));\r\n const saleContext = useContext(SaleContext);\r\n\r\n const { sale } = saleContext.state;\r\n useEffect(() => {\r\n if (cartOpen && config?.timeoutDrawer) {\r\n if (abortClose) {\r\n window.clearTimeout(cartTimeout);\r\n } else {\r\n cartTimeout = window.setTimeout(() => {\r\n dispatch({ type: CLOSE_CART });\r\n }, 5000);\r\n }\r\n }\r\n }, [cartOpen, abortClose, dispatch]);\r\n\r\n if (!sale) return ;\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n {config.useLandingPage && !config.homeLink && (\r\n 0\r\n ? language.All_Products\r\n : language.GroupNav.Products\r\n }\r\n to={`${process.env.PUBLIC_URL}/all-products`}\r\n value={`${process.env.PUBLIC_URL}/all-products`}\r\n />\r\n )}\r\n {data?.allotments?.length > 0 && useAllEvents && (\r\n 0\r\n ? language.All_Events\r\n : language.GroupNav.Events\r\n }\r\n to={`${process.env.PUBLIC_URL}/all-events`}\r\n value={`${process.env.PUBLIC_URL}/all-events`}\r\n />\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Left;\r\n","import * as React from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport clsx from \"clsx\";\r\nimport axios from \"axios\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport Markdown from \"react-markdown\";\r\nimport { STATE_CULTURE } from \"../../common/state\";\r\n\r\nlet source;\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n right: {\r\n position: \"relative\",\r\n \"@media(max-width: 1000px)\": {\r\n display: \"none\",\r\n },\r\n },\r\n}));\r\n\r\nconst Right = (props) => {\r\n const classes = useStyles();\r\n const [text, setText] = React.useState(\"\");\r\n const { config, culture } = useSelector((state) => ({\r\n config: state.config,\r\n culture: state.cookies[STATE_CULTURE],\r\n }));\r\n React.useEffect(() => {\r\n let CancelToken = axios.CancelToken;\r\n source = CancelToken.source();\r\n axios\r\n .get(\r\n `${process.env.PUBLIC_URL}/${config.descriptionFolderUrl}/right.${culture}.md`,\r\n {\r\n cancelToken: source.token,\r\n }\r\n )\r\n .then((res) => setText(res.data));\r\n return () => source.cancel(\"Component Is Unmounting\");\r\n }, [culture, config.descriptionFolderUrl]);\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Right;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport axios from \"axios\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { STATE_CULTURE } from \"../../common/state\";\r\nimport Markdown from \"react-markdown\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport clsx from \"clsx\";\r\nimport PageLayout from \"../../components/Styles/PageLayout\";\r\nimport PageContent from \"../../components/Styles/PageContent\";\r\nimport Cart from \"../../components/cart/cartPage\";\r\n\r\nlet source;\r\n\r\nconst cartBelowStyles = makeStyles((theme) => ({\r\n pageContent: {\r\n color: theme.palette.color,\r\n background: theme.palette.background.paper,\r\n marginTop: \"16px\",\r\n padding: \"16px\",\r\n borderRadius: \"4px\",\r\n \"@media(max-width: 667px)\": {\r\n padding: \"0px\",\r\n },\r\n },\r\n}));\r\n\r\nconst CartPage = () => {\r\n const cartBelowClasses = cartBelowStyles();\r\n\r\n const [text, setText] = useState(\"\");\r\n const { config, culture } = useSelector((state) => ({\r\n config: state.config,\r\n language: state.language,\r\n culture: state.cookies[STATE_CULTURE],\r\n }));\r\n\r\n useEffect(() => {\r\n source = axios.CancelToken.source();\r\n axios\r\n .get(\r\n `${process.env.PUBLIC_URL}/${config.descriptionFolderUrl}/cart-below.${culture}.md`,\r\n {\r\n cancelToken: source.token,\r\n }\r\n )\r\n .then((res) => setText(res.data))\r\n .catch(() => {\r\n // Left blank\r\n });\r\n return () => source.cancel(\"Cart Page Is Unmounting\");\r\n }, [culture, config.descriptionFolderUrl]);\r\n\r\n return (\r\n \r\n \r\n {language.Added_To_Cart}\r\n \r\n {article.imageUri ? (\r\n \r\n {article.translatedName}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AddedProduct;\r\n","import {\n clearSaleId,\n setSaleId,\n STATE_CULTURE,\n STATE_CURRENCY,\n STATE_SALE_ID,\n} from \"./state\";\nimport uuid from \"uuid\";\n\nconst callApi = (command, method, payload, message, then, cb) => {\n return {\n type: \"@EE/API_CALL\",\n method,\n command,\n payload,\n message,\n then,\n cb,\n };\n};\n\nconst saleState = (id, isActive) => {\n return {\n type: \"@EE/SALE_STATE\",\n id,\n isActive,\n };\n};\n\nexport const saleMiddleware =\n ({ apiUri, posId }) =>\n ({ dispatch, getState }) =>\n (next) =>\n (action) => {\n if (action.type === \"@EE/API_CALL\" && !action.promise) {\n const state = getState();\n const sale = state.sale;\n const language = state.language;\n const id = sale.id || state.cookies[STATE_SALE_ID] || uuid.v1();\n const uri = `${apiUri}/sales/${id}/${action.command}`;\n const isFormData = action.payload instanceof FormData;\n var headers = new Headers();\n var user = state.oidc.user;\n console.log(uri);\n\n if (user && user.access_token) {\n headers.append(\"Authorization\", \"Bearer \" + user.access_token);\n }\n\n if (!isFormData) {\n headers.set(\"Content-Type\", \"application/json; charset=utf-8\");\n }\n\n const execute = () => {\n return fetch(uri, {\n method: action.method,\n body: isFormData\n ? action.payload\n : action.payload\n ? JSON.stringify(action.payload)\n : null,\n headers: headers,\n }).then((response) => {\n if (response.status === 406) {\n response.text().then((msg) => {\n action.cb(response.status, language[msg] || msg);\n if (msg === \"Sale is cancelled\") {\n console.log(\"Sale has been cancelled - forcing reload\");\n window.location.reload();\n }\n });\n } else if (response.status >= 400) {\n response.text().then((msg) => {\n action.cb(response.status, language[msg] || msg);\n });\n } else {\n action.cb && action.cb(response.status, \"ok\");\n }\n\n return response;\n });\n };\n\n const promise = sale.isActive\n ? execute()\n : fetch(`${apiUri}/pos/${posId}/sales/${id}`, {\n method: \"POST\",\n }).then((response) => {\n if (response.status !== 201 && response.status !== 200) {\n return new Promise((resolve, reject) =>\n reject(\"Could not create or activate sale!\")\n );\n } else {\n dispatch(setSaleId(id));\n dispatch(saleState(id, true));\n return execute();\n }\n });\n\n dispatch({\n type: action.type,\n promise,\n then: action.then,\n });\n } else {\n next(action);\n }\n };\n\nexport const validateSaleId = (api, reset) => (dispatch, getState) => {\n //Ensures current saleid is an open sale, otherwise clears from cookies\n var id = getState().cookies[STATE_SALE_ID];\n if (!id) {\n return;\n }\n\n const promise = fetch(`${api}/sales/${id}`).then((response) => {\n if (response.status === 410) {\n dispatch(clearSaleId());\n reset();\n }\n });\n\n return {\n type: \"@EE/VALIDATE_SALE_ID\",\n promise,\n };\n};\n\nexport const add = (model, cb) => {\n return callApi(\"articles\", \"POST\", model, \"Article_Added\", null, cb);\n};\n\nexport const addBatch = (model, cb) => {\n return callApi(\"articles/batch\", \"POST\", model, \"Article_Added\", null, cb);\n};\n\nexport const addArticle = (saleData, then) => {\n return (dispatch) => dispatch(add(saleData, then));\n};\n\nexport const addArticleBatch = (saleData, then) => {\n return (dispatch) => dispatch(addBatch(saleData, then));\n};\n\nexport const addAllotment = (saleData, then) => {\n return (dispatch) => {\n dispatch(add(saleData, then));\n };\n};\n\nexport const addMod = (model, cb) => {\n return callApi(\"modifications\", \"POST\", model, \"Article_Added\", null, cb);\n};\n\nexport const addModification = (model, cb) => (dispatch) =>\n dispatch(addMod(model, cb));\n\nexport const addFunds = (mod, cb) => {\n return (dispatch) => dispatch(addMod(mod, cb));\n};\n\nexport const setQuantity = (key, quantity) => {\n return callApi(`articles/${key}/quantity/${quantity}`, \"PUT\");\n};\n\nexport const removeArticle = (key, cb) => {\n return callApi(\"articles/\" + key, \"DELETE\", null, \"Article_Removed\", cb);\n};\n\nexport const discount = (id, info) => {\n return callApi(\"discount\", \"POST\", {\n id,\n info,\n });\n};\n\nexport const increaseQuantity = (key, cb) => {\n return callApi(\n `articles/${key}/increasequantity`,\n \"POST\",\n null,\n null,\n null,\n cb\n );\n};\n\nexport const decreaseQuantity = (key, cb) => {\n return callApi(\n `articles/${key}/decreasequantity`,\n \"POST\",\n null,\n null,\n null,\n cb\n );\n};\n\nexport const checkout = () => (dispatch, getState) => {\n var state = getState();\n var payload = {\n currency: state.cookies[STATE_CURRENCY],\n culture: state.cookies[STATE_CULTURE],\n };\n\n dispatch(\n callApi(\"checkout\", \"POST\", payload, null, (r) => {\n if (r.status === 202) {\n const url = r.headers.get(\"Location\");\n console.log(\"url\", url);\n window.location.assign(url);\n }\n })\n );\n};\n\nconst nextVersion = () => {\n return new Date().getTime();\n};\n\nexport const saleReducer = (state = { version: nextVersion() }, action) => {\n switch (action.type) {\n case \"@EE/API_CALL\": {\n var s = {\n ...state,\n version:\n action.readyState === \"success\" ? nextVersion() : state.version,\n };\n\n return s;\n }\n case \"@EE/SALE_STATE\": {\n return {\n id: action.id,\n isActive: action.isActive,\n isError: action.isError,\n error: action.error,\n version: nextVersion(),\n };\n }\n\n default:\n return state;\n }\n};\n\nexport const addToCartTracking = (currency, products) => {\n if (window.dataLayer) {\n window.dataLayer.push({\n event: \"add_to_cart\",\n ecommerce: {\n currencyCode: currency,\n add: {\n products: products,\n },\n },\n });\n }\n};\n\nexport const removeFromCartTracking = (currency, products, totalPrice) => {\n if (window.dataLayer) {\n window.dataLayer.push({\n event: \"remove_from_cart\",\n ecommerce: {\n currency,\n value: totalPrice,\n items: products,\n },\n });\n }\n};\n","import { ActionIcon, createStyles, Group, NumberInput } from \"@mantine/core\";\nimport React from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { decreaseQuantity, increaseQuantity } from \"../../common/sale\";\nimport { HiMinusSm, HiPlusSm } from \"react-icons/hi\";\n\nconst useStyles = createStyles({\n actionButton: {\n borderRadius: \"50%\",\n border: \"none\",\n },\n actionWrapper: {\n backgroundColor: \"#F3F3F4\",\n padding: \"0rem 0.38rem\",\n borderRadius: \"1.25rem\",\n width: \"fit-content\",\n },\n});\nconst QuantityInput = ({ inStock, item, id, quantity, name }) => {\n const { language } = useSelector((state) => ({\n language: state.language,\n }));\n const { classes } = useStyles();\n const rdxDispatch = useDispatch();\n\n const increase = () => {\n rdxDispatch(increaseQuantity(id));\n };\n\n const decrease = () => {\n rdxDispatch(decreaseQuantity(id));\n };\n return (\n \r\n Subtotal: \r\n {sumInclVat} \r\n
\r\n \n \n decrease()}\n aria-label={`${name} ${language.DecreaseQuantity}`}\n >\n increase()}\n >\n
\n );\n};\n\nexport default QuantityInput;\n","import { createStyles } from \"@mantine/core\";\r\nimport React from \"react\";\r\n\r\nconst useStyles = createStyles((theme) => ({\r\n wrapper: {\r\n display: \"flex\",\r\n },\r\n trashIcon: {\r\n color: \"var(--header-link-color-dark)\",\r\n strokeWidth: \"2px\",\r\n stroke: \"var(--header-link-color-dark)\",\r\n width: \"2rem\"\r\n },\r\n}));\r\nconst TrashIcon = () => {\r\n const { classes } = useStyles();\r\n return (\r\n \n
\n \n \n
\n \n \n \n
\n );\n};\n\nexport default DrawerItem;\n","import { createStyles } from \"@mantine/core\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport DrawerItem from \"./DrawerItem\";\nimport { motion } from \"framer-motion\";\n\nconst useStyles = createStyles({\n wrapper: {\n marginTop: \"1rem\",\n },\n});\n\nconst DrawerList = ({ sale }) => {\n const [items, itemsSet] = useState([]);\n const { classes } = useStyles();\n const shippingArticle = useCallback(() => {\n const filter = sale.items.filter(\n (el) => el.type === \"shipping_fee\" || el.type === \"service_fee\"\n );\n if (filter) {\n const filterOutShipping = sale.items.filter((el) =>\n filter.every((ele) => el.key !== ele.key)\n );\n return itemsSet(filterOutShipping);\n } else {\n return itemsSet(sale.items);\n }\n }, [sale]);\n\n useEffect(() => {\n shippingArticle();\n }, [sale.items]);\n\n return (\n <>\n {items && (\n \n {loading &&
\n \n \n \n \n \n \n \n
\n \n remove()}\n >\n
\n \n
\n {loading && (\n {getName()}
\n {item?.ticketOwners?.[0]?.name && (\n\n {item?.ticketOwners?.[0]?.name}\n
\n )}\n\n {language.Removed}\n
\n )}\n \n
\n \n {item.totalPriceInclVat}\n
\n\n
\n )}\n \n );\n};\n\nexport default DrawerList;\n","import React from \"react\";\r\n\r\nconst AlertIcon = () => {\r\n return (\r\n \n
\n \n {items.length > 0 &&\n items.map((el, i) => (\n \n
\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AlertIcon;\r\n","import { Alert, createStyles } from \"@mantine/core\";\nimport React, { useEffect, useState } from \"react\";\nimport AlertIcon from \"./AlertIcon\";\nimport axios from \"axios\";\nimport { useSelector } from \"react-redux\";\nimport { STATE_CULTURE } from \"../../common/state\";\nimport Markdown from \"react-markdown\";\n\nconst useStyles = createStyles({\n alert: {\n margin: \"1rem 0\",\n paddingBottom: \"1rem\",\n },\n alertIconWrapper: {\n \".mantine-Alert-icon\": {\n pointerEvents: \"none\",\n },\n },\n});\nconst DrawerAlert = () => {\n const [alertMsg, alertMsgSet] = useState(null);\n const { language, config, culture } = useSelector((state) => ({\n language: state.language,\n config: state.config,\n culture: state.cookies[STATE_CULTURE],\n }));\n const { classes } = useStyles();\n\n useEffect(() => {\n axios\n .get(\n `${process.env.PUBLIC_URL}/ee-static/shop/${config.shopName}/Texts/cart-below.${culture}.md`\n )\n .then((data) => alertMsgSet(data.data))\n .catch((error) => console.log(error));\n }, []);\n return (\n alertMsg && (\n \n
\n )\n );\n};\n\nexport default DrawerAlert;\n","import { Button, createStyles } from \"@mantine/core\";\nimport React, { useCallback, useContext, useEffect, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport ReactGA from \"react-ga\";\nimport {\n STATE_CULTURE,\n STATE_CURRENCY,\n STATE_SALE_ID,\n} from \"../../common/state\";\nimport { isItReal, pixelCheckoutData } from \"../../common/util\";\nimport { checkout } from \"../../common/sale\";\nimport { CLOSE_CART, Context } from \"../../context\";\n\nconst useStyles = createStyles({\n footer: {\n borderTop: \"1px solid lightgrey\",\n paddingBottom: \"1rem\",\n },\n textWrapper: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n padding: \"1.25rem 0rem\",\n },\n shippingWrapper: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n margin: \"-1.25rem 0 .8rem 0\",\n paddingBottom: \"0.25rem\",\n fontSize: \"1rem\",\n h4: {\n fontSize: \"1rem\",\n },\n },\n toPay: {\n padding: 0,\n fontSize: \"1.25rem\",\n },\n sum: {\n padding: 0,\n fontSize: \"1.25rem\",\n },\n continueShopping: {\n marginTop: \"1rem\",\n marginBottom: \"1rem\",\n },\n});\nconst DrawerFooter = ({ sale }) => {\n const { language, currency, config, saleId, culture } = useSelector(\n (state) => ({\n language: state.language,\n currency: state.cookies[STATE_CURRENCY],\n config: state.config,\n saleId: state.cookies[STATE_SALE_ID],\n culture: state.cookies[STATE_CULTURE],\n })\n );\n const { classes } = useStyles();\n const [cart, setCart] = useState([]);\n const rdxDispatch = useDispatch();\n const { dispatch } = useContext(Context);\n const shippingCost = useCallback(() => {\n const shipping = sale.items.filter((el) => el.type === \"shipping_fee\");\n if (shipping.length > 0) {\n return (\n \n
\n );\n }\n }, [sale]);\n const serviceFee = useCallback(() => {\n const serviceFee = sale.items.filter((el) => el.type === \"service_fee\");\n if (serviceFee.length > 0) {\n return (\n {language.ShippingCost}
\n{shipping?.[0]?.totalPriceInclVat}
\n\n
\n );\n }\n }, [sale]);\n\n const productPrice = (item) => {\n if (item && item.length > 0) {\n const regex = /[$€£kr]/g;\n let newPrice = item.replace(regex, \"\");\n if (newPrice.trim().split(\".\")[1] === \"00\") {\n return newPrice.split(\".\")[0];\n } else {\n return newPrice;\n }\n }\n };\n\n const trackReduceCart = Object.values(\n cart.reduce((acc, curr) => {\n acc[curr.key] = {\n id: curr.article.plu,\n quantity: curr.quantity,\n price: curr.pricePerPiece.amountInclVat,\n name: curr.article.name,\n };\n return acc;\n }, {})\n );\n\n const goToCheckoutTracking = () => {\n if (window.dataLayer) {\n window.dataLayer.push({\n event: \"begin_checkout\",\n ecommerce: {\n currency,\n value: parseFloat(\n productPrice(sale.sumInclVat.replace(/\\s/g, \"\").replace(\",\", \".\"))\n ),\n items: trackReduceCart,\n },\n });\n }\n };\n\n const goToCheckout = () => {\n if (sale) {\n sale.items.map((item) => {\n const { name, plu } = item.article;\n const gaItem = {\n name,\n sku: plu,\n price: item.pricePerPiece.amountInclVat,\n quantity: item.quantity,\n currency,\n saleId,\n };\n ReactGA.plugin.require(\"ecommerce\");\n ReactGA.plugin.execute(\"ecommerce\", \"addItem\", gaItem);\n return ReactGA.plugin.execute(\"ecommerce\", \"send\");\n });\n if (config.facebookPixelId && isItReal(\"pixel\", config.facebookPixelId)) {\n pixelCheckoutData(sale.items, currency);\n }\n }\n goToCheckoutTracking();\n return rdxDispatch(checkout());\n };\n\n useEffect(() => {\n if (sale && sale.items.length > 0) {\n setCart(sale.items);\n }\n }, [sale]);\n\n return (\n {language.ServiceFee}
\n{serviceFee?.[0]?.totalPriceInclVat}
\n\n dispatch({ type: CLOSE_CART })}\n >\n {language.ArticleBooking.ModalSecondaryButton}\n \n goToCheckout()}\n >\n {language.GoToCheckout}\n \n
\n );\n};\n\nexport default DrawerFooter;\n","import React, { useContext, useEffect } from \"react\";\nimport { createStyles, Drawer, Portal, useMantineTheme } from \"@mantine/core\";\nimport { CLOSE_CART, Context, OPEN_CART } from \"../../context\";\nimport { useSelector } from \"react-redux\";\nimport \"./styles.css\";\nimport DrawerList from \"./DrawerList\";\nimport DrawerAlert from \"./DrawerAlert\";\nimport DrawerFooter from \"./DrawerFooter\";\n\nconst useStyles = createStyles((theme) => ({\n drawerTitle: {\n fontSize: \"1.5rem\",\n marginTop: \"-3.3rem\",\n marginBottom: \"2rem\",\n fontWeight: 700,\n },\n cart: {\n overflowY: \"auto\",\n flexDirection: \"column\",\n display: \"flex\",\n \"@media screen and (max-width: 768px)\": {\n width: \"90vw !important\",\n },\n },\n cartBody: {},\n itemWrapper: {\n height: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"space-between\",\n marginTop: \"-1rem\",\n },\n}));\n\nconst DrawerCart = ({ sale, prevQuantity, setPrevQuantity, cartOpen }) => {\n const { config, language } = useSelector((state) => ({\n config: state.config,\n language: state.language,\n }));\n const theme = useMantineTheme();\n const { dispatch } = useContext(Context);\n const { classes } = useStyles();\n\n useEffect(() => {\n if (\n sale?.itemQuantity &&\n prevQuantity &&\n sale?.itemQuantity !== prevQuantity\n ) {\n setPrevQuantity(sale?.itemQuantity);\n }\n }, [sale, prevQuantity, setPrevQuantity]);\n\n useEffect(() => {\n if (prevQuantity !== null && sale?.itemQuantity !== 0 && !cartOpen) {\n dispatch({ type: OPEN_CART });\n }\n }, [sale]);\n\n if (prevQuantity === null || !config.useCartDrawer) return null;\n\n return (\n \n
\n {shippingCost()}\n {serviceFee()}\n {language.ToPay}
\n{sale?.sumInclVat}
\n{language.Cart}
\n\n
\n \n \n
\n {language.EmptyCart}
}\n\r\n \r\n handleConsentDialog(false)}\r\n >\r\n {language.CookieDecline}\r\n \r\n \r\n\r\n \r\n handleConsentDialog(true)}\r\n >\r\n {language.CookieConsent}\r\n \r\n \r\n
\r\n \r\n ) : (\r\n \"\"\r\n )}\r\n\r\n {showCookieBanner !== false &&\r\n showCookieBanner !== \"false\" &&\r\n showConsentBanner.useTagmanager === false ? (\r\n \r\n \r\n \r\n \r\n
\r\n \r\n ) : (\r\n \"\"\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default CookieBanner;\r\n","import React, { useContext } from \"react\";\nimport classNames from \"classnames\";\nimport CheckCircleIcon from \"@material-ui/icons/CheckCircle\";\nimport ErrorIcon from \"@material-ui/icons/Error\";\nimport InfoIcon from \"@material-ui/icons/Info\";\nimport CloseIcon from \"@material-ui/icons/Close\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport Snackbar from \"@material-ui/core/Snackbar\";\nimport SnackbarContent from \"@material-ui/core/SnackbarContent\";\nimport WarningIcon from \"@material-ui/icons/Warning\";\nimport { makeStyles } from \"@material-ui/styles\";\nimport { CLOSE_TOAST, Context } from \"../../context\";\n\nconst variantIcon = {\n success: CheckCircleIcon,\n warning: WarningIcon,\n error: ErrorIcon,\n info: InfoIcon,\n};\n\nconst useStyles = makeStyles((theme) => ({\n success: {\n backgroundColor: theme.app.successColor,\n color: \"white\",\n },\n error: {\n backgroundColor: theme.app.dangerColor,\n color: \"white\",\n },\n info: {\n backgroundColor: theme.app.infoColor,\n color: \"white\",\n },\n warning: {\n backgroundColor: theme.app.warningColor,\n color: \"white\",\n },\n icon: {\n fontSize: 20,\n },\n iconVariant: {\n opacity: 0.9,\n marginRight: \"8px\",\n },\n message: {\n display: \"flex\",\n alignItems: \"center\",\n },\n}));\n\nconst Content = (props) => {\n const classes = useStyles();\n const { className, message, onClose, variant } = props;\n const Icon = variantIcon[variant];\n\n return (\n \n \n {!toastVariant ? (\n \n ) : (\n
\n );\n};\n\nexport default Toast;\n","import React, { useContext } from \"react\";\r\nimport Snackbar from \"@material-ui/core/Snackbar\";\r\nimport AlertControl from \"@material-ui/lab/Alert\";\r\nimport { Context, CLOSE_ALERT } from \"../../context\";\r\n\r\nconst Alert = (props) => {\r\n const {\r\n state: { alertOpen, alertText, alertSeverity },\r\n dispatch,\r\n } = useContext(Context);\r\n const handleClose = () => dispatch({ type: CLOSE_ALERT });\r\n return (\r\n {children}
;\n};\n\nexport default AppLayout;\n","import { useState } from \"react\";\r\nconst useLocalStorage = (key, initialValue) => {\r\n // State to store our value\r\n // Pass initial state function to useState so logic is only executed once\r\n const [storedValue, setStoredValue] = useState(() => {\r\n if (typeof window === \"undefined\") {\r\n return initialValue;\r\n }\r\n try {\r\n // Get from local storage by key\r\n const item = window.localStorage.getItem(key);\r\n // Parse stored json or if none return initialValue\r\n return item ? JSON.parse(item) : initialValue;\r\n } catch (error) {\r\n // If error also return initialValue\r\n console.log(error);\r\n return initialValue;\r\n }\r\n });\r\n // Return a wrapped version of useState's setter function that ...\r\n // ... persists the new value to localStorage.\r\n const setValue = (value) => {\r\n try {\r\n // Allow value to be a function so we have same API as useState\r\n const valueToStore =\r\n value instanceof Function ? value(storedValue) : value;\r\n // Save state\r\n setStoredValue(valueToStore);\r\n // Save to local storage\r\n if (typeof window !== \"undefined\") {\r\n window.localStorage.setItem(key, JSON.stringify(valueToStore));\r\n }\r\n } catch (error) {\r\n // A more advanced implementation would handle the error case\r\n console.log(error);\r\n }\r\n };\r\n return [storedValue, setValue];\r\n};\r\nexport default useLocalStorage;\r\n","import React from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport Content from \"./content\";\r\n\r\nconst Footer = (props) => {\r\n const config = useSelector((state) => state.config);\r\n return config.useFooter ? {children}
\r\n );\r\n};\r\n\r\nexport default PageLayout;\r\n","import React from \"react\";\r\nimport clsx from \"clsx\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n pageContent: {\r\n color: theme.palette.color,\r\n background: theme.palette.background.paper,\r\n padding: \"16px\",\r\n borderRadius: \"4px\",\r\n \"@media(max-width: 667px)\": {\r\n padding: \"0px\",\r\n },\r\n },\r\n}));\r\n\r\nconst PageContent = ({ children }) => {\r\n const classes = useStyles();\r\n return (\r\n \r\n {language.Cart} \r\n {sale ? (\r\n
\r\n );\r\n};\r\n\r\nexport default Cart;\r\n","import React from \"react\";\nimport { useNavigate } from \"@reach/router\";\nimport clsx from \"clsx\";\nimport { makeStyles } from \"@material-ui/styles\";\nimport Card from \"@material-ui/core/Card\";\nimport CardActionArea from \"@material-ui/core/CardActionArea\";\nimport CardContent from \"@material-ui/core/CardContent\";\nimport Typography from \"@material-ui/core/Typography\";\nimport { ReactComponent as Placeholder } from \"../../images/placeholder.svg\";\nimport slugify from \"../common/slugify\";\nimport useLocalStorage from \"../Header/HeaderV2/hooks/useLocalStorage\";\n\nconst useStyles = makeStyles((theme) => ({\n card: {\n width: \"100%\",\n \"@media(max-width: 1024px)\": {\n margin: \"8px\",\n },\n },\n img: {\n width: \"100%\",\n maxWidth: \"100%\",\n height: \"auto\",\n },\n content: {\n background: theme.palette.background.paper,\n borderTop: `1px solid ${theme.palette.divider}`,\n width: \"100%\",\n // height: \"100%\",\n display: \"grid\",\n alignItems: \"end\",\n },\n primary: {\n fontSize: \"1rem\",\n lineHeight: 1.1,\n display: \"box\",\n lineClamp: 2,\n boxOrient: \"vertical\",\n overflow: \"hidden\",\n },\n secondary: {\n fontSize: \"0.8125rem\",\n lineHeight: 1,\n },\n buttonDisabled: {\n color: \"rgba(255,255,255,0.5)!important\",\n },\n button: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"flex-start\",\n // height: \"100%\",\n justifyContent: \"flex-start\",\n },\n}));\n\nconst CardItem = ({ item, slug }) => {\n const [selected, setSelected] = useLocalStorage();\n const classes = useStyles();\n const navigate = useNavigate();\n let itemSlug =\n item?.eventCalendar === true\n ? `${process.env.PUBLIC_URL}/tickets/${slugify(item.name)}`\n : item?.articleBooking === true\n ? `${process.env.PUBLIC_URL}/booking/${slugify(item.name)}`\n : slug\n ? slug\n : item?.externalLink\n ? item?.externalLink\n : `${process.env.PUBLIC_URL}/${slugify(item.name)}`;\n return (\n \r\n
\r\n \r\n window.history.back()}\r\n id=\"goBackFromCartButton\"\r\n >\r\n {language?.Back_To_List || \"Tillbaka\"}\r\n \r\n
\r\n \r\n \r\n {language?.GoToCheckout || \"Till Betalning\"}\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ProductDescription;\r\n","import React from \"react\";\nimport { useNavigate } from \"@reach/router\";\nimport clsx from \"clsx\";\nimport { makeStyles } from \"@material-ui/styles\";\nimport ListItem from \"@material-ui/core/ListItem\";\nimport ListItemText from \"@material-ui/core/ListItemText\";\nimport { ReactComponent as Placeholder } from \"../../images/placeholder_list.svg\";\nimport slugify from \"../common/slugify\";\nimport useLocalStorage from \"../Header/HeaderV2/hooks/useLocalStorage\";\n\nconst useStyles = makeStyles((theme) => ({\n listItem: {\n \"&:nth-child(even)\": {\n backgroundColor: theme.app.tableHighlight,\n \"&:hover\": {\n backgroundColor: theme.palette.action.hover,\n },\n },\n \"@media(max-width: 667px)\": {\n paddingLeft: \"4px\",\n paddingRight: \"4px\",\n },\n },\n imageContainer: {\n lineHeight: 1,\n },\n listItemText: {\n paddingLeft: \"16px\",\n },\n image: {\n width: \"100px\",\n border: `1px solid ${theme.palette.divider}`,\n borderRadius: \"4px\",\n objectFit: \"cover\",\n backgroundColor: theme.app.background[2],\n \"@media(max-width: 667px)\": {\n width: \"75px\",\n },\n },\n}));\n\nconst List = ({ item, slug }) => {\n const [selected, setSelected] = useLocalStorage();\n const classes = useStyles();\n const navigate = useNavigate();\n let itemSlug =\n item?.eventCalendar === true\n ? `${process.env.PUBLIC_URL}/tickets/${slugify(item.name)}`\n : item?.articleBooking === true\n ? `${process.env.PUBLIC_URL}/booking/${slugify(item.name)}`\n : slug\n ? slug\n : item?.externalLink\n ? item?.externalLink\n : `${process.env.PUBLIC_URL}/${slugify(item.name)}`;\n return (\n <>\n {item?.externalLink ? (\n \n \n
\n \n \n
\n \n \n {item?.text?.primary}\n \n \n {item?.text?.secondary}\n \n
\n \n {links.map((landingPage, index) => {\n if (landingPage.disabled) return null;\n const landingTexts = language.LandingTexts;\n const text = landingTexts\n ? landingTexts[landingPage.name]\n : { primary: null, secondary: null };\n const image = `${process.env.PUBLIC_URL}${config.imageFolderUrl}${\n landingPage.image ? landingPage.image : \"placeholder.jpg\"\n }`;\n const item = { ...landingPage, image, text };\n\n if (\n pagesWithOnlyOneEvent.includes(item.name) &&\n config.useAutoNavigationOnSingleEvent\n ) {\n const eventSlug = `${process.env.PUBLIC_URL}/events/${slugify(\n item.name\n )}`;\n return list === \"CARD\" ? (\n config?.useNewCard ? (\n
\n );\n};\n\nexport default LandingPage;\n","import React, { useState } from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport classNames from \"classnames\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport Collapse from \"@material-ui/core/Collapse\";\r\nimport ButtonBase from \"@material-ui/core/ButtonBase\";\r\nimport DownArrowIcon from \"@material-ui/icons/ArrowDropDown\";\r\nimport UpArrowIcon from \"@material-ui/icons/ArrowDropUp\";\r\nimport Markdown from \"react-markdown\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n description: {\r\n \"& p\": {\r\n color: theme.palette.text.secondary,\r\n // \"&:first-child\": { marginTop: \"0px\" }\r\n },\r\n \"@media(max-width: 667px)\": {\r\n padding: \"8px\",\r\n \"& h4\": {\r\n fontSize: \"1.2rem\",\r\n },\r\n },\r\n },\r\n descriptionContainer: {\r\n position: \"relative\",\r\n },\r\n fade: {\r\n position: \"absolute\",\r\n bottom: 0,\r\n left: 0,\r\n right: 0,\r\n height: \"20px\",\r\n background:\r\n \"linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 33%,rgba(255,255,255,1) 53%,rgba(255,255,255,1) 100%);\",\r\n },\r\n button: {\r\n display: \"none\",\r\n padding: \"4px 0\",\r\n color: theme.app.labelColor,\r\n \"@media(max-width: 768px)\": {\r\n display: \"inline-flex\",\r\n },\r\n \"@media(max-width: 667px)\": {\r\n paddingLeft: \"8px\",\r\n },\r\n },\r\n}));\r\n\r\nconst Description = ({ text }) => {\r\n const classes = useStyles();\r\n const { language, config } = useSelector((state) => ({\r\n language: state.language,\r\n config: state.config,\r\n }));\r\n const [open, setOpen] = useState(\r\n config.disableDescriptionFold\r\n ? true\r\n : window.innerWidth < 768\r\n ? false\r\n : true\r\n );\r\n const toggleOpen = () => setOpen(open ? false : true);\r\n if (text.length < 1) return ;\r\n return (\r\n \r\n \r\n {open ? language.Show_Less : language.Show_More}{\" \"}\r\n {open ? \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default Description;\r\n","import slugify from \"../../components/common/slugify\";\n\n// const getAllArticles = (tags) => {\n// let ids = [];\n// let articles = [];\n// tags.forEach((t) => {\n// t.articles.forEach((a) => {\n// if (!ids.includes(a.id)) {\n// ids = [...ids, a.id];\n// articles = [...articles, a];\n// }\n// });\n// });\n// return articles;\n// };\n\nconst extendArticle = (\n productConfig = {},\n a = {},\n config,\n imageUri,\n culture\n) => {\n const { imageFolderUrl, descriptionFolderUrl, thumbnailsFolderUrl } = config;\n\n // If it's a product that only exists in config\n const plu = a.plu ? a.plu : productConfig.plu;\n // If a is productGroup with useGroupsAsItems\n const uri = config?.apiUriOverride?.startsWith(\"http\")\n ? config.apiUriOverride\n : config.apiUri;\n if (a.articles)\n return {\n ...a,\n name: a.name ? a.name : productConfig.name,\n plu,\n description: productConfig.description\n ? `${descriptionFolderUrl}${productConfig.description}`\n : undefined,\n id: a.id,\n imageUri,\n images: imageUri\n ? [`${uri}/articleimage/${imageUri}`]\n : !plu && productConfig.images\n ? productConfig.images.map(\n (img) => `${process.env.PUBLIC_URL}${imageFolderUrl}${img}`\n )\n : undefined,\n thumbnail: productConfig.thumbnail\n ? `${process.env.PUBLIC_URL}${thumbnailsFolderUrl}${productConfig.thumbnail}`\n : undefined,\n isInfo: productConfig.isInfo || false,\n isModification: productConfig.isModification || false,\n isOpenPrice: productConfig.isOpenPrice,\n openPriceValues:\n productConfig.openPriceValues?.length > 0\n ? productConfig.openPriceValues\n : null,\n relatedProducts: productConfig.relatedProducts || [],\n displayPrice: a.priceInclVat,\n slug: `products/${plu}`,\n };\n\n return {\n ...a,\n name:\n a.translation?.find((t) => t.culture === culture)?.name ||\n a.translation?.find((t) => t.culture === \"sv-SE\")?.name ||\n a.name ||\n productConfig.name ||\n `Product Name (${plu})`,\n plu,\n description: productConfig.description\n ? `${descriptionFolderUrl}${productConfig.description}`\n : undefined,\n id: a.id,\n imageUri,\n images: imageUri ? [`${uri}/articleimage/${imageUri}`] : undefined,\n thumbnail: productConfig.thumbnail\n ? `${process.env.PUBLIC_URL}${thumbnailsFolderUrl}${productConfig.thumbnail}`\n : undefined,\n isInfo: productConfig.isInfo || false,\n isModification: productConfig.isModification || false,\n isOpenPrice: productConfig.isOpenPrice,\n openPriceValues:\n productConfig.openPriceValues?.length > 0\n ? productConfig.openPriceValues\n : null,\n relatedProducts: productConfig.relatedProducts || [],\n displayPrice: a.priceInclVat,\n slug: `products/${plu}`,\n };\n};\n\nexport const getProduct = (data, config, id, culture) => {\n let productGroupConfig = config.productGroupConfig.find(\n (c) => slugify(c.name) === id\n );\n if (!data || (productGroupConfig && !productGroupConfig?.useGroupsAsItems))\n return undefined;\n\n const productConfig = productGroupConfig?.useGroupsAsItems\n ? productGroupConfig\n : config.productConfig.find((c) => c.plu === Number(id));\n let a = productGroupConfig?.useGroupsAsItems\n ? // Checks if product is productGroup with useGroupsAsItems\n data.tags.find((t) => slugify(t.name) === id)\n : // If not, looks for article in data.articles\n data.articles.find((article) => article.plu === Number(id));\n\n const imageUri = productGroupConfig?.useGroupsAsItems\n ? undefined\n : data.articles.find((article) => article.plu === Number(id))\n ?.imageFilename;\n\n return extendArticle(productConfig, a, config, imageUri, culture);\n};\n","import moment from \"moment\";\r\n\r\nexport const getInitialMonth = (config, product) => {\r\n if (!product.overrideStartDate) return moment();\r\n if (config.overrideStartdate) {\r\n if (\r\n config.overrideStartdate.allowedRange &&\r\n moment() < moment(config.overrideStartdate.allowedRange.start)\r\n ) {\r\n return moment(config.overrideStartdate.allowedRange.start);\r\n }\r\n }\r\n return moment();\r\n};\r\n\r\nexport const getFormConfig = (config, product) => {\r\n const plu = product.plu ? product.plu : product.articles[0].plu;\r\n if (!config) return undefined;\r\n if (config.filter((c) => c.plu === plu).length > 0)\r\n return config.find((c) => c.plu === plu);\r\n return config.find((c) => c.plu === \"default\");\r\n};\r\n\r\nexport const getSaleData = (\r\n product,\r\n article,\r\n values,\r\n photo,\r\n quantity,\r\n overrideStartDate\r\n) => {\r\n const saleArticle = product.articles\r\n ? product.articles.find((a) => a.id === article)\r\n : product;\r\n if (!saleArticle) throw new Error(\"No article\");\r\n if (!values) {\r\n return {\r\n plu: saleArticle.plu,\r\n quantity: quantity || 1,\r\n overrideStartDate,\r\n };\r\n }\r\n const { plu } = saleArticle;\r\n const ticketHolderCategoryId = saleArticle.ticketHolders[0].categoryId;\r\n const ticketOwners = [\r\n {\r\n ticketHolderCategoryId,\r\n customerData: {\r\n firstName: values.firstName,\r\n lastName: values.lastName,\r\n email: values.email,\r\n civicRegistrationNumber: values.civicRegistrationNumber,\r\n phoneNumbers: [\r\n {\r\n type: \"Cell\",\r\n number: values.cellPhone,\r\n },\r\n ],\r\n addresses: [\r\n {\r\n type: \"Generic\",\r\n street: values.street,\r\n streetNumber: values.streetNumber,\r\n city: values.city,\r\n zipCode: values.zipCode,\r\n countryCode: values.countryCode,\r\n },\r\n ],\r\n photoBase64: photo && photo,\r\n photoExtension: photo && \"jpg\",\r\n },\r\n },\r\n ];\r\n return { plu, quantity: 1, ticketOwners };\r\n};\r\n\r\nexport const isPersonal = (config, product) => {\r\n let productGroupConfig = config.productGroupConfig.find(\r\n (c) => c.name === product.name\r\n );\r\n if (productGroupConfig?.useGroupsAsItems) {\r\n return product.articles[0].isPersonalTicket;\r\n }\r\n return product.isPersonalTicket;\r\n};\r\n\r\nexport const formatDisplayPrice = (price, currency) => {\r\n if (!price) return \"-\";\r\n switch (currency) {\r\n case \"SEK\":\r\n case \"NOK\":\r\n case \"DKK\":\r\n return `${Number(price).toFixed(2)} kr`;\r\n case \"EUR\":\r\n return `€${Number(price).toFixed(2)}`;\r\n case \"USD\":\r\n return `$${Number(price).toFixed(2)}`;\r\n default:\r\n return price;\r\n }\r\n};\r\n\r\nexport const getArticleConfig = (config, plu) => {\r\n return config.find((p) => p.plu === plu);\r\n};\r\n","import React from \"react\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport clsx from \"clsx\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n productContent: {\r\n display: \"grid\",\r\n gridTemplateColumns: \"400px 1fr\",\r\n gridGap: \"16px\",\r\n \"@media(max-width: 768px)\": {\r\n gridTemplateColumns: \"300px 1fr\",\r\n },\r\n \"@media(max-width: 667px)\": {\r\n gridTemplateColumns: \"1fr\",\r\n padding: \"0 8px 16px\",\r\n },\r\n },\r\n}));\r\n\r\nconst ProductContent = ({ children }) => {\r\n const classes = useStyles();\r\n return (\r\n \r\n \r\n \r\n {!open && }\r\n
\r\n {!config.disableDescriptionFold && (\r\n \r\n {children}\r\n
\r\n );\r\n};\r\n\r\nexport default ProductContent;\r\n","import React from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { useNavigate } from \"@reach/router\";\r\nimport clsx from \"clsx\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n header: {\r\n height: \"54px\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n borderBottom: `1px solid ${theme.app.borderColor}`,\r\n \"@media(max-width: 667px)\": {\r\n padding: \"0 8px\",\r\n position: \"sticky\",\r\n top: (p) => (p.headerHeight ? `${p.headerHeight}px` : \"64px\"),\r\n zIndex: 1100,\r\n background: theme.palette.background.paper,\r\n },\r\n },\r\n titleText: {\r\n flexGrow: 1,\r\n display: \"box\",\r\n lineClamp: 2,\r\n boxOrient: \"vertical\",\r\n overflow: \"hidden\",\r\n \"@media(max-width: 576px)\": {\r\n fontSize: \"1.125rem\",\r\n },\r\n },\r\n}));\r\n\r\nconst ProductHeader = ({ text }) => {\r\n const classes = useStyles();\r\n const language = useSelector((state) => (state.language, state.config));\r\n const navigate = useNavigate();\r\n return (\r\n \r\n \r\n {text}\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ProductHeader;\r\n","import React from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { useLocation } from \"@reach/router\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport { Twitter, Facebook, Mail } from \"react-social-sharing\";\r\n\r\nexport const socalShareMeta = (config) => {\r\n // Add social share title\r\n if (config.socialShareTitle) {\r\n let title = document.createElement(\"meta\");\r\n title.setAttribute(\"property\", \"og:title\");\r\n title.content = config.socialShareTitle;\r\n document.getElementsByTagName(\"head\")[0].appendChild(title);\r\n }\r\n // Add social share description\r\n if (config.socialShareDescription) {\r\n let description = document.createElement(\"meta\");\r\n description.setAttribute(\"property\", \"og:description\");\r\n description.content = config.socialShareDescription;\r\n document.getElementsByTagName(\"head\")[0].appendChild(description);\r\n }\r\n // Add social share image\r\n if (config.socialShareImage) {\r\n let image = document.createElement(\"meta\");\r\n image.setAttribute(\"property\", \"og:image\");\r\n image.content = config.socialShareImage;\r\n document.getElementsByTagName(\"head\")[0].appendChild(image);\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n padding: \"8px 0\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n flexWrap: \"wrap\",\r\n \"& a\": {\r\n margin: 0,\r\n marginRight: \"8px\",\r\n },\r\n },\r\n});\r\n\r\nconst SocialShare = () => {\r\n const { config, language } = useSelector((state) => ({\r\n config: state.config,\r\n language: state.language,\r\n }));\r\n const location = useLocation();\r\n const url = location.href;\r\n const classes = useStyles();\r\n if (!config.socialShareButtons || config.socialShareButtons.length < 1)\r\n return null;\r\n const buttons = config.socialShareButtons;\r\n return (\r\n \r\n {buttons.includes(\"Twitter\") && (\r\n `${language.Share} ${serviceName}`}\r\n />\r\n )}\r\n {buttons.includes(\"Facebook\") && (\r\n `${language.Share} ${serviceName}`}\r\n />\r\n )}\r\n {buttons.includes(\"Mail\") && (\r\n `${language.Share} ${serviceName}`}\r\n />\r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default SocialShare;\r\n","import React from \"react\";\r\nimport clsx from \"clsx\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport PrevIcon from \"@material-ui/icons/ChevronLeft\";\r\nimport NextIcon from \"@material-ui/icons/ChevronRight\";\r\nimport ImageGallery from \"react-image-gallery\";\r\nimport { ReactComponent as Placeholder } from \"../../images/placeholder.svg\";\r\nimport SocialShare from \"../common/socialShare\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n productImage: {},\r\n placeholder: {\r\n background: theme.app.background[2],\r\n border: `1px solid ${theme.palette.divider}`,\r\n borderRadius: \"4px\",\r\n marginTop: \"8px\",\r\n },\r\n carouselButton: {\r\n backgroundColor: \"rgba(0,0,0,0.23)\",\r\n color: \"white\",\r\n },\r\n left: {\r\n position: \"absolute\",\r\n zIndex: 100,\r\n left: 0,\r\n top: \"50%\",\r\n transform: \"translate(0, -50%)\",\r\n },\r\n right: {\r\n position: \"absolute\",\r\n zIndex: 100,\r\n right: 0,\r\n top: \"50%\",\r\n transform: \"translate(0, -50%)\",\r\n },\r\n}));\r\n\r\nconst ProductImage = ({ images }) => {\r\n const classes = useStyles();\r\n const carouselImages = images?.map((img) => ({\r\n original: img,\r\n }));\r\n if (!images || images.length < 1)\r\n return \r\n
\r\n );\r\n};\r\n\r\nexport default ProductImage;\r\n","/* eslint-disable react/no-unused-prop-types */\r\nimport React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport momentPropTypes from \"react-moment-proptypes\";\r\nimport { forbidExtraProps } from \"airbnb-prop-types\";\r\nimport moment from \"moment\";\r\nimport omit from \"lodash/omit\";\r\n\r\nimport { DayPickerSingleDateController } from \"react-dates\";\r\n\r\nimport ScrollableOrientationShape from \"react-dates/lib/shapes/ScrollableOrientationShape\";\r\n\r\nimport { HORIZONTAL_ORIENTATION } from \"react-dates/constants\";\r\nimport { isInclusivelyAfterDay } from \"react-dates\";\r\n\r\nconst propTypes = forbidExtraProps({\r\n // example props for the demo\r\n autoFocus: PropTypes.bool,\r\n initialDate: momentPropTypes.momentObj,\r\n showInput: PropTypes.bool,\r\n\r\n keepOpenOnDateSelect: PropTypes.bool,\r\n isOutsideRange: PropTypes.func,\r\n isDayBlocked: PropTypes.func,\r\n isDayHighlighted: PropTypes.func,\r\n\r\n // DayPicker props\r\n enableOutsideDays: PropTypes.bool,\r\n numberOfMonths: PropTypes.number,\r\n orientation: ScrollableOrientationShape,\r\n withPortal: PropTypes.bool,\r\n initialVisibleMonth: PropTypes.func,\r\n renderCalendarInfo: PropTypes.func,\r\n\r\n navPrev: PropTypes.node,\r\n navNext: PropTypes.node,\r\n\r\n onPrevMonthClick: PropTypes.func,\r\n onNextMonthClick: PropTypes.func,\r\n onOutsideClick: PropTypes.func,\r\n renderCalendarDay: PropTypes.func,\r\n renderDayContents: PropTypes.func,\r\n\r\n // i18n\r\n monthFormat: PropTypes.string,\r\n\r\n isRTL: PropTypes.bool,\r\n onDateChange: PropTypes.func,\r\n blockedDates: PropTypes.array,\r\n allowedRange: PropTypes.object,\r\n highlightedDates: PropTypes.array,\r\n occasionDates: PropTypes.array,\r\n isOverrideStartdate: PropTypes.bool,\r\n});\r\n\r\nconst defaultProps = {\r\n // example props for the demo\r\n autoFocus: false,\r\n initialDate: null,\r\n showInput: false,\r\n\r\n // day presentation and interaction related props\r\n renderCalendarDay: undefined,\r\n renderDayContents: null,\r\n isDayBlocked: () => false,\r\n isOutsideRange: (day) => !isInclusivelyAfterDay(day, moment()),\r\n isDayHighlighted: () => false,\r\n enableOutsideDays: false,\r\n\r\n // calendar presentation and interaction related props\r\n orientation: HORIZONTAL_ORIENTATION,\r\n withPortal: false,\r\n initialVisibleMonth: null,\r\n numberOfMonths: 1,\r\n onOutsideClick() {},\r\n keepOpenOnDateSelect: false,\r\n renderCalendarInfo: null,\r\n isRTL: false,\r\n\r\n // navigation related props\r\n navPrev: null,\r\n navNext: null,\r\n onPrevMonthClick() {},\r\n onNextMonthClick() {},\r\n\r\n // internationalization\r\n monthFormat: \"MMMM YYYY\",\r\n};\r\n\r\nclass DayPickerSingleDateControllerWrapper extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.state = {\r\n focused: true,\r\n date: props.initialDate,\r\n };\r\n\r\n this.onDateChange = this.onDateChange.bind(this);\r\n this.onFocusChange = this.onFocusChange.bind(this);\r\n }\r\n\r\n onDateChange(date) {\r\n this.setState({ date });\r\n this.props.onDateChange(date);\r\n }\r\n\r\n onFocusChange() {\r\n // Force the focused states to always be truthy so that date is always selectable\r\n this.setState({ focused: true });\r\n }\r\n\r\n isHighlighted = (day, highligtedDays) => {\r\n if (highligtedDays.includes(day.format(\"YYYY-MM-DD\"))) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n isDayBlocked = (\r\n day,\r\n occasionDates,\r\n isOverrideStartdate,\r\n allowedRange,\r\n blockedDates\r\n ) => {\r\n if (isOverrideStartdate) {\r\n if (\r\n day.isBetween(\r\n moment(allowedRange.start).subtract(\"1\", \"days\"),\r\n moment(allowedRange.end).add(\"1\", \"days\")\r\n )\r\n ) {\r\n if (blockedDates.includes(day.format(\"YYYYMMDD\"))) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n return true;\r\n }\r\n if (occasionDates.includes(day.format(\"YYYY-MM-DD\"))) {\r\n return false;\r\n }\r\n return true;\r\n };\r\n\r\n render() {\r\n const {\r\n showInput,\r\n highlightedDates,\r\n occasionDates,\r\n isOverrideStartdate,\r\n allowedRange,\r\n blockedDates,\r\n } = this.props;\r\n const { focused, date } = this.state;\r\n\r\n const props = omit(this.props, [\r\n \"autoFocus\",\r\n \"initialDate\",\r\n \"showInput\",\r\n \"blockedDates\",\r\n \"occasionDates\",\r\n \"highlightedDates\",\r\n \"isOverrideStartdate\",\r\n \"allowedRange\",\r\n ]);\r\n\r\n const dateString = date && date.format(\"YYYY-MM-DD\");\r\n\r\n return (\r\n \r\n (\r\n \r\n \r\n
\r\n \r\n {showInput && (\r\n this.isHighlighted(day, highlightedDates)}\r\n isDayBlocked={(day) =>\r\n this.isDayBlocked(\r\n day,\r\n occasionDates,\r\n isOverrideStartdate,\r\n allowedRange,\r\n blockedDates\r\n )\r\n }\r\n focused={focused}\r\n date={date}\r\n />\r\n
\r\n );\r\n }\r\n}\r\n\r\nDayPickerSingleDateControllerWrapper.propTypes = propTypes;\r\nDayPickerSingleDateControllerWrapper.defaultProps = defaultProps;\r\n\r\nexport default DayPickerSingleDateControllerWrapper;","import React from \"react\";\r\nimport DayPickerSingleDateControllerWrapper from \"./wrapper\";\r\nimport \"react-dates/initialize\";\r\n\r\nconst Calendar = React.memo(function Calendar(props) {\r\n const {\r\n initialDate,\r\n onDateChange,\r\n startdateConfig,\r\n highlightedDates,\r\n initialVisibleMonth,\r\n isDayBlocked,\r\n isOutsideRange,\r\n isOverrideStartdate,\r\n occasionDates,\r\n } = props;\r\n return (\r\n \r\n
\r\n )}\r\n\r\n \r\n \r\n {language.Choose_Date}\r\n \r\n \r\n getInitialMonth(config, product)}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default OverrideStartDate;\r\n","import React, { useContext, useState } from \"react\";\r\nimport { useSelector, useDispatch } from \"react-redux\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport List from \"@material-ui/core/List\";\r\nimport ListItem from \"@material-ui/core/ListItem\";\r\nimport ListItemSecondaryAction from \"@material-ui/core/ListItemSecondaryAction\";\r\nimport ListItemText from \"@material-ui/core/ListItemText\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport Select from \"@material-ui/core/Select\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\nimport { Context, TOAST, CART_ARTICLE_ADD } from \"../../context\";\r\nimport { getArticleConfig, formatDisplayPrice } from \"./util\";\r\nimport { addArticle } from \"../../common/sale\";\r\nimport { STATE_CURRENCY } from \"../../common/state\";\r\nimport { getCartArticle } from \"../cart/util\";\r\n\r\nconst useStyles = makeStyles({\r\n openPrice: {},\r\n list: {},\r\n listItem: {\r\n paddingRight: \"150px\",\r\n \"@media(max-width: 667px)\": {\r\n display: \"grid\",\r\n gridTemplateColumns: \"1fr\",\r\n padding: \"0 0 24px\",\r\n borderBottom: \"none\",\r\n },\r\n },\r\n listItemText: {},\r\n listItemAction: {\r\n display: \"flex\",\r\n \"@media(max-width: 667px)\": {\r\n position: \"relative\",\r\n right: 0,\r\n left: 0,\r\n display: \"grid\",\r\n gridTemplateColumns: \"1fr auto\",\r\n },\r\n },\r\n addButton: {\r\n alignSelf: \"flex-end\",\r\n marginLeft: \"16px\",\r\n },\r\n select: {\r\n width: \"120px\",\r\n textAlign: \"center\",\r\n },\r\n input: {\r\n maxWidth: \"140px\",\r\n textAlign: \"right\",\r\n },\r\n});\r\n\r\nconst OpenPrice = (props) => {\r\n const { article, product } = props;\r\n const classes = useStyles();\r\n const rdxDispatch = useDispatch();\r\n const { dispatch } = useContext(Context);\r\n const { config, language, currency } = useSelector((state) => ({\r\n config: state.config,\r\n language: state.language,\r\n currency: state.cookies[STATE_CURRENCY],\r\n }));\r\n const articleConfig = getArticleConfig(config.productConfig, article.plu);\r\n const hasOptions =\r\n articleConfig.openPriceValues && articleConfig.openPriceValues.length > 0;\r\n const options = articleConfig.openPriceValues;\r\n const [price, setPrice] = useState(hasOptions ? options[0] : \"\");\r\n const [busy, setBusy] = useState(false);\r\n\r\n const handleAdd = () => {\r\n setBusy(true);\r\n const cartArticle = getCartArticle(product, config, article.id);\r\n rdxDispatch(\r\n addArticle(\r\n { plu: article.plu, quantity: 1, priceInclVat: price * 100 },\r\n (status, msg) => {\r\n if (status >= 400) {\r\n setBusy(false);\r\n return dispatch({\r\n type: TOAST,\r\n payload: {\r\n text: msg,\r\n variant: \"error\",\r\n },\r\n });\r\n }\r\n setPrice(hasOptions ? options[0] : \"\");\r\n setBusy(false);\r\n dispatch({ type: CART_ARTICLE_ADD, payload: cartArticle });\r\n }\r\n )\r\n );\r\n };\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default OpenPrice;\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport FormControl from \"@material-ui/core/FormControl\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport Select from \"@material-ui/core/Select\";\r\n\r\nconst useStyles = makeStyles({\r\n formControl: {\r\n margin: 0,\r\n minWidth: \"64px\",\r\n },\r\n select: {\r\n textAlign: \"center\",\r\n },\r\n});\r\n\r\nconst QuantitySelect = (props) => {\r\n const {\r\n max = 10,\r\n handleOnChange,\r\n value = 1,\r\n disabled,\r\n language,\r\n hideLabel,\r\n } = props;\r\n const classes = useStyles();\r\n let quantityArr = [];\r\n for (let i = 1; i < max + 1; i++) {\r\n quantityArr = [...quantityArr, i];\r\n }\r\n return (\r\n - \r\n
\r\n
\r\n );\r\n};\r\n\r\nexport default ArticlesList;\r\n","import React, { useState } from \"react\";\r\nimport classNames from \"classnames\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport FormControl from \"@material-ui/core/FormControl\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Select from \"@material-ui/core/Select\";\r\nimport NativeSelect from \"@material-ui/core/NativeSelect\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport Button from \"@material-ui/core/Button\";\r\n\r\nconst useStyles = makeStyles({\r\n selectContainer: {\r\n display: \"grid\",\r\n gridTemplateColumns: \"1fr auto\",\r\n },\r\n selectControl: {\r\n \"@media(max-width: 667px)\": {\r\n display: \"none\",\r\n },\r\n },\r\n select: {\r\n minWidth: \"250px\",\r\n },\r\n nativeSelect: {\r\n display: \"none\",\r\n \"@media(max-width: 667px)\": {\r\n display: \"block\",\r\n },\r\n },\r\n addButtonContainer: {\r\n alignSelf: \"flex-end\",\r\n marginLeft: \"16px\",\r\n },\r\n});\r\n\r\nconst getText = (a, group, useGroupsAsItems, language, notInStock) => {\r\n if (notInStock) {\r\n return `${\r\n useGroupsAsItems ? a.name.replace(`${group.name} `, \"\") : a.name\r\n } - ${a.priceInclVat} - ${language.Not_In_Stock}`;\r\n }\r\n return `${\r\n useGroupsAsItems ? a.name.replace(`${group.name} `, \"\") : a.name\r\n } - ${a.priceInclVat}`;\r\n};\r\n\r\nconst ArticleSelect = (props) => {\r\n const {\r\n useGroupsAsItems,\r\n group,\r\n add,\r\n articles,\r\n language,\r\n personal,\r\n value,\r\n onSelect,\r\n disabled,\r\n submitForm,\r\n selectArticle,\r\n } = props;\r\n const classes = useStyles();\r\n const [article, setArticle] = useState(\"\");\r\n const sortedArticles = articles.sort((a, b) => a.plu - b.plu);\r\n return (\r\n - \r\n {sortedArticles.map((a, i) => {\r\n const notInStock = a.isProduct && a.inStock < 1;\r\n return (\r\n
\r\n add(group, article)}\r\n className={classNames(classes.addButton, \"details__addButton\")}\r\n color=\"primary\"\r\n >\r\n {language.Article_Add || \"\"}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default ArticleSelect;\r\n","const initialValues = (fields) => {\r\n let initialData = {};\r\n fields.forEach((f) => {\r\n if (f !== \"photo\") {\r\n initialData[f] = \"\";\r\n }\r\n });\r\n return initialData;\r\n};\r\n\r\nexport default initialValues;\r\n","import isEmail from \"sane-email-validation\";\r\n\r\nconst validate = (values, config, language) => {\r\n let errors = {};\r\n\r\n //firstName\r\n if (\r\n !config ||\r\n (config.requiredFields.includes(\"firstName\") && !values.firstName)\r\n ) {\r\n errors.firstName = `${language.Form_FirstName} ${language.Form_IsRequired}`;\r\n }\r\n\r\n //lastName\r\n if (\r\n !config ||\r\n (config.requiredFields.includes(\"lastName\") && !values.lastName)\r\n ) {\r\n errors.lastName = `${language.Form_LastName} ${language.Form_IsRequired}`;\r\n }\r\n\r\n //email\r\n if (!config || (config.requiredFields.includes(\"email\") && !values.email)) {\r\n errors.email = `${language.Form_Email} ${language.Form_IsRequired}`;\r\n } else if (\r\n values.email &&\r\n values.email.length > 0 &&\r\n !isEmail(values.email)\r\n ) {\r\n errors.email = `${language.Form_Invalid_Email}`;\r\n }\r\n\r\n //civicRegistrationNumber\r\n if (\r\n !config ||\r\n (config.requiredFields.includes(\"civicRegistrationNumber\") &&\r\n !values.civicRegistrationNumber)\r\n ) {\r\n errors.civicRegistrationNumber = `${language.Form_CivicRegistrationNumber} ${language.Form_IsRequired}`;\r\n } else if (\r\n values.civicRegistrationNumber &&\r\n values.civicRegistrationNumber.length > 0 &&\r\n !/^(19|20)[0-9]{6}[- ]?[0-9]{4}$/.test(values.civicRegistrationNumber)\r\n ) {\r\n errors.civicRegistrationNumber =\r\n language.Form_Invalid_CivicRegistrationNumber;\r\n }\r\n\r\n //cellPhone\r\n if (\r\n !config ||\r\n (config.requiredFields.includes(\"cellPhone\") && !values.cellPhone)\r\n ) {\r\n errors.cellPhone = `${language.Form_CellPhone} ${language.Form_IsRequired}`;\r\n }\r\n\r\n //street\r\n if (!config || (config.requiredFields.includes(\"street\") && !values.street)) {\r\n errors.street = `${language.Form_Street} ${language.Form_IsRequired}`;\r\n }\r\n\r\n //streetNumber\r\n if (\r\n !config ||\r\n (config.requiredFields.includes(\"streetNumber\") && !values.streetNumber)\r\n ) {\r\n errors.streetNumber = `${language.Form_StreetNumber} ${language.Form_IsRequired}`;\r\n }\r\n\r\n //zipCode\r\n if (\r\n !config ||\r\n (config.requiredFields.includes(\"zipCode\") && !values.zipCode)\r\n ) {\r\n errors.zipCode = `${language.Form_ZipCode} ${language.Form_IsRequired}`;\r\n }\r\n\r\n //city\r\n if (!config || (config.requiredFields.includes(\"city\") && !values.city)) {\r\n errors.city = `${language.Form_City} ${language.Form_IsRequired}`;\r\n }\r\n\r\n //countryCode\r\n if (\r\n !config ||\r\n (config.requiredFields.includes(\"countryCode\") && !values.countryCode)\r\n ) {\r\n errors.countryCode = `${language.Form_Country} ${language.Form_IsRequired}`;\r\n }\r\n return errors;\r\n};\r\n\r\nexport default validate;\r\n","import React from \"react\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n row: {\r\n display: \"grid\",\r\n gridTemplateColumns: (p) =>\r\n p.gtc ? p.gtc : p.cols ? `repeat(${p.cols}, 1fr)` : \"1fr\",\r\n gridGap: (p) => (p.gap ? p.gap : \"8px\"),\r\n \"@media(max-width: 768px)\": {\r\n gridTemplateColumns: (p) => \"1fr\",\r\n },\r\n },\r\n}));\r\n\r\nconst RowLayout = (props) => {\r\n const { gtc, cols, gap, children } = props;\r\n const classes = useStyles({ gtc, cols, gap });\r\n return {children}
;\r\n};\r\n\r\nexport default RowLayout;\r\n","import React from \"react\";\r\nimport { useField } from \"formik\";\r\nimport TextField from \"@material-ui/core/TextField\";\r\n\r\nconst FormikTextField = (props) => {\r\n const {\r\n placeholder,\r\n min,\r\n type,\r\n max,\r\n required,\r\n disabled,\r\n autoFocus,\r\n label,\r\n name,\r\n } = props;\r\n const [field, meta] = useField(name);\r\n return (\r\n \r\n
\r\n ) : (\r\n \r\n {preview ? (\r\n
\r\n \r\n
\r\n ) : (\r\n \r\n {\r\n openPhotoSelect(photoSelectRef.current);\r\n savePhoto(\"\");\r\n }}\r\n >\r\n Välj Nytt foto\r\n \r\n {!preview && (\r\n \r\n )}\r\n
\r\n {!preview && (\r\n \r\n Zoom \r\n Rotation \r\n
\r\n )}\r\n \r\n setZoom(zoom)}\r\n />\r\n \r\n {Number(zoom).toFixed(1)}\r\n \r\n setZoom(1)}\r\n disabled={zoom === 1}\r\n >\r\n
\r\n \r\n setRotation(rotation)}\r\n />\r\n \r\n {rotation}\r\n \r\n setRotation(0)}\r\n disabled={rotation === 0}\r\n >\r\n
\r\n \r\n
\r\n \r\n );\r\n }}\r\n \r\n );\r\n};\r\n\r\nexport default Personal;\r\n","import React, { useContext } from \"react\";\r\nimport { useSelector, useDispatch } from \"react-redux\";\r\nimport clsx from \"clsx\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport ListItem from \"@material-ui/core/ListItem\";\r\nimport ListItemText from \"@material-ui/core/ListItemText\";\r\nimport ListItemSecondaryAction from \"@material-ui/core/ListItemSecondaryAction\";\r\nimport { addModification } from \"../../common/sale\";\r\nimport { Context, TOAST, CART_ARTICLE_ADD } from \"../../context\";\r\nimport { getCartArticle } from \"../cart/util\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n article: {},\r\n}));\r\n\r\nconst Article = ({ ticket, article, onAdded }) => {\r\n const classes = useStyles();\r\n const rdxDispatch = useDispatch();\r\n const { language, config } = useSelector((state) => ({\r\n language: state.language,\r\n config: state.config,\r\n }));\r\n\r\n const { dispatch } = useContext(Context);\r\n const ticketId = ticket.id;\r\n const articleId = ticket.article.id;\r\n const plu = article.plu;\r\n const fundsId = ticket.fundsId;\r\n const amount = article.price?.amountInclVat;\r\n\r\n const add = () => {\r\n const model = {\r\n ticketId,\r\n articleId,\r\n plu,\r\n fundsId,\r\n amount,\r\n };\r\n rdxDispatch(\r\n addModification(model, (status, msg) => {\r\n if (status >= 400) {\r\n return dispatch({\r\n type: TOAST,\r\n payload: {\r\n text: msg,\r\n variant: \"error\",\r\n },\r\n });\r\n }\r\n\r\n onAdded();\r\n const cartArticle = getCartArticle(article, config);\r\n return dispatch({ type: CART_ARTICLE_ADD, payload: cartArticle });\r\n })\r\n );\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n setArticle(e.target.value)}\r\n value={article}\r\n language={language}\r\n useGroupsAsItems={productGroupConfig?.useGroupsAsItems}\r\n group={product}\r\n personal={true}\r\n disabled={articleSelectDisabled}\r\n submitForm={submitForm}\r\n selectArticle={article}\r\n />\r\n ) : (\r\n \r\n \r\n {language?.Article_Add || \"Köp\"}\r\n \r\n
\r\n )}\r\n \r\n \r\n Ett fel uppstod vid sökning efter biljett med den aktuella\r\n streckkoden.\r\n \r\n )}\r\n\r\n {!error && ticket === false && (\r\n \r\n Hittade ingen biljett med den aktuella streckkoden.\r\n \r\n )}\r\n\r\n {ticket && (\r\n
\r\n );\r\n};\r\n\r\nexport default Modification;\r\n","import React, { useState, useContext } from \"react\";\r\nimport { useSelector, useDispatch } from \"react-redux\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport { Context, TOAST, CART_ARTICLE_ADD } from \"../../context\";\r\nimport { getCartArticle } from \"../cart/util\";\r\nimport { isPersonal, getSaleData } from \"./util\";\r\nimport { addArticle } from \"../../common/sale\";\r\nimport ProductContent from \"../Styles/ProductContent\";\r\nimport ProductHeader from \"./header\";\r\nimport ProductDescription from \"./description\";\r\nimport ProductImage from \"./image\";\r\nimport OverrideStartDate from \"./overrideStartDate\";\r\nimport OpenPrice from \"./openPrice\";\r\nimport ArticleList from \"./articleList\";\r\nimport ArticleSelect from \"./articleSelect\";\r\nimport Personal from \"./personal\";\r\nimport Modification from \"../Modification\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n product: {},\r\n}));\r\n\r\nconst Product = ({ product }) => {\r\n const [overrideDate, setOverrideDate] = useState();\r\n const [photoOpen, setPhotoOpen] = useState(false);\r\n const rdxDispatch = useDispatch();\r\n const { dispatch } = useContext(Context);\r\n const { config, language } = useSelector((state) => ({\r\n config: state.config,\r\n language: state.language,\r\n }));\r\n const [quantity, setQuantity] = useState(1);\r\n const [photo, setPhoto] = useState(\"\");\r\n const [loading, setLoading] = React.useState({ id: null, loading: false });\r\n const classes = useStyles();\r\n const isPersonalTicket = isPersonal(config, product);\r\n const productGroupConfig = config.productGroupConfig.find(\r\n (x) => x.name === product.name\r\n );\r\n\r\n const handleAdd = (product, article, values, actions, photo) => {\r\n const cartArticle = getCartArticle(product, config, article);\r\n setLoading({ id: product.plu, loading: true });\r\n const callback = (status, msg) => {\r\n setPhoto(\"\");\r\n setOverrideDate();\r\n if (status >= 400) {\r\n setQuantity(1);\r\n return dispatch({\r\n type: TOAST,\r\n payload: {\r\n text: msg,\r\n variant: \"error\",\r\n },\r\n });\r\n }\r\n setQuantity(1);\r\n setLoading({ id: product.plu, loading: false });\r\n dispatch({ type: CART_ARTICLE_ADD, payload: cartArticle });\r\n };\r\n const saleData = getSaleData(\r\n product,\r\n article,\r\n values,\r\n photo,\r\n quantity,\r\n overrideDate\r\n );\r\n rdxDispatch(addArticle(saleData, callback));\r\n values && actions.resetForm();\r\n };\r\n if (product.isInfo) {\r\n return (\r\n \r\n setBarcode(e.target.value)}\r\n fullWidth\r\n type=\"search\"\r\n />\r\n \r\n {language?.Fetch_Ticket || \"Hämta biljett\"}\r\n {loading && (\r\n
\r\n\r\n {error && (\r\n \r\n {ticket.article.name} \r\n {ticket.owner && (\r\n {`${ticket.owner.firstname} ${ticket.owner.lastname}`} \r\n )}\r\n {(ticket.validFrom || ticket.validUntil) && (\r\n \r\n {ticket.validFrom && moment(ticket.validFrom).format(\"ll\")} -{\" \"}\r\n {ticket.validUntil && moment(ticket.validUntil).format(\"ll\")}\r\n \r\n )}\r\n {ticket.applicableModifications.length < 1 && (\r\n \r\n Biljetten går inte att förlänga just nu, applicerbar\r\n förlängningsartikel saknas.\r\n \r\n )}\r\n
\r\n )}\r\n - \r\n {ticket.applicableModifications.map((a) => (\r\n
\r\n
\r\n );\r\n }\r\n return (\r\n \r\n \r\n \r\n )}\r\n
\r\n );\r\n};\r\n\r\nexport default Product;\r\n","import React from \"react\";\r\n\r\nconst Ticket = () => {\r\n return (\r\n \r\n {product.overrideStartDate && (\r\n setPhoto(photo)}\r\n handleAdd={(article, values, actions) =>\r\n handleAdd(product, article, values, actions, photo)\r\n }\r\n />\r\n ) : (\r\n
\r\n \r\n {product.isOpenPrice ? (\r\n handleAdd(article)}\r\n />\r\n ) : !productGroupConfig?.useGroupsAsItems ||\r\n product.articles.length < 3 ? (\r\n handleAdd(article)}\r\n articles={product.articles ? product.articles : [product]}\r\n language={language}\r\n isOverrideStartDate={product.overrideStartDate}\r\n overrideStartDate={overrideDate}\r\n setQuantity={setQuantity}\r\n quantity={quantity}\r\n isLoading={loading}\r\n />\r\n ) : (\r\n handleAdd(group, article)}\r\n articles={product.articles}\r\n group={product}\r\n language={language}\r\n useGroupsAsItems={productGroupConfig?.useGroupsAsItems}\r\n />\r\n )}\r\n
\r\n )}\r\n \n \n {price}\n \n \n {title}\n \n
\n \n \n {getTranslation.name}\n \n
\n \n
\n \n valueSet(e.currentTarget.value)}\n label={language.Extend}\n />\n
\n \n \n {loading ? \n \n \n \n \n \n {language.CouldNotFindTicket}\n \n \n \n
\n {/* */}\n {/* \n
\n );\n};\n\nexport default ProductSelector;\n","import {\n ActionIcon,\n Button,\n Container,\n createStyles,\n Divider,\n Grid,\n Group,\n Image,\n List,\n NumberInput,\n Text,\n ThemeIcon,\n Title,\n} from \"@mantine/core\";\nimport React, {\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { addArticle, addToCartTracking } from \"../../../common/sale\";\nimport { STATE_CULTURE, STATE_CURRENCY } from \"../../../common/state\";\nimport { getSaleData } from \"../util\";\nimport Markdown from \"react-markdown\";\nimport ProductSelector from \"./ProductSelector\";\nimport slugify from \"../../common/slugify\";\nimport axios from \"axios\";\nimport { motion } from \"framer-motion\";\nimport \"./styles.css\";\nimport { SaleContext } from \"../../common/saleProvider\";\nimport { useMediaQuery } from \"@mantine/hooks\";\nimport { HiMinusSm, HiPlusSm } from \"react-icons/hi\";\n\nconst useStyles = createStyles((theme) => ({\n container: {\n \"@media screen and (max-width: 768px)\": {\n paddingTop: \"0.3rem\",\n },\n },\n titleWrapper: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n gap: \"1rem\",\n button: {\n width: \"fit-content\",\n },\n },\n imageWrapper: {\n height: \"100%\",\n minHeight: \"12rem\",\n maxHeight: \"30rem\",\n },\n image: {\n width: \"100%\",\n height: \"100%\",\n maxHeight: \"30rem\",\n },\n stockWrapper: {\n marginTop: \".5rem\",\n \"@media screen and (max-width: 768px)\": {\n marginTop: \".35rem\",\n },\n },\n stockIndicator: {\n width: \"1rem\",\n height: \"1rem\",\n borderRadius: \"50%\",\n },\n inStock: {\n backgroundColor: theme.colors.green[1],\n },\n outOfStock: {\n backgroundColor: theme.colors.red[2],\n },\n stockText: {\n fontSize: \"1rem\",\n fontWeight: \"inherit\",\n },\n price: {\n display: \"flex\",\n alignItems: \"end\",\n justifySelf: \"end\",\n fontSize: \"1.15rem\",\n fontWeight: \"bold\",\n },\n list: {\n display: \"flex\",\n alignItems: \"center\",\n },\n button: {\n width: \"fit-content\",\n justifySelf: \"end\",\n },\n descriptionTitle: {\n fontSize: \"1rem\",\n },\n descriptionBody: {\n marginTop: \"0.5rem\",\n p: {\n marginTop: \"-.1rem\",\n },\n },\n buttonWrapper: {\n display: \"flex\",\n justifyContent: \"end\",\n },\n actionButton: {\n borderRadius: \"50%\",\n border: \"none\",\n },\n actionWrapper: {\n backgroundColor: \"#F3F3F4\",\n padding: \"0.3rem 0.4rem\",\n borderRadius: \"2rem\",\n width: \"fit-content\",\n minWidth: \"8.2rem\",\n },\n actionGrid: {\n display: \"flex\",\n flexDirection: \"row\",\n gap: \"1rem\",\n alignItems: \"center\",\n marginTop: \"1.5rem\",\n \"@media screen and (min-width: 769px)\": {\n gap: \"2rem\",\n },\n },\n alertWrapper: {\n width: \"100%\",\n },\n alertContainer: {\n position: \"absolute\",\n width: \"15rem\",\n marginTop: \"2.5rem\",\n },\n hideLabel: {\n opacity: 0,\n position: \"absolute\",\n width: \"0px\",\n height: \"0px\",\n },\n}));\nconst GroupProduct = ({ product, description }) => {\n const { config, culture, language, currency } = useSelector((state) => ({\n config: state.config,\n culture: state.cookies[STATE_CULTURE],\n language: state.language,\n currency: state.cookies[STATE_CURRENCY],\n }));\n const [quantity, quantitySet] = useState(1);\n const [addedToCart, addedToCartSet] = useState(null);\n const [selected, selectedSet] = useState(null);\n const [text, textSet] = useState(\"\");\n const { classes } = useStyles();\n const handlers = useRef();\n const quantityChangeRef = useRef();\n const rdxDispatch = useDispatch();\n const saleContext = useContext(SaleContext);\n const { sale } = saleContext.state;\n const mobile = useMediaQuery(\"(max-width: 768px)\");\n\n const handleAdd = () => {\n const productData = [\n {\n id: selected?.[0]?.plu,\n name: selected?.[0]?.name,\n price: selected?.[0]?.price?.amountInclVat,\n quantity: quantity,\n },\n ];\n addToCartTracking(currency, productData);\n announceQuantityChange(quantity);\n const callback = (status, msg) => {\n if (status === 200) {\n quantitySet(1);\n addedToCartSet(true);\n setTimeout(() => {\n addedToCartSet(null);\n }, 5000);\n }\n if (status !== 200) {\n quantitySet(1);\n addedToCartSet(false);\n setTimeout(() => {\n addedToCartSet(null);\n }, 5000);\n }\n };\n let article;\n let values;\n let photo;\n let overrideDate;\n const saleData = product.articles\n ? getSaleData(selected[0], article, values, photo, quantity, overrideDate)\n : {\n plu: selected.plu,\n quantity: quantity,\n priceInclVat: selected.priceInclVat * 100,\n };\n rdxDispatch(addArticle(saleData, callback));\n };\n\n useEffect(() => {\n axios\n .get(\n `${process.env.PUBLIC_URL}/ee-static/shop/${\n config?.shopName\n }/Texts/${slugify(product.name)}.${culture}.md`\n )\n .then((res) => textSet(res.data))\n .catch((err) => console.log(err));\n }, [product]);\n const uri = config?.apiUriOverride?.startsWith(\"http\")\n ? config.apiUriOverride\n : config.apiUri;\n const img = `${uri}/articleimage/${selected?.[0]?.imageFilename}`;\n const regex = /\\D/g;\n const reduce =\n product.articles &&\n product.articles.reduce((acc, curr) => {\n acc.push(curr.priceInclVat);\n return acc;\n }, []);\n\n const reduceChooseValue =\n product.openPriceValues &&\n product.openPriceValues.reduce((acc, curr) => {\n acc.push(curr);\n return acc;\n }, []);\n\n const sortPrice = (prices) => {\n if (prices && typeof prices?.[0] === typeof 0) {\n const sortOpenPrice = prices.sort((a, b) => a - b);\n return sortOpenPrice;\n } else if (prices && typeof prices?.[0] === typeof \"\") {\n const sortStringValue = prices.sort(\n (a, b) => a.replace(regex, \"\") - b.replace(regex, \"\")\n );\n return sortStringValue;\n }\n };\n\n const price = useCallback(() => {\n if (product?.priceInclVat > 0) {\n return product?.priceInclVat;\n }\n\n if (product?.openPriceValues && !reduceChooseValue) {\n return `${language.FromCost} ${product?.openPriceValues?.[0]} kr`;\n }\n\n if (selected?.[0]?.priceInclVat) {\n return selected?.[0].priceInclVat;\n }\n\n if (reduce) {\n return `${sortPrice(reduce)?.[0]} - ${\n sortPrice(reduce)?.[sortPrice(reduce).length - 1]\n }`;\n }\n\n if (reduceChooseValue) {\n return `${sortPrice(reduceChooseValue)?.[0]} kr - ${\n sortPrice(reduceChooseValue)?.[sortPrice(reduceChooseValue).length - 1]\n } kr`;\n }\n }, [product, selected, reduceChooseValue, reduce]);\n\n const disabledIncrement = useMemo(() => {\n if (sale) {\n const qty = sale.items.filter(\n (el) => el.article.plu === selected?.[0]?.plu\n )?.[0]?.quantity;\n const calc = selected?.[0]?.inStock - (qty ? qty : 0);\n if (quantity >= calc) {\n return true;\n }\n }\n }, [sale, selected, quantity]);\n\n const disabledAdd = useMemo(() => {\n if (sale) {\n const qty = sale.items.filter(\n (el) => el.article.plu === selected?.[0]?.plu\n )?.[0]?.quantity;\n const calc = selected?.[0]?.inStock - (qty ? qty : 0);\n if (quantity > calc) {\n return true;\n }\n }\n }, [sale, selected, quantity]);\n\n const isAddedToCart = sale?.items.filter(\n (el) => el?.article?.plu === selected?.[0]?.plu\n );\n\n const announceQuantityChange = (newQuantity) => {\n quantityChangeRef.current.innerText = `${language.Quantity} ${newQuantity}`;\n };\n\n const increment = () => {\n handlers.current.increment();\n announceQuantityChange(quantity + 1);\n };\n\n const decrement = () => {\n handlers.current.decrement();\n announceQuantityChange(quantity - 1);\n };\n\n if (!product) return null;\n return (\n \n {config?.useProductImageSelector && !product?.openPriceValues ? (\n
\n \n \n {language.ChooseVariant}\n \n \n {language.ChooseArticle}\n \n
\n ) : (\n !product?.openPriceValues &&\n itemsArr &&\n itemsArr.length > 0 && (\n \n {!product?.openPriceValues &&\n product.articles.map((el, i) => (\n
\n \n valueSet(el.id)}\n aria-label={`${language.ChooseVariant} ${getName(el)} ${\n el?.id === value ? language.Chosen : \"\"\n }`}\n >\n
\n ))}\n \n \n {product.name}\n \n
\n \n \n decrement()}\n disabled={\n (!selected && true) ||\n quantity === 1 ||\n product.isGiftCertificate ||\n product.name.includes(\"Presentkort\")\n }\n aria-label={language.DecreaseQuantity}\n >\n quantitySet(val)}\n disabled={\n (!selected && true) ||\n product.isGiftCertificate ||\n product.name.includes(\"Presentkort\")\n }\n handlersRef={handlers}\n max={selected?.[0]?.inStock ? selected?.[0].inStock : 99999}\n min={1}\n step={1}\n styles={{\n input: {\n backgroundColor: \"transparent\",\n border: \"none\",\n width: 35,\n textAlign: \"center\",\n height: 35,\n fontWeight: \"600\",\n fontSize: \"1.25rem\",\n padding: 0,\n },\n }}\n />\n increment()}\n >\n \n \n {disabledAdd && isAddedToCart?.length > 0\n ? language.MaxInCart\n : disabledAdd && language.Not_In_Stock}\n {!disabledAdd && addedToCart\n ? language.Added_To_Cart\n : !disabledAdd && language.AddToCartBtn}\n \n
\n \n\n \n
\n \n \n
\n \n \n \n
\n \n {\n dispatch({\n type: TOAST,\n payload: {\n text: language.Form_Error_Photo,\n variant: \"error\",\n },\n });\n }}\n >\n {photo ? (\n preview()\n ) : (\n openFile(openRef.current)}\n >\n {!photo ? language.Choose_Photo : language.ChangeImage}\n \n\n {fileUrl && (\n <>\n
\n\n {fileUrl && (\n \n \n \n \n \n \n \n \n \n\n \n {language.DropPhoto} \n {language.FileNotSupported} \n {language.UploadPhoto} \n \n \n {language.DragFile} {language.MaxSize}\n \n
\n )}\n \n\n \n setZoom(zoom)}\n />\n
\n \n )}\n \n Zoom\n \n {\n fileSet([]);\n fileUrlSet(null);\n }}\n >\n {language.ChangeImage}\n \n {\n setRotation(0);\n setZoom(1);\n setCrop({ x: 0, y: 0 });\n }}\n >\n {language.Reset}\n \n saveCroppedImage()}\n >\n {language.Save}\n \n \n
\n )}\n \n );\n};\n\nexport default PersonalImage;\n","import React from \"react\";\n\nconst Asterisk = ({ strokeWidth }) => {\n return (\n \n handleSubmit(val))}\n className={classes.form}\n autoComplete=\"on\"\n >\n \n \n \n {config &&\n config?.formConfig?.[0].visibleFields.includes(\"firstName\") && (\n \n\n \n {config &&\n config?.formConfig?.[0].visibleFields.includes(\"street\") && (\n \n \n )}\n {config &&\n config?.formConfig?.[0].visibleFields.includes(\n \"streetNumber\"\n ) && (\n \n \n )}\n {config &&\n config?.formConfig?.[0].visibleFields.includes(\"zipCode\") && (\n \n \n )}\n {config &&\n config?.formConfig?.[0].visibleFields.includes(\"city\") && (\n \n \n )}\n {config &&\n config?.formConfig?.[0].visibleFields.includes(\n \"countryCode\"\n ) && (\n \n \n )}\n \n \n \n {config &&\n config?.formConfig?.[0].visibleFields.includes(\"photo\") && (\n <>\n \n \n \n \n {addedToCart ? language.Added_To_Cart : language.AddToCartBtn}\n \n \n \n
\n );\n};\n\nexport default PersonalTicketForm;\n","import { z } from \"zod\";\r\n\r\nexport const getZodSchema = (checkIfRequired, language) => {\r\n const noValidationNeeded = (field, value) => {\r\n return !checkIfRequired(field) && value === \"\";\r\n };\r\n\r\n return z.object({\r\n firstName: z\r\n .string()\r\n .max(100, { message: language.Form_Error_InvalidLength })\r\n .refine(\r\n (value) => noValidationNeeded(\"firstName\", value) || value.length > 1,\r\n {\r\n message: language.Form_Error_FirstName,\r\n }\r\n ),\r\n lastName: z\r\n .string()\r\n .max(100, { message: language.Form_Error_InvalidLength })\r\n .refine(\r\n (value) => noValidationNeeded(\"lastName\", value) || value.length > 1,\r\n {\r\n message: language.Form_Error_LastName,\r\n }\r\n ),\r\n civicRegistrationNumber: z\r\n .string()\r\n .trim()\r\n .refine(\r\n (value) =>\r\n noValidationNeeded(\"civicRegistrationNumber\", value) ||\r\n /^([1-2][0|9]){0,1}[0-9]{2}[0-1][0-9][0-3][0-9][-]{0,1}[0-9]{4}$/.test(\r\n value\r\n ),\r\n {\r\n message: language.Form_Error_CivicRegistrationNumber_Invalid,\r\n }\r\n )\r\n .refine(\r\n (value) =>\r\n noValidationNeeded(\"civicRegistrationNumber\", value) ||\r\n (value.replace(\"-\", \"\").length >= 10 &&\r\n value.replace(\"-\", \"\").length <= 12),\r\n {\r\n message: language.Form_Error_CivicRegistrationNumber_Length,\r\n }\r\n ),\r\n email: z\r\n .string()\r\n .max(100, { message: language.Form_Error_InvalidLength })\r\n .refine(\r\n (value) =>\r\n noValidationNeeded(\"email\", value) ||\r\n z.string().email().safeParse(value).success,\r\n { message: language.Form_Error_Email }\r\n ),\r\n cellPhone: z\r\n .string()\r\n .max(15, { message: language.Form_Error_InvalidLength })\r\n .refine(\r\n (value) => noValidationNeeded(\"cellPhone\", value) || value.length > 9,\r\n {\r\n message: language.Form_Error_CellPhone,\r\n }\r\n ),\r\n street: z\r\n .string()\r\n .max(100, { message: language.Form_Error_InvalidLength })\r\n .refine(\r\n (value) => noValidationNeeded(\"street\", value) || value.length > 1,\r\n {\r\n message: language.Form_Error_Street,\r\n }\r\n ),\r\n streetNumber: z\r\n .string()\r\n .max(100, { message: language.Form_Error_InvalidLength })\r\n .refine(\r\n (value) =>\r\n noValidationNeeded(\"streetNumber\", value) || value.length > 0,\r\n {\r\n message: language.Form_Error_StreetNumber,\r\n }\r\n ),\r\n zipCode: z\r\n .string()\r\n .max(20, { message: language.Form_Error_InvalidLength })\r\n .refine(\r\n (value) =>\r\n noValidationNeeded(\"zipCode\", value) ||\r\n /^[0-9]{3}(\\s?){0,1}[0-9]{2,}$/.test(value),\r\n\r\n {\r\n message: language.Form_Error_CityCode,\r\n }\r\n )\r\n .transform(Number),\r\n city: z\r\n .string()\r\n .max(100, { message: language.Form_Error_InvalidLength })\r\n .refine(\r\n (value) => noValidationNeeded(\"city\", value) || value.length > 1,\r\n {\r\n message: language.Form_Error_City,\r\n }\r\n ),\r\n countryCode: z\r\n .string()\r\n .max(100, { message: language.Form_Error_InvalidLength })\r\n .refine(\r\n (value) => noValidationNeeded(\"countryCode\", value) || value.length > 1,\r\n {\r\n message: language.Form_Error_CountryCode,\r\n }\r\n ),\r\n });\r\n};\r\n","import {\n Container,\n createStyles,\n Grid,\n Image,\n Popover,\n SimpleGrid,\n Text,\n Title,\n} from \"@mantine/core\";\nimport React, { useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { addArticle, addToCartTracking } from \"../../../common/sale\";\nimport { STATE_CULTURE, STATE_CURRENCY } from \"../../../common/state\";\nimport { getSaleData } from \"../util\";\nimport Markdown from \"react-markdown\";\nimport { motion } from \"framer-motion\";\nimport PersonalTicketForm from \"./PersonalTicketForm\";\nimport { useMediaQuery } from \"@mantine/hooks\";\n\nconst useStyles = createStyles((theme) => ({\n container: {\n \"@media screen and (max-width: 768px)\": {\n paddingTop: \"0.3rem\",\n },\n },\n titleWrapper: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n gap: \"1rem\",\n button: {\n width: \"fit-content\",\n },\n },\n stockWrapper: {\n marginTop: \".5rem\",\n \"@media screen and (max-width: 768px)\": {\n marginTop: \".35rem\",\n },\n },\n stockIndicator: {\n width: \"1rem\",\n height: \"1rem\",\n borderRadius: \"50%\",\n },\n inStock: {\n backgroundColor: theme.colors.green[1],\n },\n outOfStock: {\n backgroundColor: theme.colors.red[2],\n },\n stockText: {\n fontSize: \"1rem\",\n fontWeight: \"inherit\",\n },\n price: {\n display: \"flex\",\n alignItems: \"end\",\n justifySelf: \"end\",\n fontSize: \"1.25rem\",\n fontWeight: \"bold\",\n alignSelf: \"center\",\n },\n list: {\n display: \"flex\",\n alignItems: \"center\",\n },\n button: {\n width: \"fit-content\",\n justifySelf: \"end\",\n },\n descriptionTitle: {\n fontSize: \"1rem\",\n marginTop: \"1rem\",\n },\n descriptionBody: {\n marginTop: \"0.5rem\",\n p: {\n marginTop: \"-.1rem\",\n },\n },\n buttonWrapper: {\n display: \"flex\",\n justifyContent: \"end\",\n },\n actionButton: {\n borderRadius: \"50%\",\n border: \"none\",\n },\n actionWrapper: {\n backgroundColor: \"#F3F3F4\",\n padding: \"0.5rem\",\n borderRadius: \"2rem\",\n width: \"fit-content\",\n minWidth: \"8.2rem\",\n },\n actionGrid: {\n display: \"flex\",\n flexDirection: \"row\",\n gap: \"1rem\",\n alignItems: \"center\",\n marginTop: \"1rem\",\n \"@media screen and (min-width: 769px)\": {\n gap: \"2rem\",\n },\n },\n alertWrapper: {\n width: \"100%\",\n },\n imageWrapper: {\n height: \"100%\",\n \"@media screen and (max-width: 990px)\": {\n // minHeight: \"25rem\",\n },\n },\n addToCart: {\n display: \"flex\",\n justifyContent: \"end\",\n },\n image: {\n height: \"100%\",\n maxHeight: \"20rem\",\n // \"@media screen and (max-width: 990px)\": {\n // minHeight: \"25rem\",\n // },\n },\n}));\nconst PersonalTicket = ({ product }) => {\n const [addedToCart, addedToCartSet] = useState(null);\n const [photo, photoSet] = useState(null);\n const [values, valuesSet] = useState([]);\n const { culture, config, language, currency } = useSelector((state) => ({\n config: state.config,\n language: state.language,\n culture: state.cookies[STATE_CULTURE],\n currency: state.cookies[STATE_CURRENCY],\n }));\n\n const rdxDispatch = useDispatch();\n const { classes } = useStyles();\n const matches = useMediaQuery(\"(max-width: 990px)\");\n\n const getTranslation = product.translation.filter(\n (el) => el.culture === culture\n )[0];\n\n const productData = [\n {\n id: product.plu,\n name: product.name,\n price: product.price.amountInclVat,\n quantity: 1,\n },\n ];\n\n const handleAdd = (values) => {\n const callback = (status, msg) => {\n if (status === 200) {\n addedToCartSet(true);\n setTimeout(() => {\n addedToCartSet(null);\n }, 5000);\n }\n if (status !== 200) {\n addedToCartSet(false);\n setTimeout(() => {\n addedToCartSet(null);\n }, 5000);\n }\n };\n const article = product.id;\n let quantity = 1;\n let overrideDate;\n const saleData = getSaleData(\n product,\n article,\n values,\n photo,\n quantity,\n overrideDate\n );\n addToCartTracking(currency, productData);\n rdxDispatch(addArticle(saleData, callback));\n };\n\n return (\n {language.PersonalDetails}
\n{language.FillForm}
\n\n
\n {language.Photo}
\n {checkIfRequired(\"photo\") &&{language.AddPhoto}
\n\n \n \n \n \n \n \n \n {!product.isOpenPrice ? product.priceInclVat : \"\"}\n \n \n \n {language.Description}\n \n \n \n \n
\n );\n};\n\nexport default PersonalTicket;\n","import {\n ActionIcon,\n Button,\n Container,\n createStyles,\n Divider,\n Grid,\n Group,\n Image,\n List,\n NumberInput,\n Text,\n ThemeIcon,\n Title,\n} from \"@mantine/core\";\nimport React, { useContext, useMemo, useRef, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { addArticle, addToCartTracking } from \"../../../common/sale\";\nimport { STATE_CULTURE, STATE_CURRENCY } from \"../../../common/state\";\nimport { getSaleData } from \"../util\";\nimport Markdown from \"react-markdown\";\nimport { motion } from \"framer-motion\";\nimport PersonalTicket from \"./PersonalTicket\";\nimport { SaleContext } from \"../../common/saleProvider\";\nimport { useMediaQuery } from \"@mantine/hooks\";\nimport { HiMinusSm, HiPlusSm } from \"react-icons/hi\";\n\nconst useStyles = createStyles((theme) => ({\n container: {\n \"@media screen and (max-width: 768px)\": {\n paddingTop: \"0.3rem\",\n },\n },\n titleWrapper: {\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\",\n gap: \"1rem\",\n button: {\n width: \"fit-content\",\n },\n },\n stockWrapper: {\n marginTop: \".5rem\",\n \"@media screen and (max-width: 768px)\": {\n marginTop: \".35rem\",\n },\n },\n stockIndicator: {\n width: \"1rem\",\n height: \"1rem\",\n borderRadius: \"50%\",\n },\n inStock: {\n backgroundColor: theme.colors.green[1],\n },\n outOfStock: {\n backgroundColor: theme.colors.red[2],\n },\n stockText: {\n fontSize: \"1rem\",\n fontWeight: \"inherit\",\n },\n price: {\n display: \"flex\",\n alignItems: \"end\",\n justifySelf: \"end\",\n fontSize: \"1.15rem\",\n fontWeight: \"bold\",\n },\n list: {\n display: \"flex\",\n alignItems: \"center\",\n },\n button: {\n width: \"fit-content\",\n justifySelf: \"end\",\n },\n descriptionTitle: {\n fontSize: \"1rem\",\n },\n descriptionBody: {\n marginTop: \"0.5rem\",\n p: {\n marginTop: \"-.1rem\",\n },\n },\n buttonWrapper: {\n display: \"flex\",\n justifyContent: \"end\",\n },\n actionButton: {\n borderRadius: \"50%\",\n border: \"none\",\n },\n actionWrapper: {\n backgroundColor: \"#F3F3F4\",\n padding: \"0.3rem 0.4rem\",\n borderRadius: \"2rem\",\n width: \"fit-content\",\n minWidth: \"8.2rem\",\n justifyContent: \"space-between !important\",\n },\n actionGrid: {\n display: \"flex\",\n flexDirection: \"row\",\n gap: \"1rem\",\n alignItems: \"center\",\n marginTop: \"1rem\",\n \"@media screen and (min-width: 769px)\": {\n gap: \"2rem\",\n },\n },\n alertWrapper: {\n width: \"100%\",\n },\n hideLabel: {\n opacity: 0,\n position: \"absolute\",\n width: \"0px\",\n height: \"0px\",\n },\n}));\n\nconst SingleProduct = ({ product, description }) => {\n const { culture, language, currency } = useSelector((state) => ({\n culture: state.cookies[STATE_CULTURE],\n language: state.language,\n currency: state.cookies[STATE_CURRENCY],\n }));\n\n const [quantity, quantitySet] = useState(1);\n const [addedToCart, addedToCartSet] = useState(null);\n const [openPrice, openPriceSet] = useState(100);\n const { classes } = useStyles();\n const handlers = useRef();\n const quantityChangeRef = useRef();\n const rdxDispatch = useDispatch();\n const saleContext = useContext(SaleContext);\n const { sale } = saleContext.state;\n const mobile = useMediaQuery(\"(max-width: 768px)\");\n\n const getTranslation = product?.translation.filter(\n (el) => el?.culture === culture\n )?.[0];\n\n const productData = [\n {\n id: product.plu,\n name: product.name,\n price: product.price.amountInclVat,\n quantity: quantity,\n },\n ];\n\n const handleAdd = () => {\n addToCartTracking(currency, productData);\n announceQuantityChange(quantity);\n\n const callback = (status, msg) => {\n if (status === 200) {\n quantitySet(1);\n addedToCartSet(true);\n setTimeout(() => {\n addedToCartSet(null);\n }, 5000);\n }\n if (status !== 200) {\n quantitySet(1);\n addedToCartSet(false);\n setTimeout(() => {\n addedToCartSet(null);\n }, 5000);\n }\n };\n let article;\n let values;\n let photo;\n let overrideDate;\n const saleData = !product.isOpenPrice\n ? getSaleData(product, article, values, photo, quantity, overrideDate)\n : {\n plu: product.plu,\n quantity: quantity,\n priceInclVat: openPrice * 100,\n };\n rdxDispatch(addArticle(saleData, callback));\n };\n // const placeholder = `${process.env.PUBLIC_URL}/ee-static/shop/${config?.shopName}/Images/placeholder.png`;\n const disabledIncrement = useMemo(() => {\n if (sale) {\n const qty = sale.items.filter(\n (el) => el.article.plu === product?.plu\n )?.[0]?.quantity;\n const calc = product?.inStock - (qty ? qty : 0);\n if (quantity >= calc) {\n return true;\n }\n }\n }, [sale, product, quantity]);\n\n const disabledAdd = useMemo(() => {\n if (sale) {\n const qty = sale.items.filter(\n (el) => el.article.plu === product?.plu\n )?.[0]?.quantity;\n const calc = product?.inStock - (qty ? qty : 0);\n if (\n quantity > calc ||\n quantity === undefined ||\n (product.isOpenPrice && !openPrice)\n ) {\n return true;\n }\n }\n }, [sale, product, quantity, openPrice]);\n\n const isAddedToCart = sale?.items.filter(\n (el) => el.article.plu === product.plu\n );\n\n const announceQuantityChange = (newQuantity) => {\n quantityChangeRef.current.innerText = `${language.Quantity} ${newQuantity}`;\n };\n\n const increment = () => {\n handlers.current.increment();\n announceQuantityChange(quantity + 1);\n };\n\n const decrement = () => {\n handlers.current.decrement();\n announceQuantityChange(quantity - 1);\n };\n\n return (\n \n \n {getTranslation.name}\n \n
\n \n
\n \n
\n \n \n \n \n \n \n \n {language.CouldNotAddProduct}\n \n \n \n
\n \n \n {getTranslation.name}\n \n
\n \n {product.inStock > 0\n ? language.In_Stock\n : language.Not_In_Stock}\n
\n \n )}\n \n\n openPriceSet(val)}\n min={1}\n icon={\n \n kr\n \n }\n parser={(value) => value.replace(/[$€]\\s?|(,*)/g, \"\")}\n formatter={(value) =>\n !Number.isNaN(parseFloat(value))\n ? `${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, \"\")\n : \"\"\n }\n />\n
\n )}\n \n \n decrement()}\n aria-label={`${getTranslation.name} ${language.DecreaseQuantity}`}\n >\n quantitySet(val)}\n handlersRef={handlers}\n max={product.inStock}\n min={1}\n step={1}\n disabled={\n product.inStock <= 0 ||\n (product.isOpenPrice && !openPrice) ||\n product.isGiftCertificate\n }\n styles={{\n input: {\n backgroundColor: \"transparent\",\n border: \"none\",\n width: 35,\n textAlign: \"center\",\n height: 35,\n fontWeight: \"600\",\n fontSize: \"1.25rem\",\n padding: 0,\n },\n }}\n />\n increment()}\n >\n \n \n {!product.isOpenPrice &&\n disabledAdd &&\n isAddedToCart?.length > 0\n ? language.MaxInCart\n : !product.isOpenPrice &&\n disabledAdd &&\n language.Not_In_Stock}\n\n {!disabledAdd && addedToCart\n ? language.Added_To_Cart\n : !disabledAdd && language.AddToCartBtn}\n\n {product.isOpenPrice && disabledAdd && language.AddToCartBtn}\n \n
\n \n\n \n
\n \n \n
\n \n \n\n \n
\n \n \n \n \n navigate(-1)}\n >\n {language.Back}\n \n \n {product?.articles || product?.openPriceValues?.length > 0 ? (\n
\n );\n};\n\nexport default ProductV2;\n","import React, { useContext, useMemo } from \"react\";\nimport { useSelector } from \"react-redux\";\nimport { getProduct } from \"./util\";\nimport Product from \"../../components/Product\";\nimport PageLayout from \"../../components/Styles/PageLayout\";\nimport PageContent from \"../../components/Styles/PageContent\";\nimport { STATE_CULTURE } from \"../../common/state\";\nimport { DataContext } from \"../../components/common/dataProvider\";\nimport ProductV2 from \"../../components/Product/ProductV2\";\nimport { Button, Container, Text, Title } from \"@mantine/core\";\nimport { useNavigate } from \"@reach/router\";\nimport { SaleContext } from \"../../components/common/saleProvider\";\n\nconst ProductPage = ({ id }) => {\n const { config, culture, language } = useSelector((state) => ({\n config: state.config,\n culture: state.cookies[STATE_CULTURE],\n language: state.language,\n }));\n const { data } = useContext(DataContext);\n const saleContext = useContext(SaleContext);\n const { sale } = saleContext.state;\n\n const product = useMemo(\n () => getProduct(data, config, id, culture),\n [data, id, config, culture, sale]\n );\n const navigate = useNavigate();\n const isProduct = product?.plu || product?.articles;\n\n if (!product || !isProduct) {\n return (\n \r\n
\r\n );\r\n};\r\n\r\nexport default Article;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport classNames from \"classnames\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport moment from \"moment\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport Article from \"./article\";\r\nimport ButtonBase from \"@material-ui/core/ButtonBase\";\r\n\r\nconst useStyles = makeStyles(\r\n (theme) =>\r\n console.log(theme) || {\r\n container: {},\r\n timeContainer: {\r\n width: \"320px\",\r\n margin: \"0 auto\",\r\n },\r\n timePickerContainer: {\r\n width: \"320px\",\r\n margin: \"0 auto\",\r\n display: \"grid\",\r\n gridTemplateColumns: \"repeat(4, 1fr)\",\r\n gridGap: \"1px\",\r\n boxShadow: theme.shadows[1],\r\n backgroundColor: \"#e5e5e5\",\r\n marginBottom: \"24px\",\r\n },\r\n timePickerItem: {\r\n backgroundColor: theme.app.background[1],\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n minHeight: \"50px\",\r\n cursor: \"pointer\",\r\n transition: theme.transitions.create([\"background-color\"], {\r\n duration: theme.transitions.duration.short,\r\n easing: theme.transitions.easing.easeInOut,\r\n }),\r\n \"&:hover\": {\r\n backgroundColor: theme.palette.action.hover,\r\n },\r\n \"&:focus\": {\r\n border: \"3px solid black\",\r\n borderRadius: \"3px\",\r\n },\r\n },\r\n selected: {\r\n backgroundColor: \"black\",\r\n color: \"white\",\r\n \"&:hover\": {\r\n backgroundColor: \"black\",\r\n color: \"white\",\r\n },\r\n },\r\n disabled: {\r\n pointerEvents: \"none\",\r\n color: \"black\",\r\n opacity: \"0.6\",\r\n },\r\n ticketsContainer: {},\r\n ticketsHeading: {\r\n display: \"grid\",\r\n gridTemplateColumns: \"auto 1fr\",\r\n gridGap: \"16px\",\r\n alignItems: \"baseline\",\r\n },\r\n headingInfo: { textAlign: \"right\" },\r\n remaining: {\r\n fontSize: \"0.625rem\",\r\n color: \"inherit\",\r\n },\r\n remainingSelected: { color: \"white\" },\r\n }\r\n);\r\n\r\nconst TimePicker = (props) => {\r\n const { occasions, eventImage } = props;\r\n const classes = useStyles();\r\n const { language, config } = useSelector((state) => ({\r\n config: state.config,\r\n language: state.language,\r\n }));\r\n const [occasion, setOccasion] = useState();\r\n const [filteredTickets, setFilteredTickets] = useState();\r\n useEffect(() => {\r\n if (occasion) {\r\n setFilteredTickets(null);\r\n const filteredOccasion = occasions.find((o) => o.time === occasion.time);\r\n if (filteredOccasion) {\r\n const articles = filteredOccasion.articles.sort(\r\n (a, b) => a.plu - b.plu\r\n );\r\n setFilteredTickets(articles);\r\n }\r\n }\r\n }, [occasion, occasions]);\r\n\r\n const getRemainingText = (remaining) => {\r\n if (remaining < 1) return language.Full;\r\n if (remaining < 2)\r\n return `${language.ApproximatelyShort} ${remaining} ${language.Spot}`;\r\n return `${language.ApproximatelyShort} ${remaining} ${language.Spots}`;\r\n };\r\n\r\n return (\r\n \r\n \r\n {translatedName}\r\n \r\n \r\n {a.priceInclVat}\r\n \r\n
\r\n \r\n {occasion.remaining < 1 ? (\r\n \r\n {language.Allotment_Full}\r\n \r\n ) : (\r\n <>\r\n setQuantity(v)}\r\n language={language}\r\n value={quantity}\r\n hideLabel={true}\r\n max={getMax()}\r\n />\r\n add()}\r\n className={`${classes.addButton} ${\r\n session === \"adding\" ? classes.disabledButton : \"\"\r\n }`}\r\n disabled={disabled()}\r\n color=\"primary\"\r\n >\r\n {language.Article_Add}\r\n {loading && (\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default TimePicker;\r\n","import React from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { useQuery } from \"@apollo/react-hooks\";\r\nimport gql from \"graphql-tag\";\r\nimport moment from \"moment\";\r\nimport classNames from \"classnames\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport Article from \"./article\";\r\nimport TimePicker from \"./timepicker\";\r\nimport { STATE_CURRENCY, STATE_CULTURE } from \"../../common/state\";\r\n\r\nconst useStyles = makeStyles({\r\n container: {},\r\n heading: {},\r\n occasionContainer: {},\r\n articlesContainer: {\r\n marginTop: \"16px\",\r\n },\r\n});\r\n\r\nconst query = gql`\r\n query detailQuery(\r\n $currency: String\r\n $culture: String\r\n $posId: Int\r\n $from: DateTime\r\n $until: DateTime\r\n ) {\r\n allotments(\r\n currency: $currency\r\n culture: $culture\r\n posId: $posId\r\n from: $from\r\n until: $until\r\n ) {\r\n description\r\n imageFileName\r\n translation {\r\n culture\r\n name\r\n description\r\n }\r\n occasions {\r\n time\r\n remaining\r\n allotment {\r\n id\r\n maxPerSale\r\n }\r\n articles {\r\n id\r\n name\r\n description\r\n imageFilename\r\n plu\r\n priceInclVat\r\n translation {\r\n culture\r\n name\r\n description\r\n }\r\n isPersonalTicket\r\n }\r\n }\r\n }\r\n }\r\n`;\r\n\r\nconst Articles = (props) => {\r\n const { from, until, event } = props;\r\n const eventName = event.name;\r\n const eventImage = event.imageFileName || undefined;\r\n const classes = useStyles();\r\n const { config, culture, currency, language } = useSelector((state) => ({\r\n config: state.config,\r\n culture: state.cookies[STATE_CULTURE],\r\n currency: state.cookies[STATE_CURRENCY],\r\n language: state.language,\r\n }));\r\n const { posId } = config;\r\n const { data, loading, error } = useQuery(query, {\r\n variables: { posId, currency, culture, from, until },\r\n });\r\n\r\n if (!from || !until)\r\n return (\r\n \r\n {language.Choose_Time} \r\n
\r\n \r\n {occasions.map((o, i) => {\r\n const selected = occasion ? occasion.time === o.time : false;\r\n const disabled = o.remaining < 1;\r\n return (\r\n setOccasion(o)}\r\n disabled={disabled}\r\n >\r\n
\r\n {filteredTickets ? (\r\n \r\n \r\n {moment(o.time).format(\"HH:mm\")}\r\n \r\n {config.showRemaining && (\r\n \r\n {getRemainingText(o.remaining)}\r\n \r\n )}\r\n
\r\n \r\n );\r\n })}\r\n \r\n
\r\n ) : (\r\n \r\n \r\n {language.Tickets}\r\n \r\n \r\n {moment(occasion.time).format(\"llll\")}\r\n \r\n
\r\n \r\n {filteredTickets.map((a) => (\r\n
\r\n \r\n \r\n {language.Tickets}\r\n \r\n \r\n {language.Choose_Time}\r\n \r\n
\r\n )}\r\n \r\n \r\n {language.Tickets}\r\n \r\n \r\n {language.Choose_Date_In_Calendar}\r\n \r\n
\r\n );\r\n if (loading)\r\n return (\r\n \r\n \r\n {language.Tickets}\r\n \r\n \r\n loading...\r\n
\r\n \r\n );\r\n if (error)\r\n return (\r\n \r\n
\r\n );\r\n\r\n const occasions =\r\n data.allotments.length > 0\r\n ? data.allotments.find((a) => a.description === eventName).occasions\r\n : [];\r\n if (occasions.length > 1) {\r\n return \r\n Bad:{\" \"}\r\n {error.graphQLErrors.map(({ message }, i) => (\r\n {message}\r\n ))}\r\n \r\n \r\n \r\n {language.Tickets}\r\n \r\n {occasions.map((o, i) => {\r\n const articles = o.articles.sort((a, b) => a.plu - b.plu);\r\n return (\r\n
\r\n );\r\n};\r\n\r\nexport default Articles;\r\n","import React, { useEffect, useState } from \"react\";\nimport { useLocation } from \"@reach/router\";\nimport { useSelector } from \"react-redux\";\nimport moment from \"moment\";\nimport axios from \"axios\";\nimport classNames from \"classnames\";\nimport { makeStyles } from \"@material-ui/styles\";\nimport Button from \"@material-ui/core/Button\";\nimport Divider from \"@material-ui/core/Divider\";\nimport Typography from \"@material-ui/core/Typography\";\nimport IconButton from \"@material-ui/core/IconButton\";\nimport PrevIcon from \"@material-ui/icons/ChevronLeft\";\nimport NextIcon from \"@material-ui/icons/ChevronRight\";\nimport ImageGallery from \"react-image-gallery\";\nimport Markdown from \"react-markdown\";\nimport Calendar from \"../common/Calendar\";\nimport Articles from \"./articles\";\nimport { getOccasionTimes } from \"./util\";\nimport SocialShare from \"../common/socialShare\";\nimport { STATE_CULTURE } from \"../../common/state\";\nimport { ReactComponent as Placeholder } from \"../../images/placeholder.svg\";\n\nlet source;\nconst useStyles = makeStyles((theme) => ({\n header: {\n height: \"54px\",\n display: \"flex\",\n alignItems: \"center\",\n },\n divider: {\n marginBottom: \"16px\",\n },\n titleText: {\n flexGrow: 1,\n \"@media(max-width: 576px)\": {\n fontSize: \"1.125rem\",\n },\n },\n backContainer: {\n marginBottom: \"16px\",\n },\n contentContainer: {\n display: \"grid\",\n gridTemplateColumns: \"450px 1fr\",\n gridGap: \"16px\",\n \"@media(max-width: 768px)\": {\n gridTemplateColumns: \"350px 1fr\",\n },\n \"@media(max-width: 576px)\": {\n gridTemplateColumns: \"1fr\",\n },\n },\n calendarContainer: {\n marginBottom: \"24px\",\n display: \"flex\",\n justifyContent: \"center\",\n paddingTop: \"1px\",\n },\n calendar: {\n width: \"100%\",\n \"@media(max-width: 667px)\": {\n width: \"100%\",\n },\n },\n description: {\n color: theme.app.secondaryColor,\n },\n carouselButton: {\n backgroundColor: \"rgba(0,0,0,0.23)\",\n color: \"white\",\n },\n left: {\n position: \"absolute\",\n zIndex: 100,\n left: 0,\n top: \"50%\",\n transform: \"translate(0, -50%)\",\n },\n right: {\n position: \"absolute\",\n zIndex: 100,\n right: 0,\n top: \"50%\",\n transform: \"translate(0, -50%)\",\n },\n placeholder: {\n background: theme.app.background[2],\n border: `1px solid ${theme.app.borderColor}`,\n borderRadius: \"4px\",\n },\n image: {\n maxWidth: \"100%\",\n },\n}));\n\nconst Event = (props) => {\n const { filter, event } = props;\n const location = useLocation();\n const classes = useStyles();\n const { config, language, culture } = useSelector((state) => ({\n config: state.config,\n language: state.language,\n culture: state.cookies[STATE_CULTURE],\n }));\n const name =\n event.translation.find((t) => t.culture === culture)?.name ??\n language[event.name] ??\n event.name;\n const [text, setText] = useState(\"\");\n const [from, setFrom] = useState();\n const [until, setUntil] = useState();\n const [singleOccasion, setSingleOccasion] = useState(false);\n\n useEffect(() => {\n if (event.occasions.length < 2) {\n setSingleOccasion(true);\n const singleOccasionTimes = getOccasionTimes(event.occasions[0].time);\n setFrom(singleOccasionTimes.from);\n setUntil(singleOccasionTimes.until);\n }\n }, [event.occasions]);\n\n let filterOverride = null;\n if (\n event.occasions.length > 1 &&\n (filter === undefined || (Array.isArray(filter) && filter.length === 0))\n ) {\n const occasions = event.occasions.map((a) => a.time);\n const orderedOccasions = [...occasions].sort();\n const firstOccasion = moment(orderedOccasions[0]).format(\"YYYYMM\");\n console.log(\n \"--> Set event date filter override to first coming month with occasion:\",\n firstOccasion\n );\n filterOverride = firstOccasion;\n }\n\n useEffect(() => {\n let CancelToken = axios.CancelToken;\n source = CancelToken.source();\n if (event) {\n setText(\n event.translation.find((t) => t.culture === culture)?.description ?? \"\"\n );\n }\n return () => source.cancel(\"Event Component Is Unmounting\");\n }, [culture, event]);\n\n const handleDateChange = (date) => {\n const occasionTimes = getOccasionTimes(date);\n setFrom(occasionTimes.from);\n setUntil(occasionTimes.until);\n };\n const uri = config?.apiUriOverride?.startsWith(\"http\")\n ? config.apiUriOverride\n : config.apiUri;\n\n const images = event.imageFileName && [\n {\n original: `${uri}/allotmentimage/${event.imageFileName}`,\n },\n ];\n\n const initialMonth = () =>\n filterOverride != null\n ? moment(`${filterOverride}01`)\n : filter\n ? moment(`${filter}01`)\n : moment();\n\n const highlightedDates = event.occasions.map((o) => {\n return moment(o.time).format(\"YYYY-MM-DD\");\n });\n return (\n \r\n \r\n {moment(o.time).format(\"LLL\")}\r\n \r\n
\r\n );\r\n })}\r\n \r\n {articles.map((a) => (\r\n
\r\n \n \n \n {name}\n \n \n
\n \n
\n \n );\n};\n\nexport default Event;\n","import moment from \"moment\";\r\nimport slugify from \"../common/slugify\";\r\n\r\nexport const getEventConfig = (config, name) => {\r\n const { eventConfig, imageFolderUrl } = config;\r\n const event = eventConfig.find((e) => e.name === name);\r\n if (!event) {\r\n return {\r\n name: name,\r\n slug: `/events/${slugify(name)}`,\r\n images: null,\r\n listImages: null,\r\n description: \"\",\r\n };\r\n }\r\n return {\r\n name: event.name,\r\n slug: `/events/${slugify(event.name)}`,\r\n images:\r\n event.images.length < 1\r\n ? null\r\n : event.images.map((img) => `${imageFolderUrl}${img}`),\r\n listImages: event.listImages\r\n ? event.listImages.length < 1\r\n ? null\r\n : event.listImages.map((img) => `${imageFolderUrl}${img}`)\r\n : null,\r\n description: event.description || \"\",\r\n exerpt: event.exerpt,\r\n };\r\n};\r\n\r\nexport const getMonths = (events) => {\r\n let filters = [];\r\n let months = [];\r\n\r\n events.forEach((e) => {\r\n e.occasions.forEach((o) => {\r\n let filter = moment(o.time).format(\"YYYYMM\");\r\n\r\n if (!filters.includes(filter)) {\r\n const occ = {\r\n year: moment(o.time).format(\"YYYY\"),\r\n month: Number(moment(o.time).format(\"MM\") - 1),\r\n filter: Number(filter),\r\n };\r\n filters = [...filters, filter];\r\n months = [...months, occ];\r\n }\r\n });\r\n });\r\n const sortedMonths = months.sort((a, b) => a.filter - b.filter);\r\n\r\n return sortedMonths;\r\n};\r\n\r\nexport const getMonthsByYear = (events) => {\r\n const months = getMonths(events);\r\n\r\n let years = [];\r\n let byYear = [];\r\n months.forEach((m) => {\r\n if (!years.includes(m.year)) {\r\n years = [...years, m.year];\r\n }\r\n });\r\n years.forEach((y) => {\r\n const monthsInYear = months.filter((m) => m.year === y);\r\n byYear = [...byYear, { year: y, months: monthsInYear }];\r\n });\r\n return byYear;\r\n};\r\n\r\nexport const getFirstOccasionInFilter = (occasions, filter) => {\r\n const filterMonth = filter ? moment(`${filter}01`).month() : null;\r\n const occasionsInFilter = occasions.filter(\r\n (o) => moment(o.time).month() === filterMonth\r\n );\r\n let occasionDates = [];\r\n occasionsInFilter.forEach((o) => {\r\n occasionDates = [...occasionDates, new Date(o.time)];\r\n });\r\n return moment(occasionDates.sort((a, b) => a - b));\r\n};\r\n\r\nexport const filterEvents = (events, filter) => {\r\n if (!filter || !events) return [];\r\n\r\n //event that have occasions in filter month\r\n let filterEvents = [];\r\n\r\n events.forEach((e) => {\r\n e.occasions.forEach((o) => {\r\n if (Number(moment(o.time).format(\"YYYYMM\")) === filter) {\r\n if (!filterEvents.includes(e.discription)) {\r\n filterEvents = [...filterEvents, e.description];\r\n }\r\n }\r\n });\r\n });\r\n const filteredEvents = events.filter((e) =>\r\n filterEvents.includes(e.description)\r\n );\r\n // sort by first event\r\n filteredEvents.sort(\r\n (a, b) =>\r\n moment(a.occasions[0].time).toDate() -\r\n moment(b.occasions[0].time).toDate()\r\n );\r\n return filteredEvents;\r\n};\r\n\r\nexport const getOccasionMonths = (events) => {\r\n let occasionMonths = [];\r\n events.forEach((e) => {\r\n e.occasions.forEach((o) => {\r\n const formattedMonth = moment(o.time).format(\"YYYYMM\");\r\n if (!occasionMonths.includes(formattedMonth)) {\r\n occasionMonths = [...occasionMonths, formattedMonth];\r\n }\r\n });\r\n });\r\n return occasionMonths.sort();\r\n};\r\n\r\nexport const hasMonthEvent = (month, events) => {\r\n const occasionMonths = getOccasionMonths(events);\r\n return occasionMonths.includes(month);\r\n};\r\n\r\nexport const getOccasionTimes = (time) => ({\r\n from: moment(time).hour(0).minute(0).seconds(0).toISOString(),\r\n until: moment(time).hour(23).minute(59).seconds(59).toISOString(),\r\n});\r\n\r\nexport const getOccasionsByDay = (occasions) => {\r\n let byDay = [];\r\n let days = [];\r\n occasions.forEach((o) => {\r\n const day = moment(o.time).format(\"YYYYMMDD\");\r\n if (!days.includes(day)) {\r\n days = [...days, day];\r\n byDay = [...byDay, { day, times: [] }];\r\n }\r\n });\r\n\r\n return byDay.map((d) => {\r\n let newTimes = [];\r\n occasions.forEach((o) => {\r\n const oTime = moment(o.time).format(\"HH:mm\");\r\n const oDay = moment(o.time).format(\"YYYYMMDD\");\r\n if (d.day === oDay) {\r\n newTimes = [...newTimes, oTime];\r\n }\r\n });\r\n return { ...d, times: newTimes };\r\n });\r\n};\r\n","import React from \"react\";\nimport { MdAddCircle, MdRemoveCircle } from \"react-icons/md\";\nimport { motion } from \"framer-motion\";\nimport { useSelector } from \"react-redux\";\nimport { Text } from \"@mantine/core\";\n\nconst ArticleButtons = ({\n cart,\n cartSet,\n ticketData,\n chosenOccasion,\n availableOccasions,\n name,\n}) => {\n const { language } = useSelector((state) => ({\n language: state.language,\n }));\n\n const spring = {\n type: \"spring\",\n stiffness: 500,\n damping: 30,\n };\n let disabledBtn = false;\n\n const addAllotment = (product) => {\n let newProduct = product;\n newProduct.allotmentId = chosenOccasion.allotment.id;\n newProduct.timeOccasions = chosenOccasion.time;\n cartSet([...cart, product]);\n };\n\n const removeAllotment = (ticketData) => {\n let newCart = [...cart];\n let findAllotment = cart.findIndex((i) => i.id === ticketData.id);\n newCart.splice(findAllotment, 1);\n cartSet(newCart);\n };\n\n const checkIfAvailable = () => {\n let timeData = availableOccasions.filter(\n (el) => chosenOccasion.time === el.time\n );\n if (\n timeData?.[0]?.remaining <= cart.length ||\n timeData?.[0]?.allotment.maxPerSale === cart.length\n ) {\n return true;\n } else {\n return false;\n }\n };\n\n const calculateQuantity = (ticketData) => {\n const findItems = cart.filter((item) => item.id === ticketData.id);\n return findItems.length;\n };\n\n return (\n \n {event.imageFileName ? (\n (\n \n \n
\n \n {!singleOccasion && (\n
\n \n {filter || filterOverride ? (\n
\n )}\n \n 0 ? true : \"\"}\n transition={spring}\n layout\n />\n 0 ? true : \"\"}\n whileTap={{ scale: 1.2 }}\n layout\n transition={spring}\n style={{\n pointerEvents: disabledBtn ? \"none\" : \"\",\n }}\n >\n addAllotment(ticketData)}\n aria-label={`${language?.AddQuantity} ${name}`}\n style={{ border: \"none\", background: \"none\" }}\n >\n 0 ? true : false}\n layout\n transition={spring}\n aria-live=\"assertive\"\n >\n \n {calculateQuantity(ticketData)}\n \n \n 0 ? true : \"\"}\n className=\"handle2\"\n whileTap={{ scale: 1.2 }}\n layout\n transition={spring}\n >\n removeAllotment(ticketData)}\n aria-label={`${language?.DecreaseQuantity} ${name}`}\n disabled={calculateQuantity(ticketData) === 0 ? true : false}\n style={{ border: \"none\", background: \"none\" }}\n >\n
\n );\n};\n\nexport default ArticleButtons;\n","import { Divider, Grid, Stack, Text } from \"@mantine/core\";\nimport React from \"react\";\nimport ArticleButtons from \"./ArticleButtons\";\nimport { useSelector } from \"react-redux\";\nimport { STATE_CULTURE } from \"../../../common/state\";\n\nconst Article = ({\n ticketData,\n cart,\n cartSet,\n chosenOccasion,\n availableOccasions,\n}) => {\n const { culture } = useSelector((state) => ({\n culture: state.cookies[STATE_CULTURE],\n }));\n const getName = () => {\n const getTranslation = ticketData.translation.filter(\n (el) => el.culture === culture\n );\n return getTranslation?.[0]?.name;\n };\n\n return (\n <>\n {ticketData && (\n \n \n \n \n {language.ChooseTicket}\n \n \n {format(new Date(chosenOccasion?.time), formatDay, {\n locale: cultureLocale,\n })}\n \n \n \n
\n )}\n \n \n );\n};\n\nexport default ArticlePicker;\n","import { useQuery } from \"@apollo/react-hooks\";\nimport {\n Button,\n Container,\n MediaQuery,\n SimpleGrid,\n Text,\n Title,\n} from \"@mantine/core\";\nimport { format, isSameDay } from \"date-fns\";\nimport gql from \"graphql-tag\";\nimport React, { useEffect, useState } from \"react\";\nimport { useSelector } from \"react-redux\";\nimport { STATE_CULTURE, STATE_CURRENCY } from \"../../../common/state\";\nimport ArticlePicker from \"./ArticlePicker\";\n\nconst query = gql`\n query detailQuery(\n $currency: String\n $culture: String\n $posId: Int\n $from: DateTime\n $until: DateTime\n ) {\n allotments(\n currency: $currency\n culture: $culture\n posId: $posId\n from: $from\n until: $until\n ) {\n description\n imageFileName\n translation {\n culture\n name\n description\n }\n occasions {\n time\n remaining\n allotment {\n id\n maxPerSale\n }\n articles {\n id\n name\n description\n imageFilename\n plu\n priceInclVat\n translation {\n culture\n name\n description\n }\n isPersonalTicket\n }\n }\n }\n }\n`;\n\nconst TimePicker = ({ day, allotment, occasions, cultureLocale }) => {\n const [from, fromSet] = useState();\n const [until, untilSet] = useState();\n const [availableOccasions, availableOccasionsSet] = useState();\n const [chosenOccasion, chosenOccasionSet] = useState();\n const { config, currency, culture, language } = useSelector((state) => ({\n config: state.config,\n currency: state.cookies[STATE_CURRENCY],\n culture: state.cookies[STATE_CULTURE],\n language: state.language,\n }));\n\n const { posId } = config;\n\n const { data, loading } = useQuery(query, {\n variables: { posId, currency, culture, from, until },\n });\n\n let timeFormat = \"HH:mm\";\n\n useEffect(() => {\n chosenOccasionSet(\"\");\n }, [day]);\n\n useEffect(() => {\n if (!loading && data && allotment && day) {\n const filterAllotments = data?.allotments?.filter(\n (el) => allotment.name === el.description\n );\n\n const filterOccasions = filterAllotments?.[0]?.occasions.filter((el) =>\n isSameDay(new Date(el.time), new Date(day))\n );\n availableOccasionsSet(filterOccasions);\n }\n }, [day, data, loading, allotment]);\n\n useEffect(() => {\n const timePicker = document.getElementById(\"event-time-picker\");\n if (timePicker) {\n timePicker.focus();\n }\n }, [day]);\n\n return (\n \r\n \r\n {(language && language.Categories && language.Categories[group.name]) ||\r\n group.name}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ProductGroup;\r\n","import React, { useState, useEffect, useContext } from \"react\";\r\nimport axios from \"axios\";\r\nimport { useSelector } from \"react-redux\";\r\nimport PageLayout from \"../../components/Styles/PageLayout\";\r\nimport Description from \"../../components/common/Description\";\r\nimport ProductList from \"../../components/ProductList\";\r\nimport ProductGroup from \"../../components/Page/productGroup\";\r\nimport { STATE_CULTURE } from \"../../common/state\";\r\nimport { getAllProducts, extendPage } from \"./util\";\r\nimport { DataContext } from \"../../components/common/dataProvider\";\r\nimport PageContent from \"../../components/Styles/PageContent\";\r\nimport ArticleFilter from \"../../components/common/ArticleFilter\";\r\n\r\nlet source;\r\n\r\nconst AllProductsPagePage = ({ setPosition }) => {\r\n const { data } = useContext(DataContext);\r\n \r\n const [text, setText] = useState(\"\");\r\n const { config, culture } = useSelector((state) => ({\r\n config: state.config,\r\n language: state.language,\r\n culture: state.cookies[STATE_CULTURE],\r\n }));\r\n const products = getAllProducts(data, config, culture);\r\n\r\n useEffect(() => {\r\n source = axios.CancelToken.source();\r\n axios\r\n .get(\r\n `${process.env.PUBLIC_URL}/${config.descriptionFolderUrl}/all-products.${culture}.md`,\r\n {\r\n cancelToken: source.token,\r\n }\r\n )\r\n .then((res) => setText(res.data));\r\n return () => source.cancel(\"All Products Is Unmounting\");\r\n }, [culture, config.descriptionFolderUrl]);\r\n\r\n const page = extendPage(data, config);\r\n\r\n return (\r\n \n
\n );\n};\n\nexport default Header;\n","import React from \"react\";\r\nimport { startOfWeek, format, addDays } from \"date-fns\";\r\n\r\nconst Week = ({ currentDate, cultureLocale }) => {\r\n const dateFormat = \"E\";\r\n const days = [];\r\n let startDate = startOfWeek(currentDate, { locale: cultureLocale });\r\n for (let i = 0; i < 7; i++) {\r\n days.push(\r\n \n {!isBefore(monthStart, new Date(firstOccasion?.time)) ? (\n \n
\n\n \n \n {format(currentDate, dateFormat, { locale: cultureLocale })}{\" \"}\n \n
\n\n \n {!isSameMonth(new Date(monthStart), new Date(lastOccasion?.time)) ? (\n \n
\n \r\n {format(addDays(startDate, i), dateFormat, {locale: cultureLocale})}\r\n
\r\n );\r\n }\r\n return {days}
;\r\n};\r\n\r\nexport default Week;\r\n","import React from \"react\";\nimport {\n addDays,\n endOfMonth,\n endOfWeek,\n format,\n isBefore,\n isSameDay,\n isSameMonth,\n startOfMonth,\n startOfWeek,\n toDate,\n} from \"date-fns\";\nimport \"../styles.css\";\nimport \"./eventStyles.css\";\nimport { useSelector } from \"react-redux\";\n\nconst WeekDay = ({\n currentDate,\n selectedDate,\n daySet,\n occasions,\n cultureLocale,\n}) => {\n const { language } = useSelector((state) => ({\n language: state.language,\n }));\n const monthStart = startOfMonth(currentDate, {\n locale: cultureLocale,\n });\n const monthEnd = endOfMonth(monthStart);\n const startDate = startOfWeek(monthStart, { locale: cultureLocale });\n const endDate = endOfWeek(monthEnd, { locale: cultureLocale });\n const dateFormat = \"d\";\n const regularDateFormat = \"yyyy-MM-dd\";\n const rows = [];\n\n let days = [];\n let day = startDate;\n let formattedDate = \"\";\n let today = new Date();\n let yesterday = today.setDate(today.getDate() - 1);\n\n const onDateClick = (day) => {\n daySet(day);\n };\n\n const getAvailability = (day, occasion) => {\n if (occasion) {\n const filter = occasion.filter(\n (el) =>\n format(new Date(el.time), \"yyyy-MM-dd\") ===\n format(new Date(day), \"yyyy-MM-dd\")\n );\n if (filter.length > 0) {\n return \"available\";\n } else {\n return null;\n }\n }\n };\n\n while (day <= endDate) {\n for (let i = 0; i < 7; i++) {\n formattedDate = format(day, dateFormat);\n const cloneDay = day;\n let isAvailable;\n getAvailability(format(day, regularDateFormat), occasions) === \"available\"\n ? (isAvailable = \"available\")\n : (isAvailable = \"disabled\");\n days.push(\n \n {days}\n
\n );\n days = [];\n }\n return {rows}
;\n};\nexport default WeekDay;\n","import React, { useEffect } from \"react\";\nimport \"./eventStyles.css\";\nimport Header from \"./Header\";\nimport Week from \"./Week\";\nimport WeekDay from \"./WeekDay\";\nimport { CircularProgress } from \"@material-ui/core\";\nimport { da, de, enGB, sv } from \"date-fns/locale\";\nimport { STATE_CULTURE } from \"../../../../common/state\";\nimport { useSelector } from \"react-redux\";\n\nconst EventCalendarV2 = ({\n currentDate,\n setCurrentDate,\n firstOccasion,\n lastOccasion,\n occasions,\n day,\n daySet,\n initialMonth,\n cultureLocale,\n setCultureLocale,\n}) => {\n const { culture, language } = useSelector((state) => ({\n culture: state.cookies[STATE_CULTURE],\n language: state.language,\n }));\n\n const locales = [\n { culture: \"sv-SE\", data: sv },\n { culture: \"en-US\", data: enGB },\n { culture: \"en-GB\", data: enGB },\n { culture: \"de-DE\", data: de },\n { culture: \"da-DK\", data: da },\n ];\n\n useEffect(() => {\n const getLocale = locales.filter((el) => el.culture === culture)[0].data;\n setCultureLocale(getLocale);\n }, []);\n\n return (\n \n {occasions === undefined ? (\n
\n );\n};\n\nexport default EventCalendarV2;\n","import {\n Button,\n Container,\n createStyles,\n Image,\n MediaQuery,\n SimpleGrid,\n Skeleton,\n Space,\n Text,\n Title,\n} from \"@mantine/core\";\nimport React, { useEffect, useState } from \"react\";\nimport { isAfter, isSameMonth } from \"date-fns\";\nimport Markdown from \"react-markdown\";\nimport { useSelector } from \"react-redux\";\nimport { STATE_CULTURE } from \"../../../common/state\";\nimport TimePicker from \"./TimePicker\";\nimport \"./styles.css\";\nimport _ from \"lodash\";\nimport EventCalendarV2 from \"./Calendar\";\nimport { navigate, useLocation } from \"@reach/router\";\n\nconst useStyles = createStyles((theme) => ({\n button: {\n border: \"1px solid #8A8C93\",\n },\n buttonWrapper: {\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"start\",\n paddingTop: 0,\n paddingBottom: \".5rem\",\n paddingLeft: 0,\n \"@media screen and (max-width: 768px)\": {\n paddingLeft: \"1rem\",\n },\n },\n}));\n\nconst EventV2 = (props) => {\n const [isLoading, isLoadingSet] = useState(true);\n const [text, textSet] = useState(\"\");\n const [event, eventSet] = useState(null);\n const [day, daySet] = useState(null);\n const [lastOccasion, lastOccasionSet] = useState();\n const [firstOccasion, firstOccasionSet] = useState();\n const [month, monthSet] = useState(new Date());\n const [initialMonth, initialMonthSet] = useState();\n const [currentDate, setCurrentDate] = useState(new Date());\n const [cultureLocale, setCultureLocale] = useState();\n const { config, culture, language } = useSelector((state) => ({\n config: state.config,\n language: state.language,\n culture: state.cookies[STATE_CULTURE],\n }));\n const uri = config?.apiUriOverride?.startsWith(\"http\")\n ? config.apiUriOverride\n : config.apiUri;\n\n const image = `${uri}/allotmentimage/${props?.event?.imageFileName}`;\n const location = useLocation();\n const filter = location.state;\n let pathname = location.pathname;\n const { classes } = useStyles();\n\n useEffect(() => {\n firstOccasionSet(_.first(props.event.occasions));\n lastOccasionSet(_.last(props.event.occasions));\n }, [props.event.occasions]);\n\n useEffect(() => {\n daySet(null);\n if (props.event.occasions) {\n const getEventByMonth =\n props.event.occasions &&\n props.event.occasions.filter((el) =>\n isSameMonth(new Date(el.time), new Date(currentDate))\n );\n if (getEventByMonth) {\n eventSet(getEventByMonth);\n }\n }\n }, [currentDate, pathname, month]);\n\n useEffect(() => {\n if (Object.keys(props.event).length > 1) {\n isLoadingSet(false);\n }\n const filterTextByCulture = props.event.translation.filter(\n (el) => el.culture === culture\n );\n if (filterTextByCulture) {\n textSet({\n name: filterTextByCulture[0]?.name,\n description: filterTextByCulture[0]?.description,\n });\n }\n }, [props, culture]);\n\n useEffect(() => {\n if (filter && props.event.occasions.length > 0) {\n const reduce = props.event.occasions.reduce((acc, curr) => {\n if (isAfter(new Date(curr.time), filter[0])) {\n acc.push(curr.time);\n }\n return acc;\n }, []);\n if (reduce && reduce.length > 0) {\n initialMonthSet(new Date(reduce[0]));\n }\n }\n }, [filter, props.event.occasions]);\n\n return (\n event && (\n <>\n \n {\" \"}\n
\n ) : (\n \"\"\n )}\n {language.CalendarLoading}
\n\n
\n \n
\n \n
\n \n \n
\n ) : (\n \n {product.images && product.images?.length > 0 ? (\n
\n \n
\n \n
\n \n links(product)}\n component=\"a\"\n >\n \n {productData?.isProduct ? (\n handleAdd()}\n color={addedToCart && \"green\"}\n loading={clicked}\n disabled={product.inStock <= 0}\n >\n {!addedToCart && (!product.inStock || product.inStock >= 1)\n ? language.Buy\n : !addedToCart && product.inStock <= 0\n ? language.SoldOut\n : addedToCart && language.Added_To_Cart}\n \n ) : (\n links(product)}\n variant=\"outline\"\n className=\"productChooseBtn\"\n aria-label={`${language.Choose} ${product.name}`}\n >\n {language.Choose}\n \n )}\n
\n \n \n
\n \n
\n \n {product.name}
\n\n {price}\n
\n\n
\n );\n return (\n \n handleAdd()}\n color={addedToCart && \"green\"}\n disabled={product.inStock <= 0}\n loading={clicked}\n >\n {!addedToCart && (!product.inStock || product.inStock >= 1)\n ? language.AddToCartBtn\n : !addedToCart && product.inStock <= 0\n ? language.SoldOut\n : addedToCart && language.Added_To_Cart}\n \n
\n ) : (\n \r\n {config.pages.find((p) => p.name === page.name)\r\n .showProductGroupFilter && (\r\n
\r\n );\r\n};\r\n\r\nexport default ArticleFilter;\r\n","import moment from \"moment\";\r\n\r\nexport const getMonths = (start, duration) => {\r\n let months = [];\r\n let currentMonth = `${start}01`;\r\n const end = moment(`${start}01`)\r\n .add(duration - 1, \"months\")\r\n .format(\"YYYYMMDD\");\r\n const addMonths = () => {\r\n if (\r\n Number(moment(end).format(\"YYYYMM\")) >=\r\n Number(moment(currentMonth).format(\"YYYYMM\"))\r\n ) {\r\n months = [...months, moment(currentMonth).format(\"YYYYMM\")];\r\n currentMonth = moment(currentMonth).add(1, \"month\").format(\"YYYYMMDD\");\r\n addMonths();\r\n }\r\n };\r\n addMonths();\r\n return months;\r\n};\r\n\r\nexport const getMonthPickerMonths = () => {\r\n let yearMonths = [];\r\n const duration = 24; //Number of years in picker\r\n const months = getMonths(moment().startOf(\"year\").format(\"YYYYMM\"), duration);\r\n months.forEach((m) => {\r\n if (\r\n yearMonths.length < 1 ||\r\n !yearMonths.some((y) => y.year === moment(`${m}01`).format(\"YYYY\"))\r\n ) {\r\n return (yearMonths = [\r\n ...yearMonths,\r\n {\r\n year: moment(`${m}01`).format(\"YYYY\"),\r\n yearValue: moment(`${m}01`).year(),\r\n months: [{ date: moment(`${m}01`).toISOString(), value: Number(m) }],\r\n },\r\n ]);\r\n }\r\n if (yearMonths.some((y) => y.year === moment(`${m}01`).format(\"YYYY\"))) {\r\n let newYear = yearMonths.find(\r\n (y) => y.year === moment(`${m}01`).format(\"YYYY\")\r\n );\r\n newYear = {\r\n ...newYear,\r\n months: [\r\n ...newYear.months,\r\n { date: moment(`${m}01`).toISOString(), value: Number(m) },\r\n ],\r\n };\r\n yearMonths = yearMonths.map((year) => {\r\n if (year.year === newYear.year) {\r\n return newYear;\r\n }\r\n return year;\r\n });\r\n }\r\n });\r\n\r\n return yearMonths;\r\n};\r\n\r\nexport const getOccasionMonths = (events) => {\r\n if (!events) return [];\r\n let occasionMonths = [];\r\n events.forEach((e) => {\r\n e.occasions.forEach((o) => {\r\n const formattedMonth = moment(o.time).format(\"YYYYMM\");\r\n if (!occasionMonths.includes(formattedMonth)) {\r\n occasionMonths = [...occasionMonths, formattedMonth];\r\n }\r\n });\r\n });\r\n return occasionMonths;\r\n};\r\n\r\nexport const hasMonthEvent = (month, events) => {\r\n const occasionMonths = getOccasionMonths(events);\r\n return occasionMonths.includes(month);\r\n};\r\n","import React from \"react\";\r\nimport classNames from \"classnames\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport ButtonBase from \"@material-ui/core/ButtonBase\";\r\nimport RightIcon from \"@material-ui/icons/ChevronRight\";\r\nimport LeftIcon from \"@material-ui/icons/ChevronLeft\";\r\nimport { getMonths, hasMonthEvent } from \"./util\";\r\nimport moment from \"moment\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n outer: {\r\n borderBottom: `1px solid ${theme.app.borderColor}`,\r\n borderTop: `1px solid ${theme.app.borderColor}`,\r\n margin: \"16px 0\",\r\n backgroundColor: theme.app.background[1],\r\n },\r\n outerWithNav: {\r\n borderBottom: `1px solid ${theme.app.borderColor}`,\r\n marginBottom: \"16px\",\r\n },\r\n outerScroll: {\r\n position: \"relative\",\r\n padding: \"0 50px\",\r\n },\r\n container: {\r\n overflowX: \"auto\",\r\n overflowY: \"hidden\",\r\n \"-ms-overflow-style\": \"-ms-autohiding-scrollbar\",\r\n \"-webkit-overflow-scrolling\": \"touch\",\r\n scrollBehavior: \"smooth\",\r\n whiteSpace: \"nowrap\",\r\n \"&::-webkit-scrollbar\": {\r\n display: \"none\",\r\n },\r\n },\r\n monthsContainer: {\r\n display: \"flex\",\r\n },\r\n year: {\r\n fontSize: \"0.75rem\",\r\n color: theme.app.labelColor,\r\n padding: \"0 16px\",\r\n },\r\n invisible: {\r\n fontSize: \"0.75rem\",\r\n color: theme.app.labelColor,\r\n visibility: \"hidden\",\r\n },\r\n monthContainer: {\r\n padding: \"8px 0 0\",\r\n },\r\n month: {\r\n borderBottom: \"2px solid transparent\",\r\n fontSize: \"0.875rem\",\r\n textTransform: \"capitalize\",\r\n cursor: \"pointer\",\r\n padding: \"8px 16px\",\r\n transition: theme.transitions.create([\"background-color\"], {\r\n duration: theme.transitions.duration.short,\r\n easing: theme.transitions.easing.easeInOut,\r\n }),\r\n \"&:hover\": {\r\n backgroundColor: theme.palette.action.hover,\r\n },\r\n },\r\n monthDisabled: {\r\n color: theme.app.labelColor,\r\n opacity: 0.3,\r\n cursor: \"auto\",\r\n pointerEvents: \"none\",\r\n },\r\n monthActive: {\r\n borderColor: theme.palette.primary.light,\r\n cursor: \"auto\",\r\n pointerEvents: \"none\",\r\n },\r\n rightButtonContainer: {\r\n position: \"absolute\",\r\n zIndex: 1,\r\n top: \"2px\",\r\n right: 0,\r\n bottom: \"2px\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n },\r\n leftButtonContainer: {\r\n position: \"absolute\",\r\n zIndex: 1,\r\n top: \"2px\",\r\n left: 0,\r\n bottom: \"2px\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n },\r\n navButton: {\r\n padding: \"8px\",\r\n color: theme.app.labelColor,\r\n height: \"100%\",\r\n transition: theme.transitions.create([\"color\"], {\r\n duration: theme.transitions.duration.short,\r\n easing: theme.transitions.easing.easeInOut,\r\n }),\r\n \"&:hover\": {\r\n color: theme.app.secondaryColor,\r\n },\r\n },\r\n removeBorderBg: {\r\n border: \"none\",\r\n background: \"none\",\r\n },\r\n}));\r\n\r\nconst EventCalendar = (props) => {\r\n const {\r\n startMonth = moment().format(\"YYYYMM\"),\r\n duration = 18,\r\n culture,\r\n active,\r\n setActive,\r\n events,\r\n withNav,\r\n } = props;\r\n const classes = useStyles();\r\n const containerRef = React.createRef();\r\n\r\n const monthsRef = React.createRef();\r\n const months = getMonths(startMonth, duration);\r\n const locale = culture.substring(0, 2).toLowerCase();\r\n const showScroll = () => {\r\n if (!containerRef.current) return true;\r\n if (\r\n containerRef.current &&\r\n containerRef.current.scrollWidth > containerRef.current.clientWidth\r\n ) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n return (\r\n \r\n {page.productGroups.map((group, key) => {\r\n return (\r\n \r\n {\r\n handleChange(e);\r\n }}\r\n />\r\n {translateProductGroup(group.name)}\r\n \r\n );\r\n })}\r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n
\r\n {showScroll() && (\r\n <>\r\n \r\n {months.map((m, i) => {\r\n const date = `${m}01`;\r\n const firstOfYear = moment(date).month() < 1;\r\n const isEnabled = hasMonthEvent(m, events);\r\n const isActive = active === Number(m);\r\n return (\r\n \r\n \r\n {moment(date).format(\"YYYY\")}\r\n \r\n setActive(Number(m))}\r\n disabled={!isEnabled && classes.monthDisabled}\r\n >\r\n {moment(date).locale(locale).format(\"MMMM\")}\r\n \r\n \r\n );\r\n })}\r\n
\r\n \r\n (containerRef.current.scrollLeft -= 150)}\r\n tabIndex={0}\r\n className={classes.navButton}\r\n >\r\n
\r\n \r\n (containerRef.current.scrollLeft += 150)}\r\n tabIndex={0}\r\n className={classes.navButton}\r\n >\r\n
\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default EventCalendar;\r\n","import React, { useState } from \"react\";\r\nimport moment from \"moment\";\r\nimport classNames from \"classnames\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport ButtonBase from \"@material-ui/core/ButtonBase\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport LeftIcon from \"@material-ui/icons/ChevronLeft\";\r\nimport RightIcon from \"@material-ui/icons/ChevronRight\";\r\nimport { getMonthPickerMonths, hasMonthEvent } from \"./util\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n monthPicker: {},\r\n selector: {\r\n display: \"grid\",\r\n gridTemplateColumns: \"1fr auto 1fr\",\r\n alignItems: \"center\",\r\n },\r\n year: { textAlign: \"center\", fontWeight: 500 },\r\n right: { textAlign: \"right\" },\r\n calendar: {\r\n display: \"grid\",\r\n gridTemplateColumns: \"repeat(3, 100px)\",\r\n borderLeft: `1px solid ${theme.app.borderColor}`,\r\n borderTop: `1px solid ${theme.app.borderColor}`,\r\n width: \"300px\",\r\n marginRight: \"16px\",\r\n margin: \"0 auto\",\r\n },\r\n monthItem: {\r\n borderRight: `1px solid ${theme.app.borderColor}`,\r\n borderBottom: `1px solid ${theme.app.borderColor}`,\r\n },\r\n monthButton: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n padding: \"8px 0\",\r\n height: \"100%\",\r\n width: \"100%\",\r\n \"&:disabled\": {\r\n opacity: 0.2,\r\n },\r\n },\r\n monthText: {\r\n color: \"inherit\",\r\n },\r\n active: {\r\n color: theme.palette.getContrastText(theme.palette.primary.main),\r\n backgroundColor: theme.palette.primary.main,\r\n },\r\n}));\r\n\r\nconst thisMonth = Number(moment().format(\"YYYYMM\"));\r\nconst calData = getMonthPickerMonths();\r\nconst calDataYears = calData.map((d) => Number(d.year));\r\n\r\nconst MonthPicker = (props) => {\r\n const { culture, active, setActive, events } = props;\r\n const classes = useStyles();\r\n const [cal, setCal] = useState(() => calData[0]);\r\n const locale = culture.substring(0, 2).toLowerCase();\r\n const handleSetCal = (year) =>\r\n setCal(calData.find((d) => d.yearValue === year));\r\n const prevDisabled = cal.yearValue <= calDataYears[0];\r\n const nextDisabled = cal.yearValue >= calDataYears[calDataYears.length - 1];\r\n return (\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default MonthPicker;\r\n","import moment from \"moment\";\r\nimport slugify from \"../common/slugify\";\r\n\r\nexport const getEventConfig = (config, name) => {\r\n const { eventConfig, imageFolderUrl } = config;\r\n const event = eventConfig?.find((e) => e.name === name);\r\n if (!event) {\r\n return {\r\n name: name,\r\n slug: `/events/${slugify(name)}`,\r\n images: null,\r\n listImages: null,\r\n description: \"\",\r\n };\r\n }\r\n return {\r\n name: event.name,\r\n slug: `/events/${slugify(event.name)}`,\r\n images:\r\n !event.images || event.images.length < 1\r\n ? null\r\n : event.images.map(\r\n (img) => `${process.env.PUBLIC_URL}${imageFolderUrl}${img}`\r\n ),\r\n listImages: event.listImages\r\n ? event.listImages.length < 1\r\n ? null\r\n : event.listImages.map(\r\n (img) => `${process.env.PUBLIC_URL}${imageFolderUrl}${img}`\r\n )\r\n : null,\r\n description: event.description || \"\",\r\n exerpt: event.exerpt,\r\n };\r\n};\r\n\r\nexport const getMonths = (events) => {\r\n let filters = [];\r\n let months = [];\r\n\r\n events.forEach((e) => {\r\n e.occasions.forEach((o) => {\r\n let filter = moment(o.time).format(\"YYYYMM\");\r\n\r\n if (!filters.includes(filter)) {\r\n const occ = {\r\n year: moment(o.time).format(\"YYYY\"),\r\n month: Number(moment(o.time).format(\"MM\") - 1),\r\n filter: Number(filter),\r\n };\r\n filters = [...filters, filter];\r\n months = [...months, occ];\r\n }\r\n });\r\n });\r\n const sortedMonths = months.sort((a, b) => a.filter - b.filter);\r\n\r\n return sortedMonths;\r\n};\r\n\r\nexport const getMonthsByYear = (events) => {\r\n const months = getMonths(events);\r\n\r\n let years = [];\r\n let byYear = [];\r\n months.forEach((m) => {\r\n if (!years.includes(m.year)) {\r\n years = [...years, m.year];\r\n }\r\n });\r\n years.forEach((y) => {\r\n const monthsInYear = months.filter((m) => m.year === y);\r\n byYear = [...byYear, { year: y, months: monthsInYear }];\r\n });\r\n return byYear;\r\n};\r\n\r\nexport const getFirstOccasionInFilter = (occasions, filter) => {\r\n const filterMonth = filter ? moment(`${filter}01`).month() : null;\r\n const occasionsInFilter = occasions.filter(\r\n (o) => moment(o.time).month() === filterMonth\r\n );\r\n let occasionDates = [];\r\n occasionsInFilter.forEach((o) => {\r\n occasionDates = [...occasionDates, new Date(o.time)];\r\n });\r\n return moment(occasionDates.sort((a, b) => a - b));\r\n};\r\n\r\nexport const filterEvents = (events, filter) => {\r\n if (!filter || !events) return [];\r\n\r\n //event that have occasions in filter month\r\n let filterEvents = [];\r\n\r\n events.forEach((e) => {\r\n e.occasions.forEach((o) => {\r\n if (Number(moment(o.time).format(\"YYYYMM\")) === filter) {\r\n if (!filterEvents.includes(e.discription)) {\r\n filterEvents = [...filterEvents, e.description];\r\n }\r\n }\r\n });\r\n });\r\n const filteredEvents = events.filter((e) =>\r\n filterEvents.includes(e.description)\r\n );\r\n // sort by first event\r\n filteredEvents.sort(\r\n (a, b) =>\r\n moment(a.occasions[0].time).toDate() -\r\n moment(b.occasions[0].time).toDate()\r\n );\r\n return filteredEvents;\r\n};\r\n\r\nexport const getOccasionMonths = (events) => {\r\n let occasionMonths = [];\r\n events.forEach((e) => {\r\n e.occasions.forEach((o) => {\r\n const formattedMonth = moment(o.time).format(\"YYYYMM\");\r\n if (!occasionMonths.includes(formattedMonth)) {\r\n occasionMonths = [...occasionMonths, formattedMonth];\r\n }\r\n });\r\n });\r\n return occasionMonths;\r\n};\r\n\r\nexport const hasMonthEvent = (month, events) => {\r\n const occasionMonths = getOccasionMonths(events);\r\n return occasionMonths.includes(month);\r\n};\r\n\r\nexport const getOccasionTimes = (time) => ({\r\n from: moment(time).hour(0).minute(0).seconds(0).toISOString(),\r\n until: moment(time).hour(23).minute(59).seconds(59).toISOString(),\r\n});\r\n\r\nexport const getOccasionsByDay = (occasions) => {\r\n let byDay = [];\r\n let days = [];\r\n occasions.forEach((o) => {\r\n const day = moment(o.time).format(\"YYYYMMDD\");\r\n if (!days.includes(day)) {\r\n days = [...days, day];\r\n byDay = [...byDay, { day, times: [] }];\r\n }\r\n });\r\n\r\n return byDay.map((d) => {\r\n let newTimes = [];\r\n occasions.forEach((o) => {\r\n const oTime = moment(o.time).format(\"HH:mm\");\r\n const oDay = moment(o.time).format(\"YYYYMMDD\");\r\n if (d.day === oDay) {\r\n newTimes = [...newTimes, oTime];\r\n }\r\n });\r\n return { ...d, times: newTimes };\r\n });\r\n};\r\n","import React, { useState } from \"react\";\nimport { useSelector } from \"react-redux\";\nimport moment from \"moment\";\nimport { Link } from \"@reach/router\";\nimport { makeStyles } from \"@material-ui/styles\";\nimport Divider from \"@material-ui/core/Divider\";\nimport Tooltip from \"@material-ui/core/Tooltip\";\nimport Typography from \"@material-ui/core/Typography\";\nimport { arrowGenerator } from \"../common/util\";\nimport { getOccasionsByDay } from \"./util\";\nimport { ReactComponent as Placeholder } from \"../../images/placeholder_list.svg\";\nimport slugify from \"../common/slugify\";\n\nconst useStyles = makeStyles((theme) => ({\n link: {\n lineHeight: 1,\n },\n listItem: {\n padding: \"8px\",\n transition: theme.transitions.create([\"background-color\"], {\n duration: theme.transitions.duration.short,\n easing: theme.transitions.easing.easeInOut,\n }),\n \"&:hover\": {\n backgroundColor: theme.palette.action.hover,\n },\n },\n content: {\n display: \"grid\",\n gridTemplateColumns: \"auto 1fr\",\n gridGap: \"16px\",\n alignItems: \"center\",\n \"@media(max-width: 667px)\": {\n gridTemplateColumns: \"1fr\",\n gridGap: \"0px\",\n },\n },\n eventInfo: {},\n title: {\n lineHeight: 1,\n marginBottom: \"0.2em\",\n color: theme.app.labelColor,\n },\n imageContainer: {\n \"@media(max-width: 667px)\": {\n display: \"none\",\n },\n },\n image: {\n maxWidth: \"100px\",\n borderRadius: \"4px\",\n },\n exerpt: {\n \"& p\": {\n color: theme.app.secondaryColor,\n display: \"box\",\n lineClamp: 1,\n boxOrient: \"vertical\",\n overflow: \"hidden\",\n margin: 0,\n fontSize: \"0.8125rem\",\n fontStyle: \"italic\",\n },\n },\n actions: {\n display: \"flex\",\n alignItems: \"flex-end\",\n paddingBottom: \"4px\",\n },\n occasions: {\n display: \"flex\",\n flexWrap: \"wrap\",\n \"& p\": {\n lineHeight: 1.2,\n color: theme.app.secondaryColor,\n fontSize: \"0.875rem\",\n },\n },\n occasionDate: {\n color: \"inherit\",\n },\n occasionTime: {\n \"&:not(:last-child):after\": {\n content: \"', '\",\n whiteSpace: \"pre\",\n },\n },\n occasionTimes: {\n maxWidth: \"200px\",\n display: \"flex\",\n flexWrap: \"wrap\",\n },\n tootltipTime: {\n color: \"inherit\",\n fontSize: \"0.8125rem\",\n opacity: \"0.9\",\n \"&:not(:last-child):after\": {\n content: \"', '\",\n whiteSpace: \"pre\",\n },\n },\n tooltipDivider: {\n margin: \"8px 0\",\n backgroundColor: \"rgba(255,255,255,0.6)\",\n },\n htmlPopper: arrowGenerator(\"black\"),\n htmlTooltip: {\n backgroundColor: \"black\",\n color: \"white\",\n maxWidth: 220,\n minWidth: 200,\n fontSize: \"12px\",\n border: \"1px solid black\",\n \"& b\": {\n fontWeight: 500,\n },\n },\n arrow: {\n position: \"absolute\",\n fontSize: 6,\n width: \"3em\",\n height: \"3em\",\n \"&::before\": {\n content: '\"\"',\n margin: \"auto\",\n display: \"block\",\n width: 0,\n height: 0,\n borderStyle: \"solid\",\n },\n },\n placeholder: {\n maxWidth: \"100px\",\n borderRadius: \"4px\",\n border: `1px solid ${theme.app.borderColor}`,\n width: \"100%\",\n background: theme.app.background[2],\n },\n}));\n\nconst ListItem = (props) => {\n const { eventConfig, occasionsInMonth, event, config, culture } = props;\n const classes = useStyles();\n const [arrowRef, handleArrowRef] = useState(null);\n const language = useSelector((state) => state.language);\n const occasionsByDay = getOccasionsByDay(occasionsInMonth);\n const description =\n event.translation.find((t) => t.culture === culture)?.name ??\n language[event.description] ??\n event.description;\n const uri = config?.apiUriOverride?.startsWith(\"http\")\n ? config.apiUriOverride\n : config.apiUri;\n\n const imageUri = event.imageFileName\n ? `${uri}/allotmentimage/${event.imageFileName}`\n : undefined;\n\n const getCalendarBookingLinks = (item) => {\n const eventCalendarLinks = config.eventConfig.filter(\n (el) => el.eventCalendar && el?.name === item?.name\n );\n const articleBookingLinks = config.eventConfig.filter(\n (el) => el.articleBooking && el?.name === item?.name\n );\n if (eventCalendarLinks && eventCalendarLinks[0]) {\n return `/ticketshop/tickets/${slugify(eventCalendarLinks[0].name)}`;\n }\n if (articleBookingLinks && articleBookingLinks[0]) {\n return `/ticketshop/booking/${slugify(articleBookingLinks[0]?.name)}`;\n }\n if (!eventCalendarLinks[0] && !articleBookingLinks[0]) {\n return `${process.env.PUBLIC_URL}${eventConfig.slug}`;\n }\n };\n return (\n <>\n \n \r\n
\r\n\r\n \r\n handleSetCal(cal.yearValue - 1)}\r\n disabled={prevDisabled || false}\r\n >\r\n
\r\n {cal.year}
\r\n \r\n handleSetCal(cal.yearValue + 1)}\r\n disabled={nextDisabled || false}\r\n >\r\n
\r\n \r\n {cal.months.map((month, i) => {\r\n const isEnabled = hasMonthEvent(month.value.toString(), events);\r\n const isActive = active === month.value;\r\n return (\r\n \r\n setActive(month.value)}\r\n className={classes.monthButton}\r\n disabled={month.value < thisMonth || !isEnabled}\r\n >\r\n \r\n {moment(month.date).locale(locale).format(\"MMM\")}\r\n \r\n \r\n
\r\n );\r\n })}\r\n \n
\n \n \n
\n \n {imageUri ? (\n 
\n ) : (\n
\n \n \n \n
\n \n \n {description}\n \n
\n \n {occasionsInMonth.length < 4 ? (\n occasionsInMonth.map((o, i) => (\n \n {moment(o.time).format(\"D MMM HH:mm\")}\n \n ))\n ) : (\n \n {`${occasionsInMonth.length} ${language.Allotment_Occasions}`} \n \n )}\n
\n \n {occasionsByDay.map((o, i) => {\n return (\n
\n \n \n }\n >\n \n \n {moment(o.day).format(\"D MMM\")}\n \n
\n );\n })}\n \n {o.times.map((t) => {\n return (\n \n {t}\n \n );\n })}\n
\n {eventConfig.exerpt}
\n\n {events.length > 0 && (\n
\n );\n};\n\nexport default Index;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport {\n Button,\n createStyles,\n RangeSlider,\n Text,\n TextInput,\n Title,\n} from \"@mantine/core\";\nimport { BiSearch } from \"react-icons/bi\";\nimport { useSelector } from \"react-redux\";\nimport { DateRangePicker } from \"@mantine/dates\";\nimport \"dayjs/locale/sv\";\nimport \"./styles.css\";\nimport { useMediaQuery } from \"@mantine/hooks\";\nimport autoAnimate from \"@formkit/auto-animate\";\nimport _ from \"lodash\";\n\nconst useStyles = createStyles((theme) => ({\n wrapper: {\n maxWidth: \"80rem\",\n backgroundColor: \"#F0F4F8\",\n boxShadow: \"rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\",\n height: \"100%\",\n borderRadius: \"6px\",\n padding: \"2rem 2rem 2.5rem 2rem\",\n color: \"white\",\n marginBottom: \"1rem\",\n marginTop: \"1rem\",\n \"@media screen and (max-width: 768px)\": {\n padding: \"1.35rem 1.35rem 1.5rem 1.35rem\",\n },\n },\n filterWrapper: {\n display: \"grid\",\n gridGap: \"2rem\",\n gridTemplateColumns: \"1fr 30% 1fr\",\n alignItems: \"start\",\n justifyContent: \"space-between\",\n color: \"white\",\n marginTop: \"1rem\",\n \"@media screen and (max-width: 768px)\": {\n display: \"flex\",\n flexDirection: \"column\",\n // gridTemplateColumns: \"1fr\",\n gap: \"1.25rem\",\n },\n },\n datePicker: {\n width: \"100%\",\n label: {\n color: \"black\",\n fontSize: \"1rem\",\n },\n },\n sliderWrapper: {\n color: \"black\",\n },\n label: {\n top: 0,\n height: 28,\n lineHeight: \"28px\",\n width: 34,\n padding: 0,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fontWeight: 700,\n backgroundColor: \"transparent\",\n },\n\n thumb: {\n backgroundColor: \"var(--theme-primary-color)\",\n height: 28,\n width: 34,\n border: \"none\",\n },\n\n dragging: {\n transform: \"translate(-50%, -50%)\",\n },\n search: {\n borderColor: \"#8A8C93\",\n label: {\n color: \"black\",\n fontSize: \"1rem\",\n },\n },\n}));\nconst EventFilter = ({\n events,\n setFilter,\n priceVal,\n priceValSet,\n priceBeforeChange,\n priceBeforeChangeSet,\n text,\n textSet,\n date,\n dateSet,\n}) => {\n const [initialValues, initialValuesSet] = useState(null);\n const [newValues, newValuesSet] = useState([null]);\n const [show, showSet] = useState(false);\n const { language } = useSelector((state) => ({\n language: state.language,\n }));\n const isMobile = useMediaQuery(\"(max-width: 755px)\");\n const { classes } = useStyles();\n const parent = useRef(null);\n const getPriceRange = events.reduce((acc, curr) => {\n acc.push(curr.articles);\n return acc.flat();\n }, []);\n\n const articles = getPriceRange.sort(\n (a, b) => parseFloat(a.priceInclVat) - parseFloat(b.priceInclVat)\n );\n\n const maxDate = events.reduce((acc, curr) => {\n acc.push(curr.occasions);\n return acc.flat().sort((a, b) => new Date(a.time) - new Date(b.time));\n }, []);\n\n useEffect(() => {\n initialValuesSet([\n date,\n [\n parseFloat(articles?.[0]?.priceInclVat),\n parseFloat(articles?.[articles.length - 1]?.priceInclVat),\n ],\n text,\n ]);\n }, []);\n\n useEffect(() => {\n newValuesSet([date, priceVal, text]);\n }, [date, priceVal, text]);\n\n useEffect(() => {\n parent.current && autoAnimate(parent.current);\n }, [parent]);\n\n useEffect(() => {\n if (!_.isEqual(initialValues, newValues)) {\n showSet(true);\n }\n if (_.isEqual(initialValues, newValues)) {\n showSet(false);\n }\n }, [newValues, initialValues]);\n\n return (\n \n
\n )}\n \n
\n \n
\n \n {filteredEvents.map((e, i) => {\n const eventConfig = getEventConfig(config, e.description);\n const occasionsInMonth = e.occasions.filter(\n (o) => Number(moment(o.time).format(\"YYYYMM\")) === filter\n );\n if (!eventConfig) return null;\n return (\n
\n \n \n {language.FilterEvents}\n \n \n {language.FilterEventsBody}\n \n
\n );\n};\n\nexport default EventFilter;\n","import React, { useMemo } from \"react\";\nimport { createStyles, Divider, Image, UnstyledButton } from \"@mantine/core\";\nimport { useSelector } from \"react-redux\";\nimport { STATE_CULTURE } from \"../../../common/state\";\nimport { navigate } from \"@reach/router\";\nimport slugify from \"../../common/slugify\";\nimport Markdown from \"react-markdown\";\n\nconst useStyles = createStyles((theme) => ({\n wrapper: {\n display: \"grid\",\n gridGap: \"1rem\",\n padding: \"0rem 1rem\",\n transition: \"0.2s\",\n borderRadius: \"8px\",\n \":hover\": {\n backgroundColor: theme.colors.gray[1],\n },\n \"@media screen and (max-width: 768px)\": {\n gridGap: \"0.5rem\",\n padding: \"0rem 0.5rem\",\n gridTemplateColumns: \"auto auto\",\n },\n },\n isCard: {\n \":hover\": {\n transform: \"translateY(-3px)\",\n },\n },\n priceWrapper: {\n p: {\n textAlign: \"right\",\n },\n \"&:last-child\": {\n justifySelf: \"end\",\n alignSelf: \"center\",\n },\n },\n imageWrapper: {\n width: \"100%\",\n },\n title: {\n fontWeight: \"bold\",\n marginBottom: 0,\n marginTop: \".6rem\",\n \"@media screen and (max-width: 768px)\": {},\n },\n price: {\n fontWeight: \"600\",\n color: theme.colors.gray[8],\n paddingRight: \"1rem\",\n marginTop: \".5rem\",\n },\n grid: {\n display: \"flex\",\n gap: \"1rem\",\n width: \"100%\",\n padding: \"1rem 0rem\",\n \"@media screen and (max-width: 768px)\": { gap: \"0.7rem\" },\n },\n markdown: {\n p: {\n display: \"inline\",\n color: \"black\",\n },\n },\n}));\n\nconst Event = ({ date, event }) => {\n const { config, culture, language } = useSelector((state) => ({\n config: state.config,\n culture: state.cookies[STATE_CULTURE],\n language: state.language,\n }));\n const listType =\n window.innerWidth < 768\n ? config?.allEventsListType?.sm\n : config?.allEventsListType?.lg;\n const isCard = listType\n ? listType === \"CARD\"\n : window.innerWidth < 768\n ? config.articleListType?.sm === \"CARD\"\n : config.articleListType?.lg === \"CARD\";\n const { classes, theme } = useStyles();\n\n const uri = config?.apiUriOverride?.startsWith(\"http\")\n ? config.apiUriOverride\n : config.apiUri;\n\n const image = useMemo(() => {\n return `${uri}/allotmentimage/${event.imageFileName}`;\n }, [event]);\n\n const filter = useMemo(\n () => event.translation.filter((el) => el.culture === culture)[0],\n [event]\n );\n\n const links = () => {\n if (config?.ticketConfigurator) {\n const isEventCalendar = config?.ticketConfigurator.filter(\n (el) => slugify(el.name) === slugify(event.description)\n )?.[0];\n if (isEventCalendar) return `tickets/${slugify(event.description)}`;\n return `events/${slugify(event.description)}`;\n } else {\n return `events/${slugify(event.description)}`;\n }\n };\n\n return (\n \n
\n \n \n {language.ChoosePrice}\n \n
\n \n {\n dateSet(initialValues[0]);\n priceValSet(initialValues[1]);\n priceBeforeChangeSet([\n 0,\n parseFloat(\n articles?.[articles.length - 1]?.priceInclVat + 100\n ),\n ]);\n textSet(initialValues[2]);\n }}\n >\n {language.Clear_Filter}\n \n
\n )}\n \n navigate(links(), { state: date })}\n style={{\n gridTemplateColumns: isCard ? \"1fr\" : \"1fr\",\n height: isCard && \"100%\",\n alignContent: isCard && \"space-between\",\n width: \"100%\",\n }}\n aria-label={filter?.name}\n >\n \n \n
\n \n \n {filter?.name}\n \n
\n \n \n {!isCard && \n 230\n ? filter.description.substring(0, 230) + \"...\"\n : !isCard\n ? filter?.description.substring(0, 70)\n : filter?.description\n }\n escapeHtml={false}\n skipHtml={false}\n />\n
\n \n
\n )\n )}\n {itemsArr.length === 0 && events.length > 0 && (\n \n
\n Inga resultat matchar kriterierna, ändra filtret och försök igen
\n )}\n\r\n
\r\n );\r\n};\r\n\r\nexport default AllProducts;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport ProductGroup from \"./productGroup\";\r\nimport AllProducts from \"./allProducts\";\r\nimport ArticleFilter from \"../common/ArticleFilter\";\r\nimport \"../../components/common/ArticleFilter/filter.css\";\r\n\r\nconst Page = ({ originalPage, page, setPosition }) => {\r\n const [filteredProductList, setFilteredProductList] = useState({ ...page });\r\n\r\n useEffect(() => {\r\n setFilteredProductList({ ...page });\r\n }, [page]);\r\n if (!page) return null;\r\n return (\r\n \r\n {page.showProductGroupFilter && (\r\n setFilteredProductList(filterResult)}\r\n />\r\n )}\r\n\r\n {page.listByGroup ? (\r\n filteredProductList.productGroups.map((group, i) => (\r\n
\r\n );\r\n};\r\n\r\nexport default Page;\r\n","import React from \"react\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport slugify from \"../common/slugify\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n toc: {\r\n position: \"sticky\",\r\n top: 0,\r\n padding: \"0 16px\",\r\n textAlign: \"right\",\r\n },\r\n list: { listStyle: \"none\" },\r\n}));\r\n\r\nconst Toc = ({ groups }) => {\r\n const classes = useStyles();\r\n console.log(groups);\r\n const handleClick = (group) => console.log(group);\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Toc;\r\n","import uuid from \"uuid\";\nimport { getDisplayPrice } from \"../../components/ProductList/util\";\nimport slugify from \"../../components/common/slugify\";\n\nconst makeId = () => uuid.v4();\n\nconst getAllArticles = (tags) => {\n let ids = [];\n let articles = [];\n tags.forEach((t) => {\n t.articles.forEach((a) => {\n if (!ids.includes(a.id)) {\n ids = [...ids, a.id];\n articles = [...articles, a];\n }\n });\n });\n return articles;\n};\n\nconst extendArticle = (p, a = {}, config) => {\n const { imageFolderUrl } = config;\n // If its a product that only exists in config\n const plu = a.plu ? a.plu : p.plu;\n const uri = config?.apiUriOverride?.startsWith(\"http\")\n ? config.apiUriOverride\n : config.apiUri;\n\n return {\n id: a.id ? a.id : makeId(),\n name: a.name ? a.name : p.name,\n plu,\n images: a.imageFilename\n ? [`${uri}/articleimage/${a.imageFilename}`]\n : p.images\n ? p.images.map(\n (img) => `${process.env.PUBLIC_URL}${imageFolderUrl}${img}`\n )\n : undefined,\n price: a.price,\n priceInclVat: a.priceInclVat,\n displayPrice: a.priceInclVat,\n slug: `products/${plu}`,\n };\n};\n\nconst extendEvents = (page, allotments, config) => {\n if (!page.events) return [];\n let extendedEvents = [];\n page.events.forEach((e) => {\n const allotment = allotments.find((a) => a.description === e);\n const event = config.eventConfig?.find((cfg) => cfg.name === e);\n if (event) {\n if (allotment) {\n const displayPrice = getDisplayPrice(allotment.articles);\n extendedEvents = [\n ...extendedEvents,\n {\n id: allotment.id,\n name: event.name,\n images: event.images?.map(\n (img) => `${config.imageFolderUrl}${img}`\n ),\n listImages: event.listImages?.map(\n (img) => `${config.imageFolderUrl}${img}`\n ),\n displayPrice,\n slug: `events/${slugify(event.name)}`,\n },\n ];\n } else {\n console.log(`No event with name ${e} is published`);\n }\n } else {\n console.log(`No config for event: ${e}`);\n }\n });\n return extendedEvents;\n};\n\nconst extendProductGroups = (page, tags, config) =>\n page.productGroups.map((g) => {\n const tag = tags.find((t) => t.name === g);\n const groupConfig = config.productGroupConfig.find((c) => c.name === g);\n if (tag) {\n let products = [];\n tag.articles.forEach((a) => {\n const p = config.productConfig.find((c) => c.plu === a.plu);\n if (p) {\n products = [...products, extendArticle(p, a, config)];\n } else {\n products = [...products, extendArticle({}, a, config)];\n }\n });\n if (groupConfig.extraProducts?.length > 0) {\n groupConfig.extraProducts.forEach((p) => {\n const cfg = config.productConfig.find((c) => c.plu === p);\n const art = getAllArticles(tags).find((a) => a.plu === p);\n\n if (cfg) {\n products = [...products, extendArticle(cfg, art, config)];\n }\n });\n }\n return {\n name: g,\n images: groupConfig?.images || [],\n isGroup: true,\n description: groupConfig?.description,\n allProductsShow: groupConfig?.allProductsShow || true,\n isInfo: groupConfig?.isInfo || false,\n products: products.sort((a, b) => a.plu - b.plu),\n };\n }\n return {\n name: g,\n images: [],\n description: \"\",\n products: [],\n message: `${g} is not a published article group`,\n };\n });\n\nexport const getPage = (data, config, page) => {\n if (!page || !data) return;\n const productGroups = extendProductGroups(page, data.tags, config);\n const events = extendEvents(page, data.allotments, config);\n\n return { ...page, productGroups, events };\n};\n","import React from \"react\";\r\nimport clsx from \"clsx\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport Avatar from \"@material-ui/core/Avatar\";\r\nimport ButtonBase from \"@material-ui/core/ButtonBase\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n sideMenu: {},\r\n item: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n marginBottom: \"8px\",\r\n },\r\n avatar: {\r\n width: \"40px\",\r\n height: \"40px\",\r\n marginRight: \"8px\",\r\n },\r\n name: {\r\n fontSize: \"0.875rem\",\r\n whiteSpace: \"nowrap\",\r\n overflow: \"hidden\",\r\n textOverflow: \"ellipsis\",\r\n },\r\n active: { color: theme.palette.secondary.main },\r\n}));\r\n\r\nconst SideMenu = ({ ticketOwners, activePerson, setActivePerson }) => {\r\n const classes = useStyles();\r\n if (ticketOwners.length < 2) {\r\n return null;\r\n }\r\n return (\r\n \r\n
\r\n - \r\n {groups.map((g, i) => (\r\n
- handleClick(slugify(g.name))}>\r\n {g.name}\r\n \r\n ))}\r\n
\r\n {ticketOwners.map((o) => {\r\n const isActive = o.id === activePerson?.id;\r\n\r\n return (\r\n setActivePerson(o)}\r\n key={o.id}\r\n className={classes.item}\r\n >\r\n \r\n {o.name}\r\n \r\n \r\n );\r\n })}\r\n
\r\n );\r\n};\r\n\r\nexport default SideMenu;\r\n","import React, { useContext } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport moment from \"moment\";\r\nimport clsx from \"clsx\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport Avatar from \"@material-ui/core/Avatar\";\r\nimport Button from \"@material-ui/core/Button\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport { addModification } from \"../../common/sale\";\r\nimport { Context, TOAST } from \"../../context\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n activePerson: {},\r\n avatar: {\r\n width: \"160px\",\r\n height: \"160px\",\r\n },\r\n person: {\r\n display: \"grid\",\r\n gridTemplateColumns: \"1fr\",\r\n gridGap: \"16px\",\r\n justifyItems: \"center\",\r\n marginBottom: \"16px\",\r\n },\r\n name: {\r\n fontSize: \"2rem\",\r\n fontWeight: 900,\r\n textAlign: \"center\",\r\n },\r\n ticket: { padding: \"8px 0\", marginBottom: \"24px\" },\r\n modificationItem: {\r\n padding: \"8px 0\",\r\n borderBottom: `1px solid ${theme.palette.divider}`,\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n },\r\n ticketName: { lineHeight: 1.3 },\r\n barcode: { fontSize: \"0.8125rem\" },\r\n valid: { fontSize: \"0.875rem\" },\r\n modArticleInfo: { flexGrow: 1 },\r\n modArticleName: { fontWeight: 500 },\r\n modArticlePrice: { fontSize: \"0.8125rem\" },\r\n noTickets: { textAlign: \"center\" },\r\n}));\r\n\r\nconst ActivePerson = ({ activePerson }) => {\r\n const classes = useStyles();\r\n const { dispatch } = useContext(Context);\r\n const rdxDispatch = useDispatch();\r\n const language = useSelector((state) => state.language);\r\n const add = (model) => {\r\n rdxDispatch(\r\n addModification(model, (status, msg) => {\r\n if (status >= 400) {\r\n return dispatch({\r\n type: TOAST,\r\n payload: {\r\n text: msg,\r\n variant: \"error\",\r\n },\r\n });\r\n }\r\n return dispatch({\r\n type: TOAST,\r\n payload: {\r\n text: language.Article_Added,\r\n variant: \"success\",\r\n },\r\n });\r\n })\r\n );\r\n };\r\n if (!activePerson) return null;\r\n return (\r\n \r\n \r\n {a.priceInclVat}\r\n
\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n ) : (\r\n \r\n {activePerson.name} \r\n
\r\n {activePerson.tickets && activePerson.tickets.length > 0 ? (\r\n \r\n {activePerson.tickets.map((t) => {\r\n console.log(t);\r\n const validFrom =\r\n t.validFrom && moment(t.validFrom).format(\"YYYY-MM-DD\");\r\n const validUntil =\r\n t.validUntil && moment(t.validUntil).format(\"YYYY-MM-DD\");\r\n return (\r\n \r\n \r\n {t.article.name}\r\n \r\n \r\n {t.uniqueIdentifier}\r\n \r\n \r\n {validFrom} - {validUntil}\r\n \r\n {t.fundsId && (\r\n \r\n {`Saldo: ${t.fundsAmount}:-`}\r\n \r\n )}\r\n {t.applicableModifications.map((a) => {\r\n const model = {\r\n ticketId: t.id,\r\n articleId: t.article.id,\r\n plu: a.plu,\r\n fundsId: t.fundsId,\r\n amount: a.price.amountInclVat,\r\n };\r\n // const ticketId = t.id;\r\n // const articleId = t.article.id;\r\n // const plu = a.plu;\r\n return (\r\n \r\n \r\n \r\n {a.name}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default User;\r\n","import React from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { useQuery } from \"@apollo/react-hooks\";\r\nimport gql from \"graphql-tag\";\r\nimport PageLayout from \"../../components/Styles/PageLayout\";\r\nimport User from \"../../components/User\";\r\nimport { STATE_CULTURE, STATE_CURRENCY } from \"../../common/state\";\r\nimport PageContent from \"../../components/Styles/PageContent\";\r\n\r\nconst query = gql`\r\n query User($currency: String, $culture: String, $posId: Int) {\r\n ticketowners(currency: $currency, culture: $culture, posId: $posId) {\r\n id\r\n name\r\n email\r\n photo\r\n details {\r\n civicRegistrationNumber\r\n }\r\n tickets {\r\n id\r\n fundsAmount\r\n fundsId\r\n owner {\r\n name\r\n firstname\r\n lastname\r\n email\r\n civicRegistrationNumber\r\n }\r\n validFrom\r\n validUntil\r\n article {\r\n id\r\n name\r\n plu\r\n }\r\n uniqueIdentifier\r\n applicableModifications {\r\n id\r\n name\r\n description\r\n plu\r\n priceInclVat\r\n price {\r\n amountInclVat\r\n }\r\n }\r\n }\r\n }\r\n whoami {\r\n id\r\n name\r\n firstname\r\n lastname\r\n email\r\n civicRegistrationNumber\r\n isAuthenticated\r\n photo\r\n }\r\n }\r\n`;\r\n\r\nconst UserPage = (props) => {\r\n const { auth, config, culture, currency } = useSelector((state) => ({\r\n auth: state.oidc.user !== null && !state.oidc.user.expired,\r\n config: state.config,\r\n culture: state.cookies[STATE_CULTURE],\r\n currency: state.cookies[STATE_CURRENCY],\r\n }));\r\n const { posId } = config;\r\n const { data, error, loading } = useQuery(query, {\r\n variables: { posId, currency, culture },\r\n });\r\n\r\n if (!auth) return \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n Du behöver vara inloggad för att se din sida.
;\r\n if (loading) return ;\r\n if (error) {\r\n console.log(error.message);\r\n return ;\r\n }\r\n if (auth && !data.whoami) {\r\n console.log(data);\r\n }\r\n return (\r\n \n {filter && filter[0]?.image ? (\n \n \n setHideLongText(!hideLongText)}\n >\n {hideLongText === false\n ? language.ReadMore\n : language.ShowLessText}\n \n ) : (\n \"\"\n )}\n
\n \n \n ) : (\n \"\"\n )}\n \n );\n};\n\nexport default TicketIntroduction;\n","import React, { useEffect } from \"react\";\nimport {\n addMonths,\n format,\n isBefore,\n isSameMonth,\n startOfMonth,\n subMonths,\n} from \"date-fns\";\nimport {\n IoIosArrowDropleftCircle,\n IoIosArrowDroprightCircle,\n} from \"react-icons/io\";\n\nconst Header = ({\n currentDate,\n setCurrentDate,\n allotmentSettings,\n firstDate,\n latestDate,\n cultureLocale,\n pathname,\n language,\n}) => {\n const monthStart = startOfMonth(new Date(firstDate?.time));\n const monthFormat = \"MMMM\";\n const yearFormat = \"yyyy\";\n const nextMonth = () => {\n setCurrentDate(addMonths(currentDate, 1));\n };\n const prevMonth = () => {\n setCurrentDate(subMonths(currentDate, 1));\n };\n\n useEffect(() => {\n setCurrentDate(new Date(firstDate?.time));\n }, [pathname, firstDate]);\n\n const lastMonthLabel = format(subMonths(currentDate, 1), \"MMMM\", {\n locale: cultureLocale,\n });\n const nextMonthLabel = format(addMonths(currentDate, 1), \"MMMM\", {\n locale: cultureLocale,\n });\n\n return (\n <>\n {allotmentSettings[0] && (\n \n {text.length > 300 && window.screen.availWidth <= 768 ? (\n \n
\n ) : (\n \n {!isBefore(startOfMonth(currentDate), new Date(firstDate?.time)) ? (\n \n
\n\n \n
\n )}\n \n {!isSameMonth(new Date(currentDate), new Date(latestDate?.time)) ? (\n \n
\n \n )}\n \n );\n};\n\nexport default Header;\n","import React from \"react\";\r\nimport { startOfWeek, format, addDays } from \"date-fns\";\r\n\r\nconst Week = ({ currentDate, cultureLocale }) => {\r\n const dateFormat = \"E\";\r\n const days = [];\r\n let startDate = startOfWeek(new Date(), { locale: cultureLocale });\r\n\r\n for (let i = 0; i < 7; i++) {\r\n days.push(\r\n \n
\n )}\n \r\n {format(addDays(startDate, i), dateFormat, { locale: cultureLocale })}\r\n
\r\n );\r\n }\r\n return {days}
;\r\n};\r\n\r\nexport default Week;\r\n","import React, { useEffect, useState } from \"react\";\nimport {\n addDays,\n endOfMonth,\n endOfWeek,\n format,\n isBefore,\n isSameDay,\n isSameMonth,\n parseISO,\n startOfMonth,\n startOfWeek,\n toDate,\n} from \"date-fns\";\nimport \"./styles.css\";\nimport AlertIcon from \"../Drawer/AlertIcon\";\n\nconst WeekDay = ({\n currentDate,\n setSelectedDate,\n allotment,\n allotmentData,\n allotmentSettings,\n loading,\n chosenDate,\n setChosenDate,\n setFilteredData,\n scrollIntoView,\n language,\n cultureLocale,\n}) => {\n const [allotmentOccasion, setAllotmentOccasion] = useState([]);\n const [siteSettings, setSiteSettings] = useState([]);\n const monthStart = startOfMonth(currentDate, { locale: cultureLocale });\n const monthEnd = endOfMonth(monthStart);\n const startDate = startOfWeek(monthStart, { locale: cultureLocale });\n const endDate = endOfWeek(monthEnd);\n const dateFormat = \"d\";\n const rows = [];\n\n let days = [];\n let day = startDate;\n let formattedDate = \"\";\n\n useEffect(() => {\n if (allotmentData && allotment.length >= 1 && loading === false) {\n const filteredAllotment = allotmentData.allotments.filter((el) => {\n return allotment.some((FilteredData) => {\n return el.description === FilteredData.description;\n });\n });\n\n const filterAll = filteredAllotment.map((el) => el.occasions);\n const newAllotmentData = filterAll.flat().map((el) => [\n {\n time: format(parseISO(el.time), \"yyyy-MM-dd\"),\n remaining: el.remaining,\n articles: el.articles,\n price: el.articles.map((ele) => ele.priceInclVat).sort(),\n allotment: el.allotment,\n timeOccasions: el.time,\n },\n ]);\n\n // Set the calendar to show the earliest day\n let filtered = newAllotmentData.sort().flat();\n setFilteredData(filtered);\n\n // Get occasion time and data values\n let res = Object.values(\n newAllotmentData.flat().reduce((a, { time, ...props }) => {\n if (!a[time]) a[time] = Object.assign({}, { time, data: [props] });\n else a[time].data.push(props);\n return a;\n }, {})\n );\n let calendarSettings = [];\n calendarSettings.push(allotmentSettings[0]);\n setSiteSettings([\n {\n showAvailability: calendarSettings[0].showAvailability,\n showColors: calendarSettings[0].showColors,\n showPrice: calendarSettings[0].showPrice,\n lowAllotmentQty: calendarSettings[0].lowAllotmentQty,\n bgColor: calendarSettings[0].bgColor,\n lowTicketQty: calendarSettings[0].lowTicketQty,\n },\n ]);\n setAllotmentOccasion(res);\n }\n }, [allotment]);\n\n const onDateClick = (day) => {\n setSelectedDate(day);\n setChosenDate(day);\n setTimeout(() => {\n scrollIntoView(\"TimeChooser\");\n }, 100);\n };\n\n let formatDay = \"yyyy-MM-dd\";\n let today = new Date();\n let yesterday = today.setDate(today.getDate() - 1);\n\n const getPrice = (day) => {\n if (siteSettings[0] !== undefined && siteSettings[0].showPrice === true) {\n let filterByDay = allotmentOccasion.filter(\n (el) => format(parseISO(el.time), formatDay) === format(day, formatDay)\n );\n let getData = filterByDay.map((ele) => ele.data);\n let reducedOccasions = getData\n .flat()\n .map((el) => el.remaining)\n .reduce((sum, a) => sum + a, 0);\n\n const removeChar = (price) => {\n if (price) {\n let newPrice = price && price.replaceAll(/[^0-9\\,.]/g, \"\");\n return newPrice.replace(\",\", \"\");\n }\n };\n\n let price2 = getData.flat()[0]?.price;\n const filterOutZeroCost = price2?.filter((el) => removeChar(el) > 0);\n const getPrices = filterOutZeroCost?.sort(\n (a, b) => parseFloat(removeChar(a)) - parseFloat(removeChar(b))\n )[0];\n\n if (filterByDay.length > 0 && reducedOccasions === 0) {\n return {language.FullAllotment}
;\n }\n if (getPrices !== undefined) {\n return (\n\n {language.CostFromAbbreviation} {getPrices}{\" \"}\n
\n );\n } else {\n return \"\";\n }\n } else {\n return \"\";\n }\n };\n const getAvailability = (day) => {\n let filterByDay = allotmentOccasion.filter(\n (el) => format(parseISO(el.time), formatDay) === format(day, formatDay)\n );\n let getData = filterByDay.map((ele) => ele.data);\n let reducedOccasions = getData\n .flat()\n .map((el) => el.remaining)\n .reduce((sum, a) => sum + a, 0);\n\n if (siteSettings.length > 0 && siteSettings[0].showColors === true) {\n if (reducedOccasions >= siteSettings[0].lowAllotmentQty) {\n return \"calendar-available\";\n }\n if (\n reducedOccasions < siteSettings[0].lowAllotmentQty &&\n reducedOccasions > 0\n ) {\n return \"calendar-low\";\n }\n if (filterByDay.length > 0 && reducedOccasions === 0) {\n return \"calendar-full\";\n }\n }\n\n if (siteSettings.length > 0 && siteSettings[0].showColors === false) {\n if (filterByDay.length > 0 && reducedOccasions > 0) {\n return \"calendar-nocolorallotment\";\n }\n if (filterByDay.length > 0 && reducedOccasions === 0) {\n return \"disabled\";\n }\n }\n };\n\n const labelAvailability = (day) => {\n if (getAvailability(day) === \"calendar-low\") {\n return `, ${language.FewLeft}`;\n } else {\n return \"\";\n }\n };\n\n while (day <= endDate) {\n for (let i = 0; i < 7; i++) {\n formattedDate = format(day, dateFormat);\n const cloneDay = day;\n\n days.push(\n\n \n {formattedDate}\n \n
\n \n \n );\n day = addDays(day, 1);\n }\n\n rows.push(\n {getPrice(day)}
\n \n {days}\n
\n );\n days = [];\n }\n return {rows}
;\n};\nexport default WeekDay;\n","import React, { useEffect, useState } from \"react\";\nimport \"./styles.css\";\nimport Header from \"./Header\";\nimport Week from \"./Week\";\nimport WeekDay from \"./WeekDay\";\nimport CircularProgress from \"@material-ui/core/CircularProgress\";\n\nconst Calendar = ({\n allotment,\n allotmentData,\n loading,\n allotmentSettings,\n chosenDate,\n setChosenDate,\n currentDate,\n setCurrentDate,\n selectedDate,\n setSelectedDate,\n setFilteredData,\n scrollIntoView,\n firstDate,\n latestDate,\n language,\n cultureLocale,\n pathname,\n}) => {\n const [newMonthData, setNewMonthData] = useState(allotmentData);\n useEffect(() => {\n setNewMonthData(allotmentData);\n }, [allotmentData]);\n\n if (allotment.length === 0) return null;\n return (\n <>\n {allotmentSettings[0] && (\n \n
\n ) : (\n \"\"\n )}\n \n )}\n \n );\n};\n\nexport default Calendar;\n","import React from \"react\";\r\nimport AlertIcon from \"../Drawer/AlertIcon\";\r\nimport \"./styles.css\";\r\n\r\nconst Legend = ({ language }) => {\r\n return (\r\n {language.LoadingText}
\n\r\n
\r\n\r\n \r\n \r\n
\r\n\r\n {language.Chosen}
\r\n\r\n \r\n
\r\n\r\n {language.Available}
\r\n\r\n \r\n \r\n
\r\n {language.FewLeft}
\r\n\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Legend;\r\n","import React, { useState, useEffect, useRef } from \"react\";\r\nimport lottie from \"lottie-web\";\r\nimport animationData from \"./animations/pen.json\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\n\r\nconst ChangeDateButton = (props) => {\r\n const [open, setOpen] = useState(false);\r\n const [hover, setHover] = useState(false);\r\n const animationContainer = useRef(null);\r\n const anim = useRef(null);\r\n\r\n useEffect(() => {\r\n if (animationContainer.current) {\r\n anim.current = lottie.loadAnimation({\r\n container: animationContainer.current,\r\n renderer: \"svg\",\r\n loop: false,\r\n autoplay: false,\r\n animationData,\r\n });\r\n anim.current.setSpeed(0.7);\r\n\r\n return () => anim.current.destroy();\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n setOpen(!open);\r\n anim.current.setDirection(open ? -1 : 1);\r\n anim.current.play();\r\n }, [props.chooseTime]);\r\n\r\n const useStyles = makeStyles({\r\n btn: {\r\n width: \"45px\",\r\n height: \"45px\",\r\n marginRight: \"-0.5rem\",\r\n },\r\n\r\n wrapper: {\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n margin: \"0 auto\",\r\n minWidth: \"10px\",\r\n // maxWidth: \"190px\",\r\n backgroundColor: \"white\",\r\n border: ({ outline }) =>\r\n outline ? \"solid 2px black\" : \"solid 2px white\",\r\n background: ({ outline }) => (outline ? \"white\" : \"black\"),\r\n color: ({ outline }) => (outline ? \"black\" : \"white\"),\r\n letterSpacing: \"0.7px\",\r\n fontSize: \"17px\",\r\n cursor: \"pointer\",\r\n transition: \".3s ease \",\r\n\r\n borderRadius: ({ round }) => (round ? \"50px\" : \"10px\"),\r\n \"&:hover\": {\r\n // boxShadow: \"rgba(0, 0, 0, 0.35) 0px 5px 15px\",\r\n // filter: \"invert(1)\",\r\n },\r\n },\r\n btnText: {\r\n fontWeight: \"600\",\r\n fontSize: \"1rem\",\r\n padding: \"0\",\r\n margin: \"0 1rem 0 0\",\r\n },\r\n });\r\n\r\n const classes = useStyles(props);\r\n\r\n return (\r\n {language.FullAllotment}
\r\n{language.FullAllotment}
;\n }\n\n if (remaining > 0 && newPrice > 0) {\n return (\n\n {language.CostFromAbbreviation} {price}\n
\n );\n } else {\n return \"\";\n }\n } else {\n return \"\";\n }\n };\n\n useEffect(() => {\n if (chosenDate !== undefined) {\n const filterDataByDay = filteredData.filter(\n (el) =>\n format(parseISO(el.time), formatDay) === format(chosenDate, formatDay)\n );\n filterDataByDay.sort(\n (a, b) => new Date(a?.timeOccasions) - new Date(b?.timeOccasions)\n );\n setOccasionsData(filterDataByDay);\n }\n }, [filteredData, chosenDate]);\n\n const resetDate = () => {\n scrollIntoView(\"NewCalendar\");\n setChosenDate(undefined);\n setSelected(false);\n setActiveScreen(false);\n setActiveOptionScreen(false);\n setChooseTime();\n setSingleOccasion();\n };\n\n const chooseOccasion = (occasion) => {\n setChooseTime(occasion);\n setSelected(occasion);\n scrollIntoView(\"ArticleChooser\");\n setActiveOptionScreen(true);\n };\n\n useEffect(() => {\n if (\n activeTicketConfigurator?.hideTimeChooserIfSingleOccasion === true &&\n singleOccasion === true &&\n chosenDate\n ) {\n setChooseTime(occasionsData?.[0]);\n setSelected(occasionsData?.[0]);\n setActiveOptionScreen(true);\n } else {\n setChooseTime(\"\");\n setSelected(false);\n setActiveOptionScreen(false);\n }\n }, [activeTicketConfigurator, occasionsData, singleOccasion]);\n\n let time = [];\n\n if (occasionsData !== undefined) {\n const filterOutByIds = [\n ...occasionsData\n .reduce((a, b) => {\n a.set(b.allotment.id, b);\n return a;\n }, new Map())\n .values(),\n ];\n const mapOutIds = filterOutByIds.map((el) => el.allotment.id);\n\n const checkAllotmentId = (allotments) => {\n let allotmentData = [];\n allotmentData.push(dataContext.allotments);\n\n const filterIds = filterOutByIds.filter(\n (el) => el.allotment.id === allotments.allotment.id\n );\n const filterDataByIds = allotmentData\n .flat()\n .filter((el) => el.id === filterIds[0].allotment.id);\n return filterDataByIds[0].description;\n };\n\n for (let i = 0; i < occasionsData.length; i++) {\n time.push(\n\n {isBefore(new Date(occasionsData[i].timeOccasions), new Date()) ? (\n
\n ) : (\n \n
\n \n {mapOutIds.length > 1 && mapOutIds.length < occasionsData.length\n ? checkAllotmentId(occasionsData[i])\n : \"\"}\n
\n\n chooseOccasion(occasionsData[i])}\n >\n \n {format(new Date(occasionsData[i].timeOccasions), \"HH:mm\")}\n \n
\n \n
\n )}\n \n );\n }\n }\n\n const filterOutByIds = occasionsData && [\n ...occasionsData\n .reduce((a, b) => {\n a.set(b.allotment.id, b);\n return a;\n }, new Map())\n .values(),\n ];\n\n let res = [];\n const mapAllIds =\n filterOutByIds && filterOutByIds.map((el) => el.allotment.id);\n res.push(mapAllIds);\n\n const checkAllotmentId = (allotments, i) => {\n let allotmentData = [];\n allotmentData.push(dataContext.allotments);\n\n const filterDataByIds =\n allotmentData &&\n allotmentData.flat().filter((el) => el.id === allotments);\n\n const filterDataByCulture =\n filterDataByIds[0] &&\n filterDataByIds[0]?.translation.filter((el) => el.culture === culture);\n\n return filterDataByCulture && filterDataByCulture?.[0]?.name;\n };\n\n const removeChar = (price) => {\n if (price) {\n let newPrice = price && price.replaceAll(/[^0-9\\,.]/g, \"\");\n return newPrice.replace(\",\", \"\");\n }\n };\n\n useEffect(() => {\n const calendarTimePicker = document.getElementById(\"calendar-time-picker\");\n if (calendarTimePicker && occasionsData?.length > 0) {\n setTimeout(() => {\n calendarTimePicker.focus();\n }, 1000);\n }\n }, [occasionsData]);\n\n return (\n \n {mapOutIds.length > 1 && mapOutIds.length < occasionsData.length\n ? checkAllotmentId(occasionsData[i])\n : \"\"}\n
\n\n chooseOccasion(occasionsData[i])}\n >\n \n {format(new Date(occasionsData[i].timeOccasions), \"HH:mm\")}\n \n\n {getPrice(\n occasionsData[i].remaining,\n occasionsData[i].price\n .filter((el) => el > 0)\n .sort((a, b) => a - b)[0]\n )}\n \n
\n \n {occasionsData &&\n (!activeTicketConfigurator?.hideTimeChooserIfSingleOccasion ||\n occasionsData?.length > 1) ? (\n \n \n resetDate()}\n className=\"removeBorderBg calendar-changeDateBtn\"\n aria-label={language.ChangeDateBtn}\n >\n
\n ))}\n \n \n \n ) : (\n \"\"\n )}\n \n );\n};\n\nexport default TimeChooser;\n","import uuid from \"uuid\";\r\nimport slugify from \"../../components/common/slugify\";\r\nimport { getData } from \"../../components/Page/util\";\r\nconst makeId = () => uuid.v4();\r\n\r\nconst getArticlesFromTags = (tags) => {\r\n if (!tags || tags.length < 1) return [];\r\n let articles = [];\r\n let articleIds = [];\r\n tags.forEach((t) =>\r\n t.articles.forEach((a) => {\r\n if (!articleIds.includes(a.id)) {\r\n articleIds = [...articleIds, a.id];\r\n articles = [...articles, a];\r\n }\r\n })\r\n );\r\n return articles;\r\n};\r\n\r\nexport const extendProduct = (p, a = {}, config) => {\r\n const { imageFolderUrl } = config;\r\n const productGroupConfig = config.productGroupConfig.find(\r\n (x) => x.name === p.name\r\n );\r\n if (productGroupConfig?.useGroupsAsItems && !p.allProductsShow) return null;\r\n if (productGroupConfig?.useGroupsAsItems && !a.name) {\r\n console.log(`no published articleGroup with name ${p.name}`);\r\n return null;\r\n }\r\n if (!!a.id && !!p.isModification) return null;\r\n // If its a product that only exists in config\r\n const plu = a.plu ? a.plu : p.plu;\r\n return {\r\n id: a.id ? a.id : makeId(),\r\n name: a.name ? a.name : p.name,\r\n plu,\r\n images: p.images\r\n ? p.images.map((img) => `${imageFolderUrl}${img}`)\r\n : undefined,\r\n products: a.articles ? a.articles : null,\r\n displayPrice: a.priceInclVat,\r\n slug: productGroupConfig?.useGroupsAsItems\r\n ? `products/${slugify(p.name)}`\r\n : `products/${plu}`,\r\n isInfo: p?.isInfo || false,\r\n allProductsSort: p.allProductsSort,\r\n };\r\n};\r\n\r\nexport const getAllProducts = (data, config) => {\r\n if (!data) return [];\r\n let products = [];\r\n let noConfig = [];\r\n let unpublished = [];\r\n data.tags.forEach((tag) =>\r\n tag.articles.forEach((a) => {\r\n const p = config.productConfig.find((c) => c.plu === a.plu);\r\n if (!p) {\r\n noConfig = [...noConfig, { plu: a.plu, name: a.name }];\r\n }\r\n })\r\n );\r\n if (noConfig.length > 0) {\r\n console.log(`missing config for products:`, noConfig);\r\n }\r\n let publishedArticles = getArticlesFromTags(data.tags);\r\n if (!data || !config) return [];\r\n const { productConfig, productGroupConfig, useEventsAsProducts } = config;\r\n\r\n const { dataProductPlus, dataTags } = getData(data);\r\n\r\n productGroupConfig.forEach((g) => {\r\n if (g.useGroupsAsItems) {\r\n if (!dataTags.includes(g.name)) {\r\n unpublished = [...unpublished, { name: g.name, type: \"productGroup\" }];\r\n return;\r\n }\r\n const tag = data.tags.find((t) => t.name === g.name);\r\n const extendedProduct = extendProduct(g, tag, config);\r\n products = extendedProduct ? [...products, extendedProduct] : products;\r\n }\r\n });\r\n\r\n productConfig.forEach((p) => {\r\n if(!productGroupConfig.find(x => x.useGroupsAsItems && p.name.includes(x.name))) {\r\n let productConfig = config.productConfig.find((x) => x.plu === p.plu);\r\n let value =\r\n productConfig.isModification !== undefined\r\n ? productConfig.isModification\r\n : false;\r\n if (!dataProductPlus.includes(p.plu) && !value) {\r\n unpublished = [\r\n ...unpublished,\r\n { plu: p.plu, name: p.name, type: \"product\" },\r\n ];\r\n return;\r\n }\r\n const article = publishedArticles.find((a) => a.plu === p.plu);\r\n const extendedProduct = extendProduct(p, article, config);\r\n products = extendedProduct ? [...products, extendedProduct] : products;\r\n\r\n }\r\n\r\n });\r\n\r\n if (useEventsAsProducts) {\r\n // TODO\r\n // console.log(eventConfig);\r\n }\r\n return products.sort((a, b) => a.allProductsSort - b.allProductsSort);\r\n};\r\n\r\nexport const extendPage = (data, config) => {\r\n return {\r\n name: \"Alla Produkter\",\r\n productGroups: data.tags\r\n .map((t) => {\r\n const groupConfig = config.productGroupConfig.find(\r\n (g) => g.name === t.name\r\n );\r\n const products = t.articles.map((a) => {\r\n const product = config.productConfig.find((p) => p.plu === a.plu);\r\n return product ? extendProduct(product, a, config) : a;\r\n });\r\n return { ...t, ...groupConfig, products };\r\n })\r\n .sort((a, b) => a.allProductsSort - b.allProductsSort),\r\n };\r\n};\r\n","import React, { useState, useEffect, useRef } from \"react\";\r\nimport lottie from \"lottie-web\";\r\nimport animationData from \"./animations/clockblack.json\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\n\r\nconst ChangeTimeButton = (props) => {\r\n const [open, setOpen] = useState(false);\r\n const [hover, setHover] = useState(false);\r\n const animationContainer2 = useRef(null);\r\n const anim = useRef(null);\r\n\r\n useEffect(() => {\r\n if (animationContainer2.current) {\r\n anim.current = lottie.loadAnimation({\r\n container: animationContainer2.current,\r\n renderer: \"svg\",\r\n loop: false,\r\n autoplay: false,\r\n animationData,\r\n });\r\n anim.current.setSpeed(1);\r\n\r\n return () => anim.current.destroy();\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n setOpen(!open);\r\n anim.current.setDirection(open ? -1 : 1);\r\n anim.current.play();\r\n }, [props.selected]);\r\n\r\n const useStyles = makeStyles({\r\n btn: {\r\n position: \"relative\",\r\n width: \"45px\",\r\n height: \"45px\",\r\n },\r\n\r\n wrapper: {\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n justifyContent: \"center\",\r\n alignItems: \"center\",\r\n margin: \"0 auto\",\r\n padding: \"0 0.5rem\",\r\n minWidth: \"10px\",\r\n // maxWidth: \"190px\",\r\n backgroundColor: \"white\",\r\n border: ({ outline }) =>\r\n outline ? \"solid 2px black\" : \"solid 2px white\",\r\n background: ({ outline }) => (outline ? \"white\" : \"black\"),\r\n color: ({ outline }) => (outline ? \"black\" : \"white\"),\r\n letterSpacing: \"0.7px\",\r\n fontSize: \"17px\",\r\n cursor: \"pointer\",\r\n transition: \".3s ease \",\r\n\r\n borderRadius: ({ round }) => (round ? \"50px\" : \"10px\"),\r\n // \"&:hover\": {\r\n // // boxShadow: \"rgba(0, 0, 0, 0.35) 0px 5px 15px\",\r\n // // filter: \"invert(1)\",\r\n // },\r\n },\r\n btnText: {\r\n fontWeight: \"600\",\r\n fontSize: \"1rem\",\r\n padding: \"0\",\r\n margin: \"0 1rem 0 0\",\r\n },\r\n });\r\n\r\n const classes = useStyles(props);\r\n\r\n return (\r\n {language.ChooseTimeHeader}
\n\n\n {format(selectedDate, \"EEEE\", { locale: cultureLocale })}{\" \"}\n {language.DateTheText.length > 0 ? language.DateTheText : \"\"}{\" \"}\n {format(selectedDate, \"do MMMM\", { locale: cultureLocale })}\n
\n\n {res &&\n res.flat().map((allotmentId, i) => (\n \n \n {format(new Date(el.timeOccasions), \"HH:mm\")}\n \n {getPrice(\n el.remaining,\n el.price\n .filter((el) => removeChar(el) > 0)\n .sort(\n (a, b) => removeChar(a) - removeChar(b)\n )[0]\n )}\n \n ) : (\n \"\"\n )\n )}\n
\n \n {checkAllotmentId(allotmentId)}\n
\n\n {occasionsData &&\n occasionsData.map((el, i) =>\n el.allotment.id === allotmentId ? (\n chooseOccasion(el)}\n aria-label={`${checkAllotmentId(\n allotmentId\n )} ${format(new Date(el.timeOccasions), \"HH:mm\", {\n locale: cultureLocale,\n })} ${el === chooseTime ? language.Chosen : \"\"}`}\n style={{ position: \"relative\" }}\n >\n {getAvailability(occasionsData[i].remaining) ===\n \"calendar-low\" && (\n \n
\n )}\n \n
\n\n \n \n
\n \n );\n};\nexport default AddedButton;\n","import React, { useContext, useEffect, useState } from \"react\";\r\nimport AddToCartButton from \"./AddToCartButton\";\r\nimport { addArticleBatch, addToCartTracking } from \"../../common/sale\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport { CART_ARTICLE_ADD, Context, OPEN_ALERT } from \"../../context\";\r\nimport { getCartArticle } from \"../cart/util\";\r\nimport AddedButton from \"./AddedButton\";\r\nimport { navigate } from \"@reach/router\";\r\nimport { STATE_CURRENCY } from \"../../common/state\";\r\n\r\nconst AddToCart = ({\r\n cart,\r\n setCart,\r\n allotmentId,\r\n clicked,\r\n setClicked,\r\n language,\r\n}) => {\r\n const rdxDispatch = useDispatch();\r\n const { dispatch } = useContext(Context);\r\n const { config, currency } = useSelector((state) => ({\r\n config: state.config,\r\n currency: state.cookies[STATE_CURRENCY],\r\n }));\r\n const [product, setProduct] = useState([]);\r\n const [text, setText] = useState(null);\r\n\r\n useEffect(() => {\r\n setProduct(groupByTimes(cart));\r\n }, [cart]);\r\n\r\n const reduceCart = Object.values(\r\n cart.reduce((acc, curr) => {\r\n if (!acc[curr.plu]) {\r\n acc[curr.plu] = {\r\n plu: curr.plu,\r\n quantity: 1,\r\n allotmentId: curr.allotmentId,\r\n allotmentOccasion: curr.timeOccasions,\r\n };\r\n } else {\r\n acc[curr.plu].quantity += 1;\r\n }\r\n return acc;\r\n }, {})\r\n );\r\n\r\n const chosenAllotment =\r\n cart &&\r\n allotmentId &&\r\n cart.filter((el) => {\r\n return allotmentId.articles.some((ele) => {\r\n return el.id === ele.id;\r\n });\r\n });\r\n\r\n const groupByTimes = (data) =>\r\n Object.values(\r\n data.reduce(\r\n (data, { id, plu }) =>\r\n Object.assign({}, data, {\r\n [id]: data[id]\r\n ? { id, plu: [...data[id].plu, plu] }\r\n : { id, plu: [plu] },\r\n }),\r\n {}\r\n )\r\n );\r\n\r\n const cartArticle = product && getCartArticle(product, config);\r\n\r\n const productPrice = (item) => {\r\n if (item && item.length > 0) {\r\n const regex = /[$€£kr]/g;\r\n let newPrice = item.replace(regex, \"\");\r\n if (newPrice.trim().split(\".\")[1] === \"00\") {\r\n return newPrice.split(\".\")[0];\r\n } else {\r\n return newPrice;\r\n }\r\n }\r\n };\r\n\r\n const trackReduceCart = Object.values(\r\n cart.reduce((acc, curr) => {\r\n if (!acc[curr.plu]) {\r\n acc[curr.plu] = {\r\n id: curr.plu,\r\n quantity: 1,\r\n price: parseFloat(productPrice(curr.priceInclVat).replace(\",\", \".\")),\r\n name: curr.name,\r\n };\r\n } else {\r\n acc[curr.plu].quantity += 1;\r\n }\r\n return acc;\r\n }, {})\r\n );\r\n\r\n const add = () => {\r\n setClicked(true);\r\n rdxDispatch(addArticleBatch(reduceCart, cb));\r\n };\r\n\r\n const cb = (status, msg) => {\r\n if (status >= 400) {\r\n dispatch({\r\n type: OPEN_ALERT,\r\n payload: {\r\n text: language.ErrorMsgCouldNotAddToCart,\r\n severity: \"error\",\r\n },\r\n });\r\n setClicked(false);\r\n setCart([]);\r\n } else {\r\n dispatch({\r\n type: CART_ARTICLE_ADD,\r\n payload: cartArticle,\r\n });\r\n setCart([]);\r\n setClicked(false);\r\n setText(language.Added_To_Cart);\r\n setTimeout(() => {\r\n setText(null);\r\n }, 3000);\r\n config?.redirectEventCalendar && navigate(\"/ticketshop/cart\");\r\n addToCartTracking(currency, trackReduceCart);\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n {language?.ChooseAllotmentHeader}
\n\n\n {!singleOccasion ? (\n resetDate()}\n className=\"removeBorderBg calendar-changeTimeBtn\"\n aria-label={\n singleOccasion &&\n activeTicketConfigurator?.hideTimeChooserIfSingleOccasion\n ? language?.ChangeDateBtn\n : language?.ChangeTimeBtn\n }\n ref={changeTimeBtnRef}\n >\n
\n ))}\n {optionArticles && optionArticles !== null\n ? optionArticles.map((el, i) => (\n \n {selected?.timeOccasions !== undefined &&\n format(new Date(selected?.timeOccasions), \"EEEE\", {\n locale: cultureLocale,\n })}\n \n {language?.DateTheText}\n \n {selected?.timeOccasions !== undefined &&\n format(new Date(selected?.timeOccasions), \"do MMMM HH:mm\", {\n locale: cultureLocale,\n })}\n
\n ) : (\n\n {selected?.timeOccasions !== undefined &&\n format(new Date(selected?.timeOccasions), \"EEEE do MMMM\", {\n locale: cultureLocale,\n })}\n
\n )}\n\n\n {allotments &&\n allotments.articles.map((el, i) =>\n allotmentArticles.length > 0 ? (\n
\n\n {(options && optionArticles && options.length > 0) ||\n optionArticles.length > 0 ? (\n \n
\n ) : (\n \"\"\n )\n )}\n \n
\n {el.name}
\n{el.priceInclVat}
\n\n 0 ? true : \"\"}\n transition={spring}\n layout\n />\n 0 ? true : \"\"}\n whileTap={{ scale: 1.2 }}\n layout\n transition={spring}\n style={{\n pointerEvents: disabledBtn ? \"none\" : \"\",\n }}\n >\n addAllotment(el, timeSelected)}\n style={{\n opacity: disabledBtn ? \"0.2\" : \"1\",\n }}\n aria-label={`${language?.AddQuantity} ${el.name}`}\n >\n 0 ? true : \"\"}\n layout\n transition={spring}\n role=\"region\"\n aria-live=\"assertive\"\n >\n {calculateQuantity(el)}\n \n 0 ? true : \"\"}\n className=\"calendar-handle2\"\n whileTap={{ scale: 1.2 }}\n layout\n transition={spring}\n >\n removeAllotment(el)}\n aria-label={`${language?.DecreaseQuantity} ${el.name}`}\n disabled={calculateQuantity(el) === 0 ? true : false}\n >\n
\n {language?.Options}
\n ) : (\n \"\"\n )}\n\n {options &&\n options.map((el, i) => (\n\n {el.articles.map((ele, i) =>\n checkAllotmentItemRemaining(el, timeSelected) === \"full\" ? (\n \n
\n ) : (\n \n
\n {ele.name}
\n\n {language?.SoldOut}\n
\n\n
\n )\n )}\n \n
\n {ele.name}
\n\n {ele && ele.priceInclVat}\n
\n\n 0 ? true : \"\"}\n transition={spring}\n layout\n />\n 0 ? true : \"\"}\n // whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 1.2 }}\n layout\n transition={spring}\n style={{\n pointerEvents: allotmentItemOutOfStock.includes(\n ele.name\n )\n ? \"none\"\n : \"\",\n }}\n >\n \n addAllotmentItem(ele, timeSelected, el)\n }\n aria-label={`${language?.AddProduct} ${ele.name}`}\n >\n 0 ? true : \"\"}\n layout\n transition={spring}\n >\n {calculateQuantity(ele)}\n \n 0 ? true : \"\"}\n className=\"calendar-handle2\"\n whileTap={{ scale: 1.2 }}\n layout\n transition={spring}\n >\n removeAllotmentItem(ele, el)}\n aria-label={`${\n language?.RemoveProduct\n } ${calculateQuantity(ele)} ${ele.name}`}\n // disabled={\n // calculateQuantity(el) === 0 ? true : false\n // }\n >\n
\n \n
\n {el.inStock === 0 ? (\n \"\"\n ) : (\n {el.name}
\n\n {el.inStock === 0 ? language?.SoldOut : el.priceInclVat}\n
\n\n 0 ? true : \"\"}\n transition={spring}\n layout\n />\n 0 ? true : \"\"}\n // whileHover={{ scale: 1.1 }}\n whileTap={{ scale: 1.2 }}\n layout\n transition={spring}\n style={{\n pointerEvents:\n calculateQuantity(el) === el.inStock ? \"none\" : \"\",\n }}\n >\n addItem(el)}\n aria-label={`${language?.AddProduct} ${el.name}`}\n >\n 0 ? true : \"\"}\n layout\n transition={spring}\n >\n {calculateQuantity(el)}\n \n 0 ? true : \"\"}\n className=\"calendar-handle2\"\n layout\n whileTap={{ scale: 1.2 }}\n transition={spring}\n >\n removeItem(el)}\n aria-label={`${\n language?.RemoveProduct\n } ${calculateQuantity(el)} ${el.name}`}\n disabled={calculateQuantity(el) === 0 ? true : false}\n >\n
\n )}\n \n ))\n : \"\"}\n {cartTotal > 0 ? (\n \n {language?.ToPay} {cartTotal} {currency}\n
\n ) : (\n \"\"\n )}\n \n\n
\n \n \n );\n};\n\nexport default ArticleChooser;\n","import React, { useContext, useEffect, useRef, useState } from \"react\";\nimport axios from \"axios\";\nimport { useSelector } from \"react-redux\";\nimport { STATE_CULTURE, STATE_CURRENCY } from \"../../common/state\";\nimport { navigate, useLocation } from \"@reach/router\";\nimport TicketIntroduction from \"./TicketIntroduction\";\nimport { DataContext } from \"../common/dataProvider\";\nimport { makeStyles } from \"@material-ui/styles\";\nimport Calendar from \"./Calendar\";\nimport Legend from \"./Legend\";\nimport gql from \"graphql-tag\";\nimport { useQuery } from \"@apollo/react-hooks\";\nimport TimeChooser from \"./TimeChooser\";\nimport ArticleChooser from \"./ArticleChooser\";\nimport { endOfMonth, startOfMonth } from \"date-fns\";\nimport { da, de, enGB, sv } from \"date-fns/locale\";\nimport smoothscroll from \"smoothscroll-polyfill\";\nimport { Button, Container } from \"@mantine/core\";\n\nconst query = gql`\n query detailQuery(\n $currency: String\n $culture: String\n $posId: Int\n $from: DateTime\n $until: DateTime\n ) {\n allotments(\n currency: $currency\n culture: $culture\n posId: $posId\n from: $from\n until: $until\n ) {\n description\n occasions {\n time\n remaining\n allotment {\n id\n maxPerSale\n }\n articles {\n id\n name\n description\n plu\n priceInclVat\n isPersonalTicket\n price {\n amountInclVat\n }\n }\n }\n }\n }\n`;\n\nconst useStyles = makeStyles((theme) => ({\n button: {\n border: \"1px solid #8A8C93\",\n },\n buttonWrapper: {\n maxWidth: \"100%\",\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"start\",\n paddingTop: 0,\n paddingBottom: \".5rem\",\n paddingLeft: 0,\n \"@media screen and (max-width: 768px)\": {\n paddingLeft: \".5rem\",\n },\n },\n ticketWrapper: {},\n introductionWrapper: {\n margin: \"0 auto\",\n minHeight: \"100%\",\n },\n calendarWrapper: {\n display: \"flex\",\n flexDirection: \"column\",\n alignContent: \"center\",\n justifyContent: \"center\",\n justifyItems: \"center\",\n alignItems: \"center\",\n width: \"100%\",\n // minHeight: \"70vh\",\n paddingTop: \"3rem\",\n // paddingBottom: \"5rem\",\n height: \"auto\",\n margin: \"0rem 0rem 3rem 0rem\",\n [theme.breakpoints.down(\"sm\")]: {\n padding: \"0.5rem\",\n paddingTop: \"2rem\",\n // minHeight: \"100vh\",\n },\n },\n timeWrapper: {\n display: \"flex\",\n alignContent: \"center\",\n justifyContent: \"center\",\n justifyItems: \"center\",\n alignItems: \"center\",\n height: \"auto\",\n // paddingTop: \"10rem\",\n // paddingBottom: \"5rem\",\n // minHeight: \"30vh\",\n width: \"100%\",\n [theme.breakpoints.down(\"sm\")]: {\n // paddingTop: \"5rem\"\n },\n },\n\n smallWrapper: {\n minHeight: \"auto\",\n },\n\n largeWrapper: {\n [theme.breakpoints.down(\"sm\")]: {\n padding: \"0\",\n minHeight: \"100vh\",\n },\n },\n\n chooseArticleWrapper: {\n display: \"flex\",\n alignContent: \"center\",\n justifyContent: \"center\",\n justifyItems: \"center\",\n alignItems: \"center\",\n height: \"auto\",\n // paddingTop: \"3rem\",\n // minWidth: \"500px\",\n // minHeight: \"25vh\",\n // paddingBottom: \"5rem\",\n [theme.breakpoints.down(\"sm\")]: {\n padding: \"1rem\",\n // minWidth: \"5px\",\n paddingTop: \"0rem\",\n },\n },\n articleWrapper: {\n // paddingTop: \"10rem\",\n [theme.breakpoints.down(\"sm\")]: {\n padding: \"1rem\",\n },\n },\n}));\n\nconst Ticket = (props) => {\n const { config, language, currency, culture } = useSelector((state) => ({\n config: state.config,\n language: state.language,\n culture: state.cookies[STATE_CULTURE],\n currency: state.cookies[STATE_CURRENCY],\n }));\n\n const { data } = useContext(DataContext);\n const { event, ticketData, shopName } = props;\n const [text, setText] = useState(\"\");\n const [allotment, setAllotment] = useState([]);\n const [allotmentSettings, setAllotmentSettings] = useState([]);\n const [chosenDate, setChosenDate] = useState();\n const [currentDate, setCurrentDate] = useState(new Date());\n const [selectedDate, setSelectedDate] = useState(new Date());\n const [filteredData, setFilteredData] = useState();\n const [firstDate, setFirstDate] = useState([]);\n const [latestDate, setLatestDate] = useState([]);\n const [activeScreen, setActiveScreen] = useState(false);\n const [chooseOccasion, setChooseOccasion] = useState();\n const [chooseTime, setChooseTime] = useState();\n const [selected, setSelected] = useState(false);\n const [cultureLocale, setCultureLocale] = useState();\n const [activeOptionScreen, setActiveOptionScreen] = useState(false);\n const [from, setFrom] = useState();\n const [until, setUntil] = useState();\n const [singleOccasion, setSingleOccasion] = useState();\n const [activeTicketConfigurator, setActiveTicketConfigurator] = useState();\n\n const pageRefs = useRef({});\n let location = useLocation();\n let urlParams = location.pathname.split(\"/\").pop();\n const classes = useStyles();\n const { posId } = config;\n const result = useQuery(query, {\n fetchPolicy: \"cache-and-network\",\n variables: { posId, currency, culture, from, until },\n });\n smoothscroll.polyfill();\n const locales = [\n { culture: \"sv-SE\", data: sv },\n { culture: \"en-US\", data: enGB },\n { culture: \"en-GB\", data: enGB },\n { culture: \"de-DE\", data: de },\n { culture: \"da-DK\", data: da },\n ];\n\n useEffect(() => {\n const getLocale = locales.filter((el) => el.culture === culture)[0].data;\n setCultureLocale(getLocale);\n }, []);\n\n useEffect(() => {\n axios\n .get(\n `${process.env.PUBLIC_URL}/ee-static/shop/${shopName}/Texts//${urlParams}.${culture}.md`\n )\n .then((data) => setText(data.data))\n .catch((err) => {\n console.log(err);\n });\n }, [location.pathname]);\n\n useEffect(() => {\n const siteSettings = config.ticketConfigurator.filter(\n (el) => el.slug.toLowerCase() === urlParams\n );\n\n if (siteSettings[0] !== undefined) {\n const allotmentFilter = data.allotments.filter((el) =>\n siteSettings[0].allotmentId.includes(el.id)\n );\n if (allotmentFilter.length !== 0) {\n let firstAllotmentDate = allotmentFilter;\n let lastAllotmentDate = allotmentFilter;\n const getLastDates = lastAllotmentDate\n .map((el) => el.occasions.slice(-1))\n .flat();\n const getFirstDates = firstAllotmentDate.map((el) => el.occasions[0]);\n const sortLastDates = getLastDates.sort(\n (a, b) => new Date(b.time) - new Date(a.time)\n );\n\n const sortFirstDates = getFirstDates.sort(\n (a, b) => new Date(a.time) - new Date(b.time)\n );\n setAllotment(allotmentFilter);\n setAllotmentSettings(siteSettings);\n setFirstDate(sortFirstDates[0]);\n setLatestDate(sortLastDates[0]);\n }\n if (allotmentFilter.length === 0) {\n setAllotment([]);\n }\n }\n\n // get all occasions, sort den backwards and get the latest date. If the month of the latest date, set until to the latest working month\n }, [location.pathname, result]);\n\n const scrollIntoView = (type) => {\n if (pageRefs.current !== null) {\n setTimeout(() => {\n pageRefs.current[type].scrollIntoView({\n behavior: \"smooth\",\n });\n }, 10);\n }\n };\n\n useEffect(() => {\n setFrom(startOfMonth(currentDate));\n setUntil(endOfMonth(currentDate));\n }, [currentDate]);\n\n return (\n \n \n navigate(-1)}\n >\n {language.Back}\n \n \n \n (pageRefs.current = { ...pageRefs.current, NewCalendar: el })\n }\n >\n
\n \n
\n\n \n {allotment.length > 0\n ? language.Choose_Date\n : language.NoOccasionsAvailable}\n
\n\n {allotment.length === 0 ||\n (allotmentSettings[0] !== undefined &&\n allotmentSettings[0].showColors === false) ? (\n \"\"\n ) : (\n \n )}\n\n {allotment.length > 0 && (\n \n (pageRefs.current = { ...pageRefs.current, TimeChooser: el })\n }\n // style={{ paddingTop: singleOccasion ? \"0\" : \"0\" }}\n >\n
\n )}\n\n \n
\n \n
\n )}\n \n \n \n );\n};\n\nexport default Ticket;\n","import React, { useContext, useMemo } from \"react\";\nimport { useSelector } from \"react-redux\";\nimport { DataContext } from \"../../components/common/dataProvider\";\nimport PageContent from \"../../components/Styles/PageContent\";\nimport PageLayout from \"../../components/Styles/PageLayout\";\nimport Ticket from \"../../components/Ticket\";\nimport { getEvent } from \"../EventPage/util\";\nimport slugify from \"../../components/common/slugify\";\nimport { Button, Container, Text, Title } from \"@mantine/core\";\nimport { useNavigate } from \"@reach/router\";\n\nconst TicketPage = ({ id }) => {\n const { language } = useSelector((state) => ({\n language: state.language,\n }));\n const { data, eventFilter } = useContext(DataContext);\n const config = useSelector((state) => state.config);\n const ticketData = config.ticketConfigurator;\n const event = useMemo(() => getEvent(data, config, id), [data, id, config]);\n const configurator = config?.ticketConfigurator.find(\n (el) => slugify(el.slug) === id\n );\n const navigate = useNavigate();\n\n if (!configurator || configurator?.disabled)\n return (\n \r\n
\r\n );\r\n};\r\n\r\nexport default Header;\r\n","import React from \"react\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport { Link, navigate } from \"@reach/router\";\r\n\r\nconst OccasionButton = (props) => {\r\n const useStyles = makeStyles({\r\n occasionBtn: {\r\n minWidth: \"11rem\",\r\n width: \"100%\",\r\n padding: \" 0 2rem\",\r\n height: \"3.5rem\",\r\n borderRadius: \"10px\",\r\n boxShadow: \"0px 2px 6px rgba(0, 0, 0, 0.15)\",\r\n border: \"1.5px solid rgb(75, 75, 75);\",\r\n fontSize: \"1rem\",\r\n fontWeight: \"600\",\r\n cursor: \"pointer\",\r\n transition: \"all 0.2s ease\",\r\n \"&:hover\": {\r\n opacity: ({ primaryBtn }) => (primaryBtn ? \"0.7\" : \"\"),\r\n background: ({ primaryBtn }) => (primaryBtn ? \"\" : \"#e3e3e3\"),\r\n transform: \"translateY(-1px)\",\r\n },\r\n \"&:disabled\": {\r\n pointerEvents: \"none\",\r\n opacity: \"0.3\",\r\n },\r\n },\r\n });\r\n const classes = useStyles(props);\r\n\r\n return (\r\n {language.Header}
\r\n\r\n
\r\n \r\n \r\n \r\n {progress.map((el, i) => circle(el, i))}\r\n \r\n
\r\n \r\n {props.click ? (\r\n props.setStep(props.click)}\r\n disabled={props.disabled}\r\n aria-label={props.primaryText}\r\n >\r\n {props.primaryText}\r\n \r\n ) : (\r\n \"\"\r\n )}\r\n\r\n {props.submit ? (\r\n \r\n {props.primaryText}\r\n \r\n ) : (\r\n \"\"\r\n )}\r\n\r\n {props.redirect ? (\r\n navigate(props.redirect)}\r\n aria-label={props.primaryText}\r\n >\r\n \r\n {props.primaryText}\r\n
\r\n \r\n ) : (\r\n \"\"\r\n )}\r\n {props.text ? (\r\n \r\n \r\n
\r\n ) : (\r\n \"\"\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default PreviousPageBtn;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport {\r\n addMonths,\r\n subMonths,\r\n format,\r\n isBefore,\r\n startOfWeek,\r\n startOfMonth,\r\n isSameMonth,\r\n} from \"date-fns\";\r\n\r\nimport { IoIosArrowDroprightCircle } from \"react-icons/io\";\r\nimport { IoIosArrowDropleftCircle } from \"react-icons/io\";\r\n\r\nconst Header = ({\r\n currentDate,\r\n setCurrentDate,\r\n selectedDate,\r\n firstOccasion,\r\n lastOccasion,\r\n culture,\r\n cultureLocale\r\n}) => {\r\n const [allotmentDate, setAllotmentDate] = useState();\r\n const monthStart = startOfMonth(currentDate);\r\n const startDate = startOfWeek(monthStart);\r\n const dateFormat = \"MMMM yyyy\";\r\n\r\n const nextMonth = () => {\r\n setCurrentDate(addMonths(currentDate, 1));\r\n };\r\n const prevMonth = () => {\r\n setCurrentDate(subMonths(currentDate, 1));\r\n };\r\n\r\n useEffect(() => {\r\n setAllotmentDate(selectedDate);\r\n }, []);\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Header;\r\n","import React from \"react\";\r\nimport { startOfWeek, format, addDays } from \"date-fns\";\r\n\r\nconst Week = ({ currentDate, cultureLocale }) => {\r\n const dateFormat = \"E\";\r\n const days = [];\r\n let startDate = startOfWeek(currentDate, { locale: cultureLocale });\r\n for (let i = 0; i < 7; i++) {\r\n days.push(\r\n \r\n {!isBefore(monthStart, new Date(firstOccasion?.time)) ? (\r\n \r\n ) : (\r\n \"\"\r\n )}\r\n
\r\n\r\n \r\n {format(currentDate, dateFormat, { locale: cultureLocale })} \r\n
\r\n\r\n \r\n {!isSameMonth(new Date(monthStart), new Date(lastOccasion?.time)) ? (\r\n \r\n ) : (\r\n \"\"\r\n )}\r\n
\r\n \r\n {format(addDays(startDate, i), dateFormat, {locale: cultureLocale})}\r\n
\r\n );\r\n }\r\n return {days}
;\r\n};\r\n\r\nexport default Week;\r\n","import React from \"react\";\r\nimport {\r\n format,\r\n startOfWeek,\r\n addDays,\r\n startOfMonth,\r\n endOfMonth,\r\n endOfWeek,\r\n isSameMonth,\r\n isSameDay,\r\n toDate,\r\n isBefore,\r\n isAfter,\r\n} from \"date-fns\";\r\nimport \"../styles.css\";\r\nimport \"./calendarStyles.css\";\r\n\r\nconst WeekDay = ({\r\n currentDate,\r\n selectedDate,\r\n setSelectedDate,\r\n firstOccasion,\r\n occasion,\r\n chosenOldOccasion,\r\n cultureLocale,\r\n}) => {\r\n const monthStart = startOfMonth(currentDate, { locale: cultureLocale });\r\n const monthEnd = endOfMonth(monthStart);\r\n const startDate = startOfWeek(monthStart, { locale: cultureLocale });\r\n const endDate = endOfWeek(monthEnd);\r\n const dateFormat = \"d\";\r\n const regularDateFormat = \"yyyy-MM-dd\";\r\n const rows = [];\r\n\r\n let days = [];\r\n let day = startDate;\r\n let formattedDate = \"\";\r\n let today = new Date();\r\n let yesterday = today.setDate(today.getDate() - 1);\r\n\r\n const onDateClick = (day) => {\r\n setSelectedDate(day);\r\n };\r\n\r\n const getAvailability = (day, chosenOldOccasion) => {\r\n if (\r\n occasion !== undefined &&\r\n day !== undefined &&\r\n chosenOldOccasion !== undefined\r\n ) {\r\n let data = occasion;\r\n\r\n const filter = data[0]?.occasions.filter(\r\n (el) => el.remaining >= chosenOldOccasion.numberOfTickets\r\n );\r\n\r\n const removeBeforeNow = filter.filter((el) =>\r\n isAfter(new Date(el.time), new Date())\r\n );\r\n\r\n const newFilter =\r\n removeBeforeNow.filter(\r\n (el) => el.time.split(\"T\")[0].toString() === day.toString()\r\n ).length > 0;\r\n\r\n if (newFilter === true) {\r\n return \"available\";\r\n } else {\r\n return \"null\";\r\n }\r\n }\r\n };\r\n\r\n getAvailability(chosenOldOccasion);\r\n\r\n while (day <= endDate) {\r\n for (let i = 0; i < 7; i++) {\r\n formattedDate = format(day, dateFormat);\r\n const cloneDay = day;\r\n\r\n days.push(\r\n \r\n {days}\r\n
\r\n );\r\n days = [];\r\n }\r\n return {rows}
;\r\n};\r\nexport default WeekDay;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport \"./calendarStyles.css\";\r\nimport Header from \"./Header\";\r\nimport Week from \"./Week\";\r\nimport WeekDay from \"./WeekDay\";\r\nimport { CircularProgress } from \"@material-ui/core\";\r\nimport { sv, de, da, enGB, enUS } from \"date-fns/locale\";\r\nimport { addMonths, isAfter, isSameMonth } from \"date-fns\";\r\n\r\nconst MoveOccasaionCalendar = ({\r\n currentDate,\r\n setCurrentDate,\r\n selectedDate,\r\n setSelectedDate,\r\n occasion,\r\n chosenOldOccasion,\r\n culture,\r\n language,\r\n}) => {\r\n const [lastOccasion, setLastOccasion] = useState();\r\n const [firstOccasion, setFirstOccasion] = useState();\r\n const [cultureLocale, setCultureLocale] = useState();\r\n\r\n useEffect(() => {\r\n if (occasion !== undefined) {\r\n setFirstOccasion(occasion[0].occasions[0])\r\n setLastOccasion(occasion[0].occasions.slice(-1)[0])\r\n }\r\n }, [occasion]);\r\n\r\n useEffect(() => {\r\n if(isAfter(new Date(firstOccasion?.time), new Date(currentDate))) {\r\n setCurrentDate(new Date(firstOccasion?.time));\r\n }\r\n },[firstOccasion])\r\n\r\n const locales = [\r\n { culture: \"sv-SE\", data: sv },\r\n { culture: \"en-US\", data: enGB },\r\n { culture: \"en-GB\", data: enGB },\r\n { culture: \"de-DE\", data: de },\r\n { culture: \"da-DK\", data: da },\r\n ];\r\n\r\n useEffect(() => {\r\n const getLocale = locales.filter((el) => el.culture === culture)[0].data;\r\n setCultureLocale(getLocale);\r\n }, []);\r\n\r\n return (\r\n \r\n {occasion === undefined ? (\r\n
\r\n );\r\n};\r\n\r\nexport default MoveOccasaionCalendar;\r\n","import React, { useEffect, useRef } from \"react\";\r\nimport lottie from \"lottie-web\";\r\nimport animationData from \"./animations/1103-confetti-outline-edited.json\";\r\n\r\nconst ConfirmationAnimation = ({ step }) => {\r\n const animationContainer = useRef(null);\r\n const anim = useRef(null);\r\n\r\n useEffect(() => {\r\n if (animationContainer.current) {\r\n anim.current = lottie.loadAnimation({\r\n container: animationContainer.current,\r\n renderer: \"svg\",\r\n loop: false,\r\n autoplay: false,\r\n animationData,\r\n });\r\n anim.current.setSpeed(1);\r\n setTimeout(() => {anim.current.play()}, 500);\r\n return () => anim.current.destroy();\r\n }\r\n }, []);\r\n\r\n useEffect(() => {}, [step]);\r\n\r\n return ;\r\n};\r\n\r\nexport default ConfirmationAnimation;\r\n","import React from \"react\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport { CircularProgress } from \"@material-ui/core\";\r\n\r\nconst SubmitButton = (props) => {\r\n const useStyles = makeStyles({\r\n submitBtn: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n textAlign: \"center\",\r\n minWidth: \"11rem\",\r\n // width: \"100%\",\r\n padding: \" 0 2rem\",\r\n height: \"3.5rem\",\r\n borderRadius: \"10px\",\r\n fontSize: \"1rem\",\r\n fontWeight: \"600\",\r\n cursor: \"pointer\",\r\n boxShadow: \"0px 2px 6px rgba(0, 0, 0, 0.15)\",\r\n\r\n transition: \"all 0.2s ease\",\r\n \"&:hover\": {\r\n transform: \"translateY(-1px)\",\r\n },\r\n },\r\n });\r\n const classes = useStyles(props);\r\n\r\n return (\r\n \r\n {\" \"}\r\n
\r\n ) : (\r\n \"\"\r\n )}\r\n {language.CalendarLoading}
\r\n\r\n
\r\n \r\n \r\n {props.loading === true ? (\r\n
\r\n );\r\n};\r\n\r\nexport default SubmitButton;\r\n","import React, { useEffect, useState } from \"react\";\nimport OccasionButton from \"./OccasionButton\";\nimport PreviousPageBtn from \"./PreviousPageBtn\";\nimport MoveOccasaionCalendar from \"./Calendar\";\nimport \"./styles.css\";\nimport ConfirmationAnimation from \"./ConfirmationAnimation\";\nimport { motion } from \"framer-motion\";\nimport { format, isBefore } from \"date-fns\";\nimport axios from \"axios\";\nimport SubmitButton from \"./SubmitButton\";\nimport { Typography } from \"@material-ui/core\";\nimport Markdown from \"react-markdown\";\n\nconst Content = ({\n step,\n setStep,\n ticketData,\n currentDate,\n setCurrentDate,\n filteredTicketData,\n chosenOldOccasion,\n setChosenOldOccasion,\n occasion,\n config,\n language,\n culture,\n posId,\n token,\n errorMsg,\n setErrorMsg,\n introductionText,\n}) => {\n const [selectedDate, setSelectedDate] = useState();\n const [content, setContent] = useState();\n const [newOccasions, setNewOccasions] = useState([]);\n const [returnClick, setReturnClick] = useState(false);\n const [pinValue, setPinValue] = useState(\"\");\n const [changeView, setChangeView] = useState(false);\n const [chosenNewOccasion, setChosenNewOccasion] = useState();\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n if (occasion !== undefined && selectedDate !== undefined) {\n let date = new Date(selectedDate);\n let filterOccasions = occasion[0].occasions.filter(\n (el) => el.time.split(\"T\")[0].toString() === format(date, \"yyyy-MM-dd\")\n );\n let removeBeforeNow = filterOccasions.filter(\n (el) => !isBefore(new Date(el.time), new Date())\n );\n setNewOccasions(removeBeforeNow);\n setChosenNewOccasion();\n }\n }, [selectedDate]);\n\n useEffect(() => {\n if (ticketData !== undefined && ticketData.length === 0) {\n setErrorMsg(language.ErrorMsgMissingToken);\n }\n }, [ticketData]);\n\n useEffect(() => {\n setChangeView(false);\n if (step === 0) {\n setContent(introduction);\n setChangeView(true);\n }\n if (step === 1) {\n setContent(chooseOldOccasion);\n setChangeView(true);\n }\n if (step === 2) {\n setContent(chooseNewDate);\n }\n if (step === 3) {\n setErrorMsg(\"\");\n setContent(chooseNewTime);\n }\n if (step === 4) {\n setErrorMsg(\"\");\n setContent(confirmNewOccasion);\n setPinValue(\"\");\n }\n if (step === 5) {\n setErrorMsg(\"\");\n setContent(receiptScreen);\n }\n }, [step]);\n\n const introduction = {\n text: introductionText,\n btnTextPrimary: language.GoToBookingBtn,\n clickToSection: 1,\n };\n\n const chooseOldOccasion = {\n header: language.ChooseOldOccasionHeader,\n btnText: language.SecondaryBtn,\n btnTextPrimary: language.PrimaryBtn,\n progress: 0,\n clickToSection: 2,\n secondaryClick: config?.self,\n chooseData: ticketData,\n };\n\n const chooseNewDate = {\n header: language.ChooseNewOccasionHeader,\n btnText: language.SecondaryBtn,\n btnTextPrimary: language.PrimaryBtn,\n clickToSection: 3,\n secondaryClick: config?.self,\n chooseData: \"\",\n };\n\n const chooseNewTime = {\n header: language.ChooseNewOccasionTimeHeader,\n btnText: language.SecondaryBtn,\n btnTextPrimary: language.PrimaryBtn,\n clickToSection: 4,\n secondaryClick: config?.self,\n chooseData: newOccasions,\n };\n\n const confirmNewOccasion = {\n header: language.ConfirmNewOccasionHeader,\n btnText: language.SecondaryBtn,\n btnTextPrimary: language.SubmitBtn,\n clickToSection: \"submit\",\n secondaryClick: config?.self,\n confirmOldOccasion: chosenOldOccasion,\n confirmNewOccasion: chosenNewOccasion,\n };\n\n const receiptScreen = {\n header: language.ConfirmationHeader,\n btnTextPrimary: language.RedirectBtn,\n clickToSection: \"redirect\",\n redirect: config?.logoLink,\n confirmationOldData: chosenOldOccasion,\n confirmationNewData: chosenNewOccasion,\n };\n\n const handlePost = (e) => {\n e.preventDefault();\n setErrorMsg(\"\");\n\n if (\n posId &&\n pinValue.length === 4 &&\n chosenOldOccasion &&\n chosenNewOccasion\n ) {\n setLoading(true);\n const uri = config?.apiUriOverride?.startsWith(\"http\")\n ? config.apiUriOverride\n : config.apiUri;\n\n axios\n .post(`${uri}/api/managesale/${token}/allotments`, {\n posId: posId,\n pin: pinValue,\n allotmentId: chosenOldOccasion.allotmentId,\n fromOccasion: chosenOldOccasion.occasion,\n toOccasion: chosenNewOccasion.time,\n })\n .then(function (response) {\n setLoading(false);\n setStep(5);\n setErrorMsg(\"\");\n })\n .catch(function (error) {\n setLoading(false);\n if (error.response.data === 1) {\n setErrorMsg(language.ErrorMsgIllegalPin);\n }\n if (error.response.data === 2) {\n setErrorMsg(language.ErrorMsgNoOccasionsToMoveFrom);\n }\n if (error.response.data === 3) {\n setErrorMsg(language.ErrorMsgTooCloseToOccasion);\n }\n if (error.response.data === 4) {\n setErrorMsg(language.ErrorMsgInvalidParameter);\n }\n if (error.response.data === 5) {\n setErrorMsg(language.ErrorMsgApiError);\n }\n });\n }\n };\n\n const disabled = () => {\n if (step === 0 && errorMsg.length === 0) {\n return false;\n }\n if (step === 1 && chosenOldOccasion !== undefined) {\n return false;\n }\n\n if (step === 2 && selectedDate !== undefined) {\n return false;\n }\n if (step === 3 && chosenNewOccasion !== undefined) {\n return false;\n }\n if (step === 4 && pinValue.length === 4) {\n return false;\n }\n\n if (step === 5) {\n return false;\n } else {\n return true;\n }\n };\n const handleChange = (e) => {\n let onlyNumbers = /^[0-9]*$/;\n if (onlyNumbers.test(e.target.value)) {\n setPinValue(e.target.value);\n }\n };\n\n return (\n {content?.header}
\n {step === 0 ? (\n\n {step !== 3\n ? content?.chooseData &&\n Object.values(content?.chooseData).map((el, i) => (\n setChosenOldOccasion(el)}\n key={el + i}\n disabled={el.canBeMoved === false ? true : false}\n >\n {step === 1 ? (\n setChosenNewOccasion(el)}\n key={el + i}\n >\n \n
\n \n {el.occasion.replace(\"T\", \" \").slice(0, -3)}\n
\n ) : (\n \"\"\n )}\n\n\n {el.numberOfTickets === 1\n ? el.numberOfTickets + \" \" + language.Ticket.toLowerCase()\n : el.numberOfTickets + \" \" + language.Tickets.toLowerCase()}\n
\n \n ))\n : \"\"}\n\n {step === 3\n ? content?.chooseData &&\n chosenOldOccasion &&\n Object.values(content?.chooseData).map((el, i) =>\n el.time !== chosenOldOccasion.occasion ? (\n\n {el.time.split(\"T\")[1].slice(0, -3)}\n
\n \n ) : (\n \"\"\n )\n )\n : \"\"}\n\n {content?.confirmOldOccasion && content?.confirmNewOccasion && (\n <>\n {step === 4 ? (\n <>\n\n {chosenOldOccasion.numberOfTickets === 1\n ? language.OldOccasionAllotment\n : language.OldOccasionAllotments}\n
\n\n {Object.values(\n content?.confirmOldOccasion.occasion\n .replace(\"T\", \" \")\n .slice(0, -3)\n )}\n
\n {/*\n {Object.values(content?.confirmData[0].name)}\n
*/}\n\n {content?.confirmOldOccasion.numberOfTickets > 1\n ? content?.confirmOldOccasion.numberOfTickets +\n \" \" +\n language.Tickets.toLowerCase()\n : content?.confirmOldOccasion.numberOfTickets +\n \" \" +\n language.Ticket.toLowerCase()}\n
\n\n {content?.confirmOldOccasion.numberOfTickets > 1\n ? language.NewOccasionAllotments\n : language.NewTicket}\n
\n\n {Object.values(\n content?.confirmNewOccasion.time\n .replace(\"T\", \" \")\n .slice(0, -3)\n )}\n
\n {/*\n {Object.values(content?.confirmData[1].name)}\n
*/}\n\n {content?.confirmOldOccasion.numberOfTickets > 1\n ? content?.confirmOldOccasion.numberOfTickets +\n \" \" +\n language.Tickets.toLowerCase()\n : content?.confirmOldOccasion.numberOfTickets +\n \" \" +\n language.Tickets.toLowerCase()}\n
\n \n \n \n ) : (\n \"\"\n )}\n \n )}\n \n {content?.confirmationNewData && step === 5 ? (\n <>\n\n \n {Object.values(\n content?.confirmationNewData.time.replace(\"T\", \" \").slice(0, -3)\n )}\n \n {content?.confirmationOldData.numberOfTickets > 1\n ? content?.confirmationOldData.numberOfTickets +\n \" \" +\n language?.Tickets.toLowerCase()\n : content?.confirmationOldData.numberOfTickets +\n \" \" +\n language?.Ticket.toLowerCase()}\n \n
\n {errorMsg}
\n \n ) : (\n \"\"\n )}\n\n\n \n 0 ? \"updated\" : \"initial\"}\n className=\"moveoccasions-modal\"\n >\n
\n );\n};\n\nexport default MoveOccasions;\n","import React from \"react\";\r\nimport PageContent from \"../../components/Styles/PageContent\";\r\nimport PageLayout from \"../../components/Styles/PageLayout\";\r\nimport MoveOccasions from \"../../components/MoveOccasions\";\r\n\r\nconst MoveOccasionsPage = () => {\r\n return (\r\n \n
\n \n \n \n
\n {props.text}
:\n
\n ) : (\n \"\"\n )}\n {optionsData && optionsData.length > 0 ? (\n {language?.ArticleBooking.CartHeader}
\n {articlesData && articlesData.length > 0 ? (\n\n {articlesData.map((el, i) => (\n \n
\n ))}\n \n
\n {translation(el)}
\n\n {el.inStock !== 0\n ? `${total(productPrice(el?.priceInclVat))}`\n : language?.ArticleBooking.OutOfStock}\n
\n\n 0 ? isOn : \"\"}\n transition={spring}\n layout\n />\n 0 ? isOn : \"\"}\n whileTap={{ scale: 1.2 }}\n layout\n transition={spring}\n >\n addItem(el)}\n aria-label={language?.ArticleBooking.AddProduct}\n >\n 0 ? isOn : \"\"}\n data-over9={calculateQuantity(el) > 9 ? \"true\" : \"\"}\n data-over99={calculateQuantity(el) >= 100 ? \"true\" : \"\"}\n layout\n transition={spring}\n >\n {calculateQuantity(el)}\n \n 0 ? isOn : \"\"}\n className=\"handle2\"\n layout\n whileTap={{ scale: 1.2 }}\n transition={spring}\n >\n removeItem(el)}\n disabled={calculateQuantity(el) === 0 ? true : false}\n >\n
\n \n \n
\n ))}\n \n ) : (\n \"\"\n )}\n \n {language.ArticleBooking.OptionsHeader}\n
\n {optionsData.map((el, i) => (\n\n
\n {el.name}
\n\n {el?.priceInclVat ? (\n <>\n {el.inStock !== 0\n ? `${total(productPrice(el?.priceInclVat))}`\n : language.ArticleBooking.OutOfStock}\n \n ) : el.inStock !== 0 ? (\n el.displayPrice\n ) : (\n language.ArticleBooking.OutOfStock\n )}\n
\n\n 0 ? isOn : \"\"}\n transition={spring}\n layout\n />\n 0 ? isOn : \"\"}\n whileTap={{ scale: 1.2 }}\n layout\n transition={spring}\n >\n addItem(el)}\n aria-label={language?.ArticleBooking.AddProduct}\n >\n 0 ? isOn : \"\"}\n data-over9={calculateQuantity(el) > 9 ? \"true\" : \"\"}\n data-over99={calculateQuantity(el) >= 100 ? \"true\" : \"\"}\n layout\n transition={spring}\n >\n {calculateQuantity(el)}\n \n 0 ? isOn : \"\"}\n className=\"handle2\"\n layout\n whileTap={{ scale: 1.2 }}\n transition={spring}\n >\n removeItem(el)}\n aria-label={language?.ArticleBooking.RemoveProduct}\n disabled={calculateQuantity(el) === 0 ? true : false}\n >\n
\n \r\n click(props.data)}\r\n // disabled={props.disabled}\r\n style={{ pointerEvents: activeBtn ? \"none\" : \"\" }}\r\n aria-label={props.text}\r\n >\r\n {props.text}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ChosenButton;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport axios from \"axios\";\r\nimport Button from \"./Button\";\r\nimport \"./styles.css\";\r\nimport { Typography } from \"@material-ui/core\";\r\nimport Markdown from \"react-markdown\";\r\nimport { useLocation } from \"@reach/router\";\r\nimport ChosenButton from \"./ChosenButton\";\r\nimport { getApolloContext } from \"@apollo/react-hooks\";\r\n\r\nconst Header = ({\r\n bookingData,\r\n section,\r\n setSection,\r\n scrollIntoView,\r\n language,\r\n setIsVisible,\r\n settingsData,\r\n config,\r\n culture,\r\n}) => {\r\n const [introduction, setIntroduction] = useState();\r\n const [newContent, setNewContent] = useState();\r\n const location = useLocation();\r\n const urlPathName = location.pathname.split(\"/\").slice(-1);\r\n\r\n const getText = (data) => {\r\n const filter =\r\n data.translations &&\r\n data?.translations?.filter((el) => el.culture === culture);\r\n if (filter?.[0]?.name && filter?.[0]?.name !== undefined) {\r\n return filter?.[0]?.name;\r\n } else {\r\n return data.name;\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n axios\r\n .get(\r\n `${process.env.PUBLIC_URL}/ee-static/shop/${config.shopName}//Texts/article-booking-${urlPathName}.${culture}.md`\r\n )\r\n .then((data) => setIntroduction(data.data))\r\n .catch((err) => {\r\n console.log(err);\r\n });\r\n }, [urlPathName]);\r\n\r\n useEffect(() => {\r\n setNewContent(bookingData);\r\n }, [bookingData, location.pathname]);\r\n\r\n return (\r\n <>\r\n {newContent && newContent.length > 0 ? (\r\n \r\n {newContent.length > 1\r\n ? newContent.map((el, i) => (\r\n
\r\n \r\n ) : (\r\n \"\"\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default Header;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport Markdown from \"react-markdown\";\r\nimport { Typography } from \"@material-ui/core\";\r\nimport axios from \"axios\";\r\nimport { StylesContext } from \"@material-ui/styles\";\r\nimport _ from \"lodash\";\r\nimport { motion } from \"framer-motion\";\r\nimport { useLocation } from \"@reach/router\";\r\nimport slugify from \"../common/slugify\";\r\n\r\nconst IntroductionSection = ({\r\n config,\r\n language,\r\n culture,\r\n section,\r\n selfUrl,\r\n settingsData,\r\n bookingData,\r\n}) => {\r\n const [content, setContent] = useState();\r\n const [showLongText, setShowLongText] = useState(false);\r\n const [text, setText] = useState();\r\n const [header, setHeader] = useState(\"\");\r\n\r\n useEffect(() => {\r\n const filter = bookingData.filter((el) => el.name === section.name);\r\n\r\n if (filter.length > 0 && settingsData) {\r\n axios.all([\r\n axios\r\n .get(\r\n `${process.env.PUBLIC_URL}/ee-static/shop/${\r\n config.shopName\r\n }//Texts/article-booking-${slugify(settingsData?.name)}-${\r\n filter[0].slug\r\n }.${culture}.md`\r\n )\r\n .then((data) => setText(data.data))\r\n .catch((err) => {\r\n console.log(err);\r\n }),\r\n ]);\r\n setContent(filter);\r\n }\r\n }, [bookingData, settingsData, section]);\r\n\r\n return (\r\n \r\n
\r\n ))\r\n : newContent.map((el, i) => (\r\n \r\n
\r\n ))}\r\n {language.ArticleBooking.ModalHeader}
\r\n\r\n\r\n
\r\n \r\n {language.ArticleBooking.ModalText}
\r\n\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default ModalDialog;\r\n","import React, { useContext, useEffect, useRef, useState } from \"react\";\nimport { useSelector } from \"react-redux\";\nimport { STATE_CULTURE, STATE_CURRENCY } from \"../../common/state\";\nimport { DataContext } from \"../common/dataProvider\";\nimport Cart from \"./Cart\";\nimport Header from \"./Header\";\nimport IntroductionSection from \"./IntroductionSection\";\nimport ModalDialog from \"./ModalDialog\";\nimport { useLocation, useNavigate } from \"@reach/router\";\nimport smoothscroll from \"smoothscroll-polyfill\";\nimport { extendPage } from \"../../Pages/AllProductsPage/util\";\nimport PageLayout from \"../Styles/PageLayout\";\nimport PageContent from \"../Styles/PageContent\";\nimport { Button, Container, createStyles, Text, Title } from \"@mantine/core\";\n\nconst useStyles = createStyles((theme) => ({\n button: {\n border: \"1px solid #8A8C93\",\n },\n buttonWrapper: {\n width: \"100%\",\n display: \"flex\",\n justifyContent: \"start\",\n paddingTop: 0,\n paddingBottom: \".5rem\",\n paddingLeft: 0,\n \"@media screen and (max-width: 768px)\": {\n paddingLeft: \"1rem\",\n },\n },\n}));\n\nconst ArticleBooking = () => {\n const [section, setSection] = useState(\"\");\n const [bookingData, setBookingData] = useState([]);\n const [settingsData, setSettingsData] = useState([]);\n const [articlesData, setArticlesData] = useState([]);\n const [optionsData, setOptionsData] = useState([]);\n const [addedOrder, setAddedOrder] = useState(false);\n const [isVisible, setIsVisible] = useState(false);\n const { config, language, culture, currency } = useSelector((state) => ({\n config: state.config,\n language: state.language,\n culture: state.cookies[STATE_CULTURE],\n currency: state.cookies[STATE_CURRENCY],\n }));\n const pageRefs = useRef();\n const { data } = useContext(DataContext);\n const location = useLocation();\n smoothscroll.polyfill();\n\n const urlPathName = location.pathname.split(\"/\").slice(-1)[0];\n const navigate = useNavigate();\n const page = extendPage(data, config);\n const { classes } = useStyles();\n\n useEffect(() => {\n if (config?.articleBookingConfigurator) {\n const filter = config?.articleBookingConfigurator.filter(\n (el) => el.slug === urlPathName && !el?.disabled\n );\n if (filter[0]) {\n setBookingData(filter[0].tickets);\n setSettingsData(filter[0]);\n }\n }\n }, [config?.articleBookingConfigurator, location.pathname]);\n\n useEffect(() => {\n let allotmentTickets = data.articles;\n const articleIds = section.articleId;\n const optionIds = section.optionId;\n const productData = page?.productGroups;\n if (\n productData &&\n section.articleId?.[0] !== undefined &&\n section.articleId?.length > 0\n ) {\n const filterArticles = allotmentTickets.filter((el) => {\n return articleIds.some((item) => {\n return item === el.id;\n });\n });\n\n const removeArticlesDuplicates = new Set(filterArticles);\n const newArticlesData = [...removeArticlesDuplicates];\n\n // Get options\n const filterOptions = productData\n .map((el) => {\n return el.products.filter((ele) => {\n return optionIds.some((item) => {\n return item === ele.id;\n });\n });\n })\n .flat();\n\n const removeOptionsDuplicates = Array.from(\n new Set(filterOptions.map((a) => a.plu))\n ).map((plu) => {\n return filterOptions.find((a) => a.plu === plu);\n });\n\n const newOptionsData = [...removeOptionsDuplicates];\n\n const sortArticles = newArticlesData.sort(\n (a, b) => articleIds.indexOf(a.id) - articleIds.indexOf(b.id)\n );\n\n const sortOptions = newOptionsData.sort(\n (a, b) => optionIds.indexOf(a.id) - optionIds.indexOf(b.id)\n );\n setArticlesData(sortArticles);\n setOptionsData(sortOptions);\n }\n }, [section]);\n\n const selfUrl = config.self.split(\"/\").slice(-1);\n\n const scrollIntoView = (type) => {\n if (isVisible === true) {\n pageRefs.current[type].scrollIntoView({\n block: \"nearest\",\n inline: \"center\",\n behavior: \"smooth\",\n alignToTop: false,\n });\n }\n };\n\n useEffect(() => {\n setIsVisible(false);\n }, [location.pathname]);\n\n if (bookingData.length === 0) {\n return (\n \n {!section.name || section.name === undefined ? (\n
\n {section && section.length !== 0 ? (\n \n {language?.ArticleBooking?.ChooseTicketToContinue}\n
\n ) : (\n \"\"\n )}\n\n {children} \n
\n );\n};\n\nexport default BookingSection;\n","import React, { useContext } from \"react\";\nimport { Button } from \"@mantine/core\";\nimport { useSelector } from \"react-redux\";\nimport { Context } from \"../../context\";\n\nconst Login = () => {\n const { handleLogin, handleLogout } = useContext(Context);\n const { config, language } = useSelector((state) => ({\n config: state.config,\n language: state.language,\n }));\n const { auth } = useSelector((state) => ({\n auth: state.oidc.user !== null && !state.oidc.user.expired,\n }));\n\n return (\n \n \n {label} <span style={{ fontWeight: 400 }}>{subLabel}</span>\n \n
\n \n {\n if (auth) {\n handleLogout();\n } else {\n localStorage.setItem(\n \"goBackUrl\",\n `publicBooking?${window.location.pathname}`\n );\n handleLogin();\n }\n }}\n >\n {!auth && language.Log_On}\n {auth && language.Log_Off}\n \n
\n );\n};\n\nexport default Login;\n","import React, { useState } from \"react\";\nimport {\n Badge,\n Button,\n Card,\n createStyles,\n Group,\n Modal,\n Text,\n Title,\n} from \"@mantine/core\";\nimport { HiOutlineClock } from \"react-icons/hi\";\nimport { MdEmojiPeople } from \"react-icons/md\";\nimport { useSelector } from \"react-redux\";\n\nconst useStyles = createStyles((theme) => ({\n card: {\n position: \"relative\",\n backgroundColor:\n theme.colorScheme === \"dark\" ? theme.colors.dark[7] : theme.white,\n height: \"100%\",\n },\n wrapper: {\n display: \"flex\",\n flexDirection: \"column\",\n justifyContent: \"space-between\",\n height: \"100%\",\n },\n\n rating: {\n position: \"absolute\",\n top: theme.spacing.xs,\n right: theme.spacing.xs + 2,\n pointerEvents: \"none\",\n },\n\n title: {\n fontSize: \"1.15rem\",\n display: \"block\",\n marginTop: theme.spacing.xs,\n marginBottom: theme.spacing.xs / 2,\n },\n subTitle: {\n fontSize: \"1rem\",\n fontWeight: 400,\n },\n footer: {\n marginTop: \"1rem\",\n marginBottom: \"1.5rem\",\n },\n textContainer: {\n display: \"flex\",\n flexDirection: \"column\",\n },\n}));\n\nconst Type = ({\n id,\n name,\n description,\n articlesToApply,\n occasionLengthInMinutes,\n maxParticipants,\n minParticipants,\n form,\n tag,\n ...props\n}) => {\n const [opened, openedSet] = useState(false);\n const { language } = useSelector((state) => ({\n language: state.language,\n }));\n const { classes, cx } = useStyles();\n\n return (\n <>\n \n \n \n {occasionLengthInMinutes} {language.Minutes}\n \n
\n \n {/*\n \n {name}\n \n\n \n {description}\n \n {description.length > 200 && (\n \n )}\n
\n \n \n \n \n \n {minParticipants} - {maxParticipants} {language.Persons}\n \n
\n \n {initialLoading &&
\n );\n};\n\nexport default DateChooser;\n","import React, { useEffect, useMemo, useState } from \"react\";\nimport { Button, createStyles, Text, Title } from \"@mantine/core\";\nimport { useSelector } from \"react-redux\";\nimport \"../styles.css\";\nimport { format, isSameDay } from \"date-fns\";\n\nconst useStyles = createStyles((theme) => ({\n container: {\n width: \"100%\",\n \"@media screen and (max-width: 768px)\": {\n marginBottom: \"1.5rem\",\n },\n },\n wrapper: {\n width: \"100%\",\n height: \"fit-content\",\n display: \"grid\",\n gridTemplateColumns: \"repeat(auto-fill, minmax(70px, 1fr))\",\n gap: \".75rem\",\n },\n titleWrapper: {\n marginBottom: \"1rem\",\n },\n}));\nconst TimeChooser = ({ form, occasions }) => {\n const [activeTime, activeTimeSet] = useState(null);\n const { language } = useSelector((state) => ({\n language: state.language,\n }));\n const { classes } = useStyles();\n\n useEffect(() => {\n if (activeTime) {\n const date = activeTime;\n form.setFieldValue(\"occasion\", date);\n }\n }, [activeTime]);\n\n const getOccasions = useMemo(() => {\n const filter =\n occasions &&\n occasions.filter((el) =>\n isSameDay(new Date(el), new Date(form.values.occasion))\n );\n if (filter) return filter.sort((a, b) => new Date(a) - new Date(b));\n }, [form, occasions]);\n\n return (\n \n \n {language.Date}\n \n {language.ChooseDateToContinue} \n
\n \n exclude(date)}\n minDate={new Date(getLastOccasion?.[0])}\n maxDate={new Date(getLastOccasion?.[getLastOccasion.length - 1])}\n month={month}\n onMonthChange={onMonthChange}\n hideOutsideDates\n style={{ opacity: initialLoading && 0.5 }}\n />\n\n {!initialLoading && occasions && occasions.length === 0 && (\n
\n \n \n {language.NoOccasionsAvailable}\n \n
\n )}\n \n \n {language.Occasion_Time_Label}\n \n {language.ChooseTimeToContinue} \n
\n \n {getOccasions &&\n getOccasions.map((el) => (\n activeTimeSet(el)}\n >\n {format(new Date(el), \"HH:mm\")}\n \n ))}\n
\n \n );\n};\n\nexport default TimeChooser;\n","import React, { useEffect, useState } from \"react\";\nimport { createStyles } from \"@mantine/core\";\nimport DateChooser from \"./DateChooser\";\nimport TimeChooser from \"./TimeChooser\";\nimport { useMediaQuery } from \"@mantine/hooks\";\nimport { useLazyQuery } from \"@apollo/react-hooks\";\nimport { GET_PUBLIC_BOOKING_OCCASIONS } from \"../publicBookingQuery\";\nimport { addYears } from \"date-fns\";\n\nconst useStyles = createStyles((theme) => ({\n container: {\n display: \"flex\",\n gap: \"2.5rem\",\n paddingRight: \"1rem\",\n \"@media screen and (max-width: 768px)\": {\n gap: \"1.5rem\",\n paddingRight: 0,\n },\n },\n}));\n\nconst DateTimePicker = ({ form, bookingApiClient }) => {\n const [calendarDates, calendarDatesSet] = useState({ from: null, to: null });\n\n const [lazyOccasionsQuery, { data: initialData, loading: initialLoading }] =\n useLazyQuery(GET_PUBLIC_BOOKING_OCCASIONS, {\n client: bookingApiClient,\n });\n\n useEffect(() => {\n lazyOccasionsQuery({\n variables: {\n activityId: form.values.activityId,\n occasionsFrom: new Date(),\n occasionsTo: addYears(new Date(), 1),\n },\n });\n }, [form.values.activityId]);\n\n const { classes } = useStyles();\n const matches = useMediaQuery(\"(max-width: 768px)\");\n return (\n \n {max > 50 ? (\n addInput(e)}\n />\n ) : (\n addInput(e)}\n />\n )}\n
\n );\n};\n\nexport default TextField;\n","import React from \"react\";\nimport { createStyles, NumberInput } from \"@mantine/core\";\n\nconst useStyles = createStyles((theme) => ({\n label: {\n fontSize: \"1rem !important\",\n },\n description: {\n fontSize: \"1rem\",\n marginTop: \"-0.35rem\",\n paddingBottom: \".5rem\",\n color: \"black\",\n },\n}));\n\nconst NumberField = ({\n form,\n index,\n placeholder,\n label,\n description,\n required,\n min,\n max,\n}) => {\n const { classes } = useStyles();\n return (\n \n \n {values.map((el) => (\n
\n );\n};\n\nexport default CheckboxGroupField;\n","import React from \"react\";\nimport { createStyles, Text, Title } from \"@mantine/core\";\nimport { useSelector } from \"react-redux\";\nimport { format } from \"date-fns\";\n\nconst useStyles = createStyles((theme) => ({\n container: {},\n titleWrapper: {\n marginBottom: \"1rem\",\n },\n listWrapper: {\n display: \"grid\",\n gridTemplateColumns: \"30% 70%\",\n gap: \"3rem\",\n \"@media screen and (max-width: 768px)\": {\n gridTemplateColumns: \"1fr\",\n gap: \"0rem\",\n },\n \"& ul\": {\n marginTop: \"-.3rem\",\n listStyle: \"none\",\n padding: 0,\n paddingRight: \"2rem\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"0.5rem\",\n \"& li\": {\n wordBreak: \"break-word\",\n },\n },\n \"& span\": {\n fontWeight: 400,\n },\n },\n}));\n\nconst Confirmation = ({ form, data, name }) => {\n const { language } = useSelector((state) => ({\n language: state.language,\n }));\n const { classes } = useStyles();\n\n const fieldText = (field) => {\n if (field?.stringVal) {\n return {field?.stringVal};\n } else if (field?.multiVal && field?.multiVal?.length > 0) {\n return (\n field?.multiVal &&\n field?.multiVal.map((el, i) => (\n \n {el}\n \n ))\n );\n } else if (field?.intVal) {\n return {field?.intVal};\n } else {\n return -;\n }\n };\n const fields = (field) => {\n const getData = data && data?.formFields.filter((el) => el.id === field.id);\n if (getData) {\n const getValue = form.values.formFields.filter(\n (el) => el.id === getData?.[0].id\n );\n return (\n \n
{fieldText(getValue?.[0])}
\n \n {language.Type}\n
\n {type?.name}\n
\n \n {type?.name}\n
\n {language.Length}\n
\n \n {type?.occasionLengthInMinutes} {language.Minutes}\n \n
\n \n \n {type?.occasionLengthInMinutes} {language.Minutes}\n \n
\n {language.Occasion}\n
\n {format(new Date(field?.[1]), \"yyyy-MM-dd HH:mm\")}\n
\n \n {format(new Date(field?.[1]), \"yyyy-MM-dd HH:mm\")}\n
\n {language.AmountOfParticipants}\n
\n {field?.[1]}\n
\n \n {field?.[1]}\n
\n {language.Responsible}\n
\n {name}\n
\n \n {name}\n
\n
\n );\n};\n\nexport default Confirmation;\n","import React from \"react\";\nimport { Button, createStyles } from \"@mantine/core\";\nimport { FaArrowLeft, FaArrowRight } from \"react-icons/fa\";\nimport { useSelector } from \"react-redux\";\n\nconst useStyles = createStyles((theme) => ({\n wrapper: {\n display: \"flex\",\n width: \"100%\",\n justifyContent: \"space-between\",\n marginTop: \"1.25rem\",\n },\n firstButton: {\n \"@media screen and (max-width: 768px)\": {\n width: \"100% !important\",\n },\n },\n}));\nconst ButtonNavigation = ({\n activeStep,\n onPrevClick,\n onNextClick,\n isDisabled,\n onClick,\n}) => {\n const { language } = useSelector((state) => ({\n language: state.language,\n }));\n const { classes } = useStyles();\n const prevClick = () => {\n if (onClick) {\n Promise.resolve(onClick()).then(() => onPrevClick());\n } else {\n onPrevClick();\n }\n };\n const nextClick = () => {\n if (onClick) {\n Promise.resolve(onClick()).then(() => onNextClick());\n } else {\n onNextClick();\n }\n };\n\n return (\n \n \n {language.Summary}\n \n \n {language.CheckSummary}\n \n
\n \n
\n - {dataFields()}
\n \n {language.ExtraFields}\n \n
\n - {form.values.formFields.map((el) => fields(el))}
\n {activeStep !== 0 && (\n
\n );\n};\n\nexport default ButtonNavigation;\n","import React from \"react\";\nimport { Button, createStyles, Text, Title } from \"@mantine/core\";\nimport { useSelector } from \"react-redux\";\nimport { useNavigate } from \"@reach/router\";\n\nconst useStyles = createStyles((theme) => ({\n container: {},\n titleWrapper: {\n marginBottom: \"1rem\",\n },\n buttonWrapper: {\n display: \"flex\",\n flexDirection: \"row\",\n width: \"100%\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n gap: \"1.5rem\",\n \"@media screen and (max-width: 768px)\": {\n flexDirection: \"column\",\n },\n },\n}));\nconst Receipt = ({ success, error, onPrevClick }) => {\n const { classes } = useStyles();\n const { language } = useSelector((state) => ({\n language: state.language,\n }));\n\n const navigate = useNavigate();\n return (\n \n
\n );\n};\n\nexport default Receipt;\n","import React from \"react\";\nimport { createStyles, Radio } from \"@mantine/core\";\n\nconst useStyles = createStyles((theme) => ({\n label: {\n fontSize: \"1rem !important\",\n },\n description: {\n fontSize: \"1rem\",\n marginTop: \"0.25rem\",\n paddingBottom: \".5rem\",\n color: \"black\",\n },\n radio: {\n textAlign: \"left\",\n },\n}));\n\nconst RadioGroupField = ({\n form,\n label,\n description,\n values,\n required,\n index,\n}) => {\n const { classes } = useStyles();\n\n return (\n \n \n {success && language.BookingComplete}\n {!success && language.BookingError}\n \n \n {success && language.BookingDescription}\n {!success && language.BookingErrorDescription}\n \n
\n \n {!success ? (\n onPrevClick()}\n className={\"primaryButton\"}\n size=\"md\"\n >\n {language.Back}\n \n ) : (\n \n )}\n navigate(\"/ticketshop\")}\n className={\"primaryButton\"}\n size=\"md\"\n >\n {language.BackToHomepage}\n \n
\n \n \n {values.map((el) => (\n
\n );\n};\n\nexport default RadioGroupField;\n","import React, { useEffect, useMemo, useRef, useState } from \"react\";\r\nimport {\r\n Button,\r\n Checkbox,\r\n Container,\r\n createStyles,\r\n NumberInput,\r\n Stepper,\r\n} from \"@mantine/core\";\r\nimport { useMutation, useQuery } from \"@apollo/react-hooks\";\r\nimport {\r\n CREATE_PUBLIC_BOOKING_REQUEST,\r\n GET_PUBLIC_BOOKING_PUBLIC_INFO,\r\n} from \"./publicBookingQuery\";\r\nimport BookingSection from \"./BookingSection\";\r\nimport Login from \"./Login\";\r\nimport { useSelector } from \"react-redux\";\r\nimport Type from \"./Type\";\r\nimport DateTimePicker from \"./DateTimePicker\";\r\nimport { useMediaQuery } from \"@mantine/hooks\";\r\nimport TextField from \"./ExtraForm/TextField\";\r\nimport NumberField from \"./ExtraForm/NumberField\";\r\nimport CheckboxGroupField from \"./ExtraForm/CheckboxGroupField\";\r\nimport Confirmation from \"./Confirmation\";\r\nimport ButtonNavigation from \"./ButtonNavigation\";\r\nimport autoAnimate from \"@formkit/auto-animate\";\r\nimport { useForm } from \"@mantine/form\";\r\nimport Receipt from \"./Receipt\";\r\nimport { IoIosCloseCircleOutline } from \"react-icons/io\";\r\nimport { STATE_CULTURE } from \"../../common/state\";\r\nimport axios from \"axios\";\r\nimport Markdown from \"react-markdown\";\r\nimport RadioGroupField from \"./ExtraForm/RadioGroupField\";\r\n\r\nconst useStyles = createStyles((theme) => ({\r\n container: {},\r\n introduction: {},\r\n separator: {\r\n marginLeft: \"5px\",\r\n marginRight: \"5px\",\r\n },\r\n accordionWrapper: {\r\n width: \"100%\",\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n // alignItems: \"center\",\r\n gap: \"1rem\",\r\n marginBottom: \"1.25rem\",\r\n \"& button\": {\r\n width: \"fit-content\",\r\n alignSelf: \"end\",\r\n },\r\n },\r\n typeWrapper: {\r\n display: \"grid\",\r\n gridTemplateColumns: \"1fr 1fr 1fr\",\r\n gap: \"1rem\",\r\n padding: 0,\r\n \"@media screen and (max-width: 768px)\": {\r\n gridTemplateColumns: \"1fr\",\r\n },\r\n listStyle: \"none\",\r\n },\r\n extraFieldWrapper: {\r\n display: \"grid\",\r\n gridTemplateColumns: \"1fr 1fr\",\r\n gap: \"2rem\",\r\n \"@media screen and (max-width: 768px)\": {\r\n gridTemplateColumns: \"1fr\",\r\n },\r\n },\r\n confirmationWrapper: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n marginTop: \"1rem\",\r\n gap: \"1rem\",\r\n \"& button\": {\r\n alignSelf: \"end\",\r\n },\r\n },\r\n numberInput: {\r\n fontSize: \"1rem !important\",\r\n },\r\n description: {\r\n fontSize: \"1rem !important\",\r\n marginTop: \"-0.3rem\",\r\n paddingBottom: \"0.25rem\",\r\n },\r\n confirmationButtonWrapper: {\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n \"@media screen and (max-width: 768px)\": {\r\n flexDirection: \"column\",\r\n gap: \"1.5rem\",\r\n \"div button\": {\r\n width: \"100%\",\r\n },\r\n button: {\r\n width: \"100%\",\r\n },\r\n },\r\n },\r\n confirmationCheckbox: {\r\n textAlign: \"left\",\r\n \"@media screen and (max-width: 768px)\": {\r\n padding: \"0 0 0 0.7rem\",\r\n marginTop: \"-0.2rem\",\r\n },\r\n },\r\n}));\r\n\r\nconst PublicBooking = ({ activityId, bookingApiClient, tag, subLabel }) => {\r\n const { user, auth } = useSelector((state) => ({\r\n user: state.oidc.user,\r\n auth: state.oidc.user !== null && !state.oidc.user.expired,\r\n }));\r\n const [introduction, introductionSet] = useState(null);\r\n const [extraFormIsValid, extraFormIsValidSet] = useState([\r\n { id: 99999, isValid: true },\r\n ]);\r\n const [consent, consentSet] = useState(false);\r\n const [active, activeSet] = useState(0);\r\n const [firstFetch, firstFetchSet] = useState(false);\r\n const [queryData, queryDataSet] = useState(null);\r\n const { config, culture, language } = useSelector((state) => ({\r\n config: state.config,\r\n culture: state.cookies[STATE_CULTURE],\r\n language: state.language,\r\n }));\r\n\r\n const form = useForm({\r\n initialValues: {\r\n activityId: \"\",\r\n responsibleId: \"\",\r\n publicBookingTypeId: \"\",\r\n occasion: \"\",\r\n numberOfParticipants: 0,\r\n formFields: [],\r\n },\r\n });\r\n\r\n const { data, loading, error } = useQuery(GET_PUBLIC_BOOKING_PUBLIC_INFO, {\r\n client: bookingApiClient,\r\n variables: { activityId },\r\n fetchPolicy: \"cache-and-network\",\r\n skip: firstFetch === false,\r\n onCompleted: () => {\r\n firstFetchSet(false);\r\n queryDataSet(data);\r\n },\r\n });\r\n\r\n const [\r\n publicBookingRequest,\r\n { data: mutationData, loading: mutationLoading, error: mutationError },\r\n ] = useMutation(CREATE_PUBLIC_BOOKING_REQUEST, {\r\n client: bookingApiClient,\r\n });\r\n\r\n useEffect(() => {\r\n if (activityId) {\r\n firstFetchSet(true);\r\n }\r\n form.reset();\r\n activeSet(0);\r\n consentSet(false);\r\n }, [activityId, window.location.pathname]);\r\n\r\n useEffect(() => {\r\n if (activityId) {\r\n form.setFieldValue(\"activityId\", activityId);\r\n axios\r\n .get(\r\n `${process.env.PUBLIC_URL}/ee-static/shop/${config.shopName}/Texts/public-booking-${activityId}.${culture}.md`\r\n )\r\n .then((res) => introductionSet(res.data))\r\n .catch(() => introductionSet(\"\"));\r\n }\r\n }, [config, culture, activityId]);\r\n\r\n const handleSubmit = (values) => {\r\n const getStringifiedFields = values?.formFields.reduce((acc, curr) => {\r\n acc.push(JSON.stringify(curr));\r\n return acc;\r\n }, []);\r\n\r\n publicBookingRequest({\r\n variables: {\r\n activityId: values.activityId,\r\n numberOfParticipants: values.numberOfParticipants,\r\n occasion: values.occasion,\r\n publicBookingTypeId: values.publicBookingTypeId,\r\n responsibleId: user?.profile?.id ? user?.profile?.id : \"0\",\r\n formFields: getStringifiedFields,\r\n },\r\n });\r\n };\r\n\r\n const parent = useRef(null);\r\n const stepRef = useRef(null);\r\n const matches = useMediaQuery(\"(max-width: 768px)\");\r\n\r\n const { classes } = useStyles();\r\n\r\n const formFields = (field, index) => {\r\n switch (field.fieldType) {\r\n case \"STRING\":\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n\r\n - \r\n {queryData &&\r\n queryData?.publicBookingPublicInfo?.publicBookingTypes\r\n ?.length > 0 &&\r\n queryData?.publicBookingPublicInfo?.publicBookingTypes?.map(\r\n (el, i) => (\r\n
- \r\n
\r\n
\r\n \r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n insertListItems()}\r\n />\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {queryData &&\r\n queryData?.publicBookingPublicInfo?.formFields\r\n .sort((a, b) => a.order - b.order)\r\n .map((el, i) =>
\r\n {formFields(el, i)}
)}\r\n \r\n \r\n \r\n\r\n
\r\n \r\n \r\n consentSet(e.currentTarget.checked)}\r\n />\r\n
\r\n \r\n \r\n {language.SendBooking}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Security;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport axios from \"axios\";\r\nimport Markdown from \"react-markdown\";\r\nlet source;\r\n\r\nconst Terms = () => {\r\n const [text, setText] = useState(\"\");\r\n const { shopName } = useSelector((state) => state.config);\r\n useEffect(() => {\r\n let CancelToken = axios.CancelToken;\r\n source = CancelToken.source();\r\n axios\r\n .get(\r\n `${process.env.PUBLIC_URL}/ee-static/shop/${shopName}/Texts/terms.md`\r\n )\r\n .then((res) => setText(res.data));\r\n\r\n return () => source.cancel(\"Component Is Unmounting\");\r\n }, [shopName]);\r\n\r\n return (\r\n Klarna
\r\n\r\n Our checkout solution is provided by Klarna (Klarna AB, Sveavägen\r\n 46, 111 34 Stockholm, Sweden) and uses cookies to offer you the best\r\n possible, tailored, online experience when you use Klarna's\r\n checkout. The exact cookies and purposes for which they are used can\r\n be found here:\r\n
\r\n \r\n Klarnas användande av spårningsteknologier i webbsidans kassa\r\n {\" \"}\r\n
\r\n \r\n Klarnas dataskyddsinformation\r\n \r\n
Redirect...
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default MyCallbackPage;\r\n","import React from \"react\";\r\nimport { processSilentRenew } from \"redux-oidc\";\r\n\r\nconst component = () => {\r\n processSilentRenew();\r\n return Am I silent?;\r\n};\r\n\r\nexport default component;\r\n","import React from \"react\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n oldBrowser: {},\r\n inner: {\r\n maxWidth: \"1200px\",\r\n margin: \"0 auto\",\r\n \"& a\": {\r\n textDecoration: \"underline\",\r\n },\r\n \"& li\": {\r\n marginBottom: \"16px\",\r\n },\r\n },\r\n}));\r\n\r\nconst OldBrowser = (props) => {\r\n const classes = useStyles();\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default OldBrowser;\r\n","import \"react-app-polyfill/ie11\";\nimport \"react-app-polyfill/stable\";\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport \"react-dates/lib/css/_datepicker.css\";\nimport \"react-image-gallery/styles/css/image-gallery.css\";\nimport \"./index.css\";\nimport \"./App.css\";\nimport Main from \"./main\";\nimport { applyMiddleware, combineReducers, compose, createStore } from \"redux\";\nimport { Provider } from \"react-redux\";\nimport { ApolloProvider } from \"@apollo/react-hooks\";\nimport {\n ApolloClient,\n ApolloLink,\n HttpLink,\n InMemoryCache,\n} from \"apollo-boost\";\nimport { cookieMiddleware, cookieReducer } from \"./common/cookies\";\nimport { keys, STATE_CULTURE } from \"./common/state\";\nimport { saleMiddleware, saleReducer, validateSaleId } from \"./common/sale\";\nimport { promiseMiddleware, thunkMiddleware } from \"./common/middleware\";\nimport { busyReducer } from \"./common/busy\";\nimport { languageReducer, loadLanguage } from \"./common/language\";\nimport { CONFIG_LOADED, configReducer } from \"./common/config\";\nimport createOidcMiddleware, {\n OidcProvider,\n reducer as oidcReducer,\n} from \"redux-oidc\";\nimport { getUserManager } from \"./common/auth\";\nimport { Router } from \"@reach/router\";\nimport Callback from \"./common/callback\";\nimport SilentRenew from \"./common/silentRenew\";\nimport Security from \"./components/common/security\";\nimport Terms from \"./components/common/terms\";\nimport Privacy from \"./components/common/privacy\";\nimport OldBrowser from \"./components/common/oldBrowser\";\nimport ContextProvider from \"./context\";\n\nconst dummyMiddleware = () => (next) => (action) => {\n return next(action);\n};\n\nif (!window.CSS) {\n const app = window.document.getElementById(\"root\");\n const heading = window.document.createElement(\"h1\");\n const headingText = window.document.createTextNode(\"Gammal Webbläsare!\");\n heading.appendChild(headingText);\n app.appendChild(heading);\n console.log(app);\n} else {\n fetch(process.env.PUBLIC_URL + \"/config.json\")\n .then((response) => response.json())\n .then((config) => {\n const getJson = (f) => {\n return fetch(f).then((x) => x.json());\n };\n\n const merge = (o, rest) => {\n var next = rest.pop();\n if (!next) return o;\n\n const merged = {\n ...o,\n ...next,\n };\n return merge(merged, rest);\n };\n\n const configUri = process.env.PUBLIC_URL + \"/config.json\";\n const localUri = `${process.env.PUBLIC_URL}/ee-static/shop/${config.shopName}/local.json`;\n const files = [configUri, localUri].map((f) => getJson(f));\n\n Promise.all(files)\n .then((response) => merge({}, response))\n .then((config) => {\n console.log(config);\n const {\n apiUri,\n apiUriOverride,\n posId,\n version,\n shopName,\n pageTitle,\n } = config;\n const uri = apiUriOverride?.startsWith(\"http\")\n ? apiUriOverride\n : apiUri;\n console.log(uri);\n if (pageTitle) {\n window.document.title = pageTitle;\n } else {\n window.document.title = shopName;\n }\n console.log(\"version \" + version);\n //Add local stylesheet\n let link = window.document.createElement(\"link\");\n link.href = `${process.env.PUBLIC_URL}/ee-static/shop/${config.shopName}/style.css`;\n link.rel = \"stylesheet\";\n window.document.getElementsByTagName(\"head\")[0].appendChild(link);\n\n const userManager = getUserManager(config);\n\n const reducers = combineReducers({\n cookies: cookieReducer(keys(), config),\n sale: saleReducer,\n busy: busyReducer,\n language: languageReducer,\n config: configReducer,\n oidc: oidcReducer,\n });\n\n const oidcMiddleware = !userManager.error\n ? createOidcMiddleware(\n userManager,\n () => true,\n false,\n `${process.env.PUBLIC_URL}/callback`\n )\n : dummyMiddleware;\n\n const middleware = applyMiddleware(\n cookieMiddleware,\n saleMiddleware({ apiUri: uri, posId }),\n promiseMiddleware,\n thunkMiddleware,\n oidcMiddleware\n );\n\n const enhancers = compose(\n middleware,\n window.__REDUX_DEVTOOLS_EXTENSION__\n ? window.__REDUX_DEVTOOLS_EXTENSION__()\n : (f) => f\n );\n const store = createStore(reducers, {}, enhancers);\n\n store.dispatch({ type: CONFIG_LOADED, payload: config });\n store.dispatch(validateSaleId(uri, () => console.log(\"reset\")));\n\n //Create Apollo client and auth\n const httpLink = new HttpLink({ uri: `${uri}/graphql` });\n const authLink = new ApolloLink((operation, forward) => {\n const { oidc } = store.getState();\n\n const token = oidc.user ? oidc.user.access_token : null;\n if (token) {\n operation.setContext({\n headers: {\n authorization: token ? `Bearer ${token}` : null,\n },\n });\n }\n\n return forward(operation);\n });\n\n const client = new ApolloClient({\n link: authLink.concat(httpLink),\n cache: new InMemoryCache(),\n });\n\n let culture = store.getState().cookies[STATE_CULTURE];\n loadLanguage(culture, config, store.dispatch);\n\n if (userManager.error) {\n ReactDOM.render(\n \r\n
\r\n Denna webshop kräver en modern webläsare!
\r\nTyvärr använder du en gammal webbläsare.
\r\nVarför bör du uppdatera din webbläsare?
\r\n- \r\n
- \r\n Säkerhet: Äldre webbläsare använder sämre kryptering av data\r\n vilket ökar risken för cyberattacker och scams, vilket i sin tur\r\n ökar risken för du kan bli av med personlig information även på\r\n \"säkra\" webbplatser.\r\n \r\n
- \r\n Hastighet: Varje ny generation av webbläsare blir snabbare\r\n och bättre än sin föregångare. Vem vill inte ha snabbare internet?\r\n \r\n
- \r\n Teknik: För att bygga moderna webbsidor med en bra\r\n användarupplevelse, så krävs en modern webbläsare. Ny teknik\r\n utvecklas ständigt i webvärlden och för att hänga med krävs det en\r\n modern webläsare som har stöd för den senaste tekniken.\r\n \r\n
Windows
\r\n\r\n Om du har Windows 10 som operativsystem på din dator, så har du redan\r\n en modern webbläsare.\r\n
\r\n Den heter{\" \"}\r\n \r\n Microsoft Edge\r\n \r\n . Använd den istället för Internet Explorer. Microsoft rekommenderar\r\n att välja Microsoft Edge istället för Internet Explorer.\r\n
Mac
\r\n\r\n Använder du Apple Safari, så behöver du minst version 11.\r\n
\r\n Du kan uppgradera till den senaste versionen genom att installera de\r\n senaste uppgraderingarna för din macOS-version.{\" \"}\r\n Apple Safari\r\n
\r\n Du kan även använda någon av dessa webbläsare, som är helt gratis och\r\n fungerar på både Mac och Windows.\r\n
\r\n\r\n
\r\n \r\n \r\n Google Chrome\r\n \r\n
\r\n \r\n \r\n Mozilla Firefox\r\n \r\n
\r\n \r\n Brave\r\n
\r\n