From 094a7a075f089063622eb00d5fbbca15ba45fc0b Mon Sep 17 00:00:00 2001
From: ibrahim-mamdouh-ft <ibrahim.mamdouh@ft.com>
Date: Wed, 16 Oct 2024 13:26:15 +0300
Subject: [PATCH 1/3] WIP: share highlight preview when copying a link

---
 components/x-gift-article/src/UrlSection.jsx  | 28 +++++++++++++++++--
 .../src/lib/share-link-actions.js             |  2 +-
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/components/x-gift-article/src/UrlSection.jsx b/components/x-gift-article/src/UrlSection.jsx
index 48c1346da..7e8a334e0 100644
--- a/components/x-gift-article/src/UrlSection.jsx
+++ b/components/x-gift-article/src/UrlSection.jsx
@@ -1,10 +1,21 @@
 import { h } from '@financial-times/x-engine'
+import { trimHighlights } from './lib/highlightsHelpers'
 import CopyConfirmation from './CopyConfirmation'
 import { ShareType } from './lib/constants'
 import { SocialShareButtons } from './SocialShareButtons'
 
 export const UrlSection = (props) => {
-	const { urlType, url, actions, shareType, showCopyConfirmation, enterpriseEnabled } = props
+	const {
+		urlType,
+		url,
+		actions,
+		shareType,
+		showCopyConfirmation,
+		enterpriseEnabled,
+		includeHighlights,
+		article,
+		highlight
+	} = props
 
 	const copyLinkHandler = (event) => {
 		switch (shareType) {
@@ -28,7 +39,18 @@ export const UrlSection = (props) => {
 				data-section-id={shareType + 'Link'}
 				data-trackable="copy-link"
 			>
-				<input id="share-link" type="text" name={urlType} value={url} readOnly />
+				{includeHighlights ? (
+					<textarea
+						rows={12}
+						cols={100}
+						id="share-link"
+						name={urlType}
+						value={`${article.title} - "${trimHighlights(highlight)}"\n\n${url}`}
+						readOnly
+					/>
+				) : (
+					<input id="share-link" type="text" name={urlType} value={url} readOnly />
+				)}
 				<button
 					className={`o-buttons o-buttons--big o-buttons--primary ${
 						enterpriseEnabled ? 'o-buttons--professional' : ''
@@ -36,7 +58,7 @@ export const UrlSection = (props) => {
 					aria-label="Copy link of the gift article to your clipboard"
 					onClick={copyLinkHandler}
 				>
-					Copy link
+					{includeHighlights ? 'Copy' : 'Copy link'}
 				</button>
 				{showCopyConfirmation && <CopyConfirmation hideCopyConfirmation={actions.hideCopyConfirmation} />}
 			</div>
diff --git a/components/x-gift-article/src/lib/share-link-actions.js b/components/x-gift-article/src/lib/share-link-actions.js
index 4006519bb..c8d4379b9 100644
--- a/components/x-gift-article/src/lib/share-link-actions.js
+++ b/components/x-gift-article/src/lib/share-link-actions.js
@@ -26,7 +26,7 @@ function createMailtoUrl({ article, includeHighlights, highlight }, shareUrl) {
 
 function copyToClipboard(event) {
 	const urlSection = event.target.closest('.js-gift-article__url-section')
-	const inputEl = urlSection.querySelector('input')
+	const inputEl = urlSection.querySelector('#share-link')
 	const oldContentEditable = inputEl.contentEditable
 	const oldReadOnly = inputEl.readOnly
 	const range = document.createRange()

From 8c6351354e72f43619d5f40d9c418e10aa180b25 Mon Sep 17 00:00:00 2001
From: Omar Bassam <omar.bassam88@gmail.com>
Date: Mon, 21 Oct 2024 13:03:01 +0300
Subject: [PATCH 2/3] fix: fix styling for textarea

---
 components/x-gift-article/src/ShareArticleDialog.scss | 4 ++++
 components/x-gift-article/src/UrlSection.jsx          | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/x-gift-article/src/ShareArticleDialog.scss b/components/x-gift-article/src/ShareArticleDialog.scss
index 83ac29569..2186e876c 100644
--- a/components/x-gift-article/src/ShareArticleDialog.scss
+++ b/components/x-gift-article/src/ShareArticleDialog.scss
@@ -147,6 +147,10 @@
 			margin: 0;
 		}
 
+		#share-link {
+			margin-bottom: oSpacingByName('s4');
+		}
+
 		padding: oSpacingByName('s4');
 
 		.share-article-dialog__header {
diff --git a/components/x-gift-article/src/UrlSection.jsx b/components/x-gift-article/src/UrlSection.jsx
index 7e8a334e0..9b131c6ab 100644
--- a/components/x-gift-article/src/UrlSection.jsx
+++ b/components/x-gift-article/src/UrlSection.jsx
@@ -42,7 +42,7 @@ export const UrlSection = (props) => {
 				{includeHighlights ? (
 					<textarea
 						rows={12}
-						cols={100}
+						cols={40}
 						id="share-link"
 						name={urlType}
 						value={`${article.title} - "${trimHighlights(highlight)}"\n\n${url}`}

From bf63df4ce1ee186aa4322adcc64017adca6a3045 Mon Sep 17 00:00:00 2001
From: Omar Bassam <omar.bassam88@gmail.com>
Date: Mon, 21 Oct 2024 13:57:06 +0300
Subject: [PATCH 3/3] fix: updated tests to match new functionality

---
 .../__tests__/x-gift-article.test.jsx             | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/x-gift-article/__tests__/x-gift-article.test.jsx b/components/x-gift-article/__tests__/x-gift-article.test.jsx
index dcdbeb28c..0ee395a3b 100644
--- a/components/x-gift-article/__tests__/x-gift-article.test.jsx
+++ b/components/x-gift-article/__tests__/x-gift-article.test.jsx
@@ -24,6 +24,9 @@ const baseArgs = {
 		'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum quos, quis quas ad, minima fuga at nemo deleniti hic repellendus totam. Impedit mollitia quam repellat harum. Nostrum sapiente minima soluta , Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum quos, quis quas ad, minima fuga at nemo deleniti hic repellendus totam. Impedit mollitia quam repellat harum. Nostrum sapiente minima soluta.'
 }
 
+const trimmedHighlight = baseArgs.highlight.split(' ').slice(0, 30).join(' ')
+const expectedHighlightText = `${baseArgs.article.title} - "${trimmedHighlight} ..."`
+
 describe('x-gift-article', () => {
 	let actions = {}
 
@@ -85,8 +88,8 @@ describe('x-gift-article', () => {
 
 		subject.update()
 
-		const input = subject.find('input#share-link')
-		expect(input.prop('value')).toEqual('https://shortened-non-gift-url')
+		const input = subject.find('#share-link')
+		expect(input.prop('value')).toEqual(expectedHighlightText + '\n\n' + 'https://shortened-non-gift-url')
 	})
 
 	it('should call createGiftUrl and display correct url', async () => {
@@ -96,9 +99,9 @@ describe('x-gift-article', () => {
 
 		subject.update()
 
-		const input = subject.find('input#share-link')
+		const input = subject.find('#share-link')
 
-		expect(input.prop('value')).toEqual('https://shortened-gift-url')
+		expect(input.prop('value')).toEqual(expectedHighlightText + '\n\n' + 'https://shortened-gift-url')
 	})
 
 	it('should call createEnterpriseUrl and display correct url', async () => {
@@ -108,8 +111,8 @@ describe('x-gift-article', () => {
 
 		subject.update()
 
-		const input = subject.find('input#share-link')
-		expect(input.prop('value')).toEqual('https://gift-url-redeemed')
+		const input = subject.find('#share-link')
+		expect(input.prop('value')).toEqual(expectedHighlightText + '\n\n' + 'https://gift-url-redeemed')
 	})
 
 	it('when credits are available, an alert is not shown', async () => {