Merge pull request #8684 from Yoast/stories/af/341-redesign-help-cent…

…er-support-tab Redesign the Help Center support tab.
Yoast · Jan 22, 2018 · 2de6ee7 · 2de6ee7
2 parents ebac659 + e2f1685
commit 2de6ee7
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 11 deletions.
diff --git a/admin/class-help-center.php b/admin/class-help-center.php
@@ -101,6 +101,26 @@ protected function format_data( array $tabs ) {
 			),
 		);
 
+		$formatted_data['contactSupportParagraphs'] = array(
+			array(
+				'image' => array(
+					'src'    => esc_url( plugin_dir_url( WPSEO_FILE ) . 'images/support-team.svg' ),
+					'width'  => 100,
+					'height' => 100,
+					'alt'    => '',
+				),
+				'content'  => null,
+			),
+			array(
+				'image' => null,
+				'content'  => __( 'If you have a problem that you can\'t solve with our video tutorials or knowledge base, you can send a message to our support team. They can be reached 24/7.', 'wordpress-seo' ),
+			),
+			array(
+				'image' => null,
+				'content' => __( 'Support requests you create here are sent directly into our support system, which is secured with 256 bit SSL, so communication is 100% secure.', 'wordpress-seo' ),
+			),
+		);
+
 		$formatted_data['extraTabs'] = $this->get_extra_tabs();
 
 		return $formatted_data;
@@ -216,7 +236,7 @@ public static function get_translated_texts() {
 													),
 			'searchResult.searchResultsHeading'  => __( 'Search results', 'wordpress-seo' ),
 			'a11yNotice.opensInNewTab'           => __( '(Opens in a new browser tab)', 'wordpress-seo' ),
-			'contactSupport.button'              => __( 'Open support form', 'wordpress-seo' ),
+			'contactSupport.button'              => __( 'New support request', 'wordpress-seo' ),
 			'helpCenter.buttonText'              => __( 'Need help?', 'wordpress-seo' ),
 		);
 	}

diff --git a/css/src/admin-global.scss b/css/src/admin-global.scss
@@ -342,8 +342,27 @@ td.column-wpseo-linked {
 	display: none;
 }
 
-.contact-premium-support-container  {
-	text-align: center;
+.contact-premium-support {
+ 	text-align: center;
+
+	&__content {
+		margin: 0 auto 1.5em;
+		font-size: 0.9375rem;
+		line-height: 1.4;
+
+		&:nth-child( 2 ) {
+			max-width: 610px;
+		}
+
+		&:nth-child( 3 ) {
+			max-width: 560px;
+		}
+	}
+
+	// Higher specificity.
+	& &__button {
+		margin-bottom: 48px;
+	}
 }
 
 .wpseo-premium-description {

diff --git a/images/support-team.svg b/images/support-team.svg
diff --git a/js/src/wp-seo-help-center.js b/js/src/wp-seo-help-center.js
@@ -16,17 +16,13 @@ import { YoastButton } from "yoast-components/composites/Plugin/Shared/component
  * Executes an action with an argument.
  */
 class ContactSupport extends React.Component {
-	componentDidMount() {
-		this.execute();
-	}
-
 	/**
 	 * Execute the contact support callback.
 	 *
 	 * @returns {void}
 	 */
 	execute() {
-		if( this.props.do ) {
+		if ( this.props.do ) {
 			this.props.do(
 				this.props.with
 			);
@@ -40,8 +36,18 @@ class ContactSupport extends React.Component {
 	 */
 	render() {
 		return (
-			<div className="contact-premium-support-container">
+			<div className="contact-premium-support">
+				{ this.props.paragraphs.map( ( paragraph, index ) => {
+					const { image, content } = paragraph;
+					return (
+						<p key={ index } className="contact-premium-support__content">
+							{ image ? <img src={ image.src } width={ image.width } height={ image.height } alt={ image.alt } /> : null }
+							{ content }
+						</p>
+					);
+				} ) }
 				<YoastButton
+					className="contact-premium-support__button"
 					onClick={ this.execute.bind( this ) }>
 					{ this.props.buttonText }
 				</YoastButton>
@@ -54,6 +60,7 @@ ContactSupport.propTypes = {
 	buttonText: PropTypes.string,
 	"do": PropTypes.func,
 	"with": PropTypes.any,
+	paragraphs: PropTypes.array.isRequired,
 };
 
 /**
@@ -129,7 +136,7 @@ class HelpCenter extends React.Component {
 		const tabs = [];
 
 		// Video tab
-		if( this.state.videoUrl ) {
+		if ( this.state.videoUrl ) {
 			tabs.push( {
 				id: "video-tutorial",
 				label: formatMessage( { id: "videoTutorial" } ),
@@ -162,7 +169,7 @@ class HelpCenter extends React.Component {
 	getAdditionalTabs() {
 		const additionalTabs = [];
 
-		if( ! this.props.additionalHelpCenterTabs ) {
+		if ( ! this.props.additionalHelpCenterTabs ) {
 			return additionalTabs;
 		}
 
@@ -171,6 +178,7 @@ class HelpCenter extends React.Component {
 			if ( this.props.shouldDisplayContactForm === "1" && tab.identifier === "contact-support" ) {
 				const supportButton = this.props.intl.formatMessage( { id: "contactSupport.button" } );
 				content = <ContactSupport
+					paragraphs={ this.props.contactFormParagraphs }
 					buttonText={ supportButton }
 					do={ this.props.onPremiumSupport }
 					with={ this.state.usedQueries } />;
@@ -215,6 +223,7 @@ HelpCenter.propTypes = {
 	additionalHelpCenterTabs: PropTypes.array,
 	videoTutorialParagraphs: PropTypes.array,
 	shouldDisplayContactForm: PropTypes.string,
+	contactFormParagraphs: PropTypes.array,
 	initialTab: PropTypes.string,
 	intl: intlShape.isRequired,
 };
@@ -283,6 +292,7 @@ if ( window.wpseoHelpCenterData ) {
 				additionalHelpCenterTabs={ wpseoHelpCenterData.extraTabs }
 				videoTutorialParagraphs={ wpseoHelpCenterData.videoDescriptions }
 				shouldDisplayContactForm={ wpseoHelpCenterData.shouldDisplayContactForm }
+				contactFormParagraphs={ wpseoHelpCenterData.contactSupportParagraphs }
 			/>
 		</IntlProvider>,
 		document.getElementById( wpseoHelpCenterData.mountId )