fix Xero action modal positioning and display circle icon instead

Expensify · Jul 24, 2024 · d38e471 · d38e471
1 parent bf69d5d
commit d38e471
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 8 deletions.
diff --git a/assets/images/integrationicons/qbo-icon-circle.svg b/assets/images/integrationicons/qbo-icon-circle.svg
diff --git a/assets/images/integrationicons/xero-icon-circle.svg b/assets/images/integrationicons/xero-icon-circle.svg
diff --git a/src/components/Icon/Expensicons.ts b/src/components/Icon/Expensicons.ts
@@ -100,8 +100,10 @@ import ImageCropSquareMask from '@assets/images/image-crop-square-mask.svg';
 import Inbox from '@assets/images/inbox.svg';
 import Info from '@assets/images/info.svg';
 import NetSuiteSquare from '@assets/images/integrationicons/netsuite-icon-square.svg';
+import QBOCircle from '@assets/images/integrationicons/qbo-icon-circle.svg';
 import QBOSquare from '@assets/images/integrationicons/qbo-icon-square.svg';
 import SageIntacctSquare from '@assets/images/integrationicons/sage-intacct-icon-square.svg';
+import XeroCircle from '@assets/images/integrationicons/xero-icon-circle.svg';
 import XeroSquare from '@assets/images/integrationicons/xero-icon-square.svg';
 import InvoiceGeneric from '@assets/images/invoice-generic.svg';
 import Invoice from '@assets/images/invoice.svg';
@@ -372,4 +374,6 @@ export {
     CheckCircle,
     CheckmarkCircle,
     NetSuiteSquare,
+    XeroCircle,
+    QBOCircle,
 };
diff --git a/src/components/ReportActionItem/ExportWithDropdownMenu.tsx b/src/components/ReportActionItem/ExportWithDropdownMenu.tsx
@@ -16,16 +16,27 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Policy, Report} from '@src/types/onyx';
 import type {ConnectionName} from '@src/types/onyx/Policy';
+import AnchorAlignment from '@src/types/utils/AnchorAlignment';
 
 type ExportWithDropdownMenuProps = {
     policy: OnyxEntry<Policy>;
 
     report: OnyxEntry<Report>;
 
     connectionName: ConnectionName;
+
+    paymentMethodDropdownAnchorAlignment?: AnchorAlignment;
 };
 
-function ExportWithDropdownMenu({policy, report, connectionName}: ExportWithDropdownMenuProps) {
+function ExportWithDropdownMenu({
+    policy,
+    report,
+    connectionName,
+    paymentMethodDropdownAnchorAlignment = {
+        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
+    },
+}: ExportWithDropdownMenuProps) {
     const reportID = report?.reportID;
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -91,10 +102,7 @@ function ExportWithDropdownMenu({policy, report, connectionName}: ExportWithDrop
                 success={!hasIntegrationAutoSync}
                 pressOnEnter
                 shouldAlwaysShowDropdownMenu
-                anchorAlignment={{
-                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
-                }}
+                anchorAlignment={paymentMethodDropdownAnchorAlignment}
                 onPress={(_, value) => {
                     if (isExported) {
                         setModalStatus(value);

diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
@@ -456,6 +456,10 @@ function ReportPreview({
                                         policy={policy}
                                         report={iouReport}
                                         connectionName={connectedIntegration}
+                                        paymentMethodDropdownAnchorAlignment={{
+                                            horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                                            vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                                        }}
                                     />
                                 )}
                                 {shouldShowSubmitButton && (

diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
@@ -12,7 +12,7 @@ import type {SvgProps} from 'react-native-svg';
 import type {OriginalMessageModifiedExpense} from 'src/types/onyx/OriginalMessage';
 import type {TupleToUnion, ValueOf} from 'type-fest';
 import type {FileObject} from '@components/AttachmentModal';
-import {FallbackAvatar, QBOSquare, XeroSquare} from '@components/Icon/Expensicons';
+import {FallbackAvatar, QBOCircle, XeroCircle} from '@components/Icon/Expensicons';
 import * as defaultGroupAvatars from '@components/Icon/GroupDefaultAvatars';
 import * as defaultWorkspaceAvatars from '@components/Icon/WorkspaceDefaultAvatars';
 import type {MoneyRequestAmountInputProps} from '@components/MoneyRequestAmountInput';
@@ -7221,10 +7221,10 @@ function findPolicyExpenseChatByPolicyID(policyID: string): OnyxEntry<Report> {
 
 function getIntegrationIcon(connectionName?: ConnectionName) {
     if (connectionName === CONST.POLICY.CONNECTIONS.NAME.XERO) {
-        return XeroSquare;
+        return XeroCircle;
     }
     if (connectionName === CONST.POLICY.CONNECTIONS.NAME.QBO) {
-        return QBOSquare;
+        return QBOCircle;
     }
     return undefined;
 }