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>
  )
}

Component

For basic opt in, opt out and list functionalities you can just add the OptInPage component that will work out of the box

Hooks

useSyncList

Empowers you to fetch the list of customers currently opted in and to listen to customers being added, removed or updated in the opt-in list