react-native-fpay 0.2.9 → 0.3.2

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

@@ -0,0 +1,302 @@
+import React, { useEffect, useRef, useState } from 'react';
+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 styled from 'styled-components/native';
+import Svg, { Path } from 'react-native-svg';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { PulseAnimation } from '../../../components/PulseAnimation';
+
+// Styled Components
+const Container = styled(View)`
+  flex: 1;
+  background-color: #000000;
+`;
+
+const Header = styled(View)`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  position: absolute !important;
+  top: 40px;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  elevation: 4;
+  shadow-color: #000;
+  shadow-offset: 0px 2px;
+  shadow-opacity: 0.1;
+  shadow-radius: 4px;
+  z-index: 9999999999 !important;
+`;
+
+const HeaderButton = styled(TouchableOpacity)`
+  padding: 8px;
+  background-color: #fff;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+`;
+
+const HeaderCenter = styled(View)`
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+`;
+
+const HeaderRight = styled(View)`
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+`;
+
+const QuickLinksContainer = styled.View`
+  align-items: center;
+  margin-top: 250px;
+`;
+
+const QuickLinksIcon = styled.TouchableOpacity<{ bg?: string }>`
+  width: 96px;
+  height: 96px;
+  border-radius: 100%;
+  background-color: ${props => props.bg || '#18181b'};
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 16px;
+`;
+
+const QuickLinksText = styled.Text`
+  color: #9ca3af;
+  font-size: 18px;
+`;
+
+const LCAnimationContainer = styled.View`
+  align-items: center;
+  justify-content: center;
+  margin-top: 40%;
+`;
+
+const LCIconContainer = styled(Animated.View)`
+  width: 140px;
+  height: 140px;
+  border-radius: 90px;
+  background-color: #E8F5F1;
+  align-items: center;
+  justify-content: center;
+  margin-top: 24px;
+  margin-bottom: 24px;
+`;
+
+const LCIcon = styled.Text`
+  font-size: 80px;
+`;
+
+const StatusTextContainer = styled.View`
+  align-items: center;
+  margin-bottom: 8px;
+`;
+
+const StatusText = styled.Text`
+  font-size: 18px;
+  font-weight: 600;
+  color: #333333;
+  text-align: center;
+  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>
+)
+
+
+interface PropT {
+  mode: 'send' | 'receive';
+  amount?: number; currency?: FPCurrency;
+  myWallet?: { accountName: string; 
+    accountNumber: string; 
+    bankCode: string; 
+    bankName: string 
+  };
+  onDone: () => void;
+  onSuccess?: (tx: FPTransaction) => void; onError?: (err: FPError) => void;
+}
+
+type Phase = 'idle' | 'active' | 'success' | 'error';
+
+export function NFCSubScreen({
+  amount, 
+  currency,
+  onClose, 
+  onProcessTransaction, 
+  onError
+ }: Props) {
+  const [phase, setPhase] = useState<Phase>('idle');
+  const [msg, setMsg] = useState('');
+  const iconScale = useRef(new Animated.Value(1)).current;
+
+  // const tapToReceive = async () => {
+  //   if (!myWallet) return;
+  //   setPhase('active');
+  //   try {
+  //     await NfcManager.start();
+  //     await NfcManager.requestTechnology(NfcTech.Ndef);
+  //     const bytes = Ndef.encodeMessage([Ndef.textRecord(JSON.stringify(myWallet))]);
+  //     if (bytes) await NfcManager.ndefHandler.writeNdefMessage(bytes);
+  //     setPhase('success'); setMsg('Your payment details are now on the NFC tag.');
+  //   } catch (e: any) { setPhase('error'); setMsg(e.message); onError?.({ code: 'NFC_ERROR', message: e.message }); }
+  //   finally { NfcManager.cancelTechnologyRequest(); }
+  // };
+
+  const sendMoney = async (wallet: any) => {
+    
+    console.log('NFC details:', wallet);
+    onProcessTransaction?.(wallet as any);
+  }
+
+
+  const tapToSend = async () => {
+    setPhase('active');
+    try {
+      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');
+      const payload = new Uint8Array(tag.ndefMessage[0].payload);
+      const text = Ndef.text.decodePayload(payload);
+      const wallet = JSON.parse(text);
+      setPhase('success'); setMsg('NFC scanned!');
+      Alert.alert(
+        'NFC Scanned',
+        `Would you love to continue with this transaction?`,
+        [
+          {
+            text: 'Cancel',
+            style: 'cancel',
+          },
+          {
+            text: `Continue`,
+            onPress: () => sendMoney(wallet),
+          },
+        ]
+      );
+      
+    } catch (e: any) { 
+      setPhase('error'); 
+      setMsg(e.message); 
+      onError?.({ code: 'NFC_ERROR', message: e.message }); 
+    }
+    finally { NfcManager.cancelTechnologyRequest(); }
+  };
+
+  useEffect(() => {
+    NfcManager.start()
+      .then(() => console.log('NFC Manager started'))
+      .catch((err: any) => {
+        console.log('NFC start error:', err);
+        setPhase('error'); 
+        setMsg(err.message);
+        onError?.({ code: 'NFC_ERROR', message: err.message });
+      });
+      
+    return () => {
+      NfcManager.cancelTechnologyRequest().catch(() => {});
+    };
+  }, []);
+  
+  return (
+    
+
+    <Container>
+      
+      {/* Header */}
+        <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>
+            <HeaderButton>
+              <Ionicons name="settings-outline" size={22} />
+            </HeaderButton>
+          </HeaderRight>
+        </Header>
+
+        <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>
+    </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' },
+  tapActive: { backgroundColor: C.brand },
+  tapSuccess: { backgroundColor: C.green },
+  tapError: { backgroundColor: C.red },
+  tapEmoji: { fontSize: 40, color: C.white, fontWeight: '800', marginBottom: S.sm },
+  tapLabel: { color: C.white, fontSize: F.lg, fontWeight: '700' },
+});