From 71a5ccdd38a2fe02dd2dfd336132024c4917d3ba Mon Sep 17 00:00:00 2001 From: Subhash Chandra Date: Mon, 22 Jul 2024 16:51:59 +0530 Subject: [PATCH] fixes to support fragment viewgroup --- .../payments/in.juspay.hyperpay/base.html | 49 ++++ .../app/src/main/res/values/strings.xml | 1 + example/android/build.gradle | 2 +- example/src/App.tsx | 6 + example/src/HomeScreen.tsx | 4 +- example/src/OfferScreen.tsx | 10 + example/src/ProcessScreen.tsx | 242 +++++++++++++++++- 7 files changed, 300 insertions(+), 14 deletions(-) create mode 100644 example/android/app/src/main/assets/juspay/payments/in.juspay.hyperpay/base.html create mode 100644 example/src/OfferScreen.tsx diff --git a/example/android/app/src/main/assets/juspay/payments/in.juspay.hyperpay/base.html b/example/android/app/src/main/assets/juspay/payments/in.juspay.hyperpay/base.html new file mode 100644 index 0000000..584029a --- /dev/null +++ b/example/android/app/src/main/assets/juspay/payments/in.juspay.hyperpay/base.html @@ -0,0 +1,49 @@ + + + MYSTIQUE + + + + + + diff --git a/example/android/app/src/main/res/values/strings.xml b/example/android/app/src/main/res/values/strings.xml index c2a6931..ebc23f4 100644 --- a/example/android/app/src/main/res/values/strings.xml +++ b/example/android/app/src/main/res/values/strings.xml @@ -1,3 +1,4 @@ HyperSdkReact Example + false diff --git a/example/android/build.gradle b/example/android/build.gradle index d73e97c..177b1a6 100644 --- a/example/android/build.gradle +++ b/example/android/build.gradle @@ -13,7 +13,7 @@ buildscript { // Hyper SDK clientId = 'geddit' hyperSDKVersion = "2.1.25" - excludedMicroSDKs = [] + excludedMicroSDKs = ["hyperapay"] } repositories { google() diff --git a/example/src/App.tsx b/example/src/App.tsx index 3bf5402..42044b9 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -10,6 +10,7 @@ import { createStackNavigator } from '@react-navigation/stack'; import { NavigationContainer } from '@react-navigation/native'; import HomeScreen from './HomeScreen'; import ProcessScreen from './ProcessScreen'; +import OfferScreen from './OfferScreen'; const AppNavigator = createStackNavigator(); @@ -26,6 +27,11 @@ const App = () => ( component={ProcessScreen} options={{ title: 'Process Screen' }} /> + ); diff --git a/example/src/HomeScreen.tsx b/example/src/HomeScreen.tsx index fe1583d..9b2072a 100644 --- a/example/src/HomeScreen.tsx +++ b/example/src/HomeScreen.tsx @@ -31,7 +31,7 @@ import { useNavigation } from '@react-navigation/native'; class HomeScreen extends React.Component { state = { animation: new Animated.Value(0), - pickerSelected: 'ec', + pickerSelected: 'pp', }; navigation: any; @@ -170,8 +170,8 @@ class HomeScreen extends React.Component { console.log(val, index); }} > - + diff --git a/example/src/OfferScreen.tsx b/example/src/OfferScreen.tsx new file mode 100644 index 0000000..e5af641 --- /dev/null +++ b/example/src/OfferScreen.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import { Text, View } from 'react-native'; + +export default function OfferScreen() { + return ( + + Offer Screen + + ); +} diff --git a/example/src/ProcessScreen.tsx b/example/src/ProcessScreen.tsx index 773cc5f..42ff275 100644 --- a/example/src/ProcessScreen.tsx +++ b/example/src/ProcessScreen.tsx @@ -20,7 +20,7 @@ import { Dimensions, ScrollView, } from 'react-native'; -import { Picker } from '@react-native-picker/picker'; +// import { Picker } from '@react-native-picker/picker'; import CheckBox from '@react-native-community/checkbox'; import HyperSdkReact, { HyperView } from 'hyper-sdk-react'; import HyperAPIUtils from './API'; @@ -37,6 +37,7 @@ class ProcessScreen extends React.Component { resultText: '', animation: new Animated.Value(0), isPayloadGenerated: false, + hideWidget: false, ppPayload: '', }; @@ -147,6 +148,86 @@ class ProcessScreen extends React.Component { }); } + UpdateOrderData = () => { + const [text, onChangeText] = React.useState(''); + const [number, onChangeNumber] = React.useState(this.amount); + return ( + + + + + + { + let orderDetailsNew = {}; + if (text !== '') { + orderDetailsNew = { + merchant_id: this.merchantId, + customer_id: this.customerId, + order_id: this.orderId, + amount: number, + mobile_number: this.mobile, + customer_email: this.email, + timestamp: HyperUtils.getTimestamp(), + offer_details: { + offer_applied: String(text !== ''), + offer_code: text, + amount: number, + }, + }; + } else { + orderDetailsNew = { + merchant_id: this.merchantId, + customer_id: this.customerId, + order_id: this.orderId, + amount: number, + mobile_number: this.mobile, + customer_email: this.email, + timestamp: HyperUtils.getTimestamp(), + }; + } + let signNew = ''; + HyperAPIUtils.generateSign( + this.privateKey, + JSON.stringify(orderDetailsNew) + ) + .then((resp) => { + signNew = resp; + // HyperUtils.showCopyAlert( + // 'Payload signed', + // this.signature + // ); + }) + .catch((err) => { + console.warn(err); + }); + var payload = HyperUtils.generateProcessPayloadPP( + 'updateOrder', + this.clientId, + this.merchantId, + JSON.stringify(orderDetailsNew), + signNew, + this.merchantKeyId + ); + HyperSdkReact.process(JSON.stringify(payload)); + }} + /> + + ); + }; + componentWillUnmount() { this.eventListener.remove(); BackHandler.removeEventListener('hardwareBackPress', () => null); @@ -171,7 +252,9 @@ class ProcessScreen extends React.Component { this.isPopupVisible = false; }; - + toggleVisibility = () => { + this.setState({ hideWidget: !this.state.hideWidget }); + }; render() { const screenHeight = Dimensions.get('window').height; @@ -205,9 +288,11 @@ class ProcessScreen extends React.Component { }; return ( - + + + - + {/* {this.service === 'ec' ? ( )} - + */} {this.state.pickerSelected === 'getPM' ? ( ) : null} - { HyperSdkReact.isInitialised().then((init: boolean) => { @@ -797,14 +884,14 @@ class ProcessScreen extends React.Component { HyperUtils.showCopyAlert('isInitialised', init + ''); }); }} - /> + /> */} { HyperSdkReact.terminate(); }} /> - { this.handleOpen(); @@ -822,6 +909,20 @@ class ProcessScreen extends React.Component { } /> ) : null} + /> */} + + { + this.toggleVisibility(); + }} + /> + { + this.navigation.navigate('OfferScreen'); + }} + /> @@ -846,6 +947,47 @@ class ProcessScreen extends React.Component { + + + {this.state.isPayloadGenerated ? ( + + ) : null} + + {/* + { + const data = { + requestId: 'testid', + service: 'in.juspay.hyperpay', + payload: { + action: 'updateDetails', + hidePaymentWidget: false, + }, + }; + HyperSdkReact.process(JSON.stringify(data)); + }} + /> + */} + ); } @@ -857,14 +999,60 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, - containerSon: { - height: 250, + containerNew: { + height: 50, width: '100%', - backgroundColor: 'green', + // backgroundColor: 'yellow', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'center', + }, + containerSon: { + height: 'auto', + // width: 'auto', + flex: 0, + backgroundColor: 'white', + }, + newWala: { + height: 'auto', + // width: 'auto', + flex: 1, + backgroundColor: 'white', + }, + containerSon2: { + height: 'auto', + // width: '100%', + flex: 1, + backgroundColor: 'white', + alignItems: 'center', + justifyContent: 'center', }, horizontal: { flexDirection: 'row', }, + horizontal2: { + flexDirection: 'row', + height: 103, + width: '100%', + position: 'absolute', + bottom: 0, + }, + horizontal2Gone: { + display: 'none', + visibility: 'none', + }, + input: { + borderColor: 'black', + borderWidth: 1, + margin: 2, + }, + input2: { + borderColor: 'black', + color: 'black', + borderWidth: 1, + margin: 2, + // placeholderTextColor: 'black', + }, button: { backgroundColor: 'blue', paddingVertical: 12, @@ -872,6 +1060,22 @@ const styles = StyleSheet.create({ borderRadius: 25, marginVertical: 12, }, + button2: { + backgroundColor: 'blue', + borderRadius: 25, + width: 200, + height: 40, + alignItems: 'center', + justifyContent: 'center', + }, + button3: { + backgroundColor: '#FF3269', + borderRadius: 25, + width: 200, + height: 40, + alignItems: 'center', + justifyContent: 'center', + }, buttonText: { color: 'white', fontSize: 18, @@ -951,6 +1155,22 @@ const CustomButton = (props: any) => { ); }; +const CustomButton2 = (props: any) => { + return ( + + {props.title} + + ); +}; + +// const CustomButton3 = (props: any) => { +// return ( +// +// {props.title} +// +// ); +// }; + const CustomCheckBox = (props: any) => { return (