@tyrads.com/tyrads-sdk 1.1.7 → 2.0.0-beta.0

package/readme.md

@@ -1,95 +1,95 @@
-# tyrads-sdk
-
-Tyrads SDK for React Native 
-
-## Installation
-
-```sh
-npm install @tyrads.com/tyrads-sdk
-```
-
-## Usage
-
-
-```js
-import Tyrads from '@tyrads.com/tyrads-sdk';
-
-// ...
-
-
-    Tyrads.init('', '');
-    Tyrads.loginUser('');
-    Tyrads.showOffers();
-```
-
-
-</br>
-<details>
-<summary><strong>Launch Mode</strong></summary>
-
-
-</br>
-
-##### Min SDK version required: v1.1.6
-##### Works only for iOS 
-
-</br>
-
-Tyrads SDK provides the ability to open the Offerwall in a webkit view that is embedded in the app to provide a seamless user experience. Also, it provides the ability to open the Offerwall in an external browser (Safari) if Apple's app store policy does not approve the in-app rewards system for the app.
-
-Available launch modes:
-- `launchMode: 3` - opens the Offerwall in an external browser (Safari)
-- `launchMode: 2` - opens the Offerwall in a webkit view that is embedded in the app
-
-```js
-
-// Note: The launchMode parameter is optional, if not specified the default would be opening the Offerwall in an external browser (Safari)
-
-Tyrads.showOffers({ launchMode: 3 });// provide launchMode: 2 to open the Offerwall in a webkit view that is embedded in the app
-
-```
-</details>
-
-
-
-</br>
-<details>
-<summary><strong>Deeplinking Routes</strong></summary>
-
-
-</br>
-
-##### Min SDK version required: v1.1.6
-
-</br>
-
-The Tyrads SDK supports deeplinking to specific sections of the offerwall. When initializing or interacting with the SDK, you can specify a route to open a particular page. For campaign-specific routes, you'll need to provide the campaignID as well.
-
-Available routes and their usage:
-- `campaigns` - opens the Campaigns Page
-- `campaigns-activated` - opens the Activated Campaigns Page
-- `campaign-details` - opens the Campaign Details Page (requires campaignID)
-- `campaign-tickets` - opens the Campaign Tickets Page (requires campaignID)
-
-```js
-
-// Default route (Campaigns Page)
-Tyrads.showOffers();
-
-// Explicitly specifying the Campaigns Page
-Tyrads.showOffers({ route: "campaigns" });
-
-// Activated Campaigns Page
-Tyrads.showOffers({ route: "campaigns-activated" });
-
-// Campaign Details Page (requires campaignID)
-Tyrads.showOffers({ route: "campaign-details", campaignID: "your_campaign_id_here" });
-
-// Campaign Tickets Page (requires campaignID)
-Tyrads.showOffers({ route: "campaign-tickets", campaignID: "your_campaign_id_here" });
-
-```
-</details>
-
-</br></br>
-
+# tyrads-sdk
+
+Tyrads SDK for React Native 
+
+## Installation
+
+```sh
+npm install @tyrads.com/tyrads-sdk
+```
+
+## Usage
+
+
+```js
+import Tyrads from '@tyrads.com/tyrads-sdk';
+
+// ...
+
+
+    Tyrads.init('', '');
+    Tyrads.loginUser('');
+    Tyrads.showOffers();
+```
+
+
+</br>
+<details>
+<summary><strong>Launch Mode</strong></summary>
+
+
+</br>
+
+##### Min SDK version required: v1.1.6
+##### Works only for iOS 
+
+</br>
+
+Tyrads SDK provides the ability to open the Offerwall in a webkit view that is embedded in the app to provide a seamless user experience. Also, it provides the ability to open the Offerwall in an external browser (Safari) if Apple's app store policy does not approve the in-app rewards system for the app.
+
+Available launch modes:
+- `launchMode: 3` - opens the Offerwall in an external browser (Safari)
+- `launchMode: 2` - opens the Offerwall in a webkit view that is embedded in the app
+
+```js
+
+// Note: The launchMode parameter is optional, if not specified the default would be opening the Offerwall in an external browser (Safari)
+
+Tyrads.showOffers({ launchMode: 3 });// provide launchMode: 2 to open the Offerwall in a webkit view that is embedded in the app
+
+```
+</details>
+
+
+
+</br>
+<details>
+<summary><strong>Deeplinking Routes</strong></summary>
+
+
+</br>
+
+##### Min SDK version required: v1.1.6
+
+</br>
+
+The Tyrads SDK supports deeplinking to specific sections of the offerwall. When initializing or interacting with the SDK, you can specify a route to open a particular page. For campaign-specific routes, you'll need to provide the campaignID as well.
+
+Available routes and their usage:
+- `campaigns` - opens the Campaigns Page
+- `campaigns-activated` - opens the Activated Campaigns Page
+- `campaign-details` - opens the Campaign Details Page (requires campaignID)
+- `campaign-tickets` - opens the Campaign Tickets Page (requires campaignID)
+
+```js
+
+// Default route (Campaigns Page)
+Tyrads.showOffers();
+
+// Explicitly specifying the Campaigns Page
+Tyrads.showOffers({ route: "campaigns" });
+
+// Activated Campaigns Page
+Tyrads.showOffers({ route: "campaigns-activated" });
+
+// Campaign Details Page (requires campaignID)
+Tyrads.showOffers({ route: "campaign-details", campaignID: "your_campaign_id_here" });
+
+// Campaign Tickets Page (requires campaignID)
+Tyrads.showOffers({ route: "campaign-tickets", campaignID: "your_campaign_id_here" });
+
+```
+</details>
+
+</br></br>
+

package/src/acmo/core/marquee.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, View, StyleSheet, Dimensions, type TextStyle,} from 'react-native';
+
+interface MarqueeTextProps {
+  text: string;
+  speed?: number;
+  repeat?: number;
+  style?: TextStyle;
+}
+
+const MarqueeText: React.FC<MarqueeTextProps> = ({ text, speed = 15, repeat = 100, style }) => {
+  const translateX = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const textWidth = text.length * 4;
+    const screenWidth = Dimensions.get('window').width;
+
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(translateX, {
+          toValue: -textWidth,
+          duration: (textWidth + screenWidth) * speed,
+          useNativeDriver: true,
+        }),
+        Animated.timing(translateX, {
+          toValue: screenWidth,
+          duration: 0,
+          useNativeDriver: true,
+        }),
+      ]),
+      { iterations: repeat }
+    );
+
+    animation.start();
+
+    return () => animation.stop();
+  }, [text, speed, repeat, translateX]);
+
+  return (
+    <View style={styles.container}>
+      <Animated.Text
+        numberOfLines={1}
+        style={[styles.text, style, { transform: [{ translateX }] }]}
+      >
+        {text}
+      </Animated.Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    width: '100%',
+  },
+  text: {
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});
+
+export default MarqueeText;

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

@@ -0,0 +1,28 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export const saveData = async (key: string, object: any): Promise<void> => {
+  try {
+    const jsonValue: string = JSON.stringify(object);
+    await AsyncStorage.setItem(key, jsonValue);
+  } catch (e: any) {
+    if (e instanceof Error) {
+      console.error('Error saving object:', e.message);
+    } else {
+      console.error('An unknown error occurred while saving.');
+    }
+  }
+};
+
+export const getData = async <T>(key: string): Promise<T | null> => {
+  try {
+    const jsonValue: string | null = await AsyncStorage.getItem(key);
+    return jsonValue != null ? JSON.parse(jsonValue) as T : null;
+  } catch (e: any) {
+    if (e instanceof Error) {
+      console.error('Error getting object:', e.message);
+    } else {
+      console.error('An unknown error occurred while getting.');
+    }
+    return null;
+  }
+};

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

@@ -0,0 +1,94 @@
+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;
+  campaignName: string;
+  campaignDescription: null | string;
+  createdOn: string;
+  sortingScore: number;
+  status: string;
+  expiredOn: null | string;
+  hasPlaytimeEvents: boolean;
+  app: {
+    id: number;
+    title: string;
+    packageName: string;
+    rating: number;
+    shortDescription: string;
+    store: string;
+    storeCategory: string;
+    previewUrl: string;
+    thumbnail: string;
+    confidenceScore: number;
+    securityLabel: string;
+  };
+  currency: {
+    name: string;
+    symbol: string;
+    adUnitName: string;
+    adUnitCurrencyName: string;
+    adUnitCurrencyConversion: number;
+    adUnitCurrencyIcon: string;
+  };
+  campaignPayout: {
+    totalEvents: number;
+    totalPayout: number;
+    totalPlayablePayout: number;
+    totalMicrochargePayout: number;
+    totalPayoutConverted: number;
+    totalPlayablePayoutConverted: number;
+    totalMicrochargePayoutConverted: number;
+  };
+  tracking: {
+    impressionUrl: string;
+    clickUrl: string;
+  };
+  targeting: {
+    os: string;
+    targetingType: string;
+    reward: {
+      rewardDifficulty: string;
+      incentRewardDescription: string;
+    };
+  };
+  creative: {
+    creativeUrl: string;
+    creativePacks: {
+      creativePackId: null | number;
+      creativePackName: string;
+      languageName: string;
+      languageCode: string;
+      creatives: {
+        creativeId: null | number;
+        creativeName: string;
+        callToAction: string;
+        text: string;
+        byteSize: string;
+        fileUrl: string;
+        duration: string;
+        creativeType: {
+          name: string;
+          type: string;
+          width: string;
+          height: string;
+          creativeCategoryType: string;
+        };
+      }[];
+    }[];
+  };
+  isRetryDownload: boolean;
+  capReached: boolean;
+  premium: boolean;
+}

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

@@ -0,0 +1,85 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { View, ScrollView, StyleSheet, Dimensions } from 'react-native';
+
+const { width } = Dimensions.get('window');
+
+interface AutoScrollPagerWithIndicatorsProps {
+  totalPages: number;
+  delayInMillis?: number;
+  premiumColor?: string;
+  content: (index: number) => React.ReactNode;
+}
+
+const AutoScrollPagerWithIndicators: React.FC<AutoScrollPagerWithIndicatorsProps> = ({
+  totalPages,
+  delayInMillis = 5000,
+  premiumColor,
+  content,
+}) => {
+  const [currentPage, setCurrentPage] = useState(0);
+  const scrollViewRef = useRef<ScrollView>(null);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      const nextBanner = (currentPage + 1) % totalPages;
+      setCurrentPage(nextBanner);
+      scrollViewRef.current?.scrollTo({ x: nextBanner * width, animated: true });
+    }, delayInMillis);
+
+    return () => clearInterval(intervalId);
+  }, [currentPage, totalPages, delayInMillis]);
+
+  useEffect(() => {
+    scrollViewRef.current?.scrollTo({ x: currentPage * width, animated: false });
+  }, [currentPage]);
+
+  const renderIndicators = () => {
+    const indicators: React.ReactNode[] = [];
+    for (let i = 0; i < totalPages; i++) {
+      indicators.push(
+        <View
+          key={i}
+          style={[
+            styles.indicator,
+            { backgroundColor: currentPage === i ? (premiumColor|| '#1C90DF') : 'lightgray' },
+          ]}
+        />
+      );
+    }
+    return <View style={styles.indicatorContainer}>{indicators}</View>;
+  };
+
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        ref={scrollViewRef}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={true}
+        scrollEnabled={false}
+        contentContainerStyle={{ width: totalPages * width }}
+      >
+        {Array.from({ length: totalPages }, (_, i) => content(i))}
+      </ScrollView>
+      {renderIndicators()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+  },
+  indicatorContainer: {
+    flexDirection: 'row',
+    marginTop: 10,
+  },
+  indicator: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginHorizontal: 2,
+  },
+});
+
+export default AutoScrollPagerWithIndicators;

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

@@ -0,0 +1,31 @@
+import React, { type ReactNode } from 'react';
+import { View, StyleSheet, type ViewStyle } from 'react-native';
+
+interface CustomCardProps {
+  children: ReactNode;
+  style?: ViewStyle;
+}
+
+const CustomCard: React.FC<CustomCardProps> = ({ children, style }) => {
+  return <View style={[styles.card, style]}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: 'white',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    borderBottomLeftRadius: 14,
+    borderBottomRightRadius: 14,
+    paddingTop: 6,
+    paddingBottom: 5,
+    shadowColor: '#000',
+    shadowOffset: { width: 4, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 4,
+    alignSelf: 'center',
+  },
+});
+
+export default CustomCard;

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { TouchableOpacity, Text, StyleSheet,} from 'react-native';
+import Tyrads from '../../../..';
+import { useTranslation } from 'react-i18next';
+
+interface MyGamesButtonProps {
+  premiumColor?: string;
+}
+
+const MyGamesButton: React.FC<MyGamesButtonProps> = ({ premiumColor }) => {
+  const { t } = useTranslation();
+  return (
+    <TouchableOpacity
+      style={[styles.button, { backgroundColor: premiumColor || '#1C90DF' }]}
+      onPress={() => Tyrads.showOffers({ route: 'campaigns-activated' })}
+    >
+      <Text style={styles.buttonText}>{t('dashboard.my_games')}</Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    height: 40,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginHorizontal: 16,
+    marginBottom: 16,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold',
+  },
+});
+
+export default MyGamesButton;

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

@@ -0,0 +1,144 @@
+import React from 'react';
+import { Dimensions, Image, StyleSheet, Text, TouchableOpacity, View, type ViewStyle,} from "react-native";
+import numeral from 'numeral';
+import TextTicker from "react-native-text-ticker";
+import Tyrads from "../../../..";
+import { useTranslation } from "react-i18next";
+
+const { width } = Dimensions.get('window');
+
+interface OfferInfoSectionProps {
+  details: TransformedCampaign;
+  premiumColor?: string;
+  style?: ViewStyle;
+}
+
+const OfferInfoSection: React.FC<OfferInfoSectionProps> = ({ details, premiumColor, style }) => {
+  const { t } = useTranslation();
+
+  return (
+    <View style={[styles.infoContainer, style, { backgroundColor: premiumColor || '#1C90DF' }]}>
+      <View style={styles.infoRow}>
+        <View style={styles.leftInfo}>
+          <Image
+            style={styles.gameIcon}
+            source={{ uri: details.thumbnail }}
+            resizeMode="cover"
+          />
+          <View style={styles.gameDetails}>
+            {details.title.length > 20 ? (
+              <View style={{ overflow: 'hidden' }}>
+                <TextTicker
+                  style={styles.gameTitle}
+                  duration={3000}
+                  loop
+                  bounce
+                  repeatSpacer={50}
+                  marqueeDelay={1000}
+                >
+                  {details.title}
+                </TextTicker>
+              </View>
+            ) : (
+              <Text style={styles.gameTitle} numberOfLines={1} ellipsizeMode="tail">
+                {details.title}
+              </Text>
+            )}
+
+            <View style={styles.rewardDetails}>
+              <Image
+                source={{ uri: details.currency.adUnitCurrencyIcon }}
+                resizeMode="contain"
+                style={styles.coinIcon}
+              />
+              <Text style={styles.points}>{numeral(details.points).format("0.00a").toUpperCase()}</Text>
+              <Text style={styles.points}>{''}{details.currency.adUnitCurrencyName}</Text>
+              <Text style={styles.rewards}>
+                {' '}
+                {details.rewards} {t('dashboard.rewards', { count: details.rewards })}
+              </Text>
+            </View>
+          </View>
+        </View>
+        <TouchableOpacity
+          onPress={() => {
+            Tyrads.showOffers({
+              route: 'campaign-details',
+              campaignID: details.campaignId
+            })
+          }}
+          style={styles.playButton}
+        >
+          <Text style={[styles.playButtonText, { color: premiumColor || '#1C90DF' }]}>
+            {t('dashboard.play_button')}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  infoContainer: {
+    width: width,
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  infoRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '90%',
+  },
+  leftInfo: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '68%',
+  },
+  gameIcon: {
+    width: 50,
+    height: 50,
+    borderRadius: 8,
+  },
+  gameDetails: {
+    marginLeft: 10,
+  },
+  gameTitle: {
+    color: 'white',
+    fontSize: 14,
+    marginBottom: 4,
+  },
+  rewardDetails: {
+    flexDirection: 'row',
+    marginTop: 4,
+  },
+  coinIcon: {
+    width: 18,
+    height: 18,
+  },
+  points: {
+    color: 'white',
+    fontSize: 12,
+    marginLeft: 4,
+  },
+  rewards: {
+    color: 'lightgrey',
+    fontSize: 11,
+    fontStyle: 'italic',
+  },
+  playButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 2,
+    height: 30,
+    borderRadius: 8,
+    backgroundColor: 'white',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  playButtonText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+});
+
+export default OfferInfoSection;