frontend
/
spa_instat_tv
1
0
Fork 0
Code Pull Requests 1 Releases Wiki Activity

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

Browse Source
keep-around/af30b88d367751c9e05a735e4a0467a96238ef47
Armen 5 years ago committed by GitHub
parent 2776f2fb0d
commit 8efce0066a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 264 additions and 208 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 18
      src/config/lexics/userAccount.tsx
  2. 1
      src/features/Common/Input/styled.tsx
  3. 22
      src/features/Register/components/Price/index.tsx
  4. 5
      src/features/UserAccount/CardNumber/index.tsx
  5. 426
      src/features/UserAccount/index.tsx

18
src/config/lexics/userAccount.tsx
Unescape View File

@ -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,
}

1
src/features/Common/Input/styled.tsx
Unescape View File

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

22
src/features/Register/components/Price/index.tsx
Unescape View File

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

5
src/features/UserAccount/CardNumber/index.tsx
Unescape View File

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

426
src/features/UserAccount/index.tsx
Unescape View File

@ -4,12 +4,17 @@ import { Background } from 'features/Background'
import { Combobox } from 'features/Combobox' import { Combobox } from 'features/Combobox'
import { Input } from 'features/Common' import { Input } from 'features/Common'
import { Form } from 'features/Login/styled' 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 { CardNumber } from './CardNumber'
import { UserAccountButton } from './UserAccountButton' import { UserAccountButton } from './UserAccountButton'
import { PageTitle } from './PageTitle' import { PageTitle } from './PageTitle'
import { UserAccountSubscription } from './UserAccountSubscription' import { UserAccountSubscription } from './UserAccountSubscription'
import { TextNoBorder } from './TextNoBorder' import { TextNoBorder } from './TextNoBorder'
import { import {
FormWrapper, FormWrapper,
OutlinedButton, OutlinedButton,
@ -21,203 +26,224 @@ import {
const labelWidth = 78 const labelWidth = 78
export const UserAccount = () => ( export const UserAccount = () => {
<UserAccountComponentWrapper> useLexicsConfig(userAccountLexics)
<Background> const { translate } = useLexicsStore()
<UserAccountWrapper>
<PageTitle titleText='Личный кабинет' /> return (
<UserAccountFormWrapper> <UserAccountComponentWrapper>
<FormWrapper> <Background>
<Form> <UserAccountWrapper>
<UserAccountBlockTitle>Основное</UserAccountBlockTitle> <PageTitle titleText={translate('user_account')} />
<Input <UserAccountFormWrapper>
id='firstname' <FormWrapper>
label='Имя' <Form>
labelWidth={labelWidth} <UserAccountBlockTitle>
/> <T9n t='main' />
<Input </UserAccountBlockTitle>
id='lastname' <Input
label='Фамилия' id='firstname'
labelWidth={labelWidth} label={translate('name')}
/> labelWidth={labelWidth}
<Input />
id='phone' <Input
label='Телефон' id='lastname'
labelWidth={labelWidth} label={translate('lastname')}
/> labelWidth={labelWidth}
<Input />
id='email' <Input
type='email' id='phone'
label='E-mail' label={translate('phone')}
labelWidth={labelWidth} labelWidth={labelWidth}
/> />
<Combobox <Input
withArrow id='email'
options={[ type='email'
{ id: 1, name: 'Армения' }, label={translate('mail')}
{ id: 2, name: 'Латвия' }, labelWidth={labelWidth}
{ id: 3, name: 'Россия' }, />
]} <Combobox
label='Страна' withArrow
labelWidth={labelWidth} options={[
/> { id: 1, name: 'Армения' },
<OutlinedButton>Сохранить изменения</OutlinedButton> { id: 2, name: 'Латвия' },
</Form> { id: 3, name: 'Россия' },
</FormWrapper> ]}
<FormWrapper> label={translate('country')}
<Form> labelWidth={labelWidth}
<UserAccountBlockTitle>Оплата</UserAccountBlockTitle> />
<CardNumber visa label='1234 1234 1234 1234' /> <OutlinedButton>
<CardNumber checked label='1234 1234 1234 1234' /> <T9n t='save_changes' />
<CardNumber label='1234 1234 1234 1234' /> </OutlinedButton>
<UserAccountButton text='Добавить карту' /> </Form>
</Form> </FormWrapper>
</FormWrapper> <FormWrapper>
<FormWrapper> <Form>
<Form> <UserAccountBlockTitle>
<UserAccountBlockTitle>Подписки</UserAccountBlockTitle> <T9n t='payment' />
<UserAccountSubscription </UserAccountBlockTitle>
amount={1999} <CardNumber visa label='1234 1234 1234 1234' />
checked <CardNumber checked label='1234 1234 1234 1234' />
inputType='radio' <CardNumber label='1234 1234 1234 1234' />
packageName='Базовая' <UserAccountButton text={translate('add_card')} />
packageAction='Изменить' </Form>
/> </FormWrapper>
<UserAccountSubscription <FormWrapper>
amount={1999} <Form>
checked <UserAccountBlockTitle>
inputType='checkbox' <T9n t='subscriptions' />
label='Российская Премьер-Лига' </UserAccountBlockTitle>
/> <UserAccountSubscription
<UserAccountSubscription amount={1999}
amount={499} checked
checked inputType='radio'
inputType='checkbox' packageName='Базовая'
label='Primera División' packageAction={translate('change')}
/> />
<UserAccountSubscription <UserAccountSubscription
amount={299} amount={1999}
checked checked
inputType='checkbox' inputType='checkbox'
label='Manchester United' label='Российская Премьер-Лига'
/> />
<UserAccountButton text='Выбрать подписку' /> <UserAccountSubscription
<TextNoBorder amount={499}
text='Следующее списание 31.02.2020' checked
amount={4796} inputType='checkbox'
/> label='Primera División'
</Form> />
</FormWrapper> <UserAccountSubscription
</UserAccountFormWrapper> amount={299}
</UserAccountWrapper> checked
</Background> inputType='checkbox'
<Background> label='Manchester United'
<UserAccountWrapper> />
<PageTitle titleText='Личный кабинет' /> <UserAccountButton text={translate('select_subscription')} />
<UserAccountFormWrapper> <TextNoBorder
<FormWrapper> text={`${translate('next_debit')} 31.02.2020`}
<Form> amount={4796}
<UserAccountBlockTitle>Основное</UserAccountBlockTitle> />
<Input </Form>
id='firstname' </FormWrapper>
label='Имя' </UserAccountFormWrapper>
labelWidth={labelWidth} </UserAccountWrapper>
/> </Background>
<Input <Background>
id='lastname' <UserAccountWrapper>
label='Фамилия' <PageTitle titleText={translate('user_account')} />
labelWidth={labelWidth} <UserAccountFormWrapper>
/> <FormWrapper>
<Input <Form>
id='phone' <UserAccountBlockTitle>
label='Телефон' <T9n t='main' />
labelWidth={labelWidth} </UserAccountBlockTitle>
/> <Input
<Input id='firstname'
id='email' label={translate('name')}
type='email' labelWidth={labelWidth}
label='E-mail' />
labelWidth={labelWidth} <Input
/> id='lastname'
<Combobox label={translate('lastname')}
withArrow labelWidth={labelWidth}
options={[ />
{ id: 1, name: 'Армения' }, <Input
{ id: 2, name: 'Латвия' }, id='phone'
{ id: 3, name: 'Россия' }, label={translate('phone')}
]} labelWidth={labelWidth}
label='Страна' />
labelWidth={labelWidth} <Input
/> id='email'
<OutlinedButton>Сохранить изменения</OutlinedButton> type='email'
</Form> label={translate('mail')}
</FormWrapper> labelWidth={labelWidth}
<FormWrapper> />
<Form> <Combobox
<UserAccountBlockTitle>Оплата</UserAccountBlockTitle> withArrow
<CardNumber visa label='1234 1234 1234 1234' /> options={[
<CardNumber checked label='1234 1234 1234 1234' /> { id: 1, name: 'Армения' },
<CardNumber label='1234 1234 1234 1234' /> { id: 2, name: 'Латвия' },
<UserAccountButton text='Добавить карту' /> { id: 3, name: 'Россия' },
</Form> ]}
</FormWrapper> label={translate('country')}
<FormWrapper> labelWidth={labelWidth}
<Form> />
<UserAccountBlockTitle>Подписки</UserAccountBlockTitle> <OutlinedButton>
<UserAccountSubscription <T9n t='save_changes' />
amount={1999} </OutlinedButton>
checked </Form>
inputType='radio' </FormWrapper>
packageName='Базовая' <FormWrapper>
packageAction='Изменить' <Form>
/> <UserAccountBlockTitle>
<UserAccountSubscription <T9n t='payment' />
noMarginBottom </UserAccountBlockTitle>
amount={1999} <CardNumber visa label='1234 1234 1234 1234' />
checked <CardNumber checked label='1234 1234 1234 1234' />
inputType='checkbox' <CardNumber label='1234 1234 1234 1234' />
label='Российская Премьер-Лига' <UserAccountButton text={translate('add_card')} />
/> </Form>
<UserAccountSubscription </FormWrapper>
noMarginTop <FormWrapper>
noMarginBottom <Form>
amount={499} <UserAccountBlockTitle>
checked <T9n t='subscriptions' />
inputType='checkbox' </UserAccountBlockTitle>
label='Primera División' <UserAccountSubscription
/> amount={1999}
<UserAccountSubscription checked
noMarginTop inputType='radio'
noMarginBottom packageName='Базовая'
amount={499} packageAction={translate('add_card')}
checked />
inputType='checkbox' <UserAccountSubscription
label='Primera División' noMarginBottom
/> amount={1999}
<UserAccountSubscription checked
noMarginTop inputType='checkbox'
noMarginBottom label='Российская Премьер-Лига'
amount={499} />
checked <UserAccountSubscription
inputType='checkbox' noMarginTop
label='Primera División' noMarginBottom
/> amount={499}
<UserAccountSubscription checked
noMarginTop inputType='checkbox'
amount={299} label='Primera División'
checked />
inputType='checkbox' <UserAccountSubscription
label='Manchester United' noMarginTop
/> noMarginBottom
<UserAccountButton text='Выбрать подписку' /> amount={499}
<TextNoBorder checked
text='Следующее списание 31.02.2020' inputType='checkbox'
amount={4796} label='Primera División'
/> />
</Form> <UserAccountSubscription
</FormWrapper> noMarginTop
</UserAccountFormWrapper> noMarginBottom
</UserAccountWrapper> amount={499}
</Background> checked
</UserAccountComponentWrapper> 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>
)
}

Write Preview
Loading…
Cancel
Save