boxpay-checkout-reactnative-sdk 1.0.4 → 1.0.5

package/src/components/circularProgress.tsx

@@ -1,6 +1,7 @@
 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);
 
@@ -15,6 +16,7 @@ const CircularProgressBar = ({
   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, {
@@ -59,7 +61,7 @@ const CircularProgressBar = ({
         style={{
           position: 'absolute',
           fontSize: 22,
-          fontFamily: 'Poppins-SemiBold',
+          fontFamily: fontFamily.semiBold,
           color: textColor,
         }}
       >

package/src/components/cvvInfoBottomSheet.tsx

@@ -14,7 +14,7 @@ const CvvInfoBottomSheet: React.FC<CvvInfoBottomSheetProps> = ({ onClick }) => {
       <Modal isVisible={true} style={styles.modal} onBackdropPress={onClick}>
         <View style={styles.sheet}>
           <Text
-            style={styles.headingText}
+            style={[styles.headingText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
           >
             Where to find CVV?
           </Text>
@@ -22,8 +22,8 @@ const CvvInfoBottomSheet: React.FC<CvvInfoBottomSheetProps> = ({ onClick }) => {
             source={require('../../assets/images/cvv_info_image.png')}
             style={styles.imageStyle}
           />
-          <Text style={styles.secondaryHeading}>Generic position for CVV</Text>
-          <Text style={styles.desc}>
+          <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
@@ -33,21 +33,21 @@ const CvvInfoBottomSheet: React.FC<CvvInfoBottomSheetProps> = ({ onClick }) => {
             source={require('../../assets/images/cvv_info_image_amex.png')}
             style={styles.imageStyle}
           />
-          <Text style={styles.secondaryHeading}>
+          <Text style={[styles.secondaryHeading, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>
             CVV for American Express Card
           </Text>
-          <Text style={styles.desc}>
+          <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.brandColor },
+              { backgroundColor: checkoutDetails.buttonColor ,borderRadius: checkoutDetails.ctaBorderRadius,},
             ]}
             onPress={onClick}
           >
-            <Text style={styles.buttonText}>Got it!</Text>
+            <Text style={[styles.buttonText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>Got it!</Text>
           </Pressable>
         </View>
       </Modal>

package/src/components/deleteAddressModal.tsx

@@ -10,6 +10,7 @@ interface DeletePros {
 }
 
 const DeleteAddressModal = ({ visible, onCancel, onDelete, address } : DeletePros) => {
+  const {checkoutDetails} = checkoutDetailsHandler
   return (
     <Modal
       isVisible={visible}
@@ -27,26 +28,26 @@ const DeleteAddressModal = ({ visible, onCancel, onDelete, address } : DeletePro
         />
 
         {/* Title */}
-        <Text style={styles.title}>Proceed to delete this address?</Text>
+        <Text style={[styles.title, {fontFamily:checkoutDetails.fontFamily.semiBold,}]}>Proceed to delete this address?</Text>
 
         {/* Address Info */}
-        <Text style={styles.address}>{address}</Text>
+        <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}>Cancel</Text>
+            <Text style={[styles.cancelText, {color: checkoutDetails.buttonColor,
+    fontFamily: checkoutDetails.fontFamily.regular}]}>Cancel</Text>
           </TouchableOpacity>
 
-          <TouchableOpacity style={styles.deleteButton} onPress={onDelete}>
-            <Text style={styles.deleteText}>Yes, delete</Text>
+          <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 {brandColor} = checkoutDetailsHandler.checkoutDetails
 const styles = StyleSheet.create({
   modalContainer: {
     backgroundColor: "#fff",
@@ -62,15 +63,13 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 16,
-    fontFamily:"Poppins-SemiBold",
     color: "#2D2B32",
     marginBottom: 4,
   },
   address: {
     fontSize: 12,
     color: "#4F4D55",
-    marginBottom: 20,
-    fontFamily:"Poppins-Regular"
+    marginBottom: 20
   },
   buttonRow: {
     flexDirection: "row",
@@ -91,19 +90,15 @@ const styles = StyleSheet.create({
   deleteButton: {
     flex: 1,
     paddingVertical: 12,
-    backgroundColor: brandColor,
     borderRadius: 8,
     alignItems: "center",
   },
   cancelText: {
-    fontSize: 16,
-    color: brandColor,
-    fontFamily:"Poppins-Regular"
+    fontSize: 16
   },
   deleteText: {
     fontSize: 16,
-    color: "#fff",
-    fontFamily:"Poppins-SemiBold"
+    color: "#fff"
   },
 });
 

package/src/components/fontFamily.tsx

@@ -1,22 +1,33 @@
 // 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'),
-  });
-}
+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');
 
-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'),
-  });
+    if (Font?.loadAsync) {
+      await Font.loadAsync(BoxpayFonts);
+    }
+  } catch (e) {
+    callUIAnalytics(
+      AnalyticsEvents.SDK_CRASH, 'fontfamily.tsx file',`font not loaded ${e}`
+    )
+  }
 }

package/src/components/header.tsx

@@ -30,9 +30,9 @@ const Header: React.FC<HeaderProps> = ({
           />
         </Pressable>
         <View style={styles.headerColumn}>
-          <Text style={styles.headerTitle}>{text}</Text>
+          <Text style={[styles.headerTitle, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>{text}</Text>
           {showDesc && (
-            <Text style={styles.headerDesc}>
+            <Text style={[styles.headerDesc, {fontFamily: checkoutDetails.fontFamily.regular,}]}>
               {checkoutDetails.itemsLength > 0 && (
                 <>
                   {checkoutDetails.itemsLength}{' '}
@@ -40,7 +40,7 @@ const Header: React.FC<HeaderProps> = ({
                 </>
               )}
               Total:
-              <Text style={styles.amount}>
+              <Text style={[styles.amount, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>
                 <Text style={styles.currencySymbol}>
                   {' '}
                   {checkoutDetails.currencySymbol}
@@ -57,7 +57,7 @@ const Header: React.FC<HeaderProps> = ({
                 source={require('../../assets/images/Lock.png')}
                 style={styles.lockIcon}
               />
-              <Text style={styles.secureText}>100% Secure</Text>
+              <Text style={[styles.secureText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>100% Secure</Text>
             </View>
           </View>
         )}
@@ -75,14 +75,12 @@ const styles = StyleSheet.create({
   backArrow: { height: 24, width: 24, marginRight: 8 },
   headerTitle: {
     fontSize: 16,
-    color: '#363840',
-    fontFamily: 'Poppins-SemiBold',
+    color: '#363840'
   },
   headerDesc: {
     marginTop: -4,
     fontSize: 12,
-    color: '#4F4D55',
-    fontFamily: 'Poppins-Regular',
+    color: '#4F4D55'
   },
   headerSecure: {
     flexDirection: 'row',
@@ -96,11 +94,9 @@ const styles = StyleSheet.create({
   secureText: {
     fontSize: 12,
     color: '#1CA672',
-    fontFamily: 'Poppins-SemiBold',
     marginBottom: -2,
   },
   amount: {
-    fontFamily: 'Poppins-SemiBold',
     fontSize: 12,
     color: '#4F4D55',
   },

package/src/components/imageLoader.tsx

@@ -50,8 +50,7 @@ const ImageLoader = ({image , errorImage} : ImageLoaderProps) => {
             }
             setLoad(false);
           })
-          .catch((err) => {
-            console.error("SVG Load Error:", err);
+          .catch(() => {
             setImageError(true);
             setLoad(false);
           });

package/src/components/knowMoreBottomSheet.tsx

@@ -13,13 +13,13 @@ const KnowMoreBottomSheet = ({ onClick }: KnowMoreBottomSheetProps) => {
       <Modal isVisible={true} style={styles.modal} onBackdropPress={onClick}>
         <View style={styles.sheet}>
           <Text
-            style={styles.headingText}
+            style={[styles.headingText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
           >
             RBI Guidelines
           </Text>
 
           <Text
-            style={styles.subHeadingText}
+            style={[styles.subHeadingText, { fontFamily: checkoutDetails.fontFamily.regular,}]}
           >
             As per the new RBI guidelines, we can no longer store your card
             information with us.
@@ -33,7 +33,7 @@ const KnowMoreBottomSheet = ({ onClick }: KnowMoreBottomSheetProps) => {
               style={styles.imageStyle}
             />
             <Text
-              style={styles.subHeadingText}
+              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.
@@ -47,7 +47,7 @@ const KnowMoreBottomSheet = ({ onClick }: KnowMoreBottomSheetProps) => {
               style={styles.imageStyle}
             />
             <Text
-              style={styles.subHeadingText}
+              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.
@@ -56,11 +56,11 @@ const KnowMoreBottomSheet = ({ onClick }: KnowMoreBottomSheetProps) => {
           <Pressable
             style={[
               styles.buttonContainer,
-              { backgroundColor: checkoutDetails.brandColor },
+              { backgroundColor: checkoutDetails.buttonColor, borderRadius: checkoutDetails.ctaBorderRadius, },
             ]}
             onPress={onClick}
           >
-            <Text style={styles.buttonText}>Got it!</Text>
+            <Text style={[styles.buttonText, {fontFamily: checkoutDetails.fontFamily.semiBold}]}>Got it!</Text>
           </Pressable>
         </View>
       </Modal>
@@ -81,20 +81,8 @@ const styles = StyleSheet.create({
     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',
@@ -102,16 +90,13 @@ const styles = StyleSheet.create({
   buttonText: {
     color: 'white',
     fontSize: 16,
-    paddingVertical: 12,
-    fontFamily: 'Poppins-SemiBold',
+    paddingVertical: 12
   },
   headingText : {
-    fontFamily: 'Poppins-SemiBold',
     fontSize: 20,
     color: '#2D2B32',
   },
   subHeadingText : {
-    fontFamily: 'Poppins-Regular',
     fontSize: 14,
     color: '#2D2B32',
     paddingTop: 12

package/src/components/morePaymentContainer.tsx

@@ -1,12 +1,16 @@
 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 }: MorePaymentContainerProps) => {
+const MorePaymentContainer = ({ title, image, surchargeFee, currencySymbol }: MorePaymentContainerProps) => {
+  const {checkoutDetails} = checkoutDetailsHandler
   return (
     <View
       style={{
@@ -16,12 +20,31 @@ const MorePaymentContainer = ({ title, image }: MorePaymentContainerProps) => {
         alignItems: 'center',
       }}
     >
-      <Image source={image} style={{ width: 32, height: 32 }} />
+      <Image 
+        source={image} 
+        style={[
+          { width: 32, height: 32 }, 
+          title === 'EMI' && { transform: [{ scaleX: -1 }] }
+          ]} 
+      />
+      <View
+      style={{
+        flexDirection: 'column',
+        marginLeft: 12 
+      }}>
       <Text
-        style={{ fontSize: 14, fontFamily: 'Poppins-Medium', marginLeft: 12 }}
+        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={{

package/src/components/morePaymentMethods.tsx

@@ -4,13 +4,16 @@ import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler'
 import MorePaymentContainer from './morePaymentContainer';
 import type { CheckoutStackParamList } from '../navigation';
 import { useNavigation, type NavigationProp } from "@react-navigation/native";
+import type { SurchargeProp } from './orderDetails';
 
 interface MorePaymentMethodsArgs{
     savedCards : PaymentClass[],
-    stopTimer : () => void
+    stopTimer : () => void,
+    setSelectedPaymentMethod : (method : string) => void,
+    surchargeDetails : SurchargeProp[]
 }
 
-const MorePaymentMethods = ({savedCards, stopTimer}:MorePaymentMethodsArgs) => {
+const MorePaymentMethods = ({savedCards, stopTimer, setSelectedPaymentMethod, surchargeDetails}:MorePaymentMethodsArgs) => {
   const navigation = useNavigation<NavigationProp<CheckoutStackParamList>>();
     const {checkoutDetails} = checkoutDetailsHandler
     const {
@@ -37,7 +40,7 @@ const MorePaymentMethods = ({savedCards, stopTimer}:MorePaymentMethodsArgs) => {
                           marginTop: 12,
                           fontSize: 14,
                           color: '#020815B5',
-                          fontFamily: 'Poppins-SemiBold',
+                          fontFamily: checkoutDetails.fontFamily.semiBold,
                         }}
                       >
                         More Payment Options
@@ -49,7 +52,7 @@ const MorePaymentMethods = ({savedCards, stopTimer}:MorePaymentMethodsArgs) => {
                           marginTop: 12,
                           fontSize: 14,
                           color: '#020815B5',
-                          fontFamily: 'Poppins-SemiBold',
+                          fontFamily: checkoutDetails.fontFamily.semiBold,
                         }}
                       >
                         Payment Options
@@ -74,12 +77,19 @@ const MorePaymentMethods = ({savedCards, stopTimer}:MorePaymentMethodsArgs) => {
                           style={{ paddingHorizontal: 16, paddingTop: 16 }}
                           onPress= {() => {
                             stopTimer()
+                            setSelectedPaymentMethod("card")
                             navigation.navigate("CardScreen", {})
                           }}
                         >
                           <MorePaymentContainer
                             title="Cards"
                             image={require('../../assets/images/ic_card.png')}
+                            surchargeFee={
+                              (surchargeDetails.find(
+                                item => item.applicable?.toLowerCase() === 'card'
+                              )?.amount)?.toString() ?? ""
+                            }
+                            currencySymbol={checkoutDetails.currencySymbol}
                           />
                           {(isWalletVisible ||
                             isNetBankingVisible ||
@@ -102,12 +112,19 @@ const MorePaymentMethods = ({savedCards, stopTimer}:MorePaymentMethodsArgs) => {
                           style={{ paddingHorizontal: 16, paddingTop: 16 }}
                           onPress={() => {
                             stopTimer()
+                            setSelectedPaymentMethod("wallet")
                             navigation.navigate("WalletScreen", {})
                           }}
                         >
                           <MorePaymentContainer
                             title="Wallet"
                             image={require('../../assets/images/ic_wallet.png')}
+                            surchargeFee={
+                              (surchargeDetails.find(
+                                item => item.applicable?.toLowerCase() === 'wallet'
+                              )?.amount)?.toString() ?? ""
+                            }
+                            currencySymbol={checkoutDetails.currencySymbol}
                           />
                           {(isNetBankingVisible ||
                             isEmiVisible ||
@@ -129,12 +146,19 @@ const MorePaymentMethods = ({savedCards, stopTimer}:MorePaymentMethodsArgs) => {
                           style={{ paddingHorizontal: 16, paddingTop: 16 }}
                           onPress={() => {
                             stopTimer()
+                            setSelectedPaymentMethod("netbanking")
                             navigation.navigate("NetBankingScreen", {})
                           }}
                         >
                           <MorePaymentContainer
                             title="Netbanking"
                             image={require('../../assets/images/ic_netbanking.png')}
+                            surchargeFee={
+                              (surchargeDetails.find(
+                                item => item.applicable?.toLowerCase() === 'netbanking'
+                              )?.amount)?.toString() ?? ""
+                            }
+                            currencySymbol={checkoutDetails.currencySymbol}
                           />
                           {(isEmiVisible || isBNPLVisible) && (
                             <View
@@ -154,12 +178,19 @@ const MorePaymentMethods = ({savedCards, stopTimer}:MorePaymentMethodsArgs) => {
                           style={{ paddingHorizontal: 16, paddingTop: 16 }}
                           onPress={() => {
                             stopTimer()
+                            setSelectedPaymentMethod("emi")
                             navigation.navigate("EmiScreen", {})
                           }}
                         >
                           <MorePaymentContainer
                             title="EMI"
                             image={require('../../assets/images/ic_emi.png')}
+                            surchargeFee={
+                              (surchargeDetails.find(
+                                item => item.applicable?.toLowerCase() === 'emi'
+                              )?.amount)?.toString() ?? ""
+                            }
+                            currencySymbol={checkoutDetails.currencySymbol}
                           />
                           {isBNPLVisible && (
                             <View
@@ -179,12 +210,19 @@ const MorePaymentMethods = ({savedCards, stopTimer}:MorePaymentMethodsArgs) => {
                           style={{ paddingHorizontal: 16, paddingTop: 16 }}
                           onPress={() => {
                             stopTimer()
+                            setSelectedPaymentMethod("buynowpaylater")
                             navigation.navigate("BNPLScreen", {})
                           }}
                         >
                           <MorePaymentContainer
                             title="Pay Later"
                             image={require('../../assets/images/ic_bnpl.png')}
+                            surchargeFee={
+                              (surchargeDetails.find(
+                                item => item.applicable?.toLowerCase() === 'buynowpaylater'
+                              )?.amount)?.toString() ?? ""
+                            }
+                            currencySymbol={checkoutDetails.currencySymbol}
                           />
                         </Pressable>
                       )}