From e4f6d11f1ea82c58dd0aed0832e2be59d6cc1fb1 Mon Sep 17 00:00:00 2001
From: Rik Roots <rik.roots@gmail.com>
Date: Wed, 17 Jan 2024 12:19:21 +0000
Subject: [PATCH] Fix cancel link layout for ManageProductV2

---
 .../manageProducts/ManageProductV2.tsx        | 72 ++++++++++---------
 shared/featureSwitches.ts                     |  2 +-
 2 files changed, 39 insertions(+), 35 deletions(-)

diff --git a/client/components/mma/accountoverview/manageProducts/ManageProductV2.tsx b/client/components/mma/accountoverview/manageProducts/ManageProductV2.tsx
index b48999610..7392dea0b 100644
--- a/client/components/mma/accountoverview/manageProducts/ManageProductV2.tsx
+++ b/client/components/mma/accountoverview/manageProducts/ManageProductV2.tsx
@@ -7,14 +7,13 @@ import {
 	until,
 } from '@guardian/source-foundations';
 import {
-	Button,
 	LinkButton,
 	Stack,
 	SvgCalendar,
 	SvgClock,
 	SvgCreditCard,
 } from '@guardian/source-react-components';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { PageContainer } from '@/client/components/mma/Page';
 import { ErrorIcon } from '@/client/components/mma/shared/assets/ErrorIcon';
 import { JsonResponseHandler } from '@/client/components/mma/shared/asyncComponents/DefaultApiResponseHandler';
@@ -52,17 +51,28 @@ import {
 } from '@/shared/productTypes';
 
 const subHeadingTitleCss = `
-    ${headline.medium()};
-    font-weight: bold;
-    ${until.tablet} {
-      ${headline.xxsmall()};
-      font-weight: bold;
-    };
-  `;
+	${headline.medium()};
+	font-weight: bold;
+	${until.tablet} {
+		${headline.xxsmall()};
+		font-weight: bold;
+	};
+	`;
 const subHeadingBorderTopCss = `
     margin: 16px 0 16px;
   `;
 
+const cancelLinkCss = css`
+	color: ${palette.brand['400']};
+	font-weight: bold;
+	text-decoration: underline;
+	padding-left: ${space[2]}px;
+	${until.tablet} {
+    	padding-top: ${space[1]}px;
+    	padding-left: 0;
+    };
+  `;
+
 interface InnerContentProps {
 	manageProductV2Props: WithProductType<ProductType>;
 	productDetail: ProductDetail;
@@ -72,7 +82,7 @@ const InnerContent = ({
 	manageProductV2Props,
 	productDetail,
 }: InnerContentProps) => {
-	const navigate = useNavigate();
+	// const navigate = useNavigate();
 
 	const mainPlan = getMainPlan(productDetail.subscription);
 	if (!mainPlan) {
@@ -93,6 +103,8 @@ const InnerContent = ({
 
 	const hasCancellationPending = productDetail.subscription.cancelledAt;
 
+	const isSelfServeCancellationAllowed = productDetail.selfServiceCancellation.isAllowed;
+
 	const cancelledCopy =
 		specificProductType.cancelledCopy || groupedProductType.cancelledCopy;
 
@@ -244,31 +256,23 @@ const InnerContent = ({
 								Update payment method
 							</LinkButton>
 						)}
-
-					<div
-						css={css`
-							margin-left: ${space[5]}px;
-						`}
-					>
-						{!hasCancellationPending && (
-							<Button
-								priority="subdued"
-								onClick={() => {
-									navigate(
-										'/cancel/' +
-											specificProductType.urlPart,
-										{
-											state: {
-												productDetail: productDetail,
-											},
-										},
-									);
-								}}
+					{!hasCancellationPending && !isSelfServeCancellationAllowed && (
+						<div
+							css={css`
+								display: flex;
+								align-items: center;
+								justify-content: center;
+							`}
+						>
+							<Link
+								css={cancelLinkCss}
+								to={'/cancel/' + specificProductType.urlPart}
+								state={{ productDetail: productDetail }}
 							>
-								Cancel {groupedProductType.friendlyName()}
-							</Button>
-						)}
-					</div>
+								Cancel subscription
+							</Link>
+						</div>
+					)}
 				</div>
 			</section>
 		</>
diff --git a/shared/featureSwitches.ts b/shared/featureSwitches.ts
index 8919ab1c2..ad57d869f 100644
--- a/shared/featureSwitches.ts
+++ b/shared/featureSwitches.ts
@@ -33,5 +33,5 @@ export const featureSwitches: Record<FeatureSwitchName, boolean> = {
 	exampleFeature: false,
 	appSubscriptions: true,
 	supporterPlusUpdateAmount: true,
-	digisubSave: false,
+	digisubSave: true,
 };