ordering-ui-react-native 0.12.54 → 0.12.55

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 (7) hide show
  1. package/package.json +1 -1
  2. package/themes/single-business/src/components/Cart/index.tsx +1 -1
  3. package/themes/single-business/src/components/PhoneInputNumber/index.tsx +103 -112
  4. package/themes/single-business/src/components/UserDetails/index.tsx +107 -111
  5. package/themes/single-business/src/components/UserDetails/styles.tsx +3 -8
  6. package/themes/single-business/src/components/UserFormDetails/index.tsx +279 -326
  7. package/themes/single-business/src/components/UserFormDetails/styles.tsx +7 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ordering-ui-react-native",
3
- "version": "0.12.54",
3
+ "version": "0.12.55",
4
4
  "description": "Reusable components made in react native",
5
5
  "main": "src/index.tsx",
6
6
  "author": "ordering.inc",
package/themes/single-business/src/components/Cart/index.tsx CHANGED
@@ -339,7 +339,7 @@ const CartUI = (props: any) => {
339
339
  onClose={() => setOpenTaxModal({ open: false, data: null })}
340
340
  entireModal
341
341
  >
342
- <TaxInformation data={openTaxModal.data} products={cart.products} />
342
+ <TaxInformation data={openTaxModal.data} products={cart?.products} />
343
343
  </OModal>
344
344
  </Container>
345
345
  )
package/themes/single-business/src/components/PhoneInputNumber/index.tsx CHANGED
@@ -1,127 +1,118 @@
1
1
  import React, { useEffect, useRef, useState } from 'react';
2
2
  import PhoneInput from "react-native-phone-number-input";
3
- import { StyleSheet, View } from 'react-native';
3
+ import { StyleSheet } from 'react-native';
4
4
  import { useLanguage, useConfig } from 'ordering-components/native';
5
- import { useTheme } from 'styled-components/native';
5
+
6
6
  import { Wrapper } from './styles'
7
7
 
8
8
  import { PhoneInputParams } from '../../types';
9
- import { OIcon, OText } from '../shared';
10
- import { transformCountryCode } from '../../utils'
9
+ import { OText } from '../shared';
10
+ import {transformCountryCode} from '../../utils'
11
+ import {I18nManager} from 'react-native'
12
+ import { useTheme } from 'styled-components/native';
11
13
 
12
14
  export const PhoneInputNumber = (props: PhoneInputParams) => {
13
- const {
14
- data,
15
- handleData,
16
- defaultValue,
17
- defaultCode,
18
- forwardRef,
19
- textInputProps,
20
- boxStyle,
21
- inputStyle,
22
- textStyle,
23
- flagStyle,
24
- noDropIcon
25
- } = props
26
-
27
- const theme = useTheme();
28
-
15
+ const {
16
+ data,
17
+ handleData,
18
+ defaultValue,
19
+ defaultCode,
20
+ forwardRef,
21
+ textInputProps
22
+ } = props
29
23
 
30
- const style = StyleSheet.create({
31
- input: {
32
- backgroundColor: theme.colors.white,
33
- borderRadius: 7.6,
34
- borderWidth: 1,
35
- borderColor: theme.colors.border,
36
- paddingBottom: 0,
37
- paddingTop: 0,
38
- flexGrow: 1,
39
- flex: 1,
40
- height: 50,
41
- },
42
- countryBtn: {
43
- borderWidth: 1,
44
- borderColor: theme.colors.border,
45
- borderRadius: 7.6,
46
- marginEnd: 9,
47
- }
48
- })
24
+ const theme = useTheme();
49
25
 
26
+ const style = StyleSheet.create({
27
+ input: {
28
+ backgroundColor: theme.colors.white,
29
+ borderRadius: 8,
30
+ borderWidth: 1,
31
+ borderColor: theme.colors.border,
32
+ paddingVertical: 0,
33
+ flexGrow: 1,
34
+ flex: 1,
35
+ height: 50,
36
+ },
37
+ countryBtn: {
38
+ borderWidth: 1,
39
+ borderColor: theme.colors.border,
40
+ borderRadius: 8,
41
+ marginEnd: 9,
42
+ }
43
+ })
50
44
 
51
- const [, t] = useLanguage()
52
- const [{ configs }] = useConfig()
53
- const phoneInput = useRef<PhoneInput>(null);
54
- const [userphoneNumber, setUserphoneNumber] = useState('');
45
+ const [, t] = useLanguage()
46
+ const [{ configs }] = useConfig()
47
+ const phoneInput = useRef<PhoneInput>(null);
48
+ const [userphoneNumber, setUserphoneNumber] = useState('');
55
49
 
56
- const handleChangeNumber = (number: any) => {
57
- setUserphoneNumber(number)
58
- }
50
+ const handleChangeNumber = (number: any) => {
51
+ setUserphoneNumber(number)
52
+ }
59
53
 
60
- useEffect(() => {
61
- if ((defaultValue && userphoneNumber) || defaultValue === undefined || defaultValue === '') {
62
- if (userphoneNumber) {
63
- const checkValid = phoneInput.current?.isValidNumber(userphoneNumber);
64
- const callingCode = phoneInput.current?.getCallingCode();
65
- const formattedNumber = phoneInput.current?.getNumberAfterPossiblyEliminatingZero();
66
- const regex = /^[0-9]*$/
67
- const cellphone = userphoneNumber.slice(0, 0) + userphoneNumber.slice(1, userphoneNumber.length)
68
- const validNumber = regex.test(cellphone)
69
- if ((!checkValid && formattedNumber?.number) || !validNumber) {
70
- handleData && handleData({
71
- ...data,
72
- error: t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid')
73
- })
74
- return
75
- }
76
- handleData && handleData({
77
- ...data,
78
- error: '',
79
- phone: {
80
- country_phone_code: callingCode,
81
- cellphone: formattedNumber?.number
82
- }
83
- })
84
- } else {
85
- handleData && handleData({
86
- ...data,
87
- error: '',
88
- phone: {
89
- country_phone_code: null,
90
- cellphone: null
91
- }
92
- })
93
- }
94
- }
95
- }, [userphoneNumber])
54
+ useEffect(() => {
55
+ if((defaultValue && userphoneNumber) || !defaultValue){
56
+ if (userphoneNumber === '') return;
57
+ if (userphoneNumber) {
58
+ const checkValid = phoneInput.current?.isValidNumber(userphoneNumber);
59
+ const callingCode = phoneInput.current?.getCallingCode();
60
+ const formattedNumber = phoneInput.current?.getNumberAfterPossiblyEliminatingZero();
61
+ const regex = /^[0-9]*$/
62
+ const cellphone = userphoneNumber.slice(0, 0) + userphoneNumber.slice(1, userphoneNumber.length)
63
+ const validNumber = regex.test(cellphone)
64
+ if ((!checkValid && formattedNumber?.number) || !validNumber) {
65
+ handleData && handleData({
66
+ ...data,
67
+ error: t('INVALID_ERROR_PHONE_NUMBER', 'The Phone Number field is invalid')
68
+ })
69
+ return
70
+ }
71
+ handleData && handleData({
72
+ ...data,
73
+ error: '',
74
+ phone: {
75
+ country_phone_code: callingCode,
76
+ cellphone: formattedNumber?.number
77
+ }
78
+ })
79
+ } else {
80
+ handleData && handleData({
81
+ ...data,
82
+ error: '',
83
+ phone: {
84
+ country_phone_code: null,
85
+ cellphone: null
86
+ }
87
+ })
88
+ }
89
+ }
90
+ }, [userphoneNumber])
96
91
 
97
- return (
98
- <Wrapper>
99
- <PhoneInput
100
- ref={phoneInput}
101
- defaultValue={userphoneNumber || defaultValue}
102
- defaultCode={defaultCode ? transformCountryCode(defaultCode) : configs?.default_country_code?.value}
103
- onChangeFormattedText={(text: string) => handleChangeNumber(text)}
104
- withDarkTheme
105
- countryPickerProps={{ withAlphaFilter: true }}
106
- textContainerStyle={{ ...style.input, ...inputStyle ? inputStyle : {} }}
107
- textInputStyle={textStyle}
108
- codeTextStyle={textStyle}
109
- flagButtonStyle={flagStyle}
110
- countryPickerButtonStyle={{ ...style.countryBtn, ...boxStyle ? boxStyle : {} }}
111
- placeholder={t('PHONE_NUMBER', 'Phone Number')}
112
- textInputProps={{ autoCompleteType: 'tel', ref: forwardRef, ...textInputProps }}
113
- containerStyle={{ width: '100%' }}
114
- renderDropdownImage={noDropIcon ? <View /> : <OIcon src={theme.images.general.arrow_down} width={13} color={'#B1BCCC'}></OIcon>}
115
- />
116
- {!!data?.error && (
117
- <OText
118
- size={16}
119
- color={theme.colors.error}
120
- style={{ textAlign: 'center', marginTop: 5 }}
121
- >
122
- {data.error}
123
- </OText>
124
- )}
125
- </Wrapper>
126
- )
92
+ return (
93
+ <Wrapper>
94
+ <PhoneInput
95
+ ref={phoneInput}
96
+ defaultValue={userphoneNumber || defaultValue}
97
+ defaultCode={defaultCode ? transformCountryCode(defaultCode) : configs?.default_country_code?.value}
98
+ onChangeFormattedText={(text : string) => handleChangeNumber(text)}
99
+ withDarkTheme
100
+ textInputStyle={{textAlign: I18nManager.isRTL ? 'right' : 'left'}}
101
+ countryPickerProps={{withAlphaFilter:true}}
102
+ textContainerStyle={style.input}
103
+ placeholder={t('PHONE_NUMBER', 'Phone Number')}
104
+ countryPickerButtonStyle={{ ...style.countryBtn }}
105
+ textInputProps={{autoCompleteType: 'tel', ref: forwardRef, ...textInputProps}}
106
+ />
107
+ {!!data?.error && (
108
+ <OText
109
+ size={16}
110
+ color={theme.colors.error}
111
+ style={{ textAlign: 'center', marginTop: 5 }}
112
+ >
113
+ {data.error}
114
+ </OText>
115
+ )}
116
+ </Wrapper>
117
+ )
127
118
  }
package/themes/single-business/src/components/UserDetails/index.tsx CHANGED
@@ -1,134 +1,130 @@
1
- import React, { useEffect, useState } from 'react';
2
- import { TouchableOpacity, View } from 'react-native';
1
+ import React, { useEffect } from 'react';
3
2
  import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons';
4
3
 
5
- import { UDContainer, UDHeader, UDForm, UDInfo, EditBtn } from './styles';
4
+ import { UDContainer, UDHeader, UDInfo, } from './styles';
6
5
 
7
6
  import {
8
- UserFormDetails as UserFormController,
9
- useLanguage,
10
- useSession,
7
+ UserFormDetails as UserFormController,
8
+ useLanguage,
9
+ useSession
11
10
  } from 'ordering-components/native';
12
- import { useTheme } from 'styled-components/native';
13
- import { OIcon, OText } from '../shared';
11
+
12
+ import { OText } from '../shared';
14
13
 
15
14
  import { UserFormDetailsUI } from '../UserFormDetails';
16
15
  import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
16
+ import { useTheme } from 'styled-components/native';
17
17
 
18
18
  const UserDetailsUI = (props: any) => {
19
- const {
20
- isEdit,
21
- formState,
22
- cleanFormState,
23
- cartStatus,
24
- toggleIsEdit,
25
- validationFields,
26
- isUserDetailsEdit,
27
- phoneUpdate,
28
- togglePhoneUpdate
29
- } = props
30
-
31
- const theme = useTheme();
19
+ const {
20
+ isEdit,
21
+ formState,
22
+ cleanFormState,
23
+ cartStatus,
24
+ toggleIsEdit,
25
+ validationFields,
26
+ isUserDetailsEdit,
27
+ phoneUpdate,
28
+ togglePhoneUpdate,
29
+ isCheckout
30
+ } = props
32
31
 
33
- const [, t] = useLanguage()
34
- const [{ user }] = useSession()
35
- const userData = props.userData || (!formState.result.error && formState.result?.result) || user
32
+ const theme = useTheme();
33
+ const [, t] = useLanguage()
34
+ const [{ user }] = useSession()
35
+ const userData = props.userData || (!formState.result.error && formState.result?.result) || user
36
36
 
37
37
 
38
- useEffect(() => {
39
- if (isUserDetailsEdit) {
40
- !isEdit && toggleIsEdit()
41
- }
42
- }, [isUserDetailsEdit])
38
+ useEffect(() => {
39
+ if (isUserDetailsEdit) {
40
+ !isEdit && toggleIsEdit()
41
+ }
42
+ }, [isUserDetailsEdit])
43
43
 
44
- const toggleEditState = () => {
45
- toggleIsEdit()
46
- cleanFormState({ changes: {} })
47
- }
44
+ const toggleEditState = () => {
45
+ toggleIsEdit()
46
+ cleanFormState({ changes: {} })
47
+ }
48
48
 
49
- useEffect(() => {
50
- if (user?.cellphone && !user?.country_phone_code) {
51
- togglePhoneUpdate(true)
52
- } else {
53
- togglePhoneUpdate(false)
54
- }
55
- }, [user?.country_phone_code])
49
+ useEffect(() => {
50
+ if (user?.cellphone && !user?.country_phone_code) {
51
+ togglePhoneUpdate(true)
52
+ } else {
53
+ togglePhoneUpdate(false)
54
+ }
55
+ }, [user?.country_phone_code])
56
56
 
57
- return (
58
- <>
59
- {(validationFields.loading || formState.loading) && (
60
- <Placeholder Animation={Fade}>
61
- <PlaceholderLine height={20} width={70} />
62
- <PlaceholderLine height={15} width={60} />
63
- <PlaceholderLine height={15} width={60} />
64
- <PlaceholderLine height={15} width={80} style={{ marginBottom: 20 }} />
65
- </Placeholder>
66
- )}
57
+ return (
58
+ <>
59
+ {(validationFields.loading || formState.loading) && (
60
+ <Placeholder Animation={Fade}>
61
+ <PlaceholderLine height={20} width={70} />
62
+ <PlaceholderLine height={15} width={60} />
63
+ <PlaceholderLine height={15} width={60} />
64
+ <PlaceholderLine height={15} width={80} style={{ marginBottom: 20 }} />
65
+ </Placeholder>
66
+ )}
67
67
 
68
- {!(validationFields.loading || formState.loading) && (
69
- <UDContainer>
70
- <UDHeader>
71
- <OText size={16} lineHeight={24} weight={'500'}>
72
- {t('CUSTOMER_DETAILS', 'Customer Details')}
73
- </OText>
74
- {cartStatus !== 2 && (
75
- !isEdit ? (
76
- <EditBtn onPress={() => toggleIsEdit()} activeOpacity={0.7}>
77
- <OIcon
78
- src={theme.images.general.pencil}
79
- width={16}
80
- height={16}
81
- color={theme.colors.editColor}
82
- style={{ marginBottom: 10, marginLeft: 5 }}
83
- />
84
- </EditBtn>
85
- ) : (
86
- <EditBtn onPress={() => toggleEditState()} activeOpacity={0.7}>
87
- <OIcon
88
- src={theme.images.general.close}
89
- color={theme.colors.cancelColor}
90
- width={16}
91
- height={16}
92
- style={{ marginBottom: 5, marginLeft: 5 }}
93
- />
94
- </EditBtn>
95
- )
96
- )}
97
- </UDHeader>
68
+ {!(validationFields.loading || formState.loading) && (
69
+ <UDContainer>
70
+ <UDHeader>
71
+ <OText size={16}>
72
+ {t('CUSTOMER_DETAILS', 'Customer Details')}
73
+ </OText>
74
+ {cartStatus !== 2 && (
75
+ !isEdit ? (
76
+ <MaterialIcon
77
+ name='pencil-outline'
78
+ size={22}
79
+ color={theme.colors.editColor}
80
+ style={{ marginBottom: 10, marginLeft: 5 }}
81
+ onPress={() => toggleIsEdit()}
82
+ />
83
+ ) : (
84
+ <MaterialIcon
85
+ name='cancel'
86
+ color={theme.colors.cancelColor}
87
+ size={20}
88
+ style={{ marginBottom: 5, marginLeft: 5 }}
89
+ onPress={() => toggleEditState()}
90
+ />
91
+ )
92
+ )}
93
+ </UDHeader>
98
94
 
99
- {!isEdit ? (
100
- <UDInfo>
101
- <OText size={12} lineHeight={18} weight={'400'}>
102
- {userData?.name} {userData?.middle_name} {userData?.lastname} {userData?.second_lastname}
103
- </OText>
104
- <OText size={12} lineHeight={18} weight={'400'}>
105
- {userData?.email}
106
- </OText>
107
- {!!(userData?.cellphone || user?.cellphone) && (
108
- <>
109
- <OText size={12} lineHeight={18} weight={'400'}>
110
- {(userData?.country_phone_code) && `+${(userData?.country_phone_code)} `}{(userData?.cellphone)}
111
- </OText>
112
- {!!phoneUpdate && (
113
- <OText color={theme.colors.error} style={{ textAlign: 'center' }}>{t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number')}</OText>
114
- )}
115
- </>
116
- )}
117
- </UDInfo>
118
- ) : (
119
- <UserFormDetailsUI {...props} phoneUpdate={phoneUpdate} togglePhoneUpdate={togglePhoneUpdate} />
120
- )}
121
- </UDContainer>
122
- )}
123
- </>
124
- )
95
+ {!isEdit ? (
96
+ <UDInfo>
97
+ <OText size={12}>
98
+ {userData?.name} {userData?.middle_name} {userData?.lastname} {userData?.second_lastname}
99
+ </OText>
100
+ <OText size={12} numberOfLines={1}>
101
+ {userData?.email}
102
+ </OText>
103
+ {!!(userData?.cellphone || user?.cellphone) && (
104
+ <>
105
+ <OText size={12}>
106
+ {(userData?.country_phone_code) && `+${(userData?.country_phone_code)} `}{(userData?.cellphone)}
107
+ </OText>
108
+ {!!phoneUpdate && (
109
+ <OText color={theme.colors.error} style={{ textAlign: 'center', width: '100%'}}>{t('NECESSARY_UPDATE_COUNTRY_PHONE_CODE', 'It is necessary to update your phone number')}</OText>
110
+ )}
111
+ </>
112
+ )}
113
+ </UDInfo>
114
+ ) : (
115
+ <UserFormDetailsUI {...props} phoneUpdate={phoneUpdate} togglePhoneUpdate={togglePhoneUpdate} isCheckout={isCheckout} />
116
+ )}
117
+ </UDContainer>
118
+ )}
119
+ </>
120
+ )
125
121
  }
126
122
 
127
123
  export const UserDetails = (props: any) => {
128
- const userDetailsProps = {
129
- ...props,
130
- UIComponent: UserDetailsUI
131
- }
124
+ const userDetailsProps = {
125
+ ...props,
126
+ UIComponent: UserDetailsUI
127
+ }
132
128
 
133
- return <UserFormController {...userDetailsProps} />
129
+ return <UserFormController {...userDetailsProps} />
134
130
  }
package/themes/single-business/src/components/UserDetails/styles.tsx CHANGED
@@ -1,15 +1,15 @@
1
- import styled, { css } from 'styled-components/native';
1
+ import styled from 'styled-components/native';
2
2
 
3
3
  export const UDContainer = styled.View``
4
4
 
5
5
  export const UDHeader = styled.View`
6
+ display: flex;
6
7
  flex-direction: row;
7
8
  align-items: center;
8
9
  `
9
10
 
10
11
  export const UDForm = styled.View`
11
12
  width: 100%;
12
- /* margin-top: 25px; */
13
13
  `
14
14
 
15
15
  export const UDInfo = styled.View`
@@ -17,10 +17,5 @@ export const UDInfo = styled.View`
17
17
  flex-direction: column;
18
18
  width: 100%;
19
19
  text-align: left;
20
+ align-items: flex-start;
20
21
  `
21
- export const EditBtn = styled.TouchableOpacity`
22
- align-items: center;
23
- justify-content: center;
24
- padding-top: 9px;
25
- width: 40px;
26
- `;
package/themes/single-business/src/components/UserFormDetails/index.tsx CHANGED
@@ -1,351 +1,304 @@
1
1
  import React, { useEffect, useState } from 'react';
2
2
  import { StyleSheet, View } from 'react-native';
3
3
  import { useSession, useLanguage, ToastType, useToast } from 'ordering-components/native';
4
- import { useTheme } from 'styled-components/native';
5
4
  import { useForm, Controller } from 'react-hook-form';
6
5
 
7
- import { UDForm, UDLoader, UDWrapper, WrapperPhone } from './styles';
6
+ import { UDForm, UDLoader, UDWrapper, WrapperPhone, EditButton } from './styles';
8
7
 
9
8
  import { OText, OButton, OInput } from '../shared';
10
9
 
11
- import { PhoneInputNumber } from '../PhoneInputNumber';
10
+ import { PhoneInputNumber } from '../PhoneInputNumber'
12
11
  import { sortInputFields } from '../../utils';
12
+ import { useTheme } from 'styled-components/native';
13
13
 
14
14
  export const UserFormDetailsUI = (props: any) => {
15
- const {
16
- isEdit,
17
- formState,
18
- showField,
19
- cleanFormState,
20
- onCloseProfile,
21
- isRequiredField,
22
- validationFields,
23
- handleChangeInput,
24
- handleButtonUpdateClick,
25
- phoneUpdate,
26
- hideUpdateButton,
27
- } = props;
28
-
29
- const theme = useTheme();
15
+ const {
16
+ isEdit,
17
+ formState,
18
+ showField,
19
+ cleanFormState,
20
+ onCloseProfile,
21
+ isRequiredField,
22
+ validationFields,
23
+ handleChangeInput,
24
+ handleButtonUpdateClick,
25
+ phoneUpdate,
26
+ handleCancelEdit,
27
+ isCheckout
28
+ } = props
30
29
 
30
+ const theme = useTheme()
31
31
 
32
- const styles = StyleSheet.create({
33
- btnOutline: {
34
- backgroundColor: '#FFF',
35
- color: theme.colors.primary,
36
- },
37
- inputStyle: {
38
- borderRadius: 0,
39
- marginBottom: 25,
40
- borderBottomWidth: 1,
41
- borderBottomColor: theme.colors.border,
42
- color: theme.colors.textNormal,
43
- fontSize: 12,
44
- padding: 0,
45
- },
46
- phoneSelect: {
47
- borderWidth: 0,
48
- marginStart: -5,
49
- marginEnd: 0,
50
- marginTop: -3,
51
- height: 32,
52
- width: 44
53
- },
54
- phoneInputStyle: {
55
- height: 30,
56
- borderWidth: 0,
57
- fontSize: 12,
58
- paddingStart: 0,
59
- paddingBottom: 0,
60
- marginBottom: -0,
61
- }
62
- });
32
+ const styles = StyleSheet.create({
33
+ btnOutline: {
34
+ backgroundColor: '#FFF',
35
+ color: theme.colors.primary
36
+ },
37
+ inputStyle: {
38
+ marginBottom: 25,
39
+ borderWidth: 1,
40
+ borderColor: theme.colors.border,
41
+ borderRadius: 8,
42
+ },
43
+ editButton: {
44
+ // flex:0,
45
+ borderRadius: 8,
46
+ borderColor: theme.colors.primary,
47
+ backgroundColor: theme.colors.white,
48
+ borderWidth: 1,
49
+ color: theme.colors.primary,
50
+ // width: 100,
51
+ // height: 50,
52
+ marginVertical: 8,
53
+ // flex: 1,
54
+ },
55
+ });
63
56
 
64
- const [, t] = useLanguage();
65
- const [, { showToast }] = useToast();
66
- const { handleSubmit, control, errors, setValue } = useForm();
57
+ const [, t] = useLanguage();
58
+ const [, { showToast }] = useToast();
59
+ const { handleSubmit, control, errors, setValue } = useForm();
67
60
 
68
- const [{ user }] = useSession();
69
- const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null);
70
- const [phoneInputData, setPhoneInputData] = useState({
71
- error: '',
72
- phone: {
73
- country_phone_code: null,
74
- cellphone: null,
75
- },
76
- });
61
+ const [{ user }] = useSession()
62
+ const [userPhoneNumber, setUserPhoneNumber] = useState<any>(null)
63
+ const [phoneInputData, setPhoneInputData] = useState({
64
+ error: '',
65
+ phone: {
66
+ country_phone_code: null,
67
+ cellphone: null
68
+ }
69
+ });
77
70
 
78
- const showInputPhoneNumber =
79
- validationFields?.fields?.checkout?.cellphone?.enabled ?? false;
71
+ const showInputPhoneNumber = validationFields?.fields?.checkout?.cellphone?.enabled ?? false
80
72
 
81
- const getInputRules = (field: any) => {
82
- const rules: any = {
83
- required: isRequiredField(field.code)
84
- ? t(
85
- `VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`,
86
- `${field.name} is required`,
87
- ).replace('_attribute_', t(field.name, field.code))
88
- : null,
89
- };
90
- if (field.code && field.code === 'email') {
91
- rules.pattern = {
92
- value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
93
- message: t('INVALID_ERROR_EMAIL', 'Invalid email address').replace(
94
- '_attribute_',
95
- t('EMAIL', 'Email'),
96
- ),
97
- };
98
- }
99
- return rules;
100
- };
73
+ const getInputRules = (field: any) => {
74
+ const rules: any = {
75
+ required: isRequiredField(field.code)
76
+ ? t(`VALIDATION_ERROR_${field.code.toUpperCase()}_REQUIRED`, `${field.name} is required`)
77
+ .replace('_attribute_', t(field.name, field.code))
78
+ : null
79
+ }
80
+ if (field.code && field.code === 'email') {
81
+ rules.pattern = {
82
+ value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
83
+ message: t('INVALID_ERROR_EMAIL', 'Invalid email address').replace('_attribute_', t('EMAIL', 'Email'))
84
+ }
85
+ }
86
+ return rules
87
+ }
101
88
 
102
- const setUserCellPhone = (isEdit = false) => {
103
- if (userPhoneNumber && !userPhoneNumber.includes('null') && !isEdit) {
104
- setUserPhoneNumber(userPhoneNumber);
105
- return;
106
- }
107
- if (user?.cellphone) {
108
- let phone = null;
109
- if (user?.country_phone_code) {
110
- phone = `+${user?.country_phone_code} ${user?.cellphone}`;
111
- } else {
112
- phone = user?.cellphone;
113
- }
114
- setUserPhoneNumber(phone);
115
- setPhoneInputData({
116
- ...phoneInputData,
117
- phone: {
118
- country_phone_code: user?.country_phone_code || null,
119
- cellphone: user?.cellphone || null,
120
- },
121
- });
122
- return;
123
- }
124
- setUserPhoneNumber(user?.cellphone || '');
125
- };
89
+ const setUserCellPhone = (isEdit = false) => {
90
+ if (userPhoneNumber && !userPhoneNumber.includes('null') && !isEdit) {
91
+ setUserPhoneNumber(userPhoneNumber)
92
+ return
93
+ }
94
+ if (user?.cellphone) {
95
+ let phone = null
96
+ if (user?.country_phone_code) {
97
+ phone = `+${user?.country_phone_code} ${user?.cellphone}`
98
+ } else {
99
+ phone = user?.cellphone
100
+ }
101
+ setUserPhoneNumber(phone)
102
+ setPhoneInputData({
103
+ ...phoneInputData,
104
+ phone: {
105
+ country_phone_code: user?.country_phone_code || null,
106
+ cellphone: user?.cellphone || null
107
+ }
108
+ })
109
+ return
110
+ }
111
+ setUserPhoneNumber(user?.cellphone || '')
112
+ }
126
113
 
127
- const onSubmit = () => {
128
- if (phoneInputData.error) {
129
- showToast(ToastType.Error, phoneInputData.error);
130
- return;
131
- }
132
- if (Object.keys(formState.changes).length > 0) {
133
- if (
134
- formState.changes?.cellphone === null &&
135
- validationFields?.fields?.checkout?.cellphone?.enabled &&
136
- validationFields?.fields?.checkout?.cellphone?.required
137
- ) {
138
- showToast(
139
- ToastType.Error,
140
- t(
141
- 'VALIDATION_ERROR_MOBILE_PHONE_REQUIRED',
142
- 'The field Phone Number is required.',
143
- ),
144
- );
145
- return;
146
- }
147
- let changes = null;
148
- if (user?.cellphone && !userPhoneNumber) {
149
- changes = {
150
- country_phone_code: '',
151
- cellphone: '',
152
- };
153
- }
154
- handleButtonUpdateClick(changes);
155
- }
156
- };
114
+ const onSubmit = () => {
115
+ if (phoneInputData.error) {
116
+ showToast(ToastType.Error, phoneInputData.error)
117
+ return
118
+ }
119
+ if (Object.keys(formState.changes).length > 0) {
120
+ if (
121
+ formState.changes?.cellphone === null &&
122
+ validationFields?.fields?.checkout?.cellphone?.enabled &&
123
+ validationFields?.fields?.checkout?.cellphone?.required
124
+ ) {
125
+ showToast(
126
+ ToastType.Error,
127
+ t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Phone Number is required.')
128
+ );
129
+ return
130
+ }
131
+ let changes = null
132
+ if (user?.cellphone && !userPhoneNumber) {
133
+ changes = {
134
+ country_phone_code: '',
135
+ cellphone: ''
136
+ }
137
+ }
138
+ handleButtonUpdateClick(changes)
139
+ }
140
+ }
157
141
 
158
- const handleChangePhoneNumber = (number: any) => {
159
- setPhoneInputData(number);
160
- let phoneNumber = {
161
- country_phone_code: {
162
- name: 'country_phone_code',
163
- value: number.phone.country_phone_code,
164
- },
165
- cellphone: {
166
- name: 'cellphone',
167
- value: number.phone.cellphone,
168
- },
169
- };
170
- handleChangeInput(phoneNumber, true);
171
- };
142
+ const handleChangePhoneNumber = (number: any) => {
143
+ setPhoneInputData(number)
144
+ let phoneNumber = {
145
+ country_phone_code: {
146
+ name: 'country_phone_code',
147
+ value: number.phone.country_phone_code
148
+ },
149
+ cellphone: {
150
+ name: 'cellphone',
151
+ value: number.phone.cellphone
152
+ }
153
+ }
154
+ handleChangeInput(phoneNumber, true)
155
+ }
172
156
 
173
- useEffect(() => {
174
- if (Object.keys(errors).length > 0) {
175
- const list = Object.values(errors);
176
- if (phoneInputData.error) {
177
- list.push({ message: phoneInputData.error });
178
- }
179
- let stringError = '';
180
- list.map((item: any, i: number) => {
181
- stringError +=
182
- i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
183
- });
184
- showToast(ToastType.Error, stringError);
185
- }
186
- }, [errors]);
157
+ useEffect(() => {
158
+ if (Object.keys(errors).length > 0) {
159
+ const list = Object.values(errors)
160
+ if (phoneInputData.error) {
161
+ list.push({ message: phoneInputData.error })
162
+ }
163
+ let stringError = ''
164
+ list.map((item: any, i: number) => {
165
+ stringError += (i + 1) === list.length ? `- ${item.message}` : `- ${item.message}\n`
166
+ })
167
+ showToast(ToastType.Error, stringError)
168
+ }
169
+ }, [errors])
187
170
 
188
- useEffect(() => {
189
- if (!formState?.loading && formState?.result?.error) {
190
- formState.result?.result &&
191
- showToast(ToastType.Error, formState.result?.result[0]);
192
- }
193
- }, [formState?.loading]);
171
+ useEffect(() => {
172
+ if ((!formState?.loading && formState?.result?.error)) {
173
+ formState.result?.result && showToast(
174
+ ToastType.Error,
175
+ formState.result?.result[0]
176
+ )
177
+ }
178
+ }, [formState?.loading])
194
179
 
195
- useEffect(() => {
196
- if (!isEdit && onCloseProfile) {
197
- onCloseProfile();
198
- }
199
- if ((user || !isEdit) && !formState?.loading) {
200
- setUserCellPhone();
201
- if (!isEdit && !formState?.loading) {
202
- cleanFormState && cleanFormState({ changes: {} });
203
- setUserCellPhone(true);
204
- }
205
- }
206
- }, [user, isEdit]);
207
- return (
208
- <>
209
- <UDForm>
210
- {!validationFields?.loading &&
211
- sortInputFields({ values: validationFields?.fields?.checkout })
212
- .length > 0 && (
213
- <UDWrapper>
214
- {sortInputFields({
215
- values: validationFields.fields?.checkout,
216
- }).map(
217
- (field: any) =>
218
- showField &&
219
- showField(field.code) && (
220
- <React.Fragment key={field.id}>
221
- <Controller
222
- key={field.id}
223
- control={control}
224
- render={() => (
225
- <>
226
- <OText size={14} lineHeight={21} color={theme.colors.textNormal} weight={'500'} style={{ textTransform: 'capitalize', alignSelf: 'flex-start' }}>
227
- {field?.code}
228
- </OText>
229
- <OInput
230
- name={field.code}
231
- placeholder={t(
232
- field.code.toUpperCase(),
233
- field?.name,
234
- )}
235
- inputStyle={styles.inputStyle}
236
- style={{ paddingLeft: 0, paddingRight: 0, marginTop: 6, height: 44, minHeight: 44 }}
237
- autoCapitalize={
238
- field.code === 'email' ? 'none' : 'sentences'
239
- }
240
- isDisabled={false}
241
- value={
242
- formState?.changes[field.code] ??
243
- (user && user[field.code]) ??
244
- ''
245
- }
246
- onChange={(val: any) => {
247
- field.code !== 'email'
248
- ? setValue(field.code, val.target.value)
249
- : setValue(
250
- field.code,
251
- val.target.value
252
- .toLowerCase()
253
- .replace(
254
- /[&,()%";:ç?<>{}\\[\]\s]/g,
255
- '',
256
- ),
257
- );
258
- field.code !== 'email'
259
- ? handleChangeInput(val)
260
- : handleChangeInput({
261
- target: {
262
- name: 'email',
263
- value: val.target.value
264
- .toLowerCase()
265
- .replace(
266
- /[&,()%";:ç?<>{}\\[\]\s]/g,
267
- '',
268
- ),
269
- },
270
- });
271
- }}
272
- autoCorrect={field.code === 'email' && false}
273
- type={
274
- field.code === 'email'
275
- ? 'email-address'
276
- : 'default'
277
- }
278
- returnKeyType="done"
279
- autoCompleteType={
280
- field.code === 'email' ? 'email' : 'off'
281
- }
282
- />
283
- </>
284
- )}
285
- name={field.code}
286
- rules={getInputRules(field)}
287
- defaultValue={user && user[field.code]}
288
- />
289
- </React.Fragment>
290
- ),
291
- )}
180
+ useEffect(() => {
181
+ if (!isEdit && onCloseProfile) {
182
+ onCloseProfile()
183
+ }
184
+ if ((user || !isEdit) && !formState?.loading) {
185
+ setUserCellPhone()
186
+ if (!isEdit && !formState?.loading) {
187
+ cleanFormState && cleanFormState({ changes: {} })
188
+ setUserCellPhone(true)
189
+ }
190
+ }
191
+ }, [user, isEdit])
192
+ return (
193
+ <>
194
+ <UDForm>
195
+ {!validationFields?.loading &&
196
+ sortInputFields({ values: validationFields?.fields?.checkout }).length > 0 &&
197
+ (
198
+ <UDWrapper>
199
+ {sortInputFields({ values: validationFields.fields?.checkout }).map((field: any) =>
200
+ (
201
+ showField && showField(field.code) && (
202
+ <React.Fragment key={field.id}>
203
+ <Controller
204
+ key={field.id}
205
+ control={control}
206
+ render={() => (
207
+ <OInput
208
+ name={field.code}
209
+ placeholder={t(field.code.toUpperCase(), field?.name)}
210
+ style={styles.inputStyle}
211
+ icon={field.code === 'email' ? theme.images.general.email : theme.images.general.user}
212
+ autoCapitalize={field.code === 'email' ? 'none' : 'sentences'}
213
+ isDisabled={!isEdit}
214
+ value={formState?.changes[field.code] ?? (user && user[field.code]) ?? ''}
215
+ onChange={(val: any) => {
216
+ field.code !== 'email' ? setValue(field.code, val.target.value) : setValue(field.code, val.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''))
217
+ field.code !== 'email' ? handleChangeInput(val) : handleChangeInput({ target: { name: 'email', value: val.target.value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, '') } })
218
+ }}
219
+ autoCorrect={field.code === 'email' && false}
220
+ type={field.code === 'email' ? 'email-address' : 'default'}
221
+ returnKeyType='done'
222
+ autoCompleteType={field.code === 'email' ? 'email' : 'off'}
223
+ />
224
+ )}
225
+ name={field.code}
226
+ rules={getInputRules(field)}
227
+ defaultValue={user && user[field.code]}
228
+ />
229
+ </React.Fragment>
230
+ )
231
+ ))}
292
232
 
293
- {!!showInputPhoneNumber && (
294
- <WrapperPhone>
295
- <OText size={14} lineHeight={21} weight={'500'} color={theme.colors.textNormal}>{t('PHONE', 'Phone')}</OText>
296
- <PhoneInputNumber
297
- data={phoneInputData}
298
- handleData={(val: any) => handleChangePhoneNumber(val)}
299
- defaultValue={phoneUpdate ? '' : user?.cellphone}
300
- defaultCode={user?.country_phone_code || null}
301
- boxStyle={styles.phoneSelect}
302
- inputStyle={styles.phoneInputStyle}
303
- textStyle={{ color: theme.colors.textNormal, fontSize: 12, padding: 0 }}
304
- noDropIcon
305
- />
306
- {phoneUpdate && (
307
- <OText
308
- size={10}
309
- color={theme.colors.error}
310
- style={{ marginHorizontal: 10, textAlign: 'center' }}>
311
- {t('YOUR_PREVIOUS_CELLPHONE', 'Your previous cellphone')}:{' '}
312
- {user?.cellphone}
313
- </OText>
314
- )}
315
- </WrapperPhone>
316
- )}
317
- </UDWrapper>
318
- )}
319
- {validationFields?.loading && (
320
- <UDLoader>
321
- <OText size={12}>{t('LOADING', 'Loading')}</OText>
322
- </UDLoader>
323
- )}
324
- </UDForm>
325
- {!hideUpdateButton && (
326
- <>
327
- {((formState &&
328
- Object.keys(formState?.changes).length > 0 &&
329
- isEdit) ||
330
- formState?.loading) && (
331
- <OButton
332
- text={
333
- formState.loading
334
- ? t('UPDATING', 'Updating...')
335
- : t('UPDATE', 'Update')
336
- }
337
- bgColor={theme.colors.white}
338
- textStyle={{ color: theme.colors.primary, fontSize: 14 }}
339
- borderColor={theme.colors.primary}
340
- isDisabled={formState.loading}
341
- imgRightSrc={null}
342
- style={{ borderRadius: 7.6, shadowOpacity: 0, width: '100%', borderWidth: 1, marginTop: 20 }}
343
- onClick={handleSubmit(onSubmit)}
344
- />
345
- )}
346
- </>
347
- )}
348
- </>
349
- );
350
- };
233
+ {!!showInputPhoneNumber && (
234
+ <WrapperPhone>
235
+ <PhoneInputNumber
236
+ data={phoneInputData}
237
+ handleData={(val: any) => handleChangePhoneNumber(val)}
238
+ defaultValue={phoneUpdate ? '' : user?.cellphone}
239
+ defaultCode={user?.country_phone_code || null}
240
+ />
241
+ {phoneUpdate && (
242
+ <OText color={theme.colors.error} style={{ marginHorizontal: 10, textAlign: 'center' }}>{t('YOUR_PREVIOUS_CELLPHONE', 'Your previous cellphone')}: {user?.cellphone}</OText>
243
+ )}
244
+ </WrapperPhone>
245
+ )}
351
246
 
247
+ </UDWrapper>
248
+ )}
249
+ {validationFields?.loading && (
250
+ <UDLoader>
251
+ <OText size={20}>
252
+ {t('LOADING', 'Loading')}
253
+ </OText>
254
+ </UDLoader>
255
+ )}
256
+ </UDForm>
257
+ <>
258
+ {!validationFields.loading && !isCheckout && (
259
+ <EditButton>
260
+ <View style={{ flex: 1 }}>
261
+ <OButton
262
+ text={t('CANCEL', 'Cancel')}
263
+ bgColor={theme.colors.white}
264
+ borderColor={theme.colors.primary}
265
+ isDisabled={formState.loading}
266
+ imgRightSrc={null}
267
+ style={{ ...styles.editButton }}
268
+ onClick={handleCancelEdit}
269
+ />
270
+ </View>
271
+ {((formState &&
272
+ Object.keys(formState?.changes).length > 0 && isEdit) || formState?.loading) &&
273
+ (
274
+ <View style={{ flex: 1, marginLeft: 5 }}>
275
+ <OButton
276
+ text={formState.loading ? t('UPDATING', 'Updating...') : t('UPDATE', 'Update')}
277
+ bgColor={theme.colors.primary}
278
+ textStyle={{ color: formState.loading ? 'black' : 'white' }}
279
+ borderColor={theme.colors.primary}
280
+ isDisabled={formState.loading}
281
+ imgRightSrc={null}
282
+ style={{ ...styles.editButton }}
283
+ onClick={handleSubmit(onSubmit)}
284
+ />
285
+ </View>
286
+ )}
287
+ </EditButton>
288
+ )}
289
+ {((formState && Object.keys(formState?.changes).length > 0 && isEdit) || formState?.loading) && isCheckout && (
290
+ <OButton
291
+ text={formState.loading ? t('UPDATING', 'Updating...') : t('UPDATE', 'Update')}
292
+ bgColor={theme.colors.primary}
293
+ textStyle={{ color: 'white' }}
294
+ style={{ borderRadius: 8 }}
295
+ borderColor={theme.colors.primary}
296
+ isDisabled={formState.loading}
297
+ imgRightSrc={null}
298
+ onClick={handleSubmit(onSubmit)}
299
+ />
300
+ )}
301
+ </>
302
+ </>
303
+ )
304
+ }
package/themes/single-business/src/components/UserFormDetails/styles.tsx CHANGED
@@ -5,7 +5,6 @@ export const UDForm = styled.View`
5
5
  align-items: center;
6
6
  flex-direction: column;
7
7
  width: 100%;
8
- margin-top: 20px;
9
8
  `
10
9
 
11
10
  export const UDWrapper = styled.View`
@@ -14,7 +13,6 @@ export const UDWrapper = styled.View`
14
13
  flex-direction: column;
15
14
  width: 100%;
16
15
  margin-top: 20px;
17
- padding-bottom: 50px;
18
16
  `
19
17
 
20
18
  export const UDLoader = styled.View`
@@ -29,7 +27,11 @@ export const UDLoader = styled.View`
29
27
 
30
28
  export const WrapperPhone = styled.View`
31
29
  margin-bottom: 25px;
32
- width: 100%;
33
- border-bottom-width: 1px;
34
- border-bottom-color: ${(props: any) => props.theme.colors.border};
30
+ `
31
+
32
+ export const EditButton = styled.View`
33
+ align-items: center;
34
+ justify-content: center;
35
+ flex-direction: row;
36
+ flex: 1;
35
37
  `