airbridge-react-native-sdk-restricted 2.8.6 → 2.8.8

package/qa/source/component/VerticalPreference.js

@@ -0,0 +1,42 @@
+import React, { Component } from 'react'
+import {
+  TouchableOpacity,
+  Pressable,
+  View,
+  Text
+} from 'react-native'
+
+import { Styles } from '../common/Styles'
+import { Colors } from '../common/Colors'
+
+export default class VerticalPreference extends Component{
+ 
+  constructor(props){
+    super(props)
+
+    this.accessibilityLabel = Platform.OS !== 'ios' ? this.props.accessibilityLabel : null
+    this.testID = this.props.accessibilityLabel
+  }
+
+  render() {
+    return (
+      <Pressable
+        onPress={this.props.onPress}>
+        <Text
+          style={{
+            color: Colors.black,
+            fontSize: 16,
+            fontWeight: 600
+          }}>{this.props.title}</Text>
+        <Text
+          testID={this.testID}
+          accessibilityLabel={this.accessibilityLabel}
+          style={{
+            color: Colors.black,
+            fontSize: 12
+        }}>{this.props.text}</Text>
+        <View style={Styles.line} />
+      </Pressable>
+    )
+  }
+}

package/qa/source/navigations/Stack.js

@@ -0,0 +1,110 @@
+import React from 'react'
+import { createStackNavigator } from '@react-navigation/stack'
+
+import ImageButton from '../component/ImageButton'
+
+import HomePage from '../pages/Home'
+
+import UserInfoPage from '../pages/UserInfo'
+import EventPage from '../pages/Event'
+import DeviceInfoPage from '../pages/DeviceInfo'
+import IdentifiersPage from '../pages/Identifiers'
+import InstallReferrerPage from '../pages/InstallReferrer'
+import PlacementPage from '../pages/Placement'
+import { RequestPermissionsPage } from '../pages/RequestPermissions'
+import BrowsePage from '../pages/Browse'
+import AppInfoPage from '../pages/appInfo'
+
+const Stack = createStackNavigator()
+
+const createNavigateButton = (navigation, accessibilityLabel, source) => {
+    return (
+        <ImageButton
+            source={source}
+            width={20}
+            height={20}
+            accessibilityLabel={accessibilityLabel}
+            onPress={() => { 
+                if (navigation.canGoBack()) {
+                    navigation.goBack()
+                }
+            }} />
+    )
+}
+
+const createNavigateBackButton = (navigation) => {
+    return createNavigateButton(navigation, 'navigateBack', require('./../../resource/arrow_back.png'))
+}
+
+const createNavigateHomeButton = (navigation) => {
+    return createNavigateButton(navigation, 'navigateHome', require('./../../resource/home.png'))
+}
+
+const StackNavigation = () => {
+    return (
+        <Stack.Navigator>
+            <Stack.Screen name='home' 
+                component={HomePage} 
+                options={({ navigation }) => ({
+                    title: 'AirbridgeQA(react-native)',
+                    headerRight: () => createNavigateHomeButton(navigation)
+                })}/>
+            <Stack.Screen name='userInfo'
+                component={UserInfoPage}
+                options={({ navigation }) => ({
+                    headerLeft: () => createNavigateBackButton(navigation),
+                    headerRight: () => createNavigateHomeButton(navigation)
+                })}/>
+            <Stack.Screen name='occurringEvent'
+                component={EventPage}
+                options={({ navigation }) => ({
+                    headerLeft: () => createNavigateBackButton(navigation),
+                    headerRight: () => createNavigateHomeButton(navigation)
+                })}/>
+            <Stack.Screen name='identifiers'
+                component={IdentifiersPage}
+                options={({ navigation }) => ({
+                    headerLeft: () => createNavigateBackButton(navigation),
+                    headerRight: () => createNavigateHomeButton(navigation)
+                })}/>
+            <Stack.Screen name='installReferrer' 
+                component={InstallReferrerPage}
+                options={({ navigation }) => ({
+                    headerLeft: () => createNavigateBackButton(navigation),
+                    headerRight: () => createNavigateHomeButton(navigation)
+                })} />
+            <Stack.Screen name='deviceInfo' 
+                component={DeviceInfoPage}
+                options={({ navigation }) => ({
+                    headerLeft: () => createNavigateBackButton(navigation),
+                    headerRight: () => createNavigateHomeButton(navigation)
+                })} />
+            <Stack.Screen name='requestPermissions' 
+                component={RequestPermissionsPage}
+                options={({ navigation }) => ({
+                    headerLeft: () => createNavigateBackButton(navigation),
+                    headerRight: () => createNavigateHomeButton(navigation)
+                })} />
+            <Stack.Screen name='trackingLinksWithinApps'
+                component={PlacementPage}
+                options={({ navigation }) => ({
+                    headerLeft: () => createNavigateBackButton(navigation),
+                    headerRight: () => createNavigateHomeButton(navigation)
+                })} />
+            <Stack.Screen name='browse'
+                component={BrowsePage}
+                options={({ navigation }) => ({
+                    headerLeft: () => createNavigateBackButton(navigation),
+                    headerRight: () => createNavigateHomeButton(navigation)
+                })} />
+            <Stack.Screen name='appInfo'
+                component={AppInfoPage}
+                options={({ navigation }) => ({
+                    headerLeft: () => createNavigateBackButton(navigation),
+                    headerRight: () => createNavigateHomeButton(navigation)
+                })} />
+        </Stack.Navigator>  
+    )
+}
+
+export default StackNavigation

package/qa/source/pages/Browse.js

@@ -0,0 +1,118 @@
+import React, { Component } from 'react'
+
+import { View } from 'react-native'
+import ImageButton from '../component/ImageButton'
+
+import UrlInputDialog from '../component/UrlInputDialog'
+import InjectInputDialog from '../component/InjectInputDialog'
+import MessageDialog from '../component/MessageDialog'
+
+import { WebView } from 'react-native-webview'
+import Airbridge from 'airbridge-react-native-sdk'
+
+export default class BrowsePage extends Component {
+
+  constructor(props) {
+    super(props);
+    
+    this.defaultQASource = 'https://sdk-download.airbridge.io/airbridge-web-sdk-qa-library/latest/AirbridgeQALibrary/index.html'
+    let token = '46bbd826f96e49ca92f04daf0d816f95'
+    this.webInterface = this.createWebInterface(token)
+
+    this.state = {
+        source: this.defaultQASource,
+        token: token,
+        script: this.webInterface.script,
+        info: ''
+    };
+
+    this.webviewRef = React.createRef()
+    this.urlRef = React.createRef()
+    this.injectRef = React.createRef()
+    this.infoRef = React.createRef()
+  }
+
+  handleWebViewMessage = (event) => {
+      console.log('Message received from web page:', event.nativeEvent);
+
+      const message = event.nativeEvent.data;
+      this.webInterface.handle(message);
+  }
+
+  createWebInterface = (token) => {
+    return Airbridge.createWebInterface(
+      token,
+      (command) => { 
+          return `window.ReactNativeWebView.postMessage(${command})`;
+      }
+    )
+  }
+
+  render() {
+    return (
+      <View style={{flex: 1}}>
+        <WebView
+          ref={this.webviewRef}
+          source={{ uri: this.state.source }}
+          onMessage={ this.handleWebViewMessage }
+          webviewDebuggingEnabled={true}
+          injectedJavaScript={ this.state.script } />
+        
+        <View style={{ flexDirection: 'row'}}>
+          <ImageButton
+            source={require('./../../resource/refresh.png')}
+            accessibilityLabel={'browseReload'}
+            onPress={() => {this.webviewRef.current.reload()}} />
+          <View style={{ margin: 4 }} />
+          <ImageButton
+            source={require('./../../resource/home.png')}
+            accessibilityLabel={'hybridTestPage'}
+            onPress={() => this.setState({source: this.defaultQASource})} />
+          <View style={{ margin: 4 }} />
+          <ImageButton
+            source={require('./../../resource/link.png')}
+            accessibilityLabel={'browseUrl'}
+            onPress={() => {this.urlRef.current.show()}} />
+          <View style={{ margin: 4 }} />
+          <ImageButton
+            source={require('./../../resource/token.png')}
+            accessibilityLabel={'injectWebToken'}
+            onPress={() => { this.injectRef.current.show() }} />
+          <View style={{ margin: 4 }} />
+          <ImageButton
+            source={require('./../../resource/info.png')}
+            accessibilityLabel={'info'}
+            onPress={() => {
+              var log = ''
+                log += 'url : ' + this.state.source.toString() + '\n\n'
+                log += 'webToken : ' + this.state.token.toString() + '\n'
+              this.setState({
+                info : log
+              })
+              this.infoRef.current.show()
+            }} />
+        </View>
+        
+        <UrlInputDialog 
+          ref={this.urlRef}
+          onConfirm={(value) => this.setState({source: value})} />
+        <InjectInputDialog 
+          ref={this.injectRef}
+          onConfirm={(value) => {
+            this.webInterface = this.createWebInterface(value)
+            this.setState({
+              script: this.webInterface.script,
+              token: value
+            })
+            this.webviewRef.current.reload()
+          }} />
+        <MessageDialog
+          ref={this.infoRef}
+          title={'info'}
+          accessibilityLabel={'info'}
+          autoClose={false}
+          message={this.state.info} />
+      </View>
+    )
+  }
+}

package/qa/source/pages/DeviceInfo.js

@@ -0,0 +1,135 @@
+import React, { Component } from 'react'
+
+import { View, NativeModules } from 'react-native'
+import CustomButton from '../component/CustomButton'
+import { Styles } from '../common/Styles'
+import { Colors } from '../common/Colors'
+
+import HorizontalPreference from '../component/HorizontalPreference';
+
+import EntryInputDialog from '../component/EntryInputDialog'
+import ValueInputDialog from '../component/ValueInputDialog'
+
+import Airbridge from 'airbridge-react-native-sdk'
+
+export default class DeviceInfoPage extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = { };
+
+    this.addRef = React.createRef()
+    this.removeRef = React.createRef()
+
+    this.fetchDeviceInfo()
+  }
+
+  fetchDeviceInfo = async () => {
+    const response = await NativeModules.DeviceInfoInteractor.deviceInfo()
+    console.log('response : '  + response)
+    const jsonData = JSON.parse(response)
+    const data = jsonData['data']
+    const NA = 'N/A'
+    this.setState({ 
+      deviceModel: `${data['deviceModel'] ?? NA}`,
+      deviceManufacturer: `${data['deviceManufacturer'] ?? NA}`,
+      osVersion: `${data['osVersion'] ?? NA}`,
+      locale: `${data['locale'] ?? NA}`,
+      timezone: `${data['timezone'] ?? NA}`,
+      orientation: `${data['orientation'] ?? NA}`,
+      screenSize: `${data['screenSize'] ?? NA}`,
+      location: `${data['location'] ?? NA}`,
+      speed: `${data['speed'] ?? NA}`,
+      bluetoothStatus: `${data['wifiStatus'] ?? NA}`,
+      networkCarrier: `${data['networkCarrier'] ?? NA}`,
+      cellularStatus: `${data['cellularStatus'] ?? NA}`,
+      wifiStatus: `${data['wifiStatus'] ?? NA}`,
+    })
+  }
+
+  render() {
+    return (
+      <View style={Styles.container}>
+        <CustomButton
+          buttonColor={Colors.red}
+          title={'ADD ALIAS'}
+          accessibilityLabel={'addAlias'}
+          onPress={() => this.addRef.current.show()} />
+        <CustomButton
+          buttonColor={Colors.pink}
+          title={'REMOVE ALIAS'}
+          accessibilityLabel={'removeAlias'}
+          onPress={() => this.removeRef.current.show()} />
+        <CustomButton
+          buttonColor={Colors.purple}
+          title={'CLEAR ALIAS'}
+          accessibilityLabel={'clearAlias'}
+          onPress={() => Airbridge.clearDeviceAlias()} />
+
+        <View style={{margin : 8}} />
+
+        <HorizontalPreference
+          title={'Device Model'}
+          text={this.state.deviceModel}
+          accessibilityLabel={'deviceModel'} />
+        <HorizontalPreference
+          title={'Device Manufacturer'}
+          text={this.state.deviceManufacturer}
+          accessibilityLabel={'deviceManufacturer'} />
+        <HorizontalPreference
+          title={'OS Version'}
+          text={this.state.osVersion}
+          accessibilityLabel={'osVersion'} />
+        <HorizontalPreference
+          title={'Locale'}
+          text={this.state.locale}
+          accessibilityLabel={'locale'} />
+        <HorizontalPreference
+          title={'Timezone'}
+          text={this.state.timezone}
+          accessibilityLabel={'timezone'} />
+        <HorizontalPreference
+          title={'Orientation'}
+          text={this.state.orientation}
+          accessibilityLabel={'orientation'} />
+        <HorizontalPreference
+          title={'Screen Size'}
+          text={this.state.screenSize}
+          accessibilityLabel={'screenSize'} />
+        <HorizontalPreference
+          title={'Location'}
+          text={this.state.location}
+          accessibilityLabel={'location'} />
+        <HorizontalPreference
+          title={'Speed'}
+          text={this.state.speed}
+          accessibilityLabel={'speed'} />
+        <HorizontalPreference
+          title={'Network Carrier'}
+          text={this.state.networkCarrier}
+          accessibilityLabel={'networkCarrier'} />
+        <HorizontalPreference
+          title={'Bluetooth Status'}
+          text={this.state.bluetoothStatus}
+          accessibilityLabel={'bluetoothStatus'} />
+        <HorizontalPreference
+          title={'Cellular Status'}
+          text={this.state.cellularStatus}
+          accessibilityLabel={'cellularStatus'} />
+        <HorizontalPreference
+          title={'Wifi Status'}
+          text={this.state.wifiStatus}
+          accessibilityLabel={'wifiStatus'} />
+
+        <EntryInputDialog
+          ref={this.addRef}
+          onConfirm={(key, value) => Airbridge.setDeviceAlias(key, value)} />
+        <ValueInputDialog
+          ref={this.removeRef}
+          onConfirm={(value) => Airbridge.removeDeviceAlias(value)} />
+        
+      </View>
+    )
+  }
+}

package/qa/source/pages/Event.js

@@ -0,0 +1,171 @@
+import React, { Component } from 'react'
+import {
+    Text,
+    View,
+} from 'react-native'
+
+import CustomButton from '../component/CustomButton'
+import { Styles } from '../common/Styles'
+import { Colors } from '../common/Colors'
+
+import CustomEventParamsDialog from '../component/CustomEventParamsDialog'
+
+import Airbridge, {
+    AirbridgeCategory,
+    AirbridgeProduct,
+    AirbridgeAttributes
+} from 'airbridge-react-native-sdk';
+
+export default class EventPage extends Component {
+    
+    constructor(props) {
+        super(props);
+        this.state = {
+            eventModalVisible: false
+        };
+        this.customEventRef = React.createRef()
+    }
+
+    setEventModalVisible = (enable) => {
+        this.setState({ eventModalVisible: enable })
+    }
+
+    createTestProducts = () => {
+        return [{
+          [AirbridgeProduct.PRODUCT_ID]: 'coca_1',
+          [AirbridgeProduct.NAME]: 'Coca cola',
+          [AirbridgeProduct.PRICE]: 1.99,
+          [AirbridgeProduct.CURRENCY]: 'usd',
+          [AirbridgeProduct.QUANTITY]: 10,
+          [AirbridgeProduct.POSITION]: 1,
+        }, {
+          [AirbridgeProduct.PRODUCT_ID]: 'fanta_1',
+          [AirbridgeProduct.NAME]: 'Fanta Orange',
+          [AirbridgeProduct.PRICE]: 2.50,
+          [AirbridgeProduct.CURRENCY]: 'usd',
+          [AirbridgeProduct.QUANTITY]: 5,
+          [AirbridgeProduct.POSITION]: 2,
+        }, {
+          [AirbridgeProduct.PRODUCT_ID]: 'terra_pack_1',
+          [AirbridgeProduct.NAME]: 'Terra 12 Pack',
+          [AirbridgeProduct.PRICE]: 10.99,
+          [AirbridgeProduct.CURRENCY]: 'usd',
+          [AirbridgeProduct.QUANTITY]: 10,
+          [AirbridgeProduct.POSITION]: 3,
+        }];
+      }
+
+    render() {
+        return (
+            <View style={Styles.container}>
+                <Text style={{marginHorizontal:2, marginBottom: 2}}>Custom Event</Text>
+                <CustomButton
+                    buttonColor={Colors.red}
+                    title={'CUSTOM EVENT'}
+                    accessibilityLabel={'customEvent'}
+                    arrow={true}
+                    onPress={() => this.customEventRef.current.show()} />
+
+                <Text style={{marginHorizontal:2, marginBottom: 2}}>In app Events</Text>
+                <CustomButton
+                    buttonColor={Colors.red}
+                    title={'SIGN UP EVENT'}
+                    accessibilityLabel={'signUpEvent'}
+                    onPress={() => Airbridge.trackEvent(AirbridgeCategory.SIGN_UP)} />
+                <CustomButton
+                    buttonColor={Colors.pink}
+                    title={'SIGN IN EVENT'}
+                    accessibilityLabel={'signInEvent'}
+                    onPress={() => Airbridge.trackEvent(AirbridgeCategory.SIGN_IN)} />
+                <CustomButton
+                    buttonColor={Colors.purple}
+                    title={'SIGN OUT EVENT'}
+                    accessibilityLabel={'signOutEvent'}
+                    onPress={() => Airbridge.trackEvent(AirbridgeCategory.SIGN_OUT)} />
+
+                <Text style={{marginHorizontal:2, marginBottom: 2}}>E-COMMERCE Events</Text>
+                <CustomButton
+                    buttonColor={Colors.red}
+                    title={'HOME VIEW EVENT'}
+                    accessibilityLabel={'homeViewEvent'}
+                    onPress={() => Airbridge.trackEvent(AirbridgeCategory.HOME_VIEW)} />
+                <CustomButton
+                    buttonColor={Colors.pink}
+                    title={'SEARCH RESULT VIEW EVENT'}
+                    accessibilityLabel={'searchResultViewEvent'}
+                    onPress={() => {
+                        Airbridge.event.trackEvent(AirbridgeCategory.SEARCH_RESULT_VIEW, {
+                            semanticAttributes: {
+                                [AirbridgeAttributes.QUERY]: 'query_1',
+                                [AirbridgeAttributes.PRODUCTS]: this.createTestProducts()
+                            }})
+                    }} />
+                <CustomButton
+                    buttonColor={Colors.purple}
+                    title={'PRODUCT LIST VIEW EVENT'}
+                    accessibilityLabel={'productListViewEvent'}
+                    onPress={() => {
+                        Airbridge.event.trackEvent(AirbridgeCategory.PRODUCT_LIST_VIEW, {
+                            semanticAttributes: {
+                                [AirbridgeAttributes.PRODUCT_LIST_ID]: 'list_1',
+                                [AirbridgeAttributes.PRODUCTS]: this.createTestProducts()
+                            }})
+                    }} />
+                <CustomButton
+                    buttonColor={Colors.deepPurple}
+                    title={'PRODUCT DETAILS VIEW EVENT'}
+                    accessibilityLabel={'productDetailsViewEvent'}
+                    onPress={() => {
+                        Airbridge.event.trackEvent(AirbridgeCategory.PRODUCT_DETAILS_VIEW, {
+                            semanticAttributes: {
+                                [AirbridgeAttributes.QUERY]: 'query_1',
+                                [AirbridgeAttributes.PRODUCTS]: this.createTestProducts()
+                            }})
+                    }} />
+                <CustomButton
+                    buttonColor={Colors.indigo}
+                    title={'ADD TO CART EVENT'}
+                    accessibilityLabel={'addToCartEvent'}
+                    onPress={() => {
+                        Airbridge.event.trackEvent(AirbridgeCategory.ADD_TO_CART, {
+                            value: 43.39,
+                            semanticAttributes: {
+                                [AirbridgeAttributes.CART_ID]: 'cart_1',
+                                [AirbridgeAttributes.CURRENCY]: 'usd',
+                                [AirbridgeAttributes.TOTAL_QUANTITY]: 16,
+                                [AirbridgeAttributes.PRODUCTS]: this.createTestProducts()
+                            }})
+                    }} />
+                <CustomButton
+                    buttonColor={Colors.blue}
+                    title={'ORDER COMPLETE EVENT'}
+                    accessibilityLabel={'orderCompleteEvent'}
+                    onPress={() => {
+                        Airbridge.event.trackEvent(AirbridgeCategory.ORDER_COMPLETED, {
+                            value: 43.39,
+                            semanticAttributes: {
+                                [AirbridgeAttributes.CART_ID]: 'cart_1',
+                                [AirbridgeAttributes.CURRENCY]: 'usd',
+                                [AirbridgeAttributes.TOTAL_QUANTITY]: 16,
+                                [AirbridgeAttributes.PRODUCTS]: this.createTestProducts()
+                            }})
+                    }} />
+
+                <CustomEventParamsDialog   
+                    ref={this.customEventRef}
+                    initCategory={'custom_category'}
+                    initAction={'custom_action'}
+                    initLabel={'custom_label'}
+                    initValue={1234}
+                    onConfirm={(category, action, label, value, semanticAttr, customAttr) => {
+                        Airbridge.event.trackEvent(category, {
+                            action: action,
+                            label: label,
+                            value: value,
+                            semanticAttributes: semanticAttr,
+                            customAttributes: customAttr})
+                    }} />
+            </View>
+        );
+    }
+}