Merge branch 'feature_flag_frontend' into 'master'

Adding feature flag functionality

See merge request !158

frontend/src/contexts/featureContext.ts

+import { createContext, useContext } from 'react'
+
+export interface IFeatureContext {
+  // Controls whether the contact person at unit field is shown in the register new guest wizard
+  displayContactAtUnit: boolean
+  // Controls whether the optional field is shown in the register new guest wizard
+  displayComment: boolean
+}
+
+export const FeatureContext = createContext<IFeatureContext>({
+  displayContactAtUnit: true,
+  displayComment: true,
+})
+
+export const useFeatureContext = () => useContext(FeatureContext)

frontend/src/contexts/index.ts

 import { UserContext, useUserContext } from './userContext'
+import { FeatureContext } from './featureContext'
 
-export { UserContext, useUserContext }
+export { UserContext, useUserContext, FeatureContext }

frontend/src/index.tsx

@@ -11,19 +11,22 @@ import getTheme from 'themes'
 import App from 'routes'
 import { UserProvider } from 'providers'
 import reportWebVitals from './reportWebVitals'
+import FeatureProvider from './providers/featureProvider'
 
 function appRoot() {
   return (
     <React.StrictMode>
       <Router>
         <LocalizationProvider dateAdapter={AdapterDateFns}>
-          <ThemeProvider theme={getTheme()}>
-            <UserProvider>
-              <Suspense fallback={<CircularProgress />}>
-                <App />
-              </Suspense>
-            </UserProvider>
-          </ThemeProvider>
+          <FeatureProvider>
+            <ThemeProvider theme={getTheme()}>
+              <UserProvider>
+                <Suspense fallback={<CircularProgress />}>
+                  <App />
+                </Suspense>
+              </UserProvider>
+            </ThemeProvider>
+          </FeatureProvider>
         </LocalizationProvider>
       </Router>
     </React.StrictMode>

frontend/src/providers/featureProvider.tsx

+import { FeatureContext } from 'contexts'
+import React from 'react'
+import { appInst } from '../appConfig'
+import { IFeatureContext } from '../contexts/featureContext'
+
+type FeatureProviderProps = {
+  children: React.ReactNode
+}
+
+function FeatureProvider(props: FeatureProviderProps) {
+  const { children } = props
+
+  let features: IFeatureContext
+  switch (appInst) {
+    case 'uib':
+      features = { displayContactAtUnit: false, displayComment: false }
+      break
+
+    case 'uio':
+    default:
+      features = { displayContactAtUnit: true, displayComment: true }
+      break
+  }
+
+  return (
+    <FeatureContext.Provider value={features}>
+      {children}
+    </FeatureContext.Provider>
+  )
+}
+
+export default FeatureProvider

frontend/src/routes/sponsor/register/stepPersonForm.tsx

@@ -11,9 +11,10 @@ import {
 } from '@mui/material'
 import { Controller, SubmitHandler, useForm } from 'react-hook-form'
 import { DatePicker } from '@mui/lab'
-import {
+import React, {
   forwardRef,
   Ref,
+  useContext,
   useEffect,
   useImperativeHandle,
   useState,
@@ -24,6 +25,7 @@ import { PersonFormMethods } from './personFormMethods'
 import useOus, { enSort, nbSort } from '../../../hooks/useOus'
 import useRoleTypes, { RoleTypeData } from '../../../hooks/useRoleTypes'
 import { isValidEmail } from '../../../utils'
+import { FeatureContext } from '../../../contexts'
 
 interface StepPersonFormProperties {
   nextHandler(formState: RegisterFormData): void
@@ -43,6 +45,7 @@ const StepPersonForm = forwardRef(
       formData.role_type ? formData.role_type : ''
     )
     const roleTypes = useRoleTypes()
+    const { displayContactAtUnit, displayComment } = useContext(FeatureContext)
 
     const roleTypeSort = () => (a: RoleTypeData, b: RoleTypeData) => {
       if (i18n.language === 'en') {
@@ -239,19 +242,23 @@ const StepPersonForm = forwardRef(
                 )}
               />
 
-              <TextField
-                id="contact_person"
-                label={t('input.contactPersonUnit')}
-                {...register(`contact_person_unit`)}
-              />
+              {displayContactAtUnit && (
+                <TextField
+                  id="contact_person"
+                  label={t('input.contactPersonUnit')}
+                  {...register(`contact_person_unit`)}
+                />
+              )}
 
-              <TextField
-                id="comment"
-                label={t('input.comment')}
-                multiline
-                rows={5}
-                {...register(`comment`)}
-              />
+              {displayComment && (
+                <TextField
+                  id="comment"
+                  label={t('input.comment')}
+                  multiline
+                  rows={5}
+                  {...register(`comment`)}
+                />
+              )}
             </Stack>
           </form>
         </Box>