@seamly/web-ui 23.0.0-alpha.2 → 23.0.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "23.0.0-alpha.2",
+  "version": "23.0.0-alpha.3",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "exports": {

package/src/javascripts/api/index.ts

@@ -162,7 +162,7 @@ export class API {
   }) {
     this.store = objectStore(
       `${namespace}.connection${
-        context.contentLocale ? `.${context.contentLocale}` : ''
+        context.userLocale ? `.${context.userLocale}` : ''
       }`,
       config.storageProvider || sessionStorageProvider,
     )
@@ -625,23 +625,7 @@ export class API {
       return
     }
 
-    // Destructure the server locale from the payload
-    const { contentLocale: _, ...restPayload } = payload
-
-    const localContentLocale = this.#config.context?.contentLocale
-    const localUserLocale = this.#config.context?.userLocale
-
-    this.send(
-      'context',
-      {
-        // Only send locale if explicitly set in the config.
-        ...(localContentLocale
-          ? { contentLocale: localContentLocale, userLocale: localUserLocale }
-          : {}),
-        ...restPayload,
-      },
-      false,
-    )
+    this.send('context', payload, false)
   }
 
   getEnvironment() {

package/src/javascripts/domains/config/actions.ts

@@ -3,6 +3,7 @@ import { Config, ConfigResponse } from 'config.types'
 import { ThunkAPI } from 'domains/redux/redux.types'
 
 type InitializeConfigReturn = ConfigResponse & {
+  defaultUserLocale: ConfigResponse['defaultLocale']
   defaultContentLocale: ConfigResponse['defaultLocale']
   connectWhenInView: Config['connectWhenInView']
 }
@@ -24,6 +25,7 @@ export const initializeConfig = createAsyncThunk<
         startChatIcon,
       } = await api.getConfig()
 
+      const defaultUserLocale = config?.context?.userLocale || defaultLocale
       const defaultContentLocale =
         config?.context?.contentLocale || defaultLocale
       const { connectWhenInView } = config
@@ -35,6 +37,7 @@ export const initializeConfig = createAsyncThunk<
         agentParticipant,
         userParticipant,
         startChatIcon,
+        defaultUserLocale,
         defaultContentLocale,
         connectWhenInView,
       }

package/src/javascripts/domains/config/slice.ts

@@ -104,6 +104,7 @@ export const configSlice = createSlice({
               agentParticipant,
               userParticipant,
               startChatIcon,
+              defaultUserLocale,
               defaultContentLocale,
             },
           },
@@ -114,7 +115,9 @@ export const configSlice = createSlice({
             payload,
           }))
 
+          state.context.userLocale = defaultUserLocale
           state.context.contentLocale = defaultContentLocale
+
           state.agentParticipant = agentParticipant
           state.userParticipant = userParticipant
           state.startChatIcon = startChatIcon

package/src/javascripts/domains/i18n/slice.ts

@@ -49,7 +49,7 @@ export const i18nSlice = createSlice({
     builder
       .addCase(resetApp.pending, () => initialState)
       .addCase(initializeConfig.fulfilled, (state, { payload }) => {
-        state.initialLocale = payload.defaultContentLocale
+        state.initialLocale = payload.defaultUserLocale
       })
       .addCase(setLocale.pending, (state) => {
         state.isLoading = true

package/src/javascripts/domains/translations/components/options-dialog/translation-options.tsx

@@ -29,7 +29,7 @@ const TranslationOptions: FC<TranslationOptionsProps> = ({
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
 
   const handleChange = (locale: Language['locale']) => () => {
-    if (locale === currentLocale || userLocale === locale) {
+    if (locale === currentLocale || contentLocale === locale) {
       disableTranslations()
     } else {
       enableTranslations(locale)

package/src/javascripts/domains/translations/hooks.ts

@@ -37,7 +37,7 @@ export function useTranslations() {
   )
   const disableTranslations = useCallback(() => {
     sendContext({
-      userLocale: config.context.userLocale,
+      userLocale: config.context.contentLocale,
     })
     dispatch(disableTranslation())
   }, [config.context, dispatch, sendContext])

package/src/javascripts/domains/translations/middleware.ts

@@ -27,15 +27,15 @@ const createI18nMiddleware: Middleware<{}, RootState, any> = ({
       }
 
       if (initializeConfig.fulfilled.match(action)) {
-        if (action.payload.defaultContentLocale) {
-          dispatch(setLocale(action.payload.defaultContentLocale))
+        if (action.payload.defaultUserLocale) {
+          dispatch(setLocale(action.payload.defaultUserLocale))
           return result
         }
       }
 
       if (initializeApp.fulfilled.match(action)) {
-        if (action.payload.contentLocale) {
-          dispatch(setLocale(action.payload.contentLocale))
+        if (action.payload.userLocale) {
+          dispatch(setLocale(action.payload.userLocale))
         }
         return result
       }
@@ -53,12 +53,6 @@ const createI18nMiddleware: Middleware<{}, RootState, any> = ({
         }
       }
 
-      if (disableTranslation.match(action)) {
-        const initialLocale = selectInitialLocale(getState())
-        dispatch(setLocale(initialLocale))
-        return result
-      }
-
       return result
     }
   }

package/src/javascripts/domains/translations/slice.ts

@@ -102,8 +102,8 @@ export const translationSlice = createSlice({
 
         state.isAvailable = feature.enabled === true
         state.languages = [...feature.languages].sort((a, b) => {
-          if (a.locale === payload.defaultContentLocale) return -1
-          if (b.locale === payload.defaultContentLocale) return 1
+          if (a.locale === payload.defaultUserLocale) return -1
+          if (b.locale === payload.defaultUserLocale) return 1
 
           return a.nativeName.localeCompare(b.nativeName, undefined, {
             sensitivity: 'base',

package/src/javascripts/style-guide/states.js

@@ -1602,6 +1602,7 @@ const standardState = {
       context: {
         ...baseState.context,
         contentLocale: 'nl',
+        userLocale: 'en',
       },
     },
     translations: {
@@ -1663,6 +1664,7 @@ const standardState = {
       context: {
         ...baseState.context,
         contentLocale: 'nl',
+        userLocale: 'en',
       },
     },
     translations: {
@@ -1795,6 +1797,7 @@ const standardState = {
       showDisclaimer: true,
       context: {
         contentLocale: 'nl-informal',
+        userLocale: 'en-GB',
       },
     },
     translations: {
@@ -1824,6 +1827,7 @@ const standardState = {
       showDisclaimer: true,
       context: {
         contentLocale: 'nl-informal',
+        userLocale: 'en-GB',
       },
     },
     translations: {

package/src/javascripts/style-guide/style-guide-engine.js

@@ -24,7 +24,7 @@ class SeamlyStyleGuideInstance extends Engine {
       translations: `/client/${this.config.api.key}/translations/{version}/{locale}.json`,
     }
     const translations = await api.getTranslations(
-      this.config.context.contentLocale || 'en-GB',
+      this.config.context.userLocale || 'en-GB',
     )
     const { agentParticipant, userParticipant } = await api.getConfig()
     const participants = [