diff --git a/__tests__/__snapshots__/snapshots.test.js.snap b/__tests__/__snapshots__/snapshots.test.js.snap index 5c68beeaf..fdb270967 100644 --- a/__tests__/__snapshots__/snapshots.test.js.snap +++ b/__tests__/__snapshots__/snapshots.test.js.snap @@ -174,7 +174,7 @@ exports[`@financial-times/x-gift-article renders a default With gift credits x-g Facebook @@ -192,7 +192,7 @@ exports[`@financial-times/x-gift-article renders a default With gift credits x-g Twitter @@ -210,7 +210,7 @@ exports[`@financial-times/x-gift-article renders a default With gift credits x-g LinkedIn diff --git a/components/x-gift-article/src/Buttons.jsx b/components/x-gift-article/src/Buttons.jsx index f0a0d9690..08bf9394a 100644 --- a/components/x-gift-article/src/Buttons.jsx +++ b/components/x-gift-article/src/Buttons.jsx @@ -21,14 +21,9 @@ export default ({ shareType, isGiftUrlCreated, mailtoUrl, - createGiftUrl, - copyGiftUrl, - copyNonGiftUrl, - emailGiftUrl, - emailNonGiftUrl, showCopyButton, showNativeShareButton, - shareByNativeShare + actions }) => { if (isGiftUrlCreated || shareType === ShareType.nonGift) { @@ -36,7 +31,7 @@ export default ({ if (showNativeShareButton) { return (
- +
); } @@ -47,19 +42,19 @@ export default ({ } -
Email link + Email link ); } return (
-
diff --git a/components/x-gift-article/src/Form.jsx b/components/x-gift-article/src/Form.jsx index be34ffb45..5a46e12f2 100644 --- a/components/x-gift-article/src/Form.jsx +++ b/components/x-gift-article/src/Form.jsx @@ -18,9 +18,9 @@ export default (props) => ( { !props.isFreeArticle && <RadioButtonsSection - shareType={ props.shareType } - showGiftUrlSection={ props.actions.showGiftUrlSection } - showNonGiftUrlSection={ props.actions.showNonGiftUrlSection }/> + shareType={ props.shareType } + showGiftUrlSection={ props.actions.showGiftUrlSection } + showNonGiftUrlSection={ props.actions.showNonGiftUrlSection }/> } <UrlSection {...props} /> @@ -30,7 +30,7 @@ export default (props) => ( { props.showCopyConfirmation && <CopyConfirmation hideCopyConfirmation={ props.actions.hideCopyConfirmation }/> } - { props.showShareButtons && + { props.showMobileShareLinks && <MobileShareButtons mobileShareLinks={ props.mobileShareLinks }/> } </div> ); diff --git a/components/x-gift-article/src/GiftArticle.jsx b/components/x-gift-article/src/GiftArticle.jsx index 1b2f7b66e..e9357d662 100644 --- a/components/x-gift-article/src/GiftArticle.jsx +++ b/components/x-gift-article/src/GiftArticle.jsx @@ -14,10 +14,10 @@ const isCopySupported = typeof document !== 'undefined' && document.queryCommandSupported('copy'); const withGiftFormActions = withActions( - props => { + initialProps => { const api = new ApiClient({ - protocol: props.apiProtocol, - domain: props.apiDomain + protocol: initialProps.apiProtocol, + domain: initialProps.apiDomain }); return { @@ -40,7 +40,7 @@ const withGiftFormActions = withActions( }, async createGiftUrl() { - const { redemptionUrl, redemptionLimit } = await api.getGiftUrl(props.articleId); + const { redemptionUrl, redemptionLimit } = await api.getGiftUrl(initialProps.articleId); if (redemptionUrl) { const { url, isShortened } = await api.getShorterUrl(redemptionUrl); @@ -53,27 +53,37 @@ const withGiftFormActions = withActions( }, copyGiftUrl(event) { - const giftUrl = updaters.urls.gift; copyToClipboard(event); - tracking.copyLink('giftLink', giftUrl); - return { showCopyConfirmation: true }; + return state => { + const giftUrl = state.urls.gift; + tracking.copyLink('giftLink', giftUrl); + + return { showCopyConfirmation: true }; + }; }, copyNonGiftUrl(event) { - const nonGiftUrl = updaters.urls.nonGift; copyToClipboard(event); - tracking.copyLink('nonGiftLink', nonGiftUrl); - return { showCopyConfirmation: true }; + return state => { + const nonGiftUrl = state.urls.nonGift; + tracking.copyLink('nonGiftLink', nonGiftUrl); + + return { showCopyConfirmation: true }; + } }, emailGiftUrl() { - tracking.emailLink('giftLink', updaters.urls.gift); + return state => { + tracking.emailLink('giftLink', state.urls.gift); + }; }, emailNonGiftUrl() { - tracking.emailLink('nonGiftLink', updaters.urls.nonGift); + return state => { + tracking.emailLink('nonGiftLink', state.urls.nonGift); + }; }, hideCopyConfirmation() { @@ -84,60 +94,66 @@ const withGiftFormActions = withActions( throw new Error(`shareByNativeShare should be implemented by x-gift-article's consumers`); }, - async activate() { - if (props.isFreeArticle) { - const { url, isShortened } = await api.getShorterUrl(updaters.urls.nonGift); - - if (isShortened) { - return updaters.setShortenedNonGiftUrl(url); - } - } else { - const { giftCredits, monthlyAllowance, nextRenewalDate } = await api.getGiftArticleAllowance(); + activate() { + return async state => { + if (initialProps.isFreeArticle) { + const { url, isShortened } = await api.getShorterUrl(state.urls.nonGift); - // avoid to use giftCredits >= 0 because it returns true when null and "" - if (giftCredits > 0 || giftCredits === 0) { - return updaters.setAllowance(giftCredits, monthlyAllowance, nextRenewalDate); + if (isShortened) { + return updaters.setShortenedNonGiftUrl(url)(state); + } } else { - // TODO do something + const { giftCredits, monthlyAllowance, nextRenewalDate } = await api.getGiftArticleAllowance(); + + // avoid to use giftCredits >= 0 because it returns true when null and "" + if (giftCredits > 0 || giftCredits === 0) { + return updaters.setAllowance(giftCredits, monthlyAllowance, nextRenewalDate); + } else { + // TODO do something + } } } } } }, - props => ({ - title: 'Share this article', - giftCredits: undefined, - monthlyAllowance: undefined, - showCopyButton: isCopySupported, - isGiftUrlCreated: false, - isGiftUrlShortened: false, - isNonGiftUrlShortened: false, - - urls: { - dummy: 'https://on.ft.com/gift_link', - gift: undefined, - nonGift: `${props.articleUrl}?shareType=nongift` - }, - - mailtoUrls: { - gift: undefined, - nonGift: createMailtoUrl(props.articleTitle, `${props.articleUrl}?shareType=nongift`) - }, - - mobileShareLinks: props.showMobileShareLinks - ? { - facebook: `http://www.facebook.com/sharer.php?u=${encodeURIComponent(props.articleUrl)}&t=${encodeURIComponent(props.articleTitle)}`, - twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(props.articleUrl)}&text=${encodeURIComponent(props.articleTitle)}&via=financialtimes`, - linkedin: `http://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(props.articleUrl)}&title=${encodeURIComponent(props.articleTitle)}&source=Financial+Times`, - whatsapp: `whatsapp://send?text=${encodeURIComponent(props.articleTitle)}%20-%20${encodeURIComponent(props.articleUrl)}` - } - : undefined, + props => { + const initialState = { + title: 'Share this article', + giftCredits: undefined, + monthlyAllowance: undefined, + showCopyButton: isCopySupported, + isGiftUrlCreated: false, + isGiftUrlShortened: false, + isNonGiftUrlShortened: false, + + urls: { + dummy: 'https://on.ft.com/gift_link', + gift: undefined, + nonGift: `${props.articleUrl}?shareType=nongift` + }, + + mailtoUrls: { + gift: undefined, + nonGift: createMailtoUrl(props.articleTitle, `${props.articleUrl}?shareType=nongift`) + }, + + mobileShareLinks: props.showMobileShareLinks + ? { + facebook: `http://www.facebook.com/sharer.php?u=${encodeURIComponent(props.articleUrl)}&t=${encodeURIComponent(props.articleTitle)}`, + twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(props.articleUrl)}&text=${encodeURIComponent(props.articleTitle)}&via=financialtimes`, + linkedin: `http://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(props.articleUrl)}&title=${encodeURIComponent(props.articleTitle)}&source=Financial+Times`, + whatsapp: `whatsapp://send?text=${encodeURIComponent(props.articleTitle)}%20-%20${encodeURIComponent(props.articleUrl)}` + } + : undefined + }; + + const expandedProps = Object.assign({}, props, initialState); + const sectionProps = props.isFreeArticle + ? updaters.showNonGiftUrlSection(expandedProps) + : updaters.showGiftUrlSection(expandedProps); - ...(props.isFreeArticle - ? updaters.showNonGiftUrlSection(props) - : updaters.showGiftUrlSection(props) - ), - }) + return Object.assign(initialState, sectionProps); + } ); const BaseGiftArticle = (props) => { diff --git a/components/x-gift-article/src/UrlSection.jsx b/components/x-gift-article/src/UrlSection.jsx index 3459513b2..7c0a8baf9 100644 --- a/components/x-gift-article/src/UrlSection.jsx +++ b/components/x-gift-article/src/UrlSection.jsx @@ -20,15 +20,10 @@ export default ({ monthlyAllowance, nextRenewalDateText, mailtoUrl, - createGiftUrl, - copyGiftUrl, - copyNonGiftUrl, - emailGiftUrl, - emailNonGiftUrl, redemptionLimit, showCopyButton, showNativeShareButton, - shareByNativeShare + actions }) => { const hideUrlShareElements = ( giftCredits === 0 && shareType === ShareType.gift ); @@ -61,15 +56,10 @@ export default ({ shareType, isGiftUrlCreated, mailtoUrl, - createGiftUrl, - copyGiftUrl, - copyNonGiftUrl, - emailGiftUrl, - emailNonGiftUrl, showCopyButton, showNativeShareButton, - shareByNativeShare, - }} />} + actions, + }} /> } </div> ); diff --git a/components/x-gift-article/src/lib/updaters.js b/components/x-gift-article/src/lib/updaters.js index e7fc5fd4e..8732ad66c 100644 --- a/components/x-gift-article/src/lib/updaters.js +++ b/components/x-gift-article/src/lib/updaters.js @@ -19,10 +19,10 @@ export const showNonGiftUrlSection = (props) => ({ showCopyConfirmation: false }); -export const setGiftUrl = (url, redemptionLimit, isShortened) => { - const mailtoUrl = createMailtoUrl(this.articleTitle, url); +export const setGiftUrl = (url, redemptionLimit, isShortened) => props => { + const mailtoUrl = createMailtoUrl(props.articleTitle, url); - return props => ({ + return { url, mailtoUrl, redemptionLimit, @@ -37,7 +37,7 @@ export const setGiftUrl = (url, redemptionLimit, isShortened) => { mailtoUrls: Object.assign(props.mailtoUrls, { gift: mailtoUrl, }) - }); + }; }; export const setAllowance = (giftCredits, monthlyAllowance, nextRenewalDate) => {