Settings updates

src/pages/settings/components/Messages/Messages.tsx

@@ -1,20 +1,29 @@
 import {
+	ActionIcon,
 	Button,
 	Divider,
 	Grid,
 	GridCol,
 	Group,
+	Highlight,
 	Modal,
+	Popover,
 	Stack,
 	Text,
 	TextInput,
 } from '@mantine/core';
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
-import DebouncedMessage from 'components/Shared/DebouncedMessage';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
+import DebouncedMessage from 'pages/settings/components/Messages/DebouncedMessage';
 import { useEffect, useState } from 'react';
-import { FiPlus } from 'react-icons/fi';
-import { buttonClasses, modalClasses, textClasses, textInputClasses } from 'styles';
+import { FiHelpCircle, FiPlus } from 'react-icons/fi';
+import {
+	actionIconClasses,
+	buttonClasses,
+	modalClasses,
+	textClasses,
+	textInputClasses,
+} from 'styles';
 const MessageSettings = () => {
 	const endpoint = 'api/messages';
 	const {
@@ -32,6 +41,8 @@ const MessageSettings = () => {
 	const [newMessageError, setNewMessageError] = useState<string>('');
 	const [message, setMessage] = useState({});
 	const [debounced] = useDebouncedValue(message, 1000);
+	const [searchValue, setSearchValue] = useState('');
+	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 
 	const handleDelete = (message: any) => {
@@ -40,9 +51,13 @@ const MessageSettings = () => {
 
 	useEffect(() => {
 		if (messageData && isMessagesFetched) {
-			setMessages(messageData);
+			setMessages(
+				messageData.filter((m: any) =>
+					m.message.toLowerCase().includes(debouncedSearch.toLowerCase()),
+				),
+			);
 		}
-	}, [messageData, isMessagesFetched]);
+	}, [messageData, isMessagesFetched, debouncedSearch]);
 
 	useEffect(() => {
 		if (Object.keys(debounced).length) {
@@ -51,7 +66,7 @@ const MessageSettings = () => {
 	}, [debounced]);
 
 	return (
-		<Stack>
+		<Stack w={'100%'}>
 			<Modal.Root
 				size={'60%'}
 				className={modalClasses.helpModal}
@@ -127,27 +142,77 @@ const MessageSettings = () => {
 				<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
 					Messages
 				</Text>
+				<Popover withArrow withOverlay withinPortal={false}>
+					<Popover.Target>
+						<ActionIcon
+							className={actionIconClasses.settingsTooltip}
+							classNames={actionIconClasses}
+						>
+							<FiHelpCircle />
+						</ActionIcon>
+					</Popover.Target>
+					<Popover.Dropdown
+						style={{
+							color: theme.primaryColor,
+							backgroundColor: theme.backgroundColor,
+						}}
+					>
+						<Stack>
+							<Text className={textClasses.settingsTooltip} classNames={textClasses}>
+								{'Messages may contain any unicode text.'}
+							</Text>
+							<Highlight
+								ta={'center'}
+								highlight={['$firstName', '$lastName', '$^firstName', '$^lastName']}
+								className={textClasses.settingsTooltip}
+								classNames={textClasses}
+								highlightStyles={{
+									backgroundImage:
+										'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
+									fontWeight: 700,
+									WebkitBackgroundClip: 'text',
+									WebkitTextFillColor: 'transparent',
+								}}
+							>
+								{
+									'Built-in variables include $firstName and $lastName. To force the text to upper case, use a carat (^), ie, $^firstName.'
+								}
+							</Highlight>
+						</Stack>
+					</Popover.Dropdown>
+				</Popover>
 				<Button
-					mt={'1.5rem'}
 					className={buttonClasses.tableButton}
 					classNames={buttonClasses}
 					onClick={openModal}
 				>
 					<FiPlus />
 				</Button>
+				<TextInput
+					className={textInputClasses.settingsItem}
+					classNames={textInputClasses}
+					autoFocus
+					placeholder='Search...'
+					value={searchValue}
+					onInput={(event: any) => {
+						setSearchValue(event.target.value);
+					}}
+				/>
 			</Group>
-			<Grid>
-				{messages?.map((message: any) => (
-					<GridCol span={6} key={message.id}>
-						<DebouncedMessage
-							label={`ID# ${message.id}`}
-							message={message}
-							setMessage={setMessage}
-							handleDelete={handleDelete}
-						/>
-					</GridCol>
-				))}
-			</Grid>
+			<Stack w={'100%'} align='center'>
+				<Grid w={'75%'}>
+					{messages?.map((message: any) => (
+						<GridCol span={6} key={message.id}>
+							<DebouncedMessage
+								label={`ID# ${message.id}`}
+								message={message}
+								setMessage={setMessage}
+								handleDelete={handleDelete}
+							/>
+						</GridCol>
+					))}
+				</Grid>
+			</Stack>
 		</Stack>
 	);
 };