feat(ott-37): registration page

src/features/App/index.tsx

@@ -3,14 +3,15 @@ import {
   Router,
   Route,
   Redirect,
+  Switch,
 } from 'react-router-dom'
 import { createBrowserHistory } from 'history'
 
+import { PAGES } from 'config'
 import { GlobalStyles } from 'features/GlobalStyles'
 import { Theme } from 'features/Theme'
 import { Login } from 'features/Login'
 import { Register } from 'features/Register'
-import { PAGES } from 'config'
 
 const history = createBrowserHistory()
 
@@ -19,6 +20,7 @@ export const App = () => (
     <Theme>
       <GlobalStyles />
 
+      <Switch>
         <Route path={PAGES.login}>
           <Login />
         </Route>
@@ -28,6 +30,7 @@ export const App = () => (
         </Route>
 
         <Redirect to={PAGES.login} />
+      </Switch>
     </Theme>
   </Router>
 )

src/features/Register/CheckboxSubscription/index.tsx

@@ -0,0 +1,3 @@
+// import React from 'react'
+
+export {}

src/features/Register/Price/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import {
+  PriceWrapper,
+  PriceAmount,
+  PriceDetails,
+} from './styled'
+
+export const Price = () => (
+  <PriceWrapper>
+    <PriceAmount>1999</PriceAmount>
+    <PriceDetails>₽ / мес</PriceDetails>
+  </PriceWrapper>
+)

src/features/Register/Price/styled.tsx

@@ -0,0 +1,23 @@
+import styled from 'styled-components/macro'
+
+export const PriceWrapper = styled.div`
+  display: flex;
+  align-items: flex-start;
+`
+
+export const PriceAmount = styled.span`
+  font-style: normal;
+  font-weight: 600;
+  font-size: 48px;
+  line-height: 40px;
+  color: ${({ theme: { colors } }) => colors.text};
+`
+
+export const PriceDetails = styled.span`
+  margin-left: 5px;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 18px;
+  line-height: 21px;
+  color: ${({ theme: { colors } }) => colors.text};
+`

src/features/Register/Steps/Card/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import { Input } from 'features/Common'
+import {
+  BlockTitle,
+  ButtonsBlock,
+  Form,
+} from 'features/Login/styled'
+
+import {
+  NextButton,
+  Card,
+  Row,
+} from '../../styled'
+
+const labelWidth = 116
+
+export const CardStep = () => (
+  <Form>
+    <BlockTitle>Привязка карты</BlockTitle>
+
+    <Card>
+      <Input
+        id='cardNumber'
+        label='Номер карты'
+        labelWidth={labelWidth}
+        paddingX={21}
+      />
+      <Row>
+        <Input
+          id='expiration'
+          label='Срок дейсвия'
+          wrapperWidth={280}
+          inputWidth={85}
+          labelWidth={labelWidth}
+          paddingX={21}
+        />
+        <Input
+          id='code'
+          label='CVC / CVV'
+          wrapperWidth={184}
+          inputWidth={30}
+          maxLength={3}
+          paddingX={18.6}
+        />
+      </Row>
+    </Card>
+    <ButtonsBlock>
+      <NextButton to='subscriptions'>Далее</NextButton>
+    </ButtonsBlock>
+  </Form>
+)

src/features/Register/Steps/Registration/index.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+
+import { PAGES } from 'config'
+
+import { Input } from 'features/Common'
+import {
+  BlockTitle,
+  ButtonsBlock,
+  Form,
+} from 'features/Login/styled'
+
+import { NextButton } from '../../styled'
+
+const labelWidth = 78
+
+export const GeneralDataStep = () => (
+  <Form>
+    <BlockTitle>Регистрация</BlockTitle>
+
+    <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}
+    />
+    {/* TODO: it should be Dropdown */}
+    <Input
+      id='country'
+      label='Страна'
+      labelWidth={labelWidth}
+    />
+    <Input
+      id='address'
+      label='Адрес'
+      labelWidth={labelWidth}
+    />
+
+    <ButtonsBlock>
+      <NextButton to={`${PAGES.register}/card`}>Далее</NextButton>
+    </ButtonsBlock>
+  </Form>
+)

src/features/Register/Steps/Subscriptions/Subscription.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import { Price } from '../../Price'
+import {
+  SubscriptionWrapper,
+  Radio,
+  SubscriptionTitle,
+  Row,
+} from './styled'
+
+export const Subscription = () => (
+  <SubscriptionWrapper>
+    <Row>
+      <Radio />
+      <SubscriptionTitle>Бесплатная</SubscriptionTitle>
+    </Row>
+    <Row left={70} bottom={100}>
+      <Price />
+    </Row>
+  </SubscriptionWrapper>
+)

src/features/Register/Steps/Subscriptions/index.tsx

@@ -0,0 +1,37 @@
+import React, { Fragment } from 'react'
+
+import { ButtonSolid } from 'features/Common'
+import { ButtonsBlock } from 'features/Login/styled'
+
+import { Subscription } from './Subscription'
+import {
+  SubscriptionsBlock,
+  AdditionalBlockTitle,
+  BlockTitle,
+  SubscriptionList,
+  SubscriptionListItem,
+} from './styled'
+
+export const SubscriptionStep = () => (
+  <Fragment>
+    <SubscriptionsBlock>
+      <BlockTitle>Выбор подписки</BlockTitle>
+      <SubscriptionList>
+        <SubscriptionListItem>
+          <Subscription />
+        </SubscriptionListItem>
+        <SubscriptionListItem>
+          <Subscription />
+        </SubscriptionListItem>
+      </SubscriptionList>
+    </SubscriptionsBlock>
+
+    <SubscriptionsBlock>
+      <AdditionalBlockTitle>Дополнительно</AdditionalBlockTitle>
+
+    </SubscriptionsBlock>
+    <ButtonsBlock>
+      <ButtonSolid>Готово</ButtonSolid>
+    </ButtonsBlock>
+  </Fragment>
+)

src/features/Register/Steps/Subscriptions/stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { Subscription as SubscriptionComponent } from './Subscription'
+
+export default {
+  title: 'Subscription',
+}
+
+export const Subscription = () => (
+  <SubscriptionComponent />
+)
+
+export const AdditionalSubscription = () => (
+  <SubscriptionComponent />
+)

src/features/Register/Steps/Subscriptions/styled.tsx

@@ -0,0 +1,71 @@
+import styled from 'styled-components/macro'
+
+export const SubscriptionsBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 80px;
+`
+
+export const BlockTitle = styled.span`
+  display: block;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 36px;
+  line-height: 24px;
+  color: ${({ theme: { colors } }) => colors.text};
+  transition: color 0.3s ease-in-out;
+`
+
+export const AdditionalBlockTitle = styled(BlockTitle)`
+  font-size: 32px;
+`
+
+export const SubscriptionList = styled.ul`
+  display: flex;
+  margin-top: 40px;
+`
+
+export const SubscriptionListItem = styled.li``
+
+export const SubscriptionWrapper = styled.div`
+  position: relative;
+  width: 288px;
+  height: 216px;
+  padding: 24px;
+  margin: 0 8px;
+  display: flex;
+  flex-direction: column;
+  background: #3F3F3F;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
+  border-radius: 2px;
+`
+
+export const SubscriptionTitle = styled.span`
+  margin-left: 22px;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 18px;
+  line-height: 21px;
+  color: ${({ theme: { colors } }) => colors.text};
+`
+
+type TRow = {
+  bottom?: number,
+  left?: number,
+}
+
+export const Row = styled.div<TRow>`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  left: ${({ left }) => left}px;
+  bottom: ${({ bottom }) => bottom}px;
+`
+
+export const Radio = styled.div`
+  width: 26px;
+  height: 26px;
+  background-image: url(/images/radioChecked.svg);
+  background-position: center;
+`

src/features/Register/Steps/index.tsx

@@ -0,0 +1,3 @@
+export * from './Registration'
+export * from './Card'
+export * from './Subscriptions'

src/features/Register/index.tsx

@@ -1,3 +1,31 @@
 import React from 'react'
+import { Route } from 'react-router'
 
-export const Register = () => <div>Registration page</div>
+import { PAGES } from 'config'
+
+import { Background } from 'features/Background'
+import { Logo } from 'features/Logo'
+import { CenterBlock } from 'features/Login/styled'
+
+import {
+  GeneralDataStep,
+  CardStep,
+  SubscriptionStep,
+} from './Steps'
+
+export const Register = () => (
+  <Background>
+    <CenterBlock>
+      <Logo />
+      <Route exact path={`${PAGES.register}`}>
+        <GeneralDataStep />
+      </Route>
+      <Route exact path={`${PAGES.register}/card`}>
+        <CardStep />
+      </Route>
+      <Route exact path={`${PAGES.register}/subscriptions`}>
+        <SubscriptionStep />
+      </Route>
+    </CenterBlock>
+  </Background>
+)

src/features/Register/styled.tsx

@@ -0,0 +1,35 @@
+import { Link } from 'react-router-dom'
+import styled from 'styled-components/macro'
+
+import { solidButtonStyles } from 'features/Common'
+
+export const NextButton = styled(Link)`
+  ${solidButtonStyles}
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+export const Card = styled.div`
+  width: 546px;
+  height: 340px;
+  margin: 20px 0;
+  padding: 0 32px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-sizing: border-box;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`
+
+export const Row = styled.div`
+  width: 100%;
+  display: flex;
+
+  & div:last-child {
+    margin-left: 16px;
+  }
+`