- You have{' '}
+ Uses 1 gift credit. You have{' '}
{giftCredits} gift article {giftCredits === 1 ? 'credit' : 'credits'}
{' '}
@@ -89,6 +93,75 @@ export default ({
)
}
+ if (shareType === ShareType.enterprise) {
+ if (invalidResponseFromApi) {
+ return
Unable to create enterprise link. Please try again later
+ }
+
+ if (isGiftUrlCreated === true) {
+ return (
+
+ This link can be opened by up to {enterpriseLimit} people and is valid for 90 days
+
+ )
+ }
+ if (enterpriseHasCredits === true) {
+ if (enterpriseFirstTimeUser) {
+ return (
+
+
Engage more effectively with clients and colleagues.
+
+ Enterprise Sharing lets members of your organisation share FT article links with up to{' '}
+ {enterpriseLimit} people, even if they don’t have a FT subscription.
+
+
+ )
+ }
+ return (
+
+ Your organisation has Enterprise Sharing credits available for you to use
+
+ )
+ } else {
+ if (enterpriseRequestAccess) {
+ //Activation Message
+ return (
+
+
Enterprise Sharing is not enabled for your team
+
+ Enterprise Sharing lets members of your organisation share FT article links with potentially
+ thousands people, even if they don’t have a FT subscription
+
+
+ Learn more
+
+
+ )
+ }
+ return (
+
+
Your organisation has run out of share credits.
+
+ Request more credits and our Enterprise team will get in touch with the admin of your FT
+ subscription to arrange a top-up of sharing credits.
+
+
+ Request more credits
+
+
+ )
+ }
+ }
+
if (shareType === ShareType.nonGift) {
return
This link can only be read by existing subscribers
}
diff --git a/components/x-gift-article/src/RadioButtonsSection.jsx b/components/x-gift-article/src/RadioButtonsSection.jsx
index c94181e4b..4c2041f53 100644
--- a/components/x-gift-article/src/RadioButtonsSection.jsx
+++ b/components/x-gift-article/src/RadioButtonsSection.jsx
@@ -5,16 +5,45 @@ import styles from './GiftArticle.scss'
const radioSectionClassNames = [
styles['o-forms-input'],
styles['o-forms-input--radio-round'],
- styles['o-forms-input--inline'],
styles['o-forms-field'],
styles['radio-button-section']
].join(' ')
-export default ({ shareType, showGiftUrlSection, isArticleSharingUxUpdates, showNonGiftUrlSection }) => (
+export default ({
+ shareType,
+ showGiftUrlSection,
+ showEnterpriseUrlSection,
+ showNonGiftUrlSection,
+ enterpriseEnabled = false,
+ enterpriseLimit = 100,
+ enterpriseRequestAccess = false,
+ enterpriseAlert = false
+}) => (
Article share options
+
+ {enterpriseEnabled === true && (
+
+
+ {enterpriseLimit && !enterpriseRequestAccess
+ ? `Up to ${enterpriseLimit} recipients`
+ : `Multiple recipients`}
+ Enterprise
+ {enterpriseAlert &&
+
+ )}
+
- Gift to anyone (uses 1 credit )
-
- ) : (
-
- with anyone (uses 1 gift credit)
-
- )}
+
+ {enterpriseEnabled ? `Single recipient` : `with anyone`}
+
@@ -44,15 +67,7 @@ export default ({ shareType, showGiftUrlSection, isArticleSharingUxUpdates, show
checked={shareType === ShareType.nonGift}
onChange={showNonGiftUrlSection}
/>
- {isArticleSharingUxUpdates ? (
-
- Share with other FT subscribers
-
- ) : (
-
- with other FT subscribers
-
- )}
+ FT subscribers only
)
diff --git a/components/x-gift-article/src/Url.jsx b/components/x-gift-article/src/Url.jsx
index 9b83e5284..46940a0f6 100644
--- a/components/x-gift-article/src/Url.jsx
+++ b/components/x-gift-article/src/Url.jsx
@@ -14,7 +14,7 @@ export default ({ shareType, isGiftUrlCreated, url, urlType }) => {
name={urlType}
value={url}
className={urlClassNames}
- disabled={shareType === ShareType.gift && !isGiftUrlCreated}
+ disabled={(shareType === ShareType.gift || shareType === ShareType.enterprise) && !isGiftUrlCreated}
readOnly
aria-label="Gift article shareable link"
/>
diff --git a/components/x-gift-article/src/UrlSection.jsx b/components/x-gift-article/src/UrlSection.jsx
index b1d6e8547..b86b3d9b1 100644
--- a/components/x-gift-article/src/UrlSection.jsx
+++ b/components/x-gift-article/src/UrlSection.jsx
@@ -22,9 +22,15 @@ export default ({
nativeShare,
invalidResponseFromApi,
isArticleSharingUxUpdates,
- actions
+ actions,
+ enterpriseLimit,
+ enterpriseHasCredits,
+ enterpriseRequestAccess,
+ enterpriseFirstTimeUser
}) => {
- const hideUrlShareElements = giftCredits === 0 && shareType === ShareType.gift
+ const hideUrlShareElements =
+ (giftCredits === 0 && shareType === ShareType.gift) ||
+ ((enterpriseRequestAccess || !enterpriseHasCredits) && shareType === ShareType.enterprise)
const showUrlShareElements = !hideUrlShareElements
return (
@@ -53,7 +59,11 @@ export default ({
nextRenewalDateText,
redemptionLimit,
invalidResponseFromApi,
- isArticleSharingUxUpdates
+ isArticleSharingUxUpdates,
+ enterpriseHasCredits,
+ enterpriseLimit,
+ enterpriseRequestAccess,
+ enterpriseFirstTimeUser
}}
/>
diff --git a/components/x-gift-article/src/lib/constants.js b/components/x-gift-article/src/lib/constants.js
index 792b42a11..c1a149436 100644
--- a/components/x-gift-article/src/lib/constants.js
+++ b/components/x-gift-article/src/lib/constants.js
@@ -1,5 +1,6 @@
export const ShareType = {
gift: 'gift',
+ enterprise: 'enterprise',
nonGift: 'nonGift'
}
diff --git a/components/x-gift-article/src/lib/enterpriseApi.js b/components/x-gift-article/src/lib/enterpriseApi.js
new file mode 100644
index 000000000..a6fca28ba
--- /dev/null
+++ b/components/x-gift-article/src/lib/enterpriseApi.js
@@ -0,0 +1,94 @@
+export default class EnterpriseApiClient {
+ constructor(baseUrl) {
+ this.baseUrl = baseUrl
+ }
+
+ /**
+ * Concatenates protocol, domain and path URLs.
+ * @param {string} path URL Path
+ * @returns {string} Fetch URL
+ * @throws {Error} if baseURL is empty
+ */
+ getFetchUrl(path) {
+ if (!this.baseUrl) {
+ throw new Error('Enterprise Sharing API base url missing')
+ }
+
+ return `${this.baseUrl}${path}`
+ }
+
+ /**
+ * Makes a fetch request to the path with additional options
+ * @param {string} path URL path
+ * @param {RequestInit} additionalOptions fetch additional options
+ * @returns {Promise
} A promise that resolves to the requested URL response parsed from json
+ */
+ async fetchJson(path, additionalOptions) {
+ const url = this.getFetchUrl(path)
+ const options = Object.assign(
+ {
+ credentials: 'include'
+ },
+ additionalOptions
+ )
+
+ const response = await fetch(url, options)
+ if (response.status === 403) {
+ // If ES API response code is 403 - User is B2B without access and should see the request access page
+ throw new Error('ShowRequestAccess')
+ }
+ if (response.status === 404) {
+ // If ES API response code is 404 - User is not B2B and should not see anything about ES
+ throw new Error('UserIsNotB2b')
+ }
+ return await response.json()
+ }
+
+ /**
+ * @typedef EnterpriseSharingAllowance
+ * @type {object}
+ * @property {number} limit - number of views per share for the user's licence, null if licence doesn't have a ES package
+ * @property {boolean} hasCredits - true if user's licence has ES credits
+ * @property {boolean} firstTimeUser - true if user hasn't created an ES link before
+ * @property {boolean} enabled - true if enterprise sharing is enabled for this user
+ * @property {boolean} requestAccess - true if user should see the request access journey
+ */
+
+ /**
+ * Retrieves the Enterprise Sharing allowance for an user
+ * @returns {EnterpriseSharingAllowance} the Enterprise Sharing allowance for an user
+ */
+ async getEnterpriseArticleAllowance() {
+ try {
+ const json = await this.fetchJson('/v1/users/me/allowance')
+
+ return {
+ limit: json.limit,
+ hasCredits: json.hasCredits,
+ firstTimeUser: json.firstTimeUser,
+ enabled: true,
+ requestAccess: false
+ }
+ } catch (e) {
+ if (e?.message === 'ShowRequestAccess') {
+ // limit = 100 is the default value used for marketing ES ("share with up to 100 people")
+ return { enabled: true, limit: 100, hasCredits: false, firstTimeUser: false, requestAccess: true }
+ }
+ return { enabled: false, limit: 0, hasCredits: false, firstTimeUser: false, requestAccess: false }
+ }
+ }
+
+ /**
+ * Generates an enterprise sharing redeem link for the contentId
+ * @param {string} contentId Article ID
+ * @returns {string} enterprise sharing redeem link URL
+ */
+ async getESUrl(contentId) {
+ const json = await this.fetchJson('/v1/shares', { method: 'POST', body: JSON.stringify({ contentId }) })
+
+ return {
+ redemptionUrl: json.url,
+ redemptionLimit: json.redeemLimit
+ }
+ }
+}
diff --git a/components/x-gift-article/src/lib/tracking.js b/components/x-gift-article/src/lib/tracking.js
index 302fbad00..7e72df219 100644
--- a/components/x-gift-article/src/lib/tracking.js
+++ b/components/x-gift-article/src/lib/tracking.js
@@ -17,6 +17,14 @@ module.exports = {
longUrl
}),
+ createESLink: (link) =>
+ dispatchEvent({
+ category: 'gift-link',
+ action: 'create',
+ linkType: 'enterpriseSharingLink',
+ link
+ }),
+
copyLink: (linkType, link) =>
dispatchEvent({
category: 'gift-link',
diff --git a/components/x-gift-article/src/lib/updaters.js b/components/x-gift-article/src/lib/updaters.js
index ea471c401..44a64e21b 100644
--- a/components/x-gift-article/src/lib/updaters.js
+++ b/components/x-gift-article/src/lib/updaters.js
@@ -21,7 +21,19 @@ export const showGiftUrlSection = (props) => ({
url: props.urls.gift || props.urls.dummy,
urlType: props.urls.gift ? UrlType.gift : UrlType.dummy,
mailtoUrl: props.mailtoUrls.gift,
- showCopyConfirmation: false
+ isGiftUrlCreated: !!props.urls.gift,
+ showCopyConfirmation: false,
+ invalidResponseFromApi: false
+})
+
+export const showGiftEnterpriseSection = (props) => ({
+ shareType: ShareType.enterprise,
+ url: props.urls.enterprise || props.urls.dummy,
+ urlType: props.urls.enterprise ? UrlType.gift : UrlType.dummy,
+ mailtoUrl: props.mailtoUrls.enterprise,
+ isGiftUrlCreated: !!props.urls.enterprise,
+ showCopyConfirmation: false,
+ invalidResponseFromApi: false
})
export const showNonGiftUrlSection = (props) => ({
@@ -29,29 +41,34 @@ export const showNonGiftUrlSection = (props) => ({
url: props.urls.nonGift,
urlType: UrlType.nonGift,
mailtoUrl: props.mailtoUrls.nonGift,
- showCopyConfirmation: false
+ isGiftUrlCreated: false,
+ showCopyConfirmation: false,
+ invalidResponseFromApi: false
})
-export const setGiftUrl = (url, redemptionLimit, isShortened) => (props) => {
- const mailtoUrl = createMailtoUrl(props.article.title, url)
+export const setGiftUrl =
+ (url, redemptionLimit, isShortened, isEnterprise = false) =>
+ (props) => {
+ const mailtoUrl = createMailtoUrl(props.article.title, url)
- return {
- url,
- mailtoUrl,
- redemptionLimit,
- isGiftUrlCreated: true,
- isGiftUrlShortened: isShortened,
- urlType: UrlType.gift,
+ return {
+ url,
+ mailtoUrl,
+ redemptionLimit: isEnterprise ? props.redemptionLimit : redemptionLimit, //note: when creating an enterprise link we do not change the redemption limit (this value is only used in the gift message)
+ isGiftUrlCreated: true,
+ isGiftUrlShortened: isShortened,
+ urlType: isEnterprise ? UrlType.enterprise : UrlType.gift,
- urls: Object.assign(props.urls, {
- gift: url
- }),
+ urls: Object.assign(props.urls, {
+ [isEnterprise ? 'enterprise' : 'gift']: url
+ }),
- mailtoUrls: Object.assign(props.mailtoUrls, {
- gift: mailtoUrl
- })
+ mailtoUrls: Object.assign(props.mailtoUrls, {
+ [isEnterprise ? 'enterprise' : 'gift']: mailtoUrl
+ }),
+ invalidResponseFromApi: false
+ }
}
-}
export const setAllowance = (giftCredits, monthlyAllowance, nextRenewalDate) => {
const date = new Date(nextRenewalDate)
@@ -74,11 +91,15 @@ export const setShortenedNonGiftUrl = (shortenedUrl) => (props) => {
isNonGiftUrlShortened: true,
urls: Object.assign(props.urls, {
- gift: shortenedUrl
+ nonGift: shortenedUrl
}),
mailtoUrls: Object.assign(props.mailtoUrls, {
- gift: mailtoUrl
+ nonGift: mailtoUrl
})
}
}
+
+export const setErrorState = (errorState) => ({
+ invalidResponseFromApi: errorState
+})
diff --git a/components/x-gift-article/storybook/index.jsx b/components/x-gift-article/storybook/index.jsx
index c9abcdc2d..ef919ffbf 100644
--- a/components/x-gift-article/storybook/index.jsx
+++ b/components/x-gift-article/storybook/index.jsx
@@ -72,6 +72,81 @@ export const FreeArticle = (args) => {
)
}
+export const WithEnterpriseSharing = (args) => {
+ require('./with-enterprise').fetchMock(fetchMock)
+ return (
+
+ {dependencies &&
+
+ actions?.activate()} />
+
+ )
+}
+WithEnterpriseSharing.storyName = 'With enterprise sharing'
+WithEnterpriseSharing.args = require('./with-enterprise').args
+
+export const WithEnterpriseSharingWithoutCredits = (args) => {
+ require('./with-enterprise-no-credits').fetchMock(fetchMock)
+ return (
+
+ {dependencies &&
+
+ actions?.activate()} />
+
+ )
+}
+WithEnterpriseSharingWithoutCredits.storyName = 'With enterprise sharing (no credits)'
+WithEnterpriseSharingWithoutCredits.args = require('./with-enterprise-no-credits').args
+
+export const WithEnterpriseSharingFirstTimeUser = (args) => {
+ require('./with-enterprise-first-time-user').fetchMock(fetchMock)
+ return (
+
+ {dependencies &&
+
+ actions?.activate()} />
+
+ )
+}
+WithEnterpriseSharingFirstTimeUser.storyName = 'With enterprise sharing (first time user)'
+WithEnterpriseSharingFirstTimeUser.args = require('./with-enterprise-first-time-user').args
+
+export const WithEnterpriseSharingRequestAccess = (args) => {
+ require('./with-enterprise-request-access').fetchMock(fetchMock)
+ return (
+
+ {dependencies &&
+
+ actions?.activate()} />
+
+ )
+}
+WithEnterpriseSharingRequestAccess.storyName = 'With enterprise sharing (request access)'
+WithEnterpriseSharingRequestAccess.args = require('./with-enterprise-request-access').args
+
+export const WithEnterpriseSharingLink = (args) => {
+ require('./with-enterprise-sharing-link').fetchMock(fetchMock)
+ return (
+
+ {dependencies &&
+
+ actions?.activate()} />
+
+ )
+}
+WithEnterpriseSharingLink.storyName = 'With enterprise sharing (link generated)'
+WithEnterpriseSharingLink.args = require('./with-enterprise-sharing-link').args
+
FreeArticle.storyName = 'Free article'
FreeArticle.args = require('./free-article').args
diff --git a/components/x-gift-article/storybook/with-enterprise-first-time-user.js b/components/x-gift-article/storybook/with-enterprise-first-time-user.js
new file mode 100644
index 000000000..5c5d5eff4
--- /dev/null
+++ b/components/x-gift-article/storybook/with-enterprise-first-time-user.js
@@ -0,0 +1,47 @@
+const articleId = 'article id'
+const articleUrl = 'https://www.ft.com/content/blahblahblah'
+const articleUrlRedeemed = 'https://gift-url-redeemed'
+const nonGiftArticleUrl = `${articleUrl}?shareType=nongift`
+
+exports.args = {
+ title: 'Share this article (with enterprise sharing - first time user journey)',
+ isFreeArticle: false,
+ article: {
+ id: articleId,
+ url: articleUrl,
+ title: 'Title Title Title Title'
+ },
+ showMobileShareLinks: true,
+ id: 'base-gift-article-static-id',
+ enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`
+}
+
+// This reference is only required for hot module loading in development
+//