ordering-ui-react-native 0.12.98 → 0.13.2

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 (16) hide show
  1. package/package.json +1 -1
  2. package/src/components/ReviewProducts/index.tsx +1 -1
  3. package/themes/doordash/src/components/Home/index.tsx +4 -3
  4. package/themes/doordash/src/components/LoginForm/index.tsx +89 -59
  5. package/themes/doordash/src/components/LoginForm/styles.tsx +7 -7
  6. package/themes/doordash/src/components/PhoneInputNumber/index.tsx +1 -1
  7. package/themes/doordash/src/components/PreviousOrders/index.tsx +1 -1
  8. package/themes/doordash/src/components/ProductForm/index.tsx +10 -5
  9. package/themes/doordash/src/types/index.tsx +1 -0
  10. package/themes/instacart/src/components/Home/index.tsx +1 -0
  11. package/themes/instacart/src/components/LoginForm/index.tsx +22 -19
  12. package/themes/original/src/components/BusinessMenuList/index.tsx +1 -1
  13. package/themes/original/src/components/BusinessPreorder/index.tsx +1 -1
  14. package/themes/original/src/components/LoginForm/index.tsx +16 -8
  15. package/themes/original/src/components/Messages/index.tsx +1 -1
  16. package/themes/uber-eats/src/components/LoginForm/index.tsx +7 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.12.98",
3
+ "version": "0.13.2",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/src/components/ReviewProducts/index.tsx CHANGED
@@ -67,7 +67,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
67
67
  <NavBar
68
68
  title={t('REVIEW_PRODUCT', 'Review product')}
69
69
  titleAlign={'center'}
70
- onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
70
+ onActionLeft={() => onNavigationRedirect('MyOrders')}
71
71
  showCall={false}
72
72
  btnStyle={{ paddingLeft: 0 }}
73
73
  paddingTop={0}
package/themes/doordash/src/components/Home/index.tsx CHANGED
@@ -52,8 +52,8 @@ export const Home = (props: any) => {
52
52
  marginTop: 10
53
53
  },
54
54
  slogan: {
55
- height: w - 80,
56
- width: w - 80
55
+ height: w * 0.6,
56
+ width: w * 0.6
57
57
  },
58
58
  buttons: {
59
59
  marginVertical: 8.5,
@@ -83,7 +83,8 @@ export const Home = (props: any) => {
83
83
 
84
84
  const loginProps = {
85
85
  navigation,
86
- useLoginByCellphone: false,
86
+ useLoginByCellphone: true,
87
+ useLoginByEmail: true,
87
88
  loginButtonText: t('SIGN_IN', 'Sign in'),
88
89
  loginButtonBackground: theme.colors.primary,
89
90
  forgotButtonText: t('FORGOT_YOUR_PASSWORD', 'Forgot your password?'),
package/themes/doordash/src/components/LoginForm/index.tsx CHANGED
@@ -14,7 +14,8 @@ import {
14
14
  } from 'ordering-components/native';
15
15
 
16
16
  import { FacebookLogin } from '../FacebookLogin';
17
- import { VerifyPhone } from '../VerifyPhone';
17
+ import { VerifyPhone } from '../../../../../src/components/VerifyPhone';
18
+ import { OModal } from '../../../../../src/components/shared';
18
19
 
19
20
  import {
20
21
  Container,
@@ -33,7 +34,7 @@ import {
33
34
  import { _removeStoreData } from '../../providers/StoreUtil';
34
35
  import NavBar from '../NavBar'
35
36
 
36
- import { OText, OButton, OInput, OModal, OIcon } from '../shared';
37
+ import { OText, OButton, OInput, OIcon } from '../shared';
37
38
  import { LoginParams } from '../../types';
38
39
  import { useTheme } from 'styled-components/native';
39
40
  import { useWindowDimensions } from 'react-native';
@@ -65,8 +66,23 @@ const LoginFormUI = (props: LoginParams) => {
65
66
 
66
67
  const loginStyle = StyleSheet.create({
67
68
  btnOutline: {
68
- backgroundColor: '#FFF',
69
- color: theme.colors.primary
69
+ backgroundColor: 'red',
70
+ color: theme.colors.primary,
71
+ // backgroundColor: '#EFEFEF',
72
+ borderColor: '#EFEFEF',
73
+ borderRadius: 30,
74
+ fontSize: 16,
75
+ paddingVertical: 15,
76
+ paddingHorizontal: 30,
77
+ fontWeight: '400',
78
+ textAlign: 'center',
79
+ width: '100%',
80
+ display: 'flex',
81
+ flexDirection: 'row',
82
+ alignItems: 'center',
83
+ justifyContent: 'center',
84
+ position: 'relative',
85
+ height: 52,
70
86
  },
71
87
  inputStyle: {
72
88
  marginBottom: 25,
@@ -246,7 +262,7 @@ const LoginFormUI = (props: LoginParams) => {
246
262
  {useLoginByEmail && (
247
263
  <Pressable onPress={() => handleChangeTab('email')}>
248
264
  <OTab>
249
- <OText size={18} color={loginTab === 'email' ? theme.colors.primary : theme.colors.disabled}>
265
+ <OText size={16} color={loginTab === 'email' ? theme.colors.primary : theme.colors.disabled}>
250
266
  {t('LOGIN_BY_EMAIL', 'Login by Email')}
251
267
  </OText>
252
268
  </OTab>
@@ -255,7 +271,7 @@ const LoginFormUI = (props: LoginParams) => {
255
271
  {useLoginByCellphone && (
256
272
  <Pressable onPress={() => handleChangeTab('cellphone')}>
257
273
  <OTab>
258
- <OText size={18} color={loginTab === 'cellphone' ? theme.colors.primary : theme.colors.disabled}>
274
+ <OText size={16} color={loginTab === 'cellphone' ? theme.colors.primary : theme.colors.disabled}>
259
275
  {t('LOGIN_BY_PHONE', 'Login by Phone')}
260
276
  </OText>
261
277
  </OTab>
@@ -264,15 +280,10 @@ const LoginFormUI = (props: LoginParams) => {
264
280
  </OTabs>
265
281
  </LoginWith>
266
282
  )}
267
- {/* Social login button group */}
268
- {configs && Object.keys(configs).length > 0 &&
283
+ {configs && Object.keys(configs).length > 0 &&
269
284
  (
270
285
  <>
271
286
  <ButtonsWrapper>
272
- {/* <OText size={18} mBottom={10} color={theme.colors.disabled}>
273
- {t('SELECT_AN_OPTION_TO_LOGIN', 'Select an option to login')}
274
- </OText> */}
275
-
276
287
  <SocialButtons>
277
288
  <FacebookLogin
278
289
  notificationState={notificationState}
@@ -301,8 +312,48 @@ const LoginFormUI = (props: LoginParams) => {
301
312
  handleSuccessAppleLogin={handleSuccessApple}
302
313
  />
303
314
  </SocialButtons>
304
- <OText style={{ ...theme.labels.normal, textAlign: 'center', marginBottom: 8 } as TextStyle} color={theme.colors.textSecondary}>{t('OR_CONTINUE_WITH_EMAIL', 'or continue with email')}</OText>
315
+ {loginTab !== 'cellphone' && (
316
+ <OText
317
+ style={{ ...theme.labels.normal, textAlign: 'center', marginBottom: 8 } as TextStyle}
318
+ color={theme.colors.textSecondary}
319
+ >
320
+ {t('OR_CONTINUE_WITH_EMAIL', 'or continue with email')}
321
+ </OText>
322
+ )}
305
323
  </ButtonsWrapper>
324
+
325
+ {useLoginByCellphone &&
326
+ loginTab === 'cellphone' &&
327
+ configs && Object.keys(configs).length > 0 &&
328
+ (configs?.twilio_service_enabled?.value === 'true' ||
329
+ configs?.twilio_service_enabled?.value === '1') &&
330
+ configs?.twilio_module?.value &&
331
+ (
332
+ <>
333
+ <OrSeparator>
334
+ <LineSeparator />
335
+ <OText size={16} mRight={20} mLeft={20}>
336
+ {t('OR', 'Or')}
337
+ </OText>
338
+ <LineSeparator />
339
+ </OrSeparator>
340
+
341
+ <ButtonsWrapper mBottom={20}>
342
+ <OButton
343
+ onClick={handleVerifyCodeClick}
344
+ text={t('GET_VERIFY_CODE', 'Get Verify Code')}
345
+ bgColor={theme.colors.primary}
346
+ borderColor={theme.colors.primary}
347
+ textStyle={{ color: 'white', ...theme.labels.middle } as TextStyle}
348
+ imgRightSrc={null}
349
+ isLoading={isLoadingVerifyModal}
350
+ indicatorColor={theme.colors.white}
351
+ style={{ marginTop: 0, height: 40, shadowOpacity: 0 }}
352
+ />
353
+ </ButtonsWrapper>
354
+ </>
355
+ )
356
+ }
306
357
  <View style={{ height: 1, backgroundColor: theme.colors.border, width: width }} />
307
358
  </>
308
359
  )
@@ -349,19 +400,26 @@ const LoginFormUI = (props: LoginParams) => {
349
400
  </InputWrapper>
350
401
  )}
351
402
  {useLoginByCellphone && loginTab === 'cellphone' && (
352
- <View style={{ marginBottom: 25 }}>
353
- <PhoneInputNumber
354
- data={phoneInputData}
355
- handleData={(val: any) => setPhoneInputData(val)}
356
- textInputProps={{
357
- returnKeyType: 'next',
358
- onSubmitEditing: () => inputRef?.current?.focus?.(),
359
- }}
360
- />
361
- </View>
403
+ <>
404
+ <InputWrapper style={{ marginVertical: 20 }}>
405
+ <OText style={{ ...loginStyle.inputHead, ...theme.labels.middle, alignSelf: 'center' } as TextStyle}>{t('PHONE', 'Phone')}</OText>
406
+ <PhoneInputNumber
407
+ wrapStyle={{ marginTop: 0 }}
408
+ data={phoneInputData}
409
+ handleData={(val: any) => setPhoneInputData(val)}
410
+ textInputProps={{
411
+ returnKeyType: 'next',
412
+ onSubmitEditing: () => inputRef?.current?.focus?.(),
413
+ style: { borderWidth: 0, fontSize: 12 }
414
+ }}
415
+ textWrapStyle={{ borderColor: theme.colors.clear, borderWidth: 0, height: 40, paddingStart: 0 }}
416
+ />
417
+ </InputWrapper>
418
+ <View style={{ height: 1, backgroundColor: theme.colors.border, marginHorizontal: -40 }} />
419
+ </>
362
420
  )}
363
421
  <View style={{ height: 1, backgroundColor: theme.colors.border, width: width, marginStart: -40 }} />
364
- <InputWrapper>
422
+ <InputWrapper style={loginTab === 'cellphone' && { marginVertical: 20 }}>
365
423
  <Pressable onPress={() => inputRef.current?.focus()} style={{...loginStyle.inputHead, justifyContent: 'center', minHeight: 40}}>
366
424
  <OText style={{ ...theme.labels.middle } as TextStyle}>{t('PASSWORD', 'Password')}</OText>
367
425
  </Pressable>
@@ -400,7 +458,7 @@ const LoginFormUI = (props: LoginParams) => {
400
458
  textStyle={{ color: 'white', ...theme.labels.middle } as TextStyle}
401
459
  imgRightSrc={null}
402
460
  isLoading={formState.loading}
403
- style={{ marginTop: 48, height: 40, shadowOpacity: 0 }}
461
+ style={{ marginTop: 28, height: 40, shadowOpacity: 0 }}
404
462
  />
405
463
  </FormInput>
406
464
  )}
@@ -413,36 +471,6 @@ const LoginFormUI = (props: LoginParams) => {
413
471
  </Pressable>
414
472
  )}
415
473
 
416
- {useLoginByCellphone &&
417
- loginTab === 'cellphone' &&
418
- configs && Object.keys(configs).length > 0 &&
419
- (configs?.twilio_service_enabled?.value === 'true' ||
420
- configs?.twilio_service_enabled?.value === '1') &&
421
- (
422
- <>
423
- <OrSeparator>
424
- <LineSeparator />
425
- <OText size={18} mRight={20} mLeft={20}>
426
- {t('OR', 'Or')}
427
- </OText>
428
- <LineSeparator />
429
- </OrSeparator>
430
-
431
- <ButtonsWrapper mBottom={20}>
432
- <OButton
433
- onClick={handleVerifyCodeClick}
434
- text={t('GET_VERIFY_CODE', 'Get Verify Code')}
435
- borderColor={theme.colors.primary}
436
- style={loginStyle.btnOutline}
437
- imgRightSrc={null}
438
- isLoading={isLoadingVerifyModal}
439
- indicatorColor={theme.colors.primary}
440
- />
441
- </ButtonsWrapper>
442
- </>
443
- )
444
- }
445
-
446
474
  {onNavigationRedirect && registerButtonText && (
447
475
  <ButtonsWrapper>
448
476
  <OButton
@@ -456,10 +484,11 @@ const LoginFormUI = (props: LoginParams) => {
456
484
  )}
457
485
  </FormSide>
458
486
  <OModal
459
- open={isModalVisible}
460
- onClose={() => setIsModalVisible(false)}
461
- overScreen
462
- >
487
+ open={isModalVisible}
488
+ onClose={() => setIsModalVisible(false)}
489
+ entireModal
490
+ title={t('VERIFY_PHONE', 'Verify Phone')}
491
+ >
463
492
  <VerifyPhone
464
493
  phone={phoneInputData.phone}
465
494
  verifyPhoneState={verifyPhoneState}
@@ -467,6 +496,7 @@ const LoginFormUI = (props: LoginParams) => {
467
496
  handleCheckPhoneCode={handleCheckPhoneCode}
468
497
  setCheckPhoneCodeState={setCheckPhoneCodeState}
469
498
  handleVerifyCodeClick={handleVerifyCodeClick}
499
+ onClose={() => setIsModalVisible(false)}
470
500
  />
471
501
  </OModal>
472
502
  <Spinner visible={isFBLoading} />
package/themes/doordash/src/components/LoginForm/styles.tsx CHANGED
@@ -2,7 +2,6 @@ import styled, { css } from 'styled-components/native';
2
2
 
3
3
  export const Container = styled.View`
4
4
  padding-bottom: 40px;
5
- padding-top: 24px;
6
5
  `
7
6
 
8
7
  export const FormSide = styled.View`
@@ -25,6 +24,7 @@ export const OTab = styled.View`
25
24
 
26
25
  export const LoginWith = styled.View`
27
26
  font-size: 14px;
27
+ padding-bottom: 10px;
28
28
  `;
29
29
 
30
30
  export const FormInput = styled.View`
@@ -56,7 +56,7 @@ export const OrSeparator = styled.View`
56
56
  flex-direction: row;
57
57
  justify-content: space-between;
58
58
  align-items: center;
59
- margin-bottom: 20px;
59
+ margin-bottom: 10px;
60
60
  `
61
61
 
62
62
  export const LineSeparator = styled.View`
@@ -69,10 +69,10 @@ export const SkeletonWrapper = styled.View`
69
69
  width: 90%;
70
70
  `
71
71
  export const InputWrapper = styled.View`
72
- flex-direction: row;
73
- align-items: flex-start;
74
- height: 40px;
75
- max-height: 40px;
76
- margin-vertical: 6px;
77
72
  justify-content: space-between;
73
+ flex-direction: row;
74
+ align-items: flex-start;
75
+ min-height: 40px;
76
+ max-height: 40px;
77
+ margin-vertical: 6px;
78
78
  `;
package/themes/doordash/src/components/PhoneInputNumber/index.tsx CHANGED
@@ -84,7 +84,7 @@ export const PhoneInputNumber = (props: PhoneInputParams) => {
84
84
  }, [userphoneNumber])
85
85
 
86
86
  return (
87
- <Wrapper>
87
+ <Wrapper style={props.wrapStyle}>
88
88
  <PhoneInput
89
89
  ref={phoneInput}
90
90
  defaultValue={userphoneNumber || defaultValue}
package/themes/doordash/src/components/PreviousOrders/index.tsx CHANGED
@@ -60,7 +60,7 @@ export const PreviousOrders = (props: PreviousOrdersParams) => {
60
60
  }
61
61
 
62
62
  const handleClickOrderReview = (order: any) => {
63
- onNavigationRedirect && onNavigationRedirect('ReviewOrder', { order: { id: order?.id, business_id: order?.business_id, logo: order.business?.logo } })
63
+ onNavigationRedirect && onNavigationRedirect('ReviewOrder', { order: { id: order?.id, business_id: order?.business_id, logo: order.business?.logo, products: order?.products } })
64
64
  }
65
65
 
66
66
  const handleReorderClick = (id: number) => {
package/themes/doordash/src/components/ProductForm/index.tsx CHANGED
@@ -8,7 +8,7 @@ import {
8
8
  } from 'ordering-components/native'
9
9
  import { ProductIngredient } from '../ProductIngredient'
10
10
  import { ProductOption } from '../ProductOption'
11
- import { View, TouchableOpacity, StyleSheet, Dimensions, ScrollView, I18nManager, TextStyle, Platform } from 'react-native'
11
+ import { View, TouchableOpacity, StyleSheet, Dimensions, ScrollView, I18nManager, TextStyle, Platform, KeyboardAvoidingView } from 'react-native'
12
12
  import {
13
13
  ProductHeader,
14
14
  WrapHeader,
@@ -137,7 +137,11 @@ export const ProductOptionsUI = (props: any) => {
137
137
  const saveErrors = orderState.loading || maxProductQuantity === 0 || Object.keys(errors).length > 0
138
138
 
139
139
  return (
140
- <>
140
+ <KeyboardAvoidingView
141
+ style={{ flex: 1 }}
142
+ behavior={Platform.OS ? 'padding' : 'height'}
143
+ enabled={Platform.OS === 'ios'}
144
+ >
141
145
  <ScrollView style={styles.mainContainer}>
142
146
  {!error && (
143
147
  <View style={{ paddingBottom: 80 }}>
@@ -286,7 +290,7 @@ export const ProductOptionsUI = (props: any) => {
286
290
  />
287
291
  </ProductComment>
288
292
  {productCart && !isSoldOut && maxProductQuantity > 0 && (
289
- <View style={{ paddingVertical: 4 }}>
293
+ <View style={{ paddingVertical: 4, marginBottom: 10 }}>
290
294
  <SectionTitle>
291
295
  <OText style={theme.labels.middle as TextStyle}>{t('PREFERENCES', 'Preferences')}</OText>
292
296
  </SectionTitle>
@@ -335,6 +339,7 @@ export const ProductOptionsUI = (props: any) => {
335
339
  textSub={`${orderState.loading ? '' : productCart.total ? parsePrice(productCart?.total) : ''}`}
336
340
  textStyle={{ color: saveErrors ? theme.colors.textSecondary : theme.colors.white, fontSize: 14, fontWeight: Platform.OS === 'ios' ? '600' : 'bold' }}
337
341
  style={{
342
+ bottom: 5,
338
343
  backgroundColor: saveErrors ? theme.colors.backgroundGray300 : theme.colors.primary,
339
344
  borderWidth: 1, shadowOpacity: 0, height: 40,
340
345
  borderColor: saveErrors ? theme.colors.backgroundGray300 : theme.colors.primary,
@@ -361,13 +366,13 @@ export const ProductOptionsUI = (props: any) => {
361
366
  text={isSoldOut || maxProductQuantity <= 0 ? t('SOLD_OUT', 'Sold out') : t('LOGIN_SIGNUP', 'Login / Sign Up')}
362
367
  imgRightSrc=''
363
368
  textStyle={{ color: theme.colors.primary, ...theme.labels.middle }}
364
- style={{ height: 40, borderWidth: 1, borderColor: theme.colors.primary, backgroundColor: theme.colors.white }}
369
+ style={{ bottom: 5, marginTop: 2, height: 40, borderWidth: 1, borderColor: theme.colors.primary, backgroundColor: theme.colors.white }}
365
370
  />
366
371
  )}
367
372
  </View>
368
373
  </ProductActions>
369
374
  )}
370
- </>
375
+ </KeyboardAvoidingView>
371
376
  )
372
377
  }
373
378
 
package/themes/doordash/src/types/index.tsx CHANGED
@@ -107,6 +107,7 @@ export interface PhoneInputParams {
107
107
  countryButtonStyle?: ViewStyle;
108
108
  textWrapStyle?: ViewStyle;
109
109
  renderDropImage?: any;
110
+ wrapStyle?: any;
110
111
  }
111
112
 
112
113
  export interface LanguageSelectorParams {
package/themes/instacart/src/components/Home/index.tsx CHANGED
@@ -57,6 +57,7 @@ export const Home = (props: any) => {
57
57
  const loginProps = {
58
58
  navigation,
59
59
  useLoginByCellphone: true,
60
+ useLoginByEmail: true,
60
61
  loginButtonText: t('LOGIN', 'Login'),
61
62
  loginButtonBackground: theme.colors.primary,
62
63
  forgotButtonText: t('FORGOT_YOUR_PASSWORD', 'Forgot your password?'),
package/themes/instacart/src/components/LoginForm/index.tsx CHANGED
@@ -14,7 +14,8 @@ import {
14
14
  } from 'ordering-components/native';
15
15
 
16
16
  import { FacebookLogin } from '../FacebookLogin';
17
- import { VerifyPhone } from '../VerifyPhone';
17
+ import { VerifyPhone } from '../../../../../src/components/VerifyPhone';
18
+ import { OModal } from '../../../../../src/components/shared';
18
19
 
19
20
  import {
20
21
  Container,
@@ -33,7 +34,7 @@ import {
33
34
  import { _removeStoreData } from '../../providers/StoreUtil';
34
35
  import NavBar from '../NavBar'
35
36
 
36
- import { OText, OButton, OInput, OModal } from '../shared';
37
+ import { OText, OButton, OInput } from '../shared';
37
38
  import { LoginParams } from '../../types';
38
39
  import { useTheme } from 'styled-components/native';
39
40
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -362,24 +363,23 @@ const LoginFormUI = (props: LoginParams) => {
362
363
  </OrSeparator>
363
364
 
364
365
  {useLoginByCellphone &&
365
- loginTab === 'cellphone' &&
366
- configs && Object.keys(configs).length > 0 &&
367
- (configs?.twilio_service_enabled?.value === 'true' ||
368
- configs?.twilio_service_enabled?.value === '1') &&
366
+ loginTab === 'cellphone' &&
367
+ configs && Object.keys(configs).length > 0 &&
368
+ (configs?.twilio_service_enabled?.value === 'true' ||
369
+ configs?.twilio_service_enabled?.value === '1') &&
370
+ configs?.twilio_module?.value &&
369
371
  (
370
- <>
371
- <ButtonsWrapper mBottom={20}>
372
- <OButton
373
- onClick={handleVerifyCodeClick}
374
- text={t('GET_VERIFY_CODE', 'Get Verify Code')}
375
- borderColor={theme.colors.primary}
376
- style={loginStyle.btnOutline}
377
- imgRightSrc={null}
378
- isLoading={isLoadingVerifyModal}
379
- indicatorColor={theme.colors.primary}
380
- />
381
- </ButtonsWrapper>
382
- </>
372
+ <ButtonsWrapper mBottom={20}>
373
+ <OButton
374
+ onClick={handleVerifyCodeClick}
375
+ text={t('GET_VERIFY_CODE', 'Get Verify Code')}
376
+ borderColor={theme.colors.primary}
377
+ style={loginStyle.btnOutline}
378
+ imgRightSrc={null}
379
+ isLoading={isLoadingVerifyModal}
380
+ indicatorColor={theme.colors.primary}
381
+ />
382
+ </ButtonsWrapper>
383
383
  )
384
384
  }
385
385
 
@@ -417,6 +417,8 @@ const LoginFormUI = (props: LoginParams) => {
417
417
  <OModal
418
418
  open={isModalVisible}
419
419
  onClose={() => setIsModalVisible(false)}
420
+ entireModal
421
+ title={t('VERIFY_PHONE', 'Verify Phone')}
420
422
  >
421
423
  <VerifyPhone
422
424
  phone={phoneInputData.phone}
@@ -425,6 +427,7 @@ const LoginFormUI = (props: LoginParams) => {
425
427
  handleCheckPhoneCode={handleCheckPhoneCode}
426
428
  setCheckPhoneCodeState={setCheckPhoneCodeState}
427
429
  handleVerifyCodeClick={handleVerifyCodeClick}
430
+ onClose={() => setIsModalVisible(false)}
428
431
  />
429
432
  </OModal>
430
433
  <Spinner visible={isFBLoading} />
package/themes/original/src/components/BusinessMenuList/index.tsx CHANGED
@@ -81,7 +81,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
81
81
  dropdownStyle={{
82
82
  borderRadius: 8,
83
83
  borderColor: theme.colors.lightGray,
84
- marginTop: 5,
84
+ marginTop: -15,
85
85
  maxHeight: 160
86
86
  }}
87
87
  rowStyle={{
package/themes/original/src/components/BusinessPreorder/index.tsx CHANGED
@@ -335,7 +335,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
335
335
  dropdownStyle={{
336
336
  borderRadius: 8,
337
337
  borderColor: theme.colors.lightGray,
338
- marginTop: 5
338
+ marginTop: -15
339
339
  }}
340
340
  rowStyle={{
341
341
  borderBottomColor: theme.colors.backgroundGray100,
package/themes/original/src/components/LoginForm/index.tsx CHANGED
@@ -15,7 +15,9 @@ import {
15
15
  } from 'ordering-components/native';
16
16
  import { useTheme } from 'styled-components/native';
17
17
  import { FacebookLogin } from '../FacebookLogin';
18
- import { VerifyPhone } from '../VerifyPhone';
18
+ import { VerifyPhone } from '../../../../../src/components/VerifyPhone';
19
+ import { OModal } from '../../../../../src/components/shared';
20
+
19
21
 
20
22
  import {
21
23
  Container,
@@ -34,7 +36,7 @@ import {
34
36
 
35
37
  import NavBar from '../NavBar';
36
38
 
37
- import { OText, OButton, OInput, OModal, OIcon } from '../shared';
39
+ import { OText, OButton, OInput, OIcon } from '../shared';
38
40
  import { LoginParams } from '../../types';
39
41
  import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
40
42
  import { GoogleLogin } from '../GoogleLogin';
@@ -406,11 +408,11 @@ const LoginFormUI = (props: LoginParams) => {
406
408
  )}
407
409
 
408
410
  {useLoginByCellphone &&
409
- loginTab === 'cellphone' &&
410
- configs &&
411
- Object.keys(configs).length > 0 &&
412
- (configs?.twilio_service_enabled?.value === 'true' ||
413
- configs?.twilio_service_enabled?.value === '1') && (
411
+ loginTab === 'cellphone' &&
412
+ configs && Object.keys(configs).length > 0 &&
413
+ (configs?.twilio_service_enabled?.value === 'true' ||
414
+ configs?.twilio_service_enabled?.value === '1') &&
415
+ configs?.twilio_module?.value && (
414
416
  <>
415
417
  <OrSeparator>
416
418
  <LineSeparator />
@@ -515,7 +517,12 @@ const LoginFormUI = (props: LoginParams) => {
515
517
  </ButtonsWrapper>
516
518
  )} */}
517
519
  </FormSide>
518
- <OModal open={isModalVisible} onClose={() => setIsModalVisible(false)}>
520
+ <OModal
521
+ open={isModalVisible}
522
+ onClose={() => setIsModalVisible(false)}
523
+ entireModal
524
+ title={t('VERIFY_PHONE', 'Verify Phone')}
525
+ >
519
526
  <VerifyPhone
520
527
  phone={phoneInputData.phone}
521
528
  verifyPhoneState={verifyPhoneState}
@@ -523,6 +530,7 @@ const LoginFormUI = (props: LoginParams) => {
523
530
  handleCheckPhoneCode={handleCheckPhoneCode}
524
531
  setCheckPhoneCodeState={setCheckPhoneCodeState}
525
532
  handleVerifyCodeClick={handleVerifyCodeClick}
533
+ onClose={() => setIsModalVisible(false)}
526
534
  />
527
535
  </OModal>
528
536
  <Spinner visible={isFBLoading} />
package/themes/original/src/components/Messages/index.tsx CHANGED
@@ -7,7 +7,7 @@ import { USER_TYPE } from '../../config/constants'
7
7
  import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
8
8
  import { OIcon, OIconButton, OText, OButton } from '../shared'
9
9
  import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard } from 'react-native'
10
- import { Header, TitleHeader, Wrapper, QuickMessageContainer, ProfileMessageHeader } from './styles'
10
+ import { Header, TitleHeader, Wrapper, QuickMessageContainer, ProfileMessageHeader, MessageTypeItem } from './styles'
11
11
  import { MessagesParams } from '../../types'
12
12
  import { useWindowDimensions } from 'react-native'
13
13
  import { useSafeAreaInsets } from 'react-native-safe-area-context'
package/themes/uber-eats/src/components/LoginForm/index.tsx CHANGED
@@ -15,7 +15,8 @@ import {
15
15
  } from 'ordering-components/native';
16
16
 
17
17
  import { FacebookLogin } from '../FacebookLogin';
18
- import { VerifyPhone } from '../VerifyPhone';
18
+ import { VerifyPhone } from '../../../../../src/components/VerifyPhone';
19
+ import { OModal } from '../../../../../src/components/shared';
19
20
 
20
21
  import {
21
22
  Container,
@@ -33,7 +34,7 @@ import {
33
34
  import { _removeStoreData } from '../../providers/StoreUtil';
34
35
  import NavBar from '../NavBar'
35
36
 
36
- import { OText, OButton, OInput, OModal } from '../shared';
37
+ import { OText, OButton, OInput } from '../shared';
37
38
  import { LoginParams } from '../../types';
38
39
  import { useTheme } from 'styled-components/native';
39
40
 
@@ -363,6 +364,7 @@ const LoginFormUI = (props: LoginParams) => {
363
364
  configs && Object.keys(configs).length > 0 &&
364
365
  (configs?.twilio_service_enabled?.value === 'true' ||
365
366
  configs?.twilio_service_enabled?.value === '1') &&
367
+ configs?.twilio_module?.value &&
366
368
  (
367
369
  <>
368
370
  <OrSeparator>
@@ -409,6 +411,8 @@ const LoginFormUI = (props: LoginParams) => {
409
411
  <OModal
410
412
  open={isModalVisible}
411
413
  onClose={() => setIsModalVisible(false)}
414
+ entireModal
415
+ title={t('VERIFY_PHONE', 'Verify Phone')}
412
416
  >
413
417
  <VerifyPhone
414
418
  phone={phoneInputData.phone}
@@ -417,6 +421,7 @@ const LoginFormUI = (props: LoginParams) => {
417
421
  handleCheckPhoneCode={handleCheckPhoneCode}
418
422
  setCheckPhoneCodeState={setCheckPhoneCodeState}
419
423
  handleVerifyCodeClick={handleVerifyCodeClick}
424
+ onClose={() => setIsModalVisible(false)}
420
425
  />
421
426
  </OModal>
422
427
  <Spinner visible={isFBLoading} />