boxpay-checkout-reactnative-sdk 1.0.4 → 1.0.6-beta1

package/src/screens/webViewScreen.tsx

@@ -1,5 +1,7 @@
-import React from 'react';
-import { WebView } from 'react-native-webview';
+import React, { useState, useRef } from 'react';
+import { View, ActivityIndicator, StyleSheet, Text } from 'react-native';
+import { WebView, type WebViewNavigation } from 'react-native-webview';
+import type { ShouldStartLoadRequest } from 'react-native-webview/lib/WebViewTypes';
 
 interface WebViewScreenProps {
   url: string | null;
@@ -13,28 +15,76 @@ const WebViewScreen: React.FC<WebViewScreenProps> = ({
   onBackPress,
   ...props
 }) => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [currentUrl, setCurrentUrl] = useState(url ?? '');  // ← track URL
+  const hasCalledBack = useRef(false);                       // ← prevent double call
+
   const source = html
     ? { html: html }
     : url
       ? { uri: url }
       : { html: '<h1>No content provided</h1>' };
 
+  const checkUrl = (navUrl: string) => {
+    setCurrentUrl(navUrl);
+  
+    if (navUrl.includes('payment-completion-handler') && !hasCalledBack.current && navUrl.includes('boxpay')) {
+      hasCalledBack.current = true;
+      onBackPress();
+    }
+  };
+
   return (
-    <WebView
-      source={source}
-      {...props}
-      style={{ flex: 1 }}
-      javaScriptEnabled={true}
-      domStorageEnabled={true}
-      startInLoadingState={true}
-      onLoadEnd={(syntheticEvent) => {
-        const { nativeEvent } = syntheticEvent;
-        if (nativeEvent.url.includes('boxpay')) {
-          onBackPress();
-        }
-      }}
-    />
+    <View style={{ flex: 1 }}>
+      {/* URL Search Bar - shows every redirect */}
+      <View style={styles.searchBar}>
+        <Text numberOfLines={1} style={styles.searchBarText}>
+          {currentUrl}
+        </Text>
+      </View>
+
+      <WebView
+        source={source}
+        {...props}
+        style={{ flex: 1 }}
+        javaScriptEnabled={true}
+        domStorageEnabled={true}
+        startInLoadingState={true}
+        onNavigationStateChange={(navState: WebViewNavigation) => checkUrl(navState.url)}
+        onShouldStartLoadWithRequest={(request: ShouldStartLoadRequest) => {
+          checkUrl(request.url);
+          return true;
+        }}
+        onLoadStart={() => setIsLoading(true)}
+        onLoadEnd={() => setIsLoading(false)}
+      />
+      {isLoading && (
+        <View style={styles.loaderOverlay}>
+          <ActivityIndicator size="large" color="#1a1a6e" />
+        </View>
+      )}
+    </View>
   );
 };
 
-export default WebViewScreen;
+const styles = StyleSheet.create({
+  loaderOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.6)',
+  },
+  searchBar: {
+    backgroundColor: '#f1f1f1',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: '#ddd',
+  },
+  searchBarText: {
+    fontSize: 11,
+    color: '#333',
+  },
+});
+
+export default WebViewScreen;

package/src/sdk-version.json

@@ -1 +1 @@
-{ "version": "1.0.4" }
+{ "version": "1.0.6-beta1" }

package/src/sharedContext/checkoutDetailsHandler.ts

@@ -10,7 +10,12 @@ export let checkoutDetailsHandler: CheckoutDetailsHandler = {
     currencyCode : '',
     amount: '',
     token: '',
-    brandColor: '',
+    fontFamily : {},
+    ctaBorderRadius:0,
+    buttonColor: '#1CA672',
+    buttonTextColor:'white',
+    headerColor : 'white',
+    headerTextColor:'#363840',
     env: '',
     itemsLength: 0,
     errorMessage: '',
@@ -35,10 +40,65 @@ export let checkoutDetailsHandler: CheckoutDetailsHandler = {
     isWalletMethodEnabled : false,
     isNetBankingMethodEnabled : false,
     isEmiMethodEnabled : false,
-    isBnplMethodEnabled : false
+    isBnplMethodEnabled : false,
+    isUPIOtmIntentMethodEnabled : false,
+    isUPIOtmCollectMethodEnabled : false,
+    isUPIOtmQRMethodEnabled : false,
+    isOrderItemDetailsVisible : true,
+    isSICheckboxVisible : false,
+    isSubscriptionCheckout : false
   },
 };
 
 export const setCheckoutDetailsHandler = (handler: CheckoutDetailsHandler) => {
   checkoutDetailsHandler = handler;
 };
+
+export const setCheckOutDetailsHandlerToDefault = () => {
+  checkoutDetailsHandler = {
+    checkoutDetails: {
+      currencySymbol: '',
+      currencyCode: '',
+      amount: '',
+      token: '',
+      fontFamily : {},
+      ctaBorderRadius:0,
+      buttonColor: '',
+      buttonTextColor:'',
+      headerColor : '',
+      headerTextColor:'',
+      env: '',
+      itemsLength: 0,
+      errorMessage: '',
+      shopperToken: null,
+      isSuccessScreenVisible: false,
+      isShippingAddressEnabled: false,
+      isShippingAddressEditable: false,
+      isFullNameEnabled: false,
+      isFullNameEditable: false,
+      isEmailEnabled: false,
+      isEmailEditable: false,
+      isPhoneEnabled: false,
+      isPhoneEditable: false,
+      isPanEnabled: false,
+      isPanEditable: false,
+      isDOBEnabled: false,
+      isDOBEditable: false,
+      isUpiIntentMethodEnabled: false,
+      isUpiQRMethodEnabled: false,
+      isUpiCollectMethodEnabled: false,
+      isCardMethodEnabled: false,
+      isWalletMethodEnabled: false,
+      isNetBankingMethodEnabled: false,
+      isEmiMethodEnabled: false,
+      isBnplMethodEnabled: false,
+      isUPIOtmIntentMethodEnabled: false,
+      isUPIOtmCollectMethodEnabled: false,
+      isUPIOtmQRMethodEnabled: false,
+      isOrderItemDetailsVisible : true,
+      isSICheckboxVisible : false,
+      isSubscriptionCheckout : false
+    },
+  };
+};
+

package/src/sharedContext/userdataHandler.ts

@@ -9,14 +9,16 @@ export let userDataHandler: UserDataHandler = {
     firstName: null,
     lastName: null,
     email: null,
-    phone: null,
+    completePhoneNumber: null,
+    phoneCode : "+91",
     dob: null,
     pan: null,
     address1: null,
     address2: null,
     city: null,
     state: null,
-    country: null,
+    countryCode: "IN",
+    countryName: "India",
     pincode: null,
     labelType: null,
     labelName: null,
@@ -27,3 +29,27 @@ export let userDataHandler: UserDataHandler = {
 export const setUserDataHandler = (handler: UserDataHandler) => {
   userDataHandler = handler;
 };
+
+export const setUserDataHandlerToDefault = () => {
+  userDataHandler = {
+    userData: {
+      firstName: null,
+      lastName: null,
+      email: null,
+      completePhoneNumber: null,
+      phoneCode : "+91",
+      dob: null,
+      pan: null,
+      address1: null,
+      address2: null,
+      city: null,
+      state: null,
+      countryCode: "IN",
+      countryName: "India",
+      pincode: null,
+      labelType: null,
+      labelName: null,
+      uniqueId: null,
+    },
+  }
+}

package/src/styles/components/addressCardStyles.ts

@@ -1,14 +1,12 @@
 import { StyleSheet } from 'react-native';
-import { checkoutDetailsHandler } from '../../sharedContext/checkoutDetailsHandler';
 
-const {brandColor} = checkoutDetailsHandler.checkoutDetails
+
 const styles = StyleSheet.create({
   titleText: {
     marginStart: 16,
     marginTop: 20,
     fontSize: 14,
-    color: '#020815B5',
-    fontFamily: 'Poppins-SemiBold'
+    color: '#020815B5'
   },
   pressableContainer : {
     borderColor: '#F1F1F1',
@@ -18,11 +16,10 @@ const styles = StyleSheet.create({
     paddingBottom: 16,
     backgroundColor: 'white',
     flexDirection: 'row',
-    borderRadius: 12,
   },
   imageStyle : {
-    height: 20,
-    width: 20,
+    height: 14,
+    width: 14,
     marginStart: 12,
     marginTop: 20,
   },
@@ -35,27 +32,23 @@ const styles = StyleSheet.create({
   },
   insideContainerNormalText : {
     fontSize: 12,
-    color: '#4F4D55',
-    fontFamily: 'Poppins-Regular',
+    color: '#4F4D55'
   },
   insideContainerHighlighedText : {
-    fontFamily: 'Poppins-SemiBold',
     fontSize: 12,
     color: '#4F4D55',
   },
   insideContainerDesc : {
     fontSize: 14,
     color: '#4F4D55',
-    fontFamily: 'Poppins-SemiBold',
     flexShrink: 1,
     marginTop: -4,
   },
   insideContainerClickableText : {
     fontSize: 14,
-    color: brandColor,
-    fontFamily: 'Poppins-SemiBold',
     flexShrink: 1,
-    marginTop: -4,
+    marginTop: 16,
+    marginStart : 8
   }
 });
 

package/src/styles/components/bankCardStyles.ts

@@ -24,7 +24,6 @@ const styles = StyleSheet.create({
     },
     bankName: {
       fontSize: 14,
-      fontFamily: 'Poppins-SemiBold',
       color: '#4F4D55',
     },
     tagsContainer: {
@@ -41,7 +40,6 @@ const styles = StyleSheet.create({
     },
     tagText: {
       fontSize: 10,
-      fontFamily: 'Poppins-Medium',
       color: '#EB2F96',
     },
     chervonImage : {

package/src/styles/components/cancelPaymentModalStyles.ts

@@ -39,14 +39,12 @@ const styles = StyleSheet.create({
       fontSize: 16,
       color: '#2D2B32',
       marginLeft: 8,
-      fontFamily: 'Poppins-SemiBold',
     },
     modalText: {
       fontSize: 14,
       color: '#555',
       marginBottom: 20,
       lineHeight: 24,
-      fontFamily: 'Poppins-Regular',
     },
     buttonContainer: {
       flexDirection: 'row',
@@ -55,7 +53,6 @@ const styles = StyleSheet.create({
     },
     cancelButton: {
       backgroundColor: '#fff',
-      borderRadius: 7,
       paddingVertical: 10,
       paddingHorizontal: 20,
       flex: 1,
@@ -63,7 +60,6 @@ const styles = StyleSheet.create({
       justifyContent: 'center',
     },
     confirmButton: {
-      borderRadius: 7,
       paddingVertical: 10,
       paddingHorizontal: 20,
       flex: 1,
@@ -74,14 +70,12 @@ const styles = StyleSheet.create({
     buttonText: {
       color: '#333',
       fontSize: 16,
-      textAlign: 'center',
-      fontFamily: 'Poppins-Regular',
+      textAlign: 'center'
     },
     confirmButtonText: {
       color: 'white',
       fontSize: 16,
-      textAlign: 'center',
-      fontFamily: 'Poppins-SemiBold',
+      textAlign: 'center'
     },
 });
 

package/src/styles/components/cvvInfoBottomSheetStyles.ts

@@ -14,17 +14,14 @@ const styles = StyleSheet.create({
     secondaryHeading: {
       color: '#2D2B32',
       fontSize: 14,
-      marginTop: 16,
-      fontFamily: 'Poppins-SemiBold',
+      marginTop: 16
     },
     desc: {
       color: '#4F4D55',
-      fontSize: 14,
-      fontFamily: 'Poppins-Regular',
+      fontSize: 14
     },
     buttonContainer: {
       flexDirection: 'row',
-      borderRadius: 8,
       justifyContent: 'center',
       marginTop: 12,
       backgroundColor: '#1CA672',
@@ -33,10 +30,8 @@ const styles = StyleSheet.create({
       color: 'white',
       fontSize: 16,
       paddingVertical: 12,
-      fontFamily: 'Poppins-SemiBold',
     },
     headingText : {
-        fontFamily: 'Poppins-SemiBold',
         fontSize: 20,
         color: '#2D2B32'
     },

package/src/styles/components/savedAddressCardStyles.ts

@@ -31,8 +31,8 @@ const styles = StyleSheet.create({
     },
     labelName: {
       fontSize: 14,
-      fontFamily: 'Poppins-SemiBold',
-      color: "#2D2B32"
+      color: "#2D2B32",
+      paddingTop : 4
     },
     selectedTag: {
       backgroundColor: "#FFF0F6",
@@ -45,12 +45,10 @@ const styles = StyleSheet.create({
     },
     selectedTagText: {
       fontSize: 10,
-      fontFamily: 'Poppins-Medium',
       color: "#EB2F96",
     },
     addressText: {
       fontSize: 12,
-      fontFamily: 'Poppins-Regular',
       color: "#7F7D83",
     },
     imageStyle : {

package/src/styles/indexStyles.ts

@@ -24,7 +24,6 @@ const styles = StyleSheet.create({
         marginTop: 20,
         fontSize: 14,
         color: '#020815B5',
-        fontFamily: 'Poppins-SemiBold',
     },
     paymentContainer : {
         borderColor: '#F1F1F1',
@@ -45,8 +44,7 @@ const styles = StyleSheet.create({
     footerText : {
         fontSize: 12,
         color: '#888888',
-        marginBottom: 15,
-        fontFamily: 'Poppins-Medium',
+        marginBottom: 13,
     },
     footerImage : { height: 50, width: 50 },
     webViewScreenStyle : {

package/src/styles/screens/addressScreenStyles..ts

@@ -13,13 +13,11 @@ const styles = StyleSheet.create({
     textInput: {
         backgroundColor: 'white',
         fontSize: 16,
-        fontFamily: 'Poppins-Regular',
         color: '#0A090B',
         height: 56,
     },
     buttonContainer: {
         flexDirection: 'row',
-        borderRadius: 8,
         justifyContent: 'center',
         marginTop: 20,
         marginHorizontal: 16,
@@ -27,13 +25,10 @@ const styles = StyleSheet.create({
         paddingBottom: 12,
     },
     buttonText: {
-        color: 'white',
         fontSize: 16,
-        fontFamily: 'Poppins-SemiBold',
     },
     textFieldLable : {
         fontSize: 16,
-        fontFamily: 'Poppins-Regular',
     },
     imageStyle : {
         alignSelf: 'center',
@@ -43,9 +38,9 @@ const styles = StyleSheet.create({
     },
     errorText : {
         fontSize: 12,
-        fontFamily: 'Poppins-Regular',
         color: '#E12121',
         marginHorizontal: 16,
+        marginTop : 2
     },
     container : {
         flex: 1,

package/src/styles/screens/bnplScreenStyles.ts

@@ -42,13 +42,11 @@ const styles = StyleSheet.create({
         height: 100   
     },
     headingText : {
-        fontFamily: 'Poppins-SemiBold',
         fontSize: 16,
         color: '#212426',
         marginTop: 16,
     },
     subHeadingText : {
-        fontFamily: 'Poppins-Regular',
         fontSize: 14,
         color: '#4F4D55',
         marginTop: -4,
@@ -56,8 +54,7 @@ const styles = StyleSheet.create({
     bottomText : {
         fontSize: 12,
         color: '#888888',
-        marginBottom: 15,
-        fontFamily: 'Poppins-Medium',
+        marginBottom: 13,
     },
     bottomContainer : {
         justifyContent: 'center',

package/src/styles/screens/cardScreenStyles.ts

@@ -4,13 +4,11 @@ const styles = StyleSheet.create({
     textInput: {
         backgroundColor: 'white',
         fontSize: 16,
-        fontFamily: 'Poppins-Regular',
         color: '#0A090B',
         height: 60,
     },
     buttonContainer: {
         flexDirection: 'row',
-        borderRadius: 8,
         justifyContent: 'center',
         marginTop: 20,
         marginHorizontal: 16,
@@ -20,7 +18,6 @@ const styles = StyleSheet.create({
     buttonText: {
         color: 'white',
         fontSize: 16,
-        fontFamily: 'Poppins-SemiBold',
     },
     screenView : {
         flex: 1, backgroundColor: 'white' 
@@ -51,7 +48,6 @@ const styles = StyleSheet.create({
     },
     nameText : {
         paddingStart: 8,
-        fontFamily: 'Poppins-SemiBold',
         fontSize: 14,
     },
     thickBorder : {
@@ -63,7 +59,6 @@ const styles = StyleSheet.create({
         paddingStart: 8,
     },
     durationText : {
-        fontFamily: 'Poppins-SemiBold',
         fontSize: 12,
         color: '#2D2B32',
     },
@@ -73,18 +68,15 @@ const styles = StyleSheet.create({
         color: '#2D2B32',
     },
     percentText : {
-        fontFamily: 'Poppins-Regular',
         fontSize: 12,
         color: '#2D2B32',
     },
     textFieldLabel : {
-        fontSize: 16,
-        fontFamily: 'Poppins-Regular',
+        fontSize: 16
     },
     errorText : {
         color: '#B3261E',
         fontSize: 12,
-        fontFamily: 'Poppins-Regular',
         marginHorizontal: 16,
         marginTop: 4,
     },
@@ -108,7 +100,6 @@ const styles = StyleSheet.create({
     },
     infoText : {
         fontSize: 12,
-        fontFamily: 'Poppins-Regular',
         color: '#2D2B32',
         marginStart: 8,
     },
@@ -121,12 +112,10 @@ const styles = StyleSheet.create({
     checkBoxText : {
         color: '#2D2B32',
         fontSize: 14,
-        fontFamily: 'Poppins-Regular',
-        marginLeft: 8,
+        marginLeft: 6,
     },
     clickableText : {
         fontSize: 12,
-        fontFamily: 'Poppins-SemiBold',
         textDecorationLine: 'underline',
     },
     pressableContainer : {
@@ -143,7 +132,22 @@ const styles = StyleSheet.create({
         right: 0,
         bottom: 0,
         backgroundColor: 'white',
-    }
+    },
+      checkboxBox: {
+        width: 20,
+        height: 20,
+        borderWidth: 2,
+        borderRadius: 3,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginLeft: 8,
+      },
+      checkmark: {
+        color: '#fff',
+        fontSize: 13,
+        fontWeight: 'bold',
+        lineHeight: 16,
+      },
 })
 
 export default styles

package/src/styles/screens/emiScreenStyles.ts

@@ -19,7 +19,6 @@ const styles = StyleSheet.create({
     },
     cardsContainer : { paddingHorizontal: 16, paddingTop: 12 },
     cardsText : {
-        fontFamily: 'Poppins-SemiBold',
         fontSize: 14,
     },
     highlightedDivider : {
@@ -35,14 +34,12 @@ const styles = StyleSheet.create({
     },
     searchTextLable : {
         fontSize: 16,
-        fontFamily: 'Poppins-Regular',
     },
     textInputStyle : {
         marginTop: 16,
         marginHorizontal: 16,
         backgroundColor: 'white',
         fontSize: 16,
-        fontFamily: 'Poppins-Regular',
         color: '#0A090B',   
     },
     filterContainer : {
@@ -60,7 +57,6 @@ const styles = StyleSheet.create({
         borderRadius: 20,
     },
     filterText : {
-        fontFamily: 'Poppins-SemiBold',
         fontSize: 12,
         color: '#2D2B32',
     },
@@ -74,7 +70,6 @@ const styles = StyleSheet.create({
         marginBottom: 8,
         marginHorizontal: 16,
         color: '#020815B5',
-        fontFamily: 'Poppins-SemiBold',
         fontSize: 14,
     },
     listContainer : {
@@ -95,13 +90,11 @@ const styles = StyleSheet.create({
     },
     emptyListImage : { width: 100, height: 100 },
     emptyListHeadingText : {
-        fontFamily: 'Poppins-SemiBold',
         fontSize: 16,
         color: '#212426',
         marginTop: 16,
     },
     emptyListDescText : {
-        fontFamily: 'Poppins-Regular',
         fontSize: 14,
         color: '#4F4D55',
         marginTop: -4,

package/src/styles/screens/instantOfferScreenStyles.ts

@@ -0,0 +1,43 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+    searchContainer: {
+      flexDirection: 'row',
+      borderWidth: 1,
+      borderColor: '#D9D9D9',
+      margin: 16,
+      borderRadius: 8,
+      height: 48,
+      alignItems: 'center',
+      paddingHorizontal: 12,
+    },
+    input: {
+      flex: 1,
+      fontSize: 14,
+    },
+    applyText: {
+      fontWeight: 'bold',
+      fontSize: 16,
+    },
+    divider : {
+      flexDirection: 'row',
+      height: 1,
+      backgroundColor: '#ECECED',
+    },
+    screenView : {
+      flex: 1, backgroundColor: 'white' 
+    },
+    searchTextInputLabel : {
+      fontSize: 16
+    },
+    searchTextInput : {
+      marginTop: 16,
+      marginHorizontal: 16,
+      backgroundColor: 'white',
+      fontSize: 16,
+      color: '#0A090B',
+      height: 60,
+    }
+  });
+
+  export default styles