\r\n
\r\n {charges.length > 0 && (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ActivePerson;\r\n","import React, { useReducer, useEffect } from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { useQuery } from \"@apollo/react-hooks\";\r\nimport gql from \"graphql-tag\";\r\n\r\nexport const AccountContext = React.createContext();\r\nexport const SET_ACTIVE_PERSON = \"set_active_person\";\r\n\r\nconst WHOAMI = gql`\r\n query {\r\n member {\r\n saleHistory {\r\n id\r\n customerId\r\n receiptNumber\r\n saleDate\r\n totalExclVat\r\n totalInclVat\r\n posId\r\n posName\r\n }\r\n subscriptionHistory {\r\n customerId\r\n uniqueIdentifier\r\n registrationDate\r\n subscriptionId\r\n subscriptionTypeName\r\n }\r\n }\r\n whoami {\r\n details {\r\n id\r\n name\r\n firstname\r\n lastname\r\n photo\r\n civicRegistrationNumber\r\n hasAssociation\r\n associatedWith {\r\n id\r\n name\r\n }\r\n addresses {\r\n type\r\n isEmpty\r\n street\r\n streetNumber\r\n zipCode\r\n city\r\n countryCode\r\n }\r\n phonenumbers {\r\n type\r\n isEmpty\r\n number\r\n }\r\n manages {\r\n id\r\n name\r\n firstname\r\n lastname\r\n photo\r\n email\r\n civicRegistrationNumber\r\n hasAssociation\r\n associatedWith {\r\n id\r\n name\r\n }\r\n addresses {\r\n type\r\n isEmpty\r\n street\r\n streetNumber\r\n zipCode\r\n city\r\n countryCode\r\n }\r\n phonenumbers {\r\n type\r\n isEmpty\r\n number\r\n }\r\n }\r\n email\r\n }\r\n photo\r\n }\r\n }\r\n`;\r\n\r\nconst initialState = {\r\n activePerson: {},\r\n};\r\nconst reducer = (state, action) => {\r\n switch (action.type) {\r\n case SET_ACTIVE_PERSON:\r\n return { ...state, activePerson: action.payload };\r\n default:\r\n throw new Error(`Wrong action type: ${action.type}`);\r\n }\r\n};\r\n\r\nconst AccountProvider = (props) => {\r\n const [state, dispatch] = useReducer(reducer, initialState);\r\n const config = useSelector((state) => state.infrastructure.config);\r\n const { loading, error, data } = useQuery(WHOAMI);\r\n const accountData = loading ? null : data;\r\n const getIsSelf = () => {\r\n if (!accountData) return true;\r\n return accountData.whoami.details.id === state.activePerson.id;\r\n };\r\n useEffect(() => {\r\n if (!data) return;\r\n if (data.whoami && !state.activePerson.id) {\r\n dispatch({ type: SET_ACTIVE_PERSON, payload: data.whoami.details });\r\n }\r\n }, [data, state.activePerson]);\r\n\r\n if (error) return \r\n {data?.name} \r\n {data?.email} \r\n
\r\n {error.message}
;\r\n return (\r\n\r\n {uploaded ? (\r\n <>\r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n window.location.reload()}\r\n color=\"primary\"\r\n >\r\n Registrera medlem\r\n \r\n \r\n window.location.replace(process.env.PUBLIC_URL + \"/\")\r\n }\r\n >\r\n Hem\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n {goBackUrl && goBackUrl.includes(\"booking\") ? (\r\n \r\n
\r\n ) : (\r\n \r\n
\r\n Genvägar
\r\n\r\n
\r\n \r\n handlePhoto(photo)} />\r\n
\r\n )}\r\n \r\n )}\r\n \r\n \r\n handleRegisterMember(values, actions)\r\n }\r\n language={language}\r\n fieldInfo={fieldInfo}\r\n initialValues={initialValues}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default Member;\r\n","import React, { useContext, useEffect, useState } from \"react\";\r\nimport { useSelector, useDispatch } from \"react-redux\";\r\nimport axios from \"axios\";\r\nimport Markdown from \"react-markdown\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport { Button } from \"@mantine/core\";\r\nimport Divider from \"@material-ui/core/Divider\";\r\nimport MemberForm from \"../MemberForm/form\";\r\nimport { AppContext, TOAST } from \"../../context\";\r\nimport initialValues from \"./initialValues\";\r\nimport UploadPhoto from \"../registermember/uploadPhoto\";\r\nimport { uploadPhoto64, registerTicket } from \"../../infrastructure/actions\";\r\n\r\nlet source;\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n maxWidth: \"1024px\",\r\n width: \"100%\",\r\n margin: \"16px auto\",\r\n \"@media(max-width: 1024px)\": {\r\n margin: \"0 auto\",\r\n },\r\n },\r\n linkText: {\r\n color: \"red\",\r\n \"&:hover\": {\r\n cursor: \"pointer\",\r\n },\r\n },\r\n divider: {\r\n margin: \"16px 0\",\r\n },\r\n paper: {\r\n padding: \"16px\",\r\n minHeight: \"calc(100vh - var(--header-height) - 32px)\",\r\n \"@media(max-width: 576)\": {\r\n minHeight: \"calc(100vh - var(--header-height-xs) - 32px)\",\r\n },\r\n },\r\n paperWithNav: {\r\n padding: \"16px\",\r\n minHeight: \"calc(100vh - var(--header-height) - 96px)\",\r\n \"@media(max-width: 1024px)\": {\r\n minHeight: \"calc(100vh - var(--header-height) - 64px)\",\r\n },\r\n \"@media(max-width: 768px)\": {\r\n minHeight: \"calc(100vh - var(--header-height))\",\r\n },\r\n \"@media(max-width: 576px)\": {\r\n minHeight: \"calc(100vh - var(--header-height-xs) - 32px)\",\r\n },\r\n },\r\n actionContainer: {\r\n display: \"flex\",\r\n \"& button\": {\r\n marginRight: \"16px\",\r\n },\r\n },\r\n});\r\n\r\nconst Ticket = (props) => {\r\n const classes = useStyles();\r\n const [topText, setTopText] = useState(\"\");\r\n const [bottomText, setBottomText] = useState(\"\");\r\n const [indexText, setIndexText] = useState(\"\");\r\n const [uploaded, setUploaded] = useState(false);\r\n const { dispatch } = useContext(AppContext);\r\n const { language, fieldInfo, success, url, config } = useSelector(\r\n (state) => ({\r\n fieldInfo: state.infrastructure.config.fieldInfo,\r\n language: state.language,\r\n success: state.infrastructure.success,\r\n url: state.infrastructure.url,\r\n config: state.infrastructure.config,\r\n })\r\n );\r\n const rdxDispatch = useDispatch();\r\n\r\n useEffect(() => {\r\n let CancelToken = axios.CancelToken;\r\n source = CancelToken.source();\r\n let textUrl = \"/ee-static/members/Texts/RegisterTicket\";\r\n axios\r\n .all([\r\n axios.get(`${textUrl}/index.md`, {\r\n cancelToken: source.token,\r\n }),\r\n axios.get(`${textUrl}/Success/top.md`, {\r\n cancelToken: source.token,\r\n }),\r\n axios.get(`${textUrl}/Success/bottom.md`, {\r\n cancelToken: source.token,\r\n }),\r\n ])\r\n .then(\r\n axios.spread((index, top, bottom) => {\r\n setIndexText(index.data);\r\n setTopText(top.data);\r\n setBottomText(bottom.data);\r\n })\r\n )\r\n .catch((error) => {\r\n if (!axios.isCancel(error)) {\r\n console.log(error);\r\n }\r\n });\r\n\r\n return () => source.cancel(\"Component Is Unmounting\");\r\n }, []);\r\n\r\n const callback = (response, actions, type) => {\r\n if (response.status >= 400) {\r\n response.text().then((text) =>\r\n dispatch({\r\n type: TOAST,\r\n payload: {\r\n text: text\r\n ? language.Toasts[text]\r\n ? language.Toasts[text]\r\n : text\r\n : \"Något gick fel\",\r\n variant: \"error\",\r\n },\r\n })\r\n );\r\n return actions.setSubmitting(false);\r\n }\r\n if (type === \"photo\") {\r\n dispatch({\r\n type: TOAST,\r\n payload: {\r\n text: language.Toasts.registerMemberPhotoSubmitSuccess,\r\n variant: \"success\",\r\n },\r\n });\r\n return setUploaded(true);\r\n }\r\n dispatch({\r\n type: TOAST,\r\n payload: {\r\n text: language.Toasts.registerTicketSubmitSuccess,\r\n variant: \"success\",\r\n },\r\n });\r\n actions.resetForm();\r\n };\r\n\r\n const handleRegisterTicket = (v, actions) => {\r\n const id = v.id;\r\n let values = {\r\n firstname: v.firstname,\r\n lastname: v.lastname,\r\n civicRegistrationNumber: v.civicRegistrationNumber,\r\n email: v.email,\r\n zipCode: v.zipCode,\r\n };\r\n if (v.cellPhone) {\r\n values = { ...values, cellPhone: v.cellPhone };\r\n }\r\n\r\n return rdxDispatch(\r\n registerTicket(id, values, null, (response) =>\r\n callback(response, actions)\r\n )\r\n );\r\n };\r\n\r\n const handlePhoto = (photoFile) => {\r\n rdxDispatch(\r\n uploadPhoto64(url, photoFile, null, (response) =>\r\n callback(response, null, \"photo\")\r\n )\r\n );\r\n };\r\n\r\n if (success) {\r\n return (\r\n \r\n {uploaded || config.hidePhoto ? (\r\n <>\r\n
\r\n );\r\n }\r\n\r\n return (\r\n \r\n window.location.reload()}\r\n className=\"members__index__button\"\r\n color=\"dark\"\r\n >\r\n {language.RegisterMoreTickets}\r\n \r\n \r\n window.location.replace(process.env.PUBLIC_URL + \"/\")\r\n }\r\n className=\"members__index__button\"\r\n color=\"dark\"\r\n >\r\n Hem\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n handleRegisterTicket(values, actions)\r\n }\r\n initialValues={initialValues}\r\n ticket={true}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default Ticket;\r\n","import React, { useContext, useState, useEffect } from \"react\";\r\nimport { useDispatch, useSelector } from \"react-redux\";\r\nimport axios from \"axios\";\r\nimport Markdown from \"react-markdown\";\r\nimport { navigate } from \"@reach/router\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport RequestForm from \"./form\";\r\nimport { AppContext, TOAST } from \"../../context\";\r\nimport { requestPassword } from \"../../infrastructure/actions\";\r\n\r\nlet source;\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n maxWidth: \"1024px\",\r\n width: \"100%\",\r\n margin: \"16px auto\",\r\n \"@media(max-width: 1024px)\": {\r\n margin: \"0 auto\",\r\n },\r\n },\r\n paper: {\r\n padding: \"16px\",\r\n },\r\n});\r\n\r\nconst Request = props => {\r\n const { config } = useSelector(state => ({\r\n config: state.infrastructure.config,\r\n }));\r\n\r\n const classes = useStyles();\r\n const [topText, setTopText] = useState(\"\");\r\n const [bottomText, setBottomText] = useState(\"\");\r\n const { dispatch } = useContext(AppContext);\r\n const rdxDispatch = useDispatch();\r\n\r\n useEffect(() => {\r\n let CancelToken = axios.CancelToken;\r\n source = CancelToken.source();\r\n const url = \"/ee-static/members/Texts/RequestPassword\";\r\n axios\r\n .all([\r\n axios.get(`${url}/top.md`, {\r\n cancelToken: source.token,\r\n }),\r\n axios.get(`${url}/bottom.md`, {\r\n cancelToken: source.token,\r\n }),\r\n ])\r\n .then(\r\n axios.spread((top, bottom) => {\r\n setTopText(top.data);\r\n setBottomText(bottom.data);\r\n })\r\n )\r\n .catch(error => {\r\n if (!axios.isCancel(error)) {\r\n console.log(error);\r\n }\r\n });\r\n\r\n return () => source.cancel(\"Component Is Unmounting\");\r\n }, []);\r\n\r\n const handleSubmit = (values, actions) => {\r\n rdxDispatch(\r\n requestPassword(values.email, response => {\r\n if (response.status >= 400) {\r\n const errorMsg =\r\n response.statusText.length < 1\r\n ? \"E-postadress finns inte i systemet\"\r\n : response.statusText;\r\n\r\n dispatch({\r\n type: TOAST,\r\n payload: { text: errorMsg, variant: \"error\" },\r\n });\r\n return actions.setSubmitting(false);\r\n }\r\n dispatch({\r\n type: TOAST,\r\n payload: { text: \"Ett mail har skickats\", variant: \"success\" },\r\n });\r\n actions.resetForm();\r\n navigate(config.self);\r\n })\r\n );\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Request;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { Link } from \"@reach/router\";\r\nimport { useSelector } from \"react-redux\";\r\nimport Markdown from \"react-markdown\";\r\nimport axios from \"axios\";\r\nimport classNames from \"classnames\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport { getNumberOfItems } from \"./util\";\r\nimport { IconUsers, IconLock, IconTicket } from \"@tabler/icons-react\";\r\nlet source;\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n registration: {},\r\n cardContainer: {\r\n width: \"1024px\",\r\n margin: \"0 auto\",\r\n padding: \"16px\",\r\n display: \"grid\",\r\n alignItems: \"center\",\r\n gridTemplateColumns: (p) =>\r\n p.itemCount > 0 ? `repeat(${p.itemCount}, 1fr)` : \"1fr\",\r\n justifyItems: \"center\",\r\n gridGap: \"16px\",\r\n \"@media(max-width: 1024px)\": {\r\n width: \"100%\",\r\n },\r\n \"@media(max-width: 667px)\": {\r\n gridTemplateColumns: (p) => \"1fr\",\r\n gridGap: \"8px\",\r\n padding: \"8px\",\r\n },\r\n \"& a\": {\r\n textDecoration: \"none\",\r\n \"@media(max-width: 667px)\": {\r\n width: \"100%\",\r\n },\r\n },\r\n },\r\n card: {\r\n width: \"auto\",\r\n height: \"100%\",\r\n color: theme.app.labelColor,\r\n border: `1px solid ${theme.app.borderColor}`,\r\n backgroundColor: theme.app.background[1],\r\n borderRadius: \"8px\",\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 \"@media(max-width: 667px)\": {\r\n width: \"100%\",\r\n },\r\n },\r\n link: {\r\n height: \"100%\",\r\n },\r\n cardHeader: {\r\n padding: \"1rem 0 0.35rem 0\",\r\n textAlign: \"center\",\r\n fontSize: \"1.25rem\",\r\n fontWeight: 500,\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n },\r\n cardContent: { padding: \"16px\", fontSize: \"1rem\", textAlign: \"center\" },\r\n iconContainer: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n padding: \"16px\",\r\n },\r\n icon: {\r\n width: \"50px\",\r\n height: \"50px\",\r\n \"@media(max-width: 667px)\": {\r\n width: \"40px\",\r\n height: \"40px\",\r\n },\r\n },\r\n indexFooter: {\r\n color: theme.app.labelColor,\r\n \"& a\": {\r\n color: theme.palette.primary.main,\r\n textDecoration: \"none\",\r\n textTransform: \"uppercase\",\r\n padding: \"8px\",\r\n fontSize: \"0.8125rem\",\r\n fontWeight: 500,\r\n borderRadius: \"4px\",\r\n letterSpacing: \"0.02857em\",\r\n lineHeight: 1.75,\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 },\r\n}));\r\n\r\nconst Registration = () => {\r\n const { config, language } = useSelector((state) => ({\r\n config: state.infrastructure.config,\r\n language: state.language,\r\n }));\r\n const { registerMember, registerTicket, hideNewPassword } = config;\r\n const itemCount = getNumberOfItems(\r\n registerMember,\r\n registerTicket,\r\n hideNewPassword\r\n );\r\n const classes = useStyles({ itemCount });\r\n const [text, setText] = useState(\"\");\r\n const [indexFooter, setIndexFooter] = useState(\"\");\r\n useEffect(() => {\r\n let CancelToken = axios.CancelToken;\r\n source = CancelToken.source();\r\n axios\r\n .get(\"/ee-static/members/index.md\", { cancelToken: source.token })\r\n .then((response) => setText(response.data))\r\n .catch((error) => {\r\n if (!axios.isCancel(error)) {\r\n console.log(error);\r\n }\r\n });\r\n if (config.useIndexFooter) {\r\n axios\r\n .get(\"/ee-static/members/index-footer.md\", {\r\n cancelToken: source.token,\r\n })\r\n .then((response) => setIndexFooter(response.data))\r\n .catch((error) => {\r\n if (!axios.isCancel(error)) {\r\n console.log(error);\r\n }\r\n });\r\n }\r\n return () => source.cancel(\"Component Is Unmounting\");\r\n }, [config]);\r\n\r\n return (\r\n \r\n \r\n {registerMember && (\r\n \r\n \r\n {language.CardInfo ? language.CardInfo[\"registerMember\"] : \"\"}\r\n \r\n
\r\n \r\n )}\r\n {registerTicket && (\r\n \r\n \r\n {language.Nav\r\n ? language.Nav[\"Register_Member\"]\r\n : \"Registrera medlem\"}\r\n \r\n \r\n
\r\n \r\n \r\n {language.Nav\r\n ? language.Nav[\"Register_Ticket\"]\r\n : \"Registrera biljett\"}\r\n \r\n \r\n
\r\n \r\n \r\n {language.Nav\r\n ? language.Nav[\"Request_Password\"]\r\n : \"Byt lösenord\"}\r\n \r\n \r\n
\r\n \r\n {goBackUrl && isBooking ? (\r\n redirect(\"booking\")}\r\n >\r\n {language.Back_To_Booking}\r\n \r\n ) : goBackUrl && isShop ? (\r\n redirect(\"ticketshop\")}\r\n >\r\n {language.Back_To_Shop}\r\n \r\n ) : (\r\n
\r\n );\r\n};\r\n\r\nexport default StartPage;\r\n","import { useState, useEffect } from \"react\";\r\nimport { globalHistory } from \"@reach/router\";\r\n\r\nconst useLocation = () => {\r\n const initialState = {\r\n location: globalHistory.location,\r\n navigate: globalHistory.navigate\r\n };\r\n\r\n const [state, setState] = useState(initialState);\r\n useEffect(() => {\r\n const removeListener = globalHistory.listen(params => {\r\n const { location } = params;\r\n const newState = Object.assign({}, initialState, { location });\r\n setState(newState);\r\n });\r\n return () => {\r\n removeListener();\r\n };\r\n }, [initialState]);\r\n\r\n return state;\r\n};\r\n\r\nexport default useLocation;\r\n","import React, { useContext } from \"react\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport { Button } from \"@mantine/core\";\r\nimport Avatar from \"@material-ui/core/Avatar\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport { AccountContext, SET_ACTIVE_PERSON } from \"../accountContext\";\r\nimport useLocation from \"../../Common/useLocation\";\r\nimport { useSelector } from \"react-redux\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n person: {\r\n width: \"100%\",\r\n border: \"2px solid\",\r\n borderColor: (p) =>\r\n p.isActive ? theme.palette.primary.dark : theme.app.borderColor,\r\n borderRadius: \"4px\",\r\n padding: \"4px 8px\",\r\n\r\n marginBottom: \"8px\",\r\n cursor: \"pointer\",\r\n pointerEvents: (p) => (p.isActive ? \"none\" : \"initial\"),\r\n transition: theme.transitions.create([\"background-color\"], {\r\n duration: theme.transitions.duration.shortest,\r\n easing: theme.transitions.easing.easeInOut,\r\n }),\r\n \"&:hover\": {\r\n backgroundColor: theme.app.hoverBackground[1],\r\n },\r\n \"@media(max-width: 667px)\": {\r\n width: \"100%\",\r\n },\r\n },\r\n content: {\r\n display: \"grid\",\r\n gridTemplateColumns: \"auto 1fr\",\r\n gridGap: \"16px\",\r\n alignItems: \"center\",\r\n width: \"100%\",\r\n },\r\n name: {\r\n fontSize: \"0.8125rem\",\r\n color: (p) =>\r\n p.isActive ? theme.palette.primary.dark : theme.app.labelColor,\r\n marginLeft: \"4px\",\r\n justifySelf: \"flex-start\",\r\n },\r\n inner: {\r\n justifyContent: \"start\",\r\n },\r\n}));\r\n\r\nconst Person = ({ data, closeDialog, setActive }) => {\r\n const language = useSelector((state) => state.language);\r\n const { state, dispatch } = useContext(AccountContext);\r\n const isActive = data.id === state.activePerson.id;\r\n const classes = useStyles({ isActive });\r\n const { navigate } = useLocation();\r\n const handleSelect = () => {\r\n navigate(`${process.env.PUBLIC_URL}/`);\r\n dispatch({ type: SET_ACTIVE_PERSON, payload: data });\r\n setActive(language.Pages && language.Nav[\"Home\"]);\r\n closeDialog();\r\n };\r\n\r\n return (\r\n \r\n redirect(\"ticketshop\")}\r\n >\r\n {language.Back_To_Shop}\r\n \r\n\r\n redirect(\"booking\")}\r\n >\r\n {language.Back_To_Booking}\r\n \r\n
\r\n )}\r\n\r\n {isSelf && (\r\n \r\n
\r\n )}\r\n \r\n {links &&\r\n links.map((l, i) => {\r\n const path = `${process.env.PUBLIC_URL}${l.path}`;\r\n return (\r\n \r\n
\r\n \r\n \r\n {language.Pages[l.name]}\r\n \r\n
\r\n \r\n );\r\n })}\r\n \r\n {getIcon(l.image, classes)}\r\n
\r\n \r\n \r\n {language.Start_Description[l.name]}\r\n \r\n
\r\n \r\n {data.name} \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Person;\r\n","const links = [\r\n {\r\n name: \"subscription\",\r\n image: \"subscription\",\r\n path: \"/subscription\",\r\n isSelf: true,\r\n registerTicket: true,\r\n registerMember: true,\r\n },\r\n {\r\n name: \"sale history\",\r\n image: \"sale\",\r\n path: \"/sale-history\",\r\n isSelf: false,\r\n registerTicket: true,\r\n registerMember: true,\r\n },\r\n {\r\n name: \"photo\",\r\n image: \"photo\",\r\n path: \"/photo\",\r\n isSelf: true,\r\n registerTicket: true,\r\n registerMember: true,\r\n },\r\n {\r\n name: \"customer info\",\r\n image: \"customer\",\r\n path: \"/customer-info\",\r\n isSelf: true,\r\n registerTicket: true,\r\n registerMember: true,\r\n },\r\n {\r\n name: \"password\",\r\n image: \"password\",\r\n path: \"/password\",\r\n isSelf: false,\r\n registerTicket: true,\r\n registerMember: true,\r\n },\r\n {\r\n name: \"register ticket\",\r\n image: \"ticket\",\r\n path: \"/register-ticket\",\r\n isSelf: true,\r\n registerTicket: false,\r\n registerMember: true,\r\n },\r\n {\r\n name: \"register managed\",\r\n image: \"managed\",\r\n path: \"/register-managed\",\r\n isSelf: false,\r\n registerTicket: true,\r\n registerMember: false,\r\n },\r\n];\r\nexport const getLinks = (isSelf, config, hasSubscription) => {\r\n return links\r\n .filter((link) => {\r\n if (!isSelf) {\r\n if (!link.isSelf) {\r\n return false;\r\n }\r\n return true;\r\n }\r\n return true;\r\n })\r\n .filter((link) => {\r\n if (!config.registerTicket) {\r\n if (!link.registerTicket) {\r\n return false;\r\n }\r\n return true;\r\n }\r\n return true;\r\n })\r\n .filter((link) => {\r\n if (!config.registerMember) {\r\n if (!link.registerMember) {\r\n return false;\r\n }\r\n return true;\r\n }\r\n return true;\r\n })\r\n .filter((link) => {\r\n if (!hasSubscription) {\r\n return link.name !== \"subscription\";\r\n }\r\n return true;\r\n });\r\n};\r\n","import React from \"react\";\r\nimport { Button, createStyles, Modal } from \"@mantine/core\";\r\nimport { useSelector } from \"react-redux\";\r\n\r\nconst useStyles = createStyles((theme) => ({\r\n modalFooter: {\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n marginTop: \"1rem\",\r\n },\r\n closeButton: {\r\n color:\r\n theme.colorScheme === \"dark\" || theme.colorScheme === \"darkest\"\r\n ? theme.colors.dark[2]\r\n : \"black\",\r\n },\r\n title: {\r\n fontWeight: \"500\",\r\n fontSize: \"1.35rem\",\r\n },\r\n}));\r\nconst LogoutModal = ({ opened, close, userManager }) => {\r\n const language = useSelector((state) => state.language);\r\n const { classes } = useStyles();\r\n const handleLogout = () => userManager.signoutRedirect();\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default LogoutModal;\r\n","import React, { useCallback, useContext, useEffect } from \"react\";\r\nimport { useState } from \"react\";\r\nimport {\r\n Navbar,\r\n createStyles,\r\n Modal,\r\n Button,\r\n UnstyledButton,\r\n} from \"@mantine/core\";\r\nimport {\r\n IconLogout,\r\n IconSwitchHorizontal,\r\n IconReceipt,\r\n IconCamera,\r\n IconUserEdit,\r\n IconLock,\r\n IconTicket,\r\n IconUserPlus,\r\n IconRefresh,\r\n IconHome,\r\n} from \"@tabler/icons-react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport ActivePerson from \"./activePerson\";\r\nimport { AccountContext } from \"../accountContext\";\r\nimport Person from \"./person\";\r\nimport { Link } from \"@reach/router\";\r\nimport { getLinks } from \"../util\";\r\nimport LogoutModal from \"./logoutModal\";\r\nimport { useDisclosure, useMediaQuery } from \"@mantine/hooks\";\r\n\r\nconst useStyles = createStyles((theme) => ({\r\n root: {\r\n zIndex: 200,\r\n borderColor:\r\n theme.colorScheme === \"dark\" || theme.colorScheme === \"darkest\"\r\n ? theme.colors.dark[7]\r\n : \"#e9ecef\",\r\n },\r\n\r\n navbar: {\r\n height: \"inherit\",\r\n backgroundColor:\r\n theme.colorScheme === \"dark\"\r\n ? \"rgb(48, 48, 48)\"\r\n : theme.colorScheme === \"darkest\"\r\n ? \"rgb(12, 18, 23)\"\r\n : theme.white,\r\n },\r\n\r\n link: {\r\n ...theme.fn.focusStyles(),\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n textDecoration: \"none\",\r\n fontSize: theme.fontSizes.sm,\r\n color:\r\n theme.colorScheme === \"dark\" || theme.colorScheme === \"darkest\"\r\n ? theme.colors.dark[1]\r\n : theme.colors.gray[7],\r\n padding: `0.5rem 0.5rem`,\r\n borderRadius: theme.radius.sm,\r\n fontWeight: 500,\r\n width: \"100%\",\r\n \"&:hover\": {\r\n backgroundColor:\r\n theme.colorScheme === \"dark\" || theme.colorScheme === \"darkest\"\r\n ? theme.colors.dark[6]\r\n : theme.colors.gray[0],\r\n color:\r\n theme.colorScheme === \"dark\" || theme.colorScheme === \"darkest\"\r\n ? theme.white\r\n : theme.black,\r\n\r\n [`& .${\"icon\"}`]: {\r\n color:\r\n theme.colorScheme === \"dark\" || theme.colorScheme === \"darkest\"\r\n ? theme.white\r\n : theme.black,\r\n },\r\n },\r\n },\r\n\r\n linkIcon: {\r\n ref: \"icon\",\r\n color:\r\n theme.colorScheme === \"dark\" || theme.colorScheme === \"darkest\"\r\n ? theme.colors.dark[2]\r\n : theme.colors.gray[6],\r\n marginRight: theme.spacing.sm,\r\n },\r\n\r\n linkActive: {\r\n \"&, &:hover\": {\r\n backgroundColor: theme.fn.variant({\r\n variant: \"light\",\r\n color: theme.primaryColor,\r\n }).background,\r\n color:\r\n theme.colorScheme === \"dark\"\r\n ? \"white\"\r\n : theme.colorScheme === \"darkest\"\r\n ? \"black\"\r\n : \"var(--button-primary-background)\",\r\n [`& .${\"icon\"}`]: {\r\n color:\r\n theme.colorScheme === \"dark\"\r\n ? \"white\"\r\n : theme.colorScheme === \"darkest\"\r\n ? \"black\"\r\n : \"var(--button-primary-background)\",\r\n },\r\n },\r\n },\r\n\r\n footer: {\r\n borderTop: `0.1rem solid ${\r\n theme.colorScheme === \"dark\" || theme.colorScheme === \"darkest\"\r\n ? theme.colors.dark[4]\r\n : theme.colors.gray[3]\r\n }`,\r\n paddingTop: theme.spacing.md,\r\n },\r\n\r\n chooseActivePerson: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n gap: \"1rem\",\r\n justifyContent: \"space-between\",\r\n },\r\n\r\n modalFooter: {\r\n display: \"flex\",\r\n justifyContent: \"end\",\r\n marginTop: \"1rem\",\r\n },\r\n closeButton: {\r\n color:\r\n theme.colorScheme === \"dark\" || theme.colorScheme === \"darkest\"\r\n ? theme.colors.dark[2]\r\n : \"black\",\r\n },\r\n mobile: {\r\n fontSize: \"1rem\",\r\n },\r\n desktop: {\r\n fontSize: \"14px\",\r\n },\r\n}));\r\n\r\nconst SideBarNav = ({ userManager, drawerOpened, drawerClose }) => {\r\n const context = useContext(AccountContext);\r\n const { state } = context;\r\n const language = useSelector((state) => state.language);\r\n const { classes, cx } = useStyles();\r\n const [active, setActive] = useState(\"/\");\r\n const [changePerson, setChangePerson] = useState(false);\r\n const [opened, { open, close }] = useDisclosure(false);\r\n const isMobile = useMediaQuery(\"(max-width: 768px)\");\r\n const { accountData } = state;\r\n const { config, isSelf } = context.state;\r\n const hasSubscription =\r\n state?.accountData?.member?.subscriptionHistory.length > 0;\r\n const availableLinks = getLinks(isSelf, config, hasSubscription);\r\n const path = window.location.pathname.split(\"/\").pop();\r\n\r\n const tabs = {\r\n account: [\r\n {\r\n name: \"home\",\r\n link: `${process.env.PUBLIC_URL}/`,\r\n label: language.Pages && language.Nav[\"Home\"],\r\n icon: IconHome,\r\n },\r\n {\r\n name: \"subscription\",\r\n link: `${process.env.PUBLIC_URL}/subscription`,\r\n label: language.Pages && language.Pages[\"subscription\"],\r\n icon: IconRefresh,\r\n isSubscription: true,\r\n },\r\n {\r\n name: \"sale history\",\r\n link: `${process.env.PUBLIC_URL}/sale-history`,\r\n label: language.Pages && language.Pages[\"sale history\"],\r\n icon: IconReceipt,\r\n },\r\n {\r\n name: \"photo\",\r\n link: `${process.env.PUBLIC_URL}/photo`,\r\n label: language.Pages && language.Pages[\"photo\"],\r\n icon: IconCamera,\r\n },\r\n {\r\n name: \"customer info\",\r\n link: `${process.env.PUBLIC_URL}/customer-info`,\r\n label: language.Pages && language.Pages[\"customer info\"],\r\n icon: IconUserEdit,\r\n },\r\n {\r\n name: \"password\",\r\n link: `${process.env.PUBLIC_URL}/password`,\r\n label: language.Pages && language.Pages[\"password\"],\r\n icon: IconLock,\r\n },\r\n {\r\n name: \"register ticket\",\r\n link: `${process.env.PUBLIC_URL}/register-ticket`,\r\n label: language.Pages && language.Pages[\"register ticket\"],\r\n icon: IconTicket,\r\n },\r\n {\r\n name: \"register managed\",\r\n link: `${process.env.PUBLIC_URL}/register-managed`,\r\n label: language.Pages && language.Pages[\"register managed\"],\r\n icon: IconUserPlus,\r\n },\r\n ],\r\n };\r\n\r\n /* eslint-disable */\r\n const links = useCallback(() => {\r\n return tabs[\"account\"].map((item) => {\r\n const [checkIfValid] = availableLinks.filter(\r\n (link) => item.name === link.name || item.name === \"home\"\r\n );\r\n if (checkIfValid && item.link) {\r\n return (\r\n \r\n Välj aktiv person\r\n
\r\n \r\n setChangePerson(false)}\r\n setActive={setActive}\r\n />\r\n {manages.map((p, i) => (\r\n setChangePerson(false)}\r\n setActive={setActive}\r\n />\r\n ))}\r\n
\r\n \r\n setChangePerson(false)}\r\n >\r\n {language.Abort}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {opened && }\r\n
\r\n {language.Login}
\r\n \r\n )}\r\n \r\n )}\r\n {!auth && (\r\n \r\n this.setState({ photo: event.target.files[0] })}\r\n />\r\n
\r\n );\r\n }\r\n}\r\n\r\nexport default withStyles(styles)(Editor);\r\n","import React from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport Editor from \"../../account/photo/avatarEditor\";\r\n\r\nconst useStyles = makeStyles({\r\n container: {}\r\n});\r\n\r\nconst UploadPhoto = props => {\r\n const { savePhoto } = props;\r\n const classes = useStyles();\r\n const language = useSelector(state => state.language);\r\n\r\n return (\r\n \r\n {this.state.showPreview ? (\r\n this.setState({ position: pos })}\r\n color={[0, 0, 0, 0.6]} // RGBA\r\n scale={Number(this.state.zoom)}\r\n style={{ cursor: \"move\" }}\r\n rotate={Number(this.state.rotate)}\r\n />\r\n ) : isNotLoggedIn ? (\r\n
\r\n \r\n
\r\n )}\r\n \r\n {!this.state.showPreview && this.state.photo && (\r\n <>\r\n 2.9}\r\n >\r\n \r\n this.setState({ rotate: this.state.rotate + 90 })\r\n }\r\n >\r\n \r\n \r\n \r\n this.setState({ showPreview: false })}>\r\n \r\n )}\r\n
\r\n\r\n \r\n {close && !this.state.showPreview && (\r\n <>\r\n \r\n {language.Choose_Photo\r\n ? this.state.photo\r\n ? language.Choose_New_Photo\r\n : language.Choose_Photo\r\n : \"\"}\r\n \r\n {!isNotLoggedIn && (\r\n \r\n )}\r\n {!this.state.showPreview && this.state.photo && (\r\n this.onClickSave()}\r\n className=\"editor__save-button primaryButton\"\r\n >\r\n {language.Save}\r\n \r\n )}\r\n \r\n )}\r\n
\r\n \r\n null}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default UploadPhoto;\r\n","import React from \"react\";\r\n\r\nconst MailIcons = ({ provider }) => {\r\n return (\r\n \r\n {provider === \"google\" && (\r\n
\r\n );\r\n};\r\n\r\nexport default MailIcons;\r\n","export default {\r\n firstname: \"\",\r\n lastname: \"\",\r\n civicRegistrationNumber: \"\",\r\n email: \"\",\r\n zipCode: \"\",\r\n cellPhone: \"\",\r\n id: \"\"\r\n};\r\n","import passwordValidator from \"password-validator\";\r\nlet schema = new passwordValidator();\r\n\r\nconst setRules = rules => {\r\n if (rules) {\r\n const { capitals, nonAlphanumeric, digits, length } = rules;\r\n if (capitals && capitals > 0) {\r\n schema.has().uppercase();\r\n }\r\n if (nonAlphanumeric && nonAlphanumeric > 0) {\r\n schema.has().symbols();\r\n }\r\n if (digits && digits > 0) {\r\n schema.has().digits();\r\n }\r\n if (length && length > 0) {\r\n schema.is().min(length);\r\n }\r\n }\r\n};\r\n\r\nconst validate = (values, language, rules, info) => {\r\n // const { language } = props;\r\n setRules(rules);\r\n\r\n const errors = {};\r\n if (!values.newPassword) {\r\n errors.newPassword = language.PasswordValidation.noNewPassword;\r\n } else if (!schema.validate(values.newPassword)) {\r\n errors.newPassword = info;\r\n }\r\n if (!values.confirmPassword) {\r\n errors.confirmPassword =\r\n language.PasswordValidation.noNewPasswordVerification;\r\n } else if (values.newPassword !== values.confirmPassword) {\r\n errors.confirmPassword = language.PasswordValidation.passwordNotVerified;\r\n }\r\n\r\n return errors;\r\n};\r\n\r\nexport default validate;\r\n","import React from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { Formik, Field, Form } from \"formik\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport validate from \"./validate\";\r\nimport MuiTextInput from \"../../Common/MuiTextInput\";\r\nimport { Button } from \"@mantine/core\";\r\nimport { getInfo } from \"./util\";\r\n\r\nconst useStyles = makeStyles({\r\n submit: {\r\n marginTop: \"0.25rem\",\r\n },\r\n});\r\n\r\nconst PasswordForm = (props) => {\r\n const { handleSubmit, initialValues } = props;\r\n const { config, language } = useSelector((state) => ({\r\n config: state.infrastructure.config,\r\n language: state.language,\r\n }));\r\n const classes = useStyles();\r\n const info = getInfo(config.passwordRules);\r\n return (\r\n \r\n \r\n {language.SetPassword}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SetPassword;\r\n","import isEmail from \"sane-email-validation\";\r\n\r\nconst validate = (values, language) => {\r\n // const { language } = props;\r\n\r\n const errors = {};\r\n if (!values.email) {\r\n errors.email = language.MemberForm && language.MemberForm.Email_Required;\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.MemberForm && language.MemberForm.Email_Invalid;\r\n }\r\n\r\n return errors;\r\n};\r\n\r\nexport default validate;\r\n","import React from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { Formik, Form, Field } from \"formik\";\r\nimport classNames from \"classnames\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport { Button } from \"@mantine/core\";\r\nimport MuiTextInput from \"../../Common/MuiTextInput\";\r\nimport validate from \"./validate\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n formRow: {\r\n display: \"grid\",\r\n gridTemplateColumns: \"1fr auto\",\r\n gridGap: \"16px\",\r\n margin: \"16px 0\",\r\n \"@media(max-width: 576px)\": {\r\n gridTemplateColumns: \"1fr\",\r\n },\r\n },\r\n buttonContainer: {\r\n marginTop: \"16px\",\r\n borderTop: `1px solid ${theme.app.borderColor}`,\r\n padding: \"8px 0\",\r\n display: \"grid\",\r\n gridTemplateColumns: \"1fr auto\",\r\n alignItems: \"center\",\r\n },\r\n button: {\r\n color: theme.app.labelColor,\r\n },\r\n}));\r\n\r\nconst RequestForm = (props) => {\r\n const { initialValues, handleSubmit } = props;\r\n const language = useSelector((state) => state.language);\r\n const classes = useStyles();\r\n return (\r\n \r\n handleSubmit(values, actions)}\r\n validate={(values) => validate(values, language)}\r\n render={(props) => (\r\n \r\n )}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default RequestForm;\r\n","export const getNumberOfItems = (\r\n registerMember,\r\n registerTicket,\r\n hideNewPassword\r\n) => {\r\n let items = 0;\r\n if (registerMember) {\r\n items = items + 1;\r\n }\r\n if (registerTicket) {\r\n items = items + 1;\r\n }\r\n if (!hideNewPassword) {\r\n items = items + 1;\r\n }\r\n return items;\r\n};\r\n","import React from \"react\";\r\nimport { CallbackComponent } from \"redux-oidc\";\r\nimport { navigate } from \"@reach/router\";\r\n\r\nclass CallbackPage extends React.Component {\r\n successCallback = () => {\r\n console.log(\"Success\", `${process.env.PUBLIC_URL}/`);\r\n navigate(`${process.env.PUBLIC_URL}/`);\r\n };\r\n\r\n errorCallback = () => {\r\n console.log(\"Error\", `${process.env.PUBLIC_URL}/`);\r\n navigate(`${process.env.PUBLIC_URL}/`);\r\n };\r\n\r\n render() {\r\n // just redirect to '/' in both cases\r\n return (\r\n Redirecting...
\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default CallbackPage;\r\n","import React, { useContext, useState } from \"react\";\r\nimport { useSelector, useDispatch } from \"react-redux\";\r\nimport classNames from \"classnames\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport { Button } from \"@mantine/core\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport Editor from \"./avatarEditor\";\r\nimport { AppContext, TOAST } from \"../../context\";\r\nimport { AccountContext } from \"../accountContext\";\r\nimport { uploadPhoto64 } from \"../../infrastructure/actions\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n photo: {},\r\n pageInfo: {\r\n fontSize: \"0.875rem\",\r\n color: theme.app.secondaryColor,\r\n marginTop: \".5rem\",\r\n },\r\n card: {\r\n border: `1px solid ${theme.app.borderColor}`,\r\n borderRadius: \"4px\",\r\n marginTop: \"16px\",\r\n },\r\n content: {},\r\n imageContainer: {\r\n alignItems: \"center\",\r\n background: theme.app.background[1],\r\n display: \"flex\",\r\n height: \"300px\",\r\n justifyContent: \"center\",\r\n width: \"300px\",\r\n padding: \"8px\",\r\n border: `1px solid ${theme.app.borderColor}`,\r\n borderRadius: \"4px\",\r\n margin: \"16px auto\",\r\n \"@media(max-width: 576px)\": {\r\n height: \"250px\",\r\n width: \"250px\",\r\n },\r\n },\r\n image: {\r\n borderRadius: \"4px\",\r\n maxWidth: \"100%\",\r\n maxHeight: \"100%\",\r\n },\r\n buttonContainer: {\r\n display: \"grid\",\r\n gridTemplateColumns: \"1fr 1fr\",\r\n padding: \"8px\",\r\n borderTop: `1px solid ${theme.app.borderColorLight}`,\r\n background: theme.app.background[1],\r\n },\r\n changePhotoAction: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"flex-end\",\r\n },\r\n button: { color: theme.app.labelColor },\r\n}));\r\n\r\nconst Photo = (props) => {\r\n const classes = useStyles();\r\n const [edit, setEdit] = useState(false);\r\n const accountContext = useContext(AccountContext);\r\n const { activePerson } = accountContext.state;\r\n const { dispatch } = useContext(AppContext);\r\n const { language, config } = useSelector((state) => ({\r\n language: state.language,\r\n config: state.infrastructure.config,\r\n }));\r\n const rdxDispatch = useDispatch();\r\n const handlePhoto = (photoFile) => {\r\n const photoUrl = `${config.apiUrl}/photobase64/${activePerson.id}`;\r\n rdxDispatch(\r\n uploadPhoto64(photoUrl, photoFile, null, (response) => {\r\n if (response.status >= 400) {\r\n dispatch({\r\n type: TOAST,\r\n payload: {\r\n text: language.Toasts.photoSubmitFailed,\r\n variant: \"error\",\r\n },\r\n });\r\n return console.log(response);\r\n }\r\n dispatch({\r\n type: TOAST,\r\n payload: {\r\n text: language.Toasts.photoSubmitSuccess,\r\n variant: \"success\",\r\n },\r\n });\r\n })\r\n );\r\n setTimeout(() => setEdit(false), 500);\r\n };\r\n\r\n return (\r\n \r\n {language.Pages[\"photo\"]} \r\n \r\n {language.PageInfo[\"photo\"]}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Photo;\r\n","import styled from \"styled-components\";\r\n\r\nexport const Row = styled.div`\r\n display: grid;\r\n grid-template-columns: ${p =>\r\n p.gtc ? p.gtc : p.cols ? `repeat(${p.cols}, 1fr)` : \"1fr\"};\r\n grid-gap: 0.5rem;\r\n margin: ${p => p.margin};\r\n @media (max-width: 667px) {\r\n grid-template-columns: 1fr;\r\n }\r\n`;\r\n","import styled from \"styled-components\";\r\n\r\n// CUSTOMERFORM\r\n\r\nexport const FormSection = styled.div`\r\n width: 100%;\r\n padding-top: 1rem;\r\n`;\r\n\r\nexport const FormRow = styled.div`\r\n display: grid;\r\n grid-template-columns: ${p =>\r\n p.gtc ? p.gtc : `repeat(${p.items || 1}, 1fr)`};\r\n grid-gap: 1rem;\r\n @media (max-width: 768px) {\r\n grid-template-columns: 1fr;\r\n }\r\n`;\r\n","import React from \"react\";\r\nimport { Field } from \"formik\";\r\nimport MuiTextInput from \"../../Common/MuiTextInput\";\r\nimport { FormSection } from \"./UIComponents\";\r\n\r\nexport default ({ p, i, language, canEditForm }) => {\r\n return (\r\n \r\n
\r\n \r\n {edit ? (\r\n handlePhoto(photo)}\r\n language={language}\r\n close={() => setEdit(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 window.history.back()}\r\n color=\"dark\"\r\n variant=\"subtle\"\r\n >\r\n Tillbaka\r\n \r\n
\r\n \r\n setEdit(true)}\r\n color=\"primary\"\r\n >\r\n {language.Change_Photo}\r\n \r\n
\r\n \r\n \r\n handleSubmit(values, actions, toggleEdit)\r\n }\r\n initialValues={getInitialValues(activePerson)}\r\n language={language}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default Update;\r\n","import React, { useContext } from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { useMutation } from \"@apollo/react-hooks\";\r\nimport gql from \"graphql-tag\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport CustomerForm from \"./Form\";\r\nimport { getInitialValues } from \"./util\";\r\nimport { AppContext, TOAST } from \"../../context\";\r\nimport { AccountContext } from \"../accountContext\";\r\n\r\nconst useStyles = makeStyles({\r\n updateManaged: {}\r\n});\r\n\r\nconst UPDATE_MANAGED_SUBMIT = gql`\r\n mutation updateManagedSubmit($payload: UpdateManagedPartyMutation!) {\r\n updateManagedParty(payload: $payload) {\r\n isSuccess\r\n message\r\n }\r\n }\r\n`;\r\n\r\nconst UpdateManaged = props => {\r\n const classes = useStyles();\r\n const language = useSelector(state => state.language);\r\n const accountContext = useContext(AccountContext);\r\n const { dispatch } = useContext(AppContext);\r\n const { activePerson } = accountContext.state;\r\n const handleMutationError = error => {\r\n dispatch({ type: TOAST, payload: { text: error, variant: \"error\" } });\r\n };\r\n const handleMutationSuccess = ({ updateManagedParty }) => {\r\n if (updateManagedParty.isSuccess) {\r\n return dispatch({\r\n type: TOAST,\r\n payload: {\r\n text: language.Toasts.customerInfoSubmitSuccess,\r\n variant: \"success\"\r\n }\r\n });\r\n }\r\n return dispatch({\r\n type: TOAST,\r\n payload: {\r\n text:\r\n language.Toasts[updateManagedParty.message] ||\r\n updateManagedParty.message,\r\n variant: \"error\"\r\n }\r\n });\r\n };\r\n const [update] = useMutation(UPDATE_MANAGED_SUBMIT, {\r\n onError: handleMutationError,\r\n onCompleted: handleMutationSuccess\r\n });\r\n const handleSubmit = (values, actions, toggleEdit) => {\r\n const newValues = { ...values, managedPartyId: activePerson.id };\r\n update({ variables: { payload: newValues } }).then(() => {\r\n actions.setSubmitting(false);\r\n return toggleEdit();\r\n });\r\n };\r\n return (\r\n \r\n \r\n handleSubmit(values, actions, toggleEdit)\r\n }\r\n initialValues={getInitialValues(activePerson)}\r\n language={language}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default UpdateManaged;\r\n","import React, { useContext } from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport Update from \"./update\";\r\nimport UpdateManaged from \"./updateManaged\";\r\nimport { AccountContext } from \"../accountContext\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n customerInfo: {},\r\n pageInfo: {\r\n fontSize: \"0.875rem\",\r\n color: theme.app.secondaryColor,\r\n marginBottom: \"16px\",\r\n marginTop: \".5rem\",\r\n },\r\n content: {},\r\n}));\r\n\r\nconst CustomerInfo = (props) => {\r\n const classes = useStyles();\r\n const context = useContext(AccountContext);\r\n const { isSelf, activePerson } = context.state;\r\n const language = useSelector((state) => state.language);\r\n return (\r\n \r\n {language.Pages[\"customer info\"]} \r\n \r\n {language.PageInfo[\"customer info\"]}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default CustomerInfo;\r\n","const validate = (values, language) => {\r\n // const { language } = props;\r\n\r\n const errors = {};\r\n if (!values.oldPassword) {\r\n errors.oldPassword = language.PasswordValidation.noOldPassword;\r\n }\r\n if (!values.newPassword) {\r\n errors.newPassword = language.PasswordValidation.noNewPassword;\r\n }\r\n if (!values.newPasswordVerification) {\r\n errors.newPasswordVerification =\r\n language.PasswordValidation.noNewPasswordVerification;\r\n } else if (values.newPassword !== values.newPasswordVerification) {\r\n errors.newPasswordVerification =\r\n language.PasswordValidation.passwordNotVerified;\r\n }\r\n\r\n return errors;\r\n};\r\n\r\nexport default validate;\r\n","export const initialValues = {\r\n oldPassword: \"\",\r\n newPassword: \"\",\r\n newPasswordVerification: \"\"\r\n};\r\n","import React from \"react\";\r\nimport { Formik, Field, Form } from \"formik\";\r\nimport classNames from \"classnames\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport validate from \"./validate\";\r\nimport { initialValues } from \"./initialValues\";\r\nimport { Row } from \"./UIComponents\";\r\nimport MuiTextInput from \"../../Common/MuiTextInput\";\r\nimport { Button } from \"@mantine/core\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n submit: {\r\n marginTop: \"16px\",\r\n borderTop: `1px solid ${theme.app.borderColor}`,\r\n padding: \"8px 0\",\r\n display: \"grid\",\r\n gridTemplateColumns: \"1fr auto\",\r\n alignItems: \"center\",\r\n },\r\n formActions: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"flex-end\",\r\n \"& button\": {\r\n marginLeft: \"8px\",\r\n },\r\n },\r\n button: { color: theme.app.labelColor },\r\n}));\r\n\r\nconst PasswordForm = (props) => {\r\n const { handleSubmit, language } = props;\r\n const classes = useStyles();\r\n return (\r\n \r\n {isSelf ? (\r\n
\r\n \r\n {language.Pages[\"password\"]} \r\n \r\n {language.PageInfo[\"password\"]}\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Password;\r\n","const validate = (values, language) => {\r\n const errors = {};\r\n if (!values.uniqueIdentifier) {\r\n errors.uniqueIdentifier = language.TicketValidation.noUniqueIdentifier;\r\n }\r\n\r\n return errors;\r\n};\r\n\r\nexport default validate;\r\n","export const initialValues = {\r\n uniqueIdentifier: \"\"\r\n};\r\n","import React from \"react\";\r\nimport { Formik, Field, Form } from \"formik\";\r\nimport classNames from \"classnames\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport validate from \"./validate\";\r\nimport { initialValues } from \"./initialValues\";\r\nimport { Row } from \"../password/UIComponents\";\r\nimport MuiTextInput from \"../../Common/MuiTextInput\";\r\nimport { Button } from \"@mantine/core\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n submit: {\r\n marginTop: \"16px\",\r\n borderTop: `1px solid ${theme.app.borderColor}`,\r\n padding: \"8px 0\",\r\n display: \"grid\",\r\n gridTemplateColumns: \"1fr auto\",\r\n alignItems: \"center\",\r\n },\r\n formActions: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"flex-end\",\r\n \"& button\": {\r\n marginLeft: \"8px\",\r\n },\r\n },\r\n button: { color: theme.app.labelColor },\r\n}));\r\n\r\nconst RegisterTicketForm = ({ handleSubmit, language }) => {\r\n const classes = useStyles();\r\n return (\r\n \r\n handleSubmit(values, actions)}\r\n language={language}\r\n />\r\n
\r\n \r\n handleSubmit(values, actions)}\r\n language={language}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default Register;\r\n","import React, { useContext } from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { useMutation } from \"@apollo/react-hooks\";\r\nimport gql from \"graphql-tag\";\r\nimport RegisterTicketForm from \"./Form\";\r\nimport { AppContext, TOAST } from \"../../context\";\r\n\r\nconst REGISTER_TICKET_FOR_MANAGED = gql`\r\n mutation registerTicketForManagedParty(\r\n $payload: RegisterTicketForManagedPartyMutation!\r\n ) {\r\n registerTicketForManagedParty(payload: $payload) {\r\n isSuccess\r\n message\r\n }\r\n }\r\n`;\r\n\r\nconst ManagedParty = ({ activePersonId }) => {\r\n const language = useSelector(state => state.language);\r\n const { dispatch } = useContext(AppContext);\r\n const handleMutationError = error => {\r\n dispatch({ type: TOAST, payload: { text: error, variant: \"error\" } });\r\n };\r\n const handleMutationSuccess = ({ updateSelf }) => {\r\n if (updateSelf.isSuccess) {\r\n return dispatch({\r\n type: TOAST,\r\n payload: {\r\n text: language.Toasts.registerTicketForManagedParty,\r\n variant: \"success\"\r\n }\r\n });\r\n }\r\n return dispatch({\r\n type: TOAST,\r\n payload: {\r\n text: language.Toasts[updateSelf.message] || updateSelf.message,\r\n variant: \"error\"\r\n }\r\n });\r\n };\r\n const [registerTicketForManagedParty] = useMutation(\r\n REGISTER_TICKET_FOR_MANAGED,\r\n {\r\n onError: handleMutationError,\r\n onCompleted: handleMutationSuccess\r\n }\r\n );\r\n\r\n const handleSubmit = (values, actions) => {\r\n const newValues = { ...values, managedPartyId: activePersonId };\r\n registerTicketForManagedParty({ variables: { payload: newValues } }).then(\r\n () => actions.resetForm()\r\n );\r\n };\r\n return (\r\n \r\n handleSubmit(values, actions)}\r\n language={language}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default ManagedParty;\r\n","import React, { useContext } from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport Register from \"./register\";\r\nimport ManagedParty from \"./managedParty\";\r\nimport { AccountContext } from \"../accountContext\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n registerTicket: {},\r\n pageInfo: {\r\n fontSize: \"0.875rem\",\r\n color: theme.app.secondaryColor,\r\n marginBottom: \"16px\",\r\n marginTop: \".5rem\",\r\n },\r\n}));\r\n\r\nconst Ticket = (props) => {\r\n const classes = useStyles();\r\n const accountContext = useContext(AccountContext);\r\n const { isSelf, activePersonId } = accountContext.state;\r\n const language = useSelector((state) => state.language);\r\n return (\r\n \r\n {language.Pages[\"register ticket\"]} \r\n \r\n {language.PageInfo[\"register ticket\"]}\r\n \r\n {isSelf ?
\r\n );\r\n};\r\n\r\nexport default Ticket;\r\n","export const formatPrice = (amount) => `${String(amount).replace(\".\", \",\")} kr`;\r\n\r\nexport const formatReceiptNumber = (receiptNumber) => String(receiptNumber);\r\n\r\nexport const formatSaleDate = (saleDate) =>\r\n saleDate.replace(\"T\", \" \").slice(0, 16);\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport gql from \"graphql-tag\";\r\nimport { useQuery } from \"@apollo/react-hooks\";\r\nimport { Table, Skeleton } from \"@mantine/core\";\r\nimport { formatPrice } from \"./util\";\r\n\r\nconst DetailQuery = gql`\r\n query DetailQuery($id: ID) {\r\n details(id: $id) {\r\n id\r\n articles {\r\n articleId\r\n articleKey\r\n articleName\r\n priceExclVat\r\n priceInclVat\r\n }\r\n }\r\n }\r\n`;\r\n\r\nconst Article = (props) => {\r\n const { sale } = props;\r\n const [articles, setArticles] = useState();\r\n const language = useSelector((state) => state.language);\r\n\r\n const { data, loading } = useQuery(DetailQuery, {\r\n variables: {\r\n id: sale.receiptNumber,\r\n },\r\n });\r\n useEffect(() => {\r\n if (!data) return;\r\n setArticles(data.details.articles);\r\n }, [data]);\r\n\r\n const tableHeads = (\r\n | {article.articleName} | \r\n{formatPrice(vat)} | \r\n{formatPrice(article.priceInclVat)} | \r\n
\r\n {value === formattedReceiptNumber && }\r\n
\r\n \r\n {language.Pages[\"sale history\"]} \r\n \r\n {language.PageInfo[\"sale history\"]}\r\n \r\n \r\n {sortedSales.map((sale) => (\r\n \r\n\r\n
\r\n );\r\n};\r\n\r\nexport default SaleHistory;\r\n","const validate = (values, language) => {\r\n const errors = {};\r\n if (!values.firstname) {\r\n errors.firstname = language.RegisterManagedPartyValidation.noFirstname;\r\n }\r\n if (!values.lastname) {\r\n errors.lastname = language.RegisterManagedPartyValidation.noLastname;\r\n }\r\n if (!values.civicRegistrationNumber) {\r\n errors.civicRegistrationNumber =\r\n language.RegisterManagedPartyValidation.noCivicRegistrationNumber;\r\n }\r\n if (values.civicRegistrationNumber.length > 0) {\r\n if (\r\n !/^(19|20)[0-9]{6}[- ]?[0-9]{4}$/.test(values.civicRegistrationNumber)\r\n ) {\r\n errors.civicRegistrationNumber = `Ogiltigt personnummer`;\r\n }\r\n }\r\n\r\n return errors;\r\n};\r\n\r\nexport default validate;\r\n","export const initialValues = {\r\n firstname: \"\",\r\n lastname: \"\",\r\n civicRegistrationNumber: \"\"\r\n};\r\n","import React from \"react\";\r\nimport { Formik, Field, Form } from \"formik\";\r\nimport uuid from \"uuid/v4\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport validate from \"./validate\";\r\nimport { initialValues } from \"./inititalValues\";\r\nimport { Row } from \"../password/UIComponents\";\r\nimport MuiTextInput from \"../../Common/MuiTextInput\";\r\nimport { Button } from \"@mantine/core\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n submit: {\r\n marginTop: \"16px\",\r\n borderTop: `1px solid ${theme.app.borderColor}`,\r\n padding: \"8px 0\",\r\n display: \"grid\",\r\n gridTemplateColumns: \"1fr auto\",\r\n alignItems: \"center\",\r\n },\r\n formActions: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"flex-end\",\r\n \"& button\": {\r\n marginLeft: \"8px\",\r\n },\r\n },\r\n button: { color: theme.app.labelColor },\r\n}));\r\n\r\nconst PasswordForm = (props) => {\r\n const { handleSubmit, language } = props;\r\n const classes = useStyles();\r\n return (\r\n \r\n
\r\n {language.Sale_History[\"date\"]}
\r\n\r\n {language.Sale_History[isMobile ? \"sale id short\" : \"sale id\"]}\r\n
\r\n\r\n {language.Sale_History[isMobile ? \"pos name short\" : \"pos name\"]}\r\n
\r\n{language.Sale_History[\"total\"]}
\r\n\r\n
\r\n window.history.back()}\r\n color=\"dark\"\r\n variant=\"subtle\"\r\n >\r\n Tillbaka\r\n \r\n
\r\n \r\n {language.Pages[\"register managed\"]} \r\n \r\n {language.PageInfo[\"register managed\"]}\r\n \r\n handleSubmit(values, actions)}\r\n language={language}\r\n />\r\n
\r\n );\r\n};\r\n\r\nexport default RegisterManaged;\r\n","import React from \"react\";\r\nimport { useQuery } from \"@apollo/react-hooks\";\r\nimport gql from \"graphql-tag\";\r\n\r\nexport const SubscriptionContext = React.createContext();\r\n\r\nconst DetailQuery = gql`\r\n query SubscriptionDetailQuery($id: ID) {\r\n subscriptionDetails(id: $id) {\r\n uniqueIdentifier\r\n cardExpiryMonth\r\n cardExpiryYear\r\n maskedCardNumber\r\n subscriptionTermType\r\n cancelledAt\r\n lastChargedAt\r\n registeredAt\r\n state\r\n ticketArticleName\r\n subscriptionTypeName\r\n registrationFinalizedAt\r\n updatePaymentCardUrl\r\n charges {\r\n amount\r\n chargedAt\r\n dueDate\r\n status\r\n }\r\n }\r\n }\r\n`;\r\n\r\nconst SubscriptionProvider = (props) => {\r\n const { subscriptionId } = props;\r\n\r\n const { loading, error, data } = useQuery(DetailQuery, {\r\n variables: {\r\n id: subscriptionId,\r\n },\r\n });\r\n\r\n if (error) return {error.message}
;\r\n\r\n return (\r\n\r\n {subscriptionTypeName}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SubscriptionCard;\r\n","import React, { useContext } from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport Typography from \"@material-ui/core/Typography\";\r\nimport { AccountContext } from \"../accountContext\";\r\nimport { Button } from \"@mantine/core\";\r\nimport SubscriptionProvider from \"./subscriptionContext\";\r\nimport SubscriptionCard from \"./SubscriptionCard\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n container: {\r\n \"@media(max-width: 1024px)\": {\r\n padding: \"16px\",\r\n },\r\n },\r\n pageInfo: {\r\n fontSize: \"0.875rem\",\r\n color: theme.app.secondaryColor,\r\n marginBottom: \"2rem\",\r\n marginTop: \".5rem\",\r\n },\r\n linkContainer: {\r\n display: \"grid\",\r\n gridTemplateColumns: \"repeat(3,1fr)\",\r\n gridGap: \"16px\",\r\n \"@media(max-width: 667px)\": {\r\n gridTemplateColumns: \"1fr\",\r\n gridGap: \"8px\",\r\n },\r\n },\r\n back: {\r\n marginTop: \"2rem\",\r\n borderTop: `1px solid ${theme.app.borderColor}`,\r\n padding: \"8px 0\",\r\n },\r\n}));\r\n\r\nconst Subscription = () => {\r\n const classes = useStyles();\r\n const accountContext = useContext(AccountContext);\r\n const language = useSelector((state) => state.language);\r\n const { isSelf } = accountContext.state;\r\n\r\n const subscriptions =\r\n accountContext.state.accountData.member.subscriptionHistory;\r\n\r\n const sortedSubscriptions = subscriptions.sort(\r\n (a, b) => new Date(b.registrationDate) - new Date(a.registrationDate)\r\n );\r\n\r\n return (\r\n {getIcon(state, classes)}
\r\n \r\n
\r\n \r\n {status !== \"Aktiv\" ? (\r\n
\r\n {status}
\r\n ) : nextPayment ? (\r\nNästa dragning: {nextPayment}
\r\n ) : subscriptionIsFinalized ? (\r\nSlutfört
\r\n ) : (\r\n{\"\"}
\r\n )}\r\n\r\n {language.Pages[\"subscription\"]} \r\n \r\n {language.PageInfo[\"subscription\"]}\r\n \r\n\r\n
\r\n );\r\n};\r\n\r\nexport default Subscription;\r\n","import { makeStyles } from \"@material-ui/core\";\r\nimport React from \"react\";\r\nimport Chip from \"../assets/chip.svg\";\r\nimport Visa from \"../assets/visa.svg\";\r\nimport Mastercard from \"../assets/mastercard.svg\";\r\nimport Amex from \"../assets/amex.svg\";\r\nimport classNames from \"classnames\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n card: {\r\n color: theme.app.secondaryColor,\r\n height: \"200px\",\r\n width: \"350px\",\r\n padding: \"3rem 0.5rem 0.5rem 2.5rem\",\r\n backgroundImage:\r\n \"linear-gradient(to right bottom, rgba(255, 255, 255, 1), rgba(242, 242, 242, 1))\",\r\n boxShadow: theme.shadows[3],\r\n borderRadius: \"10px\",\r\n },\r\n screenReader: {\r\n position: \"absolute\",\r\n zIndex: \"-1000\",\r\n width: \"100%\",\r\n height: \"100%\",\r\n },\r\n chip: {\r\n display: \"block\",\r\n height: \"30px\",\r\n borderRadius: \"3px\",\r\n marginBottom: \"5px\",\r\n },\r\n cardNumber: {\r\n position: \"relative\",\r\n display: \"flex\",\r\n gap: \"30px\",\r\n fontSize: \"22px !important\",\r\n },\r\n validContainer: {\r\n display: \"grid\",\r\n gap: \"5px\",\r\n gridTemplateColumns: \"repeat(5, 1fr)\",\r\n },\r\n validLabelContainer: {\r\n gridColumnStart: \"2\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"flex-end\",\r\n },\r\n validLabel: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n fontSize: \"7px !important\",\r\n alignItems: \"flex-end\",\r\n },\r\n validDate: {\r\n position: \"relative\",\r\n gridColumnStart: \"3\",\r\n fontSize: \"20px !important\",\r\n },\r\n iconContainer: {\r\n height: \"50px\",\r\n display: \"flex\",\r\n justifyContent: \"flex-end\",\r\n alignItems: \"Center\",\r\n },\r\n icon: {\r\n width: \"65px\",\r\n },\r\n}));\r\n\r\nconst getIcon = (initialNumber, classes) => {\r\n switch (initialNumber) {\r\n case \"4\":\r\n return \r\n {sortedSubscriptions.map((sub) => {\r\n if (!isSelf) {\r\n return null;\r\n }\r\n return (\r\n \r\n
\r\n \r\n window.history.back()}\r\n color=\"dark\"\r\n variant=\"subtle\"\r\n >\r\n {language.Back}\r\n \r\n
\r\n \r\n 
\r\n \r\n
\r\n Kortnummer
\r\n {cardNumber1}\r\n {cardNumber2}\r\n {cardNumber3}\r\n {cardNumber4}\r\n \r\n
\r\n \r\n
\r\n \r\n VALID\r\n THRU\r\n
\r\n\r\n \r\n Giltighetsdatum, månad/år\r\n \r\n {cardExpiryMonth}/{cardExpiryYear}\r\n
\r\n\r\n {getIcon(maskedCardNumber[0], classes)}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Card;\r\n","import React, { useContext } from \"react\";\r\nimport { makeStyles } from \"@material-ui/core\";\r\nimport { Button, Modal } from \"@mantine/core\";\r\nimport { useSelector } from \"react-redux\";\r\nimport { useDisclosure } from \"@mantine/hooks\";\r\nimport { AppContext, TOAST } from \"../../../../context\";\r\n\r\nimport Card from \"./Card\";\r\nimport { useState } from \"react\";\r\nimport { handleCancel } from \"../../util\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n cardContainer: {\r\n width: \"50%\",\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n gap: \"25px\",\r\n \"@media(max-width: 750px)\": {\r\n width: \"100%\",\r\n order: 0,\r\n },\r\n },\r\n infoContainer: {\r\n width: \"75%\",\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n textAlign: \"center\",\r\n gap: \"10px\",\r\n paddingBottom: \"30px\",\r\n alignItems: \"center\",\r\n },\r\n modalInfoContainer: {\r\n marginBottom: \"20px\",\r\n },\r\n modalButtonContainer: {\r\n display: \"flex\",\r\n justifyContent: \"flex-end\",\r\n gap: \"10px\",\r\n },\r\n buttonContainer: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n width: \"100%\",\r\n alignItems: \"center\",\r\n gap: \"10px\",\r\n },\r\n button: {\r\n maxWidth: \"250px\",\r\n width: \"50%\",\r\n },\r\n}));\r\n\r\nconst CardSection = ({\r\n data,\r\n updatePaymentCardUrl,\r\n status,\r\n subscriptionId,\r\n canUpdatePaymentCard,\r\n}) => {\r\n const classes = useStyles();\r\n\r\n // Get posId from updatePaymentCardUrl\r\n const url = new URL(updatePaymentCardUrl);\r\n const params = new URLSearchParams(url.search);\r\n const baseUrl = url.origin;\r\n const posId = params.get(\"pos\");\r\n\r\n const { config } = useSelector((state) => ({\r\n config: state.infrastructure.config,\r\n }));\r\n\r\n const { dispatch } = useContext(AppContext);\r\n const [loading, setLoading] = useState(false);\r\n const [modalOpened, { open: openModal, close: closeModal }] =\r\n useDisclosure(false);\r\n\r\n const { subscriptionTermType } = data.subscriptionDetails;\r\n\r\n const accessToken = useSelector((state) => state.oidc.user.access_token);\r\n\r\n const canCancel = status === \"Aktiv\" && subscriptionTermType === \"Ongoing\";\r\n const cancelUri = `${config.apiUrl}/subscription/cancel/${subscriptionId}`;\r\n const activateSubscriptionUrl = `${baseUrl}/checkout/subscription?subscriptionId=${subscriptionId}&cul=sv-SE&cur=SEK&pos=${posId}\r\n `;\r\n\r\n const cancelSubscription = () => {\r\n fetch(cancelUri, {\r\n method: \"POST\",\r\n headers: {\r\n authorization: \"Bearer \" + accessToken,\r\n },\r\n }).then((response) => {\r\n if (response.ok) {\r\n handleCancel(TOAST, setLoading, dispatch, true);\r\n } else {\r\n response\r\n .text()\r\n .then((errorMsg) =>\r\n handleCancel(TOAST, setLoading, dispatch, false, errorMsg)\r\n );\r\n }\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n Aktivera abonnemang\r\n \r\n
\r\n ) : (\r\n <>\r\n \r\n
\r\n Detta abonnemang är inte aktivt
\r\n\r\n Tryck på nedan länk och genomför första dragningen för att\r\n aktivera abonnemanget\r\n
\r\n\r\n {canUpdatePaymentCard && (\r\n \r\n Byt betalkort\r\n \r\n )}\r\n {canCancel && (\r\n <>\r\n \r\n ({\r\n root: {\r\n backgroundColor: theme.colors.red,\r\n \"&:hover\": theme.fn.hover({\r\n backgroundColor: theme.fn.darken(\"#b92727\", 0.05),\r\n }),\r\n },\r\n })}\r\n onClick={openModal}\r\n >\r\n Avbryt abonnemang\r\n \r\n \r\n )}\r\n
\r\n \r\n )}\r\n \r\n
\r\n Är du säker på att du vill avbryta ditt abonnemang?
\r\nDetta steg går inte att ångra.
\r\n\r\n \r\n Stäng\r\n \r\n \r\n
\r\n \r\n - \r\n {uniqueIdentifier && (\r\n
- \r\n Referensnummer\r\n {uniqueIdentifier}\r\n \r\n )}\r\n
- \r\n Status\r\n {subscriptionIsFinalized ? \"Slutfört\" : status}\r\n \r\n {registrationFinalizedAt && (\r\n
- \r\n Startdatum\r\n {registrationFinalizedAt}\r\n \r\n )}\r\n {cancelledAt && (\r\n
- \r\n Avbruten datum\r\n {cancelledAt}\r\n \r\n )}\r\n
- \r\n Abonnemangstyp\r\n {termType}\r\n \r\n
- \r\n Biljettnamn\r\n {ticketArticleName}\r\n \r\n {paidCharges.length > 0 && (\r\n
- \r\n Betalda dragningar\r\n \r\n {paidCharges.length}\r\n {subscriptionTermType === \"FixedTerm\" && ` av ${charges.length}`}\r\n \r\n \r\n )}\r\n {lastChargedAt && (\r\n
- \r\n Senaste dragningen\r\n {lastChargedAt}\r\n \r\n )}\r\n {nextPayment && (\r\n
- \r\n Nästa dragning\r\n {nextPayment}\r\n \r\n )}\r\n
\r\n {subscriptionTypeName} \r\n \r\n Här ser du info om ditt abonnemang\r\n {canUpdatePaymentCard && \" och kan byta betalkort\"}\r\n \r\n\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default SubscriptionDetailsPage;\r\n","import React from \"react\";\r\nimport SubscriptionProvider from \"../subscriptionContext\";\r\nimport SubscriptionDetailsPage from \"./SubscriptionDetailsPage\";\r\nimport \"./assets/subscriptionStyles.css\";\r\n\r\nconst SubscriptionDetails = ({ id }) => {\r\n return (\r\n \r\n window.history.back()}\r\n >\r\n Tillbaka\r\n \r\n
\r\n \r\n {state.activePerson.id && (\r\n
\r\n );\r\n};\r\n\r\nexport default Content;\r\n","import React from \"react\";\r\nimport Content from \"./content\";\r\nimport AccountProvider from \"./accountContext\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport SideBarNav from \"./AccountNav/sideBarNav\";\r\nimport { useMediaQuery } from \"@mantine/hooks\";\r\nimport { useSelector } from \"react-redux\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n container: {\r\n display: \"flex\",\r\n },\r\n desktopHeight: {\r\n height: `${theme.height - 64}px`,\r\n },\r\n mobileHeight: {\r\n height: `${theme.height - 64}px`,\r\n },\r\n account: {\r\n display: \"flex\",\r\n flexDirection: \"column\",\r\n justifyContent: \"space-between\",\r\n width: \"100%\",\r\n overflow: \"auto\",\r\n overflowY: \"auto\",\r\n },\r\n footer: {\r\n margin: \"0 auto\",\r\n padding: \"0.5rem 0\",\r\n \"& a\": {\r\n fontSize: \"0.9rem\",\r\n color: theme.app.labelColor,\r\n },\r\n },\r\n}));\r\n\r\nconst Account = ({ userManager }) => {\r\n const language = useSelector((state) => state.language);\r\n const isMobile = useMediaQuery(\"(max-width: 768px)\");\r\n const classes = useStyles();\r\n return (\r\n \r\n {/* \r\n \r\n
\r\n )}\r\n \r\n {!isMobile && \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n - \r\n
Denna webbsida kräver en modern webbläsare!
\r\n\r\n \r\n Tyvärr använder du en webbläsare som inte stödjer den senaste\r\n tekniken.\r\n \r\n
\r\nWindows
\r\n\r\n Om du har Windows 10 som operativsystem på din dator, så har du\r\n redan en modern webbläsare.
\r\n Den heter{\" \"}\r\n \r\n Microsoft Edge\r\n . Använd den 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 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 Annars kan du använda någon av dessa webbläsare, som är helt gratis\r\n och fungerar på både Mac och Windows.\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 \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nconst Routes = (props) => {\r\n const { userManager } = props;\r\n const { language, auth, config } = useSelector((state) => ({\r\n auth: state.oidc.user !== null && !state.oidc.user.expired,\r\n config: state.infrastructure.config,\r\n language: state.language,\r\n }));\r\n const classes = useStyles();\r\n const ref = useRef(null);\r\n const { location } = useLocation();\r\n\r\n useEffect(() => {\r\n if (language && language.MyPages && config?.selfName) {\r\n window.document.title = `${language.MyPages} - ${config?.selfName}`;\r\n } else if (language && language.MyPages && !config?.selfName) {\r\n window.document.title = `${language.MyPages}`;\r\n }\r\n }, [config, language]);\r\n\r\n useEffect(() => {\r\n ref.current.focus();\r\n }, [location.pathname]);\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n {auth ? (\r\n \r\n {language.SkipToMainContent}\r\n \r\n ) : (\r\n \r\n {language.SkipToMainContent}\r\n \r\n )}\r\n\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Routes;\r\n","import red from \"@material-ui/core/colors/red\";\r\nimport amber from \"@material-ui/core/colors/amber\";\r\nimport green from \"@material-ui/core/colors/green\";\r\nimport blue from \"@material-ui/core/colors/blue\";\r\n\r\nconst dangerColor = red[500];\r\nconst dangerHoverColor = \"rgba(244, 67, 54, 0.2)\";\r\nconst warningColor = amber[500];\r\nconst successColor = green[500];\r\nconst infoColor = blue[500];\r\n\r\n// Dark theme\r\nconst darkTheme = {\r\n themeType: \"dark\",\r\n primaryColors: {\r\n light: \"rgb(187, 222, 251)\",\r\n main: \"rgb(144, 202, 249)\",\r\n dark: \"rgb(100, 181, 246)\",\r\n },\r\n secondaryColors: {\r\n light: \"rgb(248, 187, 208)\",\r\n main: \"rgb(244, 143, 177)\",\r\n dark: \"rgb(240, 98, 146)\",\r\n },\r\n badge: {\r\n background: \"rgba(255,255,255,0.54)\",\r\n color: \"rgba(0,0,0,0.87)\",\r\n },\r\n background: [\r\n \"rgb(33, 33, 33)\",\r\n \"rgb(48, 48, 48)\",\r\n \"rgb(66, 66, 66)\",\r\n \"rgb(77, 77, 77)\",\r\n \"rgb(92, 92, 92)\",\r\n \"rgb(108, 108, 108)\",\r\n \"rgb(128, 128, 128)\",\r\n \"rgb(144, 144, 144)\",\r\n \"rgb(172, 172, 172)\",\r\n \"rgb(192, 192, 192)\",\r\n \"rgb(212, 212, 212)\",\r\n \"rgb(224, 224, 224)\",\r\n \"rgb(232, 232, 232)\",\r\n \"rgb(242, 242, 242)\",\r\n \"rgb(255, 255, 255)\",\r\n ],\r\n borderColor: \"rgba(255,255,255,0.12)\",\r\n borderColorLight: \"rgba(255,255,255,0.05)\",\r\n labelColor: \"#c1c1c1\",\r\n contrastLabelColor: \"rgb(255,255,255)\",\r\n calendarSelectColor: \"magenta\",\r\n color: \"rgb(255,255,255)\",\r\n hoverBackground: [\r\n \"rgb(48, 48, 48)\",\r\n \"rgb(77, 77, 77)\",\r\n \"rgb(92, 92, 92)\",\r\n \"rgb(108, 108, 108)\",\r\n \"rgb(128, 128, 128)\",\r\n \"rgb(144, 144, 144)\",\r\n \"rgb(172, 172, 172)\",\r\n \"rgb(192, 192, 192)\",\r\n \"rgb(212, 212, 212)\",\r\n \"rgb(224, 224, 224)\",\r\n \"rgb(232, 232, 232)\",\r\n \"rgb(242, 242, 242)\",\r\n \"rgb(255, 255, 255)\",\r\n ],\r\n iconColor: \"rgba(255,255,255,0.5)\",\r\n iconDisabledColor: \"rgba(255,255,255,0.3)\",\r\n iconHoverColor: \"rgba(255,255,255,0.05)\",\r\n linkColor: \"rgba(255,255,255,0.54)\",\r\n secondaryColor: \"rgba(255,255,255,0.54)\",\r\n dangerColor,\r\n dangerHoverColor,\r\n warningColor,\r\n successColor,\r\n infoColor,\r\n progressTrailColor: \"rgb(33,33,33)\",\r\n tooltipBackground: \"rgb(33,33,33)\",\r\n tooltipColor: \"rgba(255,255,255, 0.7)\",\r\n tooltipSecondary: \"rgba(255,255,255,0.54)\",\r\n};\r\n\r\n// Darkest theme\r\nconst darkestTheme = {\r\n themeType: \"dark\",\r\n primaryColors: {\r\n light: \"rgb(187, 222, 251)\",\r\n main: \"rgb(144, 202, 249)\",\r\n dark: \"rgb(100, 181, 246)\",\r\n },\r\n secondaryColors: {\r\n light: \"rgb(248, 187, 208)\",\r\n main: \"rgb(244, 143, 177)\",\r\n dark: \"rgb(240, 98, 146)\",\r\n },\r\n badge: {\r\n background: \"rgba(255,255,255,0.54)\",\r\n color: \"rgba(0,0,0,0.87)\",\r\n },\r\n background: [\r\n \"rgb(4, 5, 7)\",\r\n \"rgb(12, 18, 23)\",\r\n \"rgb(16, 24, 30)\",\r\n \"rgb(20, 30, 37)\",\r\n \"rgb(24, 36, 44)\",\r\n \"rgb(32, 47, 57)\",\r\n \"rgb(64, 92, 112)\",\r\n \"rgb(72, 103, 125)\",\r\n \"rgb(128, 159, 182)\",\r\n \"rgb(144, 171, 191)\",\r\n \"rgb(164, 186, 203)\",\r\n \"rgb(238, 242, 245)\",\r\n ],\r\n borderColor: \"rgba(255,255,255,0.12)\",\r\n borderColorLight: \"rgba(255,255,255,0.05)\",\r\n labelColor: \"#c1c1c1\",\r\n contrastLabelColor: \"rgb(255,255,255)\",\r\n calendarSelectColor: \"magenta\",\r\n color: \"rgb(255,255,255)\",\r\n hoverBackground: [\r\n \"rgb(16, 24, 30)\",\r\n \"rgb(20, 30, 37)\",\r\n \"rgb(24, 36, 44)\",\r\n \"rgb(32, 47, 57)\",\r\n ],\r\n iconColor: \"rgba(255,255,255,0.5)\",\r\n iconDisabledColor: \"rgba(255,255,255,0.3)\",\r\n iconHoverColor: \"rgba(255,255,255,0.05)\",\r\n linkColor: \"rgba(255,255,255,0.54)\",\r\n secondaryColor: \"rgba(255,255,255,0.54)\",\r\n dangerColor,\r\n dangerHoverColor,\r\n warningColor,\r\n successColor,\r\n infoColor,\r\n progressTrailColor: \"rgb(4,5,7)\",\r\n tooltipBackground: \"rgb(4, 5, 7)\",\r\n tooltipColor: \"rgba(255,255,255, 0.7)\",\r\n tooltipSecondary: \"rgba(255,255,255,0.54)\",\r\n};\r\n\r\n// Light theme\r\nconst lightTheme = {\r\n themeType: \"light\",\r\n primaryColors: {\r\n light: \"rgb(66, 165, 245)\",\r\n main: \"rgb(33, 150, 243)\",\r\n dark: \"#0956db\",\r\n },\r\n secondaryColors: {\r\n light: \"rgb(244, 143, 177)\",\r\n main: \"rgb(233, 30, 99)\",\r\n dark: \"rgb(216, 27, 96)\",\r\n },\r\n badge: {\r\n background: \"rgba(0,0,0,0.54)\",\r\n color: \"rgba(255,255,255)\",\r\n },\r\n background: [\r\n \"rgb(255, 255, 255)\",\r\n \"rgb(255, 255, 255)\",\r\n \"rgb(255, 255, 255)\",\r\n ],\r\n borderColor: \"#757575\",\r\n borderColorLight: \"#e9ecef\",\r\n labelColor: \"#4c4c4c\",\r\n contrastLabelColor: \"rgb(0,0,0)\",\r\n calendarSelectColor: \"magenta\",\r\n color: \"rgb(0,0,0,0.87)\",\r\n hoverBackground: [\"rgb(255,255,255)\", \"rgb(245,245,245)\"],\r\n iconColor: \"rgb(0,0,0,0.54)\",\r\n iconDisabledColor: \"rgba(0,0,0,0.3)\",\r\n iconHoverColor: \"rgba(0,0,0,0.23)\",\r\n linkColor: \"rgb(0,0,0,0.54)\",\r\n secondaryColor: \"#727272\",\r\n dangerColor,\r\n dangerHoverColor,\r\n warningColor,\r\n successColor,\r\n infoColor,\r\n progressTrailColor: \"rgb(245,245,245)\",\r\n tooltipBackground: \"rgb(224,224,224)\",\r\n tooltipColor: \"rgba(0,0,0,0.87)\",\r\n tooltipSecondary: \"rgba(0,0,0,0.54)\",\r\n};\r\n\r\nconst getThemeVariation = (type) => {\r\n switch (type) {\r\n case \"dark\":\r\n window.document.documentElement.style.setProperty(\r\n \"--body-text\",\r\n \"rgba(255,255,255,0.7)\"\r\n );\r\n return darkTheme;\r\n case \"darkest\":\r\n window.document.documentElement.style.setProperty(\r\n \"--body-text\",\r\n \"rgba(255,255,255,0.7)\"\r\n );\r\n return darkestTheme;\r\n case \"light\":\r\n window.document.documentElement.style.setProperty(\r\n \"--body-text\",\r\n \"rgba(0,0,0,0.7)\"\r\n );\r\n return lightTheme;\r\n default:\r\n throw new Error(\r\n `Wrong theme type: ${type}. Should be light, dark or darkest`\r\n );\r\n }\r\n};\r\n\r\nexport const getTheme = (type) => getThemeVariation(type || \"dark\");\r\n","import React, { useState } from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\nimport Routes from \"./routes\";\r\nimport CssBaseline from \"@material-ui/core/CssBaseline\";\r\nimport { createMuiTheme, MuiThemeProvider } from \"@material-ui/core/styles\";\r\nimport NewContextProvider from \"./context\";\r\nimport { getTheme } from \"./Common/theme\";\r\nimport { MantineProvider } from \"@mantine/core\";\r\n\r\nconst theme = (myTheme) =>\r\n createMuiTheme({\r\n app: myTheme,\r\n height: myTheme.height,\r\n palette: {\r\n type: myTheme.themeType,\r\n primary: {\r\n light: myTheme.primaryColors.light,\r\n main: myTheme.primaryColors.main,\r\n dark: myTheme.primaryColors.dark,\r\n },\r\n secondary: {\r\n light: myTheme.secondaryColors.light,\r\n main: myTheme.secondaryColors.main,\r\n dark: myTheme.secondaryColors.dark,\r\n },\r\n background: {\r\n paper: myTheme.background[1],\r\n default: myTheme.background[0],\r\n },\r\n borderColor: {\r\n light: \"white\",\r\n main: \"white\",\r\n dark: \"white\",\r\n },\r\n },\r\n });\r\n\r\nexport default function App(props) {\r\n const [prevHeight, setPrevHeight] = useState(window.innerHeight);\r\n const selectedTheme = useSelector((state) => state.cookies.theme);\r\n const myTheme = getTheme(selectedTheme);\r\n window.addEventListener(\"resize\", () => {\r\n if (window.innerHeight !== prevHeight) {\r\n setPrevHeight(window.innerHeight);\r\n }\r\n });\r\n\r\n const mantineTheme = {\r\n colorScheme: selectedTheme,\r\n components: {\r\n Button: {\r\n styles: (theme, { variant }) => ({\r\n root: {\r\n \":focus\": {\r\n outlineColor: \"var(--outline-focus-color)\",\r\n },\r\n },\r\n }),\r\n },\r\n },\r\n };\r\n\r\n return (\r\n