Domains: Add 100-Year Domain specific Thank You page (#96568)

* Rename component * Add new product prop to 100-year thank you component * Add type for productSlug prop * Conditional CTA for 100-year thank-you page * Add 100-year domain thank you specific changes * Style overrides specific for 100-domain flow * Fix wrong route 😬 * Add more specific 100-domain related flow changes * Remove placeholder - loading state is handled within inner component * Linter * Add back code removed by accident 😬 * Restore back to previous state - all previous commits were wrong 😬 * More style changes * Grammar correction * Add missing query component for 100-year thank you path * Fix conditional CTAs for 100-year plans + add fixed CTA for 100-year domain * Load style conditionally for 100-year flows * Use const instead of hardcoded string * Rename directory to match new component name * Rename references
Automattic · Nov 25, 2024 · 7d514b0 · 7d514b0
1 parent b91550e
commit 7d514b0
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 36 deletions.
diff --git a/...you/hundred-year-plan-thank-you/index.tsx → ...hank-you/hundred-year-thank-you/index.tsx b/...you/hundred-year-plan-thank-you/index.tsx → ...hank-you/hundred-year-thank-you/index.tsx
@@ -1,4 +1,4 @@
-import { PLAN_100_YEARS, getPlan } from '@automattic/calypso-products';
+import { PLAN_100_YEARS, getPlan, domainProductSlugs } from '@automattic/calypso-products';
 import page from '@automattic/calypso-router';
 import { Button } from '@automattic/components';
 import { useMobileBreakpoint } from '@automattic/viewport-react';
@@ -35,9 +35,15 @@ const VideoContainer = styled.div< { isMobile: boolean } >`
 		min-height: ${ ( { isMobile } ) => ( isMobile ? '100%' : 'unset' ) };
 	}
 `;
+const hundredYearProducts = [
+	PLAN_100_YEARS,
+	domainProductSlugs.DOTCOM_DOMAIN_REGISTRATION,
+] as const;
+
 interface Props {
 	siteSlug: string;
 	receiptId: number;
+	productSlug: ( typeof hundredYearProducts )[ number ];
 }
 
 const MasterBar = styled.div`
@@ -129,7 +135,11 @@ function isSiteCreatedWithinLastHour( createdTime: string ): boolean {
 	return Date.now() - new Date( createdTime ).getTime() < HOUR_IN_MS;
 }
 
-export default function HundredYearPlanThankYou( { siteSlug, receiptId }: Props ) {
+export default function HundredYearThankYou( {
+	siteSlug,
+	receiptId,
+	productSlug = PLAN_100_YEARS,
+}: Props ) {
 	const dispatch = useDispatch();
 	const translate = useTranslate();
 
@@ -166,6 +176,47 @@ export default function HundredYearPlanThankYou( { siteSlug, receiptId }: Props
 
 	const isMobile = useMobileBreakpoint();
 	const isPageLoading = isReceiptLoading || isLoadingDomains;
+	const hundredYearPlanCta =
+		siteCreatedTimeStamp && isSiteCreatedWithinLastHour( siteCreatedTimeStamp ) ? (
+			<StyledLightButton onClick={ () => page( `/setup/site-setup/goals?siteSlug=${ siteSlug }` ) }>
+				{ translate( 'Start building' ) }
+			</StyledLightButton>
+		) : (
+			<StyledLightButton onClick={ () => page( ` /home/${ siteSlug }` ) }>
+				{ translate( 'Manage your site' ) }
+			</StyledLightButton>
+		);
+	const hundredYearDomainCta = (
+		<StyledLightButton
+			onClick={ () =>
+				page( ` /domains/manage/all/${ registeredDomain.name }/edit/${ registeredDomain.name }` )
+			}
+		>
+			{ translate( 'Manage your domain' ) }
+		</StyledLightButton>
+	);
+	const cta = productSlug === PLAN_100_YEARS ? hundredYearPlanCta : hundredYearDomainCta;
+
+	const description =
+		productSlug === PLAN_100_YEARS
+			? translate(
+					'The %(planTitle)s for %(domain)s is active. Our Premier Support team will be in touch by email shortly to schedule a welcome session and walk you through your exclusive benefits. We’re looking forward to supporting you every step of the way.',
+					{
+						args: {
+							domain: registeredDomain?.domain || siteSlug,
+							planTitle: getPlan( PLAN_100_YEARS )?.getTitle() || '',
+						},
+					}
+			  )
+			: translate(
+					'Your 100-Year Domain %(domain)s has been registered. Our Premier Support team will be in touch by email shortly to schedule a welcome session and walk you through your exclusive benefits. We’re looking forward to supporting you every step of the way.',
+					{
+						args: {
+							domain: registeredDomain?.domain || siteSlug,
+						},
+					}
+			  );
+
 	return (
 		<>
 			{ siteId && <QuerySiteDomains siteId={ siteId } /> }
@@ -194,32 +245,8 @@ export default function HundredYearPlanThankYou( { siteSlug, receiptId }: Props
 							<Header className="wp-brand-font" isMobile={ isMobile }>
 								{ translate( 'Your century-long legacy begins now' ) }
 							</Header>
-							<Highlight isMobile={ isMobile }>
-								{ translate(
-									'The %(planTitle)s for %(domain)s is active. Our Premier Support team will be in touch by email shortly to schedule a welcome session and walk you through your exclusive benefits. We’re looking forward to supporting you every step of the way.',
-									{
-										args: {
-											domain: registeredDomain?.domain || siteSlug,
-											planTitle: getPlan( PLAN_100_YEARS )?.getTitle() || '',
-										},
-									}
-								) }
-							</Highlight>
-							{ siteCreatedTimeStamp && (
-								<ButtonBar isMobile={ isMobile }>
-									{ isSiteCreatedWithinLastHour( siteCreatedTimeStamp ) ? (
-										<StyledLightButton
-											onClick={ () => page( `/setup/site-setup/goals?siteSlug=${ siteSlug }` ) }
-										>
-											{ translate( 'Start building' ) }
-										</StyledLightButton>
-									) : (
-										<StyledLightButton onClick={ () => page( ` /home/${ siteSlug }` ) }>
-											{ translate( 'Manage your site' ) }
-										</StyledLightButton>
-									) }
-								</ButtonBar>
-							) }
+							<Highlight isMobile={ isMobile }>{ description }</Highlight>
+							{ siteCreatedTimeStamp && <ButtonBar isMobile={ isMobile }>{ cta }</ButtonBar> }
 						</div>
 						<VideoContainer isMobile={ isMobile }>
 							<video

diff --git a/client/my-sites/checkout/checkout-thank-you/index.tsx b/client/my-sites/checkout/checkout-thank-you/index.tsx
@@ -548,10 +548,11 @@ export class CheckoutThankYou extends Component<
 						currency={ this.props.receipt.data?.currency ?? 'USD' }
 					/>
 				);
-			} else if ( isOnlyDomainPurchases( purchases ) ) {
+			} else if ( this.props.receipt.data && isOnlyDomainPurchases( purchases ) ) {
 				pageContent = (
 					<DomainOnlyThankYou
 						purchases={ purchases }
+						receipt={ this.props.receipt.data }
 						isGravatarDomain={ !! this.props.receipt.data?.isGravatarDomain }
 					/>
 				);

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
@@ -1,27 +1,88 @@
+import { domainProductSlugs } from '@automattic/calypso-products';
+import { css, Global } from '@emotion/react';
 import { useTranslate } from 'i18n-calypso';
+import QuerySiteDomains from 'calypso/components/data/query-site-domains';
 import QuerySites from 'calypso/components/data/query-sites';
 import ThankYouV2 from 'calypso/components/thank-you-v2';
+import HundredYearThankYou from 'calypso/my-sites/checkout/checkout-thank-you/hundred-year-thank-you';
+import { PlaceholderThankYou } from 'calypso/my-sites/checkout/checkout-thank-you/redesign-v2/pages/placeholder';
 import { useSelector } from 'calypso/state';
+import { getDomainsBySiteId } from 'calypso/state/sites/domains/selectors';
 import { getSite } from 'calypso/state/sites/selectors';
 import { getDomainPurchaseTypeAndPredicate } from '../../utils';
 import ThankYouDomainProduct from '../products/domain-product';
 import getDomainFooterDetails from './content/get-domain-footer-details';
-import type { ReceiptPurchase } from 'calypso/state/receipts/types';
+import type { ReceiptData, ReceiptPurchase } from 'calypso/state/receipts/types';
 
 interface DomainOnlyThankYouProps {
 	purchases: ReceiptPurchase[];
+	receipt: ReceiptData;
 	isGravatarDomain: boolean;
 }
 
 export default function DomainOnlyThankYou( {
 	purchases,
+	receipt,
 	isGravatarDomain,
 }: DomainOnlyThankYouProps ) {
 	const translate = useTranslate();
 	const [ , predicate ] = getDomainPurchaseTypeAndPredicate( purchases );
 	const domainPurchases = purchases.filter( predicate );
 	const domainNames = domainPurchases.map( ( purchase ) => purchase?.meta );
 	const domainOnlySite = useSelector( ( state ) => getSite( state, domainPurchases[ 0 ]?.blogId ) );
+	const siteDomains = useSelector( ( state ) =>
+		getDomainsBySiteId( state, domainPurchases[ 0 ]?.blogId )
+	);
+
+	if ( ! siteDomains.length ) {
+		return (
+			<>
+				<QuerySites siteId={ domainPurchases[ 0 ]?.blogId } />
+				<QuerySiteDomains siteId={ domainPurchases[ 0 ]?.blogId } />
+				<PlaceholderThankYou />
+			</>
+		);
+	}
+
+	if ( domainPurchases.length === 1 ) {
+		const purchasedDomain = domainPurchases[ 0 ];
+		const domain = siteDomains.find( ( siteDomain ) => siteDomain.name === purchasedDomain.meta );
+
+		if ( domain.isHundredYearDomain ) {
+			return (
+				<>
+					<Global
+						styles={ css`
+							main.checkout-thank-you {
+								&.is-redesign-v2 {
+									&.main {
+										max-width: unset;
+									}
+								}
+							}
+
+							body.is-section-checkout,
+							body.is-section-checkout .layout__content,
+							body.is-section-checkout-thank-you,
+							body.is-section-checkout-thank-you .layout__content {
+								background: linear-gradient(
+									233deg,
+									#06101c 2.17%,
+									#050c16 41.26%,
+									#02080f 88.44%
+								);
+							}
+						` }
+					/>
+					<HundredYearThankYou
+						siteSlug={ String( purchasedDomain.blogId ) }
+						receiptId={ Number( receipt.receiptId ) }
+						productSlug={ domainProductSlugs.DOTCOM_DOMAIN_REGISTRATION }
+					/>
+				</>
+			);
+		}
+	}
 
 	const products = domainPurchases.map( ( purchase ) => {
 		return (

diff --git a/client/my-sites/checkout/controller.jsx b/client/my-sites/checkout/controller.jsx
@@ -37,7 +37,7 @@ import AkismetCheckoutThankYou from './checkout-thank-you/akismet-checkout-thank
 import DomainTransferToAnyUser from './checkout-thank-you/domain-transfer-to-any-user';
 import { FailedPurchasePage } from './checkout-thank-you/failed-purchase-page';
 import GiftThankYou from './checkout-thank-you/gift/gift-thank-you';
-import HundredYearPlanThankYou from './checkout-thank-you/hundred-year-plan-thank-you';
+import HundredYearThankYou from './checkout-thank-you/hundred-year-thank-you';
 import JetpackCheckoutThankYou from './checkout-thank-you/jetpack-checkout-thank-you';
 import CheckoutPending from './checkout-thank-you/pending';
 import UpsellNudge, {
@@ -547,10 +547,7 @@ export function licensingThankYouAutoActivationCompleted( context, next ) {
 
 export function hundredYearCheckoutThankYou( context, next ) {
 	context.primary = (
-		<HundredYearPlanThankYou
-			siteSlug={ context.params.site }
-			receiptId={ context.params.receiptId }
-		/>
+		<HundredYearThankYou siteSlug={ context.params.site } receiptId={ context.params.receiptId } />
 	);
 	next();
 }

diff --git a/packages/calypso-products/src/constants/domain.ts b/packages/calypso-products/src/constants/domain.ts
@@ -2,4 +2,4 @@ export const domainProductSlugs = {
 	TRANSFER_IN: 'domain_transfer',
 	DOTCOM_DOMAIN_REGISTRATION: 'domain_reg',
 	DOMAIN_MOVE_INTERNAL: 'domain_move_internal',
-};
+} as const;