feat(): Add support for locale to the js sdk (#14306)

* feat(): Add support for locale to the js sdk

* Create great-icons-thank.md

packages/core/js-sdk/src/client.ts

@@ -10,6 +10,7 @@ import {
 } from "./types"
 
 export const PUBLISHABLE_KEY_HEADER = "x-publishable-api-key"
+export const LOCALE_STORAGE_KEY = "medusa_locale"
 
 // We want to explicitly retrieve the base URL instead of relying on relative paths that differ in behavior between browsers.
 const getBaseUrl = (passedBaseUrl: string) => {
@@ -112,6 +113,18 @@ export class Client {
   private DEFAULT_JWT_STORAGE_KEY = "medusa_auth_token"
   private token = ""
 
+  private locale_ = ""
+
+  get locale() {
+    if (hasStorage("localStorage")) {
+      const storedLocale = window.localStorage.getItem(LOCALE_STORAGE_KEY)
+      if (storedLocale) {
+        return storedLocale
+      }
+    }
+    return this.locale_
+  }
+
   constructor(config: Config) {
     this.config = { ...config, baseUrl: getBaseUrl(config.baseUrl) }
     const logger = config.logger || {
@@ -126,9 +139,20 @@ export class Client {
       debug: config.debug ? logger.debug : () => {},
     }
 
+    if (hasStorage("localStorage")) {
+      this.locale_ = window.localStorage.getItem(LOCALE_STORAGE_KEY) || ""
+    }
+
     this.fetch_ = this.initClient()
   }
 
+  setLocale(locale: string) {
+    if (hasStorage("localStorage")) {
+      window.localStorage.setItem(LOCALE_STORAGE_KEY, locale)
+    }
+    this.locale_ = locale
+  }
+
   /**
    * `fetch` closely follows (and uses under the hood) the native `fetch` API. There are, however, few key differences:
    * - Non 2xx statuses throw a `FetchError` with the status code as the `status` property, rather than resolving the promise
@@ -226,10 +250,12 @@ export class Client {
       // We always want to fetch the up-to-date JWT token before firing off a request.
       const headers = new Headers(defaultHeaders)
       const customHeaders = {
+        "content-language": this.locale,
         ...this.config.globalHeaders,
         ...(await this.getJwtHeader_()),
         ...init?.headers,
       }
+
       // We use `headers.set` in order to ensure headers are overwritten in a case-insensitive manner.
       Object.entries(customHeaders).forEach(([key, value]) => {
         if (value === null) {

packages/core/js-sdk/src/index.ts

@@ -18,6 +18,14 @@ class Medusa {
     this.store = new Store(this.client)
     this.auth = new Auth(this.client, config)
   }
+
+  setLocale(locale: string) {
+    this.client.setLocale(locale)
+  }
+
+  getLocale() {
+    return this.client.locale
+  }
 }
 
 export default Medusa