Refactored Campaign page (#8)

Refactored Lead and Campaign Code

packages/twenty-front/src/pages/campaigns/CampaignCommunication.tsx

@@ -0,0 +1,186 @@
+
+
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Checkbox, CheckboxVariant, CheckboxSize, CheckboxShape } from '@/ui/input/components/Checkbox';
+import { Select } from '@/ui/input/components/Select';
+import { GET_MESSAGE_TEMPLATES } from '@/users/graphql/queries/getMessageTemplates';
+import { useQuery } from '@apollo/client';
+import styled from '@emotion/styled';
+import { Section } from '@react-email/components';
+import { ChangeEvent, useState } from 'react';
+import { useCampaign } from '~/pages/campaigns/CampaignUseContext';
+
+
+
+
+const StyledSection = styled(Section)`
+  align-items: flex-start;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  margin-left: 0;
+`;
+
+const StyledComboInputContainer = styled.div`
+  display: flex;
+  align-items: center;
+  > * + * {
+    margin-left: ${({ theme }) => theme.spacing(4)};
+  }
+`;
+
+const StyledLabel = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-left: ${({ theme }) => theme.spacing(2)};
+  display: flex;
+  align-items: center;
+  text-transform: uppercase;
+`;
+
+const StyledCheckboxLabel = styled.span`
+  margin-left: ${({ theme }) => theme.spacing(2)};
+`;
+
+
+type MessageTemplate = {
+    type: string;
+    value: string;
+    label: string;
+  };
+export const CampaignCommunication=()=>{
+    const [messageTemplates, setMessageTemplates] = useState<MessageTemplate[]>(
+        [],
+      );
+    const { campaignData, setCampaignData } = useCampaign();
+
+    const { loading: templatesLoading, data: templatesData } = useQuery(
+        GET_MESSAGE_TEMPLATES,
+      );
+
+    const fetchTemplates = (channelType: string) => {
+        const channelTemplates = templatesData?.messageTemplates.edges
+          .filter((edge: { node: any }) => edge.node?.channelType === channelType)
+          .map((edge: { node: any }) => ({
+            value: edge.node?.id,
+            label: edge.node?.name,
+          }));
+        setMessageTemplates(channelTemplates);
+      };
+
+      const onSelectCheckBoxChange = (
+        event: ChangeEvent<HTMLInputElement>,
+        channel: string,
+      ): void => {
+        // throw new Error('Function not implemented.');
+        setCampaignData((prevData: any) => ({
+          ...prevData,
+          [channel]: event.target.checked,
+        }));
+      };
+
+
+    return (
+
+        <>
+
+        <Section>
+            <Section>
+              <H2Title
+                title="Target Communication"
+                description="Choose your communication medium."
+              />
+            </Section>
+
+            <StyledSection>
+              <StyledComboInputContainer>
+                <StyledLabel>
+                  <Checkbox
+                    checked={campaignData.Whatsapp || false}
+                    indeterminate={false}
+                    onChange={(event) => {
+                      onSelectCheckBoxChange(event, 'WHATSAPP');
+                      if (event.target.checked) {
+                        fetchTemplates('WHATSAPP');
+                      } else {
+                        setMessageTemplates([]);
+                      }
+                      setCampaignData({
+                        ...campaignData,
+                        Whatsapp: event.target.checked,
+                        Email: !event.target.checked
+                          ? campaignData.Email
+                          : false,
+                      });
+                    }}
+                    variant={CheckboxVariant.Primary}
+                    size={CheckboxSize.Small}
+                    shape={CheckboxShape.Squared}
+                  />
+                  <StyledCheckboxLabel>WhatsApp</StyledCheckboxLabel>
+                </StyledLabel>
+
+                {campaignData.Whatsapp && (
+                  <Select
+                    fullWidth
+                    dropdownId="whatsappTemplate"
+                    value={campaignData?.whatsappTemplate}
+                    options={messageTemplates} // Display fetched templates
+                    onChange={(e) => {
+                      setCampaignData({
+                        ...campaignData,
+                        whatsappTemplate: e,
+                      });
+                    }}
+                  />
+                )}
+              </StyledComboInputContainer>
+
+              <StyledComboInputContainer>
+                <StyledLabel style={{ marginBottom: '5px' }}>
+                  <Checkbox
+                    checked={campaignData.Email || false}
+                    indeterminate={false}
+                    onChange={(event) => {
+                      onSelectCheckBoxChange(event, 'EMAIL');
+                      if (event.target.checked) {
+                        fetchTemplates('EMAIL'); // Fetch Email templates
+                      } else {
+                        setMessageTemplates([]); // Reset templates when Email checkbox is unchecked
+                      }
+                      setCampaignData({
+                        ...campaignData,
+                        Email: event.target.checked,
+                        Whatsapp: !event.target.checked
+                          ? campaignData.Whatsapp
+                          : false,
+                      });
+                    }}
+                    variant={CheckboxVariant.Primary}
+                    size={CheckboxSize.Small}
+                    shape={CheckboxShape.Squared}
+                  />
+                  <StyledCheckboxLabel>Email</StyledCheckboxLabel>
+                </StyledLabel>
+
+                {campaignData.Email && (
+                  <Select
+                    fullWidth
+                    dropdownId="emailTemplate"
+                    value={campaignData?.emailTemplate}
+                    options={messageTemplates} // Display fetched templates
+                    onChange={(e) => {
+                      setCampaignData({
+                        ...campaignData,
+                        emailTemplate: e,
+                      });
+                    }}
+                  />
+                )}
+              </StyledComboInputContainer>
+            </StyledSection>
+          </Section>
+          </>
+    )
+}

packages/twenty-front/src/pages/campaigns/CampaignDetails.tsx

@@ -0,0 +1,54 @@
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { TextArea } from '@/ui/input/components/TextArea';
+import { TextInput } from '@/ui/input/components/TextInput';
+import { Section } from '@react-email/components';
+import { atom, useRecoilState } from 'recoil';
+import { SytledHR } from '~/pages/Segment/SegmentStyles';
+
+export const campaignNameState = atom({
+  key: 'campaignName',
+  default: '',
+});
+
+export const campaignDescriptionState = atom({
+  key: 'campaignDescription',
+  default: '',
+});
+
+export const CampaignDetails = () => {
+  const [campaignName, setCampaignName] = useRecoilState(campaignNameState);
+  const [campaignDescription, setCampaignDescription] = useRecoilState(
+    campaignDescriptionState
+  );
+
+  return (
+    <>
+      <Section>
+        <H2Title
+          title="Campaign Name"
+          description="Your Campaign name will be displayed in Campaign List"
+        />
+        <TextInput
+          placeholder={'Enter campaign Name'}
+          value={campaignName}
+          onChange={(e) => setCampaignName(e)}
+          name="campaignName"
+          required
+          fullWidth
+        />
+      </Section>
+      <SytledHR />
+      <Section>
+        <H2Title
+          title="Campaign Description"
+          description="Your Campaign Description will be displayed in Campaign List"
+        />
+        <TextArea
+          value={campaignDescription}
+          onChange={(e) => setCampaignDescription(e)}
+          minRows={4}
+        />
+      </Section>
+    </>
+  );
+};

packages/twenty-front/src/pages/campaigns/CampaignFormInput.tsx

@@ -0,0 +1,45 @@
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Select } from '@/ui/input/components/Select';
+import { GET_FORM_TEMPLATES } from '@/users/graphql/queries/getFormTemplates';
+import { useQuery } from '@apollo/client';
+import { Section } from '@react-email/components';
+import { atom, useRecoilState } from 'recoil';
+
+export const campaignFormInputState = atom({
+  key: 'campaignFormInput',
+  default: '',
+});
+
+export const CampaignFormInput = () => {
+  const [form, setForm] = useRecoilState(campaignFormInputState);
+  let formTemplates: any = [];
+
+  const { loading: formTemplateLoading, data: formTemplateData } =
+    useQuery(GET_FORM_TEMPLATES);
+
+  if (!formTemplateLoading) {
+    formTemplates = formTemplateData?.formTemplates.edges.map(
+      (edge: { node: any }) => ({
+        value: edge.node?.id,
+        label: edge.node?.name,
+      }),
+    );
+  }
+  return (
+    <>
+      <Section>
+        <H2Title
+          title="Loading Page URL"
+          description="URL for the landing page, to be used here"
+        />
+        <Select
+          fullWidth
+          dropdownId="formTemplates"
+          value={form}
+          options={formTemplates}
+          onChange={(e) => setForm(e)}
+        />
+      </Section>
+    </>
+  );
+};

packages/twenty-front/src/pages/campaigns/CampaignSegment.tsx

@@ -0,0 +1,44 @@
+import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { Select } from '@/ui/input/components/Select';
+import { GET_SEGMENT_LISTS } from '@/users/graphql/queries/getSegments';
+import { useQuery } from '@apollo/client';
+import { Section } from '@react-email/components';
+import { atom, useRecoilState } from 'recoil';
+
+export const campaignSegmentState = atom({
+  key: 'campaignSegment',
+  default: '',
+});
+
+export const CampaignSegment = () => {
+  let segmentsList: any = [];
+
+  const [segment, setSegment] = useRecoilState(campaignSegmentState);
+  const { loading: segmentLoading, data: segmentsData } =
+    useQuery(GET_SEGMENT_LISTS);
+
+  if (!segmentLoading) {
+    segmentsList = segmentsData?.segments.edges.map((edge: { node: any }) => ({
+      value: edge.node?.id,
+      label: edge.node?.name,
+    }));
+  }
+
+  return (
+    <>
+      <Section>
+        <H2Title
+          title="Segment"
+          description="Your Target Audience will be displayed in Campaign List"
+        />
+        <Select
+          fullWidth
+          dropdownId="segments"
+          value={segment}
+          options={segmentsList}
+          onChange={(e) => setSegment(e)}
+        />
+      </Section>
+    </>
+  );
+};