Allow ui_locale to be pass to login page (#1842)

.changeset/stupid-gifts-drum.md

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': patch
+---
+
+Allow ui_locale to be pass to customer account login

packages/hydrogen/src/customer/customer.ts

@@ -40,7 +40,9 @@ import type {
   CustomerAccountOptions,
   CustomerAccount,
   CustomerAPIResponse,
+  LoginOptions,
 } from './types';
+import {LanguageCode} from '@shopify/hydrogen-react/storefront-api-types';
 
 const DEFAULT_LOGIN_URL = '/account/login';
 const DEFAULT_AUTH_URL = '/account/authorize';
@@ -246,7 +248,7 @@ export function createCustomerAccountClient({
   }
 
   return {
-    login: async () => {
+    login: async (options?: LoginOptions) => {
       const loginUrl = new URL(customerAccountUrl + '/auth/oauth/authorize');
 
       const state = await generateState();
@@ -263,6 +265,15 @@ export function createCustomerAccountClient({
       loginUrl.searchParams.append('state', state);
       loginUrl.searchParams.append('nonce', nonce);
 
+      if (options?.uiLocales) {
+        const [language, region] = options.uiLocales.split('-');
+        let locale = language.toLowerCase();
+        if (region) {
+          locale += `-${region.toUpperCase()}`;
+        }
+        loginUrl.searchParams.append('ui_locales', locale);
+      }
+
       const verifier = await generateCodeVerifier();
       const challenge = await generateCodeChallenge(verifier);
 

packages/hydrogen/src/customer/types.ts

@@ -7,6 +7,7 @@ import {type GraphQLError} from '../utils/graphql';
 import type {CrossRuntimeRequest} from '../utils/request';
 
 import type {HydrogenSession} from '../hydrogen';
+import {LanguageCode} from '@shopify/hydrogen-react/storefront-api-types';
 
 // Return type of unauthorizedHandler = Return type of loader/action function
 // This type is not exported https://github.com/remix-run/react-router/blob/main/packages/router/utils.ts#L167
@@ -45,9 +46,21 @@ export interface CustomerAccountMutations {
   // '#graphql mutation m1 {...}': {return: M1Mutation; variables: M1MutationVariables};
 }
 
+export type LoginOptions = {
+  uiLocales?: LanguageCode;
+};
+
 export type CustomerAccount = {
-  /** Start the OAuth login flow. This function should be called and returned from a Remix action. It redirects the customer to a Shopify login domain. It also defined the final path the customer lands on at the end of the oAuth flow with the value of the `return_to` query param. (This is automatically setup unless `customAuthStatusHandler` option is in use) */
-  login: () => Promise<Response>;
+  /** Start the OAuth login flow. This function should be called and returned from a Remix action.
+   * It redirects the customer to a Shopify login domain. It also defined the final path the customer
+   * lands on at the end of the oAuth flow with the value of the `return_to` query param. (This is
+   * automatically setup unless `customAuthStatusHandler` option is in use)
+   *
+   * @param options.uiLocales - The displayed language of the login page. Only support for the following languages:
+   * `en`, `fr`, `cs`, `da`, `de`, `es`, `fi`, `it`, `ja`, `ko`, `nb`, `nl`, `pl`, `pt-BR`, `pt-PT`,
+   * `sv`, `th`, `tr`, `vi`, `zh-CN`, `zh-TW`. If supplied any other language code, it will default to `en`.
+   * */
+  login: (options?: LoginOptions) => Promise<Response>;
   /** On successful login, the customer redirects back to your app. This function validates the OAuth response and exchanges the authorization code for an access token and refresh token. It also persists the tokens on your session. This function should be called and returned from the Remix loader configured as the redirect URI within the Customer Account API settings in admin. */
   authorize: () => Promise<Response>;
   /** Returns if the customer is logged in. It also checks if the access token is expired and refreshes it if needed. */
@@ -122,8 +135,16 @@ export type CustomerAccountOptions = {
 /** Below are types meant for documentation only. Ensure it stay in sync with the type above. */
 
 export type CustomerAccountForDocs = {
-  /** Start the OAuth login flow. This function should be called and returned from a Remix action. It redirects the customer to a Shopify login domain. It also defined the final path the customer lands on at the end of the oAuth flow with the value of the `return_to` query param. (This is automatically setup unless `customAuthStatusHandler` option is in use) */
-  login?: () => Promise<Response>;
+  /** Start the OAuth login flow. This function should be called and returned from a Remix action.
+   * It redirects the customer to a Shopify login domain. It also defined the final path the customer
+   * lands on at the end of the oAuth flow with the value of the `return_to` query param. (This is
+   * automatically setup unless `customAuthStatusHandler` option is in use)
+   *
+   * @param options.uiLocales - The displayed language of the login page. Only support for the following languages:
+   * `en`, `fr`, `cs`, `da`, `de`, `es`, `fi`, `it`, `ja`, `ko`, `nb`, `nl`, `pl`, `pt-BR`, `pt-PT`,
+   * `sv`, `th`, `tr`, `vi`, `zh-CN`, `zh-TW`. If supplied any other language code, it will default to `en`.
+   * */
+  login: (options?: LoginOptions) => Promise<Response>;
   /** On successful login, the customer redirects back to your app. This function validates the OAuth response and exchanges the authorization code for an access token and refresh token. It also persists the tokens on your session. This function should be called and returned from the Remix loader configured as the redirect URI within the Customer Account API settings in admin. */
   authorize?: () => Promise<Response>;
   /** Returns if the customer is logged in. It also checks if the access token is expired and refreshes it if needed. */