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

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;

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',
+  },
+});