Stats pricing grid: address review feedback from #113366

- Eligibility fails closed when the purchases fetch errors: FETCH_FAILED marks
  the store loaded with an empty list, which read as 'no plan' and would have
  shown the grid to a site that holds one. An error now means 'plan state
  unknown' and falls back to the dashboard.
- The price respects getCurrencyObject's symbolPosition, so locales that put
  the currency symbol after the amount (e.g. de-DE EUR) render correctly.
- The Terms of Service line wraps instead of truncating: dropped the jetpack
  component's nowrap/overflow-hidden, which cut off the disclosure in locales
  that run longer than English.
- Fixed the apostrophe in 'sync your site's data' (was U+2018, the opening
  quote) before the string goes out for translation.
- Dropped the redundant 'Included' labels on the three boolean differentiator
  rows so the mobile fallback names the feature instead of showing a bare
  'Included' with nothing identifying the row. Desktop rendering is unchanged
  (the default label is already 'Included', bolded via strong).

Author: kangzj

client/my-sites/stats/pricing-grid/hooks/use-eligibility.ts

@@ -1,4 +1,5 @@
 import { useSelector } from 'calypso/state';
+import { getPurchasesError } from 'calypso/state/purchases/selectors';
 import { getSiteOption } from 'calypso/state/sites/selectors';
 import useStatsPurchases from '../../hooks/use-stats-purchases';
 
@@ -16,6 +17,12 @@ const LAUNCH_DATE = Date.parse( '2026-08-07T00:00:00Z' );
 export default function useIsPricingGridEligible( siteId: number | null ) {
 	const { hasAnyPlan, isLoading: isLoadingPurchases } = useStatsPurchases( siteId );
 
+	// A failed purchases fetch reads as "loaded, no plan" upstream (FETCH_FAILED marks
+	// the store loaded with an empty list), which would show the grid to a site that
+	// does hold a plan. Treat the error as "plan state unknown" and fall back to the
+	// dashboard instead.
+	const purchasesError = useSelector( getPurchasesError );
+
 	// `created_at` is the wpcom shadow blog's `wp_blogs.registered` — the closest thing
 	// to a first-connection date the sites payload exposes. It matches the connection
 	// moment when registration created the row, but a reused pre-existing row keeps its
@@ -32,7 +39,7 @@ export default function useIsPricingGridEligible( siteId: number | null ) {
 	const isNewConnection = Number.isFinite( connectedAtMs ) && connectedAtMs >= LAUNCH_DATE;
 
 	return {
-		isEligible: isNewConnection && ! hasAnyPlan,
+		isEligible: isNewConnection && ! hasAnyPlan && ! purchasesError,
 		isNewConnection,
 		// The date check needs no fetch, so only newly connected sites ever wait.
 		isLoading: isNewConnection && isLoadingPurchases,

client/my-sites/stats/pricing-grid/pricing-grid.tsx

@@ -61,17 +61,18 @@ export default function PricingGrid( { onDismiss }: PricingGridProps ) {
 		getProductBySlug( state, PRODUCT_JETPACK_STATS_YEARLY )
 	) as ProductsList.RawAPIProduct | null;
 
-	const includedLabel = String( translate( 'Included' ) );
-	// The four paid differentiators lead; everything below them is shared by both plans.
+	// The four paid differentiators lead (bolded via `strong`, with the default
+	// Included / feature-name labels so the mobile fallback still names the feature);
+	// everything below them is shared by both plans.
 	const features: Feature[] = [
 		{
 			name: String( translate( 'UTM tracking' ) ),
-			paid: { isIncluded: true, label: includedLabel, strong: true },
+			paid: { isIncluded: true, strong: true },
 			free: { isIncluded: false },
 		},
 		{
 			name: String( translate( 'Device stats' ) ),
-			paid: { isIncluded: true, label: includedLabel, strong: true },
+			paid: { isIncluded: true, strong: true },
 			free: { isIncluded: false },
 		},
 		{
@@ -81,7 +82,7 @@ export default function PricingGrid( { onDismiss }: PricingGridProps ) {
 		},
 		{
 			name: String( translate( 'Priority support' ) ),
-			paid: { isIncluded: true, label: includedLabel, strong: true },
+			paid: { isIncluded: true, strong: true },
 			free: { isIncluded: false },
 		},
 		{
@@ -152,17 +153,20 @@ export default function PricingGrid( { onDismiss }: PricingGridProps ) {
 	};
 
 	const renderPrice = ( value: number, currency: string, hidePriceFraction: boolean ) => {
-		const { symbol, integer, fraction } = getCurrencyObject( value, currency );
+		const { symbol, symbolPosition, integer, fraction } = getCurrencyObject( value, currency );
 		const showPriceFraction = ! hidePriceFraction || ! fraction.endsWith( '00' );
+		// Some locales put the currency symbol after the amount (e.g. de-DE EUR).
+		const symbolElement = <sup className="stats-pricing-grid__price-symbol">{ symbol }</sup>;
 		return (
 			<p className="stats-pricing-grid__price">
-				<sup className="stats-pricing-grid__price-symbol">{ symbol }</sup>
+				{ symbolPosition === 'before' && symbolElement }
 				{ integer }
 				{ showPriceFraction && (
 					<sup className="stats-pricing-grid__price-fraction">
 						<strong>{ fraction }</strong>
 					</sup>
 				) }
+				{ symbolPosition === 'after' && symbolElement }
 			</p>
 		);
 	};
@@ -300,7 +304,7 @@ export default function PricingGrid( { onDismiss }: PricingGridProps ) {
 							{ createInterpolateElement(
 								String(
 									translate(
-										'By clicking <strong>%(paid)s</strong> or <strong>%(free)s</strong>, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site‘s data</shareDetailsLink> with us.',
+										'By clicking <strong>%(paid)s</strong> or <strong>%(free)s</strong>, you agree to our <tosLink>Terms of Service</tosLink> and to <shareDetailsLink>sync your site’s data</shareDetailsLink> with us.',
 										{ args: { paid: paidLabel, free: freeLabel } }
 									)
 								),

client/my-sites/stats/pricing-grid/style.scss

@@ -286,10 +286,11 @@
 	line-height: 24px;
 
 	// Same threshold the is-viewport-large class flips at (WP `large` breakpoint).
+	// Diverges from the jetpack component's `nowrap; overflow: hidden` here: this is
+	// the Terms of Service disclosure, and locales that run longer than English (DE,
+	// PT) must wrap rather than lose the end of the sentence.
 	@media (min-width: 960px) {
 		padding-left: var(--padding);
 		padding-right: var(--padding);
-		white-space: nowrap;
-		overflow: hidden;
 	}
 }