From f79980f9b803bc1075ba36d1de926f55265b2366 Mon Sep 17 00:00:00 2001 From: u-e Date: Sun, 21 Jul 2019 14:00:14 +0300 Subject: [PATCH] created boost screen new design --- src/screens/boost/container/boostContainer.js | 11 ++++ src/screens/boost/screen/boostScreen.js | 62 ++++++++++--------- src/screens/boost/screen/boostScreenStyles.js | 45 ++++++++++++-- src/themes/darkTheme.js | 1 + src/themes/lightTheme.js | 1 + 5 files changed, 88 insertions(+), 32 deletions(-) diff --git a/src/screens/boost/container/boostContainer.js b/src/screens/boost/container/boostContainer.js index 7e9290714..a4e4324c5 100644 --- a/src/screens/boost/container/boostContainer.js +++ b/src/screens/boost/container/boostContainer.js @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; +import * as RNIap from 'react-native-iap'; // import { Alert } from 'react-native'; import { injectIntl } from 'react-intl'; @@ -28,6 +29,16 @@ class BoostContainer extends Component { } // Component Life Cycle Functions + async componentDidMount() { + try { + await RNIap.prepare(); + const products = await RNIap.getProducts(); + // this.setState({ items }); + console.log(products); + } catch (err) { + console.warn(err); + } + } // Component Functions diff --git a/src/screens/boost/screen/boostScreen.js b/src/screens/boost/screen/boostScreen.js index 468912a2d..cf229e347 100644 --- a/src/screens/boost/screen/boostScreen.js +++ b/src/screens/boost/screen/boostScreen.js @@ -1,6 +1,7 @@ -import React, { Component } from 'react'; +import React, { PureComponent, Fragment } from 'react'; import { injectIntl } from 'react-intl'; import { View, Text } from 'react-native'; +import get from 'lodash/get'; // Components import { BasicHeader } from '../../../components/basicHeader'; @@ -13,19 +14,20 @@ import styles from './boostScreenStyles'; const BOOST_DATA = [ { + id: 0, 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: '' }, + { id: 1, name: '5000 ESTM', quantity: 500, price: 50, description: 'POPULAR' }, + { id: 2, name: '1000 ESTM', quantity: 10000, price: 10, description: '' }, + { id: 3, name: '500 ESTM', quantity: 500, price: 5, description: '' }, + { id: 4, name: '200 ESTM', quantity: 200, price: 2, description: '' }, + { id: 5, name: '100 ESTM', quantity: 100, price: 1, description: '' }, ]; -class BoostScreen extends Component { +class BoostScreen extends PureComponent { /* Props * ------------------------------------------------ * @prop { type } name - Description.... @@ -55,33 +57,37 @@ class BoostScreen extends Component { /> {BOOST_DATA.map(item => ( - - {item.description && ( + + {!!get(item, 'description', null) && ( - {item.description} + + {get(item, 'description')} + + )} - - alert(selectedBoost)} - height={50} - text={intl.formatMessage({ - id: 'boost.buy', - })} - isDisable={false} - isLoading={false} - > - - {item.name} - - + + this.setState({ selectedBoost: get(item, 'id') })} + height={50} + text={intl.formatMessage({ + id: 'boost.buy', + })} + isDisable={false} + isLoading={false} + > + + {get(item, 'name')} + + + - - + + - {item.priceText} + {`$${get(item, 'price', 0).toFixed(2)}`} ))} diff --git a/src/screens/boost/screen/boostScreenStyles.js b/src/screens/boost/screen/boostScreenStyles.js index eb96f7d93..d3ce1c72d 100644 --- a/src/screens/boost/screen/boostScreenStyles.js +++ b/src/screens/boost/screen/boostScreenStyles.js @@ -13,13 +13,18 @@ export default EStyleSheet.create({ }, button: { marginVertical: 12, - alignSelf: 'center', paddingHorizontal: 18, - minWidth: '$deviceWidth / 2.4', + // alignSelf: 'flex-start', }, buttonContent: { flexDirection: 'row', }, + buttonWrapper: { + minWidth: '$deviceWidth / 2.4', + flexDirection: 'row', + justifyContent: 'flex-end', + flex: 1, + }, buttonText: { color: '$pureWhite', fontSize: 14, @@ -37,9 +42,41 @@ export default EStyleSheet.create({ alignItems: 'center', justifyContent: 'center', alignSelf: 'center', + width: '$deviceWidth / 4', + }, + priceText: { + fontSize: 14, + fontWeight: 'bold', + color: '$primaryBlue', }, descriptionWrapper: { - backgroundColor: '#c10000', - width: '$deviceWidth / 3', + backgroundColor: '$companyRed', + width: 90, + height: 40, + justifyContent: 'center', + paddingHorizontal: 16, + borderTopRightRadius: 5, + borderBottomRightRadius: 5, + }, + description: { + fontSize: 10, + color: '$white', + fontWeight: 'bold', + }, + triangle: { + width: 0, + height: 0, + backgroundColor: 'transparent', + borderStyle: 'solid', + borderLeftWidth: 18, + borderRightWidth: 18, + borderBottomWidth: 14, + borderLeftColor: 'transparent', + borderRightColor: 'transparent', + borderBottomColor: '$primaryBackgroundColor', + borderRadius: 5, + transform: [{ rotate: '-90deg' }], + position: 'absolute', + right: -12, }, }); diff --git a/src/themes/darkTheme.js b/src/themes/darkTheme.js index 6461b9daf..408b12f86 100644 --- a/src/themes/darkTheme.js +++ b/src/themes/darkTheme.js @@ -16,6 +16,7 @@ export default { $primaryDarkGray: '#c1c5c7', $primaryLightGray: '#f6f6f6', $primaryRed: '#e63535', + $companyRed: '#c10000', $primaryBlack: '#c1c5c7', $primaryDarkText: '#526d91', diff --git a/src/themes/lightTheme.js b/src/themes/lightTheme.js index 8ca57296b..8d8c3d26d 100644 --- a/src/themes/lightTheme.js +++ b/src/themes/lightTheme.js @@ -16,6 +16,7 @@ export default { $primaryDarkGray: '#788187', $primaryLightGray: '#f6f6f6', $primaryRed: '#e63535', + $companyRed: '#c10000', $primaryBlack: '#3c4449', $primaryDarkText: '#788187',