ordering-ui-react-native 0.25.1 → 0.26.0

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 (5) hide show
  1. package/package.json +1 -1
  2. package/themes/original/src/components/AddressForm/index.tsx +20 -0
  3. package/themes/original/src/components/LoginForm/Otp/index.tsx +1 -1
  4. package/themes/original/src/components/LoginForm/index.tsx +883 -858
  5. package/themes/original/src/components/SignupForm/index.tsx +966 -943
package/themes/original/src/components/SignupForm/index.tsx CHANGED
@@ -11,24 +11,24 @@ import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
11
11
  import ReactNativeHapticFeedback from "react-native-haptic-feedback";
12
12
 
13
13
  import {
14
- SignupForm as SignUpController,
15
- useLanguage,
16
- useConfig,
17
- useSession,
18
- ToastType,
19
- useToast,
14
+ SignupForm as SignUpController,
15
+ useLanguage,
16
+ useConfig,
17
+ useSession,
18
+ ToastType,
19
+ useToast,
20
20
  } from 'ordering-components/native';
21
21
  import { useTheme } from 'styled-components/native';
22
22
  import { FormSide, FormInput, SocialButtons } from './styles';
23
23
  import { Otp } from '../LoginForm/Otp'
24
24
 
25
25
  import {
26
- ButtonsWrapper,
27
- LoginWith as SignupWith,
28
- TabBtn,
29
- OTab,
30
- OTabs,
31
- RecaptchaButton
26
+ ButtonsWrapper,
27
+ LoginWith as SignupWith,
28
+ TabBtn,
29
+ OTab,
30
+ OTabs,
31
+ RecaptchaButton
32
32
  } from '../LoginForm/styles';
33
33
 
34
34
  import NavBar from '../NavBar';
@@ -41,984 +41,1007 @@ import { GoogleLogin } from '../GoogleLogin';
41
41
  import { AppleLogin } from '../AppleLogin';
42
42
 
43
43
  const notValidationFields = [
44
- 'coupon',
45
- 'driver_tip',
46
- 'mobile_phone',
47
- 'address',
48
- 'address_notes',
44
+ 'coupon',
45
+ 'driver_tip',
46
+ 'mobile_phone',
47
+ 'address',
48
+ 'address_notes',
49
49
  ];
50
50
 
51
51
  const SignupFormUI = (props: SignupParams) => {
52
- const {
53
- navigation,
54
- loginButtonText,
55
- signupButtonText,
56
- onNavigationRedirect,
57
- formState,
58
- validationFields,
59
- showField,
60
- isRequiredField,
61
- useChekoutFileds,
62
- useSignupByEmail,
63
- useSignupByCellphone,
64
- handleSuccessSignup,
65
- handleButtonSignupClick,
66
- verifyPhoneState,
67
- checkPhoneCodeState,
68
- setCheckPhoneCodeState,
69
- handleSendVerifyCode,
70
- handleCheckPhoneCode,
71
- notificationState,
72
- handleChangePromotions,
73
- enableReCaptcha,
74
- handleReCaptcha,
75
- generateOtpCode,
76
- numOtpInputs,
77
- setWillVerifyOtpState,
78
- handleChangeInput,
79
- willVerifyOtpState,
80
- setOtpState,
81
- setSignUpTab,
82
- signUpTab,
83
- useSignUpFullDetails,
84
- useSignUpOtpEmail,
85
- useSignUpOtpCellphone,
86
- isGuest,
87
- setCellphoneStartZero
88
- } = props;
52
+ const {
53
+ navigation,
54
+ loginButtonText,
55
+ signupButtonText,
56
+ onNavigationRedirect,
57
+ formState,
58
+ validationFields,
59
+ showField,
60
+ isRequiredField,
61
+ useChekoutFileds,
62
+ useSignupByEmail,
63
+ useSignupByCellphone,
64
+ handleSuccessSignup,
65
+ handleButtonSignupClick,
66
+ verifyPhoneState,
67
+ checkPhoneCodeState,
68
+ setCheckPhoneCodeState,
69
+ handleSendVerifyCode,
70
+ handleCheckPhoneCode,
71
+ notificationState,
72
+ handleChangePromotions,
73
+ enableReCaptcha,
74
+ handleReCaptcha,
75
+ generateOtpCode,
76
+ numOtpInputs,
77
+ setWillVerifyOtpState,
78
+ handleChangeInput,
79
+ willVerifyOtpState,
80
+ setOtpState,
81
+ setSignUpTab,
82
+ signUpTab,
83
+ useSignUpFullDetails,
84
+ useSignUpOtpEmail,
85
+ useSignUpOtpCellphone,
86
+ useSignUpOtpWhatsapp,
87
+ isGuest,
88
+ setCellphoneStartZero
89
+ } = props;
89
90
 
90
- const theme = useTheme();
91
+ const theme = useTheme();
91
92
 
92
- const style = StyleSheet.create({
93
- btnOutline: {
94
- backgroundColor: '#FFF',
95
- color: theme.colors.primary,
96
- },
97
- inputStyle: {
98
- marginBottom: 20,
99
- borderWidth: 1,
100
- borderRadius: 7.6,
101
- },
102
- wrappText: {
103
- display: 'flex',
104
- flexDirection: 'row',
105
- justifyContent: 'space-between',
106
- marginBottom: 30,
107
- },
108
- line: {
109
- height: 1,
110
- backgroundColor: theme.colors.border,
111
- flexGrow: 1,
112
- marginBottom: 7,
113
- },
114
- checkBoxStyle: {
115
- width: 25,
116
- height: 25,
117
- }
118
- });
93
+ const style = StyleSheet.create({
94
+ btnOutline: {
95
+ backgroundColor: '#FFF',
96
+ color: theme.colors.primary,
97
+ },
98
+ inputStyle: {
99
+ marginBottom: 20,
100
+ borderWidth: 1,
101
+ borderRadius: 7.6,
102
+ },
103
+ wrappText: {
104
+ display: 'flex',
105
+ flexDirection: 'row',
106
+ justifyContent: 'space-between',
107
+ marginBottom: 30,
108
+ },
109
+ line: {
110
+ height: 1,
111
+ backgroundColor: theme.colors.border,
112
+ flexGrow: 1,
113
+ marginBottom: 7,
114
+ },
115
+ checkBoxStyle: {
116
+ width: 25,
117
+ height: 25,
118
+ }
119
+ });
119
120
 
120
- const [, { showToast }] = useToast();
121
- const [, t] = useLanguage();
122
- const [, { login }] = useSession();
123
- const [{ configs }] = useConfig();
124
- const { control, handleSubmit, clearErrors, errors, register, unregister, setValue } = useForm();
121
+ const [, { showToast }] = useToast();
122
+ const [, t] = useLanguage();
123
+ const [, { login }] = useSession();
124
+ const [{ configs }] = useConfig();
125
+ const { control, handleSubmit, clearErrors, errors, register, unregister, setValue } = useForm();
125
126
 
126
- const [passwordSee, setPasswordSee] = useState(false);
127
- const [formValues, setFormValues] = useState(null);
128
- const [isModalVisible, setIsModalVisible] = useState(false);
129
- const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
130
- const [isFBLoading, setIsFBLoading] = useState(false);
131
- const [phoneInputData, setPhoneInputData] = useState({
132
- error: '',
133
- phone: {
134
- country_phone_code: null,
135
- cellphone: null,
136
- country_code: null
137
- },
138
- });
139
- const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
140
- const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
141
- const [recaptchaVerified, setRecaptchaVerified] = useState(false)
142
- const [tabLayouts, setTabLayouts] = useState<any>({})
143
- const [isCheckingCode, setCheckingCode] = useState(false)
144
- const [otpError, setOtpError] = useState(null)
127
+ const [passwordSee, setPasswordSee] = useState(false);
128
+ const [formValues, setFormValues] = useState(null);
129
+ const [isModalVisible, setIsModalVisible] = useState(false);
130
+ const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
131
+ const [isFBLoading, setIsFBLoading] = useState(false);
132
+ const [phoneInputData, setPhoneInputData] = useState({
133
+ error: '',
134
+ phone: {
135
+ country_phone_code: null,
136
+ cellphone: null,
137
+ country_code: null
138
+ },
139
+ });
140
+ const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
141
+ const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
142
+ const [recaptchaVerified, setRecaptchaVerified] = useState(false)
143
+ const [tabLayouts, setTabLayouts] = useState<any>({})
144
+ const [isCheckingCode, setCheckingCode] = useState(false)
145
+ const [otpError, setOtpError] = useState(null)
145
146
 
146
- const tabsRef = useRef<any>(null)
147
- const nameRef = useRef<any>(null);
148
- const lastnameRef = useRef<any>(null);
149
- const middleNameRef = useRef<any>(null);
150
- const secondLastnameRef = useRef<any>(null);
151
- const emailRef = useRef<any>(null);
152
- const phoneRef = useRef<any>(null);
153
- const passwordRef = useRef<any>(null);
154
- const recaptchaRef = useRef<any>({});
147
+ const tabsRef = useRef<any>(null)
148
+ const nameRef = useRef<any>(null);
149
+ const lastnameRef = useRef<any>(null);
150
+ const middleNameRef = useRef<any>(null);
151
+ const secondLastnameRef = useRef<any>(null);
152
+ const emailRef = useRef<any>(null);
153
+ const phoneRef = useRef<any>(null);
154
+ const passwordRef = useRef<any>(null);
155
+ const recaptchaRef = useRef<any>({});
156
+ const otpChannelRef = useRef<number>(2);
155
157
 
156
- const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
157
- const googleLoginEnabled = configs?.google_login_enabled?.value === '1'
158
- const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1'
159
- const appleLoginEnabled = Platform.OS === 'ios' && configs?.apple_login_enabled?.value === '1'
158
+ const showInputPhoneNumber = (validationFields?.fields?.checkout?.cellphone?.enabled ?? false) || configs?.verification_phone_required?.value === '1'
159
+ const googleLoginEnabled = configs?.google_login_enabled?.value === '1'
160
+ const facebookLoginEnabled = configs?.facebook_login_enabled?.value === '1'
161
+ const appleLoginEnabled = Platform.OS === 'ios' && configs?.apple_login_enabled?.value === '1'
160
162
 
161
- const closeAlert = () => {
162
- setAlertState({
163
- open: false,
164
- title: '',
165
- content: []
166
- })
167
- }
163
+ const closeAlert = () => {
164
+ setAlertState({
165
+ open: false,
166
+ title: '',
167
+ content: []
168
+ })
169
+ }
168
170
 
169
- const vibrateApp = (impact?: string) => {
170
- const options = {
171
- enableVibrateFallback: true,
172
- ignoreAndroidSystemSettings: false
173
- };
174
- ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
175
- }
171
+ const vibrateApp = (impact?: string) => {
172
+ const options = {
173
+ enableVibrateFallback: true,
174
+ ignoreAndroidSystemSettings: false
175
+ };
176
+ ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
177
+ }
176
178
 
177
- const handleRefs = (ref: any, code: string) => {
178
- switch (code) {
179
- case 'name': {
180
- nameRef.current = ref;
181
- break;
182
- }
183
- case 'middle_name': {
184
- middleNameRef.current = ref;
185
- }
186
- case 'lastname': {
187
- lastnameRef.current = ref;
188
- break;
189
- }
190
- case 'second_lastname': {
191
- secondLastnameRef.current = ref;
192
- break;
193
- }
194
- case 'email': {
195
- emailRef.current = ref;
196
- break;
197
- }
198
- }
199
- };
179
+ const handleRefs = (ref: any, code: string) => {
180
+ switch (code) {
181
+ case 'name': {
182
+ nameRef.current = ref;
183
+ break;
184
+ }
185
+ case 'middle_name': {
186
+ middleNameRef.current = ref;
187
+ }
188
+ case 'lastname': {
189
+ lastnameRef.current = ref;
190
+ break;
191
+ }
192
+ case 'second_lastname': {
193
+ secondLastnameRef.current = ref;
194
+ break;
195
+ }
196
+ case 'email': {
197
+ emailRef.current = ref;
198
+ break;
199
+ }
200
+ }
201
+ };
200
202
 
201
- const handleOnLayout = (event: any, opc: string) => {
202
- const _tabLayouts = { ...tabLayouts }
203
- const categoryKey = opc
204
- _tabLayouts[categoryKey] = event.nativeEvent.layout
205
- setTabLayouts(_tabLayouts)
206
- }
203
+ const handleOnLayout = (event: any, opc: string) => {
204
+ const _tabLayouts = { ...tabLayouts }
205
+ const categoryKey = opc
206
+ _tabLayouts[categoryKey] = event.nativeEvent.layout
207
+ setTabLayouts(_tabLayouts)
208
+ }
207
209
 
208
- const handleFocusRef = (code: string) => {
209
- switch (code) {
210
- case 'name': {
211
- nameRef?.current?.focus();
212
- break;
213
- }
214
- case 'middle_name': {
215
- middleNameRef?.current?.focus();
216
- break;
217
- }
218
- case 'lastname': {
219
- lastnameRef?.current?.focus();
220
- break;
221
- }
222
- case 'second_lastname': {
223
- secondLastnameRef?.current?.focus();
224
- break;
225
- }
226
- case 'email': {
227
- emailRef?.current?.focus();
228
- break;
229
- }
230
- }
231
- };
210
+ const handleFocusRef = (code: string) => {
211
+ switch (code) {
212
+ case 'name': {
213
+ nameRef?.current?.focus();
214
+ break;
215
+ }
216
+ case 'middle_name': {
217
+ middleNameRef?.current?.focus();
218
+ break;
219
+ }
220
+ case 'lastname': {
221
+ lastnameRef?.current?.focus();
222
+ break;
223
+ }
224
+ case 'second_lastname': {
225
+ secondLastnameRef?.current?.focus();
226
+ break;
227
+ }
228
+ case 'email': {
229
+ emailRef?.current?.focus();
230
+ break;
231
+ }
232
+ }
233
+ };
232
234
 
233
- const getNextFieldCode = (index: number) => {
234
- const fields = sortInputFields({
235
- values: validationFields?.fields?.checkout,
236
- })?.filter(
237
- (field: any) =>
238
- !notValidationFields.includes(field.code) && showField(field.code),
239
- );
240
- return fields[index + 1]?.code;
241
- };
235
+ const getNextFieldCode = (index: number) => {
236
+ const fields = sortInputFields({
237
+ values: validationFields?.fields?.checkout,
238
+ })?.filter(
239
+ (field: any) =>
240
+ !notValidationFields.includes(field.code) && showField(field.code),
241
+ );
242
+ return fields[index + 1]?.code;
243
+ };
242
244
 
243
- const handleSuccessFacebook = (user: any) => {
244
- login({
245
- user,
246
- token: user.session.access_token,
247
- });
248
- navigation.navigate('Home');
249
- };
245
+ const handleSuccessFacebook = (user: any) => {
246
+ login({
247
+ user,
248
+ token: user.session.access_token,
249
+ });
250
+ navigation.navigate('Home');
251
+ };
250
252
 
251
- const handleSignUpTab = (tab: string) => {
252
- setSignUpTab && setSignUpTab(tab)
253
- clearErrors()
254
- }
253
+ const handleSignUpTab = (tab: string) => {
254
+ setSignUpTab && setSignUpTab(tab)
255
+ clearErrors()
256
+ }
255
257
 
256
- const onSubmit = (values?: any) => {
257
- if (phoneInputData.error && signUpTab !== 'otpEmail') {
258
- showToast(ToastType.Error, phoneInputData.error);
259
- vibrateApp()
260
- return;
261
- }
262
- if (
263
- !phoneInputData.phone.country_phone_code &&
264
- !phoneInputData.phone.cellphone &&
265
- ((validationFields?.fields?.checkout?.cellphone?.enabled &&
266
- validationFields?.fields?.checkout?.cellphone?.required) ||
267
- configs?.verification_phone_required?.value === '1') &&
268
- signUpTab !== 'otpEmail'
269
- ) {
270
- showToast(
271
- ToastType.Error,
272
- t(
273
- 'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
274
- 'The field Mobile phone is required.',
275
- ),
276
- );
277
- vibrateApp()
278
- return;
279
- }
280
- if (signUpTab === 'otpEmail' || signUpTab === 'otpCellphone') {
281
- generateOtpCode && generateOtpCode({
282
- ...values,
283
- ...((phoneInputData.phone.cellphone !== null && phoneInputData.phone.country_phone_code !== null) && { ...phoneInputData.phone }),
284
- country_code: phoneInputData.phone.country_code
285
- })
286
- return
287
- }
288
- handleButtonSignupClick &&
289
- handleButtonSignupClick({
290
- ...values,
291
- ...((phoneInputData.phone.cellphone !== null && phoneInputData.phone.country_phone_code !== null) && { ...phoneInputData.phone }),
292
- country_code: phoneInputData.phone.country_code
293
- });
294
- if (!formState.loading && formState.result.result && !formState.result.error) {
295
- handleSuccessSignup && handleSuccessSignup(formState.result.result);
296
- }
297
- };
258
+ const onSubmit = (values?: any) => {
259
+ if (phoneInputData.error && signUpTab !== 'otpEmail') {
260
+ showToast(ToastType.Error, phoneInputData.error);
261
+ vibrateApp()
262
+ return;
263
+ }
264
+ if (
265
+ !phoneInputData.phone.country_phone_code &&
266
+ !phoneInputData.phone.cellphone &&
267
+ ((validationFields?.fields?.checkout?.cellphone?.enabled &&
268
+ validationFields?.fields?.checkout?.cellphone?.required) ||
269
+ configs?.verification_phone_required?.value === '1') &&
270
+ signUpTab !== 'otpEmail'
271
+ ) {
272
+ showToast(
273
+ ToastType.Error,
274
+ t(
275
+ 'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
276
+ 'The field Mobile phone is required.',
277
+ ),
278
+ );
279
+ vibrateApp()
280
+ return;
281
+ }
282
+ if (signUpTab === 'otpEmail' || signUpTab === 'otpCellphone') {
283
+ generateOtpCode && generateOtpCode({
284
+ ...values,
285
+ ...((phoneInputData.phone.cellphone !== null && phoneInputData.phone.country_phone_code !== null) && { ...phoneInputData.phone }),
286
+ country_code: phoneInputData.phone.country_code
287
+ }, otpChannelRef.current)
288
+ return
289
+ }
290
+ handleButtonSignupClick &&
291
+ handleButtonSignupClick({
292
+ ...values,
293
+ ...((phoneInputData.phone.cellphone !== null && phoneInputData.phone.country_phone_code !== null) && { ...phoneInputData.phone }),
294
+ country_code: phoneInputData.phone.country_code
295
+ });
296
+ if (!formState.loading && formState.result.result && !formState.result.error) {
297
+ handleSuccessSignup && handleSuccessSignup(formState.result.result);
298
+ }
299
+ };
298
300
 
299
- const handleSingUpOtp = (value: string) => {
300
- setOtpState && setOtpState(value)
301
- }
301
+ const handleSingUpOtp = (value: string) => {
302
+ setOtpState && setOtpState(value)
303
+ }
302
304
 
303
- const handleVerifyCodeClick = (values: any) => {
304
- const formData = values || formValues;
305
- handleSendVerifyCode &&
306
- handleSendVerifyCode({
307
- ...formData,
308
- ...phoneInputData.phone,
309
- });
310
- setIsLoadingVerifyModal(true);
311
- };
305
+ const handleVerifyCodeClick = (values: any) => {
306
+ const formData = values || formValues;
307
+ handleSendVerifyCode &&
308
+ handleSendVerifyCode({
309
+ ...formData,
310
+ ...phoneInputData.phone,
311
+ });
312
+ setIsLoadingVerifyModal(true);
313
+ };
312
314
 
313
- // get object with rules for hook form inputs
314
- const getInputRules = (field: any) => {
315
- const rules: any = {
316
- required: isRequiredField(field.code)
317
- ? t(
318
- `VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`,
319
- `${field.name} is required`,
320
- ).replace('_attribute_', t(field.name, field.code))
321
- : null,
322
- };
323
- if (field.code && field.code === 'email') {
324
- rules.pattern = {
325
- value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
326
- message: t('INVALID_ERROR_EMAIL', 'Invalid email address').replace(
327
- '_attribute_',
328
- t('EMAIL', 'Email'),
329
- ),
330
- };
331
- }
332
- return rules;
333
- };
315
+ // get object with rules for hook form inputs
316
+ const getInputRules = (field: any) => {
317
+ const rules: any = {
318
+ required: isRequiredField(field.code)
319
+ ? t(
320
+ `VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`,
321
+ `${field.name} is required`,
322
+ ).replace('_attribute_', t(field.name, field.code))
323
+ : null,
324
+ };
325
+ if (field.code && field.code === 'email') {
326
+ rules.pattern = {
327
+ value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
328
+ message: t('INVALID_ERROR_EMAIL', 'Invalid email address').replace(
329
+ '_attribute_',
330
+ t('EMAIL', 'Email'),
331
+ ),
332
+ };
333
+ }
334
+ return rules;
335
+ };
334
336
 
335
- const handleChangeInputEmail = (value: string, onChange: any) => {
336
- onChange(value.toLowerCase().trim().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
337
- };
337
+ const handleChangeInputEmail = (value: string, onChange: any) => {
338
+ onChange(value.toLowerCase().trim().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
339
+ };
338
340
 
339
- const handleOpenTermsUrl = async (url: any) => {
340
- const supported = await Linking.canOpenURL(url);
341
+ const handleOpenTermsUrl = async (url: any) => {
342
+ const supported = await Linking.canOpenURL(url);
341
343
 
342
- if (supported) {
343
- await Linking.openURL(url);
344
- } else {
345
- showToast(ToastType.Error, t('VALIDATION_ERROR_ACTIVE_URL', 'The _attribute_ is not a valid URL.').replace('_attribute_', t('URL', 'URL')))
346
- vibrateApp()
347
- }
348
- }
344
+ if (supported) {
345
+ await Linking.openURL(url);
346
+ } else {
347
+ showToast(ToastType.Error, t('VALIDATION_ERROR_ACTIVE_URL', 'The _attribute_ is not a valid URL.').replace('_attribute_', t('URL', 'URL')))
348
+ vibrateApp()
349
+ }
350
+ }
349
351
 
350
- const handleOpenRecaptcha = () => {
351
- setRecaptchaVerified(false)
352
- if (!recaptchaConfig?.siteKey) {
353
- showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
354
- vibrateApp()
355
- return
356
- }
357
- if (!recaptchaConfig?.baseUrl) {
358
- showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
359
- vibrateApp()
360
- return
361
- }
362
- recaptchaRef.current.open()
363
- }
352
+ const handleOpenRecaptcha = () => {
353
+ setRecaptchaVerified(false)
354
+ if (!recaptchaConfig?.siteKey) {
355
+ showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
356
+ vibrateApp()
357
+ return
358
+ }
359
+ if (!recaptchaConfig?.baseUrl) {
360
+ showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
361
+ vibrateApp()
362
+ return
363
+ }
364
+ recaptchaRef.current.open()
365
+ }
364
366
 
365
- const onRecaptchaVerify = (token: any) => {
366
- setRecaptchaVerified(true)
367
- handleReCaptcha && handleReCaptcha({ code: token, version: recaptchaConfig?.version })
368
- }
367
+ const onRecaptchaVerify = (token: any) => {
368
+ setRecaptchaVerified(true)
369
+ handleReCaptcha && handleReCaptcha({ code: token, version: recaptchaConfig?.version })
370
+ }
369
371
 
370
- const handleChangePhoneNumber = (number: any, rawNumber: any) => {
371
- setPhoneInputData({
372
- ...phoneInputData,
373
- ...number,
374
- phone: {
375
- ...phoneInputData.phone,
376
- ...number.phone,
377
- country_code: phoneInputData.phone.country_code
378
- }
379
- })
380
- setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
381
- }
372
+ const handleChangePhoneNumber = (number: any, rawNumber: any) => {
373
+ setPhoneInputData({
374
+ ...phoneInputData,
375
+ ...number,
376
+ phone: {
377
+ ...phoneInputData.phone,
378
+ ...number.phone,
379
+ country_code: phoneInputData.phone.country_code
380
+ }
381
+ })
382
+ setCellphoneStartZero && setCellphoneStartZero(rawNumber?.number && rawNumber?.countryCallingCode ? rawNumber?.number : null)
383
+ }
382
384
 
383
- useEffect(() => {
384
- if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
385
- if (configs?.security_recaptcha_type?.value === 'v3' &&
386
- configs?.security_recaptcha_score_v3?.value > 0 &&
387
- configs?.security_recaptcha_site_key_v3?.value
388
- ) {
389
- setRecaptchaConfig({
390
- version: 'v3',
391
- siteKey: configs?.security_recaptcha_site_key_v3?.value || null,
392
- baseUrl: configs?.security_recaptcha_base_url?.value || null
393
- })
394
- return
395
- }
396
- if (configs?.security_recaptcha_site_key?.value) {
397
- setRecaptchaConfig({
398
- version: 'v2',
399
- siteKey: configs?.security_recaptcha_site_key?.value || null,
400
- baseUrl: configs?.security_recaptcha_base_url?.value || null
401
- })
402
- }
403
- }
404
- }, [configs, enableReCaptcha])
385
+ useEffect(() => {
386
+ if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
387
+ if (configs?.security_recaptcha_type?.value === 'v3' &&
388
+ configs?.security_recaptcha_score_v3?.value > 0 &&
389
+ configs?.security_recaptcha_site_key_v3?.value
390
+ ) {
391
+ setRecaptchaConfig({
392
+ version: 'v3',
393
+ siteKey: configs?.security_recaptcha_site_key_v3?.value || null,
394
+ baseUrl: configs?.security_recaptcha_base_url?.value || null
395
+ })
396
+ return
397
+ }
398
+ if (configs?.security_recaptcha_site_key?.value) {
399
+ setRecaptchaConfig({
400
+ version: 'v2',
401
+ siteKey: configs?.security_recaptcha_site_key?.value || null,
402
+ baseUrl: configs?.security_recaptcha_base_url?.value || null
403
+ })
404
+ }
405
+ }
406
+ }, [configs, enableReCaptcha])
405
407
 
406
- useEffect(() => {
407
- if (!formState.loading && formState.result?.error) {
408
- if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
409
- setRecaptchaVerified(false)
410
- setRecaptchaConfig({
411
- version: 'v2',
412
- siteKey: configs?.security_recaptcha_site_key?.value || null,
413
- baseUrl: configs?.security_recaptcha_base_url?.value || null
414
- })
415
- showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
416
- vibrateApp()
417
- return
418
- }
419
- formState.result?.result && formState.result?.result[0]?.includes("_") ?
420
- showToast(ToastType.Error, t(`${formState.result?.result[0]}`, 'Phone number already used')) :
421
- showToast(ToastType.Error, formState.result?.result[0])
422
- formState.result?.result && vibrateApp()
423
- setIsLoadingVerifyModal(false);
424
- }
425
- }, [formState]);
408
+ useEffect(() => {
409
+ if (!formState.loading && formState.result?.error) {
410
+ if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
411
+ setRecaptchaVerified(false)
412
+ setRecaptchaConfig({
413
+ version: 'v2',
414
+ siteKey: configs?.security_recaptcha_site_key?.value || null,
415
+ baseUrl: configs?.security_recaptcha_base_url?.value || null
416
+ })
417
+ showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
418
+ vibrateApp()
419
+ return
420
+ }
421
+ formState.result?.result && formState.result?.result[0]?.includes("_") ?
422
+ showToast(ToastType.Error, t(`${formState.result?.result[0]}`, 'Phone number already used')) :
423
+ showToast(ToastType.Error, formState.result?.result[0])
424
+ formState.result?.result && vibrateApp()
425
+ setIsLoadingVerifyModal(false);
426
+ }
427
+ }, [formState]);
426
428
 
427
- useEffect(() => {
428
- if (Object.keys(errors).length > 0) {
429
- setIsLoadingVerifyModal(false);
430
- vibrateApp()
431
- }
432
- }, [errors])
429
+ useEffect(() => {
430
+ if (Object.keys(errors).length > 0) {
431
+ setIsLoadingVerifyModal(false);
432
+ vibrateApp()
433
+ }
434
+ }, [errors])
433
435
 
434
- useEffect(() => {
435
- if (signUpTab === 'default' || signUpTab === 'otpCellphone') {
436
- register('cellphone', {
437
- required: isRequiredField('cellphone')
438
- ? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
439
- : null
440
- })
441
- } else {
442
- unregister('cellphone')
443
- }
444
- }, [signUpTab])
436
+ useEffect(() => {
437
+ if (signUpTab === 'default' || signUpTab === 'otpCellphone') {
438
+ register('cellphone', {
439
+ required: isRequiredField('cellphone')
440
+ ? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
441
+ : null
442
+ })
443
+ } else {
444
+ unregister('cellphone')
445
+ }
446
+ }, [signUpTab])
445
447
 
446
- useEffect(() => {
447
- if (phoneInputData?.phone?.cellphone) setValue('cellphone', phoneInputData?.phone?.cellphone, '')
448
- else setValue('cellphone', '')
449
- }, [phoneInputData?.phone?.cellphone])
448
+ useEffect(() => {
449
+ if (phoneInputData?.phone?.cellphone) setValue('cellphone', phoneInputData?.phone?.cellphone, '')
450
+ else setValue('cellphone', '')
451
+ }, [phoneInputData?.phone?.cellphone])
450
452
 
451
- useEffect(() => {
452
- if (verifyPhoneState && !verifyPhoneState?.loading) {
453
- if (verifyPhoneState.result?.error) {
454
- const message =
455
- typeof verifyPhoneState?.result?.result === 'string'
456
- ? verifyPhoneState?.result?.result
457
- : verifyPhoneState?.result?.result[0];
458
- verifyPhoneState.result?.result && showToast(ToastType.Error, message);
459
- verifyPhoneState.result?.result && vibrateApp()
460
- setIsLoadingVerifyModal(false);
461
- return;
462
- }
453
+ useEffect(() => {
454
+ if (verifyPhoneState && !verifyPhoneState?.loading) {
455
+ if (verifyPhoneState.result?.error) {
456
+ const message =
457
+ typeof verifyPhoneState?.result?.result === 'string'
458
+ ? verifyPhoneState?.result?.result
459
+ : verifyPhoneState?.result?.result[0];
460
+ verifyPhoneState.result?.result && showToast(ToastType.Error, message);
461
+ verifyPhoneState.result?.result && vibrateApp()
462
+ setIsLoadingVerifyModal(false);
463
+ return;
464
+ }
463
465
 
464
- const okResult = verifyPhoneState.result?.result === 'OK';
465
- if (okResult) {
466
- !isModalVisible && setIsModalVisible(true);
467
- setIsLoadingVerifyModal(false);
468
- }
469
- }
470
- }, [verifyPhoneState]);
466
+ const okResult = verifyPhoneState.result?.result === 'OK';
467
+ if (okResult) {
468
+ !isModalVisible && setIsModalVisible(true);
469
+ setIsLoadingVerifyModal(false);
470
+ }
471
+ }
472
+ }, [verifyPhoneState]);
471
473
 
472
- useEffect(() => {
473
- setPhoneInputData({
474
- ...phoneInputData,
475
- phone: {
476
- ...phoneInputData.phone,
477
- country_code: configs?.default_country_code?.value
478
- }
479
- })
480
- }, [configs])
474
+ useEffect(() => {
475
+ setPhoneInputData({
476
+ ...phoneInputData,
477
+ phone: {
478
+ ...phoneInputData.phone,
479
+ country_code: configs?.default_country_code?.value
480
+ }
481
+ })
482
+ }, [configs])
481
483
 
482
- useEffect(() => {
483
- if (checkPhoneCodeState?.result?.error) {
484
- const titleText = (
485
- typeof checkPhoneCodeState?.result?.result === 'string'
486
- ? checkPhoneCodeState?.result?.result
487
- : checkPhoneCodeState?.result?.result[0].toString()
488
- ) || t('ERROR', 'Error')
489
- setCheckingCode(false)
490
- setOtpError(titleText)
491
- checkPhoneCodeState?.generate && setAlertState({
492
- open: true,
493
- title: titleText,
494
- content: []
495
- })
496
- }
497
- }, [checkPhoneCodeState])
484
+ useEffect(() => {
485
+ if (checkPhoneCodeState?.result?.error) {
486
+ const titleText = (
487
+ typeof checkPhoneCodeState?.result?.result === 'string'
488
+ ? checkPhoneCodeState?.result?.result
489
+ : checkPhoneCodeState?.result?.result[0].toString()
490
+ ) || t('ERROR', 'Error')
491
+ setCheckingCode(false)
492
+ setOtpError(titleText)
493
+ checkPhoneCodeState?.generate && setAlertState({
494
+ open: true,
495
+ title: titleText,
496
+ content: []
497
+ })
498
+ }
499
+ }, [checkPhoneCodeState])
498
500
 
499
- return (
500
- <View>
501
- {isGuest ? (
502
- <OText style={{ textAlign: 'center', marginBottom: 10 }} size={18}>{t('SIGNUP', 'Signup')}</OText>
503
- ) : (
504
- <NavBar
505
- title={t('SIGNUP', 'Signup')}
506
- titleAlign={'center'}
507
- onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
508
- showCall={false}
509
- btnStyle={{ paddingLeft: 0 }}
510
- titleWrapStyle={{ paddingHorizontal: 0 }}
511
- titleStyle={{ marginLeft: 0, marginRight: 0 }}
512
- />
513
- )}
514
- <FormSide>
515
- {((Number(useSignUpFullDetails) + Number(useSignUpOtpEmail) + Number(useSignUpOtpCellphone)) > 1) && (
516
- <SignupWith>
517
- <OTabs
518
- horizontal
519
- showsHorizontalScrollIndicator={false}
520
- ref={tabsRef}
521
- >
522
- {useSignUpFullDetails && (
523
- <TabBtn
524
- onPress={() => handleSignUpTab('default')}
525
- onLayout={(event: any) => handleOnLayout(event, 'default')}
526
- >
527
- <OTab
528
- style={{
529
- borderBottomColor:
530
- signUpTab === 'default'
531
- ? theme.colors.textNormal
532
- : theme.colors.border,
533
- }}>
534
- <OText
535
- size={14}
536
- color={
537
- signUpTab === 'default'
538
- ? theme.colors.textNormal
539
- : theme.colors.disabled
540
- }
541
- weight={signUpTab === 'default' ? 'bold' : 'normal'}>
542
- {t('DEFAULT', 'Default')}
543
- </OText>
544
- </OTab>
545
- </TabBtn>
546
- )}
547
- {useSignUpOtpEmail && (
548
- <TabBtn
549
- onPress={() => handleSignUpTab('otpEmail')}
550
- onLayout={(event: any) => handleOnLayout(event, 'otpEmail')}
551
- >
552
- <OTab
553
- style={{
554
- borderBottomColor:
555
- signUpTab === 'otpEmail'
556
- ? theme.colors.textNormal
557
- : theme.colors.border,
558
- }}>
559
- <OText
560
- size={14}
561
- color={
562
- signUpTab === 'otpEmail'
563
- ? theme.colors.textNormal
564
- : theme.colors.disabled
565
- }
566
- weight={signUpTab === 'otpEmail' ? 'bold' : 'normal'}>
567
- {t('BY_OTP_EMAIL', 'by Otp Email')}
568
- </OText>
569
- </OTab>
570
- </TabBtn>
501
+ return (
502
+ <View>
503
+ {isGuest ? (
504
+ <OText style={{ textAlign: 'center', marginBottom: 10 }} size={18}>{t('SIGNUP', 'Signup')}</OText>
505
+ ) : (
506
+ <NavBar
507
+ title={t('SIGNUP', 'Signup')}
508
+ titleAlign={'center'}
509
+ onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
510
+ showCall={false}
511
+ btnStyle={{ paddingLeft: 0 }}
512
+ titleWrapStyle={{ paddingHorizontal: 0 }}
513
+ titleStyle={{ marginLeft: 0, marginRight: 0 }}
514
+ />
515
+ )}
516
+ <FormSide>
517
+ {((Number(useSignUpFullDetails) + Number(useSignUpOtpEmail) + Number(useSignUpOtpCellphone)) > 1) && (
518
+ <SignupWith>
519
+ <OTabs
520
+ horizontal
521
+ showsHorizontalScrollIndicator={false}
522
+ ref={tabsRef}
523
+ >
524
+ {useSignUpFullDetails && (
525
+ <TabBtn
526
+ onPress={() => handleSignUpTab('default')}
527
+ onLayout={(event: any) => handleOnLayout(event, 'default')}
528
+ >
529
+ <OTab
530
+ style={{
531
+ borderBottomColor:
532
+ signUpTab === 'default'
533
+ ? theme.colors.textNormal
534
+ : theme.colors.border,
535
+ }}>
536
+ <OText
537
+ size={14}
538
+ color={
539
+ signUpTab === 'default'
540
+ ? theme.colors.textNormal
541
+ : theme.colors.disabled
542
+ }
543
+ weight={signUpTab === 'default' ? 'bold' : 'normal'}>
544
+ {t('DEFAULT', 'Default')}
545
+ </OText>
546
+ </OTab>
547
+ </TabBtn>
548
+ )}
549
+ {useSignUpOtpEmail && (
550
+ <TabBtn
551
+ onPress={() => handleSignUpTab('otpEmail')}
552
+ onLayout={(event: any) => handleOnLayout(event, 'otpEmail')}
553
+ >
554
+ <OTab
555
+ style={{
556
+ borderBottomColor:
557
+ signUpTab === 'otpEmail'
558
+ ? theme.colors.textNormal
559
+ : theme.colors.border,
560
+ }}>
561
+ <OText
562
+ size={14}
563
+ color={
564
+ signUpTab === 'otpEmail'
565
+ ? theme.colors.textNormal
566
+ : theme.colors.disabled
567
+ }
568
+ weight={signUpTab === 'otpEmail' ? 'bold' : 'normal'}>
569
+ {t('BY_OTP_EMAIL', 'by Otp Email')}
570
+ </OText>
571
+ </OTab>
572
+ </TabBtn>
571
573
 
572
- )}
573
- {useSignUpOtpCellphone && (
574
- <TabBtn
575
- onPress={() => handleSignUpTab('otpCellphone')}
576
- onLayout={(event: any) => handleOnLayout(event, 'otpCellphone')}
577
- >
578
- <OTab
579
- style={{
580
- borderBottomColor:
581
- signUpTab === 'otpCellphone'
582
- ? theme.colors.textNormal
583
- : theme.colors.border,
584
- }}>
585
- <OText
586
- size={14}
587
- color={
588
- signUpTab === 'otpCellphone'
589
- ? theme.colors.textNormal
590
- : theme.colors.disabled
591
- }
592
- weight={signUpTab === 'otpCellphone' ? 'bold' : 'normal'}>
593
- {t('BY_OTP_CELLPHONE', 'by Otp Cellphone')}
594
- </OText>
595
- </OTab>
596
- </TabBtn>
597
- )}
598
- </OTabs>
599
- </SignupWith>
600
- )}
601
- <FormInput>
602
- {!(useChekoutFileds && validationFields?.loading) ? (
603
- <>
604
- {sortInputFields({
605
- values: validationFields?.fields?.checkout,
606
- }).map(
607
- (item: any, i: number) => {
608
- const field = item?.validation_field || item
609
- return (!notValidationFields.includes(field.code) &&
610
- showField &&
611
- showField(field.code) &&
612
- (signUpTab === 'default' ||
613
- (signUpTab === 'otpEmail' && field.code === 'email')) && (
614
- <React.Fragment key={field.id}>
615
- {errors?.[`${field.code}`] && (
616
- <OText
617
- size={14}
618
- color={theme.colors.danger5}
619
- weight={'normal'}>
620
- {errors?.[`${field.code}`]?.message} {errors?.[`${field.code}`]?.type === 'required' && '*'}
621
- </OText>
622
- )}
623
- <Controller
624
- control={control}
625
- render={({ onChange, value }: any) => (
626
- <OInput
627
- placeholder={t(field.name?.replace(/\s/g, '_')?.toUpperCase(), field.name)}
628
- style={style.inputStyle}
629
- icon={
630
- field.code === 'email'
631
- ? theme.images.general.email
632
- : theme.images.general.user
633
- }
634
- value={value}
635
- onChange={(val: any) =>
636
- field.code !== 'email'
637
- ? (onChange(val))
638
- : handleChangeInputEmail(val, onChange)
639
- }
640
- autoCapitalize={
641
- field.code === 'email' ? 'none' : 'sentences'
642
- }
643
- autoCorrect={field.code === 'email' && false}
644
- type={
645
- field.code === 'email' ? 'email-address' : 'default'
646
- }
647
- autoCompleteType={
648
- field.code === 'email' ? 'email' : 'off'
649
- }
650
- returnKeyType="next"
651
- blurOnSubmit={false}
652
- forwardRef={(ref: any) => handleRefs(ref, field.code)}
653
- onSubmitEditing={() =>
654
- field.code === 'email'
655
- ? phoneRef?.current?.focus?.()
656
- : handleFocusRef(getNextFieldCode(i))
657
- }
658
- borderColor={errors?.[`${field.code}`] ? theme.colors.danger5 : theme.colors.border}
659
- />
660
- )}
661
- name={field.code}
662
- rules={getInputRules(field)}
663
- defaultValue=""
664
- />
665
- </React.Fragment>
666
- ))
667
- }
668
- )}
574
+ )}
575
+ {useSignUpOtpCellphone && (
576
+ <TabBtn
577
+ onPress={() => handleSignUpTab('otpCellphone')}
578
+ onLayout={(event: any) => handleOnLayout(event, 'otpCellphone')}
579
+ >
580
+ <OTab
581
+ style={{
582
+ borderBottomColor:
583
+ signUpTab === 'otpCellphone'
584
+ ? theme.colors.textNormal
585
+ : theme.colors.border,
586
+ }}>
587
+ <OText
588
+ size={14}
589
+ color={
590
+ signUpTab === 'otpCellphone'
591
+ ? theme.colors.textNormal
592
+ : theme.colors.disabled
593
+ }
594
+ weight={signUpTab === 'otpCellphone' ? 'bold' : 'normal'}>
595
+ {t('BY_OTP_CELLPHONE', 'by Otp Cellphone')}
596
+ </OText>
597
+ </OTab>
598
+ </TabBtn>
599
+ )}
600
+ </OTabs>
601
+ </SignupWith>
602
+ )}
603
+ <FormInput>
604
+ {!(useChekoutFileds && validationFields?.loading) ? (
605
+ <>
606
+ {sortInputFields({
607
+ values: validationFields?.fields?.checkout,
608
+ }).map(
609
+ (item: any, i: number) => {
610
+ const field = item?.validation_field || item
611
+ return (!notValidationFields.includes(field.code) &&
612
+ showField &&
613
+ showField(field.code) &&
614
+ (signUpTab === 'default' ||
615
+ (signUpTab === 'otpEmail' && field.code === 'email')) && (
616
+ <React.Fragment key={field.id}>
617
+ {errors?.[`${field.code}`] && (
618
+ <OText
619
+ size={14}
620
+ color={theme.colors.danger5}
621
+ weight={'normal'}>
622
+ {errors?.[`${field.code}`]?.message} {errors?.[`${field.code}`]?.type === 'required' && '*'}
623
+ </OText>
624
+ )}
625
+ <Controller
626
+ control={control}
627
+ render={({ onChange, value }: any) => (
628
+ <OInput
629
+ placeholder={t(field.name?.replace(/\s/g, '_')?.toUpperCase(), field.name)}
630
+ style={style.inputStyle}
631
+ icon={
632
+ field.code === 'email'
633
+ ? theme.images.general.email
634
+ : theme.images.general.user
635
+ }
636
+ value={value}
637
+ onChange={(val: any) =>
638
+ field.code !== 'email'
639
+ ? (onChange(val))
640
+ : handleChangeInputEmail(val, onChange)
641
+ }
642
+ autoCapitalize={
643
+ field.code === 'email' ? 'none' : 'sentences'
644
+ }
645
+ autoCorrect={field.code === 'email' && false}
646
+ type={
647
+ field.code === 'email' ? 'email-address' : 'default'
648
+ }
649
+ autoCompleteType={
650
+ field.code === 'email' ? 'email' : 'off'
651
+ }
652
+ returnKeyType="next"
653
+ blurOnSubmit={false}
654
+ forwardRef={(ref: any) => handleRefs(ref, field.code)}
655
+ onSubmitEditing={() =>
656
+ field.code === 'email'
657
+ ? phoneRef?.current?.focus?.()
658
+ : handleFocusRef(getNextFieldCode(i))
659
+ }
660
+ borderColor={errors?.[`${field.code}`] ? theme.colors.danger5 : theme.colors.border}
661
+ />
662
+ )}
663
+ name={field.code}
664
+ rules={getInputRules(field)}
665
+ defaultValue=""
666
+ />
667
+ </React.Fragment>
668
+ ))
669
+ }
670
+ )}
669
671
 
670
- {(!!showInputPhoneNumber && (signUpTab === 'default' || signUpTab === 'otpCellphone')) && (
671
- <View style={{ marginBottom: 25 }}>
672
- <PhoneInputNumber
673
- data={phoneInputData}
674
- handleData={handleChangePhoneNumber}
675
- forwardRef={phoneRef}
676
- changeCountry={(val: any) => setPhoneInputData({
677
- ...phoneInputData,
678
- phone: {
679
- ...phoneInputData.phone,
680
- country_code: val.cca2
681
- }
682
- })}
683
- textInputProps={{
684
- returnKeyType: 'next',
685
- onSubmitEditing: () => passwordRef?.current?.focus?.(),
686
- }}
687
- isStartValidation={errors?.cellphone}
688
- />
689
- </View>
690
- )}
672
+ {(!!showInputPhoneNumber && (signUpTab === 'default' || signUpTab === 'otpCellphone')) && (
673
+ <View style={{ marginBottom: 25 }}>
674
+ <PhoneInputNumber
675
+ data={phoneInputData}
676
+ handleData={handleChangePhoneNumber}
677
+ forwardRef={phoneRef}
678
+ changeCountry={(val: any) => setPhoneInputData({
679
+ ...phoneInputData,
680
+ phone: {
681
+ ...phoneInputData.phone,
682
+ country_code: val.cca2
683
+ }
684
+ })}
685
+ textInputProps={{
686
+ returnKeyType: 'next',
687
+ onSubmitEditing: () => passwordRef?.current?.focus?.(),
688
+ }}
689
+ isStartValidation={errors?.cellphone}
690
+ />
691
+ </View>
692
+ )}
691
693
 
692
- {(enableReCaptcha && recaptchaConfig?.version) && (
693
- <>
694
- {recaptchaConfig?.version === 'v3' ? (
695
- <ReCaptcha
696
- url={recaptchaConfig?.baseUrl}
697
- siteKey={recaptchaConfig?.siteKey}
698
- containerStyle={{ height: 40 }}
699
- onExecute={onRecaptchaVerify}
700
- reCaptchaType={1}
701
- />
702
- ) : (
703
- <>
704
- <TouchableOpacity
705
- onPress={handleOpenRecaptcha}
706
- style={{ marginHorizontal: 4, marginBottom: 10 }}
707
- >
708
- <RecaptchaButton>
709
- {recaptchaVerified ? (
710
- <MaterialCommunityIcons
711
- name="checkbox-marked"
712
- size={23}
713
- color={theme.colors.primary}
714
- />
715
- ) : (
716
- <MaterialCommunityIcons
717
- name="checkbox-blank-outline"
718
- size={23}
719
- color={theme.colors.disabled}
720
- />
721
- )}
722
- <OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
723
- </RecaptchaButton>
724
- </TouchableOpacity>
725
- <Recaptcha
726
- ref={recaptchaRef}
727
- siteKey={recaptchaConfig?.siteKey}
728
- baseUrl={recaptchaConfig?.baseUrl}
729
- onVerify={onRecaptchaVerify}
730
- onExpire={() => setRecaptchaVerified(false)}
731
- />
732
- </>
733
- )}
694
+ {(enableReCaptcha && recaptchaConfig?.version) && (
695
+ <>
696
+ {recaptchaConfig?.version === 'v3' ? (
697
+ <ReCaptcha
698
+ url={recaptchaConfig?.baseUrl}
699
+ siteKey={recaptchaConfig?.siteKey}
700
+ containerStyle={{ height: 40 }}
701
+ onExecute={onRecaptchaVerify}
702
+ reCaptchaType={1}
703
+ />
704
+ ) : (
705
+ <>
706
+ <TouchableOpacity
707
+ onPress={handleOpenRecaptcha}
708
+ style={{ marginHorizontal: 4, marginBottom: 10 }}
709
+ >
710
+ <RecaptchaButton>
711
+ {recaptchaVerified ? (
712
+ <MaterialCommunityIcons
713
+ name="checkbox-marked"
714
+ size={23}
715
+ color={theme.colors.primary}
716
+ />
717
+ ) : (
718
+ <MaterialCommunityIcons
719
+ name="checkbox-blank-outline"
720
+ size={23}
721
+ color={theme.colors.disabled}
722
+ />
723
+ )}
724
+ <OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
725
+ </RecaptchaButton>
726
+ </TouchableOpacity>
727
+ <Recaptcha
728
+ ref={recaptchaRef}
729
+ siteKey={recaptchaConfig?.siteKey}
730
+ baseUrl={recaptchaConfig?.baseUrl}
731
+ onVerify={onRecaptchaVerify}
732
+ onExpire={() => setRecaptchaVerified(false)}
733
+ />
734
+ </>
735
+ )}
734
736
 
735
- </>
736
- )}
737
- {(signUpTab === 'default') && (
738
- <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
739
- <Controller
740
- control={control}
741
- render={({ onChange, value }: any) => (
742
- <CheckBox
743
- value={value}
744
- onValueChange={newValue => {
745
- onChange(newValue)
746
- handleChangePromotions()
747
- }}
748
- boxType={'square'}
749
- tintColors={{
750
- true: theme.colors.primary,
751
- false: theme.colors.disabled
752
- }}
753
- tintColor={theme.colors.disabled}
754
- onCheckColor={theme.colors.primary}
755
- onTintColor={theme.colors.primary}
756
- style={Platform.OS === 'ios' && style.checkBoxStyle}
757
- />
758
- )}
759
- name='promotions'
760
- defaultValue={false}
761
- />
762
- <OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
763
- </View>
764
- )}
765
- {configs?.terms_and_conditions?.value === 'true' && (
766
- <>
767
- {errors?.termsAccept && (
768
- <OText
769
- size={14}
770
- color={theme.colors.danger5}
771
- weight={'normal'}>
772
- {errors?.termsAccept?.message}*
773
- </OText>
774
- )}
775
- <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
776
- <Controller
777
- control={control}
778
- render={({ onChange, value }: any) => (
779
- <CheckBox
780
- value={value}
781
- onValueChange={newValue => {
782
- onChange(newValue)
783
- }}
784
- boxType={'square'}
785
- tintColors={{
786
- true: theme.colors.primary,
787
- false: theme.colors.disabled
788
- }}
789
- tintColor={theme.colors.disabled}
790
- onCheckColor={theme.colors.primary}
791
- onTintColor={theme.colors.primary}
792
- style={Platform.OS === 'ios' && style.checkBoxStyle}
793
- />
794
- )}
795
- name='termsAccept'
796
- rules={{
797
- required: t('VALIDATION_ERROR_ACCEPTED', 'The _attribute_ must be accepted.').replace('_attribute_', t('TERMS_AND_CONDITIONS', 'Terms & Conditions'))
798
- }}
799
- defaultValue={false}
800
- />
801
- <OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('TERMS_AND_CONDITIONS_TEXT', 'I agree with')}</OText>
802
- <OButton
803
- imgRightSrc={null}
804
- text={t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
805
- bgColor={theme.colors.white}
806
- borderColor={theme.colors.white}
807
- style={{ paddingLeft: 0, paddingRight: 0, height: 30, shadowColor: theme.colors.white }}
808
- textStyle={{ color: theme.colors.primary, marginLeft: 0, marginRight: 0 }}
809
- onClick={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}
810
- />
811
- </View>
812
- </>
737
+ </>
738
+ )}
739
+ {(signUpTab === 'default') && (
740
+ <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
741
+ <Controller
742
+ control={control}
743
+ render={({ onChange, value }: any) => (
744
+ <CheckBox
745
+ value={value}
746
+ onValueChange={newValue => {
747
+ onChange(newValue)
748
+ handleChangePromotions()
749
+ }}
750
+ boxType={'square'}
751
+ tintColors={{
752
+ true: theme.colors.primary,
753
+ false: theme.colors.disabled
754
+ }}
755
+ tintColor={theme.colors.disabled}
756
+ onCheckColor={theme.colors.primary}
757
+ onTintColor={theme.colors.primary}
758
+ style={Platform.OS === 'ios' && style.checkBoxStyle}
759
+ />
760
+ )}
761
+ name='promotions'
762
+ defaultValue={false}
763
+ />
764
+ <OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('RECEIVE_NEWS_EXCLUSIVE_PROMOTIONS', 'Receive newsletters and exclusive promotions')}</OText>
765
+ </View>
766
+ )}
767
+ {configs?.terms_and_conditions?.value === 'true' && (
768
+ <>
769
+ {errors?.termsAccept && (
770
+ <OText
771
+ size={14}
772
+ color={theme.colors.danger5}
773
+ weight={'normal'}>
774
+ {errors?.termsAccept?.message}*
775
+ </OText>
776
+ )}
777
+ <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 20 }}>
778
+ <Controller
779
+ control={control}
780
+ render={({ onChange, value }: any) => (
781
+ <CheckBox
782
+ value={value}
783
+ onValueChange={newValue => {
784
+ onChange(newValue)
785
+ }}
786
+ boxType={'square'}
787
+ tintColors={{
788
+ true: theme.colors.primary,
789
+ false: theme.colors.disabled
790
+ }}
791
+ tintColor={theme.colors.disabled}
792
+ onCheckColor={theme.colors.primary}
793
+ onTintColor={theme.colors.primary}
794
+ style={Platform.OS === 'ios' && style.checkBoxStyle}
795
+ />
796
+ )}
797
+ name='termsAccept'
798
+ rules={{
799
+ required: t('VALIDATION_ERROR_ACCEPTED', 'The _attribute_ must be accepted.').replace('_attribute_', t('TERMS_AND_CONDITIONS', 'Terms & Conditions'))
800
+ }}
801
+ defaultValue={false}
802
+ />
803
+ <OText style={{ fontSize: 14, paddingHorizontal: 5 }}>{t('TERMS_AND_CONDITIONS_TEXT', 'I agree with')}</OText>
804
+ <OButton
805
+ imgRightSrc={null}
806
+ text={t('TERMS_AND_CONDITIONS', 'Terms & Conditions')}
807
+ bgColor={theme.colors.white}
808
+ borderColor={theme.colors.white}
809
+ style={{ paddingLeft: 0, paddingRight: 0, height: 30, shadowColor: theme.colors.white }}
810
+ textStyle={{ color: theme.colors.primary, marginLeft: 0, marginRight: 0 }}
811
+ onClick={() => handleOpenTermsUrl(configs?.terms_and_conditions_url?.value)}
812
+ />
813
+ </View>
814
+ </>
813
815
 
814
- )}
816
+ )}
815
817
 
816
- {signUpTab === 'default' && (
817
- <>
818
- {errors?.password && (
819
- <OText
820
- size={14}
821
- color={theme.colors.danger5}
822
- weight={'normal'}>
823
- {errors?.password?.message} {errors?.password?.type === 'required' && '*'}
824
- </OText>
825
- )}
826
- <Controller
827
- control={control}
828
- render={({ onChange, value }: any) => (
829
- <OInput
830
- isSecured={!passwordSee ? true : false}
831
- placeholder={t('PASSWORD', 'Password')}
832
- style={style.inputStyle}
833
- icon={theme.images.general.lock}
834
- iconCustomRight={
835
- !passwordSee ? (
836
- <MaterialCommunityIcons
837
- name="eye-outline"
838
- color={theme.colors.disabled}
839
- size={24}
840
- onPress={() => setPasswordSee(!passwordSee)}
841
- />
842
- ) : (
843
- <MaterialCommunityIcons
844
- name="eye-off-outline"
845
- color={theme.colors.disabled}
846
- size={24}
847
- onPress={() => setPasswordSee(!passwordSee)}
848
- />
849
- )
850
- }
851
- autoCapitalize='none'
852
- value={value}
853
- onChange={(val: any) => onChange(val)}
854
- returnKeyType="done"
855
- onSubmitEditing={handleSubmit(onSubmit)}
856
- blurOnSubmit
857
- forwardRef={passwordRef}
858
- borderColor={errors?.password ? theme.colors.danger5 : theme.colors.border}
859
- />
860
- )}
861
- name="password"
862
- rules={{
863
- required: isRequiredField('password')
864
- ? t(
865
- 'VALIDATION_ERROR_PASSWORD_REQUIRED',
866
- 'The field Password is required',
867
- ).replace('_attribute_', t('PASSWORD', 'password'))
868
- : null,
869
- minLength: {
870
- value: 8,
871
- message: t(
872
- 'VALIDATION_ERROR_PASSWORD_MIN_STRING',
873
- 'The Password must be at least 8 characters.',
874
- )
875
- .replace('_attribute_', t('PASSWORD', 'Password'))
876
- .replace('_min_', 8),
877
- },
878
- }}
879
- defaultValue=""
880
- />
881
- </>
818
+ {signUpTab === 'default' && (
819
+ <>
820
+ {errors?.password && (
821
+ <OText
822
+ size={14}
823
+ color={theme.colors.danger5}
824
+ weight={'normal'}>
825
+ {errors?.password?.message} {errors?.password?.type === 'required' && '*'}
826
+ </OText>
827
+ )}
828
+ <Controller
829
+ control={control}
830
+ render={({ onChange, value }: any) => (
831
+ <OInput
832
+ isSecured={!passwordSee ? true : false}
833
+ placeholder={t('PASSWORD', 'Password')}
834
+ style={style.inputStyle}
835
+ icon={theme.images.general.lock}
836
+ iconCustomRight={
837
+ !passwordSee ? (
838
+ <MaterialCommunityIcons
839
+ name="eye-outline"
840
+ color={theme.colors.disabled}
841
+ size={24}
842
+ onPress={() => setPasswordSee(!passwordSee)}
843
+ />
844
+ ) : (
845
+ <MaterialCommunityIcons
846
+ name="eye-off-outline"
847
+ color={theme.colors.disabled}
848
+ size={24}
849
+ onPress={() => setPasswordSee(!passwordSee)}
850
+ />
851
+ )
852
+ }
853
+ autoCapitalize='none'
854
+ value={value}
855
+ onChange={(val: any) => onChange(val)}
856
+ returnKeyType="done"
857
+ onSubmitEditing={handleSubmit(onSubmit)}
858
+ blurOnSubmit
859
+ forwardRef={passwordRef}
860
+ borderColor={errors?.password ? theme.colors.danger5 : theme.colors.border}
861
+ />
862
+ )}
863
+ name="password"
864
+ rules={{
865
+ required: isRequiredField('password')
866
+ ? t(
867
+ 'VALIDATION_ERROR_PASSWORD_REQUIRED',
868
+ 'The field Password is required',
869
+ ).replace('_attribute_', t('PASSWORD', 'password'))
870
+ : null,
871
+ minLength: {
872
+ value: 8,
873
+ message: t(
874
+ 'VALIDATION_ERROR_PASSWORD_MIN_STRING',
875
+ 'The Password must be at least 8 characters.',
876
+ )
877
+ .replace('_attribute_', t('PASSWORD', 'Password'))
878
+ .replace('_min_', 8),
879
+ },
880
+ }}
881
+ defaultValue=""
882
+ />
883
+ </>
882
884
 
883
- )}
884
- </>
885
- ) : (
886
- <Spinner visible />
887
- )}
885
+ )}
886
+ </>
887
+ ) : (
888
+ <Spinner visible />
889
+ )}
888
890
 
889
- {(signUpTab === 'otpEmail' || signUpTab === 'otpCellphone') ? (
890
- <OButton
891
- onClick={handleSubmit(onSubmit)}
892
- text={t('GET_VERIFY_CODE', 'Get Verify Code')}
893
- imgRightSrc={null}
894
- isLoading={isLoadingVerifyModal}
895
- indicatorColor={theme.colors.white}
896
- style={{ borderRadius: 7.6, marginTop: 6 }}
897
- />
898
- ) : (
899
- <OButton
900
- onClick={handleSubmit(onSubmit)}
901
- text={signupButtonText}
902
- imgRightSrc={null}
903
- isDisabled={formState.loading || validationFields.loading}
904
- style={{ borderRadius: 7.6, marginTop: 6, shadowOpacity: 0 }}
905
- />
906
- )}
907
- </FormInput>
891
+ {(signUpTab === 'otpCellphone' && useSignUpOtpWhatsapp) ? (
892
+ <View style={{ flexDirection: 'row', gap: 10, marginTop: 6 }}>
893
+ <OButton
894
+ onClick={() => { otpChannelRef.current = 2; handleSubmit(onSubmit)() }}
895
+ text={t('SEND_BY_SMS', 'Send by SMS')}
896
+ imgRightSrc={null}
897
+ isLoading={isLoadingVerifyModal}
898
+ indicatorColor={theme.colors.white}
899
+ parentStyle={{ flex: 1 }}
900
+ style={{ borderRadius: 7.6 }}
901
+ />
902
+ <OButton
903
+ onClick={() => { otpChannelRef.current = 4; handleSubmit(onSubmit)() }}
904
+ text={t('SEND_BY_WHATSAPP', 'Send by WhatsApp')}
905
+ imgRightSrc={null}
906
+ isLoading={isLoadingVerifyModal}
907
+ indicatorColor={theme.colors.white}
908
+ parentStyle={{ flex: 1 }}
909
+ style={{ borderRadius: 7.6 }}
910
+ />
911
+ </View>
912
+ ) : (signUpTab === 'otpEmail' || signUpTab === 'otpCellphone') ? (
913
+ <OButton
914
+ onClick={handleSubmit(onSubmit)}
915
+ text={t('GET_VERIFY_CODE', 'Get Verify Code')}
916
+ imgRightSrc={null}
917
+ isLoading={isLoadingVerifyModal}
918
+ indicatorColor={theme.colors.white}
919
+ style={{ borderRadius: 7.6, marginTop: 6 }}
920
+ />
921
+ ) : (
922
+ <OButton
923
+ onClick={handleSubmit(onSubmit)}
924
+ text={signupButtonText}
925
+ imgRightSrc={null}
926
+ isDisabled={formState.loading || validationFields.loading}
927
+ style={{ borderRadius: 7.6, marginTop: 6, shadowOpacity: 0 }}
928
+ />
929
+ )}
930
+ </FormInput>
908
931
 
909
- {
910
- onNavigationRedirect && loginButtonText && (
911
- <View style={style.wrappText}>
912
- <OText size={14} style={{ marginRight: 5 }}>
913
- {t('MOBILE_FRONT_ALREADY_HAVE_AN_ACCOUNT', 'Already have an account?')}
914
- </OText>
915
- <Pressable onPress={() => onNavigationRedirect('Login')}>
916
- <OText size={14} color={theme.colors.primary}>
917
- {loginButtonText}
918
- </OText>
919
- </Pressable>
920
- </View>
921
- )
922
- }
923
- {configs && Object.keys(configs).length > 0 && !isGuest && (
924
- (((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value && facebookLoginEnabled) ||
925
- ((configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled) ||
926
- ((configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled)) &&
927
- (
928
- <>
929
- <View
930
- style={{
931
- flexDirection: 'row',
932
- width: '100%',
933
- justifyContent: 'space-between',
934
- alignItems: 'center',
935
- marginVertical: 30,
936
- }}>
937
- <View style={style.line} />
938
- <OText
939
- size={14}
940
- mBottom={10}
941
- style={{ paddingHorizontal: 19 }}
942
- color={theme.colors.disabled}>
943
- {t('OR', 'or')}
944
- </OText>
945
- <View style={style.line} />
946
- </View>
947
- <ButtonsWrapper>
948
- <SocialButtons>
949
- {(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
950
- configs?.facebook_id?.value &&
951
- facebookLoginEnabled &&
952
- (
953
- <FacebookLogin
954
- notificationState={notificationState}
955
- handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
956
- handleLoading={(val: boolean) => setIsFBLoading(val)}
957
- handleSuccessFacebookLogin={handleSuccessFacebook}
958
- />
959
- )}
960
- {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
961
- <GoogleLogin
962
- notificationState={notificationState}
963
- webClientId={configs?.google_login_client_id?.value}
964
- handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
965
- handleLoading={(val: boolean) => setIsFBLoading(val)}
966
- handleSuccessGoogleLogin={handleSuccessFacebook}
967
- />
968
- )}
969
- {(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled && (
970
- <AppleLogin
971
- notificationState={notificationState}
972
- handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
973
- handleLoading={(val: boolean) => setIsFBLoading(val)}
974
- handleSuccessAppleLogin={handleSuccessFacebook}
975
- />
976
- )}
977
- </SocialButtons>
978
- </ButtonsWrapper>
979
- </>
980
- )
981
- )}
982
- </FormSide>
983
- <Modal
984
- visible={willVerifyOtpState}
985
- onDismiss={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
986
- animationType='slide'
987
- >
988
- <Otp
989
- isCheckingCode={isCheckingCode}
990
- setCheckingCode={setCheckingCode}
991
- otpError={otpError}
992
- setOtpError={setOtpError}
993
- pinCount={numOtpInputs || 6}
994
- willVerifyOtpState={willVerifyOtpState || false}
995
- setWillVerifyOtpState={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
996
- handleLoginOtp={handleSingUpOtp}
997
- onSubmit={onSubmit}
998
- setAlertState={setAlertState}
999
- />
1000
- </Modal>
1001
- <Spinner
1002
- visible={formState.loading || validationFields.loading || isFBLoading}
1003
- />
1004
- <Alert
1005
- open={alertState.open}
1006
- content={alertState.content}
1007
- title={alertState.title || ''}
1008
- onAccept={closeAlert}
1009
- onClose={closeAlert}
1010
- />
1011
- </View>
1012
- );
932
+ {
933
+ onNavigationRedirect && loginButtonText && (
934
+ <View style={style.wrappText}>
935
+ <OText size={14} style={{ marginRight: 5 }}>
936
+ {t('MOBILE_FRONT_ALREADY_HAVE_AN_ACCOUNT', 'Already have an account?')}
937
+ </OText>
938
+ <Pressable onPress={() => onNavigationRedirect('Login')}>
939
+ <OText size={14} color={theme.colors.primary}>
940
+ {loginButtonText}
941
+ </OText>
942
+ </Pressable>
943
+ </View>
944
+ )
945
+ }
946
+ {configs && Object.keys(configs).length > 0 && !isGuest && (
947
+ (((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value && facebookLoginEnabled) ||
948
+ ((configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled) ||
949
+ ((configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled)) &&
950
+ (
951
+ <>
952
+ <View
953
+ style={{
954
+ flexDirection: 'row',
955
+ width: '100%',
956
+ justifyContent: 'space-between',
957
+ alignItems: 'center',
958
+ marginVertical: 30,
959
+ }}>
960
+ <View style={style.line} />
961
+ <OText
962
+ size={14}
963
+ mBottom={10}
964
+ style={{ paddingHorizontal: 19 }}
965
+ color={theme.colors.disabled}>
966
+ {t('OR', 'or')}
967
+ </OText>
968
+ <View style={style.line} />
969
+ </View>
970
+ <ButtonsWrapper>
971
+ <SocialButtons>
972
+ {(configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') &&
973
+ configs?.facebook_id?.value &&
974
+ facebookLoginEnabled &&
975
+ (
976
+ <FacebookLogin
977
+ notificationState={notificationState}
978
+ handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
979
+ handleLoading={(val: boolean) => setIsFBLoading(val)}
980
+ handleSuccessFacebookLogin={handleSuccessFacebook}
981
+ />
982
+ )}
983
+ {(configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled && (
984
+ <GoogleLogin
985
+ notificationState={notificationState}
986
+ webClientId={configs?.google_login_client_id?.value}
987
+ handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
988
+ handleLoading={(val: boolean) => setIsFBLoading(val)}
989
+ handleSuccessGoogleLogin={handleSuccessFacebook}
990
+ />
991
+ )}
992
+ {(configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled && (
993
+ <AppleLogin
994
+ notificationState={notificationState}
995
+ handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
996
+ handleLoading={(val: boolean) => setIsFBLoading(val)}
997
+ handleSuccessAppleLogin={handleSuccessFacebook}
998
+ />
999
+ )}
1000
+ </SocialButtons>
1001
+ </ButtonsWrapper>
1002
+ </>
1003
+ )
1004
+ )}
1005
+ </FormSide>
1006
+ <Modal
1007
+ visible={willVerifyOtpState}
1008
+ onDismiss={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
1009
+ animationType='slide'
1010
+ >
1011
+ <Otp
1012
+ isCheckingCode={isCheckingCode}
1013
+ setCheckingCode={setCheckingCode}
1014
+ otpError={otpError}
1015
+ setOtpError={setOtpError}
1016
+ pinCount={numOtpInputs || 6}
1017
+ willVerifyOtpState={willVerifyOtpState || false}
1018
+ setWillVerifyOtpState={() => setWillVerifyOtpState && setWillVerifyOtpState(false)}
1019
+ handleLoginOtp={handleSingUpOtp}
1020
+ onSubmit={onSubmit}
1021
+ setAlertState={setAlertState}
1022
+ />
1023
+ </Modal>
1024
+ <Spinner
1025
+ visible={formState.loading || validationFields.loading || isFBLoading}
1026
+ />
1027
+ <Alert
1028
+ open={alertState.open}
1029
+ content={alertState.content}
1030
+ title={alertState.title || ''}
1031
+ onAccept={closeAlert}
1032
+ onClose={closeAlert}
1033
+ />
1034
+ </View>
1035
+ );
1013
1036
  };
1014
1037
 
1015
1038
  export const SignupForm = (props: any) => {
1016
- const _numOtpInputs = 6
1017
- const signupProps = {
1018
- ...props,
1019
- numOtpInputs: _numOtpInputs,
1020
- isRecaptchaEnable: true,
1021
- UIComponent: SignupFormUI,
1022
- };
1023
- return <SignUpController {...signupProps} />;
1039
+ const _numOtpInputs = 6
1040
+ const signupProps = {
1041
+ ...props,
1042
+ numOtpInputs: _numOtpInputs,
1043
+ isRecaptchaEnable: true,
1044
+ UIComponent: SignupFormUI,
1045
+ };
1046
+ return <SignUpController {...signupProps} />;
1024
1047
  };