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.
Files changed (165) hide show
  1. package/package.json +6 -7
  2. package/src/DeliveryApp.tsx +43 -1
  3. package/src/components/BusinessesListing/index.tsx +1 -1
  4. package/src/components/PaymentOptionsWebView/index.tsx +1 -0
  5. package/src/components/StripeMethodForm/index.tsx +6 -4
  6. package/src/components/VerifyPhone/styles.tsx +1 -2
  7. package/src/types/index.tsx +3 -1
  8. package/themes/business/index.tsx +4 -0
  9. package/themes/business/src/components/AcceptOrRejectOrder/index.tsx +9 -6
  10. package/themes/business/src/components/AcceptOrRejectOrder/styles.tsx +1 -0
  11. package/themes/business/src/components/BusinessProductList/index.tsx +2 -1
  12. package/themes/business/src/components/Chat/index.tsx +3 -1
  13. package/themes/business/src/components/DriverMap/index.tsx +44 -27
  14. package/themes/business/src/components/GoogleMap/index.tsx +15 -8
  15. package/themes/business/src/components/Home/index.tsx +5 -1
  16. package/themes/business/src/components/LanguageSelector/index.tsx +2 -3
  17. package/themes/business/src/components/LanguageSelector/lang_country.json +515 -70
  18. package/themes/business/src/components/LogoutButton/index.tsx +1 -1
  19. package/themes/business/src/components/MapView/index.tsx +36 -17
  20. package/themes/business/src/components/NewOrderNotification/index.tsx +74 -24
  21. package/themes/business/src/components/OrderDetails/Business.tsx +65 -7
  22. package/themes/business/src/components/OrderDetails/Delivery.tsx +35 -20
  23. package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx +110 -40
  24. package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx +61 -35
  25. package/themes/business/src/components/OrderDetails/styles.tsx +39 -3
  26. package/themes/business/src/components/OrderDetails/usePrinterCommands.tsx +220 -0
  27. package/themes/business/src/components/OrderSummary/index.tsx +222 -72
  28. package/themes/business/src/components/OrdersListManager/index.tsx +9 -1
  29. package/themes/business/src/components/OrdersOption/index.tsx +247 -159
  30. package/themes/business/src/components/PhoneInputNumber/index.tsx +8 -5
  31. package/themes/business/src/components/PreviousMessages/index.tsx +12 -0
  32. package/themes/business/src/components/PreviousOrders/OrderItem.tsx +25 -15
  33. package/themes/business/src/components/PreviousOrders/index.tsx +5 -3
  34. package/themes/business/src/components/PrinterEdition/index.tsx +363 -0
  35. package/themes/business/src/components/PrinterEdition/styles.tsx +61 -0
  36. package/themes/business/src/components/PrinterSettings/index.tsx +267 -0
  37. package/themes/business/src/components/PrinterSettings/styles.tsx +30 -0
  38. package/themes/business/src/components/ProductItemAccordion/index.tsx +2 -2
  39. package/themes/business/src/components/ReviewCustomer/index.tsx +2 -0
  40. package/themes/business/src/components/Sessions/index.tsx +187 -0
  41. package/themes/business/src/components/Sessions/styles.tsx +20 -0
  42. package/themes/business/src/components/StoresList/index.tsx +2 -2
  43. package/themes/business/src/components/UserFormDetails/index.tsx +111 -107
  44. package/themes/business/src/components/UserProfileForm/index.tsx +84 -47
  45. package/themes/business/src/components/WebsocketStatus/index.tsx +2 -2
  46. package/themes/business/src/components/shared/OInput.tsx +2 -0
  47. package/themes/business/src/components/shared/OTextarea.tsx +8 -9
  48. package/themes/business/src/hooks/useLocation.tsx +5 -4
  49. package/themes/business/src/types/index.tsx +23 -5
  50. package/themes/business/src/utils/index.tsx +19 -1
  51. package/themes/doordash/src/components/BusinessesListing/index.tsx +1 -1
  52. package/themes/doordash/src/components/LoginForm/index.tsx +1 -2
  53. package/themes/instacart/src/components/BusinessesListing/index.tsx +1 -1
  54. package/themes/kiosk/src/components/Checkout/index.tsx +6 -0
  55. package/themes/kiosk/src/components/NavBar/index.tsx +14 -14
  56. package/themes/kiosk/src/components/OptionCard/index.tsx +1 -1
  57. package/themes/kiosk/src/components/OrderTypeCardSelector/index.tsx +8 -10
  58. package/themes/kiosk/src/components/shared/OButton.tsx +5 -18
  59. package/themes/original/index.tsx +13 -1
  60. package/themes/original/src/components/AddressDetails/index.tsx +20 -10
  61. package/themes/original/src/components/AddressForm/index.tsx +32 -17
  62. package/themes/original/src/components/AddressList/index.tsx +8 -7
  63. package/themes/original/src/components/AnalyticsSegment/index.tsx +6 -6
  64. package/themes/original/src/components/AppleLogin/index.tsx +4 -4
  65. package/themes/original/src/components/BusinessBasicInformation/index.tsx +6 -9
  66. package/themes/original/src/components/BusinessController/index.tsx +12 -7
  67. package/themes/original/src/components/BusinessItemAccordion/index.tsx +13 -5
  68. package/themes/original/src/components/BusinessListingSearch/BusinessSearchFooter.tsx +2 -3
  69. package/themes/original/src/components/BusinessListingSearch/BusinessSearchHeader.tsx +1 -3
  70. package/themes/original/src/components/BusinessListingSearch/index.tsx +1 -2
  71. package/themes/original/src/components/BusinessPreorder/index.tsx +20 -15
  72. package/themes/original/src/components/BusinessProductsList/SubcategoriesComponent/index.tsx +5 -5
  73. package/themes/original/src/components/BusinessProductsList/index.tsx +3 -3
  74. package/themes/original/src/components/BusinessProductsList/styles.tsx +0 -3
  75. package/themes/original/src/components/BusinessProductsListing/index.tsx +20 -8
  76. package/themes/original/src/components/BusinessTypeFilter/index.tsx +9 -8
  77. package/themes/original/src/components/BusinessesListing/Layout/Appointment/index.tsx +2 -1
  78. package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx +1 -1
  79. package/themes/original/src/components/BusinessesListing/Layout/Original/styles.tsx +1 -1
  80. package/themes/original/src/components/BusinessesListing/index.tsx +0 -1
  81. package/themes/original/src/components/Cart/index.tsx +39 -12
  82. package/themes/original/src/components/CartContent/index.tsx +21 -8
  83. package/themes/original/src/components/Checkout/index.tsx +118 -68
  84. package/themes/original/src/components/CitiesControl/index.tsx +0 -3
  85. package/themes/original/src/components/CouponControl/index.tsx +1 -3
  86. package/themes/original/src/components/DriverTips/index.tsx +1 -3
  87. package/themes/original/src/components/Favorite/index.tsx +1 -5
  88. package/themes/original/src/components/FavoriteList/index.tsx +0 -1
  89. package/themes/original/src/components/ForgotPasswordForm/index.tsx +5 -7
  90. package/themes/original/src/components/GiftCard/GiftCardOrdersList/index.tsx +64 -0
  91. package/themes/original/src/components/GiftCard/GiftCardOrdersList/styles.tsx +8 -0
  92. package/themes/original/src/components/GiftCard/GiftCardUI/index.tsx +15 -17
  93. package/themes/original/src/components/GiftCard/PurchaseGiftCard/index.tsx +3 -7
  94. package/themes/original/src/components/GiftCard/RedeemGiftCard/index.tsx +24 -32
  95. package/themes/original/src/components/GiftCard/SendGiftCard/index.tsx +7 -9
  96. package/themes/original/src/components/GiftCard/SingleGiftCard/index.tsx +101 -0
  97. package/themes/original/src/components/GiftCard/SingleGiftCard/styles.tsx +4 -0
  98. package/themes/original/src/components/GiftCard/VerticalGiftCardOrdersLayout/index.tsx +82 -0
  99. package/themes/original/src/components/GiftCard/VerticalGiftCardOrdersLayout/styles.tsx +9 -0
  100. package/themes/original/src/components/GoogleMap/index.tsx +39 -18
  101. package/themes/original/src/components/Help/index.tsx +2 -0
  102. package/themes/original/src/components/HighestRatedBusinesses/index.tsx +1 -1
  103. package/themes/original/src/components/Home/index.tsx +2 -10
  104. package/themes/original/src/components/LoginForm/Otp/index.tsx +0 -3
  105. package/themes/original/src/components/LoginForm/index.tsx +4 -7
  106. package/themes/original/src/components/MessageListing/index.tsx +1 -0
  107. package/themes/original/src/components/Messages/index.tsx +8 -7
  108. package/themes/original/src/components/MomentOption/index.tsx +13 -2
  109. package/themes/original/src/components/MultiCartsPaymethodsAndWallets/index.tsx +7 -3
  110. package/themes/original/src/components/MultiCheckout/index.tsx +164 -110
  111. package/themes/original/src/components/MultiOrdersDetails/index.tsx +20 -14
  112. package/themes/original/src/components/MyOrders/index.tsx +21 -26
  113. package/themes/original/src/components/NavBar/index.tsx +4 -2
  114. package/themes/original/src/components/NetworkError/index.tsx +0 -5
  115. package/themes/original/src/components/NotFoundSource/index.tsx +0 -3
  116. package/themes/original/src/components/OrderDetails/OrderEta.tsx +1 -1
  117. package/themes/original/src/components/OrderDetails/OrderHistory.tsx +5 -7
  118. package/themes/original/src/components/OrderDetails/index.tsx +26 -9
  119. package/themes/original/src/components/OrderDetails/styles.tsx +0 -1
  120. package/themes/original/src/components/OrderProgress/index.tsx +22 -3
  121. package/themes/original/src/components/OrderSummary/index.tsx +28 -9
  122. package/themes/original/src/components/OrderTypeSelector/index.tsx +7 -6
  123. package/themes/original/src/components/OrdersOption/index.tsx +2 -4
  124. package/themes/original/src/components/PaymentOptionStripe/index.tsx +0 -5
  125. package/themes/original/src/components/PaymentOptionWallet/index.tsx +56 -56
  126. package/themes/original/src/components/PaymentOptions/index.tsx +46 -5
  127. package/themes/original/src/components/PlaceSpot/index.tsx +1 -3
  128. package/themes/original/src/components/PreviousOrders/index.tsx +1 -2
  129. package/themes/original/src/components/ProductForm/ActionButton.tsx +17 -20
  130. package/themes/original/src/components/ProductForm/index.tsx +108 -105
  131. package/themes/original/src/components/ProductItemAccordion/index.tsx +55 -49
  132. package/themes/original/src/components/ProductItemAccordion/styles.tsx +3 -4
  133. package/themes/original/src/components/ProductOptionSubOption/index.tsx +8 -1
  134. package/themes/original/src/components/ProfessionalProfile/index.tsx +4 -5
  135. package/themes/original/src/components/Promotions/index.tsx +6 -9
  136. package/themes/original/src/components/ReviewDriver/index.tsx +1 -1
  137. package/themes/original/src/components/ReviewOrder/index.tsx +2 -2
  138. package/themes/original/src/components/ReviewProducts/index.tsx +1 -1
  139. package/themes/original/src/components/ReviewTrigger/index.tsx +2 -2
  140. package/themes/original/src/components/ServiceForm/index.tsx +52 -54
  141. package/themes/original/src/components/Sessions/index.tsx +3 -3
  142. package/themes/original/src/components/SignupForm/index.tsx +86 -78
  143. package/themes/original/src/components/SingleOrderCard/index.tsx +1 -2
  144. package/themes/original/src/components/SingleProductCard/index.tsx +5 -6
  145. package/themes/original/src/components/SingleProductCard/styles.tsx +0 -3
  146. package/themes/original/src/components/StripeCardForm/index.tsx +0 -3
  147. package/themes/original/src/components/StripeCardsList/index.tsx +10 -35
  148. package/themes/original/src/components/StripeElementsForm/index.tsx +78 -59
  149. package/themes/original/src/components/StripeElementsForm/naked.tsx +48 -1
  150. package/themes/original/src/components/StripeRedirectForm/index.tsx +0 -3
  151. package/themes/original/src/components/TaxInformation/index.tsx +3 -2
  152. package/themes/original/src/components/UpsellingProducts/UpsellingContent.tsx +10 -7
  153. package/themes/original/src/components/UpsellingProducts/UpsellingLayout.tsx +8 -3
  154. package/themes/original/src/components/UserDetails/index.tsx +3 -2
  155. package/themes/original/src/components/UserFormDetails/index.tsx +155 -131
  156. package/themes/original/src/components/UserProfile/index.tsx +11 -2
  157. package/themes/original/src/components/Wallets/index.tsx +6 -3
  158. package/themes/original/src/components/WebsocketStatus/index.tsx +169 -0
  159. package/themes/original/src/components/WebsocketStatus/styles.tsx +28 -0
  160. package/themes/original/src/components/shared/OAlert.tsx +2 -1
  161. package/themes/original/src/components/shared/OButton.tsx +5 -4
  162. package/themes/original/src/components/shared/OInput.tsx +4 -8
  163. package/themes/original/src/types/index.tsx +5 -1
  164. package/themes/original/src/utils/index.tsx +12 -1
  165. 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
- borderWidth: 0
86
+ borderWidth: 0
86
87
  },
87
88
  detailWrapper: {
88
- paddingHorizontal: 20,
89
- width: '100%'
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
- const [showTitle, setShowTitle] = useState(false)
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
- const [allowedGuest, setAllowedGuest] = useState(false)
152
- const [isOpen, setIsOpen] = useState(false)
153
- const [requiredFields, setRequiredFields] = useState<any>([])
154
- const stripePaymethods: any = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect']
155
- const [openModal, setOpenModal] = useState({ login: false, signup: false, isGuest: false })
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 notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes']
173
- const _requiredFields: any = []
174
-
175
- Object.values(validationFields?.fields?.checkout).map((field: any) => {
176
- if (field?.required && !notFields.includes(field.code)) {
177
- if (!user[field?.code]) {
178
- _requiredFields.push(field?.code)
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
- !user?.cellphone &&
185
- ((validationFields?.fields?.checkout?.cellphone?.enabled &&
186
- validationFields?.fields?.checkout?.cellphone?.required) ||
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
- setRequiredFields(_requiredFields)
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
- setOpenModal({ ...openModal, signup: true, isGuest: true })
207
- return
208
- }
230
+ setOpenModal({ ...openModal, signup: true, isGuest: true })
231
+ return
232
+ }
209
233
 
210
- if (!userErrors.length && (!requiredFields?.length || allowedGuest)) {
234
+ if (!userErrors.length && !requiredFields?.length) {
211
235
  handleGroupPlaceOrder && handleGroupPlaceOrder(confirmPayment)
212
236
  return
213
237
  }
214
238
  if (requiredFields?.length) {
215
- setIsOpen(true)
216
- return
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
- setIsOpen(false)
228
- handleGroupPlaceOrder && handleGroupPlaceOrder()
229
- }
251
+ setIsOpen(false)
252
+ handleGroupPlaceOrder && handleGroupPlaceOrder()
253
+ }
230
254
 
231
255
  const handleSuccessSignup = (user: any) => {
232
- login({
233
- user,
234
- token: user?.session?.access_token
235
- })
236
- openModal?.isGuest && handlePlaceOrderAsGuest()
237
- setOpenModal({ ...openModal, signup: false, isGuest: false })
238
- }
239
-
240
- const handleSuccessLogin = (user: any) => {
241
- if (user) setOpenModal({ ...openModal, login: false })
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
- setShowTitle(contentOffset.y > 30)
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 (validationFields && validationFields?.fields?.checkout) {
281
+ if (checkoutFieldsState?.loading || userLoading) return
282
+ if (user?.guest_id) {
283
+ checkGuestValidationFields()
284
+ } else {
250
285
  checkValidationFields()
251
286
  }
252
- }, [validationFields, user])
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
- <View style={styles.wrapperNavbar}>
289
- <TopHeader>
290
- <>
291
- <TopActions onPress={() => navigation?.canGoBack() && navigation.goBack()}>
292
- <IconAntDesign
293
- name='arrowleft'
294
- size={26}
295
- />
296
- </TopActions>
297
- {showTitle && (
298
- <OText
299
- size={16}
300
- style={{ flex: 1, textAlign: 'center', right: 15 }}
301
- weight={Platform.OS === 'ios' ? '600' : 'bold'}
302
- numberOfLines={2}
303
- ellipsizeMode='tail'
304
- >
305
- {t('CHECKOUT', 'Checkout')}
306
- </OText>
307
- )}
308
- </>
309
- </TopHeader>
310
- </View>
311
- <Container noPadding onScroll={handleScroll}>
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
- titleStyle={{ marginRight: 0, marginLeft: 0 }}
323
- style={{ marginTop: 20 }}
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
- open={isOpen}
625
- onClose={() => setIsOpen(false)}
626
- >
627
- <View style={styles.detailWrapper}>
628
- <UserDetails
629
- isUserDetailsEdit
630
- useValidationFields
631
- useDefualtSessionManager
632
- useSessionUser
633
- isCheckout
634
- isEdit
635
- phoneUpdate={phoneUpdate}
636
- togglePhoneUpdate={togglePhoneUpdate}
637
- requiredFields={requiredFields}
638
- hideUpdateButton
639
- handlePlaceOrderAsGuest={handlePlaceOrderAsGuest}
640
- onClose={() => {
641
- setIsOpen(false)
642
- handlePlaceOrder()
643
- }}
644
- setIsOpen={setIsOpen}
645
- />
646
- </View>
647
- </OModal>
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('BusinessList');
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
- <Section>
175
- <OText size={16} lineHeight={24} weight={'500'} color={theme.colors.textNormal} mBottom={20}>
176
- {t('DELIVERYA_V21', 'Delivery address')}
177
- </OText>
178
- {loading ? (
179
- <PlaceholderLine height={18} noMargin style={{ borderRadius: 2 }} />
180
- ) : (
181
- <OText size={12} lineHeight={18} color={theme.colors.textNormal} mBottom={2}>
182
- {customer?.address}
183
- </OText>
184
- )}
185
- </Section>
186
- <Divider />
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
- <OButton
96
- imgLeftStyle={{ width: 18 }}
97
- imgRightSrc={null}
98
- style={{
99
- borderWidth: 0,
100
- width: 26,
101
- height: 26,
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
- {t('TIME_ADDED_BY_BUSINESS', 'Time added by business')}{'\n'}
150
- {formatSeconds(parseInt(message.change.new, 10))}
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, color: theme.colors.white }}
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
  />