feat: show fingerprint changed message

Author: nachomazzara

src/Translation/locales/en.json

@@ -29,7 +29,8 @@
     },
     "expiration": "Expiration",
     "expiration_placeholder": "Expiration date for this publication",
-    "fingerprint_changed": "Fingerprint changed",
+    "fingerprint_changed":
+      "This {asset_name} has been modified. You can only cancel the bid.",
     "insufficient_funds":
       "The bidder has insufficient funds to pay for the bid",
     "list_asset": "Place a bid for the {asset_name}",

webapp/src/components/Bid/Bid.css

@@ -34,6 +34,10 @@
   overflow: hidden;
 }
 
+.Bid.fingerprint-changed .row .ParcelCanvasWrapper {
+  border-radius: 10px 0 0 0;
+}
+
 .Bid .row h3 {
   text-transform: uppercase;
   color: var(--gray);
@@ -89,6 +93,15 @@
   margin-left: 15px !important;
 }
 
+.ui.stackable.grid.Bid .row.fingerprint-changed {
+  margin-top: 1rem;
+  border-top: 1px solid var(--background);
+  padding: 10px;
+  font-size: 14px;
+  text-align: center;
+  color: var(--gray);
+}
+
 @media(max-width: 768px) { 
   .Bid .row .column.asset-details a {
     margin: -1rem;

webapp/src/components/Bid/Bid.js

@@ -131,13 +131,12 @@ export default class Bid extends React.PureComponent {
       mobile: showAssetDetail ? 8 : 16
     }
 
+    let gridClassName = `Bid ${className}`
+    gridClassName += showAssetDetail ? ' showAssetDetail' : ''
+    gridClassName += fingerprintChanged ? ' fingerprint-changed' : ''
+
     return (
-      <Grid
-        stackable
-        className={`Bid ${className} ${
-          showAssetDetail ? 'showAssetDetail' : ''
-        }`}
-      >
+      <Grid stackable className={gridClassName}>
         <Grid.Row>
           {showAssetDetail && (
             <React.Fragment>
@@ -195,10 +194,6 @@ export default class Bid extends React.PureComponent {
                 mobile={16}
                 className={'actions'}
               >
-                {!isOwner &&
-                  fingerprintChanged && (
-                    <p>{t('asset_bid.fingerprint_changed')}</p>
-                  )}
                 <Button
                   className={`${isOwner ? 'primary' : ''}`}
                   onClick={preventDefault(onConfirm)}
@@ -221,6 +216,18 @@ export default class Bid extends React.PureComponent {
             </Grid>
           </Grid.Column>
         </Grid.Row>
+        {!isOwner &&
+          fingerprintChanged && (
+            <Grid.Row className="fingerprint-changed">
+              <Grid.Column>
+                <p>
+                  {t('asset_bid.fingerprint_changed', {
+                    asset_name: t('name.estate')
+                  })}
+                </p>
+              </Grid.Column>
+            </Grid.Row>
+          )}
       </Grid>
     )
   }