A4A > Agency Tier: Implement tier permission check

client/a8c-for-agencies/controller.tsx

@@ -1,3 +1,4 @@
+import { isEnabled } from '@automattic/calypso-config';
 import page, { type Callback } from '@automattic/calypso-router';
 import { getQueryArgs, addQueryArgs } from '@wordpress/url';
 import isA8CForAgencies from 'calypso/lib/a8c-for-agencies/is-a8c-for-agencies';
@@ -11,7 +12,8 @@ import {
 	A4A_LANDING_LINK,
 	A4A_OVERVIEW_LINK,
 } from './components/sidebar-menu/lib/constants';
-import { isPathAllowed } from './lib/permission';
+import { isPathAllowed, isPathAllowedForTier } from './lib/permission';
+import TierPermissionError from './sections/agency-tier/tier-permission-error';
 import type { Agency } from 'calypso/state/a8c-for-agencies/types';
 
 export const redirectToLandingContext: Callback = () => {
@@ -65,3 +67,16 @@ export const requireClientAccessContext: Callback = ( context, next ) => {
 		addQueryArgs( A4A_CLIENT_LANDING_LINK, { ...args, return: pathname + search + hash } )
 	);
 };
+
+export const requireTierAccessContext: Callback = ( context, next ) => {
+	const state = context.store.getState();
+	const agency = getActiveAgency( state );
+	const { pathname } = window.location;
+
+	if ( isEnabled( 'a8c-for-agencies-agency-tier' ) && ! isPathAllowedForTier( pathname, agency ) ) {
+		context.primary = <TierPermissionError section={ context.section.name } />;
+		next();
+		return;
+	}
+	next();
+};

client/a8c-for-agencies/lib/permission.ts

@@ -126,3 +126,26 @@ export const isPathAllowed = ( pathname: string, agency: Agency | null ) => {
 
 	return false;
 };
+
+const MEMBER_TIER_ACCESSIBLE_PATHS: Record< string, string[] > = {
+	[ A4A_PARTNER_DIRECTORY_DASHBOARD_LINK ]: [ 'a4a_feature_partner_directory' ],
+	[ A4A_PARTNER_DIRECTORY_AGENCY_DETAILS_LINK ]: [ 'a4a_feature_partner_directory' ],
+	[ A4A_PARTNER_DIRECTORY_AGENCY_EXPERTISE_LINK ]: [ 'a4a_feature_partner_directory' ],
+};
+
+export const isPathAllowedForTier = ( pathname: string, agency: Agency | null ) => {
+	if ( ! agency ) {
+		return false;
+	}
+
+	// Check if the user has the required capability to access the current path
+	const features = agency?.tier?.features;
+	if ( features ) {
+		const permissions = MEMBER_TIER_ACCESSIBLE_PATHS?.[ pathname ];
+		if ( permissions ) {
+			return features.some( ( capability: string ) => permissions?.includes( capability ) );
+		}
+	}
+
+	return false;
+};

client/a8c-for-agencies/sections/agency-tier/lib/get-tier-permission-data.tsx

@@ -0,0 +1,37 @@
+import { A4A_AGENCY_TIER_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
+
+const getTierPermissionData = (
+	section: string,
+	translate: ( key: string, args?: Record< string, unknown > ) => string
+) => {
+	const content: Record<
+		string,
+		{
+			title: string;
+			content: {
+				heading: string;
+				description: string;
+				buttonProps: { text: string; href: string };
+			};
+		}
+	> = {
+		'a8c-for-agencies-partner-directory': {
+			title: translate( 'Partner Directory' ),
+			content: {
+				heading: translate(
+					"Reach the next tier to be showcased in Automattic's partner directories."
+				),
+				description: translate(
+					"Agency Partners and Pro Agency Partners get to be included in Automatic's directories. Pro Agency Partners also get co-marketing opportunities."
+				),
+				buttonProps: {
+					text: translate( 'Learn more' ),
+					href: A4A_AGENCY_TIER_LINK,
+				},
+			},
+		},
+	};
+	return content?.[ section ];
+};
+
+export default getTierPermissionData;

client/a8c-for-agencies/sections/agency-tier/tier-permission-error/index.tsx

@@ -0,0 +1,54 @@
+import { Button } from '@wordpress/components';
+import { useTranslate } from 'i18n-calypso';
+import Layout from 'calypso/a8c-for-agencies/components/layout';
+import LayoutBody from 'calypso/a8c-for-agencies/components/layout/body';
+import LayoutHeader, {
+	LayoutHeaderTitle as Title,
+	LayoutHeaderActions as Actions,
+} from 'calypso/a8c-for-agencies/components/layout/header';
+import LayoutTop from 'calypso/a8c-for-agencies/components/layout/top';
+import MobileSidebarNavigation from 'calypso/a8c-for-agencies/components/sidebar/mobile-sidebar-navigation';
+import AgencyTierLevels from 'calypso/assets/images/a8c-for-agencies/agency-tier/agency-tier-levels.svg';
+import getTierPermissionData from '../lib/get-tier-permission-data';
+
+import './style.scss';
+
+export default function TierPermissionError( { section }: { section: string } ) {
+	const translate = useTranslate();
+
+	const { title, content } = getTierPermissionData( section, translate );
+
+	return (
+		<Layout className="agency-tier-permission-error__layout" title={ title } wide>
+			<LayoutTop>
+				<LayoutHeader>
+					<Title>{ title } </Title>
+					<Actions>
+						<MobileSidebarNavigation />
+					</Actions>
+				</LayoutHeader>
+			</LayoutTop>
+
+			<LayoutBody>
+				<div className="agency-tier-permission-error__content">
+					<div className="agency-tier-permission-error__content-image">
+						<img
+							className="agency-tier-permission-error__content-image"
+							alt="agency-tier-levels"
+							src={ AgencyTierLevels }
+						/>
+					</div>
+					<div className="agency-tier-permission-error__content-text">
+						<div className="agency-tier-permission-error__content-heading">{ content.heading }</div>
+						<div className="agency-tier-permission-error__content-description">
+							{ content.description }
+						</div>
+						<Button href={ content.buttonProps.href } variant="primary">
+							{ content.buttonProps.text }
+						</Button>
+					</div>
+				</div>
+			</LayoutBody>
+		</Layout>
+	);
+}

client/a8c-for-agencies/sections/agency-tier/tier-permission-error/style.scss

@@ -0,0 +1,82 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+
+.agency-tier-permission-error__layout {
+	.a4a-layout__container {
+		height: 100%;
+	}
+	.a4a-layout__body {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		height: 100%;
+	}
+}
+
+.agency-tier-permission-error__content {
+	display: flex;
+	flex-direction: column;
+	max-width: 700px;
+	background-color: var(--color-neutral-0);
+	border-radius: 12px; /* stylelint-disable-line scales/radii */
+
+	@include break-large {
+		flex-direction: row;
+		height: 350px;
+	}
+
+	@include break-wide {
+		height: unset;
+	}
+
+
+	.agency-tier-permission-error__content-image {
+		display: none;
+
+		@include break-large {
+			display: block;
+			min-width: 250px;
+			height: 350px;
+		}
+
+		@include break-wide {
+			min-width: 350px;
+			height: unset;
+		}
+
+		img {
+			border-radius: 12px 0 0 12px; /* stylelint-disable-line scales/radii */
+		}
+	}
+
+	.agency-tier-permission-error__content-text {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		padding: 72px 32px 48px;
+		margin: 8px;
+		background-color: var(--color-text-white);
+		border-radius: 8px; /* stylelint-disable-line scales/radii */
+
+		@include break-large {
+			margin-inline-start: 0;
+			padding: 32px;
+		}
+
+		@include break-wide {
+			padding: 72px 32px 48px;
+		}
+	}
+
+	.agency-tier-permission-error__content-heading {
+		@include a4a-font-heading-xl;
+	}
+
+	.agency-tier-permission-error__content-description {
+		@include a4a-font-body-md;
+	}
+
+	a.components-button {
+		width: fit-content;
+	}
+}

client/a8c-for-agencies/sections/partner-directory/index.tsx

@@ -1,6 +1,9 @@
 import page from '@automattic/calypso-router';
 import { A4A_PARTNER_DIRECTORY_LINK } from 'calypso/a8c-for-agencies/components/sidebar-menu/lib/constants';
-import { requireAccessContext } from 'calypso/a8c-for-agencies/controller';
+import {
+	requireAccessContext,
+	requireTierAccessContext,
+} from 'calypso/a8c-for-agencies/controller';
 import { makeLayout, render as clientRender } from 'calypso/controller';
 import { PARTNER_DIRECTORY_DASHBOARD_SLUG } from './constants';
 import { partnerDirectoryDashboardContext } from './controller';
@@ -15,6 +18,7 @@ export default function () {
 		`${ A4A_PARTNER_DIRECTORY_LINK }/:section?`,
 		requireAccessContext,
 		partnerDirectoryDashboardContext,
+		requireTierAccessContext,
 		makeLayout,
 		clientRender
 	);