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.
141 lines
3.9 KiB
141 lines
3.9 KiB
import React from 'react'
|
|
|
|
import { T9n } from 'features/T9n'
|
|
import { Combobox } from 'features/Combobox'
|
|
import { Input, ButtonSolid } from 'features/Common'
|
|
import { Error } from 'features/Common/Input/styled'
|
|
import {
|
|
BlockTitle,
|
|
ButtonsBlock,
|
|
Form,
|
|
} from 'features/Login/styled'
|
|
import { FormStore } from 'features/FormStore'
|
|
|
|
import { formIds } from './config'
|
|
import { useRegistrationForm } from './hooks/useForm'
|
|
|
|
const labelWidth = 116
|
|
|
|
const Registration = () => {
|
|
const {
|
|
cities,
|
|
countries,
|
|
handleSubmit,
|
|
onCitySelect,
|
|
onCountrySelect,
|
|
onEmailBlur,
|
|
onPhoneBlur,
|
|
onRegionOrCityChange,
|
|
readFormError,
|
|
readFormValue,
|
|
updateFormValue,
|
|
} = useRegistrationForm()
|
|
|
|
return (
|
|
<Form onSubmit={handleSubmit} forRegPage>
|
|
<BlockTitle>
|
|
<T9n t='step_title_registration' />
|
|
</BlockTitle>
|
|
<Input
|
|
value={readFormValue(formIds.firstname)}
|
|
error={readFormError(formIds.firstname)}
|
|
labelLexic='form_firstname'
|
|
labelWidth={labelWidth}
|
|
onChange={updateFormValue(formIds.firstname)}
|
|
/>
|
|
<Input
|
|
value={readFormValue(formIds.lastname)}
|
|
error={readFormError(formIds.lastname)}
|
|
labelLexic='form_lastname'
|
|
labelWidth={labelWidth}
|
|
onChange={updateFormValue(formIds.lastname)}
|
|
/>
|
|
<Input
|
|
value={readFormValue(formIds.email)}
|
|
error={readFormError(formIds.email)}
|
|
type='email'
|
|
labelLexic='form_email'
|
|
labelWidth={labelWidth}
|
|
onChange={updateFormValue(formIds.email)}
|
|
onBlur={onEmailBlur}
|
|
/>
|
|
<Input
|
|
value={readFormValue(formIds.password)}
|
|
error={readFormError(formIds.password)}
|
|
type='password'
|
|
labelLexic='form_password'
|
|
labelWidth={labelWidth}
|
|
onChange={updateFormValue(formIds.password)}
|
|
/>
|
|
<Combobox
|
|
withArrow
|
|
value={readFormValue(formIds.country)}
|
|
error={readFormError(formIds.country)}
|
|
labelLexic='form_country'
|
|
labelWidth={labelWidth}
|
|
options={countries}
|
|
onChange={updateFormValue(formIds.country)}
|
|
onSelect={onCountrySelect}
|
|
/>
|
|
<Input
|
|
value={readFormValue(formIds.region)}
|
|
error={readFormError(formIds.region)}
|
|
labelLexic='form_region'
|
|
labelWidth={labelWidth}
|
|
onChange={onRegionOrCityChange(formIds.region)}
|
|
/>
|
|
<Combobox
|
|
value={readFormValue(formIds.city)}
|
|
error={readFormError(formIds.city)}
|
|
labelLexic='form_city'
|
|
labelWidth={labelWidth}
|
|
onChange={onRegionOrCityChange(formIds.city)}
|
|
options={cities}
|
|
onSelect={onCitySelect}
|
|
/>
|
|
<Input
|
|
value={readFormValue(formIds.postalCode)}
|
|
error={readFormError(formIds.postalCode)}
|
|
labelLexic='form_postal_code'
|
|
labelWidth={labelWidth}
|
|
onChange={updateFormValue(formIds.postalCode)}
|
|
/>
|
|
<Input
|
|
value={readFormValue(formIds.address1)}
|
|
error={readFormError(formIds.address1)}
|
|
labelLexic='form_address1'
|
|
labelWidth={labelWidth}
|
|
onChange={updateFormValue(formIds.address1)}
|
|
/>
|
|
<Input
|
|
value={readFormValue(formIds.address2)}
|
|
error={readFormError(formIds.address2)}
|
|
labelLexic='form_address2'
|
|
labelWidth={labelWidth}
|
|
onChange={updateFormValue(formIds.address2)}
|
|
/>
|
|
<Input
|
|
value={readFormValue(formIds.phone)}
|
|
error={readFormError(formIds.phone)}
|
|
type='tel'
|
|
labelLexic='form_phone'
|
|
labelWidth={labelWidth}
|
|
onChange={updateFormValue(formIds.phone)}
|
|
onBlur={onPhoneBlur}
|
|
/>
|
|
|
|
<ButtonsBlock>
|
|
<ButtonSolid type='submit'>
|
|
<T9n t='next' />
|
|
</ButtonSolid>
|
|
<Error t={readFormError(formIds.formError) || ''} />
|
|
</ButtonsBlock>
|
|
</Form>
|
|
)
|
|
}
|
|
|
|
export const RegistrationStep = () => (
|
|
<FormStore>
|
|
<Registration />
|
|
</FormStore>
|
|
)
|
|
|