wip

src/orders/mutations.ts

@@ -22,6 +22,7 @@ import {
   OrderDraftBulkCancel,
   OrderDraftBulkCancelVariables
 } from "./types/OrderDraftBulkCancel";
+import { FulfillOrder, FulfillOrderVariables } from "./types/FulfillOrder";
 import {
   OrderDraftCancel,
   OrderDraftCancelVariables
@@ -477,3 +478,20 @@ export const TypedOrderLineUpdateMutation = TypedMutation<
   OrderLineUpdate,
   OrderLineUpdateVariables
 >(orderLineUpdateMutation);
+
+const fulfillOrder = gql`
+  mutation FulfillOrder($orderId: ID!, $input: FulfillmentCreateInput!) {
+    orderFulfillmentCreate(order: $orderId, input: $input) {
+      errors: orderErrors {
+        ...OrderErrorFragment
+      }
+      order {
+        ...OrderDetailsFragment
+      }
+    }
+  }
+`;
+export const useOrderFulfill = makeMutation<
+  FulfillOrder,
+  FulfillOrderVariables
+>(fulfillOrder);

src/orders/types/FulfillOrder.ts

@@ -0,0 +1,282 @@
+/* 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: FulfillOrder
+// ====================================================
+
+export interface FulfillOrder_orderFulfillmentCreate_errors {
+  __typename: "OrderError";
+  code: OrderErrorCode;
+  field: string | null;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_billingAddress_country {
+  __typename: "CountryDisplay";
+  code: string;
+  country: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_billingAddress {
+  __typename: "Address";
+  city: string;
+  cityArea: string;
+  companyName: string;
+  country: FulfillOrder_orderFulfillmentCreate_order_billingAddress_country;
+  countryArea: string;
+  firstName: string;
+  id: string;
+  lastName: string;
+  phone: string | null;
+  postalCode: string;
+  streetAddress1: string;
+  streetAddress2: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_events_user {
+  __typename: "User";
+  id: string;
+  email: string;
+}
+
+export interface FulfillOrder_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: FulfillOrder_orderFulfillmentCreate_order_events_user | null;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_gross {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_net {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice {
+  __typename: "TaxedMoney";
+  gross: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_gross;
+  net: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice_net;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_thumbnail {
+  __typename: "Image";
+  url: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine {
+  __typename: "OrderLine";
+  id: string;
+  isShippingRequired: boolean;
+  productName: string;
+  productSku: string;
+  quantity: number;
+  quantityFulfilled: number;
+  unitPrice: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_unitPrice | null;
+  thumbnail: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine_thumbnail | null;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines {
+  __typename: "FulfillmentLine";
+  id: string;
+  quantity: number;
+  orderLine: FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines_orderLine | null;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_fulfillments {
+  __typename: "Fulfillment";
+  id: string;
+  lines: (FulfillOrder_orderFulfillmentCreate_order_fulfillments_lines | null)[] | null;
+  fulfillmentOrder: number;
+  status: FulfillmentStatus;
+  trackingNumber: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice_gross {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice_net {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice {
+  __typename: "TaxedMoney";
+  gross: FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice_gross;
+  net: FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice_net;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_lines_thumbnail {
+  __typename: "Image";
+  url: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_lines {
+  __typename: "OrderLine";
+  id: string;
+  isShippingRequired: boolean;
+  productName: string;
+  productSku: string;
+  quantity: number;
+  quantityFulfilled: number;
+  unitPrice: FulfillOrder_orderFulfillmentCreate_order_lines_unitPrice | null;
+  thumbnail: FulfillOrder_orderFulfillmentCreate_order_lines_thumbnail | null;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_shippingAddress_country {
+  __typename: "CountryDisplay";
+  code: string;
+  country: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_shippingAddress {
+  __typename: "Address";
+  city: string;
+  cityArea: string;
+  companyName: string;
+  country: FulfillOrder_orderFulfillmentCreate_order_shippingAddress_country;
+  countryArea: string;
+  firstName: string;
+  id: string;
+  lastName: string;
+  phone: string | null;
+  postalCode: string;
+  streetAddress1: string;
+  streetAddress2: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_shippingMethod {
+  __typename: "ShippingMethod";
+  id: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_shippingPrice_gross {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_shippingPrice {
+  __typename: "TaxedMoney";
+  gross: FulfillOrder_orderFulfillmentCreate_order_shippingPrice_gross;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_subtotal_gross {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_subtotal {
+  __typename: "TaxedMoney";
+  gross: FulfillOrder_orderFulfillmentCreate_order_subtotal_gross;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_total_gross {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_total_tax {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_total {
+  __typename: "TaxedMoney";
+  gross: FulfillOrder_orderFulfillmentCreate_order_total_gross;
+  tax: FulfillOrder_orderFulfillmentCreate_order_total_tax;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_totalAuthorized {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_totalCaptured {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_user {
+  __typename: "User";
+  id: string;
+  email: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_availableShippingMethods_price {
+  __typename: "Money";
+  amount: number;
+  currency: string;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order_availableShippingMethods {
+  __typename: "ShippingMethod";
+  id: string;
+  name: string;
+  price: FulfillOrder_orderFulfillmentCreate_order_availableShippingMethods_price | null;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate_order {
+  __typename: "Order";
+  id: string;
+  billingAddress: FulfillOrder_orderFulfillmentCreate_order_billingAddress | null;
+  canFinalize: boolean;
+  created: any;
+  customerNote: string;
+  events: (FulfillOrder_orderFulfillmentCreate_order_events | null)[] | null;
+  fulfillments: (FulfillOrder_orderFulfillmentCreate_order_fulfillments | null)[];
+  lines: (FulfillOrder_orderFulfillmentCreate_order_lines | null)[];
+  number: string | null;
+  paymentStatus: PaymentChargeStatusEnum | null;
+  shippingAddress: FulfillOrder_orderFulfillmentCreate_order_shippingAddress | null;
+  shippingMethod: FulfillOrder_orderFulfillmentCreate_order_shippingMethod | null;
+  shippingMethodName: string | null;
+  shippingPrice: FulfillOrder_orderFulfillmentCreate_order_shippingPrice | null;
+  status: OrderStatus;
+  subtotal: FulfillOrder_orderFulfillmentCreate_order_subtotal | null;
+  total: FulfillOrder_orderFulfillmentCreate_order_total | null;
+  actions: (OrderAction | null)[];
+  totalAuthorized: FulfillOrder_orderFulfillmentCreate_order_totalAuthorized | null;
+  totalCaptured: FulfillOrder_orderFulfillmentCreate_order_totalCaptured | null;
+  user: FulfillOrder_orderFulfillmentCreate_order_user | null;
+  userEmail: string | null;
+  availableShippingMethods: (FulfillOrder_orderFulfillmentCreate_order_availableShippingMethods | null)[] | null;
+}
+
+export interface FulfillOrder_orderFulfillmentCreate {
+  __typename: "FulfillmentCreate";
+  errors: FulfillOrder_orderFulfillmentCreate_errors[];
+  order: FulfillOrder_orderFulfillmentCreate_order | null;
+}
+
+export interface FulfillOrder {
+  orderFulfillmentCreate: FulfillOrder_orderFulfillmentCreate | null;
+}
+
+export interface FulfillOrderVariables {
+  orderId: string;
+  input: FulfillmentCreateInput;
+}

src/orders/views/OrderFulfill/OrderFulfill.tsx

@@ -7,6 +7,8 @@ import useNavigator from "@saleor/hooks/useNavigator";
 import { orderUrl } from "@saleor/orders/urls";
 import { useWarehouseList } from "@saleor/warehouses/queries";
 import { WindowTitle } from "@saleor/components/WindowTitle";
+import { useOrderFulfill } from "@saleor/orders/mutations";
+import useNotifier from "@saleor/hooks/useNotifier";
 
 export interface OrderFulfillProps {
   orderId: string;
@@ -14,6 +16,7 @@ export interface OrderFulfillProps {
 
 const OrderFulfill: React.FC<OrderFulfillProps> = ({ orderId }) => {
   const navigate = useNavigator();
+  const notify = useNotifier();
   const intl = useIntl();
   const { data, loading } = useOrderFulfillData({
     displayLoader: true,
@@ -27,6 +30,19 @@ const OrderFulfill: React.FC<OrderFulfillProps> = ({ orderId }) => {
       first: 20
     }
   });
+  const [fulfillOrder, fulfillOrderOpts] = useOrderFulfill({
+    onCompleted: data => {
+      if (data.orderFulfillmentCreate.errors.length === 0) {
+        navigate(orderUrl(orderId));
+        notify({
+          text: intl.formatMessage({
+            defaultMessage: "Fulfilled Items",
+            description: "order fulfilled success message"
+          })
+        });
+      }
+    }
+  });
 
   return (
     <>
@@ -49,9 +65,19 @@ const OrderFulfill: React.FC<OrderFulfillProps> = ({ orderId }) => {
         }
       />
       <OrderFulfillPage
-        disabled={loading || warehousesLoading}
+        disabled={loading || warehousesLoading || fulfillOrderOpts.loading}
         onBack={() => navigate(orderUrl(orderId))}
-        onSubmit={() => undefined}
+        onSubmit={formData =>
+          fulfillOrder({
+            variables: {
+              input: {
+                lines: formData.items.map(line => line.value),
+                notifyCustomer: formData.sendInfo
+              },
+              orderId
+            }
+          })
+        }
         order={data?.order}
         saveButtonBar="default"
         warehouses={warehouseData?.warehouses.edges.map(edge => edge.node)}