completed End to End Flow for Leads

synapsenet-arena · Mar 13, 2024 · 8edda7a · 8edda7a
1 parent 4c629cd
commit 8edda7a
Show file tree

Hide file tree

Showing 11 changed files with 245 additions and 167 deletions.
diff --git 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
@@ -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;
+export default CampaignContext;
diff --git 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,34 +60,45 @@ 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
             />
           </Section>
           <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
@@ -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
@@ -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);