Merge branch 'master' into mx

src/assets/css/palmpay.css

@@ -365,3 +365,35 @@ ul.social-buttons {
   padding-left: 0 !important;
   padding-right: 0 !important;
 }
+.ambassadorsTitle {
+  margin-top: 0 !important;
+}
+
+@media screen and (min-width: 328px) {
+  .ambassadorsTitle {
+    font-weight: bold;
+  }
+  .marketingMargin {
+    font-weight: bold;
+  }
+  .merchantsMargin {
+    font-weight: bold;
+  }
+}
+
+th {
+  text-align: left !important;
+}
+
+#mainNav p {
+  margin-left: 0 !important;
+
+}
+
+header .col-md-10, header .col-md-10 > div {
+  padding-left: 0 !important;
+}
+
+.search-books-input-wrapper > div {
+  margin-left: 0 !important;
+}

src/components/AppHeader.js

@@ -14,13 +14,15 @@ import AppLogo from '../assets/img/header/logo.png';
 function AppHeader() {
   return (
     <AppBar position="static" color="inherit" style={{backgroundColor: '#138F52'}}>
+  <div className="col-md-10 mx-md-auto" >
       <Toolbar>
-        <Typography style={{margin: '0 auto'}} variant="title" color="inherit">
+        <Typography variant="title" color="inherit">
           <Link to="/">
             <img src={AppLogo} className="app-book-menu-remove-icon" alt="Palmpay logo" />
           </Link>
         </Typography>
       </Toolbar>
+    </div>
     </AppBar>
   );
 }

src/components/EnhancedTable.js

@@ -93,8 +93,22 @@ class EnhancedTable extends Component {
 
     const data =
       order === 'desc'
-        ? this.state.data.sort((a, b) => (b[orderBy] < a[orderBy] ? -1 : 1))
-        : this.state.data.sort((a, b) => (a[orderBy] < b[orderBy] ? -1 : 1));
+        ? this.state.data.sort((a, b) => {
+          let a_value = a[orderBy];
+          let b_value = b[orderBy];
+          a_value = a_value.hasOwnProperty('searchText') ?  a_value.searchText.toLowerCase() : a_value.toLowerCase();
+          b_value = b_value.hasOwnProperty('searchText') ?  b_value.searchText.toLowerCase() : b_value.toLowerCase();
+          return (b_value < a_value) ? -1 : 1;
+        })
+        : this.state.data.sort((a, b) => {
+          let a_value = a[orderBy];
+          let b_value = b[orderBy];
+          a_value = a_value.hasOwnProperty('searchText') ?  a_value.searchText.toLowerCase() : a_value.toLowerCase();
+          b_value = b_value.hasOwnProperty('searchText') ?  b_value.searchText.toLowerCase() : b_value.toLowerCase();
+          if(a_value.trim() === '') a_value = 'zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz';
+          if(b_value.trim() === '') b_value = 'zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz';
+          return (a_value < b_value) ? -1 : 1;
+        });
 
     this.setState({ data, order, orderBy });
   };

src/components/LayerMapSwitches.js

@@ -88,7 +88,7 @@ class LayerMapSwitches extends React.Component {
                 onChange={this.props.onChange('ambassadorLayer')}
                 value="ambassadors"
                 classes={{
-                  switchBase: ( (this.props.ambsMap) ? classes.iOSSwitchBaseBlue : classes.iOSSwitchBaseGreen ),
+                  switchBase: classes.iOSSwitchBaseBlue,
                   bar: classes.iOSBar,
                   icon: classes.iOSIcon,
                   iconChecked: classes.iOSIconChecked,
@@ -102,7 +102,7 @@ class LayerMapSwitches extends React.Component {
             control={
               <Switch
                 classes={{
-                  switchBase: ( (this.props.ambsMap) ? classes.iOSSwitchBaseBlue : classes.iOSSwitchBaseGreen ),
+                  switchBase: classes.iOSSwitchBaseGreen,
                   bar: classes.iOSBar,
                   icon: classes.iOSIcon,
                   iconChecked: classes.iOSIconChecked,

src/components/pages/AmbassadorsPage.js

@@ -24,7 +24,6 @@ import LoadingGif from '../../assets/img/loading_icon.gif';
 const countries = Countries();
 
 const centerStyle = {
-  textAlign: 'center',
   marginTop: 20,
   marginBottom: 20
 };
@@ -139,9 +138,25 @@ class AmbassadorsPage extends Component {
         searchText: app.addLocationSearchText(ambassador.cities),
         value: app.addLocation(ambassador.cities)
       }
-      ambassador.map = app.addMapButton(ambassador.nickname, ambassador.cities);
-      ambassador.link = <a target="_blank" rel="noopener noreferrer"
-        href={ambassador.url}>{stripProtocol(ambassador.url)}</a>;
+      ambassador.telegram_original = ambassador.telegram;
+      ambassador.telegram = {
+        searchText: ambassador.telegram,
+        value: (
+          <a
+            href={`https://t.me/${(ambassador.telegram.trim().charAt(0) === '@') ? ambassador.telegram.trim().slice(1): ambassador.telegram.trim()}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >{ambassador.telegram}</a>
+        )
+      };
+      ambassador.map = app.addMapButton(ambassador, ambassador.cities);
+      ambassador.link = {
+        searchText: stripProtocol(ambassador.url),
+        value: (
+          <a target="_blank" rel="noopener noreferrer"
+          href={ambassador.url}>{stripProtocol(ambassador.url)}</a>
+        )
+      };
     });
 
     // Once both return, update the state
@@ -185,12 +200,16 @@ class AmbassadorsPage extends Component {
     });
 
     const markers = result.data.map(merchant => {
+      const infoDescription = <div>
+      <div><b>Address</b>: {merchant.address}</div>
+      {(merchant.phone) && (<div><b>Phone</b>: {merchant.phone}</div>)}
+      </div>;
       const marker = {
         lat: merchant.lat,
         lng: merchant.lon,
         withInfo: true,
         infoTitle: merchant.name,
-        infoDescription: `${merchant.address}, ${merchant.city} - ${merchant.country}`,
+        infoDescription: infoDescription,
       };
       return marker;
     });
@@ -245,11 +264,28 @@ 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_original) && (<div><b>Telegram</b>:
+            <a
+              href={`https://t.me/${(ambassador.telegram_original.trim().charAt(0) === '@') ? ambassador.telegram_original.trim().slice(1): ambassador.telegram_original.trim()}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >{ambassador.telegram_original}</a>
+            </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"
@@ -261,15 +297,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>
     );
   }
@@ -285,12 +321,26 @@ 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_original) && (<div><b>Telegram</b>: <a
+          href={`https://t.me/${(ambassador.telegram_original.trim().charAt(0) === '@') ? ambassador.telegram_original.trim().slice(1): ambassador.telegram_original.trim()}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >{ambassador.telegram_original}</a></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);
       });
@@ -313,7 +363,7 @@ class AmbassadorsPage extends Component {
               <img src={LoadingGif} alt="Loading" style={loadingStyle} />
         ): (
           <div>
-            <p style={{ textAlign: 'left', marginLeft: 20, marginRight: 20 }}>
+            <p style={{ textAlign: 'left', marginRight: 20 }}>
               <FormattedHTMLMessage id="ambassadors.description1" />
               <Link to="/merchants">
                 <FormattedMessage id="ambassadors.merchants_link_description" />

src/components/pages/HomePage.css

@@ -68,7 +68,3 @@
 .margin-5 {
   padding: 3rem;
 }
-
-.MuiNotchedOutline-focused-120 {
-  border-color: rgb(19, 143, 82) !important;
-}

src/components/pages/MarketingPage.js

@@ -6,6 +6,11 @@ import { FormattedMessage, FormattedHTMLMessage } from 'react-intl';
 import AppHeader from '../AppHeader';
 import Footer from '../Footer';
 
+const centerStyle = {
+  marginTop: 20,
+  marginBottom: 20
+};
+
 /**
  * Marketing page component.
  */
@@ -109,6 +114,7 @@ class MarketingPage extends React.Component {
       <div className="containerfix">
       <div className="row">
       <div className="col-md-10 mx-md-auto">
+        <h2 className="ambassadorsTitle marketingMargin" style={centerStyle}>Marketing</h2>
       <div>
       <div>
       <Button

src/components/pages/MerchantsPage.css

@@ -1,3 +1,6 @@
 .MuiFormLabel-root-82.MuiFormLabel-focused-83 {
   color: #139657
 }
+.merchants_services .MuiNotchedOutline-focused-120 {
+  border-color: rgb(19, 143, 82) !important;
+}

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';
@@ -25,7 +26,6 @@ import "./MerchantsPage.css";
 const countries = Countries();
 
 const centerStyle = {
-  textAlign: 'center',
   marginTop: 20,
   marginBottom: 20
 };
@@ -135,12 +135,28 @@ 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>:
+          <a
+            href={`https://t.me/${(ambassador.telegram.trim().charAt(0) === '@') ? ambassador.telegram.trim().slice(1): ambassador.telegram.trim()}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >{ambassador.telegram}</a>
+          </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);
       });
@@ -183,6 +199,10 @@ class MerchantsPage extends Component {
     });
 
     result.data.map(merchant => {
+      const infoDescription = <div>
+        <div><b>Address</b>: {merchant.address}</div>
+        {(merchant.phone) && (<div><b>Phone</b>: {merchant.phone}</div>)}
+        </div>;
       merchant.map = <Button
         className="App-button"
         variant="contained"
@@ -192,7 +212,7 @@ class MerchantsPage extends Component {
         }}
         onClick={() => this.openMaps(
           merchant.name,
-          `${merchant.address}, ${merchant.city} - ${merchant.country}`,
+          infoDescription,
           merchant.lat,
           merchant.lon
         )}
@@ -239,12 +259,16 @@ class MerchantsPage extends Component {
     const { ambassadorsMarkers, merchantsSearch } = this.state;
 
     const merchantMarkers = merchantsSearch.map(merchant => {
+      const infoDescription = <div>
+      <div><b>Address</b>: {merchant.address}</div>
+      {(merchant.phone) && (<div><b>Phone</b>: {merchant.phone}</div>)}
+      </div>;
       const marker = {
         lat: merchant.lat,
         lng: merchant.lon,
         withInfo: true,
         infoTitle: merchant.name,
-        infoDescription: `${merchant.address}, ${merchant.city} - ${merchant.country}`,
+        infoDescription: infoDescription,
       };
       return marker;
     });
@@ -254,18 +278,18 @@ class MerchantsPage extends Component {
       <div>
         <AppHeader />
 
-      <section data-spy="scroll" data-target="#mainNav" id="services">
+      <section data-spy="scroll" data-target="#mainNav" id="services" className="merchants_services" >
       <div className="containerfix">
       <div className="row">
       <div className="col-md-10 mx-md-auto">
 
-        <h2 className="ambassadorsTitle" style={centerStyle}><FormattedMessage id="merchants.title" /></h2>
+        <h2 className="ambassadorsTitle merchantsMargin" style={centerStyle}><FormattedMessage id="merchants.title" /></h2>
         { /* Conditional Rendering */}
             {(this.state.loading) ? (
               <img src={LoadingGif} alt="Loading" style={loadingStyle} />
         ): (
           <div>
-            <p style={{ textAlign: 'left', marginLeft: 20, marginRight: 20 }}>
+            <p style={{ textAlign: 'left', marginRight: 20 }}>
               <FormattedHTMLMessage id="merchants.description1" />
               <Link to="/ambs">
                 <FormattedMessage id="merchants.ambassadors_link_description" />

src/components/sections/TestimoniesSection.js

@@ -68,7 +68,7 @@ class TestimoniesSection extends React.Component {
   render() {
     const { activeItem, maxLength } = this.state;
 
-    const fontSize = (this.state.width > 1000) ? 16 * (1 + (this.state.width/2000)): 16;
+    const fontSize = (this.state.width > 1000) ? 16 * (1 + (this.state.width/4000)): 16;
 
     return (
       <span>

src/utils/feathers.js

@@ -3,7 +3,7 @@ import feathers from '@feathersjs/client';
 const app = feathers();
 // Change to your production ambassador web service
 //const restClient = feathers.rest('http://localhost:3030');
-const restClient = feathers.rest('https://palmpaybackend.leticiacamara.com');
+const restClient = feathers.rest('https://ambpay.palmpay.io');
 
 // Configure an Fetch AJAX library with that client. For fetch details see https://facebook.github.io/react-native/docs/network.html
 // For rest details see https://docs.feathersjs.com/api/client/rest.html