feat: Onboarding revamp #2073

Dhruwang · 2024-02-14T10:40:59Z

What does this PR do?

Fixes 1666

How should this be tested?

Checklist

Required

Filled out the "How to test" section in this PR
Read How we Code at Formbricks
Self-reviewed my own code
Commented on my code in hard-to-understand bits
Ran pnpm build
Checked for warnings, there are none
Removed all console.logs
Merged the latest changes from main onto my branch with git pull origin main
My changes don't cause any responsiveness issues

Appreciated

If a UI change was made: Added a screen recording or screenshots to this PR
Updated the Formbricks Docs if changes were necessary

…boarding-revamp

vercel · 2024-02-14T10:41:05Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
formbricks-cloud	⬜️ Ignored (Inspect)	Visit Preview		Feb 28, 2024 5:04pm
formbricks-com	⬜️ Ignored (Inspect)	Visit Preview		Feb 28, 2024 5:04pm

github-actions · 2024-02-14T10:41:11Z

Thank you for following the naming conventions for pull request titles! 🙏

review-agent-prime · 2024-02-14T10:42:40Z

packages/ui/Onboarding/components/InviteTeamMate.tsx

It's a good practice to not expose the actual error message to the end user. Instead, log the error message for debugging and show a generic error message to the user.
Create Issue
See the diff
Checkout the fix

    try {
      // code
    } catch (error) {
      console.error(error);
      toast.error("An unexpected error occurred");
    }

git fetch origin && git checkout -b ReviewBot/Impro-jmc1dm6 origin/ReviewBot/Impro-jmc1dm6

packages/ui/Onboarding/components/Connect.tsx

Instead of using the visibilitychange event to fetch the environment every time the document becomes visible, consider using a more efficient method such as polling or websockets to keep the environment data up-to-date.
Create Issue
See the diff
Checkout the fix

    // code

git fetch origin && git checkout -b ReviewBot/Impro-2fwlzvc origin/ReviewBot/Impro-2fwlzvc

Consider using a more descriptive name for the setloading function. A name like setLoadingState would be more descriptive and improve the readability of the code.
Create Issue
See the diff
Checkout the fix

    const [loading, setLoadingState] = useState(false);

git fetch origin && git checkout -b ReviewBot/Impro-uivhwqy origin/ReviewBot/Impro-uivhwqy

packages/ui/Onboarding/components/templates.ts

  There is a repeated pattern in the code where a question object is created with a specific structure. This pattern can be extracted into a function to improve code readability and maintainability.

Create Issue
See the diff
Checkout the fix

    function createQuestion(id: string, type: TSurveyQuestionType, headline: string, required: boolean, subheader: string = '', inputType: string = 'text'): QuestionType {
      return {
        id,
        type,
        headline,
        required,
        subheader,
        inputType,
      };
    }

git fetch origin && git checkout -b ReviewBot/Impro-l1c037c origin/ReviewBot/Impro-l1c037c

  The code contains several string literals that are used multiple times. These can be extracted into constants to improve code readability and maintainability.

Create Issue
See the diff
Checkout the fix

    const BUG_REPORT = 'Bug report 🐞';
    const FEATURE_REQUEST = 'Feature Request 💡';
    const SUBMITTED = 'submitted';
    const EQUALS = 'equals';
    const END = 'end';

git fetch origin && git checkout -b ReviewBot/Impro-h9m6vke origin/ReviewBot/Impro-h9m6vke

apps/web/playwright/survey.spec.ts

There is a lot of repetition in the test code where similar actions are performed for different types of questions. This can be improved by creating a helper function that performs these actions and takes the necessary parameters as arguments. This will make the code more readable and easier to maintain.
Create Issue
See the diff
Checkout the fix

    async function createQuestion(page, questionType, questionDetails) {
      await page
        .locator("div")
        .filter({ hasText: new RegExp(`^${addQuestion}$`) })
        .nth(1)
        .click();
      await page.getByRole("button", { name: questionType }).click();
      await page.getByLabel("Question").fill(questionDetails.question);
      // ... other common actions
    }

git fetch origin && git checkout -b ReviewBot/Impro-kbp3fx8 origin/ReviewBot/Impro-kbp3fx8

review-agent-prime · 2024-02-14T10:42:43Z

packages/ui/Onboarding/components/InviteTeamMate.tsx

+    try {
+      if (!isValidEmail(email)) {
+        toast.error("Invalid Email");
+        return;
+      }
+      await inviteTeamMateAction(team.id, email, "developer", inviteMessage);
+      toast.success("Invite sent successful");
+    } catch (error) {
+      if (error instanceof Error) {
+        toast.error(error.message);
+      } else {
+        toast.error("An unexpected error occurred");
+      }
+    }


The error message is now logged for debugging and a generic error message is shown to the user.

Suggested change

try {

if (!isValidEmail(email)) {

toast.error("Invalid Email");

return;

}

await inviteTeamMateAction(team.id, email, "developer", inviteMessage);

toast.success("Invite sent successful");

} catch (error) {

if (error instanceof Error) {

toast.error(error.message);

} else {

toast.error("An unexpected error occurred");

}

}

try {

if (!isValidEmail(email)) {

toast.error("Invalid Email");

return;

}

await inviteTeamMateAction(team.id, email, "developer", inviteMessage);

toast.success("Invite sent successful");

} catch (error) {

console.error(error);

toast.error("An unexpected error occurred");

}

review-agent-prime · 2024-02-14T10:42:46Z

packages/ui/Onboarding/components/Connect.tsx

+  useEffect(() => {
+    const handleVisibilityChange = async () => {
+      if (document.visibilityState === "visible") {
+        const refetchedEnvironment = await fetchEnvironment(environment.id);
+        if (!refetchedEnvironment) return;
+        setLocalEnvironment(refetchedEnvironment);
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    };
+  }, []);


Replace the visibilitychange event with a more efficient method such as polling or websockets to keep the environment data up-to-date.

Suggested change

useEffect(() => {

const handleVisibilityChange = async () => {

if (document.visibilityState === "visible") {

const refetchedEnvironment = await fetchEnvironment(environment.id);

if (!refetchedEnvironment) return;

setLocalEnvironment(refetchedEnvironment);

}

};

document.addEventListener("visibilitychange", handleVisibilityChange);

return () => {

document.removeEventListener("visibilitychange", handleVisibilityChange);

};

}, []);

useEffect(() => {

const interval = setInterval(async () => {

const refetchedEnvironment = await fetchEnvironment(environment.id);

if (!refetchedEnvironment) return;

setLocalEnvironment(refetchedEnvironment);

}, 5000);

return () => {

clearInterval(interval);

};

}, []);

review-agent-prime · 2024-02-14T10:42:49Z

packages/ui/Onboarding/components/Connect.tsx

+
+export function Connect({ environment, webAppUrl }: { environment: TEnvironment; webAppUrl: string }) {
+  const router = useRouter();
+  const [loading, setloading] = useState(false);


Renamed the 'setloading' function to 'setLoadingState' to improve code readability.

Suggested change

const [loading, setloading] = useState(false);

const [loading, setLoadingState] = useState(false);

review-agent-prime · 2024-02-14T10:42:58Z

apps/web/playwright/survey.spec.ts

@@ -1,7 +1,7 @@
 import { surveys, users } from "@/playwright/utils/mock";


The helper function 'createQuestion' is created to reduce the repetition of similar actions performed for different types of questions. This function takes 'page', 'questionType', and 'questionDetails' as parameters and performs the common actions.

Suggested change

import { surveys, users } from "@/playwright/utils/mock";

async function createQuestion(page, questionType, questionDetails) {

await page

.locator("div")

.filter({ hasText: new RegExp(`^${addQuestion}`) })

.nth(1)

.click();

await page.getByRole("button", { name: questionType }).click();

await page.getByLabel("Question").fill(questionDetails.question);

// ... other common actions

}

Dhruwang · 2024-02-14T10:51:01Z

Need to merge #2074 before testing this

jobenjada

hey dhru! Thanks for shipping this :)

A few notes regarding code organisation:

In the UI folder we only add components which we use in several locations within Formbricks. You have added all of the Onboarding specific components to the UI package. This creates quite some inconsistency, because you added Onboarding specific (hard-coded) content like in the PathwaySelect to the UI package.

Please make sure to separate and reorganize your code as follows:

UI Package: Everything we will likely reuse in other parts of Formbricks (like the new card) add here. Make sure to follow the current setup with having a folder which includes only the index.tsx

Component Folder within Onboarding: Keep all components you only need in the onboarding > components folder within the Formbricks app.

Please refactor this PR also taking into account the feedback I shared on Slack.

I'll push my half-finished refactored PathwaySelect.tsx where the separation of concerns due to the current code organisation (mixing reusable components with specific content).

Please mark this as ready for review once your done and ping me 🤓

jobenjada · 2024-02-14T13:08:13Z

packages/ui/Onboarding/components/PathwaySelect.tsx

+          </div>
+        </div>
+        <div
+          className="flex h-96 w-80 flex-col items-center justify-center rounded-2xl border border-slate-300 bg-white  p-3 shadow-lg transition ease-in-out hover:scale-105"


card code redundant, please refactor. we will use this kind of card a lot more going forward, pls add to UI package.

I've done it bc I was getting tired of making all changes on the cards twice.

Asking GPT to "refactor folllwing all major coding best practices" led to quite a good outcome:

setselectedPathway: (pathway: "link" | "in-app" | null) => void; } // Define a type for the pathway options to ensure type safety and reusability type PathwayOptionType = "link" | "in-app"; interface PathwayOptionProps { title: string; description: string; onSelect: () => void; } // Reusable PathwayOption component for each option const PathwayOption: React.FC<PathwayOptionProps> = ({ title, description, onSelect }) => ( <div className="flex h-96 w-80 cursor-pointer flex-col items-center justify-center rounded-2xl border border-slate-300 bg-white p-3 shadow-lg transition ease-in-out hover:scale-105" onClick={onSelect} role="button" // Improve accessibility tabIndex={0} // Make it focusable > <div className="h-full w-full rounded-xl bg-gray-500">Image</div> <div className="my-4 space-y-2"> <p className="text-xl font-medium text-slate-800">{title}</p> <p className="text-sm text-slate-500">{description}</p> </div> </div> ); export default function PathwaySelect({ setselectedPathway }: PathwaySelectProps) { // Helper function to handle selection const handleSelect = (pathway: PathwayOptionType) => { localStorage.setItem("isNewUser", "true"); setselectedPathway(pathway); }; return ( <div className="space-y-16 text-center"> <div className="space-y-4"> <p className="text-4xl font-medium text-slate-800">How would you like to start?</p> <p className="text-sm text-slate-500">You can always use both types of surveys.</p> </div> <div className="flex space-x-8"> <PathwayOption title="Link Surveys" description="Create a new survey and share a link." onSelect={() => handleSelect("link")} /> <PathwayOption title="In-app Surveys" description="Run a survey on a website or in-app." onSelect={() => handleSelect("in-app")} /> </div> </div> ); }

jobenjada · 2024-02-14T14:53:16Z

Additional feedback as requested:

If you create a survey via Onboarding, this "Delete" button doesnt delete it anymore (might not be related):

Between the Onboarding and the Onboarding Survey we see two different skeleton loading views, which makes it pretty ugly. Instead, can we fade out and in ( Dru I tagged you in the corresponding ticket but we need Mattis input first).
This needs to be smoother. We shouldn't have the button nor the countdown. I'll have a think how we can get a smoother transition back into the app. Ideal would be a fade:

(btw the "Finish Onboarding" showed me to the login page loaded within the onboarding?)

I also plan to remove the Formbricks branding, doesn't make sense on our own Onboarding survey.

Here I had to click twice on the card in the first few times:

Can we keep this on the page.tsx so that it doesn't reload when choosing the pathway? Generally, do we need a route for each step?

Here please reuse the UI from the previous onboarding, feels much more native. Augment it to have the "Other" option working:

This also resolves the transition / forwarding problem.

Is "See example survey in your app" button working? It didn't work for me:

I don't think it creates a survey, at least I'm seeing the Onboarding modal for Link Surveys (and no survey in the list):

Redirect loop: Not entirely sure when it happened but I had already received a signal and set Onboarding to false via Prisma to walk through the onboarding again. At the end I got stuck in the loop:

Dead button

Handle bar not replace {Full Name}

After the coworker was invited we should be forwarded to explore Formbricks:

Here we won't show the modal with 3 templates because we already have this page:

That's it for now, thanks :)

jobenjada · 2024-02-15T17:34:06Z

Hey! Here is my feedback:

Link Survey Pathway:

Survey not found:

In App Pathway:

Other field does not allow additional text input. It's supposed to function like the "Other" field in our surveys:

Leave out step 3: This we don't need

Between the different routes, we reload the top navigation (logo and progress bar). That doesn't look or feel good, it breaks the Onboarding smootheness and creates an impression of Formbricks as a hacked together product. Since the Onboarding is the first impression, it has to look, work and feel smooth.

The top bar flashes up between:

First select (pathway -> in app onboarding survey)
Onboarding Survey and the Connect screens:

Why don't you keep the Logo and Progress bar in a layout.tsx and just update the Progress bar value? Then it should get reloaded. Generally, I'm not sure if we need a new route for each step. Why did you decide to build it like that?

NPM button is gone. I can add it later.

No default survey displayed after I successfully connected my app with Formbricks:

That's what we talked about in Slack. Let's huddle tomorrow to resolve anything unclear.

…mbricks into onboarding-revamp

jobenjada

almost there :)

jobenjada · 2024-02-22T10:01:33Z

apps/web/app/(app)/onboarding/components/onboarding.tsx

+        {renderOnboardingStep()}
+        {iframeVisible && (
+          <iframe
+            src="http://localhost:3000/s/clsui9a7x0000fbh5orp0g7c5"


@mattinannt you need to create a survey with an animation or image bg locally and replace this URL to test the Link Survey onboarding path.

Before merging into prod, you need to add the link to the Onboarding Survey we have in the Formbricks Cloud account.

Now that I think about it, we should make use of the user identification in link surveys via URL to attribute the responses to the user who just signed up. We have the user email in the session object so it shouldn't be an issue. Let me try that first!

mattinannt

@Dhruwang Onboarding looks great! :-) On the code side there are a few smaller things I would like to see changed for more consistency 😊
Can you please also solve the merge conflicts? Then we should be ready to merge this 😊💪

apps/web/app/(app)/onboarding/components/onboarding.tsx

apps/web/app/(app)/onboarding/components/inapp/InviteTeamMate.tsx

mattinannt · 2024-02-27T17:20:39Z

packages/ui/SurveysList/index.tsx

@@ -29,6 +29,12 @@ export default function SurveysList({
 }: SurveysListProps) {
  const [filteredSurveys, setFilteredSurveys] = useState<TSurvey[]>(surveys);
  const [orientation, setOrientation] = useState("grid");
+
+  useEffect(() => {


Can we also call this at the end of the onboarding to remove them once instead of accessing the local storage on every survey list page call?

apps/web/app/(app)/onboarding/components/onboarding.tsx

mattinannt · 2024-02-27T17:23:33Z

apps/web/app/(app)/onboarding/components/onboarding.tsx

+
+import { ConnectWithFormbricks } from "@/app/(app)/onboarding/components/inapp/ConnectWithFormbricks";
+import { InviteTeamMate } from "@/app/(app)/onboarding/components/inapp/InviteTeamMate";
+import Objective from "@/app/(app)/onboarding/components/inapp/SurveyObjective";


Please use module exports instead of default exports:

import { Objective } from "@/app/(app)/onboarding/components/inapp/SurveyObjective";

apps/web/app/(app)/onboarding/components/inapp/SurveyRole.tsx

mattinannt · 2024-02-27T18:03:27Z

apps/web/app/(app)/environments/[environmentId]/surveys/templates/templates.ts

+        html: "You're all set up. Create your own survey to gather exactly the feedback you need :)",
+        buttonLabel: "Create survey",
+        buttonExternal: true,
+        buttonUrl: "https://app.formbricks.com",


This needs to be dynamic for self hosters and should have the WEBAPP_URL instead of app.formbricks.com

…boarding-revamp

…mbricks into onboarding-revamp

Dhruwang added 5 commits February 13, 2024 09:38

added basic components

d0c2278

Merge branch 'main' of https://github.com/Dhruwang/formbricks into on…

153fe42

…boarding-revamp

Merge branch 'main' of https://github.com/Dhruwang/formbricks into on…

14b6b29

…boarding-revamp

revamped onboarding

e2853dc

Merge branch 'main' of https://github.com/Dhruwang/formbricks into on…

9acdacb

…boarding-revamp

review-agent-prime bot reviewed Feb 14, 2024

View reviewed changes

Dhruwang assigned jobenjada Feb 14, 2024

Dhruwang and others added 2 commits February 14, 2024 16:32

removed unused code

3fdd358

Merge branch 'main' into onboarding-revamp

e065030

jobenjada requested changes Feb 14, 2024

View reviewed changes

pathway refactor (half) and images

3a49f9c

jobenjada marked this pull request as draft February 14, 2024 13:53

Dhruwang added 3 commits February 15, 2024 14:45

made refactors

12ce40f

added optionCard component

770f11a

fix: survey creation

de3e9f8

Dhruwang and others added 6 commits February 16, 2024 17:13

resolved issues

f040fbb

Merge branch 'main' into onboarding-revamp

b4f3a3b

fixed laoding issue

44816d0

Merge branch 'onboarding-revamp' of https://github.com/formbricks/for…

d95eb35

…mbricks into onboarding-revamp

added timeout for help button

cdca9b1

added example survey

1210660

jobenjada assigned mattinannt Feb 22, 2024

jobenjada reviewed Feb 22, 2024

View reviewed changes

attribute onboarding survey to user

a4d5f79

mattinannt added the 🙋‍♀️ to be reviewed label Feb 24, 2024

update setup instructions

8ffd321

mattinannt reviewed Feb 27, 2024

View reviewed changes

fix small formatting issue

b8dcf3d

mattinannt reviewed Feb 27, 2024

View reviewed changes

Dhruwang and others added 17 commits February 28, 2024 10:34

Merge branch 'main' of https://github.com/Dhruwang/formbricks into on…

7e6f6ee

…boarding-revamp

Merge branch 'onboarding-revamp' of https://github.com/formbricks/for…

06c4f6d

…mbricks into onboarding-revamp

fix: test

a0e42db

removed localstorage calls from surveyList and surveyStarter

58a591d

updated survey link

6504b68

modified e2e tests

9350f7c

fix: filename

11355ea

Merge branch 'main' into onboarding-revamp

4e6b67d

fix: unit test

8b017bb

Merge branch 'onboarding-revamp' of https://github.com/formbricks/for…

6aac626

…mbricks into onboarding-revamp

not pass package.json into client

4a02f54

fix build errors

07c4507

smaller fixes

6d06173

rename survey completed event

d7d7cbe

update vercel json limitations

6d91a84

update template

bdb9d24

Merge branch 'main' into onboarding-revamp

2789659

jobenjada approved these changes Feb 28, 2024

View reviewed changes

jobenjada added this pull request to the merge queue Feb 28, 2024

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Feb 28, 2024

jobenjada merged commit a8563ad into main Feb 28, 2024
14 checks passed

jobenjada deleted the onboarding-revamp branch February 28, 2024 20:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Onboarding revamp #2073

feat: Onboarding revamp #2073

Dhruwang commented Feb 14, 2024

vercel bot commented Feb 14, 2024 •

edited

github-actions bot commented Feb 14, 2024 •

edited

review-agent-prime bot commented Feb 14, 2024

review-agent-prime bot Feb 14, 2024

review-agent-prime bot Feb 14, 2024

review-agent-prime bot Feb 14, 2024

review-agent-prime bot Feb 14, 2024

Dhruwang commented Feb 14, 2024

jobenjada left a comment

jobenjada Feb 14, 2024 •

edited

jobenjada commented Feb 14, 2024

jobenjada commented Feb 15, 2024

jobenjada left a comment

jobenjada Feb 22, 2024

mattinannt left a comment

mattinannt Feb 27, 2024

mattinannt Feb 27, 2024

mattinannt Feb 27, 2024

	const [loading, setloading] = useState(false);
	const [loading, setLoadingState] = useState(false);

		@@ -1,7 +1,7 @@
		import { surveys, users } from "@/playwright/utils/mock";

feat: Onboarding revamp #2073

feat: Onboarding revamp #2073

Conversation

Dhruwang commented Feb 14, 2024

What does this PR do?

How should this be tested?

Checklist

Required

Appreciated

vercel bot commented Feb 14, 2024 • edited

github-actions bot commented Feb 14, 2024 • edited

review-agent-prime bot commented Feb 14, 2024

packages/ui/Onboarding/components/InviteTeamMate.tsx

packages/ui/Onboarding/components/Connect.tsx

packages/ui/Onboarding/components/templates.ts

apps/web/playwright/survey.spec.ts

review-agent-prime bot Feb 14, 2024

Choose a reason for hiding this comment

review-agent-prime bot Feb 14, 2024

Choose a reason for hiding this comment

review-agent-prime bot Feb 14, 2024

Choose a reason for hiding this comment

review-agent-prime bot Feb 14, 2024

Choose a reason for hiding this comment

Dhruwang commented Feb 14, 2024

jobenjada left a comment

Choose a reason for hiding this comment

jobenjada Feb 14, 2024 • edited

Choose a reason for hiding this comment

jobenjada commented Feb 14, 2024

jobenjada commented Feb 15, 2024

jobenjada left a comment

Choose a reason for hiding this comment

jobenjada Feb 22, 2024

Choose a reason for hiding this comment

mattinannt left a comment

Choose a reason for hiding this comment

mattinannt Feb 27, 2024

Choose a reason for hiding this comment

mattinannt Feb 27, 2024

Choose a reason for hiding this comment

mattinannt Feb 27, 2024

Choose a reason for hiding this comment

vercel bot commented Feb 14, 2024 •

edited

github-actions bot commented Feb 14, 2024 •

edited

jobenjada Feb 14, 2024 •

edited