react-native-fpay 0.3.5 → 0.3.7

package/src/ui/screens/ReceiveScreen.tsx

@@ -9,12 +9,11 @@ import {
 } from 'react-native';
 import styled from 'styled-components/native';
 import Ionicons from 'react-native-vector-icons/Ionicons';
-import Svg, { Path } from "react-native-svg";
+import Svg, { Path } from 'react-native-svg';
 import Transfer from './sub/receivePayment/Transfer';
 import Qr from './sub/receivePayment/Qr';
 import Nfc from './sub/receivePayment/Nfc';
 
-
 const { width, height } = Dimensions.get('window');
 
 // Styled Components
@@ -23,7 +22,6 @@ const Container = styled(View)`
   background-color: #000000;
 `;
 
-
 // Bottom Sheet Styles
 const BottomSheet = styled(View)`
   position: absolute;
@@ -78,7 +76,7 @@ const ActionIconContainer = styled(View)<{ color: string }>`
   width: 56px;
   height: 56px;
   border-radius: 100%;
-  background-color: ${props => props.color};
+  background-color: ${(props) => props.color};
   justify-content: center;
   align-items: center;
   elevation: 3;
@@ -119,12 +117,11 @@ const AddContactButton = styled.TouchableOpacity`
 
   flex-direction: row;
   gap: 20px;
-
 `;
 
 const Icon = styled(Text)<{ size?: number; color?: string }>`
-  font-size: ${props => props.size || 24}px;
-  color: ${props => props.color || '#000000'};
+  font-size: ${(props) => props.size || 24}px;
+  color: ${(props) => props.color || '#000000'};
 `;
 
 const AddCircle = styled.View`
@@ -140,96 +137,263 @@ const AddCircle = styled.View`
   margin-bottom: 8px;
 `;
 
-
 const ContactName = styled.Text`
   font-size: 12px;
   color: #000;
 `;
 
-const ScanIcon = ({ color = "#111", size = 22 }) => (
-    <Svg width={size} height={size} strokeWidth="0.9" viewBox="0 0 24 24" fill="none" color={color}>
-      <Path d="M6 3H3V6" stroke="#000000" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-      <Path d="M2 12H12L22 12" stroke="#000000" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-      <Path d="M9 19V17V15" stroke="#000000" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-      <Path d="M12 16V15.5V15" stroke="#000000" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-      <Path d="M15 17V16V15" stroke="#000000" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-      <Path d="M12 21V19.5V18" stroke="#000000" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-      <Path d="M18 3H21V6" stroke="#000000" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-      <Path d="M6 21H3V18" stroke="#000000" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-      <Path d="M18 21H21V18" stroke="#000000" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-    </Svg>
+const ScanIcon = ({ color = '#111', size = 22 }) => (
+  <Svg
+    width={size}
+    height={size}
+    strokeWidth="0.9"
+    viewBox="0 0 24 24"
+    fill="none"
+    color={color}
+  >
+    <Path
+      d="M6 3H3V6"
+      stroke="#000000"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M2 12H12L22 12"
+      stroke="#000000"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M9 19V17V15"
+      stroke="#000000"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M12 16V15.5V15"
+      stroke="#000000"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M15 17V16V15"
+      stroke="#000000"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M12 21V19.5V18"
+      stroke="#000000"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M18 3H21V6"
+      stroke="#000000"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M6 21H3V18"
+      stroke="#000000"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M18 21H21V18"
+      stroke="#000000"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+const BluetoothIcon = ({ color = '#111', size = 22 }) => (
+  <Svg
+    width={size}
+    height={size}
+    strokeWidth="0.9"
+    viewBox="0 0 24 24"
+    fill="none"
+    color={color}
+  >
+    <Path
+      d="M6 19.0007C3.57111 17.1763 2 14.2716 2 11C2 5.47715 6.47715 1 12 1C17.5228 1 22 5.47715 22 11C22 14.2716 20.4289 17.1763 18 19.0007"
+      stroke="#fff"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M6 19.0007C3.57111 17.1763 2 14.2716 2 11C2 5.47715 6.47715 1 12 1C17.5228 1 22 5.47715 22 11C22 14.2716 20.4289 17.1763 18 19.0007"
+      stroke="#fff"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M7.52779 15C6.57771 13.9385 6 12.5367 6 11C6 7.68629 8.68629 5 12 5C15.3137 5 18 7.68629 18 11C18 12.5367 17.4223 13.9385 16.4722 15"
+      stroke="#fff"
+      strokeWidth="0.9"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.25 11C9.25 9.48122 10.4812 8.25 12 8.25C13.5188 8.25 14.75 9.48122 14.75 11C14.75 12.5188 13.5188 13.75 12 13.75C10.4812 13.75 9.25 12.5188 9.25 11Z"
+      fill="#fff"
+    />
+    <Path
+      d="M15.0776 21.4865C14.8566 22.8126 13.7093 23.7844 12.365 23.7844H11.7536C10.4093 23.7844 9.262 22.8126 9.041 21.4865L8.53213 18.4333C8.29232 16.9946 9.43086 15.8854 10.5339 15.15C11.9123 14.231 12.3864 14.3406 13.5847 15.1396C14.6421 15.8445 15.8263 16.9946 15.5865 18.4333L15.0776 21.4865Z"
+      fill="#fff"
+    />
+  </Svg>
+);
+
+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>
 );
 
-const BluetoothIcon =({ color = "#111", size = 22 })=>(
-    <Svg width={size} height={size} strokeWidth="0.9" viewBox="0 0 24 24" fill="none" color={color}>
-        <Path d="M6 19.0007C3.57111 17.1763 2 14.2716 2 11C2 5.47715 6.47715 1 12 1C17.5228 1 22 5.47715 22 11C22 14.2716 20.4289 17.1763 18 19.0007" stroke="#fff" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-        <Path d="M6 19.0007C3.57111 17.1763 2 14.2716 2 11C2 5.47715 6.47715 1 12 1C17.5228 1 22 5.47715 22 11C22 14.2716 20.4289 17.1763 18 19.0007" stroke="#fff" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-        <Path d="M7.52779 15C6.57771 13.9385 6 12.5367 6 11C6 7.68629 8.68629 5 12 5C15.3137 5 18 7.68629 18 11C18 12.5367 17.4223 13.9385 16.4722 15" stroke="#fff" strokeWidth="0.9" strokeLinecap="round" strokeLinejoin="round" />
-        <Path fillRule="evenodd" clipRule="evenodd" d="M9.25 11C9.25 9.48122 10.4812 8.25 12 8.25C13.5188 8.25 14.75 9.48122 14.75 11C14.75 12.5188 13.5188 13.75 12 13.75C10.4812 13.75 9.25 12.5188 9.25 11Z" fill="#fff" />
-        <Path d="M15.0776 21.4865C14.8566 22.8126 13.7093 23.7844 12.365 23.7844H11.7536C10.4093 23.7844 9.262 22.8126 9.041 21.4865L8.53213 18.4333C8.29232 16.9946 9.43086 15.8854 10.5339 15.15C11.9123 14.231 12.3864 14.3406 13.5847 15.1396C14.6421 15.8445 15.8263 16.9946 15.5865 18.4333L15.0776 21.4865Z" fill="#fff" />
-    </Svg>
-)
-
-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>
-)
-
-const QRIcon =({ color = "#111", size = 22 })=>(
-    <Svg width={size} height={size} strokeWidth="0.9" viewBox="0 0 24 24" fill="none" color={color}>
-        <Path fillRule="evenodd" clipRule="evenodd" d="M2.25 3C2.25 2.58579 2.58579 2.25 3 2.25H6C6.41421 2.25 6.75 2.58579 6.75 3C6.75 3.41421 6.41421 3.75 6 3.75H3.75V6C3.75 6.41421 3.41421 6.75 3 6.75C2.58579 6.75 2.25 6.41421 2.25 6V3Z" fill="#fff" />
-        <Path fillRule="evenodd" clipRule="evenodd" d="M17.25 3C17.25 2.58579 17.5858 2.25 18 2.25H21C21.4142 2.25 21.75 2.58579 21.75 3V6C21.75 6.41421 21.4142 6.75 21 6.75C20.5858 6.75 20.25 6.41421 20.25 6V3.75H18C17.5858 3.75 17.25 3.41421 17.25 3Z" fill="#fff" />
-        <Path fillRule="evenodd" clipRule="evenodd" d="M3 17.25C3.41421 17.25 3.75 17.5858 3.75 18V20.25H6C6.41421 20.25 6.75 20.5858 6.75 21C6.75 21.4142 6.41421 21.75 6 21.75H3C2.58579 21.75 2.25 21.4142 2.25 21V18C2.25 17.5858 2.58579 17.25 3 17.25Z" fill="#fff" />
-        <Path fillRule="evenodd" clipRule="evenodd" d="M21 17.25C21.4142 17.25 21.75 17.5858 21.75 18V21C21.75 21.4142 21.4142 21.75 21 21.75H18C17.5858 21.75 17.25 21.4142 17.25 21C17.25 20.5858 17.5858 20.25 18 20.25H20.25V18C20.25 17.5858 20.5858 17.25 21 17.25Z" fill="#fff" />
-        <Path fillRule="evenodd" clipRule="evenodd" d="M12.9004 6.6654C12.3462 6.33289 11.6538 6.33289 11.0996 6.6654L7.09963 9.0654C6.57252 9.38167 6.25 9.95131 6.25 10.566V14.4336C6.25 15.0483 6.57252 15.618 7.09963 15.9342L11.0996 18.3342C11.6538 18.6668 12.3462 18.6668 12.9004 18.3342L16.9004 15.9342C17.4275 15.618 17.75 15.0483 17.75 14.4336V10.566C17.75 9.95131 17.4275 9.38167 16.9004 9.0654L12.9004 6.6654ZM9.3642 10.6785C9.00209 10.4773 8.5455 10.6078 8.34437 10.9699C8.14324 11.332 8.27373 11.7886 8.63583 11.9898L11.25 13.4418V16.0001C11.25 16.4144 11.5858 16.7501 12 16.7501C12.4142 16.7501 12.75 16.4144 12.75 16.0001V13.4456C12.9152 13.3554 13.1243 13.241 13.3607 13.1115C13.9447 12.7916 14.6961 12.3787 15.3642 12.0077C15.7263 11.8066 15.8568 11.35 15.6557 10.9879C15.4546 10.6257 14.998 10.4952 14.6359 10.6964C13.9716 11.0653 13.223 11.4766 12.6401 11.796C12.3908 11.9325 12.172 12.0521 12.0032 12.1443L9.3642 10.6785Z" fill="#fff" />
-    </Svg>
+const QRIcon = ({ color = '#111', size = 22 }) => (
+  <Svg
+    width={size}
+    height={size}
+    strokeWidth="0.9"
+    viewBox="0 0 24 24"
+    fill="none"
+    color={color}
+  >
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M2.25 3C2.25 2.58579 2.58579 2.25 3 2.25H6C6.41421 2.25 6.75 2.58579 6.75 3C6.75 3.41421 6.41421 3.75 6 3.75H3.75V6C3.75 6.41421 3.41421 6.75 3 6.75C2.58579 6.75 2.25 6.41421 2.25 6V3Z"
+      fill="#fff"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M17.25 3C17.25 2.58579 17.5858 2.25 18 2.25H21C21.4142 2.25 21.75 2.58579 21.75 3V6C21.75 6.41421 21.4142 6.75 21 6.75C20.5858 6.75 20.25 6.41421 20.25 6V3.75H18C17.5858 3.75 17.25 3.41421 17.25 3Z"
+      fill="#fff"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M3 17.25C3.41421 17.25 3.75 17.5858 3.75 18V20.25H6C6.41421 20.25 6.75 20.5858 6.75 21C6.75 21.4142 6.41421 21.75 6 21.75H3C2.58579 21.75 2.25 21.4142 2.25 21V18C2.25 17.5858 2.58579 17.25 3 17.25Z"
+      fill="#fff"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M21 17.25C21.4142 17.25 21.75 17.5858 21.75 18V21C21.75 21.4142 21.4142 21.75 21 21.75H18C17.5858 21.75 17.25 21.4142 17.25 21C17.25 20.5858 17.5858 20.25 18 20.25H20.25V18C20.25 17.5858 20.5858 17.25 21 17.25Z"
+      fill="#fff"
+    />
+    <Path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.9004 6.6654C12.3462 6.33289 11.6538 6.33289 11.0996 6.6654L7.09963 9.0654C6.57252 9.38167 6.25 9.95131 6.25 10.566V14.4336C6.25 15.0483 6.57252 15.618 7.09963 15.9342L11.0996 18.3342C11.6538 18.6668 12.3462 18.6668 12.9004 18.3342L16.9004 15.9342C17.4275 15.618 17.75 15.0483 17.75 14.4336V10.566C17.75 9.95131 17.4275 9.38167 16.9004 9.0654L12.9004 6.6654ZM9.3642 10.6785C9.00209 10.4773 8.5455 10.6078 8.34437 10.9699C8.14324 11.332 8.27373 11.7886 8.63583 11.9898L11.25 13.4418V16.0001C11.25 16.4144 11.5858 16.7501 12 16.7501C12.4142 16.7501 12.75 16.4144 12.75 16.0001V13.4456C12.9152 13.3554 13.1243 13.241 13.3607 13.1115C13.9447 12.7916 14.6961 12.3787 15.3642 12.0077C15.7263 11.8066 15.8568 11.35 15.6557 10.9879C15.4546 10.6257 14.998 10.4952 14.6359 10.6964C13.9716 11.0653 13.223 11.4766 12.6401 11.796C12.3908 11.9325 12.172 12.0521 12.0032 12.1443L9.3642 10.6785Z"
+      fill="#fff"
+    />
+  </Svg>
 );
 
-type PAYMENTCHANNEL = "TRANSFER" | "QRCODE" | "NFC" | "BTH"
+type PAYMENTCHANNEL = 'TRANSFER' | 'QRCODE' | 'NFC' | 'BTH';
 
 // Main Component
-const ReceiveScreen = ({ amount, currency = 'NGN', user, account, onClose, onPaymentReceived, onError }: any) => {
+const ReceiveScreen = ({
+  amount,
+  currency = 'NGN',
+  user,
+  account,
+  onClose,
+  onPaymentReceived,
+  onError,
+}: any) => {
   const [mode, setMode] = useState<PAYMENTCHANNEL>('TRANSFER');
 
-
   return (
     <Container>
-      {mode === 'TRANSFER' && (<Transfer 
-        amount={amount as any}
-        description={""}
-        user={user}
-        recipient={account}
-        onClose={onClose}
-        onPaymentReceived={onPaymentReceived} 
-      />)}
-
-      {mode === 'QRCODE' && (<Qr 
-        amount={amount as any}
-        description={""}
-        onClose={onClose}
-        onPaymentReceived={onPaymentReceived}
-      />)}
-
-      {mode === 'NFC' && (<Nfc 
-        amount={amount as any}
-        description={""}
-        onClose={onClose}
-        onPaymentReceived={onPaymentReceived}
-      />)}
-
-      
-      
-        {/* Bottom Sheet */}
+      {mode === 'TRANSFER' && (
+        <Transfer
+          amount={amount as any}
+          description={''}
+          user={user}
+          recipient={account}
+          onClose={onClose}
+          onPaymentReceived={onPaymentReceived}
+        />
+      )}
+
+      {mode === 'QRCODE' && (
+        <Qr
+          amount={amount as any}
+          description={''}
+          onClose={onClose}
+          onPaymentReceived={onPaymentReceived}
+        />
+      )}
+
+      {mode === 'NFC' && (
+        <Nfc
+          amount={amount as any}
+          description={''}
+          onClose={onClose}
+          onPaymentReceived={onPaymentReceived}
+        />
+      )}
+
+      {/* Bottom Sheet */}
       <BottomSheet>
         <SheetHandle />
-        
+
         <SheetScrollView showsVerticalScrollIndicator={false}>
           <SectionTitle>Receive with</SectionTitle>
-          
+
           <ActionsRow>
             <ActionButton onPress={() => setMode('TRANSFER')}>
               <ActionIconContainer color="#0a3d2e">
@@ -237,21 +401,21 @@ const ReceiveScreen = ({ amount, currency = 'NGN', user, account, onClose, onPay
               </ActionIconContainer>
               <ActionLabel>With{'\n'}transfer</ActionLabel>
             </ActionButton>
-            
+
             <ActionButton onPress={() => setMode('QRCODE')}>
               <ActionIconContainer color="#0a3d2e">
                 <QRIcon color="#FFF" size={22} />
               </ActionIconContainer>
               <ActionLabel>With{'\n'}QR</ActionLabel>
             </ActionButton>
-            
+
             <ActionButton onPress={() => setMode('NFC')}>
               <ActionIconContainer color="#0a3d2e">
                 <NFCIcon size={26} color="#ffffff" />
               </ActionIconContainer>
               <ActionLabel>With{'\n'}NFC</ActionLabel>
             </ActionButton>
-            
+
             <ActionButton onPress={() => setMode('BTH')}>
               <ActionIconContainer color="#0a3d2e">
                 <BluetoothIcon size={26} color="#ffffff" />
@@ -259,12 +423,9 @@ const ReceiveScreen = ({ amount, currency = 'NGN', user, account, onClose, onPay
               <ActionLabel>With{'\n'}Bluetooth</ActionLabel>
             </ActionButton>
           </ActionsRow>
-          
         </SheetScrollView>
       </BottomSheet>
-     
     </Container>
   );
 };
 export default ReceiveScreen;
-