Merge pull request #817 from AppQuality/feature-flag

Tagging tootl Feature flag

Author: marcbon

src/constants.ts

@@ -1,6 +1,7 @@
 export const FEATURE_FLAG_EXPRESS = 'exploratory-express';
 export const FEATURE_FLAG_SKY_JOTFORM = 'sky-custom-jotform';
 export const FEATURE_FLAG_CATALOG = 'catalog-pages';
+export const FEATURE_FLAG_TAGGING_TOOL = 'tagging-tool';
 export const EXPRESS_1_CAMPAIGN_TYPE_ID = 46;
 export const EXPRESS_2_CAMPAIGN_TYPE_ID = 51;
 export const EXPRESS_3_CAMPAIGN_TYPE_ID = 52;

src/pages/Campaign/pageHeader/Meta/index.tsx

@@ -4,10 +4,13 @@ import styled from 'styled-components';
 import {
   CampaignWithOutput,
   useGetCampaignsByCidMetaQuery,
+  Feature,
 } from 'src/features/api';
 import { Link } from 'react-router-dom';
 import { Pipe } from 'src/common/components/Pipe';
 import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
+import { FEATURE_FLAG_TAGGING_TOOL } from 'src/constants';
+import { useAppSelector } from 'src/app/hooks';
 import { CampaignStatus } from 'src/types';
 import { StatusMeta } from 'src/common/components/meta/StatusMeta';
 import { PageMeta } from 'src/common/components/PageMeta';
@@ -64,6 +67,7 @@ export const Metas = ({ campaign }: { campaign: CampaignWithOutput }) => {
   } = useGetCampaignsByCidMetaQuery({ cid: campaign.id.toString() });
 
   const { t } = useTranslation();
+  const { userData } = useAppSelector((state) => state.user);
   const functionalDashboardLink = useLocalizeRoute(
     `campaigns/${campaign.id}/bugs`
   );
@@ -74,6 +78,12 @@ export const Metas = ({ campaign }: { campaign: CampaignWithOutput }) => {
 
   if (isLoading || isFetching) return <Skeleton width="200px" height="20px" />;
 
+  const hasTaggingToolFeatureFlag =
+    userData.features &&
+    userData.features.find(
+      (feature: Feature) => feature.slug === FEATURE_FLAG_TAGGING_TOOL
+    );
+
   return (
     <FooterContainer>
       <PageMeta>
@@ -101,7 +111,7 @@ export const Metas = ({ campaign }: { campaign: CampaignWithOutput }) => {
             </Button>
           </Link>
         )}
-        {outputs?.includes('media') && (
+        {outputs?.includes('media') && hasTaggingToolFeatureFlag && (
           <Link to={videoDashboardLink}>
             <Button id="button-bugs-list-header" isPrimary isAccent>
               {t('__CAMPAIGN_PAGE_BUTTON_DETAIL_VIDEO')}

src/pages/Video/index.tsx

@@ -3,14 +3,16 @@ import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useGetCampaignWithWorkspaceQuery } from 'src/features/api/customEndpoints/getCampaignWithWorkspace';
 import { Page } from 'src/features/templates/Page';
 import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
-import { useAppDispatch } from 'src/app/hooks';
+import { useAppDispatch, useAppSelector } from 'src/app/hooks';
 import { useCampaignAnalytics } from 'src/hooks/useCampaignAnalytics';
 import { useEffect } from 'react';
 import {
   setCampaignId,
   setPermissionSettingsTitle,
   setWorkspace,
 } from 'src/features/navigation/navigationSlice';
+import { Feature } from 'src/features/api';
+import { FEATURE_FLAG_TAGGING_TOOL } from 'src/constants';
 import VideoPageContent from './Content';
 import VideoPageHeader from './PageHeader';
 
@@ -21,6 +23,13 @@ const VideoPage = () => {
   const { campaignId } = useParams();
   const dispatch = useAppDispatch();
   const location = useLocation();
+  const { userData, status } = useAppSelector((state) => state.user);
+
+  const hasTaggingToolFeatureFlag =
+    userData.features &&
+    userData.features.find(
+      (feature: Feature) => feature.slug === FEATURE_FLAG_TAGGING_TOOL
+    );
 
   if (!campaignId || Number.isNaN(Number(campaignId))) {
     navigate(notFoundRoute, {
@@ -58,6 +67,17 @@ const VideoPage = () => {
       state: { from: location.pathname },
     });
   }
+
+  useEffect(() => {
+    if (status === 'idle' || status === 'loading') return;
+
+    if (!hasTaggingToolFeatureFlag) {
+      navigate(notFoundRoute, {
+        state: { from: location.pathname },
+      });
+    }
+  }, [status, hasTaggingToolFeatureFlag]);
+
   return (
     <Page
       title={t('__VIDEO_PAGE_TITLE')}

src/pages/Videos/index.tsx

@@ -2,9 +2,11 @@ import { Page } from 'src/features/templates/Page';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
-import { useAppDispatch } from 'src/app/hooks';
+import { useAppDispatch, useAppSelector } from 'src/app/hooks';
 import { useCampaignAnalytics } from 'src/hooks/useCampaignAnalytics';
 import { useGetCampaignWithWorkspaceQuery } from 'src/features/api/customEndpoints/getCampaignWithWorkspace';
+import { FEATURE_FLAG_TAGGING_TOOL } from 'src/constants';
+import { Feature } from 'src/features/api';
 import {
   setCampaignId,
   setPermissionSettingsTitle,
@@ -22,13 +24,30 @@ const VideosPage = () => {
   const { campaignId } = useParams();
   const dispatch = useAppDispatch();
   const location = useLocation();
+  const { userData, status } = useAppSelector((state) => state.user);
+
+  const hasTaggingToolFeatureFlag =
+    userData.features &&
+    userData.features.find(
+      (feature: Feature) => feature.slug === FEATURE_FLAG_TAGGING_TOOL
+    );
 
   if (!campaignId || Number.isNaN(Number(campaignId))) {
     navigate(notFoundRoute, {
       state: { from: location.pathname },
     });
   }
 
+  useEffect(() => {
+    if (status === 'idle' || status === 'loading') return;
+
+    if (!hasTaggingToolFeatureFlag) {
+      navigate(notFoundRoute, {
+        state: { from: location.pathname },
+      });
+    }
+  }, [status, hasTaggingToolFeatureFlag]);
+
   useCampaignAnalytics(campaignId);
 
   const { isError: isErrorCampaign, data: { campaign, workspace } = {} } =