Updated Campaign Trigger Modal

package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
     "@air/react-drag-to-select": "^5.0.8",
-    "@apollo/client": "^3.7.17",
+    "@apollo/client": "^3.9.11",
     "@apollo/server": "^4.7.3",
     "@aws-sdk/client-s3": "^3.363.0",
     "@aws-sdk/credential-providers": "^3.363.0",

packages/twenty-front/src/App.tsx

@@ -1,5 +1,4 @@
 import { Route, Routes, useLocation } from 'react-router-dom';
-
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { AppPath } from '@/types/AppPath';
 import { CustomPath } from '@/types/CustomPath';
@@ -55,6 +54,8 @@ import { VideoTemplate } from '~/pages/Templates/VideoTemplate';
 import { getPageTitleFromPath } from '~/utils/title-utils';
 import { Segment } from '~/pages/Segment/Segment';
 import { RunCampaign } from '~/pages/campaigns/RunCampaign';
+import { CampaignForm2 } from '~/pages/campaigns/CampaignForm2';
+import { CampaignForm3 } from '~/pages/campaigns/CampaignForm3';
 
 export const App = () => {
   const isSelfBillingEnabled = useIsFeatureEnabled('IS_SELF_BILLING_ENABLED');
@@ -212,6 +213,8 @@ export const App = () => {
           />
           <Route path={CustomPath.CampaignsPage} element={<Campaigns />} />
           <Route path={CustomPath.CampaignForm} element={<CampaignForm />} />
+          <Route path={CustomPath.CampaignForm2} element={<CampaignForm2 />} />
+          <Route path={CustomPath.CampaignForm3} element={<CampaignForm3 />} />
 
           <Route
             path={CustomPath.AudioTemplatePage}

packages/twenty-front/src/effect-components/PageChangeEffect.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { matchPath, useLocation, useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
-
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { useEventTracker } from '@/analytics/hooks/useEventTracker';
 import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
@@ -19,7 +18,6 @@ import { IconCheckbox } from '@/ui/display/icon';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useGetWorkspaceFromInviteHashLazyQuery } from '~/generated/graphql';
-
 import { useIsMatchingLocation } from '../hooks/useIsMatchingLocation';
 
 // TODO: break down into smaller functions and / or hooks
@@ -73,7 +71,7 @@ export const PageChangeEffect = () => {
       });
       navigate(AppPath.SignUp);
     };
-    if (isMatchingLocation(CustomPath.CampaignForm)) {
+    if (isMatchingLocation(CustomPath.CampaignForm) || isMatchingLocation(CustomPath.CampaignForm2) || isMatchingLocation(CustomPath.CampaignForm3) ) {
       console.log('Path Location:', location.pathname);
       navigate(location.pathname);
       return;
@@ -161,6 +159,20 @@ export const PageChangeEffect = () => {
         });
         break;
       }
+      case isMatchingLocation(CustomPath.CampaignForm2): {
+        setHotkeyScope(PageHotkeyScope.CampaignForm, {
+          goto: true,
+          keyboardShortcutMenu: true,
+        });
+        break;
+      }
+      case isMatchingLocation(CustomPath.CampaignForm3): {
+        setHotkeyScope(PageHotkeyScope.CampaignForm, {
+          goto: true,
+          keyboardShortcutMenu: true,
+        });
+        break;
+      }
       case isMatchingLocation(AppPath.OpportunitiesPage): {
         setHotkeyScope(PageHotkeyScope.OpportunitiesPage, {
           goto: true,

packages/twenty-front/src/modules/apollo/hooks/useApolloFactory.ts

@@ -2,17 +2,14 @@ import { useMemo, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { InMemoryCache, NormalizedCacheObject } from '@apollo/client';
 import { useRecoilState } from 'recoil';
-
 import { tokenPairState } from '@/auth/states/tokenPairState';
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
 import { AppPath } from '@/types/AppPath';
 import { REACT_APP_SERVER_BASE_URL } from '~/config';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 import { useUpdateEffect } from '~/hooks/useUpdateEffect';
-
 import { ApolloFactory } from '../services/apollo.factory';
 import { CustomPath } from '@/types/CustomPath';
-
 export const useApolloFactory = () => {
   // eslint-disable-next-line @nx/workspace-no-state-useref
   const apolloRef = useRef<ApolloFactory<NormalizedCacheObject> | null>(null);
@@ -39,7 +36,7 @@ export const useApolloFactory = () => {
       },
       onUnauthenticatedError: () => {
         // setTokenPair(null);
-        if (isMatchingLocation(CustomPath.CampaignForm)) {
+        if (isMatchingLocation(CustomPath.CampaignForm)  || isMatchingLocation(CustomPath.CampaignForm2) || isMatchingLocation(CustomPath.CampaignForm3)) {
           navigate(location.pathname);
         } else if (
           !isMatchingLocation(AppPath.Verify) &&

packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx

@@ -1,6 +1,5 @@
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-
 import { CurrentUserDueTaskCountEffect } from '@/activities/tasks/components/CurrentUserDueTaskCountEffect';
 import { currentUserDueTaskCountState } from '@/activities/tasks/states/currentUserTaskCountState';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
@@ -9,7 +8,6 @@ import { ObjectMetadataNavItems } from '@/object-metadata/components/ObjectMetad
 import {
   IconBell,
   IconCheckbox,
-  IconMail,
   IconSearch,
   IconSettings,
 } from '@/ui/display/icon';
@@ -18,7 +16,6 @@ import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/compo
 import { NavigationDrawerSectionTitle } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle';
 import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-
 import { useIsTasksPage } from '../hooks/useIsTasksPage';
 
 export const MainNavigationDrawerItems = () => {
@@ -72,21 +69,6 @@ export const MainNavigationDrawerItems = () => {
       <NavigationDrawerSection>
         <NavigationDrawerSectionTitle label="Workspace" />
         <ObjectMetadataNavItems />
-        <NavigationDrawerItem
-          label="Message Templates"
-          onClick={() => {
-            navigate('/templatelist');
-          }}
-          Icon={IconMail}
-        />
-
-<NavigationDrawerItem
-          label="Run Campaign"
-          onClick={() => {
-            navigate('/runcampaign');
-          }}
-          Icon={IconMail}
-        />
       </NavigationDrawerSection>
     </>
   );

packages/twenty-front/src/modules/object-metadata/types/CoreObjectNameSingular.ts

@@ -21,4 +21,5 @@ export enum CoreObjectNameSingular {
   ViewSort = 'viewSort',
   Webhook = 'webhook',
   WorkspaceMember = 'workspaceMember',
+  Campaign= 'campaign'
 }

packages/twenty-front/src/modules/object-record/record-action-bar/hooks/useRecordActionBar.tsx

@@ -1,7 +1,6 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilCallback, useSetRecoilState } from 'recoil';
-
 import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { useDeleteManyRecords } from '@/object-record/hooks/useDeleteManyRecords';
@@ -26,6 +25,9 @@ type useRecordActionBarProps = {
   callback?: () => void;
 };
 
+export const campaignListObject = "campaigns"
+export const campaignTriggerObject = "campaignTriggers"
+
 export const useRecordActionBar = ({
   objectMetadataItem,
   selectedRecordIds,
@@ -68,10 +70,15 @@ export const useRecordActionBar = ({
     callback?.();
   });
 
+  const [runCampaignClicked,setRunCampaignClicked]=useState(false)
   const handleDeleteClick = useCallback(async () => {
     callback?.();
     await deleteManyRecords(selectedRecordIds);
   }, [callback, deleteManyRecords, selectedRecordIds]);
+  const handleRunCampaign = () => {
+    console.log(selectedRecordIds,"0000000000000000")
+    setRunCampaignClicked(true)
+  }
 
   const handleExecuteQuickActionOnClick = useCallback(async () => {
     callback?.();
@@ -90,15 +97,33 @@ export const useRecordActionBar = ({
         accent: 'danger',
         onClick: () => handleDeleteClick(),
       },
+      ...(selectedRecordIds.length === 1 && (objectMetadataItem.namePlural == campaignListObject || objectMetadataItem.namePlural == campaignTriggerObject)
+        ? [
+            {
+              label: 'Run Campaign',
+              Icon: IconPuzzle,
+              onClick: () => {
+                handleRunCampaign();
+              },
+            },
+          ]
+        : []),
     ],
-    [handleDeleteClick],
+    [handleDeleteClick, handleRunCampaign, selectedRecordIds.length]
   );
 
   const dataExecuteQuickActionOnmentEnabled = useIsFeatureEnabled(
     'IS_QUICK_ACTIONS_ENABLED',
   );
 
   const hasOnlyOneRecordSelected = selectedRecordIds.length === 1;
+
+
+  useEffect(() => {
+    if(selectedRecordIds.length!=1){
+      setRunCampaignClicked(false)
+    }
+  }, [selectedRecordIds]);
 
   const isFavorite =
     isNonEmptyString(selectedRecordIds[0]) &&
@@ -164,5 +189,13 @@ export const useRecordActionBar = ({
       handleExecuteQuickActionOnClick,
       setActionBarEntriesState,
     ]),
+    runCampaignCallback: useCallback(() => {
+      return runCampaignClicked && selectedRecordIds.length === 1;
+    }, [selectedRecordIds,runCampaignClicked]),
+    runCallback: useCallback(() => {
+      return {'HELLO': "SANJANA"};
+    }, [selectedRecordIds,runCampaignClicked]),
+
+
   };
 };

packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewOpportunityButton.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useContext, useState } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { RecordBoardContext } from '@/object-record/record-board/contexts/RecordBoardContext';
 import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
@@ -75,8 +74,8 @@ export const RecordBoardColumnNewOpportunityButton = () => {
           disableBackgroundBlur
           onCancel={handleCancel}
           onEntitySelected={handleEntitySelect}
-          relationObjectNameSingular={CoreObjectNameSingular.Company}
-          relationPickerScopeId="relation-picker"
+          relationObjectNameSingular={CoreObjectNameSingular.Campaign}
+          // relationPickerScopeId="relation-picker"
           selectedRelationRecordIds={[]}
         />
       ) : (

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainerEffect.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
-
 import { useObjectMetadataItemOnly } from '@/object-metadata/hooks/useObjectMetadataItemOnly';
 import { useRecordActionBar } from '@/object-record/record-action-bar/hooks/useRecordActionBar';
 import { useRecordBoard } from '@/object-record/record-board/hooks/useRecordBoard';
@@ -98,5 +97,4 @@ export const RecordIndexBoardContainerEffect = ({
     setContextMenuEntries?.();
   }, [setActionBarEntries, setContextMenuEntries]);
 
-  return <></>;
 };

packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil';
-
 import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
@@ -151,18 +150,18 @@ export const RecordIndexContainer = ({
       )}
       {recordIndexViewType === ViewType.Kanban && (
         <>
-          <RecordIndexBoardContainer
-            recordBoardId={recordIndexId}
-            viewBarId={recordIndexId}
-            objectNameSingular={objectNameSingular}
-            createRecord={createRecord}
-          />
-          <RecordIndexBoardContainerEffect
-            objectNameSingular={objectNameSingular}
-            recordBoardId={recordIndexId}
-            viewBarId={recordIndexId}
-          />
-        </>
+        <RecordIndexBoardContainer
+          recordBoardId={recordIndexId}
+          viewBarId={recordIndexId}
+          objectNameSingular={objectNameSingular}
+          createRecord={createRecord}
+        />
+        <RecordIndexBoardContainerEffect
+          objectNameSingular={objectNameSingular}
+          recordBoardId={recordIndexId}
+          viewBarId={recordIndexId}
+        />
+      </>
       )}
     </StyledContainer>
   );