diff --git a/src/components/basicUIElements/index.js b/src/components/basicUIElements/index.js
index 24e7d4c93..f4ff21f63 100644
--- a/src/components/basicUIElements/index.js
+++ b/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,
diff --git a/src/components/basicUIElements/view/placeHolder/boostPlaceHolderStyles.js b/src/components/basicUIElements/view/placeHolder/boostPlaceHolderStyles.js
new file mode 100644
index 000000000..ff16b2cfb
--- /dev/null
+++ b/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,
+ },
+});
diff --git a/src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js b/src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js
new file mode 100644
index 000000000..44811e494
--- /dev/null
+++ b/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(
+
+
+
+
+
+
+
+
+ ,
+ );
+ });
+
+ return {listElements};
+};
+
+const mapStateToProps = state => ({
+ isDarkTheme: state.application.isDarkTheme,
+});
+
+export default connect(mapStateToProps)(BoostPlaceHolder);
diff --git a/src/constants/routeNames.js b/src/constants/routeNames.js
index d2e1bd400..e97ae65c7 100644
--- a/src/constants/routeNames.js
+++ b/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}`,
diff --git a/src/screens/boost/container/boostContainer.js b/src/screens/boost/container/boostContainer.js
index 4ec1aa368..97e59b1c0 100644
--- a/src/screens/boost/container/boostContainer.js
+++ b/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';
-
-// Utilities
+import { default as ROUTES } from '../../../constants/routeNames';
// 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 {
- RNIap.requestPurchase(sku);
- } catch (err) {
- console.warn(err.code, err.message);
+ const { navigation } = this.props;
+
+ await this.setState({ isProccesing: true });
+
+ 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 ;
+ return (
+
+ );
}
}
@@ -113,4 +140,4 @@ const mapStateToProps = state => ({
currentAccount: state.account.currentAccount,
});
-export default injectIntl(connect(mapStateToProps)(BoostContainer));
+export default withNavigation(injectIntl(connect(mapStateToProps)(BoostContainer)));
diff --git a/src/screens/boost/screen/boostScreen.js b/src/screens/boost/screen/boostScreen.js
index 0556951bf..4ae4dd452 100644
--- a/src/screens/boost/screen/boostScreen.js
+++ b/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 => (
-
- {this._renderDeal(item)}
-
- buyItem(item.productId)}
- height={50}
- text={intl.formatMessage({
- id: 'boost.buy',
- })}
- isDisable={false}
- isLoading={false}
- >
-
- {this._getTitle(get(item, 'title'))}
-
-
+ {isLoading ? (
+
+ ) : (
+ productList.map(item => (
+
+ {this._renderDeal(item)}
+
+ buyItem(item.productId)}
+ height={50}
+ text={intl.formatMessage({
+ id: 'boost.buy',
+ })}
+ isDisable={isProccesing}
+ isLoading={false}
+ >
+
+ {get(item, 'title', '').toUpperCase()}
+
+
+
-
-
-
+
+
-
- {get(item, 'localizedPrice', 0)}
+
+ {get(item, 'localizedPrice', null) && (
+ {get(item, 'localizedPrice', 0)}
+ )}
+
-
- ))}
+ ))
+ )}
);
}