react-native-fpay 0.2.9 → 0.3.2

package/src/ui/screens/styles.ts

@@ -0,0 +1,101 @@
+import { Text, TouchableOpacity } from "react-native";
+import styled from "styled-components/native";
+
+export const ButtonContainer = styled.View`
+  width: 100%;
+`;
+
+export const CTAButton = styled.TouchableOpacity`
+  width: 100%;
+  padding: 16px;
+  background-color: rgba(255, 255, 255, 0.15);
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  border-radius: 30px;
+  align-items: center;
+  backdrop-filter: blur(10px);
+`;
+
+export const CTAText = styled.Text`
+  color: #ffffff;
+  font-size: 17px;
+  font-weight: 600;
+`;
+
+export const HomeIndicator = styled.View`
+  width: 140px;
+  height: 5px;
+  background-color: #ffffff;
+  border-radius: 3px;
+  align-self: center;
+  margin-top: 16px;
+`;
+
+export const ContentContainer = styled.View`
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  padding: 40px 24px 60px;
+`;
+
+export const List = styled(TouchableOpacity)`
+  padding: 9px 5px;
+
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  border-bottom-width: 1px;
+  border-bottom-color: #f9f9f9;
+`;
+
+
+export const ListText = styled(Text)`
+  font-size: 16px;
+  font-weight: 200;
+  color: #1f2937;
+  padding: 3px 0px;
+  width: 95%;
+`;
+
+
+export const InputContainer = styled.View`
+  padding: 0 24px;
+  margin-top: 24px;
+`;
+
+export const AccountBox = styled.View`
+  background-color: rgba(74, 222, 128, 0.3);
+  border-radius: 16px;
+  padding: 8px 20px;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 250px;
+`;
+
+export const AccountText = styled.Text`
+  color: #d1d5db;
+  font-size: 16px;
+`;
+
+export const Label = styled.Text`
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  margin-bottom: 12px;
+`;
+
+export const InputBox = styled.View`
+  background-color: rgba(255, 255, 255, 0.3);;
+  border-radius: 16px;
+  padding: 16px 20px;
+  flex-direction: row;
+  align-items: center;
+  color: #d1d5db;
+`;
+
+export const StyledTextInput = styled.TextInput`
+  flex: 1;
+  color: #d1d5db;
+  font-size: 16px;
+`;

package/src/ui/screens/sub/receivePayment/Nfc/index.tsx

@@ -0,0 +1,418 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Animated, Easing, Vibration } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import styled from 'styled-components/native';
+import NfcManager, { Ndef, NfcTech } from 'react-native-nfc-manager';
+import { PulseAnimation } from '../../../../components/PulseAnimation';
+
+// Styled Components
+const Container = styled.View`
+  flex: 1;
+  background-color: #f5f5f5;
+  padding-bottom: 60%;
+`;
+
+const ScrollContainer = styled.ScrollView`
+  flex: 1;
+`;
+const Header = styled.View`
+  flex-direction: row;
+  align-items: center;
+  padding: 16px;
+  padding-top: 40px;
+  background-color: #ffffff;
+  border-bottom-width: 1px;
+  border-bottom-color: #e0e0e0;
+`;
+
+const BackButton = styled.TouchableOpacity`
+  padding: 8px;
+`;
+
+const BackIcon = styled.Text`
+  font-size: 24px;
+  color: #000000;
+`;
+
+const HeaderTitle = styled.Text`
+  flex: 1;
+  font-size: 18px;
+  font-weight: 600;
+  color: #000000;
+  text-align: center;
+  margin-right: 40px;
+`;
+
+const ContentContainer = styled.View`
+  flex: 1;
+  padding: 24px;
+  justify-content: center;
+  align-items: center;
+`;
+
+const AmountCard = styled.View`
+  background-color: #ffffff;
+  border-radius: 16px;
+  padding: 24px;
+  width: 100%;
+  align-items: center;
+  margin-bottom: 40px;
+  shadow-color: #000;
+  shadow-offset: 0px 2px;
+  shadow-opacity: 0.05;
+  shadow-radius: 8px;
+  elevation: 3;
+`;
+
+const AmountLabel = styled.Text`
+  font-size: 14px;
+  color: #666666;
+  margin-bottom: 8px;
+`;
+
+const AmountText = styled.Text`
+  font-size: 42px;
+  font-weight: 700;
+  color: #0a3d2e;
+`;
+
+const NFCAnimationContainer = styled.View`
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 40px;
+`;
+
+const NFCIconContainer = styled(Animated.View)`
+  width: 140px;
+  height: 140px;
+  border-radius: 90px;
+  background-color: #E8F5F1;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 24px;
+`;
+
+const NFCIcon = styled.Text`
+  font-size: 80px;
+`;
+
+const PulseRing = styled(Animated.View)<{ delay?: number }>`
+  position: absolute;
+  width: 200px;
+  height: 200px;
+  border-radius: 100%;
+  border-width: 2px;
+  border-color: #0a3d2e;
+`;
+
+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 StatusSubText = styled.Text`
+  font-size: 14px;
+  color: #666666;
+  text-align: center;
+`;
+
+const InstructionCard = styled.View`
+  background-color: #ffffff;
+  border-radius: 16px;
+  padding: 20px;
+  width: 100%;
+  margin-bottom: 24px;
+  shadow-color: #000;
+  shadow-offset: 0px 2px;
+  shadow-opacity: 0.05;
+  shadow-radius: 8px;
+  elevation: 3;
+`;
+
+const InstructionTitle = styled.Text`
+  font-size: 15px;
+  font-weight: 600;
+  color: #333333;
+  margin-bottom: 12px;
+`;
+
+const InstructionItem = styled.View`
+  flex-direction: row;
+  align-items: flex-start;
+  margin-bottom: 10px;
+`;
+
+const InstructionNumber = styled.View`
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  background-color: #0a3d2e;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+`;
+
+const InstructionNumberText = styled.Text`
+  font-size: 12px;
+  font-weight: 600;
+  color: #ffffff;
+`;
+
+const InstructionText = styled.Text`
+  flex: 1;
+  font-size: 14px;
+  color: #666666;
+  line-height: 20px;
+`;
+
+const InfoBanner = styled.View`
+  background-color: #FFF3E0;
+  border-radius: 12px;
+  padding: 16px;
+  width: 100%;
+  margin-bottom: 24px;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const InfoIcon = styled.Text`
+  font-size: 20px;
+  margin-right: 12px;
+`;
+
+const InfoText = styled.Text`
+  flex: 1;
+  font-size: 13px;
+  color: #F57C00;
+  line-height: 18px;
+`;
+
+const CancelButton = styled.TouchableOpacity`
+  background-color: #ffffff;
+  border: 1.5px solid #E0E0E0;
+  border-radius: 28px;
+  padding: 16px;
+  align-items: center;
+  width: 100%;
+`;
+
+const CancelButtonText = styled.Text`
+  font-size: 15px;
+  font-weight: 600;
+  color: #666666;
+`;
+
+const ConnectionStatusBadge = styled.View<{ connected: boolean }>`
+  background-color: ${props => props.connected ? '#0a3d2e' : '#E0E0E0'};
+  border-radius: 20px;
+  padding: 8px 16px;
+  margin-top: 16px;
+`;
+
+const ConnectionStatusText = styled.Text<{ connected: boolean }>`
+  font-size: 12px;
+  font-weight: 600;
+  color: ${props => props.connected ? '#ffffff' : '#666666'};
+`;
+
+
+// Main Component
+interface ReceiveNFCScreenProps {
+  amount: number;
+  description?: string;
+  onClose?: () => void;
+  onPaymentReceived?: (data: any) => void;
+}
+
+const Nfc: React.FC<ReceiveNFCScreenProps> = ({
+  amount = 5000,
+  description,
+  onClose,
+  onPaymentReceived,
+}) => {
+  const [nfcEnabled, setNfcEnabled] = useState(true);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const iconScale = useRef(new Animated.Value(1)).current;
+
+
+  const writeNFC = async(userId: string, userName: string) => {
+    await NfcManager.requestTechnology(NfcTech.Ndef);
+    const bytes = Ndef.encodeMessage([
+      Ndef.textRecord(JSON.stringify({ userId, userName }))
+    ]);
+    await NfcManager.ndefHandler.writeNdefMessage(bytes);
+    await NfcManager.cancelTechnologyRequest();
+  }
+
+  // Sender reads NFC tag
+  const readNFC=async() => {
+    await NfcManager.requestTechnology(NfcTech.Ndef);
+    const tag: any = await NfcManager.getTag();
+    const paymentInfo = JSON.parse(tag?.ndefMessage[0].payload);
+    await NfcManager.cancelTechnologyRequest();
+    return paymentInfo;
+  }
+
+  
+
+
+
+  const checkNFCAvailability = () => {
+    // In production, check actual NFC status
+    // For now, simulate it's available
+    NfcManager.start()
+      .then(() => setNfcEnabled(true))
+      .catch(err => console.log('NFC start error:', err));
+      
+    return () => {
+      NfcManager.cancelTechnologyRequest().catch(() => {});
+    };
+    
+  };
+
+  const formatAmount = (value: number): string => {
+    return value.toLocaleString('en-NG', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+  };
+
+  const handleNFCDetection = () => {
+    // Simulate NFC detection
+    setIsConnecting(true);
+    Vibration.vibrate(100);
+    
+    // In production, handle actual NFC tag detection
+    setTimeout(() => {
+      setIsConnecting(false);
+      // Call onPaymentReceived callback
+    }, 2000);
+  };
+
+  useEffect(() => {
+    // Simulate NFC availability check
+    // In production, use actual NFC library to check availability
+    checkNFCAvailability();
+
+    // Icon breathing animation
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(iconScale, {
+          toValue: 1.1,
+          duration: 1500,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(iconScale, {
+          toValue: 1,
+          duration: 1500,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, []);
+
+  return (
+    <Container>
+      {/* Header */}
+      <Header>
+        <BackButton onPress={onClose}>
+          <Ionicons name="close" size={24} />
+        </BackButton>
+        <HeaderTitle>Receive via NFC</HeaderTitle>
+      </Header>
+
+      {/* Content */}
+      <ScrollContainer showsVerticalScrollIndicator={false}>
+        <ContentContainer>
+          {/* Amount Display */}
+          <AmountCard>
+            <AmountLabel>Amount to Receive</AmountLabel>
+            <AmountText>₦{formatAmount(amount)}</AmountText>
+          </AmountCard>
+
+          {/* NFC Animation */}
+          <NFCAnimationContainer>
+            <PulseAnimation />
+            <NFCIconContainer style={{ transform: [{ scale: iconScale }] }}>
+              <NFCIcon>📡</NFCIcon>
+            </NFCIconContainer>
+
+            <StatusTextContainer>
+              <StatusText>
+                {isConnecting ? 'Connecting...' : 'Ready to Receive'}
+              </StatusText>
+              <StatusSubText>Hold devices back-to-back</StatusSubText>
+            </StatusTextContainer>
+
+            <ConnectionStatusBadge connected={nfcEnabled}>
+              <ConnectionStatusText connected={nfcEnabled}>
+                {nfcEnabled ? 'NFC Enabled' : 'NFC Disabled'}
+              </ConnectionStatusText>
+            </ConnectionStatusBadge>
+          </NFCAnimationContainer>
+
+          {/* Instructions */}
+          <InstructionCard>
+            <InstructionTitle>How to receive payment</InstructionTitle>
+            
+            <InstructionItem>
+              <InstructionNumber>
+                <InstructionNumberText>1</InstructionNumberText>
+              </InstructionNumber>
+              <InstructionText>
+                Ask the payer to open their payment app and select "Pay via NFC"
+              </InstructionText>
+            </InstructionItem>
+
+            <InstructionItem>
+              <InstructionNumber>
+                <InstructionNumberText>2</InstructionNumberText>
+              </InstructionNumber>
+              <InstructionText>
+                Hold the back of both phones together
+              </InstructionText>
+            </InstructionItem>
+
+            <InstructionItem>
+              <InstructionNumber>
+                <InstructionNumberText>3</InstructionNumberText>
+              </InstructionNumber>
+              <InstructionText>
+                Keep devices steady until you feel a vibration
+              </InstructionText>
+            </InstructionItem>
+          </InstructionCard>
+
+          {/* Info Banner */}
+          {!nfcEnabled && (
+            <InfoBanner>
+              <InfoIcon>⚠️</InfoIcon>
+              <InfoText>
+                NFC is disabled on your device. Please enable it in your phone
+                settings to receive payments.
+              </InfoText>
+            </InfoBanner>
+          )}
+
+          {/* Cancel Button */}
+          <CancelButton onPress={onClose}>
+            <CancelButtonText>Cancel</CancelButtonText>
+          </CancelButton>
+        </ContentContainer>  
+      </ScrollContainer>
+      
+    </Container>
+  );
+};
+
+export default Nfc;