Skip to content

Commit

Permalink
Added Trigger Campaign UI and functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
sanjana0190 committed Apr 12, 2024
1 parent 99b2359 commit ecc8b92
Show file tree
Hide file tree
Showing 27 changed files with 2,055 additions and 616 deletions.
3 changes: 3 additions & 0 deletions packages/twenty-front/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ import { TextTemplate } from '~/pages/Templates/TextTemplate';
import { VideoTemplate } from '~/pages/Templates/VideoTemplate';
import { getPageTitleFromPath } from '~/utils/title-utils';
import { Segment } from '~/pages/Segment/Segment';
import { RunCampaign } from '~/pages/campaigns/RunCampaign';

export const App = () => {
const isSelfBillingEnabled = useIsFeatureEnabled('IS_SELF_BILLING_ENABLED');
Expand Down Expand Up @@ -227,6 +228,8 @@ export const App = () => {
<Route path={CustomPath.TemplatesPage} element={<TemplatesList />} />

<Route path={CustomPath.SegmentPage} element={<Segment />} />
<Route path={CustomPath.RunCampaign} element={<RunCampaign />} />

</Routes>
</DefaultLayout>
</>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -80,10 +80,10 @@ export const MainNavigationDrawerItems = () => {
Icon={IconMail}
/>

<NavigationDrawerItem
label="Campaigns"
<NavigationDrawerItem
label="Run Campaign"
onClick={() => {
navigate('/campaigns');
navigate('/runcampaign');
}}
Icon={IconMail}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export const TextFieldInput = ({
onTab={handleTab}
hotkeyScope={hotkeyScope}
onChange={handleChange}
disabled
// disabled
/>
</FieldTextAreaOverlay>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ export const generateColumns = <T extends string>(
const [isRowSelected, onRowSelectionChange] = useRowSelection();

return (
<>
<StyledCheckboxContainer>
<Checkbox
aria-label="Select"
Expand All @@ -91,6 +92,21 @@ export const generateColumns = <T extends string>(
}}
/>
</StyledCheckboxContainer>
<StyledCheckboxContainer>
<Checkbox
aria-label="Select"
checked={isRowSelected}
variant={CheckboxVariant.Tertiary}
onChange={(event) => {
onRowSelectionChange({
row: props.row,
checked: event.target.checked,
isShiftClick: (event.nativeEvent as MouseEvent).shiftKey,
});
}}
/>
</StyledCheckboxContainer>
</>
);
},
},
Expand Down
4 changes: 4 additions & 0 deletions packages/twenty-front/src/modules/types/CustomPath.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,11 @@ export enum CustomPath {
DatePickerPage = '/datepicker',

CampaignForm = '/campaign/:userid',
// CampaignForm1 = '/campaign1/:userid',
// CampaignForm1 = '/campaign2/:userid',

RunCampaign = '/runcampaign',

SegmentPage = '/segment',

}
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ export const Checkbox = ({
onChange?.(event);
onCheckedChange?.(event.target.checked);
setIsInternalChecked(event.target.checked ?? false);

};

const checkboxId = 'checkbox' + v4();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const StyledModalDiv = styled(motion.div)<{
color: ${({ theme }) => theme.font.color.primary};
border-radius: ${({ theme }) => theme.border.radius.md};
overflow: hidden;
height: 100vh;
height: 150vh;
z-index: 10000; // should be higher than Backdrop's z-index
width: ${({ size, theme }) => {
Expand All @@ -35,11 +35,22 @@ const StyledModalDiv = styled(motion.div)<{
return theme.modal.size.lg;
case 'extralarge':
return theme.modal.size.xl;
case 'superlarge':
return theme.modal.size.xxl;
default:
return 'auto';
}
}};
height: ${({ size, theme }) => {
switch (size) {
case 'superlarge':
return theme.modal.size.xxl;
default:
return 'auto';
}
}};
padding: ${({ padding, theme }) => {
switch (padding) {
case 'none':
Expand Down Expand Up @@ -125,7 +136,7 @@ const ModalFooter = ({ children, className }: ModalFooterProps) => (
/**
* Modal
*/
export type ModalSize = 'small' | 'medium' | 'large' | 'extralarge';
export type ModalSize = 'small' | 'medium' | 'large' | 'extralarge' | 'superlarge';
export type ModalPadding = 'none' | 'small' | 'medium' | 'large';

type ModalProps = React.PropsWithChildren & {
Expand Down
93 changes: 82 additions & 11 deletions packages/twenty-front/src/modules/ui/layout/page/PageAddButton.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,89 @@
import { useColumnDefinitionsFromFieldMetadata } from '@/object-metadata/hooks/useColumnDefinitionsFromFieldMetadata';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { IconPlus } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
import { IconButton } from '@/ui/input/button/components/IconButton';
import { useViewBar } from '@/views/hooks/useViewBar';
import {
IconPlayCard,
IconPlayerPlay,
IconPlayerPlayFilled,
} from '@tabler/icons-react';
import React from 'react';
import { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useRecoilValue } from 'recoil';

type PageAddButtonProps = {
onClick: () => void;
};

export const PageAddButton = ({ onClick }: PageAddButtonProps) => (
<IconButton
Icon={IconPlus}
dataTestId="add-button"
size="medium"
variant="secondary"
accent="default"
onClick={onClick}
ariaLabel="Add"
/>
);
export const PageAddButton = ({ onClick }: PageAddButtonProps) => {
const [enableTrigger, setEnableTrigger] = React.useState(false);

const objectNamePlural = useParams().objectNamePlural ?? '';

const { objectNameSingular } = useObjectNameSingularFromPlural({
objectNamePlural,
});

const { createOneRecord: createOneObject } = useCreateOneRecord({
objectNameSingular,
});

const recordIndexId = objectNamePlural ?? '';
const {
setTableFilters,
setTableSorts,
setTableColumns,
getSelectedRowIdsSelector,
} = useRecordTable({
recordTableId: recordIndexId,
});

const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular,
});

const { columnDefinitions } =
useColumnDefinitionsFromFieldMetadata(objectMetadataItem);

const selectedRowIds = useRecoilValue(getSelectedRowIdsSelector());
console.log('=========', selectedRowIds);

useEffect(() => {
if (objectNamePlural === 'campaignLists') {
if (selectedRowIds.length == 1) {
setEnableTrigger(true);
} else {
setEnableTrigger(false);
}
}
}, [selectedRowIds]);

return (
<>
<IconButton
Icon={IconPlus}
dataTestId="add-button"
size="medium"
variant="secondary"
accent="default"
onClick={onClick}
ariaLabel="Add"
/>

{enableTrigger && (
<Button
title="Run Campaign"
variant="primary"
accent="dark"
Icon={IconPlayerPlay}
/>
)}
</>
);
};
Original file line number Diff line number Diff line change
@@ -1,99 +1,9 @@
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
leads
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
}
}
`;
mutation CreateOneCampaignList($input: CampaignListCreateInput!) {
createCampaignList(data: $input) {
id
}}`;



Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { gql } from '@apollo/client';
export const ADD_SEGMENT = gql`
mutation CreateOneSegmentList($input: SegmentListCreateInput!) {
createSegmentList(data: $input) {
id
}
}`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { gql } from '@apollo/client';

export const GET_CAMPAIGN_LISTS = gql`
query FindManyCampaignLists($filter: CampaignListFilterInput, $orderBy: CampaignListOrderByInput, $lastCursor: String, $limit: Float) {
campaignLists(
filter: $filter
orderBy: $orderBy
first: $limit
after: $lastCursor
) {
edges {
node {
id
name
subSpecialtyType
formUrl
description
formNameId
createdAt
updatedAt
campaignName
messagingMedia
specialtyType
startDate
endDate
leads
segment {
id
segmentName
segmentDescription
filters
}
}
}
pageInfo {
hasNextPage
startCursor
endCursor
__typename
}
totalCount
__typename
}
}`
Loading

0 comments on commit ecc8b92

Please sign in to comment.