Skip to content

N
new_excelso
Commit 44a3a512 authored by Trisno's avatar Trisno
Browse files
Options

tambah pemisah ribuan di shopping cart, dan tampilkan 'No data' jika data kosong di reward select

parent b7ef3356
Hide whitespace changes
Inline Side-by-side
Showing with 61 additions and 36 deletions
view/ItemShopingCart.js
View file @ 44a3a512
......@@ -2,6 +2,7 @@ import React from 'react';
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, TextInput } from 'react-native';
import { connect } from 'react-redux';
import ActionType from '../redux/globalActionType';
import NumberFormat from 'react-number-format';
class ItemShoping extends React.Component {
......@@ -36,8 +37,8 @@ class ItemShoping extends React.Component {
<Image source={{ uri: item.image }} style={{ height: 100, width: 100, borderRadius: 5, top: 5 }}></Image>
</View>
<View >
<Text style={{ fontSize: 20, margin: 5, marginRight: 10, fontFamily: 'Gotham-Black' }}>{item.name}</Text>
<Text style={{ fontSize: 15, margin: 5, marginRight: 10, fontFamily: 'Gotham-Light'}}>Rp. {item.price}</Text>
<Text style={{ fontSize: 15, margin: 5, marginRight: 10, fontFamily: 'Gotham-Black' }}>{item.name}</Text>
<NumberFormat decimalScale={0} value={item.price} renderText={value => <Text style={{ fontSize: 12, margin: 5, marginRight: 10, fontFamily: 'Gotham-Black', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
<View style={{ flexDirection: 'row', flex: 1 }}>
<View style={styles.shadowEdit}></View>
<View style={styles.shadowAdd}>
......
view/RewardSelect.js
View file @ 44a3a512
......@@ -89,30 +89,36 @@ class RewardSelect extends React.Component {
</View> */}
<ScrollView style={styles.body}>
{
this.state.rewardsList.map((item, key) => (
<TouchableOpacity key={key} onPress={() => this.handleSelect(item)}>
<View style={{ alignItems: 'center' }}>
<Card style={{ padding: 5, margin: 10 }}>
<View>
<Image source={{ uri: item.reward.title_image }}
resizeMethod="resize"
resizeMode='cover'
style={{ height: 100, width: '100%' }} />
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 10 }}>
this.state.rewardsList.length ? (
this.state.rewardsList.map((item, key) => (
<TouchableOpacity key={key} onPress={() => this.handleSelect(item)}>
<View style={{ alignItems: 'center' }}>
<Card style={{ padding: 5, margin: 10 }}>
<View>
<Text style={{textAlign:'left', fontSize: 12, fontFamily: 'Gotham-Black'}}>{item.reward.title}</Text>
<Text style={{textAlign:'left', fontSize: 12, fontFamily: 'Gotham-Light'}}>{item.reward.subtitle}</Text>
<Image source={{ uri: item.reward.title_image }}
resizeMethod="resize"
resizeMode='cover'
style={{ height: 100, width: '100%' }} />
</View>
<View>
<Text style={{textAlign:'right', fontSize: 12, fontFamily: 'Gotham-Light'}}>Expired</Text>
<Text style={{textAlign:'right', fontSize: 12, fontFamily: 'Gotham-Light'}}>{item.expire_time}</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', padding: 10 }}>
<View>
<Text style={{ textAlign: 'left', fontSize: 12, fontFamily: 'Gotham-Black' }}>{item.reward.title}</Text>
<Text style={{ textAlign: 'left', fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.reward.subtitle}</Text>
</View>
<View>
<Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light' }}>Expired</Text>
<Text style={{ textAlign: 'right', fontSize: 12, fontFamily: 'Gotham-Light' }}>{item.expire_time}</Text>
</View>
</View>
</View>
</Card>
</Card>
</View>
</TouchableOpacity>
))
) : (
<View style={{justifyContent:'center', alignItems:'center', height:100}}>
<Text style={{ textAlign: 'left', fontSize: 12, fontFamily: 'Gotham-Light' }}>No data</Text>
</View>
</TouchableOpacity>
))
)
}
{/* <TouchableOpacity>
<Text style={{ textAlign: 'right', color: '#ccb46c' }}>REDEEM E-VOUCHER HISTORY</Text>
......
view/ShoppingCart.js
View file @ 44a3a512
......@@ -10,6 +10,7 @@ import Axios from 'axios'
import ActionType from '../redux/globalActionType';
import { YellowBox } from 'react-native';
import session from '../function/session';
import NumberFormat from 'react-number-format';
YellowBox.ignoreWarnings(['VirtualizedLists should never be nested']);
......@@ -623,8 +624,8 @@ class ShoppingCart extends React.Component {
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Your Points</Text>
</View>
<View style={{ alignItems: 'flex-end' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.state.kasproBalance}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.state.kasproPoint}</Text>
<NumberFormat decimalScale={0} value={this.state.kasproBalance} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
<NumberFormat decimalScale={0} value={this.state.kasproPoint} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', borderTopWidth: 1 }}>
......@@ -633,8 +634,8 @@ class ShoppingCart extends React.Component {
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Your Points Used</Text>
</View>
<View style={{ marginTop: 5, alignItems: 'flex-end' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>- {this.state.balanceused}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>- {this.state.pointsused}</Text>
<NumberFormat decimalScale={0} value={this.state.balanceused} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>- Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
<NumberFormat decimalScale={0} value={this.state.pointsused} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>- Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>
</View>
</Card>
......@@ -650,7 +651,7 @@ class ShoppingCart extends React.Component {
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Harga</Text>
</View>
<View style={{ paddingRight: 30, paddingTop: 10, alignItems: 'flex-end' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>{this.props.order_total}</Text>
<NumberFormat decimalScale={0} value={this.props.order_total} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>
</View>
{this.props.type_pickup == true ? (
......@@ -663,12 +664,12 @@ class ShoppingCart extends React.Component {
</View>
{this.props.order_item.length ? (
<View style={{ paddingRight: 30, paddingTop: 10, alignItems: 'flex-end' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>{this.props.grabamount}</Text>
{/* <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>{this.props.grabamount}</Text> */}
<NumberFormat decimalScale={0} value={this.props.grabamount} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>
) : (<View style={{ paddingRight: 30, paddingTop: 10, alignItems: 'flex-end' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>0</Text>
<NumberFormat decimalScale={0} value={0} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>)}
</View>)}
{
......@@ -680,7 +681,7 @@ class ShoppingCart extends React.Component {
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Diskon</Text>
</View>
<View style={{ paddingRight: 30, paddingTop: 10, alignItems: 'flex-end' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>{this.props.voucher.reward.value}</Text>
<NumberFormat decimalScale={0} value={this.props.voucher.reward.value} renderText={value => <Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View>
</View>
......@@ -689,15 +690,15 @@ class ShoppingCart extends React.Component {
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View style={{ marginTop: 15, paddingLeft: 20, paddingTop: 10 }}>
<Text style={{ fontSize: 25, color: '#CFB368', fontFamily: 'Gotham-Black', }}>TOTAL</Text>
<Text style={{ fontSize: 18, color: '#CFB368', fontFamily: 'Gotham-Black', }}>TOTAL</Text>
</View>
{this.props.type_pickup == true ? (
<View style={{ marginTop: 15, paddingRight: 30, paddingTop: 10, alignItems: 'flex-end' }}>
{
this.props.value_voucher == '' ? (
<Text style={{ fontSize: 25, color: '#CFB368', fontFamily: 'Gotham-Black' }}>{this.props.order_total}</Text>
<NumberFormat decimalScale={0} value={this.props.order_total} renderText={value => <Text style={{ fontSize: 18, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
) : (
<Text style={{ fontSize: 25, color: '#CFB368', fontFamily: 'Gotham-Black' }}>{Math.max(0, this.props.order_total - this.props.voucher.reward.value)}</Text>
<NumberFormat decimalScale={0} value={Math.max(0, this.props.order_total - this.props.voucher.reward.value)} renderText={value => <Text style={{ fontSize: 18, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
)
}
</View>
......@@ -709,9 +710,26 @@ class ShoppingCart extends React.Component {
<Text style={{ fontSize: 35, color: '#ccb46c' }}>{this.props.order_total + this.state.diskon}</Text>
)} */}
{this.props.value_voucher == '' ? (
<Text style={{ fontSize: 25, color: '#CFB368', fontFamily: 'Gotham-Black' }}>{this.props.order_total + this.props.grabamount}</Text>
<>
{
this.props.order_item.length ? (
<NumberFormat decimalScale={0} value={this.props.order_total + this.props.grabamount} renderText={value => <Text style={{ fontSize: 18, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
) : (
<NumberFormat decimalScale={0} value={0} renderText={value => <Text style={{ fontSize: 18, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
)
}
</>
) : (
<Text style={{ fontSize: 25, color: '#CFB368', fontFamily: 'Gotham-Black' }}>{Math.max(0, this.props.order_total - this.props.voucher.reward.value + this.props.grabamount)}</Text>
<>
{
this.props.order_item.length ? (
<NumberFormat decimalScale={0} value={Math.max(0, this.props.order_total - this.props.voucher.reward.value + this.props.grabamount)} renderText={value => <Text style={{ fontSize: 18, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
) : (
<NumberFormat decimalScale={0} value={0} renderText={value => <Text style={{ fontSize: 18, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
)
}
</>
)}
</View>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment