Features/task 63787

libs/components/src/lib/components/ChannelList/ChannelListComponents/index.tsx

@@ -19,7 +19,7 @@ import {
 	useAppDispatch
 } from '@mezon/store';
 import { Icons } from '@mezon/ui';
-import { DONE_ONBOARDING_STATUS, EPermission } from '@mezon/utils';
+import { DONE_ONBOARDING_STATUS, EPermission, generateE2eId } from '@mezon/utils';
 import { memo, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useModal } from 'react-modal-hook';
@@ -128,6 +128,7 @@ export const Events = memo(() => {
 			<div
 				className="self-stretch  items-center inline-flex cursor-pointer px-2 rounded-lg h-[34px] bg-item-hover  text-theme-primary text-theme-primary-hover"
 				onClick={openModal}
+				data-e2e={generateE2eId('clan_page.side_bar.button.events')}
 			>
 				<div className="grow w-5 flex-row items-center gap-2 flex">
 					<div className="h-5 relative flex justify-center gap-2  items-center">

libs/components/src/lib/components/ChannelList/EventChannelModal/ModalCreate/eventInfoModal.tsx

@@ -3,7 +3,7 @@ import { selectCurrentChannelId, selectCurrentClanId, selectTheme } from '@mezon
 import { handleUploadFile, useMezon } from '@mezon/transport';
 import { TextArea, TimePicker } from '@mezon/ui';
 import type { ContenSubmitEventProps } from '@mezon/utils';
-import { ERepeatType, MAX_FILE_SIZE_1MB, fileTypeImage } from '@mezon/utils';
+import { ERepeatType, MAX_FILE_SIZE_1MB, fileTypeImage, generateE2eId } from '@mezon/utils';
 import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -296,7 +296,7 @@ const EventInfoModal = (props: EventInfoModalProps) => {
 					>
 						{t('actions.uploadImage')}
 					</div>
-					<input type="file" hidden onChange={(e) => handleFile(e)} className="w-full text-sm text-slate-500 " />
+					<input type="file" hidden onChange={(e) => handleFile(e)} className="w-full text-sm text-slate-500 " data-e2e={generateE2eId('clan_page.modal.create_event.upload.image_cover_input')} />
 				</label>
 				{contentSubmit.logo && <img src={contentSubmit.logo} alt="logo" className="max-h-[180px] rounded w-full object-cover" />}
 			</div>

libs/components/src/lib/components/ChannelList/EventChannelModal/ModalCreate/index.tsx

@@ -11,7 +11,7 @@ import {
 	useAppDispatch,
 	useAppSelector
 } from '@mezon/store';
-import { ContenSubmitEventProps, ERepeatType, OptionEvent, Tabs_Option } from '@mezon/utils';
+import { ContenSubmitEventProps, ERepeatType, generateE2eId, OptionEvent, Tabs_Option } from '@mezon/utils';
 import isEqual from 'lodash.isequal';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -401,6 +401,7 @@ const ModalCreate = (props: ModalCreateProps) => {
 						<button
 							className={`px-4 py-2 rounded font-semibold text-white bg-primary ${(!buttonWork || errorTime || errorOption) && ' bg-opacity-50'}`}
 							onClick={() => handleNext(currentModal)}
+							data-e2e={generateE2eId('clan_page.modal.create_event.next')}
 						>
 							{t('actions.next')}
 						</button>

libs/components/src/lib/components/ChannelList/EventChannelModal/StartEvent/StartEvent.tsx

@@ -4,6 +4,7 @@ import { Icons } from '@mezon/ui';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import ListEventManagement from './ListEventManagement';
+import { generateE2eId } from '@mezon/utils';
 
 type StartEventModalProps = {
 	onClose: () => void;
@@ -31,7 +32,7 @@ export const StartEventModal = (props: StartEventModalProps) => {
 						</h4>
 					</div>
 					<div className="w-[0.1px] h-4 bg-gray-400"></div>
-					<div className="btn-primary btn-primary-hover  px-2 py-1 rounded-lg text-white font-medium cursor-pointer" onClick={onOpenCreate}>
+					<div className="btn-primary btn-primary-hover  px-2 py-1 rounded-lg text-white font-medium cursor-pointer" onClick={onOpenCreate} data-e2e={generateE2eId('clan_page.modal.create_event.button_create')}>
 						{t('actions.create')}
 					</div>
 				</div>

libs/components/src/lib/components/ChannelSetting/channelSettingItem.tsx

@@ -1,7 +1,7 @@
 import { useChannels, usePermissionChecker } from '@mezon/core';
 import { ChannelsEntity, selectChannelById, selectWelcomeChannelByClanId, useAppSelector } from '@mezon/store';
 import { Icons } from '@mezon/ui';
-import { EPermission, IChannel, checkIsThread } from '@mezon/utils';
+import { EPermission, IChannel, checkIsThread, generateE2eId } from '@mezon/utils';
 import { ChannelType } from 'mezon-js';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -98,7 +98,12 @@ const ChannelSettingItem = (props: ChannelSettingItemProps) => {
 					</p>
 				</div>
 
-				<ChannelSettingItemButton tabName={EChannelSettingTab.OVERVIEW} handleOnClick={handleButtonClick} selectedButton={selectedButton} getTabTranslation={getTabTranslation} />
+				<ChannelSettingItemButton
+					tabName={EChannelSettingTab.OVERVIEW}
+					handleOnClick={handleButtonClick}
+					selectedButton={selectedButton}
+					getTabTranslation={getTabTranslation}
+				/>
 				{!isThread && (
 					<>
 						<ChannelSettingItemButton
@@ -186,6 +191,7 @@ const ChannelSettingItemButton = ({
 		<button
 			className={`text-theme-primary text-[16px] font-medium rounded-[5px] text-left ml-[-8px] p-2 mt-2 bg-item-theme-hover ${selectedButton === tabName ? 'bg-item-theme text-theme-primary-active' : ''}`}
 			onClick={handleOnClickTabChannelSetting}
+			data-e2e={generateE2eId('channel_setting_page.side_bar.item')}
 		>
 			{getTabTranslation ? getTabTranslation(tabName) : tabName}
 		</button>

libs/components/src/lib/components/ClanSettings/ClanSettingOverview/ClanBannerBackground/index.tsx

@@ -1,7 +1,7 @@
 import { selectCurrentChannelId, selectCurrentClanId } from '@mezon/store';
 import { handleUploadFile, useMezon } from '@mezon/transport';
 import { Icons } from '@mezon/ui';
-import { MAX_FILE_SIZE_10MB, fileTypeImage } from '@mezon/utils';
+import { MAX_FILE_SIZE_10MB, fileTypeImage, generateE2eId } from '@mezon/utils';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -95,7 +95,14 @@ const ClanBannerBackground = ({ onUpload, urlImage }: ClanBannerBackgroundProps)
 						>
 							{!urlImage && <p className="text-xl font-semibold text-center pt-[25%]">{t('clanBanner.chooseImage')}</p>}
 						</div>
-						<input ref={fileInputRef} id="upload_banner_background" onChange={(e) => handleFile(e)} type="file" className="hidden" />
+						<input
+							ref={fileInputRef}
+							id="upload_banner_background"
+							onChange={(e) => handleFile(e)}
+							type="file"
+							className="hidden"
+							data-e2e={generateE2eId('clan_page.settings.upload.clan_banner_input')}
+						/>
 					</label>
 					<button onClick={handleCloseFile} className="absolute top-4 right-4 w-7 h-7 rounded-full  flex items-center justify-center">
 						{urlImage ? <Icons.Close /> : <Icons.ImageUploadIcon />}

libs/components/src/lib/components/ClanSettings/ClanSettingOverview/ClanLogoName/index.tsx

@@ -112,7 +112,14 @@ const ClanLogoName = ({ onUpload, onGetClanName }: ClanLogoNameProps) => {
 										</span>
 									)}
 								</div>
-								<input ref={fileInputRef} id="upload_logo" onChange={(e) => handleFile(e)} type="file" className="hidden" />
+								<input
+									ref={fileInputRef}
+									id="upload_logo"
+									onChange={(e) => handleFile(e)}
+									type="file"
+									className="hidden"
+									data-e2e={generateE2eId('clan_page.settings.upload.clan_logo_input')}
+								/>
 							</label>
 							<div className="absolute right-[-10px] top-0 p-[5px] text-theme-primary rounded-full z-50 shadow-xl border-theme-primary">
 								<Icons.SelectFileIcon />

libs/components/src/lib/components/ClanSettings/Integrations/ClanWebhooks/ClanWebhookItemModal/index.tsx

@@ -1,7 +1,7 @@
 import { selectCurrentClanId, selectMemberClanByUserId, settingClanStickerActions, updateClanWebhookById, useAppDispatch } from '@mezon/store';
 import { handleUploadFile, useMezon } from '@mezon/transport';
 import { Icons } from '@mezon/ui';
-import { MAX_FILE_SIZE_8MB, fileTypeImage } from '@mezon/utils';
+import { MAX_FILE_SIZE_8MB, fileTypeImage, generateE2eId } from '@mezon/utils';
 import type { ApiClanWebhook, ApiMessageAttachment, MezonUpdateClanWebhookByIdBody } from 'mezon-js/api.gen';
 import type { ChangeEvent } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -46,6 +46,7 @@ const ClanWebhookItemModal = ({ webhookItem }: IClanWebhookItemModalProps) => {
 					<div
 						onClick={() => setIsExpand(!isExpand)}
 						className={`cursor-pointer transition duration-100 ease-in-out ${isExpand ? '' : '-rotate-90'}`}
+						data-e2e={generateE2eId('clan_page.settings.integrations.navigate_webhook_button')}
 					>
 						<Icons.ArrowDown defaultSize="h-[30px] w-[30px] dark:text-[#b5bac1] text-black" />
 					</div>
@@ -200,7 +201,7 @@ const ExpendedClanWebhookModal = ({ webhookItem }: IExpendedClanWebhookModal) =>
 			<div ref={modalRef} tabIndex={-1} className="pt-[20px] mt-[12px] border-t dark:border-[#3b3d44]">
 				<div className="flex gap-2">
 					<div className="w-3/12 dark:text-[#b5bac1] text-textLightTheme">
-						<input onChange={handleChooseFile} ref={avatarRef} type="file" hidden />
+						<input onChange={handleChooseFile} ref={avatarRef} type="file" hidden data-e2e={generateE2eId('clan_page.settings.upload.clan_webhook_avatar_input')}  />
 						<div className="relative w-fit">
 							<div
 								onClick={() => avatarRef.current?.click()}

libs/components/src/lib/components/ClanSettings/Integrations/ClanWebhooks/index.tsx

@@ -1,5 +1,6 @@
 import { generateClanWebhook, selectCurrentClanId, useAppDispatch } from '@mezon/store';
 import { Image } from '@mezon/ui';
+import { generateE2eId } from '@mezon/utils';
 import { ApiClanWebhook, ApiGenerateClanWebhookRequest } from 'mezon-js/api.gen';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -54,6 +55,7 @@ const ClanWebhooks = ({ allClanWebhooks }: IClanWebhooksProps) => {
 					<div
 						onClick={handleAddWebhook}
 						className="py-2 px-4 btn-primary btn-primary-hover rounded-lg mb-[24px] w-fit text-[14px] font-semibold cursor-pointer "
+						data-e2e={generateE2eId('clan_page.settings.integrations.new_clan_webhook_button')}
 					>
 						{t('newClanWebhook')}
 					</div>
@@ -65,7 +67,8 @@ const ClanWebhooks = ({ allClanWebhooks }: IClanWebhooksProps) => {
 					<div className="font-medium ">{t('noWebhooks')}</div>
 					<div
 						onClick={handleAddWebhook}
-							className="py-2 px-4 btn-primary btn-primary-hover rounded-lg mb-[24px] w-fit text-[14px] font-semibold cursor-pointer "
+						className="py-2 px-4 btn-primary btn-primary-hover rounded-lg mb-[24px] w-fit text-[14px] font-semibold cursor-pointer "
+						data-e2e={generateE2eId('clan_page.settings.integrations.new_clan_webhook_button')}
 					>
 						{t('newClanWebhook')}
 					</div>

libs/components/src/lib/components/ClanSettings/Integrations/MainClanIntegration/index.tsx

@@ -1,4 +1,5 @@
 import { Icons } from '@mezon/ui';
+import { generateE2eId } from '@mezon/utils';
 import { ApiClanWebhook } from 'mezon-js/api.gen';
 import { useTranslation } from 'react-i18next';
 
@@ -22,21 +23,20 @@ const MainClanIntegrations = ({ setIsOpenClanWebhooks, allClanWebhooks }: IClanI
 				<Icons.WebhooksIcon />
 				<div>
 					<div className="pb-[3px] font-semibold break-all text-theme-primary">{t('clanWebhooks')}</div>
-					<div className="text-[12px] text-theme-primary">
-						{t('webhook', { count: allClanWebhooks?.length || 0 })}
-					</div>
+					<div className="text-[12px] text-theme-primary">{t('webhook', { count: allClanWebhooks?.length || 0 })}</div>
 				</div>
 			</div>
 			{allClanWebhooks && allClanWebhooks?.length === 0 ? (
 				<div
 					onClick={setIsOpenClanWebhooks}
 					className="bg-[#5865f2] hover:bg-[#4752c4] text-white rounded-md py-2 px-3 cursor-pointer font-semibold"
+					data-e2e={generateE2eId('clan_page.settings.integrations.create_clan_webhook_button')}
 				>
 					{t('createClanWebhook')}
 				</div>
 			) : (
 				<div className="items-center cursor-pointer text-[14px] flex gap-[4px]">
-						<div className="text-theme-primary">{t('viewClanWebhook')}</div>
+					<div className="text-theme-primary">{t('viewClanWebhook')}</div>
 					<Icons.ArrowDown defaultSize="h-[15px] w-[15px] -rotate-90" />
 				</div>
 			)}

libs/components/src/lib/components/ClanSettings/Integrations/MainIntegrations/index.tsx

@@ -1,4 +1,5 @@
 import { Icons } from '@mezon/ui';
+import { generateE2eId } from '@mezon/utils';
 import type { ApiWebhook } from 'mezon-js/api.gen';
 import { useTranslation } from 'react-i18next';
 
@@ -37,6 +38,7 @@ const MainIntegrations = ({ setIsOpenWebhooks, allWebhooks }: IIntegrationProps)
 					<div
 						onClick={setIsOpenWebhooks}
 						className="bg-[#5865f2] hover:bg-[#4752c4] text-white rounded-md py-2 px-3 cursor-pointer font-semibold"
+						data-e2e={generateE2eId('channel_setting_page.webhook.button.create_webhook')}
 					>
 						{t('createWebhook')}
 					</div>

libs/components/src/lib/components/ClanSettings/Integrations/Webhooks/WebhookItemModal/index.tsx

@@ -13,7 +13,7 @@ import {
 import { handleUploadFile, useMezon } from '@mezon/transport';
 import { Icons, Menu } from '@mezon/ui';
 import type { IChannel } from '@mezon/utils';
-import { ChannelIsNotThread, MAX_FILE_SIZE_8MB, fileTypeImage } from '@mezon/utils';
+import { ChannelIsNotThread, MAX_FILE_SIZE_8MB, fileTypeImage, generateE2eId } from '@mezon/utils';
 import type { ApiMessageAttachment, ApiWebhook, MezonUpdateWebhookByIdBody } from 'mezon-js/api.gen';
 import type { ChangeEvent, ReactElement } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -59,6 +59,7 @@ const WebhookItemModal = ({ webhookItem, currentChannel, isClanSetting }: IWebho
 					<div
 						onClick={() => setIsExpand(!isExpand)}
 						className={`cursor-pointer transition duration-100 ease-in-out ${isExpand ? '' : '-rotate-90'}`}
+						data-e2e={generateE2eId('channel_setting_page.webhook.button.view_webhook')}
 					>
 						<Icons.ArrowDown defaultSize="h-[30px] w-[30px] dark:text-[#b5bac1] text-black" />
 					</div>
@@ -204,7 +205,7 @@ const ExpendedWebhookModal = ({ webhookItem, currentChannel, isClanSetting }: IE
 			<div ref={modalRef} tabIndex={-1} className="pt-[20px] mt-[12px] border-t dark:border-[#3b3d44]">
 				<div className="flex gap-2">
 					<div className="w-3/12 dark:text-[#b5bac1] text-textLightTheme">
-						<input onChange={handleChooseFile} ref={avatarRef} type="file" hidden />
+						<input onChange={handleChooseFile} ref={avatarRef} type="file" hidden data-e2e={generateE2eId('channel_setting_page.webhook.input.avatar_channel_webhook')} />
 						<div className="relative w-fit">
 							<div
 								onClick={() => avatarRef.current?.click()}

libs/components/src/lib/components/ClanSettings/Integrations/Webhooks/index.tsx

@@ -1,6 +1,6 @@
 import { generateWebhook, selectCurrentClanId, useAppDispatch } from '@mezon/store';
 import { Image } from '@mezon/ui';
-import { IChannel } from '@mezon/utils';
+import { generateE2eId, IChannel } from '@mezon/utils';
 import { ApiWebhook, ApiWebhookCreateRequest } from 'mezon-js/api.gen';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
@@ -57,6 +57,7 @@ const Webhooks = ({ allWebhooks, currentChannel, isClanSetting }: IWebhooksProps
 					<div
 						onClick={handleAddWebhook}
 						className="py-2 px-4 btn-primary btn-primary-hover  rounded-lg mb-[24px] w-fit text-[14px] font-semibold cursor-pointer "
+						data-e2e={generateE2eId('channel_setting_page.webhook.button.new_webhook')}
 					>
 						{t('newWebhook')}
 					</div>
@@ -71,7 +72,8 @@ const Webhooks = ({ allWebhooks, currentChannel, isClanSetting }: IWebhooksProps
 					<div className="font-medium ">{t('noWebhooks')}</div>
 					<div
 						onClick={handleAddWebhook}
-							className="py-2 px-4 btn-primary btn-primary-hover rounded-lg mb-[24px] w-fit text-[14px] font-semibold cursor-pointer"
+						className="py-2 px-4 btn-primary btn-primary-hover rounded-lg mb-[24px] w-fit text-[14px] font-semibold cursor-pointer"
+						data-e2e={generateE2eId('channel_setting_page.webhook.button.new_webhook')}
 					>
 						{t('newWebhook')}
 					</div>

libs/components/src/lib/components/ClanSettings/SettingEmoji/index.tsx

@@ -1,4 +1,5 @@
 import { selectCurrentClanId, selectEmojiByClanId, settingClanStickerActions, useAppDispatch, useAppSelector } from '@mezon/store';
+import { generateE2eId } from '@mezon/utils';
 import type { ClanEmoji } from 'mezon-js';
 import type { RefObject } from 'react';
 import { useCallback, useState } from 'react';
@@ -54,6 +55,7 @@ const SettingEmoji = ({ parentRef }: { parentRef: RefObject<HTMLDivElement> }) =
 				<div
 					onClick={handleCreateEmoji}
 					className="h-[38px] font-semibold rounded-lg btn-primary btn-primary-hover w-28 relative flex flex-row items-center justify-center cursor-pointer"
+					data-e2e={generateE2eId('clan_page.settings.emoji.upload')}
 				>
 					{t('emoji.uploadEmoji')}
 				</div>

libs/components/src/lib/components/ClanSettings/SettingItem/index.tsx

@@ -1,6 +1,7 @@
 import { selectCloseMenu, selectCurrentClan } from '@mezon/store';
+import { generateE2eId } from '@mezon/utils';
 import { useSelector } from 'react-redux';
-import { ItemObjProps } from '../ItemObj';
+import type { ItemObjProps } from '../ItemObj';
 
 type SettingItemProps = {
 	name: string;
@@ -23,6 +24,7 @@ const SettingItem = ({ name, active, onClick, handleMenu, setting }: SettingItem
 					handleMenu(false);
 				}
 			}}
+			data-e2e={generateE2eId('clan_page.settings.sidebar.item')}
 		>
 			{setting?.id === 'on-boarding' && <div className="absolute top-[4px] right-[8px] ">{currentClan?.is_onboarding ? 'ON' : 'OFF'}</div>}
 			{name}

libs/components/src/lib/components/ClanSettings/SettingOnBoarding/Mission/ClanGuideSetting.tsx

@@ -8,7 +8,7 @@ import {
 	useAppSelector
 } from '@mezon/store';
 import { Icons } from '@mezon/ui';
-import { titleMission } from '@mezon/utils';
+import { generateE2eId, titleMission } from '@mezon/utils';
 import { ApiOnboardingItem } from 'mezon-js/api.gen';
 import { ReactNode, useEffect } from 'react';
 import { useModal } from 'react-modal-hook';
@@ -141,6 +141,7 @@ function ClanGuideSetting({ setOpenModalSaveChanges }: ClanGuideSettingProps = {
 					<button
 						className="flex items-center justify-center p-4 text-primary text-base gap-1 border-dashed border-2 border-gray-400 dark:border-channelTextLabel rounded-md hover:bg-gray-100 dark:hover:bg-bgSecondaryHover transition-colors"
 						onClick={openModalAddRules}
+						data-e2e={generateE2eId('clan_page.settings.onboarding.button.add_resources')}
 					>
 						<Icons.AddIcon className="w-4 h-4" /> Add a resource
 					</button>

libs/components/src/lib/components/ClanSettings/SettingOnBoarding/Mission/ModalAddRule.tsx

@@ -1,6 +1,6 @@
 import { editOnboarding, EGuideType, onboardingActions, useAppDispatch } from '@mezon/store';
 import { handleUploadEmoticon, useMezon } from '@mezon/transport';
-import { fileTypeImage, MAX_FILE_SIZE_10MB } from '@mezon/utils';
+import { fileTypeImage, generateE2eId, MAX_FILE_SIZE_10MB } from '@mezon/utils';
 import { Snowflake } from '@theinternetfolks/snowflake';
 import type { ApiOnboardingItem } from 'mezon-js/api.gen';
 import type { ChangeEvent } from 'react';
@@ -192,6 +192,7 @@ const ModalAddRules = ({ onClose, ruleEdit, tempId }: { onClose: () => void; rul
 								tabIndex={0}
 								accept=".jpg,.jpeg,.png,.gif"
 								onChange={handleAddImage}
+								data-e2e={generateE2eId('clan_page.settings.upload.onboarding_resource_input')}
 							/>
 						</button>
 						<div className="h-12 aspect-square rounded-md flex overflow-hidden bg-white dark:bg-bgSecondaryHover border border-gray-200 dark:border-transparent">

libs/components/src/lib/components/ClanSettings/SettingOnBoarding/index.tsx

@@ -13,6 +13,7 @@ import ModalSaveChanges from '../ClanSettingOverview/ModalSaveChanges';
 import GuideItemLayout from './GuideItemLayout';
 import ClanGuideSetting from './Mission/ClanGuideSetting';
 import Questions from './Questions/Questions';
+import { generateE2eId } from '@mezon/utils';
 
 export enum EOnboardingStep {
 	QUESTION,
@@ -350,6 +351,7 @@ const MainIndex = ({ handleGoToPage, onCloseSetting, showOnboardingHighlight }:
 							<div
 								className="w-[60px] h-[32px] flex justify-center items-center rounded-lg border-theme-primary bg-secondary-button-hover  cursor-pointer"
 								onClick={() => handleGoToPage(EOnboardingStep.MISSION)}
+								data-e2e={generateE2eId('clan_page.settings.onboarding.button.clan_guide')}
 							>
 								{t('buttons.edit')}
 							</div>