Merge pull request #523 from mirumee/fix/untracked-products-fulfiillment

Handle untracked products

CHANGELOG.md

@@ -51,6 +51,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix minor visual bugs - #521 by @dominik-zeglen
 - Handle session expiration - #520 by @dominik-zeglen
 - Update product stock management to newest design - #515 by @dominik-zeglen
+- Handle untracked products - #523 by @dominik-zeglen
 
 ## 2.0.0
 

locale/defaultMessages.json

@@ -2768,10 +2768,6 @@
     "context": "order total price",
     "string": "Total"
   },
-  "src_dot_orders_dot_components_dot_OrderProductAddDialog_dot_1542417144": {
-    "context": "dialog header",
-    "string": "Create Product"
-  },
   "src_dot_orders_dot_components_dot_OrderProductAddDialog_dot_2272209368": {
     "context": "variant sku",
     "string": "SKU {sku}"
@@ -2779,6 +2775,10 @@
   "src_dot_orders_dot_components_dot_OrderProductAddDialog_dot_2336947364": {
     "string": "Search by product name, attribute, product type etc..."
   },
+  "src_dot_orders_dot_components_dot_OrderProductAddDialog_dot_2775402904": {
+    "context": "dialog header",
+    "string": "Add Product"
+  },
   "src_dot_orders_dot_components_dot_OrderProductAddDialog_dot_2850255786": {
     "string": "Search Products"
   },

src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx

@@ -35,80 +35,86 @@ 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";
+import { CSSProperties } from "@material-ui/styles";
 
 type ClassKey =
   | "actionBar"
   | "table"
   | "colName"
   | "colQuantity"
-  | "colQuantityContent"
   | "colQuantityHeader"
   | "colQuantityTotal"
   | "colSku"
   | "error"
   | "full"
   | "quantityInnerInput"
-  | "quantityInput"
+  | "quantityInnerInputNoRemaining"
   | "remainingQuantity";
 const useStyles = makeStyles<Theme, OrderFulfillPageProps, ClassKey>(
-  theme => ({
-    [theme.breakpoints.up("lg")]: {
+  theme => {
+    const inputPadding: CSSProperties = {
+      paddingBottom: theme.spacing(2),
+      paddingTop: theme.spacing(2)
+    };
+
+    return {
+      [theme.breakpoints.up("lg")]: {
+        colName: {
+          width: ({ warehouses }) => (warehouses?.length > 3 ? 250 : "auto")
+        }
+      },
+      [theme.breakpoints.only("md")]: {
+        colName: {
+          width: ({ warehouses }) => (warehouses?.length > 2 ? 250 : "auto")
+        }
+      },
+      actionBar: {
+        flexDirection: "row",
+        paddingLeft: theme.spacing(2) + 2
+      },
       colName: {
-        width: ({ warehouses }) => (warehouses?.length > 3 ? 250 : "auto")
+        width: 250
+      },
+      colQuantity: {
+        textAlign: "right",
+        width: 210
+      },
+      colQuantityHeader: {
+        textAlign: "right"
+      },
+      colQuantityTotal: {
+        textAlign: "right",
+        width: 180
+      },
+      colSku: {
+        textAlign: "right",
+        textOverflow: "ellipsis",
+        width: 150
+      },
+      error: {
+        color: theme.palette.error.main
+      },
+      full: {
+        fontWeight: 600
+      },
+      quantityInnerInput: {
+        ...inputPadding
+      },
+      quantityInnerInputNoRemaining: {
+        paddingRight: 0
+      },
+      remainingQuantity: {
+        ...inputPadding,
+        color: theme.palette.text.secondary,
+        whiteSpace: "nowrap"
+      },
+      table: {
+        "&&": {
+          tableLayout: "fixed"
+        }
       }
-    },
-    [theme.breakpoints.only("md")]: {
-      colName: {
-        width: ({ warehouses }) => (warehouses?.length > 2 ? 250 : "auto")
-      }
-    },
-    actionBar: {
-      flexDirection: "row",
-      paddingLeft: theme.spacing(2) + 2
-    },
-    colName: {
-      width: 250
-    },
-    colQuantity: {
-      width: 210
-    },
-    colQuantityContent: {
-      alignItems: "center",
-      display: "inline-flex"
-    },
-    colQuantityHeader: {
-      textAlign: "right"
-    },
-    colQuantityTotal: {
-      textAlign: "right",
-      width: 180
-    },
-    colSku: {
-      textAlign: "right",
-      textOverflow: "ellipsis",
-      width: 150
-    },
-    error: {
-      color: theme.palette.error.main
-    },
-    full: {
-      fontWeight: 600
-    },
-    quantityInnerInput: {
-      padding: "16px 0 14px 12px"
-    },
-    quantityInput: {
-      width: 100
-    },
-    remainingQuantity: {
-      marginLeft: theme.spacing()
-    },
-    table: {
-      "&&": {
-        tableLayout: "fixed"
-      }
-    }
-  }),
+    };
+  },
   { name: "OrderFulfillPage" }
 );
 
@@ -343,50 +349,64 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
                                 className={classes.colQuantity}
                                 key={warehouseStock.id}
                               >
-                                <div className={classes.colQuantityContent}>
-                                  <TextField
-                                    type="number"
-                                    inputProps={{
-                                      className: classes.quantityInnerInput,
-                                      max: warehouseStock.quantity,
-                                      min: 0,
-                                      style: { textAlign: "right" }
-                                    }}
-                                    className={classes.quantityInput}
-                                    value={formsetStock.quantity}
-                                    onChange={event =>
-                                      formsetChange(
-                                        line.id,
-                                        update(
-                                          {
-                                            quantity: parseInt(
-                                              event.target.value,
-                                              10
-                                            ),
-                                            warehouse: warehouse.id
-                                          },
-                                          formsetData[lineIndex].value,
-                                          (a, b) => a.warehouse === b.warehouse
-                                        )
+                                <TextField
+                                  type="number"
+                                  inputProps={{
+                                    className: classNames(
+                                      classes.quantityInnerInput,
+                                      {
+                                        [classes.quantityInnerInputNoRemaining]: !line
+                                          .variant.trackInventory
+                                      }
+                                    ),
+                                    max:
+                                      line.variant.trackInventory &&
+                                      warehouseStock.quantity,
+                                    min: 0,
+                                    style: { textAlign: "right" }
+                                  }}
+                                  fullWidth
+                                  value={formsetStock.quantity}
+                                  onChange={event =>
+                                    formsetChange(
+                                      line.id,
+                                      update(
+                                        {
+                                          quantity: parseInt(
+                                            event.target.value,
+                                            10
+                                          ),
+                                          warehouse: warehouse.id
+                                        },
+                                        formsetData[lineIndex].value,
+                                        (a, b) => a.warehouse === b.warehouse
                                       )
-                                    }
-                                    error={
-                                      overfulfill ||
+                                    )
+                                  }
+                                  error={
+                                    overfulfill ||
+                                    (line.variant.trackInventory &&
                                       formsetStock.quantity >
-                                        availableQuantity ||
-                                      !!errors?.find(
-                                        err =>
-                                          err.warehouse === warehouse.id &&
-                                          err.orderLine === line.id &&
-                                          err.code ===
-                                            OrderErrorCode.INSUFFICIENT_STOCK
-                                      )
-                                    }
-                                  />
-                                  <div className={classes.remainingQuantity}>
-                                    / {availableQuantity}
-                                  </div>
-                                </div>
+                                        availableQuantity) ||
+                                    !!errors?.find(
+                                      err =>
+                                        err.warehouse === warehouse.id &&
+                                        err.orderLine === line.id &&
+                                        err.code ===
+                                          OrderErrorCode.INSUFFICIENT_STOCK
+                                    )
+                                  }
+                                  InputProps={{
+                                    endAdornment: line.variant
+                                      .trackInventory && (
+                                      <div
+                                        className={classes.remainingQuantity}
+                                      >
+                                        / {availableQuantity}
+                                      </div>
+                                    )
+                                  }}
+                                />
                               </TableCell>
                             );
                           })}

src/orders/components/OrderFulfillPage/fixtures.ts

@@ -61,7 +61,8 @@ export const orderToFulfill: OrderFulfillData_order = {
             quantity: 1220,
             quantityAllocated: 7
           }
-        ]
+        ],
+        trackInventory: false
       },
       thumbnail: {
         __typename: "Image",
@@ -114,7 +115,8 @@ export const orderToFulfill: OrderFulfillData_order = {
             quantity: 760,
             quantityAllocated: 4
           }
-        ]
+        ],
+        trackInventory: true
       },
       thumbnail: {
         __typename: "Image",
@@ -160,7 +162,8 @@ export const orderToFulfill: OrderFulfillData_order = {
             quantity: 587,
             quantityAllocated: 1
           }
-        ]
+        ],
+        trackInventory: true
       },
       thumbnail: {
         __typename: "Image",

src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx

@@ -208,7 +208,7 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
     >
       <DialogTitle>
         <FormattedMessage
-          defaultMessage="Create Product"
+          defaultMessage="Add Product"
           description="dialog header"
         />
       </DialogTitle>

src/orders/queries.ts

@@ -371,6 +371,7 @@ const orderFulfillData = gql`
             quantity
             quantityAllocated
           }
+          trackInventory
         }
         thumbnail(size: 64) {
           url

src/orders/types/OrderFulfillData.ts

@@ -37,6 +37,7 @@ export interface OrderFulfillData_order_lines_variant {
   sku: string;
   attributes: OrderFulfillData_order_lines_variant_attributes[];
   stocks: (OrderFulfillData_order_lines_variant_stocks | null)[] | null;
+  trackInventory: boolean;
 }
 
 export interface OrderFulfillData_order_lines_thumbnail {