feat: welcome page

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

@@ -635,7 +635,7 @@ export type Req = {
   getSplitTest: PagedRequest<{
     conversion_event_type_id: string
   }>
-  createOnboarding: {
+  register: {
     first_name: string
     last_name: string
     email: string

frontend/common/utils/utils.tsx

@@ -288,6 +288,9 @@ const Utils = Object.assign({}, require('./base/_utils'), {
   getFlagsmithJSONValue(key: string, defaultValue: any) {
     return flagsmith.getValue(key, { fallback: defaultValue, json: true })
   },
+  getFlagsmithTrait(key: string) {
+    return flagsmith.getTrait(key)
+  },
   getFlagsmithValue(key: string) {
     return flagsmith.getValue(key)
   },

frontend/web/components/App.js

@@ -249,7 +249,14 @@ const App = class extends Component {
             return
           }
 
-          this.context.router.history.replace(Utils.getOrganisationHomePage())
+          if (
+            Utils.getFlagsmithHasFeature('welcome_page') &&
+            AccountStore.getUser()?.isGettingStarted
+          ) {
+            this.context.router.history.replace('/getting-started')
+          } else {
+            this.context.router.history.replace(Utils.getOrganisationHomePage())
+          }
         })
       }
     }
@@ -373,7 +380,7 @@ const App = class extends Component {
                       />
                     )}
                     {user && (
-                      <div className='container mt-4'>
+                      <div className='container announcement-container mt-4'>
                         <div>
                           <Announcement />
                           <AnnouncementPerPage pathname={pathname} />
@@ -477,7 +484,40 @@ const App = class extends Component {
                                   )}
                                 </Row>
                                 <Row className='gap-3'>
+                                  {Utils.getFlagsmithHasFeature(
+                                    'welcome_page',
+                                  ) && (
+                                    <NavLink
+                                      activeClassName='active'
+                                      to={'/getting-started'}
+                                      className='d-flex lh-1 align-items-center'
+                                    >
+                                      <span className='mr-1'>
+                                        <Icon
+                                          name='rocket'
+                                          width={20}
+                                          fill='#9DA4AE'
+                                        />
+                                      </span>
+                                      Getting Started
+                                    </NavLink>
+                                  )}
+
+                                  <a
+                                    className='d-flex lh-1 align-items-center'
+                                    href={'https://docs.flagsmith.com'}
+                                  >
+                                    <span className='mr-1'>
+                                      <Icon
+                                        name='file-text'
+                                        width={20}
+                                        fill='#9DA4AE'
+                                      />
+                                    </span>
+                                    Docs
+                                  </a>
                                   <NavLink
+                                    className='d-flex lh-1 align-items-center'
                                     id='account-settings-link'
                                     data-test='account-settings-link'
                                     activeClassName='active'
@@ -493,25 +533,6 @@ const App = class extends Component {
                                     Account
                                   </NavLink>
                                   <GithubStar />
-                                  <Tooltip
-                                    place='bottom'
-                                    title={
-                                      <Button
-                                        href='https://docs.flagsmith.com'
-                                        target='_blank'
-                                        className='btn btn-with-icon'
-                                        size='small'
-                                      >
-                                        <Icon
-                                          name='file-text'
-                                          width={20}
-                                          fill='#9DA4AE'
-                                        />
-                                      </Button>
-                                    }
-                                  >
-                                    Docs
-                                  </Tooltip>
 
                                   <Headway className='cursor-pointer' />
                                   <Tooltip

frontend/web/components/ButterBar.tsx

@@ -86,7 +86,7 @@ const ButterBar: React.FC<ButterBarProps> = ({ billingStatus, projectId }) => {
   }
 
   return (
-    <>
+    <div className='announcement-container'>
       {Utils.getFlagsmithValue('butter_bar') &&
         !Utils.getFlagsmithHasFeature('read_only_mode') &&
         (!billingStatus || billingStatus === 'ACTIVE') && (
@@ -110,7 +110,7 @@ const ButterBar: React.FC<ButterBarProps> = ({ billingStatus, projectId }) => {
             payment method to keep your subscription active.
           </div>
         )}
-    </>
+    </div>
   )
 }
 

frontend/web/components/Icon.tsx

@@ -56,11 +56,13 @@ export type IconName =
   | 'request'
   | 'required'
   | 'rocket'
+  | 'features'
   | 'search'
   | 'setting'
   | 'settings-2'
   | 'shield'
   | 'star'
+  | 'link'
   | 'sun'
   | 'timer'
   | 'trash-2'
@@ -80,6 +82,27 @@ export type IconType = React.DetailedHTMLProps<
 
 const Icon: FC<IconType> = ({ fill, fill2, height, name, width, ...rest }) => {
   switch (name) {
+    case 'link': {
+      return (
+        <svg
+          width='16'
+          height='16'
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <g id='Outlined/external-link'>
+            <path
+              id='Icon'
+              fillRule='evenodd'
+              clipRule='evenodd'
+              d='M19 18V12C19 11.448 19.447 11 20 11C20.553 11 21 11.448 21 12V18C21 19.654 19.654 21 18 21H6C4.346 21 3 19.654 3 18V6C3 4.346 4.346 3 6 3H12C12.553 3 13 3.448 13 4C13 4.552 12.553 5 12 5H6C5.448 5 5 5.449 5 6V18C5 18.551 5.448 19 6 19H18C18.552 19 19 18.551 19 18ZM17.5781 5.008L15.9951 5C15.4421 4.997 14.9971 4.547 15.0001 3.995C15.0031 3.444 15.4501 3 16.0001 3H16.0051L20.0021 3.02C20.5521 3.023 20.9971 3.469 20.9971 4.019L21.0001 7.999C21.0001 8.552 20.5531 9 20.0011 9H20.0001C19.4481 9 19.0001 8.553 19.0001 8.001L18.9991 6.415L12.7071 12.707C12.5121 12.902 12.2561 13 12.0001 13C11.7441 13 11.4881 12.902 11.2931 12.707C10.9021 12.316 10.9021 11.684 11.2931 11.293L17.5781 5.008Z'
+              fill='rgb(104, 55, 252)'
+            />
+          </g>
+        </svg>
+      )
+    }
     case 'shield': {
       return (
         <svg
@@ -948,6 +971,7 @@ const Icon: FC<IconType> = ({ fill, fill2, height, name, width, ...rest }) => {
           viewBox='0 0 24 24'
           fill='none'
           xmlns='http://www.w3.org/2000/svg'
+          {...rest}
         >
           <path
             id='Icon'
@@ -1005,6 +1029,7 @@ const Icon: FC<IconType> = ({ fill, fill2, height, name, width, ...rest }) => {
           viewBox='0 0 24 24'
           fill='none'
           xmlns='http://www.w3.org/2000/svg'
+          {...rest}
         >
           <path
             id='Icon'
@@ -1186,6 +1211,27 @@ const Icon: FC<IconType> = ({ fill, fill2, height, name, width, ...rest }) => {
         </svg>
       )
     }
+    case 'features': {
+      return (
+        <svg
+          width={width || '24'}
+          height={width || '24'}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+        >
+          <g id='Outlined/Controls/toggle-right'>
+            <path
+              id='Icon'
+              fillRule='evenodd'
+              clipRule='evenodd'
+              d='M15 13C14.448 13 14 12.552 14 12C14 11.448 14.448 11 15 11C15.552 11 16 11.448 16 12C16 12.552 15.552 13 15 13ZM15 9C13.346 9 12 10.346 12 12C12 13.654 13.346 15 15 15C16.654 15 18 13.654 18 12C18 10.346 16.654 9 15 9ZM15 17H9C6.243 17 4 14.757 4 12C4 9.243 6.243 7 9 7H15C17.757 7 20 9.243 20 12C20 14.757 17.757 17 15 17ZM15 5H9C5.141 5 2 8.141 2 12C2 15.859 5.141 19 9 19H15C18.859 19 22 15.859 22 12C22 8.141 18.859 5 15 5Z'
+              fill='#1A2634'
+            />
+          </g>
+        </svg>
+      )
+    }
     case 'timer': {
       return (
         <svg

frontend/web/components/onboarding/OnboardingOrganisationForm.tsx

@@ -7,11 +7,11 @@ import isFreeEmailDomain from 'common/utils/isFreeEmailDomain'
 import { Req } from 'common/types/requests'
 
 type OnboardingOrganisationFormProps = {
-  onboarding: Req['createOnboarding']
+  onboarding: Req['register']
   error: any
   isValid: boolean
   isSaving: boolean
-  setFieldValue: (key: keyof Req['createOnboarding'], value: any) => void
+  setFieldValue: (key: keyof Req['register'], value: any) => void
   onSubmit: () => void
   onBack: () => void
 }
@@ -63,7 +63,7 @@ const OnboardingOrganisationForm: FC<OnboardingOrganisationFormProps> = ({
             </div>
           )}
           <ErrorMessage error={error} />
-          <div className='d-flex gap-2'>
+          <div className='d-flex mt-4 gap-2'>
             <Button className='px-4' onClick={onBack} theme='secondary'>
               Back
             </Button>

frontend/web/components/pages/CreateOrganisationPage.js

@@ -34,7 +34,11 @@ class CreateOrganisationPage extends Component {
   onSave = (id) => {
     AppActions.selectOrganisation(id)
     API.setCookie('organisation', `${id}`)
-    this.context.router.history.push(Utils.getOrganisationHomePage(id))
+    if(Utils.getFlagsmithHasFeature("welcome_page")) {
+      this.context.router.history.push('/getting-started')
+    } else {
+      this.context.router.history.push(Utils.getOrganisationHomePage(id))
+    }
   }
 
   render() {