ordering-ui-react-native 0.14.83 → 0.14.85-release
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.
- package/package.json +6 -3
- package/src/DeliveryApp.tsx +34 -2
- package/src/assets/images/no-network.png +0 -0
- package/src/components/BusinessTypeFilter/index.tsx +9 -2
- package/src/components/BusinessTypeFilter/styles.tsx +1 -1
- package/src/components/BusinessesListing/index.tsx +1 -1
- package/src/components/Cart/index.tsx +1 -1
- package/src/components/Checkout/index.tsx +0 -1
- package/src/components/Home/index.tsx +3 -5
- package/src/components/LanguageSelector/index.tsx +65 -97
- package/src/components/LanguageSelector/styles.tsx +4 -17
- package/src/components/Messages/index.tsx +38 -30
- package/src/components/MomentOption/index.tsx +3 -1
- package/src/components/OrderDetails/index.tsx +29 -6
- package/src/components/OrdersOption/index.tsx +4 -2
- package/src/components/PaymentOptions/index.tsx +7 -16
- package/src/components/PaymentOptionsWebView/index.tsx +123 -124
- package/src/components/ProductForm/index.tsx +1 -1
- package/src/components/ProductForm/styles.tsx +1 -0
- package/src/components/StripeElementsForm/index.tsx +27 -48
- package/src/components/UserProfileForm/index.tsx +35 -1
- package/src/components/VerifyPhone/styles.tsx +1 -2
- package/src/config.json +0 -2
- package/src/pages/Checkout.tsx +1 -1
- package/src/providers/AlertProvider.tsx +4 -1
- package/src/theme.json +2 -1
- package/src/types/index.tsx +2 -9
- package/src/utils/index.tsx +196 -1
- package/themes/business/index.tsx +4 -0
- package/themes/business/src/components/Chat/index.tsx +32 -31
- package/themes/business/src/components/NetworkError/index.tsx +61 -0
- package/themes/business/src/components/NetworkError/styles.tsx +11 -0
- package/themes/business/src/components/OrderDetails/Business.tsx +1 -0
- package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx +85 -17
- package/themes/business/src/components/OrdersListManager/index.tsx +871 -0
- package/themes/business/src/components/OrdersListManager/styles.tsx +123 -0
- package/themes/business/src/components/OrdersListManager/utils.tsx +216 -0
- package/themes/business/src/components/OrdersOption/index.tsx +354 -54
- package/themes/business/src/components/OrdersOption/styles.tsx +95 -7
- package/themes/business/src/components/PreviousMessages/index.tsx +12 -0
- package/themes/business/src/components/PreviousOrders/index.tsx +65 -46
- package/themes/business/src/components/PreviousOrders/styles.tsx +5 -10
- package/themes/business/src/components/ReviewCustomer/index.tsx +11 -8
- package/themes/business/src/types/index.tsx +4 -0
- package/themes/business/src/utils/index.tsx +12 -0
- package/themes/doordash/src/components/BusinessesListing/index.tsx +1 -1
- package/themes/doordash/src/components/LoginForm/index.tsx +1 -2
- package/themes/doordash/src/components/OrderDetails/index.tsx +3 -1
- package/themes/doordash/src/components/OrdersOption/index.tsx +4 -2
- package/themes/instacart/src/components/BusinessesListing/index.tsx +1 -1
- package/themes/instacart/src/components/OrderDetails/index.tsx +3 -1
- package/themes/instacart/src/components/OrdersOption/index.tsx +4 -2
- package/themes/kiosk/index.tsx +2 -0
- package/themes/kiosk/src/components/BusinessController/index.tsx +27 -6
- package/themes/kiosk/src/components/BusinessController/styles.tsx +1 -1
- package/themes/kiosk/src/components/BusinessProductsListing/index.tsx +51 -24
- package/themes/kiosk/src/components/Cart/index.tsx +1 -1
- package/themes/kiosk/src/components/CartBottomSheet/index.tsx +1 -1
- package/themes/kiosk/src/components/CartBottomSheet/styles.tsx +1 -1
- package/themes/kiosk/src/components/CartContent/index.tsx +13 -3
- package/themes/kiosk/src/components/CartItem/index.tsx +20 -8
- package/themes/kiosk/src/components/CategoriesMenu/index.tsx +7 -5
- package/themes/kiosk/src/components/CustomerName/index.tsx +89 -88
- package/themes/kiosk/src/components/Intro/index.tsx +13 -13
- package/themes/kiosk/src/components/LanguageSelector/index.tsx +12 -8
- package/themes/kiosk/src/components/NavBar/index.tsx +14 -14
- package/themes/kiosk/src/components/NetworkError/index.tsx +60 -0
- package/themes/kiosk/src/components/NetworkError/styles.tsx +11 -0
- package/themes/kiosk/src/components/OptionCard/index.tsx +1 -1
- package/themes/kiosk/src/components/OrderDetails/index.tsx +2 -2
- package/themes/kiosk/src/components/OrderSummary/index.tsx +1 -1
- package/themes/kiosk/src/components/OrderTypeCardSelector/index.tsx +10 -12
- package/themes/kiosk/src/components/ProductForm/index.tsx +172 -124
- package/themes/kiosk/src/components/ProductForm/styles.tsx +1 -1
- package/themes/kiosk/src/components/ProductOption/index.tsx +1 -0
- package/themes/kiosk/src/components/ProductOption/styles.tsx +1 -0
- package/themes/kiosk/src/components/UpsellingProducts/index.tsx +48 -34
- package/themes/kiosk/src/components/shared/OButton.tsx +5 -18
- package/themes/kiosk/src/components/shared/OCard.tsx +112 -78
- package/themes/kiosk/src/types/index.d.ts +4 -0
- package/themes/original/index.tsx +26 -6
- package/themes/original/src/components/AnalyticsSegment/index.tsx +127 -0
- package/themes/original/src/components/BusinessBasicInformation/index.tsx +11 -7
- package/themes/original/src/components/BusinessController/index.tsx +2 -2
- package/themes/original/src/components/BusinessMenuList/index.tsx +4 -2
- package/themes/original/src/components/BusinessPreorder/index.tsx +3 -2
- package/themes/original/src/components/BusinessProductsList/index.tsx +50 -6
- package/themes/original/src/components/BusinessProductsListing/index.tsx +13 -10
- package/themes/original/src/components/BusinessReviews/index.tsx +4 -3
- package/themes/original/src/components/BusinessesListing/index.tsx +20 -11
- package/themes/original/src/components/Cart/index.tsx +43 -10
- package/themes/original/src/components/Checkout/index.tsx +54 -17
- package/themes/original/src/components/Checkout/styles.tsx +7 -0
- package/themes/original/src/components/CouponControl/index.tsx +1 -0
- package/themes/original/src/components/DriverTips/index.tsx +1 -1
- package/themes/original/src/components/ForgotPasswordForm/index.tsx +8 -12
- package/themes/original/src/components/HighestRatedBusinesses/index.tsx +9 -2
- package/themes/original/src/components/LastOrder/index.tsx +3 -1
- package/themes/original/src/components/LoginForm/index.tsx +83 -68
- package/themes/original/src/components/MessageListing/index.tsx +4 -2
- package/themes/original/src/components/Messages/index.tsx +19 -21
- package/themes/original/src/components/MomentOption/index.tsx +127 -152
- package/themes/original/src/components/MomentOption/styles.tsx +42 -18
- package/themes/original/src/components/NetworkError/index.tsx +61 -0
- package/themes/original/src/components/NetworkError/styles.tsx +11 -0
- package/themes/original/src/components/OrderDetails/index.tsx +106 -113
- package/themes/original/src/components/OrderProgress/index.tsx +6 -5
- package/themes/original/src/components/OrderSummary/index.tsx +34 -1
- package/themes/original/src/components/OrdersOption/index.tsx +20 -42
- package/themes/original/src/components/OrdersOption/styles.tsx +0 -5
- package/themes/original/src/components/PaymentOptionWallet/index.tsx +1 -1
- package/themes/original/src/components/PaymentOptions/index.tsx +20 -23
- package/themes/original/src/components/PhoneInputNumber/index.tsx +15 -8
- package/themes/original/src/components/PlaceSpot/index.tsx +114 -0
- package/themes/original/src/components/PlaceSpot/styles.tsx +11 -0
- package/themes/original/src/components/PreviousOrders/index.tsx +4 -0
- package/themes/original/src/components/ProductForm/index.tsx +35 -20
- package/themes/original/src/components/ProductForm/styles.tsx +0 -1
- package/themes/original/src/components/ProductOptionSubOption/index.tsx +81 -74
- package/themes/original/src/components/ReviewDriver/index.tsx +315 -0
- package/themes/original/src/components/ReviewDriver/styles.tsx +38 -0
- package/themes/original/src/components/ReviewOrder/index.tsx +307 -186
- package/themes/original/src/components/ReviewOrder/styles.tsx +24 -13
- package/themes/original/src/components/ReviewProducts/index.tsx +116 -0
- package/themes/original/src/components/ReviewProducts/styles.tsx +16 -0
- package/themes/original/src/components/SignupForm/index.tsx +173 -154
- package/themes/original/src/components/SingleProductCard/index.tsx +6 -13
- package/themes/original/src/components/SingleProductCard/styles.tsx +1 -1
- package/themes/original/src/components/SingleProductReview/index.tsx +166 -0
- package/themes/original/src/components/SingleProductReview/styles.tsx +27 -0
- package/themes/original/src/components/StripeElementsForm/index.tsx +55 -72
- package/themes/original/src/components/UpsellingProducts/index.tsx +6 -6
- package/themes/original/src/components/UserDetails/index.tsx +4 -95
- package/themes/original/src/components/UserFormDetails/index.tsx +2 -14
- package/themes/original/src/components/UserProfile/index.tsx +13 -6
- package/themes/original/src/components/UserProfileForm/index.tsx +16 -8
- package/themes/original/src/components/VerifyPhone/index.tsx +10 -7
- package/themes/original/src/components/VerifyPhone/styles.tsx +2 -1
- package/themes/original/src/layouts/FloatingBottomContainer.tsx +26 -0
- package/themes/original/src/types/index.tsx +47 -10
- package/themes/single-business/src/components/LastOrder/index.tsx +3 -1
- package/themes/single-business/src/components/OrderDetails/index.tsx +15 -0
- package/themes/single-business/src/components/OrderTypeSelector/index.tsx +5 -5
- package/themes/single-business/src/components/OrdersOption/index.tsx +4 -2
- package/themes/single-business/src/utils/index.tsx +7 -1
- package/themes/uber-eats/src/components/BusinessesListing/index.tsx +1 -1
- package/themes/uber-eats/src/components/OrderDetails/index.tsx +3 -1
- package/themes/uber-eats/src/components/OrdersOption/index.tsx +4 -2
- package/src/components/StripeMethodForm/index.tsx +0 -163
|
@@ -91,7 +91,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
|
|
|
91
91
|
{ key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business') },
|
|
92
92
|
{ key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer') },
|
|
93
93
|
{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
|
|
94
|
-
{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') }
|
|
94
|
+
{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
|
|
95
|
+
{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
|
|
96
|
+
{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
|
|
95
97
|
]
|
|
96
98
|
|
|
97
99
|
const objectStatus = orderStatus.find((o) => o.key === status)
|
|
@@ -284,6 +284,21 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
|
|
|
284
284
|
percentage: 95,
|
|
285
285
|
image: theme.images.order.status7,
|
|
286
286
|
},
|
|
287
|
+
{
|
|
288
|
+
key: 22,
|
|
289
|
+
value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'),
|
|
290
|
+
slug: 'ORDER_LOOKING_FOR_DRIVER',
|
|
291
|
+
percentage: 35,
|
|
292
|
+
image: theme.images.order.status8,
|
|
293
|
+
|
|
294
|
+
},
|
|
295
|
+
{
|
|
296
|
+
key: 23,
|
|
297
|
+
value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'),
|
|
298
|
+
slug: 'ORDER_DRIVER_ON_WAY',
|
|
299
|
+
percentage: 45,
|
|
300
|
+
image: theme.images.order.status8,
|
|
301
|
+
}
|
|
287
302
|
];
|
|
288
303
|
|
|
289
304
|
const objectStatus = orderStatus.find((o) => o.key === status);
|
|
@@ -97,27 +97,27 @@ export const OrderTypeSelector = (props: any) => {
|
|
|
97
97
|
{
|
|
98
98
|
value: 1,
|
|
99
99
|
content: t('DELIVERY', 'Delivery'),
|
|
100
|
-
description: t('ORDERTYPE_DESCRIPTION_DELIVERY', '
|
|
100
|
+
description: t('ORDERTYPE_DESCRIPTION_DELIVERY', 'Delivery description')
|
|
101
101
|
},
|
|
102
102
|
{
|
|
103
103
|
value: 2,
|
|
104
104
|
content: t('PICKUP', 'Pickup'),
|
|
105
|
-
description: t('ORDERTYPE_DESCRIPTION_PICKUP', '
|
|
105
|
+
description: t('ORDERTYPE_DESCRIPTION_PICKUP', 'Pickup description')
|
|
106
106
|
},
|
|
107
107
|
{
|
|
108
108
|
value: 3,
|
|
109
109
|
content: t('EAT_IN', 'Eat in'),
|
|
110
|
-
description: t('ORDERTYPE_DESCRIPTION_EATIN', '
|
|
110
|
+
description: t('ORDERTYPE_DESCRIPTION_EATIN', 'Eat in description')
|
|
111
111
|
},
|
|
112
112
|
{
|
|
113
113
|
value: 4,
|
|
114
114
|
content: t('CURBSIDE', 'Curbside'),
|
|
115
|
-
description: t('ORDERTYPE_DESCRIPTION_CURBSIDE', '
|
|
115
|
+
description: t('ORDERTYPE_DESCRIPTION_CURBSIDE', 'Curbside description')
|
|
116
116
|
},
|
|
117
117
|
{
|
|
118
118
|
value: 5,
|
|
119
119
|
content: t('DRIVE_THRU', 'Drive thru'),
|
|
120
|
-
description: t('ORDERTYPE_DESCRIPTION_DRIVETHRU', '
|
|
120
|
+
description: t('ORDERTYPE_DESCRIPTION_DRIVETHRU', 'Drive Thru description')
|
|
121
121
|
}
|
|
122
122
|
]
|
|
123
123
|
}
|
|
@@ -91,7 +91,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
|
|
|
91
91
|
{ key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business') },
|
|
92
92
|
{ key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer') },
|
|
93
93
|
{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
|
|
94
|
-
{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') }
|
|
94
|
+
{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
|
|
95
|
+
{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
|
|
96
|
+
{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
|
|
95
97
|
]
|
|
96
98
|
|
|
97
99
|
const objectStatus = orderStatus.find((o) => o.key === status)
|
|
@@ -228,7 +230,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
|
|
|
228
230
|
...props,
|
|
229
231
|
UIComponent: OrdersOptionUI,
|
|
230
232
|
orderStatus: props.preOrders ? [13] : props.activeOrders
|
|
231
|
-
? [0, 3, 4, 7, 8, 9, 14, 15, 18, 19, 20, 21]
|
|
233
|
+
? [0, 3, 4, 7, 8, 9, 14, 15, 18, 19, 20, 21, 22, 23]
|
|
232
234
|
: [1, 2, 5, 6, 10, 11, 12, 16, 17],
|
|
233
235
|
useDefualtSessionManager: true,
|
|
234
236
|
paginationSettings: {
|
|
@@ -216,6 +216,10 @@ export const getOrderStatus = (status: number) => {
|
|
|
216
216
|
return 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS'
|
|
217
217
|
case 21:
|
|
218
218
|
return 'ORDER_CUSTOMER_ARRIVED_BUSINESS'
|
|
219
|
+
case 22:
|
|
220
|
+
return 'ORDER_LOOKING_FOR_DRIVER'
|
|
221
|
+
case 23:
|
|
222
|
+
return 'ORDER_DRIVER_ON_WAY'
|
|
219
223
|
default:
|
|
220
224
|
return status
|
|
221
225
|
}
|
|
@@ -245,7 +249,9 @@ export const getTextOrderStatus = (s: string, t: any) => {
|
|
|
245
249
|
{ key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business') },
|
|
246
250
|
{ key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer') },
|
|
247
251
|
{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
|
|
248
|
-
{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') }
|
|
252
|
+
{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
|
|
253
|
+
{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
|
|
254
|
+
{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
|
|
249
255
|
]
|
|
250
256
|
|
|
251
257
|
const objectStatus = orderStatus.find((o) => o.key === status)
|
|
@@ -144,7 +144,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
|
|
|
144
144
|
{isFarAway && (
|
|
145
145
|
<FarAwayMessage style={styles.farAwayMsg}>
|
|
146
146
|
<Ionicons name='md-warning-outline' style={styles.iconStyle} />
|
|
147
|
-
<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', '
|
|
147
|
+
<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
|
|
148
148
|
</FarAwayMessage>
|
|
149
149
|
)}
|
|
150
150
|
<View style={styles.wrapperOrderOptions}>
|
|
@@ -119,7 +119,9 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
|
|
|
119
119
|
{ key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business'), slug: 'DRIVER_ALMOST_ARRIVED_TO_BUSINESS', progress: 2 },
|
|
120
120
|
{ key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer'), slug: 'DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', progress: 2 },
|
|
121
121
|
{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business'), slug: 'ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', progress: 2 },
|
|
122
|
-
{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', progress: 2 }
|
|
122
|
+
{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business'), slug: 'ORDER_CUSTOMER_ARRIVED_BUSINESS', progress: 2 },
|
|
123
|
+
{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver'), slug: 'ORDER_LOOKING_FOR_DRIVER', progress: 2 },
|
|
124
|
+
{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way'), slug: 'ORDER_DRIVER_ON_WAY', progress: 2 }
|
|
123
125
|
]
|
|
124
126
|
|
|
125
127
|
const objectStatus = orderStatus.find((o) => o.key === status)
|
|
@@ -89,7 +89,9 @@ const OrdersOptionUI = (props: OrdersOptionParams) => {
|
|
|
89
89
|
{ key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business') },
|
|
90
90
|
{ key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer') },
|
|
91
91
|
{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
|
|
92
|
-
{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') }
|
|
92
|
+
{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') },
|
|
93
|
+
{ key: 22, value: t('ORDER_LOOKING_FOR_DRIVER', 'Looking for driver') },
|
|
94
|
+
{ key: 23, value: t('ORDER_DRIVER_ON_WAY', 'Driver on way') }
|
|
93
95
|
]
|
|
94
96
|
|
|
95
97
|
const objectStatus = orderStatus.find((o) => o.key === status)
|
|
@@ -208,7 +210,7 @@ export const OrdersOption = (props: OrdersOptionParams) => {
|
|
|
208
210
|
...props,
|
|
209
211
|
UIComponent: OrdersOptionUI,
|
|
210
212
|
orderStatus: props.activeOrders
|
|
211
|
-
? [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21]
|
|
213
|
+
? [0, 3, 4, 7, 8, 9, 13, 14, 15, 18, 19, 20, 21, 22, 23]
|
|
212
214
|
: [1, 2, 5, 6, 10, 11, 12, 16, 17],
|
|
213
215
|
useDefualtSessionManager: true,
|
|
214
216
|
paginationSettings: {
|
|
@@ -1,163 +0,0 @@
|
|
|
1
|
-
import React, { useState, useEffect } from 'react'
|
|
2
|
-
import { useLanguage } from 'ordering-components/native'
|
|
3
|
-
import { GooglePayButton, useGooglePay, ApplePayButton, useApplePay } from '@stripe/stripe-react-native'
|
|
4
|
-
import { OButton } from '../shared';
|
|
5
|
-
import { Platform, View } from 'react-native';
|
|
6
|
-
import { StripeMethodFormParams } from '../../types';
|
|
7
|
-
|
|
8
|
-
export const StripeMethodForm = (props: StripeMethodFormParams) => {
|
|
9
|
-
const {
|
|
10
|
-
cart,
|
|
11
|
-
handleSource,
|
|
12
|
-
onCancel,
|
|
13
|
-
setErrors,
|
|
14
|
-
paymethod,
|
|
15
|
-
devMode
|
|
16
|
-
} = props
|
|
17
|
-
const { initGooglePay, createGooglePayPaymentMethod, loading } = useGooglePay();
|
|
18
|
-
const { presentApplePay, isApplePaySupported } = useApplePay();
|
|
19
|
-
const [initialized, setInitialized] = useState(false);
|
|
20
|
-
const [, t] = useLanguage()
|
|
21
|
-
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
if (paymethod !== 'google_pay') return
|
|
24
|
-
if (Platform.OS === 'ios') {
|
|
25
|
-
setErrors(t('GOOGLE_PAY_NOT_SUPPORTED', 'Google pay not supported'))
|
|
26
|
-
return
|
|
27
|
-
}
|
|
28
|
-
const initialize = async () => {
|
|
29
|
-
try {
|
|
30
|
-
const { error } = await initGooglePay({
|
|
31
|
-
testEnv: devMode,
|
|
32
|
-
merchantName: 'Widget Store',
|
|
33
|
-
countryCode: 'US',
|
|
34
|
-
billingAddressConfig: {
|
|
35
|
-
format: 'FULL',
|
|
36
|
-
isPhoneNumberRequired: true,
|
|
37
|
-
isRequired: false,
|
|
38
|
-
},
|
|
39
|
-
existingPaymentMethodRequired: false,
|
|
40
|
-
isEmailRequired: true,
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
if (error) {
|
|
44
|
-
setErrors(error.code + ' - ' + error.message);
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
setInitialized(true);
|
|
48
|
-
} catch (err: any) {
|
|
49
|
-
setErrors('Catch ' + err?.message)
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
initialize();
|
|
53
|
-
}, [initGooglePay]);
|
|
54
|
-
|
|
55
|
-
useEffect(() => {
|
|
56
|
-
if (paymethod !== 'apple_pay') return
|
|
57
|
-
if (Platform.OS === 'android') {
|
|
58
|
-
setErrors(t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported'))
|
|
59
|
-
return
|
|
60
|
-
}
|
|
61
|
-
}, [])
|
|
62
|
-
|
|
63
|
-
const createPaymentMethod = async () => {
|
|
64
|
-
|
|
65
|
-
const { error, paymentMethod } = await createGooglePayPaymentMethod({
|
|
66
|
-
amount: cart?.balance ?? cart?.total,
|
|
67
|
-
currencyCode: 'USD',
|
|
68
|
-
});
|
|
69
|
-
|
|
70
|
-
if (error) {
|
|
71
|
-
setErrors(error.code + ' - ' + error.message);
|
|
72
|
-
return;
|
|
73
|
-
} else if (paymentMethod) {
|
|
74
|
-
handleSource({
|
|
75
|
-
...paymentMethod?.Card,
|
|
76
|
-
id: paymentMethod.id,
|
|
77
|
-
type: paymentMethod.type,
|
|
78
|
-
source_id: paymentMethod?.id,
|
|
79
|
-
card: {
|
|
80
|
-
brand: paymentMethod.Card.brand,
|
|
81
|
-
last4: paymentMethod.Card.last4
|
|
82
|
-
}
|
|
83
|
-
})
|
|
84
|
-
onCancel()
|
|
85
|
-
}
|
|
86
|
-
setInitialized(false);
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
const pay = async () => {
|
|
90
|
-
if (!isApplePaySupported) {
|
|
91
|
-
setErrors(t('APPLE_PAY_NOT_SUPPORTED', 'Apple pay not supported'))
|
|
92
|
-
return
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
const { error, paymentMethod } = await presentApplePay({
|
|
96
|
-
cartItems: cart?.products?.map((product: any) => ({ label: product?.name, amount: product?.price?.toString?.() })),
|
|
97
|
-
country: 'US',
|
|
98
|
-
currency: 'USD',
|
|
99
|
-
shippingMethods: [
|
|
100
|
-
{
|
|
101
|
-
amount: cart?.balance?.toString() ?? cart?.total?.toString?.(),
|
|
102
|
-
identifier: 'DPS',
|
|
103
|
-
label: 'Courier',
|
|
104
|
-
detail: 'Delivery',
|
|
105
|
-
type: 'final',
|
|
106
|
-
},
|
|
107
|
-
],
|
|
108
|
-
|
|
109
|
-
requiredShippingAddressFields: ['emailAddress', 'phoneNumber'],
|
|
110
|
-
requiredBillingContactFields: ['phoneNumber', 'name'],
|
|
111
|
-
});
|
|
112
|
-
if (error) {
|
|
113
|
-
setErrors(error.code + ' - ' + error.message);
|
|
114
|
-
} else if (paymentMethod) {
|
|
115
|
-
handleSource({
|
|
116
|
-
...paymentMethod?.Card,
|
|
117
|
-
id: paymentMethod.id,
|
|
118
|
-
type: paymentMethod.type,
|
|
119
|
-
source_id: paymentMethod?.id,
|
|
120
|
-
card: {
|
|
121
|
-
brand: paymentMethod.Card.brand,
|
|
122
|
-
last4: paymentMethod.Card.last4
|
|
123
|
-
}
|
|
124
|
-
})
|
|
125
|
-
onCancel()
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
return (
|
|
130
|
-
<>
|
|
131
|
-
{paymethod === 'google_pay' ? (
|
|
132
|
-
<View>
|
|
133
|
-
{!loading && initialized && (
|
|
134
|
-
<OButton
|
|
135
|
-
textStyle={{
|
|
136
|
-
color: '#fff'
|
|
137
|
-
}}
|
|
138
|
-
imgRightSrc={null}
|
|
139
|
-
onClick={createPaymentMethod}
|
|
140
|
-
isDisabled={!initialized}
|
|
141
|
-
text={t('PAY_WITH_GOOGLE_PAY', 'Pay with Google Pay')}
|
|
142
|
-
/>
|
|
143
|
-
)}
|
|
144
|
-
</View>
|
|
145
|
-
) : (
|
|
146
|
-
<View>
|
|
147
|
-
{isApplePaySupported && (
|
|
148
|
-
<ApplePayButton
|
|
149
|
-
onPress={pay}
|
|
150
|
-
type="plain"
|
|
151
|
-
buttonStyle="black"
|
|
152
|
-
borderRadius={4}
|
|
153
|
-
style={{
|
|
154
|
-
width: '100%',
|
|
155
|
-
height: 50,
|
|
156
|
-
}}
|
|
157
|
-
/>
|
|
158
|
-
)}
|
|
159
|
-
</View>
|
|
160
|
-
)}
|
|
161
|
-
</>
|
|
162
|
-
)
|
|
163
|
-
}
|