COM-964 Add multiselect to choose test contacts (Depends on: #78)

.changeset/chilly-dogs-draw.md

@@ -0,0 +1,8 @@
+---
+"@comet/brevo-admin": minor
+"@comet/brevo-api": minor
+---
+
+Adds `createBrevoTestContactsPage` for creating a test contacts page, that is indepent from the main list.
+
+Remove `email` and `redirectionUrl` from `brevoContactsPageAttributesConfig`

.changeset/nice-rings-learn.md

@@ -0,0 +1,5 @@
+---
+"@comet/brevo-admin": minor
+---
+
+Replace the TextField input for adding contacts with a FinalFormSelect component, allowing users to choose contacts directly from the TestContactList

demo/admin/src/Routes.tsx

@@ -1,6 +1,6 @@
 import { MasterLayout, RouteWithErrorBoundary } from "@comet/admin";
 import { Domain } from "@comet/admin-icons";
-import { createBrevoContactsPage, createEmailCampaignsPage, createTargetGroupsPage } from "@comet/brevo-admin";
+import { createBrevoContactsPage, createBrevoTestContactsPage, createEmailCampaignsPage, createTargetGroupsPage } from "@comet/brevo-admin";
 import { ContentScopeIndicator, createRedirectsPage, DamPage, PagesPage, PublisherPage, SitePreview } from "@comet/cms-admin";
 import { getBrevoContactConfig } from "@src/common/brevoModuleConfig/brevoContactsPageAttributesConfig";
 import { pageTreeCategories, urlParamToCategory } from "@src/pageTree/pageTreeCategories";
@@ -33,6 +33,14 @@ export const Routes: React.FC = () => {
         input2State: brevoContactConfig.input2State,
     });
 
+    const BrevoTestContactsPage = createBrevoTestContactsPage({
+        scopeParts: ["domain", "language"],
+        additionalAttributesFragment: brevoContactConfig.additionalAttributesFragment,
+        additionalGridFields: brevoContactConfig.additionalGridFields,
+        additionalFormFields: brevoContactConfig.additionalFormFields,
+        input2State: brevoContactConfig.input2State,
+    });
+
     const TargetGroupsPage = createTargetGroupsPage({
         scopeParts: ["domain", "language"],
         additionalFormFields: additionalFormConfig.additionalFormFields,
@@ -94,6 +102,7 @@ export const Routes: React.FC = () => {
                                     />
 
                                     <RouteWithErrorBoundary path={`${match.path}/newsletter/contacts`} component={BrevoContactsPage} />
+                                    <RouteWithErrorBoundary path={`${match.path}/newsletter/test-contacts`} component={BrevoTestContactsPage} />
                                     <RouteWithErrorBoundary path={`${match.path}/newsletter/target-groups`} component={TargetGroupsPage} />
                                     <RouteWithErrorBoundary path={`${match.path}/newsletter/email-campaigns`} component={EmailCampaignsPage} />
 

demo/admin/src/common/MasterMenu.tsx

@@ -40,6 +40,10 @@ export const MasterMenu: React.FC = () => {
                     primary={intl.formatMessage({ id: "menu.newsletter.contacts", defaultMessage: "Contacts" })}
                     to={`${match.url}/newsletter/contacts`}
                 />
+                <MenuItemRouterLink
+                    primary={intl.formatMessage({ id: "menu.newsletter.testContacts", defaultMessage: "Test contacts" })}
+                    to={`${match.url}/newsletter/test-contacts`}
+                />
                 <MenuItemRouterLink
                     primary={intl.formatMessage({ id: "menu.newsletter.targetGroups", defaultMessage: "Target groups" })}
                     to={`${match.url}/newsletter/target-groups`}

demo/admin/src/common/brevoModuleConfig/brevoContactsPageAttributesConfig.tsx

@@ -70,8 +70,6 @@ export const getBrevoContactConfig = (
         name: string;
     };
     input2State: (values?: AdditionalFormConfigInputProps) => {
-        email: string;
-        redirectionUrl: string;
         attributes: { BRANCH?: Array<GQLBrevoContactBranch>; SALUTATION?: GQLBrevoContactSalutation; FIRSTNAME?: string; LASTNAME?: string };
     };
     exportFields: {
@@ -140,8 +138,6 @@ export const getBrevoContactConfig = (
         ),
         input2State: (values?: AdditionalFormConfigInputProps) => {
             return {
-                email: values?.email ?? "",
-                redirectionUrl: values?.redirectionUrl ?? "",
                 attributes: {
                     BRANCH: values?.attributes?.BRANCH ?? [],
                     SALUTATION: values?.attributes?.SALUTATION,

demo/api/schema.gql

@@ -411,6 +411,7 @@ type TargetGroup implements DocumentInterface {
   createdAt: DateTime!
   title: String!
   isMainList: Boolean!
+  isTestList: Boolean!
   brevoId: Int!
   totalSubscribers: Int!
   totalContactsBlocked: Int!
@@ -528,6 +529,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!
+  brevoTestContacts(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!
@@ -687,6 +689,7 @@ input TargetGroupFilter {
   createdAt: DateFilter
   updatedAt: DateFilter
   title: StringFilter
+  isTestList: BooleanFilter
   and: [TargetGroupFilter!]
   or: [TargetGroupFilter!]
 }
@@ -739,7 +742,9 @@ type Mutation {
   deleteDamFolder(id: ID!): Boolean!
   updateBrevoContact(id: Int!, scope: EmailCampaignContentScopeInput!, input: BrevoContactUpdateInput!): BrevoContact!
   createBrevoContact(scope: EmailCampaignContentScopeInput!, input: BrevoContactInput!): SubscribeResponse!
+  createBrevoTestContact(scope: EmailCampaignContentScopeInput!, input: BrevoTestContactInput!): SubscribeResponse!
   deleteBrevoContact(id: Int!, scope: EmailCampaignContentScopeInput!): Boolean!
+  deleteBrevoTestContact(id: Int!, scope: EmailCampaignContentScopeInput!): Boolean!
   subscribeBrevoContact(input: SubscribeInput!, scope: EmailCampaignContentScopeInput!): SubscribeResponse!
   createEmailCampaign(scope: EmailCampaignContentScopeInput!, input: EmailCampaignInput!): EmailCampaign!
   updateEmailCampaign(id: ID!, input: EmailCampaignUpdateInput!, lastUpdatedAt: DateTime): EmailCampaign!
@@ -896,6 +901,12 @@ input BrevoContactInput {
   attributes: BrevoContactAttributesInput
 }
 
+input BrevoTestContactInput {
+  email: String!
+  blocked: Boolean!
+  attributes: BrevoContactAttributesInput
+}
+
 input SubscribeInput {
   email: String!
   redirectionUrl: String!

packages/admin/src/brevoContacts/form/BrevoContactForm.tsx

@@ -42,9 +42,12 @@ import {
 } from "./BrevoContactForm.gql.generated";
 
 export type EditBrevoContactFormValues = {
+    [key: string]: unknown;
+};
+
+type EditBrevoContactFormValuesWithAttributes = EditBrevoContactFormValues & {
     email: string;
     redirectionUrl: string;
-    [key: string]: unknown;
 };
 
 interface FormProps {
@@ -59,14 +62,11 @@ export function BrevoContactForm({ id, scope, input2State, additionalFormFields,
     const stackApi = useStackApi();
     const client = useApolloClient();
     const mode = id ? "edit" : "add";
-    const formApiRef = useFormApiRef<EditBrevoContactFormValues>();
+    const formApiRef = useFormApiRef<EditBrevoContactFormValuesWithAttributes>();
 
     const brevoContactFormFragment = gql`
         fragment BrevoContactForm on BrevoContact {
             email
-            createdAt
-            emailBlacklisted
-            smsBlacklisted
             ${additionalAttributesFragment ? "...".concat(additionalAttributesFragment?.name) : ""}
         }
         ${additionalAttributesFragment?.fragment ?? ""}
@@ -76,18 +76,20 @@ export function BrevoContactForm({ id, scope, input2State, additionalFormFields,
         id ? { variables: { id, scope } } : { skip: true },
     );
 
-    const initialValues = React.useMemo<Partial<EditBrevoContactFormValues>>(() => {
-        let additionalInitialValues = {};
+    const initialValues = React.useMemo<Partial<EditBrevoContactFormValuesWithAttributes>>(() => {
+        let baseInitialValues = {
+            email: "",
+            redirectionUrl: "",
+        };
 
         if (input2State) {
-            additionalInitialValues = input2State({ email: "", redirectionUrl: "", ...data?.brevoContact });
+            baseInitialValues = {
+                ...baseInitialValues,
+                ...input2State(data?.brevoContact),
+            };
         }
-        return data?.brevoContact
-            ? {
-                  email: data.brevoContact.email,
-                  ...additionalInitialValues,
-              }
-            : additionalInitialValues;
+
+        return data?.brevoContact?.email ? { ...baseInitialValues, email: data.brevoContact.email } : baseInitialValues;
     }, [data?.brevoContact, input2State]);
 
     const saveConflict = useFormSaveConflict({
@@ -112,7 +114,11 @@ export function BrevoContactForm({ id, scope, input2State, additionalFormFields,
         },
     });
 
-    const handleSubmit = async (state: EditBrevoContactFormValues, form: FormApi<EditBrevoContactFormValues>, event: FinalFormSubmitEvent) => {
+    const handleSubmit = async (
+        state: EditBrevoContactFormValuesWithAttributes,
+        form: FormApi<EditBrevoContactFormValuesWithAttributes>,
+        event: FinalFormSubmitEvent,
+    ) => {
         if (await saveConflict.checkForConflicts()) {
             throw new Error("Conflicts detected");
         }
@@ -159,7 +165,7 @@ export function BrevoContactForm({ id, scope, input2State, additionalFormFields,
     }
 
     return (
-        <FinalForm<EditBrevoContactFormValues> apiRef={formApiRef} onSubmit={handleSubmit} mode={mode} initialValues={initialValues}>
+        <FinalForm<EditBrevoContactFormValuesWithAttributes> apiRef={formApiRef} onSubmit={handleSubmit} mode={mode} initialValues={initialValues}>
             {({ values }) => (
                 <EditPageLayout>
                     {saveConflict.dialogs}