Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ConfigVerification to all Brevo Pages #271

Merged
merged 2 commits into from
Jan 28, 2025
+186 −108
Merged

Add ConfigVerification to all Brevo Pages #271

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
70d286e
add ConfigVerification to all Brevo Pages
juliawegmayr Jan 24, 2025
32b57dd
add changeset
juliawegmayr Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/five-ways-sort.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@comet/brevo-admin": minor
---

Add `ConfigVerification` to all pages to guarantee that the config is set
65 changes: 34 additions & 31 deletions packages/admin/src/brevoContacts/BrevoContactsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import * as React from "react";
import { useIntl } from "react-intl";

import { useBrevoConfig } from "../common/BrevoConfigProvider";
import { ConfigVerification } from "../configVerification/ConfigVerification";
import { BrevoContactsGrid } from "./BrevoContactsGrid";
import { BrevoContactForm, EditBrevoContactFormValues } from "./form/BrevoContactForm";

Expand Down Expand Up @@ -32,43 +33,45 @@ function createBrevoContactsPage({
}, {} as { [key: string]: unknown });

return (
<Stack topLevelTitle={intl.formatMessage({ id: "cometBrevoModule.brevoContacts.brevoContacts", defaultMessage: "Contacts" })}>
<StackSwitch>
<StackPage name="grid">
<StackToolbar scopeIndicator={<ContentScopeIndicator scope={scope} />} />
<BrevoContactsGrid
scope={scope}
additionalAttributesFragment={additionalAttributesFragment}
additionalGridFields={additionalGridFields}
/>
</StackPage>
<StackPage
name="edit"
title={intl.formatMessage({ id: "cometBrevoModule.brevoContacts.editBrevoContact", defaultMessage: "Edit contact" })}
>
{(selectedId) => (
<ConfigVerification scope={scope}>
<Stack topLevelTitle={intl.formatMessage({ id: "cometBrevoModule.brevoContacts.brevoContacts", defaultMessage: "Contacts" })}>
<StackSwitch>
<StackPage name="grid">
<StackToolbar scopeIndicator={<ContentScopeIndicator scope={scope} />} />
<BrevoContactsGrid
scope={scope}
additionalAttributesFragment={additionalAttributesFragment}
additionalGridFields={additionalGridFields}
/>
</StackPage>
<StackPage
name="edit"
title={intl.formatMessage({ id: "cometBrevoModule.brevoContacts.editBrevoContact", defaultMessage: "Edit contact" })}
>
{(selectedId) => (
<BrevoContactForm
additionalFormFields={additionalFormFields}
additionalAttributesFragment={additionalAttributesFragment}
input2State={input2State}
id={Number(selectedId)}
scope={scope}
/>
)}
</StackPage>
<StackPage
name="add"
title={intl.formatMessage({ id: "cometBrevoModule.brevoContacts.addBrevoContact", defaultMessage: "Add contact" })}
>
<BrevoContactForm
additionalFormFields={additionalFormFields}
additionalAttributesFragment={additionalAttributesFragment}
input2State={input2State}
id={Number(selectedId)}
scope={scope}
/>
)}
</StackPage>
<StackPage
name="add"
title={intl.formatMessage({ id: "cometBrevoModule.brevoContacts.addBrevoContact", defaultMessage: "Add contact" })}
>
<BrevoContactForm
additionalFormFields={additionalFormFields}
additionalAttributesFragment={additionalAttributesFragment}
input2State={input2State}
scope={scope}
/>
</StackPage>
</StackSwitch>
</Stack>
</StackPage>
</StackSwitch>
</Stack>
</ConfigVerification>
);
}

Expand Down
67 changes: 36 additions & 31 deletions packages/admin/src/brevoTestContacts/BrevoTestContactsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { DocumentNode } from "graphql";
import * as React from "react";
import { useIntl } from "react-intl";

import { ConfigVerification } from "../configVerification/ConfigVerification";
import { BrevoTestContactsGrid } from "./BrevoTestContactsGrid";
import { BrevoTestContactForm, EditBrevoContactFormValues } from "./form/BrevoTestContactForm";

Expand Down Expand Up @@ -32,43 +33,47 @@ function createBrevoTestContactsPage({
}, {} as { [key: string]: unknown });

return (
<Stack topLevelTitle={intl.formatMessage({ id: "cometBrevoModule.brevoContacts.brevoTestContacts", defaultMessage: "Test Contacts" })}>
<StackSwitch>
<StackPage name="grid">
<StackToolbar scopeIndicator={<ContentScopeIndicator scope={scope} />} />
<BrevoTestContactsGrid
scope={scope}
additionalAttributesFragment={additionalAttributesFragment}
additionalGridFields={additionalGridFields}
/>
</StackPage>
<StackPage
name="edit"
title={intl.formatMessage({ id: "cometBrevoModule.brevoContacts.editBrevoContact", defaultMessage: "Edit contact" })}
>
{(selectedId) => (
<ConfigVerification scope={scope}>
<Stack
topLevelTitle={intl.formatMessage({ id: "cometBrevoModule.brevoContacts.brevoTestContacts", defaultMessage: "Test Contacts" })}
>
<StackSwitch>
<StackPage name="grid">
<StackToolbar scopeIndicator={<ContentScopeIndicator scope={scope} />} />
<BrevoTestContactsGrid
scope={scope}
additionalAttributesFragment={additionalAttributesFragment}
additionalGridFields={additionalGridFields}
/>
</StackPage>
<StackPage
name="edit"
title={intl.formatMessage({ id: "cometBrevoModule.brevoContacts.editBrevoContact", defaultMessage: "Edit contact" })}
>
{(selectedId) => (
<BrevoTestContactForm
additionalFormFields={additionalFormFields}
additionalAttributesFragment={additionalAttributesFragment}
input2State={input2State}
id={Number(selectedId)}
scope={scope}
/>
)}
</StackPage>
<StackPage
name="add"
title={intl.formatMessage({ id: "cometBrevoModule.brevoContacts.addBrevoContact", defaultMessage: "Add contact" })}
>
<BrevoTestContactForm
additionalFormFields={additionalFormFields}
additionalAttributesFragment={additionalAttributesFragment}
input2State={input2State}
id={Number(selectedId)}
scope={scope}
/>
)}
</StackPage>
<StackPage
name="add"
title={intl.formatMessage({ id: "cometBrevoModule.brevoContacts.addBrevoContact", defaultMessage: "Add contact" })}
>
<BrevoTestContactForm
additionalFormFields={additionalFormFields}
additionalAttributesFragment={additionalAttributesFragment}
input2State={input2State}
scope={scope}
/>
</StackPage>
</StackSwitch>
</Stack>
</StackPage>
</StackSwitch>
</Stack>
</ConfigVerification>
);
}

Expand Down
9 changes: 9 additions & 0 deletions packages/admin/src/configVerification/ConfigVerification.gql.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { gql } from "@apollo/client";

export const brevoConfigCheckQuery = gql`
query BrevoConfigCheck($scope: EmailCampaignContentScopeInput!) {
brevoConfig(scope: $scope) {
id
}
}
`;
40 changes: 40 additions & 0 deletions packages/admin/src/configVerification/ConfigVerification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { useQuery } from "@apollo/client";
import { Alert, Loading, MainContent } from "@comet/admin";
import { ContentScopeInterface } from "@comet/cms-admin";
import * as React from "react";
import { FormattedMessage } from "react-intl";

import { brevoConfigCheckQuery } from "./ConfigVerification.gql";
import { GQLBrevoConfigCheckQuery, GQLBrevoConfigCheckQueryVariables } from "./ConfigVerification.gql.generated";

interface ConfigCheckProps {
scope: ContentScopeInterface;
}

export function ConfigVerification({ scope, children }: React.PropsWithChildren<ConfigCheckProps>): JSX.Element {
const { data, error, loading } = useQuery<GQLBrevoConfigCheckQuery, GQLBrevoConfigCheckQueryVariables>(brevoConfigCheckQuery, {
variables: { scope },
fetchPolicy: "cache-and-network",
});

if (error) throw error;

if (loading) {
return <Loading behavior="fillPageHeight" />;
}

if (!data?.brevoConfig?.id) {
return (
<MainContent>
<Alert severity="error">
<FormattedMessage
id="cometBrevoModule.missingConfig"
defaultMessage="Missing brevo config! Configure brevo via the config page."
/>
</Alert>
</MainContent>
);
}

return <>{children}</>;
}
61 changes: 37 additions & 24 deletions packages/admin/src/emailCampaigns/EmailCampaignsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import * as React from "react";
import { useIntl } from "react-intl";

import { useBrevoConfig } from "../common/BrevoConfigProvider";
import { ConfigVerification } from "../configVerification/ConfigVerification";
import { EmailCampaignsGrid } from "./EmailCampaignsGrid";
import { EmailCampaignForm } from "./form/EmailCampaignForm";
import { EmailCampaignStatistics } from "./statistics/EmailCampaignStatistics";
Expand All @@ -26,31 +27,43 @@ export function createEmailCampaignsPage({ EmailCampaignContentBlock }: CreateEm
}, {} as { [key: string]: unknown });

return (
<Stack topLevelTitle={intl.formatMessage({ id: "cometBrevoModule.emailCampaigns.emailCampaigns", defaultMessage: "Email campaigns" })}>
<StackSwitch>
<StackPage name="grid">
<StackToolbar scopeIndicator={<ContentScopeIndicator scope={scope} />} />
<EmailCampaignsGrid scope={scope} EmailCampaignContentBlock={EmailCampaignContentBlock} />
</StackPage>
<StackPage name="statistics">{(selectedId) => <EmailCampaignStatistics id={selectedId} />}</StackPage>
<StackPage name="view">
{(selectedId) => <EmailCampaignView id={selectedId} EmailCampaignContentBlock={EmailCampaignContentBlock} />}
</StackPage>
<ConfigVerification scope={scope}>
<Stack
topLevelTitle={intl.formatMessage({ id: "cometBrevoModule.emailCampaigns.emailCampaigns", defaultMessage: "Email campaigns" })}
>
<StackSwitch>
<StackPage name="grid">
<StackToolbar scopeIndicator={<ContentScopeIndicator scope={scope} />} />
<EmailCampaignsGrid scope={scope} EmailCampaignContentBlock={EmailCampaignContentBlock} />
</StackPage>
<StackPage name="statistics">{(selectedId) => <EmailCampaignStatistics id={selectedId} />}</StackPage>
<StackPage name="view">
{(selectedId) => <EmailCampaignView id={selectedId} EmailCampaignContentBlock={EmailCampaignContentBlock} />}
</StackPage>

<StackPage
name="edit"
title={intl.formatMessage({ id: "cometBrevoModule.emailCampaigns.editEmailCampaign", defaultMessage: "Edit email campaign" })}
>
{(selectedId) => <EmailCampaignForm id={selectedId} EmailCampaignContentBlock={EmailCampaignContentBlock} scope={scope} />}
</StackPage>
<StackPage
name="add"
title={intl.formatMessage({ id: "cometBrevoModule.emailCampaigns.addEmailCampaign", defaultMessage: "Add email campaign" })}
>
<EmailCampaignForm EmailCampaignContentBlock={EmailCampaignContentBlock} scope={scope} />
</StackPage>
</StackSwitch>
</Stack>
<StackPage
name="edit"
title={intl.formatMessage({
id: "cometBrevoModule.emailCampaigns.editEmailCampaign",
defaultMessage: "Edit email campaign",
})}
>
{(selectedId) => (
<EmailCampaignForm id={selectedId} EmailCampaignContentBlock={EmailCampaignContentBlock} scope={scope} />
)}
</StackPage>
<StackPage
name="add"
title={intl.formatMessage({
id: "cometBrevoModule.emailCampaigns.addEmailCampaign",
defaultMessage: "Add email campaign",
})}
>
<EmailCampaignForm EmailCampaignContentBlock={EmailCampaignContentBlock} scope={scope} />
</StackPage>
</StackSwitch>
</Stack>
</ConfigVerification>
);
}
return EmailCampaignsPage;
Expand Down
47 changes: 25 additions & 22 deletions packages/admin/src/targetGroups/TargetGroupsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import * as React from "react";
import { useIntl } from "react-intl";

import { useBrevoConfig } from "../common/BrevoConfigProvider";
import { ConfigVerification } from "../configVerification/ConfigVerification";
import { EditTargetGroupFinalFormValues, TargetGroupForm } from "./TargetGroupForm";
import { AdditionalContactAttributesType, TargetGroupsGrid } from "./TargetGroupsGrid";

Expand All @@ -31,28 +32,30 @@ export function createTargetGroupsPage({ additionalFormFields, nodeFragment, inp
}, {} as { [key: string]: unknown });

return (
<Stack topLevelTitle={intl.formatMessage({ id: "cometBrevoModule.targetGroups.targetGroups", defaultMessage: "Target groups" })}>
<StackSwitch>
<StackPage name="grid">
<Toolbar scopeIndicator={<ContentScopeIndicator scope={scope} />} />
<TargetGroupsGrid scope={scope} exportTargetGroupOptions={exportTargetGroupOptions} />
</StackPage>
<StackPage
name="edit"
title={intl.formatMessage({ id: "cometBrevoModule.targetGroups.editTargetGroup", defaultMessage: "Edit target group" })}
>
{(selectedId) => (
<TargetGroupForm
id={selectedId}
scope={scope}
additionalFormFields={additionalFormFields}
nodeFragment={nodeFragment}
input2State={input2State}
/>
)}
</StackPage>
</StackSwitch>
</Stack>
<ConfigVerification scope={scope}>
<Stack topLevelTitle={intl.formatMessage({ id: "cometBrevoModule.targetGroups.targetGroups", defaultMessage: "Target groups" })}>
<StackSwitch>
<StackPage name="grid">
<Toolbar scopeIndicator={<ContentScopeIndicator scope={scope} />} />
<TargetGroupsGrid scope={scope} exportTargetGroupOptions={exportTargetGroupOptions} />
</StackPage>
<StackPage
name="edit"
title={intl.formatMessage({ id: "cometBrevoModule.targetGroups.editTargetGroup", defaultMessage: "Edit target group" })}
>
{(selectedId) => (
<TargetGroupForm
id={selectedId}
scope={scope}
additionalFormFields={additionalFormFields}
nodeFragment={nodeFragment}
input2State={input2State}
/>
)}
</StackPage>
</StackSwitch>
</Stack>
</ConfigVerification>
);
}

Expand Down
Loading