Skip to content

C
clone_excelso
Commit 072ca41a authored by Trisno's avatar Trisno
Browse files
Options

update design shopping cart

parent 433a1919
Show whitespace changes
Inline Side-by-side
Showing with 66 additions and 52 deletions
view/ShoppingCart.js
View file @ 072ca41a
......@@ -421,10 +421,10 @@ class ShoppingCart extends React.Component {
<Text style={{ textAlign: 'center', color: '#fff', fontWeight: 'bold' }}>{i18n.t('pickup')}</Text>
</TouchableOpacity> */}
<TouchableOpacity style={styles.buttonDelivery} onPress={() => this.checkChangeTrans('delivery')}>
<Text style={{ textAlign: 'center', color: '#354175', fontWeight: 'bold', fontFamily: 'Gotham-Black' }}>DELIVERY</Text>
<Text style={{ textAlign: 'center', color: '#354175', fontFamily: 'Gotham-Black' }}>DELIVERY</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonPickup} onPress={() => this.checkChangeTrans('pickup')}>
<Text style={{ textAlign: 'center', color: '#fff', fontWeight: 'bold', fontFamily: 'Gotham-Black' }}>PICKUP</Text>
<Text style={{ textAlign: 'center', color: '#fff', fontFamily: 'Gotham-Black' }}>PICKUP</Text>
</TouchableOpacity>
</View>
<View style={{ alignItems: 'center' }}>
......@@ -432,21 +432,21 @@ class ShoppingCart extends React.Component {
this.props.type_pickup == true ? (
<Card style={{ margin: 5, padding: 10 }}>
<Text style={{ textAlign: 'center', fontFamily: 'Gotham-Light' }}> Ambil pesanan kamu di</Text>
<Text style={{ textAlign: 'center', fontSize: 12, top: 5, fontWeight: 'bold', fontFamily: 'Gotham-Black' }}>Excelso {this.props.name_outlet}</Text>
<Text style={{ textAlign: 'center', fontFamily: 'Gotham-Black', fontSize: 12 }}>YOU WILL PICKUP YOUR ORDER AT</Text>
<Text style={{ textAlign: 'center', fontSize: 12, top: 5, fontFamily: 'Gotham-Light' }}>Excelso {this.props.name_outlet}</Text>
</Card>
) : (
<Card style={{ margin: 5, padding: 10 }}>
<Text style={{ textAlign: 'center' }}> Pesanan kamu dikirim ke</Text>
<Text style={{ textAlign: 'center' }}>{this.props.address}</Text>
<Text style={{ textAlign: 'center', fontFamily: 'Gotham-Black', fontSize: 12 }}>OUR DRIVER WILL DELIVER YOU ORDER TO</Text>
<Text style={{ textAlign: 'center', fontSize: 12, top: 5, fontFamily: 'Gotham-Light' }}>{this.props.address}</Text>
</Card>
)
}
</View>
<View style={styles.header}>
<Text style={{ textAlign: 'center', fontSize: 15 }}>YOUR ORDER(S)</Text>
<Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black' }}>YOUR ORDER(S)</Text>
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<Text style={{ textAlign: 'center', fontSize: 15, color: '#ccb46c' }}>+ ADD MORE</Text>
<Text style={{ textAlign: 'center', fontSize: 12, color: '#CFB368', fontFamily: 'Gotham-Light' }}>+ ADD MORE</Text>
</TouchableOpacity>
</View>
<View style={styles.order}>
......@@ -467,16 +467,16 @@ class ShoppingCart extends React.Component {
{
this.props.value_voucher == '' ? (
<TouchableOpacity onPress={() => this.props.navigation.navigate('Reward Select')}>
<Text style={{ color: '#ccb46c' }}>+ ADD VOUCHER</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: '#CFB368' }}>+ ADD VOUCHER</Text>
</TouchableOpacity>
) : (
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View>
<Text style={{ fontWeight: 'bold' }}>{this.props.voucher.reward.title}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>{this.props.voucher.reward.title}</Text>
</View>
<View>
<TouchableOpacity onPress={() => this.handleChangeVoucher()}>
<Text style={{ color: '#ccb46c' }}>Change Voucher</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: '#CFB368' }}>Change Voucher</Text>
</TouchableOpacity>
</View>
</View>
......@@ -484,7 +484,7 @@ class ShoppingCart extends React.Component {
}
</View>
<View style={styles.payment}>
<Text>PAYMENT METHODS</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>PAYMENT METHODS</Text>
</View>
<View style={{ alignItems: 'center' }}>
......@@ -494,7 +494,7 @@ class ShoppingCart extends React.Component {
<Card style={{ margin: 5, padding: 10, backgroundColor: 'gray' }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View>
<Text>EXCELSO BALANCE</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>EXCELSO BALANCE</Text>
</View>
<View style={{ paddingRight: 10 }}>
<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />
......@@ -508,7 +508,7 @@ class ShoppingCart extends React.Component {
<Card style={{ margin: 5, padding: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View>
<Text>EXCELSO BALANCE</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>EXCELSO BALANCE</Text>
</View>
<View style={{ paddingRight: 10 }}>
<CheckBox
......@@ -532,7 +532,7 @@ class ShoppingCart extends React.Component {
<Card style={{ margin: 5, padding: 10, backgroundColor: 'gray' }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View>
<Text>EXCELSO POINTS</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>EXCELSO POINTS</Text>
</View>
<View style={{ paddingRight: 10 }}>
<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />
......@@ -547,7 +547,7 @@ class ShoppingCart extends React.Component {
<Card style={{ margin: 5, padding: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View>
<Text>EXCELSO POINTS</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>EXCELSO POINTS</Text>
</View>
<View style={{ paddingRight: 10 }}>
<CheckBox
......@@ -574,7 +574,7 @@ class ShoppingCart extends React.Component {
<Card style={{ margin: 5, padding: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View>
<Text>EXCELSO BALANCE + POINTS</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>EXCELSO BALANCE + POINTS</Text>
</View>
<View style={{ paddingRight: 10 }}>
<CheckBox
......@@ -593,7 +593,7 @@ class ShoppingCart extends React.Component {
<Card style={{ margin: 5, padding: 10, backgroundColor: 'gray' }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
<View>
<Text>EXCELSO BALANCE + POINTS</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>EXCELSO BALANCE + POINTS</Text>
</View>
<View style={{ paddingRight: 10 }}>
<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />
......@@ -608,38 +608,38 @@ class ShoppingCart extends React.Component {
<Card style={{ margin: 5, padding: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 5 }}>
<View>
<Text>Your Balance</Text>
<Text>Your Points</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Your Balance</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Your Points</Text>
</View>
<View style={{ paddingRight: 30, alignItems: 'flex-end' }}>
<Text>{this.state.kasproBalance}</Text>
<Text>{this.state.kasproPoint}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.state.kasproBalance}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>{this.state.kasproPoint}</Text>
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', borderTopWidth: 1 }}>
<View style={{ marginTop: 5 }}>
<Text>Your Balance Used</Text>
<Text>Your Points Used</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Your Balance Used</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>Your Points Used</Text>
</View>
<View style={{ paddingRight: 30, marginTop: 5, alignItems: 'flex-end' }}>
<Text>- {this.state.balanceused}</Text>
<Text>- {this.state.pointsused}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>- {this.state.balanceused}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light' }}>- {this.state.pointsused}</Text>
</View>
</View>
</Card>
</View>
<View style={styles.paymentDetails}>
<Text>PAYMENT DETAILS</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black' }}>PAYMENT DETAILS</Text>
</View>
<View style={{ margin: 10 }}>
{/* <Text style={{ paddingLeft: 20, paddingTop: 15, color: 'gray' }}>Detail Pembayaran</Text> */}
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View>
<Text style={{ paddingLeft: 20, paddingTop: 15, color: 'gray' }}>Harga</Text>
<View style={{ paddingLeft: 20, paddingTop: 15, }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Harga</Text>
</View>
<View style={{ paddingRight: 30, paddingTop: 10, alignItems: 'flex-end' }}>
<Text style={{ color: 'gray' }}>{this.props.order_total}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>{this.props.order_total}</Text>
</View>
</View>
{this.props.type_pickup == true ? (
......@@ -647,31 +647,31 @@ class ShoppingCart extends React.Component {
) : (
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View>
<Text style={{ paddingLeft: 20, paddingTop: 10, color: 'gray' }}>Ongkos Kirim</Text>
<View style={{ paddingLeft: 20, paddingTop: 10, }} >
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Ongkos Kirim</Text>
</View>
{this.props.order_item.length ? (
<View style={{ paddingRight: 30, paddingTop: 10, alignItems: 'flex-end' }}>
<Text style={{ color: 'gray' }}>{this.props.grabamount}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>{this.props.grabamount}</Text>
</View>
) : (<View style={{ paddingRight: 30, paddingTop: 10, alignItems: 'flex-end' }}>
<Text style={{ color: 'gray' }}>0</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>0</Text>
</View>)}
</View>)}
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View>
<Text style={{ paddingLeft: 20, paddingTop: 10, color: 'gray' }}>Diskon</Text>
<View style={{ paddingLeft: 20, paddingTop: 10, }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Diskon</Text>
</View>
{
this.props.value_voucher == '' ? (
<View style={{ paddingRight: 30, paddingTop: 10, alignItems: 'flex-end' }}>
<Text style={{ color: 'gray' }}>{this.state.diskon}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>{this.state.diskon}</Text>
</View>
) : (
<View style={{ paddingRight: 30, paddingTop: 10, alignItems: 'flex-end' }}>
<Text style={{ color: 'gray' }}>{this.props.voucher.reward.value}</Text>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>{this.props.voucher.reward.value}</Text>
</View>
)
}
......@@ -679,15 +679,15 @@ class ShoppingCart extends React.Component {
</View>
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View style={{ marginTop: 15, paddingLeft: 20, paddingTop: 10 }}>
<Text style={{ fontSize: 35, color: '#ccb46c' }}>Total</Text>
<Text style={{ fontSize: 25, 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: 35, color: '#ccb46c' }}>{this.props.order_total}</Text>
<Text style={{ fontSize: 25, color: '#CFB368', fontFamily: 'Gotham-Black' }}>{this.props.order_total}</Text>
) : (
<Text style={{ fontSize: 35, color: '#ccb46c' }}>{Math.max(0, this.props.order_total - this.props.voucher.reward.value)}</Text>
<Text style={{ fontSize: 25, color: '#CFB368', fontFamily: 'Gotham-Black' }}>{Math.max(0, this.props.order_total - this.props.voucher.reward.value)}</Text>
)
}
</View>
......@@ -699,9 +699,9 @@ 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: 35, color: '#ccb46c' }}>{this.props.order_total + this.props.grabamount}</Text>
<Text style={{ fontSize: 25, color: '#CFB368', fontFamily: 'Gotham-Black' }}>{this.props.order_total + this.props.grabamount}</Text>
) : (
<Text style={{ fontSize: 35, color: '#ccb46c' }}>{Math.max(0, this.props.order_total - this.props.voucher.reward.value + this.props.grabamount)}</Text>
<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>
)}
</View>
......@@ -711,19 +711,24 @@ class ShoppingCart extends React.Component {
{this.props.type_pickup == true ? (
null
) : (
<View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View>
<Text style={{ paddingLeft: 20, paddingTop: 10, color: 'gray' }}>Tujuan</Text>
<View style={{ flex: 1, flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
<View style={{ paddingLeft: 20, paddingTop: 10, flex: 0.5 }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: 'gray' }}>Tujuan</Text>
</View>
<View style={{ paddingRight: 30, paddingTop: 10, alignItems: 'flex-end' }}>
<Text style={{ color: '#ccb46c' }}>{this.props.address}</Text>
<View style={{ paddingRight: 30, paddingTop: 10, flex: 0.5, alignItems: 'flex-end' }}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Light', color: '#CFB368', textAlign: 'right' }}>{this.props.address}</Text>
</View>
</View>
)}
<View style={{ margin: 20, }}>
<Button title='Checkout' color='#ccb46c' onPress={() => this.checkOut()} />
{/* <View style={{ margin: 20, }}>
{/* <Button title='Checkout' color='#CFB368' onPress={() => this.checkOut()} /> */}
{/* </View> */}
<TouchableOpacity onPress={() => this.checkOut()}>
<View style={styles.button}>
<Text style={{ color: 'white', fontSize: 22, fontFamily: 'Gotham-Black' }}>CHECKOUT</Text>
</View>
</TouchableOpacity>
</View>
</ScrollView>
)
......@@ -780,6 +785,15 @@ const styles = StyleSheet.create({
borderBottomWidth: 1,
// backgroundColor: 'lightblue'
},
button: {
backgroundColor: '#CFB368',
marginTop: 25,
marginHorizontal: 30,
borderRadius: 10,
paddingVertical: 5,
alignItems: 'center',
justifyContent: 'center'
},
buttonDelivery: {
marginTop: 10,
paddingTop: 15,
......
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