From e7e639b799368a679efd1e6b322f8c751665f016 Mon Sep 17 00:00:00 2001
From: Patryk Zawadzki <81205+patrys@users.noreply.github.com>
Date: Fri, 26 Apr 2024 18:38:48 +0200
Subject: [PATCH] Add support for the BrokerProperties header (#4831)

---
 .changeset/purple-beans-deliver.md                        | 5 +++++
 locale/defaultMessages.json                               | 8 ++++----
 .../components/WebhookHeaders/WebhookHeaders.tsx          | 2 +-
 src/custom-apps/components/WebhookHeaders/messages.ts     | 4 ++--
 src/custom-apps/components/WebhookHeaders/utils.ts        | 4 +++-
 5 files changed, 15 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/purple-beans-deliver.md

diff --git a/.changeset/purple-beans-deliver.md b/.changeset/purple-beans-deliver.md
new file mode 100644
index 00000000000..714602def1f
--- /dev/null
+++ b/.changeset/purple-beans-deliver.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Addedd support for the BrokerProperties webhook header
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index ddc0cfeb444..e441ec7f38b 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -6927,10 +6927,6 @@
     "context": "button",
     "string": "Apply"
   },
-  "iERn5G": {
-    "context": "header name input",
-    "string": "Should start with `x-` or `authorization`"
-  },
   "iEeIhY": {
     "context": "draft order",
     "string": "Customer"
@@ -8362,6 +8358,10 @@
     "context": "dialog title",
     "string": "Delete categories"
   },
+  "sGDsFP": {
+    "context": "header name input",
+    "string": "Should match `x-*`, `authorization*`, or `brokerproperties`."
+  },
   "sHON47": {
     "context": "refunded products list title",
     "string": "Products refunded"
diff --git a/src/custom-apps/components/WebhookHeaders/WebhookHeaders.tsx b/src/custom-apps/components/WebhookHeaders/WebhookHeaders.tsx
index 0335162fde7..27a4909bb04 100644
--- a/src/custom-apps/components/WebhookHeaders/WebhookHeaders.tsx
+++ b/src/custom-apps/components/WebhookHeaders/WebhookHeaders.tsx
@@ -106,7 +106,7 @@ const WebhookHeaders: React.FC<WebhookHeadersProps> = ({ data: { customHeaders }
                       <FormattedMessage
                         {...messages.acceptedFormat}
                         values={{
-                          code: (...chunks) => <code>${chunks}</code>,
+                          code: (...chunks) => <code>{chunks}</code>,
                         }}
                       />
                     </Typography>
diff --git a/src/custom-apps/components/WebhookHeaders/messages.ts b/src/custom-apps/components/WebhookHeaders/messages.ts
index 4dc826f7c22..4e8f5e69ca2 100644
--- a/src/custom-apps/components/WebhookHeaders/messages.ts
+++ b/src/custom-apps/components/WebhookHeaders/messages.ts
@@ -24,8 +24,8 @@ export const messages = defineMessages({
     description: "header field name, header",
   },
   headerNameError: {
-    id: "iERn5G",
-    defaultMessage: "Should start with `x-` or `authorization`",
+    id: "sGDsFP",
+    defaultMessage: "Should match `x-*`, `authorization*`, or `brokerproperties`.",
     description: "header name input",
   },
   headerValue: {
diff --git a/src/custom-apps/components/WebhookHeaders/utils.ts b/src/custom-apps/components/WebhookHeaders/utils.ts
index d640e279b2a..d8b8a96c32a 100644
--- a/src/custom-apps/components/WebhookHeaders/utils.ts
+++ b/src/custom-apps/components/WebhookHeaders/utils.ts
@@ -14,7 +14,9 @@ const validateName = (name: string) => {
   if (
     name
       .toLowerCase()
-      .match("(^x$)|(^x-)|^(a|$)(u|$)(t|$)(h|$)(o|$)(r|$)(i|$)(z|$)(a|$)(t|$)(i|$)(o|$)(n|$)(-|$)")
+      .match(
+        "(^x$)|(^x-)|^(a|$)(u|$)(t|$)(h|$)(o|$)(r|$)(i|$)(z|$)(a|$)(t|$)(i|$)(o|$)(n|$)(-|$)|^brokerproperties$",
+      )
   ) {
     return false;
   }