ordering-ui-react-native 0.16.75 → 0.16.77

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 (20) hide show
  1. package/package.json +2 -1
  2. package/src/components/PaymentOptions/index.tsx +298 -347
  3. package/src/types/@fatnlazycat/react-native-recaptcha-v3/index.d.ts +1 -0
  4. package/themes/business/src/components/LoginForm/index.tsx +110 -74
  5. package/themes/kiosk/src/components/LoginForm/index.tsx +120 -10
  6. package/themes/kiosk/src/components/LoginForm/styles.tsx +5 -0
  7. package/themes/kiosk/src/types/index.d.ts +1 -0
  8. package/themes/original/src/components/BusinessListingSearch/index.tsx +3 -1
  9. package/themes/original/src/components/BusinessProductsList/SubcategoriesComponent/index.tsx +87 -0
  10. package/themes/original/src/components/BusinessProductsList/SubcategoriesComponent/styles.tsx +12 -0
  11. package/themes/original/src/components/BusinessProductsList/index.tsx +15 -44
  12. package/themes/original/src/components/BusinessProductsListing/index.tsx +1 -0
  13. package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx +2 -2
  14. package/themes/original/src/components/BusinessesListing/index.tsx +1 -0
  15. package/themes/original/src/components/Checkout/index.tsx +1 -2
  16. package/themes/original/src/components/Checkout/styles.tsx +0 -1
  17. package/themes/original/src/components/LoginForm/index.tsx +70 -33
  18. package/themes/original/src/components/SignupForm/index.tsx +72 -34
  19. package/themes/original/src/components/SingleProductCard/index.tsx +11 -9
  20. package/themes/original/src/components/shared/OBottomPopup.tsx +5 -3
package/src/components/PaymentOptions/index.tsx CHANGED
@@ -1,137 +1,129 @@
1
- import React, { useEffect, useState, useRef } from 'react';
2
- import { FlatList, TouchableOpacity, View, StyleSheet, KeyboardAvoidingView, Platform, ActivityIndicator } from 'react-native';
3
- import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
1
+ import React, { useEffect, useState } from 'react';
2
+ import { useTheme } from 'styled-components/native';
3
+ import { useApplePay } from '@stripe/stripe-react-native';
4
+ import { FlatList, TouchableOpacity, View, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native';
4
5
  import {
5
- Placeholder,
6
- PlaceholderLine,
7
- Fade
6
+ Placeholder,
7
+ PlaceholderLine,
8
+ Fade
8
9
  } from "rn-placeholder";
9
10
 
10
11
  import {
11
- PaymentOptions as PaymentOptionsController,
12
- useLanguage,
13
- useSession,
14
- useApi,
15
- useOrder,
16
- ToastType,
17
- useToast
12
+ PaymentOptions as PaymentOptionsController,
13
+ useLanguage,
14
+ ToastType,
15
+ useToast,
18
16
  } from 'ordering-components/native';
19
17
 
18
+ import { getIconCard } from '../../utils';
20
19
  import { PaymentOptionCash } from '../PaymentOptionCash';
21
20
  import { StripeElementsForm } from '../StripeElementsForm';
22
21
  import { StripeCardsList } from '../StripeCardsList';
23
- // import { PaymentOptionStripe } from '../PaymentOptionStripe';
24
- // import { StripeRedirectForm } from '../StripeRedirectForm';
25
- // import { PaymentOptionPaypal } from '../PaymentOptionPaypal'
26
- // import { NotFoundSource } from '../NotFoundSource'
27
-
28
22
  import { OText, OIcon, OModal, OButton } from '../shared';
29
23
 
30
24
  import {
31
- PMContainer,
32
- PMItem,
33
- PMCardSelected,
34
- PMCardItemContent
25
+ PMContainer,
26
+ PMItem,
27
+ PMCardSelected,
28
+ PMCardItemContent
35
29
  } from './styles'
36
- import { getIconCard } from '../../utils';
37
- import { WebView } from 'react-native-webview';
38
- import { useTheme } from 'styled-components/native';
39
30
 
40
31
  const stripeOptions: any = ['stripe_direct', 'stripe', 'stripe_connect']
41
- // const stripeRedirectOptions = [
42
- // { name: 'Bancontact', value: 'bancontact' },
43
- // { name: 'Alipay', value: 'alipay' },
44
- // { name: 'Giropay', value: 'giropay' },
45
- // { name: 'iDEAL', value: 'ideal' }
46
- // ]
47
-
32
+ const methodsPay = ['google_pay', 'apple_pay']
33
+ const stripeDirectMethods = ['stripe_direct', ...methodsPay]
48
34
  const webViewPaymentGateway: any = ['paypal', 'square']
49
35
 
50
36
  const PaymentOptionsUI = (props: any) => {
51
- const {
52
- cart,
53
- errorCash,
54
- isLoading,
55
- isDisabled,
56
- paymethodData,
57
- paymethodsList,
58
- setPaymethodData,
59
- onNavigationRedirect,
60
- handlePaymethodClick,
61
- handlePaymethodDataChange,
62
- handlePaymentMethodClickCustom,
63
- isOpenMethod,
64
- setCardData,
65
- handlePlaceOrder,
66
- merchantId
67
- } = props
37
+ const {
38
+ cart,
39
+ errorCash,
40
+ isLoading,
41
+ isDisabled,
42
+ paymethodData,
43
+ paymethodsList,
44
+ setPaymethodData,
45
+ onNavigationRedirect,
46
+ handlePaymethodClick,
47
+ handlePaymethodDataChange,
48
+ isOpenMethod,
49
+ handlePaymentMethodClickCustom,
50
+ handlePlaceOrder,
51
+ merchantId
52
+ } = props
68
53
 
69
- const theme = useTheme();
54
+ const theme = useTheme();
70
55
  const [, t] = useLanguage();
71
- const methodsPay = ['google_pay']
72
- const stripeDirectMethods = ['stripe_direct', ...methodsPay]
56
+ const [, { showToast }] = useToast();
57
+ const { confirmApplePayPayment } = useApplePay()
73
58
 
74
59
  const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
75
- let paymethodSelected = props.paySelected || props.paymethodSelected || isOpenMethod?.paymethod
60
+ const paymethodSelected = props.paySelected || props.paymethodSelected || isOpenMethod?.paymethod
76
61
 
77
- const getPayIcon = (method: string) => {
78
- switch (method) {
79
- case 'cash':
80
- return theme.images.general.cash
81
- case 'card_delivery':
82
- return theme.images.general.carddelivery
83
- case 'paypal':
84
- return theme.images.general.paypal
85
- case 'stripe':
86
- return theme.images.general.stripe
87
- case 'stripe_direct':
88
- return theme.images.general.stripecc
89
- case 'stripe_connect':
90
- return theme.images.general.stripes
91
- case 'stripe_redirect':
92
- return theme.images.general.stripesb
93
- case 'apple_pay':
94
- return theme.images.general.applePayMark
95
- default:
96
- return theme.images.general.creditCard
97
- }
98
- }
62
+ const getPayIcon = (method: string) => {
63
+ switch (method) {
64
+ case 'cash':
65
+ return theme.images.general.cash
66
+ case 'card_delivery':
67
+ return theme.images.general.carddelivery
68
+ case 'paypal':
69
+ return theme.images.general.paypal
70
+ case 'stripe':
71
+ return theme.images.general.stripe
72
+ case 'stripe_direct':
73
+ return theme.images.general.stripecc
74
+ case 'stripe_connect':
75
+ return theme.images.general.stripes
76
+ case 'stripe_redirect':
77
+ return theme.images.general.stripesb
78
+ case 'apple_pay':
79
+ return theme.images.general.applePayMark
80
+ default:
81
+ return theme.images.general.creditCard
82
+ }
83
+ }
99
84
 
100
- const handlePaymentMethodClick = (paymethod: any) => {
101
- const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal', 'square'].includes(paymethod?.gateway)
102
- handlePaymethodClick(paymethod, isPopupMethod)
103
- if (webViewPaymentGateway.includes(paymethod?.gateway)) {
104
- handlePaymentMethodClickCustom(paymethod)
105
- }
106
- setCardData(paymethodData)
107
- }
85
+ const handlePaymentMethodClick = (paymethod: any) => {
86
+ if (cart?.balance > 0) {
87
+ const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
88
+ if (webViewPaymentGateway.includes(paymethod?.gateway)) {
89
+ handlePaymentMethodClickCustom(paymethod)
90
+ }
91
+ handlePaymethodClick(paymethod, isPopupMethod)
92
+ return
93
+ }
94
+ showToast(
95
+ ToastType.Error,
96
+ t('CART_BALANCE_ZERO', 'Sorry, the amount to pay is equal to zero and it is not necessary to select a payment method'))
97
+ ;
98
+ }
108
99
 
109
- useEffect(() => {
110
- if (paymethodsList.paymethods.length === 1) {
111
- handlePaymethodClick && handlePaymethodClick(paymethodsList.paymethods[0])
112
- }
113
- }, [paymethodsList.paymethods])
100
+ useEffect(() => {
101
+ if (paymethodsList.paymethods.length === 1) {
102
+ handlePaymethodClick && handlePaymethodClick(paymethodsList.paymethods[0])
103
+ }
104
+ }, [paymethodsList.paymethods])
114
105
 
115
- useEffect(() => {
116
- if (paymethodSelected?.gateway !== 'cash' && errorCash) {
117
- props.setErrorCash(false)
118
- }
119
- }, [paymethodSelected])
106
+ useEffect(() => {
107
+ if (paymethodSelected?.gateway !== 'cash' && errorCash) {
108
+ props.setErrorCash(false)
109
+ }
110
+ }, [paymethodSelected])
120
111
 
121
- useEffect(() => {
122
- if (props.paySelected && props.paySelected?.data) {
123
- setPaymethodData && setPaymethodData(props.paySelected?.data)
124
- }
125
- }, [props.paySelected])
112
+ useEffect(() => {
113
+ if (props.paySelected && props.paySelected?.data) {
114
+ requestAnimationFrame(() => {
115
+ setPaymethodData && setPaymethodData(props.paySelected?.data)
116
+ })
117
+ }
118
+ }, [props.paySelected])
126
119
 
127
- useEffect(() => {
128
- setCardData && setCardData(paymethodData)
129
- if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
130
- handlePlaceOrder()
131
- }
132
- }, [paymethodData, paymethodSelected])
120
+ useEffect(() => {
121
+ if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
122
+ handlePlaceOrder(confirmApplePayPayment)
123
+ }
124
+ }, [paymethodData, paymethodSelected])
133
125
 
134
- const renderPaymethods = ({ item }: any) => {
126
+ const renderPaymethods = ({ item }: any) => {
135
127
  return (
136
128
  <>
137
129
  {item?.gateway === 'apple_pay' ? (
@@ -174,252 +166,211 @@ const PaymentOptionsUI = (props: any) => {
174
166
  )
175
167
  }
176
168
 
177
- const excludeGateway: any = ['stripe_connect', 'stripe_redirect', 'apple_pay']; //exclude connect & redirect & apple pay
169
+ const excludeIds: any = [32];
178
170
 
179
- return (
180
- <PMContainer>
181
- {paymethodsList.paymethods.length > 0 && (
182
- <FlatList
183
- horizontal
184
- showsHorizontalScrollIndicator={false}
185
- // data={paymethodsList.paymethods.sort((a: any, b: any) => a.id - b.id)}
186
- data={paymethodsList.paymethods.sort((a: any, b: any) => a.id - b.id).filter((p: any) => !excludeGateway.includes(p.gateway))}
187
- renderItem={renderPaymethods}
188
- keyExtractor={(paymethod: any) => paymethod?.id?.toString?.()}
189
- />
190
- )}
191
- {(paymethodsList.loading || isLoading) && (
192
- <Placeholder style={{ marginTop: 10 }} Animation={Fade}>
193
- <View style={{ display: 'flex', flexDirection: 'row' }}>
194
- {[...Array(3)].map((_, i) => (
195
- <PlaceholderLine
196
- key={i}
197
- width={37}
198
- height={80}
199
- noMargin
200
- style={{ borderRadius: 10, marginRight: 10 }}
201
- />
202
- ))}
203
- </View>
204
- </Placeholder>
205
- )}
171
+ return (
172
+ <PMContainer>
173
+ {paymethodsList.paymethods.length > 0 && (
174
+ <FlatList
175
+ horizontal
176
+ showsHorizontalScrollIndicator={false}
177
+ data={paymethodsList.paymethods.sort((a: any, b: any) => a.id - b.id).filter((p: any) => !excludeIds.includes(p.id))}
178
+ renderItem={renderPaymethods}
179
+ keyExtractor={(paymethod: any) => paymethod?.id?.toString?.()}
180
+ />
181
+ )}
206
182
 
207
- {paymethodsList.error && paymethodsList.error.length > 0 && (
208
- <OText size={12} style={{ margin: 0 }}>
209
- {paymethodsList?.error[0]?.message || paymethodsList?.error[0]}
210
- </OText>
211
- )}
183
+ {(paymethodsList.loading || isLoading) && (
184
+ <Placeholder style={{ marginTop: 10 }} Animation={Fade}>
185
+ <View style={{ display: 'flex', flexDirection: 'row' }}>
186
+ {[...Array(3)].map((_, i) => (
187
+ <PlaceholderLine
188
+ key={i}
189
+ width={37}
190
+ height={80}
191
+ noMargin
192
+ style={{ borderRadius: 10, marginRight: 10 }}
193
+ />
194
+ ))}
195
+ </View>
196
+ </Placeholder>
197
+ )}
212
198
 
213
- {!(paymethodsList.loading || isLoading) &&
214
- !paymethodsList.error &&
215
- (!paymethodsList?.paymethods || paymethodsList.paymethods.length === 0) &&
216
- (
217
- <OText size={12} style={{ margin: 0 }}>
218
- {t('NO_PAYMENT_METHODS', 'No payment methods!')}
219
- </OText>
220
- )}
199
+ {paymethodsList.error && paymethodsList.error.length > 0 && (
200
+ <OText size={12} style={{ margin: 0 }}>
201
+ {paymethodsList?.error[0]?.message || paymethodsList?.error[0]}
202
+ </OText>
203
+ )}
221
204
 
222
- {paymethodSelected?.gateway === 'cash' && (
223
- <PaymentOptionCash
224
- orderTotal={cart.balance ?? cart.total}
225
- defaultValue={paymethodSelected?.data?.cash}
226
- onChangeData={handlePaymethodDataChange}
227
- setErrorCash={props.setErrorCash}
228
- />
229
- )}
205
+ {!(paymethodsList.loading || isLoading) &&
206
+ !paymethodsList.error &&
207
+ (!paymethodsList?.paymethods || paymethodsList.paymethods.length === 0) &&
208
+ (
209
+ <OText size={12} style={{ margin: 0 }}>
210
+ {t('NO_PAYMENT_METHODS', 'No payment methods!')}
211
+ </OText>
212
+ )}
230
213
 
231
- {stripeOptions.includes(paymethodSelected?.gateway) &&
232
- (paymethodData?.brand || paymethodData?.card?.brand) &&
233
- (paymethodData?.last4 || paymethodData?.card?.last4) &&
234
- (
235
- <PMCardSelected>
236
- <PMCardItemContent>
237
- <View style={styles.viewStyle}>
238
- <MaterialCommunityIcons
239
- name='radiobox-marked'
240
- size={24}
241
- color={theme.colors.primary}
242
- />
243
- </View>
244
- <View style={styles.viewStyle}>
245
- <OText>
246
- {getIconCard((paymethodData?.brand || paymethodData?.card?.brand), 26)}
247
- </OText>
248
- </View>
249
- <View style={styles.viewStyle}>
250
- <OText
251
- size={20}
252
- >
253
- XXXX-XXXX-XXXX-{(paymethodData?.last4 || paymethodData?.card?.last4)}
254
- </OText>
255
- </View>
256
- </PMCardItemContent>
257
- </PMCardSelected>
258
- )}
214
+ {paymethodSelected?.gateway === 'cash' && (
215
+ <PaymentOptionCash
216
+ orderTotal={cart.balance ?? cart.total}
217
+ defaultValue={paymethodSelected?.data?.cash}
218
+ onChangeData={handlePaymethodDataChange}
219
+ setErrorCash={props.setErrorCash}
220
+ />
221
+ )}
259
222
 
260
- {/* Stripe */}
261
- {isOpenMethod?.paymethod?.gateway === 'stripe' && !paymethodData?.id && (
262
- <View style={{ width: '100%' }}>
263
- <OButton
264
- text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
265
- bgColor={theme.colors.primary}
266
- borderColor={theme.colors.primary}
267
- style={styles.btnAddStyle}
268
- textStyle={{ color: 'white' }}
269
- imgRightSrc={null}
270
- onClick={() => setAddCardOpen({ ...addCardOpen, stripe: true })}
271
- />
272
- <StripeCardsList
273
- paymethod={isOpenMethod?.paymethod}
274
- businessId={props.businessId}
275
- publicKey={isOpenMethod?.paymethod?.credentials.publishable}
276
- payType={paymethodsList?.name}
277
- onSelectCard={handlePaymethodDataChange}
278
- onNavigationRedirect={onNavigationRedirect}
279
- onCancel={() => handlePaymethodClick(null)}
280
- />
281
- </View>
282
- )}
223
+ {stripeOptions.includes(paymethodSelected?.gateway) &&
224
+ (paymethodData?.brand || paymethodData?.card?.brand) &&
225
+ (paymethodData?.last4 || paymethodData?.card?.last4) &&
226
+ (
227
+ <PMCardSelected>
228
+ <PMCardItemContent>
229
+ <View style={styles.viewStyle}>
230
+ <OIcon
231
+ src={theme.images.general.radio_act}
232
+ width={16}
233
+ color={theme.colors.primary}
234
+ />
235
+ </View>
236
+ <View style={styles.viewStyle}>
237
+ <OText>
238
+ {getIconCard((paymethodData?.brand || paymethodData?.card?.brand), 20)}
239
+ </OText>
240
+ </View>
241
+ <View style={styles.viewStyle}>
242
+ <OText
243
+ size={12}
244
+ lineHeight={18}
245
+ color={theme.colors.textNormal}
246
+ >
247
+ XXXX-XXXX-XXXX-{(paymethodData?.last4 || paymethodData?.card?.last4)}
248
+ </OText>
249
+ </View>
250
+ </PMCardItemContent>
251
+ </PMCardSelected>
252
+ )}
283
253
 
284
- <OModal
285
- entireModal
286
- title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
287
- open={addCardOpen.stripe}
288
- onClose={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
289
- >
290
- <KeyboardAvoidingView
291
- behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
292
- keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
293
- enabled={Platform.OS === 'ios' ? true : false}
294
- >
295
- <StripeElementsForm
296
- toSave
297
- businessId={props.businessId}
298
- publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
299
- requirements={props.clientSecret}
300
- onSelectCard={handlePaymethodDataChange}
301
- onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
302
- />
303
- </KeyboardAvoidingView>
304
- </OModal>
254
+ {/* Stripe */}
255
+ {isOpenMethod?.paymethod?.gateway === 'stripe' && !paymethodData?.id && (
256
+ <View>
257
+ <OButton
258
+ text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
259
+ bgColor={theme.colors.white}
260
+ borderColor={theme.colors.primary}
261
+ style={styles.btnAddStyle}
262
+ textStyle={{ color: theme.colors.primary, fontSize: 12 }}
263
+ imgRightSrc={null}
264
+ onClick={() => setAddCardOpen({ ...addCardOpen, stripe: true })}
265
+ />
266
+ <StripeCardsList
267
+ paymethod={isOpenMethod?.paymethod}
268
+ businessId={props.businessId}
269
+ publicKey={isOpenMethod?.paymethod?.credentials.publishable}
270
+ payType={paymethodsList?.name}
271
+ onSelectCard={handlePaymethodDataChange}
272
+ onNavigationRedirect={onNavigationRedirect}
273
+ onCancel={() => handlePaymethodClick(null)}
274
+ />
275
+ </View>
276
+ )}
305
277
 
306
- {/* Stripe direct, Google pay, Apple pay */}
307
- <OModal
308
- entireModal
309
- title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
310
- open={stripeDirectMethods?.includes(isOpenMethod?.paymethod?.gateway) && !paymethodData.id}
311
- onClose={() => handlePaymethodClick(null)}
312
- >
313
- <KeyboardAvoidingView
314
- behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
315
- keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
316
- enabled={Platform.OS === 'ios' ? true : false}
317
- >
318
- <StripeElementsForm
319
- cart={cart}
320
- paymethod={isOpenMethod?.paymethod?.gateway}
321
- methodsPay={methodsPay}
322
- businessId={props.businessId}
323
- publicKey={isOpenMethod?.paymethod?.credentials?.publishable || isOpenMethod?.paymethod?.credentials?.publishable_key}
324
- handleSource={handlePaymethodDataChange}
325
- onCancel={() => handlePaymethodClick(null)}
326
- merchantId={merchantId}
327
- />
328
- </KeyboardAvoidingView>
329
- </OModal>
278
+ <OModal
279
+ entireModal
280
+ title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
281
+ open={addCardOpen.stripe}
282
+ onClose={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
283
+ style={{ backgroundColor: 'red' }}
284
+ >
285
+ <KeyboardAvoidingView
286
+ behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
287
+ keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
288
+ enabled={Platform.OS === 'ios' ? true : false}
289
+ >
290
+ <StripeElementsForm
291
+ toSave
292
+ businessId={props.businessId}
293
+ publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
294
+ requirements={props.clientSecret}
295
+ onSelectCard={handlePaymethodDataChange}
296
+ onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
297
+ />
298
+ </KeyboardAvoidingView>
299
+ </OModal>
330
300
 
331
- {/* Stripe Connect */}
332
- {isOpenMethod?.paymethod?.gateway === 'stripe_connect' && !paymethodData?.id && (
333
- <View>
334
- <OButton
335
- text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
336
- bgColor={theme.colors.primary}
337
- borderColor={theme.colors.primary}
338
- style={styles.btnAddStyle}
339
- textStyle={{ color: 'white' }}
340
- imgRightSrc={null}
341
- onClick={() => setAddCardOpen({ ...addCardOpen, stripeConnect: true })}
342
- />
343
- <StripeCardsList
344
- paymethod={isOpenMethod?.paymethod}
345
- businessId={props.businessId}
346
- publicKey={isOpenMethod?.paymethod?.credentials.publishable}
347
- payType={paymethodsList?.name}
348
- onSelectCard={handlePaymethodDataChange}
349
- onNavigationRedirect={onNavigationRedirect}
350
- onCancel={() => handlePaymethodClick(null)}
351
- />
352
- </View>
353
- )}
301
+ {/* Stripe direct, Google pay, Apple pay */}
302
+ <OModal
303
+ entireModal
304
+ title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
305
+ open={stripeDirectMethods?.includes(isOpenMethod?.paymethod?.gateway) && !paymethodData.id}
306
+ onClose={() => handlePaymethodClick(null)}
307
+ >
308
+ <KeyboardAvoidingView
309
+ behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
310
+ keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
311
+ enabled={Platform.OS === 'ios' ? true : false}
312
+ >
313
+ <StripeElementsForm
314
+ cart={cart}
315
+ paymethod={isOpenMethod?.paymethod?.gateway}
316
+ methodsPay={methodsPay}
317
+ businessId={props.businessId}
318
+ publicKey={isOpenMethod?.paymethod?.credentials?.publishable || isOpenMethod?.paymethod?.credentials?.publishable_key}
319
+ handleSource={handlePaymethodDataChange}
320
+ onCancel={() => handlePaymethodClick(null)}
321
+ merchantId={merchantId}
322
+ />
323
+ </KeyboardAvoidingView>
324
+ </OModal>
354
325
 
355
- <OModal
356
- entireModal
357
- title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
358
- open={addCardOpen.stripeConnect}
359
- onClose={() => setAddCardOpen({ ...addCardOpen, stripeConnect: false })}
360
- >
361
- <KeyboardAvoidingView
362
- behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
363
- keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
364
- enabled={Platform.OS === 'ios' ? true : false}
365
- >
366
- <StripeElementsForm
367
- toSave
368
- businessId={props.businessId}
369
- publicKey={isOpenMethod?.paymethod?.credentials?.stripe?.publishable}
370
- requirements={isOpenMethod?.paymethod?.credentials?.publishable}
371
- accountId={isOpenMethod?.paymethod?.credentials?.user}
372
- onSelectCard={handlePaymethodDataChange}
373
- onCancel={() => setAddCardOpen({ ...addCardOpen, stripeConnect: false })}
374
- />
375
- </KeyboardAvoidingView>
376
- </OModal>
326
+ {/* Stripe Connect */}
327
+ {isOpenMethod?.paymethod?.gateway === 'stripe_connect' && !paymethodData?.id && (
328
+ <View>
329
+ <OButton
330
+ text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
331
+ bgColor={theme.colors.white}
332
+ borderColor={theme.colors.primary}
333
+ style={styles.btnAddStyle}
334
+ textStyle={{ color: theme.colors.primary, fontSize: 12 }}
335
+ imgRightSrc={null}
336
+ onClick={() => setAddCardOpen({ ...addCardOpen, stripeConnect: true })}
337
+ />
338
+ <StripeCardsList
339
+ paymethod={isOpenMethod?.paymethod}
340
+ businessId={props.businessId}
341
+ publicKey={isOpenMethod?.paymethod?.credentials.publishable}
342
+ payType={paymethodsList?.name}
343
+ onSelectCard={handlePaymethodDataChange}
344
+ onNavigationRedirect={onNavigationRedirect}
345
+ onCancel={() => handlePaymethodClick(null)}
346
+ />
347
+ </View>
348
+ )}
377
349
 
378
- {/* Stripe Redirect */}
379
- {/* <OModal
380
- isNotDecoration
381
- open={['stripe_redirect'].includes(paymethodSelected?.gateway) && !paymethodData.type}
382
- title={t('STRIPE_REDIRECT', 'Stripe Redirect')}
383
- onClose={() => handlePaymethodClick(null)}
384
- >
385
- <StripeRedirectForm
386
- businessId={props.businessId}
387
- currency={props.currency}
388
- // paymethods={flatArray([stripeRedirectValues, stripeRedirectOptions])}
389
- publicKey={paymethodSelected?.credentials?.publishable}
390
- paymethods={stripeRedirectOptions}
391
- handleStripeRedirect={handlePaymethodDataChange}
392
- />
393
- </OModal> */}
394
-
395
- {/* Paypal */}
396
- {/* <Modal
397
- className='modal-info'
398
- open={paymethodSelected?.gateway === 'paypal' && !paymethodData?.id}
399
- onClose={() => handlePaymethodClick(null)}
400
- title={t('PAY_WITH_PAYPAL', 'Pay with PayPal')}
401
- >
402
- {paymethodSelected?.gateway === 'paypal' && (
403
- <PaymentOptionPaypal
404
- clientId={paymethodSelected?.credentials?.client_id}
405
- body={{
406
- paymethod_id: paymethodSelected.id,
407
- amount: cart.total,
408
- delivery_zone_id: cart.delivery_zone_id,
409
- cartUuid: cart.uuid
410
- }}
411
- btnStyle={paypalBtnStyle}
412
- noAuthMessage={
413
- !token
414
- ? t('NEED_LOGIN_TO_USE', 'Sorry, you need to login to use this method')
415
- : null
416
- }
417
- handlerChangePaypal={(uuid) => onNavigationRedirect && onNavigationRedirect('OrderDetails', { orderId: uuid })}
418
- />
419
- )}
420
- </Modal> */}
421
- </PMContainer>
422
- )
350
+ <OModal
351
+ entireModal
352
+ title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
353
+ open={addCardOpen.stripeConnect}
354
+ onClose={() => setAddCardOpen({ ...addCardOpen, stripeConnect: false })}
355
+ >
356
+ <KeyboardAvoidingView
357
+ behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
358
+ keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
359
+ enabled={Platform.OS === 'ios' ? true : false}
360
+ >
361
+ <StripeElementsForm
362
+ toSave
363
+ businessId={props.businessId}
364
+ publicKey={isOpenMethod?.paymethod?.credentials?.stripe?.publishable}
365
+ requirements={isOpenMethod?.paymethod?.credentials?.publishable}
366
+ accountId={isOpenMethod?.paymethod?.credentials?.user}
367
+ onSelectCard={handlePaymethodDataChange}
368
+ onCancel={() => setAddCardOpen({ ...addCardOpen, stripeConnect: false })}
369
+ />
370
+ </KeyboardAvoidingView>
371
+ </OModal>
372
+ </PMContainer>
373
+ )
423
374
  }
424
375
 
425
376
  const styles = StyleSheet.create({
@@ -454,11 +405,11 @@ const styles = StyleSheet.create({
454
405
  })
455
406
 
456
407
  export const PaymentOptions = (props: any) => {
457
- const paymentOptions = {
458
- ...props,
459
- UIComponent: PaymentOptionsUI
460
- }
461
- return (
462
- <PaymentOptionsController {...paymentOptions} />
463
- )
408
+ const paymentOptions = {
409
+ ...props,
410
+ UIComponent: PaymentOptionsUI
411
+ }
412
+ return (
413
+ <PaymentOptionsController {...paymentOptions} />
414
+ )
464
415
  }