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

package/src/acmo/core/services/localization_service.ts

@@ -0,0 +1,200 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import axios, { type AxiosInstance } from 'axios';
+
+const BASE_URL = 'https://api.tyrads.com/v3.0/';
+
+interface TranslationResponse {
+  data: Array<{
+    code: string;
+    sha256: string;
+  }>;
+}
+
+type Translations = {
+  [key: string]: string | Translations;
+};
+
+class LocalizationService {
+  private static instance: LocalizationService;
+  private axios: AxiosInstance | null = null;
+  private translations: Translations = {};
+  private supportedLocales: string[] = [];
+  private readonly fallbackLocale: string = 'en';
+
+  private constructor() {
+  }
+
+  public static getInstance(): LocalizationService {
+    if (!LocalizationService.instance) {
+      LocalizationService.instance = new LocalizationService();
+    }
+    return LocalizationService.instance;
+  }
+
+  private static async getHeadersFromStorage(): Promise<Record<string, string>> {
+    try {
+      const data = await AsyncStorage.getItem('credentials');
+      return data ? JSON.parse(data) : {};
+    } catch (error) {
+      console.error('Failed to retrieve headers from AsyncStorage', error);
+      return {};
+    }
+  }
+
+
+  public async init(locale: string): Promise<void> {
+    if (this.axios) {
+      return;
+    }
+
+    const headers = await LocalizationService.getHeadersFromStorage();
+
+    this.axios = axios.create({
+      baseURL: BASE_URL,
+      timeout: 10000,
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+        "X-API-Key": headers["X-API-Key"],
+        "X-API-Secret": headers["X-API-Secret"],
+      }
+    });
+
+    this.axios.interceptors.request.use(
+      (config) => {
+        console.log('====================================');
+        console.log(`Request: ${config.method} ${config.baseURL}${config.url}`);
+        console.log('Headers:', config.headers);
+        console.log('====================================');
+        return config;
+      },
+      (error) => {
+        return Promise.reject(error);
+      }
+    );
+    this.axios.interceptors.response.use(
+      (res) => {
+        console.log('====================================');
+        console.log('Response Data:', res.data);
+        console.log('====================================');
+        return res;
+      },
+      (error) => {
+        return Promise.reject(error);
+      }
+    );
+    await this.loadTranslations(locale);
+  }
+
+  private async loadTranslations(locale: string, force = false): Promise<void> {
+    const hasUpdate = await this.checkForUpdate(locale, force);
+
+    if (!hasUpdate) {
+      const cachedData = await AsyncStorage.getItem(`translations_${locale}`);
+      if (cachedData) {
+        try {
+          this.translations = JSON.parse(cachedData);
+          return;
+        } catch (e) {
+          console.error('Failed to parse cached translations', e);
+        }
+      }
+    }
+
+    await this.fetchTranslations(locale, force);
+  }
+
+  private async fetchTranslations(locale: string, force = false): Promise<void> {
+    if (!this.axios) return;
+    try {
+      let effectiveLocale = locale;
+      if (!this.supportedLocales.includes(locale)) {
+        effectiveLocale = this.fallbackLocale;
+      }
+
+      const response = await this.axios.get(
+        `translations/${effectiveLocale}`,
+        {
+          params: {
+            force,
+            format: 'nested',
+          },
+        }
+      );
+
+      if (response.status === 200) {
+        this.translations = response.data as Translations;
+        await AsyncStorage.setItem(`translations_${effectiveLocale}`, JSON.stringify(response.data));
+      } else {
+        console.warn(`Failed to load translations: ${response.status}`);
+      }
+    } catch (e) {
+      if (axios.isAxiosError(e)) {
+        console.error('Network error fetching translations:', e.message);
+      } else {
+        console.error('An unexpected error occurred:', e);
+      }
+    }
+  }
+
+  private async checkForUpdate(locale: string, force = false): Promise<boolean> {
+    if (!this.axios) return false;
+    try {
+      const response = await this.axios.get<TranslationResponse>('translations/version', { params: { force } });
+      if (response.status === 200) {
+        const data = response.data.data;
+        this.supportedLocales = data.map(item => item.code);
+
+        const currentLocaleData = data.find(item => item.code === locale);
+        if (!currentLocaleData) {
+          return false;
+        }
+
+        const currentLocaleSha256 = currentLocaleData.sha256;
+        const cachedVersion = await AsyncStorage.getItem(`cached_version_${locale}`);
+
+        if (currentLocaleSha256 !== cachedVersion) {
+          await AsyncStorage.setItem(`cached_version_${locale}`, currentLocaleSha256);
+          return true;
+        }
+      }
+    } catch (e) {
+      if (axios.isAxiosError(e)) {
+        console.error('Error checking for update:', e.message);
+      } else {
+        console.error('An unexpected error occurred:', e);
+      }
+    }
+    return false;
+  }
+
+  public translate(key: string, args: Record<string, string | number> = {}): string {
+    const keys = key.split('.');
+    let currentMap: any = this.translations;
+
+    for (const k of keys) {
+      if (typeof currentMap === 'object' && currentMap !== null && currentMap.hasOwnProperty(k)) {
+        currentMap = currentMap[k];
+      } else {
+        return key;
+      }
+    }
+
+    if (typeof currentMap === 'string') {
+      let result = currentMap;
+      for (const [argKey, argValue] of Object.entries(args)) {
+        const regex = new RegExp(`{${argKey}}`, 'gi');
+        result = result.replace(regex, String(argValue));
+      }
+      return result;
+    }
+
+    return key;
+  }
+
+  public async changeLanguage(locale: string, force = false): Promise<void> {
+    await this.loadTranslations(locale, force);
+  }
+}
+
+export default LocalizationService;

package/src/acmo/core/storage/storage.ts

@@ -25,4 +25,18 @@ export const getData = async <T>(key: string): Promise<T | null> => {
     }
     return null;
   }
+};
+
+export const clearData = async <T>(key: string): Promise<T | null> => {
+  try {
+    await AsyncStorage.removeItem(key);
+    return true as T;
+  } catch (e: any) {
+    if (e instanceof Error) {
+      console.error('Error getting object:', e.message);
+    } else {
+      console.error('An unknown error occurred while getting.');
+    }
+    return false as T;
+  }
 };

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,62 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet, View, } from 'react-native';
+import { useLocalization } from '../../localization/localization_context';
+// 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 } = useLocalization();
+  return (
+    <TouchableOpacity
+      style={[styles.button, { borderColor: premiumColor }]}
+      onPress={() => onPress && onPress('active-offers')}
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <Text style={[styles.buttonText, { color: premiumColor }]}>{t("data.offers.button.activeOffers")}</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;