Fix webhooks events

src/misc.ts

@@ -11,7 +11,8 @@ import {
   AuthorizationKeyType,
   OrderStatus,
   PaymentChargeStatusEnum,
-  TaxRateType
+  TaxRateType,
+  WebhookEventTypeEnum
 } from "./types/globalTypes";
 
 export type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<
@@ -333,6 +334,61 @@ export const translatedTaxRates = (intl: IntlShape) => ({
   [TaxRateType.WATER]: intl.formatMessage(taxRatesMessages.water)
 });
 
+const webhooksEventMessages = defineMessages({
+  anyEvents: {
+    defaultMessage: "Any events",
+    description: "event"
+  },
+  customerCreated: {
+    defaultMessage: "Customer created",
+    description: "event"
+  },
+  orderCancelled: {
+    defaultMessage: "Order cancelled",
+    description: "event"
+  },
+  orderCreated: {
+    defaultMessage: "Order created",
+    description: "event"
+  },
+  orderFullyPaid: {
+    defaultMessage: "Order fully paid",
+    description: "event"
+  },
+  orderUpdated: {
+    defaultMessage: "Order updated",
+    description: "event"
+  },
+  productCreated: {
+    defaultMessage: "Product created",
+    description: "event"
+  }
+});
+
+export const translatedWebhookEvents = (intl: IntlShape) => ({
+  [WebhookEventTypeEnum.ANY_EVENTS]: intl.formatMessage(
+    webhooksEventMessages.anyEvents
+  ),
+  [WebhookEventTypeEnum.CUSTOMER_CREATED]: intl.formatMessage(
+    webhooksEventMessages.customerCreated
+  ),
+  [WebhookEventTypeEnum.ORDER_CANCELLED]: intl.formatMessage(
+    webhooksEventMessages.orderCancelled
+  ),
+  [WebhookEventTypeEnum.ORDER_CREATED]: intl.formatMessage(
+    webhooksEventMessages.orderCreated
+  ),
+  [WebhookEventTypeEnum.ORDER_FULLY_PAID]: intl.formatMessage(
+    webhooksEventMessages.orderFullyPaid
+  ),
+  [WebhookEventTypeEnum.ORDER_UPDATED]: intl.formatMessage(
+    webhooksEventMessages.orderUpdated
+  ),
+  [WebhookEventTypeEnum.PRODUCT_CREATED]: intl.formatMessage(
+    webhooksEventMessages.productCreated
+  )
+});
+
 export const authorizationKeyTypes = {
   [AuthorizationKeyType.FACEBOOK]: "Facebook",
   [AuthorizationKeyType.GOOGLE_OAUTH2]: "Google OAuth2"

src/webhooks/components/WebhookEvents/WebhookEvents.tsx

@@ -5,6 +5,7 @@ import CardTitle from "@saleor/components/CardTitle";
 import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import Hr from "@saleor/components/Hr";
 import { ChangeEvent } from "@saleor/hooks/useForm";
+import { translatedWebhookEvents } from "@saleor/misc";
 import { WebhookEventTypeEnum } from "@saleor/types/globalTypes";
 import React from "react";
 import { useIntl } from "react-intl";
@@ -25,15 +26,14 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
 }) => {
   const intl = useIntl();
   const eventsEnum = Object.values(WebhookEventTypeEnum);
+  const translatedEvents = translatedWebhookEvents(intl);
 
   const handleAllEventsChange = (event: ChangeEvent) =>
     onChange(event, () =>
       onChange({
         target: {
           name: "events",
-          value: event.target.value
-            ? WebhookEventTypeEnum.ANY_EVENTS
-            : data.events
+          value: event.target.value ? WebhookEventTypeEnum.ANY_EVENTS : []
         }
       } as any)
     );
@@ -84,7 +84,7 @@ const WebhookEvents: React.StatelessComponent<WebhookEventsProps> = ({
                   <ControlledCheckbox
                     checked={data.events.includes(event)}
                     disabled={disabled}
-                    label={event.replace(/\./, "")}
+                    label={translatedEvents[event]}
                     name={event}
                     onChange={handleEventsChange}
                   />

src/webhooks/components/WebhooksDetailsPage/WebhooksDetailsPage.tsx

@@ -69,7 +69,7 @@ const WebhooksDetailsPage: React.StatelessComponent<
     isActive: maybe(() => webhook.isActive, false),
     name: maybe(() => webhook.name, ""),
     secretKey: maybe(() => webhook.secretKey, ""),
-    serviceAccount: maybe(() => webhook.serviceAccount.name, ""),
+    serviceAccount: maybe(() => webhook.serviceAccount.id, ""),
     targetUrl: maybe(() => webhook.targetUrl, "")
   };
   const [

src/webhooks/views/WebhooksDetails.tsx

@@ -128,7 +128,7 @@ export const WebhooksDetails: React.StatelessComponent<
                                 input: {
                                   events: data.allEvents
                                     ? [WebhookEventTypeEnum.ANY_EVENTS]
-                                    : data.events,
+                                    : data.events.slice(1),
                                   isActive: data.isActive,
                                   name: data.name,
                                   secretKey: data.secretKey,