Fix add product to order modal title & subtitle (#3337)

locale/defaultMessages.json

@@ -919,6 +919,10 @@
     "context": "modal button",
     "string": "Upload URL"
   },
+  "4XhJY+": {
+    "context": "dialog header",
+    "string": "Add product from {channelName}"
+  },
   "4Z0O2B": {
     "context": "section header title",
     "string": "Gift Card Timeline"
@@ -1524,10 +1528,6 @@
     "context": "number of webhook headers in model",
     "string": "{number,plural,one{{number} header} other{{number} custom request headers}}"
   },
-  "9Y6vg+": {
-    "context": "dialog header",
-    "string": "Add product"
-  },
   "9YazHG": {
     "string": "Company"
   },
@@ -4329,6 +4329,10 @@
     "context": "orders section name",
     "string": "Orders"
   },
+  "Taa5V7": {
+    "context": "dialog subtitle",
+    "string": "You can only add products available for the order's channel"
+  },
   "Tenl9A": {
     "context": "grant refund, refund card toggle",
     "string": "Refund shipment: {currency} {amount}"

src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx

@@ -29,6 +29,7 @@ import {
   Typography,
 } from "@material-ui/core";
 import { ConfirmButtonTransitionState } from "@saleor/macaw-ui";
+import { Text } from "@saleor/macaw-ui/next";
 import React from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { FormattedMessage, useIntl } from "react-intl";
@@ -53,6 +54,7 @@ export interface OrderProductAddDialogProps extends FetchMoreProps {
   onSubmit: (
     data: SearchOrderVariantQuery["search"]["edges"][0]["node"]["variants"],
   ) => void;
+  channelName?: string;
 }
 
 const scrollableTargetId = "orderProductAddScrollableDialog";
@@ -69,6 +71,7 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
     onFetchMore,
     onClose,
     onSubmit,
+    channelName,
   } = props;
 
   const classes = useStyles(props);
@@ -126,8 +129,18 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
       maxWidth="sm"
     >
       <DialogTitle disableTypography>
-        <FormattedMessage {...messages.title} />
+        <FormattedMessage
+          {...messages.title}
+          values={{
+            channelName,
+          }}
+        />
       </DialogTitle>
+      <DialogContent className={classes.subtitle}>
+        <Text variant="caption" color="textNeutralSubdued">
+          <FormattedMessage {...messages.subtitle} />
+        </Text>
+      </DialogContent>
       <DialogContent data-test-id="search-query">
         <TextField
           name="query"

src/orders/components/OrderProductAddDialog/messages.ts

@@ -2,9 +2,15 @@ import { defineMessages } from "react-intl";
 
 export const messages = defineMessages({
   title: {
-    defaultMessage: "Add product",
+    defaultMessage: "Add product from {channelName}",
     description: "dialog header",
-    id: "9Y6vg+",
+    id: "4XhJY+",
+  },
+  subtitle: {
+    defaultMessage:
+      "You can only add products available for the order's channel",
+    id: "Taa5V7",
+    description: "dialog subtitle",
   },
   search: {
     defaultMessage: "Search products",

src/orders/components/OrderProductAddDialog/styles.ts

@@ -20,6 +20,9 @@ export const useStyles = makeStyles(
       paddingTop: 0,
       marginBottom: theme.spacing(3),
     },
+    subtitle: {
+      padding: 0,
+    },
     grayText: {
       color: theme.palette.text.disabled,
     },

src/orders/views/OrderDetails/OrderDraftDetails/index.tsx

@@ -293,6 +293,7 @@ export const OrderDraftDetails: React.FC<OrderDraftDetailsProps> = ({
         onClose={closeModal}
         onFetch={variantSearch}
         onFetchMore={loadMore}
+        channelName={order.channel.name}
         onSubmit={variants =>
           extractMutationErrors(
             orderLinesAdd.mutate({

src/orders/views/OrderDetails/OrderUnconfirmedDetails/index.tsx

@@ -332,6 +332,7 @@ export const OrderUnconfirmedDetails: React.FC<
         onClose={closeModal}
         onFetch={variantSearch}
         onFetchMore={loadMore}
+        channelName={order.channel?.name}
         onSubmit={variants =>
           orderLinesAdd.mutate({
             id,