Add back button

src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx

@@ -27,6 +27,7 @@ import { update } from "@saleor/utils/lists";
 import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import { renderCollection } from "@saleor/misc";
 import Skeleton from "@saleor/components/Skeleton";
+import AppHeader from "@saleor/components/AppHeader";
 
 const useStyles = makeStyles(
   theme => ({
@@ -136,6 +137,22 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = ({
 
   return (
     <Container>
+      <AppHeader onBack={onBack}>
+        {order?.number
+          ? intl.formatMessage(
+              {
+                defaultMessage: "Order #{orderNumber}",
+                description: "page header with order number"
+              },
+              {
+                orderNumber: order.number
+              }
+            )
+          : intl.formatMessage({
+              defaultMessage: "Order",
+              description: "page header"
+            })}
+      </AppHeader>
       <PageHeader
         title={intl.formatMessage(
           {

src/orders/views/OrderFulfill/OrderFulfill.tsx

@@ -1,3 +1,4 @@
+import { useIntl } from "react-intl";
 import React from "react";
 
 import { useOrderFulfillData } from "@saleor/orders/queries";
@@ -5,6 +6,7 @@ import OrderFulfillPage from "@saleor/orders/components/OrderFulfillPage";
 import useNavigator from "@saleor/hooks/useNavigator";
 import { orderUrl } from "@saleor/orders/urls";
 import { useWarehouseList } from "@saleor/warehouses/queries";
+import { WindowTitle } from "@saleor/components/WindowTitle";
 
 export interface OrderFulfillProps {
   orderId: string;
@@ -12,6 +14,7 @@ export interface OrderFulfillProps {
 
 const OrderFulfill: React.FC<OrderFulfillProps> = ({ orderId }) => {
   const navigate = useNavigator();
+  const intl = useIntl();
   const { data, loading } = useOrderFulfillData({
     displayLoader: true,
     variables: {
@@ -26,14 +29,34 @@ const OrderFulfill: React.FC<OrderFulfillProps> = ({ orderId }) => {
   });
 
   return (
-    <OrderFulfillPage
-      disabled={loading || warehousesLoading}
-      onBack={() => navigate(orderUrl(orderId))}
-      onSubmit={() => undefined}
-      order={data?.order}
-      saveButtonBar="default"
-      warehouses={warehouseData?.warehouses.edges.map(edge => edge.node)}
-    />
+    <>
+      <WindowTitle
+        title={
+          data?.order?.number
+            ? intl.formatMessage(
+                {
+                  defaultMessage: "Fulfill Order #{orderNumber}",
+                  description: "window title"
+                },
+                {
+                  orderNumber: data.order.number
+                }
+              )
+            : intl.formatMessage({
+                defaultMessage: "Fulfill Order",
+                description: "window title"
+              })
+        }
+      />
+      <OrderFulfillPage
+        disabled={loading || warehousesLoading}
+        onBack={() => navigate(orderUrl(orderId))}
+        onSubmit={() => undefined}
+        order={data?.order}
+        saveButtonBar="default"
+        warehouses={warehouseData?.warehouses.edges.map(edge => edge.node)}
+      />
+    </>
   );
 };