Merge pull request #28 from vivid-planet/add-dynamic-contacts-admin

COM-272: Add dynamic contacts admin
vivid-planet · Jan 26, 2024 · c92d126 · c92d126
2 parents ed09c40 + 9dd0256
commit c92d126
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 18 deletions.
diff --git a/demo/admin/src/Routes.tsx b/demo/admin/src/Routes.tsx
@@ -2,8 +2,10 @@ import { MasterLayout, RouteWithErrorBoundary } from "@comet/admin";
 import { Domain } from "@comet/admin-icons";
 import { createBrevoContactsPage } 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";
 import * as React from "react";
+import { useIntl } from "react-intl";
 import { RouteComponentProps } from "react-router";
 import { Redirect, Route, Switch } from "react-router-dom";
 
@@ -17,9 +19,17 @@ import { Page } from "./documents/pages/Page";
 import { ProductsPage } from "./products/ProductsPage";
 
 const RedirectsPage = createRedirectsPage();
-const BrevoContactsPage = createBrevoContactsPage({ scopeParts: ["domain", "language"] });
 
 export const Routes: React.FC = () => {
+    const intl = useIntl();
+    const brevoContactConfig = getBrevoContactConfig(intl);
+
+    const BrevoContactsPage = createBrevoContactsPage({
+        scopeParts: ["domain", "language"],
+        additionalAttributesFragment: brevoContactConfig.additionalAttributesFragment,
+        additionalGridFields: brevoContactConfig.additionalGridFields,
+    });
+
     return (
         <ContentScopeProvider>
             {({ match }) => (

diff --git a/demo/admin/src/common/brevoModuleConfig/brevoContactsPageAttributesConfig.ts b/demo/admin/src/common/brevoModuleConfig/brevoContactsPageAttributesConfig.ts
@@ -0,0 +1,50 @@
+import { GridColDef } from "@mui/x-data-grid";
+import { DocumentNode } from "graphql";
+import gql from "graphql-tag";
+import { IntlShape } from "react-intl";
+
+import { GQLBrevoContactAttributesFragmentFragment } from "./brevoContactsPageAttributesConfig.generated";
+
+const attributesFragment = gql`
+    fragment BrevoContactAttributesFragment on BrevoContact {
+        attributes {
+            LASTNAME
+            FIRSTNAME
+        }
+    }
+`;
+
+export const getBrevoContactConfig = (
+    intl: IntlShape,
+): {
+    additionalGridFields: GridColDef<GQLBrevoContactAttributesFragmentFragment>[];
+    additionalAttributesFragment: {
+        fragment: DocumentNode;
+        name: string;
+    };
+} => {
+    return {
+        additionalGridFields: [
+            {
+                field: "attributes.firstName",
+                headerName: intl.formatMessage({ id: "brevoContact.firstName", defaultMessage: "First name" }),
+                filterable: false,
+                sortable: false,
+                width: 150,
+                renderCell: ({ row }) => row.attributes?.FIRSTNAME,
+            },
+            {
+                field: "attributes.lastName",
+                headerName: intl.formatMessage({ id: "brevoContact.lastName", defaultMessage: "Last name" }),
+                filterable: false,
+                sortable: false,
+                width: 150,
+                renderCell: ({ row }) => row.attributes?.LASTNAME,
+            },
+        ],
+        additionalAttributesFragment: {
+            fragment: attributesFragment,
+            name: "BrevoContactAttributesFragment",
+        },
+    };
+};
diff --git a/packages/admin/src/brevoContacts/BrevoContactsGrid.tsx b/packages/admin/src/brevoContacts/BrevoContactsGrid.tsx
@@ -1,4 +1,4 @@
-import { gql, useApolloClient, useQuery } from "@apollo/client";
+import { DocumentNode, gql, useApolloClient, useQuery } from "@apollo/client";
 import {
     MainContent,
     messages,
@@ -39,18 +39,6 @@ const brevoContactsFragment = gql`
     }
 `;
 
-const brevoContactsQuery = gql`
-    query BrevoContactsGrid($offset: Int, $limit: Int, $email: String, $scope: EmailCampaignContentScopeInput!) {
-        brevoContacts(offset: $offset, limit: $limit, email: $email, scope: $scope) {
-            nodes {
-                ...BrevoContactsList
-            }
-            totalCount
-        }
-    }
-    ${brevoContactsFragment}
-`;
-
 const deleteBrevoContactMutation = gql`
     mutation DeleteBrevoContact($id: Int!) {
         deleteBrevoContact(id: $id)
@@ -81,7 +69,28 @@ function BrevoContactsGridToolbar({ intl }: { intl: IntlShape }) {
     );
 }
 
-export function BrevoContactsGrid({ scope }: { scope: ContentScopeInterface }): React.ReactElement {
+export function BrevoContactsGrid({
+    scope,
+    additionalAttributesFragment,
+    additionalGridFields = [],
+}: {
+    scope: ContentScopeInterface;
+    additionalAttributesFragment?: { name: string; fragment: DocumentNode };
+    additionalGridFields?: GridColDef[];
+}): React.ReactElement {
+    const brevoContactsQuery = gql`
+        query BrevoContactsGrid($offset: Int, $limit: Int, $email: String, $scope: EmailCampaignContentScopeInput!) {
+            brevoContacts(offset: $offset, limit: $limit, email: $email, scope: $scope) {
+                nodes {
+                    ...BrevoContactsList
+                    ${additionalAttributesFragment ? "...".concat(additionalAttributesFragment?.name) : ""}
+                }
+                totalCount
+            }
+        }
+        ${brevoContactsFragment}
+        ${additionalAttributesFragment?.fragment ?? ""}
+    `;
     const client = useApolloClient();
     const intl = useIntl();
     const dataGridProps = { ...useDataGridRemote(), ...usePersistentColumnState("BrevoContactsGrid") };
@@ -119,7 +128,7 @@ export function BrevoContactsGrid({ scope }: { scope: ContentScopeInterface }):
             sortable: false,
             width: 150,
         },
-        // TODO: add configurable contact attributes
+        ...additionalGridFields,
         {
             field: "actions",
             headerName: "",

diff --git a/packages/admin/src/brevoContacts/BrevoContactsPage.tsx b/packages/admin/src/brevoContacts/BrevoContactsPage.tsx
@@ -1,13 +1,17 @@
 import { useContentScope } from "@comet/cms-admin";
+import { GridColDef } from "@mui/x-data-grid";
+import { DocumentNode } from "graphql";
 import * as React from "react";
 
 import { BrevoContactsGrid } from "./BrevoContactsGrid";
 
 interface CreateContactsPageOptions {
     scopeParts: string[];
+    additionalAttributesFragment?: { name: string; fragment: DocumentNode };
+    additionalGridFields?: GridColDef[];
 }
 
-function createBrevoContactsPage({ scopeParts }: CreateContactsPageOptions) {
+function createBrevoContactsPage({ scopeParts, additionalAttributesFragment, additionalGridFields }: CreateContactsPageOptions) {
     function BrevoContactsPage(): JSX.Element {
         const { scope: completeScope } = useContentScope();
 
@@ -16,7 +20,13 @@ function createBrevoContactsPage({ scopeParts }: CreateContactsPageOptions) {
             return acc;
         }, {} as { [key: string]: unknown });
 
-        return <BrevoContactsGrid scope={scope} />;
+        return (
+            <BrevoContactsGrid
+                scope={scope}
+                additionalAttributesFragment={additionalAttributesFragment}
+                additionalGridFields={additionalGridFields}
+            />
+        );
     }
 
     return BrevoContactsPage;