ordering-ui-react-native 0.21.77 → 0.21.78-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 -7
- package/src/DeliveryApp.tsx +43 -1
- package/src/components/BusinessesListing/index.tsx +1 -1
- package/src/components/PaymentOptionsWebView/index.tsx +1 -0
- package/src/components/StripeMethodForm/index.tsx +6 -4
- package/src/components/VerifyPhone/styles.tsx +1 -2
- package/src/types/index.tsx +3 -1
- package/themes/business/index.tsx +4 -0
- package/themes/business/src/components/AcceptOrRejectOrder/index.tsx +9 -6
- package/themes/business/src/components/AcceptOrRejectOrder/styles.tsx +1 -0
- package/themes/business/src/components/BusinessProductList/index.tsx +2 -1
- package/themes/business/src/components/Chat/index.tsx +3 -1
- package/themes/business/src/components/DriverMap/index.tsx +44 -27
- package/themes/business/src/components/GoogleMap/index.tsx +15 -8
- package/themes/business/src/components/Home/index.tsx +5 -1
- package/themes/business/src/components/LanguageSelector/index.tsx +2 -3
- package/themes/business/src/components/LanguageSelector/lang_country.json +515 -70
- package/themes/business/src/components/LogoutButton/index.tsx +1 -1
- package/themes/business/src/components/MapView/index.tsx +36 -17
- package/themes/business/src/components/NewOrderNotification/index.tsx +74 -24
- package/themes/business/src/components/OrderDetails/Business.tsx +65 -7
- package/themes/business/src/components/OrderDetails/Delivery.tsx +35 -20
- package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx +110 -40
- package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx +61 -35
- package/themes/business/src/components/OrderDetails/styles.tsx +39 -3
- package/themes/business/src/components/OrderDetails/usePrinterCommands.tsx +220 -0
- package/themes/business/src/components/OrderSummary/index.tsx +222 -72
- package/themes/business/src/components/OrdersListManager/index.tsx +9 -1
- package/themes/business/src/components/OrdersOption/index.tsx +247 -159
- package/themes/business/src/components/PhoneInputNumber/index.tsx +8 -5
- package/themes/business/src/components/PreviousMessages/index.tsx +12 -0
- package/themes/business/src/components/PreviousOrders/OrderItem.tsx +25 -15
- package/themes/business/src/components/PreviousOrders/index.tsx +5 -3
- package/themes/business/src/components/PrinterEdition/index.tsx +363 -0
- package/themes/business/src/components/PrinterEdition/styles.tsx +61 -0
- package/themes/business/src/components/PrinterSettings/index.tsx +267 -0
- package/themes/business/src/components/PrinterSettings/styles.tsx +30 -0
- package/themes/business/src/components/ProductItemAccordion/index.tsx +2 -2
- package/themes/business/src/components/ReviewCustomer/index.tsx +2 -0
- package/themes/business/src/components/Sessions/index.tsx +187 -0
- package/themes/business/src/components/Sessions/styles.tsx +20 -0
- package/themes/business/src/components/StoresList/index.tsx +2 -2
- package/themes/business/src/components/UserFormDetails/index.tsx +111 -107
- package/themes/business/src/components/UserProfileForm/index.tsx +84 -47
- package/themes/business/src/components/WebsocketStatus/index.tsx +2 -2
- package/themes/business/src/components/shared/OInput.tsx +2 -0
- package/themes/business/src/components/shared/OTextarea.tsx +8 -9
- package/themes/business/src/hooks/useLocation.tsx +5 -4
- package/themes/business/src/types/index.tsx +23 -5
- package/themes/business/src/utils/index.tsx +19 -1
- package/themes/doordash/src/components/BusinessesListing/index.tsx +1 -1
- package/themes/doordash/src/components/LoginForm/index.tsx +1 -2
- package/themes/instacart/src/components/BusinessesListing/index.tsx +1 -1
- package/themes/kiosk/src/components/Checkout/index.tsx +6 -0
- package/themes/kiosk/src/components/NavBar/index.tsx +14 -14
- package/themes/kiosk/src/components/OptionCard/index.tsx +1 -1
- package/themes/kiosk/src/components/OrderTypeCardSelector/index.tsx +8 -10
- package/themes/kiosk/src/components/shared/OButton.tsx +5 -18
- package/themes/original/index.tsx +13 -1
- package/themes/original/src/components/AddressDetails/index.tsx +20 -10
- package/themes/original/src/components/AddressForm/index.tsx +32 -17
- package/themes/original/src/components/AddressList/index.tsx +8 -7
- package/themes/original/src/components/AnalyticsSegment/index.tsx +6 -6
- package/themes/original/src/components/AppleLogin/index.tsx +4 -4
- package/themes/original/src/components/BusinessBasicInformation/index.tsx +6 -9
- package/themes/original/src/components/BusinessController/index.tsx +12 -7
- package/themes/original/src/components/BusinessItemAccordion/index.tsx +13 -5
- package/themes/original/src/components/BusinessListingSearch/BusinessSearchFooter.tsx +2 -3
- package/themes/original/src/components/BusinessListingSearch/BusinessSearchHeader.tsx +1 -3
- package/themes/original/src/components/BusinessListingSearch/index.tsx +1 -2
- package/themes/original/src/components/BusinessPreorder/index.tsx +20 -15
- package/themes/original/src/components/BusinessProductsList/SubcategoriesComponent/index.tsx +5 -5
- package/themes/original/src/components/BusinessProductsList/index.tsx +3 -3
- package/themes/original/src/components/BusinessProductsList/styles.tsx +0 -3
- package/themes/original/src/components/BusinessProductsListing/index.tsx +20 -8
- package/themes/original/src/components/BusinessTypeFilter/index.tsx +9 -8
- package/themes/original/src/components/BusinessesListing/Layout/Appointment/index.tsx +2 -1
- package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx +1 -1
- package/themes/original/src/components/BusinessesListing/Layout/Original/styles.tsx +1 -1
- package/themes/original/src/components/BusinessesListing/index.tsx +0 -1
- package/themes/original/src/components/Cart/index.tsx +39 -12
- package/themes/original/src/components/CartContent/index.tsx +21 -8
- package/themes/original/src/components/Checkout/index.tsx +118 -68
- package/themes/original/src/components/CitiesControl/index.tsx +0 -3
- package/themes/original/src/components/CouponControl/index.tsx +1 -3
- package/themes/original/src/components/DriverTips/index.tsx +1 -3
- package/themes/original/src/components/Favorite/index.tsx +1 -5
- package/themes/original/src/components/FavoriteList/index.tsx +0 -1
- package/themes/original/src/components/ForgotPasswordForm/index.tsx +5 -7
- package/themes/original/src/components/GiftCard/GiftCardOrdersList/index.tsx +64 -0
- package/themes/original/src/components/GiftCard/GiftCardOrdersList/styles.tsx +8 -0
- package/themes/original/src/components/GiftCard/GiftCardUI/index.tsx +15 -17
- package/themes/original/src/components/GiftCard/PurchaseGiftCard/index.tsx +3 -7
- package/themes/original/src/components/GiftCard/RedeemGiftCard/index.tsx +24 -32
- package/themes/original/src/components/GiftCard/SendGiftCard/index.tsx +7 -9
- package/themes/original/src/components/GiftCard/SingleGiftCard/index.tsx +101 -0
- package/themes/original/src/components/GiftCard/SingleGiftCard/styles.tsx +4 -0
- package/themes/original/src/components/GiftCard/VerticalGiftCardOrdersLayout/index.tsx +82 -0
- package/themes/original/src/components/GiftCard/VerticalGiftCardOrdersLayout/styles.tsx +9 -0
- package/themes/original/src/components/GoogleMap/index.tsx +39 -18
- package/themes/original/src/components/Help/index.tsx +2 -0
- package/themes/original/src/components/HighestRatedBusinesses/index.tsx +1 -1
- package/themes/original/src/components/Home/index.tsx +2 -10
- package/themes/original/src/components/LoginForm/Otp/index.tsx +0 -3
- package/themes/original/src/components/LoginForm/index.tsx +4 -7
- package/themes/original/src/components/MessageListing/index.tsx +1 -0
- package/themes/original/src/components/Messages/index.tsx +8 -7
- package/themes/original/src/components/MomentOption/index.tsx +13 -2
- package/themes/original/src/components/MultiCartsPaymethodsAndWallets/index.tsx +7 -3
- package/themes/original/src/components/MultiCheckout/index.tsx +164 -110
- package/themes/original/src/components/MultiOrdersDetails/index.tsx +20 -14
- package/themes/original/src/components/MyOrders/index.tsx +21 -26
- package/themes/original/src/components/NavBar/index.tsx +4 -2
- package/themes/original/src/components/NetworkError/index.tsx +0 -5
- package/themes/original/src/components/NotFoundSource/index.tsx +0 -3
- package/themes/original/src/components/OrderDetails/OrderEta.tsx +1 -1
- package/themes/original/src/components/OrderDetails/OrderHistory.tsx +5 -7
- package/themes/original/src/components/OrderDetails/index.tsx +26 -9
- package/themes/original/src/components/OrderDetails/styles.tsx +0 -1
- package/themes/original/src/components/OrderProgress/index.tsx +22 -3
- package/themes/original/src/components/OrderSummary/index.tsx +28 -9
- package/themes/original/src/components/OrderTypeSelector/index.tsx +7 -6
- package/themes/original/src/components/OrdersOption/index.tsx +2 -4
- package/themes/original/src/components/PaymentOptionStripe/index.tsx +0 -5
- package/themes/original/src/components/PaymentOptionWallet/index.tsx +56 -56
- package/themes/original/src/components/PaymentOptions/index.tsx +46 -5
- package/themes/original/src/components/PlaceSpot/index.tsx +1 -3
- package/themes/original/src/components/PreviousOrders/index.tsx +1 -2
- package/themes/original/src/components/ProductForm/ActionButton.tsx +17 -20
- package/themes/original/src/components/ProductForm/index.tsx +108 -105
- package/themes/original/src/components/ProductItemAccordion/index.tsx +55 -49
- package/themes/original/src/components/ProductItemAccordion/styles.tsx +3 -4
- package/themes/original/src/components/ProductOptionSubOption/index.tsx +8 -1
- package/themes/original/src/components/ProfessionalProfile/index.tsx +4 -5
- package/themes/original/src/components/Promotions/index.tsx +6 -9
- package/themes/original/src/components/ReviewDriver/index.tsx +1 -1
- package/themes/original/src/components/ReviewOrder/index.tsx +2 -2
- package/themes/original/src/components/ReviewProducts/index.tsx +1 -1
- package/themes/original/src/components/ReviewTrigger/index.tsx +2 -2
- package/themes/original/src/components/ServiceForm/index.tsx +52 -54
- package/themes/original/src/components/Sessions/index.tsx +3 -3
- package/themes/original/src/components/SignupForm/index.tsx +86 -78
- package/themes/original/src/components/SingleOrderCard/index.tsx +1 -2
- package/themes/original/src/components/SingleProductCard/index.tsx +5 -6
- package/themes/original/src/components/SingleProductCard/styles.tsx +0 -3
- package/themes/original/src/components/StripeCardForm/index.tsx +0 -3
- package/themes/original/src/components/StripeCardsList/index.tsx +10 -35
- package/themes/original/src/components/StripeElementsForm/index.tsx +78 -59
- package/themes/original/src/components/StripeElementsForm/naked.tsx +48 -1
- package/themes/original/src/components/StripeRedirectForm/index.tsx +0 -3
- package/themes/original/src/components/TaxInformation/index.tsx +3 -2
- package/themes/original/src/components/UpsellingProducts/UpsellingContent.tsx +10 -7
- package/themes/original/src/components/UpsellingProducts/UpsellingLayout.tsx +8 -3
- package/themes/original/src/components/UserDetails/index.tsx +3 -2
- package/themes/original/src/components/UserFormDetails/index.tsx +155 -131
- package/themes/original/src/components/UserProfile/index.tsx +11 -2
- package/themes/original/src/components/Wallets/index.tsx +6 -3
- package/themes/original/src/components/WebsocketStatus/index.tsx +169 -0
- package/themes/original/src/components/WebsocketStatus/styles.tsx +28 -0
- package/themes/original/src/components/shared/OAlert.tsx +2 -1
- package/themes/original/src/components/shared/OButton.tsx +5 -4
- package/themes/original/src/components/shared/OInput.tsx +4 -8
- package/themes/original/src/types/index.tsx +5 -1
- package/themes/original/src/utils/index.tsx +12 -1
- package/themes/uber-eats/src/components/BusinessesListing/index.tsx +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useEffect } from 'react'
|
|
1
|
+
import React, { useState, useEffect, useCallback, useMemo } from 'react'
|
|
2
2
|
import {
|
|
3
3
|
useLanguage,
|
|
4
4
|
useConfig,
|
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
ToastType,
|
|
11
11
|
MultiCheckout as MultiCheckoutController
|
|
12
12
|
} from 'ordering-components/native'
|
|
13
|
-
import { View, StyleSheet, Platform, ScrollView } from 'react-native'
|
|
13
|
+
import { View, StyleSheet, Platform, ScrollView, SafeAreaView } from 'react-native'
|
|
14
14
|
import { useTheme } from 'styled-components/native';
|
|
15
15
|
import IconAntDesign from 'react-native-vector-icons/AntDesign';
|
|
16
16
|
import { Container } from '../../layouts/Container';
|
|
@@ -70,7 +70,8 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
70
70
|
walletState,
|
|
71
71
|
onNavigationRedirectReplace,
|
|
72
72
|
merchantId,
|
|
73
|
-
cartsInvalid
|
|
73
|
+
cartsInvalid,
|
|
74
|
+
checkoutFieldsState
|
|
74
75
|
} = props
|
|
75
76
|
|
|
76
77
|
const theme = useTheme();
|
|
@@ -82,12 +83,12 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
82
83
|
wrapperNavbar: {
|
|
83
84
|
paddingHorizontal: 20,
|
|
84
85
|
backgroundColor: theme?.colors?.white,
|
|
85
|
-
|
|
86
|
+
borderWidth: 0
|
|
86
87
|
},
|
|
87
88
|
detailWrapper: {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
89
|
+
paddingHorizontal: 20,
|
|
90
|
+
width: '100%'
|
|
91
|
+
},
|
|
91
92
|
})
|
|
92
93
|
|
|
93
94
|
const [, { showToast }] = useToast();
|
|
@@ -96,8 +97,9 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
96
97
|
const [{ parsePrice, parseDate }] = useUtils();
|
|
97
98
|
const [{ options, carts, loading }, { confirmCart }] = useOrder();
|
|
98
99
|
const [validationFields] = useValidationFields();
|
|
99
|
-
const [{ user }, { login }] = useSession()
|
|
100
|
+
const [{ user, loading: userLoading }, { login }] = useSession()
|
|
100
101
|
|
|
102
|
+
const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
|
|
101
103
|
const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
|
|
102
104
|
const isPreOrder = configs?.preorder_status_enabled?.value === '1'
|
|
103
105
|
const isMultiDriverTips = configs?.checkout_multi_business_enabled?.value === '1'
|
|
@@ -121,6 +123,7 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
121
123
|
|
|
122
124
|
const creditPointGeneralPlan = loyaltyPlansState?.result?.find((loyal: any) => loyal.type === 'credit_point')
|
|
123
125
|
const loyalBusinessAvailable = creditPointGeneralPlan?.businesses?.filter((b: any) => b.accumulates) ?? []
|
|
126
|
+
const checkoutFields = useMemo(() => checkoutFieldsState?.fields?.filter((field : any) => field.order_type_id === options?.type), [checkoutFieldsState, options])
|
|
124
127
|
|
|
125
128
|
const accumulationRateBusiness = (businessId: number) => {
|
|
126
129
|
const value = loyalBusinessAvailable?.find((loyal: any) => loyal.business_id === businessId)?.accumulation_rate ?? 0
|
|
@@ -143,16 +146,17 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
143
146
|
?.reduce((sum: any, cart: any) => sum + clearAmount((cart?.subtotal + getIncludedTaxes(cart)) * accumulationRateBusiness(cart?.business_id)), 0)
|
|
144
147
|
?.toFixed(configs.format_number_decimal_length?.value ?? 2)
|
|
145
148
|
|
|
146
|
-
|
|
149
|
+
const [showTitle, setShowTitle] = useState(false)
|
|
147
150
|
const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
|
|
148
151
|
const [phoneUpdate, setPhoneUpdate] = useState(false);
|
|
149
152
|
const [userErrors, setUserErrors] = useState<any>([]);
|
|
153
|
+
const [cartsOpened, setCartsOpened] = useState([])
|
|
150
154
|
const [placeByMethodPay, setPlaceByMethodPay] = useState(false)
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
155
|
+
const [allowedGuest, setAllowedGuest] = useState(false)
|
|
156
|
+
const [isOpen, setIsOpen] = useState(false)
|
|
157
|
+
const [requiredFields, setRequiredFields] = useState<any>([])
|
|
158
|
+
const stripePaymethods: any = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect']
|
|
159
|
+
const [openModal, setOpenModal] = useState({ login: false, signup: false, isGuest: false })
|
|
156
160
|
const [methodPaySupported, setMethodPaySupported] = useState({ enabled: false, message: null, loading: true })
|
|
157
161
|
const methodsPay = ['global_google_pay', 'global_apple_pay']
|
|
158
162
|
const isDisablePlaceOrderButton = cartGroup?.loading || placing || (!(paymethodSelected?.paymethod_id || paymethodSelected?.wallet_id) && cartGroup?.result?.balance > 0) ||
|
|
@@ -168,53 +172,73 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
168
172
|
|
|
169
173
|
const checkValidationFields = () => {
|
|
170
174
|
setUserErrors([])
|
|
171
|
-
const errors = []
|
|
172
|
-
const
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
175
|
+
const errors: Array<string> = []
|
|
176
|
+
const userSelected = user
|
|
177
|
+
const _requiredFields: Array<string> = []
|
|
178
|
+
Object.values(checkoutFieldsState?.fields).map((field: any) => {
|
|
179
|
+
if (options?.type === field?.order_type_id &&
|
|
180
|
+
field?.enabled &&
|
|
181
|
+
field?.required &&
|
|
182
|
+
!notFields.includes(field?.validation_field?.code)
|
|
183
|
+
) {
|
|
184
|
+
if (userSelected && !userSelected[field?.validation_field?.code]) {
|
|
185
|
+
_requiredFields.push(field?.validation_field?.code)
|
|
179
186
|
}
|
|
180
187
|
}
|
|
181
188
|
})
|
|
182
|
-
|
|
189
|
+
const mobilePhoneField: any = Object.values(checkoutFieldsState?.fields)?.find((field: any) => field?.order_type_id === options?.type && field?.validation_field?.code === 'mobile_phone')
|
|
183
190
|
if (
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
191
|
+
userSelected &&
|
|
192
|
+
!userSelected?.cellphone &&
|
|
193
|
+
((mobilePhoneField?.enabled &&
|
|
194
|
+
mobilePhoneField?.required) ||
|
|
187
195
|
configs?.verification_phone_required?.value === '1')
|
|
188
196
|
) {
|
|
189
197
|
_requiredFields.push('cellphone')
|
|
190
198
|
}
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
if (phoneUpdate) {
|
|
194
|
-
errors.push(t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number'))
|
|
195
|
-
}
|
|
199
|
+
setRequiredFields(_requiredFields)
|
|
196
200
|
|
|
197
201
|
setUserErrors(errors)
|
|
198
202
|
}
|
|
199
203
|
|
|
204
|
+
const checkGuestValidationFields = () => {
|
|
205
|
+
const userSelected = user
|
|
206
|
+
const _requiredFields = checkoutFieldsState?.fields
|
|
207
|
+
.filter((field) => (field?.order_type_id === options?.type) && field?.enabled && field?.required_with_guest &&
|
|
208
|
+
!notFields.includes(field?.validation_field?.code) &&
|
|
209
|
+
userSelected && !userSelected[field?.validation_field?.code])
|
|
210
|
+
const requiredFieldsCode = _requiredFields.map((item) => item?.validation_field?.code)
|
|
211
|
+
const guestCheckoutCellPhone = checkoutFieldsState?.fields?.find((field) => field.order_type_id === options?.type && field?.validation_field?.code === 'mobile_phone')
|
|
212
|
+
if (
|
|
213
|
+
userSelected &&
|
|
214
|
+
!userSelected?.cellphone &&
|
|
215
|
+
((guestCheckoutCellPhone?.enabled &&
|
|
216
|
+
guestCheckoutCellPhone?.required_with_guest) ||
|
|
217
|
+
configs?.verification_phone_required?.value === '1')
|
|
218
|
+
) {
|
|
219
|
+
requiredFieldsCode.push('cellphone')
|
|
220
|
+
}
|
|
221
|
+
setRequiredFields(requiredFieldsCode)
|
|
222
|
+
}
|
|
223
|
+
|
|
200
224
|
const togglePhoneUpdate = (val: boolean) => {
|
|
201
225
|
setPhoneUpdate(val)
|
|
202
226
|
}
|
|
203
227
|
|
|
204
228
|
const handlePlaceOrder = (confirmPayment?: any) => {
|
|
205
229
|
if (stripePaymethods.includes(paymethodSelected?.gateway) && user?.guest_id) {
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
230
|
+
setOpenModal({ ...openModal, signup: true, isGuest: true })
|
|
231
|
+
return
|
|
232
|
+
}
|
|
209
233
|
|
|
210
|
-
if (!userErrors.length &&
|
|
234
|
+
if (!userErrors.length && !requiredFields?.length) {
|
|
211
235
|
handleGroupPlaceOrder && handleGroupPlaceOrder(confirmPayment)
|
|
212
236
|
return
|
|
213
237
|
}
|
|
214
238
|
if (requiredFields?.length) {
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
239
|
+
setIsOpen(true)
|
|
240
|
+
return
|
|
241
|
+
}
|
|
218
242
|
let stringError = ''
|
|
219
243
|
Object.values(userErrors).map((item: any, i: number) => {
|
|
220
244
|
stringError += (i + 1) === userErrors.length ? `- ${item?.message || item}` : `- ${item?.message || item}\n`
|
|
@@ -224,32 +248,43 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
224
248
|
}
|
|
225
249
|
|
|
226
250
|
const handlePlaceOrderAsGuest = () => {
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
251
|
+
setIsOpen(false)
|
|
252
|
+
handleGroupPlaceOrder && handleGroupPlaceOrder()
|
|
253
|
+
}
|
|
230
254
|
|
|
231
255
|
const handleSuccessSignup = (user: any) => {
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
256
|
+
login({
|
|
257
|
+
user,
|
|
258
|
+
token: user?.session?.access_token
|
|
259
|
+
})
|
|
260
|
+
openModal?.isGuest && handlePlaceOrderAsGuest()
|
|
261
|
+
setOpenModal({ ...openModal, signup: false, isGuest: false })
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
const handleSuccessLogin = (user: any) => {
|
|
265
|
+
if (user) setOpenModal({ ...openModal, login: false })
|
|
266
|
+
}
|
|
243
267
|
|
|
244
268
|
const handleScroll = ({ nativeEvent: { contentOffset } }: any) => {
|
|
245
|
-
|
|
246
|
-
|
|
269
|
+
setShowTitle(contentOffset.y > 30)
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
const handleGoBack = () => {
|
|
273
|
+
if (navigation?.canGoBack()) {
|
|
274
|
+
navigation.goBack()
|
|
275
|
+
} else {
|
|
276
|
+
navigation.navigate('BottomTab', { screen: 'Cart' })
|
|
277
|
+
}
|
|
278
|
+
}
|
|
247
279
|
|
|
248
280
|
useEffect(() => {
|
|
249
|
-
if (
|
|
281
|
+
if (checkoutFieldsState?.loading || userLoading) return
|
|
282
|
+
if (user?.guest_id) {
|
|
283
|
+
checkGuestValidationFields()
|
|
284
|
+
} else {
|
|
250
285
|
checkValidationFields()
|
|
251
286
|
}
|
|
252
|
-
}, [
|
|
287
|
+
}, [checkoutFieldsState, user, options?.type])
|
|
253
288
|
|
|
254
289
|
useEffect(() => {
|
|
255
290
|
if (cartsToShow?.length === 1) {
|
|
@@ -283,32 +318,46 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
283
318
|
}
|
|
284
319
|
}, [paymethodSelected])
|
|
285
320
|
|
|
321
|
+
const changeActiveState = useCallback((isClosed: boolean, uuid: string) => {
|
|
322
|
+
const isActive = cartsOpened?.includes?.(uuid)
|
|
323
|
+
if (isActive || !isClosed) {
|
|
324
|
+
setCartsOpened(cartsOpened?.filter?.((_uuid) => _uuid !== uuid))
|
|
325
|
+
} else {
|
|
326
|
+
setCartsOpened([
|
|
327
|
+
...cartsOpened,
|
|
328
|
+
uuid
|
|
329
|
+
])
|
|
330
|
+
}
|
|
331
|
+
}, [cartsOpened])
|
|
332
|
+
|
|
286
333
|
return (
|
|
287
334
|
<>
|
|
288
|
-
<
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
335
|
+
<SafeAreaView style={{ backgroundColor: theme.colors.backgroundPage }}>
|
|
336
|
+
<View style={styles.wrapperNavbar}>
|
|
337
|
+
<TopHeader>
|
|
338
|
+
<>
|
|
339
|
+
<TopActions onPress={() => handleGoBack()}>
|
|
340
|
+
<IconAntDesign
|
|
341
|
+
name='arrowleft'
|
|
342
|
+
size={26}
|
|
343
|
+
/>
|
|
344
|
+
</TopActions>
|
|
345
|
+
{showTitle && (
|
|
346
|
+
<OText
|
|
347
|
+
size={16}
|
|
348
|
+
style={{ flex: 1, textAlign: 'center', right: 15 }}
|
|
349
|
+
weight={Platform.OS === 'ios' ? '600' : 'bold'}
|
|
350
|
+
numberOfLines={2}
|
|
351
|
+
ellipsizeMode='tail'
|
|
352
|
+
>
|
|
353
|
+
{t('CHECKOUT', 'Checkout')}
|
|
354
|
+
</OText>
|
|
355
|
+
)}
|
|
356
|
+
</>
|
|
357
|
+
</TopHeader>
|
|
358
|
+
</View>
|
|
359
|
+
</SafeAreaView>
|
|
360
|
+
<Container pt={0} noPadding onScroll={handleScroll} showsVerticalScrollIndicator={false}>
|
|
312
361
|
<View style={styles.wrapperNavbar}>
|
|
313
362
|
<NavBar
|
|
314
363
|
hideArrowLeft
|
|
@@ -319,8 +368,8 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
319
368
|
paddingTop={Platform.OS === 'ios' ? 0 : 4}
|
|
320
369
|
btnStyle={{ paddingLeft: 0 }}
|
|
321
370
|
titleWrapStyle={{ paddingHorizontal: 0 }}
|
|
322
|
-
|
|
323
|
-
|
|
371
|
+
titleStyle={{ marginRight: 0, marginLeft: 0 }}
|
|
372
|
+
style={{ marginTop: 20 }}
|
|
324
373
|
/>
|
|
325
374
|
</View>
|
|
326
375
|
<ChContainer style={styles.pagePadding}>
|
|
@@ -371,15 +420,11 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
371
420
|
</OText>
|
|
372
421
|
<OButton
|
|
373
422
|
text={t('SIGN_UP', 'Sign up')}
|
|
374
|
-
textStyle={{ color: theme.colors.white }}
|
|
375
423
|
style={{ borderRadius: 7.6, marginTop: 20 }}
|
|
376
424
|
onClick={() => setOpenModal({ ...openModal, signup: true })}
|
|
377
425
|
/>
|
|
378
426
|
<OButton
|
|
379
427
|
text={t('LOGIN', 'Login')}
|
|
380
|
-
textStyle={{ color: theme.colors.primary }}
|
|
381
|
-
bgColor={theme.colors.white}
|
|
382
|
-
borderColor={theme.colors.primary}
|
|
383
428
|
style={{ borderRadius: 7.6, marginTop: 20 }}
|
|
384
429
|
onClick={() => setOpenModal({ ...openModal, login: true })}
|
|
385
430
|
/>
|
|
@@ -401,6 +446,9 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
401
446
|
isCheckout
|
|
402
447
|
phoneUpdate={phoneUpdate}
|
|
403
448
|
togglePhoneUpdate={togglePhoneUpdate}
|
|
449
|
+
isOrderTypeValidationField
|
|
450
|
+
requiredFields={requiredFields}
|
|
451
|
+
checkoutFields={checkoutFields}
|
|
404
452
|
/>
|
|
405
453
|
)}
|
|
406
454
|
</ChUserDetails>
|
|
@@ -512,6 +560,9 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
512
560
|
hideDriverTip={configs?.multi_business_checkout_show_combined_driver_tip?.value === '1'}
|
|
513
561
|
onNavigationRedirect={(route: string, params: any) => props.navigation.navigate(route, params)}
|
|
514
562
|
businessConfigs={cart?.business?.configs}
|
|
563
|
+
cartsOpened={cartsOpened}
|
|
564
|
+
changeActiveState={changeActiveState}
|
|
565
|
+
isActive={cartsOpened?.includes?.(cart?.uuid)}
|
|
515
566
|
/>
|
|
516
567
|
{openCarts.length > 1 && (
|
|
517
568
|
<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100, marginTop: 13, marginHorizontal: -40 }} />
|
|
@@ -621,30 +672,33 @@ const MultiCheckoutUI = (props: any) => {
|
|
|
621
672
|
</ScrollView>
|
|
622
673
|
</OModal>
|
|
623
674
|
<OModal
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
675
|
+
open={isOpen}
|
|
676
|
+
onClose={() => setIsOpen(false)}
|
|
677
|
+
>
|
|
678
|
+
<View style={styles.detailWrapper}>
|
|
679
|
+
<UserDetails
|
|
680
|
+
isUserDetailsEdit
|
|
681
|
+
useValidationFields
|
|
682
|
+
useDefualtSessionManager
|
|
683
|
+
useSessionUser
|
|
684
|
+
isCheckout
|
|
685
|
+
isEdit
|
|
686
|
+
phoneUpdate={phoneUpdate}
|
|
687
|
+
togglePhoneUpdate={togglePhoneUpdate}
|
|
688
|
+
hideUpdateButton
|
|
689
|
+
handlePlaceOrderAsGuest={handlePlaceOrderAsGuest}
|
|
690
|
+
isCheckoutPlace
|
|
691
|
+
isOrderTypeValidationField
|
|
692
|
+
requiredFields={requiredFields}
|
|
693
|
+
checkoutFields={checkoutFields}
|
|
694
|
+
onClose={() => {
|
|
695
|
+
setIsOpen(false)
|
|
696
|
+
handlePlaceOrder()
|
|
697
|
+
}}
|
|
698
|
+
setIsOpen={setIsOpen}
|
|
699
|
+
/>
|
|
700
|
+
</View>
|
|
701
|
+
</OModal>
|
|
648
702
|
</Container>
|
|
649
703
|
|
|
650
704
|
<FloatingButton
|
|
@@ -53,6 +53,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
|
|
|
53
53
|
const [{ configs }] = useConfig()
|
|
54
54
|
|
|
55
55
|
const isTaxIncludedOnPrice = orders.every((_order: any) => _order.taxes?.length ? _order.taxes?.every((_tax: any) => _tax.type === 1) : true)
|
|
56
|
+
const deliveryType = orders.find((order: any) => order.delivery_type)?.delivery_type
|
|
56
57
|
const progressBarStyle = configs.multi_business_checkout_progress_bar_style?.value
|
|
57
58
|
const showBarInOrder = ['group', 'both']
|
|
58
59
|
const showBarInIndividual = ['individual', 'both']
|
|
@@ -71,7 +72,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
|
|
|
71
72
|
navigation?.canGoBack() && navigation.goBack();
|
|
72
73
|
return;
|
|
73
74
|
}
|
|
74
|
-
navigation.navigate('
|
|
75
|
+
navigation.navigate('BottomTab');
|
|
75
76
|
return true
|
|
76
77
|
}
|
|
77
78
|
|
|
@@ -100,6 +101,7 @@ export const MultiOrdersDetailsUI = (props: any) => {
|
|
|
100
101
|
style={styles.btnBackArrow}
|
|
101
102
|
onClick={() => handleArrowBack()}
|
|
102
103
|
icon={AntDesignIcon}
|
|
104
|
+
useArrow
|
|
103
105
|
iconProps={{
|
|
104
106
|
name: 'arrowleft',
|
|
105
107
|
size: 26
|
|
@@ -171,19 +173,23 @@ export const MultiOrdersDetailsUI = (props: any) => {
|
|
|
171
173
|
))}
|
|
172
174
|
</Section>
|
|
173
175
|
<Divider />
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
176
|
+
{deliveryType === 1 && (
|
|
177
|
+
<>
|
|
178
|
+
<Section>
|
|
179
|
+
<OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={20}>
|
|
180
|
+
{t('DELIVERYA_V21', 'Delivery address')}
|
|
181
|
+
</OText>
|
|
182
|
+
{loading ? (
|
|
183
|
+
<PlaceholderLine height={18} noMargin style={{ borderRadius: 2 }} />
|
|
184
|
+
) : (
|
|
185
|
+
<OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2}>
|
|
186
|
+
{customer?.address}
|
|
187
|
+
</OText>
|
|
188
|
+
)}
|
|
189
|
+
</Section>
|
|
190
|
+
<Divider />
|
|
191
|
+
</>
|
|
192
|
+
)}
|
|
187
193
|
{loading ? (
|
|
188
194
|
<Placeholder Animation={Fade}>
|
|
189
195
|
<PlaceholderLine
|
|
@@ -2,13 +2,14 @@ import React, { useState, useEffect } from 'react'
|
|
|
2
2
|
import { useLanguage } from 'ordering-components/native';
|
|
3
3
|
import { View, StyleSheet, RefreshControl, Platform } from 'react-native';
|
|
4
4
|
import AntDesignIcon from 'react-native-vector-icons/AntDesign'
|
|
5
|
-
|
|
5
|
+
import { GiftCardOrdersList } from '../GiftCard/GiftCardOrdersList'
|
|
6
6
|
import { OrdersOption } from '../OrdersOption'
|
|
7
7
|
import { HeaderTitle, OButton, OText } from '../shared'
|
|
8
8
|
import { ScrollView } from 'react-native-gesture-handler';
|
|
9
9
|
import { Tab } from './styles'
|
|
10
10
|
import { useTheme } from 'styled-components/native';
|
|
11
11
|
import { Container } from '../../layouts/Container';
|
|
12
|
+
import NavBar from '../NavBar'
|
|
12
13
|
|
|
13
14
|
export const MyOrders = (props: any) => {
|
|
14
15
|
const {
|
|
@@ -40,7 +41,8 @@ export const MyOrders = (props: any) => {
|
|
|
40
41
|
const MyOrdersMenu = [
|
|
41
42
|
{ key: 'orders', value: t('ORDERS', 'Orders'), disabled: false },
|
|
42
43
|
{ key: 'business', value: t('BUSINESS', 'Business'), disabled: hideBusinessTab },
|
|
43
|
-
{ key: 'products', value: t('PRODUCTS', 'Products'), disabled: hideProductsTab }
|
|
44
|
+
{ key: 'products', value: t('PRODUCTS', 'Products'), disabled: hideProductsTab },
|
|
45
|
+
{ key: 'giftCards', value: t('GIFT_CARD', 'Gift card'), disabled: false }
|
|
44
46
|
]
|
|
45
47
|
const goToBack = () => navigation?.canGoBack() && navigation.goBack()
|
|
46
48
|
|
|
@@ -92,29 +94,15 @@ export const MyOrders = (props: any) => {
|
|
|
92
94
|
...props.titleStyle
|
|
93
95
|
}}>
|
|
94
96
|
{!props.hideBackBtn && (!isChewLayout || (isChewLayout && hideOrdersTheme)) && (
|
|
95
|
-
<
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
backgroundColor: '#FFF',
|
|
103
|
-
borderColor: '#FFF',
|
|
104
|
-
shadowColor: '#FFF',
|
|
105
|
-
paddingLeft: 0,
|
|
106
|
-
paddingRight: 0,
|
|
107
|
-
marginTop: 30,
|
|
108
|
-
}}
|
|
109
|
-
onClick={goToBack}
|
|
110
|
-
icon={AntDesignIcon}
|
|
111
|
-
iconProps={{
|
|
112
|
-
name: 'arrowleft',
|
|
113
|
-
size: 26
|
|
114
|
-
}}
|
|
97
|
+
<NavBar
|
|
98
|
+
title={t('MY_ORDERS', 'My Orders')}
|
|
99
|
+
titleAlign={'center'}
|
|
100
|
+
onActionLeft={goToBack}
|
|
101
|
+
showCall={false}
|
|
102
|
+
paddingTop={30}
|
|
103
|
+
btnStyle={{ paddingLeft: 0 }}
|
|
115
104
|
/>
|
|
116
105
|
)}
|
|
117
|
-
<HeaderTitle ph={10} text={t('MY_ORDERS', 'My Orders')} />
|
|
118
106
|
</View>
|
|
119
107
|
)}
|
|
120
108
|
{!hideOrders && !isChewLayout && !showNavbar && (
|
|
@@ -124,7 +112,7 @@ export const MyOrders = (props: any) => {
|
|
|
124
112
|
<ScrollView
|
|
125
113
|
horizontal
|
|
126
114
|
style={{ ...styles.container, borderBottomWidth: 1 }}
|
|
127
|
-
contentContainerStyle={{ paddingHorizontal: !!businessesSearchList ? 0 : 20
|
|
115
|
+
contentContainerStyle={{ paddingHorizontal: !!businessesSearchList ? 0 : 20 }}
|
|
128
116
|
showsHorizontalScrollIndicator={false}
|
|
129
117
|
scrollEventThrottle={16}
|
|
130
118
|
>
|
|
@@ -148,7 +136,7 @@ export const MyOrders = (props: any) => {
|
|
|
148
136
|
)}
|
|
149
137
|
{selectedOption === 'orders' && (
|
|
150
138
|
<>
|
|
151
|
-
<View style={{ paddingHorizontal: 20
|
|
139
|
+
<View style={{ paddingHorizontal: 20 }}>
|
|
152
140
|
<OrdersOption
|
|
153
141
|
{...props}
|
|
154
142
|
preOrders
|
|
@@ -215,7 +203,14 @@ export const MyOrders = (props: any) => {
|
|
|
215
203
|
setOrdersLength={setOrdersLength}
|
|
216
204
|
/>
|
|
217
205
|
)}
|
|
206
|
+
|
|
207
|
+
{selectedOption === 'giftCards' && (
|
|
208
|
+
<View style={{ paddingHorizontal: 20 }}>
|
|
209
|
+
<GiftCardOrdersList
|
|
210
|
+
onNavigationRedirect={props?.onNavigationRedirect}
|
|
211
|
+
/>
|
|
212
|
+
</View>
|
|
213
|
+
)}
|
|
218
214
|
</Container>
|
|
219
|
-
|
|
220
215
|
)
|
|
221
216
|
}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
|
|
1
4
|
import * as React from 'react'
|
|
2
5
|
import styled, { useTheme } from 'styled-components/native'
|
|
3
6
|
import { OButton, OIcon, OText } from '../shared'
|
|
@@ -64,6 +67,7 @@ const NavBar = (props: Props) => {
|
|
|
64
67
|
<Wrapper style={{ paddingTop: props.paddingTop, ...{ flexDirection: props.isVertical ? 'column' : 'row', alignItems: props.isVertical ? 'flex-start' : 'center' }, ...props.style }}>
|
|
65
68
|
{!props.hideArrowLeft && (
|
|
66
69
|
<OButton
|
|
70
|
+
useArrow
|
|
67
71
|
iconProps={{
|
|
68
72
|
name: 'arrowleft',
|
|
69
73
|
size: 26
|
|
@@ -114,8 +118,6 @@ const NavBar = (props: Props) => {
|
|
|
114
118
|
{props.showCall
|
|
115
119
|
? (<OButton
|
|
116
120
|
isCircle={true}
|
|
117
|
-
bgColor={theme.colors.primary}
|
|
118
|
-
borderColor={theme.colors.primary}
|
|
119
121
|
imgRightSrc={null}
|
|
120
122
|
imgLeftStyle={{ tintColor: 'white', width: 30, height: 30 }}
|
|
121
123
|
imgLeftSrc={theme.images.general.support}
|
|
@@ -45,15 +45,10 @@ export const NetworkError = (props: NoNetworkParams) => {
|
|
|
45
45
|
/>
|
|
46
46
|
<OButton
|
|
47
47
|
text={t('REFRESH', 'Refresh')}
|
|
48
|
-
bgColor={theme.colors.primary}
|
|
49
|
-
borderColor={theme.colors.primary}
|
|
50
48
|
style={{
|
|
51
49
|
borderRadius: 8,
|
|
52
50
|
marginTop: 45
|
|
53
51
|
}}
|
|
54
|
-
textStyle={{
|
|
55
|
-
color: theme.colors.white
|
|
56
|
-
}}
|
|
57
52
|
onClick={() => RNRestart.Restart()}
|
|
58
53
|
/>
|
|
59
54
|
</ImageContainer>
|
|
@@ -42,11 +42,8 @@ export const NotFoundSource = (props: NotFoundSourceParams) => {
|
|
|
42
42
|
<View style={{ marginTop: 10, width: '100%' }}>
|
|
43
43
|
<OButton
|
|
44
44
|
style={{ width: '100%', height: 50, ...btnStyle }}
|
|
45
|
-
bgColor={theme.colors.primary}
|
|
46
|
-
borderColor={theme.colors.primary}
|
|
47
45
|
onClick={() => onClickButton()}
|
|
48
46
|
text={btnTitle}
|
|
49
|
-
textStyle={{ color: theme.colors.white }}
|
|
50
47
|
/>
|
|
51
48
|
</View>
|
|
52
49
|
)}
|
|
@@ -57,7 +57,7 @@ export const OrderEta = (props: any) => {
|
|
|
57
57
|
}
|
|
58
58
|
estimatedUtcTime = moment.utc(_delivery).add(totalEta, 'minutes')
|
|
59
59
|
const _estimatedTime = outputFormat ? moment(estimatedUtcTime).local().format(outputFormat) : parseDate(estimatedUtcTime, { utc: false })
|
|
60
|
-
setEstimatedDeliveryTime(_estimatedTime)
|
|
60
|
+
setEstimatedDeliveryTime(order?.status === 13 ? parseDate(_delivery, { utc: !!order?.delivery_datetime_utc, outputFormat: outputFormat }) : _estimatedTime)
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
useEffect(() => {
|
|
@@ -145,10 +145,10 @@ export const OrderHistory = (props: any) => {
|
|
|
145
145
|
</>
|
|
146
146
|
)
|
|
147
147
|
: message.change?.attribute === 'prepared_in' ? (
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
148
|
+
<>
|
|
149
|
+
{t('TIME_ADDED_BY_BUSINESS', 'Time added by business')}{'\n'}
|
|
150
|
+
{formatSeconds(parseInt(message.change.new, 10))}
|
|
151
|
+
</>
|
|
152
152
|
) : t(ORDER_STATUS[parseInt(message.change.new, 10)])
|
|
153
153
|
}
|
|
154
154
|
</OText>
|
|
@@ -170,11 +170,9 @@ export const OrderHistory = (props: any) => {
|
|
|
170
170
|
))}
|
|
171
171
|
<OButton
|
|
172
172
|
text={enableReview ? t('REVIEW_ORDER', 'Review order') : t('CONTINUE', 'Continue')}
|
|
173
|
-
textStyle={{ fontSize: 14
|
|
173
|
+
textStyle={{ fontSize: 14 }}
|
|
174
174
|
imgRightSrc={theme.images.general.arrow_right}
|
|
175
175
|
imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
|
|
176
|
-
borderColor='transparent'
|
|
177
|
-
bgColor={theme.colors.primary}
|
|
178
176
|
style={{ borderRadius: 7.6, borderWidth: 1, height: 44, shadowOpacity: 0, marginBottom: 30, marginTop: 20 }}
|
|
179
177
|
onClick={() => handleReview()}
|
|
180
178
|
/>
|