Add basic structure for feature recommendations card

projects/packages/my-jetpack/_inc/components/evaluation-recommendations/index.tsx

@@ -131,7 +131,8 @@ const EvaluationRecommendations: FC = () => {
 					fluid
 				>
 					{ recommendedModules.map( module => {
-						const Card = JetpackModuleToProductCard[ module ];
+						const moduleName = module.replace( 'feature_', '' );
+						const Card = JetpackModuleToProductCard[ moduleName ];
 						return (
 							Card && (
 								<Col tagName="li" key={ module } lg={ 4 }>

projects/packages/my-jetpack/_inc/components/product-cards-section/all.ts

@@ -5,9 +5,12 @@ import BoostCard from './boost-card';
 import CompleteCard from './complete-card';
 import CrmCard from './crm-card';
 import GrowthCard from './growth-card';
+import NewsletterCard from './newsletter-card';
 import ProtectCard from './protect-card';
+import RelatedPostsCard from './related-posts-card';
 import SearchCard from './search-card';
 import SecurityCard from './security-card';
+import SiteAcceleratorCard from './site-accelerator-card';
 import SocialCard from './social-card';
 import StatsCard from './stats-card';
 import VideopressCard from './videopress-card';
@@ -33,4 +36,8 @@ export const JetpackModuleToProductCard: {
 	extras: null,
 	scan: null,
 	creator: null,
+	// Features:
+	newsletter: NewsletterCard,
+	'related-posts': RelatedPostsCard,
+	'site-accelerator': SiteAcceleratorCard,
 };

projects/packages/my-jetpack/_inc/components/product-cards-section/newsletter-card.tsx

@@ -0,0 +1,20 @@
+import { PRODUCT_SLUGS } from '../../data/constants';
+import ProductCard from '../connected-product-card';
+import type { FC } from 'react';
+
+interface NewsletterCardProps {
+	admin?: boolean;
+	recommendation?: boolean;
+}
+
+const NewsletterCard: FC< NewsletterCardProps > = ( { admin, recommendation } ) => {
+	return (
+		<ProductCard
+			slug={ PRODUCT_SLUGS.NEWSLETTER }
+			admin={ admin }
+			recommendation={ recommendation }
+		/>
+	);
+};
+
+export default NewsletterCard;

projects/packages/my-jetpack/_inc/components/product-cards-section/related-posts-card.tsx

@@ -0,0 +1,20 @@
+import { PRODUCT_SLUGS } from '../../data/constants';
+import ProductCard from '../connected-product-card';
+import type { FC } from 'react';
+
+interface RelatedPostsCardProps {
+	admin?: boolean;
+	recommendation?: boolean;
+}
+
+const RelatedPostsCard: FC< RelatedPostsCardProps > = ( { admin, recommendation } ) => {
+	return (
+		<ProductCard
+			slug={ PRODUCT_SLUGS.RELATED_POSTS }
+			admin={ admin }
+			recommendation={ recommendation }
+		/>
+	);
+};
+
+export default RelatedPostsCard;

projects/packages/my-jetpack/_inc/components/product-cards-section/site-accelerator-card.tsx

@@ -0,0 +1,20 @@
+import { PRODUCT_SLUGS } from '../../data/constants';
+import ProductCard from '../connected-product-card';
+import type { FC } from 'react';
+
+interface SiteAcceleratorCardProps {
+	admin?: boolean;
+	recommendation?: boolean;
+}
+
+const SiteAcceleratorCard: FC< SiteAcceleratorCardProps > = ( { admin, recommendation } ) => {
+	return (
+		<ProductCard
+			slug={ PRODUCT_SLUGS.SITE_ACCELERATOR }
+			admin={ admin }
+			recommendation={ recommendation }
+		/>
+	);
+};
+
+export default SiteAcceleratorCard;

projects/packages/my-jetpack/_inc/data/constants.ts

@@ -40,17 +40,21 @@ export const PRODUCT_SLUGS = {
 	ANTI_SPAM: 'anti-spam',
 	BACKUP: 'backup',
 	BOOST: 'boost',
+	BRUTE_FORCE: 'brute-force',
 	CRM: 'crm',
 	CREATOR: 'creator',
 	EXTRAS: 'extras',
 	JETPACK_AI: 'jetpack-ai',
+	NEWSLETTER: 'newsletter',
+	PROTECT: 'protect',
+	RELATED_POSTS: 'related-posts',
 	SCAN: 'scan',
 	SEARCH: 'search',
+	SITE_ACCELERATOR: 'site-accelerator',
 	SOCIAL: 'social',
-	SECURITY: 'security',
-	PROTECT: 'protect',
-	VIDEOPRESS: 'videopress',
 	STATS: 'stats',
+	VIDEOPRESS: 'videopress',
+	SECURITY: 'security',
 	GROWTH: 'growth',
 	COMPLETE: 'complete',
 } satisfies Record< string, JetpackModule >;

projects/packages/my-jetpack/global.d.ts

@@ -33,15 +33,18 @@ type JetpackModule =
 	| 'extras'
 	| 'ai'
 	| 'jetpack-ai'
+	| 'protect'
 	| 'scan'
 	| 'search'
 	| 'social'
-	| 'security'
-	| 'protect'
-	| 'videopress'
 	| 'stats'
+	| 'videopress'
+	| 'security'
 	| 'growth'
-	| 'complete';
+	| 'complete'
+	| 'site-accelerator'
+	| 'newsletter'
+	| 'related-posts';
 
 type ThreatItem = {
 	// Protect API properties (free plan)