Add tellers switch to LayerMapSwitches component
This commit is contained in:
Letícia Camara
parent
1057d09a50
commit
12c2368552
4 changed files with 462 additions and 10 deletions
|
|
@ -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: []}
|
||||
merchants={this.state.merchantLayer ? this.props.merchants: []}
|
||||
ambassadors={this.state.ambassadorLayer ? this.state.ambassadors: []}
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Reference in a new issue