Newsletter Sub Importer: update translation calls (#100592)

* Update translation calls * Keep old translation pattern so current translations are picked up
Automattic · Feb 27, 2025 · 505f96c · 505f96c
1 parent 6659e01
commit 505f96c
Showing 1 changed file with 33 additions and 30 deletions.
diff --git a/client/my-sites/importer/newsletter/subscribers/step-initial.tsx b/client/my-sites/importer/newsletter/subscribers/step-initial.tsx
@@ -5,8 +5,7 @@ import { Button } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { createInterpolateElement } from '@wordpress/element';
 import { external } from '@wordpress/icons';
-import { useI18n } from '@wordpress/react-i18n';
-import i18n from 'i18n-calypso';
+import i18n, { useTranslate } from 'i18n-calypso';
 import { useEffect, useRef } from 'react';
 import exportSubstackSubscribersImg from 'calypso/assets/images/importer/export-substack-subscribers.png';
 import InlineSupportLink from 'calypso/components/inline-support-link';
@@ -23,7 +22,7 @@ export default function StepInitial( {
 	engine,
 	setAutoFetchData,
 }: SubscribersStepProps ) {
-	const { __ } = useI18n();
+	const translate = useTranslate();
 	const { importSelector } = useSelect( ( select ) => {
 		const subscriber = select( Subscriber.store );
 		return {
@@ -41,37 +40,41 @@ export default function StepInitial( {
 
 	return (
 		<Card>
-			<h2>{ __( 'Step 1: Export your subscribers from Substack' ) }</h2>
+			<h2>{ translate( 'Step 1: Export your subscribers from Substack' ) }</h2>
 			<p>
-				{ createInterpolateElement(
-					// @ts-expect-error - fixMe method is not typed in the package. Once types are added upstream, remove this.
-					i18n.fixMe( {
-						text: `Generate a CSV of your Substack subscribers. In Substack, go to Subscribers, click Export under "All subscribers," then upload the CSV in the next step. On the free plan, you can import up to 100 subscribers.`,
-						newCopy: __(
-							`Generate a CSV of your Substack subscribers. In Substack, go to <strong>Subscribers</strong>, click <strong>Export</strong> under "All subscribers," then upload the CSV in the next step. On the free plan, <supportLink>you can import up to 100 subscribers.</supportLink>`
-						),
-						oldCopy: __(
+				{ i18n.fixMe( {
+					text: `Generate a CSV of your Substack subscribers. In Substack, go to Subscribers, click Export under "All subscribers," then upload the CSV in the next step. On the free plan, you can import up to 100 subscribers.`,
+					newCopy: translate(
+						`Generate a CSV of your Substack subscribers. In Substack, go to {{strong}}Subscribers{{/strong}}, click {{strong}}Export{{/strong}} under "All subscribers," then upload the CSV in the next step. On the free plan, {{supportLink}}you can import up to 100 subscribers.{{/supportLink}}`,
+						{
+							components: {
+								strong: <strong />,
+								supportLink: (
+									<InlineSupportLink
+										noWrap={ false }
+										showIcon={ false }
+										supportLink={ localizeUrl(
+											'https://wordpress.com/support/import-subscribers-to-a-newsletter/#troubleshooting-subscriber-imports'
+										) }
+										supportPostId={ 220199 }
+									/>
+								),
+							},
+						}
+					),
+					oldCopy: createInterpolateElement(
+						translate(
 							`Generate a CSV file of all your Substack subscribers. On Substack, go to the <strong>Subscribers</strong> tab and click the <strong>Export</strong> button you’ll find on top of the table. Then, upload the downloaded CSV in the next step.`
 						),
-					} ),
-					{
-						strong: <strong />,
-						supportLink: (
-							<InlineSupportLink
-								noWrap={ false }
-								showIcon={ false }
-								supportLink={ localizeUrl(
-									'https://wordpress.com/support/import-subscribers-to-a-newsletter/#troubleshooting-subscriber-imports'
-								) }
-								supportPostId={ 220199 }
-							/>
-						),
-					}
-				) }
+						{
+							strong: <strong />,
+						}
+					),
+				} ) }
 			</p>
 			<img
 				src={ exportSubstackSubscribersImg }
-				alt={ __( 'Export Substack subscribers' ) }
+				alt={ translate( 'Export Substack subscribers' ) }
 				className="export-subscribers"
 			/>
 			<Button
@@ -82,10 +85,10 @@ export default function StepInitial( {
 				iconPosition="right"
 				variant="primary"
 			>
-				{ __( 'Open Substack subscribers' ) }
+				{ translate( 'Open Substack subscribers' ) }
 			</Button>
 			<hr />
-			<h2>{ __( 'Step 2: Import your subscribers' ) }</h2>
+			<h2>{ translate( 'Step 2: Import your subscribers' ) }</h2>
 			{ selectedSite.ID && (
 				<SubscriberUploadForm
 					siteId={ selectedSite.ID }