Fixed boost design issues for android

src/screens/boost/container/boostContainer.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { Platform } from 'react-native';
+import { Platform, Alert } from 'react-native';
 import RNIap, {
   purchaseErrorListener,
   purchaseUpdatedListener,
@@ -33,37 +33,6 @@ const ITEM_SKUS = Platform.select({
   android: ['099points', '199points', '499points', '999points', '4999points', '9999points'],
 });
 
-const BOOST_DATA = Platform.select({
-  ios: [
-    {
-      id: '099points',
-      name: '10000 ESTM',
-      priceText: '100$',
-      price: 100,
-      description: 'BEST DEAL!',
-    },
-    { id: '199points', name: '5000 ESTM', quantity: 500, price: 50, description: 'POPULAR' },
-    { id: '499points', name: '1000 ESTM', quantity: 10000, price: 10, description: '' },
-    { id: '999points', name: '500 ESTM', quantity: 500, price: 5, description: '' },
-    { id: '4999points', name: '200 ESTM', quantity: 200, price: 2, description: '' },
-    { id: '9999points', name: '100 ESTM', quantity: 100, price: 1, description: '' },
-  ],
-  android: [
-    {
-      id: '099points',
-      name: '10000 ESTM',
-      priceText: '100$',
-      price: 100,
-      description: 'BEST DEAL!',
-    },
-    { id: '199points', name: '5000 ESTM', quantity: 500, price: 50, description: 'POPULAR' },
-    { id: '499points', name: '1000 ESTM', quantity: 10000, price: 10, description: '' },
-    { id: '999points', name: '500 ESTM', quantity: 500, price: 5, description: '' },
-    { id: '4999points', name: '200 ESTM', quantity: 200, price: 2, description: '' },
-    { id: '9999points', name: '100 ESTM', quantity: 100, price: 1, description: '' },
-  ],
-});
-
 class BoostContainer extends Component {
   constructor(props) {
     super(props);
@@ -97,10 +66,9 @@ class BoostContainer extends Component {
 
   _getItems = async () => {
     try {
-      console.log(ITEM_SKUS);
       const products = await RNIap.getProducts(ITEM_SKUS);
-      // const products = await RNIap.getSubscriptions(itemSkus);
       console.log('Products', products);
+      products.sort((a, b) => parseFloat(a.price) - parseFloat(b.price)).reverse();
       this.setState({ productList: products });
     } catch (err) {
       console.warn(err.code, err.message);

src/screens/boost/screen/boostScreen.js

@@ -12,6 +12,8 @@ import { Icon } from '../../../components/icon';
 import globalStyles from '../../../globalStyles';
 import styles from './boostScreenStyles';
 
+const DEALS = { '9999points': 'BEST DEAL!', '4999points': 'POPULAR!' };
+
 class BoostScreen extends PureComponent {
   /* Props
    * ------------------------------------------------
@@ -28,6 +30,24 @@ class BoostScreen extends PureComponent {
   // Component Life Cycles
 
   // Component Functions
+  _renderDeal = item => {
+    if (DEALS[item.productId]) {
+      return (
+        <View style={styles.descriptionWrapper}>
+          <Fragment>
+            <Text style={styles.description}>{DEALS[item.productId]}</Text>
+            <View style={styles.triangle} />
+          </Fragment>
+        </View>
+      );
+    }
+  };
+
+  _getTitle = title => {
+    const lastIndex = title.lastIndexOf(' ');
+
+    return title.substring(0, lastIndex);
+  };
 
   render() {
     const { intl, buyItem, boostData } = this.props;
@@ -43,14 +63,7 @@ class BoostScreen extends PureComponent {
 
         {boostData.map(item => (
           <View style={styles.boostLine} key={get(item, 'productId')}>
-            {!!get(item, 'description', null) && (
+            {this._renderDeal(item)}
-              <View style={styles.descriptionWrapper}>
-                <Fragment>
-                  <Text style={styles.description}>{get(item, 'description')}</Text>
-                  <View style={styles.triangle} />
-                </Fragment>
-              </View>
-            )}
             <View style={styles.buttonWrapper}>
               <MainButton
                 style={styles.button}
@@ -63,7 +76,7 @@ class BoostScreen extends PureComponent {
                 isLoading={false}
               >
                 <View style={styles.buttonContent}>
-                  <Text style={styles.buttonText}>{get(item, 'title')}</Text>
+                  <Text style={styles.buttonText}>{this._getTitle(get(item, 'title'))}</Text>
                   <View style={styles.buttonIconWrapper}>
                     <Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
                   </View>
@@ -72,7 +85,7 @@ class BoostScreen extends PureComponent {
             </View>
 
             <View style={styles.priceWrapper}>
-              <Text style={styles.priceText}>{`$${get(item, 'price', 0).toFixed(2)}`}</Text>
+              <Text style={styles.priceText}>{get(item, 'localizedPrice', 0)}</Text>
             </View>
           </View>
         ))}