feat(wip): add in app activated support on the web #2703
Conversation
| content: | ||
| 'Welcome to Novu! Click on this notification to <b>visit the cloud admin panel</b> managing this message', | ||
| cta: { | ||
| type: ChannelCTATypeEnum.REDIRECT, | ||
| data: { url: `/templates/edit/${notificationTemplate?._id}` }, |
There was a problem hiding this comment.
We need to validate the template copy and if we want to reuse the CLI one or not.
| @@ -0,0 +1,63 @@ | |||
| export function localNavigate() { | |||
There was a problem hiding this comment.
created this module in order to manage the route location
| @@ -0,0 +1,24 @@ | |||
| import { useEffect, useState } from 'react'; | |||
There was a problem hiding this comment.
need to move to hooks folder
| > | ||
| {embedCode} | ||
| </Prism> | ||
| <Prism code={embedCode} /> |
There was a problem hiding this comment.
not related to the project (created reusable Prism)
| if (variable.name === 'subscriberId' && variable.manual) { | ||
| return variable.value; | ||
| } |
There was a problem hiding this comment.
At the moment the subscriberId is set through the web client user, i added additional logic in order to pass manual param, so we can reuse this component (trigger button+modal)
| export function getNotificationGroups() { | ||
| return api.get(`/v1/notification-groups`); | ||
| } |
There was a problem hiding this comment.
not related to the project moved it to the relevant api folder.
| export function getNotificationsList(page = 0, limit = 10) { | ||
| return api.getFullResponse(`/v1/notification-templates`, { page, limit }); | ||
| } |
There was a problem hiding this comment.
not related to the project moved it to the relevant api folder.
| import { useQuery } from '@tanstack/react-query'; | ||
| import { getNotificationGroups } from '../notification-groups'; | ||
|
|
||
| export function useNotificationGroup() { |
There was a problem hiding this comment.
created useNotificationGroup in order to reuse it.
apps/web/src/App.tsx
Outdated
| cells={[ | ||
| { | ||
| imagePath: `/static/images/frameworks/dark/react.png`, | ||
| navigateTo: '/quickstart/notification-center/set-up/react', | ||
| }, | ||
| { | ||
| imagePath: `/static/images/frameworks/dark/angular.png`, | ||
| navigateTo: '/quickstart/notification-center/set-up/angular', | ||
| }, | ||
| { | ||
| imagePath: `/static/images/frameworks/dark/vue.png`, | ||
| navigateTo: '/quickstart/notification-center/set-up/vue', | ||
| }, | ||
| ]} |
There was a problem hiding this comment.
Maybe it will be a good idea to refactor this one, move the cells param to consts file or create a component that will contain this logic (+ moving cells to consts)
There was a problem hiding this comment.
same for other routes.
apps/web/src/App.tsx
Outdated
| } | ||
| /> | ||
| <Route | ||
| path="/quickstart/notification-center/trigger" |
There was a problem hiding this comment.
perhaps we can rename i to a better one, on this page we trigger event + pointing the user to the templates page
apps/web/src/App.tsx
Outdated
| title={'Now is the time to trigger notification'} | ||
| description={'do it! '} | ||
| > | ||
| <TestNotificationTrigger /> |
There was a problem hiding this comment.
this copy and TestNotificationTrigger is still wip.
| type: StepTypeEnum.IN_APP, | ||
| content: | ||
| 'Welcome to Novu! Click on this notification to <b>visit the cloud admin panel</b> managing this message', | ||
| cta: { | ||
| type: ChannelCTATypeEnum.REDIRECT, | ||
| data: { url: `/templates/edit/${notificationTemplate?._id}` }, |
There was a problem hiding this comment.
Need to think about the copy of the notification that will be sent to the user's bell
There was a problem hiding this comment.
Can we redirect the user back to the screen of the onboarding once clicked?
There was a problem hiding this comment.
I think we can but only if we add to all of the clients (and by clients I mean react/angular/vue/demo and the embed code snippets) onNotificationClick handler with window.location.href update.
There was a problem hiding this comment.
@scopsy let me know what you think about it.
There was a problem hiding this comment.
@scopsy i will merge the branch, but let me know what you think, maybe we can remove it.
apps/web/src/pages/quick-start/components/TestNotificationTrigger.tsx
Outdated
Show resolved
Hide resolved
| type: StepTypeEnum.IN_APP, | ||
| content: | ||
| 'Welcome to Novu! Click on this notification to <b>visit the cloud admin panel</b> managing this message', | ||
| cta: { | ||
| type: ChannelCTATypeEnum.REDIRECT, | ||
| data: { url: `/templates/edit/${notificationTemplate?._id}` }, |
There was a problem hiding this comment.
Can we redirect the user back to the screen of the onboarding once clicked?
What change does this PR introduce?
adds the new in-app onboarding.
Why was this change needed?
in order to provide the user more information about the implementation of the in-app channel.
Other information (Screenshots)