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

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/v3.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('====================================');
+  }
+}
+

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

@@ -2,44 +2,47 @@ import React, { useState, useEffect } from 'react';
 import {
   View,
   Text,
-  ActivityIndicator,
   StyleSheet,
 } from 'react-native';
-import { fetchCampaignsData } from './repository';
+import { fetchPremiumOfferDetails, openOffer } 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';
+import ActiveOffersButton from './components/active_offers_button';
+import { AcmoOfferListItem } from './components/offer_list_item';
+import AcmoOfferCard from './components/offer_card';
+import AcmoScrollPager from './components/custom_scroller';
+import PremiumEmptyView from './components/premium_empty_widget';
+import PremiumWidgetsLoading from './components/premium_loading';
 
-interface TopOffersProps {
-  showMore?: boolean;
-  showMyOffers?: boolean;
-  showMyOffersEmptyView?: boolean;
-  style?: number;
+export const enum PremiumWidgetStyles {
+  list,
+  sliderCards,
+}
+
+interface PremiumWidgetProps {
+  widgetStyle?: PremiumWidgetStyles;
   onNavigate: (route?: string, campaignID?: number) => void;
 }
 
-const TopOffers: React.FC<TopOffersProps> = ({
-  showMore,
-  showMyOffers = false,
-  showMyOffersEmptyView = false,
-  style = 1,
+const PremiumWidgets: React.FC<PremiumWidgetProps> = ({
+  widgetStyle = PremiumWidgetStyles.list,
   onNavigate
 }) => {
-  const [campaigns, setCampaigns] = useState<TransformedCampaign[]>([]);
+  const [campaigns, setCampaigns] = useState<Campaign[]>([]);
   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');
+  const [currencySale, setCurrencySale] = useState<CurrencySales>();
+  const [activeCount, setActiveCount] = useState<number>(0);
+  const [loadingIndex, setLoadingIndex] = useState<number | null>(null);
+
 
   useEffect(() => {
-    fetchCampaignsData(
-      // setLanguage,
+    fetchPremiumOfferDetails(
       setPremiumColor,
       setCampaigns,
+      setCurrencySale,
+      setActiveCount,
       setError,
       setIsLoading
     );
@@ -49,18 +52,30 @@ const TopOffers: React.FC<TopOffersProps> = ({
     onNavigate();
   };
   const handleCampaignPress = (campaignId: number) => {
-    onNavigate('campaign-details',campaignId );
+    onNavigate("offers", campaignId);
   };
 
-  const handleMoreOffersPress = (route: string) => {
+  const handleActiveOffersPress = (route: string) => {
     onNavigate(route);
   };
 
+  const handleButtonPress = async (campaign: Campaign) => {
+    await openOffer(campaign);
+    await fetchPremiumOfferDetails(
+      setPremiumColor,
+      setCampaigns,
+      setCurrencySale,
+      setActiveCount,
+      setError,
+      setIsLoading
+    );
+  }
+
   if (isLoading) {
     return (
-      <View style={styles.loadingContainer}>
-        <ActivityIndicator size="large" color="#007AFF" />
-      </View>
+      <PremiumWidgetsLoading
+        widgetStyle={widgetStyle}
+      />
     );
   }
 
@@ -72,53 +87,75 @@ const TopOffers: React.FC<TopOffersProps> = ({
     );
   }
 
+
   if (campaigns.length === 0) {
-    if (showMyOffersEmptyView) {
-      return (
-        <View style={styles.noCampaignContainer}>
-          <Text>No campaigns available</Text>
-        </View>
-      );
-    } else {
-      return <View />;
-    }
+    return <PremiumEmptyView
+      colorPremium={premiumColor}
+      onContinue={handleShowOffers}
+    />
   }
 
   return (
-    <CustomCard style={{}}>
+    <CustomCard style={{ flexDirection: 'row' }}>
       <View style={{ flex: 1 }}>
-        <PremiumHeaderSection showMore={showMore} premiumColor={premiumColor} onShowOffers={handleShowOffers} />
+        <PremiumHeaderSection premiumColor={premiumColor} onShowOffers={handleShowOffers} />
         <View style={styles.headerSpacer} />
         {(() => {
-          switch (style) {
-            case 1:
+          switch (widgetStyle) {
+            case PremiumWidgetStyles.list:
               return (
-                <PremiumOption1 data={campaigns} premiumColor={premiumColor} onCampaignPress={handleCampaignPress} />
+                campaigns.map((item, index) => (
+                  <AcmoOfferListItem
+                    key={index}
+                    onPress={async () => handleCampaignPress && handleCampaignPress(item.campaignId)}
+                    offer={item}
+                    currencySales={currencySale}
+                    index={index}
+                    loadingIndex={loadingIndex}
+                    setLoadingIndex={setLoadingIndex}
+                    colorPremium={premiumColor}
+                    onButtonTap={async () => handleButtonPress(item)}
+                  />
+                ))
               );
-            case 2:
+            case PremiumWidgetStyles.sliderCards:
               return (
-                <PremiumOption2 data={campaigns} premiumColor={premiumColor}  onCampaignPress={handleCampaignPress} />
-              );
-            case 3:
-              return (
-                <PremiumOption3 data={campaigns} premiumColor={premiumColor}  onCampaignPress={handleCampaignPress} />
-              );
-            case 4:
-              return (
-                <PremiumOption4 data={campaigns} premiumColor={premiumColor} onCampaignPress={handleCampaignPress} />
+                <AcmoScrollPager
+                  totalPages={campaigns.length}
+                  activeIndicatorColor={premiumColor}
+                  content={(index) => (
+                    <AcmoOfferCard
+                      item={campaigns[index]!}
+                      onButtonClick={async () => handleButtonPress(campaigns[index]!)}
+                      currencySaleModel={currencySale}
+                      premiumColor={premiumColor}
+                      isLoading={false}
+                      onTap={async () => handleCampaignPress && handleCampaignPress(campaigns[index]!.campaignId)}
+                    />
+                  )}
+                />
               );
             default:
               return <Text>Please specify a correct style</Text>;
           }
         })()}
         <View style={styles.gameListSpacer} />
-        {showMyOffers && <MyGamesButton premiumColor={premiumColor} onPress={handleMoreOffersPress}/>}
+        <ActiveOffersButton activeCount={activeCount} premiumColor={premiumColor} onPress={handleActiveOffersPress} />
       </View>
     </CustomCard>
   );
 };
 
 const styles = StyleSheet.create({
+  itemContainer: {
+    flexDirection: 'row',
+    flex: 1,
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
   loadingContainer: {
     flex: 1,
     justifyContent: 'center',
@@ -141,4 +178,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default TopOffers;
+export default PremiumWidgets;