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>`
font-style: normal;
font-weight: normal;
white-space: nowrap;
font-size: 16px;
line-height: 24px;
letter-spacing: -0.01em;

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

@ -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 = 'мес',
}: TPrice) => (
<PriceWrapper>
<PriceAmount>{amount}</PriceAmount>
<PriceDetails>{currency} / {perPeriod}</PriceDetails>
</PriceWrapper>
)
perPeriod = 'month',
}: TPrice) => {
const { translate } = useLexicsStore()
const perPeriodTranslated = translate(perPeriod)
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 { 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>
)

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

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

Write Preview
Loading…
Cancel
Save