diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/contact-info/address/save.js')
-rw-r--r-- | plugins/jetpack/extensions/blocks/contact-info/address/save.js | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/contact-info/address/save.js b/plugins/jetpack/extensions/blocks/contact-info/address/save.js new file mode 100644 index 00000000..fd1ba8bb --- /dev/null +++ b/plugins/jetpack/extensions/blocks/contact-info/address/save.js @@ -0,0 +1,85 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Fragment } from '@wordpress/element'; + +const hasAddress = ( { address, addressLine2, addressLine3, city, region, postal, country } ) => { + return [ address, addressLine2, addressLine3, city, region, postal, country ].some( + value => value !== '' + ); +}; + +const Address = ( { + attributes: { address, addressLine2, addressLine3, city, region, postal, country }, +} ) => ( + <Fragment> + { address && ( + <div className="jetpack-address__address jetpack-address__address1">{ address }</div> + ) } + { addressLine2 && ( + <div className="jetpack-address__address jetpack-address__address2">{ addressLine2 }</div> + ) } + { addressLine3 && ( + <div className="jetpack-address__address jetpack-address__address3">{ addressLine3 }</div> + ) } + { city && ! ( region || postal ) && <div className="jetpack-address__city">{ city }</div> } + { city && ( region || postal ) && ( + <div> + { [ + <span className="jetpack-address__city">{ city }</span>, + ', ', + <span className="jetpack-address__region">{ region }</span>, + ' ', + <span className="jetpack-address__postal">{ postal }</span>, + ] } + </div> + ) } + { ! city && ( region || postal ) && ( + <div> + { [ + <span className="jetpack-address__region">{ region }</span>, + ' ', + <span className="jetpack-address__postal">{ postal }</span>, + ] } + </div> + ) } + { country && <div className="jetpack-address__country">{ country }</div> } + </Fragment> +); + +export const googleMapsUrl = ( { + attributes: { address, addressLine2, addressLine3, city, region, postal, country }, +} ) => { + const addressUrl = address ? `${ address },` : ''; + const addressLine2Url = addressLine2 ? `${ addressLine2 },` : ''; + const addressLine3Url = addressLine3 ? `${ addressLine3 },` : ''; + const cityUrl = city ? `+${ city },` : ''; + let regionUrl = region ? `+${ region },` : ''; + regionUrl = postal ? `${ regionUrl }+${ postal }` : regionUrl; + const countryUrl = country ? `+${ country }` : ''; + + return `https://www.google.com/maps/search/${ addressUrl }${ addressLine2Url }${ addressLine3Url }${ cityUrl }${ regionUrl }${ countryUrl }`.replace( + ' ', + '+' + ); +}; + +const save = props => + hasAddress( props.attributes ) && ( + <div className={ props.className }> + { props.attributes.linkToGoogleMaps && ( + <a + href={ googleMapsUrl( props ) } + target="_blank" + rel="noopener noreferrer" + title={ __( 'Open address in Google Maps', 'jetpack' ) } + > + <Address { ...props } /> + </a> + ) } + { ! props.attributes.linkToGoogleMaps && <Address { ...props } /> } + </div> + ); + +export default save; |