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..dc9d791aa
--- /dev/null
+++ b/src/components/basicUIElements/view/placeHolder/boostPlaceHolderStyles.js
@@ -0,0 +1,15 @@
+import EStyleSheet from 'react-native-extended-stylesheet';
+
+export default EStyleSheet.create({
+ container: {
+ backgroundColor: '$primaryBackgroundColor',
+ borderColor: '$primaryLightBackground',
+ marginRight: 0,
+ marginLeft: 0,
+ flex: 1,
+ flexDirection: 'row',
+ },
+ paragraphWrapper: {
+ marginLeft: 50,
+ },
+});
diff --git a/src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js b/src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js
new file mode 100644
index 000000000..a6fffb90a
--- /dev/null
+++ b/src/components/basicUIElements/view/placeHolder/boostPlaceHolderView.js
@@ -0,0 +1,35 @@
+/* eslint-disable radix */
+import React, { Fragment } 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;
+ 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/screens/boost/container/boostContainer.js b/src/screens/boost/container/boostContainer.js
index 4ec1aa368..fc5b37ba5 100644
--- a/src/screens/boost/container/boostContainer.js
+++ b/src/screens/boost/container/boostContainer.js
@@ -39,6 +39,7 @@ class BoostContainer extends Component {
this.state = {
receipt: '',
productList: [],
+ isLoading: true,
};
}
@@ -67,11 +68,11 @@ 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 });
+ this.setState({ isLoading: false });
} catch (err) {
- console.warn(err.code, err.message);
+ this.setState({ isLoading: false });
}
};
@@ -103,9 +104,25 @@ class BoostContainer extends Component {
// };
render() {
- const { productList } = this.state;
+ const { productList, isLoading } = this.state;
+ const _freeEstm = { productId: 0, title: 'free esteem', localizedPrice: null };
- return ;
+ return ;
+
+ // currency: "TRY"
+ // description: "Get $0,99 worth of ESTM to boost experience"
+ // discounts: []
+ // introductoryPrice: ""
+ // introductoryPriceNumberOfPeriodsIOS: ""
+ // introductoryPricePaymentModeIOS: ""
+ // introductoryPriceSubscriptionPeriodIOS: ""
+ // localizedPrice: "₺6,99"
+ // price: "6.99"
+ // productId: "099points"
+ // subscriptionPeriodNumberIOS: "0"
+ // subscriptionPeriodUnitIOS: "DAY"
+ // title: "100 ESTM"
+ // type: "Do not use this. It returned sub only before"
}
}
diff --git a/src/screens/boost/screen/boostScreen.js b/src/screens/boost/screen/boostScreen.js
index 0556951bf..d36d06902 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 } = 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'))}
-
-
+ {true ? (
+
+ ) : (
+ productList.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'))}
+
+
+
-
-
-
+
+
-
- {get(item, 'localizedPrice', 0)}
+
+ {get(item, 'localizedPrice', null) && (
+ {get(item, 'localizedPrice', 0)}
+ )}
+
-
- ))}
+ ))
+ )}
);
}