@kiosinc/commons-rn 0.1.19 → 0.1.21

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 (38) hide show
  1. package/lib/commonjs/auth/screens/LoginScreen.js +8 -8
  2. package/lib/commonjs/auth/screens/LoginScreen.js.map +1 -1
  3. package/lib/commonjs/auth/screens/ResetPassword.js +8 -2
  4. package/lib/commonjs/auth/screens/ResetPassword.js.map +1 -1
  5. package/lib/commonjs/auth/screens/SignUp.js +9 -3
  6. package/lib/commonjs/auth/screens/SignUp.js.map +1 -1
  7. package/lib/commonjs/auth/screens/SignUpPassword.js +8 -2
  8. package/lib/commonjs/auth/screens/SignUpPassword.js.map +1 -1
  9. package/lib/commonjs/auth/screens/VerifyPhoneNumber.js +8 -2
  10. package/lib/commonjs/auth/screens/VerifyPhoneNumber.js.map +1 -1
  11. package/lib/commonjs/components/TextInput.js +4 -2
  12. package/lib/commonjs/components/TextInput.js.map +1 -1
  13. package/lib/module/auth/screens/LoginScreen.js +9 -9
  14. package/lib/module/auth/screens/LoginScreen.js.map +1 -1
  15. package/lib/module/auth/screens/ResetPassword.js +9 -3
  16. package/lib/module/auth/screens/ResetPassword.js.map +1 -1
  17. package/lib/module/auth/screens/SignUp.js +10 -4
  18. package/lib/module/auth/screens/SignUp.js.map +1 -1
  19. package/lib/module/auth/screens/SignUpPassword.js +9 -3
  20. package/lib/module/auth/screens/SignUpPassword.js.map +1 -1
  21. package/lib/module/auth/screens/VerifyPhoneNumber.js +9 -3
  22. package/lib/module/auth/screens/VerifyPhoneNumber.js.map +1 -1
  23. package/lib/module/components/TextInput.js +4 -2
  24. package/lib/module/components/TextInput.js.map +1 -1
  25. package/lib/typescript/src/auth/screens/LoginScreen.d.ts.map +1 -1
  26. package/lib/typescript/src/auth/screens/ResetPassword.d.ts.map +1 -1
  27. package/lib/typescript/src/auth/screens/SignUp.d.ts.map +1 -1
  28. package/lib/typescript/src/auth/screens/SignUpPassword.d.ts.map +1 -1
  29. package/lib/typescript/src/auth/screens/VerifyPhoneNumber.d.ts.map +1 -1
  30. package/lib/typescript/src/components/TextInput.d.ts +1 -0
  31. package/lib/typescript/src/components/TextInput.d.ts.map +1 -1
  32. package/package.json +1 -1
  33. package/src/auth/screens/LoginScreen.tsx +85 -91
  34. package/src/auth/screens/ResetPassword.tsx +46 -42
  35. package/src/auth/screens/SignUp.tsx +106 -102
  36. package/src/auth/screens/SignUpPassword.tsx +69 -65
  37. package/src/auth/screens/VerifyPhoneNumber.tsx +56 -52
  38. package/src/components/TextInput.tsx +11 -6
package/src/auth/screens/SignUp.tsx CHANGED
@@ -6,6 +6,7 @@ import {
6
6
  Button,
7
7
  LinkButton,
8
8
  KeyboardAvoidingView,
9
+ Header,
9
10
  } from '../../components';
10
11
  import React from 'react';
11
12
  import { useTranslation } from 'react-i18next';
@@ -58,37 +59,20 @@ export const SignUpScreen = () => {
58
59
  };
59
60
 
60
61
  return (
61
- <ParentView px="16" justifyContent="center">
62
- <KeyboardAvoidingView
63
- alignSelf="center"
64
- justifyContent={'center'}
65
- width={{ phone: '100%', tablet: 372 }}
66
- >
67
- <View alignItems="center">
68
- <Text pb="40" variant="titleLarge">
69
- {t('authentication.createAccountTitle')}
70
- </Text>
71
- </View>
72
- <View justifyContent="center">
73
- <Controller
74
- control={control}
75
- render={({ field: { onChange, onBlur, value } }) => {
76
- return (
77
- <TextInput
78
- my="5"
79
- mode="outlined"
80
- error={!!errors.displayName?.message}
81
- errorMessage={errors.displayName?.message}
82
- onBlur={onBlur}
83
- onChangeText={onChange}
84
- value={value}
85
- label={t('authentication.displayName')}
86
- />
87
- );
88
- }}
89
- name="displayName"
90
- />
91
- {Config.APP_NAME !== 'gusteau' && (
62
+ <ParentView px="16">
63
+ <Header left={10} position={'absolute'} zIndex={'100'} />
64
+ <View flex={1} justifyContent={'center'}>
65
+ <KeyboardAvoidingView
66
+ alignSelf="center"
67
+ justifyContent={'center'}
68
+ width={{ phone: '100%', tablet: 372 }}
69
+ >
70
+ <View alignItems="center">
71
+ <Text pb="40" variant="titleLarge">
72
+ {t('authentication.createAccountTitle')}
73
+ </Text>
74
+ </View>
75
+ <View justifyContent="center">
92
76
  <Controller
93
77
  control={control}
94
78
  render={({ field: { onChange, onBlur, value } }) => {
@@ -96,85 +80,105 @@ export const SignUpScreen = () => {
96
80
  <TextInput
97
81
  my="5"
98
82
  mode="outlined"
99
- error={!!errors.name?.message}
100
- errorMessage={errors.name?.message}
83
+ error={!!errors.displayName?.message}
84
+ errorMessage={errors.displayName?.message}
101
85
  onBlur={onBlur}
102
86
  onChangeText={onChange}
103
87
  value={value}
104
- label={t('authentication.businessName')}
88
+ label={t('authentication.displayName')}
105
89
  />
106
90
  );
107
91
  }}
108
- name="name"
92
+ name="displayName"
109
93
  />
110
- )}
111
- <Controller
112
- control={control}
113
- render={({ field: { onChange, onBlur, value } }) => {
114
- return (
115
- <TextInput
116
- my="5"
117
- autoCapitalize="none"
118
- keyboardType="email-address"
119
- mode="outlined"
120
- autoComplete="email"
121
- error={!!errors.email?.message}
122
- errorMessage={errors.email?.message}
123
- onBlur={onBlur}
124
- onChangeText={onChange}
125
- value={value}
126
- label={t('authentication.email')}
127
- />
128
- );
129
- }}
130
- name="email"
131
- />
132
- <Controller
133
- control={control}
134
- render={({ field: { onChange, onBlur, value } }) => {
135
- return (
136
- <TextInput
137
- my="5"
138
- mode="outlined"
139
- error={!!errors.phoneNumber?.message}
140
- errorMessage={errors.phoneNumber?.message}
141
- onBlur={onBlur}
142
- onChangeText={onChange}
143
- value={value}
144
- label={t('authentication.phoneNumber')}
145
- />
146
- );
147
- }}
148
- name="phoneNumber"
149
- />
150
- </View>
151
- <Button
152
- loading={isCheckingIsRegistered}
153
- mt="48"
154
- onPress={handleSubmit(onSubmit)}
155
- mode="contained"
156
- >
157
- {t('authentication.createAccount')}
158
- </Button>
159
- <View flexDirection="row" flexWrap="wrap" pt="10">
160
- <Text>{t('authentication.byContinue')}</Text>
161
- <LinkButton
162
- labelStyle={style.termsAndConditions}
163
- mode="text"
164
- onPress={() => Linking.openURL(TERMS_OF_SERVICE)}
165
- >
166
- {t('authentication.termsAndConditions')}
167
- </LinkButton>
168
- <Text>{t('authentication.and')}</Text>
169
- <LinkButton
170
- labelStyle={style.privacyPolicy}
171
- mode="text"
172
- onPress={() => Linking.openURL(PRIVACY_POLICY)}
94
+ {Config.APP_NAME !== 'gusteau' && (
95
+ <Controller
96
+ control={control}
97
+ render={({ field: { onChange, onBlur, value } }) => {
98
+ return (
99
+ <TextInput
100
+ my="5"
101
+ mode="outlined"
102
+ error={!!errors.name?.message}
103
+ errorMessage={errors.name?.message}
104
+ onBlur={onBlur}
105
+ onChangeText={onChange}
106
+ value={value}
107
+ label={t('authentication.businessName')}
108
+ />
109
+ );
110
+ }}
111
+ name="name"
112
+ />
113
+ )}
114
+ <Controller
115
+ control={control}
116
+ render={({ field: { onChange, onBlur, value } }) => {
117
+ return (
118
+ <TextInput
119
+ my="5"
120
+ autoCapitalize="none"
121
+ keyboardType="email-address"
122
+ mode="outlined"
123
+ autoComplete="email"
124
+ error={!!errors.email?.message}
125
+ errorMessage={errors.email?.message}
126
+ onBlur={onBlur}
127
+ onChangeText={onChange}
128
+ value={value}
129
+ label={t('authentication.email')}
130
+ />
131
+ );
132
+ }}
133
+ name="email"
134
+ />
135
+ <Controller
136
+ control={control}
137
+ render={({ field: { onChange, onBlur, value } }) => {
138
+ return (
139
+ <TextInput
140
+ my="5"
141
+ mode="outlined"
142
+ error={!!errors.phoneNumber?.message}
143
+ errorMessage={errors.phoneNumber?.message}
144
+ onBlur={onBlur}
145
+ onChangeText={onChange}
146
+ value={value}
147
+ label={t('authentication.phoneNumber')}
148
+ />
149
+ );
150
+ }}
151
+ name="phoneNumber"
152
+ />
153
+ </View>
154
+ <Button
155
+ loading={isCheckingIsRegistered}
156
+ mt="48"
157
+ onPress={handleSubmit(onSubmit)}
158
+ mode="contained"
173
159
  >
174
- {t('authentication.privacyPolicy')}
175
- </LinkButton>
176
- </View>
177
- </KeyboardAvoidingView>
160
+ {t('authentication.createAccount')}
161
+ </Button>
162
+ <View flexDirection="row" flexWrap="wrap" pt="10">
163
+ <Text>{t('authentication.byContinue')}</Text>
164
+ <LinkButton
165
+ labelStyle={style.termsAndConditions}
166
+ mode="text"
167
+ onPress={() => Linking.openURL(TERMS_OF_SERVICE)}
168
+ >
169
+ {t('authentication.termsAndConditions')}
170
+ </LinkButton>
171
+ <Text>{t('authentication.and')}</Text>
172
+ <LinkButton
173
+ labelStyle={style.privacyPolicy}
174
+ mode="text"
175
+ onPress={() => Linking.openURL(PRIVACY_POLICY)}
176
+ >
177
+ {t('authentication.privacyPolicy')}
178
+ </LinkButton>
179
+ </View>
180
+ </KeyboardAvoidingView>
181
+ </View>
178
182
  </ParentView>
179
183
  );
180
184
  };
package/src/auth/screens/SignUpPassword.tsx CHANGED
@@ -5,6 +5,7 @@ import {
5
5
  Button,
6
6
  KeyboardAvoidingView,
7
7
  TextInput,
8
+ Header,
8
9
  } from '../../components';
9
10
  import type { RouteProp } from '@react-navigation/native';
10
11
  import React from 'react';
@@ -56,73 +57,76 @@ export const SignUpPassword: React.FC<SignUpPasswordProps> = ({ route }) => {
56
57
  };
57
58
 
58
59
  return (
59
- <ParentView justifyContent="center" px="16">
60
- <KeyboardAvoidingView
61
- alignSelf="center"
62
- justifyContent={'center'}
63
- width={{ phone: '100%', tablet: 372 }}
64
- >
65
- <View alignItems="center">
66
- <Text textAlign="center" variant="titleLarge">
67
- {t('authentication.createPassword')}
68
- </Text>
69
- </View>
70
- <Controller
71
- control={control}
72
- render={({ field: { onChange, onBlur, value } }) => {
73
- const passwordErrors = Object.values(
74
- errors.password?.types ?? []
75
- ).flat();
60
+ <ParentView px="16">
61
+ <Header left={10} position={'absolute'} zIndex={'100'} />
62
+ <View flex={1} justifyContent={'center'}>
63
+ <KeyboardAvoidingView
64
+ alignSelf="center"
65
+ justifyContent={'center'}
66
+ width={{ phone: '100%', tablet: 372 }}
67
+ >
68
+ <View alignItems="center">
69
+ <Text textAlign="center" variant="titleLarge">
70
+ {t('authentication.createPassword')}
71
+ </Text>
72
+ </View>
73
+ <Controller
74
+ control={control}
75
+ render={({ field: { onChange, onBlur, value } }) => {
76
+ const passwordErrors = Object.values(
77
+ errors.password?.types ?? []
78
+ ).flat();
76
79
 
77
- return (
78
- <View mt="48">
79
- <TextInput
80
- error={!!errors.password?.message}
81
- my="5"
82
- secureTextEntry={true}
83
- mode="outlined"
84
- autoComplete="new-password"
85
- onBlur={onBlur}
86
- onChangeText={onChange}
87
- value={value}
88
- label={t('authentication.password')}
89
- />
90
- <Text pt="4">{t('authentication.passwordMustContain')}</Text>
91
- {passwordExpectations.map((expectation, index) => {
92
- const didExpectationFoundInErrors =
93
- passwordErrors?.includes(expectation) ?? false;
80
+ return (
81
+ <View mt="48">
82
+ <TextInput
83
+ error={!!errors.password?.message}
84
+ my="5"
85
+ secureTextEntry={true}
86
+ mode="outlined"
87
+ autoComplete="new-password"
88
+ onBlur={onBlur}
89
+ onChangeText={onChange}
90
+ value={value}
91
+ label={t('authentication.password')}
92
+ />
93
+ <Text pt="4">{t('authentication.passwordMustContain')}</Text>
94
+ {passwordExpectations.map((expectation, index) => {
95
+ const didExpectationFoundInErrors =
96
+ passwordErrors?.includes(expectation) ?? false;
94
97
 
95
- return (
96
- <View flexDirection="row" alignItems="center" key={index}>
97
- <Text
98
- variant="bodySmall"
99
- color={
100
- isSubmitted
101
- ? didExpectationFoundInErrors
102
- ? 'error'
103
- : 'primary'
104
- : 'onBackground'
105
- }
106
- >
107
- {'• ' + expectation}
108
- </Text>
109
- </View>
110
- );
111
- })}
112
- </View>
113
- );
114
- }}
115
- name="password"
116
- />
117
- <Button
118
- mt="48"
119
- loading={isVerifyingPhoneNumber}
120
- mode="contained"
121
- onPress={handleSubmit(onSubmit)}
122
- >
123
- {t('continue')}
124
- </Button>
125
- </KeyboardAvoidingView>
98
+ return (
99
+ <View flexDirection="row" alignItems="center" key={index}>
100
+ <Text
101
+ variant="bodySmall"
102
+ color={
103
+ isSubmitted
104
+ ? didExpectationFoundInErrors
105
+ ? 'error'
106
+ : 'primary'
107
+ : 'onBackground'
108
+ }
109
+ >
110
+ {'• ' + expectation}
111
+ </Text>
112
+ </View>
113
+ );
114
+ })}
115
+ </View>
116
+ );
117
+ }}
118
+ name="password"
119
+ />
120
+ <Button
121
+ mt="48"
122
+ loading={isVerifyingPhoneNumber}
123
+ mode="contained"
124
+ onPress={handleSubmit(onSubmit)}
125
+ >
126
+ {t('continue')}
127
+ </Button>
128
+ </KeyboardAvoidingView>
129
+ </View>
126
130
  </ParentView>
127
131
  );
128
132
  };
package/src/auth/screens/VerifyPhoneNumber.tsx CHANGED
@@ -6,6 +6,7 @@ import {
6
6
  LinkButton,
7
7
  OtpInputs,
8
8
  KeyboardAvoidingView,
9
+ Header,
9
10
  } from '../../components';
10
11
  import type { RouteProp } from '@react-navigation/native';
11
12
  import React from 'react';
@@ -46,59 +47,62 @@ export const VerifyPhoneNumberScreen: React.FC<
46
47
  };
47
48
 
48
49
  return (
49
- <ParentView justifyContent="center" px="16">
50
- <KeyboardAvoidingView
51
- alignSelf="center"
52
- justifyContent={'center'}
53
- width={{ phone: '100%', tablet: 372 }}
54
- >
55
- <View alignItems="center">
56
- <Text pb="8" textAlign="center" variant="titleLarge">
57
- {t('authentication.verifyYourNumber')}
58
- </Text>
59
- <Text
60
- color="onSurfaceVariant"
61
- pb="48"
62
- textAlign="center"
63
- variant="bodyLarge"
64
- >
65
- {t('authentication.codeSent')}
66
- </Text>
67
- </View>
68
- <Controller
69
- control={control}
70
- render={({ field: { onChange, value } }) => {
71
- return (
72
- <OtpInputs
73
- handleChange={onChange}
74
- code={value}
75
- numberOfInputs={6}
76
- />
77
- );
78
- }}
79
- name="code"
80
- />
81
- <Button
82
- mt="48"
83
- disabled={isResendingCode || isSigningUp}
84
- loading={isSigningUp}
85
- mode="contained"
86
- onPress={handleSubmit(onSubmit)}
87
- >
88
- {t('continue')}
89
- </Button>
90
- <LinkButton
91
- disabled={isResendingCode || isSigningUp}
92
- loading={isResendingCode}
93
- mt="48"
94
- mode="text"
95
- onPress={() => {
96
- resendCode(params as any);
97
- }}
50
+ <ParentView px="16">
51
+ <Header left={10} position={'absolute'} zIndex={'100'} />
52
+ <View flex={1} justifyContent={'center'}>
53
+ <KeyboardAvoidingView
54
+ alignSelf="center"
55
+ justifyContent={'center'}
56
+ width={{ phone: '100%', tablet: 372 }}
98
57
  >
99
- {t('authentication.resendCode')}
100
- </LinkButton>
101
- </KeyboardAvoidingView>
58
+ <View alignItems="center">
59
+ <Text pb="8" textAlign="center" variant="titleLarge">
60
+ {t('authentication.verifyYourNumber')}
61
+ </Text>
62
+ <Text
63
+ color="onSurfaceVariant"
64
+ pb="48"
65
+ textAlign="center"
66
+ variant="bodyLarge"
67
+ >
68
+ {t('authentication.codeSent')}
69
+ </Text>
70
+ </View>
71
+ <Controller
72
+ control={control}
73
+ render={({ field: { onChange, value } }) => {
74
+ return (
75
+ <OtpInputs
76
+ handleChange={onChange}
77
+ code={value}
78
+ numberOfInputs={6}
79
+ />
80
+ );
81
+ }}
82
+ name="code"
83
+ />
84
+ <Button
85
+ mt="48"
86
+ disabled={isResendingCode || isSigningUp}
87
+ loading={isSigningUp}
88
+ mode="contained"
89
+ onPress={handleSubmit(onSubmit)}
90
+ >
91
+ {t('continue')}
92
+ </Button>
93
+ <LinkButton
94
+ disabled={isResendingCode || isSigningUp}
95
+ loading={isResendingCode}
96
+ mt="48"
97
+ mode="text"
98
+ onPress={() => {
99
+ resendCode(params as any);
100
+ }}
101
+ >
102
+ {t('authentication.resendCode')}
103
+ </LinkButton>
104
+ </KeyboardAvoidingView>
105
+ </View>
102
106
  </ParentView>
103
107
  );
104
108
  };
package/src/components/TextInput.tsx CHANGED
@@ -49,6 +49,7 @@ const restyleFunctions = composeRestyleFunctions<ThemeType, RestyleProps>([
49
49
  type Props = RestyleProps &
50
50
  TextInputProps & {
51
51
  errorMessage?: string;
52
+ rightIcon?: React.ReactNode;
52
53
  };
53
54
 
54
55
  export const TextInputStyled = ({ ...rest }: Props) => {
@@ -60,6 +61,7 @@ export const TextInputStyled = ({ ...rest }: Props) => {
60
61
  export const TextInput: React.FC<Props> = ({
61
62
  errorMessage,
62
63
  secureTextEntry,
64
+ rightIcon,
63
65
  ...rest
64
66
  }) => {
65
67
  const [status, setStatus] = React.useState('checked');
@@ -78,7 +80,7 @@ export const TextInput: React.FC<Props> = ({
78
80
  secureTextEntry={shouldShowPassword && secureTextEntry}
79
81
  {...rest}
80
82
  />
81
- {secureTextEntry && (
83
+ {(secureTextEntry || rightIcon) && (
82
84
  <View
83
85
  pt="4"
84
86
  justifyContent="center"
@@ -86,11 +88,13 @@ export const TextInput: React.FC<Props> = ({
86
88
  position="absolute"
87
89
  width={48}
88
90
  >
89
- <ToggleButton
90
- icon={shouldShowPassword ? 'eye' : 'eye-off'}
91
- size={20}
92
- onPress={onButtonToggle}
93
- />
91
+ {rightIcon ?? (
92
+ <ToggleButton
93
+ icon={shouldShowPassword ? 'eye' : 'eye-off'}
94
+ size={20}
95
+ onPress={onButtonToggle}
96
+ />
97
+ )}
94
98
  </View>
95
99
  )}
96
100
  </View>
@@ -103,6 +107,7 @@ export const TextInput: React.FC<Props> = ({
103
107
  size={14}
104
108
  width={20}
105
109
  margin="0"
110
+ bg={'background'}
106
111
  iconColor={theme.colors.error}
107
112
  />
108
113
  <Text variant="bodySmall" color="error">