Focused Launch: fix i18n by extracting text outside of ternary operat…

…or (#49812)

* Focused Launch: extract title/subtitle text outside of ternary operator

* Focused Launch: extract popular label text outside of ternary operator

* Focused Launch: extract free plan label text outside of ternary operator

* Focused Launch: refactor translator comment for string wrapped in sprintf

* Domain picker: extract suggestion item text outside of ternary operators

* Domain picker: extract select button text outside of ternary operator

* Localize /help URL

* Step by Step flow: extract translated text outside of ternary operator

* Plans Grid: extract translated text outside of ternary operators

* Composite checkout: extract payment method text outside of ternary operator

* Plans feature list: extract text outside of ternary operator

* Domain picker: extract categories label outside of nullish coalesce operator

* Plans grid details: extract text outside of ternary operator

* Plans grid accordion: extract text outside of ternary operator

* Plans grid accordion: extract badge label outside of ternary operator

* Focused launch success: extract subtitle text outside of ternary operator

* Focused launch success: extract copy button label outside of ternary operator

* Undo localized /help URL, as the contents are already localized

apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/launch-steps/final-step/index.tsx

@@ -127,15 +127,18 @@ const FinalStep: React.FunctionComponent< LaunchStepProps > = ( { onNextStep, on
 		</div>
 	);
 
+	const planSummaryCostLabelAnnually = __( 'billed annually', 'full-site-editing' );
+	const planSummaryCostLabelMonthly = __( 'per month, billed monthly', 'full-site-editing' );
+
 	const planSummary = (
 		<div className="nux-launch__summary-item">
 			{ plan && planProduct && ! plan.isFree ? (
 				<>
 					<p className="nux-launch__summary-item__plan-name">WordPress.com { plan.title }</p>
 					{ __( 'Plan subscription', 'full-site-editing' ) }: { planProduct.price }{ ' ' }
 					{ planProduct.billingPeriod === 'ANNUALLY'
-						? __( 'billed annually', 'full-site-editing' )
-						: __( 'per month, billed monthly', 'full-site-editing' ) }
+						? planSummaryCostLabelAnnually
+						: planSummaryCostLabelMonthly }
 				</>
 			) : (
 				<>

packages/composite-checkout/src/components/checkout-payment-methods.tsx

@@ -128,7 +128,11 @@ export function CheckoutPaymentMethodsTitle(): JSX.Element {
 	const { __ } = useI18n();
 	const isActive = useIsStepActive();
 	const isComplete = useIsStepComplete();
-	return <>{ ! isActive && isComplete ? __( 'Payment method' ) : __( 'Pick a payment method' ) }</>;
+
+	const paymentMethodLabelActive = __( 'Pick a payment method' );
+	const paymentMethodLabelInactive = __( 'Payment method' );
+
+	return <>{ ! isActive && isComplete ? paymentMethodLabelInactive : paymentMethodLabelActive }</>;
 }
 
 function PaymentMethod( {

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

@@ -37,13 +37,15 @@ const DomainPickerCategories: React.FunctionComponent< Props > = ( { onSelect, s
 		select( DOMAIN_SUGGESTIONS_STORE ).getCategories()
 	);
 
+	const allCategoriesLabel = __( 'All Categories', __i18n_text_domain__ );
+
 	return (
 		<div className={ classNames( 'domain-categories', { 'is-open': isOpen } ) }>
 			<Button
 				className="domain-categories__dropdown-button"
 				onClick={ () => setIsOpen( ! isOpen ) }
 			>
-				<span>{ ! selected ? __( 'All Categories', __i18n_text_domain__ ) : selected }</span>
+				<span>{ selected ?? allCategoriesLabel }</span>
 				<Icon icon={ chevronDown } size={ 16 } />
 			</Button>
 			<ul className="domain-categories__item-group">

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

@@ -76,34 +76,40 @@ const DomainPickerSuggestionItem: React.FC< Props > = ( {
 	const [ previousDomain, setPreviousDomain ] = React.useState< string | undefined >();
 	const [ previousRailcarId, setPreviousRailcarId ] = React.useState< string | undefined >();
 
+	const freeDomainLabelDefault = __( 'Default', __i18n_text_domain__ );
+	const freeDomainLabelFree = __( 'Free', __i18n_text_domain__ );
+
+	const firstYearLabel = __( 'Included in paid plans', __i18n_text_domain__ );
+	const firstYearLabelAlt = __( 'Included with annual plans', __i18n_text_domain__ );
+	// translators: text in between the <strong></strong> marks is styled as bold text
+	const firstYearLabelFormatted = __(
+		'<strong>First year included</strong> in paid plans',
+		__i18n_text_domain__
+	);
+
 	const freeDomainLabel =
-		type === ITEM_TYPE_INDIVIDUAL_ITEM
-			? __( 'Default', __i18n_text_domain__ )
-			: __( 'Free', __i18n_text_domain__ );
+		type === ITEM_TYPE_INDIVIDUAL_ITEM ? freeDomainLabelDefault : freeDomainLabelFree;
 
 	const firstYearIncludedInPaidLabel = isMobile
-		? __( 'Included in paid plans', __i18n_text_domain__ )
-		: createInterpolateElement(
-				__( '<strong>First year included</strong> in paid plans', __i18n_text_domain__ ),
-				{
-					strong: <strong />,
-				}
-		  );
+		? firstYearLabel
+		: createInterpolateElement( firstYearLabelFormatted, {
+				strong: <strong />,
+		  } );
 
 	/**
 	 *  IIFE executes immediately after creation, hence it returns the translated values immediately.
 	 * The great advantage is that:
 	 * 1. We don't have to execute it during rendering.
 	 * 2. We don't have to use nested ternaries (which is not allowed by the linter).
-	 * 3. It improves the readibility of our code
+	 * 3. It improves the readability of our code
 	 */
 	const paidIncludedDomainLabel = ( () => {
 		if ( type === ITEM_TYPE_INDIVIDUAL_ITEM ) {
 			return firstYearIncludedInPaidLabel;
 		} else if ( isMobile ) {
-			return __( 'Free', __i18n_text_domain__ );
+			return freeDomainLabelFree;
 		}
-		return __( 'Included with annual plans', __i18n_text_domain__ );
+		return firstYearLabelAlt;
 	} )();
 
 	React.useEffect( () => {
@@ -127,6 +133,9 @@ const DomainPickerSuggestionItem: React.FC< Props > = ( {
 		onSelect( domain );
 	};
 
+	const selectButtonLabelSelected = __( 'Selected', __i18n_text_domain__ );
+	const selectButtonLabelUnselected = __( 'Select', __i18n_text_domain__ );
+
 	return (
 		<WrappingComponent
 			ref={ buttonRef }
@@ -250,8 +259,8 @@ const DomainPickerSuggestionItem: React.FC< Props > = ( {
 							onClick={ onDomainSelect }
 						>
 							{ selected && ! isUnavailable
-								? __( 'Selected', __i18n_text_domain__ )
-								: __( 'Select', __i18n_text_domain__ ) }
+								? selectButtonLabelSelected
+								: selectButtonLabelUnselected }
 						</Button>
 					</div>
 				) ) }

packages/launch/src/focused-launch/success/index.tsx

@@ -60,17 +60,21 @@ const Success: React.FunctionComponent = () => {
 		redirectTo( `/home/${ siteSubdomain?.domain }` );
 	};
 
+	const subtitleTextLaunching = __( 'Your site will be live shortly.', __i18n_text_domain__ );
+	const subtitleTextLaunched = __(
+		"Congratulations, your website is now live. We're excited to watch you grow with WordPress.",
+		__i18n_text_domain__
+	);
+
+	const copyButtonLabelIdle = __( 'Copy Link', __i18n_text_domain__ );
+	const copyButtonLabelActivated = __( 'Copied!', __i18n_text_domain__ );
+
 	return (
 		<div className="focused-launch-container focused-launch-success__wrapper">
 			<Confetti className="focused-launch-success__confetti" />
 			<Title tagName="h2">{ __( 'Hooray!', __i18n_text_domain__ ) }</Title>
 			<SubTitle tagName="h3">
-				{ isSiteLaunching
-					? __( 'Your site will be live shortly.', '__i18n_text_domain__' )
-					: __(
-							"Congratulations, your website is now live. We're excited to watch you grow with WordPress.",
-							__i18n_text_domain__
-					  ) }
+				{ isSiteLaunching ? subtitleTextLaunching : subtitleTextLaunched }
 			</SubTitle>
 			{ ! isSiteLaunching && (
 				<>
@@ -92,9 +96,7 @@ const Success: React.FunctionComponent = () => {
 							onFinishCopy={ () => setHasCopied( false ) }
 							className="focused-launch-success__url-copy-button"
 						>
-							{ hasCopied
-								? __( 'Copied!', __i18n_text_domain__ )
-								: __( 'Copy Link', __i18n_text_domain__ ) }
+							{ hasCopied ? copyButtonLabelActivated : copyButtonLabelIdle }
 						</ClipboardButton>
 					</div>
 

packages/launch/src/focused-launch/summary/index.tsx

@@ -335,6 +335,14 @@ const PlanStep: React.FunctionComponent< PlanStepProps > = ( {
 		[ allAvailablePlans, billingPeriod ]
 	);
 
+	const popularLabel = __( 'Popular', __i18n_text_domain__ );
+
+	const freePlanLabel = __( 'Free', __i18n_text_domain__ );
+	const freePlanLabelNotAvailable = __(
+		'Not available with your domain selection',
+		__i18n_text_domain__
+	);
+
 	return (
 		<SummaryStep
 			highlighted={ !! highlighted }
@@ -370,10 +378,11 @@ const PlanStep: React.FunctionComponent< PlanStepProps > = ( {
 						<div>
 							<FocusedLaunchSummaryItem readOnly={ true }>
 								<LeadingContentSide
-									label={
+									label={ sprintf(
 										/* translators: Purchased plan label where %s is the WordPress.com plan name (eg: Personal, Premium, Business) */
-										sprintf( __( '%s Plan', __i18n_text_domain__ ), sitePlan?.product_name_short )
-									}
+										__( '%s Plan', __i18n_text_domain__ ),
+										sitePlan?.product_name_short
+									) }
 								/>
 								<TrailingContentSide nodeType="PRICE">
 									<Icon icon={ check } size={ 18 } /> { __( 'Purchased', __i18n_text_domain__ ) }
@@ -417,19 +426,20 @@ const PlanStep: React.FunctionComponent< PlanStepProps > = ( {
 										readOnly={ plan.isFree && ( hasPaidDomain || selectedPaidDomain ) }
 									>
 										<LeadingContentSide
-											label={
+											label={ sprintf(
 												/* translators: %s is WordPress.com plan name (eg: Premium Plan) */
-												sprintf( __( '%s Plan', __i18n_text_domain__ ), plan.title ?? '' )
-											}
-											badgeText={ plan.isPopular ? __( 'Popular', __i18n_text_domain__ ) : '' }
+												__( '%s Plan', __i18n_text_domain__ ),
+												plan.title ?? ''
+											) }
+											badgeText={ plan.isPopular ? popularLabel : '' }
 										/>
 										{ plan.isFree ? (
 											<TrailingContentSide
 												nodeType={ hasPaidDomain || selectedPaidDomain ? 'WARNING' : 'PRICE' }
 											>
 												{ hasPaidDomain || selectedPaidDomain
-													? __( 'Not available with your domain selection', __i18n_text_domain__ )
-													: __( 'Free', __i18n_text_domain__ ) }
+													? freePlanLabelNotAvailable
+													: freePlanLabel }
 											</TrailingContentSide>
 										) : (
 											<TrailingContentSide nodeType="PRICE">
@@ -620,7 +630,7 @@ const Summary: React.FunctionComponent = () => {
 	// Disabled steps are not interactive (e.g. user has already selected domain/plan)
 	// Active steps require user interaction
 	// Using this arrays allows to easily sort the steps correctly in both
-	// groups, and allows the actve steps to always show the correct step index.
+	// groups, and allows the active steps to always show the correct step index.
 	const disabledSteps: StepIndexRenderFunction[] = [];
 	const activeSteps: StepIndexRenderFunction[] = [];
 	isSiteTitleStepVisible && activeSteps.push( renderSiteTitleStep );
@@ -636,24 +646,24 @@ const Summary: React.FunctionComponent = () => {
 	const isReadyToLaunch =
 		title && ( hasPaidDomain || hasSelectedDomain ) && ( hasPaidPlan || selectedPlanProductId );
 
+	const titleReady = __( "You're ready to launch", __i18n_text_domain__ );
+	const titleInProgress = __( "You're almost there", __i18n_text_domain__ );
+
+	const subtitleReady = __(
+		"You're good to go! Launch your site and share your site address.",
+		__i18n_text_domain__
+	);
+	const subtitleInProgress = __(
+		'Prepare for launch! Confirm a few final things before you take it live.',
+		__i18n_text_domain__
+	);
+
 	return (
 		<div className="focused-launch-container">
 			<div className="focused-launch-summary__section">
-				<Title tagName="h2">
-					{ hasPaidDomain && hasPaidPlan
-						? __( "You're ready to launch", __i18n_text_domain__ )
-						: __( "You're almost there", __i18n_text_domain__ ) }
-				</Title>
+				<Title tagName="h2">{ hasPaidDomain && hasPaidPlan ? titleReady : titleInProgress }</Title>
 				<SubTitle tagName="p" className="focused-launch-summary__caption">
-					{ hasPaidDomain && hasPaidPlan
-						? __(
-								"You're good to go! Launch your site and share your site address.",
-								__i18n_text_domain__
-						  )
-						: __(
-								'Prepare for launch! Confirm a few final things before you take it live.',
-								__i18n_text_domain__
-						  ) }
+					{ hasPaidDomain && hasPaidPlan ? subtitleReady : subtitleInProgress }
 				</SubTitle>
 			</div>
 			{ disabledSteps.map( ( disabledStepRenderer, disabledStepIndex ) =>

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

@@ -75,6 +75,9 @@ const PlanAccordionItem: React.FunctionComponent< Props > = ( {
 		! disabledLabel && onToggle?.( slug, ! isOpen );
 	};
 
+	const planItemPriceLabelAnnually = __( 'billed annually', __i18n_text_domain__ );
+	const planItemPriceLabelMonthly = __( 'per month, billed monthly', __i18n_text_domain__ );
+
 	return (
 		<div
 			className={ classNames( 'plans-accordion-item', {
@@ -123,8 +126,8 @@ const PlanAccordionItem: React.FunctionComponent< Props > = ( {
 
 								{ ! isFree &&
 									( billingPeriod === 'ANNUALLY'
-										? __( 'billed annually', __i18n_text_domain__ )
-										: __( 'per month, billed monthly', __i18n_text_domain__ ) ) }
+										? planItemPriceLabelAnnually
+										: planItemPriceLabelMonthly ) }
 							</div>
 							{ ! isFree && (
 								<div

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

@@ -78,9 +78,8 @@ const PlansAccordion: React.FunctionComponent< Props > = ( {
 
 	const primaryPlan = recommendedPlan || popularPlan;
 
-	const badge = recommendedPlan
-		? __( 'Recommended for you', __i18n_text_domain__ )
-		: __( 'Popular', __i18n_text_domain__ );
+	const badgeTextRecommended = __( 'Recommended for you', __i18n_text_domain__ );
+	const badgeTextPopular = __( 'Popular', __i18n_text_domain__ );
 
 	// Other plans
 	const otherPlans = supportedPlans.filter(
@@ -102,6 +101,9 @@ const PlansAccordion: React.FunctionComponent< Props > = ( {
 		);
 	};
 
+	const plansToggleExpanded = __( 'Collapse all plans', __i18n_text_domain__ );
+	const plansToggleCollapsed = __( 'Show all plans', __i18n_text_domain__ );
+
 	return (
 		<div className="plans-accordion">
 			<div className="plans-accordion__plan-item-group">
@@ -129,7 +131,7 @@ const PlansAccordion: React.FunctionComponent< Props > = ( {
 								features={ primaryPlan.features ?? [] }
 								billingPeriod={ billingPeriod }
 								domain={ currentDomain }
-								badge={ badge }
+								badge={ recommendedPlan ? badgeTextRecommended : badgeTextPopular }
 								isFree={ primaryPlan.isFree }
 								isOpen
 								isPrimary
@@ -148,9 +150,7 @@ const PlansAccordion: React.FunctionComponent< Props > = ( {
 
 			<div className="plans-accordion__actions">
 				<Button className="plans-accordion__toggle-all-button" onClick={ handleToggleAll } isLink>
-					{ allPlansOpened
-						? __( 'Collapse all plans', __i18n_text_domain__ )
-						: __( 'Show all plans', __i18n_text_domain__ ) }
+					{ allPlansOpened ? plansToggleExpanded : plansToggleCollapsed }
 				</Button>
 			</div>
 

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

@@ -64,6 +64,9 @@ const PlansDetails: React.FunctionComponent< Props > = ( { onSelect, locale, bil
 
 	const monthlyBillingLabel = __( 'Monthly subscription', __i18n_text_domain__ );
 
+	const annualNudgeTextAnnually = __( 'Included with annual plans', __i18n_text_domain__ );
+	const annualNudgeTextMonthly = __( 'Only included with annual plans', __i18n_text_domain__ );
+
 	return (
 		<div className="plans-details">
 			<table className="plans-details__table">
@@ -123,8 +126,8 @@ const PlansDetails: React.FunctionComponent< Props > = ( { onSelect, locale, bil
 												className="plans-details__feature-annual-nudge"
 												aria-label={
 													billingPeriod === 'ANNUALLY'
-														? __( 'Included with annual plans', __i18n_text_domain__ )
-														: __( 'Only included with annual plans', __i18n_text_domain__ )
+														? annualNudgeTextAnnually
+														: annualNudgeTextMonthly
 												}
 											>
 												{ __( 'Included with annual plans', __i18n_text_domain__ ) }

packages/plans-grid/src/plans-feature-list/index.tsx

@@ -42,18 +42,19 @@ const DefaultFeatureListItemContentWrapper: React.FunctionComponent< FeatureList
 const FeatureAnnualDiscountNudge: React.FunctionComponent< {
 	billingPeriod: Plans.PlanBillingPeriod;
 	__: typeof import('@wordpress/i18n').__;
-} > = ( { billingPeriod, __ } ) => (
-	<span
-		className="plans-feature-list__item-annual-nudge"
-		aria-label={
-			billingPeriod === 'ANNUALLY'
-				? __( 'Included with annual plans', __i18n_text_domain__ )
-				: __( 'Only included with annual plans', __i18n_text_domain__ )
-		}
-	>
-		{ __( 'Included with annual plans', __i18n_text_domain__ ) }
-	</span>
-);
+} > = ( { billingPeriod, __ } ) => {
+	const annualNudgeTextAnnually = __( 'Included with annual plans', __i18n_text_domain__ );
+	const annualNudgeTextMonthly = __( 'Only included with annual plans', __i18n_text_domain__ );
+
+	return (
+		<span
+			className="plans-feature-list__item-annual-nudge"
+			aria-label={ billingPeriod === 'ANNUALLY' ? annualNudgeTextAnnually : annualNudgeTextMonthly }
+		>
+			{ annualNudgeTextAnnually }
+		</span>
+	);
+};
 
 function computeDomainFeatureItem(
 	isFreePlan: boolean,