chore: upgrade formbricks lib; reword banner and onboarding (#3414)

go.work.sum

@@ -1401,6 +1401,7 @@ go.opentelemetry.io/otel v1.7.0/go.mod h1:5BdUoMIz5WEs0vt0CUEMtSSaTSHBBVwrhnz7+n
 go.opentelemetry.io/otel v1.21.0/go.mod h1:QZzNPQPm1zLX4gZK4cMi+71eaorMSGT3A4znnUvNNEo=
 go.opentelemetry.io/otel v1.24.0/go.mod h1:W7b9Ozg4nkF5tWI5zsXkaKKDjdVjpD4oAt9Qi/MArHo=
 go.opentelemetry.io/otel v1.26.0/go.mod h1:UmLkJHUAidDval2EICqBMbnAd0/m2vmpf/dAM+fvFs4=
+go.opentelemetry.io/otel v1.28.0/go.mod h1:q68ijF8Fc8CnMHKyzqL6akLO46ePnjkgfIMIjUIX9z4=
 go.opentelemetry.io/otel/exporters/otlp v0.20.0 h1:PTNgq9MRmQqqJY0REVbZFvwkYOA85vbdQU/nVfxDyqg=
 go.opentelemetry.io/otel/exporters/otlp v0.20.0/go.mod h1:YIieizyaN77rtLJra0buKiNBOm9XQfkPEKBeuhoMwAM=
 go.opentelemetry.io/otel/exporters/otlp/internal/retry v1.3.0/go.mod h1:VpP4/RMn8bv8gNo9uK7/IMY4mtWLELsS+JIP0inH0h4=
@@ -1423,13 +1424,15 @@ go.opentelemetry.io/otel/metric v0.30.0/go.mod h1:/ShZ7+TS4dHzDFmfi1kSXMhMVubNoP
 go.opentelemetry.io/otel/metric v1.21.0/go.mod h1:o1p3CA8nNHW8j5yuQLdc1eeqEaPfzug24uvsyIEJRWM=
 go.opentelemetry.io/otel/metric v1.24.0/go.mod h1:VYhLe1rFfxuTXLgj4CBiyz+9WYBA8pNGJgDcSFRKBco=
 go.opentelemetry.io/otel/metric v1.26.0/go.mod h1:SY+rHOI4cEawI9a7N1A4nIg/nTQXe1ccCNWYOJUrpX4=
+go.opentelemetry.io/otel/metric v1.28.0/go.mod h1:Fb1eVBFZmLVTMb6PPohq3TO9IIhUisDsbJoL/+uQW4s=
 go.opentelemetry.io/otel/oteltest v0.20.0/go.mod h1:L7bgKf9ZB7qCwT9Up7i9/pn0PWIa9FqQ2IQ8LoxiGnw=
 go.opentelemetry.io/otel/sdk v0.20.0/go.mod h1:g/IcepuwNsoiX5Byy2nNV0ySUF1em498m7hBWC279Yc=
 go.opentelemetry.io/otel/sdk v1.3.0/go.mod h1:rIo4suHNhQwBIPg9axF8V9CA72Wz2mKF1teNrup8yzs=
 go.opentelemetry.io/otel/sdk v1.7.0/go.mod h1:uTEOTwaqIVuTGiJN7ii13Ibp75wJmYUDe374q6cZwUU=
 go.opentelemetry.io/otel/sdk v1.21.0/go.mod h1:Nna6Yv7PWTdgJHVRD9hIYywQBRx7pbox6nwBnZIxl/E=
 go.opentelemetry.io/otel/sdk v1.22.0/go.mod h1:iu7luyVGYovrRpe2fmj3CVKouQNdTOkxtLzPvPz1DOc=
 go.opentelemetry.io/otel/sdk v1.24.0/go.mod h1:KVrIYw6tEubO9E96HQpcmpTKDVn9gdv35HoYiQWGDFg=
+go.opentelemetry.io/otel/sdk v1.28.0/go.mod h1:oYj7ClPUA7Iw3m+r7GeEjz0qckQRJK2B8zjcZEfu7Pg=
 go.opentelemetry.io/otel/sdk/export/metric v0.20.0/go.mod h1:h7RBNMsDJ5pmI1zExLi+bJK+Dr8NQCh0qGhm1KDnNlE=
 go.opentelemetry.io/otel/sdk/metric v0.20.0/go.mod h1:knxiS8Xd4E/N+ZqKmUPf3gTTZ4/0TjTXukfxjzSTpHE=
 go.opentelemetry.io/otel/trace v0.20.0/go.mod h1:6GjCW8zgDjwGHGa6GkyeB8+/5vjT16gUEi0Nf1iBdgw=
@@ -1438,6 +1441,7 @@ go.opentelemetry.io/otel/trace v1.7.0/go.mod h1:fzLSB9nqR2eXzxPXb2JW9IKE+ScyXA48
 go.opentelemetry.io/otel/trace v1.21.0/go.mod h1:LGbsEB0f9LGjN+OZaQQ26sohbOmiMR+BaslueVtS/qQ=
 go.opentelemetry.io/otel/trace v1.24.0/go.mod h1:HPc3Xr/cOApsBI154IU0OI0HJexz+aw5uPdbs3UCjNU=
 go.opentelemetry.io/otel/trace v1.26.0/go.mod h1:4iDxvGDQuUkHve82hJJ8UqrwswHYsZuWCBllGV2U2y0=
+go.opentelemetry.io/otel/trace v1.28.0/go.mod h1:jPyXzNPg6da9+38HEwElrQiHlVMTnVfM3/yv2OlIHaI=
 go.opentelemetry.io/proto/otlp v0.7.0/go.mod h1:PqfVotwruBrMGOCsRd/89rSnXhoiJIqeYNgFYFoEGnI=
 go.opentelemetry.io/proto/otlp v0.11.0/go.mod h1:QpEjXPrNQzrFDZgoTo49dgHR9RYRSrg3NAKnUGl9YpQ=
 go.opentelemetry.io/proto/otlp v0.16.0/go.mod h1:H7XAot3MsfNsj7EXtrA2q5xSNQ10UqI405h3+duxN4U=

ui/package.json

@@ -21,7 +21,7 @@
     "@codemirror/view": "^6.31.0",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^7.0.2",
-    "@formbricks/js": "^1.6.5",
+    "@formbricks/js": "^2.2.0",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
@@ -49,7 +49,8 @@
     "react-router-dom": "^6.26.1",
     "tailwind-merge": "^2.5.2",
     "uuid": "^9.0.1",
-    "yup": "^1.4.0"
+    "yup": "^1.4.0",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.24.7",

ui/src/App.tsx

@@ -1,6 +1,6 @@
 import loadable from '@loadable/component';
 import nightwind from 'nightwind/helper';
-import formbricks from '@formbricks/js';
+import formbricks from '@formbricks/js/website';
 import { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useSelector } from 'react-redux';

ui/src/app/Layout.tsx

@@ -80,7 +80,7 @@ function InnerLayout() {
         <Header setSidebarOpen={setSidebarOpen} />
         {!dismissedBanner && (
           <Banner
-            title="Introducing Flipt Managed Cloud"
+            title="Introducing Flipt Cloud"
             description="Fully managed Flipt. Multiple Environments. Integrated with your Git Repositories."
             href="https://docs.flipt.io/cloud/overview"
           />

ui/src/app/Onboarding.tsx

@@ -7,7 +7,8 @@ import {
   CodeBracketIcon,
   CommandLineIcon,
   PuzzlePieceIcon,
-  StarIcon
+  StarIcon,
+  UsersIcon
 } from '@heroicons/react/24/outline';
 import { useDispatch } from 'react-redux';
 import Button from '~/components/forms/buttons/Button';
@@ -25,10 +26,10 @@ const gettingStartedTiles = [
   },
   {
     icon: CloudIcon,
-    name: 'Introducing Flipt Enterprise Cloud',
+    name: 'Introducing Flipt Cloud',
     className: 'sm:col-span-2',
     description:
-      'Learn about our managed offering with enhanced security and support',
+      'Learn about our SaaS offering that integrates with your Git repositories and can be used alongside your existing Flipt instances',
     href: 'https://docs.flipt.io/cloud/overview'
   },
   {
@@ -55,8 +56,9 @@ const gettingStartedTiles = [
 const moreTiles = [
   {
     icon: ChatBubbleLeftIcon,
-    name: 'Join the Community',
-    description: 'Join our Discord community to ask questions and get help',
+    name: 'Chat With Us',
+    description:
+      'Join our Discord community to engage with the team and other Flipt users',
     cta: 'Join Discord',
     href: 'https://flipt.io/discord'
   },
@@ -72,6 +74,14 @@ const moreTiles = [
     description: 'Show your support by starring us on GitHub',
     cta: 'Star Flipt on GitHub',
     href: 'https://github.com/flipt-io/flipt'
+  },
+  {
+    icon: UsersIcon,
+    name: 'Join the Community',
+    description:
+      'Engage with our community on Discourse for support, discussions, and knowledge sharing',
+    cta: 'Join Discourse',
+    href: 'https://community.flipt.io'
   }
 ];
 

ui/src/app/events/eventSlice.ts

@@ -4,12 +4,12 @@ import { RootState } from '~/store';
 export const eventKey = 'event';
 interface IEventState {
   completedOnboarding: boolean;
-  dismissedBanner: boolean;
+  dismissedBanner_v1_49_0: boolean;
 }
 
 const initialState: IEventState = {
   completedOnboarding: false,
-  dismissedBanner: false
+  dismissedBanner_v1_49_0: false
 };
 
 export const eventSlice = createSlice({
@@ -20,7 +20,7 @@ export const eventSlice = createSlice({
       state.completedOnboarding = true;
     },
     bannerDismissed: (state) => {
-      state.dismissedBanner = true;
+      state.dismissedBanner_v1_49_0 = true;
     }
   }
 });
@@ -34,7 +34,7 @@ export const selectCompletedOnboarding = createSelector(
 
 export const selectDismissedBanner = createSelector(
   [(state: RootState) => state.user],
-  (user) => user.dismissedBanner
+  (user) => user.dismissedBanner_v1_49_0
 );
 
 export default eventSlice.reducer;

ui/tests/onboarding.spec.ts

@@ -11,7 +11,7 @@ test.describe('Onboarding', () => {
       ).toBeVisible();
       await expect(
         page.getByRole('heading', {
-          name: 'Introducing Flipt Enterprise Cloud'
+          name: 'Introducing Flipt Cloud'
         })
       ).toBeVisible();
       await expect(
@@ -68,12 +68,15 @@ test.describe('Onboarding', () => {
         page.getByText('Integrate Your Application', { exact: true })
       ).toBeVisible();
       await expect(
-        page.getByText('Join the Community', { exact: true })
+        page.getByText('Chat With Us', { exact: true })
       ).toBeVisible();
       await expect(
         page.getByText('View API Reference', { exact: true })
       ).toBeVisible();
       await expect(page.getByText('Support Us', { exact: true })).toBeVisible();
+      await expect(
+        page.getByText('Join the Community', { exact: true })
+      ).toBeVisible();
       await expect(
         page.getByRole('button', { name: 'Continue to Dashboard' })
       ).toBeHidden();