Merge branch 'master' into fix/network-error

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
 - Display correct error if there were no graphql errors - #525 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,23 +35,29 @@ 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 => {
+    const inputPadding: CSSProperties = {
+      paddingBottom: theme.spacing(2),
+      paddingTop: theme.spacing(2)
+    };
+
+    return {
       [theme.breakpoints.up("lg")]: {
         colName: {
           width: ({ warehouses }) => (warehouses?.length > 3 ? 250 : "auto")
@@ -70,12 +76,9 @@ const useStyles = makeStyles<Theme, OrderFulfillPageProps, ClassKey>(
         width: 250
       },
       colQuantity: {
+        textAlign: "right",
         width: 210
       },
-    colQuantityContent: {
-      alignItems: "center",
-      display: "inline-flex"
-    },
       colQuantityHeader: {
         textAlign: "right"
       },
@@ -95,20 +98,23 @@ const useStyles = makeStyles<Theme, OrderFulfillPageProps, ClassKey>(
         fontWeight: 600
       },
       quantityInnerInput: {
-      padding: "16px 0 14px 12px"
+        ...inputPadding
       },
-    quantityInput: {
+      quantityInnerInputNoRemaining: {
-      width: 100
+        paddingRight: 0
       },
       remainingQuantity: {
-      marginLeft: theme.spacing()
+        ...inputPadding,
+        color: theme.palette.text.secondary,
+        whiteSpace: "nowrap"
       },
       table: {
         "&&": {
           tableLayout: "fixed"
         }
       }
-  }),
+    };
+  },
   { name: "OrderFulfillPage" }
 );
 
@@ -343,16 +349,23 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
                                 className={classes.colQuantity}
                                 key={warehouseStock.id}
                               >
-                                <div className={classes.colQuantityContent}>
                                 <TextField
                                   type="number"
                                   inputProps={{
-                                      className: classes.quantityInnerInput,
+                                    className: classNames(
-                                      max: warehouseStock.quantity,
+                                      classes.quantityInnerInput,
+                                      {
+                                        [classes.quantityInnerInputNoRemaining]: !line
+                                          .variant.trackInventory
+                                      }
+                                    ),
+                                    max:
+                                      line.variant.trackInventory &&
+                                      warehouseStock.quantity,
                                     min: 0,
                                     style: { textAlign: "right" }
                                   }}
-                                    className={classes.quantityInput}
+                                  fullWidth
                                   value={formsetStock.quantity}
                                   onChange={event =>
                                     formsetChange(
@@ -372,8 +385,9 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
                                   }
                                   error={
                                     overfulfill ||
+                                    (line.variant.trackInventory &&
                                       formsetStock.quantity >
-                                        availableQuantity ||
+                                        availableQuantity) ||
                                     !!errors?.find(
                                       err =>
                                         err.warehouse === warehouse.id &&
@@ -382,11 +396,17 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
                                           OrderErrorCode.INSUFFICIENT_STOCK
                                     )
                                   }
-                                  />
+                                  InputProps={{
-                                  <div className={classes.remainingQuantity}>
+                                    endAdornment: line.variant
+                                      .trackInventory && (
+                                      <div
+                                        className={classes.remainingQuantity}
+                                      >
                                         / {availableQuantity}
                                       </div>
-                                </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 {

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -64450,18 +64450,14 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
                 >
                   <div
-                    class="OrderFulfillPage-colQuantityContent-id"
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                     >
                       <input
                         aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id OrderFulfillPage-quantityInnerInputNoRemaining-id"
-                          max="1217"
                         min="0"
                         style="text-align:right"
                         type="number"
@@ -64483,29 +64479,19 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                       </fieldset>
                     </div>
                   </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 1207
-                    </div>
-                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
                 >
                   <div
-                    class="OrderFulfillPage-colQuantityContent-id"
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                     >
                       <input
                         aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id OrderFulfillPage-quantityInnerInputNoRemaining-id"
-                          max="1217"
                         min="0"
                         style="text-align:right"
                         type="number"
@@ -64527,29 +64513,19 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                       </fieldset>
                     </div>
                   </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 1197
-                    </div>
-                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
                 >
                   <div
-                    class="OrderFulfillPage-colQuantityContent-id"
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                     >
                       <input
                         aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id OrderFulfillPage-quantityInnerInputNoRemaining-id"
-                          max="1217"
                         min="0"
                         style="text-align:right"
                         type="number"
@@ -64571,29 +64547,19 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                       </fieldset>
                     </div>
                   </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 1213
-                    </div>
-                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
                 >
                   <div
-                    class="OrderFulfillPage-colQuantityContent-id"
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                     >
                       <input
                         aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id OrderFulfillPage-quantityInnerInputNoRemaining-id"
-                          max="1220"
                         min="0"
                         style="text-align:right"
                         type="number"
@@ -64615,12 +64581,6 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                       </fieldset>
                     </div>
                   </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 1213
-                    </div>
-                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantityTotal-id"
@@ -64676,67 +64636,25 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
                 >
                   <div
-                    class="OrderFulfillPage-colQuantityContent-id"
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                     >
                       <input
                         aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                         max="760"
                         min="0"
                         style="text-align:right"
                         type="number"
                         value="0"
                       />
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          style="padding-left:8px"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legend-id"
-                            style="width:0"
-                          >
-                            <span>
-                              ​
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
                       <div
                         class="OrderFulfillPage-remainingQuantity-id"
                       >
                         / 758
                       </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
-                >
-                  <div
-                    class="OrderFulfillPage-colQuantityContent-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
-                          max="760"
-                          min="0"
-                          style="text-align:right"
-                          type="number"
-                          value="0"
-                        />
                       <fieldset
                         aria-hidden="true"
                         class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
@@ -64753,34 +64671,30 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                       </fieldset>
                     </div>
                   </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
+                >
+                  <div
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <div
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        max="760"
+                        min="0"
+                        style="text-align:right"
+                        type="number"
+                        value="0"
+                      />
                       <div
                         class="OrderFulfillPage-remainingQuantity-id"
                       >
                         / 727
                       </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
-                >
-                  <div
-                    class="OrderFulfillPage-colQuantityContent-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
-                          max="760"
-                          min="0"
-                          style="text-align:right"
-                          type="number"
-                          value="0"
-                        />
                       <fieldset
                         aria-hidden="true"
                         class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
@@ -64797,11 +64711,45 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                       </fieldset>
                     </div>
                   </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
+                >
+                  <div
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <div
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        max="760"
+                        min="0"
+                        style="text-align:right"
+                        type="number"
+                        value="0"
+                      />
                       <div
                         class="OrderFulfillPage-remainingQuantity-id"
                       >
                         / 756
                       </div>
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                        style="padding-left:8px"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legend-id"
+                          style="width:0"
+                        >
+                          <span>
+                            ​
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
                   </div>
                 </td>
                 <td
@@ -64853,23 +64801,25 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
                 >
                   <div
-                    class="OrderFulfillPage-colQuantityContent-id"
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                     >
                       <input
                         aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                         max="587"
                         min="0"
                         style="text-align:right"
                         type="number"
                         value="0"
                       />
+                      <div
+                        class="OrderFulfillPage-remainingQuantity-id"
+                      >
+                        / 587
+                      </div>
                       <fieldset
                         aria-hidden="true"
                         class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
@@ -64886,12 +64836,6 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                       </fieldset>
                     </div>
                   </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 587
-                    </div>
-                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id OrderFulfillPage-error-id"
@@ -64902,23 +64846,25 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
                 >
                   <div
-                    class="OrderFulfillPage-colQuantityContent-id"
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                     >
                       <input
                         aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                         max="587"
                         min="0"
                         style="text-align:right"
                         type="number"
                         value="0"
                       />
+                      <div
+                        class="OrderFulfillPage-remainingQuantity-id"
+                      >
+                        / 586
+                      </div>
                       <fieldset
                         aria-hidden="true"
                         class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
@@ -64935,12 +64881,6 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
                       </fieldset>
                     </div>
                   </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 586
-                    </div>
-                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id OrderFulfillPage-error-id"
@@ -65134,18 +65074,14 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
                 >
                   <div
-                    class="OrderFulfillPage-colQuantityContent-id"
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-formControl-id"
                     >
                       <input
                         aria-invalid="true"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id OrderFulfillPage-quantityInnerInputNoRemaining-id"
-                          max="1217"
                         min="0"
                         style="text-align:right"
                         type="number"
@@ -65167,29 +65103,19 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                       </fieldset>
                     </div>
                   </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 1207
-                    </div>
-                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
                 >
                   <div
-                    class="OrderFulfillPage-colQuantityContent-id"
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                     >
                       <input
                         aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id OrderFulfillPage-quantityInnerInputNoRemaining-id"
-                          max="1217"
                         min="0"
                         style="text-align:right"
                         type="number"
@@ -65211,29 +65137,19 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                       </fieldset>
                     </div>
                   </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 1197
-                    </div>
-                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
                 >
                   <div
-                    class="OrderFulfillPage-colQuantityContent-id"
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                     >
                       <input
                         aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id OrderFulfillPage-quantityInnerInputNoRemaining-id"
-                          max="1217"
                         min="0"
                         style="text-align:right"
                         type="number"
@@ -65255,29 +65171,19 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                       </fieldset>
                     </div>
                   </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 1213
-                    </div>
-                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
                 >
                   <div
-                    class="OrderFulfillPage-colQuantityContent-id"
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                     >
                       <input
                         aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id OrderFulfillPage-quantityInnerInputNoRemaining-id"
-                          max="1220"
                         min="0"
                         style="text-align:right"
                         type="number"
@@ -65299,12 +65205,6 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                       </fieldset>
                     </div>
                   </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 1213
-                    </div>
-                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantityTotal-id"
@@ -65360,67 +65260,25 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
                 >
                   <div
-                    class="OrderFulfillPage-colQuantityContent-id"
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                     >
                       <input
                         aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                         max="760"
                         min="0"
                         style="text-align:right"
                         type="number"
                         value="0"
                       />
-                        <fieldset
-                          aria-hidden="true"
-                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
-                          style="padding-left:8px"
-                        >
-                          <legend
-                            class="PrivateNotchedOutline-legend-id"
-                            style="width:0"
-                          >
-                            <span>
-                              ​
-                            </span>
-                          </legend>
-                        </fieldset>
-                      </div>
-                    </div>
                       <div
                         class="OrderFulfillPage-remainingQuantity-id"
                       >
                         / 758
                       </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
-                >
-                  <div
-                    class="OrderFulfillPage-colQuantityContent-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
-                          max="760"
-                          min="0"
-                          style="text-align:right"
-                          type="number"
-                          value="0"
-                        />
                       <fieldset
                         aria-hidden="true"
                         class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
@@ -65437,34 +65295,30 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                       </fieldset>
                     </div>
                   </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
+                >
+                  <div
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <div
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        max="760"
+                        min="0"
+                        style="text-align:right"
+                        type="number"
+                        value="0"
+                      />
                       <div
                         class="OrderFulfillPage-remainingQuantity-id"
                       >
                         / 727
                       </div>
-                  </div>
-                </td>
-                <td
-                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
-                >
-                  <div
-                    class="OrderFulfillPage-colQuantityContent-id"
-                  >
-                    <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
-                      >
-                        <input
-                          aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
-                          max="760"
-                          min="0"
-                          style="text-align:right"
-                          type="number"
-                          value="0"
-                        />
                       <fieldset
                         aria-hidden="true"
                         class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
@@ -65481,11 +65335,45 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                       </fieldset>
                     </div>
                   </div>
+                </td>
+                <td
+                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
+                >
+                  <div
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
+                  >
+                    <div
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
+                    >
+                      <input
+                        aria-invalid="false"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
+                        max="760"
+                        min="0"
+                        style="text-align:right"
+                        type="number"
+                        value="0"
+                      />
                       <div
                         class="OrderFulfillPage-remainingQuantity-id"
                       >
                         / 756
                       </div>
+                      <fieldset
+                        aria-hidden="true"
+                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
+                        style="padding-left:8px"
+                      >
+                        <legend
+                          class="PrivateNotchedOutline-legend-id"
+                          style="width:0"
+                        >
+                          <span>
+                            ​
+                          </span>
+                        </legend>
+                      </fieldset>
+                    </div>
                   </div>
                 </td>
                 <td
@@ -65537,23 +65425,25 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
                 >
                   <div
-                    class="OrderFulfillPage-colQuantityContent-id"
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                     >
                       <input
                         aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                         max="587"
                         min="0"
                         style="text-align:right"
                         type="number"
                         value="0"
                       />
+                      <div
+                        class="OrderFulfillPage-remainingQuantity-id"
+                      >
+                        / 587
+                      </div>
                       <fieldset
                         aria-hidden="true"
                         class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
@@ -65570,12 +65460,6 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                       </fieldset>
                     </div>
                   </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 587
-                    </div>
-                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id OrderFulfillPage-error-id"
@@ -65586,23 +65470,25 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
                 >
                   <div
-                    class="OrderFulfillPage-colQuantityContent-id"
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                     >
                       <input
                         aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                         max="587"
                         min="0"
                         style="text-align:right"
                         type="number"
                         value="0"
                       />
+                      <div
+                        class="OrderFulfillPage-remainingQuantity-id"
+                      >
+                        / 586
+                      </div>
                       <fieldset
                         aria-hidden="true"
                         class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
@@ -65619,12 +65505,6 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
                       </fieldset>
                     </div>
                   </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 586
-                    </div>
-                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id OrderFulfillPage-error-id"
@@ -65969,18 +65849,14 @@ exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
                 >
                   <div
-                    class="OrderFulfillPage-colQuantityContent-id"
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                     >
                       <input
                         aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id OrderFulfillPage-quantityInnerInputNoRemaining-id"
-                          max="1217"
                         min="0"
                         style="text-align:right"
                         type="number"
@@ -66002,12 +65878,6 @@ exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
                       </fieldset>
                     </div>
                   </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 1207
-                    </div>
-                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantityTotal-id"
@@ -66108,23 +65978,25 @@ exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
                 >
                   <div
-                    class="OrderFulfillPage-colQuantityContent-id"
+                    class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                   >
                     <div
-                      class="MuiFormControl-root-id MuiTextField-root-id OrderFulfillPage-quantityInput-id"
+                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
-                    >
-                      <div
-                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                     >
                       <input
                         aria-invalid="false"
-                          class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id"
+                        class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                         max="587"
                         min="0"
                         style="text-align:right"
                         type="number"
                         value="0"
                       />
+                      <div
+                        class="OrderFulfillPage-remainingQuantity-id"
+                      >
+                        / 587
+                      </div>
                       <fieldset
                         aria-hidden="true"
                         class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
@@ -66141,12 +66013,6 @@ exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
                       </fieldset>
                     </div>
                   </div>
-                    <div
-                      class="OrderFulfillPage-remainingQuantity-id"
-                    >
-                      / 587
-                    </div>
-                  </div>
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantityTotal-id"