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

package/src/blocks/order-success-block.tsx

@@ -0,0 +1,641 @@
+'use client';
+
+import React from 'react';
+import NextLink from 'next/link';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useFetchCheckoutResultQuery } from '@akinon/next/data/client/checkout';
+import { useLocalization } from '@akinon/next/hooks';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { useThemePageContext } from '../theme-page-context';
+import { formatDate, formatMoney, parseAmount } from './commerce-format';
+import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { groupOrderItems, readToggle } from './product-block-utils';
+import { BlockRendererProps } from './block-renderer-registry';
+
+interface OrderAddressLike {
+  title?: string;
+  line?: string;
+  postcode?: string;
+  first_name?: string;
+  last_name?: string;
+  phone_number?: string;
+  city?: { name?: string };
+  township?: { name?: string };
+  district?: { name?: string };
+}
+
+interface OrderItemLike {
+  id?: number;
+  price?: string;
+  status?: { label?: string };
+  product?: {
+    pk?: number;
+    name?: string;
+    image?: string;
+    absolute_url?: string;
+  } | null;
+}
+
+interface OrderLike {
+  id?: number;
+  number?: string;
+  amount?: string;
+  shipping_amount?: string;
+  created_date?: string;
+  user_email?: string;
+  currency?: { value?: string };
+  status?: { label?: string };
+  shipping_address?: OrderAddressLike;
+  orderitem_set?: OrderItemLike[];
+  discountitem_set?: Array<{ name?: string; amount?: string }>;
+}
+
+interface RecapRow {
+  key: string;
+  label: string;
+  value: string;
+  type: string;
+}
+
+/**
+ * Route words that can sit in the last path segment when no token is present
+ * (/orders/completed with a trailing slash, for instance). Treating one of
+ * them as a token would fire a guaranteed 404 against commerce.
+ */
+const RESERVED_SEGMENTS = new Set([
+  'completed',
+  'complete',
+  'success',
+  'order',
+  'orders',
+  'checkout'
+]);
+
+/** Order tokens are long opaque hashes; anything short is a route segment. */
+const MIN_TOKEN_LENGTH = 8;
+
+const resolveToken = (pathname: string, tokenParam: string | null): string => {
+  const fromQuery = (tokenParam || '').trim();
+  if (fromQuery) return fromQuery;
+
+  const segments = String(pathname || '')
+    .split('/')
+    .filter(Boolean);
+  const last = segments[segments.length - 1] || '';
+
+  if (!last || last.length < MIN_TOKEN_LENGTH) return '';
+  if (RESERVED_SEGMENTS.has(last.toLowerCase())) return '';
+
+  return last;
+};
+
+/** Replaces the {number} / {email} placeholders an author may use in copy. */
+const fillTemplate = (
+  template: string,
+  values: { number: string; email: string }
+) =>
+  template
+    .replace(/\{number\}/g, values.number)
+    .replace(/\{email\}/g, values.email);
+
+const formatAddress = (address?: OrderAddressLike): string[] => {
+  if (!address) return [];
+
+  const locality = [
+    address.district?.name,
+    address.township?.name,
+    address.city?.name
+  ]
+    .filter(Boolean)
+    .join(' / ');
+
+  return [
+    address.title,
+    [address.line, address.postcode].filter(Boolean).join(' '),
+    locality,
+    [address.first_name, address.last_name].filter(Boolean).join(' '),
+    address.phone_number
+  ].filter((entry): entry is string => Boolean(entry && entry.trim()));
+};
+
+const readCount = (value: unknown, fallback: number): number => {
+  const numeric = Math.round(Number(value));
+
+  return Number.isFinite(numeric) && numeric >= 0 ? numeric : fallback;
+};
+
+const SuccessGlyph = ({ icon }: { icon: string }) =>
+  icon === 'circle-check' ? (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="9" />
+      <path d="M8 12.5l2.5 2.5L16 9.5" />
+    </svg>
+  ) : (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M4 12.5l5 5L20 6.5" />
+    </svg>
+  );
+
+/**
+ * Thank-you recap for the order completion page. Purely a read of an order
+ * that already exists: the order is fetched by the token pz puts in the
+ * completion URL (/orders/completed/<token>), which is the same read the
+ * brand's own completed page performs. Nothing here can create, mutate or
+ * re-submit an order.
+ *
+ * Parts: root, header, icon, title, subtitle, meta, row, row-label, row-value,
+ * number, list, item, image, content, name, quantity, line-total, totals,
+ * total, total-label, total-value, address, address-title, address-line, cta,
+ * empty. A child marked as the item template replaces the line rows, the
+ * totals rows or the meta rows (`itemTemplateTarget`).
+ *
+ * `title` and `subtitle` accept {number} and {email} placeholders.
+ */
+const OrderSuccessBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const boolProp = (key: string, fallback: boolean) =>
+    readToggle(block.properties?.[key], currentBreakpoint, fallback);
+
+  const titleTemplate = prop('title', 'Thank you for your order');
+  const subtitleTemplate = prop(
+    'subtitle',
+    'We sent the confirmation to {email}.'
+  );
+  const continueHref = prop('continueHref', '/').trim();
+  const continueLabel = prop('continueLabel', 'Continue shopping').trim();
+  const showLineItems = boolProp('showLineItems', true);
+  const showIcon = boolProp('showIcon', false);
+  const successIcon = prop('successIcon', 'check');
+  const showMeta = boolProp('showMeta', true);
+  const showOrderNumber = boolProp('showOrderNumber', true);
+  const showOrderDate = boolProp('showOrderDate', true);
+  const showEmail = boolProp('showEmail', true);
+  const showTotals = boolProp('showTotals', true);
+  const showSubtotal = boolProp('showSubtotal', true);
+  const showDiscounts = boolProp('showDiscounts', true);
+  const showShipping = boolProp('showShipping', true);
+  const showAddress = boolProp('showAddress', true);
+  const showItemImage = boolProp('showItemImage', true);
+  const showItemQuantity = boolProp('showItemQuantity', true);
+
+  const numberLabel = prop('numberLabel', 'Order number');
+  const dateLabel = prop('dateLabel', 'Order date');
+  const emailLabel = prop('emailLabel', 'E-mail');
+  const subtotalLabel = prop('subtotalLabel', 'Subtotal');
+  const discountLabel = prop('discountLabel', 'Discount');
+  const shippingLabel = prop('shippingLabel', 'Shipping');
+  const totalLabel = prop('totalLabel', 'Total');
+  const addressLabel = prop('addressLabel', 'Shipping address');
+  const quantityPrefix = prop('quantityPrefix', '×');
+  const discountPrefix = prop('discountPrefix', '-');
+  const emptyLabel = prop('emptyLabel', '').trim();
+  const loadingLabel = prop('loadingLabel', '').trim();
+  const templateTarget = prop('itemTemplateTarget', 'items');
+
+  const imageWidth = readCount(
+    getResponsiveValue(block.properties?.imageWidth, currentBreakpoint, 56),
+    56
+  );
+  const imageHeight = readCount(
+    getResponsiveValue(block.properties?.imageHeight, currentBreakpoint, 75),
+    75
+  );
+  const maxItems = readCount(
+    getResponsiveValue(block.properties?.maxItems, currentBreakpoint, 0),
+    0
+  );
+
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const pageContext = useThemePageContext();
+  const { locale, currency: localeCurrency } = useLocalization();
+
+  // No page supplies an order page context yet, so this read is inert for now;
+  // it is kept so the block switches over without a code change once it is.
+  const contextOrder = (pageContext?.order ?? null) as OrderLike | null;
+  const token = resolveToken(pathname || '', searchParams?.get('token') ?? null);
+
+  const { data, isLoading } = useFetchCheckoutResultQuery(token, {
+    skip: !token || Boolean(contextOrder)
+  });
+
+  const order =
+    contextOrder ??
+    ((data as { order?: OrderLike } | undefined)?.order || null);
+
+  if (!order) {
+    const authoredLabel = isLoading ? loadingLabel : emptyLabel;
+
+    if (!isDesigner && !authoredLabel) return null;
+
+    const designerLabel = isLoading
+      ? 'Order recap (loading)'
+      : 'Order recap (no order token in URL)';
+
+    return (
+      <div
+        data-order-success=""
+        data-order-success-state="empty"
+        {...partAttrs('empty', { empty: true, loading: isLoading })}
+      >
+        {authoredLabel || (isDesigner ? designerLabel : '')}
+      </div>
+    );
+  }
+
+  // The order carries the currency it was placed in; the storefront currency
+  // is only the fallback.
+  const currency = order.currency?.value || localeCurrency || '';
+  const money = (value?: string | number) =>
+    formatMoney(value, { locale, currency });
+
+  const items = Array.isArray(order.orderitem_set) ? order.orderitem_set : [];
+
+  // pz writes one order line per unit, so identical products are collapsed and
+  // counted — otherwise a quantity of three reads as three separate rows. The
+  // grouping is shared with the account order detail block so both read the
+  // same payload the same way.
+  const allGroupedItems = groupOrderItems(items);
+  const groupedItems =
+    maxItems > 0 ? allGroupedItems.slice(0, maxItems) : allGroupedItems;
+
+  // Commerce does not send an order subtotal, so it is summed from the lines
+  // with the shared parser: Number() returns NaN for "1.299,90".
+  const subtotal = items.reduce(
+    (total, item) => total + (parseAmount(item.price) ?? 0),
+    0
+  );
+
+  const discounts = (order.discountitem_set || []).filter(
+    (discount) => (parseAmount(discount?.amount) ?? 0) > 0
+  );
+
+  const orderNumber = order.number || (order.id ? `#${order.id}` : '');
+  const email = order.user_email || '';
+  const addressLines = formatAddress(order.shipping_address);
+
+  const metaRows: RecapRow[] = [];
+
+  if (showOrderNumber && orderNumber) {
+    metaRows.push({
+      key: 'number',
+      label: numberLabel,
+      value: orderNumber,
+      type: 'number'
+    });
+  }
+
+  if (showOrderDate && order.created_date) {
+    metaRows.push({
+      key: 'date',
+      label: dateLabel,
+      value: formatDate(order.created_date, locale),
+      type: 'date'
+    });
+  }
+
+  if (showEmail && email) {
+    metaRows.push({
+      key: 'email',
+      label: emailLabel,
+      value: email,
+      type: 'email'
+    });
+  }
+
+  const totalsRows: RecapRow[] = [];
+
+  if (showSubtotal && subtotal > 0) {
+    totalsRows.push({
+      key: 'subtotal',
+      label: subtotalLabel,
+      value: money(subtotal),
+      type: 'subtotal'
+    });
+  }
+
+  if (showDiscounts) {
+    discounts.forEach((discount, index) => {
+      totalsRows.push({
+        key: `${discount.name || 'discount'}-${index}`,
+        label: discount.name || discountLabel,
+        value: `${discountPrefix}${money(discount.amount)}`,
+        type: 'discount'
+      });
+    });
+  }
+
+  if (showShipping && order.shipping_amount !== undefined) {
+    totalsRows.push({
+      key: 'shipping',
+      label: shippingLabel,
+      value: money(order.shipping_amount),
+      type: 'shipping'
+    });
+  }
+
+  totalsRows.push({
+    key: 'total',
+    label: totalLabel,
+    value: money(order.amount),
+    type: 'total'
+  });
+
+  // Plain objects so a designer binds item.name / item.image / item.quantity /
+  // item.price / item.url in their own row layout.
+  const templateItems = groupedItems.map((item) => ({
+    key: item.key,
+    name: item.name,
+    image: item.image,
+    url: item.href,
+    quantity: item.quantity,
+    price: money(item.price),
+    total: item.total === null ? '' : money(item.total)
+  }));
+
+  const hasTemplate = hasItemTemplate(block, currentBreakpoint);
+
+  const templateList = (rows: Record<string, unknown>[]) => (
+    <ItemTemplateList
+      block={block}
+      items={rows}
+      placeholderId={placeholderId}
+      sectionId={sectionId}
+      isDesigner={isDesigner}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+    />
+  );
+
+  const customItems =
+    hasTemplate && templateTarget === 'items'
+      ? templateList(templateItems as unknown as Record<string, unknown>[])
+      : null;
+  const customTotals =
+    hasTemplate && templateTarget === 'totals'
+      ? templateList(totalsRows as unknown as Record<string, unknown>[])
+      : null;
+  const customMeta =
+    hasTemplate && templateTarget === 'meta'
+      ? templateList(metaRows as unknown as Record<string, unknown>[])
+      : null;
+
+  const rowStyle: React.CSSProperties = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    gap: '12px',
+    padding: '4px 0'
+  };
+
+  const renderRow = (row: RecapRow) =>
+    row.type === 'total' ? (
+      <div
+        key={row.key}
+        style={{ ...rowStyle, fontWeight: 600 }}
+        data-order-success-row="total"
+        {...partAttrs('total')}
+      >
+        <span {...partAttrs('total-label')}>{row.label}</span>
+        <span data-order-success-total="" {...partAttrs('total-value')}>
+          {row.value}
+        </span>
+      </div>
+    ) : (
+      <div
+        key={row.key}
+        style={rowStyle}
+        data-order-success-row={row.type}
+        {...partAttrs('row')}
+      >
+        <span {...partAttrs('row-label')}>{row.label}</span>
+        <span
+          {...(row.type === 'number'
+            ? { 'data-order-success-number': '' }
+            : null)}
+          {...(row.type === 'email' ? { 'data-order-success-email': '' } : null)}
+          {...partAttrs(row.type === 'number' ? 'number' : 'row-value')}
+        >
+          {row.value}
+        </span>
+      </div>
+    );
+
+  return (
+    <div
+      data-order-success=""
+      {...partAttrs('root')}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--order-success-gap, 20px)'
+      }}
+    >
+      <div data-order-success-header="" {...partAttrs('header')}>
+        {showIcon && (
+          <div
+            data-order-success-icon=""
+            aria-hidden="true"
+            {...partAttrs('icon')}
+            style={{ marginBottom: '8px' }}
+          >
+            <SuccessGlyph icon={successIcon} />
+          </div>
+        )}
+
+        <div
+          data-order-success-title=""
+          {...partAttrs('title')}
+          style={{ fontWeight: 600 }}
+        >
+          {fillTemplate(titleTemplate, { number: orderNumber, email })}
+        </div>
+
+        {subtitleTemplate && (
+          <div
+            data-order-success-subtitle=""
+            {...partAttrs('subtitle')}
+            style={{ marginTop: '6px' }}
+          >
+            {fillTemplate(subtitleTemplate, { number: orderNumber, email })}
+          </div>
+        )}
+      </div>
+
+      {showMeta && (
+        <div data-order-success-meta="" {...partAttrs('meta')}>
+          {customMeta ?? metaRows.map(renderRow)}
+        </div>
+      )}
+
+      {showLineItems && (groupedItems.length > 0 || customItems) && (
+        <ul
+          data-order-success-items=""
+          {...partAttrs('list')}
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '12px',
+            listStyle: 'none',
+            margin: 0,
+            padding: 0
+          }}
+        >
+          {customItems ??
+            groupedItems.map((item) => (
+              <li
+                key={item.key}
+                data-order-success-item=""
+                {...partAttrs('item')}
+                style={{
+                  display: 'flex',
+                  alignItems: 'flex-start',
+                  gap: '12px'
+                }}
+              >
+                {showItemImage && item.image && (
+                  // Plain img: order 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={item.image}
+                    alt={item.name}
+                    width={imageWidth}
+                    height={imageHeight}
+                    {...partAttrs('image')}
+                    style={{
+                      objectFit: 'cover',
+                      display: 'block',
+                      flex: '0 0 auto'
+                    }}
+                  />
+                )}
+
+                <div
+                  {...partAttrs('content')}
+                  style={{ flex: '1 1 auto', minWidth: 0 }}
+                >
+                  {item.href ? (
+                    <NextLink
+                      // NextLink warns when href resolves to undefined, so the
+                      // order line url is resolved here as well as guarded above.
+                      href={isDesigner ? '#' : item.href || '#'}
+                      data-order-success-item-name=""
+                      {...partAttrs('name')}
+                      // Navigating inside the designer iframe would drop the
+                      // author out of the page they are editing.
+                      onClick={(event) => {
+                        if (isDesigner) event.preventDefault();
+                      }}
+                      style={{ color: 'inherit', textDecoration: 'none' }}
+                    >
+                      {item.name}
+                    </NextLink>
+                  ) : (
+                    <span data-order-success-item-name="" {...partAttrs('name')}>
+                      {item.name}
+                    </span>
+                  )}
+
+                  {showItemQuantity && (
+                    <div
+                      {...partAttrs('quantity')}
+                      style={{ marginTop: '2px', opacity: 0.8 }}
+                    >
+                      {quantityPrefix}
+                      {item.quantity}
+                    </div>
+                  )}
+                </div>
+
+                <span
+                  data-order-success-item-price=""
+                  {...partAttrs('line-total')}
+                  style={{ flex: '0 0 auto' }}
+                >
+                  {money(item.price)}
+                </span>
+              </li>
+            ))}
+        </ul>
+      )}
+
+      {showTotals && (
+        <div data-order-success-totals="" {...partAttrs('totals')}>
+          {customTotals ?? totalsRows.map(renderRow)}
+        </div>
+      )}
+
+      {showAddress && addressLines.length > 0 && (
+        <div data-order-success-address="" {...partAttrs('address')}>
+          <div
+            {...partAttrs('address-title')}
+            style={{ fontWeight: 600, marginBottom: '6px' }}
+          >
+            {addressLabel}
+          </div>
+          {addressLines.map((line, index) => (
+            <div key={`address-line-${index}`} {...partAttrs('address-line')}>
+              {line}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {continueHref && continueLabel && (
+        <NextLink
+          // NextLink warns when href resolves to undefined, so the continue CTA
+          // target is resolved here as well as guarded above.
+          href={isDesigner ? '#' : continueHref || '#'}
+          data-order-success-continue=""
+          {...partAttrs('cta')}
+          // Navigating inside the designer iframe would drop the author out of
+          // the page they are editing, so the CTA is inert there.
+          onClick={(event) => {
+            if (isDesigner) event.preventDefault();
+          }}
+          style={{
+            display: 'block',
+            textAlign: 'center',
+            padding: '12px 20px',
+            background: 'var(--order-success-cta-bg, #111827)',
+            color: 'var(--order-success-cta-color, #ffffff)',
+            textDecoration: 'none'
+          }}
+        >
+          {continueLabel}
+        </NextLink>
+      )}
+    </div>
+  );
+};
+
+export default OrderSuccessBlock;