Merge pull request #806 from Yoast/dont-show-empty-read-more-button

Don't show empty read more button for course bundles
Yoast · Jan 16, 2019 · 5813f5e · 5813f5e
2 parents 08aa1ee + 690c802
commit 5813f5e
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 9 deletions.
diff --git a/composites/CoursesOverview/CardDetails.js b/composites/CoursesOverview/CardDetails.js
@@ -123,7 +123,6 @@ class CardDetails extends React.Component {
 	 */
 	render() {
 		const buttonType = this.props.ctaButtonData.ctaButtonType === "regular" ? CardRegularButton : CardUpsellButton;
-		const OutboundLinkButton = makeOutboundLink( buttonType );
 
 		return (
 			<Fragment>
@@ -132,17 +131,39 @@ class CardDetails extends React.Component {
 						dangerouslySetInnerHTML={ { __html: this.props.description } }
 					/>
 				</Details>
-				<ActionBlock>
-					<OutboundLinkButton href={ this.props.ctaButtonData.ctaButtonUrl } rel={ null }>
-						{ this.props.ctaButtonData.ctaButtonCopy }
-					</OutboundLinkButton>
-					<OutboundInfoLink href={ this.props.courseUrl } rel={ null }>
-						{ this.props.readMoreLinkText }
-					</OutboundInfoLink>
-				</ActionBlock>
+				{ this.getActionBlock( buttonType, this.props.isBundle ) }
 			</Fragment>
 		);
 	}
+
+	/**
+	 * Returns the correct Action Block based on whether an item is a bundle or a single course.
+	 *
+	 * @param {string} buttonType The type of the button. Either regular or sale.
+	 * @param {boolean} isBundle True when the it's a bundle.
+	 *
+	 * @returns {ReactElement} The ActionBlock component.
+	 */
+	getActionBlock( buttonType, isBundle ) {
+		const OutboundLinkButton = makeOutboundLink( buttonType );
+
+		// Bundles don't have an OutboundInfoLink and use a different property from the feed for the OutboundLinkButton.
+		if ( isBundle === "true" ) {
+			return <ActionBlock>
+				<OutboundLinkButton href={ this.props.courseUrl } rel={ null }>
+					{ this.props.ctaButtonData.ctaButtonCopy }
+				</OutboundLinkButton>
+			</ActionBlock>;
+		}
+		return <ActionBlock>
+			<OutboundLinkButton href={ this.props.ctaButtonData.ctaButtonUrl } rel={ null }>
+				{ this.props.ctaButtonData.ctaButtonCopy }
+			</OutboundLinkButton>
+			<OutboundInfoLink href={ this.props.courseUrl } rel={ null }>
+				{ this.props.readMoreLinkText }
+			</OutboundInfoLink>
+		</ActionBlock>;
+	}
 }
 
 export default CardDetails;
@@ -152,11 +173,13 @@ CardDetails.propTypes = {
 	courseUrl: PropTypes.string,
 	ctaButtonData: PropTypes.object,
 	readMoreLinkText: PropTypes.string,
+	isBundle: PropTypes.bool,
 };
 
 CardDetails.defaultProps = {
 	description: "",
 	courseUrl: "",
 	ctaButtonData: {},
 	readMoreLinkText: "",
+	isBundle: false,
 };
diff --git a/utils/getCourseFeed.js b/utils/getCourseFeed.js
@@ -33,6 +33,7 @@ function parseCourseFeedItem( parsed, snapshot, nsResolver ) {
 	item.ctaButtonUrl        = getXPathText( "child::content:cta_button_url", parsed, snapshot, nsResolver );
 	item.readMoreLinkText    = getXPathText( "child::content:read_more_link_text", parsed, snapshot, nsResolver );
 	item.isFree              = getXPathText( "child::content:is_free", parsed, snapshot, nsResolver );
+	item.isBundle            = getXPathText( "child::content:is_bundle", parsed, snapshot, nsResolver );
 
 	return item;
 }