From c069055f04b2f80ea27ea6e86fde9619b56a4796 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Sant=C3=A1ngelo?=
 <santangelonicolas@gmail.com>
Date: Wed, 31 Oct 2018 13:45:46 +0100
Subject: [PATCH] feat: bid elements

---
 src/Translation/locales/en.json               |  1 +
 src/Translation/locales/es.json               |  1 +
 src/Translation/locales/fr.json               |  1 +
 src/Translation/locales/ja.json               |  1 +
 src/Translation/locales/ko.json               |  1 +
 src/Translation/locales/zh.json               |  1 +
 .../components/AuctionPage/AuctionPage.css    | 30 +++++++++++-
 .../src/components/AuctionPage/AuctionPage.js | 46 +++++++++++++++++--
 8 files changed, 75 insertions(+), 7 deletions(-)

diff --git a/src/Translation/locales/en.json b/src/Translation/locales/en.json
index 2e5b97720..b29f06f43 100644
--- a/src/Translation/locales/en.json
+++ b/src/Translation/locales/en.json
@@ -103,6 +103,7 @@
     "your_parcel": "Your parcel"
   },
   "auction_page": {
+    "bid": "Bid",
     "description": "Select LAND to buy",
     "maximum_parcels_message":
       "If you try to buy more than {max} parcels in a single transaction it'll fail. You must submit this transaction and then buy more parcels in a subsequent transaction.",
diff --git a/src/Translation/locales/es.json b/src/Translation/locales/es.json
index 72e508d90..21e5ab162 100644
--- a/src/Translation/locales/es.json
+++ b/src/Translation/locales/es.json
@@ -104,6 +104,7 @@
     "your_parcel": "Tu parcela"
   },
   "auction_page": {
+    "bid": "Oferta",
     "description": "Seleccione LAND para comprar",
     "maximum_parcels_message":
       "Si intenta comprar más de {max} parcelas en una sola transacción, fallará. ",
diff --git a/src/Translation/locales/fr.json b/src/Translation/locales/fr.json
index ea22c1732..4143359f9 100644
--- a/src/Translation/locales/fr.json
+++ b/src/Translation/locales/fr.json
@@ -106,6 +106,7 @@
     "your_parcel": "Votre parcelle"
   },
   "auction_page": {
+    "bid": "Offre",
     "description": "Sélectionnez LAND à acheter",
     "maximum_parcels_message":
       "Si vous essayez d'acheter plus de {max} colis en une seule transaction, vous échouerez. ",
diff --git a/src/Translation/locales/ja.json b/src/Translation/locales/ja.json
index 1c6f30d03..5932eb1ff 100644
--- a/src/Translation/locales/ja.json
+++ b/src/Translation/locales/ja.json
@@ -101,6 +101,7 @@
     "your_parcel": "あなたの区画"
   },
   "auction_page": {
+    "bid": "入札",
     "description": "購入するLANDを選択",
     "maximum_parcels_message":
       "あなたが単一のトランザクションで{max}パーセル以上を購入しようとすると、それは失敗します。",
diff --git a/src/Translation/locales/ko.json b/src/Translation/locales/ko.json
index adf134f35..18cafb15b 100644
--- a/src/Translation/locales/ko.json
+++ b/src/Translation/locales/ko.json
@@ -103,6 +103,7 @@
     "your_parcel": "당신의 토지"
   },
   "auction_page": {
+    "bid": "매기다",
     "description": "구매할 LAND 선택",
     "maximum_parcels_message":
       "단일 트랜잭션에서 {max} 소포를 초과하여 구매하려고하면 실패합니다. ",
diff --git a/src/Translation/locales/zh.json b/src/Translation/locales/zh.json
index 0bf471782..d8ff64a15 100644
--- a/src/Translation/locales/zh.json
+++ b/src/Translation/locales/zh.json
@@ -94,6 +94,7 @@
     "your_parcel": "您的地块"
   },
   "auction_page": {
+    "bid": "出价",
     "description": "选择LAND购买",
     "maximum_parcels_message":
       "如果您尝试在单笔交易中购买超过{max}的包裹，那么它将失败。",
diff --git a/webapp/src/components/AuctionPage/AuctionPage.css b/webapp/src/components/AuctionPage/AuctionPage.css
index 5e27cde7d..68e1f8b4a 100644
--- a/webapp/src/components/AuctionPage/AuctionPage.css
+++ b/webapp/src/components/AuctionPage/AuctionPage.css
@@ -1,3 +1,8 @@
+.AuctionPage .subtitle {
+  color: var(--gray);
+  margin-bottom: 5px;
+}
+
 .AuctionPage .parcel-preview {
   height: 400px;
 }
@@ -6,11 +11,18 @@
   margin: 30px 0;
 }
 
+.AuctionPage .information-blocks {
+  display: flex;
+  justify-content: space-between;
+}
+
+.AuctionPage .information-block .ui.header {
+  margin-top: 0;
+}
+
 .AuctionPage .parcels-included-description {
-  width: 100%;
   font-size: 18px;
   margin: 15px 0 0;
-  color: var(--gray);
 }
 
 .AuctionPage .auction-details .selected-parcels.column {
@@ -22,9 +34,23 @@
   display: flex;
   flex-wrap: wrap;
   width: 100%;
+  margin-top: 40px;
 }
 
 .AuctionPage .ParcelAttributes {
   margin-top: 20px;
   flex-basis: 8%;
 }
+
+@media (max-width: 768px) {
+  .AuctionPage .information-blocks {
+    display: block;
+    text-align: center;
+  }
+}
+
+@media (max-width: 992px) {
+  .AuctionPage .information-block {
+    margin-top: 20px;
+  }
+}
diff --git a/webapp/src/components/AuctionPage/AuctionPage.js b/webapp/src/components/AuctionPage/AuctionPage.js
index b967b9b6a..5a169f67d 100644
--- a/webapp/src/components/AuctionPage/AuctionPage.js
+++ b/webapp/src/components/AuctionPage/AuctionPage.js
@@ -12,7 +12,7 @@ import { getParcelSorter } from 'shared/parcel'
 import './AuctionPage.css'
 
 // TODO: Real number here
-const MAX_PARCELS_PER_TX = Infinity
+const MAX_PARCELS_PER_TX = 20
 
 export default class AuctionPage extends React.PureComponent {
   static propTypes = {
@@ -21,6 +21,8 @@ export default class AuctionPage extends React.PureComponent {
 
   constructor(props) {
     super(props)
+
+    this.parcelPrice = 3000 // TODO: use the contract to get this value
     this.state = {
       selectedCoordsById: {}
     }
@@ -113,13 +115,47 @@ export default class AuctionPage extends React.PureComponent {
             ) : null}
 
             <Grid.Row>
-              <Grid.Column width={16}>
+              <Grid.Column mobile={16} computer={6}>
                 <Header size="large">{t('auction_page.title')}</Header>
-              </Grid.Column>
-              <Grid.Column width={16} className="selected-parcels">
-                <p className="parcels-included-description">
+                <p className="subtitle parcels-included-description">
                   {t('auction_page.description')}
                 </p>
+              </Grid.Column>
+              <Grid.Column mobile={16} computer={10}>
+                <div className="information-blocks">
+                  <div className="information-block">
+                    <p className="subtitle">GAS PRICE</p>
+                    <Header size="large">300wei</Header>
+                  </div>
+                  <div className="information-block">
+                    <p className="subtitle">PARCEL PRICE</p>
+                    <Header size="large">{this.parcelPrice}</Header>
+                  </div>
+                  <div className="information-block">
+                    <p className="subtitle">PARCELS</p>
+                    <Header size="large">
+                      {selected.length}/{MAX_PARCELS_PER_TX}
+                    </Header>
+                  </div>
+                  <div className="information-block">
+                    <p className="subtitle">TOTAL PRICE</p>
+                    <Header size="large">
+                      {this.parcelPrice * selected.length}
+                    </Header>
+                  </div>
+                  <div className="information-block">
+                    <Button
+                      type="submit"
+                      primary={true}
+                      disabled={selected.length === 0}
+                    >
+                      {t('auction_page.bid')}
+                    </Button>
+                  </div>
+                </div>
+              </Grid.Column>
+
+              <Grid.Column width={16} className="selected-parcels">
                 <div className="parcels-included">
                   {this.getParcels().map(parcel => (
                     <ParcelAttributes