boxpay-checkout-reactnative-sdk 1.0.0-beta2

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/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;

package/src/components/morePaymentMethods.tsx

@@ -0,0 +1,180 @@
+import { View, Text, Pressable } from 'react-native';
+import type{ PaymentClass } from '../interface';
+import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import MorePaymentContainer from './morePaymentContainer';
+import { navigateToBNPLScreen, navigateToCardScreen, navigateToEmiScreen, navigateToNetBankingScreen, navigateToWalletScreen } from '../navigation';
+
+interface MorePaymentMethodsArgs{
+    savedCards : PaymentClass[]
+}
+
+const MorePaymentMethods = ({savedCards}:MorePaymentMethodsArgs) => {
+    const {checkoutDetails} = checkoutDetailsHandler
+    const {
+        isCardMethodEnabled: isCardVisible,
+        isWalletMethodEnabled: isWalletVisible,
+        isNetBankingMethodEnabled: isNetBankingVisible,
+        isBnplMethodEnabled: isBNPLVisible,
+        isEmiMethodEnabled: isEmiVisible,
+        isUpiCollectMethodEnabled: isUpiCollectVisible,
+        isUpiIntentMethodEnabled: isUpiIntentVisibile
+      } = checkoutDetails;
+    return (
+        <View>
+                {(isCardVisible ||
+                  isWalletVisible ||
+                  isNetBankingVisible ||
+                  isBNPLVisible ||
+                  isEmiVisible) && (
+                  <View>
+                    {isUpiCollectVisible || isUpiIntentVisibile ? (
+                      <Text
+                        style={{
+                          marginStart: 16,
+                          marginTop: 12,
+                          fontSize: 14,
+                          color: '#020815B5',
+                          fontFamily: 'Poppins-SemiBold',
+                        }}
+                      >
+                        More Payment Options
+                      </Text>
+                    ) : (
+                      <Text
+                        style={{
+                          marginStart: 16,
+                          marginTop: 12,
+                          fontSize: 14,
+                          color: '#020815B5',
+                          fontFamily: 'Poppins-SemiBold',
+                        }}
+                      >
+                        Payment Options
+                      </Text>
+                    )}
+
+                    <View
+                      style={{
+                        flex: 1,
+                        backgroundColor: 'white',
+                        marginVertical: 8,
+                        marginHorizontal: 16,
+                        borderRadius: 12,
+                        flexDirection: 'column',
+                        borderColor: '#F1F1F1',
+                        borderWidth: 1,
+                        paddingBottom: 16,
+                      }}
+                    >
+                      {isCardVisible && savedCards.length == 0 && (
+                        <Pressable
+                          style={{ paddingHorizontal: 16, paddingTop: 16 }}
+                          onPress={navigateToCardScreen}
+                        >
+                          <MorePaymentContainer
+                            title="Cards"
+                            image={require('../../assets/images/ic_card.png')}
+                          />
+                          {(isWalletVisible ||
+                            isNetBankingVisible ||
+                            isEmiVisible ||
+                            isBNPLVisible) && (
+                            <View
+                              style={{
+                                flexDirection: 'row',
+                                height: 1,
+                                backgroundColor: '#ECECED',
+                                marginTop: 16,
+                                marginHorizontal: -16,
+                              }}
+                            />
+                          )}
+                        </Pressable>
+                      )}
+                      {isWalletVisible && (
+                        <Pressable
+                          style={{ paddingHorizontal: 16, paddingTop: 16 }}
+                          onPress={navigateToWalletScreen}
+                        >
+                          <MorePaymentContainer
+                            title="Wallet"
+                            image={require('../../assets/images/ic_wallet.png')}
+                          />
+                          {(isNetBankingVisible ||
+                            isEmiVisible ||
+                            isBNPLVisible) && (
+                            <View
+                              style={{
+                                flexDirection: 'row',
+                                height: 1,
+                                backgroundColor: '#ECECED',
+                                marginTop: 16,
+                                marginHorizontal: -16,
+                              }}
+                            />
+                          )}
+                        </Pressable>
+                      )}
+                      {isNetBankingVisible && (
+                        <Pressable
+                          style={{ paddingHorizontal: 16, paddingTop: 16 }}
+                          onPress={navigateToNetBankingScreen}
+                        >
+                          <MorePaymentContainer
+                            title="Netbanking"
+                            image={require('../../assets/images/ic_netbanking.png')}
+                          />
+                          {(isEmiVisible || isBNPLVisible) && (
+                            <View
+                              style={{
+                                flexDirection: 'row',
+                                height: 1,
+                                backgroundColor: '#ECECED',
+                                marginTop: 16,
+                                marginHorizontal: -16,
+                              }}
+                            />
+                          )}
+                        </Pressable>
+                      )}
+                      {isEmiVisible && (
+                        <Pressable
+                          style={{ paddingHorizontal: 16, paddingTop: 16 }}
+                          onPress={navigateToEmiScreen}
+                        >
+                          <MorePaymentContainer
+                            title="EMI"
+                            image={require('../../assets/images/ic_emi.png')}
+                          />
+                          {isBNPLVisible && (
+                            <View
+                              style={{
+                                flexDirection: 'row',
+                                height: 1,
+                                backgroundColor: '#ECECED',
+                                marginTop: 16,
+                                marginHorizontal: -16,
+                              }}
+                            />
+                          )}
+                        </Pressable>
+                      )}
+                      {isBNPLVisible && (
+                        <Pressable
+                          style={{ paddingHorizontal: 16, paddingTop: 16 }}
+                          onPress={navigateToBNPLScreen}
+                        >
+                          <MorePaymentContainer
+                            title="Pay Later"
+                            image={require('../../assets/images/ic_bnpl.png')}
+                          />
+                        </Pressable>
+                      )}
+                    </View>
+                  </View>
+                )}
+              </View>
+    )
+}
+
+export default MorePaymentMethods