airbridge-react-native-sdk
Version:
Airbridge SDK for React Native
182 lines (168 loc) • 7.96 kB
JavaScript
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,
AirbridgeAttribute
} 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 [{
[AirbridgeAttribute.PRODUCT_ID]: 'coca_1',
[AirbridgeAttribute.PRODUCT_NAME]: 'Coca cola',
[AirbridgeAttribute.PRODUCT_PRICE]: 1.99,
[AirbridgeAttribute.CURRENCY]: 'usd',
[AirbridgeAttribute.PRODUCT_QUANTITY]: 10,
[AirbridgeAttribute.PRODUCT_POSITION]: 1,
}, {
[AirbridgeAttribute.PRODUCT_ID]: 'fanta_1',
[AirbridgeAttribute.PRODUCT_NAME]: 'Fanta Orange',
[AirbridgeAttribute.PRODUCT_PRICE]: 2.50,
[AirbridgeAttribute.CURRENCY]: 'usd',
[AirbridgeAttribute.PRODUCT_QUANTITY]: 5,
[AirbridgeAttribute.PRODUCT_POSITION]: 2,
}, {
[AirbridgeAttribute.PRODUCT_ID]: 'terra_pack_1',
[AirbridgeAttribute.PRODUCT_NAME]: 'Terra 12 Pack',
[AirbridgeAttribute.PRODUCT_PRICE]: 10.99,
[AirbridgeAttribute.PRODUCT_CURRENCY]: 'usd',
[AirbridgeAttribute.PRODUCT_QUANTITY]: 10,
[AirbridgeAttribute.PRODUCT_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_VIEWED)} />
<CustomButton
buttonColor={Colors.pink}
title={'SEARCH RESULT VIEW EVENT'}
accessibilityLabel={'searchResultViewEvent'}
onPress={() => {
Airbridge.trackEvent(
AirbridgeCategory.SEARCH_RESULTS_VIEWED, {
[AirbridgeAttribute.QUERY]: 'query_1',
[AirbridgeAttribute.PRODUCTS]: this.createTestProducts()
})
}} />
<CustomButton
buttonColor={Colors.purple}
title={'PRODUCT LIST VIEW EVENT'}
accessibilityLabel={'productListViewEvent'}
onPress={() => {
Airbridge.trackEvent(AirbridgeCategory.PRODUCT_LIST_VIEWED, {
[AirbridgeAttribute.PRODUCT_LIST_ID]: 'list_1',
[AirbridgeAttribute.PRODUCTS]: this.createTestProducts()
})
}} />
<CustomButton
buttonColor={Colors.deepPurple}
title={'PRODUCT DETAILS VIEW EVENT'}
accessibilityLabel={'productDetailsViewEvent'}
onPress={() => {
Airbridge.trackEvent(AirbridgeCategory.PRODUCT_VIEWED, {
[AirbridgeAttribute.QUERY]: 'query_1',
[AirbridgeAttribute.PRODUCTS]: this.createTestProducts()
})
}} />
<CustomButton
buttonColor={Colors.indigo}
title={'ADD TO CART EVENT'}
accessibilityLabel={'addToCartEvent'}
onPress={() => {
Airbridge.trackEvent(AirbridgeCategory.ADDED_TO_CART, {
[AirbridgeAttribute.VALUE]: 43.39,
[AirbridgeAttribute.CART_ID]: 'cart_1',
[AirbridgeAttribute.CURRENCY]: 'usd',
[AirbridgeAttribute.TOTAL_QUANTITY]: 16,
[AirbridgeAttribute.PRODUCTS]: this.createTestProducts()
})
}} />
<CustomButton
buttonColor={Colors.blue}
title={'ORDER COMPLETE EVENT'}
accessibilityLabel={'orderCompleteEvent'}
onPress={() => {
Airbridge.trackEvent(AirbridgeCategory.ORDER_COMPLETED, {
[AirbridgeAttribute.VALUE]: 43.39,
[AirbridgeAttribute.CART_ID]: 'cart_1',
[AirbridgeAttribute.CURRENCY]: 'usd',
[AirbridgeAttribute.TOTAL_QUANTITY]: 16,
[AirbridgeAttribute.PRODUCTS]: this.createTestProducts()
})
}} />
<Text style={{marginHorizontal:2, marginBottom: 2}}>ETC.</Text>
<CustomButton
buttonColor={Colors.red}
title={'REGISTER PUSH TOKEN'}
accessibilityLabel={'Register push token event'}
onPress={() => {
Airbridge.registerPushToken("ABCDEF");
}} />
<CustomEventParamsDialog
ref={this.customEventRef}
initCategory={'custom_category'}
initAction={'custom_action'}
initLabel={'custom_label'}
initValue={1234}
onConfirm={(category, action, label, value, semanticAttr, customAttr) => {
if (semanticAttr == null) {
semanticAttr = {}
}
semanticAttr[AirbridgeAttribute.ACTION] = action
semanticAttr[AirbridgeAttribute.LABEL] = label
semanticAttr[AirbridgeAttribute.VALUE] = value
Airbridge.trackEvent(
category,
semanticAttr,
customAttr)
}} />
</View>
);
}
}