Update Gutenboarding to use new <LocaleProvider> (#47567)

Automattic · Nov 20, 2020 · 3a3d26f · 3a3d26f
1 parent a5f70bb
commit 3a3d26f
Show file tree

Hide file tree

Showing 12 changed files with 44 additions and 30 deletions.
diff --git a/client/landing/gutenboarding/components/domain-picker-button/index.tsx b/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 ]

diff --git a/client/landing/gutenboarding/components/header/index.tsx b/client/landing/gutenboarding/components/header/index.tsx
@@ -6,6 +6,7 @@ import { useI18n } from '@automattic/react-i18n';
 import { Icon, wordpress } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { Button } from '@wordpress/components';
+import { useLocale } from '@automattic/i18n-utils';
 
 /**
  * Internal dependencies
@@ -23,7 +24,8 @@ import Link from '../link';
 import './style.scss';
 
 const Header: React.FunctionComponent = () => {
-	const { __, i18nLocale } = useI18n();
+	const { __ } = useI18n();
+	const locale = useLocale();
 	const currentStep = useCurrentStep();
 
 	const { siteTitle } = useSelect( ( select ) => select( ONBOARD_STORE ).getState() );
@@ -53,7 +55,7 @@ const Header: React.FunctionComponent = () => {
 				<div className="gutenboarding__header-section-item gutenboarding__header-language-section">
 					<Link to={ Step.LanguageModal }>
 						<span>{ __( 'Site Language' ) } </span>
-						<span className="gutenboarding__header-site-language-badge">{ i18nLocale }</span>
+						<span className="gutenboarding__header-site-language-badge">{ locale }</span>
 					</Link>
 				</div>
 			);

diff --git a/client/landing/gutenboarding/components/locale-context/index.tsx b/client/landing/gutenboarding/components/locale-context/index.tsx
@@ -14,6 +14,7 @@ import { getLanguageSlugs } from '../../../../lib/i18n-utils';
 import { getUrlParts } from '../../../../lib/url/url-parts';
 import config from '../../../../config';
 import type { User } from '@automattic/data-stores';
+import { LocaleProvider } from '@automattic/i18n-utils';
 
 /**
  * Internal dependencies
@@ -90,9 +91,11 @@ export const LocaleContext: React.FunctionComponent = ( { children } ) => {
 
 	return (
 		<ChangeLocaleContext.Provider value={ changeLocale }>
-			<I18nProvider localeData={ contextLocaleData }>
-				{ localeDataLoaded ? children : null }
-			</I18nProvider>
+			<LocaleProvider localeSlug={ contextLocaleData?.[ '' ]?.localeSlug ?? 'en' }>
+				<I18nProvider localeData={ contextLocaleData }>
+					{ localeDataLoaded ? children : null }
+				</I18nProvider>
+			</LocaleProvider>
 		</ChangeLocaleContext.Provider>
 	);
 };

diff --git a/client/landing/gutenboarding/components/window-locale-effect-manager/index.tsx b/client/landing/gutenboarding/components/window-locale-effect-manager/index.tsx
@@ -4,17 +4,19 @@
 import { switchWebpackCSS } from '../../../../lib/i18n-utils/switch-locale';
 import { useI18n } from '@automattic/react-i18n';
 import * as React from 'react';
+import { useLocale } from '@automattic/i18n-utils';
 
 export const WindowLocaleEffectManager: React.FunctionComponent = () => {
-	const { __, isRTL, i18nLocale } = useI18n();
+	const { __, isRTL } = useI18n();
+	const locale = useLocale();
 
 	// Some languages may need to set an html lang attribute that is different from their slug
 	let lang = __( 'html_lang_attribute' );
 
 	// Some languages don't have the translation for html_lang_attribute
 	// or maybe we are dealing with the default `en` locale. Return the general purpose locale slug
 	if ( lang === 'html_lang_attribute' ) {
-		lang = i18nLocale;
+		lang = locale;
 	}
 
 	React.useEffect( () => {

diff --git a/client/landing/gutenboarding/hooks/use-on-login.ts b/client/landing/gutenboarding/hooks/use-on-login.ts
@@ -3,7 +3,7 @@
  */
 import * as React from 'react';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useI18n } from '@automattic/react-i18n';
+import { useLocale } from '@automattic/i18n-utils';
 
 /**
  * Internal dependencies
@@ -19,7 +19,7 @@ import { useNewQueryParam } from '../path';
  **/
 
 export default function useOnSignup() {
-	const { i18nLocale } = useI18n();
+	const locale = useLocale();
 	const { createSite } = useDispatch( ONBOARD_STORE );
 	const currentUser = useSelect( ( select ) => select( USER_STORE ).getCurrentUser() );
 	const isCreatingSite = useSelect( ( select ) => select( SITE_STORE ).isFetchingSite() );
@@ -30,14 +30,14 @@ export default function useOnSignup() {
 
 	React.useEffect( () => {
 		if ( ! isCreatingSite && ! newSite && currentUser && shouldTriggerCreate ) {
-			createSite( currentUser.username, i18nLocale, undefined, visibility );
+			createSite( currentUser.username, locale, undefined, visibility );
 		}
 	}, [
 		createSite,
 		currentUser,
 		isCreatingSite,
 		newSite,
-		i18nLocale,
+		locale,
 		shouldTriggerCreate,
 		visibility,
 	] );

diff --git a/client/landing/gutenboarding/hooks/use-on-signup.ts b/client/landing/gutenboarding/hooks/use-on-signup.ts
@@ -3,7 +3,7 @@
  */
 import * as React from 'react';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useI18n } from '@automattic/react-i18n';
+import { useLocale } from '@automattic/i18n-utils';
 
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ import { useNewSiteVisibility } from './use-selected-plan';
  **/
 
 export default function useOnSignup() {
-	const { i18nLocale } = useI18n();
+	const locale = useLocale();
 	const { createSite } = useDispatch( ONBOARD_STORE );
 
 	const newUser = useSelect( ( select ) => select( USER_STORE ).getNewUser() );
@@ -27,14 +27,14 @@ export default function useOnSignup() {
 
 	const handleCreateSite = React.useCallback(
 		( username: string, bearerToken?: string, isPublicSite?: number ) => {
-			createSite( username, i18nLocale, bearerToken, isPublicSite );
+			createSite( username, locale, bearerToken, isPublicSite );
 		},
-		[ createSite, i18nLocale ]
+		[ createSite, locale ]
 	);
 
 	React.useEffect( () => {
 		if ( newUser && newUser.bearerToken && newUser.username && ! newSite ) {
 			handleCreateSite( newUser.username, newUser.bearerToken, visibility );
 		}
-	}, [ newSite, newUser, i18nLocale, handleCreateSite, visibility ] );
+	}, [ newSite, newUser, locale, handleCreateSite, visibility ] );
 }
diff --git a/client/landing/gutenboarding/hooks/use-selected-plan.ts b/client/landing/gutenboarding/hooks/use-selected-plan.ts
@@ -3,7 +3,7 @@
  */
 import { Site } from '@automattic/data-stores';
 import { useSelect } from '@wordpress/data';
-import { useI18n } from '@automattic/react-i18n';
+import { useLocale } from '@automattic/i18n-utils';
 
 /**
  * Internal dependencies
@@ -20,9 +20,9 @@ export function usePlanFromPath() {
 }
 
 export function useSelectedPlan() {
-	const { i18nLocale } = useI18n();
+	const locale = useLocale();
 	// Pre-load the plans details to ensure the plans are fetched early from the API endpoint.
-	useSelect( ( select ) => select( PLANS_STORE ).getPlansDetails( i18nLocale ) );
+	useSelect( ( select ) => select( PLANS_STORE ).getPlansDetails( locale ) );
 
 	const selectedFeatures = useSelect( ( select ) => select( ONBOARD_STORE ).getSelectedFeatures() );
 	const selectedPlan = useSelect( ( select ) => select( ONBOARD_STORE ).getPlan() );

diff --git a/client/landing/gutenboarding/hooks/use-step-navigation.ts b/client/landing/gutenboarding/hooks/use-step-navigation.ts
@@ -3,7 +3,7 @@
  */
 import { useHistory } from 'react-router-dom';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useI18n } from '@automattic/react-i18n';
+import { useLocale } from '@automattic/i18n-utils';
 
 /**
  * Internal dependencies
@@ -29,7 +29,7 @@ export default function useStepNavigation(): { goBack: () => void; goNext: () =>
 	const makePath = usePath();
 	const history = useHistory();
 	const currentStep = useCurrentStep();
-	const { i18nLocale } = useI18n();
+	const locale = useLocale();
 
 	let steps: StepType[];
 
@@ -59,7 +59,7 @@ export default function useStepNavigation(): { goBack: () => void; goNext: () =>
 	const { onSignupDialogOpen } = useSignup();
 	const handleSiteCreation = () =>
 		currentUser
-			? createSite( currentUser.username, i18nLocale, undefined, newSiteVisibility )
+			? createSite( currentUser.username, locale, undefined, newSiteVisibility )
 			: onSignupDialogOpen();
 
 	// Logic necessary to skip Domains or Plans steps

diff --git a/client/landing/gutenboarding/onboarding-block/domains/index.tsx b/client/landing/gutenboarding/onboarding-block/domains/index.tsx
@@ -15,6 +15,7 @@ import {
 	NextButton,
 	SkipButton,
 } from '@automattic/onboarding';
+import { useLocale } from '@automattic/i18n-utils';
 
 /**
  * Internal dependencies
@@ -40,7 +41,8 @@ interface Props {
 }
 
 const DomainsStep: React.FunctionComponent< Props > = ( { isModal } ) => {
-	const { __, i18nLocale: locale } = useI18n();
+	const { __ } = useI18n();
+	const locale = useLocale();
 	const history = useHistory();
 	const { goBack, goNext } = useStepNavigation();
 

diff --git a/client/landing/gutenboarding/onboarding-block/plans/index.tsx b/client/landing/gutenboarding/onboarding-block/plans/index.tsx
@@ -8,6 +8,7 @@ import { useI18n } from '@automattic/react-i18n';
 import PlansGrid from '@automattic/plans-grid';
 import type { Plans } from '@automattic/data-stores';
 import { Title, SubTitle, ActionButtons, BackButton } from '@automattic/onboarding';
+import { useLocale } from '@automattic/i18n-utils';
 
 /**
  * Internal dependencies
@@ -27,7 +28,8 @@ interface Props {
 }
 
 const PlansStep: React.FunctionComponent< Props > = ( { isModal } ) => {
-	const { __, i18nLocale: locale } = useI18n();
+	const { __ } = useI18n();
+	const locale = useLocale();
 	const history = useHistory();
 	const makePath = usePath();
 	const { goBack, goNext } = useStepNavigation();

diff --git a/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx b/client/landing/gutenboarding/onboarding-block/style-preview/preview.tsx
@@ -4,7 +4,7 @@
 import * as React from 'react';
 import { addQueryArgs } from '@wordpress/url';
 import { useSelect } from '@wordpress/data';
-import { useI18n } from '@automattic/react-i18n';
+import { useLocale } from '@automattic/i18n-utils';
 
 /**
  * Internal dependencies
@@ -55,7 +55,7 @@ interface Props {
 	viewport: Viewport;
 }
 const Preview: React.FunctionComponent< Props > = ( { viewport } ) => {
-	const { i18nLocale } = useI18n();
+	const language = useLocale();
 	const [ previewHtml, setPreviewHtml ] = React.useState< string >();
 	const { selectedDesign, selectedFonts, siteTitle } = useSelect( ( select ) =>
 		select( STORE_KEY ).getState()
@@ -73,7 +73,7 @@ const Preview: React.FunctionComponent< Props > = ( { viewport } ) => {
 					selectedDesign.theme
 				) }/${ encodeURIComponent( selectedDesign.template ) }/`;
 				const url = addQueryArgs( templateUrl, {
-					language: i18nLocale,
+					language,
 					site_title: siteTitle,
 					...( selectedFonts && {
 						font_headings: selectedFonts.headings,
@@ -105,7 +105,7 @@ const Preview: React.FunctionComponent< Props > = ( { viewport } ) => {
 			eff();
 		},
 		// Disable reason: We'll handle font change elsewhere.
-		[ i18nLocale, selectedDesign ] // eslint-disable-line react-hooks/exhaustive-deps
+		[ language, selectedDesign ] // eslint-disable-line react-hooks/exhaustive-deps
 	);
 
 	React.useEffect( () => {

diff --git a/package.json b/package.json
@@ -164,6 +164,7 @@
 		"@automattic/color-studio": "^2.3.0",
 		"@automattic/components": "^1.0.0-alpha.1",
 		"@automattic/data-stores": "^1.0.0-alpha.1",
+		"@automattic/i18n-utils": "^1.0.0",
 		"@automattic/languages": "^1.0.0",
 		"@automattic/typography": "^1.0.0",
 		"@automattic/viewport": "^1.0.0",