Hook up components with API

src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx

@@ -11,7 +11,7 @@ import classNames from "classnames";
 import Typography from "@material-ui/core/Typography";
 
 import useFormset, { FormsetData } from "@saleor/hooks/useFormset";
-import { StockInput } from "@saleor/types/globalTypes";
+import { OrderFulfillStockInput } from "@saleor/types/globalTypes";
 import { WarehouseFragment } from "@saleor/warehouses/types/WarehouseFragment";
 import TableCellAvatar from "@saleor/components/TableCellAvatar";
 import Container from "@saleor/components/Container";
@@ -19,7 +19,10 @@ import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton";
 import Form from "@saleor/components/Form";
-import { OrderFulfillData_order } from "@saleor/orders/types/OrderFulfillData";
+import {
+  OrderFulfillData_order,
+  OrderFulfillData_order_lines
+} from "@saleor/orders/types/OrderFulfillData";
 import CardTitle from "@saleor/components/CardTitle";
 import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import makeStyles from "@material-ui/core/styles/makeStyles";
@@ -36,23 +39,25 @@ const useStyles = makeStyles(
       paddingLeft: theme.spacing(2) + 2
     },
     colName: {
-      width: 300
+      width: 250
     },
     colQuantity: {
-      textAlign: "right",
       width: 210
     },
     colQuantityContent: {
       alignItems: "center",
       display: "inline-flex"
     },
+    colQuantityHeader: {
+      textAlign: "right"
+    },
     colQuantityTotal: {
       textAlign: "right",
       width: 180
     },
     colSku: {
       textAlign: "right",
-      width: 120
+      width: 150
     },
     error: {
       color: theme.palette.error.main
@@ -82,7 +87,7 @@ interface OrderFulfillFormData {
   sendInfo: boolean;
 }
 interface OrderFulfillSubmitData extends OrderFulfillFormData {
-  items: FormsetData<null, StockInput[]>;
+  items: FormsetData<null, OrderFulfillStockInput[]>;
 }
 export interface OrderFulfillPageProps {
   disabled: boolean;
@@ -97,6 +102,10 @@ const initialFormData: OrderFulfillFormData = {
   sendInfo: true
 };
 
+function getRemainingQuantity(line: OrderFulfillData_order_lines): number {
+  return line.quantity - line.quantityFulfilled;
+}
+
 const OrderFulfillPage: React.FC<OrderFulfillPageProps> = ({
   disabled,
   order,
@@ -110,9 +119,11 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = ({
 
   const { change: formsetChange, data: formsetData } = useFormset<
     null,
-    StockInput[]
+    OrderFulfillStockInput[]
   >(
-    order?.lines.map(line => ({
+    order?.lines
+      .filter(line => getRemainingQuantity(line) > 0)
+      .map(line => ({
         data: null,
         id: line.id,
         label: line.variant.attributes
@@ -189,7 +200,10 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = ({
                     {warehouses?.map(warehouse => (
                       <TableCell
                         key={warehouse.id}
-                        className={classes.colQuantity}
+                        className={classNames(
+                          classes.colQuantity,
+                          classes.colQuantityHeader
+                        )}
                       >
                         {warehouse.name}
                       </TableCell>
@@ -203,7 +217,9 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = ({
                   </TableRow>
                 </TableHead>
                 <TableBody>
-                  {renderCollection(order?.lines, (line, lineIndex) => {
+                  {renderCollection(
+                    order?.lines.filter(line => getRemainingQuantity(line) > 0),
+                    (line, lineIndex) => {
                       if (!line) {
                         return (
                           <TableRow>
@@ -213,8 +229,11 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = ({
                             <TableCell className={classes.colSku}>
                               <Skeleton />
                             </TableCell>
-                          {warehouses?.map(() => (
+                            {warehouses?.map(warehouse => (
-                            <TableCell className={classes.colQuantity}>
+                              <TableCell
+                                className={classes.colQuantity}
+                                key={warehouse.id}
+                              >
                                 <Skeleton />
                               </TableCell>
                             ))}
@@ -226,8 +245,7 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = ({
                         );
                       }
 
-                    const remainingQuantity =
+                      const remainingQuantity = getRemainingQuantity(line);
-                      line.quantity - line.quantityFulfilled;
                       const quantityToFulfill = formsetData[
                         lineIndex
                       ].value.reduce(
@@ -263,7 +281,9 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = ({
                             );
                             const formsetStock = formsetData[
                               lineIndex
-                          ].value.find(line => line.warehouse === warehouse.id);
+                            ].value.find(
+                              line => line.warehouse === warehouse.id
+                            );
 
                             if (!warehouseStock) {
                               return (
@@ -340,7 +360,8 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = ({
                           </TableCell>
                         </TableRow>
                       );
-                  })}
+                    }
+                  )}
                 </TableBody>
               </ResponsiveTable>
               <CardActions className={classes.actionBar}>

src/orders/containers/OrderOperations.tsx

@@ -6,7 +6,6 @@ import {
   TypedOrderAddNoteMutation,
   TypedOrderCancelMutation,
   TypedOrderCaptureMutation,
-  TypedOrderCreateFulfillmentMutation,
   TypedOrderDraftCancelMutation,
   TypedOrderDraftFinalizeMutation,
   TypedOrderDraftUpdateMutation,
@@ -24,10 +23,6 @@ import {
 import { OrderAddNote, OrderAddNoteVariables } from "../types/OrderAddNote";
 import { OrderCancel, OrderCancelVariables } from "../types/OrderCancel";
 import { OrderCapture, OrderCaptureVariables } from "../types/OrderCapture";
-import {
-  OrderCreateFulfillment,
-  OrderCreateFulfillmentVariables
-} from "../types/OrderCreateFulfillment";
 import {
   OrderDraftCancel,
   OrderDraftCancelVariables
@@ -80,10 +75,6 @@ interface OrderOperationsProps {
       OrderCancel,
       OrderCancelVariables
     >;
-    orderCreateFulfillment: PartialMutationProviderOutput<
-      OrderCreateFulfillment,
-      OrderCreateFulfillmentVariables
-    >;
     orderFulfillmentCancel: PartialMutationProviderOutput<
       OrderFulfillmentCancel,
       OrderFulfillmentCancelVariables
@@ -139,7 +130,6 @@ interface OrderOperationsProps {
     >;
   }) => React.ReactNode;
   onOrderFulfillmentCancel: (data: OrderFulfillmentCancel) => void;
-  onOrderFulfillmentCreate: (data: OrderCreateFulfillment) => void;
   onOrderFulfillmentUpdate: (data: OrderFulfillmentUpdateTracking) => void;
   onOrderCancel: (data: OrderCancel) => void;
   onOrderVoid: (data: OrderVoid) => void;
@@ -160,7 +150,6 @@ interface OrderOperationsProps {
 const OrderOperations: React.FC<OrderOperationsProps> = ({
   children,
   onDraftUpdate,
-  onOrderFulfillmentCreate,
   onNoteAdd,
   onOrderCancel,
   onOrderLinesAdd,
@@ -185,10 +174,6 @@ const OrderOperations: React.FC<OrderOperationsProps> = ({
             {(...paymentCapture) => (
               <TypedOrderRefundMutation onCompleted={onPaymentRefund}>
                 {(...paymentRefund) => (
-                  <TypedOrderCreateFulfillmentMutation
-                    onCompleted={onOrderFulfillmentCreate}
-                  >
-                    {(...createFulfillment) => (
                   <TypedOrderAddNoteMutation onCompleted={onNoteAdd}>
                     {(...addNote) => (
                       <TypedOrderUpdateMutation onCompleted={onUpdate}>
@@ -232,9 +217,7 @@ const OrderOperations: React.FC<OrderOperationsProps> = ({
                                                           onDraftFinalize
                                                         }
                                                       >
-                                                            {(
+                                                        {(...finalizeDraft) => (
-                                                              ...finalizeDraft
-                                                            ) => (
                                                           <TypedOrderDraftCancelMutation
                                                             onCompleted={
                                                               onDraftCancel
@@ -258,9 +241,6 @@ const OrderOperations: React.FC<OrderOperationsProps> = ({
                                                                     orderCancel: getMutationProviderData(
                                                                       ...orderCancel
                                                                     ),
-                                                                        orderCreateFulfillment: getMutationProviderData(
-                                                                          ...createFulfillment
-                                                                        ),
                                                                     orderDraftCancel: getMutationProviderData(
                                                                       ...cancelDraft
                                                                     ),
@@ -329,8 +309,6 @@ const OrderOperations: React.FC<OrderOperationsProps> = ({
                     )}
                   </TypedOrderAddNoteMutation>
                 )}
-                  </TypedOrderCreateFulfillmentMutation>
-                )}
               </TypedOrderRefundMutation>
             )}
           </TypedOrderCaptureMutation>

src/orders/mutations.ts

@@ -14,10 +14,6 @@ import {
 } from "./types/OrderBulkCancel";
 import { OrderCancel, OrderCancelVariables } from "./types/OrderCancel";
 import { OrderCapture, OrderCaptureVariables } from "./types/OrderCapture";
-import {
-  OrderCreateFulfillment,
-  OrderCreateFulfillmentVariables
-} from "./types/OrderCreateFulfillment";
 import {
   OrderDraftBulkCancel,
   OrderDraftBulkCancelVariables
@@ -235,28 +231,6 @@ export const TypedOrderCaptureMutation = TypedMutation<
   OrderCaptureVariables
 >(orderCaptureMutation);
 
-const orderCreateFulfillmentMutation = gql`
-  ${fragmentOrderDetails}
-  ${orderErrorFragment}
-  mutation OrderCreateFulfillment(
-    $order: ID!
-    $input: FulfillmentCreateInput!
-  ) {
-    orderFulfillmentCreate(order: $order, input: $input) {
-      errors: orderErrors {
-        ...OrderErrorFragment
-      }
-      order {
-        ...OrderDetailsFragment
-      }
-    }
-  }
-`;
-export const TypedOrderCreateFulfillmentMutation = TypedMutation<
-  OrderCreateFulfillment,
-  OrderCreateFulfillmentVariables
->(orderCreateFulfillmentMutation);
-
 const orderFulfillmentUpdateTrackingMutation = gql`
   ${fragmentOrderDetails}
   ${orderErrorFragment}
@@ -480,8 +454,10 @@ export const TypedOrderLineUpdateMutation = TypedMutation<
 >(orderLineUpdateMutation);
 
 const fulfillOrder = gql`
-  mutation FulfillOrder($orderId: ID!, $input: FulfillmentCreateInput!) {
+  ${fragmentOrderDetails}
-    orderFulfillmentCreate(order: $orderId, input: $input) {
+  ${orderErrorFragment}
+  mutation FulfillOrder($orderId: ID!, $input: OrderFulfillInput!) {
+    orderFulfill(order: $orderId, input: $input) {
       errors: orderErrors {
         ...OrderErrorFragment
       }

src/orders/types/FulfillOrder.ts

@@ -2,30 +2,30 @@
 /* eslint-disable */
 // This file was automatically generated and should not be edited.
 
-import { FulfillmentCreateInput, OrderErrorCode, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction } from "./../../types/globalTypes";
+import { OrderFulfillInput, OrderErrorCode, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: FulfillOrder
 // ====================================================
 
-export interface FulfillOrder_orderFulfillmentCreate_errors {
+export interface FulfillOrder_orderFulfill_errors {
   __typename: "OrderError";
   code: OrderErrorCode;
   field: string | null;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_billingAddress_country {
+export interface FulfillOrder_orderFulfill_order_billingAddress_country {
   __typename: "CountryDisplay";
   code: string;
   country: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_billingAddress {
+export interface FulfillOrder_orderFulfill_order_billingAddress {
   __typename: "Address";
   city: string;
   cityArea: string;
   companyName: string;
-  country: FulfillOrder_orderFulfillmentCreate_order_billingAddress_country;
+  country: FulfillOrder_orderFulfill_order_billingAddress_country;
   countryArea: string;
   firstName: string;
   id: string;
@@ -36,13 +36,13 @@ export interface FulfillOrder_orderFulfillmentCreate_order_billingAddress {
   streetAddress2: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_events_user {
+export interface FulfillOrder_orderFulfill_order_events_user {
   __typename: "User";
   id: string;
   email: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_events {
+export interface FulfillOrder_orderFulfill_order_events {
   __typename: "OrderEvent";
   id: string;
   amount: number | null;
@@ -52,33 +52,33 @@ export interface FulfillOrder_orderFulfillmentCreate_order_events {
   message: string | null;
   quantity: number | null;
   type: OrderEventsEnum | null;
-  user: FulfillOrder_orderFulfillmentCreate_order_events_user | null;
+  user: FulfillOrder_orderFulfill_order_events_user | null;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_gross {
+export interface FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice_gross {
   __typename: "Money";
   amount: number;
   currency: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_net {
+export interface FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice_net {
   __typename: "Money";
   amount: number;
   currency: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice {
+export interface FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice {
   __typename: "TaxedMoney";
-  gross: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_gross;
+  gross: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice_gross;
-  net: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_net;
+  net: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice_net;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_thumbnail {
+export interface FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_thumbnail {
   __typename: "Image";
   url: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine {
+export interface FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine {
   __typename: "OrderLine";
   id: string;
   isShippingRequired: boolean;
@@ -86,50 +86,50 @@ export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_or
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice | null;
+  unitPrice: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_unitPrice | null;
-  thumbnail: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_thumbnail | null;
+  thumbnail: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine_thumbnail | null;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines {
+export interface FulfillOrder_orderFulfill_order_fulfillments_lines {
   __typename: "FulfillmentLine";
   id: string;
   quantity: number;
-  orderLine: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine | null;
+  orderLine: FulfillOrder_orderFulfill_order_fulfillments_lines_orderLine | null;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments {
+export interface FulfillOrder_orderFulfill_order_fulfillments {
   __typename: "Fulfillment";
   id: string;
-  lines: (FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines | null)[] | null;
+  lines: (FulfillOrder_orderFulfill_order_fulfillments_lines | null)[] | null;
   fulfillmentOrder: number;
   status: FulfillmentStatus;
   trackingNumber: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice_gross {
+export interface FulfillOrder_orderFulfill_order_lines_unitPrice_gross {
   __typename: "Money";
   amount: number;
   currency: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice_net {
+export interface FulfillOrder_orderFulfill_order_lines_unitPrice_net {
   __typename: "Money";
   amount: number;
   currency: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice {
+export interface FulfillOrder_orderFulfill_order_lines_unitPrice {
   __typename: "TaxedMoney";
-  gross: FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice_gross;
+  gross: FulfillOrder_orderFulfill_order_lines_unitPrice_gross;
-  net: FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice_net;
+  net: FulfillOrder_orderFulfill_order_lines_unitPrice_net;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_lines_thumbnail {
+export interface FulfillOrder_orderFulfill_order_lines_thumbnail {
   __typename: "Image";
   url: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_lines {
+export interface FulfillOrder_orderFulfill_order_lines {
   __typename: "OrderLine";
   id: string;
   isShippingRequired: boolean;
@@ -137,22 +137,22 @@ export interface FulfillOrder_orderFulfillmentCreate_order_lines {
   productSku: string;
   quantity: number;
   quantityFulfilled: number;
-  unitPrice: FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice | null;
+  unitPrice: FulfillOrder_orderFulfill_order_lines_unitPrice | null;
-  thumbnail: FulfillOrder_orderFulfillmentCreate_order_lines_thumbnail | null;
+  thumbnail: FulfillOrder_orderFulfill_order_lines_thumbnail | null;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_shippingAddress_country {
+export interface FulfillOrder_orderFulfill_order_shippingAddress_country {
   __typename: "CountryDisplay";
   code: string;
   country: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_shippingAddress {
+export interface FulfillOrder_orderFulfill_order_shippingAddress {
   __typename: "Address";
   city: string;
   cityArea: string;
   companyName: string;
-  country: FulfillOrder_orderFulfillmentCreate_order_shippingAddress_country;
+  country: FulfillOrder_orderFulfill_order_shippingAddress_country;
   countryArea: string;
   firstName: string;
   id: string;
@@ -163,120 +163,120 @@ export interface FulfillOrder_orderFulfillmentCreate_order_shippingAddress {
   streetAddress2: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_shippingMethod {
+export interface FulfillOrder_orderFulfill_order_shippingMethod {
   __typename: "ShippingMethod";
   id: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_shippingPrice_gross {
+export interface FulfillOrder_orderFulfill_order_shippingPrice_gross {
   __typename: "Money";
   amount: number;
   currency: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_shippingPrice {
+export interface FulfillOrder_orderFulfill_order_shippingPrice {
   __typename: "TaxedMoney";
-  gross: FulfillOrder_orderFulfillmentCreate_order_shippingPrice_gross;
+  gross: FulfillOrder_orderFulfill_order_shippingPrice_gross;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_subtotal_gross {
+export interface FulfillOrder_orderFulfill_order_subtotal_gross {
   __typename: "Money";
   amount: number;
   currency: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_subtotal {
+export interface FulfillOrder_orderFulfill_order_subtotal {
   __typename: "TaxedMoney";
-  gross: FulfillOrder_orderFulfillmentCreate_order_subtotal_gross;
+  gross: FulfillOrder_orderFulfill_order_subtotal_gross;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_total_gross {
+export interface FulfillOrder_orderFulfill_order_total_gross {
   __typename: "Money";
   amount: number;
   currency: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_total_tax {
+export interface FulfillOrder_orderFulfill_order_total_tax {
   __typename: "Money";
   amount: number;
   currency: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_total {
+export interface FulfillOrder_orderFulfill_order_total {
   __typename: "TaxedMoney";
-  gross: FulfillOrder_orderFulfillmentCreate_order_total_gross;
+  gross: FulfillOrder_orderFulfill_order_total_gross;
-  tax: FulfillOrder_orderFulfillmentCreate_order_total_tax;
+  tax: FulfillOrder_orderFulfill_order_total_tax;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_totalAuthorized {
+export interface FulfillOrder_orderFulfill_order_totalAuthorized {
   __typename: "Money";
   amount: number;
   currency: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_totalCaptured {
+export interface FulfillOrder_orderFulfill_order_totalCaptured {
   __typename: "Money";
   amount: number;
   currency: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_user {
+export interface FulfillOrder_orderFulfill_order_user {
   __typename: "User";
   id: string;
   email: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_availableShippingMethods_price {
+export interface FulfillOrder_orderFulfill_order_availableShippingMethods_price {
   __typename: "Money";
   amount: number;
   currency: string;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order_availableShippingMethods {
+export interface FulfillOrder_orderFulfill_order_availableShippingMethods {
   __typename: "ShippingMethod";
   id: string;
   name: string;
-  price: FulfillOrder_orderFulfillmentCreate_order_availableShippingMethods_price | null;
+  price: FulfillOrder_orderFulfill_order_availableShippingMethods_price | null;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate_order {
+export interface FulfillOrder_orderFulfill_order {
   __typename: "Order";
   id: string;
-  billingAddress: FulfillOrder_orderFulfillmentCreate_order_billingAddress | null;
+  billingAddress: FulfillOrder_orderFulfill_order_billingAddress | null;
   canFinalize: boolean;
   created: any;
   customerNote: string;
-  events: (FulfillOrder_orderFulfillmentCreate_order_events | null)[] | null;
+  events: (FulfillOrder_orderFulfill_order_events | null)[] | null;
-  fulfillments: (FulfillOrder_orderFulfillmentCreate_order_fulfillments | null)[];
+  fulfillments: (FulfillOrder_orderFulfill_order_fulfillments | null)[];
-  lines: (FulfillOrder_orderFulfillmentCreate_order_lines | null)[];
+  lines: (FulfillOrder_orderFulfill_order_lines | null)[];
   number: string | null;
   paymentStatus: PaymentChargeStatusEnum | null;
-  shippingAddress: FulfillOrder_orderFulfillmentCreate_order_shippingAddress | null;
+  shippingAddress: FulfillOrder_orderFulfill_order_shippingAddress | null;
-  shippingMethod: FulfillOrder_orderFulfillmentCreate_order_shippingMethod | null;
+  shippingMethod: FulfillOrder_orderFulfill_order_shippingMethod | null;
   shippingMethodName: string | null;
-  shippingPrice: FulfillOrder_orderFulfillmentCreate_order_shippingPrice | null;
+  shippingPrice: FulfillOrder_orderFulfill_order_shippingPrice | null;
   status: OrderStatus;
-  subtotal: FulfillOrder_orderFulfillmentCreate_order_subtotal | null;
+  subtotal: FulfillOrder_orderFulfill_order_subtotal | null;
-  total: FulfillOrder_orderFulfillmentCreate_order_total | null;
+  total: FulfillOrder_orderFulfill_order_total | null;
   actions: (OrderAction | null)[];
-  totalAuthorized: FulfillOrder_orderFulfillmentCreate_order_totalAuthorized | null;
+  totalAuthorized: FulfillOrder_orderFulfill_order_totalAuthorized | null;
-  totalCaptured: FulfillOrder_orderFulfillmentCreate_order_totalCaptured | null;
+  totalCaptured: FulfillOrder_orderFulfill_order_totalCaptured | null;
-  user: FulfillOrder_orderFulfillmentCreate_order_user | null;
+  user: FulfillOrder_orderFulfill_order_user | null;
   userEmail: string | null;
-  availableShippingMethods: (FulfillOrder_orderFulfillmentCreate_order_availableShippingMethods | null)[] | null;
+  availableShippingMethods: (FulfillOrder_orderFulfill_order_availableShippingMethods | null)[] | null;
 }
 
-export interface FulfillOrder_orderFulfillmentCreate {
+export interface FulfillOrder_orderFulfill {
-  __typename: "FulfillmentCreate";
+  __typename: "OrderFulfill";
-  errors: FulfillOrder_orderFulfillmentCreate_errors[];
+  errors: FulfillOrder_orderFulfill_errors[];
-  order: FulfillOrder_orderFulfillmentCreate_order | null;
+  order: FulfillOrder_orderFulfill_order | null;
 }
 
 export interface FulfillOrder {
-  orderFulfillmentCreate: FulfillOrder_orderFulfillmentCreate | null;
+  orderFulfill: FulfillOrder_orderFulfill | null;
 }
 
 export interface FulfillOrderVariables {
   orderId: string;
-  input: FulfillmentCreateInput;
+  input: OrderFulfillInput;
 }

src/orders/types/OrderCreateFulfillment.ts

@@ -1,282 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// This file was automatically generated and should not be edited.
-
-import { FulfillmentCreateInput, OrderErrorCode, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction } from "./../../types/globalTypes";
-
-// ====================================================
-// GraphQL mutation operation: OrderCreateFulfillment
-// ====================================================
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_errors {
-  __typename: "OrderError";
-  code: OrderErrorCode;
-  field: string | null;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_billingAddress_country {
-  __typename: "CountryDisplay";
-  code: string;
-  country: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_billingAddress {
-  __typename: "Address";
-  city: string;
-  cityArea: string;
-  companyName: string;
-  country: OrderCreateFulfillment_orderFulfillmentCreate_order_billingAddress_country;
-  countryArea: string;
-  firstName: string;
-  id: string;
-  lastName: string;
-  phone: string | null;
-  postalCode: string;
-  streetAddress1: string;
-  streetAddress2: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_events_user {
-  __typename: "User";
-  id: string;
-  email: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_events {
-  __typename: "OrderEvent";
-  id: string;
-  amount: number | null;
-  date: any | null;
-  email: string | null;
-  emailType: OrderEventsEmailsEnum | null;
-  message: string | null;
-  quantity: number | null;
-  type: OrderEventsEnum | null;
-  user: OrderCreateFulfillment_orderFulfillmentCreate_order_events_user | null;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_gross {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_net {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice {
-  __typename: "TaxedMoney";
-  gross: OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_gross;
-  net: OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_net;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine_thumbnail {
-  __typename: "Image";
-  url: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine {
-  __typename: "OrderLine";
-  id: string;
-  isShippingRequired: boolean;
-  productName: string;
-  productSku: string;
-  quantity: number;
-  quantityFulfilled: number;
-  unitPrice: OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice | null;
-  thumbnail: OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine_thumbnail | null;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines {
-  __typename: "FulfillmentLine";
-  id: string;
-  quantity: number;
-  orderLine: OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines_orderLine | null;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments {
-  __typename: "Fulfillment";
-  id: string;
-  lines: (OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments_lines | null)[] | null;
-  fulfillmentOrder: number;
-  status: FulfillmentStatus;
-  trackingNumber: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_lines_unitPrice_gross {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_lines_unitPrice_net {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_lines_unitPrice {
-  __typename: "TaxedMoney";
-  gross: OrderCreateFulfillment_orderFulfillmentCreate_order_lines_unitPrice_gross;
-  net: OrderCreateFulfillment_orderFulfillmentCreate_order_lines_unitPrice_net;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_lines_thumbnail {
-  __typename: "Image";
-  url: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_lines {
-  __typename: "OrderLine";
-  id: string;
-  isShippingRequired: boolean;
-  productName: string;
-  productSku: string;
-  quantity: number;
-  quantityFulfilled: number;
-  unitPrice: OrderCreateFulfillment_orderFulfillmentCreate_order_lines_unitPrice | null;
-  thumbnail: OrderCreateFulfillment_orderFulfillmentCreate_order_lines_thumbnail | null;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_shippingAddress_country {
-  __typename: "CountryDisplay";
-  code: string;
-  country: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_shippingAddress {
-  __typename: "Address";
-  city: string;
-  cityArea: string;
-  companyName: string;
-  country: OrderCreateFulfillment_orderFulfillmentCreate_order_shippingAddress_country;
-  countryArea: string;
-  firstName: string;
-  id: string;
-  lastName: string;
-  phone: string | null;
-  postalCode: string;
-  streetAddress1: string;
-  streetAddress2: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_shippingMethod {
-  __typename: "ShippingMethod";
-  id: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_shippingPrice_gross {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_shippingPrice {
-  __typename: "TaxedMoney";
-  gross: OrderCreateFulfillment_orderFulfillmentCreate_order_shippingPrice_gross;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_subtotal_gross {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_subtotal {
-  __typename: "TaxedMoney";
-  gross: OrderCreateFulfillment_orderFulfillmentCreate_order_subtotal_gross;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_total_gross {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_total_tax {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_total {
-  __typename: "TaxedMoney";
-  gross: OrderCreateFulfillment_orderFulfillmentCreate_order_total_gross;
-  tax: OrderCreateFulfillment_orderFulfillmentCreate_order_total_tax;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_totalAuthorized {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_totalCaptured {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_user {
-  __typename: "User";
-  id: string;
-  email: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_availableShippingMethods_price {
-  __typename: "Money";
-  amount: number;
-  currency: string;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order_availableShippingMethods {
-  __typename: "ShippingMethod";
-  id: string;
-  name: string;
-  price: OrderCreateFulfillment_orderFulfillmentCreate_order_availableShippingMethods_price | null;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate_order {
-  __typename: "Order";
-  id: string;
-  billingAddress: OrderCreateFulfillment_orderFulfillmentCreate_order_billingAddress | null;
-  canFinalize: boolean;
-  created: any;
-  customerNote: string;
-  events: (OrderCreateFulfillment_orderFulfillmentCreate_order_events | null)[] | null;
-  fulfillments: (OrderCreateFulfillment_orderFulfillmentCreate_order_fulfillments | null)[];
-  lines: (OrderCreateFulfillment_orderFulfillmentCreate_order_lines | null)[];
-  number: string | null;
-  paymentStatus: PaymentChargeStatusEnum | null;
-  shippingAddress: OrderCreateFulfillment_orderFulfillmentCreate_order_shippingAddress | null;
-  shippingMethod: OrderCreateFulfillment_orderFulfillmentCreate_order_shippingMethod | null;
-  shippingMethodName: string | null;
-  shippingPrice: OrderCreateFulfillment_orderFulfillmentCreate_order_shippingPrice | null;
-  status: OrderStatus;
-  subtotal: OrderCreateFulfillment_orderFulfillmentCreate_order_subtotal | null;
-  total: OrderCreateFulfillment_orderFulfillmentCreate_order_total | null;
-  actions: (OrderAction | null)[];
-  totalAuthorized: OrderCreateFulfillment_orderFulfillmentCreate_order_totalAuthorized | null;
-  totalCaptured: OrderCreateFulfillment_orderFulfillmentCreate_order_totalCaptured | null;
-  user: OrderCreateFulfillment_orderFulfillmentCreate_order_user | null;
-  userEmail: string | null;
-  availableShippingMethods: (OrderCreateFulfillment_orderFulfillmentCreate_order_availableShippingMethods | null)[] | null;
-}
-
-export interface OrderCreateFulfillment_orderFulfillmentCreate {
-  __typename: "FulfillmentCreate";
-  errors: OrderCreateFulfillment_orderFulfillmentCreate_errors[];
-  order: OrderCreateFulfillment_orderFulfillmentCreate_order | null;
-}
-
-export interface OrderCreateFulfillment {
-  orderFulfillmentCreate: OrderCreateFulfillment_orderFulfillmentCreate | null;
-}
-
-export interface OrderCreateFulfillmentVariables {
-  order: string;
-  input: FulfillmentCreateInput;
-}

src/orders/views/OrderDetails/OrderDetailsMessages.tsx

@@ -7,7 +7,6 @@ import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandl
 import { OrderAddNote } from "../../types/OrderAddNote";
 import { OrderCancel } from "../../types/OrderCancel";
 import { OrderCapture } from "../../types/OrderCapture";
-import { OrderCreateFulfillment } from "../../types/OrderCreateFulfillment";
 import { OrderDraftCancel } from "../../types/OrderDraftCancel";
 import { OrderDraftFinalize } from "../../types/OrderDraftFinalize";
 import { OrderDraftUpdate } from "../../types/OrderDraftUpdate";
@@ -31,7 +30,6 @@ interface OrderDetailsMessages {
     handleNoteAdd: (data: OrderAddNote) => void;
     handleOrderCancel: (data: OrderCancel) => void;
     handleOrderFulfillmentCancel: (data: OrderFulfillmentCancel) => void;
-    handleOrderFulfillmentCreate: (data: OrderCreateFulfillment) => void;
     handleOrderFulfillmentUpdate: (
       data: OrderFulfillmentUpdateTracking
     ) => void;
@@ -86,17 +84,6 @@ export const OrderDetailsMessages: React.FC<OrderDetailsMessages> = ({
       closeModal();
     }
   };
-  const handleOrderFulfillmentCreate = (data: OrderCreateFulfillment) => {
-    const errs = data.orderFulfillmentCreate?.errors;
-    if (errs.length === 0) {
-      pushMessage({
-        text: intl.formatMessage({
-          defaultMessage: "Items successfully fulfilled"
-        })
-      });
-      closeModal();
-    }
-  };
   const handleOrderMarkAsPaid = (data: OrderMarkAsPaid) => {
     const errs = data.orderMarkAsPaid?.errors;
     if (errs.length === 0) {
@@ -256,7 +243,6 @@ export const OrderDetailsMessages: React.FC<OrderDetailsMessages> = ({
     handleNoteAdd,
     handleOrderCancel,
     handleOrderFulfillmentCancel,
-    handleOrderFulfillmentCreate,
     handleOrderFulfillmentUpdate,
     handleOrderLineDelete,
     handleOrderLineUpdate,

src/orders/views/OrderDetails/index.tsx

@@ -125,9 +125,6 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
             {orderMessages => (
               <OrderOperations
                 order={id}
-                onOrderFulfillmentCreate={
-                  orderMessages.handleOrderFulfillmentCreate
-                }
                 onNoteAdd={orderMessages.handleNoteAdd}
                 onOrderCancel={orderMessages.handleOrderCancel}
                 onOrderVoid={orderMessages.handleOrderVoid}

src/orders/views/OrderFulfill/OrderFulfill.tsx

@@ -32,7 +32,7 @@ const OrderFulfill: React.FC<OrderFulfillProps> = ({ orderId }) => {
   });
   const [fulfillOrder, fulfillOrderOpts] = useOrderFulfill({
     onCompleted: data => {
-      if (data.orderFulfillmentCreate.errors.length === 0) {
+      if (data.orderFulfill.errors.length === 0) {
         navigate(orderUrl(orderId));
         notify({
           text: intl.formatMessage({
@@ -71,7 +71,10 @@ const OrderFulfill: React.FC<OrderFulfillProps> = ({ orderId }) => {
           fulfillOrder({
             variables: {
               input: {
-                lines: formData.items.map(line => line.value),
+                lines: formData.items.map(line => ({
+                  orderLineId: line.id,
+                  stocks: line.value
+                })),
                 notifyCustomer: formData.sendInfo
               },
               orderId

src/types/globalTypes.ts

@@ -456,6 +456,7 @@ export enum OrderErrorCode {
   CANNOT_DELETE = "CANNOT_DELETE",
   CANNOT_REFUND = "CANNOT_REFUND",
   CAPTURE_INACTIVE_PAYMENT = "CAPTURE_INACTIVE_PAYMENT",
+  DUPLICATED_INPUT_ITEM = "DUPLICATED_INPUT_ITEM",
   FULFILL_ORDER_LINE = "FULFILL_ORDER_LINE",
   GRAPHQL_ERROR = "GRAPHQL_ERROR",
   INSUFFICIENT_STOCK = "INSUFFICIENT_STOCK",
@@ -790,6 +791,7 @@ export enum WebhookEventTypeEnum {
 }
 
 export enum WebhookSortField {
+  APP = "APP",
   NAME = "NAME",
   SERVICE_ACCOUNT = "SERVICE_ACCOUNT",
   TARGET_URL = "TARGET_URL",
@@ -997,17 +999,6 @@ export interface FulfillmentCancelInput {
   restock?: boolean | null;
 }
 
-export interface FulfillmentCreateInput {
-  trackingNumber?: string | null;
-  notifyCustomer?: boolean | null;
-  lines: (FulfillmentLineInput | null)[];
-}
-
-export interface FulfillmentLineInput {
-  orderLineId?: string | null;
-  quantity?: number | null;
-}
-
 export interface FulfillmentUpdateTrackingInput {
   trackingNumber?: string | null;
   notifyCustomer?: boolean | null;
@@ -1074,6 +1065,21 @@ export interface OrderFilterInput {
   search?: string | null;
 }
 
+export interface OrderFulfillInput {
+  lines: OrderFulfillLineInput[];
+  notifyCustomer?: boolean | null;
+}
+
+export interface OrderFulfillLineInput {
+  orderLineId?: string | null;
+  stocks: OrderFulfillStockInput[];
+}
+
+export interface OrderFulfillStockInput {
+  quantity?: number | null;
+  warehouse?: string | null;
+}
+
 export interface OrderLineCreateInput {
   quantity: number;
   variantId: string;
@@ -1478,6 +1484,7 @@ export interface WebhookCreateInput {
   targetUrl?: string | null;
   events?: (WebhookEventTypeEnum | null)[] | null;
   serviceAccount?: string | null;
+  app?: string | null;
   isActive?: boolean | null;
   secretKey?: string | null;
 }
@@ -1497,6 +1504,7 @@ export interface WebhookUpdateInput {
   targetUrl?: string | null;
   events?: (WebhookEventTypeEnum | null)[] | null;
   serviceAccount?: string | null;
+  app?: string | null;
   isActive?: boolean | null;
   secretKey?: string | null;
 }