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

package/src/blocks/share-block.tsx

@@ -0,0 +1,667 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import {
+  DesignerPlaceholder,
+  getProductName,
+  pickProductField,
+  readToggle,
+  useThemeProduct
+} from './product-block-utils';
+
+type ShareNetwork =
+  | 'whatsapp'
+  | 'x'
+  | 'facebook'
+  | 'pinterest'
+  | 'linkedin'
+  | 'telegram'
+  | 'email'
+  | 'copy';
+
+/**
+ * Every network the block can draw, in the order both reference designs put
+ * them. The toggle key is what the editor writes, so the pair lives here once
+ * instead of being repeated in the reader and the renderer.
+ */
+const NETWORKS: Array<{
+  id: ShareNetwork;
+  toggleKey: string;
+  enabledByDefault: boolean;
+  label: string;
+}> = [
+  {
+    id: 'whatsapp',
+    toggleKey: 'showWhatsapp',
+    enabledByDefault: true,
+    label: 'WhatsApp'
+  },
+  { id: 'x', toggleKey: 'showX', enabledByDefault: true, label: 'X' },
+  {
+    id: 'facebook',
+    toggleKey: 'showFacebook',
+    enabledByDefault: true,
+    label: 'Facebook'
+  },
+  {
+    id: 'pinterest',
+    toggleKey: 'showPinterest',
+    enabledByDefault: true,
+    label: 'Pinterest'
+  },
+  {
+    id: 'linkedin',
+    toggleKey: 'showLinkedin',
+    enabledByDefault: false,
+    label: 'LinkedIn'
+  },
+  {
+    id: 'telegram',
+    toggleKey: 'showTelegram',
+    enabledByDefault: false,
+    label: 'Telegram'
+  },
+  { id: 'email', toggleKey: 'showEmail', enabledByDefault: true, label: 'Email' },
+  { id: 'copy', toggleKey: 'showCopy', enabledByDefault: true, label: '' }
+];
+
+/**
+ * Stroke glyphs on the same 24x24 grid the other chrome blocks draw on, so a
+ * single `stroke: currentColor` inherits whatever colour the row sits in.
+ */
+const GLYPHS: Record<ShareNetwork | 'share', React.ReactNode> = {
+  whatsapp: (
+    <>
+      <path d="M3.5 20.5l1.4-4.2A8.2 8.2 0 1 1 8 19.4z" />
+      <path d="M9 9.5c0 3 2.5 5.5 5.5 5.5l1-1.6-2-1-1 .9a5 5 0 0 1-1.8-1.8l.9-1-1-2z" />
+    </>
+  ),
+  x: <path d="M4 4l16 16M20 4L4 20" />,
+  facebook: (
+    <path d="M14 8.5V7a1.5 1.5 0 0 1 1.5-1.5H17V3h-2A4 4 0 0 0 11 7v1.5H9V11h2v10h3V11h2.2l.4-2.5H14z" />
+  ),
+  pinterest: (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M9.5 21l2.2-8.5" />
+      <path d="M9 11a3 3 0 1 1 5 2.2" />
+    </>
+  ),
+  linkedin: (
+    <>
+      <path d="M6.5 9.5V20" />
+      <circle cx="6.5" cy="5" r="1.1" />
+      <path d="M11 20v-6.5a3.5 3.5 0 0 1 7 0V20" />
+    </>
+  ),
+  telegram: <path d="M21 4.5L2.8 11.3l5 1.8L18 7l-7.5 7.4.3 5 2.7-3.4 4 3z" />,
+  email: (
+    <>
+      <rect x="3" y="5" width="18" height="14" rx="2" />
+      <path d="M3.5 6.5L12 13l8.5-6.5" />
+    </>
+  ),
+  copy: (
+    <>
+      <path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7L11.5 7" />
+      <path d="M14 10a4 4 0 0 0-5.7 0l-3 3A4 4 0 0 0 11 18.7l1.5-1.5" />
+    </>
+  ),
+  share: (
+    <>
+      <circle cx="18" cy="5" r="2.6" />
+      <circle cx="6" cy="12" r="2.6" />
+      <circle cx="18" cy="19" r="2.6" />
+      <path d="M8.3 10.8l7.4-4.3M8.3 13.2l7.4 4.3" />
+    </>
+  )
+};
+
+const HTTP_SCHEME = /^https?:\/\//i;
+
+/**
+ * A share target receives the URL as a query parameter, so a relative product
+ * path would send the shopper to the network's own domain. `window` does not
+ * exist on the server, which is why the origin is handed in: it is the authored
+ * `baseUrl` until hydration and the browser's own origin afterwards. Anything
+ * that does not resolve to http(s) returns '' rather than being passed on —
+ * the value is also what "copy link" puts on the clipboard.
+ */
+const toAbsoluteUrl = (path: string, origin: string): string => {
+  const trimmed = String(path || '').trim();
+  if (!trimmed) return '';
+
+  const isAbsolute = HTTP_SCHEME.test(trimmed);
+  if (!isAbsolute && !origin) return '';
+
+  try {
+    const resolved = isAbsolute ? new URL(trimmed) : new URL(trimmed, origin);
+
+    return resolved.protocol === 'http:' || resolved.protocol === 'https:'
+      ? resolved.toString()
+      : '';
+  } catch {
+    return '';
+  }
+};
+
+/**
+ * `network=Label` pairs, one per `;` or newline. The built-in names are English
+ * proper nouns; a brand running in another language has no other way to reach
+ * the accessible name of an icon.
+ */
+const parseLabelOverrides = (raw: string): Record<string, string> =>
+  String(raw || '')
+    .split(/[;\n]/)
+    .map((entry) => entry.trim())
+    .filter(Boolean)
+    .reduce<Record<string, string>>((acc, entry) => {
+      const separatorIndex = entry.indexOf('=');
+      if (separatorIndex <= 0) return acc;
+
+      const key = entry.slice(0, separatorIndex).trim().toLowerCase();
+      const value = entry.slice(separatorIndex + 1).trim();
+      if (key && value) acc[key] = value;
+
+      return acc;
+    }, {});
+
+const clampNumber = (
+  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));
+};
+
+interface ShareTargets {
+  url: string;
+  text: string;
+  subject: string;
+  body: string;
+  image: string;
+}
+
+/** Every interpolated value goes through encodeURIComponent, without exception. */
+const buildNetworkHref = (
+  network: ShareNetwork,
+  { url, text, subject, body, image }: ShareTargets
+): string => {
+  const enc = encodeURIComponent;
+
+  switch (network) {
+    case 'whatsapp':
+      return `https://wa.me/?text=${enc([text, url].filter(Boolean).join(' '))}`;
+    case 'x':
+      return `https://x.com/intent/post?url=${enc(url)}&text=${enc(text)}`;
+    case 'facebook':
+      return `https://www.facebook.com/sharer/sharer.php?u=${enc(url)}`;
+    case 'pinterest':
+      return `https://www.pinterest.com/pin/create/button/?url=${enc(
+        url
+      )}&media=${enc(image)}&description=${enc(text)}`;
+    case 'linkedin':
+      return `https://www.linkedin.com/sharing/share-offsite/?url=${enc(url)}`;
+    case 'telegram':
+      return `https://t.me/share/url?url=${enc(url)}&text=${enc(text)}`;
+    case 'email':
+      return `mailto:?subject=${enc(subject)}&body=${enc(body)}`;
+    default:
+      return '';
+  }
+};
+
+/**
+ * Functional block: sharing the ambient product — a repeated row's own product
+ * on a card, the page's product on a PDP — and the current page URL when there
+ * is no product at all, which is what makes it usable on a blog post or a
+ * campaign page. Two layouts cover both reference designs: an inline row of
+ * network icons (Nautica) and a single trigger that reveals them (GANT).
+ *
+ * `nativeShare` is the switch that keeps this inert: with it off the block
+ * never touches `navigator`, so the markup is decided entirely by `layout` and
+ * the server and the client agree. Turned on, the trigger feature-detects
+ * `navigator.share` AT CLICK TIME — detecting at import or render time would
+ * branch the markup on something the server cannot know, which hydrates as a
+ * mismatch — and falls back to revealing the icon row when it is absent.
+ *
+ * Properties: layout, nativeShare, showWhatsapp, showX, showFacebook,
+ * showPinterest, showLinkedin, showTelegram, showEmail, showCopy, triggerLabel,
+ * triggerAriaLabel, showTriggerIcon, panelPlacement, showLabels, labelOverrides,
+ * copyLabel, copyConfirmLabel, copyFailLabel, copyFallback, confirmDuration,
+ * shareTextTemplate, emailSubjectTemplate, emailBodyTemplate, iconSize, gap,
+ * openInNewTab, baseUrl, emptyLabel.
+ * Parts: root, trigger, list, item, icon, label, feedback, fallback-input.
+ */
+const ShareBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const product = useThemeProduct();
+
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const layoutValue = prop('layout', 'inline');
+  const layout = layoutValue === 'trigger' ? 'trigger' : 'inline';
+  const nativeShare = readToggle(
+    block.properties?.nativeShare,
+    currentBreakpoint,
+    false
+  );
+  const triggerLabel = prop('triggerLabel', 'Share');
+  const triggerAriaLabel = prop('triggerAriaLabel', '');
+  const showTriggerIcon = readToggle(
+    block.properties?.showTriggerIcon,
+    currentBreakpoint,
+    true
+  );
+  const panelPlacementValue = prop('panelPlacement', 'below');
+  const panelPlacement = ['below', 'above', 'inline'].includes(
+    panelPlacementValue
+  )
+    ? panelPlacementValue
+    : 'below';
+  const showLabels = readToggle(
+    block.properties?.showLabels,
+    currentBreakpoint,
+    false
+  );
+  const labelOverrides = parseLabelOverrides(prop('labelOverrides', ''));
+  const copyLabel = prop('copyLabel', 'Copy link');
+  const copyConfirmLabel = prop('copyConfirmLabel', 'Link copied');
+  const copyFailLabel = prop('copyFailLabel', 'Copy the link below');
+  const copyFallbackValue = prop('copyFallback', 'input');
+  const copyFallback = copyFallbackValue === 'hide' ? 'hide' : 'input';
+  const confirmDuration = clampNumber(
+    getResponsiveValue(block.properties?.confirmDuration, currentBreakpoint, 2),
+    2,
+    1,
+    15
+  );
+  const shareTextTemplate = prop('shareTextTemplate', '{title}');
+  const emailSubjectTemplate = prop('emailSubjectTemplate', '{title}');
+  const emailBodyTemplate = prop('emailBodyTemplate', '{title} {url}');
+  const iconSize = clampNumber(
+    getResponsiveValue(block.properties?.iconSize, currentBreakpoint, 20),
+    20,
+    12,
+    64
+  );
+  const gap = clampNumber(
+    getResponsiveValue(block.properties?.gap, currentBreakpoint, 12),
+    12,
+    0,
+    48
+  );
+  const openInNewTab = readToggle(
+    block.properties?.openInNewTab,
+    currentBreakpoint,
+    true
+  );
+  const baseUrl = prop('baseUrl', '');
+  const emptyLabel = prop('emptyLabel', 'Share (no networks enabled)');
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [feedback, setFeedback] = useState<'copied' | 'failed' | null>(null);
+  const [fallbackUrl, setFallbackUrl] = useState('');
+  // Initialised to the optimistic answer so the server markup and the first
+  // client render agree; the effect below corrects it after hydration, which is
+  // the only moment `navigator` may be consulted safely.
+  const [clipboardAvailable, setClipboardAvailable] = useState(true);
+  const [browserUrl, setBrowserUrl] = useState({ origin: '', href: '' });
+  const confirmTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const fallbackInput = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    setBrowserUrl({
+      origin: window.location.origin,
+      // The fragment is the shopper's scroll position, not part of what they
+      // meant to share.
+      href: window.location.href.split('#')[0]
+    });
+    setClipboardAvailable(
+      typeof navigator !== 'undefined' &&
+        typeof navigator.clipboard?.writeText === 'function'
+    );
+  }, []);
+
+  useEffect(
+    () => () => {
+      if (confirmTimer.current) clearTimeout(confirmTimer.current);
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (!fallbackUrl || !fallbackInput.current) return;
+
+    fallbackInput.current.focus();
+    fallbackInput.current.select();
+  }, [fallbackUrl]);
+
+  const origin = browserUrl.origin || baseUrl;
+  const productPath = String(pickProductField<string>(product, 'url') ?? '');
+  const productImages = Array.isArray(product?.images) ? product?.images : [];
+  const productImagePath = String(
+    pickProductField<string>(product, 'image') ??
+      productImages?.[0]?.image ??
+      productImages?.[0]?.url ??
+      ''
+  );
+
+  const shareUrl = productPath
+    ? toAbsoluteUrl(productPath, origin)
+    : browserUrl.href || toAbsoluteUrl('/', origin);
+  const productName = getProductName(product);
+  const applyTemplate = (template: string) =>
+    template
+      .replace(/\{title\}/g, productName)
+      .replace(/\{url\}/g, shareUrl)
+      .trim();
+
+  const targets: ShareTargets = {
+    url: shareUrl,
+    text: applyTemplate(shareTextTemplate),
+    subject: applyTemplate(emailSubjectTemplate),
+    body: applyTemplate(emailBodyTemplate),
+    image: toAbsoluteUrl(productImagePath, origin)
+  };
+
+  const label = (network: ShareNetwork, fallback: string) =>
+    labelOverrides[network] || fallback;
+
+  const enabled = NETWORKS.filter((network) =>
+    readToggle(
+      block.properties?.[network.toggleKey],
+      currentBreakpoint,
+      network.enabledByDefault
+    )
+  ).filter(
+    // A copy option that cannot copy and has nothing to fall back on is a
+    // button that does nothing, so the author's choice is to hide it.
+    (network) =>
+      network.id !== 'copy' || clipboardAvailable || copyFallback === 'input'
+  );
+
+  if (enabled.length === 0) {
+    return isDesigner ? (
+      <DesignerPlaceholder label={emptyLabel} attribute="data-share" />
+    ) : null;
+  }
+
+  const handleCopy = async () => {
+    // Designer: no clipboard write, no timer, nothing written anywhere.
+    if (isDesigner) return;
+    if (!shareUrl) return;
+
+    const clipboard =
+      typeof navigator !== 'undefined' ? navigator.clipboard : undefined;
+
+    if (clipboard && typeof clipboard.writeText === 'function') {
+      try {
+        await clipboard.writeText(shareUrl);
+        setFallbackUrl('');
+        setFeedback('copied');
+        if (confirmTimer.current) clearTimeout(confirmTimer.current);
+        confirmTimer.current = setTimeout(
+          () => setFeedback(null),
+          confirmDuration * 1000
+        );
+
+        return;
+      } catch {
+        // Denied permission, or a non-secure origin that exposes the API but
+        // refuses the write. Falling through is the honest outcome: claiming a
+        // copy that never happened is worse than admitting it.
+      }
+    }
+
+    setFeedback('failed');
+    setFallbackUrl(copyFallback === 'input' ? shareUrl : '');
+  };
+
+  const handleTrigger = async () => {
+    if (
+      !isDesigner &&
+      nativeShare &&
+      typeof navigator !== 'undefined' &&
+      typeof navigator.share === 'function'
+    ) {
+      try {
+        await navigator.share({
+          title: productName || undefined,
+          text: targets.text || undefined,
+          url: shareUrl || undefined
+        });
+
+        return;
+      } catch (error) {
+        // A dismissed sheet is a completed interaction, so the panel stays
+        // shut; anything else means the native path is unusable here and the
+        // icon row takes over.
+        if ((error as { name?: string })?.name === 'AbortError') return;
+      }
+    }
+
+    setIsOpen((current) => !current);
+  };
+
+  const usesTrigger = layout === 'trigger' || nativeShare;
+  const listVisible = !usesTrigger || isOpen;
+  const listId = `${block.id}-share-list`;
+
+  const glyph = (network: ShareNetwork | 'share') => (
+    <svg
+      width={iconSize}
+      height={iconSize}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.6}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      {...partAttrs('icon')}
+    >
+      {GLYPHS[network]}
+    </svg>
+  );
+
+  const list = listVisible ? (
+    <div
+      id={listId}
+      data-share-list=""
+      {...partAttrs('list', { open: usesTrigger && isOpen })}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        gap: `${gap}px`,
+        ...(usesTrigger && panelPlacement !== 'inline'
+          ? {
+              position: 'absolute',
+              zIndex: 20,
+              left: 0,
+              ...(panelPlacement === 'above'
+                ? { bottom: 'calc(100% + 8px)' }
+                : { top: 'calc(100% + 8px)' }),
+              background: 'var(--share-panel-bg, #ffffff)',
+              border: '1px solid var(--share-panel-border, #e5e7eb)',
+              padding: '8px'
+            }
+          : null)
+      }}
+    >
+      {enabled.map((network) => {
+        if (network.id === 'copy') {
+          const copied = feedback === 'copied';
+
+          return (
+            <button
+              key={network.id}
+              type="button"
+              data-share-item="copy"
+              {...partAttrs('item', { checked: copied })}
+              aria-label={showLabels ? undefined : label('copy', copyLabel)}
+              onClick={handleCopy}
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: showLabels ? '8px' : 0,
+                border: 'none',
+                background: 'transparent',
+                color: 'inherit',
+                font: 'inherit',
+                padding: 0,
+                lineHeight: showLabels ? 'normal' : 0,
+                cursor: 'pointer'
+              }}
+            >
+              {glyph('copy')}
+              {showLabels && (
+                <span data-share-label="" {...partAttrs('label')}>
+                  {label('copy', copyLabel)}
+                </span>
+              )}
+            </button>
+          );
+        }
+
+        const href = buildNetworkHref(network.id, targets);
+        const text = label(network.id, network.label);
+        // mailto never wants a second tab, and navigating inside the designer
+        // iframe would drop the author out of the page they are editing.
+        const opensNewTab =
+          !isDesigner && openInNewTab && network.id !== 'email';
+
+        return (
+          <a
+            key={network.id}
+            href={isDesigner ? '#' : href}
+            onClick={(event) => {
+              if (isDesigner) event.preventDefault();
+            }}
+            data-share-item={network.id}
+            {...partAttrs('item')}
+            aria-label={showLabels ? undefined : text}
+            title={showLabels ? undefined : text}
+            {...(opensNewTab
+              ? { target: '_blank', rel: 'noopener noreferrer' }
+              : {})}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              gap: showLabels ? '8px' : 0,
+              color: 'inherit',
+              textDecoration: 'none',
+              lineHeight: showLabels ? 'normal' : 0
+            }}
+          >
+            {glyph(network.id)}
+            {showLabels && (
+              <span data-share-label="" {...partAttrs('label')}>
+                {text}
+              </span>
+            )}
+          </a>
+        );
+      })}
+    </div>
+  ) : null;
+
+  return (
+    <div
+      data-share=""
+      data-share-layout={layout}
+      data-share-open={usesTrigger && isOpen ? 'true' : 'false'}
+      {...partAttrs('root', { open: usesTrigger && isOpen })}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        gap: `${gap}px`,
+        // Only a floating panel needs a positioned ancestor; an inline row must
+        // not silently become a containing block for whatever a brand puts
+        // inside it.
+        ...(usesTrigger && panelPlacement !== 'inline'
+          ? { position: 'relative' }
+          : null)
+      }}
+    >
+      {usesTrigger && (
+        <button
+          type="button"
+          data-share-trigger=""
+          {...partAttrs('trigger', { open: isOpen })}
+          aria-expanded={isOpen}
+          aria-controls={listVisible ? listId : undefined}
+          aria-label={triggerAriaLabel || undefined}
+          onClick={handleTrigger}
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '8px',
+            border: 'none',
+            background: 'transparent',
+            color: 'inherit',
+            font: 'inherit',
+            padding: 0,
+            cursor: 'pointer'
+          }}
+        >
+          {showTriggerIcon && glyph('share')}
+          {triggerLabel && (
+            <span data-share-trigger-label="" {...partAttrs('label')}>
+              {triggerLabel}
+            </span>
+          )}
+        </button>
+      )}
+
+      {list}
+
+      {feedback && (
+        <span
+          data-share-feedback={feedback}
+          {...partAttrs('feedback', { invalid: feedback === 'failed' })}
+          role="status"
+          aria-live="polite"
+        >
+          {feedback === 'copied' ? copyConfirmLabel : copyFailLabel}
+        </span>
+      )}
+
+      {fallbackUrl && (
+        <input
+          ref={fallbackInput}
+          type="text"
+          readOnly
+          value={fallbackUrl}
+          data-share-fallback-input=""
+          {...partAttrs('fallback-input')}
+          onFocus={(event) => event.currentTarget.select()}
+          style={{
+            border: '1px solid var(--share-panel-border, #e5e7eb)',
+            background: 'transparent',
+            color: 'inherit',
+            font: 'inherit',
+            padding: '6px 8px'
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ShareBlock;