ordering-ui-react-native 0.15.7 → 0.15.9-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 (132) hide show
  1. package/package.json +5 -3
  2. package/src/DeliveryApp.tsx +43 -1
  3. package/src/components/BusinessTypeFilter/index.tsx +12 -2
  4. package/src/components/BusinessTypeFilter/styles.tsx +1 -1
  5. package/src/components/BusinessesListing/index.tsx +1 -1
  6. package/src/components/Checkout/index.tsx +0 -1
  7. package/src/components/Home/index.tsx +3 -5
  8. package/src/components/LanguageSelector/index.tsx +66 -97
  9. package/src/components/LanguageSelector/styles.tsx +4 -17
  10. package/src/components/Messages/index.tsx +38 -30
  11. package/src/components/MomentOption/index.tsx +3 -1
  12. package/src/components/OrderDetails/index.tsx +25 -4
  13. package/src/components/PaymentOptions/index.tsx +9 -16
  14. package/src/components/PaymentOptionsWebView/index.tsx +123 -124
  15. package/src/components/ProductForm/index.tsx +1 -1
  16. package/src/components/ProductForm/styles.tsx +1 -0
  17. package/src/components/StripeElementsForm/index.tsx +27 -48
  18. package/src/components/UserProfileForm/index.tsx +35 -1
  19. package/src/components/VerifyPhone/styles.tsx +1 -2
  20. package/src/config.json +0 -2
  21. package/src/pages/Checkout.tsx +1 -1
  22. package/src/types/index.tsx +2 -9
  23. package/src/utils/index.tsx +2 -1
  24. package/themes/business/index.tsx +2 -0
  25. package/themes/business/src/components/Chat/index.tsx +32 -31
  26. package/themes/business/src/components/Home/index.tsx +128 -55
  27. package/themes/business/src/components/Home/styles.tsx +8 -1
  28. package/themes/business/src/components/NewOrderNotification/index.tsx +59 -98
  29. package/themes/business/src/components/OrderDetails/Business.tsx +1 -0
  30. package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx +27 -0
  31. package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx +85 -17
  32. package/themes/business/src/components/OrdersListManager/index.tsx +874 -0
  33. package/themes/business/src/components/OrdersListManager/styles.tsx +123 -0
  34. package/themes/business/src/components/OrdersListManager/utils.tsx +216 -0
  35. package/themes/business/src/components/OrdersOption/index.tsx +70 -116
  36. package/themes/business/src/components/OrdersOption/styles.tsx +2 -5
  37. package/themes/business/src/components/PreviousOrders/index.tsx +82 -23
  38. package/themes/doordash/src/components/BusinessesListing/index.tsx +1 -1
  39. package/themes/doordash/src/components/LoginForm/index.tsx +1 -2
  40. package/themes/instacart/src/components/BusinessesListing/index.tsx +1 -1
  41. package/themes/kiosk/src/components/BusinessController/index.tsx +27 -6
  42. package/themes/kiosk/src/components/BusinessController/styles.tsx +1 -1
  43. package/themes/kiosk/src/components/BusinessProductsListing/index.tsx +51 -24
  44. package/themes/kiosk/src/components/Cart/index.tsx +1 -1
  45. package/themes/kiosk/src/components/CartBottomSheet/index.tsx +1 -1
  46. package/themes/kiosk/src/components/CartBottomSheet/styles.tsx +1 -1
  47. package/themes/kiosk/src/components/CartContent/index.tsx +13 -3
  48. package/themes/kiosk/src/components/CartItem/index.tsx +20 -8
  49. package/themes/kiosk/src/components/CategoriesMenu/index.tsx +7 -5
  50. package/themes/kiosk/src/components/CustomerName/index.tsx +89 -88
  51. package/themes/kiosk/src/components/Intro/index.tsx +13 -13
  52. package/themes/kiosk/src/components/LanguageSelector/index.tsx +12 -8
  53. package/themes/kiosk/src/components/NavBar/index.tsx +14 -14
  54. package/themes/kiosk/src/components/OptionCard/index.tsx +1 -1
  55. package/themes/kiosk/src/components/OrderDetails/index.tsx +2 -2
  56. package/themes/kiosk/src/components/OrderSummary/index.tsx +1 -1
  57. package/themes/kiosk/src/components/OrderTypeCardSelector/index.tsx +10 -12
  58. package/themes/kiosk/src/components/ProductForm/index.tsx +174 -126
  59. package/themes/kiosk/src/components/ProductForm/styles.tsx +1 -1
  60. package/themes/kiosk/src/components/ProductOption/index.tsx +1 -0
  61. package/themes/kiosk/src/components/ProductOption/styles.tsx +1 -0
  62. package/themes/kiosk/src/components/UpsellingProducts/index.tsx +48 -34
  63. package/themes/kiosk/src/components/shared/OButton.tsx +5 -18
  64. package/themes/kiosk/src/components/shared/OCard.tsx +112 -78
  65. package/themes/original/index.tsx +177 -0
  66. package/themes/original/src/components/AddressForm/index.tsx +15 -10
  67. package/themes/original/src/components/AddressList/index.tsx +28 -2
  68. package/themes/original/src/components/AppleLogin/index.tsx +119 -78
  69. package/themes/original/src/components/BusinessBasicInformation/index.tsx +95 -44
  70. package/themes/original/src/components/BusinessBasicInformation/styles.tsx +28 -1
  71. package/themes/original/src/components/BusinessController/index.tsx +32 -21
  72. package/themes/original/src/components/BusinessListingSearch/index.tsx +7 -3
  73. package/themes/original/src/components/BusinessMenuList/index.tsx +11 -4
  74. package/themes/original/src/components/BusinessPreorder/index.tsx +141 -121
  75. package/themes/original/src/components/BusinessProductsCategories/index.tsx +7 -5
  76. package/themes/original/src/components/BusinessProductsList/index.tsx +129 -22
  77. package/themes/original/src/components/BusinessProductsList/styles.tsx +32 -2
  78. package/themes/original/src/components/BusinessProductsListing/index.tsx +18 -28
  79. package/themes/original/src/components/BusinessReviews/index.tsx +4 -25
  80. package/themes/original/src/components/BusinessesListing/index.tsx +40 -53
  81. package/themes/original/src/components/Cart/index.tsx +40 -9
  82. package/themes/original/src/components/CartContent/index.tsx +2 -2
  83. package/themes/original/src/components/Checkout/index.tsx +47 -31
  84. package/themes/original/src/components/Checkout/styles.tsx +7 -0
  85. package/themes/original/src/components/CouponControl/index.tsx +1 -0
  86. package/themes/original/src/components/DriverTips/index.tsx +1 -1
  87. package/themes/original/src/components/ForgotPasswordForm/index.tsx +8 -12
  88. package/themes/original/src/components/HighestRatedBusinesses/index.tsx +97 -89
  89. package/themes/original/src/components/Home/index.tsx +1 -1
  90. package/themes/original/src/components/LoginForm/index.tsx +156 -70
  91. package/themes/original/src/components/LoginForm/styles.tsx +6 -1
  92. package/themes/original/src/components/Messages/index.tsx +52 -45
  93. package/themes/original/src/components/Messages/styles.tsx +1 -3
  94. package/themes/original/src/components/MomentOption/index.tsx +10 -1
  95. package/themes/original/src/components/MomentOption/styles.tsx +1 -1
  96. package/themes/original/src/components/OrderDetails/index.tsx +104 -126
  97. package/themes/original/src/components/OrderDetails/styles.tsx +3 -1
  98. package/themes/original/src/components/OrderProgress/index.tsx +4 -4
  99. package/themes/original/src/components/OrderProgress/styles.tsx +1 -0
  100. package/themes/original/src/components/OrderSummary/index.tsx +34 -1
  101. package/themes/original/src/components/OrdersOption/index.tsx +15 -46
  102. package/themes/original/src/components/OrdersOption/styles.tsx +0 -6
  103. package/themes/original/src/components/PaymentOptionWallet/index.tsx +6 -2
  104. package/themes/original/src/components/PaymentOptions/index.tsx +24 -25
  105. package/themes/original/src/components/PhoneInputNumber/index.tsx +15 -8
  106. package/themes/original/src/components/PlaceSpot/index.tsx +114 -0
  107. package/themes/original/src/components/PlaceSpot/styles.tsx +11 -0
  108. package/themes/original/src/components/PreviousOrders/index.tsx +19 -13
  109. package/themes/original/src/components/ProductForm/index.tsx +31 -20
  110. package/themes/original/src/components/ProductForm/styles.tsx +2 -2
  111. package/themes/original/src/components/ReviewOrder/index.tsx +10 -9
  112. package/themes/original/src/components/ReviewProducts/index.tsx +1 -1
  113. package/themes/original/src/components/SignupForm/index.tsx +173 -154
  114. package/themes/original/src/components/StripeElementsForm/index.tsx +55 -72
  115. package/themes/original/src/components/TaxInformation/index.tsx +17 -7
  116. package/themes/original/src/components/UpsellingProducts/index.tsx +6 -6
  117. package/themes/original/src/components/UserDetails/index.tsx +4 -95
  118. package/themes/original/src/components/UserFormDetails/index.tsx +2 -14
  119. package/themes/original/src/components/UserProfile/index.tsx +16 -16
  120. package/themes/original/src/components/UserProfileForm/index.tsx +8 -6
  121. package/themes/original/src/components/VerifyPhone/index.tsx +10 -7
  122. package/themes/original/src/components/VerifyPhone/styles.tsx +2 -1
  123. package/themes/original/src/components/shared/HeaderTitle.tsx +21 -0
  124. package/themes/original/src/components/shared/index.tsx +2 -0
  125. package/themes/original/src/config/constants.tsx +6 -6
  126. package/themes/original/src/types/index.tsx +63 -23
  127. package/themes/original/src/utils/index.tsx +12 -2
  128. package/themes/single-business/src/components/AddressList/index.tsx +1 -1
  129. package/themes/single-business/src/components/OrderTypeSelector/index.tsx +5 -5
  130. package/themes/single-business/src/components/UserProfile/index.tsx +1 -1
  131. package/themes/uber-eats/src/components/BusinessesListing/index.tsx +1 -1
  132. package/src/components/StripeMethodForm/index.tsx +0 -168
@@ -46,7 +46,6 @@ import { ProductOptionSubOption } from '../ProductOptionSubOption';
46
46
  import { NotFoundSource } from '../NotFoundSource';
47
47
  import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
48
48
  import { useState } from 'react';
49
-
50
49
  const windowHeight = Dimensions.get('window').height;
51
50
  const windowWidth = Dimensions.get('window').width;
52
51
 
@@ -291,15 +290,23 @@ export const ProductOptionsUI = (props: any) => {
291
290
  if (img?.video) {
292
291
  const keys = img?.video.split('/')
293
292
  let _videoId = keys[keys.length - 1]
293
+
294
294
  if (_videoId.includes('watch')) {
295
- const __url = _videoId.split('=')[1]
296
- _videoId = __url
295
+ const __url = _videoId.split('=')[1]
296
+ _videoId = __url
297
+ } else if (_videoId.includes('?')) {
298
+ const __url = _videoId.split('?')[0]
299
+ _videoId = __url
300
+ }
301
+
302
+ if (_videoId.search(/&/i) >= 0) {
303
+ _videoId = _videoId.split('&')[0]
304
+ } else if (_videoId.search(/\?/i) >= 0) {
305
+ _videoId = _videoId.split('?')[0]
297
306
  }
298
- if (_videoId.includes('?')) {
299
- const __url = _videoId.split('?')[0]
300
- _videoId = __url
307
+ if ((_videoId.length === 11)) {
308
+ videoList.push(_videoId)
301
309
  }
302
- videoList.push(_videoId)
303
310
  }
304
311
  }
305
312
  }
@@ -338,9 +345,9 @@ export const ProductOptionsUI = (props: any) => {
338
345
  </OText>
339
346
  </TouchableOpacity>
340
347
  )}
341
- {options.map(({ id, name, respect_to }: any) => (
348
+ {options.map(({ id, name, respect_to, suboptions }: any) => (
342
349
  <React.Fragment key={`cont_key_${id}`}>
343
- {respect_to == null && (
350
+ {respect_to == null && suboptions?.length > 0 && (
344
351
  <TouchableOpacity
345
352
  key={`eopt_key_${id}`}
346
353
  onPress={() => setSelectedOpt(id)}
@@ -687,8 +694,8 @@ export const ProductOptionsUI = (props: any) => {
687
694
  </WrapperIngredients>
688
695
  </View>
689
696
  )}
690
- {product?.extras.map((extra: any) =>
691
- extra.options.map((option: any) => {
697
+ {product?.extras.sort((a: any, b: any) => a.rank - b.rank).map((extra: any) =>
698
+ extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
692
699
  const currentState =
693
700
  productCart.options[`id:${option.id}`] || {};
694
701
  return (
@@ -704,7 +711,7 @@ export const ProductOptionsUI = (props: any) => {
704
711
  backgroundColor: isError(option.id),
705
712
  borderRadius: 7.6
706
713
  }}>
707
- {option.suboptions.map(
714
+ {option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
708
715
  (suboption: any) => {
709
716
  const currentState =
710
717
  productCart.options[
@@ -772,7 +779,7 @@ export const ProductOptionsUI = (props: any) => {
772
779
  ) : (
773
780
  <>
774
781
  {product?.extras.map((extra: any) =>
775
- extra.options.map((option: any) => {
782
+ extra.options.sort((a: any, b: any) => a.rank - b.rank).map((option: any) => {
776
783
  if (
777
784
  option.id == selOpt ||
778
785
  (hasRespected(
@@ -797,7 +804,7 @@ export const ProductOptionsUI = (props: any) => {
797
804
  option.id,
798
805
  ),
799
806
  }}>
800
- {option.suboptions.map(
807
+ {option.suboptions.sort((a: any, b: any) => a.rank - b.rank).map(
801
808
  (suboption: any) => {
802
809
  const currentState =
803
810
  productCart.options[
@@ -872,9 +879,13 @@ export const ProductOptionsUI = (props: any) => {
872
879
  </ScrollView>
873
880
  {!loading && !error && product && (
874
881
  <ProductActions ios={Platform?.OS === 'ios'}>
875
- <OText size={16} lineHeight={24} weight={'600'}>
876
- {productCart.total ? parsePrice(productCart?.total) : ''}
877
- </OText>
882
+ <View>
883
+ <OText size={16} lineHeight={24} weight={'600'}>
884
+ {productCart.total ? parsePrice(productCart?.total) : ''}
885
+ </OText>
886
+ {product?.minimum_per_order && productCart?.quantity < product?.minimum_per_order && <OText size={12} color={theme.colors?.red}>{t('MOBILE_MINIMUM_TO_ORDER', 'Min. _number_ ').replace('_number_', product?.minimum_per_order)}</OText>}
887
+ {product?.maximum_per_order && productCart?.quantity > product?.maximum_per_order && <OText size={12} color={theme.colors?.red}>{t('MOBILE_MAXIMUM_TO_ORDER', 'Max. _number_'.replace('_number_', product?.maximum_per_order))}</OText>}
888
+ </View>
878
889
  {productCart && !isSoldOut && maxProductQuantity > 0 && (
879
890
  <View style={styles.quantityControl}>
880
891
  <TouchableOpacity
@@ -987,14 +998,14 @@ export const ProductOptionsUI = (props: any) => {
987
998
  ? t('UPDATE', 'Update')
988
999
  : t('ADD', 'Add')
989
1000
  }`}
990
- isDisabled={isSoldOut || maxProductQuantity <= 0}
1001
+ isDisabled={isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order))}
991
1002
  textStyle={{
992
1003
  color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
993
1004
  fontSize: orderState.loading || editMode ? 10 : 14
994
1005
  }}
995
1006
  style={{
996
- backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.lightGray : theme.colors.primary,
997
- borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.white : theme.colors.primary,
1007
+ backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order)) ? theme.colors.lightGray : theme.colors.primary,
1008
+ borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && (productCart?.quantity < product?.minimum_per_order)) || (product?.maximum_per_order && (productCart?.quantity > product?.maximum_per_order)) ? theme.colors.white : theme.colors.primary,
998
1009
  opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
999
1010
  borderRadius: 7.6,
1000
1011
  height: 44,
@@ -6,9 +6,10 @@ export const WrapHeader = styled.View`
6
6
  `
7
7
 
8
8
  export const TopActions = styled.TouchableOpacity`
9
- height: 44px;
9
+ height: 60px;
10
10
  justify-content: center;
11
11
  padding-horizontal: 30px;
12
+ width: 80px;
12
13
  `;
13
14
 
14
15
  export const TopHeader = styled.View`
@@ -48,7 +49,6 @@ export const ProductDescription = styled.View`
48
49
  `
49
50
 
50
51
  export const ProductEditions = styled.View`
51
-
52
52
  `
53
53
 
54
54
  export const SectionTitle = styled.View`
@@ -43,7 +43,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
43
43
  logoWrapper: {
44
44
  shadowColor: theme.colors.black,
45
45
  shadowRadius: 3,
46
- shadowOffset: {width: 1, height: 4},
46
+ shadowOffset: { width: 1, height: 4 },
47
47
  elevation: 3,
48
48
  borderRadius: 8,
49
49
  shadowOpacity: 0.1,
@@ -108,11 +108,11 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
108
108
  }
109
109
 
110
110
  const qualificationList = [
111
- { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0, parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
111
+ { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0, parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
112
112
  { key: 2, text: t('BAD', 'Bad'), percent: 0.25, parentStyle: { left: '25%' }, isInnerStyle: true, pointerColor: true },
113
113
  { key: 3, text: t('OKAY', 'Okay'), percent: 0.5, parentStyle: { left: '50%' }, isInnerStyle: true, pointerColor: true },
114
114
  { key: 4, text: t('GOOD', 'Good'), percent: 0.75, parentStyle: { left: '75%' }, isInnerStyle: true, pointerColor: true },
115
- { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false, pointerColor: false }
115
+ { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false, pointerColor: false }
116
116
  ]
117
117
 
118
118
  const commentsList = reviewCommentList('order')
@@ -137,7 +137,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
137
137
  return found
138
138
  }
139
139
 
140
- const handleContinueClick = () => {
140
+ const handleContinueClick = () => {
141
141
  if (!order?.review) {
142
142
  onSubmit()
143
143
  } else {
@@ -183,7 +183,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
183
183
  comments.map(comment => _comments += comment.content + '. ')
184
184
  }
185
185
  let _comment
186
- _comment = _comments + extraComment
186
+ _comment = _comments + extraComment
187
187
  setStars({ ...stars, comments: _comment })
188
188
  }, [comments, extraComment])
189
189
 
@@ -214,7 +214,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
214
214
  <OText color={theme.colors.primary}>{t('ORDER_REVIEWED', 'This order has been already reviewed')}</OText>
215
215
  </View>
216
216
  ) : (
217
- <View style={{flex: 1, justifyContent: 'flex-end'}}>
217
+ <View style={{ flex: 1, justifyContent: 'flex-end' }}>
218
218
  <FormReviews>
219
219
  <OText mBottom={13} color={theme.colors.textNormal}>{t('HOW_WAS_YOUR_ORDER', 'How was your order?')}</OText>
220
220
  <RatingBarContainer>
@@ -266,7 +266,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
266
266
  style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
267
267
  imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
268
268
  imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
269
- onClick={() => handleChangeComment(commentItem) }
269
+ onClick={() => handleChangeComment(commentItem)}
270
270
  />
271
271
  ))}
272
272
  </CommentsButtonGroup>
@@ -304,7 +304,7 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
304
304
  textStyle={{ color: theme.colors.white, paddingRight: 10 }}
305
305
  text={t('CONTINUE', 'Continue')}
306
306
  style={{ borderRadius: 8 }}
307
- imgRightSrc={theme.images.general.arrow_right}
307
+ imgRightSrc={theme.images.general.arrow_right}
308
308
  imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
309
309
  onClick={handleSubmit(handleContinueClick)}
310
310
  />
@@ -317,7 +317,8 @@ export const ReviewOrderUI = (props: ReviewOrderParams) => {
317
317
  export const ReviewOrder = (props: ReviewOrderParams) => {
318
318
  const reviewOrderProps = {
319
319
  ...props,
320
- UIComponent: ReviewOrderUI
320
+ UIComponent: ReviewOrderUI,
321
+ defaultStar: 5
321
322
  }
322
323
  return <ReviewOrderController {...reviewOrderProps} />
323
324
  }
@@ -74,7 +74,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
74
74
  titleWrapStyle={{ paddingHorizontal: 0 }}
75
75
  titleStyle={{ marginRight: 0, marginLeft: 0 }}
76
76
  />
77
- {order?.products.map((product: any) => (
77
+ {order?.products?.map((product: any) => (
78
78
  <SingleProductReview
79
79
  key={product.id}
80
80
  product={product}
@@ -68,7 +68,6 @@ const SignupFormUI = (props: SignupParams) => {
68
68
 
69
69
  const theme = useTheme();
70
70
 
71
-
72
71
  const style = StyleSheet.create({
73
72
  btnOutline: {
74
73
  backgroundColor: '#FFF',
@@ -77,7 +76,6 @@ const SignupFormUI = (props: SignupParams) => {
77
76
  inputStyle: {
78
77
  marginBottom: 20,
79
78
  borderWidth: 1,
80
- borderColor: theme.colors.border,
81
79
  borderRadius: 7.6,
82
80
  },
83
81
  wrappText: {
@@ -102,7 +100,7 @@ const SignupFormUI = (props: SignupParams) => {
102
100
  const [, t] = useLanguage();
103
101
  const [, { login }] = useSession();
104
102
  const [{ configs }] = useConfig();
105
- const { control, handleSubmit, errors } = useForm();
103
+ const { control, handleSubmit, errors, register, setValue } = useForm();
106
104
 
107
105
  const [passwordSee, setPasswordSee] = useState(false);
108
106
  const [formValues, setFormValues] = useState(null);
@@ -227,7 +225,7 @@ const SignupFormUI = (props: SignupParams) => {
227
225
  handleButtonSignupClick &&
228
226
  handleButtonSignupClick({
229
227
  ...values,
230
- ...phoneInputData.phone,
228
+ ...((phoneInputData.phone.cellphone !== null && phoneInputData.phone.country_phone_code !== null) && {...phoneInputData.phone}),
231
229
  });
232
230
  if (
233
231
  !formState.loading &&
@@ -298,36 +296,23 @@ const SignupFormUI = (props: SignupParams) => {
298
296
 
299
297
  useEffect(() => {
300
298
  if (Object.keys(errors).length > 0) {
301
- // Convert all errors in one string to show in toast provider
302
- const list = Object.values(errors);
303
- if (phoneInputData.error) {
304
- list.push({ message: phoneInputData.error });
305
- }
306
- if (
307
- !phoneInputData.error &&
308
- !phoneInputData.phone.country_phone_code &&
309
- !phoneInputData.phone.cellphone &&
310
- ((validationFields?.fields?.checkout?.cellphone?.enabled &&
311
- validationFields?.fields?.checkout?.cellphone?.required) ||
312
- configs?.verification_phone_required?.value === '1')
313
- ) {
314
- list.push({
315
- message: t(
316
- 'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
317
- 'The field Mobile phone is required.',
318
- ),
319
- });
320
- }
321
- let stringError = '';
322
- list.map((item: any, i: number) => {
323
- stringError +=
324
- i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
325
- });
326
- showToast(ToastType.Error, stringError);
327
299
  setIsLoadingVerifyModal(false);
328
300
  }
329
301
  }, [errors]);
330
302
 
303
+ useEffect(() => {
304
+ register('cellphone', {
305
+ required: isRequiredField('cellphone')
306
+ ? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
307
+ : null
308
+ })
309
+ }, [register])
310
+
311
+ useEffect(() => {
312
+ if (phoneInputData?.phone?.cellphone) setValue('cellphone', phoneInputData?.phone?.cellphone, '')
313
+ else setValue('cellphone', '')
314
+ }, [phoneInputData?.phone?.cellphone])
315
+
331
316
  useEffect(() => {
332
317
  if (verifyPhoneState && !verifyPhoneState?.loading) {
333
318
  if (verifyPhoneState.result?.error) {
@@ -412,48 +397,58 @@ const SignupFormUI = (props: SignupParams) => {
412
397
  !notValidationFields.includes(field.code) &&
413
398
  showField &&
414
399
  showField(field.code) && (
415
- <Controller
416
- key={field.id}
417
- control={control}
418
- render={({ onChange, value }: any) => (
419
- <OInput
420
- placeholder={t(field.name)}
421
- style={style.inputStyle}
422
- icon={
423
- field.code === 'email'
424
- ? theme.images.general.email
425
- : theme.images.general.user
426
- }
427
- value={value}
428
- onChange={(val: any) =>
429
- field.code !== 'email'
430
- ? onChange(val)
431
- : handleChangeInputEmail(val, onChange)
432
- }
433
- autoCapitalize={
434
- field.code === 'email' ? 'none' : 'sentences'
435
- }
436
- autoCorrect={field.code === 'email' && false}
437
- type={
438
- field.code === 'email' ? 'email-address' : 'default'
439
- }
440
- autoCompleteType={
441
- field.code === 'email' ? 'email' : 'off'
442
- }
443
- returnKeyType="next"
444
- blurOnSubmit={false}
445
- forwardRef={(ref: any) => handleRefs(ref, field.code)}
446
- onSubmitEditing={() =>
447
- field.code === 'email'
448
- ? phoneRef?.current?.focus?.()
449
- : handleFocusRef(getNextFieldCode(i))
450
- }
451
- />
400
+ <React.Fragment key={field.id}>
401
+ {errors?.[`${field.code}`] && (
402
+ <OText
403
+ size={14}
404
+ color={theme.colors.danger5}
405
+ weight={'normal'}>
406
+ {errors?.[`${field.code}`]?.message} {errors?.[`${field.code}`]?.type === 'required' && '*'}
407
+ </OText>
452
408
  )}
453
- name={field.code}
454
- rules={getInputRules(field)}
455
- defaultValue=""
456
- />
409
+ <Controller
410
+ control={control}
411
+ render={({ onChange, value }: any) => (
412
+ <OInput
413
+ placeholder={t(field.name)}
414
+ style={style.inputStyle}
415
+ icon={
416
+ field.code === 'email'
417
+ ? theme.images.general.email
418
+ : theme.images.general.user
419
+ }
420
+ value={value}
421
+ onChange={(val: any) =>
422
+ field.code !== 'email'
423
+ ? onChange(val)
424
+ : handleChangeInputEmail(val, onChange)
425
+ }
426
+ autoCapitalize={
427
+ field.code === 'email' ? 'none' : 'sentences'
428
+ }
429
+ autoCorrect={field.code === 'email' && false}
430
+ type={
431
+ field.code === 'email' ? 'email-address' : 'default'
432
+ }
433
+ autoCompleteType={
434
+ field.code === 'email' ? 'email' : 'off'
435
+ }
436
+ returnKeyType="next"
437
+ blurOnSubmit={false}
438
+ forwardRef={(ref: any) => handleRefs(ref, field.code)}
439
+ onSubmitEditing={() =>
440
+ field.code === 'email'
441
+ ? phoneRef?.current?.focus?.()
442
+ : handleFocusRef(getNextFieldCode(i))
443
+ }
444
+ borderColor={errors?.[`${field.code}`] ? theme.colors.danger5 : theme.colors.border}
445
+ />
446
+ )}
447
+ name={field.code}
448
+ rules={getInputRules(field)}
449
+ defaultValue=""
450
+ />
451
+ </React.Fragment>
457
452
  ),
458
453
  )}
459
454
 
@@ -467,6 +462,7 @@ const SignupFormUI = (props: SignupParams) => {
467
462
  returnKeyType: 'next',
468
463
  onSubmitEditing: () => passwordRef?.current?.focus?.(),
469
464
  }}
465
+ isStartValidation={errors?.cellphone}
470
466
  />
471
467
  </View>
472
468
  )}
@@ -499,99 +495,122 @@ const SignupFormUI = (props: SignupParams) => {
499
495
  </View>
500
496
 
501
497
  {configs?.terms_and_conditions?.value === 'true' && (
502
- <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
498
+ <>
499
+ {errors?.termsAccept && (
500
+ <OText
501
+ size={14}
502
+ color={theme.colors.danger5}
503
+ weight={'normal'}>
504
+ {errors?.termsAccept?.message}*
505
+ </OText>
506
+ )}
507
+ <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
508
+ <Controller
509
+ control={control}
510
+ render={({ onChange, value }: any) => (
511
+ <CheckBox
512
+ value={value}
513
+ onValueChange={newValue => {
514
+ onChange(newValue)
515
+ }}
516
+ boxType={'square'}
517
+ tintColors={{
518
+ true: theme.colors.primary,
519
+ false: theme.colors.disabled
520
+ }}
521
+ tintColor={theme.colors.disabled}
522
+ onCheckColor={theme.colors.primary}
523
+ onTintColor={theme.colors.primary}
524
+ style={Platform.OS === 'ios' && style.checkBoxStyle}
525
+ />
526
+ )}
527
+ name='termsAccept'
528
+ rules={{
529
+ required: t('VALIDATION_ERROR_ACCEPTED', 'The _attribute_ must be accepted.').replace('_attribute_', t('TERMS_AND_CONDITIONS', 'Terms & Conditions'))
530
+ }}
531
+ defaultValue={false}
532
+ />
533
+ <OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('TERMS_AND_CONDITIONS_TEXT', 'I agree with')}</OText>
534
+ <OButton
535
+ imgRightSrc={null}
536
+ text={t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
537
+ bgColor='#FFF'
538
+ borderColor='#FFF'
539
+ style={{ paddingLeft: 0, paddingRight: 0, height: 30, shadowColor: '#FFF' }}
540
+ textStyle={{ color: theme.colors.primary, marginLeft: 0, marginRight: 0 }}
541
+ onClick={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}
542
+ />
543
+ </View>
544
+ </>
545
+
546
+ )}
547
+
548
+ {signupTab !== 'cellphone' && (
549
+ <>
550
+ {errors?.password && (
551
+ <OText
552
+ size={14}
553
+ color={theme.colors.danger5}
554
+ weight={'normal'}>
555
+ {errors?.password?.message} {errors?.password?.type === 'required' && '*'}
556
+ </OText>
557
+ )}
503
558
  <Controller
504
559
  control={control}
505
560
  render={({ onChange, value }: any) => (
506
- <CheckBox
561
+ <OInput
562
+ isSecured={!passwordSee ? true : false}
563
+ placeholder={t('PASSWORD', 'Password')}
564
+ style={style.inputStyle}
565
+ icon={theme.images.general.lock}
566
+ iconCustomRight={
567
+ !passwordSee ? (
568
+ <MaterialCommunityIcons
569
+ name="eye-outline"
570
+ color={theme.colors.disabled}
571
+ size={24}
572
+ onPress={() => setPasswordSee(!passwordSee)}
573
+ />
574
+ ) : (
575
+ <MaterialCommunityIcons
576
+ name="eye-off-outline"
577
+ color={theme.colors.disabled}
578
+ size={24}
579
+ onPress={() => setPasswordSee(!passwordSee)}
580
+ />
581
+ )
582
+ }
507
583
  value={value}
508
- onValueChange={newValue => {
509
- onChange(newValue)
510
- }}
511
- boxType={'square'}
512
- tintColors={{
513
- true: theme.colors.primary,
514
- false: theme.colors.disabled
515
- }}
516
- tintColor={theme.colors.disabled}
517
- onCheckColor={theme.colors.primary}
518
- onTintColor={theme.colors.primary}
519
- style={Platform.OS === 'ios' && style.checkBoxStyle}
584
+ onChange={(val: any) => onChange(val)}
585
+ returnKeyType="done"
586
+ onSubmitEditing={handleSubmit(onSubmit)}
587
+ blurOnSubmit
588
+ forwardRef={passwordRef}
589
+ borderColor={errors?.password ? theme.colors.danger5 : theme.colors.border}
520
590
  />
521
591
  )}
522
- name='termsAccept'
592
+ name="password"
523
593
  rules={{
524
- required: t('VALIDATION_ERROR_ACCEPTED', 'The _attribute_ must be accepted.').replace('_attribute_', t('TERMS_AND_CONDITIONS', 'Terms & Conditions'))
594
+ required: isRequiredField('password')
595
+ ? t(
596
+ 'VALIDATION_ERROR_PASSWORD_REQUIRED',
597
+ 'The field Password is required',
598
+ ).replace('_attribute_', t('PASSWORD', 'password'))
599
+ : null,
600
+ minLength: {
601
+ value: 8,
602
+ message: t(
603
+ 'VALIDATION_ERROR_PASSWORD_MIN_STRING',
604
+ 'The Password must be at least 8 characters.',
605
+ )
606
+ .replace('_attribute_', t('PASSWORD', 'Password'))
607
+ .replace('_min_', 8),
608
+ },
525
609
  }}
526
- defaultValue={false}
527
- />
528
- <OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('TERMS_AND_CONDITIONS_TEXT', 'I agree with')}</OText>
529
- <OButton
530
- imgRightSrc={null}
531
- text={t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
532
- bgColor='#FFF'
533
- borderColor='#FFF'
534
- style={{ paddingLeft: 0, paddingRight: 0, height: 30, shadowColor: '#FFF' }}
535
- textStyle={{ color: theme.colors.primary, marginLeft: 0, marginRight: 0 }}
536
- onClick={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}
610
+ defaultValue=""
537
611
  />
538
- </View>
539
- )}
612
+ </>
540
613
 
541
- {signupTab !== 'cellphone' && (
542
- <Controller
543
- control={control}
544
- render={({ onChange, value }: any) => (
545
- <OInput
546
- isSecured={!passwordSee ? true : false}
547
- placeholder={t('PASSWORD', 'Password')}
548
- style={style.inputStyle}
549
- icon={theme.images.general.lock}
550
- iconCustomRight={
551
- !passwordSee ? (
552
- <MaterialCommunityIcons
553
- name="eye-outline"
554
- color={theme.colors.disabled}
555
- size={24}
556
- onPress={() => setPasswordSee(!passwordSee)}
557
- />
558
- ) : (
559
- <MaterialCommunityIcons
560
- name="eye-off-outline"
561
- color={theme.colors.disabled}
562
- size={24}
563
- onPress={() => setPasswordSee(!passwordSee)}
564
- />
565
- )
566
- }
567
- value={value}
568
- onChange={(val: any) => onChange(val)}
569
- returnKeyType="done"
570
- onSubmitEditing={handleSubmit(onSubmit)}
571
- blurOnSubmit
572
- forwardRef={passwordRef}
573
- />
574
- )}
575
- name="password"
576
- rules={{
577
- required: isRequiredField('password')
578
- ? t(
579
- 'VALIDATION_ERROR_PASSWORD_REQUIRED',
580
- 'The field Password is required',
581
- ).replace('_attribute_', t('PASSWORD', 'password'))
582
- : null,
583
- minLength: {
584
- value: 8,
585
- message: t(
586
- 'VALIDATION_ERROR_PASSWORD_MIN_STRING',
587
- 'The Password must be at least 8 characters.',
588
- )
589
- .replace('_attribute_', t('PASSWORD', 'Password'))
590
- .replace('_min_', 8),
591
- },
592
- }}
593
- defaultValue=""
594
- />
595
614
  )}
596
615
  </>
597
616
  ) : (