rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change compliance update modals

Browse Source 
- Merge new and edit modals design
- Create a send modal

Signed-off-by: Sacha Al Himdani <sacha@getprobo.com>
This commit is contained in:
Sacha Al Himdani
2026-03-12 14:23:24 +01:00
parent 5ac6511f63
commit 4fbb5acb70
9 changed files with 315 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/console/src/__generated__/core/NewComplianceUpdateDialogMutation.graphql.ts → apps/console/src/__generated__/core/ComplianceUpdateFormDialogCreateMutation.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<458f30b721ecd9df210621a8853008c3>>
* @generated SignedSource<<2cec7e8ca8209de4cb2d007ad8bfe9fa>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -15,11 +15,11 @@ export type CreateMailingListUpdateInput = {
mailingListId: string;
title: string;
};
export type NewComplianceUpdateDialogMutation$variables = {
export type ComplianceUpdateFormDialogCreateMutation$variables = {
connections: ReadonlyArray<string>;
input: CreateMailingListUpdateInput;
};
export type NewComplianceUpdateDialogMutation$data = {
export type ComplianceUpdateFormDialogCreateMutation$data = {
readonly createMailingListUpdate: {
readonly mailingListUpdate: {
readonly body: string;
@@ -31,9 +31,9 @@ export type NewComplianceUpdateDialogMutation$data = {
};
};
};
export type NewComplianceUpdateDialogMutation = {
response: NewComplianceUpdateDialogMutation$data;
variables: NewComplianceUpdateDialogMutation$variables;
export type ComplianceUpdateFormDialogCreateMutation = {
response: ComplianceUpdateFormDialogCreateMutation$data;
variables: ComplianceUpdateFormDialogCreateMutation$variables;
};
const node: ConcreteRequest = (function(){
@@ -115,7 +115,7 @@ return {
],
"kind": "Fragment",
"metadata": null,
"name": "NewComplianceUpdateDialogMutation",
"name": "ComplianceUpdateFormDialogCreateMutation",
"selections": [
{
"alias": null,
@@ -140,7 +140,7 @@ return {
(v0/*: any*/)
],
"kind": "Operation",
"name": "NewComplianceUpdateDialogMutation",
"name": "ComplianceUpdateFormDialogCreateMutation",
"selections": [
{
"alias": null,
@@ -178,16 +178,16 @@ return {
]
},
"params": {
"cacheID": "33fc392100d93803de3a189e75961a75",
"cacheID": "52d07d51ab21154cf26f8a932aba5e77",
"id": null,
"metadata": {},
"name": "NewComplianceUpdateDialogMutation",
"name": "ComplianceUpdateFormDialogCreateMutation",
"operationKind": "mutation",
"text": "mutation NewComplianceUpdateDialogMutation(\n $input: CreateMailingListUpdateInput!\n) {\n createMailingListUpdate(input: $input) {\n mailingListUpdate {\n id\n title\n body\n status\n createdAt\n updatedAt\n }\n }\n}\n"
"text": "mutation ComplianceUpdateFormDialogCreateMutation(\n $input: CreateMailingListUpdateInput!\n) {\n createMailingListUpdate(input: $input) {\n mailingListUpdate {\n id\n title\n body\n status\n createdAt\n updatedAt\n }\n }\n}\n"
}
};
})();
(node as any).hash = "bf02b571efaf38d4f4a8fde50b311832";
(node as any).hash = "6e8c7b014c850c90bcfb876d6e504f4d";
export default node;

24
apps/console/src/__generated__/core/EditComplianceUpdateDialogMutation.graphql.ts → apps/console/src/__generated__/core/ComplianceUpdateFormDialogUpdateMutation.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<622eccc63036573a8e38ffc8dd36e7d7>>
* @generated SignedSource<<160a29eaaba4b3db2c1b7aca34164dd7>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -15,10 +15,10 @@ export type UpdateMailingListUpdateInput = {
id: string;
title: string;
};
export type EditComplianceUpdateDialogMutation$variables = {
export type ComplianceUpdateFormDialogUpdateMutation$variables = {
input: UpdateMailingListUpdateInput;
};
export type EditComplianceUpdateDialogMutation$data = {
export type ComplianceUpdateFormDialogUpdateMutation$data = {
readonly updateMailingListUpdate: {
readonly mailingListUpdate: {
readonly body: string;
@@ -29,9 +29,9 @@ export type EditComplianceUpdateDialogMutation$data = {
};
};
};
export type EditComplianceUpdateDialogMutation = {
response: EditComplianceUpdateDialogMutation$data;
variables: EditComplianceUpdateDialogMutation$variables;
export type ComplianceUpdateFormDialogUpdateMutation = {
response: ComplianceUpdateFormDialogUpdateMutation$data;
variables: ComplianceUpdateFormDialogUpdateMutation$variables;
};
const node: ConcreteRequest = (function(){
@@ -112,7 +112,7 @@ return {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "EditComplianceUpdateDialogMutation",
"name": "ComplianceUpdateFormDialogUpdateMutation",
"selections": (v1/*: any*/),
"type": "Mutation",
"abstractKey": null
@@ -121,20 +121,20 @@ return {
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "EditComplianceUpdateDialogMutation",
"name": "ComplianceUpdateFormDialogUpdateMutation",
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "49b4c9f194a0bf6ebe01408ae6387f2e",
"cacheID": "49b5feb2a9a2e157568ad2431e032425",
"id": null,
"metadata": {},
"name": "EditComplianceUpdateDialogMutation",
"name": "ComplianceUpdateFormDialogUpdateMutation",
"operationKind": "mutation",
"text": "mutation EditComplianceUpdateDialogMutation(\n $input: UpdateMailingListUpdateInput!\n) {\n updateMailingListUpdate(input: $input) {\n mailingListUpdate {\n id\n title\n body\n status\n updatedAt\n }\n }\n}\n"
"text": "mutation ComplianceUpdateFormDialogUpdateMutation(\n $input: UpdateMailingListUpdateInput!\n) {\n updateMailingListUpdate(input: $input) {\n mailingListUpdate {\n id\n title\n body\n status\n updatedAt\n }\n }\n}\n"
}
};
})();
(node as any).hash = "8b2246ab3bddba658cc488610afcd80f";
(node as any).hash = "3737c127b41a55df71e09d64aaa3da9e";
export default node;

24
apps/console/src/__generated__/core/CompliancePageUpdatesListSendMutation.graphql.ts → apps/console/src/__generated__/core/SendUpdateDialogMutation.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<f5323e8e7bd73882c9169eb01318a21c>>
* @generated SignedSource<<7eced414e0638e806b52e86afcb6cca4>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -13,10 +13,10 @@ export type MailingListUpdateStatus = "DRAFT" | "ENQUEUED" | "PROCESSING" | "SEN
export type SendMailingListUpdateInput = {
id: string;
};
export type CompliancePageUpdatesListSendMutation$variables = {
export type SendUpdateDialogMutation$variables = {
input: SendMailingListUpdateInput;
};
export type CompliancePageUpdatesListSendMutation$data = {
export type SendUpdateDialogMutation$data = {
readonly sendMailingListUpdate: {
readonly mailingListUpdate: {
readonly body: string;
@@ -27,9 +27,9 @@ export type CompliancePageUpdatesListSendMutation$data = {
};
};
};
export type CompliancePageUpdatesListSendMutation = {
response: CompliancePageUpdatesListSendMutation$data;
variables: CompliancePageUpdatesListSendMutation$variables;
export type SendUpdateDialogMutation = {
response: SendUpdateDialogMutation$data;
variables: SendUpdateDialogMutation$variables;
};
const node: ConcreteRequest = (function(){
@@ -110,7 +110,7 @@ return {
"argumentDefinitions": (v0/*: any*/),
"kind": "Fragment",
"metadata": null,
"name": "CompliancePageUpdatesListSendMutation",
"name": "SendUpdateDialogMutation",
"selections": (v1/*: any*/),
"type": "Mutation",
"abstractKey": null
@@ -119,20 +119,20 @@ return {
"operation": {
"argumentDefinitions": (v0/*: any*/),
"kind": "Operation",
"name": "CompliancePageUpdatesListSendMutation",
"name": "SendUpdateDialogMutation",
"selections": (v1/*: any*/)
},
"params": {
"cacheID": "23fee99a4999d2c9cbeecd6fa9863b67",
"cacheID": "714c7cc9cdb06cb384690e17cdaa9958",
"id": null,
"metadata": {},
"name": "CompliancePageUpdatesListSendMutation",
"name": "SendUpdateDialogMutation",
"operationKind": "mutation",
"text": "mutation CompliancePageUpdatesListSendMutation(\n $input: SendMailingListUpdateInput!\n) {\n sendMailingListUpdate(input: $input) {\n mailingListUpdate {\n id\n title\n body\n status\n updatedAt\n }\n }\n}\n"
"text": "mutation SendUpdateDialogMutation(\n $input: SendMailingListUpdateInput!\n) {\n sendMailingListUpdate(input: $input) {\n mailingListUpdate {\n id\n title\n body\n status\n updatedAt\n }\n }\n}\n"
}
};
})();
(node as any).hash = "37c68b46d761280e2ff16f5bff08b249";
(node as any).hash = "9ec6f363395b934616b97fe50b83d328";
export default node;

7
apps/console/src/pages/organizations/compliance-page/mailing-list/CompliancePageMailingListPage.tsx
View File

@@ -10,9 +10,8 @@ import { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
import { CompliancePageMailingList } from "./_components/CompliancePageMailingList";
import { CompliancePageUpdatesList, type UpdateNode } from "./_components/CompliancePageUpdatesList";
import { EditComplianceUpdateDialog } from "./_components/EditComplianceUpdateDialog";
import { ComplianceUpdateFormDialog } from "./_components/ComplianceUpdateFormDialog";
import { NewCompliancePageSubscriberDialog } from "./_components/NewCompliancePageSubscriberDialog";
import { NewComplianceUpdateDialog } from "./_components/NewComplianceUpdateDialog";
export const compliancePageMailingListPageQuery = graphql`
query CompliancePageMailingListPageQuery($organizationId: ID!) {
@@ -174,14 +173,14 @@ export function CompliancePageMailingListPage(props: {
</div>
{mailingListId && updatesConnectionId && (
<NewComplianceUpdateDialog
<ComplianceUpdateFormDialog
ref={newUpdateDialogRef}
mailingListId={mailingListId}
connectionId={updatesConnectionId}
/>
)}
<EditComplianceUpdateDialog
<ComplianceUpdateFormDialog
ref={editUpdateDialogRef}
update={selectedUpdate}
/>

62
apps/console/src/pages/organizations/compliance-page/mailing-list/_components/CompliancePageUpdatesList.tsx
View File

@@ -1,14 +1,16 @@
import { useTranslate } from "@probo/i18n";
import { Badge, Button, IconChevronDown, IconPencil, IconSend, IconTrashCan, Spinner, Table, Tbody, Td, Th, Thead, Tr, useConfirm } from "@probo/ui";
import { Badge, Button, IconChevronDown, IconPageTextLine, IconPencil, IconSend, IconTrashCan, Spinner, Table, Tbody, Td, Th, Thead, Tr, useDialogRef } from "@probo/ui";
import { useState } from "react";
import { usePaginationFragment } from "react-relay";
import { graphql } from "relay-runtime";
import type { CompliancePageUpdatesListDeleteMutation } from "#/__generated__/core/CompliancePageUpdatesListDeleteMutation.graphql";
import type { CompliancePageUpdatesListFragment$data, CompliancePageUpdatesListFragment$key } from "#/__generated__/core/CompliancePageUpdatesListFragment.graphql";
import type { CompliancePageUpdatesListQuery } from "#/__generated__/core/CompliancePageUpdatesListQuery.graphql";
import type { CompliancePageUpdatesListSendMutation } from "#/__generated__/core/CompliancePageUpdatesListSendMutation.graphql";
import { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
import { SendUpdateDialog } from "./SendUpdateDialog";
const deleteMutation = graphql`
mutation CompliancePageUpdatesListDeleteMutation(
$input: DeleteMailingListUpdateInput!
@@ -20,20 +22,6 @@ const deleteMutation = graphql`
}
`;
const sendMutation = graphql`
mutation CompliancePageUpdatesListSendMutation($input: SendMailingListUpdateInput!) {
sendMailingListUpdate(input: $input) {
mailingListUpdate {
id
title
body
status
updatedAt
}
}
}
`;
const fragment = graphql`
fragment CompliancePageUpdatesListFragment on MailingList
@argumentDefinitions(
@@ -72,7 +60,9 @@ export function CompliancePageUpdatesList(props: {
}) {
const { fragmentRef, onEdit } = props;
const { __ } = useTranslate();
const confirm = useConfirm();
const sendDialogRef = useDialogRef();
const [updateToSend, setUpdateToSend] = useState<UpdateNode | null>(null);
const { data, hasNext, loadNext, isLoadingNext } = usePaginationFragment<
CompliancePageUpdatesListQuery,
@@ -87,12 +77,6 @@ export function CompliancePageUpdatesList(props: {
errorMessage: __("Failed to delete update"),
});
const [sendUpdate, isSending]
= useMutationWithToasts<CompliancePageUpdatesListSendMutation>(sendMutation, {
successMessage: __("Update enqueued for delivery"),
errorMessage: __("Failed to enqueue update for delivery"),
});
const handleDelete = (id: string) => {
void deleteUpdate({
variables: {
@@ -103,26 +87,13 @@ export function CompliancePageUpdatesList(props: {
};
const handleSend = (node: UpdateNode) => {
confirm(
() =>
sendUpdate({
variables: {
input: {
id: node.id,
},
},
}),
{
title: __("Send this update to all subscribers?"),
message: `"${node.title}" — ${node.body.length > 120 ? node.body.slice(0, 120) + "…" : node.body}`,
label: __("Send"),
variant: "primary",
},
);
setUpdateToSend(node);
sendDialogRef.current?.open();
};
return (
<>
<SendUpdateDialog ref={sendDialogRef} update={updateToSend} />
{connection.edges.length === 0
? (
<Table>
@@ -159,26 +130,25 @@ export function CompliancePageUpdatesList(props: {
{new Date(node.createdAt).toLocaleDateString()}
</Td>
<Td className="w-auto">
<div className="flex gap-1 justify-end">
<div className="flex gap-2 justify-end">
{node.status === "DRAFT" && (
<Button
variant="secondary"
icon={IconSend}
disabled={isSending}
onClick={() => handleSend(node)}
className="bg-green-600 text-white hover:bg-green-700 active:bg-green-800 shadow-none"
aria-label={__("Send")}
>
{__("Send")}
</Button>
)}
<Button
variant="tertiary"
icon={IconPencil}
variant="secondary"
icon={node.status === "DRAFT" ? IconPencil : IconPageTextLine}
onClick={() => onEdit(node)}
aria-label={__("Edit update")}
aria-label={node.status === "DRAFT" ? __("Edit update") : __("View update")}
/>
<Button
variant="tertiary"
variant="danger"
icon={IconTrashCan}
disabled={isDeleting}
onClick={() => handleDelete(node.id)}

180
apps/console/src/pages/organizations/compliance-page/mailing-list/_components/ComplianceUpdateFormDialog.tsx Normal file
View File

@@ -0,0 +1,180 @@
import { useTranslate } from "@probo/i18n";
import { Button, Dialog, DialogContent, DialogFooter, type DialogRef, Field, IconCircleInfo, Spinner, Textarea } from "@probo/ui";
import { useEffect } from "react";
import { graphql } from "relay-runtime";
import { z } from "zod";
import type { ComplianceUpdateFormDialogCreateMutation } from "#/__generated__/core/ComplianceUpdateFormDialogCreateMutation.graphql";
import type { ComplianceUpdateFormDialogUpdateMutation } from "#/__generated__/core/ComplianceUpdateFormDialogUpdateMutation.graphql";
import { useFormWithSchema } from "#/hooks/useFormWithSchema";
import { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
import type { UpdateNode } from "./CompliancePageUpdatesList";
const createMutation = graphql`
mutation ComplianceUpdateFormDialogCreateMutation(
$input: CreateMailingListUpdateInput!
$connections: [ID!]!
) {
createMailingListUpdate(input: $input) {
mailingListUpdate
@prependNode(connections: $connections, edgeTypeName: "MailingListUpdateEdge") {
id
title
body
status
createdAt
updatedAt
}
}
}
`;
const updateMutation = graphql`
mutation ComplianceUpdateFormDialogUpdateMutation($input: UpdateMailingListUpdateInput!) {
updateMailingListUpdate(input: $input) {
mailingListUpdate {
id
title
body
status
updatedAt
}
}
}
`;
type CreateProps = {
ref: DialogRef;
mailingListId: string;
connectionId: string;
onCreated?: () => void;
update?: never;
};
type EditProps = {
ref: DialogRef;
update: UpdateNode | null;
mailingListId?: never;
connectionId?: never;
onCreated?: never;
};
type Props = CreateProps | EditProps;
export function ComplianceUpdateFormDialog(props: Props) {
const { ref, update, mailingListId, connectionId, onCreated } = props;
const { __ } = useTranslate();
const isEditMode = update !== undefined;
const isSent = isEditMode && update?.status !== "DRAFT";
const schemaWithMessages = z.object({
title: z.string().trim().min(1, __("Title is required")),
body: z.string().trim().min(1, __("Body is required")),
});
const form = useFormWithSchema(schemaWithMessages, {
defaultValues: { title: "", body: "" },
});
useEffect(() => {
if (update) {
form.reset({ title: update.title, body: update.body });
}
}, [update, form]);
const [createUpdate, isCreating] = useMutationWithToasts<ComplianceUpdateFormDialogCreateMutation>(
createMutation,
{
successMessage: __("Update created successfully"),
errorMessage: __("Failed to create update"),
},
);
const [saveUpdate, isSaving] = useMutationWithToasts<ComplianceUpdateFormDialogUpdateMutation>(
updateMutation,
{
successMessage: __("Update saved successfully"),
errorMessage: __("Failed to save update"),
},
);
const handleSubmit = async (data: z.infer<typeof schemaWithMessages>) => {
if (isEditMode) {
if (!update) return;
await saveUpdate({
variables: {
input: {
id: update.id,
title: data.title,
body: data.body,
},
},
onCompleted: (_, errors) => {
if (!errors?.length) {
ref.current?.close();
}
},
});
} else {
await createUpdate({
variables: {
input: {
mailingListId: mailingListId,
title: data.title,
body: data.body,
},
connections: [connectionId],
},
onCompleted: (_, errors) => {
if (!errors?.length) {
form.reset();
ref.current?.close();
onCreated?.();
}
},
});
}
};
return (
<Dialog ref={ref} title={isSent ? __("View Update") : isEditMode ? __("Edit Update") : __("Add Update")}>
<form onSubmit={e => void form.handleSubmit(handleSubmit)(e)}>
<DialogContent className="px-6 pt-4 pb-2 space-y-4">
<div className="flex gap-2.5 rounded-lg bg-surface-secondary p-3 text-sm text-txt-secondary">
<IconCircleInfo size={16} className="mt-0.5 shrink-0 text-txt-tertiary" />
{__("Do not include confidential or sensitive information in this update. Any content that requires protection should be placed behind your NDA-gated documents instead.")}
</div>
<Field
label={__("Title")}
required
disabled={isSent}
error={form.formState.errors.title?.message}
{...form.register("title")}
/>
<Field
label={__("Body")}
required
error={form.formState.errors.body?.message}
>
<Textarea rows={12} disabled={isSent} {...form.register("body")} />
</Field>
{isSent && (
<p className="text-sm text-txt-tertiary">
{__("This update has been sent and can no longer be edited.")}
</p>
)}
</DialogContent>
<DialogFooter>
{!isSent && (
<Button type="submit" disabled={isCreating || isSaving}>
{(isCreating || isSaving) && <Spinner />}
{isEditMode ? __("Save") : __("Create")}
</Button>
)}
</DialogFooter>
</form>
</Dialog>
);
}

118
apps/console/src/pages/organizations/compliance-page/mailing-list/_components/EditComplianceUpdateDialog.tsx
View File

@@ -1,118 +0,0 @@
import { useTranslate } from "@probo/i18n";
import { Button, Dialog, DialogContent, DialogFooter, type DialogRef, Field, IconCircleInfo, Spinner, Textarea } from "@probo/ui";
import { useEffect } from "react";
import { graphql } from "relay-runtime";
import { z } from "zod";
import type { EditComplianceUpdateDialogMutation } from "#/__generated__/core/EditComplianceUpdateDialogMutation.graphql";
import { useFormWithSchema } from "#/hooks/useFormWithSchema";
import { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
import type { UpdateNode } from "./CompliancePageUpdatesList";
const updateMutation = graphql`
mutation EditComplianceUpdateDialogMutation($input: UpdateMailingListUpdateInput!) {
updateMailingListUpdate(input: $input) {
mailingListUpdate {
id
title
body
status
updatedAt
}
}
}
`;
export function EditComplianceUpdateDialog(props: {
update: UpdateNode | null;
ref: DialogRef;
}) {
const { update, ref } = props;
const { __ } = useTranslate();
const isSent = update?.status !== "DRAFT";
const schema = z.object({
title: z.string().trim().min(1, __("Title is required")),
body: z.string().trim().min(1, __("Body is required")),
});
const form = useFormWithSchema(schema, {
defaultValues: { title: "", body: "" },
});
useEffect(() => {
if (update) {
form.reset({ title: update.title, body: update.body });
}
}, [update, form]);
const [saveUpdate, isSaving] = useMutationWithToasts<EditComplianceUpdateDialogMutation>(
updateMutation,
{
successMessage: __("Update saved successfully"),
errorMessage: __("Failed to save update"),
},
);
const handleSubmit = async (data: { title: string; body: string }) => {
if (!update) return;
await saveUpdate({
variables: {
input: {
id: update.id,
title: data.title.trim(),
body: data.body.trim(),
},
},
onCompleted: (_, errors) => {
if (!errors?.length) {
ref.current?.close();
}
},
});
};
return (
<Dialog ref={ref} title={__("Edit Update")}>
<form onSubmit={e => void form.handleSubmit(handleSubmit)(e)}>
<DialogContent padded className="space-y-6">
<div className="flex gap-2.5 rounded-lg bg-surface-secondary p-3 text-sm text-txt-secondary">
<IconCircleInfo size={16} className="mt-0.5 shrink-0 text-txt-tertiary" />
<p>
{__("Do not include confidential or sensitive information in this update. Any content that requires protection should be placed behind your NDA-gated documents instead.")}
</p>
</div>
<Field
label={__("Title")}
required
disabled={isSent}
error={form.formState.errors.title?.message}
{...form.register("title")}
/>
<Field
label={__("Body")}
required
error={form.formState.errors.body?.message}
>
<Textarea rows={6} disabled={isSent} {...form.register("body")} />
</Field>
{isSent && (
<p className="text-sm text-txt-tertiary">
{__("This update has been sent and can no longer be edited.")}
</p>
)}
</DialogContent>
<DialogFooter>
{!isSent && (
<Button type="submit" disabled={isSaving}>
{isSaving && <Spinner />}
{__("Save")}
</Button>
)}
</DialogFooter>
</form>
</Dialog>
);
}

102
apps/console/src/pages/organizations/compliance-page/mailing-list/_components/NewComplianceUpdateDialog.tsx
View File

@@ -1,102 +0,0 @@
import { useTranslate } from "@probo/i18n";
import { Button, Dialog, DialogContent, DialogFooter, type DialogRef, Field, Spinner, Textarea } from "@probo/ui";
import { graphql } from "relay-runtime";
import { z } from "zod";
import type { NewComplianceUpdateDialogMutation } from "#/__generated__/core/NewComplianceUpdateDialogMutation.graphql";
import { useFormWithSchema } from "#/hooks/useFormWithSchema";
import { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
const createMutation = graphql`
mutation NewComplianceUpdateDialogMutation(
$input: CreateMailingListUpdateInput!
$connections: [ID!]!
) {
createMailingListUpdate(input: $input) {
mailingListUpdate
@prependNode(connections: $connections, edgeTypeName: "MailingListUpdateEdge") {
id
title
body
status
createdAt
updatedAt
}
}
}
`;
export function NewComplianceUpdateDialog(props: {
mailingListId: string;
connectionId: string;
ref: DialogRef;
onCreated?: () => void;
}) {
const { mailingListId, connectionId, ref, onCreated } = props;
const { __ } = useTranslate();
const schema = z.object({
title: z.string().trim().min(1, __("Title is required")),
body: z.string().trim().min(1, __("Body is required")),
});
const form = useFormWithSchema(schema, {
defaultValues: { title: "", body: "" },
});
const [createUpdate, isCreating] = useMutationWithToasts<NewComplianceUpdateDialogMutation>(
createMutation,
{
successMessage: __("Update created successfully"),
errorMessage: __("Failed to create update"),
},
);
const handleSubmit = async (data: { title: string; body: string }) => {
await createUpdate({
variables: {
input: {
mailingListId,
title: data.title.trim(),
body: data.body.trim(),
},
connections: [connectionId],
},
onCompleted: (_, errors) => {
if (!errors?.length) {
form.reset();
ref.current?.close();
onCreated?.();
}
},
});
};
return (
<Dialog ref={ref} title={__("Add Update")}>
<form onSubmit={e => void form.handleSubmit(handleSubmit)(e)}>
<DialogContent padded className="space-y-6">
<Field
label={__("Title")}
required
error={form.formState.errors.title?.message}
{...form.register("title")}
/>
<Field
label={__("Body")}
required
error={form.formState.errors.body?.message}
>
<Textarea rows={6} {...form.register("body")} />
</Field>
</DialogContent>
<DialogFooter>
<Button type="submit" disabled={isCreating}>
{isCreating && <Spinner />}
{__("Create")}
</Button>
</DialogFooter>
</form>
</Dialog>
);
}

80
apps/console/src/pages/organizations/compliance-page/mailing-list/_components/SendUpdateDialog.tsx Normal file
View File

@@ -0,0 +1,80 @@
import { useTranslate } from "@probo/i18n";
import { Button, Dialog, DialogContent, DialogFooter, type DialogRef, IconSend, Spinner } from "@probo/ui";
import { graphql } from "relay-runtime";
import type { SendUpdateDialogMutation } from "#/__generated__/core/SendUpdateDialogMutation.graphql";
import { useMutationWithToasts } from "#/hooks/useMutationWithToasts";
import type { UpdateNode } from "./CompliancePageUpdatesList";
const sendMutation = graphql`
mutation SendUpdateDialogMutation($input: SendMailingListUpdateInput!) {
sendMailingListUpdate(input: $input) {
mailingListUpdate {
id
title
body
status
updatedAt
}
}
}
`;
type Props = {
ref: DialogRef;
update: UpdateNode | null;
onSent?: () => void;
};
export function SendUpdateDialog({ ref, update, onSent }: Props) {
const { __ } = useTranslate();
const [sendUpdate, isSending] = useMutationWithToasts<SendUpdateDialogMutation>(sendMutation, {
successMessage: __("Update enqueued for delivery"),
errorMessage: __("Failed to enqueue update for delivery"),
});
const handleSend = async () => {
if (!update) return;
await sendUpdate({
variables: { input: { id: update.id } },
onCompleted: (_, errors) => {
if (!errors?.length) {
ref.current?.close();
onSent?.();
}
},
});
};
return (
<Dialog ref={ref} title={__("Send Update to Subscribers")}>
<DialogContent className="px-6 pt-5 pb-2 space-y-4">
<p className="text-sm text-txt-secondary">
{__("This update will be sent to all current subscribers of this mailing list. This action cannot be undone.")}
</p>
{update && (
<div className="rounded-lg border border-border-low bg-surface-secondary overflow-hidden">
<div className="px-4 py-3 border-b border-border-low">
<p className="text-sm font-medium text-txt-primary">{update.title}</p>
</div>
<div className="px-4 py-3">
<p className="text-sm text-txt-secondary whitespace-pre-wrap">{update.body}</p>
</div>
</div>
)}
</DialogContent>
<DialogFooter>
<Button
icon={IconSend}
disabled={isSending}
onClick={() => void handleSend()}
>
{isSending && <Spinner />}
{__("Send")}
</Button>
</DialogFooter>
</Dialog>
);
}