Add tellers switch to LayerMapSwitches component

src/components/LayerMap.js

@@ -10,15 +10,21 @@ import {
 } from 'react-google-maps';
 import { MarkerClusterer } from 'react-google-maps/lib/components/addons/MarkerClusterer';
 
+// Helpers
+import Client from '../utils/feathers';
+import { stripProtocol } from '../utils/url';
+import Countries from 'country-list';
+
 // Custom Components
 import LayerMapSwitches from './LayerMapSwitches';
 
 // Helpers
-import GOOGLE_MAPS_API from '../utils/constants';
+import { GOOGLE_MAPS_API } from '../utils/constants';
 
 // Images
 import MerchantPin from '../assets/img/map/merchant_pin.png';
 import AmbassadorPin from '../assets/img/map/ambassador_pin.png';
+import TellerPin from '../assets/img/map/teller_pin.png';
 
 import ambs_m1 from '../assets/img/map/cluster/ambassadors/m1.png';
 import ambs_m2 from '../assets/img/map/cluster/ambassadors/m2.png';
@@ -32,6 +38,15 @@ import mer_m3 from '../assets/img/map/cluster/merchants/m3.png';
 import mer_m4 from '../assets/img/map/cluster/merchants/m4.png';
 import mer_m5 from '../assets/img/map/cluster/merchants/m5.png';
 
+import tel_m1 from '../assets/img/map/cluster/tellers/m1.png';
+import tel_m2 from '../assets/img/map/cluster/tellers/m2.png';
+import tel_m3 from '../assets/img/map/cluster/tellers/m3.png';
+import tel_m4 from '../assets/img/map/cluster/tellers/m4.png';
+import tel_m5 from '../assets/img/map/cluster/tellers/m5.png';
+
+// List of countries
+const countries = Countries();
+
 /**
  * This object is used for type checking the props of the component.
  */
@@ -59,6 +74,9 @@ const defaultProps = {
   mapElement: <div style={{ height: `400px` }} />,
   // Fix google maps modal problem
   showControls: true,
+  ambassadors: [],
+  merchants: [],
+  tellers: []
 };
 defaultProps['markers'] = [
   defaultProps.mapCenter
@@ -153,6 +171,7 @@ const CustomLayerMap = compose(
         )
       ))}
     </MarkerClusterer>
+
     <MarkerClusterer
         averageCenter
         enableRetinaIcons
@@ -216,6 +235,71 @@ const CustomLayerMap = compose(
           )
         ))}
     </MarkerClusterer>
+
+    <MarkerClusterer
+        averageCenter
+        enableRetinaIcons
+        gridSize={60}
+        zoomOnClick={true}
+        styles={[
+      	{
+      	  url: tel_m1,
+      	  height: 53,
+      	  lineHeight: 53,
+      	  width: 53,
+      	},
+      	{
+      	  url: tel_m2,
+      	  height: 56,
+      	  lineHeight: 56,
+      	  width: 56,
+      	},
+      	{
+      	  url: tel_m3,
+      	  height: 66,
+      	  lineHeight: 66,
+      	  width: 66,
+      	},
+      	{
+      	  url: tel_m4,
+      	  height: 78,
+      	  lineHeight: 78,
+      	  width: 78,
+      	},
+      	{
+      	  url: tel_m5,
+      	  height: 90,
+      	  lineHeight: 90,
+      	  width: 90,
+      	},
+        ]}
+      >
+        {props.tellers.map( (marker, index) => (
+          marker.withInfo ? (
+            <Marker
+              key={index}
+              position={{ lat: marker.lat, lng: marker.lng }}
+              icon={TellerPin}
+              onClick={() => props.onToggleAmbassadorOpen(index)}
+            >
+              {props.isOpenAmbassadorObj[index] && <InfoWindow onCloseClick={() => props.onToggleAmbassadorOpen(index)}>
+                <div>
+                  <div style={{ font: "bold 16px Georgia, serif" }}>{marker.infoTitle}</div>
+                  <br />
+                  <div style={{ font: "14px Georgia, serif" }}>{marker.infoDescription}</div>
+                </div>
+              </InfoWindow>}
+            </Marker>
+          ) : (
+            <Marker
+              key={index}
+              position={{ lat: marker.lat, lng: marker.lng }}
+              icon={TellerPin}
+            />
+          )
+        ))}
+    </MarkerClusterer>
+
   </GoogleMap>
 );
 
@@ -234,21 +318,234 @@ const propTypesLayerMap = {
   mapHeight: PropTypes.string,
   ambassadors: PropTypes.array,
   merchants: PropTypes.array,
+  tellers: PropTypes.array,
 };
 
+// Type checking the props of the component
+CustomLayerMap.propTypes = propTypes;
+// Assign default values to the optional props
+CustomLayerMap.defaultProps = defaultProps;
+
 class LayerMap extends Component {
   constructor(props) {
     super(props);
     this.state = {
       ambassadors: [],
       merchants: [],
+      tellers: [],
       ambassadorLayer: this.props.ambassadorsLayer,
-      merchantLayer: this.props.merchantsLayer
+      merchantLayer: this.props.merchantsLayer,
+      tellerLayer: this.props.tellersLayer,
     };
   }
 
+  /**
+   * @description Lifecycle event handler called just after the App loads into the DOM.
+   */
+  UNSAFE_componentWillMount() {
+    this.getAmbassadors();
+    this.getMerchants();
+    this.getTellers();
+  }
+
+  fillResults(result) {
+    const data = result;
+    return (item) => data.data.push(item);
+  }
+
+  /**
+   * @description Get ambassadors from the web service
+   * @param {number} [limit=10] - Max items to be returned.
+   * @param {number} [skip=0] - Start index search
+   */
+  getAmbassadors = async (limit = 50, skip = 0) => {
+    const app = this;
+    // Initially we don't know how much the total value is, so to make sure we enter the loop
+    // at least once we're just setting it to be 1
+    let total = 1;
+
+    const ambassadors = Client.service('api/v2/ambassadors');
+
+    let result;
+    while(skip < total){
+      let partialResponse = await ambassadors.find({
+        query: {
+          $sort: { account: 1 },
+          $limit: limit,
+          $skip: skip
+        }
+      });
+      total = partialResponse.total;
+      result === undefined ? result = partialResponse : partialResponse.data.map(this.fillResults(result));
+      skip = skip + limit;
+    }
+
+    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: infoDescription,
+        };
+        markers.push(marker);
+      });
+    });
+
+    // Once both return, update the state
+    app.setState({ ambassadors: markers });
+  };
+
+  /**
+   * @description Get merchants from the web service
+   * @param {number} [limit=10] - Max items to be returned.
+   * @param {number} [skip=0] - Start index search
+   */
+  getMerchants = async (limit = 50, skip = 0) => {
+    const app = this;
+    // Initially we don't know how much the total value is, so to make sure we enter the loop
+    // at least once we're just setting it to be 1
+    let total = 1;
+
+    const merchants = Client.service('api/v1/merchants');
+
+    let result;
+    while(skip < total){
+      let partialResponse = await merchants.find({
+        query: {
+          $sort: { account: 1 },
+          $limit: limit,
+          $skip: skip
+        }
+      });
+      total = partialResponse.total;
+      result === undefined ? result = partialResponse : partialResponse.data.map(this.fillResults(result));
+      skip = skip + limit;
+    }
+
+    result.data.forEach(function(merchants){
+      if(merchants.city !== undefined) merchants.city = (merchants.city).replace(/(^|\s)\S/g, l => l.toUpperCase());
+      if(merchants.country !== undefined) merchants.country = countries.getName(merchants.country);
+    });
+
+    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>)}
+      {(merchant.telegram) && (<div><b>Telegram</b>:
+        <a
+          href={`https://t.me/${(merchant.telegram.trim().charAt(0) === '@') ? merchant.telegram.trim().slice(1): merchant.telegram.trim()}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >{merchant.telegram}</a>
+        </div>)}
+      {(merchant.website) && (<div><b>Website:</b>: <a target="_blank" rel="noopener noreferrer"
+        href={merchant.website}>{stripProtocol(merchant.website)}</a></div>)}
+      </div>;
+      const marker = {
+        lat: merchant.lat,
+        lng: merchant.lon,
+        withInfo: true,
+        infoTitle: merchant.name,
+        infoDescription: infoDescription,
+      };
+      return marker;
+    });
+
+    // Once both return, update the state
+    app.setState({
+      merchants: markers,
+      loading: false
+    });
+  };
+
+  /**
+   * @description Get tellers from the web service
+   * @param {number} [limit=10] - Max items to be returned.
+   * @param {number} [skip=0] - Start index search
+   */
+  getTellers = async (limit = 50, skip = 0) => {
+    const app = this;
+    // Initially we don't know how much the total value is, so to make sure we enter the loop
+    // at least once we're just setting it to be 1
+    let total = 1;
+
+    const tellers = Client.service('api/v2/tellers');
+    this.setState({loading: true});
+    let result;
+    while(skip < total){
+      let partialResponse = await tellers.find({
+        query: {
+          //$sort: { account: 1 },
+          $limit: limit,
+          $skip: skip
+        }
+      });
+      total = partialResponse.total;
+      result === undefined ? result = partialResponse : partialResponse.data.map(this.fillResults(result));
+      skip = skip + limit;
+    }
+
+    result.data.forEach(function(tellers){
+      if(tellers.city !== undefined) tellers.city = (tellers.city).replace(/(^|\s)\S/g, l => l.toUpperCase());
+      if(tellers.country !== undefined) tellers.country = countries.getName(tellers.country);
+    });
+
+    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>)}
+      {(merchant.telegram) && (<div><b>Telegram</b>:
+        <a
+          href={`https://t.me/${(merchant.telegram.trim().charAt(0) === '@') ? merchant.telegram.trim().slice(1): merchant.telegram.trim()}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >{merchant.telegram}</a>
+        </div>)}
+      {(merchant.url) && (<div><b>Website:</b>: <a target="_blank" rel="noopener noreferrer"
+        href={merchant.url}>{stripProtocol(merchant.url)}</a></div>)}
+      </div>;
+      const marker = {
+        lat: merchant.lat,
+        lng: merchant.lon,
+        withInfo: true,
+        infoTitle: merchant.gt_name,
+        infoDescription: infoDescription,
+      };
+      return marker;
+    });
+
+    // Once both return, update the state
+    app.setState({
+      loading: false,
+      tellers: markers
+    });
+  };
+
   handleLayerChange = name => event => {
     this.setState({ [name]: event.target.checked });
+    // Update any time changes
+    this.getAmbassadors();
+    this.getMerchants();
+    this.getTellers();
   };
 
   render() {
@@ -260,15 +557,16 @@ class LayerMap extends Component {
           <LayerMapSwitches
             ambassadors={this.state.ambassadorLayer}
             merchants={this.state.merchantLayer}
-            ambsMap={this.props.ambsMap}
+            tellers={this.state.tellerLayer}
             onChange={this.handleLayerChange}
           />
         ) : (
           <div style={{ height: 56 }}></div>
         )}
         <CustomLayerMap
-          ambassadors={this.state.ambassadorLayer ? this.props.ambassadors: []}
+          ambassadors={this.state.ambassadorLayer ? this.state.ambassadors: []}
-          merchants={this.state.merchantLayer ? this.props.merchants: []}
+          merchants={this.state.merchantLayer ? this.state.merchants: []}
+          tellers={this.state.tellerLayer ? this.state.tellers: []}
           mapZoom={3}
           mapCenter={{ lat: 0, lng: 0 }}
           loadingElement={<div style={{ height: `100%` }} />}
@@ -280,7 +578,4 @@ class LayerMap extends Component {
   }
 }
 
-// Type checking the props of the component
-LayerMap.propTypes = propTypesLayerMap;
-
 export default LayerMap;

src/components/LayerMapSwitches.js

@@ -42,6 +42,18 @@ const styles = theme => ({
       easing: theme.transitions.easing.sharp,
     }),
   },
+  iOSSwitchBaseYellow: {
+    '&$iOSChecked': {
+      color: theme.palette.common.white,
+      '& + $iOSBar': {
+        backgroundColor: "#fdcf09",
+      },
+    },
+    transition: theme.transitions.create('transform', {
+      duration: theme.transitions.duration.shortest,
+      easing: theme.transitions.easing.sharp,
+    }),
+  },
   iOSChecked: {
     transform: 'translateX(15px)',
     '& + $iOSBar': {
@@ -116,6 +128,24 @@ class LayerMapSwitches extends React.Component {
             }
             label="Merchants"
           />
+          <FormControlLabel
+            control={
+              <Switch
+                classes={{
+                  switchBase: classes.iOSSwitchBaseYellow,
+                  bar: classes.iOSBar,
+                  icon: classes.iOSIcon,
+                  iconChecked: classes.iOSIconChecked,
+                  checked: classes.iOSChecked,
+                }}
+                disableRipple
+                checked={this.props.tellers}
+                onChange={this.props.onChange('tellerLayer')}
+                value="tellers"
+              />
+            }
+            label="Tellers"
+          />
         </div>
       </FormGroup>
     );
@@ -126,12 +156,14 @@ LayerMapSwitches.propTypes = {
   classes: PropTypes.object.isRequired,
   ambassadors: PropTypes.bool,
   merchants: PropTypes.bool,
+  tellers: PropTypes.bool,
   onChange: PropTypes.func.isRequired,
 };
 
 LayerMapSwitches.defaultProps = {
   ambassadors: true,
-  merchants: true
+  merchants: true,
+  tellers: true
 };
 
 export default withStyles(styles)(LayerMapSwitches);

src/components/PreviewMap.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from 'prop-types';
-import GOOGLE_MAPS_API from '../utils/constants';
+import { GOOGLE_MAPS_API } from '../utils/constants';
 import { compose, withStateHandlers } from 'recompose';
 import {
   withScriptjs,

src/components/pages/MerchantsPage.js

@@ -21,6 +21,8 @@ import Countries from 'country-list';
 import LoadingGif from '../../assets/img/loading_icon.gif';
 import MerchantPin from '../../assets/img/map/merchant_pin.png';
 
+import { WHICH_OPTIONS } from '../../utils/constants';
+
 import "./MerchantsPage.css";
 
 // List of countries
@@ -78,6 +80,7 @@ class MerchantsPage extends Component {
       },
       merchantsSearch: [],
       ambassadorsMarkers: [],
+      tellersMarkers: [],
       loading: true,
       rowsPerPage: [100,200,300],
       numberOfRows: 100,
@@ -168,6 +171,128 @@ class MerchantsPage extends Component {
     app.setState({ ambassadorsMarkers: markers });
   };
 
+  /**
+   * @description Get tellers from the web service
+   * @param {number} [limit=10] - Max items to be returned.
+   * @param {number} [skip=0] - Start index search
+   */
+  getTellers = async (limit = 50, skip = 0) => {
+    const app = this;
+    // Initially we don't know how much the total value is, so to make sure we enter the loop
+    // at least once we're just setting it to be 1
+    let total = 1;
+
+    const tellers = Client.service('api/v2/tellers');
+    this.setState({loading: true});
+    let result;
+    while(skip < total){
+      let partialResponse = await tellers.find({
+        query: {
+          //$sort: { account: 1 },
+          $limit: limit,
+          $skip: skip
+        }
+      });
+      total = partialResponse.total;
+      result === undefined ? result = partialResponse : partialResponse.data.map(this.fillResults(result));
+      skip = skip + limit;
+    }
+
+    result.data.forEach(function(tellers){
+      if(tellers.city !== undefined) tellers.city = (tellers.city).replace(/(^|\s)\S/g, l => l.toUpperCase());
+      if(tellers.country !== undefined) tellers.country = countries.getName(tellers.country);
+    });
+
+    result.data.map(teller => {
+      const infoDescription = <div>
+        <div><b>Address</b>: {teller.address}</div>
+        {(teller.phone) && (<div><b>Phone</b>: {teller.phone}</div>)}
+        </div>;
+      if(teller.telegram){
+        teller.telegram_original = teller.telegram;
+        teller.telegram = {
+          searchText: teller.telegram_original,
+          value: (
+            <a
+              href={`https://t.me/${(teller.telegram_original.trim().charAt(0) === '@') ?
+                teller.telegram_original.trim().slice(1): teller.telegram_original.trim()}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >{teller.telegram}</a>
+          )
+        };
+      }
+
+      teller.link = {
+        searchText: stripProtocol(teller.url),
+        value: (
+          <a target="_blank" rel="noopener noreferrer"
+          href={teller.url}>{stripProtocol(teller.url)}</a>
+        )
+      };
+      teller.location = {
+        searchText: `${teller.country} - ${teller.city}`,
+        value: (teller.city) ? `${teller.city} - ${teller.country}`: teller.country
+      }
+      teller.map = <Button
+        className="App-button"
+        variant="contained"
+        style={{
+            backgroundColor: "#fdcf09",
+            color: 'white',
+            whiteSpace: 'nowrap'
+        }}
+        onClick={() => this.openMaps(teller.gt_name, app.getTellerMarker(teller))}
+      >Show on Map
+      </Button>;
+      return teller;
+    });
+
+    // Once both return, update the state
+    app.setState({
+      loading: false,
+      tellersMarkers: result.data
+    });
+  };
+
+  getTellerMarker = (teller) => {
+    const which = WHICH_OPTIONS.filter(w => w.id.toLowerCase() === teller.which.toLowerCase());
+      teller.which_value = ( teller.which && which.length > 0)  ?
+        which[0].value :
+        '';
+    const infoDescription = (
+      <div>
+        <div><b>Address</b>: {teller.address}</div>
+        {(teller.which) && (<div><b>Which:</b>: {teller.which}</div>)}
+        {(teller.bitshares_address) && (<div><b>BTS Account:</b>: {teller.bitshares_address}</div>)}
+        {(teller.address) && (<div><b>Address:</b>: {teller.address}</div>)}
+        {(teller.telegram_original) && (<div><b>Telegram</b>:
+          <a
+            href={`https://t.me/${(teller.telegram_original.trim().charAt(0) === '@') ? teller.telegram_original.trim().slice(1): teller.telegram_original.trim()}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >{teller.telegram_original}</a>
+          </div>)
+        }
+        {(teller.keybase) && (<div><b>Keybase</b>: {teller.keybase}</div>)}
+        {(teller.whatsapp) && (<div><b>Whatsapp</b>: {teller.whatsapp}</div>)}
+        {(teller.viber) && (<div><b>Viber</b>: {teller.viber}</div>)}
+        {(teller.email) && (<div><b>Email</b>: {teller.email}</div>)}
+        {(teller.phone) && (<div><b>Phone</b>: {teller.phone}</div>)}
+        {(teller.url) && (<div><b>URL:</b>: <a target="_blank" rel="noopener noreferrer"
+          href={teller.url}>{stripProtocol(teller.url)}</a></div>)}
+      </div>
+    );
+    const marker = {
+      lat: teller.lat,
+      lng: teller.lon,
+      withInfo: true,
+      infoTitle: teller.gt_name,
+      infoDescription: infoDescription,
+    };
+    return marker;
+  };
+
   /**
    * @description Get merchants from the web service
    * @param {number} [limit=10] - Max items to be returned.