feat(#177): login and registration lexics (#26)

src/config/lexics/public.tsx

@@ -1,3 +1,28 @@
 export const publicLexics = {
-  authorization: 500,
+  form_address1: 12914,
+  form_address2: 12915,
+  form_card_code: 12918,
+  form_card_expiration: 2023,
+  form_card_number: 2022,
+  form_city: 11401,
+  form_country: 835,
+  form_email: 12912,
+  form_firstname: 645,
+  form_lastname: 858,
+  form_password: 751,
+  form_phone: 1656,
+  form_postal_code: 12913,
+  form_region: 12932,
+  login: 1367,
+  next: 12916,
+  please_fill_out_this_field: 12933,
+  register: 1305,
+  select_language: 1005,
+  step_title_card: 12917,
+  step_title_login: 500,
+  step_title_registration: 1306,
+  step_title_subscription: 12919,
+  subscription_done: 2668,
+  subscription_extra: 6036,
+  subscription_for: 12920,
 }

src/features/Combobox/index.tsx

@@ -4,6 +4,7 @@ import isEmpty from 'lodash/isEmpty'
 import map from 'lodash/map'
 import '@reach/combobox/styles.css'
 
+import { T9n } from 'features/T9n'
 import { Label } from 'features/Common/Input/styled'
 
 import { Props, Option } from './types'
@@ -22,10 +23,12 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
     disabled,
     id,
     label,
+    labelLexic,
     labelWidth,
     openOnFocus,
     pattern,
     required,
+    title,
   } = props
   const {
     onInputBlur,
@@ -43,7 +46,11 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
         labelWidth={labelWidth}
         htmlFor={id}
       >
-        {label}
+        {
+          labelLexic
+            ? <T9n t={labelLexic} />
+            : label
+        }
         <Arrow />
       </Label>
       <ComboboxInputStyled
@@ -51,6 +58,7 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
         required={required}
         disabled={disabled}
         value={query}
+        title={title}
         pattern={pattern}
         onChange={onQueryChange}
         onBlur={onInputBlur}

src/features/Combobox/types.tsx

@@ -11,8 +11,10 @@ export type Props<T> = Pick<InputHTMLAttributes<HTMLInputElement>, (
   | 'required'
   | 'disabled'
   | 'pattern'
+  | 'title'
 )> & {
   label?: string,
+  labelLexic?: string,
   labelWidth?: number,
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void,
   onSelect?: (option: T | null) => void,

src/features/Common/Input/index.tsx

@@ -1,5 +1,7 @@
 import React, { ChangeEvent } from 'react'
 
+import { T9n } from 'features/T9n'
+
 import {
   TInputWrapper,
   InputWrapper,
@@ -11,7 +13,8 @@ type TInput = {
   defaultValue?: string,
   id: string,
   inputWidth?: number,
-  label: string,
+  label?: string,
+  labelLexic?: string,
   labelWidth?: number,
   maxLength?: number,
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void,
@@ -27,6 +30,7 @@ export const Input = ({
   id,
   inputWidth,
   label,
+  labelLexic,
   labelWidth,
   maxLength,
   onChange,
@@ -46,7 +50,11 @@ export const Input = ({
       htmlFor={id}
       labelWidth={labelWidth}
     >
-      {label}
+      {
+        labelLexic
+          ? <T9n t={labelLexic} />
+          : label
+      }
     </Label>
     <InputStyled
       id={id}

src/features/LanguageSelect/index.tsx

@@ -18,7 +18,7 @@ import {
 import './flags.scss'
 
 export const LanguageSelect = () => {
-  const { changeLang } = useLexicsStore()
+  const { changeLang, translate } = useLexicsStore()
   const {
     close,
     isOpen,
@@ -33,7 +33,11 @@ export const LanguageSelect = () => {
   return (
     <OutsideClick onClick={close}>
       <Wrapper>
-        <WorldIcon onClick={open} active={isOpen} />
+        <WorldIcon
+          onClick={open}
+          active={isOpen}
+          title={translate('select_language')}
+        />
         {isOpen && (
           <LangsList>
             {

src/features/Login/index.tsx

@@ -6,6 +6,7 @@ import { T9n } from 'features/T9n'
 import { Logo } from 'features/Logo'
 import { Input, ButtonSolid } from 'features/Common'
 import { formIds } from 'features/Register/components/RegistrationStep/config'
+import { useLexicsStore } from 'features/LexicsStore'
 
 import { useForm } from './hooks'
 import {
@@ -20,32 +21,40 @@ const labelWidth = 60
 
 export const Login = () => {
   const { handleSubmit } = useForm()
+  const { translate } = useLexicsStore()
+  const defaultMessage = translate('please_fill_out_this_field')
 
   return (
     <CenterBlock>
       <Logo />
       <Form onSubmit={handleSubmit}>
-        <BlockTitle><T9n t='authorization' /></BlockTitle>
+        <BlockTitle>
+          <T9n t='step_title_login' />
+        </BlockTitle>
 
         <Input
           required
           id={formIds.email}
           type='email'
-          label='Логин'
+          labelLexic='form_email'
           labelWidth={labelWidth}
+          title={defaultMessage}
         />
         <Input
           required
           id={formIds.password}
           type='password'
-          label='Пароль'
+          labelLexic='form_password'
           labelWidth={labelWidth}
+          title={defaultMessage}
         />
 
         <ButtonsBlock>
-          <ButtonSolid type='submit'>Войти</ButtonSolid>
+          <ButtonSolid type='submit'>
+            <T9n t='login' />
+          </ButtonSolid>
           <RegisterButton to={PAGES.register}>
-            Зарегистрироваться
+            <T9n t='register' />
           </RegisterButton>
         </ButtonsBlock>
       </Form>

src/features/Register/components/CardStep/index.tsx

@@ -1,44 +1,58 @@
 import React from 'react'
 
+import { T9n } from 'features/T9n'
 import { Input, ButtonSolid } from 'features/Common'
 import {
   BlockTitle,
   ButtonsBlock,
   Form,
 } from 'features/Login/styled'
+import { useLexicsStore } from 'features/LexicsStore'
 
 import { Card, Row } from '../../styled'
 
-export const CardStep = () => (
+export const CardStep = () => {
+  const { translate } = useLexicsStore()
+  const defaultMessage = translate('please_fill_out_this_field')
+  return (
     <Form>
-    <BlockTitle>Привязка карты</BlockTitle>
+      <BlockTitle>
+        <T9n t='step_title_card' />
+      </BlockTitle>
 
       <Card>
         <Input
           id='cardNumber'
-        label='Номер карты'
+          labelLexic='form_card_number'
+          labelWidth={122}
           paddingX={21}
+          title={defaultMessage}
         />
         <Row>
           <Input
             id='expiration'
-          label='Срок действия'
+            labelLexic='form_card_expiration'
             wrapperWidth={280}
             inputWidth={85}
             paddingX={21}
+            title={defaultMessage}
           />
           <Input
             id='code'
-          label='CVC / CVV'
+            labelLexic='form_card_code'
             wrapperWidth={184}
             inputWidth={30}
             maxLength={3}
             paddingX={18.6}
+            title={defaultMessage}
           />
         </Row>
       </Card>
       <ButtonsBlock>
-      <ButtonSolid>Далее</ButtonSolid>
+        <ButtonSolid type='submit'>
+          <T9n t='next' />
+        </ButtonSolid>
       </ButtonsBlock>
     </Form>
-)
+  )
+}

src/features/Register/components/RegistrationStep/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import { T9n } from 'features/T9n'
 import { Combobox } from 'features/Combobox'
 import { Input, ButtonSolid } from 'features/Common'
 import {
@@ -7,6 +8,7 @@ import {
   ButtonsBlock,
   Form,
 } from 'features/Login/styled'
+import { useLexicsStore } from 'features/LexicsStore'
 
 import { formIds } from './config'
 import { passwordRegex } from '../../helpers/isValidPassword'
@@ -15,7 +17,7 @@ import { useForm } from './hooks/useForm'
 
 const commonFieldRegex = '^.{0,500}$'
 const postalCodeRegex = '^\\d{5}(?:[-\\s]\\d{4})?$'
-const labelWidth = 78
+const labelWidth = 116
 
 export const RegistrationStep = () => {
   const {
@@ -28,64 +30,72 @@ export const RegistrationStep = () => {
     onCountrySelect,
     selectedCountry,
   } = useForm()
+  const { translate } = useLexicsStore()
+  const defaultMessage = translate('please_fill_out_this_field')
 
   return (
     <Form onSubmit={handleSubmit}>
-      <BlockTitle>Регистрация</BlockTitle>
+      <BlockTitle>
+        <T9n t='step_title_registration' />
+      </BlockTitle>
 
       <Input
         required
         id={formIds.firstname}
-        label='Имя'
+        labelLexic='form_firstname'
         labelWidth={labelWidth}
         pattern={commonFieldRegex}
+        title={defaultMessage}
       />
       <Input
         required
         id={formIds.lastname}
-        label='Фамилия'
+        labelLexic='form_lastname'
         labelWidth={labelWidth}
         pattern={commonFieldRegex}
+        title={defaultMessage}
       />
       <Input
         required
         id={formIds.phone}
         type='tel'
-        label='Телефон'
+        labelLexic='form_phone'
         labelWidth={labelWidth}
         pattern='^[0-9]{8,100}$'
+        title={defaultMessage}
       />
       <Input
         required
         id={formIds.email}
         type='email'
-        label='E-mail'
+        labelLexic='form_email'
-        title='example@mail.com'
         labelWidth={labelWidth}
         pattern={emailRegex}
+        title={defaultMessage}
       />
       <Input
         required
         id={formIds.password}
         type='password'
-        label='Пароль'
+        labelLexic='form_password'
-        title='Inst@1TV'
         labelWidth={labelWidth}
         pattern={passwordRegex}
+        title={defaultMessage}
       />
       <Combobox
         required
         openOnFocus
         id={formIds.country}
-        label='Страна'
+        labelLexic='form_country'
         labelWidth={labelWidth}
         options={countries}
         onSelect={onCountrySelect}
+        title={defaultMessage}
       />
       <Combobox
         required
         id={formIds.city}
-        label='Город'
+        labelLexic='form_city'
         labelWidth={labelWidth}
         disabled={!selectedCountry}
         value={cityQuery}
@@ -93,35 +103,43 @@ export const RegistrationStep = () => {
         options={cities}
         onSelect={onCitySelect}
         pattern={commonFieldRegex}
+        title={defaultMessage}
       />
       <Input
         required
         id={formIds.postalCode}
-        label='Почтовый адрес'
+        labelLexic='form_postal_code'
+        labelWidth={labelWidth}
         pattern={postalCodeRegex}
+        title={defaultMessage}
       />
       <Input
         required
         id={formIds.region}
-        label='Регион'
+        labelLexic='form_region'
+        labelWidth={labelWidth}
         pattern={commonFieldRegex}
+        title={defaultMessage}
       />
       <Input
         required
         id={formIds.address1}
-        label='Адрес 1'
+        labelLexic='form_address1'
         labelWidth={labelWidth}
         pattern={commonFieldRegex}
+        title={defaultMessage}
       />
       <Input
         id={formIds.address2}
-        label='Адрес 2'
+        labelLexic='form_address2'
         labelWidth={labelWidth}
         pattern={commonFieldRegex}
       />
 
       <ButtonsBlock>
-        <ButtonSolid type='submit'>Далее</ButtonSolid>
+        <ButtonSolid type='submit'>
+          <T9n t='next' />
+        </ButtonSolid>
       </ButtonsBlock>
     </Form>
   )

src/features/Register/components/SubscriptionsStep/index.tsx

@@ -1,5 +1,6 @@
 import React, { Fragment } from 'react'
 
+import { T9n } from 'features/T9n'
 import { ButtonSolid } from 'features/Common/Button'
 import { ArrowLeft, ArrowRight } from 'features/Common/Arrows'
 import { ButtonsBlock } from 'features/Login/styled'
@@ -22,7 +23,9 @@ import {
 export const SubscriptionStep = () => (
   <Fragment>
     <SubscriptionsBlock>
-      <BlockTitle>Выбор подписки</BlockTitle>
+      <BlockTitle>
+        <T9n t='step_title_subscription' />
+      </BlockTitle>
       <SubscriptionList>
         <SubscriptionListItem>
           <MainSubscription title='Бесплатная' price={0} />
@@ -33,7 +36,9 @@ export const SubscriptionStep = () => (
       </SubscriptionList>
     </SubscriptionsBlock>
     <SubscriptionsBlock forAdditionalTitle>
-      <AdditionalBlockTitle>Дополнительно</AdditionalBlockTitle>
+      <AdditionalBlockTitle>
+        <T9n t='subscription_extra' />
+      </AdditionalBlockTitle>
       <PricesBlock>
         <ArrowLeft />
         <AdditionalSubscription title='Российская премьер-лига' price={1999} />
@@ -44,9 +49,11 @@ export const SubscriptionStep = () => (
       </PricesBlock>
     </SubscriptionsBlock>
     <ButtonsBlock forSubsPage>
-      <ButtonSolid>Готово</ButtonSolid>
+      <ButtonSolid>
+        <T9n t='subscription_done' />
+      </ButtonSolid>
       <TotalInfoBlock>
-        <TotalInfoText>Базовая + 2 дополнительно за
+        <TotalInfoText>Базовая + 2 дополнительно <T9n t='subscription_for' />
           <TotalPriceAmmount>6997</TotalPriceAmmount>
           <TotalPriceDetails>₽ / МЕС</TotalPriceDetails>
         </TotalInfoText>