fix: resolve deploy blockers and add hover/tooltip to receipt action buttons

src/components/ReportActionItem/receiptHoverUtils/index.native.ts

@@ -0,0 +1,8 @@
+// No-op on native — hover states don't exist on mobile
+function resetButtonHoverState() {}
+
+function isElementHovered(): boolean {
+    return false;
+}
+
+export {resetButtonHoverState, isElementHovered};

src/components/ReportActionItem/receiptHoverUtils/index.ts

@@ -0,0 +1,16 @@
+import type {RefObject} from 'react';
+import type {View} from 'react-native';
+
+/** Reset stale button hover/tooltip when file picker opens (browsers don't fire mouseleave). */
+function resetButtonHoverState(addButtonRef: RefObject<View | null>) {
+    const buttonEl = addButtonRef.current as unknown as HTMLElement;
+    buttonEl?.dispatchEvent(new PointerEvent('pointerleave'));
+    buttonEl?.dispatchEvent(new MouseEvent('mouseout', {bubbles: true, relatedTarget: document.body}));
+}
+
+/** Check if cursor is over the element (web only). */
+function isElementHovered(ref: RefObject<View | null>): boolean {
+    return !!(ref.current as unknown as HTMLElement)?.matches?.(':hover');
+}
+
+export {resetButtonHoverState, isElementHovered};

src/hooks/useHover.ts

@@ -1,14 +1,14 @@
 import {useState} from 'react';
-import {canUseTouchScreen as canUseTouchScreenUtil} from '@libs/DeviceCapabilities';
+import {hasHoverSupport} from '@libs/DeviceCapabilities';
 
 const useHover = () => {
     const [hovered, setHovered] = useState(false);
-    const canUseTouchScreen = canUseTouchScreenUtil();
+    const deviceHasHoverSupport = hasHoverSupport();
     return {
         hovered,
         bind: {
-            onMouseEnter: () => !canUseTouchScreen && setHovered(true),
-            onMouseLeave: () => !canUseTouchScreen && setHovered(false),
+            onMouseEnter: () => deviceHasHoverSupport && setHovered(true),
+            onMouseLeave: () => deviceHasHoverSupport && setHovered(false),
         },
     };
 };

src/languages/de.ts

@@ -1140,6 +1140,7 @@ const translations: TranslationDeepObject<typeof en> = {
         deleteReceipt: 'Beleg löschen',
         deleteConfirmation: 'Sind Sie sicher, dass Sie diesen Beleg löschen möchten?',
         addReceipt: 'Beleg hinzufügen',
+        addAdditionalReceipt: 'Zusätzlichen Beleg hinzufügen',
         scanFailed: 'Der Beleg konnte nicht gescannt werden, da Händler, Datum oder Betrag fehlen.',
         crop: 'Zuschneiden',
         addAReceipt: {

src/languages/en.ts

@@ -1182,6 +1182,7 @@ const translations = {
         deleteReceipt: 'Delete receipt',
         deleteConfirmation: 'Are you sure you want to delete this receipt?',
         addReceipt: 'Add receipt',
+        addAdditionalReceipt: 'Add additional receipt',
         scanFailed: "The receipt couldn't be scanned, as it's missing a merchant, date, or amount.",
         crop: 'Crop',
         addAReceipt: {

src/languages/es.ts

@@ -1054,6 +1054,7 @@ const translations: TranslationDeepObject<typeof en> = {
         deleteReceipt: 'Eliminar recibo',
         deleteConfirmation: '¿Estás seguro de que quieres borrar este recibo?',
         addReceipt: 'Añadir recibo',
+        addAdditionalReceipt: 'Añadir recibo adicional',
         scanFailed: 'El recibo no pudo ser escaneado, ya que falta el comerciante, la fecha o el monto.',
         crop: 'Recortar',
         addAReceipt: {

src/languages/fr.ts

@@ -1144,6 +1144,7 @@ const translations: TranslationDeepObject<typeof en> = {
         deleteReceipt: 'Supprimer le reçu',
         deleteConfirmation: 'Voulez-vous vraiment supprimer ce reçu ?',
         addReceipt: 'Ajouter un reçu',
+        addAdditionalReceipt: 'Ajouter un reçu supplémentaire',
         scanFailed: 'Le reçu n’a pas pu être scanné, car il lui manque un commerçant, une date ou un montant.',
         crop: 'Recadrer',
         addAReceipt: {

src/languages/it.ts

@@ -1139,6 +1139,7 @@ const translations: TranslationDeepObject<typeof en> = {
         deleteReceipt: 'Elimina ricevuta',
         deleteConfirmation: 'Sei sicuro di voler eliminare questa ricevuta?',
         addReceipt: 'Aggiungi ricevuta',
+        addAdditionalReceipt: 'Aggiungi ricevuta aggiuntiva',
         scanFailed: 'La ricevuta non può essere acquisita perché manca il nome dell’esercente, la data o l’importo.',
         crop: 'Ritaglia',
         addAReceipt: {

src/languages/ja.ts

@@ -1131,6 +1131,7 @@ const translations: TranslationDeepObject<typeof en> = {
         deleteReceipt: '領収書を削除',
         deleteConfirmation: 'この領収書を削除してもよろしいですか？',
         addReceipt: '領収書を追加',
+        addAdditionalReceipt: 'レシートを追加',
         scanFailed: 'このレシートは、店舗名、日付、または金額が不足しているためスキャンできませんでした。',
         crop: 'トリミング',
         addAReceipt: {

src/languages/nl.ts

@@ -1138,6 +1138,7 @@ const translations: TranslationDeepObject<typeof en> = {
         deleteReceipt: 'Bon verwijderen',
         deleteConfirmation: 'Weet je zeker dat je deze bon wilt verwijderen?',
         addReceipt: 'Bon toevoegen',
+        addAdditionalReceipt: 'Voeg extra bon toe',
         scanFailed: 'De bon is niet gescand, omdat er een handelaar, datum of bedrag ontbreekt.',
         crop: 'Bijsnijden',
         addAReceipt: {

src/languages/pl.ts

@@ -1138,6 +1138,7 @@ const translations: TranslationDeepObject<typeof en> = {
         deleteReceipt: 'Usuń paragon',
         deleteConfirmation: 'Czy na pewno chcesz usunąć ten paragon?',
         addReceipt: 'Dodaj paragon',
+        addAdditionalReceipt: 'Dodaj dodatkowy paragon',
         scanFailed: 'Nie można było zeskanować paragonu, ponieważ brakuje na nim sprzedawcy, daty lub kwoty.',
         crop: 'Przytnij',
         addAReceipt: {

src/languages/pt-BR.ts

@@ -1137,6 +1137,7 @@ const translations: TranslationDeepObject<typeof en> = {
         deleteReceipt: 'Excluir recibo',
         deleteConfirmation: 'Tem certeza de que deseja excluir este recibo?',
         addReceipt: 'Adicionar recibo',
+        addAdditionalReceipt: 'Adicionar recibo adicional',
         scanFailed: 'O recibo não pôde ser digitalizado porque está faltando o comerciante, a data ou o valor.',
         crop: 'Cortar',
         addAReceipt: {

src/languages/zh-hans.ts

@@ -1114,6 +1114,7 @@ const translations: TranslationDeepObject<typeof en> = {
         deleteReceipt: '删除收据',
         deleteConfirmation: '确定要删除这张收据吗？',
         addReceipt: '添加收据',
+        addAdditionalReceipt: '添加额外收据',
         scanFailed: '无法扫描此收据，因为缺少商家、日期或金额。',
         crop: '裁剪',
         addAReceipt: {

src/libs/actions/Report/index.ts

@@ -346,7 +346,7 @@
 
 type AddActionsParams = {
     report: OnyxEntry<Report>;
-    notifyReportID: string;
+    notifyReportID: string | string[];
     ancestors: Ancestor[];
     timezoneParam: Timezone;
     currentUserAccountID: number;
@@ -359,7 +359,7 @@
 
 type AddAttachmentWithCommentParams = {
     report: OnyxEntry<Report>;
-    notifyReportID: string;
+    notifyReportID: string | string[];
     ancestors: Ancestor[];
     attachments: FileObject | FileObject[];
     currentUserAccountID: number;
@@ -373,7 +373,7 @@
 // map of reportID to all reportActions for that report
 const allReportActions: OnyxCollection<ReportActions> = {};
 
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
     callback: (actions, key) => {
         if (!key || !actions) {
@@ -385,7 +385,7 @@
 });
 
 let allReports: OnyxCollection<Report>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -394,7 +394,7 @@
 });
 
 let allPersonalDetails: OnyxEntry<PersonalDetailsList> = {};
 Onyx.connect({
     key: ONYXKEYS.PERSONAL_DETAILS_LIST,
     callback: (value) => {
         allPersonalDetails = value ?? {};
@@ -412,7 +412,7 @@
 });
 
 let onboarding: OnyxEntry<Onboarding>;
 Onyx.connect({
     key: ONYXKEYS.NVP_ONBOARDING,
     callback: (val) => {
         if (Array.isArray(val)) {
@@ -643,12 +643,17 @@
 }
 
 /** Notify the ReportActionsView that a new comment has arrived */
-function notifyNewAction(reportID: string | undefined, reportAction: ReportAction | undefined, isFromCurrentUser: boolean) {
-    const actionSubscriber = newActionSubscribers.find((subscriber) => subscriber.reportID === reportID);
-    if (!actionSubscriber) {
+function notifyNewAction(reportID: string | string[] | undefined, reportAction: ReportAction | undefined, isFromCurrentUser: boolean) {
+    if (!reportID) {
         return;
     }
-    actionSubscriber.callback(isFromCurrentUser, reportAction);
+    const ids = Array.isArray(reportID) ? reportID : [reportID];
+    for (const id of ids) {
+        const actionSubscriber = newActionSubscribers.find((subscriber) => subscriber.reportID === id);
+        if (actionSubscriber) {
+            actionSubscriber.callback(isFromCurrentUser, reportAction);
+        }
+    }
 }
 
 /**

src/styles/index.ts

@@ -3627,6 +3627,8 @@ const staticStyles = (theme: ThemeColors) =>
             height: 40,
             alignItems: 'center',
             justifyContent: 'center',
+            backgroundColor: theme.buttonDefaultBG,
+            borderRadius: 20,
         },
 
         bgGreenSuccess: {

tests/ui/components/MoneyRequestReceiptViewTest.tsx

@@ -247,7 +247,7 @@ describe('MoneyRequestReceiptView', () => {
             await waitForBatchedUpdatesWithAct();
 
             expect(screen.queryByLabelText(translateLocal('accessibilityHints.viewAttachment'))).toBeNull();
-            expect(screen.queryByLabelText(translateLocal('reportActionCompose.addAttachment'))).toBeNull();
+            expect(screen.queryByLabelText(translateLocal('receipt.addAdditionalReceipt'))).toBeNull();
         });
 
         it('shows action buttons when transaction has a receipt', async () => {
@@ -264,7 +264,7 @@ describe('MoneyRequestReceiptView', () => {
             await waitForBatchedUpdatesWithAct();
 
             expect(screen.getByLabelText(translateLocal('accessibilityHints.viewAttachment'))).toBeTruthy();
-            expect(screen.getByLabelText(translateLocal('reportActionCompose.addAttachment'))).toBeTruthy();
+            expect(screen.getByLabelText(translateLocal('receipt.addAdditionalReceipt'))).toBeTruthy();
         });
 
         it('shows action buttons when receipt is scanning', async () => {
@@ -281,7 +281,7 @@ describe('MoneyRequestReceiptView', () => {
             await waitForBatchedUpdatesWithAct();
 
             expect(screen.getByLabelText(translateLocal('accessibilityHints.viewAttachment'))).toBeTruthy();
-            expect(screen.getByLabelText(translateLocal('reportActionCompose.addAttachment'))).toBeTruthy();
+            expect(screen.getByLabelText(translateLocal('receipt.addAdditionalReceipt'))).toBeTruthy();
         });
 
         it('does not show action buttons in readonly mode', async () => {
@@ -301,7 +301,7 @@ describe('MoneyRequestReceiptView', () => {
             await waitForBatchedUpdatesWithAct();
 
             expect(screen.queryByLabelText(translateLocal('accessibilityHints.viewAttachment'))).toBeNull();
-            expect(screen.queryByLabelText(translateLocal('reportActionCompose.addAttachment'))).toBeNull();
+            expect(screen.queryByLabelText(translateLocal('receipt.addAdditionalReceipt'))).toBeNull();
         });
     });
 });