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

package/src/blocks/favourites-grid-block.tsx

@@ -0,0 +1,510 @@
+'use client';
+
+import React from 'react';
+import NextLink from 'next/link';
+import { useSession } from 'next-auth/react';
+import {
+  useGetFavoritesQuery,
+  useRemoveFavoriteMutation
+} from '@akinon/next/data/client/wishlist';
+import { useAddProductMutation } from '@akinon/next/data/client/product';
+import { basketApi } from '@akinon/next/data/client/basket';
+import { useAppDispatch } from '@akinon/next/redux/hooks';
+import { useLocalization } from '@akinon/next/hooks';
+import { getResponsiveValue, partAttrs } from '../utils';
+import {
+  MOBILE_MEDIA_QUERY_COMPACT,
+  TABLET_MEDIA_QUERY_COMPACT
+} from '../utils/breakpoints';
+import { formatMoney, parseAmount } from './commerce-format';
+import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder, readToggle } from './product-block-utils';
+
+/** Commerce paginates the wishlist; one page is enough for a grid. */
+const FAVOURITES_PAGE_SIZE = 100;
+
+/**
+ * The remove control's glyph. The cross is the icon the block shipped with, so
+ * it stays the default; the others are the two a brand asks for next.
+ */
+const REMOVE_ICONS: Record<string, string> = {
+  x: 'M6 6l12 12M18 6L6 18',
+  trash: 'M4 7h16M9 7V5h6v2M6 7l1 13h10l1-13M10 11v6M14 11v6',
+  heart:
+    'M12 20s-7-4.35-7-9a4 4 0 0 1 7-2.65A4 4 0 0 1 19 11c0 4.65-7 9-7 9z'
+};
+
+interface FavouriteProductLike {
+  pk?: number;
+  name?: string;
+  absolute_url?: string;
+  image?: string;
+  price?: string | number;
+  retail_price?: string | number;
+  currency_type?: string;
+  stock?: number;
+  in_stock?: boolean;
+  productimage_set?: Array<{ image?: string }>;
+}
+
+interface FavouriteLike {
+  pk?: number;
+  product?: FavouriteProductLike | null;
+}
+
+const clampColumns = (
+  value: unknown,
+  fallback: number,
+  min: number,
+  max: number
+) => {
+  const numeric = Math.round(Number(value));
+  if (!Number.isFinite(numeric)) return fallback;
+  return Math.min(max, Math.max(min, numeric));
+};
+
+const isInStock = (product: FavouriteProductLike): boolean => {
+  if (typeof product.in_stock === 'boolean') return product.in_stock;
+
+  const stock = Number(product.stock);
+  if (Number.isFinite(stock)) return stock > 0;
+
+  // Unknown stock must not block the CTA — commerce still validates on add.
+  return true;
+};
+
+/**
+ * Functional account block: the wishlist as a product grid, matching the
+ * product-grid card look. Wishlist CONTENT stays commerce-driven (wishlist
+ * service); the editor owns the column counts, which fields the card carries,
+ * every caption and the styling.
+ * Properties: columnsDesktop, columnsMobile, limit, showRemove, removeIcon,
+ * showAddToCart, showPrice, showRetailPrice, imageRatio, nameLines, addLabel,
+ * outOfStockLabel, removeLabel, emptyLabel.
+ * Parts: list, item, link, image, name, price, retail-price, add, remove,
+ * empty.
+ */
+const FavouritesGridBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const columnsDesktop = clampColumns(
+    getResponsiveValue(block.properties?.columnsDesktop, currentBreakpoint, 4),
+    4,
+    2,
+    6
+  );
+  const columnsMobile = clampColumns(
+    getResponsiveValue(block.properties?.columnsMobile, currentBreakpoint, 2),
+    2,
+    1,
+    3
+  );
+  // Unset means "whatever the mobile count is", which is what a tablet has
+  // been shown since `max-width: 1023px` was the only query — so a grid that
+  // authors nothing here emits the CSS it emitted before.
+  const columnsTabletRaw = block.properties?.columnsTablet;
+  const columnsTabletResolved =
+    columnsTabletRaw === undefined ||
+    columnsTabletRaw === null ||
+    columnsTabletRaw === ''
+      ? null
+      : Number(getResponsiveValue(columnsTabletRaw, currentBreakpoint, 0));
+  // 0 is the descriptor's "keep the mobile count" setting, and so is a value
+  // that is missing or unparseable — all three mean no tablet rule.
+  const columnsTablet =
+    columnsTabletResolved === null ||
+    !Number.isFinite(columnsTabletResolved) ||
+    columnsTabletResolved < 1
+      ? null
+      : clampColumns(
+          getResponsiveValue(columnsTabletRaw, currentBreakpoint, columnsMobile),
+          columnsMobile,
+          1,
+          6
+        );
+  const showRemove = readToggle(
+    block.properties?.showRemove,
+    currentBreakpoint,
+    true
+  );
+  const showAddToCart = readToggle(
+    block.properties?.showAddToCart,
+    currentBreakpoint,
+    true
+  );
+  const showPrice = readToggle(
+    block.properties?.showPrice,
+    currentBreakpoint,
+    true
+  );
+  const showRetailPrice = readToggle(
+    block.properties?.showRetailPrice,
+    currentBreakpoint,
+    true
+  );
+  const text = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+  const addLabel = text('addLabel', 'Add to Cart');
+  const outOfStockLabel = text('outOfStockLabel', 'Out of Stock');
+  const removeLabel = text('removeLabel', 'Remove from favourites');
+  const emptyLabel = text('emptyLabel', '');
+  const removeIcon = REMOVE_ICONS[text('removeIcon', 'x')] || REMOVE_ICONS.x;
+  const imageRatio = text('imageRatio', 'auto');
+  const rawNameLines = Math.round(
+    Number(getResponsiveValue(block.properties?.nameLines, currentBreakpoint, 0))
+  );
+  // 0 leaves the name unclamped, which is what the card has always rendered.
+  const nameLines =
+    Number.isFinite(rawNameLines) && rawNameLines > 0 ? rawNameLines : 0;
+  const rawLimit = Math.round(
+    Number(getResponsiveValue(block.properties?.limit, currentBreakpoint, 0))
+  );
+  const limit = Number.isFinite(rawLimit) && rawLimit > 0 ? rawLimit : 0;
+
+  const { locale, currency: localeCurrency } = useLocalization();
+  const dispatch = useAppDispatch();
+  const { status } = useSession();
+  const isAuthenticated = status === 'authenticated';
+
+  // Guests have no wishlist endpoint; skipping avoids a guaranteed 403 on every
+  // page that hosts this block.
+  const { data, isLoading } = useGetFavoritesQuery(
+    { limit: FAVOURITES_PAGE_SIZE, page: 1 },
+    { skip: !isAuthenticated }
+  );
+  const [removeFavorite, { isLoading: isRemoving }] =
+    useRemoveFavoriteMutation();
+  const [addProduct, { isLoading: isAdding }] = useAddProductMutation();
+
+  const allFavourites: FavouriteLike[] =
+    (data as { results?: FavouriteLike[] } | undefined)?.results ?? [];
+  const favourites = limit > 0 ? allFavourites.slice(0, limit) : allFavourites;
+  const isBusy = isRemoving || isAdding;
+
+  const remove = (favouritePk?: number) => {
+    // A click inside the designer must never touch the shopper's real wishlist.
+    if (isDesigner || isBusy || favouritePk === undefined) return;
+
+    // The endpoint keys on the wishlist ENTRY pk, not the product pk.
+    removeFavorite(favouritePk);
+  };
+
+  const addToCart = async (product: FavouriteProductLike) => {
+    const productPk = Number(product.pk);
+
+    if (isDesigner || isBusy || !Number.isFinite(productPk)) return;
+
+    try {
+      await addProduct({
+        product: productPk,
+        quantity: 1,
+        attributes: {}
+      }).unwrap();
+
+      // addProduct only invalidates MiniBasket, so the full basket query (used
+      // by the mini-basket chrome block) has to be refreshed explicitly.
+      dispatch(basketApi.util.invalidateTags(['Basket', 'MiniBasket']));
+    } catch {
+      // Commerce owns the failure message (out of stock, variant required);
+      // the grid stays as it was rather than inventing an error state.
+    }
+  };
+
+  /** Everything the card (and a designer's own layout) reads off one entry. */
+  const describe = (favourite: FavouriteLike, index: number) => {
+    const product = favourite.product as FavouriteProductLike;
+    const name = product.name || '';
+    const href = product.absolute_url || '';
+    const image = product.image || product.productimage_set?.[0]?.image || '';
+    // Commerce sends the currency per product; the active currency is only
+    // the fallback for payloads that omit it.
+    const currency = product.currency_type || localeCurrency;
+    const price = formatMoney(product.price, { locale, currency });
+    const retailPrice = formatMoney(product.retail_price, {
+      locale,
+      currency
+    });
+    // Parsed with the shared parser, not Number(): "1.299,90" is NaN to
+    // Number() and would silently drop the discount flag.
+    const numericPrice = parseAmount(product.price);
+    const numericRetail = parseAmount(product.retail_price);
+    const hasDiscount =
+      numericPrice !== null &&
+      numericRetail !== null &&
+      numericRetail > numericPrice;
+
+    return {
+      key: String(favourite.pk ?? product.pk ?? index),
+      pk: favourite.pk ?? '',
+      productPk: product.pk ?? '',
+      name,
+      url: href,
+      href,
+      image,
+      price,
+      retailPrice,
+      hasDiscount,
+      inStock: isInStock(product)
+    };
+  };
+
+  const rows = favourites
+    .filter((favourite) => Boolean(favourite.product))
+    .map(describe);
+
+  // A designer who marked a child as the card layout gets that layout repeated
+  // per saved product; otherwise the built-in card renders unchanged.
+  const customCards = hasItemTemplate(block, currentBreakpoint) ? (
+    <ItemTemplateList
+      block={block}
+      items={rows}
+      placeholderId={placeholderId}
+      sectionId={sectionId}
+      isDesigner={isDesigner}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+      designerPlaceholderCount={4}
+    />
+  ) : null;
+
+  if (favourites.length === 0 && !customCards) {
+    if (isDesigner) {
+      return (
+        <DesignerPlaceholder
+          label={
+            isLoading
+              ? 'Favourites (loading)'
+              : 'Favourites (no saved products)'
+          }
+          attribute="data-favourites-grid"
+        />
+      );
+    }
+
+    // Without an empty message the block stays absent, which is what every
+    // published composition renders today.
+    if (!isAuthenticated || isLoading || !emptyLabel) return null;
+
+    return (
+      <div
+        data-favourites-grid=""
+        data-favourites-grid-state="empty"
+        {...partAttrs('empty', { empty: true })}
+      >
+        {emptyLabel}
+      </div>
+    );
+  }
+
+  // Column counts are block PROPERTIES, and properties are resolved with the
+  // designer breakpoint only — on the live storefront currentBreakpoint is
+  // always 'desktop'. A scoped rule with the same 1023px cutoff the theme CSS
+  // generator uses keeps real mobile viewports in sync with the editor.
+  const gridId = String(block.id || 'favourites').replace(/[^a-zA-Z0-9_-]/g, '');
+  const baseColumns =
+    currentBreakpoint === 'tablet'
+      ? columnsTablet ?? columnsMobile
+      : currentBreakpoint === 'mobile'
+      ? columnsMobile
+      : columnsDesktop;
+
+  // Navigating inside the designer iframe would drop the author out of the page
+  // they are editing, so the cards are inert there.
+  const guard = (event: React.MouseEvent) => {
+    if (isDesigner) event.preventDefault();
+  };
+
+  const imageStyle: React.CSSProperties = {
+    width: '100%',
+    height: 'auto',
+    display: 'block',
+    objectFit: 'cover',
+    ...(imageRatio !== 'auto' ? { aspectRatio: imageRatio } : null)
+  };
+  const nameStyle: React.CSSProperties | undefined =
+    nameLines > 0
+      ? {
+          display: '-webkit-box',
+          WebkitBoxOrient: 'vertical',
+          // A string, so React cannot decide the value needs a px suffix.
+          WebkitLineClamp: String(nameLines),
+          overflow: 'hidden'
+        }
+      : undefined;
+
+  return (
+    <div
+      data-favourites-grid=""
+      data-favourites-grid-id={gridId}
+      aria-busy={isBusy}
+      {...partAttrs('list')}
+      style={{ display: 'grid', gap: 'var(--favourites-grid-gap, 16px)' }}
+    >
+      <style>
+        {`[data-favourites-grid-id="${gridId}"]{grid-template-columns:repeat(${baseColumns},minmax(0,1fr));}` +
+          `${MOBILE_MEDIA_QUERY_COMPACT}{[data-favourites-grid-id="${gridId}"]{grid-template-columns:repeat(${columnsMobile},minmax(0,1fr));}}` +
+          // After the mobile query, and only when authored.
+          (columnsTablet !== null
+            ? `${TABLET_MEDIA_QUERY_COMPACT}{[data-favourites-grid-id="${gridId}"]{grid-template-columns:repeat(${columnsTablet},minmax(0,1fr));}}`
+            : '')}
+      </style>
+
+      {customCards ??
+        favourites.map((favourite, index) => {
+          const product = favourite.product;
+
+          if (!product) return null;
+
+          const card = describe(favourite, index);
+
+          return (
+            <div
+              key={favourite.pk ?? product.pk ?? index}
+              data-favourites-card=""
+              {...partAttrs('item')}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '8px',
+                position: 'relative'
+              }}
+            >
+              <NextLink
+                href={isDesigner ? '#' : card.href || '#'}
+                onClick={guard}
+                data-favourites-card-link=""
+                {...partAttrs('link')}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '8px',
+                  color: 'inherit',
+                  textDecoration: 'none'
+                }}
+              >
+                {card.image ? (
+                  // Plain img: wishlist 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={card.image}
+                    alt={card.name}
+                    loading="lazy"
+                    data-favourites-card-image=""
+                    {...partAttrs('image')}
+                    style={imageStyle}
+                  />
+                ) : (
+                  <span
+                    data-favourites-card-image=""
+                    {...partAttrs('image', { empty: true })}
+                    style={{
+                      display: 'block',
+                      width: '100%',
+                      aspectRatio: imageRatio === 'auto' ? '3 / 4' : imageRatio,
+                      background: '#f1f5f9'
+                    }}
+                  />
+                )}
+
+                <span
+                  data-favourites-card-name=""
+                  {...partAttrs('name')}
+                  style={nameStyle}
+                >
+                  {card.name}
+                </span>
+              </NextLink>
+
+              {showPrice && card.price && (
+                <span
+                  data-favourites-card-price=""
+                  {...partAttrs('price')}
+                  style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+                >
+                  {showRetailPrice && card.hasDiscount && card.retailPrice && (
+                    <s
+                      data-favourites-card-retail-price=""
+                      {...partAttrs('retail-price')}
+                      style={{ opacity: 0.6, fontSize: '0.9em' }}
+                    >
+                      {card.retailPrice}
+                    </s>
+                  )}
+                  <span>{card.price}</span>
+                </span>
+              )}
+
+              {showAddToCart && (
+                <button
+                  type="button"
+                  data-favourites-card-add=""
+                  disabled={isBusy || !card.inStock}
+                  onClick={() => addToCart(product)}
+                  {...partAttrs('add', {
+                    disabled: !card.inStock,
+                    loading: isBusy
+                  })}
+                  style={{
+                    padding: '10px 16px',
+                    border: '1px solid currentColor',
+                    background: 'transparent',
+                    color: 'inherit',
+                    font: 'inherit',
+                    cursor:
+                      isBusy || !card.inStock ? 'not-allowed' : 'pointer',
+                    opacity: !card.inStock ? 0.6 : isBusy ? 0.7 : 1
+                  }}
+                >
+                  {card.inStock ? addLabel : outOfStockLabel}
+                </button>
+              )}
+
+              {showRemove && (
+                <button
+                  type="button"
+                  data-favourites-card-remove=""
+                  aria-label={removeLabel}
+                  disabled={isBusy}
+                  onClick={() => remove(favourite.pk)}
+                  {...partAttrs('remove', { loading: isBusy })}
+                  style={{
+                    position: 'absolute',
+                    top: '8px',
+                    right: '8px',
+                    background: 'none',
+                    border: 'none',
+                    padding: 0,
+                    color: 'inherit',
+                    cursor: isBusy ? 'not-allowed' : 'pointer'
+                  }}
+                >
+                  <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.6"
+                    strokeLinecap="round"
+                  >
+                    <path d={removeIcon} />
+                  </svg>
+                </button>
+              )}
+            </div>
+          );
+        })}
+    </div>
+  );
+};
+
+export default FavouritesGridBlock;

package/src/blocks/forgot-password-block.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useForgotPasswordMutation } from '@akinon/next/data/client/user';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { readToggle } from './product-block-utils';
+import { BlockRendererProps } from './block-renderer-registry';
+
+/**
+ * Functional auth block: e-mail input that triggers the password reset mail
+ * through the v1 `forgotPassword` mutation. Behaviour is fixed (commerce sends
+ * the mail); the editor owns the labels and the styling.
+ * Properties: submitLabel, busyLabel, successLabel, emailLabel,
+ * emailPlaceholder, showLabels, errorLabel, previewSuccess.
+ * Parts: form, field, label, input, error, submit, success.
+ */
+const ForgotPasswordBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const submitLabel = prop('submitLabel', 'Send reset link');
+  // Empty on purpose: without a busy label the submit caption stays put while
+  // the request runs, which is what published blocks render today.
+  const busyLabel = prop('busyLabel', '');
+  const successLabel = prop(
+    'successLabel',
+    'If the address is registered, a reset link is on its way.'
+  );
+  const emailLabel = prop('emailLabel', 'E-mail');
+  const emailPlaceholder = prop('emailPlaceholder', '');
+  const showLabels = readToggle(
+    block.properties?.showLabels,
+    currentBreakpoint,
+    true
+  );
+  const errorLabel = prop(
+    'errorLabel',
+    'Could not send the reset mail. Please try again.'
+  );
+  // The success copy replaces the form, so on the storefront it is unreachable
+  // from the designer — this shows it there without submitting anything.
+  const previewSuccess = readToggle(
+    block.properties?.previewSuccess,
+    currentBreakpoint,
+    false
+  );
+
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+  const [forgotPassword, { isLoading, isSuccess }] = useForgotPasswordMutation();
+
+  const submit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setError('');
+
+    // Submitting inside the designer would send a real reset mail.
+    if (isDesigner || isLoading) return;
+
+    try {
+      await forgotPassword({ email }).unwrap();
+    } catch {
+      setError(errorLabel);
+    }
+  };
+
+  // The success copy replaces the form so the shopper is not invited to submit
+  // the same address twice; the root attribute is kept so styling still applies.
+  if ((isSuccess && !isDesigner) || (isDesigner && previewSuccess)) {
+    return (
+      <div
+        data-forgot-password=""
+        data-forgot-password-state="success"
+        {...partAttrs('success')}
+        role="status"
+      >
+        {successLabel}
+      </div>
+    );
+  }
+
+  return (
+    <form
+      data-forgot-password=""
+      data-forgot-password-state={isLoading ? 'busy' : 'idle'}
+      {...partAttrs('form')}
+      onSubmit={submit}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--forgot-password-gap, 12px)'
+      }}
+    >
+      <label
+        data-forgot-password-field="email"
+        {...partAttrs('field')}
+        style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}
+      >
+        {/* Hiding the caption must not cost the input its accessible name, so
+            the label text moves onto aria-label instead of disappearing. */}
+        {showLabels && <span {...partAttrs('label')}>{emailLabel}</span>}
+        <input
+          type="email"
+          name="email"
+          value={email}
+          onChange={(event) => setEmail(event.target.value)}
+          autoComplete="email"
+          placeholder={emailPlaceholder || undefined}
+          aria-label={showLabels ? undefined : emailLabel}
+          required
+          {...partAttrs('input')}
+          style={{
+            width: '100%',
+            border: '1px solid var(--forgot-password-border, #d1d5db)',
+            background: 'transparent',
+            color: 'inherit',
+            padding: '10px 12px',
+            outline: 'none'
+          }}
+        />
+      </label>
+
+      {error && (
+        <div data-forgot-password-error="" {...partAttrs('error')} role="alert">
+          {error}
+        </div>
+      )}
+
+      <button
+        type="submit"
+        data-forgot-password-submit=""
+        {...partAttrs('submit', { loading: isLoading, disabled: isLoading })}
+        disabled={isLoading}
+        aria-busy={isLoading}
+        style={{
+          padding: '12px 20px',
+          background: 'var(--forgot-password-cta-bg, #111827)',
+          color: 'var(--forgot-password-cta-color, #ffffff)',
+          border: 'none',
+          cursor: isLoading ? 'not-allowed' : 'pointer',
+          opacity: isLoading ? 0.7 : 1
+        }}
+      >
+        {isLoading && busyLabel ? busyLabel : submitLabel}
+      </button>
+    </form>
+  );
+};
+
+export default ForgotPasswordBlock;