fix(qr-pay): key the success-screen receipt by the Manteca synthetic id

src/app/(mobile-ui)/qr-pay/__tests__/qr-pay-states.test.tsx

@@ -50,7 +50,7 @@
     default: (props: any) => {
         // next/image uses 'fill' boolean; strip non-DOM props
         const { priority, layout, objectFit, fill, ...rest } = props
         return <img {...rest} />
     },
 }))
 
@@ -1052,6 +1052,31 @@
         expect(screen.getByText('Split this bill')).toBeInTheDocument()
     })
 
+    test('See receipt opens the drawer keyed by the Manteca synthetic id, not externalId', async () => {
+        // getReceiptUrl builds /receipt/<id>?kind=QR_PAY, and the backend resolves
+        // that id only via the Manteca synthetic id. Stamping externalId here 404s
+        // every shared receipt.
+        const openTransactionDetails = jest.fn()
+        mockUseTransactionDetailsDrawer.mockReturnValue({
+            openTransactionDetails,
+            selectedTransaction: null,
+            isDrawerOpen: false,
+            closeTransactionDetails: jest.fn(),
+        })
+
+        await completeMantecaPayment()
+
+        await waitFor(() => {
+            expect(screen.getByText('See receipt')).toBeInTheDocument()
+        })
+
+        await act(async () => {
+            fireEvent.click(screen.getByText('See receipt'))
+        })
+
+        expect(openTransactionDetails).toHaveBeenCalledWith(expect.objectContaining({ id: 'qp1' }))
+    })
+
     test('Manteca success, perk eligible shows hold-to-claim button', async () => {
         await completeMantecaPayment({
             perk: {

src/app/(mobile-ui)/qr-pay/page.tsx

@@ -268,7 +268,7 @@
         if (sumsubFlow.showWrapper || sumsubFlow.isModalOpen) {
             sumsubFlow.completeFlow()
         }
     }, [kycGateState, sumsubFlow.showWrapper, sumsubFlow.isModalOpen, sumsubFlow.completeFlow])
 
     const queryClient = useQueryClient()
     const [isShaking, setIsShaking] = useState(false)
@@ -379,7 +379,7 @@
         if (isSuccess || !!errorMessage) {
             setLoadingState('Idle')
         }
     }, [isSuccess, errorMessage])
 
     // First fetch for qrcode info — only after KYC gating allows proceeding
     useEffect(() => {
@@ -398,7 +398,7 @@
         }
 
         setIsFirstLoad(false)
     }, [timestamp, paymentProcessor, qrCode])
 
     // Get amount from payment lock (Manteca)
     useEffect(() => {
@@ -413,7 +413,7 @@
             setAmount(paymentLock.paymentAgainstAmount)
             setCurrencyAmount(paymentLock.paymentAssetAmount)
         }
     }, [paymentLock?.code, paymentProcessor])
 
     // Get currency object from payment lock (Manteca)
     useEffect(() => {
@@ -435,7 +435,7 @@
             }
         }
         getCurrencyObject().then(setCurrency)
     }, [paymentLock?.code, paymentProcessor])
 
     const isBlockingError = useMemo(() => {
         // The settling failure says "try again in a few seconds" — keep the Pay
@@ -457,7 +457,7 @@
             // For dynamic QR codes, backend provides the USD amount
             return paymentLock.paymentAgainstAmount
         }
     }, [paymentLock?.code, paymentLock?.paymentAgainstAmount, amount])
 
     // Live card-vs-local-rail markup, driven by Manteca's rate + (for ARS)
     // BCRA's official rate. Used by both the confirm-screen "Save vs card"
@@ -775,7 +775,7 @@
         } finally {
             setLoadingState('Idle')
         }
     }, [
         paymentLock,
         signSpend,
         balance,
@@ -1440,7 +1440,11 @@
                                     onClick={() => {
                                         const now = new Date()
                                         openTransactionDetails({
-                                            id: qrPayment!.externalId,
+                                            // Manteca synthetic id — the only key /receipt/<id>
+                                            // resolves, and what Activity rows already carry.
+                                            // `externalId` is UUID-shaped, so it slips past the
+                                            // id-shape gate and 404s silently instead of erroring.
+                                            id: qrPayment!.id,
                                             direction: 'qr_payment',
                                             userName: qrPayment!.details.merchant.name,
                                             fullName: qrPayment!.details.merchant.name,