Feature/behaviour issues

frontend/src/app/services/testApi.ts

@@ -3186,6 +3186,7 @@ export type User = {
   subscribed_to_newsletter?: boolean
   health_insurance_company: HealthInsuranceCompany
   health_issues?: string
+  behaviour_issues?: string
   pronoun: PronounCategory
   is_active: boolean
   date_joined: string

frontend/src/org/components/EventForm/steps/registration/Applications.tsx

@@ -12,6 +12,7 @@ import {
 } from 'components'
 import { useRejectApplication } from 'hooks/rejectApplication'
 import React, { FC, ReactNode, useState } from 'react'
+import { isString } from 'lodash'
 import {
   FaDollarSign,
   FaInfoCircle as Detail,
@@ -24,6 +25,7 @@ import { formatDateTime } from 'utils/helpers'
 import { ApplicationStates } from '../ParticipantsStep'
 import styles from '../ParticipantsStep.module.scss'
 import { AddParticipantModal } from './AddParticipantModal'
+import { BehaviourIssuesTooltip } from './BehaviourIssuesTooltip'
 import { EmailListModal } from './EmailListModal'
 import { NewApplicationModal } from './NewApplicationModal'
 import { PaidForCheckbox } from './PaidForCheckbox'
@@ -146,6 +148,17 @@ export const Applications: FC<{
 
   let applications = applicationsData ? applicationsData.results : []
 
+  const { data: applicationUsersData } = api.endpoints.readUsers.useQuery(
+    applicationsData
+      ? {
+          id: applications
+            .map(application => application.user)
+            .filter(isString),
+        }
+      : skipToken,
+  )
+  const applicationUsers = applicationUsersData?.results ?? []
+
   const applicationsPending = applications.filter(
     app => app.state === ApplicationStates.pending,
   )
@@ -257,6 +270,9 @@ export const Applications: FC<{
       >
         <td onClick={showDetails}>
           {application.first_name} {application.last_name}
+          <BehaviourIssuesTooltip
+            user={applicationUsers.find(({ id }) => id == application.user)}
+          />
         </td>
         <td onClick={showDetails}>
           {application.birthday && formatDateTime(application.birthday)}

frontend/src/org/components/EventForm/steps/registration/BehaviourIssuesTooltip.module.scss

@@ -0,0 +1,6 @@
+@use 'styles/colors';
+
+.main {
+  color: colors.$error;
+  margin-left: 1ch;
+}

frontend/src/org/components/EventForm/steps/registration/BehaviourIssuesTooltip.tsx

@@ -0,0 +1,22 @@
+import { User } from 'app/services/bisTypes'
+import { FC } from 'react'
+import { IoWarning } from 'react-icons/io5'
+import Tooltip from 'react-tooltip-lite'
+
+import style from './BehaviourIssuesTooltip.module.scss'
+
+interface Props {
+  user?: User
+}
+
+export const BehaviourIssuesTooltip: FC<Props> = ({ user }) =>
+  user?.behaviour_issues ? (
+    <Tooltip
+      useDefaultStyles
+      content={user.behaviour_issues}
+      tagName="span"
+      className={style.main}
+    >
+      <IoWarning />
+    </Tooltip>
+  ) : null

frontend/src/org/components/EventForm/steps/registration/Participants.tsx

@@ -23,6 +23,7 @@ import colors from 'styles/colors.module.scss'
 import { formatAddress, formatDateTime } from 'utils/helpers'
 import { ApplicationStates } from '../ParticipantsStep'
 import styles from '../ParticipantsStep.module.scss'
+import { BehaviourIssuesTooltip } from './BehaviourIssuesTooltip'
 import { ShowApplicationModal } from './ShowApplicationModal'
 import { EmailListModal } from './EmailListModal'
 import { useExportParticipantsList } from './useExportParticipantsList'
@@ -467,6 +468,7 @@ export const Participants: FC<{
                           participant.nickname && `(${participant.nickname})`
                         }`}{' '}
                         {participant.last_name}
+                        <BehaviourIssuesTooltip user={participant} />
                       </td>
                       <td>{formatDateTime(participant.birthday)}</td>
                       <td>

frontend/src/org/components/EventForm/steps/registration/ShowApplicationModal.module.scss

@@ -0,0 +1,12 @@
+@use 'styles/colors';
+
+.behaviour {
+
+  background-color: colors.$error-light;
+  padding: 0.5rem 1rem;
+
+  .icon {
+    display: inline;
+    color: colors.$error;
+  }
+}

frontend/src/org/components/EventForm/steps/registration/ShowApplicationModal.tsx

@@ -6,13 +6,22 @@ import type {
   MembershipCategory,
   User,
 } from 'app/services/bisTypes'
-import { EmailButton, PhoneButton, StyledModal, DataView } from 'components'
+import {
+  EmailButton,
+  PhoneButton,
+  StyledModal,
+  DataView,
+  Help,
+} from 'components'
+import { IoWarning } from 'react-icons/io5'
 import styles from '../ParticipantsStep.module.scss'
 import { FC, Fragment } from 'react'
 import { mergeWith, omit } from 'lodash'
 import { withOverwriteArray } from 'utils/helpers'
 import * as combinedTranslations from 'config/static/combinedTranslations'
 
+import style from './ShowApplicationModal.module.scss'
+
 interface IShowApplicationModalProps {
   open: boolean
   onClose: () => void
@@ -90,6 +99,20 @@ export const ShowApplicationModal: FC<IShowApplicationModalProps> = ({
       onClose={onClose}
       title={`Přihláška na akci ${eventName}`}
     >
+      {user && user.behaviour_issues && (
+        <div className={style.behaviour}>
+          <h3>
+            <IoWarning className={style.icon} /> Problémy na akcích{' '}
+            <Help>
+              Na základě zpětné vazby organizátorů a účastníků akcí byl tento
+              účastník výkonným výborem označen za problémového. Níže je krátký
+              popis jeho chování. Pokud chcete vědět více, napište na{' '}
+              <EmailButton>[email protected]</EmailButton>
+            </Help>
+          </h3>
+          {user.behaviour_issues}{' '}
+        </div>
+      )}
       {currentApplication &&
         (!participantsMap ||
           !user ||