From 8edda7ae5eeecd3ccf604bde6f95b6eb582caca6 Mon Sep 17 00:00:00 2001
From: Shubham Pawar <82868470+srp-pawar@users.noreply.github.com>
Date: Wed, 13 Mar 2024 18:16:56 +0530
Subject: [PATCH] completed End to End Flow for Leads

---
 .../users/graphql/queries/addCampaign.ts      |   1 +
 .../src/pages/campaigns/CampaignContext.tsx   |   6 +-
 .../src/pages/campaigns/CampaignDate.tsx      |  48 +++---
 .../src/pages/campaigns/CampaignDetails.tsx   |  19 ++-
 .../twenty-front/src/pages/campaigns/Lead.tsx |  41 +++--
 .../src/pages/campaigns/MessagingChannel.tsx  |  96 +++++++++---
 ...mpaignDate.tsx => PreviewCampaignDate.tsx} |  16 +-
 .../campaigns/PreviewCampaignDetailsTab.tsx   |  13 +-
 .../campaigns/PreviewMessagingChannel.tsx     |  17 +-
 .../src/pages/campaigns/PreviewPage.tsx       | 147 +++++++++---------
 .../src/pages/campaigns/PreviewSpecialty.tsx  |   8 +-
 11 files changed, 245 insertions(+), 167 deletions(-)
 rename packages/twenty-front/src/pages/campaigns/{StyledPreviewCampaignDate.tsx => PreviewCampaignDate.tsx} (75%)

diff --git a/packages/twenty-front/src/modules/users/graphql/queries/addCampaign.ts b/packages/twenty-front/src/modules/users/graphql/queries/addCampaign.ts
index 5a0455a0bd8a..49cf2d08a6a0 100644
--- a/packages/twenty-front/src/modules/users/graphql/queries/addCampaign.ts
+++ b/packages/twenty-front/src/modules/users/graphql/queries/addCampaign.ts
@@ -10,6 +10,7 @@ export const ADD_CAMPAIGN = gql`
       endDate
       campaignName
       specialtyType
+      leads
       activityTargets {
         edges {
           node {
diff --git a/packages/twenty-front/src/pages/campaigns/CampaignContext.tsx b/packages/twenty-front/src/pages/campaigns/CampaignContext.tsx
index 92fca57aa377..9a6102e73f39 100644
--- a/packages/twenty-front/src/pages/campaigns/CampaignContext.tsx
+++ b/packages/twenty-front/src/pages/campaigns/CampaignContext.tsx
@@ -34,6 +34,8 @@ const CampaignContext = () => {
     specialtyType: '',
     subSpecialtyType: '',
     leads: '',
+    startDate: '',
+    endDate: '',
   });
 
   return (
@@ -45,7 +47,7 @@ const CampaignContext = () => {
           campaignData,
           setCampaignData,
           leadData,
-          setLeadData
+          setLeadData,
         }}
       >
         <App />
@@ -54,4 +56,4 @@ const CampaignContext = () => {
   );
 };
 
-export default CampaignContext;
\ No newline at end of file
+export default CampaignContext;
diff --git a/packages/twenty-front/src/pages/campaigns/CampaignDate.tsx b/packages/twenty-front/src/pages/campaigns/CampaignDate.tsx
index b341e46dcfad..81f5370c9ffd 100644
--- a/packages/twenty-front/src/pages/campaigns/CampaignDate.tsx
+++ b/packages/twenty-front/src/pages/campaigns/CampaignDate.tsx
@@ -1,14 +1,14 @@
 /* eslint-disable no-restricted-imports */
-import { useState } from 'react';
+import React from 'react';
 import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
 import { IconArrowLeft } from '@tabler/icons-react';
 import { IconArrowRight } from '@tabler/icons-react';
 import { Button } from 'tsup.ui.index';
 
+import { H2Title } from '@/ui/display/typography/components/H2Title';
 import DateTimePicker from '@/ui/input/components/internal/date/components/DateTimePicker';
 import { useCampaign } from '~/pages/campaigns/CampaignUseContext';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 
 const StyledCard = styled.div`
   border: 1px solid ${({ theme }) => theme.border.color.medium};
@@ -30,18 +30,19 @@ const StyledInputCard = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
-  height: 70%;
-  justify-content: space-around;
+  height: 65%;
+  justify-content: space-between;
   width: 70%;
   align-items: center;
 `;
 
 const StyledTitleCard = styled.div`
+  /* align-items: center; */
   color: ${({ theme }) => theme.font.color.secondary};
   display: flex;
   flex-direction: column;
   height: 10%;
-  width: 70%;
+  width: 100%;
   justify-content: flex-start;
 `;
 
@@ -59,25 +60,29 @@ const StyledLabel = styled.span`
 `;
 
 export const CampaignDate = () => {
-  const { setCurrentStep, currentStep } = useCampaign();
-
-  const [startDate, setStartDate] = useState(new Date());
-  const [endDate, setEndDate] = useState(new Date());
+  const { setCurrentStep, currentStep, campaignData, setCampaignData } =
+    useCampaign();
 
   return (
     <>
       <StyledCard>
-        <StyledTitleCard>
-        <H2Title
-              title="Campaign Date"
-              description="Choose your when to run your campaigns"
-        />
-        </StyledTitleCard>
+        <StyledTitleCard></StyledTitleCard>
         <StyledInputCard>
           <Section>
+            <H2Title
+              title="Campaign Date"
+              description="Choose when you to run your campaign"
+            />
             <StyledLabel>Start Date</StyledLabel>
             <DateTimePicker
-              onChange={(startDate) => setStartDate(startDate)}
+              value={campaignData?.startDate}
+              selected={campaignData?.startDate}
+              onChange={(date) => {
+                setCampaignData({
+                  ...campaignData,
+                  startDate: date,
+                });
+              }}
               minDate={new Date()}
               showTimeInput
             />
@@ -85,8 +90,15 @@ export const CampaignDate = () => {
           <Section>
             <StyledLabel>End Date</StyledLabel>
             <DateTimePicker
-              onChange={(endDate) => setEndDate(endDate)}
-              minDate={startDate}
+              value={campaignData?.endDate}
+              selected={campaignData?.endDate}
+              onChange={(date) => {
+                setCampaignData({
+                  ...campaignData,
+                  endDate: date,
+                });
+              }}
+              minDate={campaignData.startDate}
               showTimeInput
             />
           </Section>
diff --git a/packages/twenty-front/src/pages/campaigns/CampaignDetails.tsx b/packages/twenty-front/src/pages/campaigns/CampaignDetails.tsx
index 86bcb3038188..06f6a0b157c8 100644
--- a/packages/twenty-front/src/pages/campaigns/CampaignDetails.tsx
+++ b/packages/twenty-front/src/pages/campaigns/CampaignDetails.tsx
@@ -71,7 +71,8 @@ const StyledTitle = styled.h3`
 `;
 
 export const CampaignDetails = () => {
-  const { setCurrentStep, currentStep } = useCampaign();
+  const { setCurrentStep, campaignData, setCampaignData, currentStep } =
+    useCampaign();
   const handleCampaignChange = (_event: Event | undefined): void => {
     throw new Error('Function not implemented.');
   };
@@ -89,10 +90,14 @@ export const CampaignDetails = () => {
               description="Your Campaign name will be displayed in Campaign List"
             />
             <TextInput
-              // value={'campaignName'}
               placeholder={'Enter campaign name'}
-              // eslint-disable-next-line no-restricted-globals
-              onChange={() => handleCampaignChange(event)}
+              value={campaignData?.campaignName}
+              onChange={(e) =>
+                setCampaignData({
+                  ...campaignData,
+                  campaignName: e,
+                })
+              }
               name="campaignName"
               required
               fullWidth
@@ -107,11 +112,13 @@ export const CampaignDetails = () => {
               />
             </Section>
             <TextArea
-              value={''}
+              value={campaignData?.campaignDescription}
               placeholder={'Enter campaign description'}
               minRows={5}
               // eslint-disable-next-line no-restricted-globals
-              onChange={() => handleCampaignChange(event)}
+              onChange={(e) =>
+                setCampaignData({ ...campaignData, campaignDescription: e })
+              }
             />
           </StyledAreaLabel>
           <StyledButton>
diff --git a/packages/twenty-front/src/pages/campaigns/Lead.tsx b/packages/twenty-front/src/pages/campaigns/Lead.tsx
index 855614cff51f..c8256ff5cfbb 100644
--- a/packages/twenty-front/src/pages/campaigns/Lead.tsx
+++ b/packages/twenty-front/src/pages/campaigns/Lead.tsx
@@ -2,15 +2,9 @@
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
 /* eslint-disable no-restricted-imports */
 import { useState } from 'react';
+import { useLazyQuery } from '@apollo/client';
 import styled from '@emotion/styled';
 import { IconArrowRight, IconPlus } from '@tabler/icons-react';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
-import { Button } from '@/ui/input/button/components/Button';
-import DateTimePicker from '@/ui/input/components/internal/date/components/DateTimePicker';
-import { Section } from '@/ui/layout/section/components/Section';
-import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
-import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { MenuItemMultiSelectAvatar, TextInput } from 'tsup.ui.index';
 import {
   IconArrowBadgeRight,
   IconArrowLeft,
@@ -20,11 +14,18 @@ import {
   IconTrash,
   IconUsersGroup,
 } from '@tabler/icons-react';
-import { useCampaign } from '~/pages/campaigns/CampaignUseContext';
+import { MenuItemMultiSelectAvatar, TextInput } from 'tsup.ui.index';
+
+import { ModalWrapper } from '@/spreadsheet-import/components/ModalWrapper';
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Button } from '@/ui/input/button/components/Button';
+import DateTimePicker from '@/ui/input/components/internal/date/components/DateTimePicker';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { Section } from '@/ui/layout/section/components/Section';
 import { FILTER_LEADS } from '@/users/graphql/queries/filterLeads';
-import { useLazyQuery } from '@apollo/client';
+import { useCampaign } from '~/pages/campaigns/CampaignUseContext';
 import { PreviewLeadsData } from '~/pages/campaigns/PreviewLeadsData';
-import { ModalWrapper } from '@/spreadsheet-import/components/ModalWrapper';
 
 const StyledCard = styled.div`
   border: 1px solid ${({ theme }) => theme.border.color.medium};
@@ -97,7 +98,7 @@ const TextContainer = styled.div`
   padding-right: ${({ theme }) => theme.spacing(5)};
   padding-top: ${({ theme }) => theme.spacing(2)};
 `;
-const StyledFilter = styled(Section)`secondary
+const StyledFilter = styled(Section)`
   margin-left: ${({ theme }) => theme.spacing(2)};
 `;
 const StyledComboInputContainer = styled.div`
@@ -134,7 +135,14 @@ const Section2 = styled.div`
 `;
 
 export const Lead = () => {
-  const { setCurrentStep, currentStep, setLeadData, leadData } = useCampaign();
+  const {
+    setCurrentStep,
+    currentStep,
+    setLeadData,
+    leadData,
+    campaignData,
+    setCampaignData,
+  } = useCampaign();
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(new Date());
   const [selectedFilterOptions, setSelectedFilterOptions] = useState<
@@ -174,7 +182,7 @@ export const Lead = () => {
     { id: '5', name: 'Age' },
   ];
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     const filter: Record<string, any> = {};
     if (selectedFilterOptions['1']) {
       filter['advertisementSource'] = { ilike: `%${leadSourceValue}%` };
@@ -190,8 +198,13 @@ export const Lead = () => {
     }
     try {
       console.log(filter, '----------');
-      filterleads({ variables: { filter: filter } });
+      const data = await filterleads({ variables: { filter: filter } });
       setModalOpen(true);
+      console.log('---------=====', data?.data?.leads?.totalCount);
+      setCampaignData({
+        ...campaignData,
+        leads: data?.data?.leads?.totalCount,
+      });
 
       if (data) {
         console.log(data);
diff --git a/packages/twenty-front/src/pages/campaigns/MessagingChannel.tsx b/packages/twenty-front/src/pages/campaigns/MessagingChannel.tsx
index aea044ac64a6..834b4952ded1 100644
--- a/packages/twenty-front/src/pages/campaigns/MessagingChannel.tsx
+++ b/packages/twenty-front/src/pages/campaigns/MessagingChannel.tsx
@@ -11,10 +11,10 @@ import {
   CheckboxVariant,
 } from 'tsup.ui.index';
 
+import { H2Title } from '@/ui/display/typography/components/H2Title';
 import { Button } from '@/ui/input/button/components/Button';
 import { Section } from '@/ui/layout/section/components/Section';
 import { useCampaign } from '~/pages/campaigns/CampaignUseContext';
-import { H2Title } from '@/ui/display/typography/components/H2Title';
 const StyledCard = styled.div`
   border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.sm};
@@ -31,22 +31,23 @@ const StyledCard = styled.div`
 `;
 
 const StyledInputCard = styled.div`
-  align-items: center;
   color: ${({ theme }) => theme.font.color.secondary};
   display: flex;
   flex-direction: column;
-  height: 50%;
-  justify-content: space-evenly;
+  justify-content: center;
+  height: 65%;
+  justify-content: space-between;
   width: 70%;
+  align-items: center;
 `;
 
 const StyledTitleCard = styled.div`
-  align-items: center;
+  /* align-items: center; */
   color: ${({ theme }) => theme.font.color.secondary};
   display: flex;
   flex-direction: column;
   height: 10%;
-  width: 70%;
+  width: 100%;
   justify-content: flex-start;
 `;
 
@@ -83,31 +84,44 @@ const StyledSection = styled(Section)`
   margin-left: 0;
 `;
 export const MessagingChannel = () => {
-  const { setCurrentStep, currentStep } = useCampaign();
+  const { setCurrentStep, currentStep, campaignData, setCampaignData } =
+    useCampaign();
 
   const onSelectCheckBoxChange = (
-    _event: ChangeEvent<HTMLInputElement>,
-    arg1: string,
+    event: ChangeEvent<HTMLInputElement>,
+    channel: string,
   ): void => {
-    throw new Error('Function not implemented.');
+    // throw new Error('Function not implemented.');
+    setCampaignData((prevData: any) => ({
+      ...prevData,
+      [channel]: event.target.checked,
+    }));
   };
 
   return (
     <>
       <StyledCard>
-        <StyledTitleCard>
-          <H2Title
+        <StyledTitleCard></StyledTitleCard>
+        <StyledInputCard>
+          <Section>
+            <H2Title
               title="Messaging Channel"
               description="Choose the message channels that align with your audience's behaviors and preferences."
-          />
-         </StyledTitleCard>
-        <StyledInputCard>
+            />
+          </Section>
+
           <StyledSection>
             <StyledLabel>
               <Checkbox
-                checked={false}
+                checked={campaignData.SMS || false}
                 indeterminate={false}
-                onChange={(event) => onSelectCheckBoxChange(event, 'SMS')}
+                onChange={(event) => {
+                  onSelectCheckBoxChange(event, 'SMS');
+                  setCampaignData({
+                    ...campaignData,
+                    SMS: event.target.checked,
+                  });
+                }}
                 variant={CheckboxVariant.Primary}
                 size={CheckboxSize.Small}
                 shape={CheckboxShape.Squared}
@@ -117,9 +131,15 @@ export const MessagingChannel = () => {
 
             <StyledLabel>
               <Checkbox
-                checked={false}
+                checked={campaignData.Whatsapp || false}
                 indeterminate={false}
-                onChange={(event) => onSelectCheckBoxChange(event, 'Whatsapp')}
+                onChange={(event) => {
+                  onSelectCheckBoxChange(event, 'Whatsapp');
+                  setCampaignData({
+                    ...campaignData,
+                    Whatsapp: event.target.checked,
+                  });
+                }}
                 variant={CheckboxVariant.Primary}
                 size={CheckboxSize.Small}
                 shape={CheckboxShape.Squared}
@@ -129,9 +149,33 @@ export const MessagingChannel = () => {
 
             <StyledLabel>
               <Checkbox
-                checked={false}
+                checked={campaignData.Email || false}
+                indeterminate={false}
+                onChange={(event) => {
+                  onSelectCheckBoxChange(event, 'Email');
+                  setCampaignData({
+                    ...campaignData,
+                    Email: event.target.checked,
+                  });
+                }}
+                variant={CheckboxVariant.Primary}
+                size={CheckboxSize.Small}
+                shape={CheckboxShape.Squared}
+              />
+              <StyledCheckboxLabel>Email</StyledCheckboxLabel>
+            </StyledLabel>
+
+            <StyledLabel>
+              <Checkbox
+                checked={campaignData.GBM || false}
                 indeterminate={false}
-                onChange={(event) => onSelectCheckBoxChange(event, 'GBM')}
+                onChange={(event) => {
+                  onSelectCheckBoxChange(event, 'GBM');
+                  setCampaignData({
+                    ...campaignData,
+                    GBM: event.target.checked,
+                  });
+                }}
                 variant={CheckboxVariant.Primary}
                 size={CheckboxSize.Small}
                 shape={CheckboxShape.Squared}
@@ -142,9 +186,15 @@ export const MessagingChannel = () => {
             <StyledLabel>
               <Checkbox
                 // id="call-checkbox"
-                checked={false}
+                checked={campaignData.CALL || false}
                 indeterminate={false}
-                onChange={(event) => onSelectCheckBoxChange(event, 'Call')}
+                onChange={(event) => {
+                  onSelectCheckBoxChange(event, 'CALL');
+                  setCampaignData({
+                    ...campaignData,
+                    CALL: event.target.checked,
+                  });
+                }}
                 variant={CheckboxVariant.Primary}
                 size={CheckboxSize.Small}
                 shape={CheckboxShape.Squared}
diff --git a/packages/twenty-front/src/pages/campaigns/StyledPreviewCampaignDate.tsx b/packages/twenty-front/src/pages/campaigns/PreviewCampaignDate.tsx
similarity index 75%
rename from packages/twenty-front/src/pages/campaigns/StyledPreviewCampaignDate.tsx
rename to packages/twenty-front/src/pages/campaigns/PreviewCampaignDate.tsx
index 859259f9e41c..63aa3fd7c795 100644
--- a/packages/twenty-front/src/pages/campaigns/StyledPreviewCampaignDate.tsx
+++ b/packages/twenty-front/src/pages/campaigns/PreviewCampaignDate.tsx
@@ -18,29 +18,21 @@ const StyledPreviewCampaignDate = styled.span`
   margin-bottom: ${({ theme }) => theme.spacing(4)};
   width: 100%;
 `;
-export const PreviewCampaignDate = () => {
+export const PreviewCampaignDate = ({ startDate, endDate }) => {
   return (
     <>
       <StyledPreviewCampaignDate>
         <StyledComboInputContainer>
           <Section>
             <H2Title title="Start Date " description="Selected Start Date" />
-            <TextInput
-              name="campaignName"
-              value={'Selected Start Date'}
-              disabled
-            />
+            <TextInput name="campaignName" value={startDate} disabled />
           </Section>
           <Section>
             <H2Title title="End Date " description="Selected End Date" />
-            <TextInput
-              name="campaignName"
-              value={'Selected End Date'}
-              disabled
-            />
+            <TextInput name="campaignName" value={endDate} disabled />
           </Section>
         </StyledComboInputContainer>
       </StyledPreviewCampaignDate>
     </>
   );
-};
\ No newline at end of file
+};
diff --git a/packages/twenty-front/src/pages/campaigns/PreviewCampaignDetailsTab.tsx b/packages/twenty-front/src/pages/campaigns/PreviewCampaignDetailsTab.tsx
index 197d33e351ae..d26187e795fa 100644
--- a/packages/twenty-front/src/pages/campaigns/PreviewCampaignDetailsTab.tsx
+++ b/packages/twenty-front/src/pages/campaigns/PreviewCampaignDetailsTab.tsx
@@ -19,7 +19,10 @@ const StyledPreviewCampaignDetails = styled.span`
   width: 100%;
 `;
 
-export const PreviewCampaignDetailsTab = () => {
+export const PreviewCampaignDetailsTab = ({
+  campaignName,
+  campaignDescription,
+}) => {
   return (
     <>
       <StyledPreviewCampaignDetails>
@@ -31,7 +34,7 @@ export const PreviewCampaignDetailsTab = () => {
           <TextInput
             // value={'campaignName'}StyledAreaLabel
             name="campaignName"
-            value={'Healthy Joints Healthy Lives'}
+            value={campaignName}
             fullWidth
             disabled
           />
@@ -45,9 +48,7 @@ export const PreviewCampaignDetailsTab = () => {
             />
           </Section>
           <TextArea
-            value={
-              'Describe the main objectives and goals of the campaignDescribe the main objectives and goals of the campaignDescribe the main objectives and goals of the campaignDescribe the main objectives and goals of the campaignDescribe the main objectives and goals of the campaign.....sdsd'
-            }
+            value={campaignDescription}
             placeholder={'Enter campaign description'}
             minRows={1}
             disabled
@@ -56,4 +57,4 @@ export const PreviewCampaignDetailsTab = () => {
       </StyledPreviewCampaignDetails>
     </>
   );
-}
\ No newline at end of file
+};
diff --git a/packages/twenty-front/src/pages/campaigns/PreviewMessagingChannel.tsx b/packages/twenty-front/src/pages/campaigns/PreviewMessagingChannel.tsx
index 720ded7a8198..e358d2052fa8 100644
--- a/packages/twenty-front/src/pages/campaigns/PreviewMessagingChannel.tsx
+++ b/packages/twenty-front/src/pages/campaigns/PreviewMessagingChannel.tsx
@@ -19,7 +19,7 @@ const StyledPreviewMessagingChannel = styled.span`
   width: 100%;
 `;
 
-export const PreviewMessagingChannel = () => {
+export const PreviewMessagingChannel = ({ selectedChannels }) => {
   return (
     <>
       <StyledPreviewMessagingChannel>
@@ -29,11 +29,15 @@ export const PreviewMessagingChannel = () => {
               title="Messaging channel"
               description="Selected messaging channel"
             />
-            <TextInput
-              name="Messaging channel"
-              value={'Selected Messaging channel'}
-              disabled
-            />
+            {selectedChannels.length > 0 ? (
+              <TextInput
+                name="Messaging channel"
+                value={selectedChannels}
+                disabled
+              />
+            ) : (
+              <p>No channels selected</p>
+            )}
           </Section>
           {/* <Section>
             <H2Title title="End Date " description="Selected End Date" />
@@ -48,4 +52,3 @@ export const PreviewMessagingChannel = () => {
     </>
   );
 };
-
diff --git a/packages/twenty-front/src/pages/campaigns/PreviewPage.tsx b/packages/twenty-front/src/pages/campaigns/PreviewPage.tsx
index 265674ca088b..ebedb56b1791 100644
--- a/packages/twenty-front/src/pages/campaigns/PreviewPage.tsx
+++ b/packages/twenty-front/src/pages/campaigns/PreviewPage.tsx
@@ -1,18 +1,20 @@
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
 /* eslint-disable no-restricted-imports */
-import { ChangeEvent } from 'react';
+import { useMutation } from '@apollo/client';
 import styled from '@emotion/styled';
-import { IconArrowLeft, IconCheckbox } from '@tabler/icons-react';
+import { IconArrowLeft } from '@tabler/icons-react';
 import { IconArrowRight } from '@tabler/icons-react';
+import { v4 as uuidv4 } from 'uuid';
 
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Button } from '@/ui/input/button/components/Button';
+import { ADD_CAMPAIGN } from '@/users/graphql/queries/addCampaign';
+import { useCampaign } from '~/pages/campaigns/CampaignUseContext';
+import { PreviewCampaignDate } from '~/pages/campaigns/PreviewCampaignDate';
 import { PreviewCampaignDetailsTab } from '~/pages/campaigns/PreviewCampaignDetailsTab';
 import { PreviewMessagingChannel } from '~/pages/campaigns/PreviewMessagingChannel';
 import { PreviewSpecialty } from '~/pages/campaigns/PreviewSpecialty';
-import { PreviewCampaignDate } from '~/pages/campaigns/StyledPreviewCampaignDate';
-// import { PreviewSpecialty } from '~/pages/campaigns/PreviewSpecialty';
-// import { PreviewCampaignDate } from '~/pages/campaigns/PriviewCampaignDate';
+
 const StyledCard = styled.div`
   border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.sm};
@@ -45,26 +47,11 @@ const StyledTitleCard = styled.div`
   color: ${({ theme }) => theme.font.color.secondary};
   display: flex;
   flex-direction: column;
-  height: 10%;
+  height: 5%;
   width: 100%;
   justify-content: flex-start;
 `;
 
-const StyledAreaLabel = styled.span`
-  align-content: flex-start;
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 2%;
-  width: 100%;
-`;
-const StyledSpecialtySection = styled.span`
-  align-content: center;
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  justify-content: space-between;
-  flex: wrap;
-`;
 const StyledButton = styled.span`
   display: flex;
   justify-content: space-between;
@@ -79,57 +66,57 @@ const StyledTitle = styled.h3`
   font-size: ${({ theme }) => theme.font.size.md};
 `;
 export const PreviewPage = () => {
-  // const { setCurrentStep, currentStep } = useCampaign();
+  const { setCurrentStep, currentStep, campaignData, setCampaignData } =
+    useCampaign();
+  const [addCampaigns, { error }] = useMutation(ADD_CAMPAIGN);
+  const { enqueueSnackBar } = useSnackBar();
 
-  const onSelectCheckBoxChange = (
-    _event: ChangeEvent<HTMLInputElement>,
-    arg1: string,
-  ): void => {
-    throw new Error('Function not implemented.');
+  const selectedChannels = ['SMS', 'Whatsapp', 'Email', 'GBM', 'CALL']
+    .filter((channel) => campaignData[channel])
+    .join(', ');
+
+  const resetFormData = () => {
+    setCampaignData({
+      ...campaignData,
+      campaignName: '',
+      campaignDescription: '',
+      specialtyType: '',
+      subSpecialtyType: '',
+      leads: '',
+      startDate: '',
+      endDate: '',
+    });
+    setCurrentStep(0);
   };
-  type SingleTabProps = {
-    title: string;
-    Icon?: IconComponent;
-    id: string;
-    hide?: boolean;
-    disabled?: boolean;
+  const handleSave = async () => {
+    try {
+      const variables = {
+        input: {
+          id: uuidv4(),
+          campaignName: campaignData?.campaignName,
+          specialtyType: campaignData?.specialtyType,
+          description: campaignData?.campaignDescription,
+          subSpecialtyType: campaignData?.subSpecialtyType,
+          startDate: campaignData?.startDate,
+          endDate: campaignData?.endDate,
+          messagingMedia: selectedChannels,
+          leads: `${campaignData?.leads}`,
+        },
+      };
+      const { data } = await addCampaigns({
+        variables: variables,
+      });
+      enqueueSnackBar('Campaign Created successfully', {
+        variant: 'success',
+      });
+      resetFormData();
+    } catch (errors: any) {
+      console.error('Error while creating Campaign :', error);
+      enqueueSnackBar(errors.message + 'Error while creating Campaign', {
+        variant: 'error',
+      });
+    }
   };
-
-  const tabs = [
-    {
-      id: 'Campaign Details',
-      title: 'Campaign Details',
-      Icon: IconCheckbox,
-      hide: false,
-    },
-    {
-      id: 'Specialty & Subspecialty',
-      title: 'Specialty & Subspecialty',
-      Icon: IconCheckbox,
-      hide: false,
-    },
-    {
-      id: 'Lead Extraction',
-      title: 'Lead Extraction',
-      Icon: IconCheckbox,
-      hide: false,
-    },
-    {
-      id: 'Campaign Date',
-      title: 'Campaign Date',
-      Icon: IconCheckbox,
-      hide: false,
-      disabled: false,
-    },
-    {
-      id: 'Messaging Channel',
-      title: 'Messaging Channel',
-      Icon: IconCheckbox,
-      hide: false,
-      disabled: false,
-    },
-  ];
-
   return (
     <>
       <StyledCard>
@@ -137,10 +124,19 @@ export const PreviewPage = () => {
           <StyledTitle></StyledTitle>
         </StyledTitleCard>
         <StyledInputCard>
-          <PreviewCampaignDetailsTab />
-          <PreviewSpecialty />
-          <PreviewCampaignDate />
-          <PreviewMessagingChannel />
+          <PreviewCampaignDetailsTab
+            campaignName={campaignData?.campaignName}
+            campaignDescription={campaignData?.campaignDescription}
+          />
+          <PreviewSpecialty
+            specialtyType={campaignData?.specialtyType}
+            subSpecialityType={campaignData?.subSpecialtyType}
+          />
+          <PreviewCampaignDate
+            startDate={campaignData?.startDate}
+            endDate={campaignData?.endDate}
+          />
+          <PreviewMessagingChannel selectedChannels={selectedChannels} />
           <StyledButton>
             <Button
               Icon={IconArrowLeft}
@@ -154,10 +150,11 @@ export const PreviewPage = () => {
               title="Submit"
               variant="primary"
               accent="blue"
+              onClick={handleSave}
             />
           </StyledButton>
         </StyledInputCard>
       </StyledCard>
     </>
   );
-};
\ No newline at end of file
+};
diff --git a/packages/twenty-front/src/pages/campaigns/PreviewSpecialty.tsx b/packages/twenty-front/src/pages/campaigns/PreviewSpecialty.tsx
index 23805b8b540b..8cfddcb20d8a 100644
--- a/packages/twenty-front/src/pages/campaigns/PreviewSpecialty.tsx
+++ b/packages/twenty-front/src/pages/campaigns/PreviewSpecialty.tsx
@@ -20,7 +20,7 @@ const StyledPreviewSpecialty = styled.span`
   width: 100%;
 `;
 
-export const PreviewSpecialty = () => {
+export const PreviewSpecialty = ({ specialtyType, subSpecialityType }) => {
   return (
     <>
       <StyledPreviewSpecialty>
@@ -33,7 +33,7 @@ export const PreviewSpecialty = () => {
             <TextInput
               placeholder={'Enter campaign name'}
               name="campaignName"
-              value={'Healthy Joints Healthy Lives'}
+              value={specialtyType}
               disabled
             />
           </Section>
@@ -45,7 +45,7 @@ export const PreviewSpecialty = () => {
             <TextInput
               placeholder={'Enter campaign name'}
               name="campaignName"
-              value={'Healthy Joints Healthy Lives'}
+              value={subSpecialityType}
               disabled
             />
           </Section>
@@ -53,4 +53,4 @@ export const PreviewSpecialty = () => {
       </StyledPreviewSpecialty>
     </>
   );
-};
\ No newline at end of file
+};