Add text domain to copy in domain-picker and plans-grid packages

apps/editing-toolkit/package.json

@@ -147,6 +147,7 @@
 		"@types/wordpress__plugins": "^2.3.6",
 		"@babel/preset-typescript": "^7.10.4",
 		"@wordpress/eslint-plugin": "^7.1.0",
-		"babel-jest": "^26.3.0"
+		"babel-jest": "^26.3.0",
+		"webpack": "^4.44.1"
 	}
 }

apps/editing-toolkit/webpack.config.js

@@ -10,6 +10,7 @@ const _ = require( 'lodash' );
 const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );
 const getBaseWebpackConfig = require( '@automattic/calypso-build/webpack.config.js' );
 const path = require( 'path' );
+const webpack = require( 'webpack' );
 
 const FSE_MODULE_PREFIX = 'a8c-fse';
 
@@ -74,6 +75,9 @@ function getWebpackConfig( env = {}, argv = {} ) {
 			...webpackConfig.plugins.filter(
 				( plugin ) => plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'
 			),
+			new webpack.DefinePlugin( {
+				__i18n_text_domain__: JSON.stringify( 'full-site-editing' ),
+			} ),
 			new DependencyExtractionWebpackPlugin( {
 				injectPolyfill: true,
 				requestToExternal( request ) {

client/webpack.config.js

@@ -281,6 +281,7 @@ const webpackConfig = {
 			'process.env.FORCE_REDUCED_MOTION': JSON.stringify(
 				!! process.env.FORCE_REDUCED_MOTION || false
 			),
+			__i18n_text_domain__: JSON.stringify( 'default' ),
 			global: 'window',
 		} ),
 		new webpack.NormalModuleReplacementPlugin( /^path$/, 'path-browserify' ),

packages/domain-picker/jest.config.js

@@ -3,4 +3,7 @@ module.exports = {
 	rootDir: __dirname,
 	testEnvironment: 'jsdom',
 	cacheDirectory: '<rootDir>/../../.cache/jest',
+	globals: {
+		__i18n_text_domain__: 'default',
+	},
 };

packages/domain-picker/src/domain-categories/index.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { Button } from '@wordpress/components';
 import { Icon, chevronDown } from '@wordpress/icons';
 import classNames from 'classnames';
-import { useI18n } from '@automattic/react-i18n';
+import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
@@ -25,8 +25,6 @@ export interface Props {
 }
 
 const DomainPickerCategories: React.FunctionComponent< Props > = ( { onSelect, selected } ) => {
-	const { __ } = useI18n();
-
 	const [ isOpen, setIsOpen ] = useState( false );
 
 	const handleSelect = ( slug?: string ) => {
@@ -44,7 +42,7 @@ const DomainPickerCategories: React.FunctionComponent< Props > = ( { onSelect, s
 				className="domain-categories__dropdown-button"
 				onClick={ () => setIsOpen( ! isOpen ) }
 			>
-				<span>{ ! selected ? __( 'All Categories' ) : selected }</span>
+				<span>{ ! selected ? __( 'All Categories', __i18n_text_domain__ ) : selected }</span>
 				<Icon icon={ chevronDown } size={ 16 } />
 			</Button>
 			<ul className="domain-categories__item-group">
@@ -56,7 +54,7 @@ const DomainPickerCategories: React.FunctionComponent< Props > = ( { onSelect, s
 					<Button onClick={ () => handleSelect() }>
 						{
 							/* translators: Domain categories filtering. Option to disable the filter and view all categories. */
-							__( 'View all' )
+							__( 'View all', __i18n_text_domain__ )
 						}
 					</Button>
 				</li>

packages/domain-picker/src/domain-name-explanation/index.tsx

@@ -2,11 +2,9 @@
  * External dependencies
  */
 import React, { FunctionComponent } from 'react';
-import { useI18n } from '@automattic/react-i18n';
+import { __ } from '@wordpress/i18n';
 
 export const DomainNameExplanationImage: FunctionComponent = () => {
-	const { __ } = useI18n();
-
 	return (
 		<svg
 			version="1.1"
@@ -28,7 +26,7 @@ export const DomainNameExplanationImage: FunctionComponent = () => {
 			<text x="133" y="26" fill="#515151">
 				{
 					/* translators: An example domain name. Used to describe what a domain name is. */
-					__( 'example.com' )
+					__( 'example.com', __i18n_text_domain__ )
 				}
 			</text>
 		</svg>

packages/domain-picker/src/domain-picker/index.tsx

@@ -10,6 +10,7 @@ import { getNewRailcarId, recordTrainTracksRender } from '@automattic/calypso-an
 import { useI18n } from '@automattic/react-i18n';
 import type { DomainSuggestions } from '@automattic/data-stores';
 import { DataStatus } from '@automattic/data-stores/src/domain-suggestions/constants';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -105,8 +106,7 @@ const DomainPicker: FunctionComponent< Props > = ( {
 	existingSubdomain,
 	segregateFreeAndPaid = false,
 } ) => {
-	const { __ } = useI18n();
-	const label = __( 'Search for a domain' );
+	const label = __( 'Search for a domain', __i18n_text_domain__ );
 
 	const [ isExpanded, setIsExpanded ] = useState( false );
 
@@ -208,7 +208,10 @@ const DomainPicker: FunctionComponent< Props > = ( {
 			{ showErrorMessage && (
 				<div className="domain-picker__error">
 					<p className="domain-picker__error-message">
-						{ __( 'An error has occurred, please check your connection and retry.' ) }
+						{ __(
+							'An error has occurred, please check your connection and retry.',
+							__i18n_text_domain__
+						) }
 						{ domainSuggestionErrorMessage && ` ${ domainSuggestionErrorMessage }` }
 					</p>
 					<Button
@@ -230,7 +233,9 @@ const DomainPicker: FunctionComponent< Props > = ( {
 					<div className="domain-picker__suggestion-sections">
 						<>
 							{ segregateFreeAndPaid && (
-								<p className="domain-picker__suggestion-group-label">{ __( 'Keep sub-domain' ) }</p>
+								<p className="domain-picker__suggestion-group-label">
+									{ __( 'Keep sub-domain', __i18n_text_domain__ ) }
+								</p>
 							) }
 							<ItemGrouper groupItems={ segregateFreeAndPaid }>
 								{ existingSubdomain && (
@@ -253,7 +258,7 @@ const DomainPicker: FunctionComponent< Props > = ( {
 							</ItemGrouper>
 							{ segregateFreeAndPaid && (
 								<p className="domain-picker__suggestion-group-label">
-									{ __( 'Professional domains' ) }
+									{ __( 'Professional domains', __i18n_text_domain__ ) }
 								</p>
 							) }
 							<ItemGrouper groupItems={ segregateFreeAndPaid }>
@@ -302,7 +307,7 @@ const DomainPicker: FunctionComponent< Props > = ( {
 							allDomainSuggestions?.length > quantity && (
 								<div className="domain-picker__show-more">
 									<Button onClick={ () => setIsExpanded( true ) } isLink>
-										{ __( 'View more results' ) }
+										{ __( 'View more results', __i18n_text_domain__ ) }
 									</Button>
 								</div>
 							) }
@@ -313,7 +318,8 @@ const DomainPicker: FunctionComponent< Props > = ( {
 				<div className="domain-picker__empty-state">
 					<p className="domain-picker__empty-state--text">
 						{ __(
-							'A domain name is the site address people type in their browser to visit your site.'
+							'A domain name is the site address people type in their browser to visit your site.',
+							__i18n_text_domain__
 						) }
 					</p>
 					<div>

packages/domain-picker/src/domain-picker/suggestion-item.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import React, { FunctionComponent, useEffect, useState } from 'react';
-import { useI18n } from '@automattic/react-i18n';
+import { __ } from '@wordpress/i18n';
 import { createInterpolateElement } from '@wordpress/element';
 import { Spinner } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
@@ -47,7 +47,6 @@ const DomainPickerSuggestionItem: FunctionComponent< Props > = ( {
 	onRender,
 	selected,
 } ) => {
-	const { __ } = useI18n();
 	const isMobile = useViewportMatch( 'small', '<' );
 
 	const dotPos = domain.indexOf( '.' );
@@ -119,7 +118,8 @@ const DomainPickerSuggestionItem: FunctionComponent< Props > = ( {
 						>
 							{ createInterpolateElement(
 								__(
-									'All domains ending with <tld /> require an SSL certificate to host a website. When you host this domain at WordPress.com an SSL certificate is included. <learn_more_link>Learn more</learn_more_link>'
+									'All domains ending with <tld /> require an SSL certificate to host a website. When you host this domain at WordPress.com an SSL certificate is included. <learn_more_link>Learn more</learn_more_link>',
+									__i18n_text_domain__
 								),
 								{
 									tld: <b>{ domainTld }</b>,
@@ -135,12 +135,17 @@ const DomainPickerSuggestionItem: FunctionComponent< Props > = ( {
 						</InfoTooltip>
 					) }
 					{ isRecommended && ! isUnavailable && (
-						<div className="domain-picker__badge is-recommended">{ __( 'Recommended' ) }</div>
+						<div className="domain-picker__badge is-recommended">
+							{ __( 'Recommended', __i18n_text_domain__ ) }
+						</div>
 					) }
 				</div>
 				{ isExistingSubdomain && (
 					<div className="domain-picker__change-subdomain-tip">
-						{ __( 'You can change your free subdomain later under Domain Settings.' ) }
+						{ __(
+							'You can change your free subdomain later under Domain Settings.',
+							__i18n_text_domain__
+						) }
 					</div>
 				) }
 			</div>
@@ -149,15 +154,18 @@ const DomainPickerSuggestionItem: FunctionComponent< Props > = ( {
 					'is-paid': ! isFree,
 				} ) }
 			>
-				{ isUnavailable && __( 'Unavailable' ) }
-				{ isFree && ! isUnavailable && __( 'Free' ) }
+				{ isUnavailable && __( 'Unavailable', __i18n_text_domain__ ) }
+				{ isFree && ! isUnavailable && __( 'Free', __i18n_text_domain__ ) }
 				{ ! isFree && ! isUnavailable && (
 					<>
-						<span className="domain-picker__price-inclusive"> { __( 'Included in plans' ) } </span>
+						<span className="domain-picker__price-inclusive">
+							{ /* Intentional whitespace to get the spacing around the text right */ }{ ' ' }
+							{ __( 'Included in plans', __i18n_text_domain__ ) }{ ' ' }
+						</span>
 						<span className="domain-picker__price-cost">
 							{
 								/* translators: %s is the price with currency. Eg: $15/year. */
-								sprintf( __( '%s/year' ), cost )
+								sprintf( __( '%s/year', __i18n_text_domain__ ), cost )
 							}
 						</span>
 					</>

packages/domain-picker/src/types.d.ts

@@ -0,0 +1 @@
+declare const __i18n_text_domain__: string;

packages/plans-grid/src/plans-accordion-item/index.tsx

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import classNames from 'classnames';
-import { useI18n } from '@automattic/react-i18n';
+import { __ } from '@wordpress/i18n';
 import { NextButton } from '@automattic/onboarding';
 import type { DomainSuggestions } from '@automattic/data-stores';
 
@@ -59,8 +59,6 @@ const PlanItem: React.FunctionComponent< Props > = ( {
 	onToggle,
 	disabledLabel,
 } ) => {
-	const { __ } = useI18n();
-
 	// show a nbps in price while loading to prevent a janky UI
 	const nbsp = '\u00A0\u00A0';
 
@@ -102,10 +100,19 @@ const PlanItem: React.FunctionComponent< Props > = ( {
 								} ) }
 							>
 								{ price || nbsp }
-								{ price && <span>{ __( '/mo' ) }</span> }
+								{ price && (
+									<span>
+										{
+											// translators: /mo is short for "per-month"
+											__( '/mo', __i18n_text_domain__ )
+										}
+									</span>
+								) }
 							</div>
 							<div className="plans-accordion-item__price-note">
-								{ isFree ? __( 'free forever' ) : __( 'billed annually' ) }
+								{ isFree
+									? __( 'free forever', __i18n_text_domain__ )
+									: __( 'billed annually', __i18n_text_domain__ ) }
 							</div>
 						</div>
 						<div className="plans-accordion-item__disabled-label">{ disabledLabel }</div>
@@ -119,7 +126,7 @@ const PlanItem: React.FunctionComponent< Props > = ( {
 								onSelect( slug );
 							} }
 						>
-							{ __( 'Select' ) }
+							{ __( 'Select', __i18n_text_domain__ ) }
 						</NextButton>
 					</div>
 					<PlansFeatureList

packages/plans-grid/src/plans-accordion/index.tsx

@@ -3,7 +3,7 @@
  */
 import React, { useState } from 'react';
 import { useSelect } from '@wordpress/data';
-import { useI18n } from '@automattic/react-i18n';
+import { __ } from '@wordpress/i18n';
 import type { DomainSuggestions, Plans, WPCOMFeatures } from '@automattic/data-stores';
 import { Button, SVG, Path } from '@wordpress/components';
 import { Icon } from '@wordpress/icons';
@@ -44,8 +44,6 @@ const PlansTable: React.FunctionComponent< Props > = ( {
 	currentDomain,
 	disabledPlans,
 } ) => {
-	const { __ } = useI18n();
-
 	const supportedPlans = useSelect( ( select ) => select( PLANS_STORE ).getSupportedPlans() );
 	const prices = useSelect( ( select ) => select( PLANS_STORE ).getPrices() );
 
@@ -59,7 +57,9 @@ const PlansTable: React.FunctionComponent< Props > = ( {
 		select( PLANS_STORE ).getPlanBySlug( recommendedPlanSlug )
 	);
 	const primaryPlan = recommendedPlan || popularPlan;
-	const badge = recommendedPlan ? __( 'Recommended for you' ) : __( 'Popular' );
+	const badge = recommendedPlan
+		? __( 'Recommended for you', __i18n_text_domain__ )
+		: __( 'Popular', __i18n_text_domain__ );
 
 	// Other plans
 	const otherPlans = supportedPlans.filter( ( plan ) => plan.storeSlug !== primaryPlan.storeSlug );
@@ -87,7 +87,12 @@ const PlansTable: React.FunctionComponent< Props > = ( {
 						{ recommendedPlan && (
 							<div className="plans-accordion__recommend-hint">
 								<Icon icon={ tip } size={ 16 } />
-								<span>{ __( 'Based on the features you selected.' ) }</span>
+								<span>
+									{
+										// translators: tooltip explaining why a particular plan has been recommended
+										__( 'Based on the features you selected.', __i18n_text_domain__ )
+									}
+								</span>
 							</div>
 						) }
 						<PlanItem
@@ -112,7 +117,9 @@ const PlansTable: React.FunctionComponent< Props > = ( {
 
 			<div className="plans-accordion__actions">
 				<Button className="plans-accordion__toggle-all-button" onClick={ handleToggleAll } isLink>
-					{ allPlansOpened ? __( 'Collapse all plans' ) : __( 'Show all plans' ) }
+					{ allPlansOpened
+						? __( 'Collapse all plans', __i18n_text_domain__ )
+						: __( 'Show all plans', __i18n_text_domain__ ) }
 				</Button>
 			</div>