Splitting feature flag in two

frontend/src/contexts/featureContext.ts

 import { createContext, useContext } from 'react'
 
 export interface IFeatureContext {
-  // Controls whether the contact person and comment optional fields be shown in the register new guest wizard
-  displayContactAndComment: boolean
+  // 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>({
-  displayContactAndComment: true,
+  displayContactAtUnit: true,
+  displayComment: true,
 })
 
 export const useFeatureContext = () => useContext(FeatureContext)

frontend/src/providers/featureProvider.tsx

@@ -13,12 +13,12 @@ function FeatureProvider(props: FeatureProviderProps) {
   let features: IFeatureContext
   switch (appInst) {
     case 'uib':
-      features = { displayContactAndComment: false }
+      features = { displayContactAtUnit: false, displayComment: false }
       break
 
     case 'uio':
     default:
-      features = { displayContactAndComment: true }
+      features = { displayContactAtUnit: true, displayComment: true }
       break
   }
 

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

@@ -45,7 +45,7 @@ const StepPersonForm = forwardRef(
       formData.role_type ? formData.role_type : ''
     )
     const roleTypes = useRoleTypes()
-    const { displayContactAndComment } = useContext(FeatureContext)
+    const { displayContactAtUnit, displayComment } = useContext(FeatureContext)
 
     const roleTypeSort = () => (a: RoleTypeData, b: RoleTypeData) => {
       if (i18n.language === 'en') {
@@ -242,22 +242,22 @@ const StepPersonForm = forwardRef(
                 )}
               />
 
-              {displayContactAndComment && (
-                <>
-                  <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>