From c6912c8dd5dc20d9d2970ef77a13817010e6b999 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Let=C3=ADcia=20Camara?= <lettcamara@gmail.com>
Date: Fri, 19 Oct 2018 01:46:35 -0300
Subject: [PATCH] Add all public info to ambassador map pin popup

---
 src/components/pages/AmbassadorsPage.js | 35 ++++++++++++++++++++-----
 src/components/pages/MerchantsPage.js   | 13 ++++++++-
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/AmbassadorsPage.js b/src/components/pages/AmbassadorsPage.js
index 6a9b9aa..6f38ff1 100644
--- a/src/components/pages/AmbassadorsPage.js
+++ b/src/components/pages/AmbassadorsPage.js
@@ -138,7 +138,7 @@ class AmbassadorsPage extends Component {
         searchText: app.addLocationSearchText(ambassador.cities),
         value: app.addLocation(ambassador.cities)
       }
-      ambassador.map = app.addMapButton(ambassador.nickname, ambassador.cities);
+      ambassador.map = app.addMapButton(ambassador, ambassador.cities);
       ambassador.link = <a target="_blank" rel="noopener noreferrer"
         href={ambassador.url}>{stripProtocol(ambassador.url)}</a>;
     });
@@ -248,11 +248,22 @@ class AmbassadorsPage extends Component {
     );
   }
 
-  addMapButton(nickname, cities){
+  addMapButton(ambassador, cities){
     const app = this;
     return (
       <span>
-        {cities.map((location, index) => (
+        {cities.map((location, index) => {
+          const infoDescription = <div>
+          <div><b>Location</b>: {(location.name).replace(/(^|\s)\S/g, l => l.toUpperCase())} - {countries.getName(location.country)}</div>
+          {(ambassador.nickname) && (<div><b>Nickname</b>: {ambassador.nickname}</div>)}
+          {(ambassador.telegram) && (<div><b>Telegram</b>: {ambassador.telegram}</div>)}
+          {(ambassador.keybase) && (<div><b>Keybase</b>: {ambassador.keybase}</div>)}
+          {(ambassador.email) && (<div><b>Email</b>: {ambassador.email}</div>)}
+          {(ambassador.phone) && (<div><b>Phone</b>: {ambassador.phone}</div>)}
+          {(ambassador.url) && (<div><b>URL:</b>: <a target="_blank" rel="noopener noreferrer"
+            href={ambassador.url}>{stripProtocol(ambassador.url)}</a></div>)}
+          </div>;
+          return (
           <div key={index}>
             <Button
               className="App-button"
@@ -264,15 +275,15 @@ class AmbassadorsPage extends Component {
                   marginBottom: 5
               }}
               onClick={() => app.openMaps(
-                nickname,
-                `${(location.name).replace(/(^|\s)\S/g, l => l.toUpperCase())} - ${countries.getName(location.country)}`,
+                ambassador.nickname,
+                infoDescription,
                 location.lat,
                 location.lon
               )}
             >Show on Map
             </Button>
           </div>
-        ))}
+        );})}
       </span>
     );
   }
@@ -288,12 +299,22 @@ class AmbassadorsPage extends Component {
     const ambassadorsMarkers = [];
     ambassadorsSearch.forEach(ambassador => {
       ambassador.cities.forEach(function(city) {
+        const infoDescription = <div>
+        <div><b>Location</b>: {(city.name).replace(/(^|\s)\S/g, l => l.toUpperCase())} - {countries.getName(city.country)}</div>
+        {(ambassador.nickname) && (<div><b>Nickname</b>: {ambassador.nickname}</div>)}
+        {(ambassador.telegram) && (<div><b>Telegram</b>: {ambassador.telegram}</div>)}
+        {(ambassador.keybase) && (<div><b>Keybase</b>: {ambassador.keybase}</div>)}
+        {(ambassador.email) && (<div><b>Email</b>: {ambassador.email}</div>)}
+        {(ambassador.phone) && (<div><b>Phone</b>: {ambassador.phone}</div>)}
+        {(ambassador.url) && (<div><b>URL:</b>: <a target="_blank" rel="noopener noreferrer"
+          href={ambassador.url}>{stripProtocol(ambassador.url)}</a></div>)}
+        </div>;
         const marker = {
           lat: city.lat,
           lng: city.lon,
           withInfo: true,
           infoTitle: ambassador.nickname,
-          infoDescription: `${city.name} - ${city.country}`,
+          infoDescription: infoDescription,
         };
         ambassadorsMarkers.push(marker);
       });
diff --git a/src/components/pages/MerchantsPage.js b/src/components/pages/MerchantsPage.js
index 6fcf1a0..d58891c 100644
--- a/src/components/pages/MerchantsPage.js
+++ b/src/components/pages/MerchantsPage.js
@@ -10,6 +10,7 @@ import EnhancedTable from '../EnhancedTable';
 import Footer from '../Footer';
 import LayerMap from '../LayerMap';
 import PreviewMap from '../PreviewMap';
+import { stripProtocol } from '../../utils/url';
 
 // Helpers
 import Client from '../../utils/feathers';
@@ -134,12 +135,22 @@ class MerchantsPage extends Component {
     const markers = [];
     result.data.forEach(ambassador => {
       ambassador.cities.forEach(function(city) {
+        const infoDescription = <div>
+        <div><b>Location</b>: {(city.name).replace(/(^|\s)\S/g, l => l.toUpperCase())} - {countries.getName(city.country)}</div>
+        {(ambassador.nickname) && (<div><b>Nickname</b>: {ambassador.nickname}</div>)}
+        {(ambassador.telegram) && (<div><b>Telegram</b>: {ambassador.telegram}</div>)}
+        {(ambassador.keybase) && (<div><b>Keybase</b>: {ambassador.keybase}</div>)}
+        {(ambassador.email) && (<div><b>Email</b>: {ambassador.email}</div>)}
+        {(ambassador.phone) && (<div><b>Phone</b>: {ambassador.phone}</div>)}
+        {(ambassador.url) && (<div><b>URL:</b>: <a target="_blank" rel="noopener noreferrer"
+          href={ambassador.url}>{stripProtocol(ambassador.url)}</a></div>)}
+        </div>;
         const marker = {
           lat: city.lat,
           lng: city.lon,
           withInfo: true,
           infoTitle: ambassador.nickname,
-          infoDescription: `${city.name} - ${city.country}`,
+          infoDescription: infoDescription,
         };
         markers.push(marker);
       });