boxpay-checkout-reactnative-sdk 1.1.7-beta2 → 2.0.1

package/src/components/paymentSelector.tsx

@@ -1,186 +0,0 @@
-import { View, Text, Pressable, StyleSheet } from 'react-native';
-import type { ImageSourcePropType } from 'react-native';
-import { RadioButton } from 'react-native-paper';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
-import type { PaymentClass } from '../interface';
-import ImageLoader from './imageLoader';
-
-interface PaymentSelectorViewProps {
-  providerList: PaymentClass[];
-  onProceedForward: (
-    instrumentType: string,
-    instrumentValue: string,
-    type: string
-  ) => void;
-  isLastUsed?: boolean | null;
-  errorImage: ImageSourcePropType;
-  onClickRadio: (selctedInstrumentValue: string) => void;
-}
-
-const PaymentSelectorView = ({
-  providerList,
-  onProceedForward,
-  isLastUsed,
-  errorImage,
-  onClickRadio,
-}: PaymentSelectorViewProps) => {
-  const { checkoutDetails } = checkoutDetailsHandler;
-  return (
-    <View>
-      {providerList.map((provider, index) => (
-        <View key={provider.id}>
-          <PaymentSelector
-            id={provider.id}
-            title={provider.displayValue}
-            image={provider.iconUrl}
-            errorImage={errorImage}
-            isSelected={provider.isSelected}
-            instrumentTypeValue={provider.instrumentTypeValue}
-            isLastUsed={isLastUsed && provider.isLastUsed}
-            onPress={onClickRadio}
-            onProceedForward={(displayValue, instrumentValue) => {
-              onProceedForward(displayValue, instrumentValue, provider.type);
-            }}
-            brandColor={checkoutDetails.buttonColor || '#1CA672'}
-            currencySymbol={checkoutDetails.currencySymbol || '₹'}
-            amount={checkoutDetails.amount}
-          />
-          {index !== providerList.length - 1 && (
-            <View
-              style={{
-                flexDirection: 'row',
-                height: 1,
-                backgroundColor: '#ECECED',
-              }}
-            />
-          )}
-        </View>
-      ))}
-    </View>
-  );
-};
-
-interface PaymentSelectorProps {
-  id: string;
-  title: string;
-  image: string;
-  errorImage: ImageSourcePropType;
-  isSelected: boolean | null;
-  instrumentTypeValue: string;
-  isLastUsed?: boolean | null;
-  onPress: (id: string) => void;
-  onProceedForward: (instrumentType: string, instrumentValue: string) => void;
-  brandColor: string;
-  currencySymbol: string;
-  amount: string;
-}
-
-const PaymentSelector = ({
-  id,
-  title,
-  image,
-  errorImage,
-  isSelected,
-  instrumentTypeValue,
-  isLastUsed,
-  onPress,
-  onProceedForward,
-  brandColor,
-  currencySymbol,
-  amount,
-}: PaymentSelectorProps) => {
-  
-  const { checkoutDetails } = checkoutDetailsHandler;
-  return (
-    <View
-      style={{
-        paddingVertical: 16,
-        paddingHorizontal: 12,
-        backgroundColor: isSelected ? '#EDF8F4' : 'white',
-        borderRadius: isSelected ? 0 : 12,
-      }}
-    >
-      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-        <ImageLoader image={image} errorImage={errorImage}/>
-
-        <View style={{ paddingStart: 12, flex: 1 }}>
-          <Text
-            style={{
-              fontFamily: checkoutDetails.fontFamily.semiBold,
-              fontSize: 14,
-              color: '#4F4D55',
-            }}
-            onPress={() => onPress(id)}
-            numberOfLines={1}
-            ellipsizeMode="tail"
-          >
-            {title}
-          </Text>
-          {isLastUsed && (
-            <View style={styles.tag}>
-              <Text style={[styles.tagText, {fontFamily: checkoutDetails.fontFamily.medium,}]}>Last Used</Text>
-            </View>
-          )}
-        </View>
-        <RadioButton
-          value={id}
-          status={isSelected ? 'checked' : 'unchecked'}
-          onPress={() => onPress(id)}
-          color={brandColor}
-          uncheckedColor={'#01010273'}
-        />
-      </View>
-      {isSelected && (
-        <Pressable
-          style={[styles.buttonContainer, { backgroundColor: brandColor, borderRadius: checkoutDetails.ctaBorderRadius, }]}
-          onPress={() => {
-            onProceedForward(title, instrumentTypeValue);
-          }}
-        >
-          <Text style={[styles.buttonText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>
-            Proceed to Pay{' '}
-            <Text
-              style={{
-                fontFamily: 'Inter-SemiBold',
-                fontSize: 16,
-                color: 'white',
-              }}
-            >
-              {' '}
-              {currencySymbol}
-            </Text>
-            {amount}
-          </Text>
-        </Pressable>
-      )}
-    </View>
-  );
-};
-
-export default PaymentSelectorView;
-
-const styles = StyleSheet.create({
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginTop: 10,
-    paddingVertical: 12,
-  },
-  buttonText: {
-    color: 'white',
-    fontSize: 16
-  },
-  tag: {
-    borderColor: '#1CA672',
-    borderRadius: 6,
-    backgroundColor: '#1CA67214',
-    borderWidth: 0.5,
-    paddingHorizontal: 4,
-    marginTop: 4,
-    alignSelf: 'flex-start',
-  },
-  tagText: {
-    fontSize: 10,
-    color: '#1CA672',
-  },
-});

package/src/components/paymentSuccess.tsx

@@ -1,266 +0,0 @@
-import { View, Text, StyleSheet, Pressable } from 'react-native';
-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;
-  transactionId: string;
-  method: string;
-  localDateTime: string;
-}
-
-const PaymentSuccess: React.FC<PaymentSuccessProps> = ({
-  onClick,
-  transactionId,
-  localDateTime,
-}) => {
-  const { checkoutDetails } = checkoutDetailsHandler;
-  const [date, setDate] = useState('');
-  const [time, setTime] = useState('');
-  useEffect(() => {
-    const formatTransactionTimestamp = () => {
-      const parts = localDateTime.split(' ');
-      const localDate = parts[0] || '';
-      const localTime = parts[1] || '';
-
-      const dateParts = localDate.split('/');
-      const day = dateParts[0] || '';
-      const month = dateParts[1] || '';
-      const year = dateParts[2] || '';
-
-      const timeParts = localTime.split(':');
-      const hour = timeParts[0] || '0';
-      const minute = timeParts[1] || '0';
-
-      // Map month number to short month name
-      const monthNames: { [key: string]: string } = {
-        '01': 'Jan',
-        '02': 'Feb',
-        '03': 'Mar',
-        '04': 'Apr',
-        '05': 'May',
-        '06': 'Jun',
-        '07': 'Jul',
-        '08': 'Aug',
-        '09': 'Sep',
-        '10': 'Oct',
-        '11': 'Nov',
-        '12': 'Dec',
-      };
-
-      const formattedDate = `${monthNames[month] || 'Jan'} ${day}, ${year}`; // e.g., "Feb 25, 2025"
-
-      // Convert 24-hour to 12-hour format
-      const hourInt = parseInt(hour, 10);
-      const amPm = hourInt >= 12 ? 'PM' : 'AM';
-      const formattedHour = (hourInt % 12 || 12).toString().padStart(2, '0'); // Convert "13" to "1"
-      const formattedTime = `${formattedHour}:${minute} ${amPm}`;
-
-      setDate(formattedDate);
-      setTime(formattedTime);
-    };
-    
-    if(!checkoutDetails.isSuccessScreenVisible) {
-      callUIAnalytics(AnalyticsEvents.PAYMENT_RESULT_SCREEN_DISPLAYED, "Success Screen skipped because merchant does not require", "")
-      onClick()
-    }
-    formatTransactionTimestamp();
-  });
-  return (
-    <View>
-      <Modal isVisible={true} style={styles.modal}>
-        <View style={styles.sheet}>
-          <LottieView
-            source={require('../../assets/animations/payment_successful.json')}
-            autoPlay
-            loop={false}
-            speed={0.6}
-            style={{ width: 90, height: 90, alignSelf: 'center' }}
-          />
-          <Text style={[styles.successfulHeading, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>Payment Successful!</Text>
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              paddingTop: 24,
-            }}
-          >
-            <Text
-              style={{
-                fontSize: 14,
-                color: '#000000',
-                fontFamily: checkoutDetails.fontFamily.regular,
-              }}
-            >
-              Transaction ID
-            </Text>
-            <Text
-              style={{
-                fontSize: 14,
-                color: '#000000',
-                fontFamily: checkoutDetails.fontFamily.semiBold,
-              }}
-            >
-              {transactionId}
-            </Text>
-          </View>
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              paddingTop: 14,
-            }}
-          >
-            <Text
-              style={{
-                fontSize: 14,
-                color: '#000000',
-                fontFamily: checkoutDetails.fontFamily.regular,
-              }}
-            >
-              Date
-            </Text>
-            <Text
-              style={{
-                fontSize: 14,
-                color: '#000000',
-                fontFamily: checkoutDetails.fontFamily.semiBold,
-              }}
-            >
-              {date}
-            </Text>
-          </View>
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              paddingTop: 14,
-            }}
-          >
-            <Text
-              style={{
-                fontSize: 14,
-                color: '#000000',
-                fontFamily: checkoutDetails.fontFamily.regular,
-              }}
-            >
-              Time
-            </Text>
-            <Text
-              style={{
-                fontSize: 14,
-                color: '#000000',
-                fontFamily: checkoutDetails.fontFamily.semiBold,
-              }}
-            >
-              {time}
-            </Text>
-          </View>
-          {/* <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingTop: 14 }}>
-                        <Text style={{ fontSize: 14, color: '#000000', fontFamily: checkoutDetails.fontFamily.regular }}>Payment Method</Text>
-                        <Text style={{ fontSize: 14, color: '#000000', fontFamily: checkoutDetails.fontFamily.semiBold }}>{method}</Text>
-                    </View> */}
-          <View style={styles.dashedLine} />
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              paddingTop: 10,
-            }}
-          >
-            <Text
-              style={{
-                fontSize: 14,
-                color: '#000000',
-                fontFamily: checkoutDetails.fontFamily.semiBold,
-              }}
-            >
-              Total Amount
-            </Text>
-            <Text
-              style={{
-                fontSize: 18,
-                color: '#000000',
-                fontFamily: checkoutDetails.fontFamily.semiBold,
-              }}
-            >
-              <Text
-                style={{
-                  fontSize: 16,
-                  color: '#000000',
-                  fontFamily: 'Inter-SemiBold',
-                }}
-              >
-                {checkoutDetails.currencySymbol}
-              </Text>
-              {checkoutDetails.amount}
-            </Text>
-          </View>
-          <View style={styles.dashedLine} />
-          {/* <Text
-                        style={{
-                            fontSize: 12, fontFamily: checkoutDetails.fontFamily.regular,
-                            color: '#4F4D55', alignSelf: 'center', paddingBottom: 16, paddingTop: 12
-                        }}
-                    >You will be redirected to the merchant's page</Text> */}
-          <Pressable
-            style={[
-              styles.buttonContainer,
-              { backgroundColor: checkoutDetails.buttonColor, borderRadius: checkoutDetails.ctaBorderRadius, },
-            ]}
-            onPress={() => {
-              callUIAnalytics(AnalyticsEvents.PAYMENT_RESULT_SCREEN_DISPLAYED, "Success Screen button clicked", "")
-              onClick()
-            }}
-          >
-            <Text style={[styles.buttonText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>Done</Text>
-          </Pressable>
-        </View>
-      </Modal>
-    </View>
-  );
-};
-
-export default PaymentSuccess;
-
-const styles = StyleSheet.create({
-  modal: {
-    justifyContent: 'flex-end',
-    margin: 0,
-  },
-  sheet: {
-    backgroundColor: 'white',
-    padding: 20,
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-  },
-  successfulHeading: {
-    color: '#019939',
-    fontSize: 20,
-    alignSelf: 'center',
-    paddingTop: 8,
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginTop: 12,
-    backgroundColor: '#1CA672',
-    paddingVertical: 14,
-  },
-  buttonText: {
-    color: 'white',
-    fontSize: 16,
-  },
-  dashedLine: {
-    borderBottomWidth: 2, // Thickness of the line
-    borderBottomColor: '#E6E6E6', // Color of the line
-    borderStyle: 'dashed', // Makes it dashed
-    width: '100%', // Full width
-    marginVertical: 10, // Some spacing
-    marginTop: 16,
-  },
-});

package/src/components/savedAddressBottomSheet.tsx

@@ -1,123 +0,0 @@
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-  Image,
-  type ImageSourcePropType,
-} from "react-native";
-import Modal from "react-native-modal";
-import { checkoutDetailsHandler } from "../sharedContext/checkoutDetailsHandler";
-
-interface Props {
-  visible: boolean;
-  onClose: () => void;
-  onEdit: () => void;
-  onSetDefault: () => void;
-  onDelete: () => void;
-  label: string;
-  address: string;
-  icon: ImageSourcePropType;
-}
-
-const SavedAddressBottomSheet = ({
-  visible,
-  onClose,
-  onEdit,
-  onSetDefault,
-  onDelete,
-  label,
-  address,
-  icon,
-}: Props) => {
-  const {checkoutDetails} = checkoutDetailsHandler
-  return (
-    <Modal
-      isVisible={visible}
-      onBackdropPress={onClose}
-      style={styles.modal}
-      backdropOpacity={0.4}
-    >
-      <View style={styles.container}>
-        {/* Address Info */}
-        <View>
-          <View style={styles.headerContainer}>
-            <Image source={icon} style={styles.icon} />
-            <Text style={[styles.label, {fontFamily:checkoutDetails.fontFamily.semiBold,}]}>{label}</Text>
-          </View>
-          <Text style={[styles.address, {fontFamily: checkoutDetails.fontFamily.regular,}]} numberOfLines={1} ellipsizeMode="tail">
-              {address}
-            </Text>
-        </View>
-
-        {/* Options */}
-        <TouchableOpacity style={styles.option} onPress={onEdit}>
-          <Text style={[styles.optionText, {fontFamily: checkoutDetails.fontFamily.regular}]}>Edit</Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity style={styles.option} onPress={onSetDefault}>
-          <Text style={[styles.optionText, {fontFamily: checkoutDetails.fontFamily.regular}]}>Set as Default</Text>
-        </TouchableOpacity>
-
-        {/* Delete Option */}
-        <TouchableOpacity style={styles.deleteOption} onPress={onDelete}>
-          <Text style={[styles.deleteText, { fontFamily: checkoutDetails.fontFamily.regular}]}>Delete address</Text>
-        </TouchableOpacity>
-      </View>
-    </Modal>
-  );
-};
-
-const styles = StyleSheet.create({
-  modal: {
-    justifyContent: "flex-end",
-    margin: 0,
-  },
-  container: {
-    backgroundColor: "#F5F6FB",
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    padding: 16,
-  },
-  headerContainer: {
-    flexDirection: "row",
-  },
-  icon: {
-    width: 20,
-    height: 20,
-    marginRight: 12,
-    tintColor: "#2D2B32",
-  },
-  label: {
-    fontSize: 16,
-    color: "#2D2B32",
-  },
-  address: {
-    fontSize: 14,
-    color: "#4F4D55",
-    marginTop:4,
-    marginBottom:20
-  },
-  option: {
-    paddingVertical: 14,
-    alignItems: "center",
-    backgroundColor: "#fff",
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: "#ECECED",
-  },
-  optionText: {
-    fontSize: 16,
-    color: "#2D2B32",
-  },
-  deleteOption: {
-    paddingVertical: 14,
-    alignItems: "center",
-  },
-  deleteText: {
-    fontSize: 16,
-    color: "#FF4D4F"
-  },
-});
-
-export default SavedAddressBottomSheet;

package/src/components/savedAddressCard.tsx

@@ -1,113 +0,0 @@
-import type { FetchSavedAddress } from "../interface"
-import { View, Text, Pressable, Image, TouchableOpacity } from 'react-native';
-import { formatAddress } from '../utility';
-import styles from "../styles/components/savedAddressCardStyles";
-import { userDataHandler } from "../sharedContext/userdataHandler";
-import { checkoutDetailsHandler } from "../sharedContext/checkoutDetailsHandler";
-
-
-interface SavedAddressComponentArgs {
-    savedAddressList : FetchSavedAddress[],
-    onClickAddress : (savedAddress : FetchSavedAddress) => void,
-    onClickOtherOptions : (savedAddress : FetchSavedAddress) => void
-}
-
-
-const SavedAddressComponent = ({savedAddressList, onClickAddress, onClickOtherOptions} : SavedAddressComponentArgs) => {
-    const {userData} = userDataHandler
-    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)}
-          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,
-}
-
-const SavedAddressCard = ({isSelected, labelType, address, onClickAddress, onClickOtherOptions, labelName, phone}: SavedAddressCardArgs) => {
-  const {checkoutDetails} = checkoutDetailsHandler
-  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, {marginBottom:10}]}>
-        <Image
-            source={addressIcon}
-            style={styles.imageStyle}
-        />
-          <Text style={[styles.labelName, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>{labelName}</Text>
-
-          {isSelected && (
-            <View style={styles.selectedTag}>
-              <Text style={[styles.selectedTagText, {fontFamily: checkoutDetails.fontFamily.medium,}]}>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, {fontFamily: checkoutDetails.fontFamily.regular,}]}>{address}</Text>
-      <Text style = {[styles.addressText, {fontFamily: checkoutDetails.fontFamily.regular,}]}>Mobile: {phone}</Text>
-    </Pressable>
-    )
-}
-
-export default SavedAddressComponent