spa_instat_tv/src/features/UserAccount/index.tsx

import React from 'react'

import { userAccountLexics } from 'config/lexics/userAccount'
import { formIds } from 'config/form'

import { Background } from 'features/Background'
import { Combobox } from 'features/Combobox'
import { Input } from 'features/Common'
import { Form } from 'features/Login/styled'
import { T9n } from 'features/T9n'
import { Error } from 'features/Common/Input/styled'
import { useLexicsStore, useLexicsConfig } from 'features/LexicsStore'

import { CardNumber } from './CardNumber'
import { UserAccountButton } from './UserAccountButton'
import { PageTitle } from './PageTitle'
import { UserAccountSubscription } from './UserAccountSubscription'
import { TextNoBorder } from './TextNoBorder'
import { useUserInfo } from './hooks'

import {
  FormWrapper,
  OutlinedButton,
  UserAccountWrapper,
  UserAccountFormWrapper,
  UserAccountBlockTitle,
  UserAccountComponentWrapper,
  ButtonWrapper,
} from './styled'

const labelWidth = 110

export const UserAccount = () => {
  useLexicsConfig(userAccountLexics)

  const { translate } = useLexicsStore()

  const {
    cities,
    countries,
    handleSubmit,
    onCitySelect,
    onCountrySelect,
    onPhoneBlur,
    onRegionOrCityChange,
    readFormError,
    readFormValue,
    saveButton,
    updateFormValue,
  } = useUserInfo()

  return (
    <UserAccountComponentWrapper>
      <Background>
        <UserAccountWrapper>
          <PageTitle titleText={translate('user_account')} />
          <UserAccountFormWrapper>
            <FormWrapper>
              <Form>
                <UserAccountBlockTitle>
                  <T9n t='main' />
                </UserAccountBlockTitle>
                <Input
                  value={readFormValue(formIds.firstname)}
                  labelLexic='name'
                  labelWidth={labelWidth}
                  onChange={updateFormValue(formIds.firstname)}
                  error={readFormError(formIds.firstname)}
                  editIcon
                  maxLength={500}
                />
                <Input
                  value={readFormValue(formIds.lastname)}
                  labelLexic='lastname'
                  labelWidth={labelWidth}
                  onChange={updateFormValue(formIds.lastname)}
                  error={readFormError(formIds.lastname)}
                  editIcon
                  maxLength={500}
                />
                <Input
                  onBlur={onPhoneBlur}
                  value={readFormValue(formIds.phone)}
                  labelLexic='phone'
                  labelWidth={labelWidth}
                  onChange={updateFormValue(formIds.phone)}
                  error={readFormError(formIds.phone)}
                  editIcon
                  maxLength={100}
                />
                <Input
                  value={readFormValue(formIds.password)}
                  error={readFormError(formIds.password)}
                  type='password'
                  labelLexic='form_password'
                  labelWidth={labelWidth}
                  onChange={updateFormValue(formIds.password)}
                  editIcon
                  maxLength={500}
                />
                <Combobox
                  value={readFormValue(formIds.country)}
                  error={readFormError(formIds.country)}
                  labelLexic='form_country'
                  labelWidth={labelWidth}
                  onChange={updateFormValue(formIds.country)}
                  options={countries}
                  onSelect={onCountrySelect}
                  withArrow
                />
                <Input
                  value={readFormValue(formIds.postalCode)}
                  error={readFormError(formIds.postalCode)}
                  labelLexic='form_postal_code'
                  labelWidth={labelWidth}
                  onChange={updateFormValue(formIds.postalCode)}
                  editIcon
                />
                <Input
                  value={readFormValue(formIds.region)}
                  error={readFormError(formIds.region)}
                  labelLexic='form_region'
                  labelWidth={labelWidth}
                  onChange={onRegionOrCityChange(formIds.region)}
                  editIcon
                  maxLength={500}
                />
                <Combobox
                  value={readFormValue(formIds.city)}
                  error={readFormError(formIds.city)}
                  labelLexic='form_city'
                  labelWidth={labelWidth}
                  onChange={onRegionOrCityChange(formIds.city)}
                  options={cities}
                  onSelect={onCitySelect}
                  maxLength={500}
                />
                <Input
                  value={readFormValue(formIds.address1)}
                  error={readFormError(formIds.address1)}
                  labelLexic='form_address1'
                  labelWidth={labelWidth}
                  onChange={updateFormValue(formIds.address1)}
                  editIcon
                  maxLength={500}
                />
                <Input
                  value={readFormValue(formIds.address2)}
                  error={readFormError(formIds.address2)}
                  labelLexic='form_address2'
                  labelWidth={labelWidth}
                  onChange={updateFormValue(formIds.address2)}
                  editIcon
                  maxLength={500}
                />
                <ButtonWrapper>
                  <OutlinedButton
                    type='button'
                    onClick={handleSubmit}
                    ref={saveButton}
                  >
                    <T9n t='save_changes' />
                  </OutlinedButton>
                  <Error t={readFormError(formIds.formError) || ''} />
                </ButtonWrapper>
              </Form>
            </FormWrapper>
            <FormWrapper>
              <Form>
                <UserAccountBlockTitle>
                  <T9n t='payment' />
                </UserAccountBlockTitle>
                <CardNumber visa label='1234 1234 1234 1234' />
                <CardNumber checked label='1234 1234 1234 1234' />
                <CardNumber label='1234 1234 1234 1234' />
                <UserAccountButton text={translate('add_card')} />
              </Form>
            </FormWrapper>
            <FormWrapper>
              <Form>
                <UserAccountBlockTitle>
                  <T9n t='subscriptions' />
                </UserAccountBlockTitle>
                <UserAccountSubscription
                  amount={1999}
                  checked
                  inputType='radio'
                  packageName='Базовая'
                  packageAction={translate('add_card')}
                />
                <UserAccountSubscription
                  noMarginBottom
                  amount={1999}
                  checked
                  inputType='checkbox'
                  label='Российская Премьер-Лига'
                />
                <UserAccountSubscription
                  noMarginTop
                  noMarginBottom
                  amount={499}
                  checked
                  inputType='checkbox'
                  label='Primera División'
                />
                <UserAccountSubscription
                  noMarginTop
                  noMarginBottom
                  amount={499}
                  checked
                  inputType='checkbox'
                  label='Primera División'
                />
                <UserAccountSubscription
                  noMarginTop
                  noMarginBottom
                  amount={499}
                  checked
                  inputType='checkbox'
                  label='Primera División'
                />
                <UserAccountSubscription
                  noMarginTop
                  amount={299}
                  checked
                  inputType='checkbox'
                  label='Manchester United'
                />
                <UserAccountButton text={translate('select_subscription')} />
                <TextNoBorder
                  text={`${translate('next_debit')} 31.02.2020`}
                  amount={4796}
                />
              </Form>
            </FormWrapper>
          </UserAccountFormWrapper>
        </UserAccountWrapper>
      </Background>
    </UserAccountComponentWrapper>
  )
}