react-native-fpay 0.2.9 → 0.3.2

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

@@ -0,0 +1,512 @@
+import React, { useState } from 'react';
+import { Share, Clipboard, Alert } from 'react-native';
+import styled from 'styled-components/native';
+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;
+  background-color: #f5f5f5;
+  padding-bottom: 60%;
+`;
+
+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 ScrollContainer = styled.ScrollView`
+  flex: 1;
+  
+`;
+
+const ContentContainer = styled.View`
+  padding: 24px;
+`;
+
+const InfoBanner = styled.View`
+  background-color: #E8F5F1;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 24px;
+  flex-direction: row;
+  align-items: flex-start;
+`;
+
+const InfoIcon = styled.Text`
+  font-size: 20px;
+  margin-right: 12px;
+`;
+
+const InfoText = styled.Text`
+  flex: 1;
+  font-size: 13px;
+  color: #00A876;
+  line-height: 20px;
+`;
+
+const AmountCard = styled.View`
+  background-color: #ffffff;
+  border-radius: 16px;
+  padding: 24px;
+  align-items: center;
+  margin-bottom: 24px;
+  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;
+  margin-bottom: 8px;
+`;
+
+const DescriptionText = styled.Text`
+  font-size: 14px;
+  color: #999999;
+  font-style: italic;
+`;
+
+const SectionTitle = styled.Text`
+  font-size: 15px;
+  font-weight: 600;
+  color: #333333;
+  margin-bottom: 16px;
+`;
+
+const DetailsCard = styled.View`
+  background-color: #ffffff;
+  border-radius: 16px;
+  padding: 20px;
+  margin-bottom: 24px;
+  shadow-color: #000;
+  shadow-offset: 0px 2px;
+  shadow-opacity: 0.05;
+  shadow-radius: 8px;
+  elevation: 3;
+`;
+
+const DetailItem = styled.View`
+  margin-bottom: 20px;
+`;
+
+const DetailLabel = styled.Text`
+  font-size: 13px;
+  color: #999999;
+  margin-bottom: 8px;
+`;
+
+const DetailValueContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const DetailValue = styled.Text`
+  font-size: 16px;
+  font-weight: 600;
+  color: #333333;
+  flex: 1;
+`;
+
+const CopyButton = styled.TouchableOpacity`
+  background-color: #E8F5F1;
+  border-radius: 20px;
+  padding: 8px 16px;
+  margin-left: 12px;
+`;
+
+const CopyButtonText = styled.Text`
+  font-size: 13px;
+  font-weight: 600;
+  color: #0a3d2e;
+`;
+
+const Divider = styled.View`
+  height: 1px;
+  background-color: #F0F0F0;
+  margin: 4px 0;
+`;
+
+const PaymentLinkCard = styled.View`
+  background-color: #FFF3E0;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 24px;
+`;
+
+const PaymentLinkTitle = styled.Text`
+  font-size: 14px;
+  font-weight: 600;
+  color: #F57C00;
+  margin-bottom: 8px;
+`;
+
+const PaymentLinkText = styled.Text`
+  font-size: 12px;
+  color: #F57C00;
+  margin-bottom: 12px;
+`;
+
+const PaymentLinkContainer = styled.View`
+  background-color: #ffffff;
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 12px;
+`;
+
+const PaymentLinkUrl = styled.Text`
+  font-size: 12px;
+  color: #666666;
+  font-family: monospace;
+`;
+
+const LinkButtonRow = styled.View`
+  flex-direction: row;
+  gap: 8px;
+`;
+
+const SmallButton = styled.TouchableOpacity`
+  flex: 1;
+  background-color: #ffffff;
+  border: 1px solid #F57C00;
+  border-radius: 20px;
+  padding: 10px;
+  align-items: center;
+`;
+
+const SmallButtonText = styled.Text`
+  font-size: 13px;
+  font-weight: 600;
+  color: #F57C00;
+`;
+
+const ButtonContainer = styled.View`
+  gap: 12px;
+`;
+
+const PrimaryButton = styled.TouchableOpacity`
+  background-color: #0a3d2e;
+  border-radius: 28px;
+  padding: 16px;
+  align-items: center;
+`;
+
+const PrimaryButtonText = styled.Text`
+  font-size: 15px;
+  font-weight: 600;
+  color: #ffffff;
+`;
+
+const OutlineButton = styled.TouchableOpacity`
+  background-color: #ffffff;
+  border: 1.5px solid #0a3d2e;
+  border-radius: 28px;
+  padding: 16px;
+  align-items: center;
+`;
+
+const OutlineButtonText = styled.Text`
+  font-size: 15px;
+  font-weight: 600;
+  color: #0a3d2e;
+`;
+
+const SecondaryButton = styled.TouchableOpacity`
+  background-color: #ffffff;
+  border: 1.5px solid #E0E0E0;
+  border-radius: 28px;
+  padding: 16px;
+  align-items: center;
+`;
+
+const SecondaryButtonText = styled.Text`
+  font-size: 15px;
+  font-weight: 600;
+  color: #666666;
+`;
+
+const Footer = styled.View`
+  padding: 16px 24px 24px;
+`;
+
+const FooterText = styled.Text`
+  font-size: 12px;
+  color: #999999;
+  text-align: center;
+  line-height: 18px;
+`;
+
+// Main Component
+
+
+const Transfer: React.FC<ReceiveTransferScreenProps> = ({
+  amount = 0,
+  description = '',
+  user,
+  recipient,
+  onClose,
+  onPaymentReceived,
+}) => {
+  const [copiedField, setCopiedField] = useState<string | null>(null);
+
+  const formatAmount = (value: number): string => {
+    return value.toLocaleString('en-NG', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+  };
+
+  const handleCopy = async (text: string, fieldName: string) => {
+    try {
+      await Clipboard.setString(text);
+      setCopiedField(fieldName);
+      
+      // Reset copied state after 2 seconds
+      setTimeout(() => {
+        setCopiedField(null);
+      }, 2000);
+    } catch (error) {
+      console.error('Failed to copy:', error);
+    }
+  };
+
+  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');
+
+    
+    return `https://tapit.app/pay/${base64}`;
+  };
+
+  const handleShareDetails = async () => {
+    //Please send ₦${formatAmount(amount)} to:
+    const message = `
+
+
+Account Number: ${recipient.accountNumber}
+Account Name: ${recipient.accountName}
+Bank: ${recipient.bankName}
+${description ? `Payment for: ${description}` : ''}
+
+Thank you!
+    `.trim();
+
+    try {
+      await Share.share({
+        message,
+        title: 'Payment Details',
+      });
+    } catch (error) {
+      console.error('Error sharing:', error);
+    }
+  };
+
+  const handleShareLink = async () => {
+    const link = generatePaymentLink();
+    try {
+      await Share.share({
+        message: `Pay send money via this link: ${link}`,
+        title: 'Payment Link',
+      });
+    } catch (error) {
+      console.error('Error sharing link:', error);
+    }
+  };
+
+  const handleCopyLink = async () => {
+    const link = generatePaymentLink();
+    await handleCopy(link, 'link');
+  };
+
+  const handleCopyAll = async () => {
+    const allDetails = `Account: ${recipient?.accountNumber}\nName: ${recipient?.accountName}\nBank: ${recipient?.bankName}}`; //\nAmount: ₦${formatAmount(amount)
+    await handleCopy(allDetails, 'all');
+  };
+
+  return (
+    <Container>
+      {/* Header */}
+      <Header>
+        <BackButton onPress={onClose}>
+          <Ionicons name="close" size={24} />
+        </BackButton>
+        <HeaderTitle>Receive via Transfer</HeaderTitle>
+      </Header>
+
+      {/* Content */}
+      <ScrollContainer showsVerticalScrollIndicator={false}>
+        <ContentContainer>
+          {/* Info Banner */}
+          <InfoBanner>
+            <InfoIcon>ℹ️</InfoIcon>
+            <InfoText>
+              Share your account details below with the payer. You'll be
+              notified when the payment is received.
+            </InfoText>
+          </InfoBanner>
+
+          {/* Amount Display */}
+          {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>
+          <DetailsCard>
+            <DetailItem>
+              <DetailLabel>Account Number</DetailLabel>
+              <DetailValueContainer>
+                <DetailValue>{recipient.accountNumber}</DetailValue>
+                <CopyButton
+                  onPress={() => handleCopy(recipient.accountNumber, 'account')}
+                >
+                  <CopyButtonText>
+                    {copiedField === 'account' ? 'Copied!' : 'Copy'}
+                  </CopyButtonText>
+                </CopyButton>
+              </DetailValueContainer>
+            </DetailItem>
+
+            <Divider />
+
+            <DetailItem>
+              <DetailLabel>Account Name</DetailLabel>
+              <DetailValueContainer>
+                <DetailValue>{recipient.accountName}</DetailValue>
+                <CopyButton onPress={() => handleCopy(recipient.accountName, 'name')}>
+                  <CopyButtonText>
+                    {copiedField === 'name' ? 'Copied!' : 'Copy'}
+                  </CopyButtonText>
+                </CopyButton>
+              </DetailValueContainer>
+            </DetailItem>
+
+            <Divider />
+
+            <DetailItem>
+              <DetailLabel>Bank</DetailLabel>
+              <DetailValueContainer>
+                <DetailValue>{recipient.bankName}</DetailValue>
+                <CopyButton onPress={() => handleCopy(recipient.bankName, 'bank')}>
+                  <CopyButtonText>
+                    {copiedField === 'bank' ? 'Copied!' : 'Copy'}
+                  </CopyButtonText>
+                </CopyButton>
+              </DetailValueContainer>
+            </DetailItem>
+
+            <Divider />
+
+            {amount > 0 && (
+              <DetailItem style={{ marginBottom: 0 }}>
+                <DetailLabel>Amount</DetailLabel>
+                <DetailValueContainer>
+                  <DetailValue>₦{formatAmount(amount)}</DetailValue>
+                  <CopyButton
+                    onPress={() => handleCopy(amount.toString(), 'amount')}
+                  >
+                    <CopyButtonText>
+                      {copiedField === 'amount' ? 'Copied!' : 'Copy'}
+                    </CopyButtonText>
+                  </CopyButton>
+                </DetailValueContainer>
+              </DetailItem>
+            )}
+          </DetailsCard>
+
+          {/* Payment Link */}
+          <PaymentLinkCard>
+            <PaymentLinkTitle>📎 Quick Payment Link</PaymentLinkTitle>
+            <PaymentLinkText>
+              Share this link with anyone to receive payment instantly
+            </PaymentLinkText>
+            <PaymentLinkContainer>
+              <PaymentLinkUrl numberOfLines={1} ellipsizeMode="middle">
+                {generatePaymentLink()}
+              </PaymentLinkUrl>
+            </PaymentLinkContainer>
+            <LinkButtonRow>
+              <SmallButton onPress={handleCopyLink}>
+                <SmallButtonText>
+                  {copiedField === 'link' ? '✓ Copied' : 'Copy Link'}
+                </SmallButtonText>
+              </SmallButton>
+              <SmallButton onPress={handleShareLink}>
+                <SmallButtonText>Share Link</SmallButtonText>
+              </SmallButton>
+            </LinkButtonRow>
+          </PaymentLinkCard>
+
+          {/* Action Buttons */}
+          <ButtonContainer>
+            <PrimaryButton onPress={handleShareDetails}>
+              <PrimaryButtonText>Share All Details</PrimaryButtonText>
+            </PrimaryButton>
+
+            <OutlineButton onPress={handleCopyAll}>
+              <OutlineButtonText>
+                {copiedField === 'all' ? '✓ All Details Copied' : 'Copy All Details'}
+              </OutlineButtonText>
+            </OutlineButton>
+
+            <SecondaryButton onPress={onClose}>
+              <SecondaryButtonText>Done</SecondaryButtonText>
+            </SecondaryButton>
+          </ButtonContainer>
+        </ContentContainer>
+
+        {/* Footer */}
+        <Footer>
+          <FooterText>
+            You will receive a notification once the payment is confirmed in
+            your account. Please allow 1-5 minutes for bank transfers.
+          </FooterText>
+        </Footer>
+      </ScrollContainer>
+    </Container>
+  );
+};
+
+export default Transfer;

package/src/ui/screens/sub/{BluetoothSubScreen.tsx → sendPayment/BluetoothSubScreen.tsx}

@@ -17,15 +17,15 @@ import styled from 'styled-components/native';
 import Svg, { Path } from 'react-native-svg';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 
-import { transferAPI } from '../../../core/api';
-import { FPButton } from '../../components/FPButton';
-import { C, R, S, F, shadow } from '../../theme';
-import type { FPCurrency, FPError, FPTransaction, FintechDevice } from '../../../core/types';
+import { transferAPI } from '../../../../core/api';
+import { FPButton } from '../../../components/FPButton';
+import { C, R, S, F, shadow } from '../../../theme';
+import type { FPCurrency, FPError, FPSendPaymentRequest, FPTransaction, FintechDevice, Props } from '../../../../core/types';
 
-import { FPEngine } from '../../../engine/FPEngine';
+import { FPEngine } from '../../../../engine/FPEngine';
 
-import { PulseAnimation } from '../../components/PulseAnimation';
-import InLoading from '../../components/LoadingAnimation/InLoading';
+import { PulseAnimation } from '../../../components/PulseAnimation';
+import InLoading from '../../../components/LoadingAnimation/InLoading';
 
 
 const Container = styled(View)`
@@ -195,29 +195,17 @@ const PHASE_LABEL: Record<Phase, string> = {
   error:        'Something went wrong',
 };
 
-interface Props {
-  mode: 'send' | 'receive';
-  amount: number;
-  currency: FPCurrency;
-  onDone: () => void;
-  onSuccess?: (tx: FPTransaction) => void;
-  onError?: (err: FPError) => void;
-}
-
 export function BluetoothSubScreen({
-  mode, 
   amount, 
   currency,
-  onDone, 
-  onSuccess, 
+  onClose, 
+  onProcessTransaction, 
   onError,
 }: Props) {
   const [devices, setDevices] = useState<FintechDevice[]>([]);
   const [scanning, setScanning] = useState(false);
   const [status, setStatus] = useState('Ready to scan');
   const [currentDevice, setCurrentDevice] = useState<FintechDevice | null>(null);
-
-  
   
   // ── 1. Scan ───────────────────────────────────────────────
 
@@ -263,14 +251,14 @@ export function BluetoothSubScreen({
         },
         {
           text: `Continue`,
-          onPress: () => initiatePayment(device, 50),
+          onPress: () => initiatePayment(device),
         },
       ]
     );
   };
   
 
-  const initiatePayment = async (device: FintechDevice, amount: number) => {
+  const initiatePayment = async (device: FintechDevice) => {
     try {
       setCurrentDevice(device);
       // Connect to the device
@@ -281,8 +269,10 @@ export function BluetoothSubScreen({
       const request: any = {
         amount,
         currency,
-        senderId:   user?.userId ?? user?.accountNumber ?? 'unknown',
-        senderName: user?.accountName ?? 'FountainPay User',
+        senderId:   user?.userId ?? 'unknown',
+        senderName: user?.name ?? 'FountainPay User',
+        senderPhone: user?.phone ?? 'unknown',
+        senderEmail: user?.email ?? 'unknown',
         timestamp:  Date.now(),
       };
 
@@ -311,29 +301,17 @@ export function BluetoothSubScreen({
         } as FPError;
       }
 
-      const result = await transferAPI.send({
-        accountNumber: response.accountDetails.accountNumber,
-        bankCode:      response.accountDetails.bankCode,
-        amount:        amount * 100,
-        narration:     `Bluetooth payment to ${response.accountDetails.accountName}`,
-        reference:     response.transactionId,
-      });
-
-      const tx: FPTransaction = {
-        id:        result.reference,
-        reference: result.reference,
-        type:      'debit',
-        channel:   'bluetooth',
-        amount:    result.amount,
-        currency:  result.currency,
-        status:    result.status,
-        recipient: { accountName: response.accountDetails.accountName },
-        createdAt: result.createdAt,
-      };
+      const payload: FPSendPaymentRequest = { 
+        amount: amount, 
+        currency: currency, 
+        channel: 'bluetooth',
+        narration: `Send ${currency}${amount} to ${response.accountDetails.accountName}`,
+        recipient: response.accountDetails
+      }
 
-      onSuccess?.(tx);
+      onProcessTransaction?.(payload);
       setCurrentDevice(null);
-      setStatus('Waiting for response...');
+      setStatus('Payment sent!');
     } catch (error: any) {
       const fp = error as FPError;
       setCurrentDevice(null);
@@ -356,6 +334,9 @@ export function BluetoothSubScreen({
       {/* Status Bar */}
 
       <Header>
+        <HeaderButton onPress={onClose}>
+          <Ionicons name="close" size={24} />
+        </HeaderButton>
         <HeaderCenter>
           <Text style={{ fontWeight: 'bold', fontSize: 16, color:'#FFF' }}>Bluetooth</Text>
           <Text style={{ fontSize: 10, color: '#FFF' }}>Transfer</Text>