boxpay-checkout-reactnative-sdk 1.0.0-beta2 → 1.0.0-beta24

package/src/components/morePaymentMethods.tsx

@@ -2,13 +2,15 @@ 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';
+import type { CheckoutStackParamList } from '../navigation';
+import { useNavigation, type NavigationProp } from "@react-navigation/native";
 
 interface MorePaymentMethodsArgs{
     savedCards : PaymentClass[]
 }
 
 const MorePaymentMethods = ({savedCards}:MorePaymentMethodsArgs) => {
+  const navigation = useNavigation<NavigationProp<CheckoutStackParamList>>();
     const {checkoutDetails} = checkoutDetailsHandler
     const {
         isCardMethodEnabled: isCardVisible,
@@ -69,7 +71,9 @@ const MorePaymentMethods = ({savedCards}:MorePaymentMethodsArgs) => {
                       {isCardVisible && savedCards.length == 0 && (
                         <Pressable
                           style={{ paddingHorizontal: 16, paddingTop: 16 }}
-                          onPress={navigateToCardScreen}
+                          onPress= {() => {
+                            navigation.navigate("CardScreen", {})
+                          }}
                         >
                           <MorePaymentContainer
                             title="Cards"
@@ -94,7 +98,9 @@ const MorePaymentMethods = ({savedCards}:MorePaymentMethodsArgs) => {
                       {isWalletVisible && (
                         <Pressable
                           style={{ paddingHorizontal: 16, paddingTop: 16 }}
-                          onPress={navigateToWalletScreen}
+                          onPress={() => {
+                            navigation.navigate("WalletScreen", {})
+                          }}
                         >
                           <MorePaymentContainer
                             title="Wallet"
@@ -118,7 +124,9 @@ const MorePaymentMethods = ({savedCards}:MorePaymentMethodsArgs) => {
                       {isNetBankingVisible && (
                         <Pressable
                           style={{ paddingHorizontal: 16, paddingTop: 16 }}
-                          onPress={navigateToNetBankingScreen}
+                          onPress={() => {
+                            navigation.navigate("NetBankingScreen", {})
+                          }}
                         >
                           <MorePaymentContainer
                             title="Netbanking"
@@ -140,7 +148,9 @@ const MorePaymentMethods = ({savedCards}:MorePaymentMethodsArgs) => {
                       {isEmiVisible && (
                         <Pressable
                           style={{ paddingHorizontal: 16, paddingTop: 16 }}
-                          onPress={navigateToEmiScreen}
+                          onPress={() => {
+                            navigation.navigate("EmiScreen", {})
+                          }}
                         >
                           <MorePaymentContainer
                             title="EMI"
@@ -162,7 +172,9 @@ const MorePaymentMethods = ({savedCards}:MorePaymentMethodsArgs) => {
                       {isBNPLVisible && (
                         <Pressable
                           style={{ paddingHorizontal: 16, paddingTop: 16 }}
-                          onPress={navigateToBNPLScreen}
+                          onPress={() => {
+                            navigation.navigate("BNPLScreen", {})
+                          }}
                         >
                           <MorePaymentContainer
                             title="Pay Later"

package/src/components/paymentFailed.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import Modal from 'react-native-modal';
 import LottieView from 'lottie-react-native';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import callUIAnalytics from '../postRequest/callUIAnalytics';
+import { AnalyticsEvents } from '../interface';
 
 interface PaymentFailedProps {
   onClick: () => void;
@@ -43,7 +45,10 @@ const PaymentFailed: React.FC<PaymentFailedProps> = ({
               styles.buttonContainer,
               { backgroundColor: checkoutDetails.brandColor },
             ]}
-            onPress={onClick}
+            onPress={()=> {
+              callUIAnalytics(AnalyticsEvents.PAYMENT_RESULT_SCREEN_DISPLAYED, "Payment Failed Screen button clicked", errorMessage)
+              onClick()
+            }}
           >
             <Text style={styles.buttonText}>Retry Payment</Text>
           </Pressable>

package/src/components/paymentSuccess.tsx

@@ -3,6 +3,8 @@ import React, { useEffect, useState } from 'react';
 import Modal from 'react-native-modal';
 import LottieView from 'lottie-react-native';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import callUIAnalytics from '../postRequest/callUIAnalytics';
+import { AnalyticsEvents } from '../interface';
 
 interface PaymentSuccessProps {
   onClick: () => void;
@@ -61,7 +63,11 @@ const PaymentSuccess: React.FC<PaymentSuccessProps> = ({
       setDate(formattedDate);
       setTime(formattedTime);
     };
-
+    
+    if(!checkoutDetails.isSuccessScreenVisible) {
+      callUIAnalytics(AnalyticsEvents.PAYMENT_RESULT_SCREEN_DISPLAYED, "Success Screen skipped because merchant does not require", "")
+      onClick()
+    }
     formatTransactionTimestamp();
   });
   return (
@@ -206,7 +212,10 @@ const PaymentSuccess: React.FC<PaymentSuccessProps> = ({
               styles.buttonContainer,
               { backgroundColor: checkoutDetails.brandColor },
             ]}
-            onPress={onClick}
+            onPress={() => {
+              callUIAnalytics(AnalyticsEvents.PAYMENT_RESULT_SCREEN_DISPLAYED, "Success Screen button clicked", "")
+              onClick()
+            }}
           >
             <Text style={styles.buttonText}>Done</Text>
           </Pressable>

package/src/components/savedAddressBottomSheet.tsx

@@ -0,0 +1,135 @@
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Image,
+} from "react-native";
+import Modal from "react-native-modal";
+
+interface Props {
+  visible: boolean;
+  onClose: () => void;
+  onEdit: () => void;
+  onSetDefault: () => void;
+  onDelete: () => void;
+  label: string;
+  address: string;
+  icon: any;
+}
+
+const SavedAddressBottomSheet = ({
+  visible,
+  onClose,
+  onEdit,
+  onSetDefault,
+  onDelete,
+  label,
+  address,
+  icon,
+}: Props) => {
+  return (
+    <Modal
+      isVisible={visible}
+      onBackdropPress={onClose}
+      style={styles.modal}
+      backdropOpacity={0.4}
+    >
+      <View style={styles.container}>
+        {/* Address Info */}
+        <View style={styles.headerContainer}>
+          <Image source={icon} style={styles.icon} />
+          <View style={styles.textContainer}>
+            <Text style={styles.label}>{label}</Text>
+            <Text style={styles.address} numberOfLines={1} ellipsizeMode="tail">
+              {address}
+            </Text>
+          </View>
+        </View>
+
+        {/* Divider */}
+        <View style={styles.divider} />
+
+        {/* Options */}
+        <TouchableOpacity style={styles.option} onPress={onEdit}>
+          <Text style={styles.optionText}>Edit</Text>
+        </TouchableOpacity>
+
+        <TouchableOpacity style={styles.option} onPress={onSetDefault}>
+          <Text style={styles.optionText}>Set as Default</Text>
+        </TouchableOpacity>
+
+        {/* Delete Option */}
+        <TouchableOpacity style={styles.deleteOption} onPress={onDelete}>
+          <Text style={styles.deleteText}>Delete address</Text>
+        </TouchableOpacity>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modal: {
+    justifyContent: "flex-end",
+    margin: 0,
+  },
+  container: {
+    backgroundColor: "#fff",
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    padding: 16,
+  },
+  headerContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 12,
+  },
+  icon: {
+    width: 24,
+    height: 24,
+    marginRight: 12,
+    tintColor: "#000",
+  },
+  textContainer: {
+    flex: 1,
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: "700",
+    color: "#000",
+  },
+  address: {
+    fontSize: 14,
+    color: "#555",
+    marginTop: 4,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: "#ECECED",
+    marginVertical: 12,
+  },
+  option: {
+    paddingVertical: 14,
+    alignItems: "center",
+    backgroundColor: "#fff",
+    borderRadius: 10,
+    marginBottom: 8,
+    borderWidth: 1,
+    borderColor: "#ECECED",
+  },
+  optionText: {
+    fontSize: 16,
+    color: "#000",
+  },
+  deleteOption: {
+    paddingVertical: 14,
+    alignItems: "center",
+  },
+  deleteText: {
+    fontSize: 16,
+    color: "red",
+    fontWeight: "600",
+  },
+});
+
+export default SavedAddressBottomSheet;

package/src/components/savedAddressCard.tsx

@@ -0,0 +1,117 @@
+import type { FetchSavedAddress } from "../interface"
+import { View, Text, Pressable, Image, TouchableOpacity } from 'react-native';
+import { checkoutDetailsHandler } from "../sharedContext/checkoutDetailsHandler";
+import { formatAddress } from "../utils/stringUtils";
+import styles from "../styles/components/savedAddressCardStyles";
+import { userDataHandler } from "../sharedContext/userdataHandler";
+
+
+interface SavedAddressComponentArgs {
+    savedAddressList : FetchSavedAddress[],
+    onClickAddress : (savedAddress : FetchSavedAddress) => void,
+    onClickOtherOptions : (savedAddress : FetchSavedAddress) => void
+}
+
+
+const SavedAddressComponent = ({savedAddressList, onClickAddress, onClickOtherOptions} : SavedAddressComponentArgs) => {
+    const {userData} = userDataHandler
+    const {checkoutDetails} = checkoutDetailsHandler
+
+    return(
+        <View style={{ paddingBottom: 12, paddingHorizontal:16 }}>
+            {savedAddressList.map((address) => (
+        <View key={address.addressRef}>
+          <SavedAddressCard
+          isSelected={
+            address.labelName
+              ? address.labelName === userData.labelName
+              : address.labelType === userData.labelType
+          }
+          labelName = {address.labelName ? address.labelName : address.labelType}
+          labelType = {address.labelType}
+          address = {formatAddress({
+            address1 : address.address1,
+            address2: address.address2,
+            city : address.city,
+            state : address.state,
+            postalCode : address.postalCode,
+            countryCode : address.countryCode,
+            labelName : address.labelName,
+            labelType : address.labelType
+          })}
+          onClickOtherOptions = {()=> {
+            onClickOtherOptions(address)
+          }}
+          onClickAddress = {()=> onClickAddress(address)}
+          brandColor={checkoutDetails.brandColor}
+          phone= {address.phoneNumber}
+          />
+          <View
+            style={{
+              flexDirection: 'row',
+              height: 1,
+              backgroundColor: '#ECECED',
+            }}
+          />
+        </View>
+      ))}
+        </View>
+    )
+
+}
+
+interface SavedAddressCardArgs {
+    isSelected : boolean,
+    labelName : string,
+    labelType : string,
+    address : string,
+    phone : string,
+    onClickOtherOptions : () => void,
+    onClickAddress : () => void,
+    brandColor : string
+}
+
+const SavedAddressCard = ({isSelected, labelType, address, onClickAddress, onClickOtherOptions, labelName, phone}: SavedAddressCardArgs) => {
+
+  const icons = {
+    home: require('../../assets/images/ic_home.png'),
+    work: require('../../assets/images/ic_work.png'),
+    other: require('../../assets/images/ic_other.png'),
+  };
+  const addressIcon =
+    icons[labelType.toLowerCase() as keyof typeof icons] || icons.other;
+  return (
+        <Pressable style={[styles.card, isSelected && styles.cardSelected]} onPress={onClickAddress}>
+      {/* Header Row */}
+      <View style={styles.headerRow}>
+        <View style={styles.labelContainer}>
+        <Image
+            source={addressIcon}
+            style={styles.imageStyle}
+        />
+          <Text style={styles.labelName}>{labelName}</Text>
+
+          {isSelected && (
+            <View style={styles.selectedTag}>
+              <Text style={styles.selectedTagText}>CURRENTLY SELECTED</Text>
+            </View>
+          )}
+        </View>
+
+        {/* More options */}
+        <TouchableOpacity onPress={onClickOtherOptions}>
+        <Image
+            source={require('../../assets/images/ic_more.png')}
+            style={styles.imageStyle}
+        />
+        </TouchableOpacity>
+      </View>
+
+      {/* Address */}
+      <Text style={styles.addressText}>{address}</Text>
+      <Text style = {styles.addressText}>Mobile: {phone}</Text>
+    </Pressable>
+    )
+}
+
+export default SavedAddressComponent

package/src/components/sessionExpire.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import Modal from 'react-native-modal';
 import LottieView from 'lottie-react-native';
 import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import callUIAnalytics from '../postRequest/callUIAnalytics';
+import { AnalyticsEvents } from '../interface';
 
 interface SessionExpireProps {
   onClick: () => void;
@@ -43,7 +45,10 @@ const SessionExpire: React.FC<SessionExpireProps> = ({ onClick }) => {
               styles.buttonContainer,
               { backgroundColor: checkoutDetails.brandColor },
             ]}
-            onPress={onClick}
+            onPress={() => {
+              callUIAnalytics(AnalyticsEvents.PAYMENT_RESULT_SCREEN_DISPLAYED, "Session Expired button clicked", "")
+              onClick()
+            }}
           >
             <Text style={styles.buttonText}>Go back to Home</Text>
           </Pressable>