languages api and default english selection

1. Adding the default language logic for the LanguageSelection
2. Implementing the Language REST API endpoint for WordPress languages
3. Adding Redux store caching to prevent redundant API calls for fetching languages
4. Fixing the timing issues with setting English as the default language

Author: abhijitb

src/OnboardingSPA/steps/SiteGen/SiteDetails/contents.js

@@ -21,11 +21,7 @@ const getContents = () => {
 		),
 		walkThroughlink: __( 'click here', 'wp-module-onboarding' ),
 		languageList: [
-			[ __( 'English (US)', 'wp-module-onboarding' ), 'en-US' ],
-			[ __( 'English (UK)', 'wp-module-onboarding' ), 'en-UK' ],
-			[ __( 'Spanish', 'wp-module-onboarding' ), 'es-ES' ],
-			[ __( 'French', 'wp-module-onboarding' ), 'fr-FR' ],
-			[ __( 'Hindi', 'wp-module-onboarding' ), 'hi-IN' ],
+			[ __( 'English (United States)', 'wp-module-onboarding' ), 'en_US' ],
 		],
 		languageSelectionLabel: __(
 			'Choose your preferred site language:',

src/OnboardingSPA/steps/SiteGen/SiteDetails/index.js

@@ -9,6 +9,7 @@ import {
 	trackOnboardingEvent,
 } from '../../../utils/analytics/hiive';
 import getContents from './contents';
+import { fetchLanguages, formatLanguagesForSelection } from '../../../utils/api/languages';
 
 // Components
 import Animate from '../../../components/Animate';
@@ -29,11 +30,12 @@ const SiteGenSiteDetails = () => {
 	const [ customerInput, setCustomerInput ] = useState( '' );
 	const [ customerInputStrength, setCustomerInputStrength ] = useState( 0 );
 	const [ isValidInput, setIsValidInput ] = useState( false );
+	const [ languages, setLanguages ] = useState( [] );
 
-	const { currentData } = useSelect( ( select ) => {
+	const { currentData, storedLanguages } = useSelect( ( select ) => {
 		return {
-			currentData:
-				select( nfdOnboardingStore ).getCurrentOnboardingData(),
+			currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(),
+			storedLanguages: select( nfdOnboardingStore ).getLanguages(),
 		};
 	} );
 
@@ -50,22 +52,51 @@ const SiteGenSiteDetails = () => {
 		setHideFooterNav,
 		setCurrentOnboardingData,
 		setIsHeaderNavigationEnabled,
+		setStoreLanguages,
 	} = useDispatch( nfdOnboardingStore );
 
 	const isLargeViewport = useViewportMatch( 'small' );
 	const content = getContents();
 
+	// Fetch languages from API only if they don't exist in the store
+	useEffect( () => {
+		const getLanguages = async () => {
+			// Check if languages already exist in the store
+			if ( storedLanguages?.length > 0 ) {
+				// Use languages from the store
+				setLanguages( formatLanguagesForSelection( storedLanguages ) );
+			} else {
+				// Fetch languages if not in store
+				const languageData = await fetchLanguages();
+				if ( languageData?.length > 0 ) {
+					const formattedLanguages = formatLanguagesForSelection( languageData );
+					setLanguages( formattedLanguages );
+
+					// Save languages to the store for future use
+					setStoreLanguages( languageData );
+				}
+			}
+		};
+
+		getLanguages();
+	}, [ storedLanguages, setStoreLanguages ] );
+
 	// Function to find English in language list or default to first language
 	const getDefaultLocale = () => {
-		const englishOption = content.languageList.find( ( [ language ] ) =>
+		const languageList = languages.length > 0 ? languages : content.languageList;
+		const englishOption = languageList.find( ( [ language ] ) =>
 			language.toLowerCase().includes( 'english' ) );
-		const defaultOption = content.languageList[ 0 ] ? content.languageList[ 0 ][ 1 ] : '';
+		const defaultOption = languageList[ 0 ] ? languageList[ 0 ][ 1 ] : '';
 		return englishOption ? englishOption[ 1 ] : defaultOption;
 	};
 
 	// Set English as default if no locale is selected
 	useEffect( () => {
-		if ( ! selectedLocale && content.languageList && content.languageList.length > 0 ) {
+		// Only run this if languages have loaded or we have content.languageList
+		const languageList = languages?.length > 0 ? languages : content.languageList;
+
+		// initialize default locale when the user visits the first time
+		if ( languageList?.length > 0 && ! selectedLocale ) {
 			const defaultLocale = getDefaultLocale();
 			setSelectedLocale( defaultLocale );
 
@@ -75,7 +106,7 @@ const SiteGenSiteDetails = () => {
 				setCurrentOnboardingData( currentData );
 			}
 		}
-	}, [ content.languageList ] );
+	}, [ languages, selectedLocale ] );
 
 	useEffect( () => {
 		setHideFooterNav( false );
@@ -183,7 +214,7 @@ const SiteGenSiteDetails = () => {
 						>
 							<LanguageSelection
 								languageSelectionLabel={ content.languageSelectionLabel }
-								languageList={ content.languageList }
+								languageList={ languages.length > 0 ? languages : content.languageList }
 								selectedLocale={ selectedLocale }
 								setSelectedLocale={ setSelectedLocale }
 							/>

src/OnboardingSPA/store/actions.js

@@ -331,3 +331,10 @@ export function setContinueWithoutAi( continueWithoutAi ) {
 		continueWithoutAi,
 	};
 }
+
+export function setStoreLanguages( languages ) {
+	return {
+		type: 'SET_LANGUAGES',
+		languages,
+	};
+}

src/OnboardingSPA/store/reducer.js

@@ -179,6 +179,11 @@ export function data( state = {}, action ) {
 					...action.socialData,
 				},
 			};
+		case 'SET_LANGUAGES':
+			return {
+				...state,
+				languages: action.languages,
+			};
 
 		case 'SET_SITEGEN_AI_ERROR_STATUS':
 			// Only update if the prev value was false and now there is an error else don't

src/OnboardingSPA/store/selectors.js

@@ -471,3 +471,7 @@ export function getInteractionDisabled( state ) {
 export function getIsFreshInstallation( state ) {
 	return state.runtime.isFreshInstallation;
 }
+
+export function getLanguages( state ) {
+	return state.data.languages;
+}

src/OnboardingSPA/utils/api/buildRequestUrl.js

@@ -0,0 +1,21 @@
+/**
+ * Build a request URL for the Newfold Onboarding API.
+ *
+ * @param {string} endpoint - The API endpoint.
+ * @return {string} The fully-qualified API URL.
+ */
+const buildRequestUrl = ( endpoint ) => {
+	// Remove leading slash if it exists
+	if ( endpoint.startsWith( '/' ) ) {
+		endpoint = endpoint.substring( 1 );
+	}
+
+	// Get the WordPress site URL
+	const wpApiSettings = window.wpApiSettings || {};
+	const apiRoot = wpApiSettings.root || '/wp-json/';
+
+	// Build the full API URL
+	return `${apiRoot}newfold-onboarding/v1/${endpoint}`;
+};
+
+export default buildRequestUrl;

src/OnboardingSPA/utils/api/languages.js

@@ -0,0 +1,47 @@
+import apiFetch from '@wordpress/api-fetch';
+import buildRequestUrl from './buildRequestUrl';
+
+/*
+ * Fetches the available languages from the WordPress installation.
+ *
+ * @return {Promise<Array>} Promise that resolves to an array of language data
+ */
+export const fetchLanguages = async () => {
+	const requestUrl = buildRequestUrl( 'languages' );
+	try {
+		const response = await apiFetch( { url: requestUrl } );
+
+		// Validate response format
+		if ( response?.languages?.length ) {
+			return response.languages;
+		}
+
+		// invalid response format
+		return [];
+	} catch ( error ) {
+		// Return a basic fallback with English
+		return [
+			{
+				code: 'en_US',
+				name: 'English (United States)',
+				native_name: 'English (United States)',
+			},
+		];
+	}
+};
+
+/*
+ * Formats language data for the language selection component.
+ * Returns array of [language_name, language_code] pairs.
+ *
+ * @param {Array} languages Array of language objects
+ * @return {Array} Array formatted for the LanguageSelection component
+ */
+export const formatLanguagesForSelection = ( languages ) => {
+	if ( ! languages?.length ) {
+		// Return basic English if input isn't valid
+		return [ [ 'English (United States)', 'en_US' ] ];
+	}
+
+	return languages.map( ( language ) => [ language.name, language.code ] );
+};