Merge pull request #1012 from esteemapp/feature/freeESTM

first part Feature/free estm

src/components/basicUIElements/index.js

@@ -18,6 +18,7 @@ import ProfileSummaryPlaceHolder from './view/placeHolder/profileSummaryPlaceHol
 import WalletDetailsPlaceHolder from './view/placeHolder/walletDetailsPlaceHolder';
 import WalletUnclaimedPlaceHolder from './view/placeHolder/walletUnclaimedPlaceHolder';
 import ListPlaceHolder from './view/placeHolder/listPlaceHolderView';
+import BoostPlaceHolder from './view/placeHolder/boostPlaceHolderView';
 
 export {
   Card,
@@ -26,6 +27,7 @@ export {
   LineBreak,
   ListItemPlaceHolder,
   ListPlaceHolder,
+  BoostPlaceHolder,
   NoInternetConnection,
   NoPost,
   PostCardPlaceHolder,

src/components/basicUIElements/view/placeHolder/boostPlaceHolderStyles.js

@@ -0,0 +1,24 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+  container: {
+    backgroundColor: '$primaryBackgroundColor',
+    borderColor: '$primaryLightBackground',
+    marginRight: 0,
+    marginLeft: 0,
+    flexDirection: 'column',
+  },
+  paragraphWrapper: {
+    marginLeft: 30,
+  },
+  line: {
+    flexDirection: 'row',
+    marginVertical: 10,
+    alignContent: 'center',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  rightBox: {
+    marginRight: 20,
+  },
+});

src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js

@@ -0,0 +1,44 @@
+/* eslint-disable radix */
+import React from 'react';
+import { connect } from 'react-redux';
+import { Dimensions, View } from 'react-native';
+import times from 'lodash/times';
+import Placeholder from 'rn-placeholder';
+
+import styles from './boostPlaceHolderStyles';
+
+const HEIGHT = Dimensions.get('window').height;
+
+const BoostPlaceHolder = ({ isDarkTheme }) => {
+  const color = isDarkTheme ? '#2e3d51' : '#f5f5f5';
+  const ratio = (HEIGHT - 300) / 50 / 1.3;
+  const listElements = [];
+
+  times(parseInt(ratio), i => {
+    listElements.push(
+      <View style={styles.container} key={i}>
+        <View style={styles.line}>
+          <Placeholder.Box color={color} width={90} height={40} animate="fade" />
+          <View style={styles.paragraphWrapper}>
+            <Placeholder.Box color={color} width={140} radius={25} height={50} animate="fade" />
+          </View>
+          <Placeholder.Box
+            style={styles.rightBox}
+            color={color}
+            width={20}
+            height={10}
+            animate="fade"
+          />
+        </View>
+      </View>,
+    );
+  });
+
+  return <View style={styles.container}>{listElements}</View>;
+};
+
+const mapStateToProps = state => ({
+  isDarkTheme: state.application.isDarkTheme,
+});
+
+export default connect(mapStateToProps)(BoostPlaceHolder);

src/constants/routeNames.js

@@ -22,6 +22,7 @@ export default {
     BOOST: `Boost${SCREEN_SUFFIX}`,
     BOOST_POST: `BoostPost${SCREEN_SUFFIX}`,
     PROMOTE: `Promote${SCREEN_SUFFIX}`,
+    FREE_ESTM: `FreeEstm${SCREEN_SUFFIX}`,
   },
   DRAWER: {
     MAIN: `Main${DRAWER_SUFFIX}`,

src/screens/boost/container/boostContainer.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { Platform, Alert } from 'react-native';
+import { withNavigation } from 'react-navigation';
 import RNIap, {
   purchaseErrorListener,
   purchaseUpdatedListener,
@@ -12,12 +13,8 @@ import { injectIntl } from 'react-intl';
 
 // import { toastNotification } from '../../../redux/actions/uiAction';
 
-// Middleware
-
 // Constants
-// import { default as ROUTES } from '../../../constants/routeNames';
+import { default as ROUTES } from '../../../constants/routeNames';
-
-// Utilities
 
 // Component
 import BoostScreen from '../screen/boostScreen';
@@ -39,6 +36,8 @@ class BoostContainer extends Component {
     this.state = {
       receipt: '',
       productList: [],
+      isLoading: true,
+      isProccesing: false,
     };
   }
 
@@ -67,20 +66,39 @@ class BoostContainer extends Component {
   _getItems = async () => {
     try {
       const products = await RNIap.getProducts(ITEM_SKUS);
-      console.log('Products', products);
+
       products.sort((a, b) => parseFloat(a.price) - parseFloat(b.price)).reverse();
-      this.setState({ productList: products });
+      await this.setState({ productList: products });
     } catch (err) {
-      console.warn(err.code, err.message);
+      Alert.alert(
+        `Fetching data from server failed, please try again or notify us at info@esteem.app \n${err.message.substr(
+          0,
+          20,
+        )}`,
+      );
     }
+
+    await this.setState({ isLoading: false });
   };
 
   _buyItem = async sku => {
-    try {
+    const { navigation } = this.props;
-      RNIap.requestPurchase(sku);
+
-    } catch (err) {
+    await this.setState({ isProccesing: true });
-      console.warn(err.code, err.message);
+
+    if (sku !== 'freePoints') {
+      try {
+        await RNIap.requestPurchase(sku);
+      } catch (err) {
+        console.warn(err.code, err.message);
+      }
+    } else {
+      navigation.navigate({
+        routeName: ROUTES.SCREENS.FREE_ESTM,
+      });
     }
+
+    this.setState({ isProccesing: false });
   };
 
   // _buyItem = async sku => {
@@ -103,9 +121,18 @@ class BoostContainer extends Component {
   // };
 
   render() {
-    const { productList } = this.state;
+    const { productList, isLoading, isProccesing } = this.state;
+    // const FREE_ESTM = { productId: 'freePoints', title: 'free estm' };
 
-    return <BoostScreen boostData={productList} buyItem={this._buyItem} />;
+    return (
+      <BoostScreen
+        // productList={[...productList, FREE_ESTM]}
+        productList={productList}
+        buyItem={this._buyItem}
+        isLoading={isLoading}
+        isProccesing={isProccesing}
+      />
+    );
   }
 }
 
@@ -113,4 +140,4 @@ const mapStateToProps = state => ({
   currentAccount: state.account.currentAccount,
 });
 
-export default injectIntl(connect(mapStateToProps)(BoostContainer));
+export default withNavigation(injectIntl(connect(mapStateToProps)(BoostContainer)));

src/screens/boost/screen/boostScreen.js

@@ -7,6 +7,7 @@ import get from 'lodash/get';
 import { BasicHeader } from '../../../components/basicHeader';
 import { MainButton } from '../../../components/mainButton';
 import { Icon } from '../../../components/icon';
+import { BoostPlaceHolder } from '../../../components/basicUIElements';
 
 // Styles
 import globalStyles from '../../../globalStyles';
@@ -50,7 +51,7 @@ class BoostScreen extends PureComponent {
   };
 
   render() {
-    const { intl, buyItem, boostData } = this.props;
+    const { intl, buyItem, productList, isLoading, isProccesing } = this.props;
     const { selectedBoost } = this.state;
 
     return (
@@ -61,34 +62,40 @@ class BoostScreen extends PureComponent {
           })}
         />
 
-        {boostData.map(item => (
+        {isLoading ? (
-          <View style={styles.boostLine} key={get(item, 'productId')}>
+          <BoostPlaceHolder />
-            {this._renderDeal(item)}
+        ) : (
-            <View style={styles.buttonWrapper}>
+          productList.map(item => (
-              <MainButton
+            <View style={styles.boostLine} key={get(item, 'productId')}>
-                style={styles.button}
+              {this._renderDeal(item)}
-                onPress={() => buyItem(item.productId)}
+              <View style={styles.buttonWrapper}>
-                height={50}
+                <MainButton
-                text={intl.formatMessage({
+                  style={styles.button}
-                  id: 'boost.buy',
+                  onPress={() => buyItem(item.productId)}
-                })}
+                  height={50}
-                isDisable={false}
+                  text={intl.formatMessage({
-                isLoading={false}
+                    id: 'boost.buy',
-              >
+                  })}
-                <View style={styles.buttonContent}>
+                  isDisable={isProccesing}
-                  <Text style={styles.buttonText}>{this._getTitle(get(item, 'title'))}</Text>
+                  isLoading={false}
-                  <View style={styles.buttonIconWrapper}>
+                >
-                    <Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
+                  <View style={styles.buttonContent}>
+                    <Text style={styles.buttonText}>{get(item, 'title', '').toUpperCase()}</Text>
+                    <View style={styles.buttonIconWrapper}>
+                      <Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
+                    </View>
                   </View>
-                </View>
+                </MainButton>
-              </MainButton>
+              </View>
-            </View>
 
-            <View style={styles.priceWrapper}>
+              <View style={styles.priceWrapper}>
-              <Text style={styles.priceText}>{get(item, 'localizedPrice', 0)}</Text>
+                {get(item, 'localizedPrice', null) && (
+                  <Text style={styles.priceText}>{get(item, 'localizedPrice', 0)}</Text>
+                )}
+              </View>
             </View>
-          </View>
+          ))
-        ))}
+        )}
       </View>
     );
   }