feat(ott-46): added user account page layout (#23)

.gitignore

@@ -24,3 +24,6 @@ yarn-error.log*
 
 yarn.lock
 package-lock.json
+
+# IntelliJ IDEA products
+.idea

src/config/pages.tsx

@@ -6,4 +6,5 @@ export const PAGES = {
   register: '/register',
   team: '/teams',
   tournament: '/tournaments',
+  useraccount: '/useraccount',
 }

src/features/App/UnauthenticatedApp.tsx

@@ -12,6 +12,7 @@ import { Login } from 'features/Login'
 import { Register } from 'features/Register'
 import { LanguageSelect } from 'features/LanguageSelect'
 import { useLexicsConfig } from 'features/LexicsStore'
+import { UserAccount } from 'features/UserAccount'
 
 export const UnauthenticatedApp = () => {
   useLexicsConfig(publicLexics)
@@ -27,6 +28,10 @@ export const UnauthenticatedApp = () => {
           <Register />
         </Route>
 
+        <Route path={PAGES.useraccount}>
+          <UserAccount />
+        </Route>
+
         <Redirect to={PAGES.login} />
       </Switch>
     </Fragment>

src/features/UserAccount/CardNumber/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import { Radio } from 'features/Common/Radio'
+
+import { VisaLogoWrapper } from '../VisaLogo'
+import { CardNumberWrapper, CardNumberTextWrapper } from './styled'
+
+type TUserAccountInput = {
+  checked?: boolean,
+  label: string,
+  visa?: boolean,
+}
+
+export const CardNumber = ({
+  checked,
+  label,
+  visa,
+}: TUserAccountInput) => (
+  <CardNumberWrapper>
+    <Radio
+      label={label}
+      checked={checked}
+      onChange={() => {}}
+    />
+    <VisaLogoWrapper visa={visa} />
+    <CardNumberTextWrapper>Удалить карту</CardNumberTextWrapper>
+  </CardNumberWrapper>
+)

src/features/UserAccount/CardNumber/styled.tsx

@@ -0,0 +1,66 @@
+import styled, { css } from 'styled-components/macro'
+
+import { Label } from 'features/Common/Radio/styled'
+import { PriceAmount, PriceDetails } from 'features/Register/components/Price/styled'
+
+export const CardNumberWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 48px;
+  background-color: #3F3F3F;
+  border-radius: 2px;
+  margin: 20px 0;
+  width: 100%;
+  
+  ${Label} {
+    font-size: 20px;
+    line-height: 24px;
+    
+    &::before {
+      margin-left: 22px;
+    }
+  }
+`
+
+export const TextWrapper = styled.p`
+  font-family: Montserrat, sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 24px;
+  color: #666666;
+  white-space: nowrap;
+  margin-right: 0;
+  
+  &:hover {
+    cursor: pointer;
+  }
+`
+
+export const CardNumberTextWrapper = styled(TextWrapper)`
+  margin-right: 24px;
+`
+
+export type TPriceWrapper = {
+  noMarginRight?: boolean,
+}
+
+export const priceWrapperStyles = css<TPriceWrapper>`
+  margin-left: auto;
+  margin-right: 24px;
+
+  ${PriceAmount} {
+    font-size: 24px;
+    line-height: 21px;
+  }
+  
+  ${PriceDetails} {
+    font-size: 12px;
+    line-height: 12px;
+  }
+`
+
+export const PriceWrapper = styled.div`
+  ${priceWrapperStyles}
+`

src/features/UserAccount/PageTitle/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import { Logo } from 'features/Logo'
+import { BlockTitle } from 'features/Login/styled'
+
+import { PageTitleWrapper, TitleTextWrapper } from './styled'
+
+type TPageTitle = {
+  titleText: string,
+}
+
+export const PageTitle = ({ titleText }: TPageTitle) => (
+  <PageTitleWrapper>
+    <Logo />
+    <TitleTextWrapper>
+      <BlockTitle>{titleText}</BlockTitle>
+    </TitleTextWrapper>
+  </PageTitleWrapper>
+)

src/features/UserAccount/PageTitle/styled.tsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components/macro'
+
+import { BlockTitle } from 'features/Login/styled'
+
+export const PageTitleWrapper = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-end;
+`
+
+export const TitleTextWrapper = styled.div`
+  margin-left: 14px;
+  
+  ${BlockTitle} {
+    margin-bottom: 0;
+    line-height: 28px;
+  }
+`

src/features/UserAccount/PlusIcon/index.tsx

@@ -0,0 +1 @@
+export * from './styled'

src/features/UserAccount/PlusIcon/styled.tsx

@@ -0,0 +1,8 @@
+import styled from 'styled-components/macro'
+
+export const PlusIconWrapper = styled.span`
+  width: 20px;
+  height: 20px;
+  margin: 0 22px;
+  background: url('/images/plusIcon.png') no-repeat;
+`

src/features/UserAccount/TextNoBorder/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { Price } from 'features/Register/components/Price'
+
+import { TextNoBorderWrapper, TextNoBorderTextWrapper } from './styled'
+import { PriceWrapper } from '../CardNumber/styled'
+
+type TTextNoBorder = {
+  amount: number,
+  text: string,
+}
+
+export const TextNoBorder = ({
+  amount,
+  text,
+}: TTextNoBorder) => (
+  <TextNoBorderWrapper>
+    <TextNoBorderTextWrapper>{text}</TextNoBorderTextWrapper>
+    <PriceWrapper>
+      <Price amount={amount} />
+    </PriceWrapper>
+  </TextNoBorderWrapper>
+)

src/features/UserAccount/TextNoBorder/styled.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components/macro'
+
+import { PriceWrapper, TextWrapper } from '../CardNumber/styled'
+
+export const TextNoBorderWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 48px;
+  background-color: transparent;
+  border: none;
+  margin-top: 20px;
+  width: 100%;
+  
+  ${PriceWrapper} {
+    margin-right: 0;
+  }
+`
+
+export const TextNoBorderTextWrapper = styled(TextWrapper)`
+  font-size: 20px;
+`

src/features/UserAccount/UserAccountButton/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import { PlusIconWrapper } from '../PlusIcon'
+import { UserAccountButtonWrapper, PlusIconTextWrapper } from './styled'
+
+export const UserAccountButton = ({ text }: { text: string }) => (
+  <UserAccountButtonWrapper>
+    <PlusIconWrapper />
+    <PlusIconTextWrapper>{text}</PlusIconTextWrapper>
+  </UserAccountButtonWrapper>
+)

src/features/UserAccount/UserAccountButton/styled.tsx

@@ -0,0 +1,24 @@
+import styled from 'styled-components/macro'
+
+import { TextWrapper } from '../CardNumber/styled'
+
+export const UserAccountButtonWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 48px;
+  background-color: transparent;
+  border: 1.5px solid #3F3F3F;
+  border-radius: 2px;
+  margin-top: 20px;
+  width: 100%;
+  
+  &:hover {
+    cursor: pointer;
+  }
+`
+
+export const PlusIconTextWrapper = styled(TextWrapper)`
+  font-size: 20px;
+  color: #494949;
+`

src/features/UserAccount/UserAccountSubscription/index.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+
+import { Price } from 'features/Register/components/Price'
+import { Radio } from 'features/Common/Radio'
+import { Checkbox } from 'features/Common/Checkbox'
+
+import {
+  CheckboxWrapper,
+  UserAccountSubscriptionWrapper,
+  UserAccountBoldTextWrapper,
+  UserAccountNormalTextWrapper,
+} from './styled'
+import { PriceWrapper } from '../CardNumber/styled'
+
+type TUserAccountSubscription = {
+  amount: number,
+  checked?: boolean,
+  inputType?: string,
+  label?: string,
+  noMarginBottom?: boolean,
+  noMarginTop?: boolean,
+  packageAction?: string,
+  packageName?: string,
+}
+
+export const UserAccountSubscription = ({
+  amount,
+  checked,
+  inputType,
+  label,
+  noMarginBottom,
+  noMarginTop,
+  packageAction,
+  packageName,
+}: TUserAccountSubscription) => (
+  <UserAccountSubscriptionWrapper
+    noMarginTop={noMarginTop}
+    noMarginBottom={noMarginBottom}
+  >
+    {inputType === 'radio' ? (
+      <Radio
+        checked={checked}
+        onChange={() => {}}
+      />
+    ) : (
+      <CheckboxWrapper>
+        <Checkbox
+          checked={checked}
+          onChange={() => {}}
+          label={label}
+        />
+      </CheckboxWrapper>
+    )}
+    {packageName && <UserAccountBoldTextWrapper>{packageName}</UserAccountBoldTextWrapper>}
+    {packageAction && <UserAccountNormalTextWrapper>{packageAction}</UserAccountNormalTextWrapper>}
+    <PriceWrapper>
+      <Price amount={amount} />
+    </PriceWrapper>
+  </UserAccountSubscriptionWrapper>
+)

src/features/UserAccount/UserAccountSubscription/styled.tsx

@@ -0,0 +1,75 @@
+import styled, { css } from 'styled-components/macro'
+
+import { Label as CheckboxLabel } from 'features/Common/Checkbox/styled'
+import { Label as RadioLabel } from 'features/Common/Radio/styled'
+
+import { TextWrapper } from '../CardNumber/styled';
+
+export type TUserAccountSubscriptionWrapper = {
+  noMarginBottom?: boolean,
+  noMarginTop?: boolean,
+}
+
+export const UserAccountSubscriptionWrapperStyles = css<TUserAccountSubscriptionWrapper>`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  height: 48px;
+  background-color: #3F3F3F;
+  border-top: ${({ noMarginBottom, noMarginTop }) => (noMarginBottom && noMarginTop ? '1px solid #000' : '')};
+  border-bottom: ${({ noMarginBottom, noMarginTop }) => (noMarginBottom && noMarginTop ? '1px solid #000' : '')};
+  border-radius: ${({ noMarginBottom, noMarginTop }) => {
+    if (noMarginTop && noMarginBottom) {
+      return '0'
+    }
+    if (noMarginTop) {
+      return '0 0 2px 2px'
+    }
+    if (noMarginBottom) {
+      return '2px 2px 0 0'
+    }
+    return '2px'
+  }};
+  margin-top: ${({ noMarginTop }) => (noMarginTop ? '0' : '20px')};
+  margin-bottom: ${({ noMarginBottom }) => (noMarginBottom ? '0' : '20px')};
+  width: 100%;
+  
+  ${RadioLabel}::before {
+    margin-left: 22px;
+  }
+`
+
+export const UserAccountSubscriptionWrapper = styled.div`
+  ${UserAccountSubscriptionWrapperStyles};
+  
+  &:nth-child(n+1) {
+    border-bottom: ${({ noMarginBottom }) => (noMarginBottom ? '1px solid #000' : '')};
+    border-top: ${({ noMarginBottom, noMarginTop }) => (noMarginBottom && noMarginTop ? 'none' : '')};
+  }
+`
+
+export const CheckboxWrapper = styled.div`
+  ${CheckboxLabel} {
+    font-weight: bold;
+    font-size: 14px;
+    line-height: 24px;
+    
+    &::before {
+      margin-left: 22px;
+    }
+  }
+`
+
+export const UserAccountBoldTextWrapper = styled(TextWrapper)`
+  color: #fff;
+  font-weight: bold;
+  font-size: 20px;
+  margin-right: 24px;
+`
+
+export const UserAccountNormalTextWrapper = styled(TextWrapper)`
+  color: #fff;
+  font-weight: normal;
+  font-size: 14px;
+  margin-right: 24px;
+`

src/features/UserAccount/VisaLogo/index.tsx

@@ -0,0 +1 @@
+export * from './styled'

src/features/UserAccount/VisaLogo/styled.tsx

@@ -0,0 +1,16 @@
+import styled, { css } from 'styled-components/macro'
+
+type TCardLogoStyled = {
+  visa?: boolean,
+}
+
+export const CardLogoStyles = css<TCardLogoStyled>`
+  width: ${({ visa }) => `${visa ? 37 : 30}px`};
+  height: ${({ visa }) => `${visa ? 12 : 19}px`};
+  margin-right: 82px;
+  background: ${({ visa }) => `url(/images/${visa ? 'visaLogo.png' : 'masterLogo.png'}) no-repeat`};
+`
+
+export const VisaLogoWrapper = styled.span<TCardLogoStyled>`
+  ${CardLogoStyles}
+`

src/features/UserAccount/index.tsx

@@ -0,0 +1,221 @@
+import React from 'react'
+
+import { Background } from 'features/Background'
+import { Combobox } from 'features/Combobox'
+import { Input } from 'features/Common'
+import { Form } from 'features/Login/styled'
+
+import { CardNumber } from './CardNumber'
+import { UserAccountButton } from './UserAccountButton'
+import { PageTitle } from './PageTitle'
+import { UserAccountSubscription } from './UserAccountSubscription'
+import { TextNoBorder } from './TextNoBorder'
+import {
+  FormWrapper,
+  OutlinedButton,
+  UserAccountWrapper,
+  UserAccountFormWrapper,
+  UserAccountBlockTitle,
+  UserAccountComponentWrapper,
+} from './styled'
+
+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
+                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
+                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>
+)

src/features/UserAccount/styled.tsx

@@ -0,0 +1,46 @@
+import styled from 'styled-components/macro'
+
+import { BlockTitle, Form } from 'features/Login/styled'
+import { outlineButtonStyles } from 'features/Common/Button'
+
+export const OutlinedButton = styled.button`
+  ${outlineButtonStyles};
+  width: 288px;
+  margin-top: 20px;
+  align-self: flex-start;
+  color: #005EDD;
+  border-color: #005EDD;
+  
+  &:hover {
+    cursor: pointer;
+  }
+`
+
+export const UserAccountFormWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+`
+
+export const UserAccountWrapper = styled.div`
+  width: 1776px;
+  margin-top: 140px;
+`
+
+export const UserAccountBlockTitle = styled(BlockTitle)`
+  align-self: flex-start;
+`
+
+export const UserAccountComponentWrapper = styled.div``
+
+export const FormWrapper = styled.div`
+  margin-right: 48px;
+
+  ${Form} {
+    width: 560px;
+  }
+  
+  &:last-child {
+    margin-right: 0;
+  }
+`