@tyrads.com/tyrads-sdk 1.1.15 → 2.0.0-beta.1

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;

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

@@ -0,0 +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',
+  },
+});
+
+export default PremiumHeaderSection;

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

@@ -0,0 +1,161 @@
+import React from 'react';
+import numeral from 'numeral';
+import {
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
+import TextTicker from 'react-native-text-ticker';
+import Tyrads from '../../../../index';
+import { useTranslation } from 'react-i18next';
+
+interface PremiumOption1Props {
+  data: TransformedCampaign[];
+  premiumColor?: string;
+}
+
+const PremiumOption1: React.FC<PremiumOption1Props> = ({ data, premiumColor }) => {
+  const { t } = useTranslation();
+  console.log("Prmium Color", premiumColor);
+
+  return (
+    <View>
+      {data.map((item, index) => (
+        <TouchableOpacity
+          key={index}
+          onPress={() => {
+            Tyrads.showOffers({
+              route: "campaign-details",
+              campaignID: item.campaignId,
+            });
+          }}
+          style={styles.itemContainer}
+          activeOpacity={0.75}
+        >
+          <View style={{ flexDirection: 'row', flex: 8, marginRight: 10 }}>
+            <Image source={{ uri: item.thumbnail }} style={styles.thumbnail} />
+            <View style={styles.infoContainer}>
+              <View style={{ width: '100%' }}>
+                {item.title.length > 25 ? (
+                  <View style={{ overflow: 'hidden' }}>
+                    <TextTicker
+                      style={styles.titleText}
+                      duration={3000}
+                      loop
+                      bounce
+                      repeatSpacer={50}
+                      marqueeDelay={1000}
+                    >
+                      {item.title}
+                    </TextTicker>
+                  </View>
+                ) : (
+                  <Text numberOfLines={1} style={styles.titleText}>
+                    {item.title}
+                  </Text>
+                )}
+              </View>
+              <View style={styles.infoRow}>
+                <View style={[styles.rankContainer, { backgroundColor: premiumColor || '#1C90DF' }]}>
+                  <Text numberOfLines={1} style={styles.rankText} adjustsFontSizeToFit={true}>
+                    {t('dashboard.top_ranking', { number: index + 1 })}
+                  </Text>
+                </View>
+                <View style={styles.rewardDetails}>
+                  <Image
+                    source={{ uri: item.currency.adUnitCurrencyIcon }}
+                    resizeMode="contain"
+                    style={styles.coinIcon}
+                  />
+                  <Text style={styles.points}>{numeral(item.points).format("0.00a").toUpperCase()}</Text>
+                  <Text style={styles.points}>{''}{item.currency.adUnitCurrencyName}</Text>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View style={[styles.playButton, { backgroundColor: premiumColor || '#1C90DF' }]}>
+            <Text style={styles.playButtonText}>{t('dashboard.play_button')}</Text>
+          </View>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  itemContainer: {
+    flexDirection: 'row',
+    flex: 1,
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  thumbnail: {
+    height: 40,
+    width: 40,
+    borderRadius: 10,
+  },
+  infoContainer: {
+    marginLeft: 8,
+  },
+  titleText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+  infoRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignContent: 'center',
+  },
+  rankContainer: {
+    marginTop: 4,
+    borderRadius: 12,
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    width: 43,
+    alignItems: 'center',
+  },
+  rankText: {
+    fontSize: 10,
+    color: 'white',
+    fontWeight: 'bold',
+  },
+  rewardDetails: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 4,
+    left: 4,
+  },
+  coinIcon: {
+    width: 14,
+    height: 14,
+  },
+  points: {
+    fontSize: 13,
+    marginLeft: 4,
+    fontWeight: '500',
+  },
+  rewards: {
+    fontSize: 10,
+    fontStyle: 'italic',
+  },
+  playButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 5,
+    height: 30,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  playButtonText: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: 'white',
+  },
+});
+
+export default PremiumOption1;

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

@@ -0,0 +1,104 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+} from 'react-native';
+import AutoScrollPagerWithIndicators from './auto_scroller';
+import OfferInfoSection from './offer_info_section';
+import Tyrads from '../../../..';
+
+const { width } = Dimensions.get('window');
+
+interface PremiumOption2Props {
+  data: TransformedCampaign[];
+  premiumColor?: string;
+}
+
+const PremiumOption2: React.FC<PremiumOption2Props> = ({ data, premiumColor }) => {
+  return (
+    <AutoScrollPagerWithIndicators
+      totalPages={data.length}
+      premiumColor={premiumColor}
+      content={(page) => (
+        <TouchableOpacity
+          key={page}
+          onPress={() =>
+            Tyrads.showOffers({
+              route: 'campaign-details',
+              campaignID: data[page]?.campaignId,
+            })
+          }
+          activeOpacity={0.8}
+        >
+          {data[page] && (
+            <>
+              <OfferBanner details={data[page]} index={page} premiumColor={premiumColor} />
+              <OfferInfoSection details={data[page]} premiumColor={premiumColor} />
+            </>
+          )}
+        </TouchableOpacity>
+      )}
+    />
+  );
+};
+
+interface OfferBannerProps {
+  details: TransformedCampaign;
+  index: number;
+  premiumColor?: string;
+}
+
+const OfferBanner: React.FC<OfferBannerProps> = ({ details, index, premiumColor }) => {
+  return (
+    <View style={styles.bannerContainer}>
+      <Image style={styles.bannerImage} source={{ uri: details.fileUrl }} resizeMode="cover" />
+      <View style={styles.starContainer}>
+        <Image
+          source={require('../../../../assets/images/premium_star.png')}
+          style={[styles.starIcon, { tintColor: premiumColor || '#1C90DF' }]}
+        />
+        <Text style={styles.index} numberOfLines={1} ellipsizeMode="tail">
+          {index + 1}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  bannerContainer: {
+    width: width,
+    height: 180,
+  },
+  bannerImage: {
+    flex: 1,
+  },
+  starContainer: {
+    position: 'absolute',
+    top: 10,
+    left: 10,
+    backgroundColor: 'rgba(0,0,0,0)',
+  },
+  starIcon: {
+    width: 30,
+    height: 30,
+  },
+  index: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+    color: 'white',
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+});
+
+export default PremiumOption2;

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { TouchableOpacity, View, } from 'react-native';
+import AutoScrollPagerWithIndicators from './auto_scroller';
+import OfferInfoSection from './offer_info_section';
+import Tyrads from "../../../..";
+
+interface PremiumOption3Props {
+  data: TransformedCampaign[];
+  premiumColor?: string;
+}
+
+const PremiumOption3: React.FC<PremiumOption3Props> = ({ data, premiumColor }) => {
+  return (
+    <AutoScrollPagerWithIndicators
+      totalPages={data.length}
+      premiumColor={premiumColor}
+      content={(page) => (
+        <TouchableOpacity
+          key={page}
+          style={{ flex: 1 }}
+          activeOpacity={0.8}
+          onPress={() =>
+            Tyrads.showOffers({
+              route: 'campaign-details',
+              campaignID: data[page]?.campaignId,
+            })
+          }
+        >
+          <View>
+            {
+              data[page] && (
+                <OfferInfoSection
+                  details={data[page]}
+                  premiumColor={premiumColor}
+                  style={{ paddingVertical: 23 }}
+                />
+              )
+            }
+          </View>
+        </TouchableOpacity>
+      )}
+    />
+  );
+};
+
+export default PremiumOption3;