Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Coupons page #1

Merged
merged 13 commits into from
Oct 30, 2017
Merged

Coupons page #1

Changes from 1 commit
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
d64d562
CouponRows
giuliaFerretti Oct 24, 2017
1d2593a
FlatList for CouponRows
giuliaFerretti Oct 24, 2017
a059c5b
Add CouponHeader in Coupons
giuliaFerretti Oct 25, 2017
3cad58d
TabBar for coupons
Takeno Oct 26, 2017
a2d9505
Move coupon header logic
giuliaFerretti Oct 26, 2017
fb78a6a
Create category icon map
giuliaFerretti Oct 26, 2017
fc5d0d6
Create category icon map
giuliaFerretti Oct 26, 2017
9265c8e
Fix constant name
giuliaFerretti Oct 29, 2017
b9f84da
Create coupon page with used flag
giuliaFerretti Oct 29, 2017
e75f53b
CouponRow to Coupon page
giuliaFerretti Oct 29, 2017
fb997fd
Add news in coupon page
giuliaFerretti Oct 29, 2017
66164a7
Linked Coupons to store
Takeno Oct 29, 2017
4ec0785
Coupons fixes + cancel created coupon
Takeno Oct 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add news in coupon page
  • Loading branch information
@giuliaFerretti @Takeno
giuliaFerretti authored and Takeno committed Oct 30, 2017
commit fb997fd7fe84909097d579ba2031d627e98e73ce
152 changes: 126 additions & 26 deletions src/screen/Coupon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React, {Component} from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
import {View, ScrollView, Text, Image, StyleSheet} from 'react-native';
import moment from 'moment';
import Button from '../component/Button';
import * as Constants from '../common/constants';
import Categories from '../common/categories';

const DATA = {
used: new Date('2017-03-12T23:12:00'),
//used: new Date('2017-03-12T23:12:00'),
category: 'Cinema',
description: 'Abbonamento / Card',
merchant: {
Expand All @@ -18,28 +18,100 @@ const DATA = {
};

export default class Coupon extends Component {
render() {
static navigationOptions = {
title: 'Dettagli del buono',
};

_renderMerchant() {
if (!DATA.used) {
return null;
}

return (
<View style={styles.headerContainer}>
<Text style={styles.headerTitle}>{DATA.merchant.name}</Text>
<View style={styles.headerSubtitle}>
<Image
style={styles.headerIcon}
source={require('../res/icon-marker-white.png')}
/>
<Text style={styles.headerText}>{DATA.merchant.place}</Text>
</View>
</View>
);
}

_renderUsedTitle() {
if (!DATA.used) {
return null;
}

return (
<Text style={styles.couponUsedText}>
Buono utilizzato il{' '}
{moment(DATA.used).format('DD MMMM Y [ alle ore ] HH:mm')}
</Text>
);
}

_renderBottom() {
if (DATA.used) {
return (
<View style={styles.buttonContainer}>
<Button
icon={require('../res/icon-marker-white.png')}
text="DETTAGLI DEL NEGOZIO"
/>
</View>
);
}

return (
<View style={{flex: 1}}>
<View style={styles.headerContainer}>
<Text style={styles.headerTitle}>{DATA.merchant.name}</Text>
<View style={styles.headerSubtitle}>
//View per qrcode e barcode
<View>
<View>
<Text>Qui il QRcode</Text>
</View>
<View style={styles.buttonContainer}>
<Button
icon={require('../res/icon-marker-white.png')}
text="TROVA UN NEGOZIO"
/>
</View>
<Text style={styles.disclaimer}>
Questo buono non &egrave; cedibile e appartiene a te.
</Text>
<View style={styles.rowContainer}>
<View style={styles.iconContainer}>
<Image
style={styles.headerIcon}
source={require('../res/icon-marker-white.png')}
style={styles.icon}
source={Categories[DATA.category].icon}
/>
<Text style={styles.headerText}>
{DATA.merchant.place}
</Text>
</View>
<Text style={styles.disclaimerIdentity}>Mario Rossi</Text>
<Text style={styles.textLight}>Intestatario</Text>
</View>
<Text style={styles.disclaimer}>
Puoi annullare in ogni momento questo buono e riversare
l'intero suo valore nel tuo credito
</Text>
<View style={styles.buttonContainer}>
<Button
icon={require('../res/icon-marker-white.png')}
text="ANNULLA QUESTO BUONO"
style={styles.buttonDeleteContainer}
/>
</View>
</View>
);
}

render() {
return (
<ScrollView style={{flex: 1}}>
{this._renderMerchant()}
<View style={{flex: 1}}>
<Text style={styles.couponUsedText}>
Buono utilizzato il{' '}
{moment(DATA.used).format(
'DD MMMM Y [ alle ore ] HH:mm',
)}
</Text>
{this._renderUsedTitle()}
<View style={styles.rowContainer}>
<View style={styles.iconContainer}>
<Image
Expand Down Expand Up @@ -69,7 +141,13 @@ export default class Coupon extends Component {
source={require('../res/icon-euro.png')}
/>
</View>
<Text style={styles.valueText}>{DATA.price}</Text>
<Text
style={[
styles.valueText,
DATA.used ? styles.usedText : null,
]}>
{DATA.price}
</Text>
<Text style={styles.textLight}>Valore</Text>
</View>
<View style={styles.rowContainer}>
Expand All @@ -83,13 +161,8 @@ export default class Coupon extends Component {
<Text style={styles.textLight}>Codice</Text>
</View>
</View>
<View style={styles.buttonContainer}>
<Button
icon={require('../res/icon-marker-white.png')}
text="DETTAGLI DEL NEGOZIO"
/>
</View>
</View>
{this._renderBottom()}
</ScrollView>
);
}
}
Expand Down Expand Up @@ -152,22 +225,28 @@ const styles = StyleSheet.create({
fontFamily: Constants.TITILLIUM_REGULAR,
fontSize: 16,
flex: 1,
color: Constants.ICON_GREY,
},
productText: {
fontFamily: Constants.TITILLIUM_REGULAR,
fontSize: 16,
flex: 1,
color: Constants.ICON_GREY,
},
valueText: {
fontFamily: Constants.TITILLIUM_BOLD,
fontSize: 24,
flex: 1,
color: Constants.ICON_GREY,
},
usedText: {
textDecorationLine: 'line-through',
},
codeText: {
fontFamily: Constants.TITILLIUM_BOLD,
fontSize: 24,
flex: 1,
color: Constants.ICON_GREY,
},
textLight: {
fontFamily: Constants.TITILLIUM_REGULAR,
Expand All @@ -179,4 +258,25 @@ const styles = StyleSheet.create({
paddingHorizontal: 20,
paddingVertical: 17,
},
buttonDeleteContainer: {
backgroundColor: Constants.RED,
},
disclaimer: {
fontFamily: Constants.TITILLIUM_REGULAR,
fontSize: 14,
color: Constants.LIGHT_GREY,
paddingLeft: 24,
paddingRight: 21,
},
disclaimerIdentity: {
color: Constants.ICON_GREY,
fontFamily: Constants.TITILLIUM_BOLD,
fontSize: 16,
flex: 1,
},
// disclaimerMinor: {
// fontFamily: Constants.TITILLIUM_REGULAR,
// fontSize: 12,
// color: Constants.LIGHT_GREY,
// },
});