agorise/palmpay.mx-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add complete info for merchant pin at "show on map"

Browse source
This commit is contained in:
Letícia Camara 2018-12-20 18:48:18 -02:00
parent 30322961de
commit 23e47a73ab
1 changed files with 28 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
src/components/pages/MerchantsPage.js
View file

@ -348,12 +348,7 @@ class MerchantsPage extends Component {
color: 'white', color: 'white',
whiteSpace: 'nowrap' whiteSpace: 'nowrap'
}} }}
onClick={() => this.openMaps( onClick={() => this.openMaps(merchant.name, app.getMerchantMarker(merchant))}
merchant.name,
infoDescription,
merchant.lat,
merchant.lon
)}
>Show on Map >Show on Map
</Button>; </Button>;
return merchant; return merchant;
@ -378,26 +373,18 @@ class MerchantsPage extends Component {
}); });
} }
openMaps(name, address, lat, lon){ openMaps(name, marker){
this.setState({ this.setState({
mapsTitle: name, mapsTitle: name,
mapsDescription: address, mapsDescription: marker.infoDescription,
mapsLat: lat, mapsLat: marker.lat,
mapsLon: lon, mapsLon: marker.lng,
mapsModalIsOpen: true mapsModalIsOpen: true
}); });
} }
handleSearchChange(data){ getMerchantMarker = (merchant) => {
this.setState({ merchantsSearch: data }); const infoDescription = <div>
}
render() {
let { data: merchantsData } = this.state.merchants;
const { ambassadorsMarkers, merchantsSearch } = this.state;
const merchantMarkers = merchantsSearch.map(merchant => {
const infoDescription = <div>
<div><b>Address</b>: {merchant.address}</div> <div><b>Address</b>: {merchant.address}</div>
{(merchant.phone) && (<div><b>Phone</b>: {merchant.phone}</div>)} {(merchant.phone) && (<div><b>Phone</b>: {merchant.phone}</div>)}
{(merchant.telegram_original) && (<div><b>Telegram</b>: {(merchant.telegram_original) && (<div><b>Telegram</b>:
@ -409,15 +396,27 @@ class MerchantsPage extends Component {
</div>)} </div>)}
{(merchant.website) && (<div><b>Website:</b>: <a target="_blank" rel="noopener noreferrer" {(merchant.website) && (<div><b>Website:</b>: <a target="_blank" rel="noopener noreferrer"
href={merchant.website}>{stripProtocol(merchant.website)}</a></div>)} href={merchant.website}>{stripProtocol(merchant.website)}</a></div>)}
</div>; </div>;
const marker = { const marker = {
lat: merchant.lat, lat: merchant.lat,
lng: merchant.lon, lng: merchant.lon,
withInfo: true, withInfo: true,
infoTitle: merchant.name, infoTitle: merchant.name,
infoDescription: infoDescription, infoDescription: infoDescription,
}; };
return marker; return marker;
};
handleSearchChange(data){
this.setState({ merchantsSearch: data });
}
render() {
let { data: merchantsData } = this.state.merchants;
const { ambassadorsMarkers, merchantsSearch } = this.state;
const merchantMarkers = merchantsSearch.map(merchant => {
return this.getMerchantMarker(merchant);
}); });
merchantsData = merchantsData.sort(sortBy('location.searchText')); merchantsData = merchantsData.sort(sortBy('location.searchText'));