Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update beginningOfChatHistory translation #49919

Merged
merged 12 commits into from
Oct 4, 2024
80 changes: 56 additions & 24 deletions src/components/ReportWelcomeText.tsx
Original file line number Diff line number Diff line change
@@ -1,59 +1,65 @@
import React, {useMemo} from 'react';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2024-10-01 at 16 00 44

Copy:

This is where [submitter] will submit expenses to [workspaceName]. Just use the + button.

Workspace chat renders additional text at the bottom: Use the + button to split, submit, or track an expense.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Archived Workspace Invoice Chat

Staging PR
archived-ws-invoice-chat-staging archived-ws-invoice-chat

This is a Staging vs PR before / after of an archived workspace invoice chat, the way you get an archived workspace invoice chat is by:

  1. Create new WS what is able to send invoices.
  2. FAB > Send Invoice > Select WS and Send.
  3. Settings > Workspaces > Delete WS.
  4. Notice the archived workspace invoice chat welcome text.

Observe the discrepancies between Staging and PR screenshots, missing (archived) and the addition of WS name.

import {View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
import {useOnyx} from 'react-native-onyx';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import Navigation from '@libs/Navigation/Navigation';
import * as OptionsListUtils from '@libs/OptionsListUtils';
import {getPolicy} from '@libs/PolicyUtils';
import * as ReportUtils from '@libs/ReportUtils';
import SidebarUtils from '@libs/SidebarUtils';
import CONST from '@src/CONST';
import type {IOUType} from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type {PersonalDetailsList, Policy, Report} from '@src/types/onyx';
import type {Policy, Report} from '@src/types/onyx';
import {PressableWithoutFeedback} from './Pressable';
import RenderHTML from './RenderHTML';
import Text from './Text';
import UserDetailsTooltip from './UserDetailsTooltip';

type ReportWelcomeTextOnyxProps = {
/** All of the personal details for everyone */
personalDetails: OnyxEntry<PersonalDetailsList>;
};

type ReportWelcomeTextProps = ReportWelcomeTextOnyxProps & {
type ReportWelcomeTextProps = {
/** The report currently being looked at */
report: OnyxEntry<Report>;

/** The policy for the current route */
policy: OnyxEntry<Policy>;
};

function ReportWelcomeText({report, policy, personalDetails}: ReportWelcomeTextProps) {
function ReportWelcomeText({report, policy}: ReportWelcomeTextProps) {
const {translate} = useLocalize();
const styles = useThemeStyles();
const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(report);
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID || -1}`);
const isArchivedRoom = ReportUtils.isArchivedRoom(report, reportNameValuePairs);
const isChatRoom = ReportUtils.isChatRoom(report);
const isSelfDM = ReportUtils.isSelfDM(report);
const isInvoiceRoom = ReportUtils.isInvoiceRoom(report);
const isSystemChat = ReportUtils.isSystemChat(report);
const isDefault = !(isChatRoom || isPolicyExpenseChat || isSelfDM || isInvoiceRoom || isSystemChat);
const participantAccountIDs = ReportUtils.getParticipantsAccountIDsForDisplay(report);
const participantAccountIDs = ReportUtils.getParticipantsAccountIDsForDisplay(report, undefined, undefined, true);
const isMultipleParticipant = participantAccountIDs.length > 1;
const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(OptionsListUtils.getPersonalDetailsForAccountIDs(participantAccountIDs, personalDetails), isMultipleParticipant);
const welcomeMessage = SidebarUtils.getWelcomeMessage(report, policy);
const moneyRequestOptions = ReportUtils.temporary_getMoneyRequestOptions(report, policy, participantAccountIDs);
const additionalText = moneyRequestOptions
.filter(
(item): item is Exclude<IOUType, typeof CONST.IOU.TYPE.REQUEST | typeof CONST.IOU.TYPE.SEND | typeof CONST.IOU.TYPE.CREATE | typeof CONST.IOU.TYPE.INVOICE> =>
item !== CONST.IOU.TYPE.INVOICE,
)
.map((item) => translate(`reportActionsView.iouTypes.${item}`))
const filteredOptions = moneyRequestOptions.filter(
(item): item is Exclude<IOUType, typeof CONST.IOU.TYPE.REQUEST | typeof CONST.IOU.TYPE.SEND | typeof CONST.IOU.TYPE.CREATE | typeof CONST.IOU.TYPE.INVOICE> =>
item !== CONST.IOU.TYPE.INVOICE,
);
const additionalText = filteredOptions
.map((item, index) => `${index === filteredOptions.length - 1 ? `${translate('common.or')} ` : ''}${translate(`reportActionsView.iouTypes.${item}`)}`)
.join(', ');
const canEditPolicyDescription = ReportUtils.canEditPolicyDescription(policy);
const reportName = ReportUtils.getReportName(report);
const shouldShowUsePlusButtonText =
(moneyRequestOptions.includes(CONST.IOU.TYPE.PAY) ||
moneyRequestOptions.includes(CONST.IOU.TYPE.SUBMIT) ||
moneyRequestOptions.includes(CONST.IOU.TYPE.TRACK) ||
moneyRequestOptions.includes(CONST.IOU.TYPE.SPLIT)) &&
!isPolicyExpenseChat;
Comment on lines +57 to +62
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@nkdengineer Is there a reason for adding this !isPolicyExpenseChat condition?


const navigateToReport = () => {
if (!report?.reportID) {
Expand Down Expand Up @@ -112,7 +118,38 @@ function ReportWelcomeText({report, policy, personalDetails}: ReportWelcomeTextP
<Text>{welcomeMessage.phrase3}</Text>
</Text>
))}
{isInvoiceRoom &&
!isArchivedRoom &&
(welcomeMessage?.messageHtml ? (
<PressableWithoutFeedback
onPress={() => {
if (!canEditPolicyDescription) {
return;
}
Navigation.navigate(ROUTES.WORKSPACE_PROFILE_DESCRIPTION.getRoute(policy?.id ?? '-1'));
}}
style={[styles.renderHTML, canEditPolicyDescription ? styles.cursorPointer : styles.cursorText]}
accessibilityLabel={translate('reportDescriptionPage.roomDescription')}
>
<RenderHTML html={welcomeMessage.messageHtml} />
</PressableWithoutFeedback>
) : (
<Text>
<Text>{welcomeMessage.phrase1}</Text>
<Text>
{report?.invoiceReceiver?.type === CONST.REPORT.INVOICE_RECEIVER_TYPE.INDIVIDUAL ? (
<Text style={[styles.textStrong]}>{ReportUtils.getDisplayNameForParticipant(report?.invoiceReceiver?.accountID)}</Text>
) : (
<Text style={[styles.textStrong]}>{getPolicy(report?.invoiceReceiver?.policyID)?.name}</Text>
)}
</Text>
<Text>{` ${translate('common.and')} `}</Text>
<Text style={[styles.textStrong]}>{ReportUtils.getPolicyName(report)}</Text>
<Text>{welcomeMessage.phrase2}</Text>
</Text>
))}
{isChatRoom &&
(!isInvoiceRoom || isArchivedRoom) &&
(welcomeMessage?.messageHtml ? (
<PressableWithoutFeedback
onPress={() => {
Expand Down Expand Up @@ -179,18 +216,13 @@ function ReportWelcomeText({report, policy, personalDetails}: ReportWelcomeTextP
))}
</Text>
)}
{(moneyRequestOptions.includes(CONST.IOU.TYPE.PAY) || moneyRequestOptions.includes(CONST.IOU.TYPE.SUBMIT) || moneyRequestOptions.includes(CONST.IOU.TYPE.TRACK)) && (
<Text>{translate('reportActionsView.usePlusButton', {additionalText})}</Text>
)}
{shouldShowUsePlusButtonText && <Text>{translate('reportActionsView.usePlusButton', {additionalText})}</Text>}
{ReportUtils.isConciergeChatReport(report) && <Text>{translate('reportActionsView.askConcierge')}</Text>}
</View>
</>
);
}

ReportWelcomeText.displayName = 'ReportWelcomeText';

export default withOnyx<ReportWelcomeTextProps, ReportWelcomeTextOnyxProps>({
personalDetails: {
key: ONYXKEYS.PERSONAL_DETAILS_LIST,
},
})(ReportWelcomeText);
export default ReportWelcomeText;
41 changes: 21 additions & 20 deletions src/languages/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import type {
BadgeFreeTrialParams,
BeginningOfChatHistoryAdminRoomPartOneParams,
BeginningOfChatHistoryAnnounceRoomPartOneParams,
BeginningOfChatHistoryAnnounceRoomPartTwo,
BeginningOfChatHistoryDomainRoomPartOneParams,
BillingBannerCardAuthenticationRequiredParams,
BillingBannerCardExpiredParams,
Expand Down Expand Up @@ -265,6 +264,7 @@ const translations = {
phoneNumberPlaceholder: '(xxx) xxx-xxxx',
email: 'Email',
and: 'and',
or: 'or',
details: 'Details',
privacy: 'Privacy',
privacyPolicy: 'Privacy Policy',
Expand Down Expand Up @@ -658,33 +658,34 @@ const translations = {
reportActionsView: {
beginningOfArchivedRoomPartOne: 'You missed the party in ',
beginningOfArchivedRoomPartTwo: ", there's nothing to see here.",
beginningOfChatHistoryDomainRoomPartOne: ({domainRoom}: BeginningOfChatHistoryDomainRoomPartOneParams) => `Collaboration with everyone at ${domainRoom} starts here! 🎉\nUse `,
beginningOfChatHistoryDomainRoomPartTwo: ' to chat with colleagues, share tips, and ask questions.',
beginningOfChatHistoryAdminRoomPartOne: ({workspaceName}: BeginningOfChatHistoryAdminRoomPartOneParams) => `Collaboration among ${workspaceName} admins starts here! 🎉\nUse `,
beginningOfChatHistoryAdminRoomPartTwo: ' to chat about topics such as workspace configurations and more.',
beginningOfChatHistoryAnnounceRoomPartOne: ({workspaceName}: BeginningOfChatHistoryAnnounceRoomPartOneParams) =>
`Collaboration between all ${workspaceName} members starts here! 🎉\nUse `,
beginningOfChatHistoryAnnounceRoomPartTwo: ({workspaceName}: BeginningOfChatHistoryAnnounceRoomPartTwo) => ` to chat about anything ${workspaceName} related.`,
beginningOfChatHistoryUserRoomPartOne: 'Collaboration starts here! 🎉\nUse this space to chat about anything ',
beginningOfChatHistoryDomainRoomPartOne: ({domainRoom}: BeginningOfChatHistoryDomainRoomPartOneParams) => `This chat is with all Expensify members on the ${domainRoom} domain.`,
beginningOfChatHistoryDomainRoomPartTwo: ' Use it to chat with colleagues, share tips, and ask questions.',
beginningOfChatHistoryAdminRoomPartOne: ({workspaceName}: BeginningOfChatHistoryAdminRoomPartOneParams) => `This chat is with ${workspaceName} admins.`,
beginningOfChatHistoryAdminRoomPartTwo: ' Use it to chat about workspace setup and more.',
beginningOfChatHistoryAnnounceRoomPartOne: ({workspaceName}: BeginningOfChatHistoryAnnounceRoomPartOneParams) => `This chat is with everyone in ${workspaceName} workspace.`,
beginningOfChatHistoryAnnounceRoomPartTwo: ` Use it for the most important announcements.`,
beginningOfChatHistoryUserRoomPartOne: 'This chat room is for anything ',
beginningOfChatHistoryUserRoomPartTwo: ' related.',
beginningOfChatHistoryInvoiceRoom: 'Collaboration starts here! 🎉 Use this room to view, discuss, and pay invoices.',
beginningOfChatHistory: 'This is the beginning of your chat with ',
beginningOfChatHistoryPolicyExpenseChatPartOne: 'Collaboration between ',
beginningOfChatHistoryPolicyExpenseChatPartTwo: ' and ',
beginningOfChatHistoryPolicyExpenseChatPartThree: ' starts here! 🎉 This is the place to chat, submit expenses and settle up.',
beginningOfChatHistoryInvoiceRoomPartOne: `This chat is for invoices between `,
beginningOfChatHistoryInvoiceRoomPartTwo: `. Use the + button to send an invoice.`,
beginningOfChatHistory: 'This chat is with ',
beginningOfChatHistoryPolicyExpenseChatPartOne: 'This is where ',
beginningOfChatHistoryPolicyExpenseChatPartTwo: ' will submit expenses to ',
beginningOfChatHistoryPolicyExpenseChatPartThree: ' workspace. Just use the + button.',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@s77rt The reason is we already have Just use the + button. text here

beginningOfChatHistorySelfDM: 'This is your personal space. Use it for notes, tasks, drafts, and reminders.',
beginningOfChatHistorySystemDM: "Welcome! Let's get you set up.",
chatWithAccountManager: 'Chat with your account manager here',
sayHello: 'Say hello!',
yourSpace: 'Your space',
welcomeToRoom: ({roomName}: WelcomeToRoomParams) => `Welcome to ${roomName}!`,
usePlusButton: ({additionalText}: UsePlusButtonParams) => `\nYou can also use the + button to ${additionalText}, or assign a task!`,
usePlusButton: ({additionalText}: UsePlusButtonParams) => `\nUse the + button to ${additionalText} an expense.`,
askConcierge: '\nAsk questions and get 24/7 realtime support.',
iouTypes: {
pay: 'pay expenses',
split: 'split an expense',
submit: 'submit an expense',
track: 'track an expense',
invoice: 'invoice an expense',
pay: 'pay',
split: 'split',
submit: 'submit',
track: 'track',
invoice: 'invoice',
},
},
adminOnlyCanPost: 'Only admins can send messages in this room.',
Expand Down
44 changes: 23 additions & 21 deletions src/languages/es.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import type {
BadgeFreeTrialParams,
BeginningOfChatHistoryAdminRoomPartOneParams,
BeginningOfChatHistoryAnnounceRoomPartOneParams,
BeginningOfChatHistoryAnnounceRoomPartTwo,
BeginningOfChatHistoryDomainRoomPartOneParams,
BillingBannerCardAuthenticationRequiredParams,
BillingBannerCardExpiredParams,
Expand Down Expand Up @@ -256,6 +255,7 @@ const translations = {
phoneNumberPlaceholder: '(xxx) xxx-xxxx',
email: 'Email',
and: 'y',
or: 'o',
details: 'Detalles',
privacy: 'Privacidad',
hidden: 'Oculto',
Expand Down Expand Up @@ -650,34 +650,36 @@ const translations = {
reportActionsView: {
beginningOfArchivedRoomPartOne: 'Te perdiste la fiesta en ',
beginningOfArchivedRoomPartTwo: ', no hay nada que ver aquí.',
beginningOfChatHistoryDomainRoomPartOne: ({domainRoom}: BeginningOfChatHistoryDomainRoomPartOneParams) => `¡Colabora aquí con todos los participantes de ${domainRoom}! 🎉\nUtiliza `,
beginningOfChatHistoryDomainRoomPartTwo: ' para chatear con compañeros, compartir consejos o hacer una pregunta.',
beginningOfChatHistoryDomainRoomPartOne: ({domainRoom}: BeginningOfChatHistoryDomainRoomPartOneParams) =>
`Este chat es con todos los miembros de Expensify en el dominio ${domainRoom}.`,
beginningOfChatHistoryDomainRoomPartTwo: ' Úsalo para chatear con colegas, compartir consejos y hacer preguntas.',
beginningOfChatHistoryAdminRoomPartOne: ({workspaceName}: BeginningOfChatHistoryAdminRoomPartOneParams) =>
`¡Este es el lugar para que los administradores de ${workspaceName} colaboren! 🎉\nUsa `,
beginningOfChatHistoryAdminRoomPartTwo: ' para chatear sobre temas como la configuración del espacio de trabajo y mas.',
beginningOfChatHistoryAnnounceRoomPartOne: ({workspaceName}: BeginningOfChatHistoryAnnounceRoomPartOneParams) =>
`¡Este es el lugar para que todos los miembros de ${workspaceName} colaboren! 🎉\nUsa `,
beginningOfChatHistoryAnnounceRoomPartTwo: ({workspaceName}: BeginningOfChatHistoryAnnounceRoomPartTwo) => ` para chatear sobre cualquier cosa relacionada con ${workspaceName}.`,
beginningOfChatHistoryUserRoomPartOne: '¡Este es el lugar para colaborar! 🎉\nUsa este espacio para chatear sobre cualquier cosa relacionada con ',
beginningOfChatHistoryUserRoomPartTwo: '.',
beginningOfChatHistoryInvoiceRoom: '¡Este es el lugar para colaborar! 🎉 Utilice esta sala para ver, discutir y pagar facturas.',
beginningOfChatHistory: 'Aquí comienzan tus conversaciones con ',
beginningOfChatHistoryPolicyExpenseChatPartOne: '¡La colaboración entre ',
beginningOfChatHistoryPolicyExpenseChatPartTwo: ' y ',
beginningOfChatHistoryPolicyExpenseChatPartThree: ' empieza aquí! 🎉 Este es el lugar donde chatear y presentar o pagar gastos.',
`Este chat es con los administradores del espacio de trabajo ${workspaceName}.`,
beginningOfChatHistoryAdminRoomPartTwo: ' Use it to chat about workspace setup and more.',
beginningOfChatHistoryAnnounceRoomPartOne: ({workspaceName}: BeginningOfChatHistoryAnnounceRoomPartOneParams) => `Este chat es con todos en el espacio de trabajo ${workspaceName}.`,
beginningOfChatHistoryAnnounceRoomPartTwo: ` Úsalo para hablar sobre la configuración del espacio de trabajo y más.`,
beginningOfChatHistoryUserRoomPartOne: 'ste chat es para todo lo relacionado con ',
beginningOfChatHistoryUserRoomPartTwo: ' Fue creado por.',
beginningOfChatHistoryInvoiceRoomPartOne: `Este chat es para facturas entre `,
beginningOfChatHistoryInvoiceRoomPartTwo: `. Usa el botón + para enviar una factura.`,
beginningOfChatHistory: 'Este chat es con',
beginningOfChatHistoryPolicyExpenseChatPartOne: 'Aquí es donde ',
beginningOfChatHistoryPolicyExpenseChatPartTwo: ' enviará los gastos al espacio de trabajo ',
beginningOfChatHistoryPolicyExpenseChatPartThree: '. Solo usa el botón +.',
beginningOfChatHistorySelfDM: 'Este es tu espacio personal. Úsalo para notas, tareas, borradores y recordatorios.',
beginningOfChatHistorySystemDM: '¡Bienvenido! Vamos a configurar tu cuenta.',
chatWithAccountManager: 'Chatea con tu gestor de cuenta aquí',
sayHello: '¡Saluda!',
yourSpace: 'Tu espacio',
welcomeToRoom: ({roomName}: WelcomeToRoomParams) => `¡Bienvenido a ${roomName}!`,
usePlusButton: ({additionalText}: UsePlusButtonParams) => `\n¡También puedes usar el botón + de abajo para ${additionalText}, o asignar una tarea!`,
usePlusButton: ({additionalText}: UsePlusButtonParams) => `\nUsa el botón + para ${additionalText} un gasto`,
askConcierge: 'Haz preguntas y obtén soporte en tiempo real las 24/7.',
iouTypes: {
pay: 'pagar gastos',
split: 'dividir un gasto',
submit: 'presentar un gasto',
track: 'rastrear un gasto',
invoice: 'facturar un gasto',
pay: 'pagar',
split: 'dividir',
submit: 'presentar',
track: 'rastrear',
invoice: 'facturar',
},
},
adminOnlyCanPost: 'Solo los administradores pueden enviar mensajes en esta sala.',
Expand Down
4 changes: 2 additions & 2 deletions src/libs/ReportUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2099,7 +2099,7 @@ function getDisplayNameForParticipant(
return shouldUseShortForm ? shortName : longName;
}

function getParticipantsAccountIDsForDisplay(report: OnyxEntry<Report>, shouldExcludeHidden = false, shouldExcludeDeleted = false): number[] {
function getParticipantsAccountIDsForDisplay(report: OnyxEntry<Report>, shouldExcludeHidden = false, shouldExcludeDeleted = false, shouldForceExcludeCurrentUser = false): number[] {
const reportParticipants = report?.participants ?? {};
let participantsEntries = Object.entries(reportParticipants);

Expand All @@ -2126,7 +2126,7 @@ function getParticipantsAccountIDsForDisplay(report: OnyxEntry<Report>, shouldEx

// For 1:1 chat, we don't want to include the current user as a participant in order to not mark 1:1 chats as having multiple participants
// For system chat, we want to display Expensify as the only participant
const shouldExcludeCurrentUser = isOneOnOneChat(report) || isSystemChat(report);
const shouldExcludeCurrentUser = isOneOnOneChat(report) || isSystemChat(report) || shouldForceExcludeCurrentUser;

if (shouldExcludeCurrentUser || shouldExcludeHidden || shouldExcludeDeleted) {
participantsIds = participantsIds.filter((accountID) => {
Expand Down
Loading
Loading