API tools faq
paste
Guest User

Untitled

a guest
Jul 30th, 2018
48
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.72 KB | None | 0 0
raw download clone embed print report
  1. import React,{ Component } from 'react';
  2. import OfflineNotice from './OfflineNotice';
  3. import base from '../firebaseConfig';
  4. import axios from 'axios';
  5. import { SafeAreaView, Alert, View, Text, StyleSheet, StatusBar, AsyncStorage } from 'react-native';
  6. import { Container, Content, Card, CardItem, Header, Thumbnail, Item, Left, Right, Body, Button, Icon, Input, Image, List, ListItem, Tab ,Tabs, TabHeading} from 'native-base';
  7. import { ConfirmDialog } from 'react-native-simple-dialogs';
  8. import FastImage from 'react-native-fast-image';
  9. import {Collapse,CollapseHeader, CollapseBody, AccordionList} from 'accordion-collapse-react-native';
  10.  
  11. var totalItems = 0;
  12. var foo = null;
  13. export default class Orders extends Component{
  14. constructor(props) {
  15. super(props);
  16.  
  17. this.state = {
  18. orders : [],
  19. };
  20.  
  21.  
  22. AsyncStorage.getItem("userKey").then((value) => {
  23. this.setState({"userKey": value});
  24.  
  25. base.bindToState('liquorOrders', {
  26. context: this,
  27. state: 'orders',
  28. asArray: true,
  29. queries: {
  30. orderByChild: 'userid',
  31. equalTo: this.state.userKey,
  32. }
  33. })
  34.  
  35.  
  36. }).done();
  37.  
  38. this._body = this._body.bind(this);
  39.  
  40. }
  41.  
  42. _head(order){
  43. return(
  44. <Card style={{borderColor:'transparent',backgroundColor:'#fff',paddingLeft:10}}>
  45. <Text style={{ fontSize: 18, fontFamily: 'EncodeSansCondensed-Bold',color: '#222',paddingTop:10,paddingBottom:10}}>{order.date}</Text>
  46. </Card>
  47. );
  48. }
  49.  
  50. _body(order){
  51. return (
  52.  
  53. <Tabs tabBarPosition='top' tabBarUnderlineStyle={styles.tabBarDesign} style={{elevation:1}}>
  54.  
  55. <Tab heading={ <TabHeading style={styles.tabBackground}><Text style={{textAlign:'center',color:'#fff',fontFamily:'EncodeSansCondensed-Bold',fontSize:18}}>SUMMARY</Text></TabHeading>} style={{textAlign:'center'}}>
  56.  
  57. <Card key={order.key} style={{flex: 0,width:'95%',alignSelf: 'flex-start',marginLeft:'2.5%',marginTop:'2.5%',marginBottom:15}}>
  58.  
  59.  
  60. <List>
  61.  
  62. <ListItem itemDivider>
  63. <Left>
  64. <Icon type='FontAwesome' name='clock-o' style={{color:'#000',fontSize:20}} />
  65. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Bold',color: '#222',paddingLeft:6}}>Delivery Slot</Text>
  66. </Left>
  67. </ListItem>
  68. <ListItem style={{borderColor:'transparent',borderWidth:0}}>
  69. <Left>
  70. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Medium',color: '#444' }}>{order.date}</Text>
  71. </Left>
  72. </ListItem>
  73. <ListItem style={{borderColor:'transparent',borderWidth:0}}>
  74. <Left>
  75. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Medium',color: '#444' }}>{order.deliveryTiming}</Text>
  76. </Left>
  77. </ListItem>
  78. <ListItem style={{borderColor:'transparent',borderWidth:0}}>
  79. <Left>
  80. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Medium',color: '#444' }}>{order.status}</Text>
  81. </Left>
  82. </ListItem>
  83. <ListItem itemDivider>
  84. <Icon type='FontAwesome' name='home' style={{color:'#000',fontSize:20}} />
  85. <Text style={{ fontSize: 16, fontFamily: 'EncodeSansCondensed-Bold',color : '#222',paddingLeft:6 }}>Address</Text>
  86. </ListItem>
  87. <ListItem style={{borderColor:'transparent',borderWidth:0}}>
  88. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Medium',color: '#444' }}>{order.name}</Text>
  89. </ListItem>
  90. <ListItem style={{borderColor:'transparent',borderWidth:0}}>
  91. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Medium',color: '#444' }}>{ order.address.appartment + ',' + order.address.landmark + ',' + order.address.street + ',' + order.address.pincode }</Text>
  92. </ListItem>
  93. <ListItem style={{borderColor:'transparent',borderWidth:0}}>
  94. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Medium',color: '#444' }}>{ order.mobile }</Text>
  95. </ListItem>
  96.  
  97. <ListItem itemDivider>
  98. <Icon type='FontAwesome' name='bank' style={{color:'#000',fontSize:14}} />
  99. <Text style={{ fontSize: 16, fontFamily: 'EncodeSansCondensed-Bold',color : '#222',paddingLeft:6 }}>Payment Details</Text>
  100. </ListItem>
  101.  
  102.  
  103. <View style={{flex: 1, flexDirection: 'row'}}>
  104. <ListItem style={{borderColor:'transparent',borderWidth:0}}>
  105. <View style={{width: '50%'}}>
  106. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Medium',color: '#444'}}>Order No</Text>
  107. </View>
  108.  
  109.  
  110. <View style={{width: '50%'}}>
  111. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Medium',color: '#444',textAlign:'right'}}>{(order.key).substring(14, )}</Text>
  112. </View>
  113. </ListItem>
  114. </View>
  115.  
  116.  
  117.  
  118. <View style={{flex: 1, flexDirection: 'row'}}>
  119. <ListItem style={{borderColor:'transparent',borderWidth:0}}>
  120.  
  121. <View style={{width: '50%'}}>
  122. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Medium',color: '#444' }}>Payment Option</Text>
  123. </View>
  124. <View style={{width: '50%'}}>
  125. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Medium',color: '#444',textAlign:'right'}}>{order.paymentMode }</Text>
  126. </View>
  127.  
  128. </ListItem>
  129. </View>
  130.  
  131.  
  132.  
  133.  
  134. <View style={{flex: 1, flexDirection: 'row'}}>
  135. <ListItem style={{borderColor:'transparent',borderWidth:0}}>
  136.  
  137. <View style={{width: '50%'}}>
  138. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Medium',color: '#444'}}>Sub Total</Text>
  139. </View>
  140. <View style={{width: '50%'}}>
  141. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Bold',color: '#444',textAlign:'right' }}>
  142. <Icon type='FontAwesome' name='rupee' style={{color:'#000',fontSize:15}} />
  143. { ' ' + order.amount }</Text>
  144. </View>
  145.  
  146. </ListItem>
  147. </View>
  148.  
  149.  
  150. <View style={{flex: 1, flexDirection: 'row'}}>
  151. <ListItem style={{borderColor:'transparent',borderWidth:0}}>
  152.  
  153. <View style={{width: '50%'}}>
  154. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Medium',color: '#444'}}>Delivery Charges</Text>
  155. </View>
  156. <View style={{width: '50%'}}>
  157. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Bold',color: '#444',textAlign:'right' }}>
  158. { ' FREE '}</Text>
  159. </View>
  160.  
  161. </ListItem>
  162. </View>
  163.  
  164. <View style={{flex: 1, flexDirection: 'row'}}>
  165. <ListItem style={{borderColor:'transparent',borderWidth:0}}>
  166.  
  167. <View style={{width: '50%'}}>
  168. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Bold',color: '#444' }}>Total</Text>
  169. </View>
  170. <View style={{width: '50%'}}>
  171. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Bold',color: '#444',textAlign:'right' }}>
  172. <Icon type='FontAwesome' name='rupee' style={{color:'#000',fontSize:15}} />
  173. { ' ' + order.amount }</Text>
  174. </View>
  175.  
  176. </ListItem>
  177. </View>
  178.  
  179.  
  180.  
  181. <View style={{flex: 1, flexDirection: 'row',justifyContent: 'center'}}>
  182. {
  183. (order.status === 'On The Way') ?
  184.  
  185. <View style={{width: '50%',backgroundColor: 'green',borderWidth:1,borderColor:'green',justifyContent: 'center'}}>
  186. <Button transparent onPress={ () => {
  187. this.props.navigation.navigate('trackOrder',{ mobile : order.deliveryPerson });
  188. //this.props.navigation.replace('trackOrder','','');
  189.  
  190. } } style={{textAlign:'center',justifyContent: 'center'}}>
  191. <Text style={{ fontSize: 18, fontFamily: 'EncodeSansCondensed-Bold',color: '#fff',textAlign:'center',padding:10, marginLeft:'20%',marginRight:'15%'}}>Track Order</Text>
  192. </Button>
  193. </View> :
  194.  
  195. <View style={{width: '50%',backgroundColor: '#eee',borderWidth:1,borderColor:'#eee',justifyContent: 'center'}}>
  196. <Button transparent style={{textAlign:'center',justifyContent: 'center'}}>
  197. <Text style={{ fontSize: 18, fontFamily: 'EncodeSansCondensed-Bold',color: '#fff',textAlign:'center',padding:10, marginLeft:'20%',marginRight:'15%'}}>Track Order</Text>
  198. </Button>
  199. </View>
  200.  
  201. }
  202. <View style={{width: '50%',backgroundColor: '#fff',borderWidth:1,borderColor:'#fff',justifyContent: 'center'}}>
  203. <Button onPress={ () => {
  204.  
  205. Alert.alert(
  206. 'Cancel Order',
  207. 'Are you sure ? ',
  208. [
  209. {text: 'NO', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
  210. {text: 'YES', onPress: () => {
  211.  
  212. base.remove('liquorOrders/'+order.key).then( data => {
  213.  
  214. axios.get('http://smst.inroys.in/vendorsms/pushsms.aspx?user=liquor_cart&password=jaipur4321&msisdn=91' + order.mobile +'&sid=LQRCRT&msg=Hello '+ order.name +', you Order No.'+ order.key.substring(14,) + ' has been cancelled.'+'&fl=0&gwid=2')
  215. .then(function (response) {
  216. alert('Order Cancelled !')
  217. })
  218. .catch(function (error) {
  219. console.log(error);
  220. });
  221.  
  222. }).catch( err => {
  223. console.log('Error Occured')
  224. })
  225. }},
  226. ],
  227. { cancelable: false }
  228. )
  229.  
  230. }} transparent style={{justifyContent: 'center'}}>
  231. <Text style={{ fontSize: 18, fontFamily: 'EncodeSansCondensed-Bold',color: 'red',textAlign:'center',padding:10,borderLeftWidth:0,margin:'15% 15%'}}>Cancel Order</Text>
  232. </Button>
  233. </View>
  234. </View>
  235.  
  236. </List>
  237. </Card>
  238.  
  239.  
  240. </Tab>
  241.  
  242.  
  243. <Tab heading={ <TabHeading style={styles.tabBackground}><Text style={{textAlign:'center',color:'#fff',fontFamily:'EncodeSansCondensed-Bold',fontSize:18}}>ITEMS</Text></TabHeading>} style={{textAlign:'center'}}>
  244.  
  245. <Content>
  246.  
  247.  
  248. <List>
  249.  
  250.  
  251. <View style={{flex: 1, flexDirection: 'row'}}>
  252. <ListItem itemDivider style={{borderColor:'transparent',borderWidth:0}}>
  253. <View style={{width: '100%'}}>
  254. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Bold',color: '#444',textAlign:'center' }}>{order.totalItems + ' ITEMS ' + ' ' + ':' + ' ' }<Icon type='FontAwesome' name='rupee' style={{color:'#000',fontSize:15}} />
  255. {' '+'AMOUNT' +' : ' + order.amount }
  256. </Text>
  257. </View>
  258. </ListItem>
  259. </View>
  260. {
  261. _.map(order.item ,data => {
  262.  
  263. totalItems = parseInt(totalItems) + parseInt(data.orderQty)
  264.  
  265. return(
  266.  
  267. <View>
  268. <Card key={data.key}>
  269.  
  270. <ListItem>
  271.  
  272. <FastImage
  273. style={{
  274. flex: 0,
  275. width: 70,
  276. height: 105,
  277. justifyContent: 'center',
  278. }}
  279. source={{
  280. uri: data.thumb,
  281. priority: FastImage.priority.normal,
  282. }}
  283. resizeMode={FastImage.resizeMode.stretch}
  284. />
  285.  
  286. <Body>
  287. <Text style={{fontFamily:'EncodeSansCondensed-Bold',color:'#000',fontSize:20,paddingLeft:10,marginTop:0}}>{data.name}</Text>
  288. <Text style={{fontFamily:'EncodeSansCondensed-Bold',color:'#000',fontSize:18,paddingLeft:10,marginTop:5}} ><Icon type='FontAwesome' name='rupee' style={{color:'#000',fontSize:18}} />
  289. {data.orderQty + 'x' + data.price}</Text>
  290. </Body>
  291. <Right>
  292. <Text style={{ fontSize: 15, fontFamily: 'EncodeSansCondensed-Bold',color: '#444',textAlign:'right',marginTop:-40}}>
  293. <Icon type='FontAwesome' name='rupee' style={{color:'#000',fontSize:15}} />
  294. { data.orderQty * data.price }
  295. </Text>
  296. </Right>
  297. </ListItem>
  298.  
  299. </Card>
  300. </View>
  301.  
  302. )
  303.  
  304. })
  305.  
  306. }
  307.  
  308. </List>
  309. </Content>
  310.  
  311. </Tab>
  312.  
  313. </Tabs>
  314.  
  315. );
  316. }
  317.  
  318. render(){
  319.  
  320.  
  321. // _.forEach(this.state.cartItems, (val) => {
  322. // console.log("shola"+val)
  323.  
  324. // })
  325.  
  326.  
  327. return(
  328. <SafeAreaView style={{flex:1,backgroundColor:'#000'}}>
  329. <Container style={{backgroundColor:'#FFF'}}>
  330. <OfflineNotice />
  331. <StatusBar hidden={true} />
  332. <Header style={styles.header}>
  333. <Left>
  334. <Button onPress={() => this.props.navigation.navigate('Account')} style={{backgroundColor:'transparent',marginLeft:-20}} >
  335. <Icon type='Ionicons' name='md-arrow-back' style={{color:'#fff',fontSize:32}} />
  336. <Text style={{color:'#fff',fontFamily:'EncodeSansCondensed-Bold',fontSize:25}}>Orders</Text>
  337. </Button>
  338. </Left>
  339. <Right>
  340. </Right>
  341. </Header>
  342.  
  343. <Content>
  344.  
  345. <AccordionList
  346. list={this.state.orders.slice(0).reverse()}
  347. header={this._head}
  348. body={this._body}
  349. />
  350.  
  351. </Content>
  352.  
  353. </Container>
  354. </SafeAreaView>
  355. )
  356. }
  357. }
  358.  
  359. const styles = StyleSheet.create({
  360. header:{
  361. backgroundColor:'#000',
  362. height:65,
  363. paddingBottom:3,
  364. },
  365. listHeading:{paddingTop:-10,color:'#222',fontFamily:'EncodeSansCondensed-Medium',fontSize:17,marginBottom:3},
  366. itemBorder:{borderColor:'#ddd'},
  367.  
  368. tabBarDesign : {
  369. borderColor:"#000",
  370. borderWidth:.7,
  371. height:0,
  372. },
  373. tabBackground:{
  374. backgroundColor:'#000',
  375. }
  376.  
  377. })
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!