@tyrads.com/tyrads-sdk 2.0.1 → 3.1.0-beta.0

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

@@ -0,0 +1,225 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Image,
+  StyleSheet,
+  ActivityIndicator,
+} from 'react-native';
+import numeral from 'numeral';
+
+
+
+type Props = {
+  offer: Campaign;
+  currencySales?: CurrencySales;
+  onButtonTap: () => Promise<void>;
+  onPress: () => Promise<void>;
+  index: number;
+  colorPremium?: string;
+  colorPremiumFg?: string;
+  loadingIndex: number | null;
+  setLoadingIndex: (index: number | null) => void;
+};
+
+const rankIcons = [
+  require('../../../../assets/images/rank_1.png'),
+  require('../../../../assets/images/rank_2.png'),
+  require('../../../../assets/images/rank_3.png'),
+  require('../../../../assets/images/rank_4.png'),
+  require('../../../../assets/images/rank_5.png'),
+];
+
+export const AcmoOfferListItem: React.FC<Props> = ({
+  offer,
+  currencySales,
+  onButtonTap,
+  onPress,
+  index,
+  colorPremium,
+  colorPremiumFg,
+  loadingIndex,
+  setLoadingIndex,
+}) => {
+  const bonusMultiplier = currencySales?.multiplier ?? 1;
+  const isLoading = loadingIndex === index;
+  const anyLoading = loadingIndex != null;
+
+  return (
+    <TouchableOpacity
+      disabled={anyLoading}
+      onPress={onPress}
+      style={styles.itemContainer}
+      activeOpacity={0.75}
+    >
+      <View style={styles.container}>
+        <Image source={rankIcons[index]} style={styles.rankIcon} />
+
+        <Image source={{ uri: offer.app.thumbnail }} style={styles.icon} />
+
+        <View style={styles.details}>
+          {currencySales && (
+            <View style={[styles.bonusBadge, { backgroundColor: `${colorPremium}20` }]}>
+              <Text style={[styles.bonusText, { color: colorPremium }]}>
+                {bonusMultiplier}x BONUS
+              </Text>
+            </View>
+          )}
+
+          <Text numberOfLines={1} style={styles.title} ellipsizeMode="tail">
+            {offer.app.title}
+          </Text>
+
+          <View style={styles.payoutRow}>
+            {currencySales && (
+              <Text style={styles.strikeText}>
+                {numeral(offer.campaignPayout.totalPlayablePayoutConverted).format('0.00a')}
+              </Text>
+            )}
+
+            <Image
+              source={{ uri: offer.currency.adUnitCurrencyIcon }}
+              style={styles.currencyIcon}
+            />
+
+            <Text style={styles.payoutText}>
+              {numeral(
+                offer.campaignPayout.totalPlayablePayoutConverted * bonusMultiplier
+              ).format('0.00a')}
+            </Text>
+          </View>
+        </View>
+
+        <TouchableOpacity
+          disabled={anyLoading}
+          style={[
+            styles.button,
+            { backgroundColor: anyLoading ? '#e0e2e7' : colorPremium },
+          ]}
+          onPress={async () => {
+            setLoadingIndex(index)
+            await onButtonTap();
+            setLoadingIndex(null);
+          }}
+        >
+          {isLoading ? (
+            <ActivityIndicator size="small" color="#a3a9b6" />
+          ) : null}
+          <Text
+            style={[
+              styles.buttonText,
+              {
+                color: anyLoading ? '#a3a9b6' : colorPremiumFg ?? '#fff',
+                marginLeft: isLoading ? 8 : 0,
+              },
+            ]}
+          >
+            Play
+          </Text>
+        </TouchableOpacity>
+
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+
+const styles = StyleSheet.create({
+  itemContainer: {
+    flexDirection: 'row',
+    flex: 1,
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  container: {
+    flexDirection: 'row',
+    marginVertical: 2,
+    paddingHorizontal: 0,
+    width: '100%',
+    position: 'relative',
+  },
+  rankIcon: {
+    position: 'absolute',
+    zIndex: 99,
+    left: -10,
+    top: -8,
+    width: 24,
+    height: 24,
+    resizeMode: 'contain',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    borderRadius: 8,
+    padding: 10,
+    elevation: 2,
+  },
+  icon: {
+    width: 54,
+    height: 54,
+    borderRadius: 4,
+    marginRight: 10,
+  },
+  details: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  bonusBadge: {
+    alignSelf: 'flex-start',
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 16,
+    marginBottom: 4,
+  },
+  bonusText: {
+    fontSize: 10,
+    fontWeight: '700',
+  },
+  title: {
+    fontSize: 12,
+    fontWeight: '500',
+    marginBottom: 4,
+    color: '#323434',
+  },
+  payoutRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  strikeText: {
+    fontSize: 12,
+    textDecorationLine: 'line-through',
+    color: '#323434',
+    fontWeight: '300',
+  },
+  currencyIcon: {
+    width: 14,
+    height: 14,
+    marginHorizontal: 4,
+  },
+  payoutText: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#323434',
+  },
+  button: {
+    marginLeft: 4,
+    paddingHorizontal: 12,
+    height: 42,
+    minWidth: 75,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 8,
+    flexDirection: 'row',
+  },
+  buttonText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#fff',
+  },
+});

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

@@ -0,0 +1,76 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ImageBackground } from 'react-native';
+
+const PremiumEmptyView: React.FC<{ onContinue?: () => void, colorPremium?: string}> = ({ onContinue, colorPremium}) => {
+
+  return (
+    <View style={styles.container}>
+      <ImageBackground
+        source={require('../../../../assets/images/premium-emptybg.jpeg')}
+        style={styles.backgroundImage}
+        imageStyle={styles.imageBorderRadius}
+      >
+        <View style={styles.content}>
+          <Text style={[styles.title, { color: 'white', fontFamily: 'Poppins_600SemiBold' }]}>
+            {'Keep Playing!\nExciting Rewards Await!'}
+          </Text>
+          <TouchableOpacity
+            style={[styles.button, { backgroundColor: 'white' }]}
+            onPress={onContinue}
+            activeOpacity={0.8}
+          >
+            <Text
+              style={[
+                styles.buttonText,
+                {
+                  color: colorPremium ?? '#1C90DF',
+                  fontWeight: 'bold',
+                  fontSize: 12,
+                },
+              ]}
+            >
+              Continue Playing
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </ImageBackground>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  backgroundImage: {
+    width: '100%',
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  imageBorderRadius: {
+    borderRadius: 16,
+  },
+  content: {
+    paddingVertical: 22,
+    paddingHorizontal: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    textAlign: 'center',
+    fontWeight: '600',
+    marginBottom: 16,
+  },
+  button: {
+    minWidth: '100%',
+    height: 34,
+    borderRadius: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontWeight: '600',
+  },
+});
+
+export default PremiumEmptyView;

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

@@ -13,13 +13,13 @@ const PremiumHeaderSection: React.FC<PremiumHeaderSectionProps> = ({ showMore =
   return (
     <View style={styles.headerContainer}>
       <View style={styles.leftContainer}>
-        <View style={[styles.starContainer, { backgroundColor: premiumColor || '#1C90DF' }]}>
+        <View style={styles.starContainer}>
           <Image
-            source={require('../../../../assets/images/star_pointed.png')}
-            style={[styles.starIcon, { tintColor: 'white' }]}
+            source={require('../../../../assets/images/diamond.png')}
+            style={[styles.starIcon, { tintColor: premiumColor }]}
           />
         </View>
-        <Text style={styles.headerText} numberOfLines={1} adjustsFontSizeToFit ellipsizeMode="tail">
+        <Text style={[styles.headerText, { color: premiumColor }]} numberOfLines={1} ellipsizeMode="tail">
           {t('dashboard.suggested_offers')}
         </Text>
       </View>
@@ -29,8 +29,8 @@ const PremiumHeaderSection: React.FC<PremiumHeaderSectionProps> = ({ showMore =
             {t('dashboard.more_offers')}
           </Text>
           <Image
-            source={require('../../../../assets/images/right_arrow.png')}
-            style={{ width: 11, height: 11, objectFit: 'contain', marginLeft: 5, tintColor: premiumColor || "#1C90DF" }}
+            source={require('../../../../assets/images/angle_up.png')}
+            style={{ transform: [{ rotate: '90deg' }], width: 11, height: 11, objectFit: 'contain', marginLeft: 5, tintColor: premiumColor || "#1C90DF" }}
           />
         </TouchableOpacity>
       )}
@@ -51,7 +51,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingHorizontal: 16,
-    paddingVertical: 6,
+    paddingTop: 10,
   },
   leftContainer: {
     flexDirection: 'row',
@@ -64,7 +64,7 @@ const styles = StyleSheet.create({
   },
   headerText: {
     marginLeft: 8,
-    fontSize: 16,
+    fontSize: 14,
     fontWeight: 'bold',
     flex: 1,
   },

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Shimmer from './custom_shimmer';
+import { PremiumWidgetStyles } from '../top_offers';
+import CustomCard from './custom_card';
+
+interface PremiumWidgetsLoadingProps {
+  widgetStyle: PremiumWidgetStyles;
+  itemHeight?: number;
+}
+
+const PremiumWidgetsLoading: React.FC<PremiumWidgetsLoadingProps> = ({
+  widgetStyle,
+  itemHeight,
+}) => {
+  return (
+    <CustomCard style={{
+      width: '100%',
+      paddingHorizontal: 16,
+    }}>
+      <View style={styles.headerRow}>
+        <Shimmer style={{ width: 120, height: 18, borderRadius: 4 }} />
+        <Shimmer style={{ width: 105, height: 18, borderRadius: 4 }} />
+      </View>
+
+      {widgetStyle === PremiumWidgetStyles.list ? (
+        <View style={styles.listContainer}>
+          {[...Array(4)].map((_, index) => (
+            <View key={index} style={styles.listTile}>
+              <Shimmer shimmerHeight={54} style={{ width: 54, height: 54, borderRadius: 4 }} />
+
+              <View style={styles.titleColumn}>
+                <Shimmer style={{ width: 130, height: 16, marginBottom: 2 }} />
+                <Shimmer style={{ width: 65, height: 16 }} />
+              </View>
+
+              <Shimmer shimmerHeight={42} style={{ width: 80, height: 42, borderRadius: 8 }} />
+            </View>
+          ))}
+        </View>
+      ) : (
+        <>
+          <Shimmer style={{ width: '100%', height: itemHeight }} />
+        </>
+      )}
+
+      {widgetStyle === PremiumWidgetStyles.sliderCards && (
+        <Shimmer shimmerHeight={150} style={{ flexDirection: 'row', height: 150, }} />
+      )}
+
+      <Shimmer shimmerHeight={42} style={{ flexDirection: 'row', height: 42, borderRadius: 21, marginVertical: 16 }} />
+    </CustomCard>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 12,
+  },
+  listContainer: {
+    marginTop: 12,
+  },
+  listTile: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    justifyContent: 'space-between',
+  },
+  titleColumn: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    marginHorizontal: 16,
+  },
+});
+
+export default PremiumWidgetsLoading;

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

@@ -1,5 +1,6 @@
-import axios, { type AxiosResponse } from 'axios';
+import axios from 'axios';
 import { getData } from '../../core/storage/storage';
+import { acmoLaunchURLForce } from '../../core/helpers/launcher';
 
 interface ApiHeaders {
   languageCode: string;
@@ -12,28 +13,11 @@ interface ApiHeaders {
   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,
+export const fetchPremiumOfferDetails = async (
   setPremiumColor: (color: string) => void,
-  setCampaigns: (campaigns: TransformedCampaign[]) => void,
+  setCampaigns: (campaigns: Campaign[]) => void,
+  setCurrencySale: (currencySale: CurrencySales) => void,
+  setActiveCount: (activeCount: number) => void,
   setError: (error: string) => void,
   setIsLoading: (loading: boolean) => void
 ): Promise<void> => {
@@ -41,11 +25,9 @@ export const fetchCampaignsData = async (
 
   try {
     const data: any = await getData('apiHeaders');
-    if (!data) {
-      throw new Error('apiHeaders data not found.');
-    }
+    if (!data) throw new Error('apiHeaders data not found.');
+
     const parsedHeaderData: ApiHeaders = JSON.parse(data);
-    // setLanguage(parsedHeaderData.languageCode);
     setPremiumColor(parsedHeaderData.premiumColor);
 
     const headers = {
@@ -59,37 +41,130 @@ export const fetchCampaignsData = async (
       '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 langParam = `?lang=${parsedHeaderData.languageCode}`;
 
-    const transformedCampaigns = transformCampaigns(response.data.data);
+    const [campaignsRes, currencyRes, summaryRes] = await Promise.all([
+      axios.get<{ data: Campaign[] }>(`https://api.tyrads.com/v3.0/campaigns${langParam}`, { headers }),
+      axios.get<{ data: { CurrencySales: CurrencySales } }>(`https://api.tyrads.com/v3.0/engagement${langParam}`, { headers }),
+      axios.get<{ data: { activeCampaignCount: number } }>(`https://api.tyrads.com/v3.0/activated-campaigns/summary${langParam}`, { headers })
+    ]);
 
-    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);
+    const hotOffers = campaignsRes.data.data
+      .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.campaignPayout.totalPlayablePayoutConverted > 0)
+      .slice(0, 5);
+    // const currency: CurrencySales = {
+    //   "name": "Ramadhan Karem",
+    //   "multiplier": 1.5,
+    //   "bannerUrl": "",
+    //   "dateStart": "2025-03-10T00:00:00.000Z",
+    //   "dateEnd": "2025-03-10T23:59:59.000Z",
+    //   remainingTimeSeconds: undefined
+    // };
 
     setCampaigns(hotOffers);
+
+    setCurrencySale(currencyRes.data.data.CurrencySales);
+
+    setActiveCount(summaryRes.data.data.activeCampaignCount);
   } 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);
+      console.log('Request Setup Error:', error.message);
     }
-    setError('Something went wrong, please try again');
+    setError('Something went wrong, please try again.');
   } finally {
     setIsLoading(false);
   }
-};
+};
+
+const track = async (activity: string) => {
+  const data: any = await getData('apiHeaders');
+  if (!data) throw new Error('apiHeaders data not found.');
+
+  const parsedHeaderData: ApiHeaders = JSON.parse(data);
+
+  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,
+  };
+  try {
+    const fd = {
+      "activity": activity
+    };
+    await axios.post('https://api.tyrads.com/v3.0/user-activities', fd, { headers });
+  } catch (error) {
+    if (axios.isAxiosError(error) && error.response) {
+      console.log('Response Error:', error.response.data);
+    } else if (axios.isAxiosError(error) && error.request) {
+      console.log('No Response from API:', error.request);
+    } else {
+      console.log('Request Setup Error:', error);
+    }
+  }
+}
+
+export const openOffer = async (campaign: Campaign) => {
+  const campaignId = campaign.campaignId;
+  const clickUrl = campaign.tracking.clickUrl;
+  const isRetryDownload = campaign.isRetryDownload;
+  const isInstalled = campaign.isInstalled;
+  const previewUrl = campaign.app.previewUrl;
+  const s2sClickUrl = campaign.tracking.s2sClickUrl;
+
+  const data: any = await getData('apiHeaders');
+  if (!data) throw new Error('apiHeaders data not found.');
+
+  const parsedHeaderData: ApiHeaders = JSON.parse(data);
+
+  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,
+  };
+
+  try {
+    var url = clickUrl;
+    if (isInstalled) {
+      url = previewUrl;
+    } else {
+      if (isRetryDownload) {
+        await track("CampaignActivatedRetry");
+      } else {
+        await track("CampaignActivated");
+      }
+      await axios.post(`https://api.tyrads.com/v3.0/campaigns/active/${campaignId}`, {}, { headers });
+    }
+    if (s2sClickUrl != null) {
+      const res = await axios.get(s2sClickUrl);
+      if (res.status == 200) {
+        // url = res.data.url;
+        return;
+      }
+    }
+    await acmoLaunchURLForce(url);
+  } catch (error) {
+    console.log('=============Error=============');
+    console.log(error);
+    console.log('====================================');
+  }
+}
+