boxpay-checkout-reactnative-sdk 1.0.0-beta03

package/src/components/bankCard.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { View, Text, Image, TouchableOpacity } from 'react-native';
+import { SvgUri } from 'react-native-svg';
+import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
+import styles from '../styles/components/bankCardStyles';
+
+interface BankCardProps {
+  name: string;
+  iconUrl: string;
+  hasNoCostEmi: boolean;
+  hasLowCostEmi: boolean;
+  onPress: () => void;
+}
+
+const BankCard: React.FC<BankCardProps> = ({
+  name,
+  iconUrl,
+  hasNoCostEmi,
+  hasLowCostEmi,
+  onPress,
+}) => {
+  const [error, setImageError] = useState(false);
+  const [load, setLoad] = useState(true);
+  return (
+    <TouchableOpacity style={styles.container} onPress={onPress}>
+      {/* Bank Icon */}
+      <View
+        style={styles.imageContainer}
+      >
+        {load && !error && (
+          <ShimmerPlaceHolder
+            visible={false} // Keep shimmer until loading is done
+            style={styles.shimmer}
+          />
+        )}
+        {!error ? (
+          <SvgUri
+            uri={iconUrl}
+            width={100} // Keep original size
+            height={100}
+            style={{ transform: [{ scale: 0.4 }] }}
+            onLoad={() => setLoad(false)}
+            onError={() => {
+              setImageError(true);
+              setLoad(false);
+            }}
+          />
+        ) : (
+          <Image
+            source={require('../../assets/images/ic_netbanking_semi_bold.png')}
+            style={styles.errorImage}
+          />
+        )}
+      </View>
+
+      {/* Bank Name & Offers */}
+      <View style={styles.detailsContainer}>
+        <Text style={styles.bankName}>{name}</Text>
+        <View style={styles.tagsContainer}>
+          {hasNoCostEmi && (
+            <View style={styles.tag}>
+              <Text style={styles.tagText}>NO COST EMI</Text>
+            </View>
+          )}
+          {hasLowCostEmi && (
+            <View style={styles.tag}>
+              <Text style={styles.tagText}>LOW COST EMI</Text>
+            </View>
+          )}
+        </View>
+      </View>
+
+      <Image
+        source={require('../../assets/images/chervon-down.png')}
+        style={styles.chervonImage}
+      />
+    </TouchableOpacity>
+  );
+};
+
+export default BankCard;

package/src/components/cancelPaymentModal.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { View, Text, Image, Pressable } from 'react-native';
+import Modal from 'react-native-modal';
+import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import styles from '../styles/components/cancelPaymentModalStyles';
+
+interface CancelPaymentModalProps {
+  onYesClick: () => void;
+  onNoClick: () => void;
+}
+
+const CancelPaymentModal: React.FC<CancelPaymentModalProps> = ({
+  onYesClick,
+  onNoClick,
+}) => {
+  const { checkoutDetails } = checkoutDetailsHandler;
+
+  return (
+    <View style={styles.modalContainer}>
+      <Modal isVisible={true} style={styles.modal}>
+        <View style={styles.modalContent}>
+          <View style={styles.iconContainer}>
+            <Image
+              source={require('../../assets/images/ic_info.png')}
+              style={styles.iconImage}
+            />
+            <Text style={styles.modalTitle}>Cancel Transaction?</Text>
+          </View>
+          <Text style={styles.modalText}>
+            Are you sure you want to cancel the transaction?
+          </Text>
+
+          <View style={styles.buttonContainer}>
+            <Pressable
+              style={[
+                styles.cancelButton,
+                { borderColor: '#E6E6E6', borderWidth: 1 },
+              ]}
+              onPress={onNoClick}
+            >
+              <Text
+                style={[
+                  styles.buttonText,
+                  { color: checkoutDetails.brandColor },
+                ]}
+              >
+                Not now
+              </Text>
+            </Pressable>
+            <Pressable
+              style={[
+                styles.confirmButton,
+                { backgroundColor: checkoutDetails.brandColor },
+              ]}
+              onPress={onYesClick}
+            >
+              <Text style={styles.confirmButtonText}>Yes</Text>
+            </Pressable>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+export default CancelPaymentModal;

package/src/components/circularProgress.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useRef } from 'react';
+import { View, Text, Animated, Easing } from 'react-native';
+import { Svg, Circle } from 'react-native-svg';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+const CircularProgressBar = ({
+  size = 100,
+  strokeWidth = 10,
+  progress = 75,
+  textColor = '#3498db',
+  formatTime = '05:00',
+  progressColor = '#3498db',
+}) => {
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const radius = (size - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+
+  useEffect(() => {
+    Animated.timing(animatedValue, {
+      toValue: (progress / (5 * 60)) * 100, // Convert timerValue to percentage
+      duration: 500, // Smooth animation
+      easing: Easing.linear,
+      useNativeDriver: false,
+    }).start();
+  }, [progress]);
+
+  const strokeDashoffset = animatedValue.interpolate({
+    inputRange: [0, 100],
+    outputRange: [circumference, 0], // Full circle to empty
+  });
+
+  return (
+    <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+      <Svg width={size} height={size}>
+        {/* Background Circle */}
+        <Circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke="#e0e0e0"
+          strokeWidth={strokeWidth}
+          fill="none"
+        />
+        {/* Animated Progress Circle */}
+        <AnimatedCircle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          stroke={progressColor}
+          strokeWidth={strokeWidth}
+          fill="none"
+          strokeDasharray={circumference}
+          strokeDashoffset={strokeDashoffset}
+          strokeLinecap="round"
+        />
+      </Svg>
+      <Text
+        style={{
+          position: 'absolute',
+          fontSize: 22,
+          fontFamily: 'Poppins-SemiBold',
+          color: textColor,
+        }}
+      >
+        {formatTime}
+      </Text>
+    </View>
+  );
+};
+
+export default CircularProgressBar;

package/src/components/cvvInfoBottomSheet.tsx

@@ -0,0 +1,58 @@
+import { View, Text, Pressable, Image } from 'react-native';
+import React from 'react';
+import Modal from 'react-native-modal';
+import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import styles from '../styles/components/cvvInfoBottomSheetStyles';
+
+interface CvvInfoBottomSheetProps {
+  onClick: () => void;
+}
+const CvvInfoBottomSheet: React.FC<CvvInfoBottomSheetProps> = ({ onClick }) => {
+  const { checkoutDetails } = checkoutDetailsHandler;
+  return (
+    <View>
+      <Modal isVisible={true} style={styles.modal} onBackdropPress={onClick}>
+        <View style={styles.sheet}>
+          <Text
+            style={styles.headingText}
+          >
+            Where to find CVV?
+          </Text>
+          <Image
+            source={require('../../assets/images/cvv_info_image.png')}
+            style={styles.imageStyle}
+          />
+          <Text style={styles.secondaryHeading}>Generic position for CVV</Text>
+          <Text style={styles.desc}>
+            3 digit numeric code on the back side of card
+          </Text>
+          <View
+            style={styles.divider}
+          />
+          <Image
+            source={require('../../assets/images/cvv_info_image_amex.png')}
+            style={styles.imageStyle}
+          />
+          <Text style={styles.secondaryHeading}>
+            CVV for American Express Card
+          </Text>
+          <Text style={styles.desc}>
+            4 digit numeric code on the front side of the card, just above the
+            card number
+          </Text>
+          <Pressable
+            style={[
+              styles.buttonContainer,
+              { backgroundColor: checkoutDetails.brandColor },
+            ]}
+            onPress={onClick}
+          >
+            <Text style={styles.buttonText}>Got it!</Text>
+          </Pressable>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+export default CvvInfoBottomSheet;

package/src/components/fontFamily.tsx

@@ -0,0 +1,22 @@
+// constants/fonts.ts
+import * as Font from 'expo-font';
+
+export async function loadCustomFonts() {
+  await Font.loadAsync({
+    'Poppins-Regular': require('../../assets/fonts/Poppins-Regular.ttf'),
+    'Poppins-Bold': require('../../assets/fonts/Poppins-Bold.ttf'),
+    'Poppins-ExtraBold': require('../../assets/fonts/Poppins-ExtraBold.ttf'),
+    'Poppins-Medium': require('../../assets/fonts/Poppins-Medium.ttf'),
+    'Poppins-SemiBold': require('../../assets/fonts/Poppins-SemiBold.ttf'),
+  });
+}
+
+export async function loadInterCustomFonts() {
+  await Font.loadAsync({
+    'Inter-Regular': require('../../assets/fonts/Inter_18pt-Regular.ttf'),
+    'Inter-Bold': require('../../assets/fonts/Inter_18pt-Bold.ttf'),
+    'Inter-ExtraBold': require('../../assets/fonts/Inter_18pt-ExtraBold.ttf'),
+    'Inter-Medium': require('../../assets/fonts/Inter_18pt-Medium.ttf'),
+    'Inter-SemiBold': require('../../assets/fonts/Inter_18pt-SemiBold.ttf'),
+  });
+}

package/src/components/getInstalledUPI.ts

@@ -0,0 +1,34 @@
+// cross_platform/src/index.tsx
+
+import { NativeModules } from 'react-native';
+
+// Make the function async
+export const getInstalledUpiApps = async () => {
+  if (
+    !NativeModules.CrossPlatform ||
+    typeof NativeModules.CrossPlatform.getInstalledApps !== 'function'
+  ) {
+    throw new Error('CrossPlatform module not available');
+  }
+
+  try {
+    // Await the promise to get the actual result
+    const result = await NativeModules.CrossPlatform.getInstalledApps();
+
+    // Now 'result' is the array you expect
+    return result; // Return the actual list of apps
+  } catch (error) {
+    // Re-throw the error so the calling code knows something went wrong
+    if (error instanceof Error) {
+      console.log('Full error stack trace:', error.stack);
+      throw new Error(
+        `Failed during the native call to get installed apps : ${error.message}`
+      );
+    } else {
+      console.log('Unknown error:', error);
+      throw new Error(
+        `Failed during the native call to get installed apps : ${String(error)}`
+      );
+    }
+  }
+};

package/src/components/header.tsx

@@ -0,0 +1,116 @@
+import { View, Text, Image, StyleSheet, Pressable } from 'react-native';
+import React from 'react';
+import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+
+interface HeaderProps {
+  showDesc: boolean;
+  showSecure: boolean;
+  text: string;
+  onBackPress: () => void; // Accepting the function as a prop
+}
+
+const Header: React.FC<HeaderProps> = ({
+  onBackPress,
+  showDesc,
+  showSecure,
+  text,
+}) => {
+  const { checkoutDetails } = checkoutDetailsHandler;
+  return (
+    <View style={styles.header}>
+      <View style={styles.headerTitleRow}>
+        <Pressable
+          onPress={() => {
+            onBackPress(); // Trigger the passed function
+          }}
+        >
+          <Image
+            source={require('../../assets/images/arrow-left.png')}
+            style={styles.backArrow}
+          />
+        </Pressable>
+        <View style={styles.headerColumn}>
+          <Text style={styles.headerTitle}>{text}</Text>
+          {showDesc && (
+            <Text style={styles.headerDesc}>
+              {checkoutDetails.itemsLength > 0 && (
+                <>
+                  {checkoutDetails.itemsLength}{' '}
+                  {checkoutDetails.itemsLength === 1 ? 'item' : 'items'} .
+                </>
+              )}
+              Total:
+              <Text style={styles.amount}>
+                <Text style={styles.currencySymbol}>
+                  {' '}
+                  {checkoutDetails.currencySymbol}
+                </Text>
+                {checkoutDetails.amount}
+              </Text>
+            </Text>
+          )}
+        </View>
+        {showSecure && (
+          <View style={styles.btnContainer}>
+            <View style={styles.headerSecure}>
+              <Image
+                source={require('../../assets/images/Lock.png')}
+                style={styles.lockIcon}
+              />
+              <Text style={styles.secureText}>100% Secure</Text>
+            </View>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default Header;
+
+const styles = StyleSheet.create({
+  header: { backgroundColor: 'white', padding: 16 },
+  headerTitleRow: { flexDirection: 'row' },
+  headerColumn: { flex: 1 },
+  backArrow: { height: 24, width: 24, marginRight: 8 },
+  headerTitle: {
+    fontSize: 16,
+    color: '#363840',
+    fontFamily: 'Poppins-SemiBold',
+  },
+  headerDesc: {
+    marginTop: -4,
+    fontSize: 12,
+    color: '#4F4D55',
+    fontFamily: 'Poppins-Regular',
+  },
+  headerSecure: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    backgroundColor: '#E8F6F1',
+    borderRadius: 6,
+  },
+  lockIcon: { height: 14, width: 14, marginRight: 4 },
+  secureText: {
+    fontSize: 12,
+    color: '#1CA672',
+    fontFamily: 'Poppins-SemiBold',
+    marginBottom: -2,
+  },
+  amount: {
+    fontFamily: 'Poppins-SemiBold',
+    fontSize: 12,
+    color: '#4F4D55',
+  },
+  btnContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  currencySymbol: {
+    fontFamily: 'Inter-SemiBold',
+    fontSize: 12,
+    color: '#4F4D55',
+  },
+});

package/src/components/knowMoreBottomSheet.tsx

@@ -0,0 +1,126 @@
+import { View, Text, StyleSheet, Pressable, Image } from 'react-native';
+import Modal from 'react-native-modal';
+import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+
+interface KnowMoreBottomSheetProps {
+  onClick: () => void;
+}
+
+const KnowMoreBottomSheet = ({ onClick }: KnowMoreBottomSheetProps) => {
+  const { checkoutDetails } = checkoutDetailsHandler;
+  return (
+    <View>
+      <Modal isVisible={true} style={styles.modal} onBackdropPress={onClick}>
+        <View style={styles.sheet}>
+          <Text
+            style={styles.headingText}
+          >
+            RBI Guidelines
+          </Text>
+
+          <Text
+            style={styles.subHeadingText}
+          >
+            As per the new RBI guidelines, we can no longer store your card
+            information with us.
+          </Text>
+
+          <View
+            style={styles.container}
+          >
+            <Image
+              source={require('../../assets/images/ic_card_lock.png')}
+              style={styles.imageStyle}
+            />
+            <Text
+              style={styles.subHeadingText}
+            >
+              Your bank/card network will securely save your card information
+              via tokenization if you consent for the same.
+            </Text>
+          </View>
+          <View
+            style={styles.container}
+          >
+            <Image
+              source={require('../../assets/images/ic_card_add.png')}
+              style={styles.imageStyle}
+            />
+            <Text
+              style={styles.subHeadingText}
+            >
+              In case you choose to not tokenize, you’ll have to enter card
+              details every time you pay.
+            </Text>
+          </View>
+          <Pressable
+            style={[
+              styles.buttonContainer,
+              { backgroundColor: checkoutDetails.brandColor },
+            ]}
+            onPress={onClick}
+          >
+            <Text style={styles.buttonText}>Got it!</Text>
+          </Pressable>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+export default KnowMoreBottomSheet;
+
+const styles = StyleSheet.create({
+  modal: {
+    justifyContent: 'flex-end',
+    margin: 0,
+  },
+  sheet: {
+    backgroundColor: 'white',
+    padding: 20,
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  secondaryHeading: {
+    color: '#2D2B32',
+    fontSize: 14,
+    marginTop: 16,
+    fontFamily: 'Poppins-SemiBold',
+  },
+  desc: {
+    color: '#4F4D55',
+    fontSize: 14,
+    fontFamily: 'Poppins-Regular',
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    borderRadius: 8,
+    justifyContent: 'center',
+    marginTop: 28,
+    backgroundColor: '#1CA672',
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    paddingVertical: 12,
+    fontFamily: 'Poppins-SemiBold',
+  },
+  headingText : {
+    fontFamily: 'Poppins-SemiBold',
+    fontSize: 20,
+    color: '#2D2B32',
+  },
+  subHeadingText : {
+    fontFamily: 'Poppins-Regular',
+    fontSize: 14,
+    color: '#2D2B32',
+    paddingTop: 12
+  },
+  imageStyle : { width: 28, height: 28, alignSelf: 'flex-start' },
+  container : {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginTop: 28,
+    marginEnd: 16,
+  }
+});

package/src/components/morePaymentContainer.tsx

@@ -0,0 +1,43 @@
+import { View, Text, Image } from 'react-native';
+import type { ImageSourcePropType } from 'react-native';
+
+interface MorePaymentContainerProps {
+  title: string;
+  image: ImageSourcePropType;
+}
+
+const MorePaymentContainer = ({ title, image }: MorePaymentContainerProps) => {
+  return (
+    <View
+      style={{
+        flex: 1,
+        flexDirection: 'row',
+        backgroundColor: 'white',
+        alignItems: 'center',
+      }}
+    >
+      <Image source={image} style={{ width: 32, height: 32 }} />
+      <Text
+        style={{ fontSize: 14, fontFamily: 'Poppins-Medium', marginLeft: 12 }}
+      >
+        {title}
+      </Text>
+      <Image
+        source={require('../../assets/images/chervon-down.png')}
+        style={{
+          alignSelf: 'center',
+          height: 6,
+          width: 14,
+          marginLeft: 'auto',
+          transform: [
+            {
+              rotate: '270deg',
+            },
+          ],
+        }}
+      />
+    </View>
+  );
+};
+
+export default MorePaymentContainer;