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

package/src/components/selectTenureCard.tsx

@@ -1,475 +0,0 @@
-import { View, Text, Pressable, StyleSheet } from 'react-native';
-import React from 'react';
-import { RadioButton } from 'react-native-paper';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
-
-interface SelectTenureCardProps {
-  duration: number;
-  monthlyEmiAmount: string;
-  interest: number;
-  interestCharged: string;
-  discount: string;
-  totalAmount: string;
-  debiitedAmount: string;
-  isLowCostOffer: boolean;
-  isNoCostOffer: boolean;
-  onProceedForward: () => void;
-  isSelected: boolean;
-  brandColor: string;
-  onRadioClick: (duration: number, amount: string) => void;
-  currencySymbol: string;
-  processingFee: string;
-}
-
-const SelectTenureCard: React.FC<SelectTenureCardProps> = ({
-  duration,
-  monthlyEmiAmount,
-  interest,
-  discount,
-  totalAmount,
-  debiitedAmount,
-  isLowCostOffer,
-  isNoCostOffer,
-  isSelected,
-  onProceedForward,
-  brandColor,
-  onRadioClick,
-  currencySymbol,
-  interestCharged,
-  processingFee,
-}) => {
-  const {checkoutDetails} = checkoutDetailsHandler
-  return (
-    <View>
-      {isSelected ? (
-        <View style={{ backgroundColor: '#EFF3FA' }}>
-          <Pressable
-            style={{
-              flexDirection: 'row',
-              alignItems: 'center',
-              paddingHorizontal: 14,
-              paddingTop: 14,
-            }}
-            onPress={() => onRadioClick(duration, monthlyEmiAmount)}
-          >
-            <RadioButton
-              value={monthlyEmiAmount}
-              status={isSelected ? 'checked' : 'unchecked'}
-              onPress={() => onRadioClick(duration, monthlyEmiAmount)}
-              color={brandColor}
-              uncheckedColor={'#01010273'}
-            />
-            <Text
-              style={{
-                fontFamily: checkoutDetails.fontFamily.semiBold,
-                fontSize: 14,
-                color: '#2D2B32',
-              }}
-            >
-              {duration} months x
-              <Text
-                style={{
-                  fontFamily: 'Inter-SemiBold',
-                  fontSize: 14,
-                  color: '#2D2B32',
-                }}
-              >
-                {' '}
-                {currencySymbol}
-              </Text>
-              {monthlyEmiAmount}
-            </Text>
-            {isLowCostOffer && (
-              <View style={styles.tag}>
-                <Text style={[styles.tagText, { fontFamily: checkoutDetails.fontFamily.medium,}]}>LOW COST EMI</Text>
-              </View>
-            )}
-
-            {isNoCostOffer && (
-              <View style={styles.tag}>
-                <Text style={[styles.tagText, { fontFamily: checkoutDetails.fontFamily.medium,}]}>NO COST EMI</Text>
-              </View>
-            )}
-          </Pressable>
-          <View style={{ borderColor: '#F1F1F1', borderWidth: 1 }}>
-            <View
-              style={{
-                flexDirection: 'row',
-                marginHorizontal: 12,
-                marginTop: 16,
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                backgroundColor: '#F1F1F1',
-                padding: 8,
-                borderTopLeftRadius: 12,
-                borderTopRightRadius: 12,
-              }}
-            >
-              <Text
-                style={{
-                  fontFamily: checkoutDetails.fontFamily.semiBold,
-                  fontSize: 12,
-                  color: '#2D2B32',
-                  flex: 1,
-                  textAlign: 'center',
-                }}
-                numberOfLines={2}
-              >
-                Monthly EMI
-              </Text>
-              <Text
-                style={{
-                  fontFamily: checkoutDetails.fontFamily.semiBold,
-                  fontSize: 12,
-                  color: '#2D2B32',
-                  flex: 1,
-                  textAlign: 'center',
-                }}
-                numberOfLines={2}
-              >
-                Interest @{interest}% p.a.
-              </Text>
-              {discount !== '0' && (
-                <Text
-                  style={{
-                    fontFamily: checkoutDetails.fontFamily.semiBold,
-                    fontSize: 12,
-                    color: '#2D2B32',
-                    flex: 1,
-                    textAlign: 'center',
-                  }}
-                  numberOfLines={2}
-                >
-                  Discount
-                </Text>
-              )}
-              <Text
-                style={{
-                  fontFamily: checkoutDetails.fontFamily.semiBold,
-                  fontSize: 12,
-                  color: '#2D2B32',
-                  flex: 1,
-                  textAlign: 'center',
-                }}
-                numberOfLines={2}
-              >
-                Total Cost
-              </Text>
-            </View>
-
-            <View
-              style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                backgroundColor: 'white',
-                padding: 8,
-                borderBottomEndRadius: 12,
-                justifyContent: 'space-between',
-                borderBottomStartRadius: 12,
-                marginHorizontal: 12,
-              }}
-            >
-              <Text
-                style={{
-                  fontFamily: checkoutDetails.fontFamily.medium,
-                  fontSize: 12,
-                  color: '#2D2B32',
-                  flex: 1,
-                  textAlign: 'center',
-                }}
-                numberOfLines={2}
-              >
-                <Text
-                  style={{
-                    fontFamily: 'Inter-Regular',
-                    fontSize: 12,
-                    color: '#2D2B32',
-                  }}
-                >
-                  {' '}
-                  {currencySymbol}
-                </Text>
-                {monthlyEmiAmount}
-              </Text>
-              <Text
-                style={{
-                  fontFamily: checkoutDetails.fontFamily.medium,
-                  fontSize: 12,
-                  color: '#2D2B32',
-                  flex: 1,
-                  textAlign: 'center',
-                }}
-                numberOfLines={2}
-              >
-                <Text
-                  style={{
-                    fontFamily: 'Inter-Regular',
-                    fontSize: 12,
-                    color: '#2D2B32',
-                  }}
-                >
-                  {' '}
-                  {currencySymbol}
-                </Text>
-                {interestCharged}
-              </Text>
-              {discount !== '0' && (
-                <Text
-                  style={{
-                    fontFamily: checkoutDetails.fontFamily.medium,
-                    fontSize: 12,
-                    color: '#1CA672',
-                    flex: 1,
-                    textAlign: 'center',
-                  }}
-                  numberOfLines={2}
-                >
-                  <Text
-                    style={{
-                      fontFamily: 'Inter-Regular',
-                      fontSize: 12,
-                      color: '#1CA672',
-                    }}
-                  >
-                    {' '}
-                    -{currencySymbol}
-                  </Text>
-                  {discount}
-                </Text>
-              )}
-              <Text
-                style={{
-                  fontFamily: checkoutDetails.fontFamily.medium,
-                  fontSize: 12,
-                  color: '#2D2B32',
-                  flex: 1,
-                  textAlign: 'center',
-                }}
-                numberOfLines={2}
-              >
-                <Text
-                  style={{
-                    fontFamily: 'Inter-Regular',
-                    fontSize: 12,
-                    color: '#2D2B32',
-                  }}
-                >
-                  {' '}
-                  {currencySymbol}
-                </Text>
-                {totalAmount}
-              </Text>
-            </View>
-          </View>
-          <Text
-            style={{
-              padding: 12,
-              color: '#2D2B32',
-              fontSize: 12,
-              lineHeight: 18,
-              fontFamily: checkoutDetails.fontFamily.regular,
-            }}
-          >
-            Your card will be charged for an amount of{' '}
-            <Text
-              style={{
-                fontFamily: 'Inter-SemiBold',
-                fontSize: 12,
-                color: '#2D2B32',
-              }}
-            >
-              {' '}
-              {currencySymbol}
-            </Text>
-            <Text
-              style={{
-                fontFamily: checkoutDetails.fontFamily.semiBold,
-                fontSize: 12,
-                color: '#2D2B32',
-              }}
-            >
-              {debiitedAmount}
-            </Text>{' '}
-            You will be charged an interest of 
-            <Text
-              style={{
-                fontFamily: 'Inter-SemiBold',
-                fontSize: 12,
-                color: '#2D2B32',
-              }}
-            >
-              {' '}
-              {currencySymbol}
-            </Text>
-            <Text
-              style={{
-                fontFamily: checkoutDetails.fontFamily.semiBold,
-                fontSize: 12,
-                color: '#2D2B32',
-              }}
-            >
-              {interestCharged}
-            </Text>{' '}
-            by the bank making the total payable amount as{' '}
-            <Text
-              style={{
-                fontFamily: 'Inter-SemiBold',
-                fontSize: 12,
-                color: '#2D2B32',
-              }}
-            >
-              {' '}
-              {currencySymbol}
-            </Text>
-            <Text
-              style={{
-                fontFamily: checkoutDetails.fontFamily.semiBold,
-                fontSize: 12,
-                color: '#2D2B32',
-              }}
-            >
-              {totalAmount}
-            </Text>
-            .
-          </Text>
-          <Text
-            style={{
-              fontFamily: checkoutDetails.fontFamily.regular,
-              fontSize: 12,
-              color: '#2D2B32',
-              paddingHorizontal: 12,
-              paddingBottom: 12,
-            }}
-          >
-            <Text
-              style={{
-                fontFamily: 'Inter-SemiBold',
-                fontSize: 12,
-                color: '#2D2B32',
-              }}
-            >
-              {' '}
-              {currencySymbol}
-            </Text>
-            <Text
-              style={{
-                fontFamily: checkoutDetails.fontFamily.semiBold,
-                fontSize: 12,
-                color: '#2D2B32',
-              }}
-            >
-              {processingFee}
-            </Text>
-            +GST will be charged by HDFC bank as one-time processing fee.
-          </Text>
-          <Pressable
-            style={{
-              flexDirection: 'row',
-              borderRadius: 8,
-              justifyContent: 'center',
-              marginBottom: 16,
-              marginHorizontal: 12,
-              paddingVertical: 12,
-              backgroundColor: brandColor,
-            }}
-            onPress={() => {
-              onProceedForward();
-            }}
-          >
-            <Text
-              style={{
-                color: 'white',
-                fontSize: 16,
-                fontFamily: checkoutDetails.fontFamily.semiBold,
-              }}
-            >
-              Proceed to Enter Card Details
-            </Text>
-          </Pressable>
-        </View>
-      ) : (
-        <View style={{ padding: 14 }}>
-          <View
-            style={{
-              flexDirection: 'row',
-              flexWrap: 'wrap',
-              alignItems: 'center',
-            }}
-          >
-            {/* Radio Button */}
-            <RadioButton
-              value={monthlyEmiAmount}
-              status={isSelected ? 'checked' : 'unchecked'}
-              onPress={() => onRadioClick(duration, monthlyEmiAmount)}
-              color={brandColor}
-              uncheckedColor={'#01010273'}
-            />
-
-            {/* Text Content */}
-            <View style={{ flexShrink: 1 }}>
-              <Text
-                style={{
-                  fontFamily: checkoutDetails.fontFamily.semiBold,
-                  fontSize: 14,
-                  color: '#2D2B32',
-                  alignSelf: 'center',
-                }}
-                onPress={() => onRadioClick(duration, monthlyEmiAmount)}
-              >
-                {duration} months x
-                <Text
-                  style={{
-                    fontFamily: 'Inter-SemiBold',
-                    fontSize: 14,
-                    color: '#2D2B32',
-                  }}
-                >
-                  {' '}
-                  {currencySymbol}
-                </Text>
-                {monthlyEmiAmount} | @{interest}% p.a.
-              </Text>
-
-              {/* Tag Container (Moves to next line if needed) */}
-              <View
-                style={{
-                  flexDirection: 'row',
-                  flexWrap: 'wrap',
-                  alignSelf: 'flex-start',
-                }}
-              >
-                {isLowCostOffer && (
-                  <View style={styles.tag}>
-                    <Text style={[styles.tagText, { fontFamily: checkoutDetails.fontFamily.medium,}]}>LOW COST EMI</Text>
-                  </View>
-                )}
-                {isNoCostOffer && (
-                  <View style={styles.tag}>
-                    <Text style={[styles.tagText, { fontFamily: checkoutDetails.fontFamily.medium,}]}>NO COST EMI</Text>
-                  </View>
-                )}
-              </View>
-            </View>
-          </View>
-        </View>
-      )}
-    </View>
-  );
-};
-
-export default SelectTenureCard;
-
-const styles = StyleSheet.create({
-  tag: {
-    borderColor: '#FFADD2',
-    borderRadius: 6,
-    backgroundColor: '#FFF0F6',
-    borderWidth: 1,
-    paddingHorizontal: 4,
-    marginLeft: 4,
-  },
-  tagText: {
-    fontSize: 10,
-    color: '#EB2F96',
-  },
-});

package/src/components/sessionExpire.tsx

@@ -1,89 +0,0 @@
-import { View, Text, StyleSheet, Pressable } from 'react-native';
-import React from 'react';
-import Modal from 'react-native-modal';
-import LottieView from 'lottie-react-native';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
-
-interface SessionExpireProps {
-  onClick: () => void;
-}
-
-
-const SessionExpire: React.FC<SessionExpireProps> = ({ onClick }) => {
-  const { checkoutDetails } = checkoutDetailsHandler;
-  return (
-    <View>
-      <Modal isVisible={true} style={styles.modal}>
-        <View style={styles.sheet}>
-          <LottieView
-            source={require('../../assets/animations/payment_status_pending.json')}
-            autoPlay
-            loop={false}
-            style={{ width: 90, height: 90, alignSelf: 'center' }}
-          />
-          <Text style={[styles.successfulHeading, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>
-            Payment session has expired.
-          </Text>
-          <Text
-            style={{
-              fontSize: 14,
-              fontFamily: checkoutDetails.fontFamily.regular,
-              color: '#000000',
-              textAlign: 'center',
-              alignSelf: 'center',
-              paddingTop: 8,
-              paddingBottom: 16,
-              lineHeight: 20,
-            }}
-          >
-            For your security, your session has expired due to inactivity.
-            Please restart the payment process.
-          </Text>
-          <Pressable
-            style={[
-              styles.buttonContainer,
-              { backgroundColor: checkoutDetails.buttonColor, borderRadius: checkoutDetails.ctaBorderRadius, },
-            ]}
-            onPress={() => {
-              onClick()
-            }}
-          >
-            <Text style={[styles.buttonText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>Go back to Home</Text>
-          </Pressable>
-        </View>
-      </Modal>
-    </View>
-  );
-};
-
-export default SessionExpire;
-
-const styles = StyleSheet.create({
-  modal: {
-    justifyContent: 'flex-end',
-    margin: 0,
-  },
-  sheet: {
-    backgroundColor: 'white',
-    padding: 20,
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-  },
-  successfulHeading: {
-    color: '#DB7C1D',
-    fontSize: 22,
-    alignSelf: 'center',
-    paddingTop: 8
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginTop: 12,
-    backgroundColor: '#1CA672',
-  },
-  buttonText: {
-    color: 'white',
-    fontSize: 16,
-    paddingVertical: 12,
-  },
-});

package/src/components/shimmerView.tsx

@@ -1,31 +0,0 @@
-import { View } from 'react-native';
-import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
-
-const shimmerHeights = [
-  { height: 90, marginTop: 10 },
-  { height: 50, marginTop: 30 },
-  { height: 50, marginTop: 25 },
-  { height: 50, marginTop: 25 },
-  { height: 50, marginTop: 25 },
-];
-
-const ShimmerView = () => {
-  return (
-    <View style={{ flex: 1, backgroundColor: 'white' }}>
-      {shimmerHeights.map((item, index) => (
-        <ShimmerPlaceHolder
-          key={index}
-          visible={false}
-          style={{
-            width: '100%',
-            height: item.height,
-            borderRadius: item.height === 90 ? 0 : 10,
-            marginTop: item.marginTop,
-          }}
-        />
-      ))}
-    </View>
-  );
-};
-
-export default ShimmerView;

package/src/components/subscriptionRow.tsx

@@ -1,19 +0,0 @@
-import { View, Text } from "react-native"
-import type { CheckoutDetails } from "../interface"
-
-interface SubscriptionArgs{
-    checkoutDetails : CheckoutDetails, 
-    heading: string, 
-    value : string
-}
-
-const SubscriptionRow = ({checkoutDetails, heading, value} : SubscriptionArgs) => {
-    return (
-        <View style={{ flexDirection : 'row', justifyContent : 'space-between', marginHorizontal : 16, paddingTop : 4}}>
-            <Text style={{fontFamily :checkoutDetails.fontFamily.regular, color : '#2D2B32'}}>{heading}</Text>
-            <Text style={{fontFamily :checkoutDetails.fontFamily.semiBold, color : '#2D2B32'}}>{value}</Text>
-        </View>
-    )
-}
-
-export default SubscriptionRow

package/src/navigation.tsx

@@ -1,82 +0,0 @@
-// src/navigation/CheckoutNavigator.tsx
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import CardScreen from "./screens/cardScreen";
-import EmiScreen from "./screens/emiScreen";
-import UpiTimerScreen from "./screens/upiTimerScreen";
-import AddressScreen from "./screens/addressScreen";
-import BNPLScreen from "./screens/bnplScreen";
-import NetBankingScreen from "./screens/netBankingScreen";
-import SavedAddressScreen from "./screens/savedAddressScreen";
-import WalletScreen from "./screens/walletScreen";
-import MainScreen from "./screens/mainScreen";
-import type { AddressScreenParams, BoxpayCheckoutProps, CardScreenParams, UPITimerScreenParams } from "./interface";
-import { ScreenRouteMap } from "./interface";
-import { NavigationIndependentTree } from "@react-navigation/native";
-import type { InstantOfferProps } from "./screens/instantOfferList";
-import InstantOfferScreen from "./screens/instantOfferList";
-
-export type CheckoutStackParamList = {
-  MainScreen : BoxpayCheckoutProps,
-  CardScreen: CardScreenParams;
-  EmiScreen: {};
-  UpiTimerScreen: UPITimerScreenParams;
-  AddressScreen : AddressScreenParams,
-  BNPLScreen : {},
-  SavedAddressScreen : {},
-  NetBankingScreen : {},
-  WalletScreen : {},
-  InstantOfferScreen : InstantOfferProps
-};
-
-const Stack = createNativeStackNavigator<CheckoutStackParamList>();
-
-const CheckoutNavigator = ({
-  token,
-  configurationOptions = null,
-  onPaymentResult,
-  shopperToken = null,
-  uiConfiguration = null
-}: BoxpayCheckoutProps) => {
-  return (
-    <Stack.Navigator screenOptions={{ headerShown: false }}>
-      <Stack.Screen name={ScreenRouteMap.MAIN} component={MainScreen} initialParams={{
-        token,
-        configurationOptions,
-        onPaymentResult,
-        shopperToken,
-        uiConfiguration
-      }}/>
-      <Stack.Screen name={ScreenRouteMap.CARD} component={CardScreen} />
-      <Stack.Screen name={ScreenRouteMap.EMI} component={EmiScreen} />
-      <Stack.Screen name={ScreenRouteMap.UPITIMER} component={UpiTimerScreen} />
-      <Stack.Screen name={ScreenRouteMap.ADDRESS} component={AddressScreen}/>
-      <Stack.Screen name={ScreenRouteMap.BNPL} component={BNPLScreen}/>
-      <Stack.Screen name={ScreenRouteMap.NETBANKING} component={NetBankingScreen}/>
-      <Stack.Screen name={ScreenRouteMap.WALLET} component={WalletScreen}/>
-      <Stack.Screen name={ScreenRouteMap.SAVEDADDRESS} component={SavedAddressScreen}/>
-      <Stack.Screen name={ScreenRouteMap.INSTANTOFFER} component={InstantOfferScreen}/>
-    </Stack.Navigator>
-  );
-};
-
-const CheckoutContainer = ({
-  token,
-  configurationOptions = null,
-  onPaymentResult,
-  shopperToken = null,
-  uiConfiguration = null
-}: BoxpayCheckoutProps)=> {
-  return (
-    <NavigationIndependentTree>
-      <CheckoutNavigator 
-      token={token}
-      configurationOptions={configurationOptions}
-      onPaymentResult={onPaymentResult}
-      shopperToken={shopperToken}
-      uiConfiguration={uiConfiguration}
-      />
-    </NavigationIndependentTree>
-  );
-};
-
-export default CheckoutContainer;