diff --git a/.gitignore b/.gitignore index 260cd98..b6c736a 100644 --- a/.gitignore +++ b/.gitignore @@ -60,9 +60,9 @@ buck-out/ haul-debug.log .idea -dist compiled assets/fonts build .expo +dist diff --git a/src/recipes/Login.tsx b/src/recipes/Login.tsx index 54dbb8a..21faed4 100644 --- a/src/recipes/Login.tsx +++ b/src/recipes/Login.tsx @@ -28,6 +28,12 @@ const styles = StyleSheet.create({ flexDirection: "row", alignItems: "center" }, + companyInfo: { + flexDirection: "row", + alignItems: "center", + justifyContent: "space-between", + marginBottom: 20 + }, loginUserText: { flexGrow: 1 }, @@ -86,7 +92,11 @@ export default class Login extends React.PureComponent { state = { loginPage: LOGIN_PAGE.USER_PAGE, sendingOTP: false, - otpTimeout: false + otpTimeout: false, + tenant: "", + isTenantValid: true, + fetchingTenantConfig: false, + tenantConfigFetched: false }; onOtpSuccess = () => @@ -97,9 +107,9 @@ export default class Login extends React.PureComponent { onOtpError = () => this.setState({ sendingOTP: false }); - onSendOtp = async () => { + onSendOtp = () => { this.setState({ sendingOTP: true }); - await this.props.onSendOtp(this.onOtpSuccess, this.onOtpError); + this.props.onSendOtp(this.onOtpSuccess, this.onOtpError); }; onResendOtp = () => { @@ -194,8 +204,41 @@ export default class Login extends React.PureComponent { ); }; + onTenantChange = value => { + this.setState({ + isTenantValid: true, + tenant: value + }); + }; + + onTenantSubmit = async () => { + this.setState({ fetchingTenantConfig: true }); + try { + await this.props.onTenantSubmit(this.state.tenant); + this.setState({ tenantConfigFetched: true, fetchingTenantConfig: false }); + } catch { + this.setState({ + isTenantValid: false, + fetchingTenantConfig: true + }); + } + }; + + onTenantEdit = () => { + this.setState({ + tenantConfigFetched: false + }); + }; + render() { - const { loginPage, sendingOTP } = this.state; + const { + loginPage, + sendingOTP, + tenant, + isTenantValid, + fetchingTenantConfig, + tenantConfigFetched + } = this.state; const { onLoginUserChange, loginUserValue, @@ -206,13 +249,10 @@ export default class Login extends React.PureComponent { onLoginHelp, phoneInputProps, isPhoneValid, - onTenantChange, - isTenantInvalid, tenantInputProps } = this.props; - const isButtonDisabled = - !loginUserValue || !isPhoneValid || isTenantInvalid; + const isButtonDisabled = !loginUserValue || !isPhoneValid; const extraProps = { autoFocus: true }; return ( @@ -226,41 +266,70 @@ export default class Login extends React.PureComponent { {loginPage === LOGIN_PAGE.USER_PAGE && ( <> - - - - - - + {!tenantConfigFetched && ( + + )} + {tenantConfigFetched && ( + <> + + + Company Code: + + {tenant.toUpperCase()} + + + + + Edit + + + + + + + + + + )} { Get support for login )} diff --git a/src/recipes/typings/Login.d.ts b/src/recipes/typings/Login.d.ts index fc04328..a51c51e 100644 --- a/src/recipes/typings/Login.d.ts +++ b/src/recipes/typings/Login.d.ts @@ -23,13 +23,16 @@ export interface LoginProps { otpLength: number; phoneInputProps?: InputProps; isPhoneValid: boolean; - onTenantChange: (value: string) => void; - isTenantInvalid: boolean; tenantInputProps?: InputProps; + onTenantSubmit: (string) => Promise; } export interface LoginState { loginPage: number; sendingOTP: boolean; otpTimeout: boolean; + tenant: string; + isTenantValid: boolean; + fetchingTenantConfig: boolean; + tenantConfigFetched: boolean; }