feat(ott-62): added lexics to the user account (#69)

src/config/lexics/userAccount.tsx

@@ -0,0 +1,18 @@
+export const userAccountLexics = {
+  add_card: 8313,
+  change: 12614,
+  country: 835,
+  delete_card: 8692,
+  lastname: 858,
+  mail: 12912,
+  main: 13014,
+  month: 13019,
+  name: 645,
+  next_debit: 13018,
+  payment: 13015,
+  phone: 1656,
+  save_changes: 13017,
+  select_subscription: 12583,
+  subscriptions: 13016,
+  user_account: 12928,
+}

src/features/Common/Input/styled.tsx

@@ -38,6 +38,7 @@ type LabelProps = {
 export const Label = styled.label<LabelProps>`
   font-style: normal;
   font-weight: normal;
+  white-space: nowrap;
   font-size: 16px;
   line-height: 24px;
   letter-spacing: -0.01em;

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useLexicsStore } from 'features/LexicsStore'
 
 import {
   PriceWrapper,
@@ -15,10 +16,17 @@ type TPrice = {
 export const Price = ({
   amount,
   currency = '₽',
-  perPeriod = 'мес',
+  perPeriod = 'month',
-}: TPrice) => (
+}: TPrice) => {
+  const { translate } = useLexicsStore()
+  const perPeriodTranslated = translate(perPeriod)
+
+  return (
     <PriceWrapper>
       <PriceAmount>{amount}</PriceAmount>
-    <PriceDetails>{currency} / {perPeriod}</PriceDetails>
+      <PriceDetails>
+        {currency} / {perPeriodTranslated}
+      </PriceDetails>
     </PriceWrapper>
   )
+}

src/features/UserAccount/CardNumber/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import { Radio } from 'features/Common/Radio'
+import { T9n } from 'features/T9n'
 
 import { VisaLogoWrapper } from '../VisaLogo'
 import { CardNumberWrapper, CardNumberTextWrapper } from './styled'
@@ -23,6 +24,8 @@ export const CardNumber = ({
       onChange={() => {}}
     />
     <VisaLogoWrapper visa={visa} />
-    <CardNumberTextWrapper>Удалить карту</CardNumberTextWrapper>
+    <CardNumberTextWrapper>
+      <T9n t='delete_card' />
+    </CardNumberTextWrapper>
   </CardNumberWrapper>
 )

src/features/UserAccount/index.tsx

@@ -4,12 +4,17 @@ 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 { useLexicsStore, useLexicsConfig } from 'features/LexicsStore'
+
+import { userAccountLexics } from 'config/lexics/userAccount'
 
 import { CardNumber } from './CardNumber'
 import { UserAccountButton } from './UserAccountButton'
 import { PageTitle } from './PageTitle'
 import { UserAccountSubscription } from './UserAccountSubscription'
 import { TextNoBorder } from './TextNoBorder'
+
 import {
   FormWrapper,
   OutlinedButton,
@@ -21,34 +26,40 @@ import {
 
 const labelWidth = 78
 
-export const UserAccount = () => (
+export const UserAccount = () => {
+  useLexicsConfig(userAccountLexics)
+  const { translate } = useLexicsStore()
+
+  return (
     <UserAccountComponentWrapper>
       <Background>
         <UserAccountWrapper>
-        <PageTitle titleText='Личный кабинет' />
+          <PageTitle titleText={translate('user_account')} />
           <UserAccountFormWrapper>
             <FormWrapper>
               <Form>
-              <UserAccountBlockTitle>Основное</UserAccountBlockTitle>
+                <UserAccountBlockTitle>
+                  <T9n t='main' />
+                </UserAccountBlockTitle>
                 <Input
                   id='firstname'
-                label='Имя'
+                  label={translate('name')}
                   labelWidth={labelWidth}
                 />
                 <Input
                   id='lastname'
-                label='Фамилия'
+                  label={translate('lastname')}
                   labelWidth={labelWidth}
                 />
                 <Input
                   id='phone'
-                label='Телефон'
+                  label={translate('phone')}
                   labelWidth={labelWidth}
                 />
                 <Input
                   id='email'
                   type='email'
-                label='E-mail'
+                  label={translate('mail')}
                   labelWidth={labelWidth}
                 />
                 <Combobox
@@ -58,30 +69,36 @@ export const UserAccount = () => (
                     { id: 2, name: 'Латвия' },
                     { id: 3, name: 'Россия' },
                   ]}
-                label='Страна'
+                  label={translate('country')}
                   labelWidth={labelWidth}
                 />
-              <OutlinedButton>Сохранить изменения</OutlinedButton>
+                <OutlinedButton>
+                  <T9n t='save_changes' />
+                </OutlinedButton>
               </Form>
             </FormWrapper>
             <FormWrapper>
               <Form>
-              <UserAccountBlockTitle>Оплата</UserAccountBlockTitle>
+                <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='Добавить карту' />
+                <UserAccountButton text={translate('add_card')} />
               </Form>
             </FormWrapper>
             <FormWrapper>
               <Form>
-              <UserAccountBlockTitle>Подписки</UserAccountBlockTitle>
+                <UserAccountBlockTitle>
+                  <T9n t='subscriptions' />
+                </UserAccountBlockTitle>
                 <UserAccountSubscription
                   amount={1999}
                   checked
                   inputType='radio'
                   packageName='Базовая'
-                packageAction='Изменить'
+                  packageAction={translate('change')}
                 />
                 <UserAccountSubscription
                   amount={1999}
@@ -101,9 +118,9 @@ export const UserAccount = () => (
                   inputType='checkbox'
                   label='Manchester United'
                 />
-              <UserAccountButton text='Выбрать подписку' />
+                <UserAccountButton text={translate('select_subscription')} />
                 <TextNoBorder
-                text='Следующее списание 31.02.2020'
+                  text={`${translate('next_debit')} 31.02.2020`}
                   amount={4796}
                 />
               </Form>
@@ -113,30 +130,32 @@ export const UserAccount = () => (
       </Background>
       <Background>
         <UserAccountWrapper>
-        <PageTitle titleText='Личный кабинет' />
+          <PageTitle titleText={translate('user_account')} />
           <UserAccountFormWrapper>
             <FormWrapper>
               <Form>
-              <UserAccountBlockTitle>Основное</UserAccountBlockTitle>
+                <UserAccountBlockTitle>
+                  <T9n t='main' />
+                </UserAccountBlockTitle>
                 <Input
                   id='firstname'
-                label='Имя'
+                  label={translate('name')}
                   labelWidth={labelWidth}
                 />
                 <Input
                   id='lastname'
-                label='Фамилия'
+                  label={translate('lastname')}
                   labelWidth={labelWidth}
                 />
                 <Input
                   id='phone'
-                label='Телефон'
+                  label={translate('phone')}
                   labelWidth={labelWidth}
                 />
                 <Input
                   id='email'
                   type='email'
-                label='E-mail'
+                  label={translate('mail')}
                   labelWidth={labelWidth}
                 />
                 <Combobox
@@ -146,30 +165,36 @@ export const UserAccount = () => (
                     { id: 2, name: 'Латвия' },
                     { id: 3, name: 'Россия' },
                   ]}
-                label='Страна'
+                  label={translate('country')}
                   labelWidth={labelWidth}
                 />
-              <OutlinedButton>Сохранить изменения</OutlinedButton>
+                <OutlinedButton>
+                  <T9n t='save_changes' />
+                </OutlinedButton>
               </Form>
             </FormWrapper>
             <FormWrapper>
               <Form>
-              <UserAccountBlockTitle>Оплата</UserAccountBlockTitle>
+                <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='Добавить карту' />
+                <UserAccountButton text={translate('add_card')} />
               </Form>
             </FormWrapper>
             <FormWrapper>
               <Form>
-              <UserAccountBlockTitle>Подписки</UserAccountBlockTitle>
+                <UserAccountBlockTitle>
+                  <T9n t='subscriptions' />
+                </UserAccountBlockTitle>
                 <UserAccountSubscription
                   amount={1999}
                   checked
                   inputType='radio'
                   packageName='Базовая'
-                packageAction='Изменить'
+                  packageAction={translate('add_card')}
                 />
                 <UserAccountSubscription
                   noMarginBottom
@@ -209,9 +234,9 @@ export const UserAccount = () => (
                   inputType='checkbox'
                   label='Manchester United'
                 />
-              <UserAccountButton text='Выбрать подписку' />
+                <UserAccountButton text={translate('select_subscription')} />
                 <TextNoBorder
-                text='Следующее списание 31.02.2020'
+                  text={`${translate('next_debit')} 31.02.2020`}
                   amount={4796}
                 />
               </Form>
@@ -221,3 +246,4 @@ export const UserAccount = () => (
       </Background>
     </UserAccountComponentWrapper>
   )
+}