(PC-34367) feat(firebase): add link to staging and production feature…

… flags in CheatcodesScreenFeatureFlags

src/cheatcodes/pages/others/CheatcodesScreenFeatureFlags.tsx

@@ -4,15 +4,56 @@ import styled from 'styled-components/native'
 
 import { CheatcodesTemplateScreen } from 'cheatcodes/components/CheatcodesTemplateScreen'
 import { useFeatureFlagAll } from 'cheatcodes/hooks/useFeatureFlagAll'
+import { env } from 'libs/environment/env'
+import { ButtonInsideText } from 'ui/components/buttons/buttonInsideText/ButtonInsideText'
 import { Separator } from 'ui/components/Separator'
-import { TypoDS, getSpacing } from 'ui/theme'
+import { ExternalTouchableLink } from 'ui/components/touchableLink/ExternalTouchableLink'
+import { ExternalSiteFilled } from 'ui/svg/icons/ExternalSiteFilled'
+import { Spacer, TypoDS, getSpacing } from 'ui/theme'
 
 export const CheatcodesScreenFeatureFlags = () => {
   const featureFlags = useFeatureFlagAll()
   const featureFlagsArray = Object.entries(featureFlags)
 
+  const title = `Feature Flags ${env.ENV} 🏳️`
+  const showTestingFeatureFlags = env.ENV !== 'testing'
+  const showStagingFeatureFlags = env.ENV !== 'staging'
+  const showProductionFeatureFlags = env.ENV !== 'production'
+
   return (
-    <CheatcodesTemplateScreen title="Feature Flags 🏳️" flexDirection="column">
+    <CheatcodesTemplateScreen title={title} flexDirection="column">
+      {showTestingFeatureFlags ? (
+        <ExternalTouchableLink
+          as={ButtonInsideTextBlack}
+          buttonHeight="extraSmall"
+          icon={ExternalSiteFilled}
+          wording="Voir les feature flags testing"
+          externalNav={{
+            url: 'https://app.testing.passculture.team/cheatcodes/other/feature-flags',
+          }}
+        />
+      ) : null}
+      {showStagingFeatureFlags ? (
+        <ExternalTouchableLink
+          as={ButtonInsideTextBlack}
+          buttonHeight="extraSmall"
+          icon={ExternalSiteFilled}
+          wording="Voir les feature flags staging"
+          externalNav={{
+            url: 'https://app.staging.passculture.team/cheatcodes/other/feature-flags',
+          }}
+        />
+      ) : null}
+      {showProductionFeatureFlags ? (
+        <ExternalTouchableLink
+          as={ButtonInsideTextBlack}
+          buttonHeight="extraSmall"
+          icon={ExternalSiteFilled}
+          wording="Voir les feature flags production"
+          externalNav={{ url: 'https://passculture.app/cheatcodes/other/feature-flags' }}
+        />
+      ) : null}
+      <Spacer.Column numberOfSpaces={6} />
       <TypoDS.BodyItalicAccent>
         Nombre de feature flags&nbsp;: {featureFlagsArray.length}
       </TypoDS.BodyItalicAccent>
@@ -45,3 +86,7 @@ const StyledTitle4 = styled(TypoDS.Title4)<{ active: boolean }>(({ theme, active
 const StyledSeparator = styled(Separator.Horizontal)({
   marginVertical: getSpacing(2),
 })
+
+const ButtonInsideTextBlack = styled(ButtonInsideText).attrs(({ theme }) => ({
+  buttonColor: theme.colors.black,
+}))``