Manually add contacts to target groups (#52)

* Add api functionality to add and remove contacts manually from target groups * Add form to manually add contacts in target group * Add changeset * Remove unnessecary onAfterSubmit in FinalForm * Save assignedContactsTargetGroupId directly to associated target group property * Do not remove manually assigned contacts from target group on attribute update * Rename callback function to onOpenDialog * Remove intl from toolbar properties and use intl directly * Remove toolbar props interface and define directly in function * Rephrase changeset description * Add seperate query to find all brevo contacts in a specific target group * Remove unnessecary function from service * Add empty line in changeset after title * Rename brevoContactsInTargetGroup to manuallyAssignedBrevoContacts and adapt args --------- Co-authored-by: Denise Buder <[email protected]>
vivid-planet · Jul 11, 2024 · e774ecb · e774ecb
1 parent 23371d5
commit e774ecb
Show file tree

Hide file tree

Showing 17 changed files with 631 additions and 35 deletions.
diff --git a/.changeset/dirty-balloons-prove.md b/.changeset/dirty-balloons-prove.md
@@ -0,0 +1,8 @@
+---
+"@comet/brevo-admin": minor
+"@comet/brevo-api": minor
+---
+
+Allow manually assigning contacts to a target group
+
+This is in addition to the existing automatic assignment via filters.
diff --git a/demo/api/schema.gql b/demo/api/schema.gql
@@ -422,6 +422,7 @@ type TargetGroup implements DocumentInterface {
   totalSubscribers: Int!
   totalContactsBlocked: Int!
   scope: EmailCampaignContentScope!
+  assignedContactsTargetGroupBrevoId: Int
   filters: BrevoContactFilterAttributes
 }
 
@@ -534,6 +535,7 @@ type Query {
   mainMenu(scope: PageTreeNodeScopeInput!): [PageTreeNode!]!
   brevoContact(id: Int!, scope: EmailCampaignContentScopeInput!): BrevoContact!
   brevoContacts(targetGroupId: ID, email: String, scope: EmailCampaignContentScopeInput!, offset: Int! = 0, limit: Int! = 25): PaginatedBrevoContacts!
+  manuallyAssignedBrevoContacts(offset: Int! = 0, limit: Int! = 25, targetGroupId: ID!, email: String): PaginatedBrevoContacts!
   emailCampaign(id: ID!): EmailCampaign!
   emailCampaigns(scope: EmailCampaignContentScopeInput!, search: String, filter: EmailCampaignFilter, sort: [EmailCampaignSort!], offset: Int! = 0, limit: Int! = 25): PaginatedEmailCampaigns!
   emailCampaignStatistics(id: ID!): BrevoApiCampaignStatistics
@@ -776,6 +778,8 @@ type Mutation {
   sendEmailCampaignNow(id: ID!): Boolean!
   sendEmailCampaignToTestEmails(id: ID!, data: SendTestEmailCampaignArgs!): Boolean!
   createTargetGroup(scope: EmailCampaignContentScopeInput!, input: TargetGroupInput!): TargetGroup!
+  addBrevoContactsToTargetGroup(id: ID!, input: AddBrevoContactsInput!): Boolean!
+  removeBrevoContactFromTargetGroup(id: ID!, input: RemoveBrevoContactInput!): Boolean!
   updateTargetGroup(id: ID!, input: TargetGroupUpdateInput!, lastUpdatedAt: DateTime): TargetGroup!
   deleteTargetGroup(id: ID!): Boolean!
 }
@@ -962,6 +966,14 @@ input TargetGroupInput {
   filters: BrevoContactFilterAttributesInput
 }
 
+input AddBrevoContactsInput {
+  brevoContactIds: [Int!]!
+}
+
+input RemoveBrevoContactInput {
+  brevoContactId: Int!
+}
+
 input TargetGroupUpdateInput {
   title: String
   filters: BrevoContactFilterAttributesInput

diff --git a/demo/api/src/db/migrations/Migration20240619092554.ts b/demo/api/src/db/migrations/Migration20240619092554.ts
@@ -0,0 +1,7 @@
+import { Migration } from "@mikro-orm/migrations";
+
+export class Migration20240619092554 extends Migration {
+    async up(): Promise<void> {
+        this.addSql('alter table "TargetGroup" add column "assignedContactsTargetGroupBrevoId" int null;');
+    }
+}
diff --git a/packages/admin/src/targetGroups/TargetGroupForm.gql.ts b/packages/admin/src/targetGroups/TargetGroupForm.gql.ts
@@ -4,7 +4,9 @@ export const targetGroupFormQuery = (targetGroupFormFragment: DocumentNode) => g
     query TargetGroupForm($id: ID!) {
         targetGroup(id: $id) {
             id
+            title
             updatedAt
+            assignedContactsTargetGroupBrevoId
             ...TargetGroupForm
         }
     }

diff --git a/packages/admin/src/targetGroups/TargetGroupForm.tsx b/packages/admin/src/targetGroups/TargetGroupForm.tsx
@@ -1,11 +1,11 @@
 import { DocumentNode, gql, useApolloClient, useQuery } from "@apollo/client";
 import {
     Field,
+    FieldSet,
     FinalForm,
     FinalFormInput,
     FinalFormSaveSplitButton,
     FinalFormSubmitEvent,
-    FormSection,
     Loading,
     MainContent,
     Toolbar,
@@ -19,11 +19,14 @@ import {
 } from "@comet/admin";
 import { ArrowLeft } from "@comet/admin-icons";
 import { ContentScopeInterface, EditPageLayout, queryUpdatedAt, resolveHasSaveConflict, useFormSaveConflict } from "@comet/cms-admin";
-import { Card, IconButton } from "@mui/material";
+import { IconButton } from "@mui/material";
 import { FormApi } from "final-form";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
+export { namedOperations as targetGroupFormNamedOperations } from "./TargetGroupForm.gql.generated";
+
+import { AddContactsGridSelect } from "./addContacts/AddContactsGridSelect";
 import { createTargetGroupMutation, targetGroupFormQuery, updateTargetGroupMutation } from "./TargetGroupForm.gql";
 import {
     GQLCreateTargetGroupMutation,
@@ -56,7 +59,6 @@ export function TargetGroupForm({ id, scope, additionalFormFields, input2State,
 
     const targetGroupFormFragment = gql`
         fragment TargetGroupForm on TargetGroup {
-            title
             ${nodeFragment ? "...".concat(nodeFragment?.name) : ""}
         }
         ${nodeFragment?.fragment ?? ""}
@@ -159,11 +161,33 @@ export function TargetGroupForm({ id, scope, additionalFormFields, input2State,
                             label={<FormattedMessage id="cometBrevoModule.targetGroup.title" defaultMessage="Title" />}
                         />
                         {additionalFormFields && (
-                            <Card sx={{ padding: 4 }}>
-                                <FormSection title={<FormattedMessage id="cometBrevoModule.targetGroup.filters" defaultMessage="Filters" />}>
-                                    {additionalFormFields}
-                                </FormSection>
-                            </Card>
+                            <FieldSet
+                                title={<FormattedMessage id="cometBrevoModule.targetGroup.filters" defaultMessage="Filters" />}
+                                supportText={
+                                    <FormattedMessage
+                                        id="cometBrevoModule.targetGroup.filters.explainText"
+                                        defaultMessage="Contacts will get assigned automatically to this target group depending on their attributes"
+                                    />
+                                }
+                                initiallyExpanded
+                            >
+                                {additionalFormFields}
+                            </FieldSet>
+                        )}
+                        {id && (
+                            <FieldSet
+                                title={
+                                    <FormattedMessage id="cometBrevoModule.targetGroup.manuallyAddContacts" defaultMessage="Manually add contacts" />
+                                }
+                                initiallyExpanded
+                                disablePadding
+                            >
+                                <AddContactsGridSelect
+                                    assignedContactsTargetGroupBrevoId={data?.targetGroup.assignedContactsTargetGroupBrevoId ?? undefined}
+                                    id={id}
+                                    scope={scope}
+                                />
+                            </FieldSet>
                         )}
                     </MainContent>
                 </EditPageLayout>

diff --git a/packages/admin/src/targetGroups/TargetGroupsGrid.tsx b/packages/admin/src/targetGroups/TargetGroupsGrid.tsx
@@ -128,9 +128,9 @@ export function TargetGroupsGrid({
     const dataGridProps = { ...useDataGridRemote(), ...usePersistentColumnState("TargetGroupsGrid") };
 
     const targetGroupContactsQuery = gql`
-        query TargetGroupContacts($targetGroupId: ID, $offset: Int, $limit: Int, $scope: EmailCampaignContentScopeInput!) {
-            brevoContacts(targetGroupId: $targetGroupId, offset: $offset, limit: $limit, scope: $scope) {
-                nodes {
+        query TargetGroupContacts($targetGroupId: ID!, $offset: Int, $limit: Int, $scope: EmailCampaignContentScopeInput!) {
+            brevoContacts(targetGroupId: $targetGroupId, offset: $offset, limit: $limit, scope: $scope) {               
+                 nodes {
                     ...TargetGroupContactItem
                     ${
                         exportTargetGroupOptions?.additionalAttributesFragment
@@ -176,9 +176,9 @@ export function TargetGroupsGrid({
                 query: targetGroupContactsQuery,
                 variables: {
                     targetGroupId: id,
-                    scope: scope,
                     offset: offset,
                     limit: 100,
+                    scope,
                 },
             });
 

diff --git a/packages/admin/src/targetGroups/addContacts/AddContactsGridSelect.gql.ts b/packages/admin/src/targetGroups/addContacts/AddContactsGridSelect.gql.ts
@@ -0,0 +1,48 @@
+import { gql } from "@apollo/client";
+
+const targetGroupBrevoContactsFragment = gql`
+    fragment TargetGroupBrevoContactsList on BrevoContact {
+        id
+        createdAt
+        modifiedAt
+        email
+        emailBlacklisted
+        smsBlacklisted
+    }
+`;
+
+export const manuallyAssignedBrevoContactsGridQuery = gql`
+    query ManuallyAssignedBrevoContactsGrid($offset: Int, $limit: Int, $email: String, $targetGroupId: ID!) {
+        manuallyAssignedBrevoContacts(offset: $offset, limit: $limit, email: $email, targetGroupId: $targetGroupId) {
+            nodes {
+                ...TargetGroupBrevoContactsList
+            }
+            totalCount
+        }
+    }
+    ${targetGroupBrevoContactsFragment}
+`;
+
+export const allBrevoContactsQuery = gql`
+    query AllBrevoContactsGrid($offset: Int, $limit: Int, $email: String, $scope: EmailCampaignContentScopeInput!) {
+        brevoContacts(offset: $offset, limit: $limit, email: $email, scope: $scope) {
+            nodes {
+                ...TargetGroupBrevoContactsList
+            }
+            totalCount
+        }
+    }
+    ${targetGroupBrevoContactsFragment}
+`;
+
+export const addBrevoContactsToTargetGroupMutation = gql`
+    mutation AddBrevoContactsToTargetGroup($id: ID!, $input: AddBrevoContactsInput!) {
+        addBrevoContactsToTargetGroup(id: $id, input: $input)
+    }
+`;
+
+export const removeBrevoContactFromTargetGroupMutation = gql`
+    mutation RemoveBrevoContactFromTargetGroup($id: ID!, $input: RemoveBrevoContactInput!) {
+        removeBrevoContactFromTargetGroup(id: $id, input: $input)
+    }
+`;