From 3e692e482e0751ce73cf24055a76b4fa337c0d3c Mon Sep 17 00:00:00 2001
From: newick <erick@entre-quote.com>
Date: Fri, 7 Jun 2019 11:28:55 +0200
Subject: [PATCH 01/19] style(Contribute): add form elements add intention
 selector change cheap selector to efficient ones

---
 .../CreateNoticeScreen.stories.tsx            | 10 ++
 .../App/CreateNoticeScreen/Textarea.tsx       |  7 ++
 .../content/App/CreateNoticeScreen/index.tsx  | 29 ++++++
 .../App/Notice/Details/Details.stories.tsx    | 23 +++++
 .../content/App/Notice/Details/withConnect.ts |  1 +
 .../App/PublishedNoticeScreen/Container.ts    | 21 +++++
 .../App/PublishedNoticeScreen/Content.ts      |  6 ++
 .../App/PublishedNoticeScreen/ContentTitle.ts |  7 ++
 .../PublishedNoticeScreen/Illustration.tsx    | 91 +++++++++++++++++++
 .../PublishedNoticeScreen.stories.tsx         |  9 ++
 .../App/PublishedNoticeScreen/index.tsx       | 27 ++++++
 src/app/theme.ts                              |  4 +-
 src/components/atoms/ContentWrapper.ts        |  6 ++
 .../atoms/Forms/Error/Error.stories.tsx       |  7 ++
 src/components/atoms/Forms/Error/Error.ts     |  9 ++
 .../atoms/Forms/Input/Input.stories.tsx       | 22 +++++
 src/components/atoms/Forms/Input/Input.ts     | 25 +++++
 .../atoms/Forms/Textarea/Textarea.stories.tsx | 11 ++-
 .../atoms/Forms/Textarea/Textarea.ts          | 19 +++-
 .../Type => atoms/Intentions}/Background.ts   | 10 +-
 .../atoms/Intentions/Intention.stories.tsx    | 24 +++++
 .../Intentions}/IntentionIcon.tsx             | 11 ++-
 src/components/atoms/icons/Alternative.tsx    | 27 ++++++
 src/components/atoms/icons/Information.tsx    | 29 ++++++
 src/components/atoms/icons/IntentionsIcons.ts | 21 +++++
 src/components/atoms/icons/Other.tsx          | 26 ++++++
 .../{types/Dislike.tsx => ThumbDown.tsx}      | 11 ++-
 .../icons/{types/Like.tsx => ThumbUp.tsx}     | 11 ++-
 .../atoms/icons/types/Alternative.tsx         | 13 ---
 .../atoms/icons/types/Information.tsx         | 15 ---
 src/components/atoms/icons/types/Other.tsx    | 14 ---
 src/components/atoms/icons/types/index.ts     | 22 -----
 src/components/atoms/index.ts                 |  1 +
 .../IntentionsSelector.stories.tsx            | 10 ++
 .../IntentionsSelector/IntentionsSelector.tsx | 22 +++++
 .../IntentionsSelectorContainer.ts            | 14 +++
 .../molecules/Type/Type.stories.tsx           | 13 ---
 src/components/organisms/Notice/Notice.tsx    |  6 +-
 .../NoticeDetails/CenterContainer.ts          | 11 +++
 .../NoticeDetails/DetailsContainer.ts         |  3 +
 .../organisms/NoticeDetails/DetailsContent.ts |  2 +-
 .../organisms/NoticeDetails/Feedbacks.ts      |  3 +-
 .../NoticeDetails/NoticeDetails.stories.tsx   | 10 ++
 .../organisms/NoticeDetails/NoticeDetails.tsx | 14 +--
 44 files changed, 559 insertions(+), 118 deletions(-)
 create mode 100644 src/app/content/App/CreateNoticeScreen/CreateNoticeScreen.stories.tsx
 create mode 100644 src/app/content/App/CreateNoticeScreen/Textarea.tsx
 create mode 100644 src/app/content/App/CreateNoticeScreen/index.tsx
 create mode 100644 src/app/content/App/PublishedNoticeScreen/Container.ts
 create mode 100644 src/app/content/App/PublishedNoticeScreen/Content.ts
 create mode 100644 src/app/content/App/PublishedNoticeScreen/ContentTitle.ts
 create mode 100644 src/app/content/App/PublishedNoticeScreen/Illustration.tsx
 create mode 100644 src/app/content/App/PublishedNoticeScreen/PublishedNoticeScreen.stories.tsx
 create mode 100644 src/app/content/App/PublishedNoticeScreen/index.tsx
 create mode 100644 src/components/atoms/ContentWrapper.ts
 create mode 100644 src/components/atoms/Forms/Error/Error.stories.tsx
 create mode 100644 src/components/atoms/Forms/Error/Error.ts
 create mode 100644 src/components/atoms/Forms/Input/Input.stories.tsx
 create mode 100644 src/components/atoms/Forms/Input/Input.ts
 rename src/components/{molecules/Type => atoms/Intentions}/Background.ts (66%)
 create mode 100644 src/components/atoms/Intentions/Intention.stories.tsx
 rename src/components/{molecules/Type => atoms/Intentions}/IntentionIcon.tsx (63%)
 create mode 100644 src/components/atoms/icons/Alternative.tsx
 create mode 100644 src/components/atoms/icons/Information.tsx
 create mode 100644 src/components/atoms/icons/IntentionsIcons.ts
 create mode 100644 src/components/atoms/icons/Other.tsx
 rename src/components/atoms/icons/{types/Dislike.tsx => ThumbDown.tsx} (85%)
 rename src/components/atoms/icons/{types/Like.tsx => ThumbUp.tsx} (86%)
 delete mode 100644 src/components/atoms/icons/types/Alternative.tsx
 delete mode 100644 src/components/atoms/icons/types/Information.tsx
 delete mode 100644 src/components/atoms/icons/types/Other.tsx
 delete mode 100644 src/components/atoms/icons/types/index.ts
 create mode 100644 src/components/molecules/IntentionsSelector/IntentionsSelector.stories.tsx
 create mode 100644 src/components/molecules/IntentionsSelector/IntentionsSelector.tsx
 create mode 100644 src/components/molecules/IntentionsSelector/IntentionsSelectorContainer.ts
 delete mode 100644 src/components/molecules/Type/Type.stories.tsx
 create mode 100644 src/components/organisms/NoticeDetails/CenterContainer.ts

diff --git a/src/app/content/App/CreateNoticeScreen/CreateNoticeScreen.stories.tsx b/src/app/content/App/CreateNoticeScreen/CreateNoticeScreen.stories.tsx
new file mode 100644
index 000000000..38f91a25c
--- /dev/null
+++ b/src/app/content/App/CreateNoticeScreen/CreateNoticeScreen.stories.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { MemoryRouter as Router } from 'react-router-dom';
+import CreateNoticeScreen from '.';
+
+storiesOf('screens/CreateNotice', module)
+  .addDecorator(getStory => <Router>{getStory()}</Router>)
+  .add('normal', () => <CreateNoticeScreen close={action('close')} />)
+  .add('error', () => <CreateNoticeScreen close={action('close')} />);
diff --git a/src/app/content/App/CreateNoticeScreen/Textarea.tsx b/src/app/content/App/CreateNoticeScreen/Textarea.tsx
new file mode 100644
index 000000000..740ce6a55
--- /dev/null
+++ b/src/app/content/App/CreateNoticeScreen/Textarea.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import styled from 'styled-components';
+import Button from 'components/atoms/Forms/Textarea/Textarea';
+
+export default styled(Button)`
+  height: 154px;
+`;
diff --git a/src/app/content/App/CreateNoticeScreen/index.tsx b/src/app/content/App/CreateNoticeScreen/index.tsx
new file mode 100644
index 000000000..88cf21258
--- /dev/null
+++ b/src/app/content/App/CreateNoticeScreen/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import Notification from 'components/organisms/Notification';
+import IntentionsSelector from 'components/molecules/IntentionsSelector/IntentionsSelector';
+import Input from 'components/atoms/Forms/Input/Input';
+import Textarea from './Textarea';
+import Error from 'components/atoms/Forms/Error/Error';
+import { CenterContainer, ContentWrapper } from 'components/atoms/';
+import BorderButton from 'components/atoms/Buttons/BorderButton';
+
+interface Props {
+  close: () => void;
+}
+export const CreateNoticeScreen = ({ close }: Props) => (
+  <Notification title="créer une bulle ici" close={close}>
+    <ContentWrapper>
+      <IntentionsSelector value="approval" />
+
+      <Input type="email" placeholder="your@email.com" />
+      <Textarea placeholder="Ecrire le message que vous souhaitez publier" />
+      <CenterContainer>
+        <BorderButton>prévisualiser et publier</BorderButton>
+      </CenterContainer>
+
+      <Error>Les champs en rouge sont incorrects ou incomplets</Error>
+    </ContentWrapper>
+  </Notification>
+);
+
+export default CreateNoticeScreen;
diff --git a/src/app/content/App/Notice/Details/Details.stories.tsx b/src/app/content/App/Notice/Details/Details.stories.tsx
index 7c7db7a88..982b4286c 100644
--- a/src/app/content/App/Notice/Details/Details.stories.tsx
+++ b/src/app/content/App/Notice/Details/Details.stories.tsx
@@ -54,4 +54,27 @@ storiesOf('screens/Notice/Details', module)
       view={action('view')}
       followSource={action('followSource')}
     />
+  ))
+  .add('preview', () => (
+    <Details
+      notice={generateStatefulNotice({
+        contributor: text('contributor', defaultContributorName),
+        intention: select('intention', intentions, 'approval'),
+        message: `<p>${text('message', defaultMessage)}</p>`,
+        sourceUrl: text('source', defaultSourceUrl),
+        created: date('created', defaultDate),
+        likes: number('likes', 42),
+        dislikes: number('dislikes', 2),
+        liked: boolean('liked', false),
+        disliked: boolean('disliked', false)
+      })}
+      like={action('like')}
+      unlike={action('unlike')}
+      dislike={action('dislike')}
+      undislike={action('undislike')}
+      view={action('view')}
+      followSource={action('followSource')}
+      close={action('close')}
+      preview
+    />
   ));
diff --git a/src/app/content/App/Notice/Details/withConnect.ts b/src/app/content/App/Notice/Details/withConnect.ts
index 3e5ff4dd6..87a5a2ccf 100644
--- a/src/app/content/App/Notice/Details/withConnect.ts
+++ b/src/app/content/App/Notice/Details/withConnect.ts
@@ -16,6 +16,7 @@ import { StatefulNotice } from '../../../../lmem/notice';
 
 export interface DetailsStateProps {
   notice?: StatefulNotice;
+  preview?: boolean;
 }
 
 const mapStateToProps = (
diff --git a/src/app/content/App/PublishedNoticeScreen/Container.ts b/src/app/content/App/PublishedNoticeScreen/Container.ts
new file mode 100644
index 000000000..e8407970e
--- /dev/null
+++ b/src/app/content/App/PublishedNoticeScreen/Container.ts
@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { CenterContainer, ExternalLink } from 'components/atoms/';
+
+export default styled.article`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  padding-bottom: 38px;
+  text-align: center;
+
+  & ${CenterContainer} {
+    margin-top: auto;
+  }
+
+  & ${ExternalLink} {
+    display: block;
+    font-weight: bold;
+  }
+`;
diff --git a/src/app/content/App/PublishedNoticeScreen/Content.ts b/src/app/content/App/PublishedNoticeScreen/Content.ts
new file mode 100644
index 000000000..7d5d98b3d
--- /dev/null
+++ b/src/app/content/App/PublishedNoticeScreen/Content.ts
@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export default styled.p`
+  font-size: 14px;
+  margin: 5px 0 20px;
+`;
diff --git a/src/app/content/App/PublishedNoticeScreen/ContentTitle.ts b/src/app/content/App/PublishedNoticeScreen/ContentTitle.ts
new file mode 100644
index 000000000..610acbcd5
--- /dev/null
+++ b/src/app/content/App/PublishedNoticeScreen/ContentTitle.ts
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+import ContentTitle from 'components/atoms/ContentTitle';
+
+export default styled(ContentTitle)`
+  margin-top: 9px;
+  font-size: 22px;
+`;
diff --git a/src/app/content/App/PublishedNoticeScreen/Illustration.tsx b/src/app/content/App/PublishedNoticeScreen/Illustration.tsx
new file mode 100644
index 000000000..bfdd89fa0
--- /dev/null
+++ b/src/app/content/App/PublishedNoticeScreen/Illustration.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+
+export default () => (
+  <svg width="87" height="104.427">
+    <defs>
+      <clipPath id="a">
+        <path
+          fill="none"
+          stroke="#707070"
+          d="M40-8.562c5.788 0 10.558-17.987 15.787-15.657 9.582 4.266 59.984 30.425 63.825 40.748 1.524 4.091-31.244 21.011-31.244 25.935C88.369 64.555 62.091 80 40 80A40 40 0 0 1 0 40C0 17.909 17.909-8.562 40-8.562z"
+          transform="translate(1681.167 179)"
+        />
+      </clipPath>
+    </defs>
+
+    <g transform="translate(-1681.166 -154.573)">
+      <circle
+        x="40"
+        y="40"
+        fill="#e1f3f7"
+        transform="translate(1681.167 179)"
+      />
+      <g clipPath="url(#a)">
+        <g transform="translate(1684.114 174.396)">
+          <path
+            fill="#aa854b"
+            d="M60.295 30.105a7.745 7.745 0 0 1-5.479-13.225l9.131-9.131 10.96 10.957-9.133 9.134a7.726 7.726 0 0 1-5.479 2.265zm0 0"
+          />
+          <path
+            d="M62.602 42.55l-1.22-2.441a1.219 1.219 0 0 1 .546-1.635 46.559 46.559 0 0 1 19.482-4.877 1.218 1.218 0 0 1 1.246 1.219v2.73a1.22 1.22 0 0 1-1.188 1.217 41.34 41.34 0 0 0-17.229 4.333 1.22 1.22 0 0 1-1.637-.546zm.544 1.09"
+            fill="#48c8ef"
+          />
+          <path
+            d="M74.907 46.494a2.582 2.582 0 0 1 2.583 2.583 2.582 2.582 0 0 1-2.583 2.583 2.582 2.582 0 0 1-2.583-2.583 2.582 2.582 0 0 1 2.583-2.583zM64.575 56.826a2.582 2.582 0 0 1 2.583 2.583 2.582 2.582 0 0 1-2.583 2.583 2.582 2.582 0 0 1-2.583-2.583 2.582 2.582 0 0 1 2.583-2.583z"
+            fill="#40a2e7"
+          />
+          <path
+            d="M42.55 21.274l-2.446-1.224a1.217 1.217 0 0 1-.544-1.631 41.413 41.413 0 0 0 4.33-17.232A1.216 1.216 0 0 1 45.105 0h2.738a1.214 1.214 0 0 1 1.216 1.241 46.569 46.569 0 0 1-4.879 19.486 1.212 1.212 0 0 1-1.63.547zm1.09.544"
+            fill="#48c8ef"
+          />
+          <path
+            d="M33.579 5.166a2.582 2.582 0 0 1 2.583 2.583 2.582 2.582 0 0 1-2.583 2.583 2.582 2.582 0 0 1-2.583-2.583 2.582 2.582 0 0 1 2.583-2.583zM23.247 15.498a2.582 2.582 0 0 1 2.583 2.583 2.582 2.582 0 0 1-2.583 2.583 2.582 2.582 0 0 1-2.583-2.583 2.582 2.582 0 0 1 2.583-2.583z"
+            fill="#40a2e7"
+          />
+          <path
+            fill="#00ddc2"
+            d="M13.346 82.656H0V56.494a34 34 0 0 1 4.511-1.416 32 32 0 0 0 17.406-8.942L32.31 35.71l14.638 14.636-10.432 10.4a32.043 32.043 0 0 0-8.937 17.4 40.83 40.83 0 0 1-1.288 4.512zm0 0"
+          />
+          <path
+            fill="#0ac1a7"
+            d="M43.067 46.465L32.312 35.708l-7.292 7.31 10.766 10.766a25.068 25.068 0 0 0-2.832 3.41C25.374 68.077 13.26 74.904 0 74.904v7.749h26.29a40.992 40.992 0 0 0 1.287-4.511 32.021 32.021 0 0 1 8.937-17.4l10.432-10.4zm0 0"
+          />
+          <path
+            fill="#77959e"
+            d="M25.02 35.718L35.978 24.76l21.917 21.918L46.94 57.637zm0 0"
+          />
+          <path
+            fill="#62808c"
+            d="M46.931 50.958l-18.577-18.58-3.337 3.34 21.914 21.917 10.96-10.957-3.34-3.34zm0 0"
+          />
+          <rect
+            width="5.166"
+            height="5.166"
+            fill="#fff"
+            rx="2.583"
+            transform="translate(5.166 61.992)"
+          />
+          <rect
+            width="5.166"
+            height="5.166"
+            fill="#fff"
+            rx="2.583"
+            transform="translate(15.498 56.826)"
+          />
+          <path
+            fill="#916e40"
+            d="M74.907 18.706L63.947 7.749l-7.121 7.119a12.853 12.853 0 0 0 1.643 2.012l6.964 6.964a7.657 7.657 0 0 1-12.545-3.621 7.729 7.729 0 0 0 12.889 7.617l2.012-2.012zm0 0"
+          />
+          <path
+            fill="#ecce93"
+            d="M74.908 22.804a7.708 7.708 0 0 1-5.479-2.27l-7.307-7.305a7.75 7.75 0 0 1 10.96-10.958l7.305 7.305a7.748 7.748 0 0 1-5.479 13.228zm0 0"
+          />
+          <path
+            fill="#e5bd76"
+            d="M80.386 13.23a7.75 7.75 0 0 1-10.958 0l-7.307-7.305a7.627 7.627 0 0 1-1.312-1.826 7.734 7.734 0 0 0 1.313 9.131l7.307 7.305a7.723 7.723 0 0 0 12.276-9.131 7.765 7.765 0 0 1-1.317 1.827zm0 0"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+);
diff --git a/src/app/content/App/PublishedNoticeScreen/PublishedNoticeScreen.stories.tsx b/src/app/content/App/PublishedNoticeScreen/PublishedNoticeScreen.stories.tsx
new file mode 100644
index 000000000..71ae9b7fc
--- /dev/null
+++ b/src/app/content/App/PublishedNoticeScreen/PublishedNoticeScreen.stories.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { MemoryRouter as Router } from 'react-router-dom';
+import PublishedNoticeScreen from '.';
+
+storiesOf('screens/PublishedNotice', module)
+  .addDecorator(getStory => <Router>{getStory()}</Router>)
+  .add('normal', () => <PublishedNoticeScreen />);
diff --git a/src/app/content/App/PublishedNoticeScreen/index.tsx b/src/app/content/App/PublishedNoticeScreen/index.tsx
new file mode 100644
index 000000000..69994061e
--- /dev/null
+++ b/src/app/content/App/PublishedNoticeScreen/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import Notification from 'components/organisms/Notification';
+import { Button, CenterContainer, ExternalLink } from 'components/atoms';
+import BorderButton from 'components/atoms/Buttons/BorderButton';
+import Container from './Container';
+import Content from './Content';
+import ContentTitle from './ContentTitle';
+import Illustration from './Illustration';
+
+export default () => (
+  <Notification close={close}>
+    <Container>
+      <Illustration />
+      <ContentTitle>Félicitations !</ContentTitle>
+      <Content>
+        Votre bulle sera publiée d’ici 24h sur :
+        <ExternalLink>www.ouisncf.com</ExternalLink>
+      </Content>
+      <BorderButton>Voir la Bulle</BorderButton>
+
+      <CenterContainer>
+        <Button>Retour aux Bulles</Button>
+      </CenterContainer>
+    </Container>
+  </Notification>
+);
diff --git a/src/app/theme.ts b/src/app/theme.ts
index 38937cd61..850c42e8c 100644
--- a/src/app/theme.ts
+++ b/src/app/theme.ts
@@ -23,7 +23,7 @@ export interface Theme {
   accountListBg: string;
 
   // color list:
-  typeBg: string;
+  inactiveIntentionBg: string;
   bottomBar: string;
   topBarNavInactiveDeleteBg: string;
   formBorder: string;
@@ -97,7 +97,7 @@ export const theme: Theme = {
   accountListBg: '#fff',
 
   // color list:
-  typeBg: '#EBEBEB',
+  inactiveIntentionBg: '#EBEBEB',
   bottomBar: '#DDDDDD',
   topBarNavInactiveDeleteBg: '#A6B1C0',
   formBorder: '#707070',
diff --git a/src/components/atoms/ContentWrapper.ts b/src/components/atoms/ContentWrapper.ts
new file mode 100644
index 000000000..f5989fc37
--- /dev/null
+++ b/src/components/atoms/ContentWrapper.ts
@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export default styled.section`
+  box-sizing: border-box;
+  padding: 11px 19px;
+`;
diff --git a/src/components/atoms/Forms/Error/Error.stories.tsx b/src/components/atoms/Forms/Error/Error.stories.tsx
new file mode 100644
index 000000000..4c65f488b
--- /dev/null
+++ b/src/components/atoms/Forms/Error/Error.stories.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Error from './Error';
+
+storiesOf('atoms/Forms/Error Text', module).add('text', () => (
+  <Error>Les champs en rouge sont incorrects ou incomplets</Error>
+));
diff --git a/src/components/atoms/Forms/Error/Error.ts b/src/components/atoms/Forms/Error/Error.ts
new file mode 100644
index 000000000..b5b460d0b
--- /dev/null
+++ b/src/components/atoms/Forms/Error/Error.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export default styled.p`
+  font-size: 13px;
+  line-height: 1;
+  color: ${props => props.theme.formError};
+  font-weight: bold;
+  text-align: center;
+`;
diff --git a/src/components/atoms/Forms/Input/Input.stories.tsx b/src/components/atoms/Forms/Input/Input.stories.tsx
new file mode 100644
index 000000000..e1ca9f1f4
--- /dev/null
+++ b/src/components/atoms/Forms/Input/Input.stories.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Input from './Input';
+
+storiesOf('atoms/Forms/Input', module)
+  .add('text', () => (
+    <Input
+      placeholder="Source (facultatif). Exemple : www.nom-de-site.com"
+      type="text"
+    />
+  ))
+  .add('text with error', () => (
+    <Input
+      placeholder="Source (facultatif). Exemple : www.nom-de-site.com"
+      type="text"
+      error
+    />
+  ))
+  .add('email', () => <Input placeholder="coucou@lmem.net" type="email" />)
+  .add('email with error', () => (
+    <Input placeholder="coucou@lmem.net" type="email" error />
+  ));
diff --git a/src/components/atoms/Forms/Input/Input.ts b/src/components/atoms/Forms/Input/Input.ts
new file mode 100644
index 000000000..021272d74
--- /dev/null
+++ b/src/components/atoms/Forms/Input/Input.ts
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+interface Props {
+  error?: boolean;
+}
+
+export default styled.input<Props>`
+  box-sizing: border-box;
+  width: 100%;
+  margin-bottom: 10px;
+  padding: 8px 10px 10px 14px;
+  font-size: 13px;
+  line-height: 1;
+  border-radius: 6px;
+  border: 1px solid
+    ${props =>
+      props.error ? props.theme.formError : props.theme.secondaryColor};
+  box-shadow: inset 0px 0px 0px 2px
+    ${props => (props.error ? props.theme.formError : '#fff')};
+  resize: none;
+
+  ::placeholder {
+    font-style: italic;
+  }
+`;
diff --git a/src/components/atoms/Forms/Textarea/Textarea.stories.tsx b/src/components/atoms/Forms/Textarea/Textarea.stories.tsx
index c05efa749..d5222a07e 100644
--- a/src/components/atoms/Forms/Textarea/Textarea.stories.tsx
+++ b/src/components/atoms/Forms/Textarea/Textarea.stories.tsx
@@ -2,4 +2,13 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import Textarea from './Textarea';
 
-storiesOf('atoms/Forms/Textarea', module).add('normal', () => <Textarea />);
+storiesOf('atoms/Forms/Textarea', module)
+  .add('normal', () => (
+    <Textarea placeholder="Écrire le message que vous souhaitez publier" />
+  ))
+  .add('error', () => (
+    <Textarea
+      placeholder="Écrire le message que vous souhaitez publier"
+      error
+    />
+  ));
diff --git a/src/components/atoms/Forms/Textarea/Textarea.ts b/src/components/atoms/Forms/Textarea/Textarea.ts
index 99ba2658e..de61dda89 100644
--- a/src/components/atoms/Forms/Textarea/Textarea.ts
+++ b/src/components/atoms/Forms/Textarea/Textarea.ts
@@ -1,14 +1,25 @@
 import styled from 'styled-components';
 
-export default styled.textarea`
+interface Props {
+  error?: boolean;
+}
+
+export default styled.textarea<Props>`
   box-sizing: border-box;
   width: 100%;
   height: 87px;
   margin-bottom: 10px;
-  padding: 10px;
+  padding: 8px 10px 10px 14px;
   font-size: 13px;
   border-radius: 6px;
-  border: 1px solid ${props => props.theme.secondaryColor};
+  border: 1px solid
+    ${props =>
+      props.error ? props.theme.formError : props.theme.secondaryColor};
+  box-shadow: inset 0px 0px 0px 2px
+    ${props => (props.error ? props.theme.formError : '#fff')};
   resize: none;
-  font-style: italic;
+
+  ::placeholder {
+    font-style: italic;
+  }
 `;
diff --git a/src/components/molecules/Type/Background.ts b/src/components/atoms/Intentions/Background.ts
similarity index 66%
rename from src/components/molecules/Type/Background.ts
rename to src/components/atoms/Intentions/Background.ts
index faa7e7e69..437ef40f7 100644
--- a/src/components/molecules/Type/Background.ts
+++ b/src/components/atoms/Intentions/Background.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-const TypeBackground = styled.div`
+const IntentionBackground = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -9,14 +9,10 @@ const TypeBackground = styled.div`
   margin-right: 10px;
   border-radius: 50%;
   background-color: ${props => props.color};
-
-  & > svg {
-    fill: #fff;
-  }
 `;
 
-TypeBackground.defaultProps = {
+IntentionBackground.defaultProps = {
   color: '#F1F1F4'
 };
 
-export default TypeBackground;
+export default IntentionBackground;
diff --git a/src/components/atoms/Intentions/Intention.stories.tsx b/src/components/atoms/Intentions/Intention.stories.tsx
new file mode 100644
index 000000000..b5f558dad
--- /dev/null
+++ b/src/components/atoms/Intentions/Intention.stories.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { MemoryRouter as Router } from 'react-router-dom';
+import { storiesOf } from '@storybook/react';
+import Intention from './IntentionIcon';
+
+storiesOf('atoms/Intentions', module)
+  .addDecorator(getStory => <Router>{getStory()}</Router>)
+  .add('approval (active)', () => <Intention active intention="approval" />)
+  .add('approval (inactive)', () => <Intention intention="approval" />)
+  .add('disapproval (active)', () => (
+    <Intention active intention="disapproval" />
+  ))
+  .add('disapproval (inactive)', () => <Intention intention="disapproval" />)
+  .add('alternative (active)', () => (
+    <Intention active intention="alternative" />
+  ))
+  .add('alternative (inactive)', () => <Intention intention="alternative" />)
+  .add('information (active)', () => (
+    <Intention active intention="information" />
+  ))
+  .add('information (inactive)', () => <Intention intention="information" />)
+  .add('other (active)', () => <Intention active intention="other" />)
+  .add('other (inactive)', () => <Intention intention="other" />)
+  .add('undefined / unknown ', () => <Intention />);
diff --git a/src/components/molecules/Type/IntentionIcon.tsx b/src/components/atoms/Intentions/IntentionIcon.tsx
similarity index 63%
rename from src/components/molecules/Type/IntentionIcon.tsx
rename to src/components/atoms/Intentions/IntentionIcon.tsx
index e1f9c99c3..2d06d9f50 100644
--- a/src/components/molecules/Type/IntentionIcon.tsx
+++ b/src/components/atoms/Intentions/IntentionIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { withTheme } from 'styled-components';
 import Background from './Background';
-import intentionIcons from '../../atoms/icons/types';
+import intentionIcons from '../icons/IntentionsIcons';
 import { Theme } from 'app/theme';
 import { getTypeOrFallback, Intention } from 'app/lmem/intention';
 
@@ -11,14 +11,17 @@ interface Style {
 interface Props {
   intention?: Intention;
   theme: Theme;
+  active?: boolean;
 }
-const IntentionIcon = ({ intention, theme }: Props) => {
+const IntentionIcon = ({ intention, theme, active }: Props) => {
   const Icon = getTypeOrFallback(intentionIcons)(intention);
   const style = getTypeOrFallback<Style>(theme.intentions)(intention);
 
   return (
-    <Background color={style && style.background}>
-      {Icon && <Icon />}
+    <Background
+      color={active ? style && style.background : theme.inactiveIntentionBg}
+    >
+      {Icon && <Icon filled={!active} stroked={!active} />}
     </Background>
   );
 };
diff --git a/src/components/atoms/icons/Alternative.tsx b/src/components/atoms/icons/Alternative.tsx
new file mode 100644
index 000000000..2fedf9eb1
--- /dev/null
+++ b/src/components/atoms/icons/Alternative.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { withTheme } from 'styled-components';
+import { Theme } from 'app/theme';
+
+interface Props {
+  filled?: boolean;
+  theme: Theme;
+}
+
+const Alternative = ({ filled, theme }: Props) => {
+  const fill = filled ? theme.secondaryColor : '#fff';
+
+  return (
+    <svg width="27.432" height="20.971" viewBox="0 0 27 21">
+      <path
+        fill={fill}
+        d="M27.309 5.88L21.676.247a.655.655 0 0 0-.736-.122.737.737 0 0 0-.427.613v3.579a8.672 8.672 0 0 0-6.8
+       3.329A8.672 8.672 0 0 0 6.978 4.32V.678a.608.608 0 0 0-.43-.613.644.644 0 0 0-.732.122L.18 5.82a.751.751
+       0 0 0 0 .98l5.636 5.632a.647.647 0 0 0 .732.122.739.739 0 0 0 .43-.612V8.763a4.731 4.731 0 0 1 4.645
+       4.395c0 .106.007.207.007.317v7.5h4.165v-7.5-.15a4.731 4.731 0 0 1 4.649-4.562v3.181a.612.612 0 0 0
+       .43.612.647.647 0 0 0 .732-.122l5.636-5.632a.7.7 0 0 0 .182-.491.518.518 0 0 0-.115-.431z"
+      />
+    </svg>
+  );
+};
+
+export default withTheme(Alternative);
diff --git a/src/components/atoms/icons/Information.tsx b/src/components/atoms/icons/Information.tsx
new file mode 100644
index 000000000..bbfec063e
--- /dev/null
+++ b/src/components/atoms/icons/Information.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { withTheme } from 'styled-components';
+import { Theme } from 'app/theme';
+
+interface Props {
+  filled?: boolean;
+  theme: Theme;
+}
+
+const Information = ({ filled, theme }: Props) => {
+  const fill = filled ? theme.secondaryColor : '#fff';
+
+  return (
+    <svg width="11.453" height="24.922" viewBox=" 0 0 11.453 24.922">
+      <path
+        fill={fill}
+        d="M11.11 22.124c-1.187 2.419-4.362 2.8-5.218 2.8a4.5 4.5 0 0 1-3.068-.962 3.118 3.118 0 0
+      1-1.095-2.445 8.6 8.6 0 0 1 .082-1.178q.084-.6.265-1.358l1.358-4.806q.182-.689.306-1.308a5.741 5.741
+      0 0 0 .124-1.126 1.717 1.717 0 0 0-.38-1.285c-1.016-.933-3.217.017-3.483.116 1.231-2.8 4.5-2.8
+      5.225-2.8a4.394 4.394 0 0 1 3.022.947A3.144 3.144 0 0 1 9.31 11.18a9.865 9.865 0 0 1-.345 2.552l-1.352
+      4.787a12.764 12.764 0 0 0-.3 1.319 6.749 6.749 0 0 0-.132 1.119 1.923 1.923 0 0 0 .425 1.3c.947 1.164
+      3.315-.042 3.5-.131zm.343-19.1a2.8 2.8 0 0 1-.946 2.132 3.219 3.219 0 0 1-2.277.881 3.256 3.256 0 0
+      1-2.289-.881 2.8 2.8 0 0 1-.955-2.132A2.823 2.823 0 0 1 5.941.885a3.378 3.378 0 0 1 4.566 0 2.827 2.827 0 0 1 .946 2.139zm0 0"
+      />
+    </svg>
+  );
+};
+
+export default withTheme(Information);
diff --git a/src/components/atoms/icons/IntentionsIcons.ts b/src/components/atoms/icons/IntentionsIcons.ts
new file mode 100644
index 000000000..e72330151
--- /dev/null
+++ b/src/components/atoms/icons/IntentionsIcons.ts
@@ -0,0 +1,21 @@
+import { ComponentType } from 'react';
+import { Intention } from 'app/lmem/intention';
+import ThumbUp from './ThumbUp';
+import ThumbDown from './ThumbDown';
+import Information from './Information';
+import Alternative from './Alternative';
+import Other from './Other';
+
+interface Props {
+  filled?: boolean;
+  stroked?: boolean;
+}
+const IntentionsIcons: { [key in Intention]: ComponentType<Props> } = {
+  approval: ThumbUp,
+  disapproval: ThumbDown,
+  information: Information,
+  alternative: Alternative,
+  other: Other
+};
+
+export default IntentionsIcons;
diff --git a/src/components/atoms/icons/Other.tsx b/src/components/atoms/icons/Other.tsx
new file mode 100644
index 000000000..54fdb7bc1
--- /dev/null
+++ b/src/components/atoms/icons/Other.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { withTheme } from 'styled-components';
+import { Theme } from 'app/theme';
+
+interface Props {
+  stroked?: boolean;
+  theme: Theme;
+}
+const Other = ({ stroked, theme }: Props) => {
+  const stroke = stroked ? theme.secondaryColor : '#fff';
+
+  return (
+    <svg width="28.809" height="28.809" viewBox="0 0 28.809 28.809">
+      <path
+        fill="none"
+        stroke={stroke}
+        strokeWidth="2px"
+        strokeDasharray="8 2"
+        d="M22.883,3.926A13.4,13.4,0,0,0,3.926,22.883,13.4,13.4,0,0,0,22.883,3.926Z"
+        transform="translate(1 1)"
+      />
+    </svg>
+  );
+};
+
+export default withTheme(Other);
diff --git a/src/components/atoms/icons/types/Dislike.tsx b/src/components/atoms/icons/ThumbDown.tsx
similarity index 85%
rename from src/components/atoms/icons/types/Dislike.tsx
rename to src/components/atoms/icons/ThumbDown.tsx
index 616e8d91e..35d456ae8 100644
--- a/src/components/atoms/icons/types/Dislike.tsx
+++ b/src/components/atoms/icons/ThumbDown.tsx
@@ -3,12 +3,13 @@ import { withTheme } from 'styled-components';
 import { Theme } from 'app/theme';
 
 interface Props {
-  active?: boolean;
+  stroked?: boolean;
+  filled?: boolean;
   theme: Theme;
 }
-const Dislike = ({ active, theme }: Props) => {
-  const stroke = !active ? theme.secondaryColor : '#fff';
-  const fill = active ? theme.secondaryColor : undefined;
+const ThumbDown = ({ filled, stroked, theme }: Props) => {
+  const stroke = stroked ? theme.secondaryColor : undefined;
+  const fill = filled ? theme.secondaryColor : '#fff';
 
   return (
     <svg width="20.254" height="19.444" viewBox="-1 -1 22.254 21.444">
@@ -33,4 +34,4 @@ const Dislike = ({ active, theme }: Props) => {
   );
 };
 
-export default withTheme(Dislike);
+export default withTheme(ThumbDown);
diff --git a/src/components/atoms/icons/types/Like.tsx b/src/components/atoms/icons/ThumbUp.tsx
similarity index 86%
rename from src/components/atoms/icons/types/Like.tsx
rename to src/components/atoms/icons/ThumbUp.tsx
index 1197a7a96..4cf8e46a0 100644
--- a/src/components/atoms/icons/types/Like.tsx
+++ b/src/components/atoms/icons/ThumbUp.tsx
@@ -3,12 +3,13 @@ import { withTheme } from 'styled-components';
 import { Theme } from 'app/theme';
 
 interface Props {
-  active?: boolean;
+  stroked?: boolean;
+  filled?: boolean;
   theme: Theme;
 }
-const Like = ({ active, theme }: Props) => {
-  const stroke = !active ? theme.secondaryColor : '#fff';
-  const fill = active ? theme.secondaryColor : undefined;
+const ThumbUp = ({ filled, stroked, theme }: Props) => {
+  const stroke = stroked ? theme.secondaryColor : undefined;
+  const fill = filled ? theme.secondaryColor : '#fff';
 
   return (
     <svg width="20.254" height="19.444" viewBox="-1 -1 22.254 21.444">
@@ -33,4 +34,4 @@ const Like = ({ active, theme }: Props) => {
   );
 };
 
-export default withTheme(Like);
+export default withTheme(ThumbUp);
diff --git a/src/components/atoms/icons/types/Alternative.tsx b/src/components/atoms/icons/types/Alternative.tsx
deleted file mode 100644
index 987a3ae58..000000000
--- a/src/components/atoms/icons/types/Alternative.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-
-export default () => (
-  <svg width="27.432" height="20.971" viewBox="0 0 27 21">
-    <path
-      d="M27.309 5.88L21.676.247a.655.655 0 0 0-.736-.122.737.737 0 0 0-.427.613v3.579a8.672 8.672 0 0 0-6.8
-       3.329A8.672 8.672 0 0 0 6.978 4.32V.678a.608.608 0 0 0-.43-.613.644.644 0 0 0-.732.122L.18 5.82a.751.751
-       0 0 0 0 .98l5.636 5.632a.647.647 0 0 0 .732.122.739.739 0 0 0 .43-.612V8.763a4.731 4.731 0 0 1 4.645
-       4.395c0 .106.007.207.007.317v7.5h4.165v-7.5-.15a4.731 4.731 0 0 1 4.649-4.562v3.181a.612.612 0 0 0
-       .43.612.647.647 0 0 0 .732-.122l5.636-5.632a.7.7 0 0 0 .182-.491.518.518 0 0 0-.115-.431z"
-    />
-  </svg>
-);
diff --git a/src/components/atoms/icons/types/Information.tsx b/src/components/atoms/icons/types/Information.tsx
deleted file mode 100644
index 27f2d9be0..000000000
--- a/src/components/atoms/icons/types/Information.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-export default () => (
-  <svg width="11.453" height="24.922" viewBox=" 0 0 11.453 24.922">
-    <path
-      d="M11.11 22.124c-1.187 2.419-4.362 2.8-5.218 2.8a4.5 4.5 0 0 1-3.068-.962 3.118 3.118 0 0
-    1-1.095-2.445 8.6 8.6 0 0 1 .082-1.178q.084-.6.265-1.358l1.358-4.806q.182-.689.306-1.308a5.741 5.741
-     0 0 0 .124-1.126 1.717 1.717 0 0 0-.38-1.285c-1.016-.933-3.217.017-3.483.116 1.231-2.8 4.5-2.8
-     5.225-2.8a4.394 4.394 0 0 1 3.022.947A3.144 3.144 0 0 1 9.31 11.18a9.865 9.865 0 0 1-.345 2.552l-1.352
-     4.787a12.764 12.764 0 0 0-.3 1.319 6.749 6.749 0 0 0-.132 1.119 1.923 1.923 0 0 0 .425 1.3c.947 1.164
-     3.315-.042 3.5-.131zm.343-19.1a2.8 2.8 0 0 1-.946 2.132 3.219 3.219 0 0 1-2.277.881 3.256 3.256 0 0
-     1-2.289-.881 2.8 2.8 0 0 1-.955-2.132A2.823 2.823 0 0 1 5.941.885a3.378 3.378 0 0 1 4.566 0 2.827 2.827 0 0 1 .946 2.139zm0 0"
-    />
-  </svg>
-);
diff --git a/src/components/atoms/icons/types/Other.tsx b/src/components/atoms/icons/types/Other.tsx
deleted file mode 100644
index 0ccb734b1..000000000
--- a/src/components/atoms/icons/types/Other.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-
-export default () => (
-  <svg width="28.809" height="28.809" viewBox="0 0 28.809 28.809">
-    <path
-      fill="none"
-      stroke="#fff"
-      strokeWidth="2px"
-      strokeDasharray="8 2"
-      d="M22.883,3.926A13.4,13.4,0,0,0,3.926,22.883,13.4,13.4,0,0,0,22.883,3.926Z"
-      transform="translate(1 1)"
-    />
-  </svg>
-);
diff --git a/src/components/atoms/icons/types/index.ts b/src/components/atoms/icons/types/index.ts
deleted file mode 100644
index 880f29948..000000000
--- a/src/components/atoms/icons/types/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentType } from 'react';
-import { Intention } from 'app/lmem/intention';
-// import Like from "./Like";
-import Approval from './Like';
-// import Dislike from "./Dislike";
-import Disapproval from './Dislike';
-import Information from './Information';
-import Alternative from './Alternative';
-import Other from './Other';
-
-interface Props {
-  active?: boolean;
-}
-const TypesIcons: { [key in Intention]: ComponentType<Props> } = {
-  approval: Approval,
-  disapproval: Disapproval,
-  information: Information,
-  alternative: Alternative,
-  other: Other
-};
-
-export default TypesIcons;
diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts
index 7c8fcbad2..de9035561 100644
--- a/src/components/atoms/index.ts
+++ b/src/components/atoms/index.ts
@@ -8,6 +8,7 @@ export { default as BackgroundButton } from './Button/BackgroundButton';
 export { default as BorderButton } from './Button/BorderButton';
 export { default as OpenButton } from './Button/OpenButton';
 
+export { default as ContentWrapper } from './ContentWrapper';
 export { default as CenterContainer } from './CenterContainer';
 export { default as Contributor } from './Contributor';
 export { default as Time } from './Time';
diff --git a/src/components/molecules/IntentionsSelector/IntentionsSelector.stories.tsx b/src/components/molecules/IntentionsSelector/IntentionsSelector.stories.tsx
new file mode 100644
index 000000000..0a28c8be8
--- /dev/null
+++ b/src/components/molecules/IntentionsSelector/IntentionsSelector.stories.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import IntentionsSelector from './IntentionsSelector';
+
+storiesOf('organisms/IntentionsSelector', module)
+  .add('approval', () => <IntentionsSelector value="approval" />)
+  .add('disapproval', () => <IntentionsSelector value="disapproval" />)
+  .add('information', () => <IntentionsSelector value="information" />)
+  .add('alternative', () => <IntentionsSelector value="alternative" />)
+  .add('other', () => <IntentionsSelector value="other" />);
diff --git a/src/components/molecules/IntentionsSelector/IntentionsSelector.tsx b/src/components/molecules/IntentionsSelector/IntentionsSelector.tsx
new file mode 100644
index 000000000..9c18ae2d7
--- /dev/null
+++ b/src/components/molecules/IntentionsSelector/IntentionsSelector.tsx
@@ -0,0 +1,22 @@
+import React, { Fragment } from 'react';
+import { intentions } from 'app/lmem/intention';
+import IntentionIcon from 'components/atoms/Intentions/IntentionIcon';
+import IntentionsSelectorContainer from './IntentionsSelectorContainer';
+
+interface Props {
+  value: string;
+}
+
+const IntentionSelector = ({ value }: Props) => (
+  <IntentionsSelectorContainer>
+    {intentions.map(intention => (
+      <IntentionIcon
+        key={intention}
+        intention={intention}
+        active={intention === value}
+      />
+    ))}
+  </IntentionsSelectorContainer>
+);
+
+export default IntentionSelector;
diff --git a/src/components/molecules/IntentionsSelector/IntentionsSelectorContainer.ts b/src/components/molecules/IntentionsSelector/IntentionsSelectorContainer.ts
new file mode 100644
index 000000000..f57a74b44
--- /dev/null
+++ b/src/components/molecules/IntentionsSelector/IntentionsSelectorContainer.ts
@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import Background from 'components/atoms/Intentions/Background';
+
+export default styled.div`
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 10px;
+
+  ${Background} {
+    margin-right: 0;
+    cursor: pointer;
+  }
+`;
diff --git a/src/components/molecules/Type/Type.stories.tsx b/src/components/molecules/Type/Type.stories.tsx
deleted file mode 100644
index 3842d770f..000000000
--- a/src/components/molecules/Type/Type.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { MemoryRouter as Router } from 'react-router-dom';
-import { storiesOf } from '@storybook/react';
-import Intention from './IntentionIcon';
-
-storiesOf('molecules/Type', module)
-  .addDecorator(getStory => <Router>{getStory()}</Router>)
-  .add('approval', () => <Intention intention="approval" />)
-  .add('disapproval', () => <Intention intention="disapproval" />)
-  .add('alternative', () => <Intention intention="alternative" />)
-  .add('information', () => <Intention intention="information" />)
-  .add('other', () => <Intention intention="other" />)
-  .add('undefined / unknown ', () => <Intention />);
diff --git a/src/components/organisms/Notice/Notice.tsx b/src/components/organisms/Notice/Notice.tsx
index 266e9a52f..593530427 100644
--- a/src/components/organisms/Notice/Notice.tsx
+++ b/src/components/organisms/Notice/Notice.tsx
@@ -14,7 +14,7 @@ import Deleted from './Deleted';
 import DeleteButton from './DeleteButton';
 import Title from './Title';
 import { StatefulNotice } from '../../../app/lmem/notice';
-import IntentionIcon from '../../molecules/Type/IntentionIcon';
+import IntentionIcon from '../../atoms/Intentions/IntentionIcon';
 import {
   CountDownState,
   initialState as countdownInitialState
@@ -60,7 +60,7 @@ export default class Notice extends PureComponent<Props, CountDownState> {
   }
 
   static defaultProps = {
-    type: 'Other',
+    intention: 'Other',
     dismissed: false,
     disliked: false,
     markedRead: false,
@@ -143,7 +143,7 @@ export default class Notice extends PureComponent<Props, CountDownState> {
             </>
           ) : (
             <>
-              <IntentionIcon intention={intention} />
+              <IntentionIcon intention={intention} active />
               <Description>
                 <Title numberOfCharacters={truncateTitleAt}>
                   {stripHtml(message)}
diff --git a/src/components/organisms/NoticeDetails/CenterContainer.ts b/src/components/organisms/NoticeDetails/CenterContainer.ts
new file mode 100644
index 000000000..047607f98
--- /dev/null
+++ b/src/components/organisms/NoticeDetails/CenterContainer.ts
@@ -0,0 +1,11 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button, BorderButton, CenterContainer } from 'components/atoms';
+
+export default styled(CenterContainer)`
+  margin-bottom: 15px;
+
+  ${BorderButton} {
+    margin-left: 20px;
+  }
+`;
diff --git a/src/components/organisms/NoticeDetails/DetailsContainer.ts b/src/components/organisms/NoticeDetails/DetailsContainer.ts
index f90eb8c4b..c3e7966e2 100644
--- a/src/components/organisms/NoticeDetails/DetailsContainer.ts
+++ b/src/components/organisms/NoticeDetails/DetailsContainer.ts
@@ -2,5 +2,8 @@ import styled from 'styled-components';
 
 export default styled.article`
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
   font-size: 16px;
 `;
diff --git a/src/components/organisms/NoticeDetails/DetailsContent.ts b/src/components/organisms/NoticeDetails/DetailsContent.ts
index bd0b67548..40b26500d 100644
--- a/src/components/organisms/NoticeDetails/DetailsContent.ts
+++ b/src/components/organisms/NoticeDetails/DetailsContent.ts
@@ -5,7 +5,7 @@ export default styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
-  height: 320px;
+  flex-grow: 1;
   padding: 12px 16px 12px 16px;
   margin: 10px;
   background-color: #fff;
diff --git a/src/components/organisms/NoticeDetails/Feedbacks.ts b/src/components/organisms/NoticeDetails/Feedbacks.ts
index 8ec81d6de..2af029a33 100644
--- a/src/components/organisms/NoticeDetails/Feedbacks.ts
+++ b/src/components/organisms/NoticeDetails/Feedbacks.ts
@@ -31,9 +31,8 @@ export default styled.div<FeedbacksProps>`
 
     &:hover {
       svg {
-        stroke: #fff;
+        stroke: ${props => props.theme.secondaryColor};
         stroke-width: 0.5px;
-        fill: ${props => props.theme.secondaryColor};
       }
     }
   }
diff --git a/src/components/organisms/NoticeDetails/NoticeDetails.stories.tsx b/src/components/organisms/NoticeDetails/NoticeDetails.stories.tsx
index 19dd25d7e..d3d8f1c75 100644
--- a/src/components/organisms/NoticeDetails/NoticeDetails.stories.tsx
+++ b/src/components/organisms/NoticeDetails/NoticeDetails.stories.tsx
@@ -58,4 +58,14 @@ storiesOf('organisms/NoticeDetails', module)
       {...commonProps}
       notice={generateStatefulNotice({ withSource: false })}
     />
+  ))
+  .add('Preview', () => (
+    <NoticeDetails
+      notice={generateStatefulNotice({ withSource: false })}
+      like={action('like')}
+      unlike={action('unlike')}
+      dislike={action('dislike')}
+      undislike={action('undislike')}
+      preview
+    />
   ));
diff --git a/src/components/organisms/NoticeDetails/NoticeDetails.tsx b/src/components/organisms/NoticeDetails/NoticeDetails.tsx
index 116458848..ce3237a9f 100644
--- a/src/components/organisms/NoticeDetails/NoticeDetails.tsx
+++ b/src/components/organisms/NoticeDetails/NoticeDetails.tsx
@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
-import { Button, Contributor, Timer } from '../../atoms';
-import Like from '../../atoms/icons/types/Like';
-import Dislike from '../../atoms/icons/types/Dislike';
+import { Contributor, Button, Timer } from '../../atoms';
+import ThumbUp from '../../atoms/icons/ThumbUp';
+import ThumbDown from '../../atoms/icons/ThumbDown';
 import Source from './Source/Source';
 import SourceURL from './Source/SourceURL';
 import DetailsContainer from './DetailsContainer';
@@ -14,7 +14,7 @@ import Feedbacks from './Feedbacks';
 import Date from './Date';
 import { StatefulNotice } from '../../../app/lmem/notice';
 import { format } from 'date-fns';
-import IntentionIcon from '../../molecules/Type/IntentionIcon';
+import IntentionIcon from '../../atoms/Intentions/IntentionIcon';
 import {
   CountDownState,
   initialState as countdownInitialState
@@ -144,7 +144,7 @@ class NoticeDetails extends PureComponent<NoticeDetailsProps, CountDownState> {
           <DetailsMeta>
             <Date>Le {format(created, 'DD/MM/YYYY')}</Date>
             <Contributor>{contributor.name} :</Contributor>
-            <IntentionIcon intention={intention} />
+            <IntentionIcon active intention={intention} />
           </DetailsMeta>
 
           <Message>{message}</Message>
@@ -159,11 +159,11 @@ class NoticeDetails extends PureComponent<NoticeDetailsProps, CountDownState> {
 
           <Feedbacks>
             <Button onClick={this.handleLikeClick}>
-              <Like active={liked} />
+              <ThumbUp filled={liked} />
               {likes}
             </Button>
             <Button onClick={this.handleDislikeClick}>
-              <Dislike active={disliked} />
+              <ThumbDown filled={disliked} />
               {dislikes}
             </Button>
           </Feedbacks>

From ce8cb82d5d15c8cbb394e940027cd9b0811dfca1 Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Thu, 20 Jun 2019 10:16:39 +0200
Subject: [PATCH 02/19] feat(contribution): setup sendinblue for contribution
 forward

add form elements
add intention selector
change cheap selector to efficient ones
add `onChange` handler on `IntentionSelector`
---
 .env.example                                  |  4 ++
 .gitignore                                    |  1 +
 package.json                                  |  1 +
 src/api/sendInBlue/call.ts                    | 25 +++++++++++
 src/api/sendInBlue/sendEmail.ts               |  6 +++
 src/api/sendInBlue/types.ts                   | 34 +++++++++++++++
 src/app/actions/contribution.ts               | 14 +++++++
 src/app/background/index.ts                   |  6 +--
 .../background/middlewares/sendFeedback.ts    |  8 ++--
 src/app/background/sagas/contribution.ts      | 14 +++++++
 src/app/background/sagas/index.ts             |  2 +
 .../services/createContributionEmail.ts       | 24 +++++++++++
 .../App/Notice/Details/Details.stories.tsx    | 23 -----------
 src/app/lmem/contributor.ts                   |  6 +++
 src/app/lmem/format/contribution.ts           | 29 +++++++++++++
 src/app/lmem/notice.ts                        | 10 ++++-
 src/app/theme.ts                              | 24 ++++-------
 src/app/utils/isEmail.ts                      |  2 +
 src/app/utils/truncate.ts                     | 36 ++++++++++++++--
 .../atoms/Intentions/IntentionIcon.tsx        | 11 +++--
 ...tionsSelectorContainer.ts => Container.ts} |  0
 .../IntentionsSelector.stories.tsx            | 21 +++++++---
 .../IntentionsSelector/IntentionsSelector.tsx | 40 +++++++++++-------
 .../NoticeDetails/NoticeDetails.stories.tsx   | 10 -----
 src/types/index.d.ts                          |  7 ++++
 test/app/utils/isEmail.ts                     | 29 +++++++++++++
 test/app/utils/truncate.ts                    | 41 +++++++++++++++++++
 test/fakers/generateNotice.ts                 |  4 +-
 views/background.pug                          |  1 +
 webpack.config.js                             | 22 ++++++++++
 webpack/config.plugins.js                     | 19 ++++++++-
 yarn.lock                                     |  5 +++
 32 files changed, 390 insertions(+), 89 deletions(-)
 create mode 100644 .env.example
 create mode 100644 src/api/sendInBlue/call.ts
 create mode 100644 src/api/sendInBlue/sendEmail.ts
 create mode 100644 src/api/sendInBlue/types.ts
 create mode 100644 src/app/actions/contribution.ts
 create mode 100644 src/app/background/sagas/contribution.ts
 create mode 100644 src/app/background/services/createContributionEmail.ts
 create mode 100644 src/app/lmem/format/contribution.ts
 create mode 100644 src/app/utils/isEmail.ts
 rename src/components/molecules/IntentionsSelector/{IntentionsSelectorContainer.ts => Container.ts} (100%)
 create mode 100644 test/app/utils/isEmail.ts
 create mode 100644 test/app/utils/truncate.ts

diff --git a/.env.example b/.env.example
new file mode 100644
index 000000000..b51cdecc3
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,4 @@
+SEND_CONTRIBUTION_TO=contact@lmem.net
+SEND_CONTRIBUTION_FROM=contact@lmem.net
+SEND_IN_BLUE_TOKEN=token
+SENTRY_DSN=https://ID@sentry.io/PROJECT
diff --git a/.gitignore b/.gitignore
index 5e20720d6..a7cca10b3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,3 +15,4 @@ platforms/
 .ftppass
 storybook-static/*
 .sentryclirc
+.env
diff --git a/package.json b/package.json
index 3d7d68569..d24499b2a 100644
--- a/package.json
+++ b/package.json
@@ -115,6 +115,7 @@
     "core-js": "^3.2.1",
     "css-loader": "^2.0.1",
     "date-fns": "^1.30.1",
+    "dotenv": "^8.0.0",
     "enzyme": "^3.7.0",
     "es6-promise": "^3.2.1",
     "eslint": "^5.16.0",
diff --git a/src/api/sendInBlue/call.ts b/src/api/sendInBlue/call.ts
new file mode 100644
index 000000000..b6ff9c3c1
--- /dev/null
+++ b/src/api/sendInBlue/call.ts
@@ -0,0 +1,25 @@
+import fetch from 'isomorphic-fetch';
+
+type Method = 'GET' | 'POST';
+
+const call = (path: string, data?: {} | [], method: Method = 'GET') =>
+  fetch(`https://api.sendinblue.com/v3/${path}`, {
+    method,
+    body: JSON.stringify(data),
+    headers: {
+      'api-key': process.env.SEND_IN_BLUE_TOKEN as string,
+      'Content-Type': 'application/json'
+    }
+  }).then(response => {
+    if (response.status >= 400) {
+      throw new Error('Bad response from server');
+    }
+    if (response.status === 204) {
+      return true;
+    }
+    return response.json();
+  });
+
+export const get = (path: string) => call(path);
+
+export const post = (path: string, data: {} | []) => call(path, data, 'POST');
diff --git a/src/api/sendInBlue/sendEmail.ts b/src/api/sendInBlue/sendEmail.ts
new file mode 100644
index 000000000..5eef8848a
--- /dev/null
+++ b/src/api/sendInBlue/sendEmail.ts
@@ -0,0 +1,6 @@
+import { post } from './call';
+
+const sendEmail = (email: SendInBlue.TransactionEmail) =>
+  post('smtp/email', email);
+
+export default sendEmail;
diff --git a/src/api/sendInBlue/types.ts b/src/api/sendInBlue/types.ts
new file mode 100644
index 000000000..b2f60df4c
--- /dev/null
+++ b/src/api/sendInBlue/types.ts
@@ -0,0 +1,34 @@
+namespace SendInBlue {
+  export interface PersonEmail {
+    name?: string;
+    email: string;
+  }
+  export interface Sender extends PersonEmail {}
+  export interface Recipient extends PersonEmail {}
+
+  export interface UrlAttachment {
+    name?: string;
+    url: string;
+  }
+  export interface Base64Attachment {
+    name: string;
+    content: string;
+  }
+  export type Attachment = UrlAttachment | Base64Attachment;
+
+  export interface TransactionEmail {
+    sender?: Sender; // Mandatory if 'templateId' is not passed. Pass name (optional) and email of sender from which emails will be sent. For example, {'name':'Mary from MyShop', 'email':'no-reply@myshop.com'}
+    to: Recipient[]; // List of email addresses and names (optional) of the recipients. For example, [{'name':'Jimmy', 'email':'jimmy98@example.com'}, {'name':'Joe', 'email':'joe@example.com'}]
+    bcc?: Recipient[]; // List of email addresses and names (optional) of the recipients in bcc
+    cc?: Recipient[]; // List of email addresses and names (optional) of the recipients in cc
+    htmlContent?: string; // HTML body of the message ( Mandatory if 'templateId' is not passed, ignored if 'templateId' is passed )
+    textContent?: string; // Plain Text body of the message ( Ignored if 'templateId' is passed )
+    subject?: string; // Subject of the message. Mandatory if 'templateId' is not passed
+    replyTo?: Sender; // Email (required), along with name (optional), on which transactional mail recipients will be able to reply back. For example, {'email':'ann6533@example.com', 'name':'Ann'}.
+    attachment?: Attachment[]; // Pass the absolute URL (no local file) or the base64 content of the attachment along with the attachment name (Mandatory if attachment content is passed). For example, [{"url":"https://attachment.domain.com/myAttachmentFromUrl.jpg", "name":"My attachment 1"}, {"content":"base64 exmaple content", "name":"My attachment 2"}]. Allowed extensions for attachment file: xlsx, xls, ods, docx, docm, doc, csv, pdf, txt, gif, jpg, jpeg, png, tif, tiff, rtf, bmp, cgm, css, shtml, html, htm, zip, xml, ppt, pptx, tar, ez, ics, mobi, msg, pub, eps, odt, mp3, m4a, m4v, wma, ogg, flac, wav, aif, aifc, aiff, mp4, mov, avi, mkv, mpeg, mpg and wmv ( If 'templateId' is passed and is in New Template Language format then only attachment url is accepted. If template is in Old template Language format, then 'attachment' is ignored )
+    headers?: { [key: string]: string }; // Pass the set of headers that shall be sent along the mail headers in the original email. 'sender.ip' header can be set (only for dedicated ip users) to mention the IP to be used for sending transactional emails. For example, {'Content-Type':'text/html', 'charset':'iso-8859-1', 'sender.ip':'1.2.3.4'}
+    templateId?: number; // int64 Id of the template
+    params?: {}; // Pass the set of attributes to customize the template. For example, {'FNAME':'Joe', 'LNAME':'Doe'}. It's considered only if template is in New Template Language format.
+    tags?: string[]; // Tag your emails to find them more ea
+  }
+}
diff --git a/src/app/actions/contribution.ts b/src/app/actions/contribution.ts
new file mode 100644
index 000000000..28753397b
--- /dev/null
+++ b/src/app/actions/contribution.ts
@@ -0,0 +1,14 @@
+import { Contribution } from 'app/lmem/notice';
+import { BaseAction } from '.';
+
+export interface ContributionSubmittedAction extends BaseAction {
+  type: 'CONTRIBUTION_SUBMITTED';
+  payload: Contribution;
+}
+
+export const contributionSubmitted = (
+  contribution: Contribution
+): ContributionSubmittedAction => ({
+  type: 'CONTRIBUTION_SUBMITTED',
+  payload: contribution
+});
diff --git a/src/app/background/index.ts b/src/app/background/index.ts
index 8387a9ac1..fa0fa7b76 100644
--- a/src/app/background/index.ts
+++ b/src/app/background/index.ts
@@ -1,12 +1,12 @@
 // Early imports with high priority stuff involved, such as event listeners creation
 import loadHeap from '../../lib/heap';
 import prepareDraftPreview from '../lmem/draft-preview/main';
-import { LMEM_BACKEND_ORIGIN } from '../constants/origins';
+import { LMEM_BACKEND_ORIGIN } from 'app/constants/origins';
 import onInstalled from 'app/actions/install';
 import updateDraftNotices from 'app/actions/updateDraftNotices';
-import { configureSentryScope, initSentry } from '../utils/sentry';
-import { getInstallationDetails } from './selectors/prefs';
+import { configureSentryScope, initSentry } from 'app/utils/sentry';
 import { store } from './store';
+import { getInstallationDetails } from './selectors/prefs';
 import fetchContentScript from './services/fetchContentScript';
 import { BackgroundState } from './reducers';
 
diff --git a/src/app/background/middlewares/sendFeedback.ts b/src/app/background/middlewares/sendFeedback.ts
index e723f60b4..421c9ca67 100644
--- a/src/app/background/middlewares/sendFeedback.ts
+++ b/src/app/background/middlewares/sendFeedback.ts
@@ -1,8 +1,8 @@
-import { AppAction } from '../../actions';
 import { Dispatch } from 'redux';
-import { FeedbackOnNoticeAction } from '../../actions/notices';
-import postRating from '../../../api/postRating';
-import { RatingType } from '../../lmem/rating';
+import postRating from 'api/postRating';
+import { AppAction } from 'app/actions';
+import { FeedbackOnNoticeAction } from 'app/actions/notices';
+import { RatingType } from 'app/lmem/rating';
 
 const isRatingAction = (action: AppAction): action is FeedbackOnNoticeAction =>
   action.type === 'FEEDBACK_ON_NOTICE' &&
diff --git a/src/app/background/sagas/contribution.ts b/src/app/background/sagas/contribution.ts
new file mode 100644
index 000000000..4aa1bdf00
--- /dev/null
+++ b/src/app/background/sagas/contribution.ts
@@ -0,0 +1,14 @@
+import { takeLatest, call } from 'redux-saga/effects';
+import sendEmail from 'api/sendInBlue/sendEmail';
+import { ContributionSubmittedAction } from '../../actions/contribution';
+import createContributionEmail from '../services/createContributionEmail';
+
+export function* sendContributionSaga({
+  payload: contribution
+}: ContributionSubmittedAction) {
+  yield call(sendEmail, createContributionEmail(contribution));
+}
+
+export default function* contributionSaga() {
+  yield takeLatest('CONTRIBUTION_SUBMITTED', sendContributionSaga);
+}
diff --git a/src/app/background/sagas/index.ts b/src/app/background/sagas/index.ts
index 0305af6d6..88e378506 100644
--- a/src/app/background/sagas/index.ts
+++ b/src/app/background/sagas/index.ts
@@ -1,6 +1,7 @@
 import { fork, all } from 'redux-saga/effects';
 import tab from './tab';
 import badge from './badge';
+import contribution from './contribution';
 import externalMessage from './externalMessage';
 import theme from '../../theme';
 import error from '../../sagas/error';
@@ -18,6 +19,7 @@ export default function* rootSaga() {
     fork(tab),
     fork(badge(theme.badge)),
     fork(listenActionsFromMessages('background')),
+    fork(contribution),
     fork(externalMessage),
     fork(watchBrowserActionSaga),
     fork(openOptionsWhenRequestedSaga),
diff --git a/src/app/background/services/createContributionEmail.ts b/src/app/background/services/createContributionEmail.ts
new file mode 100644
index 000000000..30048bfd5
--- /dev/null
+++ b/src/app/background/services/createContributionEmail.ts
@@ -0,0 +1,24 @@
+import { Contribution } from 'app/lmem/notice';
+import {
+  formatContributionHtmlEmail,
+  formatContributionTextEmail
+} from 'app/lmem/format/contribution';
+import { truncateWords } from '../../utils/truncate';
+
+const { SEND_CONTRIBUTION_FROM, SEND_CONTRIBUTION_TO } = process.env as AppEnv;
+
+const createContributionEmail = (
+  contribution: Contribution
+): SendInBlue.TransactionEmail => ({
+  sender: { email: SEND_CONTRIBUTION_FROM },
+  to: [{ email: SEND_CONTRIBUTION_TO }],
+  replyTo: contribution.contributor,
+  subject: `${contribution.contributor.name}: ${truncateWords(
+    8,
+    contribution.message
+  )} !`,
+  htmlContent: formatContributionHtmlEmail(contribution),
+  textContent: formatContributionTextEmail(contribution)
+});
+
+export default createContributionEmail;
diff --git a/src/app/content/App/Notice/Details/Details.stories.tsx b/src/app/content/App/Notice/Details/Details.stories.tsx
index 982b4286c..7c7db7a88 100644
--- a/src/app/content/App/Notice/Details/Details.stories.tsx
+++ b/src/app/content/App/Notice/Details/Details.stories.tsx
@@ -54,27 +54,4 @@ storiesOf('screens/Notice/Details', module)
       view={action('view')}
       followSource={action('followSource')}
     />
-  ))
-  .add('preview', () => (
-    <Details
-      notice={generateStatefulNotice({
-        contributor: text('contributor', defaultContributorName),
-        intention: select('intention', intentions, 'approval'),
-        message: `<p>${text('message', defaultMessage)}</p>`,
-        sourceUrl: text('source', defaultSourceUrl),
-        created: date('created', defaultDate),
-        likes: number('likes', 42),
-        dislikes: number('dislikes', 2),
-        liked: boolean('liked', false),
-        disliked: boolean('disliked', false)
-      })}
-      like={action('like')}
-      unlike={action('unlike')}
-      dislike={action('dislike')}
-      undislike={action('undislike')}
-      view={action('view')}
-      followSource={action('followSource')}
-      close={action('close')}
-      preview
-    />
   ));
diff --git a/src/app/lmem/contributor.ts b/src/app/lmem/contributor.ts
index 07586ef51..c3616a592 100644
--- a/src/app/lmem/contributor.ts
+++ b/src/app/lmem/contributor.ts
@@ -12,11 +12,17 @@ interface Picture {
 export interface Contributor {
   id: number;
   name: string;
+  image?: string;
   avatar?: Avatar;
   intro?: string;
   contributions: number;
 }
 
+export interface NewContributor {
+  name: string;
+  email: string;
+}
+
 export interface StatefulContributor extends Contributor {
   subscribed?: boolean;
 }
diff --git a/src/app/lmem/format/contribution.ts b/src/app/lmem/format/contribution.ts
new file mode 100644
index 000000000..16b0f564c
--- /dev/null
+++ b/src/app/lmem/format/contribution.ts
@@ -0,0 +1,29 @@
+import { Contribution } from '../notice';
+import { format } from 'date-fns';
+import frLocale from 'date-fns/locale/fr';
+
+const formatDate = (date: Date): string =>
+  format(date, 'DD/MM/YYYY HH:mm:ss', { locale: frLocale });
+
+export const formatContributionHtmlEmail = (contribution: Contribution) => `
+<html lang="fr"><body>
+  <h1>Nouvelle contribution de ${contribution.contributor.name} !</h1>
+  <ul>
+    <li><strong>date: </strong>${formatDate(contribution.date)}</li>
+    <li><strong>e-mail: </strong>${contribution.contributor.email}</li>
+    <li><strong>url: </strong>${contribution.url}</li>
+    <li><strong>intention: </strong>${contribution.intention}</li>
+  </ul>
+  <p>${contribution.message}</p>
+</body></html>
+    `;
+
+export const formatContributionTextEmail = (contribution: Contribution) =>
+  `Nouvelle contribution de ${contribution.contributor.name} !\n
+\n
+date: ${formatDate(contribution.date)}\n
+e-mail: ${contribution.contributor.email}\n
+url: ${contribution.url}\n
+intention: ${contribution.intention}\n
+message: ${contribution.message}\n
+`;
diff --git a/src/app/lmem/notice.ts b/src/app/lmem/notice.ts
index 3f159beb4..2eefde961 100644
--- a/src/app/lmem/notice.ts
+++ b/src/app/lmem/notice.ts
@@ -2,7 +2,7 @@ import { find } from 'ramda';
 import { Source } from './source';
 import { intentions, Intention } from './intention';
 import { Ratings } from './rating';
-import { Contributor } from './contributor';
+import { Contributor, NewContributor } from './contributor';
 
 export interface Notice {
   id: number;
@@ -16,6 +16,14 @@ export interface Notice {
   visibility: 'public' | 'private';
 }
 
+export interface Contribution {
+  url: string;
+  date: Date;
+  intention: Intention;
+  contributor: NewContributor;
+  message: string;
+}
+
 export interface NoticeState {
   markedRead: boolean;
   liked: boolean;
diff --git a/src/app/theme.ts b/src/app/theme.ts
index 850c42e8c..fc8baedfb 100644
--- a/src/app/theme.ts
+++ b/src/app/theme.ts
@@ -8,6 +8,10 @@ export interface ButtonTheme {
   disabled: string;
 }
 
+export interface IntentionStyle {
+  background: string;
+}
+
 export interface Theme {
   main: string;
   // colors
@@ -46,21 +50,11 @@ export interface Theme {
 
   // notice type colors
   intentions: {
-    disapproval: {
-      background: string;
-    };
-    alternative: {
-      background: string;
-    };
-    approval: {
-      background: string;
-    };
-    information: {
-      background: string;
-    };
-    other: {
-      background: string;
-    };
+    disapproval: IntentionStyle;
+    alternative: IntentionStyle;
+    approval: IntentionStyle;
+    information: IntentionStyle;
+    other: IntentionStyle;
   };
   // iframe
   iframe: {
diff --git a/src/app/utils/isEmail.ts b/src/app/utils/isEmail.ts
new file mode 100644
index 000000000..40b3adffd
--- /dev/null
+++ b/src/app/utils/isEmail.ts
@@ -0,0 +1,2 @@
+export default (value: string) =>
+  /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value);
diff --git a/src/app/utils/truncate.ts b/src/app/utils/truncate.ts
index fdaf156bb..6886dfcbd 100644
--- a/src/app/utils/truncate.ts
+++ b/src/app/utils/truncate.ts
@@ -1,3 +1,13 @@
+import * as R from 'ramda';
+
+const WORDS_SEPARATOR = ' ';
+
+const toWords = R.pipe(
+  R.trim,
+  R.split(WORDS_SEPARATOR)
+);
+const fromWords = R.join(WORDS_SEPARATOR);
+
 export const truncateButPreserveWords = (
   text = '',
   limit = 50,
@@ -7,13 +17,13 @@ export const truncateButPreserveWords = (
     return text;
   }
 
-  const words = text.trim().split(' ');
+  const words = toWords(text);
 
-  while (words.join(' ').length >= limit) {
+  while (fromWords(words).length >= limit) {
     words.pop();
   }
 
-  return `${words.join(' ')}${after}`;
+  return `${fromWords(words)}${after}`;
 };
 
 export const simpleTruncate = (text = '', limit = 50, after = '…') => {
@@ -28,3 +38,23 @@ export default (text = '', limit = 50, preserveWords = true, after = '…') =>
   preserveWords
     ? truncateButPreserveWords(text, limit - after.length, after)
     : simpleTruncate(text, limit - after.length, after);
+
+const isLongerThan = <T>(nbElements: number) =>
+  R.compose<T[], number, boolean>(
+    R.lt(nbElements),
+    R.length
+  );
+
+export const truncateWords = R.curry((nbWords: number, sentence: string) =>
+  R.pipe(
+    toWords,
+    R.when(
+      isLongerThan(nbWords),
+      R.pipe(
+        R.take(nbWords),
+        R.append('...')
+      )
+    ),
+    fromWords
+  )(sentence)
+);
diff --git a/src/components/atoms/Intentions/IntentionIcon.tsx b/src/components/atoms/Intentions/IntentionIcon.tsx
index 2d06d9f50..020858d19 100644
--- a/src/components/atoms/Intentions/IntentionIcon.tsx
+++ b/src/components/atoms/Intentions/IntentionIcon.tsx
@@ -2,24 +2,23 @@ import React from 'react';
 import { withTheme } from 'styled-components';
 import Background from './Background';
 import intentionIcons from '../icons/IntentionsIcons';
-import { Theme } from 'app/theme';
+import { IntentionStyle, Theme } from 'app/theme';
 import { getTypeOrFallback, Intention } from 'app/lmem/intention';
 
-interface Style {
-  background: string;
-}
 interface Props {
   intention?: Intention;
   theme: Theme;
   active?: boolean;
+  onClick?: () => void;
 }
-const IntentionIcon = ({ intention, theme, active }: Props) => {
+const IntentionIcon = ({ intention, theme, active, onClick }: Props) => {
   const Icon = getTypeOrFallback(intentionIcons)(intention);
-  const style = getTypeOrFallback<Style>(theme.intentions)(intention);
+  const style = getTypeOrFallback<IntentionStyle>(theme.intentions)(intention);
 
   return (
     <Background
       color={active ? style && style.background : theme.inactiveIntentionBg}
+      onClick={onClick}
     >
       {Icon && <Icon filled={!active} stroked={!active} />}
     </Background>
diff --git a/src/components/molecules/IntentionsSelector/IntentionsSelectorContainer.ts b/src/components/molecules/IntentionsSelector/Container.ts
similarity index 100%
rename from src/components/molecules/IntentionsSelector/IntentionsSelectorContainer.ts
rename to src/components/molecules/IntentionsSelector/Container.ts
diff --git a/src/components/molecules/IntentionsSelector/IntentionsSelector.stories.tsx b/src/components/molecules/IntentionsSelector/IntentionsSelector.stories.tsx
index 0a28c8be8..e345144ed 100644
--- a/src/components/molecules/IntentionsSelector/IntentionsSelector.stories.tsx
+++ b/src/components/molecules/IntentionsSelector/IntentionsSelector.stories.tsx
@@ -1,10 +1,21 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import IntentionsSelector from './IntentionsSelector';
+import { action } from '@storybook/addon-actions';
 
 storiesOf('organisms/IntentionsSelector', module)
-  .add('approval', () => <IntentionsSelector value="approval" />)
-  .add('disapproval', () => <IntentionsSelector value="disapproval" />)
-  .add('information', () => <IntentionsSelector value="information" />)
-  .add('alternative', () => <IntentionsSelector value="alternative" />)
-  .add('other', () => <IntentionsSelector value="other" />);
+  .add('approval', () => (
+    <IntentionsSelector value="approval" onChange={action('onChange')} />
+  ))
+  .add('disapproval', () => (
+    <IntentionsSelector value="disapproval" onChange={action('onChange')} />
+  ))
+  .add('information', () => (
+    <IntentionsSelector value="information" onChange={action('onChange')} />
+  ))
+  .add('alternative', () => (
+    <IntentionsSelector value="alternative" onChange={action('onChange')} />
+  ))
+  .add('other', () => (
+    <IntentionsSelector value="other" onChange={action('onChange')} />
+  ));
diff --git a/src/components/molecules/IntentionsSelector/IntentionsSelector.tsx b/src/components/molecules/IntentionsSelector/IntentionsSelector.tsx
index 9c18ae2d7..8cb1181f5 100644
--- a/src/components/molecules/IntentionsSelector/IntentionsSelector.tsx
+++ b/src/components/molecules/IntentionsSelector/IntentionsSelector.tsx
@@ -1,22 +1,32 @@
-import React, { Fragment } from 'react';
-import { intentions } from 'app/lmem/intention';
+import React from 'react';
+import { Intention, intentions } from 'app/lmem/intention';
 import IntentionIcon from 'components/atoms/Intentions/IntentionIcon';
-import IntentionsSelectorContainer from './IntentionsSelectorContainer';
+import Container from './Container';
 
 interface Props {
-  value: string;
+  value: Intention;
+  onChange?: (intention: Intention) => void;
 }
 
-const IntentionSelector = ({ value }: Props) => (
-  <IntentionsSelectorContainer>
-    {intentions.map(intention => (
-      <IntentionIcon
-        key={intention}
-        intention={intention}
-        active={intention === value}
-      />
-    ))}
-  </IntentionsSelectorContainer>
-);
+const IntentionSelector = ({ value, onChange }: Props) => {
+  const handleChange = (intention: Intention) => {
+    if (onChange) {
+      return () => onChange(intention);
+    }
+  };
+
+  return (
+    <Container>
+      {intentions.map(intention => (
+        <IntentionIcon
+          key={intention}
+          intention={intention}
+          active={intention === value}
+          onClick={handleChange(intention)}
+        />
+      ))}
+    </Container>
+  );
+};
 
 export default IntentionSelector;
diff --git a/src/components/organisms/NoticeDetails/NoticeDetails.stories.tsx b/src/components/organisms/NoticeDetails/NoticeDetails.stories.tsx
index d3d8f1c75..19dd25d7e 100644
--- a/src/components/organisms/NoticeDetails/NoticeDetails.stories.tsx
+++ b/src/components/organisms/NoticeDetails/NoticeDetails.stories.tsx
@@ -58,14 +58,4 @@ storiesOf('organisms/NoticeDetails', module)
       {...commonProps}
       notice={generateStatefulNotice({ withSource: false })}
     />
-  ))
-  .add('Preview', () => (
-    <NoticeDetails
-      notice={generateStatefulNotice({ withSource: false })}
-      like={action('like')}
-      unlike={action('unlike')}
-      dislike={action('dislike')}
-      undislike={action('undislike')}
-      preview
-    />
   ));
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 2188d6d80..5f4687dff 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -9,3 +9,10 @@ interface CustomWindow extends Window {
   heap?: Heap;
   __LMEM__CONTENT_SCRIPT_INJECTED__?: boolean;
 }
+
+interface AppEnv extends NodeJS.ProcessEnv {
+  SEND_CONTRIBUTION_FROM: string;
+  SEND_CONTRIBUTION_TO: string;
+  SEND_IN_BLUE_TOKEN: string;
+  SENTRY_DSN: string;
+}
diff --git a/test/app/utils/isEmail.ts b/test/app/utils/isEmail.ts
new file mode 100644
index 000000000..effe1d2fb
--- /dev/null
+++ b/test/app/utils/isEmail.ts
@@ -0,0 +1,29 @@
+import chai from 'chai';
+import isEmail from 'app/utils/isEmail';
+
+const expect = chai.expect;
+
+describe('isEmail', function() {
+  it('returns false if falsy', () => {
+    // @ts-ignore
+    expect(isEmail()).to.eq(false);
+    // @ts-ignore
+    expect(isEmail(null)).to.eq(false);
+    expect(isEmail('')).to.eq(false);
+  });
+  it('returns false for "some words"', () => {
+    expect(isEmail('some words')).to.eq(false);
+  });
+  it('returns false for "http://some.site"', () => {
+    expect(isEmail('http://some.site')).to.eq(false);
+  });
+  it('returns false for "some @email.com"', () => {
+    expect(isEmail('some @email.com')).to.eq(false);
+  });
+  it('returns true for "some@email.com"', () => {
+    expect(isEmail('some@email.com')).to.eq(true);
+  });
+  it('returns true for "s@e.co"', () => {
+    expect(isEmail('s@e.co')).to.eq(true);
+  });
+});
diff --git a/test/app/utils/truncate.ts b/test/app/utils/truncate.ts
new file mode 100644
index 000000000..f72736e0b
--- /dev/null
+++ b/test/app/utils/truncate.ts
@@ -0,0 +1,41 @@
+import chai from 'chai';
+import * as R from 'ramda';
+import { truncateWords } from 'app/utils/truncate';
+
+const expect = chai.expect;
+
+describe('truncateWords', function() {
+  it('does nothing on empty string', () => {
+    expect(truncateWords(8, '')).to.eq('');
+  });
+  it('does nothing if less words than limit', () => {
+    const textWith7Words = 'some text with seven words in english';
+    expect(truncateWords(8, textWith7Words)).to.eq(textWith7Words);
+  });
+  it('does nothing if as many words as limit', () => {
+    const textWith8Words = 'some text with exactly eight words in english';
+    expect(truncateWords(8, textWith8Words)).to.eq(textWith8Words);
+  });
+  it('does truncate if more words than limit', () => {
+    expect(
+      truncateWords(8, 'some text with more than eight words in english')
+    ).to.eq('some text with more than eight words in ...');
+  });
+  it('is currified', () => {
+    const textWith8Words = 'some text with exactly eight words in english';
+    expect(truncateWords(8, textWith8Words)).to.eq(
+      truncateWords(8)(textWith8Words)
+    );
+  });
+  it('is composable', () => {
+    const textWithMoreThan8Words =
+      'some text with more than eight words in english';
+    expect(
+      R.pipe<string, string, string, string>(
+        truncateWords(8),
+        truncateWords(6),
+        truncateWords(4)
+      )(textWithMoreThan8Words)
+    ).to.eq(truncateWords(4)(textWithMoreThan8Words));
+  });
+});
diff --git a/test/fakers/generateNotice.ts b/test/fakers/generateNotice.ts
index 774f619ea..3c0911b9e 100644
--- a/test/fakers/generateNotice.ts
+++ b/test/fakers/generateNotice.ts
@@ -4,7 +4,7 @@ import Faker from 'faker';
 import { NoticeState, StatefulNotice } from '../../src/app/lmem/notice';
 import { Intention } from '../../src/app/lmem/intention';
 import { Source } from '../../src/app/lmem/source';
-import { Contributor } from '../../src/app/lmem/contributor';
+import { OtherContributor } from '../../src/app/lmem/contributor';
 import { Ratings } from '../../src/app/lmem/rating';
 
 interface Options {
@@ -111,7 +111,7 @@ export const generateStatefulNoticeVariant = (
         )(notice.source || defaultSource)
       : undefined;
 
-  const newContrib: Contributor = assocIfGiven<Contributor, 'name'>(
+  const newContrib: OtherContributor = assocIfGiven<OtherContributor, 'name'>(
     'name',
     contributor
   )(notice.contributor);
diff --git a/views/background.pug b/views/background.pug
index 67edd3416..69d430b0a 100644
--- a/views/background.pug
+++ b/views/background.pug
@@ -2,5 +2,6 @@ doctype html
 
 html
   head
+    meta(charset="utf-8")
     // This is not working. We should either fix or remove : include ./includes/devtools
     script(src=webpackConfig.output.publicPath + '/js/background.bundle.js')
diff --git a/webpack.config.js b/webpack.config.js
index 0eb1b5eb4..f66646e0c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,9 +1,31 @@
 const path = require('path');
+const dotenv = require('dotenv');
 const entry = require('./webpack/config.entry');
 const rules = require('./webpack/config.rules');
 const plugins = require('./webpack/config.plugins.js');
 const stats = require('./webpack/config.stats');
 
+const isEmail = value =>
+  /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value);
+
+dotenv.config({ path: path.resolve('.env') });
+
+const {
+  SEND_CONTRIBUTION_TO,
+  SEND_CONTRIBUTION_FROM,
+  SEND_IN_BLUE_TOKEN
+} = process.env;
+
+if (!SEND_IN_BLUE_TOKEN || typeof SEND_IN_BLUE_TOKEN !== 'string') {
+  throw new Error('Please provide SEND_IN_BLUE_TOKEN env variable');
+}
+if (!isEmail(SEND_CONTRIBUTION_FROM)) {
+  throw new Error('Please provide SEND_CONTRIBUTION_FROM env variable');
+}
+if (!isEmail(SEND_CONTRIBUTION_TO)) {
+  throw new Error('Please provide SEND_CONTRIBUTION_TO env variable');
+}
+
 module.exports = function webpack(env = {}, argv = {}) {
   // No .env in develop yet, using argv.mode:
   process.env.NODE_ENV = argv.mode;
diff --git a/webpack/config.plugins.js b/webpack/config.plugins.js
index ecb327546..7f5aacc9c 100644
--- a/webpack/config.plugins.js
+++ b/webpack/config.plugins.js
@@ -6,13 +6,14 @@ const AddAssetWebpackPlugin = require('add-asset-webpack-plugin');
 const ZipPlugin = require('zip-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const SentryWebpackPlugin = require('@sentry/webpack-plugin');
+const R = require('ramda');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const basePlugins = require('../webpack/config.plugins.base');
 const manifests = require('../manifest');
 const { version } = require('../package.json');
 
-const ENV = {
+const BUILD_CONFIG = {
   dev: {
     LMEM_BACKEND_ORIGIN: '"https://staging-notices.lmem.net/api/v3/"',
     REFRESH_MC_INTERVAL: '5*60*1000',
@@ -45,6 +46,19 @@ const ENV = {
   }
 };
 
+const selectEnvVarsToInject = R.pick([
+  'SEND_CONTRIBUTION_FROM',
+  'SEND_CONTRIBUTION_TO',
+  'SEND_IN_BLUE_TOKEN',
+  'SENTRY_DSN'
+]);
+const formatEnvVars = R.map(value => `"${value}"`);
+
+const processENVVarsToInject = R.pipe(
+  selectEnvVarsToInject,
+  formatEnvVars
+);
+
 module.exports = (env = {}, argv = {}, outputPath) => {
   const buildPath = path.join(outputPath, env.build);
 
@@ -66,7 +80,8 @@ module.exports = (env = {}, argv = {}, outputPath) => {
     ...basePlugins(env, argv),
     new webpack.DefinePlugin({
       'process.env': {
-        ...ENV[env.build],
+        ...BUILD_CONFIG[env.build],
+        ...processENVVarsToInject(process.env),
         BUILD: JSON.stringify(env.build),
         SENTRY_ENABLE: env.sentry ? 'true' : 'false'
       }
diff --git a/yarn.lock b/yarn.lock
index cdb27caef..df01133a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5472,6 +5472,11 @@ dotenv@^6.0.0, dotenv@^6.2.0:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
   integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==
 
+dotenv@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.0.0.tgz#ed310c165b4e8a97bb745b0a9d99c31bda566440"
+  integrity sha512-30xVGqjLjiUOArT4+M5q9sYdvuR4riM6yK9wMcas9Vbp6zZa+ocC9dp6QoftuhTPhFAiLK/0C5Ni2nou/Bk8lg==
+
 duplexer2@~0.1.0:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"

From 2091ba03c1b5b8f8c68fc2e737e157d94277d950 Mon Sep 17 00:00:00 2001
From: lutangar <johan.dufour@gmail.com>
Date: Mon, 24 Jun 2019 16:48:59 +0200
Subject: [PATCH 03/19] feat(form): add redux-form

---
 .storybook/config.tsx |  6 ++++--
 .storybook/store.ts   |  8 ++++++++
 package.json          |  4 +++-
 yarn.lock             | 39 +++++++++++++++++++++++++++++++++++----
 4 files changed, 50 insertions(+), 7 deletions(-)
 create mode 100644 .storybook/store.ts

diff --git a/.storybook/config.tsx b/.storybook/config.tsx
index a330499b9..0c3cf30f3 100644
--- a/.storybook/config.tsx
+++ b/.storybook/config.tsx
@@ -1,6 +1,8 @@
 import { configure, addDecorator } from '@storybook/react';
 import React from 'react';
+import { Provider } from 'react-redux';
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
+import store from './store';
 import theme from '../src/app/theme';
 import 'typeface-lato';
 import 'typeface-sedgwick-ave';
@@ -12,12 +14,12 @@ const Global = createGlobalStyle`
 `;
 
 addDecorator(getStory => (
-  <>
+  <Provider store={store}>
     <Global />
     <ThemeProvider theme={theme}>
       <>{getStory()}</>
     </ThemeProvider>
-  </>
+  </Provider>
 ));
 
 // automatically import all files ending in *.stories.js
diff --git a/.storybook/store.ts b/.storybook/store.ts
new file mode 100644
index 000000000..86c790ab8
--- /dev/null
+++ b/.storybook/store.ts
@@ -0,0 +1,8 @@
+import { combineReducers, createStore } from 'redux';
+import { reducer as form } from 'redux-form';
+
+export default createStore(
+  combineReducers({
+    form
+  })
+);
diff --git a/package.json b/package.json
index d24499b2a..d7ad71d55 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
     "@types/react-redux": "^7.0.9",
     "@types/react-router": "^4.4.4",
     "@types/react-router-dom": "^4.3.1",
+    "@types/redux-form": "^8.1.5",
     "@types/redux-immutable-state-invariant": "^2.1.0",
     "@types/redux-logger": "^3.0.7",
     "@types/remote-redux-devtools": "^0.5.3",
@@ -149,6 +150,7 @@
     "pug": "^2.0.3",
     "pug-loader": "^2.4.0",
     "ramda": "^0.26.1",
+    "ramda-adjunct": "^2.19.0",
     "react": "16.8.0",
     "react-dev-utils": "^9.0.3",
     "react-dom": "16.8.0",
@@ -158,6 +160,7 @@
     "react-spring": "^8.0.20",
     "redbox-react": "^1.6.0",
     "redux": "^4.0.1",
+    "redux-form": "^8.2.6",
     "redux-immutable-state-invariant": "^2.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",
@@ -181,7 +184,6 @@
     "svg-url-loader": "^2.0.2",
     "ts-node": "^8.3.0",
     "tsconfig-paths": "^3.8.0",
-    "ramda-adjunct": "^2.19.0",
     "typeface-lato": "^0.0.54",
     "typeface-sedgwick-ave": "^0.0.54",
     "typescript": "^3.5.3",
diff --git a/yarn.lock b/yarn.lock
index df01133a4..b3c740add 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -951,7 +951,7 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
-"@babel/runtime@7.5.5", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5":
+"@babel/runtime@7.5.5", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
   integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
@@ -2171,6 +2171,14 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/redux-form@^8.1.5":
+  version "8.1.5"
+  resolved "https://registry.yarnpkg.com/@types/redux-form/-/redux-form-8.1.5.tgz#a29c7c5dd9addb8c4cc99290a024f324a966ce19"
+  integrity sha512-NUVBf90ziBE6TMoPCHbGABB6Y5r6ZGkdF2LnaFzQ0pJZElcn5z/Jlt2YqQzEgwoI1r4y0MIBFxxhnx5n6wRa0A==
+  dependencies:
+    "@types/react" "*"
+    redux "^3.6.0 || ^4.0.0"
+
 "@types/redux-immutable-state-invariant@^2.1.0":
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@types/redux-immutable-state-invariant/-/redux-immutable-state-invariant-2.1.1.tgz#8231007e9f370d2f5eb28b71c6a4d4b141973338"
@@ -5695,6 +5703,11 @@ es5-shim@^4.5.13:
   resolved "https://registry.yarnpkg.com/es5-shim/-/es5-shim-4.5.13.tgz#5d88062de049f8969f83783f4a4884395f21d28b"
   integrity sha512-xi6hh6gsvDE0MaW4Vp1lgNEBpVcCXRWfPXj5egDvtgLz4L9MEvNwYEMdJH+JJinWkwa8c3c3o5HduV7dB/e1Hw==
 
+es6-error@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d"
+  integrity sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==
+
 es6-promise@^3.2.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
@@ -7200,7 +7213,7 @@ hoist-non-react-statics@^2.5.0:
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
 
-hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz#b09178f0122184fb95acf525daaecb4d8f45958b"
   integrity sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==
@@ -7482,7 +7495,7 @@ immer@1.7.2:
   resolved "https://registry.yarnpkg.com/immer/-/immer-1.7.2.tgz#a51e9723c50b27e132f6566facbec1c85fc69547"
   integrity sha512-4Urocwu9+XLDJw4Tc6ZCg7APVjjLInCFvO4TwGsAYV5zT6YYSor14dsZR0+0tHlDIN92cFUOq+i7fC00G5vTxA==
 
-immutable@^3.8.1:
+immutable@3.8.2, immutable@^3.8.1:
   version "3.8.2"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
   integrity sha1-wkOZUUVbs5kT2vKBN28VMOEErfM=
@@ -8855,7 +8868,7 @@ lockfile@^1.0.4:
   dependencies:
     signal-exit "^3.0.2"
 
-lodash-es@^4.2.1:
+lodash-es@^4.17.15, lodash-es@^4.2.1:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
   integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
@@ -12029,6 +12042,24 @@ redux-devtools-instrument@^1.9.4:
     lodash "^4.2.0"
     symbol-observable "^1.0.2"
 
+redux-form@^8.2.6:
+  version "8.2.6"
+  resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-8.2.6.tgz#6840bbe9ed5b2aaef9dd82e6db3e5efcfddd69b1"
+  integrity sha512-krmF7wl1C753BYpEpWIVJ5NM4lUJZFZc5GFUVgblT+jprB99VVBDyBcgrZM3gWWLOcncFyNsHcKNQQcFg8Uanw==
+  dependencies:
+    "@babel/runtime" "^7.2.0"
+    es6-error "^4.1.1"
+    hoist-non-react-statics "^3.2.1"
+    invariant "^2.2.4"
+    is-promise "^2.1.0"
+    lodash "^4.17.15"
+    lodash-es "^4.17.15"
+    prop-types "^15.6.1"
+    react-is "^16.7.0"
+    react-lifecycles-compat "^3.0.4"
+  optionalDependencies:
+    immutable "3.8.2"
+
 redux-immutable-state-invariant@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/redux-immutable-state-invariant/-/redux-immutable-state-invariant-2.1.0.tgz#308fd3cc7415a0e7f11f51ec997b6379c7055ce1"

From ee2a8ea1a2b9956d01bb8f097479e4d957d57f1c Mon Sep 17 00:00:00 2001
From: lutangar <johan.dufour@gmail.com>
Date: Mon, 24 Jun 2019 16:50:29 +0200
Subject: [PATCH 04/19] feat(form): add Fields adapter

---
 src/components/atoms/Button.ts                | 32 +++++++++++++++++++
 src/components/atoms/Forms/Container.ts       |  3 ++
 src/components/atoms/Forms/index.ts           |  3 ++
 .../molecules/IntentionsSelector/index.ts     |  3 ++
 .../organisms/Fields/InputField.tsx           | 15 +++++++++
 .../Fields/IntentionsSelectorField.tsx        | 13 ++++++++
 .../organisms/Fields/TextareaField.tsx        | 15 +++++++++
 src/components/organisms/Fields/index.ts      |  3 ++
 8 files changed, 87 insertions(+)
 create mode 100644 src/components/atoms/Button.ts
 create mode 100644 src/components/atoms/Forms/Container.ts
 create mode 100644 src/components/molecules/IntentionsSelector/index.ts
 create mode 100644 src/components/organisms/Fields/InputField.tsx
 create mode 100644 src/components/organisms/Fields/IntentionsSelectorField.tsx
 create mode 100644 src/components/organisms/Fields/TextareaField.tsx
 create mode 100644 src/components/organisms/Fields/index.ts

diff --git a/src/components/atoms/Button.ts b/src/components/atoms/Button.ts
new file mode 100644
index 000000000..40e1a9a52
--- /dev/null
+++ b/src/components/atoms/Button.ts
@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+import * as React from 'react';
+import { Theme } from '../../app/theme';
+
+export interface ButtonProps {
+  as?: string | React.ComponentType<any>;
+  theme?: Theme;
+  loading?: boolean;
+}
+
+export default styled.button<ButtonProps>`
+  box-sizing: border-box;
+  padding: 0;
+  font-weight: bold;
+  line-height: 1;
+  color: ${props => props.theme.secondaryColor};
+  text-transform: uppercase;
+  text-decoration: underline;
+  background: none;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    color: ${props => props.theme.activeColor};
+  }
+
+  &:focus {
+    outline: 1px dotted ${props => props.theme.activeColor};
+  }
+`;
diff --git a/src/components/atoms/Forms/Container.ts b/src/components/atoms/Forms/Container.ts
new file mode 100644
index 000000000..39e601764
--- /dev/null
+++ b/src/components/atoms/Forms/Container.ts
@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export default styled.form``;
diff --git a/src/components/atoms/Forms/index.ts b/src/components/atoms/Forms/index.ts
index e7eb57db9..4d47622e3 100644
--- a/src/components/atoms/Forms/index.ts
+++ b/src/components/atoms/Forms/index.ts
@@ -1 +1,4 @@
+export { default as Container } from './Container';
+export { default as Input } from './Input/Input';
+export { default as Error } from './Error/Error';
 export { default as Textarea } from './Textarea/Textarea';
diff --git a/src/components/molecules/IntentionsSelector/index.ts b/src/components/molecules/IntentionsSelector/index.ts
new file mode 100644
index 000000000..9d32d9ed8
--- /dev/null
+++ b/src/components/molecules/IntentionsSelector/index.ts
@@ -0,0 +1,3 @@
+import IntentionsSelector from './IntentionsSelector';
+
+export default IntentionsSelector;
diff --git a/src/components/organisms/Fields/InputField.tsx b/src/components/organisms/Fields/InputField.tsx
new file mode 100644
index 000000000..cac78af5d
--- /dev/null
+++ b/src/components/organisms/Fields/InputField.tsx
@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import { WrappedFieldProps } from 'redux-form';
+import { Input } from 'components/atoms/Forms';
+
+export default class InputField extends Component<WrappedFieldProps> {
+  render() {
+    const {
+      meta: { touched, error },
+      input,
+      ...props
+    } = this.props;
+
+    return <Input {...input} {...props} error={touched && error} />;
+  }
+}
diff --git a/src/components/organisms/Fields/IntentionsSelectorField.tsx b/src/components/organisms/Fields/IntentionsSelectorField.tsx
new file mode 100644
index 000000000..845fc103a
--- /dev/null
+++ b/src/components/organisms/Fields/IntentionsSelectorField.tsx
@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import { WrappedFieldProps } from 'redux-form';
+import IntentionsSelector from 'components/molecules/IntentionsSelector';
+
+export default class IntentionsSelectorField extends Component<
+  WrappedFieldProps
+> {
+  render() {
+    const { input } = this.props;
+
+    return <IntentionsSelector {...input} />;
+  }
+}
diff --git a/src/components/organisms/Fields/TextareaField.tsx b/src/components/organisms/Fields/TextareaField.tsx
new file mode 100644
index 000000000..bdd89de2d
--- /dev/null
+++ b/src/components/organisms/Fields/TextareaField.tsx
@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import { WrappedFieldProps } from 'redux-form';
+import { Textarea } from 'components/atoms/Forms';
+
+export default class TextareaField extends Component<WrappedFieldProps> {
+  render() {
+    const {
+      meta: { touched, error },
+      input,
+      ...props
+    } = this.props;
+
+    return <Textarea {...input} {...props} error={touched && error} />;
+  }
+}
diff --git a/src/components/organisms/Fields/index.ts b/src/components/organisms/Fields/index.ts
new file mode 100644
index 000000000..533afe7b2
--- /dev/null
+++ b/src/components/organisms/Fields/index.ts
@@ -0,0 +1,3 @@
+export { default as IntentionsSelectorField } from './IntentionsSelectorField';
+export { default as InputField } from './InputField';
+export { default as TextareaField } from './TextareaField';

From e188cb571e9b4c2211640e25119380d5b091c059 Mon Sep 17 00:00:00 2001
From: lutangar <johan.dufour@gmail.com>
Date: Mon, 24 Jun 2019 16:52:13 +0200
Subject: [PATCH 05/19] feat(submit-notice): implement submit notice screen and
 success redirection

handle contribution form
1. Submit: sync validation only
2. Preview: show server error when failing
3. Submitted: removed the button to see the notice
---
 src/app/actions/contribution.ts               | 38 +++++++++-
 src/app/actions/index.ts                      | 28 +++++++
 src/app/actions/notices.ts                    |  2 +-
 src/app/background/sagas/contribution.ts      | 14 ----
 .../Preview/PreviewScreen.container.tsx       | 26 +++++++
 .../Preview/PreviewScreen.stories.tsx         | 31 ++++++++
 .../App/Contribute/Preview/PreviewScreen.tsx  | 76 +++++++++++++++++++
 .../content/App/Contribute/Preview/index.tsx  |  3 +
 .../SubmitContributionForm.container.ts       | 34 +++++++++
 .../SubmitContributionForm.stories.tsx}       |  9 +--
 .../SubmitContributionForm.tsx                | 67 ++++++++++++++++
 .../Submit/SubmitContributionForm/index.ts    |  7 ++
 .../SubmitContributionScreen.container.tsx    |  4 +
 .../SubmitContributionScreen.stories.tsx      | 13 ++++
 .../Submit/SubmitContributionScreen.tsx       | 12 +++
 .../Submit}/Textarea.tsx                      |  0
 .../content/App/Contribute/Submit/index.ts    |  3 +
 .../Submitted}/Container.ts                   |  7 +-
 .../Submitted}/Content.ts                     |  0
 .../Submitted}/ContentTitle.ts                |  0
 .../ContributionSubmittedScreen.container.tsx | 19 +++++
 .../ContributionSubmittedScreen.stories.tsx   | 31 ++++++++
 .../Submitted/ContributionSubmittedScreen.tsx | 29 +++++++
 .../Submitted}/Illustration.tsx               |  0
 .../App/Contribute/Submitted/index.tsx        |  3 +
 src/app/content/App/Contribute/index.tsx      | 13 ++++
 .../CreateNoticeScreen.stories.tsx            | 10 ---
 .../content/App/CreateNoticeScreen/index.tsx  | 29 -------
 .../App/Notice/Details/Details.stories.tsx    | 17 +++--
 .../App/PublishedNoticeScreen/index.tsx       | 27 -------
 src/app/content/App/UI.tsx                    |  2 +
 src/app/content/reducers/index.ts             |  4 +-
 src/app/content/sagas/contribution.ts         | 43 +++++++++++
 src/app/content/sagas/index.ts                | 26 ++++---
 src/app/content/selectors/index.ts            | 14 +++-
 src/app/lmem/Errors.ts                        |  3 +
 src/app/lmem/contribution/isValid.ts          |  5 ++
 src/app/lmem/contribution/validate.ts         | 37 +++++++++
 src/app/lmem/contribution/validateForm.ts     | 13 ++++
 src/app/lmem/format/contribution.ts           |  4 +-
 src/app/lmem/notice.ts                        |  3 +-
 src/app/utils/form/createSubmissionError.ts   |  3 +
 src/app/utils/form/handleFormSubmit.ts        | 16 ++++
 src/app/utils/form/index.ts                   |  2 +
 src/components/atoms/Button.ts                |  4 +
 .../AddNoticeButton/AddNoticeButton.tsx       |  9 +--
 .../Buttons/BorderButton/BorderButton.ts      | 17 +++++
 src/components/atoms/Forms/Container.ts       |  3 -
 src/components/atoms/Forms/Form.ts            |  3 +
 src/components/atoms/Forms/index.ts           |  2 +-
 .../NoticeDetails/DetailsContainer.ts         |  1 +
 src/components/organisms/NoticePreview.tsx    | 39 ++++++++++
 52 files changed, 675 insertions(+), 130 deletions(-)
 delete mode 100644 src/app/background/sagas/contribution.ts
 create mode 100644 src/app/content/App/Contribute/Preview/PreviewScreen.container.tsx
 create mode 100644 src/app/content/App/Contribute/Preview/PreviewScreen.stories.tsx
 create mode 100644 src/app/content/App/Contribute/Preview/PreviewScreen.tsx
 create mode 100644 src/app/content/App/Contribute/Preview/index.tsx
 create mode 100644 src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.container.ts
 rename src/app/content/App/{PublishedNoticeScreen/PublishedNoticeScreen.stories.tsx => Contribute/Submit/SubmitContributionForm/SubmitContributionForm.stories.tsx} (50%)
 create mode 100644 src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.tsx
 create mode 100644 src/app/content/App/Contribute/Submit/SubmitContributionForm/index.ts
 create mode 100644 src/app/content/App/Contribute/Submit/SubmitContributionScreen.container.tsx
 create mode 100644 src/app/content/App/Contribute/Submit/SubmitContributionScreen.stories.tsx
 create mode 100644 src/app/content/App/Contribute/Submit/SubmitContributionScreen.tsx
 rename src/app/content/App/{CreateNoticeScreen => Contribute/Submit}/Textarea.tsx (100%)
 create mode 100644 src/app/content/App/Contribute/Submit/index.ts
 rename src/app/content/App/{PublishedNoticeScreen => Contribute/Submitted}/Container.ts (71%)
 rename src/app/content/App/{PublishedNoticeScreen => Contribute/Submitted}/Content.ts (100%)
 rename src/app/content/App/{PublishedNoticeScreen => Contribute/Submitted}/ContentTitle.ts (100%)
 create mode 100644 src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.container.tsx
 create mode 100644 src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.stories.tsx
 create mode 100644 src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.tsx
 rename src/app/content/App/{PublishedNoticeScreen => Contribute/Submitted}/Illustration.tsx (100%)
 create mode 100644 src/app/content/App/Contribute/Submitted/index.tsx
 create mode 100644 src/app/content/App/Contribute/index.tsx
 delete mode 100644 src/app/content/App/CreateNoticeScreen/CreateNoticeScreen.stories.tsx
 delete mode 100644 src/app/content/App/CreateNoticeScreen/index.tsx
 delete mode 100644 src/app/content/App/PublishedNoticeScreen/index.tsx
 create mode 100644 src/app/content/sagas/contribution.ts
 create mode 100644 src/app/lmem/Errors.ts
 create mode 100644 src/app/lmem/contribution/isValid.ts
 create mode 100644 src/app/lmem/contribution/validate.ts
 create mode 100644 src/app/lmem/contribution/validateForm.ts
 create mode 100644 src/app/utils/form/createSubmissionError.ts
 create mode 100644 src/app/utils/form/handleFormSubmit.ts
 create mode 100644 src/app/utils/form/index.ts
 create mode 100644 src/components/atoms/Buttons/BorderButton/BorderButton.ts
 delete mode 100644 src/components/atoms/Forms/Container.ts
 create mode 100644 src/components/atoms/Forms/Form.ts
 create mode 100644 src/components/organisms/NoticePreview.tsx

diff --git a/src/app/actions/contribution.ts b/src/app/actions/contribution.ts
index 28753397b..cc20da090 100644
--- a/src/app/actions/contribution.ts
+++ b/src/app/actions/contribution.ts
@@ -1,14 +1,44 @@
 import { Contribution } from 'app/lmem/notice';
-import { BaseAction } from '.';
+import { BaseAction, FormAction, FormMeta, ErrorAction } from '.';
 
-export interface ContributionSubmittedAction extends BaseAction {
-  type: 'CONTRIBUTION_SUBMITTED';
+export interface SubmitContributionAction extends FormAction {
+  type: 'CONTRIBUTION/SUBMIT';
   payload: Contribution;
 }
+export const submitContribution = (
+  notice: Contribution,
+  meta: FormMeta
+): SubmitContributionAction => ({
+  type: 'CONTRIBUTION/SUBMIT',
+  payload: notice,
+  meta
+});
 
+export interface ContributionSubmittedAction extends BaseAction {
+  type: 'CONTRIBUTION/SUBMITTED';
+  payload: Contribution;
+}
 export const contributionSubmitted = (
   contribution: Contribution
 ): ContributionSubmittedAction => ({
-  type: 'CONTRIBUTION_SUBMITTED',
+  type: 'CONTRIBUTION/SUBMITTED',
   payload: contribution
 });
+
+export interface ContributionSubmissionFailed extends ErrorAction {
+  type: 'CONTRIBUTION/SUBMISSION_FAILED';
+}
+export const contributionSubmissionFailed = (
+  e: Error
+): ContributionSubmissionFailed => ({
+  type: 'CONTRIBUTION/SUBMISSION_FAILED',
+  payload: e,
+  error: true
+});
+
+export interface ContributionSubmissionCanceled extends BaseAction {
+  type: 'CONTRIBUTION/SUBMISSION_CANCELED';
+}
+export const contributionSubmissionCanceled = (): ContributionSubmissionCanceled => ({
+  type: 'CONTRIBUTION/SUBMISSION_CANCELED'
+});
diff --git a/src/app/actions/index.ts b/src/app/actions/index.ts
index 1b1935156..0aee6f5b6 100644
--- a/src/app/actions/index.ts
+++ b/src/app/actions/index.ts
@@ -28,6 +28,11 @@ import {
   NoticesFoundAction,
   MarkNoticeReadAction
 } from './notices';
+import {
+  ContributionSubmissionFailed,
+  ContributionSubmittedAction,
+  SubmitContributionAction
+} from './contribution';
 import {
   RemoveUITitleAction,
   SetUITitleAction
@@ -87,6 +92,18 @@ export const createErrorAction = (type: unknown = 'ERROR') => (
   meta
 });
 
+export interface FormAction extends BaseAction {
+  payload: {};
+  meta: ActionMeta & FormMeta;
+}
+
+export type TabFormMeta = TabMeta & FormMeta;
+
+export interface TabFormAction extends TabAction {
+  payload: {};
+  meta: TabFormMeta;
+}
+
 export interface TabMeta extends ActionMeta {
   tab: Tab;
 }
@@ -97,6 +114,14 @@ export interface TabAction extends BaseAction {
 
 export type TabErrorAction = TabAction & ErrorAction;
 
+export type TabFormErrorAction = TabFormAction & ErrorAction;
+
+export interface FormMeta {
+  form: string;
+  resolve: (...args: any[]) => void;
+  reject: (...args: any[]) => void;
+}
+
 export interface ActionMeta {
   sendToBackground?: boolean;
   sendToTab?: boolean;
@@ -136,6 +161,9 @@ export type AppAction =
   | MarkNoticeReadAction
   | SetUITitleAction
   | RemoveUITitleAction
+  | SubmitContributionAction
+  | ContributionSubmittedAction
+  | ContributionSubmissionFailed
   | OptionsRequestedAction
   | OptionsTabOpened
   | ListeningActionsReadyAction
diff --git a/src/app/actions/notices.ts b/src/app/actions/notices.ts
index 2f459f917..e6ec03b23 100644
--- a/src/app/actions/notices.ts
+++ b/src/app/actions/notices.ts
@@ -1,6 +1,6 @@
 import { StatefulNotice } from 'app/lmem/notice';
-import { BaseAction, ErrorAction, TabAction, TabMeta } from '.';
 import Tab from 'app/lmem/Tab';
+import { BaseAction, ErrorAction, TabAction, TabMeta } from '.';
 
 export interface NoticesFoundAction extends TabAction {
   type: 'NOTICES_FOUND';
diff --git a/src/app/background/sagas/contribution.ts b/src/app/background/sagas/contribution.ts
deleted file mode 100644
index 4aa1bdf00..000000000
--- a/src/app/background/sagas/contribution.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { takeLatest, call } from 'redux-saga/effects';
-import sendEmail from 'api/sendInBlue/sendEmail';
-import { ContributionSubmittedAction } from '../../actions/contribution';
-import createContributionEmail from '../services/createContributionEmail';
-
-export function* sendContributionSaga({
-  payload: contribution
-}: ContributionSubmittedAction) {
-  yield call(sendEmail, createContributionEmail(contribution));
-}
-
-export default function* contributionSaga() {
-  yield takeLatest('CONTRIBUTION_SUBMITTED', sendContributionSaga);
-}
diff --git a/src/app/content/App/Contribute/Preview/PreviewScreen.container.tsx b/src/app/content/App/Contribute/Preview/PreviewScreen.container.tsx
new file mode 100644
index 000000000..fab178c44
--- /dev/null
+++ b/src/app/content/App/Contribute/Preview/PreviewScreen.container.tsx
@@ -0,0 +1,26 @@
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { goBack } from 'connected-react-router';
+
+import withTitle from 'app/hocs/withTitle';
+import { close } from 'app/actions/ui';
+import { submitContribution } from 'app/actions/contribution';
+import { getContribution } from 'app/content/selectors';
+import { State } from 'app/content/store';
+import PreviewScreen, { PreviewScreenOwnProps } from './PreviewScreen';
+
+const mapDispatchToProps = {
+  close,
+  modify: goBack,
+  publish: submitContribution
+};
+
+export default compose(
+  connect(
+    (state: State) => ({
+      contribution: getContribution(state)
+    }),
+    mapDispatchToProps
+  ),
+  withTitle<PreviewScreenOwnProps>('Prévisualisation')
+)(PreviewScreen);
diff --git a/src/app/content/App/Contribute/Preview/PreviewScreen.stories.tsx b/src/app/content/App/Contribute/Preview/PreviewScreen.stories.tsx
new file mode 100644
index 000000000..9572decca
--- /dev/null
+++ b/src/app/content/App/Contribute/Preview/PreviewScreen.stories.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { MemoryRouter as Router } from 'react-router-dom';
+import { storiesOf } from '@storybook/react';
+import Notification from 'components/organisms/Notification';
+import PreviewScreen from './PreviewScreen';
+import { action } from '@storybook/addon-actions';
+
+storiesOf('screens/Contribute/Preview', module)
+  .addDecorator(getStory => (
+    <Router>
+      <Notification title="Prévisualisation">{getStory()}</Notification>
+    </Router>
+  ))
+  .add('normal', () => (
+    <PreviewScreen
+      contribution={{
+        message:
+          "Je tiens à dire que la canicule, c'est une bonne chose pour les vieux.",
+        name: 'Johan Dufour',
+        url: 'https://weather.com',
+        contributor: {
+          email: 'johan.dufour@gmail.com',
+          name: 'Johan Dufour'
+        },
+        intention: 'approval',
+        created: new Date()
+      }}
+      modify={action('modify')}
+      publish={action('publish')}
+    />
+  ));
diff --git a/src/app/content/App/Contribute/Preview/PreviewScreen.tsx b/src/app/content/App/Contribute/Preview/PreviewScreen.tsx
new file mode 100644
index 000000000..16c4940b2
--- /dev/null
+++ b/src/app/content/App/Contribute/Preview/PreviewScreen.tsx
@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+import { InjectedFormProps, reduxForm } from 'redux-form';
+import styled from 'styled-components';
+
+import { Contribution } from 'app/lmem/notice';
+import NoticePreview from 'components/organisms/NoticePreview';
+import { BorderButton, Button } from 'components/atoms';
+import { Error, Form } from 'components/atoms/Forms';
+import handleFormSubmit from 'app/utils/form/handleFormSubmit';
+import validate from 'app/lmem/contribution/validateForm';
+import { form } from '../Submit/SubmitContributionForm';
+
+const PreviewForm = styled(Form)`
+  padding: 12px 16px 12px 16px;
+  display: flex;
+  justify-content: space-around;
+  width: 50%;
+`;
+
+export interface PreviewScreenOwnProps {
+  contribution: Contribution;
+  modify: () => void;
+  publish: (contribution: Contribution, meta: any) => void;
+}
+
+export type PreviewScreenProps = InjectedFormProps<
+  Contribution,
+  PreviewScreenOwnProps
+> &
+  PreviewScreenOwnProps;
+
+class PreviewScreen extends Component<PreviewScreenProps> {
+  get isButtonDisabled() {
+    const { valid, submitting } = this.props;
+    return !valid || submitting;
+  }
+
+  render() {
+    const {
+      contribution,
+      handleSubmit,
+      form,
+      submitting,
+      modify,
+      publish,
+      error,
+      dirty
+    } = this.props;
+
+    return (
+      <NoticePreview contribution={contribution}>
+        <PreviewForm
+          onSubmit={handleFormSubmit({ handleSubmit, form })(publish)}
+        >
+          <Button onClick={modify}>Modifier</Button>
+          <BorderButton
+            type="submit"
+            disabled={this.isButtonDisabled}
+            loading={submitting}
+          >
+            Publier
+          </BorderButton>
+
+          {dirty && error && <Error>{error}</Error>}
+        </PreviewForm>
+      </NoticePreview>
+    );
+  }
+}
+
+export default reduxForm<Contribution, PreviewScreenOwnProps>({
+  form,
+  destroyOnUnmount: false,
+  forceUnregisterOnUnmount: true,
+  validate
+})(PreviewScreen);
diff --git a/src/app/content/App/Contribute/Preview/index.tsx b/src/app/content/App/Contribute/Preview/index.tsx
new file mode 100644
index 000000000..b6dc9fc16
--- /dev/null
+++ b/src/app/content/App/Contribute/Preview/index.tsx
@@ -0,0 +1,3 @@
+import PreviewScreen from './PreviewScreen.container';
+
+export default PreviewScreen;
diff --git a/src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.container.ts b/src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.container.ts
new file mode 100644
index 000000000..32888b77f
--- /dev/null
+++ b/src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.container.ts
@@ -0,0 +1,34 @@
+import { connect } from 'react-redux';
+import { reduxForm } from 'redux-form';
+
+import SubmitContributionForm, {
+  SubmitContributionFormOwnProps
+} from './SubmitContributionForm';
+import { Contribution } from 'app/lmem/notice';
+import { getURL } from 'app/content/selectors';
+import { State } from 'app/content/store';
+import validate from 'app/lmem/contribution/validateForm';
+import { push } from 'connected-react-router';
+
+export const form = 'contribution';
+
+export default connect(
+  (state: State) => ({
+    initialValues: {
+      intention: 'approval',
+      url: getURL(state),
+      created: new Date()
+    }
+  }),
+  {
+    onSubmit: () => push('/contribute/preview')
+  }
+)(
+  // @ts-ignore
+  reduxForm<Contribution, SubmitContributionFormOwnProps>({
+    form,
+    destroyOnUnmount: false,
+    forceUnregisterOnUnmount: true,
+    validate
+  })(SubmitContributionForm)
+);
diff --git a/src/app/content/App/PublishedNoticeScreen/PublishedNoticeScreen.stories.tsx b/src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.stories.tsx
similarity index 50%
rename from src/app/content/App/PublishedNoticeScreen/PublishedNoticeScreen.stories.tsx
rename to src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.stories.tsx
index 71ae9b7fc..b7c879a36 100644
--- a/src/app/content/App/PublishedNoticeScreen/PublishedNoticeScreen.stories.tsx
+++ b/src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.stories.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
 import { MemoryRouter as Router } from 'react-router-dom';
-import PublishedNoticeScreen from '.';
+import { storiesOf } from '@storybook/react';
+import SubmitContribution from './';
 
-storiesOf('screens/PublishedNotice', module)
+storiesOf('forms/SubmitContribution', module)
   .addDecorator(getStory => <Router>{getStory()}</Router>)
-  .add('normal', () => <PublishedNoticeScreen />);
+  .add('normal', () => <SubmitContribution />);
diff --git a/src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.tsx b/src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.tsx
new file mode 100644
index 000000000..82cbdefec
--- /dev/null
+++ b/src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.tsx
@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import { Field, InjectedFormProps } from 'redux-form';
+import { Form, Error } from 'components/atoms/Forms';
+import { CenterContainer } from 'components/atoms';
+import BorderButton from 'components/atoms/Buttons/BorderButton';
+import {
+  InputField,
+  IntentionsSelectorField,
+  TextareaField
+} from 'components/organisms/Fields';
+import { Contribution } from 'app/lmem/notice';
+
+export interface SubmitContributionFormOwnProps {
+  onSubmit: (...args: any[]) => void;
+}
+
+export type SubmitContributionFormProps = InjectedFormProps<
+  Contribution,
+  SubmitContributionFormOwnProps
+> &
+  SubmitContributionFormOwnProps;
+
+export default class SubmitContributionForm extends Component<
+  SubmitContributionFormProps
+> {
+  get isButtonDisabled() {
+    return !this.props.valid || this.props.submitting;
+  }
+
+  render() {
+    const { handleSubmit, submitting, error, dirty } = this.props;
+    return (
+      <Form onSubmit={handleSubmit}>
+        <Field name="url" type="hidden" component={InputField} />
+        <Field name="intention" component={IntentionsSelectorField} />
+        <Field
+          name="contributor.name"
+          type="text"
+          placeholder="Votre nom"
+          component={InputField}
+        />
+        <Field
+          name="contributor.email"
+          type="email"
+          placeholder="Votre@email.fr"
+          component={InputField}
+        />
+        <Field
+          name="message"
+          placeholder="Ecrire le message que vous souhaitez publier"
+          component={TextareaField}
+        />
+        <CenterContainer>
+          <BorderButton
+            type="submit"
+            disabled={this.isButtonDisabled}
+            loading={submitting}
+          >
+            prévisualiser et publier
+          </BorderButton>
+        </CenterContainer>
+
+        {dirty && error && <Error>{error}</Error>}
+      </Form>
+    );
+  }
+}
diff --git a/src/app/content/App/Contribute/Submit/SubmitContributionForm/index.ts b/src/app/content/App/Contribute/Submit/SubmitContributionForm/index.ts
new file mode 100644
index 000000000..8158c3dd3
--- /dev/null
+++ b/src/app/content/App/Contribute/Submit/SubmitContributionForm/index.ts
@@ -0,0 +1,7 @@
+import SubmitContributionForm, {
+  form
+} from './SubmitContributionForm.container';
+
+export { form };
+
+export default SubmitContributionForm;
diff --git a/src/app/content/App/Contribute/Submit/SubmitContributionScreen.container.tsx b/src/app/content/App/Contribute/Submit/SubmitContributionScreen.container.tsx
new file mode 100644
index 000000000..fc8c4caf5
--- /dev/null
+++ b/src/app/content/App/Contribute/Submit/SubmitContributionScreen.container.tsx
@@ -0,0 +1,4 @@
+import withTitle from 'app/hocs/withTitle';
+import SubmitContributionScreen from './SubmitContributionScreen';
+
+export default withTitle('créer une bulle ici')(SubmitContributionScreen);
diff --git a/src/app/content/App/Contribute/Submit/SubmitContributionScreen.stories.tsx b/src/app/content/App/Contribute/Submit/SubmitContributionScreen.stories.tsx
new file mode 100644
index 000000000..f9b4fa415
--- /dev/null
+++ b/src/app/content/App/Contribute/Submit/SubmitContributionScreen.stories.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { MemoryRouter as Router } from 'react-router-dom';
+import SubmitContributionScreen from './SubmitContributionScreen';
+import Notification from 'components/organisms/Notification';
+
+storiesOf('screens/Contribute/Submit', module)
+  .addDecorator(getStory => (
+    <Router>
+      <Notification title="créer une bulle ici">{getStory()}</Notification>
+    </Router>
+  ))
+  .add('normal', () => <SubmitContributionScreen />);
diff --git a/src/app/content/App/Contribute/Submit/SubmitContributionScreen.tsx b/src/app/content/App/Contribute/Submit/SubmitContributionScreen.tsx
new file mode 100644
index 000000000..aab45bf84
--- /dev/null
+++ b/src/app/content/App/Contribute/Submit/SubmitContributionScreen.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import { ContentWrapper } from 'components/atoms';
+import SubmitContributionForm from './SubmitContributionForm';
+
+export const SubmitContributionScreen = () => (
+  <ContentWrapper>
+    <SubmitContributionForm />
+  </ContentWrapper>
+);
+
+export default SubmitContributionScreen;
diff --git a/src/app/content/App/CreateNoticeScreen/Textarea.tsx b/src/app/content/App/Contribute/Submit/Textarea.tsx
similarity index 100%
rename from src/app/content/App/CreateNoticeScreen/Textarea.tsx
rename to src/app/content/App/Contribute/Submit/Textarea.tsx
diff --git a/src/app/content/App/Contribute/Submit/index.ts b/src/app/content/App/Contribute/Submit/index.ts
new file mode 100644
index 000000000..8fdd02cf8
--- /dev/null
+++ b/src/app/content/App/Contribute/Submit/index.ts
@@ -0,0 +1,3 @@
+import SubmitContributionScreen from './SubmitContributionScreen.container';
+
+export default SubmitContributionScreen;
diff --git a/src/app/content/App/PublishedNoticeScreen/Container.ts b/src/app/content/App/Contribute/Submitted/Container.ts
similarity index 71%
rename from src/app/content/App/PublishedNoticeScreen/Container.ts
rename to src/app/content/App/Contribute/Submitted/Container.ts
index e8407970e..50ef7bb78 100644
--- a/src/app/content/App/PublishedNoticeScreen/Container.ts
+++ b/src/app/content/App/Contribute/Submitted/Container.ts
@@ -1,19 +1,16 @@
 import styled from 'styled-components';
-import { CenterContainer, ExternalLink } from 'components/atoms/';
+import { ExternalLink } from 'components/atoms';
 
 export default styled.article`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: space-around;
   height: 100%;
   padding-bottom: 38px;
   text-align: center;
 
-  & ${CenterContainer} {
-    margin-top: auto;
-  }
-
   & ${ExternalLink} {
     display: block;
     font-weight: bold;
diff --git a/src/app/content/App/PublishedNoticeScreen/Content.ts b/src/app/content/App/Contribute/Submitted/Content.ts
similarity index 100%
rename from src/app/content/App/PublishedNoticeScreen/Content.ts
rename to src/app/content/App/Contribute/Submitted/Content.ts
diff --git a/src/app/content/App/PublishedNoticeScreen/ContentTitle.ts b/src/app/content/App/Contribute/Submitted/ContentTitle.ts
similarity index 100%
rename from src/app/content/App/PublishedNoticeScreen/ContentTitle.ts
rename to src/app/content/App/Contribute/Submitted/ContentTitle.ts
diff --git a/src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.container.tsx b/src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.container.tsx
new file mode 100644
index 000000000..35929472f
--- /dev/null
+++ b/src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.container.tsx
@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+
+import ContributionSubmittedScreen from './ContributionSubmittedScreen';
+import { history, State } from 'app/content/store';
+import { close } from 'app/actions/ui';
+import { getContribution } from 'app/content/selectors';
+import { go, replace } from 'connected-react-router';
+
+const mapDispatchToProps = {
+  close,
+  goBack: () => replace('/')
+};
+
+export default connect(
+  (state: State) => ({
+    contribution: getContribution(state)
+  }),
+  mapDispatchToProps
+)(ContributionSubmittedScreen);
diff --git a/src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.stories.tsx b/src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.stories.tsx
new file mode 100644
index 000000000..2de86203d
--- /dev/null
+++ b/src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.stories.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { MemoryRouter as Router } from 'react-router-dom';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import Notification from 'components/organisms/Notification';
+import ContributionSubmittedScreen from './ContributionSubmittedScreen';
+
+storiesOf('screens/Contribute/Submitted', module)
+  .addDecorator(getStory => (
+    <Router>
+      <Notification>{getStory()}</Notification>
+    </Router>
+  ))
+  .add('normal', () => (
+    <ContributionSubmittedScreen
+      close={action('close')}
+      goBack={action('goBack')}
+      contribution={{
+        message:
+          "Je tiens à dire que la canicule, c'est une bonne chose pour les vieux.",
+        name: 'Johan Dufour',
+        url: 'https://weather.com',
+        contributor: {
+          email: 'johan.dufour@gmail.com',
+          name: 'Johan Dufour'
+        },
+        intention: 'approval',
+        created: new Date()
+      }}
+    />
+  ));
diff --git a/src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.tsx b/src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.tsx
new file mode 100644
index 000000000..b77fe8b73
--- /dev/null
+++ b/src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { Button, CenterContainer, ExternalLink } from 'components/atoms';
+import Container from './Container';
+import Content from './Content';
+import ContentTitle from './ContentTitle';
+import Illustration from './Illustration';
+import { Contribution } from 'app/lmem/notice';
+
+export interface ContributionSubmittedScreenProps {
+  contribution: Contribution;
+  close: () => void;
+  goBack: () => void;
+}
+
+export default ({ contribution, goBack }: ContributionSubmittedScreenProps) => (
+  <Container>
+    <Illustration />
+    <ContentTitle>Félicitations !</ContentTitle>
+    <Content>
+      Votre bulle sera publiée d’ici 24h sur :
+      <ExternalLink>{contribution.url}</ExternalLink>
+    </Content>
+
+    <CenterContainer>
+      <Button onClick={goBack}>Retour aux Bulles</Button>
+    </CenterContainer>
+  </Container>
+);
diff --git a/src/app/content/App/PublishedNoticeScreen/Illustration.tsx b/src/app/content/App/Contribute/Submitted/Illustration.tsx
similarity index 100%
rename from src/app/content/App/PublishedNoticeScreen/Illustration.tsx
rename to src/app/content/App/Contribute/Submitted/Illustration.tsx
diff --git a/src/app/content/App/Contribute/Submitted/index.tsx b/src/app/content/App/Contribute/Submitted/index.tsx
new file mode 100644
index 000000000..d10f29547
--- /dev/null
+++ b/src/app/content/App/Contribute/Submitted/index.tsx
@@ -0,0 +1,3 @@
+import ContributionSubmittedScreen from './ContributionSubmittedScreen.container';
+
+export default ContributionSubmittedScreen;
diff --git a/src/app/content/App/Contribute/index.tsx b/src/app/content/App/Contribute/index.tsx
new file mode 100644
index 000000000..55dbcedb8
--- /dev/null
+++ b/src/app/content/App/Contribute/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Route, RouteComponentProps, Switch } from 'react-router-dom';
+import SubmitScreen from './Submit';
+import SubmittedScreen from './Submitted';
+import PreviewScreen from './Preview';
+
+export default ({ match }: RouteComponentProps) => (
+  <Switch>
+    <Route path={match.url} exact component={SubmitScreen} />
+    <Route path={`${match.url}/preview`} component={PreviewScreen} />
+    <Route path={`${match.url}/submitted`} component={SubmittedScreen} />
+  </Switch>
+);
diff --git a/src/app/content/App/CreateNoticeScreen/CreateNoticeScreen.stories.tsx b/src/app/content/App/CreateNoticeScreen/CreateNoticeScreen.stories.tsx
deleted file mode 100644
index 38f91a25c..000000000
--- a/src/app/content/App/CreateNoticeScreen/CreateNoticeScreen.stories.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { MemoryRouter as Router } from 'react-router-dom';
-import CreateNoticeScreen from '.';
-
-storiesOf('screens/CreateNotice', module)
-  .addDecorator(getStory => <Router>{getStory()}</Router>)
-  .add('normal', () => <CreateNoticeScreen close={action('close')} />)
-  .add('error', () => <CreateNoticeScreen close={action('close')} />);
diff --git a/src/app/content/App/CreateNoticeScreen/index.tsx b/src/app/content/App/CreateNoticeScreen/index.tsx
deleted file mode 100644
index 88cf21258..000000000
--- a/src/app/content/App/CreateNoticeScreen/index.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import Notification from 'components/organisms/Notification';
-import IntentionsSelector from 'components/molecules/IntentionsSelector/IntentionsSelector';
-import Input from 'components/atoms/Forms/Input/Input';
-import Textarea from './Textarea';
-import Error from 'components/atoms/Forms/Error/Error';
-import { CenterContainer, ContentWrapper } from 'components/atoms/';
-import BorderButton from 'components/atoms/Buttons/BorderButton';
-
-interface Props {
-  close: () => void;
-}
-export const CreateNoticeScreen = ({ close }: Props) => (
-  <Notification title="créer une bulle ici" close={close}>
-    <ContentWrapper>
-      <IntentionsSelector value="approval" />
-
-      <Input type="email" placeholder="your@email.com" />
-      <Textarea placeholder="Ecrire le message que vous souhaitez publier" />
-      <CenterContainer>
-        <BorderButton>prévisualiser et publier</BorderButton>
-      </CenterContainer>
-
-      <Error>Les champs en rouge sont incorrects ou incomplets</Error>
-    </ContentWrapper>
-  </Notification>
-);
-
-export default CreateNoticeScreen;
diff --git a/src/app/content/App/Notice/Details/Details.stories.tsx b/src/app/content/App/Notice/Details/Details.stories.tsx
index 7c7db7a88..bd1cfbab4 100644
--- a/src/app/content/App/Notice/Details/Details.stories.tsx
+++ b/src/app/content/App/Notice/Details/Details.stories.tsx
@@ -23,6 +23,15 @@ import Notification from '../../../../../components/organisms/Notification';
 
 const defaultContributorName = Faker.name.findName();
 const defaultDate = subMonths(new Date(), 1);
+const commonProps = {
+  like: action('like'),
+  unlike: action('unlike'),
+  dislike: action('dislike'),
+  confirmDislike: action('confirmDislike'),
+  undislike: action('undislike'),
+  view: action('view'),
+  followSource: action('followSource')
+};
 
 storiesOf('screens/Notice/Details', module)
   .addDecorator(withKnobs)
@@ -35,6 +44,7 @@ storiesOf('screens/Notice/Details', module)
   ))
   .add('default', () => (
     <Details
+      {...commonProps}
       notice={generateStatefulNotice({
         contributor: text('contributor', defaultContributorName),
         intention: select('intention', intentions, 'approval'),
@@ -46,12 +56,5 @@ storiesOf('screens/Notice/Details', module)
         liked: boolean('liked', false),
         disliked: boolean('disliked', false)
       })}
-      like={action('like')}
-      unlike={action('unlike')}
-      dislike={action('dislike')}
-      confirmDislike={action('confirmDislike')}
-      undislike={action('undislike')}
-      view={action('view')}
-      followSource={action('followSource')}
     />
   ));
diff --git a/src/app/content/App/PublishedNoticeScreen/index.tsx b/src/app/content/App/PublishedNoticeScreen/index.tsx
deleted file mode 100644
index 69994061e..000000000
--- a/src/app/content/App/PublishedNoticeScreen/index.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-
-import Notification from 'components/organisms/Notification';
-import { Button, CenterContainer, ExternalLink } from 'components/atoms';
-import BorderButton from 'components/atoms/Buttons/BorderButton';
-import Container from './Container';
-import Content from './Content';
-import ContentTitle from './ContentTitle';
-import Illustration from './Illustration';
-
-export default () => (
-  <Notification close={close}>
-    <Container>
-      <Illustration />
-      <ContentTitle>Félicitations !</ContentTitle>
-      <Content>
-        Votre bulle sera publiée d’ici 24h sur :
-        <ExternalLink>www.ouisncf.com</ExternalLink>
-      </Content>
-      <BorderButton>Voir la Bulle</BorderButton>
-
-      <CenterContainer>
-        <Button>Retour aux Bulles</Button>
-      </CenterContainer>
-    </Container>
-  </Notification>
-);
diff --git a/src/app/content/App/UI.tsx b/src/app/content/App/UI.tsx
index 52d60b2ce..0999871f3 100644
--- a/src/app/content/App/UI.tsx
+++ b/src/app/content/App/UI.tsx
@@ -20,6 +20,7 @@ import Error from './Error';
 import Notification from 'components/organisms/Notification';
 import { close } from '../../actions/ui';
 import { CloseCause } from '../../lmem/ui';
+import Contribute from './Contribute';
 
 const mapStateToProps = (state: ContentState) => ({
   open: isOpen(state),
@@ -59,6 +60,7 @@ const UI = ({ loaded, open, title, close, noticeContext }: UIProps) => {
           <Route path="/subscriptions" component={Subscriptions} />
           <Route path="/help" component={Help} />
           <Route path="/account" component={Account} />
+          <Route path="/contribute" component={Contribute} />
           <Route component={Error} />
         </Switch>
       </Notification>
diff --git a/src/app/content/reducers/index.ts b/src/app/content/reducers/index.ts
index 7086aae89..3c11a8ebf 100644
--- a/src/app/content/reducers/index.ts
+++ b/src/app/content/reducers/index.ts
@@ -1,6 +1,7 @@
 import { connectRouter } from 'connected-react-router';
 import { combineReducers } from 'redux';
 import { MemoryHistory } from 'history';
+import { reducer as form } from 'redux-form';
 
 import installationDetails from './installationDetails';
 import ui from './ui';
@@ -13,5 +14,6 @@ export default (history: MemoryHistory) =>
     ui,
     notices,
     tab,
-    router: connectRouter(history)
+    router: connectRouter(history),
+    form
   });
diff --git a/src/app/content/sagas/contribution.ts b/src/app/content/sagas/contribution.ts
new file mode 100644
index 000000000..d4a4b9008
--- /dev/null
+++ b/src/app/content/sagas/contribution.ts
@@ -0,0 +1,43 @@
+import { put, takeLatest, call } from 'redux-saga/effects';
+import { go, replace } from 'connected-react-router';
+import { reset } from 'redux-form';
+
+import {
+  contributionSubmissionFailed,
+  contributionSubmitted,
+  SubmitContributionAction
+} from 'app/actions/contribution';
+import { createSubmissionError } from 'app/utils/form';
+import sendEmail from 'api/sendInBlue/sendEmail';
+import createContributionEmail from 'app/background/services/createContributionEmail';
+import { history } from '../store';
+
+export function* submitContributionSaga({
+  payload: contribution,
+  meta: { form, resolve, reject }
+}: SubmitContributionAction) {
+  try {
+    yield call(sendEmail, createContributionEmail(contribution));
+
+    yield put(contributionSubmitted(contribution));
+
+    // reset history, form and redirect to success page
+    yield put(go(-history.entries.length));
+    yield put(reset(form));
+    yield put(replace('/contribute/submitted'));
+
+    if (form) {
+      yield call(resolve);
+    }
+  } catch (e) {
+    yield put(contributionSubmissionFailed(e));
+
+    if (form) {
+      yield call(reject, createSubmissionError(e));
+    }
+  }
+}
+
+export default function*() {
+  yield takeLatest('CONTRIBUTION/SUBMIT', submitContributionSaga);
+}
diff --git a/src/app/content/sagas/index.ts b/src/app/content/sagas/index.ts
index 5c77d334c..79f2aedbd 100644
--- a/src/app/content/sagas/index.ts
+++ b/src/app/content/sagas/index.ts
@@ -1,18 +1,20 @@
 import { fork, all } from 'redux-saga/effects';
-import errorSaga from 'app/sagas/error';
-import createBackgroundChannelSaga from 'app/sagas/backgroundChannel';
-import initSaga from './init';
-import browserActionSaga from './browserAction';
-import noticesSaga from './notices';
-import uiSaga from './ui';
+import error from 'app/sagas/error';
+import backgroundChannel from 'app/sagas/backgroundChannel';
+import init from './init';
+import browserAction from './browserAction';
+import contribution from './contribution';
+import notices from './notices';
+import ui from './ui';
 
 export default function* rootSaga() {
   yield all([
-    fork(createBackgroundChannelSaga('content')),
-    fork(initSaga),
-    fork(browserActionSaga),
-    fork(noticesSaga),
-    fork(uiSaga),
-    fork(errorSaga)
+    fork(backgroundChannel('content')),
+    fork(init),
+    fork(browserAction),
+    fork(contribution),
+    fork(notices),
+    fork(ui),
+    fork(error)
   ]);
 }
diff --git a/src/app/content/selectors/index.ts b/src/app/content/selectors/index.ts
index 9887a2c85..8891030fd 100644
--- a/src/app/content/selectors/index.ts
+++ b/src/app/content/selectors/index.ts
@@ -1,10 +1,13 @@
 import { createSelector } from 'reselect';
 import { RouteComponentProps } from 'react-router';
 import { getLocation } from 'connected-react-router';
+import { getFormValues } from 'redux-form';
+
 import {
   getNotice,
   isMarkedUnread,
-  shouldNoticeBeShown
+  shouldNoticeBeShown,
+  Contribution
 } from 'app/lmem/notice';
 import { InstallationDetails } from 'app/lmem/installation';
 import { OpenState, MountedState, TitleState, UIState } from '../reducers/ui';
@@ -55,7 +58,16 @@ export const getExtensionInstallationDate = createSelector(
 
 export const getTab = (state: ContentState) => state.tab;
 
+export const getURL = (state: State) => {
+  const tab = getTab(state);
+  return tab ? tab.url : null;
+};
+
 export const getPathname = (state: ContentState) => getLocation(state).pathname;
 
 export const isNoticeContext = (state: ContentState) =>
   getPathname(state).includes('notice');
+
+export const getContribution = (state: State): Contribution =>
+  // @ts-ignore
+  getFormValues('contribution')(state);
diff --git a/src/app/lmem/Errors.ts b/src/app/lmem/Errors.ts
new file mode 100644
index 000000000..4d85b5c7d
--- /dev/null
+++ b/src/app/lmem/Errors.ts
@@ -0,0 +1,3 @@
+export default interface Errors {
+  [key: string]: string | Errors;
+}
diff --git a/src/app/lmem/contribution/isValid.ts b/src/app/lmem/contribution/isValid.ts
new file mode 100644
index 000000000..8a0e1548c
--- /dev/null
+++ b/src/app/lmem/contribution/isValid.ts
@@ -0,0 +1,5 @@
+import { Contribution } from 'app/lmem/notice';
+import validate from './validate';
+
+export default (contribution: Contribution): boolean =>
+  Object.keys(validate(contribution)).length > 0;
diff --git a/src/app/lmem/contribution/validate.ts b/src/app/lmem/contribution/validate.ts
new file mode 100644
index 000000000..f53739b76
--- /dev/null
+++ b/src/app/lmem/contribution/validate.ts
@@ -0,0 +1,37 @@
+import { Contribution } from 'app/lmem/notice';
+import isEmail from '../../utils/isEmail';
+import Errors from '../Errors';
+
+export default (contribution: Contribution): Errors => {
+  const errors: Errors = {};
+  const requiredFields: string[] = ['intention', 'message'];
+  const requiredFieldMessage = 'Ce champs est obligatoire.';
+
+  requiredFields.forEach(requiredField => {
+    if (!contribution[requiredField]) {
+      errors[requiredField] = requiredFieldMessage;
+    }
+  });
+
+  const { contributor } = contribution;
+  if (contributor) {
+    errors.contributor = {};
+    if (!contributor.name) {
+      errors.contributor.name = requiredFieldMessage;
+    }
+
+    if (!contributor.email) {
+      errors.contributor.email = requiredFieldMessage;
+    }
+
+    if (contributor.email && !isEmail(contributor.email)) {
+      errors.contributor.email = "L'email n'est pas valide";
+    }
+
+    if (Object.keys(errors.contributor).length === 0) {
+      delete errors.contributor;
+    }
+  }
+
+  return errors;
+};
diff --git a/src/app/lmem/contribution/validateForm.ts b/src/app/lmem/contribution/validateForm.ts
new file mode 100644
index 000000000..a1ab06a93
--- /dev/null
+++ b/src/app/lmem/contribution/validateForm.ts
@@ -0,0 +1,13 @@
+import { FormErrors } from 'redux-form';
+import { Contribution } from 'app/lmem/notice';
+import validate from './validate';
+
+export default (contribution: Contribution): FormErrors<Contribution> => {
+  const errors = validate(contribution) as FormErrors<Contribution>;
+
+  if (Object.keys(errors).length > 0) {
+    errors._error = 'Les champs en rouge sont incorrects ou incomplets.';
+  }
+
+  return errors;
+};
diff --git a/src/app/lmem/format/contribution.ts b/src/app/lmem/format/contribution.ts
index 16b0f564c..3a93f02f1 100644
--- a/src/app/lmem/format/contribution.ts
+++ b/src/app/lmem/format/contribution.ts
@@ -9,7 +9,7 @@ export const formatContributionHtmlEmail = (contribution: Contribution) => `
 <html lang="fr"><body>
   <h1>Nouvelle contribution de ${contribution.contributor.name} !</h1>
   <ul>
-    <li><strong>date: </strong>${formatDate(contribution.date)}</li>
+    <li><strong>date: </strong>${formatDate(contribution.created)}</li>
     <li><strong>e-mail: </strong>${contribution.contributor.email}</li>
     <li><strong>url: </strong>${contribution.url}</li>
     <li><strong>intention: </strong>${contribution.intention}</li>
@@ -21,7 +21,7 @@ export const formatContributionHtmlEmail = (contribution: Contribution) => `
 export const formatContributionTextEmail = (contribution: Contribution) =>
   `Nouvelle contribution de ${contribution.contributor.name} !\n
 \n
-date: ${formatDate(contribution.date)}\n
+date: ${formatDate(contribution.created)}\n
 e-mail: ${contribution.contributor.email}\n
 url: ${contribution.url}\n
 intention: ${contribution.intention}\n
diff --git a/src/app/lmem/notice.ts b/src/app/lmem/notice.ts
index 2eefde961..a43a9b08c 100644
--- a/src/app/lmem/notice.ts
+++ b/src/app/lmem/notice.ts
@@ -17,8 +17,9 @@ export interface Notice {
 }
 
 export interface Contribution {
+  [key: string]: any;
   url: string;
-  date: Date;
+  created: Date;
   intention: Intention;
   contributor: NewContributor;
   message: string;
diff --git a/src/app/utils/form/createSubmissionError.ts b/src/app/utils/form/createSubmissionError.ts
new file mode 100644
index 000000000..652014ae7
--- /dev/null
+++ b/src/app/utils/form/createSubmissionError.ts
@@ -0,0 +1,3 @@
+import { SubmissionError } from 'redux-form';
+
+export default (e: Error) => new SubmissionError({ _error: e.message });
diff --git a/src/app/utils/form/handleFormSubmit.ts b/src/app/utils/form/handleFormSubmit.ts
new file mode 100644
index 000000000..60994f060
--- /dev/null
+++ b/src/app/utils/form/handleFormSubmit.ts
@@ -0,0 +1,16 @@
+import { SubmitHandler } from 'redux-form';
+import { FormMeta } from '../../actions';
+
+export default ({
+  handleSubmit,
+  form
+}: {
+  handleSubmit: SubmitHandler<any, any, string>;
+  form: string;
+}) => (onSubmit: (payload: any, meta: FormMeta) => void) =>
+  handleSubmit(
+    (payload: any) =>
+      new Promise((resolve, reject) =>
+        onSubmit(payload, { form, resolve, reject })
+      )
+  );
diff --git a/src/app/utils/form/index.ts b/src/app/utils/form/index.ts
new file mode 100644
index 000000000..d2c7bbe8f
--- /dev/null
+++ b/src/app/utils/form/index.ts
@@ -0,0 +1,2 @@
+export { default as createSubmissionError } from './createSubmissionError';
+export { default as handleFormSubmit } from './handleFormSubmit';
diff --git a/src/components/atoms/Button.ts b/src/components/atoms/Button.ts
index 40e1a9a52..0399a4eef 100644
--- a/src/components/atoms/Button.ts
+++ b/src/components/atoms/Button.ts
@@ -6,6 +6,10 @@ export interface ButtonProps {
   as?: string | React.ComponentType<any>;
   theme?: Theme;
   loading?: boolean;
+  href?: string;
+  target?: '_blank';
+  rel?: string;
+  to?: string;
 }
 
 export default styled.button<ButtonProps>`
diff --git a/src/components/atoms/Button/AddNoticeButton/AddNoticeButton.tsx b/src/components/atoms/Button/AddNoticeButton/AddNoticeButton.tsx
index 859d4190a..db5803806 100644
--- a/src/components/atoms/Button/AddNoticeButton/AddNoticeButton.tsx
+++ b/src/components/atoms/Button/AddNoticeButton/AddNoticeButton.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import BorderButton from '../BorderButton';
 import AddIcon from './AddIcon';
@@ -29,13 +30,7 @@ const ButtonLink = styled(BorderButton)<ButtonProps>`
 `;
 
 export default ({ ...props }) => (
-  <ButtonLink
-    as="a"
-    href="https://form.jotformeu.com/82702852284358"
-    target="_blank"
-    rel="noopener noreferrer"
-    {...props}
-  >
+  <ButtonLink as={Link} to="/contribute" {...props}>
     <AddIcon />
     Créer votre bulle
   </ButtonLink>
diff --git a/src/components/atoms/Buttons/BorderButton/BorderButton.ts b/src/components/atoms/Buttons/BorderButton/BorderButton.ts
new file mode 100644
index 000000000..e84429f06
--- /dev/null
+++ b/src/components/atoms/Buttons/BorderButton/BorderButton.ts
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+import Button, { ButtonProps } from '../../Button';
+
+export default styled(Button)<ButtonProps>`
+  height: 28px;
+  padding: 5px 12px;
+  font-size: 15px;
+  color: ${props => props.theme.button};
+  text-decoration: none;
+  background-color: #fff;
+  border: 2px solid ${props => props.theme.button};
+
+  &:hover {
+    color: #fff;
+    background-color: ${props => props.theme.button};
+  }
+`;
diff --git a/src/components/atoms/Forms/Container.ts b/src/components/atoms/Forms/Container.ts
deleted file mode 100644
index 39e601764..000000000
--- a/src/components/atoms/Forms/Container.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import styled from 'styled-components';
-
-export default styled.form``;
diff --git a/src/components/atoms/Forms/Form.ts b/src/components/atoms/Forms/Form.ts
new file mode 100644
index 000000000..fc5a8ea32
--- /dev/null
+++ b/src/components/atoms/Forms/Form.ts
@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export default styled.form.attrs(() => ({ noValidate: true }))``;
diff --git a/src/components/atoms/Forms/index.ts b/src/components/atoms/Forms/index.ts
index 4d47622e3..596398078 100644
--- a/src/components/atoms/Forms/index.ts
+++ b/src/components/atoms/Forms/index.ts
@@ -1,4 +1,4 @@
-export { default as Container } from './Container';
+export { default as Form } from './Form';
 export { default as Input } from './Input/Input';
 export { default as Error } from './Error/Error';
 export { default as Textarea } from './Textarea/Textarea';
diff --git a/src/components/organisms/NoticeDetails/DetailsContainer.ts b/src/components/organisms/NoticeDetails/DetailsContainer.ts
index c3e7966e2..514cb4ec1 100644
--- a/src/components/organisms/NoticeDetails/DetailsContainer.ts
+++ b/src/components/organisms/NoticeDetails/DetailsContainer.ts
@@ -3,6 +3,7 @@ import styled from 'styled-components';
 export default styled.article`
   box-sizing: border-box;
   display: flex;
+  align-items: center;
   flex-direction: column;
   height: 100%;
   font-size: 16px;
diff --git a/src/components/organisms/NoticePreview.tsx b/src/components/organisms/NoticePreview.tsx
new file mode 100644
index 000000000..6fe225ea9
--- /dev/null
+++ b/src/components/organisms/NoticePreview.tsx
@@ -0,0 +1,39 @@
+import React, { PureComponent } from 'react';
+import { format } from 'date-fns';
+import { Contributor, CenterContainer } from '../atoms';
+import DetailsContainer from './NoticeDetails/DetailsContainer';
+import DetailsContent from './NoticeDetails/DetailsContent';
+import DetailsMeta from './NoticeDetails/DetailsMeta';
+import Message from './NoticeDetails/Message';
+import Date from './NoticeDetails/Date';
+import IntentionIcon from '../atoms/Intentions/IntentionIcon';
+import { Contribution } from 'app/lmem/notice';
+
+interface NoticePreviewProps {
+  contribution: Contribution;
+}
+class NoticePreview extends PureComponent<NoticePreviewProps> {
+  render() {
+    const {
+      contribution: { intention, message, created, email },
+      children
+    } = this.props;
+
+    return (
+      <DetailsContainer>
+        <DetailsContent>
+          <DetailsMeta>
+            <Date>Le {format(created, 'DD/MM/YYYY')}</Date>
+            <Contributor>{email} :</Contributor>
+            <IntentionIcon active intention={intention} />
+          </DetailsMeta>
+
+          <Message>{message}</Message>
+        </DetailsContent>
+        {children}
+      </DetailsContainer>
+    );
+  }
+}
+
+export default NoticePreview;

From aecbf0a75b23720262d74587f573f55e05ff4732 Mon Sep 17 00:00:00 2001
From: lutangar <johan.dufour@gmail.com>
Date: Tue, 9 Jul 2019 10:08:36 +0200
Subject: [PATCH 06/19] fix(sendinblue): handle all 2xx codes

---
 src/api/sendInBlue/call.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/sendInBlue/call.ts b/src/api/sendInBlue/call.ts
index b6ff9c3c1..3bab0b03b 100644
--- a/src/api/sendInBlue/call.ts
+++ b/src/api/sendInBlue/call.ts
@@ -14,7 +14,7 @@ const call = (path: string, data?: {} | [], method: Method = 'GET') =>
     if (response.status >= 400) {
       throw new Error('Bad response from server');
     }
-    if (response.status === 204) {
+    if (response.status >= 200 && response.status < 300) {
       return true;
     }
     return response.json();

From 835646eea23680b86f2a1c0f919668c833d1fd10 Mon Sep 17 00:00:00 2001
From: lutangar <johan.dufour@gmail.com>
Date: Wed, 10 Jul 2019 18:01:47 +0200
Subject: [PATCH 07/19] chore(forms): refactor with new conventions

fix preview overflow and background issues
---
 .../ContributeScreen.stories.tsx}             |  4 +--
 .../ContributeScreen.tsx}                     |  4 +--
 .../SubmitContributionForm.stories.tsx        |  5 +--
 .../SubmitContributionForm.tsx                |  8 +++--
 .../SubmitContributionForm/index.ts           |  4 +++
 .../SubmitContributionForm/withConnect.ts     | 18 ++++++++++
 .../SubmitContributionForm/withReduxForm.ts   | 13 +++++++
 .../App/Contribute/ContributeScreen/index.ts  |  4 +++
 .../content/App/Contribute/Preview/index.tsx  |  3 --
 .../PreviewScreen.stories.tsx                 |  4 ++-
 .../PreviewScreen.tsx                         | 14 +++-----
 .../App/Contribute/PreviewScreen/index.tsx    |  9 +++++
 .../withConnect.ts}                           | 23 +++++--------
 .../Contribute/PreviewScreen/withReduxForm.ts | 12 +++++++
 .../App/Contribute/PreviewScreen/withTitle.ts |  4 +++
 .../SubmitContributionForm.container.ts       | 34 -------------------
 .../Submit/SubmitContributionForm/index.ts    |  7 ----
 .../SubmitContributionScreen.container.tsx    |  4 ---
 .../App/Contribute/Submit/Textarea.tsx        |  7 ----
 .../content/App/Contribute/Submit/index.ts    |  3 --
 .../App/Contribute/Submitted/index.tsx        |  3 --
 .../Container.ts                              |  0
 .../{Submitted => SubmittedScreen}/Content.ts |  0
 .../ContentTitle.ts                           |  0
 .../Illustration.tsx                          |  0
 .../SubmittedScreen.stories.tsx}              |  4 +--
 .../SubmittedScreen.tsx}                      |  0
 .../App/Contribute/SubmittedScreen/index.tsx  |  4 +++
 .../withConnect.ts}                           |  7 ++--
 src/app/content/App/Contribute/index.tsx      |  8 ++---
 src/app/content/selectors/index.ts            |  8 +++--
 .../atoms/Forms/Textarea/Textarea.ts          |  1 -
 .../NoticeDetails/DetailsContainer.ts         |  1 -
 33 files changed, 110 insertions(+), 110 deletions(-)
 rename src/app/content/App/Contribute/{Submit/SubmitContributionScreen.stories.tsx => ContributeScreen/ContributeScreen.stories.tsx} (75%)
 rename src/app/content/App/Contribute/{Submit/SubmitContributionScreen.tsx => ContributeScreen/ContributeScreen.tsx} (70%)
 rename src/app/content/App/Contribute/{Submit => ContributeScreen}/SubmitContributionForm/SubmitContributionForm.stories.tsx (55%)
 rename src/app/content/App/Contribute/{Submit => ContributeScreen}/SubmitContributionForm/SubmitContributionForm.tsx (90%)
 create mode 100644 src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/index.ts
 create mode 100644 src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/withConnect.ts
 create mode 100644 src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/withReduxForm.ts
 create mode 100644 src/app/content/App/Contribute/ContributeScreen/index.ts
 delete mode 100644 src/app/content/App/Contribute/Preview/index.tsx
 rename src/app/content/App/Contribute/{Preview => PreviewScreen}/PreviewScreen.stories.tsx (89%)
 rename src/app/content/App/Contribute/{Preview => PreviewScreen}/PreviewScreen.tsx (82%)
 create mode 100644 src/app/content/App/Contribute/PreviewScreen/index.tsx
 rename src/app/content/App/Contribute/{Preview/PreviewScreen.container.tsx => PreviewScreen/withConnect.ts} (51%)
 create mode 100644 src/app/content/App/Contribute/PreviewScreen/withReduxForm.ts
 create mode 100644 src/app/content/App/Contribute/PreviewScreen/withTitle.ts
 delete mode 100644 src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.container.ts
 delete mode 100644 src/app/content/App/Contribute/Submit/SubmitContributionForm/index.ts
 delete mode 100644 src/app/content/App/Contribute/Submit/SubmitContributionScreen.container.tsx
 delete mode 100644 src/app/content/App/Contribute/Submit/Textarea.tsx
 delete mode 100644 src/app/content/App/Contribute/Submit/index.ts
 delete mode 100644 src/app/content/App/Contribute/Submitted/index.tsx
 rename src/app/content/App/Contribute/{Submitted => SubmittedScreen}/Container.ts (100%)
 rename src/app/content/App/Contribute/{Submitted => SubmittedScreen}/Content.ts (100%)
 rename src/app/content/App/Contribute/{Submitted => SubmittedScreen}/ContentTitle.ts (100%)
 rename src/app/content/App/Contribute/{Submitted => SubmittedScreen}/Illustration.tsx (100%)
 rename src/app/content/App/Contribute/{Submitted/ContributionSubmittedScreen.stories.tsx => SubmittedScreen/SubmittedScreen.stories.tsx} (89%)
 rename src/app/content/App/Contribute/{Submitted/ContributionSubmittedScreen.tsx => SubmittedScreen/SubmittedScreen.tsx} (100%)
 create mode 100644 src/app/content/App/Contribute/SubmittedScreen/index.tsx
 rename src/app/content/App/Contribute/{Submitted/ContributionSubmittedScreen.container.tsx => SubmittedScreen/withConnect.ts} (60%)

diff --git a/src/app/content/App/Contribute/Submit/SubmitContributionScreen.stories.tsx b/src/app/content/App/Contribute/ContributeScreen/ContributeScreen.stories.tsx
similarity index 75%
rename from src/app/content/App/Contribute/Submit/SubmitContributionScreen.stories.tsx
rename to src/app/content/App/Contribute/ContributeScreen/ContributeScreen.stories.tsx
index f9b4fa415..9e113f20e 100644
--- a/src/app/content/App/Contribute/Submit/SubmitContributionScreen.stories.tsx
+++ b/src/app/content/App/Contribute/ContributeScreen/ContributeScreen.stories.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { MemoryRouter as Router } from 'react-router-dom';
-import SubmitContributionScreen from './SubmitContributionScreen';
 import Notification from 'components/organisms/Notification';
+import ContributeScreen from './ContributeScreen';
 
 storiesOf('screens/Contribute/Submit', module)
   .addDecorator(getStory => (
@@ -10,4 +10,4 @@ storiesOf('screens/Contribute/Submit', module)
       <Notification title="créer une bulle ici">{getStory()}</Notification>
     </Router>
   ))
-  .add('normal', () => <SubmitContributionScreen />);
+  .add('normal', () => <ContributeScreen />);
diff --git a/src/app/content/App/Contribute/Submit/SubmitContributionScreen.tsx b/src/app/content/App/Contribute/ContributeScreen/ContributeScreen.tsx
similarity index 70%
rename from src/app/content/App/Contribute/Submit/SubmitContributionScreen.tsx
rename to src/app/content/App/Contribute/ContributeScreen/ContributeScreen.tsx
index aab45bf84..c21c9eb72 100644
--- a/src/app/content/App/Contribute/Submit/SubmitContributionScreen.tsx
+++ b/src/app/content/App/Contribute/ContributeScreen/ContributeScreen.tsx
@@ -3,10 +3,10 @@ import React from 'react';
 import { ContentWrapper } from 'components/atoms';
 import SubmitContributionForm from './SubmitContributionForm';
 
-export const SubmitContributionScreen = () => (
+export const ContributeScreen = () => (
   <ContentWrapper>
     <SubmitContributionForm />
   </ContentWrapper>
 );
 
-export default SubmitContributionScreen;
+export default ContributeScreen;
diff --git a/src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.stories.tsx b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.stories.tsx
similarity index 55%
rename from src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.stories.tsx
rename to src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.stories.tsx
index b7c879a36..6d3d6ac72 100644
--- a/src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.stories.tsx
+++ b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.stories.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { MemoryRouter as Router } from 'react-router-dom';
 import { storiesOf } from '@storybook/react';
-import SubmitContribution from './';
+import { action } from '@storybook/addon-actions';
+import SubmitContribution from './SubmitContributionForm';
 
 storiesOf('forms/SubmitContribution', module)
   .addDecorator(getStory => <Router>{getStory()}</Router>)
-  .add('normal', () => <SubmitContribution />);
+  .add('normal', () => <SubmitContribution onSubmit={action('onSubmit')} />);
diff --git a/src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.tsx b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.tsx
similarity index 90%
rename from src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.tsx
rename to src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.tsx
index 82cbdefec..859f21ea0 100644
--- a/src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.tsx
+++ b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.tsx
@@ -9,6 +9,7 @@ import {
   TextareaField
 } from 'components/organisms/Fields';
 import { Contribution } from 'app/lmem/notice';
+import withReduxForm from './withReduxForm';
 
 export interface SubmitContributionFormOwnProps {
   onSubmit: (...args: any[]) => void;
@@ -20,9 +21,7 @@ export type SubmitContributionFormProps = InjectedFormProps<
 > &
   SubmitContributionFormOwnProps;
 
-export default class SubmitContributionForm extends Component<
-  SubmitContributionFormProps
-> {
+class SubmitContributionForm extends Component<SubmitContributionFormProps> {
   get isButtonDisabled() {
     return !this.props.valid || this.props.submitting;
   }
@@ -48,6 +47,7 @@ export default class SubmitContributionForm extends Component<
         <Field
           name="message"
           placeholder="Ecrire le message que vous souhaitez publier"
+          rows={5}
           component={TextareaField}
         />
         <CenterContainer>
@@ -65,3 +65,5 @@ export default class SubmitContributionForm extends Component<
     );
   }
 }
+
+export default withReduxForm(SubmitContributionForm);
diff --git a/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/index.ts b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/index.ts
new file mode 100644
index 000000000..4cbb34a84
--- /dev/null
+++ b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/index.ts
@@ -0,0 +1,4 @@
+import withConnect from './withConnect';
+import SubmitContributionForm from './SubmitContributionForm';
+
+export default withConnect(SubmitContributionForm);
diff --git a/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/withConnect.ts b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/withConnect.ts
new file mode 100644
index 000000000..964696bfb
--- /dev/null
+++ b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/withConnect.ts
@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+import { push } from 'connected-react-router';
+import { Intention } from 'app/lmem/intention';
+import { State } from 'app/content/store';
+import { getURL } from 'app/content/selectors';
+
+export default connect(
+  (state: State) => ({
+    initialValues: {
+      intention: 'approval' as Intention,
+      url: getURL(state),
+      created: new Date()
+    }
+  }),
+  {
+    onSubmit: () => push('/contribute/preview')
+  }
+);
diff --git a/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/withReduxForm.ts b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/withReduxForm.ts
new file mode 100644
index 000000000..157724640
--- /dev/null
+++ b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/withReduxForm.ts
@@ -0,0 +1,13 @@
+import { reduxForm } from 'redux-form';
+import validate from 'app/lmem/contribution/validateForm';
+import { Contribution } from 'app/lmem/notice';
+import { SubmitContributionFormOwnProps } from './SubmitContributionForm';
+
+export const form = 'contribution';
+
+export default reduxForm<Contribution, SubmitContributionFormOwnProps>({
+  form,
+  destroyOnUnmount: false,
+  forceUnregisterOnUnmount: true,
+  validate
+});
diff --git a/src/app/content/App/Contribute/ContributeScreen/index.ts b/src/app/content/App/Contribute/ContributeScreen/index.ts
new file mode 100644
index 000000000..c8609ec4b
--- /dev/null
+++ b/src/app/content/App/Contribute/ContributeScreen/index.ts
@@ -0,0 +1,4 @@
+import withTitle from 'app/hocs/withTitle';
+import ContributeScreen from './ContributeScreen';
+
+export default withTitle('créer une bulle ici')(ContributeScreen);
diff --git a/src/app/content/App/Contribute/Preview/index.tsx b/src/app/content/App/Contribute/Preview/index.tsx
deleted file mode 100644
index b6dc9fc16..000000000
--- a/src/app/content/App/Contribute/Preview/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import PreviewScreen from './PreviewScreen.container';
-
-export default PreviewScreen;
diff --git a/src/app/content/App/Contribute/Preview/PreviewScreen.stories.tsx b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.stories.tsx
similarity index 89%
rename from src/app/content/App/Contribute/Preview/PreviewScreen.stories.tsx
rename to src/app/content/App/Contribute/PreviewScreen/PreviewScreen.stories.tsx
index 9572decca..f2b521e21 100644
--- a/src/app/content/App/Contribute/Preview/PreviewScreen.stories.tsx
+++ b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.stories.tsx
@@ -8,7 +8,9 @@ import { action } from '@storybook/addon-actions';
 storiesOf('screens/Contribute/Preview', module)
   .addDecorator(getStory => (
     <Router>
-      <Notification title="Prévisualisation">{getStory()}</Notification>
+      <Notification title="Prévisualisation" hasNotices>
+        {getStory()}
+      </Notification>
     </Router>
   ))
   .add('normal', () => (
diff --git a/src/app/content/App/Contribute/Preview/PreviewScreen.tsx b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx
similarity index 82%
rename from src/app/content/App/Contribute/Preview/PreviewScreen.tsx
rename to src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx
index 16c4940b2..91e7dfb38 100644
--- a/src/app/content/App/Contribute/Preview/PreviewScreen.tsx
+++ b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { InjectedFormProps, reduxForm } from 'redux-form';
+import { InjectedFormProps } from 'redux-form';
 import styled from 'styled-components';
 
 import { Contribution } from 'app/lmem/notice';
@@ -7,14 +7,15 @@ import NoticePreview from 'components/organisms/NoticePreview';
 import { BorderButton, Button } from 'components/atoms';
 import { Error, Form } from 'components/atoms/Forms';
 import handleFormSubmit from 'app/utils/form/handleFormSubmit';
-import validate from 'app/lmem/contribution/validateForm';
-import { form } from '../Submit/SubmitContributionForm';
+import withReduxForm from './withReduxForm';
 
 const PreviewForm = styled(Form)`
   padding: 12px 16px 12px 16px;
   display: flex;
   justify-content: space-around;
   width: 50%;
+  self-align: center;
+  align-self: center;
 `;
 
 export interface PreviewScreenOwnProps {
@@ -68,9 +69,4 @@ class PreviewScreen extends Component<PreviewScreenProps> {
   }
 }
 
-export default reduxForm<Contribution, PreviewScreenOwnProps>({
-  form,
-  destroyOnUnmount: false,
-  forceUnregisterOnUnmount: true,
-  validate
-})(PreviewScreen);
+export default withReduxForm(PreviewScreen);
diff --git a/src/app/content/App/Contribute/PreviewScreen/index.tsx b/src/app/content/App/Contribute/PreviewScreen/index.tsx
new file mode 100644
index 000000000..4764c3484
--- /dev/null
+++ b/src/app/content/App/Contribute/PreviewScreen/index.tsx
@@ -0,0 +1,9 @@
+import { compose } from 'redux';
+import withTitle from './withTitle';
+import withConnect from './withConnect';
+import PreviewScreen from './PreviewScreen';
+
+export default compose(
+  withConnect,
+  withTitle
+)(PreviewScreen);
diff --git a/src/app/content/App/Contribute/Preview/PreviewScreen.container.tsx b/src/app/content/App/Contribute/PreviewScreen/withConnect.ts
similarity index 51%
rename from src/app/content/App/Contribute/Preview/PreviewScreen.container.tsx
rename to src/app/content/App/Contribute/PreviewScreen/withConnect.ts
index fab178c44..0b5a9b39a 100644
--- a/src/app/content/App/Contribute/Preview/PreviewScreen.container.tsx
+++ b/src/app/content/App/Contribute/PreviewScreen/withConnect.ts
@@ -1,13 +1,9 @@
 import { connect } from 'react-redux';
-import { compose } from 'redux';
 import { goBack } from 'connected-react-router';
-
-import withTitle from 'app/hocs/withTitle';
+import { State } from 'app/content/store';
+import { getContribution } from 'app/content/selectors';
 import { close } from 'app/actions/ui';
 import { submitContribution } from 'app/actions/contribution';
-import { getContribution } from 'app/content/selectors';
-import { State } from 'app/content/store';
-import PreviewScreen, { PreviewScreenOwnProps } from './PreviewScreen';
 
 const mapDispatchToProps = {
   close,
@@ -15,12 +11,9 @@ const mapDispatchToProps = {
   publish: submitContribution
 };
 
-export default compose(
-  connect(
-    (state: State) => ({
-      contribution: getContribution(state)
-    }),
-    mapDispatchToProps
-  ),
-  withTitle<PreviewScreenOwnProps>('Prévisualisation')
-)(PreviewScreen);
+export default connect(
+  (state: State) => ({
+    contribution: getContribution(state)
+  }),
+  mapDispatchToProps
+);
diff --git a/src/app/content/App/Contribute/PreviewScreen/withReduxForm.ts b/src/app/content/App/Contribute/PreviewScreen/withReduxForm.ts
new file mode 100644
index 000000000..f44e6fa64
--- /dev/null
+++ b/src/app/content/App/Contribute/PreviewScreen/withReduxForm.ts
@@ -0,0 +1,12 @@
+import { reduxForm } from 'redux-form';
+import { Contribution } from 'app/lmem/notice';
+import { form } from '../ContributeScreen/SubmitContributionForm/withReduxForm';
+import validate from 'app/lmem/contribution/validateForm';
+import { PreviewScreenOwnProps } from './PreviewScreen';
+
+export default reduxForm<Contribution, PreviewScreenOwnProps>({
+  form,
+  destroyOnUnmount: false,
+  forceUnregisterOnUnmount: true,
+  validate
+});
diff --git a/src/app/content/App/Contribute/PreviewScreen/withTitle.ts b/src/app/content/App/Contribute/PreviewScreen/withTitle.ts
new file mode 100644
index 000000000..55da34775
--- /dev/null
+++ b/src/app/content/App/Contribute/PreviewScreen/withTitle.ts
@@ -0,0 +1,4 @@
+import withTitle from '../../../../hocs/withTitle';
+import { PreviewScreenOwnProps } from './PreviewScreen';
+
+export default withTitle<PreviewScreenOwnProps>('Prévisualisation');
diff --git a/src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.container.ts b/src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.container.ts
deleted file mode 100644
index 32888b77f..000000000
--- a/src/app/content/App/Contribute/Submit/SubmitContributionForm/SubmitContributionForm.container.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { connect } from 'react-redux';
-import { reduxForm } from 'redux-form';
-
-import SubmitContributionForm, {
-  SubmitContributionFormOwnProps
-} from './SubmitContributionForm';
-import { Contribution } from 'app/lmem/notice';
-import { getURL } from 'app/content/selectors';
-import { State } from 'app/content/store';
-import validate from 'app/lmem/contribution/validateForm';
-import { push } from 'connected-react-router';
-
-export const form = 'contribution';
-
-export default connect(
-  (state: State) => ({
-    initialValues: {
-      intention: 'approval',
-      url: getURL(state),
-      created: new Date()
-    }
-  }),
-  {
-    onSubmit: () => push('/contribute/preview')
-  }
-)(
-  // @ts-ignore
-  reduxForm<Contribution, SubmitContributionFormOwnProps>({
-    form,
-    destroyOnUnmount: false,
-    forceUnregisterOnUnmount: true,
-    validate
-  })(SubmitContributionForm)
-);
diff --git a/src/app/content/App/Contribute/Submit/SubmitContributionForm/index.ts b/src/app/content/App/Contribute/Submit/SubmitContributionForm/index.ts
deleted file mode 100644
index 8158c3dd3..000000000
--- a/src/app/content/App/Contribute/Submit/SubmitContributionForm/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import SubmitContributionForm, {
-  form
-} from './SubmitContributionForm.container';
-
-export { form };
-
-export default SubmitContributionForm;
diff --git a/src/app/content/App/Contribute/Submit/SubmitContributionScreen.container.tsx b/src/app/content/App/Contribute/Submit/SubmitContributionScreen.container.tsx
deleted file mode 100644
index fc8c4caf5..000000000
--- a/src/app/content/App/Contribute/Submit/SubmitContributionScreen.container.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import withTitle from 'app/hocs/withTitle';
-import SubmitContributionScreen from './SubmitContributionScreen';
-
-export default withTitle('créer une bulle ici')(SubmitContributionScreen);
diff --git a/src/app/content/App/Contribute/Submit/Textarea.tsx b/src/app/content/App/Contribute/Submit/Textarea.tsx
deleted file mode 100644
index 740ce6a55..000000000
--- a/src/app/content/App/Contribute/Submit/Textarea.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import Button from 'components/atoms/Forms/Textarea/Textarea';
-
-export default styled(Button)`
-  height: 154px;
-`;
diff --git a/src/app/content/App/Contribute/Submit/index.ts b/src/app/content/App/Contribute/Submit/index.ts
deleted file mode 100644
index 8fdd02cf8..000000000
--- a/src/app/content/App/Contribute/Submit/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import SubmitContributionScreen from './SubmitContributionScreen.container';
-
-export default SubmitContributionScreen;
diff --git a/src/app/content/App/Contribute/Submitted/index.tsx b/src/app/content/App/Contribute/Submitted/index.tsx
deleted file mode 100644
index d10f29547..000000000
--- a/src/app/content/App/Contribute/Submitted/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import ContributionSubmittedScreen from './ContributionSubmittedScreen.container';
-
-export default ContributionSubmittedScreen;
diff --git a/src/app/content/App/Contribute/Submitted/Container.ts b/src/app/content/App/Contribute/SubmittedScreen/Container.ts
similarity index 100%
rename from src/app/content/App/Contribute/Submitted/Container.ts
rename to src/app/content/App/Contribute/SubmittedScreen/Container.ts
diff --git a/src/app/content/App/Contribute/Submitted/Content.ts b/src/app/content/App/Contribute/SubmittedScreen/Content.ts
similarity index 100%
rename from src/app/content/App/Contribute/Submitted/Content.ts
rename to src/app/content/App/Contribute/SubmittedScreen/Content.ts
diff --git a/src/app/content/App/Contribute/Submitted/ContentTitle.ts b/src/app/content/App/Contribute/SubmittedScreen/ContentTitle.ts
similarity index 100%
rename from src/app/content/App/Contribute/Submitted/ContentTitle.ts
rename to src/app/content/App/Contribute/SubmittedScreen/ContentTitle.ts
diff --git a/src/app/content/App/Contribute/Submitted/Illustration.tsx b/src/app/content/App/Contribute/SubmittedScreen/Illustration.tsx
similarity index 100%
rename from src/app/content/App/Contribute/Submitted/Illustration.tsx
rename to src/app/content/App/Contribute/SubmittedScreen/Illustration.tsx
diff --git a/src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.stories.tsx b/src/app/content/App/Contribute/SubmittedScreen/SubmittedScreen.stories.tsx
similarity index 89%
rename from src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.stories.tsx
rename to src/app/content/App/Contribute/SubmittedScreen/SubmittedScreen.stories.tsx
index 2de86203d..f08b820e2 100644
--- a/src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.stories.tsx
+++ b/src/app/content/App/Contribute/SubmittedScreen/SubmittedScreen.stories.tsx
@@ -3,7 +3,7 @@ import { MemoryRouter as Router } from 'react-router-dom';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import Notification from 'components/organisms/Notification';
-import ContributionSubmittedScreen from './ContributionSubmittedScreen';
+import SubmittedScreen from './SubmittedScreen';
 
 storiesOf('screens/Contribute/Submitted', module)
   .addDecorator(getStory => (
@@ -12,7 +12,7 @@ storiesOf('screens/Contribute/Submitted', module)
     </Router>
   ))
   .add('normal', () => (
-    <ContributionSubmittedScreen
+    <SubmittedScreen
       close={action('close')}
       goBack={action('goBack')}
       contribution={{
diff --git a/src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.tsx b/src/app/content/App/Contribute/SubmittedScreen/SubmittedScreen.tsx
similarity index 100%
rename from src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.tsx
rename to src/app/content/App/Contribute/SubmittedScreen/SubmittedScreen.tsx
diff --git a/src/app/content/App/Contribute/SubmittedScreen/index.tsx b/src/app/content/App/Contribute/SubmittedScreen/index.tsx
new file mode 100644
index 000000000..25e0fcb73
--- /dev/null
+++ b/src/app/content/App/Contribute/SubmittedScreen/index.tsx
@@ -0,0 +1,4 @@
+import SubmittedScreen from './SubmittedScreen';
+import withConnect from './withConnect';
+
+export default withConnect(SubmittedScreen);
diff --git a/src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.container.tsx b/src/app/content/App/Contribute/SubmittedScreen/withConnect.ts
similarity index 60%
rename from src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.container.tsx
rename to src/app/content/App/Contribute/SubmittedScreen/withConnect.ts
index 35929472f..ed0f968ed 100644
--- a/src/app/content/App/Contribute/Submitted/ContributionSubmittedScreen.container.tsx
+++ b/src/app/content/App/Contribute/SubmittedScreen/withConnect.ts
@@ -1,10 +1,9 @@
 import { connect } from 'react-redux';
+import { replace } from 'connected-react-router';
 
-import ContributionSubmittedScreen from './ContributionSubmittedScreen';
-import { history, State } from 'app/content/store';
 import { close } from 'app/actions/ui';
+import { State } from 'app/content/store';
 import { getContribution } from 'app/content/selectors';
-import { go, replace } from 'connected-react-router';
 
 const mapDispatchToProps = {
   close,
@@ -16,4 +15,4 @@ export default connect(
     contribution: getContribution(state)
   }),
   mapDispatchToProps
-)(ContributionSubmittedScreen);
+);
diff --git a/src/app/content/App/Contribute/index.tsx b/src/app/content/App/Contribute/index.tsx
index 55dbcedb8..6d4106a41 100644
--- a/src/app/content/App/Contribute/index.tsx
+++ b/src/app/content/App/Contribute/index.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { Route, RouteComponentProps, Switch } from 'react-router-dom';
-import SubmitScreen from './Submit';
-import SubmittedScreen from './Submitted';
-import PreviewScreen from './Preview';
+import ContributeScreen from './ContributeScreen';
+import SubmittedScreen from './SubmittedScreen';
+import PreviewScreen from './PreviewScreen';
 
 export default ({ match }: RouteComponentProps) => (
   <Switch>
-    <Route path={match.url} exact component={SubmitScreen} />
+    <Route path={match.url} exact component={ContributeScreen} />
     <Route path={`${match.url}/preview`} component={PreviewScreen} />
     <Route path={`${match.url}/submitted`} component={SubmittedScreen} />
   </Switch>
diff --git a/src/app/content/selectors/index.ts b/src/app/content/selectors/index.ts
index 8891030fd..3a0549270 100644
--- a/src/app/content/selectors/index.ts
+++ b/src/app/content/selectors/index.ts
@@ -60,13 +60,15 @@ export const getTab = (state: ContentState) => state.tab;
 
 export const getURL = (state: State) => {
   const tab = getTab(state);
-  return tab ? tab.url : null;
+  return tab ? tab.url : '';
 };
 
 export const getPathname = (state: ContentState) => getLocation(state).pathname;
 
-export const isNoticeContext = (state: ContentState) =>
-  getPathname(state).includes('notice');
+export const isNoticeContext = (state: ContentState) => {
+  const pathname = getPathname(state);
+  return pathname.includes('notice') || pathname.includes('preview');
+};
 
 export const getContribution = (state: State): Contribution =>
   // @ts-ignore
diff --git a/src/components/atoms/Forms/Textarea/Textarea.ts b/src/components/atoms/Forms/Textarea/Textarea.ts
index de61dda89..fb36d32f6 100644
--- a/src/components/atoms/Forms/Textarea/Textarea.ts
+++ b/src/components/atoms/Forms/Textarea/Textarea.ts
@@ -7,7 +7,6 @@ interface Props {
 export default styled.textarea<Props>`
   box-sizing: border-box;
   width: 100%;
-  height: 87px;
   margin-bottom: 10px;
   padding: 8px 10px 10px 14px;
   font-size: 13px;
diff --git a/src/components/organisms/NoticeDetails/DetailsContainer.ts b/src/components/organisms/NoticeDetails/DetailsContainer.ts
index 514cb4ec1..c3e7966e2 100644
--- a/src/components/organisms/NoticeDetails/DetailsContainer.ts
+++ b/src/components/organisms/NoticeDetails/DetailsContainer.ts
@@ -3,7 +3,6 @@ import styled from 'styled-components';
 export default styled.article`
   box-sizing: border-box;
   display: flex;
-  align-items: center;
   flex-direction: column;
   height: 100%;
   font-size: 16px;

From c152a0420f51119451df4f1d732e92f11fb89669 Mon Sep 17 00:00:00 2001
From: lutangar <johan.dufour@gmail.com>
Date: Thu, 11 Jul 2019 11:03:04 +0200
Subject: [PATCH 08/19] fix(stories): fix AddNoticeLink story

---
 src/app/background/sagas/index.ts               | 14 ++++++--------
 .../SubmitContributionForm.tsx                  |  3 +--
 src/app/content/App/Help/index.tsx              |  2 +-
 src/components/atoms/Button/Button.tsx          |  4 ++++
 .../atoms/Buttons/BorderButton/BorderButton.ts  | 17 -----------------
 5 files changed, 12 insertions(+), 28 deletions(-)
 delete mode 100644 src/components/atoms/Buttons/BorderButton/BorderButton.ts

diff --git a/src/app/background/sagas/index.ts b/src/app/background/sagas/index.ts
index 88e378506..643334d30 100644
--- a/src/app/background/sagas/index.ts
+++ b/src/app/background/sagas/index.ts
@@ -1,16 +1,15 @@
 import { fork, all } from 'redux-saga/effects';
 import tab from './tab';
 import badge from './badge';
-import contribution from './contribution';
 import externalMessage from './externalMessage';
 import theme from '../../theme';
 import error from '../../sagas/error';
 import listenActionsFromMessages from '../../sagas/listenActionsFromMessages';
 import refreshMatchingContexts from './refreshMatchingContexts';
 import refreshContributors from './refreshContributors';
-import watchBrowserActionSaga from './browserAction.saga';
-import openOptionsWhenRequestedSaga from './openOptions.saga';
-import sendContributorsToOptionsSaga from './sendContributorsToOptions.saga';
+import browserAction from './browserAction.saga';
+import openOptions from './openOptions.saga';
+import sendContributorsToOptions from './sendContributorsToOptions.saga';
 
 export default function* rootSaga() {
   yield all([
@@ -19,11 +18,10 @@ export default function* rootSaga() {
     fork(tab),
     fork(badge(theme.badge)),
     fork(listenActionsFromMessages('background')),
-    fork(contribution),
     fork(externalMessage),
-    fork(watchBrowserActionSaga),
-    fork(openOptionsWhenRequestedSaga),
-    fork(sendContributorsToOptionsSaga),
+    fork(browserAction),
+    fork(openOptions),
+    fork(sendContributorsToOptions),
     fork(error)
   ]);
 }
diff --git a/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.tsx b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.tsx
index 859f21ea0..eaaf668a5 100644
--- a/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.tsx
+++ b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.tsx
@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
 import { Field, InjectedFormProps } from 'redux-form';
 import { Form, Error } from 'components/atoms/Forms';
-import { CenterContainer } from 'components/atoms';
-import BorderButton from 'components/atoms/Buttons/BorderButton';
+import { CenterContainer, BorderButton } from 'components/atoms';
 import {
   InputField,
   IntentionsSelectorField,
diff --git a/src/app/content/App/Help/index.tsx b/src/app/content/App/Help/index.tsx
index 923be1b0f..c34b8e0c6 100644
--- a/src/app/content/App/Help/index.tsx
+++ b/src/app/content/App/Help/index.tsx
@@ -35,7 +35,7 @@ export const Help = () => (
     <ContentTitle>Contacter le support de Le Même En Mieux</ContentTitle>
 
     <form>
-      <Textarea placeholder="Écrire votre message ici" required />
+      <Textarea rows={5} placeholder="Écrire votre message ici" required />
 
       <CenterContainer>
         <BorderButton>Envoyer</BorderButton>
diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx
index 56c8c6c5d..c2e97faa5 100644
--- a/src/components/atoms/Button/Button.tsx
+++ b/src/components/atoms/Button/Button.tsx
@@ -9,15 +9,19 @@ export interface ButtonContainerProps
   extends HTMLAttributes<HTMLButtonElement> {
   theme?: Theme;
   href?: string;
+  to?: string;
   target?: '_blank';
   rel?: string;
   className?: string;
+  disabled?: boolean;
+  type?: 'submit' | 'reset' | 'button';
 }
 
 export interface ButtonProps extends ButtonContainerProps {
   loading?: boolean;
   children?: ReactNode | string;
   disabled?: boolean;
+  dangerouslySetInnerHTML?: any;
 }
 
 export const ButtonContainer = styled.button<ButtonContainerProps>`
diff --git a/src/components/atoms/Buttons/BorderButton/BorderButton.ts b/src/components/atoms/Buttons/BorderButton/BorderButton.ts
deleted file mode 100644
index e84429f06..000000000
--- a/src/components/atoms/Buttons/BorderButton/BorderButton.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-import Button, { ButtonProps } from '../../Button';
-
-export default styled(Button)<ButtonProps>`
-  height: 28px;
-  padding: 5px 12px;
-  font-size: 15px;
-  color: ${props => props.theme.button};
-  text-decoration: none;
-  background-color: #fff;
-  border: 2px solid ${props => props.theme.button};
-
-  &:hover {
-    color: #fff;
-    background-color: ${props => props.theme.button};
-  }
-`;

From a7d2426e36711edf36dc2bcc53a54299f3feb05e Mon Sep 17 00:00:00 2001
From: lutangar <johan.dufour@gmail.com>
Date: Sun, 4 Aug 2019 20:09:08 +0200
Subject: [PATCH 09/19] feat(contribution-form): show form errors when a field
 is touched and invalid

---
 .../SubmitContributionForm.tsx                |  4 +--
 src/app/lmem/contribution/validate.ts         | 27 +++++++++----------
 .../AddNoticeButton.stories.tsx               |  7 ++---
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.tsx b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.tsx
index eaaf668a5..418f95312 100644
--- a/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.tsx
+++ b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.tsx
@@ -26,7 +26,7 @@ class SubmitContributionForm extends Component<SubmitContributionFormProps> {
   }
 
   render() {
-    const { handleSubmit, submitting, error, dirty } = this.props;
+    const { handleSubmit, submitting, error, anyTouched } = this.props;
     return (
       <Form onSubmit={handleSubmit}>
         <Field name="url" type="hidden" component={InputField} />
@@ -59,7 +59,7 @@ class SubmitContributionForm extends Component<SubmitContributionFormProps> {
           </BorderButton>
         </CenterContainer>
 
-        {dirty && error && <Error>{error}</Error>}
+        {anyTouched && error && <Error>{error}</Error>}
       </Form>
     );
   }
diff --git a/src/app/lmem/contribution/validate.ts b/src/app/lmem/contribution/validate.ts
index f53739b76..b825b5646 100644
--- a/src/app/lmem/contribution/validate.ts
+++ b/src/app/lmem/contribution/validate.ts
@@ -14,23 +14,22 @@ export default (contribution: Contribution): Errors => {
   });
 
   const { contributor } = contribution;
-  if (contributor) {
-    errors.contributor = {};
-    if (!contributor.name) {
-      errors.contributor.name = requiredFieldMessage;
-    }
 
-    if (!contributor.email) {
-      errors.contributor.email = requiredFieldMessage;
-    }
+  errors.contributor = {};
+  if (!contributor || !contributor.name) {
+    errors.contributor.name = requiredFieldMessage;
+  }
 
-    if (contributor.email && !isEmail(contributor.email)) {
-      errors.contributor.email = "L'email n'est pas valide";
-    }
+  if (!contributor || !contributor.email) {
+    errors.contributor.email = requiredFieldMessage;
+  }
 
-    if (Object.keys(errors.contributor).length === 0) {
-      delete errors.contributor;
-    }
+  if (contributor && contributor.email && !isEmail(contributor.email)) {
+    errors.contributor.email = "L'email n'est pas valide";
+  }
+
+  if (Object.keys(errors.contributor).length === 0) {
+    delete errors.contributor;
   }
 
   return errors;
diff --git a/src/components/atoms/Button/AddNoticeButton/AddNoticeButton.stories.tsx b/src/components/atoms/Button/AddNoticeButton/AddNoticeButton.stories.tsx
index 839fabb87..65b9fd1b4 100644
--- a/src/components/atoms/Button/AddNoticeButton/AddNoticeButton.stories.tsx
+++ b/src/components/atoms/Button/AddNoticeButton/AddNoticeButton.stories.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
+import { MemoryRouter as Router } from 'react-router';
 import { storiesOf } from '@storybook/react';
 import AddNoticeButton from './AddNoticeButton';
 
-storiesOf('atoms/Buttons/AddNoticeButton', module).add('normal', () => (
-  <AddNoticeButton />
-));
+storiesOf('atoms/Buttons/AddNoticeButton', module)
+  .addDecorator(getStory => <Router>{getStory()}</Router>)
+  .add('normal', () => <AddNoticeButton />);

From 2501aa7691d0f153f26de1823f76dc314e967502 Mon Sep 17 00:00:00 2001
From: lutangar <johan.dufour@gmail.com>
Date: Fri, 16 Aug 2019 11:05:20 +0200
Subject: [PATCH 10/19] feat(contribution-form): find global error manually
 depending on each fields state

---
 .../ContributeScreen/FormErrors.tsx           | 21 ++++++++++
 .../SubmitContributionForm.stories.tsx        |  4 +-
 .../SubmitContributionForm.tsx                |  9 +++--
 .../SubmitContributionForm/withConnect.ts     |  6 ++-
 .../PreviewScreen/PreviewScreen.stories.tsx   |  1 +
 .../PreviewScreen/PreviewScreen.tsx           | 11 ++---
 .../Contribute/PreviewScreen/withConnect.ts   |  6 ++-
 src/app/content/selectors/index.ts            | 40 ++++++++++++++++++-
 src/app/content/store.ts                      |  2 +
 src/app/lmem/contribution/validate.ts         | 31 +++++++-------
 src/app/utils/form/FormMeta.ts                |  5 +++
 .../utils/form/getRegisteredFieldsPaths.ts    |  6 +++
 src/app/utils/form/index.ts                   |  4 ++
 13 files changed, 115 insertions(+), 31 deletions(-)
 create mode 100644 src/app/content/App/Contribute/ContributeScreen/FormErrors.tsx
 create mode 100644 src/app/utils/form/FormMeta.ts
 create mode 100644 src/app/utils/form/getRegisteredFieldsPaths.ts

diff --git a/src/app/content/App/Contribute/ContributeScreen/FormErrors.tsx b/src/app/content/App/Contribute/ContributeScreen/FormErrors.tsx
new file mode 100644
index 000000000..571263d7c
--- /dev/null
+++ b/src/app/content/App/Contribute/ContributeScreen/FormErrors.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Error } from 'components/atoms/Forms';
+
+export interface FormErrorsProps {
+  errors: string[];
+  globalError: string;
+}
+
+export const FormErrors = ({ errors, globalError }: FormErrorsProps) => {
+  if (errors.length > 0) {
+    if (errors.length === 1) {
+      return <Error>{errors[0]}</Error>;
+    }
+
+    return <Error>{globalError}</Error>;
+  }
+
+  return null;
+};
+
+export default FormErrors;
diff --git a/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.stories.tsx b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.stories.tsx
index 6d3d6ac72..3213032c7 100644
--- a/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.stories.tsx
+++ b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.stories.tsx
@@ -6,4 +6,6 @@ import SubmitContribution from './SubmitContributionForm';
 
 storiesOf('forms/SubmitContribution', module)
   .addDecorator(getStory => <Router>{getStory()}</Router>)
-  .add('normal', () => <SubmitContribution onSubmit={action('onSubmit')} />);
+  .add('normal', () => (
+    <SubmitContribution onSubmit={action('onSubmit')} errors={[]} />
+  ));
diff --git a/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.tsx b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.tsx
index 418f95312..beb21a4d0 100644
--- a/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.tsx
+++ b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/SubmitContributionForm.tsx
@@ -1,17 +1,19 @@
 import React, { Component } from 'react';
 import { Field, InjectedFormProps } from 'redux-form';
-import { Form, Error } from 'components/atoms/Forms';
+import { Form } from 'components/atoms/Forms';
 import { CenterContainer, BorderButton } from 'components/atoms';
 import {
   InputField,
   IntentionsSelectorField,
   TextareaField
 } from 'components/organisms/Fields';
+import FormErrors from '../FormErrors';
 import { Contribution } from 'app/lmem/notice';
 import withReduxForm from './withReduxForm';
 
 export interface SubmitContributionFormOwnProps {
   onSubmit: (...args: any[]) => void;
+  errors: string[];
 }
 
 export type SubmitContributionFormProps = InjectedFormProps<
@@ -26,7 +28,7 @@ class SubmitContributionForm extends Component<SubmitContributionFormProps> {
   }
 
   render() {
-    const { handleSubmit, submitting, error, anyTouched } = this.props;
+    const { handleSubmit, submitting, error, errors } = this.props;
     return (
       <Form onSubmit={handleSubmit}>
         <Field name="url" type="hidden" component={InputField} />
@@ -58,8 +60,7 @@ class SubmitContributionForm extends Component<SubmitContributionFormProps> {
             prévisualiser et publier
           </BorderButton>
         </CenterContainer>
-
-        {anyTouched && error && <Error>{error}</Error>}
+        <FormErrors errors={errors} globalError={error} />
       </Form>
     );
   }
diff --git a/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/withConnect.ts b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/withConnect.ts
index 964696bfb..cca90b1e4 100644
--- a/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/withConnect.ts
+++ b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/withConnect.ts
@@ -2,7 +2,8 @@ import { connect } from 'react-redux';
 import { push } from 'connected-react-router';
 import { Intention } from 'app/lmem/intention';
 import { State } from 'app/content/store';
-import { getURL } from 'app/content/selectors';
+import { getFlatFormErrors, getURL } from 'app/content/selectors';
+import { form } from './withReduxForm';
 
 export default connect(
   (state: State) => ({
@@ -10,7 +11,8 @@ export default connect(
       intention: 'approval' as Intention,
       url: getURL(state),
       created: new Date()
-    }
+    },
+    errors: getFlatFormErrors(form)(state)
   }),
   {
     onSubmit: () => push('/contribute/preview')
diff --git a/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.stories.tsx b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.stories.tsx
index f2b521e21..c34224289 100644
--- a/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.stories.tsx
+++ b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.stories.tsx
@@ -27,6 +27,7 @@ storiesOf('screens/Contribute/Preview', module)
         intention: 'approval',
         created: new Date()
       }}
+      errors={[]}
       modify={action('modify')}
       publish={action('publish')}
     />
diff --git a/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx
index 91e7dfb38..71cb53ee8 100644
--- a/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx
+++ b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx
@@ -5,8 +5,9 @@ import styled from 'styled-components';
 import { Contribution } from 'app/lmem/notice';
 import NoticePreview from 'components/organisms/NoticePreview';
 import { BorderButton, Button } from 'components/atoms';
-import { Error, Form } from 'components/atoms/Forms';
-import handleFormSubmit from 'app/utils/form/handleFormSubmit';
+import { Form } from 'components/atoms/Forms';
+import FormErrors from '../ContributeScreen/FormErrors';
+import { handleFormSubmit } from 'app/utils/form';
 import withReduxForm from './withReduxForm';
 
 const PreviewForm = styled(Form)`
@@ -22,6 +23,7 @@ export interface PreviewScreenOwnProps {
   contribution: Contribution;
   modify: () => void;
   publish: (contribution: Contribution, meta: any) => void;
+  errors: string[];
 }
 
 export type PreviewScreenProps = InjectedFormProps<
@@ -45,7 +47,7 @@ class PreviewScreen extends Component<PreviewScreenProps> {
       modify,
       publish,
       error,
-      dirty
+      errors
     } = this.props;
 
     return (
@@ -61,8 +63,7 @@ class PreviewScreen extends Component<PreviewScreenProps> {
           >
             Publier
           </BorderButton>
-
-          {dirty && error && <Error>{error}</Error>}
+          <FormErrors errors={errors} globalError={error} />
         </PreviewForm>
       </NoticePreview>
     );
diff --git a/src/app/content/App/Contribute/PreviewScreen/withConnect.ts b/src/app/content/App/Contribute/PreviewScreen/withConnect.ts
index 0b5a9b39a..5081b7e67 100644
--- a/src/app/content/App/Contribute/PreviewScreen/withConnect.ts
+++ b/src/app/content/App/Contribute/PreviewScreen/withConnect.ts
@@ -1,9 +1,10 @@
 import { connect } from 'react-redux';
 import { goBack } from 'connected-react-router';
 import { State } from 'app/content/store';
-import { getContribution } from 'app/content/selectors';
+import { getContribution, getFlatFormErrors } from 'app/content/selectors';
 import { close } from 'app/actions/ui';
 import { submitContribution } from 'app/actions/contribution';
+import { form } from '../ContributeScreen/SubmitContributionForm/withReduxForm';
 
 const mapDispatchToProps = {
   close,
@@ -13,7 +14,8 @@ const mapDispatchToProps = {
 
 export default connect(
   (state: State) => ({
-    contribution: getContribution(state)
+    contribution: getContribution(state),
+    errors: getFlatFormErrors(form)(state)
   }),
   mapDispatchToProps
 );
diff --git a/src/app/content/selectors/index.ts b/src/app/content/selectors/index.ts
index 3a0549270..75fb3c098 100644
--- a/src/app/content/selectors/index.ts
+++ b/src/app/content/selectors/index.ts
@@ -1,8 +1,13 @@
 import { createSelector } from 'reselect';
 import { RouteComponentProps } from 'react-router';
 import { getLocation } from 'connected-react-router';
-import { getFormValues } from 'redux-form';
-
+import {
+  getFormMeta,
+  getFormSyncErrors,
+  getFormValues,
+  RegisteredFieldState
+} from 'redux-form';
+import * as R from 'ramda';
 import {
   getNotice,
   isMarkedUnread,
@@ -12,6 +17,7 @@ import {
 import { InstallationDetails } from 'app/lmem/installation';
 import { OpenState, MountedState, TitleState, UIState } from '../reducers/ui';
 import { ContentState } from '../store';
+import { getRegisteredFieldsPaths } from '../../utils/form';
 
 export const getNotices = (state: ContentState) => state.notices;
 
@@ -73,3 +79,33 @@ export const isNoticeContext = (state: ContentState) => {
 export const getContribution = (state: State): Contribution =>
   // @ts-ignore
   getFormValues('contribution')(state);
+
+export const getFormState = (formName: string) => (state: State) =>
+  state.form[formName];
+
+export const getFormRegisteredFields = (formName: string) => (
+  state: State
+): RegisteredFieldState[] => {
+  const form = getFormState(formName)(state);
+  return R.path(['registeredFields'], form) || [];
+};
+
+export const getFlatFormErrors = (formName: string) => (
+  state: State
+): string[] => {
+  const fieldsPaths = getRegisteredFieldsPaths(
+    getFormRegisteredFields(formName)(state)
+  );
+  const metas = getFormMeta(formName)(state);
+  const syncErrors = getFormSyncErrors(formName)(state);
+
+  return fieldsPaths
+    .map(fieldPath => {
+      const errorMessage = R.path(fieldPath, syncErrors);
+      const touched = R.path(fieldPath.concat('touched'), metas);
+
+      // @ts-ignore
+      return touched && errorMessage ? errorMessage.toString() : undefined;
+    }, {})
+    .filter(errorMessage => errorMessage);
+};
diff --git a/src/app/content/store.ts b/src/app/content/store.ts
index 1bd728276..74639878b 100644
--- a/src/app/content/store.ts
+++ b/src/app/content/store.ts
@@ -1,6 +1,7 @@
 import { applyMiddleware, createStore } from 'redux';
 import { routerMiddleware, RouterState } from 'connected-react-router';
 import { createMemoryHistory } from 'history';
+import { FormStateMap } from 'redux-form';
 import rootReducer from './reducers';
 import rootSaga from './sagas';
 import { InstallationDetailsState } from './reducers/installationDetails';
@@ -17,6 +18,7 @@ export interface ContentState {
   notices: NoticesState;
   tab: TabState;
   router: RouterState;
+  form: FormStateMap;
 }
 
 const sagaMiddleware = createSagaMiddleware();
diff --git a/src/app/lmem/contribution/validate.ts b/src/app/lmem/contribution/validate.ts
index b825b5646..bf5c3d62a 100644
--- a/src/app/lmem/contribution/validate.ts
+++ b/src/app/lmem/contribution/validate.ts
@@ -1,30 +1,31 @@
+import * as R from 'ramda';
 import { Contribution } from 'app/lmem/notice';
 import isEmail from '../../utils/isEmail';
 import Errors from '../Errors';
 
 export default (contribution: Contribution): Errors => {
-  const errors: Errors = {};
-  const requiredFields: string[] = ['intention', 'message'];
+  let errors: Errors = {
+    contributor: {}
+  };
+  const requiredPaths: any[] = [
+    ['intention'],
+    ['message'],
+    ['contributor', 'name'],
+    ['contributor', 'email']
+  ];
   const requiredFieldMessage = 'Ce champs est obligatoire.';
 
-  requiredFields.forEach(requiredField => {
-    if (!contribution[requiredField]) {
-      errors[requiredField] = requiredFieldMessage;
+  requiredPaths.forEach(requiredPath => {
+    if (!R.path(requiredPath, contribution)) {
+      // @ts-ignore
+      errors = R.assocPath(requiredPath, requiredFieldMessage, errors);
+      console.log('=>', errors);
     }
   });
 
   const { contributor } = contribution;
-
-  errors.contributor = {};
-  if (!contributor || !contributor.name) {
-    errors.contributor.name = requiredFieldMessage;
-  }
-
-  if (!contributor || !contributor.email) {
-    errors.contributor.email = requiredFieldMessage;
-  }
-
   if (contributor && contributor.email && !isEmail(contributor.email)) {
+    // @ts-ignore
     errors.contributor.email = "L'email n'est pas valide";
   }
 
diff --git a/src/app/utils/form/FormMeta.ts b/src/app/utils/form/FormMeta.ts
new file mode 100644
index 000000000..03e6e51ca
--- /dev/null
+++ b/src/app/utils/form/FormMeta.ts
@@ -0,0 +1,5 @@
+import { FieldState } from 'redux-form';
+
+export default interface FormMeta {
+  [name: string]: FieldState & { [name: string]: FieldState };
+}
diff --git a/src/app/utils/form/getRegisteredFieldsPaths.ts b/src/app/utils/form/getRegisteredFieldsPaths.ts
new file mode 100644
index 000000000..db49f21b3
--- /dev/null
+++ b/src/app/utils/form/getRegisteredFieldsPaths.ts
@@ -0,0 +1,6 @@
+import { RegisteredFieldState } from 'redux-form';
+
+export default (registeredFields: RegisteredFieldState[]) =>
+  Object.keys(registeredFields).map(registeredField =>
+    registeredField.split('.')
+  );
diff --git a/src/app/utils/form/index.ts b/src/app/utils/form/index.ts
index d2c7bbe8f..fff1dec2b 100644
--- a/src/app/utils/form/index.ts
+++ b/src/app/utils/form/index.ts
@@ -1,2 +1,6 @@
 export { default as createSubmissionError } from './createSubmissionError';
+export { default as FormMeta } from './FormMeta';
+export {
+  default as getRegisteredFieldsPaths
+} from './getRegisteredFieldsPaths';
 export { default as handleFormSubmit } from './handleFormSubmit';

From 69de70e0eeef951578b990939483202de012d936 Mon Sep 17 00:00:00 2001
From: lutangar <johan.dufour@gmail.com>
Date: Fri, 16 Aug 2019 11:12:44 +0200
Subject: [PATCH 11/19] chore(contribution-form): remove unused prop

---
 src/app/content/App/Notice/Details/withConnect.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/content/App/Notice/Details/withConnect.ts b/src/app/content/App/Notice/Details/withConnect.ts
index 87a5a2ccf..3e5ff4dd6 100644
--- a/src/app/content/App/Notice/Details/withConnect.ts
+++ b/src/app/content/App/Notice/Details/withConnect.ts
@@ -16,7 +16,6 @@ import { StatefulNotice } from '../../../../lmem/notice';
 
 export interface DetailsStateProps {
   notice?: StatefulNotice;
-  preview?: boolean;
 }
 
 const mapStateToProps = (

From 9edb128ed385c4cc6560469dee4b51292343a5e1 Mon Sep 17 00:00:00 2001
From: lutangar <johan.dufour@gmail.com>
Date: Fri, 16 Aug 2019 11:13:24 +0200
Subject: [PATCH 12/19] chore(contribution-form): move form related side
 effects to condition

---
 src/app/content/sagas/contribution.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/content/sagas/contribution.ts b/src/app/content/sagas/contribution.ts
index d4a4b9008..37650bdf0 100644
--- a/src/app/content/sagas/contribution.ts
+++ b/src/app/content/sagas/contribution.ts
@@ -21,12 +21,12 @@ export function* submitContributionSaga({
 
     yield put(contributionSubmitted(contribution));
 
-    // reset history, form and redirect to success page
-    yield put(go(-history.entries.length));
-    yield put(reset(form));
-    yield put(replace('/contribute/submitted'));
-
     if (form) {
+      // reset history, form and redirect to success page
+      yield put(go(-history.entries.length));
+      yield put(reset(form));
+      yield put(replace('/contribute/submitted'));
+
       yield call(resolve);
     }
   } catch (e) {

From 6a93b21fdab965c3ff002ef160e5b3a626b2a328 Mon Sep 17 00:00:00 2001
From: lutangar <johan.dufour@gmail.com>
Date: Fri, 16 Aug 2019 13:43:57 +0200
Subject: [PATCH 13/19] chore(contribution-form): fix requiredPaths typing

---
 src/app/lmem/contribution/validate.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/lmem/contribution/validate.ts b/src/app/lmem/contribution/validate.ts
index bf5c3d62a..f3076f3f0 100644
--- a/src/app/lmem/contribution/validate.ts
+++ b/src/app/lmem/contribution/validate.ts
@@ -7,7 +7,7 @@ export default (contribution: Contribution): Errors => {
   let errors: Errors = {
     contributor: {}
   };
-  const requiredPaths: any[] = [
+  const requiredPaths: string[][] = [
     ['intention'],
     ['message'],
     ['contributor', 'name'],
@@ -17,9 +17,7 @@ export default (contribution: Contribution): Errors => {
 
   requiredPaths.forEach(requiredPath => {
     if (!R.path(requiredPath, contribution)) {
-      // @ts-ignore
       errors = R.assocPath(requiredPath, requiredFieldMessage, errors);
-      console.log('=>', errors);
     }
   });
 

From b06a69073dc9a08a7a47525159993b12fe98d22e Mon Sep 17 00:00:00 2001
From: lutangar <johan.dufour@gmail.com>
Date: Fri, 23 Aug 2019 10:41:06 +0200
Subject: [PATCH 14/19] chore(form): rename `Errors` model to
 `ValidationErrors`

---
 src/app/lmem/Errors.ts                | 3 ---
 src/app/lmem/ValidationErrors.ts      | 3 +++
 src/app/lmem/contribution/validate.ts | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)
 delete mode 100644 src/app/lmem/Errors.ts
 create mode 100644 src/app/lmem/ValidationErrors.ts

diff --git a/src/app/lmem/Errors.ts b/src/app/lmem/Errors.ts
deleted file mode 100644
index 4d85b5c7d..000000000
--- a/src/app/lmem/Errors.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default interface Errors {
-  [key: string]: string | Errors;
-}
diff --git a/src/app/lmem/ValidationErrors.ts b/src/app/lmem/ValidationErrors.ts
new file mode 100644
index 000000000..1ba2cde71
--- /dev/null
+++ b/src/app/lmem/ValidationErrors.ts
@@ -0,0 +1,3 @@
+export default interface ValidationErrors {
+  [key: string]: string | ValidationErrors;
+}
diff --git a/src/app/lmem/contribution/validate.ts b/src/app/lmem/contribution/validate.ts
index f3076f3f0..213b17dad 100644
--- a/src/app/lmem/contribution/validate.ts
+++ b/src/app/lmem/contribution/validate.ts
@@ -1,10 +1,10 @@
 import * as R from 'ramda';
 import { Contribution } from 'app/lmem/notice';
 import isEmail from '../../utils/isEmail';
-import Errors from '../Errors';
+import ValidationErrors from '../ValidationErrors';
 
-export default (contribution: Contribution): Errors => {
-  let errors: Errors = {
+export default (contribution: Contribution): ValidationErrors => {
+  let errors: ValidationErrors = {
     contributor: {}
   };
   const requiredPaths: string[][] = [

From 710e25281a6d057c2ba52281ec132968e87c73bd Mon Sep 17 00:00:00 2001
From: lutangar <johan.dufour@gmail.com>
Date: Fri, 23 Aug 2019 10:57:28 +0200
Subject: [PATCH 15/19] chore(contribution-form): add space between preview
 buttons

---
 src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx
index 71cb53ee8..a8165c8f5 100644
--- a/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx
+++ b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx
@@ -14,7 +14,7 @@ const PreviewForm = styled(Form)`
   padding: 12px 16px 12px 16px;
   display: flex;
   justify-content: space-around;
-  width: 50%;
+  min-width: 60%;
   self-align: center;
   align-self: center;
 `;

From 45352cb874fc42b1145ff12532bf9946954b6d2d Mon Sep 17 00:00:00 2001
From: lutangar <johan.dufour@gmail.com>
Date: Mon, 2 Sep 2019 10:30:52 +0200
Subject: [PATCH 16/19] fix(contribution): show contributor name on preview
 screen

---
 src/components/organisms/NoticePreview.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/organisms/NoticePreview.tsx b/src/components/organisms/NoticePreview.tsx
index 6fe225ea9..57d253c8d 100644
--- a/src/components/organisms/NoticePreview.tsx
+++ b/src/components/organisms/NoticePreview.tsx
@@ -15,7 +15,7 @@ interface NoticePreviewProps {
 class NoticePreview extends PureComponent<NoticePreviewProps> {
   render() {
     const {
-      contribution: { intention, message, created, email },
+      contribution: { intention, message, created, contributor },
       children
     } = this.props;
 
@@ -24,7 +24,7 @@ class NoticePreview extends PureComponent<NoticePreviewProps> {
         <DetailsContent>
           <DetailsMeta>
             <Date>Le {format(created, 'DD/MM/YYYY')}</Date>
-            <Contributor>{email} :</Contributor>
+            <Contributor>{contributor.name} :</Contributor>
             <IntentionIcon active intention={intention} />
           </DetailsMeta>
 

From b5e4d31598e516fb6f0b7e6ef6c8b9581921d2ac Mon Sep 17 00:00:00 2001
From: lutangar <johan.dufour@gmail.com>
Date: Mon, 2 Sep 2019 10:31:33 +0200
Subject: [PATCH 17/19] fix(contribution): fix global error not showing up
 anymore on the preview screen if submission failed

---
 .../App/Contribute/ContributeScreen/FormErrors.tsx       | 2 +-
 .../App/Contribute/PreviewScreen/PreviewScreen.tsx       | 9 ++++-----
 .../content/App/Contribute/PreviewScreen/withConnect.ts  | 6 ++----
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/app/content/App/Contribute/ContributeScreen/FormErrors.tsx b/src/app/content/App/Contribute/ContributeScreen/FormErrors.tsx
index 571263d7c..03996387d 100644
--- a/src/app/content/App/Contribute/ContributeScreen/FormErrors.tsx
+++ b/src/app/content/App/Contribute/ContributeScreen/FormErrors.tsx
@@ -12,7 +12,7 @@ export const FormErrors = ({ errors, globalError }: FormErrorsProps) => {
       return <Error>{errors[0]}</Error>;
     }
 
-    return <Error>{globalError}</Error>;
+    return globalError ? <Error>{globalError}</Error> : null;
   }
 
   return null;
diff --git a/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx
index a8165c8f5..5920a6cb5 100644
--- a/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx
+++ b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx
@@ -5,8 +5,7 @@ import styled from 'styled-components';
 import { Contribution } from 'app/lmem/notice';
 import NoticePreview from 'components/organisms/NoticePreview';
 import { BorderButton, Button } from 'components/atoms';
-import { Form } from 'components/atoms/Forms';
-import FormErrors from '../ContributeScreen/FormErrors';
+import { Error, Form } from 'components/atoms/Forms';
 import { handleFormSubmit } from 'app/utils/form';
 import withReduxForm from './withReduxForm';
 
@@ -46,8 +45,8 @@ class PreviewScreen extends Component<PreviewScreenProps> {
       submitting,
       modify,
       publish,
-      error,
-      errors
+      dirty,
+      error
     } = this.props;
 
     return (
@@ -63,8 +62,8 @@ class PreviewScreen extends Component<PreviewScreenProps> {
           >
             Publier
           </BorderButton>
-          <FormErrors errors={errors} globalError={error} />
         </PreviewForm>
+        {dirty && error && <Error>{error}</Error>}
       </NoticePreview>
     );
   }
diff --git a/src/app/content/App/Contribute/PreviewScreen/withConnect.ts b/src/app/content/App/Contribute/PreviewScreen/withConnect.ts
index 5081b7e67..0b5a9b39a 100644
--- a/src/app/content/App/Contribute/PreviewScreen/withConnect.ts
+++ b/src/app/content/App/Contribute/PreviewScreen/withConnect.ts
@@ -1,10 +1,9 @@
 import { connect } from 'react-redux';
 import { goBack } from 'connected-react-router';
 import { State } from 'app/content/store';
-import { getContribution, getFlatFormErrors } from 'app/content/selectors';
+import { getContribution } from 'app/content/selectors';
 import { close } from 'app/actions/ui';
 import { submitContribution } from 'app/actions/contribution';
-import { form } from '../ContributeScreen/SubmitContributionForm/withReduxForm';
 
 const mapDispatchToProps = {
   close,
@@ -14,8 +13,7 @@ const mapDispatchToProps = {
 
 export default connect(
   (state: State) => ({
-    contribution: getContribution(state),
-    errors: getFlatFormErrors(form)(state)
+    contribution: getContribution(state)
   }),
   mapDispatchToProps
 );

From 4a17a7ea1aca956d41e49fb9c45e62dcf6220068 Mon Sep 17 00:00:00 2001
From: lutangar <johan.dufour@gmail.com>
Date: Thu, 5 Sep 2019 12:20:20 +0200
Subject: [PATCH 18/19] chore(contribution): update lockfile after rebase

---
 .eslintrc.json                                     |  2 ++
 src/api/sendInBlue/sendEmail.ts                    |  4 ++--
 src/api/sendInBlue/types.ts                        |  2 +-
 .../background/services/createContributionEmail.ts |  3 ++-
 .../SubmitContributionForm/withConnect.ts          |  4 ++--
 .../PreviewScreen/PreviewScreen.stories.tsx        |  1 -
 .../App/Contribute/PreviewScreen/PreviewScreen.tsx |  3 ++-
 .../App/Contribute/PreviewScreen/withConnect.ts    |  4 ++--
 .../SubmittedScreen/SubmittedScreen.stories.tsx    |  2 --
 .../Contribute/SubmittedScreen/SubmittedScreen.tsx |  1 -
 .../App/Contribute/SubmittedScreen/withConnect.ts  |  4 ++--
 src/app/content/selectors/index.ts                 | 14 +++++++-------
 src/app/lmem/contribution/validate.ts              |  2 +-
 src/app/lmem/notice.ts                             |  1 -
 src/app/utils/form/handleFormSubmit.ts             |  6 ++++--
 src/components/atoms/Button.ts                     |  2 +-
 src/components/atoms/Button/Button.tsx             |  2 +-
 .../organisms/NoticeDetails/CenterContainer.ts     |  3 +--
 src/components/organisms/NoticePreview.tsx         |  2 +-
 19 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 7fae27847..72e893895 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -37,6 +37,8 @@
     // We don't actually always explicitly member accessility (componentDidMount ...)
     "@typescript-eslint/explicit-member-accessibility": false,
     "@typescript-eslint/no-explicit-any": ["error", { "ignoreRestArgs": true }],
+    // See SendInBlue types
+    "@typescript-eslint/no-empty-interface": false,
     "@typescript-eslint/no-unused-vars": [
       "error",
       { "ignoreRestSiblings": true }
diff --git a/src/api/sendInBlue/sendEmail.ts b/src/api/sendInBlue/sendEmail.ts
index 5eef8848a..e3ea5fdcd 100644
--- a/src/api/sendInBlue/sendEmail.ts
+++ b/src/api/sendInBlue/sendEmail.ts
@@ -1,6 +1,6 @@
 import { post } from './call';
+import { TransactionEmail } from 'SendInBlue';
 
-const sendEmail = (email: SendInBlue.TransactionEmail) =>
-  post('smtp/email', email);
+const sendEmail = (email: TransactionEmail) => post('smtp/email', email);
 
 export default sendEmail;
diff --git a/src/api/sendInBlue/types.ts b/src/api/sendInBlue/types.ts
index b2f60df4c..8e748cb27 100644
--- a/src/api/sendInBlue/types.ts
+++ b/src/api/sendInBlue/types.ts
@@ -1,4 +1,4 @@
-namespace SendInBlue {
+declare module 'SendInBlue' {
   export interface PersonEmail {
     name?: string;
     email: string;
diff --git a/src/app/background/services/createContributionEmail.ts b/src/app/background/services/createContributionEmail.ts
index 30048bfd5..09d3bd92e 100644
--- a/src/app/background/services/createContributionEmail.ts
+++ b/src/app/background/services/createContributionEmail.ts
@@ -4,12 +4,13 @@ import {
   formatContributionTextEmail
 } from 'app/lmem/format/contribution';
 import { truncateWords } from '../../utils/truncate';
+import { TransactionEmail } from 'SendInBlue';
 
 const { SEND_CONTRIBUTION_FROM, SEND_CONTRIBUTION_TO } = process.env as AppEnv;
 
 const createContributionEmail = (
   contribution: Contribution
-): SendInBlue.TransactionEmail => ({
+): TransactionEmail => ({
   sender: { email: SEND_CONTRIBUTION_FROM },
   to: [{ email: SEND_CONTRIBUTION_TO }],
   replyTo: contribution.contributor,
diff --git a/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/withConnect.ts b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/withConnect.ts
index cca90b1e4..5e5fd1d17 100644
--- a/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/withConnect.ts
+++ b/src/app/content/App/Contribute/ContributeScreen/SubmitContributionForm/withConnect.ts
@@ -1,12 +1,12 @@
 import { connect } from 'react-redux';
 import { push } from 'connected-react-router';
 import { Intention } from 'app/lmem/intention';
-import { State } from 'app/content/store';
+import { ContentState } from 'app/content/store';
 import { getFlatFormErrors, getURL } from 'app/content/selectors';
 import { form } from './withReduxForm';
 
 export default connect(
-  (state: State) => ({
+  (state: ContentState) => ({
     initialValues: {
       intention: 'approval' as Intention,
       url: getURL(state),
diff --git a/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.stories.tsx b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.stories.tsx
index c34224289..37995f3b3 100644
--- a/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.stories.tsx
+++ b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.stories.tsx
@@ -18,7 +18,6 @@ storiesOf('screens/Contribute/Preview', module)
       contribution={{
         message:
           "Je tiens à dire que la canicule, c'est une bonne chose pour les vieux.",
-        name: 'Johan Dufour',
         url: 'https://weather.com',
         contributor: {
           email: 'johan.dufour@gmail.com',
diff --git a/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx
index 5920a6cb5..7e466bdf2 100644
--- a/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx
+++ b/src/app/content/App/Contribute/PreviewScreen/PreviewScreen.tsx
@@ -3,6 +3,7 @@ import { InjectedFormProps } from 'redux-form';
 import styled from 'styled-components';
 
 import { Contribution } from 'app/lmem/notice';
+import { FormMeta } from 'app/actions';
 import NoticePreview from 'components/organisms/NoticePreview';
 import { BorderButton, Button } from 'components/atoms';
 import { Error, Form } from 'components/atoms/Forms';
@@ -21,7 +22,7 @@ const PreviewForm = styled(Form)`
 export interface PreviewScreenOwnProps {
   contribution: Contribution;
   modify: () => void;
-  publish: (contribution: Contribution, meta: any) => void;
+  publish: (contribution: Contribution, meta: FormMeta) => void;
   errors: string[];
 }
 
diff --git a/src/app/content/App/Contribute/PreviewScreen/withConnect.ts b/src/app/content/App/Contribute/PreviewScreen/withConnect.ts
index 0b5a9b39a..b6014429b 100644
--- a/src/app/content/App/Contribute/PreviewScreen/withConnect.ts
+++ b/src/app/content/App/Contribute/PreviewScreen/withConnect.ts
@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { goBack } from 'connected-react-router';
-import { State } from 'app/content/store';
+import { ContentState } from 'app/content/store';
 import { getContribution } from 'app/content/selectors';
 import { close } from 'app/actions/ui';
 import { submitContribution } from 'app/actions/contribution';
@@ -12,7 +12,7 @@ const mapDispatchToProps = {
 };
 
 export default connect(
-  (state: State) => ({
+  (state: ContentState) => ({
     contribution: getContribution(state)
   }),
   mapDispatchToProps
diff --git a/src/app/content/App/Contribute/SubmittedScreen/SubmittedScreen.stories.tsx b/src/app/content/App/Contribute/SubmittedScreen/SubmittedScreen.stories.tsx
index f08b820e2..d497ee626 100644
--- a/src/app/content/App/Contribute/SubmittedScreen/SubmittedScreen.stories.tsx
+++ b/src/app/content/App/Contribute/SubmittedScreen/SubmittedScreen.stories.tsx
@@ -13,12 +13,10 @@ storiesOf('screens/Contribute/Submitted', module)
   ))
   .add('normal', () => (
     <SubmittedScreen
-      close={action('close')}
       goBack={action('goBack')}
       contribution={{
         message:
           "Je tiens à dire que la canicule, c'est une bonne chose pour les vieux.",
-        name: 'Johan Dufour',
         url: 'https://weather.com',
         contributor: {
           email: 'johan.dufour@gmail.com',
diff --git a/src/app/content/App/Contribute/SubmittedScreen/SubmittedScreen.tsx b/src/app/content/App/Contribute/SubmittedScreen/SubmittedScreen.tsx
index b77fe8b73..ccf5549f9 100644
--- a/src/app/content/App/Contribute/SubmittedScreen/SubmittedScreen.tsx
+++ b/src/app/content/App/Contribute/SubmittedScreen/SubmittedScreen.tsx
@@ -9,7 +9,6 @@ import { Contribution } from 'app/lmem/notice';
 
 export interface ContributionSubmittedScreenProps {
   contribution: Contribution;
-  close: () => void;
   goBack: () => void;
 }
 
diff --git a/src/app/content/App/Contribute/SubmittedScreen/withConnect.ts b/src/app/content/App/Contribute/SubmittedScreen/withConnect.ts
index ed0f968ed..2cb7b77af 100644
--- a/src/app/content/App/Contribute/SubmittedScreen/withConnect.ts
+++ b/src/app/content/App/Contribute/SubmittedScreen/withConnect.ts
@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { replace } from 'connected-react-router';
 
 import { close } from 'app/actions/ui';
-import { State } from 'app/content/store';
+import { ContentState } from 'app/content/store';
 import { getContribution } from 'app/content/selectors';
 
 const mapDispatchToProps = {
@@ -11,7 +11,7 @@ const mapDispatchToProps = {
 };
 
 export default connect(
-  (state: State) => ({
+  (state: ContentState) => ({
     contribution: getContribution(state)
   }),
   mapDispatchToProps
diff --git a/src/app/content/selectors/index.ts b/src/app/content/selectors/index.ts
index 75fb3c098..8ab06c8d5 100644
--- a/src/app/content/selectors/index.ts
+++ b/src/app/content/selectors/index.ts
@@ -64,7 +64,7 @@ export const getExtensionInstallationDate = createSelector(
 
 export const getTab = (state: ContentState) => state.tab;
 
-export const getURL = (state: State) => {
+export const getURL = (state: ContentState) => {
   const tab = getTab(state);
   return tab ? tab.url : '';
 };
@@ -76,22 +76,22 @@ export const isNoticeContext = (state: ContentState) => {
   return pathname.includes('notice') || pathname.includes('preview');
 };
 
-export const getContribution = (state: State): Contribution =>
+export const getContribution = (state: ContentState): Contribution =>
   // @ts-ignore
-  getFormValues('contribution')(state);
+  getFormValues('contribution')(state); // eslint-disable-line
 
-export const getFormState = (formName: string) => (state: State) =>
+export const getFormState = (formName: string) => (state: ContentState) =>
   state.form[formName];
 
 export const getFormRegisteredFields = (formName: string) => (
-  state: State
+  state: ContentState
 ): RegisteredFieldState[] => {
   const form = getFormState(formName)(state);
   return R.path(['registeredFields'], form) || [];
 };
 
 export const getFlatFormErrors = (formName: string) => (
-  state: State
+  state: ContentState
 ): string[] => {
   const fieldsPaths = getRegisteredFieldsPaths(
     getFormRegisteredFields(formName)(state)
@@ -105,7 +105,7 @@ export const getFlatFormErrors = (formName: string) => (
       const touched = R.path(fieldPath.concat('touched'), metas);
 
       // @ts-ignore
-      return touched && errorMessage ? errorMessage.toString() : undefined;
+      return touched && errorMessage ? errorMessage.toString() : undefined; // eslint-disable-line
     }, {})
     .filter(errorMessage => errorMessage);
 };
diff --git a/src/app/lmem/contribution/validate.ts b/src/app/lmem/contribution/validate.ts
index 213b17dad..c94caea2f 100644
--- a/src/app/lmem/contribution/validate.ts
+++ b/src/app/lmem/contribution/validate.ts
@@ -24,7 +24,7 @@ export default (contribution: Contribution): ValidationErrors => {
   const { contributor } = contribution;
   if (contributor && contributor.email && !isEmail(contributor.email)) {
     // @ts-ignore
-    errors.contributor.email = "L'email n'est pas valide";
+    errors.contributor.email = "L'email n'est pas valide"; // eslint-disable-line
   }
 
   if (Object.keys(errors.contributor).length === 0) {
diff --git a/src/app/lmem/notice.ts b/src/app/lmem/notice.ts
index a43a9b08c..5369e2b99 100644
--- a/src/app/lmem/notice.ts
+++ b/src/app/lmem/notice.ts
@@ -17,7 +17,6 @@ export interface Notice {
 }
 
 export interface Contribution {
-  [key: string]: any;
   url: string;
   created: Date;
   intention: Intention;
diff --git a/src/app/utils/form/handleFormSubmit.ts b/src/app/utils/form/handleFormSubmit.ts
index 60994f060..2bb126a09 100644
--- a/src/app/utils/form/handleFormSubmit.ts
+++ b/src/app/utils/form/handleFormSubmit.ts
@@ -1,14 +1,16 @@
 import { SubmitHandler } from 'redux-form';
 import { FormMeta } from '../../actions';
-
 export default ({
   handleSubmit,
   form
 }: {
-  handleSubmit: SubmitHandler<any, any, string>;
+  // @ts-ignore
+  handleSubmit: SubmitHandler<any, any, string>; // eslint-disable-line
   form: string;
+  // @ts-ignore
 }) => (onSubmit: (payload: any, meta: FormMeta) => void) =>
   handleSubmit(
+    // @ts-ignore
     (payload: any) =>
       new Promise((resolve, reject) =>
         onSubmit(payload, { form, resolve, reject })
diff --git a/src/components/atoms/Button.ts b/src/components/atoms/Button.ts
index 0399a4eef..c9c13e77f 100644
--- a/src/components/atoms/Button.ts
+++ b/src/components/atoms/Button.ts
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Theme } from '../../app/theme';
 
 export interface ButtonProps {
-  as?: string | React.ComponentType<any>;
+  as?: string | React.ComponentType<{}>;
   theme?: Theme;
   loading?: boolean;
   href?: string;
diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx
index c2e97faa5..4a26cdd50 100644
--- a/src/components/atoms/Button/Button.tsx
+++ b/src/components/atoms/Button/Button.tsx
@@ -21,7 +21,7 @@ export interface ButtonProps extends ButtonContainerProps {
   loading?: boolean;
   children?: ReactNode | string;
   disabled?: boolean;
-  dangerouslySetInnerHTML?: any;
+  dangerouslySetInnerHTML?: { __html: string };
 }
 
 export const ButtonContainer = styled.button<ButtonContainerProps>`
diff --git a/src/components/organisms/NoticeDetails/CenterContainer.ts b/src/components/organisms/NoticeDetails/CenterContainer.ts
index 047607f98..ea4f89435 100644
--- a/src/components/organisms/NoticeDetails/CenterContainer.ts
+++ b/src/components/organisms/NoticeDetails/CenterContainer.ts
@@ -1,6 +1,5 @@
-import React from 'react';
 import styled from 'styled-components';
-import { Button, BorderButton, CenterContainer } from 'components/atoms';
+import { BorderButton, CenterContainer } from 'components/atoms';
 
 export default styled(CenterContainer)`
   margin-bottom: 15px;
diff --git a/src/components/organisms/NoticePreview.tsx b/src/components/organisms/NoticePreview.tsx
index 57d253c8d..a980908b0 100644
--- a/src/components/organisms/NoticePreview.tsx
+++ b/src/components/organisms/NoticePreview.tsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import { format } from 'date-fns';
-import { Contributor, CenterContainer } from '../atoms';
+import { Contributor } from '../atoms';
 import DetailsContainer from './NoticeDetails/DetailsContainer';
 import DetailsContent from './NoticeDetails/DetailsContent';
 import DetailsMeta from './NoticeDetails/DetailsMeta';

From b95b0183ed2b011eb53a1a98821d847cf80824ab Mon Sep 17 00:00:00 2001
From: Jalil Arfaoui <jalil@arfaoui.net>
Date: Thu, 5 Sep 2019 15:22:05 +0200
Subject: [PATCH 19/19] style(contribution): fix typing issue

try to clarify getFlatFormErrors
fix typings issues
functional style to validateContribution
---
 .../store/migrations/4.2019-08-28.ts          |  2 +-
 src/app/content/selectors/index.ts            | 43 +++++----
 src/app/lmem/ValidationErrors.ts              |  2 +-
 src/app/lmem/contribution/validate.spec.ts    | 94 +++++++++++++++++++
 src/app/lmem/contribution/validate.ts         | 64 ++++++++-----
 src/app/utils/form/handleFormSubmit.ts        | 21 +++--
 6 files changed, 174 insertions(+), 52 deletions(-)
 create mode 100644 src/app/lmem/contribution/validate.spec.ts

diff --git a/src/app/background/store/migrations/4.2019-08-28.ts b/src/app/background/store/migrations/4.2019-08-28.ts
index 4187bf98b..3ac488796 100644
--- a/src/app/background/store/migrations/4.2019-08-28.ts
+++ b/src/app/background/store/migrations/4.2019-08-28.ts
@@ -1,4 +1,4 @@
-import { PersistedState } from 'redux-persist/es/types';
+import { PersistedState } from 'redux-persist';
 import { PersistedBackgroundState } from '../../reducers';
 import * as RA from 'ramda-adjunct';
 import { StateV3 } from './StateV3';
diff --git a/src/app/content/selectors/index.ts b/src/app/content/selectors/index.ts
index 8ab06c8d5..dcb372fe6 100644
--- a/src/app/content/selectors/index.ts
+++ b/src/app/content/selectors/index.ts
@@ -77,8 +77,7 @@ export const isNoticeContext = (state: ContentState) => {
 };
 
 export const getContribution = (state: ContentState): Contribution =>
-  // @ts-ignore
-  getFormValues('contribution')(state); // eslint-disable-line
+  getFormValues('contribution')(state) as Contribution;
 
 export const getFormState = (formName: string) => (state: ContentState) =>
   state.form[formName];
@@ -90,22 +89,28 @@ export const getFormRegisteredFields = (formName: string) => (
   return R.path(['registeredFields'], form) || [];
 };
 
+const getFieldPathErrorMessage = (state: ContentState, formName: string) => (
+  fieldPath: string[]
+) => R.path<string>(fieldPath, getFormSyncErrors(formName)(state));
+
+const isFieldPathTouched = (state: ContentState, formName: string) => (
+  fieldPath: string[]
+) =>
+  R.path<boolean>(fieldPath.concat('touched'), getFormMeta(formName)(state)) ||
+  false;
+
 export const getFlatFormErrors = (formName: string) => (
   state: ContentState
-): string[] => {
-  const fieldsPaths = getRegisteredFieldsPaths(
-    getFormRegisteredFields(formName)(state)
-  );
-  const metas = getFormMeta(formName)(state);
-  const syncErrors = getFormSyncErrors(formName)(state);
-
-  return fieldsPaths
-    .map(fieldPath => {
-      const errorMessage = R.path(fieldPath, syncErrors);
-      const touched = R.path(fieldPath.concat('touched'), metas);
-
-      // @ts-ignore
-      return touched && errorMessage ? errorMessage.toString() : undefined; // eslint-disable-line
-    }, {})
-    .filter(errorMessage => errorMessage);
-};
+): string[] =>
+  R.pipe(
+    getFormRegisteredFields(formName),
+    getRegisteredFieldsPaths,
+    R.map(
+      R.ifElse(
+        isFieldPathTouched(state, formName),
+        getFieldPathErrorMessage(state, formName),
+        R.always(undefined)
+      )
+    ),
+    R.filter(Boolean)
+  )(state);
diff --git a/src/app/lmem/ValidationErrors.ts b/src/app/lmem/ValidationErrors.ts
index 1ba2cde71..e745f3630 100644
--- a/src/app/lmem/ValidationErrors.ts
+++ b/src/app/lmem/ValidationErrors.ts
@@ -1,3 +1,3 @@
 export default interface ValidationErrors {
-  [key: string]: string | ValidationErrors;
+  [key: string]: string | ValidationErrors | undefined;
 }
diff --git a/src/app/lmem/contribution/validate.spec.ts b/src/app/lmem/contribution/validate.spec.ts
new file mode 100644
index 000000000..a62dc6a03
--- /dev/null
+++ b/src/app/lmem/contribution/validate.spec.ts
@@ -0,0 +1,94 @@
+/* eslint-disable no-unused-expressions, @typescript-eslint/ban-ts-ignore */
+import { expect } from 'chai';
+import validateContribution from './validate';
+
+describe('lmem/contribution/validate', () => {
+  it('rejects undefined contribution', () => {
+    // @ts-ignore
+    expect(validateContribution()).to.not.be.empty;
+  });
+  it('rejects empty contribution', () => {
+    // @ts-ignore
+    expect(validateContribution({})).to.not.be.empty;
+  });
+  it('rejects contribution missing intention', () => {
+    expect(
+      // @ts-ignore
+      validateContribution({
+        message: 'message',
+        contributor: { name: 'name', email: 'email@domain.com' }
+      })
+    ).to.not.be.empty;
+  });
+  it('rejects contribution missing message', () => {
+    expect(
+      // @ts-ignore
+      validateContribution({
+        intention: 'alternative',
+        contributor: { name: 'name', email: 'email@domain.com' }
+      })
+    ).to.not.be.empty;
+  });
+  it('rejects contribution missing contributor', () => {
+    expect(
+      // @ts-ignore
+      validateContribution({
+        intention: 'alternative',
+        message: 'message'
+      })
+    ).to.not.be.empty;
+  });
+  it('rejects contribution missing contributor name', () => {
+    expect(
+      validateContribution({
+        intention: 'alternative',
+        message: 'message',
+        // @ts-ignore
+        contributor: { email: 'email@domain.com' }
+      })
+    ).to.not.be.empty;
+  });
+  it('rejects contribution missing contributor email', () => {
+    expect(
+      validateContribution({
+        intention: 'alternative',
+        message: 'message',
+        // @ts-ignore
+        contributor: { name: 'name' }
+      })
+    ).to.not.be.empty;
+  });
+  it('rejects contribution with invalid contributor email', () => {
+    expect(
+      // @ts-ignore
+      validateContribution({
+        intention: 'alternative',
+        message: 'message',
+        contributor: { name: 'name', email: 'email' }
+      })
+    ).to.not.be.empty;
+  });
+  it('sums up all the error messages', () => {
+    // @ts-ignore
+    const errors = validateContribution({
+      intention: 'alternative',
+      contributor: { name: 'name', email: 'email' }
+    });
+
+    expect(errors).to.have.property('message', 'Ce champs est obligatoire.');
+    expect(errors).to.have.nested.property(
+      'contributor.email',
+      "L'email n'est pas valide"
+    );
+  });
+  it('returns empty object for valid contribution', () => {
+    expect(
+      // @ts-ignore
+      validateContribution({
+        intention: 'alternative',
+        message: 'message',
+        contributor: { name: 'name', email: 'email@domain.com' }
+      })
+    ).to.be.empty;
+  });
+});
diff --git a/src/app/lmem/contribution/validate.ts b/src/app/lmem/contribution/validate.ts
index c94caea2f..87c85f89c 100644
--- a/src/app/lmem/contribution/validate.ts
+++ b/src/app/lmem/contribution/validate.ts
@@ -3,33 +3,53 @@ import { Contribution } from 'app/lmem/notice';
 import isEmail from '../../utils/isEmail';
 import ValidationErrors from '../ValidationErrors';
 
-export default (contribution: Contribution): ValidationErrors => {
-  let errors: ValidationErrors = {
-    contributor: {}
+export interface ContributionValidationErrors extends ValidationErrors {
+  intention?: string;
+  message?: string;
+  contributor?: {
+    name?: string;
+    email?: string;
   };
-  const requiredPaths: string[][] = [
+}
+type Errors = ContributionValidationErrors;
+
+const setRequiredFieldError = (errors: Errors) => (
+  requiredPath: string[]
+): Errors => R.assocPath(requiredPath, 'Ce champs est obligatoire.', errors);
+
+const validateRequiredPaths = (contribution: Contribution) => (
+  errors: Errors
+) =>
+  R.reduce(
+    (err: Errors, requiredPath: string[]) =>
+      R.path(requiredPath, contribution)
+        ? err
+        : setRequiredFieldError(err)(requiredPath),
+    errors
+  )([
     ['intention'],
     ['message'],
     ['contributor', 'name'],
     ['contributor', 'email']
-  ];
-  const requiredFieldMessage = 'Ce champs est obligatoire.';
-
-  requiredPaths.forEach(requiredPath => {
-    if (!R.path(requiredPath, contribution)) {
-      errors = R.assocPath(requiredPath, requiredFieldMessage, errors);
-    }
-  });
+  ]);
 
-  const { contributor } = contribution;
-  if (contributor && contributor.email && !isEmail(contributor.email)) {
-    // @ts-ignore
-    errors.contributor.email = "L'email n'est pas valide"; // eslint-disable-line
-  }
+const hasInvalidContributorEmail = R.compose(
+  R.not,
+  isEmail,
+  R.defaultTo(''),
+  R.path<string>(['contributor', 'email'])
+);
+const validateContributorEmail = (contribution: Contribution) => (
+  errors: Errors
+): Errors =>
+  hasInvalidContributorEmail(contribution)
+    ? R.assocPath(['contributor', 'email'], "L'email n'est pas valide", errors)
+    : errors;
 
-  if (Object.keys(errors.contributor).length === 0) {
-    delete errors.contributor;
-  }
+const validateContribution = (contribution: Contribution): Errors =>
+  R.pipe(
+    validateRequiredPaths(contribution),
+    validateContributorEmail(contribution)
+  )({});
 
-  return errors;
-};
+export default validateContribution;
diff --git a/src/app/utils/form/handleFormSubmit.ts b/src/app/utils/form/handleFormSubmit.ts
index 2bb126a09..108ac90c9 100644
--- a/src/app/utils/form/handleFormSubmit.ts
+++ b/src/app/utils/form/handleFormSubmit.ts
@@ -1,18 +1,21 @@
 import { SubmitHandler } from 'redux-form';
 import { FormMeta } from '../../actions';
-export default ({
+
+type OnSubmit<FormData> = (payload: FormData, meta: FormMeta) => void;
+type HandleFormSubmitArgs<FormData, P> = {
+  handleSubmit: SubmitHandler<FormData, P, string>;
+  form: string;
+};
+
+const handleFormSubmit = <FormData, P>({
   handleSubmit,
   form
-}: {
-  // @ts-ignore
-  handleSubmit: SubmitHandler<any, any, string>; // eslint-disable-line
-  form: string;
-  // @ts-ignore
-}) => (onSubmit: (payload: any, meta: FormMeta) => void) =>
+}: HandleFormSubmitArgs<FormData, P>) => (onSubmit: OnSubmit<FormData>) =>
   handleSubmit(
-    // @ts-ignore
-    (payload: any) =>
+    payload =>
       new Promise((resolve, reject) =>
         onSubmit(payload, { form, resolve, reject })
       )
   );
+
+export default handleFormSubmit;