ordering-ui-react-native 0.21.67 → 0.21.68-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 (166) 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 +34 -23
  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 +26 -11
  20. package/themes/business/src/components/NewOrderNotification/index.tsx +74 -24
  21. package/themes/business/src/components/OrderDetails/Business.tsx +63 -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 +240 -76
  28. package/themes/business/src/components/OrdersListManager/index.tsx +9 -1
  29. package/themes/business/src/components/OrdersOption/index.tsx +250 -127
  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 +29 -19
  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 +106 -54
  45. package/themes/business/src/components/WebsocketStatus/index.tsx +4 -4
  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 +21 -4
  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 +15 -7
  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 +28 -13
  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 +41 -14
  82. package/themes/original/src/components/CartContent/index.tsx +60 -45
  83. package/themes/original/src/components/Checkout/index.tsx +94 -62
  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 +9 -11
  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 +123 -62
  111. package/themes/original/src/components/MultiCheckout/styles.tsx +17 -0
  112. package/themes/original/src/components/MultiOrdersDetails/index.tsx +20 -14
  113. package/themes/original/src/components/MyOrders/index.tsx +21 -26
  114. package/themes/original/src/components/NavBar/index.tsx +4 -2
  115. package/themes/original/src/components/NetworkError/index.tsx +0 -5
  116. package/themes/original/src/components/NotFoundSource/index.tsx +0 -3
  117. package/themes/original/src/components/OrderDetails/OrderEta.tsx +1 -1
  118. package/themes/original/src/components/OrderDetails/OrderHistory.tsx +5 -7
  119. package/themes/original/src/components/OrderDetails/index.tsx +28 -12
  120. package/themes/original/src/components/OrderDetails/styles.tsx +0 -1
  121. package/themes/original/src/components/OrderProgress/index.tsx +22 -3
  122. package/themes/original/src/components/OrderSummary/index.tsx +23 -5
  123. package/themes/original/src/components/OrderTypeSelector/index.tsx +7 -6
  124. package/themes/original/src/components/OrdersOption/index.tsx +2 -4
  125. package/themes/original/src/components/PaymentOptionCard/index.tsx +4 -2
  126. package/themes/original/src/components/PaymentOptionStripe/index.tsx +0 -5
  127. package/themes/original/src/components/PaymentOptionWallet/index.tsx +56 -56
  128. package/themes/original/src/components/PaymentOptions/index.tsx +47 -6
  129. package/themes/original/src/components/PlaceSpot/index.tsx +1 -3
  130. package/themes/original/src/components/PreviousOrders/index.tsx +1 -2
  131. package/themes/original/src/components/ProductForm/ActionButton.tsx +16 -19
  132. package/themes/original/src/components/ProductForm/index.tsx +120 -109
  133. package/themes/original/src/components/ProductItemAccordion/index.tsx +55 -49
  134. package/themes/original/src/components/ProductItemAccordion/styles.tsx +3 -4
  135. package/themes/original/src/components/ProductOptionSubOption/index.tsx +112 -91
  136. package/themes/original/src/components/ProfessionalProfile/index.tsx +4 -5
  137. package/themes/original/src/components/Promotions/index.tsx +6 -9
  138. package/themes/original/src/components/ReviewDriver/index.tsx +1 -1
  139. package/themes/original/src/components/ReviewOrder/index.tsx +2 -2
  140. package/themes/original/src/components/ReviewProducts/index.tsx +1 -1
  141. package/themes/original/src/components/ReviewTrigger/index.tsx +2 -2
  142. package/themes/original/src/components/ServiceForm/index.tsx +52 -54
  143. package/themes/original/src/components/Sessions/index.tsx +3 -3
  144. package/themes/original/src/components/SignupForm/index.tsx +65 -67
  145. package/themes/original/src/components/SingleOrderCard/index.tsx +1 -2
  146. package/themes/original/src/components/SingleProductCard/index.tsx +5 -6
  147. package/themes/original/src/components/SingleProductCard/styles.tsx +0 -3
  148. package/themes/original/src/components/StripeCardForm/index.tsx +0 -3
  149. package/themes/original/src/components/StripeCardsList/index.tsx +12 -36
  150. package/themes/original/src/components/StripeElementsForm/index.tsx +78 -59
  151. package/themes/original/src/components/StripeElementsForm/naked.tsx +48 -1
  152. package/themes/original/src/components/StripeRedirectForm/index.tsx +0 -3
  153. package/themes/original/src/components/TaxInformation/index.tsx +3 -2
  154. package/themes/original/src/components/UpsellingProducts/UpsellingContent.tsx +10 -7
  155. package/themes/original/src/components/UpsellingProducts/UpsellingLayout.tsx +8 -3
  156. package/themes/original/src/components/UserFormDetails/index.tsx +83 -84
  157. package/themes/original/src/components/UserProfile/index.tsx +11 -2
  158. package/themes/original/src/components/Wallets/index.tsx +7 -4
  159. package/themes/original/src/components/WebsocketStatus/index.tsx +169 -0
  160. package/themes/original/src/components/WebsocketStatus/styles.tsx +28 -0
  161. package/themes/original/src/components/shared/OAlert.tsx +2 -1
  162. package/themes/original/src/components/shared/OButton.tsx +8 -7
  163. package/themes/original/src/components/shared/OInput.tsx +1 -4
  164. package/themes/original/src/types/index.tsx +5 -1
  165. package/themes/original/src/utils/index.tsx +12 -1
  166. package/themes/uber-eats/src/components/BusinessesListing/index.tsx +1 -1
@@ -1,5 +1,5 @@
1
1
  import React, { useState } from 'react'
2
- import { Platform, StyleSheet, View } from 'react-native'
2
+ import { Platform, StyleSheet, View, Vibration } from 'react-native'
3
3
  import {
4
4
  useLanguage,
5
5
  useOrder,
@@ -20,7 +20,7 @@ import IconAntDesign from 'react-native-vector-icons/AntDesign';
20
20
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
21
21
  import { UpsellingLayout } from './UpsellingLayout';
22
22
 
23
- export const UpsellingContent = (props : any) => {
23
+ export const UpsellingContent = (props: any) => {
24
24
  const {
25
25
  onGoBack,
26
26
  handleUpsellingPage,
@@ -44,12 +44,10 @@ export const UpsellingContent = (props : any) => {
44
44
  const commentDelayTime = isChewLayout ? 500 : null
45
45
 
46
46
  const cartList = (carts && Object.values(carts).filter((_cart: any) => _cart?.products?.length > 0 && _cart.uuid !== cart?.uuid)) || []
47
-
47
+
48
48
  const styles = StyleSheet.create({
49
49
  closeUpsellingButton: {
50
50
  borderRadius: 7.6,
51
- borderColor: theme.colors.primary,
52
- backgroundColor: theme.colors.primary,
53
51
  borderWidth: 1,
54
52
  alignSelf: 'center',
55
53
  height: 44,
@@ -92,6 +90,11 @@ export const UpsellingContent = (props : any) => {
92
90
  setShowTitle(contentOffset.y > 30)
93
91
  }
94
92
 
93
+ const handleClickCheckout = () => {
94
+ Vibration.vibrate(100)
95
+ handleUpsellingPage(cart)
96
+ }
97
+
95
98
  return (
96
99
  <>
97
100
  <View style={styles.wrapperNavbar}>
@@ -160,9 +163,9 @@ export const UpsellingContent = (props : any) => {
160
163
  <OButton
161
164
  imgRightSrc=''
162
165
  text={t('CHECKOUT', 'Checkout')}
166
+ textStyle={{ fontSize: 14 }}
163
167
  style={{ ...styles.closeUpsellingButton }}
164
- textStyle={{ color: theme.colors.white, fontSize: 14 }}
165
- onClick={() => handleUpsellingPage(cart)}
168
+ onClick={() => handleClickCheckout()}
166
169
  />
167
170
  </View>
168
171
  </>
@@ -25,6 +25,9 @@ export const UpsellingLayout = (props : any) => {
25
25
  const [{ parsePrice }] = useUtils()
26
26
  const [, t] = useLanguage()
27
27
 
28
+ const hideProductDummyLogo = theme?.business_view?.components?.products?.components?.product?.components?.dummy?.hidden
29
+
30
+
28
31
  const styles = StyleSheet.create({
29
32
  imageStyle: {
30
33
  width: 73,
@@ -66,9 +69,11 @@ export const UpsellingLayout = (props : any) => {
66
69
  <OText size={10} color={theme.colors.primary}>{t('ADD', 'Add')}</OText>
67
70
  </AddButton>
68
71
  </View>
69
- <View>
70
- <OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
71
- </View>
72
+ {(product?.images || !hideProductDummyLogo) && (
73
+ <View>
74
+ <OIcon url={product?.images || theme?.images?.dummies?.product} style={styles.imageStyle} />
75
+ </View>
76
+ )}
72
77
  </Item>
73
78
  )) : (
74
79
  <OText>
@@ -304,93 +304,97 @@ export const UserFormDetailsUI = (props: any) => {
304
304
  {sortInputFields({
305
305
  values: validationFields.fields?.checkout,
306
306
  }).map(
307
- (field: any) =>
308
- showField &&
309
- showField(field.code) && ((requiredFields && requiredFields.includes(field.code)) || !requiredFields) && (
310
- <React.Fragment key={field.id}>
311
- <Controller
312
- key={field.id}
313
- control={control}
314
- render={() => (
315
- <>
316
- <OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
317
- {t(field?.code?.toUpperCase(), field?.name)}
318
- </OText>
319
- <OInput
320
- name={field.code}
321
- placeholder={t(
322
- field.code.toUpperCase(),
323
- field?.name,
324
- )}
325
- inputStyle={styles.inputStyle}
326
- style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
327
- autoCapitalize={
328
- field.code === 'email' ? 'none' : 'sentences'
329
- }
330
- isDisabled={false}
331
- value={
332
- formState?.changes[field.code] ??
333
- (user && user[field.code]) ??
334
- ''
335
- }
336
- onChange={(val: any) => {
337
- field.code !== 'email'
338
- ? setValue(field.code, val.target.value)
339
- : setValue(
340
- field.code,
341
- val.target.value
342
- .toLowerCase()
343
- .replace(
344
- /[&,()%";:ç?<>{}\\[\]\s]/g,
345
- '',
346
- ),
347
- );
348
- field.code !== 'email'
349
- ? handleChangeInput(val)
350
- : handleChangeInput({
351
- target: {
352
- name: 'email',
353
- value: val.target.value
307
+ (item: any) => {
308
+ const field = item?.validation_field || item
309
+ return (showField &&
310
+ showField(field.code) && ((requiredFields && requiredFields?.includes?.(field.code)) || !requiredFields) && (
311
+ <React.Fragment key={field.id}>
312
+ <Controller
313
+ key={field.id}
314
+ control={control}
315
+ render={() => (
316
+ <>
317
+ <OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
318
+ {t(field?.code?.toUpperCase(), field?.name)}
319
+ </OText>
320
+ <OInput
321
+ name={field.code}
322
+ placeholder={t(
323
+ field.code.toUpperCase(),
324
+ field?.name,
325
+ )}
326
+ inputStyle={styles.inputStyle}
327
+ style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
328
+ autoCapitalize={
329
+ field.code === 'email' ? 'none' : 'sentences'
330
+ }
331
+ isDisabled={false}
332
+ value={
333
+ formState?.changes[field.code] ??
334
+ (user && user[field.code]) ??
335
+ ''
336
+ }
337
+ onChange={(val: any) => {
338
+ field.code !== 'email'
339
+ ? setValue(field.code, val.target.value)
340
+ : setValue(
341
+ field.code,
342
+ val.target.value
354
343
  .toLowerCase()
355
344
  .replace(
356
345
  /[&,()%";:ç?<>{}\\[\]\s]/g,
357
346
  '',
358
347
  ),
359
- },
360
- });
361
- }}
362
- autoCorrect={field.code === 'email' && false}
363
- type={
364
- field.code === 'email'
365
- ? 'email-address'
366
- : 'default'
367
- }
368
- returnKeyType="done"
369
- autoCompleteType={
370
- field.code === 'email' ? 'email' : 'off'
371
- }
372
- />
373
- </>
374
- )}
375
- name={field.code}
376
- rules={getInputRules(field)}
377
- defaultValue={user && user[field.code]}
378
- />
379
- </React.Fragment>
380
- ),
348
+ );
349
+ field.code !== 'email'
350
+ ? handleChangeInput(val)
351
+ : handleChangeInput({
352
+ target: {
353
+ name: 'email',
354
+ value: val.target.value
355
+ .toLowerCase()
356
+ .replace(
357
+ /[&,()%";:ç?<>{}\\[\]\s]/g,
358
+ '',
359
+ ),
360
+ },
361
+ });
362
+ }}
363
+ autoCorrect={field.code === 'email' && false}
364
+ type={
365
+ field.code === 'email'
366
+ ? 'email-address'
367
+ : 'default'
368
+ }
369
+ returnKeyType="done"
370
+ autoCompleteType={
371
+ field.code === 'email' ? 'email' : 'off'
372
+ }
373
+ />
374
+ </>
375
+ )}
376
+ name={field.code}
377
+ rules={getInputRules(field)}
378
+ defaultValue={user && user[field.code]}
379
+ />
380
+ </React.Fragment>
381
+ ))
382
+ },
381
383
  )}
382
384
  {showInputBirthday && (
383
- <WrapperBirthdate>
384
- <OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
385
- {t('BIRTHDATE', 'Birthdate')}
386
- </OText>
387
- <TouchableOpacity onPress={() => setShowDatePicker(!showDatePicker)}>
388
- <OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ marginTop: 6, marginBottom: -15 }}>
389
- {birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
385
+ <>
386
+ <WrapperBirthdate>
387
+ <OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
388
+ {t('BIRTHDATE', 'Birthdate')}
390
389
  </OText>
391
- </TouchableOpacity>
390
+ <TouchableOpacity onPress={() => setShowDatePicker(!showDatePicker)}>
391
+ <OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ marginTop: 6 }}>
392
+ {birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
393
+ </OText>
394
+ </TouchableOpacity>
395
+ </WrapperBirthdate>
392
396
  <DatePickerUI open={showDatePicker} birthdate={birthdate} onConfirm={_handleChangeDate} onCancel={() => setShowDatePicker(false)} />
393
- </WrapperBirthdate>
397
+ </>
394
398
  )}
395
399
  {!!showInputPhoneNumber && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
396
400
  <WrapperPhone>
@@ -480,9 +484,7 @@ export const UserFormDetailsUI = (props: any) => {
480
484
  ? t('UPDATING', 'Updating...')
481
485
  : t('UPDATE', 'Update')
482
486
  }
483
- bgColor={theme.colors.primary}
484
- textStyle={{ color: theme.colors.white, fontSize: 14 }}
485
- borderColor={theme.colors.primary}
487
+ textStyle={{ fontSize: 14 }}
486
488
  isDisabled={formState.loading}
487
489
  imgRightSrc={null}
488
490
  style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
@@ -500,12 +502,10 @@ export const UserFormDetailsUI = (props: any) => {
500
502
  ? t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')
501
503
  : t('CONTINUE', 'Continue'))
502
504
  }
503
- bgColor={theme.colors.primary}
504
505
  textStyle={{
505
506
  color: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.primary : theme.colors.white,
506
507
  fontSize: 14
507
508
  }}
508
- borderColor={theme.colors.primary}
509
509
  isDisabled={!user?.guest_id && (formState.loading || !isValid)}
510
510
  imgRightSrc={null}
511
511
  style={{
@@ -552,4 +552,3 @@ export const UserFormDetailsUI = (props: any) => {
552
552
  </>
553
553
  );
554
554
  };
555
-
@@ -20,7 +20,7 @@ import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
20
20
  import FontAwesome from 'react-native-vector-icons/FontAwesome'
21
21
  import FastImage from 'react-native-fast-image'
22
22
  import { OAlert } from '../../../../../src/components/shared'
23
-
23
+ import { WebsocketStatus } from '../WebsocketStatus'
24
24
  import {
25
25
  OIcon,
26
26
  OText,
@@ -44,6 +44,7 @@ const ProfileListUI = (props: ProfileParams) => {
44
44
  handleRemoveAccount,
45
45
  removeAccountState,
46
46
  handleChangePromotions,
47
+ appVersion
47
48
  } = props;
48
49
 
49
50
  const theme = useTheme();
@@ -151,7 +152,7 @@ const ProfileListUI = (props: ProfileParams) => {
151
152
  const detailProps = {
152
153
  goToBack: () => props.navigation?.canGoBack() && props.navigation.goBack(),
153
154
  onNavigationRedirect: (route: string, params: any) => props.navigation.navigate(route, params),
154
- handleRemoveAccount
155
+ handleRemoveAccount,
155
156
  }
156
157
 
157
158
  useEffect(() => {
@@ -270,6 +271,14 @@ const ProfileListUI = (props: ProfileParams) => {
270
271
  <View style={{ height: 17 }} />
271
272
  </Actions>
272
273
  </ListWrap>
274
+ <WebsocketStatus />
275
+ {appVersion && (
276
+ <View
277
+ style={{ alignItems: 'center' }}
278
+ >
279
+ <OText>v{appVersion}</OText>
280
+ </View>
281
+ )}
273
282
  <OAlert
274
283
  open={confirm.open}
275
284
  title={confirm.title}
@@ -129,7 +129,7 @@ const WalletsUI = (props: any) => {
129
129
  flexDirection: !hideWalletsTheme ? 'column' : 'row',
130
130
  justifyContent: !hideWalletsTheme ? 'flex-start' : 'space-between',
131
131
  alignItems: !hideWalletsTheme ? 'flex-start' : 'center',
132
- marginTop: !hideWalletsTheme ? 30 : 10,
132
+ marginTop: !hideWalletsTheme ? Platform.OS === 'ios' ? 20 : 30 : 10,
133
133
  },
134
134
  }}>
135
135
  <NavBar
@@ -141,6 +141,11 @@ const WalletsUI = (props: any) => {
141
141
  btnStyle={{ paddingLeft: 0 }}
142
142
  isVertical={!hideWalletsTheme}
143
143
  hideArrowLeft={!hideWalletsTheme}
144
+ buttonProps={{
145
+ bgColor: theme.colors.white,
146
+ borderColor: theme.colors.white,
147
+ textStyle: { color: theme.colors.btnFont }
148
+ }}
144
149
  />
145
150
  {isChewLayout && !openHistory && (
146
151
  <OButton
@@ -304,13 +309,11 @@ const WalletsUI = (props: any) => {
304
309
  borderWidth: 0,
305
310
  width: 26,
306
311
  height: 26,
307
- backgroundColor: '#FFF',
308
- borderColor: '#FFF',
309
- shadowColor: '#FFF',
310
312
  paddingLeft: 0,
311
313
  paddingRight: 0,
312
314
  marginBottom: 10
313
315
  }}
316
+ useArrow
314
317
  onClick={() => setOpenHistory(false)}
315
318
  icon={AntDesignIcon}
316
319
  iconProps={{
@@ -0,0 +1,169 @@
1
+ import React, { useState } from 'react'
2
+ import { useLanguage, useUtils, WebsocketStatus as WebsocketStatusController } from 'ordering-components/native'
3
+ import { TouchableOpacity, View, StyleSheet } from 'react-native'
4
+ import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
5
+ import { useTheme } from 'styled-components/native'
6
+ import RNRestart from 'react-native-restart'
7
+ import { OModal, OButton, OText, OIcon } from '../shared'
8
+
9
+ import {
10
+ Container,
11
+ ModalContainer,
12
+ ModalTitle,
13
+ StatusItemWrapper,
14
+ StatusText
15
+ } from './styles'
16
+
17
+ const SocketStatusUI = (props: any) => {
18
+ const {
19
+ socketStatus,
20
+ connectedDate
21
+ } = props
22
+
23
+ const theme = useTheme()
24
+ const [, t] = useLanguage()
25
+ const [{ parseDate }] = useUtils()
26
+ const [openModal, setOpenModal] = useState(false)
27
+
28
+ const styles = StyleSheet.create({
29
+ btnBackArrow: {
30
+ borderWidth: 0,
31
+ width: 32,
32
+ height: 32,
33
+ tintColor: theme.colors.textGray,
34
+ backgroundColor: theme.colors.clear,
35
+ borderColor: theme.colors.clear,
36
+ shadowColor: theme.colors.clear,
37
+ paddingLeft: 0,
38
+ paddingRight: 0,
39
+ marginBottom: 30,
40
+ marginTop: 30
41
+ },
42
+ })
43
+
44
+ const getStatusColor = (status: number) => {
45
+ switch (status) {
46
+ case 0:
47
+ return '#FF9922';
48
+ case 1:
49
+ return '#00D27A';
50
+ case 2:
51
+ return '#E63757';
52
+ default:
53
+ return '#FF9922';
54
+ }
55
+ }
56
+
57
+ return (
58
+ <Container>
59
+ <TouchableOpacity
60
+ style={{
61
+ flexDirection: 'row',
62
+ alignItems: 'center',
63
+ justifyContent: 'center',
64
+ backgroundColor: theme.colors.inputChat,
65
+ borderRadius: 7.6,
66
+ marginVertical: 10,
67
+ paddingVertical: 10,
68
+ paddingHorizontal: 15,
69
+ marginHorizontal: 15
70
+ }}
71
+ activeOpacity={0.6}
72
+ onPress={() => setOpenModal(true)}
73
+ >
74
+ <OText
75
+ style={{ color: theme.colors.backArrow, fontSize: 16, marginBottom: 0, lineHeight: 16 }}
76
+ >
77
+ {t('CONNECTION_STATUS', 'Status')}
78
+ </OText>
79
+ <MaterialIcon
80
+ name='circle'
81
+ size={12}
82
+ color={getStatusColor(socketStatus)}
83
+ style={{ marginLeft: 8 }}
84
+ />
85
+ </TouchableOpacity>
86
+
87
+ <OModal
88
+ open={openModal}
89
+ onClose={() => setOpenModal(false)}
90
+ entireModal
91
+ customClose
92
+ >
93
+ <ModalContainer nestedScrollEnabled={true}>
94
+ <TouchableOpacity
95
+ onPress={() => setOpenModal(false)}
96
+ style={styles.btnBackArrow}
97
+ >
98
+ <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
99
+ </TouchableOpacity>
100
+ <View>
101
+ <ModalTitle>{t('CONNECTION_STATUS', 'Connection status')}</ModalTitle>
102
+ <OText style={{ marginBottom: 20 }}>
103
+ {t('LAST_UPDATE', 'Last update')}: {parseDate(connectedDate)}
104
+ </OText>
105
+ <StatusItemWrapper>
106
+ <MaterialIcon
107
+ name='circle'
108
+ size={12}
109
+ color={getStatusColor(1)}
110
+ style={{ marginTop: 10, marginHorizontal: 8 }}
111
+ />
112
+ <View style={{ marginLeft: 16 }}>
113
+ <StatusText>{t('OK', 'Ok')}</StatusText>
114
+ <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_OK', 'The websocket works normally.')}</OText>
115
+ </View>
116
+ </StatusItemWrapper>
117
+ <StatusItemWrapper>
118
+ <MaterialIcon
119
+ name='circle'
120
+ size={12}
121
+ color={getStatusColor(0)}
122
+ style={{ marginTop: 10, marginHorizontal: 8 }}
123
+ />
124
+ <View style={{ marginLeft: 16 }}>
125
+ <StatusText>{t('CONNECTING', 'Connecting')}</StatusText>
126
+ <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_CONNECTING', 'The websocket is connecting.')}</OText>
127
+ </View>
128
+ </StatusItemWrapper>
129
+ <StatusItemWrapper>
130
+ <MaterialIcon
131
+ name='circle'
132
+ size={12}
133
+ color={getStatusColor(2)}
134
+ style={{ marginTop: 10, marginHorizontal: 8 }}
135
+ />
136
+ <View style={{ marginLeft: 16 }}>
137
+ <StatusText>{t('DISCONNECTED', 'Disconnected')}</StatusText>
138
+ <OText style={{ color: theme.colors.backArrow, fontSize: 14 }}>{t('WEBSOCKET_DISCONNECTED', 'The server is slow, please reload.')}</OText>
139
+ </View>
140
+ </StatusItemWrapper>
141
+
142
+ <View style={{ flexDirection: 'row', marginTop: 50 }}>
143
+ <OButton
144
+ onClick={() => setOpenModal(false)}
145
+ bgColor={theme.colors.white}
146
+ textStyle={{ color: theme.colors.primary }}
147
+ style={{ borderRadius: 8, height: 48 }}
148
+ text={t('CLOSE', 'Close')}
149
+ />
150
+ <OButton
151
+ onClick={() => RNRestart.Restart()}
152
+ style={{ borderRadius: 8, marginLeft: 16, height: 48 }}
153
+ text={t('UPDATE', 'Update')}
154
+ />
155
+ </View>
156
+ </View>
157
+ </ModalContainer>
158
+ </OModal>
159
+ </Container>
160
+ )
161
+ }
162
+
163
+ export const WebsocketStatus = (props: any) => {
164
+ const socketProps = {
165
+ ...props,
166
+ UIComponent: SocketStatusUI
167
+ }
168
+ return <WebsocketStatusController {...socketProps} />
169
+ }
@@ -0,0 +1,28 @@
1
+ import styled from 'styled-components/native'
2
+
3
+ export const Container = styled.View`
4
+ display: flex;
5
+ flex-direction: column;
6
+ `
7
+ export const ModalContainer = styled.ScrollView`
8
+ padding: 0px 30px;
9
+ `
10
+ export const ModalTitle = styled.Text`
11
+ font-family: Poppins;
12
+ font-style: normal;
13
+ font-weight: bold;
14
+ font-size: 20px;
15
+ color: ${(props: any) => props.theme.colors.textGray};
16
+ margin-bottom: 10px;
17
+ `
18
+ export const StatusItemWrapper = styled.View`
19
+ flex-direction: row;
20
+ margin-bottom: 16px;
21
+ `
22
+ export const StatusText = styled.Text`
23
+ font-family: Poppins;
24
+ font-style: normal;
25
+ font-weight: 500;
26
+ font-size: 18px;
27
+ color: ${(props: any) => props.theme.colors.textGray};
28
+ `
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react'
2
2
  import styled, { css } from 'styled-components/native'
3
- import { Alert } from 'react-native'
3
+ import { Alert, Vibration } from 'react-native'
4
4
  import { useLanguage } from 'ordering-components/native'
5
5
 
6
6
  const Wrapper = styled.TouchableOpacity`
@@ -41,6 +41,7 @@ const OAlert = (props: Props) => {
41
41
  }
42
42
 
43
43
  const handleClick = () => {
44
+ Vibration.vibrate(100)
44
45
  props.onClick && props.onClick()
45
46
  createTwoButtonAlert()
46
47
  }
@@ -27,9 +27,9 @@ const StyledButton = styled.View<Props>`
27
27
  padding-left: 20px;
28
28
  padding-right: 20px;
29
29
  position: relative;
30
- ${(props: any) => props?.theme?.general?.components?.buttons?.borderRadius && css`
31
- border-radius: ${props?.theme?.general?.components?.buttons?.borderRadius}px;
32
- `}
30
+ ${(props: any) => props?.borderRadius && css`
31
+ border-radius: ${typeof props?.borderRadius === 'string' ? props?.borderRadius : `${props?.borderRadius}px`};
32
+ `}
33
33
  `
34
34
  const StyledButtonDisabled = styled(StyledButton)`
35
35
  background-color: ${(props: any) => props.theme.colors.disabled};
@@ -85,6 +85,7 @@ interface Props {
85
85
  isDisabledWithSameStyles?: boolean;
86
86
  icon?: any;
87
87
  iconProps?: any
88
+ useArrow?: boolean;
88
89
  }
89
90
 
90
91
  const OButton = (props: Props): React.ReactElement => {
@@ -94,8 +95,8 @@ const OButton = (props: Props): React.ReactElement => {
94
95
  if (props.isDisabled) {
95
96
  return (
96
97
  <View style={props.parentStyle}>
97
- <StyledButtonDisabled style={props.style}>
98
- <StyledTextDisabled style={props.textStyle}>
98
+ <StyledButtonDisabled style={{ ...props.style, backgroundColor: theme.colors.disabled }}>
99
+ <StyledTextDisabled style={{ ...props.textStyle, color: theme.colors.backgroundGray200 }}>
99
100
  {props.text}
100
101
  </StyledTextDisabled>
101
102
  </StyledButtonDisabled>
@@ -119,7 +120,7 @@ const OButton = (props: Props): React.ReactElement => {
119
120
  style={{ width: props.isCircle ? 52 : props.style?.width, ...props.parentStyle }}
120
121
  disabled={props.isDisabledWithSameStyles}
121
122
  >
122
- <StyledButton style={props.bgColor ? { ...props.style, backgroundColor: props.bgColor, borderColor: props.borderColor, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius } : { ...props.style, borderRadius: parseInt(theme?.general?.components?.buttons?.borderRadius) || props.style?.borderRadius }}>
123
+ <StyledButton style={{ ...props.style, backgroundColor: props.useArrow ? theme.colors.white : props.bgColor ?? theme.colors.primary, borderColor: props.useArrow ? theme.colors.white : props.borderColor ?? theme.colors.primary, borderRadius: props.style?.borderRadius }}>
123
124
  {props.icon ? (
124
125
  <props.icon {...props.iconProps} />
125
126
  ) : null}
@@ -127,7 +128,7 @@ const OButton = (props: Props): React.ReactElement => {
127
128
  <OIcon style={props.imgLeftStyle} src={props.imgLeftSrc} color={theme.colors.textNormal} />
128
129
  ) : null}
129
130
  {props.text ? (
130
- <StyledText style={props.textStyle}>{props.text}</StyledText>
131
+ <StyledText style={{ ...props.textStyle, color: props.useArrow ? theme.colors.btnFont : props?.textStyle?.color ?? theme.colors.white }}>{props.text}</StyledText>
131
132
  ) : null}
132
133
  {props.imgRightSrc ? (
133
134
  <EndImage style={props.imgRightStyle} source={props.imgRightSrc} />
@@ -3,7 +3,7 @@ import { ImageSourcePropType, ImageStyle, ViewStyle, TextInputProps, TextStyle }
3
3
  import styled from 'styled-components/native';
4
4
  import OIcon from './OIcon';
5
5
  import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
6
- import { useTheme, css } from 'styled-components/native';
6
+ import { useTheme } from 'styled-components/native';
7
7
 
8
8
  const Input = styled.TextInput`
9
9
  flex-grow: 1;
@@ -53,9 +53,6 @@ const Wrapper = styled.Pressable`
53
53
  align-items: center;
54
54
  justify-content: center;
55
55
  width: 100%;
56
- ${(props: any) => props.theme?.general?.components?.inputs?.borderRadius && css`
57
- border-radius: ${props?.theme?.general?.components?.inputs?.borderRadius};
58
- `}
59
56
  `;
60
57
 
61
58
  const OInput = (props: Props): React.ReactElement => {
@@ -50,6 +50,7 @@ export interface ProfileParams {
50
50
  removeAccountState?: any;
51
51
  handleChangePromotions?: any;
52
52
  notificationsGroup?: any;
53
+ appVersion?: string
53
54
  }
54
55
 
55
56
  export interface AddressListParams {
@@ -607,7 +608,7 @@ export interface UpsellingProductsParams {
607
608
  business?: any;
608
609
  businessId?: number;
609
610
  cartProducts?: Array<any>;
610
- handleUpsellingPage: (cart ?: any) => void;
611
+ handleUpsellingPage: (cart?: any) => void;
611
612
  openUpselling: boolean;
612
613
  canOpenUpselling?: boolean;
613
614
  setCanOpenUpselling?: (value: any) => void;
@@ -637,6 +638,9 @@ export interface GoogleMapsParams {
637
638
  isIntGeoCoder: boolean,
638
639
  businessZones?: any
639
640
  delta?: number
641
+ setAutoCompleteAddress?: (val: boolean) => void,
642
+ autoCompleteAddress?: boolean,
643
+ manualZoom?: boolean
640
644
  }
641
645
 
642
646
  export interface HelpParams {