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

package/src/components/addressCard.tsx

@@ -1,219 +0,0 @@
-import { View, Text, Pressable, Image } from 'react-native';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
-import { userDataHandler } from '../sharedContext/userdataHandler';
-import styles from '../styles/components/addressCardStyles';
-
-interface AddressCardProps {
-    address:string,
-    navigateToAddressScreen : ()=> void,
-}
-
-const AddressComponent = ({address, navigateToAddressScreen} : AddressCardProps) => {
-    const {checkoutDetails} = checkoutDetailsHandler
-    const {userData} = userDataHandler
-    return (
-        <View>
-            {address != '' && checkoutDetails.isShippingAddressEnabled && (
-                <View>
-                  <Text
-                    style={[styles.titleText, {fontFamily : checkoutDetails.fontFamily.semiBold}]}
-                  >
-                    Address
-                  </Text>
-                  <Pressable
-                    style={[styles.pressableContainer, {borderRadius: checkoutDetails.ctaBorderRadius,}]}
-                    onPress={() => {
-                      if (checkoutDetails.isShippingAddressEditable) {
-                        navigateToAddressScreen();
-                      }
-                    }}
-                  >
-                    <Image
-                      source={require('../../assets/images/ic_location.png')}
-                      style={styles.imageStyle}
-                    />
-                    <View
-                      style={styles.insideContainer}
-                    >
-                      <Text
-                        style={[styles.insideContainerNormalText, {fontFamily: checkoutDetails.fontFamily.regular}]}
-                      >
-                        Deliver at{' '}
-                        <Text
-                          style={[styles.insideContainerHighlighedText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
-                        >
-                          {userData.labelType === 'Other' ? userData.labelName : userData.labelType}
-                        </Text>
-                      </Text>
-                      <Text
-                        numberOfLines={1}
-                        ellipsizeMode="tail"
-                        style={[styles.insideContainerDesc, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
-                      >
-                        {address}
-                      </Text>
-                    </View>
-                    {checkoutDetails.isShippingAddressEditable && (
-                      <Image
-                      source={require('../../assets/images/chervon-down.png')}
-                      style={{
-                        alignSelf: 'center',
-                        height: 6,
-                        width: 14,
-                        marginTop : 4,
-                        marginRight :10,
-                        transform: [
-                          {
-                            rotate: '270deg',
-                          },
-                        ],
-                      }}
-                    />
-                    )}
-                  </Pressable>
-                </View>
-              )}
-
-              {address == '' && checkoutDetails.isShippingAddressEnabled && (
-                <View>
-                  <Text
-                    style={[styles.titleText, {fontFamily : checkoutDetails.fontFamily.semiBold}]}
-                  >
-                    Address
-                  </Text>
-                  <Pressable
-                    style={[styles.pressableContainer, {borderRadius: checkoutDetails.ctaBorderRadius,}]}
-                    onPress={() => {
-                      if (checkoutDetails.isShippingAddressEditable) {
-                        navigateToAddressScreen();
-                      }
-                    }}
-                  >
-                    <Image
-                      source={require('../../assets/images/add_icon.png')}
-                      style={[styles.imageStyle, {tintColor: checkoutDetails.buttonColor}]}
-                    />
-                    <Text
-                      numberOfLines={1}
-                      ellipsizeMode="tail"
-                      style={[styles.insideContainerClickableText, {color: checkoutDetails.buttonColor,
-                        fontFamily: checkoutDetails.fontFamily.semiBold,}]}
-                    >
-                      Add new address
-                    </Text>
-                    {checkoutDetails.isShippingAddressEditable && (
-                      <Image
-                      source={require('../../assets/images/chervon-down.png')}
-                      style={{
-                        alignSelf: 'center',
-                        height: 6,
-                        width: 14,
-                        marginTop : 14,
-                        marginRight :10,
-                        marginLeft: 'auto',
-                        transform: [
-                          {
-                            rotate: '270deg',
-                          },
-                        ],
-                      }}
-                    />
-                    )}
-                  </Pressable>
-                </View>
-              )}
-
-              {(checkoutDetails.isFullNameEnabled || checkoutDetails.isPhoneEnabled || checkoutDetails.isEmailEnabled) &&
-                !checkoutDetails.isShippingAddressEnabled && (
-                  <View>
-                    <Text
-                      style={[styles.titleText, {fontFamily : checkoutDetails.fontFamily.semiBold}]}
-                    >
-                      Personal Details
-                    </Text>
-                    <Pressable
-                      style={[styles.pressableContainer, {borderRadius: checkoutDetails.ctaBorderRadius,}]}
-                      onPress={() => {
-                        if (
-                            checkoutDetails.isFullNameEditable ||
-                            checkoutDetails.isPhoneEditable ||
-                            checkoutDetails.isEmailEditable
-                        ) {
-                          navigateToAddressScreen();
-                        }
-                      }}
-                    >
-                      {(userData.firstName != '' || userData.completePhoneNumber != '' || userData.email != '') && (
-                        <>
-                          <Image
-                            source={require('../../assets/images/ic_user.png')}
-                            style={styles.imageStyle}
-                          />
-                          <View
-                            style={styles.insideContainer}
-                          >
-                            <Text
-                              style={[styles.insideContainerHighlighedText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
-                            >
-                              {userData.firstName} {userData.lastName} | {' '}
-                              <Text
-                                style={[styles.insideContainerHighlighedText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
-                              >
-                                {userData.completePhoneNumber}
-                              </Text>
-                            </Text>
-                            <Text
-                              numberOfLines={1}
-                              ellipsizeMode="tail"
-                              style={[styles.insideContainerDesc, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
-                            >
-                              {userData.email}
-                            </Text>
-                          </View>
-                        </>
-                      )}
-                      {(userData.firstName == '' || userData.completePhoneNumber == '' || userData.email == '') && (
-                        <>
-                          <Image
-                            source={require('../../assets/images/add_icon.png')}
-                            style={styles.imageStyle}
-                          />
-                          <Text
-                            numberOfLines={1}
-                            ellipsizeMode="tail"
-                            style={[styles.insideContainerClickableText, {color: checkoutDetails.buttonColor,
-                              fontFamily: checkoutDetails.fontFamily.semiBold,}]}
-                          >
-                            Add personal details
-                          </Text>
-                        </>
-                      )}
-
-                      {(checkoutDetails.isFullNameEditable ||
-                            checkoutDetails.isPhoneEditable ||
-                            checkoutDetails.isEmailEditable) && (
-                      <Image
-                      source={require('../../assets/images/chervon-down.png')}
-                      style={{
-                        alignSelf: 'center',
-                        height: 6,
-                        width: 14,
-                        marginTop : 14,
-                        marginRight :4,
-                        marginLeft: 'auto',
-                        transform: [
-                          {
-                            rotate: '270deg',
-                          },
-                        ],
-                      }}
-                    />
-                    )}
-                    </Pressable>
-                  </View>
-              )}
-        </View>
-    )
-}
-
-export default AddressComponent

package/src/components/applyCouponCard.tsx

@@ -1,197 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-  Image,
-} from 'react-native';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
-
-interface Props {
-  selectedColor: string;
-  code: string;
-  description: string;
-  discountAmount: string;
-  currencySymbol: string;
-  isCodeApplied: boolean;
-
-  onClickApply: (code: string) => void;
-  onClickRemove: () => void;
-  onClickViewAll: () => void;
-}
-
-const ApplyCouponCard: React.FC<Props> = ({
-  selectedColor,
-  code,
-  description,
-  discountAmount,
-  currencySymbol,
-  isCodeApplied,
-  onClickApply,
-  onClickRemove,
-  onClickViewAll,
-}) => {
-  const {checkoutDetails} = checkoutDetailsHandler
-  return (
-    <View style={styles.container}>
-      {/* Top Row */}
-      <View style={styles.row}>
-        {/* Offer Icon */}
-        <View style={styles.iconWrapper}>
-          <Image
-            source={require('../../assets/images/ic_offer_tag.png')}
-            style={[
-              styles.icon,{
-                transform: [
-                  {
-                    rotate: '180deg',
-                  },
-                ],
-              }
-            ]}
-            resizeMode="contain"
-          />
-        </View>
-
-        {/* Text Section */}
-        <View style={styles.textContainer}>
-          <Text style={[styles.codeText, {fontFamily : checkoutDetails.fontFamily.semiBold}]}>
-            {isCodeApplied ? `${code} Applied!` : code}
-          </Text>
-
-          {isCodeApplied ? (
-            <Text style={[styles.savedText, {fontFamily : checkoutDetails.fontFamily.regular}]}>
-              Yay! You saved{' '}
-              <Text style={[styles.currency, {fontFamily : checkoutDetails.fontFamily.semiBold}]}>
-                {currencySymbol}
-              </Text>
-              {discountAmount} on this order
-            </Text>
-          ) : (
-            <Text
-              numberOfLines={1}
-              ellipsizeMode="tail"
-              style={[styles.description, {fontFamily : checkoutDetails.fontFamily.regular}]}
-            >
-              {description}
-            </Text>
-          )}
-        </View>
-
-        {/* Apply / Remove */}
-        <TouchableOpacity
-          onPress={() =>
-            isCodeApplied
-              ? onClickRemove()
-              : onClickApply(code)
-          }
-        >
-          <Text
-            style={[
-              styles.actionText,
-              {
-                color: isCodeApplied
-                  ? '#E84142'
-                  : selectedColor,
-              },
-            ]}
-          >
-            {isCodeApplied ? 'Remove' : 'Apply'}
-          </Text>
-        </TouchableOpacity>
-      </View>
-
-      {/* Divider */}
-      <View style={styles.divider} />
-
-      {/* View All */}
-      <TouchableOpacity onPress={onClickViewAll}>
-        <Text
-          style={[
-            styles.viewAll,
-            { color: selectedColor,
-              fontFamily : checkoutDetails.fontFamily.semiBold
-             },
-          ]}
-        >
-          View All &gt;
-        </Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-export default ApplyCouponCard;
-
-const styles = StyleSheet.create({
-    container: {
-      backgroundColor: '#FFF',
-      borderRadius: 10,
-      overflow: 'hidden',
-    },
-  
-    row: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      paddingHorizontal: 16,
-      paddingVertical: 8,
-    },
-  
-    iconWrapper: {
-      borderWidth: 1,
-      borderColor: '#E6E6E6',
-      borderRadius: 6,
-      padding: 6,
-    },
-  
-    icon: {
-      width: 24,
-      height: 24,
-    },
-  
-    textContainer: {
-      flex: 1,
-      marginLeft: 6,
-      marginRight: 18,
-    },
-  
-    codeText: {
-      fontSize: 14,
-      fontWeight: '600',
-      color: '#1C1D20',
-    },
-  
-    description: {
-      fontSize: 12,
-      color: '#1C1D20',
-      marginTop: 2,
-    },
-  
-    savedText: {
-      fontSize: 12,
-      color: '#019939',
-      marginTop: 2,
-    },
-  
-    currency: {
-      fontWeight: '600',
-    },
-  
-    actionText: {
-      fontSize: 14,
-      fontWeight: '600',
-    },
-  
-    divider: {
-      height: 1,
-      backgroundColor: '#E6E6E6',
-    },
-  
-    viewAll: {
-      textAlign: 'center',
-      paddingVertical: 10,
-      fontSize: 14,
-      fontWeight: '600',
-    },
-  });

package/src/components/bankCard.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { View, Text, Image, TouchableOpacity } from 'react-native';
-import styles from '../styles/components/bankCardStyles';
-import ImageLoader from './imageLoader';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
-
-interface BankCardProps {
-  name: string;
-  iconUrl: string;
-  hasNoCostEmi: boolean;
-  hasLowCostEmi: boolean;
-  onPress: () => void;
-}
-
-const BankCard: React.FC<BankCardProps> = ({
-  name,
-  iconUrl,
-  hasNoCostEmi,
-  hasLowCostEmi,
-  onPress,
-}) => {
-  const {checkoutDetails} = checkoutDetailsHandler
-  return (
-    <TouchableOpacity style={styles.container} onPress={onPress}>
-      <ImageLoader image={iconUrl} errorImage={require('../../assets/images/ic_netbanking_semi_bold.png')}/>
-      <View style={styles.detailsContainer}>
-        <Text style={[styles.bankName, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>{name}</Text>
-        <View style={styles.tagsContainer}>
-          {hasNoCostEmi && (
-            <View style={styles.tag}>
-              <Text style={[styles.tagText, {fontFamily: checkoutDetails.fontFamily.medium,}]}>NO COST EMI</Text>
-            </View>
-          )}
-          {hasLowCostEmi && (
-            <View style={styles.tag}>
-              <Text style={[styles.tagText, {fontFamily: checkoutDetails.fontFamily.medium,}]}>LOW COST EMI</Text>
-            </View>
-          )}
-        </View>
-      </View>
-
-      <Image
-        source={require('../../assets/images/chervon-down.png')}
-        style={styles.chervonImage}
-      />
-    </TouchableOpacity>
-  );
-};
-
-export default BankCard;

package/src/components/cancelPaymentModal.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import { View, Text, Image, Pressable } from 'react-native';
-import Modal from 'react-native-modal';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
-import styles from '../styles/components/cancelPaymentModalStyles';
-
-interface CancelPaymentModalProps {
-  onYesClick: () => void;
-  onNoClick: () => void;
-}
-
-const CancelPaymentModal: React.FC<CancelPaymentModalProps> = ({
-  onYesClick,
-  onNoClick,
-}) => {
-  const { checkoutDetails } = checkoutDetailsHandler;
-
-  return (
-    <View style={styles.modalContainer}>
-      <Modal isVisible={true} style={styles.modal}>
-        <View style={styles.modalContent}>
-          <View style={styles.iconContainer}>
-            <Image
-              source={require('../../assets/images/ic_info.png')}
-              style={styles.iconImage}
-            />
-            <Text style={[styles.modalTitle, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>Cancel Transaction?</Text>
-          </View>
-          <Text style={[styles.modalText, {fontFamily: checkoutDetails.fontFamily.regular,}]}>
-            Are you sure you want to cancel the transaction?
-          </Text>
-
-          <View style={styles.buttonContainer}>
-            <Pressable
-              style={[
-                styles.cancelButton,
-                { borderColor: '#E6E6E6', borderWidth: 1, borderRadius: checkoutDetails.ctaBorderRadius, },
-              ]}
-              onPress={onNoClick}
-            >
-              <Text
-                style={[
-                  styles.buttonText,
-                  { color: checkoutDetails.buttonColor,
-                    fontFamily: checkoutDetails.fontFamily.regular,
-                  },
-                ]}
-              >
-                Not now
-              </Text>
-            </Pressable>
-            <Pressable
-              style={[
-                styles.confirmButton,
-                { backgroundColor: checkoutDetails.buttonColor, borderRadius: checkoutDetails.ctaBorderRadius, },
-              ]}
-              onPress={onYesClick}
-            >
-              <Text style={[styles.confirmButtonText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>Yes</Text>
-            </Pressable>
-          </View>
-        </View>
-      </Modal>
-    </View>
-  );
-};
-
-export default CancelPaymentModal;

package/src/components/checkboxContainer.tsx

@@ -1,75 +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
-    const {isSICheckboxEnabled} = checkoutDetails
-    return(
-        <View
-        style={styles.checkBoxContainer}>
-          <TouchableOpacity
-            onPress={() => onCheckBoxClicked()}
-            disabled={!isSICheckboxEnabled}
-          >
-            <View style={[
-              styles.checkboxBox,
-              { borderColor: checkoutDetails.buttonColor },
-              !isSICheckboxEnabled && styles.disabledBox,
-              isCheckBoxSelected && { backgroundColor: checkoutDetails.buttonColor }
-            ]}>
-              {isCheckBoxSelected && (
-                <Text style={styles.checkmark}>✓</Text>
-              )}
-            </View>
-          </TouchableOpacity>
-          <Text
-            style={[styles.checkBoxText, {fontFamily: checkoutDetails.fontFamily.regular},!isSICheckboxEnabled && styles.disabledText]}
-          >
-            {text}
-          </Text>
-        </View>
-    )
-}
-
-const styles = StyleSheet.create({
-    checkBoxContainer : {
-      flexDirection: 'row',
-      marginTop: 10,
-      alignItems: 'center',
-      marginHorizontal: 16
-  },
-  checkBoxText : {
-      color: '#2D2B32',
-      fontSize: 14,
-      marginLeft: 6
-  },
-  checkboxBox: {
-    width: 20,
-    height: 20,
-    borderWidth: 2,
-    borderRadius: 3,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  checkmark: {
-    color: '#fff',
-    fontSize: 13,
-    fontWeight: 'bold',
-    lineHeight: 16,
-  },
-  disabledBox: {
-    opacity: 0.4
-  },
-  disabledText: {
-    opacity: 0.4
-  }
-  });
-
-
-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;