ordering-ui-react-native 0.21.99 → 0.22.0-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 (163) 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/StripeMethodForm/index.tsx +4 -2
  5. package/src/components/VerifyPhone/styles.tsx +1 -2
  6. package/src/context/OfflineActions/index.tsx +236 -0
  7. package/src/types/index.tsx +2 -1
  8. package/themes/business/index.tsx +2 -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/BusinessController/index.tsx +8 -3
  12. package/themes/business/src/components/BusinessProductList/index.tsx +2 -1
  13. package/themes/business/src/components/Chat/index.tsx +15 -3
  14. package/themes/business/src/components/DriverMap/index.tsx +49 -27
  15. package/themes/business/src/components/FloatingButton/index.tsx +3 -2
  16. package/themes/business/src/components/GoogleMap/index.tsx +15 -8
  17. package/themes/business/src/components/LanguageSelector/index.tsx +2 -3
  18. package/themes/business/src/components/LanguageSelector/lang_country.json +515 -70
  19. package/themes/business/src/components/LogoutButton/index.tsx +1 -1
  20. package/themes/business/src/components/MapView/index.tsx +36 -17
  21. package/themes/business/src/components/NewOrderNotification/index.tsx +40 -27
  22. package/themes/business/src/components/OrderDetails/Business.tsx +74 -9
  23. package/themes/business/src/components/OrderDetails/Delivery.tsx +138 -55
  24. package/themes/business/src/components/OrderDetails/OrderContentComponent.tsx +125 -43
  25. package/themes/business/src/components/OrderDetails/OrderHeaderComponent.tsx +62 -24
  26. package/themes/business/src/components/OrderDetails/styles.tsx +39 -3
  27. package/themes/business/src/components/OrderDetails/usePrinterCommands.tsx +221 -0
  28. package/themes/business/src/components/OrderDetailsLogistic/index.tsx +3 -2
  29. package/themes/business/src/components/OrderSummary/index.tsx +210 -65
  30. package/themes/business/src/components/OrdersListManager/index.tsx +13 -1
  31. package/themes/business/src/components/OrdersOption/index.tsx +217 -156
  32. package/themes/business/src/components/PhoneInputNumber/index.tsx +8 -5
  33. package/themes/business/src/components/PreviousMessages/index.tsx +26 -3
  34. package/themes/business/src/components/PreviousOrders/OrderItem.tsx +39 -16
  35. package/themes/business/src/components/PreviousOrders/index.tsx +76 -66
  36. package/themes/business/src/components/PrinterEdition/MessageAlert.tsx +33 -0
  37. package/themes/business/src/components/PrinterEdition/index.tsx +431 -0
  38. package/themes/business/src/components/PrinterEdition/printerList.tsx +23 -0
  39. package/themes/business/src/components/PrinterEdition/styles.tsx +61 -0
  40. package/themes/business/src/components/PrinterSettings/index.tsx +267 -0
  41. package/themes/business/src/components/PrinterSettings/styles.tsx +30 -0
  42. package/themes/business/src/components/ReviewCustomer/index.tsx +2 -0
  43. package/themes/business/src/components/StoresList/index.tsx +2 -2
  44. package/themes/business/src/components/UserFormDetails/index.tsx +111 -107
  45. package/themes/business/src/components/UserProfileForm/index.tsx +43 -25
  46. package/themes/business/src/components/WebsocketStatus/index.tsx +2 -2
  47. package/themes/business/src/components/shared/OTextarea.tsx +8 -9
  48. package/themes/business/src/hooks/useLocation.tsx +2 -2
  49. package/themes/business/src/layouts/SafeAreaContainer.tsx +35 -19
  50. package/themes/business/src/types/index.tsx +15 -5
  51. package/themes/business/src/utils/index.tsx +25 -1
  52. package/themes/doordash/src/components/BusinessesListing/index.tsx +1 -1
  53. package/themes/doordash/src/components/LoginForm/index.tsx +1 -2
  54. package/themes/instacart/src/components/BusinessesListing/index.tsx +1 -1
  55. package/themes/kiosk/src/components/Checkout/index.tsx +6 -0
  56. package/themes/kiosk/src/components/NavBar/index.tsx +14 -14
  57. package/themes/kiosk/src/components/OptionCard/index.tsx +1 -1
  58. package/themes/kiosk/src/components/OrderTypeCardSelector/index.tsx +8 -10
  59. package/themes/kiosk/src/components/shared/OButton.tsx +5 -18
  60. package/themes/original/index.tsx +11 -0
  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 +5 -8
  66. package/themes/original/src/components/BusinessController/index.tsx +5 -5
  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 +44 -32
  72. package/themes/original/src/components/BusinessProductsList/SubcategoriesComponent/index.tsx +73 -70
  73. package/themes/original/src/components/BusinessProductsList/index.tsx +6 -7
  74. package/themes/original/src/components/BusinessProductsList/styles.tsx +0 -3
  75. package/themes/original/src/components/BusinessProductsListing/index.tsx +18 -6
  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 +38 -14
  82. package/themes/original/src/components/CartContent/index.tsx +2 -4
  83. package/themes/original/src/components/Checkout/index.tsx +100 -58
  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/GiftCardUI/index.tsx +15 -17
  91. package/themes/original/src/components/GiftCard/PurchaseGiftCard/index.tsx +3 -7
  92. package/themes/original/src/components/GiftCard/RedeemGiftCard/index.tsx +24 -32
  93. package/themes/original/src/components/GiftCard/SendGiftCard/index.tsx +7 -9
  94. package/themes/original/src/components/GiftCard/VerticalGiftCardOrdersLayout/index.tsx +11 -12
  95. package/themes/original/src/components/GoogleMap/index.tsx +39 -18
  96. package/themes/original/src/components/Help/index.tsx +2 -0
  97. package/themes/original/src/components/HighestRatedBusinesses/index.tsx +1 -1
  98. package/themes/original/src/components/Home/index.tsx +3 -11
  99. package/themes/original/src/components/LoginForm/Otp/index.tsx +0 -3
  100. package/themes/original/src/components/LoginForm/index.tsx +4 -7
  101. package/themes/original/src/components/MessageListing/index.tsx +2 -1
  102. package/themes/original/src/components/Messages/index.tsx +29 -17
  103. package/themes/original/src/components/MomentOption/TimeListItem.tsx +56 -0
  104. package/themes/original/src/components/MomentOption/index.tsx +79 -56
  105. package/themes/original/src/components/MomentSelector/index.tsx +1 -1
  106. package/themes/original/src/components/MultiCartsPaymethodsAndWallets/index.tsx +7 -3
  107. package/themes/original/src/components/MultiCheckout/index.tsx +55 -27
  108. package/themes/original/src/components/MultiOrdersDetails/index.tsx +1 -0
  109. package/themes/original/src/components/MyOrders/index.tsx +2 -2
  110. package/themes/original/src/components/NavBar/index.tsx +7 -4
  111. package/themes/original/src/components/NetworkError/index.tsx +0 -5
  112. package/themes/original/src/components/NotFoundSource/index.tsx +0 -3
  113. package/themes/original/src/components/OrderDetails/OrderEta.tsx +4 -3
  114. package/themes/original/src/components/OrderDetails/OrderHistory.tsx +13 -10
  115. package/themes/original/src/components/OrderDetails/index.tsx +42 -19
  116. package/themes/original/src/components/OrderDetails/styles.tsx +0 -1
  117. package/themes/original/src/components/OrderProgress/index.tsx +5 -4
  118. package/themes/original/src/components/OrderSummary/index.tsx +29 -10
  119. package/themes/original/src/components/OrderTypeSelector/index.tsx +7 -6
  120. package/themes/original/src/components/OrdersOption/index.tsx +3 -6
  121. package/themes/original/src/components/PaymentOptionStripe/index.tsx +0 -5
  122. package/themes/original/src/components/PaymentOptionWallet/index.tsx +56 -56
  123. package/themes/original/src/components/PaymentOptions/index.tsx +10 -8
  124. package/themes/original/src/components/PlaceSpot/index.tsx +1 -3
  125. package/themes/original/src/components/PreviousOrders/index.tsx +1 -2
  126. package/themes/original/src/components/ProductForm/ActionButton.tsx +17 -20
  127. package/themes/original/src/components/ProductForm/index.tsx +107 -102
  128. package/themes/original/src/components/ProductItemAccordion/index.tsx +51 -44
  129. package/themes/original/src/components/ProductItemAccordion/styles.tsx +3 -4
  130. package/themes/original/src/components/ProductOptionSubOption/index.tsx +16 -8
  131. package/themes/original/src/components/ProfessionalProfile/index.tsx +4 -5
  132. package/themes/original/src/components/Promotions/index.tsx +6 -9
  133. package/themes/original/src/components/ReviewDriver/index.tsx +1 -1
  134. package/themes/original/src/components/ReviewOrder/index.tsx +2 -2
  135. package/themes/original/src/components/ReviewProducts/index.tsx +1 -1
  136. package/themes/original/src/components/ReviewTrigger/index.tsx +2 -2
  137. package/themes/original/src/components/ServiceForm/index.tsx +52 -54
  138. package/themes/original/src/components/Sessions/index.tsx +3 -3
  139. package/themes/original/src/components/SignupForm/index.tsx +86 -78
  140. package/themes/original/src/components/SingleOrderCard/index.tsx +6 -4
  141. package/themes/original/src/components/SingleProductCard/index.tsx +3 -4
  142. package/themes/original/src/components/SingleProductCard/styles.tsx +0 -3
  143. package/themes/original/src/components/StripeCardForm/index.tsx +0 -3
  144. package/themes/original/src/components/StripeCardsList/index.tsx +10 -3
  145. package/themes/original/src/components/StripeElementsForm/index.tsx +76 -62
  146. package/themes/original/src/components/StripeElementsForm/naked.tsx +48 -1
  147. package/themes/original/src/components/StripeRedirectForm/index.tsx +0 -3
  148. package/themes/original/src/components/TaxInformation/index.tsx +3 -2
  149. package/themes/original/src/components/UpsellingProducts/UpsellingContent.tsx +10 -7
  150. package/themes/original/src/components/UpsellingProducts/UpsellingLayout.tsx +8 -3
  151. package/themes/original/src/components/UserDetails/index.tsx +3 -2
  152. package/themes/original/src/components/UserFormDetails/index.tsx +154 -130
  153. package/themes/original/src/components/UserProfile/index.tsx +9 -1
  154. package/themes/original/src/components/UserVerification/index.tsx +14 -4
  155. package/themes/original/src/components/Wallets/index.tsx +6 -3
  156. package/themes/original/src/components/WebsocketStatus/index.tsx +1 -4
  157. package/themes/original/src/components/shared/OAlert.tsx +2 -1
  158. package/themes/original/src/components/shared/OButton.tsx +5 -4
  159. package/themes/original/src/components/shared/OInput.tsx +4 -8
  160. package/themes/original/src/components/shared/OModal.tsx +7 -2
  161. package/themes/original/src/types/index.tsx +5 -1
  162. package/themes/original/src/utils/index.tsx +30 -1
  163. package/themes/uber-eats/src/components/BusinessesListing/index.tsx +1 -1
@@ -16,6 +16,8 @@ import { ListItem } from '../UserProfile/styles';
16
16
  import moment from 'moment';
17
17
  import { DatePickerUI } from '../DatePicker';
18
18
 
19
+ const CONDITIONAL_CODES = ['PR']
20
+
19
21
  export const UserFormDetailsUI = (props: any) => {
20
22
  const {
21
23
  isEdit,
@@ -36,7 +38,11 @@ export const UserFormDetailsUI = (props: any) => {
36
38
  isCheckout,
37
39
  setIsOpen,
38
40
  handleRemoveAccount,
39
- isProfile
41
+ isProfile,
42
+ isGuest,
43
+ isOrderTypeValidationField,
44
+ checkoutFields,
45
+ isCheckoutPlace
40
46
  } = props;
41
47
 
42
48
  const theme = useTheme();
@@ -95,8 +101,8 @@ export const UserFormDetailsUI = (props: any) => {
95
101
  const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
96
102
 
97
103
  const isAdmin = user?.level === 0
98
- const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
99
- const showInputBirthday = validationFields?.fields?.checkout?.birthdate?.enabled ?? false
104
+ const showInputPhoneNumber = isOrderTypeValidationField ? checkoutFields?.find(field => field?.validation_field?.code === 'mobile_phone')?.enabled : (validationFields?.fields?.checkout?.cellphone?.enabled ?? false)
105
+ const showInputBirthday = isOrderTypeValidationField ? checkoutFields?.find(field => field?.validation_field?.code === 'birthdate')?.enabled : (validationFields?.fields?.checkout?.birthdate?.enabled ?? false)
100
106
 
101
107
  const handleSuccessSignup = (user: any) => {
102
108
  login({
@@ -127,6 +133,16 @@ export const UserFormDetailsUI = (props: any) => {
127
133
  return rules;
128
134
  };
129
135
 
136
+ const cellphoneValue = () => {
137
+ let cellphone = user?.cellphone || null
138
+ if (cellphone && CONDITIONAL_CODES.includes(user?.country_code)) {
139
+ if (user?.country_code === 'PR') {
140
+ cellphone = user?.cellphone?.slice(3)
141
+ }
142
+ }
143
+ return cellphone
144
+ }
145
+
130
146
  const setUserCellPhone = (isEdit = false) => {
131
147
  if (userPhoneNumber && !userPhoneNumber.includes('null') && !isEdit) {
132
148
  setUserPhoneNumber(userPhoneNumber);
@@ -144,7 +160,7 @@ export const UserFormDetailsUI = (props: any) => {
144
160
  ...phoneInputData,
145
161
  phone: {
146
162
  country_phone_code: user?.country_phone_code || null,
147
- cellphone: user?.cellphone || null,
163
+ cellphone: cellphoneValue()
148
164
  },
149
165
  });
150
166
  return;
@@ -153,8 +169,13 @@ export const UserFormDetailsUI = (props: any) => {
153
169
  };
154
170
 
155
171
  const onSubmit = () => {
172
+ let content = ''
173
+ if (requiredFields?.includes?.('birthdate') && !birthdate) {
174
+ content = content + `${t('VALIDATION_ERROR_BIRTHDATE_REQUIRED', 'Birthdate is required')}\n`
175
+ }
156
176
  if (phoneInputData.error) {
157
- showToast(ToastType.Error, phoneInputData.error);
177
+ content = content + `${phoneInputData.error}\n`
178
+ showToast(ToastType.Error, content);
158
179
  return;
159
180
  }
160
181
  if (Object.keys(formState.changes).length > 0) {
@@ -164,15 +185,14 @@ export const UserFormDetailsUI = (props: any) => {
164
185
  validationFields?.fields?.checkout?.cellphone?.required) ||
165
186
  configs?.verification_phone_required?.value === '1')
166
187
  ) {
167
- showToast(
168
- ToastType.Error,
169
- t(
170
- 'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
171
- 'The field Phone Number is required.',
172
- ),
173
- );
188
+ content = content + `${t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone Number is required.',)}\n`
189
+ showToast(ToastType.Error, content);
174
190
  return;
175
191
  }
192
+ if (content.length > 0) {
193
+ showToast(ToastType.Error, content);
194
+ return
195
+ }
176
196
  let changes = null;
177
197
  if (user?.cellphone && !userPhoneNumber) {
178
198
  changes = {
@@ -298,125 +318,134 @@ export const UserFormDetailsUI = (props: any) => {
298
318
  <>
299
319
  <UDForm>
300
320
  {!validationFields?.loading &&
301
- sortInputFields({ values: validationFields?.fields?.checkout })
321
+ sortInputFields({ values: isOrderTypeValidationField ? checkoutFields : validationFields?.fields?.checkout })
302
322
  .length > 0 && (
303
323
  <UDWrapper>
304
324
  {sortInputFields({
305
- values: validationFields.fields?.checkout,
325
+ values: isOrderTypeValidationField ? checkoutFields : validationFields?.fields?.checkout,
306
326
  }).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
327
+ (item: any) => {
328
+ const field = item?.validation_field || item
329
+ return (
330
+ ((isOrderTypeValidationField ? item?.enabled : (showField && showField(field.code))) && ((requiredFields && requiredFields?.includes?.(field.code)) || !requiredFields || !isCheckoutPlace)) && (
331
+ <React.Fragment key={field.id}>
332
+ <Controller
333
+ key={field.id}
334
+ control={control}
335
+ render={() => (
336
+ <>
337
+ <OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
338
+ {t(field?.code?.toUpperCase(), field?.name)}
339
+ </OText>
340
+ <OInput
341
+ name={field.code}
342
+ placeholder={t(
343
+ field.code.toUpperCase(),
344
+ field?.name,
345
+ )}
346
+ inputStyle={styles.inputStyle}
347
+ style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
348
+ autoCapitalize={
349
+ field.code === 'email' ? 'none' : 'sentences'
350
+ }
351
+ isDisabled={false}
352
+ value={
353
+ formState?.changes[field.code] ??
354
+ (user && user[field.code]) ??
355
+ ''
356
+ }
357
+ onChange={(val: any) => {
358
+ field.code !== 'email'
359
+ ? setValue(field.code, val.target.value)
360
+ : setValue(
361
+ field.code,
362
+ val.target.value
354
363
  .toLowerCase()
355
364
  .replace(
356
365
  /[&,()%";:ç?<>{}\\[\]\s]/g,
357
366
  '',
358
367
  ),
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
- ),
381
- )}
382
- {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') : ''}
390
- </OText>
391
- </TouchableOpacity>
392
- <DatePickerUI open={showDatePicker} birthdate={birthdate} onConfirm={_handleChangeDate} onCancel={() => setShowDatePicker(false)} />
393
- </WrapperBirthdate>
394
- )}
395
- {!!showInputPhoneNumber && ((requiredFields && requiredFields.includes('cellphone')) || !requiredFields) && (
396
- <WrapperPhone>
397
- <OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
398
- <PhoneInputNumber
399
- data={phoneInputData}
400
- handleData={(val: any) => handleChangePhoneNumber(val)}
401
- changeCountry={(val: any) => changeCountry(val)}
402
- defaultValue={phoneUpdate ? '' : user?.cellphone}
403
- defaultCode={user?.country_code ?? user?.country_phone_code ?? null}
404
- boxStyle={styles.phoneSelect}
405
- inputStyle={styles.phoneInputStyle}
406
- textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
407
- noDropIcon
408
- />
409
- {phoneUpdate && (
410
- <OText
411
- size={10}
412
- color={theme.colors.error}
413
- style={{ marginHorizontal: 10, textAlign: 'center' }}>
414
- {t('YOUR_PREVIOUS_CELLPHONE', 'Your previous cellphone')}:{' '}
415
- {user?.cellphone}
416
- </OText>
417
- )}
418
- </WrapperPhone>
368
+ );
369
+ field.code !== 'email'
370
+ ? handleChangeInput(val)
371
+ : handleChangeInput({
372
+ target: {
373
+ name: 'email',
374
+ value: val.target.value
375
+ .toLowerCase()
376
+ .replace(
377
+ /[&,()%";:ç?<>{}\\[\]\s]/g,
378
+ '',
379
+ ),
380
+ },
381
+ });
382
+ }}
383
+ autoCorrect={field.code === 'email' && false}
384
+ type={
385
+ field.code === 'email'
386
+ ? 'email-address'
387
+ : 'default'
388
+ }
389
+ returnKeyType="done"
390
+ autoCompleteType={
391
+ field.code === 'email' ? 'email' : 'off'
392
+ }
393
+ />
394
+ </>
395
+ )}
396
+ name={field.code}
397
+ rules={getInputRules(field)}
398
+ defaultValue={user && user[field.code]}
399
+ />
400
+ </React.Fragment>
401
+ ))
402
+ },
419
403
  )}
404
+ {((!user?.guest_id && showInputBirthday) || (isOrderTypeValidationField || user?.guest_id)) &&
405
+ showInputBirthday &&
406
+ ((requiredFields && requiredFields?.includes?.('birthdate')) || !requiredFields || !isCheckoutPlace) &&
407
+ (
408
+ <>
409
+ <WrapperBirthdate>
410
+ <OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
411
+ {t('BIRTHDATE', 'Birthdate')}
412
+ </OText>
413
+ <TouchableOpacity onPress={() => setShowDatePicker(!showDatePicker)}>
414
+ <OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ marginTop: 6 }}>
415
+ {birthdate ? moment(birthdate).format('YYYY-MM-DD') : ''}
416
+ </OText>
417
+ </TouchableOpacity>
418
+ </WrapperBirthdate>
419
+ <DatePickerUI open={showDatePicker} birthdate={birthdate} onConfirm={_handleChangeDate} onCancel={() => setShowDatePicker(false)} />
420
+ </>
421
+ )}
422
+ {((!user?.guest_id && !!showInputPhoneNumber) || (isOrderTypeValidationField || user?.guest_id)) &&
423
+ ((requiredFields && requiredFields?.includes?.('cellphone')) || !requiredFields || !isCheckoutPlace) &&
424
+ (
425
+ <WrapperPhone>
426
+ <OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
427
+ <PhoneInputNumber
428
+ data={phoneInputData}
429
+ handleData={(val: any) => handleChangePhoneNumber(val)}
430
+ changeCountry={(val: any) => changeCountry(val)}
431
+ defaultValue={phoneUpdate ? '' : cellphoneValue()}
432
+ defaultCode={user?.country_code ?? user?.country_phone_code ?? null}
433
+ boxStyle={styles.phoneSelect}
434
+ inputStyle={styles.phoneInputStyle}
435
+ textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
436
+ noDropIcon
437
+ />
438
+ {phoneUpdate && (
439
+ <OText
440
+ size={10}
441
+ color={theme.colors.error}
442
+ style={{ marginHorizontal: 10, textAlign: 'center' }}>
443
+ {t('YOUR_PREVIOUS_CELLPHONE', 'Your previous cellphone')}:{' '}
444
+ {cellphoneValue()}
445
+ </OText>
446
+ )}
447
+ </WrapperPhone>
448
+ )}
420
449
  {!requiredFields && (
421
450
  <Controller
422
451
  control={control}
@@ -480,9 +509,7 @@ export const UserFormDetailsUI = (props: any) => {
480
509
  ? t('UPDATING', 'Updating...')
481
510
  : t('UPDATE', 'Update')
482
511
  }
483
- bgColor={theme.colors.primary}
484
- textStyle={{ color: theme.colors.white, fontSize: 14 }}
485
- borderColor={theme.colors.primary}
512
+ textStyle={{ fontSize: 14 }}
486
513
  isDisabled={formState.loading}
487
514
  imgRightSrc={null}
488
515
  style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20, marginBottom: 20 }}
@@ -491,7 +518,7 @@ export const UserFormDetailsUI = (props: any) => {
491
518
  )}
492
519
  </>
493
520
  )}
494
- {requiredFields && (
521
+ {isCheckoutPlace && (
495
522
  <OButton
496
523
  text={
497
524
  formState.loading
@@ -500,12 +527,10 @@ export const UserFormDetailsUI = (props: any) => {
500
527
  ? t('SIGN_UP_AND_PLACE_ORDER', 'Sign up and place order')
501
528
  : t('CONTINUE', 'Continue'))
502
529
  }
503
- bgColor={theme.colors.primary}
504
530
  textStyle={{
505
531
  color: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.primary : theme.colors.white,
506
532
  fontSize: 14
507
533
  }}
508
- borderColor={theme.colors.primary}
509
534
  isDisabled={!user?.guest_id && (formState.loading || !isValid)}
510
535
  imgRightSrc={null}
511
536
  style={{
@@ -519,10 +544,10 @@ export const UserFormDetailsUI = (props: any) => {
519
544
  borderColor: !user?.guest_id && (formState.loading || !isValid) ? theme.colors.white : theme.colors.primary,
520
545
  opacity: !user?.guest_id && (formState.loading || !isValid) ? 0.3 : 1,
521
546
  }}
522
- onClick={!user?.guest_id ? handleSubmit(onSubmit) : () => setIsModalOpen(true)}
547
+ onClick={handleSubmit(onSubmit)}
523
548
  />
524
549
  )}
525
- {isCheckout && !!user?.guest_id && (
550
+ {isCheckout && !!user?.guest_id && !requiredFields && (
526
551
  <TouchableOpacity style={{ marginTop: 10 }} onPress={() => handlePlaceOrderAsGuest()}>
527
552
  <OText color={theme.colors.primary} style={{ textAlign: 'center' }}>{t('PLACE_ORDER_AS_GUEST', 'Place order as guest')}</OText>
528
553
  </TouchableOpacity>
@@ -552,4 +577,3 @@ export const UserFormDetailsUI = (props: any) => {
552
577
  </>
553
578
  );
554
579
  };
555
-
@@ -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(() => {
@@ -271,6 +272,13 @@ const ProfileListUI = (props: ProfileParams) => {
271
272
  </Actions>
272
273
  </ListWrap>
273
274
  <WebsocketStatus />
275
+ {appVersion && (
276
+ <View
277
+ style={{ alignItems: 'center' }}
278
+ >
279
+ <OText>v{appVersion}</OText>
280
+ </View>
281
+ )}
274
282
  <OAlert
275
283
  open={confirm.open}
276
284
  title={confirm.title}
@@ -37,6 +37,7 @@ import {
37
37
  WrapperActions
38
38
  } from './styles'
39
39
 
40
+ const CONDITIONAL_CODES = [1787]
40
41
  const TIME_COUNTDOWN = 60 * 10 // 10 minutes
41
42
 
42
43
  const UserDetails = (props: any) => {
@@ -176,9 +177,18 @@ const UserVerificationUI = (props: any) => {
176
177
  setTimer(`${TIME_COUNTDOWN / 60}:00`)
177
178
  setIsSendCodeAgain(true)
178
179
  if (opt === 'phone') {
180
+ let cellphone = phoneState?.cellphone
181
+ let country_phone_code = phoneState?.country_phone_code
182
+
183
+ if (CONDITIONAL_CODES.includes(Number(country_phone_code))) {
184
+ if (Number(country_phone_code) === 1787) {
185
+ cellphone = `787${cellphone}`
186
+ country_phone_code = '1'
187
+ }
188
+ }
179
189
  sendVerifyPhoneCode({
180
- cellphone: phoneState?.cellphone,
181
- country_phone_code: phoneState?.country_phone_code
190
+ cellphone,
191
+ country_phone_code
182
192
  })
183
193
  return
184
194
  }
@@ -188,8 +198,8 @@ const UserVerificationUI = (props: any) => {
188
198
  const setupUserPhoneNumber = () => {
189
199
  if (!user || !user?.cellphone || !user?.country_phone_code) return
190
200
  setPhoneState({
191
- cellphone: user?.cellphone,
192
- country_phone_code: user?.country_phone_code,
201
+ cellphone: user?.country_code === "PR" ? user?.cellphone.replace('787', '') : user?.cellphone,
202
+ country_phone_code: user?.country_code === "PR" ? '1787' : user?.country_phone_code,
193
203
  formatted: `+${user?.country_phone_code} ${user?.cellphone}`
194
204
  })
195
205
  }
@@ -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={{
@@ -143,15 +143,12 @@ const SocketStatusUI = (props: any) => {
143
143
  <OButton
144
144
  onClick={() => setOpenModal(false)}
145
145
  bgColor={theme.colors.white}
146
- borderColor={theme.colors.primary}
147
146
  textStyle={{ color: theme.colors.primary }}
148
147
  style={{ borderRadius: 8, height: 48 }}
149
148
  text={t('CLOSE', 'Close')}
150
149
  />
151
- <OButton
150
+ <OButton
152
151
  onClick={() => RNRestart.Restart()}
153
- borderColor={theme.colors.primary}
154
- textStyle={{ color: theme.colors.white }}
155
152
  style={{ borderRadius: 8, marginLeft: 16, height: 48 }}
156
153
  text={t('UPDATE', 'Update')}
157
154
  />
@@ -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
  }
@@ -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.style, backgroundColor: theme?.general?.components?.buttons?.color ?? props.bgColor, borderColor: theme?.general?.components?.buttons?.color ?? props.borderColor, 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, color: theme?.general?.components?.buttons?.buttonTextColor ?? props?.textStyle?.color }}>{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?.borderRadius && css`
57
- border-radius: ${typeof props?.borderRadius === 'string' ? props?.borderRadius : `${props?.borderRadius}px`};
58
- `}
59
56
  `;
60
57
 
61
58
  const OInput = (props: Props): React.ReactElement => {
@@ -70,7 +67,6 @@ const OInput = (props: Props): React.ReactElement => {
70
67
  ? props.borderColor
71
68
  : inputFocused ? theme.colors.primary : theme.colors.border,
72
69
  ...props.style,
73
- borderRadius: parseInt(theme?.general?.components?.inputs?.borderRadius) || props.style?.borderRadius
74
70
  }}>
75
71
  {props.icon ? (
76
72
  <OIcon
@@ -105,9 +101,9 @@ const OInput = (props: Props): React.ReactElement => {
105
101
  props.forwardRef && (props.forwardRef.current = e)
106
102
  }}
107
103
  style={{
108
- ...(theme?.general?.components?.inputs?.color && {
109
- color: theme?.general?.components?.inputs?.color
110
- }),
104
+ ...(theme?.general?.components?.inputs?.color && {
105
+ color: theme?.general?.components?.inputs?.color
106
+ }),
111
107
  ...props?.inputStyle
112
108
  }}
113
109
  onFocus={() => setInputFocused(true)}
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import { Modal, StyleSheet, Text, SafeAreaView, View, TouchableOpacity, Platform } from "react-native";
3
3
  import styled from 'styled-components/native';
4
4
  import AntDesignIcon from 'react-native-vector-icons/AntDesign'
5
-
5
+ import { Toast } from '../../../../../src/components/shared/OToast'
6
6
  interface Props {
7
7
  open?: boolean;
8
8
  title?: string;
@@ -22,6 +22,7 @@ interface Props {
22
22
  styleCloseButton?: any,
23
23
  isAvoidKeyBoardView?: boolean;
24
24
  styleContainerCloseButton?: any;
25
+ showToastInsideModal?: boolean;
25
26
  }
26
27
  const KeyboardView = styled.KeyboardAvoidingView`
27
28
  flex-grow: 1;
@@ -47,7 +48,8 @@ const OModal = (props: Props): React.ReactElement => {
47
48
  style,
48
49
  styleCloseButton,
49
50
  styleContainerCloseButton,
50
- isAvoidKeyBoardView
51
+ isAvoidKeyBoardView,
52
+ showToastInsideModal
51
53
  } = props
52
54
 
53
55
  const renderSafeAreaView = () => (
@@ -94,6 +96,9 @@ const OModal = (props: Props): React.ReactElement => {
94
96
  onRequestClose={() => onClose && onClose()}
95
97
  style={{ height: '100%', flex: 1, position: 'absolute', ...style, zIndex: 9999 }}
96
98
  >
99
+ {showToastInsideModal && (
100
+ <Toast />
101
+ )}
97
102
  {isAvoidKeyBoardView ? (
98
103
  <KeyboardView
99
104
  enabled
@@ -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 {