Update/i18n utils unreverted

client/components/calypso-i18n-provider/index.tsx

@@ -4,10 +4,12 @@
 import * as React from 'react';
 import { setLocaleData as setWpI18nLocaleData } from '@wordpress/i18n';
 import { I18nProvider } from '@automattic/react-i18n';
+import { LocaleProvider } from '@automattic/i18n-utils';
 import i18n from 'i18n-calypso';
 
 const CalypsoI18nProvider: React.FunctionComponent = ( { children } ) => {
 	const [ localeData, setLocaleData ] = React.useState( i18n.getLocale() );
+	const localeSlug = i18n.getLocaleSlug();
 
 	React.useEffect( () => {
 		const onChange = () => {
@@ -25,7 +27,11 @@ const CalypsoI18nProvider: React.FunctionComponent = ( { children } ) => {
 		};
 	}, [] );
 
-	return <I18nProvider localeData={ localeData }>{ children }</I18nProvider>;
+	return (
+		<LocaleProvider localeSlug={ localeSlug || 'en' }>
+			<I18nProvider localeData={ localeData }>{ children }</I18nProvider>
+		</LocaleProvider>
+	);
 };
 
 export default CalypsoI18nProvider;

client/landing/gutenboarding/components/domain-picker-button/index.tsx

@@ -7,6 +7,7 @@ import { useSelect } from '@wordpress/data';
 import { Icon, chevronDown } from '@wordpress/icons';
 import { sprintf } from '@wordpress/i18n';
 import { useI18n } from '@automattic/react-i18n';
+import { useLocale } from '@automattic/i18n-utils';
 
 /**
  * Internal dependencies
@@ -22,7 +23,8 @@ import { DOMAIN_SUGGESTIONS_STORE } from '../../stores/domain-suggestions';
 import './style.scss';
 
 const DomainPickerButton: React.FunctionComponent = () => {
-	const { __, i18nLocale } = useI18n();
+	const { __ } = useI18n();
+	const locale = useLocale();
 	const makePath = usePath();
 	const { domain, selectedDesign, siteTitle, siteVertical } = useSelect( ( select ) =>
 		select( ONBOARD_STORE ).getState()
@@ -43,7 +45,7 @@ const DomainPickerButton: React.FunctionComponent = () => {
 				include_wordpressdotcom: false,
 				include_dotblogsubdomain: false,
 				quantity: 1, // this will give the recommended domain only
-				locale: i18nLocale,
+				locale,
 			} );
 		},
 		[ suggestionQuery ]

packages/domain-picker/package.json

@@ -34,6 +34,7 @@
 		"@automattic/data-stores": "^1.0.0-alpha.1",
 		"@automattic/onboarding": "^1.0.0",
 		"@automattic/react-i18n": "^1.0.0-alpha.0",
+		"@automattic/i18n-utils": "^1.0.0",
 		"@wordpress/base-styles": "^2.0.1",
 		"@wordpress/components": "^10.0.5",
 		"@wordpress/compose": "^3.19.3",

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import React, { FunctionComponent, useEffect, useState } from 'react';
-import { __ } from '@wordpress/i18n';
+
 import { createInterpolateElement } from '@wordpress/element';
 import { Spinner } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
@@ -11,7 +11,8 @@ import { sprintf } from '@wordpress/i18n';
 import { v4 as uuid } from 'uuid';
 import { recordTrainTracksInteract } from '@automattic/calypso-analytics';
 import { Button } from '@wordpress/components';
-
+import { useI18n } from '@automattic/react-i18n';
+import { useLocalizeUrl } from '@automattic/i18n-utils';
 /**
  * Internal dependencies
  */
@@ -58,6 +59,8 @@ const DomainPickerSuggestionItem: FunctionComponent< Props > = ( {
 	selected,
 	type = ITEM_TYPE_RADIO,
 } ) => {
+	const { __ } = useI18n();
+	const localizeUrl = useLocalizeUrl();
 	const isMobile = useViewportMatch( 'small', '<' );
 
 	const dotPos = domain.indexOf( '.' );
@@ -162,7 +165,7 @@ const DomainPickerSuggestionItem: FunctionComponent< Props > = ( {
 										<a
 											target="_blank"
 											rel="noreferrer"
-											href="https://wordpress.com/support/https-ssl"
+											href={ localizeUrl( 'https://wordpress.com/support/https-ssl' ) }
 										/>
 									), // TODO Wrap this in `localizeUrl` from lib/i18n-utils
 								}

packages/i18n-utils/package.json

@@ -22,6 +22,7 @@
 		"test": "yarn jest"
 	},
 	"dependencies": {
-		"i18n-calypso": "^5.0.0"
+		"@testing-library/react-hooks": "^3.4.2",
+		"react": "^16.12.0"
 	}
 }

packages/i18n-utils/src/index.ts

@@ -1 +1,5 @@
-export { localizeUrl } from './localize-url';
+/**
+ * Internal dependencies
+ */
+export { localizeUrl, useLocalizeUrl } from './localize-url';
+export { LocaleProvider, useLocale } from './locale-context';

packages/i18n-utils/src/locale-context.tsx

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import React, { createContext, useContext } from 'react';
+
+export const LocaleContext = createContext< string >( 'en' );
+
+interface Props {
+	localeSlug: string;
+}
+
+export const LocaleProvider: React.FC< Props > = ( { children, localeSlug } ) => (
+	<LocaleContext.Provider value={ localeSlug }>{ children }</LocaleContext.Provider>
+);
+
+export function useLocale(): string {
+	return useContext( LocaleContext );
+}

packages/i18n-utils/src/localize-url.ts

@@ -1,8 +1,6 @@
 /**
  * Internal dependencies
  */
-import { getLocaleSlug } from 'i18n-calypso';
-
 import {
 	localesWithBlog,
 	localesWithPrivacyPolicy,
@@ -14,6 +12,7 @@ import {
 	jetpackComLocales,
 	Locale,
 } from './locales';
+import { useLocale } from './locale-context';
 
 const INVALID_URL = `http://__domain__.invalid`;
 
@@ -86,10 +85,7 @@ const urlLocalizationMapping: UrlLocalizationMapping = {
 	'wordpress.com': setLocalizedUrlHost( 'wordpress.com', magnificentNonEnLocales ),
 };
 
-export function localizeUrl( fullUrl: string, toLocale?: Locale ): string {
-	const locale =
-		toLocale || ( typeof getLocaleSlug === 'function' ? getLocaleSlug() || 'en' : 'en' );
-
+export function localizeUrl( fullUrl: string, locale: Locale ): string {
 	const url = new URL( String( fullUrl ), INVALID_URL );
 
 	// Ignore and passthrough /relative/urls that have no host specified
@@ -132,3 +128,14 @@ export function localizeUrl( fullUrl: string, toLocale?: Locale ): string {
 	// Nothing needed to be changed, just return it unmodified.
 	return fullUrl;
 }
+
+export function useLocalizeUrl(): ( fullUrl: string, locale?: Locale ) => string {
+	const providerLocale = useLocale();
+
+	return ( fullUrl: string, locale?: Locale ) => {
+		if ( locale ) {
+			return localizeUrl( fullUrl, locale );
+		}
+		return localizeUrl( fullUrl, providerLocale );
+	};
+}