Feat/delphi 46 group chat

src/api/apiGroupChatSettings.ts

@@ -7,6 +7,8 @@ export interface groupChatSettings {
 	startDate: string;
 	startTime: string;
 	duration: number;
+	agencyId: number;
+	hintMessage: string;
 	repetitive: boolean;
 	featureGroupChatV2Enabled?: boolean;
 }

src/components/form/textarea.styles.scss

@@ -12,7 +12,11 @@
 	}
 
 	&__letters {
-		text-align: right;
+		position: absolute;
+		top: 4px;
+		right: 20px;
+		font-size: 12px;
+		color: $tertiary;
 	}
 
 	textarea {
@@ -23,6 +27,7 @@
 		border-radius: $input-field-border-radius;
 		outline: 0;
 		box-shadow: $input-field-box-shadow;
+		vertical-align: top;
 
 		&:hover {
 			border: 1px solid $form-active;

src/components/form/textarea.tsx

@@ -41,13 +41,13 @@ export const Textarea = ({
 						{placeholder}
 					</label>
 				)}
+				{attrs.maxLength && (
+					<div className="textarea__letters">
+						{(attrs?.value?.toString() ?? '').length} /{' '}
+						{attrs.maxLength}
+					</div>
+				)}
 			</div>
-			{attrs.maxLength && (
-				<div className="textarea__letters">
-					{(attrs?.value?.toString() ?? '').length} /{' '}
-					{attrs.maxLength}
-				</div>
-			)}
 		</div>
 	);
 };

src/components/groupChat/CreateChatView.tsx

@@ -12,7 +12,8 @@ import {
 	getExtendedSession,
 	UPDATE_SESSIONS,
 	SessionTypeContext,
-	useTenant
+	useTenant,
+	UserDataContext
 } from '../../globalState';
 import { InputField, InputFieldItem } from '../inputField/InputField';
 import { Checkbox, CheckboxItem } from '../checkbox/Checkbox';
@@ -45,20 +46,26 @@ import { useResponsive } from '../../hooks/useResponsive';
 import { apiGetSessionRoomsByGroupIds } from '../../api/apiGetSessionRooms';
 import { useSearchParam } from '../../hooks/useSearchParams';
 import { useTranslation } from 'react-i18next';
+import { Textarea } from '../form/textarea';
 
 registerLocale('de', de);
 
 export const CreateGroupChatView = (props) => {
 	const { t: translate } = useTranslation();
 	const { rcGroupId: groupIdFromParam } = useParams<{ rcGroupId: string }>();
 	const history = useHistory();
+	const {
+		userData: { agencies = [] }
+	} = useContext(UserDataContext);
 
 	const { sessions, ready, dispatch } = useContext(SessionsDataContext);
 	const { path: listPath } = useContext(SessionTypeContext);
 	const [selectedChatTopic, setSelectedChatTopic] = useState('');
 	const [selectedDate, setSelectedDate] = useState('');
 	const [selectedTime, setSelectedTime] = useState('');
 	const [selectedDuration, setSelectedDuration] = useState(null);
+	const [selectedAgency, setSelectedAgency] = useState<number | null>(null);
+	const [hintMessage, setHintMessage] = useState('');
 	const [selectedRepetitive, setSelectedRepetitive] = useState(false);
 	const [isCreateButtonDisabled, setIsCreateButtonDisabled] = useState(true);
 	const [isSaveButtonDisabled, setIsSaveButtonDisabled] = useState(true);
@@ -174,6 +181,12 @@ export const CreateGroupChatView = (props) => {
 			handleTimePicker(selectedTime);
 			setSelectedDuration(activeSession.item.duration);
 			setSelectedRepetitive(activeSession.item.repetitive);
+			setSelectedAgency(
+				activeSession.item.assignedAgencies?.length > 0
+					? activeSession.item.assignedAgencies[0].id
+					: null
+			);
+			setHintMessage(activeSession.item.hintMessage);
 		}
 	}, [groupIdFromParam, props.location.state, ready, sessions]);
 
@@ -192,21 +205,35 @@ export const CreateGroupChatView = (props) => {
 			prefillTime.toLocaleTimeString() !==
 				inputTime.toLocaleTimeString() ||
 			parseInt(selectedDuration) !== activeSession.item.duration ||
-			selectedRepetitive !== activeSession.item.repetitive
+			selectedRepetitive !== activeSession.item.repetitive ||
+			selectedAgency !== activeSession.item.assignedAgencies?.[0]?.id ||
+			hintMessage !== activeSession.item.hintMessage
 		);
 	}, [
 		activeSession?.item.duration,
 		activeSession?.item.repetitive,
 		activeSession?.item.startDate,
 		activeSession?.item.startTime,
 		activeSession?.item.topic,
+		activeSession?.item.assignedAgencies,
+		activeSession?.item.hintMessage,
+		hintMessage,
+		selectedAgency,
 		selectedChatTopic,
 		selectedDate,
 		selectedDuration,
 		selectedRepetitive,
 		selectedTime
 	]);
 
+	useEffect(() => {
+		const onlyOneAgencyAvailable = agencies?.length === 1;
+
+		if (onlyOneAgencyAvailable) {
+			setSelectedAgency(agencies[0].id);
+		}
+	}, [agencies]);
+
 	useEffect(() => {
 		const isChatTopicValid =
 			selectedChatTopic &&
@@ -216,7 +243,8 @@ export const CreateGroupChatView = (props) => {
 			isChatTopicValid &&
 			selectedDate &&
 			selectedTime &&
-			selectedDuration
+			selectedDuration &&
+			selectedAgency
 		) {
 			isEditGroupChatMode && arePrefilledValuesChanged()
 				? setIsSaveButtonDisabled(false)
@@ -231,11 +259,12 @@ export const CreateGroupChatView = (props) => {
 		selectedDate,
 		selectedTime,
 		selectedDuration,
+		selectedAgency,
 		isEditGroupChatMode,
 		arePrefilledValuesChanged
 	]);
 
-	const handleBackButton = () => {
+	const handleEditGroupChatBackButton = () => {
 		if (isEditGroupChatMode) {
 			const pathInfo =
 				(prevPathIsGroupChatInfo ? '/groupChatInfo' : '') +
@@ -246,9 +275,15 @@ export const CreateGroupChatView = (props) => {
 		}
 	};
 
+	const handleCreateGroupChatBackButton = () => {
+		if (!isEditGroupChatMode) {
+			history.push('/sessions/consultant/sessionView');
+		}
+	};
+
 	const chatTopicInputItem: InputFieldItem = {
 		name: 'chatTopic',
-		class: 'creatChat__name__input',
+		class: 'createChat__name__input',
 		id: 'chatTopic',
 		type: 'text',
 		label: translate(chatTopicLabel),
@@ -280,6 +315,10 @@ export const CreateGroupChatView = (props) => {
 		setSelectedDuration(selectedOption.value);
 	};
 
+	const handleAgencySelect = (selectedOption) => {
+		setSelectedAgency(parseInt(selectedOption.value));
+	};
+
 	const getOptionOfSelectedDuration = useCallback(() => {
 		return durationSelectOptionsSet
 			.map((option) => ({ ...option, label: translate(option.label) }))
@@ -311,6 +350,32 @@ export const CreateGroupChatView = (props) => {
 		[getOptionOfSelectedDuration, translate]
 	);
 
+	const getOptionOfSelectedAgency = useCallback(() => {
+		const agency = agencies.find((agency) => agency.id === selectedAgency);
+		return agency
+			? {
+					value: agency.id.toString(),
+					label: agency.name
+			  }
+			: null;
+	}, [agencies, selectedAgency]);
+
+	const agencySelectDropdown = useMemo<SelectDropdownItem>(
+		() => ({
+			id: 'agency',
+			selectedOptions: agencies.map(({ id, name }) => ({
+				value: id.toString(),
+				label: name
+			})),
+			defaultValue: getOptionOfSelectedAgency(),
+			handleDropdownSelect: handleAgencySelect,
+			selectInputLabel: translate('groupChat.create.agencySelect.label'),
+			isSearchable: true,
+			menuPlacement: 'bottom'
+		}),
+		[agencies, getOptionOfSelectedAgency, translate]
+	);
+
 	const repetitiveCheckboxItem = useMemo<CheckboxItem>(
 		() => ({
 			inputId: 'isRepetitiveChat',
@@ -423,7 +488,9 @@ export const CreateGroupChatView = (props) => {
 			startDate: getValidDateFormatForSelectedDate(selectedDate),
 			startTime: getValidTimeFormatForSelectedTime(selectedTime),
 			duration: parseInt(selectedDuration),
+			agencyId: selectedAgency,
 			repetitive: selectedRepetitive,
+			hintMessage,
 			featureGroupChatV2Enabled
 		};
 
@@ -433,7 +500,9 @@ export const CreateGroupChatView = (props) => {
 	}, [
 		createGroupChat,
 		featureGroupChatV2Enabled,
+		hintMessage,
 		isEditGroupChatMode,
+		selectedAgency,
 		selectedChatTopic,
 		selectedDate,
 		selectedDuration,
@@ -483,7 +552,7 @@ export const CreateGroupChatView = (props) => {
 				<div className="createChat__header createChat__header--edit">
 					<div className="createChat__header__inner">
 						<span
-							onClick={handleBackButton}
+							onClick={handleEditGroupChatBackButton}
 							className="createChat__header__backButton"
 						>
 							<BackIcon />
@@ -500,7 +569,7 @@ export const CreateGroupChatView = (props) => {
 				<div className="createChat__header">
 					<div className="createChat__header__inner">
 						<span
-							onClick={handleBackButton}
+							onClick={handleEditGroupChatBackButton}
 							className="createChat__header__backButton"
 						>
 							<BackIcon />
@@ -514,6 +583,7 @@ export const CreateGroupChatView = (props) => {
 					</p>
 				</div>
 			)}
+
 			<form id="createChatForm" className="createChat__content">
 				<InputField
 					item={chatTopicInputItem}
@@ -541,6 +611,7 @@ export const CreateGroupChatView = (props) => {
 						{translate('groupChat.create.dateInput.label')}
 					</span>
 				</div>
+
 				<div className="formWrapper react-datepicker--time">
 					<DatePicker
 						selected={selectedTime}
@@ -565,32 +636,64 @@ export const CreateGroupChatView = (props) => {
 						{translate('groupChat.create.beginDateInput.label')}
 					</span>
 				</div>
+
 				<SelectDropdown {...durationSelectDropdown} />
+
+				{!isEditGroupChatMode && (
+					<SelectDropdown {...agencySelectDropdown} />
+				)}
+
+				<div className="createChat__textareaWrapper">
+					<Textarea
+						id="hintMessage"
+						value={hintMessage}
+						maxLength={300}
+						onChange={({ target: { value } }) =>
+							setHintMessage(value.slice(0, 300))
+						}
+						placeholder={translate(
+							'groupChat.create.hintMessage.label'
+						)}
+					/>
+					<p className="createChat__explanation">
+						{translate('groupChat.create.hintMessage.explanation')}
+					</p>
+				</div>
+
 				<Checkbox
 					item={repetitiveCheckboxItem}
 					checkboxHandle={() =>
 						setSelectedRepetitive(!selectedRepetitive)
 					}
 				/>
-				{isEditGroupChatMode ? (
-					<div className="createChat__buttonsWrapper">
-						<Button
-							item={buttonSetCancel}
-							buttonHandle={handleBackButton}
-						/>
-						<Button
-							item={buttonSetSave}
-							buttonHandle={handleCreateAndUpdateButton}
-							disabled={isSaveButtonDisabled}
-						/>
-					</div>
-				) : (
-					<Button
-						item={buttonSetCreate}
-						buttonHandle={handleCreateAndUpdateButton}
-						disabled={isCreateButtonDisabled}
-					/>
-				)}
+
+				<div className="createChat__buttonsWrapper">
+					{isEditGroupChatMode ? (
+						<>
+							<Button
+								item={buttonSetCancel}
+								buttonHandle={handleEditGroupChatBackButton}
+							/>
+							<Button
+								item={buttonSetSave}
+								buttonHandle={handleCreateAndUpdateButton}
+								disabled={isSaveButtonDisabled}
+							/>
+						</>
+					) : (
+						<>
+							<Button
+								item={buttonSetCancel}
+								buttonHandle={handleCreateGroupChatBackButton}
+							/>
+							<Button
+								item={buttonSetCreate}
+								buttonHandle={handleCreateAndUpdateButton}
+								disabled={isCreateButtonDisabled}
+							/>
+						</>
+					)}
+				</div>
 			</form>
 
 			{overlayActive && (