\n\t\t\t
\n\t\t\n\t\t\t\t
\n\t\t{name}
\n\t\t\t\t{size} KB
\n\t\t\t removeFile()}>\n\t\t\t
\n\t\n
\n \n \n \n
\n Remote, + {cities.length}
;\n }\n\n if (\n (isHr || user.authenticatedRole?.key !== UserRolesKeysEnum.MEMBER) &&\n cities.length > 1\n ) {\n return (\n\n {cities[0].name}, + {cities.length - 1}\n
\n );\n }\n\n if (isEmpty(cities) && isRemote) returnRemote
;\n\n if (\n user.authenticatedRole?.key === UserRolesKeysEnum.MEMBER &&\n !isEmpty(user.employee.cities)\n ) {\n const employeeCity = user.employee?.cities?.find(city =>\n cities.find(ct => ct.id === city.id)\n );\n if (!!employeeCity && cities.length > 1 && !isRemote) {\n return (\n\n {employeeCity.name}, + {cities.length - 1}\n
\n );\n }\n\n if (!!employeeCity && cities.length > 1 && isRemote) {\n return (\n\n Remote, {employeeCity.name}, + {cities.length - 1}\n
\n );\n }\n\n if (!!employeeCity && cities.length === 1 && isRemote) {\n returnRemote, {employeeCity.name}
;\n }\n\n if (!isEmpty(cities) && isEmpty(employeeCity) && isRemote) {\n returnRemote, + {cities.length}
;\n }\n\n if (cities.length > 1) {\n return (\n\n {cities[0].name}, + {cities.length - 1}\n
\n );\n }\n }\n\n return{cities[0].name}
;\n };\n\n /**\n * Renders benefit group categories to card.\n * @returns {HTMLDivElement}\n */\n const renderCategories = () => {\n if (isEmpty(categories)) return [];\n\n if (!isEmpty(categories) && categories.length > 1) {\n return (\n\n {categories[0].name}, + {categories.length - 1}\n
\n );\n }\n\n return{categories[0].name}
;\n };\n\n /**\n * Returns icon component based on status.\n * @param {string} status\n * @returns {import(\"react\").ReactComponentElement}\n */\n const renderStatusIcon = status => {\n if (status === ACTIVE) {\n return\n \n {cities && renderCities(cities)}\n
\n \n
\n \n \n {!isEmpty(taxes) &&
\n \n
\n \n
\n \n
\n \n
\n {name}
\n{renderCategories()}
\n \n
\n \n \n {\" \"}\n {numberReviews\n ? (sumRatings / numberReviews).toFixed(1)\n : 0}{\" \"}\n \n
\n {truncate(taxes, 60)}
}\n{truncate(summary, 89)}
\n\n \n \n
\n )}\n \n \n {isHr && (\n \n \n \n {t(\"decline_unsub_warning\")}\n \n \n \n ))}\n {doesBenefitGroupHaveInstalments && (\n <>\n \n \n \n {t(\"benefit_has_installments\")}\n \n \n \n )}\n
\n {!isHr && (\n \n \n MCP\n
\n \n {transformTokenCurrencyIcons()}\n
\n {isPreview ||\n (doesBenefitGroupHaveMcp && (\n <>\n \n {transformPriceRangeTokensToPriceRangeRsd(priceRange)}\n
\n\n {!isEmpty(quantityRemaining) && doesBenefitGroupHaveQuantity && (\n \n
\n )}\n {!isPreview && (\n <>\n {!!listOfFavoriteBenefitsInObject[benefitGroupId] ? (\n \n {quantityRemaining} {t(\"left\")}\n
\n\n {benefitGroupAvailable ? (\n
\n )}\n {isMyBenefits\n ? status && (\n \n {t(\"enabled\")} \n
\n ) : (\n \n {t(\"disabled\")} \n
\n )}\n \n {renderStatusIcon(status)}\n
\n )\n : status && (\n {statusPreview}
\n\n {renderStatusIcon(status)}\n
\n )}\n \n \n {statusPreview}
\n\n\t\t\t\t
\n\t\t\t{text}
\n\t\t\n\t\t{inputName}
\n\n{sortTypeDown}
*/}\n\n \n
\n \n handleLanguageChange(\"rs\")}\n disabled={language === \"rs\"}\n >\n {/* {CountryFlags(\"rs\")} */}\n Srpski\n \n handleLanguageChange(\"en\")}\n >\n {/* {CountryFlags(\"en\")} */}\n English\n \n
\n )}\n \n
\n );\n};\n\nconst mapDispatchToProps = dispatch => {\n return {\n logout: () => dispatch(actionCreators.logout()),\n resetBenefitGroupFiltersToDefault: () =>\n dispatch(employeeActionCreators.resetBenefitGroupFiltersToDefault()),\n setChosenCategoryIds: chosenCategoryIds =>\n dispatch(employeeActionCreators.setChosenCategoryIds(chosenCategoryIds)),\n setFiltersPriceRange: (updatedPriceRangeOptions, priceRange) =>\n dispatch(\n employeeActionCreators.setFiltersPriceRange(\n updatedPriceRangeOptions,\n priceRange\n )\n ),\n setCitiesFilter: cityIds =>\n dispatch(employeeActionCreators.setCitiesFilter(cityIds)),\n setRemoteFilterToStore: isRemote =>\n dispatch(employeeActionCreators.setRemoteFilter(isRemote)),\n setFiltersPriceRange: (updatedPriceRangeOptions, priceRange) =>\n dispatch(\n employeeActionCreators.setFiltersPriceRange(\n updatedPriceRangeOptions,\n priceRange\n )\n )\n };\n};\n\nexport default connect(null, mapDispatchToProps)(LogoutDropDown);\n","import styled from \"styled-components\";\n\nexport const SwitchPlatformsDropdownStyles = styled.div`\n display: flex;\n align-items: center;\n\n .lngDropdown {\n position: static !important;\n margin-left: 15px;\n\n .flagDropdownWrapper {\n width: unset;\n .shownFlag {\n box-shadow: none;\n background: #f5f5f5;\n }\n }\n }\n\n .roleTooltip {\n display: flex;\n align-items: center;\n }\n\n .roleSwitchContainer {\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 20px;\n color: #757575;\n white-space: nowrap;\n margin-right: 8px;\n }\n\n .tooltipContainer {\n position: relative;\n .arrowButtons {\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n cursor: pointer;\n width: 10px;\n }\n\n .tooltip {\n position: absolute;\n background: #757575;\n border-radius: 4px;\n padding: 10px;\n right: -15px;\n top: 21px;\n\n .pointerBorder {\n width: 0;\n height: 0;\n border-left: 9px solid transparent;\n border-right: 9px solid transparent;\n border-bottom: 9px solid #4b4b4b;\n position: absolute;\n border-radius: 2px;\n right: 11px;\n top: -9px;\n }\n\n .pointer {\n width: 0;\n height: 0;\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n border-bottom: 8px solid white;\n position: absolute;\n border-radius: 2px;\n right: 12px;\n top: -8px;\n }\n\n .tooltipOption {\n width: 100%;\n font-style: normal;\n font-weight: 600;\n font-size: 14px;\n line-height: 15px;\n white-space: nowrap;\n color: #757575;\n cursor: pointer;\n padding: 6px;\n\n &:hover {\n background: #1568bf;\n color: white;\n opacity: 0.9;\n }\n }\n\n .tooltipOption:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n @media only screen and (max-width: 767px) {\n margin-left: 0;\n margin-right: 85px;\n\n .tooltipContainer {\n z-index: 2;\n }\n }\n\n @media only screen and (max-width: 360px) {\n margin-left: -50px;\n\n .roleSwitchContainer {\n font-size: 12px;\n }\n }\n`;\n","import React, { useRef, useState } from \"react\";\nimport { connect, useSelector } from \"react-redux\";\nimport { useHistory } from \"react-router-dom\";\nimport PropTypes from \"prop-types\";\n\nimport ArrowDown from \"../../../assets/images/categoryFilters/rectangle.png\";\nimport { SwitchPlatformsDropdownStyles } from \"./switchPlatformsDropdown.styles\";\n\nimport useClickOutside from \"../../../hooks/useClickOutside\";\n\nimport * as actionCreators from \"../../../actions/app.actions\";\nimport * as api from \"../../../services/api/auth.service\";\nimport { isAuthenticatedRole } from \"../../../services/roles.utils\";\nimport { setItem } from \"../../../services/localStorage.service\";\nimport { BENEFIT_ROLE } from \"../../../constants/localStorage.constants\";\nimport { UserRolesKeysEnum } from \"../../../constants/roles.constants\";\nimport { useTranslation } from \"react-i18next\";\nimport { LanguageDropdown } from \"../../locales/LanguageDropdown\";\n\nconst SwitchPlatformsDropdown = ({ user, switchUserRole }) => {\n const { t } = useTranslation();\n const tooltip = useRef(null);\n const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n const history = useHistory();\n\n const { authenticatedRole } = useSelector(state => state.app.user);\n\n /**\n * Handles switching of user roles.\n * Sets selected role to state.\n * If user switches to HR that hasn't completed onboarding process:\n * Replaces current route with /onboarding.\n * In every other case, switches to /.\n * @param {object} role\n */\n const handleSwitchUserRole = async role => {\n const userRole = await api.setAuthenticatedUserRole(role.key);\n setItem(BENEFIT_ROLE, role.key);\n switchUserRole(userRole);\n\n if (\n isAuthenticatedRole(userRole, UserRolesKeysEnum.HR) &&\n !user.isOnboardingDone\n ) {\n history.replace(\"/onboarding\");\n } else {\n history.replace(\"/\");\n }\n };\n\n /**\n * Handle role switch dropdown open/close.\n * @param {Event} event\n */\n const handleDropdownOpen = event => {\n event.preventDefault();\n setIsDropdownOpen(true);\n };\n\n useClickOutside([tooltip], () => setIsDropdownOpen(false));\n\n return (\n \n
\n \n
\n \n
\n \n {getInitals(`${user.firstName} ${user.lastName}`)}\n
\n\n {user.firstName} {user.lastName}\n
\n {user.email}
\n {user.companyName && (\n {user.companyName}
\n )}\n \n \n
\n \n \n {t(\"privacy_policy\")}\n \n \n {t(\"terms\")}\n \n
\n \n {t(user?.authenticatedRole?.name)}\n
\n {user?.roles?.length > 1 && (\n\n \n {isDropdownOpen && (\n
\n )}\n \n {authenticatedRole?.id !== 2 && (\n \n \n \n {user.roles\n .filter(role => role.key !== user.authenticatedRole.key)\n .map(role => (\n handleSwitchUserRole(role)}\n >\n {t(role.name)}\n \n ))}\n
\n )}\n \n
\n )}\n \n
\n \n
\n {t(\"Budget\")}
\n \n {transformTokensToRsd(user.remainingTokens)}/\n {transformTokensToRsd(user.totalTokens)}{\" \"}\n {transformTokenCurrencyIcons()}\n
\n \n
\n
\n \n
\n {t(\"sub_monthly\")}
\n \n \n {transformTokensToRsd(budgetBreakdown.monthlySpent)}\n {\" \"}\n {transformTokenCurrencyIcons()}\n
\n \n
\n {t(\"sub_one_time\")}
\n \n \n {transformTokensToRsd(budgetBreakdown.oneTimeSpent)}\n {\" \"}\n {transformTokenCurrencyIcons()}\n
\n \n
\n {t(\"sub_vouchers\")}
\n \n \n {transformTokensToRsd(budgetBreakdown.vouchersSpent)}\n {\" \"}\n {transformTokenCurrencyIcons()}\n
\n \n
\n {t(\"Installments\")}
\n \n \n {transformTokensToRsd(budgetBreakdown.instalmentsSpent)}\n \n {transformTokenCurrencyIcons()}\n
\n \n
\n MCP
\n \n \n {transformTokensToRsd(budgetBreakdown.mcpSpent)}\n \n {transformTokenCurrencyIcons()}\n
\n \n
\n
\n \n {t(\"total_spent\")}{\" \"}\n {transformTokensToRsd(totalSpent)}\n {transformTokenCurrencyIcons()}\n
\n \n {shouldRedirectToOriginal && (\n
\n\n \n \n \n {t(\"go_back\")}\n \n
\n )}\n {headerTitle ? (\n \n {svgIcon}\n {headerTitle}\n
\n ) : (\n <>\n {user?.authenticatedRole && (\n\n {t(\"choose_benefits_message\", {\n name: vocativeName !== \"\" ? vocativeName : firstName\n })}\n \n {isInSerbianLanguage === \"rs\"\n ? monthsInSerbian[\n moment()\n .add(1, \"month\")\n .format(\"MMMM\")\n ]\n : moment()\n .add(1, \"month\")\n .format(\"MMMM\")}\n \n \n \n \n
\n )}\n \n )}\n {isTokenVisable && (\n \n {transformTokenCurrencyIcons()}\n
\n )}\n \n {transformTokensToRsd(\n user.remainingTokens >= 0 ? user.remainingTokens : 0\n )}\n /{transformTokensToRsd(user.totalTokens)}\n
\n\n \n \n {t(\"rt_tt_ratio\")}\n \n
\n \n
\n {/* \n {\n e.stopPropagation();\n setIsBreakdownOpen(!isBreakdownOpen);\n }}\n >\n {transformTokenCurrencyIcons()}\n
\n \n {transformTokensToRsd(\n user?.remainingTokens >= 0 ? user?.remainingTokens : 0\n )}\n /{transformTokensToRsd(user?.totalTokens)}\n
\n\n \n \n {t(\"rt_tt_ratio\")}\n \n
\n {}}>\n
*/}\n \n {isBreakdownOpen && (\n Submit
\n\n {\n e.stopPropagation();\n setIsDropDownOpen(!isDropDownOpen);\n }}\n >\n
\n \n {isDropDownOpen && \n
\n \n {getInitals(`${user.firstName} ${user.lastName}`)}\n
\n{t(\"no_image\")}
}\n\n
\n {t(\"upload_image\")}\n \n \n {t(\"dnd_or\")} \n
{t(\"supported_formats\")}
\n \n )}\n {photo && photo instanceof File && (\n\n
\n )}\n {photo && photo instanceof File === false && (\n removeImage()}>\n
\n \n
\n )}\n removeImage()}>\n
\n {linkName}
\n \n);\n\nSidebarMenuTab.propTypes = {\n linkName: PropTypes.string,\n Icon: PropTypes.elementType,\n active: PropTypes.bool,\n customCssClass: PropTypes.string,\n paraIconLeftMargin: PropTypes.string,\n onClick: PropTypes.func\n};\n\nexport default SidebarMenuTab;\n","import SidebarMenuTab from './SidebarMenuTab'\n\nexport default SidebarMenuTab\n","import {\n DashboardIcon,\n BenefitsIcon,\n EmployeesIcon,\n SettingsIcon\n} from \"../assets/Icons\";\n\nconst admin = [\n {\n path: \"/\",\n title: \"Dashboard\",\n icon: DashboardIcon\n },\n {\n path: \"/providers\",\n title: \"Providers\",\n icon: BenefitsIcon\n },\n {\n path: \"/activity\",\n title: \"Activity\",\n icon: BenefitsIcon\n },\n {\n path: \"/companies\",\n title: \"Companies\",\n icon: BenefitsIcon\n },\n {\n path: \"/users\",\n title: \"Users\",\n icon: EmployeesIcon\n },\n {\n path: \"/settings\",\n title: \"Settings\",\n icon: SettingsIcon\n },\n {\n path: \"/notifications\",\n title: \"Notifications\",\n icon: DashboardIcon\n }\n];\n\nconst hr = [\n {\n path: \"/\",\n title: \"Dashboard\",\n icon: DashboardIcon\n },\n {\n path: \"/benefits\",\n title: \"Benefits\",\n icon: BenefitsIcon\n },\n {\n path: \"/company-benefits\",\n title: \"Company Benefits\",\n icon: BenefitsIcon\n },\n {\n path: \"/employees\",\n title: \"Employees\",\n icon: EmployeesIcon\n },\n {\n path: \"/settings\",\n title: \"Settings\",\n icon: SettingsIcon\n }\n];\n\nexport const navLogos = {\n Dashboard: DashboardIcon,\n Benefits: BenefitsIcon,\n Providers: BenefitsIcon,\n Activity: BenefitsIcon,\n Companies: BenefitsIcon,\n Users: EmployeesIcon,\n Settings: SettingsIcon,\n Notifications: DashboardIcon,\n \"Company Benefits\": BenefitsIcon,\n Employees: EmployeesIcon,\n Refunds: EmployeesIcon\n};\n\nexport const navigationConfig = {\n admin: admin,\n hr: hr\n};\n","import React, { useEffect, useState } from \"react\";\nimport { connect } from \"react-redux\";\nimport { NavLink, useHistory, useLocation } from \"react-router-dom\";\nimport PropTypes from \"prop-types\";\n// assets\nimport { EmployeesIcon, LogoutIcon } from \"../../assets/Icons\";\n//components\nimport { CompanyThemeLogo } from \"../../components\";\n//styles\nimport SidebarMenuStyles from \"./SidebarMenuStyles\";\nimport SidebarMenuTab from \"./sidebarMenuTab\";\n//constants\nimport { BENEFIT_ROLE } from \"../../constants/localStorage.constants\";\n//config\nimport { navigationConfig, navLogos } from \"../../config/navigation.config\";\n//actions\nimport * as actionCreators from \"../../actions/app.actions\";\nimport * as actionHRCreators from \"../../actions/hr/employees.actions\";\n//services\nimport { filterArrayByValueOfKey, isEmpty } from \"../../services/general.utils\";\n//hooks\nimport useWindowDimensions from \"../../hooks/useWindowDimensions\";\nimport { useIsAuthenticated, useMsal } from \"@azure/msal-react\";\nimport { apiService } from \"../../services/api/api.service\";\nimport { useTranslation } from \"react-i18next\";\nimport { LanguageDropdown } from \"../locales/LanguageDropdown\";\n\nconst SidebarMenu = ({\n logout,\n user,\n isSidebarMenuOpen,\n toggleSidebarMenu\n}) => {\n const { t } = useTranslation();\n const history = useHistory();\n const { pathname } = useLocation();\n const { width } = useWindowDimensions();\n const { instance } = useMsal();\n const isAuthenticated = useIsAuthenticated();\n const location = useLocation();\n\n const [listOfLinks, setLitOfLinks] = useState([]);\n\n const pathForEmployeeAndRefund =\n pathname.match(\"employees\") || pathname.match(\"refunds\");\n\n const isShowSidebar =\n isEmpty(pathForEmployeeAndRefund) ||\n (!isEmpty(pathForEmployeeAndRefund) && (isSidebarMenuOpen || width >= 767));\n\n const refundPage = {\n path: \"/refunds\",\n title: \"Refunds\"\n };\n\n const getListOfCompaniesThatHaveRefunds = async () => {\n if (!user?.authenticatedRole?.key) return;\n if (user?.authenticatedRole?.key === \"member\") return;\n\n try {\n const response = await apiService.get(\n \"/company/get-all-refund-companies\"\n );\n const companyIds = response.data.items.map(company => company.id);\n\n const links = JSON.parse(\n JSON.stringify(navigationConfig[user?.authenticatedRole?.key])\n );\n\n const shouldShowRefundPage =\n user?.authenticatedRole?.key === \"hr\" &&\n companyIds.includes(user.companyId) &&\n !links.includes(refundPage);\n\n if (shouldShowRefundPage) links.push(refundPage);\n\n setLitOfLinks(links);\n } catch (error) {\n console.log(\"Unable to get companies that have refunds\", error);\n }\n };\n\n useEffect(() => {\n getListOfCompaniesThatHaveRefunds();\n }, [user?.authenticatedRole?.key, location]);\n\n return (\n /**\n * SidebarMenu is closed by default when screen size < 767px in the HR/Employees page\n */\n isShowSidebar && (\n\n {user?.authenticatedRole && (\n <>\n {!isEmpty(pathForEmployeeAndRefund) && width < 767 && (\n toggleSidebarMenu(isSidebarMenuOpen)}\n >\n {\" \"}\n X{\" \"}\n \n )}\n history.push(\"/\")}\n style={{ cursor: \"pointer\" }}\n >\n
\n \n )}\n \n {user && user?.authenticatedRole && (\n \n {listOfLinks.map(link => {\n return (\n \n {\n localStorage.removeItem(BENEFIT_ROLE);\n logout();\n isAuthenticated && instance.logoutPopup();\n history.replace(\"/\");\n }}\n />\n
\n )}\n {title}
\n\n {children}\n
{t(text)}
\n methods.addItem(item)}>\n
\n )\n}\n\nitemRenderer.propTypes = {\n item: PropTypes.shape(),\n methods: PropTypes.shape(),\n props: PropTypes.shape({\n valueField: PropTypes.string,\n labelField: PropTypes.string\n }),\n state: PropTypes.shape(),\n itemIndex: PropTypes.string\n}\n\nexport default itemRenderer\n","import styled from \"styled-components\";\n\nconst SortSelectInputStyles = styled.div`\n width: 100%;\n min-width: 200px;\n height: ${({ shouldHaveHight }) => shouldHaveHight && \"40px\"};\n padding-bottom: 22px;\n border-bottom: 1px solid #e6eaee;\n\n .react-dropdown-select-clear {\n font-size: 13px !important;\n text-transform: capitalize !important;\n font-weight: 700 !important;\n color: hsl(0, 0%, 70%) !important;\n line-height: unset !important;\n font-size: 0 !important; /* Hide the original \"×\" */\n position: relative;\n\n &::before {\n content: \"X\" !important; /* Customize with your desired character or symbol */\n font-size: 13px; /* Set the font size to make the \"X\" visible */\n color: inherit !important; /* Match the color to the current text color */\n position: absolute !important;\n top: -7px !important;\n left: -7px !important;\n }\n }\n\n .react-dropdown-select {\n min-height: 40px !important;\n height: 100% !important;\n width: 100%;\n border-radius: 4px;\n border: 1px solid #979797;\n box-shadow: none !important;\n border-color: #979797 !important;\n cursor: pointer;\n font-size: 12px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #5d5d5d;\n display: flex;\n align-items: center;\n /* overflow-x: hidden; */\n\n .react-dropdown-select-content {\n height: 100%;\n flex-wrap: nowrap;\n text-overflow: ellipsis;\n overflow-x: hidden;\n width: 70px;\n white-space: nowrap;\n\n input {\n font-size: 12px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #5d5d5d;\n }\n }\n\n .react-dropdown-select-dropdown {\n max-height: 150px;\n }\n\n .itemContainer {\n &:hover {\n background: #1568bf;\n\n .dropDownItem {\n color: #fff;\n }\n }\n\n .dropDownItem {\n font-size: 12px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #5d5d5d;\n }\n }\n }\n`;\n\nexport default SortSelectInputStyles;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport Select from \"react-dropdown-select\";\n\nimport itemRenderer from \"./itemRenderer\";\n\nimport SortSelectInputStyles from \"./SortSelectInput.styles\";\n\nimport {\n onChangeParam,\n getSelectedValue\n} from \"../selectInput/selectInput.services\";\nimport { isEmpty } from \"../../services/general.utils\";\nimport { useTranslation } from \"react-i18next\";\nimport { translateSort } from \"../../utils/translateSort\";\n\nconst SortSelectInput = ({\n value,\n selectedValues,\n disabled = false,\n getNameValue = false,\n onChange = () => {},\n handleChange,\n onBlur,\n name,\n defaultOption,\n customId,\n shouldHaveHight = true,\n options = [],\n placeholder = \"Select Item\",\n sortKey,\n sortOrder\n}) => {\n const { t } = useTranslation();\n\n const getValues = () => {\n if (defaultOption) {\n return [options[defaultOption]];\n }\n if (selectedValues && selectedValues.length > 0) {\n return value ? [getSelectedValue(selectedValues, value)] : undefined;\n }\n return [];\n };\n\n /**\n * Renders custom content for the dropdown selected value.\n * @param {object} props - Props from the dropdown library contentRender handler\n * @param {object} state - Current state of the dropdown content\n * @returns\n */\n const customContentRenderer = ({ props, state }) => {\n return state.values.length > 0 &&\n !isEmpty(sortKey) &&\n !isEmpty(sortOrder) ? (\n \n {item[labelField]}\n
\n \n {state.values[0].name}: {translateSort(sortOrder)}\n
\n ) : (\n t(\"sort_by\")\n );\n };\n\n return (\n \n handleDateChange(chosenDate)}\n minDate={new Date()}\n value={date}\n />\n\n disableUser()}\n margin=\"29px 0 0 0\"\n width=\"140px\"\n >\n {t(\"Submit\")}\n \n
\n {t(\"Disable User\")}
\n{t(\"choose_disabling_date\")}
\n{t(\"immediate_delete\")}
\n\n handleDateChange(chosenDate)}\n minDate={new Date()}\n value={date}\n />\n\n disableUsers()}\n margin=\"29px 0 0 0\"\n width=\"140px\"\n >\n {t(\"Submit\")}\n \n
\n \n {t(\"Disable\")} {t(text)}\n
\n\n {t(\"delete_employees\")} {t(text)} {t(\"to_be_deleted\")}\n
\n{t(\"immediate_delete\")}
\n\n {!isRowDisabled && (\n
\n handleExpand(e)}>\n redirectToUserHistoryPage(e, userId)}\n >\n \n \n {t(\"user_disabled\")}\n \n \n )}\n
\n \n {getInitals(fullName, isFirstLetter)}\n
\n {fullName !== \"\" ? fullName : \"Unknown\"}\n {isRowDisabled && (\n <>\n {roles}
\n {company}
\n {email}
\n \n {emailConfirmed ?
\n {isActionsEnabled && (\n <>\n \n {isEditActionVisable && (\n {\n e.stopPropagation();\n history.push(`users/edit/${userId}/${employeeId}`);\n }}\n >\n {t(\"Update\")}\n \n )}\n {isDisabledParam === \"true\" && (\n handleUserEnable(e, userId)}\n >\n {t(\"enable_user\")}\n \n )}\n {isResendVerificationEnabled && (\n resendVerificationLink(e, userId)}\n >\n {t(\"resend_ver_link\")}\n \n )}\n {isDeleteActionVisable &&\n shouldShowDeletePopup &&\n isDisabledParam === \"false\" && (\n \n handleDisableUserPopupOpen(e, userId)\n }\n >\n {t(\"Delete\")}\n \n )}\n
\n );\n }}\n border\n clickable\n />\n \n )}\n \n \n \n
\n )}\n \n \n );\n};\n\nexport default ListItem;\n","import styled from 'styled-components'\n\nconst CompaniesListItemStyles = styled.div`\n border-bottom: 1px solid #F0F0F0;\n padding: 12px 20px;\n display: flex;\n -moz-box-align: center;\n align-items: center;\n\n .nameCol {\n display: flex;\n align-items: center;\n width: 28%;\n font-family: 'Montserrat';\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n color: #5F5F5F;\n text-transform: capitalize;\n position: relative;\n \n .employeeAvatar {\n margin-left: 10px;\n min-width: 24px;\n min-height: 24px;\n border-radius: 12px;\n background: #1568bf;\n color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 10px;\n font-size: 12px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n text-align: center;\n text-transform: uppercase;\n }\n }\n\n .pib {\n width: 20%;\n font-family: 'Montserrat';\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n color: #777777;\n text-align: center;\n }\n\n .paymentDeadline {\n width: 16%;\n text-align: center;\n font-family: 'Montserrat';\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n color: #777777;\n text-align: center;\n }\n\n .email {\n width: 20%;\n margin: 0 0 0 9%;\n font-family: 'Montserrat';\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n color: #777777;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .actionsCol {\n width: 4%;\n display: flex;\n -moz-box-align: center;\n align-items: center;\n -moz-box-pack: center;\n justify-content: center;\n background: none;\n border: medium none;\n outline: currentcolor none medium;\n font-size: 16px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n color: rgb(143, 143, 143);\n cursor: pointer;\n position: relative;\n margin: 0px;\n padding: 0px;\n\n .tooltip {\n width: 180px;\n /* height: 107px; */\n background: #f7f7f7;\n border: 1px solid #1568bf !important;\n padding: 0;\n border-radius: 4px;\n padding: 0;\n }\n }\n\n .tooltipLink {\n text-decoration: none;\n width: 100%;\n height: 34px;\n }\n\n .tooltipContentWrapper {\n width: 100%;\n height: 100%;\n padding: 0;\n }\n\n .button {\n width: 100%;\n height: 34px;\n background: transparent;\n border: none;\n outline: none;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 16px;\n font-size: 11px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #8f8f8f;\n text-transform: capitalize;\n\n &:hover {\n background: #1568bf;\n color: #fff;\n }\n }\n\n .__react_component_tooltip {\n background: #f7f7f7 !important;\n opacity: 1 !important;\n padding: 0;\n width: 180px;\n border-radius: 4px;\n border: 1px solid rgb(21, 104, 191) !important;\n }\n\n .__react_component_tooltip.show {\n opacity: 1;\n visibility: visible;\n }\n\n .__react_component_tooltip.type-dark.border {\n border: 1px none blue;\n }\n\n .__react_component_tooltip.place-bottom:after {\n top: -7px !important;\n }\n\n .__react_component_tooltip.place-left::after {\n border-left: 8px solid #f7f7f7 !important;\n }\n\n .__react_component_tooltip.place-right::after {\n border-right: 8px solid #f7f7f7 !important;\n }\n\n .__react_component_tooltip.place-top::after {\n border-top: 8px solid #f7f7f7 !important;\n }\n\n .__react_component_tooltip.place-bottom::after {\n border-bottom: 8px solid #f7f7f7 !important;\n }\n\n .__react_component_tooltip.place-bottom:before {\n border-left: 9px solid transparent;\n border-right: 9px solid transparent;\n }\n\n .__react_component_tooltip.type-dark.border.place-bottom:before {\n border-bottom: 8px solid #1568bf !important;\n }\n`\n\nexport default CompaniesListItemStyles;\n","import styled from 'styled-components'\n\nconst CompaniesListItemExpandedStyles = styled.div`\n max-height: 800px;\n\n @keyframes expandListItem {\n from {\n transform: translateY(120px);\n height: 120px;\n opacity: 0;\n }\n to {\n transform: translateY(0);\n max-height: 800px;\n opacity: 1;\n }\n }\n\n .listItemExpanded {\n display: flex;\n width: 100%;\n background: rgb(255, 255, 255);\n height: 0;\n z-index: 2;\n max-height: 0;\n transition: max-height 0.15s ease-out;\n overflow: hidden;\n }\n\n\n .listItemExpanded.open {\n display: flex;\n width: 100%;\n background: rgb(255, 255, 255);\n z-index: 2; \n animation: expandListItem 0.4s ease-in;\n height: 180px;\n max-height: 2000px;\n transition: max-height 0.15s ease-out; \n transition-delay: 1s;\n transform-origin: center;\n padding: 12px 20px;\n }\n\n .idNumber {\n display: flex;\n align-items: flex-start;\n width: 25%;\n font-family: 'Montserrat';\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n color: #5F5F5F;\n flex-direction: column;\n justify-content: flex-start;\n margin-left: 30px;\n }\n\n .expandedListItemLabel {\n font-family: 'Montserrat';\n font-style: normal;\n font-weight: 500;\n font-size: 12px;\n color: #1D1D1D;\n }\n\n .expandedListItemDataContainer {\n display: flex;\n flex-direction: column;\n gap: 7px;\n margin-bottom: 10px;\n }\n\n .genderValue:first-letter {\n text-transform: uppercase;\n }\n\n .addressWrapper {\n width: 24%;\n display: flex;\n align-items: center;\n font-family: 'Montserrat';\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n color: #5F5F5F;\n flex-direction: column;\n justify-content: flex-start;\n }\n\n .contactWrapper {\n width: 11%;\n display: flex;\n align-items: center;\n font-family: 'Montserrat';\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n color: #5F5F5F;\n flex-direction: column;\n justify-content: flex-start;\n }\n\n .birthDayAndEnrolldateWrapper {\n width: 25%;\n display: flex;\n align-items: center;\n font-family: 'Montserrat';\n font-style: normal;\n font-weight: 400;\n font-size: 14px;\n color: #5F5F5F;\n flex-direction: column;\n justify-content: flex-start;\n margin-left: 3%;\n }\n`\n\nexport default CompaniesListItemExpandedStyles;\n","import React, { useState, useRef } from \"react\";\nimport ReactTooltip from \"react-tooltip\";\nimport { useHistory } from \"react-router-dom\";\nimport { toast } from \"react-toastify\";\n\n// Components\nimport { DotsIcon, UserDisabledIconSvg } from \"../../assets/Icons\";\nimport CompaniesListItemStyles from \"./CompaniesListItemStyles\";\nimport CompaniesListItemExpandedStyles from \"./CompaniesListItemExpandedStyles\";\nimport ChevronIconDownSvg from \"../../assets/Icons/ChevronIconDownSvg\";\n\n// Services\nimport getInitals from \"../../services/getInitals\";\nimport { isEmpty } from \"../../services/general.utils\";\nimport { apiService } from \"../../services/api/api.service\";\nimport { useTranslation } from \"react-i18next\";\n\nconst CompaniesListItem = ({\n companyId,\n companyName,\n isFirstLetter = false,\n pib,\n paymendDeadline,\n invoiceEmail,\n isActionsEnabled = true,\n isEditActionVisable = true,\n isDeleteActionVisable = true,\n idNumber,\n address,\n contact,\n tags,\n fetchData = () => {}\n}) => {\n const { t } = useTranslation();\n const [isActive, setIsActive] = useState(false);\n const [isOpen, setIsOpen] = useState(false);\n const myTooltip = useRef();\n const history = useHistory();\n\n const onClickDots = () => {\n setIsActive(true);\n ReactTooltip.rebuild();\n };\n\n const handleBlur = () => {\n setIsActive(false);\n ReactTooltip.rebuild();\n };\n\n const handleExpand = event => {\n event.preventDefault();\n event.stopPropagation();\n setIsOpen(!isOpen);\n };\n\n return (\n \n
\n \n {t(\"Gender\")}\n \n {!isEmpty(employeeData) && !isEmpty(employeeData.gender)\n ? employeeData.gender\n : \"-\"}\n \n
\n \n {t(\"Locations\")}\n \n {!isEmpty(employeeData) && !isEmpty(employeeData.cities)\n ? employeeData.cities.map(l => l.name).join(\", \")\n : \"-\"}\n \n
\n \n
\n \n
\n \n \n {t(\"Birth date\")}\n \n \n {!isEmpty(employeeData) && !isEmpty(employeeData.bornDate)\n ? formatDateForPlaceholder(employeeData.bornDate)\n : \"-\"}\n \n
\n \n \n {t(\"Enroll date\")}\n \n \n {!isEmpty(employeeData) &&\n !isEmpty(employeeData.firstDayAtWork)\n ? formatDateForPlaceholder(employeeData.firstDayAtWork)\n : \"-\"}\n \n
\n \n
\n \n
\n \n {t(\"Team\")}\n \n {!isEmpty(employeeData) && !isEmpty(employeeData.team)\n ? employeeData.team\n : \"-\"}\n \n
\n \n \n {t(\"Relationship\")}\n \n \n {!isEmpty(employeeData) &&\n !isEmpty(employeeData.relationship)\n ? employeeData.relationship\n : \"-\"}\n \n
\n \n
\n \n {t(\"Contact\")}\n \n {!isEmpty(employeeData) && !isEmpty(employeeData.contact)\n ? employeeData.contact\n : \"-\"}\n \n
\n handleExpand(e)}>\n \n {\n e.stopPropagation();\n onClickDots();\n }}\n onBlur={() => handleBlur()}\n >\n (myTooltip.current = ref)}\n className=\"tooltip\"\n getContent={dataTip => {\n if (!dataTip) {\n return \"\";\n }\n const [companyId, companyName] = dataTip.split(\"|\");\n\n return (\n \n \n {isOpen && (\n \n
\n );\n};\n\nexport default CompaniesListItem;\n","const employeeActiveBenefitsTableHead = [\n {\n id: 1,\n headName: \"Name\",\n isSortedUp: false,\n width: \"29%\",\n justifyContent: \"flex-start\"\n },\n {\n id: 2,\n headName: \"Provider\",\n isSortedUp: false,\n width: \"23%\",\n justifyContent: \"flex-start\"\n },\n {\n id: 3,\n headName: \"Benefit Group\",\n isSortedUp: false,\n width: \"25%\",\n justifyContent: \"flex-start\"\n },\n {\n id: 4,\n headName: \"Price\",\n isSortedUp: false,\n width: \"10%\",\n justifyContent: \"flex-start\",\n margin: \"0\"\n },\n {\n id: 5,\n headName: \"Expiration\",\n isSortedUp: false,\n width: \"10%\",\n justifyContent: \"flex-start\",\n margin: \"\"\n }\n];\n\nexport default employeeActiveBenefitsTableHead;\n","import styled from \"styled-components\";\n\nconst EmployeeActiveBenefitsStyles = styled.div`\n margin: 12px;\n background: whitesmoke;\n max-height: 350px;\n overflow-y: scroll;\n\n .tableHeadActiveBenefits {\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid #94abd1;\n border-top: 1px solid #f0f0f0;\n background: ${({ backgroundOpen }) => backgroundOpen || \"#FFF\"};\n }\n\n .employeeActiveBenefitStyle {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n justify-content: space-between;\n padding: 12px;\n margin-bottom: 2px;\n background: ${({ backgroundOpen }) => backgroundOpen || \"#FFF\"};\n border: 1px solid ${({ backgroundOpen }) => backgroundOpen || \"#FFF\"};\n }\n .name {\n width: 29%;\n }\n\n .provider {\n width: 23%;\n }\n\n .benefitGroup {\n width: 25%;\n }\n\n .tokens {\n width: 10%;\n img {\n width: 16px;\n height: 16px;\n }\n }\n\n .expiration {\n width: 10%;\n }\n\n h4 {\n font-family: Montserrat;\n font-size: 10px;\n font-weight: 500;\n line-height: 12px;\n letter-spacing: 0px;\n text-align: left;\n color: #1d1d1d;\n margin-bottom: 4px;\n display: none;\n }\n\n .content {\n display: flex;\n align-items: center;\n gap: 8px;\n font-family: Montserrat;\n font-size: 14px;\n font-weight: 400;\n line-height: 16px;\n letter-spacing: 0px;\n text-align: left;\n color: #5f5f5f;\n\n span {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: #3166b9;\n }\n\n p {\n width: calc(100% - 18px);\n }\n }\n\n @media screen and (max-width: 1280px) {\n h4 {\n display: block;\n }\n }\n\n @media screen and (max-width: 1024px) {\n .name {\n width: 36%;\n }\n\n .provider {\n width: 30%;\n }\n\n .benefitGroup {\n width: 30%;\n }\n\n .tokens {\n width: 100%;\n }\n }\n\n @media screen and (max-width: 500px) {\n margin-bottom: 0;\n\n .employeeActiveBenefitStyle {\n padding: 12px 0;\n margin-bottom: 10px;\n }\n\n .content {\n margin-bottom: 12px;\n }\n .name {\n width: 100%;\n }\n\n .provider {\n width: 48%;\n }\n\n .benefitGroup {\n width: 48%;\n }\n\n .tokens {\n width: 30%;\n }\n\n .expiration {\n width: 70%;\n }\n }\n`;\nexport default EmployeeActiveBenefitsStyles;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n\n// Components\nimport { Table, TableHead } from \"../..\";\nimport { TokenIcon } from \"../../../assets/Icons\";\n\n// Services\nimport { isEmpty } from \"../../../services/general.utils\";\nimport useWindowDimensions from \"../../../hooks/useWindowDimensions\";\n\n// Config builders\nimport employeeActiveBenefitsTableHead from \"../../../pages/HrPages/EmployeePages/userBenefits.tableHeader\";\n\n// Styles\nimport EmployeeActiveBenefitsStyles from \"./EmployeeActiveBenefitsStyles\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n transformTokenCurrencyIcons,\n transformTokensToRsd\n} from \"../../../utils/transformTokensToRsd\";\n\nconst EmployeeActiveBenefits = ({ singleEmployee, backgroundOpen }) => {\n const { t } = useTranslation();\n const { width } = useWindowDimensions();\n\n return (\n !isEmpty(singleEmployee?.userBenefits) && (\n \n
\n \n {getInitals(companyName, isFirstLetter)}\n
\n {companyName !== \"\" ? companyName : \"Unknown\"}\n {pib}
\n {paymendDeadline}
\n {invoiceEmail}
\n {isActionsEnabled && (\n <>\n \n {isEditActionVisable && (\n {\n e.stopPropagation();\n history.push(`companies/edit/${companyId}`);\n }}\n >\n {t(\"Update\")}\n \n )}\n {isDeleteActionVisable && (\n {\n e.stopPropagation();\n if (companyId) {\n const result = confirm(t(\"delete_company_alert\"));\n if (result) {\n const response = await apiService.delete(\n `/company/delete/${companyId}`\n );\n if (response.hasError) {\n return toast.error(\n t(\"failed_to_delete_company\")\n );\n }\n\n fetchData();\n }\n }\n }}\n >\n {t(\"Delete\")}\n \n )}\n
\n );\n }}\n border\n clickable\n />\n \n )}\n \n
\n )}\n \n
\n \n {t(\"id_num\")}\n \n {!isEmpty(idNumber) ? idNumber : \"-\"}\n \n
\n \n
\n \n {t(\"Address\")}\n {!isEmpty(address) ? address : \"-\"}\n
\n \n
\n \n
\n \n {t(\"Contact\")}\n {!isEmpty(contact) ? contact : \"-\"}\n
\n \n
\n \n
\n \n {t(\"Tags\")}\n \n {!isEmpty(tags)\n ? tags.map(tag => tag.name).join(\", \")\n : \"-\"}\n \n
\n \n
\n )\n )}\n \n
\n {t(\"benefit_name\")}
\n\n \n
\n {title}
\n\n
\n {t(\"Provider\")}
\n{benefitGroup.provider.name}
\n \n
\n {t(\"Benefit Group\")}
\n{benefitGroup.name}
\n \n
\n {t(\"Price\")}
\n\n {transformTokenCurrencyIcons()}\n
\n {transformTokensToRsd(benefitPrice * quantity)}
\n\n
\n {t(\"Expiration\")}
\n{expiration}
\n \n
\n \n {!isRowDisabled && (\n
\n handleExpand(e)}>\n {\n e.stopPropagation();\n onClickDots();\n }}\n onBlur={() => handleBlur()}\n >\n (myTooltip.current = ref)}\n className=\"tooltip\"\n getContent={dataTip => {\n if (!dataTip) {\n return \"\";\n }\n const [userId, isDisabledParam, employeeId] = dataTip.split(\n \"|\"\n );\n\n return (\n
\n \n \n \n {t(\"User is disabled\")}\n \n \n )}\n
\n \n {getInitals(fullName, isFirstLetter)}\n
\n {fullName !== \"\" ? fullName : \"Unknown\"}\n {isRowDisabled && (\n <>\n {tier}
\n \n {transformTokenCurrencyIcons()}\n {transformTokensToRsd(remainingTokens)}/\n {transformTokensToRsd(tokens)}\n
\n {budgetSpentPercentage}
\n \n {isVerified ?
\n {userEmail}
\n {isActionsEnabled && (\n <>\n \n {isEditActionVisable && (\n {\n e.stopPropagation();\n history.push(`/employees/edit/${employeeId}`);\n }}\n >\n {t(\"Edit\")}\n \n )}\n {\n {\n e.stopPropagation();\n openAddBonusModal(\n {\n title: \"Add Bonuses\",\n selectName: \"employee\"\n },\n Number(employeeId)\n );\n }}\n >\n {t(\"add_bonus_budget\")}\n \n }\n {isDisabledParam === \"true\" && (\n handleUserEnable(e, userId)}\n >\n {t(\"enable_user\")}\n \n )}\n {isResendVerificationEnabled && (\n \n resendVerificationLink(e, userId)\n }\n >\n {t(\"resend_ver_link\")}\n \n )}\n {isDeleteActionVisable &&\n shouldShowDeletePopup &&\n isDisabledParam === \"false\" && (\n \n handleDisableUserPopupOpen(e, userId)\n }\n >\n {t(\"Delete\")}\n \n )}\n
\n );\n }}\n border\n clickable\n />\n \n )}\n handleExpand(e)}>\n
\n \n\n \n Tier\n {tier}\n
\n \n Budget\n \n {transformTokenCurrencyIcons()}\n {transformTokensToRsd(remainingTokens)}/\n {transformTokensToRsd(tokens)}\n \n
\n \n Spent %\n {budgetSpentPercentage}\n
\n \n {t(\"Verified\")}\n \n {isVerified ?
\n \n \n
\n ) : (\n \n
\n {isLoading ? (\n \n
\n \n Email\n {!isEmpty(userEmail) ? userEmail : \"-\"}\n
\n \n {t(\"Gender\")}\n \n {!isEmpty(gender) ? gender : \"-\"}\n \n
\n \n \n {t(\"locations\")}\n \n \n {!isEmpty(cities)\n ? cities.map(l => l.name).join(\", \")\n : \"-\"}\n \n
\n \n
\n \n \n {t(\"Birth date\")}\n \n \n {!isEmpty(bornDate)\n ? formatDateForPlaceholder(bornDate)\n : \"-\"}\n \n
\n \n \n {t(\"Enroll date\")}\n \n \n {!isEmpty(firstDayAtWork)\n ? formatDateForPlaceholder(firstDayAtWork)\n : \"-\"}\n \n
\n \n
\n \n {t(\"Team\")}\n {!isEmpty(team) ? team : \"-\"}\n
\n \n \n {t(\"Relationship\")}\n \n \n {!isEmpty(relationship) ? relationship : \"-\"}\n \n
\n \n \n {t(\"Enroll date\")}\n \n \n {!isEmpty(firstDayAtWork)\n ? formatDateForPlaceholder(firstDayAtWork)\n : \"-\"}\n \n
\n \n
\n \n {t(\"Bonuses\")}\n {!isEmpty(bonusAmount) ? bonusAmount : \"-\"}\n
\n \n
\n \n {t(\"Spent(%)\")}\n \n {!isEmpty(budgetSpentPercentage)\n ? budgetSpentPercentage\n : \"-\"}\n \n
\n \n {t(\"Bonuses\")}\n {!isEmpty(bonusAmount) ? bonusAmount : \"-\"}\n
\n \n {t(\"Contact\")}\n {!isEmpty(contact) ? contact : \"-\"}\n
\n \n \n {t(\"Birth date\")}\n \n \n {!isEmpty(bornDate)\n ? formatDateForPlaceholder(bornDate)\n : \"-\"}\n \n
\n }\n {isDeleteActionVisable &&\n !shouldShowDeletePopup &&\n isRowDisabled === \"false\" && (\n
\n \n \n User is disabled\n \n \n )}\n
\n \n {getInitals(columnOne, isFirstLetter)}\n
\n {columnOne !== \"\" ? columnOne : \"Unknown\"}\n {isRowDisabled && (\n <>\n {columnTwo}
\n\n {tokens}\n {columnThree !== undefined && tokens !== undefined && \"/\"}\n {columnThree}\n
\n{columnFour}
\n \n{columnFive}
\n{columnSix}
\n {isActionsEnabled && (\n <>\n{t(tableHeadColName)}
\n {isSortable && (\n \n\n\t\t\t\n\t\t\t onChange(rowId, e.target.name, e.target.value)}\n\t\t\t\tclassName=\"inputsTest\"\n\t\t\t\tid={`input1${rowId}`}\n\t\t\t\tvalue={tier}\n\t\t\t/>\n\t\t
\n\t\t\n\t\t\t onChange(rowId, e.target.name, Number(e.target.value))}\n\t\t\t\tclassName=\"inputsTest\"\n\t\t\t\tid={`input2${rowId}`}\n\t\t\t\tvalue={tokens}\n\t\t\t/>\n\t\t
\n\t\t{tokens}
\n\t\t\t\n\t\t\t onChange(rowId, e.target.name, Number(e.target.value))}\n\t\t\t\tclassName=\"inputsTest\"\n\t\t\t\tid={`input3${rowId}`}\n\t\t\t\tvalue={tierUsers}\n\t\t\t/>\n\t\t
\n\t\t{tierUsers}
\n\t\t\t\n\t\t\t onChange(rowId, e.target.name, e.target.value)}\n\t\t\t\tclassName=\"inputsTest\"\n\t\t\t\tid={`input4${rowId}`}\n\t\t\t\tvalue={description}\n\t\t\t/>\n\t\t
\n\t\t{description}
\n\t\t\t\n\t\t\t
\n\t\n
\n ) : (\n \n })
\n
\n \n
\n Powered by
\n404
\n{t(\"404_desc\")}
\n \n\n \n
\n );\n};\n","import React, { useRef, useState } from \"react\";\nimport BenefitCardStyles from \"../../benefitCard/BenefitCardStyles\";\nimport { truncate } from \"../../../services/truncateString\";\nimport { FlagCurrency } from \"../../../assets/Icons\";\nimport moment from \"moment\";\n\nexport const March8Cards = props => {\n const {\n card,\n data,\n handleSelect,\n selectedDataBudget,\n budgetData,\n priceless,\n disabled,\n getDataForUnsubscribe\n } = props;\n\n const budgetRef = useRef(null);\n const [inputValue, setInputValue] = useState(\"\");\n\n const handleSelectCard = () => {\n const currentDate = moment();\n const deadline = moment(\"2025-03-15\");\n\n if (currentDate.isAfter(deadline)) return;\n\n handleSelect({\n cardId: card.id,\n price: priceless ? card.price : inputValue,\n cardDescription: card.title,\n customProvider: priceless\n });\n };\n\n const debouncedChange = e => {\n const value = parseFloat(e.target.value);\n if (value < 0) return;\n\n if (value > budgetData.totalBudget - budgetData.spentBudget) {\n budgetRef.current.value = (\n budgetData.totalBudget - budgetData.spentBudget\n ).toString();\n } else {\n budgetRef.current.value = e.target.value;\n }\n\n setInputValue(budgetRef.current.value);\n };\n\n const selectedIds = selectedDataBudget.map(item => item.cardId);\n const selectedBudgetCard = selectedDataBudget.find(\n item => item.cardId === card.id\n );\n\n const handleUnsubScribe = cardId => {\n getDataForUnsubscribe(cardId);\n };\n\n return (\n Srećan 8. mart!
\n\n
\n \n \n \n
\n \n
\n \n
\n \n
\n {card.title}
\n\n
\n {card.category}
\n\n
\n \n {truncate(card.description, 89)}\n
\n\n
\n {card.location}
\n\n
\n \n \n {selectedIds.includes(card.id) ? (\n
\n \n {!priceless ? (\n <>\n <>\n
\n ) : (\n \n {selectedBudgetCard.price}\n
\n\n {!priceless && (\n \n Pretplati se\n \n )}\n
\n )}\n \n Draga {vocativeName || firstName}, u vidu poklona za 8. mart, priredili\n smo Vam sledeća iskustva koje možete izabrati.\n
\n\n \n \n Ukupan Budžet: {budgetData.totalBudget}\n \n \n )}\n
\n \n
\n {customBudgetData.length > 0 && (\n \n
\n \n
\n \n
\n \n setMaskedNewPassword(!maskedNewPassword)}\n alt=\"masked\"\n style={{\n position: \"absolute\",\n cursor: \"pointer\",\n right: -30\n }}\n />\n
\n \n\n \n
\n\n \n
\n \n \n {t(\"forgot_password\")}\n \n
\n \n \n
\n \n \n \n {/* */}\n setIsBenefitLogin(false)}>{t(\"go_back\")}
\n \n
\n \n
\n \n {/* */}\n \n
\n \n
\n \n \n \n {t(\"go_back\")}\n \n
\n \n \n
\n \n
\n \n setMaskedNewPassword(!maskedNewPassword)}\n alt=\"masked\"\n style={{\n position: \"absolute\",\n cursor: \"pointer\",\n right: -30\n }}\n />\n
\n \n\n \n\n \n
\n \n \n \n \n \n \n Login\n \n
\n \n \n \n GET COMBINATIONS\n \n\n resetData()}\n >\n Reset\n \n
\n \n
\n Submited combinations
\n{data.combinations}
\n \n
\n \n Unique combinations
\n{data.unique}
\n\n
\n \n
\n Welcome to Benefiti!
\n\n Thank you for confirming your email.\n
\n\n Please set your password in order to login to the platform!\n
\n\n\n \n Set Password\n \n
\n \n \n \n
\n\n \n
\n \n I agree with{\" \"}\n
\n and the{\" \"}\n
\n {errors.termsAndPolicy && touched.termsAndPolicy\n ? errors.termsAndPolicy\n : \"\"}\n
\n \n
\n \n
\n\n
\n OBAVEŠTENJE O PRIVATNOSTI
\n\n1. Datum izdavanja Obaveštenja o privatnosti
\n\n Ovo Obaveštenje o privatnosti (\n Obaveštenje\n ) je izdato 25.02.2021. godine.\n
\n2. Svrha obaveštavanja
\n\n \n Ovim Obaveštenjem želimo da Vam na lako razumljiv i transparentan\n način pružimo informacije o tome na koji način SBT obrađuje podatke\n o ličnosti lica na koja se podaci odnose, koje kategorije podataka o\n ličnosti obrađuje SBT i koja prava imaju lica na koja se podaci\n odnose. Obrađujemo Vaše podatke o ličnosti u ime kompanija sa kojima\n sarađujemo (\n \n Klijenti\n ) kako bismo:\n
\n- \n
- \n \n 1. mogli da svojim Klijentima omogućimo sve prednosti korišćenja\n naše softverske platforme Benefiti.rs (\n \n Platforma\n \n ), preko koje oni u svojstvu poslodavca i rukovaoca u obradi\n podataka o ličnosti svojim zaposlenima (\n \n Krajnji korisnici\n \n ) obezbeđuju personalizovane, fleksibilne i merljive benefite i\n podsticaje u okviru svog predefinisanog budžeta (\n \n Benefiti\n );\n \n
- \n \n 2. omogućili Klijentima isporučivanje odabranih Benefita Krajnjim\n korisnicima. \n \n \n
\n \n Sve podatke o ličnosti navedene u ovom Obaveštenju obrađujemo i\n štitimo u potpunosti u skladu sa srpskim Zakonom o zaštiti podataka\n o ličnosti (ZZPL) i Opštom uredom o zaštiti podataka o ličnosti\n (GDPR), a isključivo na osnovu pismenih uputstava Klijenta kao\n rukovaoca.\n \n
\n- \n
- \n \n Podatak o ličnosti predstavlja svaki podatak koji se odnosi na\n fizičko lice čiji je identitet određen ili odrediv, kao što su\n lično ime, godište, fotografija ili lokacija. Podaci koji su\n anonimizovani se ne smatraju ličnim podacima.\n \n \n
- \n
- \n \n Obrada predstavlja svaku radnju ili skup radnji koje se vrše sa\n podacima o ličnosti ili njihovim skupovima (npr. prikupljanje,\n skladištenje, upotreba, umnožavanje, objavljivanje, brisanje ili\n uništavanje).\n \n \n
3. Izmene i dopune
\n\n \n Ovo je poslednja verzija Obaveštenja (25. februar 2021. godine).\n \n
\n\n \n SBT ima puno pravo da u bilo kom momentu izmeni ovo Obaveštenje. U\n slučaju da se Obaveštenje menja ili dopunjuje, unećemo datum\n poslednje verzije dokumenta. O svakoj promeni Obaveštenja ćemo Vas\n blagovremeno obavestiti. Molimo Vas da imate na umu činjenicu da\n izmene i dopune ovog Obaveštenja ne utiču ni na koji način na\n Obaveštenje o privatnosti koje je sačinio Klijent ili bilo koja\n treća strana povodom Platforme, odnosno Benefita.\n \n
\n4. O nama
\n\n \n U ovom Obaveštenju, ,,SBT’’, ,,mi’’ i ,,naši’’ upućuje na Smart\n Benefit Technologies d.o.o. Beograd, sa sedištem u ul. Takovska br.\n 12, Beograd-Palilula, Republika Srbija.\n \n
\n\n \n SBT postupa isključivo u svojstu obrađivača\n \n u obradi Vaših podataka o ličnosti:\n
\n- \n
- \n \n Kada u ime Klijenata kao rukovaoca obrađujemo podatke Krajnjih\n korisnika koje Klijenti i Krajni korisnici ostavljaju na\n Platformi;\n \n \n
- \n \n Kada u ime Klijenata kao rukovalaca obrađujemo podatke o ličnosti\n Krajnjih korisnika koje nam dostave Klijenti kako bismo omogućili\n Klijentima isporučivanje odabranih Benefita Krajnjim korisnicima.\n Ovo u ime Klijenata koji su nas u ovu svrhu angažovali činimo u\n vidu kupovine Benefita od svojih poslovnih partnera (\n \n Partneri\n \n ) i prenosa prava na njima Klijentima, budući da Klijenti nemaju\n mogućnost da samostalno isporuče odabrane Benefite Krajnjim\n korisnicima. Na ovaj način, SBT omogućava svojim Klijentima da u\n njihovo ime, a na osnovu zaključenog ugovora o poslovnoj saradnji\n povodom omogućavanja isporučivanja odabranih Benefita Krajnjim\n korisnicima da na najbrži i najefikasniji mogući način to i\n ostvare.\n \n \n
\n \n Klijenti su rukovaoci u obradi Vaših podataka o ličnosti s obzirom\n na to da oni utvrđuju svrhu i način na koji se Vaši podaci o\n ličnosti prikupljaju, upotrebljavaju i na drugi način obrađuju, a mi\n u njihovo ime pružamo usluge korišćenja Platforme, odnosno usluge\n omogućavanja isporučivanja odabranih Benefita Krajnjim korisnicima.\n \n
\n\n \n Druga obaveštenja o privatnosti na Platformi\n \n
\n\n \n Klijent kao rukovalac u obradi Vaših podataka o ličnosti sačinio je\n zasebno obaveštenje o privatnosti u skladu sa svojom zakonskom\n obavezom na osnovu ZZPL-a, koje Vam je dostupno prilikom logovanja\n na našu Platformu. SBT ne može ni na koji način biti odgovoran licu\n na koje se podaci odnose u slučaju da je rukovalac u svom\n obaveštenju o privatnosti propustio da informiše lica na koja se\n podaci odnose o bilo kojim okolnostima koje je bio dužan da\n transparentno predoči u svom obaveštenju o privatnosti.\n \n
\n\n \n Pitanja, pritužbe i dodatne informacije u vezi sa ovim Obaveštenjem\n i zaštitom podataka o ličnosti kod SBT-a možete dobiti putem sledeće\n imejl adrese: gdpr@benefiti.rs\n .\n \n
\n5. Podaci o ličnosti koje prikupljamo
\n\n \n \n Na osnovu ugovora o poslovnoj saradnji sa Klijentima povodom\n korišćenja Platforme\n \n \n
\n- \n
- \n \n A. Omogućavanje korišćenja Platforme i obuka za korišćenje\n Platforme\n \n \n
\n \n Kada Klijenti koriste našu Platformu radi omogućavanja svojim\n zaposlenima kao Krajnjim korisnicima odabir Benefita, uvid u status\n odabranih Benefita, odnosno upravljanje njima, obezbeđujući im\n pritom različita prava na njoj u zavisnosti od svog svojstva u\n kompaniji Klijenta (admin, HR, zaposleni), obrađujemo u ime\n Klijenata podatke o ličnosti Krajnjih korisnika.\n \n
\n\n \n Pored toga, SBT u ime Klijenata obrađuje podatke o ličnosti Krajnjih\n korisnik i u svrhe obučavanja za korišćenje Platforme Krajnjih\n korisnika koji će Platformu koristiti u zavisnosti od obima\n dodeljenih im prava od strane Klijenata.\n \n
\n\n \n Podaci o ličnosti koje tada prikupljamo uključuju, ali se ne\n ograničavaju na sledeće kategorije podataka o ličnosti:\n \n
\n- \n
- \n \n Podaci o ličnoj identifikaciji,\n \n kao što su: ime i prezime, datum rođenja, pol;\n \n
- \n \n Kontakt podaci\n \n \n , kao što su: poslovna imejl adresa, privatna imejl adresa, broj\n poslovnog i privatnog fiksnog ili mobilnog telefona;\n \n \n
- \n \n Podaci o radnom mestu\n \n \n : tačan naziv i pozicija koju Krajnji korisnik ima u kompaniji\n Klijenta, datum početka rada kod Klijenta, hijerarhijski nivo kod\n Klijenta (npr. Junior, Medior, Senior, itd.), opseg prava koja\n Krajnji korisnik ima na Platformi u odnosu na svoju poziciju u\n kompaniji Klijenta (npr. Admin, HR, zaposleni), naziv tima u kome\n se Krajnji korisnik nalazi;\n \n \n
- \n \n Podaci o ličnom statusu, \n \n kao što je bračni status;\n \n
- \n \n \n Podaci o aktivnom nalogu Krajnjeg korisnika na različitim\n elektronskim digitalnim servisima\n \n \n \n , na primer onda kada Krajnji korisnik odabere Benefite koje\n omogućavaju pružaoci usluga digitalnog servisa;\n \n \n
- \n \n Podatak o jedinstvenom korisničkom kodu\n \n ,\n \n koji SBT generiše za Krajnjeg korisnika u slučaju da izabrani\n Benefit predstavlja vaučer/kupon/kod;\n \n \n
- \n \n \n Podaci o potrošačkim navikama i interesovanjima Krajnjih\n korisnika\n \n \n \n , kao što je izbor konkretnih Benefita prilikom korišćenja\n Platforme;\n \n \n
- \n \n Podaci o kulturnom identitetu Krajnjih korisnika\n ;\n \n \n
- \n Podaci o društvenom identitetu Krajnjih korisnika\n ;\n \n
- \n \n Podaci o fiziološkom identitetu Krajnih korisnika\n \n ;\n \n
- \n \n Podaci o mentalnom identitetu Krajnjih korisnika\n \n ;\n \n
- \n \n Ostali podaci o korišćenju Platforme\n \n \n , kao su podaci dobijeni na osnovu uvida u aktivnosti na\n korisničkom nalogu Krajnjeg korisnika (broj tokena koji je\n Krajnjem korisniku raspoloživ, trenutni status raspoloživog broja\n tokena i promena broja tokena u odnosu na raspoloživost), kao i\n podaci o ostvarenim Benefitima.\n \n \n
\n \n SBT u ovom slučaju obrađuje navedene podatke o ličnosti u svojstvu\n obrađivača podataka o ličnosti kako bismo omogućili Klijentima\n korišćenje Platforme u punom obimu, a na osnovu zaključenog ugovora\n sa Klijentima o poslovnoj saradnji u vidu korišćenja Platforme.\n \n
\n- \n
- \n B. Tehnička podrška\n \n
\n \n SBT kao obrađivač u ime Klijenta takođe obrađuje informacije o\n korisničkim sesijama (kao što su greške pri učitavanju i vreme\n odziva), kao i podatke u vezi sa komunikacijom sa korisničkom\n podrškom putem telefona, imejla i pisanim putem tj. u vezi a upitima\n koje Krajnji korisnici podnose (kanal komunikacije, vrsta upita,\n datum, vreme, sadržaj). Navedene podatke obrađujemo kako bismo\n Klijentima pružili korisničku podršku sa ciljem nesmetanog\n korišćenja Platforme, a na osnovu ugovora o poslovnoj saradnji\n povodom korišćenja Platforme, koji obuhvata i pružanje tehničke\n podrške od strane SBT-a.\n \n
\n\n \n \n Na osnovu ugovora o poslovnoj saradnji sa Klijentima povodom\n omogućavanja isporučivanja odabranih Benefita Krajnjim korisnicima\n \n \n
\n- \n
- \n \n C. Omogućavanje isporučivanja odabranih Benefita Krajnjim\n korisnicima\n \n \n
\n \n Kako bismo Klijentima mogli da omogućimo isporučivanje odabranih\n Benefita Krajnjim korisnicima u ime Klijenata u ovu svrhu za koju\n smo angažovani obrađujemo podatke o ličnosti Krajnjih korisnika koje\n nam dostave Klijenti koji se odnose, ali ne ograničavaju na sledeće\n kategorije podataka o ličnosti:\n \n
\n- \n
- \n \n Podaci o ličnoj identifikaciji\n \n , kao što su: ime i prezime, datum rođenja, pol;\n \n
- \n \n Kontakt podaci\n \n \n , kao što su: poslovna imejl adresa, privatna imejl adresa, broj\n poslovnog i privatnog fiksnog ili mobilnog telefona;\n \n \n
- \n \n Podaci o radnom mestu\n \n \n : tačan naziv i pozicija koju Krajnji korisnik ima u kompaniji\n Klijenta, datum početka rada kod Klijenta, hijerarhijski nivo kod\n Klijenta (npr. Junior, Medior, Senior, itd.), opseg prava koja\n Krajnji korisnik ima na Platformi u odnosu na svoju poziciju u\n kompaniji Klijenta (npr. Admin, HR, zaposleni), naziv tima u kome\n se Krajnji korisnik nalazi;\n \n \n
- \n \n \n Podaci o aktivnom korisničkom nalogu Krajnjeg korisnika\n \n \n \n {\" \"}\n na različitim elektronskim digitalnim servisima, na primer onda\n kada Krajnji korisnik odabere Benefite koje omogućavaju pružaoci\n usluga digitalnog servisa;\n \n \n
- \n \n Podatak o jedinstvenom korisničkom kodu\n \n \n , koji SBT generiše za Krajnjeg korisnika u slučaju da izabrani\n Benefit predstavlja vaučer/kupon/kod.\n \n \n
\n \n SBT kao obrađivač podataka o ličnosti Krajnjih korisnika posebno\n napominje i ističe da postupa u svojstvu obrađivača podataka o\n ličnosti Krajnjih korisnika koji se odnose na aktivni korisnički\n nalog na različitim elektronskim digitalnim servisima isključivo i\n jedino onda kada ove podatke obrađuje na osnovu pismenih uputstava\n rukovaoca u momentu kada je Krajnji korisnik lice zaposleno kod\n rukovaoca. SBT ne snosi odgovornost za obradu ovakvih podataka\n ukoliko je do obrade došlo na osnovu instrukcije rukovaoca nakon što\n je lice na koje se podaci odnose prestalo da bude zaposleno u\n kompaniji Klijenta, budući da SBT ne može i nije dužan samostalno da\n proverava status lica na koje se podaci odnose u kompaniji Klijenta.\n \n
\n6. Svrha obrade i pravni osnov za obradu
\n\n \n Klijent kao rukovalac u obradi Vaših podataka o ličnosti određuje\n svrhu i pravni osnov na osnovu kojeg se vrši obrada Vaših podataka o\n ličnosti. Obrada podataka se najčešće vrši na osnovu potpisanog\n ugovora o radu, na osnovu legitimnog interesa rukovaoca ili onda\n kada je obrada neophodna u cilju zaštite životno važnih interesa\n lica na koje se podaci odnose ili drugog fizičkog lica.\n \n
\n\n \n Ako imate pitanja u vezi sa svrhom ili pravnim osnovom na osnovu\n kojeg Klijent kao rukovalac u obradi Vaših podataka obrađuje Vaše\n podatke o ličnosti ili Vam trebaju dodatne informacije u vezi sa\n ovim, molimo da se obratite Klijentu tj. Vašem poslodavcu kao\n rukovaocu u obradi Vaših podataka o ličnosti.\n \n
\n\n7. Platforma
\n\n \n Naša Platforma na osnovu Vašeg pristanka prikuplja određene podatke\n o ličnosti svih korisnika Platforme uz pomoć tehnologija koje\n Platforma koristi (\n \n \n cookies/trackers\n \n \n ) i skladišti ih na datotekama. Ukoliko želite da saznate više\n detalja o tome, uključujući to koje tačno podatke o ličnosti\n prikupljamo tom prilikom, molimo Vas da pročitate našu{\" \"}\n \n \n \n Politiku Platforme.\n \n \n
\n8. Rok čuvanja
\n\n \n Sa jedne strane, onda kada Klijentima omogućavamo korišćenje naše\n Platforme i sa njom povezanih aktivnosti SBT čuva Vaše podatke o\n ličnosti tokom trajanja korišćenja Platforme od strane Klijenata i\n nakon toga tokom određenog vremenskog perioda kako bi se Klijentima\n u svojstvu rukovalaca omogućilo da povrate korisničke naloge\n Krajnjih korisnika. Nakon što profil Krajnjeg korisnika postane\n deaktiviran bez obzira na razlog za deaktiviranje od strane Krajnjeg\n korisnika, Klijent će doneti odluku o tome da se takvi podaci o\n ličnosti izbrišu ili anonimizuju, osim ako je zakonom propisana\n obaveza čuvanja podataka, a SBT će postupiti u skladu sa dobijenom\n instrukcijom.\n \n
\n\n \n Sa druge strane, kada obrađujemo Vaše podatke o ličnosti kako bismo\n Klijentima omogućili isporučivanje odabranih Benefita Krajnjim\n korisnicima, SBT čuva Vaše podatke o ličnosti u strogo ograničenom\n vremenskom intervalu, koji obuhvata period od momenta kupovine\n Benefita od Partnera do momenta prenosa prava na Benefitima\n Klijentima. Nakon toga, Klijent će doneti odluku o tome da se takvi\n podaci o ličnosti izbrišu ili anonimizuju, osim ako je zakonom\n propisana obaveza čuvanja podataka, a SBT će postupiti u skladu sa\n dobijenom instrukcijom.\n \n
\n\n \n Klijent kao rukovalac u obradi Vaših podataka o ličnosti i mi takođe\n zadržavamo Vaše podatke o ličnosti ukoliko je njihova obrada\n neophodna povodom podnošenja, ostvarivanja ili odbrane pravnog\n zahteva. U meri u kojoj je to moguće Vaš rukovalac će ograničiti\n obradu podataka u takve svrhe nakon prestanka ugovornog odnosa sa\n našom kompanijom.\n \n
\n\n \n Za više informacija u vezi sa time na koji način i u kom trajanju se\n Vaši podaci o ličnosti čuvaju, kao i za više informacija u vezi sa\n Vašim pravom na brisanje i prenos podataka, molimo da kontaktirate\n Klijenta kao Vašeg rukovaoca.\n \n
\n9. Integritet podataka o ličnosti
\n\n \n Preduzećemo razumne korake kako bismo osigurali da su podaci o\n ličnosti koje obrađujemo pouzdani za upotrebu kojoj su namenjeni,\n tačni, potpuni i aktuelni. Vi ste odgovorni za tačnost svih podataka\n o lilnosti koje nam date. Uložićemo razumne napore da održimo\n tačnost i integritet dobijenih podataka o ličnosti i da ih po\n potrebi ažuriramo. \n \n
\n10. Bezbednost podataka o ličnosti
\n\n \n Naša kompanija preduzima odgovarajuće bezbednosne mere u cilju\n zaštite Vaših podataka o ličnosti od pristupa i uvida koji nisu\n odobreni primenom ovog Obaveštenja, a u skladu sa ZZPL-om i GDPR-om.\n \n
\n\n \n Sprovodimo odgovarajuće fizičke, proceduralne, tehničke,\n organizacione i kadrovske mere kako bismo dostigli odgovarajući nivo\n zaštite Vaših podataka o ličnosti koje obrađujemo. Mi primenjujemo\n najbolje industrijske standarde u zaštiti podataka. Zaštita se\n odnosi na gubitak, korišćenje protivno svrsi, neovlašćeni pristup i\n uvid, menjanje i uništenje tih podataka o ličnosti. Ipak nijedna\n mera bezbednosti ne može da garantuje da će lični podaci biti 100%\n zaštićeni, ali Benefiti u svakom momentu svojim kontrolisanim\n procesima i uz visoku odgovornost stalno unapređuju sve mere\n bezbednosti u cilju zaštite Vaših podataka o ličnosti.\n \n
\n11. Vaša prava
\n\n \n Kao lice na koje se podaci odnose možete da ostvarite određena prava\n prema Klijentu kao rukovaocu u odnosu na podatke o ličnosti koji se\n obrađuju o Vama.{\" \"}\n \n \n \n Međutim, posebno naglašavamo da je potrebno da znate i budete\n jasno informisani o tome da je SBT samo obrađivač u odnosu na\n obradu Vaših podataka o ličnosti i da kao takav ne može da\n odgovori niti ispuni bilo koji zahtev za ostvarivanje Vaših prava\n kao lica na koja se podaci odnose, osim ukoliko nismo dobili takvu\n napismenu instrukciju.{\" \"}\n \n \n \n Stoga, u slučaju da bilo kakav vid ovakvog zahteva za ostvarivanje\n Vaših prava bude upućen na našu adresu, mi ćemo ga u razumno\n najkraćem mogućem roku proslediti Klijentu kao rukovaocu.\n \n
\n\n Imate sledeća prava:\n
\n- \n
- \n Informisanje:\n \n {\" \"}\n pravo da budete informisani o tome na koji način obrađujemo Vaše\n podatke o ličnosti;\n \n \n
- \n Pristup:\n \n {\" \"}\n pravo da zahtevate od nas pristup svim Vašim podacima o ličnosti\n koje obrađujemo;\n \n \n
- \n Ispravka/dopuna:\n \n {\" \"}\n pravo da tražite da se netačni ili nepotpuni podaci o ličnosti o\n Vama isprave bez odlaganja;\n \n \n
- \n Brisanje:\n \n {\" \"}\n pravo da zahtevate da se obrišu Vaši podaci o ličnosti bez\n odlaganja;\n \n \n
- \n Ograničenje:\n \n {\" \"}\n pravo da tražite ograničenje obrade Vaših podataka o ličnosti u\n određenim situacijama;\n \n \n
- \n Prigovor:\n \n {\" \"}\n pravo da izjavite prigovor na specifične obrade podataka o\n ličnosti;\n \n \n
- \n Prenosivost:\n \n {\" \"}\n pravo da zahtevate od nas da ove podatke prenesemo drugoj\n kompaniji, ako je obrada je zasnovana na pristanku ili na osnovu\n ugovora i obrada se vrši automatizovanim putem.\n \n \n
\n \n Molimo Vas da sve zahteve za ostvarivanje Vaših prava prosledite na\n odgovarajuću adresu Klijenta. Tek ukoliko budu smatrali to\n adekvatnim Klijenti će u svojstvu rukovaoca nama uputiti pismenu\n instrukciju kako da postupimo sa Vašim zahtevom.\n \n
\n\n \n U svakom trenutku ukoliko smatrate da su Vaša prava kao lica na koje\n se podaci odnose u bilo kom smislu, odnosno obimu ograničena ili\n povređena možete da podnesete pritužbu Povereniku za informacije od\n javnog značaja i zaštitu podataka o ličnosti.\n \n
\n\n
\n
\n Vaš Smart Benefit Technologies\n
\n\n\n
\n \n setHasAcceptedTerms(!hasAcceptedTerms ? true : false)\n }\n />\n
\n \n handleAcceptPrivacyPolicy()}\n margin=\"20px 0 0 0\"\n disabled={!hasAcceptedTerms}\n >\n Ok\n \n logout()}\n margin=\"20px 0 0 0\"\n customClass=\"cancel-button\"\n >\n Cancel\n \n
\n \n \n {t(\"open_filters\")}\n \n )}\n
\n \n \n {t(\"Browse_Benefits\")}\n \n \n {t(\"Company_Benefits\")}\n \n \n {t(\"My_Benefits\")}\n \n \n {t(\"Favorite_Benefits\")}\n \n
\n {!isSubscribedBenefitGroupsVisible && (\n \n
\n \n \n \n handlePriceChange([e.target.value * 1, priceRange[1]])\n }\n />\n
\n -\n \n \n \n handlePriceChange([priceRange[0], e.target.value * 1])\n }\n />\n
\n \n \n {numberOfProvidersRender && (\n \n
\n \n
\n )}\n \n {t(\"available_prov\")}: {displayAvailableProviders()}\n
\n \n {}}\n setSearch={handleSearch}\n search={keywordSearch}\n setPagginationPage={setPage}\n placeholder={t(\"Search\")}\n />\n
\n {t(\"Price\")}
\n\n
\n {t(\"SBG\")}
\n\n handleSelectingSortOption(option)}\n />\n
\n {t(\"locations\")}
\n\n handleSelect(option, action)}\n handleInputChange={handleInputChange}\n shouldHaveFullWidth={true}\n fetchMoreData={refetchCities}\n />\n
\n {t(\"FBT\")}
\n\n \n handleSelectTypes(option, action)\n }\n shouldHaveFullWidth={true}\n />\n
\n {t(\"Category\")}
\n\n
\n \n {\n handleResetFilters();\n hideFilters();\n }}\n >\n {t(\"reset_filter\")}\n \n \n {t(\"close\")}\n \n
\n \n
\n )\n ) : benefitCompanyGroups?.length ? (\n \n
\n )}\n \n {isConditionAllBenefits ? t(\"SAB\") : t(\"SOC\")}\n
\n\n setIsNextMonthTooltipOpen(true)}\n >\n 
\n \n {isNextMonthTooltipOpen && (\n
\n \n \n \n setIsConditionAllBenefits(false)}\n >\n {t(\"SOC\")}\n \n setIsConditionAllBenefits(true)}\n >\n {t(\"SAB\")}\n \n
\n )}\n \n \n \n
\n ) : (\n \n {thisMonthBenefitGroups?.length > 0 ? (\n thisMonthBenefitGroups.map(benefitGroup => (\n openModal(benefitGroup)}\n />\n ))\n ) : (\n
\n {t(\"NABTM\")}
\n )}\n\n {nextMonthBenefitGroups?.length > 0 ? (\n nextMonthBenefitGroups.map(benefitGroup => (\n openModal(benefitGroup)}\n />\n ))\n ) : (\n
\n {t(\"NABNM\")}
\n )}\n\n {defaultBenefitGroups?.length > 0 ? (\n defaultBenefitGroups.map(benefitGroup => (\n openModal(benefitGroup)}\n />\n ))\n ) : (\n
\n {t(\"NADB\")}
\n )}\n\n
\n )}\n \n \n setMobileBenefitsTypes(mobileBenefitsTypeRender.THIS_MONTH)\n }\n >\n {t(\"TM\")}\n \n \n setMobileBenefitsTypes(mobileBenefitsTypeRender.NEXT_MONTH)\n }\n >\n {t(\"NM\")}\n \n \n setMobileBenefitsTypes(mobileBenefitsTypeRender.DEFAULT)\n }\n >\n {t(\"DEF\")}\n \n
\n {mobileBenefitsType === mobileBenefitsTypeRender.NEXT_MONTH && (\n \n {mobileSubscribedGroupsRender().map(benefitGroup => (\n \n mobileBenefitsType !== mobileBenefitsTypeRender.DEFAULT &&\n openModal(benefitGroup)\n }\n />\n ))}\n
\n Remote
;\n }\n\n if (!isEmpty(locations) && isEmpty(employeeLocations) && isRemote) {\n return (\n\n Remote,{\" \"}\n {locations.map((city, index) => {\n return locations.length - 1 === index\n ? `${city.name}`\n : `${city.name}, `;\n })}\n
\n );\n }\n\n if (!isEmpty(locations) && !isEmpty(employeeLocations)) {\n const employeeCity = employeeLocations?.find(city =>\n locations.find(ct => ct.id === city.id)\n );\n const groupLocations = !isEmpty(employeeCity)\n ? locations.filter(location => location.id !== employeeCity.id)\n : locations;\n\n if (!isEmpty(employeeCity) && isRemote) {\n return (\n\n Remote, {employeeCity.name}{\" \"}\n {!isEmpty(groupLocations)\n ? `, ${groupLocations.map(city => city.name).join(\", \")}`\n : null}\n
\n );\n }\n\n if (!isEmpty(employeeCity) && !isRemote) {\n return (\n\n {employeeCity.name}{\" \"}\n {!isEmpty(groupLocations)\n ? `, ${groupLocations.map(city => city.name).join(\", \")}`\n : null}\n
\n );\n }\n\n if (isEmpty(employeeCity) && isRemote) {\n return (\n\n Remote,{\" \"}\n {!isEmpty(groupLocations)\n ? groupLocations.map(city => city.name).join(\", \")\n : null}\n
\n );\n }\n\n if (isEmpty(employeeCity) && !isRemote) {\n return (\n\n {!isEmpty(groupLocations)\n ? groupLocations.map(city => city.name).join(\", \")\n : null}\n
\n );\n }\n }\n\n return (\n !isEmpty(locations) && (\n{locations.map(city => city.name).join(\", \")}
\n )\n );\n};\n","/**\n * Calculates benefit price with VAT.\n * @param price - benefit price in tokens.\n * @param vatRate - VAT rate.\n * @returns {number} - Benefit price with VAT.\n */\nexport const calculatePriceWithVat = (price, vatRate) => {\n const vatAmount = price * (vatRate / 100);\n return Math.floor(price + vatAmount);\n};\n","import styled from \"styled-components\";\n\nexport const BenefitSubscribeButtonsContainerStyles = styled.div`\n margin-top: 8px;\n display: flex;\n align-items: center;\n position: relative;\n justify-content: ${({ doesHaveMinimumContractPeriod, enableInstalments }) =>\n !!doesHaveMinimumContractPeriod || !!enableInstalments\n ? \"space-between\"\n : \"flex-end\"};\n\n .voucherInputContainer {\n width: 183px;\n }\n\n .__react_component_tooltip {\n top: 0 !important;\n left: 0 !important;\n position: absolute !important;\n }\n\n .tokensContainer {\n width: 48%;\n margin: 0 0 7px 10px;\n position: relative;\n }\n\n .inputContainer {\n margin: 5px 0 0 0;\n }\n\n .voucherErrorMsg {\n margin-top: -30px !important;\n position: absolute;\n width: 300px;\n }\n\n .benefitErrorMsg {\n margin-bottom: 85px;\n position: absolute;\n width: 300px;\n right: 0px;\n }\n\n .tokenWorth {\n font-size: 13px;\n font-weight: normal;\n font-stretch: normal;\n font-style: italic;\n line-height: 1.85;\n letter-spacing: -0.22px;\n color: #626262;\n }\n\n .label {\n font-size: 14px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.71;\n letter-spacing: -0.23px;\n color: #373737;\n position: absolute;\n top: 93%;\n min-width: 120px;\n }\n\n .subscribedButton {\n width: 111px;\n height: 34px;\n border-radius: 4px;\n background-color: #1568bf;\n border: 1px solid #1568bf;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n outline: none;\n\n .circle {\n width: 13px;\n height: 13px;\n border-radius: 6.5px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #fff;\n\n .unsubscribeLine {\n width: 9px;\n height: 3px;\n border: 1px solid #1568bf;\n background: #1568bf;\n }\n }\n\n .subscribedText {\n width: 78px;\n font-size: 12px;\n font-weight: bold;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n text-align: center;\n color: #ffffff;\n margin-left: 5px;\n }\n\n &:hover {\n background-color: white;\n border: 1px solid #1568bf;\n color: #1568bf;\n .subscribedText {\n color: #1568bf;\n }\n }\n }\n\n .minimum-contract-period {\n font-size: 12px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 2;\n letter-spacing: -0.2px;\n color: #373737;\n opacity: 0.8;\n margin-top: 10px;\n }\n\n .voucherName {\n font-size: 14px;\n font-weight: bold;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n text-align: center;\n color: #000000;\n margin-right: 5px;\n }\n\n .voucherPrice {\n font-size: 14px;\n font-weight: bold;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n text-align: center;\n color: #000000;\n margin-left: 10px;\n }\n\n .desktopVoucherContainer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n flex-wrap: wrap;\n }\n\n .desktopVoucher {\n display: flex;\n align-items: center;\n }\n .benefitPrice {\n font-size: 14px;\n font-weight: bold;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n text-align: center;\n color: #000000;\n margin-left: 4px;\n }\n\n #voucherInput {\n height: 31px;\n .react-dropdown-select {\n height: 31px !important;\n border-radius: 4px !important;\n border: solid 1px #d5dbdd !important;\n background-color: #ffffff !important;\n font-size: 14px !important;\n font-weight: normal !important;\n font-stretch: normal !important;\n font-style: normal !important;\n line-height: 1.71 !important;\n letter-spacing: -0.23px !important;\n color: #373737 !important;\n width: 100% !important;\n box-shadow: none !important;\n cursor: pointer !important;\n display: flex !important;\n align-items: center !important;\n\n .react-dropdown-select-content {\n height: 100% !important;\n display: flex !important;\n padding: 0 5px !important;\n align-items: center !important;\n flex-wrap: nowrap !important;\n text-overflow: ellipsis !important;\n overflow: hidden !important;\n width: 70px !important;\n white-space: nowrap !important;\n\n input {\n font-size: 12px !important;\n font-weight: normal !important;\n font-stretch: normal !important;\n font-style: normal !important;\n line-height: normal !important;\n letter-spacing: normal !important;\n color: #5d5d5d !important;\n overflow-x: scroll !important;\n }\n }\n\n .react-dropdown-select-dropdown-handle {\n height: 100%;\n display: flex;\n align-items: center;\n margin: 0 !important;\n }\n }\n }\n\n .unsubscribedButton {\n width: 100px;\n padding: 9px;\n border-radius: 4px;\n border: solid 1px #1568bf;\n background-color: #ffffff;\n outline: none;\n cursor: pointer;\n font-size: 12px;\n font-weight: bold;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n text-align: center;\n color: #1568bf;\n margin-top: 10px;\n\n &:disabled {\n border: solid 1px #d8d8d8;\n background-color: whitesmoke;\n color: #d8d8d8;\n }\n }\n\n .redeemButton {\n width: 86px;\n padding: 9px;\n border-radius: 4px;\n border: solid 1px #1568bf;\n background-color: #ffffff;\n outline: none;\n cursor: pointer;\n font-size: 12px;\n font-weight: bold;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n text-align: center;\n color: #1568bf;\n\n &:hover {\n background-color: #1568bf;\n color: white;\n }\n\n &:disabled {\n border: solid 1px #d8d8d8;\n background-color: whitesmoke;\n color: #d8d8d8;\n }\n }\n\n @media only screen and (max-width: 520px) {\n flex-wrap: wrap;\n\n .voucherErrorMsg {\n width: 220px;\n margin-left: -70px;\n font-size: 11px;\n }\n\n .predefined {\n width: 300px;\n font-size: 12px;\n left: -110px;\n }\n\n .benefitErrorMsg {\n margin-bottom: 53px;\n left: 0px;\n bottom: -5px;\n }\n\n .minimum-contract-period {\n margin-top: 0;\n margin-bottom: 10px;\n }\n\n .unsubscribedButton {\n margin-top: 10px;\n }\n }\n\n @media only screen and (max-width: 420px) {\n .tokensContainer {\n margin: 35px 0 15px 0;\n position: relative;\n }\n\n .voucherErrorMsg {\n width: 300px;\n margin: -30px 0 120px 0;\n font-size: 11px;\n }\n\n .predefined {\n width: 240px;\n font-size: 12px;\n left: 0;\n }\n\n .desktopVoucher {\n flex-wrap: wrap;\n }\n }\n\n @media only screen and (max-width: 356px) {\n .benefitErrorMsg {\n bottom: 40px;\n font-size: 11px;\n }\n }\n\n @media only screen and (max-width: 320px) {\n .voucherInputContainer {\n width: 155px;\n }\n\n .predefinedContainer {\n margin: 20px 0 0 0;\n }\n\n .voucherErrorMsg {\n font-size: 10px;\n width: 250px;\n }\n\n .predefined {\n bottom: -120px;\n }\n .benefitErrorMsg {\n font-size: 10px;\n }\n }\n`;\n","import styled from \"styled-components\";\n\nexport const BenefitSubscribeQuantityStyles = styled.div`\n position: relative;\n height: 46px;\n display: flex;\n align-items: center;\n gap: 5px;\n justify-content: flex-end;\n margin: 0 5px;\n \n .decrementButton {\n width: 33px;\n height: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #fff;\n border: 1px solid #1568bf;\n border-radius: 4px;\n outline: none;\n cursor: pointer;\n }\n\n .incrementButton {\n width: 33px;\n height: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #fff;\n border: 1px solid #1568bf;\n border-radius: 4px;\n outline: none;\n cursor: pointer;\n }\n\n .quantityInput {\n text-align: center;\n width: 70px;\n height: 26px;\n }\n`;\n","import React from 'react';\nimport { Input } from '../../../../../../components';\nimport { BenefitSubscribeQuantityStyles } from './BenefitSubscribeQuantity.styles';\n\nconst BenefitSubscribeQuantity = ({ setQuantity, isPreview, quantity, handleSetQuantity, handleKeyDown }) => (\n\n {isSubscribedButtonHovered ? (\n
\n ) : (\n
\n \n ) : (\n
\n {isSubscribedButtonHovered ? t(\"Unsubscribe\") : t(\"Subscribed\")}\n
\n \n ) : (\n <>\n {!isEmpty(benefit.quantity) && (\n <>\n\n {!IsButtonsDisabled &&\n calculateBenefitPrice() > user.remainingTokens &&\n t(\"tokens_shortage_sub\")}\n
\n \n {transformTokenCurrencyIcons()}\n
\n \n {transformTokensToRsd(calculatedPrice)}\n
\n\n {benefit.isSubscribed ? (\n
\n )}\n {benefit.isSubscribed && !isPreview ? (\n \n
\n ) : (\n \n {transformTokensToRsd(benefit.subscribedPrice)}\n
\n {benefit.vouchers.find(voucher => voucher.isSubscribed === true) && (\n <>\n {transformTokenCurrencyIcons()}\n\n {transformTokensToRsd(benefit.subscribedPrice)}\n
\n \n )}\n\n \n \n {!voucher.predefinedValuesOnly && customVoucherPriceTokens > 0\n ? transformTokensToRsd(convertedCustomVoucherPriceTokens)\n : transformTokensToRsd(convertedVoucherPrice)}\n \n {transformTokenCurrencyIcons()}\n
\n )}\n {voucher && voucher.predefinedValuesOnly && (\n \n handleSetVoucher(option)}\n customValuePosition=\"-8%\"\n disabled={isPreview}\n menuPlacement=\"top\"\n searchable={false}\n />\n
\n {voucher && (\n \n
\n )}\n\n {voucher && !voucher.predefinedValuesOnly && (\n \n {voucher.price > user.remainingTokens && t(\"tokens_shortage\")}\n
\n \n \n {voucher &&\n calculateValueWithVAT(\n quantity * customVoucherPriceTokens,\n voucher.vatIncluded,\n user.companyVatEnabled\n ) > user.remainingTokens && (\n
\n )}\n \n {t(\"tokens_shortage\")}\n
\n )}\n \n {(customVoucherPriceTokens > user.remainingTokens ||\n (voucher.price > user.remainingTokens &&\n customVoucherPriceTokens === null)) &&\n !IsButtonsDisabled &&\n t(\"tokens_shortage\")}\n
\n \n {customVoucherPriceTokens !== null &&\n customVoucherPriceTokens < voucher.price &&\n customVoucherPriceTokens <= user.remainingTokens &&\n t(\"min_voucher_price\", {\n price: voucher.price * TOKEN_VALUE\n })}\n
\n {/* \n {nearestValueError &&\n customVoucherPrice >= voucher.price * TOKEN_VALUE &&\n customVoucherPriceTokens <= user.remainingTokens &&\n `Value of the voucher has been changed to nearest possible value of ${convertedCustomVoucherPrice}`}\n
*/}\n \n
\n \n Price with VAT of {benefit.vat}% in currency is{\" \"}\n {convertedCustomVoucherPriceTokens * 20}\n
\n )}\n \n {t(\"enter_the_value\")}\n
\n \n {isSubscribedButtonHovered ? (\n
\n ) : (\n
\n \n ) : (\n
\n {isSubscribedButtonHovered ? t(\"Return_voucher\") : t(\"Redeemed\")}\n
\n \n ) : (\n <>\n {!isEmpty(benefit.quantity) && !isEmpty(voucher) && !isPreview && (\n <>\n\n {!IsButtonsDisabled &&\n calculatedPriceBasedOnQuantity > user.remainingTokens &&\n t(\"tokens_shortage_sub\")}\n
\n \n {transformTokenCurrencyIcons()}\n
\n \n {!voucher.predefinedValuesOnly &&\n customVoucherPriceTokens > 0\n ? transformTokensToRsd(\n calculateValueWithVAT(\n quantity * customVoucherPriceTokens,\n voucher.vatIncluded,\n user.companyVatEnabled\n )\n )\n : transformTokensToRsd(\n calculateValueWithVAT(\n quantity * voucher.price,\n voucher.vatIncluded,\n user.companyVatEnabled\n )\n )}\n
\n{uploadedPDF.name}
}\n \n )}\n\n {\n
\n );\n};\n","import React, { useState, useEffect, useRef } from \"react\";\nimport { connect, useDispatch, useSelector } from \"react-redux\";\nimport PropTypes from \"prop-types\";\nimport ReactHtmlParser from \"react-html-parser\";\nimport { BeatLoader } from \"react-spinners\";\nimport StarRatings from \"react-star-ratings\";\n\n// assets\nimport {\n ActiveIcon,\n PendingActivationIcon,\n PendingDeactivationIcon\n} from \"../../../../assets/Icons\";\n\n// components\nimport LeaveReviewForm from \"../../../../components/forms/review/LeaveReviewForm\";\nimport {\n openRatingModalAnim,\n closeRatingModalAnim\n} from \"../../../../components\";\n\n// style component\nimport BenefitSubscribeStyles from \"./BenefitSubscribeStyles\";\nimport { subscribe } from \"../../../../services/loadingOverride.styles\";\n\n// services\nimport { getUrl } from \"../../../../services/imageHandler\";\nimport * as api from \"../../../../services/api/employee/employeeBenefits.services\";\n\n// actions\nimport * as actionCreators from \"../../../../actions/employee/employeeBenefits.actions\";\n\n// builder constants\nimport { BenefitExpirationTypeEnum } from \"../../../../constants/benefit.constants\";\nimport {\n ACTIVE,\n PENDING_ACTIVATION,\n PENDING_DEACTIVATION\n} from \"../../../../builders/benefitGroups/benefitGroup.status\";\n\n// Utils\nimport { renderLocations } from \"../../../../renderers/locations.renderer\";\nimport { doesDescriptionExist } from \"../../../../services/textEditor.utils\";\nimport { isEmpty } from \"../../../../services/general.utils\";\nimport { calculatePriceWithVat } from \"../../../../services/benefit.utils\";\n\n// Renderers\nimport { renderCategories } from \"../../../../renderers/categories.renderer\";\nimport { toast } from \"react-toastify\";\nimport { apiService } from \"../../../../services/api/api.service\";\nimport { BenefitSubscribeItem } from \"./BenefitSubscribeItem\";\nimport { useTranslation } from \"react-i18next\";\n\nconst BenefitSubscribe = ({\n benefitGroup,\n isPreview = false,\n maxHeight = \"90vh\",\n user,\n usedBenefits,\n setUsedBenefits,\n setShowPDFBill,\n setVoucherReimbursementData,\n priceRange,\n chosenBenefitExpirationTypes\n}) => {\n const { t } = useTranslation();\n const dispatch = useDispatch();\n\n const [isLoading, setIsLoading] = useState(false);\n const [isOpenRatingModal, setIsOpenRatingModal] = useState(false);\n const [benefits, setBenefits] = useState([]);\n const isMounted = useRef(false);\n\n const { subscribedToSingleBenefitGroup } = useSelector(\n state => state.employeeBenefitsPage.socialProof\n );\n\n useEffect(() => {\n return () => {\n dispatch(actionCreators.checkIfInFavorites(false));\n };\n }, []);\n\n const { isInFavorites } = useSelector(\n state => state.employeeBenefitsPage.favoriteBenefits\n );\n\n const updateStateOfFavorites = async () => {\n const benefitListResponse = await apiService.get(`/favorites`);\n\n const listOfFavorite =\n benefitListResponse.data.items.length > 0\n ? benefitListResponse.data.items.map(item => item.group)\n : [];\n\n dispatch(actionCreators.setListOfFavorites(listOfFavorite));\n\n const listOfBenefitGroupIds = listOfFavorite.map(favorite => favorite.id);\n\n const isItemInListOfBenefits = listOfBenefitGroupIds.includes(\n benefitGroup.id\n );\n\n dispatch(actionCreators.checkIfInFavorites(isItemInListOfBenefits));\n };\n\n const removeFromFavorites = async () => {\n try {\n const removeFromBenefitsResponse = await apiService.delete(\n `/favorites/remove/benefits/${benefitGroup.id}`\n );\n\n toast.success(removeFromBenefitsResponse.data.message);\n\n updateStateOfFavorites();\n } catch (error) {\n toast.error(t(\"failed_to_remove_from_favorites\"));\n }\n };\n\n const addToFavorites = async () => {\n try {\n const removeFromBenefitsResponse = await apiService.post(\n `/favorites/add/benefits/${benefitGroup.id}`\n );\n\n toast.success(removeFromBenefitsResponse.data.message);\n\n updateStateOfFavorites();\n } catch (error) {\n toast.error(t(\"failed_to_add_to_favorites\"));\n }\n };\n\n const handleAddOrRemoveFromFavorites = isInFavorites => {\n if (isInFavorites) {\n removeFromFavorites();\n return;\n }\n\n addToFavorites();\n };\n\n const fetchBenefits = async () => {\n setIsLoading(true);\n const response = await api.getBenefitsForBenefitGroup(\n benefitGroup.id,\n priceRange,\n chosenBenefitExpirationTypes\n );\n\n if (response.hasError) {\n return toast.error(\n response.errorMessage\n ? response.errorMessage\n : \"Fetching benefits failed.\"\n );\n }\n\n setBenefits(response.benefits);\n setIsLoading(false);\n };\n\n const getVoucherPrices = benefit => {\n if (benefit.expiration === BenefitExpirationTypeEnum.VOUCHER) {\n const voucherPrices = benefit.vouchers.map(voucher => {\n return user.companyVatEnabled && benefit.vat\n ? calculatePriceWithVat(voucher.price, benefit.vat)\n : voucher.price;\n });\n const maxTokenPrice =\n voucherPrices.length > 0 ? Math.max(...voucherPrices) : 0;\n const minTokenPrice =\n voucherPrices.length > 0 ? Math.min(...voucherPrices) : 0;\n\n if (maxTokenPrice === minTokenPrice) {\n return `${maxTokenPrice}`;\n } else {\n return `${minTokenPrice} - ${maxTokenPrice}`;\n }\n }\n };\n\n /**\n * Returns benefit price.\n * If benefit is subscribed to, returns subscribed price.\n * If not, returns default price.\n * @param {Benefit} benefit\n * @returns {number}\n */\n const getBenefitPrice = benefit => {\n if (benefit.isSubscribed) {\n return benefit.subscribedPrice;\n }\n\n const benefitPrice =\n user.companyVatEnabled && benefit.vat\n ? calculatePriceWithVat(benefit.tokenPrice, benefit.vat)\n : benefit.tokenPrice;\n if (\n benefitGroup.doesBenefitGroupHaveInstalments &&\n benefitGroup.enableInstalments &&\n benefit.expiration === \"one time\" &&\n benefit.instalments\n ) {\n return `${benefit.instalments} x ${Math.floor(\n benefitPrice / benefit.instalments\n )}`;\n }\n\n return benefitPrice;\n };\n\n /**\n * Renders benefit status with appropriate icon and color scheme.\n * @param {string} status\n * @param {string} statusPreview\n * @param {boolean} shouldBeIndicatedAsActive\n * @param {boolean} isSubscribed\n * @returns {HTMLDivElement}\n */\n const renderBenefitStatus = (\n status,\n statusPreview,\n shouldBeIndicatedAsActive,\n isSubscribed\n ) => {\n if (isSubscribed && status === ACTIVE) {\n return (\n \n {renderBenefitStatus(\n benefitGroup.status,\n benefitGroup.statusPreview,\n benefit.shouldBeIndicatedAsActive,\n benefit.isSubscribed\n )}\n {user.companyVatEnabled && !isEmpty(benefit.vat) && (\n
\n }\n \n {t(\"Price_includes_VAT\")} {benefit.vat}%.\n
\n )}\n \n
\n {doesDescriptionExist(benefit.description) ? (\n {benefit.title}
\n {!isEmpty(benefit.quantity) &&\n !isEmpty(benefit.totalQuantityRemaining) &&\n !benefit.isSubscribed && (\n\n {benefit.totalQuantityRemaining} {t(\"remaining\")}\n
\n )}\n {!isEmpty(benefit.quantity) &&\n isEmpty(benefit.totalQuantityRemaining) &&\n !benefit.isSubscribed && (\n \n {benefit.quantity} {t(\"remaining\")}\n
\n )}\n \n {ReactHtmlParser(benefit.description)}\n
\n ) : (\n {benefit.summary}
\n )}\n\n
\n {t(benefit.expiration)}
\n\n {transformTokenCurrencyIcons()}\n
\n \n {benefit.expiration === \"voucher\"\n ? transformPriceRangeTokensToPriceRangeRsd(\n getVoucherPrices(benefit)\n )\n : transformPriceRangeTokensToPriceRangeRsd(\n getBenefitPrice(benefit)\n )}\n
\n\n
\n );\n }\n if (status === PENDING_DEACTIVATION && shouldBeIndicatedAsActive) {\n return (\n \n
\n );\n }\n if (isSubscribed && status === PENDING_ACTIVATION) {\n return (\n \n
\n );\n }\n };\n\n /**\n * Returns class names for benefit card based on benefit status.\n * @param {Benefit} benefit\n * @returns {string}\n */\n const getClassNameForBenefitCard = benefit => {\n if (\n benefit.shouldBeIndicatedAsActive &&\n benefitGroup.status === PENDING_DEACTIVATION\n ) {\n return \"benefiItemCard benefitStatusPendingDeactivationIndicator\";\n }\n\n if (benefit.isSubscribed && benefitGroup.status === ACTIVE) {\n return \"benefiItemCard benefitStatusActiveIndicator\";\n }\n\n if (benefit.isSubscribed && benefitGroup.status === PENDING_ACTIVATION) {\n return \"benefiItemCard benefitStatusPendingActivationIndicator\";\n }\n\n return \"benefiItemCard\";\n };\n\n const openModal = () => {\n setIsOpenRatingModal(!isOpenRatingModal);\n\n setTimeout(() => {\n openRatingModalAnim();\n }, 100);\n };\n\n const closeModal = () => {\n setIsOpenRatingModal(!isOpenRatingModal);\n\n setTimeout(() => {\n closeRatingModalAnim();\n }, 350);\n };\n\n /**\n * Sorts benefits from benefit group by subscription status.\n * Subscribed benefits should always be on top.\n * @returns {Benefit[]}\n */\n const sortedBenefits = () => {\n return (\n !isEmpty(benefits) &&\n benefits.sort(\n (a, b) =>\n Number(b.isSubscribed) - Number(a.isSubscribed) ||\n Number(b.shouldBeIndicatedAsActive) -\n Number(a.shouldBeIndicatedAsActive)\n )\n );\n };\n\n useEffect(() => {\n isMounted.current = true;\n fetchBenefits();\n return () => {\n isMounted.current = false;\n };\n }, []);\n\n const benefitItemProps = {\n getBenefitPrice,\n getVoucherPrices,\n renderBenefitStatus,\n getClassNameForBenefitCard,\n doesDescriptionExist,\n ReactHtmlParser,\n setIsLoading,\n setVoucherReimbursementData,\n setShowPDFBill,\n isPreview,\n benefitGroup,\n user\n };\n\n return (\n \n {benefitGroup?.photo && (\n
\n \n
\n {isOpenRatingModal && (\n \n
\n \n {benefitGroup && (\n
\n \n handleAddOrRemoveFromFavorites(isInFavorites)}\n >\n {isInFavorites ? t(\"remove_favorites\") : t(\"add_favorites\")}\n \n )}\n
\n\n \n {benefitGroup && benefitGroup.name && benefitGroup.name}\n
\n {!isPreview && (\n\n {renderCategories(benefitGroup.categories)}\n
\n \n {\n openModal(benefitGroup.id);\n }}\n className=\"link\"\n >\n {t(\"rate_the_benefit\")}\n
\n )}\n \n \n {benefitGroup.numberReviews\n ? (\n benefitGroup.sumRatings / benefitGroup.numberReviews\n ).toFixed(1)\n : 0}\n \n
\n {/**\n * When the client decides to add comments, change the text of the link to View reviews. The link opens the same modal.\n */}\n {usedBenefits?.length > 0 && !isOpenRatingModal && (\n \n {usedBenefits?.length > 0 && (\n
\n )}\n {doesDescriptionExist(benefitGroup.description) ? (\n \n {ReactHtmlParser(benefitGroup.description)}\n
\n ) : (\n {benefitGroup.summary}
\n )}\n {renderLocations(\n benefitGroup.cities,\n benefitGroup.isRemote,\n user?.employee?.cities\n )}\n \n\n {!isEmpty(benefits) &&\n benefits &&\n sortedBenefits().map(benefit => (\n
\n \n {categories.map(category => category.name).join(\", \")}\n
\n )\n}","import styled from \"styled-components\";\n\nconst VoucherReimbursementStyles = styled.div`\n width: 650px; \n max-width: 100%;\n height: 700px;\n max-height: 100vh;\n padding: 60px 30px;\n\n .recipe {\n padding: 20px;\n border: solid 2px #2F68B9;\n border-radius: 4px;\n box-shadow: 0px 4px 4px 0px #00000040;\n line-height: 2rem;\n\n h2 {\n text-align: center;\n margin: 10px;\n }\n }\n\n .recipeButtons {\n text-align: center;\n margin: 10%;\n display: flex;\n flex-direction: column;\n }\n\n @media only screen and (max-width: 600px){\n padding: 40px 10px;\n\n .recipe {\n padding: 15px;\n }\n }\n\n @media only screen and (max-width: 370px){\n h2 {\n font-size: 1em;\n }\n p {\n font-size: 0.677rem;\n }\n .mobileButton {\n font-size: 0.8rem;\n }\n }\n\n`;\n\nexport default VoucherReimbursementStyles","const dateFormater = (date) => {\n\tconst parts = date.split(' ')\n\tconst months = {\n\t\tJan: '01',\n\t\tFeb: '02',\n\t\tMar: '03',\n\t\tApr: '04',\n\t\tMay: '05',\n\t\tJun: '06',\n\t\tJul: '07',\n\t\tAug: '08',\n\t\tSep: '09',\n\t\tOct: '10',\n\t\tNov: '11',\n\t\tDec: '12'\n\t}\n\treturn `${parts[2]}.${months[parts[1]]}.${parts[3]}`\n}\n\nexport default dateFormater\n","import React, { useState } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { useFormik } from \"formik\";\nimport { toast } from \"react-toastify\";\n// Style\nimport VoucherReimbursementStyles from \"./VoucherReimbursementStyles\";\n\n// Services\nimport * as employeeBenefitsService from \"../../../../services/api/employee/employeeBenefits.services\";\n\n// Components\nimport Button from \"../../../../components/button\";\n// Utils\nimport dateFormater from \"../../../../services/dateFormater\";\nimport { TOKEN_VALUE } from \"../../../../builders/benefits/tokenValue\";\nimport { useSelector } from \"react-redux\";\nimport { useTranslation } from \"react-i18next\";\n\nconst VoucherReimbursement = ({ setShowPDFBill, voucherReimbursementData }) => {\n const { t } = useTranslation();\n const [isUpload, setIsUpload] = useState(false);\n\n const companyId = useSelector(state => state.app.user.companyId);\n\n const handleSubmitFile = async () => {\n employeeBenefitsService.uploadPDF(values, companyId);\n\n setTimeout(() => {\n setShowPDFBill(false);\n }, 500);\n };\n\n const formik = useFormik({\n initialValues: {\n pdfFile: undefined,\n voucherId: voucherReimbursementData.voucher_id,\n benefitGroupId: voucherReimbursementData.benefit_group_id\n },\n onSubmit: handleSubmitFile\n });\n\n const {\n values,\n errors,\n touched,\n handleSubmit,\n setFieldValue,\n handleBlur\n } = formik;\n\n const handleUpload = () => {\n document.getElementById(\"pdf\").click();\n setIsUpload(true);\n };\n\n const uploadPDF = e => {\n if (e.target.files.length > 0) {\n setFieldValue(e.target.name, e.target.files[0]);\n }\n };\n\n return (\n\n
\n
\n Refund voucher
\nVoucher name: {voucherReimbursementData.benefit_name}
\n\n Voucher price: {voucherReimbursementData.benefit_price * TOKEN_VALUE}{\" \"}\n currency\n
\n\n Date: {dateFormater(voucherReimbursementData.created_at.toString())}\n
\n\n
User information
\nEmail: {voucherReimbursementData.email}
\nUser: {voucherReimbursementData.name}
\n\n {\n e.target.value = null;\n }}\n accept=\".pdf, .jpg, .jpeg, .png, .JPG, .PNG, .JPEG, .PDF\"\n onChange={e => {\n const fileName = e.target.value;\n const regex = /\\.(pdf|jpg|jpeg|png|JPG|PNG|JPEG|PDF)$/;\n\n if (!regex.test(fileName)) {\n toast.error(t(\"failed_to_set_valid_file_format\"));\n e.target.value = null;\n return;\n }\n\n uploadPDF(e);\n }}\n style={{ display: \"none\" }}\n />\n handleBlur(\"pdfFile\", true)}\n margin=\"30px auto\"\n width=\"122px\"\n customClass=\"mobileButton\"\n >\n Upload\n \n
\n Upload the receipt
\n\n {values.pdfFile && (\n
\n {values.pdfFile.name}
\n )}\n {/*errors.pdfFile && (\n\n {errors.pdfFile && touched.pdfFile\n ? errors.pdfFile\n : \"\"}\n
\n )*/}\n\n \n Submit\n \n
\n \n \n
\n Welcome to Benefiti!
\nGreetings!
\n\n {`Good to see you on the platform! Your employer wants to allow you to \n spend your budget on the benefits you really want and change them as needed, \n which we make possible. We believe that you will find it easy to navigate \n and intuitively select your benefits. If you need help feel free to email us at `}\n
Benefiti team
\n\n There have been changes regarding the types of some benefits you were subscribed to\n
\n\n You have been automatically unsubscribed from these benefits.\n
\n\n Please, make sure to visit My Benefits or Browse Benefits page and choose which benefits would you prefer to subscribe to for the next month.\n
\n \n );\n};\n\nexport default BenefitChangedExpirationType;\n","import React from \"react\";\n\nconst BenefitChangedPrice = ({ notification }) => {\n return (\n <>\n\n There have been changes regarding the prices of some benefits you were\n subscribed to\n
\n\n You have been automatically unsubscribed from these benefits.\n
\n\n Please, make sure to visit My Benefits or Browse Benefits page and\n choose which benefits would you prefer to subscribe to for the next\n month, according to the price changes and your available tokens.\n
\n \n );\n};\n\nexport default BenefitChangedPrice;\n","import React from \"react\";\n\nconst BenefitGroupChangedLocation = ({ notification }) => {\n return (\n <>\n\n There have been changes regarding the location of some benefits you were subscribed to\n
\n\n You have been automatically unsubscribed from these benefits.\n
\n\n Please, make sure to visit My Benefits or Browse Benefits page and choose which benefits would you prefer to subscribe to for the next month.\n
\n \n );\n};\n\nexport default BenefitGroupChangedLocation;\n","import React from \"react\";\nimport { isEmpty } from \"../../../../services/general.utils\";\n\nconst BenefitGroupLocationUpdatedInfo = ({ notification }) => {\n return (\n <>\n {!isEmpty(notification.payload.benefit_group_name) && (\n There have been some changes regarding benefit group's \"{notification.payload.benefit_group_name}\" location.\n
)}\n\n Please check your benefits on My Benefits page and make sure you are ok with these changes.\n
\n \n );\n};\n\nexport default BenefitGroupLocationUpdatedInfo;\n","import React from \"react\";\n\nconst EmployeeChangedLocation = ({ notification }) => {\n return (\n <>\n\n There have been changes regarding your location!\n
\n\n You have been automatically unsubscribed from affected benefits.\n
\n\n Please, make sure to visit My Benefits or Browse Benefits page and choose which benefits would you prefer to subscribe to for the next month, according to the new available location.\n
\n \n );\n};\n\nexport default EmployeeChangedLocation;\n","import React from \"react\";\nimport { isEmpty } from \"../../../../services/general.utils\";\n\nconst EmployeeLocationUpdatedInfo = ({ notification }) => {\n const handleNotificationSubtitle = () => {\n return `\"${notification.payload.removed_cities.map(city => city.name).join(\", \")}\" ${notification.payload.removed_cities.length > 1 ? 'have' : 'has'} been removed from your locations. `;\n }\n\n return (\n <>\n\n There have been some changes regarding your location.\n
\n {!isEmpty(notification.payload.removed_cities) && (\n {handleNotificationSubtitle()}\n You might have lost access to some benefits on these locations.\n
)}\n\n Please check your benefits on My Benefits page and make sure your you are ok with these changes.\n
\n \n );\n};\n\nexport default EmployeeLocationUpdatedInfo;\n","import React from \"react\";\n\nconst EmployeeReassignedTier = ({ notification }) => {\n return (\n <>\n\n You have been reassigned to a different tier.\n
\n\n You have been automatically unsubscribed from all benefits.\n
\n\n Please, make sure to visit My Benefits or Browse Benefits page and\n choose which benefits would you prefer to subscribe to for the next\n month, according to the new available budget.\n
\n \n );\n};\n\nexport default EmployeeReassignedTier;\n","import React from \"react\";\nimport moment from \"moment\";\nimport { useTranslation } from \"react-i18next\";\n\nconst EmployeeSubscribedToMcpBenefit = ({ notification }) => {\n const { t } = useTranslation();\n return (\n <>\n\n {t(\"subscribed_success_to_mcp_title\")}\n
\n\n {t(\"subscribed_success_to_mcp_info\")}\n
\n\n {t(\"subscribed_success_to_mcp_info2\", {\n minimumContractPeriod: notification.payload.minimumContractPeriod\n })}\n {moment(notification.payload.minimumContractPeriodExpiration).format(\n \"DD. MMMM\"\n )}\n
\n \n );\n};\n\nexport default EmployeeSubscribedToMcpBenefit;\n","import React from \"react\";\n\nconst TierBudgetDecreased = ({ notification }) => {\n return (\n <>\n\n There have been changes regarding the budget of the tier you are\n belonging to!\n
\n\n You have been automatically unsubscribed from all benefits.\n
\n\n Please, make sure to visit My Benefits or Browse Benefits page and\n choose which benefits would you prefer to subscribe to for the next\n month, according to the new available budget.\n
\n \n );\n};\n\nexport default TierBudgetDecreased;\n","import React from \"react\";\nimport { SYSTEM_NOTIFICAITON_TYPES } from \"../../../../constants/systemNotifications.constants\";\nimport BenefitChangedExpirationType from \"./BenefitChangedExpirationType\";\nimport BenefitChangedPrice from \"./BenefitChangedPrice\";\nimport BenefitGroupChangedLocation from \"./BenefitGroupChangedLocation\";\nimport BenefitGroupLocationUpdatedInfo from \"./BenefitGroupLocationUpdatedInfo\";\nimport EmployeeChangedLocation from \"./EmployeeChangedLocation\";\nimport EmployeeLocationUpdatedInfo from \"./EmployeeLocationUpdatedInfo\";\nimport EmployeeReassignedTier from \"./EmployeeReassignedTier\";\nimport EmployeeSubscribedToMcpBenefit from \"./EmployeeSubscribedToMcpBenefit\";\nimport TierBudgetDecreased from \"./TierBudgetDecreased\";\n\nconst NotificationPayloadRender = ({ notification }) => {\n return (\n\n {notification.notificationType ===\n SYSTEM_NOTIFICAITON_TYPES.BENEFIT_CHANGED_PRICE && (\n
\n );\n};\n\nexport default NotificationPayloadRender;\n","import React from \"react\";\nimport NotificationPayloadRender from \"./NotificationPayloadRender\";\n\nconst NotificationsContent = ({ notification }) => {\n return (\n \n
\n );\n};\n\nexport default NotificationsContent;\n","import React from \"react\";\nimport { connect } from \"react-redux\";\nimport { toast } from \"react-toastify\";\nimport PropTypes from \"prop-types\";\n// styles\nimport { NotificationsStyles } from \"./notifications.styles\";\n// assets\nimport { BenefitLogoIcon } from \"../../../../assets/Icons\";\n// components\nimport { Button } from \"../../../../components\";\n// services\nimport * as api from \"../../../../services/api/auth.service\";\n// actions\nimport * as actionCreators from \"../../../../actions/app.actions\";\nimport NotificationsContent from \"./NotificationsContent\";\nimport { useTranslation } from \"react-i18next\";\n\nconst Notification = ({ notification, popSystemNotifications }) => {\n const { t } = useTranslation();\n\n const handleMarkNotificationAsRead = async id => {\n const response = await api.markAsRead(id);\n if (response.hasError) {\n return toast.error(\n response.errorMessage\n ? response.errorMessage\n : t(\"failed_to_mark_as_read\")\n );\n }\n\n popSystemNotifications();\n };\n\n return (\n \n
\n Submit Benefits
\n\n Once you submit the data you will not be able to change them until the\n next month. An automatic submit is done on the 26th of each month. You\n can manually submit the data now if you are sure about your choices.\n
\n\n Time remaining before the next automatic submit:\n
\n\n
\n {calculateTimeLeft() !== \"Submit in progress...\" && !isSync && (\n \n
\n );\n};\n","import React, { useMemo, useState } from \"react\";\nimport { connect, useDispatch, useSelector } from \"react-redux\";\nimport ReactTooltip from \"react-tooltip\";\nimport PropTypes from \"prop-types\";\nimport StarRatings from \"react-star-ratings\";\n\n// Styles\n// Assets\nimport Capacity from \"../../../../assets/images/capacity-left.svg\";\n// Components\nimport {\n ActiveIcon,\n FullHeartIconSVG,\n InfoIconSvg,\n OutlineHeartIconSVG,\n PendingActivationIcon,\n PendingDeactivationIcon,\n TokenIcon\n} from \"../../../../assets/Icons\";\n// Services\nimport { getUrl } from \"../../../../services/imageHandler\";\nimport { truncate } from \"../../../../services/truncateString\";\n// Utils\nimport { isEmpty } from \"../../../../services/general.utils\";\n// Constants\nimport { LOCAL } from \"../../../../builders/benefitGroups/benefitGroup.types\";\n\nimport { UserRolesKeysEnum } from \"../../../../constants/roles.constants\";\nimport BenefitCardStyles from \"../../../../components/benefitCard/BenefitCardStyles\";\nimport { toast } from \"react-toastify\";\nimport { setListOfFavorites } from \"../../../../actions/employee/employeeBenefits.actions\";\nimport { apiService } from \"../../../../services/api/api.service\";\nimport {\n transformPriceRangeTokensToPriceRangeRsd,\n transformTokenCurrencyIcons\n} from \"../../../../utils/transformTokensToRsd\";\nimport { useTranslation } from \"react-i18next\";\n\nconst BenefitCard = ({\n benefitGroupId,\n benefitDetails: {\n photo,\n provider,\n name,\n benefits = [],\n categories,\n status,\n statusPreview,\n taxes,\n cities,\n isRemote,\n type,\n summary,\n doesBenefitGroupHaveMcp,\n isBenefitGroupNew,\n benefitGroupAvailable,\n doesBenefitGroupHaveInstalments,\n doesBenefitGroupHaveQuantity,\n sumRatings,\n numberReviews,\n priceRange\n },\n onClick,\n isMyBenefits = false,\n isHr = false,\n user,\n isPreview = false\n}) => {\n const { t } = useTranslation();\n const dispatch = useDispatch();\n const [isDisabled, setIsDisabled] = useState(false);\n\n const { listOfFavoriteBenefitsInObject } = useSelector(\n state => state.employeeBenefitsPage.favoriteBenefits\n );\n\n /**\n * Handles on click event for the benefit card.\n * @returns {Function}\n */\n const handleOnClick = async () => {\n return onClick();\n };\n\n /**\n * Renders cities on benefit card.\n * If user is hr, and benefit group has more than one city while also being remote, renders remote with no of locations.\n * If user is hr, and benefit group has more than one city, renders first city name and array length - 1.\n * If user is employee and benefit group has remote renders remote and renders first city name and array length - 1.\n * If user is employee, renders first city from his cities and array length - 1.\n * If there is only one city in cities list, render its name.\n * @param {City[]} cities\n */\n const renderCities = cities => {\n if (isEmpty(cities) && type === LOCAL) return [];\n\n if (\n (isHr || user.authenticatedRole?.key !== UserRolesKeysEnum.MEMBER) &&\n cities.length >= 1 &&\n isRemote\n ) {\n return Remote, + {cities.length}
;\n }\n\n if (\n (isHr || user.authenticatedRole?.key !== UserRolesKeysEnum.MEMBER) &&\n cities.length > 1\n ) {\n return (\n\n {cities[0].name}, + {cities.length - 1}\n
\n );\n }\n\n if (isEmpty(cities) && isRemote) returnRemote
;\n\n if (\n user.authenticatedRole?.key === UserRolesKeysEnum.MEMBER &&\n !isEmpty(user.employee.cities)\n ) {\n const employeeCity = user.employee?.cities?.find(city =>\n cities.find(ct => ct.id === city.id)\n );\n if (!!employeeCity && cities.length > 1 && !isRemote) {\n return (\n\n {employeeCity.name}, + {cities.length - 1}\n
\n );\n }\n\n if (!!employeeCity && cities.length > 1 && isRemote) {\n return (\n\n Remote, {employeeCity.name}, + {cities.length - 1}\n
\n );\n }\n\n if (!!employeeCity && cities.length === 1 && isRemote) {\n returnRemote, {employeeCity.name}
;\n }\n\n if (!isEmpty(cities) && isEmpty(employeeCity) && isRemote) {\n returnRemote, + {cities.length}
;\n }\n\n if (cities.length > 1) {\n return (\n\n {cities[0].name}, + {cities.length - 1}\n
\n );\n }\n }\n\n return{cities[0].name}
;\n };\n\n /**\n * Renders benefit group categories to card.\n * @returns {HTMLDivElement}\n */\n const renderCategories = () => {\n if (isEmpty(categories)) return [];\n\n if (!isEmpty(categories) && categories.length > 1) {\n return (\n\n {categories[0].name}, + {categories.length - 1}\n
\n );\n }\n\n return{categories[0].name}
;\n };\n\n /**\n * Returns icon component based on status.\n * @param {string} status\n * @returns {import(\"react\").ReactComponentElement}\n */\n const renderStatusIcon = status => {\n const statusObject = {\n Active:\n \n {!isEmpty(taxes) &&
\n \n
\n \n
\n \n
\n \n
\n \n
\n {name}
\n{renderCategories()}
\n \n
\n \n \n {\" \"}\n {numberReviews\n ? (sumRatings / numberReviews).toFixed(1)\n : 0}{\" \"}\n \n
\n {truncate(taxes, 60)}
}\n{truncate(summary, 89)}
\n\n
\n \n {isHr && (\n \n \n \n {t(\"mcp_take_warning\")}\n \n \n \n ))}\n {doesBenefitGroupHaveInstalments && (\n <>\n \n \n \n This benefit group has a price split in instalments.\n \n \n \n )}\n
\n {!isHr && (\n \n \n MCP\n
\n \n {transformTokenCurrencyIcons()}\n
\n {isPreview ||\n (doesBenefitGroupHaveMcp && (\n <>\n \n {transformPriceRangeTokensToPriceRangeRsd(priceRange)}\n
\n\n {!!listOfFavoriteBenefitsInObject[benefitGroupId] ? (\n \n \n
\n )}\n \n
\n )}\n {quantityRemaining} left
\n\n {benefitGroupAvailable ? (\n
\n )}\n {isMyBenefits\n ? status && (\n \n ON \n
\n ) : (\n \n OFF \n
\n )}\n \n {renderStatusIcon(status)}\n
\n )\n : status && (\n {statusPreview}
\n\n {renderStatusIcon(status)}\n
\n )}\n \n {statusPreview}
\n\n {listOfFavoriteBenefits.map(benefitGroup => {\n return (\n openModal(benefitGroup)}\n />\n );\n })}\n
\n \n
\n );\n};\n","import styled, { keyframes } from \"styled-components\";\n\nconst fadeInLeft = keyframes`\n from {\n opacity: 0;\n transform: translate3d(-100%, 0, 0);\n }\n to {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n`;\n\nconst fadeOutLeft = keyframes`\n from {\n opacity: 1;\n transform: translate3d(0, 0, 0);\n }\n to {\n opacity: 0;\n transform: translate3d(-100%, 0, 0);\n }\n`;\n\nconst SocialProofNotificationsStyles = styled.div`\n .socialProofNotificationWrapper {\n display: flex;\n\n img {\n width: 50px;\n height: 50px;\n border-radius: 4px;\n margin-right: 5px;\n }\n }\n\n #social-proof-notification {\n position: fixed;\n bottom: 20px;\n left: 20px;\n z-index: 2;\n background: #ffffffff;\n width: 230px;\n padding: 12px;\n border-radius: 4px;\n box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),\n 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.14);\n cursor: pointer;\n transition: all ease 0.3s;\n filter: drop-shadow(1px 2px 8px hsl(220deg 100% 55%));\n opacity: 0;\n transform: translate3d(-100%, 0, 0);\n\n color: #757575;\n font-size: 13px;\n font-weigh: 400;\n\n span {\n font-weight: 600;\n color: #1568bf;\n }\n }\n\n #social-proof-notification.show {\n animation: ${fadeInLeft} 0.7s ease forwards;\n }\n\n #social-proof-notification.hide {\n animation: ${fadeOutLeft} 0.7s ease forwards;\n }\n`;\n\nexport default SocialProofNotificationsStyles;\n","import React, { useEffect, useRef } from \"react\";\nimport SocialProofNotificationsStyles from \"./SocialProofNotificationsStyles\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport {\n employeeBenefitsSetInitialState,\n openBenefitGroupModal,\n setBenefitGroupType,\n setIsInitialStateSet,\n setIsSubscribedBenefitGroupsVisible,\n setUsedBenefitsRedux\n} from \"../../../../actions/employee/employeeBenefits.actions\";\nimport { toast } from \"react-toastify\";\nimport {\n getAlreadyUsedBenefits,\n getBenefitGroups,\n getCategoriesForEmployeePlatform\n} from \"../../../../services/api/employee/employeeBenefits.services\";\nimport { openModalAnim } from \"../../../../components\";\nimport { uniqueArrayOfObjects } from \"../../../../services/general.utils\";\nimport { apiService } from \"../../../../services/api/api.service\";\nimport { useTranslation } from \"react-i18next\";\n\nexport const SocialProofNotifications = () => {\n const { t } = useTranslation();\n const dispatch = useDispatch();\n const notificationRef = useRef(null);\n\n const { currentlyPopularBenefit } = useSelector(\n state => state.employeeBenefitsPage.socialProof\n );\n const { benefitGroups } = useSelector(\n state => state.employeeBenefitsPage.benefitsBrowse\n );\n\n const {\n appliedChosenCategoryIds,\n appliedChosenPriceRange,\n appliedCityIds,\n appliedRemoteFilter\n } = useSelector(state => state.employeeBenefitsPage.filters);\n\n useEffect(() => {\n const showNotification = () => {\n notificationRef.current?.classList.add(\"show\");\n\n setTimeout(() => {\n notificationRef.current?.classList.remove(\"show\");\n notificationRef.current?.classList.add(\"hide\");\n setTimeout(() => {\n notificationRef.current?.classList.remove(\"hide\");\n }, 700);\n }, 15000);\n };\n\n showNotification();\n const intervalId = setInterval(showNotification, 900000);\n // Clean up the interval on component unmount\n return () => clearInterval(intervalId);\n }, []);\n\n const providerLogo = currentlyPopularBenefit?.photo;\n\n const imageUrl = currentlyPopularBenefit?.photo\n ? `${providerLogo.base}${providerLogo.path}/${providerLogo.name}@${providerLogo.size[0]}.${providerLogo.type}`\n : null;\n\n const openModalFunctionality = () => {\n setTimeout(() => {\n openModalAnim();\n }, 100);\n };\n\n const fetchBenefits = async type => {\n const [benefitGroupsResponse, categoriesResponse] = await Promise.all([\n getBenefitGroups({\n chosenCategories: appliedChosenCategoryIds,\n page: 1,\n priceRange: appliedChosenPriceRange,\n chosenCities: appliedCityIds,\n remoteFilter: appliedRemoteFilter,\n type: type\n }),\n getCategoriesForEmployeePlatform()\n ]);\n\n if (benefitGroupsResponse.hasError) {\n return toast.error(\n benefitGroupsResponse.errorMessage\n ? benefitGroupsResponse.errorMessage\n : t(\"failed_to_get_benefit_groups\")\n );\n }\n\n if (categoriesResponse.hasError) {\n return toast.error(\n categoriesResponse.errorMessage\n ? categoriesResponse.errorMessage\n : t(\"failed_to_get_categories\")\n );\n }\n\n dispatch(\n employeeBenefitsSetInitialState(\n benefitGroupsResponse.groups,\n benefitGroupsResponse.count,\n benefitGroupsResponse.pages,\n 1,\n categoriesResponse.categories\n )\n );\n dispatch(setIsInitialStateSet(true));\n\n setTimeout(() => {\n const editEmployeeContentCard = document.getElementById(\n \"benefitGroupList\"\n );\n editEmployeeContentCard.style.opacity = 1;\n }, 100);\n };\n\n const navigateToProperTab = type => {\n dispatch(setIsSubscribedBenefitGroupsVisible(false));\n dispatch(setBenefitGroupType(type));\n };\n\n const fetchAlreadyUsedBenefits = async id => {\n try {\n const response = await getAlreadyUsedBenefits(id);\n dispatch(setUsedBenefitsRedux(uniqueArrayOfObjects(response.benefits)));\n } catch (error) {\n toast.error(t(\"failed_to_get_used_benefits\"));\n }\n };\n\n const fetchInfoForSingleBenefitGroup = async benefitGroupId => {\n try {\n const response = await apiService.get(\n `/benefit-group/${benefitGroupId}/social-proof-data`\n );\n\n dispatch(openBenefitGroupModal(response.data));\n } catch (error) {\n toast.error(t(\"failed_to_get_single_benefit_info\"));\n }\n };\n\n const handleOpenBenefit = async () => {\n if (benefitGroups.length === 0) return;\n await fetchBenefits(\"public\");\n\n navigateToProperTab(\"public\");\n\n fetchAlreadyUsedBenefits(currentlyPopularBenefit.benefit_group_id);\n\n fetchInfoForSingleBenefitGroup(currentlyPopularBenefit.benefit_group_id);\n\n openModalFunctionality();\n };\n\n return (\n {showContent()}
\n \n {t(\"choose_benefits_message\", {\n name: vocativeName !== \"\" ? vocativeName : firstName\n })}\n \n {\n monthsInSerbian[\n moment()\n .add(1, \"month\")\n .format(\"MMMM\")\n ]\n }\n \n
\n\n {isLoading ? (\n \n
\n ) : (\n <>\n \n \n \n {!isSubscribedBenefitGroupsVisible &&
\n {isModalOpen && chosenBenefitGroup && (\n \n
\n {t(\"user_did_not_choose\")}
\n \n );\n};\n","import React from \"react\";\nimport moment from \"moment\";\nimport { transformTokensToRsd } from \"../../../utils/transformTokensToRsd\";\nimport { useTranslation } from \"react-i18next\";\n\nconst formatDate = dateString => {\n const dateObject = moment(dateString);\n\n const formattedDate = dateObject.format(\"DD.MM.YYYY\");\n const formattedTime = dateObject.format(\"HH:MM\");\n\n return `${formattedDate} ${formattedTime}`;\n};\n\nexport const ListOfHistoryItems = ({ openModal, showList, historyList }) => {\n const { t } = useTranslation();\n\n return (\n\n \n
\n \n \n );\n })}\n \n );\n};\n","import React from \"react\";\nimport { override } from \"../../../services/loadingOverride.styles\";\nimport { BeatLoader } from \"react-spinners\";\n\nexport const LoadingHistoryItems = ({ isLoading }) => {\n return (\n \n
\n \n openModal(historyItem.BenefitGroup)}\n >\n
\n \n
\n {formatDate(historyItem.startDate)}
\n\n \n
\n \n {t(\"choosen_ben\")}:\n \n \n {`${historyItem.Provider?.name}`}\n
\n
\n \n
\n {ShownContent()}
\n \n handleDateChange(chosenDate)}\n value={date}\n maxDate={new Date()}\n />\n
\n\n {t(\"tokens_used\")}
\n\n
\n {t(\"spent_budget\")}
\n\n
\n \n \n {t(\"budget_unused\")}
\n\n handleDateChange(chosenDate)}\n value={date}\n maxDate={new Date()}\n />\n
\n {t(\"total_budget\")}
\n\n {errorMessage && (\n
\n \n \n
\n )}\n {errorMessage}
\n\n
\n \n \n
\n \n {t(\"chosen_month\")} - {totalBudget.series[0]} currency\n
\n\n \n
\n \n {t(\"previous_month\")} - {totalBudget.series[1]} currency\n
\n\n handleDateChange(chosenDate)}\n value={date}\n maxDate={new Date()}\n />\n
\n {t(\"budget_spent_by_category\")}
\n\n
\n )}\n {errorMessage}
\n\n handleDateChange(chosenDate)}\n value={date}\n maxDate={new Date()}\n />\n
\n {t(\"budget_spent_tiers\")}
\n\n
\n )}\n {errorMessage}
\n\n handleDateChange(chosenDate)}\n value={date}\n maxDate={new Date()}\n />\n
\n {t(\"budget_spent\")}
\n\n {errorMessage && (\n
\n \n \n
\n )}\n {errorMessage}
\n\n
\n \n \n
\n \n {t(\"chosen_month\")} - {budgetUtilization.series[0]} currency\n
\n\n \n
\n \n {t(\"previous_month\")} - {budgetUtilization.series[1]} currency\n
\n\n handleDateChange(chosenDate)}\n value={date}\n maxDate={new Date()}\n />\n
\n {t(\"top_benefits\")}
\n\n \n
\n \n \n setChooseCurrentOrLastMonth(radioBoxResults.CHOSEN_MONTH)\n }\n />\n
\n \n \n setChooseCurrentOrLastMonth(radioBoxResults.PREVIOUS_MONTH)\n }\n />\n
\n \n
\n \n \n \n {(chooseCurretOrLastMonth === radioBoxResults.CHOSEN_MONTH\n ? chosenMonthErrorMsg\n : previousMonthErrorMsg) && (\n
\n \n
\n )}\n \n {chooseCurretOrLastMonth === radioBoxResults.CHOSEN_MONTH\n ? chosenMonthErrorMsg\n : previousMonthErrorMsg}\n
\n\n {(chooseCurretOrLastMonth === radioBoxResults.CHOSEN_MONTH\n ? chosenMonthErrorMsg\n : previousMonthErrorMsg) && (\n
\n \n
\n )}\n \n {chooseCurretOrLastMonth === radioBoxResults.CHOSEN_MONTH\n ? chosenMonthErrorMsg\n : previousMonthErrorMsg}\n
\n\n
\n \n
\n {companyName}
\n{t(\"usage_statistics\")}
\n\n
\n \n
\n {t(\"total_users\")}
\n{values.totalUsers}
\n\n
\n HR
\n{values.totalHr}
\n\n
\n {t(\"Employees\")}
\n{values.totalEmployee}
\n\n
\n \n {t(\"employees_using_the_system\")}\n
\n{values.employeeOnPlatform}
\n\n
\n \n {t(\"employees_not_using_the_system\")}\n
\n{values.employeeNotOnPlatform}
\n\n
\n
\n \n
\n {companyName}
\n{t(\"combination_statistics\")}
\n\n
\n \n {t(\"uniquely_chosen_combinations_title\")}\n
\n\n
\n
\n \n {t(\"over_2_mil\")}\n
\n\n handleDateChange(chosenDate)}\n value={date}\n maxDate={new Date()}\n />\n
\n {t(\"gen_usr_rep\")}
\n\n setReportType(option.id)}\n customId=\"reportTypeId\"\n shouldHaveHight={false}\n shouldHaveFullWidth\n customHeight=\"27px\"\n />\n
\n \n getStatistics()}\n >\n {t(\"download\")}\n \n
\n \n
\n {isDownloading ? (\n {t(\"gen_ref_rep\")}
\n\n \n
\n \n ) : (\n <>\n \n {t(\"downloading\")}: {downloadPercent}%\n
\n \n setReportType(option.id)}\n customId=\"reportTypeId\"\n shouldHaveHight={false}\n shouldHaveFullWidth\n customHeight=\"27px\"\n />\n
\n \n \n {t(\"download\")}\n \n
\n \n )}\n \n
\n \n
\n {companyName}
\n{t(\"sync_widget\")}
\n\n
\n \n
\n {t(\"sync_title\")}
\n{values.sync}
\n\n
\n {t(\"Employees\")}
\n{values.employees}
\n\n {isLoading && (\n \n
\n )}\n\n \n
\n \n\n {!isLoading &&\n showPrivacyPolicyModal.current &&\n user.authenticatedRole &&\n !user.hasAcceptedPrivacyPolicy && (\n \n
\n \n
\n \n
\n \n \n
\n ) : (\n \n \n
\n \n
\n \n
\n \n handleSetChosenCategories(option)}\n selectedValues={chosenCategories}\n />\n handleSetChosenBenefitTags(option)}\n selectedValues={chosenBenefitTags}\n />\n \n handleBenefitGroupAvailabilityFilterChange(option)\n }\n value={enabledBenefitGroup}\n clearable={true}\n customClass=\"hrBenefitsSearch\"\n customHeight\n placeholder={t(\"filter_by_status\")}\n minWidth=\"180px\"\n isClearable\n />\n \n
\n \n {benefitGroups.map(benefitGroup => {\n return (\n \n handleBenefitCardClick(\n benefitGroup.id,\n benefitGroup.isBenefitGroupNew\n )\n }\n />\n );\n })}\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n {benefitGroupName}
\n{disableTiersComponent}
\n {doesDescriptionExist(benefitGroupDescription)\n ? (\n \n {\n ReactHtmlParser(benefitGroupDescription)\n }\n
\n )\n : ({benefitGroupSummary}
)\n }\n{taxes}
\n {renderLocations(benefitGroupLocations, isRemote)}\n \n handleCheckUncheckAll(tierIds, isSomeTierChecked)}\n />\n
\n \n {tiers.length > 0 ? (\n tiers.map(tier => (\n
\n \n handleChange(tier.id)}\n />\n
\n ))\n ) : (\n \n
\n )}\n {t(\"tiers_info\")}
\n\n {isActive && \n \n {t(\"disable_benefit_warning\")}\n \n \n );\n};\n\nexport default ActivitySection;\n","import styled from \"styled-components\";\n\nexport const BenefitGroupUsersTableStyles = styled.div`\n padding: 0 30px;\n\n .header {\n display: flex;\n justify-content: space-between;\n }\n\n .tableHead {\n padding: 0 30px;\n display: flex;\n align-items: center;\n }\n\n .tableRow {\n background: #f7f7f7;\n padding: 30px;\n margin: 20px 0 0 0;\n border-radius: 4px;\n }\n`;\n","import React from \"react\";\nimport ReactTooltip from \"react-tooltip\";\nimport styled from \"styled-components\";\n\nimport { InfoIconSvg } from \"../../assets/Icons\";\nimport { useTranslation } from \"react-i18next\";\n\nconst Styles = styled.div`\n /* margin: 0 87px 0 0; */\n cursor: pointer;\n\n .tooltip {\n background: #ffffff !important;\n border: 1px solid #1568bf;\n color: #757575 !important;\n padding: 0;\n border-radius: 4px;\n font-size: 13px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.85;\n letter-spacing: 0.2px;\n text-align: center;\n padding: 0 8px;\n\n .arrow {\n border-left: 8px solid transparent;\n border-right: 8px solid transparent;\n bottom: -7px;\n left: 50%;\n position: absolute;\n border-top: 8px solid white !important;\n margin-left: -3px !important;\n width: 10px;\n height: 10px;\n z-index: 2;\n }\n }\n\n .tooltip:after {\n border-top: 8px solid #1568bf !important;\n margin-left: -3px !important;\n\n .__react_component_tooltip.place-top {\n &:after {\n bottom: -8px !important;\n }\n }\n\n .__react_component_tooltip.show {\n opacity: 0.9 !important;\n margin-top: -10px !important;\n margin-left: 0px !important;\n visibility: visible;\n }\n }\n`;\n\nconst InfoPopUp = ({ text, id }) => {\n const { t } = useTranslation();\n\n return (\n \n \n \n {t(text)}\n \n \n \n );\n};\n\nexport default InfoPopUp;\n","import React from \"react\";\nimport InfoPopUp from \"../../../../../components/InfoPopUp/InfoPopUp\";\n\nconst tableHead = [\n {\n id: 1,\n headName: \"Name\",\n field: \"name\",\n isSortedUp: null,\n width: \"20%\",\n justifyContent: \"flex-start\",\n isSortable: true,\n margin: \"\"\n },\n {\n id: 2,\n headName: \"Tier\",\n field: \"tier\",\n isSortedUp: null,\n width: \"15%\",\n justifyContent: \"center\",\n isSortable: true,\n margin: \"\"\n },\n {\n id: 3,\n headName: \"Budget\",\n field: \"tokens\",\n isSortedUp: null,\n width: \"20%\",\n justifyContent: \"center\",\n isSortable: false,\n margin: \"\",\n Component: \n \n \n
\n \n setHrBenefitGroupUsersPage(page)}\n theme=\"border-bottom\"\n />\n
\n \n ) : (\n {t(\"on\")}
}\n 0 && onToggle} />\n {!isActive &&
\n {isActive ? (\n {t(\"off\")}
}\n{t(\"bg_enabled\")}
\n ) : (\n{t(\"bg_disabled\")}
\n )}\n \n );\n};\n\nToggleButton.propTypes = {\n isActive: PropTypes.bool,\n onToggle: PropTypes.func,\n tiers: PropTypes.number\n};\n\nconst mapStateToProps = state => {\n return {\n isActive: state.benefits.editPageState.isBenefitGroupActive,\n tiers: state.benefits.editPageState.tiers.length\n };\n};\n\nexport default connect(mapStateToProps, null)(ToggleButton);\n","import ToggleButton from \"./ToggleButton\";\n\nexport default ToggleButton;\n","import styled from \"styled-components\";\n\nexport const ActivitySectionStyles = styled.div`\n display: flex;\n align-items: center;\n\n .benefitActivityInfo {\n font-size: 12px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #4b4b4b;\n width: 204px;\n }\n .iconContainer {\n width: 12px;\n height: 12px;\n background: #a1a3a7;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #ffffff;\n font-size: 6px;\n font-weight: bold;\n margin-left: 8px;\n }\n\n .tooltip {\n width: 232px;\n background: #282a3b !important;\n border: 1px solid #282a3b !important;\n padding: 0 5px;\n border-radius: 4px;\n font-size: 13px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.38;\n letter-spacing: -0.22px;\n color: #ffffff;\n }\n\n .__react_component_tooltip.show {\n opacity: 1;\n margin-left: 0;\n visibility: visible;\n }\n\n .tooltip:after {\n border-top: 8px solid #282a3b !important;\n margin-left: -3px !important;\n }\n`;\n","import React from \"react\";\nimport ReactTooltip from \"react-tooltip\";\n\nimport { InfoIconSvg } from \"../../../../assets/Icons\";\n\nimport ToggleButton from \"./toggleButton\";\n\nimport { ActivitySectionStyles } from \"./activitySection.styles\";\nimport { useTranslation } from \"react-i18next\";\n\nconst ActivitySection = ({ onToggle }) => {\n const { t } = useTranslation();\n\n return (\n\n
\n {users.length ? (\n <>\n \n downloadPreview()}\n disabled={isDisabled}\n >\n {t(\"download\")}\n \n
\n \n {enableInstalments &&
\n {enableInstalments ? (\n {t(\"on\")}
}\n \n {!enableInstalments &&{t(\"off\")}
}\n{t(\"installments_enabled\")}
\n ) : (\n\n {t(\"installments_disabled\")}\n
\n )}\n\n
\n );\n};\n","import React from \"react\";\nimport BenefitGroupBenefitPreviewListStyles from \"./BenefitGroupBenefitPreviewListStyles\";\nimport { BenefitGroupBenefitPreviewItem } from \"./BenefitGroupBenefitPreviewItem\";\nimport { calculatePriceWithVat } from \"../../../../../services/benefit.utils\";\nimport { BenefitExpirationTypeEnum } from \"../../../../../constants/benefit.constants\";\nimport { useSelector } from \"react-redux\";\nimport ListPlaceHolder from \"../../../../../components/listPlaceholder/ListPlaceholder\";\n\nexport const BenefitGroupBenefitPreviewList = props => {\n const { benefitGroup } = props;\n const { user } = useSelector(state => state.app);\n\n const getBenefitPrice = benefit => {\n if (benefit.isSubscribed) {\n return benefit.subscribedPrice;\n }\n\n const benefitPrice =\n user.companyVatEnabled && benefit.vat\n ? calculatePriceWithVat(benefit.tokenPrice, benefit.vat)\n : benefit.tokenPrice;\n\n if (\n benefitGroup.doesBenefitGroupHaveInstalments &&\n benefitGroup.enableInstalments &&\n benefit.expiration === \"one time\" &&\n benefit.instalments\n ) {\n return `${benefit.instalments} x ${Math.floor(\n benefitPrice / benefit.instalments\n )}`;\n }\n\n return benefitPrice;\n };\n\n const getVoucherPrices = benefit => {\n if (benefit.expiration === BenefitExpirationTypeEnum.VOUCHER) {\n const voucherPrices = benefit.vouchers.map(voucher => {\n return user.companyVatEnabled && benefit.vat\n ? calculatePriceWithVat(voucher.price, benefit.vat)\n : voucher.price;\n });\n const maxTokenPrice =\n voucherPrices.length > 0 ? Math.max(...voucherPrices) : 0;\n const minTokenPrice =\n voucherPrices.length > 0 ? Math.min(...voucherPrices) : 0;\n\n if (maxTokenPrice === minTokenPrice) {\n return `${maxTokenPrice}`;\n } else {\n return `${minTokenPrice} - ${maxTokenPrice}`;\n }\n }\n };\n\n const listOfBenefitsForPreview = benefitGroup.benefits.filter(\n items => !items.isDraft\n );\n\n return (\n \n
\n \n
\n {doesDescriptionExist(benefit.description) ? (\n {benefit.title}
\n {!isEmpty(benefit.quantity) &&\n !isEmpty(benefit.totalQuantityRemaining) &&\n !benefit.isSubscribed && (\n\n {benefit.totalQuantityRemaining} {t(\"remaining\")}\n
\n )}\n {!isEmpty(benefit.quantity) &&\n isEmpty(benefit.totalQuantityRemaining) &&\n !benefit.isSubscribed && (\n \n {benefit.quantity} {t(\"remaining\")}\n
\n )}\n \n {ReactHtmlParser(benefit.description)}\n
\n ) : (\n {benefit.summary}
\n )}\n\n
\n {t(benefit.expiration)}
\n\n {transformTokenCurrencyIcons()}\n
\n \n {benefit.expiration === \"voucher\"\n ? transformPriceRangeTokensToPriceRangeRsd(\n getVoucherPrices(benefit)\n )\n : transformPriceRangeTokensToPriceRangeRsd(\n getBenefitPrice(benefit)\n )}\n
\n\n {!isEmpty(benefitGroup) ? (\n \n {t(\"no_result_found\")}.\n
\n )}\n \n \n \n
\n ) : (\n \n \n \n \n\n {previewModal && (\n \n \n )}\n
\n )}\n \n \n
\n \n
\n \n
\n \n
\n \n
\n {isFormDisplay ? (\n \n {errors.firstName && touched.firstName\n ? errors.firstName\n : \"\"}\n
\n )}\n {values.firstName}
\n )}\n\n
\n \n
\n {isFormDisplay ? (\n \n {errors.lastName && touched.lastName ? errors.lastName : \"\"}\n
\n )}\n {values.lastName}
\n )}\n\n \n {isFormDisplay ? (\n <>\n
\n \n
\n \n {errors.born_date && touched.born_date\n ? errors.born_date\n : \"\"}\n
\n )}\n \n \n setFieldValue(\"born_date\", selectedDate)\n }\n maxDate={new Date()}\n value={parseISO(values.born_date)}\n showYearDropdown\n placeholderText=\"DD/MM/YYYY\"\n />\n
\n \n ) : (\n \n {values.born_date}\n
\n )}\n\n
\n \n \n
\n \n
\n {isFormDisplay ? (\n \n {errors.email && touched.email ? errors.email : \"\"}\n
\n )}\n {values.email}
\n )}\n\n \n {isFormDisplay ? (\n <>\n
\n \n
\n \n {errors.firstDayAtWork && touched.firstDayAtWork\n ? errors.firstDayAtWork\n : \"\"}\n
\n )}\n \n \n setFieldValue(\"firstDayAtWork\", selectedDate)\n }\n maxDate={new Date()}\n value={parseISO(values.firstDayAtWork)}\n showYearDropdown\n placeholderText=\"DD/MM/YYYY\"\n />\n
\n \n ) : (\n \n {values.firstDayAtWork}\n
\n )}\n\n
\n \n setFieldValue(\"contact\", phone)}\n value={values.contact}\n onBlur={handleBlur}\n name=\"contact\"\n />\n ) : (\n
\n \n
\n {isFormDisplay ? (\n \n {errors.contact && touched.contact ? errors.contact : \"\"}\n
\n )}\n {values.contact}
\n )}\n\n
\n \n
\n {isFormDisplay ? (\n \n {errors.team && touched.team ? errors.team : \"\"}\n
\n )}\n {values.team}
\n )}\n\n setFieldValue(\"gender\", option.value)}\n shouldHaveFullWidth\n customHeight=\"27px\"\n />\n ) : (\n
\n \n
\n {isFormDisplay ? (\n \n {errors.gender && touched.gender ? errors.gender : \"\"}\n
\n )}\n \n {t(values.gender)}\n
\n )}\n\n
\n {values.isDisabled && (\n \n
\n \n
\n {isFormDisplay ? (\n \n {errors.uniqueId && touched.uniqueId ? errors.uniqueId : \"\"}\n
\n )}\n {values.uniqueId}
\n )}\n\n setFieldValue(\"branchCode\", option.id)}\n shouldHaveFullWidth\n customHeight=\"27px\"\n />\n ) : (\n
\n \n
\n {isFormDisplay ? (\n \n {errors.branchCode && touched.branchCode\n ? errors.branchCode\n : \"\"}\n
\n )}\n \n {values.branchCode}\n
\n )}\n\n {t(\"disabled_user_info\")}\n {isEditEmployee && (\n handleUserEnable(e)}\n margin=\"8px 0 0 0\"\n padding=\"10px 25px\"\n outline\n >\n {t(\"enable_user\")}\n \n )}\n
\n )}\n \n {isEditEmployee && (\n \n
\n {t(\"Info\")} :
\n\n
\n \n
\n {isFormDisplay ? (\n \n {errors.description && touched.description\n ? errors.description\n : \"\"}\n
\n )}\n {values.description}
\n )}\n\n
\n {t(\"Family\")} :
\n\n
\n \n \n setFieldValue(\"relationship\", option.value)\n }\n customHeight=\"27px\"\n />\n ) : (\n
\n {t(values.relationship)}
\n )}\n{t(\"locations\")} :
\n\n handleSelect(option)}\n handleInputChange={handleInputChange}\n fetchMoreData={refetchCities}\n customHeight=\"27px\"\n />\n ) : (\n handleSelect(option)}\n handleInputChange={handleInputChange}\n fetchMoreData={refetchCities}\n customHeight=\"27px\"\n shouldHaveFullWidth\n />\n )}\n
\n \n \n
\n {isFormDisplay ? (\n \n {errors.cities ? errors.cities : \"\"}\n
\n )}\n \n \n
\n )}\n \n \n \n setFieldValue(\"tier\", option.id)}\n customHeight=\"28px\"\n shouldHaveFullWidth\n />\n ) : (\n
\n {t(\"Tier\")} :
\n\n {isFormDisplay && (\n
\n {companyTiers.length > 0 && isFormDisplay ? (\n \n {errors.tier && touched.tier ? errors.tier : \"\"}\n
\n )}\n \n {values.tier && values.tier.name}\n
\n )}\n \n \n
\n ) : (\n {t(\"Info\")} :
\n {isFormDisplay ? (\n\n {displayInfo().desc}\n
\n\n {t(\"Monthly tokens\")}: {displayInfo().token}\n
\n\n {values.tier ? values.tier.description : \"\"}\n
\n\n {t(\"Monthly tokens\")}: {values.tier ? values.tier.tokens : 0}\n
\n\n handleUserHrRoleCheckbox()}\n />\n \n
\n \n \n \n
\n ) : (\n \n \n \n \n
\n \n )}\n \n
\n )}\n \n \n \n \n \n history.goBack()}\n padding=\"10px 22px\"\n outline\n >\n Cancel\n \n
\n {employee.userBenefits && employee.userBenefits.length > 0 && (\n \n \n
\n ) : (\n \n \n \n
\n )}\n \n {t(\"add_employees\")}
\n\n
\n \n \n
\n \n downloadCSV()}\n >\n {t(\"download\")}\n \n
\n \n {step1Status === \"completed\" ? (\n
\n {t(\"download_template\")}
\n{t(\"download_template_info\")}
\n\n
\n \n
\n \n {step2Status === \"completed\" ? (\n
\n \n {\n e.target.value = null;\n }}\n onChange={e => {\n uploadCSV(e);\n }}\n style={{ display: \"none\" }}\n />\n
\n {t(\"step2_title_employees\")}
\n{t(\"step2_text_1\")}
\n{t(\"step2_text_2\")}
\n\n {t(\"required_fields_employees\")}\n
\n{t(\"step2_title_bonuses\")}
\n{t(\"step2_text_3\")}
\n- \n
- {t(\"bonus_type_info\")} \n
- {t(\"bonus_start_date_info\")} \n
- {t(\"bonus_end_date_info\")} \n
- \n {t(\"bonus_type_default_info\")}\n \n
- \n {t(\"required_fields_bonuses\")}\n \n
{t(\"upload_the_file\")}
\n\n {\n document.getElementById(\"csv\").click();\n }}\n onBlur={() => handleBlur(\"csvFile\", true)}\n className=\"uploadButton\"\n type=\"button\"\n >\n {t(\"upload\")}\n \n
\n \n {values.csvFile && (\n
\n {values.csvFile.name}
\n )}\n {errors.csvFile && (\n\n {errors.csvFile && touched.csvFile\n ? errors.csvFile\n : \"\"}\n
\n )}\n\n
\n \n
\n \n {step3Status === \"completed\" ? (\n
\n \n
\n {t(\"submit_the_file\")}
\n {disableButton ? (\n \n ) : (\n \n )}\n{t(\"update_employees\")}
\n\n
\n \n \n );\n};\n\nUpdateEmployeesWithCSV.propTypes = {\n fetchEmployees: PropTypes.func,\n closeModal: PropTypes.func\n};\n\nexport default UpdateEmployeesWithCSV;\n","import UpdateEmployeesWithCSV from './UpdateEmployeesWithCSV'\n\nexport default UpdateEmployeesWithCSV\n","import styled from \"styled-components\";\n\nexport const AddEmployeeWithCSVErrorStyles = styled.div`\n width: 546px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px 30px 30px 30px;\n\n .circleLogoContainer {\n width: 126px;\n height: 126px;\n margin-bottom: 30px;\n }\n\n .title {\n font-size: 24px;\n font-weight: bold;\n font-stretch: normal;\n font-style: normal;\n line-height: 0.81;\n letter-spacing: normal;\n color: #4b4b4b;\n margin-bottom: 30px;\n }\n\n .error-message {\n margin: 0 0 20px 0;\n }\n\n .text {\n font-size: 14px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.57;\n letter-spacing: normal;\n text-align: center;\n color: #4b4b4b;\n margin-bottom: 10px;\n }\n\n @media only screen and (max-width: 767px) {\n width: 100%;\n height: 100vh;\n }\n`;\n","import React from \"react\";\n// styles\nimport { AddEmployeeWithCSVErrorStyles } from \"./AddEmployeeWithCSVErrorStyles\";\n// assets\nimport { ErrorIconSvg } from \"../../../../../assets/Icons\";\n// components\nimport { Button } from \"../../../../../components\";\n// utils\nimport { isEmpty } from \"../../../../../services/general.utils\";\n\nconst AddEmployeeWithCSVError = ({ message, errors, cities, closeModal }) => {\n\n /**\n * Get errors for render.\n * @param {Array} errors \n * @returns {Array}\n */\n const getErrorsForRender = (errors) => {\n const errorsToRender = [];\n\n !isEmpty(errors) && errors.map(error => {\n if (error.email) {\n errorsToRender.push(`Email: ${Object.values(error.email.keys).join(', ')}`)\n }\n if (error.firstName) {\n errorsToRender.push(`First Name: ${Object.values(error.firstName.keys).join(', ')}`)\n }\n if (error.lastName) {\n errorsToRender.push(`Last Name: ${Object.values(error.lastName.keys).join(', ')}`)\n }\n if (error.gender) {\n errorsToRender.push(`Gender: ${Object.values(error.gender.keys).join(', ')}`)\n }\n if (error.tier) {\n errorsToRender.push(`Tier: ${Object.values(error.tier.keys).join(', ')}`)\n }\n if (error.description) {\n errorsToRender.push(`Description: ${Object.values(error.description.keys).join(', ')}`)\n }\n if (error.team) {\n errorsToRender.push(`Team: ${Object.values(error.team.keys).join(', ')}`)\n }\n if (error.relationship) {\n errorsToRender.push(`Relationship: ${Object.values(error.relationship.keys).join(', ')}`)\n }\n if (error.bornDate) {\n errorsToRender.push(`Birthday: ${Object.values(error.bornDate.keys).join(', ')}`)\n }\n if (error.firstDayAtWork) {\n errorsToRender.push(`Enroll date: ${Object.values(error.firstDayAtWork.keys).join(', ')}`)\n }\n if (error.contact) {\n errorsToRender.push(`Phone: ${Object.values(error.phone.keys).join(', ')}`)\n }\n if (error.children) {\n errorsToRender.push(`Children: ${Object.values(error.children.keys).join(', ')}`)\n }\n if (error.locations) {\n errorsToRender.push(`Locations: ${Object.values(error.locations.keys).join(', ')}`)\n }\n if (error.tokens) {\n errorsToRender.push(`Bonus Amount: ${Object.values(error.tokens.keys).join(', ')}`)\n }\n if (error.startDate) {\n errorsToRender.push(`Bonus Start Date: ${Object.values(error.startDate.keys).join(', ')}`)\n }\n if (error.endDate) {\n errorsToRender.push(`Bonus End Date: ${Object.values(error.endDate.keys).join(', ')}`)\n }\n if (error.recurringType) {\n errorsToRender.push(`Bonus Recurring Type: ${Object.values(error.recurringType.keys).join(', ')}`)\n }\n })\n\n return errorsToRender;\n }\n\n return (\n \n
\n \n downloadUpdateCSV()}\n >\n {t(\"download\")}\n \n
\n \n {step1Status === \"completed\" ? (\n
\n {t(\"download_template\")}
\n{t(\"update_employees_info\")}
\n\n
\n \n
\n \n {step2Status === \"completed\" ? (\n
\n \n {\n e.target.value = null;\n }}\n onChange={e => {\n uploadCSV(e);\n }}\n style={{ display: \"none\" }}\n />\n
\n {t(\"step2_title_employees\")}
\n{t(\"step2_text_1\")}
\n{t(\"step2_text_2\")}
\n\n {t(\"required_fields_employees\")}\n
\n{t(\"upload_the_file\")}
\n\n {\n document.getElementById(\"csv\").click();\n }}\n onBlur={() => handleBlur(\"csvFile\", true)}\n className=\"uploadButton\"\n type=\"button\"\n >\n {t(\"upload\")}\n \n
\n \n {values.csvFile && (\n
\n {values.csvFile.name}
\n )}\n {errors.csvFile && (\n\n {errors.csvFile && touched.csvFile\n ? errors.csvFile\n : \"\"}\n
\n )}\n\n
\n \n
\n \n {step3Status === \"completed\" ? (\n
\n \n
\n {t(\"submit_the_file\")}
\n {disableButton ? (\n \n ) : (\n \n )}\n\n
\n \n Upload Failed\n
\n {!isEmpty(message) && (\n \n {message}\n
)}\n \n {!isEmpty(errors) && getErrorsForRender(errors).map((error, index) => {\n return (
\n {!isEmpty(cities) && (\n {error}\n
)\n })}\n \n Available locations: \n
\n {cities.map(city => city.name).join(\", \")}\n
)}\n \n {cities.map(city => city.name).join(\", \")}\n
\n handleStartDateChange(selectedDate)}\n minDate={new Date()}\n value={parseISO(values.startDate)}\n showYearDropdown\n placeholderText=\"DD/MM/YYYY\"\n filterDate={filterStartDateBasedOnRecurrence}\n />\n ) : (\n handleStartDateChange(selectedDate)}\n minDate={new Date()}\n value={parseISO(values.startDate)}\n showYearDropdown\n placeholderText=\"DD/MM/YYYY\"\n />\n )}\n
\n \n
\n {values.recurring && values.recurringType !== \"yearly\" ? (\n {t(\"Bonus Start Date\")}:
\n{t(\"bonus_start_date_disclaimer\")}
\n\n handleDateChange(selectedDate)}\n minDate={startFutureMonthFromDate(new Date(), 2)}\n value={parseISO(values.endDate)}\n showYearDropdown\n placeholderText=\"DD/MM/YYYY\"\n />\n
\n \n
\n {t(\"Bonus End Date\")}:
\n{t(\"bonus_end_date_disclaimer\")}
\n\n
\n {values.recurring && (\n \n option.key === values.recurringType\n )}\n handleChange={option => setFieldValue(\"recurringType\", option.key)}\n customHeight=\"41px\"\n shouldHaveFullWidth\n />\n
\n )}\n \n );\n};\n\nBonusBudgetDateInput.propTypes = {\n values: PropTypes.shape(),\n errors: PropTypes.shape(),\n touched: PropTypes.shape(),\n handleChange: PropTypes.func,\n handleBlur: PropTypes.func,\n setFieldValue: PropTypes.func,\n selectName: PropTypes.string\n};\n\nexport default BonusBudgetDateInput;\n","import React, { useEffect } from \"react\";\nimport DatePicker from \"react-datepicker\";\nimport { parseISO } from \"date-fns\";\nimport PropTypes from \"prop-types\";\n// utils\nimport { isEmpty } from \"../../../../../services/general.utils\";\nimport {\n formatToStartOfDay,\n startFutureMonthFromDate,\n formatDateForPlaceholder\n} from \"../../../../../services/date.utils\";\nimport { useTranslation } from \"react-i18next\";\n\nconst DateInput = ({ values, setFieldValue, isNotCompanyBonusBudget }) => {\n const { t } = useTranslation();\n\n const handleStartDateChange = selectedDate => {\n if (isNaN(selectedDate) || isEmpty(selectedDate)) {\n return;\n }\n if (selectedDate) {\n selectedDate.setHours((-1 * selectedDate.getTimezoneOffset()) / 60);\n }\n setFieldValue(\"startDate\", formatToStartOfDay(selectedDate));\n };\n\n useEffect(() => {\n isNotCompanyBonusBudget && setFieldValue(\"startDate\", new Date());\n isNotCompanyBonusBudget &&\n setFieldValue(\"endDate\", startFutureMonthFromDate(new Date()));\n }, [isNotCompanyBonusBudget]);\n\n return (\n <>\n \n {errors.recurringType && touched.recurringType\n ? errors.recurringType\n : \"\"}\n
\n \n handleStartDateChange(selectedDate)}\n minDate={new Date()}\n maxDate={startFutureMonthFromDate(new Date())}\n value={parseISO(values.startDate)}\n showYearDropdown\n placeholderText=\"DD/MM/YYYY\"\n />\n
\n \n
\n {t(\"Bonus Start Date\")}:
\n\n
\n \n );\n};\n\nDateInput.propTypes = {\n values: PropTypes.shape(),\n setFieldValue: PropTypes.func,\n isNotCompanyBonusBudget: PropTypes.bool\n};\n\nexport default DateInput;\n","import styled from \"styled-components\";\n\nconst FormStyles = styled.div`\n width: 545px;\n padding: 36px 32px 32px 27px;\n\n .title {\n font-size: 24px;\n font-weight: bold;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.08;\n letter-spacing: normal;\n color: #4b4b4b;\n margin-bottom: 32px;\n }\n\n .selectContainer {\n width: 100%;\n margin-bottom: 22px;\n }\n\n .nameContainer {\n width: 100%;\n margin-bottom: 12px;\n }\n\n .dateContainer {\n width: 100%;\n margin: 12px 0;\n }\n\n .tokensAndCurrencyContainer {\n display: flex;\n justify-content: space-between;\n }\n\n .tokensContainer {\n width: 48%;\n }\n\n .inputContainer {\n width: 100%;\n height: 46px;\n position: relative;\n display: flex;\n align-items: center;\n }\n\n .descriptionContainer {\n width: 100%;\n margin-bottom: 12px;\n }\n\n .labelAndValidation {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .label {\n font-size: 14px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.71;\n letter-spacing: -0.23px;\n color: #373737;\n text-transform: capitalize;\n }\n\n .numbersInputs {\n width: 100%;\n height: 46px;\n border-radius: 4px;\n border: solid 1px #d5dbdd;\n background-color: #ffffff;\n padding: 0 14px;\n font-size: 14px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.71;\n letter-spacing: -0.23px;\n color: #373737cc;\n outline: none;\n position: absolute;\n }\n\n .input {\n width: 100%;\n height: 46px;\n border-radius: 4px;\n border: solid 1px #d5dbdd;\n background-color: #ffffff;\n padding: 0 14px;\n font-size: 14px;\n font-family: \"Montserrat\", sans-serif !important;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.71;\n letter-spacing: -0.23px;\n color: #373737;\n outline: none;\n\n &--disabled {\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 16px;\n font-weight: 600;\n color: #4b4b4b;\n opacity: 0.5;\n pointer-events: none;\n }\n }\n\n .textArea {\n min-height: 119px;\n max-height: 119px;\n min-width: 100%;\n max-width: 100%;\n border-radius: 4px;\n border: solid 1px #d5dbdd;\n background-color: #ffffff;\n opacity: 0.8;\n font-size: 14px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.71;\n letter-spacing: -0.23px;\n color: #373737;\n outline: none;\n padding: 14px;\n resize: none;\n }\n\n .tokenWorth {\n font-size: 13px;\n font-weight: normal;\n font-stretch: normal;\n font-style: italic;\n line-height: 1.85;\n letter-spacing: -0.22px;\n color: #626262;\n }\n\n .datepickerWrapper {\n margin-top: 22px;\n }\n .dateDisclaimer {\n font-size: 13px;\n font-weight: normal;\n font-stretch: normal;\n font-style: italic;\n line-height: 1.85;\n letter-spacing: -0.22px;\n color: #626262;\n }\n\n .datepickerWrapper {\n .react-datepicker-wrapper {\n width: 100% !important;\n }\n }\n\n .checkbox-wrapper {\n margin: 20px 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n label {\n margin-left: 10px;\n width: 150px;\n }\n }\n\n .datePickerInput {\n height: 46px;\n width: 100%;\n border-radius: 3px;\n border: 1px solid #979797;\n outline: none;\n text-align: center;\n font-size: 16px;\n font-weight: 600;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.57;\n letter-spacing: normal;\n text-align: center;\n color: #4b4b4b;\n cursor: pointer;\n position: relative;\n }\n\n input[type=\"number\"]::-webkit-clear-button {\n display: none;\n -webkit-appearance: none;\n }\n\n input[type=\"number\"]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n\n input[type=\"number\"] {\n -moz-appearance: textfield;\n }\n\n @media screen and (max-width: 767px) {\n width: 100%;\n padding: 36px 12px 32px 12px;\n\n button {\n width: 100%;\n }\n }\n`;\n\nexport default FormStyles;\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n// assets\nimport { TokenIcon } from \"../../../../../assets/Icons\";\n// components\nimport {\n Button,\n SelectInput,\n MultiselectInput\n} from \"../../../../../components\";\nimport BonusBudgetDateInput from \"./BonusBudgetDateInput\";\nimport DateInput from \"./DateInput\";\n// styles\nimport FormStyles from \"./FormStyles\";\nimport { useTranslation } from \"react-i18next\";\n\nconst Form = ({\n values,\n errors,\n touched,\n handleChange,\n handleBlur,\n tokenWorth,\n setFieldValue,\n title,\n buttonText,\n disableButton,\n inputName,\n textareaName,\n selectName,\n selectOptions,\n isNotCompanyBonusBudget,\n fetchMoreData,\n hasMore,\n handleSearchEmployees\n}) => {\n const { t } = useTranslation();\n const handleNumberInput = e => {\n let inputValue = e.target.validity.valid\n ? parseInt(e.target.value, 0)\n : values.tokens;\n\n if (isNaN(inputValue)) {\n inputValue = \"\";\n }\n\n if (e.target.name === \"tokens\") {\n setFieldValue(\"tokens\", inputValue);\n setFieldValue(\n \"currency\",\n inputValue === \"\" ? \"\" : inputValue * tokenWorth.worth\n );\n }\n\n if (e.target.name === \"currency\") {\n setFieldValue(\"currency\", inputValue);\n if (inputValue % tokenWorth.worth === 0) {\n setFieldValue(\n \"tokens\",\n inputValue === \"\" ? \"\" : inputValue / tokenWorth.worth\n );\n } else {\n setFieldValue(\"tokens\", \"\");\n }\n }\n };\n\n return (\n \n
\n\n {t(\"Bonus End Date\")}:
\n\n {formatDateForPlaceholder(startFutureMonthFromDate(new Date()))}\n
\n {title}
\n\n option.id === values.employees[0].id\n )}\n handleChange={option => setFieldValue(\"employees\", [option])}\n customHeight=\"41px\"\n shouldHaveFullWidth\n />\n ) : (\n setFieldValue(\"employees\", option)}\n selectedValues={values.employees}\n shouldHaveFullWidth={true}\n customHeight=\"41px\"\n dropdownMenuHeight=\"150px\"\n />\n )}\n
\n {isNotCompanyBonusBudget ? (\n \n
\n {title === t(\"Add Bonus\") ? (\n {t(selectName)}:
\n\n {errors[selectName] && touched[selectName]\n ? errors[selectName]\n : \"\"}\n
\n \n
\n \n
\n {t(inputName)}:
\n\n {errors[inputName] && touched[inputName] ? errors[inputName] : \"\"}\n
\n \n
\n \n
\n {t(textareaName)}:
\n\n {errors[textareaName] && touched[textareaName]\n ? errors[textareaName]\n : \"\"}\n
\n \n
\n \n \n
\n {t(\"enter_the_value\")}
\n\n
\n \n currency\n
\n1 token = {tokenWorth.worth} currency
\n\n
\n \n
\n # {t(\"of_tokens\")}:
\n\n {errors.tokens && touched.tokens ? errors.tokens : \"\"}\n
\n \n \n
\n \n {disableButton ? (\n \n ) : (\n \n )}\n
\n \n
\n Adding bonus to these users failed
\n \n {(!isEmpty(users) || !isEmpty(errors)) &&\n getErrorsForRender(users, errors).map((value, index) => {\n return (\n
\n\n \n \n {value}\n
\n );\n })}\n \n \n
\n ) : (\n \n \n
\n )}\n \n {isModalOpen && (\n \n
\n \n
\n \n
\n \n {width > 960 && (\n \n
\n +
\n{t(\"add_employee\")}
\n \n )}\n\n {width > 960 ? (\n handleDropdownOpen(e)}\n >\n \n handleDropdownOpen(e)}\n borderRadius=\"4px\"\n borderRight=\"1px solid white\"\n >\n
\n +
\n \n )}\n {isDropdownOpen && (\n\n \n \n openAddBonusModal(\n {\n title: \"Add Bonuses\",\n selectName: \"employees\"\n },\n null\n )\n }\n >\n
\n )}\n \n
\n +
\n{t(\"add_employee\")}
\n \n \n\n
\n +
\n{t(\"add_employees_csv\")}
\n \n \n\n
\n +
\n\n {t(\"update_employees_csv\")}{\" \"}\n
\n \n\n
\n +
\n{t(\"add_bonus\")}
\n \n\n
\n \n handleSetChosenTiers(option)}\n selectedValues={chosenTiers}\n />\n handleSetChosenBudgetRanges(option)}\n selectedValues={chosenBudgetRanges}\n />\n
\n \n
\n \n handleSortOpen(e)}\n borderRadius=\"4px\"\n customClass=\"sortMobileButton\"\n >\n
\n {t(\"Sort\")}
\n \n {isMobileSortWrapperOpen && (\n\n {tableHeaders.map(\n ({ id, isSortable, isSortedUp, headName }) =>\n isSortable && (\n toggleSortFunc(id)}\n transparent\n gap=\"4px\"\n color=\"rgb(7, 6, 6)\"\n customClass=\"sortButton\"\n >\n
\n )}\n \n
\n \n {t(\"sort_by\")} {headName}\n
\n \n )\n )}\n\n
\n \n \n
\n\n \n
\n \n {selectedNumber} {t(\"Selected\")}\n
\n{t(\"Delete\")}
\n \n\n
\n \n handleSetChosenTiers(option)}\n selectedValues={chosenTiers}\n />\n \n handleSetChosenBudgetRanges(option)\n }\n selectedValues={chosenBudgetRanges}\n />\n
\n \n {tableHeaders.map(\n ({\n id,\n headName,\n isSortable,\n isSortedUp,\n width,\n justifyContent,\n margin,\n textAlign,\n Component\n }) => (\n
\n \n {!isEmpty(employees) ? (\n employees.map(employee => (\n = 0\n ? employee.remainingTokens\n : 0\n }\n budgetSpentPercentage={`${employee.budgetSpentPercentage}%`}\n userEmail={employee.user.email}\n gender={employee.gender}\n cities={employee.cities}\n team={employee.team}\n relationship={employee.relationship}\n bornDate={employee.bornDate}\n firstDayAtWork={employee.firstDayAtWork}\n fetchData={fetchEmployees}\n contact={employee.contact}\n bonusAmount={employee.bonusAmount}\n setSelectedNumber={setSelectedNumber}\n checkedMap={checkedMap}\n setCheckedMap={setCheckedMap}\n />\n ))\n ) : (\n
\n \n {t(\"no_result_found\")}\n
\n )}\n \n setHrEmployeePage(page)}\n theme=\"border-bottom\"\n />\n
\n \n {isAddEmployeeOpen && (\n \n
\n )}\n \n {\n e.stopPropagation();\n onClickDots();\n }}\n onBlur={() => handleBlur()}\n >\n myTooltip.current = ref}\n className=\"tooltip\"\n getContent={dataTip => (\n
\n {tier.name}
\n\n {\n e.stopPropagation();\n handleBlur();\n const result = confirm(t(\"delete_tier_alert\"));\n if (result) {\n const response = await settingsService.removeTier(dataTip);\n\n if (response.hasError) {\n return toast.error(response.error.data.error.message);\n }\n\n removeTier(dataTip);\n ReactTooltip.rebuild();\n }\n }}\n >\n {t(\"Delete\")}\n \n
\n )}\n border\n clickable\n />\n \n
\n \n {isInRSD ? `${tier.tokens * 20} RSD` : `${tier.tokens} Tokens`}\n
\n-
\n{tier.countEmployee} Members
\n{tier.description}
\n \n );\n};\n\nTierItem.propTypes = {\n tier: PropTypes.shape(),\n setSelectedTier: PropTypes.func,\n removeTier: PropTypes.func,\n openModal: PropTypes.func\n};\n\nconst mapDispatchToProps = dispatch => {\n return {\n removeTier: tierId => dispatch(actionCreators.removeTier(tierId))\n };\n};\n\nexport default connect(undefined, mapDispatchToProps)(TierItem);\n","import TierItem from './TierItem'\n\nexport default TierItem\n","import styled from 'styled-components'\n\nconst FormStyles = styled.div`\n\twidth: 545px;\n /* height: 596px; */\n\tpadding: 36px 32px 32px 27px;\n\n\t.title {\n\t\tfont-size: 24px;\n\t\tfont-weight: bold;\n\t\tfont-stretch: normal;\n\t\tfont-style: normal;\n\t\tline-height: 1.08;\n\t\tletter-spacing: normal;\n\t\tcolor: #4b4b4b;\n\t\tmargin-bottom: 32px;\n\t}\n\n\t.nameContainer {\n\t\twidth: 100%;\n\t\tmargin-bottom: 12px;\n\t}\n\n\t.tokensAndCurrencyContainer {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t}\n\n\t.tokensContainer {\n\t\twidth: 48%;\n\t}\n\n\t.inputContainer {\n\t\twidth: 100%;\n\t\theight: 46px;\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.descriptionContainer {\n\t\twidth: 100%;\n\t\tmargin-bottom: 12px;\n\t}\n\n\t.labelAndValidation {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n\t.label {\n\t\tfont-size: 14px;\n\t\tfont-weight: normal;\n\t\tfont-stretch: normal;\n\t\tfont-style: normal;\n\t\tline-height: 1.71;\n\t\tletter-spacing: -0.23px;\n\t\tcolor: #373737;\n\t}\n\n\t.numbersInputs {\n\t\twidth: 100%;\n\t\theight: 46px;\n\t\tborder-radius: 4px;\n\t\tborder: solid 1px #d5dbdd;\n\t\tbackground-color: #ffffff;\n\t\tpadding: 0 14px;\n\t\tfont-size: 14px;\n\t\tfont-weight: normal;\n\t\tfont-stretch: normal;\n\t\tfont-style: normal;\n\t\tline-height: 1.71;\n\t\tletter-spacing: -0.23px;\n\t\tcolor: #373737cc;\n\t\toutline: none;\n\t\tposition: absolute;\n\t}\n\n\t.input {\n\t\twidth: 100%;\n\t\theight: 46px;\n\t\tborder-radius: 4px;\n\t\tborder: solid 1px #d5dbdd;\n\t\tbackground-color: #ffffff;\n\t\tpadding: 0 14px;\n\t\tfont-size: 14px;\n\t\tfont-family: \"Montserrat\", sans-serif !important;\n\t\tfont-weight: normal;\n\t\tfont-stretch: normal;\n\t\tfont-style: normal;\n\t\tline-height: 1.71;\n\t\tletter-spacing: -0.23px;\n\t\tcolor: #373737;\n\t\toutline: none;\n\t}\n\n\t.textArea {\n\t\tmin-height: 119px;\n\t\tmax-height: 119px;\n\t\tmin-width: 100%;\n\t\tmax-width: 100%;\n\t\tborder-radius: 4px;\n\t\tborder: solid 1px #d5dbdd;\n\t\tbackground-color: #ffffff;\n\t\topacity: 0.8;\n\t\tfont-size: 14px;\n\t\tfont-weight: normal;\n\t\tfont-stretch: normal;\n\t\tfont-style: normal;\n\t\tline-height: 1.71;\n\t\tletter-spacing: -0.23px;\n\t\tcolor: #373737;\n\t\toutline: none;\n\t\tpadding: 14px;\n\t\tresize: none;\n\t}\n\n\t.tokenWorth {\n\t\tfont-size: 13px;\n\t\tfont-weight: normal;\n\t\tfont-stretch: normal;\n\t\tfont-style: italic;\n\t\tline-height: 1.85;\n\t\tletter-spacing: -0.22px;\n\t\tcolor: #626262;\n\t}\n\n\tinput[type=number]::-webkit-clear-button {\n\t\tdisplay: none;\n -webkit-appearance: none;\n\t}\n\n\tinput[type=number]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n\t}\n\n\tinput[type=number] {\n\t\t\t-moz-appearance:textfield;\n\t}\n`\n\nexport default FormStyles\n","import React from \"react\";\nimport PropTypes from \"prop-types\";\n// assets\nimport { TokenIcon } from \"../../../../assets/Icons\";\n// components\nimport { Button } from \"../../../../components\";\n// styles\nimport FormStyles from \"./FormStyles\";\nimport { useTranslation } from \"react-i18next\";\n\nconst Form = ({\n values,\n errors,\n touched,\n handleChange,\n handleBlur,\n tokenWorth,\n setFieldValue,\n title,\n buttonText,\n disableButton\n}) => {\n const { t } = useTranslation();\n const handleNumberInput = e => {\n let inputValue = e.target.validity.valid\n ? parseInt(e.target.value, 0)\n : values.tokens;\n if (isNaN(inputValue)) {\n inputValue = \"\";\n }\n if (e.target.name === \"tokens\") {\n setFieldValue(\"tokens\", inputValue);\n setFieldValue(\n \"currency\",\n inputValue === \"\" ? \"\" : inputValue * tokenWorth.worth\n );\n }\n if (e.target.name === \"currency\") {\n setFieldValue(\"currency\", inputValue);\n if (inputValue % tokenWorth.worth === 0) {\n setFieldValue(\n \"tokens\",\n inputValue === \"\" ? \"\" : inputValue / tokenWorth.worth\n );\n } else {\n setFieldValue(\"tokens\", \"\");\n }\n }\n };\n\n return (\n{t(title)}
\n\n
\n \n
\n {t(\"Name\")}:
\n\n {errors.name && touched.name ? errors.name : \"\"}\n
\n \n
\n \n
\n {t(\"Description\")}:
\n\n {errors.description && touched.description\n ? errors.description\n : \"\"}\n
\n \n
\n \n \n
\n {t(\"enter_the_value\")}
\n\n
\n RSD
\n1 token = {tokenWorth.worth} RSD
\n\n
\n \n
\n # {t(\"of_tokens\")}:
\n\n {errors.tokens && touched.tokens ? errors.tokens : \"\"}\n
\n \n \n
\n \n {disableButton ? (\n \n ) : (\n \n )}\n
\n \n {enableRollover &&
\n {enableRollover ? (\n {t(\"on\")}
}\n \n {!enableRollover &&{t(\"off\")}
}\n{t(\"Rollover is enabled\")}
\n ) : (\n{t(\"Rollover is disabled\")}
\n )}\n\n
\n \n
\n \n {errors.photo && touched.photo ? errors.photo : \"\"}\n
\n \n
\n \n handleSubmit(e)}\n >\n
\n \n
\n \n {disableButton ? (\n \n ) : (\n \n {t(buttonText)}\n \n )}\n \n {t(\"cancel\")}\n \n
\n \n {enableCurrency &&
\n {enableCurrency ? (\n {t(\"on\")}
}\n \n {!enableCurrency &&{t(\"off\")}
}\n{t(\"currency is enabled\")}
\n ) : (\n{t(\"currency is disabled\")}
\n )}\n\n \n \n )}\n
\n \n {modalType && (\n \n {isLoading ? (\n \n
\n ) : (\n \n \n {t(\"submit_1\")}\n \n
\n \n
\n\n \n
\n \n {t(\"Rollover resets on\")}{\" \"}\n \n {moment(rolloverInfo.rolloverEndDate).format(\n \"DD.MM.YYYY\"\n )}\n \n
\n )}\n\n
\n {t(\"max_budget_info\")}\n \n
\n {scheduledDeleteAt && (\n \n {t(\"max_budget_info\")}\n \n
\n {t(\"Scheduled rollover deletion\")} : {scheduledDeleteAt}\n
\n )}\n \n {tiers.map(tier => (\n
\n openModal(\"addTier\")}>\n
\n \n
\n +
\n{t(\"Add Tier\")}
\n\n
\n {user.authenticatedRole && (\n \n
\n \n \n labelName === \"tokens\"\n ? handleNumberInput(e, value)\n : handleChange(e)\n }\n value={value}\n placeholder={placeholder}\n />\n {/* {label &&
\n \n );\n};\n\nTierItem.propTypes = {\n field: PropTypes.shape(),\n form: PropTypes.shape(),\n type: PropTypes.string,\n cssClass: PropTypes.string,\n containerWidth: PropTypes.number,\n placeholder: PropTypes.string,\n labelName: PropTypes.string,\n label: PropTypes.bool,\n Icon: PropTypes.node,\n currencyValueName: PropTypes.string,\n tokenValue: PropTypes.shape()\n};\n\nexport default TierItem;\n","import React from \"react\";\nimport { getIn } from \"formik\";\nimport PropTypes from \"prop-types\";\n\nconst CurrencyField = ({\n field: { name, value },\n form: { errors, touched, setFieldValue, handleChange, handleBlur },\n tokenValue,\n tokenValueName\n}) => {\n const errorMessage = getIn(errors, name);\n const touchedInput = getIn(touched, name);\n\n const handleNumberInput = (e, previousValue) => {\n let inputValue = e.target.validity.valid\n ? parseInt(e.target.value, 0)\n : previousValue;\n if (isNaN(inputValue)) {\n inputValue = \"\";\n }\n setFieldValue(e.target.name, inputValue);\n if (inputValue % tokenValue.worth === 0) {\n setFieldValue(\n tokenValueName,\n inputValue === \"\" ? \"\" : inputValue / tokenValue.worth\n );\n } else {\n setFieldValue(tokenValueName, \"\");\n }\n };\n\n return (\n \n {touchedInput ? errorMessage : \"\"}\n
\n\n {Icon && (\n \n {Icon}\n
\n )}\n {labelName}
} */}\n\n
\n );\n};\n\nCurrencyField.propTypes = {\n field: PropTypes.shape(),\n form: PropTypes.shape(),\n tokenValue: PropTypes.shape(),\n tokenValueName: PropTypes.string\n};\n\nexport default CurrencyField;\n","import styled from \"styled-components\";\n\nconst TiersFormStyles = styled.div`\n display: flex;\n align-items: center;\n flex-direction: column;\n justify-content: center;\n width: 500px;\n\n .circleLogoContainer {\n width: 126px;\n height: 126px;\n margin-bottom: 30px;\n }\n\n .title {\n font-size: 32px;\n font-weight: bold;\n font-stretch: normal;\n font-style: normal;\n line-height: 0.81;\n letter-spacing: normal;\n text-align: center;\n color: #4b4b4b;\n margin-bottom: 30px;\n }\n\n .text {\n width: 532px;\n padding: 0 20px;\n font-size: 14px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.57;\n letter-spacing: normal;\n text-align: center;\n color: #4b4b4b;\n margin-bottom: 10px;\n }\n\n .tiersContainer {\n padding-top: 10px;\n max-height: 180px;\n width: 500px;\n overflow-y: auto;\n overflow-x: hidden;\n border-radius: 4px;\n margin-bottom: 20px;\n background-color: #f7f7f7;\n }\n\n .labelsContainer {\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n width: 100%;\n font-size: 11px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: 2.18;\n letter-spacing: -0.18px;\n color: #373737;\n\n .firstLabel {\n width: 138px;\n }\n\n .secondLabel {\n width: 138px;\n }\n\n .thirdLabel {\n width: 100px;\n display: flex;\n align-items: center;\n\n .iconContainer {\n width: 12px;\n height: 12px;\n background: #a1a3a7;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #ffffff;\n font-size: 6px;\n font-weight: bold;\n margin-left: 8px;\n }\n\n .tooltip {\n width: 118px;\n /* height: 107px; */\n background: #282a3b !important;\n border: 1px solid #282a3b !important;\n padding: 0;\n border-radius: 4px;\n font-size: 13px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.85;\n letter-spacing: -0.22px;\n color: #ffffff;\n text-align: center;\n }\n\n .tooltip:after {\n border-top: 8px solid #282a3b !important;\n margin-left: -3px !important;\n }\n }\n\n .forthLabel {\n width: 37px;\n }\n }\n\n .tierItem {\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n height: 37px;\n margin-bottom: 20px;\n }\n\n .tierNameInput {\n width: 138px;\n height: 34px;\n border: solid 1px #979797;\n border-radius: 4px;\n outline: none;\n font-size: 16px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #1568bf;\n padding: 0 5px;\n }\n\n .tokensContainer {\n display: flex;\n align-items: center;\n height: 42px;\n position: relative;\n width: 100px;\n\n .tokenValueInput {\n width: 100%;\n height: 34px;\n margin-right: 11px;\n border-radius: 4px;\n border: solid 1px #979797;\n outline: none;\n padding: 0 5px 0 37px;\n font-size: 16px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #5d5d5d;\n position: absolute;\n }\n }\n\n .currencyContainer {\n height: 42px;\n display: flex;\n align-items: center;\n position: relative;\n width: 150px;\n\n .currencyValueInput {\n width: 100%;\n height: 34px;\n margin-right: 11px;\n border-radius: 4px;\n border: solid 1px #979797;\n outline: none;\n font-size: 16px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #5d5d5d;\n position: absolute;\n padding: 0 38px 0 10px;\n }\n }\n\n .label {\n font-size: 12px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #5d5d5d;\n position: absolute;\n right: 10px;\n }\n\n .removeTierButton {\n width: 34px;\n height: 34px;\n border-radius: 4px;\n border: 1px solid #1568bf;\n background-color: #1568bf;\n display: flex;\n align-items: center;\n justify-content: center;\n outline: none;\n cursor: pointer;\n font-size: 16px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n text-align: center;\n color: #ffffff;\n display: flex;\n align-items: center;\n margin: 11px 0 0 10px;\n }\n\n .addTierButton {\n width: 209px;\n min-height: 27px;\n border-radius: 4px;\n border: 1px solid #1568bf;\n background-color: #1568bf;\n display: flex;\n align-items: center;\n justify-content: center;\n outline: none;\n cursor: pointer;\n\n p {\n font-size: 14px;\n font-weight: normal;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n text-align: center;\n color: #ffffff;\n display: flex;\n align-items: center;\n }\n }\n\n input::placeholder {\n color: #0000004d;\n }\n\n input[type=\"number\"]::-webkit-inner-spin-button {\n -webkit-appearance: none;\n display: none;\n }\n`;\n\nexport default TiersFormStyles;\n","import { apiService } from \"../api.service\";\nimport { TokenValue } from \"../../../models/domain\";\nimport { HrOnboardingPayload } from \"../../../models/server/payloads\";\nimport { HrOnboardingResponse } from \"../../../models/server/responses\";\n\nexport const getTokenValue = async () => {\n const response = await apiService.get(\"/hr/token\");\n if (response.hasError) return response;\n\n return new TokenValue(response.data);\n};\n\nexport const submitOnboarding = async values => {\n const payloadData = new HrOnboardingPayload(values);\n const response = await apiService.post(\n \"/hr/add-employee-from-excel\",\n payloadData.payload\n );\n if (response.hasError) return response;\n return new HrOnboardingResponse(response);\n};\n\nexport const finishOnboarding = async () => {\n const response = await apiService.patch(\"/users/hr/onboarding\");\n return response;\n};\n","import React, { useEffect, useState, useRef } from \"react\";\nimport ReactTooltip from \"react-tooltip\";\nimport { toast } from \"react-toastify\";\nimport { FieldArray, Field } from \"formik\";\nimport PropTypes from \"prop-types\";\n// assets\nimport {\n BenefitLogoIcon,\n TokenIcon,\n InfoIconSvg\n} from \"../../../../assets/Icons\";\n// components\nimport TierItem from \"./TierItem\";\nimport CurrencyField from \"./CurrencyField\";\n// styles\nimport TiersFormStyles from \"./TierFormStyles\";\n// services\nimport * as api from \"../../../../services/api/hr/onboarding.service\";\nimport { useTranslation } from \"react-i18next\";\n\nconst TiersForm = ({ values, errors }) => {\n const { t } = useTranslation();\n const [tokenValue, setTokenValue] = useState({ currency: \"RSD\", worth: 0 });\n const isMounted = useRef(true);\n\n const fetchTokenValue = async () => {\n const response = await api.getTokenValue();\n if (response.hasError) {\n return toast.error(\n response.errorMessage\n ? response.errorMessage\n : t(\"failed_to_get_token_value\")\n );\n }\n if (isMounted.current) {\n setTokenValue(response);\n }\n };\n\n useEffect(() => {\n fetchTokenValue();\n\n return () => {\n isMounted.current = false;\n };\n }, []);\n\n return (\n \n {touchedInput ? errorMessage : \"\"}\n
\n\n
\n {tokenValue.currency}
\n\n
\n Benefiti
\n{t(\"benefiti_welcome\")}
\n{t(\"first_time_setup\")}
\n{t(\"add_tiers_info\")}
\n\n {errors && errors.tiers && typeof errors.tiers === \"string\"\n ? errors.tiers\n : \"\"}\n
\n\n \n
\n Value (RSD)
\n \n {t(\"Tokens\")}\n \n {\" \"}\n \n 1 token = {tokenValue.worth} RSD\n \n
\n \n \n {values.tiers.map((tier, index) => (\n // eslint-disable-next-line\n
\n \n )}\n\n \n
\n ))}\n \n remove(index)}\n className=\"removeTierButton\"\n >\n X\n \n
\n +
\n{t(\"Add Tier\")}
\n \n \n )}\n{t(\"add_employees\")}
\n\n
\n \n
\n \n downloadCSV()}\n >\n {t(\"download\")}\n \n
\n \n {stepStatusState.step1Status === \"completed\" ? (\n
\n {t(\"download_template\")}
\n{t(\"download_template_info\")}
\n\n
\n \n
\n \n {stepStatusState.step2Status === \"completed\" ? (\n
\n \n {\n e.target.value = null;\n }}\n onChange={e => uploadCSV(e)}\n style={{ display: \"none\" }}\n />\n
\n {t(\"step2_title_employees\")}
\n{t(\"step2_text_1\")}
\n{t(\"step2_text_2\")}
\n{t(\"required_fields_employees\")}
\n{t(\"step2_title_bonuses\")}
\n{t(\"step2_text_3\")}
\n- \n
- {t(\"bonus_type_info\")} \n
- {t(\"bonus_start_date_info\")} \n
- {t(\"bonus_end_date_info\")} \n
- {t(\"bonus_type_default_info\")} \n
- \n {t(\"required_fields_bonuses\")}\n \n
{t(\"upload_the_file\")}
\n\n {\n document.getElementById(\"csv\").click();\n }}\n onBlur={() => handleBlur(\"csvFile\", true)}\n className=\"uploadButton\"\n type=\"button\"\n >\n {t(\"upload\")}\n \n
\n \n {values.csvFile && (\n
\n {values.csvFile.name}
\n )}\n {errors.csvFile && (\n\n {errors.csvFile && touched.csvFile ? errors.csvFile : \"\"}\n
\n )}\n\n
\n \n
\n \n {stepStatusState.step3Status === \"completed\" ? (\n
\n \n
\n {t(\"submit_the_file\")}
\n {disableButton ? (\n \n ) : (\n \n )}\nYou are all done!
\n\n {/* Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\t\t\t\tNam condimentum elit vel diam mattis, quis faucibus dolor dignissim.\n\t\t\t\tNam condimentum elit vel diam mattis. Morbi congue blandit turpis. */}\n
\n\n
\n Recap:
\n\n {newTiersAndEmployees ? newTiersAndEmployees.newTiers : 0} tiers made\n
\n\n {newTiersAndEmployees ? newTiersAndEmployees.newEmployees : 0}{\" \"}\n employees added\n
\n\n {newTiersAndEmployees === undefined && (\n skipOnboarding()}\n >\n Skip onboarding {\">>\"}\n \n )}\n
\n \n
\n \n submitForm(values, actions)}\n validationSchema={onboardingValidationsSchema}\n >\n {({\n values,\n handleChange,\n errors,\n setFieldValue,\n touched,\n setFieldTouched,\n handleSubmit,\n isSubmitting\n }) => (\n <>\n {\n e.preventDefault();\n if (JSON.stringify(errors) !== \"{}\") {\n return toast.warning(t(\"fill_form_warning\"));\n }\n handleSubmit();\n }}\n autoComplete=\"off\"\n >\n
\n \n
\n \n\n \n setFormStep(formStep - 1)}\n >\n setFormStep(formStep + 1)}\n disabled={\n newTiersAndEmployees !== undefined || formStep === 3\n }\n >\n
\n \n )}\n \n \n {formSteps.map(state => (\n
\n \n X\n
\n {children}\n \n \n \n setFieldValue(\"categories\", option)}\n selectedValues={values.categories}\n shouldHaveFullWidth\n shouldHaveFullHeigth\n />\n
\n \n {!isHr && (\n \n
\n \n {errors.name && touched.name ? errors.name : \"\"}\n
\n \n \n
\n \n {errors.categories && touched.categories\n ? errors.categories\n : \"\"}\n
\n \n \n
\n \n
\n \n {errors.summary && touched.summary ? errors.summary : \"\"}\n
\n \n \n
\n \n {errors.description && touched.description\n ? errors.description\n : \"\"}\n
\n \n
\n\n \n
\n \n {errors.photo && touched.photo ? errors.photo : \"\"}\n
\n \n {disableButton ? (\n \n ) : (\n \n )}\n \n
\n {t(\"add_local_benefit_groups\")}
\n {/*{t(\"edit_local_benefit_group\")}
\n \n\n
\n )}\n \n
\n \n
\n \n
\n \n {values.vouchers.map((voucher, i) => (\n <>\n
\n {isAdmin && (\n \n \n handleBenefitPredefinedValuesChange(\n e,\n i,\n !voucher.predefinedValuesOnly,\n \"predefined\"\n )\n }\n />\n \n
\n \n \n handleBenefitPredefinedValuesChange(\n e,\n i,\n !voucher.isReimbursement,\n \"refund\"\n )\n }\n />\n \n
\n \n removeVoucher(voucher.id)}\n className=\"removeTierButton\"\n >\n X\n \n
\n \n ))}\n \n \n handleNameChange(e, i)}\n className=\"voucherNameInput\"\n />\n
\n \n handlePriceChange(e, i)}\n value={voucher.price}\n className=\"voucherPriceInput\"\n />\n
\n \n
\n \n {errors.vouchers && touched.vouchers ? errors.vouchers : \"\"}\n
\n \n setFieldValue(\"expiration\", option.name)}\n customId=\"expirationId\"\n shouldHaveHight={false}\n />\n
\n {values.expiration === \"month\" && (\n \n
\n \n
\n \n
\n \n {errors.title && touched.title ? errors.title : \"\"}\n
\n \n \n
\n \n {errors.expiration && touched.expiration ? errors.expiration : \"\"}\n
\n \n \n
\n \n \n
\n \n {errors.tokenPrice && touched.tokenPrice\n ? errors.tokenPrice\n : \"\"}\n
\n \n
\n \n
\n \n {errors.summary && touched.summary ? errors.summary : \"\"}\n
\n \n \n
\n \n {errors.description && touched.description\n ? errors.description\n : \"\"}\n
\n \n handleBenefitPublishedStatus()}\n />\n \n
\n \n )}\n {isEdit && values.isDraft && (\n publishBenefit()}>\n {t(\"publish_benefit\")}\n \n )}\n \n \n {disableButton ? (\n \n ) : (\n \n )}\n closeModal()}\n margin=\"0 0 0 0\"\n outline\n >\n {t(\"cancel\")}\n \n
\n {t(\"add_local_benefit\")}
\n \n{t(\"edit_local_benefit\")}
\n \n\n
\n \n
\n \n
\n {benefitGroup.name}
\n\n {benefitGroup.benefits.length} {t(\"benefits\")}\n
\n\n {\n e.stopPropagation();\n setChosenBenefitGroupId(benefitGroup.id);\n openModal(\"editLocalBenefitGroup\");\n }}\n >\n
\n \n {benefits.map(benefit => (\n {\n setChosenBenefitId(benefit.id);\n setBenefit(benefit);\n }}\n key={benefit.id}\n >\n \n \n
\n \n
\n \n {benefit.title}
\n{benefit.summary}
\n\n {\n e.stopPropagation();\n setChosenBenefitId(benefit.id);\n setBenefit(benefit);\n openModal(\"editLocalBenefitOfBenefitGroup\");\n }}\n >\n
\n \n
\n +
\n{t(\"add_benefit\")}
\n \n\n
\n \n )}\n \n {\n e.stopPropagation();\n onClickDots();\n }}\n onBlur={() => handleBlur()}\n >\n (myTooltip.current = ref)}\n className=\"tooltip\"\n getContent={dataTip => {\n if (!dataTip) {\n return \"\";\n }\n\n const [id, draft] = dataTip.split(\"|\");\n\n return (\n openEditBenefit(id)}\n benefitId={id}\n isDraft={JSON.parse(draft)}\n hideTooltip={() => {\n myTooltip.current.tooltipRef = null;\n ReactTooltip.hide();\n }}\n fetchData={fetchData}\n />\n );\n }}\n border\n clickable\n />\n
\n {truncate(benefit.title, 20)}
\n {benefit.isDraft && (\n {t(\"Draft\")}\n )}\n{benefit.summary}
\n\n
\n \n {t(\"Budget\")}:\n
\n\n {transformTokensToRsd(benefit.tokenPrice)}\n
\n {transformTokenCurrencyIcons()}\n\n
\n {t(\"duration_type\")}:
\n{t(benefit.expiration)}
\n\n \n \n {\n removeHeightOnClick(benefitGroup.id);\n removeCardView(benefitGroup.id);\n document.getElementById(\n `subRowContentContainer${benefitGroup.id}`\n ).style.borderTop = \"\";\n }}\n >\n x\n
\n \n \n
\n \n \n \n \n {chosenBenefit && (\n
\n \n {isLoading ? (\n \n
\n ) : (\n \n
\n +
\n{t(\"add_local_benefit_groups\")}
\n \n\n {localBenefitGroups.map(benefitGroup => (\n \n
\n )}\n\n \n \n
\n \n {isLoading ? (\n \n
\n ) : (\n \n \n
\n \n handleSetChosenCompanies(option)}\n selectedValues={chosenCompanies}\n fetchMoreData={refetchCompanies}\n />\n
\n \n handleSetChosenRoles(option)}\n selectedValues={chosenRoles}\n />\n
\n \n
\n \n prevDay()}\n >\n {t(\"prev_day\")}\n \n handleDateChange(chosenDate)}\n required\n maxDate={new Date()}\n value={date}\n />\n nextDay()}\n >\n {t(\"next_day\")}\n \n
\n \n {logs.length > 0 ? (\n
\n ) : (\n \n
\n \n
\n \n {logs.map((log, index) => {\n if (logs.length === index + 1) {\n return (\n \n
\n );\n }\n return (\n \n
\n \n {`${`0${log.createdAt.getHours()}`.slice(\n -2\n )}:${`0${log.createdAt.getMinutes()}`.slice(\n -2\n )}`}\n
\n\n \n
\n \n
\n {renderLog(log)}
\n\n
\n );\n })}\n \n
\n \n {`${`0${log.createdAt.getHours()}`.slice(\n -2\n )}:${`0${log.createdAt.getMinutes()}`.slice(\n -2\n )}`}\n
\n\n \n
\n \n
\n {renderLog(log)}
\n\n {t(\"no_activity_logs\")}\n {formatDateForPlaceholder(date)}\n
\n \n )}\n \n \n )}\n \n \n\n
\n\n \n
\n \n
\n {provider.name}
\n {/*{provider.category}
*/}\n\n {\n e.stopPropagation();\n setChosenProvider();\n openModal(\"editProvider\");\n }}\n >\n
\n \n {isActive &&
\n {isActive ? (\n {t(\"on\")}
}\n \n {!isActive &&{t(\"off\")}
}\n{t(\"provider_enabled\")}
\n ) : (\n{t(\"provider_disabled\")}
\n )}\n\n
\n \n \n
\n \n {errors.name && touched.name ? errors.name : \"\"}\n
\n \n \n
\n \n {errors.summary && touched.summary ? errors.summary : \"\"}\n
\n \n \n
\n \n {errors.description && touched.description\n ? errors.description\n : \"\"}\n
\n \n \n
\n \n {errors.photo && touched.photo ? errors.photo : \"\"}\n
\n \n
\n \n {disableButton ? (\n \n ) : (\n \n )}\n closeModal()}\n margin=\"0 0 0 0\"\n outline\n >\n {t(\"cancel\")}\n \n
\n {t(\"add_provider\")}
\n \n{t(\"edit_provider\")}
\n \n\n
\n \n \n
\n \n {errors.name && touched.name ? errors.name : \"\"}\n
\n \n \n
\n \n {errors.categories && touched.categories\n ? errors.categories\n : \"\"}\n
\n \n \n
\n \n {errors.companyId && touched.companyId\n ? errors.companyId\n : \"\"}\n
\n \n \n
\n \n {errors.taxes && touched.taxes ? errors.taxes : \"\"}\n
\n \n setFieldValue(\"isRemote\", !values.isRemote)}\n />\n \n
\n \n \n \n
\n \n {errors.cities && touched.cities ? errors.cities : \"\"}\n
\n \n \n
\n \n {errors.summary && touched.summary ? errors.summary : \"\"}\n
\n \n \n
\n \n {errors.description && touched.description\n ? errors.description\n : \"\"}\n
\n \n handleBenefitGroupPublishedStatus()}\n />\n \n
\n \n )}\n {isEdit && values.isDraft && (\n \n \n
\n \n {errors.photo && touched.photo ? errors.photo : \"\"}\n
\n \n {disableButton ? (\n \n ) : (\n \n )}\n closeModal()}\n margin=\"0\"\n outline\n >\n {t(\"cancel\")}\n \n
\n \n )}\n {t(\"add_benefit_group\")}
\n \n{t(\"edit_bg\")}
\n {isLoading ? (\n\n setFieldValue(\"expiration\", option.name)}\n customId=\"expirationId\"\n shouldHaveHight={false}\n />\n
\n \n\n \n
\n \n \n
\n \n {errors.title && touched.title ? errors.title : \"\"}\n
\n \n \n
\n \n {errors.expiration && touched.expiration\n ? errors.expiration\n : \"\"}\n
\n \n \n
\n \n {errors.quantity && touched.quantity ? errors.quantity : \"\"}\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n
\n \n {errors.tokenPrice && touched.tokenPrice\n ? errors.tokenPrice\n : \"\"}\n
\n \n \n
\n \n {errors.summary && touched.summary ? errors.summary : \"\"}\n
\n \n \n \n
\n \n {errors.description && touched.description\n ? errors.description\n : \"\"}\n
\n \n \n
\n \n {errors.usageInstructions && touched.usageInstructions\n ? errors.usageInstructions\n : \"\"}\n
\n \n handleBenefitPublishedStatus()}\n />\n \n
\n \n )}\n {isEdit && values.isDraft && (\n publishBenefit()}>\n {t(\"publish_benefit\")}\n \n )}\n \n \n \n {filteredTags(\"getChosenIds\").length > 0 && (\n
\n \n\n \n showTagInput()}\n padding=\"0\"\n margin=\"0 20px 0 0\"\n >\n {t(\"add_tag\")}\n \n {showBenefitTagInput && (\n
\n\n \n {\n addTag(\"tags\");\n setSelectedTag(\"\");\n }}\n width=\"100px\"\n padding=\"0\"\n margin=\"0 0 0 20px\"\n >\n {t(\"submit_tag\")}\n \n
\n )}\n \n {\n handleTagChange(\"\", option.id);\n setSelectedTag(option);\n }}\n />\n
\n \n {sortTagsByChosenOrder(filteredTags(\"getChosenIds\")).map(\n (tag, index) => (\n
\n )}\n \n removeTag(\"tags\", index)}\n className=\"removeTagButton\"\n type=\"button\"\n >\n X\n \n
\n )\n )}\n {tag.name}
\n\n {disableButton ? (\n \n ) : (\n \n )}\n\n \n
\n {t(\"add_benefit\")}
\n \n{t(\"edit_benefit\")}
\n \n\n X\n
\n {children}\n \n \n
\n \n {title}
\n{description}
\n {taxes &&{taxes}
}\n\n {isDraft && isBenefitGroup && (\n {\n e.stopPropagation();\n openModalPreviewModalAction();\n }}\n >\n {t(\"preview\")}\n
\n )}\n \n \n
\n )}\n \n
\n \n \n {\n e.stopPropagation();\n onClickDots();\n }}\n onBlur={() => handleBlur()}\n >\n (myTooltip.current = ref)}\n className=\"tooltip\"\n getContent={dataTip => {\n if (!dataTip) {\n return \"\";\n }\n\n return (\n {\n myTooltip.current.tooltipRef = null;\n ReactTooltip.hide();\n }}\n fetchData={fetchData}\n />\n );\n }}\n border\n clickable\n />\n
\n {truncate(benefitDetails.title, 20)}
\n {benefitDetails.isDraft && (\n {t(\"Draft\")}\n )}\n{benefitDetails.summary}
\n\n
\n \n {benefitDetails.expiration === \"voucher\"\n ? t(\"vouch_price\")\n : t(\"Budget\")}\n
\n\n {transformPriceRangeTokensToPriceRangeRsd(generatePrice())}\n
\n {transformTokenCurrencyIcons()}\n\n
\n {t(\"duration_type\")} :
\n\n {t(benefitDetails.expiration)}\n
\n\n
\n \n
\n \n {\n removeHeightOnClick(provider.id);\n removeCardView(provider.id);\n }}\n >\n x\n
\n \n
\n \n
\n \n
\n \n openModal(\"editProvider\")}\n >\n
\n \n openModal(\"editProvider\")}\n >\n
\n {provider.name}
\n\n
\n \n {provider.summary}\n
\n\n
\n \n {provider.benefitGroups && (\n openModal(\"addBenefitGroup\")}\n >\n
\n \n
\n +
\n{t(\"add_benefit_group\")}
\n\n
\n \n {\n if (chosenBenefitGroupId) {\n openModal(\"addBenefit\");\n } else {\n toast.info(t(\"select_benefit_group_warning\"));\n }\n }}\n >\n
\n \n
\n +
\n{t(\"add_benefit\")}
\n\n \n \n
\n {providers.map(provider => (\n \n {isLoading ? (\n \n
\n ) : (\n \n \n handleSetChosenCategories(option)}\n selectedValues={chosenCategories}\n />\n
\n \n handleSelectingSortOption(option)}\n />\n
\n \n
\n \n \n setShowDropdown(state => !state)}\n ref={dropdownRef}\n >\n {t(\"unique_user_sub\")}\n
\n {showDropdown && (\n {listOfUserBenefits.length}
\n\n {Object.entries(companySubscriptions).map(([key, value]) => {\n return (\n
\n )}\n \n {key}: {value}\n
\n );\n })}\n \n
\n \n
\n \n setShowDatePicker(state => !state)}\n >\n {t(\"Select Date\")}\n \n {showDatePicker && (\n \n
\n \n {startDate\n ? moment(startDate).format(\"DD/MM/YYYY\")\n : \"??/??/????\"}{\" \"}\n -{\" \"}\n {endDate\n ? moment(endDate).format(\"DD/MM/YYYY\")\n : \"??/??/????\"}\n
\n \n )}\n \n setShowRollover(state => !state)}\n >\n {t(\"show_rollover_dates\")}\n \n {showRollover && (\n \n \n \n
\n )}\n \n );\n};\n\nexport default ResetDates;\n","import { apiService } from \"../api.service\";\n\nexport const getStatistics = async (company, searchDateString, reportType) => {\n const query =\n company === \"All Companies\"\n ? `/dashboard/report/statistics?date=${searchDateString}&report_type=${reportType}`\n : `/dashboard/report/statistics?company_id=${company}&date=${searchDateString}&report_type=${reportType}`;\n\n const response = await apiService.get(query);\n\n if (response.hasError) {\n return response;\n }\n\n return response;\n};\n","import React, { useEffect, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport {\n Button,\n Card,\n InputLabel,\n Modal,\n openModalAnim,\n SelectInput\n} from \"../../../../components\";\nimport DatePicker from \"react-datepicker\";\nimport { reportTypeDropdownOptions } from \"../reportTypeDropdownOptions\";\nimport PrivacyPolicy from \"../../../../components/privacyPolicyModal\";\nimport { formatDateForSearch } from \"../../../HrPages/HrDashboard/dashboad.services\";\nimport * as dashboardService from \"../../../../services/api/admin/dashboard.service\";\nimport { downloadBlob } from \"../../../../services/files.utils\";\nimport * as companiesService from \"../../../../services/api/admin/companies.service\";\nimport { toast } from \"react-toastify\";\nimport { setCompanies } from \"../../../../actions/admin/companies.actions\";\nimport { useDispatch, useSelector } from \"react-redux\";\n\nexport const UserReport = () => {\n const dispatch = useDispatch();\n\n const [showReport, setShowReport] = useState(false);\n const [reportType, setReportType] = useState(undefined);\n const [company, setCompany] = useState(undefined);\n const [date, setDate] = useState(new Date());\n const [searchDateString, setSearchDateString] = useState(\n formatDateForSearch(new Date())\n );\n const isMounted = useRef(false);\n const [companiesPage, setCompaniesPage] = useState(1);\n const [totalPages, setTotalPages] = useState(1);\n\n const { t } = useTranslation();\n const user = useSelector(state => state.app.user);\n const companies = useSelector(state => state.companies.companies);\n\n const handleDateChange = chosenDate => {\n setDate(chosenDate);\n setSearchDateString(formatDateForSearch(chosenDate));\n };\n\n const getStatistics = async () => {\n const response = await dashboardService.getStatistics(\n company,\n searchDateString,\n reportType\n );\n\n if (response.hasError) {\n return toast.error(\n response.errorMessage\n ? response.errorMessage\n : t(\"failed_to_get_statistics\")\n );\n }\n\n downloadBlob(response.data, \"export.csv\", \"text/csv;charset=utf-8;\");\n };\n\n /**\n * Refetches paginated companies.\n * Fired from on scroll event from select input.\n * Sets new companies to state, along with page number.\n */\n const refetchCompanies = async () => {\n let currentPage = companiesPage;\n let newPage = (currentPage += 1);\n\n if (newPage > totalPages) return;\n\n setCompaniesPage(newPage);\n\n const response = await companiesService.getCompanies({ page: newPage });\n if (response.hasError) {\n return toast.error(\n response.errorMessage\n ? response.errorMessage\n : t(\"failed_to_get_companies\")\n );\n }\n\n let newCompanies = [];\n setTimeout(() => {\n newCompanies = [...companies, ...response.companies];\n setTimeout(() => {\n console.log(newCompanies);\n\n dispatch(setCompanies(newCompanies));\n }, 100);\n }, 100);\n };\n const getCompanies = async () => {\n const response = await companiesService.getCompanies({\n page: companiesPage\n });\n\n if (response.hasError) {\n return toast.error(\n response.errorMessage\n ? response.errorMessage\n : t(\"failed_to_get_companies\")\n );\n }\n\n const formattedResponse = [\n { id: \"All Companies\", name: \"All Companies\" },\n ...response.companies\n ];\n\n dispatch(setCompanies(formattedResponse));\n setTotalPages(response.pages);\n };\n\n useEffect(() => {\n isMounted.current = true;\n getCompanies();\n }, []);\n\n useEffect(() => {\n if (\n isMounted.current &&\n user.authenticatedRole &&\n !user.hasAcceptedPrivacyPolicy\n ) {\n setTimeout(() => {\n openModalAnim();\n }, 500);\n }\n }, []);\n\n return (\n \n \n {rolloverInfo !== undefined\n ? rolloverInfo !== null\n ? moment(rolloverInfo.rolloverEndDate).format(\"DD.MM.YYYY\")\n : t(\"no_rollover\")\n : \"\"}\n \n
\n {t(\"rollover_resets\")}
\n\n setShowReport(state => !state)}\n >\n {t(\"show_usage_report\")}\n \n {showReport && (\n \n \n \n\n {isMounted.current &&\n user.authenticatedRole &&\n !user.hasAcceptedPrivacyPolicy && (\n \n \n )}\n
\n )}\n \n );\n};\n","import React from \"react\";\nimport { connect } from \"react-redux\";\n\nimport styled from \"styled-components\";\n\nimport { Header } from \"../../../components\";\n\nimport * as actionCreators from \"../../../actions/admin/companies.actions\";\n\nimport { DashboardStatistics } from \"./DashboardStatistics/DashboardStatistics\";\nimport { useTranslation } from \"react-i18next\";\nimport ResetDates from \"./ResetDates/ResetDates\";\nimport { UserReport } from \"./UserReport/UserReport\";\nimport { apiService } from \"../../../services/api/api.service\";\n\nconst DashboardStyles = styled.section`\n width: calc(100% - 210px);\n margin-left: 210px;\n background: whitesmoke;\n\n .content {\n padding: 0 30px 30px 30px;\n height: 100vh;\n }\n\n .optionsContainer {\n width: 200px;\n }\n\n .title {\n font-size: 16px;\n font-weight: 500;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n color: #4b4b4b;\n text-transform: uppercase;\n text-align: center;\n margin-bottom: 20px;\n }\n\n .datePickerInput {\n height: 24px;\n width: 200px;\n outline: none;\n text-align: center;\n font-size: 16px;\n font-weight: 600;\n border: 1px solid #d8d8d8;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.57;\n letter-spacing: normal;\n text-align: center;\n color: #4b4b4b;\n border-radius: 4px;\n cursor: pointer;\n position: relative;\n z-index: 2;\n\n &:hover {\n border: 1px solid #1568bf;\n z-index: 2;\n }\n }\n\n .openResetDates {\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n border-radius: 4px;\n border: solid 1px transparent;\n color: #1568bf;\n outline: #1568bf;\n background: #ffffff;\n outline-style: inset;\n outline-width: 0.5px;\n cursor: pointer;\n font-size: 14px;\n font-weight: 600;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n text-align: center;\n margin: 0;\n transition: 0.5s;\n gap: 10px;\n\n &:hover {\n background: #1568bf;\n color: white;\n }\n }\n\n .usageReportWrapper {\n position: relative;\n display: flex;\n justify-content: flex-end;\n gap: 15px;\n\n .openUsageReport {\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 10px;\n border-radius: 4px;\n border: solid 1px transparent;\n color: #1568bf;\n outline: #1568bf;\n background: #ffffff;\n outline-style: inset;\n outline-width: 0.5px;\n cursor: pointer;\n font-size: 14px;\n font-weight: 600;\n font-stretch: normal;\n font-style: normal;\n line-height: normal;\n letter-spacing: normal;\n text-align: center;\n margin: 0;\n transition: 0.5s;\n\n &:hover {\n background: #1568bf;\n color: white;\n }\n }\n }\n`;\n\nconst Dashboard = ({ companies, setCompanies, user }) => {\n const { t } = useTranslation();\n\n const handleCron = async () => {\n try {\n await apiService.get(\"dashboard/run-bonus-cron\");\n } catch (error) {\n console.log(error);\n }\n };\n\n return (\n \n getStatistics()}\n margin=\"20px 0 0 0\"\n width=\"100%\"\n >\n {t(\"download\")}\n \n
\n {t(\"gen_usr_rep\")}
\n\n handleDateChange(chosenDate)}\n value={date}\n maxDate={new Date()}\n />\n
\n \n setReportType(option.id)}\n customId=\"reportTypeId\"\n shouldHaveHight={false}\n shouldHaveFullWidth\n customHeight=\"27px\"\n />\n
\n \n {\n setCompany(option.id);\n }}\n fetchMoreData={refetchCompanies}\n customId=\"companyId\"\n shouldHaveHight={false}\n shouldHaveFullWidth\n customHeight=\"27px\"\n />\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n {isFormDisplay ? (\n \n {errors.name && touched.name ? errors.name : \"\"}\n
\n )}\n {values.name}
\n )}\n\n handleNumberInput(e, values.pib)}\n onKeyDown={e => handleKeyDown(e)}\n onBlur={handleBlur}\n />\n ) : (\n
\n \n
\n {isFormDisplay ? (\n \n {errors.pib && touched.pib ? errors.pib : \"\"}\n
\n )}\n {values.pib}
\n )}\n\n handleIdNumberInput(e, values.idNumber)}\n onBlur={handleBlur}\n />\n ) : (\n
\n \n
\n {isFormDisplay ? (\n \n {errors.idNumber && touched.idNumber ? errors.idNumber : \"\"}\n
\n )}\n {values.idNumber}
\n )}\n\n
\n \n
\n \n
\n {isFormDisplay ? (\n \n {errors.invoiceEmail && touched.invoiceEmail\n ? errors.invoiceEmail\n : \"\"}\n
\n )}\n {values.invoiceEmail}
\n )}\n\n
\n \n
\n {isFormDisplay ? (\n \n {errors.address && touched.address ? errors.address : \"\"}\n
\n )}\n {values.address}
\n )}\n\n
\n \n setFieldValue(\"contact\", phone)}\n value={values.contact}\n onBlur={handleBlur}\n />\n ) : (\n
\n \n
\n {isFormDisplay ? (\n \n {errors.contact && touched.contact ? errors.contact : \"\"}\n
\n )}\n {values.contact}
\n )}\n\n \n setFieldValue(\"paymentDeadline\", option.name)\n }\n customHeight=\"27px\"\n />\n ) : (\n \n {values.paymentDeadline}\n \n )}\n
\n \n
\n {isFormDisplay ? (\n \n {errors.paymentDeadline && touched.paymentDeadline\n ? errors.paymentDeadline\n : \"\"}\n
\n )}\n \n
\n \n
\n )}\n \n
\n \n
\n )}\n \n
\n \n
\n )}\n \n
\n \n
\n )}\n \n
\n \n
\n )}\n \n
\n \n
\n )}\n \n
\n \n ) : (\n <>\n {!isEmpty(values.tags) && (\n \n openAddTagInput()}\n padding=\"0\"\n margin=\"0 30px 0 0\"\n width=\"100px\"\n >\n {t(\"add_tag\")}\n \n {isAddTagOpen && (\n
\n \n addTag(setFieldValue, values, tagObj)}\n disabled={!tagObj}\n padding=\"0\"\n margin=\"0 30px 0 0\"\n width=\"100px\"\n >\n {t(\"add_tag\")}\n \n
\n )}\n \n {\n handleTagChange(tags, option.id);\n }}\n value={tagObj}\n customHeight=\"27px\"\n />\n
\n \n {!isEmpty(values.tags) && (\n
\n \n {values.tags.map(tag => (\n
\n )}\n \n removeTag(tag.id)}\n className=\"removeTagButton\"\n type=\"button\"\n >\n X\n \n
\n ))}\n {tag.name}
\n\n
\n )}\n \n )}\n \n {values.tags?.map(tag => (\n
\n \n
\n ))}\n {tag.name}
\n\n
\n \n
\n \n {errors.photo && touched.photo ? errors.photo : \"\"}\n
\n )}\n \n {isFormDisplay ? (\n
\n \n \n \n openAddCompany(setIsAddCompanyOpen)}\n >\n
\n \n {isLoading ? (\n \n
\n ) : (\n \n
\n {t(\"add_company\")}\n \n +
\n\n {tableHeaders.map(\n ({\n id,\n headName,\n isSortable,\n isSortedUp,\n width,\n justifyContent,\n margin\n }) => (\n
\n\n \n {!isEmpty(companies) ? (\n companies.map(\n ({\n id,\n name,\n pib,\n paymentDeadline,\n invoiceEmail,\n idNumber,\n address,\n contact,\n tags\n }) => (\n
\n \n No results found\n
\n )}\n \n
\n )}\n \n \n \n \n \n \n )}\n \n )}\n
\n \n \n {isLoading ? (\n \n
\n ) : (\n \n \n history.push(`/companies/edit/${match.params.id}`)\n }\n >\n Edit\n \n history.push(\"/companies\")}\n >\n Back\n \n
\n {company.tiers.length > 0 && (\n \n {company.tiers.map(tier => (\n
\n \n
\n ))}\n {tier.name}
\n\n {tier.tokens} Tokens\n
\n\n \n handleSubmit(e)}\n >\n \n )}\n
\n \n \n {isLoading ? (\n \n
\n ) : (\n \n {disableButton ? (\n \n ) : (\n \n {t(\"Update\")}\n \n )}\n history.push(\"/companies\")}\n width=\"130px\"\n margin=\"0\"\n outline\n padding=\"10px 25px\"\n >\n {t(\"cancel\")}\n \n
\n \n {name}
\n\n
\n \n \n
\n \n {errors.name && touched.name ? errors.name : \"\"}\n
\n {t(\"Add Company tag\")}
\n \n{t(\"edit_company_tag\")}
\n \n\n
\n \n \n
\n \n {errors.name && touched.name ? errors.name : \"\"}\n
\n {t(\"add_benefit_tag\")}
\n \n{t(\"edit_benefit_tag\")}
\n \n\n
\n \n
\n \n {errors.name && touched.name ? errors.name : \"\"}\n
\n \n
\n \n \n
\n {t(\"add_category\")}
\n \n{t(\"edit_category\")}
\n \n{t(\"add_cities\")}
\n \n\n \n
\n ) : (\n \n \n {\n openModal({ setModalType, modalType: \"ADD_COMPANY_TAG\" });\n }}\n editItem={id => {\n setChosenID(id);\n openModal({ setModalType, modalType: \"EDIT_COMPANY_TAG\" });\n }}\n removeItem={async id => {\n const result = confirm(t(\"delete_company_tag_question\"));\n if (result) {\n const response = await companyTagService.removeCompanyTag(\n id\n );\n\n if (response.hasError) {\n return toast.error(\n response.errorMessage\n ? response.errorMessage\n : t(\"failed_to_delete_company_tag\")\n );\n }\n\n deleteCompanyTag(id);\n toast.success(t(\"success_delete_company_tag\"));\n }\n }}\n />\n {\n openModal({ setModalType, modalType: \"ADD_BENEFIT_TAG\" });\n }}\n editItem={id => {\n setChosenID(id);\n openModal({ setModalType, modalType: \"EDIT_BENEFIT_TAG\" });\n }}\n removeItem={async id => {\n const result = confirm(\n \"Are you sure you want to delete this benefit tag?\"\n );\n if (result) {\n const response = await benefitTagService.removeBenefitTag(\n id\n );\n\n if (response.hasError) {\n return toast.error(\n response.errorMessage\n ? response.errorMessage\n : t(\"failed_to_delete_benefit_tag\")\n );\n }\n\n deleteBenefitTag(id);\n toast.success(t(\"success_delete_benefit_tag\"));\n }\n }}\n />\n {\n openModal({ setModalType, modalType: \"ADD_CATEGORY\" });\n }}\n editItem={id => {\n setChosenID(id);\n openModal({ setModalType, modalType: \"EDIT_CATEGORY\" });\n }}\n removeItem={async id => {\n const result = confirm(\n t(\"delete_benefit_group_category_question\")\n );\n\n if (result) {\n const response = await categoriesService.removeCategory(id);\n\n if (response.hasError) {\n return toast.error(\n response.errorMessage\n ? response.errorMessage\n : t(\"failed_to_delete_benefit_group_category\")\n );\n }\n\n deleteCategory(id);\n toast.success(t(\"success_delete_benefit_group_category\"));\n }\n }}\n />\n {\n openModal({ setModalType, modalType: \"ADD_CITY\" });\n }}\n editItem={() => {}}\n removeItem={async id => {\n const result = confirm(t(\"delete_city_question\"));\n\n if (!result) return;\n\n try {\n const response = await apiService.delete(`cities/${id}`);\n\n await fetchCities();\n\n toast.success(response.data.message);\n } catch (error) {\n toast.error(t(\"failed_to_delete_city\"));\n }\n }}\n />\n \n
\n )}\n \n {modalType && (\n \n {\n setFieldTouched(\"message\", true);\n }}\n editorState={convertStringToEditorState(values.message)}\n editorStyle={{ fontSize: 14 }}\n stripPastedStyles={true}\n onEditorStateChange={editorState =>\n setFieldValue(\"message\", editorState)\n }\n toolbar={{\n options: [\n \"inline\",\n \"fontSize\",\n \"list\",\n \"textAlign\",\n \"colorPicker\",\n \"link\",\n \"emoji\",\n \"remove\",\n \"history\"\n ],\n fontSize: { options: [10, 11, 12, 13, 14, 16, 18] }\n }}\n />\n
\n \n \n \n
\n \n handleSendBudgetReminders(e)}\n margin=\"0\"\n padding=\"10px 25px\"\n >\n {t(\"send_budget_remainders\")}\n \n handleSendUsageInstructions(e)}\n margin=\"0\"\n padding=\"10px 25px\"\n >\n {t(\"send_usage_instructions\")}\n \n
\n {t(\"send_message_to_other_usr\")}
\n{serverErrorMsg}
\n \n \n
\n \n {errors.subject && touched.subject ? errors.subject : \"\"}\n
\n \n \n
\n \n {errors.message && touched.message ? errors.message : \"\"}\n
\n \n \n
\n \n {errors.companies && touched.companies\n ? errors.companies\n : \"\"}\n
\n \n
\n \n
\n \n
\n \n {errors.bornDate && touched.bornDate ? errors.bornDate : \"\"}\n
\n \n setFieldValue(\"bornDate\", selectedDate)}\n maxDate={new Date()}\n value={parseISO(values.bornDate)}\n showYearDropdown\n placeholderText=\"DD/MM/YYYY\"\n />\n
\n \n
\n \n
\n \n {errors.firstDayAtWork && touched.firstDayAtWork\n ? errors.firstDayAtWork\n : \"\"}\n
\n \n \n setFieldValue(\"firstDayAtWork\", selectedDate)\n }\n maxDate={new Date()}\n value={parseISO(values.firstDayAtWork)}\n showYearDropdown\n placeholderText=\"DD/MM/YYYY\"\n />\n
\n \n
\n \n setFieldValue(\"branchCode\", option.id)}\n shouldHaveFullWidth\n customHeight=\"27px\"\n />\n
\n \n
\n \n {errors.branchCode && touched.branchCode ? errors.branchCode : \"\"}\n
\n \n
\n \n
\n \n {errors.uniqueId && touched.uniqueId ? errors.uniqueId : \"\"}\n
\n \n
\n \n setFieldValue(\"gender\", option.value)}\n shouldHaveFullWidth\n customHeight=\"27px\"\n />\n
\n \n
\n \n {errors.gender && touched.gender ? errors.gender : \"\"}\n
\n \n
\n \n
\n \n {errors.team && touched.team ? errors.team : \"\"}\n
\n \n
\n \n setFieldValue(\"contact\", phone)}\n />\n
\n \n
\n \n {errors.contact && touched.contact ? errors.contact : \"\"}\n
\n \n
\n \n
\n \n {errors.description && touched.description\n ? errors.description\n : \"\"}\n
\n \n
\n \n setFieldValue(\"relationship\", option.value)}\n shouldHaveFullWidth\n customHeight=\"27px\"\n />\n
\n {resetTierInput && (\n \n
\n \n {errors.relationship && touched.relationship\n ? errors.relationship\n : \"\"}\n
\n \n setFieldValue(\"tier\", option.id)}\n shouldHaveFullWidth\n customHeight=\"27px\"\n />\n
\n )}\n \n
\n \n {errors.tier && touched.tier ? errors.tier : \"\"}\n
\n \n
\n \n handleSelect(option)}\n handleInputChange={handleInputChange}\n fetchMoreData={refetchCities}\n shouldHaveFullWidth\n customHeight=\"27px\"\n />\n
\n \n
\n \n {errors.cities && touched.cities ? errors.cities : \"\"}\n
\n \n \n \n openAddUserForm(setIsAddUserVisible)}\n >\n
\n {(!isEmpty(chosenCompanies) || !isEmpty(chosenRoles)) && (\n \n {isLoading ? (\n \n
\n ) : (\n \n
\n \n
\n \n handleSetChosenCompanies(option)}\n selectedValues={chosenCompanies}\n fetchMoreData={refetchCompanies}\n />\n
\n \n handleSetChosenRoles(option)}\n selectedValues={chosenRoles}\n />\n
\n +
\n{t(\"add_user\")}
\n \n\n
\n )}\n \n {!isEmpty(chosenCompanies) &&\n chosenCompanies.map((company, idx) => (\n
\n \n \n {company.name}\n removeCompanyFilter(company)}\n >\n X\n \n
\n ))}\n {!isEmpty(chosenRoles) &&\n chosenRoles.map((role, idx) => (\n \n {role.name}\n removeRoleFilter(role)}\n >\n X\n \n
\n ))}\n \n
\n \n \n
\n \n
\n \n {selectedNumber} {t(\"Selected\")}\n
\n{t(\"Delete\")}
\n \n\n {tableHeaders.map(\n ({\n id,\n headName,\n isSortedUp,\n isSortable,\n width,\n justifyContent,\n margin\n }) => (\n
\n \n {!isEmpty(users) &&\n users.map(\n ({\n id,\n firstName,\n lastName,\n roles,\n role,\n employeeId,\n email,\n company,\n isDisabled,\n employee,\n emailConfirmed\n }) => (\n role.name).join(\", \")}\n company={\n !isEmpty(company) ? company.name : \"No company\"\n }\n email={email}\n userId={id}\n employeeId={employeeId}\n openDisableUserPopup={openDisableUserPopup}\n employeeData={employee}\n fetchData={getUsers}\n setSelectedNumber={setSelectedNumber}\n checkedMap={checkedMap}\n setCheckedMap={setCheckedMap}\n redirectToUserHistoryPage={redirectToUserHistoryPage}\n />\n )\n )}\n
\n \n
\n )}\n {disableUserPopup && (\n \n\t\t\t
\n\t\t\n\t\t\t\t
\n\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t{user.firstName}
\n\t\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t{user.lastName}
\n\t\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t{!isEditUserForm &&\n\t\t\t\t\t\t{user.email}
\n\t\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t}\n\n\t\t\t\t{user.emailConfirmed ? 'Confirmed' : 'Not Confirmed'}
\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t:\n\t\t\t\t\t\t\t
\n\t\t\t\t\t{user.authenticatedRole}
\n\t\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t:\n\t\t\t\t\t\t\t
\n\t\t\t\t{user.Company ? user.Company.name : 'No company relation'}
\n\t\t\t\t\t\t}\n\t\t\t\t\t\n\t\t\t{isFormDisplay &&\n\t\t\t\t buttonFunc && buttonFunc()}\n\t\t\t\t>\n\t\t\t\t\t{buttonText}\n\t\t\t\t\n\t\t\t}\n\t\t\t backButtonFunc()}\n\t\t\t\tmargin=\"0\"\n\t\t\t\tpadding=\"10px 25px\"\n\t\t\t\toutline\n\t\t\t>\n\t\t\t\tBack\n\t\t\t\n\t\t
\n\t\n\t\t\t\t\n\t\t\t\t
\n\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t history.push('/app/users/superAdmin_users')}\n\t\t\t\t\t\t/>\n\t\t\t\t\t \n\t\t\t\t
\n\t\t\t\n
\n \n \n \n
\n {t(\"empty_refunds\")}
\n \n );\n};\n","const refundsNamespace = \"[refunds]\";\n\nconst refundActions = {\n SET_REFUNDS_LIST: `${refundsNamespace}_SET_REFUNDS_LIST`,\n SET_REFUND: `${refundsNamespace}_SET_REFUND`,\n SET_TOTAL_COUNT: `${refundsNamespace}_SET_TOTAL_COUNT`,\n SET_FILTERS: `${refundsNamespace}_SET_FILTERS`,\n SET_CHECKED_PENDING_ITEMS: `${refundsNamespace}_SET_CHECKED_PENDING_ITEMS`,\n SET_BRANCH_CODES: `${refundsNamespace}_SET_BRANCH_CODES`,\n SET_TOGGLE_REIMBURSEMENT: `${refundsNamespace}_SET_TOGGLE_REIMBURSEMENT`\n};\n\nexport default refundActions;\n","import refundActions from \"../../constants/actionTypes/hr/refunds.constants\";\n\nconst setRefunds = payload => {\n return { type: refundActions.SET_REFUNDS_LIST, payload };\n};\n\nconst setRefund = payload => {\n return { type: refundActions.SET_REFUND, payload };\n};\n\nconst setTotalCount = payload => {\n return { type: refundActions.SET_TOTAL_COUNT, payload };\n};\n\nconst setFilters = payload => {\n return { type: refundActions.SET_FILTERS, payload };\n};\n\nconst setCheckedPendingItems = payload => {\n return { type: refundActions.SET_CHECKED_PENDING_ITEMS, payload };\n};\n\nconst setBranchCodes = payload => {\n return { type: refundActions.SET_BRANCH_CODES, payload };\n};\n\nconst setToggleReimbursement = payload => {\n return { type: refundActions.SET_TOGGLE_REIMBURSEMENT, payload };\n};\n\nexport {\n setRefunds,\n setRefund,\n setTotalCount,\n setFilters,\n setCheckedPendingItems,\n setBranchCodes,\n setToggleReimbursement\n};\n","import styled from \"styled-components\";\n\nconst RefundStyles = styled.section`\n position: relative;\n\n .refundContainer {\n width: calc(100% - 210px);\n margin-left: 210px;\n background: whitesmoke;\n min-height: 100vh;\n overflow-x: hidden;\n position: relative;\n }\n\n .refundContent {\n position: relative;\n background: #fff;\n min-height: 460px;\n border-radius: 8px;\n padding: 15px;\n }\n\n .refundContentWrapper {\n padding: 0 30px 30px 30px;\n }\n\n .refundsList {\n width: 100%;\n height: 100%;\n }\n\n .refundListHeader {\n display: flex;\n width: 100%;\n justify-content: space-around;\n height: 40px;\n color: #5d5d5d;\n font-size: 16px;\n font-weight: 600;\n border-top: 1px solid #f0f0f0;\n border-bottom: 1px solid #94abd1;\n\n .refundListHeaderName {\n width: 19%;\n padding: 12px;\n display: flex;\n align-items: center;\n }\n .refundListHeaderBenefit {\n width: 19%;\n padding: 12px;\n display: flex;\n align-items: center;\n }\n .refundListHeaderPrice {\n width: 14%;\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .refundListHeaderQuantity {\n width: 14%;\n display: flex;\n padding: 12px;\n align-items: center;\n justify-content: center;\n }\n .refundListHeaderStatus {\n width: 14%;\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .refundListHeaderDate {\n padding: 12px;\n display: flex;\n align-items: center;\n width: 19%;\n justify-content: center;\n }\n .refundListHeaderEmpty {\n width: 5%;\n padding: 12px;\n }\n }\n\n .refundsListItem {\n display: flex;\n height: 40px;\n font-size: 12px;\n font-weight: normal;\n max-height: 40px;\n cursor: pointer;\n background: white;\n\n &:hover {\n background: rgba(148, 171, 209, 0.3);\n }\n\n .refundsListItemName {\n width: 19%;\n display: flex;\n align-items: center;\n padding: 12px;\n }\n .refundsListItemBenefit {\n width: 19%;\n padding: 12px;\n display: flex;\n align-items: center;\n }\n .refundsListItemPrice {\n width: 14%;\n padding: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .refundsListItemQuantity {\n padding: 12px;\n display: flex;\n width: 14%;\n justify-content: center;\n align-items: center;\n }\n .refundsListItemStatus {\n display: flex;\n padding: 12px;\n width: 14%;\n justify-content: center;\n align-items: center;\n\n svg {\n width: 16px;\n height: 16px;\n }\n\n svg.pending {\n color: gray;\n }\n svg.accepted {\n color: green;\n }\n svg.rejected {\n color: red;\n }\n }\n .refundsListItemDate {\n display: flex;\n padding: 12px;\n width: 19%;\n justify-content: center;\n align-items: center;\n }\n\n .refundsListItemCheckbox {\n width: 5%;\n padding: 12px;\n }\n }\n\n .refundListSecondLayerActivityToggle {\n display: flex;\n gap: 20px;\n }\n\n .refundListSecondLayerActivity {\n margin: 10px 0 30px 0;\n display: flex;\n gap: 20px;\n justify-content: space-between;\n\n .checkboxCol {\n display: flex;\n gap: 5px;\n }\n\n .bulkAcceptOrDecline {\n color: #5d5d5d;\n font-size: 14px;\n cursor: pointer;\n\n .bulkAccept {\n color: #19cc95;\n font-size: 16px;\n font-weight: 600;\n text-decoration: underline;\n }\n\n .bulkDecline {\n color: #ed3f55;\n font-size: 16px;\n text-decoration: underline;\n font-weight: 600;\n }\n }\n }\n\n .refundListHeaderFilterWrapper {\n position: relative;\n display: flex;\n\n .refundListHeaderFilterWrapperFlex {\n display: flex;\n align-items: center;\n }\n\n .refundFilter {\n position: absolute;\n background: #ffffffff;\n border: 1px solid #1568bf;\n border-radius: 8px;\n padding: 12px;\n min-width: 150px;\n z-index: 10;\n\n .arrow {\n content: \" \";\n position: absolute;\n bottom: 100%;\n left: 50%;\n margin-left: -9px;\n border-width: 10px;\n border-style: solid;\n border-color: transparent transparent #1568bf transparent;\n }\n }\n\n .refundFilterItem {\n cursor: pointer;\n padding: 5px;\n\n &:hover {\n background: rgba(148, 171, 209, 0.3);\n }\n }\n\n .refundFilterItemFlexCenter {\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n border-bottom: 1px solid #5d5d5d;\n }\n\n .refundFilterItemFlex {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 5px;\n font-weight: 500;\n\n svg {\n width: 20px;\n height: 20px;\n }\n\n svg.accepted {\n color: #19cc95;\n }\n\n svg.rejected {\n color: #ed3f55;\n }\n }\n\n button {\n background: transparent;\n border: none;\n padding: 9px;\n cursor: pointer;\n }\n\n svg {\n width: 14px;\n height: 14px;\n }\n }\n\n .refundsListItemTopName {\n display: flex;\n gap: 10px;\n }\n\n .refundsListItemBottomFlex {\n display: flex;\n }\n\n @media screen and (max-width: 576px) {\n .refundListHeader {\n display: none;\n }\n\n .refundsListItem {\n &:hover {\n background: transparent;\n }\n }\n }\n\n .refundFilterMobile {\n min-width: 120px !important;\n }\n\n .refundMobileHeader {\n display: flex;\n justify-content: space-around;\n }\n\n @media screen and (min-width: 577px) {\n .refundMobileHeader {\n display: none;\n }\n }\n\n // Todo reuse styles\n .employeesContainer {\n padding: 0 30px 30px 30px;\n display: flex;\n position: relative;\n background: #fff;\n min-height: 460px;\n }\n\n .firstMenu {\n display: flex;\n justify-content: space-between;\n padding: 16px;\n flex-wrap: wrap;\n background: #fff;\n }\n\n .buttonsWrapper {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n width: 50%;\n min-width: 450px;\n }\n\n .searchIcon {\n background: #f7f9fc;\n padding: 12px 0 8px 10px;\n border-radius: 8px 0 0 8px;\n margin-right: -10px;\n z-index: 2;\n }\n\n .filterButton {\n font-weight: 500;\n line-height: 16px;\n }\n\n .buttonsContainer {\n position: relative;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n }\n\n .filtersContainer {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 15px;\n\n .closeFiltersButton {\n display: none;\n }\n .selectsContainer {\n display: flex;\n gap: 15px;\n > div {\n width: 202px;\n }\n }\n }\n\n .addContainer {\n width: 24px;\n height: 24px;\n background: #fff;\n border-radius: 50%;\n color: #373737;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-right: 10px;\n }\n\n .addSign {\n margin-right: 8px;\n font-size: 28px;\n line-height: 28px;\n font-weight: 400;\n }\n\n #employeesList {\n transition: all 0.4s ease-in-out;\n opacity: 0;\n width: 100%;\n background-color: whitesmoke;\n }\n\n .firstMenuMobile {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n display: none;\n background: #fff;\n padding: 8px 16px;\n\n .sortMobileButton {\n font-size: 16px;\n font-weight: 400;\n }\n }\n\n .secondMenu {\n width: 100%;\n padding: 8px 20px;\n background: #fff;\n\n .flexContainer {\n display: flex;\n align-items: center;\n }\n\n p {\n font-size: 14px;\n line-height: 16px;\n font-weight: 500;\n color: #1d1d1d;\n }\n\n .selected {\n width: 90px;\n color: ${props => props.selectedColor};\n margin: 0 11px;\n }\n }\n\n .tableHead {\n padding: 14px 30px;\n display: flex;\n align-items: center;\n border-bottom: 1px solid #94abd1;\n border-top: 1px solid #f0f0f0;\n background: #fff;\n }\n\n .tableBodyContainer {\n background: #f7f7f7;\n padding: 30px;\n margin: 20px 0 0 0;\n border-radius: 4px;\n }\n\n #addEmployeeForm {\n position: absolute;\n width: calc(100% - 60px);\n transform: translateX(110%);\n transition: all 0.4s ease-in-out;\n opacity: 0;\n }\n\n .buttonText {\n font-size: 16px;\n font-weight: 600;\n line-height: 16px;\n }\n\n .showAddEmployeeForm {\n transform: translateY(0) !important;\n opacity: 1 !important;\n }\n\n .hideEmployeeList {\n transform: translateX(-110%);\n opacity: 0;\n max-height: 1000px;\n overflow-y: auto;\n }\n\n .actionsDropdownWrapper {\n position: absolute;\n display: flex;\n flex-direction: column;\n width: 234px;\n right: 0;\n border-radius: 0px 4px 0px 0px;\n border: solid 1px transparent;\n z-index: 2;\n color: rgb(7, 6, 6);\n background-color: rgb(236, 236, 236);\n\n > span {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 8px 10px;\n cursor: pointer;\n }\n\n & span:first-child {\n display: none;\n }\n\n .buttonText {\n font-size: 14px;\n font-weight: 500;\n line-height: 16px;\n }\n }\n\n .actionsSortWrapper {\n position: absolute;\n display: flex;\n flex-direction: column;\n width: 234px;\n left: 0;\n border-radius: 0px 4px 0px 0px;\n border: solid 1px transparent;\n z-index: 2;\n background-color: rgb(236, 236, 236);\n\n .chevronContainer {\n width: 24px;\n height: 24px;\n background: #fff;\n border-radius: 50%;\n color: #373737;\n margin-right: 10px;\n\n svg {\n margin: 3px 0 0 7px;\n }\n }\n\n .sortButton {\n justify-content: flex-start;\n }\n\n .buttonText {\n font-size: 14px;\n font-weight: 500;\n line-height: 16px;\n }\n }\n\n .appliedFiltersContainer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 16px;\n font-size: 12px;\n line-height: 16px;\n font-weight: 500;\n background: #fff;\n\n .appliedFilters {\n display: flex;\n align-items: center;\n gap: 10px;\n overflow-x: auto;\n max-width: calc(100% - 80px);\n flex-wrap: wrap;\n\n .appliedFilterPill {\n display: flex;\n align-items: center;\n gap: 19px;\n background-color: #f0f4f9;\n color: #1d1d1d;\n padding: 6px 8px;\n border-radius: 23px;\n\n .removeFilter {\n cursor: pointer;\n }\n }\n }\n\n .clearButton {\n justify-content: flex-end;\n font-size: 12px;\n font-weight: 500;\n line-height: 16px;\n }\n }\n\n @keyframes showModal {\n from {\n transform: translateX(320px);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n }\n\n .filtersContainer.mobile {\n display: flex;\n flex-direction: column-reverse;\n justify-content: flex-end;\n width: 310px;\n padding: 90px 30px 30px 30px;\n position: fixed;\n top: 0;\n right: 0;\n height: 100%;\n background: rgb(255, 255, 255);\n border-radius: 4px;\n box-shadow: rgb(0 0 0 / 20%) 0px 2px 4px -1px,\n rgb(0 0 0 / 12%) 0px 1px 10px 0px, rgb(0 0 0 / 14%) 0px 4px 5px 0px;\n z-index: 10;\n animation: showModal 0.4s ease-in-out;\n transition: all 0.35s ease-in-out;\n transition-delay: 0.1s;\n > div {\n width: 100%;\n }\n .closeFiltersButton {\n display: unset;\n width: 40px;\n height: 40px;\n color: rgba(0, 0, 0, 0.54);\n border: none;\n outline: none;\n font-size: 20px;\n position: absolute;\n z-index: 2;\n right: 15px;\n top: 30px;\n font-weight: 500;\n cursor: pointer;\n background: rgba(255, 255, 255, 0.6);\n border-radius: 50%;\n &:hover {\n color: #1568bf;\n background: rgba(255, 255, 255, 0.8);\n }\n }\n .selectsContainer {\n flex-direction: column;\n width: 100%;\n > div {\n width: 100%;\n }\n }\n }\n\n .paginationWrapper {\n display: flex;\n justify-content: center;\n background: #fff;\n padding: 30px;\n }\n\n @media screen and (max-width: 1024px) {\n .buttonsWrapper {\n min-width: 400px;\n }\n }\n\n @media screen and (max-width: 960px) {\n .employeesContainer {\n padding: 0 15px 30px 15px;\n }\n\n .buttonsWrapper {\n min-width: 440px;\n }\n\n .addSign {\n margin: 0 4px;\n }\n\n .actionsDropdownWrapper {\n & span:first-child {\n display: flex;\n }\n }\n }\n\n @media screen and (max-width: 767px) {\n .refundContainer {\n width: 100%;\n margin: 0;\n }\n }\n`;\n\nexport default RefundStyles;\n","import styled from \"styled-components\";\n\nconst RefundModalStyles = styled.section`\n min-height: 347px;\n min-width: 360px;\n max-width: calc(100% - 50px);\n position: relative;\n padding: 15px 0 15px 15px;\n font-size: 12px;\n\n h2 {\n font-weight: 500;\n font-size: 20px;\n margin-bottom: 20px;\n color: #5d5d5d;\n }\n\n section {\n display: flex;\n justify-content: space-between;\n gap: 40px;\n\n .leftSection {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n\n & > div {\n display: flex;\n margin-bottom: 10px;\n flex-direction: column;\n }\n }\n\n .rightSection {\n display: flex;\n width: 100%;\n flex-direction: column;\n align-items: flex-start;\n & > div {\n margin-bottom: 10px;\n }\n\n .rightSectionImage {\n align-items: flex-start;\n flex-direction: column;\n }\n\n .imageButton {\n cursor: zoom-in;\n background: transparent;\n border: none;\n font-weight: 500;\n\n img {\n margin-top: 10px;\n width: 200px;\n height: 200px;\n border-radius: 8px;\n }\n }\n }\n }\n\n .refundButtons {\n display: flex;\n gap: 20px;\n position: absolute;\n right: 0;\n\n & > button {\n padding: 6px 12px;\n border-radius: 4px;\n font-size: 16px;\n cursor: pointer;\n transition: 1s;\n }\n\n button.accept {\n color: white;\n background: #228b22;\n border: none;\n\n &:disabled {\n cursor: not-allowed;\n }\n }\n\n button.reject {\n border-color: #c32148;\n background: white;\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:hover {\n color: white;\n background: #c32148;\n }\n }\n }\n\n .refundStatus {\n position: absolute;\n bottom: 15px;\n left: 15px;\n display: flex;\n align-items: center;\n\n p {\n margin-right: 10px;\n }\n svg {\n width: 20px;\n heigh: 20px;\n }\n svg.pending {\n color: gray;\n }\n svg.accepted {\n color: green;\n }\n svg.rejected {\n color: red;\n }\n }\n`;\n\nexport default RefundModalStyles;\n","import React from \"react\";\nimport moment from \"moment\";\nimport { useTranslation } from \"react-i18next\";\nimport { transformTokensToRsd } from \"../../../../utils/transformTokensToRsd\";\n\nexport const LeftModalSection = ({ singleRefund }) => {\n const { t } = useTranslation();\n return (\n\n
\n );\n};\n","import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nexport const RightModalSection = ({ image }) => {\n const { t } = useTranslation();\n return (\n \n Email:\n {singleRefund.UserBenefit.User.email}\n
\n \n {t(\"Date\")}:\n {moment(singleRefund.createdAt).format(\"DD.MM.YYYY.\")}\n
\n \n Benefit:\n {singleRefund.UserBenefit.BenefitGroup.name}\n
\n \n {t(\"Price\")}:{\" \"}\n {transformTokensToRsd(singleRefund.UserBenefit.benefitPrice)}\n
\n \n {t(\"Type\")}: {singleRefund.UserBenefit.BenefitVoucher.name}\n
\n \n
\n );\n};\n","import React from \"react\";\n\nexport const ShowRefundStatus = ({ handleStatus, status }) => {\n return (\n \n {t(\"Image\")}:\n window.open(image.imageSrc)}\n >\n 
\n \n
\n \n
\n );\n};\n","import { toast } from \"react-toastify\";\nimport createSupaBaseStorageFolder from \"../createSupaBaseStorageFolder\";\nimport supabaseClient from \"../supabaseClient\";\n\nconst bucketsSwap = async ({ oldStatus, status, fileName, companyId }) => {\n const folderName = createSupaBaseStorageFolder(companyId);\n\n const folderRefundPending = `${folderName}_pending_refund`;\n const acceptedRefundFolder = folderName;\n\n try {\n const isTheFileInTheSameBucket = oldStatus === null && status === false;\n if (isTheFileInTheSameBucket) return;\n\n const { error: moveError } = await supabaseClient.storage\n .from(\"refund-upload\")\n .move(\n `${status ? folderRefundPending : acceptedRefundFolder}/${fileName}`,\n `${status ? acceptedRefundFolder : folderRefundPending}/${fileName}`\n );\n\n if (moveError) throw moveError;\n } catch (error) {\n toast.error(error.message);\n }\n};\n\nexport default bucketsSwap;\n","import React from \"react\";\nimport { apiService } from \"../../../../services/api/api.service\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { setRefund, setRefunds } from \"../../../../actions/hr/refunds.actions\";\nimport { toast } from \"react-toastify\";\nimport bucketsSwap from \"../../../../utils/supabaseUtils/BucketsSwap/bucketsSwap\";\nimport { useTranslation } from \"react-i18next\";\n\nexport const RefundModalActions = ({ id, fileName, status }) => {\n const { t } = useTranslation();\n const dispatch = useDispatch();\n\n const { filters } = useSelector(state => state.refundsReducer);\n const { companyId } = useSelector(state => state.app.user);\n\n const fetchRefunds = async () => {\n try {\n const refundsResponse = await apiService.get(\n `/refunds?limit=${filters.perPage}&page=${filters.page}`\n );\n\n dispatch(setRefunds(refundsResponse.data?.refunds || []));\n } catch (error) {\n toast.error(t(\"failed_to_get_refund_list\"));\n }\n };\n\n const acceptOrRejectRefund = async newStatus => {\n try {\n const response = await apiService.put(`/refunds/${id}`, {\n description: \"\",\n status: newStatus\n });\n\n dispatch(setRefund(response.data.refund));\n toast.success(response.data.message);\n\n await bucketsSwap({\n oldStatus: status,\n status: response.data.status,\n fileName,\n companyId\n });\n\n await fetchRefunds();\n } catch (error) {\n toast.error(t(\"failed_to_accept_refund\"));\n }\n };\n\n return (\n Status
\n {handleStatus(status)}\n\n {status === null && (\n <>\n acceptOrRejectRefund(true)}\n >\n {t(\"Accept\")}\n \n acceptOrRejectRefund(false)}\n >\n {t(\"Decline\")}\n \n \n )}\n
\n );\n};\n","import React, { useRef, useEffect, useState } from \"react\";\nimport RefundModalStyles from \"./RefundModalStyles\";\nimport { useSelector } from \"react-redux\";\nimport { toast } from \"react-toastify\";\nimport createSupaBaseStorageFolder from \"../../../../utils/supabaseUtils/createSupaBaseStorageFolder\";\nimport supabaseClient from \"../../../../utils/supabaseUtils/supabaseClient\";\nimport { LeftModalSection } from \"./LeftModalSection\";\nimport { RightModalSection } from \"./RightModalSection\";\nimport { ShowRefundStatus } from \"./ShowRefundStatus\";\nimport { RefundModalActions } from \"./RefundModalActions\";\nimport PdfLogo from \"../../../../assets/images/pdf-logo.jpg\";\nimport { useTranslation } from \"react-i18next\";\n\nexport const RefundModal = ({ onClose, handleStatus }) => {\n const { t } = useTranslation();\n const { singleRefund } = useSelector(state => state.refundsReducer);\n const { companyId } = useSelector(state => state.app.user);\n\n const [image, setImage] = useState(\"\");\n const modalRef = useRef(null);\n\n const downloadImage = async name => {\n const folderName = createSupaBaseStorageFolder(companyId);\n\n const folderRefundPending = `${folderName}_pending_refund`;\n const acceptedRefundFolder = folderName;\n\n try {\n const { data, error } = await supabaseClient.storage\n .from(\"refund-upload\")\n .getPublicUrl(\n `${\n singleRefund.status ? acceptedRefundFolder : folderRefundPending\n }/${name}`\n );\n\n const url = data.publicUrl;\n setImage(url);\n\n if (error) throw new Error(error);\n } catch (error) {\n toast.error(error.message);\n }\n };\n\n useEffect(() => {\n downloadImage(singleRefund.File.name);\n }, [singleRefund.File.name]);\n\n useEffect(() => {\n modalRef.current.focus();\n }, []);\n\n const handleImage = image => {\n if (image.includes(\".pdf\")) return { logo: PdfLogo, imageSrc: image };\n\n return { logo: image, imageSrc: image };\n };\n\n return (\n {t(\"Single Refund\")}
\n\n handlePageChange(page)}\n theme=\"border-bottom\"\n />\n
\n );\n};\n","import React from \"react\";\nimport { CheckboxInput } from \"../../../../../components\";\nimport moment from \"moment\";\n\nimport { transformTokensToRsd } from \"../../../../../utils/transformTokensToRsd\";\n\nexport const ListOfRefundsDesktopBody = props => {\n const {\n listOfRefunds,\n handleRefundOpen,\n handleCheckedOnChange,\n handleStatus,\n checkedPendingItems\n } = props;\n\n return (\n \n {listOfRefunds.map(refundItem => {\n return (\n handleRefundOpen(refundItem)}\n >\n
\n );\n })}\n \n );\n};\n","import React from \"react\";\nimport { ListOfRefundsDesktopBody } from \"./ListOfRefundsDesktopBody\";\n\nexport const ListOfRefundsDesktop = props => {\n const {\n handleRefundOpen,\n listOfRefunds,\n handleStatus,\n handleCheckedOnChange,\n checkedPendingItems\n } = props;\n\n const listOfRefundsDesktopBodyProps = {\n listOfRefunds,\n handleRefundOpen,\n handleCheckedOnChange,\n handleStatus,\n checkedPendingItems\n };\n\n return (\n \n
\n \n handleCheckedOnChange(refundItem.id)}\n isChecked={checkedPendingItems.includes(refundItem.id)}\n name={String(refundItem.id)}\n width=\"18px\"\n height=\"18px\"\n />\n
\n \n {refundItem.UserBenefit.User.UserEmployee?.CompanyBranch?.code ||\n \"/\"}\n
\n \n {refundItem.UserBenefit.User.firstName}{\" \"}\n {refundItem.UserBenefit.User.lastName}\n
\n \n {refundItem.UserBenefit.BenefitGroup.name}\n
\n \n {transformTokensToRsd(refundItem.UserBenefit.benefitPrice)}\n
\n \n {handleStatus(`${refundItem.status}`)}\n
\n \n {moment(refundItem.createdAt).format(\"DD.MM.YYYY.\")}\n
\n \n
\n );\n};\n","import styled from \"styled-components\";\n\nconst ListOfRefundsMobileStyles = styled.div`\n height: 100%;\n\n .refundsListItem {\n display: flex;\n flex-direction: column;\n width: 100%;\n margin-bottom: 30px;\n height: 100px;\n gap: 8px;\n }\n\n .refundsListItemTop {\n display: flex;\n justify-content: space-between;\n\n .refundsListItemTopName {\n font-size: 16px;\n font-weight: 500;\n color: #5d5d5d;\n }\n }\n\n .refundsListItemBottomCenter {\n text-align: center;\n }\n\n .refundsListItemBottom {\n display: flex;\n justify-content: space-between;\n color: black;\n align-items: center;\n\n p {\n font-size: 12px;\n font-weight: 500;\n }\n span {\n font-size: 8px;\n }\n\n border-bottom: 1px solid #5d5d5d;\n }\n\n .refundsListItemTopButton {\n width: 20px;\n height: 20px;\n color: #1568bf;\n }\n\n svg {\n width: 16px;\n height: 16px;\n }\n\n svg.pending {\n color: gray;\n }\n svg.accepted {\n color: green;\n }\n svg.rejected {\n color: red;\n }\n`;\n\nexport default ListOfRefundsMobileStyles;\n","import React from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { setFilters } from \"../../../actions/hr/refunds.actions\";\nimport { useTranslation } from \"react-i18next\";\n\nexport const RefundBranchCodeFilter = ({ style }) => {\n const { t } = useTranslation();\n const dispatch = useDispatch();\n\n const { branchCodes, filters } = useSelector(state => state.refundsReducer);\n\n const handleOnClickBranchCode = branchCodeId => {\n let payload = branchCodeId;\n if (branchCodeId === \"all\") payload = undefined;\n\n dispatch(setFilters({ ...filters, branchCode: payload }));\n };\n\n return (\n \n \n
\n {branchCodes.map(branchCode => {\n return (\n \n {\n e.stopPropagation();\n handleOnClickBranchCode(\"all\");\n }}\n >\n {t(\"Show All\")}\n
\n \n {\n e.stopPropagation();\n handleOnClickBranchCode(branchCode.id);\n }}\n >\n {branchCode.branchCode}\n
\n \n );\n })}\n \n );\n};\n","import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nexport const RefundStatusFilter = ({\n handleOnClickStatus,\n handleStatus,\n style,\n classNAme\n}) => {\n const { t } = useTranslation();\n return (\n \n {\n e.stopPropagation();\n handleOnClickStatus(\"all\");\n }}\n >\n {t(\"Show All\")}\n
\n \n \n {\n e.stopPropagation();\n handleOnClickStatus(\"pending\");\n }}\n >\n {handleStatus(null)}\n {t(\"Pending\")}\n
\n \n \n {\n e.stopPropagation();\n handleOnClickStatus(\"accepted\");\n }}\n >\n {handleStatus(true)}\n {t(\"Accepted\")}\n
\n \n \n {\n e.stopPropagation();\n handleOnClickStatus(\"rejected\");\n }}\n >\n {handleStatus(false)}\n {t(\"Rejected\")}\n
\n \n \n );\n};\n","import React, { useRef, useState } from \"react\";\nimport { CheckboxInput } from \"../../../../../components\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport useClickOutside from \"../../../../../hooks/useClickOutside\";\nimport { FilterIconSvg } from \"../../../../../assets/Icons\";\nimport { RefundBranchCodeFilter } from \"../../RefundBranchCodeFilter\";\nimport { setFilters } from \"../../../../../actions/hr/refunds.actions\";\nimport { RefundStatusFilter } from \"../../RefundStatusFilter\";\nimport { useTranslation } from \"react-i18next\";\n\nexport const ListOfItemsRefundsMobile = props => {\n const {\n handleRefundOpen,\n handleStatus,\n handleCheckedOnChange,\n checkedPendingItems,\n refundItem\n } = props;\n\n const { t } = useTranslation();\n\n const dispatch = useDispatch();\n\n const statusRef = useRef(null);\n const branchRef = useRef(null);\n const [isStatusOpen, setIsStatusOpen] = useState(false);\n const [isBranchOpen, setIsBranchOpen] = useState(false);\n\n useClickOutside([statusRef], () => setIsStatusOpen(false));\n useClickOutside([branchRef], () => setIsBranchOpen(false));\n\n const { filters } = useSelector(state => state.refundsReducer);\n\n const handleOnClickStatus = status => {\n let payload = status;\n if (status === \"all\") payload = undefined;\n\n dispatch(setFilters({ ...filters, status: payload }));\n };\n\n return (\n \n
\n \n
\n \n handleCheckedOnChange(refundItem.id)}\n isChecked={checkedPendingItems.includes(refundItem.id)}\n name={String(refundItem.id)}\n width=\"18px\"\n height=\"18px\"\n disabled={refundItem.status !== null}\n />\n
\n {refundItem.UserBenefit.User.firstName}{\" \"}\n {refundItem.UserBenefit.User.lastName}\n \n \n
\n \n
\n \n );\n};\n","import React from \"react\";\nimport ListOfRefundsMobileStyles from \"./ListOfRefundsMobileStyles\";\nimport { ListOfItemsRefundsMobile } from \"./ListOfItemsRefundsMobile\";\n\nexport const ListOfRefundsMobile = props => {\n const { listOfRefunds } = props;\n\n return (\n \n
\n \n
\n \n {\n e.stopPropagation();\n setIsBranchOpen(status => !status);\n }}\n aria-haspopup=\"true\"\n aria-expanded={isBranchOpen}\n aria-labelledby=\"statusFilterLabel\"\n >\n
\n {isBranchOpen && (\n \n
\n\n {t(\"Branch\")}
\n \n {refundItem.UserBenefit.User.UserEmployee?.CompanyBranch\n ?.code || \"/\"}\n \n\n
\n Benefit
\n {refundItem.UserBenefit.BenefitGroup.name}\n\n
\n {t(\"Price\")}
\n {refundItem.UserBenefit.benefitPrice}\n\n
\n \n
\n \n {\n e.stopPropagation();\n setIsStatusOpen(status => !status);\n }}\n aria-haspopup=\"true\"\n aria-expanded={isStatusOpen}\n aria-labelledby=\"statusFilterLabel\"\n >\n
\n {isStatusOpen && (\n \n
\n\n {t(\"Status\")}
\n {handleStatus(`${refundItem.status}`)}\n\n onClick(!isChecked)}\n />\n \n
\n \n
\n );\n};\n","import React, { useRef, useState } from \"react\";\nimport { FilterIconSvg, TokenIcon } from \"../../../../../assets/Icons\";\nimport useClickOutside from \"../../../../../hooks/useClickOutside\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { setFilters } from \"../../../../../actions/hr/refunds.actions\";\nimport { RefundStatusFilter } from \"../../RefundStatusFilter\";\nimport { RefundBranchCodeFilter } from \"../../RefundBranchCodeFilter\";\nimport { useTranslation } from \"react-i18next\";\nimport { transformTokenCurrencyIcons } from \"../../../../../utils/transformTokensToRsd\";\n\nexport const ListOfRefundsDesktopHeader = ({ handleStatus }) => {\n const { t } = useTranslation();\n const dispatch = useDispatch();\n\n const statusRef = useRef(null);\n const branchRef = useRef(null);\n const [isStatusOpen, setIsStatusOpen] = useState(false);\n const [isBranchOpen, setIsBranchOpen] = useState(false);\n\n useClickOutside([statusRef], () => setIsStatusOpen(false));\n useClickOutside([branchRef], () => setIsBranchOpen(false));\n\n const { filters } = useSelector(state => state.refundsReducer);\n\n const handleOnClickStatus = status => {\n let payload = status;\n if (status === \"all\") payload = undefined;\n\n dispatch(setFilters({ ...filters, status: payload }));\n };\n\n return (\n \n 0}\n name=\"Select all\"\n width=\"18px\"\n height=\"18px\"\n />\n {checkedPendingItems.length} {t(\"selected\")}\n
\n {checkedPendingItems.length > 0 && (\n \n handleBulkAcceptOrDecline(true)}\n >\n {t(\"Accept\")}\n {\" \"}\n {t(\"or\")}{\" \"}\n handleBulkAcceptOrDecline(false)}\n >\n {t(\"Decline\")}\n \n
\n )}\n \n {toggleReimbursement ? t(\"Auto Accept\") : t(\"Auto Decline\")}\n
\n \n \n
\n );\n};\n","import React, { useRef, useState } from \"react\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport useClickOutside from \"../../../../../../hooks/useClickOutside\";\nimport { setFilters } from \"../../../../../../actions/hr/refunds.actions\";\nimport { RefundBranchCodeFilter } from \"../../../RefundBranchCodeFilter\";\nimport { FilterIconSvg } from \"../../../../../../assets/Icons\";\nimport { RefundStatusFilter } from \"../../../RefundStatusFilter\";\nimport { useTranslation } from \"react-i18next\";\n\nexport const RefundMobileHeader = ({ handleStatus }) => {\n const { t } = useTranslation();\n const dispatch = useDispatch();\n\n const statusRef = useRef(null);\n const branchRef = useRef(null);\n const [isStatusOpen, setIsStatusOpen] = useState(false);\n const [isBranchOpen, setIsBranchOpen] = useState(false);\n\n useClickOutside([statusRef], () => setIsStatusOpen(false));\n useClickOutside([branchRef], () => setIsBranchOpen(false));\n\n const { filters } = useSelector(state => state.refundsReducer);\n\n const handleOnClickStatus = status => {\n let payload = status;\n if (status === \"all\") payload = undefined;\n\n dispatch(setFilters({ ...filters, status: payload }));\n };\n\n return (\n \n
\n \n
\n \n {t(\"Branch\")}\n setIsBranchOpen(status => !status)}\n aria-haspopup=\"true\"\n aria-expanded={isBranchOpen}\n aria-labelledby=\"statusFilterLabel\"\n >\n
\n {isBranchOpen && \n {t(\"Name\")}\n
\n \n Benefit\n
\n \n {transformTokenCurrencyIcons()}\n {t(\"Price\")}\n
\n \n
\n \n
\n \n {t(\"Status\")}\n setIsStatusOpen(status => !status)}\n aria-haspopup=\"true\"\n aria-expanded={isStatusOpen}\n aria-labelledby=\"statusFilterLabel\"\n >\n
\n {isStatusOpen && (\n \n {t(\"Date\")}\n
\n \n
\n );\n};\n","import React from \"react\";\nimport { Header } from \"../../../components\";\nimport {\n AcceptedIconSVG,\n EmployeesIcon,\n PendingIconSVG,\n RejectedIconsSVG\n} from \"../../../assets/Icons\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { useEffect } from \"react\";\nimport { useState } from \"react\";\nimport { toast } from \"react-toastify\";\nimport { apiService } from \"../../../services/api/api.service\";\nimport { LoadingHistoryItems } from \"../../UserPages/HistoryList/LoadingHistoryItems\";\nimport { EmptyRefunds } from \"./EmptyRefunds\";\nimport {\n setBranchCodes,\n setCheckedPendingItems,\n setRefund,\n setRefunds,\n setToggleReimbursement,\n setTotalCount\n} from \"../../../actions/hr/refunds.actions\";\nimport RefundStyles from \"./RefundStyles\";\nimport { useCallback } from \"react\";\nimport { ShowRefundModal } from \"./RefundModal/ShowRefundModal\";\nimport { RefundPagination } from \"./RefundPagination\";\nimport { toggleSidebarMenu } from \"../../../actions/hr/employees.actions\";\nimport { RefundListIndex } from \"./RefundsList/RefundListIndex\";\nimport bucketsSwap from \"../../../utils/supabaseUtils/BucketsSwap/bucketsSwap\";\nimport { queryBuilder } from \"../../../utils/queryBuilder\";\nimport { getCompanyBranches } from \"../../../services/api/admin/users.service\";\nimport { RefundListSecondLayer } from \"./RefundsList/Desktop/RefundListSecondLayer\";\nimport { ListOfRefundsDesktopHeader } from \"./RefundsList/Desktop/ListOfRefundsDesktopHeader\";\nimport { RefundMobileHeader } from \"./RefundsList/Mobile/RefundMobileHeader/RefundMobileHeader\";\nimport { useTranslation } from \"react-i18next\";\n\nconst Refunds = () => {\n const { t } = useTranslation();\n const dispatch = useDispatch();\n const [loading, setLoading] = useState(false);\n const {\n filters,\n singleRefund,\n listOfRefunds,\n checkedPendingItems\n } = useSelector(state => state.refundsReducer);\n\n const { isSidebarMenuOpen } = useSelector(state => state.employees);\n const { companyId } = useSelector(state => state.app.user);\n\n const fetchRefunds = async filter => {\n try {\n setLoading(true);\n\n const query = queryBuilder({\n baseQuery: \"/refunds\",\n queryObject: {\n limit: filter.perPage,\n page: filter.page,\n status: filter.status,\n branchCode: filter.branchCode\n }\n });\n\n const refundsResponse = await apiService.get(query);\n\n dispatch(setRefunds(refundsResponse.data?.refunds || []));\n dispatch(setTotalCount(refundsResponse.data?.count || 1));\n } catch (error) {\n toast.error(t(\"failed_to_get_refund_list\"));\n } finally {\n setLoading(false);\n }\n };\n\n useEffect(() => {\n fetchRefunds(filters);\n }, [filters]);\n\n const getAllBranchesInCompany = async () => {\n const listOfCompanyBranchCodes = await getCompanyBranches(companyId);\n\n dispatch(setBranchCodes(listOfCompanyBranchCodes.branches));\n };\n\n useEffect(() => {\n getAllBranchesInCompany();\n\n return () => {\n dispatch(setCheckedPendingItems([]));\n };\n }, []);\n\n const handleStatus = useCallback(status => {\n const statusObject = {\n null: \n
\n\n \n {t(\"Branch\")}\n setIsBranchOpen(status => !status)}\n aria-haspopup=\"true\"\n aria-expanded={isBranchOpen}\n aria-labelledby=\"statusFilterLabel\"\n >\n
\n {isBranchOpen && \n
\n \n {t(\"Status\")}\n setIsStatusOpen(status => !status)}\n aria-haspopup=\"true\"\n aria-expanded={isStatusOpen}\n aria-labelledby=\"statusFilterLabel\"\n >\n
\n {isStatusOpen && (\n \n
\n \n {ShownContent()} \n
\n User does not have history.
\n \n );\n};\n","const adminActionsNamespace = \"[admin]: \";\n\nconst adminActionTypes = {\n SET_ADMIN_USER_FILTERS: `${adminActionsNamespace}SET_ADMIN_USER_FILTERS`,\n SET_ADMIN_USER_DATA: `${adminActionsNamespace}SET_ADMIN_USER_DATA`\n};\n\nexport default adminActionTypes;\n","import adminActionTypes from \"../../constants/actionTypes/admin/admin.constants\";\n\nconst setAdminFilters = payload => {\n return { type: adminActionTypes.SET_ADMIN_USER_FILTERS, payload };\n};\n\nconst setAdminUserData = payload => {\n return { type: adminActionTypes.SET_ADMIN_USER_DATA, payload };\n};\n\nexport { setAdminFilters, setAdminUserData };\n","import styled from \"styled-components\";\n\nconst AdminUserHistoryContentStyles = styled.section`\n .adminUserHistoryHeader {\n display: flex;\n justify-content: space-between;\n align-items: center;\n\n .adminUserHistoryHeaderTokens {\n display: flex;\n gap: 10px;\n flex-direction: column;\n width: 230px;\n padding: 10px;\n box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n border-radius: 20px;\n\n .adminUserHistoryHeaderTokenItem {\n display: flex;\n align-items: center;\n gap: 5px;\n color: #757575;\n font-size: 14px;\n }\n }\n }\n\n .adminUserHistoryBody {\n margin-top: 30px;\n display: flex;\n width: 100%;\n\n .adminUserHistoryBodyItem {\n position: relative;\n height: 50px;\n padding-left: 135px;\n\n .adminUserHistoryBodyItemLeft {\n position: absolute;\n left: -114px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 106px;\n height: 100%;\n\n .time {\n font-size: 12px;\n color: #493f3f;\n }\n\n .outerDot {\n width: 15px;\n height: 15px;\n border-radius: 15px;\n background: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .innerDot {\n width: 7px;\n height: 7px;\n border-radius: 7px;\n background: #1568bf;\n }\n }\n\n .adminUserHistoryBodyItemRight {\n display: flex;\n align-items: center;\n height: 100%;\n flex-wrap: wrap;\n\n .adminUserHistoryBodyItemRightText {\n color: #493f3f;\n }\n }\n }\n }\n\n .adminUserHistoryBodyItemWrapper {\n border-left: 1px solid rgb(214, 214, 214);\n padding-left: 15px;\n height: 100%;\n position: relative;\n }\n`;\n\nexport default AdminUserHistoryContentStyles;\n","import React, { useState } from \"react\";\nimport { TokenIcon } from \"../../../../assets/Icons\";\nimport { MultiselectInput } from \"../../../../components\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { setAdminFilters } from \"../../../../actions/admin/admin.actions\";\nimport {\n transformTokenCurrencyIcons,\n transformTokensToRsd\n} from \"../../../../utils/transformTokensToRsd\";\n\nconst listOfOptions = [\n { id: 1, name: \"Budget\" },\n { id: 2, name: \"Subscription\" }\n];\n\nexport const AdminUserHistoryHeader = ({ tokens }) => {\n const dispatch = useDispatch();\n\n const { filters } = useSelector(state => state.admin);\n\n const handleSetHistoryFilter = options => {\n dispatch(setAdminFilters({ ...filters, page: 1, type: options || [] }));\n };\n\n const isInRSD = localStorage.getItem(\"isValueInRsd\");\n\n return (\n\n
\n );\n};\n","import moment from \"moment\";\nimport React from \"react\";\n\nconst formatDate = dateInIsoString => {\n return moment(dateInIsoString).format(\"DD.MM.YYYY HH:mm\");\n};\n\nexport const AdminUserHistoryBody = props => {\n const { listOfData } = props;\n\n return (\n \n
\n \n Total Budget: {transformTokensToRsd(tokens.totalTokens)}{\" \"}\n {transformTokenCurrencyIcons()}\n
\n\n Remaining Budget:{\" \"}\n {transformTokensToRsd(tokens.remainingTokens)}{\" \"}\n {transformTokenCurrencyIcons()}\n
\n\n
\n \n
\n );\n};\n","import React from \"react\";\nimport AdminUserHistoryContentStyles from \"./AdminUserHistoryContentStyles\";\nimport { AdminUserHistoryHeader } from \"./AdminUserHistoryHeader\";\nimport { AdminUserHistoryBody } from \"./AdminUserHistoryBody\";\nimport Pagination from \"react-pagination-js\";\nimport \"react-pagination-js/dist/styles.css\";\nimport { useDispatch } from \"react-redux\";\nimport { setAdminFilters } from \"../../../../actions/admin/admin.actions\";\n\nexport const AdminUserHistoryContent = props => {\n const dispatch = useDispatch();\n const { adminSingleUserData, filters } = props;\n\n const handlePageChange = page => {\n dispatch(setAdminFilters({ ...filters, page }));\n };\n\n return (\n <>\n \n {listOfData.map(adminHistoryItem => {\n return Object.entries(adminHistoryItem).map(([key, value]) => {\n return (\n
\n \n
\n );\n });\n })}\n \n
\n \n
\n {formatDate(key)}
\n\n \n
\n \n
\n {value}
\n\n
\n \n
\n {ShownContent()}
\n \n \n {chosenBenefitGroup && (\n <>\n \n {}}\n isPreview\n />\n \n \n
\n\n \n downloadPreview()}\n disabled={isDisabled}\n >\n {t(\"download\")}\n \n
\n \n )}\n \n \n );\n};\n","import React from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { useSelector } from \"react-redux\";\nimport { Header } from \"../../../components\";\nimport PreviewHRBenefitStyles from \"./PreviewHRBenefitStyles\";\nimport { PreviewHRBenefitBody } from \"./PreviewHRBenefitBody/PreviewHRBenefitBody\";\nimport { useHistory } from \"react-router-dom/cjs/react-router-dom.min\";\n\nexport const PreviewProviders = () => {\n const { t } = useTranslation();\n const history = useHistory();\n\n const benefitGroup = useSelector(\n state => state.benefits.editPageState.benefitGroup\n );\n const shouldRedirectToOriginal = () => history.push(\"/providers\");\n\n return (\n \n
\n \n
\n \n
\n Ooops something went wrong!
\n \n