ordering-ui-react-native 0.16.38 → 0.16.39

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.
Files changed (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/OrderDetails/index.tsx +2 -20
  3. package/src/components/PaymentOptions/index.tsx +66 -49
  4. package/themes/original/src/components/Favorite/index.tsx +1 -0
  5. package/themes/original/src/components/FavoriteList/index.tsx +13 -2
  6. package/themes/original/src/components/PaymentOptions/index.tsx +41 -22
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.16.38",
3
+ "version": "0.16.39",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/src/components/OrderDetails/index.tsx CHANGED
@@ -1,5 +1,5 @@
1
- import React, { useState, useEffect, useRef } from 'react'
2
- import { View, StyleSheet, BackHandler, TouchableOpacity, I18nManager, AppState } from 'react-native'
1
+ import React, { useState, useEffect } from 'react'
2
+ import { View, StyleSheet, BackHandler, TouchableOpacity, I18nManager } from 'react-native'
3
3
  import LinearGradient from 'react-native-linear-gradient'
4
4
  import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
5
5
  import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
@@ -109,7 +109,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
109
109
  const [isReviewed, setIsReviewed] = useState(false)
110
110
  const [openOrderCreating, setOpenOrderCreating] = useState(false)
111
111
  const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, tax: null, type: '' })
112
- const appState = useRef(AppState.currentState)
113
112
 
114
113
  const { order, loading, businessData, error } = props.order
115
114
 
@@ -259,23 +258,6 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
259
258
  })
260
259
  }, [])
261
260
 
262
- useEffect(() => {
263
- const onFocusApp = (nextAppState: any) => {
264
- if (
265
- appState.current.match(/inactive|background/) &&
266
- nextAppState === "active"
267
- ) {
268
- getOrder && getOrder()
269
- }
270
- appState.current = nextAppState;
271
- }
272
-
273
- AppState.addEventListener("change", onFocusApp);
274
- return () => {
275
- AppState.removeEventListener('change', onFocusApp);
276
- };
277
- }, [])
278
-
279
261
  return (
280
262
  <OrderDetailsContainer keyboardShouldPersistTaps='handled'>
281
263
  {order && order?.id && !error && !loading && (
package/src/components/PaymentOptions/index.tsx CHANGED
@@ -89,6 +89,8 @@ const PaymentOptionsUI = (props: any) => {
89
89
  return theme.images.general.stripes
90
90
  case 'stripe_redirect':
91
91
  return theme.images.general.stripesb
92
+ case 'apple_pay':
93
+ return theme.images.general.applePayMark
92
94
  default:
93
95
  return theme.images.general.creditCard
94
96
  }
@@ -97,7 +99,7 @@ const PaymentOptionsUI = (props: any) => {
97
99
  const handlePaymentMethodClick = (paymethod: any) => {
98
100
  const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal', 'square'].includes(paymethod?.gateway)
99
101
  handlePaymethodClick(paymethod, isPopupMethod)
100
- if (webViewPaymentGateway.includes(paymethod?.gateway)) {
102
+ if (webViewPaymentGateway.includes(paymethod?.gateway)) {
101
103
  handlePaymentMethodClickCustom(paymethod)
102
104
  }
103
105
  setCardData(paymethodData)
@@ -130,29 +132,44 @@ const PaymentOptionsUI = (props: any) => {
130
132
 
131
133
  const renderPaymethods = ({ item }: any) => {
132
134
  return (
133
- <TouchableOpacity
134
- onPress={() => handlePaymentMethodClick(item)}
135
- >
136
- <PMItem
137
- key={item.id}
138
- isDisabled={isDisabled}
139
- isActive={paymethodSelected?.id === item.id}
140
- >
141
- <OIcon
142
- src={getPayIcon(item.gateway)}
143
- width={40}
144
- height={40}
145
- color={paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
146
- />
147
- <OText
148
- size={12}
149
- style={{ margin: 0 }}
150
- color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
135
+ <>
136
+ {item?.gateway === 'apple_pay' ? (
137
+ <TouchableOpacity
138
+ onPress={() => handlePaymentMethodClick(item)}
151
139
  >
152
- {t(item.gateway.toUpperCase(), item.name)}
153
- </OText>
154
- </PMItem>
155
- </TouchableOpacity>
140
+ <OIcon
141
+ src={getPayIcon(item.gateway)}
142
+ width={120}
143
+ height={100}
144
+ style={{ marginRight: 10 }}
145
+ />
146
+ </TouchableOpacity>
147
+ ) : (
148
+ <TouchableOpacity
149
+ onPress={() => handlePaymentMethodClick(item)}
150
+ >
151
+ <PMItem
152
+ key={item.id}
153
+ isDisabled={isDisabled}
154
+ isActive={paymethodSelected?.id === item.id}
155
+ >
156
+ <OIcon
157
+ src={getPayIcon(item.gateway)}
158
+ width={40}
159
+ height={40}
160
+ color={paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
161
+ />
162
+ <OText
163
+ size={12}
164
+ style={{ margin: 0 }}
165
+ color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
166
+ >
167
+ {t(item.gateway.toUpperCase(), item.name)}
168
+ </OText>
169
+ </PMItem>
170
+ </TouchableOpacity>
171
+ )}
172
+ </>
156
173
  )
157
174
  }
158
175
 
@@ -213,31 +230,31 @@ const PaymentOptionsUI = (props: any) => {
213
230
  {stripeOptions.includes(paymethodSelected?.gateway) &&
214
231
  (paymethodData?.brand || paymethodData?.card?.brand) &&
215
232
  (paymethodData?.last4 || paymethodData?.card?.last4) &&
216
- (
217
- <PMCardSelected>
218
- <PMCardItemContent>
219
- <View style={styles.viewStyle}>
220
- <MaterialCommunityIcons
221
- name='radiobox-marked'
222
- size={24}
223
- color={theme.colors.primary}
224
- />
225
- </View>
226
- <View style={styles.viewStyle}>
227
- <OText>
228
- {getIconCard((paymethodData?.brand || paymethodData?.card?.brand), 26)}
229
- </OText>
230
- </View>
231
- <View style={styles.viewStyle}>
232
- <OText
233
- size={20}
234
- >
235
- XXXX-XXXX-XXXX-{(paymethodData?.last4 || paymethodData?.card?.last4)}
236
- </OText>
237
- </View>
238
- </PMCardItemContent>
239
- </PMCardSelected>
240
- )}
233
+ (
234
+ <PMCardSelected>
235
+ <PMCardItemContent>
236
+ <View style={styles.viewStyle}>
237
+ <MaterialCommunityIcons
238
+ name='radiobox-marked'
239
+ size={24}
240
+ color={theme.colors.primary}
241
+ />
242
+ </View>
243
+ <View style={styles.viewStyle}>
244
+ <OText>
245
+ {getIconCard((paymethodData?.brand || paymethodData?.card?.brand), 26)}
246
+ </OText>
247
+ </View>
248
+ <View style={styles.viewStyle}>
249
+ <OText
250
+ size={20}
251
+ >
252
+ XXXX-XXXX-XXXX-{(paymethodData?.last4 || paymethodData?.card?.last4)}
253
+ </OText>
254
+ </View>
255
+ </PMCardItemContent>
256
+ </PMCardSelected>
257
+ )}
241
258
 
242
259
  {/* Stripe */}
243
260
  {isOpenMethod?.paymethod?.gateway === 'stripe' && !paymethodData?.id && (
@@ -317,7 +334,7 @@ const PaymentOptionsUI = (props: any) => {
317
334
  bgColor={theme.colors.primary}
318
335
  borderColor={theme.colors.primary}
319
336
  style={styles.btnAddStyle}
320
- textStyle={{color: 'white'}}
337
+ textStyle={{ color: 'white' }}
321
338
  imgRightSrc={null}
322
339
  onClick={() => setAddCardOpen({ ...addCardOpen, stripeConnect: true })}
323
340
  />
package/themes/original/src/components/Favorite/index.tsx CHANGED
@@ -75,6 +75,7 @@ export const Favorite = (props: any) => {
75
75
  <FavoriteList
76
76
  favoriteURL='favorite_products'
77
77
  originalURL='products'
78
+ onNavigationRedirect={onRedirect}
78
79
  isProduct
79
80
  />
80
81
  )}
package/themes/original/src/components/FavoriteList/index.tsx CHANGED
@@ -73,6 +73,17 @@ const FavoriteListUI = (props: FavoriteParams) => {
73
73
  return objectStatus && objectStatus
74
74
  }
75
75
 
76
+ const onProductClick = (product: any) => {
77
+ const categoryId = product?.category?.id
78
+ const businessId = product?.category?.business?.id
79
+ if (!categoryId || !businessId) return
80
+ onNavigationRedirect && onNavigationRedirect('ProductDetails', {
81
+ productId: product?.id,
82
+ categoryId: categoryId,
83
+ businessId: businessId
84
+ })
85
+ }
86
+
76
87
  useEffect(() => {
77
88
  const _businessId = 'businessId:' + reorderState?.result?.business_id
78
89
  if (reorderState?.error) {
@@ -248,9 +259,9 @@ const FavoriteListUI = (props: FavoriteParams) => {
248
259
  favoriteList.favorites?.sort((a: any, b: any) => a?.name?.toLowerCase() > b?.name?.toLowerCase()).map((product: any, i: number) => (
249
260
  <SingleProductCard
250
261
  key={`${product?.id}_${i}`}
251
- isSoldOut={product.inventoried && !product.quantity}
262
+ isSoldOut={product?.inventoried && !product?.quantity}
252
263
  product={product}
253
- onProductClick={() => {}}
264
+ onProductClick={onProductClick}
254
265
  handleUpdateProducts={handleUpdateFavoriteList}
255
266
  />
256
267
  ))
package/themes/original/src/components/PaymentOptions/index.tsx CHANGED
@@ -82,6 +82,8 @@ const PaymentOptionsUI = (props: any) => {
82
82
  return theme.images.general.stripes
83
83
  case 'stripe_redirect':
84
84
  return theme.images.general.stripesb
85
+ case 'apple_pay':
86
+ return theme.images.general.applePayMark
85
87
  default:
86
88
  return theme.images.general.creditCard
87
89
  }
@@ -142,29 +144,46 @@ const PaymentOptionsUI = (props: any) => {
142
144
 
143
145
  const renderPaymethods = ({ item }: any) => {
144
146
  return (
145
- <TouchableOpacity
146
- onPress={() => handlePaymentMethodClick(item)}
147
- >
148
- <PMItem
149
- key={item.id}
150
- isDisabled={isDisabled}
151
- isActive={paymethodSelected?.id === item.id}
152
- >
153
- <OIcon
154
- src={getPayIcon(item.gateway)}
155
- width={20}
156
- height={20}
157
- color={paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
158
- />
159
- <OText
160
- size={10}
161
- style={{ margin: 0, marginTop: 4 }}
162
- color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
147
+ <>
148
+ {item?.gateway === 'apple_pay' ? (
149
+ <TouchableOpacity
150
+ onPress={() => handlePaymentMethodClick(item)}
163
151
  >
164
- {t(item.gateway.toUpperCase(), item.name)}
165
- </OText>
166
- </PMItem>
167
- </TouchableOpacity>
152
+ <OIcon
153
+ src={getPayIcon(item.gateway)}
154
+ width={70}
155
+ height={70}
156
+ style={{ marginRight: 10 }}
157
+ />
158
+ </TouchableOpacity>
159
+ ) : (
160
+ <TouchableOpacity
161
+ onPress={() => handlePaymentMethodClick(item)}
162
+ >
163
+ {console.log(item?.gateway)}
164
+ <PMItem
165
+ key={item.id}
166
+ isDisabled={isDisabled}
167
+ isActive={paymethodSelected?.id === item.id}
168
+ >
169
+ <OIcon
170
+ src={getPayIcon(item.gateway)}
171
+ width={20}
172
+ height={20}
173
+ color={item?.gateway === 'apple_pay' ? '' : paymethodSelected?.id === item.id ? theme.colors.white : theme.colors.backgroundDark}
174
+ />
175
+ <OText
176
+ size={10}
177
+ style={{ margin: 0, marginTop: 4 }}
178
+ color={paymethodSelected?.id === item.id ? theme.colors.white : '#000'}
179
+ >
180
+ {t(item.gateway.toUpperCase(), item.name)}
181
+ </OText>
182
+ </PMItem>
183
+ </TouchableOpacity>
184
+ )}
185
+ </>
186
+
168
187
  )
169
188
  }
170
189