diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/publicize/connection.js')
-rw-r--r-- | plugins/jetpack/extensions/blocks/publicize/connection.js | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/publicize/connection.js b/plugins/jetpack/extensions/blocks/publicize/connection.js new file mode 100644 index 00000000..071a275d --- /dev/null +++ b/plugins/jetpack/extensions/blocks/publicize/connection.js @@ -0,0 +1,100 @@ +/** + * Publicize connection form component. + * + * Component to display connection label and a + * checkbox to enable/disable the connection for sharing. + */ + +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Component } from '@wordpress/element'; +import { Disabled, FormToggle, Notice, ExternalLink } from '@wordpress/components'; +import { withSelect } from '@wordpress/data'; +import { includes } from 'lodash'; + +/** + * Internal dependencies + */ +import PublicizeServiceIcon from './service-icon'; +import getSiteFragment from '../../shared/get-site-fragment'; + +class PublicizeConnection extends Component { + /** + * Displays a message when a connection requires reauthentication. We used this when migrating LinkedIn API usage from v1 to v2, + * since the prevous OAuth1 tokens were incompatible with OAuth2. + * + * @returns {object|?null} Notice about reauthentication + */ + maybeDisplayLinkedInNotice = () => + this.connectionNeedsReauth() && ( + <Notice className="jetpack-publicize-notice" isDismissible={ false } status="error"> + <p> + { __( + 'Your LinkedIn connection needs to be reauthenticated ' + + 'to continue working – head to Sharing to take care of it.', + 'jetpack' + ) } + </p> + <ExternalLink href={ `https://wordpress.com/marketing/connections/${ getSiteFragment() }` }> + { __( 'Go to Sharing settings', 'jetpack' ) } + </ExternalLink> + </Notice> + ); + + /** + * Check whether the connection needs to be reauthenticated. + * + * @returns {boolean} True if connection must be reauthenticated. + */ + connectionNeedsReauth = () => includes( this.props.mustReauthConnections, this.props.name ); + + onConnectionChange = () => { + const { id } = this.props; + this.props.toggleConnection( id ); + }; + + connectionIsFailing() { + const { failedConnections, name } = this.props; + return failedConnections.some( connection => connection.service_name === name ); + } + + render() { + const { disabled, enabled, id, label, name } = this.props; + const fieldId = 'connection-' + name + '-' + id; + // Genericon names are dash separated + const serviceName = name.replace( '_', '-' ); + + let toggle = ( + <FormToggle + id={ fieldId } + className="jetpack-publicize-connection-toggle" + checked={ enabled } + onChange={ this.onConnectionChange } + /> + ); + + if ( disabled || this.connectionIsFailing() || this.connectionNeedsReauth() ) { + toggle = <Disabled>{ toggle }</Disabled>; + } + + return ( + <li> + { this.maybeDisplayLinkedInNotice() } + <div className="publicize-jetpack-connection-container"> + <label htmlFor={ fieldId } className="jetpack-publicize-connection-label"> + <PublicizeServiceIcon serviceName={ serviceName } /> + <span className="jetpack-publicize-connection-label-copy">{ label }</span> + </label> + { toggle } + </div> + </li> + ); + } +} + +export default withSelect( select => ( { + failedConnections: select( 'jetpack/publicize' ).getFailedConnections(), + mustReauthConnections: select( 'jetpack/publicize' ).getMustReauthConnections(), +} ) )( PublicizeConnection ); |