@demoeng/usecase-customer-opt-in NPM

Dependencies

This package has some dependencies in order for it to work properly

This package needs the service owl-sync-storage-layer to be running
The environment variable REACT_APP_SYNCSTORAGEAPI needs to be specified on you .env file

Working with the package

Set Up

Before you can use the package's components and hooks you will have to do some minor boilerplate:

Add the optInReducer to your createStore map of reducers where it's key has to be the exported optInName constant
Wrap the component tree under the SyncProvider component
Add the sagas to your store by destructuring the optInSagas array into your createStore's second argument

A brief example:

// More imports up
import {
    optInReducer,
    optInName,
    SyncProvider,
    optInSagas,
} from '@demoeng/usecase-customer-opt-in'

const reducers = {
    [optInName]: optInReducer,
}
const store = createStore(reducers, [...optInSagas])

ReactDOM.render(
        <Provider store={store}>
          <SyncProvider>
            <App/>
          </SyncProvider>
        </Provider>,
        document.getElementById('root'),
)

You may also want to add this package in your webpack.config.js in the list of externals

Add the translations to the useLanguageProvider hook invocation, otherwise the strings of the package will not be imported to your app.

// More imports
import {translations as optInTranslations} from '@demoeng/usecase-customer-opt-in'
import {createTheme} from '@mui/material/styles'

const translations = [...optInTranslations]
const defaultTheme = createTheme(webThemes.default)

const App = () => {
  useLanguageProvider({translations, defaultLanguages})
  return(
          <div>
            {/* your components here */}
          </div>
  )
}