ordering-ui-react-native 0.13.1 → 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 (10) hide show
  1. package/package.json +1 -1
  2. package/themes/doordash/src/components/Home/index.tsx +4 -3
  3. package/themes/doordash/src/components/LoginForm/index.tsx +89 -59
  4. package/themes/doordash/src/components/LoginForm/styles.tsx +7 -7
  5. package/themes/doordash/src/components/PhoneInputNumber/index.tsx +1 -1
  6. package/themes/doordash/src/types/index.tsx +1 -0
  7. package/themes/instacart/src/components/Home/index.tsx +1 -0
  8. package/themes/instacart/src/components/LoginForm/index.tsx +22 -19
  9. package/themes/original/src/components/LoginForm/index.tsx +16 -8
  10. 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.13.01",
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/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/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/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/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} />