import React from 'react'; import { react2angular } from 'react2angular'; import { SubmitHandler, useForm, useWatch } from 'react-hook-form'; import { isNil as _isNil } from 'lodash'; import { User } from '../../models/user'; import { IApplication } from '../../models/application'; import { Loader } from '../base/loader'; import { FormInput } from '../form/form-input'; import { useTranslation } from 'react-i18next'; import { Avatar } from './avatar'; import { GenderInput } from './gender-input'; import { ChangePassword } from './change-password'; import { PasswordInput } from './password-input'; import { FormSwitch } from '../form/form-switch'; import { FormRichText } from '../form/form-rich-text'; import MemberAPI from '../../api/member'; declare const Application: IApplication; interface UserProfileFormProps { action: 'create' | 'update', size?: 'small' | 'large', user: User, className?: string, onError: (message: string) => void, onSuccess: (user: User) => void, } export const UserProfileForm: React.FC = ({ action, size, user, className, onError, onSuccess }) => { const { t } = useTranslation('shared'); // regular expression to validate the the input fields const phoneRegex = /^((00|\+)[0-9]{2,3})?[0-9]{4,14}$/; const urlRegex = /^(https?:\/\/)([\da-z.-]+)\.([-a-z0-9.]{2,30})([/\w .-]*)*\/?$/; const { handleSubmit, register, control, formState } = useForm({ defaultValues: { ...user } }); const output = useWatch({ control }); const [isOrganization, setIsOrganization] = React.useState(!_isNil(user.invoicing_profile_attributes.organization_attributes)); /** * Callback triggered when the form is submitted: process with the user creation or update. */ const onSubmit: SubmitHandler = (data: User) => { MemberAPI[action](data) .then(res => { onSuccess(res); }) .catch((error) => { onError(error); }); }; return (

{t('app.shared.user_profile_form.personal_data')}

{t('app.shared.user_profile_form.account_data')}

{/* TODO: no password change if sso */} {action === 'update' && } {action === 'create' && }

{t('app.shared.user_profile_form.organization_data')}

{isOrganization &&
}

{t('app.shared.user_profile_form.profile_data')}

{t('app.shared.user_profile_form.preferences_data')}

); }; UserProfileForm.defaultProps = { size: 'large' }; const UserProfileFormWrapper: React.FC = (props) => { return ( ); }; Application.Components.component('userProfileForm', react2angular(UserProfileFormWrapper, ['action', 'size', 'user', 'className', 'onError', 'onSuccess']));