@akinon/pz-theme 2.0.37-beta.0 → 2.0.37

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

@@ -0,0 +1,457 @@
+'use client';
+
+import React from 'react';
+import NextLink from 'next/link';
+import {
+  useGetBasketQuery,
+  useUpdateQuantityMutation
+} from '@akinon/next/data/client/basket';
+import { useLocalization } from '@akinon/next/hooks';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { useThemePageContext } from '../theme-page-context';
+import { formatMoney } from './commerce-format';
+import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { readToggle } from './product-block-utils';
+import { BlockRendererProps } from './block-renderer-registry';
+
+interface BasketLineLike {
+  id?: number;
+  quantity?: number;
+  image?: string;
+  price?: string;
+  unit_price?: string;
+  total_amount?: string;
+  currency_type?: string;
+  attributes?: unknown;
+  product?: {
+    pk?: number;
+    name?: string;
+    absolute_url?: string;
+    image?: string;
+  } | null;
+}
+
+/**
+ * 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.
+ */
+const formatVariant = (attributes: unknown, separator: string): string => {
+  if (!attributes || typeof attributes !== 'object') return '';
+
+  return Object.values(attributes as Record<string, unknown>)
+    .map((value) =>
+      value === null || value === undefined ? '' : String(value).trim()
+    )
+    .filter(Boolean)
+    .join(separator);
+};
+
+const readCount = (value: unknown, fallback: number): number => {
+  const numeric = Math.round(Number(value));
+
+  return Number.isFinite(numeric) && numeric >= 0 ? numeric : fallback;
+};
+
+const RemoveGlyph = ({ icon }: { icon: string }) =>
+  icon === 'trash' ? (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+    >
+      <path d="M4 7h16M9 7V5h6v2M7 7l1 13h8l1-13" />
+    </svg>
+  ) : (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+    >
+      <path d="M6 6l12 12M18 6L6 18" />
+    </svg>
+  );
+
+/**
+ * Functional commerce block: editable basket lines. Basket CONTENT stays
+ * 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.
+ */
+const BasketItemsBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const boolProp = (key: string, fallback: boolean) =>
+    readToggle(block.properties?.[key], currentBreakpoint, fallback);
+
+  const showImage = boolProp('showImage', true);
+  const allowQuantityChange = boolProp('allowQuantityChange', true);
+  const allowRemove = boolProp('allowRemove', true);
+  const showPrice = boolProp('showPrice', true);
+  const showTotal = boolProp('showTotal', true);
+  const showVariant = boolProp('showVariant', false);
+  const showDivider = boolProp('showDivider', true);
+
+  const variantSeparator = prop('variantSeparator', ' / ');
+  const decreaseLabel = prop('decreaseLabel', '–');
+  const increaseLabel = prop('increaseLabel', '+');
+  const decreaseAriaLabel = prop('decreaseAriaLabel', 'Decrease quantity');
+  const increaseAriaLabel = prop('increaseAriaLabel', 'Increase quantity');
+  const removeAriaLabel = prop('removeAriaLabel', 'Remove item');
+  const removeIcon = prop('removeIcon', 'cross');
+  const removeLabel = prop('removeLabel', 'Remove');
+  const emptyLabel = prop('emptyLabel', '').trim();
+  const loadingLabel = prop('loadingLabel', '').trim();
+
+  const imageWidth = readCount(
+    getResponsiveValue(block.properties?.imageWidth, currentBreakpoint, 72),
+    72
+  );
+  const imageHeight = readCount(
+    getResponsiveValue(block.properties?.imageHeight, currentBreakpoint, 96),
+    96
+  );
+  const nameLines = readCount(
+    getResponsiveValue(block.properties?.nameLines, currentBreakpoint, 0),
+    0
+  );
+  const maxItems = readCount(
+    getResponsiveValue(block.properties?.maxItems, currentBreakpoint, 0),
+    0
+  );
+
+  const pageContext = useThemePageContext();
+  const { locale, currency: localeCurrency } = useLocalization();
+  const { data: basket, isLoading } = useGetBasketQuery(undefined as never);
+  const [updateQuantity, { isLoading: isUpdating }] =
+    useUpdateQuantityMutation();
+
+  const contextBasket = (pageContext?.basket ?? null) as {
+    items?: BasketLineLike[];
+  } | null;
+
+  // The live query owns the post-mutation state; the SSR page context is only
+  // a first-paint fallback so the list is not empty before the query resolves.
+  const allItems: BasketLineLike[] =
+    (basket as { basketitem_set?: BasketLineLike[] } | undefined)
+      ?.basketitem_set ??
+    contextBasket?.items ??
+    [];
+
+  const items = maxItems > 0 ? allItems.slice(0, maxItems) : allItems;
+
+  const changeQuantity = (item: BasketLineLike, nextQuantity: number) => {
+    const productPk = item.product?.pk;
+
+    if (isDesigner || productPk === undefined || nextQuantity < 0) return;
+
+    updateQuantity({
+      product: productPk,
+      quantity: nextQuantity,
+      attributes: (item.attributes as Record<string, unknown>) || {}
+    });
+  };
+
+  // Navigating inside the designer iframe would drop the author out of the
+  // page they are editing, so the product links are inert there.
+  const guard = (event: React.MouseEvent) => {
+    if (isDesigner) event.preventDefault();
+  };
+
+  // Plain objects so a designer binds item.name / item.price / item.image /
+  // item.url / item.quantity / item.total / item.variant in their own row.
+  const templateItems = items.map((item, index) => {
+    const currency = item.currency_type || localeCurrency;
+
+    return {
+      key: String(item.id ?? item.product?.pk ?? index),
+      name: item.product?.name || '',
+      image: item.image || item.product?.image || '',
+      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 }),
+      currency
+    };
+  });
+
+  // A designer who marked a child as the row layout gets that layout repeated
+  // per line; otherwise the built-in row renders unchanged.
+  const customRows = hasItemTemplate(block, currentBreakpoint) ? (
+    <ItemTemplateList
+      block={block}
+      items={templateItems as unknown as Record<string, unknown>[]}
+      placeholderId={placeholderId}
+      sectionId={sectionId}
+      isDesigner={isDesigner}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+    />
+  ) : null;
+
+  if (items.length === 0 && !customRows) {
+    const authoredLabel = isLoading ? loadingLabel : emptyLabel;
+
+    // Authored empty copy is the one case the block speaks to the shopper; with
+    // none set the storefront stays silent exactly as before.
+    if (!isDesigner && !authoredLabel) return null;
+
+    const designerLabel = isLoading
+      ? 'Basket items (loading)'
+      : 'Basket items (empty)';
+
+    return (
+      <div
+        data-basket-items=""
+        data-basket-items-state="empty"
+        {...partAttrs('empty', { empty: true, loading: isLoading })}
+      >
+        {authoredLabel || (isDesigner ? designerLabel : '')}
+      </div>
+    );
+  }
+
+  const nameStyle: React.CSSProperties = {
+    color: 'inherit',
+    textDecoration: 'none',
+    ...(nameLines > 0
+      ? {
+          display: '-webkit-box',
+          WebkitBoxOrient: 'vertical',
+          WebkitLineClamp: nameLines,
+          overflow: 'hidden'
+        }
+      : null)
+  };
+
+  return (
+    <ul
+      data-basket-items=""
+      {...partAttrs('root', { loading: isUpdating })}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--basket-items-gap, 16px)',
+        listStyle: 'none',
+        margin: 0,
+        padding: 0
+      }}
+    >
+      {customRows ??
+        items.map((item, index) => {
+          // 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 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)
+            : '';
+
+          return (
+            <li
+              key={item.id ?? item.product?.pk ?? index}
+              data-basket-item=""
+              {...partAttrs('item')}
+              style={{
+                display: 'flex',
+                alignItems: 'flex-start',
+                gap: '12px',
+                paddingBottom: '16px',
+                ...(showDivider
+                  ? {
+                      borderBottom:
+                        '1px solid var(--basket-items-border, #e5e7eb)'
+                    }
+                  : null)
+              }}
+            >
+              {showImage && image && (
+                <NextLink
+                  href={linkHref}
+                  onClick={guard}
+                  style={{ flex: '0 0 auto', display: 'block' }}
+                >
+                  {/* Plain img: basket line thumbnails come from arbitrary
+                    commerce CDNs that the brand next.config may not allow. */}
+                  {/* 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>
+              )}
+
+              <div
+                {...partAttrs('content')}
+                style={{ flex: '1 1 auto', minWidth: 0 }}
+              >
+                <NextLink
+                  href={linkHref}
+                  onClick={guard}
+                  data-basket-item-name=""
+                  {...partAttrs('name')}
+                  style={nameStyle}
+                >
+                  {name}
+                </NextLink>
+
+                {variant && (
+                  <div
+                    data-basket-item-variant=""
+                    {...partAttrs('variant')}
+                    style={{ marginTop: '4px', opacity: 0.8 }}
+                  >
+                    {variant}
+                  </div>
+                )}
+
+                {showPrice && (
+                  <div
+                    data-basket-item-price=""
+                    {...partAttrs('price')}
+                    style={{ marginTop: '4px', opacity: 0.8 }}
+                  >
+                    {formatMoney(item.unit_price || item.price, {
+                      locale,
+                      currency
+                    })}
+                  </div>
+                )}
+
+                {allowQuantityChange && (
+                  <div
+                    data-basket-item-quantity=""
+                    {...partAttrs('quantity', { loading: isUpdating })}
+                    style={{
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      gap: '8px',
+                      marginTop: '8px',
+                      border: '1px solid var(--basket-items-border, #e5e7eb)',
+                      borderRadius: '4px',
+                      padding: '2px 6px'
+                    }}
+                  >
+                    <button
+                      type="button"
+                      aria-label={decreaseAriaLabel}
+                      disabled={isUpdating || quantity <= 1}
+                      onClick={() => changeQuantity(item, quantity - 1)}
+                      {...partAttrs('quantity-button', {
+                        disabled: isUpdating || quantity <= 1
+                      })}
+                      style={{
+                        background: 'none',
+                        border: 'none',
+                        cursor: 'pointer',
+                        color: 'inherit',
+                        padding: '2px 6px'
+                      }}
+                    >
+                      {decreaseLabel}
+                    </button>
+                    <span {...partAttrs('quantity-input')}>{quantity}</span>
+                    <button
+                      type="button"
+                      aria-label={increaseAriaLabel}
+                      disabled={isUpdating}
+                      onClick={() => changeQuantity(item, quantity + 1)}
+                      {...partAttrs('quantity-button', {
+                        disabled: isUpdating
+                      })}
+                      style={{
+                        background: 'none',
+                        border: 'none',
+                        cursor: 'pointer',
+                        color: 'inherit',
+                        padding: '2px 6px'
+                      }}
+                    >
+                      {increaseLabel}
+                    </button>
+                  </div>
+                )}
+              </div>
+
+              <div
+                {...partAttrs('actions')}
+                style={{
+                  flex: '0 0 auto',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'flex-end',
+                  gap: '8px'
+                }}
+              >
+                {showTotal && (
+                  <span
+                    data-basket-item-total=""
+                    {...partAttrs('line-total')}
+                  >
+                    {formatMoney(item.total_amount, { locale, currency })}
+                  </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>
+                )}
+              </div>
+            </li>
+          );
+        })}
+    </ul>
+  );
+};
+
+export default BasketItemsBlock;