feat: welcome page (#5426)

Co-authored-by: Zaimwa9 <wadii.zaim@flagsmith.com>

Author: kyle-ssg

frontend/common/services/useOnboarding.ts

@@ -1,41 +1,47 @@
 import { Res } from 'common/types/responses'
 import { Req } from 'common/types/requests'
 import { service } from 'common/service'
+import { getProfile } from './useProfile'
+import { getStore } from 'common/store'
 
 export const onboardingService = service
   .enhanceEndpoints({ addTagTypes: ['Onboarding'] })
   .injectEndpoints({
     endpoints: (builder) => ({
-      createOnboarding: builder.mutation<
+      updateOnboarding: builder.mutation<
         Res['onboarding'],
-        Req['createOnboarding']
+        Req['updateOnboarding']
       >({
-        invalidatesTags: [{ id: 'LIST', type: 'Onboarding' }],
-        query: (query: Req['createOnboarding']) => ({
+        invalidatesTags: (res) => [{ id: 'LIST', type: 'Onboarding' }],
+        query: (query: Req['updateOnboarding']) => ({
           body: query,
-          method: 'POST',
-          url: `onboarding`,
+          method: 'PATCH',
+          url: `auth/users/me/onboarding/`,
         }),
+        transformResponse: async (res) => {
+          await getProfile(getStore(), {}, { forceRefetch: true })
+          return res
+        },
       }),
       // END OF ENDPOINTS
     }),
   })
 
-export async function createOnboarding(
+export async function updateOnboarding(
   store: any,
-  data: Req['createOnboarding'],
+  data: Req['updateOnboarding'],
   options?: Parameters<
-    typeof onboardingService.endpoints.createOnboarding.initiate
+    typeof onboardingService.endpoints.updateOnboarding.initiate
   >[1],
 ) {
   return store.dispatch(
-    onboardingService.endpoints.createOnboarding.initiate(data, options),
+    onboardingService.endpoints.updateOnboarding.initiate(data, options),
   )
 }
 // END OF FUNCTION_EXPORTS
 
 export const {
-  useCreateOnboardingMutation,
+  useUpdateOnboardingMutation,
   // END OF EXPORTS
 } = onboardingService
 

frontend/common/services/useProfile.ts

@@ -0,0 +1,33 @@
+import { Res } from 'common/types/responses'
+import { Req } from 'common/types/requests'
+import { service } from 'common/service'
+
+export const profileService = service
+  .enhanceEndpoints({ addTagTypes: ['Profile'] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      getProfile: builder.query<Res['profile'], Req['getProfile']>({
+        providesTags: [{ id: 'LIST', type: 'Profile' }],
+        query: () => ({
+          url: `auth/users/me/`,
+        }),
+      }),
+      // END OF ENDPOINTS
+    }),
+  })
+
+export async function getProfile(
+  store: any,
+  data: Req['getProfile'],
+  options?: Parameters<typeof profileService.endpoints.getProfile.initiate>[1],
+) {
+  return store.dispatch(
+    profileService.endpoints.getProfile.initiate(data, options),
+  )
+}
+// END OF FUNCTION_EXPORTS
+
+export const {
+  useGetProfileQuery,
+  // END OF EXPORTS
+} = profileService

frontend/common/stores/account-store.js

@@ -172,7 +172,7 @@ const controller = {
       store.saved()
     })
   },
-  getOrganisations: () =>
+  getOrganisations: (isGettingStarted) =>
     Promise.all([
       data.get(`${Project.api}organisations/`),
       data.get(`${Project.api}auth/users/me/`),
@@ -181,6 +181,7 @@ const controller = {
       .then(([res, userRes, methods]) => {
         controller.setUser({
           ...userRes,
+          isGettingStarted,
           organisations: res.results,
           twoFactorConfirmed: !!methods.length,
           twoFactorEnabled: !!methods.length,
@@ -245,11 +246,9 @@ const controller = {
       })
       .catch((e) => API.ajaxHandler(store, e))
   },
-  onLogin: (skipCaching) => {
-    if (!skipCaching) {
-      API.setCookie('t', Project.cookieAuthEnabled ? 'true' : data.token)
-    }
-    return controller.getOrganisations()
+  onLogin: (isGettingStarted) => {
+    API.setCookie('t', Project.cookieAuthEnabled ? 'true' : data.token)
+    return controller.getOrganisations(isGettingStarted)
   },
   register: ({ contact_consent_given, organisation_name, ...user }) => {
     store.saving()
@@ -276,7 +275,7 @@ const controller = {
         if (contact_consent_given) {
           await createOnboardingSupportOptIn(getStore(), {})
         }
-        await controller.onLogin()
+        await controller.onLogin(!API.getInvite())
 
         if (user.superuser) {
           // Creating a superuser will update the version endpoint

frontend/common/stores/feature-list-store.ts

@@ -8,6 +8,7 @@ import {
 import { updateSegmentPriorities } from 'common/services/useSegmentPriority'
 import {
   createProjectFlag,
+  projectFlagService,
   updateProjectFlag,
 } from 'common/services/useProjectFlag'
 import OrganisationStore from './organisation-store'
@@ -28,6 +29,7 @@ import { Req } from 'common/types/requests'
 import { getVersionFeatureState } from 'common/services/useVersionFeatureState'
 import { getFeatureStates } from 'common/services/useFeatureState'
 import { getSegments } from 'common/services/useSegment'
+import { projectService } from 'common/services/useProject'
 
 const Dispatcher = require('common/dispatcher/dispatcher')
 const BaseStore = require('./base/_store')
@@ -133,6 +135,10 @@ const controller = {
               environmentFeatures && _.keyBy(environmentFeatures, 'feature'),
           }
           store.model.lastSaved = new Date().valueOf()
+          getStore().dispatch(
+            projectFlagService.util.invalidateTags(['ProjectFlag']),
+          )
+
           store.saved({ createdFlag: flag.name })
         }),
       )
@@ -165,6 +171,9 @@ const controller = {
           const index = _.findIndex(store.model.features, { id: flag.id })
           store.model.features[index] = controller.parseFlag(flag)
           store.model.lastSaved = new Date().valueOf()
+          getStore().dispatch(
+            projectFlagService.util.invalidateTags(['ProjectFlag']),
+          )
           store.changed()
         }
       })
@@ -449,6 +458,9 @@ const controller = {
               store.model.lastSaved = new Date().valueOf()
             }
             onComplete && onComplete()
+            getStore().dispatch(
+              projectFlagService.util.invalidateTags(['ProjectFlag']),
+            )
             store.saved({})
           })
           .catch((e) => {
@@ -959,6 +971,9 @@ const controller = {
           (f) => f.id !== flag.id,
         )
         store.model.lastSaved = new Date().valueOf()
+        getStore().dispatch(
+          projectFlagService.util.invalidateTags(['ProjectFlag']),
+        )
         store.saved({})
         store.trigger('removed', flag)
       })

frontend/common/types/requests.ts

@@ -18,6 +18,7 @@ import {
   RolePermission,
   Webhook,
   IdentityTrait,
+  Onboarding,
 } from './responses'
 
 export type PagedRequest<T> = T & {
@@ -653,7 +654,7 @@ export type Req = {
       id: string
     }
   }
-  createOnboarding: {
+  register: {
     first_name: string
     last_name: string
     email: string
@@ -673,5 +674,7 @@ export type Req = {
     userId: number | undefined
     level: PermissionLevel
   }
+  getProfile: {}
+  updateOnboarding: Partial<Onboarding>
   // END OF TYPES
 }

frontend/common/types/responses.ts

@@ -239,13 +239,25 @@ export type githubIntegration = {
   organisation: string
 }
 
+export type GettingStartedTask = {
+  name: string
+  completed_at?: string
+}
+export type Onboarding = {
+  tools: {
+    completed: boolean
+    selection: string[]
+  }
+  tasks: GettingStartedTask[]
+}
 export type User = {
   id: number
   email: string
   first_name: string
   last_name: string
   last_login: string
   uuid: string
+  onboarding: Onboarding
 }
 export type GroupUser = Omit<User, 'role'> & {
   group_admin: boolean
@@ -935,6 +947,8 @@ export type Res = {
   conversionEvents: PagedResponse<ConversionEvent>
   splitTest: PagedResponse<SplitTestResult>
   onboardingSupportOptIn: { id: string }
+  profile: User
+  onboarding: {}
   userPermissions: UserPermissions
   // END OF TYPES
 }

frontend/e2e/helpers.cafe.ts

@@ -1,5 +1,8 @@
 import { RequestLogger, Selector, t } from 'testcafe'
-import { FlagsmithValue } from '../common/types/responses'
+import Project from '../common/project';
+import fetch from 'node-fetch';
+import flagsmith from 'flagsmith/isomorphic';
+import { IFlagsmith, FlagsmithValue } from 'flagsmith/types';
 
 export const LONG_TIMEOUT = 40000
 
@@ -19,6 +22,11 @@ export const isElementExists = async (selector: string) => {
   return Selector(byId(selector)).exists
 }
 
+const initProm = flagsmith.init({fetch,environmentID:Project.flagsmith,api:Project.flagsmithClientAPI})
+export const getFlagsmith = async function() {
+  await initProm
+  return flagsmith as IFlagsmith
+}
 export const setText = async (selector: string, text: string) => {
   logUsingLastSection(`Set text ${selector} : ${text}`)
   if (text) {

frontend/e2e/tests/initialise-tests.ts

@@ -1,13 +1,15 @@
 import {
   byId,
   click,
+  getFlagsmith,
   log,
   setText,
   waitForElementVisible,
-} from '../helpers.cafe'
+} from '../helpers.cafe';
 import { E2E_SIGN_UP_USER, PASSWORD } from '../config'
 
 export default async function () {
+  const flagsmith = await getFlagsmith()
   log('Create Organisation')
   await click(byId('jsSignup'))
   await setText(byId('firstName'), 'Bullet') // visit the url
@@ -17,7 +19,11 @@ export default async function () {
   await click(byId('signup-btn'))
   await setText('[name="orgName"]', 'Flagsmith Ltd 0')
   await click('#create-org-btn')
-  await waitForElementVisible(byId('project-manage-widget'))
+  if(flagsmith.hasFeature("welcome_page")) {
+    await click(byId('create-project')) // Click create project from welcome page
+  } else {
+    await waitForElementVisible(byId('project-manage-widget'))
+  }
 
   log('Create Project')
   await click(byId('create-first-project-btn'))

frontend/e2e/tests/versioning-tests.ts

@@ -6,18 +6,15 @@ import {
     createFeature,
     createOrganisationAndProject,
     createRemoteConfig,
-    editRemoteConfig,
+    editRemoteConfig, getFlagsmith,
     log,
     login, refreshUntilElementVisible,
-    waitForElementVisible
-} from "../helpers.cafe";
+    waitForElementVisible,
+} from '../helpers.cafe';
 import { E2E_USER, PASSWORD } from '../config';
-import fetch from 'node-fetch';
-import flagsmith from 'flagsmith/isomorphic';
-import Project from '../../common/project';
 
 export default async () => {
-    await flagsmith.init({fetch,environmentID:Project.flagsmith,api:Project.flagsmithClientAPI})
+    const flagsmith = await getFlagsmith()
     const hasFeature = flagsmith.hasFeature("feature_versioning")
     log('Login')
     await login(E2E_USER, PASSWORD)