@tyrads.com/tyrads-sdk 3.3.4 → 4.0.0-beta.0

package/src/acmo/modules/inapp-notifications/limited-time-offer/limited-time-notif.tsx

@@ -0,0 +1,149 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+import { Dimensions, StyleSheet, Text, View } from "react-native";
+import InAppNotificationController from "../controller";
+import { CardAlert } from "../components/modal-wrapper";
+import { CardGradient } from "../components/gradient_card";
+import { Logger } from "../../../core/helpers/logger";
+import { LimitedTimeOfferCard } from "./components/limited-time-offer-card";
+import SnapCarousel from "../../../core/components/snap-carousel";
+import NotificationManager from "../inapp-notification-manager";
+import TyradsSdkCoreMethods from "../../../core/tyrads-sdk-core";
+
+
+const SCREEN_WIDTH = Dimensions.get('window').width
+interface InAppNotifProps {
+  useModal?: boolean;
+}
+
+export const LimitedTimeEventsNotif: React.FC<InAppNotifProps> = ({ useModal = true }) => {
+
+  const [visible, setVisible] = useState(false);
+  const [limitedTimeEvents, setLimitedTimeEvents] = useState<ActivatedCampaign[] | null>([]);
+  const controller = InAppNotificationController.getInstance();
+  const notificationManager = NotificationManager.getInstance();
+
+  useEffect(() => {
+    const updateFromController = () => {
+      if (controller.limitedTimeEvents) {
+        const limitedTimeEventsArray = controller.limitedTimeEvents;
+        Logger.log('limitedTimeEvents', limitedTimeEventsArray)
+        setLimitedTimeEvents(limitedTimeEventsArray);
+      } else {
+        setLimitedTimeEvents(null);
+      }
+    };
+
+    updateFromController();
+    const unsubscribe = controller.addListener(updateFromController);
+    return unsubscribe;
+  }, []);
+
+  useEffect(() => {
+    const hasEvents = limitedTimeEvents?.length !== undefined && limitedTimeEvents?.length > 0;
+
+    if (hasEvents) {
+      notificationManager.setLimitedTimeVisible(true);
+      setVisible(true);
+      controller.markLimitedTimeOffersAsShown();
+    } else {
+      notificationManager.setLimitedTimeVisible(false);
+    }
+  }, [limitedTimeEvents]);
+
+  const handleClose = () => {
+    setVisible(false);
+    notificationManager.setLimitedTimeVisible(false);
+    if (!useModal) {
+      TyradsSdkCoreMethods.dismissInAppNotification();
+    }
+  };
+
+  return (
+    <CardAlert visible={visible} onClose={handleClose} useModal={useModal}>
+      <CardGradient onClose={handleClose}>
+        <Text style={styles.title}>{"Limited Time Offer"}</Text>
+        <View style={styles.horizontalLine} />
+        <Text style={styles.text}>Limited time offer unlocked! Play now and claim extra rewards!</Text>
+        <SnapCarousel
+          data={limitedTimeEvents!}
+          renderItem={({ item, index }: { item: ActivatedCampaign; index: number }) => (
+            <View key={index} style={{ paddingHorizontal: 6 }}>
+
+              <LimitedTimeOfferCard
+                activatedCampaign={item}
+              />
+            </View>
+          )}
+          sliderWidth={(SCREEN_WIDTH * 0.9) - 32}
+          itemWidth={limitedTimeEvents?.length == 1 ? (SCREEN_WIDTH * 0.82) : (SCREEN_WIDTH * 0.65)}
+          loop={false}
+          paginationContainerStyle={{
+            marginTop: 16,
+            paddingVertical: 0,
+          }}
+          autoplay
+        />
+      </CardGradient>
+    </CardAlert>
+  );
+};
+
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#1E2020',
+    textAlign: 'center',
+    marginTop: 20,
+  },
+  horizontalLine: {
+    width: '100%',
+    borderBottomColor: '#E0E2E7',
+    borderBottomWidth: 1,
+    marginVertical: 16,
+  },
+  text: {
+    fontSize: 12,
+    fontWeight: '400',
+    color: '#1E2020',
+    textAlign: 'center',
+    marginBottom: 16,
+  },
+  timerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16,
+    backgroundColor: "#FF554A",
+    paddingVertical: 4,
+    borderRadius: 20,
+  },
+  timer: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#FFFFFF',
+  },
+  timerMessage: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#FFFFFF',
+    marginLeft: 8,
+  },
+  outlinedButton: {
+    borderWidth: 2,
+    borderRadius: 30,
+    justifyContent: 'center',
+    height: 42,
+  },
+  outlinedButtonTextContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  outlinedButtonText: {
+    color: '#02B5BE',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+});

package/src/acmo/modules/inapp-notifications/repository.ts

@@ -0,0 +1,49 @@
+import { http } from '../../core/network/http-client';
+import { Logger } from '../../core/helpers/logger';
+import AcmoAPIEndpoints from '../../core/constants/api-endpoints';
+
+class InAppNotificationRepo {
+  private static instance: InAppNotificationRepo;
+
+  public static getInstance(): InAppNotificationRepo {
+    if (!InAppNotificationRepo.instance) {
+      InAppNotificationRepo.instance = new InAppNotificationRepo();
+    }
+    return InAppNotificationRepo.instance;
+  }
+
+  async fetchLimitedTimeOffers(): Promise<ActivatedCampaignsResponse | null> {
+
+    try {
+      const { status, data } = await http.get(
+        AcmoAPIEndpoints.ACTIVE_CAMPAIGNS,
+      );
+      Logger.log(status, data)
+      if (status === 200) {
+        return data as ActivatedCampaignsResponse;
+      }
+      return null
+    } catch (err) {
+      Logger.error(err)
+      return null
+    }
+  }
+  async fetchCurrencySales(): Promise<CurrencySales | null> {
+    try {
+      const { status, data } = await http.get(
+        AcmoAPIEndpoints.ENGAGEMENT,
+      );
+      Logger.log(status, data)
+      if (status === 200) {
+        return data.data.CurrencySales as CurrencySales;
+      }
+      return null
+    } catch (err) {
+      Logger.error(err)
+      return null
+    }
+  }
+
+}
+
+export default InAppNotificationRepo;

package/src/acmo/modules/inapp-notifications/tyrads-global-host.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { LocalizationProvider } from "../localization/localization_context";
+import InAppNotificationHost from "./inapp-notification-host";
+
+const TyradsGlobalHost: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+  return (
+    <View style={{ flex: 1 }}>
+      {children}
+      <View style={styles.overlay} pointerEvents="box-none">
+        <LocalizationProvider>
+          <InAppNotificationHost useModal={true} />
+        </LocalizationProvider>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+  },
+});
+
+export default TyradsGlobalHost;

package/src/acmo/modules/{dashboard → premium-widgets}/components/custom_card.tsx

@@ -13,9 +13,8 @@ const CustomCard: React.FC<CustomCardProps> = ({ children, style }) => {
 const styles = StyleSheet.create({
   card: {
     backgroundColor: 'white',
+    width: '100%',
     borderRadius: 16,
-    paddingTop: 6,
-    paddingBottom: 5,
     shadowColor: '#000',
     alignSelf: 'center',
     shadowOffset: { width: 0, height: 2 },

package/src/acmo/modules/{dashboard → premium-widgets}/components/custom_scroller.tsx

@@ -19,6 +19,9 @@ interface PagerProps {
   indicatorStyle?: StyleProp<ViewStyle>;
   activeIndicatorColor?: string;
   inactiveIndicatorColor?: string;
+  inactiveOpacity?: number;
+  inactiveScaleFactor?: number;
+  autoPlay?: boolean;
 }
 
 const AcmoScrollPager: React.FC<PagerProps> = ({
@@ -31,6 +34,9 @@ const AcmoScrollPager: React.FC<PagerProps> = ({
   indicatorStyle,
   activeIndicatorColor = 'red',
   inactiveIndicatorColor = 'lightgray',
+  inactiveOpacity = 0.3,
+  inactiveScaleFactor = 0.8,
+  autoPlay = true,
 }) => {
   const scrollX = useRef(new Animated.Value(0)).current;
   const scrollViewRef = useRef<React.RefObject<typeof Animated.ScrollView> | any>(null);
@@ -50,19 +56,20 @@ const AcmoScrollPager: React.FC<PagerProps> = ({
     const itemWidth = containerWidth * viewportFraction;
     const offset = itemWidth + spacing;
 
-    intervalRef.current = setInterval(() => {
-      const next = (currentPage + 1) % totalPages;
-      setCurrentPage(next);
-      scrollViewRef.current.scrollTo({
-        x: next * offset,
-        animated: true,
-      });
-    }, delayInMillis);
-
+    if (autoPlay) {
+      intervalRef.current = setInterval(() => {
+        const next = (currentPage + 1) % totalPages;
+        setCurrentPage(next);
+        scrollViewRef.current.scrollTo({
+          x: next * offset,
+          animated: true,
+        });
+      }, delayInMillis);
+    }
     return () => {
       if (intervalRef.current) clearInterval(intervalRef.current);
     };
-  }, [containerWidth, currentPage, delayInMillis, totalPages, viewportFraction, spacing]);
+  }, [containerWidth, currentPage, delayInMillis, totalPages, viewportFraction, spacing, autoPlay]);
 
   const handleScroll = Animated.event(
     [{ nativeEvent: { contentOffset: { x: scrollX } } }],
@@ -87,6 +94,12 @@ const AcmoScrollPager: React.FC<PagerProps> = ({
             {
               backgroundColor:
                 i === currentPage ? activeIndicatorColor : inactiveIndicatorColor,
+              opacity: i === currentPage ? 1 : inactiveOpacity,
+              transform: [
+                {
+                  scale: i === currentPage ? scaleFactor : inactiveScaleFactor,
+                },
+              ],
             },
           ]}
         />
@@ -162,3 +175,4 @@ const styles = StyleSheet.create({
 });
 
 export default AcmoScrollPager;
+

package/src/acmo/modules/{dashboard → premium-widgets}/components/offer_card.tsx

@@ -53,7 +53,7 @@ const AcmoOfferCard: React.FC<Props> = ({
             source={{ uri: item.creative.creativePacks[0]?.creatives[0]?.fileUrl || '' }}
             style={styles.image}
           />
-          {item.premium && (
+          {item.campaignPremium && (
             <View style={styles.diamondIcon}>
               <Image
                 style={{ width: 12, height: 12, objectFit: 'contain', tintColor: 'white' }}
@@ -71,13 +71,13 @@ const AcmoOfferCard: React.FC<Props> = ({
             <View style={styles.payoutSection}>
               {currencySaleModel?.multiplier && (
                 <Text style={styles.strikePayout}>
-                  {numeral(item.campaignPayout.totalPlayablePayoutConverted)}
+                  {numeral((Object.values(item.payoutSummary)[0] as PayoutSummary)?.totalPlayablePayoutConverted || 0)}
                 </Text>
               )}
               <View style={styles.payoutRow}>
-                <Image source={{ uri: item.currency.adUnitCurrencyIcon }} style={styles.currencyIcon} />
+                <Image source={{ uri: (Object.values(item.availableCurrencies)[0] as AvailableCurrency)?.currencyIcon || '' }} style={styles.currencyIcon} />
                 <Text style={styles.payoutText}>
-                  {numeral(item.campaignPayout.totalPlayablePayoutConverted * bonusMultiplier)}
+                  {numeral(((Object.values(item.payoutSummary)[0] as PayoutSummary)?.totalPlayablePayoutConverted || 0) * bonusMultiplier)}
                 </Text>
               </View>
             </View>
@@ -117,17 +117,17 @@ const AcmoOfferCard: React.FC<Props> = ({
 
 const styles = StyleSheet.create({
   container: {
-    margin: 16,
-    width: "100%"
-  },
-  cardShadow: {
-    borderRadius: 16,
-    backgroundColor: 'white',
+    width: "100%",
+    marginBottom: 16,
     shadowColor: 'black',
     shadowOffset: { width: 0, height: 16 },
     shadowOpacity: 0.06,
     shadowRadius: 18,
-    elevation: 4,
+  },
+  cardShadow: {
+    borderRadius: 16,
+    backgroundColor: 'white',
+    elevation: 5,
   },
   imageContainer: {
     borderTopLeftRadius: 16,

package/src/acmo/modules/{dashboard → premium-widgets}/components/offer_list_item.tsx

@@ -77,18 +77,18 @@ export const AcmoOfferListItem: React.FC<Props> = ({
           <View style={styles.payoutRow}>
             {currencySales && (
               <Text style={styles.strikeText}>
-                {numeral(offer.campaignPayout.totalPlayablePayoutConverted)}
+                {numeral(Object.values(offer.payoutSummary)[0]?.totalPlayablePayoutConverted || 0)}
               </Text>
             )}
 
             <Image
-              source={{ uri: offer.currency.adUnitCurrencyIcon }}
+              source={{ uri: (Object.values(offer.availableCurrencies)[0] as AvailableCurrency)?.currencyIcon || '' }}
               style={styles.currencyIcon}
             />
 
             <Text style={styles.payoutText}>
               {numeral(
-                offer.campaignPayout.totalPlayablePayoutConverted * bonusMultiplier
+                ((Object.values(offer.payoutSummary)[0] as PayoutSummary)?.totalPlayablePayoutConverted || 0) * bonusMultiplier
               )}
             </Text>
           </View>

package/src/acmo/modules/{dashboard → premium-widgets}/components/premium_loading.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import Shimmer from './custom_shimmer';
-import { PremiumWidgetStyles } from '../top_offers';
+import { PremiumWidgetStyles } from '../premium_offers_widget';
 import CustomCard from './custom_card';
 
 interface PremiumWidgetsLoadingProps {

package/src/acmo/modules/premium-widgets/controller.ts

@@ -0,0 +1,39 @@
+
+import repository from './repository';
+
+class PremiumWidgetsController {
+  private static instance: PremiumWidgetsController;
+
+  private constructor() { }
+
+  public static getInstance(): PremiumWidgetsController {
+    if (!PremiumWidgetsController.instance) {
+      PremiumWidgetsController.instance = new PremiumWidgetsController();
+    }
+    return PremiumWidgetsController.instance;
+  }
+
+  public async getPremiums(): Promise<{
+    campaigns: Campaign[];
+    currencySales: CurrencySales;
+    summary: number;
+  }> {
+    const [campaigns, currencySales, summary] = await Promise.all([
+      repository.fetchTargetedCampaigns(),
+      repository.fetchCurrencySales(),
+      repository.fetchSummary(),
+    ]);
+
+    return {
+      campaigns,
+      currencySales,
+      summary,
+    };
+  }
+
+  public async openOffer(campaign: Campaign) {
+    await repository.openOffer(campaign);
+  }
+}
+
+export default PremiumWidgetsController.getInstance();

package/src/acmo/modules/{dashboard/top_offers.tsx → premium-widgets/premium_offers_widget.tsx}

@@ -3,17 +3,18 @@ import {
   View,
   Text,
   StyleSheet,
+  Dimensions,
 } from 'react-native';
-import { fetchPremiumOfferDetails, openOffer } from './repository';
+import controller from './controller';
 import PremiumHeaderSection from './components/premium_header';
 import CustomCard from './components/custom_card';
 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';
-import TyradsNativeMethods from '../../core/helpers/native_methods';
+import TyradsSdkCore from '../../core/tyrads-sdk-core';
+import SnapCarousel from '../../core/components/snap-carousel';
 
 export const enum PremiumWidgetStyles {
   list,
@@ -25,7 +26,8 @@ interface PremiumWidgetProps {
   onNavigate: (route?: string, campaignID?: number) => void;
 }
 
-const PremiumWidgets: React.FC<PremiumWidgetProps> = ({
+const SCREEN_WIDTH = Dimensions.get('window').width;
+const PremiumOffersWidget: React.FC<PremiumWidgetProps> = ({
   widgetStyle = PremiumWidgetStyles.list,
   onNavigate
 }) => {
@@ -37,16 +39,24 @@ const PremiumWidgets: React.FC<PremiumWidgetProps> = ({
   const [activeCount, setActiveCount] = useState<number>(0);
   const [loadingIndex, setLoadingIndex] = useState<number | null>(null);
 
-  useEffect(() => {
-    fetchPremiumOfferDetails(
-      setPremiumColor,
-      setCampaigns,
-      setCurrencySale,
-      setActiveCount,
-      setError,
-      setIsLoading,
-    );
+  const fetchPremiumOffers = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await controller.getPremiums();
+      setCampaigns(data.campaigns);
+      setCurrencySale(data.currencySales);
+      setPremiumColor(TyradsSdkCore.premiumColor || '#1C90DF');
+      setActiveCount(data.summary);
+    } catch (e: any) {
+      setError(e.message || 'Something went wrong');
+    } finally {
+      setIsLoading(false);
+    }
+  };
 
+  useEffect(() => {
+    fetchPremiumOffers();
   }, []);
 
   const handleShowOffers = () => {
@@ -61,10 +71,10 @@ const PremiumWidgets: React.FC<PremiumWidgetProps> = ({
   };
 
   const handleButtonPress = async (campaign: Campaign) => {
-    let isReady = await TyradsNativeMethods.isPrivacyAccepted()
+    let isReady = await TyradsSdkCore.isPrivacyAccepted()
     if (!isReady) {
       try {
-        const result = await TyradsNativeMethods.checkOnboardingProcess();
+        const result = await TyradsSdkCore.checkOnboardingProcess();
         console.log("Privacy flow result:", result);
         isReady = result === true;
       } catch (err) {
@@ -75,22 +85,18 @@ const PremiumWidgets: React.FC<PremiumWidgetProps> = ({
     if (!isReady) {
       return
     }
-    await openOffer(campaign);
-    await fetchPremiumOfferDetails(
-      setPremiumColor,
-      setCampaigns,
-      setCurrencySale,
-      setActiveCount,
-      setError,
-      setIsLoading,
-    );
+    await controller.openOffer(campaign);
+    await fetchPremiumOffers();
   }
 
+
   if (isLoading) {
     return (
-      <PremiumWidgetsLoading
-        widgetStyle={widgetStyle}
-      />
+      <>
+        <PremiumWidgetsLoading
+          widgetStyle={widgetStyle}
+        />
+      </>
     );
   }
 
@@ -104,14 +110,16 @@ const PremiumWidgets: React.FC<PremiumWidgetProps> = ({
 
 
   if (campaigns.length === 0) {
-    return <PremiumEmptyView
-      colorPremium={premiumColor}
-      onContinue={handleShowOffers}
-    />
+    return <>
+      <PremiumEmptyView
+        colorPremium={premiumColor}
+        onContinue={handleShowOffers}
+      />
+    </>;
   }
 
   return (
-    <CustomCard style={{ flexDirection: 'row' }}>
+    <CustomCard>
       <View style={{ flex: 1 }}>
         <PremiumHeaderSection premiumColor={premiumColor} onShowOffers={handleShowOffers} />
         <View style={styles.headerSpacer} />
@@ -135,19 +143,33 @@ const PremiumWidgets: React.FC<PremiumWidgetProps> = ({
               );
             case PremiumWidgetStyles.sliderCards:
               return (
-                <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)}
-                    />
+                <SnapCarousel
+                  data={campaigns}
+                  renderItem={({ item, index }) => (
+                    <View style={{ paddingHorizontal: 16 }}>
+                      <AcmoOfferCard
+                        item={item}
+                        onButtonClick={async () => handleButtonPress(campaigns[index]!)}
+                        currencySaleModel={currencySale}
+                        premiumColor={premiumColor}
+                        isLoading={false}
+                        onTap={async () => handleCampaignPress && handleCampaignPress(campaigns[index]!.campaignId)}
+                      />
+                    </View>
                   )}
+                  sliderWidth={SCREEN_WIDTH - 40}
+                  itemWidth={SCREEN_WIDTH - 40}
+                  dotStyle={{
+                    marginVertical: 0,
+                    backgroundColor: premiumColor || "#000"
+                  }}
+                  paginationContainerStyle={{
+                    marginBottom: 16,
+                    marginTop: 8,
+                    paddingVertical: 0,
+                  }}
+                  loop
+                  autoplay
                 />
               );
             default:
@@ -193,4 +215,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default PremiumWidgets;
+export default PremiumOffersWidget;

package/src/acmo/modules/premium-widgets/premium_offers_widget_wrapper.tsx

@@ -0,0 +1,39 @@
+import { View } from 'react-native';
+import { LocalizationProvider } from '../localization/localization_context';
+import TyradsSdkCore from '../../core/tyrads-sdk-core';
+import BasePremiumOffersWidget, { PremiumWidgetStyles } from './premium_offers_widget';
+import PremiumWidgetsLoading from './components/premium_loading';
+
+export const PremiumOffersWidget = ({
+  widgetStyle = PremiumWidgetStyles.list,
+  launchMode = 2,
+}: {
+  widgetStyle?: PremiumWidgetStyles;
+  launchMode?: number;
+}) => {
+  const handleNavigation = (route?: string, campaignID?: number | null) => {
+    TyradsSdkCore.showOffers({ route: route, campaignID: campaignID, launchMode: launchMode });
+  };
+  return (
+    <LocalizationProvider>
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+        <BasePremiumOffersWidget
+          widgetStyle={widgetStyle}
+          onNavigate={handleNavigation}
+        />
+      </View>
+    </LocalizationProvider>
+  );
+};
+
+export const PremiumOffersWidgetLoading = (
+  { widgetStyle = PremiumWidgetStyles.list }: {
+    widgetStyle?: PremiumWidgetStyles;
+  }
+) => {
+  return (
+    <PremiumWidgetsLoading
+      widgetStyle={widgetStyle}
+    />
+  );
+};