Add fulfillment view

src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx

@@ -25,6 +25,8 @@ import ResponsiveTable from "@saleor/components/ResponsiveTable";
 import makeStyles from "@material-ui/core/styles/makeStyles";
 import { update } from "@saleor/utils/lists";
 import ControlledCheckbox from "@saleor/components/ControlledCheckbox";
+import { renderCollection } from "@saleor/misc";
+import Skeleton from "@saleor/components/Skeleton";
 
 const useStyles = makeStyles(
   theme => ({
@@ -86,7 +88,7 @@ export interface OrderFulfillPageProps {
   order: OrderFulfillData_order;
   saveButtonBar: ConfirmButtonTransitionState;
   warehouses: WarehouseFragment[];
-  onBack: () => undefined;
+  onBack: () => void;
   onSubmit: (data: OrderFulfillSubmitData) => void;
 }
 
@@ -167,7 +169,7 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = ({
                         description="product's sku"
                       />
                     </TableCell>
-                    {warehouses.map(warehouse => (
+                    {warehouses?.map(warehouse => (
                       <TableCell
                         key={warehouse.id}
                         className={classes.colQuantity}
@@ -184,7 +186,29 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = ({
                   </TableRow>
                 </TableHead>
                 <TableBody>
-                  {order?.lines.map((line, lineIndex) => {
+                  {renderCollection(order?.lines, (line, lineIndex) => {
+                    if (!line) {
+                      return (
+                        <TableRow>
+                          <TableCellAvatar className={classes.colName}>
+                            <Skeleton />
+                          </TableCellAvatar>
+                          <TableCell className={classes.colSku}>
+                            <Skeleton />
+                          </TableCell>
+                          {warehouses?.map(() => (
+                            <TableCell className={classes.colQuantity}>
+                              <Skeleton />
+                            </TableCell>
+                          ))}
+                          <TableCell className={classes.colQuantityTotal}>
+                            {" "}
+                            <Skeleton />
+                          </TableCell>
+                        </TableRow>
+                      );
+                    }
+
                     const remainingQuantity =
                       line.quantity - line.quantityFulfilled;
                     const quantityToFulfill = formsetData[
@@ -216,7 +240,7 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = ({
                         <TableCell className={classes.colSku}>
                           {line.variant.sku}
                         </TableCell>
-                        {warehouses.map(warehouse => {
+                        {warehouses?.map(warehouse => {
                           const warehouseStock = line.variant.stocks.find(
                             stock => stock.warehouse.id === warehouse.id
                           );

src/orders/index.tsx

@@ -14,9 +14,11 @@ import {
   orderPath,
   OrderUrlQueryParams,
   OrderDraftListUrlSortField,
-  OrderListUrlSortField
+  OrderListUrlSortField,
+  orderFulfillPath
 } from "./urls";
 import OrderDetailsComponent from "./views/OrderDetails";
+import OrderFulfillComponent from "./views/OrderFulfill";
 import OrderDraftListComponent from "./views/OrderDraftList";
 import OrderListComponent from "./views/OrderList";
 
@@ -57,6 +59,10 @@ const OrderDetails: React.FC<RouteComponentProps<any>> = ({
   );
 };
 
+const OrderFulfill: React.FC<RouteComponentProps<any>> = ({ match }) => (
+  <OrderFulfillComponent orderId={decodeURIComponent(match.params.id)} />
+);
+
 const Component = () => {
   const intl = useIntl();
 
@@ -66,6 +72,7 @@ const Component = () => {
       <Switch>
         <Route exact path={orderDraftListPath} component={OrderDraftList} />
         <Route exact path={orderListPath} component={OrderList} />
+        <Route path={orderFulfillPath(":id")} component={OrderFulfill} />
         <Route path={orderPath(":id")} component={OrderDetails} />
       </Switch>
     </>

src/orders/urls.ts

@@ -97,10 +97,14 @@ export type OrderUrlDialog =
   | "edit-shipping"
   | "edit-shipping-address"
   | "finalize"
-  | "fulfill"
   | "mark-paid"
   | "refund"
   | "void";
 export type OrderUrlQueryParams = Dialog<OrderUrlDialog> & SingleAction;
 export const orderUrl = (id: string, params?: OrderUrlQueryParams) =>
   orderPath(encodeURIComponent(id)) + "?" + stringifyQs(params);
+
+export const orderFulfillPath = (id: string) =>
+  urlJoin(orderPath(id), "fulfill");
+export const orderFulfillUrl = (id: string) =>
+  orderFulfillPath(encodeURIComponent(id));

src/orders/views/OrderDetails/index.tsx

@@ -26,7 +26,6 @@ import OrderDraftFinalizeDialog, {
 } from "../../components/OrderDraftFinalizeDialog";
 import OrderDraftPage from "../../components/OrderDraftPage";
 import OrderFulfillmentCancelDialog from "../../components/OrderFulfillmentCancelDialog";
-import OrderFulfillmentDialog from "../../components/OrderFulfillmentDialog";
 import OrderFulfillmentTrackingDialog from "../../components/OrderFulfillmentTrackingDialog";
 import OrderMarkAsPaidDialog from "../../components/OrderMarkAsPaidDialog/OrderMarkAsPaidDialog";
 import OrderPaymentDialog from "../../components/OrderPaymentDialog";
@@ -40,7 +39,8 @@ import {
   orderListUrl,
   orderUrl,
   OrderUrlQueryParams,
-  OrderUrlDialog
+  OrderUrlDialog,
+  orderFulfillUrl
 } from "../../urls";
 import { OrderDetailsMessages } from "./OrderDetailsMessages";
 
@@ -154,7 +154,6 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                 {({
                   orderAddNote,
                   orderCancel,
-                  orderCreateFulfillment,
                   orderDraftUpdate,
                   orderLinesAdd,
                   orderLineDelete,
@@ -201,7 +200,7 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                           )}
                           userPermissions={user?.userPermissions || []}
                           onOrderCancel={() => openModal("cancel")}
-                          onOrderFulfill={() => openModal("fulfill")}
+                          onOrderFulfill={() => navigate(orderFulfillUrl(id))}
                           onFulfillmentCancel={fulfillmentId =>
                             navigate(
                               orderUrl(id, {
@@ -305,38 +304,6 @@ export const OrderDetails: React.FC<OrderDetailsProps> = ({ id, params }) => {
                             })
                           }
                         />
-                        <OrderFulfillmentDialog
-                          confirmButtonState={
-                            orderCreateFulfillment.opts.status
-                          }
-                          errors={
-                            orderCreateFulfillment.opts.data
-                              ?.orderFulfillmentCreate.errors || []
-                          }
-                          open={params.action === "fulfill"}
-                          lines={maybe(() => order.lines, []).filter(
-                            line => line.quantityFulfilled < line.quantity
-                          )}
-                          onClose={closeModal}
-                          onSubmit={variables =>
-                            orderCreateFulfillment.mutate({
-                              input: {
-                                ...variables,
-                                lines: maybe(() => order.lines, [])
-                                  .filter(
-                                    line =>
-                                      line.quantityFulfilled < line.quantity
-                                  )
-                                  .map((line, lineIndex) => ({
-                                    orderLineId: line.id,
-                                    quantity: variables.lines[lineIndex]
-                                  }))
-                                  .filter(line => line.quantity > 0)
-                              },
-                              order: order.id
-                            })
-                          }
-                        />
                         <OrderFulfillmentCancelDialog
                           confirmButtonState={
                             orderFulfillmentCancel.opts.status

src/orders/views/OrderFulfill/OrderFulfill.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+import { useOrderFulfillData } from "@saleor/orders/queries";
+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";
+
+export interface OrderFulfillProps {
+  orderId: string;
+}
+
+const OrderFulfill: React.FC<OrderFulfillProps> = ({ orderId }) => {
+  const navigate = useNavigator();
+  const { data, loading } = useOrderFulfillData({
+    displayLoader: true,
+    variables: {
+      orderId
+    }
+  });
+  const { data: warehouseData, loading: warehousesLoading } = useWarehouseList({
+    displayLoader: true,
+    variables: {
+      first: 20
+    }
+  });
+
+  return (
+    <OrderFulfillPage
+      disabled={loading || warehousesLoading}
+      onBack={() => navigate(orderUrl(orderId))}
+      onSubmit={() => undefined}
+      order={data?.order}
+      saveButtonBar="default"
+      warehouses={warehouseData?.warehouses.edges.map(edge => edge.node)}
+    />
+  );
+};
+
+OrderFulfill.displayName = "OrderFulfill";
+export default OrderFulfill;

src/orders/views/OrderFulfill/index.ts

@@ -0,0 +1,2 @@
+export * from "./OrderFulfill";
+export { default } from "./OrderFulfill";