From 2dbcbe148a3bcbd36f2a02389b3b8e61504cefda Mon Sep 17 00:00:00 2001 From: ibrahim-mamdouh-ft Date: Mon, 26 Aug 2024 18:59:53 +0300 Subject: [PATCH 1/3] feat: add highlight preview to x-article-gift --- .../__tests__/x-gift-article.test.jsx | 12 ++++--- components/x-gift-article/src/GiftArticle.jsx | 33 +++++-------------- .../x-gift-article/src/IncludeHighlights.jsx | 23 ++++++++----- .../src/ShareArticleDialog.scss | 8 +++++ .../share-article-modal-b2b-highlights.jsx | 3 +- ...icle-modal-b2b-save-highlights-message.jsx | 1 - ...dal-with-advanced-sharing-free-article.jsx | 3 +- ...-with-advanced-sharing-no-both-credits.jsx | 3 +- ...advanced-sharing-no-enterprise-credits.jsx | 3 +- ...-with-advanced-sharing-no-gift-credits.jsx | 3 +- ...vanced-sharing-save-highlights-message.jsx | 1 - ...re-article-modal-with-advanced-sharing.jsx | 3 +- 12 files changed, 50 insertions(+), 46 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 d917b1117..dcdbeb28c 100644 --- a/components/x-gift-article/__tests__/x-gift-article.test.jsx +++ b/components/x-gift-article/__tests__/x-gift-article.test.jsx @@ -20,7 +20,8 @@ const baseArgs = { }, id: 'base-gift-article-static-id', enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`, - hasHighlights: true + highlight: + '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.' } describe('x-gift-article', () => { @@ -128,7 +129,8 @@ describe('x-gift-article', () => { showAdvancedSharingOptions: true, giftCredits: 10, monthlyAllowance: 100, - hasHighlights: true + highlight: + '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.' } // Add a message to the document body to simulate the banner that is shown when the article content has changed. @@ -155,7 +157,8 @@ describe('x-gift-article', () => { showAdvancedSharingOptions: true, giftCredits: 10, monthlyAllowance: 100, - hasHighlights: true + highlight: + '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.' } delete window.location @@ -178,7 +181,8 @@ describe('x-gift-article', () => { showAdvancedSharingOptions: true, giftCredits: 10, monthlyAllowance: 100, - hasHighlights: true + highlight: + '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.' } delete window.location diff --git a/components/x-gift-article/src/GiftArticle.jsx b/components/x-gift-article/src/GiftArticle.jsx index 2c662abfc..21d0ce9eb 100644 --- a/components/x-gift-article/src/GiftArticle.jsx +++ b/components/x-gift-article/src/GiftArticle.jsx @@ -27,27 +27,21 @@ const withGiftFormActions = withActions( showGiftUrlSection() { return updaters.showGiftUrlSection }, - showEnterpriseUrlSection() { return updaters.showGiftEnterpriseSection }, - showNonSubscriberSharingOptions() { return updaters.showNonSubscriberSharingOptions }, - showNonGiftUrlSection() { return updaters.showNonGiftUrlSection }, - showAdvancedSharingOptions() { return updaters.showAdvancedSharingOptions }, - hideNonSubscriberSharingOptions() { return updaters.hideNonSubscriberSharingOptions }, - async createGiftUrl() { return async (state) => { let response @@ -67,7 +61,6 @@ const withGiftFormActions = withActions( } } }, - async shortenNonGiftUrl() { return async (state) => { if (state.isNonGiftUrlShortened) { @@ -94,7 +87,6 @@ const withGiftFormActions = withActions( } } }, - async createEnterpriseUrl() { return async (state) => { const { redemptionUrl, redemptionLimit } = await enterpriseApi.getESUrl( @@ -117,7 +109,6 @@ const withGiftFormActions = withActions( } } }, - copyGiftUrl(event) { copyToClipboard(event) @@ -128,7 +119,6 @@ const withGiftFormActions = withActions( return { showCopyConfirmation: true } } }, - copyEnterpriseUrl(event) { copyToClipboard(event) @@ -139,7 +129,6 @@ const withGiftFormActions = withActions( return { showCopyConfirmation: true } } }, - copyNonGiftUrl(event) { copyToClipboard(event) @@ -150,33 +139,27 @@ const withGiftFormActions = withActions( return { showCopyConfirmation: true } } }, - emailGiftUrl() { return (state) => { tracking.emailLink('giftLink', state.urls.gift) } }, - emailEnterpriseUrl() { return (state) => { tracking.emailLink('enterpriseLink', state.urls.enterprise) } }, - emailNonGiftUrl() { return (state) => { tracking.emailLink('nonGiftLink', state.urls.nonGift) } }, - hideCopyConfirmation() { return { showCopyConfirmation: false } }, - shareByNativeShare() { throw new Error(`shareByNativeShare should be implemented by x-gift-article's consumers`) }, - activate() { return async (state) => { const { enabled, limit, hasCredits, requestAccess, budget, isRegisteredUser } = @@ -253,12 +236,6 @@ const withGiftFormActions = withActions( return { includeHighlights } } }, - checkIfHasHighlights() { - return (state) => { - state.hasHighlights = !!document.getElementsByClassName(state.highlightClassName).length - return { hasHighlights: state.hasHighlights } - } - }, saveHighlightsHandler() { return () => { return { @@ -281,6 +258,12 @@ const withGiftFormActions = withActions( showHighlightsSuccessMessage: false } } + }, + getHighlightPreview() { + return (state) => { + state.highlight = document.querySelector(`.${state.highlightClassName}`)?.textContent + return { highlight: state.highlight } + } } } }, @@ -312,10 +295,10 @@ const withGiftFormActions = withActions( isGiftUrlCreated: false, isGiftUrlShortened: false, isNonGiftUrlShortened: false, - includeHighlights: false, + includeHighlights: true, showAdvancedSharingOptions: false, showNonSubscriberOptions: false, - hasHighlights: false, + highlight: undefined, showHighlightsRecipientMessage, showHighlightsSuccessMessage: false, showHighlightsCheckbox: !new URL(location.href).searchParams.has('highlights'), diff --git a/components/x-gift-article/src/IncludeHighlights.jsx b/components/x-gift-article/src/IncludeHighlights.jsx index 66224f1dd..68839a550 100644 --- a/components/x-gift-article/src/IncludeHighlights.jsx +++ b/components/x-gift-article/src/IncludeHighlights.jsx @@ -2,31 +2,36 @@ import { h } from '@financial-times/x-engine' import { canShareWithNonSubscribers, isNonSubscriberOption } from './lib/highlightsHelpers' export const IncludeHighlights = (props) => { - const { actions, hasHighlights, enterpriseEnabled, includeHighlights } = props + const { actions, highlight, enterpriseEnabled, includeHighlights } = props const _canShareWithNonSubscribers = canShareWithNonSubscribers(props) const _isNonSubscriberOption = isNonSubscriberOption(props) const includeHighlightsHandler = (event) => { - actions.setIncludeHighlights(event.target.checked) + actions.setIncludeHighlights(!event.target.checked) } - return hasHighlights && enterpriseEnabled && (_canShareWithNonSubscribers || !_isNonSubscriberOption) ? ( + return highlight !== undefined && + enterpriseEnabled && + (_canShareWithNonSubscribers || !_isNonSubscriberOption) ? (
+

+ {highlight.split(' ').length > 30 ? `${highlight.split(' ').slice(0, 30).join(' ')} ...` : highlight} +

-
diff --git a/components/x-gift-article/src/ShareArticleDialog.scss b/components/x-gift-article/src/ShareArticleDialog.scss index 31038308c..8b3c3aca7 100644 --- a/components/x-gift-article/src/ShareArticleDialog.scss +++ b/components/x-gift-article/src/ShareArticleDialog.scss @@ -199,6 +199,14 @@ margin-top: oSpacingByName('s6'); } + .shared-article-dialog__include-highlights-quote { + @include oTypographyDisplay($scale: 0, $weight: 'semibold'); + margin-top: 0; + margin-bottom: oSpacingByName('s4'); + padding: oSpacingByName('s1') oSpacingByName('s2'); + background-color: rgba(255, 236, 26, 0.5); + } + .share-article-dialog__create-link-button { width: 100%; margin-top: oSpacingByName('s6'); diff --git a/components/x-gift-article/storybook/share-article-modal-b2b-highlights.jsx b/components/x-gift-article/storybook/share-article-modal-b2b-highlights.jsx index 87fccaa64..2e37846e3 100644 --- a/components/x-gift-article/storybook/share-article-modal-b2b-highlights.jsx +++ b/components/x-gift-article/storybook/share-article-modal-b2b-highlights.jsx @@ -13,7 +13,8 @@ exports.args = { }, id: 'base-gift-article-static-id', enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`, - hasHighlights: true + highlight: + '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.' } exports.fetchMock = (fetchMock) => { diff --git a/components/x-gift-article/storybook/share-article-modal-b2b-save-highlights-message.jsx b/components/x-gift-article/storybook/share-article-modal-b2b-save-highlights-message.jsx index 4d7c9cb46..16850ceed 100644 --- a/components/x-gift-article/storybook/share-article-modal-b2b-save-highlights-message.jsx +++ b/components/x-gift-article/storybook/share-article-modal-b2b-save-highlights-message.jsx @@ -13,7 +13,6 @@ exports.args = { }, id: 'base-gift-article-static-id', enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`, - hasHighlights: false, showHighlightsCheckbox: false, showHighlightsRecipientMessage: true } diff --git a/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-free-article.jsx b/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-free-article.jsx index cde70540a..3cf9d3ba2 100644 --- a/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-free-article.jsx +++ b/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-free-article.jsx @@ -13,7 +13,8 @@ exports.args = { }, id: 'base-gift-article-static-id', enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`, - hasHighlights: true + highlight: + '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.' } exports.fetchMock = (fetchMock) => { diff --git a/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-no-both-credits.jsx b/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-no-both-credits.jsx index 9b06fbe89..5691ce96e 100644 --- a/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-no-both-credits.jsx +++ b/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-no-both-credits.jsx @@ -13,7 +13,8 @@ exports.args = { }, id: 'base-gift-article-static-id', enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`, - hasHighlights: true + highlight: + '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.' } exports.fetchMock = (fetchMock) => { diff --git a/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-no-enterprise-credits.jsx b/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-no-enterprise-credits.jsx index a13ff6ec7..9fd7bb384 100644 --- a/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-no-enterprise-credits.jsx +++ b/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-no-enterprise-credits.jsx @@ -13,7 +13,8 @@ exports.args = { }, id: 'base-gift-article-static-id', enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`, - hasHighlights: true + highlight: + '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.' } exports.fetchMock = (fetchMock) => { diff --git a/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-no-gift-credits.jsx b/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-no-gift-credits.jsx index 05baae6c4..5b880dfb4 100644 --- a/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-no-gift-credits.jsx +++ b/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-no-gift-credits.jsx @@ -13,7 +13,8 @@ exports.args = { }, id: 'base-gift-article-static-id', enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`, - hasHighlights: true + highlight: + '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.' } exports.fetchMock = (fetchMock) => { diff --git a/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-save-highlights-message.jsx b/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-save-highlights-message.jsx index e8c8d8832..eb52e51c1 100644 --- a/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-save-highlights-message.jsx +++ b/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing-save-highlights-message.jsx @@ -13,7 +13,6 @@ exports.args = { }, id: 'base-gift-article-static-id', enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`, - hasHighlights: false, showHighlightsCheckbox: false, showHighlightsRecipientMessage: true } diff --git a/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing.jsx b/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing.jsx index 266a38d7a..3f2bbda93 100644 --- a/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing.jsx +++ b/components/x-gift-article/storybook/share-article-modal-with-advanced-sharing.jsx @@ -13,7 +13,8 @@ exports.args = { }, id: 'base-gift-article-static-id', enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`, - hasHighlights: true + highlight: + '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.' } exports.fetchMock = (fetchMock) => { From ae1d7426beb0b76745e75c1d0fef41c757048c17 Mon Sep 17 00:00:00 2001 From: ibrahim-mamdouh-ft Date: Tue, 27 Aug 2024 12:15:28 +0300 Subject: [PATCH 2/3] feat: add preview to shared links --- components/x-gift-article/src/GiftArticle.jsx | 2 +- .../x-gift-article/src/IncludeHighlights.jsx | 8 +++---- .../x-gift-article/src/SocialShareButtons.jsx | 24 ++++++++++++++----- .../src/lib/highlightsHelpers.js | 3 +++ .../src/lib/share-link-actions.js | 6 +++-- components/x-gift-article/src/lib/updaters.js | 4 ++-- 6 files changed, 32 insertions(+), 15 deletions(-) diff --git a/components/x-gift-article/src/GiftArticle.jsx b/components/x-gift-article/src/GiftArticle.jsx index 21d0ce9eb..cba9d9624 100644 --- 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 index 68839a550..6c5ed7e39 100644 --- 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" > -

- {highlight.split(' ').length > 30 ? `${highlight.split(' ').slice(0, 30).join(' ')} ...` : highlight} -

+ {includeHighlights && ( +

{trimHighlights(highlight)}

+ )}