boxpay-checkout-reactnative-sdk 1.0.16 → 1.0.17-beta1

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: {
-    paddingTop: 2,
-    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

package/src/components/knowMoreBottomSheet.tsx

@@ -1,111 +0,0 @@
-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, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
-          >
-            RBI Guidelines
-          </Text>
-
-          <Text
-            style={[styles.subHeadingText, { fontFamily: checkoutDetails.fontFamily.regular,}]}
-          >
-            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, { fontFamily: checkoutDetails.fontFamily.regular,}]}
-            >
-              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,{ fontFamily: checkoutDetails.fontFamily.regular,}]}
-            >
-              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.buttonColor, borderRadius: checkoutDetails.ctaBorderRadius, },
-            ]}
-            onPress={onClick}
-          >
-            <Text style={[styles.buttonText, {fontFamily: checkoutDetails.fontFamily.semiBold}]}>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,
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginTop: 28,
-    backgroundColor: '#1CA672',
-  },
-  buttonText: {
-    color: 'white',
-    fontSize: 16,
-    paddingVertical: 12
-  },
-  headingText : {
-    fontSize: 20,
-    color: '#2D2B32',
-  },
-  subHeadingText : {
-    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

@@ -1,66 +0,0 @@
-import { View, Text, Image } from 'react-native';
-import type { ImageSourcePropType } from 'react-native';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
-
-interface MorePaymentContainerProps {
-  title: string;
-  image: ImageSourcePropType;
-  surchargeFee : string,
-  currencySymbol : string
-}
-
-const MorePaymentContainer = ({ title, image, surchargeFee, currencySymbol }: MorePaymentContainerProps) => {
-  const {checkoutDetails} = checkoutDetailsHandler
-  return (
-    <View
-      style={{
-        flex: 1,
-        flexDirection: 'row',
-        backgroundColor: 'white',
-        alignItems: 'center',
-      }}
-    >
-      <Image 
-        source={image} 
-        style={[
-          { width: 32, height: 32 }, 
-          title === 'EMI' && { transform: [{ scaleX: -1 }] }
-          ]} 
-      />
-      <View
-      style={{
-        flexDirection: 'column',
-        marginLeft: 12 
-      }}>
-      <Text
-        style={{ fontSize: 14, fontFamily: checkoutDetails.fontFamily.medium}}
-      >
-        {title}
-      </Text>
-      {surchargeFee != "" && (
-        <Text
-        style={{ fontSize: 14, fontFamily: checkoutDetails.fontFamily.medium, color : '#32CD32' }}
-      >
-        {currencySymbol}{surchargeFee} extra applied as surcharge
-      </Text>
-      )}
-      </View>
-      <Image
-        source={require('../../assets/images/chervon-down.png')}
-        style={{
-          alignSelf: 'center',
-          height: 6,
-          width: 14,
-          marginLeft: 'auto',
-          transform: [
-            {
-              rotate: '270deg',
-            },
-          ],
-        }}
-      />
-    </View>
-  );
-};
-
-export default MorePaymentContainer;