Commerce trial: delete expired sites (#103504)

Author: rcrdortiz

client/components/navigation-header/index.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import clsx from 'clsx';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect, useState } from 'react';
 import Breadcrumb, { Item as TBreadcrumbItem } from 'calypso/components/breadcrumb';
 import FormattedHeader from 'calypso/components/formatted-header';
 import ScreenOptionsTab from 'calypso/components/screen-options-tab';
@@ -35,6 +35,22 @@ interface Props {
 	loggedIn?: boolean;
 }
 
+// This function checks if the URL contains the 'options' query parameter and if it includes 'noCrumbs'.
+// Expired eCommerce trials use this to hide the breadcrumbs since those users can't access settings and other pages exposed in the breadcrumbs.
+export const checkShouldShowBreadcrumb = (): boolean => {
+	if ( typeof window === 'undefined' ) {
+		return false;
+	}
+
+	try {
+		const params = new URLSearchParams( window.location.search );
+		const options = params.get( 'options' ) || '';
+		return ! options.includes( 'noCrumbs' );
+	} catch {
+		return false;
+	}
+};
+
 const NavigationHeader = React.forwardRef< HTMLElement, Props >( ( props, ref ) => {
 	const {
 		id,
@@ -52,8 +68,13 @@ const NavigationHeader = React.forwardRef< HTMLElement, Props >( ( props, ref )
 		loggedIn = true,
 	} = props;
 
+	const [ showCrumbs, setShowCrumbs ] = useState( false );
 	const showTitle = alwaysShowTitle || ( navigationItems.length < 2 && loggedIn );
 
+	useEffect( () => {
+		setShowCrumbs( checkShouldShowBreadcrumb() );
+	}, [] );
+
 	return (
 		<header
 			id={ id }
@@ -68,12 +89,14 @@ const NavigationHeader = React.forwardRef< HTMLElement, Props >( ( props, ref )
 			<Container>
 				<div className="navigation-header__main">
 					{ screenOptionsTab && <ScreenOptionsTab wpAdminPath={ screenOptionsTab } /> }
-					<Breadcrumb
-						items={ navigationItems }
-						mobileItem={ mobileItem }
-						compact={ compactBreadcrumb }
-						hideWhenOnlyOneLevel
-					/>
+					{ showCrumbs && (
+						<Breadcrumb
+							items={ navigationItems }
+							mobileItem={ mobileItem }
+							compact={ compactBreadcrumb }
+							hideWhenOnlyOneLevel
+						/>
+					) }
 					{ showTitle && (
 						<FormattedHeader
 							align="left"
@@ -89,6 +112,8 @@ const NavigationHeader = React.forwardRef< HTMLElement, Props >( ( props, ref )
 	);
 } );
 
+NavigationHeader.displayName = 'NavigationHeader';
+
 NavigationHeader.defaultProps = {
 	id: '',
 	className: '',

client/my-sites/controller.js

@@ -324,6 +324,10 @@ function onSelectedSiteAvailable( context ) {
 		! wasUpgradedFromTrialSite( state, selectedSite.ID ) &&
 		[ PLAN_FREE, PLAN_JETPACK_FREE ].includes( currentPlanSlug )
 	) {
+		const isDeleteSitePath = /^\/sites\/settings\/site\/[^/]+\/delete-site\?options=noCrumbs$/.test(
+			context.path
+		);
+
 		const permittedPathPrefixes = [
 			'/checkout/',
 			'/domains/',
@@ -334,7 +338,11 @@ function onSelectedSiteAvailable( context ) {
 			'/settings/delete-site/',
 		];
 
-		if ( ! permittedPathPrefixes.some( ( prefix ) => context.pathname.startsWith( prefix ) ) ) {
+		const isPermittedPath = permittedPathPrefixes.some( ( prefix ) =>
+			context.pathname.startsWith( prefix )
+		);
+
+		if ( ! isDeleteSitePath && ! isPermittedPath ) {
 			page.redirect( `/plans/my-plan/trial-expired/${ selectedSite.slug }` );
 			return false;
 		}

client/my-sites/plans/ecommerce-trial/ecommerce-trial-expired/index.tsx

@@ -61,7 +61,7 @@ const ECommerceTrialExpired = (): JSX.Element => {
 		siteIsAtomic && selectedSite?.URL
 			? `${ selectedSite.URL }/wp-admin/export.php`
 			: `/export/${ siteSlug }`;
-	const settingsDeleteSiteUrl = `/settings/delete-site/${ siteSlug }`;
+	const settingsDeleteSiteUrl = `/settings/delete-site/${ siteSlug }?options=noCrumbs`;
 
 	const onDeleteClick = useCallback(
 		( e: React.MouseEvent< HTMLButtonElement > ) => {
@@ -77,7 +77,7 @@ const ECommerceTrialExpired = (): JSX.Element => {
 	);
 
 	const isWooExpressTrial = purchase?.isWooExpressTrial;
-	const isEntrepreneurTrial = purchase?.isWooExpressTrial === false;
+	const isEntrepreneurTrial = ! purchase?.isWooExpressTrial;
 
 	return (
 		<>