[Wave Collect] [Xero] Show organization name

src/components/ConnectionLayout.tsx

@@ -20,15 +20,15 @@ type ConnectionLayoutProps = {
     /** Header title for the connection */
     headerTitle: TranslationPaths;
 
+    /** The subtitle to show in the header */
+    headerSubtitle?: string;
+
     /** React nodes that will be shown */
     children?: React.ReactNode;
 
     /** Title of the connection component */
     title?: TranslationPaths;
 
-    /** Subtitle of the connection */
-    subtitle?: TranslationPaths;
-
     /** The current policyID */
     policyID: string;
 
@@ -44,22 +44,18 @@ type ConnectionLayoutProps = {
     /** Style of the title text */
     titleStyle?: StyleProp<TextStyle> | undefined;
 
-    /** Style of the subtitle text */
-    subTitleStyle?: StyleProp<TextStyle> | undefined;
-
     /** Whether to use ScrollView or not */
     shouldUseScrollView?: boolean;
 };
 
-type ConnectionLayoutContentProps = Pick<ConnectionLayoutProps, 'title' | 'titleStyle' | 'subtitle' | 'subTitleStyle' | 'children'>;
+type ConnectionLayoutContentProps = Pick<ConnectionLayoutProps, 'title' | 'titleStyle' | 'children'>;
 
-function ConnectionLayoutContent({title, titleStyle, subtitle, subTitleStyle, children}: ConnectionLayoutContentProps) {
+function ConnectionLayoutContent({title, titleStyle, children}: ConnectionLayoutContentProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     return (
         <>
             {title && <Text style={[styles.pb5, titleStyle]}>{translate(title)}</Text>}
-            {subtitle && <Text style={[styles.textLabelSupporting, subTitleStyle]}>{translate(subtitle)}</Text>}
             {children}
         </>
     );
@@ -70,13 +66,12 @@ function ConnectionLayout({
     headerTitle,
     children,
     title,
-    subtitle,
+    headerSubtitle,
     policyID,
     accessVariants,
     featureName,
     contentContainerStyle,
     titleStyle,
-    subTitleStyle,
     shouldUseScrollView = true,
 }: ConnectionLayoutProps) {
     const {translate} = useLocalize();
@@ -85,14 +80,12 @@ function ConnectionLayout({
         () => (
             <ConnectionLayoutContent
                 title={title}
-                subtitle={subtitle}
-                subTitleStyle={subTitleStyle}
                 titleStyle={titleStyle}
             >
                 {children}
             </ConnectionLayoutContent>
         ),
-        [title, subtitle, titleStyle, subTitleStyle, children],
+        [title, titleStyle, children],
     );
 
     return (
@@ -108,6 +101,7 @@ function ConnectionLayout({
             >
                 <HeaderWithBackButton
                     title={translate(headerTitle)}
+                    subtitle={headerSubtitle}
                     onBackButtonPress={() => Navigation.goBack()}
                 />
                 {shouldUseScrollView ? (

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -346,7 +346,7 @@ function MoneyRequestView({
                     <OfflineWithFeedback
                         pendingAction={pendingAction}
                         errors={transaction?.errors}
-                        errorRowStyles={[styles.ml4]}
+                        errorRowStyles={[styles.mh4]}
                         onClose={() => {
                             if (!transaction?.transactionID) {
                                 return;

src/languages/en.ts

@@ -717,6 +717,7 @@ export default {
             other: 'Unexpected error, please try again later.',
             genericCreateFailureMessage: 'Unexpected error submitting this expense. Please try again later.',
             genericCreateInvoiceFailureMessage: 'Unexpected error sending invoice, please try again later.',
+            receiptDeleteFailureError: 'Unexpected error deleting this receipt. Please try again later.',
             // eslint-disable-next-line rulesdir/use-periods-for-error-messages
             receiptFailureMessage: "The receipt didn't upload. ",
             // eslint-disable-next-line rulesdir/use-periods-for-error-messages

src/languages/es.ts

@@ -712,6 +712,7 @@ export default {
             other: 'Error inesperado, por favor inténtalo más tarde.',
             genericCreateFailureMessage: 'Error inesperado al enviar este gasto. Por favor, inténtalo más tarde.',
             genericCreateInvoiceFailureMessage: 'Error inesperado al enviar la factura, inténtalo de nuevo más tarde.',
+            receiptDeleteFailureError: 'Error inesperado al borrar este recibo. Vuelve a intentarlo más tarde.',
             // eslint-disable-next-line rulesdir/use-periods-for-error-messages
             receiptFailureMessage: 'El recibo no se subió. ',
             // eslint-disable-next-line rulesdir/use-periods-for-error-messages

src/libs/PolicyUtils.ts

@@ -406,6 +406,10 @@ function findCurrentXeroOrganization(tenants: Tenant[] | undefined, organization
     return tenants?.find((tenant) => tenant.id === organizationID);
 }
 
+function getCurrentXeroOrganizationName(policy: Policy | undefined): string | undefined {
+    return findCurrentXeroOrganization(getXeroTenants(policy), policy?.connections?.xero?.config?.tenantID)?.name;
+}
+
 export {
     getActivePolicies,
     hasAccountingConnections,
@@ -453,6 +457,7 @@ export {
     canSendInvoice,
     getXeroTenants,
     findCurrentXeroOrganization,
+    getCurrentXeroOrganizationName,
 };
 
 export type {MemberEmailsToAccountIDs};

src/libs/actions/IOU.ts

@@ -6315,7 +6315,10 @@ function detachReceipt(transactionID: string) {
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`,
-            value: transaction,
+            value: {
+                ...transaction,
+                errors: ErrorUtils.getMicroSecondOnyxError('iou.error.receiptDeleteFailureError'),
+            },
         },
     ];
 

src/pages/workspace/accounting/PolicyAccountingPage.tsx

@@ -25,7 +25,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import {removePolicyConnection} from '@libs/actions/connections';
 import {syncConnection} from '@libs/actions/connections/QuickBooksOnline';
-import {findCurrentXeroOrganization, getXeroTenants} from '@libs/PolicyUtils';
+import {findCurrentXeroOrganization, getCurrentXeroOrganizationName, getXeroTenants} from '@libs/PolicyUtils';
 import Navigation from '@navigation/Navigation';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import type {WithPolicyProps} from '@pages/workspace/withPolicy';
@@ -120,8 +120,8 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting
     const policyConnectedToXero = connectedIntegration === CONST.POLICY.CONNECTIONS.NAME.XERO;
 
     const tenants = useMemo(() => getXeroTenants(policy), [policy]);
-
     const currentXeroOrganization = findCurrentXeroOrganization(tenants, policy?.connections?.xero?.config?.tenantID);
+    const currentXeroOrganizationName = useMemo(() => getCurrentXeroOrganizationName(policy), [policy]);
 
     const overflowMenu: ThreeDotsMenuProps['menuItems'] = useMemo(
         () => [
@@ -200,7 +200,7 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting
                       {
                           description: translate('workspace.xero.organization'),
                           iconRight: Expensicons.ArrowRight,
-                          title: currentXeroOrganization?.name,
+                          title: currentXeroOrganizationName,
                           wrapperStyle: [styles.sectionMenuItemTopDescription],
                           titleStyle: styles.fontWeightNormal,
                           shouldShowRightIcon: tenants.length > 1,
@@ -247,6 +247,7 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting
         connectedIntegration,
         connectionSyncProgress?.stageInProgress,
         currentXeroOrganization,
+        currentXeroOrganizationName,
         tenants,
         isSyncInProgress,
         overflowMenu,

src/pages/workspace/accounting/xero/XeroImportPage.tsx

@@ -8,7 +8,7 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
-import {getXeroTenants} from '@libs/PolicyUtils';
+import {getCurrentXeroOrganizationName} from '@libs/PolicyUtils';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import withPolicy from '@pages/workspace/withPolicy';
 import type {WithPolicyProps} from '@pages/workspace/withPolicy';
@@ -22,8 +22,7 @@ function XeroImportPage({policy}: WithPolicyProps) {
     const policyID = policy?.id ?? '';
     const {importCustomers, importTaxRates, importTrackingCategories, pendingFields} = policy?.connections?.xero?.config ?? {};
 
-    const tenants = useMemo(() => getXeroTenants(policy ?? undefined), [policy]);
-    const currentXeroOrganization = tenants.find((tenant) => tenant.id === policy?.connections?.xero.config.tenantID);
+    const currentXeroOrganizationName = useMemo(() => getCurrentXeroOrganizationName(policy ?? undefined), [policy]);
 
     const sections = useMemo(
         () => [
@@ -88,7 +87,7 @@ function XeroImportPage({policy}: WithPolicyProps) {
             >
                 <HeaderWithBackButton
                     title={translate('workspace.accounting.import')}
-                    subtitle={currentXeroOrganization?.name}
+                    subtitle={currentXeroOrganizationName}
                 />
                 <ScrollView contentContainerStyle={styles.pb2}>
                     <Text style={[styles.ph5, styles.pb5]}>{translate('workspace.xero.importDescription')}</Text>

src/pages/workspace/accounting/xero/advanced/XeroAdvancedPage.tsx

@@ -7,6 +7,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import * as Connections from '@libs/actions/connections';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import {getCurrentXeroOrganizationName} from '@libs/PolicyUtils';
 import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
 import withPolicyConnections from '@pages/workspace/withPolicyConnections';
 import ToggleSettingOptionRow from '@pages/workspace/workflows/ToggleSettingsOptionRow';
@@ -35,10 +36,13 @@ function XeroAdvancedPage({policy}: WithPolicyConnectionsProps) {
     const selectedBankAccountName = getSelectedAccountName(invoiceCollectionsAccountID ?? '');
     const selectedBillPaymentAccountName = getSelectedAccountName(reimbursementAccountID ?? '');
 
+    const currentXeroOrganizationName = useMemo(() => getCurrentXeroOrganizationName(policy ?? undefined), [policy]);
+
     return (
         <ConnectionLayout
             displayName={XeroAdvancedPage.displayName}
             headerTitle="workspace.xero.advancedConfig.advanced"
+            headerSubtitle={currentXeroOrganizationName}
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
             policyID={policyID}
             featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}

src/pages/workspace/accounting/xero/export/XeroExportConfigurationPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import ConnectionLayout from '@components/ConnectionLayout';
 import type {MenuItemProps} from '@components/MenuItem';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
@@ -7,6 +7,7 @@ import type {OfflineWithFeedbackProps} from '@components/OfflineWithFeedback';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
+import {getCurrentXeroOrganizationName} from '@libs/PolicyUtils';
 import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
 import withPolicyConnections from '@pages/workspace/withPolicyConnections';
 import CONST from '@src/CONST';
@@ -21,6 +22,8 @@ function XeroExportConfigurationPage({policy}: WithPolicyConnectionsProps) {
     const policyOwner = policy?.owner ?? '';
 
     const {export: exportConfiguration, errorFields, pendingFields} = policy?.connections?.xero?.config ?? {};
+    const currentXeroOrganizationName = useMemo(() => getCurrentXeroOrganizationName(policy ?? undefined), [policy]);
+
     const menuItems: MenuItem[] = [
         {
             description: translate('workspace.xero.preferredExporter'),
@@ -82,6 +85,7 @@ function XeroExportConfigurationPage({policy}: WithPolicyConnectionsProps) {
         <ConnectionLayout
             displayName={XeroExportConfigurationPage.displayName}
             headerTitle="workspace.xero.export"
+            headerSubtitle={currentXeroOrganizationName}
             title="workspace.xero.exportDescription"
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]}
             policyID={policyID}