From 81ecd540dd43a0cc803e78a89e5148ea50ddeb61 Mon Sep 17 00:00:00 2001
From: Leonardo Sameshima Taba <leonardo.taba@automattic.com>
Date: Thu, 23 May 2024 14:57:21 -0300
Subject: [PATCH] Adapt `DomainOnlyThankYou` to the Gravatar domain flow

---
 client/components/thank-you-v2/index.tsx                 | 8 +++++---
 client/my-sites/checkout/checkout-thank-you/index.tsx    | 8 +++++++-
 .../checkout-thank-you/redesign-v2/pages/domain-only.tsx | 9 ++++++++-
 .../redesign-v2/products/domain-product.tsx              | 8 ++++++++
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/client/components/thank-you-v2/index.tsx b/client/components/thank-you-v2/index.tsx
index 2dde1d3f00cd28..de7f85604ad861 100644
--- a/client/components/thank-you-v2/index.tsx
+++ b/client/components/thank-you-v2/index.tsx
@@ -13,10 +13,12 @@ interface ThankYouV2Props {
 	products?: React.ReactElement | React.ReactElement[];
 	footerDetails?: ThankYouFooterDetailProps[];
 	upsellProps?: ThankYouUpsellProps;
+	isGravatarDomain?: boolean;
 }
 
 export default function ThankYouV2( props: ThankYouV2Props ) {
-	const { title, subtitle, headerButtons, products, footerDetails, upsellProps } = props;
+	const { title, subtitle, headerButtons, products, footerDetails, upsellProps, isGravatarDomain } =
+		props;
 
 	return (
 		<div className="thank-you">
@@ -26,9 +28,9 @@ export default function ThankYouV2( props: ThankYouV2Props ) {
 
 			{ products && <div className="thank-you__products">{ products }</div> }
 
-			{ footerDetails && <ThankYouFooter details={ footerDetails } /> }
+			{ footerDetails && ! isGravatarDomain && <ThankYouFooter details={ footerDetails } /> }
 
-			{ upsellProps && <ThankYouUpsell { ...upsellProps } /> }
+			{ upsellProps && ! isGravatarDomain && <ThankYouUpsell { ...upsellProps } /> }
 		</div>
 	);
 }
diff --git a/client/my-sites/checkout/checkout-thank-you/index.tsx b/client/my-sites/checkout/checkout-thank-you/index.tsx
index d46467e783083e..8a196a2b00ba6b 100644
--- a/client/my-sites/checkout/checkout-thank-you/index.tsx
+++ b/client/my-sites/checkout/checkout-thank-you/index.tsx
@@ -549,7 +549,13 @@ export class CheckoutThankYou extends Component<
 					/>
 				);
 			} else if ( isOnlyDomainPurchases( purchases ) ) {
-				pageContent = <DomainOnlyThankYou purchases={ purchases } receiptId={ receiptId } />;
+				pageContent = (
+					<DomainOnlyThankYou
+						purchases={ purchases }
+						receiptId={ receiptId }
+						isGravatarDomain={ false }
+					/>
+				);
 			} else if ( purchases.length === 1 && isPlan( purchases[ 0 ] ) ) {
 				pageContent = (
 					<PlanOnlyThankYou
diff --git a/client/my-sites/checkout/checkout-thank-you/redesign-v2/pages/domain-only.tsx b/client/my-sites/checkout/checkout-thank-you/redesign-v2/pages/domain-only.tsx
index df54fed33ef345..2559ec86e8b56e 100644
--- a/client/my-sites/checkout/checkout-thank-you/redesign-v2/pages/domain-only.tsx
+++ b/client/my-sites/checkout/checkout-thank-you/redesign-v2/pages/domain-only.tsx
@@ -62,9 +62,14 @@ function UpsellActions( {
 interface DomainOnlyThankYouProps {
 	purchases: ReceiptPurchase[];
 	receiptId: number;
+	isGravatarDomain: boolean;
 }
 
-export default function DomainOnlyThankYou( { purchases, receiptId }: DomainOnlyThankYouProps ) {
+export default function DomainOnlyThankYou( {
+	purchases,
+	receiptId,
+	isGravatarDomain,
+}: DomainOnlyThankYouProps ) {
 	const translate = useTranslate();
 	const [ , predicate ] = getDomainPurchaseTypeAndPredicate( purchases );
 	const domainPurchases = purchases.filter( predicate );
@@ -101,6 +106,7 @@ export default function DomainOnlyThankYou( { purchases, receiptId }: DomainOnly
 				key={ `domain-${ purchase.meta }` }
 				siteSlug={ domainOnlySite?.slug }
 				isDomainOnly
+				isGravatarDomain={ isGravatarDomain }
 			/>
 		);
 	} );
@@ -121,6 +127,7 @@ export default function DomainOnlyThankYou( { purchases, receiptId }: DomainOnly
 				products={ products }
 				footerDetails={ getDomainFooterDetails( 'domain-only' ) }
 				upsellProps={ upsellProps }
+				isGravatarDomain={ isGravatarDomain }
 			/>
 		</>
 	);
diff --git a/client/my-sites/checkout/checkout-thank-you/redesign-v2/products/domain-product.tsx b/client/my-sites/checkout/checkout-thank-you/redesign-v2/products/domain-product.tsx
index 5aff0e240b410f..f46ba5df9a4e65 100644
--- a/client/my-sites/checkout/checkout-thank-you/redesign-v2/products/domain-product.tsx
+++ b/client/my-sites/checkout/checkout-thank-you/redesign-v2/products/domain-product.tsx
@@ -40,6 +40,7 @@ type ThankYouDomainProductProps = {
 	isDomainOnly?: boolean;
 	siteSlug?: string | null;
 	currency?: string;
+	isGravatarDomain?: boolean;
 };
 
 export default function ThankYouDomainProduct( {
@@ -48,6 +49,7 @@ export default function ThankYouDomainProduct( {
 	isDomainOnly,
 	siteSlug,
 	currency,
+	isGravatarDomain,
 }: ThankYouDomainProductProps ) {
 	const translate = useTranslate();
 
@@ -62,6 +64,12 @@ export default function ThankYouDomainProduct( {
 
 	if ( purchase && isDomainTransfer( purchase ) ) {
 		actions = <DomainTransferSection purchase={ purchase } currency={ currency ?? 'USD' } />;
+	} else if ( isGravatarDomain ) {
+		actions = (
+			<Button variant="primary" href="https://gravatar.com/profile">
+				{ translate( 'Manage domain at Gravatar' ) }
+			</Button>
+		);
 	} else if ( purchase?.blogId && siteSlug ) {
 		const createSiteHref = siteSlug && createSiteFromDomainOnly( siteSlug, purchase.blogId );
 		const createSiteProps = createSiteHref ? { href: createSiteHref } : { disabled: true };