@tyrads.com/tyrads-sdk 1.1.15 → 2.0.0-beta.1

package/src/acmo/modules/dashboard/components/premium_option_4.tsx

@@ -0,0 +1,184 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+} from 'react-native';
+import AutoScrollPagerWithIndicators from './auto_scroller';
+import numeral from 'numeral';
+import Tyrads from '../../../../index';
+import { useTranslation } from 'react-i18next';
+
+const { width } = Dimensions.get('window');
+
+interface PremiumOption4Props {
+  data: TransformedCampaign[];
+  premiumColor?: string;
+}
+
+const PremiumOption4: React.FC<PremiumOption4Props> = ({ data, premiumColor }) => {
+  return (
+    <AutoScrollPagerWithIndicators
+      totalPages={data.length}
+      premiumColor={premiumColor}
+      content={(page) => (
+        <View key={page}>
+          {
+            data[page] && (
+              <OfferBanner details={data[page]} index={page} premiumColor={premiumColor} />
+            )
+          }
+        </View>
+      )}
+    />
+  );
+};
+
+interface OfferBannerProps {
+  details: TransformedCampaign;
+  index: number;
+  premiumColor?: string;
+}
+
+const OfferBanner: React.FC<OfferBannerProps> = ({ details, index, premiumColor }) => {
+  const { t } = useTranslation();
+  return (
+    <View style={styles.outerContainer}>
+      <View style={styles.bannerContainer}>
+        <Image style={styles.bannerImage} source={{ uri: details.fileUrl }} resizeMode="cover" />
+
+        <View style={styles.starContainer}>
+          <Image
+            source={require('../../../../assets/images/premium_star.png')}
+            style={[styles.starIcon, { tintColor: premiumColor || '#1C90DF' }]}
+          />
+          <Text style={styles.index} numberOfLines={1} ellipsizeMode="tail">
+            {index + 1}
+          </Text>
+        </View>
+      </View>
+      <View style={styles.titleContainer}>
+        <View style={{ flexDirection: 'row', flex: 8, width: '70%' }}>
+          <Image style={styles.gameIcon} source={{ uri: details.thumbnail }} resizeMode="cover" />
+          <View style={{ marginLeft: 10 }}>
+            <Text style={styles.titleText}>{details.title}</Text>
+            <View style={styles.rewardDetails}>
+              <Image
+                source={{ uri: details.currency.adUnitCurrencyIcon }}
+                resizeMode="contain"
+                style={styles.coinIcon}
+              />
+              <Text style={styles.points}>{numeral(details.points).format("0.00a").toUpperCase()}</Text>
+              <Text style={styles.points}>{''}{details.currency.adUnitCurrencyName}</Text>
+              <Text style={styles.rewards}>
+                {' '}
+                {details.rewards} {t('dashboard.rewards', { count: details.rewards })}
+              </Text>
+            </View>
+          </View>
+        </View>
+        <TouchableOpacity
+          onPress={() => Tyrads.showOffers({ route: "campaign-details", campaignID: details.campaignId })}
+          style={[styles.playButton, { backgroundColor: premiumColor || '#1C90DF' }]}
+        >
+          <Text style={styles.playButtonText}>{t('dashboard.play_button')}</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  outerContainer: {},
+  bannerContainer: {
+    width: width,
+    height: 190,
+  },
+  bannerImage: {
+    flex: 1,
+    borderRadius: 8,
+  },
+  starContainer: {
+    position: 'absolute',
+    top: 10,
+    left: 10,
+    backgroundColor: 'rgba(0,0,0,0)',
+  },
+  starIcon: {
+    width: 30,
+    height: 30,
+  },
+  index: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+    color: 'white',
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  titleContainer: {
+    flex: 1,
+    width: '91.5%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 8,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  titleText: {
+    color: 'white',
+    fontSize: 14,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  gameIcon: {
+    width: 35,
+    height: 35,
+    borderRadius: 8,
+  },
+  coinIcon: {
+    width: 16,
+    height: 16,
+  },
+  points: {
+    fontSize: 12,
+    marginLeft: 4,
+    fontWeight: 'bold',
+    color: 'white',
+  },
+  rewardDetails: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  rewards: {
+    fontSize: 10,
+    fontStyle: 'italic',
+    color: 'lightgray',
+  },
+  playButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 2,
+    height: 31,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  playButtonText: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: 'white',
+  },
+});
+
+export default PremiumOption4;

package/src/acmo/modules/dashboard/repository.ts

@@ -0,0 +1,95 @@
+import axios, { type AxiosResponse } from 'axios';
+import { getData } from '../../core/storage/storage';
+
+interface ApiHeaders {
+  languageCode: string;
+  premiumColor: string;
+  xUserId: string;
+  xApiKey: string;
+  xApiSecret: string;
+  xSdkPlatform: string;
+  xSdkVersion: string;
+  userAgent: string;
+}
+
+const transformCampaigns = (campaigns: Campaign[]): TransformedCampaign[] => {
+  return campaigns.map((campaign) => ({
+    campaignId: campaign.campaignId || 0,
+    appId: campaign.app?.id || 0,
+    title: campaign.app?.title || 'Unknown Title',
+    creativePackName:
+      campaign.creative?.creativePacks?.[0]?.creativePackName || '',
+    fileUrl:
+      campaign.creative?.creativePacks?.[0]?.creatives?.[0]?.fileUrl || '',
+    points: campaign.campaignPayout?.totalPayoutConverted || 0,
+    rewards: campaign.campaignPayout?.totalEvents || 0,
+    currency: campaign.currency || {},
+    thumbnail: campaign.app?.thumbnail || '',
+    premium: campaign.premium || false,
+    sortingScore: campaign.sortingScore || 0,
+  }));
+};
+
+export const fetchCampaignsData = async (
+  // setLanguage: (language: string) => void,
+  setPremiumColor: (color: string) => void,
+  setCampaigns: (campaigns: TransformedCampaign[]) => void,
+  setError: (error: string) => void,
+  setIsLoading: (loading: boolean) => void
+): Promise<void> => {
+  setIsLoading(true);
+
+  try {
+    const data: any = await getData('apiHeaders');
+    if (!data) {
+      throw new Error('apiHeaders data not found.');
+    }
+    const parsedHeaderData: ApiHeaders = JSON.parse(data);
+    // setLanguage(parsedHeaderData.languageCode);
+    setPremiumColor(parsedHeaderData.premiumColor);
+
+    const headers = {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+      'X-User-ID': parsedHeaderData.xUserId,
+      'X-API-Key': parsedHeaderData.xApiKey,
+      'X-API-Secret': parsedHeaderData.xApiSecret,
+      'X-SDK-Platform': parsedHeaderData.xSdkPlatform,
+      'X-SDK-Version': parsedHeaderData.xSdkVersion,
+      'User-Agent': parsedHeaderData.userAgent,
+    };
+
+    const response: AxiosResponse<{ data: Campaign[] }> = await axios.get(
+      `https://api.tyrads.com/v2.0/campaigns?lang=${parsedHeaderData.languageCode}`,
+      {
+        headers: headers,
+      }
+    );
+
+    const transformedCampaigns = transformCampaigns(response.data.data);
+
+    const hotOffers = transformedCampaigns
+    .sort((a, b) => {
+      if (a.premium && !b.premium) return -1;
+      if (!a.premium && b.premium) return 1;
+      return b.sortingScore - a.sortingScore;
+    })
+    .filter((item) => item.points > 0)
+    .slice(0, 5);
+
+    setCampaigns(hotOffers);
+  } catch (error: any) {
+    if (axios.isAxiosError(error) && error.response) {
+      console.log('Response Error:', error.response.data);
+      console.log('Status Code:', error.response.status);
+      console.log('Response Headers:', error.response.headers);
+    } else if (axios.isAxiosError(error) && error.request) {
+      console.log('No Response from API:', error.request);
+    } else {
+      console.log('Error setting up request:', error.message);
+    }
+    setError('Something went wrong, please try again');
+  } finally {
+    setIsLoading(false);
+  }
+};

package/src/acmo/modules/dashboard/top_offers.tsx

@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  ActivityIndicator,
+  StyleSheet,
+} from 'react-native';
+import { fetchCampaignsData } from './repository';
+import PremiumHeaderSection from './components/premium_header';
+import CustomCard from './components/custom_card';
+import MyGamesButton from './components/my_games_button';
+import PremiumOption1 from './components/premium_option_1';
+import PremiumOption2 from './components/premium_option_2';
+import PremiumOption3 from './components/premium_option_3';
+import PremiumOption4 from './components/premium_option_4';
+
+interface TopOffersProps {
+  showMore?: boolean;
+  showMyOffers?: boolean;
+  showMyOffersEmptyView?: boolean;
+  style?: number;
+}
+
+const TopOffers: React.FC<TopOffersProps> = ({
+  showMore,
+  showMyOffers = false,
+  showMyOffersEmptyView = false,
+  style = 1,
+}) => {
+  const [campaigns, setCampaigns] = useState<TransformedCampaign[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+  const [premiumColor, setPremiumColor] = useState<string>('#1C90DF');
+  // const [language, setLanguage] = useState<string>('en');
+
+  useEffect(() => {
+    fetchCampaignsData(
+      // setLanguage,
+      setPremiumColor,
+      setCampaigns,
+      setError,
+      setIsLoading
+    );
+  }, []);
+
+  if (isLoading) {
+    return (
+      <View style={styles.loadingContainer}>
+        <ActivityIndicator size="large" color="#007AFF" />
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>Error: {error}</Text>
+      </View>
+    );
+  }
+
+  if (campaigns.length === 0) {
+    if (showMyOffersEmptyView) {
+      return (
+        <View style={styles.noCampaignContainer}>
+          <Text>No campaigns available</Text>
+        </View>
+      );
+    } else {
+      return <View />;
+    }
+  }
+
+  return (
+    <CustomCard style={{}}>
+      <View style={{ flex: 1 }}>
+        <PremiumHeaderSection showMore={showMore} premiumColor={premiumColor} />
+        <View style={styles.headerSpacer} />
+        {(() => {
+          switch (style) {
+            case 1:
+              return (
+                <PremiumOption1 data={campaigns} premiumColor={premiumColor} />
+              );
+            case 2:
+              return (
+                <PremiumOption2 data={campaigns} premiumColor={premiumColor} />
+              );
+            case 3:
+              return (
+                <PremiumOption3 data={campaigns} premiumColor={premiumColor} />
+              );
+            case 4:
+              return (
+                <PremiumOption4 data={campaigns} premiumColor={premiumColor} />
+              );
+            default:
+              return <Text>Please specify a correct style</Text>;
+          }
+        })()}
+        <View style={styles.gameListSpacer} />
+        {showMyOffers && <MyGamesButton premiumColor={premiumColor} />}
+      </View>
+    </CustomCard>
+  );
+};
+
+const styles = StyleSheet.create({
+  loadingContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorContainer: {
+    padding: 16,
+  },
+  errorText: {
+    color: 'red',
+  },
+  noCampaignContainer: {
+    padding: 16,
+  },
+  headerSpacer: {
+    height: 10,
+  },
+  gameListSpacer: {
+    height: 10,
+  },
+});
+
+export default TopOffers;

package/src/i18n.ts

@@ -0,0 +1,115 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+
+const resources = {
+  en: {
+    translation: {
+      "dashboard": {
+        "suggested_offers": "Suggested Offers",
+        "more_offers": "More Offers",
+        "my_games": "My Games",
+        "play_button": "Play Now",
+        "top_ranking": "Top {{number}}",
+        "rewards_one": "Reward",
+        "rewards_other": "Rewards"
+      },
+      
+      
+    }
+  },
+  es: {
+    translation: {
+      "dashboard": {
+        "suggested_offers": "Ofertas sugeridas",
+        "more_offers": "Más ofertas",
+        "my_games": "Mis juegos",
+        "play_button": "Jugar Ahora",
+        "top_ranking": "Los mejores {{number}}",
+        "rewards_one": "Recompensa",
+        "rewards_other": "Recompensas"
+      },
+      
+    }
+  },
+  id: {
+    translation: {
+      "dashboard": {
+        "suggested_offers": "Penawaran yang Disarankan",
+        "more_offers": "Penawaran Lainnya",
+        "my_games": "Permainan Saya",
+        "play_button": "Mainkan Sekarang",
+        "top_ranking": "Top {{number}}",
+        "rewards_one": "Hadiah",
+        "rewards_other": "Hadiah"
+      },
+    }
+  },
+  in: {
+    translation: {
+      "dashboard": {
+        "suggested_offers": "Penawaran yang Disarankan",
+        "more_offers": "Penawaran Lainnya",
+        "my_games": "Permainan Saya",
+        "play_button": "Mainkan Sekarang",
+        "top_ranking": "Top {{number}}",
+        "rewards_one": "Hadiah",
+        "rewards_other": "Hadiah"
+      },
+    }
+  },
+  ja: {
+    translation: {
+      "dashboard": {
+        "suggested_offers": "おすすめのオファー",
+        "more_offers": "その他のオファー",
+        "my_games": "マイゲーム",
+        "play_button": "プレイ する",
+        "top_ranking": "トップ {{number}}",
+        "rewards_one": "報酬",
+        "rewards_other": "報酬"
+      },
+    }
+  },
+  ko: {
+    translation: {
+      "dashboard": {
+        "suggested_offers": "추천 제안",
+        "more_offers": "더 많은 제안",
+        "my_games": "내 게임",
+        "play_button": "플레이 하고",
+        "top_ranking": "상위 {{number}}",
+        "rewards_one": "보상",
+        "rewards_other": "보상들"
+      },
+    }
+  }
+};
+
+const initializeI18n = async () => {
+  try {
+    const language:any = await AsyncStorage.getItem('language');
+    const storedLanguage: string = JSON.parse(language);
+    console.log('storedLanguage', storedLanguage);
+    
+    const initialLanguage = storedLanguage;
+    await i18n
+      .use(initReactI18next)
+      .init({
+        resources,
+        fallbackLng: 'en',
+        lng: initialLanguage,
+        debug: __DEV__,
+        interpolation: {
+          escapeValue: false,
+        },
+      });
+  } catch (error) {
+    console.error('Error initializing i18n:', error);
+  }
+};
+
+initializeI18n();
+
+export default i18n;

package/src/index.tsx

@@ -1,4 +1,12 @@
-import { NativeModules, Platform } from 'react-native';
+import { NativeModules, Platform, View,} from 'react-native';
+
+import TopOffers from './acmo/modules/dashboard/top_offers';
+import { saveData } from './acmo/core/storage/storage';
+import { I18nextProvider } from 'react-i18next';
+import i18n from './i18n';
+
+// const TyradsSdkComposeView = requireNativeComponent('TyradsSdkComposeView');
+
 
 const LINKING_ERROR =
   `The package 'tyrads-sdk' doesn't seem to be linked. Make sure: \n\n` +
@@ -6,7 +14,7 @@ const LINKING_ERROR =
   '- You rebuilt the app after installing the package\n' +
   '- You are not using Expo Go\n';
 
-const Tyrads = NativeModules.TyradsSdk
+const TyradsSdk = NativeModules.TyradsSdk
   ? NativeModules.TyradsSdk
   : new Proxy(
       {},
@@ -16,4 +24,58 @@ const Tyrads = NativeModules.TyradsSdk
         },
       }
     );
+
+const Tyrads = {
+  init: (apiKey: string, apiSecret: string) => {
+    return TyradsSdk.init(apiKey, apiSecret);
+  },
+  loginUser: async (userId: string) =>{
+    try{
+      var data = await TyradsSdk.loginUser(userId);
+      console.log("data from login: ",data);
+
+      await saveData('apiHeaders', data);
+      await saveData('language', JSON.parse(data).languageCode);
+    }catch (err){
+      console.log(err);
+    }
+    return TyradsSdk.loginUser(userId);
+  },
+  showOffers: ({
+    launchMode = 3,
+    route,
+    campaignID = 0,
+  }: { launchMode?: number; route?: string; campaignID?: number } = {}) => {
+    if (Platform.OS === 'ios') {
+      return TyradsSdk.showOffers(launchMode, route, campaignID);
+    } else {
+      return TyradsSdk.showOffers(route, campaignID);
+    }
+  },
+  topPremiumOffers: ({
+    showMore = true,
+    showMyOffers = true,
+    showMyOffersEmptyView = false,
+    viewStyle = 1,
+  }: {
+    showMore?: boolean;
+    showMyOffers?: boolean;
+    showMyOffersEmptyView?: boolean;
+    viewStyle?: number;
+  } = {}) => {
+    return (
+      <I18nextProvider i18n={i18n}>
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+          <TopOffers
+            showMore={showMore}
+            showMyOffers={showMyOffers}
+            showMyOffersEmptyView={showMyOffersEmptyView}
+            style={viewStyle}
+          />
+        </View>
+      </I18nextProvider>
+    );
+  },
+};
+
 export default Tyrads;