From 5500a22bd081ebbb4bd731c80adad719f2b7d9b8 Mon Sep 17 00:00:00 2001 From: Shubham Pawar <82868470+srp-pawar@users.noreply.github.com> Date: Mon, 26 Feb 2024 18:58:42 +0530 Subject: [PATCH 001/122] Added Routes to App.tsx File --- packages/twenty-front/src/App.tsx | 72 ++++++++++++++++++++++--------- 1 file changed, 52 insertions(+), 20 deletions(-) diff --git a/packages/twenty-front/src/App.tsx b/packages/twenty-front/src/App.tsx index bdf99f5bdf75..e152906b7962 100644 --- a/packages/twenty-front/src/App.tsx +++ b/packages/twenty-front/src/App.tsx @@ -1,19 +1,22 @@ -import { Route, Routes } from 'react-router-dom'; +import { Navigate, Route, Routes, useLocation } from 'react-router-dom'; +import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { AppPath } from '@/types/AppPath'; +import { CustomPath } from '@/types/CustomPath'; import { SettingsPath } from '@/types/SettingsPath'; import { DefaultLayout } from '@/ui/layout/page/DefaultLayout'; +import { PageTitle } from '@/ui/utilities/page-title/PageTitle'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; -import { DefaultPageTitle } from '~/DefaultPageTitle'; import { CommandMenuEffect } from '~/effect-components/CommandMenuEffect'; import { GotoHotkeysEffect } from '~/effect-components/GotoHotkeysEffect'; +import { useDefaultHomePagePath } from '~/hooks/useDefaultHomePagePath'; import { CreateProfile } from '~/pages/auth/CreateProfile'; import { CreateWorkspace } from '~/pages/auth/CreateWorkspace'; import { PasswordReset } from '~/pages/auth/PasswordReset'; import { PlanRequired } from '~/pages/auth/PlanRequired'; import { SignInUp } from '~/pages/auth/SignInUp'; import { VerifyEffect } from '~/pages/auth/VerifyEffect'; -import { DefaultHomePage } from '~/pages/DefaultHomePage'; +import { Campaigns } from '~/pages/campaigns/Campaigns'; import { ImpersonateEffect } from '~/pages/impersonate/ImpersonateEffect'; import { NotFound } from '~/pages/not-found/NotFound'; import { RecordIndexPage } from '~/pages/object-record/RecordIndexPage'; @@ -33,23 +36,40 @@ import { SettingsObjects } from '~/pages/settings/data-model/SettingsObjects'; import { SettingsDevelopersApiKeyDetail } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail'; import { SettingsDevelopersApiKeysNew } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeysNew'; import { SettingsDevelopers } from '~/pages/settings/developers/SettingsDevelopers'; -import { SettingsDevelopersWebhooksDetail } from '~/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail'; -import { SettingsDevelopersWebhooksNew } from '~/pages/settings/developers/webhooks/SettingsDevelopersWebhooksNew'; -import { SettingsIntegrations } from '~/pages/settings/integrations/SettingsIntegrations'; import { SettingsAppearance } from '~/pages/settings/SettingsAppearance'; import { SettingsProfile } from '~/pages/settings/SettingsProfile'; import { SettingsWorkspace } from '~/pages/settings/SettingsWorkspace'; import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMembers'; import { Tasks } from '~/pages/tasks/Tasks'; +import { AudioTemplate } from '~/pages/Templates/AudioTemplate'; +import { DocumentTemplate } from '~/pages/Templates/DocumentTemplate'; +import { ImageTemplate } from '~/pages/Templates/ImageTemplate'; +import { TemplatesList } from '~/pages/Templates/TemplatesList'; +import { TextTemplate } from '~/pages/Templates/TextTemplate'; +import { VideoTemplate } from '~/pages/Templates/VideoTemplate'; +import { getPageTitleFromPath } from '~/utils/title-utils'; export const App = () => { + const { pathname } = useLocation(); + const { defaultHomePagePath } = useDefaultHomePagePath(); + + const pageTitle = getPageTitleFromPath(pathname); const isNewRecordBoardEnabled = useIsFeatureEnabled( 'IS_NEW_RECORD_BOARD_ENABLED', ); + const myRecord: ObjectRecord = { + id: 'unique_id', + }; + const targetableObject = { + id: 'string', + targetObjectNameSingular: 'string', + targetObjectRecord: myRecord, + relatedTargetableObjects: undefined, + }; return ( <> - + @@ -62,7 +82,7 @@ export const App = () => { } /> } /> } /> - } /> + } /> } /> } /> @@ -143,21 +163,9 @@ export const App = () => { path={SettingsPath.DevelopersApiKeyDetail} element={} /> - } - /> - } - /> } /> - } - /> } @@ -173,7 +181,31 @@ export const App = () => { } /> + } /> + + } + /> + } + /> + } /> + } + /> + } + /> + } + /> + } /> From a5a20d294d27e255b9decba6c6c23aef5d1efce5 Mon Sep 17 00:00:00 2001 From: Shubham Pawar <82868470+srp-pawar@users.noreply.github.com> Date: Mon, 26 Feb 2024 19:01:05 +0530 Subject: [PATCH 002/122] Added Navigation Items, to Drawer Campaigns, Message Templates --- .../components/MainNavigationDrawerItems.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx index de94c04d4c92..4718877632fb 100644 --- a/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerItems.tsx @@ -8,6 +8,7 @@ import { ObjectMetadataNavItems } from '@/object-metadata/components/ObjectMetad import { IconBell, IconCheckbox, + IconMail, IconSearch, IconSettings, } from '@/ui/display/icon'; @@ -69,6 +70,21 @@ export const MainNavigationDrawerItems = () => { + { + navigate('/templatelist'); + }} + Icon={IconMail} + /> + + { + navigate('/campaigns'); + }} + Icon={IconMail} + /> ); From 33e526dc149418a1d1cdd88282558f5bb76c2dbd Mon Sep 17 00:00:00 2001 From: Shubham Pawar <82868470+srp-pawar@users.noreply.github.com> Date: Mon, 26 Feb 2024 19:07:45 +0530 Subject: [PATCH 003/122] Added Custom Paths eg: Campaign Page, template pages --- .../src/modules/types/CustomPath.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 packages/twenty-front/src/modules/types/CustomPath.ts diff --git a/packages/twenty-front/src/modules/types/CustomPath.ts b/packages/twenty-front/src/modules/types/CustomPath.ts new file mode 100644 index 000000000000..43866d12583e --- /dev/null +++ b/packages/twenty-front/src/modules/types/CustomPath.ts @@ -0,0 +1,17 @@ +export enum CustomPath { + TemplatesPage = '/templatelist', + + AudioTemplatePage = '/audiotemplate', + + VideoTemplatePage = '/videotemplate', + + DocumentTemplatePage = '/documenttemplate', + + ImageTemplatePage = '/imagetemplate', + + TextTemplatePage = '/texttemplate', + + CampaignsPage = '/campaigns', + + DatePickerPage = '/datepicker', +} From b2582eeed65c767dc303ad233f3837117c8c55d7 Mon Sep 17 00:00:00 2001 From: Shubham Pawar <82868470+srp-pawar@users.noreply.github.com> Date: Mon, 26 Feb 2024 19:08:03 +0530 Subject: [PATCH 004/122] Created DateTimePicker Component --- .../date/components/DateTimePicker.tsx | 298 ++++++++++++++++++ 1 file changed, 298 insertions(+) create mode 100644 packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx new file mode 100644 index 000000000000..c9a0a9fa6a79 --- /dev/null +++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimePicker.tsx @@ -0,0 +1,298 @@ +/* eslint-disable prefer-arrow/prefer-arrow-functions */ +import React, { useState } from 'react'; +import ReactDatePicker from 'react-datepicker'; +import styled from '@emotion/styled'; + +import { IconCalendar } from '@/ui/display/icon'; +import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent'; +import { StyledHoverableMenuItemBase } from '@/ui/navigation/menu-item/internals/components/StyledMenuItemBase'; +import { overlayBackground } from '@/ui/theme/constants/effects'; + +import 'react-datepicker/dist/react-datepicker.css'; + +const StyledContainer = styled.div` + & .react-datepicker { + border-color: ${({ theme }) => theme.border.color.light}; + background: transparent; + font-family: 'Inter'; + font-size: ${({ theme }) => theme.font.size.md}; + border: none; + display: block; + font-weight: ${({ theme }) => theme.font.weight.regular}; + } + + & .react-datepicker-popper { + position: relative !important; + inset: auto !important; + transform: none !important; + padding: 0 !important; + } + + & .react-datepicker__triangle::after { + display: none; + } + + & .react-datepicker__triangle::before { + display: none; + } + + & .react-datepicker-wrapper { + display: none; + } + + // Header + + & .react-datepicker__header { + background: transparent; + border: none; + } + + & .react-datepicker__header__dropdown { + display: flex; + color: ${({ theme }) => theme.font.color.primary}; + margin-left: ${({ theme }) => theme.spacing(1)}; + margin-bottom: ${({ theme }) => theme.spacing(1)}; + } + + & .react-datepicker__month-dropdown-container, + & .react-datepicker__year-dropdown-container { + text-align: left; + border-radius: ${({ theme }) => theme.border.radius.sm}; + margin-left: ${({ theme }) => theme.spacing(1)}; + margin-right: 0; + padding: ${({ theme }) => theme.spacing(2)}; + padding-right: ${({ theme }) => theme.spacing(4)}; + background-color: ${({ theme }) => theme.background.tertiary}; + } + + & .react-datepicker__month-read-view--down-arrow, + & .react-datepicker__year-read-view--down-arrow { + height: 5px; + width: 5px; + border-width: 1px 1px 0 0; + border-color: ${({ theme }) => theme.border.color.light}; + top: 3px; + right: -6px; + } + + & .react-datepicker__year-read-view, + & .react-datepicker__month-read-view { + padding-right: ${({ theme }) => theme.spacing(2)}; + } + + & .react-datepicker__month-dropdown-container { + width: 80px; + } + + & .react-datepicker__year-dropdown-container { + width: 50px; + } + + & .react-datepicker__month-dropdown, + & .react-datepicker__year-dropdown { + border: ${({ theme }) => theme.border.color.light}; + ${overlayBackground} + overflow-y: scroll; + top: ${({ theme }) => theme.spacing(2)}; + } + & .react-datepicker__month-dropdown { + left: ${({ theme }) => theme.spacing(2)}; + width: 160px; + height: 260px; + } + + & .react-datepicker__year-dropdown { + left: calc(${({ theme }) => theme.spacing(9)} + 80px); + width: 100px; + height: 260px; + } + + & .react-datepicker__navigation--years { + display: none; + } + + & .react-datepicker__month-option--selected, + & .react-datepicker__year-option--selected { + display: none; + } + + & .react-datepicker__year-option, + & .react-datepicker__month-option { + text-align: left; + padding: ${({ theme }) => theme.spacing(2)} + calc(${({ theme }) => theme.spacing(2)} - 2px); + width: calc(100% - ${({ theme }) => theme.spacing(4)}); + border-radius: ${({ theme }) => theme.border.radius.xs}; + color: ${({ theme }) => theme.font.color.secondary}; + cursor: pointer; + margin: 2px; + + &:hover { + background: ${({ theme }) => theme.background.transparent.light}; + } + } + + & .react-datepicker__year-option { + &:first-of-type, + &:last-of-type { + display: none; + } + } + + & .react-datepicker__current-month { + display: none; + } + + & .react-datepicker__day-name { + color: ${({ theme }) => theme.font.color.secondary}; + width: 34px; + height: 40px; + line-height: 40px; + } + + & .react-datepicker__month-container { + float: none; + } + + // Days + + & .react-datepicker__month { + margin-top: 0; + } + + & .react-datepicker__day { + width: 34px; + height: 34px; + line-height: 34px; + } + + & .react-datepicker__navigation--previous, + & .react-datepicker__navigation--next { + height: 34px; + border-radius: ${({ theme }) => theme.border.radius.sm}; + padding-top: 6px; + &:hover { + background: ${({ theme }) => theme.background.transparent.light}; + } + } + & .react-datepicker__navigation--previous { + right: 38px; + top: 8px; + left: auto; + + & > span { + margin-left: -6px; + } + } + + & .react-datepicker__navigation--next { + right: 6px; + top: 8px; + + & > span { + margin-left: 6px; + } + } + + & .react-datepicker__navigation-icon::before { + height: 7px; + width: 7px; + border-width: 1px 1px 0 0; + border-color: ${({ theme }) => theme.font.color.tertiary}; + } + + & .react-datepicker__day--keyboard-selected { + background-color: inherit; + } + + & .react-datepicker__day, + .react-datepicker__time-name { + color: ${({ theme }) => theme.font.color.primary}; + } + + & .react-datepicker__day--selected { + background-color: ${({ theme }) => theme.color.blue}; + color: ${({ theme }) => theme.font.color.inverted}; + } + + & .react-datepicker__day--outside-month { + color: ${({ theme }) => theme.font.color.tertiary}; + } + + & .react-datepicker__day:hover { + color: ${({ theme }) => theme.font.color.tertiary}; + } + + & .clearable { + border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; + } +`; + +const StyledButtonContainer = styled(StyledHoverableMenuItemBase)` + width: auto; + height: ${({ theme }) => theme.spacing(8)}; + padding: 0 ${({ theme }) => theme.spacing(2)}; + margin: ${({ theme }) => theme.spacing(2)}; +`; + +const StyledButton = styled(MenuItemLeftContent)` + justify-content: center; +`; + +export type DateTimePickerProps = { + onChange: (date: Date) => void; + clearable?: boolean; + showTimeInput?: boolean; + maxDate?: Date | null; + minDate?: Date | null; + selected?: Date | null | undefined; +}; + +export default function DateTimePicker({ + clearable = true, + minDate = null, + maxDate = null, + showTimeInput = false, + selected = new Date(), + onChange, +}: DateTimePickerProps) { + const [selectedDate, setSelectedDate] = useState(new Date()); + const [openCalendar, setOpenCalendar] = useState(false); + + const handleChange = (newDate: Date) => { + setSelectedDate(newDate); + onChange?.(newDate); + setOpenCalendar(false); + }; + return ( + +
+ setOpenCalendar(false)} + /> +
+ {clearable && ( + setOpenCalendar(true)} + isMenuOpen={false} + > + {/* setOpen(true)} placeholder={selectedDate} disabled/> */} + + + )} + + ); +} From 73ae229d40d1b080e8ae77419a09a4cb9de09361 Mon Sep 17 00:00:00 2001 From: Shubham Pawar <82868470+srp-pawar@users.noreply.github.com> Date: Mon, 26 Feb 2024 19:09:00 +0530 Subject: [PATCH 005/122] Mutation query for adding Campaigns --- .../users/graphql/queries/addCampaign.ts | 98 +++++++++++++++++++ 1 file changed, 98 insertions(+) create mode 100644 packages/twenty-front/src/modules/users/graphql/queries/addCampaign.ts diff --git a/packages/twenty-front/src/modules/users/graphql/queries/addCampaign.ts b/packages/twenty-front/src/modules/users/graphql/queries/addCampaign.ts new file mode 100644 index 000000000000..5a0455a0bd8a --- /dev/null +++ b/packages/twenty-front/src/modules/users/graphql/queries/addCampaign.ts @@ -0,0 +1,98 @@ +import { gql } from '@apollo/client'; +export const ADD_CAMPAIGN = gql` + mutation CreateOneCampaignList($input: CampaignListCreateInput!) { + createCampaignList(data: $input) { + id + name + updatedAt + subSpecialtyType + position + endDate + campaignName + specialtyType + activityTargets { + edges { + node { + __typename + id + person { + __typename + id + } + id + createdAt + personId + campaignList { + __typename + id + } + activity { + __typename + id + } + company { + __typename + id + } + opportunityId + updatedAt + activityId + opportunity { + __typename + id + } + companyId + campaignListId + } + __typename + } + __typename + } + startDate + messagingMedia + id + createdAt + description + favorites { + edges { + node { + __typename + id + campaignList { + __typename + id + } + opportunityId + company { + __typename + id + } + updatedAt + createdAt + workspaceMember { + __typename + id + } + person { + __typename + id + } + workspaceMemberId + personId + id + position + opportunity { + __typename + id + } + companyId + campaignListId + } + __typename + } + __typename + } + __typename + } + } +`; From d05d742eaf348eff99b49e327ac48484ff7e70bc Mon Sep 17 00:00:00 2001 From: Shubham Pawar <82868470+srp-pawar@users.noreply.github.com> Date: Mon, 26 Feb 2024 19:09:34 +0530 Subject: [PATCH 006/122] added query to fetch Subspecialty details --- .../graphql/queries/getSpecialtyDetails.ts | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 packages/twenty-front/src/modules/users/graphql/queries/getSpecialtyDetails.ts diff --git a/packages/twenty-front/src/modules/users/graphql/queries/getSpecialtyDetails.ts b/packages/twenty-front/src/modules/users/graphql/queries/getSpecialtyDetails.ts new file mode 100644 index 000000000000..b809cd8123c8 --- /dev/null +++ b/packages/twenty-front/src/modules/users/graphql/queries/getSpecialtyDetails.ts @@ -0,0 +1,26 @@ +import { gql } from '@apollo/client'; + +export const GET_SPECIALTY = gql` + query FindManySubspecialties( + $filter: SubspecialtyFilterInput + $orderBy: SubspecialtyOrderByInput + $lastCursor: String + $limit: Float + ) { + subspecialties( + filter: $filter + orderBy: $orderBy + first: $limit + after: $lastCursor + ) { + edges { + node { + name + specialtyType { + name + } + } + } + } + } +`; From c233a23543c7342bd44f0425f6b0eeab1df4294f Mon Sep 17 00:00:00 2001 From: Shubham Pawar <82868470+srp-pawar@users.noreply.github.com> Date: Mon, 26 Feb 2024 19:09:51 +0530 Subject: [PATCH 007/122] Campaigns Page Added --- .../src/pages/campaigns/Campaigns.tsx | 270 ++++++++++++++++++ 1 file changed, 270 insertions(+) create mode 100644 packages/twenty-front/src/pages/campaigns/Campaigns.tsx diff --git a/packages/twenty-front/src/pages/campaigns/Campaigns.tsx b/packages/twenty-front/src/pages/campaigns/Campaigns.tsx new file mode 100644 index 000000000000..b70ba6b7b298 --- /dev/null +++ b/packages/twenty-front/src/pages/campaigns/Campaigns.tsx @@ -0,0 +1,270 @@ +/* eslint-disable no-restricted-globals */ +/* eslint-disable @nx/workspace-styled-components-prefixed-with-styled */ +import { useState } from 'react'; +import { useMutation, useQuery } from '@apollo/client'; +import styled from '@emotion/styled'; +import { Select, TextInput } from 'tsup.ui.index'; +import { v4 as uuidv4 } from 'uuid'; + +import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer'; +import { IconMail } from '@/ui/display/icon'; +import { H1Title } from '@/ui/display/typography/components/H1Title'; +import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; +import { Button } from '@/ui/input/button/components/Button'; +import DateTimePicker from '@/ui/input/components/internal/date/components/DateTimePicker'; +import { Radio } from '@/ui/input/components/Radio'; +import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'; +import { Section } from '@/ui/layout/section/components/Section'; +import { ADD_CAMPAIGN } from '@/users/graphql/queries/addCampaign'; +import { GET_SPECIALTY } from '@/users/graphql/queries/getSpecialtyDetails'; + +const StyledH1Title = styled(H1Title)` + margin-bottom: 0; +`; + +const StyledRadio = styled(Radio)` + margin-right: 16; +`; + +const StyledSection = styled(Section)` + align-items: center; + display: flex; + justify-content: space-around; + margin-bottom: 16px; + margin-left: 0; +`; + +const SaveButtonContainer = styled.div` + display: flex; + justify-content: flex-end; + width: auto; +`; + +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-bottom: ${({ theme }) => theme.spacing(1)}; + text-transform: uppercase; +`; + +export const Campaigns = () => { + let Specialty: any = []; + + const SpecialtyTypes: any = {}; + + const [campaignName, setCampaignName] = useState(''); + const [description, setDescription] = useState(''); + const [specialty, setSpecialty] = useState(''); + const [subSpecialty, setSubSpecialty] = useState(''); + const [startDate, setStartDate] = useState(new Date()); + const [endDate, setEndDate] = useState(new Date()); + const [selectedMessaging, setSelectedMessaging] = useState(''); + + const { loading: queryLoading, data: queryData } = useQuery(GET_SPECIALTY); + + if (!queryLoading) { + const specialtyTypes = queryData.subspecialties.edges.map( + (edge: { node: { specialtyType: { name: any } } }) => + edge?.node?.specialtyType?.name, + ); + const uniqueSpecialtyTypes = Array.from(new Set(specialtyTypes)); + Specialty = uniqueSpecialtyTypes.map((specialtyType) => ({ + value: specialtyType, + label: specialtyType, + })); + + queryData.subspecialties.edges.forEach( + (edge: { node: { specialtyType: { name: any }; name: any } }) => { + const specialtyType = edge.node.specialtyType.name; + const subSpecialty = edge.node.name; + + // If the specialty type is already a key in the dictionary, push the sub-specialty to its array + if (SpecialtyTypes[specialtyType]) { + SpecialtyTypes[specialtyType].push({ + value: subSpecialty, + label: subSpecialty, + }); + } else { + // If the specialty type is not yet a key, create a new array with the sub-specialty as its first element + SpecialtyTypes[specialtyType] = []; + SpecialtyTypes[specialtyType].push({ + value: subSpecialty, + label: subSpecialty, + }); + } + }, + ); + } + + const [addCampaigns, { loading, error }] = useMutation(ADD_CAMPAIGN); + const { enqueueSnackBar } = useSnackBar(); + + const handleCampaignChange = (e: any) => { + setCampaignName(e.target.value); + }; + + const handleDescriptionChange = (e: any) => { + setDescription(e.target.value); + }; + + const handleSpecialtySelectChange = (selectedValue: any) => { + setSpecialty(selectedValue); + }; + + const handleSubSpecialtySelectChange = (selectedValue: any) => { + setSubSpecialty(selectedValue); + }; + + const handleRadioChange = (value: string) => { + setSelectedMessaging(value); + }; + const resetCampaignData = () => { + setCampaignName(''); + setDescription(''); + setStartDate(new Date()); + setSelectedMessaging(''); + setSpecialty(''); + setSubSpecialty(''); + }; + const handleSave = async () => { + // console.log('Date', date.toISOString()); + + try { + console.log('Start Date', startDate); + + console.log('End Date', endDate); + const variables = { + input: { + id: uuidv4(), + campaignName: campaignName, + specialtyType: specialty, + description: description, + subSpecialtyType: subSpecialty, + startDate: startDate, + endDate: endDate, + messagingMedia: selectedMessaging, + }, + }; + const { data } = await addCampaigns({ + variables: variables, + }); + enqueueSnackBar('Campaign added successfully', { + variant: 'success', + }); + resetCampaignData(); + } catch (errors: any) { + console.error('Error updating user:', error); + enqueueSnackBar(errors.message + 'Error while Submitting Campaign', { + variant: 'error', + }); + } + }; + return ( + + + +
+ handleCampaignChange(event)} + placeholder="Campaign Name" + name="campaignName" + required + fullWidth + /> +
+
+ handleDescriptionChange(event)} + placeholder="Description about campaign" + name="description" + required + fullWidth + /> +
+
+ +
+ )} +
+ Start Date + setStartDate(startDate)} + minDate={new Date()} + /> +
+
+ End Date + setEndDate(endDate)} + minDate={startDate} + /> +
+ + Messaging + + handleRadioChange('SMS')} + checked={selectedMessaging === 'SMS'} + /> + handleRadioChange('WhastApp')} + checked={selectedMessaging === 'WhastApp'} + /> + + handleRadioChange('GBM')} + checked={selectedMessaging === 'GBM'} + /> + + handleRadioChange('Call')} + checked={selectedMessaging === 'Call'} + /> + + +