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

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

@@ -0,0 +1,45 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import SeamlyUnavailableError from 'api/errors/seamly-unavailable-error'
+import { ThunkAPI } from 'domains/redux/redux.types'
+
+export const initializeConfig = createAsyncThunk<any, void, ThunkAPI>(
+  'initializeConfig',
+  async (_, { extra: { api, config }, rejectWithValue }) => {
+    try {
+      const {
+        features,
+        defaultLocale,
+        preChat,
+        agentParticipant,
+        userParticipant,
+        startChatIcon,
+      } = await api.getConfig()
+
+      const locale = config?.context?.locale || defaultLocale
+
+      return {
+        features,
+        defaultLocale,
+        preChat,
+        agentParticipant,
+        userParticipant,
+        startChatIcon,
+        locale,
+      }
+    } catch (e) {
+      const err = new SeamlyUnavailableError()
+      return rejectWithValue({
+        name: err.name,
+        langKey: err.langKey,
+        message: err.message,
+      })
+    }
+  },
+)
+
+export const resetConfig = createAsyncThunk<unknown, void, ThunkAPI>(
+  'resetConfig',
+  async (_, { extra: { config } }) => {
+    return config
+  },
+)

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

@@ -0,0 +1,19 @@
+import { selectConfig } from 'domains/config/selectors'
+import { useSelector } from 'react-redux'
+
+export const useConfig = () => useSelector(selectConfig)
+
+export function useParticipants() {
+  const { agentParticipant, userParticipant } = useConfig()
+
+  return {
+    agent: agentParticipant,
+    user: userParticipant,
+  }
+}
+
+export function useStartChatIcon() {
+  const { startChatIcon } = useConfig()
+
+  return startChatIcon
+}

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

@@ -0,0 +1,24 @@
+import { createSelector } from '@reduxjs/toolkit'
+import { Config } from 'config.types'
+import { visibilityStates } from 'domains/visibility/constants'
+
+export const selectConfig = createSelector(
+  ({ config }): Config => config,
+  (config) => {
+    let newConfig = {
+      visible:
+        config?.layoutMode === 'inline'
+          ? visibilityStates.open
+          : visibilityStates.minimized,
+      appContainerClassNames: config.appContainerClassNames || [],
+      ...config,
+    }
+    if (typeof newConfig.appContainerClassNames === 'function') {
+      newConfig = {
+        ...newConfig,
+        appContainerClassNames: newConfig.appContainerClassNames(newConfig),
+      }
+    }
+    return newConfig
+  },
+)

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

@@ -0,0 +1,113 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+import { defaultConfig } from 'config'
+import { Config } from 'config.types'
+import { initializeConfig, resetConfig } from 'domains/config/actions'
+import { pick } from 'ui/utils/general-utils'
+
+export const initialConfigState: Config = {
+  ...defaultConfig,
+  api: {
+    domain: '',
+    key: '',
+    secure: true,
+  },
+  hideOnNoUserResponse: false,
+  connectWhenInView: true,
+  showDisclaimer: false,
+  showFaq: false,
+  showSuggestions: true,
+  customComponents: {},
+  defaults: {
+    visible: null,
+  },
+  preChatEvents: [],
+}
+
+const configKeys: (keyof Config)[] = [
+  'hideOnNoUserResponse',
+  'connectWhenInView',
+  'showDisclaimer',
+  'showFaq',
+  'showSuggestions',
+  'namespace',
+  'customComponents',
+  'defaults',
+  'layoutMode',
+  'api',
+  'zIndex',
+  'context',
+  'appContainerClassNames',
+  'messages',
+  'visible',
+  'visibilityCallback',
+  'errorCallback',
+  'agentParticipant',
+  'userParticipant',
+  'startChatIcon',
+]
+
+const updateState = (state, config: Config): Config => {
+  const { messages, ...partialConfig } = pick(config, configKeys)
+  let newState = state
+  if (Object.keys(partialConfig).length > 0) {
+    newState = {
+      ...newState,
+      ...partialConfig,
+    }
+  }
+  if (messages) {
+    newState = {
+      ...newState,
+      messages: {
+        ...newState.messages,
+        ...messages,
+      },
+    }
+  }
+  return newState
+}
+
+export const configSlice = createSlice({
+  name: 'config',
+  initialState: initialConfigState,
+  reducers: {
+    setConfig: (state, { payload }: PayloadAction<Config>) =>
+      updateState(state, payload),
+    updateConfig: (state, { payload }: PayloadAction<Config>) =>
+      updateState(state, payload),
+    setPreChatEvents: (state, { payload: { events } }) => {
+      state.preChatEvents = events
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(resetConfig.fulfilled, (config) => config)
+      .addCase(
+        initializeConfig.fulfilled,
+        (
+          state,
+          {
+            payload: {
+              preChat,
+              agentParticipant,
+              userParticipant,
+              startChatIcon,
+            },
+          },
+        ) => {
+          state.preChatEvents = preChat.map((payload) => ({
+            type: 'message',
+            payload,
+          }))
+
+          state.agentParticipant = agentParticipant
+          state.userParticipant = userParticipant
+          state.startChatIcon = startChatIcon
+        },
+      )
+  },
+})
+
+export const { setConfig, updateConfig, setPreChatEvents } = configSlice.actions
+
+export default configSlice.reducer

package/src/javascripts/domains/errors/index.js

@@ -1,15 +1,15 @@
-import { createDomain } from 'lib/redux-helpers'
-import { Selectors as ConfigSelectors } from 'domains/config'
-
-const { createAction } = createDomain('errors')
+import { createAction } from '@reduxjs/toolkit'
+import { selectConfig } from 'domains/config/selectors'
 
 export const catchError = createAction('catch-error', (error) => ({ error }))
 
-export function createMiddleware({ api: seamlyApi }) {
+export function createErrorsMiddleware({ api: seamlyApi }) {
   return ({ getState }) => {
     const handleError = (action) => {
-      const { errorCallback, namespace, api, layoutMode } =
-        ConfigSelectors.selectConfig(getState())
+      const { errorCallback, namespace, api, layoutMode } = selectConfig(
+        getState(),
+      )
+
       errorCallback?.(action.error, {
         namespace,
         api,
@@ -18,10 +18,14 @@ export function createMiddleware({ api: seamlyApi }) {
         action: action.type ? action : undefined,
       })
     }
+
     return (next) => (action) => {
       try {
-        if (action.error) {
-          handleError(action)
+        if (action.payload?.originalEvent?.payload) {
+          handleError({
+            error: action.payload,
+            type: action.payload?.originalEvent?.payload?.type,
+          })
         }
         return next(action)
       } catch (error) {

package/src/javascripts/domains/forms/context.ts

@@ -0,0 +1,14 @@
+import type { FormContextType } from 'domains/forms/forms.types'
+import { createContext } from 'preact'
+
+const FormContext = createContext<FormContextType>({
+  handleSubmit: () => undefined,
+  isSubmitted: false,
+  isValid: false,
+  updateControlValue: () => undefined,
+  updateControlTouched: () => undefined,
+  errors: undefined,
+})
+
+export default FormContext
+export const { Provider, Consumer } = FormContext

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

@@ -0,0 +1,24 @@
+export type FormContextType = {
+  handleSubmit: (e: Event) => void
+  isSubmitted: boolean
+  isValid: boolean
+  formId?: string
+  updateControlValue: (name: string, value: string) => void
+  updateControlTouched: (name: string, value: boolean) => void
+  errors?: Record<string, unknown>
+  validationSchema?: Record<string, unknown>
+  values?: Record<string, string>
+}
+
+export type ControlState = {
+  value?: string
+  touched?: boolean
+  name?: string
+}
+
+export interface FormState {
+  [key: string]: {
+    persistData?: boolean
+    controls: Record<string, ControlState>
+  }
+}

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

@@ -1,22 +1,23 @@
+import { deregisterControl, registerControl } from 'domains/forms/slice'
+import {
+  getFormById,
+  getControlValueByName,
+  getControlTouchedByName,
+} from 'domains/forms/selectors'
 import {
-  useCallback,
   useContext,
+  useMemo,
   useEffect,
   useLayoutEffect,
-  useMemo,
-  useRef,
+  useCallback,
 } from 'preact/hooks'
-import { useSelectorWithProps, useStoreDispatch } from 'domains/redux'
+import { useDispatch, useSelector } from 'react-redux'
 import FormContext from './context'
-import * as Actions from './actions'
-import {
-  getControlValueByName,
-  getFormById,
-  getControlTouchedByName,
-} from './selectors'
 import { validate } from './utils'
+import type { RootState } from 'domains/store'
+import type { FormContextType } from 'domains/forms/forms.types'
 
-export function useFormContext() {
+export function useFormContext(): FormContextType {
   return useContext(FormContext)
 }
 
@@ -42,21 +43,17 @@ export function useValidations(values, validationSchema) {
 }
 
 export function useFormControl(name) {
-  const dispatch = useStoreDispatch()
+  const dispatch = useDispatch()
   const { formId, updateControlValue, updateControlTouched, errors } =
     useFormContext()
-  const form = useSelectorWithProps(getFormById, { formId }, [formId])
+  const form = useSelector((state: RootState) => getFormById(state, { formId }))
   const isRegistered = !!form
-  const isRegisteredRef = useRef()
-  isRegisteredRef.current = isRegistered
-  const value = useSelectorWithProps(getControlValueByName, { formId, name }, [
-    formId,
-    name,
-  ])
-  const touched = useSelectorWithProps(
-    getControlTouchedByName,
-    { formId, name },
-    [formId, name],
+  const value = useSelector((state: RootState) => {
+    return getControlValueByName(state, { formId, name })
+  })
+
+  const touched = useSelector((state: RootState) =>
+    getControlTouchedByName(state, { formId, name }),
   )
   const error = errors?.[name]
   const isValid = !error
@@ -64,13 +61,13 @@ export function useFormControl(name) {
   useEffect(() => {
     // Make sure the form is registered
     // Since child useEffect runs before FormProvider useEffect
-    if (isRegisteredRef.current) {
-      dispatch(Actions.registerControl(formId, name))
+    if (isRegistered) {
+      dispatch(registerControl({ formId, name }))
     }
   }, [isRegistered, formId, name, dispatch])
   useLayoutEffect(() => {
     return () => {
-      dispatch(Actions.deregisterControl(formId, name))
+      dispatch(deregisterControl({ formId, name }))
     }
   }, [isRegistered, formId, name, dispatch])
 

package/src/javascripts/domains/forms/{provider.js → provider.tsx}

@@ -1,3 +1,14 @@
+import { setHasResponded } from 'domains/app/slice'
+import { Provider } from 'domains/forms/context'
+import { useValidations } from 'domains/forms/hooks'
+import { getFormValuesByFormId } from 'domains/forms/selectors'
+import {
+  deregisterForm,
+  registerForm,
+  updateControlTouched as dispatchControlTouched,
+  updateControlValue as dispatchControlValue,
+} from 'domains/forms/slice'
+import type { RootState } from 'domains/store'
 import {
   useCallback,
   useEffect,
@@ -5,12 +16,7 @@ import {
   useMemo,
   useState,
 } from 'preact/hooks'
-import { useSelectorWithProps, useStoreDispatch } from 'domains/redux'
-import { setHasResponded } from 'domains/app/actions'
-import { Provider } from 'domains/forms/context'
-import * as Actions from 'domains/forms/actions'
-import { getFormValuesByFormId } from 'domains/forms/selectors'
-import { useValidations } from 'domains/forms/hooks'
+import { useDispatch, useSelector } from 'react-redux'
 
 export default function FormProvider({
   children,
@@ -21,10 +27,10 @@ export default function FormProvider({
   validationSchema,
   ...props
 }) {
-  const dispatch = useStoreDispatch()
-  const values = useSelectorWithProps(getFormValuesByFormId, { formId }, [
-    formId,
-  ])
+  const dispatch = useDispatch()
+  const values = useSelector((store: RootState) =>
+    getFormValuesByFormId(store, { formId }),
+  )
   const [isSubmitted, setIsSubmitted] = useState(false)
   const [externalErrors, setExternalErrors] = useState({})
   const { isValid: validationIsValid, errors: validationErrors } =
@@ -40,27 +46,27 @@ export default function FormProvider({
   // register
   useLayoutEffect(() => {
     // register form in redux store
-    dispatch(Actions.registerForm(formId, persistData))
+    dispatch(registerForm({ formId, persistData }))
   }, [formId, persistData, dispatch])
 
   // deregister
   useEffect(() => {
     return () => {
       // deregister form from redux store
-      dispatch(Actions.deregisterForm(formId))
+      dispatch(deregisterForm({ formId }))
     }
   }, [formId, persistData, dispatch])
 
   const updateControlValue = useCallback(
     (name, value) => {
-      dispatch(Actions.updateControlValue(formId, name, value))
+      dispatch(dispatchControlValue({ formId, name, value }))
     },
     [formId, dispatch],
   )
 
   const updateControlTouched = useCallback(
     (name, touched) => {
-      dispatch(Actions.updateControlTouched(formId, name, touched))
+      dispatch(dispatchControlTouched({ formId, name, touched }))
     },
     [dispatch, formId],
   )

package/src/javascripts/domains/forms/{selectors.js → selectors.ts}

@@ -1,12 +1,10 @@
-import { createSelector } from 'reselect'
-import { getPropSelector } from 'domains/redux/utils'
-import { selectState } from './utils'
+import { createSelector } from '@reduxjs/toolkit'
 
-export const getState = selectState
+export const getState = ({ forms }) => forms
 
 export const getFormById = createSelector(
   getState,
-  getPropSelector('formId'),
+  (_, { formId }) => formId,
   (forms, formId) => forms[formId],
 )
 
@@ -17,23 +15,24 @@ export const getFormControlsByFormId = createSelector(
 
 export const getFormValuesByFormId = createSelector(
   getFormControlsByFormId,
-  (controls) => {
+  (controls: { [key: string]: { value: string } }) => {
     const valuesObj = {}
     Object.entries(controls).forEach(([key, { value }]) => {
       valuesObj[key] = value
     })
+
     return valuesObj
   },
 )
 
 export const getControlValueByName = createSelector(
   getFormControlsByFormId,
-  getPropSelector('name'),
+  (_, { name }) => name,
   (controls, name) => controls[name]?.value,
 )
 
 export const getControlTouchedByName = createSelector(
   getFormControlsByFormId,
-  getPropSelector('name'),
+  (_, { name }) => name,
   (controls, name) => controls[name]?.touched,
 )

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

@@ -0,0 +1,84 @@
+import { createSlice } from '@reduxjs/toolkit'
+import { resetApp } from 'domains/app/actions'
+import { ControlState } from 'domains/forms/forms.types'
+
+const initialFormState = {
+  controls: {},
+}
+
+const initialControlState: ControlState = {
+  value: '',
+  touched: false,
+}
+
+const initialState = {
+  controls: initialControlState,
+}
+
+export const formsSlice = createSlice({
+  name: 'forms',
+  initialState,
+  reducers: {
+    registerForm: (state, { payload: { persistData, formId } }) => {
+      const formState = persistData
+        ? state[formId] ?? { ...initialFormState, persistData }
+        : { ...initialFormState, persistData }
+
+      state[formId] = formState
+    },
+    deregisterForm: (state, { payload: { formId } }) => {
+      if (!state[formId]?.persistData) {
+        delete state[formId]
+      }
+
+      return state
+    },
+    // Form control handlers
+    registerControl: (state, { payload: { name, formId } }) => {
+      state[formId].controls = {
+        [name]: initialControlState,
+      }
+    },
+    deregisterControl: (state, { payload: { name, formId } }) => {
+      const form = state[formId]
+      if (!form) {
+        return state
+      }
+      if (form.persistData) {
+        return state
+      }
+      const controls = { ...form.controls }
+      delete controls[name]
+      return {
+        ...state,
+        [formId]: {
+          ...form,
+          controls,
+        },
+      }
+    },
+    updateControlValue: (state, { payload: { formId, name, value } }) => {
+      // return updateFormControl(state, formId, name, { value })
+      if (!state[formId]?.controls) return
+      state[formId].controls[name].value = value
+    },
+    updateControlTouched: (state, { payload: { formId, name, touched } }) => {
+      if (!state[formId]?.controls[name]) return
+      state[formId].controls[name].touched = touched
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(resetApp.pending, () => initialState)
+  },
+})
+
+export const {
+  registerForm,
+  deregisterForm,
+  registerControl,
+  deregisterControl,
+  updateControlValue,
+  updateControlTouched,
+} = formsSlice.actions
+
+export default formsSlice.reducer

package/src/javascripts/domains/forms/utils.ts

@@ -0,0 +1,15 @@
+export function validate(values, schema: Record<string, unknown> = {}) {
+  return Object.entries(schema).reduce((errors, [key, validations]) => {
+    const validationsArr = !Array.isArray(validations)
+      ? [validations]
+      : validations
+
+    for (let i = 0; i < validationsArr?.length ?? 0; i++) {
+      if (!validationsArr[i].fn(values[key], validationsArr[i].compareValue)) {
+        errors[key] = validationsArr[i].errorText
+        break
+      }
+    }
+    return errors
+  }, {})
+}

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

@@ -0,0 +1,24 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+import { selectLocale } from 'domains/i18n/selectors'
+import { ThunkAPI } from 'domains/redux/redux.types'
+
+export const setLocale = createAsyncThunk<
+  {
+    translations: Record<string, string>
+    locale: string
+  },
+  string,
+  ThunkAPI
+>('setLocale', async (locale, { getState, extra: { api } }) => {
+  const stateLocale = selectLocale(getState())
+  if (locale === stateLocale) {
+    return undefined
+  }
+
+  const response = await api.getTranslations(locale)
+
+  return {
+    translations: response,
+    locale,
+  }
+})

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

@@ -1,10 +1,10 @@
-import { useCallback } from 'preact/hooks'
 import {
   MessageFormatter,
   pluralTypeHandler,
   selectTypeHandler,
 } from '@ultraq/icu-message-formatter'
-import { useSelector } from 'domains/redux'
+import { useCallback } from 'preact/hooks'
+import { useSelector } from 'react-redux'
 import * as Selectors from './selectors'
 
 // The passed in locale (en-GB) is only used to call Intl.PluralRules.select() in

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

@@ -0,0 +1,6 @@
+export interface I18nState {
+  translations: Record<string, string>
+  isLoading: boolean
+  initialLocale?: string
+  locale?: string
+}

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

@@ -0,0 +1,16 @@
+import { createSelector } from 'reselect'
+
+export const selectTranslations = createSelector(
+  ({ i18n }) => i18n,
+  ({ translations }) => translations,
+)
+
+export const selectInitialLocale = createSelector(
+  ({ i18n }) => i18n,
+  ({ initialLocale }) => initialLocale,
+)
+
+export const selectLocale = createSelector(
+  ({ i18n }) => i18n,
+  ({ locale }) => locale,
+)