boxpay-checkout-reactnative-sdk 1.0.0-beta03

package/src/styles/screens/upiScreenStyles.ts

@@ -0,0 +1,110 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+    headingContainer : {
+        flex: 1, flexDirection: 'row', alignItems: 'center' 
+    },
+    headingText: {
+        marginStart: 14,
+        marginTop: 20,
+        fontSize: 14,
+        color: '#020815B5',
+        fontFamily: 'Poppins-SemiBold',
+    },
+    divider : {
+        flexDirection: 'row',
+        height: 1,
+        backgroundColor: '#ECECED'
+    },
+    pressableCollectContainer : {
+        flexDirection: 'row',
+        alignItems: 'center', // Ensures vertical alignment of items
+        paddingTop: 16,
+        paddingStart: 16,
+        marginEnd: 16,
+        justifyContent: 'space-between',
+    },
+    upiIntentRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingTop: 14,
+    },
+    textInput: {
+        marginHorizontal: 16,
+        borderRadius: 8,
+        backgroundColor: 'white',
+        fontSize: 14,
+        fontFamily: 'Poppins-Regular',
+        color: '#0A090B',
+    },
+    labeltextInput: {
+        fontSize: 20,
+    },
+    intentIcon: {
+        height: 28,
+        width: 30,
+    },
+    intentIconBorder: {
+        height: 56,
+        width: 56,
+        borderWidth: 1,
+        borderColor: '#DCDEE3',
+        borderRadius: 7,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    intentContainer: {
+        alignItems: 'center',
+        marginEnd: 22,
+    },
+    intentTitle: {
+        color: '#363840',
+        fontSize: 14,
+        fontFamily: 'Poppins-Regular',
+        marginTop: 4,
+    },
+    intentBackground: {
+        borderColor: '#F1F1F1',
+        borderWidth: 1,
+        marginHorizontal: 16,
+        marginVertical: 8,
+        backgroundColor: 'white',
+        flexDirection: 'column',
+        borderRadius: 12,
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        borderRadius: 8,
+        justifyContent: 'center',
+        marginTop: 20,
+        marginHorizontal: 16,
+        paddingVertical: 14,
+    },
+    buttonText: {
+        color: 'white',
+        fontSize: 16,
+        fontFamily: 'Poppins-SemiBold',
+    },
+    currencySymbol: {
+        color: 'white',
+        fontSize: 16,
+        fontFamily: 'Inter-SemiBold',
+    },
+    errorText : {
+        fontSize: 12,
+        color: '#E12121',
+        marginStart: 16,
+        marginHorizontal: 16,
+        fontFamily: 'Poppins-Regular',
+    },
+    errorIcon : {
+        width: 24, height: 24
+    },
+    labelText : {
+        fontSize: 14,
+        fontFamily: 'Poppins-Regular',
+    }
+})
+
+export default styles

package/src/styles/screens/upiTimerScreenStyle.ts

@@ -0,0 +1,97 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+    screenView : {
+        flex: 1, backgroundColor: '#F5F6FB'
+    },
+    cancelPaymentContainer: {
+        alignItems: 'center',
+        paddingBottom: 10,
+        paddingHorizontal: 16,
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+    },
+    mainContainer : {
+        flex: 1,
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        marginTop: 32,
+    },
+    headingText : {
+        color: '#2D2B32',
+        fontSize: 18,
+        textAlign: 'center',
+        fontFamily: 'Poppins-SemiBold',
+    },
+    descText : {
+        color: '#2D2B32',
+        fontSize: 14,
+        paddingTop: 12,
+        textAlign: 'center',
+        lineHeight: 24,
+        fontFamily: 'Poppins-Regular',
+    },
+    container : {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderColor: '#BABABA',
+        borderWidth: 2,
+        borderRadius: 8,
+        paddingVertical: 6,
+        paddingHorizontal: 8,
+        marginTop: 12,
+    },
+    imageStyle : {
+        height: 16, width: 16, marginRight: 4
+    },
+    text : {
+        color: '#1D1C20',
+        fontSize: 12,
+        fontFamily: 'Poppins-Regular',
+    },
+    expireInTextStyle : {
+        color: '#1D1C20',
+        fontSize: 16,
+        textAlign: 'center',
+        marginTop: 32,
+        fontFamily: 'Poppins-Medium',
+    },
+    progressBarContainer : {
+        marginTop: 14, alignItems: 'center' 
+    },
+    infoContainer : {
+        flexDirection: 'row',
+        borderColor: '#ECECED',
+        borderWidth: 2,
+        borderRadius: 8,
+        paddingVertical: 16,
+        paddingHorizontal: 16,
+        marginTop: 32,
+    },
+    infoImageStyle : {
+        height: 26, width: 26
+    },
+    infoText : {
+        color: '#1D1C20',
+        fontSize: 12,
+        paddingStart: 16,
+        lineHeight: 18,
+        fontFamily: 'Poppins-Regular',
+    },
+    thickDivider : {
+        flexDirection: 'row',
+        height: 2,
+        backgroundColor: '#ECECED',
+        marginBottom: 48, 
+    },
+    cancelTextStyle : {
+        fontSize: 16,
+        fontFamily: 'Poppins-SemiBold',
+    }
+})
+
+export default styles

package/src/styles/screens/walletScreenStyles.ts

@@ -0,0 +1,102 @@
+import { StyleSheet } from "react-native";
+
+const styles = StyleSheet.create({
+    screenView : {
+        flex: 1, 
+        backgroundColor: 'white'
+    },
+    loaderView : {
+        flex: 1, 
+        alignItems: 'center', 
+        justifyContent: 'center'
+    },
+    lottieStyle : {
+        width: 80, height: 80
+    },
+    listContainer : {
+        marginHorizontal: 16,
+        backgroundColor: 'white',
+        borderColor: '#F1F1F1',
+        borderWidth: 1,
+        borderRadius: 12,
+        marginBottom: 32,
+    },
+    emptyListContainer : {
+        marginHorizontal: 16,
+        backgroundColor: 'white',
+        borderColor: '#F1F1F1',
+        borderWidth: 1,
+        borderRadius: 12,
+        marginBottom: 32,
+        height: 300,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    imageStyle : {
+        width: 100, 
+        height: 100   
+    },
+    headingText : {
+        fontFamily: 'Poppins-SemiBold',
+        fontSize: 16,
+        color: '#212426',
+        marginTop: 16,
+    },
+    subHeadingText : {
+        fontFamily: 'Poppins-Regular',
+        fontSize: 14,
+        color: '#4F4D55',
+        marginTop: -4,
+    },
+    bottomContainer : {
+        justifyContent: 'center',
+        alignItems: 'flex-end',
+        backgroundColor: '#F5F6FB',
+        flexDirection: 'row',
+    },
+    bottomText : {
+        fontSize: 12,
+        color: '#888888',
+        marginBottom: 15,
+        fontFamily: 'Poppins-Medium',  
+    },
+    bottomImage : {
+        height: 50, width: 50
+    },
+    webViewContainer : {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'white',
+    },
+    mainHeadingText  :{
+        marginTop: 16,
+        marginBottom: 8,
+        marginHorizontal: 16,
+        color: '#020815B5',
+        fontFamily: 'Poppins-SemiBold',
+        fontSize: 14,
+    },
+    textFieldStyle : {
+        marginTop: 16,
+        marginHorizontal: 16,
+        backgroundColor: 'white',
+        fontSize: 16,
+        fontFamily: 'Poppins-Regular',
+        color: '#0A090B',
+        height: 60,
+    },
+    textFieldLabel : {
+        fontSize: 16,
+        fontFamily: 'Poppins-Regular'
+    },
+    searchContainer : {
+        flexDirection: 'row',
+        height: 1,
+        backgroundColor: '#ECECED',
+    }
+})
+
+export default styles

package/src/utils/listAndObjectUtils.ts

@@ -0,0 +1,33 @@
+import type { PaymentMethod, PaymentClass } from '../interface';
+import { Platform } from 'react-native';
+
+export function transformAndFilterList(
+  data: PaymentMethod[],
+  filterType: string
+): PaymentClass[] {
+  const filteredList = data
+    .filter((item) => item.type === filterType)
+    .sort((a, b) => a.title?.trim().localeCompare(b.title?.trim() ?? ''))
+    .map((item) => ({
+      type: filterType,
+      id: item.id,
+      displayName: item.title,
+      displayValue: item.title,
+      iconUrl: item.logoUrl,
+      instrumentTypeValue: item.instrumentTypeValue,
+      isSelected: false,
+    }));
+
+  return filteredList;
+}
+
+
+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'
+  };
+}

package/src/utils/stringUtils.ts

@@ -0,0 +1,30 @@
+
+const TEST_API_URL = "https://test-apis.boxpay.tech"
+const PROD_API_URL = "https://apis.boxpay.in"
+const ROUTE = "/v0/checkout/sessions/"
+
+export function getEndpoint(env: string): string {
+  const baseUrl = env === 'test' ? TEST_API_URL : PROD_API_URL;
+  return `${baseUrl}${ROUTE}`;
+}
+
+export function generateRandomAlphanumericString(length: number): string {
+  const charPool: string[] =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'.split(
+      ''
+    );
+  let result = '';
+
+  for (let i = 0; i < length; i++) {
+    const randomIndex = Math.floor(Math.random() * charPool.length);
+    result += charPool[randomIndex];
+  }
+
+  return result;
+}
+
+
+export function getBaseURL(env: string): string {
+  const baseUrl = env === 'test' ? TEST_API_URL : PROD_API_URL;
+  return `${baseUrl}/v0`;
+}