From 024bb062050d0f2084de3684db7931cca4722091 Mon Sep 17 00:00:00 2001
From: Nemo <nemo@openclaw.ai>
Date: Tue, 24 Mar 2026 13:09:53 +0800
Subject: [PATCH] fix: SlideToConfirm gesture blocked by modal backdrop -
 restructure all payment modals

---
 app/(app)/clients/[id].tsx    | 11 ++++++-----
 app/(app)/dashboard.tsx       |  7 +++++--
 app/(app)/payments/index.tsx  | 11 ++++++-----
 components/SlideToConfirm.tsx |  6 ++++--
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/app/(app)/clients/[id].tsx b/app/(app)/clients/[id].tsx
index 065e767..e3439ea 100644
--- a/app/(app)/clients/[id].tsx
+++ b/app/(app)/clients/[id].tsx
@@ -68,9 +68,10 @@ function PayInvoiceModal({ invoice, onClose, onSuccess }: { invoice: any; onClos
 
   return (
     <Modal visible animationType="slide" transparent onRequestClose={onClose}>
-      <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
-      <TouchableOpacity style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'flex-end' }} activeOpacity={1} onPress={onClose}>
-        <TouchableOpacity activeOpacity={1} style={{ backgroundColor: '#FFF', borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: 24 }}>
+      <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'flex-end' }}>
+        <TouchableOpacity style={{ flex: 1 }} activeOpacity={1} onPress={onClose} />
+      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+        <View style={{ backgroundColor: '#FFF', borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: 24 }}>
           <Text style={{ fontSize: 20, fontWeight: '800', color: '#0F172A', marginBottom: 4 }}>Record Payment</Text>
           <Text style={{ fontSize: 15, color: '#64748B', marginBottom: 20 }}>
             {invoice.invoiceNumber} · Balance: <Text style={{ fontWeight: '700', color: '#991B1B' }}>₱{Number(invoice.balance).toLocaleString()}</Text>
@@ -113,9 +114,9 @@ function PayInvoiceModal({ invoice, onClose, onSuccess }: { invoice: any; onClos
             onConfirm={submit}
             disabled={loading || !amount || Number(amount) <= 0}
           />
-        </TouchableOpacity>
-      </TouchableOpacity>
+        </View>
       </KeyboardAvoidingView>
+      </View>
     </Modal>
   );
 }
diff --git a/app/(app)/dashboard.tsx b/app/(app)/dashboard.tsx
index f2fb9fc..fd520af 100644
--- a/app/(app)/dashboard.tsx
+++ b/app/(app)/dashboard.tsx
@@ -289,8 +289,10 @@ export default function DashboardScreen() {
 
       {/* ── Payment Modal ──────────────────────────────────────────────────── */}
       <Modal visible={payModal} transparent animationType="slide" onRequestClose={closePay}>
-        <TouchableOpacity style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.4)' }} activeOpacity={1} onPress={closePay} />
-        <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
+        <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.4)', justifyContent: 'flex-end' }}>
+          {/* Tap outside to dismiss — only on the dark area above the sheet */}
+          <TouchableOpacity style={{ flex: 1 }} activeOpacity={1} onPress={closePay} />
+          <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
           <View style={{ backgroundColor: '#fff', borderTopLeftRadius: 24, borderTopRightRadius: 24, padding: 24, paddingBottom: 40 }}>
             {/* Handle */}
             <View style={{ width: 40, height: 4, backgroundColor: '#E2E8F0', borderRadius: 2, alignSelf: 'center', marginBottom: 20 }} />
@@ -341,6 +343,7 @@ export default function DashboardScreen() {
             />
           </View>
         </KeyboardAvoidingView>
+        </View>
       </Modal>
     </SafeAreaView>
   );
diff --git a/app/(app)/payments/index.tsx b/app/(app)/payments/index.tsx
index f94ac4e..0a65c94 100644
--- a/app/(app)/payments/index.tsx
+++ b/app/(app)/payments/index.tsx
@@ -41,9 +41,10 @@ function PayInvoiceModal({ invoice, onClose, onSuccess }: { invoice: any; onClos
 
   return (
     <Modal visible animationType="slide" transparent onRequestClose={onClose}>
-      <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
-      <TouchableOpacity style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'flex-end' }} activeOpacity={1} onPress={onClose}>
-        <TouchableOpacity activeOpacity={1} style={{ backgroundColor: '#FFF', borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: 24 }}>
+      <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'flex-end' }}>
+        <TouchableOpacity style={{ flex: 1 }} activeOpacity={1} onPress={onClose} />
+      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+        <View style={{ backgroundColor: '#FFF', borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: 24 }}>
           <Text style={{ fontSize: 20, fontWeight: '800', color: '#0F172A', marginBottom: 2 }}>Record Payment</Text>
           <Text style={{ fontSize: 14, color: '#64748B', marginBottom: 4 }}>{invoice.client?.firstName} {invoice.client?.lastName} · {invoice.client?.accountNumber}</Text>
           <Text style={{ fontSize: 15, color: '#64748B', marginBottom: 20 }}>
@@ -82,9 +83,9 @@ function PayInvoiceModal({ invoice, onClose, onSuccess }: { invoice: any; onClos
             onConfirm={submit}
             disabled={loading || !amount || Number(amount) <= 0}
           />
-        </TouchableOpacity>
-      </TouchableOpacity>
+        </View>
       </KeyboardAvoidingView>
+      </View>
     </Modal>
   );
 }
diff --git a/components/SlideToConfirm.tsx b/components/SlideToConfirm.tsx
index 9aa496d..e2015a9 100644
--- a/components/SlideToConfirm.tsx
+++ b/components/SlideToConfirm.tsx
@@ -22,8 +22,10 @@ export function SlideToConfirm({ label = 'Slide to confirm', color = '#059669',
 
   const panResponder = useRef(
     PanResponder.create({
-      onStartShouldSetPanResponder: () => !disabled && !done,
-      onMoveShouldSetPanResponder:  () => !disabled && !done,
+      onStartShouldSetPanResponder:        () => !disabled && !done,
+      onStartShouldSetPanResponderCapture: () => !disabled && !done,
+      onMoveShouldSetPanResponder:         () => !disabled && !done,
+      onMoveShouldSetPanResponderCapture:  () => !disabled && !done,
       onPanResponderMove: (_, gs) => {
         const x = Math.max(0, Math.min(gs.dx, maxX));
         pan.setValue(x);