From 140425a61dc7dd5519897daaeaa0f4edf496d7a1 Mon Sep 17 00:00:00 2001
From: Anastasia Poupeney <anastasiasergienko@gmail.com>
Date: Thu, 21 Jun 2018 12:30:27 +0200
Subject: [PATCH] wip empty account tile

---
 src/components/DashboardPage/index.js       | 65 +++++++++++++++----
 src/icons/illustrations/emptyAccountTile.js | 72 +++++++++++++++++++++
 2 files changed, 125 insertions(+), 12 deletions(-)
 create mode 100644 src/icons/illustrations/emptyAccountTile.js

diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js
index c92116ce..b05f7cb0 100644
--- a/src/components/DashboardPage/index.js
+++ b/src/components/DashboardPage/index.js
@@ -4,15 +4,17 @@ import React, { PureComponent, Fragment } from 'react'
 import { compose } from 'redux'
 import { translate } from 'react-i18next'
 import { connect } from 'react-redux'
+import styled from 'styled-components'
 import { push } from 'react-router-redux'
 import { createStructuredSelector } from 'reselect'
-
 import type { Account, Currency } from '@ledgerhq/live-common/lib/types'
 import type { T } from 'types/common'
 
 import { colors } from 'styles/theme'
 
 import { accountsSelector } from 'reducers/accounts'
+import { openModal } from 'reducers/modals'
+import { MODAL_ADD_ACCOUNTS } from 'config/constants'
 import {
   counterValueCurrencySelector,
   localeSelector,
@@ -28,6 +30,9 @@ import UpdateNotifier from 'components/UpdateNotifier'
 import BalanceInfos from 'components/BalanceSummary/BalanceInfos'
 import BalanceSummary from 'components/BalanceSummary'
 import Box from 'components/base/Box'
+import IconEmptyAccountTile from 'icons/illustrations/EmptyAccountTile'
+import Button from '../base/Button/index'
+import Card from '../base/Box/Card'
 import PillsDaysCount from 'components/PillsDaysCount'
 import Text from 'components/base/Text'
 import OperationsList from 'components/OperationsList'
@@ -48,6 +53,7 @@ const mapDispatchToProps = {
   push,
   reorderAccounts,
   saveSettings,
+  openModal,
 }
 
 type Props = {
@@ -57,6 +63,7 @@ type Props = {
   counterValue: Currency,
   selectedTimeRange: TimeRange,
   saveSettings: ({ selectedTimeRange: TimeRange }) => *,
+  openModal: string => void,
 }
 
 class DashboardPage extends PureComponent<Props> {
@@ -82,11 +89,10 @@ class DashboardPage extends PureComponent<Props> {
   _cacheBalance = null
 
   render() {
-    const { accounts, t, counterValue, selectedTimeRange } = this.props
+    const { accounts, t, counterValue, selectedTimeRange, openModal } = this.props
     const daysCount = timeRangeDaysByKey[selectedTimeRange]
     const timeFrame = this.handleGreeting()
     const totalAccounts = accounts.length
-
     const displayOperationsHelper = (account: Account) => account.operations.length > 0
     const displayOperations = accounts.some(displayOperationsHelper)
 
@@ -155,17 +161,43 @@ class DashboardPage extends PureComponent<Props> {
                     style={{ margin: '0 -16px' }}
                   >
                     {accounts
-                      .concat(Array(3 - (accounts.length % 3)).fill(null))
+                      .concat(
+                        Array(3 - (accounts.length % 3))
+                          .fill(null)
+                          .map((_, i) => i === 0),
+                      )
                       .map((account, i) => (
-                        <Box key={account ? account.id : `placeholder_${i}`} flex="33%" p={16}>
+                        <Box
+                          key={typeof account === 'object' ? account.id : `placeholder_${i}`}
+                          flex="33%"
+                          p={16}
+                        >
                           {account ? (
-                            <AccountCard
-                              key={account.id}
-                              counterValue={counterValue}
-                              account={account}
-                              daysCount={daysCount}
-                              onClick={this.onAccountClick}
-                            />
+                            typeof account === 'object' ? (
+                              <AccountCard
+                                key={account.id}
+                                counterValue={counterValue}
+                                account={account}
+                                daysCount={daysCount}
+                                onClick={this.onAccountClick}
+                              />
+                            ) : (
+                              <Wrapper>
+                                <IconEmptyAccountTile />
+                                <Box
+                                  ff="Open Sans"
+                                  fontSize={3}
+                                  color="grey"
+                                  pb={2}
+                                  textAlign="center"
+                                >
+                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit
+                                </Box>
+                                <Button primary onClick={() => openModal(MODAL_ADD_ACCOUNTS)}>
+                                  Create account
+                                </Button>
+                              </Wrapper>
+                            )
                           ) : null}
                         </Box>
                       ))}
@@ -198,3 +230,12 @@ export default compose(
   ),
   translate(),
 )(DashboardPage)
+
+const Wrapper = styled(Box).attrs({
+  p: 4,
+  flex: 1,
+  alignItems: 'center',
+})`
+  border: 1px dashed ${p => p.theme.colors.fog};
+  border-radius: 4px;
+`
diff --git a/src/icons/illustrations/emptyAccountTile.js b/src/icons/illustrations/emptyAccountTile.js
new file mode 100644
index 00000000..54e82ddb
--- /dev/null
+++ b/src/icons/illustrations/emptyAccountTile.js
@@ -0,0 +1,72 @@
+// @flow
+
+import React from 'react'
+
+export default () => (
+  <svg width="224" height="94">
+    <defs>
+      <rect id="b" x="20" y="12" width="142" height="40" rx="4" />
+      <filter
+        x="-28.9%"
+        y="-55%"
+        width="157.7%"
+        height="305%"
+        filterUnits="objectBoundingBox"
+        id="a"
+      >
+        <feOffset dy="19" in="SourceAlpha" result="shadowOffsetOuter1" />
+        <feGaussianBlur stdDeviation="10.5" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+        <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" in="shadowBlurOuter1" />
+      </filter>
+      <rect id="d" x="10" y="9" width="162" height="38" rx="4" />
+      <filter
+        x="-25.3%"
+        y="-57.9%"
+        width="150.6%"
+        height="315.8%"
+        filterUnits="objectBoundingBox"
+        id="c"
+      >
+        <feOffset dy="19" in="SourceAlpha" result="shadowOffsetOuter1" />
+        <feGaussianBlur stdDeviation="10.5" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+        <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" in="shadowBlurOuter1" />
+      </filter>
+      <rect id="f" width="182" height="42" rx="4" />
+      <filter
+        x="-22.5%"
+        y="-52.4%"
+        width="145.1%"
+        height="295.2%"
+        filterUnits="objectBoundingBox"
+        id="e"
+      >
+        <feOffset dy="19" in="SourceAlpha" result="shadowOffsetOuter1" />
+        <feGaussianBlur stdDeviation="10.5" in="shadowOffsetOuter1" result="shadowBlurOuter1" />
+        <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0" in="shadowBlurOuter1" />
+      </filter>
+      <path
+        d="M5.62 0h1.7v3.058h-1.7V0zm1.7 0v3.058h-1.7V0h1.7zM5.813 12.942h1.7V16h-1.7v-3.058zm1.7 0V16h-1.7v-3.058h1.7zM2.406 0h1.7v3.058h-1.7V0zm1.7 0v3.058h-1.7V0h1.7zM2.6 12.942h1.7V16H2.6v-3.058zm1.7 0V16H2.6v-3.058h1.7zM.666 8.813V1.95h.85l6.139.002c1.807.11 3.212 1.566 3.118 3.254l-.002.279c.111 1.744-1.298 3.217-3.168 3.328H.666zm.85 0l.85-.85v4.32h5.608c.95-.025 1.676-.727 1.659-1.557v-.37c.019-.814-.707-1.518-1.637-1.543h-6.48zm7.557-3.275l.001-.378c.042-.77-.62-1.457-1.471-1.51H2.366v3.463h5.205c.899-.063 1.552-.753 1.502-1.575zM2.366 7.113l5.186.002.467-.002c1.86.05 3.355 1.5 3.314 3.262v.334c.036 1.779-1.458 3.224-3.337 3.273H.666V7.113h1.7zm0 0v.85l-.85-.85h.85z"
+        id="g"
+      />
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+      <g transform="translate(21 2)">
+        <use fill="#000" filter="url(#a)" xlinkHref="#b" />
+        <use fill="#FFF" xlinkHref="#b" />
+      </g>
+      <g transform="translate(21 2)">
+        <use fill="#000" filter="url(#c)" xlinkHref="#d" />
+        <use fill="#FFF" xlinkHref="#d" />
+      </g>
+      <g transform="translate(21 2)">
+        <use fill="#000" filter="url(#e)" xlinkHref="#f" />
+        <use fill="#FFF" xlinkHref="#f" />
+        <rect fill="#999" x="39" y="13" width="120" height="5" rx="2.5" />
+        <rect fill="#D8D8D8" x="39" y="23" width="70" height="5" rx="2.5" />
+        <g transform="translate(17 13)">
+          <use fill="#FCB653" fill-rule="nonzero" xlinkHref="#g" />
+        </g>
+      </g>
+    </g>
+  </svg>
+)