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

package/src/blocks/listing-result-count-block.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import React from 'react';
+import { useLocalization } from '@akinon/next/hooks';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import {
+  listingPlaceholderStyle,
+  readToggle,
+  useListingContext
+} from './listing-context';
+
+/**
+ * Functional listing block: the "N products" line. The number is
+ * commerce-driven (the pagination count of the category/search response, not
+ * the number of cards on the current page); the editor owns the wording,
+ * the singular/empty variants and whether the number is its own element.
+ *
+ * Parts: text, count.
+ * Properties: template, oneTemplate, zeroTemplate, groupThousands,
+ * highlightCount.
+ */
+const ListingResultCountBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const listing = useListingContext();
+  const { locale } = useLocalization();
+
+  const template = String(
+    getResponsiveValue(
+      block.properties?.template,
+      currentBreakpoint,
+      '{count} products'
+    )
+  );
+  const oneTemplate = String(
+    getResponsiveValue(block.properties?.oneTemplate, currentBreakpoint, '')
+  );
+  const zeroTemplate = String(
+    getResponsiveValue(block.properties?.zeroTemplate, currentBreakpoint, '')
+  );
+  const groupThousands = readToggle(
+    block.properties?.groupThousands,
+    currentBreakpoint,
+    false
+  );
+  const highlightCount = readToggle(
+    block.properties?.highlightCount,
+    currentBreakpoint,
+    false
+  );
+
+  if (!listing) {
+    return isDesigner ? (
+      <div data-listing-result-count="" style={listingPlaceholderStyle}>
+        Result count (no listing data)
+      </div>
+    ) : null;
+  }
+
+  const count = listing.resultCount ?? 0;
+
+  // The locale is explicit: an implicit Intl locale resolves to the Node
+  // default on the server and the browser's on the client, so the grouped
+  // number would differ between SSR and hydration.
+  let formatted = String(count);
+  if (groupThousands) {
+    try {
+      formatted = new Intl.NumberFormat(locale || 'tr-TR').format(count);
+    } catch {
+      formatted = String(count);
+    }
+  }
+
+  // A zero/one wording only applies when the brand supplied one, so the
+  // plural template stays the single source by default.
+  const activeTemplate =
+    count === 0 && zeroTemplate
+      ? zeroTemplate
+      : count === 1 && oneTemplate
+      ? oneTemplate
+      : template;
+
+  const hasPlaceholder = activeTemplate.includes('{count}');
+  // A template without the placeholder must still show the number, and it
+  // reads as a count only in front of the wording ("24 products").
+  const text = hasPlaceholder
+    ? activeTemplate.replace('{count}', formatted)
+    : `${formatted} ${activeTemplate}`.trim();
+
+  const rootProps = {
+    'data-listing-result-count': '',
+    'data-listing-result-total': count,
+    ...partAttrs('text', { empty: count === 0 })
+  };
+
+  if (!highlightCount) {
+    return <span {...rootProps}>{text}</span>;
+  }
+
+  const countNode = (
+    <span {...partAttrs('count', { empty: count === 0 })}>{formatted}</span>
+  );
+
+  if (!hasPlaceholder) {
+    return (
+      <span {...rootProps}>
+        {countNode} {activeTemplate}
+      </span>
+    );
+  }
+
+  const placeholderIndex = activeTemplate.indexOf('{count}');
+
+  return (
+    <span {...rootProps}>
+      {activeTemplate.slice(0, placeholderIndex)}
+      {countNode}
+      {activeTemplate.slice(placeholderIndex + '{count}'.length)}
+    </span>
+  );
+};
+
+export default ListingResultCountBlock;

package/src/blocks/listing-title-block.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import React from 'react';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import {
+  listingPlaceholderStyle,
+  readToggle,
+  useListingContext
+} from './listing-context';
+
+const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'div', 'span'];
+
+/**
+ * Functional listing block: the category/search page title. The text is
+ * commerce-driven (category name, or "Search results for …" on search);
+ * the editor owns the heading level, the optional result count and styling.
+ *
+ * Parts: title, count.
+ * Properties: tag, fallbackTitle, titleTemplate, maxLength, showCount,
+ * countTemplate, countPosition.
+ */
+const ListingTitleBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const listing = useListingContext();
+
+  const requestedTag = String(
+    getResponsiveValue(block.properties?.tag, currentBreakpoint, 'h1')
+  );
+  const Tag = (
+    HEADING_TAGS.includes(requestedTag) ? requestedTag : 'h1'
+  ) as 'h1';
+  const showCount = readToggle(
+    block.properties?.showCount,
+    currentBreakpoint,
+    false
+  );
+  const countTemplate = String(
+    getResponsiveValue(
+      block.properties?.countTemplate,
+      currentBreakpoint,
+      '({count})'
+    )
+  );
+  const countPosition = String(
+    getResponsiveValue(block.properties?.countPosition, currentBreakpoint, 'after')
+  );
+  const fallbackTitle = String(
+    getResponsiveValue(block.properties?.fallbackTitle, currentBreakpoint, '')
+  );
+  const titleTemplate = String(
+    getResponsiveValue(
+      block.properties?.titleTemplate,
+      currentBreakpoint,
+      '{title}'
+    )
+  );
+  const maxLengthRaw = Math.round(
+    Number(getResponsiveValue(block.properties?.maxLength, currentBreakpoint, 0))
+  );
+  // 0 keeps the full title; anything else is a hard character cap.
+  const maxLength = Number.isFinite(maxLengthRaw) && maxLengthRaw > 0 ? maxLengthRaw : 0;
+  const ellipsis = String(
+    getResponsiveValue(block.properties?.ellipsis, currentBreakpoint, '…')
+  );
+
+  // A search page with no commerce title still needs a heading, so the brand
+  // can supply one; empty by default, which keeps the old "render nothing".
+  const sourceTitle = listing?.title || fallbackTitle;
+
+  if (!sourceTitle) {
+    return isDesigner ? (
+      <div data-listing-title="" style={listingPlaceholderStyle}>
+        Listing title (no listing data)
+      </div>
+    ) : null;
+  }
+
+  const truncated =
+    maxLength > 0 && sourceTitle.length > maxLength
+      ? `${sourceTitle.slice(0, maxLength).trimEnd()}${ellipsis}`
+      : sourceTitle;
+  const title = titleTemplate.includes('{title}')
+    ? titleTemplate.replace('{title}', truncated)
+    : truncated;
+
+  const resultCount = listing?.resultCount ?? 0;
+  const countLabel = countTemplate.includes('{count}')
+    ? countTemplate.replace('{count}', String(resultCount))
+    : `${countTemplate} ${resultCount}`.trim();
+  const showCountBefore = countPosition === 'before';
+
+  const countNode = showCount ? (
+    <span
+      data-listing-title-count=""
+      {...partAttrs('count', { empty: resultCount === 0 })}
+      style={showCountBefore ? { marginRight: '8px' } : { marginLeft: '8px' }}
+    >
+      {countLabel}
+    </span>
+  ) : null;
+
+  return (
+    <Tag data-listing-title="" {...partAttrs('title')} style={{ margin: 0 }}>
+      {showCountBefore && countNode}
+      {title}
+      {!showCountBefore && countNode}
+    </Tag>
+  );
+};
+
+export default ListingTitleBlock;

package/src/blocks/oauth-buttons-block.tsx

@@ -0,0 +1,205 @@
+'use client';
+
+import React from 'react';
+import NextLink from 'next/link';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { DesignerPlaceholder, readToggle } from './product-block-utils';
+import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { BlockRendererProps } from './block-renderer-registry';
+
+/**
+ * Social sign-in on v1 is NOT a next-auth social provider. Brands register only
+ * credential providers (`default` for login/registration, `oauth` to adopt an
+ * already-established commerce session), so `signIn('google')` would resolve to
+ * no provider and bounce to the error page.
+ *
+ * The real flow is a plain navigation to `/{provider}/login/`, which the core
+ * `withOauthLogin` middleware rewrites to `{commerceUrl}/{provider}/login/`.
+ * Commerce performs the handshake, sets `osessionid`, and sends the shopper
+ * back through `/auth/oauth-login`, where the core component calls
+ * `signIn('oauth')` to mint the next-auth session. A real link (rather than a
+ * button + router.push) also matters because the middleware stores the return
+ * url from the `referer` header that the browser only sends on a navigation.
+ */
+const providerHref = (provider: string) => `/${provider}/login/`;
+
+/** Brands configure providers commerce-side, so the label is derived. */
+const providerLabel = (provider: string) =>
+  provider.charAt(0).toUpperCase() + provider.slice(1);
+
+/**
+ * `google=Continue with Google,apple=Sign in with Apple`. A provider with no
+ * entry keeps the derived label, so an empty setting reproduces the built-in
+ * capitalised names.
+ */
+const parseProviderLabels = (raw: string): Record<string, string> => {
+  const overrides: Record<string, string> = {};
+
+  raw
+    .split(',')
+    .map((entry) => entry.trim())
+    .filter(Boolean)
+    .forEach((entry) => {
+      const separator = entry.indexOf('=');
+      if (separator <= 0) return;
+
+      const key = entry.slice(0, separator).trim().toLowerCase();
+      const label = entry.slice(separator + 1).trim();
+
+      if (key && label) overrides[key] = label;
+    });
+
+  return overrides;
+};
+
+/**
+ * Functional auth block: social login buttons. Which providers exist is a
+ * commerce-side setting with no storefront manifest to read, so the author
+ * lists the ones the brand actually enabled; nothing is rendered for an empty
+ * list rather than guessing.
+ * Properties: providers, providerLabels, layout, equalWidth, showIcons,
+ * emptyLabel.
+ * Parts: list, button-{provider}, label, icon, icon-{provider}. Buttons are
+ * addressed per provider because Google and Apple both mandate their own
+ * button styling, and one shared part could not satisfy both.
+ */
+const OauthButtonsBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const rawProviders = prop('providers', 'google,apple,facebook');
+  const layout = prop('layout', 'row') === 'column' ? 'column' : 'row';
+  const labelOverrides = parseProviderLabels(prop('providerLabels', ''));
+  const showIcons = readToggle(
+    block.properties?.showIcons,
+    currentBreakpoint,
+    false
+  );
+  const equalWidth = readToggle(
+    block.properties?.equalWidth,
+    currentBreakpoint,
+    true
+  );
+  const emptyLabel = prop('emptyLabel', 'Social login (no providers listed)');
+
+  const providers = rawProviders
+    .split(',')
+    .map((entry) => entry.trim().toLowerCase())
+    // The value becomes a url segment, so anything that is not a plain slug is
+    // dropped instead of being interpolated into the path.
+    .filter((entry) => /^[a-z0-9-]+$/.test(entry));
+
+  // A designer who marked a child as the button layout gets that layout
+  // repeated per provider; otherwise the built-in button renders unchanged.
+  const customButtons = hasItemTemplate(block, currentBreakpoint) ? (
+    <ItemTemplateList
+      block={block}
+      items={providers.map((provider) => ({
+        provider,
+        label: labelOverrides[provider] || providerLabel(provider),
+        name: labelOverrides[provider] || providerLabel(provider),
+        url: providerHref(provider)
+      }))}
+      placeholderId={placeholderId}
+      sectionId={sectionId}
+      isDesigner={isDesigner}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+    />
+  ) : null;
+
+  if (providers.length === 0 && !customButtons) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label={emptyLabel}
+        attribute="data-oauth-buttons"
+      />
+    ) : null;
+  }
+
+  return (
+    <div
+      data-oauth-buttons=""
+      data-oauth-buttons-layout={layout}
+      {...partAttrs('list')}
+      style={{
+        display: 'flex',
+        flexDirection: layout === 'column' ? 'column' : 'row',
+        flexWrap: layout === 'row' ? 'wrap' : 'nowrap',
+        gap: 'var(--oauth-buttons-gap, 12px)'
+      }}
+    >
+      {customButtons ??
+        providers.map((provider) => (
+          <NextLink
+            key={provider}
+            data-oauth-button={provider}
+            {...partAttrs(`button-${provider}`)}
+            href={isDesigner ? '#' : providerHref(provider)}
+            // The handshake leaves the Next.js app entirely, so the client router
+            // must not try to prefetch or soft-navigate it.
+            prefetch={false}
+            onClick={(event) => {
+              if (isDesigner) event.preventDefault();
+            }}
+            style={{
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: '8px',
+              flex:
+                layout === 'row' ? (equalWidth ? '1 1 0' : '0 0 auto') : '0 0 auto',
+              padding: '10px 16px',
+              border: '1px solid var(--oauth-buttons-border, #d1d5db)',
+              color: 'inherit',
+              textDecoration: 'none',
+              cursor: 'pointer'
+            }}
+          >
+            {showIcons && (
+              // Two nested boxes on purpose: the outer one is the shared size
+              // slot every provider agrees on, the inner one is where a brand
+              // drops that provider's own mark.
+              <span
+                {...partAttrs('icon')}
+                aria-hidden="true"
+                style={{
+                  display: 'inline-flex',
+                  flex: '0 0 auto',
+                  width: '18px',
+                  height: '18px'
+                }}
+              >
+                <span
+                  data-oauth-icon={provider}
+                  {...partAttrs(`icon-${provider}`)}
+                  style={{
+                    display: 'block',
+                    width: '100%',
+                    height: '100%',
+                    backgroundSize: 'contain',
+                    backgroundRepeat: 'no-repeat',
+                    backgroundPosition: 'center'
+                  }}
+                />
+              </span>
+            )}
+            <span {...partAttrs('label')}>
+              {labelOverrides[provider] || providerLabel(provider)}
+            </span>
+          </NextLink>
+        ))}
+    </div>
+  );
+};
+
+export default OauthButtonsBlock;