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

package/src/acmo/modules/inapp-notifications/components/modal-wrapper.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Modal, Pressable, View, StyleSheet } from 'react-native';
+
+interface CardAlertProps {
+  visible: boolean;
+  onClose: () => void;
+  children?: React.ReactNode;
+  useModal?: boolean;
+}
+
+export const CardAlert: React.FC<CardAlertProps> = ({
+  visible,
+  onClose,
+  children,
+  useModal = true,
+}) => {
+  const content = (
+    <View style={styles.fullscreen}>
+      <Pressable style={styles.overlay} onPress={onClose} />
+      <View style={styles.card}>
+        {children}
+      </View>
+    </View>
+  );
+
+  if (!useModal) {
+    return visible ? content : null;
+  }
+
+  return (
+    <Modal
+      animationType="fade"
+      transparent={true}
+      visible={visible}
+      onRequestClose={onClose}
+    >
+      {content}
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  fullscreen: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+
+  card: {
+    width: '100%',
+    alignItems: 'center',
+    zIndex: 10,
+  },
+});

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

@@ -0,0 +1,183 @@
+import InAppNotificationRepo from "./repository";
+import { getData, saveData } from "../../core/storage/storage";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+class InAppNotificationController {
+  private static instance: InAppNotificationController | null = null;
+  private constructor() { }
+
+  public static getInstance(): InAppNotificationController {
+    if (!InAppNotificationController.instance) {
+      InAppNotificationController.instance = new InAppNotificationController();
+    }
+    return InAppNotificationController.instance;
+  }
+
+  public currencySales: CurrencySales | null = null;
+  public limitedTimeEvents: Array<ActivatedCampaign> | null = null;
+  private listeners: Array<() => void> = [];
+
+  public addListener(listener: () => void): () => void {
+    this.listeners.push(listener);
+    return () => {
+      this.listeners = this.listeners.filter(l => l !== listener);
+    };
+  }
+
+  private notifyListeners() {
+    this.listeners.forEach(l => l());
+  }
+
+  private async getUserId(): Promise<string> {
+    try {
+      const userId = await getData<string>('xUserId');
+      if (userId) return userId;
+
+      const data = await AsyncStorage.getItem('apiHeaders');
+      if (!data) return 'default';
+      const parsed = JSON.parse(data);
+      const headers = typeof parsed === 'string' ? JSON.parse(parsed) : parsed;
+      return headers['xUserId'] || 'default';
+    } catch {
+      return 'default';
+    }
+  }
+
+  private async getCurrencySalesKey(): Promise<string> {
+    const userId = await this.getUserId();
+    return `currency_sales_shown_${userId}`;
+  }
+
+  private async getLimitedTimeOffersKey(): Promise<string> {
+    const userId = await this.getUserId();
+    return `limited_time_offers_shown_${userId}`;
+  }
+
+  private getTodayDateString(): string {
+    return new Date().toDateString();
+  }
+
+  public async markCurrencySalesAsShown() {
+    if (!this.currencySales?.name) return;
+    const key = await this.getCurrencySalesKey();
+    const shownData = await getData<any>(key) || {};
+    const safeShownData = (typeof shownData === 'object' && shownData !== null) ? shownData : {};
+    safeShownData[this.currencySales.name] = this.getTodayDateString();
+    await saveData(key, safeShownData);
+  }
+
+  public async markLimitedTimeOffersAsShown() {
+    if (!this.limitedTimeEvents) return;
+    const key = await this.getLimitedTimeOffersKey();
+    const shownData = await getData<any>(key) || {};
+    const safeShownData = (typeof shownData === 'object' && shownData !== null) ? shownData : {};
+    const today = this.getTodayDateString();
+    this.limitedTimeEvents.forEach(campaign => {
+      campaign.limitedTimeEvents.forEach(event => {
+        safeShownData[event.appEventId.toString()] = today;
+      });
+    });
+    await saveData(key, safeShownData);
+  }
+
+  public async init() {
+    const [currencySalesKey, limitedTimeOffersKey] = await Promise.all([
+      this.getCurrencySalesKey(),
+      this.getLimitedTimeOffersKey(),
+    ]);
+
+    const [currencySalesShownData, limitedTimeOffersShownData] = await Promise.all([
+      getData<Record<string, string>>(currencySalesKey),
+      getData<Record<string, string>>(limitedTimeOffersKey),
+    ]);
+
+    const today = this.getTodayDateString();
+
+    const isCurrencyShownToday = currencySalesShownData && Object.values(currencySalesShownData).includes(today);
+    const isLimitedShownToday = limitedTimeOffersShownData && Object.values(limitedTimeOffersShownData).includes(today);
+
+    const [currencySalesResult, limitedTimeOffersResult] = await Promise.all([
+      !isCurrencyShownToday
+        ? InAppNotificationRepo.getInstance().fetchCurrencySales()
+        : Promise.resolve(null),
+      !isLimitedShownToday
+        ? InAppNotificationRepo.getInstance().fetchLimitedTimeOffers()
+        : Promise.resolve(null),
+    ]);
+
+    if (currencySalesResult && currencySalesResult.name) {
+      const hasBeenShownEver = currencySalesShownData && !!currencySalesShownData[currencySalesResult.name];
+      this.currencySales = !hasBeenShownEver ? currencySalesResult : null;
+    } else {
+      this.currencySales = null;
+    }
+
+    const activeOffers = limitedTimeOffersResult?.data || [];
+    const allFilteredOffers = this.filterLimitedOffersWithEvents(activeOffers);
+
+    const hasNewEvent = allFilteredOffers.some(campaign =>
+      campaign.limitedTimeEvents.some(event =>
+        !limitedTimeOffersShownData || !limitedTimeOffersShownData[event.appEventId.toString()]
+      )
+    );
+
+    if (hasNewEvent) {
+      this.limitedTimeEvents = allFilteredOffers;
+    } else if (!this.limitedTimeEvents) {
+      this.limitedTimeEvents = null;
+    }
+    this.notifyListeners();
+    return !!(this.currencySales || this.limitedTimeEvents);
+  }
+  private filterLimitedOffersWithEvents(
+    activeOffers: ActivatedCampaignsData[]
+  ): ActivatedCampaign[] {
+    const allCampaigns = activeOffers
+      .filter(group => group.groupName?.toLowerCase() == "hotdeals")
+      .flatMap(offer => offer.campaigns)
+      .filter(campaign => campaign.limitedTimeEvents.length > 0)
+      .filter(campaign =>
+        campaign.campaignStatus?.toLowerCase() !== 'suspended' &&
+        campaign.validity?.isInstalled
+      )
+      .filter(campaign =>
+        campaign.limitedTimeEvents.some(event =>
+          event.conversionStatus?.toLowerCase() !== "approved"
+        )
+      );
+    const uniqueCampaigns = allCampaigns.filter((campaign, index, self) =>
+      index === self.findIndex((c) => c.campaignId === campaign.campaignId)
+    );
+    return uniqueCampaigns;
+  }
+
+  public showCountdown(event: LimitedTimeEvent): boolean {
+    const { allowDuplicateEvents, conversionStatus, dailyCount, dailyLimit } = event;
+    const isDailyLimitIncomplete = dailyCount === null || dailyLimit === null || dailyCount < dailyLimit;
+
+    if (!allowDuplicateEvents) {
+      return conversionStatus === null;
+    }
+    if (isDailyLimitIncomplete) {
+      return true;
+    }
+    return false;
+  }
+
+  public getFinalStatusString(event: LimitedTimeEvent): 'Completed' | 'Rejected' | '' {
+    const { allowDuplicateEvents, conversionStatus, dailyCount, dailyLimit } = event;
+    if (!allowDuplicateEvents) {
+      if (conversionStatus === 'approved') return 'Completed';
+      if (conversionStatus === 'rejected') return 'Rejected';
+    }
+
+    const isDailyLimitComplete = dailyCount !== null && dailyLimit !== null && dailyCount === dailyLimit;
+    if (allowDuplicateEvents && isDailyLimitComplete) {
+      return 'Completed';
+    }
+    return '';
+  }
+
+}
+
+export default InAppNotificationController;

package/src/acmo/modules/inapp-notifications/currency-sales/currency-sales-notif.tsx

@@ -0,0 +1,164 @@
+import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { CardAlert } from "../components/modal-wrapper";
+import { useEffect, useState } from "react";
+import { CardGradient } from "../components/gradient_card";
+import { CountdownTimer } from "../../../core/components/countdown-timer";
+import TyradsSdkCoreMethods, { TyradsSdkCore } from "../../../core/tyrads-sdk-core";
+import InAppNotificationController from "../controller";
+import NotificationManager from "../inapp-notification-manager";
+
+interface InAppNotifProps {
+  useModal?: boolean;
+}
+
+export const CurrencySalesNotif: React.FC<InAppNotifProps> = ({ useModal = true }) => {
+
+  const [visible, setVisible] = useState(false);
+  const [currencySales, setCurrencySales] = useState<CurrencySales | null>(null);
+  const controller = InAppNotificationController.getInstance();
+  const notificationManager = NotificationManager.getInstance();
+
+  useEffect(() => {
+    const updateFromController = () => {
+      if (controller.currencySales) {
+        setCurrencySales(controller.currencySales);
+      } else {
+        setCurrencySales(null);
+      }
+    };
+
+    updateFromController();
+    const unsubscribe = controller.addListener(updateFromController);
+    return unsubscribe;
+  }, []);
+
+  useEffect(() => {
+    const unsubscribe = notificationManager.addListener(() => {
+      updateVisibility();
+    });
+
+    return unsubscribe;
+  }, []);
+
+  useEffect(() => {
+    if (currencySales) {
+      notificationManager.setCurrencySalesVisible(true);
+      updateVisibility();
+    } else {
+      notificationManager.setCurrencySalesVisible(false);
+    }
+  }, [currencySales]);
+
+  const updateVisibility = () => {
+    const shouldShow = notificationManager.shouldShowCurrencySales();
+    setVisible(shouldShow);
+    if (shouldShow) {
+      controller.markCurrencySalesAsShown();
+    }
+  };
+
+  const handleClose = () => {
+    setVisible(false);
+    notificationManager.setCurrencySalesVisible(false);
+    if (!useModal) {
+      TyradsSdkCoreMethods.dismissInAppNotification();
+    }
+  };
+
+  const handleButtonPress = () => {
+    handleClose();
+    setTimeout(() => {
+      TyradsSdkCoreMethods.showOffers({ launchMode: 2 });
+    }, 400)
+  };
+
+  return (
+    <CardAlert visible={visible} onClose={handleClose} useModal={useModal}>
+      <CardGradient onClose={handleClose}>
+        <Text style={styles.title}>{"Bonus Rewards \nUnlocked!"}</Text>
+        <View style={styles.horizontalLine} />
+        <Text style={styles.subtitle}>{`You get ${currencySales?.multiplier}X bonus rewards!`}</Text>
+        <Text style={styles.text}>Go to offerwall and activate new offer!</Text>
+        {
+          <View style={styles.timerContainer}>
+            <Text style={styles.timerMessage}>Bonus Expires in </Text>
+            <CountdownTimer style={styles.timer} duration={currencySales?.remainingTimeSeconds ?? 0}></CountdownTimer>
+          </View>
+        }
+        <TouchableOpacity
+          style={[styles.outlinedButton, { borderColor: TyradsSdkCore.getInstance().mainColor || "#02B5BE", backgroundColor: "white" }]}
+          onPress={handleButtonPress}
+          activeOpacity={0.8}
+        >
+          <View style={styles.outlinedButtonTextContainer}>
+            <Text style={[styles.outlinedButtonText, { color: TyradsSdkCore.getInstance().mainColor || "#02B5BE" }]}>Go to Offerwall</Text>
+          </View>
+        </TouchableOpacity>
+      </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,
+  },
+  subtitle: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#1E2020',
+    textAlign: 'center',
+  },
+  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/inapp-notification-host.tsx

@@ -0,0 +1,32 @@
+import { View } from "react-native";
+import { CurrencySalesNotif } from "./currency-sales/currency-sales-notif";
+import { LimitedTimeEventsNotif } from "./limited-time-offer/limited-time-notif";
+import { useEffect } from "react";
+import InAppNotificationController from "./controller";
+
+import TyradsSdkCoreMethods from "../../core/tyrads-sdk-core";
+
+interface InAppNotificationHostProps {
+  useModal?: boolean;
+  style?: any;
+}
+
+const InAppNotificationHost: React.FC<InAppNotificationHostProps> = ({ useModal = true, style }) => {
+  useEffect(() => {
+    const initializeInAppNotifications = async () => {
+      if (TyradsSdkCoreMethods.apiKey) {
+        await InAppNotificationController.getInstance().init();
+      }
+    }
+    initializeInAppNotifications();
+  }, [])
+
+  return (
+    <View style={style}>
+      <CurrencySalesNotif useModal={useModal} />
+      <LimitedTimeEventsNotif useModal={useModal} />
+    </View>
+  );
+}
+
+export default InAppNotificationHost

package/src/acmo/modules/inapp-notifications/inapp-notification-manager.ts

@@ -0,0 +1,40 @@
+class NotificationManager {
+  private static instance: NotificationManager;
+  private limitedTimeVisible = false;
+  private currencySalesVisible = false;
+  private listeners: Array<() => void> = [];
+
+  static getInstance(): NotificationManager {
+    if (!NotificationManager.instance) {
+      NotificationManager.instance = new NotificationManager();
+    }
+    return NotificationManager.instance;
+  }
+
+  setLimitedTimeVisible(visible: boolean) {
+    this.limitedTimeVisible = visible;
+    this.notifyListeners();
+  }
+
+  setCurrencySalesVisible(visible: boolean) {
+    this.currencySalesVisible = visible;
+    this.notifyListeners();
+  }
+
+  shouldShowCurrencySales(): boolean {
+    return this.currencySalesVisible && !this.limitedTimeVisible;
+  }
+
+  addListener(listener: () => void): () => void {
+    this.listeners.push(listener);
+    return () => {
+      this.listeners = this.listeners.filter(l => l !== listener);
+    };
+  }
+
+  private notifyListeners() {
+    this.listeners.forEach(listener => listener());
+  }
+}
+
+export default NotificationManager;

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

@@ -0,0 +1,188 @@
+import { useEffect } from "react"
+import { FlatList, Image, StyleSheet, Text, TouchableOpacity, View } from "react-native"
+import { Logger } from "../../../../core/helpers/logger"
+import { numeral } from "../../../../core/helpers/numeral"
+import { CountdownTimer } from "../../../../core/components/countdown-timer"
+import InAppNotificationController from "../../controller"
+import { acmoLaunchURL } from "../../../../core/helpers/launcher"
+import { TyradsSdkCore } from "../../../../core/tyrads-sdk-core"
+import { getContrastColor } from "../../../../core/helpers/colors"
+
+export const LimitedTimeOfferCard: React.FC<{ activatedCampaign: ActivatedCampaign | null }> = ({ activatedCampaign }) => {
+
+  const controller = InAppNotificationController.getInstance();
+
+  useEffect(() => {
+    Logger.log('activatedCampaign in offer card', activatedCampaign)
+  })
+
+  const handleButtonPress = (link: string) => {
+    acmoLaunchURL(link);
+  }
+
+  return <View style={styles.container}>
+    <Image
+      source={require('../../../../../assets/images/alarm-clock.png')}
+      style={styles.bgImage}
+    />
+    <View style={styles.appHeader}>
+      <Image
+        source={{ uri: activatedCampaign?.app.thumbnail }}
+        style={styles.thumbnail}
+      />
+      <Text style={styles.appName}>
+        {activatedCampaign?.app.title}
+      </Text>
+    </View>
+    <FlatList
+      data={activatedCampaign?.limitedTimeEvents || []}
+      keyExtractor={(_, index) => index.toString()}
+      renderItem={({ item: event, index }) => (
+        <View key={index}
+          style={styles.eventContainer}>
+          <View style={styles.eventNameContainer}>
+            <Text style={styles.eventName}>
+              {event.eventName}
+            </Text>
+            <View style={styles.eventPayoutRow}>
+              <Image style={styles.eventCurrencyIcon}
+                source={{ uri: Object.values(activatedCampaign?.availableCurrencies || {})[0]?.currencyIcon }}
+              />
+              <Text style={[styles.eventPayout, { color: TyradsSdkCore.getInstance().mainColor || '#02B5BE' }]}>
+                {numeral(Object.values(event.payoutInfo || {})[0]?.payoutAmountConverted ?? 0)}
+              </Text>
+            </View>
+          </View>
+          {
+            !controller.showCountdown(event)
+              ?
+              <Text
+                style={[
+                  styles.eventStatus,
+                  { color: event.conversionStatus == 'approved' ? '#A3A9B6' : '#FF554A' }
+                ]}>
+                {controller.getFinalStatusString(event)}
+              </Text>
+              :
+              <View style={styles.timerContainer}>
+                <CountdownTimer
+                  style={styles.timer}
+                  duration={event.limitedTimeEventRemainingSeconds}
+                />
+              </View>
+          }
+        </View>
+      )}
+      style={styles.eventsContainer}
+      showsVerticalScrollIndicator={false}
+      nestedScrollEnabled={true}
+    />
+    <TouchableOpacity style={[styles.filledButton, { backgroundColor: TyradsSdkCore.getInstance().mainColor || "#02B5BE", }]}
+      onPress={() => handleButtonPress(activatedCampaign?.app.previewUrl || '')}
+      activeOpacity={0.8}
+    >
+      <Text style={[styles.btnText, { color: getContrastColor(TyradsSdkCore.getInstance().mainColor || "white") }]}>Play Now</Text>
+    </TouchableOpacity>
+  </View>
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    borderRadius: 16,
+    width: '100%',
+    maxWidth: '100%',
+    height: 378,
+    padding: 16,
+    backgroundColor: '#FFF9ED',
+    overflow: 'hidden',
+  },
+  bgImage: {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+  },
+  thumbnail: {
+    width: 43,
+    height: 43,
+    borderRadius: 7,
+    marginRight: 13
+  },
+  appHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 16,
+  },
+  appName: {
+    width: '75%',
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#1E2020',
+    marginRight: 16,
+  },
+  eventsContainer: {
+    maxHeight: 350
+  },
+  eventContainer: {
+    flexDirection: 'row',
+    backgroundColor: 'white',
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderRadius: 8,
+    marginBottom: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.06,
+    shadowRadius: 10,
+  },
+  eventNameContainer: {
+    width: '58%',
+    marginRight: 8,
+  },
+  eventName: {
+    fontSize: 12,
+    color: '#1E2020',
+  },
+  eventPayoutRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 4
+  },
+  eventCurrencyIcon: {
+    width: 12,
+    height: 12,
+    marginRight: 4,
+    resizeMode: 'contain',
+  },
+  eventPayout: {
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  eventStatus: {
+    fontSize: 10,
+    fontWeight: '600',
+  },
+  timerContainer: {
+    backgroundColor: '#FF554A',
+    paddingVertical: 2,
+    paddingHorizontal: 8,
+    borderRadius: 10,
+  },
+  timer: {
+    fontSize: 12,
+    fontWeight: '700',
+    color: 'white'
+  },
+  filledButton: {
+    borderRadius: 8,
+    paddingVertical: 12,
+    alignItems: 'center',
+  },
+  btnText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: 'white'
+  }
+})