Handle stock errors

src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx

@@ -11,7 +11,10 @@ import classNames from "classnames";
 import Typography from "@material-ui/core/Typography";
 
 import useFormset, { FormsetData } from "@saleor/hooks/useFormset";
-import { OrderFulfillStockInput } from "@saleor/types/globalTypes";
+import {
+  OrderFulfillStockInput,
+  OrderErrorCode
+} from "@saleor/types/globalTypes";
 import { WarehouseFragment } from "@saleor/warehouses/types/WarehouseFragment";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import Container from "@saleor/components/Container";
@@ -31,6 +34,7 @@ import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
 import { renderCollection } from "@saleor/misc";
 import Skeleton from "@saleor/components/Skeleton";
 import AppHeader from "@saleor/components/AppHeader";
+import { FulfillOrder_orderFulfill_errors } from "@saleor/orders/types/FulfillOrder";
 
 const useStyles = makeStyles(
   theme => ({
@@ -91,6 +95,7 @@ interface OrderFulfillSubmitData extends OrderFulfillFormData {
 }
 export interface OrderFulfillPageProps {
   disabled: boolean;
+  errors: FulfillOrder_orderFulfill_errors[];
   order: OrderFulfillData_order;
   saveButtonBar: ConfirmButtonTransitionState;
   warehouses: WarehouseFragment[];
@@ -108,6 +113,7 @@ function getRemainingQuantity(line: OrderFulfillData_order_lines): number {
 
 const OrderFulfillPage: React.FC<OrderFulfillPageProps> = ({
   disabled,
+  errors,
   order,
   saveButtonBar,
   warehouses,
@@ -336,7 +342,15 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = ({
                                     }
                                     error={
                                       overfulfill ||
-                                      formsetStock.quantity > availableQuantity
+                                      formsetStock.quantity >
+                                        availableQuantity ||
+                                      !!errors?.find(
+                                        err =>
+                                          err.warehouse === warehouse.id &&
+                                          err.orderLine === line.id &&
+                                          err.code ===
+                                            OrderErrorCode.INSUFFICIENT_STOCK
+                                      )
                                     }
                                   />
                                   <div className={classes.remainingQuantity}>

src/orders/mutations.ts

@@ -460,6 +460,8 @@ const fulfillOrder = gql`
     orderFulfill(order: $orderId, input: $input) {
       errors: orderErrors {
         ...OrderErrorFragment
+        warehouse
+        orderLine
       }
       order {
         ...OrderDetailsFragment

src/orders/types/FulfillOrder.ts

@@ -12,6 +12,8 @@ export interface FulfillOrder_orderFulfill_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
+  warehouse: string | null;
+  orderLine: string | null;
 }
 
 export interface FulfillOrder_orderFulfill_order_billingAddress_country {

src/orders/views/OrderFulfill/OrderFulfill.tsx

@@ -66,6 +66,7 @@ const OrderFulfill: React.FC<OrderFulfillProps> = ({ orderId }) => {
       />
       <OrderFulfillPage
         disabled={loading || warehousesLoading || fulfillOrderOpts.loading}
+        errors={fulfillOrderOpts.data?.orderFulfill.errors}
         onBack={() => navigate(orderUrl(orderId))}
         onSubmit={formData =>
           fulfillOrder({

src/types/globalTypes.ts

@@ -24,6 +24,7 @@ export enum AccountErrorCode {
   NOT_FOUND = "NOT_FOUND",
   OUT_OF_SCOPE_GROUP = "OUT_OF_SCOPE_GROUP",
   OUT_OF_SCOPE_PERMISSION = "OUT_OF_SCOPE_PERMISSION",
+  OUT_OF_SCOPE_SERVICE_ACCOUNT = "OUT_OF_SCOPE_SERVICE_ACCOUNT",
   OUT_OF_SCOPE_USER = "OUT_OF_SCOPE_USER",
   PASSWORD_ENTIRELY_NUMERIC = "PASSWORD_ENTIRELY_NUMERIC",
   PASSWORD_TOO_COMMON = "PASSWORD_TOO_COMMON",
@@ -996,7 +997,7 @@ export interface DraftOrderInput {
 }
 
 export interface FulfillmentCancelInput {
-  restock?: boolean | null;
+  warehouseId: string;
 }
 
 export interface FulfillmentUpdateTrackingInput {