@seamly/web-ui 20.7.0 → 20.8.0-beta.1

package/src/javascripts/domains/i18n/{reducer.js → slice.ts}

@@ -1,8 +1,10 @@
-import * as AppActions from 'domains/app/actions'
-import * as Actions from './actions'
-import { createReducer } from './utils'
+import { createSlice } from '@reduxjs/toolkit'
+import { initializeApp } from 'domains/app/actions'
+import { initializeConfig } from 'domains/config/actions'
+import { setLocale } from 'domains/i18n/actions'
+import { I18nState } from 'domains/i18n/i18n.types'
 
-const defaultState = {
+const initialState: I18nState = {
   translations: {
     'errors.configError.message':
       'We are sorry this happened, please retry at a later time.',
@@ -28,45 +30,46 @@ const defaultState = {
   },
   isLoading: false,
   initialLocale: undefined,
+  locale: undefined,
 }
 
-export default createReducer(
-  {
-    [Actions.setInitialLocale]: (state, { locale }) => ({
-      ...state,
-      initialLocale: locale,
-    }),
-    [Actions.setLocale.pending]: (state) => ({
-      ...state,
-      isLoading: true,
-    }),
-    [Actions.setLocale.fulfilled]: (
-      state,
-      { payload: translations, meta: { arg: locale } },
-    ) => {
-      if (!translations) {
-        return { ...state, isLoading: false }
-      }
-      return {
-        ...state,
-        isLoading: false,
-        locale,
-        translations: Object.keys(translations)
+export const i18nSlice = createSlice({
+  name: 'app',
+  initialState,
+  reducers: {
+    setInitialLocale: (state, action) => {
+      state.initialLocale = action.payload
+    },
+    setTranslations: (state, { payload }) => {
+      state.translations = payload
+    },
+  },
+  extraReducers: (builder) => {
+    // Add reducers for additional action types here, and handle loading state as needed
+    builder
+      .addCase(initializeConfig.fulfilled, (state, { payload }) => {
+        state.initialLocale = payload.locale
+      })
+      .addCase(setLocale.fulfilled, (state, { payload }) => {
+        if (!payload?.translations) {
+          state.isLoading = false
+          return
+        }
+
+        state.locale = payload.locale
+        state.translations = Object.keys(payload.translations)
           .sort()
           .reduce(
             (accum, key) => ({
               ...accum,
-              [key]: translations[key],
+              [key]: payload.translations[key],
             }),
             {},
-          ),
-      }
-    },
-    [Actions.setLocale.rejected]: (state) => ({
-      ...state,
-      isLoading: false,
-    }),
-    [AppActions.initialize.pending]: () => defaultState,
+          )
+      })
   },
-  defaultState,
-)
+})
+
+export const { setInitialLocale, setTranslations } = i18nSlice.actions
+
+export default i18nSlice.reducer

package/src/javascripts/domains/interrupt/{hooks.js → hooks.ts}

@@ -1,6 +1,6 @@
+import { useI18n } from 'domains/i18n/hooks'
 import { useMemo } from 'preact/hooks'
-import { useI18n } from 'domains/i18n'
-import { useSelector } from 'domains/redux'
+import { useSelector } from 'react-redux'
 import * as Selectors from './selectors'
 
 export function useInterrupt() {

package/src/javascripts/domains/interrupt/{middleware.js → middleware.ts}

@@ -1,9 +1,10 @@
-import SeamlyGeneralError from 'api/errors/seamly-general-error'
 import SeamlyConfigurationError from 'api/errors/seamly-configuration-error'
-import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
+import SeamlyGeneralError from 'api/errors/seamly-general-error'
 import SeamlyOfflineError from 'api/errors/seamly-offline-error'
+import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
 import SeamlyUnauthorizedError from 'api/errors/seamly-unauthorized-error'
 import SeamlyUnavailableError from 'api/errors/seamly-unavailable-error'
+import { setInterrupt } from 'domains/interrupt/slice'
 
 const handledErrorTypes = [
   SeamlyGeneralError,
@@ -14,13 +15,15 @@ const handledErrorTypes = [
   SeamlyUnavailableError,
 ]
 
-export default function createMiddleware({ api }) {
+export default function createInterruptMiddleware({ api }) {
   return () => (next) => (action) => {
-    const { error } = action
-    if (error) {
-      if (!handledErrorTypes.some((ErrorType) => error instanceof ErrorType)) {
-        throw error
-      } else if (error.action === 'reset') {
+    const { payload, type } = action
+    if (type === setInterrupt.type) {
+      if (
+        !handledErrorTypes.some((ErrorType) => payload.name === ErrorType.name)
+      ) {
+        throw new Error(payload)
+      } else if (payload.action === 'reset') {
         // [SMLY-942] We clear the store before a reset to force a new conversation if the page is refreshed before the conversation is reset
         api.disconnect().then(() => {
           api.clearStore()

package/src/javascripts/domains/interrupt/selectors.ts

@@ -0,0 +1,6 @@
+import { createSelector } from '@reduxjs/toolkit'
+
+export const selectError = createSelector(
+  ({ interrupt }) => interrupt,
+  ({ error }) => error,
+)

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

@@ -0,0 +1,40 @@
+import { createSlice, isAnyOf } from '@reduxjs/toolkit'
+import { initializeApp, resetApp } from 'domains/app/actions'
+import { initializeConfig } from 'domains/config/actions'
+import { setLocale } from 'domains/i18n/actions'
+import { initializeVisibility, setVisibility } from 'domains/visibility/actions'
+
+const initialState = {
+  error: undefined,
+}
+
+export const interruptSlice = createSlice({
+  name: 'interrupt',
+  initialState,
+  reducers: {
+    setInterrupt: (state, action) => {
+      state.error = action.payload
+    },
+    clearInterrupt: () => initialState,
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(resetApp.fulfilled, () => initialState)
+      .addMatcher(
+        isAnyOf(
+          initializeApp.rejected,
+          initializeConfig.rejected,
+          setLocale.rejected,
+          setVisibility.rejected,
+          initializeVisibility.rejected,
+        ),
+        (state, { payload }) => {
+          state.error = payload
+        },
+      )
+  },
+})
+
+export const { setInterrupt, clearInterrupt } = interruptSlice.actions
+
+export default interruptSlice.reducer

package/src/javascripts/domains/options/middleware.js

@@ -1,16 +1,19 @@
-import { seamlyActions } from 'ui/utils/seamly-utils'
+import {
+  setUserSelectedOption,
+  setUserSelectedOptions,
+} from 'domains/store/slice'
 
-export default function createMiddleware({ api }) {
+export default function createOptionsMiddleware({ api }) {
   return () => (next) => (action) => {
     const result = next(action)
     switch (action.type) {
-      case seamlyActions.SET_USER_SELECTED_OPTIONS:
-        api.store.set('options', action.options)
+      case setUserSelectedOptions.toString():
+        api.store.set('options', action.payload)
         break
-      case seamlyActions.SET_USER_SELECTED_OPTION:
+      case setUserSelectedOption.toString():
         api.store.set('options', {
           ...(api.store.get('options') || {}),
-          [action.option]: action.value,
+          [action.payload.option]: action.payload.value,
         })
         break
     }

package/src/javascripts/domains/redux/redux.types.ts

@@ -0,0 +1,11 @@
+import { Config } from 'config.types'
+import type { RootState } from 'domains/store'
+
+export type ThunkAPI = {
+  state: RootState
+  extra: {
+    api: any
+    config: Config
+    eventBus: any
+  }
+}

package/src/javascripts/domains/store/index.ts

@@ -0,0 +1,53 @@
+import { configureStore } from '@reduxjs/toolkit'
+import appReducer from 'domains/app/slice'
+import configReducer from 'domains/config/slice'
+import { createErrorsMiddleware } from 'domains/errors'
+import formsReducer from 'domains/forms/slice'
+import i18nReducer from 'domains/i18n/slice'
+import createInterruptMiddleware from 'domains/interrupt/middleware'
+import interruptReducer from 'domains/interrupt/slice'
+import createOptionsMiddleware from 'domains/options/middleware'
+import stateReducer from 'domains/store/slice'
+import createI18nMiddleware from 'domains/translations/middleware'
+import translationReducer from 'domains/translations/slice'
+import visibilityReducer from 'domains/visibility/slice'
+import { useDispatch } from 'react-redux'
+
+export function createStore({ initialState, api, eventBus, config }) {
+  const store = configureStore({
+    reducer: {
+      state: stateReducer,
+      app: appReducer,
+      config: configReducer,
+      i18n: i18nReducer,
+      translations: translationReducer,
+      visibility: visibilityReducer,
+      forms: formsReducer,
+      interrupt: interruptReducer,
+    },
+    preloadedState: initialState,
+    middleware: (getDefaultMiddleWare) =>
+      getDefaultMiddleWare({
+        thunk: {
+          extraArgument: {
+            api,
+            eventBus,
+            config,
+          },
+        },
+        serializableCheck: false,
+      }).concat([
+        createErrorsMiddleware({ api }),
+        createInterruptMiddleware({ api }),
+        createOptionsMiddleware({ api }),
+        createI18nMiddleware,
+      ]),
+  })
+
+  return store
+}
+export type Store = ReturnType<typeof createStore>
+export type RootState = ReturnType<Store['getState']>
+export type AppDispatch = Store['dispatch']
+
+export const useAppDispatch: () => AppDispatch = useDispatch