ordering-ui-react-native 0.12.12 → 0.12.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,13 +1,13 @@
1
1
  import React from 'react';
2
- import { StyleSheet, TouchableOpacity } from 'react-native';
2
+ import { StyleSheet, TouchableOpacity, View } from 'react-native';
3
3
  import { useTheme } from 'styled-components/native';
4
4
  import { useLanguage, useUtils } from 'ordering-components/native';
5
- import { OIcon, OText } from '../shared';
6
- import { Card, Logo, Information, MyOrderOptions, NotificationIcon } from './styles';
5
+ import { OButton, OIcon, OText } from '../shared';
6
+ import { Card, Logo, Information, MyOrderOptions, NotificationIcon, AcceptOrRejectOrder } from './styles';
7
7
  import EntypoIcon from 'react-native-vector-icons/Entypo'
8
8
 
9
9
  export const PreviousOrders = (props: any) => {
10
- const { orders, onNavigationRedirect, getOrderStatus, handleClickOrder } = props;
10
+ const { orders, onNavigationRedirect, getOrderStatus, handleClickOrder, isLogisticOrder } = props;
11
11
  const [, t] = useLanguage();
12
12
  const [{ parseDate, optimizeImage }] = useUtils();
13
13
  const theme = useTheme();
@@ -22,7 +22,7 @@ export const PreviousOrders = (props: any) => {
22
22
  cardButton: {
23
23
  flex: 1,
24
24
  minHeight: 64,
25
- marginBottom: 30,
25
+ marginBottom: isLogisticOrder ? 0 : 30,
26
26
  marginLeft: 3,
27
27
  },
28
28
  icon: {
@@ -79,73 +79,98 @@ export const PreviousOrders = (props: any) => {
79
79
  orders
80
80
  .filter((order: any) => hash[order?.id] ? false : (hash[order?.id] = true))
81
81
  .map((order: any) =>
82
- (
83
- <React.Fragment key={order.id}>
84
- <TouchableOpacity
85
- onPress={() => handlePressOrder(order)}
86
- style={styles.cardButton}
87
- activeOpacity={1}
88
- >
89
- <Card key={order.id}>
90
- {!!order.business?.logo && (
91
- <Logo style={styles.logo}>
92
- <OIcon
93
- url={optimizeImage(
94
- order.business?.logo,
95
- 'h_300,c_limit',
82
+ (
83
+ <React.Fragment key={order.id}>
84
+ <TouchableOpacity
85
+ onPress={() => handlePressOrder(order)}
86
+ style={styles.cardButton}
87
+ activeOpacity={1}
88
+ >
89
+ <Card key={order.id}>
90
+ {!!order.business?.logo && (
91
+ <Logo style={styles.logo}>
92
+ <OIcon
93
+ url={optimizeImage(
94
+ order.business?.logo,
95
+ 'h_300,c_limit',
96
+ )}
97
+ style={styles.icon}
98
+ />
99
+ </Logo>
100
+ )}
101
+ <Information>
102
+ <OText numberOfLines={1} style={styles.title}>
103
+ {order.business?.name}
104
+ </OText>
105
+ {order?.showNotification && (
106
+ <NotificationIcon>
107
+ <EntypoIcon
108
+ name="dot-single"
109
+ size={32}
110
+ color={theme.colors.primary}
111
+ />
112
+ </NotificationIcon>
96
113
  )}
97
- style={styles.icon}
114
+ <OText
115
+ style={styles.date}
116
+ numberOfLines={1}
117
+ adjustsFontSizeToFit
118
+ size={20}>
119
+ {t('INVOICE_ORDER_NO', 'Order No.') + order.id + ' · '}
120
+ {order?.delivery_datetime_utc
121
+ ? parseDate(order?.delivery_datetime_utc)
122
+ : parseDate(order?.delivery_datetime, { utc: false })}
123
+ </OText>
124
+ {!isLogisticOrder && (
125
+ <MyOrderOptions>
126
+ <OText
127
+ style={styles.orderType}
128
+ mRight={5}
129
+ numberOfLines={1}
130
+ adjustsFontSizeToFit
131
+ >
132
+ {order.delivery_type === 1
133
+ ? t('DELIVERY', 'Delivery')
134
+ : order.delivery_type === 2
135
+ ? t('PICKUP', 'Pickup')
136
+ : order.delivery_type === 3
137
+ ? t('EAT_IN', 'Eat in')
138
+ : order.delivery_type === 4
139
+ ? t('CURBSIDE', 'Curbside')
140
+ : t('DRIVER_THRU', 'Driver thru')}
141
+ {` · ${getOrderStatus(order.status)}`}
142
+ </OText>
143
+ </MyOrderOptions>
144
+ )}
145
+ </Information>
146
+ </Card>
147
+ </TouchableOpacity>
148
+ {isLogisticOrder && (
149
+ <AcceptOrRejectOrder>
150
+ <OButton
151
+ text={t('REJECT', 'Reject')}
152
+ onClick={() => console.log('reject')}
153
+ bgColor={theme.colors.danger}
154
+ borderColor={theme.colors.danger}
155
+ imgRightSrc={null}
156
+ style={{ borderRadius: 7 }}
157
+ parentStyle={{width: '45%'}}
158
+ textStyle={{ color: theme.colors.dangerText }}
159
+ />
160
+ <OButton
161
+ text={t('ACCEPT', 'Accept')}
162
+ onClick={() => console.log('Accept')}
163
+ bgColor={theme.colors.successOrder}
164
+ borderColor={theme.colors.successOrder}
165
+ imgRightSrc={null}
166
+ style={{ borderRadius: 7 }}
167
+ parentStyle={{width: '45%'}}
168
+ textStyle={{ color: theme.colors.successText }}
98
169
  />
99
- </Logo>
170
+ </AcceptOrRejectOrder>
100
171
  )}
101
- <Information>
102
- <OText numberOfLines={1} style={styles.title}>
103
- {order.business?.name}
104
- </OText>
105
- {order?.showNotification && (
106
- <NotificationIcon>
107
- <EntypoIcon
108
- name="dot-single"
109
- size={32}
110
- color={theme.colors.primary}
111
- />
112
- </NotificationIcon>
113
- )}
114
- <OText
115
- style={styles.date}
116
- numberOfLines={1}
117
- adjustsFontSizeToFit
118
- size={20}>
119
- {t('INVOICE_ORDER_NO', 'Order No.') + order.id + ' · '}
120
- {order?.delivery_datetime_utc
121
- ? parseDate(order?.delivery_datetime_utc)
122
- : parseDate(order?.delivery_datetime, { utc: false })}
123
- </OText>
124
-
125
- <MyOrderOptions>
126
- <OText
127
- style={styles.orderType}
128
- mRight={5}
129
- numberOfLines={1}
130
- adjustsFontSizeToFit
131
- >
132
- {order.delivery_type === 1
133
- ? t('DELIVERY', 'Delivery')
134
- : order.delivery_type === 2
135
- ? t('PICKUP', 'Pickup')
136
- : order.delivery_type === 3
137
- ? t('EAT_IN', 'Eat in')
138
- : order.delivery_type === 4
139
- ? t('CURBSIDE', 'Curbside')
140
- : t('DRIVER_THRU', 'Driver thru')}
141
- {` · ${getOrderStatus(order.status)}`}
142
- </OText>
143
- </MyOrderOptions>
144
- </Information>
145
- </Card>
146
- </TouchableOpacity>
147
- </React.Fragment>
148
- ))}
172
+ </React.Fragment>
173
+ ))}
149
174
  </>
150
175
  );
151
176
  };
@@ -29,3 +29,10 @@ export const NotificationIcon = styled.View`
29
29
  position: absolute;
30
30
  left: 90%;
31
31
  `
32
+
33
+ export const AcceptOrRejectOrder = styled.View`
34
+ flex-direction: row;
35
+ justify-content: space-between;
36
+ flex: 1;
37
+ margin-bottom: 30px;
38
+ `
@@ -49,7 +49,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
49
49
  option.suboptions = Object.values(option.suboptions ?? {});
50
50
  return option;
51
51
  });
52
-
52
+ console.log(productInfo, ingredients, options)
53
53
  return {
54
54
  ...productInfo,
55
55
  ingredients,
@@ -60,11 +60,13 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
60
60
  return product;
61
61
  };
62
62
 
63
+ const parseOptions = typeof productInfo().options === 'string' ? JSON.parse(productInfo().options) : productInfo().options
64
+
63
65
  const getProductPrice = (product: any) => {
64
66
  let subOptionPrice = 0;
65
- if (product.options.length > 0) {
66
- for (const option of product.options) {
67
- for (const suboption of option.suboptions) {
67
+ if (product?.options?.length > 0 && product?.options?.suboptions?.length > 0) {
68
+ for (const option of product?.options) {
69
+ for (const suboption of option?.suboptions) {
68
70
  subOptionPrice += suboption.quantity * suboption.price;
69
71
  }
70
72
  }
@@ -98,8 +100,8 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
98
100
 
99
101
  useEffect(() => {
100
102
  if (
101
- productInfo().ingredients.length > 0 ||
102
- productInfo().options.length > 0 ||
103
+ productInfo?.()?.ingredients?.length > 0 ||
104
+ productInfo?.()?.options?.length > 0 ||
103
105
  product.comment !== ''
104
106
  ) {
105
107
  setActiveState(true);
@@ -150,12 +152,12 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
150
152
  </OText>
151
153
 
152
154
  {(
153
- productInfo().ingredients.length > 0 ||
154
- productInfo().options.length > 0 ||
155
+ productInfo?.()?.ingredients?.length > 0 ||
156
+ productInfo?.()?.options?.length > 0 ||
155
157
  product.comment
156
158
  ) && !isClickableEvent && (
157
- <MaterialCommunityIcon name="chevron-down" size={12} />
158
- )}
159
+ <MaterialCommunityIcon name="chevron-down" size={12} />
160
+ )}
159
161
  </View>
160
162
 
161
163
  <View
@@ -201,20 +203,20 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
201
203
  product?.valid_menu &&
202
204
  !product?.valid_quantity) ||
203
205
  (!product?.valid_menu && isCartProduct && !isCartPending)) && (
204
- <OText
205
- size={24}
206
- color={theme.colors.red}
207
- style={{ textAlign: 'center', marginTop: 10 }}>
208
- {t('NOT_AVAILABLE', 'Not available')}
209
- </OText>
210
- )}
206
+ <OText
207
+ size={24}
208
+ color={theme.colors.red}
209
+ style={{ textAlign: 'center', marginTop: 10 }}>
210
+ {t('NOT_AVAILABLE', 'Not available')}
211
+ </OText>
212
+ )}
211
213
  </Accordion>
212
214
 
213
215
  <View style={{ display: isActive ? 'flex' : 'none' }}>
214
216
  <Animated.View>
215
217
  <AccordionContent>
216
- {productInfo().ingredients.length > 0 &&
217
- productInfo().ingredients.some(
218
+ {productInfo?.()?.ingredients?.length > 0 &&
219
+ productInfo?.()?.ingredients?.some(
218
220
  (ingredient: any) => !ingredient.selected,
219
221
  ) && (
220
222
  <ProductOptionsList>
@@ -225,7 +227,7 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
225
227
  {t('INGREDIENTS', 'Ingredients')}:
226
228
  </OText>
227
229
 
228
- {productInfo().ingredients.map(
230
+ {productInfo?.()?.ingredients?.map(
229
231
  (ingredient: any) =>
230
232
  !ingredient.selected && (
231
233
  <OText
@@ -240,9 +242,9 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
240
242
  </ProductOptionsList>
241
243
  )}
242
244
 
243
- {productInfo().options.length > 0 && (
245
+ {parseOptions?.length > 0 && (
244
246
  <ProductOptionsList>
245
- {productInfo().options.map((option: any, i: number) => (
247
+ {parseOptions?.map((option: any, i: number) => (
246
248
  <ProductOption key={option.id + i}>
247
249
  <OText
248
250
  size={12}
@@ -263,9 +265,9 @@ export const ProductItemAccordion = (props: ProductItemAccordionParams) => {
263
265
  position:
264
266
  suboption.position !== 'whole'
265
267
  ? t(
266
- suboption.position.toUpperCase(),
267
- suboption.position,
268
- )
268
+ suboption.position.toUpperCase(),
269
+ suboption.position,
270
+ )
269
271
  : '',
270
272
  price: parsePrice(suboption.price),
271
273
  })}
@@ -20,6 +20,7 @@ interface Props {
20
20
  cover?: boolean;
21
21
  children?: any;
22
22
  borderRadius?: number;
23
+ borderBottomWidth?: number
23
24
  }
24
25
 
25
26
  const OImage = (props: Props): React.ReactElement => {
@@ -30,6 +31,7 @@ const OImage = (props: Props): React.ReactElement => {
30
31
  borderRadius: props.style?.borderRadius,
31
32
  overflow: 'hidden',
32
33
  marginHorizontal: props.style?.marginHorizontal,
34
+ borderBottomWidth: props.borderBottomWidth
33
35
  }}>
34
36
  <SImage
35
37
  source={
@@ -519,6 +519,7 @@ export interface TagsParams {
519
519
  interface actions {
520
520
  accept: string;
521
521
  reject: string;
522
+ failed: string;
522
523
  }
523
524
 
524
525
  interface textTranslate {
@@ -1,4 +1,4 @@
1
- import React, { useState } from 'react'
1
+ import React, { useEffect, useState } from 'react'
2
2
  import { TouchableOpacity, View, StyleSheet } from 'react-native'
3
3
  import { LanguageSelector as LanguageSelectorController, useLanguage } from 'ordering-components/native'
4
4
  import CountryPicker, { Flag } from 'react-native-country-picker-modal'
@@ -9,6 +9,7 @@ import { LanguageSelectorParams } from '../../types'
9
9
  import { OText } from '../shared'
10
10
  import MatarialIcon from "react-native-vector-icons/MaterialIcons"
11
11
  import { useTheme } from 'styled-components/native'
12
+ import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
12
13
  const LanguageSelectorUI = (props: LanguageSelectorParams) => {
13
14
  const {
14
15
  languagesState,
@@ -18,7 +19,7 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
18
19
 
19
20
  const theme = useTheme()
20
21
  const [{loading}] = useLanguage()
21
-
22
+ const [isLoading, setIsLoading] = useState(true)
22
23
  const styles = StyleSheet.create({
23
24
  closeIcon: {
24
25
  width: 48, marginLeft: 32
@@ -27,6 +28,15 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
27
28
  marginLeft: 40
28
29
  }
29
30
  })
31
+ useEffect(() => {
32
+ if (!isLoading) return
33
+ const loadingLanguage = setTimeout(() =>{
34
+ setIsLoading(false)
35
+ }, 1000);
36
+ return () => {
37
+ clearTimeout(loadingLanguage);
38
+ }
39
+ }, [])
30
40
 
31
41
  const _languages = languagesState?.languages?.map((language: any) => {
32
42
  return {
@@ -48,63 +58,73 @@ const LanguageSelectorUI = (props: LanguageSelectorParams) => {
48
58
  const currentLanguageData = _languages?.find((item:any) => item.value == currentLanguage);
49
59
 
50
60
  return (
51
- <Container>
52
- {languagesState?.languages && (
53
- <CountryPicker
54
- countryCode={currentLanguageData?.countryCode}
55
- visible={isCountryModalVisible}
56
- onClose={() => setCountryModalVisible(false)}
57
- withCountryNameButton
58
- countryCodes={countryCodes}
59
- closeButtonStyle={styles.closeIcon}
60
- renderFlagButton={() => (
61
- <TouchableOpacity
62
- onPress={() => setCountryModalVisible(true)}
63
- disabled={loading}
64
- >
65
- <LanguageItem>
66
- <Flag
67
- withEmoji
68
- flagSize={24}
69
- countryCode={currentLanguageData?.countryCode}
70
- />
71
- <OText color={theme.colors.primary}>{currentLanguageData?.label}</OText>
72
- <MatarialIcon name='keyboard-arrow-down' size={24}/>
73
- </LanguageItem>
74
- </TouchableOpacity>
61
+ <>
62
+ { isLoading ?
63
+ (<Container>
64
+ <Placeholder style={{ width: 130, paddingTop: 10 }} Animation={Fade}>
65
+ <PlaceholderLine height={15}/>
66
+ </Placeholder>
67
+ </Container>
68
+ ):(
69
+ <Container>
70
+ {languagesState?.languages && (
71
+ <CountryPicker
72
+ countryCode={currentLanguageData?.countryCode}
73
+ visible={isCountryModalVisible}
74
+ onClose={() => setCountryModalVisible(false)}
75
+ withCountryNameButton
76
+ countryCodes={countryCodes}
77
+ closeButtonStyle={styles.closeIcon}
78
+ renderFlagButton={() => (
79
+ <TouchableOpacity
80
+ onPress={() => setCountryModalVisible(true)}
81
+ disabled={loading}
82
+ >
83
+ <LanguageItem>
84
+ <Flag
85
+ withEmoji
86
+ flagSize={24}
87
+ countryCode={currentLanguageData?.countryCode}
88
+ />
89
+ <OText color={theme.colors.primary}>{currentLanguageData?.label}</OText>
90
+ <MatarialIcon name='keyboard-arrow-down' size={24}/>
91
+ </LanguageItem>
92
+ </TouchableOpacity>
93
+ )}
94
+ flatListProps={{
95
+ /* @ts-ignore */
96
+ keyExtractor: (item) => item.value,
97
+ data: _languages || [],
98
+ renderItem: ({item} : any) => (
99
+ <TouchableOpacity
100
+ onPress={() => {
101
+ /* @ts-ignore */
102
+ handleChangeLanguage(item.value);
103
+ setCountryModalVisible(false);
104
+ }}
105
+ disabled={loading}
106
+ >
107
+ <LanguageItem>
108
+ <View style={styles.flagsContainer} />
109
+ <Flag
110
+ withEmoji
111
+ flagSize={24}
112
+ /* @ts-ignore */
113
+ countryCode={item.countryCode}
114
+ />
115
+ <OText>{
116
+ /* @ts-ignore */
117
+ item.label
118
+ }</OText>
119
+ </LanguageItem>
120
+ </TouchableOpacity>
121
+ )
122
+ }}
123
+ />
75
124
  )}
76
- flatListProps={{
77
- /* @ts-ignore */
78
- keyExtractor: (item) => item.value,
79
- data: _languages || [],
80
- renderItem: ({item} : any) => (
81
- <TouchableOpacity
82
- onPress={() => {
83
- /* @ts-ignore */
84
- handleChangeLanguage(item.value);
85
- setCountryModalVisible(false);
86
- }}
87
- disabled={loading}
88
- >
89
- <LanguageItem>
90
- <View style={styles.flagsContainer} />
91
- <Flag
92
- withEmoji
93
- flagSize={24}
94
- /* @ts-ignore */
95
- countryCode={item.countryCode}
96
- />
97
- <OText>{
98
- /* @ts-ignore */
99
- item.label
100
- }</OText>
101
- </LanguageItem>
102
- </TouchableOpacity>
103
- )
104
- }}
105
- />
106
- )}
107
- </Container>
125
+ </Container>
126
+ )}
127
+ </>
108
128
  )
109
129
  }
110
130
 
@@ -33,7 +33,7 @@ import OptionSwitch, { Opt } from '../../components/shared/OOptionToggle';
33
33
  import { verifyDecimals } from '../../../../../src/utils'
34
34
  import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation'
35
35
  import { useTheme } from 'styled-components/native'
36
- import { _retrieveStoreData } from '../../../../../src/providers/StoreUtil';
36
+ import { _retrieveStoreData, _setStoreData } from '../../../../../src/providers/StoreUtil';
37
37
  import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
38
38
  import EvilIcons from 'react-native-vector-icons/EvilIcons'
39
39
  const _EMAIL = 'email';
@@ -218,6 +218,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
218
218
  }
219
219
  getCustomerName()
220
220
  const redirectHome = setTimeout(() =>{
221
+ _setStoreData('customer_name', {customerName: ''});
221
222
  navigation.reset({
222
223
  routes: [{ name: 'Intro' }],
223
224
  });
@@ -344,6 +345,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
344
345
  <OButton
345
346
  text={`${t('YOU_ARE_DONE', 'You are done! Click to close')}!`}
346
347
  onClick={() => {
348
+ _setStoreData('customer_name', {customerName: ''});
347
349
  navigation.reset({
348
350
  routes: [{ name: 'Intro' }],
349
351
  });