feat: add preview to shared links

Financial-Times · Aug 27, 2024 · ae1d742 · ae1d742
1 parent 2dbcbe1
commit ae1d742
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 15 deletions.
diff --git a/components/x-gift-article/src/GiftArticle.jsx b/components/x-gift-article/src/GiftArticle.jsx
@@ -313,7 +313,7 @@ const withGiftFormActions = withActions(
 			mailtoUrls: {
 				gift: undefined,
 				enterprise: undefined,
-				nonGift: createMailtoUrl(props.article.title, `${props.article.url}?shareType=nongift`)
+				nonGift: createMailtoUrl(props, `${props.article.url}?shareType=nongift`)
 			},
 			showFreeArticleAlert: false
 		}

diff --git a/components/x-gift-article/src/IncludeHighlights.jsx b/components/x-gift-article/src/IncludeHighlights.jsx
@@ -1,5 +1,5 @@
 import { h } from '@financial-times/x-engine'
-import { canShareWithNonSubscribers, isNonSubscriberOption } from './lib/highlightsHelpers'
+import { canShareWithNonSubscribers, isNonSubscriberOption, trimHighlights } from './lib/highlightsHelpers'
 
 export const IncludeHighlights = (props) => {
 	const { actions, highlight, enterpriseEnabled, includeHighlights } = props
@@ -17,9 +17,9 @@ export const IncludeHighlights = (props) => {
 			className="o-forms-field o-forms-field--optional o-forms-field--professional share-article-dialog__include-highlights"
 			role="group"
 		>
-			<p className="shared-article-dialog__include-highlights-quote">
-				{highlight.split(' ').length > 30 ? `${highlight.split(' ').slice(0, 30).join(' ')} ...` : highlight}
-			</p>
+			{includeHighlights && (
+				<p className="shared-article-dialog__include-highlights-quote">{trimHighlights(highlight)}</p>
+			)}
 			<div className="o-forms-input o-forms-input--checkbox o-forms-field">
 				<label htmlFor="excludeHighlights">
 					<input

diff --git a/components/x-gift-article/src/SocialShareButtons.jsx b/components/x-gift-article/src/SocialShareButtons.jsx
@@ -1,7 +1,17 @@
 import { h } from '@financial-times/x-engine'
 import { ShareType } from './lib/constants'
+import { trimHighlights } from './lib/highlightsHelpers'
 
-export const SocialShareButtons = ({ actions, mailtoUrl, shareType, enterpriseEnabled, url, article }) => {
+export const SocialShareButtons = ({
+	actions,
+	mailtoUrl,
+	shareType,
+	enterpriseEnabled,
+	url,
+	article,
+	highlight,
+	includeHighlights
+}) => {
 	const onClickHandler = (event) => {
 		switch (shareType) {
 			case ShareType.gift:
@@ -17,17 +27,19 @@ export const SocialShareButtons = ({ actions, mailtoUrl, shareType, enterpriseEn
 		}
 	}
 
+	const sharedText = includeHighlights ? `${article.title} - "${trimHighlights(highlight)}"` : article.title
+
 	const mobileShareLinks = {
 		facebook: `http://www.facebook.com/sharer.php?u=${encodeURIComponent(url)}&t=${encodeURIComponent(
-			article.title
+			sharedText
 		)}`,
 		twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(
-			article.title
+			sharedText
 		)}&via=financialtimes`,
-		linkedin: `http://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(
+		linkedin: `https://linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(
 			url
-		)}&title=${encodeURIComponent(article.title)}&source=Financial+Times`,
-		whatsapp: `https://wa.me?text=${encodeURIComponent(article.title)}%20-%20${encodeURIComponent(url)}`
+		)}&text='${sharedText}'`,
+		whatsapp: `https://wa.me?text=${encodeURIComponent(sharedText)}%20-%20${encodeURIComponent(url)}`
 	}
 
 	return (

diff --git a/components/x-gift-article/src/lib/highlightsHelpers.js b/components/x-gift-article/src/lib/highlightsHelpers.js
@@ -39,3 +39,6 @@ export const canShareWithNonSubscribers = ({ giftCredits, enterpriseHasCredits }
 
 export const isNonSubscriberOption = ({ showNonSubscriberOptions, showAdvancedSharingOptions }) =>
 	showNonSubscriberOptions || showAdvancedSharingOptions
+
+export const trimHighlights = (text, maxWordsCount = 30) =>
+	text.split(' ').length > maxWordsCount ? `${text.split(' ').slice(0, maxWordsCount).join(' ')} ...` : text
diff --git a/components/x-gift-article/src/lib/share-link-actions.js b/components/x-gift-article/src/lib/share-link-actions.js
@@ -1,3 +1,4 @@
+const { trimHighlights } = require('./highlightsHelpers')
 function getGreeting() {
 	const hours = new Date().getHours()
 	// Determine the appropriate greeting based on the current hour
@@ -12,11 +13,12 @@ function getGreeting() {
 	return 'Good evening'
 }
 
-function createMailtoUrl(articleTitle, shareUrl) {
+function createMailtoUrl({ article, includeHighlights, highlight }, shareUrl) {
 	const subject = 'Read this article from the Financial Times'
 	const greeting = getGreeting()
+	const sharedText = includeHighlights ? `${article.title} - "${trimHighlights(highlight)}"` : article.title
 	const body = encodeURIComponent(
-		`${greeting},\n\nI read this article from the Financial Times and thought it would interest you.\n\n${articleTitle}\n${shareUrl}\n\nBest wishes,`
+		`${greeting},\n\nI read this article from the Financial Times and thought it would interest you.\n\n${sharedText}\n${shareUrl}\n\nBest wishes,`
 	)
 
 	return `mailto:?subject=${subject}&body=${body}`

diff --git a/components/x-gift-article/src/lib/updaters.js b/components/x-gift-article/src/lib/updaters.js
@@ -66,7 +66,7 @@ export const hideNonSubscriberSharingOptions = (props) => ({
 export const setGiftUrl =
 	(url, redemptionLimit, isShortened, isEnterprise = false) =>
 	(props) => {
-		const mailtoUrl = createMailtoUrl(props.article.title, url)
+		const mailtoUrl = createMailtoUrl(props, url)
 
 		return {
 			url,
@@ -100,7 +100,7 @@ export const setAllowance = (giftCredits, monthlyAllowance, nextRenewalDate) =>
 }
 
 export const setShortenedNonGiftUrl = (shortenedUrl) => (props) => {
-	const mailtoUrl = createMailtoUrl(props.article.title, shortenedUrl)
+	const mailtoUrl = createMailtoUrl(props, shortenedUrl)
 
 	return {
 		url: shortenedUrl,