ordering-ui-react-native 0.16.74 → 0.16.76

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 (7) hide show
  1. package/package.json +1 -1
  2. package/src/components/Checkout/index.tsx +2 -1
  3. package/src/components/PaymentOptions/index.tsx +298 -345
  4. package/src/components/StripeElementsForm/index.tsx +25 -16
  5. package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx +16 -16
  6. package/themes/original/src/components/PaymentOptions/index.tsx +0 -1
  7. package/themes/original/src/components/StripeElementsForm/index.tsx +10 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.16.74",
3
+ "version": "0.16.76",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/src/components/Checkout/index.tsx CHANGED
@@ -93,7 +93,7 @@ const CheckoutUI = (props: any) => {
93
93
  deliveryOptionSelected,
94
94
  instructionsOptions,
95
95
  handleChangeDeliveryOption,
96
-
96
+ merchantId
97
97
  } = props
98
98
 
99
99
  const theme = useTheme();
@@ -530,6 +530,7 @@ const CheckoutUI = (props: any) => {
530
530
  handlePaymentMethodClickCustom={handlePaymentMethodClick}
531
531
  setCardData={setCardData}
532
532
  handlePlaceOrder={handlePlaceOrder}
533
+ merchantId={merchantId}
533
534
  />
534
535
  </ChPaymethods>
535
536
  </ChSection>
package/src/components/PaymentOptions/index.tsx CHANGED
@@ -1,136 +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
- } = 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
67
53
 
68
- const theme = useTheme();
54
+ const theme = useTheme();
69
55
  const [, t] = useLanguage();
70
- const methodsPay = ['google_pay']
71
- const stripeDirectMethods = ['stripe_direct', ...methodsPay]
56
+ const [, { showToast }] = useToast();
57
+ const { confirmApplePayPayment } = useApplePay()
72
58
 
73
59
  const [addCardOpen, setAddCardOpen] = useState({ stripe: false, stripeConnect: false });
74
- let paymethodSelected = props.paySelected || props.paymethodSelected || isOpenMethod?.paymethod
60
+ const paymethodSelected = props.paySelected || props.paymethodSelected || isOpenMethod?.paymethod
75
61
 
76
- const getPayIcon = (method: string) => {
77
- switch (method) {
78
- case 'cash':
79
- return theme.images.general.cash
80
- case 'card_delivery':
81
- return theme.images.general.carddelivery
82
- case 'paypal':
83
- return theme.images.general.paypal
84
- case 'stripe':
85
- return theme.images.general.stripe
86
- case 'stripe_direct':
87
- return theme.images.general.stripecc
88
- case 'stripe_connect':
89
- return theme.images.general.stripes
90
- case 'stripe_redirect':
91
- return theme.images.general.stripesb
92
- case 'apple_pay':
93
- return theme.images.general.applePayMark
94
- default:
95
- return theme.images.general.creditCard
96
- }
97
- }
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
+ }
98
84
 
99
- const handlePaymentMethodClick = (paymethod: any) => {
100
- const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal', 'square'].includes(paymethod?.gateway)
101
- handlePaymethodClick(paymethod, isPopupMethod)
102
- if (webViewPaymentGateway.includes(paymethod?.gateway)) {
103
- handlePaymentMethodClickCustom(paymethod)
104
- }
105
- setCardData(paymethodData)
106
- }
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
+ }
107
99
 
108
- useEffect(() => {
109
- if (paymethodsList.paymethods.length === 1) {
110
- handlePaymethodClick && handlePaymethodClick(paymethodsList.paymethods[0])
111
- }
112
- }, [paymethodsList.paymethods])
100
+ useEffect(() => {
101
+ if (paymethodsList.paymethods.length === 1) {
102
+ handlePaymethodClick && handlePaymethodClick(paymethodsList.paymethods[0])
103
+ }
104
+ }, [paymethodsList.paymethods])
113
105
 
114
- useEffect(() => {
115
- if (paymethodSelected?.gateway !== 'cash' && errorCash) {
116
- props.setErrorCash(false)
117
- }
118
- }, [paymethodSelected])
106
+ useEffect(() => {
107
+ if (paymethodSelected?.gateway !== 'cash' && errorCash) {
108
+ props.setErrorCash(false)
109
+ }
110
+ }, [paymethodSelected])
119
111
 
120
- useEffect(() => {
121
- if (props.paySelected && props.paySelected?.data) {
122
- setPaymethodData && setPaymethodData(props.paySelected?.data)
123
- }
124
- }, [props.paySelected])
112
+ useEffect(() => {
113
+ if (props.paySelected && props.paySelected?.data) {
114
+ requestAnimationFrame(() => {
115
+ setPaymethodData && setPaymethodData(props.paySelected?.data)
116
+ })
117
+ }
118
+ }, [props.paySelected])
125
119
 
126
- useEffect(() => {
127
- setCardData && setCardData(paymethodData)
128
- if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
129
- handlePlaceOrder()
130
- }
131
- }, [paymethodData, paymethodSelected])
120
+ useEffect(() => {
121
+ if (methodsPay.includes(paymethodSelected?.gateway) && paymethodData?.id && paymethodSelected?.data?.card) {
122
+ handlePlaceOrder(confirmApplePayPayment)
123
+ }
124
+ }, [paymethodData, paymethodSelected])
132
125
 
133
- const renderPaymethods = ({ item }: any) => {
126
+ const renderPaymethods = ({ item }: any) => {
134
127
  return (
135
128
  <>
136
129
  {item?.gateway === 'apple_pay' ? (
@@ -173,251 +166,211 @@ const PaymentOptionsUI = (props: any) => {
173
166
  )
174
167
  }
175
168
 
176
- const excludeGateway: any = ['stripe_connect', 'stripe_redirect', 'apple_pay']; //exclude connect & redirect & apple pay
169
+ const excludeIds: any = [32];
177
170
 
178
- return (
179
- <PMContainer>
180
- {paymethodsList.paymethods.length > 0 && (
181
- <FlatList
182
- horizontal
183
- showsHorizontalScrollIndicator={false}
184
- // data={paymethodsList.paymethods.sort((a: any, b: any) => a.id - b.id)}
185
- data={paymethodsList.paymethods.sort((a: any, b: any) => a.id - b.id).filter((p: any) => !excludeGateway.includes(p.gateway))}
186
- renderItem={renderPaymethods}
187
- keyExtractor={(paymethod: any) => paymethod?.id?.toString?.()}
188
- />
189
- )}
190
- {(paymethodsList.loading || isLoading) && (
191
- <Placeholder style={{ marginTop: 10 }} Animation={Fade}>
192
- <View style={{ display: 'flex', flexDirection: 'row' }}>
193
- {[...Array(3)].map((_, i) => (
194
- <PlaceholderLine
195
- key={i}
196
- width={37}
197
- height={80}
198
- noMargin
199
- style={{ borderRadius: 10, marginRight: 10 }}
200
- />
201
- ))}
202
- </View>
203
- </Placeholder>
204
- )}
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
+ )}
205
182
 
206
- {paymethodsList.error && paymethodsList.error.length > 0 && (
207
- <OText size={12} style={{ margin: 0 }}>
208
- {paymethodsList?.error[0]?.message || paymethodsList?.error[0]}
209
- </OText>
210
- )}
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
+ )}
211
198
 
212
- {!(paymethodsList.loading || isLoading) &&
213
- !paymethodsList.error &&
214
- (!paymethodsList?.paymethods || paymethodsList.paymethods.length === 0) &&
215
- (
216
- <OText size={12} style={{ margin: 0 }}>
217
- {t('NO_PAYMENT_METHODS', 'No payment methods!')}
218
- </OText>
219
- )}
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
+ )}
220
204
 
221
- {paymethodSelected?.gateway === 'cash' && (
222
- <PaymentOptionCash
223
- orderTotal={cart.total}
224
- defaultValue={paymethodSelected?.data?.cash}
225
- onChangeData={handlePaymethodDataChange}
226
- setErrorCash={props.setErrorCash}
227
- />
228
- )}
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
+ )}
229
213
 
230
- {stripeOptions.includes(paymethodSelected?.gateway) &&
231
- (paymethodData?.brand || paymethodData?.card?.brand) &&
232
- (paymethodData?.last4 || paymethodData?.card?.last4) &&
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
- )}
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
+ )}
258
222
 
259
- {/* Stripe */}
260
- {isOpenMethod?.paymethod?.gateway === 'stripe' && !paymethodData?.id && (
261
- <View style={{ width: '100%' }}>
262
- <OButton
263
- text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
264
- bgColor={theme.colors.primary}
265
- borderColor={theme.colors.primary}
266
- style={styles.btnAddStyle}
267
- textStyle={{ color: 'white' }}
268
- imgRightSrc={null}
269
- onClick={() => setAddCardOpen({ ...addCardOpen, stripe: true })}
270
- />
271
- <StripeCardsList
272
- paymethod={isOpenMethod?.paymethod}
273
- businessId={props.businessId}
274
- publicKey={isOpenMethod?.paymethod?.credentials.publishable}
275
- payType={paymethodsList?.name}
276
- onSelectCard={handlePaymethodDataChange}
277
- onNavigationRedirect={onNavigationRedirect}
278
- onCancel={() => handlePaymethodClick(null)}
279
- />
280
- </View>
281
- )}
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
+ )}
282
253
 
283
- <OModal
284
- entireModal
285
- title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
286
- open={addCardOpen.stripe}
287
- onClose={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
288
- >
289
- <KeyboardAvoidingView
290
- behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
291
- keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
292
- enabled={Platform.OS === 'ios' ? true : false}
293
- >
294
- <StripeElementsForm
295
- toSave
296
- businessId={props.businessId}
297
- publicKey={isOpenMethod?.paymethod?.credentials?.publishable}
298
- requirements={props.clientSecret}
299
- onSelectCard={handlePaymethodDataChange}
300
- onCancel={() => setAddCardOpen({ ...addCardOpen, stripe: false })}
301
- />
302
- </KeyboardAvoidingView>
303
- </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
+ )}
304
277
 
305
- {/* Stripe direct, Google pay, Apple pay */}
306
- <OModal
307
- entireModal
308
- title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
309
- open={stripeDirectMethods?.includes(isOpenMethod?.paymethod?.gateway) && !paymethodData.id}
310
- onClose={() => handlePaymethodClick(null)}
311
- >
312
- <KeyboardAvoidingView
313
- behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
314
- keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
315
- enabled={Platform.OS === 'ios' ? true : false}
316
- >
317
- <StripeElementsForm
318
- cart={cart}
319
- paymethod={isOpenMethod?.paymethod?.gateway}
320
- methodsPay={methodsPay}
321
- businessId={props.businessId}
322
- publicKey={isOpenMethod?.paymethod?.credentials?.publishable || isOpenMethod?.paymethod?.credentials?.publishable_key}
323
- handleSource={handlePaymethodDataChange}
324
- onCancel={() => handlePaymethodClick(null)}
325
- />
326
- </KeyboardAvoidingView>
327
- </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>
328
300
 
329
- {/* Stripe Connect */}
330
- {isOpenMethod?.paymethod?.gateway === 'stripe_connect' && !paymethodData?.id && (
331
- <View>
332
- <OButton
333
- text={t('ADD_PAYMENT_CARD', 'Add New Payment Card')}
334
- bgColor={theme.colors.primary}
335
- borderColor={theme.colors.primary}
336
- style={styles.btnAddStyle}
337
- textStyle={{ color: 'white' }}
338
- imgRightSrc={null}
339
- onClick={() => setAddCardOpen({ ...addCardOpen, stripeConnect: true })}
340
- />
341
- <StripeCardsList
342
- paymethod={isOpenMethod?.paymethod}
343
- businessId={props.businessId}
344
- publicKey={isOpenMethod?.paymethod?.credentials.publishable}
345
- payType={paymethodsList?.name}
346
- onSelectCard={handlePaymethodDataChange}
347
- onNavigationRedirect={onNavigationRedirect}
348
- onCancel={() => handlePaymethodClick(null)}
349
- />
350
- </View>
351
- )}
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>
352
325
 
353
- <OModal
354
- entireModal
355
- title={t('ADD_CREDIT_OR_DEBIT_CARD', 'Add credit or debit card')}
356
- open={addCardOpen.stripeConnect}
357
- onClose={() => setAddCardOpen({ ...addCardOpen, stripeConnect: false })}
358
- >
359
- <KeyboardAvoidingView
360
- behavior={Platform.OS == 'ios' ? 'padding' : 'height'}
361
- keyboardVerticalOffset={Platform.OS == 'ios' ? 0 : 0}
362
- enabled={Platform.OS === 'ios' ? true : false}
363
- >
364
- <StripeElementsForm
365
- toSave
366
- businessId={props.businessId}
367
- publicKey={isOpenMethod?.paymethod?.credentials?.stripe?.publishable}
368
- requirements={isOpenMethod?.paymethod?.credentials?.publishable}
369
- accountId={isOpenMethod?.paymethod?.credentials?.user}
370
- onSelectCard={handlePaymethodDataChange}
371
- onCancel={() => setAddCardOpen({ ...addCardOpen, stripeConnect: false })}
372
- />
373
- </KeyboardAvoidingView>
374
- </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
+ )}
375
349
 
376
- {/* Stripe Redirect */}
377
- {/* <OModal
378
- isNotDecoration
379
- open={['stripe_redirect'].includes(paymethodSelected?.gateway) && !paymethodData.type}
380
- title={t('STRIPE_REDIRECT', 'Stripe Redirect')}
381
- onClose={() => handlePaymethodClick(null)}
382
- >
383
- <StripeRedirectForm
384
- businessId={props.businessId}
385
- currency={props.currency}
386
- // paymethods={flatArray([stripeRedirectValues, stripeRedirectOptions])}
387
- publicKey={paymethodSelected?.credentials?.publishable}
388
- paymethods={stripeRedirectOptions}
389
- handleStripeRedirect={handlePaymethodDataChange}
390
- />
391
- </OModal> */}
392
-
393
- {/* Paypal */}
394
- {/* <Modal
395
- className='modal-info'
396
- open={paymethodSelected?.gateway === 'paypal' && !paymethodData?.id}
397
- onClose={() => handlePaymethodClick(null)}
398
- title={t('PAY_WITH_PAYPAL', 'Pay with PayPal')}
399
- >
400
- {paymethodSelected?.gateway === 'paypal' && (
401
- <PaymentOptionPaypal
402
- clientId={paymethodSelected?.credentials?.client_id}
403
- body={{
404
- paymethod_id: paymethodSelected.id,
405
- amount: cart.total,
406
- delivery_zone_id: cart.delivery_zone_id,
407
- cartUuid: cart.uuid
408
- }}
409
- btnStyle={paypalBtnStyle}
410
- noAuthMessage={
411
- !token
412
- ? t('NEED_LOGIN_TO_USE', 'Sorry, you need to login to use this method')
413
- : null
414
- }
415
- handlerChangePaypal={(uuid) => onNavigationRedirect && onNavigationRedirect('OrderDetails', { orderId: uuid })}
416
- />
417
- )}
418
- </Modal> */}
419
- </PMContainer>
420
- )
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
+ )
421
374
  }
422
375
 
423
376
  const styles = StyleSheet.create({
@@ -452,11 +405,11 @@ const styles = StyleSheet.create({
452
405
  })
453
406
 
454
407
  export const PaymentOptions = (props: any) => {
455
- const paymentOptions = {
456
- ...props,
457
- UIComponent: PaymentOptionsUI
458
- }
459
- return (
460
- <PaymentOptionsController {...paymentOptions} />
461
- )
408
+ const paymentOptions = {
409
+ ...props,
410
+ UIComponent: PaymentOptionsUI
411
+ }
412
+ return (
413
+ <PaymentOptionsController {...paymentOptions} />
414
+ )
462
415
  }
package/src/components/StripeElementsForm/index.tsx CHANGED
@@ -7,7 +7,6 @@ import {
7
7
  useConfirmSetupIntent,
8
8
  createPaymentMethod
9
9
  } from '@stripe/stripe-react-native';
10
- import configs from '../../config.json'
11
10
  import { ErrorMessage } from './styles';
12
11
 
13
12
  import { StripeElementsForm as StripeFormController } from './naked';
@@ -26,7 +25,8 @@ const StripeElementsFormUI = (props: any) => {
26
25
  methodsPay,
27
26
  paymethod,
28
27
  onCancel,
29
- cart
28
+ cart,
29
+ merchantId
30
30
  } = props;
31
31
 
32
32
  const theme = useTheme();
@@ -54,17 +54,25 @@ const StripeElementsFormUI = (props: any) => {
54
54
  }
55
55
 
56
56
  if (user?.address) {
57
- billingDetails.addressLine1 = user?.address
58
- }
57
+ billingDetails.address = {
58
+ line1: user?.address
59
+ }
60
+ }
59
61
 
60
62
  const createPayMethod = async () => {
61
- const params: any = { type: 'Card' }
62
- if (Object.keys(billingDetails).length > 0) {
63
- params.billingDetails = billingDetails
64
- }
63
+ const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
64
+ if (Object.keys(billingDetails).length > 0) {
65
+ params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
66
+ }
65
67
  try {
66
68
  setCreatePmLoading(true)
67
- const { paymentMethod } = await createPaymentMethod(params);
69
+ const { paymentMethod, error } = await createPaymentMethod(params);
70
+
71
+ if (error) {
72
+ setErrors(error?.message);
73
+ setCreatePmLoading(false)
74
+ return
75
+ }
68
76
 
69
77
  setCreatePmLoading(false)
70
78
  handleSource && handleSource({
@@ -87,10 +95,10 @@ const StripeElementsFormUI = (props: any) => {
87
95
  createPayMethod();
88
96
  return
89
97
  }
90
- const params: any = { type: 'Card' }
91
- if (Object.keys(billingDetails).length > 0) {
92
- params.billingDetails = billingDetails
93
- }
98
+ const params: any = { paymentMethodType: 'Card', paymentMethodData: {} }
99
+ if (Object.keys(billingDetails).length > 0) {
100
+ params.paymentMethodData.billingDetails = {...billingDetails, token: card?.last4}
101
+ }
94
102
  try {
95
103
  const { setupIntent, error } = await confirmSetupIntent(requirements, params);
96
104
 
@@ -126,12 +134,13 @@ const StripeElementsFormUI = (props: any) => {
126
134
  <View style={styles.container}>
127
135
  {publicKey ? (
128
136
  <View style={{ flex: 1 }}>
129
- <StripeProvider
137
+ <StripeProvider
130
138
  publishableKey={publicKey}
131
- merchantIdentifier={`merchant.${configs.apple_app_id}`}
139
+ merchantIdentifier={`merchant.${merchantId}`}
140
+ urlScheme={merchantId}
132
141
  >
133
142
  {methodsPay?.includes(paymethod) ? (
134
- <StripeMethodForm
143
+ <StripeMethodForm
135
144
  handleSource={handleSource}
136
145
  onCancel={onCancel}
137
146
  cart={cart}
package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx CHANGED
@@ -372,7 +372,7 @@ export const OrderContentComponent = (props: OrderContent) => {
372
372
  <Table>
373
373
  <OText mBottom={4}>{t('SUBTOTAL', 'Subtotal')}</OText>
374
374
  <OText mBottom={4}>
375
- {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()))}
375
+ {parsePrice(((order?.summary?.subtotal ?? order?.subtotal) + getIncludedTaxes()), { currency: order?.currency})}
376
376
  </OText>
377
377
  </Table>
378
378
  {(order?.summary?.discount > 0 ?? order?.discount > 0) && order?.offers?.length === 0 && (
@@ -385,7 +385,7 @@ export const OrderContentComponent = (props: OrderContent) => {
385
385
  ) : (
386
386
  <OText mBottom={4}>{t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}</OText>
387
387
  )}
388
- <OText>- {parsePrice(order?.summary?.discount ?? order?.discount)}</OText>
388
+ <OText>- {parsePrice(order?.summary?.discount ?? order?.discount, { currency: order?.currency})}</OText>
389
389
  </Table>
390
390
  )}
391
391
  {
@@ -399,7 +399,7 @@ export const OrderContentComponent = (props: OrderContent) => {
399
399
  )}
400
400
  </OText>
401
401
  </OSRow>
402
- <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
402
+ <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency})}</OText>
403
403
  </Table>
404
404
  ))
405
405
  }
@@ -407,9 +407,9 @@ export const OrderContentComponent = (props: OrderContent) => {
407
407
  <Table>
408
408
  <OText mBottom={4}>{t('SUBTOTAL_WITH_DISCOUNT', 'Subtotal with discount')}</OText>
409
409
  {order?.tax_type === 1 ? (
410
- <OText mBottom={4}>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0))}</OText>
410
+ <OText mBottom={4}>{parsePrice((order?.summary?.subtotal_with_discount + getIncludedTaxesDiscounts() ?? 0), { currency: order?.currency})}</OText>
411
411
  ) : (
412
- <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0)}</OText>
412
+ <OText mBottom={4}>{parsePrice(order?.summary?.subtotal_with_discount ?? 0, { currency: order?.currency})}</OText>
413
413
  )}
414
414
  </Table>
415
415
  )}
@@ -419,7 +419,7 @@ export const OrderContentComponent = (props: OrderContent) => {
419
419
  {t('TAX', 'Tax')} {`(${verifyDecimals(order?.tax, parseNumber)}%)`}
420
420
  </OText>
421
421
  <OText mBottom={4}>
422
- {parsePrice(order?.summary?.tax ?? 0)}
422
+ {parsePrice(order?.summary?.tax ?? 0, { currency: order?.currency})}
423
423
  </OText>
424
424
  </Table>
425
425
  )}
@@ -430,7 +430,7 @@ export const OrderContentComponent = (props: OrderContent) => {
430
430
  {t('SERVICE_FEE', 'Service fee')}
431
431
  {`(${verifyDecimals(order?.service_fee, parseNumber)}%)`}
432
432
  </OText>
433
- <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0)}</OText>
433
+ <OText mBottom={4}>{parsePrice(order?.summary?.service_fee ?? 0, { currency: order?.currency})}</OText>
434
434
  </Table>
435
435
  )
436
436
  }
@@ -443,7 +443,7 @@ export const OrderContentComponent = (props: OrderContent) => {
443
443
  {`(${verifyDecimals(tax?.rate, parseNumber)}%)`}{' '}
444
444
  </OText>
445
445
  </OSRow>
446
- <OText mBottom={4}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0)}</OText>
446
+ <OText mBottom={4}>{parsePrice(tax?.summary?.tax_after_discount ?? tax?.summary?.tax ?? 0, { currency: order?.currency})}</OText>
447
447
  </Table>
448
448
  ))
449
449
  }
@@ -453,10 +453,10 @@ export const OrderContentComponent = (props: OrderContent) => {
453
453
  <OSRow>
454
454
  <OText mBottom={4}>
455
455
  {fee.name || t('INHERIT_FROM_BUSINESS', 'Inherit from business')}
456
- ({fee?.fixed > 0 && `${parsePrice(fee?.fixed)} + `}{fee.percentage}%){' '}
456
+ ({fee?.fixed > 0 && `${parsePrice(fee?.fixed, { currency: order?.currency})} + `}{fee.percentage}%){' '}
457
457
  </OText>
458
458
  </OSRow>
459
- <OText mBottom={4}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0)}</OText>
459
+ <OText mBottom={4}>{parsePrice(fee?.summary?.fixed + (fee?.summary?.percentage_after_discount ?? fee?.summary?.percentage) ?? 0, { currency: order?.currency})}</OText>
460
460
  </Table>
461
461
  ))
462
462
  }
@@ -471,7 +471,7 @@ export const OrderContentComponent = (props: OrderContent) => {
471
471
  )}
472
472
  </OText>
473
473
  </OSRow>
474
- <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
474
+ <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency})}</OText>
475
475
  </Table>
476
476
  ))
477
477
  }
@@ -483,7 +483,7 @@ export const OrderContentComponent = (props: OrderContent) => {
483
483
  </OText>
484
484
 
485
485
  <OText mBottom={4}>
486
- {parsePrice(order?.summary?.delivery_price)}
486
+ {parsePrice(order?.summary?.delivery_price, { currency: order?.currency})}
487
487
  </OText>
488
488
  </Table>
489
489
  )
@@ -499,7 +499,7 @@ export const OrderContentComponent = (props: OrderContent) => {
499
499
  )}
500
500
  </OText>
501
501
  </OSRow>
502
- <OText mBottom={4}>- {parsePrice(offer?.summary?.discount)}</OText>
502
+ <OText mBottom={4}>- {parsePrice(offer?.summary?.discount, { currency: order?.currency})}</OText>
503
503
  </Table>
504
504
  ))
505
505
  }
@@ -514,7 +514,7 @@ export const OrderContentComponent = (props: OrderContent) => {
514
514
  `(${verifyDecimals(order?.summary?.driver_tip, parseNumber)}%)`
515
515
  )}
516
516
  </OText>
517
- <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip)}</OText>
517
+ <OText mBottom={4}>{parsePrice(order?.summary?.driver_tip ?? order?.totalDriverTip, { currency: order?.currency})}</OText>
518
518
  </Table>
519
519
  )}
520
520
 
@@ -528,7 +528,7 @@ export const OrderContentComponent = (props: OrderContent) => {
528
528
  mBottom={4}
529
529
  style={styles.textBold}
530
530
  color={theme.colors.primary}>
531
- {parsePrice(order?.summary?.total ?? order?.total)}
531
+ {parsePrice(order?.summary?.total ?? order?.total, { currency: order?.currency})}
532
532
  </OText>
533
533
  </Table>
534
534
  </Total>
@@ -571,7 +571,7 @@ export const OrderContentComponent = (props: OrderContent) => {
571
571
  )}
572
572
  </View>
573
573
  <OText>
574
- -{parsePrice(event.amount)}
574
+ -{parsePrice(event.amount, { currency: order?.currency})}
575
575
  </OText>
576
576
  </View>
577
577
  ))}
package/themes/original/src/components/PaymentOptions/index.tsx CHANGED
@@ -160,7 +160,6 @@ const PaymentOptionsUI = (props: any) => {
160
160
  <TouchableOpacity
161
161
  onPress={() => handlePaymentMethodClick(item)}
162
162
  >
163
- {console.log(item?.gateway)}
164
163
  <PMItem
165
164
  key={item.id}
166
165
  isDisabled={isDisabled}
package/themes/original/src/components/StripeElementsForm/index.tsx CHANGED
@@ -61,7 +61,9 @@ const StripeElementsFormUI = (props: any) => {
61
61
  }
62
62
 
63
63
  if (user?.address) {
64
- billingDetails.address.line1 = user?.address
64
+ billingDetails.address = {
65
+ line1: user?.address
66
+ }
65
67
  }
66
68
 
67
69
  const createPayMethod = async () => {
@@ -71,7 +73,13 @@ const StripeElementsFormUI = (props: any) => {
71
73
  }
72
74
  try {
73
75
  setCreatePmLoading(true)
74
- const { paymentMethod } = await createPaymentMethod(params);
76
+ const { paymentMethod, error } = await createPaymentMethod(params);
77
+
78
+ if (error) {
79
+ setErrors(error?.message);
80
+ setCreatePmLoading(false)
81
+ return
82
+ }
75
83
 
76
84
  setCreatePmLoading(false)
77
85
  handleSource && handleSource({