From dcea69317812a471aacaccefb809bf2dda68e5cd Mon Sep 17 00:00:00 2001
From: Aleksander Nicacio da Silva <aleksander.silva@rocket.chat>
Date: Wed, 20 Mar 2024 19:40:27 -0300
Subject: [PATCH 1/6] feat: added Livechat's new theming settings to appearance
 page

---
 .../imports/server/rest/appearance.ts         |   6 +-
 .../app/livechat/server/api/lib/appearance.ts |   4 +
 .../appearance/AppearanceFieldLabel.tsx       |  30 +++++
 .../omnichannel/appearance/AppearanceForm.tsx | 104 +++++++++++++++++-
 packages/rest-typings/src/v1/omnichannel.ts   |   4 +-
 5 files changed, 144 insertions(+), 4 deletions(-)
 create mode 100644 apps/meteor/client/views/omnichannel/appearance/AppearanceFieldLabel.tsx

diff --git a/apps/meteor/app/livechat/imports/server/rest/appearance.ts b/apps/meteor/app/livechat/imports/server/rest/appearance.ts
index 5a0a884d97b2d..62c32e6b93e83 100644
--- a/apps/meteor/app/livechat/imports/server/rest/appearance.ts
+++ b/apps/meteor/app/livechat/imports/server/rest/appearance.ts
@@ -45,6 +45,10 @@ API.v1.addRoute(
 				'Livechat_name_field_registration_form',
 				'Livechat_email_field_registration_form',
 				'Livechat_registration_form_message',
+				'Livechat_hide_watermark',
+				'Livechat_background',
+				'Livechat_widget_position',
+				'Livechat_hide_system_messages',
 			];
 
 			const valid = settings.every((setting) => validSettingList.includes(setting._id));
@@ -69,7 +73,7 @@ API.v1.addRoute(
 						case 'int':
 							return {
 								_id: dbSetting._id,
-								value: coerceInt(setting.value),
+								value: coerceInt(setting.value as number),
 							};
 						default:
 							return {
diff --git a/apps/meteor/app/livechat/server/api/lib/appearance.ts b/apps/meteor/app/livechat/server/api/lib/appearance.ts
index d0a0a3df6b174..785413ead9d1c 100644
--- a/apps/meteor/app/livechat/server/api/lib/appearance.ts
+++ b/apps/meteor/app/livechat/server/api/lib/appearance.ts
@@ -24,6 +24,10 @@ export async function findAppearance(): Promise<{ appearance: ISetting[] }> {
 				'Livechat_email_field_registration_form',
 				'Livechat_registration_form_message',
 				'Livechat_conversation_finished_text',
+				'Livechat_hide_watermark',
+				'Livechat_background',
+				'Livechat_widget_position',
+				'Livechat_hide_system_messages',
 			],
 		},
 	};
diff --git a/apps/meteor/client/views/omnichannel/appearance/AppearanceFieldLabel.tsx b/apps/meteor/client/views/omnichannel/appearance/AppearanceFieldLabel.tsx
new file mode 100644
index 0000000000000..138dab5283b3b
--- /dev/null
+++ b/apps/meteor/client/views/omnichannel/appearance/AppearanceFieldLabel.tsx
@@ -0,0 +1,30 @@
+import { FieldLabel as BaseFieldLabel, Box, Tag } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import { useHasLicenseModule } from '../../../../ee/client/hooks/useHasLicenseModule';
+
+type FieldLabelProps = ComponentProps<typeof BaseFieldLabel> & {
+	premium?: boolean;
+	children: string;
+};
+
+export const FieldLabel = ({ children: label, premium = false }: FieldLabelProps) => {
+	const t = useTranslation();
+	const hasLicense = useHasLicenseModule('livechat-enterprise');
+	const shouldDisableEnterprise = premium && !hasLicense;
+
+	if (!shouldDisableEnterprise) {
+		return <BaseFieldLabel>{label}</BaseFieldLabel>;
+	}
+
+	return (
+		<BaseFieldLabel>
+			<Box is='span' mie={4}>
+				{label}
+			</Box>
+			<Tag variant='primary'>{t('Premium')}</Tag>
+		</BaseFieldLabel>
+	);
+};
diff --git a/apps/meteor/client/views/omnichannel/appearance/AppearanceForm.tsx b/apps/meteor/client/views/omnichannel/appearance/AppearanceForm.tsx
index 258cda39e9622..452fea1c5b89e 100644
--- a/apps/meteor/client/views/omnichannel/appearance/AppearanceForm.tsx
+++ b/apps/meteor/client/views/omnichannel/appearance/AppearanceForm.tsx
@@ -1,6 +1,5 @@
 import {
 	Field,
-	FieldLabel,
 	FieldRow,
 	TextInput,
 	ToggleSwitch,
@@ -9,6 +8,9 @@ import {
 	InputBox,
 	TextAreaInput,
 	NumberInput,
+	Select,
+	MultiSelect,
+	FieldHint,
 } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 import { useTranslation } from '@rocket.chat/ui-contexts';
@@ -16,8 +18,13 @@ import type { ChangeEvent } from 'react';
 import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
+import { useHasLicenseModule } from '../../../../ee/client/hooks/useHasLicenseModule';
+import MarkdownText from '../../../components/MarkdownText';
+import { FieldLabel } from './AppearanceFieldLabel';
+
 const AppearanceForm = () => {
 	const t = useTranslation();
+	const isEnterprise = useHasLicenseModule('livechat-enterprise');
 
 	const { control, watch } = useFormContext();
 	const { Livechat_enable_message_character_limit } = watch();
@@ -41,9 +48,101 @@ const AppearanceForm = () => {
 	const livechatRegistrationFormMessageField = useUniqueId();
 	const livechatConversationFinishedMessageField = useUniqueId();
 	const livechatConversationFinishedTextField = useUniqueId();
+	const livechatHideWatermarkField = useUniqueId();
+	const livechatWidgetPositionField = useUniqueId();
+	const livechatBackgroundField = useUniqueId();
+	const livechatHideSystemMessagesField = useUniqueId();
 
 	return (
 		<Accordion>
+			<Accordion.Item defaultExpanded title={t('General')}>
+				<FieldGroup>
+					<Field>
+						<FieldRow>
+							<FieldLabel premium htmlFor={livechatHideWatermarkField}>
+								{t('Livechat_hide_watermark')}
+							</FieldLabel>
+							<Controller
+								name='Livechat_hide_watermark'
+								control={control}
+								render={({ field: { value, ...field } }) => (
+									<ToggleSwitch id={livechatHideWatermarkField} {...field} checked={value} disabled={!isEnterprise} />
+								)}
+							/>
+						</FieldRow>
+					</Field>
+
+					<Field>
+						<FieldLabel premium htmlFor={livechatBackgroundField}>
+							{t('Livechat_background')}
+						</FieldLabel>
+						<FieldRow>
+							<Controller
+								name='Livechat_background'
+								control={control}
+								render={({ field: { value, ...field } }) => (
+									<TextInput {...field} id={livechatBackgroundField} value={value} disabled={!isEnterprise} />
+								)}
+							/>
+						</FieldRow>
+						<FieldHint>
+							<MarkdownText variant='inline' preserveHtml content={t('Livechat_background_description')} />
+						</FieldHint>
+					</Field>
+
+					<Field>
+						<FieldLabel premium htmlFor={livechatWidgetPositionField}>
+							{t('Livechat_widget_position_on_the_screen')}
+						</FieldLabel>
+						<FieldRow>
+							<Controller
+								name='Livechat_widget_position'
+								control={control}
+								render={({ field: { value, ...field } }) => (
+									<Select
+										{...field}
+										id={livechatWidgetPositionField}
+										value={value}
+										disabled={!isEnterprise}
+										options={[
+											['left', t('Left')],
+											['right', t('Right')],
+										]}
+									/>
+								)}
+							/>
+						</FieldRow>
+					</Field>
+
+					<Field>
+						<FieldLabel premium htmlFor={livechatHideSystemMessagesField}>
+							{t('Livechat_hide_system_messages')}
+						</FieldLabel>
+						<FieldRow>
+							<Controller
+								name='Livechat_hide_system_messages'
+								control={control}
+								render={({ field: { value, ...field } }) => (
+									<MultiSelect
+										{...field}
+										id={livechatHideSystemMessagesField}
+										value={value}
+										disabled={!isEnterprise}
+										options={[
+											['uj', t('Message_HideType_uj')],
+											['ul', t('Message_HideType_ul')],
+											['livechat-close', t('Message_HideType_livechat_closed')],
+											['livechat-started', t('Message_HideType_livechat_started')],
+											['livechat_transfer_history', t('Message_HideType_livechat_transfer_history')],
+										]}
+									/>
+								)}
+							/>
+						</FieldRow>
+					</Field>
+				</FieldGroup>
+			</Accordion.Item>
+
 			<Accordion.Item defaultExpanded title={t('Livechat_online')}>
 				<FieldGroup>
 					<Field>
@@ -118,6 +217,7 @@ const AppearanceForm = () => {
 					</Field>
 				</FieldGroup>
 			</Accordion.Item>
+
 			<Accordion.Item title={t('Livechat_offline')}>
 				<FieldGroup>
 					<Field>
@@ -192,6 +292,7 @@ const AppearanceForm = () => {
 					</Field>
 				</FieldGroup>
 			</Accordion.Item>
+
 			<Accordion.Item title={t('Livechat_registration_form')}>
 				<FieldGroup>
 					<Field>
@@ -242,6 +343,7 @@ const AppearanceForm = () => {
 					</Field>
 				</FieldGroup>
 			</Accordion.Item>
+
 			<Accordion.Item title={t('Conversation_finished')}>
 				<FieldGroup>
 					<Field>
diff --git a/packages/rest-typings/src/v1/omnichannel.ts b/packages/rest-typings/src/v1/omnichannel.ts
index 354794a00f59e..3dad53cbe8d29 100644
--- a/packages/rest-typings/src/v1/omnichannel.ts
+++ b/packages/rest-typings/src/v1/omnichannel.ts
@@ -3168,7 +3168,7 @@ export const isPOSTLivechatTriggersParams = ajv.compile<POSTLivechatTriggersPara
 
 type POSTLivechatAppearanceParams = {
 	_id: string;
-	value: string | boolean | number;
+	value: string | boolean | number | string[];
 }[];
 
 const POSTLivechatAppearanceParamsSchema = {
@@ -3181,7 +3181,7 @@ const POSTLivechatAppearanceParamsSchema = {
 			},
 			value: {
 				// Be careful with anyOf - https://github.com/ajv-validator/ajv/issues/1140
-				type: ['string', 'boolean', 'number'],
+				type: ['string', 'boolean', 'number', 'array'],
 			},
 		},
 		required: ['_id', 'value'],

From c5d7f5a25bd390209292ce5dccefbbaaab1fb64c Mon Sep 17 00:00:00 2001
From: Aleksander Nicacio da Silva <aleksander.silva@rocket.chat>
Date: Fri, 22 Mar 2024 14:30:29 -0300
Subject: [PATCH 2/6] chore: changeset

---
 .changeset/good-baboons-shop.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 .changeset/good-baboons-shop.md

diff --git a/.changeset/good-baboons-shop.md b/.changeset/good-baboons-shop.md
new file mode 100644
index 0000000000000..5a7230d841fb6
--- /dev/null
+++ b/.changeset/good-baboons-shop.md
@@ -0,0 +1,13 @@
+---
+"@rocket.chat/meteor": minor
+"@rocket.chat/rest-typings": minor
+---
+
+**Added Livechat's new theming settings to Appearance page (available for Premium workspaces)**
+
+Newly added settings are:
+- `Livechat widget position on the screen`:  Changes the widget position between left or right of the viewport
+- `Livechat background`: Changes the message list background. Receives the same value as the CSS's background property.
+- `Hide system messages`: Changes the visibility of system messages displayed on the widget.
+- `Hide "powered by Rocket.Chat"`: Changes the visibility of Rocket.Chat's watermark on the widget.
+

From 10b852dd4a8655080f7d724527e46a96335ab8cd Mon Sep 17 00:00:00 2001
From: Aleksander Nicacio da Silva <aleksander.silva@rocket.chat>
Date: Fri, 22 Mar 2024 15:00:13 -0300
Subject: [PATCH 3/6] refactor: adjusted coerceInt to account for arrays

---
 .../meteor/app/livechat/imports/server/rest/appearance.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/app/livechat/imports/server/rest/appearance.ts b/apps/meteor/app/livechat/imports/server/rest/appearance.ts
index 62c32e6b93e83..4ae0549982074 100644
--- a/apps/meteor/app/livechat/imports/server/rest/appearance.ts
+++ b/apps/meteor/app/livechat/imports/server/rest/appearance.ts
@@ -73,7 +73,7 @@ API.v1.addRoute(
 						case 'int':
 							return {
 								_id: dbSetting._id,
-								value: coerceInt(setting.value as number),
+								value: coerceInt(setting.value),
 							};
 						default:
 							return {
@@ -95,7 +95,7 @@ API.v1.addRoute(
 	},
 );
 
-function coerceInt(value: string | number | boolean): number {
+function coerceInt(value: string | number | boolean | string[]): number {
 	if (typeof value === 'number') {
 		return value;
 	}
@@ -104,6 +104,10 @@ function coerceInt(value: string | number | boolean): number {
 		return 0;
 	}
 
+	if (Array.isArray(value)) {
+		return 0;
+	}
+
 	const parsedValue = parseInt(value, 10);
 	if (Number.isNaN(parsedValue)) {
 		return 0;

From d41463ea5d27fbdc5b1e1413205433c1b54270e8 Mon Sep 17 00:00:00 2001
From: Kevin Aleman <kaleman960@gmail.com>
Date: Fri, 22 Mar 2024 13:28:14 -0600
Subject: [PATCH 4/6] tests

---
 .../imports/server/rest/appearance.ts         |  9 +++
 .../end-to-end/api/livechat/02-appearance.ts  | 57 +++++++++++++++++++
 2 files changed, 66 insertions(+)

diff --git a/apps/meteor/app/livechat/imports/server/rest/appearance.ts b/apps/meteor/app/livechat/imports/server/rest/appearance.ts
index 4ae0549982074..cca4ea9175859 100644
--- a/apps/meteor/app/livechat/imports/server/rest/appearance.ts
+++ b/apps/meteor/app/livechat/imports/server/rest/appearance.ts
@@ -4,6 +4,7 @@ import { isPOSTLivechatAppearanceParams } from '@rocket.chat/rest-typings';
 import { isTruthy } from '../../../../../lib/isTruthy';
 import { API } from '../../../../api/server';
 import { findAppearance } from '../../../server/api/lib/appearance';
+import { ISettingSelectOption } from '@rocket.chat/core-typings';
 
 API.v1.addRoute(
 	'livechat/appearance',
@@ -64,6 +65,10 @@ API.v1.addRoute(
 						return;
 					}
 
+					if (dbSetting.type === 'multiSelect' && (!Array.isArray(setting.value) || !validateValues(setting.value, dbSetting.values))) {
+						return;
+					}
+
 					switch (dbSetting?.type) {
 						case 'boolean':
 							return {
@@ -95,6 +100,10 @@ API.v1.addRoute(
 	},
 );
 
+function validateValues(values: string[], allowedValues: ISettingSelectOption[] = []): boolean {
+	return values.every((value) => allowedValues.some((allowedValue) => allowedValue.key === value));
+}
+
 function coerceInt(value: string | number | boolean | string[]): number {
 	if (typeof value === 'number') {
 		return value;
diff --git a/apps/meteor/tests/end-to-end/api/livechat/02-appearance.ts b/apps/meteor/tests/end-to-end/api/livechat/02-appearance.ts
index 281db92f72335..1c193cc95e224 100644
--- a/apps/meteor/tests/end-to-end/api/livechat/02-appearance.ts
+++ b/apps/meteor/tests/end-to-end/api/livechat/02-appearance.ts
@@ -5,6 +5,7 @@ import type { Response } from 'supertest';
 import { getCredentials, api, request, credentials } from '../../../data/api-data';
 import { sleep } from '../../../data/livechat/utils';
 import { removePermissionFromAllRoles, restorePermissionToRoles, updatePermission, updateSetting } from '../../../data/permissions.helper';
+import { IS_EE } from '../../../e2e/config/constants';
 
 describe('LIVECHAT - appearance', function () {
 	this.retries(0);
@@ -198,5 +199,61 @@ describe('LIVECHAT - appearance', function () {
 			const { body } = await request.get(api('livechat/config')).set(credentials).expect(200);
 			expect(body.config.settings.limitTextLength).to.be.false;
 		});
+		(IS_EE ? it : it.skip)('should accept an array setting', async () => {
+			await request
+				.post(api('livechat/appearance'))
+				.set(credentials)
+				.send([{ _id: 'Livechat_hide_system_messages', value: ['uj'] }])
+				.expect(200);
+			await sleep(500);
+
+			// Get data from livechat/config
+			const { body } = await request.get(api('livechat/config')).set(credentials).expect(200);
+			expect(body.config.settings.hiddenSystemMessages).to.be.an('array');
+			expect(body.config.settings.hiddenSystemMessages).to.include('uj');
+		});
+		(IS_EE ? it : it.skip)('should accept an array setting with multiple values', async () => {
+			await request
+				.post(api('livechat/appearance'))
+				.set(credentials)
+				.send([{ _id: 'Livechat_hide_system_messages', value: ['uj', 'ul'] }])
+				.expect(200);
+			await sleep(500);
+
+			// Get data from livechat/config
+			const { body } = await request.get(api('livechat/config')).set(credentials).expect(200);
+			expect(body.config.settings.hiddenSystemMessages).to.be.an('array');
+			expect(body.config.settings.hiddenSystemMessages).to.include('uj');
+			expect(body.config.settings.hiddenSystemMessages).to.include('ul');
+		});
+		(IS_EE ? it : it.skip)('should not update an array setting with a value other than array', async () => {
+			await request
+				.post(api('livechat/appearance'))
+				.set(credentials)
+				.send([{ _id: 'Livechat_hide_system_messages', value: 'uj' }])
+				.expect(200);
+
+			await sleep(500);
+
+			// Get data from livechat/config
+			const { body } = await request.get(api('livechat/config')).set(credentials).expect(200);
+			expect(body.config.settings.hiddenSystemMessages).to.be.an('array');
+			expect(body.config.settings.hiddenSystemMessages).to.include('uj');
+		});
+		(IS_EE ? it : it.skip)('should not update an array setting with values that are not valid setting values', async () => {
+			await request
+				.post(api('livechat/appearance'))
+				.set(credentials)
+				.send([{ _id: 'Livechat_hide_system_messages', value: ['uj', 'invalid'] }])
+				.expect(200);
+
+			await sleep(500);
+
+			// Get data from livechat/config
+			const { body } = await request.get(api('livechat/config')).set(credentials).expect(200);
+			expect(body.config.settings.hiddenSystemMessages).to.be.an('array');
+			expect(body.config.settings.hiddenSystemMessages).to.include('uj');
+			expect(body.config.settings.hiddenSystemMessages).to.not.include('invalid');
+		});
 	});
 });

From 86e1b01c2c2f59ffca001c8d03028b058675ff7e Mon Sep 17 00:00:00 2001
From: Kevin Aleman <kaleman960@gmail.com>
Date: Fri, 22 Mar 2024 13:42:36 -0600
Subject: [PATCH 5/6] lint

---
 apps/meteor/app/livechat/imports/server/rest/appearance.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/meteor/app/livechat/imports/server/rest/appearance.ts b/apps/meteor/app/livechat/imports/server/rest/appearance.ts
index cca4ea9175859..55607551ec3ae 100644
--- a/apps/meteor/app/livechat/imports/server/rest/appearance.ts
+++ b/apps/meteor/app/livechat/imports/server/rest/appearance.ts
@@ -1,10 +1,10 @@
+import type { ISettingSelectOption } from '@rocket.chat/core-typings';
 import { Settings } from '@rocket.chat/models';
 import { isPOSTLivechatAppearanceParams } from '@rocket.chat/rest-typings';
 
 import { isTruthy } from '../../../../../lib/isTruthy';
 import { API } from '../../../../api/server';
 import { findAppearance } from '../../../server/api/lib/appearance';
-import { ISettingSelectOption } from '@rocket.chat/core-typings';
 
 API.v1.addRoute(
 	'livechat/appearance',

From 380f7e9c7c360af1ff1c2b78257267fa6bb0d3c9 Mon Sep 17 00:00:00 2001
From: Aleksander Nicacio da Silva <aleksander.silva@rocket.chat>
Date: Mon, 25 Mar 2024 10:31:50 -0300
Subject: [PATCH 6/6] refactor: changed export to export default

---
 .../views/omnichannel/appearance/AppearanceFieldLabel.tsx     | 4 +++-
 .../client/views/omnichannel/appearance/AppearanceForm.tsx    | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/meteor/client/views/omnichannel/appearance/AppearanceFieldLabel.tsx b/apps/meteor/client/views/omnichannel/appearance/AppearanceFieldLabel.tsx
index 138dab5283b3b..ba8b54aeaccf8 100644
--- a/apps/meteor/client/views/omnichannel/appearance/AppearanceFieldLabel.tsx
+++ b/apps/meteor/client/views/omnichannel/appearance/AppearanceFieldLabel.tsx
@@ -10,7 +10,7 @@ type FieldLabelProps = ComponentProps<typeof BaseFieldLabel> & {
 	children: string;
 };
 
-export const FieldLabel = ({ children: label, premium = false }: FieldLabelProps) => {
+const FieldLabel = ({ children: label, premium = false }: FieldLabelProps) => {
 	const t = useTranslation();
 	const hasLicense = useHasLicenseModule('livechat-enterprise');
 	const shouldDisableEnterprise = premium && !hasLicense;
@@ -28,3 +28,5 @@ export const FieldLabel = ({ children: label, premium = false }: FieldLabelProps
 		</BaseFieldLabel>
 	);
 };
+
+export default FieldLabel;
diff --git a/apps/meteor/client/views/omnichannel/appearance/AppearanceForm.tsx b/apps/meteor/client/views/omnichannel/appearance/AppearanceForm.tsx
index 452fea1c5b89e..91c8d20f49f7f 100644
--- a/apps/meteor/client/views/omnichannel/appearance/AppearanceForm.tsx
+++ b/apps/meteor/client/views/omnichannel/appearance/AppearanceForm.tsx
@@ -20,7 +20,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 
 import { useHasLicenseModule } from '../../../../ee/client/hooks/useHasLicenseModule';
 import MarkdownText from '../../../components/MarkdownText';
-import { FieldLabel } from './AppearanceFieldLabel';
+import FieldLabel from './AppearanceFieldLabel';
 
 const AppearanceForm = () => {
 	const t = useTranslation();