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

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,
+)

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,49 @@ 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(initializeApp.fulfilled, (state, { payload }) => {
+        state.locale = 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
+  }
+}