You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
3.4 KiB
137 lines
3.4 KiB
// import { client } from 'config/clients'
|
|
import { formIds } from 'config/form'
|
|
// import { AUTH_SERVICE_OLD } from 'config/routes'
|
|
|
|
import { Combobox } from 'features/Combobox'
|
|
import { Input } from 'features/Common'
|
|
import { T9n } from 'features/T9n'
|
|
import { Error } from 'features/Common/Input/styled'
|
|
import { ArrowLoader } from 'features/ArrowLoader'
|
|
|
|
import type { Props } from './hooks/useUserInfo'
|
|
import { useUserInfo } from './hooks/useUserInfo'
|
|
|
|
import { OutlineButton, SolidButton } from '../../styled'
|
|
import {
|
|
Form,
|
|
ButtonWrapper,
|
|
// PrivacyPolicyLink,
|
|
// PrivacyWrapper,
|
|
} from './styled'
|
|
|
|
const labelWidth = 4.75
|
|
|
|
const {
|
|
email,
|
|
firstname,
|
|
formError,
|
|
lastname,
|
|
phone,
|
|
} = formIds
|
|
|
|
export const PersonalInfoForm = (props: Props) => {
|
|
const {
|
|
handleSubmit,
|
|
hasChanges,
|
|
lang,
|
|
langOptions,
|
|
loader,
|
|
onLangSelect,
|
|
onPhoneBlur,
|
|
readFormError,
|
|
readFormValue,
|
|
resetPassword,
|
|
updateFormValue,
|
|
} = useUserInfo(props)
|
|
|
|
return (
|
|
<Form>
|
|
<Input
|
|
value={readFormValue(firstname)}
|
|
labelLexic='name'
|
|
autoComplete='given-name'
|
|
labelWidth={labelWidth}
|
|
onChange={updateFormValue(firstname)}
|
|
iconName='Edit'
|
|
maxLength={500}
|
|
withError={false}
|
|
/>
|
|
<Input
|
|
value={readFormValue(lastname)}
|
|
labelLexic='lastname'
|
|
autoComplete='family-name'
|
|
labelWidth={labelWidth}
|
|
onChange={updateFormValue(lastname)}
|
|
iconName='Edit'
|
|
maxLength={500}
|
|
withError={false}
|
|
/>
|
|
<Input
|
|
onBlur={onPhoneBlur}
|
|
value={readFormValue(phone)}
|
|
labelLexic='phone'
|
|
autoComplete='tel'
|
|
labelWidth={labelWidth}
|
|
onChange={updateFormValue(phone)}
|
|
error={readFormError(phone)}
|
|
iconName='Edit'
|
|
maxLength={100}
|
|
withError={false}
|
|
/>
|
|
<Input
|
|
value={readFormValue(email)}
|
|
error={readFormError(email)}
|
|
type='email'
|
|
labelLexic='form_email'
|
|
labelWidth={labelWidth}
|
|
onChange={updateFormValue(email)}
|
|
maxLength={500}
|
|
withError={false}
|
|
disabled
|
|
/>
|
|
<Combobox
|
|
noSearch
|
|
selected
|
|
labelLexic='language'
|
|
labelWidth={labelWidth}
|
|
value={lang}
|
|
onSelect={onLangSelect}
|
|
options={langOptions}
|
|
maxLength={500}
|
|
withError={false}
|
|
/>
|
|
<ButtonWrapper>
|
|
<SolidButton
|
|
disabled={!hasChanges()}
|
|
type='button'
|
|
onClick={handleSubmit}
|
|
>
|
|
{loader ? <ArrowLoader disabled /> : <T9n t='save_changes' />}
|
|
</SolidButton>
|
|
<OutlineButton
|
|
type='button'
|
|
onClick={resetPassword}
|
|
>
|
|
<T9n t='change_password' />
|
|
</OutlineButton>
|
|
<Error t={readFormError(formError) || ''} />
|
|
</ButtonWrapper>
|
|
{/* <PrivacyWrapper>
|
|
<PrivacyPolicyLink
|
|
target='_blank'
|
|
href={`${AUTH_SERVICE_OLD}${client.termsLink}`}
|
|
id='personal_t_k'
|
|
>
|
|
<T9n t='terms_and_conditions' />
|
|
</PrivacyPolicyLink>
|
|
<PrivacyPolicyLink
|
|
target='_blank'
|
|
href={`${AUTH_SERVICE_OLD}${client.privacyLink}`}
|
|
id='personal_policy'
|
|
>
|
|
<T9n t='privacy_policy_and_statement' />
|
|
</PrivacyPolicyLink>
|
|
</PrivacyWrapper> */}
|
|
</Form>
|
|
)
|
|
}
|
|
|