Fix fulfillment page if not tracking stock (#2290)

* Fix fulfillment page if not tracking stock

* Update snapshots and messages

locale/defaultMessages.json

@@ -3810,6 +3810,10 @@
     "context": "unassign attribute from product type, button",
     "string": "Unassign"
   },
+  "SBb6Ej": {
+    "context": "select a warehouse to fulfill product from",
+    "string": "Select warehouse..."
+  },
   "SHm7ee": {
     "string": "Search by product name, attribute, product type etc..."
   },

src/orders/components/OrderFulfillLine/OrderFulfillLine.tsx

@@ -58,7 +58,7 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
 
   const isStockExceeded = lineFormQuantity > availableQuantity;
 
-  if (!line || !lineFormWarehouse) {
+  if (!line) {
     return (
       <TableRow key={lineIndex}>
         <TableCellAvatar className={classes.colName}>
@@ -156,7 +156,11 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
         </TableCell>
       )}
       <TableCell className={classes.colStock} key="total">
-        {isPreorder || isDeletedVariant ? undefined : availableQuantity}
+        {lineFormWarehouse
+          ? isPreorder || isDeletedVariant
+            ? undefined
+            : availableQuantity
+          : "-"}
       </TableCell>
       <TableCell className={classes.colWarehouse}>
         <IconButton
@@ -165,9 +169,13 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
           data-test-id="select-warehouse-button"
         >
           <div className={classes.warehouseButtonContent}>
-            <div className={classes.warehouseButtonContentText}>
-              {lineFormWarehouse?.name ?? <Skeleton />}
-            </div>
+            <Typography
+              color={lineFormWarehouse ? "textPrimary" : "textSecondary"}
+              className={classes.warehouseButtonContentText}
+            >
+              {lineFormWarehouse?.name ??
+                intl.formatMessage(messages.selectWarehouse)}
+            </Typography>
             <ChevronIcon />
           </div>
         </IconButton>

src/orders/components/OrderFulfillLine/messages.ts

@@ -17,4 +17,9 @@ export const messages = defineMessages({
     id: "W5hb5H",
     description: "warehouse input",
   },
+  selectWarehouse: {
+    defaultMessage: "Select warehouse...",
+    id: "SBb6Ej",
+    description: "select a warehouse to fulfill product from",
+  },
 });

src/orders/components/OrderFulfillLine/styles.ts

@@ -62,6 +62,7 @@ export const useStyles = makeStyles(
     warehouseButtonContentText: {
       overflow: "hidden",
       textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
     },
   }),
   { name: "OrderFulfillLine" },

src/orders/components/OrderFulfillPage/OrderFulfillPage.tsx

@@ -163,6 +163,10 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
     !shopSettings?.fulfillmentAllowUnpaid &&
     !order?.isPaid;
 
+  const areWarehousesSet = formsetData.every(line =>
+    line.value.every(v => v.warehouse),
+  );
+
   const shouldEnableSave = () => {
     if (!order || loading) {
       return false;
@@ -186,7 +190,7 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
         return formQuantityFulfilled > quantityToFulfill;
       });
 
-    return !overfulfill && isAtLeastOneFulfilled;
+    return !overfulfill && isAtLeastOneFulfilled && areWarehousesSet;
   };
 
   return (
@@ -261,7 +265,7 @@ const OrderFulfillPage: React.FC<OrderFulfillPageProps> = props => {
                                 lineId: line.id,
                                 warehouseId:
                                   formsetData[lineIndex]?.value?.[0]?.warehouse
-                                    .id,
+                                    ?.id,
                               })
                             }
                           />