daily pastebin goal
87%
SHARE
TWEET

Untitled

a guest Feb 22nd, 2018 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import * as React from 'react'
  2. import { RouteComponentProps } from 'react-router'
  3. import { Redirect } from 'react-router-dom'
  4. import { observable, action } from 'mobx'
  5. import { observer, inject } from 'mobx-react'
  6. import { bind } from 'pik-react-utils'
  7. import styled from 'styled-components'
  8. import MediaQuery from 'react-responsive'
  9.  
  10. import { Layout, Wrapper as Wrapper_, PublicFooter } from '~/components/common'
  11. import NewAccountForm from './NewAccountForm'
  12. import { STORE_AUTH, STORE_ENTITIES } from '~/constants/stores'
  13. import { NEW_ACCOUNT, SELECT_ACCOUNT } from '~/constants/links'
  14. import { account } from '~/types'
  15. import { MEDIA } from '~/constants/media-queries'
  16. import {
  17.   MAIN_TEXT,
  18.   BLUE,
  19.   PLACEHOLDER,
  20.   DARK_LINES,
  21.   EXTRA_TEXT,
  22.   PAGE_BG
  23. } from '~/components/pru/ui-colors'
  24. import {
  25.   SecondaryBtn,
  26.   SecondaryBtnIcon,
  27.   SecondaryBtnSize
  28. } from '~/components/pru'
  29.  
  30. const Fragment = React.Fragment
  31.  
  32. const PageLayout = styled(Layout)`
  33.   display: flex;
  34.   min-width: 1024px;
  35.   flex: 1;
  36.   flex-direction: column;
  37.   background: url(${require('./icons/bg-pattern.svg')}) no-repeat bottom center;
  38.   background-size: contain;
  39.  
  40.   @media ${MEDIA.untilTablet} {
  41.     min-width: 320px;
  42.     background: none;
  43.   }
  44. `
  45.  
  46. const Wrapper = Wrapper_.extend`
  47.   display: flex;
  48.   flex-direction: column;
  49.   justify-content: center;
  50.   align-items: center;
  51.   min-height: auto;
  52.   background-color: transparent;
  53.   padding: 0;
  54.  
  55.   @media ${MEDIA.untilTablet} {
  56.     display: flex;
  57.     padding-top: 0;
  58.     justify-content: start;
  59.   }
  60. `
  61.  
  62. const Content = styled.section`
  63.   width: 436px;
  64.   // margin-top: -48px;
  65.   // padding-top: 48px;
  66.   padding-bottom: 80px;
  67.  
  68.   @media ${MEDIA.untilTablet} {
  69.     width: 100%;
  70.     padding-left: 20px;
  71.     padding-right: 20px;
  72.     margin-top: 0;
  73.     padding-top: 24px;
  74.   padding-bottom: 0;
  75.   }
  76. `
  77.  
  78. const Heading = styled.h1`
  79.   color: ${MAIN_TEXT};
  80.   font-size: 30px;
  81.   font-weight: normal;
  82.   margin: 0;
  83.   margin-bottom: 17px;
  84.   margin-top: 48px;
  85.   text-align: center;
  86.  
  87.   @media ${MEDIA.untilTablet} {
  88.     font-size: 26px;
  89.     margin-top: 0;
  90.     text-align: left;
  91.     margin-bottom: 10px;
  92.   }
  93. `
  94.  
  95. const Account = styled.button`
  96.   width: 100%;
  97.   padding: 12px 50px 12px 15px;
  98.   background-color: #fff;
  99.   border: none;
  100.   border-left: 4px solid ${DARK_LINES};
  101.   position: relative;
  102.   box-shadow: 0 2px 15px 0 rgba(51, 51, 51, 0.08);
  103.   cursor: pointer;
  104.   text-align: left;
  105.   margin-bottom: 12px;
  106.  
  107.   &:hover {
  108.     border-left: 4px solid ${BLUE};
  109.   }
  110.  
  111.   &::after {
  112.     position: absolute;
  113.     top: calc(50% - 6px);
  114.     right: 20px;
  115.     width: 8px;
  116.     height: 8px;
  117.     margin: 0 0 0 15px;
  118.     content: '';
  119.     border-top: 1px solid;
  120.     border-right: 1px solid;
  121.     transition: transform 0.2s ease-in-out;
  122.     transform: translate3d(0, 2px, 0) rotate(45deg);
  123.   }
  124.  
  125.   @media ${MEDIA.untilTablet} {
  126.     padding: 14px 49px 15px 14px;
  127.     background-image: none;
  128.     box-shadow: none;
  129.  
  130.     &::after {
  131.       transform: translate3d(0, 2px, 0) rotate(45deg);
  132.       top: calc(50% - 6px);
  133.       right: 21px;
  134.     }
  135.   }
  136. `
  137.  
  138. const City = styled.div`
  139.   font-size: 14px;
  140.   line-height: 1.29;
  141.   color: ${PLACEHOLDER};
  142. `
  143.  
  144. const Address = styled.div`
  145.   font-size: 20px;
  146.   line-height: 1.1;
  147.   color: ${MAIN_TEXT};
  148.   margin-bottom: 8px;
  149.   margin-top: 2px;
  150. `
  151.  
  152. const AccountNumber = City.extend`
  153.   text-transform: uppercase;
  154. `
  155.  
  156. const Footer = styled(PublicFooter)`
  157.   background-color: transparent;
  158.   color: ${EXTRA_TEXT};
  159.   opacity: 0.7;
  160.   /* width: 200px;
  161.   margin-bottom: 20px;
  162.   margin-top: 80px; */
  163. `
  164.  
  165. const AddAddressBtn = styled(SecondaryBtn)`
  166.   background-color: ${PAGE_BG};
  167.  
  168.   &:hover{
  169.     background-color: ${PAGE_BG};
  170.   }
  171.  
  172.   &::before{
  173.     width: 11px;
  174.     height: 11px;
  175.     margin-right: 7px;
  176.     margin-left: 19px;
  177.     margin-top: 3px;
  178.   }
  179.  
  180.   @media ${MEDIA.untilTablet} {
  181.     min-height: 46px;
  182.     padding: 0;
  183.  
  184.     &::before{
  185.       margin-right: 9px;
  186.       margin-left: -10px;
  187.     }
  188.   }
  189. `
  190.  
  191. @inject(STORE_AUTH, STORE_ENTITIES)
  192. @observer
  193. export default class PageSelectAccount extends React.Component<
  194.   RouteComponentProps<{}>
  195. > {
  196.   @observable creating = false
  197.  
  198.   constructor(props: RouteComponentProps<{}>) {
  199.     super(props)
  200.  
  201.     this.setCreatingState(this.props.match.path)
  202.   }
  203.  
  204.   @action
  205.   setCreatingState(currentMatch: string) {
  206.     this.creating = currentMatch === NEW_ACCOUNT
  207.   }
  208.  
  209.   componentWillUpdate(nextProps: RouteComponentProps<{}>) {
  210.     this.setCreatingState(nextProps.match.path)
  211.   }
  212.  
  213.   handleSelectAccount(uid: string) {
  214.     this.props[STORE_AUTH].setAccount(uid)
  215.     this.props.history.push('/')
  216.   }
  217.  
  218.   renderAccountSelection(accounts: any) {
  219.     return (
  220.       <Fragment>
  221.         <Heading>Личный кабинет</Heading>
  222.         {accounts.entities.map((acc: account) => {
  223.           return (
  224.             <Account
  225.               key={acc._uid}
  226.               onClick={bind(this, this.handleSelectAccount, acc._uid)}
  227.             >
  228.               <City>г. Москва</City>
  229.               <Address>{acc.address}</Address>
  230.               <AccountNumber>ЛС №112451753</AccountNumber>
  231.             </Account>
  232.           )
  233.         })}
  234.         <AddAddressBtn
  235.           link={NEW_ACCOUNT}
  236.           size={SecondaryBtnSize.LARGE}
  237.           icon={SecondaryBtnIcon.ADD}
  238.         >
  239.           <MediaQuery query={MEDIA.fromTablet}>
  240.             Добавить новый адрес
  241.           </MediaQuery>
  242.           <MediaQuery query={MEDIA.untilTablet}>
  243.             Добавить адрес
  244.           </MediaQuery>
  245.         </AddAddressBtn>
  246.       </Fragment>
  247.     )
  248.   }
  249.  
  250.   render() {
  251.     const { [STORE_ENTITIES]: store } = this.props
  252.  
  253.     const accounts = store.getList('account')
  254.     const hasAccounts = accounts && accounts.entities.length
  255.  
  256.     return (
  257.       <PageLayout footer={false} header={false}>
  258.         {!accounts ? (
  259.           'загрузка...'
  260.         ) : this.creating ? (
  261.           <Fragment>
  262.             <Wrapper>
  263.               <NewAccountForm firstAccount={!hasAccounts}/>
  264.             </Wrapper>
  265.             <MediaQuery query={MEDIA.fromTablet}>
  266.               <Footer />
  267.             </MediaQuery>
  268.           </Fragment>
  269.         ) : hasAccounts ? (
  270.           <Fragment>
  271.             <Wrapper>
  272.               <Content>{this.renderAccountSelection(accounts)}</Content>
  273.             </Wrapper>
  274.             <Footer />
  275.           </Fragment>
  276.         ) : (
  277.           <Redirect from={SELECT_ACCOUNT} to={NEW_ACCOUNT} />
  278.         )}
  279.       </PageLayout>
  280.     )
  281.   }
  282. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top