@akinon/pz-theme 2.0.164-rc.1 → 2.0.164

package/src/utils/theme-settings-readers.ts

@@ -0,0 +1,205 @@
+import { MAX_INLINE_SVG_LENGTH, toSafeImageSource } from './svg-image-source';
+
+/**
+ * Validated readers for the theme_settings keys the editor's settings page
+ * writes and blocks or chrome consume directly.
+ *
+ * No `'use client'` and no client imports: `overlays/theme-modals.tsx` is a
+ * server component and calls these while rendering, and a server module that
+ * imports a value from a client module receives a client reference instead
+ * of the function (see overlays/__tests__/server-read-path-client-free.test.ts).
+ *
+ * Every reader treats settings as untrusted. They come from the editor, but
+ * also from theme packages imported as JSON and from direct API writes.
+ */
+
+type SettingsLike = Record<string, unknown> | null | undefined;
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  !!value && typeof value === 'object' && !Array.isArray(value);
+
+const CONTROL_CHARACTER = /[\u0000-\u001F\u007F]/;
+
+/* -------------------------------------------------------------------------- */
+/* Breadcrumb                                                                  */
+/* -------------------------------------------------------------------------- */
+
+/** Long enough for '›', '→' or ' / ', short enough to stay a separator. */
+export const MAX_BREADCRUMB_SEPARATOR_LENGTH = 8;
+
+/**
+ * The theme-wide breadcrumb separator (`breadcrumbSeparator`), or `undefined`
+ * when the theme sets none — callers chain their own default with `??`.
+ *
+ * Rendered as text by the breadcrumb blocks, so no escaping is needed; the
+ * validation only keeps a separator a separator. Length is counted in code
+ * points so a single emoji or arrow is one character.
+ */
+export const readThemeBreadcrumbSeparator = (
+  settings: SettingsLike
+): string | undefined => {
+  const raw = settings?.breadcrumbSeparator;
+  if (typeof raw !== 'string') return undefined;
+
+  const value = raw.trim();
+  if (!value || CONTROL_CHARACTER.test(value)) return undefined;
+  if (Array.from(value).length > MAX_BREADCRUMB_SEPARATOR_LENGTH) {
+    return undefined;
+  }
+
+  return value;
+};
+
+/* -------------------------------------------------------------------------- */
+/* Social networks                                                             */
+/* -------------------------------------------------------------------------- */
+
+const SAFE_SOCIAL_HREF = /^(https?:\/\/|mailto:|tel:|\/(?![/\\]))/i;
+
+/**
+ * `instagram.com/brand` or `www.facebook.com/brand`: what a merchant types
+ * into a "link" field. Only a dotted host qualifies, so a bare word never
+ * turns into a link to some other site.
+ */
+const BARE_DOMAIN =
+  /^(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z]{2,}(?::\d{1,5})?(?:[/?#]\S*)?$/i;
+
+/**
+ * A social link as an href the storefront can render, or `null`.
+ *
+ * Accepted: http(s) URLs, `mailto:`, `tel:` and root-relative paths (never
+ * `//host`). A bare domain gets `https://`. Everything else — `javascript:`,
+ * `data:`, a protocol-relative URL, a value with control characters (which
+ * browsers strip, so `/\t/evil.example` would become `//evil.example`) — is
+ * dropped.
+ */
+export const toSafeSocialHref = (value: unknown): string | null => {
+  if (typeof value !== 'string') return null;
+
+  const href = value.trim();
+  if (!href || CONTROL_CHARACTER.test(href)) return null;
+
+  if (SAFE_SOCIAL_HREF.test(href)) {
+    // Whitespace inside a web URL is a typo, not a link.
+    if (/^(https?:|\/)/i.test(href) && /\s/.test(href)) return null;
+    return href;
+  }
+
+  if (BARE_DOMAIN.test(href)) return `https://${href}`;
+
+  return null;
+};
+
+/** One entry of `socialNetworks`, ready to render. */
+export interface ThemeSocialNetworkEntry {
+  /** The stored network key, lower-cased (`facebook`, `x`, legacy `twitter`). */
+  network: string;
+  /** A validated href (see `toSafeSocialHref`). */
+  href: string;
+  /**
+   * The brand's own icon as an image source (`data:image/svg+xml…` for
+   * uploaded markup), or `null` to draw the built-in platform glyph.
+   */
+  iconSrc: string | null;
+}
+
+const NETWORK_KEY = /^[a-z0-9_-]{1,32}$/;
+
+/**
+ * `socialNetworks` (`Record<network, { url, icon }>`) as a list in insertion
+ * order — the order the settings page shows and lets the merchant arrange.
+ *
+ * An entry without a usable link is skipped: these entries render as links,
+ * and a platform mark that goes nowhere is an unfinished row, not content.
+ */
+export const readThemeSocialNetworks = (
+  settings: SettingsLike
+): ThemeSocialNetworkEntry[] => {
+  const networks = settings?.socialNetworks;
+  if (!isRecord(networks)) return [];
+
+  const entries: ThemeSocialNetworkEntry[] = [];
+  const seen = new Set<string>();
+
+  Object.entries(networks).forEach(([key, raw]) => {
+    const network = key.trim().toLowerCase();
+    // The settings page stores X as `x`, the old one as `twitter`; they are
+    // one network, so a blob carrying both still draws one mark.
+    const identity = network === 'twitter' ? 'x' : network;
+    if (!NETWORK_KEY.test(network) || seen.has(identity)) return;
+    if (!isRecord(raw)) return;
+
+    const href = toSafeSocialHref(raw.url);
+    if (!href) return;
+
+    seen.add(identity);
+    entries.push({ network, href, iconSrc: toSafeImageSource(raw.icon) });
+  });
+
+  return entries;
+};
+
+/* -------------------------------------------------------------------------- */
+/* Page up                                                                     */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Brands with a fixed bottom bar (an add-to-cart strip, a cookie banner) set
+ * this CSS variable on any ancestor to lift the back-to-top button above it.
+ * When it is unset the button measures the corner itself
+ * (chrome/theme-page-up.tsx `measureBottomOverlay`). Declared here, outside
+ * the client module, so server code importing it gets the string.
+ */
+export const PAGE_UP_OFFSET_VARIABLE = '--pz-bottom-overlay-offset';
+
+/**
+ * The only settings the back-to-top button reads. Picked on the server so the
+ * client component does not receive (and the page does not serialize) the
+ * whole settings blob a second time.
+ */
+// A type alias, not an interface, so it stays assignable to the
+// `Record<string, unknown>` settings shape `resolveIconSource` and
+// `ThemePageUp` take.
+export type ThemePageUpSettings = {
+  pageUpEnabled?: true;
+  /** Uploaded SVG markup or an image URL; unset draws the built-in arrow. */
+  pageUpIcon?: string;
+  /**
+   * The brand's override of the catalogue `up-arrow` icon, which is the
+   * built-in arrow's own override (see blocks/icon-source.tsx).
+   */
+  icons?: { 'up-arrow': unknown };
+};
+
+/**
+ * Empty unless the button is on: `ThemeModals` passes this to a client
+ * component on every page, and a client component's props are serialized
+ * into the page whatever it renders, so an icon of a theme that never turned
+ * the button on would ride along everywhere. The designer's live toggle
+ * still works: the editor's frames carry the full settings, read here again.
+ */
+export const readThemePageUpSettings = (
+  settings: SettingsLike
+): ThemePageUpSettings => {
+  if (!isRecord(settings) || settings.pageUpEnabled !== true) return {};
+
+  const result: ThemePageUpSettings = { pageUpEnabled: true };
+
+  const icon = settings.pageUpIcon;
+  if (
+    typeof icon === 'string' &&
+    icon.trim() &&
+    icon.length <= MAX_INLINE_SVG_LENGTH
+  ) {
+    result.pageUpIcon = icon;
+  }
+
+  const upArrow = isRecord(settings.icons)
+    ? settings.icons['up-arrow']
+    : undefined;
+  if ((typeof upArrow === 'string' && upArrow.trim()) || isRecord(upArrow)) {
+    result.icons = { 'up-arrow': upArrow };
+  }
+
+  return result;
+};

package/src/blocks/__tests__/order-line-actions.test.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import {
-  registerOrderLineActions,
-  renderOrderLineActions
-} from '../order-line-actions';
-
-const context = {
-  order: { id: 7, number: '20920397829', created_date: '2026-10-01' },
-  line: {
-    key: '1',
-    name: 'Product',
-    image: '',
-    href: '',
-    price: '100',
-    total: 100,
-    quantity: 1,
-    item: { id: 1, status: { value: '550', label: 'Delivered' } }
-  },
-  isDesigner: false
-};
-
-describe('order line actions registry', () => {
-  it('renders nothing until a brand registers', () => {
-    expect(renderOrderLineActions(context)).toBeNull();
-  });
-
-  it('hands the line and order to the registered renderer', () => {
-    const renderer = jest.fn(() => <span>action</span>);
-    const unregister = registerOrderLineActions(renderer);
-
-    expect(renderOrderLineActions(context)).toEqual(<span>action</span>);
-    expect(renderer).toHaveBeenCalledWith(context);
-
-    unregister();
-    expect(renderOrderLineActions(context)).toBeNull();
-  });
-
-  it('swallows a throwing renderer so a brand bug cannot break the line', () => {
-    const unregister = registerOrderLineActions(() => {
-      throw new Error('boom');
-    });
-
-    expect(renderOrderLineActions(context)).toBeNull();
-    unregister();
-  });
-
-  it('only forgets the renderer it was asked to forget', () => {
-    const first = registerOrderLineActions(() => 'first');
-    registerOrderLineActions(() => 'second');
-
-    first();
-    expect(renderOrderLineActions(context)).toBe('second');
-  });
-});

package/src/blocks/order-line-actions.ts

@@ -1,45 +0,0 @@
-import type { ReactNode } from 'react';
-import type { GroupedOrderLine, OrderLineLike } from './product-block-utils';
-
-export interface OrderLineActionsOrder {
-  id?: number;
-  number?: string;
-  created_date?: string;
-}
-
-export type OrderLineActionsItem = OrderLineLike & {
-  status?: { value?: string; label?: string };
-  [key: string]: unknown;
-};
-
-export interface OrderLineActionsContext {
-  order: OrderLineActionsOrder;
-  line: GroupedOrderLine<OrderLineActionsItem>;
-  isDesigner: boolean;
-}
-
-export type OrderLineActionsRenderer = (
-  context: OrderLineActionsContext
-) => ReactNode;
-
-let renderer: OrderLineActionsRenderer | null = null;
-
-export const registerOrderLineActions = (
-  fn: OrderLineActionsRenderer
-): (() => void) => {
-  renderer = fn;
-  return () => {
-    if (renderer === fn) renderer = null;
-  };
-};
-
-export const renderOrderLineActions = (
-  context: OrderLineActionsContext
-): ReactNode => {
-  if (!renderer) return null;
-  try {
-    return renderer(context) ?? null;
-  } catch {
-    return null;
-  }
-};

package/src/utils/__tests__/sanitize-rich-text.test.ts

@@ -1,80 +0,0 @@
-import { sanitizeRichText } from '../sanitize-rich-text';
-
-describe('sanitizeRichText', () => {
-  it('keeps the markup the editor writes', () => {
-    const html =
-      '<p>Sipariş <b>verirseniz</b> <i>yarın</i> <u>kapınızda</u></p><ul><li>bir</li></ul><h2>Başlık</h2><br>';
-
-    expect(sanitizeRichText(html)).toBe(
-      '<p>Sipariş <b>verirseniz</b> <i>yarın</i> <u>kapınızda</u></p><ul><li>bir</li></ul><h2>Başlık</h2><br />'
-    );
-  });
-
-  it('drops scripts, event handlers and unknown tags but keeps their text', () => {
-    const html =
-      '<p onclick="x()">a<script>alert(1)</script><custom>b</custom><img src=x onerror=alert(1)></p>';
-
-    expect(sanitizeRichText(html)).toBe('<p>ab</p>');
-  });
-
-  it('keeps only safe links and forces rel on new-tab links', () => {
-    expect(
-      sanitizeRichText(
-        '<a href="javascript:alert(1)">x</a><a href="https://gant.com" target="_blank">y</a><a href="/sss">z</a>'
-      )
-    ).toBe(
-      '<a>x</a><a href="https://gant.com" target="_blank" rel="noopener noreferrer">y</a><a href="/sss">z</a>'
-    );
-  });
-
-  it('keeps only the colour and emphasis styles', () => {
-    expect(
-      sanitizeRichText(
-        '<span style="color: #9a2320; position: fixed; background: url(x)">a</span>'
-      )
-    ).toBe('<span style="color: #9a2320">a</span>');
-  });
-
-  it('leaves text, entities and placeholders untouched', () => {
-    expect(sanitizeRichText('{{countdown}} &amp; {{add_day|4}}')).toBe(
-      '{{countdown}} &amp; {{add_day|4}}'
-    );
-    expect(sanitizeRichText('')).toBe('');
-  });
-
-  it('reads tag names the way the browser does, so no element slips through as text', () => {
-    expect(
-      sanitizeRichText(
-        '<x_y onmouseover=alert(1) style=position:fixed;inset:0>a</x_y>'
-      )
-    ).toBe('a');
-    expect(sanitizeRichText('<svg/onload=alert(1)>b')).toBe('b');
-  });
-
-  it('never lets an unfinished tag run into the markup that follows', () => {
-    expect(sanitizeRichText('<img src=x onerror=alert(1)')).toBe(
-      '&lt;img src=x onerror=alert(1)'
-    );
-    expect(sanitizeRichText('<p>a</p><b')).toBe('<p>a</p>&lt;b');
-  });
-
-  it('escapes every < that does not become a kept tag', () => {
-    expect(sanitizeRichText('a < b <3 c')).toBe('a &lt; b &lt;3 c');
-    expect(sanitizeRichText('<!DOCTYPE html><?xml version="1.0"?>x')).toBe(
-      '&lt;!DOCTYPE html>&lt;?xml version="1.0"?>x'
-    );
-    expect(sanitizeRichText('</>')).toBe('&lt;/>');
-  });
-
-  it('reads a quoted attribute value holding > as part of the tag', () => {
-    expect(sanitizeRichText('<a href="/x" title="a>b">t</a>')).toBe(
-      '<a href="/x">t</a>'
-    );
-  });
-
-  it('drops an unterminated comment or script to the end', () => {
-    expect(sanitizeRichText('a<!-- b')).toBe('a');
-    expect(sanitizeRichText('<!-->x')).toBe('x');
-    expect(sanitizeRichText('a<script>alert(1)')).toBe('a');
-  });
-});

package/src/utils/sanitize-rich-text.ts

@@ -1,215 +0,0 @@
-const ALLOWED_TAGS = new Set([
-  'p',
-  'div',
-  'br',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'ul',
-  'ol',
-  'li',
-  'b',
-  'strong',
-  'i',
-  'em',
-  'u',
-  's',
-  'span',
-  'a'
-]);
-
-const VOID_TAGS = new Set(['br']);
-
-const DROPPED_WITH_CONTENT = new Set([
-  'script',
-  'style',
-  'iframe',
-  'object',
-  'embed',
-  'template',
-  'noscript'
-]);
-
-const ALLOWED_STYLE_PROPERTIES = new Set([
-  'color',
-  'background-color',
-  'font-weight',
-  'font-style',
-  'text-decoration',
-  'text-decoration-line',
-  'text-align'
-]);
-
-const SAFE_HREF = /^(?:https?:\/\/|mailto:|tel:|\/(?!\/)|#|\?)/i;
-
-const ATTRIBUTE_PATTERN =
-  /([a-zA-Z-]+)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'>]+))/g;
-
-const escapeAttribute = (value: string): string =>
-  value
-    .replace(/&/g, '&')
-    .replace(/"/g, '"')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;');
-
-const readAttributes = (raw: string): Record<string, string> => {
-  const attributes: Record<string, string> = {};
-  let match = ATTRIBUTE_PATTERN.exec(raw);
-  while (match) {
-    attributes[match[1].toLowerCase()] = match[2] ?? match[3] ?? match[4] ?? '';
-    match = ATTRIBUTE_PATTERN.exec(raw);
-  }
-  ATTRIBUTE_PATTERN.lastIndex = 0;
-  return attributes;
-};
-
-const safeStyle = (value: string): string =>
-  value
-    .split(';')
-    .map((declaration) => declaration.trim())
-    .filter(Boolean)
-    .map((declaration) => {
-      const colon = declaration.indexOf(':');
-      if (colon === -1) return null;
-      const property = declaration.slice(0, colon).trim().toLowerCase();
-      const propertyValue = declaration.slice(colon + 1).trim();
-      if (!ALLOWED_STYLE_PROPERTIES.has(property)) return null;
-      if (/url\(|expression\(|javascript:|\\/i.test(propertyValue)) return null;
-      return `${property}: ${propertyValue}`;
-    })
-    .filter((declaration): declaration is string => declaration !== null)
-    .join('; ');
-
-const openingTag = (name: string, raw: string): string => {
-  const attributes = readAttributes(raw);
-  const kept: string[] = [];
-
-  if (name === 'a') {
-    const href = attributes.href?.trim() ?? '';
-    if (href && SAFE_HREF.test(href)) {
-      kept.push(`href="${escapeAttribute(href)}"`);
-      if (attributes.target === '_blank') {
-        kept.push('target="_blank"', 'rel="noopener noreferrer"');
-      }
-    }
-  }
-
-  const style = attributes.style ? safeStyle(attributes.style) : '';
-  if (style) kept.push(`style="${escapeAttribute(style)}"`);
-
-  const suffix = kept.length ? ` ${kept.join(' ')}` : '';
-  return VOID_TAGS.has(name) ? `<${name}${suffix} />` : `<${name}${suffix}>`;
-};
-
-/**
- * One tag, read the way the HTML tokenizer reads it: the name runs up to
- * whitespace, `/` or `>` (so `x_y`, `svg/onload` and friends are names, not
- * text), attribute values may be quoted and may hold `>`, and the tag closes
- * at the first unquoted `>`.
- *
- * `null` when the input ends inside the tag. The browser would keep reading
- * into whatever markup follows — on the server that is React's own closing
- * tag — so an unfinished tag is never passed on; the caller escapes its `<`.
- */
-interface TagToken {
-  name: string;
-  attributes: string;
-  closing: boolean;
-  end: number;
-}
-
-const isAsciiLetter = (char: string): boolean => /^[A-Za-z]$/.test(char);
-const endsTagName = (char: string): boolean => /^[\s/>]$/.test(char);
-
-const readTag = (html: string, start: number): TagToken | null => {
-  let index = start + 1;
-  const closing = html.charAt(index) === '/';
-  if (closing) index += 1;
-
-  if (!isAsciiLetter(html.charAt(index))) return null;
-  const nameStart = index;
-  while (index < html.length && !endsTagName(html.charAt(index))) index += 1;
-  const name = html.slice(nameStart, index).toLowerCase();
-
-  const attributesStart = index;
-  let quote: string | null = null;
-  while (index < html.length) {
-    const char = html.charAt(index);
-    if (quote) {
-      if (char === quote) quote = null;
-    } else if (char === '"' || char === "'") {
-      quote = char;
-    } else if (char === '>') {
-      return {
-        name,
-        attributes: html.slice(attributesStart, index),
-        closing,
-        end: index + 1
-      };
-    }
-    index += 1;
-  }
-
-  return null;
-};
-
-/**
- * The output holds no `<` this function did not write itself: every `<` in
- * the input either becomes a rebuilt, allowlisted tag with escaped attribute
- * values, or `&lt;`. Comments are dropped, the content of script-like
- * elements with them. Text and entities are otherwise left as written, so the
- * editor's `&nbsp;` and the message placeholders survive.
- */
-export const sanitizeRichText = (html: string): string => {
-  if (!html) return '';
-
-  const output: string[] = [];
-  let dropUntil: string | null = null;
-  let position = 0;
-
-  const emit = (text: string) => {
-    if (!dropUntil && text) output.push(text);
-  };
-
-  while (position < html.length) {
-    const lt = html.indexOf('<', position);
-    if (lt === -1) {
-      emit(html.slice(position));
-      break;
-    }
-    emit(html.slice(position, lt));
-
-    if (html.startsWith('<!--', lt)) {
-      const end = html.indexOf('-->', lt + 2);
-      position = end === -1 ? html.length : end + 3;
-      continue;
-    }
-
-    const tag = readTag(html, lt);
-    if (!tag) {
-      emit('&lt;');
-      position = lt + 1;
-      continue;
-    }
-    position = tag.end;
-
-    if (dropUntil) {
-      if (tag.closing && tag.name === dropUntil) dropUntil = null;
-    } else if (DROPPED_WITH_CONTENT.has(tag.name)) {
-      if (!tag.closing) dropUntil = tag.name;
-    } else if (ALLOWED_TAGS.has(tag.name)) {
-      output.push(
-        tag.closing
-          ? VOID_TAGS.has(tag.name)
-            ? ''
-            : `</${tag.name}>`
-          : openingTag(tag.name, tag.attributes)
-      );
-    }
-  }
-
-  return output.join('');
-};