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

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

@@ -0,0 +1,248 @@
+import React, { useState } from 'react';
+import {numeral} from '../../../core/helpers/numeral';
+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)}
+                </Text>
+              )}
+              <View style={styles.payoutRow}>
+                <Image source={{ uri: item.currency.adUnitCurrencyIcon }} style={styles.currencyIcon} />
+                <Text style={styles.payoutText}>
+                  {numeral(item.campaignPayout.totalPlayablePayoutConverted * bonusMultiplier)}
+                </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,228 @@
+import React from 'react';
+import {numeral} from '../../../core/helpers/numeral';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Image,
+  StyleSheet,
+  ActivityIndicator,
+} from 'react-native';
+import { useLocalization } from '../../localization/localization_context';
+
+
+
+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;
+  const { t } = useLocalization();
+
+  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 }]}>
+                {t('data.shared.label.bonusTagCaps',
+                  { 'multiplier': currencySales?.multiplier! },)}
+              </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)}
+              </Text>
+            )}
+
+            <Image
+              source={{ uri: offer.currency.adUnitCurrencyIcon }}
+              style={styles.currencyIcon}
+            />
+
+            <Text style={styles.payoutText}>
+              {numeral(
+                offer.campaignPayout.totalPlayablePayoutConverted * bonusMultiplier
+              )}
+            </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,
+              },
+            ]}
+          >
+            {t("data.widget.button.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',
+  },
+});

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, ImageBackground } from 'react-native';
+import { useLocalization } from '../../localization/localization_context';
+
+const PremiumEmptyView: React.FC<{ onContinue?: () => void, colorPremium?: string}> = ({ onContinue, colorPremium}) => {
+
+  const { t } = useLocalization();
+
+  return (
+    <View style={styles.container}>
+      <ImageBackground
+        source={require('../../../../assets/images/premium-emptybg.jpeg')}
+        style={styles.backgroundImage}
+        imageStyle={styles.imageBorderRadius}
+      >
+        <View style={styles.content}>
+          <Text style={[styles.title, { color: 'white', fontFamily: 'Poppins_600SemiBold' }]}>
+            {t('data.widget.empty.noOffers')}
+          </Text>
+          <TouchableOpacity
+            style={[styles.button, { backgroundColor: 'white' }]}
+            onPress={onContinue}
+            activeOpacity={0.8}
+          >
+            <Text
+              style={[
+                styles.buttonText,
+                {
+                  color: colorPremium ?? '#1C90DF',
+                  fontWeight: 'bold',
+                  fontSize: 12,
+                },
+              ]}
+            >
+              {t('data.widget.button.continuePlaying')}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      </ImageBackground>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  backgroundImage: {
+    width: '100%',
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
+  imageBorderRadius: {
+    borderRadius: 16,
+  },
+  content: {
+    paddingVertical: 22,
+    paddingHorizontal: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    textAlign: 'center',
+    fontWeight: '600',
+    marginBottom: 16,
+  },
+  button: {
+    minWidth: '100%',
+    height: 34,
+    borderRadius: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontWeight: '600',
+  },
+});
+
+export default PremiumEmptyView;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, Image, TouchableOpacity, StyleSheet,} from 'react-native';
-import { useTranslation } from 'react-i18next';
+import { useLocalization } from '../../localization/localization_context';
 
 interface PremiumHeaderSectionProps {
   showMore?: boolean;
@@ -9,28 +9,29 @@ interface PremiumHeaderSectionProps {
 }
 
 const PremiumHeaderSection: React.FC<PremiumHeaderSectionProps> = ({ showMore = true, premiumColor, onShowOffers }) => {
-  const { t } = useTranslation();
+  const { t } = useLocalization();
+  
   return (
     <View style={styles.headerContainer}>
       <View style={styles.leftContainer}>
-        <View style={[styles.starContainer, { backgroundColor: premiumColor || '#1C90DF' }]}>
+        <View style={styles.starContainer}>
           <Image
-            source={require('../../../../assets/images/star_pointed.png')}
-            style={[styles.starIcon, { tintColor: 'white' }]}
+            source={require('../../../../assets/images/diamond.png')}
+            style={[styles.starIcon, { tintColor: premiumColor }]}
           />
         </View>
-        <Text style={styles.headerText} numberOfLines={1} adjustsFontSizeToFit ellipsizeMode="tail">
-          {t('dashboard.suggested_offers')}
+        <Text style={[styles.headerText, { color: premiumColor }]} numberOfLines={1} ellipsizeMode="tail">
+          {t('data.widget.page.title')}
         </Text>
       </View>
       {showMore && (
         <TouchableOpacity style={styles.rightContainer} onPress={onShowOffers}>
           <Text style={[styles.moreOffersText, { color: premiumColor }]} numberOfLines={1}>
-            {t('dashboard.more_offers')}
+            {t('data.widget.button.moreOffers')}
           </Text>
           <Image
-            source={require('../../../../assets/images/right_arrow.png')}
-            style={{ width: 11, height: 11, objectFit: 'contain', marginLeft: 5, tintColor: premiumColor || "#1C90DF" }}
+            source={require('../../../../assets/images/angle_up.png')}
+            style={{ transform: [{ rotate: '90deg' }], width: 11, height: 11, objectFit: 'contain', marginLeft: 5, tintColor: premiumColor || "#1C90DF" }}
           />
         </TouchableOpacity>
       )}
@@ -51,7 +52,7 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingHorizontal: 16,
-    paddingVertical: 6,
+    paddingTop: 10,
   },
   leftContainer: {
     flexDirection: 'row',
@@ -64,7 +65,7 @@ const styles = StyleSheet.create({
   },
   headerText: {
     marginLeft: 8,
-    fontSize: 16,
+    fontSize: 14,
     fontWeight: 'bold',
     flex: 1,
   },
@@ -78,4 +79,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default PremiumHeaderSection;
+export default PremiumHeaderSection;

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Shimmer from './custom_shimmer';
+import { PremiumWidgetStyles } from '../top_offers';
+import CustomCard from './custom_card';
+
+interface PremiumWidgetsLoadingProps {
+  widgetStyle: PremiumWidgetStyles;
+}
+
+const PremiumWidgetsLoading: React.FC<PremiumWidgetsLoadingProps> = ({
+  widgetStyle,
+}) => {
+  return (
+    <CustomCard style={{
+      width: '100%',
+      paddingHorizontal: 16,
+    }}>
+      <View style={styles.headerRow}>
+        <Shimmer style={{ width: 120, height: 18, borderRadius: 4 }} />
+        <Shimmer style={{ width: 105, height: 18, borderRadius: 4 }} />
+      </View>
+
+      {widgetStyle === PremiumWidgetStyles.list && (
+        <View style={styles.listContainer}>
+          {[...Array(4)].map((_, index) => (
+            <View key={index} style={styles.listTile}>
+              <Shimmer shimmerHeight={54} style={{ width: 54, height: 54, borderRadius: 4 }} />
+
+              <View style={styles.titleColumn}>
+                <Shimmer style={{ width: 130, height: 16, marginBottom: 2 }} />
+                <Shimmer style={{ width: 65, height: 16 }} />
+              </View>
+
+              <Shimmer shimmerHeight={42} style={{ width: 80, height: 42, borderRadius: 8 }} />
+            </View>
+          ))}
+        </View>
+      )}
+
+      {widgetStyle === PremiumWidgetStyles.sliderCards && (
+        <Shimmer shimmerHeight={150} style={{ flexDirection: 'row', height: 150, marginTop: 16 }} />
+      )}
+
+      <Shimmer shimmerHeight={42} style={{ flexDirection: 'row', height: 42, borderRadius: 21, marginVertical: 16 }} />
+    </CustomCard>
+  );
+};
+
+const styles = StyleSheet.create({
+  headerRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 12,
+  },
+  listContainer: {
+    marginTop: 12,
+  },
+  listTile: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    justifyContent: 'space-between',
+  },
+  titleColumn: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    marginHorizontal: 16,
+  },
+});
+
+export default PremiumWidgetsLoading;