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

package/src/blocks/address-list-block.tsx

@@ -0,0 +1,348 @@
+'use client';
+
+import React from 'react';
+import { useSession } from 'next-auth/react';
+import {
+  useGetAddressesQuery,
+  useRemoveAddressMutation,
+  useSetDefaultAddressMutation
+} from '@akinon/next/data/client/address';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder, readToggle } from './product-block-utils';
+
+interface AddressLike {
+  pk?: number;
+  title?: string;
+  first_name?: string;
+  last_name?: string;
+  line?: string;
+  phone_number?: string;
+  postcode?: string;
+  primary?: boolean;
+  city?: { name?: string } | null;
+  township?: { name?: string } | null;
+  district?: { name?: string } | null;
+}
+
+/**
+ * Joins the administrative parts commerce returns as nested objects. Every
+ * level is optional per country, so empty segments are dropped instead of
+ * leaving stray separators in the rendered line.
+ */
+const formatLocality = (address: AddressLike, separator: string): string =>
+  [address.district?.name, address.township?.name, address.city?.name]
+    .filter((part) => Boolean(part && String(part).trim()))
+    .join(separator);
+
+/**
+ * Functional account block: the shopper's saved address book. Address CONTENT
+ * stays commerce-driven (address service); the editor owns whether the row
+ * actions are exposed, every caption, the card columns and the styling.
+ *
+ * Editing an address is deliberately NOT offered here: the edit payload needs
+ * the full country -> city -> township -> district cascade, which is four more
+ * queries and a validated form — far past what a single block should own. The
+ * two mutations that are safe with the data already on screen (make default,
+ * delete) are the ones wired up.
+ * Properties: showActions, showName, showPhone, showDefaultBadge, columns,
+ * emptyLabel, defaultBadgeLabel, setDefaultLabel, deleteLabel,
+ * localitySeparator, lineSeparator.
+ * Parts: list, item (selected on the default address), title, badge, name,
+ * line, phone, actions, action, empty.
+ */
+const AddressListBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const showActions = readToggle(
+    block.properties?.showActions,
+    currentBreakpoint,
+    true
+  );
+  const showName = readToggle(
+    block.properties?.showName,
+    currentBreakpoint,
+    true
+  );
+  const showPhone = readToggle(
+    block.properties?.showPhone,
+    currentBreakpoint,
+    true
+  );
+  const showDefaultBadge = readToggle(
+    block.properties?.showDefaultBadge,
+    currentBreakpoint,
+    true
+  );
+  const text = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+  const emptyLabel = text('emptyLabel', 'You have no saved addresses yet.');
+  const defaultBadgeLabel = text('defaultBadgeLabel', 'Default');
+  const setDefaultLabel = text('setDefaultLabel', 'Make default');
+  const deleteLabel = text('deleteLabel', 'Delete');
+  const localitySeparator = text('localitySeparator', ' / ');
+  const lineSeparator = text('lineSeparator', ', ');
+  const rawColumns = Math.round(
+    Number(getResponsiveValue(block.properties?.columns, currentBreakpoint, 1))
+  );
+  const columns =
+    Number.isFinite(rawColumns) && rawColumns > 0 ? Math.min(rawColumns, 4) : 1;
+
+  const { status } = useSession();
+  const isAuthenticated = status === 'authenticated';
+
+  // Guests have no address book; skipping avoids a guaranteed 403 on every
+  // page that hosts this block.
+  const { data, isLoading } = useGetAddressesQuery(undefined, {
+    skip: !isAuthenticated
+  });
+  const [removeAddress, { isLoading: isRemoving }] = useRemoveAddressMutation();
+  const [setDefaultAddress, { isLoading: isSettingDefault }] =
+    useSetDefaultAddressMutation();
+
+  const addresses: AddressLike[] =
+    (data as { results?: AddressLike[] } | undefined)?.results ?? [];
+  const isBusy = isRemoving || isSettingDefault;
+
+  const makeDefault = (pk?: number) => {
+    // A click inside the designer must never touch the shopper's real data.
+    if (isDesigner || isBusy || pk === undefined) return;
+
+    setDefaultAddress({ pk, primary: true });
+  };
+
+  const deleteAddress = (pk?: number) => {
+    if (isDesigner || isBusy || pk === undefined) return;
+
+    removeAddress(pk);
+  };
+
+  const rows = addresses.map((address, index) => {
+    const locality = formatLocality(address, localitySeparator);
+    const fullName = [address.first_name, address.last_name]
+      .filter(Boolean)
+      .join(' ');
+
+    return {
+      key: String(address.pk ?? index),
+      pk: address.pk ?? '',
+      title: address.title || '',
+      name: fullName,
+      firstName: address.first_name || '',
+      lastName: address.last_name || '',
+      line: [address.line, locality, address.postcode]
+        .filter(Boolean)
+        .join(lineSeparator),
+      street: address.line || '',
+      locality,
+      city: address.city?.name || '',
+      township: address.township?.name || '',
+      district: address.district?.name || '',
+      postcode: address.postcode || '',
+      phone: address.phone_number || '',
+      isDefault: address.primary === true
+    };
+  });
+
+  // A designer who marked a child as the card layout gets that layout repeated
+  // per address; 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}
+    />
+  ) : null;
+
+  if (addresses.length === 0 && !customCards) {
+    if (isDesigner) {
+      return (
+        <DesignerPlaceholder
+          label={
+            isLoading ? 'Address list (loading)' : 'Address list (no addresses)'
+          }
+          attribute="data-address-list"
+        />
+      );
+    }
+
+    // The shopper-facing empty copy is only honest once the account query has
+    // actually resolved; before that (or for guests) the block stays absent.
+    if (!isAuthenticated || isLoading || !emptyLabel) return null;
+
+    return (
+      <div
+        data-address-list=""
+        data-address-list-state="empty"
+        {...partAttrs('empty', { empty: true })}
+      >
+        {emptyLabel}
+      </div>
+    );
+  }
+
+  const actionStyle: React.CSSProperties = {
+    background: 'none',
+    border: 'none',
+    padding: 0,
+    color: 'inherit',
+    font: 'inherit',
+    textDecoration: 'underline',
+    cursor: isBusy ? 'not-allowed' : 'pointer'
+  };
+
+  // One column keeps the flex column the block has always rendered; a grid is
+  // only introduced once the author actually asks for more than one.
+  const listLayout: React.CSSProperties =
+    columns > 1
+      ? {
+          display: 'grid',
+          gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`
+        }
+      : { display: 'flex', flexDirection: 'column' };
+
+  return (
+    <ul
+      data-address-list=""
+      data-address-list-columns={columns}
+      aria-busy={isBusy}
+      {...partAttrs('list')}
+      style={{
+        ...listLayout,
+        gap: 'var(--address-list-gap, 16px)',
+        listStyle: 'none',
+        margin: 0,
+        padding: 0
+      }}
+    >
+      {customCards ??
+        addresses.map((address, index) => {
+          const locality = formatLocality(address, localitySeparator);
+          const fullName = [address.first_name, address.last_name]
+            .filter(Boolean)
+            .join(' ');
+
+          return (
+            <li
+              key={address.pk ?? index}
+              data-address-item=""
+              data-address-item-default={address.primary ? 'true' : 'false'}
+              {...partAttrs('item', { selected: address.primary === true })}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '6px',
+                padding: '16px',
+                border: '1px solid var(--address-list-border, #e5e7eb)'
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  gap: '8px'
+                }}
+              >
+                <span
+                  data-address-title=""
+                  {...partAttrs('title')}
+                  style={{ fontWeight: 600 }}
+                >
+                  {address.title}
+                </span>
+
+                {showDefaultBadge && address.primary && (
+                  <span
+                    data-address-default-badge=""
+                    {...partAttrs('badge')}
+                    style={{
+                      padding: '2px 8px',
+                      border: '1px solid currentColor',
+                      borderRadius: '999px',
+                      fontSize: '0.85em',
+                      opacity: 0.8
+                    }}
+                  >
+                    {defaultBadgeLabel}
+                  </span>
+                )}
+              </div>
+
+              {showName && fullName && (
+                <span data-address-name="" {...partAttrs('name')}>
+                  {fullName}
+                </span>
+              )}
+
+              <span
+                data-address-line=""
+                {...partAttrs('line')}
+                style={{ opacity: 0.8 }}
+              >
+                {[address.line, locality, address.postcode]
+                  .filter(Boolean)
+                  .join(lineSeparator)}
+              </span>
+
+              {showPhone && address.phone_number && (
+                <span
+                  data-address-phone=""
+                  {...partAttrs('phone')}
+                  style={{ opacity: 0.8 }}
+                >
+                  {address.phone_number}
+                </span>
+              )}
+
+              {showActions && (
+                <div
+                  data-address-actions=""
+                  {...partAttrs('actions')}
+                  style={{ display: 'flex', gap: '16px', marginTop: '6px' }}
+                >
+                  {!address.primary && (
+                    <button
+                      type="button"
+                      data-address-set-default=""
+                      disabled={isBusy}
+                      onClick={() => makeDefault(address.pk)}
+                      {...partAttrs('action', { loading: isBusy })}
+                      style={actionStyle}
+                    >
+                      {setDefaultLabel}
+                    </button>
+                  )}
+
+                  <button
+                    type="button"
+                    data-address-delete=""
+                    disabled={isBusy}
+                    onClick={() => deleteAddress(address.pk)}
+                    {...partAttrs('action', { loading: isBusy })}
+                    style={actionStyle}
+                  >
+                    {deleteLabel}
+                  </button>
+                </div>
+              )}
+            </li>
+          );
+        })}
+    </ul>
+  );
+};
+
+export default AddressListBlock;

package/src/blocks/applied-filters-block.tsx

@@ -0,0 +1,288 @@
+'use client';
+
+import React from 'react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { BlockRendererProps } from './block-renderer-registry';
+import {
+  buildListingHref,
+  listingPlaceholderStyle,
+  readToggle,
+  useListingContext
+} from './listing-context';
+
+interface AppliedFilterChip {
+  key: string;
+  searchKey: string;
+  value: string;
+  label: string;
+  facetName: string;
+}
+
+const fillTemplate = (
+  template: string,
+  facet: string,
+  value: string
+): string => template.split('{facet}').join(facet).split('{value}').join(value);
+
+/**
+ * Functional listing block: chips for the filters currently applied. The
+ * facet labels are commerce-driven and the applied state is read from the
+ * querystring, using the same `search_key` keys `facet-filters-block` writes,
+ * so a chip disappears the moment its filter is removed there and vice versa.
+ *
+ * Parts: list, chip, label, remove, clear-all.
+ * Properties: showClearAll, clearAllLabel, clearAllPosition, chipTemplate,
+ * showRemoveIcon, removeAriaTemplate, maxChips, pageQueryParam.
+ */
+const AppliedFiltersBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const listing = useListingContext();
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const showClearAll = readToggle(
+    block.properties?.showClearAll,
+    currentBreakpoint,
+    true
+  );
+  const clearAllLabel = String(
+    getResponsiveValue(
+      block.properties?.clearAllLabel,
+      currentBreakpoint,
+      'Clear all'
+    )
+  );
+  const clearAllPosition = String(
+    getResponsiveValue(
+      block.properties?.clearAllPosition,
+      currentBreakpoint,
+      'end'
+    )
+  );
+  // `{facet}` is the group name ("Color"), `{value}` the chosen label ("Red").
+  const chipTemplate = String(
+    getResponsiveValue(block.properties?.chipTemplate, currentBreakpoint, '{value}')
+  );
+  const showRemoveIcon = readToggle(
+    block.properties?.showRemoveIcon,
+    currentBreakpoint,
+    true
+  );
+  const removeAriaTemplate = String(
+    getResponsiveValue(
+      block.properties?.removeAriaTemplate,
+      currentBreakpoint,
+      'Remove {facet}: {value}'
+    )
+  );
+  const maxChipsRaw = Math.round(
+    Number(getResponsiveValue(block.properties?.maxChips, currentBreakpoint, 0))
+  );
+  // 0 shows every applied filter, which is what published compositions render.
+  const maxChips =
+    Number.isFinite(maxChipsRaw) && maxChipsRaw > 0 ? maxChipsRaw : 0;
+  const pageQueryParam = String(
+    getResponsiveValue(block.properties?.pageQueryParam, currentBreakpoint, 'page')
+  );
+
+  const facets = listing?.facets || [];
+
+  const allChips: AppliedFilterChip[] = [];
+  facets.forEach((facet) => {
+    // The querystring is the live source: after a client-side push it is
+    // already updated while the server-rendered `is_selected` flags still
+    // describe the previous request.
+    const applied = searchParams ? searchParams.getAll(facet.searchKey) : [];
+
+    facet.choices.forEach((choice) => {
+      if (!choice.isSelected && !applied.includes(choice.value)) return;
+
+      allChips.push({
+        key: `${facet.key}-${choice.value}`,
+        searchKey: facet.searchKey,
+        value: choice.value,
+        label: choice.label,
+        facetName: facet.name
+      });
+    });
+  });
+
+  const chips = maxChips > 0 ? allChips.slice(0, maxChips) : allChips;
+
+  const hrefForParams = (params: URLSearchParams) => {
+    // Any filter change invalidates the current page cursor.
+    params.delete(pageQueryParam);
+    return buildListingHref(pathname || listing?.path || '', params);
+  };
+
+  /**
+   * The URL that drops one chip. Split out from the click handler so a
+   * designer-authored chip can bind a link to `item.url` and still remove the
+   * filter — a custom row has no way to reach the handler.
+   */
+  const hrefForRemove = (chip: AppliedFilterChip): string => {
+    const params = new URLSearchParams(
+      searchParams ? searchParams.toString() : ''
+    );
+    const remaining = params
+      .getAll(chip.searchKey)
+      .filter((value) => value !== chip.value);
+
+    params.delete(chip.searchKey);
+    remaining.forEach((value) => params.append(chip.searchKey, value));
+
+    return hrefForParams(params);
+  };
+
+  const handleRemove = (chip: AppliedFilterChip) => {
+    // Navigating inside the designer iframe would drop the author out of the
+    // page they are editing, so chips are inert there.
+    if (isDesigner) return;
+
+    router.push(hrefForRemove(chip));
+  };
+
+  const handleClearAll = () => {
+    if (isDesigner) return;
+
+    const params = new URLSearchParams(
+      searchParams ? searchParams.toString() : ''
+    );
+    // Only facet keys are dropped: the sorter and the search text are not
+    // filters and must survive a "clear all".
+    facets.forEach((facet) => params.delete(facet.searchKey));
+
+    router.push(hrefForParams(params));
+  };
+
+  // A designer who marked a child as the chip layout gets that layout
+  // repeated per applied filter; otherwise the built-in chips render.
+  const chipItems = chips.map((chip) => ({
+    key: chip.key,
+    name: chip.label,
+    label: chip.label,
+    value: chip.value,
+    facet: chip.facetName,
+    searchKey: chip.searchKey,
+    url: hrefForRemove(chip)
+  }));
+  const customChips = hasItemTemplate(block, currentBreakpoint) ? (
+    <ItemTemplateList
+      block={block}
+      items={chipItems as unknown as Record<string, unknown>[]}
+      placeholderId={placeholderId}
+      sectionId={sectionId}
+      isDesigner={isDesigner}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+    />
+  ) : null;
+
+  // With a custom chip the designer still needs something to arrange, so the
+  // template draws its own placeholder rows. On the storefront "no filters
+  // applied" still means the whole block disappears — a bare "Clear all" with
+  // nothing to clear would be worse than nothing.
+  if (chips.length === 0 && !(isDesigner && customChips)) {
+    return isDesigner ? (
+      <div data-applied-filters="" style={listingPlaceholderStyle}>
+        Applied filters (nothing selected)
+      </div>
+    ) : null;
+  }
+
+  const clearAllNode = showClearAll && (
+    <button
+      type="button"
+      data-applied-filters-clear=""
+      {...partAttrs('clear-all')}
+      onClick={handleClearAll}
+      style={{
+        padding: '4px 6px',
+        border: 'none',
+        background: 'transparent',
+        color: 'inherit',
+        font: 'inherit',
+        textDecoration: 'underline',
+        cursor: 'pointer'
+      }}
+    >
+      {clearAllLabel}
+    </button>
+  );
+
+  return (
+    <div
+      data-applied-filters=""
+      {...partAttrs('list')}
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: 'var(--applied-filters-gap, 8px)'
+      }}
+    >
+      {clearAllPosition === 'start' && clearAllNode}
+
+      {customChips ??
+        chips.map((chip) => (
+          <button
+            key={chip.key}
+            type="button"
+            data-applied-filter={chip.value}
+            data-applied-filter-key={chip.searchKey}
+            aria-label={fillTemplate(
+              removeAriaTemplate,
+              chip.facetName,
+              chip.label
+            )}
+            {...partAttrs('chip')}
+            onClick={() => handleRemove(chip)}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: '6px',
+              padding: '4px 10px',
+              border: '1px solid currentColor',
+              borderRadius: '999px',
+              background: 'transparent',
+              color: 'inherit',
+              font: 'inherit',
+              cursor: 'pointer'
+            }}
+          >
+            <span {...partAttrs('label')}>
+              {fillTemplate(chipTemplate, chip.facetName, chip.label)}
+            </span>
+            {showRemoveIcon && (
+              <svg
+                width="12"
+                height="12"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                aria-hidden="true"
+                {...partAttrs('remove')}
+              >
+                <path d="M6 6l12 12M18 6L6 18" />
+              </svg>
+            )}
+          </button>
+        ))}
+
+      {clearAllPosition !== 'start' && clearAllNode}
+    </div>
+  );
+};
+
+export default AppliedFiltersBlock;