Merge pull request #684 from Financial-Times/ENTST-139-enterprise-sha…

…ring-tweaks ENTST-139 Add Enterprise Sharing to FTR Articles
Financial-Times · Jan 6, 2023 · 155806d · 155806d
2 parents f86787e + b84aa20
commit 155806d
Show file tree

Hide file tree

Showing 11 changed files with 212 additions and 94 deletions.
diff --git a/components/x-gift-article/src/Buttons.jsx b/components/x-gift-article/src/Buttons.jsx
@@ -8,7 +8,8 @@ export default ({
 	showCopyButton,
 	nativeShare,
 	actions,
-	giftCredits
+	giftCredits,
+	isFreeArticle
 }) => {
 	if (isGiftUrlCreated || shareType === ShareType.nonGift) {
 		if (nativeShare) {
@@ -62,6 +63,16 @@ export default ({
 		)
 	}
 
+	if (isFreeArticle && ShareType.enterprise) {
+		return (
+			<div className="x-gift-article__buttons">
+				<button className="x-gift-article__button" type="button" onClick={actions.createEnterpriseUrl}>
+					Create Enterprise Link
+				</button>
+			</div>
+		)
+	}
+
 	return (
 		<div className="x-gift-article__buttons">
 			<button

diff --git a/components/x-gift-article/src/Form.jsx b/components/x-gift-article/src/Form.jsx
@@ -12,20 +12,19 @@ export default (props) => (
 			<div role="group" arialabelledby="gift-article-title">
 				<Title {...props} />
 
-				{!props.isFreeArticle && (
-					<RadioButtonsSection
-						shareType={props.shareType}
-						isArticleSharingUxUpdates={props.isArticleSharingUxUpdates}
-						showGiftUrlSection={props.actions.showGiftUrlSection}
-						showEnterpriseUrlSection={props.actions.showEnterpriseUrlSection}
-						showNonGiftUrlSection={props.actions.showNonGiftUrlSection}
-						enterpriseLimit={props.enterpriseLimit}
-						enterpriseHasCredits={props.enterpriseHasCredits}
-						enterpriseRequestAccess={props.enterpriseRequestAccess}
-						enterpriseAlert={!props.enterpriseHasCredits && !props.enterpriseRequestAccess}
-						enterpriseEnabled={props.enterpriseEnabled}
-					/>
-				)}
+				<RadioButtonsSection
+					shareType={props.shareType}
+					isArticleSharingUxUpdates={props.isArticleSharingUxUpdates}
+					showGiftUrlSection={props.actions.showGiftUrlSection}
+					showEnterpriseUrlSection={props.actions.showEnterpriseUrlSection}
+					showNonGiftUrlSection={props.actions.showNonGiftUrlSection}
+					enterpriseLimit={props.enterpriseLimit}
+					enterpriseHasCredits={props.enterpriseHasCredits}
+					enterpriseRequestAccess={props.enterpriseRequestAccess}
+					enterpriseAlert={!props.enterpriseHasCredits && !props.enterpriseRequestAccess}
+					enterpriseEnabled={props.enterpriseEnabled}
+					isFreeArticle={props.isFreeArticle}
+				/>
 
 				<UrlSection {...props} />
 			</div>

diff --git a/components/x-gift-article/src/GiftArticle.jsx b/components/x-gift-article/src/GiftArticle.jsx
@@ -150,46 +150,55 @@ const withGiftFormActions = withActions(
 
 			activate() {
 				return async (state) => {
+					const { enabled, limit, hasCredits, firstTimeUser, requestAccess } =
+						await enterpriseApi.getEnterpriseArticleAllowance()
+
+					const enterpriseState = {
+						enterpriseLimit: limit,
+						enterpriseHasCredits: hasCredits,
+						enterpriseFirstTimeUser: firstTimeUser,
+						enterpriseRequestAccess: requestAccess
+					}
+
+					if (enabled) {
+						tracking.initEnterpriseSharing(
+							requestAccess
+								? 'enterprise-request-access'
+								: !hasCredits
+								? 'enterprise-no-credits'
+								: 'enterprise-enabled'
+						)
+					} else {
+						tracking.initEnterpriseSharing('enterprise-disabled')
+					}
+
 					if (initialProps.isFreeArticle) {
 						const { url, isShortened } = await api.getShorterUrl(state.urls.nonGift)
 
 						if (isShortened) {
-							return updaters.setShortenedNonGiftUrl(url)(state)
+							updaters.setShortenedNonGiftUrl(url)(state)
+						}
+						return {
+							invalidResponseFromApi: true,
+							enterpriseEnabled: enabled,
+							...enterpriseState
 						}
 					} else {
 						const { giftCredits, monthlyAllowance, nextRenewalDate } = await api.getGiftArticleAllowance()
-						const { enabled, limit, hasCredits, firstTimeUser, requestAccess } =
-							await enterpriseApi.getEnterpriseArticleAllowance()
-						if (enabled) {
-							tracking.initEnterpriseSharing(
-								requestAccess
-									? 'enterprise-request-access'
-									: !hasCredits
-									? 'enterprise-no-credits'
-									: 'enterprise-enabled'
-							)
-						} else {
-							tracking.initEnterpriseSharing('enterprise-disabled')
-						}
+
 						// avoid to use giftCredits >= 0 because it returns true when null and ""
 						if (giftCredits > 0 || giftCredits === 0) {
 							return {
 								...updaters.setAllowance(giftCredits, monthlyAllowance, nextRenewalDate),
 								shareType: enabled && hasCredits ? ShareType.enterprise : ShareType.gift,
 								enterpriseEnabled: enabled,
-								enterpriseLimit: limit,
-								enterpriseHasCredits: hasCredits,
-								enterpriseFirstTimeUser: firstTimeUser,
-								enterpriseRequestAccess: requestAccess
+								...enterpriseState
 							}
 						} else {
 							return {
 								invalidResponseFromApi: true,
 								enterpriseEnabled: enabled,
-								enterpriseLimit: limit,
-								enterpriseHasCredits: hasCredits,
-								enterpriseFirstTimeUser: firstTimeUser,
-								enterpriseRequestAccess: requestAccess
+								...enterpriseState
 							}
 						}
 					}

diff --git a/components/x-gift-article/src/GiftArticle.scss b/components/x-gift-article/src/GiftArticle.scss
@@ -50,17 +50,11 @@
 	);
 }
 
-.x-gift-article__enterprise-label {
-	background-color: oColorsByName('black-10');
-	color: oColorsByName('black');
-	margin: 0px 6px;
-}
-
 .x-gift-article__enterprise-no-credits-icon {
 	@include oIconsContent($icon-name: 'warning', $color: oColorsByName('crimson'), $size: 16);
 	border-radius: 50%;
 	border: 2px solid oColorsByName('crimson');
-	margin-bottom: -5px;
+	margin: 0 0 -5px 5px;
 }
 
 @media only screen and (min-width: 600px) {

diff --git a/components/x-gift-article/src/Message.jsx b/components/x-gift-article/src/Message.jsx
@@ -50,14 +50,6 @@ export default ({
 		}
 	}
 
-	if (isFreeArticle) {
-		return (
-			<div className="x-gift-article-message">
-				This article is currently <strong>free</strong> for anyone to read
-			</div>
-		)
-	}
-
 	if (shareType === ShareType.gift) {
 		if (giftCredits === 0) {
 			return (
@@ -123,6 +115,17 @@ export default ({
 			return (
 				<div className="x-gift-article-message">
 					Your organisation has <strong>Enterprise Sharing credits</strong> available for you to use
+					<br />
+					<br />
+					<a
+						className="x-gift-article-message--link"
+						href="https://enterprise-sharing-dashboard.ft.com"
+						target="_blank"
+						rel="noreferrer"
+						data-trackable="enterprise-sharing-dashboard"
+					>
+						View all Enterprise Links
+					</a>
 				</div>
 			)
 		} else {
@@ -151,24 +154,31 @@ export default ({
 				<div className="x-gift-article-message x-gift-article-message--enterprise">
 					<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.
+						Request more credits and our 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"
+						href="mailto:[email protected]"
 						rel="noreferrer"
 						data-trackable="enterprise-out-of-credits"
 						className="x-gift-article__button"
 						type="button"
 					>
-						Request more credits
+						Contact support
 					</a>
 				</div>
 			)
 		}
 	}
 
+	if (isFreeArticle) {
+		return (
+			<div className="x-gift-article-message">
+				This article is currently <strong>free</strong> for anyone to read
+			</div>
+		)
+	}
+
 	if (shareType === ShareType.nonGift) {
 		return <div className="x-gift-article-message">This link can only be read by existing subscribers</div>
 	}

diff --git a/components/x-gift-article/src/Message.scss b/components/x-gift-article/src/Message.scss
@@ -6,6 +6,10 @@
 	margin-top: oSpacingByName('s3');
 }
 
+.x-gift-article-message--link {
+	color: oColorsByName('teal');
+}
+
 .x-gift-article-message--enterprise {
 	background: oColorsByName('white-40');
 	border: 1px solid oColorsByName('black-5');

diff --git a/components/x-gift-article/src/RadioButtonsSection.jsx b/components/x-gift-article/src/RadioButtonsSection.jsx
@@ -9,37 +9,29 @@ export default ({
 	enterpriseEnabled = false,
 	enterpriseLimit = 100,
 	enterpriseRequestAccess = false,
-	enterpriseAlert = false
-}) => (
-	<div
-		className="o-forms-input o-forms-input--radio-round o-forms-field x-gift-article__radio_buttons"
-		role="group"
-		aria-labelledby="article-share-options"
-	>
-		<span className="x-gift-article--visually-hidden" id="article-share-options">
-			Article share options
-		</span>
-
-		{enterpriseEnabled === true && (
-			<label htmlFor="enterpriseLink">
-				<input
-					type="radio"
-					name="gift-form__radio"
-					value="enterpriseLink"
-					id="enterpriseLink"
-					checked={shareType === ShareType.enterprise}
-					onChange={showEnterpriseUrlSection}
-				/>
-				<span className="o-forms-input__label">
-					{enterpriseLimit && !enterpriseRequestAccess
-						? `Up to ${enterpriseLimit} recipients`
-						: `Multiple recipients`}
-					<span className="o-labels x-gift-article__enterprise-label">Enterprise</span>
-					{enterpriseAlert && <span className="x-gift-article__enterprise-no-credits-icon"></span>}
-				</span>
-			</label>
-		)}
+	enterpriseAlert = false,
+	isFreeArticle = false
+}) => {
+	const enterpriseField = () => (
+		<label htmlFor="enterpriseLink">
+			<input
+				type="radio"
+				name="gift-form__radio"
+				value="enterpriseLink"
+				id="enterpriseLink"
+				checked={shareType === ShareType.enterprise}
+				onChange={showEnterpriseUrlSection}
+			/>
+			<span className="o-forms-input__label">
+				{enterpriseLimit && !enterpriseRequestAccess
+					? `Up to ${enterpriseLimit} recipients`
+					: `Multiple recipients`}
+				{enterpriseAlert && <span className="x-gift-article__enterprise-no-credits-icon"></span>}
+			</span>
+		</label>
+	)
 
+	const giftField = () => (
 		<label htmlFor="giftLink">
 			<input
 				type="radio"
@@ -51,7 +43,9 @@ export default ({
 			/>
 			<span className="o-forms-input__label">{enterpriseEnabled ? `Single recipient` : `with anyone`}</span>
 		</label>
+	)
 
+	const nonGiftField = () => (
 		<label htmlFor="nonGiftLink">
 			<input
 				type="radio"
@@ -63,5 +57,47 @@ export default ({
 			/>
 			<span className="o-forms-input__label">FT subscribers only</span>
 		</label>
-	</div>
-)
+	)
+
+	const freeToReadField = () => (
+		<label htmlFor="nonGiftLink">
+			<input
+				type="radio"
+				name="gift-form__radio"
+				value="nonGiftLink"
+				id="nonGiftLink"
+				checked={shareType === ShareType.nonGift}
+				onChange={showNonGiftUrlSection}
+			/>
+			<span className="o-forms-input__label">with anyone</span>
+		</label>
+	)
+
+	if (!isFreeArticle || enterpriseEnabled) {
+		return (
+			<div
+				className="o-forms-input o-forms-input--radio-round o-forms-field x-gift-article__radio_buttons"
+				role="group"
+				aria-labelledby="article-share-options"
+			>
+				<span className="x-gift-article--visually-hidden" id="article-share-options">
+					Article share options
+				</span>
+				{isFreeArticle ? (
+					<>
+						{freeToReadField()}
+						{enterpriseField()}
+					</>
+				) : (
+					<>
+						{enterpriseField()}
+						{giftField()}
+						{nonGiftField()}
+					</>
+				)}
+			</div>
+		)
+	}
+
+	return null
+}
diff --git a/components/x-gift-article/src/Url.jsx b/components/x-gift-article/src/Url.jsx
@@ -5,7 +5,7 @@ export default ({ shareType, isGiftUrlCreated, url, urlType }) => {
 	return (
 		<span className="o-forms-input o-forms-input--text">
 			<label className="x-gift-article__label-link" htmlFor="share-link">
-				Gift article shareable link
+				{shareType === ShareType.enterprise ? 'Enterprise Sharing link' : 'Gift article shareable link'}
 			</label>
 			<input
 				id="share-link"

diff --git a/components/x-gift-article/src/UrlSection.jsx b/components/x-gift-article/src/UrlSection.jsx
@@ -74,7 +74,8 @@ export default ({
 						showCopyButton,
 						nativeShare,
 						actions,
-						giftCredits
+						giftCredits,
+						isFreeArticle
 					}}
 				/>
 			)}