Move strings to translatable files

Author: arunshenoy99

src/sections/FontOptimization/getFontOptimizationText.js

@@ -0,0 +1,48 @@
+import { __ } from '@wordpress/i18n';
+
+const getFontOptimizationText = () => ( {
+	fontOptimizationTitle: __( 'Font Optimization', 'wp-module-performance' ),
+	fontOptimizationDescription: __(
+		'Improve load times by replacing Google Fonts with optimized local versions.',
+		'wp-module-performance'
+	),
+	fontOptimizationLabel: __(
+		'Optimize Fonts via Cloudflare',
+		'wp-module-performance'
+	),
+	fontOptimizationToggleDescription: __(
+		'Replaces Google Fonts with faster, privacy-friendly versions served locally.',
+		'wp-module-performance'
+	),
+	fontOptimizationUpsellText: __(
+		'Upgrade to enable font optimization using Cloudflare.',
+		'wp-module-performance'
+	),
+	fontOptimizationUpsellLink: __(
+		'https://www.bluehost.com',
+		'wp-module-performance'
+	),
+	fontOptimizationLoading: __(
+		'Loading font optimization settings…',
+		'wp-module-performance'
+	),
+	fontOptimizationError: __(
+		'Error loading settings.',
+		'wp-module-performance'
+	),
+	fontOptimizationUpdatedTitle: __(
+		'Fonts optimization updated',
+		'wp-module-performance'
+	),
+	fontOptimizationUpdatedDescription: __(
+		'Font optimization setting saved successfully.',
+		'wp-module-performance'
+	),
+	fontOptimizationErrorTitle: __( 'Update failed', 'wp-module-performance' ),
+	fontOptimizationErrorDescription: __(
+		'Could not save font optimization setting.',
+		'wp-module-performance'
+	),
+} );
+
+export default getFontOptimizationText;

src/sections/FontOptimization/index.js

@@ -9,6 +9,7 @@ import apiFetch from '@wordpress/api-fetch';
 import { useDispatch } from '@wordpress/data';
 import { STORE_NAME } from '../../data/constants';
 import { NewfoldRuntime } from '@newfold/wp-module-runtime';
+import getFontOptimizationText from './getFontOptimizationText';
 
 const FontOptimization = () => {
 	const [ settings, setSettings ] = useState( null );
@@ -17,6 +18,20 @@ const FontOptimization = () => {
 
 	const { pushNotification } = useDispatch( STORE_NAME );
 	const apiUrl = NewfoldRuntime.createApiUrl( '/wp/v2/settings' );
+		const {
+		fontOptimizationTitle,
+		fontOptimizationDescription,
+		fontOptimizationLabel,
+		fontOptimizationToggleDescription,
+		fontOptimizationUpsellText,
+		fontOptimizationUpsellLink,
+		fontOptimizationLoading,
+		fontOptimizationError,
+		fontOptimizationUpdatedTitle,
+		fontOptimizationUpdatedDescription,
+		fontOptimizationErrorTitle,
+		fontOptimizationErrorDescription,
+	} = getFontOptimizationText();
 
 	const fetchSettings = async () => {
 		setIsLoading( true );
@@ -42,16 +57,16 @@ const FontOptimization = () => {
 			} );
 			setSettings( newSettings );
 			pushNotification( 'font-opt-updated', {
-				title: 'Fonts optimization updated',
-				description: 'Font optimization setting saved successfully.',
+				title: fontOptimizationUpdatedTitle,
+				description: fontOptimizationUpdatedDescription,
 				variant: 'success',
 				autoDismiss: 5000,
 			} );
 		} catch {
 			setIsError( true );
 			pushNotification( 'font-opt-error', {
-				title: 'Update failed',
-				description: 'Could not save font optimization setting.',
+				title: fontOptimizationErrorTitle,
+				description: fontOptimizationErrorDescription,
 				variant: 'error',
 				autoDismiss: 8000,
 			} );
@@ -74,9 +89,10 @@ const FontOptimization = () => {
 		fetchSettings();
 	}, [] );
 
-	if ( isLoading ) return <p>Loading font optimization settings…</p>;
+	if ( isLoading ) return <p>{ fontOptimizationLoading }</p>;
 	if ( isError )
-		return <Alert variant="error">Error loading settings.</Alert>;
+		return <Alert variant="error">{ fontOptimizationError }</Alert>;
+
 	if ( ! settings ) return null;
 
 	const isEnabled = settings?.cloudflare?.fonts || false;
@@ -85,26 +101,26 @@ const FontOptimization = () => {
 
 	return (
 		<Container.SettingsField
-			title="Font Optimization"
-			description="Improve load times by replacing Google Fonts with optimized local versions."
+			title={ fontOptimizationTitle }
+			description={ fontOptimizationDescription }
 		>
 			{ hasCapability ? (
 				<ToggleField
 					id="cloudflare-fonts"
-					label="Optimize Fonts via Cloudflare"
-					description="Replaces Google Fonts with faster, privacy-friendly versions served locally."
+					label={ fontOptimizationLabel }
+					description={ fontOptimizationToggleDescription }
 					checked={ isEnabled }
 					onChange={ () => handleToggle( ! isEnabled ) }
 				/>
 			) : (
 				<FeatureUpsell
-					cardText="Upgrade to enable font optimization using Cloudflare."
-					cardLink="https://www.bluehost.com"
+					cardText={ fontOptimizationUpsellText }
+					cardLink={ fontOptimizationUpsellLink }
 				>
 					<ToggleField
 						id="cloudflare-fonts"
-						label="Optimize Fonts via Cloudflare"
-						description="Replaces Google Fonts with faster, privacy-friendly versions served locally."
+						label={ fontOptimizationLabel }
+						description={ fontOptimizationToggleDescription }
 						checked={ false }
 						disabled
 					/>

src/sections/ImageOptimization/getImageOptimizationText.js

@@ -107,6 +107,31 @@ const getImageOptimizationText = () => ( {
 		'Something went wrong while updating the settings. Please try again.',
 		'wp-module-performance'
 	),
+	imageOptimizationPolishLabel: __(
+	'Optimize Images via Cloudflare',
+	'wp-module-performance'
+),
+imageOptimizationPolishDescription: __(
+	"Enables Cloudflare's image compression to reduce load times and bandwidth usage.",
+	'wp-module-performance'
+),
+imageOptimizationMirageLabel: __(
+	'Improve Image Loading on Slow Connections',
+	'wp-module-performance'
+),
+imageOptimizationMirageDescription: __(
+	"Cloudflare Mirage accelerates image loading for mobile and slow networks.",
+	'wp-module-performance'
+),
+imageOptimizationUpsellText: __(
+	'Get advanced image optimization features with Cloudflare Polish & Mirage.',
+	'wp-module-performance'
+),
+imageOptimizationUpsellLink: __(
+	'https://www.bluehost.com',
+	'wp-module-performance'
+),
+
 } );
 
 export default getImageOptimizationText;

src/sections/ImageOptimization/index.js

@@ -39,6 +39,12 @@ const ImageOptimization = () => {
 		imageOptimizationUpdatedDescription,
 		imageOptimizationUpdateErrorTitle,
 		imageOptimizationGenericErrorMessage,
+		imageOptimizationUpsellText,
+		imageOptimizationUpsellLink,
+		imageOptimizationPolishLabel,
+		imageOptimizationPolishDescription,
+		imageOptimizationMirageLabel,
+		imageOptimizationMirageDescription,
 	} = getImageOptimizationText();
 
 	const [ settings, setSettings ] = useState( null );
@@ -340,20 +346,28 @@ const ImageOptimization = () => {
 							) && (
 								<div>
 									<FeatureUpsell
-										cardText="Get advanced image optimization features with Cloudflare Polish & Mirage."
-										cardLink="https://www.bluehost.com"
+										cardText={ imageOptimizationUpsellText }
+										cardLink={ imageOptimizationUpsellLink }
 									>
 										<ToggleField
 											id="cloudflare-polish"
-											label="Optimize Images via Cloudflare"
-											description="Enables Cloudflare's image compression to reduce load times and bandwidth usage."
+											label={
+												imageOptimizationPolishLabel
+											}
+											description={
+												imageOptimizationPolishDescription
+											}
 											checked={ false }
 											disabled
 										/>{ ' ' }
 										<ToggleField
 											id="cloudflare-mirage"
-											label="Improve Image Loading on Slow Connections"
-											description="Cloudflare Mirage accelerates image loading for mobile and slow networks."
+											label={
+												imageOptimizationMirageLabel
+											}
+											description={
+												imageOptimizationMirageDescription
+											}
 											checked={ false }
 											disabled
 										/>{ ' ' }
@@ -365,8 +379,10 @@ const ImageOptimization = () => {
 						) && (
 							<ToggleField
 								id="cloudflare-polish"
-								label="Optimize Images via Cloudflare"
-								description="Enables Cloudflare's image compression to reduce load times and bandwidth usage."
+								label={ imageOptimizationPolishLabel }
+								description={
+									imageOptimizationPolishDescription
+								}
 								checked={ polish }
 								onChange={ () =>
 									handleToggle( 'cloudflarePolish', ! polish )
@@ -378,8 +394,10 @@ const ImageOptimization = () => {
 						) && (
 							<ToggleField
 								id="cloudflare-mirage"
-								label="Improve Image Loading on Slow Connections"
-								description="Cloudflare Mirage accelerates image loading for mobile and slow networks."
+								label={ imageOptimizationMirageLabel }
+								description={
+									imageOptimizationMirageDescription
+								}
 								checked={ mirage }
 								onChange={ () =>
 									handleToggle( 'cloudflareMirage', ! mirage )