ordering-ui-react-native 0.12.43 → 0.12.44

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.12.43",
3
+ "version": "0.12.44",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
@@ -0,0 +1,145 @@
1
+ import React, { useEffect } from 'react';
2
+ import { Platform, StyleSheet } from 'react-native';
3
+ import { appleAuthAndroid, appleAuth } from '@invertase/react-native-apple-authentication';
4
+ import { useConfig, useApi, useLanguage } from 'ordering-components/native'
5
+ import uuid from 'react-native-uuid';
6
+ import Icon from 'react-native-vector-icons/FontAwesome5';
7
+
8
+ import { Container, AppleButton } from './styles';
9
+ import { useTheme } from 'styled-components/native';
10
+ import { OText } from '../shared';
11
+ import { AppleLoginParams } from '../../types';
12
+
13
+ export const AppleLogin = (props : AppleLoginParams) => {
14
+
15
+ const {
16
+ notificationState,
17
+ handleErrors,
18
+ handleLoading,
19
+ handleSuccessApple,
20
+ } = props
21
+
22
+ const [{ configs }] = useConfig()
23
+ const [ordering] = useApi()
24
+ const [, t] = useLanguage()
25
+ const theme = useTheme()
26
+
27
+ const buttonText = t('LOGIN_WITH_APPLE', 'Login with Apple');
28
+
29
+ const onAppleButtonPress = async () => {
30
+ const rawNonce: any = uuid.v4()
31
+ const state: any = uuid.v4()
32
+
33
+ if (Platform.OS === 'ios') {
34
+ try {
35
+ const appleAuthRequestResponse = await appleAuth.performRequest({
36
+ requestedOperation: appleAuth.Operation.LOGIN,
37
+ requestedScopes: [appleAuth.Scope.EMAIL, appleAuth.Scope.FULL_NAME],
38
+ nonce: rawNonce,
39
+ state
40
+ });
41
+ console.log('appleAuthRequestResponse', appleAuthRequestResponse);
42
+
43
+ const {
44
+ user,
45
+ email,
46
+ identityToken,
47
+ authorizationCode,
48
+ } = appleAuthRequestResponse
49
+
50
+ if (identityToken && authorizationCode) {
51
+ console.log('auth code: ', authorizationCode)
52
+ handleLoginApple(authorizationCode)
53
+ console.warn(`Apple Authentication Completed, ${user}, ${email}`);
54
+ } else {
55
+ handleErrors && handleErrors(t('ERROR_LOGIN_APPLE', 'Error login with apple'))
56
+ }
57
+
58
+ } catch (error : any) {
59
+ handleErrors && handleErrors(error.message)
60
+ }
61
+ } else {
62
+ try {
63
+ appleAuthAndroid.configure({
64
+ clientId: configs?.apple_login_client_id?.value,
65
+ redirectUri: 'https://example-app.com/redirect',
66
+ responseType: appleAuthAndroid.ResponseType.ALL,
67
+ scope: appleAuthAndroid.Scope.ALL,
68
+ nonce: rawNonce,
69
+ state,
70
+ });
71
+ const { code } = await appleAuthAndroid.signIn();
72
+ handleLoginApple(code)
73
+ } catch (error : any) {
74
+ handleErrors && handleErrors(error?.message)
75
+ }
76
+ }
77
+ }
78
+ const handleLoginApple = async (code: string) => {
79
+ const body: any = {
80
+ code,
81
+ platform: Platform.OS === 'ios' && 'ios'
82
+ }
83
+ if (notificationState?.notification_token) {
84
+ body.notification_token = notificationState.notification_token
85
+ body.notification_app = notificationState.notification_app
86
+ }
87
+
88
+ try {
89
+ handleLoading && handleLoading(true)
90
+ const response: any = await fetch(`${ordering.root}/auth/apple`, {
91
+ method: 'POST',
92
+ headers: { 'Content-Type': 'application/json' },
93
+ body: JSON.stringify(body)
94
+ })
95
+ const { error, result } = await response.json()
96
+ handleLoading && handleLoading(false)
97
+ if (!error && result) {
98
+ handleSuccessApple && handleSuccessApple(result)
99
+ } else {
100
+ handleErrors && handleErrors(result || t('ERROR_LOGIN_AUTH_APPLE', 'Error login auth with apple'))
101
+ }
102
+ } catch (error : any) {
103
+ handleLoading && handleLoading(false)
104
+ handleErrors && handleErrors(error?.message)
105
+ }
106
+ }
107
+
108
+ useEffect(() => {
109
+ if (Platform.OS !== 'ios' && !appleAuth.isSupported) return
110
+ return appleAuth.onCredentialRevoked(async () => {
111
+ handleErrors && handleErrors(t('USER_CREDENTIALS_REVOKED', 'User credentials revoked'))
112
+ });
113
+ }, []);
114
+
115
+ return (
116
+ <Container>
117
+ <AppleButton
118
+ onPress={onAppleButtonPress}
119
+ >
120
+ <Icon
121
+ name="apple"
122
+ size={34}
123
+ color={theme.colors.black}
124
+ style={style.appleBtn}
125
+ />
126
+ <OText style={style.textBtn}>
127
+ {buttonText}
128
+ </OText>
129
+ </AppleButton>
130
+ </Container>
131
+ );
132
+ }
133
+
134
+ const style = StyleSheet.create({
135
+ appleBtn: {
136
+ position: 'absolute',
137
+ left: 0,
138
+ marginHorizontal: 10
139
+ },
140
+ textBtn: {
141
+ fontSize: 16,
142
+ color: '#000000',
143
+ marginLeft: 20
144
+ }
145
+ })
@@ -0,0 +1,22 @@
1
+ import styled from 'styled-components/native'
2
+
3
+ export const Container = styled.View``
4
+
5
+ export const AppleButton = styled.TouchableOpacity`
6
+ background-color: #EFEFEF;
7
+ border-color: #EFEFEF;
8
+ border-radius: 30px;
9
+ font-size: 16px;
10
+ padding: 15px 30px;
11
+ font-size: 16px;
12
+ font-weight: 400;
13
+ text-align: center;
14
+ width: 100%;
15
+ display: flex;
16
+ flex-direction: row;
17
+ align-items: center;
18
+ justify-content: center;
19
+ position: relative;
20
+ height: 52px;
21
+ margin-top: 10px;
22
+ `
@@ -101,7 +101,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
101
101
  style={{ paddingBottom: 0 }}
102
102
  />
103
103
  )}
104
- {auth && (
104
+ {auth && user?.name && (
105
105
  <WelcomeTitle>
106
106
  <View style={styles.welcome}>
107
107
  <OText style={{ fontWeight: 'bold' }} size={28} >
@@ -37,6 +37,7 @@ import NavBar from '../NavBar'
37
37
  import { OText, OButton, OInput, OModal } from '../shared';
38
38
  import { LoginParams } from '../../types';
39
39
  import { useTheme } from 'styled-components/native';
40
+ import { AppleLogin } from '../AppleLogin'
40
41
 
41
42
  const LoginFormUI = (props: LoginParams) => {
42
43
  const {
@@ -80,7 +81,7 @@ const LoginFormUI = (props: LoginParams) => {
80
81
  const [passwordSee, setPasswordSee] = useState(false);
81
82
  const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
82
83
  const [isModalVisible, setIsModalVisible] = useState(false);
83
- const [isFBLoading, setIsFBLoading] = useState(false);
84
+ const [isLoadingSocialButton, setIsLoadingSocialButton] = useState(false);
84
85
  const [phoneInputData, setPhoneInputData] = useState({
85
86
  error: '',
86
87
  phone: {
@@ -91,6 +92,10 @@ const LoginFormUI = (props: LoginParams) => {
91
92
 
92
93
  const inputRef = useRef<any>({})
93
94
 
95
+ const anySocialButtonActivated = ((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
96
+ (configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) ||
97
+ (configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null)
98
+
94
99
  const handleChangeTab = (val: string) => {
95
100
  props.handleChangeTab(val);
96
101
  setPasswordSee(false);
@@ -133,7 +138,15 @@ const LoginFormUI = (props: LoginParams) => {
133
138
  })
134
139
  }
135
140
 
136
- const handleChangeInputEmail = (value : string, onChange : any) => {
141
+ const handleSuccessApple = (user: any) => {
142
+ _removeStoreData('isGuestUser')
143
+ login({
144
+ user,
145
+ token: user?.session?.access_token
146
+ })
147
+ }
148
+
149
+ const handleChangeInputEmail = (value: string, onChange: any) => {
137
150
  onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
138
151
  }
139
152
 
@@ -353,10 +366,7 @@ const LoginFormUI = (props: LoginParams) => {
353
366
  )
354
367
  }
355
368
 
356
- {configs && Object.keys(configs).length > 0 && (
357
- (((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
358
- (configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null)) &&
359
- (
369
+ {configs && Object.keys(configs).length > 0 && anySocialButtonActivated && (
360
370
  <ButtonsWrapper>
361
371
  <OText size={18} mBottom={10} color={theme.colors.disabled}>
362
372
  {t('SELECT_AN_OPTION_TO_LOGIN', 'Select an option to login')}
@@ -364,26 +374,33 @@ const LoginFormUI = (props: LoginParams) => {
364
374
  <SocialButtons>
365
375
  {(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
366
376
  configs?.facebook_id?.value && (
367
- <FacebookLogin
368
- notificationState={notificationState}
369
- handleErrors={(err: any) => showToast(ToastType.Error, err)}
370
- handleLoading={(val: boolean) => setIsFBLoading(val)}
371
- handleSuccessFacebookLogin={handleSuccessFacebook}
372
- />
373
- )}
377
+ <FacebookLogin
378
+ notificationState={notificationState}
379
+ handleErrors={(err: any) => showToast(ToastType.Error, err)}
380
+ handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
381
+ handleSuccessFacebookLogin={handleSuccessFacebook}
382
+ />
383
+ )}
374
384
  {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
375
385
  <GoogleLogin
376
386
  notificationState={notificationState}
377
387
  webClientId={configs?.google_login_client_id?.value}
378
388
  handleErrors={(err: any) => showToast(ToastType.Error, err)}
379
- handleLoading={(val: boolean) => setIsFBLoading(val)}
389
+ handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
380
390
  handleSuccessGoogleLogin={handleSuccessFacebook}
381
391
  />
382
392
  )}
393
+ {(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && (
394
+ <AppleLogin
395
+ notificationState={notificationState}
396
+ handleErrors={(err: any) => showToast(ToastType.Error, err)}
397
+ handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
398
+ handleSuccessApple={handleSuccessApple}
399
+ />
400
+ )}
383
401
  </SocialButtons>
384
402
  </ButtonsWrapper>
385
- )
386
- )}
403
+ )}
387
404
 
388
405
  {onNavigationRedirect && registerButtonText && (
389
406
  <ButtonsWrapper>
@@ -411,7 +428,7 @@ const LoginFormUI = (props: LoginParams) => {
411
428
  handleVerifyCodeClick={handleVerifyCodeClick}
412
429
  />
413
430
  </OModal>
414
- <Spinner visible={isFBLoading} />
431
+ <Spinner visible={isLoadingSocialButton} />
415
432
  </Container>
416
433
  );
417
434
  };
@@ -34,6 +34,7 @@ import CheckBox from '@react-native-community/checkbox';
34
34
  import { SignupParams } from '../../types';
35
35
  import { sortInputFields } from '../../utils';
36
36
  import { useTheme } from 'styled-components/native';
37
+ import { AppleLogin } from '../AppleLogin';
37
38
 
38
39
  const notValidationFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'address_notes']
39
40
 
@@ -97,7 +98,7 @@ const SignupFormUI = (props: SignupParams) => {
97
98
  const [isModalVisible, setIsModalVisible] = useState(false);
98
99
  const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
99
100
  const [signupTab, setSignupTab] = useState(useSignupByCellphone && !useSignupByEmail ? 'cellphone' : 'email')
100
- const [isFBLoading, setIsFBLoading] = useState(false)
101
+ const [isLoadingSocialButton, setIsLoadingSocialButton] = useState(false);
101
102
  const [phoneInputData, setPhoneInputData] = useState({
102
103
  error: '',
103
104
  phone: {
@@ -114,8 +115,12 @@ const SignupFormUI = (props: SignupParams) => {
114
115
  const phoneRef = useRef<any>(null)
115
116
  const passwordRef = useRef<any>(null)
116
117
 
117
- const handleRefs = (ref : any, code : string) => {
118
- switch(code){
118
+ const anySocialButtonActivated = ((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
119
+ (configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) ||
120
+ (configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null)
121
+
122
+ const handleRefs = (ref: any, code: string) => {
123
+ switch (code) {
119
124
  case 'name': {
120
125
  nameRef.current = ref
121
126
  break
@@ -138,8 +143,8 @@ const SignupFormUI = (props: SignupParams) => {
138
143
  }
139
144
  }
140
145
 
141
- const handleFocusRef = (code : string) => {
142
- switch(code) {
146
+ const handleFocusRef = (code: string) => {
147
+ switch (code) {
143
148
  case 'name': {
144
149
  nameRef?.current?.focus()
145
150
  break
@@ -163,8 +168,8 @@ const SignupFormUI = (props: SignupParams) => {
163
168
  }
164
169
  }
165
170
 
166
- const getNextFieldCode = (index : number) => {
167
- const fields = sortInputFields({ values: validationFields?.fields?.checkout })?.filter((field : any) => !notValidationFields.includes(field.code) && showField(field.code))
171
+ const getNextFieldCode = (index: number) => {
172
+ const fields = sortInputFields({ values: validationFields?.fields?.checkout })?.filter((field: any) => !notValidationFields.includes(field.code) && showField(field.code))
168
173
  return fields[index + 1]?.code
169
174
  }
170
175
 
@@ -176,6 +181,14 @@ const SignupFormUI = (props: SignupParams) => {
176
181
  })
177
182
  }
178
183
 
184
+ const handleSuccessApple = (user: any) => {
185
+ _removeStoreData('isGuestUser')
186
+ login({
187
+ user,
188
+ token: user?.session?.access_token
189
+ })
190
+ }
191
+
179
192
  const handleChangeTab = (val: string) => {
180
193
  setSignupTab(val);
181
194
  setPasswordSee(false);
@@ -347,7 +360,7 @@ const SignupFormUI = (props: SignupParams) => {
347
360
  <FormInput>
348
361
  {!(useChekoutFileds && validationFields?.loading && validationFields?.fields?.checkout) ? (
349
362
  <>
350
- {sortInputFields({ values: validationFields?.fields?.checkout }).map((field: any, i : number) =>
363
+ {sortInputFields({ values: validationFields?.fields?.checkout }).map((field: any, i: number) =>
351
364
  !notValidationFields.includes(field.code) &&
352
365
  (
353
366
  showField && showField(field.code) && (
@@ -367,7 +380,7 @@ const SignupFormUI = (props: SignupParams) => {
367
380
  autoCompleteType={field.code === 'email' ? 'email' : 'off'}
368
381
  returnKeyType='next'
369
382
  blurOnSubmit={false}
370
- forwardRef={(ref : any) => handleRefs(ref,field.code)}
383
+ forwardRef={(ref: any) => handleRefs(ref, field.code)}
371
384
  onSubmitEditing={() => field.code === 'email' ? phoneRef?.current?.focus?.() : handleFocusRef(getNextFieldCode(i))}
372
385
  />
373
386
  )}
@@ -462,17 +475,17 @@ const SignupFormUI = (props: SignupParams) => {
462
475
  }}
463
476
  defaultValue={false}
464
477
  />
465
- <ScrollView
466
- horizontal
467
- showsVerticalScrollIndicator={false}
468
- showsHorizontalScrollIndicator={false}
478
+ <ScrollView
479
+ horizontal
480
+ showsVerticalScrollIndicator={false}
481
+ showsHorizontalScrollIndicator={false}
469
482
  >
470
- <OText size={16} style={{ paddingHorizontal: 5 }}>{t('TERMS_AND_CONDITIONS_TEXT', 'I’m agree with')}</OText>
471
- <TouchableOpacity onPress={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}>
472
- <OText size={16} color={theme.colors.primary}>
473
- {t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
474
- </OText>
475
- </TouchableOpacity>
483
+ <OText size={16} style={{ paddingHorizontal: 5 }}>{t('TERMS_AND_CONDITIONS_TEXT', 'I’m agree with')}</OText>
484
+ <TouchableOpacity onPress={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}>
485
+ <OText size={16} color={theme.colors.primary}>
486
+ {t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
487
+ </OText>
488
+ </TouchableOpacity>
476
489
  </ScrollView>
477
490
  </View>
478
491
  )}
@@ -515,10 +528,7 @@ const SignupFormUI = (props: SignupParams) => {
515
528
  )
516
529
  }
517
530
 
518
- {configs && Object.keys(configs).length > 0 && (
519
- (((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value) ||
520
- (configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null)) &&
521
- (
531
+ {configs && Object.keys(configs).length > 0 && anySocialButtonActivated && (
522
532
  <ButtonsSection>
523
533
  <OText size={18} mBottom={10} color={theme.colors.disabled}>
524
534
  {t('SELECT_AN_OPTION_TO_LOGIN', 'Select an option to login')}
@@ -526,27 +536,34 @@ const SignupFormUI = (props: SignupParams) => {
526
536
  <SocialButtons>
527
537
  {(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
528
538
  configs?.facebook_id?.value && (
529
- <FacebookLogin
530
- notificationState={notificationState}
531
- handleErrors={(err: any) => showToast(ToastType.Error, err)}
532
- handleLoading={(val: boolean) => setIsFBLoading(val)}
533
- handleSuccessFacebookLogin={handleSuccessFacebook}
534
- />
535
- )}
539
+ <FacebookLogin
540
+ notificationState={notificationState}
541
+ handleErrors={(err: any) => showToast(ToastType.Error, err)}
542
+ handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
543
+ handleSuccessFacebookLogin={handleSuccessFacebook}
544
+ />
545
+ )}
536
546
  {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && (
537
547
  <GoogleLogin
538
548
  notificationState={notificationState}
539
549
  webClientId={configs?.google_login_client_id?.value}
540
550
  handleErrors={(err: any) => showToast(ToastType.Error, err)}
541
- handleLoading={(val: boolean) => setIsFBLoading(val)}
551
+ handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
542
552
  handleSuccessGoogleLogin={handleSuccessFacebook}
543
553
  />
544
554
  )}
555
+ {(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && (
556
+ <AppleLogin
557
+ notificationState={notificationState}
558
+ handleErrors={(err: any) => showToast(ToastType.Error, err)}
559
+ handleLoading={(val: boolean) => setIsLoadingSocialButton(val)}
560
+ handleSuccessApple={handleSuccessApple}
561
+ />
562
+ )}
545
563
  </SocialButtons>
546
564
  </ButtonsSection>
547
- )
548
- )}
549
- </FormSide >
565
+ )}
566
+ </FormSide>
550
567
  <OModal
551
568
  open={isModalVisible}
552
569
  onClose={() => setIsModalVisible(false)}
@@ -561,7 +578,7 @@ const SignupFormUI = (props: SignupParams) => {
561
578
  handleVerifyCodeClick={onSubmit}
562
579
  />
563
580
  </OModal>
564
- <Spinner visible={formState.loading || isFBLoading} />
581
+ <Spinner visible={formState.loading || isLoadingSocialButton} />
565
582
  </View >
566
583
  );
567
584
  };
@@ -23,9 +23,7 @@ export const UserFormDetailsUI = (props: any) => {
23
23
  handleChangeInput,
24
24
  handleButtonUpdateClick,
25
25
  phoneUpdate,
26
- hideUpdateButton,
27
26
  handleCancelEdit,
28
- toggleIsEdit,
29
27
  isCheckout
30
28
  } = props
31
29
 
@@ -39,7 +39,7 @@ const BottomNavigator = () => {
39
39
  : {height: 40, position: 'relative', bottom: 15}
40
40
  return (
41
41
  <Tab.Navigator
42
- initialRouteName='BusinessList'
42
+ initialRouteName="BusinessList"
43
43
  activeColor={theme.colors.primary}
44
44
  barStyle={{ backgroundColor: theme.colors.white, ...androidStyles }}
45
45
  labeled={false}
@@ -430,6 +430,12 @@ export interface GoogleMapsParams {
430
430
  handleToggleMap?: () => void
431
431
  }
432
432
 
433
+ export interface AppleLoginParams {
434
+ handleErrors?: (error: string) => {},
435
+ handleLoading?: (val: boolean) => void,
436
+ handleSuccessApple?: (result: any) => void,
437
+ notificationState?: any,
438
+ }
433
439
  export interface ShareComponentParams {
434
440
  orderId?: number;
435
441
  hashkey?: string;