Merge pull request #42 from vivid-planet/view-sent-campaigns

#41 View sent campaigns

packages/admin/src/emailCampaigns/EmailCampaignsGrid.tsx

@@ -15,7 +15,7 @@ import {
     useDataGridRemote,
     usePersistentColumnState,
 } from "@comet/admin";
-import { Add as AddIcon, Edit, Statistics } from "@comet/admin-icons";
+import { Add as AddIcon, Edit, Statistics, Visible } from "@comet/admin-icons";
 import { BlockInterface } from "@comet/blocks-admin";
 import { ContentScopeInterface } from "@comet/cms-admin";
 import { Button, IconButton } from "@mui/material";
@@ -177,9 +177,14 @@ export function EmailCampaignsGrid({
                             </IconButton>
                         )}
                         {row.sendingState === "SENT" && (
-                            <IconButton component={StackLink} pageName="statistics" payload={row.id}>
-                                <Statistics color="primary" />
-                            </IconButton>
+                            <>
+                                <IconButton component={StackLink} pageName="statistics" payload={row.id}>
+                                    <Statistics color="primary" />
+                                </IconButton>
+                                <IconButton component={StackLink} pageName="view" payload={row.id}>
+                                    <Visible color="primary" />
+                                </IconButton>
+                            </>
                         )}
                         <CrudContextMenu
                             copyData={() => {

packages/admin/src/emailCampaigns/EmailCampaignsPage.tsx

@@ -7,6 +7,7 @@ import { useIntl } from "react-intl";
 import { EmailCampaignsGrid } from "./EmailCampaignsGrid";
 import { EmailCampaignForm } from "./form/EmailCampaignForm";
 import { EmailCampaignStatistics } from "./statistics/EmailCampaignStatistics";
+import { EmailCampaignView } from "./view/EmailCampaignView";
 
 interface CreateEmailCampaignsPageOptions {
     scopeParts: string[];
@@ -31,6 +32,12 @@ export function createEmailCampaignsPage({ scopeParts, EmailCampaignContentBlock
                         <EmailCampaignsGrid scope={scope} EmailCampaignContentBlock={EmailCampaignContentBlock} />
                     </StackPage>
                     <StackPage name="statistics">{(selectedId) => <EmailCampaignStatistics id={selectedId} />}</StackPage>
+                    <StackPage name="view">
+                        {(selectedId) => (
+                            <EmailCampaignView id={selectedId} previewUrl={previewUrl} EmailCampaignContentBlock={EmailCampaignContentBlock} />
+                        )}
+                    </StackPage>
+
                     <StackPage
                         name="edit"
                         title={intl.formatMessage({ id: "cometBrevoModule.emailCampaigns.editEmailCampaign", defaultMessage: "Edit email campaign" })}

packages/admin/src/emailCampaigns/view/EmailCampaignView.gql.ts

@@ -0,0 +1,10 @@
+import { gql } from "@apollo/client";
+
+export const emailCampaignViewQuery = gql`
+    query EmailCampaignView($id: ID!) {
+        emailCampaign(id: $id) {
+            id
+            content
+        }
+    }
+`;

packages/admin/src/emailCampaigns/view/EmailCampaignView.tsx

@@ -0,0 +1,71 @@
+import { useQuery } from "@apollo/client";
+import { Loading, MainContent, Toolbar, ToolbarFillSpace, ToolbarItem, ToolbarTitleItem, useStackApi } from "@comet/admin";
+import { ArrowLeft } from "@comet/admin-icons";
+import { BlockInterface, IFrameBridgeProvider } from "@comet/blocks-admin";
+import { BlockPreview, EditPageLayout, useBlockPreview, useCmsBlockContext } from "@comet/cms-admin";
+import { IconButton } from "@mui/material";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import { useRouteMatch } from "react-router";
+
+import { emailCampaignViewQuery } from "./EmailCampaignView.gql";
+import { GQLEmailCampaignViewQuery, GQLEmailCampaignViewQueryVariables } from "./EmailCampaignView.gql.generated";
+
+interface EmailCampaignViewProps {
+    id: string;
+    EmailCampaignContentBlock: BlockInterface;
+    previewUrl: string;
+}
+
+export function EmailCampaignView({ id, EmailCampaignContentBlock, previewUrl }: EmailCampaignViewProps): React.ReactElement {
+    const stackApi = useStackApi();
+    const previewApi = useBlockPreview();
+    const blockContext = useCmsBlockContext();
+    const match = useRouteMatch();
+
+    const { data, error, loading } = useQuery<GQLEmailCampaignViewQuery, GQLEmailCampaignViewQueryVariables>(emailCampaignViewQuery, {
+        variables: { id },
+    });
+
+    if (error) throw error;
+
+    if (loading) {
+        return <Loading behavior="fillPageHeight" />;
+    }
+
+    if (!data) {
+        return <></>;
+    }
+
+    const previewContext = {
+        ...blockContext,
+        parentUrl: match.url,
+        showVisibleOnly: previewApi.showOnlyVisible,
+    };
+
+    const previewState = {
+        emailCampaignId: id,
+        content: EmailCampaignContentBlock.createPreviewState(EmailCampaignContentBlock.input2State(data.emailCampaign.content), previewContext),
+    };
+
+    return (
+        <EditPageLayout>
+            <Toolbar>
+                <ToolbarItem>
+                    <IconButton onClick={stackApi?.goBack}>
+                        <ArrowLeft />
+                    </IconButton>
+                </ToolbarItem>
+                <ToolbarTitleItem>
+                    <FormattedMessage id="cometBrevoModule.emailCampaigns.EmailCampaign" defaultMessage="Email Campaign" />
+                </ToolbarTitleItem>
+                <ToolbarFillSpace />
+            </Toolbar>
+            <MainContent disablePaddingBottom>
+                <IFrameBridgeProvider key={previewUrl}>
+                    <BlockPreview url={previewUrl} previewState={previewState} previewApi={previewApi} />
+                </IFrameBridgeProvider>
+            </MainContent>
+        </EditPageLayout>
+    );
+}