@tyrads.com/tyrads-sdk 2.0.0-beta.2 → 2.0.0

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

@@ -1,144 +1,139 @@
-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',
-  },
-});
-
+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 { useTranslation } from "react-i18next";
+
+const { width } = Dimensions.get('window');
+
+interface OfferInfoSectionProps {
+  details: TransformedCampaign;
+  premiumColor?: string;
+  style?: ViewStyle;
+  onButtonPress: () => void;
+}
+
+const OfferInfoSection: React.FC<OfferInfoSectionProps> = ({ details, premiumColor, style, onButtonPress }) => {
+  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={onButtonPress}
+          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;

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

@@ -1,81 +1,81 @@
-import React from 'react';
-import { View, Text, Image, TouchableOpacity, StyleSheet,} from 'react-native';
-import Tyrads from '../../../..';
-import { useTranslation } from 'react-i18next';
-
-interface PremiumHeaderSectionProps {
-  showMore?: boolean;
-  premiumColor?: string;
-}
-
-const PremiumHeaderSection: React.FC<PremiumHeaderSectionProps> = ({ showMore = true, premiumColor }) => {
-  const { t } = useTranslation();
-  return (
-    <View style={styles.headerContainer}>
-      <View style={styles.leftContainer}>
-        <View style={[styles.starContainer, { backgroundColor: premiumColor || '#1C90DF' }]}>
-          <Image
-            source={require('../../../../assets/images/star_pointed.png')}
-            style={[styles.starIcon, { tintColor: 'white' }]}
-          />
-        </View>
-        <Text style={styles.headerText} numberOfLines={1} adjustsFontSizeToFit ellipsizeMode="tail">
-          {t('dashboard.suggested_offers')}
-        </Text>
-      </View>
-      {showMore && (
-        <TouchableOpacity style={styles.rightContainer} onPress={() => Tyrads.showOffers()}>
-          <Text style={[styles.moreOffersText, { color: premiumColor }]} numberOfLines={1}>
-            {t('dashboard.more_offers')}
-          </Text>
-          <Image
-            source={require('../../../../assets/images/right_arrow.png')}
-            style={{ width: 11, height: 11, objectFit: 'contain', marginLeft: 5, tintColor: premiumColor || "#1C90DF" }}
-          />
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  starContainer: {
-    borderRadius: 25,
-    height: 19,
-    width: 19,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  headerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 6,
-  },
-  leftContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flex: 1,
-  },
-  starIcon: {
-    width: 12,
-    height: 12,
-  },
-  headerText: {
-    marginLeft: 8,
-    fontSize: 16,
-    fontWeight: 'bold',
-    flex: 1,
-  },
-  rightContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  moreOffersText: {
-    fontSize: 14,
-    fontWeight: 'bold',
-  },
-});
-
+import React from 'react';
+import { View, Text, Image, TouchableOpacity, StyleSheet,} from 'react-native';
+import { useTranslation } from 'react-i18next';
+
+interface PremiumHeaderSectionProps {
+  showMore?: boolean;
+  premiumColor?: string;
+  onShowOffers?: () => void;
+}
+
+const PremiumHeaderSection: React.FC<PremiumHeaderSectionProps> = ({ showMore = true, premiumColor, onShowOffers }) => {
+  const { t } = useTranslation();
+  return (
+    <View style={styles.headerContainer}>
+      <View style={styles.leftContainer}>
+        <View style={[styles.starContainer, { backgroundColor: premiumColor || '#1C90DF' }]}>
+          <Image
+            source={require('../../../../assets/images/star_pointed.png')}
+            style={[styles.starIcon, { tintColor: 'white' }]}
+          />
+        </View>
+        <Text style={styles.headerText} numberOfLines={1} adjustsFontSizeToFit ellipsizeMode="tail">
+          {t('dashboard.suggested_offers')}
+        </Text>
+      </View>
+      {showMore && (
+        <TouchableOpacity style={styles.rightContainer} onPress={onShowOffers}>
+          <Text style={[styles.moreOffersText, { color: premiumColor }]} numberOfLines={1}>
+            {t('dashboard.more_offers')}
+          </Text>
+          <Image
+            source={require('../../../../assets/images/right_arrow.png')}
+            style={{ width: 11, height: 11, objectFit: 'contain', marginLeft: 5, tintColor: premiumColor || "#1C90DF" }}
+          />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  starContainer: {
+    borderRadius: 25,
+    height: 19,
+    width: 19,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  headerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 6,
+  },
+  leftContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  starIcon: {
+    width: 12,
+    height: 12,
+  },
+  headerText: {
+    marginLeft: 8,
+    fontSize: 16,
+    fontWeight: 'bold',
+    flex: 1,
+  },
+  rightContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  moreOffersText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+});
+
 export default PremiumHeaderSection;