feat: add modal on get started page for onboarding experiment v2 #5401

jainpawan21 · 2024-04-11T10:24:31Z

Summary by CodeRabbit

New Features
- Introduced an OnboardingExperimentModal for enhanced user onboarding experience.
- Added functionality to remember user progress when creating an organization.
Improvements
- Updated button text in the WorkflowEditor to 'Trigger Notification' for clarity under specific conditions.
Performance Enhancements
- Adjusted memory allocation settings for application start-up and build processes to improve performance.

netlify · 2024-04-11T10:29:05Z

✅ Deploy Preview for dev-web-novu ready!

Name	Link
🔨 Latest commit	`d0de31e`
🔍 Latest deploy log	https://app.netlify.com/sites/dev-web-novu/deploys/66193dab5f774d0008914746
😎 Deploy Preview	https://deploy-preview-5401--dev-web-novu.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-04-11T10:29:30Z

✅ Deploy Preview for novu-design ready!

Name	Link
🔨 Latest commit	`d0de31e`
🔍 Latest deploy log	https://app.netlify.com/sites/novu-design/deploys/66193dab99a9ee0008a2f47a
😎 Deploy Preview	https://deploy-preview-5401--novu-design.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

apps/web/src/pages/auth/components/QuestionnaireForm.tsx

apps/web/src/pages/quick-start/steps/GetStarted.tsx

apps/web/src/pages/templates/workflow/WorkflowEditor.tsx

apps/web/src/pages/quick-start/components/OnboardingExperimentModal.tsx

LetItRock · 2024-04-12T07:37:22Z

apps/web/src/pages/quick-start/steps/GetStarted.tsx

  const [clickedChannel, setClickedChannel] = useState<{
    open: boolean;
    channelType?: ChannelTypeEnum;
  }>({ open: false });

+  const isNovuProd = !IS_DOCKER_HOSTED && ENV === 'production';
+  // open modal only for prod users
+  const isOnboardingModalEnabled = isNovuProd && localStorage.getItem('onboarding_modal') === 'true';


why do we only show this for prod users? how we test it locally?

onboarding workflow to work requires Novu provider enabled. In local machine, novu email provider is not possible to enable. I added this check to avoid that case. Only way to test in local machine is to remove this condition

novu email provider is not possible to enable

that's not true ;) I do have it enabled ;)

scopsy · 2024-04-12T07:45:05Z

@coderabbitai review

coderabbitai · 2024-04-12T07:45:11Z

Walkthrough

This update enhances the web application's performance and user experience. Memory allocation for Node.js processes has been increased to improve efficiency during start and build operations. New features include storing data in local storage post-organization creation and introducing an OnboardingExperimentModal for improved user onboarding. Additionally, the WorkflowEditor component now features updated interaction text under specific conditions.

Changes

File Path	Change Summary
`apps/web/package.json`	Increased memory limits for `start` and `build` scripts.
`.../auth/components/QuestionnaireForm.tsx`	Added local storage functionality after organization creation.
`.../quick-start/components/OnboardingExperimentModal.tsx`	Added new component for customized user onboarding.
`.../quick-start/steps/GetStarted.tsx`	Enhanced with new imports, conditional modal display, and updated analytics tracking.
`.../templates/workflow/WorkflowEditor.tsx`	Updated button text to 'Trigger Notification' under certain conditions.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 2

coderabbitai · 2024-04-12T07:51:45Z

apps/web/src/pages/quick-start/steps/GetStarted.tsx

+  const isNovuProd = !IS_DOCKER_HOSTED && ENV === 'production';
+  // open modal only for prod users
+  const isOnboardingModalEnabled = isNovuProd && localStorage.getItem('onboarding_modal') === 'true';
+


The logic to enable the onboarding modal only for production users might limit the ability to test this feature in non-production environments. Consider adding a configuration or feature flag to enable testing in other environments.

coderabbitai · 2024-04-12T07:51:45Z

apps/web/src/pages/quick-start/components/OnboardingExperimentModal.tsx

+export function OnboardingExperimentModal() {
+  const [opened, setOpened] = useState(true);
+  const theme = useMantineTheme();
+  const segment = useSegment();
+  const { currentOrganization } = useAuthContext();
+  const {
+    createOnboardingExperimentWorkflow,
+    isLoading: IsCreateOnboardingExpWorkflowLoading,
+    isDisabled: isIsCreateOnboardingExpWorkflowDisabled,
+  } = useCreateOnboardingExperimentWorkflow();
+  const handleOnClose = () => {
+    setOpened(true);
+  };


The modal component is initialized with the opened state set to true and never set to false in handleOnClose. This might prevent the modal from closing as expected. Consider setting opened to false in the handleOnClose function.

- setOpened(true); + setOpened(false);

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change

export function OnboardingExperimentModal() {

const [opened, setOpened] = useState(true);

const theme = useMantineTheme();

const segment = useSegment();

const { currentOrganization } = useAuthContext();

const {

createOnboardingExperimentWorkflow,

isLoading: IsCreateOnboardingExpWorkflowLoading,

isDisabled: isIsCreateOnboardingExpWorkflowDisabled,

} = useCreateOnboardingExperimentWorkflow();

const handleOnClose = () => {

setOpened(true);

};

export function OnboardingExperimentModal() {

const [opened, setOpened] = useState(true);

const theme = useMantineTheme();

const segment = useSegment();

const { currentOrganization } = useAuthContext();

const {

createOnboardingExperimentWorkflow,

isLoading: IsCreateOnboardingExpWorkflowLoading,

isDisabled: isIsCreateOnboardingExpWorkflowDisabled,

} = useCreateOnboardingExperimentWorkflow();

const handleOnClose = () => {

setOpened(false);

};

setOpened(false) in handleOnClose will allow the user to close modal by clicking outside the modal. As per experiment requirement, modal should be closed only when anyof the buttons are clicked

@jainpawan21, thank you for clarifying the intended behavior of the modal. It makes sense to restrict the modal closure to button clicks only, in line with the experiment's requirements. If there's anything else that needs to be adjusted or if you have further instructions, please let me know!

New Learnings Added

User: jainpawan21" URL: https://github.com/novuhq/novu/pull/5401 Timestamp: 2024-04-12T10:38:28.678Z Learning: The `OnboardingExperimentModal` should only be closed through button clicks as per the experiment requirements, not by clicking outside the modal.

Note: Learnings are effective only in the context of specific code segments. To apply general coding guidelines, please configure review instructions.

jainpawan21 · 2024-04-12T11:44:33Z

apps/web/src/pages/templates/components/TriggerSnippetTabs.tsx

-       null,
-       2
-     ).replaceAll('\n', '\n       ')}'
+--header 'Authorization: ApiKey <REPLACE_WITH_API_KEY>' \\


Fixed code indentation for both nodejs and curl

Before 👇🏻

Screen.Recording.2024-04-12.at.5.10.02.PM.mov

After 👇🏻

Screen.Recording.2024-04-12.at.5.09.42.PM.mov

feat: add modal on get started page for onboarding experiment v2

feat: add modal on get started page for onboarding experiment v2

0da951b

github-actions bot added the @novu/web label Apr 11, 2024

jainpawan21 added 4 commits April 11, 2024 16:14

fix: add segment event for modal open

73740fc

fix: cspell check error

5bb7125

feat: change button text

52cf53c

fix: spell check error

e4172c7

jainpawan21 marked this pull request as ready for review April 11, 2024 12:09

scopsy reviewed Apr 11, 2024

View reviewed changes

apps/web/src/pages/auth/components/QuestionnaireForm.tsx Outdated Show resolved Hide resolved

scopsy reviewed Apr 11, 2024

View reviewed changes

apps/web/src/pages/quick-start/steps/GetStarted.tsx Outdated Show resolved Hide resolved

scopsy reviewed Apr 11, 2024

View reviewed changes

apps/web/src/pages/templates/workflow/WorkflowEditor.tsx Outdated Show resolved Hide resolved

LetItRock reviewed Apr 12, 2024

View reviewed changes

apps/web/src/pages/quick-start/components/OnboardingExperimentModal.tsx Outdated Show resolved Hide resolved

LetItRock reviewed Apr 12, 2024

View reviewed changes

coderabbitai bot reviewed Apr 12, 2024

View reviewed changes

fix: add const for local storage key

d1c7fc8

jainpawan21 commented Apr 12, 2024

View reviewed changes

jainpawan21 requested review from LetItRock and scopsy April 12, 2024 11:47

fix: remove prod only condition

d0de31e

LetItRock approved these changes Apr 12, 2024

View reviewed changes

LetItRock merged commit 4acb77a into next Apr 12, 2024
27 of 28 checks passed

LetItRock deleted the feature/onb-exp-v2-modal branch April 12, 2024 14:01

LetItRock added a commit that referenced this pull request Apr 12, 2024

Merge pull request #5401 from novuhq/feature/onb-exp-v2-modal

bf04198

feat: add modal on get started page for onboarding experiment v2

jainpawan21 mentioned this pull request Apr 29, 2024

fix: remove get started onboarding experiment modal #5475

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add modal on get started page for onboarding experiment v2 #5401

feat: add modal on get started page for onboarding experiment v2 #5401

jainpawan21 commented Apr 11, 2024 •

edited by coderabbitai bot

Loading

netlify bot commented Apr 11, 2024 •

edited

Loading

netlify bot commented Apr 11, 2024 •

edited

Loading

LetItRock Apr 12, 2024

jainpawan21 Apr 12, 2024

LetItRock Apr 12, 2024

scopsy commented Apr 12, 2024

coderabbitai bot commented Apr 12, 2024 •

edited

Loading

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

Documentation and Community

coderabbitai bot left a comment

coderabbitai bot Apr 12, 2024

coderabbitai bot Apr 12, 2024 •

edited

Loading

jainpawan21 Apr 12, 2024

coderabbitai bot Apr 12, 2024

jainpawan21 Apr 12, 2024 •

edited

Loading

feat: add modal on get started page for onboarding experiment v2 #5401

feat: add modal on get started page for onboarding experiment v2 #5401

Conversation

jainpawan21 commented Apr 11, 2024 • edited by coderabbitai bot Loading

What change does this PR introduce?

Why was this change needed?

Other information (Screenshots)

Summary by CodeRabbit

netlify bot commented Apr 11, 2024 • edited Loading

✅ Deploy Preview for dev-web-novu ready!

netlify bot commented Apr 11, 2024 • edited Loading

✅ Deploy Preview for novu-design ready!

LetItRock Apr 12, 2024

Choose a reason for hiding this comment

jainpawan21 Apr 12, 2024

Choose a reason for hiding this comment

LetItRock Apr 12, 2024

Choose a reason for hiding this comment

scopsy commented Apr 12, 2024

coderabbitai bot commented Apr 12, 2024 • edited Loading

Walkthrough

Changes

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

Documentation and Community

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot Apr 12, 2024

Choose a reason for hiding this comment

coderabbitai bot Apr 12, 2024 • edited Loading

Choose a reason for hiding this comment

jainpawan21 Apr 12, 2024

Choose a reason for hiding this comment

coderabbitai bot Apr 12, 2024

Choose a reason for hiding this comment

jainpawan21 Apr 12, 2024 • edited Loading

Choose a reason for hiding this comment

jainpawan21 commented Apr 11, 2024 •

edited by coderabbitai bot

Loading

netlify bot commented Apr 11, 2024 •

edited

Loading

netlify bot commented Apr 11, 2024 •

edited

Loading

coderabbitai bot commented Apr 12, 2024 •

edited

Loading

CodeRabbit Configration File (`.coderabbit.yaml`)

coderabbitai bot Apr 12, 2024 •

edited

Loading

jainpawan21 Apr 12, 2024 •

edited

Loading