boxpay-checkout-reactnative-sdk 1.1.7 → 2.0.1

package/src/components/knowMoreBottomSheet.tsx

@@ -1,111 +0,0 @@
-import { View, Text, StyleSheet, Pressable, Image } from 'react-native';
-import Modal from 'react-native-modal';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
-
-interface KnowMoreBottomSheetProps {
-  onClick: () => void;
-}
-
-const KnowMoreBottomSheet = ({ onClick }: KnowMoreBottomSheetProps) => {
-  const { checkoutDetails } = checkoutDetailsHandler;
-  return (
-    <View>
-      <Modal isVisible={true} style={styles.modal} onBackdropPress={onClick}>
-        <View style={styles.sheet}>
-          <Text
-            style={[styles.headingText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}
-          >
-            RBI Guidelines
-          </Text>
-
-          <Text
-            style={[styles.subHeadingText, { fontFamily: checkoutDetails.fontFamily.regular,}]}
-          >
-            As per the new RBI guidelines, we can no longer store your card
-            information with us.
-          </Text>
-
-          <View
-            style={styles.container}
-          >
-            <Image
-              source={require('../../assets/images/ic_card_lock.png')}
-              style={styles.imageStyle}
-            />
-            <Text
-              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.
-            </Text>
-          </View>
-          <View
-            style={styles.container}
-          >
-            <Image
-              source={require('../../assets/images/ic_card_add.png')}
-              style={styles.imageStyle}
-            />
-            <Text
-              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.
-            </Text>
-          </View>
-          <Pressable
-            style={[
-              styles.buttonContainer,
-              { backgroundColor: checkoutDetails.buttonColor, borderRadius: checkoutDetails.ctaBorderRadius, },
-            ]}
-            onPress={onClick}
-          >
-            <Text style={[styles.buttonText, {fontFamily: checkoutDetails.fontFamily.semiBold}]}>Got it!</Text>
-          </Pressable>
-        </View>
-      </Modal>
-    </View>
-  );
-};
-
-export default KnowMoreBottomSheet;
-
-const styles = StyleSheet.create({
-  modal: {
-    justifyContent: 'flex-end',
-    margin: 0,
-  },
-  sheet: {
-    backgroundColor: 'white',
-    padding: 20,
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginTop: 28,
-    backgroundColor: '#1CA672',
-  },
-  buttonText: {
-    color: 'white',
-    fontSize: 16,
-    paddingVertical: 12
-  },
-  headingText : {
-    fontSize: 20,
-    color: '#2D2B32',
-  },
-  subHeadingText : {
-    fontSize: 14,
-    color: '#2D2B32',
-    paddingTop: 12
-  },
-  imageStyle : { width: 28, height: 28, alignSelf: 'flex-start' },
-  container : {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    marginTop: 28,
-    marginEnd: 16,
-  }
-});

package/src/components/morePaymentContainer.tsx

@@ -1,66 +0,0 @@
-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, surchargeFee, currencySymbol }: MorePaymentContainerProps) => {
-  const {checkoutDetails} = checkoutDetailsHandler
-  return (
-    <View
-      style={{
-        flex: 1,
-        flexDirection: 'row',
-        backgroundColor: 'white',
-        alignItems: 'center',
-      }}
-    >
-      <Image 
-        source={image} 
-        style={[
-          { width: 32, height: 32 }, 
-          title === 'EMI' && { transform: [{ scaleX: -1 }] }
-          ]} 
-      />
-      <View
-      style={{
-        flexDirection: 'column',
-        marginLeft: 12 
-      }}>
-      <Text
-        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={{
-          alignSelf: 'center',
-          height: 6,
-          width: 14,
-          marginLeft: 'auto',
-          transform: [
-            {
-              rotate: '270deg',
-            },
-          ],
-        }}
-      />
-    </View>
-  );
-};
-
-export default MorePaymentContainer;

package/src/components/morePaymentMethods.tsx

@@ -1,236 +0,0 @@
-import { View, Text, Pressable } from 'react-native';
-import type{ PaymentClass } from '../interface';
-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,
-    setSelectedPaymentMethod : (method : string) => void,
-    surchargeDetails : SurchargeProp[]
-}
-
-const MorePaymentMethods = ({savedCards, stopTimer, setSelectedPaymentMethod, surchargeDetails}:MorePaymentMethodsArgs) => {
-  const navigation = useNavigation<NavigationProp<CheckoutStackParamList>>();
-    const {checkoutDetails} = checkoutDetailsHandler
-    const {
-        isCardMethodEnabled: isCardVisible,
-        isWalletMethodEnabled: isWalletVisible,
-        isNetBankingMethodEnabled: isNetBankingVisible,
-        isBnplMethodEnabled: isBNPLVisible,
-        isEmiMethodEnabled: isEmiVisible,
-        isUpiCollectMethodEnabled: isUpiCollectVisible,
-        isUpiIntentMethodEnabled: isUpiIntentVisibile
-      } = checkoutDetails;
-    return (
-        <View>
-                {(isCardVisible ||
-                  isWalletVisible ||
-                  isNetBankingVisible ||
-                  isBNPLVisible ||
-                  isEmiVisible) && (
-                  <View>
-                    {isUpiCollectVisible || isUpiIntentVisibile ? (
-                      <Text
-                        style={{
-                          marginStart: 16,
-                          marginTop: 12,
-                          fontSize: 14,
-                          color: '#020815B5',
-                          fontFamily: checkoutDetails.fontFamily.semiBold,
-                        }}
-                      >
-                        More Payment Options
-                      </Text>
-                    ) : (
-                      <Text
-                        style={{
-                          marginStart: 16,
-                          marginTop: 12,
-                          fontSize: 14,
-                          color: '#020815B5',
-                          fontFamily: checkoutDetails.fontFamily.semiBold,
-                        }}
-                      >
-                        Payment Options
-                      </Text>
-                    )}
-
-                    <View
-                      style={{
-                        flex: 1,
-                        backgroundColor: 'white',
-                        marginVertical: 8,
-                        marginHorizontal: 16,
-                        borderRadius: 12,
-                        flexDirection: 'column',
-                        borderColor: '#F1F1F1',
-                        borderWidth: 1,
-                        paddingBottom: 16,
-                      }}
-                    >
-                      {isCardVisible && savedCards.length == 0 && (
-                        <Pressable
-                          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 ||
-                            isEmiVisible ||
-                            isBNPLVisible) && (
-                            <View
-                              style={{
-                                flexDirection: 'row',
-                                height: 1,
-                                backgroundColor: '#ECECED',
-                                marginTop: 16,
-                                marginHorizontal: -16,
-                              }}
-                            />
-                          )}
-                        </Pressable>
-                      )}
-                      {isWalletVisible && (
-                        <Pressable
-                          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 ||
-                            isBNPLVisible) && (
-                            <View
-                              style={{
-                                flexDirection: 'row',
-                                height: 1,
-                                backgroundColor: '#ECECED',
-                                marginTop: 16,
-                                marginHorizontal: -16,
-                              }}
-                            />
-                          )}
-                        </Pressable>
-                      )}
-                      {isNetBankingVisible && (
-                        <Pressable
-                          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
-                              style={{
-                                flexDirection: 'row',
-                                height: 1,
-                                backgroundColor: '#ECECED',
-                                marginTop: 16,
-                                marginHorizontal: -16,
-                              }}
-                            />
-                          )}
-                        </Pressable>
-                      )}
-                      {isEmiVisible && (
-                        <Pressable
-                          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
-                              style={{
-                                flexDirection: 'row',
-                                height: 1,
-                                backgroundColor: '#ECECED',
-                                marginTop: 16,
-                                marginHorizontal: -16,
-                              }}
-                            />
-                          )}
-                        </Pressable>
-                      )}
-                      {isBNPLVisible && (
-                        <Pressable
-                          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>
-                      )}
-                    </View>
-                  </View>
-                )}
-              </View>
-    )
-}
-
-export default MorePaymentMethods

package/src/components/offerCard.tsx

@@ -1,173 +0,0 @@
-import React, { useState } from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  TouchableOpacity,
-} from 'react-native';
-import RenderHTML from 'react-native-render-html';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
-
-interface Props {
-  offerCode: string;
-  description: string;
-  minimumOrderAmount: string;
-  expiryDate: string;
-  applicable: string;
-  terms: string;
-  selectedCouponCode: string;
-  selectedColor: string;
-  onPress: () => void;
-}
-
-const OfferCard: React.FC<Props> = ({
-  offerCode,
-  description,
-  minimumOrderAmount,
-  expiryDate,
-  applicable,
-  terms,
-  selectedCouponCode,
-  selectedColor,
-  onPress,
-}) => {
-  const [showMore, setShowMore] = useState(false);
-  const {checkoutDetails} = checkoutDetailsHandler
-
-  const isSelected = offerCode === selectedCouponCode;
-
-  return (
-    <TouchableOpacity
-      onPress={onPress}
-      activeOpacity={0.9}
-      style={[
-        styles.card,
-        isSelected && {
-          borderColor: selectedColor,
-          borderWidth: 2,
-        },
-      ]}
-    >
-      <View style={styles.row}>
-        {/* Left Ticket Strip */}
-        <View
-          style={[
-            styles.sideStrip,
-            { backgroundColor: selectedColor },
-          ]}
-        >
-          <Text style={[styles.verticalText, {fontFamily : checkoutDetails.fontFamily.regular}]}>
-            {description}
-          </Text>
-        </View>
-
-        {/* Content */}
-        <View style={styles.content}>
-          <View style={styles.topRow}>
-            <Text style={styles.code}>{offerCode}</Text>
-
-            <Text
-              style={{
-                color: isSelected
-                  ? '#E84142'
-                  : selectedColor,
-                fontFamily : checkoutDetails.fontFamily.bold,
-              }}
-            >
-              {isSelected ? 'REMOVE' : 'APPLY'}
-            </Text>
-          </View>
-
-          <View style={styles.divider} />
-
-          <Text style={[styles.info, {fontFamily : checkoutDetails.fontFamily.medium}]}>
-            Minimum order amount {minimumOrderAmount}
-          </Text>
-
-          {expiryDate !== '' && (
-            <Text style={[styles.info, {fontFamily : checkoutDetails.fontFamily.medium}]}>
-              Offer valid till {expiryDate}
-            </Text>
-          )}
-
-          <Text style={[styles.info, {fontFamily : checkoutDetails.fontFamily.medium}]}>
-            {applicable
-              ? `Applicable on ${applicable}`
-              : 'Applicable on all transactions'}
-          </Text>
-
-          <TouchableOpacity
-            onPress={() => setShowMore(!showMore)}
-          >
-            <Text style={[styles.more, {fontFamily : checkoutDetails.fontFamily.semiBold}]}>
-              {showMore ? '- LESS' : '+ MORE'}
-            </Text>
-          </TouchableOpacity>
-
-          {showMore && (
-            <RenderHTML
-              contentWidth={300}
-              source={{ html: terms }}
-            />
-          )}
-        </View>
-      </View>
-    </TouchableOpacity>
-  );
-};
-
-export default OfferCard;
-
-const styles = StyleSheet.create({
-  card: {
-    backgroundColor: '#FFF',
-    marginHorizontal: 16,
-    marginVertical: 8,
-    borderRadius: 8,
-    elevation: 4,
-    overflow: 'hidden',
-  },
-  row: {
-    flexDirection: 'row',
-  },
-  sideStrip: {
-    width: 50,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  verticalText: {
-    color: '#FFF',
-    fontWeight: 'bold',
-    transform: [{ rotate: '-90deg' }],
-    width: 120,
-    textAlign: 'center',
-  },
-  content: {
-    flex: 1,
-    padding: 16,
-  },
-  topRow: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  code: {
-    fontWeight: 'bold',
-    fontSize: 20,
-    color: '#333',
-  },
-  divider: {
-    height: 1,
-    backgroundColor: '#DDD',
-    marginVertical: 12,
-  },
-  info: {
-    fontSize: 13,
-    color: '#616161',
-    marginBottom: 4,
-  },
-  more: {
-    fontWeight: 'bold',
-    color: '#616161',
-    marginTop: 6,
-  },
-});