boxpay-checkout-reactnative-sdk 1.1.7 → 2.0.1

package/src/components/checkboxContainer.tsx

@@ -1,66 +0,0 @@
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
-
-interface CheckBoxContainerProps {
-    text : string,
-    isCheckBoxSelected : boolean,
-    onCheckBoxClicked : () => void
-}
-
-const CheckBoxContainer = ({text, isCheckBoxSelected, onCheckBoxClicked} : CheckBoxContainerProps) =>{
-    const {checkoutDetails} = checkoutDetailsHandler
-    return(
-        <View
-        style={styles.checkBoxContainer}>
-          <TouchableOpacity
-            onPress={() => onCheckBoxClicked()}
-          >
-            <View style={[
-              styles.checkboxBox,
-              { borderColor: checkoutDetails.buttonColor },
-              isCheckBoxSelected && { backgroundColor: checkoutDetails.buttonColor }
-            ]}>
-              {isCheckBoxSelected && (
-                <Text style={styles.checkmark}>✓</Text>
-              )}
-            </View>
-          </TouchableOpacity>
-          <Text
-            style={[styles.checkBoxText, {fontFamily: checkoutDetails.fontFamily.regular,}]}
-          >
-            {text}
-          </Text>
-        </View>
-    )
-}
-
-const styles = StyleSheet.create({
-    checkBoxContainer : {
-      flexDirection: 'row',
-      marginTop: 10,
-      alignItems: 'center'
-  },
-  checkBoxText : {
-      color: '#2D2B32',
-      fontSize: 14,
-      marginLeft: 6,
-  },
-  checkboxBox: {
-    width: 20,
-    height: 20,
-    borderWidth: 2,
-    borderRadius: 3,
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginLeft: 8,
-  },
-  checkmark: {
-    color: '#fff',
-    fontSize: 13,
-    fontWeight: 'bold',
-    lineHeight: 16,
-  }
-  });
-
-
-export default CheckBoxContainer

package/src/components/circularProgress.tsx

@@ -1,74 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { View, Text, Animated, Easing } from 'react-native';
-import { Svg, Circle } from 'react-native-svg';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
-
-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;
-  const {fontFamily} = checkoutDetailsHandler.checkoutDetails
-
-  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: fontFamily.semiBold,
-          color: textColor,
-        }}
-      >
-        {formatTime}
-      </Text>
-    </View>
-  );
-};
-
-export default CircularProgressBar;

package/src/components/cvvInfoBottomSheet.tsx

@@ -1,58 +0,0 @@
-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, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
-          >
-            Where to find CVV?
-          </Text>
-          <Image
-            source={require('../../assets/images/cvv_info_image.png')}
-            style={styles.imageStyle}
-          />
-          <Text style={[styles.secondaryHeading, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>Generic position for CVV</Text>
-          <Text style={[styles.desc, {fontFamily: checkoutDetails.fontFamily.regular,}]}>
-            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, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>
-            CVV for American Express Card
-          </Text>
-          <Text style={[styles.desc, {fontFamily: checkoutDetails.fontFamily.regular,}]}>
-            4 digit numeric code on the front side of the card, just above the
-            card number
-          </Text>
-          <Pressable
-            style={[
-              styles.buttonContainer,
-              { backgroundColor: checkoutDetails.buttonColor ,borderRadius: checkoutDetails.ctaBorderRadius,},
-            ]}
-            onPress={onClick}
-          >
-            <Text style={[styles.buttonText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>Got it!</Text>
-          </Pressable>
-        </View>
-      </Modal>
-    </View>
-  );
-};
-
-export default CvvInfoBottomSheet;

package/src/components/deleteAddressModal.tsx

@@ -1,105 +0,0 @@
-import { View, Text, TouchableOpacity, StyleSheet, Image } from "react-native";
-import Modal from "react-native-modal";
-import { checkoutDetailsHandler } from "../sharedContext/checkoutDetailsHandler";
-
-interface DeletePros {
-    visible : boolean,
-    onCancel : () => void,
-    onDelete : () => void,
-    address : string
-}
-
-const DeleteAddressModal = ({ visible, onCancel, onDelete, address } : DeletePros) => {
-  const {checkoutDetails} = checkoutDetailsHandler
-  return (
-    <Modal
-      isVisible={visible}
-      animationIn="zoomIn"
-      animationOut="zoomOut"
-      backdropOpacity={0.5}
-      onBackdropPress={onCancel}
-      useNativeDriver
-    >
-      <View style={styles.modalContainer}>
-        {/* Delete Icon */}
-        <Image
-          source={require("../../assets/images/ic_trash.png")}
-          style={styles.deleteIcon}
-        />
-
-        {/* Title */}
-        <Text style={[styles.title, {fontFamily:checkoutDetails.fontFamily.semiBold,}]}>Proceed to delete this address?</Text>
-
-        {/* Address Info */}
-        <Text style={[styles.address, { fontFamily: checkoutDetails.fontFamily.regular}]}>{address}</Text>
-
-        {/* Buttons */}
-        <View style={styles.buttonRow}>
-          <TouchableOpacity style={styles.cancelButton} onPress={onCancel}>
-            <Text style={[styles.cancelText, {color: checkoutDetails.buttonColor,
-    fontFamily: checkoutDetails.fontFamily.regular}]}>Cancel</Text>
-          </TouchableOpacity>
-
-          <TouchableOpacity style={[styles.deleteButton, {backgroundColor: checkoutDetails.buttonColor,}]} onPress={onDelete}>
-            <Text style={[styles.deleteText, {fontFamily: checkoutDetails.fontFamily.semiBold}]}>Yes, delete</Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-    </Modal>
-  );
-};
-const styles = StyleSheet.create({
-  modalContainer: {
-    backgroundColor: "#fff",
-    borderRadius: 16,
-    padding: 20,
-    width: "90%",
-    alignSelf: "center",
-  },
-  deleteIcon: {
-    width: 28,
-    height: 28,
-    marginBottom: 10
-  },
-  title: {
-    fontSize: 16,
-    color: "#2D2B32",
-    marginBottom: 4,
-  },
-  address: {
-    fontSize: 12,
-    color: "#4F4D55",
-    marginBottom: 20
-  },
-  buttonRow: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    width: "100%",
-    marginTop: 10,
-  },
-  cancelButton: {
-    flex: 1,
-    marginRight: 8,
-    paddingVertical: 12,
-    backgroundColor: "#F9F9F9",
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: "#E5E5E5",
-    alignItems: "center",
-  },
-  deleteButton: {
-    flex: 1,
-    paddingVertical: 12,
-    borderRadius: 8,
-    alignItems: "center",
-  },
-  cancelText: {
-    fontSize: 16
-  },
-  deleteText: {
-    fontSize: 16,
-    color: "#fff"
-  },
-});
-
-export default DeleteAddressModal;

package/src/components/fontFamily.tsx

@@ -1,33 +0,0 @@
-// constants/fonts.ts
-
-import { AnalyticsEvents } from "../interface";
-import callUIAnalytics from "../postRequest/callUIAnalytics";
-
-export const BoxpayFonts = {
-  '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'),
-
-  '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'),
-};
-
-export async function loadBoxpayFonts() {
-  try {
-    // Dynamically check if expo-font exists
-    const Font = require('expo-font');
-
-    if (Font?.loadAsync) {
-      await Font.loadAsync(BoxpayFonts);
-    }
-  } catch (e) {
-    callUIAnalytics(
-      AnalyticsEvents.SDK_CRASH, 'fontfamily.tsx file',`font not loaded ${e}`
-    )
-  }
-}

package/src/components/getInstalledUPI.ts

@@ -1,32 +0,0 @@
-// 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) {
-      throw new Error(
-        `Failed during the native call to get installed apps : ${error.message}`
-      );
-    } else {
-      throw new Error(
-        `Failed during the native call to get installed apps : ${String(error)}`
-      );
-    }
-  }
-};

package/src/components/header.tsx

@@ -1,112 +0,0 @@
-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, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>{text}</Text>
-          {showDesc && (
-            <Text style={[styles.headerDesc, {fontFamily: checkoutDetails.fontFamily.regular,}]}>
-              {checkoutDetails.itemsLength > 0 && (
-                <>
-                  {checkoutDetails.itemsLength}{' '}
-                  {checkoutDetails.itemsLength === 1 ? 'item' : 'items'} .
-                </>
-              )}
-              Total:
-              <Text style={[styles.amount, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>
-                <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, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>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'
-  },
-  headerDesc: {
-    marginTop: -4,
-    fontSize: 12,
-    color: '#4F4D55'
-  },
-  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',
-    marginBottom: -2,
-  },
-  amount: {
-    fontSize: 12,
-    color: '#4F4D55',
-  },
-  btnContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  currencySymbol: {
-    fontFamily: 'Inter-SemiBold',
-    fontSize: 12,
-    color: '#4F4D55',
-  },
-});

package/src/components/imageLoader.tsx

@@ -1,110 +0,0 @@
-import { useState, useEffect } from "react";
-import { SvgXml } from 'react-native-svg';
-import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
-import { Image, type ImageSourcePropType , View} from "react-native";
-import callUIAnalytics from "../postRequest/callUIAnalytics";
-import { AnalyticsEvents } from "../interface";
-
-interface ImageLoaderProps {
-    image : string,
-    errorImage : ImageSourcePropType
-}
-
-const ImageLoader = ({image , errorImage} : ImageLoaderProps) => {
-    const [error, setImageError] = useState(false);
-    const [load, setLoad] = useState(true);
-    const [extractedImage, setExtractedImage] = useState("");
-    const [svgContent, setSvgContent] = useState("");
-
-    useEffect(() => {
-        if (image != "") {
-          fetch(image)
-          .then((response) => response.text())
-          .then((text) => {
-            // 1. CHECK FOR HIDDEN PNGs (Like the Visa logo)
-            const base64Match = text.match(/xlink:href="(data:image\/[^"]+)"/);
-    
-            if (base64Match && base64Match[1]) {
-              setExtractedImage(base64Match[1]);
-            } else {
-              // 2. CHECK FOR MISSING VIEWBOX (Fixes the cropping issue)
-              let finalSvg = text;
-              
-              if (!finalSvg.includes('viewBox')) {
-                // Try to find width and height to create a viewBox
-                const widthMatch = text.match(/width="([^"]+)"/);
-                const heightMatch = text.match(/height="([^"]+)"/);
-    
-                if (widthMatch && widthMatch[1] && heightMatch && heightMatch[1]) {
-                  const w = parseFloat(widthMatch[1]);
-                  const h = parseFloat(heightMatch[1]);
-                  
-                  // Inject the viewBox into the <svg> tag
-                  // We replace "<svg " with "<svg viewBox="0 0 w h" "
-                  finalSvg = finalSvg.replace(
-                    '<svg ',
-                    `<svg viewBox="0 0 ${w} ${h}" `
-                  );
-                }
-              }
-    
-              setSvgContent(finalSvg);
-            }
-            setLoad(false);
-          })
-          .catch((error) => {
-            callUIAnalytics(AnalyticsEvents.SDK_CRASH, "Image loader componenet", `${error}`)
-            setImageError(true);
-            setLoad(false);
-          });
-        }
-    }, [image]);
-
-    return (
-        <View
-          style={{
-            width: 32,
-            height: 32,
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          {load && !error && (
-            <ShimmerPlaceHolder
-              visible={false} // Keep shimmer until loading is done
-              style={{ width: 32, height: 32, borderRadius: 8 }}
-            />
-          )}
-          {(!error && !load) && (
-            <>
-            {extractedImage && (
-            <Image
-              source={{ uri: extractedImage }}
-              style={{
-                width: '100%',
-                height: '100%',
-                resizeMode: 'contain', // Keeps the aspect ratio correct inside the square
-              }}
-            />
-          )}
-          {svgContent && !extractedImage && (
-            <SvgXml
-              xml={svgContent}
-              width="100%"
-              height="100%"
-              preserveAspectRatio="xMidYMid meet" // Keeps vectors sharp and centered
-            />
-          )}
-            </>
-          )}
-          {error && (
-            <Image
-            source={errorImage}
-            style={{ transform: [{ scale: 0.4 }] }}
-          />
-          )}
-        </View>
-    )
-}
-
-export default ImageLoader