📧 Improve SMTP event section (#548)

* Make channels section expandable based on override setting

* Revert "Make channels section expandable based on override setting"

This reverts commit e107c5e990b4110156043ed494fb0054bd936654.

* Improve copy in the descriptions

* Handle partial updates i n events

* Add status  component

* Fix typos and types

* Improve SMTP events section

* Add changeset

* Implement event sections as tables with array form

* Update the changelog

* Remove no longer used component

* Add empty option for template choice

* Remove no longer used component

* Update the test

.changeset/young-tigers-provide.md

@@ -0,0 +1,5 @@
+---
+"saleor-app-emails-and-messages": patch
+---
+
+Events section UI has been updated. All events are displayed now as single table.

apps/emails-and-messages/src/components/table.tsx

@@ -0,0 +1,12 @@
+import { Box, BoxProps } from "@saleor/macaw-ui/next";
+
+export const Table = {
+  Container: (props: BoxProps) => <Box __textAlign={"left"} width="100%" {...props} as="table" />,
+  Header: (props: BoxProps) => <Box {...props} as="thead" />,
+  Row: (props: BoxProps) => <Box {...props} as="tr" />,
+  HeaderCell: (props: BoxProps) => (
+    <Box fontWeight={"captionSmall"} fontSize={"captionSmall"} {...props} as="th" />
+  ),
+  Body: (props: BoxProps) => <Box {...props} as="tbody" />,
+  Cell: (props: BoxProps) => <Box fontSize="bodyMedium" {...props} as="td" />,
+};

apps/emails-and-messages/src/modules/app-configuration/ui/configuration-name-description-text.tsx

@@ -2,7 +2,8 @@ import { Text } from "@saleor/macaw-ui/next";
 
 export const ConfigurationNameDescriptionText = () => (
   <Text as="p">
-    The name for your configuration. You can have more than one if you want to use different settings for each channel.
+    The name for your configuration. You can have more than one if you want to use different
+    settings for each channel.
     <br />
     For example - <code>production</code> and <code>development</code>.
   </Text>

apps/emails-and-messages/src/modules/event-handlers/message-event-types.ts

@@ -22,7 +22,7 @@ export const messageEventTypesLabels: Record<MessageEventTypes, string> = {
   ORDER_FULLY_PAID: "Order fully paid",
   INVOICE_SENT: "Invoice sent",
   ACCOUNT_CONFIRMATION: "Customer account confirmation",
-  ACCOUNT_PASSWORD_RESET: "Customer account password reset",
+  ACCOUNT_PASSWORD_RESET: "Customer account password reset request",
   ACCOUNT_CHANGE_EMAIL_REQUEST: "Customer account change email request",
   ACCOUNT_CHANGE_EMAIL_CONFIRM: "Customer account change email confirmation",
   ACCOUNT_DELETE: "Customer account delete request",

apps/emails-and-messages/src/modules/sendgrid/configuration/sendgrid-config-input-schema.ts

@@ -86,3 +86,10 @@ export const sendgridUpdateEventSchema = sendgridConfigurationEventSchema.merge(
 );
 
 export type SendgridUpdateEvent = z.infer<typeof sendgridUpdateEventSchema>;
+
+export const sendgridUpdateEventArraySchema = z.object({
+  configurationId: z.string(),
+  events: z.array(sendgridConfigurationEventSchema),
+});
+
+export type SendgridUpdateEventArray = z.infer<typeof sendgridUpdateEventArraySchema>;

apps/emails-and-messages/src/modules/sendgrid/configuration/sendgrid-configuration.router.ts

@@ -6,7 +6,7 @@ import {
   sendgridGetEventConfigurationInputSchema,
   sendgridUpdateApiConnectionSchema,
   sendgridUpdateBasicInformationSchema,
-  sendgridUpdateEventConfigurationInputSchema,
+  sendgridUpdateEventArraySchema,
   sendgridUpdateEventSchema,
   sendgridUpdateSenderSchema,
 } from "./sendgrid-config-input-schema";
@@ -147,23 +147,6 @@ export const sendgridConfigurationRouter = router({
         throwTrpcErrorFromConfigurationServiceError(e);
       }
     }),
-  updateEventConfiguration: protectedWithConfigurationService
-    .meta({ requiredClientPermissions: ["MANAGE_APPS"] })
-    .input(sendgridUpdateEventConfigurationInputSchema)
-    .mutation(async ({ ctx, input }) => {
-      const logger = createLogger({ saleorApiUrl: ctx.saleorApiUrl });
-
-      logger.debug(input, "sendgridConfigurationRouter.updateEventConfiguration called");
-
-      try {
-        return await ctx.sendgridConfigurationService.updateEventConfiguration({
-          configurationId: input.configurationId,
-          eventConfiguration: input,
-        });
-      } catch (e) {
-        throwTrpcErrorFromConfigurationServiceError(e);
-      }
-    }),
   updateBasicInformation: protectedWithConfigurationService
     .meta({ requiredClientPermissions: ["MANAGE_APPS"] })
     .input(sendgridUpdateBasicInformationSchema)
@@ -260,13 +243,41 @@ export const sendgridConfigurationRouter = router({
 
       logger.debug(input, "sendgridConfigurationRouter.updateEvent called");
 
+      const { id: configurationId, eventType, ...eventConfiguration } = input;
+
       try {
         return await ctx.sendgridConfigurationService.updateEventConfiguration({
-          eventConfiguration: input,
+          configurationId,
-          configurationId: input.id,
+          eventType,
+          eventConfiguration,
         });
       } catch (e) {
         throwTrpcErrorFromConfigurationServiceError(e);
       }
     }),
+
+  updateEventArray: protectedWithConfigurationService
+    .meta({ requiredClientPermissions: ["MANAGE_APPS"] })
+    .input(sendgridUpdateEventArraySchema)
+    .mutation(async ({ ctx, input }) => {
+      const logger = createLogger({ saleorApiUrl: ctx.saleorApiUrl });
+
+      logger.debug(input, "sendgridConfigurationRouter.updateEventArray called");
+
+      return await Promise.all(
+        input.events.map(async (event) => {
+          const { eventType, ...eventConfiguration } = event;
+
+          try {
+            return await ctx.sendgridConfigurationService.updateEventConfiguration({
+              configurationId: input.configurationId,
+              eventType,
+              eventConfiguration,
+            });
+          } catch (e) {
+            throwTrpcErrorFromConfigurationServiceError(e);
+          }
+        })
+      );
+    }),
 });

apps/emails-and-messages/src/modules/sendgrid/configuration/sendgrid-configuration.service.test.ts

@@ -512,6 +512,7 @@ describe("SendgridConfigurationService", function () {
 
       await service.updateEventConfiguration({
         configurationId: validConfig.configurations[0].id,
+        eventType: validConfig.configurations[0].events[0].eventType,
         eventConfiguration: {
           ...validConfig.configurations[0].events[0],
           template: "42",
@@ -544,6 +545,7 @@ describe("SendgridConfigurationService", function () {
       await expect(async () =>
         service.updateEventConfiguration({
           configurationId: "this-id-does-not-exist",
+          eventType: validConfig.configurations[0].events[0].eventType,
           eventConfiguration: {
             ...validConfig.configurations[0].events[0],
             template: "42",

apps/emails-and-messages/src/modules/sendgrid/configuration/sendgrid-configuration.service.ts

@@ -234,19 +234,19 @@ export class SendgridConfigurationService {
    */
   async updateEventConfiguration({
     configurationId,
+    eventType,
     eventConfiguration,
   }: {
     configurationId: string;
-    eventConfiguration: SendgridEventConfiguration;
+    eventType: SendgridEventConfiguration["eventType"];
+    eventConfiguration: Partial<Omit<SendgridEventConfiguration, "eventType">>;
   }) {
     logger.debug("Update event configuration");
     const configuration = await this.getConfiguration({
       id: configurationId,
     });
 
-    const eventIndex = configuration.events.findIndex(
+    const eventIndex = configuration.events.findIndex((e) => e.eventType === eventType);
-      (e) => e.eventType === eventConfiguration.eventType
-    );
 
     if (eventIndex < 0) {
       logger.warn("Event configuration not found, throwing an error");
@@ -256,9 +256,14 @@ export class SendgridConfigurationService {
       );
     }
 
-    configuration.events[eventIndex] = eventConfiguration;
+    const updatedEventConfiguration = {
+      ...configuration.events[eventIndex],
+      ...eventConfiguration,
+    };
+
+    configuration.events[eventIndex] = updatedEventConfiguration;
 
     await this.updateConfiguration(configuration);
-    return configuration;
+    return updatedEventConfiguration;
   }
 }

apps/emails-and-messages/src/modules/sendgrid/ui/sendgrid-events-section.tsx

@@ -8,8 +8,8 @@ import { defaultPadding } from "../../../components/ui-defaults";
 import { useDashboardNotification } from "@saleor/apps-shared";
 import { trpcClient } from "../../trpc/trpc-client";
 import {
-  SendgridUpdateEvent,
+  SendgridUpdateEventArray,
-  sendgridUpdateEventSchema,
+  sendgridUpdateEventArraySchema,
 } from "../configuration/sendgrid-config-input-schema";
 import { useForm } from "react-hook-form";
 import { BoxFooter } from "../../../components/box-footer";
@@ -18,91 +18,57 @@ import { useQuery } from "@tanstack/react-query";
 import { fetchTemplates } from "../sendgrid-api";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { setBackendErrors } from "../../../lib/set-backend-errors";
-import { Combobox } from "@saleor/react-hook-form-macaw";
+import { Select } from "@saleor/react-hook-form-macaw";
 import { TextLink } from "@saleor/apps-ui";
-
+import { messageEventTypesLabels } from "../../event-handlers/message-event-types";
-interface EventBoxProps {
+import { Table } from "../../../components/table";
-  configuration: SendgridConfiguration;
-  event: SendgridEventConfiguration;
-}
-
-const EventBox = ({ event, configuration }: EventBoxProps) => {
-  const { notifySuccess, notifyError } = useDashboardNotification();
-
-  const { data: templatesChoices } = useQuery({
-    queryKey: ["sendgridTemplates"],
-    queryFn: fetchTemplates({ apiKey: configuration.apiKey }),
-    enabled: !!configuration.apiKey?.length,
-  });
-
-  const { handleSubmit, control, setError, register } = useForm<SendgridUpdateEvent>({
-    defaultValues: {
-      id: configuration.id,
-      ...event,
-    },
-    resolver: zodResolver(sendgridUpdateEventSchema),
-  });
-
-  const trpcContext = trpcClient.useContext();
-  const { mutate } = trpcClient.sendgridConfiguration.updateEvent.useMutation({
-    onSuccess: async () => {
-      notifySuccess("Configuration saved");
-      trpcContext.sendgridConfiguration.invalidate();
-    },
-    onError(error) {
-      setBackendErrors<SendgridUpdateEvent>({ error, setError, notifyError });
-    },
-  });
-
-  return (
-    <form
-      onSubmit={handleSubmit((data, event) => {
-        mutate({
-          ...data,
-        });
-      })}
-    >
-      <BoxWithBorder>
-        <Box padding={defaultPadding} display="flex" flexDirection="column" gap={defaultPadding}>
-          <Text variant="heading">{event.eventType}</Text>
-          {templatesChoices?.length ? (
-            <Combobox
-              name="template"
-              control={control}
-              label="Template"
-              options={templatesChoices.map((sender) => ({
-                label: sender.label,
-                value: sender.value,
-              }))}
-            />
-          ) : (
-            <Combobox name="template" control={control} label="Template" options={[]} />
-          )}
-
-          <label>
-            <input type="checkbox" placeholder="Enabled" {...register("active")} />
-            <Text paddingLeft={defaultPadding}>Active</Text>
-          </label>
-        </Box>
-        <BoxFooter>
-          <Button type="submit">Save event</Button>
-        </BoxFooter>
-      </BoxWithBorder>
-    </form>
-  );
-};
 
 interface SendgridEventsSectionProps {
   configuration: SendgridConfiguration;
 }
 
 export const SendgridEventsSection = ({ configuration }: SendgridEventsSectionProps) => {
+  const { notifySuccess, notifyError } = useDashboardNotification();
+
+  // Sort events by displayed label
+  const eventsSorted = configuration.events.sort((a, b) =>
+    messageEventTypesLabels[a.eventType].localeCompare(messageEventTypesLabels[b.eventType])
+  );
+
+  const { control, register, handleSubmit, setError } = useForm<SendgridUpdateEventArray>({
+    defaultValues: {
+      configurationId: configuration.id,
+      events: eventsSorted,
+    },
+    resolver: zodResolver(sendgridUpdateEventArraySchema),
+  });
+
+  const trpcContext = trpcClient.useContext();
+  const { mutate } = trpcClient.sendgridConfiguration.updateEventArray.useMutation({
+    onSuccess: async () => {
+      notifySuccess("Configuration saved");
+      trpcContext.sendgridConfiguration.invalidate();
+    },
+    onError(error) {
+      setBackendErrors<SendgridUpdateEventArray>({ error, setError, notifyError });
+    },
+  });
+
+  const { data: sendgridTemplates } = useQuery({
+    queryKey: ["sendgridTemplates"],
+    queryFn: fetchTemplates({ apiKey: configuration.apiKey }),
+    enabled: !!configuration.apiKey?.length,
+  });
+
+  const templateChoices = [{ value: "", label: "----" }, ...(sendgridTemplates || [])];
+
   return (
     <SectionWithDescription
       title="Events"
       description={
         <Text as="p">
-          Choose which Saleor events should send emails via Sendgrid. You can create and modify your templates in the
+          Choose which Saleor events should send emails via Sendgrid. You can create and modify your
+          templates in the
           <TextLink href="https://mc.sendgrid.com/dynamic-templates" newTab={true}>
             Sendgrid dashboard
           </TextLink>
@@ -110,11 +76,47 @@ export const SendgridEventsSection = ({ configuration }: SendgridEventsSectionPr
         </Text>
       }
     >
-      <Box display="flex" flexDirection="column" gap={defaultPadding}>
+      <form
-        {configuration.events.map((event) => (
+        onSubmit={handleSubmit((data) => {
-          <EventBox key={event.eventType} configuration={configuration} event={event} />
+          mutate(data);
-        ))}
+        })}
-      </Box>
+      >
+        <BoxWithBorder>
+          <Box padding={defaultPadding}>
+            <Table.Container>
+              <Table.Header>
+                <Table.Row>
+                  <Table.HeaderCell __width={40}>Active</Table.HeaderCell>
+                  <Table.HeaderCell>Event type</Table.HeaderCell>
+                  <Table.HeaderCell>Dynamic template</Table.HeaderCell>
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {eventsSorted.map((event, index) => (
+                  <Table.Row key={event.eventType}>
+                    <Table.Cell>
+                      <input type="checkbox" {...register(`events.${index}.active`)} />
+                    </Table.Cell>
+                    <Table.Cell>
+                      <Text>{messageEventTypesLabels[event.eventType]}</Text>
+                    </Table.Cell>
+                    <Table.Cell>
+                      <Select
+                        control={control}
+                        name={`events.${index}.template`}
+                        options={templateChoices}
+                      />
+                    </Table.Cell>
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table.Container>
+          </Box>
+          <BoxFooter>
+            <Button type="submit">Save provider</Button>
+          </BoxFooter>
+        </BoxWithBorder>
+      </form>
     </SectionWithDescription>
   );
 };

apps/emails-and-messages/src/modules/smtp/configuration/smtp-config-input-schema.ts

@@ -72,6 +72,21 @@ export const smtpUpdateEventSchema = smtpConfigurationEventSchema.merge(
 
 export type SmtpUpdateEvent = z.infer<typeof smtpUpdateEventSchema>;
 
+export const smtpUpdateEventActiveStatusInputSchema = smtpConfigurationEventSchema
+  .pick({
+    active: true,
+    eventType: true,
+  })
+  .merge(
+    smtpConfigurationSchema.pick({
+      id: true,
+    })
+  );
+
+export type SmtpUpdateEventActiveStatusInput = z.infer<
+  typeof smtpUpdateEventActiveStatusInputSchema
+>;
+
 export const smtpGetEventConfigurationInputSchema = smtpConfigurationIdInputSchema.merge(
   z.object({
     eventType: z.enum(messageEventTypes),
@@ -87,3 +102,10 @@ export const smtpUpdateEventConfigurationInputSchema = smtpConfigurationIdInputS
 export type SmtpUpdateEventConfigurationInput = z.infer<
   typeof smtpUpdateEventConfigurationInputSchema
 >;
+
+export const smtpUpdateEventArraySchema = z.object({
+  configurationId: z.string(),
+  events: z.array(smtpConfigurationEventSchema),
+});
+
+export type SmtpUpdateEventArray = z.infer<typeof smtpUpdateEventArraySchema>;

apps/emails-and-messages/src/modules/smtp/configuration/smtp-configuration.router.ts

@@ -15,7 +15,8 @@ import {
   smtpGetConfigurationsInputSchema,
   smtpGetEventConfigurationInputSchema,
   smtpUpdateBasicInformationSchema,
-  smtpUpdateEventConfigurationInputSchema,
+  smtpUpdateEventActiveStatusInputSchema,
+  smtpUpdateEventArraySchema,
   smtpUpdateEventSchema,
   smtpUpdateSenderSchema,
   smtpUpdateSmtpSchema,
@@ -150,23 +151,6 @@ export const smtpConfigurationRouter = router({
         throwTrpcErrorFromConfigurationServiceError(e);
       }
     }),
-  updateEventConfiguration: protectedWithConfigurationService
-    .meta({ requiredClientPermissions: ["MANAGE_APPS"] })
-    .input(smtpUpdateEventConfigurationInputSchema)
-    .mutation(async ({ ctx, input }) => {
-      const logger = createLogger({ saleorApiUrl: ctx.saleorApiUrl });
-
-      logger.debug(input, "mjmlConfigurationRouter.updateEventConfiguration or create called");
-
-      try {
-        return await ctx.smtpConfigurationService.updateEventConfiguration({
-          configurationId: input.id,
-          eventConfiguration: input,
-        });
-      } catch (e) {
-        throwTrpcErrorFromConfigurationServiceError(e);
-      }
-    }),
 
   renderTemplate: protectedWithConfigurationService
     .meta({ requiredClientPermissions: ["MANAGE_APPS"] })
@@ -287,13 +271,59 @@ export const smtpConfigurationRouter = router({
 
       logger.debug(input, "smtpConfigurationRouter.updateEvent called");
 
+      const { id: configurationId, eventType, ...eventConfiguration } = input;
+
       try {
         return await ctx.smtpConfigurationService.updateEventConfiguration({
-          eventConfiguration: input,
+          configurationId,
-          configurationId: input.id,
+          eventType,
+          eventConfiguration,
         });
       } catch (e) {
         throwTrpcErrorFromConfigurationServiceError(e);
       }
     }),
+  updateEventActiveStatus: protectedWithConfigurationService
+    .meta({ requiredClientPermissions: ["MANAGE_APPS"] })
+    .input(smtpUpdateEventActiveStatusInputSchema)
+    .mutation(async ({ ctx, input }) => {
+      const logger = createLogger({ saleorApiUrl: ctx.saleorApiUrl });
+
+      logger.debug(input, "mjmlConfigurationRouter.updateEventActiveStatus called");
+      try {
+        return await ctx.smtpConfigurationService.updateEventConfiguration({
+          configurationId: input.id,
+          eventType: input.eventType,
+          eventConfiguration: {
+            active: input.active,
+          },
+        });
+      } catch (e) {
+        throwTrpcErrorFromConfigurationServiceError(e);
+      }
+    }),
+  updateEventArray: protectedWithConfigurationService
+    .meta({ requiredClientPermissions: ["MANAGE_APPS"] })
+    .input(smtpUpdateEventArraySchema)
+    .mutation(async ({ ctx, input }) => {
+      const logger = createLogger({ saleorApiUrl: ctx.saleorApiUrl });
+
+      logger.debug(input, "smtpConfigurationRouter.updateEventArray called");
+
+      return await Promise.all(
+        input.events.map(async (event) => {
+          const { eventType, ...eventConfiguration } = event;
+
+          try {
+            return await ctx.smtpConfigurationService.updateEventConfiguration({
+              configurationId: input.configurationId,
+              eventType,
+              eventConfiguration,
+            });
+          } catch (e) {
+            throwTrpcErrorFromConfigurationServiceError(e);
+          }
+        })
+      );
+    }),
 });

apps/emails-and-messages/src/modules/smtp/configuration/smtp-configuration.service.test.ts

@@ -539,6 +539,7 @@ describe("SmtpConfigurationService", function () {
 
       await service.updateEventConfiguration({
         configurationId: validConfig.configurations[0].id,
+        eventType: validConfig.configurations[0].events[0].eventType,
         eventConfiguration: {
           ...validConfig.configurations[0].events[0],
           subject: "Updated subject",
@@ -571,6 +572,7 @@ describe("SmtpConfigurationService", function () {
       await expect(async () =>
         service.updateEventConfiguration({
           configurationId: "this-id-does-not-exist",
+          eventType: validConfig.configurations[0].events[0].eventType,
           eventConfiguration: {
             ...validConfig.configurations[0].events[0],
             subject: "Updated subject",

apps/emails-and-messages/src/modules/smtp/configuration/smtp-configuration.service.ts

@@ -225,18 +225,18 @@ export class SmtpConfigurationService {
   async updateEventConfiguration({
     configurationId,
     eventConfiguration,
+    eventType,
   }: {
     configurationId: string;
-    eventConfiguration: SmtpEventConfiguration;
+    eventType: SmtpEventConfiguration["eventType"];
+    eventConfiguration: Partial<Omit<SmtpEventConfiguration, "eventType">>;
   }) {
     logger.debug("Update event configuration");
     const configuration = await this.getConfiguration({
       id: configurationId,
     });
 
-    const eventIndex = configuration.events.findIndex(
+    const eventIndex = configuration.events.findIndex((e) => e.eventType === eventType);
-      (e) => e.eventType === eventConfiguration.eventType
-    );
 
     if (eventIndex < 0) {
       logger.warn("Event configuration not found, throwing an error");
@@ -246,9 +246,14 @@ export class SmtpConfigurationService {
       );
     }
 
-    configuration.events[eventIndex] = eventConfiguration;
+    const updatedEventConfiguration = {
+      ...configuration.events[eventIndex],
+      ...eventConfiguration,
+    };
+
+    configuration.events[eventIndex] = updatedEventConfiguration;
 
     await this.updateConfiguration(configuration);
-    return configuration;
+    return updatedEventConfiguration;
   }
 }

apps/emails-and-messages/src/modules/smtp/ui/event-form.tsx

@@ -4,12 +4,8 @@ import { MessageEventTypes } from "../../event-handlers/message-event-types";
 import { useDashboardNotification } from "@saleor/apps-shared";
 import { trpcClient } from "../../trpc/trpc-client";
 import { Controller, useForm } from "react-hook-form";
-import {
-  SmtpUpdateEventConfigurationInput,
-  smtpUpdateEventConfigurationInputSchema,
-} from "../configuration/smtp-config-input-schema";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CodeEditor } from "./code-edtor";
+import { CodeEditor } from "./code-editor";
 import { useDebounce } from "usehooks-ts";
 import { useState, useEffect } from "react";
 import { examplePayloads } from "../../event-handlers/default-payloads";
@@ -17,6 +13,7 @@ import { MjmlPreview } from "./mjml-preview";
 import { defaultPadding } from "../../../components/ui-defaults";
 import { setBackendErrors } from "../../../lib/set-backend-errors";
 import { Input } from "@saleor/react-hook-form-macaw";
+import { SmtpUpdateEvent, smtpUpdateEventSchema } from "../configuration/smtp-config-input-schema";
 const PREVIEW_DEBOUNCE_DELAY = 500;
 
 interface EventFormProps {
@@ -31,15 +28,13 @@ export const EventForm = ({ configuration, eventType }: EventFormProps) => {
     (eventConfiguration) => eventConfiguration.eventType === eventType
   )!; // Event conf is not optional, so we can use ! here
 
-  const { handleSubmit, control, getValues, setError } = useForm<SmtpUpdateEventConfigurationInput>(
+  const { handleSubmit, control, getValues, setError } = useForm<SmtpUpdateEvent>({
-    {
+    defaultValues: {
-      defaultValues: {
+      id: configuration.id,
-        id: configuration.id,
+      ...eventConfiguration,
-        ...eventConfiguration,
+    },
-      },
+    resolver: zodResolver(smtpUpdateEventSchema),
-      resolver: zodResolver(smtpUpdateEventConfigurationInputSchema),
+  });
-    }
-  );
 
   const trpcContext = trpcClient.useContext();
   const { mutate } = trpcClient.smtpConfiguration.updateEvent.useMutation({
@@ -48,7 +43,7 @@ export const EventForm = ({ configuration, eventType }: EventFormProps) => {
       trpcContext.smtpConfiguration.invalidate();
     },
     onError(error) {
-      setBackendErrors<SmtpUpdateEventConfigurationInput>({
+      setBackendErrors<SmtpUpdateEvent>({
         error,
         setError,
         notifyError,

apps/emails-and-messages/src/modules/smtp/ui/smtp-events-section.tsx

@@ -1,89 +1,57 @@
-import { SmtpConfiguration, SmtpEventConfiguration } from "../configuration/smtp-config-schema";
+import { SmtpConfiguration } from "../configuration/smtp-config-schema";
 import { BoxWithBorder } from "../../../components/box-with-border";
 import { Box, Button, Text } from "@saleor/macaw-ui/next";
 import { defaultPadding } from "../../../components/ui-defaults";
+import { SectionWithDescription } from "../../../components/section-with-description";
+import { useRouter } from "next/router";
+import { smtpUrls } from "../urls";
+import { TextLink } from "@saleor/apps-ui";
+import React from "react";
+import { messageEventTypesLabels } from "../../event-handlers/message-event-types";
+import { BoxFooter } from "../../../components/box-footer";
+import { Table } from "../../../components/table";
 import { useDashboardNotification } from "@saleor/apps-shared";
+import {
+  SmtpUpdateEventArray,
+  smtpUpdateEventArraySchema,
+} from "../configuration/smtp-config-input-schema";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { trpcClient } from "../../trpc/trpc-client";
 import { useForm } from "react-hook-form";
-import { BoxFooter } from "../../../components/box-footer";
-import { SectionWithDescription } from "../../../components/section-with-description";
-import { SmtpUpdateEvent, smtpUpdateEventSchema } from "../configuration/smtp-config-input-schema";
-import { useRouter } from "next/router";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { smtpUrls } from "../urls";
 import { setBackendErrors } from "../../../lib/set-backend-errors";
-import { TextLink } from "@saleor/apps-ui";
-
-interface EventBoxProps {
-  configuration: SmtpConfiguration;
-  event: SmtpEventConfiguration;
-}
-
-const EventBox = ({ event, configuration }: EventBoxProps) => {
-  const router = useRouter();
-  const { notifySuccess, notifyError } = useDashboardNotification();
-
-  const { handleSubmit, control, setError, register } = useForm<SmtpUpdateEvent>({
-    defaultValues: {
-      id: configuration.id,
-      ...event,
-    },
-    resolver: zodResolver(smtpUpdateEventSchema),
-  });
-
-  const trpcContext = trpcClient.useContext();
-  const { mutate } = trpcClient.smtpConfiguration.updateEvent.useMutation({
-    onSuccess: async () => {
-      notifySuccess("Configuration saved");
-      trpcContext.smtpConfiguration.invalidate();
-    },
-    onError(error) {
-      setBackendErrors<SmtpUpdateEvent>({
-        error,
-        setError,
-        notifyError,
-      });
-    },
-  });
-
-  return (
-    <form
-      onSubmit={handleSubmit((data, event) => {
-        mutate({
-          ...data,
-        });
-      })}
-    >
-      <BoxWithBorder>
-        <Box padding={defaultPadding} display="flex" flexDirection="column" gap={defaultPadding}>
-          <Text variant="heading">{event.eventType}</Text>
-          <Button
-            variant="secondary"
-            onClick={() => {
-              router.push(smtpUrls.eventConfiguration(configuration.id, event.eventType));
-            }}
-          >
-            Edit template
-          </Button>
-
-          <label>
-            <input type="checkbox" placeholder="Enabled" {...register("active")} />
-            <Text paddingLeft={defaultPadding}>Active</Text>
-          </label>
-        </Box>
-        <BoxFooter>
-          <Button type="submit">Save event</Button>
-        </BoxFooter>
-      </BoxWithBorder>
-    </form>
-  );
-};
 
 interface SmtpEventsSectionProps {
   configuration: SmtpConfiguration;
 }
 
 export const SmtpEventsSection = ({ configuration }: SmtpEventsSectionProps) => {
+  const { notifySuccess, notifyError } = useDashboardNotification();
+  const router = useRouter();
+
+  // Sort events by displayed label
+  const eventsSorted = configuration.events.sort((a, b) =>
+    messageEventTypesLabels[a.eventType].localeCompare(messageEventTypesLabels[b.eventType])
+  );
+
+  const { register, handleSubmit, setError } = useForm<SmtpUpdateEventArray>({
+    defaultValues: {
+      configurationId: configuration.id,
+      events: eventsSorted,
+    },
+    resolver: zodResolver(smtpUpdateEventArraySchema),
+  });
+
+  const trpcContext = trpcClient.useContext();
+  const { mutate } = trpcClient.smtpConfiguration.updateEventArray.useMutation({
+    onSuccess: async () => {
+      notifySuccess("Configuration saved");
+      trpcContext.smtpConfiguration.invalidate();
+    },
+    onError(error) {
+      setBackendErrors<SmtpUpdateEventArray>({ error, setError, notifyError });
+    },
+  });
+
   return (
     <SectionWithDescription
       title="Events"
@@ -100,11 +68,53 @@ export const SmtpEventsSection = ({ configuration }: SmtpEventsSectionProps) =>
         </Box>
       }
     >
-      <Box display="flex" flexDirection="column" gap={defaultPadding}>
+      <form
-        {configuration.events.map((event) => (
+        onSubmit={handleSubmit((data) => {
-          <EventBox key={event.eventType} configuration={configuration} event={event} />
+          mutate(data);
-        ))}
+        })}
-      </Box>
+      >
+        <BoxWithBorder>
+          <Box padding={defaultPadding}>
+            <Table.Container>
+              <Table.Header>
+                <Table.Row>
+                  <Table.HeaderCell __width={40}>Active</Table.HeaderCell>
+                  <Table.HeaderCell>Event type</Table.HeaderCell>
+                  <Table.HeaderCell __width={110}></Table.HeaderCell>
+                </Table.Row>
+              </Table.Header>
+              <Table.Body>
+                {eventsSorted.map((event, index) => (
+                  <Table.Row key={event.eventType}>
+                    <Table.Cell>
+                      <input type="checkbox" {...register(`events.${index}.active`)} />
+                    </Table.Cell>
+                    <Table.Cell>
+                      <Text>{messageEventTypesLabels[event.eventType]}</Text>
+                    </Table.Cell>
+                    <Table.Cell>
+                      <Button
+                        variant="tertiary"
+                        size="small"
+                        onClick={() => {
+                          router.push(
+                            smtpUrls.eventConfiguration(configuration.id, event.eventType)
+                          );
+                        }}
+                      >
+                        Edit template
+                      </Button>
+                    </Table.Cell>
+                  </Table.Row>
+                ))}
+              </Table.Body>
+            </Table.Container>
+          </Box>
+          <BoxFooter>
+            <Button type="submit">Save provider</Button>
+          </BoxFooter>
+        </BoxWithBorder>
+      </form>
     </SectionWithDescription>
   );
 };

apps/emails-and-messages/src/pages/configuration/smtp/[configurationId]/event/[eventType].tsx

@@ -9,6 +9,7 @@ import { appUrls } from "../../../../../modules/app-configuration/urls";
 import { EventForm } from "../../../../../modules/smtp/ui/event-form";
 import { smtpUrls } from "../../../../../modules/smtp/urls";
 import { TextLink } from "@saleor/apps-ui";
+import { messageEventTypesLabels } from "../../../../../modules/event-handlers/message-event-types";
 
 const LoadingView = () => {
   return (
@@ -78,12 +79,12 @@ const EditSmtpEventPage: NextPage = () => {
       breadcrumbs={[
         { name: "Configuration", href: appUrls.configuration() },
         { name: `SMTP:  ${configuration.name}`, href: smtpUrls.configuration(configurationId) },
-        { name: eventType },
+        { name: messageEventTypesLabels[eventType] },
       ]}
     >
       <Box display="flex" flexDirection="column" gap={10}>
         <Text as="p">
-          Edit template for {eventType} event. You can learn more about MJML{" "}
+          Edit template for <code>{eventType}</code> event. You can learn more about MJML{" "}
           <TextLink href="https://mjml.io/" newTab={true}>
             here
           </TextLink>