\n
\n );\n};\nexport default ClimateAction;\n","import React from 'react';\n\nimport { useClimateActionsContext } from './contexts/ClimateActionsContext';\nimport { useClimateActionsText } from './contexts/TextContext';\nimport ClimateAction from './ClimateAction.jsx';\nimport getCategoryBgColor from './helpers/CategoryColorHelper';\nimport { useUserContext } from './contexts/UserContext';\n\nconst CategoryButton = ({ category, onClick, isActive }) => {\n const { name, id } = category;\n const categoryClassName = name.toLowerCase().replace(/ /g, '_');\n return (\n \n );\n};\n\nconst getSelectedActions = (activeCategory, actions) => {\n if (activeCategory == null) return actions;\n if (activeCategory === -1) return [...actions].sort((a, b) => b.total_times_completed - a.total_times_completed).slice(0, 5);\n return actions.filter((action) => action.category_id === activeCategory);\n};\n\nconst AllClimateActions = () => {\n const { data, acceptAction } = useClimateActionsContext();\n const { actions, categories } = data;\n const user = useUserContext();\n\n const climateActionsText = useClimateActionsText();\n const [activeCategory, setActiveCategory] = React.useState(null);\n return (\n \n \n
\n \n 
\n
\n \n \n {limitText(action.description, 200)}\n \n
\n \n {limitText(action.name, 40)}\n
\n\n
\n \n \n {(otherTimesCompleted > 0 || canRepeat) && (\n
\n \n \n {otherTimesCompleted > 0 ? otherTimesCompleted : action.user_actions.length}\n
\n )}\n \n{climateActionsText.take_action}
\n\n {climateActionsText.low_effort_high_impact_actions}\n
\n\n {categories.map((category) =>
\n \n {getSelectedActions(activeCategory, actions).map((action) => (\n c.id === action.category_id).name} userId={user.id} acceptAction={acceptAction} />))\n }\n
\n {children}
\n ,\n document.querySelector('#sidebar')\n);\n\nexport default Sidebar;\n","import React, { useState, useEffect } from 'react';\nimport { useClimateActionsText } from './contexts/TextContext.js';\nimport { useClimateActionsContext } from './contexts/ClimateActionsContext.js';\n\nconst DropDown = ({ children }) => {\n const [showDropDown, setShowDropDown] = useState(false);\n const { data } = useClimateActionsContext();\n const climateActionsText = useClimateActionsText();\n const totalAcceptedActions = data.actions.reduce((sum, action) => sum + action.user_actions.filter((a) => !a.status).length, 0);\n\n const toggleScroll = (bool) => {\n const scrollable = document.getElementById('scrollable');\n if (bool) {\n scrollable.classList.add('overflow-hidden');\n } else {\n scrollable.classList.remove('overflow-hidden');\n }\n };\n\n useEffect(() => {\n const toggleDropDown = () => setShowDropDown(false);\n const dropDownMenu = document.getElementById('nav-toggler');\n dropDownMenu.addEventListener('input', toggleDropDown);\n return () => dropDownMenu.removeEventListener('input', toggleDropDown);\n }, []);\n\n // eslint-disable-next-line no-unused-expressions\n showDropDown\n && (document.getElementById('nav-toggler').checked = false);\n // eslint-disable-next-line no-unused-expressions\n showDropDown ? toggleScroll(true) : toggleScroll(false);\n\n return (\n \n \n {children}\n
\n \n setShowDropDown(!showDropDown)}\n >\n \n {climateActionsText.my_actions}\n \n \n {climateActionsText.close}\n \n {totalAcceptedActions > 0 && (\n
\n \n );\n};\n\nexport default DropDown;\n","/**\n * TODO: Why can't we use the ones already defined in the tailwind config?\n */\n\nexport const m = '414px';\nexport const mLg = '640px';\nexport const t = '768px';\nexport const d = '1024px';\nexport const dMd = '1280px';\nexport const dLg = '1680px';\n","import React from 'react';\n\nconst ProgressBar = ({ colorClass, completed, total }) => (\n \n \n {totalAcceptedActions}\n \n
\n )}\n \n \n
\n);\n\nexport default ProgressBar;\n","import React, { useState } from 'react';\nimport { useMediaQuery } from 'react-responsive';\nimport { t } from './constants';\nimport { useClimateActionsText } from './contexts/TextContext';\nimport getCategoryBgColor from './helpers/CategoryColorHelper';\nimport ProgressBar from './ProgressBar.jsx';\nimport { useUserContext } from './contexts/UserContext';\nimport { useClimateActionsContext } from './contexts/ClimateActionsContext';\n\nconst climateFriendCategory = {\n id: -2,\n badge_name: 'Climate Friend',\n name: 'Climate Friend',\n badge_image_url: '/achievement_images/AchievementClimateFriendShadow.png'\n};\n\nconst climateFriendActions = (userSubscriptionType) => [{\n category_id: -2,\n id: -2,\n name: 'GoClimate free membership',\n user_actions: [{ status: true }]\n}, {\n category_id: -2,\n id: -3,\n name: 'GoClimate paid membership',\n user_actions: [{ status: userSubscriptionType }]\n}];\n\nconst AchivementCategory = ({ category, actions, sidebarCollapsed, onUpdate }) => {\n const [expanded, setExpanded] = useState(false);\n const completedActions = actions.filter((action) => {\n if (action.user_actions && action.user_actions.length > 0) {\n return action.user_actions.some((a) => a.status);\n }\n return false;\n });\n\n if (completedActions.length === 0) return null;\n\n const sortedActions = actions.sort((a, b) => (a.user_actions.filter((ua) => ua.status).length < b.user_actions.filter((ua) => ua.status).length ? 1 : -1));\n const colorClass = getCategoryBgColor(category.name.toLowerCase().replace(/ /g, '_'));\n return (\n \n
\n {`${completed}/${total}`}\n \n
\n {expanded && (\n \n 
\n
\n \n
\n \n a.user_actions.some((ua) => ua.status)).length}\n total={actions.length}\n />\n
\n \n {category.badge_name}
\n\n {sortedActions.map((action) => {\n const timesCompleted = action.user_actions.filter((ua) => ua.status).length;\n const isCompleted = timesCompleted > 0;\n const latestCompletedId = action.user_actions.length > 0 ? action.user_actions.filter((ua) => ua.status)[0]?.id : null;\n return (\n
\n )}\n \n );\n};\n\nconst Achivements = ({ sidebarCollapsed }) => {\n const { data, updateAction } = useClimateActionsContext();\n const { categories, actions } = data;\n const { userSubscriptionType } = useUserContext();\n const isTabletOrMobile = useMediaQuery({ query: `(max-width: ${t})` });\n const climateActionsText = useClimateActionsText();\n\n return (\n \n
\n );\n })}\n {timesCompleted}
\n
\n \n {action.name}\n
\n {isCompleted && action.id > 0 && (\n \n )}\n\n
\n );\n};\n\nexport default Achivements;\n","import React, { useState } from 'react';\nimport { useMediaQuery } from 'react-responsive';\nimport { useClimateActionsText } from './contexts/TextContext';\nimport getCategoryBgColor from './helpers/CategoryColorHelper';\nimport Markdown from '../../other/Markdown.jsx';\nimport { useClimateActionsContext } from './contexts/ClimateActionsContext';\nimport { t } from './constants';\n\nconst AcceptedUserAction = ({ action, sidebarCollapsed, categoryName, onUpdate, onDelete }) => {\n const climateActionsText = useClimateActionsText();\n const [expanded, setExpanded] = useState(false);\n return (\n \n
\n \n {!sidebarCollapsed && climateActionsText.achievements}\n
\n\n
\n \n {categories.map((c) => (\n ca.category_id === c.id)}\n sidebarCollapsed={sidebarCollapsed}\n onUpdate={updateAction}\n />))}\n
\n \n
\n {expanded && (\n \n 
\n
\n \n
\n \n
\n \n {action.name}
\n\n \n {action.description.length > 200\n ? `${action.description.slice(0, 200)}...`\n : action.description}\n \n
\n )}\n \n );\n};\n\nconst AcceptedActions = ({ sidebarCollapsed, setSidebarCollapsed }) => {\n const { data, updateAction, deleteAction } = useClimateActionsContext();\n const { actions, categories } = data;\n const climateActionsText = useClimateActionsText();\n const isTabletOrMobile = useMediaQuery({ query: `(max-width: ${t})` });\n\n const acceptedActions = actions.filter((action) => {\n if (action.user_actions && action.user_actions.length > 0) {\n return action.user_actions.some((a) => !a.status);\n }\n return false;\n });\n\n return (\n \n \n \n
\n \n \n\n
\n \n {!sidebarCollapsed && climateActionsText.my_actions}\n
\n\n {acceptedActions.map((action) => (\n c.id === action.category_id).name}\n onUpdate={updateAction}\n onDelete={deleteAction}\n />\n ))}\n
\n \n setSidebarCollapsed(!sidebarCollapsed)}\n />\n )}\n
\n \n \n );\n};\n\nexport default AcceptedActions;\n","import React, { useState } from 'react';\nimport { useMediaQuery } from 'react-responsive';\nimport Sidebar from './Sidebar.jsx';\nimport DropDown from './DropDown.jsx';\nimport { t } from './constants';\nimport Achivements from './Achivements.jsx';\nimport AcceptedActions from './AcceptedActions.jsx';\n\nconst UserActionsContainer = ({ sidebarCollapsed, setSidebarCollapsed }) => (\n \n
\n);\n\nconst ManageUserActions = () => {\n const [sidebarCollapsed, setSidebarCollapsed] = useState(false);\n const isTabletOrMobile = useMediaQuery({ query: `(max-width: ${t})` });\n\n return (\n <>\n {isTabletOrMobile ? (\n \n {climateFriendToplist.length > 0 && (\n
\n \n
\n )}\n {countryToplist.length > 0 && (\n {orgName}
\n{t('views.organization.employee_dashboard.climate_friend_toplist')}
\n- \n {climateFriendToplist.slice(0, showMore ? climateFriendToplist.length : toplistLimit).map((item, index) => (\n
- \n {` ${item.name} (${item.count} ${t('views.organization.employee_dashboard.climate_action')})`}\n \n ))}\n
\n
\n )}\n {orgName}
\n{t('views.organization.employee_dashboard.country_toplist')}
\n- \n {countryToplist.map((item, index) => (\n
- \n {` ${item.country} (${item.count} ${t('views.organization.employee_dashboard.climate_action')})`}\n \n ))}\n
\n {t('views.organization.employee_dashboard.popular_climate_actions', { orgName })}\n
\n\n
\n \n )}\n \n {popularClimateActions.map((action) => (\n
\n \n
\n ))}\n \n \n
\n \n \n
\n \n \n {action.description}\n \n
\n \n {action.name}\n
\n\n {action.total}\n {action.total === 1 ? t('views.organization.employee_dashboard.committed_user') : t('views.organization.employee_dashboard.committed_users')}\n
\n \n
\n {t('views.climate_actions.take_action')}
\n{t('views.climate_actions.low_effort_high_impact_actions')}
\n \n\n \n {orgLogo && 
}\n \n \n \n
\n);\n\nexport default withTranslation()(OrganizationEmployeeDashboard);\n","import i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\nimport ChainedBackend from 'i18next-chained-backend';\nimport HttpBackend from 'i18next-http-backend';\nimport LocalStorageBackend from 'i18next-localstorage-backend';\n\nconst currentLng = document.documentElement.lang;\nconst fallbackLng = 'en';\n\ni18n\n // load translation using http -> see /public/locales\n // (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)\n // learn more: https://github.com/i18next/i18next-http-backend\n .use(ChainedBackend)\n // pass the i18n instance to react-i18next.\n .use(initReactI18next)\n // init i18next\n // for all options read: https://www.i18next.com/overview/configuration-options\n .init({\n fallbackLng,\n lng: currentLng,\n // debug: true,\n backend: {\n backends: [\n LocalStorageBackend,\n HttpBackend\n ],\n backendOptions: [{\n expirationTime: 5 * 60 * 1000 // 5 min\n }, {\n loadPath: '/i18n/%{lng}.json',\n parse: (data) => {\n const parsedJson = JSON.parse(data);\n return parsedJson[(currentLng in parsedJson ? currentLng : fallbackLng)];\n }\n }, {\n }]\n },\n interpolation: {\n prefix: '%{',\n suffix: '}'\n }\n });\n\nexport default i18n;\n","import { Controller } from 'stimulus';\nimport React, { Suspense } from 'react';\nimport * as ReactDOMClient from 'react-dom/client';\nimport * as components from '../react_components';\nimport '../react_components/i18n';\n\nexport default class ReactComponentController extends Controller {\n initialize() {\n const root = ReactDOMClient.createRoot(this.element);\n root.render(\n {t('views.organization.employee_dashboard.greeting')}
\n\n
\n \n \n
\n \n 
\n
\n \n {t('views.organization.employee_dashboard.climate_actions', { orgName })}\n
\n {actionsTakenCount}
\n\n \n
\n \n 
\n
\n {t('views.organization.employee_dashboard.tonnes_avoided')}
\n {co2TonnesAvoided}
\n