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

package/src/acmo/core/types/types.d.ts

@@ -1,16 +1,3 @@
-interface TransformedCampaign {
-  campaignId: number;
-  appId: number;
-  title: string;
-  creativePackName: string;
-  fileUrl: string;
-  points: number;
-  rewards: number;
-  currency: any;
-  thumbnail: string;
-  premium: boolean;
-  sortingScore: number;
-}
 
 interface Campaign {
   campaignId: number;
@@ -54,6 +41,7 @@ interface Campaign {
   tracking: {
     impressionUrl: string;
     clickUrl: string;
+    s2sClickUrl: string;
   };
   targeting: {
     os: string;
@@ -88,7 +76,17 @@ interface Campaign {
       }[];
     }[];
   };
+  isInstalled: boolean;
   isRetryDownload: boolean;
   capReached: boolean;
   premium: boolean;
+}
+
+interface CurrencySales {
+  name: null | string,
+  multiplier: null | number,
+  bannerUrl: null | string,
+  dateStart: null | string,
+  dateEnd: null | string,
+  remainingTimeSeconds: null | number
 }

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet, View, } from 'react-native';
+// import { useTranslation } from 'react-i18next';
+
+interface ActiveOffersBtnProps {
+  premiumColor?: string;
+  activeCount: number;
+  onPress: (route: string) => void;
+}
+
+const ActiveOffersButton: React.FC<ActiveOffersBtnProps> = ({ premiumColor, activeCount, onPress }) => {
+  // const { t } = useTranslation();
+  return (
+    <TouchableOpacity
+      style={[styles.button, { borderColor: premiumColor }]}
+      onPress={() => onPress && onPress('active-offers')}
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <Text style={[styles.buttonText, { color: premiumColor }]}>Active Offers</Text>
+        {activeCount > 0 &&
+          <View style={styles.activeCountContainer}>
+            <Text style={styles.activeCountText}>{activeCount > 99 ? '99+' : activeCount}</Text>
+          </View>}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 42,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 16,
+    marginBottom: 16,
+    borderWidth: 2,
+  },
+  buttonText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  activeCountContainer: {
+    marginLeft: 8,
+    width: 18,
+    height: 18,
+    backgroundColor: '#FF554A',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 9,
+  },
+  activeCountText: {
+    color: 'white',
+    fontSize: 10,
+    fontWeight: 'bold',
+  }
+});
+
+export default ActiveOffersButton;

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

@@ -13,18 +13,15 @@ const CustomCard: React.FC<CustomCardProps> = ({ children, style }) => {
 const styles = StyleSheet.create({
   card: {
     backgroundColor: 'white',
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    borderBottomLeftRadius: 14,
-    borderBottomRightRadius: 14,
+    borderRadius: 16,
     paddingTop: 6,
     paddingBottom: 5,
     shadowColor: '#000',
-    shadowOffset: { width: 4, height: 4 },
-    shadowOpacity: 0.2,
-    shadowRadius: 4,
-    elevation: 4,
     alignSelf: 'center',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.24,
+    shadowRadius: 3.5,
+    elevation: 4,
   },
 });
 

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

@@ -0,0 +1,164 @@
+import React, { useRef, useState, useEffect } from 'react';
+import {
+  View,
+  Animated,
+  StyleSheet,
+  type ViewStyle,
+  type StyleProp,
+  type LayoutChangeEvent,
+} from 'react-native';
+
+interface PagerProps {
+  totalPages: number;
+  delayInMillis?: number;
+  premiumColor?: string;
+  content: (index: number) => React.ReactNode;
+  viewportFraction?: number;
+  scaleFactor?: number;
+  spacing?: number;
+  indicatorStyle?: StyleProp<ViewStyle>;
+  activeIndicatorColor?: string;
+  inactiveIndicatorColor?: string;
+}
+
+const AcmoScrollPager: React.FC<PagerProps> = ({
+  totalPages,
+  delayInMillis = 5000,
+  content,
+  viewportFraction = 0.92,
+  scaleFactor = 0.94,
+  spacing = 2,
+  indicatorStyle,
+  activeIndicatorColor = 'red',
+  inactiveIndicatorColor = 'lightgray',
+}) => {
+  const scrollX = useRef(new Animated.Value(0)).current;
+  const scrollViewRef = useRef<React.RefObject<typeof Animated.ScrollView> | any>(null);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [containerWidth, setContainerWidth] = useState<number | null>(null);
+
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const onContainerLayout = (e: LayoutChangeEvent) => {
+    const { width } = e.nativeEvent.layout;
+    if (width !== containerWidth) setContainerWidth(width);
+  };
+
+  useEffect(() => {
+    if (!containerWidth) return;
+
+    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);
+
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [containerWidth, currentPage, delayInMillis, totalPages, viewportFraction, spacing]);
+
+  const handleScroll = Animated.event(
+    [{ nativeEvent: { contentOffset: { x: scrollX } } }],
+    {
+      useNativeDriver: true,
+      listener: (event: { nativeEvent: { contentOffset: { x: number } } }) => {
+        if (!containerWidth) return;
+        const offset = containerWidth * viewportFraction + spacing;
+        const index = Math.round(event.nativeEvent.contentOffset.x / offset);
+        setCurrentPage(index);
+      },
+    }
+  );
+
+  const renderIndicators = () => (
+    <View style={[styles.indicatorContainer, indicatorStyle]}>
+      {Array.from({ length: totalPages }, (_, i) => (
+        <View
+          key={i}
+          style={[
+            styles.indicator,
+            {
+              backgroundColor:
+                i === currentPage ? activeIndicatorColor : inactiveIndicatorColor,
+            },
+          ]}
+        />
+      ))}
+    </View>
+  );
+
+  if (!containerWidth) {
+    return <View onLayout={onContainerLayout} style={{ width: '100%' }} />;
+  }
+
+  const itemWidth = containerWidth * viewportFraction;
+  const itemOffset = itemWidth + spacing;
+  const sidePadding = (containerWidth - itemWidth - 16) / 2;
+
+  return (
+    <View onLayout={onContainerLayout} style={{ width: '100%', alignItems: 'center' }}>
+      <Animated.ScrollView
+        ref={scrollViewRef}
+        horizontal
+        pagingEnabled={false}
+        snapToInterval={itemOffset}
+        decelerationRate="fast"
+        showsHorizontalScrollIndicator={false}
+        scrollEventThrottle={16}
+        onScroll={handleScroll}
+        contentContainerStyle={{ paddingHorizontal: sidePadding }}
+      >
+        {Array.from({ length: totalPages }, (_, i) => {
+          const inputRange = [
+            itemOffset * (i - 1),
+            itemOffset * i,
+            itemOffset * (i + 1),
+          ];
+
+          const scale = scrollX.interpolate({
+            inputRange,
+            outputRange: [scaleFactor, 1, scaleFactor],
+            extrapolate: 'clamp',
+          });
+
+          return (
+            <Animated.View
+              key={i}
+              style={{
+                width: itemWidth,
+                transform: [{ scale }],
+              }}
+            >
+              {content(i)}
+            </Animated.View>
+          );
+        })}
+      </Animated.ScrollView>
+      {renderIndicators()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  indicatorContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 6,
+    marginBottom: 8,
+  },
+  indicator: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginHorizontal: 4,
+  },
+});
+
+export default AcmoScrollPager;

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

@@ -0,0 +1,75 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Animated, StyleSheet, Dimensions, type DimensionValue, type ViewStyle, type StyleProp } from 'react-native';
+
+interface ShimmerProps {
+  width?: DimensionValue;
+  shimmerHeight?: number;
+  style?: StyleProp<ViewStyle>;
+  duration?: number;
+}
+
+const SCREEN_WIDTH = Dimensions.get('window').width;
+
+const Shimmer: React.FC<ShimmerProps> = ({
+  width = '100%',
+  shimmerHeight: height = 16,
+  style,
+  duration = 1500,
+}) => {
+  const translateX = useRef(new Animated.Value(-1)).current;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.timing(translateX, {
+        toValue: 1,
+        duration,
+        useNativeDriver: true,
+      }),
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [translateX, duration]);
+
+  const translateXInterpolate = translateX.interpolate({
+    inputRange: [-1, 1],
+    outputRange: [-SCREEN_WIDTH, SCREEN_WIDTH],
+  });
+
+  return (
+    <View style={[styles.container, { width }, style]}>
+      <View style={[styles.shimmerBackground, { height }]} />
+      <Animated.View
+        style={[
+          styles.shimmerOverlay,
+          {
+            width: SCREEN_WIDTH,
+            height,
+            transform: [{ translateX: translateXInterpolate }],
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    backgroundColor: '#e1e1e1',
+    borderRadius: 4,
+  },
+  shimmerBackground: {
+    flex: 1,
+    backgroundColor: '#d3d3d3',
+  },
+  shimmerOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    backgroundColor: 'rgba(255,255,255,0.5)',
+    opacity: 0.4,
+    borderRadius: 4,
+  },
+});
+
+export default Shimmer;

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

@@ -0,0 +1,248 @@
+import numeral from 'numeral';
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+} from 'react-native';
+
+
+interface Props {
+  item: Campaign;
+  onButtonClick: () => Promise<void>;
+  currencySaleModel?: CurrencySales;
+  premiumColor?: string;
+  isLoading: boolean;
+  onTap?: () => Promise<void>;
+}
+
+const AcmoOfferCard: React.FC<Props> = ({
+  item,
+  onButtonClick,
+  currencySaleModel,
+  premiumColor,
+  isLoading,
+  onTap,
+}) => {
+  const [loading, setLoading] = useState<boolean>(isLoading);
+  const bonusMultiplier = currencySaleModel?.multiplier ?? 1;
+  const itemHeight = 132;
+
+  const handleClick = async () => {
+    if (loading) return;
+    setLoading(true);
+    await onButtonClick();
+    setLoading(false);
+  };
+
+  return (
+    <TouchableOpacity
+      key={item.campaignId}
+      activeOpacity={0.9}
+      style={styles.container}
+      onPress={() => {
+        if (!loading && onTap) onTap();
+      }}
+    >
+      <View style={styles.cardShadow}>
+        <View style={[styles.imageContainer, { height: itemHeight }]}>
+          <Image
+            source={{ uri: item.creative.creativePacks[0]?.creatives[0]?.fileUrl || '' }}
+            style={styles.image}
+          />
+          {item.premium && (
+            <View style={styles.diamondIcon}>
+              <Image
+                style={{ width: 12, height: 12, objectFit: 'contain', tintColor: 'white' }}
+                source={require('../../../../assets/images/diamond.png')}
+              />
+            </View>
+          )}
+        </View>
+
+        <View style={styles.detailCard}>
+          <View style={styles.header}>
+            <Image source={{ uri: item.app.thumbnail }} style={styles.appIcon} />
+            <Text style={styles.title}>{item.app.title}</Text>
+
+            <View style={styles.payoutSection}>
+              {currencySaleModel?.multiplier && (
+                <Text style={styles.strikePayout}>
+                  {numeral(item.campaignPayout.totalPlayablePayoutConverted).format("0.00a").toUpperCase()}
+                </Text>
+              )}
+              <View style={styles.payoutRow}>
+                <Image source={{ uri: item.currency.adUnitCurrencyIcon }} style={styles.currencyIcon} />
+                <Text style={styles.payoutText}>
+                  {numeral(item.campaignPayout.totalPlayablePayoutConverted * bonusMultiplier).format("0.00a").toUpperCase()}
+                </Text>
+              </View>
+            </View>
+
+            <TouchableOpacity onPress={onTap} disabled={loading}>
+              <Image source={require('../../../../assets/images/info_icon.png')} style={styles.infoIcon} />
+            </TouchableOpacity>
+          </View>
+
+          <TouchableOpacity
+            style={[styles.button, loading && styles.buttonDisabled, { backgroundColor: loading ? '#888' : premiumColor || '#1C90DF' }]}
+            onPress={handleClick}
+            disabled={loading}
+          >
+            {loading ? (
+              <ActivityIndicator color="white" />
+            ) : (
+              <Text style={styles.buttonText}>Play Now</Text>
+            )}
+          </TouchableOpacity>
+        </View>
+
+        {currencySaleModel?.multiplier && (
+          <View style={[styles.bonusBadge, { backgroundColor: `${premiumColor}` || '#1C90DF' }]}>
+            <Text style={styles.bonusText}>{currencySaleModel?.multiplier.toFixed(1)}x Bonus</Text>
+          </View>
+        )}
+        {currencySaleModel?.multiplier && (
+          <View style={[styles.trianlge, { backgroundColor: `${premiumColor}cc` || '#1C90DF' }]}>
+          </View>
+          
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 16,
+    width: "100%"
+  },
+  cardShadow: {
+    borderRadius: 16,
+    backgroundColor: 'white',
+    shadowColor: 'black',
+    shadowOffset: { width: 0, height: 16 },
+    shadowOpacity: 0.06,
+    shadowRadius: 18,
+    elevation: 4,
+  },
+  imageContainer: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    overflow: 'hidden',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'cover',
+  },
+  diamondIcon: {
+    position: 'absolute',
+    top: 16,
+    right: 16,
+    backgroundColor: '#1E2020DD',
+    width: 28,
+    height: 28,
+    borderRadius: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  diamondText: {
+    color: 'white',
+    fontSize: 14,
+  },
+  detailCard: {
+    padding: 16,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  appIcon: {
+    width: 38,
+    height: 38,
+    borderRadius: 8,
+    marginRight: 8,
+  },
+  title: {
+    flex: 1,
+    fontWeight: '600',
+    fontSize: 14,
+  },
+  payoutSection: {
+    alignItems: 'flex-end',
+  },
+  strikePayout: {
+    textDecorationLine: 'line-through',
+    color: '#454646',
+    fontSize: 12,
+  },
+  payoutRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  currencyIcon: {
+    width: 16,
+    height: 16,
+    marginRight: 4,
+  },
+  payoutText: {
+    fontWeight: '700',
+    fontSize: 14,
+  },
+  infoIcon: {
+    width: 16,
+    height: 16,
+    marginLeft: 8,
+  },
+  button: {
+    marginTop: 12,
+    height: 42,
+    borderRadius: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonDisabled: {
+    backgroundColor: '#e0e2e7',
+  },
+  buttonText: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: 14,
+  },
+  bonusBadge: {
+    position: 'absolute',
+    top: 16,
+    left: -6,
+    paddingVertical: 8,
+    paddingHorizontal: 14,
+    borderTopRightRadius: 100,
+    borderTopLeftRadius: 10,
+    borderBottomRightRadius: 100,
+    shadowColor: 'black',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.3,
+    shadowRadius: 10,
+    backgroundColor: 'transparent',
+  },
+  trianlge: {
+    position: 'absolute',
+    top: 46.6,
+    left: -7.4,
+    zIndex: -10,
+    width: 20,
+    height: 10,
+    transform: [{ rotate: '65deg' }]
+  },
+  bonusText: {
+    color: 'white',
+    fontWeight: '700',
+    fontSize: 12,
+  },
+});
+
+export default AcmoOfferCard;