pwa-channels-sdk v2.0.21
PWA Channels SDK
pwa-channels-sdk
An sdk built to incorporate all the Tata channels according to user interests which gives the user conversational overview of different Tata products and offerings. Can be used as a plug-n-play library into the main application.
Installation
npm install @tata-digital/pwa-channels-sdk
Also, if you are not already using
react-router-dom
in your project, then install it since it's required to run the SDK.
npm install react-router-dom
Upgrade
If your application already has a (possibly outdated) installed version of @tata-digital/pwa-channels-sdk
, then you can upgrade it to the latest version of @tata-digital/pwa-channels-sdk
using the following command.
npm install @tata-digital/pwa-channels-sdk@latest
Integration Steps
- Wrap your application's root App component inside
ChannelsProvider
component exposed from@tata-digital/pwa-channels-sdk
package and pass theconfig
as a prop to theChannelsProvider
component.
import { ChannelsProvider } from '@tata-digital/pwa-channels-sdk'
import '@tata-digital/pwa-channels-sdk/dist/index.css'
const config = {
mode: 'dev', // dev, prod
apiBaseUrl: 'https://dapi.tatadigital.com/channelssdkdev'
}
<ChannelsProvider config={config}>
<App />
</ChannelsProvider>
The above config
object is the minimum configuration required to get started. The apiBaseUrl
property of the config
object is the base url of the Channels SDK API endpoint. Other optional attributes of the config
object will be discussed later in this document.
Make sure that you also import the style file as shown above so that Channels components are rendered correctly.
Also, please make sure that the ChannelsProvider
is wrapped inside BrowserRouter
provided by react-router-dom
.
<BrowserRouter>
<ChannelsProvider config={config}>
<App />
</ChannelsProvider>
</BrowserRouter>
- Next, import and use the
ChannelsRibbon
component exposed from@tata-digital/pwa-channels-sdk
package inside theHome
component to render the Channels SDK Ribbon on the Homepage.
import React from 'react'
import { ChannelsRibbon } from '@tata-digital/pwa-channels-sdk'
const Home = () => (
<>
<ChannelsRibbon />
</>
)
- Next, please add the
/channels
route in your routing setup as shown below. This will setup the routes being served by@tata-digital/pwa-channels-sdk
after integration with the main application.
import { ChannelsRoot } from '@tata-digital/pwa-channels-sdk';
<Switch>
<Route exact path="/" component={Home} />
<Route path="/channels" component={ChannelsRoot} />
</Switch>
Please make sure that you do not use the exact
keyword for the /channels
route setup, since internally ChannelsRoot
uses nested routing to setup all the different routes being served by Channels SDK.
Final Layout
- Home.js
import React from 'react'
import { ChannelsRibbon } from '@tata-digital/pwa-channels-sdk'
const Home = () => (
<>
<ChannelsRibbon />
</>
)
- App.js
import React, { Component } from 'react'
import { BrowserRouter, Route, Switch } from "react-router-dom"
import { ChannelsProvider, ChannelsRoot } from '@tata-digital/pwa-channels-sdk'
import '@tata-digital/pwa-channels-sdk/dist/index.css'
const config = {
mode: 'dev', // dev, prod
apiBaseUrl: 'https://dapi.tatadigital.com/channelssdkdev'
}
class App extends Component {
render () {
return (
<BrowserRouter>
<ChannelsProvider config={config}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/channels" component={ChannelsRoot} />
</Switch>
</ChannelsProvider>
</BrowserRouter>
)
}
}
Register Callbacks
You can register different callbacks with the Channels SDK during the initial setup. These callbacks could later be called by the Channels SDK to notify the main application about the different pre-defined events.
Currently, we support the following callbacks:
userAction()
: This callback is triggered by the SDK when a user clicks on some CTA inside the Channels pages. This callback gets passed an objectactionObj
as the argument which hastype
anddeeplink
as its properties. In short,actionObj.deeplink
is the url to which the user is expected to be navigated when this callback is invoked.channelsLoaded()
: This callback is triggered by the SDK to notify the status of the loading of the channels SDK to the main application. The argument passed to the callback istrue
to notify the successful loading of the Channels, andfalse
is passed in case the channels SDK fails to load.eventOccurred()
: This callback is triggered by the SDK for special events. For example when a payment request is expired this callback is triggered. This callback is passed with a stringeventType
ie. name of the event and an objectadditionalParams
containing additional information about the event.toggleTabbar()
: This callback is triggered by the SDK to notify hide or show bottom navigation tab bar to the main application. The argument passed to the callback istrue
to show tab bar with 2nd ( conversation ) tab as active andfalse
is passed to hide bottom navigation tab bar.unreadChannelsCount()
: This callback is triggered by the SDK to notify the status of the channels having unread messages to the main application. The argument passed to the callback is a numeric value expressing the total number of channel having unread messages, 0 means no unread messages.
For registering callbacks, you can put them in the config
object passed to the Channels SDK during the initial setup.
const userAction = (actionObj) => {
window.location.assign(actionObj.deeplink)
}
const channelsLoaded = (flag) => {
if (flag) console.log('Channels loaded successfully.');
else console.log('Channels loading failed!');
}
const eventOccurred = (eventType,additionalParams) => {
if(eventType === 'paymentExpiry'){
//update the payment request widget
}
}
const toggleTabbar = (showTabs) => {
if (showTabs) // bottom navigation tab bar will be shown with 2nd ( conversation ) tab as active
else // hide the bottom navigation tab bar
}
const unreadChannelsCount = (count) => {
// count: total number of channels having unread messages
}
const config = {
mode: 'dev', // dev, prod
apiBaseUrl: 'https://dapi.tatadigital.com/channelssdkdev',
callbacks: { userAction, channelsLoaded, eventOccurred, unreadChannelsCount, toggleTabbar }
}
Exposed Methods
Channels SDK exposes different methods which can be invoked by the main application when it wants to interact with the SDK. Apart from sdk/user initialization interface, these methods serve as the primary way of handling situations when the main application wants to send some data to the Channels SDK or it wants to get information about some instantaneous (current) state inside the Channels SDK.
@tata-digital/pwa-channels-sdk
exposes an HOCwithChannels()
which provides access to the methods exposed by the SDK.
import { withChannels } from '@tata-digital/pwa-channels-sdk'
const App = (props) => {
console.log(props.channels) // shows methods exposed
return (
...
)
}
export default withChannels(App)
As shown above, the channels
property of the component props gives the main application access to all the methods exposed by the Channels SDK.
Currently, we expose the following methods:
initSdk({ accountId })
- Required -
accountId
: string - Initialize the SDK with the main application's account Id.
- NOTE: The
initSdk
method is supposed to be called as soon as your web application is mounted in the browser even if the user has not logged-in yet.
- Required -
initUser({ userId, firstName?, lastName? })
- Required -
userId
: string - Optional -
firstName
: string,lastName
: string - Initialize the current user by providing user id and optionally their first and last name.
- Please initialize the SDK first, before calling this method.
- NOTE: The
initUser
method is expected to be called after the user has successfully logged-in into your web application.
- Required -
reset()
- Resets the Channels SDK to its initial state by uninitializing/resetting the sdk and user data.
getStatus()
- Get the current status for the SDK along with information related to the current user, installed sdk version, etc.
pushNotification(pushObjectData, history)
- Required -
pushObjectData
: object,history
: RouteComponentProps.history pushObjectData.customParams
is an object received during push notification.
- Required -
viewRibbon(view)
- Required -
view
: boolean - Hide and show ribbon based on passed
view
.
- Required -
openChannelPage(programId)
- Required -
programId
: string - Navigate to the channel whose programId is passed into the function
- Required -
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago