tapjoy-react-native-sdk 13.1.2 → 13.2.0

package/example/src/MainScreen.tsx

@@ -1,5 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { View, SafeAreaView, TextInput, Platform, Text } from 'react-native';
+import {
+  View,
+  SafeAreaView,
+  TextInput,
+  Platform,
+  Text,
+  ScrollView,
+} from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {
   getTrackingStatus,
@@ -7,7 +14,7 @@ import {
 } from 'react-native-tracking-transparency';
 import styles from './Styles';
 import Button from './Button';
-import Tapjoy, { TJPrivacyPolicy, TJVersion } from 'tapjoy-react-native-sdk';
+import Tapjoy, { TJVersion } from 'tapjoy-react-native-sdk';
 
 const MainScreen: React.FC = () => {
   const [sdkKey, setSdkKey] = useState<string>('');
@@ -37,13 +44,6 @@ const MainScreen: React.FC = () => {
 
   const handleConnect = async () => {
     try {
-      //Privacy related flags
-      let privacyPolicy = new TJPrivacyPolicy();
-      privacyPolicy.setBelowConsentAge(false);
-      privacyPolicy.setSubjectToGDPR(true);
-      privacyPolicy.setUSPrivacy('1---');
-      privacyPolicy.setUserConsent('1');
-
       setIsConnecting(true);
       await AsyncStorage.setItem('sdkKey', sdkKey);
 
@@ -63,8 +63,10 @@ const MainScreen: React.FC = () => {
         'Tapjoy SDK Connected' +
           (userId !== null ? `\nFlags: ${JSON.stringify(flags)}` : '')
       );
-    } catch (error) {
-      setStatusLabelText(`Tapjoy SDK failed to connect: ${error}`);
+    } catch (error: any) {
+      setStatusLabelText(
+        `Tapjoy SDK failed to connect. code: ${error.code}, message: ${error.message}`
+      );
       setIsConnecting(false);
     }
   };
@@ -108,44 +110,48 @@ const MainScreen: React.FC = () => {
   };
 
   return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.lineGap}>
-        <Text style={styles.statusText}>{statusLabelText}</Text>
-      </View>
-      <View style={styles.inputContainer}>
-        <TextInput
-          style={styles.textInput}
-          value={sdkKey}
-          onChangeText={setSdkKey}
-          placeholder="Enter SDK Key"
-        />
-        <Button
-          title="Connect"
-          style={styles.zeroFlex}
-          onPress={handleConnect}
-          disabled={isConnecting || Tapjoy.isConnected()}
-        />
-      </View>
-      <View style={styles.currencyOuterContainer}>
-        <Text style={styles.labelText}>{'Managed Currency:'}</Text>
-        <View style={styles.currencyInnerContainer}>
-          <Button
-            style={styles.buttonGap}
-            title="Get"
-            onPress={getCurrencyBalance}
-          />
-          <Button
-            style={styles.buttonGap}
-            title="Spend"
-            onPress={spendCurrency}
-          />
-          <Button title="Award" onPress={awardCurrency} />
-        </View>
-      </View>
+    <View style={styles.mainContainer}>
+      <ScrollView>
+        <SafeAreaView style={styles.container}>
+          <View style={styles.lineGap}>
+            <Text style={styles.statusText}>{statusLabelText}</Text>
+          </View>
+          <View style={styles.inputContainer}>
+            <TextInput
+              style={styles.textInput}
+              value={sdkKey}
+              onChangeText={setSdkKey}
+              placeholder="Enter SDK Key"
+            />
+            <Button
+              title="Connect"
+              style={styles.zeroFlex}
+              onPress={handleConnect}
+              disabled={isConnecting || Tapjoy.isConnected()}
+            />
+          </View>
+          <View style={styles.currencyOuterContainer}>
+            <Text style={styles.labelText}>{'Managed Currency:'}</Text>
+            <View style={styles.currencyInnerContainer}>
+              <Button
+                style={styles.buttonGap}
+                title="Get"
+                onPress={getCurrencyBalance}
+              />
+              <Button
+                style={styles.buttonGap}
+                title="Spend"
+                onPress={spendCurrency}
+              />
+              <Button title="Award" onPress={awardCurrency} />
+            </View>
+          </View>
+        </SafeAreaView>
+      </ScrollView>
       <Text style={styles.versionText}>
         Version: {TJVersion.getPluginVersion()}
       </Text>
-    </SafeAreaView>
+    </View>
   );
 };
 

package/example/src/OfferwallScreen.tsx

@@ -1,25 +1,35 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useFocusEffect } from '@react-navigation/native';
 import {
+  FlatList,
   SafeAreaView,
-  View,
-  TextInput,
+  ScrollView,
   Text,
-  TouchableWithoutFeedback,
-  Keyboard,
-  FlatList,
+  TextInput,
+  View,
 } from 'react-native';
+import dayjs from 'dayjs';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import Button from './Button';
-import styles from './Styles';
+import styles, { pickerSelectStyles } from './Styles';
 import Tapjoy, { TJPlacement } from 'tapjoy-react-native-sdk';
+import RNPickerSelect from 'react-native-picker-select';
+import TJEntryPoint from '../../src/TJEntryPoint';
+
+let offerwallPlacement: TJPlacement;
 
 const OfferwallScreen: React.FC = () => {
   const [offerwallPlacementName, _setOfferwallPlacementName] =
     useState<string>('offerwall_unit');
   const [isSdkConnected, setIsSdkConnected] = useState<boolean>(false);
-  const [, setPlacementState] = useState<string>('');
+  const [placementState, setPlacementState] = useState<string>('');
   const [logData, setLogData] = useState<Array<string>>([]);
+  const [entryPoint, setEntryPoint] = useState<TJEntryPoint>(
+    TJEntryPoint.TJEntryPointUnknown
+  );
+  const [currencyId, _setCurrencyId] = useState<string>('');
+  const [currencyBalance, _setCurrencyBalance] = useState<string>('');
+  const [requiredAmount, _setRequiredAmount] = useState<string>('');
 
   useFocusEffect(
     React.useCallback(() => {
@@ -31,6 +41,18 @@ const OfferwallScreen: React.FC = () => {
     retrieveStoredPlacementName();
   });
 
+  useEffect(() => {
+    retrieveCurrencyId().then();
+  });
+
+  useEffect(() => {
+    retrieveCurrencyBalance().then();
+  });
+
+  useEffect(() => {
+    retrieveRequiredAmount().then();
+  });
+
   const retrieveStoredPlacementName = () => {
     AsyncStorage.getItem('placementName').then(async (value) => {
       if (value !== null) {
@@ -39,12 +61,117 @@ const OfferwallScreen: React.FC = () => {
     });
   };
 
+  const retrieveCurrencyId = async () => {
+    try {
+      const value = await AsyncStorage.getItem('currencyId');
+      if (value !== null) {
+        await setCurrencyId(value);
+      }
+    } catch (error) {
+      addLogItem(`Failed to retrieve currency ID: ${error}`);
+    }
+  };
+
+  const retrieveCurrencyBalance = async () => {
+    try {
+      const value = await AsyncStorage.getItem('currencyBalance');
+      if (value !== null) {
+        await setCurrencyBalance(value);
+      }
+    } catch (error) {
+      addLogItem(`Failed to retrieve currency balance: ${error}`);
+    }
+  };
+
+  const retrieveRequiredAmount = async () => {
+    try {
+      const value = await AsyncStorage.getItem('requiredAmount');
+      if (value !== null) {
+        await setRequiredAmount(value);
+      }
+    } catch (error) {
+      addLogItem(`Failed to retrieve currency requiredAmount: ${error}`);
+    }
+  };
+
+  const setCurrencyId = async (id: string) => {
+    _setCurrencyId(id);
+    let trimmedCurrencyId = id.trim();
+    await AsyncStorage.setItem('currencyId', trimmedCurrencyId);
+  };
+
+  const setCurrencyBalance = async (balance: string) => {
+    _setCurrencyBalance(balance);
+    let trimmedCurrencyBalance = balance.trim();
+    await AsyncStorage.setItem('currencyBalance', trimmedCurrencyBalance);
+  };
+
+  const setRequiredAmount = async (newValue: string) => {
+    _setRequiredAmount(newValue);
+    let trimmedValue = newValue.trim();
+    await AsyncStorage.setItem('requiredAmount', trimmedValue);
+  };
+
+  const handleClearCurrencyId = async () => {
+    await setCurrencyId('');
+  };
+
+  const handleClearCurrencyBalance = async () => {
+    await setCurrencyBalance('');
+  };
+
+  const handleClearRequiredAmount = async () => {
+    await setRequiredAmount('');
+  };
+
   const handleClearInput = async () => {
     await setOfferwallPlacementName('');
   };
 
-  const loadPlacement = () => {
-    let offerwallPlacement = new TJPlacement(offerwallPlacementName);
+  const loadPlacement = async () => {
+    offerwallPlacement = new TJPlacement(offerwallPlacementName);
+
+    if (currencyId !== '') {
+      if (currencyBalance !== '') {
+        try {
+          await offerwallPlacement?.setCurrencyBalance(
+            currencyId,
+            Number(currencyBalance)
+          );
+          addLogItem(
+            'setCurrencyBalance: ' +
+              (await offerwallPlacement?.getCurrencyBalance(currencyId))
+          );
+        } catch (e: any) {
+          addLogItem(`currencyBalanceError: ${e.code} - ${e.message}`);
+        }
+      }
+
+      if (requiredAmount !== '') {
+        try {
+          await offerwallPlacement?.setRequiredAmount(
+            Number(requiredAmount),
+            currencyId
+          );
+          addLogItem(
+            'setCurrencyRequiredAmount: ' +
+              JSON.stringify(
+                await offerwallPlacement?.getRequiredAmount(currencyId)
+              )
+          );
+        } catch (e: any) {
+          addLogItem(`requiredAmountError: ${e.code} - ${e.message}`);
+        }
+      }
+    }
+
+    if (entryPoint !== TJEntryPoint.TJEntryPointUnknown) {
+      offerwallPlacement.setEntryPoint(entryPoint);
+      addLogItem(
+        'setEntryPoint: ' + (await offerwallPlacement?.getEntryPoint())
+      );
+    }
+
     offerwallPlacement.on(
       TJPlacement.REQUEST_DID_SUCCEED,
       (placement: TJPlacement) => {
@@ -78,8 +205,8 @@ const OfferwallScreen: React.FC = () => {
   };
 
   const showPlacement = () => {
-    let offerwallPlacement = new TJPlacement(offerwallPlacementName);
-    if (offerwallPlacement === undefined) {
+    addLogItem(offerwallPlacement.name);
+    if (placementState !== 'ready') {
       addLogItem(`"${offerwallPlacementName}" placement not loaded.`);
       setPlacementState('failed');
       return;
@@ -110,62 +237,135 @@ const OfferwallScreen: React.FC = () => {
     await AsyncStorage.setItem('placementName', placementName);
   };
 
-  const handleDismissKeyboard = () => {
-    Keyboard.dismiss();
-  };
-
   const addLogItem = (item: string) => {
-    const timestamp = new Date().toLocaleTimeString();
-    logData.push(timestamp + ' ' + item);
+    logData.push(dayjs(new Date()).format('HH:mm:ss') + ' ' + item);
     setLogData(logData);
   };
 
+  const entryPointArray = [
+    { label: 'Other', value: TJEntryPoint.TJEntryPointOther },
+    { label: 'Main Menu', value: TJEntryPoint.TJEntryPointMainMenu },
+    { label: 'HUD', value: TJEntryPoint.TJEntryPointHud },
+    { label: 'Exit', value: TJEntryPoint.TJEntryPointExit },
+    { label: 'Fail', value: TJEntryPoint.TJEntryPointFail },
+    { label: 'Complete', value: TJEntryPoint.TJEntryPointComplete },
+    { label: 'Inbox', value: TJEntryPoint.TJEntryPointInbox },
+    { label: 'Initialisation', value: TJEntryPoint.TJEntryPointInit },
+    { label: 'Store', value: TJEntryPoint.TJEntryPointStore },
+  ];
+
   return (
-    <TouchableWithoutFeedback onPress={handleDismissKeyboard}>
-      <SafeAreaView style={styles.container}>
-        <View style={styles.inputContainer}>
-          <TextInput
-            style={styles.textInput}
-            value={offerwallPlacementName}
-            onChangeText={setOfferwallPlacementName}
-            autoCorrect={false}
-            placeholder="Enter Placement Name"
-            placeholderTextColor="#888"
-            autoCapitalize="none"
-          />
-          <Button
-            style={styles.clearButton}
-            onPress={handleClearInput}
-            title={'\u2573'}
-          />
-        </View>
-        <View style={styles.buttonContainer}>
-          <Button
-            onPress={loadPlacement}
-            disabled={!isSdkConnected}
-            title={'Request'}
-          />
-          <View style={styles.buttonGap} />
-          <Button
-            onPress={showPlacement}
-            disabled={!new TJPlacement(offerwallPlacementName).isContentReady()}
-            title={'Display'}
-          />
-        </View>
-        <View style={styles.owLogContainer}>
-          <FlatList
-            contentContainerStyle={styles.flexGrow}
-            data={logData}
-            renderItem={({ item }) => (
-              <View>
-                <Text style={styles.logText}>{item}</Text>
-              </View>
-            )}
-            keyExtractor={(_item, index) => index.toString()}
-          />
-        </View>
-      </SafeAreaView>
-    </TouchableWithoutFeedback>
+    <View style={styles.mainContainer}>
+      <ScrollView style={styles.offerwallScrollContainer}>
+        <SafeAreaView style={styles.container}>
+          <View style={styles.inputContainer}>
+            <TextInput
+              style={styles.textInput}
+              value={offerwallPlacementName}
+              onChangeText={setOfferwallPlacementName}
+              autoCorrect={false}
+              placeholder="Enter Placement Name"
+              placeholderTextColor="#888"
+              autoCapitalize="none"
+            />
+            <Button
+              style={styles.clearButton}
+              onPress={handleClearInput}
+              title={'\u2573'}
+            />
+          </View>
+          <View style={styles.buttonContainer}>
+            <Button
+              onPress={loadPlacement}
+              disabled={!isSdkConnected}
+              title={'Request'}
+            />
+            <View style={styles.buttonGap} />
+            <Button
+              onPress={showPlacement}
+              disabled={!(placementState === 'ready')}
+              title={'Display'}
+            />
+          </View>
+          <View style={styles.inputContainer}>
+            <Text style={styles.userPropertiesLabel}>Entry Point: </Text>
+            <RNPickerSelect
+              placeholder={{
+                label: 'Select Entry Point...',
+                value: TJEntryPoint.TJEntryPointUnknown,
+              }}
+              onValueChange={async (value: any) => {
+                offerwallPlacement?.setEntryPoint(value);
+                setEntryPoint(value);
+              }}
+              items={entryPointArray}
+              style={pickerSelectStyles}
+              useNativeAndroidPickerStyle={false}
+              touchableWrapperProps={{ style: { flex: 1 } }}
+            />
+          </View>
+          <View style={styles.inputContainer}>
+            <Text style={styles.userPropertiesLabel}>Currency ID:</Text>
+            <TextInput
+              style={styles.textInput}
+              value={currencyId}
+              keyboardType={'default'}
+              onChangeText={setCurrencyId}
+              placeholder="Enter Currency ID."
+              placeholderTextColor="#888"
+            />
+            <Button
+              style={styles.clearButton}
+              onPress={handleClearCurrencyId}
+              title={'\u2573'}
+            />
+          </View>
+          <View style={styles.inputContainer}>
+            <Text style={styles.userPropertiesLabel}>Currency Balance:</Text>
+            <TextInput
+              style={styles.textInput}
+              value={currencyBalance}
+              keyboardType={'numeric'}
+              onChangeText={setCurrencyBalance}
+              placeholder="Enter Currency Balance."
+              placeholderTextColor="#888"
+            />
+            <Button
+              style={styles.clearButton}
+              onPress={handleClearCurrencyBalance}
+              title={'\u2573'}
+            />
+          </View>
+          <View style={styles.inputContainer}>
+            <Text style={styles.userPropertiesLabel}>Required Amount:</Text>
+            <TextInput
+              style={styles.textInput}
+              value={requiredAmount}
+              keyboardType={'numeric'}
+              onChangeText={setRequiredAmount}
+              placeholder="Enter Required Amount."
+              placeholderTextColor="#888"
+            />
+            <Button
+              style={styles.clearButton}
+              onPress={handleClearRequiredAmount}
+              title={'\u2573'}
+            />
+          </View>
+        </SafeAreaView>
+      </ScrollView>
+      <View style={styles.owLogContainer}>
+        <FlatList
+          data={logData}
+          renderItem={({ item }) => (
+            <View>
+              <Text style={styles.logText}>{item}</Text>
+            </View>
+          )}
+          keyExtractor={(_item, index) => index.toString()}
+        />
+      </View>
+    </View>
   );
 };
 

package/example/src/SelectionMenu.tsx

@@ -0,0 +1,70 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, TouchableOpacity, FlatList } from 'react-native';
+import styles from './Styles';
+
+interface Item {
+  value: any;
+  label: string;
+}
+
+interface Props {
+  data: Item[];
+  initialSelectedItem: Item | null;
+  onSelectItem: (item: Item) => void;
+}
+
+const SelectionMenu: React.FC<Props> = ({
+  data,
+  initialSelectedItem,
+  onSelectItem,
+}) => {
+  const [selectedItem, setSelectedItem] = useState<Item | null>(
+    initialSelectedItem
+  );
+
+  const handleItemPress = (item: Item) => {
+    onSelectItem(item);
+    setSelectedItem(item);
+  };
+
+  useEffect(() => {
+    setSelectedItem(initialSelectedItem);
+  }, [initialSelectedItem]);
+
+  const renderItem = ({ item }: { item: Item }) => {
+    return (
+      <TouchableOpacity
+        style={[
+          { width: `${100 / data.length}%` },
+          styles.item,
+          selectedItem?.value === item.value && styles.selectedItem,
+        ]}
+        onPress={() => handleItemPress(item)}
+      >
+        <Text
+          style={[
+            styles.itemText,
+            selectedItem?.value === item.value && styles.selectionMenuItemText,
+          ]}
+        >
+          {item.label}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View style={styles.selectionMenuContainer}>
+      <FlatList
+        data={data}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.value.toString()}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.flatListContent}
+      />
+    </View>
+  );
+};
+
+export default SelectionMenu;