From 2f6561b9ca83fc454f955020961058da57d6a81f Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Mon, 13 Dec 2021 18:22:43 +0000
Subject: [PATCH 01/32] add o-labels import

---
 components/x-gift-article/bower.json           | 1 +
 components/x-gift-article/src/GiftArticle.scss | 9 +++++++++
 2 files changed, 10 insertions(+)

diff --git a/components/x-gift-article/bower.json b/components/x-gift-article/bower.json
index 18dc603c2..74de008b3 100644
--- a/components/x-gift-article/bower.json
+++ b/components/x-gift-article/bower.json
@@ -6,6 +6,7 @@
   "dependencies": {
     "o-buttons": "^6.0.0",
     "o-forms": "^8.0.0",
+    "o-labels": "5.0.0",
     "o-loading": "^4.0.0",
     "o-message": "^4.0.0",
     "o-typography": "6.0.0",
diff --git a/components/x-gift-article/src/GiftArticle.scss b/components/x-gift-article/src/GiftArticle.scss
index e3a0f2d36..5cd2f4454 100644
--- a/components/x-gift-article/src/GiftArticle.scss
+++ b/components/x-gift-article/src/GiftArticle.scss
@@ -16,6 +16,10 @@ $o-message-is-silent: true;
 $o-typography-is-silent: true;
 @import 'o-typography/main';
 
+$o-labels-is-silent: true;
+@import 'o-labels/main';
+
+
 .container {
 	@include oTypographySans;
 	strong {
@@ -36,6 +40,11 @@ $o-typography-is-silent: true;
 
 	.radio-button-section {
 		margin-bottom: 12px;
+		@include oLabels($opts: (
+			'states': (
+        'content-premium'
+    ),
+		));
 	}
 
 	.share-option-title {

From 1adeda890781db4f989adf14027b3e4d8653886e Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Mon, 13 Dec 2021 18:24:23 +0000
Subject: [PATCH 02/32] add enterprise sharing to gift modal

---
 components/x-gift-article/src/Buttons.jsx     | 11 ++++--
 components/x-gift-article/src/Form.jsx        |  2 +
 components/x-gift-article/src/Message.jsx     |  8 ++++
 .../src/RadioButtonsSection.jsx               | 39 ++++++++++++++++++-
 components/x-gift-article/src/Url.jsx         |  2 +-
 .../x-gift-article/src/lib/constants.js       |  1 +
 components/x-gift-article/src/lib/updaters.js |  8 ++++
 7 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/components/x-gift-article/src/Buttons.jsx b/components/x-gift-article/src/Buttons.jsx
index 77d028e39..c489e8727 100644
--- a/components/x-gift-article/src/Buttons.jsx
+++ b/components/x-gift-article/src/Buttons.jsx
@@ -35,7 +35,8 @@ export default ({
 						className={ButtonWithGapClassNames}
 						type="button"
 						onClick={shareType === ShareType.gift ? actions.copyGiftUrl : actions.copyNonGiftUrl}
-						aria-label="Copy the gift article link to your clipboard">
+						aria-label="Copy the gift article link to your clipboard"
+					>
 						Copy link
 					</button>
 				)}
@@ -44,7 +45,8 @@ export default ({
 					href={mailtoUrl}
 					target="_blank"
 					rel="noopener noreferrer"
-					onClick={shareType === ShareType.gift ? actions.emailGiftUrl : actions.emailNonGiftUrl}>
+					onClick={shareType === ShareType.gift ? actions.emailGiftUrl : actions.emailNonGiftUrl}
+				>
 					Email link <span className={styles['visually-hidden']}>to Share this article</span>
 				</a>
 			</div>
@@ -57,8 +59,9 @@ export default ({
 				className={ButtonClassNames}
 				disabled={!giftCredits}
 				type="button"
-				onClick={actions.createGiftUrl}>
-				Create gift link
+				onClick={shareType === ShareType.enterprise ? actions.createEnterpriseUrl : actions.createGiftUrl}
+			>
+				Create {shareType === ShareType.enterprise ? 'enterprise' : 'gift'} link
 			</button>
 		</div>
 	)
diff --git a/components/x-gift-article/src/Form.jsx b/components/x-gift-article/src/Form.jsx
index a2a8b515f..af278a01b 100644
--- a/components/x-gift-article/src/Form.jsx
+++ b/components/x-gift-article/src/Form.jsx
@@ -17,7 +17,9 @@ export default (props) => (
 						shareType={props.shareType}
 						isArticleSharingUxUpdates={props.isArticleSharingUxUpdates}
 						showGiftUrlSection={props.actions.showGiftUrlSection}
+						showEnterpriseUrlSection={props.actions.showEnterpriseUrlSection}
 						showNonGiftUrlSection={props.actions.showNonGiftUrlSection}
+						enterpriseLimit={props.enterpriseLimit}
 					/>
 				)}
 
diff --git a/components/x-gift-article/src/Message.jsx b/components/x-gift-article/src/Message.jsx
index 156c75c1e..1cdd9a034 100644
--- a/components/x-gift-article/src/Message.jsx
+++ b/components/x-gift-article/src/Message.jsx
@@ -20,6 +20,10 @@ export default ({
 			return null
 		}
 
+		if (shareType === ShareType.enterprise) {
+			return null
+		}
+
 		if (shareType === ShareType.gift) {
 			if (giftCredits === 0) {
 				return (
@@ -89,6 +93,10 @@ export default ({
 		)
 	}
 
+	if (shareType === ShareType.enterprise) {
+		return null
+	}
+
 	if (shareType === ShareType.nonGift) {
 		return <div className={messageClassName}>This link can only be read by existing subscribers</div>
 	}
diff --git a/components/x-gift-article/src/RadioButtonsSection.jsx b/components/x-gift-article/src/RadioButtonsSection.jsx
index c94181e4b..01bc6a350 100644
--- a/components/x-gift-article/src/RadioButtonsSection.jsx
+++ b/components/x-gift-article/src/RadioButtonsSection.jsx
@@ -10,7 +10,14 @@ const radioSectionClassNames = [
 	styles['radio-button-section']
 ].join(' ')
 
-export default ({ shareType, showGiftUrlSection, isArticleSharingUxUpdates, showNonGiftUrlSection }) => (
+export default ({
+	shareType,
+	showGiftUrlSection,
+	showEnterpriseUrlSection,
+	isArticleSharingUxUpdates,
+	showNonGiftUrlSection,
+	enterpriseLimit = null
+}) => (
 	<div className={radioSectionClassNames} role="group" aria-labelledby="article-share-options">
 		<span className={styles['share-option-title']} id="article-share-options">
 			Article share options
@@ -30,11 +37,39 @@ export default ({ shareType, showGiftUrlSection, isArticleSharingUxUpdates, show
 				</span>
 			) : (
 				<span className={styles['o-forms-input__label']}>
-					with <strong>anyone</strong> (uses 1 gift credit)
+					with up to <strong>3 people</strong> (uses 1 gift credit)
 				</span>
 			)}
 		</label>
 
+		{enterpriseLimit !== null && (
+			<label htmlFor="enterpriseLink">
+				<input
+					type="radio"
+					name="gift-form__radio"
+					value="enterpriseLink"
+					id="enterpriseLink"
+					checked={shareType === ShareType.enterprise}
+					onChange={showEnterpriseUrlSection}
+				/>
+				{isArticleSharingUxUpdates ? (
+					<span className={styles['o-forms-input__label']}>
+						Gift to <strong>{enterpriseLimit}</strong> people{' '}
+						<span className={[styles['o-labels'], styles['o-labels--content-premium']].join(' ')}>
+							Enterprise
+						</span>
+					</span>
+				) : (
+					<span className={styles['o-forms-input__label']}>
+						with up to <strong>{enterpriseLimit} people</strong>{' '}
+						<span className={[styles['o-labels'], styles['o-labels--content-premium']].join(' ')}>
+							Enterprise
+						</span>
+					</span>
+				)}
+			</label>
+		)}
+
 		<label htmlFor="nonGiftLink">
 			<input
 				type="radio"
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/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/updaters.js b/components/x-gift-article/src/lib/updaters.js
index ea471c401..061fd2fc5 100644
--- a/components/x-gift-article/src/lib/updaters.js
+++ b/components/x-gift-article/src/lib/updaters.js
@@ -24,6 +24,14 @@ export const showGiftUrlSection = (props) => ({
 	showCopyConfirmation: 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,
+	showCopyConfirmation: false
+})
+
 export const showNonGiftUrlSection = (props) => ({
 	shareType: ShareType.nonGift,
 	url: props.urls.nonGift,

From 2c0e3e448364938767aaa123b82255af5af1933d Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Mon, 13 Dec 2021 18:38:47 +0000
Subject: [PATCH 03/32] add enterprise api controller

---
 components/x-gift-article/readme.md           |  1 +
 components/x-gift-article/src/GiftArticle.jsx | 25 +++++++++--
 .../x-gift-article/src/lib/enterpriseApi.js   | 44 +++++++++++++++++++
 3 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 components/x-gift-article/src/lib/enterpriseApi.js

diff --git a/components/x-gift-article/readme.md b/components/x-gift-article/readme.md
index df16886fc..40d949d03 100644
--- a/components/x-gift-article/readme.md
+++ b/components/x-gift-article/readme.md
@@ -77,6 +77,7 @@ Property                  | Type    | Required | Note
 `nativeShare`             | Boolean | no       | This is a property for App to display Native Sharing.
 `apiProtocol`             | String  | no       | The protocol to use when making requests to the gift article and URL shortening services. Ignored if `apiDomain` is not set.
 `apiDomain`               | String  | no       | The domain to use when making requests to the gift article and URL shortening services.
+`enterpriseApiDomain`     | String  | no       | The domain to use when making requests to the enterprise sharing service.
 
 ###
 `isArticleSharingUxUpdates` boolean has been added as part of ACC-749 to enable AB testing of the impact of minor UX improvements to x-gift-article. Once AB testing is done, and decision to keep / remove has been made, the changes made in https://github.com/Financial-Times/x-dash/pull/579 need to be ditched or baked in as default. 
diff --git a/components/x-gift-article/src/GiftArticle.jsx b/components/x-gift-article/src/GiftArticle.jsx
index 38c4232de..aad93413f 100644
--- a/components/x-gift-article/src/GiftArticle.jsx
+++ b/components/x-gift-article/src/GiftArticle.jsx
@@ -5,6 +5,7 @@ import Loading from './Loading'
 import Form from './Form'
 
 import ApiClient from './lib/api'
+import EnterpriseApiClient from './lib/enterpriseApi'
 import { copyToClipboard, createMailtoUrl } from './lib/share-link-actions'
 import tracking from './lib/tracking'
 import * as updaters from './lib/updaters'
@@ -21,12 +22,20 @@ const withGiftFormActions = withActions(
 			protocol: initialProps.apiProtocol,
 			domain: initialProps.apiDomain
 		})
+		const enterpriseApi = new EnterpriseApiClient({
+			protocol: initialProps.apiProtocol,
+			domain: initialProps.enterpriseApiDomain
+		})
 
 		return {
 			showGiftUrlSection() {
 				return updaters.showGiftUrlSection
 			},
 
+			showEnterpriseUrlSection() {
+				return updaters.showGiftEnterpriseSection
+			},
+
 			showNonGiftUrlSection() {
 				return async (state) => {
 					const update = updaters.showNonGiftUrlSection(state)
@@ -108,12 +117,20 @@ const withGiftFormActions = withActions(
 						}
 					} else {
 						const { giftCredits, monthlyAllowance, nextRenewalDate } = await api.getGiftArticleAllowance()
-
+						const { limit, hasCredits } = await enterpriseApi.getEnterpriseArticleAllowance()
 						// avoid to use giftCredits >= 0 because it returns true when null and ""
 						if (giftCredits > 0 || giftCredits === 0) {
-							return updaters.setAllowance(giftCredits, monthlyAllowance, nextRenewalDate)
+							return {
+								...updaters.setAllowance(giftCredits, monthlyAllowance, nextRenewalDate),
+								enterpriseLimit: limit,
+								enterpriseHasCredits: hasCredits
+							}
 						} else {
-							return { invalidResponseFromApi: true }
+							return {
+								invalidResponseFromApi: true,
+								enterpriseLimit: limit,
+								enterpriseHasCredits: hasCredits
+							}
 						}
 					}
 				}
@@ -135,11 +152,13 @@ const withGiftFormActions = withActions(
 			urls: {
 				dummy: 'https://on.ft.com/gift_link',
 				gift: undefined,
+				enterprise: undefined,
 				nonGift: `${props.article.url}?shareType=nongift`
 			},
 
 			mailtoUrls: {
 				gift: undefined,
+				enterprise: undefined,
 				nonGift: createMailtoUrl(props.article.title, `${props.article.url}?shareType=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..ec3d8fd7f
--- /dev/null
+++ b/components/x-gift-article/src/lib/enterpriseApi.js
@@ -0,0 +1,44 @@
+export default class EnterpriseApiClient {
+	constructor({ protocol, domain } = {}) {
+		this.protocol = protocol
+		this.domain = domain
+	}
+
+	getFetchUrl(path) {
+		let base = ''
+		if (this.domain) {
+			base = `//${this.domain}`
+
+			if (this.protocol) {
+				base = `${this.protocol}:${base}`
+			}
+		}
+
+		return `${base}${path}`
+	}
+
+	fetchJson(path, additionalOptions) {
+		const url = this.getFetchUrl(path)
+		const options = Object.assign(
+			{
+				credentials: 'include'
+			},
+			additionalOptions
+		)
+
+		return fetch(url, options).then((response) => response.json())
+	}
+
+	async getEnterpriseArticleAllowance() {
+		try {
+			const json = await this.fetchJson('/allowance')
+
+			return {
+				limit: json.limit,
+				hasCredits: json.hasCredits
+			}
+		} catch (e) {
+			return { limit: null, hasCredits: false }
+		}
+	}
+}

From 9a10f4bdfdd20e3c07e4b4a63537efe1d2a08663 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Mon, 13 Dec 2021 18:39:06 +0000
Subject: [PATCH 04/32] add storybook with enterprise sharing

---
 components/x-gift-article/storybook/index.jsx | 15 +++++++
 .../storybook/with-enterprise.js              | 45 +++++++++++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 components/x-gift-article/storybook/with-enterprise.js

diff --git a/components/x-gift-article/storybook/index.jsx b/components/x-gift-article/storybook/index.jsx
index c9abcdc2d..15c9ac024 100644
--- a/components/x-gift-article/storybook/index.jsx
+++ b/components/x-gift-article/storybook/index.jsx
@@ -27,6 +27,21 @@ export const WithGiftCredits = (args) => {
 WithGiftCredits.storyName = 'With gift credits'
 WithGiftCredits.args = require('./with-gift-credits').args
 
+export const WithEnterpriseSharing = (args) => {
+	require('./with-enterprise').fetchMock(fetchMock)
+	return (
+		<div className="story-container">
+			{dependencies && <BuildService dependencies={dependencies} />}
+			<Helmet>
+				<link rel="stylesheet" href={`components/x-gift-article/dist/GiftArticle.css`} />
+			</Helmet>
+			<GiftArticle {...args} actionsRef={(actions) => actions?.activate()} />
+		</div>
+	)
+}
+WithEnterpriseSharing.storyName = 'With enterprise sharing'
+WithEnterpriseSharing.args = require('./with-enterprise').args
+
 export const WithoutGiftCredits = (args) => {
 	require('./without-gift-credits').fetchMock(fetchMock)
 	return (
diff --git a/components/x-gift-article/storybook/with-enterprise.js b/components/x-gift-article/storybook/with-enterprise.js
new file mode 100644
index 000000000..d7b8cbb77
--- /dev/null
+++ b/components/x-gift-article/storybook/with-enterprise.js
@@ -0,0 +1,45 @@
+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)',
+	isFreeArticle: false,
+	article: {
+		id: articleId,
+		url: articleUrl,
+		title: 'Title Title Title Title'
+	},
+	showMobileShareLinks: true,
+	id: 'base-gift-article-static-id'
+}
+
+// This reference is only required for hot module loading in development
+// <https://webpack.js.org/concepts/hot-module-replacement/>
+exports.m = module
+
+exports.fetchMock = (fetchMock) => {
+	fetchMock
+		.restore()
+		.get('/article/gift-credits', {
+			allowance: 20,
+			consumedCredits: 5,
+			remainingCredits: 15,
+			renewalDate: '2018-08-01T00:00:00Z'
+		})
+		.get(`/article/shorten-url/${encodeURIComponent(articleUrlRedeemed)}`, {
+			shortenedUrl: 'https://shortened-gift-url'
+		})
+		.get(`/article/shorten-url/${encodeURIComponent(nonGiftArticleUrl)}`, {
+			shortenedUrl: 'https://shortened-non-gift-url'
+		})
+		.get(`/article/gift-link/${encodeURIComponent(articleId)}`, {
+			redemptionUrl: articleUrlRedeemed,
+			remainingAllowance: 1
+		})
+		.get(`/allowance`, {
+			limit: 120,
+			hasCredits: true
+		})
+}

From 82e98da1e1367d764ec2dbdc05f2ec135011ec89 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Tue, 14 Dec 2021 10:59:33 +0000
Subject: [PATCH 05/32] add enterprise credits message

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

diff --git a/components/x-gift-article/src/Message.jsx b/components/x-gift-article/src/Message.jsx
index 1cdd9a034..0286202b4 100644
--- a/components/x-gift-article/src/Message.jsx
+++ b/components/x-gift-article/src/Message.jsx
@@ -13,17 +13,14 @@ export default ({
 	nextRenewalDateText,
 	redemptionLimit,
 	invalidResponseFromApi,
-	isArticleSharingUxUpdates
+	isArticleSharingUxUpdates,
+	enterpriseHasCredits
 }) => {
 	if (isArticleSharingUxUpdates) {
 		if (isFreeArticle) {
 			return null
 		}
 
-		if (shareType === ShareType.enterprise) {
-			return null
-		}
-
 		if (shareType === ShareType.gift) {
 			if (giftCredits === 0) {
 				return (
@@ -94,7 +91,13 @@ export default ({
 	}
 
 	if (shareType === ShareType.enterprise) {
-		return null
+		if (enterpriseHasCredits === true) {
+			return (
+				<div className={messageClassName}>
+					Your organisation has <strong>Enterprise Sharing credits</strong> available for you to use
+				</div>
+			)
+		}
 	}
 
 	if (shareType === ShareType.nonGift) {

From 82001ab40e0f42679be535efa9fba2b36d11668c Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Tue, 14 Dec 2021 11:00:06 +0000
Subject: [PATCH 06/32] add extra properties from enterprise api

---
 components/x-gift-article/src/GiftArticle.jsx | 11 ++++++---
 .../src/RadioButtonsSection.jsx               | 24 +++++++------------
 components/x-gift-article/src/UrlSection.jsx  | 11 ++++++---
 .../x-gift-article/src/lib/enterpriseApi.js   |  6 +++--
 .../storybook/with-enterprise.js              |  4 +++-
 5 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/components/x-gift-article/src/GiftArticle.jsx b/components/x-gift-article/src/GiftArticle.jsx
index aad93413f..87a6ff5a3 100644
--- a/components/x-gift-article/src/GiftArticle.jsx
+++ b/components/x-gift-article/src/GiftArticle.jsx
@@ -117,19 +117,24 @@ const withGiftFormActions = withActions(
 						}
 					} else {
 						const { giftCredits, monthlyAllowance, nextRenewalDate } = await api.getGiftArticleAllowance()
-						const { limit, hasCredits } = await enterpriseApi.getEnterpriseArticleAllowance()
+						const { enabled, limit, hasCredits, firstTimeUser } =
+							await enterpriseApi.getEnterpriseArticleAllowance()
 						// avoid to use giftCredits >= 0 because it returns true when null and ""
 						if (giftCredits > 0 || giftCredits === 0) {
 							return {
 								...updaters.setAllowance(giftCredits, monthlyAllowance, nextRenewalDate),
+								enterpriseEnabled: enabled,
 								enterpriseLimit: limit,
-								enterpriseHasCredits: hasCredits
+								enterpriseHasCredits: hasCredits,
+								enterpriseFirstTimeUser: firstTimeUser
 							}
 						} else {
 							return {
 								invalidResponseFromApi: true,
+								enterpriseEnabled: enabled,
 								enterpriseLimit: limit,
-								enterpriseHasCredits: hasCredits
+								enterpriseHasCredits: hasCredits,
+								enterpriseFirstTimeUser: firstTimeUser
 							}
 						}
 					}
diff --git a/components/x-gift-article/src/RadioButtonsSection.jsx b/components/x-gift-article/src/RadioButtonsSection.jsx
index 01bc6a350..8e5aa6570 100644
--- a/components/x-gift-article/src/RadioButtonsSection.jsx
+++ b/components/x-gift-article/src/RadioButtonsSection.jsx
@@ -16,7 +16,8 @@ export default ({
 	showEnterpriseUrlSection,
 	isArticleSharingUxUpdates,
 	showNonGiftUrlSection,
-	enterpriseLimit = null
+	enterpriseEnabled = false,
+	enterpriseLimit = 100 //if limit is not set enterprise will show 100 for default (value used for activation)
 }) => (
 	<div className={radioSectionClassNames} role="group" aria-labelledby="article-share-options">
 		<span className={styles['share-option-title']} id="article-share-options">
@@ -42,7 +43,7 @@ export default ({
 			)}
 		</label>
 
-		{enterpriseLimit !== null && (
+		{enterpriseEnabled === true && (
 			<label htmlFor="enterpriseLink">
 				<input
 					type="radio"
@@ -52,21 +53,12 @@ export default ({
 					checked={shareType === ShareType.enterprise}
 					onChange={showEnterpriseUrlSection}
 				/>
-				{isArticleSharingUxUpdates ? (
-					<span className={styles['o-forms-input__label']}>
-						Gift to <strong>{enterpriseLimit}</strong> people{' '}
-						<span className={[styles['o-labels'], styles['o-labels--content-premium']].join(' ')}>
-							Enterprise
-						</span>
-					</span>
-				) : (
-					<span className={styles['o-forms-input__label']}>
-						with up to <strong>{enterpriseLimit} people</strong>{' '}
-						<span className={[styles['o-labels'], styles['o-labels--content-premium']].join(' ')}>
-							Enterprise
-						</span>
+				<span className={styles['o-forms-input__label']}>
+					with up to <strong>{enterpriseLimit} people</strong>{' '}
+					<span className={[styles['o-labels'], styles['o-labels--content-premium']].join(' ')}>
+						Enterprise
 					</span>
-				)}
+				</span>
 			</label>
 		)}
 
diff --git a/components/x-gift-article/src/UrlSection.jsx b/components/x-gift-article/src/UrlSection.jsx
index b1d6e8547..903f72bdf 100644
--- a/components/x-gift-article/src/UrlSection.jsx
+++ b/components/x-gift-article/src/UrlSection.jsx
@@ -22,7 +22,9 @@ export default ({
 	nativeShare,
 	invalidResponseFromApi,
 	isArticleSharingUxUpdates,
-	actions
+	actions,
+	enterpriseLimit,
+	enterpriseHasCredits
 }) => {
 	const hideUrlShareElements = giftCredits === 0 && shareType === ShareType.gift
 	const showUrlShareElements = !hideUrlShareElements
@@ -31,7 +33,8 @@ export default ({
 		<div
 			className={urlSectionClassNames}
 			data-section-id={shareType + 'Link'}
-			data-trackable={shareType + 'Link'}>
+			data-trackable={shareType + 'Link'}
+		>
 			{showUrlShareElements && (
 				<Url
 					{...{
@@ -53,7 +56,9 @@ export default ({
 					nextRenewalDateText,
 					redemptionLimit,
 					invalidResponseFromApi,
-					isArticleSharingUxUpdates
+					isArticleSharingUxUpdates,
+					enterpriseHasCredits,
+					enterpriseLimit
 				}}
 			/>
 
diff --git a/components/x-gift-article/src/lib/enterpriseApi.js b/components/x-gift-article/src/lib/enterpriseApi.js
index ec3d8fd7f..12570e068 100644
--- a/components/x-gift-article/src/lib/enterpriseApi.js
+++ b/components/x-gift-article/src/lib/enterpriseApi.js
@@ -35,10 +35,12 @@ export default class EnterpriseApiClient {
 
 			return {
 				limit: json.limit,
-				hasCredits: json.hasCredits
+				hasCredits: json.hasCredits,
+				firstTimeUser: json.firstTimeUser,
+				enabled: json.enabled
 			}
 		} catch (e) {
-			return { limit: null, hasCredits: false }
+			return { enabled: false, limit: null, hasCredits: false, firstTimeUser: false }
 		}
 	}
 }
diff --git a/components/x-gift-article/storybook/with-enterprise.js b/components/x-gift-article/storybook/with-enterprise.js
index d7b8cbb77..1d055b0dc 100644
--- a/components/x-gift-article/storybook/with-enterprise.js
+++ b/components/x-gift-article/storybook/with-enterprise.js
@@ -40,6 +40,8 @@ exports.fetchMock = (fetchMock) => {
 		})
 		.get(`/allowance`, {
 			limit: 120,
-			hasCredits: true
+			hasCredits: true,
+			firstTimeUser: false,
+			enabled: true
 		})
 }

From 2ea2a7da34c7ed5874adea2496d2d5ab3a94f922 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Tue, 14 Dec 2021 14:59:47 +0000
Subject: [PATCH 07/32] add message to request access for enterprise sharing

---
 components/x-gift-article/bower.json          |  1 +
 components/x-gift-article/src/Form.jsx        |  1 +
 components/x-gift-article/src/GiftArticle.jsx |  8 +++---
 .../x-gift-article/src/GiftArticle.scss       | 16 ++++++++++++
 components/x-gift-article/src/Message.jsx     | 25 ++++++++++++++++++-
 components/x-gift-article/src/UrlSection.jsx  | 10 +++++---
 .../x-gift-article/src/lib/enterpriseApi.js   |  5 ++--
 7 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/components/x-gift-article/bower.json b/components/x-gift-article/bower.json
index 74de008b3..29ad3be0f 100644
--- a/components/x-gift-article/bower.json
+++ b/components/x-gift-article/bower.json
@@ -5,6 +5,7 @@
   "private": true,
   "dependencies": {
     "o-buttons": "^6.0.0",
+    "o-colors": "^5.0.0",
     "o-forms": "^8.0.0",
     "o-labels": "5.0.0",
     "o-loading": "^4.0.0",
diff --git a/components/x-gift-article/src/Form.jsx b/components/x-gift-article/src/Form.jsx
index af278a01b..87a012e0f 100644
--- a/components/x-gift-article/src/Form.jsx
+++ b/components/x-gift-article/src/Form.jsx
@@ -20,6 +20,7 @@ export default (props) => (
 						showEnterpriseUrlSection={props.actions.showEnterpriseUrlSection}
 						showNonGiftUrlSection={props.actions.showNonGiftUrlSection}
 						enterpriseLimit={props.enterpriseLimit}
+						enterpriseEnabled={props.enterpriseEnabled}
 					/>
 				)}
 
diff --git a/components/x-gift-article/src/GiftArticle.jsx b/components/x-gift-article/src/GiftArticle.jsx
index 87a6ff5a3..4adc30cee 100644
--- a/components/x-gift-article/src/GiftArticle.jsx
+++ b/components/x-gift-article/src/GiftArticle.jsx
@@ -117,7 +117,7 @@ const withGiftFormActions = withActions(
 						}
 					} else {
 						const { giftCredits, monthlyAllowance, nextRenewalDate } = await api.getGiftArticleAllowance()
-						const { enabled, limit, hasCredits, firstTimeUser } =
+						const { enabled, limit, hasCredits, firstTimeUser, requestAccess } =
 							await enterpriseApi.getEnterpriseArticleAllowance()
 						// avoid to use giftCredits >= 0 because it returns true when null and ""
 						if (giftCredits > 0 || giftCredits === 0) {
@@ -126,7 +126,8 @@ const withGiftFormActions = withActions(
 								enterpriseEnabled: enabled,
 								enterpriseLimit: limit,
 								enterpriseHasCredits: hasCredits,
-								enterpriseFirstTimeUser: firstTimeUser
+								enterpriseFirstTimeUser: firstTimeUser,
+								enterpriseRequestAccess: requestAccess
 							}
 						} else {
 							return {
@@ -134,7 +135,8 @@ const withGiftFormActions = withActions(
 								enterpriseEnabled: enabled,
 								enterpriseLimit: limit,
 								enterpriseHasCredits: hasCredits,
-								enterpriseFirstTimeUser: firstTimeUser
+								enterpriseFirstTimeUser: firstTimeUser,
+								enterpriseRequestAccess: requestAccess
 							}
 						}
 					}
diff --git a/components/x-gift-article/src/GiftArticle.scss b/components/x-gift-article/src/GiftArticle.scss
index 5cd2f4454..8405a2520 100644
--- a/components/x-gift-article/src/GiftArticle.scss
+++ b/components/x-gift-article/src/GiftArticle.scss
@@ -19,6 +19,9 @@ $o-typography-is-silent: true;
 $o-labels-is-silent: true;
 @import 'o-labels/main';
 
+$o-colors-is-silent: true;
+@import 'o-colors/main';
+
 
 .container {
 	@include oTypographySans;
@@ -108,6 +111,19 @@ $o-labels-is-silent: true;
 	margin-top: 12px;
 }
 
+.enterprise-message {
+	background: oColorsByName('white-40');
+	border: 1px solid oColorsByName('black-5');
+	padding: oSpacingByName('s2') oSpacingByName('s3');
+
+	h4 {
+		@include oTypographySans($scale: 1, $weight: 'semibold');
+		color: oColorsByName('black');
+		margin: 0;
+		padding: 2px 0px 10px;
+	}
+}
+
 .buttonBaseStyle {
 	@include oButtonsContent($opts: ('type': 'primary', 'size':'big'));
 }
diff --git a/components/x-gift-article/src/Message.jsx b/components/x-gift-article/src/Message.jsx
index 0286202b4..02a5640fd 100644
--- a/components/x-gift-article/src/Message.jsx
+++ b/components/x-gift-article/src/Message.jsx
@@ -14,7 +14,8 @@ export default ({
 	redemptionLimit,
 	invalidResponseFromApi,
 	isArticleSharingUxUpdates,
-	enterpriseHasCredits
+	enterpriseHasCredits,
+	enterpriseRequestAccess
 }) => {
 	if (isArticleSharingUxUpdates) {
 		if (isFreeArticle) {
@@ -97,6 +98,28 @@ export default ({
 					Your organisation has <strong>Enterprise Sharing credits</strong> available for you to use
 				</div>
 			)
+		} else {
+			if (enterpriseRequestAccess) {
+				//Activation Message
+				return (
+					<div className={styles['enterprise-message']}>
+						<h4>Engage more effectively with clients and colleagues.</h4>
+						<p>
+							Enterprise Sharing lets members of your organisation share FT article links with up to 100
+							people, even if they don't have a FT subscription.
+						</p>
+						<a
+							href="https://enterprise.ft.com/ft-enterprise-sharing-request-access/?segmentId=c87259e0-7073-3ea8-7f83-b988f05c3f94"
+							target="_blank"
+							rel="noreferrer"
+							className={styles['buttonBaseStyle']}
+							type="button"
+						>
+							Request Access
+						</a>
+					</div>
+				)
+			}
 		}
 	}
 
diff --git a/components/x-gift-article/src/UrlSection.jsx b/components/x-gift-article/src/UrlSection.jsx
index 903f72bdf..df3d7b107 100644
--- a/components/x-gift-article/src/UrlSection.jsx
+++ b/components/x-gift-article/src/UrlSection.jsx
@@ -24,9 +24,12 @@ export default ({
 	isArticleSharingUxUpdates,
 	actions,
 	enterpriseLimit,
-	enterpriseHasCredits
+	enterpriseHasCredits,
+	enterpriseRequestAccess
 }) => {
-	const hideUrlShareElements = giftCredits === 0 && shareType === ShareType.gift
+	const hideUrlShareElements =
+		(giftCredits === 0 && shareType === ShareType.gift) ||
+		(enterpriseRequestAccess && shareType === ShareType.enterprise)
 	const showUrlShareElements = !hideUrlShareElements
 
 	return (
@@ -58,7 +61,8 @@ export default ({
 					invalidResponseFromApi,
 					isArticleSharingUxUpdates,
 					enterpriseHasCredits,
-					enterpriseLimit
+					enterpriseLimit,
+					enterpriseRequestAccess
 				}}
 			/>
 
diff --git a/components/x-gift-article/src/lib/enterpriseApi.js b/components/x-gift-article/src/lib/enterpriseApi.js
index 12570e068..9f04107b5 100644
--- a/components/x-gift-article/src/lib/enterpriseApi.js
+++ b/components/x-gift-article/src/lib/enterpriseApi.js
@@ -37,10 +37,11 @@ export default class EnterpriseApiClient {
 				limit: json.limit,
 				hasCredits: json.hasCredits,
 				firstTimeUser: json.firstTimeUser,
-				enabled: json.enabled
+				enabled: json.enabled,
+				requestAccess: json.enabled && json.limit === null
 			}
 		} catch (e) {
-			return { enabled: false, limit: null, hasCredits: false, firstTimeUser: false }
+			return { enabled: false, limit: null, hasCredits: false, firstTimeUser: false, requestAccess: false }
 		}
 	}
 }

From 87fb5177fd400cda7b8316b8fcf0b6785de7779e Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Tue, 14 Dec 2021 15:00:41 +0000
Subject: [PATCH 08/32] add more stories for enterprise sharing gift article

---
 components/x-gift-article/storybook/index.jsx | 45 ++++++++++++++++++
 .../with-enterprise-first-time-user.js        | 47 +++++++++++++++++++
 .../storybook/with-enterprise-no-credits.js   | 47 +++++++++++++++++++
 .../with-enterprise-request-access.js         | 47 +++++++++++++++++++
 4 files changed, 186 insertions(+)
 create mode 100644 components/x-gift-article/storybook/with-enterprise-first-time-user.js
 create mode 100644 components/x-gift-article/storybook/with-enterprise-no-credits.js
 create mode 100644 components/x-gift-article/storybook/with-enterprise-request-access.js

diff --git a/components/x-gift-article/storybook/index.jsx b/components/x-gift-article/storybook/index.jsx
index 15c9ac024..76d96ff5a 100644
--- a/components/x-gift-article/storybook/index.jsx
+++ b/components/x-gift-article/storybook/index.jsx
@@ -87,6 +87,51 @@ export const FreeArticle = (args) => {
 	)
 }
 
+export const WithEnterpriseSharingWithoutCredits = (args) => {
+	require('./with-enterprise-no-credits').fetchMock(fetchMock)
+	return (
+		<div className="story-container">
+			{dependencies && <BuildService dependencies={dependencies} />}
+			<Helmet>
+				<link rel="stylesheet" href={`components/x-gift-article/dist/GiftArticle.css`} />
+			</Helmet>
+			<GiftArticle {...args} actionsRef={(actions) => actions?.activate()} />
+		</div>
+	)
+}
+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 (
+		<div className="story-container">
+			{dependencies && <BuildService dependencies={dependencies} />}
+			<Helmet>
+				<link rel="stylesheet" href={`components/x-gift-article/dist/GiftArticle.css`} />
+			</Helmet>
+			<GiftArticle {...args} actionsRef={(actions) => actions?.activate()} />
+		</div>
+	)
+}
+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 (
+		<div className="story-container">
+			{dependencies && <BuildService dependencies={dependencies} />}
+			<Helmet>
+				<link rel="stylesheet" href={`components/x-gift-article/dist/GiftArticle.css`} />
+			</Helmet>
+			<GiftArticle {...args} actionsRef={(actions) => actions?.activate()} />
+		</div>
+	)
+}
+WithEnterpriseSharingRequestAccess.storyName = 'With enterprise sharing (request access)'
+WithEnterpriseSharingRequestAccess.args = require('./with-enterprise-request-access').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..5bdbcbecb
--- /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)',
+	isFreeArticle: false,
+	article: {
+		id: articleId,
+		url: articleUrl,
+		title: 'Title Title Title Title'
+	},
+	showMobileShareLinks: true,
+	id: 'base-gift-article-static-id'
+}
+
+// This reference is only required for hot module loading in development
+// <https://webpack.js.org/concepts/hot-module-replacement/>
+exports.m = module
+
+exports.fetchMock = (fetchMock) => {
+	fetchMock
+		.restore()
+		.get('/article/gift-credits', {
+			allowance: 20,
+			consumedCredits: 5,
+			remainingCredits: 15,
+			renewalDate: '2018-08-01T00:00:00Z'
+		})
+		.get(`/article/shorten-url/${encodeURIComponent(articleUrlRedeemed)}`, {
+			shortenedUrl: 'https://shortened-gift-url'
+		})
+		.get(`/article/shorten-url/${encodeURIComponent(nonGiftArticleUrl)}`, {
+			shortenedUrl: 'https://shortened-non-gift-url'
+		})
+		.get(`/article/gift-link/${encodeURIComponent(articleId)}`, {
+			redemptionUrl: articleUrlRedeemed,
+			remainingAllowance: 1
+		})
+		.get(`/allowance`, {
+			limit: 120,
+			hasCredits: true,
+			firstTimeUser: true,
+			enabled: true
+		})
+}
diff --git a/components/x-gift-article/storybook/with-enterprise-no-credits.js b/components/x-gift-article/storybook/with-enterprise-no-credits.js
new file mode 100644
index 000000000..1f327d74e
--- /dev/null
+++ b/components/x-gift-article/storybook/with-enterprise-no-credits.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 (Enterprise Sharing without credits)',
+	isFreeArticle: false,
+	article: {
+		id: articleId,
+		url: articleUrl,
+		title: 'Title Title Title Title'
+	},
+	showMobileShareLinks: true,
+	id: 'base-gift-article-static-id'
+}
+
+// This reference is only required for hot module loading in development
+// <https://webpack.js.org/concepts/hot-module-replacement/>
+exports.m = module
+
+exports.fetchMock = (fetchMock) => {
+	fetchMock
+		.restore()
+		.get('/article/gift-credits', {
+			allowance: 20,
+			consumedCredits: 5,
+			remainingCredits: 15,
+			renewalDate: '2018-08-01T00:00:00Z'
+		})
+		.get(`/article/shorten-url/${encodeURIComponent(articleUrlRedeemed)}`, {
+			shortenedUrl: 'https://shortened-gift-url'
+		})
+		.get(`/article/shorten-url/${encodeURIComponent(nonGiftArticleUrl)}`, {
+			shortenedUrl: 'https://shortened-non-gift-url'
+		})
+		.get(`/article/gift-link/${encodeURIComponent(articleId)}`, {
+			redemptionUrl: articleUrlRedeemed,
+			remainingAllowance: 1
+		})
+		.get(`/allowance`, {
+			limit: 120,
+			hasCredits: false,
+			firstTimeUser: false,
+			enabled: true
+		})
+}
diff --git a/components/x-gift-article/storybook/with-enterprise-request-access.js b/components/x-gift-article/storybook/with-enterprise-request-access.js
new file mode 100644
index 000000000..f5202f5e0
--- /dev/null
+++ b/components/x-gift-article/storybook/with-enterprise-request-access.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)',
+	isFreeArticle: false,
+	article: {
+		id: articleId,
+		url: articleUrl,
+		title: 'Title Title Title Title'
+	},
+	showMobileShareLinks: true,
+	id: 'base-gift-article-static-id'
+}
+
+// This reference is only required for hot module loading in development
+// <https://webpack.js.org/concepts/hot-module-replacement/>
+exports.m = module
+
+exports.fetchMock = (fetchMock) => {
+	fetchMock
+		.restore()
+		.get('/article/gift-credits', {
+			allowance: 20,
+			consumedCredits: 5,
+			remainingCredits: 15,
+			renewalDate: '2018-08-01T00:00:00Z'
+		})
+		.get(`/article/shorten-url/${encodeURIComponent(articleUrlRedeemed)}`, {
+			shortenedUrl: 'https://shortened-gift-url'
+		})
+		.get(`/article/shorten-url/${encodeURIComponent(nonGiftArticleUrl)}`, {
+			shortenedUrl: 'https://shortened-non-gift-url'
+		})
+		.get(`/article/gift-link/${encodeURIComponent(articleId)}`, {
+			redemptionUrl: articleUrlRedeemed,
+			remainingAllowance: 1
+		})
+		.get(`/allowance`, {
+			limit: null,
+			hasCredits: false,
+			firstTimeUser: false,
+			enabled: true
+		})
+}

From 860fab34a499aebc5d8ba8267b30fa07b87fb8c1 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Wed, 15 Dec 2021 17:51:02 +0000
Subject: [PATCH 09/32] add enterprise gift message when user has no credits
 left

---
 components/x-gift-article/bower.json          |  1 +
 components/x-gift-article/src/Form.jsx        |  1 +
 .../x-gift-article/src/GiftArticle.scss       | 22 ++++++++++++++++---
 components/x-gift-article/src/Message.jsx     | 22 ++++++++++++++++++-
 .../src/RadioButtonsSection.jsx               |  2 ++
 components/x-gift-article/src/UrlSection.jsx  |  2 +-
 6 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/components/x-gift-article/bower.json b/components/x-gift-article/bower.json
index 29ad3be0f..90e74f8f4 100644
--- a/components/x-gift-article/bower.json
+++ b/components/x-gift-article/bower.json
@@ -7,6 +7,7 @@
     "o-buttons": "^6.0.0",
     "o-colors": "^5.0.0",
     "o-forms": "^8.0.0",
+    "o-icons": "^6.0.0",
     "o-labels": "5.0.0",
     "o-loading": "^4.0.0",
     "o-message": "^4.0.0",
diff --git a/components/x-gift-article/src/Form.jsx b/components/x-gift-article/src/Form.jsx
index 87a012e0f..048e7e777 100644
--- a/components/x-gift-article/src/Form.jsx
+++ b/components/x-gift-article/src/Form.jsx
@@ -20,6 +20,7 @@ export default (props) => (
 						showEnterpriseUrlSection={props.actions.showEnterpriseUrlSection}
 						showNonGiftUrlSection={props.actions.showNonGiftUrlSection}
 						enterpriseLimit={props.enterpriseLimit}
+						enterpriseHasCredits={props.enterpriseHasCredits}
 						enterpriseEnabled={props.enterpriseEnabled}
 					/>
 				)}
diff --git a/components/x-gift-article/src/GiftArticle.scss b/components/x-gift-article/src/GiftArticle.scss
index 8405a2520..f752b6518 100644
--- a/components/x-gift-article/src/GiftArticle.scss
+++ b/components/x-gift-article/src/GiftArticle.scss
@@ -22,6 +22,9 @@ $o-labels-is-silent: true;
 $o-colors-is-silent: true;
 @import 'o-colors/main';
 
+$o-icons-is-silent: true;
+@import 'o-icons/main';
+
 
 .container {
 	@include oTypographySans;
@@ -30,6 +33,15 @@ $o-colors-is-silent: true;
 	}
 }
 
+.o-icons__enterprise-no-credits {
+	@include oIconsContent(
+		$icon-name: 'info',
+		$color: oColorsByName('claret'),
+		$size: 32
+	);
+	margin: -11px -11px -11px 0px;
+}
+
 
 .share-form {
 	max-width: none;
@@ -114,13 +126,17 @@ $o-colors-is-silent: true;
 .enterprise-message {
 	background: oColorsByName('white-40');
 	border: 1px solid oColorsByName('black-5');
-	padding: oSpacingByName('s2') oSpacingByName('s3');
+	margin-top: oSpacingByName('s4');
+	padding: oSpacingByName('s4');
 
 	h4 {
 		@include oTypographySans($scale: 1, $weight: 'semibold');
-		color: oColorsByName('black');
+		color: oColorsByName('black-90');
+		font-size: 16px;
 		margin: 0;
-		padding: 2px 0px 10px;
+	}
+	p {
+		margin: oSpacingByName('s2') 0px;
 	}
 }
 
diff --git a/components/x-gift-article/src/Message.jsx b/components/x-gift-article/src/Message.jsx
index 02a5640fd..bd3a4f1bf 100644
--- a/components/x-gift-article/src/Message.jsx
+++ b/components/x-gift-article/src/Message.jsx
@@ -113,13 +113,33 @@ export default ({
 							target="_blank"
 							rel="noreferrer"
 							className={styles['buttonBaseStyle']}
-							type="button"
 						>
 							Request Access
 						</a>
 					</div>
 				)
 			}
+
+			if (enterpriseHasCredits === false) {
+				return (
+					<div className={styles['enterprise-message']}>
+						<h4>Your organisation has run out of share credits.</h4>
+						<p>
+							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.
+						</p>
+						<a
+							href="https://enterprise.ft.com/ft-enterprise-sharing-request-access/?segmentId=c87259e0-7073-3ea8-7f83-b988f05c3f94"
+							target="_blank"
+							rel="noreferrer"
+							className={styles['buttonBaseStyle']}
+							type="button"
+						>
+							Request more credits
+						</a>
+					</div>
+				)
+			}
 		}
 	}
 
diff --git a/components/x-gift-article/src/RadioButtonsSection.jsx b/components/x-gift-article/src/RadioButtonsSection.jsx
index 8e5aa6570..8d276cbd1 100644
--- a/components/x-gift-article/src/RadioButtonsSection.jsx
+++ b/components/x-gift-article/src/RadioButtonsSection.jsx
@@ -17,6 +17,7 @@ export default ({
 	isArticleSharingUxUpdates,
 	showNonGiftUrlSection,
 	enterpriseEnabled = false,
+	enterpriseHasCredits = true,
 	enterpriseLimit = 100 //if limit is not set enterprise will show 100 for default (value used for activation)
 }) => (
 	<div className={radioSectionClassNames} role="group" aria-labelledby="article-share-options">
@@ -58,6 +59,7 @@ export default ({
 					<span className={[styles['o-labels'], styles['o-labels--content-premium']].join(' ')}>
 						Enterprise
 					</span>
+					{!enterpriseHasCredits && <span className={styles['o-icons__enterprise-no-credits']}></span>}
 				</span>
 			</label>
 		)}
diff --git a/components/x-gift-article/src/UrlSection.jsx b/components/x-gift-article/src/UrlSection.jsx
index df3d7b107..68b9fd3df 100644
--- a/components/x-gift-article/src/UrlSection.jsx
+++ b/components/x-gift-article/src/UrlSection.jsx
@@ -29,7 +29,7 @@ export default ({
 }) => {
 	const hideUrlShareElements =
 		(giftCredits === 0 && shareType === ShareType.gift) ||
-		(enterpriseRequestAccess && shareType === ShareType.enterprise)
+		((enterpriseRequestAccess || !enterpriseHasCredits) && shareType === ShareType.enterprise)
 	const showUrlShareElements = !hideUrlShareElements
 
 	return (

From 456b77a4a614d15703317495af9b0c1071beadba Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Wed, 15 Dec 2021 18:09:44 +0000
Subject: [PATCH 10/32] add message for enterprise gift first time journey

---
 components/x-gift-article/src/Message.jsx          | 14 +++++++++++++-
 components/x-gift-article/src/UrlSection.jsx       |  6 ++++--
 .../storybook/with-enterprise-first-time-user.js   |  2 +-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/components/x-gift-article/src/Message.jsx b/components/x-gift-article/src/Message.jsx
index bd3a4f1bf..74c4df0ef 100644
--- a/components/x-gift-article/src/Message.jsx
+++ b/components/x-gift-article/src/Message.jsx
@@ -15,7 +15,8 @@ export default ({
 	invalidResponseFromApi,
 	isArticleSharingUxUpdates,
 	enterpriseHasCredits,
-	enterpriseRequestAccess
+	enterpriseRequestAccess,
+	enterpriseFirstTimeUser
 }) => {
 	if (isArticleSharingUxUpdates) {
 		if (isFreeArticle) {
@@ -93,6 +94,17 @@ export default ({
 
 	if (shareType === ShareType.enterprise) {
 		if (enterpriseHasCredits === true) {
+			if (enterpriseFirstTimeUser) {
+				return (
+					<div className={styles['enterprise-message']}>
+						<h4>Engage more effectively with clients and colleagues.</h4>
+						<p>
+							Enterprise Sharing lets members of your organisation share FT article links with up to 100
+							people, even if they don’t have a FT subscription.
+						</p>
+					</div>
+				)
+			}
 			return (
 				<div className={messageClassName}>
 					Your organisation has <strong>Enterprise Sharing credits</strong> available for you to use
diff --git a/components/x-gift-article/src/UrlSection.jsx b/components/x-gift-article/src/UrlSection.jsx
index 68b9fd3df..2fd7fa534 100644
--- a/components/x-gift-article/src/UrlSection.jsx
+++ b/components/x-gift-article/src/UrlSection.jsx
@@ -25,7 +25,8 @@ export default ({
 	actions,
 	enterpriseLimit,
 	enterpriseHasCredits,
-	enterpriseRequestAccess
+	enterpriseRequestAccess,
+	enterpriseFirstTimeUser
 }) => {
 	const hideUrlShareElements =
 		(giftCredits === 0 && shareType === ShareType.gift) ||
@@ -62,7 +63,8 @@ export default ({
 					isArticleSharingUxUpdates,
 					enterpriseHasCredits,
 					enterpriseLimit,
-					enterpriseRequestAccess
+					enterpriseRequestAccess,
+					enterpriseFirstTimeUser
 				}}
 			/>
 
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
index 5bdbcbecb..2614b919a 100644
--- a/components/x-gift-article/storybook/with-enterprise-first-time-user.js
+++ b/components/x-gift-article/storybook/with-enterprise-first-time-user.js
@@ -4,7 +4,7 @@ const articleUrlRedeemed = 'https://gift-url-redeemed'
 const nonGiftArticleUrl = `${articleUrl}?shareType=nongift`
 
 exports.args = {
-	title: 'Share this article (with enterprise sharing)',
+	title: 'Share this article (with enterprise sharing - first time user journey)',
 	isFreeArticle: false,
 	article: {
 		id: articleId,

From c95b28017a48532cc65b8c813638b573aa9037c6 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Wed, 15 Dec 2021 18:13:50 +0000
Subject: [PATCH 11/32] add story with enterprise sharing gift link created

---
 components/x-gift-article/src/Message.jsx     |  8 ++++
 components/x-gift-article/storybook/index.jsx | 15 ++++++
 .../storybook/with-enterprise-sharing-link.js | 48 +++++++++++++++++++
 3 files changed, 71 insertions(+)
 create mode 100644 components/x-gift-article/storybook/with-enterprise-sharing-link.js

diff --git a/components/x-gift-article/src/Message.jsx b/components/x-gift-article/src/Message.jsx
index 74c4df0ef..5c0d4f37e 100644
--- a/components/x-gift-article/src/Message.jsx
+++ b/components/x-gift-article/src/Message.jsx
@@ -14,6 +14,7 @@ export default ({
 	redemptionLimit,
 	invalidResponseFromApi,
 	isArticleSharingUxUpdates,
+	enterpriseLimit,
 	enterpriseHasCredits,
 	enterpriseRequestAccess,
 	enterpriseFirstTimeUser
@@ -93,6 +94,13 @@ export default ({
 	}
 
 	if (shareType === ShareType.enterprise) {
+		if (isGiftUrlCreated === true) {
+			return (
+				<div className={messageClassName}>
+					This link can be opened by up to {enterpriseLimit} people and is valid for 90 days
+				</div>
+			)
+		}
 		if (enterpriseHasCredits === true) {
 			if (enterpriseFirstTimeUser) {
 				return (
diff --git a/components/x-gift-article/storybook/index.jsx b/components/x-gift-article/storybook/index.jsx
index 76d96ff5a..9daf15c7d 100644
--- a/components/x-gift-article/storybook/index.jsx
+++ b/components/x-gift-article/storybook/index.jsx
@@ -132,6 +132,21 @@ export const WithEnterpriseSharingRequestAccess = (args) => {
 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 (
+		<div className="story-container">
+			{dependencies && <BuildService dependencies={dependencies} />}
+			<Helmet>
+				<link rel="stylesheet" href={`components/x-gift-article/dist/GiftArticle.css`} />
+			</Helmet>
+			<GiftArticle {...args} actionsRef={(actions) => actions?.activate()} />
+		</div>
+	)
+}
+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-sharing-link.js b/components/x-gift-article/storybook/with-enterprise-sharing-link.js
new file mode 100644
index 000000000..d5de9eb2c
--- /dev/null
+++ b/components/x-gift-article/storybook/with-enterprise-sharing-link.js
@@ -0,0 +1,48 @@
+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 link)',
+	isFreeArticle: false,
+	isGiftUrlCreated: true,
+	article: {
+		id: articleId,
+		url: articleUrl,
+		title: 'Title Title Title Title'
+	},
+	showMobileShareLinks: true,
+	id: 'base-gift-article-static-id'
+}
+
+// This reference is only required for hot module loading in development
+// <https://webpack.js.org/concepts/hot-module-replacement/>
+exports.m = module
+
+exports.fetchMock = (fetchMock) => {
+	fetchMock
+		.restore()
+		.get('/article/gift-credits', {
+			allowance: 20,
+			consumedCredits: 5,
+			remainingCredits: 15,
+			renewalDate: '2018-08-01T00:00:00Z'
+		})
+		.get(`/article/shorten-url/${encodeURIComponent(articleUrlRedeemed)}`, {
+			shortenedUrl: 'https://shortened-gift-url'
+		})
+		.get(`/article/shorten-url/${encodeURIComponent(nonGiftArticleUrl)}`, {
+			shortenedUrl: 'https://shortened-non-gift-url'
+		})
+		.get(`/article/gift-link/${encodeURIComponent(articleId)}`, {
+			redemptionUrl: articleUrlRedeemed,
+			remainingAllowance: 1
+		})
+		.get(`/allowance`, {
+			limit: 120,
+			hasCredits: true,
+			firstTimeUser: false,
+			enabled: true
+		})
+}

From 22f51dbc7d0fe8d8a9b3a8afcfca385256f837f1 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Wed, 15 Dec 2021 18:14:33 +0000
Subject: [PATCH 12/32] group enterprise-sharing gift article stories

---
 components/x-gift-article/storybook/index.jsx | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/components/x-gift-article/storybook/index.jsx b/components/x-gift-article/storybook/index.jsx
index 9daf15c7d..ef919ffbf 100644
--- a/components/x-gift-article/storybook/index.jsx
+++ b/components/x-gift-article/storybook/index.jsx
@@ -27,21 +27,6 @@ export const WithGiftCredits = (args) => {
 WithGiftCredits.storyName = 'With gift credits'
 WithGiftCredits.args = require('./with-gift-credits').args
 
-export const WithEnterpriseSharing = (args) => {
-	require('./with-enterprise').fetchMock(fetchMock)
-	return (
-		<div className="story-container">
-			{dependencies && <BuildService dependencies={dependencies} />}
-			<Helmet>
-				<link rel="stylesheet" href={`components/x-gift-article/dist/GiftArticle.css`} />
-			</Helmet>
-			<GiftArticle {...args} actionsRef={(actions) => actions?.activate()} />
-		</div>
-	)
-}
-WithEnterpriseSharing.storyName = 'With enterprise sharing'
-WithEnterpriseSharing.args = require('./with-enterprise').args
-
 export const WithoutGiftCredits = (args) => {
 	require('./without-gift-credits').fetchMock(fetchMock)
 	return (
@@ -87,6 +72,21 @@ export const FreeArticle = (args) => {
 	)
 }
 
+export const WithEnterpriseSharing = (args) => {
+	require('./with-enterprise').fetchMock(fetchMock)
+	return (
+		<div className="story-container">
+			{dependencies && <BuildService dependencies={dependencies} />}
+			<Helmet>
+				<link rel="stylesheet" href={`components/x-gift-article/dist/GiftArticle.css`} />
+			</Helmet>
+			<GiftArticle {...args} actionsRef={(actions) => actions?.activate()} />
+		</div>
+	)
+}
+WithEnterpriseSharing.storyName = 'With enterprise sharing'
+WithEnterpriseSharing.args = require('./with-enterprise').args
+
 export const WithEnterpriseSharingWithoutCredits = (args) => {
 	require('./with-enterprise-no-credits').fetchMock(fetchMock)
 	return (

From 60c75be35838bc50ecf7d66110aceaec57630828 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Wed, 15 Dec 2021 18:18:05 +0000
Subject: [PATCH 13/32] add enterprise sharing as default option in ES link
 story

---
 .../x-gift-article/storybook/with-enterprise-sharing-link.js   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/x-gift-article/storybook/with-enterprise-sharing-link.js b/components/x-gift-article/storybook/with-enterprise-sharing-link.js
index d5de9eb2c..88d97bc9a 100644
--- a/components/x-gift-article/storybook/with-enterprise-sharing-link.js
+++ b/components/x-gift-article/storybook/with-enterprise-sharing-link.js
@@ -13,7 +13,8 @@ exports.args = {
 		title: 'Title Title Title Title'
 	},
 	showMobileShareLinks: true,
-	id: 'base-gift-article-static-id'
+	id: 'base-gift-article-static-id',
+	shareType: 'enterprise'
 }
 
 // This reference is only required for hot module loading in development

From 5f82ad1000f338eda50bb6192e50a698b4da874a Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Wed, 15 Dec 2021 18:26:51 +0000
Subject: [PATCH 14/32] add action to create ES link

---
 components/x-gift-article/src/GiftArticle.jsx         | 11 +++++++++++
 components/x-gift-article/src/lib/enterpriseApi.js    |  8 ++++++++
 components/x-gift-article/src/lib/tracking.js         |  8 ++++++++
 .../x-gift-article/storybook/with-enterprise.js       |  5 ++++-
 4 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/components/x-gift-article/src/GiftArticle.jsx b/components/x-gift-article/src/GiftArticle.jsx
index 4adc30cee..39266c812 100644
--- a/components/x-gift-article/src/GiftArticle.jsx
+++ b/components/x-gift-article/src/GiftArticle.jsx
@@ -65,6 +65,17 @@ const withGiftFormActions = withActions(
 				}
 			},
 
+			async createEnterpriseUrl() {
+				const { redemptionUrl } = await enterpriseApi.getESUrl(initialProps.article.id)
+
+				if (redemptionUrl) {
+					tracking.createESLink(redemptionUrl)
+					return updaters.setGiftUrl(redemptionUrl, 0, false)
+				} else {
+					// TODO do something
+				}
+			},
+
 			copyGiftUrl(event) {
 				copyToClipboard(event)
 
diff --git a/components/x-gift-article/src/lib/enterpriseApi.js b/components/x-gift-article/src/lib/enterpriseApi.js
index 9f04107b5..f6f7a29ed 100644
--- a/components/x-gift-article/src/lib/enterpriseApi.js
+++ b/components/x-gift-article/src/lib/enterpriseApi.js
@@ -44,4 +44,12 @@ export default class EnterpriseApiClient {
 			return { enabled: false, limit: null, hasCredits: false, firstTimeUser: false, requestAccess: false }
 		}
 	}
+
+	async getESUrl(contentId) {
+		const json = await this.fetchJson('/', { method: 'POST', body: JSON.stringify({ contentId }) })
+
+		return {
+			redemptionUrl: json.url
+		}
+	}
 }
diff --git a/components/x-gift-article/src/lib/tracking.js b/components/x-gift-article/src/lib/tracking.js
index 302fbad00..fb7b72ddf 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: 'enterprise-sharing-link',
+			action: 'create',
+			linkType: 'enterpriseSharingLink',
+			link
+		}),
+
 	copyLink: (linkType, link) =>
 		dispatchEvent({
 			category: 'gift-link',
diff --git a/components/x-gift-article/storybook/with-enterprise.js b/components/x-gift-article/storybook/with-enterprise.js
index 1d055b0dc..48fe08aac 100644
--- a/components/x-gift-article/storybook/with-enterprise.js
+++ b/components/x-gift-article/storybook/with-enterprise.js
@@ -1,6 +1,6 @@
 const articleId = 'article id'
 const articleUrl = 'https://www.ft.com/content/blahblahblah'
-const articleUrlRedeemed = 'https://gift-url-redeemed'
+const articleUrlRedeemed = 'https://enterprise-sharing.ft.com/gift-url-redeemed'
 const nonGiftArticleUrl = `${articleUrl}?shareType=nongift`
 
 exports.args = {
@@ -44,4 +44,7 @@ exports.fetchMock = (fetchMock) => {
 			firstTimeUser: false,
 			enabled: true
 		})
+		.post(`/`, {
+			url: articleUrlRedeemed
+		})
 }

From d88fe097ec956b02912dfe29138d3dc1553fd349 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Thu, 16 Dec 2021 09:41:53 +0000
Subject: [PATCH 15/32] remove gift link inline radio selection

---
 components/x-gift-article/src/GiftArticle.scss        | 8 --------
 components/x-gift-article/src/RadioButtonsSection.jsx | 1 -
 2 files changed, 9 deletions(-)

diff --git a/components/x-gift-article/src/GiftArticle.scss b/components/x-gift-article/src/GiftArticle.scss
index f752b6518..9a6788e9d 100644
--- a/components/x-gift-article/src/GiftArticle.scss
+++ b/components/x-gift-article/src/GiftArticle.scss
@@ -77,14 +77,6 @@ $o-icons-is-silent: true;
 	.share-option-title {
 		@include oNormaliseVisuallyHidden();
 	}
-
-	.o-forms-field{
-		@media only screen and (min-width: 600px) {
-			label[for$="Link"]{
-				margin-bottom: 0;
-			}
-		}	
-	}
 }
 
 @media only screen and (min-width: 600px) {
diff --git a/components/x-gift-article/src/RadioButtonsSection.jsx b/components/x-gift-article/src/RadioButtonsSection.jsx
index 8d276cbd1..affac53ad 100644
--- a/components/x-gift-article/src/RadioButtonsSection.jsx
+++ b/components/x-gift-article/src/RadioButtonsSection.jsx
@@ -5,7 +5,6 @@ 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(' ')

From e6af51973b31782c931d6b9b960b639d9d56d2a6 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Thu, 16 Dec 2021 09:48:42 +0000
Subject: [PATCH 16/32] fix enterprise sharing message area

---
 components/x-gift-article/src/GiftArticle.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/x-gift-article/src/GiftArticle.scss b/components/x-gift-article/src/GiftArticle.scss
index 9a6788e9d..a1fd74263 100644
--- a/components/x-gift-article/src/GiftArticle.scss
+++ b/components/x-gift-article/src/GiftArticle.scss
@@ -116,6 +116,7 @@ $o-icons-is-silent: true;
 }
 
 .enterprise-message {
+	grid-area: message;
 	background: oColorsByName('white-40');
 	border: 1px solid oColorsByName('black-5');
 	margin-top: oSpacingByName('s4');

From 8c8cfd44236ffdb956fdd6a1b06139c93f64ca92 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Thu, 16 Dec 2021 11:23:49 +0000
Subject: [PATCH 17/32] remove unnecessary if block

---
 components/x-gift-article/src/Message.jsx | 39 +++++++++++------------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/components/x-gift-article/src/Message.jsx b/components/x-gift-article/src/Message.jsx
index 5c0d4f37e..4611c94ad 100644
--- a/components/x-gift-article/src/Message.jsx
+++ b/components/x-gift-article/src/Message.jsx
@@ -139,27 +139,24 @@ export default ({
 					</div>
 				)
 			}
-
-			if (enterpriseHasCredits === false) {
-				return (
-					<div className={styles['enterprise-message']}>
-						<h4>Your organisation has run out of share credits.</h4>
-						<p>
-							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.
-						</p>
-						<a
-							href="https://enterprise.ft.com/ft-enterprise-sharing-request-access/?segmentId=c87259e0-7073-3ea8-7f83-b988f05c3f94"
-							target="_blank"
-							rel="noreferrer"
-							className={styles['buttonBaseStyle']}
-							type="button"
-						>
-							Request more credits
-						</a>
-					</div>
-				)
-			}
+			return (
+				<div className={styles['enterprise-message']}>
+					<h4>Your organisation has run out of share credits.</h4>
+					<p>
+						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.
+					</p>
+					<a
+						href="https://enterprise.ft.com/ft-enterprise-sharing-request-access/?segmentId=c87259e0-7073-3ea8-7f83-b988f05c3f94"
+						target="_blank"
+						rel="noreferrer"
+						className={styles['buttonBaseStyle']}
+						type="button"
+					>
+						Request more credits
+					</a>
+				</div>
+			)
 		}
 	}
 

From 0b7fa115a4e7c925bda8787ba5a63a464ea57576 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Thu, 16 Dec 2021 11:46:54 +0000
Subject: [PATCH 18/32] moves gift credit from radio button option to message

---
 components/x-gift-article/src/Message.jsx             | 2 +-
 components/x-gift-article/src/RadioButtonsSection.jsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/x-gift-article/src/Message.jsx b/components/x-gift-article/src/Message.jsx
index 4611c94ad..53047ae4c 100644
--- a/components/x-gift-article/src/Message.jsx
+++ b/components/x-gift-article/src/Message.jsx
@@ -84,7 +84,7 @@ export default ({
 
 		return (
 			<div className={messageClassName}>
-				You have{' '}
+				Uses 1 gift credit. You have{' '}
 				<strong>
 					{giftCredits} gift article {giftCredits === 1 ? 'credit' : 'credits'}
 				</strong>{' '}
diff --git a/components/x-gift-article/src/RadioButtonsSection.jsx b/components/x-gift-article/src/RadioButtonsSection.jsx
index affac53ad..d27085f33 100644
--- a/components/x-gift-article/src/RadioButtonsSection.jsx
+++ b/components/x-gift-article/src/RadioButtonsSection.jsx
@@ -34,11 +34,11 @@ export default ({
 			/>
 			{isArticleSharingUxUpdates ? (
 				<span className={styles['o-forms-input__label']}>
-					Gift to <strong>anyone</strong> (uses <strong>1 credit</strong>)
+					Gift to <strong>anyone</strong>
 				</span>
 			) : (
 				<span className={styles['o-forms-input__label']}>
-					with up to <strong>3 people</strong> (uses 1 gift credit)
+					with up to <strong>3 people</strong>
 				</span>
 			)}
 		</label>
@@ -78,7 +78,7 @@ export default ({
 				</span>
 			) : (
 				<span className={styles['o-forms-input__label']}>
-					with <strong>other FT subscribers</strong>
+					with <strong>other FT subscribers</strong> only
 				</span>
 			)}
 		</label>

From af96a5b66a466d2809ab3f579cc8357af8f78e64 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Thu, 16 Dec 2021 11:47:14 +0000
Subject: [PATCH 19/32] minor fix story title

---
 .../x-gift-article/storybook/with-enterprise-request-access.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/x-gift-article/storybook/with-enterprise-request-access.js b/components/x-gift-article/storybook/with-enterprise-request-access.js
index f5202f5e0..ef5889f1d 100644
--- a/components/x-gift-article/storybook/with-enterprise-request-access.js
+++ b/components/x-gift-article/storybook/with-enterprise-request-access.js
@@ -4,7 +4,7 @@ const articleUrlRedeemed = 'https://gift-url-redeemed'
 const nonGiftArticleUrl = `${articleUrl}?shareType=nongift`
 
 exports.args = {
-	title: 'Share this article (with enterprise sharing)',
+	title: 'Share this article (with enterprise sharing - request access journey)',
 	isFreeArticle: false,
 	article: {
 		id: articleId,

From 4d59d6660b6c46d4e6742ea2ae9bdc614e2749bd Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Thu, 16 Dec 2021 15:29:09 +0000
Subject: [PATCH 20/32] change enterprise api client to receive base url as
 parameter

---
 components/x-gift-article/readme.md           |  2 +-
 components/x-gift-article/src/GiftArticle.jsx |  5 +-
 .../x-gift-article/src/lib/enterpriseApi.js   | 47 ++++++++++++++-----
 .../with-enterprise-first-time-user.js        |  5 +-
 .../storybook/with-enterprise-no-credits.js   |  5 +-
 .../with-enterprise-request-access.js         |  5 +-
 .../storybook/with-enterprise-sharing-link.js |  3 +-
 .../storybook/with-enterprise.js              |  7 +--
 8 files changed, 53 insertions(+), 26 deletions(-)

diff --git a/components/x-gift-article/readme.md b/components/x-gift-article/readme.md
index 40d949d03..06ee02a19 100644
--- a/components/x-gift-article/readme.md
+++ b/components/x-gift-article/readme.md
@@ -77,7 +77,7 @@ Property                  | Type    | Required | Note
 `nativeShare`             | Boolean | no       | This is a property for App to display Native Sharing.
 `apiProtocol`             | String  | no       | The protocol to use when making requests to the gift article and URL shortening services. Ignored if `apiDomain` is not set.
 `apiDomain`               | String  | no       | The domain to use when making requests to the gift article and URL shortening services.
-`enterpriseApiDomain`     | String  | no       | The domain to use when making requests to the enterprise sharing service.
+`enterpriseApiBaseUrl`    | String  | no       | The base URL to use when making requests to the enterprise sharing service.
 
 ###
 `isArticleSharingUxUpdates` boolean has been added as part of ACC-749 to enable AB testing of the impact of minor UX improvements to x-gift-article. Once AB testing is done, and decision to keep / remove has been made, the changes made in https://github.com/Financial-Times/x-dash/pull/579 need to be ditched or baked in as default. 
diff --git a/components/x-gift-article/src/GiftArticle.jsx b/components/x-gift-article/src/GiftArticle.jsx
index 39266c812..e99897101 100644
--- a/components/x-gift-article/src/GiftArticle.jsx
+++ b/components/x-gift-article/src/GiftArticle.jsx
@@ -22,10 +22,7 @@ const withGiftFormActions = withActions(
 			protocol: initialProps.apiProtocol,
 			domain: initialProps.apiDomain
 		})
-		const enterpriseApi = new EnterpriseApiClient({
-			protocol: initialProps.apiProtocol,
-			domain: initialProps.enterpriseApiDomain
-		})
+		const enterpriseApi = new EnterpriseApiClient(initialProps.enterpriseApiBaseUrl)
 
 		return {
 			showGiftUrlSection() {
diff --git a/components/x-gift-article/src/lib/enterpriseApi.js b/components/x-gift-article/src/lib/enterpriseApi.js
index f6f7a29ed..368b09ca0 100644
--- a/components/x-gift-article/src/lib/enterpriseApi.js
+++ b/components/x-gift-article/src/lib/enterpriseApi.js
@@ -1,22 +1,28 @@
 export default class EnterpriseApiClient {
-	constructor({ protocol, domain } = {}) {
-		this.protocol = protocol
-		this.domain = domain
+	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) {
-		let base = ''
-		if (this.domain) {
-			base = `//${this.domain}`
-
-			if (this.protocol) {
-				base = `${this.protocol}:${base}`
-			}
+		if (!this.baseUrl) {
+			throw new Error('Enterprise Sharing API base url missing')
 		}
 
-		return `${base}${path}`
+		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<object>} A promise that resolves to the requested URL response parsed from json
+	 */
 	fetchJson(path, additionalOptions) {
 		const url = this.getFetchUrl(path)
 		const options = Object.assign(
@@ -29,6 +35,20 @@ export default class EnterpriseApiClient {
 		return fetch(url, options).then((response) => response.json())
 	}
 
+	/**
+	 * @typedef EnterpriseSharingAllowance
+	 * @type {object}
+	 * @property {number | null} 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('/allowance')
@@ -45,6 +65,11 @@ export default class EnterpriseApiClient {
 		}
 	}
 
+	/**
+	 * 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('/', { method: 'POST', body: JSON.stringify({ contentId }) })
 
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
index 2614b919a..faa0db685 100644
--- a/components/x-gift-article/storybook/with-enterprise-first-time-user.js
+++ b/components/x-gift-article/storybook/with-enterprise-first-time-user.js
@@ -12,7 +12,8 @@ exports.args = {
 		title: 'Title Title Title Title'
 	},
 	showMobileShareLinks: true,
-	id: 'base-gift-article-static-id'
+	id: 'base-gift-article-static-id',
+	enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`
 }
 
 // This reference is only required for hot module loading in development
@@ -38,7 +39,7 @@ exports.fetchMock = (fetchMock) => {
 			redemptionUrl: articleUrlRedeemed,
 			remainingAllowance: 1
 		})
-		.get(`/allowance`, {
+		.get(`https://enterprise-sharing-api.ft.com/allowance`, {
 			limit: 120,
 			hasCredits: true,
 			firstTimeUser: true,
diff --git a/components/x-gift-article/storybook/with-enterprise-no-credits.js b/components/x-gift-article/storybook/with-enterprise-no-credits.js
index 1f327d74e..b329444ce 100644
--- a/components/x-gift-article/storybook/with-enterprise-no-credits.js
+++ b/components/x-gift-article/storybook/with-enterprise-no-credits.js
@@ -12,7 +12,8 @@ exports.args = {
 		title: 'Title Title Title Title'
 	},
 	showMobileShareLinks: true,
-	id: 'base-gift-article-static-id'
+	id: 'base-gift-article-static-id',
+	enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`
 }
 
 // This reference is only required for hot module loading in development
@@ -38,7 +39,7 @@ exports.fetchMock = (fetchMock) => {
 			redemptionUrl: articleUrlRedeemed,
 			remainingAllowance: 1
 		})
-		.get(`/allowance`, {
+		.get(`https://enterprise-sharing-api.ft.com/allowance`, {
 			limit: 120,
 			hasCredits: false,
 			firstTimeUser: false,
diff --git a/components/x-gift-article/storybook/with-enterprise-request-access.js b/components/x-gift-article/storybook/with-enterprise-request-access.js
index ef5889f1d..c1291a699 100644
--- a/components/x-gift-article/storybook/with-enterprise-request-access.js
+++ b/components/x-gift-article/storybook/with-enterprise-request-access.js
@@ -12,7 +12,8 @@ exports.args = {
 		title: 'Title Title Title Title'
 	},
 	showMobileShareLinks: true,
-	id: 'base-gift-article-static-id'
+	id: 'base-gift-article-static-id',
+	enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`
 }
 
 // This reference is only required for hot module loading in development
@@ -38,7 +39,7 @@ exports.fetchMock = (fetchMock) => {
 			redemptionUrl: articleUrlRedeemed,
 			remainingAllowance: 1
 		})
-		.get(`/allowance`, {
+		.get(`https://enterprise-sharing-api.ft.com/allowance`, {
 			limit: null,
 			hasCredits: false,
 			firstTimeUser: false,
diff --git a/components/x-gift-article/storybook/with-enterprise-sharing-link.js b/components/x-gift-article/storybook/with-enterprise-sharing-link.js
index 88d97bc9a..afc8bd58f 100644
--- a/components/x-gift-article/storybook/with-enterprise-sharing-link.js
+++ b/components/x-gift-article/storybook/with-enterprise-sharing-link.js
@@ -14,6 +14,7 @@ exports.args = {
 	},
 	showMobileShareLinks: true,
 	id: 'base-gift-article-static-id',
+	enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`,
 	shareType: 'enterprise'
 }
 
@@ -40,7 +41,7 @@ exports.fetchMock = (fetchMock) => {
 			redemptionUrl: articleUrlRedeemed,
 			remainingAllowance: 1
 		})
-		.get(`/allowance`, {
+		.get(`https://enterprise-sharing-api.ft.com/allowance`, {
 			limit: 120,
 			hasCredits: true,
 			firstTimeUser: false,
diff --git a/components/x-gift-article/storybook/with-enterprise.js b/components/x-gift-article/storybook/with-enterprise.js
index 48fe08aac..44e3951b6 100644
--- a/components/x-gift-article/storybook/with-enterprise.js
+++ b/components/x-gift-article/storybook/with-enterprise.js
@@ -12,7 +12,8 @@ exports.args = {
 		title: 'Title Title Title Title'
 	},
 	showMobileShareLinks: true,
-	id: 'base-gift-article-static-id'
+	id: 'base-gift-article-static-id',
+	enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`
 }
 
 // This reference is only required for hot module loading in development
@@ -38,13 +39,13 @@ exports.fetchMock = (fetchMock) => {
 			redemptionUrl: articleUrlRedeemed,
 			remainingAllowance: 1
 		})
-		.get(`/allowance`, {
+		.get(`https://enterprise-sharing-api.ft.com/allowance`, {
 			limit: 120,
 			hasCredits: true,
 			firstTimeUser: false,
 			enabled: true
 		})
-		.post(`/`, {
+		.post(`https://enterprise-sharing-api.ft.com/`, {
 			url: articleUrlRedeemed
 		})
 }

From 94f28988d2db09008bfd224279790863c82f09e0 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Fri, 17 Dec 2021 11:13:35 +0000
Subject: [PATCH 21/32] fix linting issues

---
 components/x-gift-article/src/Buttons.jsx    | 9 +++------
 components/x-gift-article/src/Message.jsx    | 6 ++----
 components/x-gift-article/src/UrlSection.jsx | 3 +--
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/components/x-gift-article/src/Buttons.jsx b/components/x-gift-article/src/Buttons.jsx
index c489e8727..77e1c7671 100644
--- a/components/x-gift-article/src/Buttons.jsx
+++ b/components/x-gift-article/src/Buttons.jsx
@@ -35,8 +35,7 @@ export default ({
 						className={ButtonWithGapClassNames}
 						type="button"
 						onClick={shareType === ShareType.gift ? actions.copyGiftUrl : actions.copyNonGiftUrl}
-						aria-label="Copy the gift article link to your clipboard"
-					>
+						aria-label="Copy the gift article link to your clipboard">
 						Copy link
 					</button>
 				)}
@@ -45,8 +44,7 @@ export default ({
 					href={mailtoUrl}
 					target="_blank"
 					rel="noopener noreferrer"
-					onClick={shareType === ShareType.gift ? actions.emailGiftUrl : actions.emailNonGiftUrl}
-				>
+					onClick={shareType === ShareType.gift ? actions.emailGiftUrl : actions.emailNonGiftUrl}>
 					Email link <span className={styles['visually-hidden']}>to Share this article</span>
 				</a>
 			</div>
@@ -59,8 +57,7 @@ export default ({
 				className={ButtonClassNames}
 				disabled={!giftCredits}
 				type="button"
-				onClick={shareType === ShareType.enterprise ? actions.createEnterpriseUrl : actions.createGiftUrl}
-			>
+				onClick={shareType === ShareType.enterprise ? actions.createEnterpriseUrl : actions.createGiftUrl}>
 				Create {shareType === ShareType.enterprise ? 'enterprise' : 'gift'} link
 			</button>
 		</div>
diff --git a/components/x-gift-article/src/Message.jsx b/components/x-gift-article/src/Message.jsx
index 53047ae4c..6a6afd23a 100644
--- a/components/x-gift-article/src/Message.jsx
+++ b/components/x-gift-article/src/Message.jsx
@@ -132,8 +132,7 @@ export default ({
 							href="https://enterprise.ft.com/ft-enterprise-sharing-request-access/?segmentId=c87259e0-7073-3ea8-7f83-b988f05c3f94"
 							target="_blank"
 							rel="noreferrer"
-							className={styles['buttonBaseStyle']}
-						>
+							className={styles['buttonBaseStyle']}>
 							Request Access
 						</a>
 					</div>
@@ -151,8 +150,7 @@ export default ({
 						target="_blank"
 						rel="noreferrer"
 						className={styles['buttonBaseStyle']}
-						type="button"
-					>
+						type="button">
 						Request more credits
 					</a>
 				</div>
diff --git a/components/x-gift-article/src/UrlSection.jsx b/components/x-gift-article/src/UrlSection.jsx
index 2fd7fa534..b86b3d9b1 100644
--- a/components/x-gift-article/src/UrlSection.jsx
+++ b/components/x-gift-article/src/UrlSection.jsx
@@ -37,8 +37,7 @@ export default ({
 		<div
 			className={urlSectionClassNames}
 			data-section-id={shareType + 'Link'}
-			data-trackable={shareType + 'Link'}
-		>
+			data-trackable={shareType + 'Link'}>
 			{showUrlShareElements && (
 				<Url
 					{...{

From 5562d9ba50ca22e4b1b64f07c286c67554d79b4e Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Tue, 21 Dec 2021 11:58:01 +0000
Subject: [PATCH 22/32] update enterprise-sharing endpoints

---
 components/x-gift-article/src/lib/enterpriseApi.js            | 4 ++--
 .../x-gift-article/storybook/with-enterprise-no-credits.js    | 2 +-
 .../storybook/with-enterprise-request-access.js               | 2 +-
 .../x-gift-article/storybook/with-enterprise-sharing-link.js  | 2 +-
 components/x-gift-article/storybook/with-enterprise.js        | 4 ++--
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/x-gift-article/src/lib/enterpriseApi.js b/components/x-gift-article/src/lib/enterpriseApi.js
index 368b09ca0..0d0c15473 100644
--- a/components/x-gift-article/src/lib/enterpriseApi.js
+++ b/components/x-gift-article/src/lib/enterpriseApi.js
@@ -51,7 +51,7 @@ export default class EnterpriseApiClient {
 	 */
 	async getEnterpriseArticleAllowance() {
 		try {
-			const json = await this.fetchJson('/allowance')
+			const json = await this.fetchJson('/v1/allowance')
 
 			return {
 				limit: json.limit,
@@ -71,7 +71,7 @@ export default class EnterpriseApiClient {
 	 * @returns {string} enterprise sharing redeem link URL
 	 */
 	async getESUrl(contentId) {
-		const json = await this.fetchJson('/', { method: 'POST', body: JSON.stringify({ contentId }) })
+		const json = await this.fetchJson('/v1/shares', { method: 'POST', body: JSON.stringify({ contentId }) })
 
 		return {
 			redemptionUrl: json.url
diff --git a/components/x-gift-article/storybook/with-enterprise-no-credits.js b/components/x-gift-article/storybook/with-enterprise-no-credits.js
index b329444ce..88083a111 100644
--- a/components/x-gift-article/storybook/with-enterprise-no-credits.js
+++ b/components/x-gift-article/storybook/with-enterprise-no-credits.js
@@ -39,7 +39,7 @@ exports.fetchMock = (fetchMock) => {
 			redemptionUrl: articleUrlRedeemed,
 			remainingAllowance: 1
 		})
-		.get(`https://enterprise-sharing-api.ft.com/allowance`, {
+		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, {
 			limit: 120,
 			hasCredits: false,
 			firstTimeUser: false,
diff --git a/components/x-gift-article/storybook/with-enterprise-request-access.js b/components/x-gift-article/storybook/with-enterprise-request-access.js
index c1291a699..4658319a0 100644
--- a/components/x-gift-article/storybook/with-enterprise-request-access.js
+++ b/components/x-gift-article/storybook/with-enterprise-request-access.js
@@ -39,7 +39,7 @@ exports.fetchMock = (fetchMock) => {
 			redemptionUrl: articleUrlRedeemed,
 			remainingAllowance: 1
 		})
-		.get(`https://enterprise-sharing-api.ft.com/allowance`, {
+		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, {
 			limit: null,
 			hasCredits: false,
 			firstTimeUser: false,
diff --git a/components/x-gift-article/storybook/with-enterprise-sharing-link.js b/components/x-gift-article/storybook/with-enterprise-sharing-link.js
index afc8bd58f..dd3b086d4 100644
--- a/components/x-gift-article/storybook/with-enterprise-sharing-link.js
+++ b/components/x-gift-article/storybook/with-enterprise-sharing-link.js
@@ -41,7 +41,7 @@ exports.fetchMock = (fetchMock) => {
 			redemptionUrl: articleUrlRedeemed,
 			remainingAllowance: 1
 		})
-		.get(`https://enterprise-sharing-api.ft.com/allowance`, {
+		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, {
 			limit: 120,
 			hasCredits: true,
 			firstTimeUser: false,
diff --git a/components/x-gift-article/storybook/with-enterprise.js b/components/x-gift-article/storybook/with-enterprise.js
index 44e3951b6..0a9dce1f9 100644
--- a/components/x-gift-article/storybook/with-enterprise.js
+++ b/components/x-gift-article/storybook/with-enterprise.js
@@ -39,13 +39,13 @@ exports.fetchMock = (fetchMock) => {
 			redemptionUrl: articleUrlRedeemed,
 			remainingAllowance: 1
 		})
-		.get(`https://enterprise-sharing-api.ft.com/allowance`, {
+		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, {
 			limit: 120,
 			hasCredits: true,
 			firstTimeUser: false,
 			enabled: true
 		})
-		.post(`https://enterprise-sharing-api.ft.com/`, {
+		.post(`https://enterprise-sharing-api.ft.com/v1/shares`, {
 			url: articleUrlRedeemed
 		})
 }

From 3e1f9d60c7a2de4a19881ba633d1157c4c6c6b21 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Tue, 21 Dec 2021 12:14:31 +0000
Subject: [PATCH 23/32] fix enterprise sharing url in storybook mock

---
 .../x-gift-article/storybook/with-enterprise-first-time-user.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index faa0db685..0fccd84db 100644
--- a/components/x-gift-article/storybook/with-enterprise-first-time-user.js
+++ b/components/x-gift-article/storybook/with-enterprise-first-time-user.js
@@ -39,7 +39,7 @@ exports.fetchMock = (fetchMock) => {
 			redemptionUrl: articleUrlRedeemed,
 			remainingAllowance: 1
 		})
-		.get(`https://enterprise-sharing-api.ft.com/allowance`, {
+		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, {
 			limit: 120,
 			hasCredits: true,
 			firstTimeUser: true,

From 9355369e135b555facdf9c34d7fd8a203f6af69b Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Tue, 21 Dec 2021 16:44:36 +0000
Subject: [PATCH 24/32] retrieve redemption limit value from enterprise sharing
 api response

---
 components/x-gift-article/src/GiftArticle.jsx          | 4 ++--
 components/x-gift-article/src/lib/enterpriseApi.js     | 3 ++-
 components/x-gift-article/storybook/with-enterprise.js | 3 ++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/x-gift-article/src/GiftArticle.jsx b/components/x-gift-article/src/GiftArticle.jsx
index e99897101..5169b0e36 100644
--- a/components/x-gift-article/src/GiftArticle.jsx
+++ b/components/x-gift-article/src/GiftArticle.jsx
@@ -63,11 +63,11 @@ const withGiftFormActions = withActions(
 			},
 
 			async createEnterpriseUrl() {
-				const { redemptionUrl } = await enterpriseApi.getESUrl(initialProps.article.id)
+				const { redemptionUrl, redemptionLimit } = await enterpriseApi.getESUrl(initialProps.article.id)
 
 				if (redemptionUrl) {
 					tracking.createESLink(redemptionUrl)
-					return updaters.setGiftUrl(redemptionUrl, 0, false)
+					return updaters.setGiftUrl(redemptionUrl, redemptionLimit, false)
 				} else {
 					// TODO do something
 				}
diff --git a/components/x-gift-article/src/lib/enterpriseApi.js b/components/x-gift-article/src/lib/enterpriseApi.js
index 0d0c15473..68c2eb012 100644
--- a/components/x-gift-article/src/lib/enterpriseApi.js
+++ b/components/x-gift-article/src/lib/enterpriseApi.js
@@ -74,7 +74,8 @@ export default class EnterpriseApiClient {
 		const json = await this.fetchJson('/v1/shares', { method: 'POST', body: JSON.stringify({ contentId }) })
 
 		return {
-			redemptionUrl: json.url
+			redemptionUrl: json.url,
+			redemptionLimit: json.redeemLimit
 		}
 	}
 }
diff --git a/components/x-gift-article/storybook/with-enterprise.js b/components/x-gift-article/storybook/with-enterprise.js
index 0a9dce1f9..0edfe91e5 100644
--- a/components/x-gift-article/storybook/with-enterprise.js
+++ b/components/x-gift-article/storybook/with-enterprise.js
@@ -46,6 +46,7 @@ exports.fetchMock = (fetchMock) => {
 			enabled: true
 		})
 		.post(`https://enterprise-sharing-api.ft.com/v1/shares`, {
-			url: articleUrlRedeemed
+			url: articleUrlRedeemed,
+			redeemLimit: 120
 		})
 }

From 721758b0c863dceb3af74d51a1cf56a3c45e9079 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Wed, 22 Dec 2021 14:45:22 +0000
Subject: [PATCH 25/32] split logic for gift and enterprise urls

---
 components/x-gift-article/src/Buttons.jsx     | 16 +++++++-
 components/x-gift-article/src/GiftArticle.jsx | 19 ++++++++-
 components/x-gift-article/src/lib/updaters.js | 41 +++++++++++--------
 .../storybook/with-enterprise.js              |  1 +
 4 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/components/x-gift-article/src/Buttons.jsx b/components/x-gift-article/src/Buttons.jsx
index 77e1c7671..9a95956ed 100644
--- a/components/x-gift-article/src/Buttons.jsx
+++ b/components/x-gift-article/src/Buttons.jsx
@@ -34,7 +34,13 @@ export default ({
 					<button
 						className={ButtonWithGapClassNames}
 						type="button"
-						onClick={shareType === ShareType.gift ? actions.copyGiftUrl : actions.copyNonGiftUrl}
+						onClick={
+							shareType === ShareType.gift
+								? actions.copyGiftUrl
+								: shareType === ShareType.enterprise
+								? actions.copyEnterpriseUrl
+								: actions.copyNonGiftUrl
+						}
 						aria-label="Copy the gift article link to your clipboard">
 						Copy link
 					</button>
@@ -44,7 +50,13 @@ export default ({
 					href={mailtoUrl}
 					target="_blank"
 					rel="noopener noreferrer"
-					onClick={shareType === ShareType.gift ? actions.emailGiftUrl : actions.emailNonGiftUrl}>
+					onClick={
+						shareType === ShareType.gift
+							? actions.emailGiftUrl
+							: shareType === ShareType.enterprise
+							? actions.emailEnterpriseUrl
+							: actions.emailNonGiftUrl
+					}>
 					Email link <span className={styles['visually-hidden']}>to Share this article</span>
 				</a>
 			</div>
diff --git a/components/x-gift-article/src/GiftArticle.jsx b/components/x-gift-article/src/GiftArticle.jsx
index 5169b0e36..512ecce57 100644
--- a/components/x-gift-article/src/GiftArticle.jsx
+++ b/components/x-gift-article/src/GiftArticle.jsx
@@ -67,7 +67,7 @@ const withGiftFormActions = withActions(
 
 				if (redemptionUrl) {
 					tracking.createESLink(redemptionUrl)
-					return updaters.setGiftUrl(redemptionUrl, redemptionLimit, false)
+					return updaters.setGiftUrl(redemptionUrl, redemptionLimit, false, true)
 				} else {
 					// TODO do something
 				}
@@ -84,6 +84,17 @@ const withGiftFormActions = withActions(
 				}
 			},
 
+			copyEnterpriseUrl(event) {
+				copyToClipboard(event)
+
+				return (state) => {
+					const enterpriseUrl = state.urls.enterprise
+					tracking.copyLink('enterpriseLink', enterpriseUrl)
+
+					return { showCopyConfirmation: true }
+				}
+			},
+
 			copyNonGiftUrl(event) {
 				copyToClipboard(event)
 
@@ -101,6 +112,12 @@ const withGiftFormActions = withActions(
 				}
 			},
 
+			emailEnterpriseUrl() {
+				return (state) => {
+					tracking.emailLink('enterpriseLink', state.urls.enterprise)
+				}
+			},
+
 			emailNonGiftUrl() {
 				return (state) => {
 					tracking.emailLink('nonGiftLink', state.urls.nonGift)
diff --git a/components/x-gift-article/src/lib/updaters.js b/components/x-gift-article/src/lib/updaters.js
index 061fd2fc5..91dbc0dca 100644
--- a/components/x-gift-article/src/lib/updaters.js
+++ b/components/x-gift-article/src/lib/updaters.js
@@ -21,6 +21,7 @@ export const showGiftUrlSection = (props) => ({
 	url: props.urls.gift || props.urls.dummy,
 	urlType: props.urls.gift ? UrlType.gift : UrlType.dummy,
 	mailtoUrl: props.mailtoUrls.gift,
+	isGiftUrlCreated: !!props.urls.gift,
 	showCopyConfirmation: false
 })
 
@@ -29,6 +30,7 @@ export const showGiftEnterpriseSection = (props) => ({
 	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
 })
 
@@ -37,29 +39,32 @@ export const showNonGiftUrlSection = (props) => ({
 	url: props.urls.nonGift,
 	urlType: UrlType.nonGift,
 	mailtoUrl: props.mailtoUrls.nonGift,
+	isGiftUrlCreated: false,
 	showCopyConfirmation: 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
+			})
+		}
 	}
-}
 
 export const setAllowance = (giftCredits, monthlyAllowance, nextRenewalDate) => {
 	const date = new Date(nextRenewalDate)
@@ -82,11 +87,11 @@ 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
 		})
 	}
 }
diff --git a/components/x-gift-article/storybook/with-enterprise.js b/components/x-gift-article/storybook/with-enterprise.js
index 0edfe91e5..f30ca23de 100644
--- a/components/x-gift-article/storybook/with-enterprise.js
+++ b/components/x-gift-article/storybook/with-enterprise.js
@@ -37,6 +37,7 @@ exports.fetchMock = (fetchMock) => {
 		})
 		.get(`/article/gift-link/${encodeURIComponent(articleId)}`, {
 			redemptionUrl: articleUrlRedeemed,
+			redemptionLimit: 3,
 			remainingAllowance: 1
 		})
 		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, {

From e30fcfa172925cf6b9caba35243253bfc1be9e86 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Fri, 7 Jan 2022 16:16:45 +0000
Subject: [PATCH 26/32] update enterprise sharing gift article to handle errors
 based on api response code

---
 .../x-gift-article/src/lib/enterpriseApi.js   | 23 +++++++++++++++----
 .../with-enterprise-first-time-user.js        |  3 +--
 .../storybook/with-enterprise-no-credits.js   |  3 +--
 .../with-enterprise-request-access.js         |  7 +-----
 .../storybook/with-enterprise-sharing-link.js |  3 +--
 .../storybook/with-enterprise.js              |  3 +--
 .../storybook/with-gift-credits.js            |  4 +++-
 7 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/components/x-gift-article/src/lib/enterpriseApi.js b/components/x-gift-article/src/lib/enterpriseApi.js
index 68c2eb012..5046afd55 100644
--- a/components/x-gift-article/src/lib/enterpriseApi.js
+++ b/components/x-gift-article/src/lib/enterpriseApi.js
@@ -23,7 +23,7 @@ export default class EnterpriseApiClient {
 	 * @param {RequestInit} additionalOptions fetch additional options
 	 * @returns {Promise<object>} A promise that resolves to the requested URL response parsed from json
 	 */
-	fetchJson(path, additionalOptions) {
+	async fetchJson(path, additionalOptions) {
 		const url = this.getFetchUrl(path)
 		const options = Object.assign(
 			{
@@ -32,13 +32,22 @@ export default class EnterpriseApiClient {
 			additionalOptions
 		)
 
-		return fetch(url, options).then((response) => response.json())
+		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 | null} limit - number of views per share for the user's licence, null if licence doesn't have a ES package
+	 * @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
@@ -57,11 +66,15 @@ export default class EnterpriseApiClient {
 				limit: json.limit,
 				hasCredits: json.hasCredits,
 				firstTimeUser: json.firstTimeUser,
-				enabled: json.enabled,
+				enabled: true,
 				requestAccess: json.enabled && json.limit === null
 			}
 		} catch (e) {
-			return { enabled: false, limit: null, hasCredits: false, firstTimeUser: false, requestAccess: false }
+			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 }
 		}
 	}
 
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
index 0fccd84db..2e8483766 100644
--- a/components/x-gift-article/storybook/with-enterprise-first-time-user.js
+++ b/components/x-gift-article/storybook/with-enterprise-first-time-user.js
@@ -42,7 +42,6 @@ exports.fetchMock = (fetchMock) => {
 		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, {
 			limit: 120,
 			hasCredits: true,
-			firstTimeUser: true,
-			enabled: true
+			firstTimeUser: true
 		})
 }
diff --git a/components/x-gift-article/storybook/with-enterprise-no-credits.js b/components/x-gift-article/storybook/with-enterprise-no-credits.js
index 88083a111..0b0c90a69 100644
--- a/components/x-gift-article/storybook/with-enterprise-no-credits.js
+++ b/components/x-gift-article/storybook/with-enterprise-no-credits.js
@@ -42,7 +42,6 @@ exports.fetchMock = (fetchMock) => {
 		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, {
 			limit: 120,
 			hasCredits: false,
-			firstTimeUser: false,
-			enabled: true
+			firstTimeUser: false
 		})
 }
diff --git a/components/x-gift-article/storybook/with-enterprise-request-access.js b/components/x-gift-article/storybook/with-enterprise-request-access.js
index 4658319a0..ff4f0140d 100644
--- a/components/x-gift-article/storybook/with-enterprise-request-access.js
+++ b/components/x-gift-article/storybook/with-enterprise-request-access.js
@@ -39,10 +39,5 @@ exports.fetchMock = (fetchMock) => {
 			redemptionUrl: articleUrlRedeemed,
 			remainingAllowance: 1
 		})
-		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, {
-			limit: null,
-			hasCredits: false,
-			firstTimeUser: false,
-			enabled: true
-		})
+		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, 403)
 }
diff --git a/components/x-gift-article/storybook/with-enterprise-sharing-link.js b/components/x-gift-article/storybook/with-enterprise-sharing-link.js
index dd3b086d4..2360c8fb2 100644
--- a/components/x-gift-article/storybook/with-enterprise-sharing-link.js
+++ b/components/x-gift-article/storybook/with-enterprise-sharing-link.js
@@ -44,7 +44,6 @@ exports.fetchMock = (fetchMock) => {
 		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, {
 			limit: 120,
 			hasCredits: true,
-			firstTimeUser: false,
-			enabled: true
+			firstTimeUser: false
 		})
 }
diff --git a/components/x-gift-article/storybook/with-enterprise.js b/components/x-gift-article/storybook/with-enterprise.js
index f30ca23de..afa3883e9 100644
--- a/components/x-gift-article/storybook/with-enterprise.js
+++ b/components/x-gift-article/storybook/with-enterprise.js
@@ -43,8 +43,7 @@ exports.fetchMock = (fetchMock) => {
 		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, {
 			limit: 120,
 			hasCredits: true,
-			firstTimeUser: false,
-			enabled: true
+			firstTimeUser: false
 		})
 		.post(`https://enterprise-sharing-api.ft.com/v1/shares`, {
 			url: articleUrlRedeemed,
diff --git a/components/x-gift-article/storybook/with-gift-credits.js b/components/x-gift-article/storybook/with-gift-credits.js
index 3f1ed3b65..aba7a6660 100644
--- a/components/x-gift-article/storybook/with-gift-credits.js
+++ b/components/x-gift-article/storybook/with-gift-credits.js
@@ -12,7 +12,8 @@ exports.args = {
 		title: 'Title Title Title Title'
 	},
 	showMobileShareLinks: true,
-	id: 'base-gift-article-static-id'
+	id: 'base-gift-article-static-id',
+	enterpriseApiBaseUrl: `https://enterprise-sharing-api.ft.com`
 }
 
 // This reference is only required for hot module loading in development
@@ -38,4 +39,5 @@ exports.fetchMock = (fetchMock) => {
 			redemptionUrl: articleUrlRedeemed,
 			remainingAllowance: 1
 		})
+		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, 404)
 }

From adb623faff09e59c52f3d8f3ebaedcf3b86ffd31 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Fri, 7 Jan 2022 16:20:50 +0000
Subject: [PATCH 27/32] update enterprise sharing allowance endpoint

---
 components/x-gift-article/src/lib/enterpriseApi.js              | 2 +-
 .../x-gift-article/storybook/with-enterprise-first-time-user.js | 2 +-
 .../x-gift-article/storybook/with-enterprise-no-credits.js      | 2 +-
 .../x-gift-article/storybook/with-enterprise-request-access.js  | 2 +-
 .../x-gift-article/storybook/with-enterprise-sharing-link.js    | 2 +-
 components/x-gift-article/storybook/with-enterprise.js          | 2 +-
 components/x-gift-article/storybook/with-gift-credits.js        | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/x-gift-article/src/lib/enterpriseApi.js b/components/x-gift-article/src/lib/enterpriseApi.js
index 5046afd55..79440d6a8 100644
--- a/components/x-gift-article/src/lib/enterpriseApi.js
+++ b/components/x-gift-article/src/lib/enterpriseApi.js
@@ -60,7 +60,7 @@ export default class EnterpriseApiClient {
 	 */
 	async getEnterpriseArticleAllowance() {
 		try {
-			const json = await this.fetchJson('/v1/allowance')
+			const json = await this.fetchJson('/v1/users/me/allowance')
 
 			return {
 				limit: json.limit,
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
index 2e8483766..5c5d5eff4 100644
--- a/components/x-gift-article/storybook/with-enterprise-first-time-user.js
+++ b/components/x-gift-article/storybook/with-enterprise-first-time-user.js
@@ -39,7 +39,7 @@ exports.fetchMock = (fetchMock) => {
 			redemptionUrl: articleUrlRedeemed,
 			remainingAllowance: 1
 		})
-		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, {
+		.get(`https://enterprise-sharing-api.ft.com/v1/users/me/allowance`, {
 			limit: 120,
 			hasCredits: true,
 			firstTimeUser: true
diff --git a/components/x-gift-article/storybook/with-enterprise-no-credits.js b/components/x-gift-article/storybook/with-enterprise-no-credits.js
index 0b0c90a69..aee6190c3 100644
--- a/components/x-gift-article/storybook/with-enterprise-no-credits.js
+++ b/components/x-gift-article/storybook/with-enterprise-no-credits.js
@@ -39,7 +39,7 @@ exports.fetchMock = (fetchMock) => {
 			redemptionUrl: articleUrlRedeemed,
 			remainingAllowance: 1
 		})
-		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, {
+		.get(`https://enterprise-sharing-api.ft.com/v1/users/me/allowance`, {
 			limit: 120,
 			hasCredits: false,
 			firstTimeUser: false
diff --git a/components/x-gift-article/storybook/with-enterprise-request-access.js b/components/x-gift-article/storybook/with-enterprise-request-access.js
index ff4f0140d..3c7deb3f8 100644
--- a/components/x-gift-article/storybook/with-enterprise-request-access.js
+++ b/components/x-gift-article/storybook/with-enterprise-request-access.js
@@ -39,5 +39,5 @@ exports.fetchMock = (fetchMock) => {
 			redemptionUrl: articleUrlRedeemed,
 			remainingAllowance: 1
 		})
-		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, 403)
+		.get(`https://enterprise-sharing-api.ft.com/v1/users/me/allowance`, 403)
 }
diff --git a/components/x-gift-article/storybook/with-enterprise-sharing-link.js b/components/x-gift-article/storybook/with-enterprise-sharing-link.js
index 2360c8fb2..1c5caa4fe 100644
--- a/components/x-gift-article/storybook/with-enterprise-sharing-link.js
+++ b/components/x-gift-article/storybook/with-enterprise-sharing-link.js
@@ -41,7 +41,7 @@ exports.fetchMock = (fetchMock) => {
 			redemptionUrl: articleUrlRedeemed,
 			remainingAllowance: 1
 		})
-		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, {
+		.get(`https://enterprise-sharing-api.ft.com/v1/users/me/allowance`, {
 			limit: 120,
 			hasCredits: true,
 			firstTimeUser: false
diff --git a/components/x-gift-article/storybook/with-enterprise.js b/components/x-gift-article/storybook/with-enterprise.js
index afa3883e9..6a1779953 100644
--- a/components/x-gift-article/storybook/with-enterprise.js
+++ b/components/x-gift-article/storybook/with-enterprise.js
@@ -40,7 +40,7 @@ exports.fetchMock = (fetchMock) => {
 			redemptionLimit: 3,
 			remainingAllowance: 1
 		})
-		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, {
+		.get(`https://enterprise-sharing-api.ft.com/v1/users/me/allowance`, {
 			limit: 120,
 			hasCredits: true,
 			firstTimeUser: false
diff --git a/components/x-gift-article/storybook/with-gift-credits.js b/components/x-gift-article/storybook/with-gift-credits.js
index aba7a6660..c611eb591 100644
--- a/components/x-gift-article/storybook/with-gift-credits.js
+++ b/components/x-gift-article/storybook/with-gift-credits.js
@@ -39,5 +39,5 @@ exports.fetchMock = (fetchMock) => {
 			redemptionUrl: articleUrlRedeemed,
 			remainingAllowance: 1
 		})
-		.get(`https://enterprise-sharing-api.ft.com/v1/allowance`, 404)
+		.get(`https://enterprise-sharing-api.ft.com/v1/users/me/allowance`, 404)
 }

From adddad4fadc4b92a01c43b69dc1e1700225136e0 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Fri, 7 Jan 2022 16:21:56 +0000
Subject: [PATCH 28/32] remove condition that will always be false

---
 components/x-gift-article/src/lib/enterpriseApi.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/x-gift-article/src/lib/enterpriseApi.js b/components/x-gift-article/src/lib/enterpriseApi.js
index 79440d6a8..a6fca28ba 100644
--- a/components/x-gift-article/src/lib/enterpriseApi.js
+++ b/components/x-gift-article/src/lib/enterpriseApi.js
@@ -67,7 +67,7 @@ export default class EnterpriseApiClient {
 				hasCredits: json.hasCredits,
 				firstTimeUser: json.firstTimeUser,
 				enabled: true,
-				requestAccess: json.enabled && json.limit === null
+				requestAccess: false
 			}
 		} catch (e) {
 			if (e?.message === 'ShowRequestAccess') {

From 129a13aa9e7bcf548eaeab0d148ff595fa7e4f13 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Thu, 20 Jan 2022 11:58:09 +0000
Subject: [PATCH 29/32] update gift article with latest design guidelines

---
 components/x-gift-article/src/Form.jsx        |  1 +
 .../x-gift-article/src/GiftArticle.scss       | 18 ++++++++---
 components/x-gift-article/src/Message.jsx     | 12 +++----
 .../src/RadioButtonsSection.jsx               | 32 ++++---------------
 4 files changed, 26 insertions(+), 37 deletions(-)

diff --git a/components/x-gift-article/src/Form.jsx b/components/x-gift-article/src/Form.jsx
index 048e7e777..6db0cf712 100644
--- a/components/x-gift-article/src/Form.jsx
+++ b/components/x-gift-article/src/Form.jsx
@@ -21,6 +21,7 @@ export default (props) => (
 						showNonGiftUrlSection={props.actions.showNonGiftUrlSection}
 						enterpriseLimit={props.enterpriseLimit}
 						enterpriseHasCredits={props.enterpriseHasCredits}
+						enterpriseAlert={!props.enterpriseHasCredits && !props.enterpriseRequestAccess}
 						enterpriseEnabled={props.enterpriseEnabled}
 					/>
 				)}
diff --git a/components/x-gift-article/src/GiftArticle.scss b/components/x-gift-article/src/GiftArticle.scss
index a1fd74263..8fb77bb0f 100644
--- a/components/x-gift-article/src/GiftArticle.scss
+++ b/components/x-gift-article/src/GiftArticle.scss
@@ -35,11 +35,13 @@ $o-icons-is-silent: true;
 
 .o-icons__enterprise-no-credits {
 	@include oIconsContent(
-		$icon-name: 'info',
-		$color: oColorsByName('claret'),
-		$size: 32
+		$icon-name: 'warning',
+		$color: oColorsByName('crimson'),
+		$size: 16
 	);
-	margin: -11px -11px -11px 0px;
+	border-radius: 50%;
+	border: 2px solid oColorsByName('crimson');
+	margin-bottom: -5px;
 }
 
 
@@ -60,6 +62,12 @@ $o-icons-is-silent: true;
         'content-premium'
     ),
 		));
+
+		.enterprise-label {
+			background-color: oColorsByName('black-10');
+			color: oColorsByName('black');
+			margin: 0px 6px;
+		}
 	}
 
 	.share-option-title {
@@ -139,7 +147,7 @@ $o-icons-is-silent: true;
 
 .buttons {
 	grid-area: buttons;
-	text-align: right;
+	text-align: left;
 	white-space: nowrap;
 	margin-top: 12px;
 }
diff --git a/components/x-gift-article/src/Message.jsx b/components/x-gift-article/src/Message.jsx
index 6a6afd23a..0423b9f75 100644
--- a/components/x-gift-article/src/Message.jsx
+++ b/components/x-gift-article/src/Message.jsx
@@ -107,8 +107,8 @@ export default ({
 					<div className={styles['enterprise-message']}>
 						<h4>Engage more effectively with clients and colleagues.</h4>
 						<p>
-							Enterprise Sharing lets members of your organisation share FT article links with up to 100
-							people, even if they don’t have a FT subscription.
+							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.
 						</p>
 					</div>
 				)
@@ -123,17 +123,17 @@ export default ({
 				//Activation Message
 				return (
 					<div className={styles['enterprise-message']}>
-						<h4>Engage more effectively with clients and colleagues.</h4>
+						<h4>Enterprise Sharing is not enabled for your team</h4>
 						<p>
-							Enterprise Sharing lets members of your organisation share FT article links with up to 100
-							people, even if they don't have a FT subscription.
+							Enterprise Sharing lets members of your organisation share FT article links with potentially
+							thousands people, even if they don’t have a FT subscription
 						</p>
 						<a
 							href="https://enterprise.ft.com/ft-enterprise-sharing-request-access/?segmentId=c87259e0-7073-3ea8-7f83-b988f05c3f94"
 							target="_blank"
 							rel="noreferrer"
 							className={styles['buttonBaseStyle']}>
-							Request Access
+							Learn more
 						</a>
 					</div>
 				)
diff --git a/components/x-gift-article/src/RadioButtonsSection.jsx b/components/x-gift-article/src/RadioButtonsSection.jsx
index d27085f33..1925bbc32 100644
--- a/components/x-gift-article/src/RadioButtonsSection.jsx
+++ b/components/x-gift-article/src/RadioButtonsSection.jsx
@@ -13,11 +13,9 @@ export default ({
 	shareType,
 	showGiftUrlSection,
 	showEnterpriseUrlSection,
-	isArticleSharingUxUpdates,
 	showNonGiftUrlSection,
 	enterpriseEnabled = false,
-	enterpriseHasCredits = true,
-	enterpriseLimit = 100 //if limit is not set enterprise will show 100 for default (value used for activation)
+	enterpriseAlert = false
 }) => (
 	<div className={radioSectionClassNames} role="group" aria-labelledby="article-share-options">
 		<span className={styles['share-option-title']} id="article-share-options">
@@ -32,15 +30,7 @@ export default ({
 				checked={shareType === ShareType.gift}
 				onChange={showGiftUrlSection}
 			/>
-			{isArticleSharingUxUpdates ? (
-				<span className={styles['o-forms-input__label']}>
-					Gift to <strong>anyone</strong>
-				</span>
-			) : (
-				<span className={styles['o-forms-input__label']}>
-					with up to <strong>3 people</strong>
-				</span>
-			)}
+			<span className={styles['o-forms-input__label']}>Single recipient</span>
 		</label>
 
 		{enterpriseEnabled === true && (
@@ -54,11 +44,9 @@ export default ({
 					onChange={showEnterpriseUrlSection}
 				/>
 				<span className={styles['o-forms-input__label']}>
-					with up to <strong>{enterpriseLimit} people</strong>{' '}
-					<span className={[styles['o-labels'], styles['o-labels--content-premium']].join(' ')}>
-						Enterprise
-					</span>
-					{!enterpriseHasCredits && <span className={styles['o-icons__enterprise-no-credits']}></span>}
+					Multiple recipients
+					<span className={[styles['o-labels'], styles['enterprise-label']].join(' ')}>Enterprise</span>
+					{enterpriseAlert && <span className={styles['o-icons__enterprise-no-credits']}></span>}
 				</span>
 			</label>
 		)}
@@ -72,15 +60,7 @@ export default ({
 				checked={shareType === ShareType.nonGift}
 				onChange={showNonGiftUrlSection}
 			/>
-			{isArticleSharingUxUpdates ? (
-				<span className={styles['o-forms-input__label']}>
-					Share with <strong>other FT subscribers</strong>
-				</span>
-			) : (
-				<span className={styles['o-forms-input__label']}>
-					with <strong>other FT subscribers</strong> only
-				</span>
-			)}
+			<span className={styles['o-forms-input__label']}>FT subscribers only</span>
 		</label>
 	</div>
 )

From 8591550dfda45e75a641d022412b3aaae9ba9741 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Thu, 20 Jan 2022 12:29:53 +0000
Subject: [PATCH 30/32] update gift article radio options text

---
 components/x-gift-article/src/Form.jsx        |  1 +
 components/x-gift-article/src/GiftArticle.jsx |  2 ++
 .../src/RadioButtonsSection.jsx               | 31 ++++++++++++-------
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/components/x-gift-article/src/Form.jsx b/components/x-gift-article/src/Form.jsx
index 6db0cf712..1d24d322c 100644
--- a/components/x-gift-article/src/Form.jsx
+++ b/components/x-gift-article/src/Form.jsx
@@ -21,6 +21,7 @@ export default (props) => (
 						showNonGiftUrlSection={props.actions.showNonGiftUrlSection}
 						enterpriseLimit={props.enterpriseLimit}
 						enterpriseHasCredits={props.enterpriseHasCredits}
+						enterpriseRequestAccess={props.enterpriseRequestAccess}
 						enterpriseAlert={!props.enterpriseHasCredits && !props.enterpriseRequestAccess}
 						enterpriseEnabled={props.enterpriseEnabled}
 					/>
diff --git a/components/x-gift-article/src/GiftArticle.jsx b/components/x-gift-article/src/GiftArticle.jsx
index 512ecce57..72a2444aa 100644
--- a/components/x-gift-article/src/GiftArticle.jsx
+++ b/components/x-gift-article/src/GiftArticle.jsx
@@ -9,6 +9,7 @@ import EnterpriseApiClient from './lib/enterpriseApi'
 import { copyToClipboard, createMailtoUrl } from './lib/share-link-actions'
 import tracking from './lib/tracking'
 import * as updaters from './lib/updaters'
+import { ShareType } from './lib/constants'
 
 const isCopySupported =
 	typeof document !== 'undefined' && document.queryCommandSupported && document.queryCommandSupported('copy')
@@ -148,6 +149,7 @@ const withGiftFormActions = withActions(
 						if (giftCredits > 0 || giftCredits === 0) {
 							return {
 								...updaters.setAllowance(giftCredits, monthlyAllowance, nextRenewalDate),
+								shareType: enabled ? ShareType.enterprise : ShareType.gift,
 								enterpriseEnabled: enabled,
 								enterpriseLimit: limit,
 								enterpriseHasCredits: hasCredits,
diff --git a/components/x-gift-article/src/RadioButtonsSection.jsx b/components/x-gift-article/src/RadioButtonsSection.jsx
index 1925bbc32..4c2041f53 100644
--- a/components/x-gift-article/src/RadioButtonsSection.jsx
+++ b/components/x-gift-article/src/RadioButtonsSection.jsx
@@ -15,23 +15,14 @@ export default ({
 	showEnterpriseUrlSection,
 	showNonGiftUrlSection,
 	enterpriseEnabled = false,
+	enterpriseLimit = 100,
+	enterpriseRequestAccess = false,
 	enterpriseAlert = false
 }) => (
 	<div className={radioSectionClassNames} role="group" aria-labelledby="article-share-options">
 		<span className={styles['share-option-title']} id="article-share-options">
 			Article share options
 		</span>
-		<label htmlFor="giftLink">
-			<input
-				type="radio"
-				name="gift-form__radio"
-				value="giftLink"
-				id="giftLink"
-				checked={shareType === ShareType.gift}
-				onChange={showGiftUrlSection}
-			/>
-			<span className={styles['o-forms-input__label']}>Single recipient</span>
-		</label>
 
 		{enterpriseEnabled === true && (
 			<label htmlFor="enterpriseLink">
@@ -44,13 +35,29 @@ export default ({
 					onChange={showEnterpriseUrlSection}
 				/>
 				<span className={styles['o-forms-input__label']}>
-					Multiple recipients
+					{enterpriseLimit && !enterpriseRequestAccess
+						? `Up to ${enterpriseLimit} recipients`
+						: `Multiple recipients`}
 					<span className={[styles['o-labels'], styles['enterprise-label']].join(' ')}>Enterprise</span>
 					{enterpriseAlert && <span className={styles['o-icons__enterprise-no-credits']}></span>}
 				</span>
 			</label>
 		)}
 
+		<label htmlFor="giftLink">
+			<input
+				type="radio"
+				name="gift-form__radio"
+				value="giftLink"
+				id="giftLink"
+				checked={shareType === ShareType.gift}
+				onChange={showGiftUrlSection}
+			/>
+			<span className={styles['o-forms-input__label']}>
+				{enterpriseEnabled ? `Single recipient` : `with anyone`}
+			</span>
+		</label>
+
 		<label htmlFor="nonGiftLink">
 			<input
 				type="radio"

From 7e47a0d5ed5dca0024cd737e86cd22b16e9170b0 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Fri, 21 Jan 2022 16:37:47 +0000
Subject: [PATCH 31/32] add error message if request to create gift url fails

---
 components/x-gift-article/src/GiftArticle.jsx |  4 ++--
 components/x-gift-article/src/Message.jsx     |  4 ++++
 components/x-gift-article/src/lib/updaters.js | 16 ++++++++++++----
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/components/x-gift-article/src/GiftArticle.jsx b/components/x-gift-article/src/GiftArticle.jsx
index 72a2444aa..08ded5b38 100644
--- a/components/x-gift-article/src/GiftArticle.jsx
+++ b/components/x-gift-article/src/GiftArticle.jsx
@@ -59,7 +59,7 @@ const withGiftFormActions = withActions(
 
 					return updaters.setGiftUrl(url, redemptionLimit, isShortened)
 				} else {
-					// TODO do something
+					return updaters.setErrorState(true)
 				}
 			},
 
@@ -70,7 +70,7 @@ const withGiftFormActions = withActions(
 					tracking.createESLink(redemptionUrl)
 					return updaters.setGiftUrl(redemptionUrl, redemptionLimit, false, true)
 				} else {
-					// TODO do something
+					return updaters.setErrorState(true)
 				}
 			},
 
diff --git a/components/x-gift-article/src/Message.jsx b/components/x-gift-article/src/Message.jsx
index 0423b9f75..e4ee1d5bb 100644
--- a/components/x-gift-article/src/Message.jsx
+++ b/components/x-gift-article/src/Message.jsx
@@ -94,6 +94,10 @@ export default ({
 	}
 
 	if (shareType === ShareType.enterprise) {
+		if (invalidResponseFromApi) {
+			return <div className={messageClassName}>Unable to create enterprise link. Please try again later</div>
+		}
+
 		if (isGiftUrlCreated === true) {
 			return (
 				<div className={messageClassName}>
diff --git a/components/x-gift-article/src/lib/updaters.js b/components/x-gift-article/src/lib/updaters.js
index 91dbc0dca..44a64e21b 100644
--- a/components/x-gift-article/src/lib/updaters.js
+++ b/components/x-gift-article/src/lib/updaters.js
@@ -22,7 +22,8 @@ export const showGiftUrlSection = (props) => ({
 	urlType: props.urls.gift ? UrlType.gift : UrlType.dummy,
 	mailtoUrl: props.mailtoUrls.gift,
 	isGiftUrlCreated: !!props.urls.gift,
-	showCopyConfirmation: false
+	showCopyConfirmation: false,
+	invalidResponseFromApi: false
 })
 
 export const showGiftEnterpriseSection = (props) => ({
@@ -31,7 +32,8 @@ export const showGiftEnterpriseSection = (props) => ({
 	urlType: props.urls.enterprise ? UrlType.gift : UrlType.dummy,
 	mailtoUrl: props.mailtoUrls.enterprise,
 	isGiftUrlCreated: !!props.urls.enterprise,
-	showCopyConfirmation: false
+	showCopyConfirmation: false,
+	invalidResponseFromApi: false
 })
 
 export const showNonGiftUrlSection = (props) => ({
@@ -40,7 +42,8 @@ export const showNonGiftUrlSection = (props) => ({
 	urlType: UrlType.nonGift,
 	mailtoUrl: props.mailtoUrls.nonGift,
 	isGiftUrlCreated: false,
-	showCopyConfirmation: false
+	showCopyConfirmation: false,
+	invalidResponseFromApi: false
 })
 
 export const setGiftUrl =
@@ -62,7 +65,8 @@ export const setGiftUrl =
 
 			mailtoUrls: Object.assign(props.mailtoUrls, {
 				[isEnterprise ? 'enterprise' : 'gift']: mailtoUrl
-			})
+			}),
+			invalidResponseFromApi: false
 		}
 	}
 
@@ -95,3 +99,7 @@ export const setShortenedNonGiftUrl = (shortenedUrl) => (props) => {
 		})
 	}
 }
+
+export const setErrorState = (errorState) => ({
+	invalidResponseFromApi: errorState
+})

From 8ababf31c319b57049be2e942254aa1dbc0b3089 Mon Sep 17 00:00:00 2001
From: Fabio Sikansi <fabio.sikansi@ft.com>
Date: Wed, 26 Jan 2022 17:15:26 +0000
Subject: [PATCH 32/32] fix tracking category when creating enterprise sharing
 links

---
 components/x-gift-article/src/lib/tracking.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/x-gift-article/src/lib/tracking.js b/components/x-gift-article/src/lib/tracking.js
index fb7b72ddf..7e72df219 100644
--- a/components/x-gift-article/src/lib/tracking.js
+++ b/components/x-gift-article/src/lib/tracking.js
@@ -19,7 +19,7 @@ module.exports = {
 
 	createESLink: (link) =>
 		dispatchEvent({
-			category: 'enterprise-sharing-link',
+			category: 'gift-link',
 			action: 'create',
 			linkType: 'enterpriseSharingLink',
 			link