From cd08f1cf07303de44619503dcb762f81ca85899b Mon Sep 17 00:00:00 2001 From: denisenricohasyim93 Date: Wed, 1 Nov 2017 23:59:03 +0700 Subject: [PATCH 1/2] Add countdown timer --- app/components/MyOrders/index.js | 1 + app/components/OrderItem/index.js | 56 ++++++++++++++++++++++------- app/containers/OrderDetail/index.js | 20 +++++++++-- app/helpers.js | 6 ++++ package.json | 1 + 5 files changed, 69 insertions(+), 15 deletions(-) diff --git a/app/components/MyOrders/index.js b/app/components/MyOrders/index.js index 037fdf39..3a73249b 100644 --- a/app/components/MyOrders/index.js +++ b/app/components/MyOrders/index.js @@ -4,6 +4,7 @@ import { View, ScrollView, Text, Image } from 'react-native'; import { Container, Header, Tab, Tabs, TabHeading, Icon, List } from 'native-base'; import { Actions } from 'react-native-router-flux'; import { connect } from 'react-redux'; +import CountdownCircle from 'react-native-countdown-circle'; import { createStructuredSelector } from 'reselect'; import PropTypes from 'prop-types'; diff --git a/app/components/OrderItem/index.js b/app/components/OrderItem/index.js index 97aaba18..2997cce7 100644 --- a/app/components/OrderItem/index.js +++ b/app/components/OrderItem/index.js @@ -2,13 +2,15 @@ import 'intl'; import 'intl/locale-data/jsonp/id'; import React, { Component } from 'react'; import { Text, Grid, Col, Button, Card, CardItem } from 'native-base'; +import Moment from 'moment'; import PropTypes from 'prop-types'; import { TouchableOpacity, View } from 'react-native'; import { Actions } from 'react-native-router-flux'; import Icon from 'react-native-vector-icons/Ionicons'; +import CountdownCircle from 'react-native-countdown-circle'; import styles from './styles'; import ListItem from '../ListItem'; -import { formatDate, transactionStatus, localeDate } from '../../helpers'; +import { formatDate, transactionStatus, localeDate, localeDateConvertToSecond } from '../../helpers'; // import { PRIMARYCOLOR } from '../../constants'; let amount = 0; export default class OrderItem extends Component { @@ -112,23 +114,51 @@ export default class OrderItem extends Component { {localeDate(order.created_at)} + { ((localeDateConvertToSecond(order.payment.expired_at) - localeDateConvertToSecond(Moment())) > 0) ? + console.log('Elapsed!')} + /> + : + null + } - - {status ? ( - - - {this.state.status.toUpperCase()} - - {this.ticketTypes()} - - ) : ( - - )} - + { ((localeDateConvertToSecond(order.payment.expired_at) - localeDateConvertToSecond(Moment())) <= 0) ? + ( + {status ? ( + + + EXPIRED + + {this.ticketTypes()} + + ) : ( + + )} + ) + : + ( + {status ? ( + + + {this.state.status.toUpperCase()} + + {this.ticketTypes()} + + ) : ( + + )} + ) + } diff --git a/app/containers/OrderDetail/index.js b/app/containers/OrderDetail/index.js index 1d657a3f..ef24c79e 100644 --- a/app/containers/OrderDetail/index.js +++ b/app/containers/OrderDetail/index.js @@ -31,6 +31,7 @@ import { import { connect } from 'react-redux'; import { createStructuredSelector } from 'reselect'; import { Actions } from 'react-native-router-flux'; +import CountdownCircle from 'react-native-countdown-circle'; import HeaderPoint from '../../components/Header'; import Icon from 'react-native-vector-icons/Ionicons'; import ImagePicker from 'react-native-image-crop-picker'; @@ -41,13 +42,14 @@ import * as actions from './actions'; import * as selectors from './selectors'; import TicketType from '../../components/TicketType'; import TicketDetail from '../../components/TicketDetail'; -import { localeDateWithoutHour, transactionStatus, getProfileData } from '../../helpers'; +import { localeDateWithoutHour, transactionStatus, getProfileData, localeDateConvertToSecond } from '../../helpers'; const Back = require('../../../assets/images/back.png'); const logo = require('../../../assets/images/bankmandiri.png'); const { width, height } = Dimensions.get('window'); const noImage = require('./../../../assets/images/noimage.png'); + const url = 'https://api.devsummit.io/static/Ref_Bank.PDF'; let total = 0; @@ -61,7 +63,7 @@ class OrderDetail extends Component { color: '', modalVisible: false, scalesPageToFit: true, - userId: '', + userId: '' }; } @@ -221,6 +223,7 @@ class OrderDetail extends Component { const { payment, verification } = included || {}; const { status } = this.state; const { isConfirming, isUpdating } = this.props; + console.log('landing here orderdetail', this.props.order); if (isUpdating || isConfirming || Object.keys(order).length === 0) { return ( @@ -257,6 +260,19 @@ class OrderDetail extends Component { {this.state.status === 'capture' ? 'PAID' : this.state.status.toUpperCase()} )} + { ((localeDateConvertToSecond(order.included.payment.expired_at) - localeDateConvertToSecond(Moment())) > 0) ? + console.log('Elapsed!')} + /> + : + null + } {strings.order.orderNumber} diff --git a/app/helpers.js b/app/helpers.js index c678c32d..a2c64793 100644 --- a/app/helpers.js +++ b/app/helpers.js @@ -86,6 +86,12 @@ export const localeDate = (date) => { .format('YYYY-MM-DD HH:mm:ss'); }; +export const localeDateConvertToSecond = (date) => { + return Moment.utc(date) + .local() + .diff(Moment().startOf('day'), 'seconds'); +}; + export const localeDateWithoutHour = (date) => { return Moment.utc(date) .locale([ 'en', 'id' ]) diff --git a/package.json b/package.json index be920c86..b34c0f0a 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "react-native-busy-indicator": "^1.1.0", "react-native-code-push": "^5.1.0-beta", "react-native-collapsible": "^0.9.0", + "react-native-countdown-circle": "^2.0.0", "react-native-document-picker": "^2.0.0", "react-native-facebook-account-kit": "^0.7.0", "react-native-fcm": "^9.3.0", From 4e41cec42d2a36d7e03bd2e288f9969bfa14244f Mon Sep 17 00:00:00 2001 From: denisenricohasyim93 Date: Thu, 2 Nov 2017 00:21:05 +0700 Subject: [PATCH 2/2] fix something --- app/containers/OrderDetail/index.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/app/containers/OrderDetail/index.js b/app/containers/OrderDetail/index.js index ef24c79e..df29be58 100644 --- a/app/containers/OrderDetail/index.js +++ b/app/containers/OrderDetail/index.js @@ -253,7 +253,13 @@ class OrderDetail extends Component { save - ) : ( + ) : (((localeDateConvertToSecond(order.included.payment.expired_at) - localeDateConvertToSecond(Moment())) < 0) ? + + EXPIRED + + :