@akinon/pz-theme 2.0.67-rc.0 → 2.0.67

package/src/blocks/basket-items-block.tsx

@@ -2,40 +2,235 @@
 
 import React from 'react';
 import NextLink from 'next/link';
+import { useSession } from 'next-auth/react';
 import {
   useGetBasketQuery,
   useUpdateQuantityMutation
 } from '@akinon/next/data/client/basket';
+import {
+  useAddFavoriteMutation,
+  useGetFavoritesQuery,
+  useRemoveFavoriteMutation
+} from '@akinon/next/data/client/wishlist';
 import { useLocalization } from '@akinon/next/hooks';
+import PluginModule, { Component } from '@akinon/next/components/plugin-module';
 import { getResponsiveValue, partAttrs } from '../utils';
 import { useThemePageContext } from '../theme-page-context';
-import { formatMoney } from './commerce-format';
+import {
+  formatMoney,
+  MoneyCurrencyDisplay,
+  MoneyCurrencyPosition,
+  MoneyDecimals,
+  MoneyStyleOptions,
+  parseAmount
+} from './commerce-format';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
-import { readToggle } from './product-block-utils';
+import { getLineImage, readToggle } from './product-block-utils';
 import { BlockRendererProps } from './block-renderer-registry';
 
 interface BasketLineLike {
   id?: number;
   quantity?: number;
+  stock?: number;
   image?: string;
   price?: string;
+  retail_price?: string;
   unit_price?: string;
   total_amount?: string;
+  discount_amount?: string;
   currency_type?: string;
   attributes?: unknown;
+  attributes_kwargs?: unknown;
   product?: {
     pk?: number;
     name?: string;
     absolute_url?: string;
     image?: string;
+    price?: string;
+    retail_price?: string;
+    productimage_set?: Array<{ image?: string; url?: string }>;
+    attributes?: unknown;
+    attributes_kwargs?: unknown;
   } | null;
 }
 
+interface VariantRow {
+  key: string;
+  label: string;
+  value: string;
+}
+
+const FAVORITES_PAGE_SIZE = 100;
+
+const ALLOWED_DECIMALS = ['always', 'auto', 'never'];
+const ALLOWED_CURRENCY_DISPLAYS = ['', 'symbol', 'code', 'custom', 'none'];
+const ALLOWED_CURRENCY_POSITIONS = ['', 'before', 'after'];
+const VARIANT_LAYOUTS = ['inline', 'rows'];
+const QUANTITY_CONTROLS = ['stepper', 'select'];
+const REMOVE_PLACEMENTS = ['aside', 'inline'];
+
+const toText = (value: unknown): string =>
+  typeof value === 'string'
+    ? value.trim()
+    : typeof value === 'number' && Number.isFinite(value)
+      ? String(value)
+      : '';
+
+const humanizeKey = (key: string): string =>
+  key
+    .replace(/[_-]+/g, ' ')
+    .trim()
+    .replace(/^./, (first) => first.toUpperCase());
+
+/**
+ * The attribute value commerce sent for one key, read from the richest field
+ * first: the line's own kwargs (a chosen variant's label), then the product's
+ * kwargs, then the bare attribute maps. A line on a product that IS its own
+ * variant carries no `attributes` at all — its colour and size live only on
+ * the product — which is why the product fields are consulted too.
+ */
+const readAttributeValue = (line: BasketLineLike, key: string): string => {
+  const sources: unknown[] = [
+    line.attributes_kwargs,
+    line.product?.attributes_kwargs,
+    line.attributes,
+    line.product?.attributes
+  ];
+
+  for (const source of sources) {
+    if (!source || typeof source !== 'object') continue;
+    const entry = (source as Record<string, unknown>)[key];
+    if (entry === undefined || entry === null) continue;
+    if (typeof entry === 'object') {
+      const record = entry as Record<string, unknown>;
+      const text = toText(record.label) || toText(record.value);
+      if (text) return text;
+      continue;
+    }
+    const text = toText(entry);
+    if (text) return text;
+  }
+
+  return '';
+};
+
+/**
+ * `variantRows` is authored as "key:Label, key2:Label2"; a bare key falls back
+ * to a humanised label. Empty means "every key the line was added with".
+ */
+const parseVariantRowSpec = (
+  raw: string
+): Array<{ key: string; label: string }> =>
+  raw
+    .split(',')
+    .map((entry) => entry.trim())
+    .filter(Boolean)
+    .map((entry) => {
+      const separator = entry.indexOf(':');
+      const key = (separator === -1 ? entry : entry.slice(0, separator)).trim();
+      const label = separator === -1 ? '' : entry.slice(separator + 1).trim();
+      return { key, label: label || humanizeKey(key) };
+    })
+    .filter((entry) => Boolean(entry.key));
+
+const readVariantRows = (
+  line: BasketLineLike,
+  spec: Array<{ key: string; label: string }>
+): VariantRow[] => {
+  const entries =
+    spec.length > 0
+      ? spec
+      : Object.keys(
+          line.attributes && typeof line.attributes === 'object'
+            ? (line.attributes as Record<string, unknown>)
+            : {}
+        ).map((key) => ({ key, label: humanizeKey(key) }));
+
+  return entries
+    .map(({ key, label }) => ({
+      key,
+      label,
+      value: readAttributeValue(line, key)
+    }))
+    .filter((row) => Boolean(row.value));
+};
+
+const readOption = <T extends string>(
+  value: unknown,
+  breakpoint: string,
+  allowed: string[],
+  fallback: T
+): T => {
+  const raw = String(getResponsiveValue(value, breakpoint, fallback));
+  return (allowed.includes(raw) ? raw : fallback) as T;
+};
+
 /**
  * The basket line's variant choices as one line ("M / Red"). Commerce sends
  * them as a plain object, so the values are joined in payload order — the keys
  * are attribute slugs and are not shopper-facing copy.
  */
+/**
+ * What a line is worth, read the way the brand storefronts read it: the
+ * struck "retail" figure comes from the price list (`retail_price` above
+ * `price`), the "in basket" figure from a basket campaign that cut the line
+ * (`discount_amount` > 0 → `total_amount / quantity`).
+ */
+const describeLinePrice = (item: BasketLineLike) => {
+  const price = parseAmount(item.price ?? item.product?.price);
+  const retail = parseAmount(item.retail_price ?? item.product?.retail_price);
+  const discounted =
+    price !== null && retail !== null && retail > price && price >= 0;
+  const percent =
+    discounted && retail! > 0
+      ? Math.round(((retail! - price!) / retail!) * 100)
+      : 0;
+  const quantity = Number(item.quantity ?? 0);
+  const total = parseAmount(item.total_amount);
+  const basketDiscount = parseAmount(item.discount_amount) ?? 0;
+  const basketUnit =
+    basketDiscount > 0 && total !== null && quantity > 0
+      ? total / quantity
+      : null;
+
+  return { price, retail, discounted, percent, basketUnit };
+};
+
+// The 8×8 bookmark the basket design uses: a 1px outline (the inner cut-out
+// is the second subpath), solid once the product is favourited.
+const BOOKMARK_OUTLINE =
+  'M7 8L4 5.538L1 8V0H7V8ZM2 5.885L3.365 4.765L4 4.245L4.635 4.765L6 5.886V1H2V5.885Z';
+const BOOKMARK_SOLID = 'M7 8L4 5.538L1 8V0H7V8Z';
+
+// Sized in em so the `favorite` part's font-size sets the glyph size.
+const FavoriteGlyph = ({ filled }: { filled: boolean }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 8 8"
+    fill="currentColor"
+    fillRule="evenodd"
+    aria-hidden="true"
+    style={{ display: 'block' }}
+  >
+    <path d={filled ? BOOKMARK_SOLID : BOOKMARK_OUTLINE} />
+  </svg>
+);
+
+// The 6×4 chevron next to the quantity select, from the same design.
+const SelectChevron = () => (
+  <svg
+    width="6"
+    height="4"
+    viewBox="0 0 6 4"
+    fill="currentColor"
+    aria-hidden="true"
+    style={{ display: 'block', flex: '0 0 auto' }}
+  >
+    <path d="M0 0.882L0.847 0.071L2.994 2.238L5.153 0.071L6 0.882L2.994 3.929L0 0.882Z" />
+  </svg>
+);
+
 const formatVariant = (attributes: unknown, separator: string): string => {
   if (!attributes || typeof attributes !== 'object') return '';
 
@@ -85,9 +280,30 @@ const RemoveGlyph = ({ icon }: { icon: string }) =>
  * commerce-driven (basket service); the editor owns which affordances are
  * exposed, every shopper-facing string and the styling.
  *
- * Parts: root, item, image, content, name, variant, price, quantity,
- * quantity-button, quantity-input, actions, line-total, remove, empty.
- * A child marked as the item template replaces the built-in row.
+ * Parts: root, item, media, image, favorite, content, name, variant,
+ * variant-row, variant-label, variant-value, price-row, retail-price, price
+ * (`selected` while a retail figure is struck), discount-badge,
+ * basket-price, quantity, quantity-button, quantity-input, quantity-select,
+ * quantity-select-icon, gift-wrap, actions, line-total, remove, empty. A child marked as the item
+ * template replaces the built-in row.
+ *
+ * Properties (beyond the toggles): variantLayout (inline | rows), variantRows
+ * ("key:Label, …" for the rows layout), variantLabelSuffix, quantityControl
+ * (stepper | select), quantityMax, removePlacement (aside | inline),
+ * showGiftWrap (the pz-basket-gift-pack plugin slot), and the money style
+ * options every price block shares (decimals, currencyDisplay, currencyText,
+ * currencyPosition).
+ *
+ * Price extras, all off by default so the single price line published
+ * compositions render stays untouched: showRetailPrice strikes the price-list
+ * retail figure when it sits above the price; showDiscountBadge adds the
+ * percentage cut (discountBadgeFormat, `{percent}`); showBasketDiscount adds
+ * the per-unit figure a basket campaign brought the line down to
+ * (basketDiscountFormat, `{price}`), next to the undiscounted price. With any
+ * of them on, the price moves into a `price-row` flex line. showFavorite puts
+ * a wishlist toggle in the picture's corner (guests are sent to
+ * favoriteLoginHref; favoriteAddLabel / favoriteRemoveLabel are the
+ * accessible names).
  */
 const BasketItemsBlock = ({
   block,
@@ -123,6 +339,60 @@ const BasketItemsBlock = ({
   const removeLabel = prop('removeLabel', 'Remove');
   const emptyLabel = prop('emptyLabel', '').trim();
   const loadingLabel = prop('loadingLabel', '').trim();
+  const variantLayout = readOption<'inline' | 'rows'>(
+    block.properties?.variantLayout,
+    currentBreakpoint,
+    VARIANT_LAYOUTS,
+    'inline'
+  );
+  const variantRowSpec = parseVariantRowSpec(prop('variantRows', ''));
+  const variantLabelSuffix = prop('variantLabelSuffix', '');
+  const quantityControl = readOption<'stepper' | 'select'>(
+    block.properties?.quantityControl,
+    currentBreakpoint,
+    QUANTITY_CONTROLS,
+    'stepper'
+  );
+  const removePlacement = readOption<'aside' | 'inline'>(
+    block.properties?.removePlacement,
+    currentBreakpoint,
+    REMOVE_PLACEMENTS,
+    'aside'
+  );
+  const showGiftWrap = boolProp('showGiftWrap', false);
+  const showRetailPrice = boolProp('showRetailPrice', false);
+  const showDiscountBadge = boolProp('showDiscountBadge', false);
+  const discountBadgeFormat = prop('discountBadgeFormat', '-{percent}%');
+  const showBasketDiscount = boolProp('showBasketDiscount', false);
+  const basketDiscountFormat = prop('basketDiscountFormat', '{price}');
+  const showFavorite = boolProp('showFavorite', false);
+  const favoriteLoginHref = prop('favoriteLoginHref', '/auth');
+  const favoriteAddLabel = prop('favoriteAddLabel', 'Add to favourites');
+  const favoriteRemoveLabel = prop(
+    'favoriteRemoveLabel',
+    'Remove from favourites'
+  );
+  const money: MoneyStyleOptions = {
+    decimals: readOption<MoneyDecimals>(
+      block.properties?.decimals,
+      currentBreakpoint,
+      ALLOWED_DECIMALS,
+      'always'
+    ),
+    currencyDisplay: readOption<MoneyCurrencyDisplay>(
+      block.properties?.currencyDisplay,
+      currentBreakpoint,
+      ALLOWED_CURRENCY_DISPLAYS,
+      ''
+    ),
+    currencyText: prop('currencyText', ''),
+    currencyPosition: readOption<MoneyCurrencyPosition>(
+      block.properties?.currencyPosition,
+      currentBreakpoint,
+      ALLOWED_CURRENCY_POSITIONS,
+      ''
+    )
+  };
 
   const imageWidth = readCount(
     getResponsiveValue(block.properties?.imageWidth, currentBreakpoint, 72),
@@ -140,12 +410,57 @@ const BasketItemsBlock = ({
     getResponsiveValue(block.properties?.maxItems, currentBreakpoint, 0),
     0
   );
+  const quantityMax = Math.max(
+    1,
+    readCount(
+      getResponsiveValue(block.properties?.quantityMax, currentBreakpoint, 10),
+      10
+    )
+  );
 
   const pageContext = useThemePageContext();
   const { locale, currency: localeCurrency } = useLocalization();
   const { data: basket, isLoading } = useGetBasketQuery(undefined as never);
   const [updateQuantity, { isLoading: isUpdating }] =
     useUpdateQuantityMutation();
+  const { status: sessionStatus } = useSession();
+  const isAuthenticated = sessionStatus === 'authenticated';
+  // Favourites are user-scoped and the core has no "is favourited" endpoint,
+  // so the list is read once for the whole basket (guests and the designer
+  // skip it) and each line looks its product up in it.
+  const { data: favorites } = useGetFavoritesQuery(
+    { limit: FAVORITES_PAGE_SIZE },
+    { skip: !showFavorite || !isAuthenticated || isDesigner }
+  );
+  const [addFavorite, addFavoriteState] = useAddFavoriteMutation();
+  const [removeFavorite, removeFavoriteState] = useRemoveFavoriteMutation();
+  const favoriteBusy =
+    addFavoriteState.isLoading || removeFavoriteState.isLoading;
+
+  const findFavorite = (productPk: number | undefined) =>
+    productPk === undefined
+      ? undefined
+      : (favorites?.results || []).find(
+          (entry) => Number(entry?.product?.pk) === productPk
+        );
+
+  const toggleFavorite = async (item: BasketLineLike) => {
+    const productPk = item.product?.pk;
+
+    if (isDesigner || favoriteBusy || productPk === undefined) return;
+
+    try {
+      const entry = findFavorite(productPk);
+
+      if (entry) {
+        await removeFavorite(entry.pk).unwrap();
+      } else {
+        await addFavorite(productPk).unwrap();
+      }
+    } catch {
+      // Commerce rejected the toggle; the list query stays authoritative.
+    }
+  };
 
   const contextBasket = (pageContext?.basket ?? null) as {
     items?: BasketLineLike[];
@@ -183,16 +498,34 @@ const BasketItemsBlock = ({
   // item.url / item.quantity / item.total / item.variant in their own row.
   const templateItems = items.map((item, index) => {
     const currency = item.currency_type || localeCurrency;
+    const linePrice = describeLinePrice(item);
 
     return {
       key: String(item.id ?? item.product?.pk ?? index),
       name: item.product?.name || '',
-      image: item.image || item.product?.image || '',
+      image: getLineImage(item),
       url: item.product?.absolute_url || '',
       quantity: Number(item.quantity ?? 0),
       variant: formatVariant(item.attributes, variantSeparator),
-      price: formatMoney(item.unit_price || item.price, { locale, currency }),
-      total: formatMoney(item.total_amount, { locale, currency }),
+      variants: readVariantRows(item, variantRowSpec),
+      price: formatMoney(item.unit_price || item.price, {
+        locale,
+        currency,
+        ...money
+      }),
+      retailPrice: linePrice.discounted
+        ? formatMoney(linePrice.retail ?? undefined, {
+            locale,
+            currency,
+            ...money
+          })
+        : '',
+      discountPercent: linePrice.discounted ? linePrice.percent : 0,
+      basketPrice:
+        linePrice.basketUnit !== null
+          ? formatMoney(linePrice.basketUnit, { locale, currency, ...money })
+          : '',
+      total: formatMoney(item.total_amount, { locale, currency, ...money }),
       currency
     };
   });
@@ -264,14 +597,120 @@ const BasketItemsBlock = ({
           // The line reports the currency it was priced in; the storefront
           // currency is only the fallback when commerce omits it.
           const currency = item.currency_type || localeCurrency;
-          const image = item.image || item.product?.image || '';
+          const image = getLineImage(item);
           const name = item.product?.name || '';
           const href = item.product?.absolute_url || '';
           const linkHref = isDesigner ? '#' : href || '#';
           const quantity = Number(item.quantity ?? 0);
-          const variant = showVariant
-            ? formatVariant(item.attributes, variantSeparator)
-            : '';
+          const variant =
+            showVariant && variantLayout === 'inline'
+              ? formatVariant(item.attributes, variantSeparator)
+              : '';
+          const variantRows =
+            showVariant && variantLayout === 'rows'
+              ? readVariantRows(item, variantRowSpec)
+              : [];
+          // A select lists every quantity the shopper can pick; the line's own
+          // quantity is always offered even when it exceeds the configured
+          // ceiling, otherwise the control would silently show a wrong value.
+          const quantityOptions = Array.from(
+            { length: Math.max(quantityMax, quantity) },
+            (_, index) => index + 1
+          );
+          const linePrice = describeLinePrice(item);
+          const fmt = (value: number | string | null | undefined) =>
+            formatMoney(value ?? undefined, { locale, currency, ...money });
+          const priceExtras =
+            showRetailPrice || showDiscountBadge || showBasketDiscount;
+          const badgeStyle: React.CSSProperties = {
+            display: 'inline-block',
+            padding: '2px 6px',
+            background: 'var(--basket-items-badge-bg, #111827)',
+            color: 'var(--basket-items-badge-color, #ffffff)',
+            fontSize: '0.85em',
+            lineHeight: 1.4
+          };
+          const favoriteEntry = showFavorite
+            ? findFavorite(item.product?.pk)
+            : undefined;
+          const isFavorite = Boolean(favoriteEntry);
+          const favoriteStyle: React.CSSProperties = {
+            position: 'absolute',
+            top: '8px',
+            right: '8px',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '28px',
+            height: '28px',
+            padding: 0,
+            border: 'none',
+            background: 'var(--basket-items-favorite-bg, #ffffff)',
+            color: 'inherit',
+            cursor: favoriteBusy ? 'progress' : 'pointer',
+            textDecoration: 'none'
+          };
+          // Guests get a link to the login page instead of a mutation they
+          // cannot complete; the button is inert in the designer.
+          const favoriteControl =
+            showFavorite && !isAuthenticated ? (
+              <NextLink
+                href={isDesigner ? '#' : favoriteLoginHref}
+                onClick={guard}
+                data-basket-item-favorite="guest"
+                aria-label={favoriteAddLabel}
+                {...partAttrs('favorite')}
+                style={favoriteStyle}
+              >
+                <FavoriteGlyph filled={false} />
+              </NextLink>
+            ) : showFavorite ? (
+              <button
+                type="button"
+                data-basket-item-favorite={isFavorite ? 'active' : 'default'}
+                aria-pressed={isFavorite}
+                aria-label={isFavorite ? favoriteRemoveLabel : favoriteAddLabel}
+                disabled={favoriteBusy}
+                onClick={(event) => {
+                  event.preventDefault();
+                  event.stopPropagation();
+                  toggleFavorite(item);
+                }}
+                {...partAttrs('favorite', {
+                  selected: isFavorite,
+                  disabled: favoriteBusy,
+                  loading: favoriteBusy
+                })}
+                style={favoriteStyle}
+              >
+                <FavoriteGlyph filled={isFavorite} />
+              </button>
+            ) : null;
+
+          const removeControl = allowRemove && (
+            <button
+              type="button"
+              data-basket-item-remove=""
+              aria-label={removeAriaLabel}
+              disabled={isUpdating}
+              // Quantity 0 is how the commerce basket endpoint deletes a line.
+              onClick={() => changeQuantity(item, 0)}
+              {...partAttrs('remove', { disabled: isUpdating })}
+              style={{
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                color: 'inherit',
+                padding: 0
+              }}
+            >
+              {removeIcon === 'text' ? (
+                removeLabel
+              ) : (
+                <RemoveGlyph icon={removeIcon} />
+              )}
+            </button>
+          );
 
           return (
             <li
@@ -291,7 +730,7 @@ const BasketItemsBlock = ({
                   : null)
               }}
             >
-              {showImage && image && (
+              {showImage && image && !favoriteControl && (
                 <NextLink
                   href={linkHref}
                   onClick={guard}
@@ -311,6 +750,36 @@ const BasketItemsBlock = ({
                 </NextLink>
               )}
 
+              {/* With the favourite toggle on, the picture gets a positioned
+                  wrapper (`media`) so the toggle can sit in its corner. */}
+              {showImage && image && favoriteControl && (
+                <div
+                  {...partAttrs('media')}
+                  style={{
+                    flex: '0 0 auto',
+                    position: 'relative',
+                    display: 'block'
+                  }}
+                >
+                  <NextLink
+                    href={linkHref}
+                    onClick={guard}
+                    style={{ display: 'block' }}
+                  >
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      src={image}
+                      alt={name}
+                      width={imageWidth}
+                      height={imageHeight}
+                      {...partAttrs('image')}
+                      style={{ objectFit: 'cover', display: 'block' }}
+                    />
+                  </NextLink>
+                  {favoriteControl}
+                </div>
+              )}
+
               <div
                 {...partAttrs('content')}
                 style={{ flex: '1 1 auto', minWidth: 0 }}
@@ -335,7 +804,41 @@ const BasketItemsBlock = ({
                   </div>
                 )}
 
-                {showPrice && (
+                {variantRows.length > 0 && (
+                  <div
+                    data-basket-item-variant=""
+                    {...partAttrs('variant')}
+                    style={{
+                      marginTop: '4px',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: '4px'
+                    }}
+                  >
+                    {variantRows.map((row) => (
+                      <div
+                        key={row.key}
+                        data-basket-item-variant-row={row.key}
+                        {...partAttrs('variant-row')}
+                        style={{ display: 'flex', gap: '8px' }}
+                      >
+                        <span {...partAttrs('variant-label')}>
+                          {variantLabelSuffix
+                            ? `${row.label}${variantLabelSuffix}`
+                            : row.label}
+                        </span>
+                        <span
+                          {...partAttrs('variant-value')}
+                          style={{ opacity: 0.8 }}
+                        >
+                          {row.value}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {showPrice && !priceExtras && (
                   <div
                     data-basket-item-price=""
                     {...partAttrs('price')}
@@ -343,12 +846,129 @@ const BasketItemsBlock = ({
                   >
                     {formatMoney(item.unit_price || item.price, {
                       locale,
-                      currency
+                      currency,
+                      ...money
                     })}
                   </div>
                 )}
 
-                {allowQuantityChange && (
+                {showPrice && priceExtras && (
+                  <div
+                    data-basket-item-price-row=""
+                    {...partAttrs('price-row')}
+                    style={{
+                      display: 'flex',
+                      flexWrap: 'wrap',
+                      alignItems: 'center',
+                      gap: '8px',
+                      marginTop: '4px'
+                    }}
+                  >
+                    {showRetailPrice && linePrice.discounted && (
+                      <span
+                        data-basket-item-retail-price=""
+                        {...partAttrs('retail-price')}
+                        style={{ textDecoration: 'line-through', opacity: 0.6 }}
+                      >
+                        {fmt(linePrice.retail)}
+                      </span>
+                    )}
+                    <span
+                      data-basket-item-price=""
+                      {...partAttrs('price', {
+                        selected: linePrice.discounted
+                      })}
+                    >
+                      {showBasketDiscount && linePrice.basketUnit !== null
+                        ? fmt(item.price ?? item.product?.price)
+                        : fmt(item.unit_price || item.price)}
+                    </span>
+                    {showDiscountBadge &&
+                      linePrice.discounted &&
+                      linePrice.percent > 0 && (
+                        <span
+                          data-basket-item-discount-badge=""
+                          {...partAttrs('discount-badge')}
+                          style={badgeStyle}
+                        >
+                          {discountBadgeFormat.replace(
+                            /\{percent\}/g,
+                            String(linePrice.percent)
+                          )}
+                        </span>
+                      )}
+                    {showBasketDiscount && linePrice.basketUnit !== null && (
+                      <span
+                        data-basket-item-basket-price=""
+                        {...partAttrs('basket-price')}
+                        style={badgeStyle}
+                      >
+                        {basketDiscountFormat.replace(
+                          /\{price\}/g,
+                          fmt(linePrice.basketUnit)
+                        )}
+                      </span>
+                    )}
+                  </div>
+                )}
+
+                {allowQuantityChange && quantityControl === 'select' && (
+                  <div
+                    data-basket-item-quantity=""
+                    {...partAttrs('quantity', { loading: isUpdating })}
+                    style={{
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      gap: '6px',
+                      marginTop: '8px',
+                      padding: '2px 6px',
+                      border: '1px solid var(--basket-items-border, #e5e7eb)',
+                      borderRadius: '4px'
+                    }}
+                  >
+                    {/* The native arrow is hidden so the chevron next to the
+                        select is the one the brand styles. */}
+                    <select
+                      value={quantity}
+                      aria-label={increaseAriaLabel}
+                      disabled={isUpdating}
+                      onChange={(event) =>
+                        changeQuantity(item, Number(event.target.value))
+                      }
+                      {...partAttrs('quantity-select', {
+                        disabled: isUpdating,
+                        loading: isUpdating
+                      })}
+                      style={{
+                        flex: '1 1 auto',
+                        minWidth: 0,
+                        appearance: 'none',
+                        WebkitAppearance: 'none',
+                        MozAppearance: 'none',
+                        background: 'transparent',
+                        border: 'none',
+                        color: 'inherit',
+                        font: 'inherit',
+                        cursor: 'pointer',
+                        padding: 0
+                      }}
+                    >
+                      {quantityOptions.map((option) => (
+                        <option key={option} value={option}>
+                          {option}
+                        </option>
+                      ))}
+                    </select>
+                    <span
+                      {...partAttrs('quantity-select-icon')}
+                      style={{ display: 'inline-flex', pointerEvents: 'none' }}
+                    >
+                      <SelectChevron />
+                    </span>
+                  </div>
+                )}
+
+                {allowQuantityChange && quantityControl === 'stepper' && (
                   <div
                     data-basket-item-quantity=""
                     {...partAttrs('quantity', { loading: isUpdating })}
@@ -401,6 +1021,40 @@ const BasketItemsBlock = ({
                     </button>
                   </div>
                 )}
+
+                {showGiftWrap && !isDesigner && (
+                  <div
+                    data-basket-item-gift-wrap=""
+                    {...partAttrs('gift-wrap')}
+                    style={{ marginTop: '8px' }}
+                  >
+                    <PluginModule
+                      component={Component.BasketGiftPack}
+                      props={{ basketItem: item }}
+                    />
+                  </div>
+                )}
+
+                {showGiftWrap && isDesigner && (
+                  <div
+                    data-basket-item-gift-wrap=""
+                    {...partAttrs('gift-wrap')}
+                    style={{ marginTop: '8px', opacity: 0.6 }}
+                  >
+                    {/* The plugin renders against a live basket only; the
+                        canvas shows where it lands. */}
+                    Gift wrap (plugin)
+                  </div>
+                )}
+
+                {removePlacement === 'inline' && removeControl && (
+                  <div
+                    data-basket-item-remove-slot=""
+                    style={{ marginTop: '8px' }}
+                  >
+                    {removeControl}
+                  </div>
+                )}
               </div>
 
               <div
@@ -414,38 +1068,16 @@ const BasketItemsBlock = ({
                 }}
               >
                 {showTotal && (
-                  <span
-                    data-basket-item-total=""
-                    {...partAttrs('line-total')}
-                  >
-                    {formatMoney(item.total_amount, { locale, currency })}
+                  <span data-basket-item-total="" {...partAttrs('line-total')}>
+                    {formatMoney(item.total_amount, {
+                      locale,
+                      currency,
+                      ...money
+                    })}
                   </span>
                 )}
 
-                {allowRemove && (
-                  <button
-                    type="button"
-                    data-basket-item-remove=""
-                    aria-label={removeAriaLabel}
-                    disabled={isUpdating}
-                    // Quantity 0 is how the commerce basket endpoint deletes a line.
-                    onClick={() => changeQuantity(item, 0)}
-                    {...partAttrs('remove', { disabled: isUpdating })}
-                    style={{
-                      background: 'none',
-                      border: 'none',
-                      cursor: 'pointer',
-                      color: 'inherit',
-                      padding: 0
-                    }}
-                  >
-                    {removeIcon === 'text' ? (
-                      removeLabel
-                    ) : (
-                      <RemoveGlyph icon={removeIcon} />
-                    )}
-                  </button>
-                )}
+                {removePlacement === 'aside' && removeControl}
               </div>
             </li>
           );