@tyrads.com/tyrads-sdk 2.0.0-beta.2 → 2.0.0

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

@@ -1,184 +1,185 @@
-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',
-  },
-});
-
+import React from 'react';
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+} from 'react-native';
+import AutoScrollPagerWithIndicators from './auto_scroller';
+import numeral from 'numeral';
+import { useTranslation } from 'react-i18next';
+
+const { width } = Dimensions.get('window');
+
+interface PremiumOption4Props {
+  data: TransformedCampaign[];
+  premiumColor?: string;
+  onCampaignPress?: (campaignId: number) => void;
+}
+
+const PremiumOption4: React.FC<PremiumOption4Props> = ({ data, onCampaignPress, premiumColor }) => {
+  return (
+    <AutoScrollPagerWithIndicators
+      totalPages={data.length}
+      premiumColor={premiumColor}
+      content={(page) => (
+        <View key={page}>
+          {
+            data[page] && (
+              <OfferBanner details={data[page]} index={page} premiumColor={premiumColor}  onCampaignPress={onCampaignPress} />
+            )
+          }
+        </View>
+      )}
+    />
+  );
+};
+
+interface OfferBannerProps {
+  details: TransformedCampaign;
+  index: number;
+  onCampaignPress?: (campaignId: number) => void;
+  premiumColor?: string;
+}
+
+const OfferBanner: React.FC<OfferBannerProps> = ({ details, index, onCampaignPress, 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={() => onCampaignPress && onCampaignPress(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

@@ -1,95 +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);
-  }
+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);
+  }
 };