react-native-fpay 0.3.5 → 0.3.7

package/src/ui/screens/sub/sendPayment/NFCSubScreen.tsx

@@ -1,10 +1,22 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Animated, Alert } from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Animated,
+  Alert,
+} from 'react-native';
 import NfcManager, { NfcTech, Ndef } from 'react-native-nfc-manager';
 import { transferAPI } from '../../../../core/api';
 import { FPButton } from '../../../components/FPButton';
 import { C, R, S, F } from '../../../theme';
-import type { FPCurrency, FPError, FPTransaction, Props } from '../../../../core/types';
+import type {
+  FPCurrency,
+  FPError,
+  FPTransaction,
+  Props,
+} from '../../../../core/types';
 import styled from 'styled-components/native';
 import Svg, { Path } from 'react-native-svg';
 import Ionicons from 'react-native-vector-icons/Ionicons';
@@ -21,7 +33,7 @@ const Header = styled(View)`
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  position: absolute !important;
+  position: absolute;
   top: 40px;
   left: 0;
   right: 0;
@@ -31,7 +43,7 @@ const Header = styled(View)`
   shadow-offset: 0px 2px;
   shadow-opacity: 0.1;
   shadow-radius: 4px;
-  z-index: 9999999999 !important;
+  z-index: 9999999999;
 `;
 
 const HeaderButton = styled(TouchableOpacity)`
@@ -65,7 +77,7 @@ const QuickLinksIcon = styled.TouchableOpacity<{ bg?: string }>`
   width: 96px;
   height: 96px;
   border-radius: 100%;
-  background-color: ${props => props.bg || '#18181b'};
+  background-color: ${(props) => props.bg || '#18181b'};
   justify-content: center;
   align-items: center;
   margin-bottom: 16px;
@@ -86,7 +98,7 @@ const LCIconContainer = styled(Animated.View)`
   width: 140px;
   height: 140px;
   border-radius: 90px;
-  background-color: #E8F5F1;
+  background-color: #e8f5f1;
   align-items: center;
   justify-content: center;
   margin-top: 24px;
@@ -110,37 +122,70 @@ const StatusText = styled.Text`
   margin-bottom: 8px;
 `;
 
-const NFCIcon =({ color = "#111", size = 22 })=>(
-    <Svg width={size} height={size} strokeWidth="0.9" viewBox="0 0 24 24" fill="none" color={color}>
-        <Path d="M12 19.51L12.01 19.4989" stroke="#fff" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-        <Path d="M2 8C8 3.5 16 3.5 22 8" stroke="#fff" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-        <Path d="M5 12C9 9 15 9 19 12" stroke="#fff" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-        <Path d="M8.5 15.5C10.7504 14.1 13.2498 14.0996 15.5001 15.5" stroke="#fff" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-    </Svg>
-)
-
+const NFCIcon = ({ color = '#111', size = 22 }) => (
+  <Svg
+    width={size}
+    height={size}
+    strokeWidth="0.9"
+    viewBox="0 0 24 24"
+    fill="none"
+    color={color}
+  >
+    <Path
+      d="M12 19.51L12.01 19.4989"
+      stroke="#fff"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M2 8C8 3.5 16 3.5 22 8"
+      stroke="#fff"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M5 12C9 9 15 9 19 12"
+      stroke="#fff"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M8.5 15.5C10.7504 14.1 13.2498 14.0996 15.5001 15.5"
+      stroke="#fff"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
 
 interface PropT {
   mode: 'send' | 'receive';
-  amount?: number; currency?: FPCurrency;
-  myWallet?: { accountName: string; 
-    accountNumber: string; 
-    bankCode: string; 
-    bankName: string 
+  amount?: number;
+  currency?: FPCurrency;
+  myWallet?: {
+    accountName: string;
+    accountNumber: string;
+    bankCode: string;
+    bankName: string;
   };
   onDone: () => void;
-  onSuccess?: (tx: FPTransaction) => void; onError?: (err: FPError) => void;
+  onSuccess?: (tx: FPTransaction) => void;
+  onError?: (err: FPError) => void;
 }
 
 type Phase = 'idle' | 'active' | 'success' | 'error';
 
 export function NFCSubScreen({
-  amount, 
+  amount,
   currency,
-  onClose, 
-  onProcessTransaction, 
-  onError
- }: Props) {
+  onClose,
+  onProcessTransaction,
+  onError,
+}: Props) {
   const [phase, setPhase] = useState<Phase>('idle');
   const [msg, setMsg] = useState('');
   const iconScale = useRef(new Animated.Value(1)).current;
@@ -159,23 +204,23 @@ export function NFCSubScreen({
   // };
 
   const sendMoney = async (wallet: any) => {
-    
     console.log('NFC details:', wallet);
     onProcessTransaction?.(wallet as any);
-  }
-
+  };
 
-  const tapToSend = async () => {
+  const tapToScan = async () => {
     setPhase('active');
     try {
-      await NfcManager.start();
+      // await NfcManager.start();
       await NfcManager.requestTechnology(NfcTech.Ndef);
       const tag = await NfcManager.getTag();
-      if (!tag?.ndefMessage?.[0]?.payload) throw new Error('No wallet data on tag');
+      if (!tag?.ndefMessage?.[0]?.payload)
+        throw new Error('No wallet data on tag');
       const payload = new Uint8Array(tag.ndefMessage[0].payload);
       const text = Ndef.text.decodePayload(payload);
       const wallet = JSON.parse(text);
-      setPhase('success'); setMsg('NFC scanned!');
+      setPhase('success');
+      setMsg('NFC scanned!');
       Alert.alert(
         'NFC Scanned',
         `Would you love to continue with this transaction?`,
@@ -190,13 +235,17 @@ export function NFCSubScreen({
           },
         ]
       );
-      
-    } catch (e: any) { 
-      setPhase('error'); 
-      setMsg(e.message); 
-      onError?.({ code: 'NFC_ERROR', message: e.message }); 
+    } catch (e: any) {
+      if (e.message?.toLowerCase().includes('cancel')) {
+        setPhase('idle');
+        return;
+      }
+      setPhase('error');
+      setMsg(e.message);
+      onError?.({ code: 'NFC_ERROR', message: e.message });
+    } finally {
+      NfcManager.cancelTechnologyRequest();
     }
-    finally { NfcManager.cancelTechnologyRequest(); }
   };
 
   useEffect(() => {
@@ -204,99 +253,126 @@ export function NFCSubScreen({
       .then(() => console.log('NFC Manager started'))
       .catch((err: any) => {
         console.log('NFC start error:', err);
-        setPhase('error'); 
+        setPhase('error');
         setMsg(err.message);
         onError?.({ code: 'NFC_ERROR', message: err.message });
       });
-      
+
     return () => {
       NfcManager.cancelTechnologyRequest().catch(() => {});
     };
   }, []);
-  
-  return (
-    
 
+  return (
     <Container>
-      
       {/* Header */}
-        <Header>
-          <HeaderButton onPress={onClose}>
-            <Ionicons name="close" size={24} />
+      <Header>
+        <HeaderButton onPress={onClose}>
+          <Ionicons name="close" size={24} />
+        </HeaderButton>
+
+        <HeaderCenter>
+          <Text style={{ fontWeight: 'bold', fontSize: 16, color: '#FFF' }}>
+            NFC
+          </Text>
+          <Text style={{ fontSize: 10, color: '#FFF' }}>Transfer</Text>
+        </HeaderCenter>
+
+        <HeaderRight>
+          <HeaderButton>
+            <Ionicons name="image-outline" size={22} />
           </HeaderButton>
-          
-          <HeaderCenter>
-            <Text style={{ fontWeight: 'bold', fontSize: 16, color:'#FFF' }}>NFC</Text>
-            <Text style={{ fontSize: 10, color: '#FFF' }}>Transfer</Text>
-          </HeaderCenter>
-          
-          <HeaderRight>
-            <HeaderButton>
-              <Ionicons name="image-outline" size={22} />
-            </HeaderButton>
-            <HeaderButton>
-              <Ionicons name="settings-outline" size={22} />
-            </HeaderButton>
-          </HeaderRight>
-        </Header>
+          <HeaderButton>
+            <Ionicons name="settings-outline" size={22} />
+          </HeaderButton>
+        </HeaderRight>
+      </Header>
+
+      <QuickLinksContainer>
+        {phase === 'idle' ? (
+          <>
+            <QuickLinksIcon
+              onPress={() => {
+                tapToScan();
+              }}
+            >
+              <NFCIcon size={40} color="#FFF" />
+            </QuickLinksIcon>
+            <QuickLinksText>Start NFC Scan</QuickLinksText>
+          </>
+        ) : phase === 'active' ? (
+          <LCAnimationContainer>
+            <PulseAnimation />
+            <LCIconContainer
+              style={{ transform: [{ scale: iconScale }], marginTop: 64 }}
+            >
+              <LCIcon>📡</LCIcon>
+            </LCIconContainer>
 
-        <QuickLinksContainer>
-          {phase === 'idle' ? (
-            <>
-              <QuickLinksIcon onPress={()=>{tapToSend()}}>
-                <NFCIcon size={40} color="#FFF" />
-              </QuickLinksIcon>
-              <QuickLinksText>Start NFC Scan</QuickLinksText> 
-            </>
-          )
-           : phase === 'active' ? (
-            <LCAnimationContainer>
-              <PulseAnimation />
-              <LCIconContainer style={{ transform: [{ scale: iconScale }], marginTop: 64 }}>
-                  <LCIcon>📡</LCIcon>
-              </LCIconContainer>
-    
-              <StatusTextContainer>
-                  <StatusText>
-                  Searching for nearby users
-                  </StatusText>
-                  {/* <StatusSubText>Hold devices back-to-back</StatusSubText> */}
-              </StatusTextContainer>
-            </LCAnimationContainer>
-           )
-           : phase === 'success' ? (
-            <>
-              <QuickLinksIcon bg="#057e32" onPress={()=>{tapToSend()}}>
-                <Ionicons name="checkmark" size={40} color="#FFF" />
-              </QuickLinksIcon>
-              <QuickLinksText>NFC Scanned</QuickLinksText> 
-            </>
-           )
-           : (
-            <>
-              <View style={[st.tapZone, st.tapError]}>
-                <Text style={st.tapEmoji}>{'ERR'}</Text>
-                <Text style={st.tapLabel}>
-                  {msg}
-                </Text>
-              </View>
-              <FPButton label="Try Again" onPress={() => setPhase('idle')} style={{ marginTop: S.md }} />
-            </>
-           )}
-          
-        </QuickLinksContainer>
+            <StatusTextContainer>
+              <StatusText>Searching for nearby users</StatusText>
+              {/* <StatusSubText>Hold devices back-to-back</StatusSubText> */}
+            </StatusTextContainer>
+          </LCAnimationContainer>
+        ) : phase === 'success' ? (
+          <>
+            <QuickLinksIcon
+              bg="#057e32"
+              onPress={() => {
+                tapToScan();
+              }}
+            >
+              <Ionicons name="checkmark" size={40} color="#FFF" />
+            </QuickLinksIcon>
+            <QuickLinksText>NFC Scanned</QuickLinksText>
+          </>
+        ) : (
+          <>
+            <View style={[st.tapZone, st.tapError]}>
+              <Text style={st.tapEmoji}>{'ERR'}</Text>
+              <Text style={st.tapLabel}>{msg}</Text>
+            </View>
+            <FPButton
+              label="Try Again"
+              onPress={() => setPhase('idle')}
+              style={{ marginTop: S.md }}
+            />
+          </>
+        )}
+      </QuickLinksContainer>
     </Container>
   );
 }
 
 const st = StyleSheet.create({
   wrap: { flex: 1, padding: S.lg },
-  back: { color: C.brand, fontSize: F.md, fontWeight: '600', marginBottom: S.md },
-  title: { fontSize: F.xl, fontWeight: '800', color: C.ink, marginBottom: S.lg },
-  tapZone: { height: 180, backgroundColor: C.ink, borderRadius: R.xl, justifyContent: 'center', alignItems: 'center' },
+  back: {
+    color: C.brand,
+    fontSize: F.md,
+    fontWeight: '600',
+    marginBottom: S.md,
+  },
+  title: {
+    fontSize: F.xl,
+    fontWeight: '800',
+    color: C.ink,
+    marginBottom: S.lg,
+  },
+  tapZone: {
+    height: 180,
+    backgroundColor: C.ink,
+    borderRadius: R.xl,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   tapActive: { backgroundColor: C.brand },
   tapSuccess: { backgroundColor: C.green },
   tapError: { backgroundColor: C.red },
-  tapEmoji: { fontSize: 40, color: C.white, fontWeight: '800', marginBottom: S.sm },
+  tapEmoji: {
+    fontSize: 40,
+    color: C.white,
+    fontWeight: '800',
+    marginBottom: S.sm,
+  },
   tapLabel: { color: C.white, fontSize: F.lg, fontWeight: '700' },
 });