boxpay-checkout-reactnative-sdk 1.0.0-beta30 → 1.0.0-beta32

package/src/screens/upiScreen.tsx

@@ -5,6 +5,7 @@ import {
   Image,
   Animated,
   ImageBackground,
+  TouchableOpacity,
 } from 'react-native';
 import React, { useEffect, useState } from 'react';
 import { TextInput } from 'react-native-paper';
@@ -13,12 +14,19 @@ import type { PaymentClass } from '../interface';
 import PaymentSelectorView from '../components/paymentSelector';
 import { getInstalledUpiApps } from '../components/getInstalledUPI';
 import styles from '../styles/screens/upiScreenStyles';
+import DeviceInfo from 'react-native-device-info';
+import { formattedTime } from '../utils/stringUtils';
 
 interface UpiScreenProps {
   handleUpiPayment: (selectedIntent: string) => void;
   handleCollectPayment: (item: string, id: string, type: string) => void;
   savedUpiArray: PaymentClass[];
   onClickRadio: (instrumentValue: string) => void;
+  qrImage : string | null,
+  qrIsExpired : boolean,
+  timeRemaining : number,
+  handleQRPayment : () => void,
+  stopTimer : () => void
 }
 
 const UpiScreen: React.FC<UpiScreenProps> = ({
@@ -26,6 +34,11 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
   handleCollectPayment,
   savedUpiArray,
   onClickRadio,
+  qrImage,
+  qrIsExpired,
+  timeRemaining,
+  handleQRPayment,
+  stopTimer
 }) => {
   const [upiCollectError, setUpiCollectError] = useState(false);
   const [upiCollectValid, setUpiCollectValid] = useState(false);
@@ -36,9 +49,14 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
   const [isPaytmInstalled, setIsPaytmInstalled] = useState(false);
   const { checkoutDetails } = checkoutDetailsHandler;
   const [upiCollectVisible, setUpiCollectVisible] = useState(false);
+  const [upiQRVisible, setUpiQRVisible] = useState(false)
   const [selectedIntent, setSelectedIntent] = useState<string | null>(null);
-  const isUpiCollectVisible = checkoutDetails.isUpiCollectMethodEnabled
-  const isUpiIntentVisible = checkoutDetails.isUpiIntentMethodEnabled
+  const {
+    isUpiCollectMethodEnabled: isUpiCollectVisible,
+    isUpiIntentMethodEnabled: isUpiIntentVisible,
+    isUpiQRMethodEnabled: isUpiQRVisible,
+  } = checkoutDetails;
+  const isTablet = DeviceInfo.isTablet()
 
   useEffect(() => {
     const checkUpiApps = async () => {
@@ -55,12 +73,22 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
     checkUpiApps();
   }, []);
 
-  const handleUpiChevronClick = () => {
+  const handleUpiCollectChevronClick = () => {
     setSelectedIntent(null);
     setUpiCollectVisible(!upiCollectVisible);
+    setUpiQRVisible(false)
     setDefaultStateOfSavedUpiArray();
+    stopTimer()
   };
 
+  const handleUpiQRChevronClick = () => {
+    setSelectedIntent(null);
+    setUpiCollectVisible(false);
+    handleQRPayment()
+    setUpiQRVisible(!upiQRVisible)
+    setDefaultStateOfSavedUpiArray();
+  }
+
   const handleTextChange = (text: string) => {
     setUpiCollectTextInput(text);
     setUpiCollectError(false);
@@ -85,6 +113,7 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
     ) {
       onClickRadio('');
     }
+    stopTimer()
   };
 
   return (
@@ -273,25 +302,20 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
               >
                 <Pressable
                   style={styles.pressableCollectContainer}
-                  onPress={() => handleUpiChevronClick()}
+                  onPress={() => handleUpiCollectChevronClick()}
                 >
                   {/* Icon and Text Wrapper */}
                   <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                     <Image
                       source={require('../../assets/images/add_icon.png')}
-                      style={{
-                        height: 14,
-                        width: 14,
+                      style={[styles.imageStyle,{
                         tintColor: checkoutDetails.brandColor,
-                      }}
+                      }]}
                     />
                     <Text
-                      style={{
-                        fontSize: 14,
+                      style={[styles.subHeaderText,{
                         color: checkoutDetails.brandColor,
-                        paddingStart: 10,
-                        fontFamily: 'Poppins-SemiBold',
-                      }}
+                      }]}
                     >
                       Add new UPI Id
                     </Text>
@@ -299,16 +323,13 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
 
                   <Animated.Image
                     source={require('../../assets/images/chervon-down.png')}
-                    style={{
-                      alignSelf: 'center',
-                      height: 6,
-                      width: 14,
+                    style={[styles.animatedIcon,{
                       transform: [
                         {
                           rotate: upiCollectVisible ? '180deg' : '0deg',
                         },
                       ],
-                    }}
+                    }]}
                   />
                 </Pressable>
               </ImageBackground>
@@ -316,35 +337,25 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
               <View style={{ paddingBottom: isUpiCollectVisible ? 16 : 0 }}>
                 {isUpiIntentVisible && (
                   <View
-                    style={{
-                      flexDirection: 'row',
-                      height: 1,
-                      backgroundColor: '#F1F1F1',
-                      marginTop: 20,
-                    }}
+                    style={styles.subContainerDivider}
                   />
                 )}
                 <Pressable
                   style={styles.pressableCollectContainer}
-                  onPress={() => handleUpiChevronClick()}
+                  onPress={() => handleUpiCollectChevronClick()}
                 >
                   {/* Icon and Text Wrapper */}
                   <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                     <Image
                       source={require('../../assets/images/add_icon.png')}
-                      style={{
-                        height: 14,
-                        width: 14,
+                      style={[styles.imageStyle,{
                         tintColor: checkoutDetails.brandColor,
-                      }}
+                      }]}
                     />
                     <Text
-                      style={{
-                        fontSize: 14,
-                        color: checkoutDetails.brandColor,
-                        paddingStart: 10,
-                        fontFamily: 'Poppins-SemiBold',
-                      }}
+                      style={[styles.subHeaderText,{
+                        color: checkoutDetails.brandColor
+                      }]}
                     >
                       Add new UPI Id
                     </Text>
@@ -352,16 +363,13 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
 
                   <Animated.Image
                     source={require('../../assets/images/chervon-down.png')}
-                    style={{
-                      alignSelf: 'center',
-                      height: 6,
-                      width: 14,
+                    style={[styles.animatedIcon,{
                       transform: [
                         {
                           rotate: upiCollectVisible ? '180deg' : '0deg',
                         },
                       ],
-                    }}
+                    }]}
                   />
                 </Pressable>
               </View>
@@ -457,6 +465,126 @@ const UpiScreen: React.FC<UpiScreenProps> = ({
             )}
           </View>
         )}
+
+        {(isUpiQRVisible && isTablet) && (
+          <View>
+          {upiQRVisible ? (
+            <ImageBackground
+              source={require('../../assets/images/add_upi_id_background.png')} // Replace with your background image
+              resizeMode="cover"
+              style={{
+                paddingBottom: 34,
+                marginTop: isUpiIntentVisible || isUpiCollectVisible ? 24 : 0,
+              }}
+            >
+              <Pressable
+                style={styles.pressableCollectContainer}
+                onPress={() => handleUpiQRChevronClick()}
+              >
+                {/* Icon and Text Wrapper */}
+                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                  <Image
+                    source={require('../../assets/images/ic_qr.png')}
+                    style={[styles.imageStyle,{
+                      tintColor: checkoutDetails.brandColor,
+                    }]}
+                  />
+                  <Text
+                    style={[styles.subHeaderText,{
+                      color: checkoutDetails.brandColor
+                    }]}
+                  >
+                    Pay Using QR
+                  </Text>
+                </View>
+
+                <Animated.Image
+                  source={require('../../assets/images/chervon-down.png')}
+                  style={[styles.animatedIcon,{
+                    transform: [
+                      {
+                        rotate: upiQRVisible ? '180deg' : '0deg',
+                      },
+                    ],
+                  }]}
+                />
+              </Pressable>
+            </ImageBackground>
+          ) : (
+            <View style={{ paddingBottom: isUpiCollectVisible || isUpiIntentVisible ? 16 : 0 }}>
+              {(isUpiIntentVisible || isUpiCollectVisible) && (
+                <View
+                  style={styles.subContainerDivider}
+                />
+              )}
+              <Pressable
+                style={styles.pressableCollectContainer}
+                onPress={() => handleUpiQRChevronClick()}
+              >
+                {/* Icon and Text Wrapper */}
+                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                  <Image
+                    source={require('../../assets/images/ic_qr.png')}
+                    style={[styles.imageStyle,{
+                      tintColor: checkoutDetails.brandColor,
+                    }]}
+                  />
+                  <Text
+                    style={[styles.subHeaderText,{
+                      color: checkoutDetails.brandColor
+                    }]}
+                  >
+                   Pay Using QR
+                  </Text>
+                </View>
+
+                <Animated.Image
+                  source={require('../../assets/images/chervon-down.png')}
+                  style={[styles.animatedIcon,{
+                    transform: [
+                      {
+                        rotate: upiQRVisible ? '180deg' : '0deg',
+                      },
+                    ],
+                  }]}
+                />
+              </Pressable>
+            </View>
+          )}
+        </View>
+        )}
+
+        {upiQRVisible && (
+          <View style={{ paddingBottom: isUpiCollectVisible || isUpiIntentVisible ? 16 : 0 }}>
+            {qrImage && (
+        <View style={styles.qrContainer}>
+          <Image
+            source={{ uri: `data:image/png;base64,${qrImage}` }}
+            style={[
+              styles.qrImage,
+              { opacity: qrIsExpired ? 0.2 : 1 },
+            ]}
+          />
+
+          {qrIsExpired && (
+            <TouchableOpacity style={styles.retryButton} onPress={handleQRPayment}>
+              <Text style={[styles.retryText, { color: checkoutDetails.brandColor }]}>
+                ↻ Retry
+              </Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      )}
+
+      <View style={styles.textContainer}>
+        <Text style={styles.label}>Scan & Pay with UPI Application</Text>
+        <Text style={styles.label}>QR code will expire in</Text>
+        <Text style={[styles.timer, { color: checkoutDetails.brandColor }]}>
+          {formattedTime(timeRemaining)}
+        </Text>
+      </View>
+          </View>
+        )}
       </View>
     </View>
   );

package/src/sharedContext/checkoutDetailsHandler.ts

@@ -28,6 +28,7 @@ export let checkoutDetailsHandler: CheckoutDetailsHandler = {
     isDOBEnabled: false,
     isDOBEditable: false,
     isUpiIntentMethodEnabled : false,
+    isUpiQRMethodEnabled:false,
     isUpiCollectMethodEnabled : false,
     isCardMethodEnabled : false,
     isWalletMethodEnabled : false,

package/src/sharedContext/handlePaymentResponseHandler.ts

@@ -17,7 +17,8 @@ export function handlePaymentResponse({
     onShowSuccessModal,
     onShowSessionExpiredModal,
     onNavigateToTimer,
-    onOpenUpiIntent, // 👈 new
+    onOpenQr,
+    onOpenUpiIntent, 
     setLoading
   }: HandlePaymentOptions) {
     switch(response.apiStatus) {
@@ -53,6 +54,12 @@ export function handlePaymentResponse({
                                 onOpenUpiIntent(action.url); // 👈 launch UPI intent
                             }
                             break;
+                            
+                        case 'qrCode' : 
+                            if(action.content && onOpenQr) {
+                                onOpenQr(action.content)
+                            }
+                            break
             
                         default:
                             break;

package/src/styles/screens/savedAddressScreenStyles.ts

@@ -37,8 +37,8 @@ const styles = StyleSheet.create({
         alignItems:'center'
       },
       imageStyle : {
-        height: 10,
-        width: 10,
+        height: 20,
+        width: 20,
         marginStart: 12
       },
       insideContainerClickableText : {

package/src/styles/screens/upiScreenStyles.ts

@@ -104,6 +104,70 @@ const styles = StyleSheet.create({
     labelText : {
         fontSize: 14,
         fontFamily: 'Poppins-Regular',
+    },
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: 12,
+        paddingTop: 12,
+    },
+    qrContainer: {
+        position: "relative",
+        width: 300,
+        height: 300,
+        marginRight: 12,
+    },
+    qrImage: {
+        width: 300,
+        height: 300,
+        resizeMode: "cover",
+        borderRadius: 8,
+    },
+    retryButton: {
+        position: "absolute",
+        top: "40%",
+        left: "30%",
+        backgroundColor: "#fff",
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        borderRadius: 12,
+    },
+    retryText: {
+        fontSize: 20,
+        fontWeight: "600",
+    },
+    textContainer: {
+        flexDirection: "column",
+        justifyContent: "flex-start",
+    },
+    label: {
+        fontSize: 12,
+        fontWeight: "500",
+        color: "#2D2B32",
+    },
+    timer: {
+        fontSize: 20,
+        fontWeight: "600",
+    },
+    imageStyle : {
+        height: 14,
+        width: 14,
+    },
+    subHeaderText : {
+        fontSize: 14,
+        paddingStart: 10,
+        fontFamily: 'Poppins-SemiBold',
+    },
+    animatedIcon : {
+        alignSelf: 'center',
+        height: 6,
+        width: 14,
+    },
+    subContainerDivider : {
+        flexDirection: 'row',
+        height: 1,
+        backgroundColor: '#F1F1F1',
+        marginTop: 20,
     }
 })
 

package/src/utils/listAndObjectUtils.ts

@@ -1,5 +1,7 @@
-import type { PaymentMethod, PaymentClass } from '../interface';
-import { Platform } from 'react-native';
+import DeviceInfo from 'react-native-device-info';
+import type { PaymentMethod, PaymentClass, DeliveryAddress } from '../interface';
+import { Dimensions } from 'react-native';
+import { userDataHandler } from '../sharedContext/userdataHandler';
 
 export function transformAndFilterList(
   data: PaymentMethod[],
@@ -24,10 +26,59 @@ export function transformAndFilterList(
 
 export function getDeviceDetails() {
   return {
-    browser: Platform.OS,
-    platformVersion: Platform.Version.toString(),
-    deviceType: Platform.OS === 'ios' || Platform.OS === 'android' ? 'Phone' : 'Web',
-    deviceName: Platform.OS === 'ios' ? 'iOS Device' : 'Android Device',
-    deviceBrandName: Platform.OS === 'ios' ? 'Apple' : 'Android'
+    browser: DeviceInfo.getBaseOs(),
+    platformVersion: DeviceInfo.getVersion(),
+    deviceType: DeviceInfo.getDeviceType(),
+    deviceName: DeviceInfo.getDeviceName(),
+    deviceBrandName: DeviceInfo.getBrand()
   };
+}
+
+export function getBrowserData() {
+  const { height, width } = Dimensions.get("window");
+  const bundleId = DeviceInfo.getBundleId()
+  return {
+    screenHeight: height,
+    screenWidth: width,
+    acceptHeader: 'application/json',
+    userAgentHeader: 'Expo App',
+    browserLanguage: 'en_US',
+    ipAddress: 'null',
+    colorDepth: 24,
+    javaEnabled: true,
+    timeZoneOffSet: new Date().getTimezoneOffset(),
+    packageId: bundleId || 'com.boxpay.checkout.sdk',
+  }
+}
+
+export function getShopperDetails() {
+  const { userData } = userDataHandler;
+  const isDeliveryAddressEmpty = (address: DeliveryAddress): boolean => {
+    return Object.values(address).every(
+      (value) => value === null || value === undefined || value === ''
+    );
+  };
+  const deliveryAddress = {
+    address1: userData.address1,
+    address2: userData.address2,
+    city: userData.city,
+    state: userData.state,
+    countryCode: userData.country,
+    postalCode: userData.pincode,
+    labelType: userData.labelType,
+    labelName: userData.labelName,
+  };
+  return {
+    email: userData.email,
+    firstName: userData.firstName,
+    gender: null,
+    lastName: userData.lastName,
+    phoneNumber: userData.phone,
+    uniqueReference: userData.uniqueId,
+    dateOfBirth: userData.dob,
+    panNumber: userData.pan,
+    deliveryAddress: isDeliveryAddressEmpty(deliveryAddress)
+      ? null
+      : deliveryAddress,
+  }
 }

package/src/utils/stringUtils.ts

@@ -55,4 +55,10 @@ export function extractNames(fullName: string): {
   const lastName = components.slice(1).join(' ') || '';
 
   return { firstName, lastName };
-}
+}
+
+export const formattedTime = (timeRemaining: number): string => {
+  const minutes = Math.floor(timeRemaining / 60);
+  const seconds = timeRemaining % 60;
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+};