diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index c737341e066f..6d05c4c56124 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -1126,6 +1126,10 @@ const ONYXKEYS = { ADD_AGENT_FORM_DRAFT: 'addAgentFormDraft', CREATE_DOMAIN_GROUP_FORM: 'createDomainGroupForm', CREATE_DOMAIN_GROUP_FORM_DRAFT: 'createDomainGroupFormDraft', + EDIT_AGENT_NAME_FORM: 'editAgentNameForm', + EDIT_AGENT_NAME_FORM_DRAFT: 'editAgentNameFormDraft', + EDIT_AGENT_PROMPT_FORM: 'editAgentPromptForm', + EDIT_AGENT_PROMPT_FORM_DRAFT: 'editAgentPromptFormDraft', }, DERIVED: { REPORT_ATTRIBUTES: 'reportAttributes', @@ -1273,6 +1277,8 @@ type OnyxFormValuesMapping = { [ONYXKEYS.FORMS.EDIT_DOMAIN_GROUP_NAME_FORM]: FormTypes.DomainGroupEditNameForm; [ONYXKEYS.FORMS.ADD_AGENT_FORM]: FormTypes.AddAgentForm; [ONYXKEYS.FORMS.CREATE_DOMAIN_GROUP_FORM]: FormTypes.DomainGroupCreateForm; + [ONYXKEYS.FORMS.EDIT_AGENT_NAME_FORM]: FormTypes.EditAgentNameForm; + [ONYXKEYS.FORMS.EDIT_AGENT_PROMPT_FORM]: FormTypes.EditAgentPromptForm; }; type OnyxFormDraftValuesMapping = { diff --git a/src/ROUTES.ts b/src/ROUTES.ts index b2a8bb07e5f8..9165d25891b8 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -956,6 +956,18 @@ const ROUTES = { SETTINGS_WALLET_TRAVEL_CVV_VERIFY_ACCOUNT: `settings/wallet/travel-cvv/${VERIFY_ACCOUNT}`, SETTINGS_AGENTS: 'settings/agents', SETTINGS_AGENTS_ADD: 'settings/agents/new', + SETTINGS_AGENTS_EDIT: { + route: 'settings/agents/:accountID/edit', + getRoute: (accountID: number) => `settings/agents/${accountID}/edit` as const, + }, + SETTINGS_AGENTS_EDIT_NAME: { + route: 'settings/agents/:accountID/edit/name', + getRoute: (accountID: number) => `settings/agents/${accountID}/edit/name` as const, + }, + SETTINGS_AGENTS_EDIT_PROMPT: { + route: 'settings/agents/:accountID/edit/prompt', + getRoute: (accountID: number) => `settings/agents/${accountID}/edit/prompt` as const, + }, SETTINGS_RULES: 'settings/rules', SETTINGS_RULES_ADD: { route: 'settings/rules/new/:field?/:index?', diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 97732e1b2b16..493f25d6e683 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -177,6 +177,9 @@ const SCREENS = { AGENTS: { ROOT: 'Settings_Agents', ADD: 'Settings_Agents_Add', + EDIT: 'Settings_Agents_Edit', + EDIT_NAME: 'Settings_Agents_Edit_Name', + EDIT_PROMPT: 'Settings_Agents_Edit_Prompt', }, RULES: { diff --git a/src/components/FocusTrap/WIDE_LAYOUT_INACTIVE_SCREENS.ts b/src/components/FocusTrap/WIDE_LAYOUT_INACTIVE_SCREENS.ts index b6caf4698e34..b8c9b5051e32 100644 --- a/src/components/FocusTrap/WIDE_LAYOUT_INACTIVE_SCREENS.ts +++ b/src/components/FocusTrap/WIDE_LAYOUT_INACTIVE_SCREENS.ts @@ -12,6 +12,7 @@ const WIDE_LAYOUT_INACTIVE_SCREENS: string[] = [ SCREENS.SETTINGS.PREFERENCES.ROOT, SCREENS.SETTINGS.SECURITY, SCREENS.SETTINGS.WALLET.ROOT, + SCREENS.SETTINGS.AGENTS.ROOT, SCREENS.SETTINGS.RULES.ROOT, SCREENS.SETTINGS.HELP, SCREENS.SETTINGS.ABOUT, diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx index 2e9beae0f872..48d0d6abbaba 100644 --- a/src/components/MenuItem.tsx +++ b/src/components/MenuItem.tsx @@ -1122,7 +1122,7 @@ function MenuItem({ )} {!!brickRoadIndicator && ( - + `Agent ${displayName}`, defaultPrompt: 'Odrzucaj wydatki związane z hazardem, filmami lub innymi oczywistymi celami niezwiązanymi z działalnością biznesową.\n\nPrzypominaj użytkownikowi, aby zawsze dołączał zdjęcie paragonu, na którym wysokość napiwku jest wyraźnie widoczna.\n\nZatwierdź raport, jeśli jest bardzo podobny do wcześniejszych raportów tego samego użytkownika.\n\nOdrzucaj raporty zawierające więcej niż 500 USD wydatków na podróże.', }, + editAgentPage: { + title: 'Edytuj agenta', + agentName: 'Nazwa agenta', + instructions: 'Napisz niestandardowe instrukcje', + deleteAgent: 'Usuń agenta', + deleteAgentTitle: 'Usunąć agenta?', + deleteAgentMessage: 'Czy na pewno chcesz usunąć tego agenta? Tej czynności nie można cofnąć.', + }, + editAgentNamePage: {title: 'Nazwa agenta'}, + editAgentPromptPage: {title: 'Napisz niestandardowe instrukcje', error: {emptyPrompt: 'Wprowadź instrukcje dla swojego agenta.'}}, expenseRulesPage: { title: 'Reguły wydatków', findRule: 'Znajdź regułę', diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts index fda802d5660a..ac5459e24bfe 100644 --- a/src/languages/pt-BR.ts +++ b/src/languages/pt-BR.ts @@ -2729,6 +2729,9 @@ ${amount} para ${merchant} - ${date}`, emptyAgents: {title: 'Nenhum agente criado', subtitle: 'Pare de fazer tudo manualmente. Instrua um agente e economize muito tempo.'}, error: { genericAdd: 'Houve um problema ao adicionar este agente', + genericUpdate: 'Houve um problema ao atualizar este agente', + updateName: 'Ocorreu um problema ao atualizar o nome deste agente', + updatePrompt: 'Ocorreu um problema ao atualizar as instruções deste agente', }, }, addAgentPage: { @@ -2741,6 +2744,16 @@ ${amount} para ${merchant} - ${date}`, defaultPrompt: 'Rejeite despesas relacionadas a jogos de azar, cinema ou outros motivos claramente não relacionados ao negócio.\n\nLembre o usuário de sempre incluir uma imagem do recibo em que a gorjeta fique clara.\n\nAprove o relatório se ele for muito semelhante a relatórios anteriores do mesmo usuário.\n\nRejeite relatórios com mais de US$ 500 em despesas de viagem.', }, + editAgentPage: { + title: 'Editar agente', + agentName: 'Nome do agente', + instructions: 'Escrever instruções personalizadas', + deleteAgent: 'Excluir agente', + deleteAgentTitle: 'Excluir agente?', + deleteAgentMessage: 'Tem certeza de que deseja excluir este agente? Esta ação não pode ser desfeita.', + }, + editAgentNamePage: {title: 'Nome do agente'}, + editAgentPromptPage: {title: 'Escrever instruções personalizadas', error: {emptyPrompt: 'Insira as instruções para o seu agente.'}}, expenseRulesPage: { title: 'Regras de despesas', findRule: 'Encontrar regra', diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts index 73a14e36394d..97afcf56ed94 100644 --- a/src/languages/zh-hans.ts +++ b/src/languages/zh-hans.ts @@ -2658,9 +2658,7 @@ ${amount}，商户：${merchant} - 日期：${date}`, subtitle: '通过自定义智能体自动化处理任务。', newAgent: '新代理人', emptyAgents: {title: '尚未创建代理', subtitle: '别再手动处理这些事情了。交给智能代理去执行，为自己节省大量时间。'}, - error: { - genericAdd: '添加此智能体时出现了问题', - }, + error: {genericAdd: '添加此智能体时出现了问题', genericUpdate: '更新此代理时出现问题', updateName: '更新此代理名称时出现问题', updatePrompt: '更新此代理的说明时出现问题'}, }, addAgentPage: { title: '新代理', @@ -2672,6 +2670,16 @@ ${amount}，商户：${merchant} - 日期：${date}`, defaultPrompt: '拒绝与赌博、电影或其他明显非商务原因相关的报销。\n\n提醒用户务必附上一张能清楚显示小费金额的收据图片。\n\n如果报销报告与同一用户之前的报告非常相似，则批准该报告。\n\n拒绝包含超过 500 美元差旅费用的报销报告。', }, + editAgentPage: { + title: '编辑代理', + agentName: '客服名称', + instructions: '编写自定义说明', + deleteAgent: '删除代理', + deleteAgentTitle: '删除代理人？', + deleteAgentMessage: '确定要删除此代理吗？此操作无法撤销。', + }, + editAgentNamePage: {title: '客服名称'}, + editAgentPromptPage: {title: '编写自定义说明', error: {emptyPrompt: '请输入给您代理的指示。'}}, expenseRulesPage: { title: '报销规则', findRule: '查找规则', diff --git a/src/libs/API/parameters/DeleteAgentParams.ts b/src/libs/API/parameters/DeleteAgentParams.ts new file mode 100644 index 000000000000..b8b9dbb404e9 --- /dev/null +++ b/src/libs/API/parameters/DeleteAgentParams.ts @@ -0,0 +1,5 @@ +type DeleteAgentParams = { + agentAccountID: number; +}; + +export default DeleteAgentParams; diff --git a/src/libs/API/parameters/UpdateAgentNameParams.ts b/src/libs/API/parameters/UpdateAgentNameParams.ts new file mode 100644 index 000000000000..e34ced20c68c --- /dev/null +++ b/src/libs/API/parameters/UpdateAgentNameParams.ts @@ -0,0 +1,6 @@ +type UpdateAgentNameParams = { + agentAccountID: number; + firstName: string; +}; + +export default UpdateAgentNameParams; diff --git a/src/libs/API/parameters/UpdateAgentPromptParams.ts b/src/libs/API/parameters/UpdateAgentPromptParams.ts new file mode 100644 index 000000000000..9b98a63ab4ad --- /dev/null +++ b/src/libs/API/parameters/UpdateAgentPromptParams.ts @@ -0,0 +1,6 @@ +type UpdateAgentPromptParams = { + agentAccountID: number; + prompt: string; +}; + +export default UpdateAgentPromptParams; diff --git a/src/libs/API/parameters/index.ts b/src/libs/API/parameters/index.ts index 93d23ce137db..90fecec481cd 100644 --- a/src/libs/API/parameters/index.ts +++ b/src/libs/API/parameters/index.ts @@ -528,3 +528,6 @@ export type {default as SetDefaultDomainSecurityGroupParams} from './SetDefaultD export type {default as DeleteDomainSecurityGroupParams} from './DeleteDomainSecurityGroupParams'; export type {default as CreateAgentParams} from './CreateAgentParams'; export type {default as CreateDomainSecurityGroupParams} from './CreateDomainSecurityGroupParams'; +export type {default as UpdateAgentNameParams} from './UpdateAgentNameParams'; +export type {default as UpdateAgentPromptParams} from './UpdateAgentPromptParams'; +export type {default as DeleteAgentParams} from './DeleteAgentParams'; diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts index 077adbbd2d32..937dedc7d18b 100644 --- a/src/libs/API/types.ts +++ b/src/libs/API/types.ts @@ -593,6 +593,9 @@ const WRITE_COMMANDS = { DELETE_DOMAIN_SECURITY_GROUP: 'DeleteDomainSecurityGroup', CREATE_AGENT: 'CreateAgent', CREATE_DOMAIN_SECURITY_GROUP: 'CreateDomainSecurityGroup', + UPDATE_AGENT_NAME: 'UpdateAgentName', + UPDATE_AGENT_PROMPT: 'UpdateAgentPrompt', + DELETE_AGENT: 'DeleteAgent', } as const; type WriteCommand = ValueOf; @@ -1203,6 +1206,9 @@ type WriteCommandParameters = { [WRITE_COMMANDS.SET_DEFAULT_DOMAIN_SECURITY_GROUP]: Parameters.SetDefaultDomainSecurityGroupParams; [WRITE_COMMANDS.DELETE_DOMAIN_SECURITY_GROUP]: Parameters.DeleteDomainSecurityGroupParams; [WRITE_COMMANDS.CREATE_AGENT]: Parameters.CreateAgentParams; + [WRITE_COMMANDS.UPDATE_AGENT_NAME]: Parameters.UpdateAgentNameParams; + [WRITE_COMMANDS.UPDATE_AGENT_PROMPT]: Parameters.UpdateAgentPromptParams; + [WRITE_COMMANDS.DELETE_AGENT]: Parameters.DeleteAgentParams; }; const READ_COMMANDS = { diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index 6d1ecd52e96f..8d01f971fb07 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -477,6 +477,9 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../../pages/settings/Wallet/BankAccountPurposePage').default, [SCREENS.SETTINGS.RULES.ROOT]: () => require('../../../../pages/settings/Rules/ExpenseRulesPage').default, [SCREENS.SETTINGS.AGENTS.ADD]: () => require('../../../../pages/settings/Agents/AddAgentPage').default, + [SCREENS.SETTINGS.AGENTS.EDIT]: () => require('../../../../pages/settings/Agents/EditAgentPage').default, + [SCREENS.SETTINGS.AGENTS.EDIT_NAME]: () => require('../../../../pages/settings/Agents/Fields/EditNamePage').default, + [SCREENS.SETTINGS.AGENTS.EDIT_PROMPT]: () => require('../../../../pages/settings/Agents/Fields/EditPromptPage').default, [SCREENS.SETTINGS.RULES.ADD]: () => require('../../../../pages/settings/Rules/AddRulePage').default, [SCREENS.SETTINGS.RULES.ADD_MERCHANT]: () => require('../../../../pages/settings/Rules/Fields/AddMerchantPage').default, [SCREENS.SETTINGS.RULES.ADD_RENAME_MERCHANT]: () => require('../../../../pages/settings/Rules/Fields/AddRenameMerchantPage').default, diff --git a/src/libs/Navigation/linkingConfig/RELATIONS/SETTINGS_TO_RHP.ts b/src/libs/Navigation/linkingConfig/RELATIONS/SETTINGS_TO_RHP.ts index ed14a0fa5eaf..661b6cc0fb43 100755 --- a/src/libs/Navigation/linkingConfig/RELATIONS/SETTINGS_TO_RHP.ts +++ b/src/libs/Navigation/linkingConfig/RELATIONS/SETTINGS_TO_RHP.ts @@ -70,7 +70,7 @@ const SETTINGS_TO_RHP: Partial['config'] = { path: ROUTES.SETTINGS_AGENTS_ADD, exact: true, }, + [SCREENS.SETTINGS.AGENTS.EDIT]: { + path: ROUTES.SETTINGS_AGENTS_EDIT.route, + parse: { + accountID: Number, + }, + }, + [SCREENS.SETTINGS.AGENTS.EDIT_NAME]: { + path: ROUTES.SETTINGS_AGENTS_EDIT_NAME.route, + parse: { + accountID: Number, + }, + }, + [SCREENS.SETTINGS.AGENTS.EDIT_PROMPT]: { + path: ROUTES.SETTINGS_AGENTS_EDIT_PROMPT.route, + parse: { + accountID: Number, + }, + }, [SCREENS.SETTINGS.RULES.ADD]: { path: ROUTES.SETTINGS_RULES_ADD.route, exact: true, diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index b2d1078ec363..d3188398ca1d 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -244,6 +244,15 @@ type SettingsNavigatorParamList = { [SCREENS.SETTINGS.BANK_ACCOUNT_PURPOSE]: undefined; [SCREENS.SETTINGS.ADD_BANK_ACCOUNT_SELECT_COUNTRY_VERIFY_ACCOUNT]: undefined; [SCREENS.SETTINGS.AGENTS.ADD]: undefined; + [SCREENS.SETTINGS.AGENTS.EDIT]: { + accountID: number; + }; + [SCREENS.SETTINGS.AGENTS.EDIT_NAME]: { + accountID: number; + }; + [SCREENS.SETTINGS.AGENTS.EDIT_PROMPT]: { + accountID: number; + }; [SCREENS.SETTINGS.RULES.ADD]: undefined; [SCREENS.SETTINGS.RULES.ADD_MERCHANT]: undefined; [SCREENS.SETTINGS.RULES.ADD_RENAME_MERCHANT]: undefined; diff --git a/src/libs/actions/Agent.ts b/src/libs/actions/Agent.ts index 26454b7cc88f..c21686e19fc2 100644 --- a/src/libs/actions/Agent.ts +++ b/src/libs/actions/Agent.ts @@ -2,8 +2,10 @@ import Onyx from 'react-native-onyx'; import {read, write} from '@libs/API'; import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types'; import {getMicroSecondOnyxErrorWithTranslationKey} from '@libs/ErrorUtils'; +import Navigation from '@libs/Navigation/Navigation'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; import type {AnyOnyxUpdate} from '@src/types/onyx/Request'; function openAgentsPage() { @@ -78,4 +80,134 @@ function clearAgentError(optimisticAccountID: number) { Onyx.set(`${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${optimisticAccountID}`, null); } -export {openAgentsPage, createAgent, clearAgentError}; +function clearAgentUpdateError(accountID: number) { + Onyx.merge(`${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${accountID}`, {errors: null, nameErrors: null, promptErrors: null}); +} + +function clearAgentNameUpdateError(accountID: number) { + Onyx.merge(`${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${accountID}`, {nameErrors: null}); +} + +function clearAgentPromptUpdateError(accountID: number) { + Onyx.merge(`${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${accountID}`, {promptErrors: null}); +} + +function clearAgentDeleteError(accountID: number) { + Onyx.merge(`${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${accountID}`, {pendingAction: null, errors: null}); +} + +function updateAgentName(accountID: number, firstName: string, originalFirstName: string) { + const optimisticData: AnyOnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.PERSONAL_DETAILS_LIST, + value: {[accountID]: {displayName: firstName}}, + }, + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${accountID}`, + value: {pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE, errors: null, nameErrors: null}, + }, + ]; + + const successData: AnyOnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${accountID}`, + value: {pendingAction: null, nameErrors: null}, + }, + ]; + + const failureData: AnyOnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.PERSONAL_DETAILS_LIST, + value: {[accountID]: {displayName: originalFirstName}}, + }, + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${accountID}`, + value: {pendingAction: null, nameErrors: getMicroSecondOnyxErrorWithTranslationKey('agentsPage.error.updateName')}, + }, + ]; + + write(WRITE_COMMANDS.UPDATE_AGENT_NAME, {agentAccountID: accountID, firstName}, {optimisticData, successData, failureData}); +} + +function updateAgentPrompt(accountID: number, prompt: string, originalPrompt: string) { + const optimisticData: AnyOnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${accountID}`, + value: {prompt, pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE, errors: null}, + }, + ]; + + const successData: AnyOnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${accountID}`, + value: {pendingAction: null, promptErrors: null}, + }, + ]; + + const failureData: AnyOnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${accountID}`, + value: {prompt: originalPrompt, pendingAction: null, promptErrors: getMicroSecondOnyxErrorWithTranslationKey('agentsPage.error.updatePrompt')}, + }, + ]; + + write(WRITE_COMMANDS.UPDATE_AGENT_PROMPT, {agentAccountID: accountID, prompt}, {optimisticData, successData, failureData}); +} + +function deleteAgent(accountID: number) { + const optimisticData: AnyOnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${accountID}`, + value: {pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}, + }, + ]; + + const successData: AnyOnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.SET, + key: `${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${accountID}`, + value: null, + }, + { + onyxMethod: Onyx.METHOD.MERGE, + key: ONYXKEYS.PERSONAL_DETAILS_LIST, + value: {[accountID]: null}, + }, + ]; + + const failureData: AnyOnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.SHARED_NVP_AGENT_PROMPT}${accountID}`, + value: { + pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE, + errors: getMicroSecondOnyxErrorWithTranslationKey('common.genericErrorMessage'), + }, + }, + ]; + + write(WRITE_COMMANDS.DELETE_AGENT, {agentAccountID: accountID}, {optimisticData, successData, failureData}); + Navigation.navigate(ROUTES.SETTINGS_AGENTS); +} + +export { + openAgentsPage, + createAgent, + clearAgentError, + clearAgentUpdateError, + clearAgentNameUpdateError, + clearAgentPromptUpdateError, + clearAgentDeleteError, + updateAgentName, + updateAgentPrompt, + deleteAgent, +}; diff --git a/src/pages/settings/Agents/AddAgentPage.tsx b/src/pages/settings/Agents/AddAgentPage.tsx index f1058c318157..e3b427fd2485 100644 --- a/src/pages/settings/Agents/AddAgentPage.tsx +++ b/src/pages/settings/Agents/AddAgentPage.tsx @@ -14,6 +14,8 @@ import useIsInLandscapeMode from '@hooks/useIsInLandscapeMode'; import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; +import {isMobile} from '@libs/Browser'; import Navigation from '@libs/Navigation/Navigation'; import {createAgent} from '@userActions/Agent'; import CONST from '@src/CONST'; @@ -24,7 +26,8 @@ import type {Errors} from '@src/types/onyx/OnyxCommon'; function AddAgentPage() { const {translate} = useLocalize(); const styles = useThemeStyles(); - const isInLandscapeMode = useIsInLandscapeMode(); + const {windowWidth, windowHeight} = useWindowDimensions(); + const shouldUseScrollableLayout = useIsInLandscapeMode() || (isMobile() && windowWidth > windowHeight); const {displayName} = useCurrentUserPersonalDetails(); const defaultAgentName = displayName ? translate('addAgentPage.defaultAgentName', displayName) : undefined; const defaultPrompt = translate('addAgentPage.defaultPrompt'); @@ -56,7 +59,7 @@ function AddAgentPage() { testID={AddAgentPage.displayName} includeSafeAreaPaddingBottom offlineIndicatorStyle={styles.mtAuto} - shouldEnableMaxHeight={isInLandscapeMode} + shouldEnableMaxHeight={shouldUseScrollableLayout} > @@ -96,7 +99,7 @@ function AddAgentPage() { spellCheck={false} defaultValue={defaultAgentName} /> - + + + + + {displayName} + + + {login} + + + + ); +} + +export default AgentInfoRow; diff --git a/src/pages/settings/Agents/AgentsListRow.tsx b/src/pages/settings/Agents/AgentsListRow.tsx index ee3b1e332f2a..76031812ea6d 100644 --- a/src/pages/settings/Agents/AgentsListRow.tsx +++ b/src/pages/settings/Agents/AgentsListRow.tsx @@ -1,13 +1,19 @@ import React from 'react'; import {View} from 'react-native'; +import Button from '@components/Button'; +import Icon from '@components/Icon'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; -import ReportActionAvatars from '@components/ReportActionAvatars'; -import Text from '@components/Text'; -import useStyleUtils from '@hooks/useStyleUtils'; +import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; +import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; +import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import variables from '@styles/variables'; +import Navigation from '@libs/Navigation/Navigation'; import CONST from '@src/CONST'; +import ROUTES from '@src/ROUTES'; import type {Errors, PendingAction} from '@src/types/onyx/OnyxCommon'; +import AgentInfoRow from './AgentInfoRow'; type AgentsListRowProps = { /** Account ID of the agent */ @@ -27,11 +33,20 @@ type AgentsListRowProps = { /** Called when the user dismisses the error */ onErrorClose?: () => void; + + /** Whether to show the red error dot indicator */ + brickRoadIndicator?: typeof CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR | null; }; -function AgentsListRow({accountID, displayName, login, pendingAction, errors, onErrorClose}: AgentsListRowProps) { +function AgentsListRow({accountID, displayName, login, pendingAction, errors, onErrorClose, brickRoadIndicator}: AgentsListRowProps) { const styles = useThemeStyles(); - const StyleUtils = useStyleUtils(); + const theme = useTheme(); + const {translate} = useLocalize(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); + const icons = useMemoizedLazyExpensifyIcons(['DotIndicator']); + + const isDeleted = pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE; + const navigateToEdit = () => Navigation.navigate(ROUTES.SETTINGS_AGENTS_EDIT.getRoute(accountID)); return ( - - - - - {displayName} - - - {login} - + {shouldUseNarrowLayout ? ( + + + {!!brickRoadIndicator && ( + + )} + + ) : ( + + + {!!brickRoadIndicator && ( + + )} +