react-native-fpay 0.3.5 → 0.3.7

package/src/ui/screens/styles.ts

@@ -1,5 +1,5 @@
-import { Text, TouchableOpacity } from "react-native";
-import styled from "styled-components/native";
+import { Text, TouchableOpacity } from 'react-native';
+import styled from 'styled-components/native';
 
 export const ButtonContainer = styled.View`
   width: 100%;
@@ -48,6 +48,12 @@ export const List = styled(TouchableOpacity)`
   border-bottom-color: #f9f9f9;
 `;
 
+export const ListGroup = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+`;
 
 export const ListText = styled(Text)`
   font-size: 16px;
@@ -57,7 +63,6 @@ export const ListText = styled(Text)`
   width: 95%;
 `;
 
-
 export const InputContainer = styled.View`
   padding: 0 24px;
   margin-top: 24px;
@@ -85,8 +90,15 @@ export const Label = styled.Text`
   margin-bottom: 12px;
 `;
 
+export const ErrorLabel = styled.Text`
+  color: red;
+  font-style: italic;
+  font-size: 14px;
+  margin-bottom: 12px;
+`;
+
 export const InputBox = styled.View`
-  background-color: rgba(255, 255, 255, 0.3);;
+  background-color: rgba(255, 255, 255, 0.3);
   border-radius: 16px;
   padding: 16px 20px;
   flex-direction: row;
@@ -98,4 +110,4 @@ export const StyledTextInput = styled.TextInput`
   flex: 1;
   color: #d1d5db;
   font-size: 16px;
-`;
+`;

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

@@ -86,7 +86,7 @@ const NFCIconContainer = styled(Animated.View)`
   width: 140px;
   height: 140px;
   border-radius: 90px;
-  background-color: #E8F5F1;
+  background-color: #e8f5f1;
   align-items: center;
   justify-content: center;
   margin-bottom: 24px;
@@ -174,7 +174,7 @@ const InstructionText = styled.Text`
 `;
 
 const InfoBanner = styled.View`
-  background-color: #FFF3E0;
+  background-color: #fff3e0;
   border-radius: 12px;
   padding: 16px;
   width: 100%;
@@ -191,13 +191,13 @@ const InfoIcon = styled.Text`
 const InfoText = styled.Text`
   flex: 1;
   font-size: 13px;
-  color: #F57C00;
+  color: #f57c00;
   line-height: 18px;
 `;
 
 const CancelButton = styled.TouchableOpacity`
   background-color: #ffffff;
-  border: 1.5px solid #E0E0E0;
+  border: 1.5px solid #e0e0e0;
   border-radius: 28px;
   padding: 16px;
   align-items: center;
@@ -211,7 +211,7 @@ const CancelButtonText = styled.Text`
 `;
 
 const ConnectionStatusBadge = styled.View<{ connected: boolean }>`
-  background-color: ${props => props.connected ? '#0a3d2e' : '#E0E0E0'};
+  background-color: ${(props) => (props.connected ? '#0a3d2e' : '#E0E0E0')};
   border-radius: 20px;
   padding: 8px 16px;
   margin-top: 16px;
@@ -220,10 +220,9 @@ const ConnectionStatusBadge = styled.View<{ connected: boolean }>`
 const ConnectionStatusText = styled.Text<{ connected: boolean }>`
   font-size: 12px;
   font-weight: 600;
-  color: ${props => props.connected ? '#ffffff' : '#666666'};
+  color: ${(props) => (props.connected ? '#ffffff' : '#666666')};
 `;
 
-
 // Main Component
 interface ReceiveNFCScreenProps {
   amount: number;
@@ -242,40 +241,34 @@ const Nfc: React.FC<ReceiveNFCScreenProps> = ({
   const [isConnecting, setIsConnecting] = useState(false);
   const iconScale = useRef(new Animated.Value(1)).current;
 
-
-  const writeNFC = async(userId: string, userName: string) => {
+  const writeNFC = async (userId: string, userName: string) => {
     await NfcManager.requestTechnology(NfcTech.Ndef);
     const bytes = Ndef.encodeMessage([
-      Ndef.textRecord(JSON.stringify({ userId, userName }))
+      Ndef.textRecord(JSON.stringify({ userId, userName })),
     ]);
     await NfcManager.ndefHandler.writeNdefMessage(bytes);
     await NfcManager.cancelTechnologyRequest();
-  }
+  };
 
   // Sender reads NFC tag
-  const readNFC=async() => {
+  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));
-      
+      .catch((err) => console.log('NFC start error:', err));
+
     return () => {
       NfcManager.cancelTechnologyRequest().catch(() => {});
     };
-    
   };
 
   const formatAmount = (value: number): string => {
@@ -289,7 +282,7 @@ const Nfc: React.FC<ReceiveNFCScreenProps> = ({
     // Simulate NFC detection
     setIsConnecting(true);
     Vibration.vibrate(100);
-    
+
     // In production, handle actual NFC tag detection
     setTimeout(() => {
       setIsConnecting(false);
@@ -364,7 +357,7 @@ const Nfc: React.FC<ReceiveNFCScreenProps> = ({
           {/* Instructions */}
           <InstructionCard>
             <InstructionTitle>How to receive payment</InstructionTitle>
-            
+
             <InstructionItem>
               <InstructionNumber>
                 <InstructionNumberText>1</InstructionNumberText>
@@ -408,11 +401,10 @@ const Nfc: React.FC<ReceiveNFCScreenProps> = ({
           <CancelButton onPress={onClose}>
             <CancelButtonText>Cancel</CancelButtonText>
           </CancelButton>
-        </ContentContainer>  
+        </ContentContainer>
       </ScrollContainer>
-      
     </Container>
   );
 };
 
-export default Nfc;
+export default Nfc;

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

@@ -129,7 +129,7 @@ const Dot = styled(Animated.View)<{ delay: number }>`
 `;
 
 const TimerContainer = styled.View`
-  background-color: #FFF3E0;
+  background-color: #fff3e0;
   border-radius: 20px;
   padding: 12px 20px;
   margin-bottom: 24px;
@@ -137,12 +137,12 @@ const TimerContainer = styled.View`
 
 const TimerText = styled.Text`
   font-size: 14px;
-  color: #F57C00;
+  color: #f57c00;
   font-weight: 600;
 `;
 
 const InfoBox = styled.View`
-  background-color: #E8F5F1;
+  background-color: #e8f5f1;
   border-radius: 12px;
   padding: 16px;
   width: 100%;
@@ -151,7 +151,7 @@ const InfoBox = styled.View`
 
 const InfoText = styled.Text`
   font-size: 13px;
-  color: #00A876;
+  color: #00a876;
   line-height: 20px;
   text-align: center;
 `;
@@ -194,7 +194,7 @@ const PrimaryButtonText = styled.Text`
 
 const SecondaryButton = styled.TouchableOpacity`
   background-color: #ffffff;
-  border: 1.5px solid #E0E0E0;
+  border: 1.5px solid #e0e0e0;
   border-radius: 28px;
   padding: 16px;
   align-items: center;
@@ -221,7 +221,6 @@ const FooterText = styled.Text`
   line-height: 18px;
 `;
 
-
 // Main Component
 interface ReceiveQRCodeScreenProps {
   amount: number;
@@ -291,7 +290,6 @@ const Qr: React.FC<ReceiveQRCodeScreenProps> = ({
     }
   };
 
-
   const handleRefresh = () => {
     setTimeRemaining(900);
     const paymentData = {
@@ -324,26 +322,29 @@ const Qr: React.FC<ReceiveQRCodeScreenProps> = ({
       {/* Content */}
       <ScrollContainer showsVerticalScrollIndicator={false}>
         <ContentContainer>
-
           {/* QR Code */}
           <QRContainer>
             <QRCodePlaceholder>
               {/* In production, replace with actual QR code library */}
               {/* <QRCode value={qrData} size={240} /> */}
-              {qrData && (<QRCode
-                value={qrData}
-                size={240}
-                // logo={{uri: LOGO_DATA}}
-                logoSize={60}
-                logoBackgroundColor='transparent'
-                enableLinearGradient={true}
-                logoBorderRadius={30}
-                getRef={(c) => (qrRef.current = c)}
-              />)}
+              {qrData && (
+                <QRCode
+                  value={qrData}
+                  size={240}
+                  // logo={{uri: LOGO_DATA}}
+                  logoSize={60}
+                  logoBackgroundColor="transparent"
+                  enableLinearGradient={true}
+                  logoBorderRadius={30}
+                  getRef={(c) => (qrRef.current = c)}
+                />
+              )}
             </QRCodePlaceholder>
 
             <StatusContainer>
-              <StatusText>Waiting for payment of ₦{formatAmount(amount)}</StatusText>
+              <StatusText>
+                Waiting for payment of ₦{formatAmount(amount)}
+              </StatusText>
               <AnimatedDots />
             </StatusContainer>
           </QRContainer>
@@ -388,4 +389,4 @@ const Qr: React.FC<ReceiveQRCodeScreenProps> = ({
   );
 };
 
-export default Qr;
+export default Qr;

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

@@ -5,7 +5,6 @@ import { Buffer } from 'buffer';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import type { ReceiveTransferScreenProps } from '../../../../../core/types';
 
-
 // Styled Components
 const Container = styled.View`
   flex: 1;
@@ -43,7 +42,6 @@ const HeaderTitle = styled.Text`
 
 const ScrollContainer = styled.ScrollView`
   flex: 1;
-  
 `;
 
 const ContentContainer = styled.View`
@@ -51,7 +49,7 @@ const ContentContainer = styled.View`
 `;
 
 const InfoBanner = styled.View`
-  background-color: #E8F5F1;
+  background-color: #e8f5f1;
   border-radius: 12px;
   padding: 16px;
   margin-bottom: 24px;
@@ -67,7 +65,7 @@ const InfoIcon = styled.Text`
 const InfoText = styled.Text`
   flex: 1;
   font-size: 13px;
-  color: #00A876;
+  color: #00a876;
   line-height: 20px;
 `;
 
@@ -146,7 +144,7 @@ const DetailValue = styled.Text`
 `;
 
 const CopyButton = styled.TouchableOpacity`
-  background-color: #E8F5F1;
+  background-color: #e8f5f1;
   border-radius: 20px;
   padding: 8px 16px;
   margin-left: 12px;
@@ -160,12 +158,12 @@ const CopyButtonText = styled.Text`
 
 const Divider = styled.View`
   height: 1px;
-  background-color: #F0F0F0;
+  background-color: #f0f0f0;
   margin: 4px 0;
 `;
 
 const PaymentLinkCard = styled.View`
-  background-color: #FFF3E0;
+  background-color: #fff3e0;
   border-radius: 12px;
   padding: 16px;
   margin-bottom: 24px;
@@ -174,13 +172,13 @@ const PaymentLinkCard = styled.View`
 const PaymentLinkTitle = styled.Text`
   font-size: 14px;
   font-weight: 600;
-  color: #F57C00;
+  color: #f57c00;
   margin-bottom: 8px;
 `;
 
 const PaymentLinkText = styled.Text`
   font-size: 12px;
-  color: #F57C00;
+  color: #f57c00;
   margin-bottom: 12px;
 `;
 
@@ -205,7 +203,7 @@ const LinkButtonRow = styled.View`
 const SmallButton = styled.TouchableOpacity`
   flex: 1;
   background-color: #ffffff;
-  border: 1px solid #F57C00;
+  border: 1px solid #f57c00;
   border-radius: 20px;
   padding: 10px;
   align-items: center;
@@ -214,7 +212,7 @@ const SmallButton = styled.TouchableOpacity`
 const SmallButtonText = styled.Text`
   font-size: 13px;
   font-weight: 600;
-  color: #F57C00;
+  color: #f57c00;
 `;
 
 const ButtonContainer = styled.View`
@@ -250,7 +248,7 @@ const OutlineButtonText = styled.Text`
 
 const SecondaryButton = styled.TouchableOpacity`
   background-color: #ffffff;
-  border: 1.5px solid #E0E0E0;
+  border: 1.5px solid #e0e0e0;
   border-radius: 28px;
   padding: 16px;
   align-items: center;
@@ -275,7 +273,6 @@ const FooterText = styled.Text`
 
 // Main Component
 
-
 const Transfer: React.FC<ReceiveTransferScreenProps> = ({
   amount = 0,
   description = '',
@@ -297,7 +294,7 @@ const Transfer: React.FC<ReceiveTransferScreenProps> = ({
     try {
       await Clipboard.setString(text);
       setCopiedField(fieldName);
-      
+
       // Reset copied state after 2 seconds
       setTimeout(() => {
         setCopiedField(null);
@@ -309,12 +306,13 @@ const Transfer: React.FC<ReceiveTransferScreenProps> = ({
 
   const generatePaymentLink = (): string => {
     // Generate a payment link (in production, this would be a real URL)
-    const base64 = Buffer.from(JSON.stringify({
-      account: recipient.accountNumber,
-      recipient: recipient.accountName,
-    })).toString('base64');
+    const base64 = Buffer.from(
+      JSON.stringify({
+        account: recipient.accountNumber,
+        recipient: recipient.accountName,
+      })
+    ).toString('base64');
 
-    
     return `https://tapit.app/pay/${base64}`;
   };
 
@@ -386,11 +384,13 @@ Thank you!
           </InfoBanner>
 
           {/* Amount Display */}
-          {amount > 0 && (<AmountCard>
-            <AmountLabel>Expected Amount</AmountLabel>
-            <AmountText>₦{formatAmount(amount)}</AmountText>
-            {description && <DescriptionText>{description}</DescriptionText>}
-          </AmountCard>)}
+          {amount > 0 && (
+            <AmountCard>
+              <AmountLabel>Expected Amount</AmountLabel>
+              <AmountText>₦{formatAmount(amount)}</AmountText>
+              {description && <DescriptionText>{description}</DescriptionText>}
+            </AmountCard>
+          )}
 
           {/* Account Details */}
           <SectionTitle>Send money to this account</SectionTitle>
@@ -415,7 +415,9 @@ Thank you!
               <DetailLabel>Account Name</DetailLabel>
               <DetailValueContainer>
                 <DetailValue>{recipient.accountName}</DetailValue>
-                <CopyButton onPress={() => handleCopy(recipient.accountName, 'name')}>
+                <CopyButton
+                  onPress={() => handleCopy(recipient.accountName, 'name')}
+                >
                   <CopyButtonText>
                     {copiedField === 'name' ? 'Copied!' : 'Copy'}
                   </CopyButtonText>
@@ -429,7 +431,9 @@ Thank you!
               <DetailLabel>Bank</DetailLabel>
               <DetailValueContainer>
                 <DetailValue>{recipient.bankName}</DetailValue>
-                <CopyButton onPress={() => handleCopy(recipient.bankName, 'bank')}>
+                <CopyButton
+                  onPress={() => handleCopy(recipient.bankName, 'bank')}
+                >
                   <CopyButtonText>
                     {copiedField === 'bank' ? 'Copied!' : 'Copy'}
                   </CopyButtonText>
@@ -487,7 +491,9 @@ Thank you!
 
             <OutlineButton onPress={handleCopyAll}>
               <OutlineButtonText>
-                {copiedField === 'all' ? '✓ All Details Copied' : 'Copy All Details'}
+                {copiedField === 'all'
+                  ? '✓ All Details Copied'
+                  : 'Copy All Details'}
               </OutlineButtonText>
             </OutlineButton>
 
@@ -509,4 +515,4 @@ Thank you!
   );
 };
 
-export default Transfer;
+export default Transfer;