diff --git a/src/components/boostItemsList/index.js b/src/components/boostItemsList/index.js deleted file mode 100644 index f97e0695f..000000000 --- a/src/components/boostItemsList/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import BoostItemsList from './view/boostItemsListView'; - -export { BoostItemsList }; -export default BoostItemsList; diff --git a/src/components/boostItemsList/view/boostItemsListStyles.js b/src/components/boostItemsList/view/boostItemsListStyles.js deleted file mode 100644 index 96e4995d5..000000000 --- a/src/components/boostItemsList/view/boostItemsListStyles.js +++ /dev/null @@ -1,53 +0,0 @@ -import EStyleSheet from 'react-native-extended-stylesheet'; - -export default EStyleSheet.create({ - pointText: { - color: '$primaryBlue', - fontSize: 26, - marginTop: 24, - justifyContent: 'center', - alignSelf: 'center', - fontWeight: 'bold', - }, - priceText: { - color: '$editorButtonColor', - fontSize: 22, - marginTop: 24, - justifyContent: 'center', - alignSelf: 'center', - fontWeight: 'bold', - }, - placeTitleText: { - color: '$primaryBlue', - paddingTop: 5, - fontSize: 15, - textAlign: 'center', - }, - placeIcon: { - width: 30, - height: 30, - }, - activeIconWrapper: { - backgroundColor: '$white', - }, - slide: { - borderRadius: 6, - flex: 1, - shadowOpacity: 0.5, - shadowColor: '$shadowColor', - paddingBottom: 5, - shadowOffset: { - height: 3, - }, - }, - slideContainer: { - alignItems: 'center', - justifyContent: 'space-between', - width: '$deviceWidth / 2', - height: '$deviceHeight / 7', - padding: '5%', - }, - slider: { - height: '$deviceHeight / 6', - }, -}); diff --git a/src/components/boostItemsList/view/boostItemsListView.js b/src/components/boostItemsList/view/boostItemsListView.js deleted file mode 100644 index 18fee7ea4..000000000 --- a/src/components/boostItemsList/view/boostItemsListView.js +++ /dev/null @@ -1,94 +0,0 @@ -import React, { Component } from 'react'; -// External Component -import { Text, View, Image, Dimensions, TouchableOpacity } from 'react-native'; -import Carousel from 'react-native-snap-carousel'; - -// Styles -import styles from './boostItemsListStyles'; - -/* - * Props Name Description Value - *@props --> selectedSlide selected slide index for casousel Number - *@props --> handleOnPlaceSelect when place selected its trigger Function - *@props --> selectedPlace selected place index for casousel Number - * - */ -const DEVICE_WIDTH = Dimensions.get('window').width; - -class BoostItemsListView extends Component { - constructor(props) { - super(props); - this.state = {}; - } - - _renderPlaceListItem = ({ item }) => ( - this._handleOnSlidePress(item)} - > - - {item.name} - - {item.price} - - - - ); - - _handleOnSlidePress = item => { - const { items, navigateToRoom } = this.props; - const activeSlideIndex = this._carousel.currentIndex; - const isSelectedSlideCentered = items[activeSlideIndex] === item; - - if (isSelectedSlideCentered) { - if (navigateToRoom) navigateToRoom(item); - } else { - const nextSlideIndex = items.findIndex(place => place === item); - const lastSlideIndex = items.length - 1; - - if ( - (activeSlideIndex === lastSlideIndex && nextSlideIndex === 0) || - (activeSlideIndex === 0 && nextSlideIndex === lastSlideIndex) - ) { - if (activeSlideIndex > nextSlideIndex) { - this._carousel.snapToNext(); - } else { - this._carousel.snapToPrev(); - } - } else if (activeSlideIndex > nextSlideIndex) { - this._carousel.snapToPrev(); - } else { - this._carousel.snapToNext(); - } - } - }; - - render() { - const { items, onSnapToItem } = this.props; - - return ( - - { - this._carousel = c; - }} - snapOnAndroid - firstItem={3} - showsHorizontalScrollIndicator={false} - data={items} - renderItem={this._renderPlaceListItem} - sliderWidth={DEVICE_WIDTH} - itemWidth={DEVICE_WIDTH / 2} - onSnapToItem={index => onSnapToItem(index)} - slideStyle={styles.slide} - containerCustomStyle={styles.slider} - inactiveSlideOpacity={1} - activeOpacity={1} - loop - /> - - ); - } -} - -export default BoostItemsListView; diff --git a/src/config/locales/en-US.json b/src/config/locales/en-US.json index 28caaef6d..1b30c2074 100644 --- a/src/config/locales/en-US.json +++ b/src/config/locales/en-US.json @@ -296,7 +296,7 @@ "next": "NEXT" }, "boost": { - "title": "Boost", + "title": "Get eSteem Points", "buy": "GET ESTM", "next": "NEXT" }, diff --git a/src/screens/boost/screen/boostScreen.js b/src/screens/boost/screen/boostScreen.js index 4ffe8206f..468912a2d 100644 --- a/src/screens/boost/screen/boostScreen.js +++ b/src/screens/boost/screen/boostScreen.js @@ -1,25 +1,28 @@ import React, { Component } from 'react'; import { injectIntl } from 'react-intl'; -import { View, Text, ImageBackground } from 'react-native'; +import { View, Text } from 'react-native'; // Components import { BasicHeader } from '../../../components/basicHeader'; -import { BoostItemsList } from '../../../components/boostItemsList'; import { MainButton } from '../../../components/mainButton'; +import { Icon } from '../../../components/icon'; // Styles import globalStyles from '../../../globalStyles'; import styles from './boostScreenStyles'; -const SIDE_MENU_BACKGROUND = require('../../../assets/side_menu_background.png'); - const BOOST_DATA = [ - { name: '100 ESTM', color: '#fff', price: '1$', description: 'For beginner users' }, - { name: '200 ESTM', color: '#fff', price: '2$', description: 'awesome point' }, - { name: '500 ESTM', color: '#fff', price: '5$', description: 'awesome point' }, - { name: '1000 ESTM', color: '#fff', price: '10$', description: 'awesome point' }, - { name: '5000 ESTM', color: '#fff', price: '50$', description: 'Most using' }, - { name: '10000 ESTM', color: '#fff', price: '100$', description: 'Popular choice' }, + { + name: '10000 ESTM', + priceText: '100$', + price: 100, + description: 'BEST DEAL!', + }, + { name: '5000 ESTM', priceText: '50.00$', price: 50, description: 'POPULAR' }, + { name: '1000 ESTM', priceText: '10.00$', price: 10, description: '' }, + { name: '500 ESTM', priceText: '5.00$', price: 5, description: '' }, + { name: '200 ESTM', priceText: '2.00$', price: 2, description: '' }, + { name: '100 ESTM', priceText: '1.00$', price: 1, description: '' }, ]; class BoostScreen extends Component { @@ -50,32 +53,38 @@ class BoostScreen extends Component { id: 'boost.title', })} /> - - {BOOST_DATA[selectedBoost].name} - {BOOST_DATA[selectedBoost].description} - - - console.log(item)} - selectedSlide={4} - onSnapToItem={item => this.setState({ selectedBoost: item })} - /> - - - alert(selectedBoost)} - iconName="rocket" - iconType="MaterialCommunityIcons" - iconColor="white" - text={intl.formatMessage({ - id: 'boost.buy', - })} - isDisable={false} - isLoading={false} - /> - + {BOOST_DATA.map(item => ( + + {item.description && ( + + {item.description} + + )} + + alert(selectedBoost)} + height={50} + text={intl.formatMessage({ + id: 'boost.buy', + })} + isDisable={false} + isLoading={false} + > + + {item.name} + + + + + + + + {item.priceText} + + + ))} ); } diff --git a/src/screens/boost/screen/boostScreenStyles.js b/src/screens/boost/screen/boostScreenStyles.js index e3a91e214..eb96f7d93 100644 --- a/src/screens/boost/screen/boostScreenStyles.js +++ b/src/screens/boost/screen/boostScreenStyles.js @@ -5,30 +5,41 @@ export default EStyleSheet.create({ flex: 1, position: 'absolute', top: '$deviceHeight / 3', - // backgroundColor: '$primaryBlue', }, - descriptionWrapper: { - height: '$deviceHeight / 3.5', - flexDirection: 'column', + boostLine: { + flexDirection: 'row', + justifyContent: 'space-between', alignItems: 'center', }, - title: { - color: '$white', - fontSize: 26, - marginTop: 24, - justifyContent: 'center', - fontWeight: 'bold', - }, - description: { - color: '$white', - fontSize: 18, - marginTop: 24, - justifyContent: 'center', - }, button: { - marginTop: 150, - marginVertical: 8, + marginVertical: 12, alignSelf: 'center', - paddingHorizontal: 24, + paddingHorizontal: 18, + minWidth: '$deviceWidth / 2.4', + }, + buttonContent: { + flexDirection: 'row', + }, + buttonText: { + color: '$pureWhite', + fontSize: 14, + fontWeight: 'bold', + alignSelf: 'center', + width: 100, + }, + buttonIconWrapper: { + backgroundColor: '$pureWhite', + borderRadius: 20, + width: 24, + height: 24, + }, + priceWrapper: { + alignItems: 'center', + justifyContent: 'center', + alignSelf: 'center', + }, + descriptionWrapper: { + backgroundColor: '#c10000', + width: '$deviceWidth / 3', }, });