react-native-fpay 0.2.9 → 0.3.2

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

@@ -0,0 +1,391 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { View, Animated, Easing } from 'react-native';
+import styled from 'styled-components/native';
+import QRCode from 'react-native-qrcode-svg';
+import Share from 'react-native-share';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { AnimatedDots } from '../../../../components/AnimatedDots';
+
+// 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;
+  align-items: center;
+`;
+
+const AmountContainer = styled.View`
+  background-color: #ffffff;
+  border-radius: 16px;
+  padding: 24px;
+  width: 100%;
+  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: 36px;
+  font-weight: 700;
+  color: #0a3d2e;
+  margin-bottom: 8px;
+`;
+
+const DescriptionText = styled.Text`
+  font-size: 14px;
+  color: #999999;
+  font-style: italic;
+`;
+
+const QRContainer = styled.View`
+  background-color: #ffffff;
+  border-radius: 16px;
+  padding: 32px;
+  align-items: center;
+  margin-bottom: 24px;
+  shadow-color: #000;
+  shadow-offset: 0px 2px;
+  shadow-opacity: 0.05;
+  shadow-radius: 8px;
+  elevation: 3;
+`;
+
+const QRCodePlaceholder = styled.View`
+  width: 240px;
+  height: 240px;
+  background-color: #000000;
+  border-radius: 12px;
+  margin-bottom: 16px;
+`;
+
+const StatusContainer = styled.View`
+  align-items: center;
+  margin-bottom: 16px;
+`;
+
+const StatusText = styled.Text`
+  font-size: 16px;
+  color: #333333;
+  margin-bottom: 8px;
+`;
+
+const DotsContainer = styled.View`
+  flex-direction: row;
+  align-items: center;
+`;
+
+const Dot = styled(Animated.View)<{ delay: number }>`
+  width: 8px;
+  height: 8px;
+  border-radius: 4px;
+  background-color: #0a3d2e;
+  margin: 0 4px;
+`;
+
+const TimerContainer = styled.View`
+  background-color: #FFF3E0;
+  border-radius: 20px;
+  padding: 12px 20px;
+  margin-bottom: 24px;
+`;
+
+const TimerText = styled.Text`
+  font-size: 14px;
+  color: #F57C00;
+  font-weight: 600;
+`;
+
+const InfoBox = styled.View`
+  background-color: #E8F5F1;
+  border-radius: 12px;
+  padding: 16px;
+  width: 100%;
+  margin-bottom: 24px;
+`;
+
+const InfoText = styled.Text`
+  font-size: 13px;
+  color: #00A876;
+  line-height: 20px;
+  text-align: center;
+`;
+
+const ButtonRow = styled.View`
+  flex-direction: row;
+  width: 100%;
+  gap: 12px;
+  margin-bottom: 16px;
+`;
+
+const OutlineButton = styled.TouchableOpacity`
+  flex: 1;
+  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 PrimaryButton = styled.TouchableOpacity`
+  flex: 1;
+  background-color: #0a3d2e;
+  border-radius: 28px;
+  padding: 16px;
+  align-items: center;
+`;
+
+const PrimaryButtonText = styled.Text`
+  font-size: 15px;
+  font-weight: 600;
+  color: #ffffff;
+`;
+
+const SecondaryButton = styled.TouchableOpacity`
+  background-color: #ffffff;
+  border: 1.5px solid #E0E0E0;
+  border-radius: 28px;
+  padding: 16px;
+  align-items: center;
+  width: 100%;
+`;
+
+const SecondaryButtonText = styled.Text`
+  font-size: 15px;
+  font-weight: 600;
+  color: #666666;
+`;
+
+const Footer = styled.View`
+  padding: 16px;
+  background-color: #ffffff;
+  border-top-width: 1px;
+  border-top-color: #e0e0e0;
+`;
+
+const FooterText = styled.Text`
+  font-size: 12px;
+  color: #999999;
+  text-align: center;
+  line-height: 18px;
+`;
+
+
+// Main Component
+interface ReceiveQRCodeScreenProps {
+  amount: number;
+  description?: string;
+  onClose?: () => void;
+  onPaymentReceived?: (data: any) => void;
+}
+
+const Qr: React.FC<ReceiveQRCodeScreenProps> = ({
+  amount = 5000,
+  description = 'Payment request',
+  onClose,
+  onPaymentReceived,
+}) => {
+  const [timeRemaining, setTimeRemaining] = useState(900); // 15 minutes in seconds
+  const [qrData, setQrData] = useState('');
+  const qrRef = useRef<any>(null);
+
+  useEffect(() => {
+    // Generate QR code data (would be actual payment data in production)
+    const paymentData = {
+      amount,
+      description,
+      timestamp: Date.now(),
+      recipient: 'USER_ID_12345',
+    };
+    setQrData(JSON.stringify(paymentData));
+  }, [amount, description]);
+
+  useEffect(() => {
+    // Countdown timer
+    const timer = setInterval(() => {
+      setTimeRemaining((prev) => {
+        if (prev <= 0) {
+          clearInterval(timer);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  const formatTime = (seconds: number): string => {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  const handleShare = async () => {
+    try {
+      if (!qrRef.current) return;
+
+      qrRef.current.toDataURL(async (data: string) => {
+        const shareOptions = {
+          title: 'Payment Request',
+          message: `Please pay ₦${amount.toLocaleString()} for ${description}.`,
+          url: `data:image/png;base64,${data}`, // 👈 QR image
+          type: 'image/png',
+        };
+
+        await Share.open(shareOptions);
+      });
+    } catch (error) {
+      console.error('Error sharing QR:', error);
+    }
+  };
+
+
+  const handleRefresh = () => {
+    setTimeRemaining(900);
+    const paymentData = {
+      amount,
+      description,
+      direct: true,
+      timestamp: Date.now(),
+      recipient: 'USER_ID_12345',
+    };
+    setQrData(JSON.stringify(paymentData));
+  };
+
+  const formatAmount = (value: number): string => {
+    return value.toLocaleString('en-NG', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    });
+  };
+
+  return (
+    <Container>
+      {/* Header */}
+      <Header>
+        <BackButton onPress={onClose}>
+          <Ionicons name="close" size={24} />
+        </BackButton>
+        <HeaderTitle>Receive via QR Code</HeaderTitle>
+      </Header>
+
+      {/* 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)}
+              />)}
+            </QRCodePlaceholder>
+
+            <StatusContainer>
+              <StatusText>Waiting for payment of ₦{formatAmount(amount)}</StatusText>
+              <AnimatedDots />
+            </StatusContainer>
+          </QRContainer>
+
+          {/* Timer */}
+          <TimerContainer>
+            <TimerText>Valid for: {formatTime(timeRemaining)} mins</TimerText>
+          </TimerContainer>
+
+          {/* Info Box */}
+          <InfoBox>
+            <InfoText>
+              Ask the payer to scan this QR code with their camera or payment
+              app to complete the transaction
+            </InfoText>
+          </InfoBox>
+
+          {/* Action Buttons */}
+          <ButtonRow>
+            <OutlineButton onPress={handleShare}>
+              <OutlineButtonText>Share QR</OutlineButtonText>
+            </OutlineButton>
+            <PrimaryButton onPress={handleRefresh}>
+              <PrimaryButtonText>Refresh</PrimaryButtonText>
+            </PrimaryButton>
+          </ButtonRow>
+
+          <SecondaryButton onPress={onClose}>
+            <SecondaryButtonText>Cancel Request</SecondaryButtonText>
+          </SecondaryButton>
+        </ContentContainer>
+      </ScrollContainer>
+
+      {/* Footer */}
+      <Footer>
+        <FooterText>
+          The payment will be automatically credited to your account once the
+          payer scans and confirms
+        </FooterText>
+      </Footer>
+    </Container>
+  );
+};
+
+export default Qr;