Extract separate components from FeaturesGrid (#86825)

packages/plans-grid-next/src/components/actions.tsx

@@ -21,7 +21,7 @@ import { isMobile } from '@automattic/viewport';
 import styled from '@emotion/styled';
 import { useSelect } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
-import { localize, TranslateResult, useTranslate } from 'i18n-calypso';
+import { TranslateResult, useTranslate } from 'i18n-calypso';
 import { usePlansGridContext } from '../grid-context';
 import useDefaultStorageOption from '../hooks/data-store/use-default-storage-option';
 import useIsLargeCurrency from '../hooks/use-is-large-currency';
@@ -538,4 +538,4 @@ const PlanFeatures2023GridActions = ( props: PlanFeaturesActionsButtonProps ) =>
 	);
 };
 
-export default localize( PlanFeatures2023GridActions );
+export default PlanFeatures2023GridActions;

packages/plans-grid-next/src/components/features-grid/billing-timeframes.tsx

@@ -0,0 +1,37 @@
+import classNames from 'classnames';
+import { GridPlan } from '../../types';
+import PlanDivOrTdContainer from '../plan-div-td-container';
+import BillingTimeframe from '../shared/billing-timeframe';
+
+type BillingTimeframesProps = {
+	renderedGridPlans: GridPlan[];
+	showRefundPeriod?: boolean;
+	options?: {
+		isTableCell?: boolean;
+	};
+};
+
+const BillingTimeframes = ( {
+	options,
+	renderedGridPlans,
+	showRefundPeriod,
+}: BillingTimeframesProps ) => {
+	return renderedGridPlans.map( ( { planSlug } ) => {
+		const classes = classNames(
+			'plan-features-2023-grid__table-item',
+			'plan-features-2023-grid__header-billing-info'
+		);
+
+		return (
+			<PlanDivOrTdContainer
+				className={ classes }
+				isTableCell={ options?.isTableCell }
+				key={ planSlug }
+			>
+				<BillingTimeframe planSlug={ planSlug } showRefundPeriod={ showRefundPeriod } />
+			</PlanDivOrTdContainer>
+		);
+	} );
+};
+
+export default BillingTimeframes;