@shopgate/engage 7.30.0-alpha.9 → 7.30.0-beta.2

package/cart/components/CartItem/CartItemProductLayout.js

@@ -19,6 +19,7 @@ import styles from "./CartItemProductLayout.style";
  * The Cart Product Layout component.
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export function CartItemProductLayout() {
   // Added with PWA 6 - CCP-2372
   const {
@@ -63,89 +64,108 @@ export function CartItemProductLayout() {
     }
     return (cartItem?.appliedPromotions || []).length > 0;
   }, [cartItem, isCheckoutConfirmation, isOrderDetails]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, {
-    className: classNames(styles.item, {
-      [styles.itemInactive]: !isActive
-    })
-  }, /*#__PURE__*/React.createElement(Grid.Item, {
-    className: styles.content,
-    grow: 1
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CART_ITEM_LINK,
-    portalProps: portalProps
-  }, /*#__PURE__*/React.createElement(CartItemProductTitle, {
-    value: product.name,
-    productId: product.id
-  })), /*#__PURE__*/React.createElement(Grid, {
-    className: styles.info
-  }, /*#__PURE__*/React.createElement(Grid.Item, {
-    grow: 1,
-    className: styles.properties
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CART_ITEM_PROPERTIES,
-    portalProps: portalProps
-  }, /*#__PURE__*/React.createElement(ProductProperties, {
-    properties: product.properties,
-    lineClamp: 2
-  })), isOrderDetails && /*#__PURE__*/React.createElement(CartItemProductOrderDetails, null)), /*#__PURE__*/React.createElement(Grid.Item, {
-    grow: 1,
-    className: styles.price
-  }, isOrderDetails && /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "cart.subtotal",
-    className: styles.orderDetailsSubtotalLabel
-  }), !showLineItemPromotions && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CartItemProductPriceList, {
-    isSubtotal: true
-  }), /*#__PURE__*/React.createElement(PriceInfo, {
-    product: product,
-    currency: currency,
-    className: styles.priceInfo
-  }))), showDisclaimer && /*#__PURE__*/React.createElement(Grid.Item, {
-    className: styles.disclaimerSpacer,
-    grow: 0,
-    shrink: 0
-  })), showLineItemPromotions && /*#__PURE__*/React.createElement(Grid, {
-    className: classNames(styles.info, styles.promotionLine)
-  }, /*#__PURE__*/React.createElement(Grid.Item, null), /*#__PURE__*/React.createElement(Grid.Item, {
-    className: styles.promotionLineItem
-  }, /*#__PURE__*/React.createElement(CartItemProductPriceList, {
-    isSubtotal: true,
-    showLabels: true
-  }), /*#__PURE__*/React.createElement(PriceInfo, {
-    product: product,
-    currency: currency,
-    className: styles.priceInfo
-  })))), /*#__PURE__*/React.createElement(Grid.Item, {
-    className: styles.leftColumn
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.image,
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement(ConditionalWrapper, {
-    condition: isEditable && isLinkable,
-    wrapper: children => /*#__PURE__*/React.createElement(Link, {
-      tagName: "a",
-      href: `${ITEM_PATH}/${bin2hex(product.id)}`
-    }, children)
-  }, /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CART_ITEM_IMAGE,
-    portalProps: portalProps
-  }, /*#__PURE__*/React.createElement(ProductImage, {
-    src: product.featuredImageBaseUrl || product.featuredImageUrl
-  })))), !isOrderDetails && allowQuantityChange && /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CART_ITEM_QUANTITY_PICKER,
-    portalProps: portalProps
-  }, /*#__PURE__*/React.createElement(CartItemQuantityPicker, {
-    unit: product.unit,
-    hasCatchWeight: product.hasCatchWeight,
-    quantity: cartItem.quantity,
-    editMode: editMode,
-    onChange: handleUpdate,
-    onToggleEditMode: toggleEditMode,
-    disabled: !isEditable
-  })))), /*#__PURE__*/React.createElement(CartItemProductChangeLocation, {
-    cartItem: cartItem,
-    registerAction: registerFulfillmentAction
-  }), /*#__PURE__*/React.createElement(CartChangeFulfillmentMethod, {
-    cartItem: cartItem,
-    registerAction: registerFulfillmentAction
-  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Grid, {
+      className: classNames(styles.item, {
+        [styles.itemInactive]: !isActive
+      }),
+      children: [/*#__PURE__*/_jsxs(Grid.Item, {
+        className: styles.content,
+        grow: 1,
+        children: [/*#__PURE__*/_jsx(SurroundPortals, {
+          portalName: CART_ITEM_LINK,
+          portalProps: portalProps,
+          children: /*#__PURE__*/_jsx(CartItemProductTitle, {
+            value: product.name,
+            productId: product.id
+          })
+        }), /*#__PURE__*/_jsxs(Grid, {
+          className: styles.info,
+          children: [/*#__PURE__*/_jsxs(Grid.Item, {
+            grow: 1,
+            className: styles.properties,
+            children: [/*#__PURE__*/_jsx(SurroundPortals, {
+              portalName: CART_ITEM_PROPERTIES,
+              portalProps: portalProps,
+              children: /*#__PURE__*/_jsx(ProductProperties, {
+                properties: product.properties,
+                lineClamp: 2
+              })
+            }), isOrderDetails && /*#__PURE__*/_jsx(CartItemProductOrderDetails, {})]
+          }), /*#__PURE__*/_jsxs(Grid.Item, {
+            grow: 1,
+            className: styles.price,
+            children: [isOrderDetails && /*#__PURE__*/_jsx(I18n.Text, {
+              string: "cart.subtotal",
+              className: styles.orderDetailsSubtotalLabel
+            }), !showLineItemPromotions && /*#__PURE__*/_jsxs(_Fragment, {
+              children: [/*#__PURE__*/_jsx(CartItemProductPriceList, {
+                isSubtotal: true
+              }), /*#__PURE__*/_jsx(PriceInfo, {
+                product: product,
+                currency: currency,
+                className: styles.priceInfo
+              })]
+            })]
+          }), showDisclaimer && /*#__PURE__*/_jsx(Grid.Item, {
+            className: styles.disclaimerSpacer,
+            grow: 0,
+            shrink: 0
+          })]
+        }), showLineItemPromotions && /*#__PURE__*/_jsxs(Grid, {
+          className: classNames(styles.info, styles.promotionLine),
+          children: [/*#__PURE__*/_jsx(Grid.Item, {}), /*#__PURE__*/_jsxs(Grid.Item, {
+            className: styles.promotionLineItem,
+            children: [/*#__PURE__*/_jsx(CartItemProductPriceList, {
+              isSubtotal: true,
+              showLabels: true
+            }), /*#__PURE__*/_jsx(PriceInfo, {
+              product: product,
+              currency: currency,
+              className: styles.priceInfo
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(Grid.Item, {
+        className: styles.leftColumn,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: styles.image,
+          "aria-hidden": true,
+          children: /*#__PURE__*/_jsx(ConditionalWrapper, {
+            condition: isEditable && isLinkable,
+            wrapper: children => /*#__PURE__*/_jsx(Link, {
+              tagName: "a",
+              href: `${ITEM_PATH}/${bin2hex(product.id)}`,
+              children: children
+            }),
+            children: /*#__PURE__*/_jsx(SurroundPortals, {
+              portalName: CART_ITEM_IMAGE,
+              portalProps: portalProps,
+              children: /*#__PURE__*/_jsx(ProductImage, {
+                src: product.featuredImageBaseUrl || product.featuredImageUrl
+              })
+            })
+          })
+        }), !isOrderDetails && allowQuantityChange && /*#__PURE__*/_jsx(SurroundPortals, {
+          portalName: CART_ITEM_QUANTITY_PICKER,
+          portalProps: portalProps,
+          children: /*#__PURE__*/_jsx(CartItemQuantityPicker, {
+            unit: product.unit,
+            hasCatchWeight: product.hasCatchWeight,
+            quantity: cartItem.quantity,
+            editMode: editMode,
+            onChange: handleUpdate,
+            onToggleEditMode: toggleEditMode,
+            disabled: !isEditable
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(CartItemProductChangeLocation, {
+      cartItem: cartItem,
+      registerAction: registerFulfillmentAction
+    }), /*#__PURE__*/_jsx(CartChangeFulfillmentMethod, {
+      cartItem: cartItem,
+      registerAction: registerFulfillmentAction
+    })]
+  });
 }

package/cart/components/CartItem/CartItemProductLayoutWide.js

@@ -17,6 +17,7 @@ import { container, containerInactive, imageColumn, detailsColumn, priceColumnWi
 /**
  * @returns {JSX}
  */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const CartItemProductLayoutWide = () => {
   const {
     merchantFulfillmentMethodsCount,
@@ -36,92 +37,104 @@ const CartItemProductLayoutWide = () => {
   } = context;
   const hasUnitWithDecimals = product.unit && product.hasCatchWeight || false;
   const isActive = !isOrderDetails ? true : getLineItemActiveStatus(cartItem?.status, cartItem?.subStatus);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: classNames(container, {
-      [containerInactive]: !isActive
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: imageColumn
-  }, /*#__PURE__*/React.createElement(ProductImage, {
-    src: product.featuredImageBaseUrl || product.featuredImageUrl
-  })), /*#__PURE__*/React.createElement("div", {
-    className: detailsColumn
-  }, /*#__PURE__*/React.createElement(ConditionalWrapper, {
-    condition: isEditable && isLinkable,
-    wrapper: children => /*#__PURE__*/React.createElement(TextLink, {
-      href: `${ITEM_PATH}/${bin2hex(product.id)}`
-    }, children)
-  }, /*#__PURE__*/React.createElement(ProductName, {
-    name: product.name,
-    className: productName,
-    portalName: CART_ITEM_NAME,
-    portalProps: context,
-    testId: product.name
-  })), /*#__PURE__*/React.createElement(ProductProperties, {
-    className: productProperties,
-    properties: product.properties,
-    lineClamp: 2
-  }), !isOrderDetails && /*#__PURE__*/React.createElement(CartItemProductLayoutWideFulfillmentLabel, null)), /*#__PURE__*/React.createElement("div", {
-    className: cartHasLineItemPromotions ? priceColumnWide : column
-  }, /*#__PURE__*/React.createElement(CartItemProductPriceList, {
-    cartItem: cartItem,
-    classes: {
-      price,
-      priceStriked: price,
-      entry: priceListEntry,
-      promo: priceListPromo
-    }
-  }), /*#__PURE__*/React.createElement(PriceInfo, {
-    product: product,
-    currency: currency,
-    className: priceInfo
-  }), /*#__PURE__*/React.createElement(CartItemProductPriceCaption, null)), isOrderDetails && /*#__PURE__*/React.createElement(CartItemProductLayoutWideOrderDetails, null), /*#__PURE__*/React.createElement("div", {
-    className: column
-  }, isEditable && allowQuantityChange ? /*#__PURE__*/React.createElement(SurroundPortals, {
-    portalName: CART_ITEM_QUANTITY_PICKER,
-    portalProps: {
-      product,
-      cartItem,
-      isOrderDetails,
-      handleUpdate,
-      isEditable
-    }
-  }, /*#__PURE__*/React.createElement(CartUnitQuantityPicker, {
-    productId: product.id,
-    value: isOrderDetails ? cartItem.orderedQuantity : cartItem.quantity,
-    unit: product.unit,
-    hasCatchWeight: product.hasCatchWeight,
-    onChange: handleUpdate,
-    classNames: {
-      withDecimals: quantityPicker,
-      withoutDecimals: quantityPicker
-    }
-  })) : /*#__PURE__*/React.createElement(QuantityLabel, {
-    className: quantityPickerDisabled,
-    value: isOrderDetails ? cartItem.orderedQuantity : cartItem.quantity,
-    unit: hasUnitWithDecimals ? product.unit : null,
-    maxDecimals: hasUnitWithDecimals ? 2 : 0
-  }), isEditable && /*#__PURE__*/React.createElement(CartItemProductLayoutWideRemoveItem, null)), /*#__PURE__*/React.createElement("div", {
-    className: column
-  }, /*#__PURE__*/React.createElement(CartItemProductPriceList, {
-    isSubtotal: true,
-    cartItem: cartItem,
-    classes: {
-      price,
-      priceStriked: price,
-      entry: priceListEntry,
-      promo: priceListPromo
-    }
-  }), /*#__PURE__*/React.createElement(CartItemProductPriceCaption, null)), isEditable && merchantFulfillmentMethodsCount > 1 && /*#__PURE__*/React.createElement("div", {
-    className: contextMenu
-  }, /*#__PURE__*/React.createElement(CartContextMenuChangeFulfillment, {
-    cartItem: cartItem
-  }))), messages.length > 0 && /*#__PURE__*/React.createElement(MessageBar, {
-    messages: messages,
-    showIcons: true,
-    classNames: {
-      container: cartItem.fulfillment ? messageContainerRope : messageContainer
-    }
-  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: classNames(container, {
+        [containerInactive]: !isActive
+      }),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: imageColumn,
+        children: /*#__PURE__*/_jsx(ProductImage, {
+          src: product.featuredImageBaseUrl || product.featuredImageUrl
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        className: detailsColumn,
+        children: [/*#__PURE__*/_jsx(ConditionalWrapper, {
+          condition: isEditable && isLinkable,
+          wrapper: children => /*#__PURE__*/_jsx(TextLink, {
+            href: `${ITEM_PATH}/${bin2hex(product.id)}`,
+            children: children
+          }),
+          children: /*#__PURE__*/_jsx(ProductName, {
+            name: product.name,
+            className: productName,
+            portalName: CART_ITEM_NAME,
+            portalProps: context,
+            testId: product.name
+          })
+        }), /*#__PURE__*/_jsx(ProductProperties, {
+          className: productProperties,
+          properties: product.properties,
+          lineClamp: 2
+        }), !isOrderDetails && /*#__PURE__*/_jsx(CartItemProductLayoutWideFulfillmentLabel, {})]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: cartHasLineItemPromotions ? priceColumnWide : column,
+        children: [/*#__PURE__*/_jsx(CartItemProductPriceList, {
+          cartItem: cartItem,
+          classes: {
+            price,
+            priceStriked: price,
+            entry: priceListEntry,
+            promo: priceListPromo
+          }
+        }), /*#__PURE__*/_jsx(PriceInfo, {
+          product: product,
+          currency: currency,
+          className: priceInfo
+        }), /*#__PURE__*/_jsx(CartItemProductPriceCaption, {})]
+      }), isOrderDetails && /*#__PURE__*/_jsx(CartItemProductLayoutWideOrderDetails, {}), /*#__PURE__*/_jsxs("div", {
+        className: column,
+        children: [isEditable && allowQuantityChange ? /*#__PURE__*/_jsx(SurroundPortals, {
+          portalName: CART_ITEM_QUANTITY_PICKER,
+          portalProps: {
+            product,
+            cartItem,
+            isOrderDetails,
+            handleUpdate,
+            isEditable
+          },
+          children: /*#__PURE__*/_jsx(CartUnitQuantityPicker, {
+            productId: product.id,
+            value: isOrderDetails ? cartItem.orderedQuantity : cartItem.quantity,
+            unit: product.unit,
+            hasCatchWeight: product.hasCatchWeight,
+            onChange: handleUpdate,
+            classNames: {
+              withDecimals: quantityPicker,
+              withoutDecimals: quantityPicker
+            }
+          })
+        }) : /*#__PURE__*/_jsx(QuantityLabel, {
+          className: quantityPickerDisabled,
+          value: isOrderDetails ? cartItem.orderedQuantity : cartItem.quantity,
+          unit: hasUnitWithDecimals ? product.unit : null,
+          maxDecimals: hasUnitWithDecimals ? 2 : 0
+        }), isEditable && /*#__PURE__*/_jsx(CartItemProductLayoutWideRemoveItem, {})]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: column,
+        children: [/*#__PURE__*/_jsx(CartItemProductPriceList, {
+          isSubtotal: true,
+          cartItem: cartItem,
+          classes: {
+            price,
+            priceStriked: price,
+            entry: priceListEntry,
+            promo: priceListPromo
+          }
+        }), /*#__PURE__*/_jsx(CartItemProductPriceCaption, {})]
+      }), isEditable && merchantFulfillmentMethodsCount > 1 && /*#__PURE__*/_jsx("div", {
+        className: contextMenu,
+        children: /*#__PURE__*/_jsx(CartContextMenuChangeFulfillment, {
+          cartItem: cartItem
+        })
+      })]
+    }), messages.length > 0 && /*#__PURE__*/_jsx(MessageBar, {
+      messages: messages,
+      showIcons: true,
+      classNames: {
+        container: cartItem.fulfillment ? messageContainerRope : messageContainer
+      }
+    })]
+  });
 };
 export { CartItemProductLayoutWide };

package/cart/components/CartItem/CartItemProductLayoutWideFulfillmentLabel.js

@@ -7,6 +7,7 @@ import { useCartItemProduct } from "./CartItem.hooks";
 /**
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CartItemProductLayoutWideFulfillmentLabel = () => {
   const {
     cartItem
@@ -18,8 +19,9 @@ const CartItemProductLayoutWideFulfillmentLabel = () => {
   } else if (fulfillmentMethod === ROPIS) {
     suffix = 'ropis';
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: label
-  }, i18n.text(`locations.method.${suffix}`));
+  return /*#__PURE__*/_jsx("div", {
+    className: label,
+    children: i18n.text(`locations.method.${suffix}`)
+  });
 };
 export { CartItemProductLayoutWideFulfillmentLabel };

package/cart/components/CartItem/CartItemProductLayoutWideOrderDetails.js

@@ -7,6 +7,7 @@ import { column, locationColumn, statusColumn, quantityPickerDisabled } from "./
 /**
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const CartItemProductLayoutWide = () => {
   const {
     location,
@@ -17,17 +18,22 @@ const CartItemProductLayoutWide = () => {
     product
   } = useCartItemProduct();
   const hasUnitWithDecimals = product.unit && product.hasCatchWeight || false;
-  return /*#__PURE__*/React.createElement(Fragment, null, !cartIsDirectShipOnly ? /*#__PURE__*/React.createElement("div", {
-    className: locationColumn
-  }, location?.name) : null, /*#__PURE__*/React.createElement("div", {
-    className: statusColumn
-  }, getTranslatedLineItemStatus(cartItem?.status, cartItem?.subStatus)), /*#__PURE__*/React.createElement("div", {
-    className: column
-  }, /*#__PURE__*/React.createElement(QuantityLabel, {
-    className: quantityPickerDisabled,
-    value: cartItem.quantity,
-    unit: hasUnitWithDecimals ? product.unit : null,
-    maxDecimals: hasUnitWithDecimals ? 2 : 0
-  })));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!cartIsDirectShipOnly ? /*#__PURE__*/_jsx("div", {
+      className: locationColumn,
+      children: location?.name
+    }) : null, /*#__PURE__*/_jsx("div", {
+      className: statusColumn,
+      children: getTranslatedLineItemStatus(cartItem?.status, cartItem?.subStatus)
+    }), /*#__PURE__*/_jsx("div", {
+      className: column,
+      children: /*#__PURE__*/_jsx(QuantityLabel, {
+        className: quantityPickerDisabled,
+        value: cartItem.quantity,
+        unit: hasUnitWithDecimals ? product.unit : null,
+        maxDecimals: hasUnitWithDecimals ? 2 : 0
+      })
+    })]
+  });
 };
 export default CartItemProductLayoutWide;

package/cart/components/CartItem/CartItemProductLayoutWideRemoveItem.js

@@ -6,18 +6,20 @@ import { useCartItemProduct } from "./CartItem.hooks";
 /**
  * @returns {JSX.Element}
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const CartItemProductLayoutWideRemoveItem = () => {
   const {
     handleRemove
   } = useCartItemProduct();
-  return /*#__PURE__*/React.createElement(RippleButton, {
+  return /*#__PURE__*/_jsx(RippleButton, {
     onClick: handleRemove,
     className: button,
     rippleClassName: ripple,
     type: "secondary",
-    flat: true
-  }, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "cart.remove_item"
-  }));
+    flat: true,
+    children: /*#__PURE__*/_jsx(I18n.Text, {
+      string: "cart.remove_item"
+    })
+  });
 };
 export { CartItemProductLayoutWideRemoveItem };

package/cart/components/CartItem/CartItemProductOrderDetails.js

@@ -10,6 +10,7 @@ import { quantityLabel, label, container, labelValue, fulfillmentLabel } from ".
 /**
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CartItemProductOrderDetails = () => {
   const {
     location,
@@ -25,45 +26,58 @@ const CartItemProductOrderDetails = () => {
     const result = createCartItemPrices(cartItem).price;
     return result.slice(-1)[0].price;
   }, [cartItem]);
-  return /*#__PURE__*/React.createElement("ul", {
-    className: container
-  }, !cartIsDirectShipOnly && location?.name ? /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "cart.location",
-    className: label
-  }), /*#__PURE__*/React.createElement("span", {
-    className: labelValue
-  }, location?.name), /*#__PURE__*/React.createElement(CartItemProductPriceCaption, {
-    className: fulfillmentLabel
-  })) : null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "cart.status",
-    className: label
-  }), /*#__PURE__*/React.createElement("span", {
-    className: labelValue
-  }, getTranslatedLineItemStatus(cartItem?.status, cartItem?.subStatus))), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "cart.fulfilled_quantity",
-    className: label
-  }), /*#__PURE__*/React.createElement(QuantityLabel, {
-    className: classNames(quantityLabel, labelValue),
-    value: cartItem.quantity,
-    unit: hasUnitWithDecimals ? product.unit : null,
-    maxDecimals: hasUnitWithDecimals ? 2 : 0
-  })), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "cart.ordered_quantity",
-    className: label
-  }), /*#__PURE__*/React.createElement(QuantityLabel, {
-    className: classNames(quantityLabel, labelValue),
-    value: cartItem.orderedQuantity,
-    unit: hasUnitWithDecimals ? product.unit : null,
-    maxDecimals: hasUnitWithDecimals ? 2 : 0
-  })), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(I18n.Text, {
-    string: "cart.price",
-    className: label
-  }), /*#__PURE__*/React.createElement(Price, {
-    className: labelValue,
-    currency: currency,
-    taxDisclaimer: true,
-    unitPrice: unitPrice,
-    allowFree: true
-  })));
+  return /*#__PURE__*/_jsxs("ul", {
+    className: container,
+    children: [!cartIsDirectShipOnly && location?.name ? /*#__PURE__*/_jsxs("li", {
+      children: [/*#__PURE__*/_jsx(I18n.Text, {
+        string: "cart.location",
+        className: label
+      }), /*#__PURE__*/_jsx("span", {
+        className: labelValue,
+        children: location?.name
+      }), /*#__PURE__*/_jsx(CartItemProductPriceCaption, {
+        className: fulfillmentLabel
+      })]
+    }) : null, /*#__PURE__*/_jsxs("li", {
+      children: [/*#__PURE__*/_jsx(I18n.Text, {
+        string: "cart.status",
+        className: label
+      }), /*#__PURE__*/_jsx("span", {
+        className: labelValue,
+        children: getTranslatedLineItemStatus(cartItem?.status, cartItem?.subStatus)
+      })]
+    }), /*#__PURE__*/_jsxs("li", {
+      children: [/*#__PURE__*/_jsx(I18n.Text, {
+        string: "cart.fulfilled_quantity",
+        className: label
+      }), /*#__PURE__*/_jsx(QuantityLabel, {
+        className: classNames(quantityLabel, labelValue),
+        value: cartItem.quantity,
+        unit: hasUnitWithDecimals ? product.unit : null,
+        maxDecimals: hasUnitWithDecimals ? 2 : 0
+      })]
+    }), /*#__PURE__*/_jsxs("li", {
+      children: [/*#__PURE__*/_jsx(I18n.Text, {
+        string: "cart.ordered_quantity",
+        className: label
+      }), /*#__PURE__*/_jsx(QuantityLabel, {
+        className: classNames(quantityLabel, labelValue),
+        value: cartItem.orderedQuantity,
+        unit: hasUnitWithDecimals ? product.unit : null,
+        maxDecimals: hasUnitWithDecimals ? 2 : 0
+      })]
+    }), /*#__PURE__*/_jsxs("li", {
+      children: [/*#__PURE__*/_jsx(I18n.Text, {
+        string: "cart.price",
+        className: label
+      }), /*#__PURE__*/_jsx(Price, {
+        className: labelValue,
+        currency: currency,
+        taxDisclaimer: true,
+        unitPrice: unitPrice,
+        allowFree: true
+      })]
+    })]
+  });
 };
 export default CartItemProductOrderDetails;

package/cart/components/CartItem/CartItemProductPriceCaption.js

@@ -11,6 +11,7 @@ import { caption } from "./CartItemProductPriceCaption.style";
 /**
  * @returns {JSX.Element}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const CartItemProductPriceCaption = ({
   className
 }) => {
@@ -28,11 +29,12 @@ const CartItemProductPriceCaption = ({
   if (!label) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("span", {
-    className: classNames(caption, className)
-  }, "(", /*#__PURE__*/React.createElement(I18n.Text, {
-    string: label
-  }), ")");
+  return /*#__PURE__*/_jsxs("span", {
+    className: classNames(caption, className),
+    children: ["(", /*#__PURE__*/_jsx(I18n.Text, {
+      string: label
+    }), ")"]
+  });
 };
 CartItemProductPriceCaption.defaultProps = {
   className: null